/* =========================================================
   1) ROOT VARIABLES (ONE PLACE ONLY)
   ========================================================= */
:root {
    /* Brand */
    --pmpro--color--base: #ffffff;
        --pmpro--color--contrast: #222222;
        --pmpro--color--accent: #0c3d54;
        --pmpro--color--accent--variation: hsl(199, 75%, 28.5%);
        --pmpro--color--border--variation: hsl(0, 0%, 91%);
    --red: #D42229;
    --navy: #1E2F62;
    --light-grey: #f4f4f4;
    --vault-dark: #0a1526;
    --white: #FFFFFF;
    --gold: #c5a059;

    /* Motion */
    --transition: all 0.4s ease-in-out;

    /* Schemes logo section (component inputs) */
    --schemes-bg: var(--white);

    /* Background sash defaults (override per page via #page-id) */
    --schemes-sash: url('../images/red-sash.png');
    --schemes-sash-size: 750px auto;
    --schemes-sash-pos: 98% 95%;

    /* Layout + logo defaults */
    --scheme-logo-w: 150px;
    --scheme-logo-h: 65px;
    --scheme-logo-gap: 60px;
    --scheme-row-space: 60px;

    /* Row widths for the honeycomb look */
    --row-4-max: 1100px;
    /* “wide” */
    --row-3-max: 850px;
    /* “narrow” */
}


/* =========================================================
   2) BASE / RESET
   ========================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    background-color: var(--light-grey);
    
    overflow-x: hidden;
}


/* =========================================================
   3) TYPOGRAPHY DEFAULTS (GLOBAL)
   - No global colors/shadows here (use classes)
   ========================================================= */
h1,
h2,
h3,
p {
    margin: 0;
}

p {
    line-height: 1.65;
}

/* Reusable section heading components */
.section-title {
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 14px;
}

.section-subtitle {
    font-weight: 500;
    opacity: 0.95;
}

/* Typography modifiers (use when needed) */
.text-navy {
    color: var(--navy);
}

.text-black {
    color: #000;
}

.text-white {
    color: var(--white);
}

.text-red {
    color: var(--red);
}

.title-xl {
    font-size: 2.5rem;
}

.title-lg {
    font-size: 2.1rem;
}

.title-md {
    font-size: 1.7rem;
}

.max-600 {
    max-width: 600px;
}

.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.shadow-soft {
    text-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.shadow-strong {
    text-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}


/* =========================================================
   4) COMPONENT: SCHEMES LOGO SECTION (GLOBAL)
   ========================================================= */
.schemes-logo-section {
    position: relative;
    padding: 100px 5% 150px 5%;
    background-color: var(--schemes-bg);
    text-align: center;

    background-image: var(--schemes-sash);
    background-repeat: no-repeat;
    background-size: var(--schemes-sash-size);
    background-position: var(--schemes-sash-pos);
}

.schemes-logo-section h2 {
    margin: 0 0 60px 0;
}

/* Row base */
.schemes-logo-section .logo-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--scheme-logo-gap);
    margin: 0 auto var(--scheme-row-space) auto;
}

/* last row spacing */
.schemes-logo-section .logo-row:last-child {
    margin-bottom: 0;
}

/* Map your existing row classes to widths */
.schemes-logo-section .logo-row.row-4 {
    max-width: var(--row-4-max);
}

.schemes-logo-section .logo-row.row-3 {
    max-width: var(--row-3-max);
    padding: 10px 0;
}

/* Logos */
.schemes-logo-section .logo-row img {
    width: var(--scheme-logo-w);
    height: var(--scheme-logo-h);
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.4s ease;
}

.schemes-logo-section .logo-row img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: translateY(-5px) scale(1.05);
}

/* Mobile: wrap neatly */
@media (max-width: 768px) {
    .schemes-logo-section .logo-row {
        gap: 30px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }

    .schemes-logo-section .logo-row img {
        width: 120px;
    }
}

/* --- 2. NAVIGATION BAR --- */
.navbar {
    height: 15vh;
    background-color: #FFFFFF !important;
    display: flex;
    align-items: center;
    border-bottom: 3px solid var(--navy);
    position: fixed;
    width: 100%;
    /*position: sticky;*/
    top: 0;
    left: 0;
    z-index: 9999;
    padding: 0 5%; /* Adds some breathing room on the sides */
    /*transition: height 0.4s ease-in-out, box-shadow 0.4s ease-in-out;*/
    /*transition: var(--transition);*/
}

.navbar.scrolled {
    height: 80px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.logo-box {
    height: 100%;
    padding-left: 5%;
    display: flex;
    align-items: center;
}

.logo-box a {
    height: 100%;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-img {
    max-height: 75%;
    width: auto;
    display: block;
    transition: var(--transition);
}

.navbar.scrolled .logo-img {
    max-height: 60%;
}

.logo-img:hover {
    transform: scale(1.05);
}

.nav-spacer {
    flex: 0 0 15%;
}


/* =========================================
   MODERN OVAL NAVIGATION & LAYOUT
   ========================================= */

.nav-links {
    display: flex;
    list-style: none;
    flex-grow: 1;
    justify-content: space-between;
    /* Keeps your spacing across the header */
    align-items: center;
    margin-right: 5%;
    padding: 0;
    gap: 5px;
    /* Adds small breathing room between ovals */
}

.nav-links li {
    position: relative;
    /* Essential for dropdown positioning */
}

.nav-links a {
    text-decoration: none;
    color: var(--navy);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 10px 22px;
    /* Balanced padding for the oval shape */
    border-radius: 50px;
    /* Creates the pill/oval shape */
    transition: all 0.3s ease;
    border: 2px solid transparent;
    /* Prevents layout jump on hover */
    white-space: nowrap;
    display: inline-block;
}

/* Hover & Active States (The Oval Effect) */
.nav-links a:hover,
.nav-links a.active,
.dropdown:hover>a {
    color: var(--red);
    background-color: rgba(212, 34, 41, 0.05);
    /* Subtle red tint */
    border-color: var(--red);
    /* Red oval border */
}

/* 2. Bring Menus Closer Together */
.nav-spacer {
    /* If this has flex-grow: 1, it pushes the menu to the far right. 
       We change it to a fixed width to bring the menu closer to the logo. */
    flex-grow: 0 !important; 
    width: 40px; /* Adjust this value to set distance between logo and first menu item */
}

.nav-links {
    display: flex !important;
    gap: 10px !important; /* This is the tight spacing you saw in nav.jpg */
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-links li a {
    padding: 5px 10px !important; /* Tightens the "hit area" of the buttons */
    font-size: 15px;
    white-space: nowrap; /* Prevents menu items from wrapping to two lines */
}

/* 3. Dropdown spacing polish */
.nav-links li.dropdown > a::after {
    margin-left: 5px; /* Keeps the dropdown arrow close to the text */
}

/* =========================================
   SUBMENU / DROPDOWN STYLES
   ========================================= */

.submenu {
    display: none;
    position: absolute;
    top: 100%;
    /* Spaced slightly below the nav bar */
    left: 0;
    /*padding-top: 15px;*/
    /*background: transparent;*/
    /* box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);*/
    list-style: none;
    padding: 10px 0 0 0;
    min-width: 220px;
    /*border-top: 3px solid var(--red);*/
    /*border-radius: 8px; /* Slightly rounded corners for the menu box */
    z-index: 1000;
}

.dropdown:hover>.submenu {
    display: block;
    animation: fadeIn 0.2s ease-in;
    /*new*/
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.submenu li {
    background: #FFFFFF;
    /* The actual visible background */
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
}

.submenu li:first-child {
    border-top: 3px solid var(--red);
    /*new*/
    border-radius: 8px 8px 0 0;
}

.submenu li:last-child {
    border-bottom: 1px solid #eee;
    border-radius: 0 0 8px 8px;
}

.submenu li a {
    display: block;
    padding: 12px 20px;
    color: var(--navy);
    text-decoration: none;
    font-size: 0.85rem;
    border-bottom: 1px solid #eee;
    /* Reset any inherited active/oval styles */
    background: none !important;
    border-radius: 0 !important;
    border: none !important;
    /*background: white;*/
}

.submenu li:last-child a {
    border-bottom: none;
}

.submenu li a:hover,
.submenu li a.active {
    background-color: #f9f9f9 !important;
    color: var(--red) !important;
    padding-left: 25px;
    /* Slight slide-in effect on hover */
}

.submenu-content {
    background: var(--white);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border-top: 3px solid var(--red);
    border-radius: 0 0 8px 8px;
    padding: 10px 0;
}

/* 1. TOP-LEVEL NAV ONLY (Ovals) */
/* This specific selector prevents styles from leaking into submenus */
.nav-links>li>a.active,
.nav-links>li>a:hover {
    color: var(--red);
    background-color: #f4f4f4;
    border: 2px solid black;
    border-radius: 50px;
}




.sash-img {
    max-width: 600px;
    /* Adjusted for better layout flow */
    height: auto;
    filter: drop-shadow(5px 5px 15px rgba(0, 0, 0, 0.15));
}

/* --- 6. MEDICAL AID PAGE SPECIFIC --- */

.medical-main-section {
    position: relative;
    padding: 80px 5% 150px 5%;
    background: url('../images/Medical-Aid-2.jpg') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* The light overlay to make text readable over the image */
.medical-main-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 1;
}

/*gap cover*/
.price-card-banner .chip {
    width: 40px;
    height: 30px;
    background: linear-gradient(135deg, #f0d08a, #c5a059);
    border-radius: 4px;
    margin-bottom: 15px;
}

/* Credit Card Price Banner */
.price-card-banner {
    width: 320px;
    height: 190px;
    background: linear-gradient(135deg, #1a3a63 0%, #05152E 100%);
    /*background: linear-gradient(135deg, #1a3a63 0%, var(--navy) 100%);*/
    border-radius: 15px;
    margin: -80px auto 40px;
    position: relative;
    z-index: 10;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    padding: 25px;
    color: white;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.fund-library-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 25px;
    /*padding: 20px;*/
    /*text-align: left;*/
    transition: 0.3s;
}

/* THE NUCLEAR RESET FOR THE NAVY WRAPPER */
section.hero-master-wrapper {
    background-color: #ffffff !important;
    background: #ffffff !important;
    /* Double-down on the property */
    display: block !important;
    width: 100% !important;
    min-height: 600px !important;
    /* Force it to have height */
    margin: 0 !important;
    padding-top: 50px !important;
    /* Clearance for fixed navbar */
    position: relative !important;
    visibility: visible !important;
    z-index: 1 !important;
}


/* Hero image per page (inputs only) */
#medical-aid-page {
    --hero-bg: url('../images/bg-medical-hero.png');
}

#gap-cover-page {
    --hero-bg: url('../images/bg-gap-hero.png');
}

#health-page {
    --hero-bg: url('../images/bg-health-hero.png');
}

#dental-page {
    --hero-bg: url('../images/bg-dental-hero.png');
}

#funeral-cover-page {
    --hero-bg: url('../images/bg-funeral-hero.png');
}

#travel-insurance-page {
    --hero-bg: url('../images/bg-travel-hero.png');
}

#short-term-page {
    --hero-bg: url('../images/bg-short-term-hero.png');
}

#invest-page {
    --hero-bg: url('../images/invest-hero.png');
}

#discovery-page {
    --hero-bg: url('../images/discovery-hero.png');
}


/*------ HOME PAGE------*/




#home-page .red-sash {
    background-color: var(--red);
    height: 80px;
    width: 100%;
    margin-top: 50px;
    margin-bottom: 50px;
    padding: 15px 0;
    position: absolute;
    bottom: 10%;
    transform: rotate(-2deg);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    /* vertical center */
    justify-content: center;

}

#home-page .sash-text {
    font-weight: bold;
    letter-spacing: 3px;
    font-size: 1.1rem;
    line-height: 1;
}

#home-page .studio-section {
    padding: 80px 5%;
    text-align: center;
    background: #05152e;
}

#home-page .studio-section .section-subtitle p {
    color: #fff;
}

#home-page .vault-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 60px;
}

/* Why CMAC Section */
#home-page .why-cmac {
    display: flex;
    flex-wrap: wrap;
    background: var(--navy);
    color: white;
}

#home-page .why-img {
    flex: 1 1 500px;
    min-height: 400px;
    background: url('../images/homepageimg.jpg') center/cover;
}

#home-page .why-text {
    flex: 1 1 500px;
    padding: 80px 5%;
}

#home-page .check-item {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

#home-page .check-icon {
    color: #C5A059;
    font-size: 1.5rem;
    margin-right: 15px;
}



#home-page .sash-img {
    position: absolute;
    /* Adjust this to move it exactly where you want it within that new space */
    bottom: 40px;
    /* This lifts it 40px off the footer line */
    right: 2%;
    width: 500px;
    z-index: 10;
}

#home-page .sash-img img {
    display: block;
    width: 100%;
    height: auto;
}

/* Floating CTA */
.floating-cta {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: var(--red);
    color: white;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: 0.3s;
}

.floating-cta:hover {
    transform: scale(1.05);
    background: #b11b21;
}


/*MEDICAL AID PAGE STYLES*/
/*========================================= */


/* Background overlay for readability */


#medical-aid-page .section-content {
    position: relative;
    z-index: 2;
}

.info-banner {
    display: inline-block;
    background-color: var(--navy);
    color: #FFFFFF;
    padding: 20px 40px;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 80px;
    max-width: 500px;
    width: 100%;
    margin-bottom: 1px;
}

.info-banner {
    position: relative;
    z-index: 2;
    text-align: center;
}

#medical-aid-page .fund-library-card h3 {
    color: white;
    margin-top: 0;
}

#medical-aid-page .pdf-list {
    list-style: none;
    padding: 0;
}

#medical-aid-page .pdf-list a {
    color: #3498db;
    text-decoration: none;
}

/*MEDICAL AID PAGE - FINAL CLEANUP
========================================= */

/* Title Colors */
#medical-aid-page .title-red {
    color: var(--red);
}

#medical-aid-page .title-navy {
    color: var(--navy);
}

/* Card Container tweaks */
#medical-aid-page .card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
}



/* Library Section Header */
#medical-aid-page .library-title {
    text-align: center;
    margin-bottom: 40px;
    color: #FFFFFF;
}

#medical-aid-page .library-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}


/*GAP COVER PAGE STYLES
   ========================================= */
#gap-cover-page .medical-main-section {
    background: url('../images/gap-puzzle.png') no-repeat center center fixed;
}


/*#gap-cover-page .medical-main-section {
  /*  position: relative;
    /*padding: 80px 5%;
    /*background: url('../images/gap-puzzle.png') no-repeat center center fixed;
    /*background-size: cover;
}*/

#gap-cover-page .medical-main-section .section-content {
    position: relative;
    z-index: 2;
    /* This must be higher than the ::before z-index */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}



#gap-cover-page .price-card-banner h4 {
    margin: 0;
    font-size: 0.7rem;
    color: #aaa;
    letter-spacing: 1px;
}

#gap-cover-page .price-amount {
    font-size: 2.2rem;
    font-weight: bold;
    margin: 10px 0;
}

#gap-cover-page .price-sub {
    margin: 0;
    font-size: 0.8rem;
    opacity: 0.8;
}

/* =========================================

   HEALTH INSURANCE PAGE STYLES
   ========================================= */

#health-page .portrait-section {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: -50px auto 60px;
    padding: 0 5%;
    flex-wrap: wrap;
}

#health-page .oval-card {
    width: 220px;
    background: white;
    border-radius: 100px;
    padding: 60px 40px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border: 2px solid transparent;
    transition: var(--transition);
    margin-top: 100px;

}

#health-page .oval-card:hover {
    border-color: var(--red);
    transform: translateY(-10px);
}

#health-page .oval-card h3 {
    color: var(--red);
    font-size: 1.4rem;
    margin-bottom: 20px;
    text-transform: uppercase;
}

#health-page .oval-card.navy-theme {
    background: var(--navy);
    color: white;
}

#health-page .oval-card.navy-theme h3 {
    color: white;
}

#health-page .oval-card.red-theme {
    background: var(--red);
    color: white;
}

#health-page .oval-card.red-theme h3 {
    color: white;
}

#health-page .oval-card ul {
    list-style: none;
    padding: 0;
    text-align: left;
    font-size: 0.9rem;
    line-height: 2;
}

#health-page .oval-card ul li::before {
    content: "• ";
    color: var(--gold);
    font-weight: bold;
}

/* Split Sections */
#health-page .split-section {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background: white;
    margin-bottom: 2px;
}

#health-page .split-section.reverse {
    flex-direction: row-reverse;
}

#health-page .split-img {
    width: 50%;
    height: 500px;
    background-size: cover;
    background-position: center;
}

#health-page .split-text {
    width: 50%;
    padding: 60px 8%;
    box-sizing: border-box;
}

#health-page .highlight-title {
    font-size: 2.2rem;
    font-weight: bold;
    color: var(--navy);
    margin-bottom: 15px;
}

/* Voucher Grid */
#health-page .voucher-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    padding: 40px 5%;
    background: #eee;
}

#health-page .v-card {
    background: linear-gradient(135deg, #2c3e50, #05152E);
    border-radius: 15px;
    padding: 25px;
    color: white;
    height: 180px;
    position: relative;
    transition: 0.3s;
    transform: skewX(-2deg);
    border-left: 5px solid var(--gold);
}

#health-page .v-card.dark {
    background: #333;
}

#health-page .v-card:hover {
    transform: skewX(0deg) scale(1.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    z-index: 5;
}

#health-page .v-brand {
    font-size: 0.7rem;
    letter-spacing: 2px;
    color: var(--gold);
    font-weight: bold;
}

#health-page .v-price {
    font-size: 2rem;
    font-weight: bold;
    margin: 15px 0;
}

#health-page .v-type {
    font-size: 0.75rem;
    opacity: 0.8;
    line-height: 1.2;
}

#health-page .chip {
    width: 40px;
    height: 30px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    float: right;
}

/* Banner Dividers */
#health-page .section-divider {
    padding: 40px 5%;
    text-align: center;
    color: white;
}

#health-page .bg-navy {
    background: var(--navy);
}

#health-page .bg-red {
    background: var(--red);
}

/* --- Additional Health Page Classes --- */



#health-page .hero-p-gold {
    font-size: 1.5rem;
    color: var(--gold);
    font-weight: bold;
}

#health-page .section-title-navy {
    color: var(--navy);
    margin-bottom: 40px;
}

#health-page .voucher-header-navy {
    background: var(--navy);
    color: white;
    padding: 40px 5%;
    text-align: center;
}

#health-page .voucher-header-red {
    background: var(--red);
    color: white;
    padding: 40px 5%;
    text-align: center;
}

#health-page .voucher-grid-white {
    background: #fff;
}

#health-page .no-margin {
    margin: 0;
}

#health-page .subtitle-opacity {
    opacity: 0.7;
}

#health-page .emergency-bg {
    background-image: url('https://images.unsplash.com/photo-1504813184591-01572f98c85f?auto=format&fit=crop&w=800&q=80');
}

#health-page .payg-bg {
    background-image: url('https://images.unsplash.com/photo-1516549655169-df83a0774514?auto=format&fit=crop&w=800&q=80');
}

/* =========================================
   DENTAL INSURANCE PAGE STYLES
   ========================================= */



/* Voucher Section */
#dental-page .voucher-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: -80px auto 60px;
    padding: 0 5%;
}

#dental-page .voucher-card {
    width: 320px;
    height: 190px;
    border-radius: 15px;
    padding: 25px;
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    transition: var(--transition);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#dental-page .voucher-card:hover {
    transform: translateY(-10px);
}

#dental-page .v-netcare {
    background: linear-gradient(135deg, #1a3a63 0%, var(--navy) 100%);
}

#dental-page .v-tag {
    font-size: 0.65rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: bold;
}

#dental-page .v-price {
    font-size: 2.2rem;
    font-weight: bold;
    margin: 10px 0;
}

#dental-page .v-footer {
    font-size: 0.7rem;
    opacity: 0.8;
    position: absolute;
    bottom: 25px;
    line-height: 1.2;
    padding-right: 20px;
}

#dental-page .chip {
    width: 40px;
    height: 30px;
    background: linear-gradient(135deg, #f0d08a, #c5a059);
    border-radius: 4px;
    float: right;
}

/* Split Content Sections */
#dental-page .split-section {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background: white;
}

#dental-page .split-section.reverse {
    flex-direction: row-reverse;
}

#dental-page .split-img {
    width: 50%;
    height: 500px;
    background-size: cover;
    background-position: center;
}

#dental-page .split-text {
    width: 50%;
    padding: 60px 8%;
    box-sizing: border-box;
}

/* Image Classes for Dental */
#dental-page .img-dental-why {
    background-image: url('https://images.unsplash.com/photo-1629909613654-28e377c37b09?auto=format&fit=crop&w=800&q=80');
}

#dental-page .img-dental-savings {
    background-image: url('https://images.unsplash.com/photo-1593054999502-d9b00a749818?auto=format&fit=crop&w=800&q=80');
}

#dental-page .img-dental-claims {
    background-image: url('https://images.unsplash.com/photo-1468493858157-0da44aaf1d13?auto=format&fit=crop&w=800&q=80');
}

#dental-page .highlight-box {
    color: var(--navy);
    font-size: 2.2rem;
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: bold;
}

#dental-page .important-note {
    background: #fff0f0;
    border-left: 4px solid var(--red);
    padding: 20px;
    margin-top: 20px;
    font-size: 0.95rem;
}

#dental-page .partner-title-navy {
    color: var(--navy);
}

/* =========================================
   COMPLIANCE PAGE STYLES
   ========================================= */



#compliance-page .compliance-content {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 5%;
}

#compliance-page .legal-grid {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 50px;
}

#compliance-page .legal-nav {
    position: sticky;
    top: 120px;
    height: fit-content;
}

#compliance-page .legal-nav ul {
    list-style: none;
    padding: 0;
    border-left: 2px solid #eee;
}

#compliance-page .legal-nav li a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: var(--navy);
    font-weight: 600;
    transition: 0.3s;
}

#compliance-page .legal-nav li a:hover {
    color: var(--red);
    border-left: 2px solid var(--red);
    margin-left: -2px;
}

#compliance-page .legal-text article {
    margin-bottom: 60px;
    line-height: 1.8;
}

#compliance-page .legal-text h2 {
    color: var(--navy);
    border-bottom: 2px solid var(--gold);
    display: inline-block;
    margin-bottom: 20px;
}

#compliance-page .legal-text ul {
    margin-top: 15px;
    padding-left: 20px;
}

#compliance-page .legal-text li {
    margin-bottom: 10px;
}

@media (max-width: 992px) {
    #compliance-page .legal-grid {
        grid-template-columns: 1fr;
    }

    #compliance-page .legal-nav {
        display: none;
        /* Hide sidebar on mobile for cleaner reading */
    }
}

/* =========================================
   CONTACT PAGE SCOPED STYLES
   ========================================= */

#contact-page .contact-h1 {
    font-size: 3.5rem;
    color: #fff;
    margin-bottom: 10px;
}

#contact-page .contact-p-gold {
    color: var(--gold);
    font-weight: bold;
    font-size: 1.2rem;
}





#contact-page .contact-grid-section {
    padding: 0 5% 80px;
    margin-top: -60px;
}



/* Info Panel Styling */
#contact-page .contact-info-panel {
    background: var(--navy);
    color: #fff;
    padding: 60px;
}

#contact-page .info-title {
    color: var(--gold);
    font-size: 2rem;
    margin-bottom: 20px;
}

#contact-page .detail-card {
    margin-bottom: 30px;
}

#contact-page .detail-label {
    display: block;
    color: var(--gold);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

#contact-page .detail-card p,
#contact-page .detail-card a {
    color: #fff;
    text-decoration: none;
    font-size: 1.1rem;
}

#contact-page .google-map-mock {
    height: 200px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    margin-top: 40px;
}

/* Form Panel Styling */
#contact-page .contact-form-panel {
    padding: 60px;
    background: #fff;
}

#contact-page .form-title {
    color: var(--navy);
    font-size: 2rem;
    margin-bottom: 30px;
}

#contact-page .form-input-group {
    margin-bottom: 20px;
}

#contact-page .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

#contact-page label {
    display: block;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 8px;
    font-size: 0.9rem;
}

#contact-page input,
#contact-page select,
#contact-page textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #eee;
    border-radius: 8px;
    font-size: 1rem;
    transition: 0.3s;
}

#contact-page input:focus,
#contact-page select:focus,
#contact-page textarea:focus {
    border-color: var(--gold);
    outline: none;
    background: #fdfaf3;
}

#contact-page .contact-submit-btn {
    width: 100%;
    background: var(--red);
    color: #fff;
    border: none;
    padding: 18px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.1rem;
    cursor: pointer;
    transition: 0.3s;
}

#contact-page .contact-submit-btn:hover {
    background: var(--navy);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Responsive */
@media (max-width: 992px) {
    #contact-page .contact-wrapper {
        grid-template-columns: 1fr;
    }

    #contact-page .form-row {
        grid-template-columns: 1fr;
    }

    #contact-page .contact-info-panel,
    #contact-page .contact-form-panel {
        padding: 40px;
    }
}

/* --- 3. SHARED COMPONENTS --- */
/* --- PARTNER BOX STYLE REFINEMENT --- */
.logo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    max-width: 1100px;
    margin: 40px auto;
}

.partner-box {
    background: white;
    padding: 20px;
    border-radius: 8px;
    height: 120px;
    /* Standardized height */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    border: 1px solid #eee;
}

/* Grayscale effect applied to images inside partner-box */
.partner-box img {
    max-width: 80%;
    max-height: 80%;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: var(--transition);
}

.partner-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    border-color: var(--red);
}

.partner-box:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Global Footer */
footer {
    background: black;
    color: white;
    text-align: center;
    padding: 50px 20px;
}

/* --- PARTNER SECTION HEADING --- */
.partners-section {
    padding: 80px 5%;
    background: #f4f4f4;
    /* FIX: This centers the H2 and any other text in the section */
    text-align: center;
}

.partners-section h2 {
    margin: 0;
    font-size: 2.2rem;
    /* FIX: Ensures the heading doesn't hug the logos too tightly */
    padding-bottom: 20px;
}

/* --- 4. THE DOCUMENT VAULT --- */
.document-vault {
    background-color: var(--vault-dark);
    padding: 80px 5%;
    color: white;
}

.vault-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 50px;
}

.vault-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 25px;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.vault-card:hover {
    box-shadow: 0 0 20px rgba(212, 34, 41, 0.3);
    border-color: var(--red);
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.12);
}

/* Vault Drawer Interaction */
.drawer-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background: rgba(0, 0, 0, 0.2);
}

.vault-drawer.active .drawer-content {
    max-height: 500px;
    padding: 10px;
}

.medical-card {
    background: #FFFFFF;
    padding: 40px;
    border-radius: 12px;
    width: 280px;
    box-shadow: 0 15px 35px rgba(5, 21, 46, 0.1);
    border-bottom: 5px solid var(--red);
    transition: var(--transition);
    text-align: center;
}

.medical-card:hover {
    transform: translateY(-10px);
}

/* --- 5. HOME PAGE SPECIFIC (The Studio Look) --- */

/* Studio Services Grid */
.studio-section {
    padding: 120px 5% 80px;
    background: #fff;
    text-align: center;
}

.service-card {
    padding: 40px 20px;
    border-radius: 4px;
    background: #fcfcfc;
    transition: var(--transition);
    border-bottom: 5px solid transparent;
    cursor: pointer;
}

.service-card:hover {
    background: #f9f9f9;
    border-bottom-color: var(--red);
    transform: translateY(-15px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

/* Z-Pattern Why CMAC */
.why-cmac {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: var(--navy);
    color: white;
}

.why-img {
    flex: 1;
    min-width: 50%;
    height: 600px;
    background: url('../images/homepageimg.jpg') center/cover;
}

.why-text {
    flex: 1;
    min-width: 50%;
    padding: 80px 8%;
}

.card-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
}


/* Sash Adjustment */
.sash-container {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: right;
    margin-top: 40px;
}




.highlight-text {
    font-size: 1.2rem;
    color: #ffcccc;
    font-weight: bold;
    margin-top: 10px;
}

.document-library {
    background: #0a1f3d;
    padding: 80px 5%;
}

.fund-library-card:hover {
    border-color: var(--red);
    background: rgba(255, 255, 255, 0.1);
}

/* Footer layout */
.site-footer {
    padding: 30px 20px;
}

.footer-container {
    width: 100%;
    max-width: none;
    /* removes 1200px cap */
    margin: 0 auto;
    background-color: black;

    display: grid;
    grid-template-columns: 30% 30% 30%;
    /* each column ~30% of screen */
    justify-content: space-between;
    /* leftover space becomes spacing */
    align-items: start;
}

.footer-col h3 {
    margin: 0 0 10px;
}

.footer-logo {
    max-width: 220px;
    height: auto;
    display: block;
}

/* Links */
.footer-col a,
.footer-legal a {
    text-decoration: none;
}

/* Legal row under the 3 columns */
.footer-legal {
    grid-column: 1 / -1;
    margin-top: 10px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.95rem;
}

/* Mobile: stack columns */
@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr;
    }

    .footer-logo {
        max-width: 160px;
    }
}

.site-footer a {
    color: white;
}

.site-footer a:hover {
    color: red;
}

/* =========================================================
   RESPONSIVE NAVBAR (MOBILE HAMBURGER)
   - Desktop nav untouched
   - Mobile: logo left + hamburger right + menu holder panel
   - Hamburger matches oval link styling + hover behavior
   ========================================================= */

.nav-toggle {
    display: none;
}

/* Clamp logo size so it never expands out of context */
.logo-img {
    display: block;
    width: auto;
    height: auto;
    max-height: 104px;
    margin-left: 25px;
}

/* Mobile only */
@media (max-width: 900px) {

    /* Keep navbar on top */
    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        height: auto;
        padding: 10px 16px;

        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Hide spacer on mobile */
    .nav-spacer {
        display: none;
    }

    /* Hide desktop menu items on the bar */
    .nav-links {
        display: none !important;
    }

    /* Hamburger = same oval/pill styling as your links */
    .nav-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 50%;
        border: 2px solid transparent;
        background: transparent;
        color: var(--navy);
        cursor: pointer;
        transition: all 0.3s ease;
        -webkit-tap-highlight-color: transparent;
    }

    /* Same hover/active visual effect as your .nav-links a */
    .nav-toggle:hover,
    .navbar.nav-open .nav-toggle {
        color: var(--red);
        background-color: rgba(212, 34, 41, 0.05);
        border-color: var(--red);
    }

    /* Hamburger bars (3 lines using one span) */
    .nav-toggle span {
        display: block;
        width: 18px;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
        position: relative;
    }


    .nav-toggle span::before,
    .nav-toggle span::after {
        content: "";
        position: absolute;
        left: 0;
        width: 18px;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
    }


    .nav-toggle span::before {
        top: -6px;
    }

    .nav-toggle span::after {
        top: 6px;
    }


    /* Menu opens in a proper white holder panel */
    .navbar.nav-open .nav-links {
        display: block !important;
        position: absolute;
        top: calc(100% + 10px);
        left: 16px;
        right: 16px;

        background: #fff;
        border: 1px solid #eee;
        border-top: 3px solid var(--red);
        border-radius: 14px;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);

        padding: 10px;
        margin: 0;
        list-style: none;
    }

    /* Stack menu items inside holder */
    .navbar.nav-open .nav-links>li {
        width: 100%;
    }

    /* Top-level links become full-width pills inside holder */
    .navbar.nav-open .nav-links>li>a {
        display: block;
        width: 100%;
        padding: 12px 16px;
        border-radius: 50px;
        border: 2px solid transparent;
    }

    /* Mobile dropdown submenu behavior (your JS adds .open on LI.dropdown) */
    .navbar.nav-open .submenu {
        position: static !important;
        display: none;
        margin: 8px 0 10px 0;
        padding: 8px 0 0 0;
        list-style: none;
    }

    .navbar.nav-open .dropdown.open>.submenu {
        display: block;
    }

    /* Prevent page content hiding under fixed navbar */
    body {
        padding-top: 86px;
    }
}



/* Responsive Upgrades */
@media (min-width: 768px) {
    #home-page .hero-container {
        padding: 120px 40px;
    }

    #home-page .hero-container h1 {
        font-size: 3.5rem;
    }

    #home-page .hero-container h2 {
        font-size: 1.5rem;
    }

    #home-page .sash-text {
        font-size: 1.1rem;
    }
}




/* ===============================
   GLOBAL HERO COMPONENT
   =============================== */

.hero-container {
    min-height: 90vh;
    position: relative;
    padding: 100px 5%;
    color: var(--white);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    background:
        linear-gradient(var(--hero-overlay, rgba(5, 21, 46, 0.85)),
            var(--hero-overlay, rgba(5, 21, 46, 0.85))),
        var(--hero-bg, #1e2f62) center/cover no-repeat;
}

.fsc-number {
    font-size: 0.8rem !important;
}

.sash-text {
    font-size: 0.95rem;
}

.hero-content {
    max-width: 900px;
    z-index: 2;
}

.hero-container h1 {
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero-container h2 {
    font-size: 1.5rem;
    font-weight: 400;
    opacity: 0.95;
}

/* ===============================
   RED SASH (Optional Accent)
   =============================== */

.red-sash {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: var(--red);
    padding: 15px 0;
    transform: rotate(-2deg);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.sash-text {
    font-weight: bold;
    text-align: center;
    letter-spacing: 2px;
    font-size: 1rem;
    color: var(--white);
}

/* ===============================
   PAGE-SPECIFIC HERO BACKGROUNDS
   =============================== */

#home-page {
    --hero-bg: url('../images/hero-bg.jpg');
    --hero-overlay: rgba(5, 21, 46, 0.85);
}

#medical-aid-page {
    --hero-bg: url('../images/bg-medical-hero.png');
    --hero-overlay: rgba(5, 21, 46, 0.85);
}

#gap-cover-page {
    --hero-bg: url('../images/bg-gap-hero.png');
    --hero-overlay: rgba(5, 21, 46, 0.85);
}

#health-page {
    --hero-bg: url('../images/bg-health-hero.png');
    --hero-overlay: rgba(5, 21, 46, 0.85);
}

#dental-page {
    --hero-bg: url('../images/bg-dental-hero.png');
    --hero-overlay: rgba(5, 21, 46, 0.85);
}

/* Responsive Upgrades */
@media (max-width: 768px) {
    .hero-container {
        padding: 80px 20px;
    }

    .hero-container h1 {
        font-size: 2.2rem;
    }

    .hero-container h2 {
        font-size: 1.2rem;
    }

    .sash-text {
        font-size: 0.95rem;
    }
}

/* Make sure both are scoped correctly under #home-page */
#home-page .hero-container h1 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

#home-page .hero-container h2 {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
    letter-spacing: 1px;
    opacity: 0.9;
}


#contact-page .hero-container h1 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

#contact-page .hero-container h2 {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
    letter-spacing: 1px;
    opacity: 0.9;
}


#contact-page .contact-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

/* Global hero heading styling for all pages */
.hero-container h1 {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1px;
    margin-bottom: 10px;
    text-align: center;
}

.hero-container h2,
.hero-container .subheading {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.5px;
    margin-top: 0;
    text-align: center;
    opacity: 0.95;
}

/* Optional soft shadow for all hero headings */
.hero-container h1,
.hero-container h2 {
    text-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.hero-container {
    background-color: #05152e !important;
    /* The core Navy color */
    width: 100%;
    /* 140px top padding to clear your fixed navbar */
    padding: 140px 20px 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    /* Ensures the Navy background is visible even if the image is missing */
    min-height: 60vh;
    border-bottom: 4px solid #ff0000;
    /* Optional: Red accent line at the bottom */
}

/* THE OUTER WRAPPER - Edge-to-Edge Navy */
.hero-master-wrapper {
    background-color: #05152e !important;

}

/* THE INNER CONTAINER - Centered Content */
.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-image-wrapper {
    width: 100%;
    max-width: 1024px;
    margin-bottom: 50px;
}

.hero-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* THE BUTTONS */
.hero-button-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.orwell-btn {
    background-color: #cccccc;
    color: #000;
    padding: 16px 36px;
    text-decoration: none;
    font-weight: 900;
    font-size: 16px;
    text-transform: uppercase;
    border-radius: 50px;
    border: 3px solid #ff0000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: all 0.2s ease-in-out;
}

.orwell-btn:hover {
    background-color: #ffffff;
    transform: scale(1.05);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.7);
}

/* 1. Make the Logo Larger */
.logo-box {
    padding-left: 2px; /* Give the logo some breathing room from the edge */
}

.logo-img {
    height: 10vh !important; /* Scale with your 15vh navbar */
    min-height: 80px;        /* Ensure it doesn't get too small */
    width: auto;
    display: block;
}


/* Ensure the parent can hold the absolute submenu */
.nav-links li {
    position: relative;
}

/* Hide submenus by default */
.submenu {
    display: none;
    position: absolute;
    top: 100%; /* Sits right at the bottom of the nav bar */
    left: 0;
    background-color: #ffffff;
    min-width: 220px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border: 1px solid #e0e0e0;
    padding: 0;
    margin: 0;
    list-style: none;
    z-index: 10000;
}

/* Hover trigger */
.nav-links li:hover > .submenu {
    display: block;
}

/* --- CLEAN SUBMENU BLOCK --- */

/* Parent container logic */
.nav-links li {
    position: relative;
}

/* The actual dropdown box */
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    min-width: 260px; /* Breatheable width */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border: 1px solid #e0e0e0;
    padding: 10px 0; /* Vertical space top and bottom */
    margin: 0;
    list-style: none;
    z-index: 10000;
}

/* Hover trigger */
.nav-links li:hover > .submenu {
    display: block;
}

/* Submenu Link Styling */
.submenu li a {
    color: #333 !important;
    padding: 15px 25px !important; /* The breathing room */
    display: block !important;
    font-size: 14px !important;
    text-align: left !important;
    text-transform: none !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out;
}

/* Hover State: Purple Background / White Text */
.submenu li a:hover {
    background-color: #605be5 !important; /* Your requested purple pop */
    color: #ffffff !important;           /* White text for contrast */
    padding-left: 32px !important;       /* The "nudge" effect */
}

/* The divider lines */
.submenu li {
    width: 100%;
    border-bottom: 1px solid #f2f2f2;
}

.submenu li:last-child {
    border-bottom: none;
}

/* Dropdown Arrow alignment */
.arrow {
    font-size: 9px;
    margin-left: 6px;
    display: inline-block;
    vertical-align: middle;
}

/* --- UPDATED SUBMENU HOVER (COGNITO BLUE) --- */

/* Use the exact blue from the Submit button in your form screenshot */
.submenu li a:hover {
    background-color: #605be5 !important; /* Cognito Blue */
    color: #ffffff !important;           /* White text for clear contrast */
    padding-left: 32px !important;       /* Maintains the 'nudge' effect */
    text-decoration: none !important;
}

/* Ensure the divider lines don't look weird when the blue background hits them */
.submenu li:hover {
    border-bottom-color: #605be5 !important;
}


/* ==========================================================================
   FINAL CLEAN FOOTER (Matches footer.jpg)
   ========================================================================== */

/* 1. The Main Container - Force full width and correct color */
.site-footer.footer-container {
    background-color: #D1CDCD !important; 
    width: 100% !important;
    padding: 60px 0; /* Changed from 0px to 60px to give it breathing room */
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #2D3142;
    clear: both; /* Ensures it doesn't tuck under the previous section */
}

/* 2. Top Grid - 3 Columns for Logo, Contact, Address */
.footer-grid-top {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 0 50px;
    width: 90%;
    max-width: 1140px;
    margin-bottom: 40px;
}

/* 3. Logo Box - Spans all rows, white background as per footer2.jpg */
.footer-logo-span {
    grid-row: 1 / span 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff; 
    padding: 20px;
    border-radius: 4px;
}

.footer-logo-span img {
    max-width: 100%;
    height: auto;
}

/* 4. Text Grouping - Force left alignment within columns */
.footer-info-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left; 
}

.footer-info-group h3 {
    font-size: 22px;
    font-weight: 800;
    margin: 5px 0;
    color: #000;
}

.footer-info-group p {
    font-size: 18px;
    font-weight: 600;
    margin: 2px 0;
    color: #333;
}

/* 5. The Map - 80% wide and centered */
.footer-map-frame {
    width: 80%;
    margin: 50px auto;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.footer-map-frame iframe {
    display: block;
    width: 100%;
}

/* Logo Spanning 3 Rows - Now Transparent */
.footer-logo-span {
    grid-row: 1 / span 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent; /* Removed the #ffffff white box */
    padding: 0; /* Removed padding to allow the logo to sit naturally */
}

.footer-logo-span img {
    max-width: 280px; /* Adjust this to match the visual weight of the text columns */
    height: auto;
    display: block;
}

.site-footer.footer-container {
    background-color: #D1CDCD !important; 
    width: 100% !important; /* Forces the grey to the screen edges */
    max-width: 100% !important; /* Overrides any previous 'boxed' constraints */
    margin: 0;
    padding: 60px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-logo-span {
    align-items: flex-start; /* Moves logo to the top of the row */
    padding-top: 0px;        /* Fine-tune this to match the 'C' in Contact */
}

.footer-info-group {
    margin-top: 40px; /* Adjust this value until it looks right to you */
}

/* About Us Page Background */
.about-page-body {
    background-color: #05152E;
    padding-bottom: 50px; /* Space before the footer */
}

/* Section Container */
.about-section {
  padding-top: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* The Responsive Image Controlled by Margins */
.about-img {
    height: auto;
    display: block;
    
    /* ADJUST THESE TWO LINES TO CONTROL SIZE/POSITION */
    margin: 0 10%;  /* First number is Top/Bottom (set to 0), Second is Left/Right */
    margin-top: 120px; /* Separate control for the top spacing */
    
    width: auto; /* Allow margins to dictate width */
    max-width: 100%; 
}

.sash-overlap {
    /* This pulls the Sash up over Image 6 */
    margin-top: -350px; /* Adjust this value to control how much it overlaps */
    
    /* Ensures the Sash stays on top of Image 6 */
    position: relative; 
    z-index: 210; 
}

/* Optional: If you want the Sash to be wider than the 10% margin used on images */
.sash-overlap .about-img {
    margin: 0 5%; /* Smaller side margins = wider image */
    width: 90%; 
}

.contact-form-section {
    background-color: #fafafa;
    padding: 60px 20px;
    width: 100%;
}

.form-container {
    max-width: 800px;
    margin: 0 auto;
    font-family: sans-serif;
    color: #333;
}

.form-group { margin-bottom: 15px; }
.form-label { font-weight: bold; display: block; margin-bottom: 5px; }
.required { color: red; }

.flex-row { display: flex; gap: 10px; }
.half-width { width: 50%; }

.input-field {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box; /* Crucial for keeping widths accurate */
}

.grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 5px;
    font-size: 14px;
}

.region-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}


/* About Us Page Background */
.medical-aid-page-body {
    background-color: #05152E;
    padding-bottom: 50px; /* Space before the footer */
}

/* Section Container */
.medical-aid-section {
  padding-top: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.medical-aid-img {
    height: auto;
    display: block;
    
    /* ADJUST THESE TWO LINES TO CONTROL SIZE/POSITION */
    margin: 0 10%;  /* First number is Top/Bottom (set to 0), Second is Left/Right */
    margin-top: 120px; /* Separate control for the top spacing */
    
    width: auto; /* Allow margins to dictate width */
    max-width: 100%; 
}

/* Global "Jump to Library" Button */
.jump-to-docs-wrapper {
   margin-top: 100px;
    display: flex;
    justify-content: flex-end; /* Pushes to the top right */
    padding: 10px 20px;
    background: transparent;
}

.cmac-jump-btn {
    display: inline-block;
    padding: 8px 20px;
    background-color: #ffffff;
    color: #e31e24; /* CMAC Red */
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    border: 2px solid #000000;
    /* The "Leaf" Shape */
    border-radius: 15px 0 15px 0; 
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 3px 3px 0px #003366; /* Blue shadow for depth */
}

.cmac-jump-btn:hover {
    transform: scale(1.1); /* The "Bounce" effect */
    color: #003366; /* Changes to Blue */
    background-color: #f8f9fa;
    box-shadow: 1px 1px 0px #e31e24;
}

/* 1. Set the background to a neutral white to match your main content */
body { 
    background-color: #05152E; 
    margin: 0; 
    padding-top: 10px; /* This reserves space for your fixed header globally */
}

/* 2. Fix the wrapper so it doesn't cause a 'jump' */
.jump-to-docs-wrapper {
    display: flex;
    justify-content: flex-end;
    padding: 12px 36px;
    background-color: #05152E;
    /* Remove the margin-top from here! */
    height: 60px; /* Giving it a fixed height prevents the 'flicker' */
    box-sizing: border-box;
}

.funeral-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.funeral-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image stretches without distortion */
}

.funeral-hero-content {
    position: relative;
    z-index: 2; /* Sits on top of the wide image */
    width: 90%;
    max-width: 1200px;
}

.funeral-hero-content-image-wrapper img {
    max-width: 400px; /* Adjust size of the second image */
    height: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); /* Adds depth */
    border-radius: 8px;
}

/* 1. Header & Hero: Flush Connection */
#sti-jump-section {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#sti-main-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Hero Image Style (100% width) */
.sti-hero-row {
    line-height: 0;
    margin-bottom: 50px; /* Space between Hero and first content image */
}

.sti-hero-img {
    display: block;
    width: 100%;
    height: auto;
}

/* 2. Content Images Style (10% side margins + 50px spacing) */
.sti-content-row {
    margin-left: 10% !important;
    margin-right: 10% !important;
    margin-bottom: 50px !important; /* The 50px vertical spacing */
    line-height: 0;
    display: block;
}

.sti-content-img {
    display: block;
    width: 100%; /* Spans the available width inside the 10% margins */
    height: auto;
}

/* 3. Sash Logic */
.sti-relative {
    position: relative;
}

#sti-sash-overlap {
    position: relative;
    margin-top: -80px; /* Pulls the sash up onto the 10% width image */
    z-index: 5;
}


.orwell2-btn {
    display: inline-block;
    background-color: #ffffff; /* Contrast against the dark hero */
    color: #05152e;
    padding: 12px 20px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    border: 1px solid #ffffff;
    text-align: center;
    min-width: 200px;
}

.orwell2-btn:hover {
    background-color: #4a90e2; /* Matches your submit button */
    color: white;
    border-color: #4a90e2;
}

/* =========================================================
   AUDIT: INDEX PAGE (#home-page)
   ========================================================= */

/* 1. Hero Section Replication */
#home-page .hero-master-wrapper {
    background-color: #ffffff;
}

#home-page .hero-button-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 30px;
}

/* 2. Contact Section Replication */
#home-page .contact-form-section {
    background-color: #fafafa;
    padding: 60px 20px;
    width: 100%;
}

#home-page .form-inner-container {
    max-width: 800px;
    margin: 0 auto;
    font-family: sans-serif;
    color: #333;
}

#home-page .form-inner-container h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

/* 3. Form Element Replication */
#home-page .hp-field {
    display: none !important;
}

#home-page .form-group {
    margin-bottom: 15px;
}

#home-page .form-group-last {
    margin-bottom: 20px;
}

#home-page .required-star {
    color: red;
}

#home-page label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

/* 4. Layout Flex Replication */
#home-page .name-flex, 
#home-page .contact-flex {
    display: flex;
    gap: 10px;
}

#home-page .contact-flex {
    gap: 20px;
    margin-bottom: 15px;
}

#home-page .flex-half {
    width: 50%;
}

/* 5. Inputs & Buttons Replication */
#home-page .name-flex input {
    width: 50%;
}

#home-page input, 
#home-page textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box; /* Ensures padding doesn't break width */
}

#home-page .submit-btn {
    background-color: #4a90e2;
    color: white;
    padding: 10px 24px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}

/* =========================================================
   AUDIT RESTORATION: INDEX PAGE (#home-page)
   ========================================================= */

/* ... (Keep previous hero/form styles from the last step) ... */

/* Checkbox Grid Styles */
#home-page .checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 10px;
    background: #f4f4f4;
    padding: 15px;
    border-radius: 5px;
}

#home-page .check-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    cursor: pointer;
    font-weight: normal; /* To distinguish from main labels */
}

#home-page .check-item input {
    width: auto;
    margin-right: 8px;
}

/* Map Section Styles */
#home-page .map-section {
    width: 100%;
    padding: 40px 0;
    background-color: #fff;
}

#home-page .map-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    height: 450px;
}

#home-page .map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* =========================================================
   AUDIT: CONTACT PAGE (#contact-us-page)
   ========================================================= */

#contact-us-page .contact-wrapper {
    background-color: #05152e;
    overflow-x: hidden;
    position: relative;
}

#contact-us-page .about-section {
    text-align: center;
    padding: 20px;
    position: relative;
    z-index: 1;
}

#contact-us-page .about-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Form Container */
#contact-us-page .contact-form-section {
    padding: 40px 15px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 10;
}

#contact-us-page .form-container {
    width: 100%;
    max-width: 800px;
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    font-family: sans-serif;
    position: relative;
}

#contact-us-page .form-title {
    color: #05152e;
    margin-top: 0;
    margin-bottom: 25px;
    border-bottom: 2px solid #4a90e2;
    padding-bottom: 10px;
}

/* Form Elements */
#contact-us-page .hp-field { display: none !important; }
#contact-us-page .form-row { margin-bottom: 20px; }
#contact-us-page .field-label { display: block; font-weight: bold; margin-bottom: 8px; color: #333; }
#contact-us-page .required-star { color: red; }

#contact-us-page .input-flex { display: flex; gap: 10px; flex-wrap: wrap; }
#contact-us-page .form-input { 
    flex: 1; min-width: 200px; padding: 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; 
}

#contact-us-page .input-grid-row { display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 20px; }
#contact-us-page .grid-col { flex: 1; min-width: 200px; }
#contact-us-page .full-width { width: 100%; box-sizing: border-box; }

/* Checkbox Styling */
#contact-us-page .checkbox-box-highlight {
    margin-bottom: 20px; border: 1px solid #eee; padding: 15px; border-radius: 8px; background: #fdfdfd;
}

#contact-us-page .flex-wrap-row { display: flex; gap: 20px; flex-wrap: wrap; }
#contact-us-page .check-label-item { display: flex; align-items: center; cursor: pointer; font-size: 16px; position: relative; z-index: 11; }
#contact-us-page .check-large { width: 20px; height: 20px; margin-right: 10px; cursor: pointer; }

/* Grid Layouts */
#contact-us-page .product-grid,
#contact-us-page .region-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

#contact-us-page .region-section { margin-bottom: 25px; border-top: 1px solid #eee; padding-top: 20px; }
#contact-us-page .region-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }

#contact-us-page .check-label-small { display: flex; align-items: center; cursor: pointer; font-size: 14px; position: relative; z-index: 11; }
#contact-us-page .check-label-small input { margin-right: 10px; width: 18px; height: 18px; cursor: pointer; }

/* Textarea & Button */
#contact-us-page .form-textarea {
    width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid #ccc; border-radius: 6px; 
    font-family: inherit; resize: vertical; font-size: 16px; position: relative; z-index: 11;
}

#contact-us-page .contact-submit-btn {
    width: 100%; padding: 18px; background-color: #4a90e2; color: white; border: none; border-radius: 6px; 
    font-size: 20px; font-weight: bold; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.2); 
    position: relative; z-index: 12;
}

/* This hides the trap from humans but keeps it 'visible' to bots */
.hp-field {
    display: none !important;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: -9999px;
}

/* =========================================================
   AUDIT: COMPLIANCE PAGE (#compliance-page)
   ========================================================= */

#compliance-page {
    padding-top: 100px;
}

#compliance-page .hero-master-wrapper {
    background-color: #05152e;
    padding-bottom: 60px;
}

#compliance-page .hero-container {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 20px;
}

#compliance-page .hero-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

#compliance-page .hero-button-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 30px;
}

/* Contact Section Restoration */
#compliance-page .contact-form-section {
    background-color: #fafafa;
    padding: 60px 20px;
    width: 100%;
}

#compliance-page .form-inner-container {
    max-width: 800px;
    margin: 0 auto;
    font-family: sans-serif;
    color: #333;
}

#compliance-page .form-inner-container h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

/* Form Controls */
#compliance-page .hp-field-container {
    display: none !important;
    visibility: hidden !important;
}

#compliance-page .field-label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

#compliance-page .required-star {
    color: red;
}

#compliance-page .form-group {
    margin-bottom: 15px;
}

#compliance-page .name-flex, 
#compliance-page .contact-flex {
    display: flex;
    gap: 10px;
}

#compliance-page .contact-flex {
    gap: 20px;
    margin-bottom: 15px;
}

#compliance-page .flex-half {
    width: 50%;
}

#compliance-page input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box; /* Critical for keeping width at 50% */
}

#compliance-page .name-flex input {
    width: 50%;
}

#compliance-page .submit-btn {
    background-color: #4a90e2;
    color: white;
    padding: 10px 24px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}

/* Ensure the images have no gaps between them */
.product-section {
    line-height: 0;
    margin: 0;
    padding: 0;
}

.product-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Position the sash over the last image */
.sash-overlap {
    position: relative;
    margin-top: -180px; /* Adjust this value if the overlap is too much or too little */
    z-index: 5;
}

/* =========================================================
   REVISED PRODUCT LAYOUT: STAGGERED & SPACED
   ========================================================= */

/* 1. The Hero: Edge to Edge */
.hero-full-width {
    width: 100%;
    line-height: 0;
}
.hero-full-width img {
    width: 100%;
    height: auto;
}

/* 2. The Content: 10% Side Margins & 50px Gaps */
.product-content-container {
    padding: 50px 10% 0 10%; /* Top 50px, Left/Right 10% */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product-content-container img {
    width: 100%; /* Takes up the 80% available space */
    height: auto;
    margin-bottom: 50px; /* The 50px gap between images */
    border-radius: 4px; /* Optional: adds a slight professional finish */
}

/* 3. The Sash: Right Aligned */
.last-image-wrapper {
    position: relative;
    width: 100%;
    line-height: 0;
}

.sash-overlap-right {
    position: absolute;
    bottom: -20px; /* Hangs slightly off the bottom */
    right: 0;      /* Aligned to the right edge of the 10% margin */
    width: 60%;    /* Sash size relative to the image */
    z-index: 5;
    pointer-events: none;
}

.sash-overlap-right img {
    margin-bottom: 0; /* Prevents the 50px margin from affecting the sash */
}


/* =========================================================
   REVISED PRODUCT LAYOUT: FIXED PATHS & SASH OVERFLOW
   ========================================================= */

.hero-full-width {
    width: 100%;
    line-height: 0;
}
.hero-full-width img {
    width: 100%;
    height: auto;
}

.product-content-container {
    padding: 75px 10% 0 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product-content-container img {
    width: 100%;
    height: auto;
    margin-bottom: 75px;
}

/* FIXING THE SASH OVERFLOW */
.last-image-container {
    position: relative;
    width: 100%;
    /* Add padding to the bottom so the sash doesn't hit the PDF section */
    padding-bottom: 100px; 
    margin-bottom: 20px;
}

.sash-overlap-right {
    position: absolute;
    bottom: 0;      /* Moves it to the bottom of the container's padding */
    right: 0;       /* Aligned to the right edge per your 10% margin */
    width: 50%;     /* Adjusted size for a cleaner look */
    z-index: 5;
    pointer-events: none;
}

.sash-overlap-right img {
    margin-bottom: 0 !important; /* Overrides the 50px gap for the sash itself */
}

.footer-map-frame {
    width: 80%;
    margin: 50px auto;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-radius: 8px; /* Optional: adds a professional finish to match your site's style */
}

.footer-map-frame iframe {
    display: block;
    width: 100%;
    height: 450px; /* Force the height to match your iframe attribute */
    border: 0;
}

.footer-map-frame {
    width: 80%;
    margin: 50px auto;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    border-radius: 8px; /* Clinical finish */
}

.footer-map-frame iframe {
    display: block;
    width: 100%;
    height: 450px; /* This forces the map to be visible */
    border: 0;
}

/* Mobile Fix: Ensure the map fills the screen on phones */
@media (max-width: 768px) {
    .footer-map-frame {
        width: 100%;
        margin: 30px 0;
        border-radius: 0;
    }
}

.footer-map-frame {
    width: 80%; /* Creates the 10% margin on each side */
    margin: 50px auto;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background: #f4f4f4; /* Shows a grey box if the map takes a second to load */
}

.footer-map-frame iframe {
    display: block;
    width: 100% !important;
    height: 450px !important; /* !important prevents any outside JS/CSS from shrinking it */
    border: 0;
}

/* Mobile Fix */
@media (max-width: 768px) {
    .footer-map-frame {
        width: 100%;
        margin: 30px 0;
        border-radius: 0;
    }
}

/* The Map Container */
.footer-map-frame {
    width: 80%;
    margin: 50px auto;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background-color: #eee; /* Placeholder color while map loads */
}

/* The Map itself */
.footer-map-frame iframe {
    display: block !important;
    width: 100% !important;
    height: 450px !important; /* Forces the height so it cannot collapse */
    border: 0;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .footer-map-frame {
        width: 100%;
        margin: 20px 0;
        border-radius: 0;
    }
    .footer-map-frame iframe {
        height: 300px !important;
    }
}

/* =========================================================
   FINAL FOOTER MAP: CLINICAL FIX
   ========================================================= */
.footer-map-frame {
    width: 80%;
    margin: 50px auto;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background-color: #eee; /* Shows grey box while loading */
}

.footer-map-frame iframe {
    display: block !important;
    width: 100% !important;
    height: 450px !important; /* The critical "Firing" fix */
    border: 0;
}

@media (max-width: 768px) {
    .footer-map-frame {
        width: 100%;
        margin: 20px 0;
        border-radius: 0;
    }
    .footer-map-frame iframe {
        height: 300px !important;
    }
}

/* =========================================================
   RESPONSIVENESS: TABLET & MOBILE
   ========================================================= */

/* Tablets (iPad, etc.) */
@media (max-width: 1024px) {
    .product-content-container {
        padding: 50px 5% 0 5%; /* Reduces margins to 5% to give content more room */
    }
    .footer-map-frame {
        width: 90%; /* Widens the map for better visibility */
    }
}

/* Mobile Phones (Standard) */
@media (max-width: 768px) {
    /* 1. Reset Margins */
    .product-content-container {
        padding: 30px 15px 0 15px; /* Switch to standard padding instead of percentages */
    }

    .product-content-container img {
        margin-bottom: 40px; /* Reduces the 75px gap to 40px for shorter scrolls */
    }

    /* 2. Fix the Sash */
    .sash-overlap-right {
        width: 70%; /* Scale the sash up slightly so it remains visible */
        bottom: -10px;
    }

    /* 3. Footer Adjustments */
    .footer-grid-top {
        display: flex;
        flex-direction: column; /* Stacks contact info vertically */
        align-items: center;
        text-align: center;
        gap: 20px;
    }

    .footer-map-frame {
        width: 100%; /* Map goes edge-to-edge on phones */
        margin: 20px 0;
        border-radius: 0; /* Remove rounded corners for full-width look */
    }

    .footer-map-frame iframe {
        height: 350px !important; /* Slightly shorter map for mobile screens */
    }
}

/* Very Small Phones */
@media (max-width: 480px) {
    .sash-overlap-right {
        display: none; /* Hide sash on very small screens to avoid clutter */
    }
    
    h3 {
        font-size: 1.2rem; /* Ensure headers don't wrap awkwardly */
    }
}

/* Mobile Optimization for Main Layout */
@media (max-width: 768px) {
    /* Reduce side margins so content has room to breathe */
    .product-content-container {
        padding: 30px 5% !important; 
    }

    /* Tighten the vertical gaps between product sections */
    .product-content-container img {
        margin-bottom: 35px !important; 
    }

    /* Prevent the Sash from covering text */
    .sash-overlap-right {
        width: 80% !important;
        height: auto !important;
        bottom: -5px !important;
        font-size: 0.9rem !important;
    }
}

@media (max-width: 900px) {
    .nav-links {
        display: none; /* Hidden by default */
        /* ... your mobile styles ... */
    }

    .nav-links.active {
        display: flex !important; /* Shown when JS clicks the button */
    }
}

@media (max-width: 900px) {
    /* The Base State */
    .nav-links {
        display: none !important; /* Hide it initially */
        position: absolute;
        top: 60px; /* Adjust to your navbar height */
        left: 0;
        width: 100%;
        background-color: #ffffff;
        flex-direction: column;
        z-index: 9999; /* Put it above the sashes and map */
        padding: 20px 0;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

    /* The Active State (The Link) */
    .nav-links.active, 
    .navbar.nav-open .nav-links {
        display: flex !important; /* Force it to show when active */
    }

    /* Ensure the toggle is visible */
    .nav-toggle {
        display: block !important;
        z-index: 10000;
    }
}

/* =========================================
   7) MOBILE NAVIGATION LOGIC
   ========================================= */
@media (max-width: 900px) {
    /* 1. Show the Hamburger Button */
    .nav-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 45px;
        height: 45px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 10001;
        position: relative;
    }

    /* Create the 3 lines of the hamburger */
    .nav-toggle span,
    .nav-toggle::before,
    .nav-toggle::after {
        content: "";
        display: block;
        width: 30px;
        height: 3px;
        background: var(--navy);
        margin: 3px 0;
        transition: var(--transition);
    }

    /* 2. Hide Nav Links by default and position them */
    .nav-links {
        display: none !important; /* Force hide until active */
        position: absolute;
        top: 15vh; /* Starts exactly at the bottom of the navbar */
        left: 0;
        width: 100%;
        background: var(--white);
        flex-direction: column !important;
        padding: 20px 0;
        border-bottom: 3px solid var(--navy);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        z-index: 10000;
        margin: 0;
    }

    /* 3. THE LINK: When JS adds 'active' or 'nav-open', show it */
    .nav-links.active,
    .navbar.nav-open .nav-links {
        display: flex !important;
    }

    .nav-links li {
        width: 100%;
        text-align: center;
        margin: 10px 0;
    }

    .nav-links a {
        display: inline-block;
        width: 80%;
    }

    /* 4. Handle Submenus on Mobile */
    .submenu {
        position: static; /* Stack instead of float */
        display: none;
        width: 100%;
        background: #f9f9f9;
        box-shadow: none;
    }

    .dropdown.open .submenu {
        display: block;
    }

    /* Hide the spacer on mobile to save room */
    .nav-spacer {
        display: none;
    }
}

/* Ensure toggle is hidden on desktop */
@media (min-width: 901px) {
    .nav-toggle {
        display: none !important;
    }
}

/* =========================================================
   MOBILE NAVIGATION (MAX-WIDTH: 900px)
   ========================================================= */
@media (max-width: 900px) {
    /* Navbar height adjustment */
    .navbar {
        height: 80px !important;
        justify-content: space-between;
    }

    /* Force the Hamburger to show */
    .nav-toggle {
        display: flex !important;
        flex-direction: column;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
        z-index: 1001;
    }

    .nav-toggle span {
        display: block;
        width: 25px;
        height: 3px;
        background: var(--navy);
        transition: 0.3s;
    }

    /* The Hidden Menu */
    .nav-links {
        display: none !important; 
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background: #fff;
        flex-direction: column !important;
        padding: 20px 0;
        border-bottom: 3px solid var(--navy);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        margin: 0;
    }

    /* Show when Active */
    .nav-links.active {
        display: flex !important;
    }

    .nav-links li {
        width: 100%;
        text-align: left;
        padding: 0 10%;
    }

    .nav-links li a {
        display: block;
        width: 100%;
        padding: 15px 0;
        border-bottom: 1px solid #eee;
        border-radius: 0 !important;
    }

    /* Submenu stacking */
    .submenu {
        position: static !important;
        display: none !important;
        width: 100%;
        background: #fdfdfd;
        padding-left: 20px;
        box-shadow: none !important;
    }

    .dropdown.open .submenu {
        display: block !important;
    }

    .nav-spacer { display: none; }
}

@media (max-width: 900px) {
    /* Navbar Height & Layout */
    .navbar { height: 80px !important; display: flex !important; justify-content: space-between !important; padding: 0 5% !important; }
    
    /* Hamburger Visuals */
    .nav-toggle { display: flex !important; flex-direction: column; gap: 4px; border: none; background: none; width: 40px; z-index: 10001; }
    .nav-toggle span, .nav-toggle::before, .nav-toggle::after { content: ""; display: block; width: 25px; height: 3px; background: var(--navy); transition: 0.3s; }

    /* The Dropdown Menu Wrapper */
    .nav-links { 
        display: none !important; 
        position: absolute !important; 
        top: 80px !important; 
        left: 0 !important; 
        width: 100% !important; 
        background: #fff !important; 
        flex-direction: column !important; 
        padding: 20px 0 !important; 
        border-bottom: 3px solid var(--navy);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        z-index: 10000;
        margin: 0 !important;
    }

    /* Show menu when active */
    .nav-links.active { display: flex !important; }

    /* List Item Cleanup */
    .nav-links li { width: 100%; text-align: left; padding: 0 10%; }
    .nav-links li a { display: block; width: 100%; padding: 12px 0; border-bottom: 1px solid #eee; border-radius: 0 !important; border: none !important; background: none !important; }

    /* Submenu Stacking */
    .submenu { position: static !important; display: none !important; width: 100% !important; background: #f9f9f9 !important; padding-left: 20px !important; box-shadow: none !important; border: none !important; }
    .dropdown.open .submenu { display: block !important; }

    /* Remove Desktop Spacers */
    .nav-spacer { display: none !important; }
}


/* 1. Desktop / Laptop Styles (General) */
.navbar {
    height: 100px;
    /* your desktop styles here */
}

/* 2. Mobile Specific Styles */
@media (max-width: 900px) { 

    .navbar { 
        height: 80px !important; 
    }

    .nav-links { 
        display: none !important; /* Hidden by default on mobile until .active */
        position: absolute !important; 
        top: 80px !important; 
        left: 0 !important; 
        width: 100% !important; 
        background: #fff !important; 
        flex-direction: column !important; 
        max-height: calc(100vh - 80px); 
        overflow-y: auto; 
        -webkit-overflow-scrolling: touch;
        z-index: 10000;
    }

    .nav-links.active {
        display: flex !important; /* Shows menu when hamburger is clicked */
    }

} /* <--- MAKE SURE THIS BRACKET IS HERE */

/* 3. Anything below this bracket applies to LAPTOPS again */








@media (max-width: 900px) {
    /* Prevent any element from being wider than the screen */
    html, body {
        overflow-x: hidden;
        width: 100vw;
        position: relative;
    }

    /* Force Grid/Table to stack */
    .vault-grid, .library-container, .card-container, .provider-grid {
        display: block !important;
        width: 100% !important;
        padding: 15px !important;
    }

    /* Fix the lag - Fixed backgrounds kill mobile performance */
    .medical-main-section, .hero-master-wrapper {
        background-attachment: scroll !important;
    }
}

.hero-image-wrapper {
    background-color: #ffffff; /* Ensures the area behind the image is pure white */
    padding: 0;               /* Removes any internal spacing */
}

.hero-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: none;         /* Removes the black shadow 'wrapper' */
    border: none;             /* Removes the 1px ghost border */
}

.hero-master-wrapper {
    background-color: #ffffff !important;
}

/* 2. Force the inner container to be white and remove extra spacing */
.hero-container {
    background-color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. The Image: Remove the 50px black 'fog' shadow */
.hero-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: none !important; /* This removes the heavy black spread */
    border: none !important;     /* This removes the ghost line */
}

/* 4. The Button Row: Match the white background */
.hero-button-row {
    background-color: #ffffff !important;
    padding: 20px 0;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.hero-master-wrapper {
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* 2. The Main Container - Removes the 15px/50px shadow 'fog' */
.hero-container {
    background: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
}

/* 3. The Image Wrapper - This often hides 'dead space' that looks black */
.hero-image-wrapper {
    background: #ffffff !important;
    line-height: 0; /* Kills the tiny 3px gap at the bottom of images */
    margin: 0 !important;
}

/* 4. The Image itself - Clean and flat */
.hero-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/* 5. The Button Row - Ensures the area behind buttons is white */
.hero-button-row {
    background: #ffffff !important;
    margin-top: 0 !important; /* Pulls it flush to the image */
    padding: 20px 10px !important;
}

.hero-image-wrapper {
    background-color: #ffffff !important;
    display: flex;          /* Modern centering tool */
    justify-content: center; /* Centers horizontally */
    align-items: center;    /* Centers vertically */
    padding: 20px 0;        /* Adds white space above/below the image */
    width: 100% !important;
}

/* 2. The Image: Controlled size and centered */
.hero-image-wrapper img {
    width: 85% !important;  /* Adjust this percentage to make it smaller or larger */
    max-width: 600px;       /* Prevents it from getting too big on tablets */
    height: auto;
    display: block;
    margin: 0 auto;         /* Architectural fallback for centering */
    box-shadow: none !important; 
    border: none !important;
}

.hero-image-wrapper {
    background-color: #ffffff !important;
    display: flex !important;
    flex-direction: column !important; /* This forces buttons UNDER the image */
    align-items: center !important;    /* This centers both the image and buttons */
    justify-content: center !important;
    padding: 20px 0 !important;
    width: 100% !important;
}

/* 2. The Image: Controlled width */
.hero-image-wrapper img {
    width: 85% !important;  /* Adjust this to your preferred size */
    max-width: 500px; 
    height: auto;
    display: block;
    margin-bottom: 20px !important; /* Adds space between image and buttons */
    box-shadow: none !important;
    border: none !important;
}

/* 3. The Button Row: Ensure it takes full width to center itself */
.hero-button-row {
    display: flex !important;
    flex-wrap: wrap;        /* Allows buttons to wrap on very small screens */
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: transparent !important; /* Background is already white from the wrapper */
}

.hero-image-wrapper img {
    width: 80% !important;  /* Keep the size you like */
    height: auto;
    display: block;
    
    /* THE FIX: Nudging the image */
    margin-top: 30px !important;    /* Adjust this to move it further down */
    margin-left: 35% !important;   /* This pushes the image to the right */
    
    /* Remove the old centering fallbacks */
    box-shadow: none !important;
    border: none !important;
}

/* Ensure the wrapper doesn't force it back to center */
.hero-image-wrapper {
    display: block !important;     /* Change from 'flex' to 'block' to allow manual margins */
    background-color: #ffffff !important;
    width: 100% !important;
    padding: 0 !important;
}

.hero-button-row {
    background-color: #ffffff !important;
    padding: 20px 0;
    width: 100% !important;

    /* THE FIX: Indent the entire button group */
    display: flex !important;
    justify-content: flex-start !important; /* Forces buttons LEFT, not center */
    margin-left: 25% !important;           /* This pushes the row to the right */
    gap: 10px;                             /* Space between buttons */
}

.hero-image-wrapper img {
    width: 80% !important;
    margin-top: 30px !important;
    margin-left: 35% !important; /* The nudge */
    display: block;
}

.hero-button-row {
    display: flex !important;
    margin-left: 20% !important; /* The nudge */
    gap: 10px;
}

/* 2. MOBILE OVERRIDE: Centering for phone screens */
@media (max-width: 767px) {
    .hero-image-wrapper img {
        width: 90% !important;   /* Slightly larger on small screens */
        margin-left: auto !important;
        margin-right: auto !important; /* Perfect mathematical centering */
    }

    .hero-button-row {
        margin-left: 0 !important;   /* Kill the 15% nudge */
        justify-content: center !important; /* Center the buttons */
        width: 100% !important;
        padding: 20px 10px !important;
        flex-wrap: wrap;             /* Stack buttons if they don't fit */
    }
}


/*added 2026/03/31*/
.footer-bottom-bar {
    background-color: var(--vault-dark);
    padding: 20px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.1);
    flex-wrap: wrap;
    gap: 15px;
}

.footer-legal-link {
    color: var(--white);
    text-decoration: none;
    font-size: 0.85rem;
    opacity: 0.8;
}

.footer-legal-link:hover {
    opacity: 1;
    color: var(--red);
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-icon {
    width: 35px;
    height: 35px;
    background: var(--navy);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: var(--transition);
}

.social-icon:hover {
    background: var(--red);
    transform: translateY(-3px);
}

/* --- TRAVEL & BANK QUOTE UI --- */
.inline-quote-trigger {
    background: var(--light-grey);
    padding: 30px;
    border-radius: 12px;
    border-left: 5px solid var(--red);
    margin: 40px 0;
    text-align: center;
}

.btn-quote-now {
    display: inline-block;
    background: var(--red);
    color: white;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 15px;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-icon {
    width: 24px;
    height: 24px;
    color: var(--white); /* Default color */
    transition: var(--transition);
}

.social-icon svg {
    width: 100%;
    height: 100%;
}

/* Brand Hover Colors */
.social-icon.fb:hover { color: #1877F2; }
.social-icon.x-corp:hover { color: #000000; } /* Or keep white on hover if background is dark */
.social-icon.li:hover { color: #0A66C2; }

@media (max-width: 767px) {
    .footer-bottom-bar {
        flex-direction: column;
        text-align: center;
    }
}



/* --- FOOTER BOTTOM BAR --- */
.footer-bottom-bar {
    background-color: var(--vault-dark);
    padding: 40px 5%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Aligns both sections to the bottom */
    border-top: 1px solid rgba(255,255,255,0.1);
    flex-wrap: wrap;
    gap: 30px;
}

/* Legal Section */
.compliance-btn {
    display: inline-block;
    background-color: var(--navy); /* Dark Navy */
    color: var(--white);
    padding: 12px 25px;
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
    font-size: 0.95rem;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.copyright-text {
    color: rgba(255,255,255,0.6);
    font-size: 0.8rem;
    margin: 0;
}

/* Social Section */
.footer-social-section {
    text-align: right;
}

.follow-text {
    color: var(--white);
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.social-links {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.social-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #ffffff; /* Icon color */
}

.social-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Official Colors (No Hover) */
.social-icon.fb, .social-icon.li {
    background-color: #0866FF;
}

.social-icon.x-corp {
    background-color: #000000;
}

/* MOBILE FIRST ADJUSTMENTS */
@media (max-width: 767px) {
    .footer-bottom-bar {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .footer-social-section, .social-links {
        text-align: center;
        justify-content: center;
        width: 100%;
    }
    
    .footer-legal-section {
        order: 2; /* Puts copyright below socials on mobile */
    }
}







.footer-bottom-bar {
    background-color: var(--vault-dark);
    padding: 50px 5%; /* Expanded padding */
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-top: 1px solid rgba(255,255,255,0.1);
    flex-wrap: wrap;
    gap: 40px;
}

/* Compliance Button - Dark Navy, High Readability */
.compliance-btn {
    display: inline-block;
    background-color: var(--navy);
    color: var(--white) !important;
    padding: 14px 28px;
    text-decoration: none;
    font-weight: 700;
    border-radius: 6px;
    font-size: 1rem;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid rgba(255,255,255,0.2);
}

.copyright-text {
    color: rgba(255,255,255,0.5);
    font-size: 0.85rem;
    margin: 0;
}

/* Social Section */
.footer-social-section {
    text-align: right;
}

.follow-text {
    color: var(--white);
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 12px;
    display: block;
}

.social-links {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.social-box {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px; /* Rounded corners as per image */
    color: #ffffff;
    cursor: default; /* Indicates no link/click action */
}

.social-box svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/* Brand Colors (Strictly No Hover) */
.social-box.fb, .social-box.li {
    background-color: #0866FF;
}

.social-box.x-corp {
    background-color: #000000;
}

/* MOBILE FIRST STACK */
@media (max-width: 767px) {
    .footer-bottom-bar {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 40px 20px;
    }
    
    .footer-social-section, .social-links {
        text-align: center;
        justify-content: center;
    }
    
    .footer-legal-section {
        order: 2;
    }
}








/* --- COOKIE NOTIFICATION --- */
.cookie-notice {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--vault-dark); /* Using your root dark color */
    color: var(--white);
    padding: 20px 5%;
    z-index: 9999;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.3);
    border-top: 3px solid var(--red);
}

.cookie-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 20px;
}

.cookie-content p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

.cookie-content a {
    color: var(--white);
    text-decoration: underline;
    font-weight: bold;
}

.cookie-btn-accept {
    background-color: var(--red);
    color: white;
    border: none;
    padding: 10px 25px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}

.cookie-btn-accept:hover {
    background-color: var(--navy);
}

/* MOBILE VIEW */
@media (max-width: 767px) {
    .cookie-content {
        flex-direction: column;
        text-align: center;
    }
    
    .cookie-btn-accept {
        width: 100%;
    }
}







.compliance-container {
        max-width: 1100px;
        margin: 60px auto 80px; /* Adjusted for hardcoded layout */
        padding: 20px;
        font-family: Arial, sans-serif;
    }

    .section-header h1 {
        color: var(--white); /* Using your root variable */
        font-size: 2.2rem;
        margin-bottom: 10px;
    }
    
    .section-header p {
      color: var(--white);
    }

    .doc-grid {
        display: grid;
        grid-template-columns: 1fr; /* Mobile First: 1 column */
        gap: 15px;
        margin-top: 30px;
    }

    .compliance-card {
        display: flex;
        align-items: center;
        background: #ffffff;
        padding: 15px;
        border-radius: 8px;
        text-decoration: none;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        transition: transform 0.2s;
        border: 1px solid #eee;
    }

    .compliance-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        border-color: var(--red);
    }

    .icon-box img {
        width: 40px;
        margin-right: 20px;
    }

    .text-box h3 {
        margin: 0;
        font-size: 1.1rem;
        color: #333;
    }

    .text-box span {
        font-size: 0.85rem;
        color: var(--navy);
        font-weight: bold;
    }

    /* Responsive Grid */
    @media (min-width: 768px) {
        .doc-grid {
            grid-template-columns: 1fr 1fr; /* 2 columns for tablet/desktop */
        }
    }
    
    
    
    /* Ensure the wrapper displays the pointer cursor */
.social-link-wrapper {
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
}

/* Base state for the boxes */
.social-box {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, fill 0.3s ease;
    /* Maintain your existing padding/width/height here */
}

/* The Swap Effect: Using the :hover state on the wrapper */
.social-link-wrapper:hover .social-box {
    background-color: #ffffff; /* Swapping to white (or your font color variable) */
}

.social-link-wrapper:hover .social-box svg {
    fill: #000000; /* Swapping SVG fill to background color (or your primary color variable) */
}

/* Base state for Social Boxes */
.social-box {
    background-color: #0866ff; /* Your specific FB/LI background */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-box svg {
    fill: #ffffff; /* Text/Icon color white */
    transition: fill 0.3s ease;
}

/* Color Swap on Entry (Hover) */
.social-link-wrapper:hover .social-box {
    background-color: #ffffff; /* Background becomes white */
}

.social-link-wrapper:hover .social-box svg {
    fill: #0866ff; /* Icon becomes background color */
}

/* Base state for POPIA Button */
.compliance-btn {
    background-color: #1e2f62; /* Your specific POPIA background */
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: inline-block;
}

/* Color Swap on Entry (Hover) */
.compliance-btn:hover {
    background-color: darkblue; /* Background becomes white */
    
}

/* Frequent asked questions accordion */
.accordion-item-faq {
    background-color: var(--pmpro--color--base);
    border: 2px solid var(--pmpro--color--border--variation);
    border-radius: 6px;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.accordion-item-faq:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.accordion-item-faq.active {
    border-color: var(--pmpro--color--accent);
    box-shadow: 0 4px 15px rgba(12, 61, 84, 0.15);
}

.accordion-header-faq {
    width: 100%;
    padding: 18px 20px;
    background: var(--pmpro--color--base);
    color: var(--pmpro--color--accent);
    border: none;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-content-faq {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    padding: 0 40px;
    line-height: 1.8;
    background: #fdfdfd;
}


.faq-disclaimer-faq {
    margin-top: 50px;
    font-size: 0.8em;
    color: #666;
    border-top: 1px solid #ccc;
    padding-top: 20px;
}

.disclaimer-faq {
    margin-top: 40px;
    padding: 20px;
    background: var(--light-grey);
    text-align: center;
    font-size: 15px;
}


.faq-container-faq {
    background-color: var(--pmpro--color--base);
    color: var(--pmpro--color--contrast);
    padding: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.faq-main-title-faq {
    color: #e30045;
    font-family: Arial, sans-serif;
    margin-bottom: 30px;
}

/* Mobile */
@media (max-width: 600px) {
    .accordion-content-faq {
        padding: 20px 20px;
        line-height: 1.6;
    }
}


.accordion-header-faq:hover {
    background: var(--pmpro--color--border--variation);
}

.icon-faq {
    font-size: 1.4rem;
    color: var(--pmpro--color--accent--variation);
}

.accordion-content-inner-faq {
    padding: 20px 0;
    border-top: 1px solid var(--pmpro--color--border--variation);
}

/* Icon animation */
.accordion-header-faq .icon-faq {
    transition: transform 0.3s ease;
}

/* Rotate icon when active */
.accordion-item-faq.active .icon-faq {
    transform: rotate(45deg);
}

/* Header */
.accordion-header-faq {
    outline: none;
    transition: background 0.3s ease;
}

/* Active header */
.accordion-item-faq.active .accordion-header-faq {
    background: var(--pmpro--color--border--variation);
}

/* Content wrapper (controlled by JS) */
.accordion-content-faq {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    letter-spacing: 0.01rem;
    font-family: Arial, sans-serif;
    color: var(--pmpro--color--contrast);
    border-top: 1px solid var(--pmpro--color--border--variation);
    background: #fdfdfd;
}

/* Inner content */
.accordion-content-inner-faq {
    padding: 20px;
    line-height: 1.6;
}

.accordion-content-faq {
    font-family: Arial, sans-serif;
}

.accordion-header-faq {
    transition: background 0.3s ease;
}

.accordion-header-faq .icon-faq {
    transition: transform 0.3s ease;
}

.accordion-item-faq.active .icon-faq {
    transform: rotate(45deg);
}

#faq-page {
  
    background: #ffffff;
    padding-top: 20px;
}

.faq-hero-full-width {
    height: 500px;        /* adjust this value */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-hero-full-width img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#faq-page p {
  margin-top: 16px;
}

.end {
  text-align: right;
}

accordion-item-faq {
    scroll-margin-top: 250px; /* match your nav height */
}