/* Overlay box that sits over the carousel images */
        .carousel-with-overlay{ position: relative; }
        .carousel-overlay{
            position: absolute;
            bottom: 12px; /* align to bottom of the carousel image */
            right: 12px; /* fixed px offset so overlay stays left of image edge */
            width: 320px; /* fixed width for consistent visual layout */
            max-width: 360px;
            min-width: 220px;
            z-index: 10;
            pointer-events: auto;
        }
            .overlay-stack{ display:flex; flex-direction:column; gap:12px; align-items:flex-end; }
            .overlay-stack .card{ width:100%; min-width: auto; max-width: none; border-radius:10px; overflow:hidden; }
            .overlay-stack .card.small{ min-width:140px; max-width:220px; }
            /* ensure stacked cards go full-width under carousel on mobile */
            @media (max-width: 991px){
                .overlay-stack .card{ width:100% !important; min-width: auto !important; max-width: none !important; }
            }
        /* Use site house-style classes on the overlay content (see markup below)
           Keep visual tweaks here so card stays translucent and fits theme */
        .carousel-overlay .card{
            background: rgba(255,255,255,0.85);
            border: none;
            box-shadow: 0 14px 40px rgba(0,0,0,0.16);
            transition: transform .18s ease, box-shadow .18s ease;
        }
        .carousel-overlay .card:hover{ transform: translateY(-1px); box-shadow: 0 20px 50px rgba(0,0,0,0.22); }
        .carousel-overlay .card-body{ padding: 14px 18px; }
        .carousel-overlay .card-title{ margin-bottom:6px; font-size:14px; }

        /* Header row inside overlay */
        .carousel-overlay .card-body.text-center{ padding: 18px 16px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)); }
        .carousel-overlay .card-body .text-muted.small{ font-size:12px; color:rgba(0,0,0,0.45); margin-bottom:6px; }
        .carousel-overlay .card-body .font-weight-bold{ color:#e93074; font-size:18px; font-weight:800; letter-spacing:0.2px; margin-bottom:10px; }

        /* Included items list styling (icons + text) */
        .carousel-overlay p.mb-0{ display:flex; align-items:center; gap:10px; margin:6px 0; color:#222; font-size:15px; padding-left:0; }
        .carousel-overlay p.mb-0 .fa{ font-size:16px; color:#e93074; width:20px; text-align:center; margin-right:8px; margin-left:0; }

        /* Slightly smaller explanatory paragraph variant inside overlay */
        .carousel-overlay p.overlay-small{ font-size:13px; color:#000000; line-height:1.45; }

        /* Strong CTA button inside overlay — conversion focused */
        .carousel-overlay .btn{ display:block; width:100%; padding:12px 16px; font-size:16px; font-weight:700; border-radius:8px; }
        .carousel-overlay .btn.btn-primary{ background: linear-gradient(180deg,#ff2d77,#e93074); border: none; color:#fff; box-shadow: 0 8px 20px rgba(233,48,116,0.18); }
        .carousel-overlay .btn.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 36px rgba(233,48,116,0.22); }
        @media (max-width: 991px){
            /* On smaller screens make the overlay a normal block under the carousel */
            .carousel-with-overlay{ display: block; }
            .carousel-with-overlay > #carouselExampleControls{ width: 100%; }
            .carousel-overlay{
                position: static !important;
                right: auto !important;
                top: auto !important;
                width: 100% !important;
                max-width: none !important;
                margin: 12px 0 0 0 !important;
                background: rgba(255,255,255,0.98) !important;
                box-shadow: none !important;
                padding: 0 !important;
                border-radius: 8px !important;
                z-index: auto !important;
                display: block !important;
            }
            .carousel-overlay .card{ box-shadow: none !important; border-radius:6px !important; }
            .carousel-overlay .btn{ width:100% !important; }
        }
/* Logo overlay in top-left corner — same margins as the bottom-right overlay */
.carousel-logo{
    position: absolute;
    top: 24px; /* same vertical offset as carousel-overlay's bottom */
    left: 20px; /* same horizontal offset as carousel-overlay's right */
    z-index: 12; /* sit above overlay (overlay is z-index:10) */
    width: 120px;
    max-width: 210px;
    background: rgba(0,0,0,0.15); /* black translucent background */
    padding: 7px;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.carousel-logo img{ display:block; width:100%; height:auto; }
.carousel-logo:hover,
.carousel-logo:focus{
    transform: translateY(-4px);
    background: rgba(0,0,0,0.05);
    box-shadow: 0 10px 24px rgba(0,0,0,0.05);
    cursor: pointer;
}

@media (max-width: 991px){
    /* On small screens let the logo flow with the page like the overlay */
    .carousel-logo{
        display: none !important;
    }
}
/* Override carousel control icons to site main color (#e93074) */
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23e93074' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23e93074' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

/* Add a white translucent circular background behind the carousel arrows */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 44px !important;
    height: 44px !important;
    background-color: rgba(255,255,255,0.95) !important;
    border-radius: 50% !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    /* make the arrow itself smaller inside the circle */
    background-size: 40% 40% !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
}

/* Ensure the positioning remains centered in the control area */
.carousel-control-prev .carousel-control-prev-icon,
.carousel-control-next .carousel-control-next-icon{
    display: inline-block;
}

/* Position carousel controls outside the image so they don't overlap the overlay */
.carousel-with-overlay .carousel-control-prev,
.carousel-with-overlay .carousel-control-next{
    width: 44px !important; /* narrow clickable area matching the circular icon */
    top: 50% !important;
    transform: translateY(-50%) !important;
    -webkit-transform: translateY(-50%) !important;
    z-index: 11 !important; /* above overlay (overlay is z-index:10) */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    opacity: 1 !important;
}

.carousel-with-overlay .carousel-control-prev{ left: -55px !important; }
.carousel-with-overlay .carousel-control-next{ right: -55px !important; }

/* On small screens restore the default wide control areas so touch targets stay large */
@media (max-width: 991px){
    .carousel-with-overlay .carousel-control-prev,
    .carousel-with-overlay .carousel-control-next{
        width: 15% !important;
        /* keep controls vertically centered on the image */
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    /* Place controls at the left and right edges respectively on small screens */
    .carousel-with-overlay .carousel-control-prev{ left: 0 !important; }
    .carousel-with-overlay .carousel-control-next{ right: 0 !important; }
}
/* Benefit choice menu used inside the overlay (compact, simple, tighter) */
.benefit-menu{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-start; align-items:flex-start; margin:6px 0 0 0; }
.benefit-item{ appearance:none; -webkit-appearance:none; border:1px solid rgba(0,0,0,0.08); background:#fff; color:#222; padding:6px 10px; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; transition:background .12s ease, color .12s ease, transform .12s ease; box-shadow: none; }
.benefit-item:hover{ transform: none; background:#fafafa; }
.benefit-item:focus{ outline: none; box-shadow: 0 0 0 3px rgba(233,48,116,0.06); }
.benefit-item.active{ background:#e93074; color:#fff; border-color: transparent; box-shadow: none; }
@media (max-width: 575px){ .benefit-item{ padding:6px 9px; font-size:12px; } }
.background-light-pink {
    background-color: rgba(255,214,230,0.7);
}

/* Full-screen benefit modal (simple, high z-index, subtle slide-down) */
.benefit-modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,0.48); display:none; align-items:center; justify-content:center; z-index:2147483000; padding:40px 20px; }
.benefit-modal-backdrop.open{ display:flex; }
.benefit-modal{ width:100%; max-width:720px; background:#fff; border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,0.45); transform: translateY(-8px); opacity:0; animation:benefitModalIn .22s ease forwards; overflow:auto; max-height:80vh; }
.benefit-modal .modal-header{ padding:14px 18px; border-bottom:1px solid rgba(0,0,0,0.06); display:flex; align-items:center; justify-content:space-between; }
.benefit-modal .modal-title{ font-size:18px; font-weight:800; color:#e93074; }
.benefit-modal .modal-close{ background:transparent; border:none; font-size:20px; cursor:pointer; color:#666; }
.benefit-modal .modal-body{ padding:18px; color:#444; line-height:1.5; font-size:15px; text-align:left; }
.benefit-modal .modal-body ul{ list-style-type:disc; list-style-position:outside; margin:12px 0 0 18px; padding-left:0; }
.benefit-modal .modal-body ul li{ margin-bottom:8px; }
.benefit-modal .modal-footer{ padding:12px 18px; border-top:1px solid rgba(0,0,0,0.04); text-align:right; }
.benefit-modal .btn-close-secondary{ background:#f5f5f5; border:1px solid rgba(0,0,0,0.06); color:#333; padding:8px 12px; border-radius:6px; cursor:pointer; }

@keyframes benefitModalIn{
    from{ transform: translateY(-8px); opacity:0; }
    to{ transform: translateY(0); opacity:1; }
}

@media (max-width: 575px){
    .benefit-modal-backdrop{ align-items:flex-end; padding:12px; }
    .benefit-modal{ border-radius:12px 12px 0 0; width:100%; max-width:100%; }
}

/* Accessibility: focus styles for modal close/ok buttons
   Use :focus-visible so keyboard users see a subtle ring; mouse focus remains clean. */
.benefit-modal .modal-close,
.benefit-modal .btn-close-secondary {
    outline: none;
}
.benefit-modal .modal-close:focus-visible,
.benefit-modal .btn-close-secondary:focus-visible {
    outline: 2px solid rgba(233,48,116,0.18);
    box-shadow: 0 0 0 4px rgba(233,48,116,0.06);
    border-radius: 6px;
}

/* Fallback for browsers without :focus-visible support: keep visual quiet on mouse click */
@supports not (selector(:focus-visible)) {
    .benefit-modal .modal-close:focus,
    .benefit-modal .btn-close-secondary:focus {
        outline: none;
        box-shadow: none;
    }
}

/* Override nav hover background - remove grey background on menu items */
.nav li > a:hover,
.nav-li > a:focus {
    background-color: transparent !important;
}