@charset "utf-8";

/* ==========================================================================
   MOBILE-ONLY STYLES (Strictly applies to screen widths 768px and down)
   ========================================================================== */

@media screen and (max-width: 768px) {

    /* --- VIEWPORT ENGINE --- */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        position: relative !important;
    }

    /* --- HEADER & TOGGLE FIXED TRACKS --- */
    .header-container {
        width: 100% !important;
        padding: 0 15px !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    button.menu-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-around !important;
        align-items: center !important;
        position: fixed !important; 
        top: 15px !important;
        right: 15px !important;
        left: auto !important;
        width: 44px !important;
        height: 40px !important;
        background-color: #ffffff !important; 
        border: 2px solid #1a3a5a !important; 
        border-radius: 4px !important;
        padding: 6px !important;
        cursor: pointer !important;
        z-index: 2000000 !important;
    }

    button.menu-toggle span.bar {
        display: block !important;
        width: 26px !important;
        height: 3px !important;
        background-color: #1a3a5a !important;
    }

    button.menu-toggle.is-active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg) !important;
    }
    button.menu-toggle.is-active .bar:nth-child(2) {
        opacity: 0 !important;
    }
    button.menu-toggle.is-active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg) !important;
    }

    /* --- THE DROPNAV MASTER DRAWER --- */
    nav.dropnav {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background-color: #ffffff !important;
        z-index: 9998 !important;
        padding-top: 70px !important;
        overflow-y: auto !important;
    }

    nav.dropnav.active {
        display: block !important;
    }

    /* --- BASE NAVIGATION RESET Matrix --- */
    nav.dropnav ul.main-menu,
    nav.dropnav ul.main-menu li,
    nav.dropnav ul.main-menu ul.child,
    nav.dropnav ul.main-menu ul.child li,
    nav.dropnav ul.main-menu ul.flyout,
    nav.dropnav ul.main-menu ul.flyout li {
        box-sizing: border-box !important;
        float: none !important;
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: 0 !important;
        right: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
    }

    nav.dropnav ul.main-menu {
        display: flex !important;
        flex-direction: column !important;
        list-style: none !important;
        padding: 20px !important;
        gap: 0 !important;
        background: #ffffff !important;
    }

    nav.dropnav ul.main-menu li {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    nav.dropnav ul.main-menu li a {
        display: block !important;
        padding: 14px 15px !important;
        color: #1a3a5a !important;
        font-size: 18px !important;
        text-decoration: none !important;
        border-bottom: 1px solid #eeeeee !important;
        margin: 0 !important;
        line-height: 1.3 !important;
        background: transparent !important;
    }

    /* ==========================================================================
        SUPREME SPECIFICITY MOBILE NAVIGATION DISPLAY ENGINE
       ========================================================================== */

    /* 1. ABSOLUTELY HIDE SUB-MENUS GLOBALLY WHEN CLOSED */
    nav.dropnav ul.main-menu li.parent > ul.child,
    nav.dropnav ul.main-menu li.parent > ul.child li > ul.flyout,
    nav.dropnav ul.main-menu li.parent:hover > ul.child,
    nav.dropnav ul.main-menu li.parent ul.child li:hover > ul.flyout {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }

    /* 2. LEVEL 1 REVEAL: Open immediate child links vertically on click */
    nav.dropnav ul.main-menu li.parent.open > ul.child {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        position: relative !important;
        left: 0 !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        background-color: #f8fafc !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* 3. LEVEL 2 REVEAL: Snaps grandchild panels (Months) flat into view */
    nav.dropnav ul.main-menu li.parent.open > ul.child > li.parent.open > ul.flyout,
    nav.dropnav ul.main-menu ul.child li.parent.open > ul.flyout {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        position: relative !important;
        left: 0 !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        background-color: #edf2f7 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* 4. FORCE ITEMS AND LINKS INSIDE ACTIVE DRAWDOWNS TO STAND UP */
    nav.dropnav ul.main-menu li.parent.open > ul.child > li,
    nav.dropnav ul.main-menu ul.child li.parent.open > ul.flyout > li {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: auto !important;
        position: relative !important;
    }

    nav.dropnav ul.main-menu li.parent.open > ul.child > li > a,
    nav.dropnav ul.main-menu ul.child li.parent.open > ul.flyout > li > a {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #1a3a5a !important;
        padding: 12px 20px !important;
        border-bottom: 1px solid #e2e8f0 !important;
        text-align: left !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-decoration: none !important;
    }

    /* 5. TREE INDENT MATRIX */
    nav.dropnav ul.main-menu li.parent.open > ul.child > li > a {
        padding-left: 30px !important;
        background-color: #f8fafc !important;
    }
    nav.dropnav ul.main-menu ul.child li.parent.open > ul.flyout > li > a {
        padding-left: 50px !important;
        background-color: #edf2f7 !important;
    }

    /* Indicator Arrow for Nested Mobile Items */
    nav.dropnav ul.main-menu li.parent > a::after {
        content: " ▾" !important;
        font-size: 0.85rem !important;
        color: #1a3a5a !important;
        float: right !important;
    }

    /* 6. ABSOLUTE DESTRUCTION OF DESKTOP HOVER ARROWS & pseudo elements */
    nav.dropnav ul.main-menu li::after,
    nav.dropnav ul.main-menu li::before,
    nav.dropnav ul.main-menu li a::before,
    nav.dropnav .parent > a::before,
    nav.dropnav .fly-left > a::after,
    nav.dropnav .fly-left > a::before,
    nav.dropnav ul.main-menu li.parent > a::before {
        display: none !important;
        content: "" !important;
        background: none !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Clear fixed desktop sizing handles */
    .w-xsmall, .w-medium, .w-large, .w-xlarge, .w-xxxlarge {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* --- LIGHT GREY HERO SECTION MOBILE RECONSTRUCTION --- */
    .hero {
        margin-top: 60px !important;
        padding: 40px 20px 35px 20px !important;
        background-color: #f5f5f5 !important;
        background-image: none !important;
        text-align: center !important;
    }

    .hero-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* --- FIX FOR HERO SLIDESHOW ON MOBILE --- */
    /* This ensures the slideshow container and items aren't overwritten by the general .hero p rule */

    .hero-text-anim {
        display: block !important; /* Keep it as a block to respect the absolute positioning inside */
        height: 70px !important;   /* Preserve the reserved height */
        margin: 10px;
    }

    #hero-text-container .message-item {
        position: absolute !important; /* Keep the absolute stacking */
        top: 0 !important;
        left: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        text-align: center !important;
        color: #ff4b00 !important;     
        font-size: 1.3rem !important;  /* Slightly larger */
        font-weight: 800 !important;   /* BOLD */
        text-shadow: none !important;  /* Remove shadow for crisp black text */
        padding: 0 10px !important;    /* Adds slight side padding so text doesn't hit the screen edge */
        box-sizing: border-box !important;
    }   

    .hero h1 {
        font-size: 1.8rem !important;
        color: #1a3a5a !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
        letter-spacing: 0 !important;
    }

    .hero p {
        order: 1 !important;
        font-size: 1rem !important;
        color: #333333 !important;
        line-height: 1.4 !important;
        margin-bottom: 0 !important;
    }

    .hero-buttons {
        order: 3 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        align-items: center !important;
        width: 100% !important;
    }

    .hero-buttons a,
    .hero-buttons .btn-primary, 
    .hero-buttons .btn-secondary {
        display: block !important;
        width: 100% !important;
        max-width: 290px !important;
        padding: 14px 20px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    .hero-corner-logo {
        order: 2 !important;
        position: relative !important;
        display: block !important;
        max-height: 110px !important; 
        width: auto !important;
        margin: 25px auto 30px auto !important; 
    }

    /* --- STRUCTURAL GRIDS & TEXT ALIGNMENT --- */
    .benefits-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
        padding: 0 15px !important;
        text-align: center !important;
    }

    .text-columns {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .column {
        width: 100% !important;
        text-align: center !important;
    }
    
    .text-columns img,
    .column img,
    .benefits-container img {
        width: 100% !important;
        height: auto !important; 
        max-height: none !important;
        object-fit: contain !important; 
    }

    .column h2, 
    .column h3, 
    .column h4,
    .text-columns h2,
    .text-columns h3 {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .column p,
    .text-columns p {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        line-height: 1.5 !important;
    }

    .container, .content-wrapper {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
      
    /* --- COOKIE BANNER MOBILE CONSTRAINT --- */
    #cookie-banner.cookie-container {
        position: fixed !important;
        bottom: 15px !important;
        left: 15px !important;
        right: 15px !important;
        width: calc(100% - 30px) !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 15px !important;
        background-color: #ffffff !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
        z-index: 9999999 !important;
    }

    #cookie-banner .cookie-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    #cookie-banner .cookie-content,
    #cookie-banner .cookie-content p,
    #cookie-banner .cookie-text {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 5px 0 !important;
        padding: 0 !important;
        color: #333333 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        white-space: normal !important; 
        word-wrap: break-word !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        text-align: left !important;
    }

    #cookie-banner .secure-icon {
        display: inline-block !important;
        margin-right: 6px !important;
        font-size: 16px !important;
        vertical-align: middle !important;
    }

    #cookie-banner .cookie-content a,
    #cookie-banner .cookie-content p a {
        display: inline !important;
        word-break: break-all !important;
        text-decoration: underline !important;
        color: #1a3a5a !important;
    }

    #cookie-banner .cookie-buttons {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        width: 100% !important;
    }

    #cookie-banner .cookie-btn {
        flex: 1 !important;
        width: 100% !important;
        padding: 12px 10px !important;
        font-size: 14px !important;
        text-align: center !important;
    }
   
    /* --- FOOTER MOBILE STRUCTURAL REALIGNMENT --- */
    footer {
        padding: 40px 20px !important;
        background-color: #112233 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    footer .footer-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 25px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    footer .footernav {
        width: 100% !important;
    }

    footer .footernav ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    footer .footernav ul li a {
        display: inline-block !important;
        font-size: 15px !important;
        padding: 5px 10px !important;
        color: #ffffff !important;
        font-weight: 500 !important;
        text-decoration: none !important;
    }

    footer .footernav ul li a:active,
    footer .footernav ul li a:hover {
        color: #bcd4e6 !important;
    }

    footer .copyright {
        font-size: 13px !important;
        line-height: 1.5 !important;
        color: #e0e0e0 !important;
        padding: 0 10px !important;
        margin: 0 !important;
        width: 100% !important;
        word-wrap: break-word !important;
    }

    footer .footer-right {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    footer .footer-right a {
        display: inline-block !important;
        font-size: 15px !important;
        color: #ffffff !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        padding: 5px 15px !important;
    }

    footer .footer-right a:active,
    footer .footer-right a:hover {
        color: #bcd4e6 !important;
    }
        
    /* --- BACK TO TOP BUTTON STATE STABILIZATION --- */
    .return-to-top, 
    .back-to-top, 
    #return-to-top, 
    #back-to-top {
        background-color: green !important; 
        color: #ffffff !important;
        opacity: 1 !important;
    }

    .return-to-top:hover, .return-to-top:active, .return-to-top:focus,
    .back-to-top:hover, .back-to-top:active, .back-to-top:focus,
    #return-to-top:hover, #return-to-top:active, #return-to-top:focus,
    #back-to-top:hover, #back-to-top:active, #back-to-top:focus {
        background-color: green !important;
        color: #ffffff !important;
        box-shadow: none !important;
    }
    
    /* --- MOBILE COURSE TABLE CARDS --- */
    .course-table thead {
        display: none !important;
    }

    .course-table, 
    .course-table tbody, 
    .course-table tr, 
    .course-table td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .course-table tr {
        background: #ffffff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
        margin-bottom: 20px !important;
        padding: 15px !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
    }

    .course-table td {
        text-align: center !important;
        padding: 8px 0 !important;
        border: none !important;
    }

    .course-table td.col-logo img {
        max-width: 100% !important;
        height: auto !important;
        border-radius: 4px !important;
        margin-bottom: 5px !important;
    }

    .course-table td.col-date {
        font-size: 1.15rem !important;
        color: #111111 !important;
        border-bottom: 1px dashed #e5e5e5 !important;
        padding-bottom: 12px !important;
        margin-bottom: 10px !important;
    }

    .course-table .course-note,
    .course-table .price-note {
        display: block !important;
        font-size: 0.85rem !important;
        color: #666666 !important;
        margin-top: 2px !important;
    }

    .course-table td.col-reg::before {
        content: "Registration: " !important;
        font-size: 0.9rem !important;
        color: #555555 !important;
    }

    .course-table td.col-start::before {
        content: "Starts: " !important;
        font-size: 0.9rem !important;
        color: #555555 !important;
    }

    .course-table td.col-dvsa img {
        max-width: 140px !important;
        margin: 5px auto !important;
    }

    /* Target table cells to drop standard tabular align constraints */
    .course-table td.col-duration,
    .course-table td.col-price.price {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
        margin: 10px auto !important;
    }

    .course-table td.col-price {
        font-size: 1.2rem !important;
    }
    
    .course-table .price-value {
        font-weight: 700 !important;
        color: #17161a !important; /* Deep black constraint */
    }

    .course-table td.col-book {
        padding-top: 15px !important;
    }

    .course-table .book-btn {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 12px 0 !important;
        box-sizing: border-box !important;
        font-size: 1.1rem !important;
        font-weight: bold !important;
    }
    
    /* Enforce block structural lines and global centering logic */
    .course-table .course-duration,
    .course-table .course-note,
    .course-table .price-value,
    .course-table .price-note {
        display: block !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
    }
    
    /* ==========================================================================
        COURSE MODULE SPECIFIC MOBILE ADAPTATION SYSTEM
       ========================================================================== */

    /* --- MODULE HEADER LOGIC --- */
    .page-header-left {
        width: 100% !important;
        padding: 30px 15px 15px 15px !important;
        text-align: center !important; /* Centers elements globally within the section */
    }

    .page-header-left .container-left {
        width: 100% !important;
        margin: 0 auto !important;    /* Centers block structure layout */
        text-align: center !important; /* Enforces absolute internal constraint */
    }

    .page-header-left h1 {
        font-size: 1.6rem !important;  /* Fluid scale optimized for mobile viewports */
        line-height: 1.35 !important;
        text-align: center !important; /* Snaps text block to absolute center */
        color: #1a3a5a !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }

    /* --- DETAILED MODULE ROW RECONSTRUCTION --- */
    .module-container {
        padding: 20px 15px !important;
    }

    .module-row {
        display: flex !important;
        flex-direction: column !important; /* Stack columns vertically */
        gap: 25px !important;
        width: 100% !important;
    }

    /* Duration Tag Box Left */
    .module-row .box-left {
        order: 1 !important; /* Appears first on mobile screen */
        width: 100% !important;
        text-align: center !important;
        background-color: #f8fafc !important;
        padding: 15px !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
    }

    .module-row .module-duration {
        display: block !important;
        font-weight: 700 !important;
        font-size: 1.2rem !important;
        color: #2323ff !important;
        margin-bottom: 8px !important;
    }

    .module-row .module-duration-text {
        display: block !important;
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
        color: #333333 !important;
    }

    /* Description Text Block Mid */
    .module-row .box-mid {
        order: 2 !important;
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .module-row .box-mid h3 {
        font-size: 1.5rem !important;
        color: #1a3a5a !important;
        margin-bottom: 15px !important;
        text-align: center !important;
    }

    .module-row .module-intro {
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;
        color: #16171a !important; /* Clean layout baseline color */
        margin-bottom: 15px !important;
    }

    .module-row .box-mid p {
        text-align: center !important;
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin-bottom: 12px !important;
    }

    /* Centralized Action Button Group */
    .module-row .button-group {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin-top: 20px !important;
    }

    .module-row .module-btn {
        display: block !important;
        width: 100% !important;
        max-width: 290px !important;
        padding: 12px 10px !important; /* Slightly reduced horizontal padding to make room for text */
        box-sizing: border-box !important;
        text-align: center !important;
        font-size: clamp(0.95rem, 4vw, 1.1rem) !important; /* Dynamically shrinks text if the screen is too narrow */
        font-weight: bold !important;
        white-space: normal !important; /* Enforces text wrapping instead of disappearing off the edges */
        word-wrap: break-word !important;
    }
    
    /* Feature Image Box Right */
    .module-row .box-right {
        order: 3 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    .module-row .module-photo {
        width: 100% !important;
        max-width: 450px !important; /* Prevents huge scaling gaps */
        height: auto !important;
        border-radius: 6px !important;
        object-fit: cover !important;
    }

    
    /* --- TOPIC SUBJECT GRID UNROLL ENGINE --- */
    .module-grid {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 15px 25px 15px !important;
        box-sizing: border-box !important;
    }

    .module-grid .container {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }

    .module-grid .grid-intro-text {
        text-align: center !important;
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin-bottom: 25px !important;
        padding: 0 5px !important;
        display: block !important;
    }

    /* Force the layout rows to break horizontal pathways completely */
    .module-grid .row {
        display: flex !important;
        flex-direction: column !important; /* Forces vertical column distribution */
        gap: 20px !important;              /* Spacing track between stacked cards */
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    /* Clear explicit widths or spacing floats from desktop structures */
    .module-grid .column {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    /* Stabilize individual card heights and bounding spaces */
    .module-grid .card {
        width: 100% !important;
        height: auto !important;           /* Destroys hardcoded desktop pixel heights */
        min-height: 0 !important;
        box-sizing: border-box !important;
        padding: 22px 20px !important;
        text-align: center !important;
        background: #ffffff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 6px !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.04) !important;
    }

    .module-grid .card h3 {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
        color: #1a3a5a !important;
        margin: 0 0 12px 0 !important;
        text-align: center !important;
    }

    .module-grid .card p {
        font-size: 0.95rem !important;
        line-height: 1.45 !important;
        text-align: center !important;
        color: #333333 !important;
        margin: 0 0 10px 0 !important;
    }
    
    .module-grid .card p:last-child {
        margin-bottom: 0 !important;
    }
    
    
    .no-split {
        white-space: nowrap !important;
    }

    /* ==========================================================================
       ALTERNATE TWO-COLUMN TEXT & SIDEBAR BLOCKS (.content-box-2col-alt)
       ========================================================================== */

    /* 1. Reset container to stack vertically instead of side-by-side */
    .content-box-2col-alt {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 15px !important; /* Controlled spacing between photo and text elements */
        padding: 0 !important;
        margin: 0 auto 35px auto !important; /* Uniform gap between section blocks */
        box-sizing: border-box !important;
    }

    /* 2. Neutralize explicit widths and floats from both columns */
    .content-box-2col-alt .sidebar-column.left-sidebar,
    .content-box-2col-alt .main-text {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        text-align: left !important; /* Keeps readability natural for long training paragraphs */
    }

    /* 3. Re-order elements so the photo cleanly sits on top of the text */
    .content-box-2col-alt .sidebar-column.left-sidebar {
        order: 1 !important;
    }

    .content-box-2col-alt .main-text {
        order: 2 !important;
    }

    /* 4. Scale and center sidebar photos proportionally */
    .content-box-2col-alt .sidebar-photo {
        width: 100% !important;
        max-width: 450px !important; /* Caps scaling on mid-sized mobile screens and small tablets */
        height: auto !important;
        display: block !important;
        margin: 0 auto 10px auto !important; /* Centers image container track perfectly */
        border-radius: 4px !important;
    }

    /* 5. Clean up captions under the newly stacked images */
    .content-box-2col-alt .sidebar-caption {
        text-align: center !important;
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        color: #555555 !important;
        margin: 0 auto 10px auto !important;
    }

    /* 6. Adapt inline CTAs inside text frames for touch-friendly execution */
    .content-box-2col-alt .main-text .btn-primary,
    .content-box-2col-alt .main-text a.btn-primary {
        display: block !important;
        width: 100% !important;
        max-width: 320px !important; /* Keeps the buttons clean and thumb-friendly without stretching full-screen */
        margin: 20px auto 0 auto !important; /* Center handles the button nicely within the block */
        padding: 14px 15px !important;
        box-sizing: border-box !important;
        text-align: center !important;
        font-size: 1.05rem !important;
    }
    
    /* ==========================================================================
       ARTICLE GRID & RESOURCE CARDS MOBILE OPTIMIZATION
       ========================================================================== */

    /* 1. Force the grid parent container to drop its horizontal tracks */
    .article-grid {
        display: flex !important;
        flex-direction: column !important; /* Stack cards vertically */
        gap: 20px !important;              /* Uniform spacing track between cards */
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 15px 25px 15px !important;
        box-sizing: border-box !important;
    }

    /* 2. Stabilize card layout engine and strip hardcoded desktop dimensions */
    .article-card {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;           /* Prevents text overflow breaks */
        min-height: 0 !important;
        background: #ffffff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 6px !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04) !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 3. Center and align the content elements cleanly within the mobile track */
    .article-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;    /* Centers components inside card cleanly */
        text-align: center !important;     /* Delivers neat balance for short card text */
        padding: 24px 20px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    /* 4. Keep the category tags neat and centered */
    .article-content .category-tag {
        display: inline-block !important;
        margin-bottom: 12px !important;
        font-size: 0.8rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
    }

    /* 5. Fluid typography optimization for card headings */
    .article-content h3 {
        font-size: 1.3rem !important;
        line-height: 1.35 !important;
        color: #1a3a5a !important;
        margin: 0 0 12px 0 !important;
        font-weight: 700 !important;
    }

    /* 6. Paragraph layout normalization */
    .article-content p {
        font-size: 0.95rem !important;
        line-height: 1.45 !important;
        color: #333333 !important;
        margin: 0 0 20px 0 !important;
    }

    /* 7. Re-engineer the primary buttons to form optimal mobile touch targets */
    .article-content .btn-primary,
    .article-content a.btn-primary {
        display: block !important;
        width: 100% !important;
        max-width: 280px !important;      /* Comfortable mobile width without blowing up full-bleed */
        padding: 13px 15px !important;    /* Increases hit area for natural thumb interaction */
        box-sizing: border-box !important;
        text-align: center !important;
        font-size: 1.05rem !important;
        font-weight: bold !important;
        margin: auto auto 0 auto !important; /* Locks button cleanly down to the base */
    }
    

    /* ==========================================================================
   High-Specificity Mobile Fix for Return Navigation Area
   ========================================================================== */
@media screen and (max-width: 768px) {
    
    /* Lock the outer containers to the viewport width */
    main.content-wrapper .content-container.return-nav-section,
    main.content-wrapper .return-box {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* Force the specific button to sit cleanly inside the box */
    main.content-wrapper .return-box a.btn-secondary.return-btn {
        display: inline-block !important;
        width: 100% !important;  /* Forces it to span the width of the phone screen */
        max-width: 320px !important; /* Prevents it from looking ridiculously stretched on wider mobile screens */
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 14px 20px !important; /* Large, driver-friendly touch target */
        white-space: normal !important; /* Lets text break onto two lines on tiny screens */
        height: auto !important; /* Overrides any rigid desktop heights */
    }
    
    
    /* ==========================================================================
   Fix for Right-Margin Leakage (Stacking 2-Column Boxes)
   ========================================================================== */
@media screen and (max-width: 768px) {
    
    /* Force the 2-column container to behave as a vertical stack */
    main.content-wrapper .content-box-2col {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important; /* Adds a clean gap between the text blocks and sidebars */
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
    }

    /* Force both columns to take up full screen width safely */
    main.content-wrapper .main-text,
    main.content-wrapper .sidebar-column {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    /* Style the inline info callout (e.g., the VOSA block) cleanly now that it sits inline */
    main.content-wrapper .sidebar-column .side-info2 {
        width: 100% !important;
        box-sizing: border-box !important;
        margin-top: 10px !important;
    }
    
    
    /* ==========================================================================
   High-Specificity Mobile Fix for the DQC Article Button
   ========================================================================== */
@media screen and (max-width: 768px) {
    
    /* Target the primary button specifically within the text block */
    main.content-wrapper .main-text a.btn-primary {
        display: block !important;
        width: 100% !important; /* Forces it to stay within the content box boundaries */
        max-width: 320px !important; /* Matches the clean max-width of your return button */
        min-width: 0 !important;
        margin: 20px auto !important; /* Centers it beautifully on the phone screen */
        box-sizing: border-box !important;
        padding: 14px 20px !important; /* Large, thumb-friendly tap target */
        text-align: center !important;
        white-space: normal !important; /* Safely wraps text if viewed on tiny screens */
        float: none !important; /* Kills any alignment rules pulling it into the margin */
    }

    
    /* ==========================================================================
   DESKTOP VIEW PROTECTION (Screens WIDER than 768px)
   ========================================================================== */
@media screen and (min-width: 769px) {
    /* Guarantees the text and photo sit side-by-side cleanly on desktops */
    main.content-wrapper .about-flex-container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        width: 100% !important;
        gap: 30px !important;
    }

    /* Sets the text container width on desktop screens */
    main.content-wrapper .about-flex-container .benefits-text {
        flex: 1 !important;
        width: auto !important;
        display: block !important;
    }

    /* Restores the image container width next to the text on desktop screens */
    main.content-wrapper .about-flex-container .benefits-image {
        width: 40% !important; /* Adjust this percentage to match your original desktop design */
        max-width: 450px !important;
        display: block !important;
    }
}

/* ==========================================================================
   MOBILE VIEW OPTIMIZATION (Screens SMALLER than 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* Stacks text above the tanker photo on phone screens */
    main.content-wrapper .about-flex-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
        width: 100% !important;
    }

    main.content-wrapper .about-flex-container .benefits-text,
    main.content-wrapper .about-flex-container .benefits-image {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    main.content-wrapper .about-flex-container .benefits-image img {
        width: 100% !important;
        height: auto !important;
    }

    
    /* ==========================================================================
   Mobile Centering for ComplianceGB Logo
   ========================================================================== */
@media screen and (max-width: 768px) {
    
    /* Center the wrapper container contents */
    main.content-wrapper .compliance-logo-wrapper {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
        margin-bottom: 20px !important; /* Adds a clean gap below the logo before the H3 heading */
    }

    /* Force the actual logo image to sit centrally and fit fluidly */
    main.content-wrapper .compliance-logo-wrapper .compliance-logo-prominent {
        display: inline-block !important;
        max-width: 100% !important; /* Stops the logo from bleeding past the screen edge */
        height: auto !important;     /* Maincribing the original aspect ratio */
        float: none !important;      /* Clears any desktop alignments */
        margin: 0 auto !important;
    }
    
    
/* --- MOBILE METADATA STACKING ENGINE --- */

.policy-meta {
    display: flex !important;
    flex-direction: column !important; /* Stack vertically on mobile */
    align-items: center !important;
    text-align: center !important;
    gap: 6px !important; /* Slightly tighter vertical gap */
    
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 10px !important; /* Minimal horizontal padding inside the box */
}

/* 1. Hide the desktop pipe divider completely on mobile devices */
.policy-meta .divider {
    display: none !important;
}

/* 2. Scale down the line text so it comfortably clears the side borders */
.policy-meta span {
    display: block !important;
    color: #495057 !important; 
    font-size: 0.78rem !important; /* Made smaller to guarantee fit on narrow screens */
    white-space: nowrap !important; /* Keeps labels and dates locked on their respective lines */
}

/* 3. Match the strong label sizes perfectly */
.policy-meta strong {
    color: #212529 !important;
    display: inline !important;
    font-size: 0.78rem !important; /* Matches the span size exactly */
}

/* 4. Scale down the clock icons so they don't crowd the text lines */
.policy-meta strong::before {
    font-size: 0.95rem !important; /* Snug, crisp size for smaller viewports */
    margin-right: 5px !important;
}



/* --- MOBILE RESPONSIVE COOKIE TABLE --- */

@media screen and (max-width: 768px) {
    
    /* 1. Force the table structure to act like block layout containers */
    .cookie-table, 
    .cookie-table thead, 
    .cookie-table tbody, 
    .cookie-table th, 
    .cookie-table td, 
    .cookie-table tr { 
        display: block !important; 
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 2. Hide the desktop table header row completely */
    .cookie-table thead tr {
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
    }
    
    /* 3. Style each row as an independent data "card" */
    .cookie-table tr {
        background: #ffffff !important;
        border: 1px solid #ddd !important;
        border-radius: 6px !important;
        margin-bottom: 20px !important;
        padding: 10px 15px !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.03) !important;
    }
    
    /* 4. Format each table cell row to display cleanly side-by-side */
    .cookie-table td {
        border: none !important;
        position: relative !important;
        padding: 8px 0 8px 45% !important; /* Creates space on the left for labels */
        text-align: left !important;
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
        border-bottom: 1px dashed #eee !important; /* Separation line inside cards */
    }
    
    /* Remove the dashed border from the final field in the card */
    .cookie-table td:last-child {
        border-bottom: none !important;
    }
    
    /* 5. Inject custom bold labels onto the left side using pseudo-elements */
    .cookie-table td::before {
        position: absolute !important;
        left: 5px !important;
        width: 40% !important;
        padding-right: 10px !important;
        white-space: nowrap !important;
        font-weight: 700 !important;
        color: #212427 !important;
        text-transform: uppercase !important;
        font-size: 0.75rem !important;
        letter-spacing: 0.5px !important;
    }
    
    /* 6. Define the exact label content for each row dynamically based on sequential position */
    .cookie-table td:nth-of-type(1)::before { content: "Cookie:"; }
    .cookie-table td:nth-of-type(2)::before { content: "Purpose:"; }
    .cookie-table td:nth-of-type(3)::before { content: "Duration:"; }
    .cookie-table td:nth-of-type(4)::before { content: "Type:"; }
    
    /* 7. Slight tweak to keep cookie name prominent */
    .cookie-table td:nth-of-type(1) {
        font-size: 1.05rem !important;
        color: #f40000 !important; /* Signature accent alignment */
    }
}
    
    
    
 
} /* <--- EXACT, SINGLE END OF MOBILE MEDIA QUERY FIREWALL */