/* =========================================================
   Hope Hero Carousel — v1.6.0
   - SVG/PNG notch sits centered at slider bottom, half above
     (overlapping the slider) and half below (submerging into
     the page background)
   - Inter typeface forced to match the reference design
   - SVG icons (heart, arrows) baked into pseudo-elements
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

.hope-carousel-widget,
.hope-carousel-widget * {
    box-sizing: border-box;
}

.hope-carousel-widget {
    /* === Core tokens (overridable from Elementor controls) === */
    --hope-height: 487px;

    --hope-overlay-start: rgba(0, 80, 170, 0.78);
    --hope-overlay-middle: rgba(0, 90, 175, 0.55);
    --hope-overlay-end: rgba(0, 0, 0, 0.45);

    /* Notch geometry
       The supplied asset has an aspect ratio of 915:148 (~6.18:1).
       --hope-notch-width drives both width AND height (via the
       aspect ratio), so the curves always remain proportional.
       The notch is positioned so its vertical center sits exactly
       on the slider's bottom edge: top half overlaps the blue
       slider, bottom half submerges into the white page. */
    --hope-notch-bg: #ffffff;
    --hope-notch-width: 460px;
    --hope-notch-aspect: calc(915 / 148);
    --hope-notch-content-offset: 0px;

    --hope-thumb-size: 22px;
    --hope-active-thumb-size: 28px;

    /* Typography — locked to Inter so the design matches regardless of theme */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    position: relative;
    width: 100%;
    max-width: 100%;
    padding-bottom: 0 !important;
    isolation: isolate;
}

/* ===================== Main slider ===================== */

.hope-main-slider {
    width: 100%;
    height: var(--hope-height);
    min-height: var(--hope-height);
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    display: block;
    z-index: 1;
    background: #0f2944;
}

.hope-main-slider.swiper {
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    list-style: none;
    padding: 0;
}

.hope-main-slider .swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: var(--hope-height);
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box;
}

.hope-main-slider .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    min-height: var(--hope-height);
    position: relative;
    transition-property: transform, opacity;
    display: block;
    overflow: hidden;
}

.hope-main-slider.swiper-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity;
}

.hope-main-slider.swiper-fade .swiper-slide-active,
.hope-main-slider.swiper-fade .swiper-slide-active .hope-content {
    pointer-events: auto;
}

.hope-slide {
    position: relative;
    background: #0f2944;
}

.hope-bg-img {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-height: 100% !important;
    object-fit: cover;
    object-position: center center;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 0;
}

.hope-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            var(--hope-overlay-start) 0%,
            var(--hope-overlay-middle) 38%,
            var(--hope-overlay-end) 100%);
    z-index: 1;
    pointer-events: none;
}

/* ===================== Content ===================== */

.hope-content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 110px 24px 30px 56px;
    max-width: 520px;
    font-family: inherit;
}

/* Eyebrow with proper SVG heart */
.hope-eyebrow {
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 18px;
    opacity: 0.95;
    display: flex;
    align-items: center;
    gap: 9px;
    letter-spacing: 0.1px;
}

.hope-eyebrow .hope-heart {
    display: inline-block;
    width: 15px;
    height: 14px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAlCAYAAAAwYKuzAAABCGlDQ1BJQ0MgUHJvZmlsZQAAeJxjYGA8wQAELAYMDLl5JUVB7k4KEZFRCuwPGBiBEAwSk4sLGHADoKpv1yBqL+viUYcLcKakFicD6Q9ArFIEtBxopAiQLZIOYWuA2EkQtg2IXV5SUAJkB4DYRSFBzkB2CpCtkY7ETkJiJxcUgdT3ANk2uTmlyQh3M/Ck5oUGA2kOIJZhKGYIYnBncAL5H6IkfxEDg8VXBgbmCQixpJkMDNtbGRgkbiHEVBYwMPC3MDBsO48QQ4RJQWJRIliIBYiZ0tIYGD4tZ2DgjWRgEL7AwMAVDQsIHG5TALvNnSEfCNMZchhSgSKeDHkMyQx6QJYRgwGDIYMZAKbWPz9HbOBQAAAA5ElEQVR4nO2YQRbDIAhEwfvfmW6axDaCIKgsnK1x+A8wmCAIIiLi1hARpb1RPs1FydASJMKneE25PVE+pffAiHmUD0BVYo/pDF3lLgD54AAeplcPZhNmzF6t9Bk8gF4dQK8OoFf5AS33utVCRMyfQQDb7XiVfm4zmXUDZspizVK4hV36Z3iVeCek6qNpl7jENAEzlPoSm8GVkFIsscQrIHsxuj04E1LjrTokMyC1nupTHAlp8TK9ZiIgrR7DAaP+gPU0/KK2BPRk3jVJNIG9beEedRJARM+GzOIWSKZxeYu+ivT8ADWhTJAFDjfWAAAAAElFTkSuQmCC");
            mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAlCAYAAAAwYKuzAAABCGlDQ1BJQ0MgUHJvZmlsZQAAeJxjYGA8wQAELAYMDLl5JUVB7k4KEZFRCuwPGBiBEAwSk4sLGHADoKpv1yBqL+viUYcLcKakFicD6Q9ArFIEtBxopAiQLZIOYWuA2EkQtg2IXV5SUAJkB4DYRSFBzkB2CpCtkY7ETkJiJxcUgdT3ANk2uTmlyQh3M/Ck5oUGA2kOIJZhKGYIYnBncAL5H6IkfxEDg8VXBgbmCQixpJkMDNtbGRgkbiHEVBYwMPC3MDBsO48QQ4RJQWJRIliIBYiZ0tIYGD4tZ2DgjWRgEL7AwMAVDQsIHG5TALvNnSEfCNMZchhSgSKeDHkMyQx6QJYRgwGDIYMZAKbWPz9HbOBQAAAA5ElEQVR4nO2YQRbDIAhEwfvfmW6axDaCIKgsnK1x+A8wmCAIIiLi1hARpb1RPs1FydASJMKneE25PVE+pffAiHmUD0BVYo/pDF3lLgD54AAeplcPZhNmzF6t9Bk8gF4dQK8OoFf5AS33utVCRMyfQQDb7XiVfm4zmXUDZspizVK4hV36Z3iVeCek6qNpl7jENAEzlPoSm8GVkFIsscQrIHsxuj04E1LjrTokMyC1nupTHAlp8TK9ZiIgrR7DAaP+gPU0/KK2BPRk3jVJNIG9beEedRJARM+GzOIWSKZxeYu+ivT8ADWhTJAFDjfWAAAAAElFTkSuQmCC");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center center;
            mask-position: center center;
    -webkit-mask-size: contain;
            mask-size: contain;
}

/* Heading */
.hope-content h2 {
    color: #fff;
    font-family: inherit;
    font-size: 52px;
    line-height: 1.05;
    font-weight: 700;
    margin: 0 0 18px;
    letter-spacing: -1.2px;
}

/* Description */
.hope-content p {
    color: rgba(255, 255, 255, 0.85);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 400;
    margin: 0 0 28px;
    max-width: 360px;
    letter-spacing: 0.1px;
}

/* ===================== Buttons ===================== */

.hope-buttons {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.hope-btn,
.hope-btn:hover,
.hope-btn:focus {
    min-width: 130px;
    height: 40px;
    padding: 0 22px;
    border-radius: 40px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    transition:
        transform .2s ease,
        opacity .2s ease,
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
    cursor: pointer;
    letter-spacing: 0.2px;
}

.hope-btn:hover {
    transform: translateY(-1px);
}

.hope-btn.primary {
    background: #fff;
    color: #0074d9;
    border: 1px solid transparent;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.hope-btn.primary:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

.hope-btn.secondary {
    border: 1px solid rgba(255, 255, 255, 0.85);
    color: #fff;
    background: transparent;
}

.hope-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* =========================================================
   The Bottom Notch
   ---------------------------------------------------------
   The notch is a fixed-aspect-ratio block (width drives
   height). It's centered horizontally on the slider's
   bottom edge, with its VERTICAL CENTER sitting exactly on
   that edge — so the top half overlaps the slider (creating
   the inverse curves at the corners), and the bottom half
   sinks into the page background (invisible because it's
   the same colour).
   ========================================================= */

.hope-bottom-nav {
    position: absolute;
    left: 50%;
    bottom: 0;
    /* Centre horizontally AND shift down so the notch sits slightly
       below the slider edge (56% feels balanced; bumped from the
       geometric 50% so the shelf reads as more grounded in the page). */
    transform: translate(-50%, 56%);
    z-index: 5;
    width: var(--hope-notch-width);
    aspect-ratio: var(--hope-notch-aspect);
    background: transparent !important;
    display: block;
    pointer-events: none;
    overflow: visible;
}

/* The masked colored shape itself. */
.hope-bottom-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--hope-notch-bg);
    -webkit-mask-image: url("data:image/png;base64,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");
            mask-image: url("data:image/png;base64,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");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center center;
            mask-position: center center;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    pointer-events: none;
}

/* Thumbnails + arrows row.
   Placed at vertical center of the notch (which is the
   slider's bottom edge), so they sit on the flat shelf. */
.hope-bottom-nav-content {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    transform: translate(-50%, calc(-50% + var(--hope-notch-content-offset)));
    pointer-events: auto;
}

/* ===================== Arrows (SVG via mask) ===================== */

.hope-arrow {
    appearance: none;
    -webkit-appearance: none;
    border: 0 !important;
    background: transparent !important;
    color: #0074d9;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    width: 24px;
    height: 24px;
    min-width: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: none !important;
    transition: opacity .15s ease, transform .15s ease;
    font-size: 0;
    line-height: 0;
}

.hope-arrow::before {
    content: "";
    width: 20px;
    height: 14px;
    background: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}

.hope-arrow.hope-prev::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><line x1='19' y1='7' x2='1' y2='7'/><polyline points='7,1 1,7 7,13'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><line x1='19' y1='7' x2='1' y2='7'/><polyline points='7,1 1,7 7,13'/></svg>");
}

.hope-arrow.hope-next::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><line x1='1' y1='7' x2='19' y2='7'/><polyline points='13,1 19,7 13,13'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><line x1='1' y1='7' x2='19' y2='7'/><polyline points='13,1 19,7 13,13'/></svg>");
}

.hope-arrow:hover,
.hope-arrow:focus {
    color: #0074d9;
    background: transparent !important;
    outline: none;
    opacity: 0.7;
}

/* ===================== Thumbnails ===================== */

.hope-thumbs {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.hope-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: var(--hope-thumb-size);
    height: var(--hope-thumb-size);
    min-width: var(--hope-thumb-size);
    padding: 0 !important;
    border-radius: 50%;
    border: 0 !important;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.9;
    background: transparent !important;
    box-shadow: none !important;
    transition:
        width .2s ease,
        height .2s ease,
        min-width .2s ease,
        opacity .2s ease,
        border-color .2s ease;
}

.hope-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block !important;
    max-width: none !important;
    border-radius: 50%;
}

.hope-thumb.active {
    width: var(--hope-active-thumb-size);
    height: var(--hope-active-thumb-size);
    min-width: var(--hope-active-thumb-size);
    border: 2px solid #0074d9 !important;
    opacity: 1;
}

/* Screen-reader-only helper for accessible button labels */
.hope-arrow .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===================== Responsive ===================== */

@media (max-width: 991px) {
    .hope-carousel-widget {
        --hope-height: 460px;
        --hope-notch-width: 400px;
    }

    .hope-content h2 {
        font-size: 44px;
    }
}

@media (max-width: 767px) {
    .hope-carousel-widget {
        --hope-height: 520px;
        --hope-notch-width: 320px;
    }

    .hope-content {
        padding: 80px 24px 30px 28px;
        max-width: 100%;
    }

    .hope-content h2 {
        font-size: 36px;
        letter-spacing: -0.6px;
    }

    .hope-content p {
        font-size: 13px;
    }

    .hope-btn {
        min-width: 116px;
        height: 36px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .hope-carousel-widget {
        --hope-notch-width: 280px;
    }

    .hope-content h2 {
        font-size: 30px;
    }
}

/* =========================================================
   Right-side embed panel (dynamic — any embed code)
   ========================================================= */

.hope-form {
    position: absolute;
    top: 50%;
    right: 32px;
    transform: translateY(-50%);
    width: 380px;
    max-width: 42%;
    height: 420px;
    z-index: 4;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    pointer-events: auto;
    transition: height .3s ease;
}

/* Make any embed content (iframe, div, form, etc.) fill the panel */
.hope-form > iframe,
.hope-form > div,
.hope-form > form {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    margin: 0;
    padding: 0;
}

.hope-form > iframe {
    background: #ffffff;
}

/* Per-slide embed slots: stacked, only the active one is visible.
   Each slot contains its own iframe/embed, so swapping slides swaps
   the visible form without re-loading the iframes. */
.hope-form-slot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease;
}

.hope-form-slot.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
}

.hope-form-slot > iframe,
.hope-form-slot > div,
.hope-form-slot > form {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #ffffff;
    margin: 0;
    padding: 0;
}

/* When the embed panel is present, narrow the slider copy so it doesn't sit under the panel */
@media (min-width: 992px) {
    .hope-carousel-widget:has(.hope-form) .hope-content {
        max-width: 50%;
    }
}

/* Tablet/mobile: form sits below the slider, centered.
   The notch stays attached to the slider's bottom edge — the form sits
   below the entire slider+notch combo with enough top margin to clear
   the notch's submerged half. */
@media (max-width: 991px) {
    .hope-carousel-widget .hope-form {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        transform: none;
        width: calc(100% - 32px);
        max-width: 480px;
        /* margin-top clears the notch (half its height sits below slider) */
        margin: 60px auto 20px;
        display: block;
    }

    /* When the embed panel is shown, undo the desktop content-narrowing
       so text uses the full slider width on mobile */
    .hope-carousel-widget:has(.hope-form) .hope-content {
        max-width: 100%;
    }
}