/* ========================================
   HELPSCOUT NAVBAR - SYNCOST MINIMALIST STYLE
   ======================================== */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Reset & Base Navbar - WHITE BACKGROUND */
.navbar {
    background: #ffffff !important;
    margin-bottom: 0 !important;
    border: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    padding: 0 !important;
    min-height: auto !important;
    position: relative !important;
    overflow: visible !important;
}

.navbar .navbar-inner {
    background: #ffffff !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    filter: none !important;
    padding: 0 !important;
    min-height: auto !important;
    overflow: visible !important;
}

/* Container Layout */
.navbar .navbar-inner .container-fluid {
    padding: 16px 40px !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
    /* justify-content: space-between !important; */
}

/* Logo/Brand Styling - NAVY BLUE */
.navbar .brand {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #03053c !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    text-shadow: none !important;
    float: left !important;
}

.navbar .brand:hover,
.navbar .brand:focus {
    color: #03053c !important;
    text-decoration: none !important;
    opacity: 0.9 !important;
}

/* Logo Image - Adjust if using image */
.navbar .brand img {
    max-height: 40px !important;
    width: auto !important;
    vertical-align: middle !important;
    filter: none !important;
}

/* Navigation Collapse */
.navbar .nav-collapse {
    flex: 1 !important;
    display: flex !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    float: none !important;
}

.navbar .nav-collapse.collapse {
    display: flex !important;
    height: auto !important;
    overflow: visible !important;
}

/* Navigation Menu */
.navbar .nav {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 10px !important;
    padding: 0 !important;
    float: none !important;
    list-style: none !important;
}

.navbar .nav li {
    display: inline-block !important;
    float: none !important;
    margin: 0 !important;
    position: relative !important;
}

/* Hide any other menu items except Contact */
.navbar .nav li:not(#contact):not(#contactMobile) {
    display: none !important;
}

/* Contact Button - NAVY BLUE STYLE */
.navbar .nav li#contact a,
.navbar .nav li#contactMobile a {
    background: #03053c !important;
    color: #ffffff !important;
    padding: 10px 24px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    margin-left: 0 !important;
    box-shadow: none !important;
    border: none !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
    line-height: 1.5 !important;
}

.navbar .nav li#contact a:hover,
.navbar .nav li#contactMobile a:hover {
    background: #03053cad !important;
    color: #ffffff !important;
    transform: none !important;
    box-shadow: none !important;
    opacity: 0.95 !important;
}

.navbar .nav li#contact a:active,
.navbar .nav li#contactMobile a:active {
    background: #03053c !important;
    transform: scale(0.98) !important;
}

/* Hide Mobile Contact by Default */
#contactMobile {
    display: none !important;
}

/* Mobile Menu Button - Hide if not needed */
.navbar .btn-navbar {
    display: none !important;
    background: #ffffff !important;
    padding: 8px 10px !important;
    border-radius: 6px !important;
    float: right !important;
    margin: 0 0 0 16px !important;
}

.navbar .btn-navbar .icon-bar {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background-color: #03053c !important;
    border-radius: 1px !important;
    margin: 4px 0 !important;
}

.navbar .btn-navbar:hover {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
}

/* Remove Active State Styling */
.navbar .nav .active a,
.navbar .nav .active a:hover,
.navbar .nav .active a:focus {
    color: inherit !important;
    background: inherit !important;
    font-weight: inherit !important;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 1200px) {
    .navbar .navbar-inner .container-fluid {
        padding: 16px 30px !important;
    }
}

@media (max-width: 992px) {
    .navbar .navbar-inner .container-fluid {
        padding: 16px 24px !important;
    }
    
    .navbar .brand {
        font-size: 19px !important;
    }
    
    .navbar .nav li#contact a {
        padding: 9px 20px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 979px) {
    .navbar .navbar-inner .container-fluid {
        padding: 16px 30px !important;
    }
}

@media (max-width: 768px) {
    /* Show Hamburger if needed */
    .navbar .btn-navbar {
        display: block !important;
        position: absolute !important;
        top: 14px !important;
        right: 20px !important;
        z-index: 1001 !important;
    }
    
    /* Container - No flex-wrap, keep items in one row */
    .navbar .navbar-inner .container-fluid {
        padding: 14px 20px !important;
        flex-wrap: nowrap !important;
        position: relative !important;
        overflow: visible !important;
        z-index: 1 !important;
    }
    
    /* Navbar inner - ensure overflow visible */
    .navbar .navbar-inner {
        overflow: visible !important;
        position: relative !important;
    }
    
    .navbar .brand {
        font-size: 18px !important;
        flex: 1 !important;
    }
    
    .navbar .brand img {
        max-height: 32px !important;
    }
    
    /* Navigation Collapse - Position outside navbar */
    .navbar .nav-collapse {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: #ffffff !important;
        z-index: 1000 !important;
        flex: none !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
        overflow: visible !important;
        max-height: none !important;
    }
    
    .navbar .nav-collapse.collapse {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
        transition: height 0.3s ease !important;
        max-height: 0 !important;
    }
    
    /* Collapse Menu - Show when active */
    .navbar .nav-collapse.collapse.in {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        max-height: none !important;
        padding: 5px 0 !important;
    }
    
    /* Navigation Menu - Vertical Layout */
    .navbar .nav {
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 20px !important;
        margin: 0 !important;
        gap: 0 !important;
        align-items: stretch !important;
    }
    
    .navbar .nav li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }
    
    .navbar .nav li a {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 16px 20px !important;
        color: #6b7280 !important;
        font-size: 16px !important;
        background: transparent !important;
        border-radius: 0 !important;
    }
    
    .navbar .nav li a:hover {
        background: #f9fafb !important;
        color: #1e293b !important;
    }
    
    /* Mobile Contact Button - Keep Blue Button Style */
    #contact {
        display: none !important;
    }
    
    #contactMobile {
        display: block !important;
    }
    
    .navbar .nav li#contactMobile {
        margin: 0 !important;
    }
    
    .navbar .nav li#contactMobile a {
        margin-left: 0 !important;
        margin-top: 0 !important;
        text-align: center !important;
        width: auto !important;
        min-width: 120px !important;
        max-width: 90% !important;
        background: #03053c !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        font-size: 15px !important;
        padding: 12px 24px !important;
        border-radius: 8px !important;
        display: inline-block !important;
        box-shadow: none !important;
        border: none !important;
    }
    
    .navbar .nav li#contactMobile a:hover {
        background: #03053c49 !important;
        color: #ffffff !important;
        opacity: 0.95 !important;
    }
    
    .navbar .nav li#contactMobile a:active {
        background: #03053c !important;
        transform: scale(0.98) !important;
    }
}

@media (max-width: 600px) {
    .navbar .navbar-inner .container-fluid {
        padding: 14px 18px !important;
    }
    
    .navbar .brand {
        font-size: 17px !important;
    }
}

@media (max-width: 480px) {
    .navbar .navbar-inner .container-fluid {
        padding: 12px 16px !important;
    }
    
    .navbar .brand {
        font-size: 16px !important;
    }
    
    .navbar .brand img {
        max-height: 28px !important;
    }
    
    .navbar .btn-navbar {
        top: 12px !important;
        right: 16px !important;
        padding: 6px 8px !important;
    }
    
    .navbar .nav li a {
        padding: 14px 16px !important;
        font-size: 15px !important;
    }
    
    .navbar .nav li#contactMobile a {
        padding: 10px 20px !important;
        font-size: 14px !important;
        min-width: 100px !important;
    }
}

/* ========================================
   UTILITY & FIXES
   ======================================== */

/* Remove Bootstrap Floats */
.navbar-inner:before,
.navbar-inner:after {
    display: none !important;
}

/* Font Smoothing */
.navbar,
.navbar * {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Accessibility Focus */
.navbar .nav li a:focus-visible {
    outline: 2px solid #03053c !important;
    outline-offset: 2px !important;
}

.navbar .btn-navbar:focus-visible {
    outline: 2px solid #03053c !important;
    outline-offset: 2px !important;
}

/* Ensure body background is light gray below navbar */
body {
    background: #f8f8f8 !important;
    overflow-x: hidden !important;
}

/* Ensure html doesn't clip content */
html {
    overflow-x: hidden !important;
}

/* Responsive Images */
img {
    max-width: 100% !important;
    height: auto !important;
}

/* Responsive Tables */
table {
    width: 100% !important;
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Responsive Containers */
.container,
.container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
}

/* Content Area Container */
#contentArea.container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Prevent any parent from clipping navbar collapse */
header.navbar,
#mainNav {
    overflow: visible !important;
}

/* ... existing code ... */

/* ========================================
   SEARCH SECTION - HELP CENTER LAYOUT
   ======================================== */

/* Main Search Section Container */
#docsSearch {
    background: none !important;
    padding: 40px 40px !important;
    margin: 0 auto !important;
    position: relative !important;
    overflow: visible !important;
    min-height: 300px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    max-width: 1400px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 480px !important;
    border-bottom: 0px solid #e0e0e0 !important;
}

/* Search Section Title */
#docsSearch h1 {
    position: static !important;
    font-size: 48px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 0 30px 0 !important;
    padding: 0 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 600px !important;
    text-align: left !important;
}

/* Search Form Container - Left Side */
#docsSearch form#searchBar {
    position: relative !important;
    z-index: 2 !important;
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 600px !important;
}

/* Search Input Field */
#docsSearch form#searchBar input[type="text"],
#docsSearch form#searchBar input[type="search"] {
    width: 100% !important;
    max-width: 600px !important;
    padding: 14px 20px !important;
    font-size: 16px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    box-sizing: border-box !important;
}

#docsSearch form#searchBar input[type="text"]:focus,
#docsSearch form#searchBar input[type="search"]:focus {
    outline: none !important;
    border-color: #4381b5 !important;
    box-shadow: 0 0 0 3px rgba(67, 129, 181, 0.1) !important;
}
#sidebar form button {
    padding: 10px !important;
    right: 0 !important;
}

/* Image Container - Right Side */
/* #docsSearch::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    right: 40px !important;
    transform: translateY(-50%) !important;
    width: 400px !important;
    height: 400px !important;
    max-width: 45% !important;
    max-height: 80% !important;
    min-width: 200px !important;
    min-height: 200px !important;
    background-image: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='-0.5 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 11.8201C22 9.84228 21.4135 7.90885 20.3147 6.26436C19.2159 4.61987 17.6542 3.33813 15.8269 2.58126C13.9996 1.82438 11.9889 1.62637 10.0491 2.01223C8.10927 2.39808 6.32748 3.35052 4.92896 4.74904C3.53043 6.14757 2.578 7.92935 2.19214 9.86916C1.80629 11.809 2.00436 13.8197 2.76123 15.6469C3.51811 17.4742 4.79985 19.036 6.44434 20.1348C8.08883 21.2336 10.0222 21.8201 12 21.8201' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 11.8201H22' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 21.8201C10.07 21.8201 8.5 17.3401 8.5 11.8201C8.5 6.30007 10.07 1.82007 12 1.82007C13.93 1.82007 15.5 6.30007 15.5 11.8201' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18.3691 21.6901C20.3021 21.6901 21.8691 20.1231 21.8691 18.1901C21.8691 16.2571 20.3021 14.6901 18.3691 14.6901C16.4361 14.6901 14.8691 16.2571 14.8691 18.1901C14.8691 20.1231 16.4361 21.6901 18.3691 21.6901Z' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22.9998 22.8202L20.8398 20.6702' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    z-index: 1 !important;
    opacity: 0.9 !important;
    pointer-events: none !important;
} */



/* Search Dropdown Results */
#docsSearch #serp-dd {
    position: absolute !important;
    /* top: 100% !important; */
    /* left: 40px !important; */
    right: auto !important;
    width: 100% !important;
    max-width: calc(100% - 110px) !important;
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    z-index: 1000 !important;
    margin-top: 8px !important;
    box-sizing: border-box !important;
}

/* Search Dropdown Items */
#docsSearch #serp-dd .result-item,
#docsSearch #serp-dd li {
    padding: 12px 16px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

#docsSearch #serp-dd .result-item:last-child,
#docsSearch #serp-dd li:last-child {
    border-bottom: none !important;
}

#docsSearch #serp-dd .result-item:hover,
#docsSearch #serp-dd li:hover {
    background: #f9fafb !important;
}

#searchBar button {
    background: #03053c !important;
    color: #ffffff !important;
}

#searchBar button:hover {
    background: #03053cad !important;
}

/* Responsive Design for Search Section */
@media (min-width: 1600px) {
    #docsSearch {
        padding-right: 500px !important;
    }
    
    #docsSearch::after {
        width: 450px !important;
        height: 450px !important;
        right: 50px !important;
    }
}

@media (max-width: 1400px) {
    #docsSearch {
        padding: 100px 60px !important;
        padding-right: 450px !important;
    }
    
    #docsSearch::after {
        width: 380px !important;
        height: 380px !important;
        right: 40px !important;
    }
}

@media (max-width: 1200px) {
    #docsSearch {
        padding: 80px 40px !important;
        padding-right: 380px !important;
    }
    
    #docsSearch h1 {
        font-size: 40px !important;
        max-width: 100% !important;
    }
    
    #docsSearch form#searchBar {
        max-width: 100% !important;
    }
    
    #docsSearch form#searchBar input[type="text"],
    #docsSearch form#searchBar input[type="search"] {
        max-width: 100% !important;
    }
    
    #docsSearch::after {
        width: 320px !important;
        height: 320px !important;
        right: 30px !important;
    }
    
    #docsSearch #serp-dd {
        width: calc(100% - 80px) !important;
        /* left: 40px !important; */
    }
}

@media (max-width: 992px) {
    #docsSearch {
        padding: 70px 30px !important;
        padding-right: 320px !important;
    }
    
    #docsSearch h1 {
        font-size: 36px !important;
    }
    
    #docsSearch form#searchBar input[type="text"],
    #docsSearch form#searchBar input[type="search"] {
        padding: 13px 19px !important;
        font-size: 15px !important;
    }
    
    #docsSearch::after {
        width: 280px !important;
        height: 280px !important;
        right: 25px !important;
    }
    
    #docsSearch #serp-dd {
        width: calc(100% - 60px) !important;
        left: 0px !important;
    }
}

@media (max-width: 768px) {
    #docsSearch {
        padding: 50px 20px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        min-height: auto !important;
        padding-right: 20px !important;
    }
    
    #docsSearch h1 {
        font-size: 32px !important;
        margin-bottom: 20px !important;
        text-align: left !important;
        max-width: 100% !important;
    }
    
    #docsSearch form#searchBar {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    #docsSearch form#searchBar input[type="text"],
    #docsSearch form#searchBar input[type="search"] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 18px !important;
        font-size: 15px !important;
    }
    
    #docsSearch::after {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        width: 250px !important;
        height: 250px !important;
        max-width: 100% !important;
        margin: 30px auto 0 auto !important;
        display: block !important;
        opacity: 0.8 !important;
    }
    
    #docsSearch #serp-dd {
        left: 0px !important;
        width: calc(100% - 40px) !important;
        max-width: calc(100% - 40px) !important;
    }
}

@media (max-width: 600px) {
    #docsSearch {
        padding: 40px 18px !important;
    }
    
    #docsSearch h1 {
        font-size: 30px !important;
    }
    
    #docsSearch form#searchBar input[type="text"],
    #docsSearch form#searchBar input[type="search"] {
        padding: 11px 17px !important;
        font-size: 15px !important;
    }
    
    #docsSearch::after {
        width: 200px !important;
        height: 200px !important;
        margin: 25px auto 0 auto !important;
    }
    
    #docsSearch #serp-dd {
        left: 0px !important;
        width: calc(100% - 36px) !important;
        max-width: calc(100% - 36px) !important;
    }
}

@media (max-width: 480px) {
    #docsSearch {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    #docsSearch h1 {
        font-size: 28px !important;
        margin-bottom: 16px !important;
    }
    
    #docsSearch form#searchBar input[type="text"],
    #docsSearch form#searchBar input[type="search"] {
        padding: 10px 16px !important;
        font-size: 14px !important;
    }
    
    #docsSearch::after {
        width: 180px !important;
        height: 180px !important;
        margin: 20px auto 0 auto !important;
    }
    
    #docsSearch #serp-dd {
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
    }
}

/* ... existing code ... */

/* ========================================
   MOST POPULAR ARTICLES SECTION
   ======================================== */

/* Section Container */
/* Section Container - Grid Layout */
.most-pop-articles {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    row-gap: 20px !important;
    column-gap: 20px !important;
    margin: 60px auto !important;
    padding: 0 40px !important;
    max-width: 1400px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    grid-auto-flow: row !important;
    align-items: start !important;
}

/* Section Title - Full Width */
.most-pop-articles h2 {
    grid-column: 1 / -1 !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 0 30px 0 !important;
    padding: 0 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    text-align: left !important;
}

/* Articles List Container - Grid */
.most-pop-articles .popArticles {
    grid-column: 1 / -1 !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Article List Item */
.most-pop-articles .popArticles li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
    height: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Article Link - Card Style */
.most-pop-articles .popArticles li a {
    display: flex !important;
    flex-direction: column !important;
    padding: 24px !important;
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    height: 100% !important;
    min-height: 140px !important;
    color: #03053c !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Article Link Hover */
.most-pop-articles .popArticles li a:hover {
    background: #ffffff !important;
    border-color: #03053c !important;
    box-shadow: 0 4px 12px rgba(67, 129, 181, 0.15) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Hide Icon */
.most-pop-articles .popArticles li a i.icon-article-doc {
    display: none !important;
}

/* Article Text - Style as h3 */
.most-pop-articles .popArticles li a span {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #03053c !important;
    line-height: 1.4 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    text-align: left !important;
    width: 100% !important;
    display: block !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.most-pop-articles .popArticles li a:hover span {
    color: #03053c !important;
    text-decoration: none !important;
}

/* Separator Line */
hr.sep {
    border: none !important;
    border-top: 1px solid #e0e0e0 !important;
    margin: 60px auto !important;
    max-width: 1400px !important;
    width: calc(100% - 80px) !important;
    box-sizing: border-box !important;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .most-pop-articles {
        padding: 0 30px !important;
        gap: 20px !important;
    }
    
    .most-pop-articles h2 {
        font-size: 30px !important;
    }
    
    .most-pop-articles .popArticles {
        gap: 20px !important;
    }
    
    hr.sep {
        margin: 50px auto !important;
        width: calc(100% - 60px) !important;
    }
}

@media (max-width: 992px) {
    .most-pop-articles {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 0 24px !important;
        gap: 18px !important;
        margin: 50px 0 !important;
    }
    
    .most-pop-articles .popArticles {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
    }
    
    .most-pop-articles h2 {
        font-size: 28px !important;
    }
    
    hr.sep {
        margin: 45px auto !important;
        width: calc(100% - 48px) !important;
    }
}

@media (max-width: 768px) {
    .most-pop-articles {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin: 40px 0 !important;
        padding: 0 20px !important;
    }
    
    .most-pop-articles h2 {
        font-size: 28px !important;
        margin-bottom: 24px !important;
    }
    
    .most-pop-articles .popArticles {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .most-pop-articles .popArticles li a {
        padding: 20px !important;
        min-height: 130px !important;
    }
    
    .most-pop-articles .popArticles li a span {
        font-size: 18px !important;
    }
    
    hr.sep {
        margin: 40px auto !important;
        width: calc(100% - 40px) !important;
    }
}

@media (max-width: 600px) {
    .most-pop-articles {
        padding: 0 18px !important;
    }
    
    .most-pop-articles h2 {
        font-size: 26px !important;
    }
    
    hr.sep {
        margin: 35px auto !important;
        width: calc(100% - 36px) !important;
    }
}

@media (max-width: 480px) {
    .most-pop-articles {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin: 30px 0 !important;
        padding: 0 16px !important;
    }
    
    .most-pop-articles h2 {
        font-size: 24px !important;
        margin-bottom: 20px !important;
    }
    
    .most-pop-articles .popArticles {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .most-pop-articles .popArticles li a {
        padding: 18px !important;
        min-height: 120px !important;
    }
    
    .most-pop-articles .popArticles li a span {
        font-size: 16px !important;
    }
    
    hr.sep {
        margin: 30px auto !important;
        width: calc(100% - 32px) !important;
    }
}

/* ... existing code ... */

/* ========================================
   CATEGORY LIST SECTION
   ======================================== */

/* Category List Container */
.category-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    row-gap: 20px !important;
    column-gap: 20px !important;
    margin: 60px auto !important;
    padding: 0 40px !important;
    max-width: 1400px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    grid-auto-flow: row !important;
    align-items: stretch !important;
}

/* Category Card */
.category-list .category {
    display: flex !important;
    flex-direction: column !important;
    padding: 24px !important;
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    height: 100% !important;
    min-height: 140px !important;
    color: #03053c !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    position: relative !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* Category Card Hover */
.category-list .category:hover {
    background: #ffffff !important;
    border-color: #03053cad !important;
    box-shadow: 0 4px 12px rgba(67, 129, 181, 0.15) !important;
    transform: translateY(-2px) !important;
}

/* Category Title */
.category-list .category h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #03053c !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    text-align: left !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    line-height: 1.4 !important;
    width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.category-list .category:hover h3 {
    color: #03053cad !important;
}

/* Article Count - Right Aligned */
.category-list .category .article-count {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #03053c !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    line-height: 1.5 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    align-self: flex-end !important;
    margin-top: auto !important;
}

.category-list .category:hover .article-count {
    color: #03053cad !important;
}

/* Notranslate Span */
.category-list .category .article-count .notranslate {
    font-weight: 600 !important;
    color: inherit !important;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .category-list {
        padding: 0 30px !important;
        gap: 20px !important;
    }
    
    .category-list .category h3 {
        font-size: 19px !important;
    }
}

@media (max-width: 992px) {
    .category-list {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 0 24px !important;
        gap: 18px !important;
        margin: 50px 0 !important;
    }
    
    .category-list .category {
        padding: 22px !important;
        min-height: 135px !important;
    }
    
    .category-list .category h3 {
        font-size: 18px !important;
    }
    
    .category-list .category .article-count {
        font-size: 13px !important;
    }
}

@media (max-width: 768px) {
    .category-list {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin: 40px 0 !important;
        padding: 0 20px !important;
    }
    
    .category-list .category {
        padding: 20px !important;
        min-height: 130px !important;
    }
    
    .category-list .category h3 {
        font-size: 18px !important;
        margin-bottom: 8px !important;
    }
    
    .category-list .category .article-count {
        font-size: 13px !important;
    }
}

@media (max-width: 600px) {
    .category-list {
        padding: 0 18px !important;
    }
    
    .category-list .category h3 {
        font-size: 17px !important;
    }
}

@media (max-width: 480px) {
    .category-list {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin: 30px 0 !important;
        padding: 0 16px !important;
    }
    
    .category-list .category {
        padding: 18px !important;
        min-height: 120px !important;
    }
    
    .category-list .category h3 {
        font-size: 16px !important;
    }
    
    .category-list .category .article-count {
        font-size: 12px !important;
    }
}

/* ========================================
   ARTICLE PAGE
   ======================================== */

#contentArea.container-fluid {
    max-width: 70% !important;
}

@media (max-width: 768px) {
    #contentArea.container-fluid {
        max-width: 100% !important;
    }
}