/* ==========================================================================
           1. BASE STYLES & VARIABLES (From style.css)
           ========================================================================== */
        @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
        
        :root {
            --brand-teal: #124556;
            --brand-teal-hover: #006073;
      
            --brand-pink: #b41d7b;
            --brand-pink-dark: #85006c; 
            --brand-text-dark: #4f5052;
            --brand-gray: #4f5052;
            --brand-bg-light: #f8f9fa;
            --brand-light-green: #c0d630; 
             --brand-light-blue: #dceff9; 
            --brand-cyan: #7cd5e2; 
            --border-light: #e2e8f0;
            --text-grey: #4f5052;
            --brand-teal-logo: #004b54;
            --brand-border:#c8c9c9;
            --gradient-light-green : linear-gradient(180deg, #d3f345 0%, #b8d91c 100%);
            --light-grey:#fbfbfb;
            --color-blue-700: #003242;
            --color-blue-500: #003e53;
            --color-blue-500-rgb: 0, 62, 83;
                --color-blue-900-rgb: 1, 37, 48;
                --color-purple-200: #edd9e9;
            --menu-bg: var(--color-blue-700) linear-gradient(180deg, var(--color-blue-500) 0%, var(--color-blue-700) 100%);
            --inset-shadow-1: inset 0px 0px var(3.375rem) 0px #ebf0f1;
            
        }


        body {
            font-family: "Roboto", sans-serif;
            color: var(--brand-text-dark);
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            background-color: #ffffff;
        }
        .container {
            max-width: 1280px;
        }
        a {
            text-decoration: none;
            color: var(--brand-teal)
        }
        .pink-link{color: var(--brand-pink-dark);}

        .color-teal{color: var(--brand-teal) !important;}
        .color-megenta{color: var(--brand-pink-dark) !important;}
        .fs-18-para{font-size: 18px;line-height: 22px;}
        

        /* ==========================================================================
           2. HEADER & NAVIGATION
           ========================================================================== */
        header { position: relative; z-index: 1000; }
        .top-header { padding: 15px 0; background-color: white; position: relative; z-index: 1010; }
        .mock-logo { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
        .top-utils { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
        .social-row { display: flex; align-items: center; gap: 15px; font-size: 12px; color: var(--brand-text-dark); }
        .social-icon { display: inline-flex; justify-content: center; align-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #ccc; color: #666; transition: all 0.2s; }
        .social-icon:hover { color: #fff; background-color: var(--brand-teal); }
        .us-flag-text { display: flex; align-items: center; gap: 5px; }
        .link-row { display: flex; gap: 20px; }
        .top-link { font-size: 12px; color: var(--brand-pink-dark); text-transform: capitalize; text-decoration: underline; }
        .top-link:hover { text-decoration: underline; }
        .mobile-toggle { background-color: var(--brand-teal); color: white; border: none; width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; transition: background-color 0.3s; }
        .mobile-toggle.active { background-color: var(--brand-teal); }
        
        .main-nav { background-color: var(--color-blue-500); position: relative; z-index: 100; border-radius: 100px; margin: 0 15px; }
        .nav-list { display: flex; margin: 0; padding: 0; list-style: none; width: 100%; }
        .nav-item { flex: 1; text-align: center; position: relative; border-right: 1px solid rgb(255, 255, 255); border-radius: 35px 0 0 35px; transition: all 0.2s; }
        .nav-item:last-child { border-right: none; }
        .nav-link-main { display: block; padding: 12px 20px; color: white; font-weight: 600; font-size: 16px; transition: all 0.2s; cursor: pointer; border-radius: 35px; }
        .nav-link-main a{color: white;}
        .nav-item:hover { background: linear-gradient(180deg, #002e3a 0%, #00171d 100%); border-radius: 35px 35px 0 0; }
        .nav-item.active .nav-link-main a{ color: var(--brand-light-green) !important; }
        .nav-item:hover .nav-link-main a, .nav-link-main:focus { color: #d1f055; text-decoration: underline; text-underline-offset: 4px; background: transparent; }
        .nav-list .nav-item:nth-child(2), .nav-list .nav-item:nth-child(3) {border-radius: 0 !important;}
        .nav-list .nav-item:nth-child(1){border-top-right-radius: 0;}
                .nav-list .nav-item:nth-child(4){border-top-left-radius: 0;}
        .custom-dropdown { position: absolute; top: 100%; left: 0; width: 100%; 
            background:#012530 linear-gradient(180deg, rgba(var(--color-blue-500-rgb), .5) 10%, rgba(var(--color-blue-900-rgb), .5) 92.5%) 0 0 / 100% 2.875rem no-repeat;
            list-style: none; padding: 0; margin: 0; visibility: hidden; opacity: 0; transform: translateY(-10px); transition: all 0.3s ease; box-shadow: 0 10px 20px rgba(0,0,0,0.3); border-radius: 0 0 25px 25px; overflow: hidden; }
        .nav-item:hover .custom-dropdown { visibility: visible; opacity: 1; transform: translateY(0); }
        .dropdown-item-custom { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; color: white; font-size: 13px; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.05) !important; transition: background-color 0.2s; text-align: left; }
        .dropdown-item-custom:last-child { border-bottom: none; }
        .dropdown-item-custom:hover {color: var(--brand-light-green);text-decoration: underline; }
        .dropdown-item-custom i { font-size: 10px; text-decoration: none; background-color: #002833; border:1px solid #002833; color: #7cd5e2; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
     .dropdown-item-custom:hover i{border-color: var(--brand-light-green);color: var(--brand-light-green);}
       /* ========================================================
   MOBILE NAV STYLES (Strictly isolated to avoid desktop)
   ======================================================== */



.dark-block{
    background-color: #0129364d;
    border-radius: 25px;
    border: 1px solid #ffffff1a;
    padding: 30px 0;
}
.dark-block  .mobile-yellow-links{
   border-bottom: 1px solid #ffffff1a;  
       padding-bottom: 30px;}

        /* ==========================================================================
           3. HERO SECTION
           ========================================================================== */
        .hero-section { position: relative; min-height: 500px; margin-top: -25px; z-index: 10; background-color: #000;; background-image: url('../images/hero-landscape.rFKeMx98_1L5M7C.webp'); background-size: cover; background-position: center center; display: flex; align-items: center; padding-top: 60px; padding-bottom: 80px; }
        .hero-overlay { position: absolute; top: 0; left: 0; width: 60%; height: 100%; background: linear-gradient(to right, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 70%, transparent 100%); z-index: 1; }
        .hero-content { position: relative; z-index: 2; color: white; max-width: 530px; padding-left: 15px; padding-top: 65px; }
        .hero-inner h1{font-size: 60px;}
        .hero-title { font-size: 60px; font-weight: 700; line-height: 1.05; margin-bottom: 20px; text-shadow: 1px 1px 3px rgba(0,0,0,0.3); }
        .hero-subtitle { font-size: 18px; font-weight: 600; line-height: 1.4; margin-bottom: 30px; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); }
        .hero-footnote { font-size: 12px; line-height: 0.8; margin-top: 60px; }
        .actor-portrayal { position: absolute; bottom: 30px; right: 50px; color: rgba(255,255,255,0.7); font-size: 12px; z-index: 2; }
         .hero-idrfmc{background-image: url(../images/hero-landscape.p1HLTcZW_Z1NkFhH.webp);}
         .hero-adrfmc{background-image: url(../images/hero-landscape.B3Ob9UCE_EXKxI.webp);}
         .hero-wtk{background-image: url(../images/hero-landscape.AyO7XOOs_Z1gaudm.webp);} 
         .hero-adrfmc .hero-content {max-width: 100%;}
        /* ==========================================================================
           4. CURVED CORNER CARDS (Grid Section)
           ========================================================================== */
        .cards-grid-section { position: relative; z-index: 99; margin-top: -92px; }
        
        .cc-styled-card {
            position: relative;
            border-radius: 32px;
            background: var(--card-bg, #ffffff); 
            --card-border-color: #c8c9c9;
            border: 1px solid #c8c9c9;
       
            padding: 1.8rem;
            padding-bottom: max(2.5rem, calc(var(--ch) + 1.5rem)); 
            overflow: visible; 
            display: flex;
            flex-direction: column;
            height: 100%;
            z-index: 1; 
        }
        .cc-styled-card_top{
            padding-bottom: 0;
        }
        .cc-styled-card.no-border { --card-border-color: transparent; border: none; box-shadow: none; }

        .cc-cutout {
            position: absolute; bottom: -1px; right: -1px;
            width: var(--cw); height: 78px;
            background-color: #ffffff; 
            border-top-left-radius: 50px;
            border-top: 1px solid var(--card-border-color);
            border-left: 1px solid var(--card-border-color);
            display: flex; align-items: center; justify-content: center; z-index: 10;
            padding-left: 18px;
                padding-top: 14px;
        }

        .cc-cutout.disc {width: auto;}



        .cc-cutout::before, .cc-cutout::after {
            content: ""; position: absolute; width: var(--cr); height: var(--cr);
            background: radial-gradient(circle at top left, transparent calc(var(--cr) - 1px), var(--card-border-color) calc(var(--cr) - 1px), var(--card-border-color) var(--cr), #ffffff var(--cr));
            pointer-events: none; z-index: 10;
        }

        .cc-styled-card.no-border .cc-cutout::before, .cc-styled-card.no-border .cc-cutout::after {
            background: radial-gradient(circle at top left, transparent calc(var(--cr) - 0.5px), #ffffff calc(var(--cr) + 0.5px));
        }

        .cc-cutout::before { bottom: 100%; right: 0; }
        .cc-cutout::after { bottom: 0; right: 100%; }

        /* Specific Card Modifiers */
        .card-intro { --cw: 210px; --ch: 100px; --cr: 32px; --card-bg: white; }
        .card-resources { --cw: 190px; --ch: 90px; --cr: 32px; --card-bg: linear-gradient(180deg, #5e024d  0%, #1f0119 100%); }
        .card-community-pink { --cw: 100px; --ch: 100px; --cr: 32px; --card-bg: #f3ebf2; }
        .card-community-green { --cw: 100px; --ch: 100px; --cr: 32px; --card-bg: #f5f5f5; }
        .card-community-blue { --cw: 100px; --ch: 100px; --cr: 32px; --card-bg: #ffffff; overflow: hidden;border: 1px solid #c8c9c9 !important; }
        .card-community-pink
        /* Typography & Utilities for Cards */
        .cc-text-dark { color: #0b4d54; }
        .cc-text-gray { color: #4f5052; }
        .text-max-95 { max-width: 95%; }
        .cc-link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
        .cc-link:hover { color: #063338; }
        .cc-link-pink { color: #84185d; }
        .z-index-1 { z-index: 1; }
        .z-index-2 { z-index: 2; }
        .z-index-10 { z-index: 10; }

        .bg-cc-gradient {
            background-image: 
                radial-gradient(circle at 80% 0%, rgba(245, 230, 235, 0.6), transparent 40%),
                radial-gradient(circle at 40% 0%, rgba(230, 245, 240, 0.5), transparent 40%),
                linear-gradient(to bottom, #ffffff, #ffffff);
        }

        /* Intro Card specific */
        .intro-bg-img { position: absolute; width: 50%; object-fit: contain; right: 0; top: 0; pointer-events: none; border-top-right-radius: 32px; }

        /* Resources Card specific matching the design exactly */
        .badge-resources { max-width: 110px; background-color: rgba(255, 255, 255, 0.25); border-radius: 20px; padding: 6px 14px; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 30px; color: white; font-weight: 500; font-size: 14px; }
        .dot-cyan { width: 14px; height: 14px; min-width: 14px; background-color: #72e0e0; border: 3.5px solid #ffffff; border-radius: 50%; display: inline-block; }
        .resources-title { max-width: 140px;font-size: 20px; line-height: 1.15; position: relative; font-weight: 800; margin-bottom: 25px; color: #e4a2d8;}
    
        .resources-desc { max-width: 150px; font-size: 18px; line-height: 1.4; font-weight: 400; position: relative; color: white; margin-bottom: 40px; }
        .brochures-wrap {    position: absolute;
    right: 26px;
    top: 65px;
    width: 50%;
    height: auto;
    pointer-events: none;
    z-index: 1; }
        .brochures-wrap img { width: 100%; height: auto; filter: drop-shadow(-10px 15px 15px rgba(0,0,0,0.3)); }
        img{width: 100%;}

        /* Community Cards specific */
        .badge-community { max-width: 126px; background-color: #85006c1a; color: var(--brand-text-dark); border-radius: 20px; padding: 6px 14px; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; font-size: 14px; font-weight: 400; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
        .dot-pink {width: 15px;
    height: 15px;
    min-width: 5px;
    background-color: #84185d;
    border: 4px solid #ffffff;
    border-radius: 50%;
    display: inline-block; }
        .graphic-flower {     position: absolute;
    bottom: 68px;
    right: 30px;
    width: 44%;
    pointer-events: none; }
    .dot-green{    background-color: var(--brand-light-green);
        
   }
   .badge-green{background-color: #c0d63040;}
   .badge-blue{background-color: #5fbdc440;}
   .dot-blue{background-color: #5fbdc440;}
   .dot-green{background-color: #c0d63040;}
        .graphic-turtle { position: absolute; bottom: 0; left: 10px; width: 60%; pointer-events: none; }
        .erin-wrap { position: absolute; bottom: 0; left: 0; width: calc(100% - 3rem); height: 11rem; pointer-events: none; border-bottom-left-radius: 32px; overflow: hidden; }
        .erin-inner { width: 100%; height: 100%;  }
       .erin-inner img{width: 100%; height: 100%; object-fit: cover;}
       .btn{border-radius: 40px;font-weight: 700;}
       .btn-primary{background-color: var(--brand-light-green);color: var(--brand-teal);border:0;}
       .btn-primary:hover, .btn-primary:active, .btn-primary:visited{background-color: #95a724;color: var(--brand-teal)}
       .btn-secondary{background-color: var(--brand-teal);color: var(--brand-light-green);border:0;}
        .btn-secondary:hover, .btn-secondary:active, .btn-secondary:visited{background-color: #002833;color: var(--brand-light-green);}
        .btn-block{width: 100%;}

        /* --- Updated 3D Gradient Buttons --- */
        .btn-primary-cc {
            background: var(--gradient-light-green);
            color: var(--brand-teal);
            border-radius: 9999px;
            padding: 0.375rem 0.375rem 0.375rem 1.5rem; 
            font-weight: 700;
            font-size: 1.1rem;
            display: inline-flex;
            align-items: center;
            gap: 1rem;
            transition: all 0.2s ease;
            border: none;
            cursor: pointer;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            position: relative;
            z-index: 20;
        }
        .btn-primary-cc:hover { transform: scale(1.03); filter: brightness(1.05); color: var(--brand-teal); }
        .btn-primary-cc > span:first-child { padding-bottom: 2px; }

        .btn-icon-circle-cc {
            background: var(--gradient-light-green);
            border-radius: 50%;
            width: 2.5rem;
            height: 2.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: inset 4px 4px 6px rgba(0,0,0,0.15), inset -4px -4px 6px rgba(255,255,255,0.8);
        }

        .btn-play-cc {
            background-color: #f2f7d8; 
            color: #0b4d54;
            border-radius: 50%;
            width: 3.5rem;
            height: 3.5rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            border: none;
            cursor: pointer;
            padding: 0;
            position: relative;
            z-index: 20;
        }
        .btn-play-cc:hover { transform: scale(1.05); background-color: #ecf4cb; }
        .btn-circle-inner-cc { background: var(--gradient-light-green); border-radius: 50%; width: 2.125rem; height: 2.125rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
        .play-icon-cc { border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--brand-teal); margin-left: 3px; }

        /* ==========================================================================
           5. CAREGIVER WEBINAR SECTION
           ========================================================================== */
        .webinar-section {     background: linear-gradient(97.79deg, #93ccec 3.33%, #c4e4f5 95.34%); padding: 80px 0; overflow: hidden; }
        .collage-container { position: relative; height: 320px; width: 100%; max-width: 480px; margin: 0 auto; }
        .collage-img { position: absolute; object-fit: cover; box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
        .img-back-top { width: 150px; height: 150px; top: 0; left: 20%; border-radius: 35px; opacity: 0.40; z-index: 1; filter: grayscale(10%); }
        .img-back-bottom { width: 180px; height: 138px;     bottom: -14px;left: 14%; border-radius: 35px; opacity: 0.4; z-index: 2; }
        .img-front-main { width: 260px; height: 200px; top: 50%; transform: translateY(-50%); right: 0; border-radius: 25px; z-index: 3; box-shadow: 0 15px 35px rgba(0,0,0,0.15); }
        .webinar-text-content { display: flex; flex-direction: column; justify-content: center; height: 100%; padding-left: 20px; }
        .webinar-heading { margin-bottom: 25px; line-height: 1.3; }
        .text-teal-heading { color: var(--color-blue-500); font-weight: 800; font-size: 28px; }
        .text-magenta-heading { color: var(--brand-pink-dark); font-weight: 800; font-size: 28px;}
        .btn-lime { background: linear-gradient(180deg, #ebfb75 0%, #badb2a 100%); color: var(--brand-teal); border: none; border-radius: 30px; padding: 6px 8px 6px 20px; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 12px; box-shadow: 0 6px 15px rgba(186, 219, 42, 0.4); transition: transform 0.2s, filter 0.2s; text-decoration: none; cursor: pointer; align-self: flex-start; }
        .btn-lime:hover { transform: scale(1.05); filter: brightness(1.05); color: var(--brand-teal); }
        .icon-circle { background-color: rgba(0, 75, 90, 0.08); width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }

        /* ==========================================================================
           6. IMPORTANT SAFETY INFORMATION (ISI)
           ========================================================================== */
/* ==========================================================================
   6. IMPORTANT SAFETY INFORMATION (ISI)
   ========================================================================== */
.isi-section { 
    background-color: transparent; 
    position: relative; 
    padding-bottom: 0; 
}

/* The tray holding the header and scrollable content */
.isi-tray {
    width: 100%;
    z-index: 1000;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Half-page Fixed State */
.isi-tray.fixed-bottom-state {
    position: fixed;
    bottom: -194px;
    left: 0;

    background-color: transparent;
}

.isi-tray.fixed-bottom-state .isi-inner {
    height: 45vh; /* Sets the half page view */
    overflow-y: auto;
    background-color: #ffffff; /* Blocks out content scrolling behind it */
    padding-bottom: 20px;
}

/* Collapsed State */
.isi-tray.fixed-bottom-state.collapsed {
    /* Translates the tray down by 100% of its height MINUS the header height */
    transform: translateY(calc(100% - var(--isi-header-height, 78px)));
        bottom: -4px;
}

.isi-tray.fixed-bottom-state.collapsed .isi-content-wrapper {
    overflow-y: hidden;
}

/* Docked/Relative State (when scrolled to bottom of page) */
.isi-tray.relative-state {
    position: relative;
    transform: none !important;
    box-shadow: none;
}

.isi-tray.relative-state .isi-content-wrapper {
    height: auto;
    overflow-y: visible;
    background-color: transparent;
}

/* The Toggle Arrow Button */
.isi-toggle-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    border: 1px solid var(--brand-teal);
    background: transparent;
    color: var(--brand-teal);
    font-size: 14px;
    cursor: pointer;
    padding: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.isi-tray.relative-state .isi-toggle-btn {
    display: none; /* Disappears when natively docked at bottom */
}

/* Header Adjustments */
.isi-header h2 { 
    color: var(--brand-pink-dark); 
    position: relative; 
    font-size: 20px; 
    font-weight: 800; 
    padding: 24px 28px; 
    margin: 0; 
    text-transform: uppercase; 
    background-color: var(--light-grey); 
    border: 1px solid #cfd0d0; 
    border-bottom: 0; 
    border-radius: 20px 20px 0 0;
    /* Flexbox applied for placing button right */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.isi-inner { 
    margin: 0 auto;
    border: 1px solid #cfd0d0;
    padding: 0 0 28px 0; 
    border-radius: 0 0 28px 28px;
    background-color: #fbfbfb;

    
}
.max100{max-width: 1000px;}
.isi-content { font-size: 16px; line-height: 1.3; }
.isi-content h3 { color: var(--brand-pink-dark); font-size: 16px; font-weight: 800; margin-bottom: 10px; margin-top: 25px; }
.isi-content > h3:first-child { margin-top: 0; }
.isi-content p { margin-bottom: 5px; }
.isi-content ul { padding-left: 25px; margin-bottom: 3px; }
.isi-content li { margin-bottom: 0px; }
.isi-content strong { font-weight: 700; }
.isi-in-content-body{padding: 0 28px;    border-bottom: 1px solid #cfd0d0;}
.isi-footer-actions { display: flex; justify-content: flex-end; margin-top: 30px; margin-bottom: 0; padding-bottom: 20px; }
.btn-back-to-top { background: transparent; border: none; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--brand-teal); font-size: 10px; font-weight: 700; cursor: pointer; transition: transform 0.2s; }
.btn-back-to-top .circle-icon { width: 32px; height: 32px; border: 1px solid var(--brand-teal); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; font-size: 14px; }
.btn-back-to-top:hover { transform: translateY(-3px); }

.isi-footer .isi-footer-inner { padding-top: 30px; border-radius: 0 0 20px 20px; }
.isi-disclaimer { font-size: 16px; color: #555; }
.text-magenta-link { color: var(--brand-pink-dark); font-weight: 700; text-decoration: underline; }
/* Docked/Relative State (when scrolled to bottom of page) */
.isi-tray.relative-state {
    position: relative;
    transform: translateY(0) !important;
    box-shadow: none;
}

.isi-tray.relative-state .isi-content-wrapper {
    height: auto;
    max-height: none; /* Let it flow naturally to the footer */
    overflow-y: visible;
    background-color: transparent;
}
.nowrap { white-space: nowrap; }
         
        /* ==========================================================================
           7. FOOTER SECTION
           ========================================================================== */
        .site-footer { background-color: white; padding: 50px 0; border-top: 1px solid #cfd0d0; }
        .footer-logo-container { display: flex; align-items: center; margin-bottom: 30px; }
        .y-mabs-logo-svg { width: 32px; height: 32px; margin-right: 8px; }
        .logo-text-mabs { font-weight: 800; font-size: 22px; color: var(--brand-teal-logo); letter-spacing: -0.5px; }
        .logo-text-therapeutics { font-weight: 300; font-size: 19px; color: var(--brand-teal-logo); margin-left: 2px; }
        .logo-text-tm { font-size: 8px; vertical-align: super; color: var(--brand-teal-logo); margin-left: 1px; }
        .footer-legal-text { color: var( --brand-text-dark); font-size: 12px; line-height: 1.3; margin-bottom: 20px; max-width: 600px; }
        .footer-copyright { color: var( --brand-text-dark); font-size: 12px;line-height: 1.3; }
        .footer-links-nav { display: flex; justify-content: flex-end; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
        .footer-links-nav li { display: flex; align-items: center; margin-bottom: 10px; }
        .footer-links-nav a { color: var(--brand-pink-dark); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; font-weight: 400; transition: opacity 0.2s; }
        .footer-links-nav a:hover { opacity: 0.8; }
        .footer-links-nav li:not(:last-child)::after { content: "|"; color: var( --brand-text-dark); margin: 0 12px; font-size: 14px; font-weight: 300; }

        /* ==========================================================================
           8. RESPONSIVE QUERIES
           ========================================================================== */
    

        
        
  /* ==========================================================================
           2. SECTION & TYPOGRAPHY
           ========================================================================== */
        .journey-section {
            padding: 50px 0;
            max-width: 1240px;
            margin: 0 auto;
        }

        .journey-header {
            margin-bottom: 40px;
        }

        .journey-header h2 {
            color: var(--brand-teal);
            font-size: 32px;
            font-weight: 800;
            margin-top: 0;
            margin-bottom: 16px;
        }

        .journey-header p {
            color: var(--brand-text-dark);
            font-size: 16px;
            line-height: 1.6;
            margin: 0;
          
        }

        /* ==========================================================================
           3. BOARD LAYOUT (Desktop)
           ========================================================================== */
        .journey-carousel-wrapper {
            position: relative;
        }

        .journey-board {
            border: 1px solid var(--brand-border);
            border-radius: 20px;
            padding: 30px;
            background: #ffffff;
        }

        .journey-track {
            display: flex;
            align-items: stretch;
            gap: 54px;
            justify-content: center;
        }

        /* Individual Steps */
        .journey-step {
            display: flex;
            flex-direction: column;
            border-radius: 16px;
            text-align: center;
            position: relative;
            padding: 24px 11px;
            width: 20%;
        }

        .journey-step.highlight {
            background-color: var(--brand-light-blue);
        }

        /* Step Title */
        .step-title {
            color: var(--brand-text);
            font-size: 16px;
            font-weight: 600;
            margin: 0 0 16px 0;
            height: 48px; 
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Dark Content Box */
        .step-dark-box {
            background-color: var(--brand-teal);
            color: #ffffff;
            border-radius: 12px;
            padding: 24px 16px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-height: 150px; 
            box-shadow: 0 4px 12px rgba(0, 62, 83, 0.15);
        }

        .step-dark-box p {
            margin: 0;
            font-size: 14px;
            line-height: 1.5;
          
        }

        .step-dark-box .goal-text {
            color: var(--brand-light-green);
            font-weight: 700;
            margin-top: 0;
        }

        /* Footer below dark boxes (Incomplete Response) */
        .step-footer {
            margin-top: 24px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            padding-bottom: 10px;
        }

        .step-footer p {
            color: var(--brand-text);
            font-size: 16px;
            font-weight: 600;
            margin: 0;
        }

        .step-footer i {
            color: var(--brand-teal);
            font-size: 16px;
        }

        .danyelza-logo-svg {
            height: 32px;
            width: auto;
        }

        /* ==========================================================================
           4. CONNECTING ARROWS (Desktop Only)
           ========================================================================== */
        .step-arrow {
            position: absolute;
            right: -21px; 
            top: 163px;
            transform: translate(50%, -50%);
            width: 30px;
            height: 30px;
            background: linear-gradient(180deg, #d3f345 0%, #b8d91c 100%);
            color: var(--brand-teal);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            z-index: 10;
        }
        
        .journey-track .journey-step:first-child .step-arrow {
            right: -33px;
        }

        /* ==========================================================================
           5. MOBILE CAROUSEL STYLES (Mobile Only)
           ========================================================================== */
        .mobile-nav-btn {
            display: none; 
            position: absolute;
            top: 163px; /* Align perfectly with vertical center of dark boxes */
            transform: translateY(-50%);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: var(--brand-light-green);
            color: var(--brand-teal);
            border: none;
            z-index: 20;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
            transition: opacity 0.2s;
        }
        .mobile-nav-btn.prev { left: 0px; }
        .mobile-nav-btn.next { right: 0px; }
        .mobile-nav-btn:disabled { cursor: default; pointer-events: none; }

        .carousel-dots {
            display: none;
            justify-content: center;
            gap: 12px;
            margin-top: 30px;
        }
        .carousel-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 2px solid var(--brand-teal);
            background-color: transparent;
            padding: 0;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .carousel-dot.active {
            background-color: var(--brand-teal);
        }

        /* Responsive Breakpoint for Mobile View */
        


         /* ==========================================================================
           2. CURIE SCORE BOX LAYOUT (Desktop)
           ========================================================================== */
        .curie-box {
            background-color: #f9fbea;
            border-radius: 120px; /* Pill shape */
            padding: 15px 40px 15px 15px; /* Tight on the left for the circle */
            display: flex;
            align-items: center;
            gap: 30px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.02);
        }

        .curie-graphic-circle {
            width: 140px;
            height: 140px;
            background-color: #ffffff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.04);
        }

        .curie-graphic-svg {
            width: 75px;
            height: auto;
            margin-top: 10px;
        }

        .curie-content {
            flex: 1;
        }

        .curie-text {
            font-size: 18px;
            line-height: 1.55;
            color: var(--brand-text-dark);
            margin-bottom: 20px;
            margin-top: 5px;
        }

        .curie-text a {
            color: var(--brand-pink-dark);
            font-weight: 700;
            text-decoration: underline;
            text-decoration-thickness: 2px;
            text-underline-offset: 3px;
            transition: color 0.2s;
        }

        .curie-text a:hover {
            color: #5e1142;
        }

        /* ==========================================================================
           3. BUTTON STYLES
           ========================================================================== */
        .curie-btn {
                background: linear-gradient(180deg, #d3f345 0%, #b8d91c 100%);
            color: var(--brand-teal);
            border: none;
            border-radius: 50px;
            padding: 12px 20px 12px 24px;
            font-size: 15px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            cursor: pointer;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), inset 0 -2px 5px rgba(0,0,0,0.05);
            transition: transform 0.2s, filter 0.2s;
            text-decoration: none;
            max-width: 100%;
        }

        .curie-btn:hover {
            transform: scale(1.02);
            filter: brightness(1.05);
            color: var(--brand-teal);
        }

        /* Circle around the play icon for depth */
        .play-icon-wrapper {
            background: linear-gradient(135deg, #cde638 0%, #ebfb75 100%);
            width: 26px;
            height: 26px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: inset 1px 1px 3px rgba(0,0,0,0.1), inset -1px -1px 3px rgba(255,255,255,0.6);
        }

        .play-icon {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 5px 0 5px 7px;
            border-color: transparent transparent transparent var(--brand-teal);
            margin-left: 2px; /* Optical center adjustment */
        }

        /* ==========================================================================
           4. VIDEO MODAL (Reused from Homepage)
           ========================================================================== */
        .modal-dialog-custom {
            max-width: 1000px;
        }
        .modal-content-custom {
            background-color: transparent;
            border: none;
            position: relative;
        }
        .btn-close-modal {
            position: absolute;
            top: -15px;
            right: -15px;
            background: var( --gradient-light-green);
            color: var(--brand-teal);
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 1060;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            transition: transform 0.2s;
        }
        .btn-close-modal:before{
            content: "";
                width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #def069;
    min-width: 52px;
    position: absolute;
    z-index: -1;
    opacity: 0.3;
        }
        .btn-close-modal:hover {
            transform: scale(1.1);
        }
        .video-wrapper {
            background-color: black;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
            width: 100%;
            aspect-ratio: 16/9;
        }
        .video-wrapper video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* ==========================================================================
           5. MOBILE RESPONSIVE
           ========================================================================== */
        


        
        /* ==========================================================================
           2. SECTION BLOCK COMPONENTS
           ========================================================================== */
        .info-block {
            background-color: var(--bg-light);
            border-radius:20px;
      
  
            border: 1px solid #c8c9c9;
        }

        .info-header {
            background-color: var(--color-blue-700);
            color: var(--brand-light-green);
            padding: 16px 24px;
            border-left: 8px solid var(--brand-lime);
            font-size: 18px;
            font-weight: 700;
            margin: 0;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
        }

        .info-body {
            padding: 32px;
            border-radius:  0 0 28px 28px !important;
          
        }
        .info-body .cc-cutout{padding-top: 18px;}
        .info-body.pink-body{
  background-color: #6a005514;
        }
         .info-body.blue-body{
  background-color: #8bc9eb33;
        }


        /* Buttons */
        .btn-play-action {
            background: var(--brand-lime-gradient);
            color: var(--brand-teal);
            border: none;
            border-radius: 50px;
            padding: 8px 12px 8px 20px;
            font-size: 14px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
            transition: transform 0.2s, filter 0.2s;
            text-decoration: none;
        }
        .btn-play-action:hover {
            transform: scale(1.03);
            filter: brightness(1.05);
            color: var(--brand-teal);
        }
        .play-icon-circle {
            background: linear-gradient(135deg, #cde638 0%, #ebfb75 100%);
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: inset 1px 1px 3px rgba(0,0,0,0.1), inset -1px -1px 3px rgba(255,255,255,0.6);
        }
        .play-icon-triangle {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 5px 0 5px 8px;
            border-color: transparent transparent transparent var(--brand-teal);
            margin-left: 2px;
        }

        /* ==========================================================================
           3. LUKE CARD (Section 1)
           ========================================================================== */
           .grey-link{color: var(--brand-text-dark);text-decoration: underline;}
        .luke-layout {
            display: flex;
            gap: 40px;
            align-items: center;
            padding-right: 46%;
            padding-bottom: 6%;
        }
        .luke-text {
            flex: 1;
        }
        .luke-title {
            font-size: 26px;
            color: var(--brand-text-dark);
            line-height: 1.3;
            margin-bottom: 16px;
            font-weight: 700;
        }
        .luke-desc {
            font-size: 18px;
            color: var(--brand-text-dark);
            line-height: 1.6;
        }
        .luke-image-wrap {
            flex: 1;
            position: absolute;
    border-radius: 16px;
    overflow: hidden;
    right: 0;
    bottom: 0;
    width: 47%;
         
        }
        .luke-image-wrap img {
            width: 100%;
            height: auto;
            display: block;
        }
        .luke-image-label {
            position: absolute;
            bottom: 12px;
            left: 0;
            width: 100%;
            text-align: center;
            color: white;
            font-size: 10px;
            text-shadow: 0 1px 2px rgba(0,0,0,0.8);
        }
        .luke-btn-pos {
            position: absolute;
            bottom: -15px; /* Overlaps the bottom edge slightly */
            right: 20px;
            z-index: 5;
        }

        /* ==========================================================================
           4. CHECKLIST & CAROUSEL (Section 2)
           ========================================================================== */
        .checklist-title {
            font-size: 24px;
            font-weight: 800;
            color: var(--brand-teal);
            margin-bottom: 24px;
        }
        .checklist-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px 40px;
            margin-bottom: 40px;
            border-bottom: 1px solid #c8c9c9;
            padding-bottom: 40px;
        }
        .checklist-item {
            display: flex;
            gap: 12px;
            align-items: flex-start;
        }
        .check-icon {
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            background-color: var(--brand-light-green);
            color: var(--brand-teal);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            margin-top: 2px;
        }
        .check-text {
            font-size: 18px;
            line-height: 1.5;
            color: var(--brand-text-dark);
        }
        .check-text strong {
            color: var(--brand-text);
        }
        .magenta-link {
            color: var(--brand-pink-dark);
            font-weight: 700;
            text-decoration: underline;
        }

        /* Carousel Desktop */
        .carousel-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 20px;
        }
        .home-carousel-track {
            display: flex;
            gap: 20px;
            justify-content: space-between;
        }
         .wtk-carousel{
            flex-wrap: wrap;
         }
         
        .wtk-carousel .home-card{
            align-items: self-start;
            width: 48%;
            flex: auto;
            border: 0;
            box-shadow: none;
            padding: 40px;
        }
        .home-card {
            flex: 1;
            background-color: white;
            border: 1px solid var(--border-light);
            border-radius: 12px;
            padding: 24px 20px;
       
            display: flex;
          
            align-items: center;
            box-shadow: inset 0px 0px 3.375rem 0px #ebf0f1;
        }
        .stroke-icon{
            fill: none !important;
            stroke: var(--brand-pink-dark);
        }
        .home-icon-wrap {
            width: 100px;
            height: 100px;
            min-width: 100px;

            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 16px;
            color: var(--brand-magenta);
            outline: 8px solid var(--color-purple-200);
                outline-offset: -16px;
                    box-shadow: 0 0 16px #003e5333;
        }
           .home-icon-wrap svg{
            width: 34px;
            height: 34px;
            fill: var(--brand-pink-dark);
           }
        .home-card p {
            margin: 0 0 0 15px;
            font-size: 16px;
            line-height: 1.4;
        
            color: var(--brand-text-dark);
        }

        .home-nav-btn { display: none; } /* Hidden on desktop */
        .home-dots { display: none; }
        .home-nav-btn i{color: var(--brand-teal);}

        /* ==========================================================================
           5. WEBINAR CARD (Section 3)
           ========================================================================== */
        .webinar-layout {
            display: flex;
            gap: 40px;
            align-items: center;
        }
        .webinar-text {
            flex: 1;
        }
        .webinar-title {
            font-size: 26px;
            font-weight: 800;
            color: var(--brand-text-dark);
            margin-bottom: 16px;
        }
        .webinar-desc {
            font-size: 18px;
            color: var(--brand-gray);
            line-height: 1.6;
            margin-bottom: 16px;
        }
        .webinar-list {
            padding-left: 20px;
            margin-bottom: 0;
        }
        .webinar-list li {
            font-size: 18px;
            color: var(--brand-text-dark);
            margin-bottom: 8px;
            line-height: 1.4;
        }
        
        .webinar-video-wrap {
            flex: 1;
            position: relative;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 8px 24px rgba(0,0,0,0.1);
            cursor: pointer;
            transition: transform 0.2s;
        }
        .webinar-video-wrap:hover {
            transform: scale(1.02);
        }
        .webinar-video-wrap img {
            width: 100%;
            height: auto;
            display: block;
        }
        .big-play-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 80px;
            background-color: rgba(0,0,0,0.5);
            border: 3px solid white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 30px;
            padding-left: 6px; /* optical center */
            transition: background-color 0.2s;
        }
        .webinar-video-wrap:hover .big-play-overlay {
            background-color: rgba(0, 62, 83, 0.8);
        }
        .webinar-label {
            text-align: center;
            font-size: 12px;
            color: var(--brand-text-dark);
            margin-top: 10px;
        }
        .border-0{border: 0 !important;}

        /* ==========================================================================
           7. MOBILE RESPONSIVE QUERIES
           ========================================================================== */
        


        
        /* ==========================================================================
           2. COMMON CARD STYLES
           ========================================================================== */
        .info-card {
            background-color: #ffffff;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid var(--border-light);
            box-shadow: 0 4px 15px rgba(0,0,0,0.03);
            display: flex;
            flex-direction: column;
        }

        .info-card-header {
            background-color: var(--brand-teal);
            color: var(--brand-light-green);
            padding: 12px 24px;
            font-size: 15.5px;
            font-weight: 700;
            margin: 0;
        }

        .info-card-body {
            padding: 40px;
            position: relative;
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        /* Common Typography inside Cards */
        .card-title {
            font-size: 24px;
            font-weight: 700;
            color: var(--brand-text-dark);
            line-height: 1.3;
            margin-bottom: 16px;
        }
        .card-desc {
            font-size: 16px;
            color: var(--brand-gray);
            line-height: 1.6;
            margin: 0;
        }

        /* Pill Badges */
        .badge-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            margin-bottom: 20px;
            width: max-content;
        }
        .badge-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }
        /* Pink Community Badge */
        .badge-pink {
            background-color: rgba(132, 24, 93, 0.08);
            color: #84185d;
        }
        .badge-pink .badge-dot { background-color: #84185d; }
        
        /* Blue Resources Badge */
        .badge-blue {
            background-color: #8bc9eb4d;
            color: var(--brand-text-dark);
        }
        .badge-blue .badge-dot { background-color: #72e0e0; }
        .badge-dot.green { background-color: #8cc63f; }
        .badge-dot.cyan { background-color: #00a99d; }

        /* Buttons */
        .btn-lime {
            background: linear-gradient(180deg, var(--brand-lime-start) 0%, var(--brand-lime-end) 100%);
            color: var(--brand-teal);
            border: none;
            border-radius: 50px;
            padding: 8px 12px 8px 20px;
            font-size: 14px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
            transition: transform 0.2s, filter 0.2s;
            text-decoration: none;
            width: max-content;
        }
        .btn-lime:hover {
            transform: scale(1.02);
            filter: brightness(1.05);
            color: var(--brand-teal);
        }
        .btn-icon-circle {
            background: linear-gradient(135deg, #cde638 0%, #ebfb75 100%);
            width: 26px;
            height: 26px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: inset 1px 1px 3px rgba(0,0,0,0.1), inset -1px -1px 3px rgba(255,255,255,0.6);
            font-size: 11px;
            color: var(--brand-teal);
        }
        /* Small triangle for play buttons */
        .play-triangle {
            width: 0; height: 0;
            border-style: solid;
            border-width: 5px 0 5px 7px;
            border-color: transparent transparent transparent var(--brand-teal);
            margin-left: 2px;
        }

        /* ==========================================================================
           3. SPECIFIC CARD STYLES
           ========================================================================== */

        /* Card 1: Financing */
        .card-financing .info-card-body {
            background-color: #ffffff;
            padding-bottom: 30px;
        }
        .financing-content {
            display: flex;
            gap: 40px;
        
            margin-bottom: 40px;
        }
        .financing-text { flex: 1; }
        .financing-graphic {
            flex: 1;
            display: flex;
            justify-content: center;
        }

        .financing-graphic {
            align-items: center;
            aspect-ratio: 16 / 10;
            background: rgba(255,255,255, .08);
            border-radius: 1rem;
            box-shadow:inset 0px 0px 3.375rem 0px #ebf0f1;
            display: flex;
            justify-content: center;
            margin-inline:auto 0;
            max-width: 460px;
            padding-inline: 3rem;
            width: 100%;
        }
        .infusionImg {
                /* align-items: center; */
    /* aspect-ratio: 16 / 10; */
    background: rgba(255, 255, 255, .08);
    border-radius: 1rem;
    box-shadow: inset 0px 0px 3.375rem 0px #ebf0f1;
    /* display: flex; */
    justify-content: center;
    margin-inline: auto 0;
    /* padding-inline: 3rem; */
    width: 100%;
    padding: 60px;
        }
        .meet-Isabella {}
        .meet-Isabella img {width: 300px;}
        .mock-connect-logo {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.06);
            padding: 30px 40px;
            text-align: center;
            border: 1px solid #f0f0f0;
            width: 100%;
            max-width: 360px;
        }
        .mock-connect-logo h3 {
            color: #552766;
            font-size: 32px;
            font-weight: 800;
            margin-bottom: 5px;
            letter-spacing: -0.5px;
        }
        .mock-connect-logo h3 span { color: #21598f; font-weight: 400; }
        .mock-connect-logo p {
            color: #b02670;
            font-size: 14px;
            font-weight: 600;
            margin: 0;
            position: relative;
        }
        .mock-connect-logo p::before {
            content: ""; position: absolute; top: -6px; left: 10%; width: 80%; height: 1px; background: linear-gradient(90deg, transparent, #b02670, transparent);
        }
        .btn-center-wrap {
            display: flex;
            justify-content: center;
            width: 100%;
        }

        /* Card 2: Community */
        .card-community .info-card-body {
            background-color: #f7eef3; /* Light pink background */
        }
        .community-content {
            display: flex;
            gap: 40px;
            align-items: center;
        }
        .community-text { flex: 1.2; padding-bottom: 20px; }
        .community-text a {
            color: var(--brand-text);
            text-decoration: underline;
            text-decoration-thickness: 2px;
            text-underline-offset: 4px;
        }
        .community-graphic {
            flex: 0.8;
            display: flex;
            justify-content: flex-end;
            position: relative;
        }
        .community-flower-img {
            max-width: 250px;
            width: 100%;
            height: auto;
            mix-blend-mode: multiply; /* Blends the white background of the image with the pink card */
            filter: contrast(1.1);
        }
        .pos-bottom-right {
            position: absolute;
            bottom: 30px;
            right: 40px;
        }

        /* Card 3: Caregivers / Resources */
        .card-resources .info-card-body {
            background: linear-gradient(135deg, #ffffff 0%, #e6f2f7 100%);
        }
        .resources-content {
            display: flex;
            gap: 40px;
            align-items: center;
        }
        .resources-text { flex: 1.2; padding-bottom: 20px;}
        .resources-graphic {
            flex: 0.8;
            display: flex;
            justify-content: flex-end;
            position: relative;
        }
        .resources-stack-img {
            max-width: 240px;
            width: 100%;
            height: auto;
            mix-blend-mode: multiply;
            filter: drop-shadow(0 20px 20px rgba(0,0,0,0.15));
        }

        /* ==========================================================================
           5. MOBILE RESPONSIVE
           ========================================================================== */
        


        
        /* ==========================================================================
           2. COMMON CARD STYLES
           ========================================================================== */

         .disc_text{
            font-size: 16px;
            color: #4f505280;
         }
        .info-body {
            padding: 35px;
            position: relative;
        }

        .card-title {
            font-size: 26px;
            font-weight: 700;
            color: var(--brand-text-dark);
            line-height: 1.3;
            margin-bottom: 16px;
        }

        .card-desc {
            font-size: 16px;
            color: var(--brand-gray);
            line-height: 1.6;
            margin-bottom: 24px;
           

        }

        /* Buttons */
        .btn-lime {
            background: var(--gradient-light-green );
            color: var(--brand-teal);
            border: none;
            border-radius: 50px;
            padding: 8px 12px 8px 24px;
            font-size: 15px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 16px;
            cursor: pointer;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
            transition: transform 0.2s;
            text-decoration: none;
            width: max-content;
        }
        .btn-lime:hover { transform: scale(1.02); color: var(--brand-teal); }
        .video-card-body {
            background-color: #fcf6f9;
            display: flex;
            gap: 40px;
            align-items: center;
            padding: 30px;
            border-radius: 12px;
        }
        .video-text { flex: 1; }
        .video-media {
            flex: 1; position: relative; border-radius: 20px; overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1); cursor: pointer;
        }
        .video-media img { width: 100%; display: block; border-radius: 20px; }
        .spokesperson-label { position: absolute; bottom: 12px; left: 20px; color: white; font-size: 11px; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
        .watch-btn-pos { position: absolute; bottom: 12px; right: 20px; z-index: 10; }

        /* ==========================================================================
           4. WHAT TO EXPECT: TIMELINE & CYCLES
           ========================================================================== */
        /* Timeline Table */
        .timeline-scroll-wrapper {
            width: 100%;
            overflow-x: auto;
            margin: 40px 0;
            padding-bottom: 10px;
            -webkit-overflow-scrolling: touch;
        }
        .timeline-table {
            min-width: 850px;
            width: 100%;
            border-collapse: separate;
            border-spacing: 0 10px;
        }
        .timeline-table th {
            text-align: center; font-size: 13px; color: var(--brand-gray); font-weight: 600;
            padding: 10px; border-bottom: 2px solid var(--border-light);
        }
        .timeline-table th span { display: block; color: var(--brand-teal); font-weight: 800; font-size: 14px; margin-bottom: 5px; }
        .timeline-table td {
            padding: 15px 10px; text-align: center; vertical-align: middle;
            background-color: #fdfdfd; border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;
        }
        .timeline-table td:not(:first-child) { width: 13%; }
        
        .row-header-cell {
            text-align: left !important; width: 22% !important;
            border-left: 1px solid #f0f0f0; border-radius: 12px 0 0 12px;
            font-weight: 700; font-size: 15px; padding-left: 20px !important;
        }
        .row-header-cell small { display: block; font-weight: 400; font-size: 12px; margin-top: 4px; }
        .timeline-table tr td:last-child { border-right: 1px solid #f0f0f0; border-radius: 0 12px 12px 0; }

        /* Specific row colors */
        .tr-danyelza .row-header-cell { background-color: var(--tl-danyelza-bg) !important; color: var(--brand-magenta); border: none; }
        .tr-gmcsf .row-header-cell { background-color: var(--tl-gmcsf-bg) !important; color: #5c8a29; border: none; }
        .tr-gaba .row-header-cell { background-color: var(--tl-gaba-bg) !important; color: var(--brand-teal); border: none; }

        .timeline-icon {
            width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; margin: 0 auto;
        }
        .icon-danyelza { background-color: var(--brand-magenta); color: white; }
        .icon-gmcsf { background-color: #8cc63f; color: white; }
        .icon-gaba { background-color: var(--brand-lime); color: var(--brand-teal); }
        .timeline-subtext { display: block; font-size: 11px; color: var(--brand-gray); margin-top: 6px; line-height: 1.2; }

        /* Cycle Rings */
        .cycles-container {
            display: flex; align-items: center; justify-content: center; gap: 20px;
            margin: 50px 0; flex-wrap: wrap;
        }
        .cycle-ring {
            width: 200px; height: 200px; border-radius: 50%; display: flex; flex-direction: column;
            align-items: center; justify-content: center; text-align: center; padding: 20px;
            border: 12px solid; background-color: white; box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }
        .ring-1 { border-color: #00a99d; }
        .ring-2 { border-color: #cde638; }
        .ring-3 { border-color: #552766; }
        
        .cycle-ring h4 { font-size: 22px; font-weight: 800; color: var(--brand-teal); margin-bottom: 8px; line-height: 1.2; }
        .cycle-ring p { font-size: 13px; color: var(--brand-gray); margin: 0; line-height: 1.4; }
        
        .cycle-arrow {
            width: 36px; height: 36px; background-color: var(--brand-lime); border-radius: 50%;
            display: flex; align-items: center; justify-content: center; color: var(--brand-teal); font-size: 16px;
        }

        /* Response Definitions */
        .response-defs {
            display: flex; gap: 30px; ;
        }
        .response-defs p { flex: 1; margin: 0; font-size: 16px; color: var(--brand-gray); line-height: 1.6; }

        /* ==========================================================================
           5. SIDE EFFECTS (Desktop 2x2 Grid -> Mobile Carousel)
           ========================================================================== */
        .se-carousel-wrapper { position: relative; }
        .se-track {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
        }
        
        .se-slide {     height: 100%;
    background-color: white;
    border-radius: 12px;
    padding: 50px;}
        .se-card {
display: flex;    gap: 25px;
        }
        .se-card img {
                width: 96px;
    box-shadow: 0 0px 20px 0px rgb(153 161 170 / 25%);
    border-radius: 100%;
        }
        .se-icon {
            width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; font-size: 24px; color: white;
        }
        .se-icon.pink { background-color: #f3e5ef; color: #b41d7b; }
        .se-icon.purple { background-color: #efe5f3; color: #552766; }
        .se-icon.teal { background-color: #e5f3f4; color: #00a99d; }

        .se-card h4 { font-size: 18px; font-weight: 700; color: var(--brand-teal); margin-bottom: 15px; }
        .se-card p, .se-card li { font-size: 14px; color: var(--brand-gray); line-height: 1.6; margin-bottom: 10px; }
        .se-card ul { padding-left: 20px; margin-bottom: 0; }
        
        .med-list { list-style: none; padding: 0; margin-top: 15px; }
        .med-list li { position: relative; padding-left: 25px; margin-bottom: 15px; }
        .med-list li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 2px; color: #b41d7b; font-size: 14px; }

        /* Pre-meds Grid */
        .premeds-header { font-size: 24px; font-weight: 800; margin: 40px 0 20px; line-height: 1.3; }
        .premeds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        .premed-card {font-size: 16px; color: var(--brand-text-dark); line-height: 1.5; }
        .premed-card strong { color: var(--brand-text); display: block; font-size: 16px; }

        /* Mobile Nav Elements (Hidden on Desktop) */
        .mobile-nav-btn { display: none; }
        .carousel-dots { display: none; }

        /* ==========================================================================
           6. CARE TEAM BANNER
           ========================================================================== */
        .care-team-banner {
            background-color: #a5d4ee; border-radius: 16px; display: flex; align-items: center;
            overflow: hidden; border: 1px solid var(--border-light);
        }
        .care-img-wrap { flex: 0 0 40%;position: relative;z-index: 2; }
        .care-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block;position: relative;z-index: 2;  }
        .care-text-wrap { flex: 1; padding: 40px;position: relative;z-index: 2; }
        .care-text-wrap h3 { font-size: 24px; font-weight: 700; color: var(--brand-teal); margin-bottom: 24px; line-height: 1.4; }

        /* ==========================================================================
           7. RESOURCES & GROUPS
           ========================================================================== */
        .support-grid {
            display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 20px;
        }
        .maroonColor {color: var(--brand-pink-dark);}
        .support-card {
           border-radius: 12px;
    padding: 40px;
    padding-top: 50px;
    box-shadow: inset 0px 0px 3.375rem 0px #ebf0f1;
    background: rgba(255, 255, 255, .08);
    transition: box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    position: relative;
        }




        .support-card:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.06); }
        .support-card .support-icon img {
            width: 79px;
        }
        .support-icon {
                width: 48px;
    position: absolute;
    top: -28px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 22px;
    color: white;
        }
        .icon-red { background-color: #e84a5f; }
        .icon-multi { background: linear-gradient(135deg, #f1c40f, #e74c3c, #3498db); }
        .icon-yellow { background-color: #f1c40f; }
        .icon-purple { background-color: #9b59b6; }
        .icon-pink { background-color: #ff7979; }
        .icon-blue { background-color: #2980b9; }
        .icon-grey { background-color: #95a5a6; }

        .support-card h4 { font-size: 18px; font-weight: 700; color: var(--brand-text); margin-bottom: 8px; }
        .support-card a { font-size: 16px; text-decoration: underline; font-weight: 700; display: block; margin-bottom: 5px; }
        .support-card p { font-size: 16px; color: var(--brand-gray); line-height: 1.6; margin: 0; }

        /* Social Banner */
        .social-banner {
               background: linear-gradient(90deg, #39022c 0%, #67064a 100%);
    position: relative;
    border-radius: 16px;
    padding: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    overflow: hidden;
        }

        .social-banner img {
    height: 280px;
    left: 50%;
    position: absolute;
    width: 382px;
        }



        .social-banner h3 { font-size: 28px; font-weight: 700; margin: 0; max-width: 550px; line-height: 1.4; }
        .social-icons { display: flex; gap: 16px; }
        .social-icons a {
               width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 2px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 56px;
    transition: background-color 0.2s;
    position: relative;
        }
        .text-yellow {
    color: #c0d630;
}
        .social-icons a:hover { background-color: white; color: #552766; }

        /* ==========================================================================
           8. GLOSSARY
           ========================================================================== */
        .glossary-grid {
            margin-top: 20px;
        }
        .glossary-item{margin-bottom: 26px;}
        .glossary-item h4 { font-size: 16px; font-weight: 700;  margin-bottom: 5px; }
        .glossary-item p { font-size: 16px; color: var(--brand-text-dark); line-height: 1.6; margin: 0; }

    .minimal-link .icon{display: inline-block;width: 38px;height: 38px; min-width: 38px; margin-right: 10px; border-radius: 50%;display: flex;justify-content: center;align-items: center;border: 1px solid var(--brand-teal);}
    .minimal-link{text-transform: uppercase;display: flex;align-items: center;color: var(--brand-teal);font-size: 12px;font-weight: 700; text-decoration: underline;}
     .minimal-link:hover .icon{background-color: var(--brand-teal);}
      .minimal-link:hover .icon svg *{stroke: var(--brand-light-green);}
      .atcp_section img{width: 80%;}
      .flower-card .luke-image-wrap{
            width: 28%;
    height: 100%;
  right: 15%;
      }

      .news-card .luke-image-wrap{
        right: -20px;
        height: auto;
        width: 47%;
      }

      .sitemap-links .luke-layout{padding-right: 0;}
      .sitemap-list{list-style: none;padding-left: 0;}
    
            .sitemap-list a{font-size: 18px;font-weight: 500;color: var(--brand-pink-dark);text-decoration: underline;}
            .sitemap-links .luke-layout{padding-bottom: 0px;}

            /* Styling the trigger links */
.tooltip-trigger {
    color: var(--brand-pink-dark);
    text-decoration: underline;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
}

.tooltip-trigger:hover {
    opacity: 0.8;
}

/* The dynamic tooltip box */
.custom-info-tooltip {
    position: absolute;
    z-index: 99999;
    background-color: #f0f1f4;
    border-radius: 12px;
    padding: 16px 20px;
    width: 340px; 
    max-width: calc(100vw - 40px); /* Responsive: prevents touching screen edges */
-webkit-box-shadow: 3px 4px 9px 0px rgba(0,0,0,0.32); 
box-shadow: 3px 4px 9px 0px rgba(0,0,0,0.32);
    
    /* Hidden state */
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none; /* Ensures mouse can pass through smoothly */
    font-family: sans-serif;
}

/* Visible state */
.custom-info-tooltip.show {
    opacity: 1;
    visibility: visible;
}

/* Tooltip internal text */
.custom-info-tooltip .tooltip-title {
    display: block;
    color: #8c1055;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
}

.custom-info-tooltip .tooltip-desc {
    color: var(--brand-text-dark);
    font-size: 18px;
    line-height: 1.4;
    margin: 0;
}
.storelocator-main{
    border: 1px solid #c8c9c9;
    border-radius: 20px;
    padding: 0 0 0 20px;
}
     .sl-container{
            margin: 0;
    width: 100%;
    max-width: 100%;
     }
     #asl-storelocator.asl-cont .sl-main-cont .asl-panel{
        border: 0 !important;
            padding-top: 20px;
     }
    #asl-storelocator.asl-cont.no-asl-filters .asl-wrapper .sl-main-cont .sl-main-row .asl-panel .search_filter .asl-store-search .asl-search-address{
            border-radius: 6px !important;
    border-color: #80868b !important;
    padding-left: 41px !important;
     }
     .input-group-append{
        position: absolute;
    left: 0;
    top: 10px;
     }
     #asl-storelocator.asl-cont.asl-template-0 .asl-wrapper .sl-main-cont .sl-main-row .asl-panel .search_filter .asl-store-search .span-geo{
            background: transparent !important;
    border: 0 !important;
     }
       .asl-search-event i{
        color: #80868b !important;
       }
       #asl-storelocator.asl-cont.asl-template-0 .asl-wrapper .sl-main-cont .sl-main-row .asl-panel .search_filter label{
        color: #4f5052 !important;
       }
       #asl-storelocator.asl-cont.asl-template-0 .asl-wrapper .sl-main-cont .asl-panel-inner .Num_of_store{
  display: none !important;
        
       }
       #asl-storelocator.asl-cont.no-asl-filters .asl-wrapper .sl-main-cont .sl-main-row .asl-panel .asl-panel-inner{
        padding-right: 18px !important;
       }
       #asl-storelocator.asl-cont .sl-main-cont .asl-panel-inner .Num_of_store span{
          color: #4f5052 !important;
       }
       #asl-storelocator.asl-cont.asl-template-0 .asl-wrapper .sl-main-cont .asl-panel-inner .sl-main-cont-box ul.sl-list li.sl-item .sl-addr-sec .addr-loc ul li i{
        display: none !important;
       }
       #asl-storelocator.asl-cont .asl-wrapper .sl-main-cont .asl-panel-inner .sl-main-cont-box .sl-list-wrapper .sl-list .sl-item{
        padding: 15px 15px !important;
       }
       #asl-storelocator.asl-cont.asl-template-0 .asl-wrapper .sl-main-cont .btn.btn-asl{
        background-color: #fff !important;
        color: #1976d2 !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 30px !important;
       }
       #asl-storelocator.asl-cont .sl-main-cont .asl-panel{
        padding-right: 18px;
       }
       #asl-storelocator{
        margin-bottom: 35px !important;
       }
       #asl-storelocator.asl-cont .asl-wrapper .sl-container{
            margin: 0;
    max-width: 100%;
       }
       #asl-storelocator.asl-cont .sl-main-cont .asl-panel-inner .sl-main-cont-box ul.sl-list li.sl-item .sl-addr-sec .addr-loc ul li{
        margin-bottom: 0 !important;
       }


        .popup-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0,0,0,0.4);
   display: none;
   align-items: center;
   justify-content: center;
   z-index: 9999;
   }
   .popup-box {
   background: #fff;
   border-radius: 12px;
   padding: 30px 30px;
   max-width: 720px;
   width: 90%;
   box-shadow: 0 10px 25px rgba(0,0,0,0.2);
   text-align: left;
   }
   .popup-box h2 {
   font-size: 22px;
   margin-bottom: 10px;
   font-weight: 700;
   }
   .popup-box p {
   font-size: 14px;
   color: #666;
   margin-bottom: 25px;
   }
   .popup-buttons {
   display: flex;
   justify-content: space-between;
   }
   .btn-continue {
   background: #c4d82e;
   border: none;
   padding: 12px 25px;
   border-radius: 30px;
   font-weight: 600;
   cursor: pointer;
   }
   .btn-return {
   background: #0d3b44;
   color: #fff;
   border: none;
   padding: 12px 25px;
   border-radius: 30px;
   font-weight: 600;
   cursor: pointer;
   }