/* Professional page styling */
.terms-content { 
    background: #fff; 
    padding: 30px; 
    border-radius: 10px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
    margin-bottom: 30px; 
}
.terms-content .section { 
    margin-bottom: 30px; 
    padding-bottom: 20px; 
    border-bottom: 1px solid #eee; 
}
.terms-content .section:last-child { 
    border-bottom: none; 
}
.terms-content .section h2, 
.terms-content h2 { 
    color: #0070ba; 
    font-size: 20px; 
    margin-bottom: 15px; 
    border-left: 4px solid #0070ba; 
    padding-left: 15px; 
}
.terms-content .section p, 
.terms-content p { 
    margin-bottom: 15px; 
    line-height: 1.6; 
}
.terms-content .section ul, 
.terms-content ul { 
    margin-bottom: 15px; 
    padding-left: 20px; 
}
.terms-content .section li, 
.terms-content li { 
    margin-bottom: 8px; 
    line-height: 1.5; 
}
.page-header { 
    text-align: center; 
    margin-bottom: 30px; 
    padding: 20px 0; 
    background: #f8f9fa; 
    border-radius: 10px; 
}
.page-header h1 { 
    color: #0070ba; 
    margin-bottom: 10px; 
}
/* Force body text color to black */
.terms-content, 
.terms-content p, 
.terms-content li { 
    color: #000; 
}
/* Additional styling for better readability */
.terms-content strong {
    color: #0070ba;
    font-weight: 600;
}
.terms-content a {
    color: #0070ba;
    text-decoration: underline;
}
.terms-content a:hover {
    color: #005a94;
}
/* Banner title styling (semantic fix) */
.banner-title {
    display: block;
    color: #fff;
    text-align: center;
}

/* Specific styling for CMS Pages (Policy, Terms, About etc.) */
.cms-page-banner {
    background: linear-gradient(135deg, #01313c 0%, #004d5b 100%) !important;
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}
.cms-page-banner:after {
    display: none !important; /* Remove the image overlay */
}
.cms-page-banner .h1-header-title {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
    margin: 0;
}

/* Hide redundant title if it's the first element in content */
.terms-content h2:first-child {
    display: none !important;
}

@media (max-width: 767px) {
    .cms-page-banner {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }
    .cms-page-banner .h1-header-title {
        font-size: 1.75rem !important;
    }
}