/* About page: background artwork + glass panels. Presentation only.
   Scoped with .page:has(.eb-about) so other HomeLayout pages are unaffected. */
.page:has(.eb-about) {
    position: relative;
    isolation: isolate;
    background-color: #071329 !important;
}

.page:has(.eb-about)::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(7, 19, 41, 0.15) 0%, rgba(7, 19, 41, 0.55) 70%, rgba(7, 19, 41, 0.85) 100%),
        url('/Images/Navy%20Waves,%20Golden%20Light,%20Bright%20Futures.png') center top / cover no-repeat,
        #071329;
}

@media (max-width: 767.98px) {
    .page:has(.eb-about)::before {
        background:
            linear-gradient(180deg, rgba(7, 19, 41, 0.35) 0%, rgba(7, 19, 41, 0.75) 100%),
            url('/Images/Navy%20Waves,%20Golden%20Light,%20Bright%20Futures.png') 75% top / cover no-repeat,
            #071329;
    }
}

.page:has(.eb-about) .container-fluid,
.page:has(.eb-about) main,
.page:has(.eb-about) article.content,
.page:has(.eb-about) .top-row,
.page:has(.eb-about) .top-row .contact-info {
    background-color: transparent !important;
}

.page:has(.eb-about) .top-row {
    border-bottom: 0 !important;
}

.eb-about.about-container {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* content panels: frosted glass */
.eb-about .rz-card:not(.eb-about),
.eb-about .container-card .rz-card {
    background-color: rgba(7, 19, 41, 0.55) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 18px;
    box-shadow: none;
}

.page:has(.eb-about) {
    --eb-text: #ffffff;
    --eb-text-2: #c7d2e5;
    --eb-cyan: #5ddcff;
    --eb-yellow: #ffd400;
    --eb-border: rgba(255, 255, 255, 0.16);
    --eb-radius-sm: 12px;
    --eb-radius-lg: 24px;
    --eb-shadow: 0 18px 40px rgba(2, 8, 23, 0.45);
}

/* top bar: transparent, no outline (same as the home page) */
.page:has(.eb-about) .top-row {
    background-color: transparent !important;
    border: 0 !important;
}

/* ---------- Header / navigation (same as the home page) ---------- */
/* ---------- Header / navigation ---------- */
.page:has(.eb-about) .toolbar-wrapper {
    max-width: 1400px;
    margin: 4px auto 0;
    padding: 10px 8px;
    background: #020b1f;
    border: 1.5px solid #5ac8fa;
    border-radius: var(--eb-radius-lg);
    box-shadow: var(--eb-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    font-family: inherit;
}

.page:has(.eb-about) .toolbar-logo {
    height: 48px;
    border-radius: 10px;
}

.page:has(.eb-about) .toolbar-brand-text span {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.page:has(.eb-about) .toolbar-brand-text .gold {
    color: var(--eb-yellow);
}

.page:has(.eb-about) .toolbar-subtitle {
    color: var(--eb-text-2);
    font-size: 0.8rem;
}

.page:has(.eb-about) .toolbar-nav {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 0;
    white-space: nowrap;
}

/* keep the whole header on one line: icons only when there is plenty of room */
@media (min-width: 1200px) {
    .page:has(.eb-about) .toolbar-nav .nav-link .bi,
    .page:has(.eb-about) .toolbar-nav .nav-link svg,
    .page:has(.eb-about) .toolbar-nav .nav-link i {
        display: none;
    }

    .page:has(.eb-about) .toolbar-nav .nav-link {
        font-size: 0.85rem !important;
        padding: 0.45rem 0.55rem !important;
    }

    .page:has(.eb-about) .toolbar-brand-text span {
        font-size: 1.35rem;
    }

    .page:has(.eb-about) .toolbar-subtitle {
        font-size: 0.72rem;
    }

    .page:has(.eb-about) .toolbar-login-btn {
        margin-left: 0.5rem !important;
        margin-right: 0 !important;
        padding: 0.5rem 1.1rem;
    }
}

@media (min-width: 1500px) {
    .page:has(.eb-about) .toolbar-nav .nav-link .bi,
    .page:has(.eb-about) .toolbar-nav .nav-link svg,
    .page:has(.eb-about) .toolbar-nav .nav-link i {
        display: inline-block;
    }
}

.page:has(.eb-about) .toolbar-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 0.7rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--eb-text) !important;
    border-radius: var(--eb-radius-sm);
}

.page:has(.eb-about) .toolbar-nav .nav-link:hover,
.page:has(.eb-about) .toolbar-nav .nav-link:focus-visible,
.page:has(.eb-about) .toolbar-nav .nav-link.show {
    color: var(--eb-yellow) !important;
    background: rgba(255, 255, 255, 0.08);
    transform: none;
}

.page:has(.eb-about) .toolbar-nav .nav-link.disabled {
    opacity: 0.5;
}

.page:has(.eb-about) .toolbar-login-btn {
    background: linear-gradient(135deg, #ffe34d, var(--eb-yellow)) !important;
    border: 0;
    color: #071329 !important;
    font-family: inherit;
    font-weight: 700;
    min-height: 42px;
    padding: 0.55rem 1.4rem;
    border-radius: var(--eb-radius-sm);
    box-shadow: 0 6px 18px rgba(255, 212, 0, 0.28);
}

.page:has(.eb-about) .toolbar-login-btn:hover {
    color: #071329 !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(255, 212, 0, 0.42);
}

.page:has(.eb-about) .dropdown-menu {
    background: rgba(11, 27, 56, 0.97);
    color: var(--eb-text-2);
    border: 1px solid var(--eb-border);
    border-radius: var(--eb-radius-sm);
    box-shadow: var(--eb-shadow);
    padding: 6px;
}

.page:has(.eb-about) .dropdown-item {
    color: var(--eb-text-2);
    border-radius: 8px;
    padding: 0.5rem 0.9rem;
}

.page:has(.eb-about) .dropdown-item:hover,
.page:has(.eb-about) .dropdown-item:focus {
    background: rgba(23, 105, 255, 0.25);
}

.page:has(.eb-about) .navbar-toggler {
    border: 1px solid var(--eb-border);
    border-radius: var(--eb-radius-sm);
    padding: 0.4rem 0.6rem;
}

@media (max-width: 1199.98px) {
    .page:has(.eb-about) .navbar-toggler {
        display: block !important;
    }

    .page:has(.eb-about) .navbar-collapse:not(.show) {
        display: none !important;
    }

    .page:has(.eb-about) .navbar-collapse.show {
        display: block !important;
    }

    .page:has(.eb-about) .toolbar-nav {
        flex-direction: column;
    }

    .page:has(.eb-about) .navbar-collapse {
        margin-top: 10px;
        padding-top: 8px;
        border-top: 1px solid var(--eb-border);
    }

    .page:has(.eb-about) .toolbar-nav {
        justify-content: flex-start;
        text-align: left;
    }

    .page:has(.eb-about) .toolbar-nav .nav-link {
        padding: 0.75rem 0.6rem;
        min-height: 44px;
    }

    .page:has(.eb-about) .toolbar-nav .nav-item:last-child {
        padding: 8px 0 4px;
    }

    .page:has(.eb-about) .toolbar-login-btn {
        width: 100%;
        margin: 0 !important;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .page:has(.eb-about) .toolbar-nav {
        text-align: left;
    }
}


.page:has(.eb-about) .toolbar-wrapper {
    background: #020b1f !important;
    border: 1.5px solid #5ac8fa !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.page:has(.eb-about) .toolbar-wrapper::before {
    display: none;
}

/* ---------- Frosted white-glass cards, white outline, no glow (same as the home page) ---------- */
.eb-about .rz-card:not(.eb-about),
.eb-about .container-card .rz-card,
.eb-about .hotelbuddy-promo-card,
.eb-about .testimonial-card,
.eb-about .header-card,
.eb-about .module,
.page:has(.eb-about) .card.border-0.rounded-0 {
    background: rgba(255, 255, 255, 0.14) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1.5px solid #ffffff !important;
    box-shadow: none !important;
}

.eb-about .rz-card:not(.eb-about),
.eb-about .hotelbuddy-promo-card,
.eb-about .testimonial-card,
.eb-about .header-card,
.eb-about .module {
    border-radius: 18px;
}

.eb-about .hotelbuddy-promo-card:hover,
.eb-about .testimonial-card:hover,
.eb-about .module:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: #ffffff !important;
    box-shadow: none !important;
}

/* footer: transparent white glass spanning the page, light text */
.page:has(.eb-about) .card.border-0.rounded-0 {
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
}

.page:has(.eb-about) .card.border-0.rounded-0 .text-dark,
.page:has(.eb-about) .card.border-0.rounded-0 h6,
.page:has(.eb-about) .card.border-0.rounded-0 p,
.page:has(.eb-about) .card.border-0.rounded-0 li,
.page:has(.eb-about) .card.border-0.rounded-0 a {
    color: #ffffff !important;
}

/* inner cards (inside the large card): darkest navy */
.eb-about .container-card .rz-card,
.eb-about .hotelbuddy-promo-card,
.eb-about .testimonial-card,
.eb-about .header-card,
.eb-about .custom-carousel-card,
.eb-about .carousel-card,
.eb-about .module,
.eb-about .hotelbuddy-promo-card:hover,
.eb-about .testimonial-card:hover,
.eb-about .module:hover {
    background: #020b1f !important;
}

/* the single large card around all the text: no card (inner cards keep their styling) */
.eb-about .container-card .rz-card.eb-about-wrap {
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0 !important;
    box-shadow: none !important;
}

/* ---------- Cards: transparent whitish blurry glass with a glossy white outline ---------- */
.eb-about .container-card .rz-card:not(.eb-about-wrap),
.eb-about .hotelbuddy-promo-card,
.eb-about .testimonial-card,
.eb-about .header-card,
.eb-about .module,
.eb-about .hotelbuddy-promo-card:hover,
.eb-about .testimonial-card:hover,
.eb-about .module:hover,
.page:has(.eb-about) .card.border-0.rounded-0 {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}

/* ---------- Accent colour: sky blue instead of green ---------- */
.eb-about h2,
.eb-about .header,
.eb-about .module-header,
.eb-about .objectives-list li::before,
.eb-about .hotelbuddy-subtitle {
    color: #7dd3fc !important;
}

.eb-about .objectives-list,
.eb-about .objectives-list2,
.eb-about .hotelbuddy-features {
    background: rgba(90, 200, 250, 0.12) !important;
    color: #eaf6ff !important;
}

.eb-about .section-text,
.eb-about .section-text.interactive {
    border-left-color: rgba(90, 200, 250, 0.45) !important;
}

.eb-about .section-text.interactive:hover,
.eb-about .testimonial-card:hover,
.eb-about .hotelbuddy-promo-card:hover {
    border-color: #5ac8fa !important;
}

.eb-about .about-title {
    border-color: #5ac8fa !important;
    text-shadow: 0 2px 12px rgba(90, 200, 250, 0.55), 0 2px 8px #000 !important;
    box-shadow: none !important;
}

.eb-about .hotelbuddy-logo-section::before,
.eb-about .hotelbuddy-promo-card:hover .hotelbuddy-logo-section::before {
    border-color: rgba(90, 200, 250, 0.8) !important;
    background: rgba(90, 200, 250, 0.08) !important;
    box-shadow: none !important;
}

.eb-about .hotelbuddy-logo,
.eb-about .hotelbuddy-promo-card:hover .hotelbuddy-logo {
    filter: drop-shadow(0 2px 6px rgba(90, 200, 250, 0.3)) !important;
}

.eb-about .hotelbuddy-cta-btn,
.eb-about .hotelbuddy-cta-btn:hover {
    background: linear-gradient(135deg, #38bdf8, #1769ff) !important;
    box-shadow: none !important;
}

/* ---------- Headings: yellow ---------- */
.eb-about h1,
.eb-about h2,
.eb-about h3,
.eb-about h4,
.eb-about h5,
.eb-about .header,
.eb-about .sub-header,
.eb-about .module-header,
.eb-about .about-title,
.eb-about .hotelbuddy-title,
.eb-about .hotelbuddy-subtitle,
.eb-about .testimonial-author,
.eb-about .author-info h4 {
    color: #ffd400 !important;
}

/* ---------- Sky-blue tinted blocks: darkest navy with a sky-blue line ---------- */
.eb-about .objectives-list,
.eb-about .objectives-list2,
.eb-about .hotelbuddy-features {
    background: #020b1f !important;
    border: 1px solid #5ac8fa !important;
    border-radius: 12px;
    box-shadow: none !important;
}

.eb-about .section-text,
.eb-about .section-text.interactive {
    background: #020b1f !important;
    border: 1px solid rgba(90, 200, 250, 0.55) !important;
    border-left: 4px solid #5ac8fa !important;
    border-radius: 12px;
    box-shadow: none !important;
}

.eb-about .section-text.interactive:hover,
.eb-about .section-text.interactive.highlighted {
    background: #020b1f !important;
    border-color: #5ac8fa !important;
    box-shadow: none !important;
}

.eb-about .about-title {
    background: #020b1f !important;
    border: 1.5px solid #5ac8fa !important;
}

/* ---------- AI capability cards: one wide card per line, zigzag ---------- */
.eb-about .eb-zigzag {
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 18px !important;
}

.eb-about .eb-zigzag > .rz-col,
.eb-about .eb-zigzag > [class*="rz-col-"] {
    flex: 0 0 auto !important;
    width: 72% !important;
    max-width: 72% !important;
}

.eb-about .eb-zigzag > :nth-child(odd) {
    align-self: flex-start;
}

.eb-about .eb-zigzag > :nth-child(even) {
    align-self: flex-end;
}

.eb-about .eb-zigzag .module {
    margin-top: 0;
    padding: 18px 26px;
}

@media (max-width: 767.98px) {
    .eb-about .eb-zigzag > .rz-col,
    .eb-about .eb-zigzag > [class*="rz-col-"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   Testimonials carousel (markup unchanged; arrows / dots / avatars added by
   /js/about-testimonials.js). Works as a native swipeable scroller without JS.
   ========================================================================== */
.eb-about .eb-t-heading {
    color: #ffd400 !important;
    font-weight: 800;
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    letter-spacing: -0.01em;
    margin-top: 12px;
}

.eb-about .eb-t-sub {
    color: #c7d2e5 !important;
    max-width: 640px;
    margin: 6px auto 0;
    font-size: 1.02rem;
    line-height: 1.6;
}

.eb-about .testimonials-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 22px !important;
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 6px 34px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    outline-offset: 2px;
}

.eb-about .testimonials-container::-webkit-scrollbar {
    display: none;
}

.eb-about .testimonials-container:focus-visible {
    outline: 2px solid #5ac8fa;
    border-radius: 18px;
}

.eb-about .testimonials-container .testimonial-card {
    flex: 0 0 calc((100% - 44px) / 3) !important;
    max-width: none !important;
    min-width: 0;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    padding: 30px 28px 24px !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, #ffffff 0%, #e8f1ff 100%) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 14px 34px rgba(2, 8, 23, 0.38) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.eb-about .testimonials-container .testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 28px;
    right: 28px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, #1769ff, #5ac8fa);
}

.eb-about .testimonials-container .testimonial-card:hover,
.eb-about .testimonials-container .testimonial-card:focus-within {
    transform: translateY(-4px);
    background: linear-gradient(180deg, #ffffff 0%, #e8f1ff 100%) !important;
    border-color: #5ac8fa !important;
    box-shadow: 0 20px 42px rgba(2, 8, 23, 0.48) !important;
}

.eb-about .testimonials-container .testimonial-card.is-center {
    transform: translateY(-6px) scale(1.03);
    border-color: #5ac8fa !important;
    box-shadow: 0 24px 48px rgba(2, 8, 23, 0.5), 0 0 0 1px rgba(90, 200, 250, 0.6) !important;
}

.eb-about .testimonials-container .testimonial-card > p {
    color: #0b1b38 !important;
    font-size: 1.04rem;
    font-weight: 500;
    line-height: 1.75;
    margin: 6px 0 22px;
}

.eb-about .testimonials-container .testimonial-author {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    text-align: left !important;
    gap: 14px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(11, 27, 56, 0.12);
}

.eb-about .testimonials-container .school-logo {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0b1b38, #1769ff);
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.04em;
}

.eb-about .testimonials-container .school-logo:empty {
    display: none;
}

.eb-about .testimonials-container .author-info h4 {
    color: #0b1b38 !important;
    font-size: 1.02rem;
    font-weight: 700;
    font-style: normal;
    margin: 0;
}

.eb-about .testimonials-container .author-info p {
    color: #3b4a66 !important;
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.45;
    margin: 3px 0 0;
}

/* controls */
.eb-about .eb-t-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0 auto 8px;
}

.eb-about .eb-t-arrow {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid #5ac8fa;
    background: #020b1f;
    color: #ffffff;
    font-size: 1.5rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.eb-about .eb-t-arrow:hover:not(:disabled) {
    background: #5ac8fa;
    color: #020b1f;
}

.eb-about .eb-t-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

.eb-about .eb-t-arrow:focus-visible,
.eb-about .eb-t-dot:focus-visible {
    outline: 2px solid #ffd400;
    outline-offset: 3px;
}

.eb-about .eb-t-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.eb-about .eb-t-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: width 0.25s ease, background 0.25s ease;
}

.eb-about .eb-t-dot[aria-current="true"] {
    width: 26px;
    background: #5ac8fa;
}

@media (max-width: 999.98px) {
    .eb-about .testimonials-container .testimonial-card {
        flex-basis: calc((100% - 22px) / 2) !important;
    }
}

@media (max-width: 699.98px) {
    .eb-about .testimonials-container .testimonial-card {
        flex-basis: 100% !important;
    }

    .eb-about .testimonials-container .testimonial-card.is-center {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eb-about .testimonials-container .testimonial-card,
    .eb-about .eb-t-dot,
    .eb-about .eb-t-arrow {
        transition: none;
    }

    .eb-about .testimonials-container .testimonial-card:hover,
    .eb-about .testimonials-container .testimonial-card.is-center {
        transform: none;
    }
}

/* ---------- Review cards: transparent whitish glass, white outline, light text ---------- */
.eb-about .testimonials-container .testimonial-card,
.eb-about .testimonials-container .testimonial-card:hover,
.eb-about .testimonials-container .testimonial-card:focus-within,
.eb-about .testimonials-container .testimonial-card.is-center {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

.eb-about .testimonials-container .testimonial-card.is-center {
    border-color: #ffffff !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.12)) !important;
}

.eb-about .testimonials-container .testimonial-card > p {
    color: #ffffff !important;
}

.eb-about .testimonials-container .testimonial-author {
    border-top-color: rgba(255, 255, 255, 0.3);
}

.eb-about .testimonials-container .author-info h4 {
    color: #ffd400 !important;
}

.eb-about .testimonials-container .author-info p {
    color: #e3ecfa !important;
}

.eb-about .testimonials-container .school-logo {
    background: #020b1f;
    border: 1.5px solid #5ac8fa;
}

/* ---------- AI capability cards: one wide row, left to right across the screen ---------- */
.eb-about .eb-zigzag {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    overflow-x: auto;
    align-items: stretch;
}

.eb-about .eb-zigzag > .rz-col,
.eb-about .eb-zigzag > [class*="rz-col-"] {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 200px;
    align-self: stretch !important;
}

.eb-about .eb-zigzag .module {
    height: 100%;
    padding: 18px;
}

@media (max-width: 767.98px) {
    .eb-about .eb-zigzag > .rz-col,
    .eb-about .eb-zigzag > [class*="rz-col-"] {
        flex: 0 0 78% !important;
        width: auto !important;
        max-width: none !important;
    }
}

/* ---------- AI capability cards: snake / wave row (alternating up and down, joined by a winding line) ---------- */
.eb-about .eb-zigzag {
    position: relative;
    padding: 56px 4px;
}

.eb-about .eb-zigzag > .rz-col,
.eb-about .eb-zigzag > [class*="rz-col-"] {
    position: relative;
    z-index: 1;
    min-width: 170px;
}

.eb-about .eb-zigzag > :nth-child(odd) {
    transform: translateY(-26px);
}

.eb-about .eb-zigzag > :nth-child(even) {
    transform: translateY(26px);
}

@media (min-width: 1200px) {
    .eb-about .eb-zigzag {
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 100' preserveAspectRatio='none'><path d='M50 30 C100 30 100 70 150 70 C200 70 200 30 250 30 C300 30 300 70 350 70 C400 70 400 30 450 30 C500 30 500 70 550 70' fill='none' stroke='%235ac8fa' stroke-width='2' stroke-dasharray='7 6' vector-effect='non-scaling-stroke' opacity='0.75'/></svg>") center / 100% 100% no-repeat;
    }
}

@media (max-width: 767.98px) {
    .eb-about .eb-zigzag {
        padding: 12px 4px;
    }

    .eb-about .eb-zigzag > :nth-child(odd),
    .eb-about .eb-zigzag > :nth-child(even) {
        transform: none;
    }
}

/* ---------- AI capability cards: continuous drift (JS clones the set once); fixed card width ---------- */
.eb-about .eb-zigzag {
    background: none !important;
    scrollbar-width: none;
    scroll-snap-type: none;
}

.eb-about .eb-zigzag::-webkit-scrollbar {
    display: none;
}

.eb-about .eb-zigzag > .rz-col,
.eb-about .eb-zigzag > [class*="rz-col-"] {
    flex: 0 0 300px !important;
    min-width: 0;
}

/* ---------- Cards span the full page width, left to right ---------- */
.eb-about .container-card,
.eb-about .testimonials-container {
    max-width: none !important;
}

.eb-about .container-card {
    padding: 0 8px;
}

/* ---------- Keep everything inside the viewport (cards were being cut on the right) ----------
   The scrolling rows (AI cards, reviews) must not widen their parents. */
.eb-about .eb-zigzag,
.eb-about .testimonials-container {
    contain: inline-size;
    width: 100%;
    max-width: 100% !important;
    box-sizing: border-box;
}

.eb-about.about-container,
.eb-about .container-card,
.eb-about .container-card > .rz-stack,
.eb-about .container-card .rz-row,
.eb-about .container-card .rz-card.eb-about-wrap,
.eb-about .container-card .rz-col,
.eb-about .container-card [class*="rz-col-"] {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.eb-about .container-card .rz-card.eb-about-wrap {
    width: calc(100% - 20px);
}

.eb-about .section-text,
.eb-about .objectives-list,
.eb-about .objectives-list2 {
    box-sizing: border-box;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* ---------- Header card: its green top border becomes a white outline on transparent glass ---------- */
.eb-about .header-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
}

/* carousel: outer teal card becomes transparent so only the glass card shows; text stays light */
.page:has(.eb-about) .custom-carousel-container1 {
    background: transparent !important;
}

.page:has(.eb-about) .custom-carousel-card :is(.custom-card-text1, p, li, span, strong) {
    color: #ffffff !important;
}

.page:has(.eb-about) .custom-carousel-card .custom-header {
    color: #ffd400 !important;
}

/* testimonial carousel: transparent outer container, light text */
.page:has(.eb-about) .carousel-container {
    background: transparent !important;
}

.page:has(.eb-about) .carousel-card :is(.card-text, p, .carousel-name, .carousel-designation, .carousel-school, b) {
    color: #ffffff !important;
}

.page:has(.eb-about) .carousel-card .header {
    color: #ffd400 !important;
}

/* ==========================================================================
   About page: responsive safety net (mobile / tablet / laptop / desktop).
   Presentation only; scoped to .eb-about.
   ========================================================================== */
.page:has(.eb-about) {
    max-width: 100vw;
    overflow-x: clip;
}

.eb-about,
.eb-about * {
    box-sizing: border-box;
}

.eb-about img,
.eb-about video,
.eb-about iframe {
    max-width: 100%;
    height: auto;
}

.eb-about :is(h1, h2, h3, h4, p, li, a, span) {
    overflow-wrap: anywhere;
}

/* the single outer stack/row/card must be allowed to shrink to the screen */
.eb-about .container-card,
.eb-about .container-card > .rz-stack,
.eb-about .container-card .rz-row,
.eb-about .eb-about-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.eb-about .container-card > .rz-stack {
    flex-wrap: wrap;
}

.eb-about .eb-about-wrap {
    margin: 10px 0 !important;
}

.eb-about .rz-row {
    max-width: 100%;
}

.eb-about .rz-row > .rz-col,
.eb-about .rz-row > [class*="rz-col-"] {
    min-width: 0;
}

/* fluid type */
.eb-about .about-title {
    font-size: clamp(1.7rem, 4vw + 0.6rem, 2.8rem);
    line-height: 1.2;
}

.eb-about h3 {
    font-size: clamp(1.15rem, 2vw + 0.6rem, 1.7rem);
}

/* laptop and below */
@media (max-width: 1199.98px) {
    .eb-about.about-container {
        padding: 16px !important;
    }
}

/* tablet and below */
@media (max-width: 991.98px) {
    .eb-about .eb-zigzag,
    .eb-about .rz-row {
        gap: 14px !important;
    }

    .eb-about .hotelbuddy-card-content {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .eb-about .hotelbuddy-logo-section,
    .eb-about .hotelbuddy-text-section {
        width: 100%;
        justify-content: center;
    }

    .page:has(.eb-about) .card.border-0.rounded-0 .row.p-5 {
        padding: 28px 18px !important;
    }
}

/* large phone and below */
@media (max-width: 767.98px) {
    .eb-about.about-container {
        padding: 10px !important;
    }

    .eb-about .eb-about-wrap > div {
        padding: 4px !important;
    }

    .eb-about .objectives-list,
    .eb-about ul {
        padding-left: 18px;
        margin-left: 0 !important;
    }

    .eb-about .module,
    .eb-about .section-text,
    .eb-about .hotelbuddy-promo-card,
    .eb-about .testimonial-card {
        padding-left: 14px;
        padding-right: 14px;
    }

    .eb-about .hotelbuddy-cta-btn,
    .eb-about .btn {
        white-space: normal;
        max-width: 100%;
    }
}

/* phone */
@media (max-width: 575.98px) {
    .eb-about.about-container {
        padding: 6px !important;
    }

    .eb-about .rz-card:not(.eb-about-wrap) {
        padding: 12px !important;
    }

    .page:has(.eb-about) .top-row .contact-info {
        font-size: 12px;
        line-height: 1.5;
    }
}

/* large desktop: keep line length readable */
@media (min-width: 1600px) {
    .eb-about .container-card {
        max-width: 1500px;
        margin-left: auto;
        margin-right: auto;
    }
}