/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

@media (min-width:991px) {
    .mobile-menu-dropdown{display: none;}
}

@media (max-width: 1200px) {
 .cc-styled-card_top{padding-bottom: 25% !important;padding-right: 5%;}
 .isi-tray.fixed-bottom-state{ bottom: -269px;display: flex;flex-direction: column;align-items: center;}
  .isi-tray.fixed-bottom-state .isi-header, .isi-tray.fixed-bottom-state .isi-content-wrapper{width: 86%;}
 .fs-18-para{font-size: 16px;}
 .isi-footer{background-color: #85006c0d;padding: 20px;}
 
 .isi-inner{padding-bottom: 0;}
 .isi-footer-inner{padding-top: 0;}
 .isi-section .container{
    padding: 0 !important;
}
    .site-footer{padding-top: 16px;}
}

@media (max-width: 991.98px) {
    .br-mb{display: block !important;}
    .hero-section br{
        display: none;
    }
    .sitemap-list:first-child{margin-bottom: 0 !important;}
    .isi-section{padding: 0 20px;}
    .mobile-toggle { 
        background-color: #002833; 
        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; 
    }
    .isi-header h2{font-size: 16px;}
    .isi-tray.fixed-bottom-state{        bottom: -83px;}
    
    .mobile-menu-dropdown { 
        display: none; 
        position: absolute; 
        top: 100%; 
        left: 0; 
        padding: 0 22px;
        width: 100%; 
        background: var(--menu-bg, none);
        z-index: 1005; 
        max-height: calc(100vh - 75px); 
        overflow-y: auto; 
        box-shadow: 0 10px 20px rgba(0,0,0,0.5); 
    }
    .resources-desc{font-size: 14px;}
    #caregiver_broucher_mob{padding-bottom: 12% !important;}
    .mobile-menu-dropdown.show { display: block; }
    
    .mobile-accordion-item {         border-top: 2px solid rgb(88 99 100 / 20%);        border-bottom: 2px solid rgb(5 5 5 / 20%); }
  .mobile-accordion-item.active .mobile-accordion-btn span a{color: #c0d630;}
    
    .mobile-accordion-btn { 
        width: 100%; 
        background: none; 
        border: none; 
        padding: 20px 25px; 
        color: #fff; 
        font-size: 22px; 
        font-weight: 600; 
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left; 
        cursor: pointer; 
        transition: background-color 0.3s;
    } 
    .mobile-accordion-btn a{color: #fff;}
    /* .mobile-accordion-item.active span{
        color: var(--brand-light-green);
    } */

    
    .mobile-accordion-btn .chevron-circle { 
        width: 44px; 
        height:44px; 
        border: 1px solid #ffffff1a; 
        color: #ffffff;
        border-radius: 50%; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        font-size: 12px; 
        transition: transform 0.3s ease, border-color 0.3s, color 0.3s; 
        flex-shrink: 0;
        margin-left: 15px;
        background-color: #0129364d;
        font-size: 17px;
    }
    #asl-storelocator.asl-cont{padding-left: 0 !important;}
    #asl-storelocator.asl-cont .sl-main-cont .asl-panel{padding-left: 18px !important;}
    .modal-dialog-custom{max-width: 86%;margin: 0 auto;}
    /* When expanded, chevron points up and colors transition slightly */
    .mobile-accordion-btn.expanded .chevron-circle { 
        transform: rotate(180deg); 
        border-color: #d1f055;
        color: #d1f055;
    }
    
    .mobile-sub-menu { 
        display: none; 
  
        padding: 0; 
        margin: 0; 
        list-style: none; 
    }
    .mobile-sub-menu.show { display: block; }
    
    .mobile-sub-item { border-bottom: 1px solid rgba(255,255,255,0.05); }
    .mobile-sub-item:last-child { border-bottom: none; }
    
    .mobile-sub-link { 
        display: flex;
        justify-content: space-between;
        align-items: center;
      padding: 8px 25px 8px 25px;
        color: white; 
        text-decoration: none;
        font-size: 18px; 
        font-weight: 500;
    }
    
    .mobile-sub-link:hover { color: #d1f055; }

    /* The green circle arrow for sub-menu items */
    .mobile-sub-link .sub-chevron-circle {
        width: 32px;
        height: 32px;
        color: #ffffff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        flex-shrink: 0;
        margin-left: 15px;
        background-color: #0129364d;
    }

    /* Footer styling */
    .mobile-footer-area { padding: 40px 25px 80px; text-align: center; }
    
    .mobile-social-row { display: flex; justify-content: center; gap: 20px; margin-bottom: 25px; }
    .mobile-social-row a { 
        color: #ffffff; 
        border: 1px solid #ffffff1a;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        text-decoration: none;
                font-size: 16px;
                background-color: #0129364d;
    }
    

    .us-flag{
            border: 4px solid #011d26;
            border-radius: 50%;
                    width: 32px;
        height: 32px;
    
    }
    .mobile-us-flag { color: white; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 35px; }
    
    .mobile-yellow-links { display: flex; flex-direction: column; gap: 15px; margin-bottom: 35px; }
    .mobile-yellow-links a { color: #d1f055; font-weight: 600; font-size: 14px; text-decoration: underline; }
    
    .mobile-cyan-links { display: flex; flex-direction: column; gap: 15px; margin-bottom: 40px; }
    .mobile-cyan-links a { color: #ffffff; font-size: 13px; text-decoration: underline; font-weight: 500;        display: block;
        padding: 10px 0; }
    .mobile-cyan-links ul{padding-left: 0;list-style: none;}
    .mobile-brand-footer{text-align: left;}
    
    .mobile-brand-footer p {
        color: #ffffff;
        font-size: 11px;
        line-height: 1.5;
      text-align: left;
    }
}

@media (max-width: 991px) {
            .hero-section { margin-top: 0;background-image: url(../images/hero-portrait.XVa8-_ZU_19aK64.webp);background-position: top; min-height: 540px;padding-bottom: 10px;}
            .hero-title { font-size: 32px; }
            .hero-overlay { width: 100%; background: rgba(0,0,0,0.5); }
            .hero-content { max-width: 100%; padding-left: 0; padding-top: 62%;width:95%;}
            header{    border-bottom: 3px solid #003e53;}
            .sl-main-row{display: flex !important;flex-direction: column !important;}
            #asl-panel{order: 2 !important;}
        
            .hero-idrfmc{background-image: url(../images/hero-portrait.CB9resax_Z1cABDC.webp);}
            .hero-footnote { margin-top: 50px; }
            .hero-wtk{background-image: url(../images/hero-portrait.BnLnN47-_ZBREuI.webp);}
            .hero-wtk .hero-content{padding-top: 65%;}
            .hero-adrfmc{background-image: url(../images/hero-portrait.GLBICEZm_1tgPOO.webp);}
            .actor-portrayal { right: 20px; bottom: 10px; }
            .webinar-section { padding: 50px 0; }
            .webinar-text-content { padding-left: 0;  margin-top: 30px; }
            .collage-container { margin-bottom: 20px; }
            .img-front-main { right: auto; left: 50%; transform: translate(-50%, -50%); }
            .img-back-top {         left: 19%;
        width: 125px;
        height: 125px; }
            .img-back-bottom { left: 6%; }
            .footer-links-nav { justify-content: flex-start; margin-top: 30px; margin-bottom: 30px; }
            .footer-legal-text { max-width: 100%; }
            .footer-column-reverse { display: flex; flex-direction: column-reverse; }
            .cc-styled-card{padding-bottom: 43%;}
            .info-block.cc-styled-card{padding-left: 0;padding-right: 0;padding-bottom: 5%;}
            .wtk-carousel{flex-wrap: nowrap;padding-top: 60px;}
            .wtk-carousel .home-card{width: auto;flex: 0 0 100%;flex-wrap: wrap;position: relative;padding-top: 120px;padding-bottom: 80px;}
            .wtk-carousel .home-icon-wrap{
                    position: absolute;
                    background-color: #fff;
    top: -50px;
    left: 50%;
    transform: translate(-50%, 0);
            }
            .flower-card .luke-image-wrap{
        width: 65%;
        left: 50%;
        transform: translate(-50%, 0);
            }
            .news-card .luke-image-wrap{width: 100%;}
            .card-financing .btn-lime{border-radius: 16px;text-align: left !important;}
        .hero-subtitle{font-size: 14px;}
            .journey-section { padding: 40px 0; overflow: hidden; }
        .flower-card .luke-image-wrap{height: auto;}
            .journey-header h2 { font-size: 26px; }
            
            /* Hide desktop arrows */
            .step-arrow { display: none; }
            
            /* Show mobile elements */
            .mobile-nav-btn { display: flex; }
            .mobile-nav-btn.prev { left: 10px; }
            .mobile-nav-btn.next { right: 10px; }
            .carousel-dots { display: flex; }

            /* Refactor board into a swipeable carousel */
            .journey-board {
                padding: 0;
                border: none;
                border-radius: 0;
            }
            .journey-track {
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                gap: 0; /* Remove gap so exactly 100% fits */
                padding: 10px 0 20px 0; 
                justify-content: flex-start;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none; 
            }
            .journey-track::-webkit-scrollbar {
                display: none; 
            }
            .journey-step {
                flex: 0 0 100%; /* Force exactly 100% width to prevent peeking */
                width: 100%;
                max-width: 100%;
                scroll-snap-align: center;
                padding: 24px 50px 44px 50px; /* Internal horizontal padding */
                box-sizing: border-box;
            }
        
            .luke-layout, .webinar-layout {
                flex-direction: column;
                gap: 24px;
            }
            .luke-layout{padding-right: 0;padding-bottom: 78%;}
            .luke-btn-pos {
                position: static;
                margin-top: 16px;
                display: flex;
                justify-content: flex-end;
            }
            .luke-image-wrap {
                width: 100%;
            }
            .info-block .cc-cutout{
                width: 82px;
            }
            .checklist-grid {
                grid-template-columns: 1fr;
            }

            /* Enable Mobile Carousel */
            .home-carousel-wrapper {
                position: relative;
               
            }
            .home-carousel-track {
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                gap: 16px;
                padding-bottom: 10px;
                scrollbar-width: none; /* Hide scrollbar Firefox */
            }
            .home-carousel-track::-webkit-scrollbar { display: none; } /* Hide Chrome */
            
            .home-card {
                flex: 0 0 100%;
                scroll-snap-align: center;
                min-height: 180px;
            }

            /* Mobile Carousel Controls */
            .home-nav-btn {
                display: flex;
                position: absolute;
                top: calc(50% - 5px); /* Adjust for padding bottom */
                transform: translateY(-50%);
                width: 32px;
                height: 32px;
                border-radius: 50%;
                background-color: white;
                color: var(--brand-teal);
                border: 1px solid var(--border-light);
                z-index: 10;
                cursor: pointer;
                align-items: center;
                justify-content: center;
                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            }
            .home-nav-btn.prev {         left: -32px;
        top: 88px; }
            .home-nav-btn.next {         right: -35px;
        top: 88px; }
            .home-nav-btn:disabled { opacity: 1; cursor: default;background-color: #ebebeb; }

            .home-dots {
                display: flex;
                justify-content: center;
                gap: 10px;
                margin-top: 16px;
                        margin-top: -34px;
            }
            #why-danyelza-might-be-right-for-your-child .info-body{    padding-bottom: 60px;}
            .home-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: var(--border-light);
                border: none;
                padding: 0;
            }
            .home-dot.active {
                background-color: var(--brand-light-green);
            }
         .care-team-banner-wrapper{background-color: #a5d4ee;}
         .care-team-banner-wrapper .care-team-banner{border-radius: 0;border: 0;}
      
            .financing-content,
            .community-content,
            .resources-content {
                flex-direction: column;
                gap: 20px;
            }
            .info-card-body {
                padding: 30px 20px;
            }
            .mock-connect-logo {
                padding: 20px;
            }
            .community-graphic, .resources-graphic {
                justify-content: center;
                margin-bottom: 40px;
            }
            .pos-bottom-right {
                position: static;
                display: flex;
                justify-content: flex-end;
                width: 100%;
                margin-top: -20px;
            }
            .btn-lime {
                font-size: 13px;
                padding: 10px 14px 10px 20px;
            }
            .btn-center-wrap .btn-lime {
                white-space: normal;
                text-align: center;
            }
        
            .video-card-body { flex-direction: column; padding: 20px; }
            .watch-btn-pos { position: static; margin-top: 15px; display: flex; justify-content: flex-end; }
            
            .cycles-container { flex-direction: column; gap: 30px; }
            .cycle-arrow i { transform: rotate(90deg); } /* Arrow points down */
            .response-defs { flex-direction: column; gap: 20px; }

            /* Transforms Desktop 2x2 Grid into Mobile Carousel */
            .se-carousel-wrapper { position: relative; margin: 0 -20px; padding: 0 45px; } /* Pull to edges, make room for arrows */
            .se-track {
                display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
                gap: 16px; padding: 10px 0 20px 0; scrollbar-width: none;
            }
            .se-track::-webkit-scrollbar { display: none; }
            .se-slide { flex: 0 0 100%; min-width: 100%; scroll-snap-align: center; }
            .se-card { min-height: 420px; } /* Uniform height for swiping */
            
            /* Mobile Navigation */
            .mobile-nav-btn, .home-nav-btn {
                display: flex; position: absolute;        top: calc(50% - 48px); transform: translateY(-50%);
                width: 40px; height: 40px; border-radius: 50%; background-color: var(--brand-light-green); color: #fff;
                border: 5px solid #fff; z-index: 10; cursor: pointer; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.1);font-size: 13px;
            }
            .mobile-nav-btn.next i{color: var(--brand-teal);}
            .wtk-carousel-wrapper .home-nav-btn{
right: 14px;
        bottom: 24px;
        top: auto;
            }
            .wtk-carousel-wrapper .home-nav-btn.prev{
                right: auto;
                left: 14px;
            }
            .wtk-carousel-wrapper .home-dots{
                position: absolute;
        bottom: 59px;
        left: 50%;
        transform: translate(-50%, 0);
            }
            .mobile-nav-btn.prev { left: 5px; }
            .mobile-nav-btn.next { right: 5px; }
            .mobile-nav-btn:disabled { cursor: default; background-color: #f0ecec; }
.journey-carousel-wrapper{padding: 0 19px;}
            .carousel-dots { display: flex; justify-content: center; gap: 10px; margin-top: 10px; position: relative;margin-top: -50px;}
            .carousel-dot { width: 10px; height: 10px; border-radius: 50%; background-color: #c8c9c9; border: none; padding: 0; }
            .carousel-dot.active { background-color: var(--brand-light-green); }

            /* Grids to single column */
            .premeds-grid { grid-template-columns: 1fr; }
            .support-grid { grid-template-columns: 1fr; }
            .glossary-grid { grid-template-columns: 1fr; }

            .care-team-banner { flex-direction: column; }
            .care-text-wrap { padding: 30px 20px; }
            .care-text-wrap .btn-lime { margin: 0 auto; }

            .social-banner { flex-direction: column; text-align: center; gap: 20px; padding: 50px 40px; }
            .social-banner h3{margin-bottom: 30px;}
          
        
}

@media (max-width: 768px) {
            .curie-box {
                flex-direction: column;
                border-radius: 30px; /* Switch from pill to rounded box */
                padding: 30px 20px;
                text-align: left;
                align-items: flex-start;
                gap: 20px;
            }
            .info-header, .luke-desc, .sitemap-list a, .check-text, .webinar-list li, .card-desc, .response-defs p, .support-card p, .glossary-item p, .glossary-item h4{
                font-size: 14px;
            }
            .support-card{    padding: 50px 20px 40px 20px;}
            .glossary-item{margin-bottom: 20px;}
            .info-body{padding: 20px;}
            .support-card h4{font-size: 16px;}
            #erin-opens-up .luke-layout{padding-bottom: 58%;}
            .luke-title, .webinar-title, .card-title{font-size: 20px;}

            .curie-graphic-circle {
                align-self: center; /* Keep circle centered at the top */
                width: 120px;
                height: 120px;
            }

            .curie-graphic-svg {
                width: 65px;
            }

            .curie-btn {
                width: 100%;
                white-space: normal; /* Allow text to wrap to multiple lines */
                text-align: left;
                line-height: 1.3;
                padding: 19px 20px;
                border-radius: 15px;
                font-size: 13px;
            }
            
            .curie-btn span:first-child {
                flex: 1;
                padding-right: 15px;
            }
            .footer-links-nav a{text-align: center;display: block;width: 100%;}
.footer-links-nav{border-bottom: 1px solid #cfd0d0;padding-bottom: 30px;}
            
       .infusionImg .mobileImg {
    width: 254px;        margin: 0 auto;
}
 .infusionImg {
    /* align-items: center; */
    /* aspect-ratio: 16 / 10; */
    background: none;
    border-radius: 0;
    box-shadow: none;
    /* display: flex; */
    justify-content: center;
    margin-inline: auto 0;
    /* padding-inline: 3rem; */
    width: 100%;
    padding: 0;
}
}

@media (max-width: 576px) {
            .text-teal-heading, .text-magenta-heading { font-size: 24px; }
            .collage-container { height: 280px; }
            .img-front-main {       width: 214px;
        height: 170px;
               left: 67%;
        top: 50%;}
            .footer-links-nav li { width: 100%; margin-bottom: 15px; }
            .footer-links-nav li:not(:last-child)::after { display: none; }
            .footer-logo-container { margin-top: 20px; }
            .img-back-top{ 
       width: 125px;
    height: 125px;
    top: -25px;
    left: 14%;
    border-radius: 35px;
    opacity: 0.40;
    z-index: 1;
    filter: grayscale(10%);
        
}
.img-back-bottom {
    width: 170px;
    height: 130px;
    bottom: 11px;
    left: 5%;
    border-radius: 35px;
    opacity: 0.4;
    z-index: 2;
}
}

        @media (max-width: 426px) {
    .isi-tray.fixed-bottom-state {
        bottom: -362px;
        padding: 0 19px;
    }
.se-slide {
    height: 100%;
    background-color: white;
    border-radius: 12px;
    padding: 20px;
}
    .se-card {
        min-height: 420px;
        display: block;
    }
    .se-card h4 {
    margin-top: 20px;
}
.infusionImg {
    /* align-items: center; */
    /* aspect-ratio: 16 / 10; */
    background: none;
    border-radius: 0;
    box-shadow: none;
    /* display: flex; */
    justify-content: center;
    margin-inline: auto 0;
    /* padding-inline: 3rem; */
    width: 100%;
    padding: 0;
}

.infusionImg .mobileImg {
    width: 254px;        margin: 0 auto;
}

.info-body {
    padding: 20px;
    position: relative;
}
.support-card {
    border-radius: 12px;
    padding: 44px 25px 25px 25px;
}
    .social-banner img {
           height: 280px;
        left: 0;
        top: 0;
        position: absolute;
        width: auto;
}
}