/* Single typeface for the whole site:
   font-family: "Carlito", sans-serif; */

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Prevent images and embeds from exceeding their container */
img,
video,
iframe,
embed,
object {
    max-width: 100%;
}

/* Sections & wrappers never exceed viewport width */
section,
.section,
header,
footer,
.container,
.row {
    /* max-width: 100%; */
}

/* =====================================
   ROOT VARIABLES (GLOBAL SETTINGS)
===================================== */

:root {
    /* ===== COLORS ===== */
    --primary-color: #009FE1;
    --secondary-color: #DF3B3B;
    --light-color: #EBF7FF;
    --text-dark: #000;
    --text-white: #ffffff;
    --border-color: #eaeaea;
    --background-white: #ffffff;
    /* ===== FONT =====
       One typeface site-wide. --secondary-font is kept only as an alias of
       --primary-font so any stray reference still resolves to Carlito. */
    --primary-font: "Carlito", sans-serif;
    --secondary-font: var(--primary-font);
}

/* Prevent horizontal scroll globally - use clip (not hidden) to preserve position:sticky */
html {
    font-family: var(--primary-font);
    overflow-x: clip;
    max-width: 100%;
}

/* Third-party widgets ship their own typeface - the odometer theme CSS
   loads from a CDN before this file and sets "Helvetica Neue" on its
   counters. Pull them back onto the one site typeface. */
.odometer.odometer-auto-theme,
.odometer.odometer-theme-default,
.odometer.odometer-auto-theme .odometer-digit,
.odometer.odometer-theme-default .odometer-digit {
    font-family: var(--primary-font);
}

/* Body */
body {
    font-family: var(--primary-font);
    line-height: 1.6;
    color: #000;
    font-size: 20px;
    font-weight: 400;
    background-color: #fff;
    overflow-x: clip;
    max-width: 100%;
}

/* =========================
   HEADINGS
========================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--primary-font);
    font-weight: 600;
    color: var(--primary-color);
    line-height: 1.3;
    margin-bottom: 15px;
}

h1 {
    font-size: clamp(32px, 5vw, 55px);
}

h2 {
    font-size: clamp(28px, 4vw, 45px);
    line-height: 1;
}

h3 {
    font-size: clamp(20px, 2.5vw, 25px);
}

h4 {
    font-size: clamp(18px, 2vw, 20px);
}

h5 {
    font-size: clamp(16px, 1.6vw, 18px);
}

h6 {
    font-size: clamp(14px, 1.4vw, 16px);
}

/* =========================
   PARAGRAPH
   Site-wide body-copy scale: 20px / weight 400 on desktop. The only
   breakpoint override anywhere is the <=1100px step down to 16px at the
   end of responsive.css; there are no per-section paragraph overrides.
========================= */

p {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* =========================
   HEADER STYLING
========================= */

.main-header {
    /* sticky, not fixed: the header keeps its place in the flow so it no
       longer overlaps the hero, and still pins to the top on scroll. The
       hide/show classes below ride on top of it. */
    position: sticky;
    background-color: var(--text-white);
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: none;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.mobile-menu-ham {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: end;
}

.hamburger-menu i {
    color: #000;
    font-size: 22px;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: end;
    margin-left: auto;
}

.main-header.header-hidden {
    transform: translateY(-100%);
    box-shadow: none;
}

.main-header.header-sticky {
    transform: translateY(0);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.section {
    padding: 50px 0;
    /* mobile-first base; scales up via responsive.css */
    position: relative;
}

.offcanvas.offcanvas-top.mobile-menu {
    height: 100%;
}

.offcanvas.offcanvas-top.mobile-menu button.btn-close {
    color: #000;
    font-size: 22px;
    width: 40px;
    height: 40px;
    padding: initial;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    background-image: none;
    display: flex;
    align-items: center;
    justify-content: end;
    margin-left: auto;
    opacity: 1;
    margin-right: 0;
}

/* =========================
   OFFCANVAS STYLE
========================== */

.mobile-menu {
    list-style: none;
    padding: 0;
}

.mobile-menu>li {
    border-bottom: 1px solid #eee;
}

/* =========================
   MENU TEXT ANIMATION
========================== */

.mobile-menu>li {
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.5s ease;
}

.offcanvas.show .mobile-menu>li {
    opacity: 1;
    transform: translateY(0);
}

.offcanvas.show .mobile-menu>li:nth-child(1) {
    transition-delay: 0.05s;
}

.offcanvas.show .mobile-menu>li:nth-child(2) {
    transition-delay: 0.1s;
}

.offcanvas.show .mobile-menu>li:nth-child(3) {
    transition-delay: 0.15s;
}

.offcanvas.show .mobile-menu>li:nth-child(4) {
    transition-delay: 0.2s;
}

.offcanvas.show .mobile-menu>li:nth-child(5) {
    transition-delay: 0.25s;
}

.offcanvas.show .mobile-menu>li:nth-child(6) {
    transition-delay: 0.3s;
}

.mobile-menu>li>a,
.mobile-toggle {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.mobile-menu>li>a:hover,
.mobile-toggle:hover {
    transform: translateX(6px);
}

.mobile-menu>li>a::after,
.mobile-toggle::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 12px;
    width: 0%;
    display: none;
    height: 2px;
    background: #009FE1;
    transition: width 0.3s ease;
}

.mobile-menu>li>a:hover::after,
.mobile-toggle:hover::after {
    width: 40%;
}

.mobile-submenu li {
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

/* Stagger: same --i approach as the desktop dropdown above, so the
   ladder does not have to be rewritten when a service is added. The
   delay applies only while opening - see the collapse rule below. */
.mobile-dropdown.active .mobile-submenu li {
    opacity: 1;
    transform: translateX(0);
    transition-delay: calc(0.05s * var(--i, 1));
}

.mobile-submenu li:nth-child(1) {
    --i: 1;
}

.mobile-submenu li:nth-child(2) {
    --i: 2;
}

.mobile-submenu li:nth-child(3) {
    --i: 3;
}

.mobile-submenu li:nth-child(4) {
    --i: 4;
}

.mobile-submenu li:nth-child(5) {
    --i: 5;
}

.mobile-submenu li:nth-child(6) {
    --i: 6;
}

.mobile-submenu li:nth-child(7) {
    --i: 7;
}

.mobile-submenu li:nth-child(8) {
    --i: 8;
}

.mobile-submenu li:nth-child(9) {
    --i: 9;
}

.mobile-submenu li:nth-child(n+10) {
    --i: 10;
}

.mobile-menu>li>a,
.mobile-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 14px 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    background: none;
    border: none;
    color: #111;
}

.toggle-icon {
    position: relative;
    width: 18px;
    height: 18px;
}

.toggle-icon::before,
.toggle-icon::after {
    content: "";
    position: absolute;
    background: #111;
    transition: all 0.3s ease;
}

.toggle-icon::before {
    width: 14px;
    height: 2px;
    top: 8px;
    left: -5px;
}

.toggle-icon::after {
    width: 2px;
    height: 14px;
    left: .9px;
    top: 2px;
}

.mobile-dropdown.active .toggle-icon::after {
    opacity: 0;
}

.mobile-submenu {
    list-style: none;
    padding-left: 15px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    opacity: 0;
}

.mobile-dropdown.active .mobile-submenu {
    max-height: 500px;
    opacity: 1;
}

.mobile-submenu li a {
    display: block;
    padding: 17px 0;
    font-size: 16px;
    color: #000000;
    text-decoration: none;
    transition: 0.3s;
    line-height: 1;
}

.mobile-submenu li a:hover {
    color: #009FE1;
}

/* =========================
   LOGO STYLING
========================= */

.logo img {
    max-height: 50px;
}

/* =========================
   NAVIGATION MENU
========================= */

.main-nav .nav-link {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    padding: 28px var(--nav-link-padding-x, 20px);
    transition: color 0.3s;
    font-family: var(--primary-font);
}

.main-nav .nav {
    gap: var(--nav-gap, 10px);
}

.nav-item.nav-dropdown {
    position: relative;
}

.dropdown-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 14px;
    height: 14px;
    margin-left: 6px;
    vertical-align: middle;
    margin-top: -3px;
}

.icon-bar {
    position: absolute;
    background-color: #aaa;
    border-radius: 2px;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.h-bar {
    width: 12px;
    height: 2px;
}

.v-bar {
    width: 2px;
    height: 12px;
    transform: scaleY(1);
    transform-origin: center;
}

.nav-item.nav-dropdown:hover .v-bar {
    transform: scaleY(0);
    opacity: 0;
}

.nav-item.nav-dropdown:hover .icon-bar {
    background-color: #D8346E;
}

/* Stagger: the delay is derived from --i rather than written out per
   item, so adding a service to the menu only needs one more --i line
   below instead of a new transition-delay rule. The ladder covers 10
   items; anything past that simply shares the last delay. */
.dropdown-menu-custom li {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    transition-delay: calc(0.05s * var(--i, 1));
}

.dropdown-menu-custom li:nth-child(1) {
    --i: 1;
}

.dropdown-menu-custom li:nth-child(2) {
    --i: 2;
}

.dropdown-menu-custom li:nth-child(3) {
    --i: 3;
}

.dropdown-menu-custom li:nth-child(4) {
    --i: 4;
}

.dropdown-menu-custom li:nth-child(5) {
    --i: 5;
}

.dropdown-menu-custom li:nth-child(6) {
    --i: 6;
}

.dropdown-menu-custom li:nth-child(7) {
    --i: 7;
}

.dropdown-menu-custom li:nth-child(8) {
    --i: 8;
}

.dropdown-menu-custom li:nth-child(9) {
    --i: 9;
}

.dropdown-menu-custom li:nth-child(n+10) {
    --i: 10;
}

.nav-item.nav-dropdown:hover .dropdown-menu-custom li {
    opacity: 1;
    transform: translateY(0);
}

.dropdown-menu-custom {
    list-style: none;
    padding: 10px 0;
    margin: 0;
    position: absolute;
    top: calc(100% + 0px);
    left: 107%;
    transform: translateX(-50%) translateY(-8px);
    background: #fff;
    min-width: 308px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10);
    border-top: 2px solid #D8346E;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 999;
}



.nav-item.nav-dropdown:hover .dropdown-menu-custom {
    opacity: 1;
    pointer-events: all;
    transform: translateX(-50%) translateY(0);
}

.dropdown-menu-custom li a {
    display: block;
    padding: 9px 22px;
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    text-decoration: none;
    font-family: var(--primary-font);
    letter-spacing: 0.04em;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.dropdown-menu-custom li a:hover {
    color: #D8346E;
    padding-left: 28px;
}

.main-nav .nav-link:hover {
    color: #D8346E;
}

/* =========================
   RIGHT SIDE BUTTONS
========================= */

.header-buttons {
    display: inline-flex;
    gap: 10px;
}

/* Contact/Donate pair inside the hamburger drawer - full width, split
   evenly side by side instead of the auto-width pairing the desktop
   header uses. */
.bottom-menu .header-buttons {
    display: flex;
    width: 100%;
}

.bottom-menu .header-buttons .contact-btn,
.bottom-menu .header-buttons .donate-btn {
    flex: 0 0 calc(50% - 5px);
    justify-content: center;
}

/* ===== SHARED BUTTON BASE ===== */
.contact-btn,
.donate-btn,
.banner-btn,
.cta-btn,
.gv-donate-btn,
.gv-vision-btn,
.submit-btn,
.gi-card-btn,
.gi-newsletter-btn {
    font-family: var(--primary-font);
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 10px;
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.2s ease;
    display: inline-flex;
    align-items: center;
}

/* ── NAV BUTTONS (header) ──────────────────────── */
.contact-btn {
    background-color: var(--primary-color);
    color: #fff;
    padding: 12px 18px;
    font-size: 16px;
    border: none;
}

.contact-btn:hover {
    background-color: #D8346E;
    color: #fff;
}

.donate-btn {
    background-color: #D8346E;
    color: #fff;
    padding: 12px 18px;
    font-size: 16px;
    border: none;
}

.donate-btn:hover {
    background-color: #D8346E;
    color: #fff;
    transform: translateY(-2px);
}

/* ── BODY / CTA BUTTONS ────────────────────────── */
.banner-btn,
.cta-btn,
.gv-vision-btn,
.gi-newsletter-btn,
.submit-btn {
    background-color: var(--primary-color);
    color: #fff;
    padding: 12px 18px;
    font-size: 16px;
    border: none;
}

.gv-vision-btn.border-btn {
    background-color: transparent;
    color: #fff;
    padding: 8px 18px;
    border: 2px solid #fff !important;
    font-size: 15px;
    line-height: 1;
    border: none;
}

.gv-vision-btn.border-btn:hover {
    background-color: var(--primary-color);
    border: 2px solid var(--primary-color) !important;
}

.banner-btn:hover,
.cta-btn:hover,
.gv-vision-btn:hover,
.gi-newsletter-btn:hover,
.submit-btn:hover {
    background-color: #D8346E;
    color: #fff;
}

/* Donate colour variants - colour only. Padding and font-size come from
   the shared CTA sizing ladder at the end of responsive.css, so the pink
   buttons scale exactly like every other button. */
.banner-btn.donate-btn,
.cta-btn.donate-btn,
.gv-donate-btn {
    background-color: #D8346E;
    color: #fff;
    border: none;
}

.banner-btn.donate-btn:hover,
.cta-btn.donate-btn:hover,
.gv-donate-btn:hover {
    background-color: #D8346E;
    color: #fff;
    transform: translateY(-1px);
}

/* ── OUTLINED CARD BUTTON ──────────────────────── */
.gi-card-btn {
    gap: 8px;
    padding: 13px 30px;
    font-size: 15px;
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.gi-card-btn:hover {
    background: var(--primary-color);
    color: #fff;
}

.gi-card-btn.filled {
    background: var(--primary-color);
    color: #fff;
}

.gi-card-btn.filled:hover {
    background-color: #D8346E;
    border-color: #D8346E;
}

.gi-card-btn.red-btn {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

.gi-card-btn.red-btn:hover {
    background: var(--secondary-color);
    color: #fff;
    border-color: var(--secondary-color);
}


/* =========================================
   HERO SECTION
========================================= */

.hero-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Banner artwork: three <img> tags share .hero-bg for positioning and
   object-fit; only one is shown at a time. Desktop is the default so the
   page still renders a banner if these rules ever fail to load. */
/* Doubled class (.hero-bg.hero-bg--x) is deliberate: several banner
   wrappers carry rules like .tech-hero-bg img { display: block } at
   specificity (0,1,1), which would otherwise reveal all three at once.
   (0,2,0) wins those without needing !important. */
.hero-bg.hero-bg--tablet,
.hero-bg.hero-bg--mobile {
    display: none;
}

@media (max-width: 991px) {

    .hero-bg.hero-bg--desktop {
        display: none;
    }

    .hero-bg.hero-bg--tablet {
        display: block;
    }
}

@media (max-width: 767px) {

    .hero-bg.hero-bg--tablet {
        display: none;
    }

    .hero-bg.hero-bg--mobile {
        display: block;
    }
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.hero-content-wrapper {
    width: 100%;
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
}

.hero-section .min-vh-100 {
    min-height: 100vh;
}

/* =========================
   INNER PAGE HERO - 700px
   (all pages except index)
========================= */

.hero-section.inner-page-hero {
    height: 700px;
    min-height: 700px;
    max-height: 700px;
}

.hero-section.inner-page-hero .hero-content-wrapper {
    height: 100%;
    align-items: center;
}

.hero-box {
    background: transparent;
    padding: 50px 50px 0px 0px;
    border-radius: 10px;
    color: #fff;
}

.hero-box h1 {
    font-weight: bold;
    color: var(--text-white);
    line-height: 52px;
    margin-bottom: 20px;
    max-width: 800px;
}

.hero-box p {
    margin-bottom: 25px;
}

.impact-banner-new .hero-box p {
    max-width: 580px;
}

.hero-box--compact h1 {
    max-width: none;
    margin-bottom: 16px;
}



/* =========================================
   STATS STRIP
========================================= */

.stats-strip {
    background: rgba(8, 18, 36, 0.92);
    background: #009FE1;
    backdrop-filter: blur(8px);
    padding: 18px 0;
    width: 100%;
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.stats-strip .swiper {
    max-width: 100%;
    margin: 0 auto;
}

.stats-strip-item {
    padding: 6px 16px;
}

.stats-strip-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0px 10px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.stats-strip-icon {
    margin-bottom: 6px;
    flex-shrink: 0;
}

.stats-strip-icon i {
    font-size: 27px;
    color: #fff;
}

.stats-strip h3 {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    font-family: var(--primary-font);
    margin-bottom: 8px;
    line-height: 1.2;
    white-space: nowrap;
}

.stats-strip p {
    color: rgb(255, 255, 255);
    margin-bottom: 0;
    line-height: 1.35;
}


/* =========================================
   BLIND CAPITAL SECTION
========================================= */

.blind-capital-section {
    background: url(../img/bright-sight-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px;
}

.list-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.list-icon i {
    font-size: 20px;
    color: #fff;
}

.blind-capital-left {
    padding-left: 40px;
}

.blind-capital-left h2 {
    font-weight: 600;
    color: #009FE1;
    line-height: 1.3;
    margin-bottom: 20px;
}

.blind-capital-left h3 {
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-color);
    font-family: var(--primary-font);
    margin-bottom: 16px;
}

.blind-capital-left ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.blind-capital-left ul li {
    color: var(--text-dark);
    font-family: var(--primary-font);
    margin-bottom: 15px;
    padding-bottom: 15px;
    line-height: 1.6;
    letter-spacing: normal;
    word-spacing: normal;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 16px;
}

.blind-capital-left ul li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.blind-capital-images {
    display: flex;
    gap: 12px;
    height: 100%;
    min-height: 450px;
    align-items: stretch;
}

.blind-capital-img-single {
    height: 100%;
    min-height: 450px;
    border-radius: 10px;
    overflow: hidden;
}

.blind-capital-img-single img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.blind-capital-img-large {
    flex: 2;
    border-radius: 10px;
    overflow: hidden;
}

.blind-capital-img-small {
    flex: 1;
    border-radius: 10px;
    overflow: hidden;
}

.blind-capital-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.blind-capital-img-bottom {
    margin-top: 12px;
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
}

.blind-capital-img-bottom img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
}


/* =========================================
   GLOBAL PARTNERSHIP SECTION
   Copy + four outcome icons on the left, MoU photo on the right, on a
   plain white ground. Responsive steps live in responsive.css
   (GLOBAL PARTNERSHIP block).
========================================= */

.global-partnership {
    --gp-navy: #072a5e;
    --gp-blue: #069ce4;
    --gp-text: #10204d;
    --gp-pill-bg: #d4eefd;
    --gp-pill-text: #0f8bcf;
    background: #fff;
}

.gp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
    align-items: center;
    gap: 56px;
}

.gp-eyebrow {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--gp-pill-text);
    background: var(--gp-pill-bg);
    padding: 11px 26px 10px;
    border-radius: 100px;
    margin-bottom: 16px;
}

.gp-title {
    font-weight: 700;
    line-height: 1.16;
    color: var(--gp-navy);
    margin-bottom: 16px;
}

.gp-title span {
    display: block;
    color: var(--gp-blue);
}

.gp-text {
    font-size: 18px;
    line-height: 1.45;
    color: var(--gp-text);
    margin-bottom: 24px;
}

/* Line breaks that reproduce the design's five-line paragraph; they only
   apply where the column is wide enough to hold each line (see
   responsive.css), everywhere else the text wraps naturally. */
.gp-br {
    display: none;
}

.gp-text strong {
    font-weight: 700;
    color: var(--gp-navy);
}

.gp-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 30px;
}

.gp-content {
    container: gp-content / inline-size;
}

/* Enough room for every label to sit on one line next to its icon */
@container gp-content (min-width: 600px) {
    .gp-features {
        grid-template-columns: repeat(2, max-content);
        /* 174px between the columns where it fits (559px = the two columns'
           combined label widths); narrower columns shrink the gap instead
           of running into the photo. */
        gap: 22px min(174px, calc(100cqw - 559px));
    }

    .gp-feature-label {
        white-space: nowrap;
    }
}

.gp-feature {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    text-align: left;
}

/* Same badge as the site's other icons (.prog-card-icon): brand-blue
   glyph on a light brand-blue circle. */
.gp-feature-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 26px;
    line-height: 1;
    background: rgba(59, 157, 223, 0.10);
    color: var(--primary-color);
}

.gp-feature-label {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: #000;
}

.gp-media {
    border-radius: 32px;
    overflow: hidden;
    line-height: 0;
}

.gp-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 844 / 568;
    object-fit: cover;
}


/* =========================================
   AWARDS SECTION
========================================= */

.awards-section {
    background-color: #009FE1;
    border-radius: 0;
}


.awards-left ul li p {
    margin-bottom: 0;
}

.awards-left h2 {
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 10px;
}

.awards-left h3 {
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    font-family: var(--primary-font);
    margin-bottom: 20px;
    background-color: rgb(216 53 110);
    display: inline-block;
    padding: 4px 14px;
    border-radius: 4px;
}

.awards-left ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.awards-left ul li {
    font-size: 18px;
    color: #fff;
    font-family: var(--primary-font);
    margin-bottom: 16px;
    padding-bottom: 16px;
    line-height: 1.6;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    gap: 16px;
}

.awards-left ul li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.awards-left .list-icon {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.awards-left .list-icon i {
    color: #009FE1;
}

.awards-slider-outer {
    display: flex;
    align-items: center;
    gap: 12px;
}

.awards-vertical-slider-wrap {
    flex: 1;
    height: 470px;
    border-radius: 15px;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.6);
}

.awards-vertical-slider {
    height: 100%;
}

.awards-vertical-slider .swiper-slide {
    border-radius: 12px;
    overflow: hidden;
}

.awards-vertical-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

/* ---- Slide media wrapper + blue overlay + caption ---- */

.awards-vertical-slider .awards-slide-media {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
}

/* Blue overlay rising from the bottom of each image */
.awards-vertical-slider .awards-slide-media::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    border-radius: 12px;
    pointer-events: none;
    background: linear-gradient(to top,
            rgb(0 41 70) 0%,
            rgb(0 41 70) 0%,
            rgb(0 41 70) 0%,
            rgb(0 41 70) 0%,
            rgba(0, 159, 225, 0) 88%);
}

.awards-slide-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 28px 30px;
}

.awards-slide-title {
    font-family: var(--primary-font);
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 0;
}

/* Caption eases in on the active slide (scoped so it stays visible if Swiper never boots) */
.awards-vertical-slider.swiper-initialized .awards-slide-content {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
}

.awards-vertical-slider.swiper-initialized .swiper-slide-active .awards-slide-content {
    opacity: 1;
    transform: translateY(0);
}

.awards-pagination-dots {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.awards-pagination-dots .awards-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    background: transparent;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
}

.awards-pagination-dots .awards-dot.active {
    background: #fff;
    transform: scale(1.3);
}


/* =========================================
   MEANINGFUL BUSINESS 100 SECTION
========================================= */

.mb100-section {
    background-color: var(--light-color);
}

.mb100-card {
    background-color: #112D42;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}

.mb100-content {
    padding: 50px 45px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

/* ---- Hashtag eyebrow ---- */

.mb100-hashtag {
    display: block;
    font-family: var(--primary-font);
    font-size: clamp(14px, 1.4vw, 18px);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #f8ab05;
    margin-bottom: 60px;
}

/* ---- Person ---- */

.mb100-person {
    margin-bottom: 40px;
}

.mb100-name {
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 6px;
}

.mb100-role,
.mb100-org {
    color: #fff;
    line-height: 1.35;
    margin-bottom: 0;
}

/* ---- Description ---- */

.mb100-desc {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    margin-bottom: 40px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

/* ---- Footer lockups ---- */

.mb100-footer {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: auto;
}

/* MB100 badge */

.mb100-badge {
    display: flex;
    align-items: center;
    gap: 14px;
}

.mb100-mark {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mb100-mark-ring {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        conic-gradient(var(--cat-education) 0 20%,
            var(--cat-livelihoods) 0 40%,
            var(--cat-farming) 0 60%,
            var(--cat-independence) 0 80%,
            var(--secondary-color) 0 100%);
    padding: 3px;
}

.mb100-mark-mb {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
}

.mb100-mark-num {
    font-family: var(--primary-font);
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.mb100-badge-divider {
    width: 1px;
    align-self: stretch;
    background: rgba(255, 255, 255, 0.5);
}

.mb100-badge-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.mb100-badge-year {
    font-family: var(--primary-font);
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    line-height: 1.35;
}

.mb100-badge-title {
    font-family: var(--primary-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.35;
}

/* Sponsor lockup */

.mb100-sponsor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.mb100-sponsor-label {
    font-family: var(--primary-font);
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1;
}

.mb100-sponsor-logo {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.mb100-sponsor-logo img {
    width: 42px;
    height: auto;
    flex-shrink: 0;
}

.mb100-sponsor-tagline {
    font-family: var(--primary-font);
    font-size: 9px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    text-align: left;
}

/* ---- Portrait ---- */

.mb100-photo {
    height: 100%;
    height: 527px;
    overflow: hidden;
}

.mb100-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    display: block;
}



/* =========================================
   YOUTUBE / VIDEO SECTION
========================================= */

.youtube-section {
    background-color: #fff;
}

.section-head {
    margin-bottom: 40px;
}

.section-title {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.section-subtext {
    line-height: 1.6;
    color: #000;
    margin-bottom: 0;
}

.video-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.video-thumbnail {
    width: 100%;
    display: block;
    border-radius: 20px;
}

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-slider-container {
    position: relative;
    overflow: visible;
}

.video-slider {
    overflow: visible;
}

.video-slider .swiper-slide {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: scale(0.8);
    opacity: 0.5;
    border-radius: 20px;
    overflow: hidden;
}

.video-slider .swiper-slide .video-wrapper {
    border-radius: 20px;
    overflow: hidden;
}

.video-slider .swiper-slide-active {
    transform: scale(1);
    opacity: 1;
    z-index: 2;
}

.video-slider-prev,
.video-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    z-index: 10;
    transition: background 0.3s;
}

.video-slider-prev:hover,
.video-slider-next:hover {
    background: var(--primary-color);
    color: #fff;
}

.video-slider-prev {
    left: 15px;
}

.video-slider-next {
    right: 15px;
}

.video-slider-prev i,
.video-slider-next i {
    font-size: 24px;
}

.video-slider-pagination {
    display: none;
    bottom: -28px !important;
}

@media (max-width: 767px) {

    .video-slider-prev,
    .video-slider-next {
        display: none;
    }

    .video-slider-pagination {
        display: block;
    }

    .video-slider-pagination .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        background: #ccc;
        opacity: 1;
    }

    .video-slider-pagination .swiper-pagination-bullet-active {
        background: var(--primary-color);
        width: 20px;
        border-radius: 4px;
    }
}


/* =========================================
   BENEFIT / WHAT WE DO SECTION
========================================= */

.benefit-section {
    background: url(../img/bright-sight-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.benefit-title {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.benefit-subtext {
    color: #000;
    line-height: 1.6;
    margin-bottom: 0;
}

.benefit-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 15px 15px 20px 15px;
    height: 100%;
}

.benefit-padding {
    --bs-gutter-x: 2rem;
    margin-top: 0;
}

/* Stat cards that wrap onto a second row: space the rows with a flex gap
   (the per-breakpoint --bs-gutter-y values are zeroed so they don't stack). */
.benefit-padding.benefit-padding--stats {
    --bs-gutter-y: 0;
    row-gap: 1.5rem;
}

/* Plain white instead of the shared .what-we-do-section background image,
   with a resting shadow on the stat cards (hover shadow still comes from
   .benefit-card:hover, which is declared later). */
.what-we-do-section.what-we-do-section--white {
    background: #fff;
}

.benefit-padding--stats .benefit-card {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);
}

.benefit-card img {
    border-radius: 10px;
    width: 100%;
    height: 220px;
    object-fit: cover;
    margin-bottom: 15px;
}

.card-title {
    font-size: 30px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.card-text {
    line-height: 1.6;
    color: #000;
}

.what-we-do-section {
    background: #fff;
}

.service-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    height: 420px;
    cursor: pointer;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.13);
}

.service-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.service-card .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 170px;
    padding: 25px;
    background: linear-gradient(to top,
            rgba(0, 41, 70, 0.95) 0%,
            rgba(0, 41, 70, 0.7) 40%,
            rgba(0, 41, 70, 0.0) 100%);
    display: flex;
    align-items: flex-end;
}

.service-card .overlay h5 {
    color: #ffffff;
    font-size: 22px;
    font-weight: 600;
    margin: 0;
    max-width: 220px;
    line-height: 1.3;
}

.do-padding {
    --bs-gutter-x: 2.5rem;
    margin-top: 0px;
}

.do-cards-row {
    display: flex;
    gap: 20px;
}

.do-card-col {
    flex: 1 1 0;
    min-width: 0;
}

.service-card:hover img {
    transform: scale(1.06);
}


/* =========================
   EYEGLASSES / CUSTOM TABS
========================== */

.eyeglasses-section {
    background-color: #FAFAFA;
}

.eyeglasses-section .section-title {
    max-width: 920px;
    margin: 0 auto 15px auto;
}

.custom-tabs {
    margin-top: 15px;
}

.custom-tabs .nav-link {
    background: #009FE11a;
    border-radius: 10px;
    color: #009FE1;
    font-weight: 500;
    margin: 0 6px;
    padding: 14px 45px;
    border: none;
    line-height: 1;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 16px;
}

.custom-tabs .nav-link.active {
    background: #e53935;
    color: #ffffff;
}

.tab-card {
    background: #009FE1;
    border-radius: 20px;
    padding: 47px 64px 127px 64px;
    color: #ffffff;
    margin-top: 40px;
    overflow: hidden;
}

.tab-card h3 {
    font-size: 40px;
    font-weight: 600;
    color: #fff;
    max-width: 490px;
    margin-bottom: 0;
}

.tab-card h3.safety-header {
    max-width: 440px;
}

.tab-card p {
    margin-top: 10px;
    line-height: 35px;
    margin-bottom: 0;
}

.tab-image {
    position: relative;
}

.tab-image img {
    object-fit: cover;
    position: absolute;
    bottom: 0;
    left: 90px;
    right: 0;
    bottom: -328px;
    width: 62%;
}


/* =========================
   STATS SECTION
========================== */

.stats-section {
    background: url(../img/bright-sight-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
}

.stat-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 25px;
    height: 100%;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.stat-card h3 {
    font-size: 40px;
    font-weight: 500;
    color: #000;
    font-family: var(--primary-font);
    margin: 0px 0 12px;
    line-height: 1;
}

.stat-card p {
    color: #000;
    margin-bottom: 0;
}

.icon {
    font-size: 32px;
    color: #4a9cd3;
}

.stat-image-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
}

.stat-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stat-image-card.small {
    height: 100%;
}

.overlay-text {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #fff;
    font-weight: 400;
    font-family: var(--primary-font);
}

.overlay-text h3 {
    font-size: 40px;
    font-weight: 400;
    font-family: var(--primary-font);
    color: #fff;
    line-height: 1;
    margin-bottom: 12px;
}

.overlay-text p {
    margin-bottom: 0;
    max-width: 260px;
    line-height: 25px;
}

.stat-card .odometer {
    font-weight: 500;
    line-height: 1;
}

.stat-card .odometer-inside {
    font-weight: 400;
}

.stat-card .icon img {
    width: 60px;
    height: 60px;
}


/* =========================
   GOOD VISION SECTION
========================== */

.good-vision-section {
    overflow: hidden;
}

.good-vision-inner {
    background: url(../img/good-vision.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Blue overlay fading in from the left, behind the copy. Mobile uses its
   own portrait art that already fades to navy, so it is skipped there. */
@media (min-width: 768px) {
    .good-vision-inner::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: linear-gradient(90deg,
                rgba(7, 42, 94, 0.88) 0%,
                rgba(7, 42, 94, 0.7) 35%,
                rgba(7, 42, 94, 0) 75%);
    }
}

.good-vision-content {
    padding: 80px 120px 80px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.good-vision-tagline {
    color: rgb(255, 255, 255);
    margin-bottom: 10px;
}

.good-vision-content h2 {
    color: #fff;
    font-weight: 700;
    margin-bottom: 24px;
    line-height: 1.2;
}

.good-vision-desc {
    color: #fff;
    line-height: 1.7;
    margin-bottom: 16px;
}

.good-vision-buttons {
    display: flex;
    gap: 16px;
    margin-top: 20px;
}


.good-vision-image {
    display: none;
}

.good-vision-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* =========================
   OUR VISION SECTION
========================== */

.our-vision-section {
    background: #fff;
}

.our-vision-title {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 10px;
}

.our-vision-subtitle {
    color: var(--primary-color);
    font-style: italic;
    margin-bottom: 24px;
}

.our-vision-images {
    display: flex;
    align-items: stretch;
    gap: 0;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
}

.our-vision-img {
    flex: 1;
    overflow: hidden;
}

.our-vision-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.our-vision-divider {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vision-comparison {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 400px;
    border-radius: 10px;
    overflow: hidden;
    cursor: ew-resize;
    user-select: none;
}

.vision-comparison-blurry {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.vision-comparison-blurry img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(8px);
}

.vision-comparison-clear {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: inset(0 50% 0 0);
    will-change: clip-path;
}

.vision-comparison-clear img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vision-comparison-slider {
    position: absolute;
    top: 0;
    left: 50%;
    width: 3px;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
    transform: translateX(-50%);
    z-index: 3;
    will-change: left;
}

.vision-comparison-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    z-index: 4;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.vision-comparison.is-dragging .vision-comparison-handle,
.vision-comparison:hover .vision-comparison-handle {
    transform: translate(-50%, -50%) scale(1.12);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

.vision-comparison-handle i {
    font-size: 20px;
    color: #000000;
}

.our-vision-divider i {
    font-size: 18px;
    color: #000000;
}

.our-vision-text {
    padding-left: 40px;
}

.our-vision-text h3 {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 28px;
    margin-bottom: 16px;
}

.our-vision-text p {
    /* bumped from 16px for low-vision */
    line-height: 1.7;
    color: var(--text-dark);
    margin-bottom: 16px;
}

.our-vision-note {
    color: #000000;
}

.our-vision-cta {
    margin-top: 20px;
    display: inline-block;
}


/* =========================
   HOSPITAL PARTNERS SECTION
========================== */

.hospital-partners-section {
    background: url(../img/bright-sight-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hospital-partners-section h2 {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.hospital-partners-slider {
    padding-bottom: 30px;
    margin-bottom: 20px;
}

.partner-card {
    text-align: center;
}

.partner-logo {
    background: #fff;
    border-radius: 10px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    margin-bottom: 12px;
    border: 1px solid #e0e0e0;
}

.partner-logo img {
    max-width: 100%;
    max-height: 70px;
    object-fit: contain;
}

.partner-card p {
    /* bumped from 14px for low-vision */
    color: var(--text-dark);
    margin-bottom: 0;
}

.hospital-partners-slider .swiper-button-prev,
.hospital-partners-slider .swiper-button-next {
    color: var(--text-dark);
    width: 36px;
    height: 36px;
}

.hospital-partners-slider .swiper-button-prev::after,
.hospital-partners-slider .swiper-button-next::after {
    font-size: 18px;
}

.hospital-partners-pagination .swiper-pagination-bullet {
    background: #000000;
}

.hospital-partners-pagination .swiper-pagination-bullet-active {
    background: var(--text-dark);
}

.university-collab-text {
    font-weight: 600;
    color: var(--primary-color);
    line-height: 1.1;
    margin-bottom: 20px;
}

.university-card {
    text-align: center;
    margin-bottom: 0;
}

.university-logo {
    background: #fff;
    border-radius: 10px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    margin-bottom: 12px;
    border: 1px solid #e0e0e0;
}

.university-logo img {
    max-width: 100%;
    max-height: 70px;
    object-fit: contain;
}

.university-card p {
    /* bumped from 14px for low-vision */
    color: var(--text-dark);
    margin-bottom: 0;
}


/* =========================
   HEALTH INSTITUTIONS SECTION
========================== */

.health-institutions-section {
    background: #fff;
}

.health-institutions-title {
    color: var(--primary-color);
    font-weight: 600;
    font-style: italic;
    margin-bottom: 40px;
}

.health-logo {
    padding: 0px 20px;
}

.health-logo img {
    max-width: 100%;
    max-height: 100px;
    object-fit: contain;
}


/* =========================
   FAQ SECTION
========================== */

.faq-section {
    background: #ffffff;
}

.accordion-button:not(.collapsed) {
    color: #0c63e4;
    background-color: #ffffff !important;
    border-bottom: none;
    padding: 1.5rem 2rem 1.5rem 2rem;
    border-radius: 10px 10px 0 0 !important;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0);
}

.accordion-button:not(.collapsed) .accordion-question {
    font-weight: bold;
}

.accordion-button:not(.collapsed)::before {
    content: '';
    position: absolute;
    width: 93%;
    left: 0;
    right: 0;
    height: 1px;
    bottom: 0;
    background-color: #0099ff36;
    margin: 0 auto;
}

.accordion-button:focus {
    z-index: 3;
    outline: 0;
    box-shadow: none;
}

.accordion-button::after {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-left: auto;
    content: "";
    background-image: url(../img/plus.svg);
    background-repeat: no-repeat;
    background-size: 0.8em;
    transition: transform .2s ease-in-out;
    background-position: center;
    border-radius: 50px;
}

.accordion-button {
    color: #0c63e4;
    background-color: #e7f1ff00;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0);
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem 2rem 1rem 2rem;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    background-color: #fff;
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: 0.3s all ease;
}

.accordion-button:not(.collapsed)::after {
    background-image: url(../img/minus.svg);
    transform: rotate(-180deg);
}

.accordion-body {
    padding: 1rem 2rem 1.2rem 2rem;
    background-color: #ffffff;
    border-top: none;
    border-radius: 0px 0px 10px 10px;
}

.faq-section .accordion-body p {
    font-family: var(--primary-font);
    /* bumped from 16px for low-vision */
    color: #000;
    margin-bottom: 0;
    max-width: 90%;
}

/* Multi-paragraph answers with bullet lists */
.faq-section .accordion-body p+p,
.faq-section .accordion-body p+ul,
.faq-section .accordion-body ul+p {
    margin-top: 14px;
}

.faq-section .accordion-body ul {
    font-family: var(--primary-font);
    color: #000;
    max-width: 90%;
    margin: 10px 0 0;
    padding-left: 1.4rem;
}

.faq-section .accordion-body li {
    margin-bottom: 6px;
}

.faq-section .accordion-body li:last-child {
    margin-bottom: 0;
}

.accordion-item:last-of-type {
    margin-bottom: 0;
}

.accordion {
    border: 0px;
}

.faq-inner {
    margin-top: 0px;
}

.accordion-item {
    background-color: #fff;
    border: 0;
    margin-bottom: 20px;
}

/* FAQ cards: soft lift off the background */
.faq-section .accordion-item {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(7, 42, 94, 0.12);
}

.accordion-button .accordion-question {
    font-weight: 400;
    color: #000;
    font-size: 24px;
    line-height: 1.3;
    transition: 0.3s all ease;
}


/* =========================
   LOGO SLIDER AREA
========================== */

.c-logos-container {
    overflow: hidden;
    display: flex;
    padding: 10px 0;
    margin-top: 16px;
}

.c-logos-container-3 {
    overflow: hidden;
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

.c-logos-slider {
    display: flex;
    white-space: nowrap;
    animation: slide 80s linear infinite;
}

.c-logos-slider-3 {
    display: flex;
    white-space: nowrap;
    gap: 25px;
}

@keyframes slide {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-100%);
    }
}

.c-logos-container-1 {
    overflow: hidden;
    display: flex;
    margin: 15px 0 0px 0;
    padding: 10px 0;
}

.c-logos-container-mobile {
    overflow: hidden;
    display: flex;
    margin: 0px 0 0px 0;
    padding: 10px 0;
}

.c-logos-slider-1 {
    display: flex;
    white-space: nowrap;
    animation: slides 80s linear infinite;
}

.c-logos-slider-mobile {
    display: flex;
    white-space: nowrap;
    animation: slide 50s linear infinite;
    gap: 15px;
    margin-right: 15px;
}

.c-logo {
    display: flex;
    padding: 9px 32px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 20px;
    background: #fff;
    width: max-content;
    height: 90px;
    margin-right: 10px;
    overflow: hidden;
    filter: grayscale(1);
    transition: 0.3s all ease;
}

.c-logo:hover {
    filter: grayscale(0);
}

.c-logo p {
    color: #000;
    margin-bottom: 0;
}

.employeeOverview .c-logo {
    border: 1px solid #EBEBEB;
    box-shadow: 0px 0px 0px 0px rgba(226, 215, 255, 0);
    margin-right: 0;
}

.c-logo img {
    max-width: 140px;
}

.c-logo img.logo-4 {
    max-width: 120px;
}

.c-logo img.logo-14 {
    max-width: 120px;
}

.c-logo img.logo-7 {
    max-width: 180px;
}

.c-logo img.logo-17 {
    max-width: 180px;
}

.c-logo img.logo-33 {
    max-width: 180px;
}

.c-logo img.logo-19 {
    max-width: 110px;
}

.c-logo img.logo-12 {
    max-width: 110px;
}

.c-logo img.logo-35 {
    max-width: 110px;
}

.c-logo img.logo-11 {
    max-width: 140px;
}

.c-logo img.logo-21 {
    max-width: 168px;
}

.c-logo img.logo-34 {
    max-width: 140px;
}

.c-logo img.logo-30 {
    max-width: 100px;
}

.c-logo img.logo-23 {
    max-width: 180px;
}

.c-logo img.logo-1 {
    max-width: 180px;
}

.c-logo img.logo-8 {
    max-width: 99px;
}

.c-logo img.logo-25 {
    max-width: 59px;
}

.c-logo img.logo-10 {
    max-width: 59px;
}

@keyframes slides {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0%);
    }
}

.logoSlider h3.logoTitle {
    font-weight: bold;
    text-align: center;
    font-size: 25px;
    color: var(--primary-color);
    letter-spacing: normal;
    margin-bottom: 20px;
}

.logoSlider .section-title {
    max-width: 880px;
    margin: 0 auto 15px auto;
}

.section.logoSlider {
    text-align: center;
    overflow: hidden;
}

.section.logoSlider .cta-btn {
    margin-top: 30px;
}


/* =========================
   TESTIMONIAL SECTION
========================== */

.testimonial-section {
    background: #ffffff;
    overflow-x: hidden;
}

.testimonial-card {
    border-radius: 28px;
    overflow: hidden;
    height: 100%;
}

.testimonial-card .row {
    height: 100%;
}

.testimonial-img {
    height: 100%;
}

.testimonial-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-top-left-radius: 28px;
    border-bottom-left-radius: 28px;
}

.testimonial-content {
    position: relative;
    padding: 60px 55px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #F8F8F8;
}

.quote-icon {
    position: absolute;
    top: 21px;
    right: 48px;
    font-size: 70px;
    color: rgba(0, 0, 0, 0.08);
    font-weight: 600;
    display: flex;
    line-height: 1;
}

.testimonial-content h4 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #000;
    max-width: 350px;
}

.testimonial-content p {
    line-height: 40px;
    color: #000;
    margin-bottom: 30px;
}

.author {
    font-size: 16px;
    font-weight: 600;
    color: #4a9cd3;
}

.testimonialSwiper {
    position: relative;
    padding-bottom: 0;
}

.testimonialSwiper .swiper-wrapper {
    align-items: stretch;
}

.testimonialSwiper .swiper-slide {
    height: auto;
}

.testimonial-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 40px;
}

.testimonial-head-row .section-head {
    margin-bottom: 0;
}

.testimonial-nav-arrows {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding-top: 8px;
}

.t-prev-btn,
.t-next-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    background: #fff;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.t-prev-btn:hover,
.t-next-btn:hover {
    background: var(--primary-color);
    color: #fff;
}

.t-prev-btn.swiper-button-disabled,
.t-next-btn.swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.testimonial-pagination {
    display: none !important;
}

@media (max-width: 767px) {
    .testimonial-nav-arrows {
        display: none;
    }

    .testimonial-pagination {
        display: flex !important;
        justify-content: center;
        align-items: center;
        position: relative !important;
        bottom: auto !important;
        margin-top: 20px;
    }

    .testimonial-pagination .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        background: #ccc;
        opacity: 1;
        border-radius: 50%;
    }

    .testimonial-pagination .swiper-pagination-bullet-active {
        background: var(--primary-color);
        width: 22px;
        border-radius: 4px;
    }
}


/* =========================
   CTA SECTION
========================== */

.cta-section {
    background-color: #009FE1;
    display: flex;
    align-items: center;
}

.cta-image {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 100%;
    position: relative;
}

.cta-image img {
    max-height: 469px;
    object-fit: contain;
    position: absolute;
    bottom: -225px;
    width: 600px;
}

.cta-content {
    color: #ffffff;
}

.cta-content h2 {
    color: #fff;
    font-weight: 600;
    margin-bottom: 15px;
    /* heading now wraps to 2 lines - 1 left them flush with no leading */
    line-height: 1.2;
}

.cta-content p {
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 610px;
}



/* =========================
   FOOTER
========================== */

.main-footer {
    background-color: #009FE1;
    color: #ffffff;
    padding: 80px 0 20px;
}

.padding-2 {
    padding-left: 30px;
}

.padding-3 {
    padding-left: 40px;
}

.padding-4 {
    padding-left: 60px;
}

.main-footer h5 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 35px;
    color: #fff;
}

.main-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-footer ul li {
    margin-bottom: 30px;
    line-height: 1;
}

.main-footer ul li:last-child {
    margin-bottom: 0px;
}

.main-footer ul li a {
    text-decoration: none;
    color: #ffffff;
    font-size: 20px;
    transition: 0.3s;
}

.main-footer ul li a:hover {
    opacity: 1;
    text-decoration: none;
}

.main-footer p {
    margin-bottom: 20px;
}

.main-footer p.copyright {
    margin-bottom: 0px;
    font-size: 16px;
}

.main-footer hr {
    border-color: rgb(255 255 255 / 75%);
    margin: 40px 0 14px;
}

.footer-bottom {
    font-size: 16px;
}

.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    font-weight: 400;
    text-decoration: none;
    height: 38px;
    background: #ffffff;
    border-radius: 50%;
    color: #009FE1;
    margin-left: 10px;
    transition: 0.3s;
}

.social-icons a:hover {
    background: #D8346E;
    color: #ffffff;
}

/* =========================
   FOOTER "CRAFTED BY" CREDIT
   Sits between the copyright and the social icons.
   The heart SVG ships at 800x800 and the wordmark at 205px wide,
   so both are sized here rather than by their own attributes.
========================== */

.footer_crafted {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 16px;
    line-height: 1;
    color: #ffffff;
}

/* Direct child only - the wordmark is nested inside the link. */
.footer_crafted>svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.footer_crafted a {
    display: flex;
    align-items: center;
    margin-left: 2px;
}

.footer_crafted .logo-footer-new {
    width: 88px;
    height: auto;
    display: block;
}

/* The wordmark ships black; the footer is solid blue, so it is
   recoloured to match the white text around it. */
.footer_crafted .logo-footer-new path {
    fill: #ffffff;
}

/* The heart ships with an orange/navy split gradient; on the blue footer
   it is flattened to white to match the wordmark and copyright text.
   Deleting this rule restores the original gradient. */
.footer_crafted>svg path {
    fill: #ffffff;
}


/* =========================
   PADDING HELPERS
========================== */

.padding-5 {
    padding-left: 90px;
}

.contact-card {
    border-radius: 20px;
    overflow: hidden;
    background-color: #ffffff;
    background-size: cover;
    background-position: center;
    box-shadow: 0px 7px 20px 6px #0000000a;
}

.info-panel {
    padding: 36px 0px 36px 30px;
    color: #000;
    height: 100%;
}

.info-heading {
    font-size: clamp(28px, 4vw, 45px);
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 15px;
    line-height: 1.2;
    font-family: var(--primary-font);
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 9px;
    line-height: 1.5;
}

.check-icon svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin-top: -4px;
}

.ctc-pointer {
    padding: 20px 0;
    border-bottom: 1px solid rgb(107 107 107 / 10%);
    font-size: 1.25rem;
    width: 100%;
    color: #000;
    line-height: 1;
}

.feature-item:last-child .ctc-pointer {
    border-bottom: 0px solid rgba(255, 255, 255, 0.10);
}

.contact-detail {
    margin-bottom: 24px;
}

.contact-section-exp .contact-detail {
    margin-bottom: 45px;
}

.detail-label {
    color: #000;
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}

.detail-value {
    color: #000;
    margin-bottom: 2px;
}

.detail-small {
    color: #000;
    max-width: 570px;
}

.form-panel {
    padding: 36px 36px 36px 0px;
    display: flex;
    align-items: center;
    height: 100%;
}

.offcanvas-header,
.offcanvas-body {
    padding-left: 0;
    padding-right: 0;
}

.form-card {
    background-color: #f8f8f8;
    border-radius: 16px;
    padding: 32px 28px;
    width: 100%;
    height: 100%;
}

.field-label {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    color: #000;
    margin-bottom: 6px;
}

.req {
    color: #000;
    margin-left: 1px;
}

.field-input {
    display: block;
    width: 100%;
    background-color: #f3f3f3;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.87rem;
    color: #000000;
    outline: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #0000000f;
}

.field-input:focus {
    background-color: #e9ebe7;
    box-shadow: 0 0 0 2px rgb(58 155 220);
}

.field-textarea {
    resize: none;
    min-height: 90px;
}

.custom-check-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.custom-check-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.custom-check-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid #E5E5E5;
    border-radius: 4px;
    background-color: #F6F6F6;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.custom-check-tick {
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.15s ease, transform 0.15s ease;
    color: #fff;
    margin-top: 1px;
}

.custom-check-input:checked+.custom-check-box {
    background-color: #009FE1;
    border-color: #009FE1;
}

.custom-check-input:checked+.custom-check-box .custom-check-tick {
    opacity: 1;
    transform: scale(1);
}

.custom-check-input:focus-visible+.custom-check-box {
    box-shadow: 0 0 0 3px rgba(0, 204, 255, 0.28);
}

.custom-check-text {
    font-size: 0.875rem;
    color: #0000003b;
    font-weight: bold;
    line-height: 1.4;
}



/* ============================================================
   ABOUT PAGE STYLES
============================================================ */

.au-story-img {
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    min-height: 380px;
    max-height: 520px;
}

.au-story-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.au-journey-section {
    background: url(../img/bright-sight-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px;
    overflow: hidden;
}

.au-journey-section .section-title,
.au-journey-section h2 {
    text-align: left;
}

.au-journey-section .section-subtext {
    text-align: left;
    max-width: none;
}

.au-timeline-outer {
    width: 100%;
    margin-top: 48px;
    margin-bottom: 0;
}

.au-timeline-slider {
    display: flex;
    gap: 40px;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: relative;
    padding-left: max(1rem, calc((100vw - 1140px) / 2 + 12px));
    scroll-padding-left: max(1rem, calc((100vw - 1140px) / 2 + 12px));
    padding-right: 80px;
    padding-bottom: 4px;
}

.au-timeline-slider::-webkit-scrollbar {
    display: none;
}

.au-timeline-card {
    flex: 0 0 780px;
    scroll-snap-align: start;
    display: flex;
    align-items: flex-start;
    gap: 36px;
    background: transparent;
    flex-shrink: 0;
}

.au-tc-img {
    flex: 0 0 380px;
    height: 360px;
    border-radius: 16px;
    overflow: hidden;
}

.au-tc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.au-timeline-card:hover .au-tc-img img {
    transform: scale(1.04);
}

.au-tc-text {
    flex: 1 1 0;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.au-tc-year {
    display: block;
    font-size: 52px;
    font-weight: 700;
    color: var(--primary-color);
    font-family: var(--primary-font);
    line-height: 1;
    margin-bottom: 12px;
}

.au-tc-subtitle {
    display: inline-block;
    align-self: flex-start;
    font-size: 17px;
    font-weight: 600;
    color: var(--primary-color);
    font-family: var(--primary-font);
    border: 1.5px solid var(--primary-color);
    border-radius: 4px;
    padding: 3px 14px;
    margin-bottom: 20px;
}

.au-tc-text p {
    font-family: var(--primary-font);
    color: #000000;
    line-height: 1.65;
    margin-bottom: 10px;
}

.au-tc-text p:last-child {
    margin-bottom: 0;
}

.au-tc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.au-tc-list li {
    font-family: var(--primary-font);
    color: #000;
    line-height: 1.65;
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}

.au-tc-list li:last-child {
    margin-bottom: 0;
}

.au-tc-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    background: transparent;
}

.au-tc-year--range {
    font-size: 52px;
}

.au-timeline-indicator {
    position: relative;
    margin-top: 36px;
    height: 20px;
    display: flex;
    align-items: center;
}

.au-progress-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(59, 157, 223, 0.25);
    border-radius: 3px;
    transform: translateY(-50%);
}

.au-progress-fill {
    position: absolute;
    top: 50%;
    left: 0;
    height: 3px;
    background: var(--primary-color);
    border-radius: 3px;
    transform: translateY(-50%);
    transition: width 0.4s ease;
    width: 0%;
}

.au-dots-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 1;
}

.au-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid var(--primary-color);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.3s ease, transform 0.25s ease;
}

.au-dot.active {
    background: var(--primary-color);
    transform: scale(1.2);
}

@media (max-width: 767px) {

    .au-progress-track,
    .au-progress-fill {
        display: none;
    }

    .au-dots-row {
        justify-content: center;
        gap: 8px;
    }

    .au-dot {
        width: 8px;
        height: 8px;
        border-width: 0;
        background: #ccc;
    }

    .au-dot.active {
        background: var(--primary-color);
        width: 22px;
        border-radius: 4px;
        transform: none;
    }
}

.au-team-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    border: 1.5px solid #e2e8f0;
    padding: 14px 14px 20px;
    transition: border-color 0.3s ease, transform 0.3s ease;
    /* The bio overlay is a sibling of the image rather than a child of it,
       so that below 991px it can drop into normal flow underneath the name
       block. Here it is positioned back over the photo. */
    position: relative;
}

.au-team-card:hover {
    border-color: #b8cfe8;
    transform: translateY(-4px);
}

.au-team-img {
    height: 400px;
    overflow: hidden;
    border-radius: 12px;
    position: relative;
}

.au-team-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: filter 0.45s ease, transform 0.45s ease;
}

.au-team-card:hover .au-team-img img {
    filter: blur(4px);
    transform: scale(1.06);
}

/* Pinned over the photo: the card's padding is 14px and .au-team-img is
   400px tall, so these inset values track the image box exactly. Every
   breakpoint that changes those two numbers is 991px or below, where the
   overlay is taken out of position entirely (see responsive.css). */
.au-team-hover-overlay {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    height: 400px;
    border-radius: 12px;
    background: rgba(0, 48, 80, 0);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 24px;
    transition: background 0.4s ease;
    overflow: hidden;
}

.au-team-card:hover .au-team-hover-overlay {
    background: rgb(0 159 225);
}

.au-team-bio {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.45s ease, opacity 0.4s ease;
}

.au-team-card:hover .au-team-bio {
    max-height: 300px;
    opacity: 1;
}

.au-team-bio p {
    font-family: var(--primary-font);
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.65;
    margin: 0;
}

.story-padding {
    --bs-gutter-x: 3.5rem;
}

.team-padding {
    --bs-gutter-x: 3.5rem;
    --bs-gutter-y: 3.5rem;
}

.au-team-linkedin {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #009fe1;
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.25s ease;
}

.au-team-linkedin:hover {
    background: #005f94;
    color: #fff;
    transform: scale(1.1);
}

.au-team-info {
    padding: 16px 6px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.au-team-info-text {
    flex: 1 1 0;
    min-width: 0;
}

.au-team-name {
    font-family: var(--primary-font);
    font-size: 24px !important;
    font-weight: 700;
    color: #111 !important;
    margin-bottom: 6px !important;
    line-height: 1.3;
}

.au-team-role {
    font-family: var(--primary-font);
    color: #000000;
    margin: 0;
    line-height: 1.4;
}

/* Team section - solid brand-blue background with a subtle dot pattern.
   Team cards themselves stay white (.au-team-card), so only the heading
   text and slider pagination dots need contrast adjustments here. */
.au-team-blue-bg {
    /* background: url(../img/bright-sight-bg.webp); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#story {
    background: url(../img/bright-sight-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ===========================
   TEAM SLIDER
   =========================== */
@media (min-width: 767px) {
    .team-slider {
        overflow: visible !important;
    }

    .team-slider .swiper-wrapper {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        transform: none !important;
        transition: none !important;
        width: 100% !important;
    }

    .team-slider .swiper-slide {
        width: auto !important;
        margin: 0 !important;
        height: auto !important;
    }

    .team-slider-dots {
        display: none !important;
    }
}

@media (min-width: 767px) and (max-width: 991px) {
    .team-slider .swiper-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 766px) {
    .team-slider {
        overflow: hidden;
        padding-bottom: 44px;
    }

    .team-slider-dots {
        bottom: 0;
    }

    .team-slider-dots .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        background: #c0cdd8;
        opacity: 1;
        border-radius: 50%;
        transition: all 0.3s ease;
    }

    .team-slider-dots .swiper-pagination-bullet-active {
        background: var(--primary-color);
        width: 22px;
        border-radius: 10px;
    }
}

.au-partners-section {
    background: #f8fafd;
}

.au-partners-section .section-title {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.au-partners-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 32px 56px;
    margin-top: 52px;
}

.au-partner-logo {
    font-family: var(--primary-font);
    font-size: 17px;
    font-weight: 700;
    color: #9aabbb;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.25s ease;
}

.au-partner-logo:hover {
    color: var(--primary-color);
}

.au-partner-logo--vision {
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.au-partner-logo--vision i {
    font-size: 20px;
    color: var(--primary-color);
}

/* ---- ABOUT - VISION & MISSION STACK ----
   Sizing is fluid (clamp) so the cards scale continuously from 320px to
   1920px with no snap points. The only breakpoint is the row -> column
   switch at 767px, handled in responsive.css. */
.au-mv-section .section-title {
    margin-bottom: clamp(24px, 2.4vw, 34px);
}

.au-mv-stack {
    margin: 0 auto;
}

.au-mv-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: clamp(14px, 1.8vw, 26px);
    padding: clamp(22px, 2.4vw, 65px) clamp(20px, 2.8vw, 40px);
    border-radius: clamp(16px, 1.5vw, 22px);
    color: #fff;
}

.au-mv-card--vision {
    background: var(--primary-color);
    padding-bottom: 96px;
}

/* Sits slightly under the vision card, ringed in white to cut the seam */
.au-mv-card--mission {
    background-color: #D8346E;
    margin-top: -56px;
    box-shadow: 0 0 0 clamp(4px, 0.6vw, 1px) var(--background-white);
    z-index: 2;
}

.au-mv-body {
    min-width: 0;
}

.au-mv-title {
    font-family: var(--primary-font);
    font-size: clamp(19px, 0.9vw + 12px, 25px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.au-mv-card p {
    line-height: 1.6;
    color: #fff;
    /* caps the measure at a readable ~68 characters on wide screens */
    margin-bottom: 0;
}

.au-mv-lead {
    margin-bottom: clamp(12px, 1.2vw, 16px) !important;
    color: #fff !important;
}

.au-mv-list {
    list-style: none;
    margin: 0 0 clamp(16px, 1.6vw, 22px);
    padding: 0;
}

.au-mv-list li {
    display: flex;
    align-items: flex-start;
    gap: clamp(9px, 0.9vw, 12px);
    font-size: clamp(17px, 0.55vw + 13.9px, 20px);
    line-height: 1.6;
    color: #fff;
    max-width: 68ch;
    margin-bottom: clamp(9px, 0.9vw, 12px);
}

.au-mv-list li:last-child {
    margin-bottom: 0;
}

/* Round bullet in place of the old tick icon. Drawn in CSS rather than as
   an <i>, so the list carries no icon-font dependency. margin-top optically
   centres it against the cap height of the first line. */
.au-mv-list li::before {
    content: "";
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-top: 0.5em;
    border-radius: 50%;
    border: 3px solid #ffffff;
    background: transparent;
}

.au-mv-taglines {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(8px, 0.9vw, 12px);
}

.au-mv-tag {
    font-family: var(--primary-font);
    font-weight: 400;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 100px;
    padding: clamp(6px, 0.7vw, 8px) clamp(14px, 1.6vw, 20px);
}

.au-mv-tag--accent {
    background: var(--primary-color);
}


/* ============================================================
   DONATE PAGE STYLES
============================================================ */

.dn-form-section {
    position: relative;
    z-index: 10;
    margin-top: -90px;
    padding: 0 0 20px;
    background: transparent;
}

.dn-form-card {
    background: #ffffff;
    border: 1px solid #e4eaf0;
    border-radius: 16px;
    padding: 44px 48px 36px;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.07);
}

.dn-form-section+.section {
    padding-top: 40px;
}

.dn-field-group {
    margin-bottom: 20px;
}

.dn-label {
    display: block;
    font-family: var(--primary-font);
    font-size: 15px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 8px;
}

.dn-label-note {
    font-weight: 400;
    color: #000000;
    font-size: 13px;
}

.dn-input {
    width: 100%;
    height: 56px;
    border: 1.5px solid #dde3ea;
    border-radius: 8px;
    padding: 0 14px;
    font-family: var(--primary-font);
    font-size: 17px;
    color: #000000;
    background: #fff;
    transition: border-color 0.25s ease;
    outline: none;
}

textarea.dn-input {
    width: 100%;
    height: 92px;
    border: 1.5px solid #dde3ea;
    border-radius: 8px;
    padding: 11px 14px;
    font-family: var(--primary-font);
    font-size: 17px;
    color: #000000;
    background: #fff;
    transition: border-color 0.25s ease;
    outline: none;
}

.dn-input:focus {
    border-color: var(--primary-color);
}

.dn-input::placeholder {
    color: #b0b8c4;
}

.dn-freq-toggle {
    display: flex;
    border: 1.5px solid var(--primary-color);
    border-radius: 8px;
    overflow: hidden;
}

.dn-freq-btn {
    flex: 1;
    height: 46px;
    border: none;
    background: #fff;
    font-family: var(--primary-font);
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-color);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
}

.dn-freq-btn.active {
    background: var(--primary-color);
    color: #fff;
}

.dn-freq-btn:not(.active):hover {
    background: rgba(59, 157, 223, 0.08);
}

.dn-amount-input-wrap {
    display: flex;
    align-items: center;
    border: 1.5px solid #dde3ea;
    border-radius: 8px;
    overflow: visible;
    background: #fff;
    transition: border-color 0.25s ease;
    position: relative;
}

.dn-amount-input-wrap:focus-within {
    border-color: var(--primary-color);
}

.dn-country-dropdown {
    position: relative;
    flex-shrink: 0;
    border-right: 1.5px solid #dde3ea;
}

.dn-country-trigger {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 48px;
    padding: 0 10px 0 12px;
    background: #fff;
    border: none;
    border-radius: 7px 0 0 7px;
    cursor: pointer;
    font-family: var(--primary-font);
    font-size: 14px;
    font-weight: 600;
    color: #000000;
    white-space: nowrap;
}

.dn-country-trigger:focus {
    outline: none;
}

.dn-flag-img {
    width: 22px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

.dn-drop-arrow {
    font-size: 16px;
    color: #000000;
    transition: transform 0.2s ease;
}

.dn-country-dropdown.open .dn-drop-arrow {
    transform: rotate(180deg);
}

.dn-country-list {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 130px;
    background: #fff;
    border: 1.5px solid #dde3ea;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
    list-style: none;
    padding: 6px 0;
    margin: 0;
    z-index: 100;
    overflow: hidden;
}

.dn-country-dropdown.open .dn-country-list {
    display: block;
}

.dn-country-opt {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    cursor: pointer;
    font-family: var(--primary-font);
    font-size: 14px;
    font-weight: 600;
    color: #000000;
    transition: background 0.15s ease;
}

.dn-country-opt:hover {
    background: #f0f6fc;
}

.dn-country-opt.active {
    background: rgba(59, 157, 223, 0.10);
    color: var(--primary-color);
}

.dn-country-opt img {
    width: 22px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

.dn-custom-input {
    flex: 1;
    height: 48px;
    border: none;
    outline: none;
    padding: 0 14px;
    font-family: var(--primary-font);
    font-size: 15px;
    color: #000000;
    background: transparent;
    border-radius: 0 7px 7px 0;
}

.dn-custom-input::placeholder {
    color: #b0b8c4;
}

.dn-custom-input::-webkit-outer-spin-button,
.dn-custom-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.dn-custom-input[type=number] {
    -moz-appearance: textfield;
}

.dn-amount-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.dn-preset {
    height: 52px;
    padding: 0 24px;
    border: 1.5px solid #dde3ea;
    border-radius: 8px;
    background: #fff;
    font-family: var(--primary-font);
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.dn-preset:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.dn-preset.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.dn-submit-wrap {
    margin-top: 28px;
}

.dn-submit-btn {
    width: 100%;
    background: #D8346E;
    border: none;
    border-radius: 10px;
    font-family: var(--primary-font);
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease;
    text-transform: uppercase;
    padding: 12px 18px;
    width: max-content;
}

.dn-submit-btn:hover {
    background: #D8346E;
    transform: translateY(-2px);
}

.dn-consent {
    margin-top: 14px;
}

.dn-check-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--primary-font);
    font-size: 14px;
    color: #000000;
    cursor: pointer;
}

.dn-check {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.dn-impact-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 380px;
}

.dn-impact-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.dn-impact-card:hover img {
    transform: scale(1.05);
}

.dn-impact-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.18) 50%, transparent 100%);
    display: flex;
    align-items: flex-end;
    padding: 28px 24px;
}

.dn-impact-overlay h5 {
    font-family: var(--primary-font);
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin: 0;
}


/* ============================================================
   VISION CENTER STYLES
============================================================ */

.vc-blue-bg {
    background: var(--primary-color) !important;
    background-image: none !important;
}

.vc-eyebrow {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--primary-font);
    margin-bottom: 10px;
}

.vc-donations-section {
    /* background: url(../img/bright-sight-bg.webp); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.vc-donations-section.vc-donations-section-new {
    background: url(../img/bright-sight-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.benefit-section-new.happening {
    background: url(../img/bright-sight-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.youtube-section {
    background: url(../img/bright-sight-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.youtube-section.approach-section {
    background: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.what-we-do-section {
    background: url(../img/bright-sight-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.faq-section {
    background: url(../img/bright-sight-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* programme pages: plain white FAQ above the newsletter band */
.faq-section.faq-section--white {
    background: #fff;
}

.benefit-section.life-benfit .section-head {
    margin-bottom: 0;
    padding-right: 40px;
}

/* A Life Improved by Vision - story slider.
   Text (left) and photo (right) are two Swiper sliders kept in sync by the
   inline script on community-eye-camps.html. The arrows reuse .t-prev-btn. */
.life-story-text-swiper .swiper-slide {
    height: auto;
}

.life-story-img-swiper {
    height: 100%;
}

/* The portraits have faces in the upper half - when the frame is shallow
   (tablet) crop from the bottom rather than trimming heads/helmets. */
.life-story-img-swiper img {
    object-position: center 20%;
}

.life-story-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
}

.life-story-prev,
.life-story-next {
    flex-shrink: 0;
}

/* Swiper gives horizontal bullets width:100% - keep them to their own size
   so they sit beside the arrows (needs the extra class to win on specificity) */
.life-story-controls .life-story-pagination.swiper-pagination-bullets {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: auto;
    margin-left: 10px;
}

.life-story-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 4px;
    background: rgba(0, 159, 225, 0.35);
    opacity: 1;
    border-radius: 50%;
    transition: width 0.25s ease, background 0.25s ease;
}

.life-story-pagination .swiper-pagination-bullet-active {
    width: 22px;
    background: var(--primary-color);
    border-radius: 4px;
}

.vc-stack-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.vc-sc-card {
    position: sticky;
    top: calc(88px + var(--card-index, 0) * 18px);
    z-index: calc(10 + var(--card-index, 0));
    background: var(--card-bg, #1D3461);
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 28px;
    box-shadow: 0 16px 56px rgba(0, 0, 0, 0.20);
}

.vc-sc-card:last-child {
    margin-bottom: 0;
}

.vc-sc-text {
    padding: 52px 50px 52px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vc-sc-text h3 {
    color: #ffffff;
    font-size: 34px;
    margin-bottom: 24px;
    line-height: 1.2;
}

.vc-sc-text p {
    font-family: var(--primary-font);
    color: rgb(255, 255, 255);
    margin-bottom: 18px;
}

.vc-sc-text p:last-child {
    margin-bottom: 0;
}

.vc-sc-img {
    padding: 20px 20px 20px 0;
    display: flex;
    align-items: stretch;
}

.vc-sc-img img {
    width: 100%;
    height: 100%;
    max-height: 480px;
    min-height: 200px;
    object-fit: cover;
    border-radius: 14px;
    display: block;
}

.vc-img-rounded {
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    min-height: 300px;
}

.vc-img-rounded img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vc-blue-bg .section-subtext,
.vc-blue-bg p.section-subtext {
    color: rgba(255, 255, 255, 0.78);
}

.vc-student-intro {
    font-style: italic;
    color: #000;
    margin-bottom: 28px;
}

.vc-student-body {
    color: #000000;
    margin-bottom: 18px;
}

.vc-student-watermark {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.vc-student-watermark img {
    position: absolute;
    right: 0;
    width: 36%;
    bottom: 0;
}

.vc-unique-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vc-unique-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #eef3f8;
}

.vc-unique-list li:last-child {
    border-bottom: none;
}

.vc-unique-list li::before {
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2.5px solid var(--primary-color);
    background: transparent;
    flex-shrink: 0;
    margin-top: 5px;
}

.vc-unique-list li span {
    font-family: var(--primary-font);
    font-weight: 400;
    font-size: 20px;
    color: #000000;
    line-height: 1.6;
}

.service-card.vc-measure-card {
    height: 520px;
    border-radius: 20px;
    cursor: pointer;
}

/* Image - smooth scale + subtle blur, both in sync */
.vc-measure-card img {
    transition: filter 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.vc-measure-card:hover img {
    filter: blur(3px);
    transform: scale(1.05);
}

/* Overlay - smooth gradient → flat darken */
.vc-measure-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 30px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    text-align: left !important;
    background: linear-gradient(to top,
            rgba(0, 48, 80, 0.82) 0%,
            rgba(0, 48, 80, 0.50) 30%,
            rgba(0, 48, 80, 0.08) 56%,
            transparent 76%) !important;
    transition: background 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.vc-measure-card:hover .vc-measure-overlay {
    background: rgba(0, 48, 80, 0.76) !important;
}

/* Title - stays at bottom, lifts naturally as body fills in below */
.vc-measure-overlay h5 {
    color: #fff !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 0 !important;
    max-width: 100% !important;
    text-align: left !important;
    transition: margin-bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.vc-measure-card:hover .vc-measure-overlay h5 {
    margin-bottom: 12px !important;
}

/* Body - clipped at 0, slides up from below */
.vc-measure-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px);
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.07s,
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.vc-measure-card:hover .vc-measure-body {
    /* headroom for the 20px body scale - the panel only ever renders
       its natural height, so a looser cap does not change layout */
    max-height: 420px;
    opacity: 1;
    transform: translateY(0);
}

.vc-measure-body p {
    color: rgba(255, 255, 255, 0.88) !important;
    line-height: 1.7 !important;
    margin-bottom: 14px !important;
    font-family: var(--primary-font) !important;
}

.vc-measure-body p:last-child {
    margin-bottom: 0 !important;
}

.service-card.vc-happenings {
    height: 220px;
}

.vc-report-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.vc-report-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.14);
}

.vc-report-cover {
    height: 340px;
    overflow: hidden;
}

.vc-report-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.vc-report-card:hover .vc-report-cover img {
    transform: scale(1.04);
}

.vc-report-info {
    padding: 16px 18px 18px;
}

.vc-report-title {
    font-family: var(--primary-font);
    color: #000000;
    line-height: 1.55;
    margin-bottom: 14px !important;
}

.vc-download-link {
    display: block;
    text-align: center;
    color: var(--secondary-color);
    font-size: 13px;
    font-weight: 700;
    font-family: var(--primary-font);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 12px 0 2px;
    border-top: 1px solid #eee;
    transition: opacity 0.2s ease;
}

.vc-download-link:hover {
    opacity: 0.7;
    color: var(--secondary-color);
}

.vc-reports-slider-wrap {
    position: relative;
    padding: 0 50px;
}

.vc-reports-swiper {
    padding: 10px 12px 40px 12px !important;
}

.vc-reports-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    background: #fff;
    color: var(--primary-color);
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s ease, color 0.2s ease;
    line-height: 1;
}

.vc-reports-arrow:hover {
    background: var(--primary-color);
    color: #fff;
}

.vc-reports-prev {
    left: 0;
}

.vc-reports-next {
    right: 0;
}

.vc-reports-arrow.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.vc-reports-pagination {
    display: none;
    text-align: center;
    margin-top: 18px;
}

.vc-reports-pagination .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    background: #ccc;
    opacity: 1;
    margin: 0 4px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.vc-reports-pagination .swiper-pagination-bullet-active {
    background: var(--primary-color);
    transform: scale(1.25);
}

.vc-dual-cta-section {
    padding: 0;
    display: none;
}

.vc-dual-cta-section .cta-cec-1,
.vc-dual-cta-section .cta-vc-1,
.vc-dual-cta-section .cta-cc-1,
.vc-dual-cta-section .cta-as-1 {
    margin-right: 10px;
}

.vc-dual-cta-section .cta-cec-2,
.vc-dual-cta-section .cta-vc-2,
.vc-dual-cta-section .cta-cc-2,
.vc-dual-cta-section .cta-as-2 {
    margin-left: 10px;
}

.cta-btn.red {
    background: #D8346E;
}

.cta-btn.blue {
    background: #009FE1;
}

.vc-cta-block {
    display: flex;
    align-items: stretch;
    height: 100%;
    border-radius: 0 20px 20px 0;
    overflow: hidden;
    min-height: 340px;
    background: #009FE1;
}

.vc-cta-block--alt {
    border-radius: 20px 0 0 20px;
    background: #D8346E;
}

.vc-cta-content {
    flex: 1 1 0;
    padding: 52px 20px 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vc-cta-content h2 {
    color: #fff;
    max-width: 680px;
    margin-bottom: 28px;
    line-height: 1.3;
}

.vc-cta-btn {
    align-self: flex-start;
    width: auto !important;
    /* Horizontal padding intentionally not set here - these buttons take the
       shared CTA sizing at the end of responsive.css, same as the home page. */
}

.vc-cta-btn.red:hover {
    background-color: #D8346E;
    color: #fff;
    transform: translateY(-2px);
}

.btn.cta-btn.vc-cta-btn.net {
    background-color: #D8346E !important;
}

.vc-cta-btn.net:hover {
    background-color: #D8346E;
    color: #fff;
    transform: translateY(-2px);
}

.vc-cta-btn.cta-btn:hover {
    background-color: #D8346E;
    color: #fff;
}

.vc-cta-person {
    flex-shrink: 0;
    width: 195px;
    display: flex;
    align-items: flex-end;
}

.vc-cta-person img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: top center;
}


/* ============================================================
   IMPACT STORIES STYLES
============================================================ */

:root {
    --cat-education: #009FE1;
    --cat-livelihoods: #E07A39;
    --cat-farming: #2E9966;
    --cat-independence: #7B5EA8;
}

.page-hero {
    background: var(--primary-color);
    height: 600px;
    min-height: 600px;
    padding: 91px 0 0 0;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.page-hero::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

.page-hero::after {
    content: '';
    position: absolute;
    bottom: -120px;
    left: -50px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    pointer-events: none;
}

.page-hero .hero-label {
    display: inline-block;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 30px;
    margin-bottom: 16px;
    font-family: var(--primary-font);
}

.page-hero h1 {
    color: #fff;
    line-height: 1.15;
    margin-bottom: 18px;
    max-width: 700px;
}

.page-hero .hero-sub {
    color: rgb(255, 255, 255);
    max-width: 600px;
    margin-bottom: 0;
}

.hero-stats-strip {
    display: flex;
    gap: 48px;
    margin-top: 50px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    flex-wrap: wrap;
}

.hero-stat-num {
    display: block;
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    font-family: var(--primary-font);
}

.hero-stat-label {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.72);
    margin-top: 5px;
    font-family: var(--primary-font);
}

.filter-section {
    background: #fff;
    padding: 22px 0;
    border-bottom: 1px solid #eaeff5;
    position: sticky;
    top: 68px;
    z-index: 99;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.05);
}

.filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-count {
    margin-left: auto;
    font-size: 14px;
    color: #777;
    font-family: var(--primary-font);
    font-weight: 600;
    white-space: nowrap;
}

.filter-btn {
    background: #f2f5f9;
    border: 2px solid transparent;
    color: #000000;
    padding: 9px 22px;
    border-radius: 30px;
    font-size: 15px;
    /* bumped from 13px for low-vision */
    font-weight: 700;
    font-family: var(--primary-font);
    cursor: pointer;
    transition: all 0.22s ease;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.filter-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: #EBF7FF;
}

.filter-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.filter-btn[data-filter="education"].active {
    background: var(--cat-education);
    border-color: var(--cat-education);
}

.filter-btn[data-filter="livelihoods"].active {
    background: var(--cat-livelihoods);
    border-color: var(--cat-livelihoods);
}

.filter-btn[data-filter="farming"].active {
    background: var(--cat-farming);
    border-color: var(--cat-farming);
}

.filter-btn[data-filter="independence"].active {
    background: var(--cat-independence);
    border-color: var(--cat-independence);
}

.stories-section {
    background: #F5F8FC;
}

.story-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid #edf1f7;
}

.story-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 44px rgba(59, 157, 223, 0.15);
}

.story-card-img {
    position: relative;
    height: 240px;
    overflow: hidden;
    flex-shrink: 0;
}

.story-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.story-card:hover .story-card-img img {
    transform: scale(1.06);
}

.story-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.5) 35%,
            rgba(0, 0, 0, 0.08) 65%,
            transparent 85%);
    pointer-events: none;
}

.category-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 20px;
    color: #fff;
    font-size: 14px !important;
    line-height: 1;
    font-family: var(--primary-font);
}

.category-badge.education,
.category-badge.livelihoods,
.category-badge.farming,
.category-badge.independence {
    background: var(--primary-color);
}

.story-card-name-overlay {
    position: absolute;
    bottom: 14px;
    left: 16px;
    right: 16px;
    z-index: 2;
}

.story-card-name-overlay h5 {
    color: #fff;
    margin-bottom: 3px;
    line-height: 1.2;
}

.story-card-name-overlay .location {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--primary-font);
}

.story-card-body {
    padding: 20px 16px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.story-excerpt {
    line-height: 1.6;
    color: #000000;
    flex: 1;
    margin-bottom: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.story-read-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--primary-color);
    font-size: 16px;
    /* bumped from 14px for low-vision */
    font-weight: 700;
    font-family: var(--primary-font);
    text-decoration: none;
    letter-spacing: 0.04em;
    padding: 0;
    background: none;
    border: none;
    transition: gap 0.2s ease;
}

.story-read-btn:hover {
    color: var(--primary-color);
    gap: 12px;
}

.impact-banner {
    background: #0d2d4a;
    padding: 64px 0;
    text-align: center;
}

.impact-banner h2 {
    color: #fff;
    margin-bottom: 12px;
}

.impact-banner p {
    color: rgba(255, 255, 255, 0.85);
    max-width: 720px;
    margin: 0 auto 28px;
}

.story-hero-section {
    background: var(--primary-color);
    padding: 80px 0 80px;
    min-height: auto;
    position: relative;
    overflow: hidden;
}

.story-hero-section::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -60px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.story-hero-section::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -40px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    pointer-events: none;
}

.story-hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
}

.story-hero-breadcrumb a {
    color: rgba(255, 255, 255, 0.68);
    text-decoration: none;
    font-size: 15px;
    /* bumped from 13px for low-vision */
    font-family: var(--primary-font);
    transition: color 0.2s;
}

.story-hero-breadcrumb a:hover {
    color: #fff;
}

.story-hero-breadcrumb .sep {
    color: rgba(255, 255, 255, 0.4);
    font-size: 15px;
    /* bumped from 13px for low-vision */
}

.story-hero-breadcrumb .current {
    color: #fff;
    font-size: 15px;
    /* bumped from 13px for low-vision */
    font-weight: 600;
    font-family: var(--primary-font);
}

.story-hero-img-wrap {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    height: 450px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
}

.story-hero-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.story-hero-img-pill {
    position: absolute;
    bottom: 18px;
    left: 18px;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 12px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 18px;
    backdrop-filter: blur(6px);
}

.story-hero-img-pill .pill-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #000000;
    font-family: var(--primary-font);
}

.story-hero-img-pill .pill-item i {
    color: var(--primary-color);
    font-size: 15px;
}

.story-hero-img-pill .pill-divider {
    width: 1px;
    height: 20px;
    background: #ddd;
}

.story-hero-content {
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.story-hero-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-family: var(--primary-font);
    color: #fff;
    margin-bottom: 20px;
    width: max-content;
}

.story-hero-badge.education,
.story-hero-badge.livelihoods,
.story-hero-badge.farming,
.story-hero-badge.independence {
    background: #ffffff30;
}

.story-hero-content h1 {
    color: #fff;
    line-height: 1.12;
    margin-bottom: 18px;
}

.story-hero-tagline {
    color: rgb(255, 255, 255);
    line-height: 1.6;
    margin-bottom: 30px;
    font-style: italic;
}

.story-hero-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.story-hero-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    color: rgb(255 255 255);
    font-family: var(--primary-font);
}

.story-hero-meta-item i {
    font-size: 17px;
    opacity: 0.75;
}

.story-body-section {
    background: #fff;
    padding: 72px 0 60px;
}

.story-sidebar {
    position: sticky;
    top: 120px;
}

.story-at-glance {
    background: #ffffff;
    border-radius: 18px;
    padding: 28px 26px;
    border: 1px solid #dce8f4;
}

.story-at-glance .glance-title {
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 20px;
    font-weight: 700;
    font-family: var(--primary-font);
}

.glance-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 0;
    border-bottom: 1px solid #dce8f4;
}

.glance-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.glance-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #EBF7FF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.glance-icon i {
    color: var(--primary-color);
    font-size: 17px;
}

.glance-label {
    display: block;
    font-size: 11px;
    color: #000000;
    font-family: var(--primary-font);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 3px;
}

.glance-value {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    line-height: 1.35;
}

.sidebar-donate {
    background: var(--primary-color);
    border-radius: 18px;
    padding: 28px 26px;
    margin-top: 20px;
    text-align: center;
}

.sidebar-donate h5 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 20px;
}

.sidebar-donate p {
    color: rgb(255, 255, 255);
    line-height: 1.6;
    margin-bottom: 18px;
}

.sidebar-donate .btn {
    background: #fff;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 16px;
    padding: 10px 24px;
    border-radius: 10px;
    font-family: var(--primary-font);
    width: 100%;
    transition: 0.2s;
    text-transform: uppercase;
}

.sidebar-donate .btn:hover {
    background: #fff;
    transform: translateY(-2px);
}

.story-body-text p {
    color: #000000;
    line-height: 1.75;
    margin-bottom: 22px;
}

.story-pull-quote {
    border-left: 4px solid var(--primary-color);
    padding: 20px 28px;
    margin: 38px 0;
    background: #EBF7FF;
    border-radius: 0 14px 14px 0;
}

.story-pull-quote p {
    font-style: italic;
    color: var(--primary-color) !important;
    line-height: 1.65;
    margin-bottom: 0 !important;
}

.care-section {
    background: #EBF7FF;
    padding: 100px 0;
}

.care-section-title {
    margin-bottom: 8px;
}

.care-section-sub {
    color: #000000;
    margin-bottom: 0px;
}

.care-item {
    background: #fff;
    border-radius: 16px;
    padding: 30px 24px;
    text-align: center;
    height: 100%;
    border: 1px solid rgba(59, 157, 223, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.care-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 28px rgba(59, 157, 223, 0.12);
}

.care-item-icon {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #EBF7FF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.care-item-icon i {
    font-size: 26px;
    color: var(--primary-color);
}

.care-item h5 {
    margin-bottom: 8px;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 25px;
}

.care-item p {
    color: #000;
    margin-bottom: 0;
    line-height: 1.6;
}

.story-navigation {
    background: #fff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 20px 0;
}

.story-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.story-nav-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #000000;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--primary-font);
    transition: color 0.2s;
    padding: 8px 0;
}

.story-nav-btn:hover {
    color: var(--primary-color);
}

.story-nav-btn i {
    font-size: 18px;
}

.story-nav-btn .nav-story-name {
    font-size: 13px;
    color: #999;
    font-weight: 400;
    display: block;
    margin-top: 2px;
}

.story-nav-center {
    display: flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 700;
    font-family: var(--primary-font);
}

.related-section {
    background: #F5F8FC;
    padding: 100px 0;
}

.related-section .related-heading {
    margin-bottom: 6px;
}

.related-section .related-sub {
    color: #000000;
}

.no-results-msg {
    text-align: center;
    padding: 60px 0;
    color: #999;
    display: none;
}

/* ============================================================
   BLOG LISTING PAGE
============================================================ */
/* ============================================================
   BLOG LISTING PAGE - blog.css
   Uses CSS variables from main.css
============================================================ */

/* ============================================================
   CATEGORY COLOUR PALETTE
============================================================ */

:root {
    --cat-eye-health: #009FE1;
    --cat-success-stories: #2E9966;
    --cat-community: #E07A39;
    --cat-awareness: #7B5EA8;
    --cat-news: #DF3B3B;
}

/* ============================================================
   BLOG BANNER
============================================================ */

.blog-banner {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* padding-top: 80px; */
    height: 700px;
    min-height: 700px;
    max-height: 700px;
}

.blog-banner-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.blog-banner-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    display: block;
}



.blog-banner-content {
    position: relative;
    z-index: 2;
    padding: 80px 0 70px;
}

/* Breadcrumb - compact UI chrome */
.blog-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    list-style: none;
    padding: 0;
}

.blog-breadcrumb li {
    font-size: 13px;
    font-family: var(--primary-font);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.70);
    letter-spacing: 0.04em;
}

.blog-breadcrumb li a {
    color: rgba(255, 255, 255, 0.70);
    text-decoration: none;
    transition: color 0.2s;
}

.blog-breadcrumb li a:hover {
    color: #fff;
}

.blog-breadcrumb li.active {
    color: #fff;
}

.blog-breadcrumb .sep {
    color: rgba(255, 255, 255, 0.40);
    font-size: 11px;
}

/* Pill label */
.blog-banner-label {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: 30px;
    margin-bottom: 18px;
    font-family: var(--primary-font);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* h1 inherits from main.css */
.blog-banner-content h1 {
    color: #fff;
    margin-bottom: 16px;
    max-width: 700px;
    line-height: 1.15;
}

.blog-banner-content p {
    color: rgba(255, 255, 255, 0.85);
    max-width: 560px;
    margin-bottom: 0;
}

/* Decorative circles */
.blog-banner::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    z-index: 1;
    pointer-events: none;
}

.blog-banner::after {
    content: '';
    position: absolute;
    bottom: -120px;
    left: -60px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    z-index: 1;
    pointer-events: none;
}

/* ============================================================
   FILTER BAR
============================================================ */

.blog-filter-section {
    background: #fff;
    padding: 20px 0;
    border-bottom: 1px solid #eaeff5;
    position: sticky;
    top: 68px;
    z-index: 99;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.05);
}

.blog-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Compact count badge */
.blog-filter-count {
    margin-left: auto;
    font-size: 14px;
    color: #777;
    font-family: var(--primary-font);
    font-weight: 600;
    white-space: nowrap;
}

/* Filter buttons - compact UI chrome */
.blog-filter-btn {
    background: #f2f5f9;
    border: 2px solid transparent;
    color: #000000;
    padding: 9px 22px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--primary-font);
    cursor: pointer;
    transition: all 0.22s ease;
    letter-spacing: 0.04em;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.blog-filter-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: #EBF7FF;
}

.blog-filter-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.blog-filter-btn[data-filter="eye-health"].active {
    background: var(--cat-eye-health);
    border-color: var(--cat-eye-health);
}

.blog-filter-btn[data-filter="success-stories"].active {
    background: var(--cat-success-stories);
    border-color: var(--cat-success-stories);
}

.blog-filter-btn[data-filter="community"].active {
    background: var(--cat-community);
    border-color: var(--cat-community);
}

.blog-filter-btn[data-filter="awareness"].active {
    background: var(--cat-awareness);
    border-color: var(--cat-awareness);
}

.blog-filter-btn[data-filter="news"].active {
    background: var(--cat-news);
    border-color: var(--cat-news);
}

/* ============================================================
   BLOG GRID SECTION
============================================================ */

.blog-section {
    background: #F5F8FC;
}

/* ============================================================
   BLOG CARD
============================================================ */

.blog-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid #edf1f7;
}

.blog-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 44px rgba(59, 157, 223, 0.15);
}

/* Card image */
.blog-card-img {
    position: relative;
    height: 300px;
    overflow: hidden;
    flex-shrink: 0;
}

.blog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-card-img img {
    transform: scale(1.06);
}

/* Category badge - matches impact-stories style */
.blog-cat-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 20px;
    color: #fff;
    font-family: var(--primary-font);
}

.blog-cat-badge.eye-health {
    background: var(--cat-eye-health);
}

.blog-cat-badge.success-stories {
    background: var(--cat-success-stories);
}

.blog-cat-badge.community {
    background: var(--cat-community);
}

.blog-cat-badge.awareness {
    background: var(--cat-awareness);
}

.blog-cat-badge.news {
    background: var(--cat-news);
}

/* Card body */
.blog-card-body {
    padding: 22px 24px 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Title - h3 inherits clamp(20px, 2.5vw, 24px) from main.css */
.blog-card-title {
    color: #009fe1;
    font-size: 25px;
    margin-bottom: 12px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}

.blog-card:hover .blog-card-title {
    color: #D8346E;
}

/* Excerpt */
.blog-excerpt {
    line-height: 1.65;
    color: #5a6370;
    flex: 1;
    margin-bottom: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--primary-font);
}

/* Author + date meta - compact UI chrome */
.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.blog-author,
.blog-date {
    font-size: 12px;
    color: #8a94a6;
    font-family: var(--primary-font);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.02em;
}

.blog-author i,
.blog-date i {
    font-size: 13px;
    color: var(--primary-color);
}

/* Divider between meta and read-more */
.blog-card-footer {
    border-top: 1px solid #edf1f7;
    padding-top: 14px;
}

/* "Read More →" - compact UI link */
.blog-read-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 700;
    font-family: var(--primary-font);
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: gap 0.2s ease;
}

.blog-read-btn:hover {
    color: var(--primary-color);
    gap: 12px;
}

/* ============================================================
   CARD WRAPPER - FILTER ANIMATION
============================================================ */

.blog-card-wrapper {
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.blog-card-wrapper.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    display: none;
}

.blog-card-wrapper.fade-in {
    animation: blogFadeIn 0.38s ease forwards;
}

@keyframes blogFadeIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* No results */
.blog-no-results {
    display: none;
    text-align: center;
    font-family: var(--primary-font);
    color: #8a94a6;
    padding: 60px 0;
    width: 100%;
}

/* ============================================================
   CTA BANNER
============================================================ */

.blog-cta-banner {
    background: var(--primary-color);
    padding: 70px 0;
    text-align: center;
}

.blog-cta-banner h2 {
    color: #fff;
    margin-bottom: 12px;
}

.blog-cta-banner p {
    color: rgba(255, 255, 255, 0.85);
    max-width: 560px;
    margin: 0 auto 28px;
}

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 991px) {
    .blog-banner {
        min-height: 380px;
        align-items: end;
    }

    .blog-banner-content {
        padding: 70px 0 30px;
    }

    .blog-filter-bar {
        gap: 8px;
    }

    .col-lg-3.col-md-6.col-6:nth-child(3) .tech-strip-item {
        border-bottom: 0;
    }

    .col-lg-3.col-md-6.col-6:nth-child(4) .tech-strip-item {
        border-bottom: 0;
    }

    .col-lg-3.col-md-6.col-6:nth-child(3) .tech-strip-item,
    .col-lg-3.col-md-6.col-6:nth-child(4) .tech-strip-item {
        padding-bottom: 0;
    }

    .col-lg-3.col-md-6.col-6:nth-child(1) .tech-strip-item,
    .col-lg-3.col-md-6.col-6:nth-child(2) .tech-strip-item {
        padding-top: 0;
    }

    .blog-filter-count {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .blog-banner {
        min-height: 480px;
        height: 480px;
    }

    .blog-card-img {
        height: 200px;
    }

    .story-padding {
        --bs-gutter-x: 2.5rem;
        --bs-gutter-y: 1.5rem;
    }

    .banner-btn.donate-btn,
    .cta-btn.donate-btn,
    .gv-donate-btn {
        background-color: #D8346E;
        color: #fff;
        border: none;
    }

    .col-lg-3.col-md-6.col-6:nth-child(1) .tech-strip-item,
    .col-lg-3.col-md-6.col-6:nth-child(2) .tech-strip-item {
        padding-top: 0;
    }

    .blog-filter-btn {
        padding: 8px 16px;
        font-size: 12px;
    }

    .blog-section {
        padding: 50px 0 60px;
    }
}

@media (max-width: 575px) {
    .blog-banner-content h1 {
        font-size: clamp(26px, 8vw, 36px);
    }

    .blog-filter-bar {
        gap: 6px;
    }

    .blog-filter-btn {
        padding: 7px 14px;
        font-size: 11px;
    }
}

/* ============================================================
   BLOG DETAIL PAGE
============================================================ */
/* ============================================================
   BLOG DETAIL PAGE - blog-detail.css
   Uses CSS variables from main.css + categories from blog.css
============================================================ */

/* ============================================================
   POST HERO
============================================================ */

.blog-post-hero {
    padding: 390px 0 64px;
    position: relative;
    overflow: hidden;
}

.post-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.post-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    display: block;
}

.post-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(10, 40, 80, 0.88) 0%,
            rgba(59, 157, 223, 0.70) 100%);
}

.post-hero-content {
    position: relative;
    z-index: 2;
}

.blog-post-hero::before {
    content: none;
}

.blog-post-hero::after {
    content: none;
}

/* Breadcrumb - compact UI chrome */
.post-hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.post-hero-breadcrumb a {
    color: rgba(255, 255, 255, 0.68);
    text-decoration: none;
    font-size: 13px;
    font-family: var(--primary-font);
    font-weight: 600;
    transition: color 0.2s;
}

.post-hero-breadcrumb a:hover {
    color: #fff;
}

.post-hero-breadcrumb .sep {
    color: rgba(255, 255, 255, 0.35);
    font-size: 13px;
}

.post-hero-breadcrumb .current {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--primary-font);
}

/* Category badge - compact UI chrome */
.post-hero-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-family: var(--primary-font);
    color: #fff;
    margin-bottom: 20px;
}

.post-hero-badge.eye-health {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.30);
}

.post-hero-badge.success-stories {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.30);
}

.post-hero-badge.community {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.30);
}

.post-hero-badge.awareness {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.30);
}

.post-hero-badge.news {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.30);
}

/* h1 inherits from main.css */
.blog-post-hero h1 {
    color: #fff;
    line-height: 1.18;
    margin-bottom: 28px;
    max-width: 780px;
}

/* Post meta row - compact UI chrome */
.post-meta-row {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.post-meta-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.post-meta-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 2px solid rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.post-meta-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-meta-avatar i {
    font-size: 22px;
    color: rgba(255, 255, 255, 0.75);
}

.post-meta-author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Compact author name */
.post-meta-author-name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    font-family: var(--primary-font);
    line-height: 1;
}

/* Compact author role */
.post-meta-author-role {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    font-family: var(--primary-font);
}

/* Compact meta divider */
.post-meta-divider {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.22);
    flex-shrink: 0;
}

/* Compact date / read-time */
.post-meta-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.78);
    font-family: var(--primary-font);
    font-weight: 600;
}

.post-meta-item i {
    font-size: 15px;
    opacity: 0.8;
}

/* Hero share strip - compact UI */
.post-hero-share {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Compact share label */
.post-hero-share-label {
    font-size: 12px;
    font-weight: 700;
    color: rgb(59 157 223);
    font-family: var(--primary-font);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.post-share-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgb(59 157 223 / 27%);
    border: 1px solid rgb(59 157 223 / 38%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-size: 16px;
    transition: all 0.2s ease;
}

.post-share-btn:hover {
    background: rgb(59 157 223 / 27%);
    color: rgb(59 157 223);
    transform: translateY(-2px);
}

/* ============================================================
   FEATURED IMAGE STRIP
============================================================ */

.post-featured-img-section {
    background: #F5F8FC;
    padding: 0 0 0;
}

.post-featured-img-wrap {
    position: relative;
    width: 100%;
    max-height: 520px;
    overflow: hidden;
    border-radius: 0 0 28px 28px;
    margin-top: -1px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

.post-featured-img-wrap img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    object-position: center 35%;
    display: block;
}

/* Caption - compact UI */
.post-featured-caption {
    text-align: center;
    font-size: 13px;
    color: #8a94a6;
    font-family: var(--primary-font);
    padding: 14px 0 40px;
    font-style: italic;
}

/* ============================================================
   BLOG BODY + SIDEBAR
============================================================ */

.blog-post-body-section {
    background: #F5F8FC;
}

/* ---- ARTICLE CONTENT ---- */
.blog-post-content {
    background: #fff;
    border-radius: 20px;
    padding: 40px 40px;
    border: 1px solid #edf1f7;
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.05);
}

/* Paragraphs - standardised to 20px */
.blog-post-content p {
    color: #000000;
    line-height: 1.78;
    margin-bottom: 24px;
}

/* Headings inside article - font-size/weight/color from global h2/h3 in main.css */
.blog-post-content h2 {
    margin-top: 44px;
    margin-bottom: 16px;
    padding-top: 30px;
    border-top: 2px solid #EBF7FF;
    line-height: 1;
}

.blog-post-content h3 {
    margin-top: 0;
    margin-bottom: 12px;
}

/* Pull quote */
.blog-pull-quote {
    border-left: 4px solid var(--primary-color);
    padding: 22px 32px;
    margin: 40px 0;
    background: #EBF7FF;
    border-radius: 0 16px 16px 0;
}

.blog-pull-quote p {
    font-style: italic;
    color: var(--primary-color) !important;
    line-height: 1.65;
    margin-bottom: 0 !important;
}

/* Inline image inside article */
.blog-inline-img {
    margin: 36px 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);
}

.blog-inline-img img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
}

/* Compact image caption */
.blog-inline-img figcaption {
    background: #f8fafc;
    padding: 10px 18px;
    font-size: 13px;
    color: #8a94a6;
    font-family: var(--primary-font);
    font-style: italic;
}

/* Bullet list */
.blog-post-content ul.blog-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.blog-post-content ul.blog-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f4f8;
    font-size: clamp(17px, 2vw, 20px);
    color: #000000;
    line-height: 1.6;
    font-family: var(--primary-font);
}

.blog-post-content ul.blog-list li:last-child {
    border-bottom: none;
}

.blog-post-content ul.blog-list li::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
    margin-top: 8px;
    flex-shrink: 0;
}

/* Stat callout box */
.blog-stat-box {
    background: var(--primary-color);
    border-radius: 18px;
    padding: 32px 36px;
    margin: 40px 0;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.blog-stat-box-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.blog-stat-box-icon i {
    font-size: 28px;
    color: #fff;
}

.blog-stat-box-num {
    font-size: clamp(30px, 4vw, 42px);
    font-weight: 700;
    color: #fff;
    font-family: var(--primary-font);
    line-height: 1;
    display: block;
}

.blog-stat-box-text {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.80);
    font-family: var(--primary-font);
    margin-top: 4px;
    display: block;
}

/* Post tags row */
.post-tags-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 44px;
    padding-top: 28px;
    border-top: 1px solid #edf1f7;
}

/* Compact "Tags:" label */
.post-tags-label {
    font-size: 13px;
    font-weight: 700;
    color: #000000;
    font-family: var(--primary-font);
    letter-spacing: 0.05em;
}

.post-tag {
    display: inline-block;
    background: #EBF7FF;
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    font-family: var(--primary-font);
    text-decoration: none;
    letter-spacing: 0.03em;
    border: 1px solid rgba(59, 157, 223, 0.20);
    transition: all 0.2s;
}

.post-tag:hover {
    background: var(--primary-color);
    color: #fff;
}

/* Author box at bottom of article */
.post-author-box {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    background: #F5F8FC;
    border-radius: 18px;
    padding: 28px 30px;
    margin-top: 40px;
    border: 1px solid #dce8f4;
}

.post-author-box-avatar {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: #EBF7FF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid rgba(59, 157, 223, 0.20);
    overflow: hidden;
}

.post-author-box-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-author-box-avatar i {
    font-size: 26px;
    color: var(--primary-color);
    line-height: 1;
}

.post-author-box-info {
    flex: 1;
}

/* Compact "Written by" label */
.post-author-box-written-by {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--primary-color);
    font-family: var(--primary-font);
    margin-bottom: 4px;
    display: block;
}

/* h5 inherits from main.css */
.post-author-box-info h5 {
    margin-bottom: 8px;
    color: #1a2940;
}

/* Compact author bio */
.post-author-box-bio {
    font-size: 15px !important;
    color: #000000 !important;
    line-height: 1.65 !important;
    margin-bottom: 12px !important;
}

.post-author-social {
    display: flex;
    gap: 10px;
}

.post-author-social a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #EBF7FF;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 15px;
    text-decoration: none;
    transition: all 0.2s;
}

.post-author-social a:hover {
    background: var(--primary-color);
    color: #fff;
}

/* ---- SIDEBAR ---- */

.blog-post-sidebar {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* Generic sidebar card */
.sidebar-card {
    background: #fff;
    border-radius: 18px;
    padding: 26px 24px;
    border: 1px solid #edf1f7;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
}

/* Compact sidebar section heading */
.sidebar-card-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--primary-color);
    font-family: var(--primary-font);
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid #EBF7FF;
    display: block;
}

/* Author sidebar card */
.sidebar-author-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #EBF7FF;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 3px solid rgba(59, 157, 223, 0.20);
}

.sidebar-author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-author-avatar i {
    font-size: 32px;
    color: var(--primary-color);
}

/* h5 inherits from main.css */
.sidebar-author-name {
    text-align: center;
    color: #1a2940;
    margin-bottom: 4px;
}

/* Compact author role */
.sidebar-author-role {
    text-align: center;
    font-size: 12px;
    color: #8a94a6;
    font-family: var(--primary-font);
    font-weight: 600;
    display: block;
    margin-bottom: 12px;
}

/* Compact author bio in sidebar */
.sidebar-author-bio {
    color: #000000 !important;
    text-align: center;
    line-height: 1.65 !important;
    margin-bottom: 0 !important;
}

/* Circular icon-only share buttons in sidebar */
.sidebar-share-icon-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.sidebar-share-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #f0f6fc;
    border: 1.5px solid #d8eaf6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #3b9ddf;
    text-decoration: none;
    font-size: 18px;
    transition: all 0.2s ease;
}

.sidebar-share-icon-btn:hover {
    background: #3b9ddf;
    color: #fff;
    border-color: #3b9ddf;
    transform: translateY(-2px);
}

/* Share buttons in sidebar */
.sidebar-share-btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sidebar-share-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--primary-font);
    text-decoration: none;
    transition: all 0.2s ease;
    letter-spacing: 0.03em;
}

.sidebar-share-link i {
    font-size: 18px;
}

.sidebar-share-link.fb {
    background: #EBF0FF;
    color: #1877F2;
}

.sidebar-share-link.fb:hover {
    background: #1877F2;
    color: #fff;
}

.sidebar-share-link.tw {
    background: #EBF7FF;
    color: #1DA1F2;
}

.sidebar-share-link.tw:hover {
    background: #1DA1F2;
    color: #fff;
}

.sidebar-share-link.li {
    background: #E8F4FF;
    color: #0A66C2;
}

.sidebar-share-link.li:hover {
    background: #0A66C2;
    color: #fff;
}

.sidebar-share-link.wa {
    background: #EDFAF4;
    color: #25D366;
}

.sidebar-share-link.wa:hover {
    background: #25D366;
    color: #fff;
}

/* Tags in sidebar */
.sidebar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Recent posts list in sidebar */
.sidebar-recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-recent-list li {
    padding: 12px 0;
    border-bottom: 1px solid #edf1f7;
}

.sidebar-recent-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sidebar-recent-list li:first-child {
    padding-top: 0;
}

.sidebar-recent-list a {
    color: #1a2940;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    font-family: var(--primary-font);
    transition: color 0.2s ease;
}

.sidebar-recent-list a:hover {
    color: var(--primary-color);
}

.sidebar-recent-list li.active span {
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    font-family: var(--primary-font);
}

/* Sidebar donate box */
.sidebar-donate-card {
    background: var(--primary-color);
    border-radius: 18px;
    padding: 28px 24px;
    text-align: center;
}

/* h5 inherits from main.css */
.sidebar-donate-card h5 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 20px;
}

/* Compact donate sidebar text */
.sidebar-donate-card p {
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.6;
    margin-bottom: 18px !important;
}

.sidebar-donate-card .btn {
    background: #fff;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 13px;
    padding: 10px 24px;
    border-radius: 10px;
    font-family: var(--primary-font);
    width: 100%;
    transition: 0.2s;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.sidebar-donate-card .btn:hover {
    background: #fff;
    transform: translateY(-2px);
}

/* ============================================================
   POST NAVIGATION
============================================================ */

.blog-post-nav {
    background: #fff;
    border-top: 1px solid #eaeff5;
    border-bottom: 1px solid #eaeff5;
    padding: 0;
}

.blog-post-nav-inner {
    display: flex;
    align-items: stretch;
}

.blog-nav-btn {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 28px 32px;
    text-decoration: none;
    color: #000000;
    transition: background 0.2s ease;
}

.blog-nav-btn:hover {
    background: #F5F8FC;
    color: #000000;
}

.blog-nav-btn.next {
    justify-content: flex-end;
    text-align: right;
}

.blog-nav-btn i {
    font-size: 22px;
    color: var(--primary-color);
    flex-shrink: 0;
    transition: transform 0.2s;
}

.blog-nav-btn.prev:hover i {
    transform: translateX(-4px);
}

.blog-nav-btn.next:hover i {
    transform: translateX(4px);
}

/* Compact nav label */
.blog-nav-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #aaa;
    font-family: var(--primary-font);
    margin-bottom: 4px;
}

/* Compact nav post title */
.blog-nav-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a2940;
    font-family: var(--primary-font);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 240px;
}

.blog-nav-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 24px;
    border-left: 1px solid #eaeff5;
    border-right: 1px solid #eaeff5;
    text-decoration: none;
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 700;
    font-family: var(--primary-font);
    white-space: nowrap;
    transition: background 0.2s;
    min-width: 140px;
}

.blog-nav-center:hover {
    background: #EBF7FF;
    color: var(--primary-color);
}

.blog-nav-center i {
    font-size: 18px;
}

/* ============================================================
   RELATED POSTS
============================================================ */

.blog-related-section {
    background: #F5F8FC;
}

/* h2 inherits from main.css */
.related-blog-heading {
    margin-bottom: 8px;
    color: #1a2940;
}

/* Compact related section subheading */
.related-blog-sub {
    color: #000;
    margin-bottom: 12px;
}

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1199px) {
    .blog-post-content {
        padding: 40px 38px;
    }
}

@media (max-width: 991px) {
    .blog-post-hero {
        padding: 180px 0 40px;
    }

    .blog-post-sidebar {
        position: static;
        top: auto;
    }

    .post-featured-img-wrap img {
        height: 380px;
    }

    .blog-nav-title {
        max-width: 180px;
    }

    .blog-nav-btn {
        padding: 22px 20px;
    }
}

@media (max-width: 767px) {
    .blog-post-hero {
        padding: 160px 0 48px;
        height: auto;
        align-items: end;
        display: flex;
    }

    .hero-box br {
        display: none;
    }

    .blog-post-content {
        padding: 30px 24px;
    }

    .post-featured-img-wrap img {
        height: 260px;
    }

    .post-featured-img-wrap {
        border-radius: 0 0 18px 18px;
    }

    .post-meta-row {
        gap: 14px;
        display: flex;
        align-items: start;
        flex-wrap: wrap;
        margin-bottom: 28px;
        flex-direction: column;
    }

    .post-meta-divider {
        display: none;
    }

    .blog-stat-box {
        padding: 24px 22px;
        gap: 16px;
    }

    .blog-post-nav-inner {
        flex-direction: column;
    }

    .blog-nav-center {
        border-left: none;
        border-right: none;
        border-top: 1px solid #eaeff5;
        border-bottom: 1px solid #eaeff5;
    }

    .blog-nav-title {
        max-width: 100%;
    }

    .post-author-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .post-author-social {
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .blog-post-hero h1 {
        font-size: clamp(24px, 7vw, 34px);
    }

    .blog-post-content {
        padding: 24px 18px;
    }

    .blog-pull-quote {
        padding: 18px 20px;
    }

    .blog-inline-img img {
        height: 200px;
    }

    .post-hero-share {
        gap: 8px;
    }
}

/* ============================================================
   CAREER PAGE
============================================================ */
/* ============================================================
   CAREER PAGE - career.css
   Uses CSS variables and type scale from main.css
============================================================ */

/* ============================================================
   CAREER BANNER
============================================================ */

.career-banner {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: 80px;
}

.career-banner-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.career-banner-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
    display: block;
}

.career-banner-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(8, 35, 72, 0.88) 0%,
            rgba(59, 157, 223, 0.70) 100%);
}

/* Decorative circles */
.career-banner::before {
    content: '';
    position: absolute;
    top: -90px;
    right: -90px;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    z-index: 1;
    pointer-events: none;
}

.career-banner::after {
    content: '';
    position: absolute;
    bottom: -110px;
    left: -60px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    z-index: 1;
    pointer-events: none;
}

.career-banner-content {
    position: relative;
    z-index: 2;
    padding: 88px 0 80px;
}

/* Breadcrumb - compact UI chrome */
.career-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    list-style: none;
    padding: 0;
    flex-wrap: wrap;
}

.career-breadcrumb li {
    font-size: 13px;
    font-family: var(--primary-font);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.68);
}

.career-breadcrumb li a {
    color: rgba(255, 255, 255, 0.68);
    text-decoration: none;
    transition: color 0.2s;
}

.career-breadcrumb li a:hover {
    color: #fff;
}

.career-breadcrumb li.active {
    color: #fff;
}

.career-breadcrumb .sep {
    color: rgba(255, 255, 255, 0.35);
    font-size: 12px;
}

/* Pill label */
.career-banner-label {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: 30px;
    margin-bottom: 20px;
    font-family: var(--primary-font);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* h1 inherits from main.css */
.career-banner-content h1 {
    color: #fff;
    margin-bottom: 18px;
    max-width: 680px;
    line-height: 1.15;
}

/* p inherits from main.css */
.career-banner-content p {
    color: rgba(255, 255, 255, 0.85);
    max-width: 560px;
    margin-bottom: 32px;
}

/* Banner stat strip */
.career-banner-stats {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.20);
}

/* Compact stat number */
.banner-stat-num {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    font-family: var(--primary-font);
    line-height: 1;
}

/* Compact stat label */
.banner-stat-label {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.68);
    font-family: var(--primary-font);
    margin-top: 5px;
}

/* ============================================================
   WHY JOIN US
============================================================ */

.why-join-section {
    background: #fff;
    padding: 80px 0 70px;
}

/* Section heading uses main.css h2 */
.why-join-section .section-label {
    display: inline-block;
    background: var(--light-color);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: 30px;
    margin-bottom: 14px;
    font-family: var(--primary-font);
}

.why-join-section .section-heading {
    margin-bottom: 10px;
}

.why-join-section .section-sub {
    color: #000000;
    max-width: 560px;
    margin: 0 auto 50px;
}

/* Benefit section image box - stretches to match left content height */
.benefit-img-box {
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    min-height: 300px;
}

.benefit-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 20px;
}

.gvg-gallery-img {
    border-radius: 20px;
    overflow: hidden;
    height: 260px;
}

.gvg-gallery-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* GoodVision Glasses page - tints the gallery section so it doesn't
   read as one unbroken blank gap against the plain-white intro section above it */
.gvg-gallery-section {
    background: url(../img/bright-sight-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.gvg-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* background: linear-gradient(to right, rgba(13, 45, 74, 0.96) 0%, rgba(13, 45, 74, 0.8) 35%, rgb(13 45 74 / 78%) 60%, rgba(13, 45, 74, 0) 85%); */
}

/* Benefit card */
.benefit-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 20px 20px;
    height: 100%;
    border: 1px solid #e8eef6;
    position: relative;
    overflow: hidden;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.benefit-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.13);
}

.benefit-card-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: #EBF7FF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.benefit-card-icon i {
    font-size: 28px;
    color: var(--primary-color);
}

/* h5 inherits from main.css */
.benefit-card h5 {
    color: #009fe1;
    margin-bottom: 12px;
    font-size: 25px;
    line-height: 1;
}

.card-stat-number {
    color: #D8346E !important;
}

/* Compact card description */
.benefit-card p {
    color: #000;
    line-height: 1.6;
    margin-bottom: 13px;
}

/* ============================================================
   OPEN POSITIONS - ACCORDION
============================================================ */

.positions-section {
    background: #F5F8FC;
    padding: 80px 0 90px;
}

.positions-section .section-label {
    display: inline-block;
    background: #EBF7FF;
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: 30px;
    margin-bottom: 14px;
    font-family: var(--primary-font);
}

.positions-section .section-heading {
    margin-bottom: 10px;
}

.positions-section .section-sub {
    color: #000000;
    max-width: 540px;
    margin: 0 auto 52px;
}

/* Accordion wrapper */
.positions-accordion {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Single accordion item */
.position-item {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #e0eaf4;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.28s ease;
}

.position-item.is-open {
    box-shadow: 0 8px 34px rgba(59, 157, 223, 0.14);
    border-color: rgba(59, 157, 223, 0.28);
}

/* Accordion header / trigger */
.position-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 32px;
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: background 0.2s ease;
    flex-wrap: wrap;
}

.position-header:hover {
    background: #f8fbff;
}

.position-item.is-open .position-header {
    background: #EBF7FF;
    border-bottom: 1px solid rgba(59, 157, 223, 0.18);
}

/* Left block: role icon + title + meta */
.position-header-left {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1;
    min-width: 0;
}

.position-role-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: #EBF7FF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.25s ease;
}

.position-role-icon i {
    font-size: 24px;
    color: var(--primary-color);
    transition: color 0.25s ease;
}

.position-item.is-open .position-role-icon {
    background: var(--primary-color);
}

.position-item.is-open .position-role-icon i {
    color: #fff;
}

.position-title-group {
    min-width: 0;
}

/* h5 inherits from main.css */
.position-title-group h5 {
    color: #1a2940;
    margin-bottom: 6px;
    transition: color 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.position-item.is-open .position-title-group h5 {
    color: var(--primary-color);
}

.position-meta-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Compact position meta tag */
.pos-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--primary-font);
    padding: 4px 11px;
    border-radius: 16px;
    letter-spacing: 0.04em;
}

.pos-tag.dept {
    background: #EBF7FF;
    color: var(--primary-color);
}

.pos-tag.location {
    background: #F0F7F0;
    color: #2E7D32;
}

.pos-tag.type {
    background: #FFF4EB;
    color: #E07A39;
}

.pos-tag i {
    font-size: 12px;
}

/* Right block: job type + toggle icon */
.position-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* Compact "Full-Time" pill */
.pos-type-pill {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--primary-font);
    background: #EBF7FF;
    color: var(--primary-color);
    border: 1px solid rgba(59, 157, 223, 0.20);
    white-space: nowrap;
}

.pos-type-pill.contract {
    background: #FFF4EB;
    color: #E07A39;
    border-color: rgba(224, 122, 57, 0.20);
}

/* Toggle icon */
.position-toggle-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #EBF7FF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.25s ease, transform 0.3s ease;
}

.position-toggle-icon i {
    font-size: 18px;
    color: var(--primary-color);
    transition: transform 0.32s ease;
}

.position-item.is-open .position-toggle-icon {
    background: var(--primary-color);
}

.position-item.is-open .position-toggle-icon i {
    color: #fff;
    transform: rotate(45deg);
}

/* Accordion body */
.position-body {
    display: none;
    padding: 36px 32px 38px;
    border-top: none;
}

.position-body.is-visible {
    display: block;
}

/* Animate open */
@keyframes accOpen {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.position-body.is-visible {
    animation: accOpen 0.3s ease forwards;
}

/* Description paragraph uses main.css p */
.position-description {
    color: #3a3a3a;
    line-height: 1.72;
    margin-bottom: 28px;
}

/* Sub-section headings inside body */
.pos-body-heading {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--primary-color);
    font-family: var(--primary-font);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pos-body-heading i {
    font-size: 16px;
}

/* Responsibility / requirement list */
.pos-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pos-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: clamp(16px, 1.8vw, 18px);
    color: #3a3a3a;
    line-height: 1.6;
    font-family: var(--primary-font);
}

.pos-list li .pos-list-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
    margin-top: 8px;
    flex-shrink: 0;
}

.pos-list.req li .pos-list-dot {
    background: #2E9966;
}

/* Two-column layout for responsibilities */
.pos-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

/* Divider between sections */
.pos-body-divider {
    border: none;
    border-top: 1px solid #edf1f7;
    margin: 28px 0;
}

/* Apply button row */
.pos-apply-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 16px;
    flex-wrap: wrap;
}

.pos-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--primary-color);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--primary-font);
    padding: 13px 30px;
    border-radius: 10px;
    text-decoration: none;
    letter-spacing: 0.06em;
    transition: background 0.22s ease, transform 0.22s ease;
}

.pos-apply-btn:hover {
    background: #D8346E;
    color: #fff;
}

/* Compact "Share" link */
.pos-share-link {
    font-size: 13px;
    font-weight: 700;
    color: #000000;
    font-family: var(--primary-font);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

.pos-share-link:hover {
    color: var(--primary-color);
}

/* ============================================================
   CTA - "Don't see your role?"
============================================================ */

.career-cta-section {
    background: var(--primary-color);
    padding: 80px 0;
}

/* h2 inherits from main.css */
.career-cta-section h2 {
    color: #fff;
    margin-bottom: 14px;
}

/* p inherits from main.css */
.career-cta-section p {
    color: rgba(255, 255, 255, 0.85);
    max-width: 540px;
    margin: 0 auto 32px;
}

.career-cta-btns {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

.cta-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 700;
    font-family: var(--primary-font);
    padding: 14px 32px;
    border-radius: 10px;
    text-decoration: none;
    letter-spacing: 0.06em;
    transition: all 0.22s ease;
}

.cta-btn-primary:hover {
    background: var(--secondary-color);
    color: #fff;
}

.cta-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--primary-font);
    padding: 14px 32px;
    border-radius: 10px;
    text-decoration: none;
    letter-spacing: 0.06em;
    border: 2px solid rgba(255, 255, 255, 0.45);
    transition: all 0.22s ease;
}

.cta-btn-outline:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.80);
}

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1199px) {
    .pos-two-col {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991px) {
    .career-banner {
        min-height: 420px;
    }

    .career-banner-content {
        padding: 72px 0 64px;
    }

    .career-banner-stats {
        gap: 28px;
    }

    .position-header {
        padding: 22px 24px;
    }

    .position-body {
        padding: 28px 24px 30px;
    }
}

@media (max-width: 767px) {
    .career-banner {
        min-height: 360px;
    }

    .career-banner-content {
        padding: 60px 0 52px;
    }

    .position-header {
        gap: 14px;
    }

    .position-header-right {
        width: 100%;
        justify-content: flex-end;
    }

    .pos-type-pill {
        display: none;
    }

    .benefit-card {
        padding: 28px 22px;
    }

    .why-join-section {
        padding: 60px 0 50px;
    }

    .positions-section {
        padding: 60px 0 70px;
    }

    .career-cta-section {
        padding: 60px 0;
    }
}

@media (max-width: 575px) {
    .career-banner-content h1 {
        font-size: clamp(26px, 8vw, 36px);
    }

    .career-banner-stats {
        gap: 20px;
    }

    .position-header {
        padding: 18px 18px;
    }

    .position-body {
        padding: 22px 18px 24px;
    }

    .pos-two-col {
        grid-template-columns: 1fr;
    }

    .position-toggle-icon {
        width: 32px;
        height: 32px;
    }

    .position-role-icon {
        width: 44px;
        height: 44px;
    }

    .position-role-icon i {
        font-size: 20px;
    }
}


/* ============================================================
   TECH PAGE STYLES - Technology & Innovation
   Uses CSS variables from main.css
============================================================ */


/* ============================================================
   SECTION 1 - HERO BANNER (image + gradient overlay)
============================================================ */

.tech-hero {
    position: relative;
    height: 740px;
    min-height: 740px;
    max-height: 740px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: 70px;
}

.tech-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.tech-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
    display: block;
}


/* Decorative circles */
.tech-hero::before {
    content: '';
    position: absolute;
    top: -90px;
    right: -90px;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    z-index: 1;
    pointer-events: none;
}

.tech-hero::after {
    content: '';
    position: absolute;
    bottom: -110px;
    left: -60px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    z-index: 1;
    pointer-events: none;
}

.tech-hero-inner {
    position: relative;
    z-index: 2;
}

/* Breadcrumb */
.tech-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-family: var(--primary-font);
    font-size: 13px;
    font-weight: 600;
    list-style: none;
    padding: 0;
    flex-wrap: wrap;
}

.tech-breadcrumb li {
    color: rgba(255, 255, 255, 0.68);
    letter-spacing: 0.04em;
}

.tech-breadcrumb li a {
    color: rgba(255, 255, 255, 0.68);
    text-decoration: none;
    transition: color 0.2s;
}

.tech-breadcrumb li a:hover {
    color: #fff;
}

.tech-breadcrumb li.active {
    color: #fff;
}

.tech-breadcrumb .sep {
    color: rgba(255, 255, 255, 0.38);
    font-size: 11px;
}

/* Badge pill */
.tech-hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--primary-font);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 7px 18px;
    border-radius: 100px;
    margin-bottom: 22px;
}

/* h1 inherits from main.css */
.tech-hero-inner h1 {
    color: #fff;
    line-height: 1.15;
    margin-bottom: 20px;
    max-width: 720px;
}

.tech-hero-lead {
    color: rgba(255, 255, 255);
    line-height: 1.6;
    max-width: 700px;
    margin-bottom: 32px;
}

.tech-hero-btns {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.tech-hero-btns .banner-btn {
    background: #D8346E;
    border: none;
}

.tech-hero-btns .banner-btn:hover {
    background: #D8346E;
    color: #fff;
    transform: translateY(-2px);
}

.tech-hero-outline-btn {
    display: inline-flex;
    align-items: center;
    font-family: var(--primary-font);
    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    padding: 13px 20px;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.55);
    color: #fff;
    transition: all 0.22s ease;
    line-height: 1;
}

.tech-hero-outline-btn:hover {
    background: #D8346E;
    border-color: #D8346E;
    color: #fff;
    transform: translateY(-1px);
}

/* ===== TECH STATS STRIP (standalone section after hero) ===== */
.tech-stat-strip {
    background: #009FE1;
    position: relative;
    z-index: 5;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 18px 0;
}

.tech-strip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
    padding: 0px 24px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    height: 100%;
    transition: background 0.25s ease;
}



.col-lg-3:last-child .tech-strip-item {
    border-right: none;
}

.tech-strip-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 31px;
    color: #fff;
    transition: background 0.25s ease, transform 0.25s ease;
}



.tech-strip-content {
    min-width: 0;
}

.tech-strip-num {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    font-family: var(--primary-font);
    margin-bottom: 8px;
    line-height: 1.2;
    white-space: nowrap;
}

.tech-strip-num .odometer {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    font-family: var(--primary-font);
    margin-bottom: 8px;
    line-height: 1.2;
    white-space: nowrap;
}

.tech-strip-suffix {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    font-family: var(--primary-font);
    margin-bottom: 8px;
    line-height: 1.2;
    white-space: nowrap;
}

.tech-strip-label {
    color: rgb(255, 255, 255);
    margin-bottom: 0;
    line-height: 1.35;
}


/* ============================================================
   SHARED UTILITIES
============================================================ */

.tech-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--primary-font);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary-color);
    background: var(--light-color);
    padding: 8px 14px 7px 14px;
    border-radius: 100px;
    margin-bottom: 14px;
    width: max-content;
    line-height: 1;
}

.tech-eyebrow.light {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.15);
}

.tech-section-head h2 {
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.25;
    margin-bottom: 13px;
}

.tech-section-sub {
    margin: 0 auto;
    line-height: 1.75;
}


/* ============================================================
   SECTION 2 - INTRO
============================================================ */

/* ============================================================
   TECH INTRO - redesigned
============================================================ */
.tech-intro {
    background: #fff;
}

.tech-intro h2 {
    font-weight: 700;
    line-height: 1.28;
    max-width: max-content;
    margin-bottom: 16px;
}

.tech-intro>.container p,
.tech-intro p.intro-lead {
    margin-bottom: 28px;
    max-width: 720px;
}

/* Feature list */
.tech-intro-features {
    display: grid;
    flex-direction: column;
    gap: 20px;
    grid-template-columns: 1fr 1fr;
}

.tech-intro-feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.tech-intro-feat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #edf1f7;
    /* background: rgba(59, 157, 223, 0.10); */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--primary-color);
    flex-shrink: 0;
    transition: background 0.25s, color 0.25s;
}

.tech-intro-feature:hover .tech-intro-feat-icon {
    background: var(--primary-color);
    color: #fff;
}

.tech-intro-feature strong {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #009fe1;
    font-family: var(--primary-font);
    margin-bottom: 3px;
}



.tech-intro-feature span {
    color: #000000;
    line-height: 1.6;
}

/* Right gradient panel */
.tech-intro-panel {
    background: #0d2d4a;
    border-radius: 24px;
    padding: 44px 40px;
    position: relative;
    overflow: hidden;
    height: 100%;
}

/* The media panel takes its height from the content column beside it.
   The row is .align-items-stretch, so the column is already stretched to
   the taller of the two - the panel fills that column, and the slider /
   image chain further down fills the panel. Add or remove copy on the
   text side and the image follows automatically; no fixed height. */
.tech-intro-panel.tech-intro-panel--media {
    padding: 0;
    height: 100%;
}

.tech-intro-panel.tech-intro-panel--media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Below xl the two columns stack, so there is no sibling to match against
   - fall back to a fixed height per breakpoint. */
@media (max-width: 1199px) {
    .tech-intro-panel.tech-intro-panel--media {
        height: 620px;
    }
}

@media (max-width: 991px) {
    .tech-intro-panel.tech-intro-panel--media {
        height: 480px;
    }
}

@media (max-width: 575px) {
    .tech-intro-panel.tech-intro-panel--media {
        height: 320px;
    }
}

/* Shared by every slider placed inside a .tech-intro-panel--media panel
   (Section 3's and Section 4's photo sliders both use this) */
.tech-intro-panel--media .swiper,
.tech-intro-panel--media .swiper-wrapper,
.tech-intro-panel--media .swiper-slide {
    width: 100%;
    height: 100%;
}

.tech-intro-panel--media .swiper-pagination.swiper-pagination {
    bottom: 16px;
}

.tech-intro-panel--media .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.5;
}

.tech-intro-panel--media .swiper-pagination-bullet-active {
    opacity: 1;
}


.tech-intro-panel-head {
    margin-bottom: 28px;
}

.tech-intro-panel-head h3 {
    font-family: var(--primary-font);
    font-size: clamp(18px, 2vw, 25px);
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}

.tech-intro-panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

.tech-intro-panel-stat {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    padding: 46px 22px;
    transition: background 0.25s ease;
}

.tech-intro-panel-stat:hover {
    background: rgba(255, 255, 255, 0.15);
}

.tech-intro-panel-num {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin-bottom: 8px;
    line-height: 1;
    color: #fff;
    font-size: 58px;
}

.tech-intro-panel-num .odometer {
    font-family: var(--primary-font);
    font-size: clamp(30px, 3.5vw, 44px);
    font-weight: 600;
    color: #fff;
    line-height: 1;
}

.tipn-suffix {
    font-family: var(--primary-font);
    font-size: clamp(22px, 2.5vw, 30px);
    font-weight: 800;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1;
    margin-left: 1px;
}

.tech-intro-panel-stat p {
    color: rgb(255 255 255) !important;
    font-family: var(--primary-font);
    margin: 0 !important;
    line-height: 1.4;
}

.tech-intro-panel-quote {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-top: 22px;
    margin: 0;
    font-size: 13px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.70;
    position: relative;
    z-index: 1;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.tech-intro-panel-quote i {
    font-size: 22px;
    color: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
    margin-top: 2px;
    font-style: normal;
}


/* ============================================================
   SECTION 3 - DIGITAL INITIATIVES
============================================================ */

.tech-initiatives {
    background: url(../img/bright-sight-bg.webp);
}

/* Field-tool photos (3 across, all sources are 3:2 so nothing is cropped) */
.tech-tool-figure {
    margin: 0;
    border-radius: 22px;
    overflow: hidden;
    height: 100%;
    border: 1.5px solid #edf1f7;
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tech-tool-figure:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

.tech-tool-figure img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.tech-initiative-card {
    background: #fff;
    border-radius: 22px;
    padding: 32px 28px;
    display: flex;
    gap: 22px;
    height: 100%;
    border: 1.5px solid #edf1f7;
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.04);
    transition: all 0.30s ease;
}

.tech-initiative-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(59, 157, 223, 0.14);
    border-color: rgba(59, 157, 223, 0.25);
}

.tech-initiative-icon {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 28px;
    color: #fff;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tech-initiative-card:hover .tech-initiative-icon {
    transform: scale(1.08);
    box-shadow: 0 8px 24px rgba(59, 157, 223, 0.40);
}

/* All variants use the same circle style */
.tech-initiative-icon.ai,
.tech-initiative-icon.records,
.tech-initiative-icon.print {
    background: var(--primary-color);
    color: #fff;
}

.tech-initiative-card:hover .tech-initiative-icon.ai,
.tech-initiative-card:hover .tech-initiative-icon.records,
.tech-initiative-card:hover .tech-initiative-icon.print {
    background: var(--primary-color);
    color: #fff;
}

.tech-initiative-body h3 {
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
    line-height: 1.3;
}

.tech-initiative-body p {
    line-height: 1.75;
    margin-bottom: 18px;
}

.tech-initiative-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.tech-initiative-list li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    font-family: var(--primary-font);
    font-weight: 500;
}

.tech-initiative-list i {
    color: var(--primary-color);
    font-size: 16px;
    flex-shrink: 0;
}


/* ============================================================
   SECTION 4 - IMPACT STATS
============================================================ */

.tech-stats {
    background: var(--primary-color);
    padding: 90px 0;
    position: relative;
    overflow: hidden;
}


.tech-stats h2 {
    color: #fff;
}

.tech-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 36px 20px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    transition: background 0.25s ease;
}

.tech-stat-item:hover {
    background: rgba(255, 255, 255, 0.18);
}

.tech-stat-num {
    font-size: clamp(30px, 4vw, 50px);
    font-weight: 700;
    color: #fff;
    font-family: var(--primary-font);
    line-height: 1;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}

.tech-stat-num .odometer {
    font-family: var(--primary-font);
    font-size: clamp(30px, 4vw, 50px);
    font-weight: 600;
    color: #fff;
    line-height: 1;
}

.tech-stat-suffix {
    font-family: var(--primary-font);
    font-size: clamp(22px, 3vw, 36px);
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.tech-stat-label {
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--primary-font);
    line-height: 1.45;
}


/* ============================================================
   SECTION 5 - HOW IT WORKS
============================================================ */

.tech-process {
    background: #fff;
    padding-top: 0 !important;
}

.tech-process-step {
    text-align: center;
    padding: 42px 28px 36px;
    border-radius: 22px;
    border: 2px solid #edf1f7;
    position: relative;
    transition: all 0.30s ease;
    height: 100%;
}

.tech-process-step:hover,
.tech-process-step.active {
    border-color: var(--primary-color);
    background: var(--light-color);
}

.tech-process-num {
    font-size: 11px;
    font-weight: 800;
    font-family: var(--primary-font);
    letter-spacing: 0.12em;
    color: var(--primary-color);
    opacity: 0.45;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.tech-process-step.active .tech-process-num,
.tech-process-step:hover .tech-process-num {
    opacity: 1;
}

.tech-process-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #edf1f7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--primary-color);
    margin: 0 auto 22px;
    transition: all 0.30s ease;
}

.tech-process-step.active .tech-process-icon,
.tech-process-step:hover .tech-process-icon {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 8px 24px rgba(59, 157, 223, 0.35);
}

.tech-process-step h3 {
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 14px;
    line-height: 1.3;
}

.tech-process-step p {
    color: #000000;
    line-height: 1.6;
    margin-bottom: 0;
}


/* ============================================================
   SECTION 6 - TESTIMONIAL
============================================================ */

.tech-testimonial {
    background: url(../img/bright-sight-bg.webp);
}

.tech-quote-icon {
    font-size: 60px;
    color: var(--primary-color);
    opacity: 0.20;
    line-height: 1;
    display: block;
    margin-bottom: 10px;
}

.tech-testimonial-text {
    font-style: italic;
    color: #000000;
    line-height: 1.85;
    margin-bottom: 36px;
}

.tech-testimonial-author {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

.tech-testimonial-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--light-color);
    border: 2px solid var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--primary-color);
    flex-shrink: 0;
}

.tech-testimonial-info {
    text-align: left;
}

.tech-testimonial-name {
    display: block;
    font-weight: 700;
    font-size: 20px;
    color: var(--primary-color);
    font-family: var(--primary-font);
    margin-bottom: 3px;
}

.tech-testimonial-role {
    display: block;
    font-size: 16px;
    font-family: var(--primary-font);
}


/* ============================================================
   SECTION 7 - PARTNERS
============================================================ */

/* ============================================================
   SECTION 7 - OUR SUPPORTERS & PARTNERS
============================================================ */
.tech-supporters {
    background: #fff;
}

.tech-institutions {
    background: url(../img/bright-sight-bg.webp);
}

/* Shared logo item */
.ts-logo-item {
    background: #fff;
    border-radius: 10px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    margin-bottom: 0;
    border: 1px solid #e0e0e0;
    overflow: hidden;
}

.ts-logo-item img {
    max-height: 150px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    opacity: 0.82;
    transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    display: block;
}

.ts-logo-item img.ekfs-logo {
    max-height: 90px;
    max-width: 90px;
}

.ts-logo-item img.happel {
    max-height: 100px;
    max-width: 100px;
}

.ts-logo-item img.stern {
    max-height: 100px;
    max-width: 100px;
}

.ts-logo-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.07);
}

/* CTA strip under supporters */
.ts-cta {
    margin-top: 30px;
    padding-top: 0;
}

.ts-cta p {
    color: #000000;
    margin-bottom: 20px;
}


/* ============================================================
   SECTION 8 - CTA
============================================================ */

.tech-cta {
    background: var(--primary-color);
    padding: 90px 0;
    position: relative;
    overflow: hidden;
}

.tech-cta::before {
    content: '';
    position: absolute;
    top: -80px;
    left: -80px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

.tech-cta::after {
    content: '';
    position: absolute;
    bottom: -60px;
    right: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.tech-cta h2 {
    color: #fff;
    font-size: clamp(24px, 3.5vw, 40px);
    font-weight: 700;
    margin-bottom: 16px;
}

.tech-cta p {
    color: rgba(255, 255, 255, 0.80);
    line-height: 1.75;
    margin-bottom: 0;
}

.tech-cta-btn {
    display: inline-block;
    background: #fff;
    color: var(--primary-color);
    font-weight: 700;
    font-family: var(--primary-font);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 14px 32px;
    border-radius: 10px;
    text-decoration: none;
    margin-right: 12px;
    margin-bottom: 12px;
    transition: all 0.22s ease;
}

.tech-cta-btn:hover {
    background: #f0f8ff;
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.tech-cta-outline-btn {
    display: inline-block;
    background: transparent;
    color: #fff;
    font-weight: 700;
    font-family: var(--primary-font);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 13px 32px;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.50);
    text-decoration: none;
    margin-bottom: 12px;
    transition: all 0.22s ease;
}

.tech-cta-outline-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
    color: #fff;
    transform: translateY(-2px);
}


/* ============================================================
   TECH PAGE RESPONSIVE
============================================================ */

@media (max-width: 991px) {
    .tech-hero {
        height: auto;
        min-height: 580px;
        max-height: none;
    }


    .tech-stats {
        padding: 70px 0;
    }

    .tech-cta {
        padding: 70px 0;
    }

    .tech-intro-panel {
        padding: 32px 28px;
    }

    .tech-intro-panel-num .odometer {
        font-size: 30px;
    }

    .tipn-suffix {
        font-size: 22px;
    }

    .tech-strip-item {
        padding: 28px 24px;
        gap: 16px;
    }

    .tech-strip-num .odometer {
        font-size: 30px;
    }

    .tech-strip-suffix {
        font-size: 22px;
    }
}

@media (max-width: 767px) {
    .tech-hero {
        min-height: 640px;
        padding-top: 78px;
        align-items: end;
        padding-bottom: 22px;
    }

    .col-lg-3.col-md-6.col-6:nth-child(3) .tech-strip-item {
        border-bottom: 0;
    }

    .col-lg-3.col-md-6.col-6:nth-child(4) .tech-strip-item {
        border-bottom: 0;
    }

    .col-lg-3.col-md-6.col-6:nth-child(3) .tech-strip-item,
    .col-lg-3.col-md-6.col-6:nth-child(4) .tech-strip-item {
        padding-bottom: 0;
    }


    .tech-strip-item {
        padding: 16px 14px;
    }


    .tech-initiative-card {
        flex-direction: column;
        gap: 16px;
    }

    .tech-process-step {
        padding: 30px 20px;
    }

    .tech-testimonial-author {
        flex-direction: column;
    }

    .tech-testimonial-info {
        text-align: center;
    }

    .tech-cta-btn,
    .tech-cta-outline-btn {
        width: 100%;
        text-align: center;
        margin-right: 0;
        display: block;
    }

    .tech-hero-btns {
        flex-direction: row;
        align-items: flex-start;
    }

    .tech-strip-item {
        padding: 24px 20px;
        gap: 14px;
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    }
}

@media (max-width: 575px) {
    .tech-hero {
        min-height: 640px;
    }

    .tech-intro-panel {
        padding: 28px 20px;
    }

    .tech-intro-panel-grid {
        gap: 8px;
        grid-template-columns: 1fr;
    }

    .tech-intro-panel-stat {
        padding: 20px 16px;
    }

    .tech-intro-panel-num .odometer {
        font-size: 26px;
    }

    .tipn-suffix {
        font-size: 20px;
    }

    .tech-intro-features {
        gap: 16px;
    }

    .tech-stat-num {
        font-size: 26px;
    }


    .tech-strip-item {
        padding: 20px 16px;
    }

    .tech-strip-num .odometer {
        font-size: 26px;
    }

    .tech-strip-suffix {
        font-size: 20px;
    }

    .tech-strip-icon {
        width: 46px;
        height: 46px;
        font-size: 20px;
        border-radius: 10px;
    }
}

.impact-padding {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}


.demo-padding {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}

.ivc-padding {
    --bs-gutter-x: 3.5rem;
    --bs-gutter-y: 1.5rem;
}

.gi-padding {
    --bs-gutter-x: 3.5rem;
    --bs-gutter-y: 1.5rem;
}

.aniversary-padding {
    --bs-gutter-x: 3.5rem;
    --bs-gutter-y: 1.5rem;
}

.award-padding {
    --bs-gutter-x: 3.5rem;
    --bs-gutter-y: 1.5rem;
}

.outreach-padding {
    --bs-gutter-x: 3.5rem;
    --bs-gutter-y: 1.5rem;
}

.tec-padding {
    --bs-gutter-x: 3.5rem;
    --bs-gutter-y: 1.5rem;
}

/* ---- GET INVOLVED - IVC SECTION ---- */
.ivc-section h2 {
    color: #fff;
    font-size: clamp(28px, 3.8vw, 46px);
    line-height: 1.25;
    margin-bottom: 0;
}

.ivc-intro h3 {
    color: #fff;
    font-size: clamp(20px, 2.2vw, 26px);
    margin-bottom: 20px;
    line-height: 1.3;
}

.ivc-img-wrap {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    border: 4px solid rgba(59, 157, 223, 0.55);
    outline: 1px solid rgba(255, 255, 255, 0.08);
}

.ivc-img-wrap img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
}

/* ---- GET INVOLVED - DEMONSTRATED IMPACT SECTION ---- */
.demonstrated-impact {
    background: #fff;
}

.demonstrated-impact .section-title {
    text-align: left;
}

.demonstrated-impact .section-subtext {
    text-align: left;
    white-space: nowrap;
}

.di-stat-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid #eef1f5;
}

.di-stat-row:last-child {
    border-bottom: none;
}

.di-stat-icon {
    width: 56px;
    height: 56px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.di-stat-icon i {
    font-size: 26px;
    color: #fff;
}

.di-stat-num {
    font-size: clamp(22px, 2.5vw, 30px);
    font-weight: 700;
    color: var(--primary-color);
    font-family: var(--primary-font);
}

.di-stat-label {
    font-size: clamp(17px, 1.8vw, 20px);
    color: #000000;
    font-family: var(--primary-font);
    margin-left: 10px;
}

.di-img-col {
    display: flex;
}

.di-img-frame {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    width: 100%;
    min-height: 400px;
}

.di-img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- GET INVOLVED - CHALLENGE SECTION ---- */
.gi-challenge-section {
    background: #f7f9fc;
}

.gi-chal-stat-block {
    background: #0d2d4a;
    border-radius: 24px;
    padding: 48px 40px;
    text-align: center;
}

.gi-chal-stat-block .gi-chal-icon {
    font-size: 54px;
    color: #fff;
    display: block;
    margin-bottom: 24px;
}

.gi-chal-big-num {
    font-size: clamp(52px, 6vw, 80px);
    font-weight: 700;
    color: #fff;
    font-family: var(--primary-font);
    line-height: 1;
    margin-bottom: 10px;
}

.gi-chal-sub {
    color: #fff;
    line-height: 1.55;
    margin-bottom: 32px;
}

.gi-chal-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin-bottom: 32px;
}

.gi-chal-stats-row {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.gi-chal-stat-item {
    text-align: center;
}

.gi-chal-stat-num {
    font-size: 38px;
    font-weight: 700;
    color: #fff;
    font-family: var(--primary-font);
    line-height: 1;
}

.gi-chal-stat-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--primary-font);
    margin-top: 6px;
}

.gi-chal-vdivider {
    width: 1px;
    background: rgba(255, 255, 255, 0.2);
}

.gi-chal-intro {
    color: #000000;
    line-height: 1.7;
    margin-bottom: 36px;
}

.gi-pointer-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
}

.gi-pointer-row:last-child {
    margin-bottom: 0;
}

.gi-pointer-icon {
    width: 54px;
    height: 54px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gi-pointer-icon i {
    font-size: 26px;
    color: #fff;
}

.gi-pointer-text {
    color: #000000;
    line-height: 1.6;
    margin: 0;
}

/* ---- GET INVOLVED - IVC MEMBERSHIP SECTION ---- */
.ivc-membership {
    background: url(../img/bright-sight-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px;
    overflow: hidden;
}

.ivc-membership .section-title {
    text-align: left;
}

.ivc-membership .section-subtext {
    text-align: left;
    color: #000000;
}

.ivc-img-col {
    display: flex;
}

.ivc-img-frame {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    width: 100%;
    min-height: 400px;
}

.ivc-img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ivc-benefit-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.ivc-benefit-row:last-of-type {
    border-bottom: none;
    margin-bottom: 36px;
}

.ivc-benefit-icon {
    width: 56px;
    height: 56px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ivc-benefit-icon i {
    font-size: 26px;
    color: #fff;
}

.ivc-benefit-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
    font-family: var(--primary-font);
    display: block;
    margin-bottom: 4px;
}

.ivc-benefit-desc {
    color: #000;
    font-family: var(--primary-font);
    line-height: 1.55;
}

/* ---- GET INVOLVED - DONATE CTA BAND ---- */
.gi-donate-band {
    background: var(--primary-color);
    padding: 64px 0;
}

.gi-donate-band .gi-donate-eyebrow {
    font-family: var(--primary-font);
    color: rgba(255, 255, 255);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.gi-donate-band h2 {
    color: #fff;
    margin-bottom: 14px;
    line-height: 1.25;
}

.gi-donate-band .gi-donate-sub {
    color: rgb(255 255 255);
    line-height: 1.6;
    margin-bottom: 0;
}

/* ---- GET INVOLVED - CONTACT CARD ---- */
.contact-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.gi-info-panel {
    background: var(--primary-color);
    padding: 48px 36px;
}

.gi-info-panel h3 {
    color: #fff;
    font-size: clamp(22px, 2.5vw, 28px);
    margin-bottom: 16px;
}

.gi-info-intro {
    color: #fff;
    margin-bottom: 36px;
    line-height: 1.6;
}

.gi-contact-list {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.gi-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.gi-contact-icon-box {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gi-contact-icon-box i {
    color: #fff;
    font-size: 18px;
}

.gi-contact-meta {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    font-family: var(--primary-font);
    margin-bottom: 3px;
}

.gi-contact-value {
    color: #fff;
    text-decoration: none;
    word-break: break-all;
    display: block;
}

.gi-contact-addr {
    color: #fff;
    margin: 0;
    line-height: 1.5;
}

.gi-form-panel {
    padding: 48px 44px;
}

/* ---- HAPPENINGS - AWARDS / RECOGNITION SECTION ---- */
.hap-awards-section {
    background: #009fe1;
    position: relative;
    overflow: hidden;
}

.hap-awards-section>.container {
    position: relative;
    z-index: 1;
}

.hap-awards-section .section-eyebrow {
    color: #fff;
    font-family: var(--primary-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
}

.hap-awards-section h2 {
    color: #fff;
    font-size: clamp(28px, 3.5vw, 42px);
    line-height: 1.25;
    margin-bottom: 16px;
}

.hap-award-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 28px;
}

.hap-award-item:last-of-type {
    margin-bottom: 0;
}

.hap-award-icon {
    width: 52px;
    height: 52px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hap-award-icon i {
    font-size: 24px;
    color: #009fe1;
}

.hap-award-title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.hap-award-sub {
    font-size: 16px;
    color: #fff;
    line-height: 1.5;
}

.hap-award-img-col {
    display: flex;
}

.hap-award-img {
    border-radius: 16px;
    object-fit: cover;
    width: 100%;
    height: 100%;
    min-height: 550px;
    display: block;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

/* ---- HAPPENINGS - COMMUNITY OUTREACH SECTION ---- */
.hap-outreach-section {
    background: #fff;
}

.hap-outreach-img-col {
    display: flex;
    align-items: stretch;
}

.hap-outreach-img-wrap {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    min-height: 380px;
    flex: 1;
}

.hap-outreach-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hap-outreach-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hap-outreach-section .section-title {
    text-align: left;
}

.hap-outreach-intro {
    color: #000;
    margin-bottom: 32px;
}

.outreach-item:last-child {
    margin-bottom: 0;
}

/* ---- HAPPENINGS - HAPPY BENEFICIARIES SECTION ---- */
.hap-beneficiaries-section {
    background: url(../img/bright-sight-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px;
    overflow: hidden;
}

.hap-beneficiaries-header {
    margin-bottom: 48px;
}

.hap-beneficiary-img {
    height: 340px;
    object-fit: cover;
    border-radius: 16px;
    width: 100%;
    display: block;
}

/* ---- HAPPENINGS - SIX WAYS / PROGRAMMES SECTION ---- */
.six-ways-section {
    background: url(../img/bright-sight-bg.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.prog-card-icon {
    width: 56px;
    height: 56px;
    background: rgba(59, 157, 223, 0.10);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.30s ease, box-shadow 0.30s ease;
    margin-bottom: 20px;
}

.prog-card:hover .prog-card-icon {
    background: var(--primary-color);
    box-shadow: 0 8px 24px rgba(59, 157, 223, 0.35);
}

.prog-card-icon i {
    font-size: 26px;
    color: var(--primary-color);
    transition: color 0.30s ease;
}

.prog-card:hover .prog-card-icon i {
    color: #fff;
}

/* ---- GET INVOLVED - NEWSLETTER SECTION ---- */
.gi-newsletter {
    background: #0d2d4a;
    padding: 80px 0;
    text-align: center;
}

.gi-newsletter h2 {
    font-size: clamp(24px, 3vw, 38px);
    color: #fff;
    margin-bottom: 12px;
}

.gi-newsletter .gi-newsletter-sub {
    color: rgb(255 255 255);
    margin-bottom: 36px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.gi-newsletter-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--primary-font);
    letter-spacing: 0.14em;
    color: var(--primary-color);
    text-transform: uppercase;
    margin-bottom: 14px;
}

.gi-newsletter-form {
    display: flex;
    gap: 12px;
    max-width: 880px;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
}

.gi-newsletter-input {
    flex: 1;
    min-width: 260px;
    padding: 8px 20px;
    border: 2px solid #d0dbe8;
    border-radius: 8px;
    font-size: 16px;
    font-family: var(--primary-font);
    outline: none;
    transition: border-color 0.2s;
}

.gi-newsletter-input:focus {
    border-color: var(--primary-color);
}

.gi-newsletter-note {
    color: rgb(255 255 255);
    margin-top: 14px;
    font-family: var(--primary-font);
}

@media (max-width: 767px) {
    .gi-newsletter-form {
        flex-direction: column;
        align-items: stretch;
    }

    .gi-newsletter-input {
        min-width: auto;
    }
}

/* ================================================
   GET INVOLVED PAGE - INVOLVEMENT CARDS
================================================ */

.gi-cards-section {
    background: #fff;
}

.gi-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.07);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.gi-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.13);
}

.gi-card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.gi-card-body {
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.gi-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.gi-card-icon i {
    font-size: 26px;
    color: #fff;
}

.gi-card-body h3 {
    color: #009fe1;
    margin-bottom: 8px;
    line-height: 1.3;
    font-size: 25px;
}

.gi-card-body p {
    color: #000000;
    line-height: 1.6;
    flex: 1;
    margin-bottom: 0;
}

/* ---- TAGLINE BAND ---- */
.gi-tagline-band {
    background: var(--primary-color);
    padding: 48px 0;
    text-align: center;
}

.gi-tagline-band h2 {
    color: #fff;
    font-size: clamp(24px, 3.5vw, 40px);
    margin-bottom: 12px;
}

.gi-tagline-band p {
    color: rgba(255, 255, 255, 0.88);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ---- IVC SECTION ---- */
.ivc-section {
    background: #009fe1;
    position: relative;
    overflow: hidden;
}

.ivc-section::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(59, 157, 223, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

.ivc-section::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(223, 59, 59, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

.ivc-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--primary-font);
    letter-spacing: 0.14em;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.ivc-intro h2 {
    color: #fff;
    font-size: clamp(26px, 3.5vw, 44px);
    line-height: 1.25;
    margin-bottom: 20px;
}

.ivc-intro p {
    color: #fff;
    line-height: 1.6;
    max-width: 640px;
}

.ivc-intro .ivc-stat-row {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 36px;
}

.ivc-stat {
    display: flex;
    flex-direction: column;
}

.ivc-stat-num {
    font-size: 40px;
    font-weight: 700;
    color: #fff;
    font-family: var(--primary-font);
    line-height: 1;
}

.ivc-stat-label {
    color: #fff;
    font-family: var(--primary-font);
    margin-top: 6px;
}

/* ---- IMPACT STRIP ---- */
.gi-impact-strip {
    background: #fff;
    border-top: 1px solid #eef1f5;
    border-bottom: 1px solid #eef1f5;
    padding: 64px 0;
}

.gi-impact-item {
    text-align: center;
    padding: 0 20px;
}

.gi-impact-num {
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 700;
    color: var(--primary-color);
    font-family: var(--primary-font);
    line-height: 1;
    margin-bottom: 10px;
}

.gi-impact-label {
    font-size: 17px;
    color: #000000;
    font-family: var(--primary-font);
    line-height: 1.4;
}

.gi-impact-divider {
    width: 1px;
    background: #e0e5ef;
    height: 60px;
    margin: auto;
}

/* ---- QUOTE BANNER ---- */
.gi-quote-banner {
    background: #d8346e;
    padding: 56px 0;
    text-align: center;
}

.gi-quote-banner blockquote {
    font-size: clamp(20px, 2.5vw, 28px);
    color: #fff;
    font-style: italic;
    font-family: var(--primary-font);
    margin: 0 0 16px;
    line-height: 1.5;
}

.gi-quote-banner cite {
    font-size: 18px;
    color: rgb(255 255 255);
    font-style: normal;
    font-family: var(--primary-font);
}

/* ---- IVC WHY JOIN CARDS ---- */
.ivc-why-card {
    background: #f7f9fc;
    border-radius: 20px;
    padding: 36px 28px;
    height: 100%;
    text-align: center;
    border: 2px solid #edf1f7;
    transition: all 0.30s ease;
}

.ivc-why-card:hover {
    border-color: var(--primary-color);
    background: var(--light-color);
}

.ivc-why-icon {
    width: 64px;
    height: 64px;
    background: rgba(59, 157, 223, 0.10);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: background 0.30s ease, box-shadow 0.30s ease;
}

.ivc-why-card:hover .ivc-why-icon {
    background: var(--primary-color);
    box-shadow: 0 8px 24px rgba(59, 157, 223, 0.35);
}

.ivc-why-icon i {
    font-size: 28px;
    color: var(--primary-color);
    transition: color 0.30s ease;
}

.ivc-why-card:hover .ivc-why-icon i {
    color: #fff;
}

.ivc-why-card h3 {
    color: #009fe1;
    margin-bottom: 12px;
    font-family: var(--primary-font);
}

.ivc-why-card p {
    color: #000000;
    margin: 0;
}

@media (max-width: 991px) {
    .ivc-intro .ivc-stat-row {
        gap: 24px;
    }
}

@media (max-width: 767px) {
    .gi-card-body {
        padding: 18px 18px 20px;
    }


    .ivc-stat-num {
        font-size: 32px;
    }

    .gi-impact-divider {
        display: none;
    }

    .gi-impact-item {
        margin-bottom: 32px;
    }
}

@media (max-width: 575px) {
    .gi-card-img {
        height: 200px;
    }

    .gi-tagline-band {
        padding: 40px 0;
    }
}

.aniversary-section {
    background: url(../img/bright-sight-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px;
    overflow: hidden;
}


.abt-banner .hero-box p {
    max-width: 520px;
}

/* =========================================
   DONATE POPUP
========================================= */

.donate-modal .modal-dialog {
    max-width: 460px;
}

.donate-modal .modal-content {
    position: relative;
    border: none;
    border-radius: 20px;
    padding: 45px 35px 40px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
}

.donate-modal .modal-body {
    padding: 0;
}

.donate-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    opacity: 0.5;
    padding: 8px;
}

.donate-modal-close:hover {
    opacity: 1;
}

/* Was a 62px circular badge holding a heart glyph. It now carries the
   GoodVision wordmark, which is a wide horizontal lockup (1024x122),
   so the circle is gone and the logo simply sits centred above the
   title at a readable width. */
.donate-modal-icon {
    display: block;
    margin: 0 auto 20px;
}

.donate-modal-icon img {
    display: block;
    width: 100%;
    max-width: 210px;
    height: auto;
    margin: 0 auto;
}

.donate-modal-title {
    font-size: clamp(20px, 2.2vw, 24px);
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 12px;
}

.donate-modal-text {
    line-height: 1.6;
    color: #000;
    margin-bottom: 28px;
}

.donate-modal-btn {
    display: inline-block;
    padding: 13px 34px;
}


/* =========================================
   VIDEO SLIDER - LIGHTBOX POPUP
========================================= */

/* Poster is now the click target, so make that obvious */
.video-slider-container .video-thumbnail,
.video-slider-container .play-btn {
    cursor: pointer;
}

.video-slider-container .video-thumbnail {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.play-btn {
    padding: 0;
    border: none;
    background: transparent;
    transition: transform 0.25s ease;
}

.video-slider-container .play-btn:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

/* ---- The popup itself ---- */

/* Width is also capped by available HEIGHT so the 16:9 box never
   overflows a short viewport (landscape phones). */
.video-modal .modal-dialog {
    max-width: min(1100px, 92vw, calc((100vh - 110px) * 16 / 9));
}

/* overflow stays visible so the close button can sit outside the box;
   the rounding/clipping moves down to .modal-body */
.video-modal .modal-content {
    position: relative;
    background: transparent;
    border: none;
    overflow: visible;
}

.video-modal .modal-body {
    padding: 0;
    line-height: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}

.video-modal-player {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    background: #000;
}

/* Solid backdrop - scoped to the video popup via the body flag,
   so the donate popup keeps Bootstrap's translucent one. */
body.video-modal-open .modal-backdrop.show {
    background-color: #000;
    opacity: 1;
}

/* Close button sits ABOVE the video box, on the backdrop */
.video-modal-close {
    position: absolute;
    top: -58px;
    right: 0;
    z-index: 5;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.12);
    background-size: 14px;
    opacity: 1;
    filter: invert(1) grayscale(100%) brightness(200%);
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.video-modal-close:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.08);
}

/* Short viewports (landscape phones): no room above, tuck it back inside */
@media (max-height: 460px) {
    .video-modal-close {
        top: 10px;
        right: 10px;
        background-color: rgba(0, 0, 0, 0.55);
    }
}

.card-title.card-stat-number {
    font-size: 30px;
    font-weight: 700;
}

/* =========================
   NEWSLETTER SUBSCRIBE
   .nl-subscribe section - programme pages + donate.
   Heading uses the site's .section-title; white copy and form on a
   #D8346E (site pink) band, placed after the FAQ.
========================== */

.nl-subscribe {
    background-color: #D8346E;
}

.nl-card {
    border-radius: 10px;
    text-align: center;
}

.nl-content {
    width: 100%;
    margin: 0 auto;
}

.nl-content .section-title {
    margin-bottom: 18px;
    color: #fff;
    text-wrap: balance;
}

.nl-sub {
    margin: 0 auto 32px;
    font-size: 18px;
    line-height: 1.5;
    color: #fff;
    text-wrap: balance;
}

/* heading and paragraph each on a single line wherever the container
   is wide enough (Bootstrap's lg container and up); they wrap below that */
@media (min-width: 992px) {

    .nl-content .section-title,
    .nl-sub {
        white-space: nowrap;
    }
}

.nl-form {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 620px;
    margin: 0 auto;
}

/* white field on the pink band */
.nl-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 52px;
    padding: 0 26px;
    border: 1px solid #fff;
    border-radius: 10px;
    background: #fff;
    color: #111;
    font-family: var(--primary-font);
    font-size: 18px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.nl-input::placeholder {
    color: #8b8b8b;
    opacity: 1;
}

.nl-input:focus {
    outline: 0;
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
}

.nl-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 30px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    color: #D8346E;
    font-family: var(--primary-font);
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* white button on the pink band; hover goes to the site blue */
.nl-btn:hover,
.nl-btn:focus-visible {
    background: #009FE1;
    color: #fff;
}

.nl-btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.7);
    outline-offset: 3px;
}

/* Confirmation state - same green as the EYELIGHT sign-up */
.nl-btn.is-done,
.nl-btn.is-done:hover {
    background: #1a9f84;
    cursor: default;
}