/* =========================================================
   GEUGF - GRAND EVO UNITED GLOBAL FOUNDATION
   CLEAN MASTER STYLE.CSS
   Based on your current style.css, with the broken
   program/Eva modal CSS removed and rebuilt correctly.
   ========================================================= */

/* =========================================================
   GEUGF - GRAND EVO UNITED GLOBAL FOUNDATION
   CLEAN MASTER STYLE.CSS
   ========================================================= */


/* =========================================================
   1. GLOBAL RESET
   ========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    font-family: "DM Sans", sans-serif;

    color: #073b4c;

    background:
        linear-gradient(
            135deg,
            #f4f8f1,
            #edf5ee,
            #f8faf5
        );

    overflow-x: hidden;
}

a {
    text-decoration: none;
}

button {
    font-family: inherit;
}

section {
    position: relative;
}


/* =========================================================
   2. GLOBAL BACKGROUND
   ========================================================= */

.global-background {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;
}


/* Website content stays above background */

.navbar,
main,
footer {
    position: relative;
    z-index: 2;
}


/* =========================================================
   3. GLOBAL BACKGROUND GLOWING SHAPES
   ========================================================= */

.background-shape {
    position: absolute;

    border-radius: 50%;

    filter: blur(3px);

    pointer-events: none;
}


/* GREEN GLOW */

.shape-one {
    width: 450px;
    height: 450px;

    background:
        rgba(144, 186, 153, 0.16);

    top: -150px;
    left: -100px;

    animation:
        floatShapeOne 12s ease-in-out infinite;
}


/* BLUE GLOW */

.shape-two {
    width: 330px;
    height: 330px;

    background:
        rgba(54, 132, 162, 0.10);

    right: 4%;
    top: 18%;

    animation:
        floatShapeTwo 10s ease-in-out infinite;
}


/* GOLD GLOW */

.shape-three {
    width: 240px;
    height: 240px;

    background:
        rgba(220, 174, 67, 0.10);

    left: 42%;
    bottom: -80px;

    animation:
        floatShapeThree 14s ease-in-out infinite;
}


/* =========================================================
   4. GLOBAL ORBIT RINGS
   These remain visible throughout the page.
   ========================================================= */

.global-background .orbit {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(255,255,255,0.72);

    pointer-events: none;
}


/* Large right orbit */

.global-background .orbit-one {
    width: 950px;
    height: 320px;

    right: -250px;
    top: 16%;

    transform:
        rotate(-14deg);

    animation:
        globalOrbitOne 22s linear infinite;
}


/* Large left orbit */

.global-background .orbit-two {
    width: 850px;
    height: 280px;

    left: -300px;
    bottom: 12%;

    transform:
        rotate(12deg);

    animation:
        globalOrbitTwo 27s linear infinite reverse;
}


/* =========================================================
   5. GLOBAL FLOATING LEAVES
   ========================================================= */

.floating-leaf {
    position: absolute;

    font-size: 28px;

    opacity: 0.42;

    pointer-events: none;

    filter:
        drop-shadow(
            0 5px 8px
            rgba(40,80,55,0.10)
        );
}


/* Leaf 1 */

.leaf-one {
    left: 6%;
    top: 35%;

    animation:
        leafOneFloat 8s ease-in-out infinite;
}


/* Leaf 2 */

.leaf-two {
    right: 8%;
    top: 22%;

    animation:
        leafTwoFloat 9s ease-in-out infinite;
}


/* Leaf 3 */

.leaf-three {
    right: 15%;
    bottom: 22%;

    animation:
        leafThreeFloat 10s ease-in-out infinite;
}


/* Leaf 4 */

.leaf-four {
    left: 38%;
    bottom: 12%;

    animation:
        leafFourFloat 8s ease-in-out infinite;
}


/* =========================================================
   6. GLOBAL FLOATING BALLS
   ========================================================= */

.global-background::before,
.global-background::after {
    content: "";

    position: absolute;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    pointer-events: none;
}


/* Gold ball */

.global-background::before {
    right: 13%;
    top: 25%;

    background: #e4b23d;

    box-shadow:
        0 0 20px
        rgba(228,178,61,0.45);

    animation:
        globalBallOne 6s ease-in-out infinite;
}


/* Blue ball */

.global-background::after {
    right: 7%;
    bottom: 20%;

    background: #5ca7c5;

    box-shadow:
        0 0 20px
        rgba(92,167,197,0.40);

    animation:
        globalBallTwo 7s ease-in-out infinite;
}


/* =========================================================
   7. GLOBAL ANIMATIONS
   ========================================================= */

@keyframes floatShapeOne {

    0%,
    100% {
        transform:
            translate(0, 0);
    }

    50% {
        transform:
            translate(35px, -25px);
    }
}


@keyframes floatShapeTwo {

    0%,
    100% {
        transform:
            translate(0, 0);
    }

    50% {
        transform:
            translate(-25px, 30px);
    }
}


@keyframes floatShapeThree {

    0%,
    100% {
        transform:
            translate(0, 0);
    }

    50% {
        transform:
            translate(25px, -25px);
    }
}


@keyframes globalOrbitOne {

    from {
        transform:
            rotate(-14deg);
    }

    to {
        transform:
            rotate(346deg);
    }
}


@keyframes globalOrbitTwo {

    from {
        transform:
            rotate(12deg);
    }

    to {
        transform:
            rotate(-348deg);
    }
}


@keyframes globalBallOne {

    0%,
    100% {
        transform:
            translate(0, 0);
    }

    50% {
        transform:
            translate(18px, -25px);
    }
}


@keyframes globalBallTwo {

    0%,
    100% {
        transform:
            translate(0, 0);
    }

    50% {
        transform:
            translate(-18px, -28px);
    }
}


@keyframes leafOneFloat {

    0%,
    100% {
        transform:
            translate(0, 0)
            rotate(-10deg);
    }

    50% {
        transform:
            translate(18px, -28px)
            rotate(15deg);
    }
}


@keyframes leafTwoFloat {

    0%,
    100% {
        transform:
            translate(0, 0)
            rotate(10deg);
    }

    50% {
        transform:
            translate(-20px, 22px)
            rotate(-15deg);
    }
}


@keyframes leafThreeFloat {

    0%,
    100% {
        transform:
            translate(0, 0)
            rotate(0deg);
    }

    50% {
        transform:
            translate(-22px, -22px)
            rotate(20deg);
    }
}


@keyframes leafFourFloat {

    0%,
    100% {
        transform:
            translate(0, 0)
            rotate(-12deg);
    }

    50% {
        transform:
            translate(20px, -25px)
            rotate(12deg);
    }
}


/* =========================================================
   8. NAVBAR
   SAME DESIGN ON EVERY PAGE
   ========================================================= */

.navbar {
    position: sticky;

    top: 0;

    width: 100%;

    z-index: 1000;

    background:
        rgba(248, 251, 246, 0.96);

    backdrop-filter:
        blur(15px);

    border-bottom:
        1px solid
        rgba(7,59,76,0.08);
}


.nav-container {
    width: 100%;

    max-width: 1450px;

    min-height: 100px;

    margin: auto;

    padding:
        10px 55px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;
}


/* =========================================================
   9. NAVBAR LOGO
   ========================================================= */

.logo {
    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;
}


.logo img {
    width: 78px;
    height: 78px;

    object-fit: contain;

    display: block;
}


.logo-text h2 {
    margin: 0 0 5px;

    color: #073b4c;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 30px;

    line-height: 1;
}


.logo-text span {
    display: block;

    color: #d6a63c;

    font-size: 11px;

    white-space: nowrap;
}


/* =========================================================
   10. NAVIGATION LINKS
   ========================================================= */

.nav-links {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 30px;
}


.nav-links a {
    position: relative;

    color: #073b4c;

    font-size: 15px;

    font-weight: 600;

    padding:
        10px 0;

    transition:
        color 0.3s ease;
}


.nav-links a:hover {
    color: #d6a63c;
}


.nav-links a.active {
    color: #d6a63c;
}


.nav-links a.active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: 0;

    height: 2px;

    background:
        #d6a63c;
}


/* =========================================================
   11. DONATE BUTTON
   ========================================================= */

.donate-btn {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding:
        15px 28px;

    border-radius: 35px;

    background:
        #dcae43;

    color: white;

    font-weight: 700;

    white-space: nowrap;

    box-shadow:
        0 8px 20px
        rgba(180,140,50,0.25);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.donate-btn:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 12px 28px
        rgba(180,140,50,0.35);
}


/* =========================================================
   12. MOBILE MENU
   ========================================================= */

.menu-toggle {
    display: none;

    border: none;

    background: transparent;

    font-size: 28px;

    color: #073b4c;

    cursor: pointer;
}


/* =========================================================
   13. HOME HERO
   ========================================================= */

.hero-section {

    min-height: 680px;

    padding:
        80px 8% 70px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 25% 30%,
            rgba(255,255,255,0.75),
            transparent 35%
        ),

        radial-gradient(
            circle at 80% 50%,
            rgba(210,230,216,0.65),
            transparent 35%
        ),

        #eaf3e9;
}


/* =========================================================
   14. HOME HERO CONTENT
   ========================================================= */

.hero-content {
    width: 52%;

    max-width: 720px;

    position: relative;

    z-index: 10;
}


.hero-label {
    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 25px;

    color: #d59d17;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 5px;
}


.hero-label span {
    width: 45px;

    height: 1px;

    background:
        #d59d17;
}


.hero-content h1 {
    margin: 0;

    color: #073f50;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(65px, 7vw, 105px);

    line-height: 0.92;

    font-weight: 700;
}


.hero-content h1 em {
    color: #598363;

    font-style: normal;
}
.hero-content h2 {
    font-size: 48px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    color: #0b4653 !important;
    margin: 4px 0 28px !important;
}


.hero-content p {
    max-width: 680px;

    margin:
        35px 0;

    color: #50758a;

    font-size: 20px;

    line-height: 1.8;
}
/* =========================================================
   HOME LOGO - FLOATING ELEMENTS FIX
   ========================================================= */

/* Main hero must allow floating elements to go outside */
.hero,
.hero-section,
.home-hero {
    position: relative;
    overflow: visible !important;
}

/* Logo/orbit container */
.hero-visual,
.hero-logo,
.logo-orbit,
.orbit-container {
    position: relative;
    overflow: visible !important;
    z-index: 5;
}

/* Keep the orbit rings visible */
.orbit,
.orbit-ring,
.orbit-ring-1,
.orbit-ring-2,
.orbit-ring-3 {
    position: absolute;
    overflow: visible !important;
    pointer-events: none;
    z-index: 1;
}

/* Floating balls */
.floating-ball,
.float-ball,
.orbit-ball,
.ball {
    position: absolute;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none;
    z-index: 10;
}

/* Floating leaves */
.floating-leaf,
.float-leaf,
.orbit-leaf,
.leaf {
    position: absolute;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none;
    z-index: 11;
}

/* Make sure the actual logo stays above the orbit */
.hero-logo img,
.hero-visual img,
.logo-orbit img {
    position: relative;
    z-index: 6;
}

/* Do NOT let animations make elements disappear */
.floating-ball,
.float-ball,
.orbit-ball,
.ball,
.floating-leaf,
.float-leaf,
.orbit-leaf,
.leaf {
    animation-fill-mode: both !important;
}

/* Prevent the page/hero from cutting off the decorations */
body {
    overflow-x: hidden;
}

html {
    overflow-x: hidden;
}


/* =========================================================
   15. HERO BUTTONS
   ========================================================= */

.hero-buttons,
.career-buttons,
.involved-buttons {
    display: flex;

    align-items: center;

    gap: 18px;

    flex-wrap: wrap;
}


.primary-btn,
.secondary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding:
        17px 30px;

    border-radius: 35px;

    font-weight: 700;

    font-size: 16px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.primary-btn {

    background:
        #e3af34;

    color: white;

    border: none;

    box-shadow:
        0 12px 25px
        rgba(196,148,34,0.20);
}


.primary-btn:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 16px 30px
        rgba(196,148,34,0.28);
}


.secondary-btn {

    color:
        #578060;

    border:
        1px solid
        #6d9a78;

    background:
        rgba(255,255,255,0.25);
}


.secondary-btn:hover {

    background:
        #578060;

    color:
        white;

    transform:
        translateY(-3px);
}


/* =========================================================
   16. HOME HERO VISUAL
   IMPORTANT:
   NO PLATFORM / BASE
   ========================================================= */

.hero-image {

    width: 48%;

    min-height: 560px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: visible;

    z-index: 5;
}


/* Soft glow behind logo */

.hero-image::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.80),
            rgba(205,229,213,0.05)
        );

    filter:
        blur(10px);

    z-index: 1;
}


/* =========================================================
   17. MAIN HOME LOGO
   ========================================================= */

.hero-image > img {

    width:
        min(430px, 72%);

    height:
        auto;

    position: relative;

    z-index: 10;

    object-fit: contain;

    filter:
        drop-shadow(
            0 25px 30px
            rgba(34,65,54,0.20)
        );

    animation:
        homeLogoFloat 5s ease-in-out infinite;
}


@keyframes homeLogoFloat {

    0%,
    100% {

        transform:
            translateY(0);
    }

    50% {

        transform:
            translateY(-14px);
    }
}


/* =========================================================
   18. REMOVE OLD HOME BASE
   ========================================================= */

.hero-platform,
.platform,
.platform-top,
.platform-blue,
.platform-gold {

    display: none !important;
}


/* =========================================================
   19. HOME ORBIT RINGS
   ========================================================= */

.hero-image::after {

    content: "";

    position: absolute;

    width: 610px;

    height: 225px;

    left: 50%;

    top: 50%;

    transform:
        translate(-50%, -50%)
        rotate(-18deg);

    border:
        1.5px solid
        rgba(255,255,255,0.75);

    border-radius: 50%;

    z-index: 2;

    pointer-events: none;

    animation:
        homeOrbitOne 14s linear infinite;
}


@keyframes homeOrbitOne {

    from {

        transform:
            translate(-50%, -50%)
            rotate(-18deg);
    }

    to {

        transform:
            translate(-50%, -50%)
            rotate(342deg);
    }
}


/* Extra orbit using box-shadow */

.hero-image .hero-circle {

    position: absolute;

    width: 570px;

    height: 220px;

    left: 50%;

    top: 50%;

    transform:
        translate(-50%, -50%)
        rotate(42deg);

    border:
        1.5px solid
        rgba(255,255,255,0.55);

    border-radius: 50%;

    z-index: 2;

    pointer-events: none;

    animation:
        homeOrbitTwo 17s linear infinite reverse;
}


@keyframes homeOrbitTwo {

    from {

        transform:
            translate(-50%, -50%)
            rotate(42deg);
    }

    to {

        transform:
            translate(-50%, -50%)
            rotate(-318deg);
    }
}


/* Third orbit */

.hero-image .hero-circle::after {

    content: "";

    position: absolute;

    width: 620px;

    height: 235px;

    left: 50%;

    top: 50%;

    transform:
        translate(-50%, -50%)
        rotate(105deg);

    border:
        1px solid
        rgba(255,255,255,0.40);

    border-radius: 50%;

    animation:
        homeOrbitThree 20s linear infinite;

    pointer-events: none;
}


@keyframes homeOrbitThree {

    from {

        transform:
            translate(-50%, -50%)
            rotate(105deg);
    }

    to {

        transform:
            translate(-50%, -50%)
            rotate(465deg);
    }
}


/* =========================================================
   20. HOME FLOATING BALLS
   ========================================================= */

.hero-image .hero-circle::before {

    content: "";

    position: absolute;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background:
        #e4b23d;

    right: -15px;
    top: 35px;

    box-shadow:
        0 0 18px
        rgba(228,178,61,0.50);

    animation:
        homeGoldBall 5s ease-in-out infinite;

    z-index: 15;
}


@keyframes homeGoldBall {

    0%,
    100% {

        transform:
            translate(0,0);
    }

    50% {

        transform:
            translate(15px,-25px);
    }
}


/* Blue ball */

.hero-image .hero-circle {

    box-shadow:
        0 0 0 0 transparent;
}


.hero-image img::after {

    content: "";
}


/* =========================================================
   21. FLOATING LEAVES AROUND HOME HERO
   ========================================================= */

.hero-image .hero-leaf {

    position: absolute;

    z-index: 15;

    font-size: 27px;

    opacity: 0.70;

    pointer-events: none;
}


/* =========================================================
   22. STATS
   ========================================================= */

.stats-section {

    max-width: 1250px;

    margin:
        -35px auto 70px;

    background:
        rgba(255,255,255,0.96);

    border-radius: 28px;

    padding:
        30px 35px;

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 20px;

    box-shadow:
        0 20px 50px
        rgba(25,65,45,0.10);

    position: relative;

    z-index: 20;
}


.stat-item {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    border-right:
        1px solid
        #e0e3dc;
}


.stat-item:last-child {

    border-right:
        none;
}


.stat-icon {

    width: 60px;
    height: 60px;

    border-radius: 50%;

    background:
        #f3f6ed;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 25px;
}


.stat-item strong {

    display: block;

    font-family:
        Georgia,
        serif;

    font-size: 30px;

    color:
        #073f50;
}


.stat-item span {

    display: block;

    color:
        #578060;

    margin-top: 3px;
}


/* =========================================================
   23. COMMON HOME SECTIONS
   ========================================================= */

.story-section,
.programs-section,
.success-section,
.news-section {

    padding:
        100px 8%;
}


.section-label {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    color:
        #d59d17;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 5px;

    margin-bottom: 25px;
}


.section-label span {

    width: 45px;

    height: 1px;

    background:
        #d59d17;
}


.section-heading {

    max-width: 1050px;

    margin:
        0 auto 25px;

    text-align: center;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(48px,5vw,75px);

    line-height:
        1.05;

    color:
        #073f50;
}


.section-heading em {

    color:
        #598363;

    font-style:
        normal;
}


.section-description {

    max-width: 800px;

    margin:
        0 auto 60px;

    text-align:
        center;

    color:
        #5b7c8e;

    font-size:
        18px;

    line-height:
        1.8;
}


/* =========================================================
   24. STORY
   ========================================================= */

.story-section {

    background:
        #fbfcf8;
}


.story-cards {

    max-width:
        1250px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        25px;
}


.story-card {

    padding:
        45px;

    min-height:
        270px;

    border-radius:
        28px;

    background:
        linear-gradient(
            145deg,
            #e8f2e5,
            #f8faf5
        );

    border:
        1px solid
        rgba(91,137,102,0.15);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.story-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 20px 40px
        rgba(60,100,70,0.10);
}


.card-number {

    color:
        #dca52c;

    font-weight:
        bold;

    font-size:
        18px;
}


.story-card h3 {

    font-family:
        Georgia,
        serif;

    font-size:
        32px;

    margin:
        35px 0 20px;

    color:
        #073f50;
}


.story-card p {

    color:
        #5b7c8e;

    font-size:
        17px;

    line-height:
        1.8;
}


/* =========================================================
   25. PROGRAM PREVIEW
   ========================================================= */

.programs-section {

    background:
        #eaf3e8;
}


.program-preview-grid {

    max-width:
        1300px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        25px;
}


.program-preview {

    padding:
        40px;

    min-height:
        320px;

    border-radius:
        28px;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;

    border:
        1px solid
        rgba(90,130,95,0.08);
}


.program-preview:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 20px 40px
        rgba(50,90,60,0.12);
}


.women-card {

    background:
        #dfeeda;
}


.children-card {

    background:
        #d7edf4;
}


.community-card {

    background:
        #edf0d7;
}


.healthcare-card {

    background:
        #f3e8dc;
}


.environment-card {

    background:
        #dcefdc;
}


.education-card {

    background:
        #e7e1f0;
}


.program-icon {

    width:
        65px;

    height:
        65px;

    border-radius:
        50%;

    background:
        rgba(255,255,255,0.75);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        28px;

    margin-bottom:
        30px;
}


.program-preview h3 {

    font-family:
        Georgia,
        serif;

    font-size:
        30px;

    color:
        #073f50;

    margin:
        0 0 18px;
}


.program-preview p {

    color:
        #527489;

    line-height:
        1.7;

    font-size:
        16px;

    margin-bottom:
        25px;
}


.program-preview a {

    color:
        #578060;

    font-weight:
        bold;
}


.view-programs-btn {

    display:
        flex;

    width:
        max-content;

    margin:
        50px auto 0;

    padding:
        16px 28px;

    border:
        1px solid
        #648f6d;

    border-radius:
        35px;

    color:
        #578060;

    font-weight:
        bold;

    gap:
        10px;

    transition:
        0.3s ease;
}


.view-programs-btn:hover {

    background:
        #578060;

    color:
        white;
}


/* =========================================================
   26. SUCCESS STORIES
   ========================================================= */

.success-section {

    background:
        #fbfcf8;
}


.success-grid {

    max-width:
        1250px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        25px;
}


.success-card {

    background:
        white;

    border-radius:
        28px;

    overflow:
        hidden;

    border:
        1px solid
        #e2e7df;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.success-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 25px 45px
        rgba(20,65,45,0.12);
}


.success-number {

    background:
        #e6f0e2;

    padding:
        25px 30px;

    color:
        #d59d17;

    font-weight:
        bold;

    font-size:
        18px;
}


.success-content {

    padding:
        35px;
}


.success-content > span {

    color:
        #d59d17;

    font-size:
        12px;

    font-weight:
        bold;

    letter-spacing:
        2px;
}


.success-content h3 {

    font-family:
        Georgia,
        serif;

    color:
        #073f50;

    font-size:
        28px;

    line-height:
        1.25;

    margin:
        18px 0;
}


.success-content p {

    color:
        #5b7c8e;

    line-height:
        1.7;

    font-size:
        16px;

    margin-bottom:
        25px;
}


.success-content a {

    color:
        #578060;

    font-weight:
        bold;
}


/* =========================================================
   27. GET INVOLVED
   ========================================================= */

.involved-section {

    padding:
        120px 8%;

    text-align:
        center;

    background:
        radial-gradient(
            circle at 20% 40%,
            rgba(255,255,255,0.50),
            transparent 30%
        ),
        #e5f0e3;
}


.involved-section h2 {

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(50px,5vw,75px);

    color:
        #073f50;

    margin:
        0 0 25px;
}


.involved-section h2 em {

    color:
        #598363;

    font-style:
        normal;
}


.involved-section p {

    color:
        #58788a;

    font-size:
        19px;

    margin-bottom:
        40px;
}


.involved-buttons {

    justify-content:
        center;
}





/* =========================================================
   29. CONTACT
   ========================================================= */

.contact-section {

    padding:
        110px 8%;

    text-align:
        center;

    background:
        linear-gradient(
            135deg,
            #edf4ed,
            #e1eee3
        );
}


.contact-section p {

    color:
        #58717a;

    font-size:
        18px;

    margin-bottom:
        40px;
}


.contact-box {

    max-width:
        800px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:
        20px;
}


.contact-box > div {

    padding:
        30px;

    border-radius:
        20px;

    background:
        rgba(255,255,255,0.8);
}


.contact-box strong {

    display:
        block;

    margin-bottom:
        8px;

    color:
        #073b4c;
}


.contact-box span {

    color:
        #c59125;
}


/* =========================================================
   30. DONATE SECTION
   ========================================================= */

.donate-section {

    padding:
        110px 8%;

    text-align:
        center;

    background:
        #073b4c;

    color:
        white;
}


.donate-content {

    max-width:
        800px;

    margin:
        auto;
}


.donate-section h2 {

    color:
        white;

    margin-bottom:
        25px;
}


.donate-section p {

    color:
        #c8dce0;

    font-size:
        18px;

    line-height:
        1.7;

    margin-bottom:
        30px;
}


/* =========================================================
   31. CAREER PAGE
   ========================================================= */

.career-hero {

    min-height:
        680px;

    padding:
        80px 8%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    overflow:
        hidden;

    position:
        relative;

    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(255,255,255,0.80),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #edf6eb,
            #dcece2,
            #eef5ef
        );
}


/* Career glow */

.career-glow {

    position:
        absolute;

    border-radius:
        50%;

    pointer-events:
        none;

    filter:
        blur(3px);
}


.glow-one {

    width:
        400px;

    height:
        400px;

    left:
        -180px;

    top:
        -100px;

    background:
        rgba(144,186,153,0.16);
}


.glow-two {

    width:
        300px;

    height:
        300px;

    right:
        -80px;

    bottom:
        -100px;

    background:
        rgba(54,132,162,0.10);
}


/* Career orbit */

.career-orbit {

    position:
        absolute;

    width:
        900px;

    height:
        300px;

    right:
        -250px;

    top:
        40%;

    border:
        1px solid
        rgba(255,255,255,0.65);

    border-radius:
        50%;

    transform:
        rotate(-15deg);

    pointer-events:
        none;

    animation:
        careerOrbitFloat 18s linear infinite;
}


@keyframes careerOrbitFloat {

    from {

        transform:
            rotate(-15deg);
    }

    to {

        transform:
            rotate(345deg);
    }
}


/* Career content */

.career-content {

    width:
        52%;

    max-width:
        700px;

    position:
        relative;

    z-index:
        5;
}


.eyebrow {

    color:
        #c59125;

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        4px;

    margin-bottom:
        25px;
}


.career-content h1 {

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(55px,6vw,88px);

    line-height:
        1;

    color:
        #073b4c;

    margin-bottom:
        30px;
}


.career-content h1 span {

    display:
        block;

    color:
        #527d5b;
}


.career-content p {

    max-width:
        650px;

    color:
        #52717b;

    font-size:
        19px;

    line-height:
        1.8;

    margin-bottom:
        35px;
}


/* Career visual */

.career-visual {

    width:
        45%;

    min-height:
        500px;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.career-circle {

    width:
        340px;

    height:
        340px;

    border-radius:
        50%;

    background:
        linear-gradient(
            145deg,
            #3282a2,
            #073b4c
        );

    border:
        8px solid
        #dcae43;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    box-shadow:
        0 30px 70px
        rgba(7,59,76,0.25);

    position:
        relative;

    z-index:
        4;

    animation:
        careerLogoFloat 5s ease-in-out infinite;
}


@keyframes careerLogoFloat {

    0%,
    100% {

        transform:
            translateY(0);
    }

    50% {

        transform:
            translateY(-12px);
    }
}


.career-globe-icon {

    width:
        190px;

    height:
        190px;

    border-radius:
        50%;

    background:
        rgba(255,255,255,0.90);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        95px;
}


/* Career ring */

.career-ring {

    position:
        absolute;

    width:
        560px;

    height:
        260px;

    border:
        1px solid
        rgba(255,255,255,0.8);

    border-radius:
        50%;

    transform:
        rotate(-15deg);

    animation:
        careerRingFloat 15s linear infinite;

    pointer-events:
        none;
}


@keyframes careerRingFloat {

    from {

        transform:
            rotate(-15deg);
    }

    to {

        transform:
            rotate(345deg);
    }
}


/* Career floating tags */

.career-tag {

    position:
        absolute;

    padding:
        14px 22px;

    border-radius:
        18px;

    background:
        rgba(255,255,255,0.92);

    color:
        #073b4c;

    font-size:
        14px;

    font-weight:
        700;

    box-shadow:
        0 10px 30px
        rgba(20,60,50,0.10);

    z-index:
        6;

    animation:
        tagFloat 4s ease-in-out infinite;
}


.tag-global {

    top:
        10%;

    right:
        5%;
}


.tag-work {

    left:
        0;

    bottom:
        20%;

    animation-delay:
        1s;
}


.tag-impact {

    right:
        0;

    bottom:
        8%;

    animation-delay:
        2s;
}


@keyframes tagFloat {

    0%,
    100% {

        transform:
            translateY(0);
    }

    50% {

        transform:
            translateY(-10px);
    }
}


/* =========================================================
   32. CAREER INFO
   ========================================================= */

.career-info {

    padding:
        120px 8%;

    text-align:
        center;

    background:
        #f8faf5;
}


.career-info > p {

    max-width:
        700px;

    margin:
        -25px auto 60px;

    color:
        #60767d;

    line-height:
        1.8;

    font-size:
        18px;
}


.career-values {

    max-width:
        1100px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        25px;
}


.career-value {

    padding:
        40px;

    border-radius:
        25px;

    background:
        white;

    box-shadow:
        0 15px 40px
        rgba(20,60,50,0.08);

    transition:
        transform 0.3s ease;
}


.career-value:hover {

    transform:
        translateY(-8px);
}


.value-icon {

    width:
        65px;

    height:
        65px;

    border-radius:
        50%;

    margin:
        0 auto 25px;

    background:
        #e7f0e4;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        28px;
}


.career-value h3 {

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    color:
        #073b4c;

    font-size:
        26px;

    margin-bottom:
        15px;
}


.career-value p {

    color:
        #60767d;

    line-height:
        1.7;
}


/* =========================================================
   33. CAREER OPENINGS
   ========================================================= */

.openings-section {

    padding:
        120px 8%;

    background:
        linear-gradient(
            135deg,
            #edf5e9,
            #e2eee5
        );

    text-align:
        center;
}


.openings-intro {

    color:
        #60767d;

    margin:
        -30px auto 60px;

    font-size:
        18px;
}


.job-grid {

    max-width:
        1200px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        25px;
}


.job-card {

    text-align:
        left;

    padding:
        32px;

    border-radius:
        25px;

    background:
        rgba(255,255,255,0.88);

    box-shadow:
        0 15px 40px
        rgba(20,60,50,0.08);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.job-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 20px 45px
        rgba(20,60,50,0.12);
}


.job-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        25px;
}


.job-category {

    color:
        #c59125;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        2px;
}


.job-icon {

    font-size:
        28px;
}


.job-card h3 {

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        27px;

    color:
        #073b4c;

    margin-bottom:
        15px;
}


.job-card p {

    color:
        #60767d;

    line-height:
        1.7;

    margin-bottom:
        25px;
}


.job-details {

    display:
        flex;

    gap:
        15px;

    flex-wrap:
        wrap;

    margin-bottom:
        25px;

    color:
        #527d5b;

    font-size:
        13px;
}


.apply-btn {

    border:
        none;

    background:
        #073b4c;

    color:
        white;

    border-radius:
        25px;

    padding:
        12px 22px;

    cursor:
        pointer;

    font-weight:
        700;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.apply-btn:hover {

    background:
        #527d5b;

    transform:
        translateX(3px);
}


/* =========================================================
   34. CAREER CTA
   ========================================================= */

.career-cta {

    padding:
        120px 8%;

    text-align:
        center;

    background:
        #073b4c;

    color:
        white;
}


.career-cta h2 {

    color:
        white;

    margin-bottom:
        25px;
}


.career-cta p {

    max-width:
        650px;

    margin:
        0 auto 35px;

    color:
        #c6dadd;

    line-height:
        1.7;

    font-size:
        18px;
}


/* =========================================================
   35. FOOTER
   ========================================================= */

.footer {

    background:
        #073f50;

    color:
        white;

    padding:
        60px 8% 25px;
}


.footer-container {

    max-width:
        1250px;

    margin:
        auto;
}


.footer-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;
}


.footer-brand img {

    width:
        80px;

    height:
        65px;

    object-fit:
        contain;
}


.footer-brand h3 {

    font-family:
        Georgia,
        serif;

    font-size:
        30px;

    margin:
        0;
}


.footer-brand p {

    color:
        #d9b04c;

    margin:
        5px 0 0;
}


.footer-text {

    max-width:
        550px;

    color:
        #c7d7dc;

    line-height:
        1.7;

    margin:
        25px 0;
}


.footer-links {

    display:
        flex;

    gap:
        25px;

    flex-wrap:
        wrap;

    margin-bottom:
        35px;
}


.footer-links a {

    color:
        white;

    transition:
        color 0.3s ease;
}


.footer-links a:hover {

    color:
        #e4b23d;
}


.footer-bottom {

    border-top:
        1px solid
        rgba(255,255,255,0.15);

    padding-top:
        20px;

    color:
        #b8cbd1;

    font-size:
        14px;
}


/* =========================================================
   36. SCROLL REVEAL
   ========================================================= */

.page-section,
.career-info,
.openings-section {

    opacity:
        1;

    transform:
        translateY(0);
}


/* IMPORTANT:
   Do NOT hide sections before JavaScript loads.
   This prevents blank/abrupt pages.
*/


/* =========================================================
   37. RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 1200px) {

    .nav-container {

        padding:
            10px 30px;
    }

    .nav-links {

        gap:
            18px;
    }

    .hero-section,
    .career-hero {

        padding-left:
            5%;

        padding-right:
            5%;
    }

}


/* =========================================================
   38. RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 900px) {

    .nav-container {

        min-height:
            85px;

        padding:
            10px 20px;
    }


    .nav-links {

        display:
            none;

        position:
            absolute;

        top:
            100%;

        left:
            0;

        width:
            100%;

        padding:
            25px;

        flex-direction:
            column;

        background:
            rgba(248,251,246,0.98);

        box-shadow:
            0 15px 30px
            rgba(0,0,0,0.08);
    }


    .nav-links.show {

        display:
            flex;
    }


    .menu-toggle {

        display:
            block;
    }


    .donate-btn {

        display:
            none;
    }


    .hero-section,
    .career-hero {

        flex-direction:
            column;

        text-align:
            center;

        gap:
            30px;

        padding:
            70px 5%;
    }


    .hero-content,
    .career-content {

        width:
            100%;

        max-width:
            800px;
    }


    .hero-label {

        justify-content:
            center;
    }


    .hero-buttons,
    .career-buttons {

        justify-content:
            center;
    }


    .hero-image,
    .career-visual {

        width:
            100%;

        min-height:
            430px;
    }


    .stats-section {

        grid-template-columns:
            repeat(2,1fr);

        margin-left:
            25px;

        margin-right:
            25px;
    }


    .stat-item {

        border-right:
            none;
    }


    .story-cards,
    .program-preview-grid,
    .success-grid,
    .career-values,
    .job-grid {

        grid-template-columns:
            1fr;
    }


    .career-content h1 {

        font-size:
            60px;
    }


    .career-circle {

        width:
            300px;

        height:
            300px;
    }


    .career-globe-icon {

        width:
            165px;

        height:
            165px;

        font-size:
            80px;
    }

}


/* =========================================================
   39. RESPONSIVE - SMALL MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .logo img {

        width:
            58px;

        height:
            58px;
    }


    .logo-text h2 {

        font-size:
            24px;
    }


    .logo-text span {

        font-size:
            9px;
    }


    .hero-section {

        min-height:
            auto;

        padding:
            60px 20px 80px;
    }


    .hero-content h1 {

        font-size:
            55px;
    }


    .hero-content p {

        font-size:
            16px;
    }


    .hero-image {

        min-height:
            390px;
    }


    .hero-image > img {

        width:
            75%;
    }


    .hero-image::after {

        width:
            430px;

        height:
            160px;
    }


    .hero-image .hero-circle {

        width:
            430px;

        height:
            160px;
    }


    .hero-image .hero-circle::after {

        width:
            460px;

        height:
            175px;
    }


    .stats-section {

        grid-template-columns:
            1fr;

        padding:
            25px;
    }


    .stat-item {

        border-right:
            none;

        border-bottom:
            1px solid
            #e0e3dc;

        padding:
            15px 0;
    }


    .stat-item:last-child {

        border-bottom:
            none;
    }


    .story-section,
    .programs-section,
    .success-section {

        padding:
            75px 6%;
    }


    .section-heading {

        font-size:
            45px;
    }


    .involved-section {

        padding:
            80px 6%;
    }


    .contact-section {

        padding:
            80px 6%;
    }


    .contact-box {

        grid-template-columns:
            1fr;
    }


    .career-hero {

        min-height:
            auto;

        padding:
            70px 20px;
    }


    .career-content h1 {

        font-size:
            50px;
    }


    .career-content p {

        font-size:
            16px;
    }


    .career-visual {

        min-height:
            390px;
    }


    .career-circle {

        width:
            260px;

        height:
            260px;
    }


    .career-globe-icon {

        width:
            140px;

        height:
            140px;

        font-size:
            68px;
    }


    .career-ring {

        width:
            430px;

        height:
            190px;
    }


    .career-tag {

        padding:
            10px 14px;

        font-size:
            12px;
    }


    .career-info,
    .openings-section,
    .career-cta {

        padding:
            80px 20px;
    }


    .footer {

        padding:
            50px 20px 25px;
    }

}


/* =========================================================
   40. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;
    }
}
/* =========================================================
   GEUGF FINAL HOME DECORATION FIX
   Matches the CURRENT index.html class names
   ========================================================= */

/* ---------------------------------------------------------
   GLOBAL BACKGROUND
   --------------------------------------------------------- */

.global-background {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Keep all website content above decoration */

.navbar,
main,
footer {
    position: relative;
    z-index: 10;
}


/* ---------------------------------------------------------
   GLOBAL ORBIT RINGS
   --------------------------------------------------------- */

.global-background .global-orbit {
    position: absolute;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    pointer-events: none;
}


/* Large right orbit */

.global-background .orbit-one {
    width: 950px;
    height: 320px;

    right: -250px;
    top: 15%;

    transform: rotate(-14deg);

    animation: globalOrbitOne 22s linear infinite;
}


/* Large left orbit */

.global-background .orbit-two {
    width: 850px;
    height: 280px;

    left: -300px;
    bottom: 12%;

    transform: rotate(12deg);

    animation: globalOrbitTwo 27s linear infinite reverse;
}


/* Third global orbit */

.global-background .orbit-three {
    width: 700px;
    height: 250px;

    left: 30%;
    top: 42%;

    transform: rotate(-25deg);

    border-color: rgba(255, 255, 255, 0.35);

    animation: globalOrbitThree 30s linear infinite;
}


/* ---------------------------------------------------------
   GLOBAL ORBIT ANIMATIONS
   --------------------------------------------------------- */

@keyframes globalOrbitOne {

    from {
        transform: rotate(-14deg);
    }

    to {
        transform: rotate(346deg);
    }

}


@keyframes globalOrbitTwo {

    from {
        transform: rotate(12deg);
    }

    to {
        transform: rotate(-348deg);
    }

}


@keyframes globalOrbitThree {

    from {
        transform: rotate(-25deg);
    }

    to {
        transform: rotate(335deg);
    }

}


/* ---------------------------------------------------------
   GLOBAL FLOATING BALLS
   --------------------------------------------------------- */

.global-background .floating-ball {
    position: absolute;

    display: block !important;

    border-radius: 50%;

    pointer-events: none;

    z-index: 5;
}


/* Yellow */

.global-background .ball-yellow {

    width: 18px;
    height: 18px;

    right: 12%;
    top: 25%;

    background: #e4b23d;

    box-shadow:
        0 0 20px rgba(228,178,61,0.45);

    animation:
        globalBallYellow 6s ease-in-out infinite;
}


/* Blue */

.global-background .ball-blue {

    width: 15px;
    height: 15px;

    right: 7%;
    bottom: 20%;

    background: #5ca7c5;

    box-shadow:
        0 0 20px rgba(92,167,197,0.40);

    animation:
        globalBallBlue 7s ease-in-out infinite;
}


/* Green */

.global-background .ball-green {

    width: 12px;
    height: 12px;

    left: 52%;
    top: 32%;

    background: #83b98b;

    box-shadow:
        0 0 18px rgba(131,185,139,0.35);

    animation:
        globalBallGreen 8s ease-in-out infinite;
}


/* White */

.global-background .ball-white {

    width: 24px;
    height: 24px;

    right: 18%;
    bottom: 28%;

    background: rgba(255,255,255,0.80);

    box-shadow:
        0 0 20px rgba(255,255,255,0.50);

    animation:
        globalBallWhite 9s ease-in-out infinite;
}


/* Ball animations */

@keyframes globalBallYellow {

    0%,
    100% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(20px,-25px);
    }

}


@keyframes globalBallBlue {

    0%,
    100% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(-20px,-28px);
    }

}


@keyframes globalBallGreen {

    0%,
    100% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(25px,20px);
    }

}


@keyframes globalBallWhite {

    0%,
    100% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(-25px,-20px);
    }

}


/* ---------------------------------------------------------
   GLOBAL FLOATING LEAVES
   --------------------------------------------------------- */

.global-background .floating-leaf {

    position: absolute;

    display: block !important;

    pointer-events: none;

    z-index: 5;

    font-size: 27px;

    opacity: 0.50;

    filter:
        drop-shadow(
            0 5px 8px
            rgba(40,80,55,0.10)
        );
}


/* Positions */

.global-background .leaf-one {

    left: 6%;
    top: 35%;

    animation:
        globalLeafOne 8s ease-in-out infinite;
}


.global-background .leaf-two {

    right: 8%;
    top: 22%;

    animation:
        globalLeafTwo 9s ease-in-out infinite;
}


.global-background .leaf-three {

    right: 15%;
    bottom: 22%;

    animation:
        globalLeafThree 10s ease-in-out infinite;
}


.global-background .leaf-four {

    left: 38%;
    bottom: 12%;

    animation:
        globalLeafFour 8s ease-in-out infinite;
}


.global-background .leaf-five {

    left: 48%;
    top: 18%;

    animation:
        globalLeafFive 11s ease-in-out infinite;
}


.global-background .leaf-six {

    right: 28%;
    bottom: 15%;

    animation:
        globalLeafSix 9s ease-in-out infinite;
}


/* Leaf animations */

@keyframes globalLeafOne {

    0%,
    100% {
        transform:
            translate(0,0)
            rotate(-10deg);
    }

    50% {
        transform:
            translate(18px,-28px)
            rotate(15deg);
    }

}


@keyframes globalLeafTwo {

    0%,
    100% {
        transform:
            translate(0,0)
            rotate(10deg);
    }

    50% {
        transform:
            translate(-20px,22px)
            rotate(-15deg);
    }

}


@keyframes globalLeafThree {

    0%,
    100% {
        transform:
            translate(0,0)
            rotate(0deg);
    }

    50% {
        transform:
            translate(-22px,-22px)
            rotate(20deg);
    }

}


@keyframes globalLeafFour {

    0%,
    100% {
        transform:
            translate(0,0)
            rotate(-12deg);
    }

    50% {
        transform:
            translate(20px,-25px)
            rotate(12deg);
    }

}


@keyframes globalLeafFive {

    0%,
    100% {
        transform:
            translate(0,0)
            rotate(5deg);
    }

    50% {
        transform:
            translate(-18px,25px)
            rotate(-12deg);
    }

}


@keyframes globalLeafSix {

    0%,
    100% {
        transform:
            translate(0,0)
            rotate(-5deg);
    }

    50% {
        transform:
            translate(22px,-20px)
            rotate(15deg);
    }

}


/* =========================================================
   HOME HERO
   ========================================================= */

.hero-section {
    position: relative;
    overflow: visible !important;
}


/* ---------------------------------------------------------
   HERO IMAGE CONTAINER
   --------------------------------------------------------- */

.hero-image {

    position: relative;

    width: 48%;
    min-height: 560px;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: visible !important;

    z-index: 5;
}


/* ---------------------------------------------------------
   HERO LOGO
   --------------------------------------------------------- */

.hero-image > .main-hero-logo {

    position: relative;

    width: min(430px, 72%);

    height: auto;

    object-fit: contain;

    z-index: 20;

    display: block;

    filter:
        drop-shadow(
            0 25px 30px
            rgba(34,65,54,0.20)
        );

    animation:
        homeLogoFloat 5s ease-in-out infinite;
}


@keyframes homeLogoFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }

}


/* ---------------------------------------------------------
   HOME ORBIT RINGS
   IMPORTANT:
   These match .logo-orbit orbit-1/2/3
   from your current index.html
   --------------------------------------------------------- */

.hero-image .logo-orbit {

    position: absolute;

    left: 50%;
    top: 50%;

    border-radius: 50%;

    pointer-events: none;

    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

    z-index: 8;
}


/* Orbit 1 */

.hero-image .orbit-1 {

    width: 610px;
    height: 225px;

    transform:
        translate(-50%,-50%)
        rotate(-18deg);

    border:
        1.5px solid
        rgba(255,255,255,0.78);

    animation:
        homeOrbitOne 14s linear infinite;
}


/* Orbit 2 */

.hero-image .orbit-2 {

    width: 570px;
    height: 220px;

    transform:
        translate(-50%,-50%)
        rotate(42deg);

    border:
        1.5px solid
        rgba(255,255,255,0.58);

    animation:
        homeOrbitTwo 17s linear infinite reverse;
}


/* Orbit 3 */

.hero-image .orbit-3 {

    width: 620px;
    height: 235px;

    transform:
        translate(-50%,-50%)
        rotate(105deg);

    border:
        1px solid
        rgba(255,255,255,0.42);

    animation:
        homeOrbitThree 20s linear infinite;
}


/* Orbit animations */

@keyframes homeOrbitOne {

    from {
        transform:
            translate(-50%,-50%)
            rotate(-18deg);
    }

    to {
        transform:
            translate(-50%,-50%)
            rotate(342deg);
    }

}


@keyframes homeOrbitTwo {

    from {
        transform:
            translate(-50%,-50%)
            rotate(42deg);
    }

    to {
        transform:
            translate(-50%,-50%)
            rotate(-318deg);
    }

}


@keyframes homeOrbitThree {

    from {
        transform:
            translate(-50%,-50%)
            rotate(105deg);
    }

    to {
        transform:
            translate(-50%,-50%)
            rotate(465deg);
    }

}


/* ---------------------------------------------------------
   HOME FLOATING BALLS
   Matches .orbit-ball ball-1...4
   --------------------------------------------------------- */

.hero-image .orbit-ball {

    position: absolute;

    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

    border-radius: 50%;

    pointer-events: none;

    z-index: 25;
}


/* Ball 1 */

.hero-image .ball-1 {

    width: 18px;
    height: 18px;

    right: 9%;
    top: 28%;

    background: #e4b23d;

    box-shadow:
        0 0 18px
        rgba(228,178,61,0.50);

    animation:
        heroBallOne 5s ease-in-out infinite;
}


/* Ball 2 */

.hero-image .ball-2 {

    width: 15px;
    height: 15px;

    left: 10%;
    top: 38%;

    background: #72b7d1;

    box-shadow:
        0 0 18px
        rgba(114,183,209,0.45);

    animation:
        heroBallTwo 6s ease-in-out infinite;
}


/* Ball 3 */

.hero-image .ball-3 {

    width: 12px;
    height: 12px;

    right: 16%;
    bottom: 25%;

    background: #8bbb8c;

    box-shadow:
        0 0 16px
        rgba(139,187,140,0.45);

    animation:
        heroBallThree 7s ease-in-out infinite;
}


/* Ball 4 */

.hero-image .ball-4 {

    width: 22px;
    height: 22px;

    left: 17%;
    bottom: 20%;

    background: rgba(255,255,255,0.90);

    box-shadow:
        0 0 20px
        rgba(255,255,255,0.60);

    animation:
        heroBallFour 8s ease-in-out infinite;
}


/* Ball animations */

@keyframes heroBallOne {

    0%,
    100% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(18px,-25px);
    }

}


@keyframes heroBallTwo {

    0%,
    100% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(-20px,20px);
    }

}


@keyframes heroBallThree {

    0%,
    100% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(-18px,-22px);
    }

}


@keyframes heroBallFour {

    0%,
    100% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(20px,-18px);
    }

}


/* ---------------------------------------------------------
   HOME FLOATING LEAVES
   Matches hero-leaf-1 ... hero-leaf-6
   --------------------------------------------------------- */

.hero-image .hero-leaf {

    position: absolute;

    display: block !important;

    visibility: visible !important;

    opacity: 0.72 !important;

    font-size: 27px;

    pointer-events: none;

    z-index: 30;

    filter:
        drop-shadow(
            0 5px 8px
            rgba(40,80,55,0.12)
        );
}


/* Leaf positions */

.hero-image .hero-leaf-1 {

    left: 5%;
    top: 18%;

    animation:
        heroLeafOne 7s ease-in-out infinite;
}


.hero-image .hero-leaf-2 {

    right: 7%;
    top: 15%;

    animation:
        heroLeafTwo 8s ease-in-out infinite;
}


.hero-image .hero-leaf-3 {

    right: 4%;
    bottom: 18%;

    animation:
        heroLeafThree 9s ease-in-out infinite;
}


.hero-image .hero-leaf-4 {

    left: 7%;
    bottom: 15%;

    animation:
        heroLeafFour 8s ease-in-out infinite;
}


.hero-image .hero-leaf-5 {

    right: 22%;
    top: 5%;

    animation:
        heroLeafFive 10s ease-in-out infinite;
}


.hero-image .hero-leaf-6 {

    left: 23%;
    bottom: 8%;

    animation:
        heroLeafSix 9s ease-in-out infinite;
}


/* Leaf animations */

@keyframes heroLeafOne {

    0%,
    100% {
        transform:
            translate(0,0)
            rotate(-10deg);
    }

    50% {
        transform:
            translate(18px,-25px)
            rotate(15deg);
    }

}


@keyframes heroLeafTwo {

    0%,
    100% {
        transform:
            translate(0,0)
            rotate(10deg);
    }

    50% {
        transform:
            translate(-20px,20px)
            rotate(-15deg);
    }

}


@keyframes heroLeafThree {

    0%,
    100% {
        transform:
            translate(0,0)
            rotate(0deg);
    }

    50% {
        transform:
            translate(-22px,-22px)
            rotate(18deg);
    }

}


@keyframes heroLeafFour {

    0%,
    100% {
        transform:
            translate(0,0)
            rotate(-8deg);
    }

    50% {
        transform:
            translate(20px,-22px)
            rotate(12deg);
    }

}


@keyframes heroLeafFive {

    0%,
    100% {
        transform:
            translate(0,0)
            rotate(5deg);
    }

    50% {
        transform:
            translate(-18px,20px)
            rotate(-15deg);
    }

}


@keyframes heroLeafSix {

    0%,
    100% {
        transform:
            translate(0,0)
            rotate(-5deg);
    }

    50% {
        transform:
            translate(22px,-18px)
            rotate(15deg);
    }

}


/* ---------------------------------------------------------
   REMOVE THE OLD PLATFORM / BASE COMPLETELY
   --------------------------------------------------------- */

.hero-platform,
.platform,
.platform-top,
.platform-blue,
.platform-gold,
.hero-base,
.logo-base,
.logo-platform {

    display: none !important;

}


/* ---------------------------------------------------------
   IMPORTANT: DECORATIONS MUST NOT DISAPPEAR
   --------------------------------------------------------- */

.hero-image,
.hero-section,
.global-background,
.logo-orbit,
.orbit-ball,
.hero-leaf {

    overflow: visible !important;
}


/* ---------------------------------------------------------
   RESPONSIVE HOME HERO
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .hero-image {
        width: 100%;
        min-height: 460px;
    }

    .hero-image .main-hero-logo {
        width: min(360px, 70%);
    }

    .hero-image .orbit-1 {
        width: 500px;
        height: 190px;
    }

    .hero-image .orbit-2 {
        width: 470px;
        height: 180px;
    }

    .hero-image .orbit-3 {
        width: 510px;
        height: 195px;
    }

}


@media (max-width: 600px) {

    .hero-image {
        min-height: 390px;
    }

    .hero-image .main-hero-logo {
        width: 75%;
    }

    .hero-image .orbit-1 {
        width: 400px;
        height: 150px;
    }

    .hero-image .orbit-2 {
        width: 380px;
        height: 145px;
    }

    .hero-image .orbit-3 {
        width: 410px;
        height: 155px;
    }

    .hero-image .hero-leaf {
        font-size: 21px;
    }

}
/* =========================================================
   GEUGF FINAL PROFESSIONAL NAVIGATION
   ========================================================= */

.navbar {
    position: relative;
    z-index: 1000;
    width: 100%;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(7, 63, 80, 0.06);
}


.nav-container {
    max-width: 1450px;
    margin: 0 auto;

    min-height: 108px;

    padding:
        0 70px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 35px;
}


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

.logo {
    display: flex;
    align-items: center;

    gap: 14px;

    flex-shrink: 0;

    text-decoration: none;
}


.logo img {
    width: 72px;
    height: 72px;

    object-fit: contain;

    display: block;
}


.logo-text {
    display: flex;
    flex-direction: column;

    justify-content: center;
}


.logo-text h2 {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 30px;

    line-height: 1;

    color: #073f50;

    letter-spacing: -0.5px;
}


.logo-text span {
    margin-top: 7px;

    font-size: 11px;

    color: #c99520;

    white-space: nowrap;

    letter-spacing: 0.1px;
}


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

.nav-links {
    display: flex;
    align-items: center;

    justify-content: center;

    gap: 34px;

    margin-left: auto;
    margin-right: 20px;
}


.nav-links a {
    position: relative;

    display: inline-flex;
    align-items: center;

    height: 108px;

    color: #073f50;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 15px;

    font-weight: 600;

    text-decoration: none;

    white-space: nowrap;

    transition:
        color 0.25s ease;
}


/* underline */

.nav-links a::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: 0;

    height: 2px;

    background: #dca52c;

    transform:
        scaleX(0);

    transform-origin:
        center;

    transition:
        transform 0.25s ease;
}


.nav-links a:hover {

    color: #d29b21;
}


.nav-links a:hover::after,
.nav-links a.active::after {

    transform:
        scaleX(1);
}


.nav-links a.active {

    color: #d29b21;
}


/* =========================================================
   DONATE BUTTON
   ========================================================= */

.donate-btn {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 138px;

    height: 52px;

    padding:
        0 25px;

    border-radius: 30px;

    background:
        #dca52c;

    color: white !important;

    font-size: 15px;

    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;

    box-shadow:
        0 10px 25px
        rgba(220, 165, 44, 0.22);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


.donate-btn:hover {

    background:
        #c8931e;

    transform:
        translateY(-2px);

    box-shadow:
        0 14px 30px
        rgba(220, 165, 44, 0.30);
}


/* =========================================================
   REMOVE OLD NAV ITEMS IF THEY STILL EXIST
   ========================================================= */

.nav-links a[href="/news"],
.nav-links a[href="/impact"] {

    display: none !important;
}


/* =========================================================
   HIDE OLD NEWS / IMPACT SECTIONS
   SAFETY NET IN CASE OLD HTML REMAINS
   ========================================================= */

.news-section,
.impact-section {

    display: none !important;
}


/* =========================================================
   RESPONSIVE NAVIGATION
   ========================================================= */

@media (max-width: 1200px) {

    .nav-container {

        padding:
            0 35px;

        gap: 20px;
    }


    .nav-links {

        gap: 22px;

        margin-right: 10px;
    }


    .nav-links a {

        font-size: 14px;
    }


    .donate-btn {

        min-width: 120px;

        padding:
            0 18px;
    }

}


@media (max-width: 1000px) {

    .nav-container {

        min-height: 90px;

        padding:
            0 25px;
    }


    .nav-links {

        display: none;
    }


    .donate-btn {

        height: 46px;

        min-width: 110px;

        font-size: 14px;
    }

}
/* =========================================================
   GEUGF DONATION PAGE
   ========================================================= */


/* =========================================================
   DONATION HERO
========================================================= */

.donation-hero {

    min-height: 500px;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 80px 8%;

    background:

        radial-gradient(
            circle at 20% 40%,
            rgba(255,255,255,0.85),
            transparent 30%
        ),

        radial-gradient(
            circle at 80% 60%,
            rgba(210,232,217,0.8),
            transparent 35%
        ),

        #eaf3e9;

}


/* orbit decoration */

.donation-orbit {

    position: absolute;

    border:
        1px solid
        rgba(255,255,255,0.75);

    border-radius: 50%;

    pointer-events: none;

}


.orbit-a {

    width: 700px;

    height: 260px;

    transform:
        rotate(-18deg);

    animation:
        donationOrbitOne 18s linear infinite;

}


.orbit-b {

    width: 550px;

    height: 210px;

    transform:
        rotate(35deg);

    animation:
        donationOrbitTwo 22s linear infinite reverse;

}


@keyframes donationOrbitOne {

    from {

        transform:
            rotate(-18deg);

    }

    to {

        transform:
            rotate(342deg);

    }

}


@keyframes donationOrbitTwo {

    from {

        transform:
            rotate(35deg);

    }

    to {

        transform:
            rotate(-325deg);

    }

}


/* hero content */

.donation-hero-content {

    position: relative;

    z-index: 5;

    max-width: 900px;

}


.donation-label {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 18px;

    margin-bottom: 25px;

    color:
        #d59d17;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 5px;

}


.donation-label span {

    width: 45px;

    height: 1px;

    background:
        #d59d17;

}


.donation-hero h1 {

    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(55px, 7vw, 95px);

    line-height: 0.98;

    color:
        #073f50;

}


.donation-hero h1 em {

    display: block;

    color:
        #598363;

    font-style: normal;

}


.donation-hero-content p {

    max-width: 700px;

    margin:
        35px auto 0;

    color:
        #527489;

    font-size: 19px;

    line-height: 1.8;

}


/* floating heart */

.donation-glow {

    position: absolute;

    right: 9%;

    bottom: 45px;

    width: 110px;

    height: 110px;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.75);

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow:
        0 20px 60px
        rgba(60,90,70,0.12);

    animation:
        donationFloat 4s ease-in-out infinite;

}


.donation-heart {

    color:
        #dca52c;

    font-size: 40px;

}


@keyframes donationFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-15px);

    }

}



/* =========================================================
   MAIN DONATION SECTION
========================================================= */

.donation-section {

    padding:
        110px 8%;

    background:
        #fbfcf8;

}


.donation-heading {

    max-width: 850px;

    margin:
        0 auto 25px;

    text-align: center;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(42px, 5vw, 65px);

    line-height: 1.08;

    color:
        #073f50;

}


.donation-heading em {

    color:
        #598363;

    font-style: normal;

}


.donation-description {

    max-width: 720px;

    margin:
        0 auto 60px;

    text-align: center;

    color:
        #5b7c8e;

    font-size: 17px;

    line-height: 1.8;

}



/* =========================================================
   DONATION OPTIONS
========================================================= */

.donation-options {

    max-width: 1250px;

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 22px;

}


.donation-card {

    position: relative;

    min-height: 350px;

    padding: 35px;

    border: 1px solid
        rgba(82,125,91,0.12);

    border-radius: 30px;

    text-align: left;

    cursor: pointer;

    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;

}


.donation-card::before {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    border-radius: 50%;

    right: -70px;

    top: -70px;

    background:
        rgba(255,255,255,0.45);

}


.donation-card:hover {

    transform:
        translateY(-10px);

    box-shadow:
        0 25px 50px
        rgba(40,80,65,0.12);

}


.money-card {

    background:
        linear-gradient(
            145deg,
            #fff5d9,
            #f8fbf5
        );

}


.clothes-card {

    background:
        linear-gradient(
            145deg,
            #e6f0e7,
            #f8fbf5
        );

}


.food-card {

    background:
        linear-gradient(
            145deg,
            #f5eddb,
            #f8fbf5
        );

}


.medical-card {

    background:
        linear-gradient(
            145deg,
            #e2eef0,
            #f8fbf5
        );

}


.donation-icon {

    width: 68px;

    height: 68px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.75);

    font-size: 30px;

    margin-bottom: 25px;

    position: relative;

    z-index: 2;

}


.donation-number {

    display: block;

    margin-bottom: 10px;

    color:
        #d59d17;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

}


.donation-card h3 {

    margin:
        0 0 15px;

    font-family:
        Georgia,
        serif;

    color:
        #073f50;

    font-size: 30px;

}


.donation-card p {

    color:
        #5b7c8e;

    line-height: 1.7;

    font-size: 15px;

}


.donation-arrow {

    position: absolute;

    bottom: 30px;

    left: 35px;

    color:
        #578060;

    font-size: 14px;

    font-weight: 700;

}



/* =========================================================
   PANELS
========================================================= */

.donation-panel {

    max-width: 1150px;

    margin:
        50px auto 0;

    display: none;

    border-radius: 35px;

    overflow: hidden;

    box-shadow:
        0 30px 70px
        rgba(30,70,50,0.13);

}


.donation-panel.panel-visible {

    display: block;

    animation:
        panelReveal 0.55s ease;

}


@keyframes panelReveal {

    from {

        opacity: 0;

        transform:
            translateY(25px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}



/* =========================================================
   MONEY PANEL
========================================================= */

#money-panel {

    background:
        linear-gradient(
            135deg,
            #073f50,
            #0c5366
        );

    color: white;

}


.panel-content {

    max-width: 800px;

    margin: auto;

    padding:
        65px 50px;

    text-align: center;

}


.panel-label {

    display: block;

    margin-bottom: 18px;

    color:
        #e2b33e;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 4px;

}


.panel-content h2 {

    margin:
        0 0 20px;

    font-family:
        Georgia,
        serif;

    color: white;

    font-size:
        clamp(38px, 5vw, 60px);

}


.panel-content h2 em {

    color:
        #9bc49f;

    font-style: normal;

}


.panel-content > p {

    max-width: 650px;

    margin:
        0 auto 35px;

    color:
        #c8dce0;

    line-height: 1.8;

}



/* amount buttons */

.amount-options {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 22px;

}


.amount-options button {

    min-width: 110px;

    padding:
        14px 22px;

    border:
        1px solid
        rgba(255,255,255,0.25);

    border-radius: 30px;

    background:
        rgba(255,255,255,0.08);

    color: white;

    font-weight: 700;

    cursor: pointer;

    transition:
        0.25s ease;

}


.amount-options button:hover {

    background:
        #dca52c;

    border-color:
        #dca52c;

    transform:
        translateY(-2px);

}



/* custom amount */

.custom-amount {

    max-width: 500px;

    height: 58px;

    margin:
        0 auto 25px;

    display: flex;

    align-items: center;

    padding:
        0 20px;

    border-radius: 15px;

    background:
        white;

}


.custom-amount span {

    color:
        #073f50;

    font-size: 20px;

    font-weight: 700;

}


.custom-amount input {

    width: 100%;

    border: none;

    outline: none;

    padding:
        0 12px;

    font-size: 17px;

    color:
        #073f50;

    background:
        transparent;

}



/* secure button */

.secure-donate-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    min-width: 230px;

    padding:
        17px 30px;

    border: none;

    border-radius: 35px;

    background:
        #dca52c;

    color: white;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 15px 30px
        rgba(220,165,44,0.25);

    transition:
        0.3s ease;

}


.secure-donate-btn:hover {

    transform:
        translateY(-3px);

    background:
        #c8931e;

    box-shadow:
        0 18px 35px
        rgba(220,165,44,0.35);

}


.secure-note {

    margin-top: 20px;

    color:
        #a9c4c9;

    font-size: 13px;

}


.payment-message {

    margin-top: 20px;

    min-height: 22px;

    color:
        #d7e9db;

    font-size: 14px;

}


.payment-message.success {

    color:
        #9ce0a5;

}


.payment-message.error {

    color:
        #ffb0a9;

}



/* =========================================================
   PHYSICAL DONATION
========================================================= */

#physical-panel {

    background:
        #f1f7ed;

}


.physical-content {

    display: grid;

    grid-template-columns:
        1.3fr 0.7fr;

    gap: 0;

}


.physical-main {

    padding:
        60px;

}


.physical-main h2 {

    margin:
        0 0 20px;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(38px, 5vw, 58px);

    color:
        #073f50;

}


.physical-main h2 em {

    color:
        #598363;

    font-style: normal;

}


.physical-main > p {

    max-width: 650px;

    color:
        #5b7c8e;

    line-height: 1.8;

    margin-bottom: 35px;

}



/* shop buttons */

.shop-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

}


.shop-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    padding:
        15px 24px;

    border-radius: 30px;

    color: white;

    font-weight: 700;

    text-decoration: none;

    transition:
        0.3s ease;

}


.shop-btn:hover {

    transform:
        translateY(-3px);

}


.flipkart {

    background:
        #2874f0;

}


.meesho {

    background:
        #9b2d65;

}



/* warehouse */

.warehouse-card {

    padding:
        50px 40px;

    background:
        #073f50;

    color: white;

}


.warehouse-icon {

    width: 65px;

    height: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.12);

    font-size: 28px;

    margin-bottom: 25px;

}


.warehouse-card > span {

    color:
        #dca52c;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;

}


.warehouse-card h3 {

    margin:
        15px 0;

    font-family:
        Georgia,
        serif;

    font-size: 27px;

}


.warehouse-card > p {

    color:
        #c4d8dc;

    line-height: 1.7;

    font-size: 14px;

}


.warehouse-address {

    margin:
        25px 0;

    padding:
        20px;

    border-radius: 15px;

    background:
        rgba(255,255,255,0.08);

    color:
        #e8f0f1;

    line-height: 1.8;

    font-size: 14px;

}


.warehouse-address strong {

    color:
        white;

}


.warehouse-note {

    color:
        #d4e1e3 !important;

    font-size: 13px !important;

}



/* =========================================================
   TRUST SECTION
========================================================= */

.donation-trust {

    padding:
        80px 8%;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 25px;

    background:
        #f8faf5;

}


.trust-card {

    padding:
        35px;

    text-align: center;

    border-radius:
        25px;

    background:
        white;

    border:
        1px solid
        #e3e9df;

    transition:
        0.3s ease;

}


.trust-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 20px 40px
        rgba(30,70,50,0.08);

}


.trust-icon {

    font-size: 32px;

    margin-bottom: 15px;

}


.trust-card h3 {

    margin-bottom: 10px;

    font-family:
        Georgia,
        serif;

    font-size: 25px;

    color:
        #073f50;

}


.trust-card p {

    color:
        #5b7c8e;

    line-height: 1.7;

}



/* =========================================================
   ACTIVE DONATE BUTTON
========================================================= */

.donate-btn.active {

    box-shadow:
        0 15px 30px
        rgba(220,165,44,0.35);

}



/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .donation-options {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .physical-content {

        grid-template-columns:
            1fr;

    }


    .donation-glow {

        display:
            none;

    }


    .donation-trust {

        grid-template-columns:
            1fr;

    }

}


@media (max-width: 650px) {

    .donation-hero {

        min-height:
            470px;

        padding:
            70px 20px;

    }


    .donation-hero h1 {

        font-size:
            52px;

    }


    .donation-label {

        font-size:
            11px;

        letter-spacing:
            3px;

    }


    .donation-section {

        padding:
            80px 20px;

    }


    .donation-options {

        grid-template-columns:
            1fr;

    }


    .donation-card {

        min-height:
            320px;

    }


    .panel-content,
    .physical-main {

        padding:
            45px 25px;

    }


    .warehouse-card {

        padding:
            40px 25px;

    }


    .amount-options button {

        min-width:
            90px;

    }


    .shop-buttons {

        flex-direction:
            column;

    }


    .shop-btn {

        width:
            100%;

    }

}
/* =========================================================
   ABOUT US PAGE
   GRAND EVO UNITED GLOBAL FOUNDATION
========================================================= */


/* ---------------------------------------------------------
   MAIN PAGE
--------------------------------------------------------- */

.about-page {
    position: relative;
    width: 100%;
    overflow: hidden;
}


/* ---------------------------------------------------------
   SECTION LABEL
--------------------------------------------------------- */

.about-page .section-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    color: #d99d05;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 5px;

    margin-bottom: 25px;
}

.about-page .section-label span {
    width: 42px;
    height: 1px;
    background: #d9a321;
}


/* ---------------------------------------------------------
   ABOUT HERO
--------------------------------------------------------- */

.about-hero {

    position: relative;

    min-height: 720px;

    display: grid;

    grid-template-columns: 1.05fr 0.95fr;

    align-items: center;

    max-width: 1400px;

    margin: 0 auto;

    padding: 80px 70px 100px;

    z-index: 2;
}


.about-hero-content {

    position: relative;

    z-index: 5;

    animation: aboutHeroText 1s ease forwards;

}


@keyframes aboutHeroText {

    from {
        opacity: 0;
        transform: translateX(-45px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


.about-hero .section-label {

    justify-content: flex-start;
}


.about-hero h1 {

    margin: 0;

    max-width: 700px;

    color: #073f50;

    font-family: "Playfair Display", serif;

    font-size: clamp(55px, 6vw, 88px);

    line-height: 0.98;

    font-weight: 700;

    letter-spacing: -3px;
}


.about-hero h1 span {

    display: block;

    color: #5c8768;

}


.about-hero-text {

    max-width: 650px;

    margin-top: 30px;

    color: #4d7890;

    font-size: 18px;

    line-height: 1.8;
}


.about-hero-buttons {

    display: flex;

    gap: 18px;

    margin-top: 35px;

}


.about-primary-btn,
.about-secondary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 16px 27px;

    border-radius: 40px;

    text-decoration: none;

    font-weight: 700;

    transition: all 0.3s ease;
}


.about-primary-btn {

    background: #eab12b;

    color: white;

    box-shadow: 0 12px 30px rgba(211, 160, 25, 0.25);
}


.about-primary-btn:hover {

    transform: translateY(-4px);

    box-shadow: 0 18px 35px rgba(211, 160, 25, 0.35);
}


.about-secondary-btn {

    border: 1px solid #7aa48a;

    color: #4f7c5d;

    background: rgba(255,255,255,0.35);
}


.about-secondary-btn:hover {

    background: #5c8768;

    color: white;

    transform: translateY(-4px);
}


/* ---------------------------------------------------------
   HERO VISUAL
--------------------------------------------------------- */

.about-visual {

    position: relative;

    width: 520px;

    height: 520px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: center;
}


.about-glow {

    position: absolute;

    width: 330px;

    height: 330px;

    border-radius: 50%;

    background: rgba(231, 194, 83, 0.17);

    filter: blur(35px);

    animation: glowPulse 4s ease-in-out infinite;
}


@keyframes glowPulse {

    0%,
    100% {
        transform: scale(0.9);
        opacity: 0.55;
    }

    50% {
        transform: scale(1.12);
        opacity: 0.85;
    }

}


.about-circle {

    position: relative;

    width: 300px;

    height: 300px;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: center;

    animation: logoFloat 4s ease-in-out infinite;
}


.about-circle img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    filter: drop-shadow(
        0 20px 30px rgba(4, 62, 78, 0.18)
    );
}


@keyframes logoFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }

}


/* ---------------------------------------------------------
   ORBITS
--------------------------------------------------------- */

.about-orbit {

    position: absolute;

    width: 480px;

    height: 190px;

    border: 1px solid rgba(255,255,255,0.9);

    border-radius: 50%;

    z-index: 2;
}


.orbit-a {

    transform: rotate(25deg);

    animation: orbitRotate 12s linear infinite;
}


.orbit-b {

    transform: rotate(-35deg);

    animation: orbitRotateReverse 15s linear infinite;
}


.orbit-c {

    width: 420px;

    height: 420px;

    border: 1px solid rgba(255,255,255,0.5);

    animation: slowSpin 20s linear infinite;
}


@keyframes orbitRotate {

    from {
        transform: rotate(25deg);
    }

    to {
        transform: rotate(385deg);
    }

}


@keyframes orbitRotateReverse {

    from {
        transform: rotate(-35deg);
    }

    to {
        transform: rotate(-395deg);
    }

}


@keyframes slowSpin {

    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }

}


/* ---------------------------------------------------------
   FLOATING HERO ELEMENTS
--------------------------------------------------------- */

.about-float {

    position: absolute;

    z-index: 10;

    font-size: 30px;

    filter: drop-shadow(
        0 7px 10px rgba(60,100,70,0.18)
    );
}


.float-leaf-one {

    top: 65px;

    left: 75px;

    animation: floatingOne 5s ease-in-out infinite;
}


.float-leaf-two {

    right: 40px;

    top: 110px;

    animation: floatingTwo 6s ease-in-out infinite;
}


.float-leaf-three {

    bottom: 55px;

    left: 90px;

    animation: floatingThree 5.5s ease-in-out infinite;
}


@keyframes floatingOne {

    0%,
    100% {
        transform: translate(0,0) rotate(0);
    }

    50% {
        transform: translate(20px,-25px) rotate(12deg);
    }

}


@keyframes floatingTwo {

    0%,
    100% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(-18px,25px);
    }

}


@keyframes floatingThree {

    0%,
    100% {
        transform: translate(0,0) rotate(0);
    }

    50% {
        transform: translate(15px,-20px) rotate(-15deg);
    }

}


/* ---------------------------------------------------------
   DOTS
--------------------------------------------------------- */

.about-dot {

    position: absolute;

    width: 14px;

    height: 14px;

    border-radius: 50%;

    z-index: 8;
}


.about-dot-one {

    background: #e7b42e;

    right: 80px;

    top: 210px;

    box-shadow: 0 0 18px rgba(231,180,46,0.5);

    animation: dotFloat 4s infinite ease-in-out;
}


.about-dot-two {

    background: #5daac8;

    left: 40px;

    top: 250px;

    box-shadow: 0 0 18px rgba(93,170,200,0.5);

    animation: dotFloat 5s infinite ease-in-out reverse;
}


.about-dot-three {

    background: #75b982;

    right: 110px;

    bottom: 90px;

    animation: dotFloat 4.5s infinite ease-in-out;
}


@keyframes dotFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-25px);
    }

}


/* ---------------------------------------------------------
   STORY SECTION
--------------------------------------------------------- */

.about-story {

    position: relative;

    max-width: 1200px;

    margin: 0 auto;

    padding: 100px 40px 120px;

    z-index: 2;
}


.about-story-heading {

    text-align: center;

    max-width: 800px;

    margin: 0 auto 80px;
}


.about-story-heading h2,
.mission-title,
.belief-heading h2 {

    font-family: "Playfair Display", serif;

    color: #073f50;

    font-size: clamp(42px, 5vw, 65px);

    line-height: 1.1;

    margin: 0;
}


.about-story-heading h2 span,
.mission-title span,
.belief-heading h2 span {

    color: #5c8768;
}


.about-story-heading p {

    color: #587c8d;

    font-size: 17px;

    line-height: 1.8;

    margin-top: 20px;
}


/* ---------------------------------------------------------
   TIMELINE
--------------------------------------------------------- */

.story-timeline {

    position: relative;

    max-width: 1000px;

    margin: auto;
}


.story-line {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 50%;

    width: 2px;

    background: linear-gradient(
        to bottom,
        transparent,
        #d8a82a,
        #6e9879,
        transparent
    );

    transform: translateX(-50%);
}


.story-item {

    position: relative;

    width: 50%;

    padding: 20px 60px 70px 0;

    opacity: 0;

    transform: translateY(40px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}


.story-item.show {

    opacity: 1;

    transform: translateY(0);
}


.story-item-right {

    margin-left: 50%;

    padding: 20px 0 70px 60px;
}


.story-number {

    position: absolute;

    top: 22px;

    right: -20px;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #eab12b;

    color: white;

    font-size: 12px;

    font-weight: 700;

    z-index: 5;

    box-shadow: 0 0 0 8px rgba(234,177,43,0.12);
}


.story-item-right .story-number {

    left: -20px;

    right: auto;

    background: #5c8768;

    box-shadow: 0 0 0 8px rgba(92,135,104,0.12);
}


.story-card {

    padding: 30px;

    border-radius: 25px;

    background: rgba(255,255,255,0.72);

    border: 1px solid rgba(255,255,255,0.9);

    box-shadow:
        0 18px 50px rgba(24,75,83,0.08);

    transition: all 0.35s ease;

    backdrop-filter: blur(10px);
}


.story-card:hover {

    transform: translateY(-8px);

    box-shadow:
        0 25px 60px rgba(24,75,83,0.13);
}


.story-icon {

    font-size: 32px;

    display: block;

    margin-bottom: 15px;
}


.story-card h3 {

    color: #073f50;

    font-family: "Playfair Display", serif;

    font-size: 27px;

    margin: 0 0 10px;
}


.story-card p {

    color: #5b7e8e;

    line-height: 1.7;

    margin: 0;
}


/* ---------------------------------------------------------
   MISSION SECTION
--------------------------------------------------------- */

.mission-section {

    position: relative;

    max-width: 1200px;

    margin: 0 auto;

    padding: 90px 40px 120px;

    text-align: center;

    z-index: 2;
}


.mission-title {

    max-width: 850px;

    margin: auto;

    margin-bottom: 55px;
}


.mission-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 25px;

    text-align: left;
}


.mission-card {

    position: relative;

    min-height: 330px;

    padding: 40px;

    border-radius: 30px;

    overflow: hidden;

    opacity: 0;

    transform: translateY(40px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease,
        box-shadow 0.3s ease;
}


.mission-card.show {

    opacity: 1;

    transform: translateY(0);
}


.vision-card {

    background: rgba(255,255,255,0.72);

    border: 1px solid rgba(255,255,255,0.9);

    box-shadow: 0 20px 50px rgba(30,80,90,0.08);
}


.mission-card-main {

    background: #073f50;

    color: white;

    box-shadow: 0 25px 60px rgba(7,63,80,0.18);
}


.mission-card:hover {

    transform: translateY(-8px);
}


.mission-card-top {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 30px;
}


.mission-card-top span {

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 4px;

    color: #d7a020;
}


.mission-icon {

    width: 50px;

    height: 50px;

    border-radius: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(225,171,41,0.13);

    font-size: 22px;
}


.mission-card h3 {

    font-family: "Playfair Display", serif;

    font-size: 34px;

    line-height: 1.2;

    margin: 0 0 18px;

    color: #073f50;
}


.mission-card-main h3 {

    color: white;
}


.mission-card p {

    color: #5c7d8d;

    line-height: 1.8;

    font-size: 16px;

    max-width: 470px;
}


.mission-card-main p {

    color: rgba(255,255,255,0.72);
}


.mission-decoration {

    position: absolute;

    right: 35px;

    bottom: 20px;

    font-size: 90px;

    color: rgba(225,171,41,0.08);
}


/* ---------------------------------------------------------
   BELIEF SECTION
--------------------------------------------------------- */

.belief-section {

    max-width: 1200px;

    margin: 0 auto;

    padding: 90px 40px 120px;

    z-index: 2;

    position: relative;
}


.belief-heading {

    text-align: center;

    max-width: 850px;

    margin: auto auto 55px;
}


.belief-heading p {

    max-width: 700px;

    margin: 20px auto 0;

    color: #5c7d8d;

    font-size: 17px;

    line-height: 1.8;
}


.belief-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;
}


.belief-card {

    display: flex;

    align-items: flex-start;

    gap: 20px;

    padding: 30px;

    background: rgba(255,255,255,0.72);

    border: 1px solid rgba(255,255,255,0.95);

    border-radius: 24px;

    box-shadow: 0 15px 40px rgba(25,75,85,0.07);

    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease,
        box-shadow 0.3s ease;
}


.belief-card.show {

    opacity: 1;

    transform: translateY(0);
}


.belief-card:hover {

    transform: translateY(-7px);

    box-shadow: 0 22px 50px rgba(25,75,85,0.12);
}


.belief-icon {

    min-width: 60px;

    height: 60px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 27px;

    background: #eef5e9;
}


.belief-card h3 {

    color: #073f50;

    font-family: "Playfair Display", serif;

    font-size: 25px;

    margin: 2px 0 8px;
}


.belief-card p {

    color: #5c7d8d;

    line-height: 1.65;

    margin: 0;
}


/* ---------------------------------------------------------
   CTA
--------------------------------------------------------- */

.about-cta {

    position: relative;

    max-width: 1200px;

    min-height: 480px;

    margin: 30px auto 100px;

    padding: 80px 50px;

    border-radius: 40px;

    overflow: hidden;

    background: #073f50;

    text-align: center;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 2;

    box-shadow: 0 30px 70px rgba(7,63,80,0.18);
}


.about-cta::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    background: rgba(92,135,104,0.16);

    left: -180px;

    top: -200px;

    filter: blur(5px);
}


.about-cta::after {

    content: "";

    position: absolute;

    width: 400px;

    height: 400px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,0.12);

    right: -100px;

    bottom: -180px;
}


.cta-content {

    position: relative;

    z-index: 5;

    max-width: 800px;
}


.light-label {

    color: #e8b330 !important;
}


.about-cta h2 {

    color: white;

    font-family: "Playfair Display", serif;

    font-size: clamp(42px, 5vw, 65px);

    line-height: 1.1;

    margin: 0;
}


.about-cta h2 span {

    color: #a8c99f;

    display: block;
}


.about-cta p {

    max-width: 700px;

    margin: 25px auto;

    color: rgba(255,255,255,0.75);

    line-height: 1.8;

    font-size: 17px;
}


.cta-buttons {

    display: flex;

    justify-content: center;

    gap: 15px;

    margin-top: 30px;
}


.cta-donate,
.cta-outline {

    padding: 16px 28px;

    border-radius: 40px;

    text-decoration: none;

    font-weight: 700;

    transition: 0.3s ease;
}


.cta-donate {

    background: #eab12b;

    color: white;
}


.cta-donate:hover {

    transform: translateY(-4px);

    box-shadow: 0 15px 30px rgba(234,177,43,0.3);
}


.cta-outline {

    border: 1px solid rgba(255,255,255,0.45);

    color: white;
}


.cta-outline:hover {

    background: white;

    color: #073f50;

    transform: translateY(-4px);
}


/* =========================================================
   RESPONSIVE DESIGN
========================================================= */

@media (max-width: 1000px) {

    .about-hero {

        grid-template-columns: 1fr;

        text-align: center;

        padding: 70px 30px;
    }


    .about-hero .section-label {

        justify-content: center;
    }


    .about-hero-text {

        margin-left: auto;

        margin-right: auto;
    }


    .about-hero-buttons {

        justify-content: center;
    }


    .about-visual {

        width: 450px;

        height: 450px;

        margin-top: 30px;
    }


    .mission-grid,
    .belief-grid {

        grid-template-columns: 1fr;
    }

}


@media (max-width: 700px) {

    .about-hero {

        padding: 60px 20px 80px;
    }


    .about-hero h1 {

        font-size: 50px;

        letter-spacing: -2px;
    }


    .about-hero-text {

        font-size: 16px;
    }


    .about-hero-buttons,
    .cta-buttons {

        flex-direction: column;

        align-items: stretch;
    }


    .about-primary-btn,
    .about-secondary-btn,
    .cta-donate,
    .cta-outline {

        width: 100%;

        box-sizing: border-box;
    }


    .about-visual {

        width: 330px;

        height: 330px;
    }


    .about-circle {

        width: 220px;

        height: 220px;
    }


    .about-orbit {

        width: 330px;

        height: 130px;
    }


    .orbit-c {

        width: 280px;

        height: 280px;
    }


    .story-line {

        left: 20px;
    }


    .story-item,
    .story-item-right {

        width: 100%;

        margin-left: 0;

        padding:
            20px
            0
            50px
            55px;
    }


    .story-number,
    .story-item-right .story-number {

        left: 0;

        right: auto;
    }


    .mission-section,
    .belief-section,
    .about-story {

        padding-left: 20px;

        padding-right: 20px;
    }


    .about-cta {

        margin-left: 15px;

        margin-right: 15px;

        border-radius: 28px;

        padding: 60px 25px;
    }

}
/* =========================================================
   GEUGF ABOUT PAGE
   EVO — THE GEUGF GUARDIAN
========================================================= */

.about-page {
    position: relative;
    z-index: 2;
    overflow: hidden;
    color: #073f4d;
}


/* =========================================================
   SECTION LABEL
========================================================= */

.about-page .section-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;

    color: #d99b00;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 6px;
    text-transform: uppercase;

    margin-bottom: 25px;
}

.about-page .section-label span {
    display: block;
    width: 45px;
    height: 1px;
    background: #d9a21b;
}

.about-page .left-label {
    justify-content: flex-start;
    gap: 15px;
}



/* =========================================================
   ABOUT HERO
========================================================= */

.about-hero {

    min-height: 680px;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    padding: 100px 8% 80px;

    text-align: center;

}


.about-hero-content {

    max-width: 900px;

    position: relative;

    z-index: 5;

}


.about-hero h1 {

    font-family: "Playfair Display", serif;

    font-size: clamp(52px, 7vw, 92px);

    line-height: 0.98;

    margin: 0 0 30px;

    color: #063f4d;

    letter-spacing: -2px;

}


.about-hero h1 span {

    display: block;

    color: #568663;

}


.about-hero p {

    max-width: 760px;

    margin: 0 auto;

    font-size: 19px;

    line-height: 1.8;

    color: #47768b;

}



/* =========================================================
   EVO MAIN CHARACTER
========================================================= */

.evo-character {

    position: absolute;

    width: 145px;
    height: 190px;

    z-index: 6;

    animation: evoFloat 4s ease-in-out infinite;

}


.evo-hero {

    right: 8%;
    bottom: 65px;

    transform: scale(.95);

}


.evo-head {

    position: absolute;

    width: 100px;
    height: 95px;

    left: 22px;
    top: 15px;

    border-radius: 48% 48% 45% 45%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #fffdf3 0 10%,
            #dff0d9 35%,
            #8ec49a 100%
        );

    border: 3px solid #d7a52b;

    box-shadow:
        0 15px 30px rgba(0,0,0,.12);

}


.evo-eye {

    position: absolute;

    width: 11px;
    height: 16px;

    background: #073f4d;

    border-radius: 50%;

    top: 40px;

}


.eye-left {
    left: 27px;
}


.eye-right {
    right: 27px;
}


.evo-eye::after {

    content: "";

    position: absolute;

    width: 4px;
    height: 5px;

    background: white;

    border-radius: 50%;

    left: 2px;
    top: 2px;

}


.evo-smile {

    position: absolute;

    width: 25px;
    height: 12px;

    border-bottom: 3px solid #073f4d;

    border-radius: 50%;

    left: 37px;
    top: 60px;

}


.evo-face-leaf {

    position: absolute;

    top: -18px;
    left: 40px;

    font-size: 25px;

    animation: leafSway 2s ease-in-out infinite;

}


.evo-leaf {

    position: absolute;

    width: 35px;
    height: 58px;

    background: linear-gradient(
        145deg,
        #8bcf76,
        #318b67
    );

    border-radius: 80% 15% 80% 15%;

    border: 2px solid #d6a426;

    z-index: -1;

}


.ear-left {

    left: 4px;
    top: 32px;

    transform: rotate(-35deg);

}


.ear-right {

    right: 4px;
    top: 32px;

    transform: rotate(35deg) scaleX(-1);

}


.evo-body {

    position: absolute;

    width: 90px;
    height: 75px;

    left: 27px;
    top: 98px;

    border-radius: 45% 45% 30% 30%;

    background: linear-gradient(
        145deg,
        #5b9169,
        #2f705a
    );

    border: 3px solid #d7a52b;

}


.evo-globe {

    position: absolute;

    font-size: 30px;

    left: 28px;
    top: 17px;

    animation: globeSpin 7s linear infinite;

}


.evo-arm {

    position: absolute;

    width: 35px;
    height: 15px;

    border-radius: 50%;

    background: #8ec49a;

    top: 30px;

}


.arm-left {

    left: -26px;

    transform: rotate(25deg);

}


.arm-right {

    right: -26px;

    transform: rotate(-25deg);

}


.evo-feet {

    position: absolute;

    left: 40px;
    top: 168px;

    display: flex;

    gap: 20px;

}


.evo-feet span {

    width: 28px;
    height: 12px;

    border-radius: 50%;

    background: #d7a52b;

}


.evo-camera {

    position: absolute;

    width: 42px;
    height: 30px;

    right: -17px;
    top: 118px;

    border-radius: 7px;

    background: #073f4d;

    border: 3px solid #d7a52b;

    transform: rotate(-10deg);

}


.camera-lens {

    position: absolute;

    width: 15px;
    height: 15px;

    border-radius: 50%;

    background: #7ec6d8;

    border: 3px solid white;

    left: 10px;
    top: 5px;

}



/* =========================================================
   WHO WE ARE
========================================================= */

.about-section {

    min-height: 550px;

    display: grid;

    grid-template-columns: 1.2fr .8fr;

    gap: 70px;

    align-items: center;

    padding: 110px 9%;

}


.about-section-text {

    max-width: 700px;

}


.about-section h2,
.vision-mission h2,
.belief-section h2,
.evo-story h2,
.about-final h2 {

    font-family: "Playfair Display", serif;

    color: #073f4d;

    font-size: clamp(42px, 5vw, 68px);

    line-height: 1.08;

    margin: 0 0 25px;

}


.about-section h2 span,
.vision-mission h2 span,
.belief-section h2 span,
.evo-story h2 span,
.about-final h2 span {

    color: #568663;

}


.about-section p {

    color: #47768b;

    font-size: 18px;

    line-height: 1.8;

    margin-bottom: 18px;

}



/* =========================================================
   EVO STORY CARD
========================================================= */

.evo-story-card {

    position: relative;

    min-height: 330px;

    border-radius: 35px;

    background: rgba(255,255,255,.65);

    border: 1px solid rgba(255,255,255,.8);

    box-shadow:
        0 30px 80px rgba(7,63,77,.10);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    overflow: hidden;

}


.story-glow {

    position: absolute;

    width: 250px;
    height: 250px;

    border-radius: 50%;

    background: rgba(219,181,47,.15);

    filter: blur(5px);

}


.evo-mini {

    position: relative;

    width: 100px;
    height: 160px;

    animation: evoFloat 3.5s ease-in-out infinite;

}


.mini-head {

    width: 70px;
    height: 70px;

    background: #dff0d9;

    border: 3px solid #d7a52b;

    border-radius: 50%;

    margin: auto;

    position: relative;

}


.mini-head span {

    position: absolute;

    width: 8px;
    height: 12px;

    background: #073f4d;

    border-radius: 50%;

    top: 28px;

}


.mini-head span:first-child {
    left: 18px;
}

.mini-head span:last-child {
    right: 18px;
}


.mini-body {

    width: 65px;
    height: 70px;

    margin: 4px auto;

    background: #568663;

    border-radius: 35px 35px 20px 20px;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 25px;

}


.mini-leaf {

    position: absolute;

    width: 25px;
    height: 42px;

    background: #67a76e;

    border-radius: 80% 15% 80% 15%;

    top: -7px;
    left: 38px;

    transform: rotate(-20deg);

}


.story-text {

    text-align: center;

    position: relative;

}


.story-text strong {

    display: block;

    font-size: 17px;

    color: #073f4d;

}


.story-text small {

    color: #668795;

}



/* =========================================================
   VISION / MISSION
========================================================= */

.vision-mission {

    padding: 120px 8%;

    text-align: center;

}


.vision-mission > h2 {

    max-width: 900px;

    margin: 0 auto 65px;

}


.purpose-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 35px;

    max-width: 1050px;

    margin: auto;

}


.purpose-card {

    position: relative;

    padding: 50px 45px;

    border-radius: 30px;

    background: rgba(255,255,255,.70);

    border: 1px solid rgba(255,255,255,.9);

    box-shadow:
        0 25px 70px rgba(7,63,77,.08);

    overflow: hidden;

    transition: .4s ease;

}


.purpose-card:hover {

    transform: translateY(-10px);

    box-shadow:
        0 35px 80px rgba(7,63,77,.14);

}


.purpose-icon {

    width: 70px;
    height: 70px;

    border-radius: 50%;

    background: #f3e7bd;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 30px;

    margin: 0 auto 25px;

}


.purpose-card h3 {

    font-family: "Playfair Display", serif;

    font-size: 32px;

    margin-bottom: 15px;

    color: #073f4d;

}


.purpose-card p {

    color: #57798a;

    line-height: 1.8;

    font-size: 17px;

}


.evo-action {

    margin-top: 25px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    color: #568663;

    font-size: 13px;

    font-weight: 600;

}


.tiny-evo-face,
.tiny-notebook {

    font-size: 25px;

    animation: tinyBounce 2s ease-in-out infinite;

}



/* =========================================================
   BELIEFS
========================================================= */

.belief-section {

    padding: 120px 8%;

}


.belief-content {

    max-width: 900px;

    margin: auto;

    text-align: center;

}


.belief-content > p {

    color: #57798a;

    font-size: 18px;

    line-height: 1.8;

    max-width: 750px;

    margin: auto auto 60px;

}


.belief-grid {

    max-width: 1150px;

    margin: auto;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px;

}


.belief-card {

    position: relative;

    display: grid;

    grid-template-columns: 70px 1fr 40px;

    gap: 20px;

    align-items: center;

    padding: 30px;

    border-radius: 25px;

    background: rgba(255,255,255,.72);

    border: 1px solid rgba(255,255,255,.9);

    box-shadow: 0 20px 55px rgba(7,63,77,.07);

    transition: .35s ease;

    overflow: hidden;

}


.belief-card:hover {

    transform: translateY(-7px);

}


.belief-icon {

    width: 65px;
    height: 65px;

    border-radius: 20px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #e4f0e3;

    font-size: 28px;

}


.belief-card h3 {

    margin: 0 0 7px;

    color: #073f4d;

    font-size: 21px;

}


.belief-card p {

    margin: 0;

    color: #668795;

    line-height: 1.6;

    font-size: 14px;

}


.card-evo {

    font-size: 25px;

    transition: .3s ease;

}


.evo-happy {

    transform: scale(1.4) rotate(10deg);

}



/* =========================================================
   EVO JOURNEY
========================================================= */

.evo-story {

    min-height: 600px;

    padding: 110px 9%;

    display: grid;

    grid-template-columns: .8fr 1.2fr;

    align-items: center;

    gap: 80px;

    position: relative;

}


.story-character {

    width: 300px;
    height: 300px;

    border-radius: 50%;

    position: relative;

    margin: auto;

    display: flex;

    justify-content: center;

    align-items: center;

    background:
        radial-gradient(
            circle,
            rgba(216,177,42,.22),
            transparent 65%
        );

}


.story-orbit {

    position: absolute;

    width: 350px;
    height: 170px;

    border: 1px solid rgba(7,63,77,.12);

    border-radius: 50%;

    left: 7%;

    transform: rotate(-25deg);

    animation: orbitRotate 10s linear infinite;

}


.story-evo-body {

    width: 100px;
    height: 150px;

    position: relative;

    animation: evoFloat 4s ease-in-out infinite;

}


.story-evo-head {

    width: 75px;
    height: 75px;

    background: #dff0d9;

    border: 3px solid #d7a52b;

    border-radius: 50%;

    margin: auto;

    position: relative;

}


.story-eye {

    position: absolute;

    width: 9px;
    height: 13px;

    background: #073f4d;

    border-radius: 50%;

    top: 30px;

}


.story-eye:first-child {
    left: 20px;
}


.story-eye:last-child {
    right: 20px;
}


.story-evo-leaf {

    position: absolute;

    width: 30px;
    height: 50px;

    background: #5b9b68;

    border-radius: 80% 15% 80% 15%;

    left: 35px;
    top: -13px;

    transform: rotate(-15deg);

}


.story-evo-globe {

    width: 75px;
    height: 75px;

    border-radius: 35px;

    background: #568663;

    margin: 8px auto;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 30px;

}


.story-camera {

    position: absolute;

    width: 45px;
    height: 32px;

    right: 22px;
    bottom: 58px;

    background: #073f4d;

    border: 3px solid #d7a52b;

    border-radius: 7px;

}


.story-camera span {

    position: absolute;

    width: 15px;
    height: 15px;

    background: #7fc6d7;

    border: 2px solid white;

    border-radius: 50%;

    left: 11px;
    top: 5px;

}


.evo-story-content {

    max-width: 650px;

}


.evo-story-content p {

    color: #57798a;

    font-size: 18px;

    line-height: 1.8;

}


.story-highlight {

    color: #568663 !important;

    font-weight: 600;

}


.about-cta {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    margin-top: 20px;

    padding: 15px 25px;

    border-radius: 40px;

    background: #568663;

    color: white;

    text-decoration: none;

    font-weight: 700;

    transition: .3s ease;

}


.about-cta:hover {

    transform: translateY(-4px);

    box-shadow: 0 15px 30px rgba(86,134,99,.25);

}


.about-cta span {

    font-size: 20px;

}



/* =========================================================
   FINAL CTA
========================================================= */

.about-final {

    position: relative;

    padding: 120px 8%;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            rgba(224,239,222,.75),
            rgba(249,246,228,.75)
        );

    overflow: hidden;

}


.about-final h2 {

    max-width: 850px;

    margin: auto;

}


.about-final p {

    color: #57798a;

    font-size: 18px;

}


.about-cta.gold {

    background: #e8ad20;

}


.final-evo {

    font-size: 45px;

    animation: tinyBounce 2s ease-in-out infinite;

    margin-bottom: 20px;

}



/* =========================================================
   SCROLL REVEAL
========================================================= */

.evo-hidden {

    opacity: 0;

    transform: translateY(50px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}


.evo-visible {

    opacity: 1;

    transform: translateY(0);

}



/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes evoFloat {

    0%,
    100% {

        transform: translateY(0) rotate(-2deg);

    }

    50% {

        transform: translateY(-18px) rotate(2deg);

    }

}


@keyframes tinyBounce {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-8px);

    }

}


@keyframes leafSway {

    0%,
    100% {

        transform: rotate(-10deg);

    }

    50% {

        transform: rotate(10deg);

    }

}


@keyframes globeSpin {

    0% {

        transform: rotate(0deg);

    }

    100% {

        transform: rotate(360deg);

    }

}


@keyframes orbitRotate {

    0% {

        transform: rotate(-25deg);

    }

    50% {

        transform: rotate(25deg);

    }

    100% {

        transform: rotate(-25deg);

    }

}



/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .about-hero {

        min-height: 600px;

        padding: 80px 6%;

    }


    .evo-hero {

        right: 3%;

        bottom: 35px;

        transform: scale(.7);

    }


    .about-section {

        grid-template-columns: 1fr;

        padding: 80px 7%;

    }


    .purpose-grid {

        grid-template-columns: 1fr;

    }


    .belief-grid {

        grid-template-columns: 1fr;

    }


    .evo-story {

        grid-template-columns: 1fr;

        padding: 80px 7%;

        text-align: center;

    }


    .story-orbit {

        left: 50%;

        transform: translateX(-50%);

    }


    .evo-story-content {

        margin: auto;

    }


    .left-label {

        justify-content: center !important;

    }

}



@media (max-width: 600px) {

    .about-hero {

        padding: 70px 20px;

    }


    .about-hero h1 {

        font-size: 48px;

    }


    .about-hero p {

        font-size: 16px;

    }


    .evo-hero {

        opacity: .8;

        right: -10px;

        bottom: 20px;

        transform: scale(.55);

    }


    .belief-card {

        grid-template-columns: 55px 1fr;

        padding: 22px;

    }


    .belief-icon {

        width: 52px;
        height: 52px;

        font-size: 23px;

    }


    .card-evo {

        display: none;

    }


    .purpose-card {

        padding: 35px 25px;

    }


    .story-character {

        transform: scale(.8);

    }

}
/* ==========================================================
   GEUGF PROGRAMS PAGE
   EVA — WOMEN'S HEALTH AMBASSADOR
========================================================== */

.programs-page {
    position: relative;
    z-index: 2;
    overflow: hidden;
    color: #073f4d;
}


/* ==========================================================
   COMMON LABEL
========================================================== */

.program-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;

    color: #c99820;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 4px;
    text-transform: uppercase;

    margin-bottom: 25px;
}

.program-label span {
    width: 42px;
    height: 1px;
    background: #d3a328;
}

.program-label.left {
    justify-content: flex-start;
}



/* ==========================================================
   EVA HERO
========================================================== */

.eva-hero {

    min-height: 720px;

    padding: 100px 8%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 50px;

    position: relative;

}


.eva-hero-content {

    max-width: 650px;

    position: relative;

    z-index: 5;

}


.eva-hero h1 {

    font-family: "Playfair Display", serif;

    font-size: clamp(70px, 9vw, 120px);

    line-height: .85;

    margin: 0;

    color: #073f4d;

}


.eva-hero h1 span {

    color: #6b9d75;

}


.eva-hero h2 {

    margin: 30px 0 20px;

    font-size: 29px;

    font-weight: 500;

    color: #3e7081;

}


.eva-hero h2 strong {

    color: #6b9d75;

}


.eva-hero p {

    max-width: 570px;

    font-size: 18px;

    line-height: 1.8;

    color: #668795;

}


.eva-start-btn {

    display: inline-flex;

    align-items: center;

    gap: 16px;

    margin-top: 25px;

    padding: 16px 28px;

    border-radius: 50px;

    background: #568663;

    color: white;

    text-decoration: none;

    font-weight: 700;

    box-shadow: 0 15px 35px rgba(86,134,99,.22);

    transition: .35s ease;

}


.eva-start-btn:hover {

    transform: translateY(-5px);

    box-shadow: 0 20px 45px rgba(86,134,99,.32);

}


.eva-start-btn span {

    font-size: 20px;

}



/* ==========================================================
   EVA SCENE
========================================================== */

.eva-scene {

    height: 570px;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

}


.eva-glow {

    position: absolute;

    width: 430px;

    height: 430px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(229,199,91,.25),
            rgba(121,177,132,.12),
            transparent 70%
        );

    filter: blur(8px);

    animation: evaGlow 4s ease-in-out infinite;

}


.eva-orbit {

    position: absolute;

    width: 430px;

    height: 170px;

    border: 1px solid rgba(82,134,99,.25);

    border-radius: 50%;

    transform: rotate(-20deg);

    animation: evaOrbit 10s linear infinite;

}


.eva {

    width: 210px;

    height: 440px;

    position: relative;

    animation: evaFloat 4s ease-in-out infinite;

    z-index: 4;

}


.eva-hair-back {

    position: absolute;

    width: 155px;

    height: 190px;

    left: 28px;

    top: 48px;

    border-radius: 70px 70px 55px 55px;

    background: linear-gradient(
        145deg,
        #273f43,
        #526b66
    );

    box-shadow: 15px 20px 30px rgba(0,0,0,.12);

}


.eva-head {

    position: absolute;

    width: 140px;

    height: 165px;

    left: 35px;

    top: 60px;

    border-radius: 50% 50% 47% 47%;

    background:

        linear-gradient(
            145deg,
            #fff3df,
            #f2cda9
        );

    border: 2px solid rgba(201,152,32,.65);

    overflow: hidden;

    z-index: 3;

}


.eva-hair {

    position: absolute;

    width: 145px;

    height: 85px;

    left: -4px;

    top: -5px;

    border-radius: 50% 50% 45% 30%;

    background: #344d4e;

}


.eva-hair::after {

    content: "";

    position: absolute;

    width: 50px;

    height: 100px;

    background: #344d4e;

    right: -15px;

    top: 45px;

    border-radius: 50%;

}


.eva-eye {

    position: absolute;

    width: 17px;

    height: 25px;

    top: 76px;

    border-radius: 50%;

    background: #073f4d;

}


.eva-eye i {

    position: absolute;

    width: 5px;

    height: 7px;

    background: white;

    border-radius: 50%;

    left: 4px;

    top: 3px;

}


.eva-eye-left {

    left: 38px;

}


.eva-eye-right {

    right: 38px;

}


.eva-blush {

    position: absolute;

    width: 22px;

    height: 10px;

    background: rgba(225,120,110,.28);

    border-radius: 50%;

    top: 105px;

}


.blush-left {

    left: 23px;

}


.blush-right {

    right: 23px;

}


.eva-nose {

    position: absolute;

    width: 5px;

    height: 7px;

    border-left: 1px solid #b47c63;

    border-bottom: 1px solid #b47c63;

    transform: rotate(-35deg);

    left: 68px;

    top: 105px;

}


.eva-mouth {

    position: absolute;

    width: 25px;

    height: 13px;

    border-bottom: 2px solid #9c5861;

    border-radius: 50%;

    left: 57px;

    top: 120px;

}


.eva-ear {

    position: absolute;

    width: 15px;

    height: 30px;

    background: #f2cda9;

    border-radius: 50%;

    top: 118px;

}


.eva-ear.ear-left {

    left: -9px;

}


.eva-ear.ear-right {

    right: -9px;

}


.eva-neck {

    position: absolute;

    width: 35px;

    height: 35px;

    background: #f2cda9;

    left: 88px;

    top: 210px;

    z-index: 2;

}


.eva-body {

    position: absolute;

    width: 145px;

    height: 170px;

    left: 33px;

    top: 230px;

    border-radius: 55px 55px 25px 25px;

    background:

        linear-gradient(
            135deg,
            #578f69,
            #316a58
        );

    border: 2px solid #d1a12d;

    z-index: 3;

}


.eva-collar {

    position: absolute;

    width: 65px;

    height: 35px;

    left: 39px;

    top: 0;

    background: #f5ead7;

    border-radius: 0 0 50% 50%;

}


.eva-collar span {

    position: absolute;

    width: 20px;

    height: 20px;

    border-radius: 50%;

    background: #d6a72c;

    left: 22px;

    top: 10px;

}


.eva-globe-symbol {

    position: absolute;

    left: 48px;

    top: 62px;

    font-size: 42px;

    animation: globePulse 4s ease-in-out infinite;

}


.eva-arm {

    position: absolute;

    width: 75px;

    height: 28px;

    background: #f2cda9;

    border-radius: 50px;

    top: 255px;

    z-index: 1;

}


.eva-arm-left {

    left: -15px;

    transform: rotate(35deg);

}


.eva-arm-right {

    right: -15px;

    transform: rotate(-35deg);

}


.eva-hand {

    position: absolute;

    z-index: 5;

    font-size: 25px;

}


.hand-left {

    left: -33px;

    top: 270px;

    animation: handWave 2s ease-in-out infinite;

}


.hand-right {

    right: -37px;

    top: 250px;

    animation: handWave 2s ease-in-out infinite;

}


.eva-skirt {

    position: absolute;

    width: 165px;

    height: 65px;

    left: 22px;

    top: 375px;

    background: #f2dfaa;

    border-radius: 10px 10px 45% 45%;

    border: 2px solid #d1a12d;

    z-index: 2;

}


.eva-leg {

    position: absolute;

    width: 22px;

    height: 45px;

    background: #f2cda9;

    top: 425px;

    border-radius: 20px;

    z-index: 1;

}


.leg-left {

    left: 75px;

}


.leg-right {

    right: 75px;

}


.eva-floating-leaf {

    position: absolute;

    font-size: 30px;

    z-index: 2;

}


.leaf-a {

    left: 12%;

    top: 25%;

    animation: leafFloat 4s infinite;

}


.leaf-b {

    right: 12%;

    top: 20%;

    animation: leafFloat 5s infinite reverse;

}


.leaf-c {

    left: 18%;

    bottom: 20%;

    animation: leafFloat 4.5s infinite;

}


.leaf-d {

    right: 17%;

    bottom: 25%;

    animation: leafFloat 5.5s infinite reverse;

}


.eva-speech {

    position: absolute;

    right: 3%;

    top: 20%;

    padding: 14px 20px;

    background: white;

    border-radius: 25px 25px 25px 4px;

    box-shadow: 0 15px 35px rgba(7,63,77,.12);

    color: #073f4d;

    font-size: 14px;

    font-weight: 700;

    animation: speechFloat 3s ease-in-out infinite;

    z-index: 7;

}


.speech-dot {

    width: 7px;
    height: 7px;

    display: inline-block;

    background: #72a477;

    border-radius: 50%;

    margin-right: 5px;

}



/* ==========================================================
   INTRODUCTION
========================================================== */

.eva-introduction {

    padding: 100px 8% 80px;

    text-align: center;

    max-width: 950px;

    margin: auto;

}


.eva-introduction h2,
.cycle-section h2,
.wellness-section h2,
.eva-final h2 {

    font-family: "Playfair Display", serif;

    font-size: clamp(45px, 5vw, 70px);

    line-height: 1.05;

    color: #073f4d;

}


.eva-introduction h2 span,
.cycle-section h2 span,
.wellness-section h2 span,
.eva-final h2 span {

    color: #65976d;

}


.eva-introduction p {

    max-width: 720px;

    margin: 25px auto;

    font-size: 18px;

    line-height: 1.8;

    color: #668795;

}



/* ==========================================================
   HEALTH STORY
========================================================== */

.health-story {

    min-height: 650px;

    padding: 110px 9%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 90px;

}


.health-content {

    max-width: 650px;

}


.health-number {

    font-family: "Playfair Display", serif;

    font-size: 90px;

    line-height: .8;

    color: rgba(86,134,99,.12);

    margin-bottom: 20px;

}


.health-content h2 {

    font-family: "Playfair Display", serif;

    font-size: clamp(48px, 5vw, 72px);

    line-height: 1;

    color: #073f4d;

    margin: 10px 0 25px;

}


.health-content h2 span {

    color: #65976d;

}


.health-content > p {

    color: #668795;

    font-size: 18px;

    line-height: 1.8;

}


.health-illustration {

    min-height: 500px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}


.soft-circle {

    position: absolute;

    width: 400px;

    height: 400px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(222,190,77,.2),
        rgba(108,163,118,.08),
        transparent 70%
    );

}


.health-eva {

    position: absolute;

    left: 25%;

    top: 30%;

    animation: evaFloat 4s ease-in-out infinite;

}


.mini-eva-head {

    width: 75px;

    height: 75px;

    border-radius: 50%;

    background: #f3d0af;

    border: 2px solid #d1a12d;

    position: relative;

}


.mini-eye {

    width: 8px;

    height: 12px;

    background: #073f4d;

    border-radius: 50%;

    position: absolute;

    top: 31px;

}


.mini-eye:first-child {
    left: 20px;
}


.mini-eye:last-child {
    right: 20px;
}


.mini-eva-body {

    width: 70px;

    height: 75px;

    background: #65976d;

    border-radius: 35px 35px 15px 15px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 25px;

}


.calendar-card {

    position: absolute;

    right: 8%;

    bottom: 20%;

    width: 250px;

    padding: 25px;

    border-radius: 25px;

    background: rgba(255,255,255,.85);

    box-shadow: 0 25px 60px rgba(7,63,77,.12);

    transform: rotate(5deg);

    animation: cardFloat 5s ease-in-out infinite;

}


.calendar-top {

    color: #c99820;

    font-size: 11px;

    letter-spacing: 3px;

    font-weight: 700;

}


.calendar-title {

    font-family: "Playfair Display", serif;

    font-size: 25px;

    color: #073f4d;

    margin: 10px 0 20px;

}


.calendar-days {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 8px;

}


.calendar-days span {

    width: 35px;

    height: 35px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #edf4ed;

    color: #568663;

    font-size: 12px;

}


.calendar-days .active-day {

    background: #e7b64c;

    color: white;

}



/* ==========================================================
   SYMPTOMS
========================================================== */

.symptom-list {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    margin-top: 30px;

}


.symptom-list div {

    padding: 14px;

    border-radius: 15px;

    background: rgba(230,241,228,.65);

    color: #456f79;

    font-size: 14px;

}


.symptom-list span {

    margin-right: 8px;

}


.eva-note {

    margin-top: 30px;

    padding: 20px;

    border-left: 4px solid #d8a32a;

    background: rgba(255,255,255,.6);

}


.eva-note strong {

    color: #568663;

    display: block;

    margin-bottom: 5px;

}


.eva-note span {

    color: #668795;

    font-style: italic;

}



/* ==========================================================
   PCOS
========================================================== */

.pcos-section {

    background: rgba(236,244,233,.35);

}


.pcos-illustration {

    height: 500px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}


.pcos-glow {

    position: absolute;

    width: 300px;

    height: 300px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(218,174,63,.2),
        transparent 70%
    );

}


.pcos-core {

    width: 130px;

    height: 130px;

    border-radius: 50%;

    background: linear-gradient(
        145deg,
        #fff3d0,
        #e3f0df
    );

    border: 2px solid #d7a52b;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 50px;

    box-shadow: 0 20px 50px rgba(7,63,77,.1);

    animation: corePulse 3s ease-in-out infinite;

    z-index: 3;

}


.pcos-orbit {

    position: absolute;

    border: 1px dashed rgba(86,134,99,.35);

    border-radius: 50%;

}


.orbit-a {

    width: 320px;
    height: 150px;

    transform: rotate(30deg);

    animation: evaOrbit 8s linear infinite;

}


.orbit-b {

    width: 390px;
    height: 210px;

    transform: rotate(-25deg);

    animation: evaOrbit 11s linear infinite reverse;

}


.pcos-particle {

    position: absolute;

    color: #d2a22a;

    font-size: 22px;

    animation: particleFloat 4s ease-in-out infinite;

}


.particle-one {
    top: 20%;
    left: 25%;
}


.particle-two {
    right: 20%;
    top: 35%;
}


.particle-three {
    bottom: 22%;
    left: 30%;
}


.pcos-label {

    position: absolute;

    padding: 10px 17px;

    background: white;

    border-radius: 20px;

    box-shadow: 0 10px 30px rgba(7,63,77,.1);

    color: #568663;

    font-size: 12px;

    font-weight: 700;

}


.label-one {

    top: 18%;
    right: 18%;

}


.label-two {

    bottom: 20%;
    right: 25%;

}


.label-three {

    bottom: 27%;
    left: 16%;

}


.pcos-points {

    margin-top: 30px;

    display: flex;

    flex-direction: column;

    gap: 12px;

}


.pcos-point {

    display: flex;

    align-items: center;

    gap: 15px;

    color: #527582;

    font-size: 15px;

}


.pcos-point span {

    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: #e5f0e3;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #568663;

    font-size: 11px;

}



/* ==========================================================
   CYCLE
========================================================== */

.cycle-section {

    padding: 130px 8%;

    text-align: center;

}


.cycle-section > p {

    max-width: 650px;

    margin: 25px auto 70px;

    color: #668795;

    font-size: 18px;

    line-height: 1.8;

}


.cycle-visual {

    width: 600px;

    height: 600px;

    max-width: 90vw;

    margin: auto;

    position: relative;

}


.cycle-ring {

    width: 450px;

    height: 450px;

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    border: 1px solid rgba(86,134,99,.25);

    border-radius: 50%;

    animation: cycleRotate 20s linear infinite;

}


.cycle-ring::before {

    content: "";

    position: absolute;

    inset: 35px;

    border: 1px dashed rgba(201,152,32,.3);

    border-radius: 50%;

}


.cycle-center {

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    width: 100px;

    height: 100px;

    border-radius: 50%;

    background: #f4e8bf;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 38px;

    animation: cycleCounter 20s linear infinite;

}


.cycle-stage {

    position: absolute;

    padding: 14px 20px;

    border-radius: 20px;

    background: white;

    box-shadow: 0 12px 35px rgba(7,63,77,.1);

    color: #527582;

    font-size: 13px;

    animation: cycleCounter 20s linear infinite;

}


.cycle-stage strong {

    display: block;

    color: #568663;

    margin-bottom: 4px;

}


.stage-one {

    top: -25px;

    left: 50%;

    transform: translateX(-50%);

}


.stage-two {

    right: -35px;

    top: 50%;

    transform: translateY(-50%);

}


.stage-three {

    bottom: -25px;

    left: 50%;

    transform: translateX(-50%);

}


.stage-four {

    left: -35px;

    top: 50%;

    transform: translateY(-50%);

}


.cycle-eva {

    position: absolute;

    right: 12%;

    bottom: 8%;

    animation: evaFloat 4s ease-in-out infinite;

}


.cycle-eva-face {

    width: 60px;

    height: 60px;

    background: #f2cda9;

    border-radius: 50%;

    border: 2px solid #d1a12d;

    position: relative;

}


.cycle-eva-face span {

    position: absolute;

    width: 6px;

    height: 9px;

    background: #073f4d;

    border-radius: 50%;

    top: 25px;

}


.cycle-eva-face span:first-child {
    left: 17px;
}


.cycle-eva-face span:last-child {
    right: 17px;
}


.cycle-eva-body {

    width: 55px;

    height: 65px;

    background: #568663;

    border-radius: 30px 30px 15px 15px;

    display: flex;

    align-items: center;
    justify-content: center;

}



/* ==========================================================
   WELLNESS
========================================================== */

.wellness-section {

    padding: 120px 8%;

    text-align: center;

}


.wellness-grid {

    max-width: 1100px;

    margin: 60px auto 0;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

}


.wellness-card {

    padding: 35px 25px;

    border-radius: 28px;

    background: rgba(255,255,255,.75);

    box-shadow: 0 20px 55px rgba(7,63,77,.07);

    transition: .4s ease;

}


.wellness-card:hover,
.wellness-active {

    transform: translateY(-12px);

    box-shadow: 0 30px 70px rgba(7,63,77,.13);

}


.wellness-icon {

    font-size: 40px;

    margin-bottom: 20px;

}


.wellness-card h3 {

    font-family: "Playfair Display", serif;

    color: #073f4d;

    font-size: 25px;

}


.wellness-card p {

    color: #668795;

    line-height: 1.7;

    font-size: 14px;

}


.wellness-eva {

    margin-top: 20px;

    font-size: 11px;

    color: #568663;

    opacity: .8;

}



/* ==========================================================
   HEALTHCARE
========================================================== */

.healthcare-section {

    padding: 120px 9%;

    display: grid;

    grid-template-columns: .7fr 1.3fr;

    align-items: center;

    gap: 80px;

    background: rgba(232,242,229,.35);

}


.healthcare-eva {

    width: 260px;

    height: 320px;

    margin: auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background: rgba(255,255,255,.7);

    border-radius: 50%;

    animation: evaFloat 4s ease-in-out infinite;

}


.healthcare-eva-head {

    width: 85px;

    height: 85px;

    border-radius: 50%;

    background: #f2cda9;

    border: 2px solid #d1a12d;

    position: relative;

}


.healthcare-eva-head > span {

    position: absolute;

    width: 8px;
    height: 12px;

    background: #073f4d;

    border-radius: 50%;

    top: 34px;

}


.healthcare-eva-head > span:first-child {
    left: 22px;
}


.healthcare-eva-head > span:nth-child(2) {
    right: 22px;
}


.healthcare-eva-head div {

    position: absolute;

    left: 37px;

    top: 52px;

    color: #d35e67;

}


.healthcare-eva-body {

    width: 80px;

    height: 100px;

    background: #568663;

    border-radius: 40px 40px 20px 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 32px;

}


.healthcare-content {

    max-width: 650px;

}


.healthcare-content h2 {

    font-family: "Playfair Display", serif;

    font-size: clamp(48px,5vw,70px);

    line-height: 1;

    color: #073f4d;

}


.healthcare-content h2 span {

    color: #65976d;

}


.healthcare-content > p {

    color: #668795;

    font-size: 18px;

    line-height: 1.8;

}


.doctor-message {

    margin-top: 30px;

    padding: 22px;

    border-radius: 20px;

    background: white;

    display: flex;

    gap: 18px;

    align-items: center;

    box-shadow: 0 15px 40px rgba(7,63,77,.08);

}


.doctor-message > span {

    font-size: 35px;

}


.doctor-message strong {

    color: #568663;

}


.doctor-message p {

    margin: 5px 0 0;

    color: #668795;

    font-style: italic;

}



/* ==========================================================
   FINAL
========================================================== */

.eva-final {

    min-height: 650px;

    padding: 110px 8%;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    position: relative;

    background:

        radial-gradient(
            circle at center,
            rgba(220,187,74,.16),
            transparent 55%
        );

}


.final-particles {

    font-size: 24px;

    color: #cda52e;

    margin-bottom: 30px;

    animation: particleFloat 4s ease-in-out infinite;

}


.final-eva {

    margin-bottom: 25px;

    animation: evaFloat 4s ease-in-out infinite;

}


.final-eva-head {

    width: 100px;

    height: 100px;

    border-radius: 50%;

    background: #f2cda9;

    border: 3px solid #d1a12d;

    position: relative;

}


.final-eva-head > span {

    position: absolute;

    width: 10px;

    height: 15px;

    background: #073f4d;

    border-radius: 50%;

    top: 40px;

}


.final-eva-head > span:first-child {
    left: 28px;
}


.final-eva-head > span:nth-child(2) {
    right: 28px;
}


.final-smile {

    position: absolute;

    width: 30px;
    height: 14px;

    border-bottom: 3px solid #9c5861;

    border-radius: 50%;

    left: 35px;
    top: 60px;

}


.final-eva-body {

    width: 90px;

    height: 100px;

    margin: 5px auto;

    border-radius: 40px 40px 20px 20px;

    background: #568663;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 32px;

}


.eva-final p {

    max-width: 600px;

    color: #668795;

    font-size: 18px;

    line-height: 1.8;

}


.final-btn {

    margin-top: 25px;

}



/* ==========================================================
   SCROLL ANIMATION
========================================================== */

.eva-hidden {

    opacity: 0;

    transform: translateY(60px);

    transition:

        opacity .9s ease,

        transform .9s ease;

}


.eva-show {

    opacity: 1;

    transform: translateY(0);

}



/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes evaFloat {

    0%,100% {
        transform: translateY(0) rotate(-1deg);
    }

    50% {
        transform: translateY(-16px) rotate(1deg);
    }

}


@keyframes evaGlow {

    0%,100% {
        transform: scale(1);
        opacity: .7;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }

}


@keyframes evaOrbit {

    0% {
        transform: rotate(-20deg);
    }

    50% {
        transform: rotate(20deg);
    }

    100% {
        transform: rotate(-20deg);
    }

}


@keyframes globePulse {

    0%,100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12);
    }

}


@keyframes handWave {

    0%,100% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(15deg);
    }

}


@keyframes leafFloat {

    0%,100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-25px) rotate(15deg);
    }

}


@keyframes speechFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}


@keyframes cardFloat {

    0%,100% {
        transform: rotate(5deg) translateY(0);
    }

    50% {
        transform: rotate(3deg) translateY(-10px);
    }

}


@keyframes corePulse {

    0%,100% {
        transform: scale(1);
        box-shadow: 0 20px 50px rgba(7,63,77,.1);
    }

    50% {
        transform: scale(1.08);
        box-shadow: 0 25px 70px rgba(201,152,32,.18);
    }

}


@keyframes particleFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }

}


@keyframes cycleRotate {

    from {
        transform: translate(-50%,-50%) rotate(0);
    }

    to {
        transform: translate(-50%,-50%) rotate(360deg);
    }

}


@keyframes cycleCounter {

    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(-360deg);
    }

}



/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 950px) {

    .eva-hero {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .eva-hero-content {

        margin: auto;

    }

    .eva-hero p {

        margin-left: auto;
        margin-right: auto;

    }

    .eva-scene {

        height: 520px;

    }

    .health-story {

        grid-template-columns: 1fr;

    }

    .pcos-section .health-content {

        order: 1;

    }

    .pcos-section .pcos-illustration {

        order: 2;

    }

    .wellness-grid {

        grid-template-columns: 1fr 1fr;

    }

    .healthcare-section {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .healthcare-content {

        margin: auto;

    }

    .program-label.left {

        justify-content: center;

    }

}


@media (max-width: 600px) {

    .eva-hero {

        padding: 80px 20px;

    }

    .eva-hero h1 {

        font-size: 70px;

    }

    .eva-hero h2 {

        font-size: 22px;

    }

    .eva-scene {

        transform: scale(.75);

        height: 430px;

    }

    .symptom-list {

        grid-template-columns: 1fr;

    }

    .wellness-grid {

        grid-template-columns: 1fr;

    }

    .cycle-visual {

        transform: scale(.75);

        margin-left: -5%;

    }

    .health-story {

        padding: 80px 6%;

    }

    .health-illustration {

        min-height: 400px;

    }

    .pcos-illustration {

        transform: scale(.8);

    }

    .eva-speech {

        right: -5%;

    }

}
/* ============================================================
   EVA AI ASSISTANT
   COMPATIBILITY FIX
   Works with both:
   - the current guided Eva HTML
   - the existing older Eva HTML/JS
============================================================ */

.eva-chat-wrapper {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 999999;
    font-family: "Inter", "DM Sans", Arial, sans-serif;
}

/* ------------------------------------------------------------
   FLOATING BUTTON
------------------------------------------------------------ */

.eva-chat-button {
    width: 66px;
    height: 66px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffffff, #eef8f2);
    box-shadow:
        0 14px 35px rgba(8, 80, 70, 0.18),
        0 4px 12px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
    z-index: 1000000;
}

.eva-chat-button:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow:
        0 20px 40px rgba(8, 80, 70, 0.22);
}

.eva-avatar,
.eva-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}

.eva-online-dot {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #48b47d;
    border: 3px solid white;
}

.eva-chat-button::after {
    content: none;
}

/* Used by the JS when the chat is open */
.eva-button-hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.7);
}

/* ------------------------------------------------------------
   CHAT BOX
   IMPORTANT:
   Both .eva-open AND .active are supported.
   This fixes the old JS/new CSS class mismatch.
------------------------------------------------------------ */

.eva-chat-box {
    position: absolute;
    right: 0;
    bottom: 82px;

    width: 390px;
    max-width: calc(100vw - 30px);
    height: 610px;
    max-height: calc(100vh - 110px);

    display: flex;
    flex-direction: column;

    background: #f8fcfa;
    border: 1px solid rgba(255,255,255,0.9);
    border-radius: 28px;
    overflow: hidden;

    box-shadow:
        0 30px 70px rgba(5, 55, 50, 0.20),
        0 8px 25px rgba(0, 0, 0, 0.10);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform:
        translateY(20px)
        scale(0.96);

    transform-origin: bottom right;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;

    z-index: 1000001;
}

/* NEW JS */
.eva-chat-box.eva-open,

/* OLD JS */
.eva-chat-box.active,

/* Extra compatibility if JS sets aria state */
.eva-chat-box[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform:
        translateY(0)
        scale(1);
}

/* ------------------------------------------------------------
   CURRENT GUIDED HEADER
------------------------------------------------------------ */

.eva-header {
    min-height: 86px;
    padding: 17px 18px;
    background:
        linear-gradient(
            135deg,
            #075f62,
            #128b78 55%,
            #49a86e
        );
    color: white;
    display: flex;
    align-items: center;
    gap: 13px;
    flex-shrink: 0;
}

.eva-header-icon,
.eva-mini-avatar {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 16px;
    background: rgba(255,255,255,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    box-shadow:
        0 6px 18px rgba(20, 90, 70, 0.08);
}

.eva-header-info {
    flex: 1;
    min-width: 0;
}

.eva-header-info h3 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    font-weight: 700;
}

.eva-header-info p,
.eva-header-info span {
    display: block;
    margin: 3px 0 0;
    font-size: 11px;
    opacity: 0.88;
    letter-spacing: 0.2px;
}

.eva-close {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
    color: white;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.25s ease;
    flex-shrink: 0;
}

.eva-close:hover {
    background: rgba(255,255,255,0.25);
    transform: rotate(90deg);
}

/* ------------------------------------------------------------
   OLD HEADER NAME
------------------------------------------------------------ */

.eva-chat-header {
    min-height: 82px;
    padding: 15px 18px;
    background:
        linear-gradient(
            135deg,
            #075f62,
            #128b78 55%,
            #49a86e
        );
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
    flex-shrink: 0;
}

.eva-chat-header .eva-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.eva-chat-header .eva-header-info > div:last-child {
    flex: 1;
}

.eva-chat-header .eva-header-info h3 {
    margin: 0;
}

.eva-chat-header .eva-header-info span {
    display: block;
}

/* ------------------------------------------------------------
   MESSAGE AREA
   Supports both old #evaChatBody and new .eva-messages
------------------------------------------------------------ */

.eva-messages,
.eva-chat-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 22px 18px 28px;
    scroll-behavior: smooth;
    background:
        linear-gradient(
            180deg,
            #f8fcfa 0%,
            #f4faf7 100%
        );
}

.eva-messages::-webkit-scrollbar,
.eva-chat-body::-webkit-scrollbar {
    width: 5px;
}

.eva-messages::-webkit-scrollbar-thumb,
.eva-chat-body::-webkit-scrollbar-thumb {
    background: #c9ded5;
    border-radius: 20px;
}

/* ------------------------------------------------------------
   OLD INTRO / BOT MESSAGE
------------------------------------------------------------ */

.eva-introduction,
.eva-message.eva-bot {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 20px;
}

.eva-intro-icon,
.eva-message-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 13px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow:
        0 5px 16px rgba(20, 80, 65, 0.08);
}

.eva-intro-content,
.eva-message-content {
    background: white;
    border-radius:
        6px
        18px
        18px
        18px;
    padding: 14px 15px;
    box-shadow:
        0 8px 25px rgba(30, 80, 65, 0.07);
}

.eva-intro-title,
.eva-message-name {
    color: #138073;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 5px;
}

.eva-intro-text,
.eva-message-content p,
.eva-message-text {
    color: #344f52;
    font-size: 12.8px;
    line-height: 1.6;
}

.eva-message-content p {
    margin: 0 0 5px;
}

.eva-message-content p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------
   GUIDED QUESTION LIST
------------------------------------------------------------ */

.eva-question-heading {
    margin: 0 0 12px;
    color: #163f43;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.eva-question-list,
.eva-quick-options {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.eva-question-card,
.eva-quick-options button {
    width: 100%;
    border: 1px solid #dbece4;
    background: white;
    border-radius: 15px;
    padding: 12px 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    color: #234b4e;
    font-family: inherit;
    font-size: 12.8px;
    font-weight: 600;
    box-shadow:
        0 4px 14px rgba(20, 80, 65, 0.04);
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease;
}

.eva-question-card:hover,
.eva-quick-options button:hover {
    transform: translateX(4px);
    border-color: #73b99b;
    background: #f7fcf9;
    box-shadow:
        0 9px 22px rgba(20, 90, 70, 0.10);
}

.eva-question-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #edf8f2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.eva-question-text {
    flex: 1;
    font-size: 12.8px;
    font-weight: 600;
    line-height: 1.35;
}

.eva-question-arrow {
    color: #158575;
    font-size: 18px;
    font-weight: 700;
}

.eva-question-card:hover .eva-question-arrow {
    transform: translateX(3px);
}

.eva-question-disabled {
    opacity: 0.48;
    pointer-events: none;
}

/* Old quick buttons may not have icons */
.eva-quick-options button {
    justify-content: space-between;
}

/* ------------------------------------------------------------
   USER + EVA ANSWERS
------------------------------------------------------------ */

.eva-user-message {
    display: flex;
    justify-content: flex-end;
    margin: 18px 0 12px;
}

.eva-user-bubble {
    max-width: 82%;
    padding: 11px 14px;
    background:
        linear-gradient(
            135deg,
            #087d82,
            #3d9d78
        );
    color: white;
    border-radius:
        17px
        5px
        17px
        17px;
    font-size: 12.8px;
    line-height: 1.45;
    box-shadow:
        0 7px 18px rgba(20, 100, 80, 0.12);
}

.eva-message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 10px 0 16px;
}

.eva-message-content {
    max-width: 82%;
}

/* ------------------------------------------------------------
   NEXT QUESTIONS
------------------------------------------------------------ */

.eva-next-heading {
    margin: 18px 0 11px;
    padding-top: 14px;
    border-top: 1px solid #e5eee9;
    color: #547174;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.eva-next-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.eva-next-card {
    padding: 10px 11px;
}

.eva-next-card .eva-question-icon {
    width: 29px;
    height: 29px;
    font-size: 14px;
}

.eva-next-card .eva-question-text {
    font-size: 11.8px;
}

/* ------------------------------------------------------------
   TYPING INDICATOR
------------------------------------------------------------ */

.eva-typing {
    display: none;
    padding: 0 18px 14px;
    gap: 5px;
    background: #f8fcfa;
}

.eva-typing.active {
    display: flex;
    align-items: center;
}

.eva-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #35a277;
    animation:
        evaTyping 1.1s infinite ease-in-out;
}

.eva-typing span:nth-child(2) {
    animation-delay: 0.15s;
}

.eva-typing span:nth-child(3) {
    animation-delay: 0.30s;
}

@keyframes evaTyping {
    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.35;
    }

    30% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

/* ------------------------------------------------------------
   OLD TEXT INPUT
   Hidden because Eva is now question-choice based.
------------------------------------------------------------ */

.eva-input-area {
    display: none !important;
}

/* ------------------------------------------------------------
   MOBILE
------------------------------------------------------------ */

@media (max-width: 600px) {

    .eva-chat-wrapper {
        right: 15px;
        bottom: 18px;
    }

    .eva-chat-button {
        width: 60px;
        height: 60px;
    }

    .eva-chat-box {
        right: -5px;
        bottom: 74px;
        width: calc(100vw - 30px);
        height: min(680px, 78vh);
        max-height: calc(100vh - 100px);
        border-radius: 23px;
    }

    .eva-chat-header,
    .eva-header {
        min-height: 76px;
    }

    .eva-messages,
    .eva-chat-body {
        padding:
            18px
            13px
            25px;
    }

    .eva-question-card,
    .eva-quick-options button {
        padding: 11px 10px;
    }
}
/* =========================================================
   GEUGF — INTERACTIVE PROGRAMS PAGE
   HEALTH | SKILL DEVELOPMENT | ENVIRONMENT
   ========================================================= */


/* =========================================================
   PROGRAMS PAGE MAIN
   ========================================================= */

.programs-page {

    min-height: 100vh;

    padding:
        150px 7% 100px;

    position: relative;

    z-index: 5;

}


/* =========================================================
   PROGRAMS HERO
   ========================================================= */

.programs-hero {

    max-width: 1250px;

    min-height: 450px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 60px;

}


.programs-hero-content {

    max-width: 650px;

}


.programs-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        10px 20px;

    border-radius: 50px;

    background:
        rgba(255,255,255,0.10);

    border:
        1px solid
        rgba(255,255,255,0.20);

    color:
        #e7ffe9;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 25px;

    backdrop-filter:
        blur(10px);

}


.programs-hero h1 {

    margin: 0;

    color:
        #ffffff;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(48px, 6vw, 82px);

    line-height:
        1.02;

    font-weight: 700;

}


.programs-hero h1 span {

    display: block;

    color:
        #a9f4c5;

}


.programs-hero p {

    max-width: 600px;

    margin:
        28px 0 0;

    color:
        rgba(255,255,255,0.72);

    font-size:
        18px;

    line-height:
        1.8;

}


/* =========================================================
   HERO ORBIT
   ========================================================= */

.programs-hero-orbit {

    width: 340px;

    height: 340px;

    position: relative;

    flex-shrink: 0;

}


.programs-hero-globe {

    position: absolute;

    left: 50%;

    top: 50%;

    transform:
        translate(-50%, -50%);

    width: 125px;

    height: 125px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 62px;

    background:
        rgba(255,255,255,0.10);

    border:
        1px solid
        rgba(255,255,255,0.25);

    box-shadow:
        0 20px 60px
        rgba(0,0,0,0.15);

    backdrop-filter:
        blur(12px);

    animation:
        geugfProgramGlobeFloat
        4s ease-in-out infinite;

}


.program-orbit-ring {

    position: absolute;

    left: 50%;

    top: 50%;

    border-radius: 50%;

    border:
        1px solid
        rgba(169,244,197,0.35);

    pointer-events: none;

}


.ring-a {

    width: 280px;

    height: 115px;

    transform:
        translate(-50%, -50%)
        rotate(-25deg);

    animation:
        geugfProgramOrbitA
        9s linear infinite;

}


.ring-b {

    width: 300px;

    height: 125px;

    transform:
        translate(-50%, -50%)
        rotate(55deg);

    animation:
        geugfProgramOrbitB
        11s linear infinite reverse;

}


@keyframes geugfProgramGlobeFloat {

    0%,
    100% {

        margin-top: 0;

    }

    50% {

        margin-top: -16px;

    }

}


@keyframes geugfProgramOrbitA {

    from {

        transform:
            translate(-50%, -50%)
            rotate(0deg);

    }

    to {

        transform:
            translate(-50%, -50%)
            rotate(360deg);

    }

}


@keyframes geugfProgramOrbitB {

    from {

        transform:
            translate(-50%, -50%)
            rotate(0deg);

    }

    to {

        transform:
            translate(-50%, -50%)
            rotate(360deg);

    }

}


/* =========================================================
   PROGRAM SELECTION
   ========================================================= */

.program-selection {

    max-width:
        1250px;

    margin:
        50px auto 0;

}


.program-question {

    text-align:
        center;

    margin:
        0 0 35px;

    color:
        rgba(255,255,255,0.60);

    font-size:
        12px;

    font-weight:
        600;

    letter-spacing:
        3px;

    text-transform:
        uppercase;

}


.program-cards {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        25px;

}


/* =========================================================
   MAIN PROGRAM CARDS
   ========================================================= */

.program-card {

    position:
        relative;

    min-height:
        310px;

    padding:
        35px;

    border:
        1px solid
        rgba(255,255,255,0.15);

    border-radius:
        30px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.13),
            rgba(255,255,255,0.045)
        );

    color:
        #ffffff;

    text-align:
        left;

    cursor:
        pointer;

    overflow:
        hidden;

    backdrop-filter:
        blur(15px);

    box-shadow:
        0 15px 45px
        rgba(0,0,0,0.08);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;

}


.program-card::before {

    content:
        "";

    position:
        absolute;

    width:
        190px;

    height:
        190px;

    right:
        -80px;

    bottom:
        -80px;

    border-radius:
        50%;

    background:
        rgba(169,244,197,0.10);

    filter:
        blur(15px);

    transition:
        transform 0.5s ease;

}


.program-card:hover {

    transform:
        translateY(-12px);

    border-color:
        rgba(169,244,197,0.45);

    box-shadow:
        0 30px 80px
        rgba(0,0,0,0.18);

}


.program-card:hover::before {

    transform:
        scale(1.8);

}


.program-card-icon {

    position:
        relative;

    z-index:
        2;

    width:
        70px;

    height:
        70px;

    border-radius:
        22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        40px;

    background:
        rgba(255,255,255,0.09);

    border:
        1px solid
        rgba(255,255,255,0.15);

    margin-bottom:
        30px;

    transition:
        transform 0.4s ease;

}


.program-card:hover
.program-card-icon {

    transform:
        scale(1.12)
        rotate(-5deg);

}


.program-card-content {

    position:
        relative;

    z-index:
        2;

}


.program-card-content span {

    color:
        #a9f4c5;

    font-size:
        11px;

    letter-spacing:
        2px;

}


.program-card h2 {

    margin:
        8px 0 12px;

    color:
        #ffffff;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        30px;

}


.program-card p {

    max-width:
        290px;

    margin:
        0;

    color:
        rgba(255,255,255,0.64);

    line-height:
        1.65;

    font-size:
        14px;

}


.program-card-arrow {

    position:
        absolute;

    right:
        28px;

    bottom:
        28px;

    width:
        45px;

    height:
        45px;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(255,255,255,0.08);

    color:
        #ffffff;

    font-size:
        20px;

    transition:
        transform 0.4s ease,
        background 0.4s ease;

}


.program-card:hover
.program-card-arrow {

    transform:
        translateX(7px);

    background:
        rgba(169,244,197,0.18);

}


/* =========================================================

/* =========================================================
   GEUGF PROGRAMS — CURRENT PAGE DESIGN
   ========================================================= *

   GEUGF PROGRAMS — CREATIVE STORY EXPERIENCE
========================================================= */

.programs-page {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 20%, rgba(115, 170, 130, .15), transparent 30%),
        radial-gradient(circle at 85% 30%, rgba(80, 150, 180, .12), transparent 30%),
        #f5faf6;
    color: #073f4d;
}


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

.program-hero {
    min-height: 650px;
    padding: 100px 9%;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    position: relative;
}

.program-hero-content {
    max-width: 700px;
    position: relative;
    z-index: 3;
}

.program-eyebrow,
.section-label {
    color: #d99b16;
    letter-spacing: 5px;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.program-eyebrow span {
    width: 40px;
    height: 1px;
    background: #d99b16;
}

.program-hero h1 {
    margin: 30px 0 25px;
    font-family: "Playfair Display", serif;
    font-size: clamp(55px, 7vw, 100px);
    line-height: .95;
    color: #073f4d;
}

.program-hero h1 em {
    color: #5d8d6a;
    font-style: normal;
}

.program-hero p {
    max-width: 650px;
    font-size: 19px;
    line-height: 1.8;
    color: #527687;
}

.story-hint {
    margin-top: 35px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    border-radius: 50px;
    background: rgba(255,255,255,.8);
    box-shadow: 0 12px 35px rgba(7,63,77,.08);
    color: #54766c;
    font-size: 14px;
}

.hint-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #dca21d;
    animation: hintPulse 1.8s infinite;
}

@keyframes hintPulse {
    50% {
        transform: scale(1.7);
        opacity: .4;
    }
}


/* =========================================================
   EVA HERO
========================================================= */

.program-eva {
    min-height: 470px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.eva-glow {
    position: absolute;
    width: 390px;
    height: 390px;
    border-radius: 50%;
    background: rgba(157, 226, 190, .35);
    filter: blur(25px);
}

.eva-character {
    width: 250px;
    height: 350px;
    position: relative;
    z-index: 3;
    animation: evaFloat 4s ease-in-out infinite;
}

@keyframes evaFloat {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18px);
    }
}

.eva-face {
    position: absolute;
    width: 150px;
    height: 165px;
    border-radius: 48% 48% 45% 45%;
    background: #ffd8bd;
    left: 50px;
    top: 25px;
    z-index: 4;
    box-shadow: inset -8px -8px 0 rgba(0,0,0,.03);
}

.eva-hair {
    position: absolute;
    width: 175px;
    height: 180px;
    border-radius: 50%;
    background: #36231d;
    left: 38px;
    top: 8px;
    z-index: 3;
}

.eva-eye {
    position: absolute;
    width: 12px;
    height: 17px;
    border-radius: 50%;
    background: #173b43;
    top: 72px;
}

.eva-eye.left {
    left: 42px;
}

.eva-eye.right {
    right: 42px;
}

.eva-blush {
    position: absolute;
    width: 22px;
    height: 10px;
    border-radius: 50%;
    background: rgba(239, 125, 120, .35);
    top: 100px;
}

.eva-blush.left {
    left: 25px;
}

.eva-blush.right {
    right: 25px;
}

.eva-mouth {
    position: absolute;
    width: 23px;
    height: 11px;
    border-bottom: 3px solid #9a4d52;
    border-radius: 50%;
    left: 63px;
    top: 110px;
}

.eva-body {
    position: absolute;
    width: 180px;
    height: 175px;
    background: #74a983;
    border-radius: 50px 50px 25px 25px;
    left: 35px;
    top: 175px;
    z-index: 2;
}

.eva-badge {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #e4aa2a;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 66px;
    top: 35px;
    font-size: 22px;
}

.eva-arm {
    position: absolute;
    width: 65px;
    height: 25px;
    background: #ffd8bd;
    border-radius: 30px;
    top: 205px;
    z-index: 1;
}

.left-arm {
    left: 0;
    transform: rotate(25deg);
}

.right-arm {
    right: 0;
    transform: rotate(-25deg);
}

.eva-name {
    position: absolute;
    bottom: 5px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.eva-name strong {
    font-family: "Playfair Display", serif;
    font-size: 27px;
    color: #073f4d;
}

.eva-name span {
    font-size: 12px;
    color: #73908a;
}


/* =========================================================
   INTRO
========================================================= */

.program-intro {
    text-align: center;
    padding: 90px 20px 60px;
    max-width: 850px;
    margin: auto;
}

.program-intro h2 {
    font-family: "Playfair Display", serif;
    font-size: clamp(42px, 6vw, 70px);
    line-height: 1;
    margin: 20px 0;
    color: #073f4d;
}

.program-intro h2 span {
    color: #5d8d6a;
}

.program-intro p {
    color: #5d7b86;
    line-height: 1.8;
    font-size: 17px;
}


/* =========================================================
   PROGRAM CARDS
========================================================= */

.program-cards-wrapper {
    max-width: 1250px;
    margin: auto;
    padding: 30px 30px 100px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.main-program-card {
    position: relative;
    min-height: 470px;
    padding: 45px 38px;
    border-radius: 35px;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 25px 70px rgba(7,63,77,.1);
    overflow: hidden;
    transition: .45s ease;
}

.main-program-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 35px 80px rgba(7,63,77,.17);
}

.main-program-card::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    right: -90px;
    top: -90px;
    background: rgba(100,180,130,.12);
}

.skills-card::before {
    background: rgba(220,170,50,.12);
}

.environment-card::before {
    background: rgba(80,170,180,.12);
}

.card-number {
    position: absolute;
    top: 25px;
    right: 30px;
    font-family: "Playfair Display", serif;
    font-size: 50px;
    color: rgba(7,63,77,.08);
}

.program-icon {
    width: 75px;
    height: 75px;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    background: #edf7f0;
    margin-bottom: 50px;
}

.skills-card .program-icon {
    background: #fff6dc;
}

.environment-card .program-icon {
    background: #e7f5f4;
}

.card-label {
    color: #d49a19;
    letter-spacing: 3px;
    font-size: 11px;
    font-weight: 700;
}

.card-content h3 {
    font-family: "Playfair Display", serif;
    font-size: 42px;
    line-height: 1.1;
    color: #073f4d;
    margin: 15px 0;
}

.card-content p {
    color: #66808b;
    line-height: 1.7;
    min-height: 90px;
}

.explore-program {
    margin-top: 25px;
    border: none;
    background: transparent;
    color: #d49a19;
    font-weight: 700;
    cursor: pointer;
    font-size: 15px;
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 10px 0;
}

.explore-program span {
    font-size: 23px;
    transition: .3s;
}

.explore-program:hover span {
    transform: translateX(8px);
}


/* =========================================================
   BOTTOM
========================================================= */

.program-bottom-message {
    padding: 30px 20px 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.program-bottom-message p {
    color: #68817f;
    font-size: 18px;
    text-align: center;
}

.program-bottom-message strong {
    color: #073f4d;
}

.message-line {
    width: 70px;
    height: 1px;
    background: #d6a32a;
}


/* =========================================================
/* =========================================================
   GEUGF PROGRAMS — CLEAN EVA PROGRAM / STORY MODALS
   ========================================================= */

body.modal-open {
    overflow: hidden !important;
}

/* ---------- CATEGORY OVERLAY ---------- */
.program-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    padding: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(3, 35, 43, 0.82) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 999999 !important;
    transition: opacity .3s ease, visibility .3s ease;
}

.program-overlay.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* ---------- CATEGORY WINDOW ---------- */
.program-modal {
    position: relative !important;
    width: min(950px, 94vw) !important;
    max-height: calc(100vh - 48px) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: linear-gradient(145deg, #ffffff, #f7fbf5) !important;
    border-radius: 30px !important;
    box-shadow: 0 40px 120px rgba(0,0,0,.42) !important;
    transform: translateY(20px) scale(.97);
    transition: transform .35s ease;
}

.program-overlay.show .program-modal {
    transform: translateY(0) scale(1);
}

/* ---------- CLOSE BUTTON ---------- */
.modal-close,
.story-close {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #073f4d !important;
    color: #fff !important;
    font-size: 30px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    z-index: 9999999 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.25) !important;
    transition: transform .25s ease, background .25s ease;
}

.modal-close:hover,
.story-close:hover {
    background: #d59d17 !important;
    transform: rotate(90deg) scale(1.08);
}

/* ---------- EVA CATEGORY HEADER ---------- */
.modal-eva-area {
    flex: 0 0 auto;
    min-height: 135px;
    padding: 32px 90px 28px 35px;
    display: flex;
    align-items: center;
    gap: 22px;
    background: linear-gradient(135deg, #eaf7ee, #fffaf0);
    border-bottom: 1px solid #e1ece5;
}

.mini-eva {
    width: 82px;
    height: 82px;
    flex: 0 0 82px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.9);
    box-shadow: 0 15px 35px rgba(50,100,65,.12);
    animation: evaMiniFloat 3s ease-in-out infinite;
}

.mini-eva-face {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #f3d0af;
    border: 2px solid #d3a328;
}

.mini-eye {
    position: absolute;
    top: 22px;
    width: 7px;
    height: 10px;
    border-radius: 50%;
    background: #073f4d;
}

.mini-eye.left { left: 15px; }
.mini-eye.right { right: 15px; }

.mini-mouth {
    position: absolute;
    left: 50%;
    bottom: 14px;
    width: 15px;
    height: 8px;
    transform: translateX(-50%);
    border-bottom: 2px solid #073f4d;
    border-radius: 50%;
}

.eva-dialogue { flex: 1; min-width: 0; }

.dialogue-label {
    display: block;
    margin-bottom: 7px;
    color: #d09b1d;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 4px;
}

.eva-dialogue h3 {
    margin: 0 0 7px;
    color: #073f4d;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 30px;
    line-height: 1.15;
}

.eva-dialogue p {
    margin: 0;
    color: #648292;
    font-size: 15px;
    line-height: 1.6;
}

@keyframes evaMiniFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

/* ---------- CATEGORY CONTENT SCROLLS HERE ---------- */
.modal-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 40px 45px 55px !important;
    -webkit-overflow-scrolling: touch;
}

.modal-content::-webkit-scrollbar,
.story-text::-webkit-scrollbar {
    width: 8px;
}

.modal-content::-webkit-scrollbar-track,
.story-text::-webkit-scrollbar-track {
    background: #edf4ed;
    border-radius: 20px;
}

.modal-content::-webkit-scrollbar-thumb,
.story-text::-webkit-scrollbar-thumb {
    background: #8aae91;
    border-radius: 20px;
}

.category-content { display: none; }

.category-heading {
    max-width: 760px;
    margin-bottom: 30px;
}

.category-heading > span {
    display: block;
    margin-bottom: 12px;
    color: #d09b1d;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 4px;
}

.category-heading h2 {
    margin: 0 0 14px;
    color: #073f4d;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(35px, 5vw, 52px);
    line-height: 1.08;
}

.category-heading p {
    margin: 0;
    color: #638292;
    font-size: 16px;
    line-height: 1.75;
}

.subcategory-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

.subcategory {
    width: 100%;
    min-height: 88px;
    padding: 18px 20px;
    border: none;
    border-radius: 20px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 18px;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 12px 35px rgba(20,70,70,.07);
    transition: transform .25s ease, box-shadow .25s ease;
}

.subcategory:hover {
    transform: translateX(7px);
    box-shadow: 0 18px 40px rgba(20,70,70,.13);
}

.sub-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 18px;
    background: #edf7ef;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.sub-text {
    flex: 1;
    min-width: 0;
}

.sub-text strong {
    display: block;
    margin-bottom: 4px;
    color: #073f4d;
    font-size: 18px;
}

.sub-text small {
    display: block;
    color: #78919a;
    font-size: 13px;
    line-height: 1.55;
}

.sub-arrow {
    flex: 0 0 auto;
    color: #d99d08;
    font-size: 25px;
    transition: transform .25s ease;
}

.subcategory:hover .sub-arrow {
    transform: translateX(6px);
}

/* =========================================================
   EVA STORY OVERLAY — ALWAYS ABOVE CATEGORY WINDOW
   ========================================================= */

.story-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    padding: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(4,36,45,.90) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 10000000 !important;
    overflow: hidden !important;
    transition: opacity .3s ease, visibility .3s ease;
}

.story-overlay.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* ---------- STORY WINDOW ---------- */
.story-screen {
    position: relative !important;
    width: min(1150px, 94vw) !important;
    height: min(760px, calc(100vh - 40px)) !important;
    min-height: 0 !important;
    max-height: calc(100vh - 40px) !important;
    display: grid !important;
    grid-template-columns: .95fr 1.05fr !important;
    align-items: stretch !important;
    overflow: hidden !important;
    border-radius: 34px !important;
    background: #fff !important;
    box-shadow: 0 40px 120px rgba(0,0,0,.45) !important;
    transform: scale(.94) translateY(20px);
    transition: transform .35s ease;
}

.story-overlay.show .story-screen {
    transform: scale(1) translateY(0);
}

/* ---------- FILM STRIPS: ONLY TOP + BOTTOM ---------- */
.story-screen > .film-top,
.story-screen > .film-bottom {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    background: #073f4d !important;
    z-index: 500 !important;
    pointer-events: none !important;
}

.story-screen > .film-top { top: 0 !important; bottom: auto !important; }
.story-screen > .film-bottom { bottom: 0 !important; top: auto !important; }

.story-screen > .film-top span,
.story-screen > .film-bottom span {
    width: 34px !important;
    height: 8px !important;
    border-radius: 4px !important;
    background: rgba(255,255,255,.25) !important;
}

/* ---------- LEFT VISUAL ---------- */
.story-visual {
    position: relative !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: radial-gradient(circle, #eaf7ec 0%, #dcefe0 45%, #cde4d2 100%) !important;
}

.story-glow {
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0));
    animation: storyGlow 4s ease-in-out infinite;
}

.story-orbit {
    position: absolute;
    border: 1px solid rgba(91,140,103,.35);
    border-radius: 50%;
    pointer-events: none;
}

.story-orbit-one {
    width: 390px;
    height: 170px;
    transform: rotate(-25deg);
    animation: storyOrbit 12s linear infinite;
}

.story-orbit-two {
    width: 330px;
    height: 145px;
    transform: rotate(45deg);
    animation: storyOrbitReverse 15s linear infinite;
}

.story-emoji {
    position: relative;
    z-index: 10;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.75);
    box-shadow: 0 25px 55px rgba(50,100,65,.15);
    font-size: 78px;
    animation: storyEmojiFloat 3.5s ease-in-out infinite;
}

/* ---------- EVA IN LEFT VISUAL ---------- */
.story-eva {
    position: absolute !important;
    left: 50% !important;
    bottom: 55px !important;
    transform: translateX(-50%) !important;
    z-index: 100 !important;
    animation: evaStoryFloat 3s ease-in-out infinite;
}

.story-eva-head {
    position: relative;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: #f3d0af;
    border: 2px solid #d3a328;
}

.story-eva-head::before {
    content: "";
    position: absolute;
    left: -5px;
    right: -5px;
    top: -17px;
    height: 48px;
    border-radius: 50% 50% 35% 35%;
    background: #3e2a26;
    z-index: -1;
}

.story-eye {
    position: absolute;
    top: 31px;
    width: 9px;
    height: 13px;
    border-radius: 50%;
    background: #073f4d;
}

.story-eye.left { left: 22px; }
.story-eye.right { right: 22px; }

.story-smile {
    position: absolute;
    left: 50%;
    bottom: 18px;
    width: 21px;
    height: 10px;
    transform: translateX(-50%);
    border-bottom: 3px solid #073f4d;
    border-radius: 50%;
}

.story-eva-body {
    width: 88px;
    height: 92px;
    margin: -2px auto 0;
    border-radius: 40px 40px 18px 18px;
    background: linear-gradient(160deg, #78b27f, #4e8860);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 14px;
    box-shadow: 0 12px 25px rgba(60,100,65,.18);
}

.story-eva-body span {
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

/* ---------- RIGHT STORY TEXT: THIS AREA SCROLLS ---------- */
.story-text {
    position: relative !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 70px 60px 55px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #fff !important;
}

.story-tag {
    flex: 0 0 auto;
    color: #d19c1e !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 4px !important;
    margin-bottom: 14px !important;
}

.story-text h2 {
    flex: 0 0 auto;
    margin: 0 0 20px !important;
    color: #073f4d !important;
    font-family: "Playfair Display", Georgia, serif !important;
    font-size: clamp(40px, 5vw, 64px) !important;
    line-height: 1.05 !important;
}

.story-progress {
    flex: 0 0 auto;
    width: 160px;
    height: 6px;
    margin-bottom: 24px;
    border-radius: 20px;
    overflow: hidden;
    background: #e5eee5;
}

.story-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(90deg, #d5a21f, #6aa276);
    transition: width .45s ease;
}

#storyDescription {
    flex: 0 0 auto;
    margin: 0 !important;
    color: #5f7d8a !important;
    font-size: 17px !important;
    line-height: 1.85 !important;
}

.story-note {
    flex: 0 0 auto;
    display: flex !important;
    align-items: flex-start !important;
    gap: 13px !important;
    margin: 25px 0 !important;
    padding: 17px 20px !important;
    border-radius: 18px !important;
    background: #f0f7ef !important;
    border-left: 4px solid #72a477 !important;
}

.story-note > span {
    color: #d19c1e;
    font-size: 18px;
}

.story-note p {
    margin: 0 !important;
    color: #456b77 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    font-weight: 600;
}

.story-next {
    flex: 0 0 auto;
    width: max-content !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 5px !important;
    padding: 14px 23px !important;
    border: none !important;
    border-radius: 30px !important;
    background: #d7a52a !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    box-shadow: 0 10px 25px rgba(200,150,30,.20);
    transition: transform .25s ease, box-shadow .25s ease;
}

.story-next:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 30px rgba(200,150,30,.30);
}

/* ---------- ANIMATIONS ---------- */
@keyframes storyGlow {
    0%,100% { transform: scale(1); opacity: .8; }
    50% { transform: scale(1.08); opacity: 1; }
}

@keyframes storyOrbit {
    from { transform: rotate(-25deg); }
    to { transform: rotate(335deg); }
}

@keyframes storyOrbitReverse {
    from { transform: rotate(45deg); }
    to { transform: rotate(-315deg); }
}

@keyframes storyEmojiFloat {
    0%,100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-12px) scale(1.05); }
}

@keyframes evaStoryFloat {
    0%,100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-10px); }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    .program-hero {
        grid-template-columns: 1fr;
        padding: 80px 7%;
        text-align: center;
    }

    .program-eyebrow {
        justify-content: center;
    }

    .program-hero p {
        margin-left: auto;
        margin-right: auto;
    }

    .program-eva {
        min-height: 350px;
    }

    .program-cards-wrapper {
        grid-template-columns: 1fr;
        max-width: 650px;
    }
}

@media (max-width: 800px) {
    .program-overlay,
    .story-overlay {
        padding: 12px !important;
    }

    .program-overlay {
        align-items: flex-start !important;
    }

    .program-modal {
        width: 100% !important;
        max-height: calc(100vh - 24px) !important;
        margin-top: 10px !important;
        border-radius: 24px !important;
    }

    .modal-eva-area {
        min-height: 110px;
        padding: 28px 65px 22px 22px !important;
        gap: 15px;
    }

    .mini-eva {
        width: 65px;
        height: 65px;
        flex-basis: 65px;
    }

    .mini-eva-face {
        width: 46px;
        height: 46px;
    }

    .eva-dialogue h3 { font-size: 23px; }
    .eva-dialogue p { font-size: 13px; }

    .modal-content {
        padding: 28px 20px 35px !important;
    }

    .category-heading h2 {
        font-size: 36px;
    }

    .subcategory {
        padding: 15px;
    }

    .sub-icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        font-size: 23px;
    }

    .sub-text strong { font-size: 15px; }
    .sub-text small { font-size: 12px; }

    /* STORY: fixed window, only right/text area scrolls */
    .story-overlay {
        align-items: center !important;
        justify-content: center !important;
    }

    .story-screen {
        width: 100% !important;
        height: calc(100vh - 24px) !important;
        max-height: calc(100vh - 24px) !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-radius: 24px !important;
    }

    .story-visual {
        flex: 0 0 300px !important;
        min-height: 300px !important;
        height: 300px !important;
    }

    .story-emoji {
        width: 120px;
        height: 120px;
        font-size: 55px;
    }

    .story-eva {
        bottom: 15px !important;
    }

    .story-eva-head {
        width: 65px;
        height: 65px;
    }

    .story-eva-body {
        width: 70px;
        height: 70px;
    }

    .story-text {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 40px 25px 45px !important;
        justify-content: flex-start !important;
        overflow-y: auto !important;
    }

    .story-text h2 {
        font-size: 40px !important;
    }

    #storyDescription {
        font-size: 16px !important;
        line-height: 1.75 !important;
    }

    .story-next {
        width: max-content !important;
    }

    .story-close,
    .modal-close {
        width: 44px !important;
        height: 44px !important;
        top: 12px !important;
        right: 12px !important;
        font-size: 27px !important;
    }
}

@media (max-width: 600px) {
    .program-hero h1 { font-size: 52px; }

    .program-bottom-message {
        flex-direction: column;
    }

    .modal-eva-area {
        padding-right: 62px !important;
    }

    .category-heading h2 {
        font-size: 32px;
    }

    .subcategory {
        align-items: flex-start;
    }

    .sub-arrow {
        display: none;
    }

    .story-visual {
        flex-basis: 270px !important;
        min-height: 270px !important;
        height: 270px !important;
    }

    .story-text h2 {
        font-size: 36px !important;
    }

    .story-next {
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    .program-hero h1 { font-size: 45px; }

    .story-screen {
        width: 100% !important;
        border-radius: 20px !important;
    }

    .story-text {
        padding: 45px 20px 35px !important;
    }

    .story-text h2 {
        font-size: 33px !important;
    }

    .story-note {
        padding: 14px 15px !important;
    }
}


/* ============================================================
   GEUGF — GET INVOLVED / INTERACTIVE STORY PANEL
   FINAL SCROLL + VISIBILITY FIX
   ============================================================ */

/* Main Get Involved section */
.involved-section {
    position: relative;
    z-index: 3;
    padding: 120px 8% 110px;
    text-align: center;
    overflow: visible !important;
}

.involved-intro {
    max-width: 1280px;
    margin: 0 auto 55px;
}

.involved-heading-area {
    max-width: 1250px;
    margin: 0 auto;
}

.involved-kicker {
    display: block;
    margin-bottom: 16px;
    color: #0b4655;
    font-size: 16px;
    font-weight: 500;
}

.involved-heading-area h2 {
    margin: 0 0 25px;
    color: #073f4d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(52px, 6vw, 82px);
    line-height: 1;
    letter-spacing: -2px;
}

.involved-heading-area h2 em {
    color: #5c8d68;
    font-style: normal;
}

.involved-description {
    max-width: 1180px;
    margin: 0 auto;
    color: #58788a;
    font-size: 19px;
    line-height: 1.8;
}

.involved-eva-message {
    max-width: 760px;
    margin: 42px auto 0;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: left;
}

.involved-eva-avatar {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(60,100,70,.12);
    font-size: 28px;
    animation: evaMessageFloat 3s ease-in-out infinite;
}

.involved-eva-content {
    min-width: 0;
}

.involved-eva-content span {
    display: block;
    margin-bottom: 3px;
    color: #c8971b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.involved-eva-content p {
    margin: 0;
    color: #145264;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-style: italic;
    line-height: 1.5;
}

/* Cards */
.involved-choice-grid {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.involved-choice {
    position: relative;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    align-items: center;
    min-height: 190px;
    width: 100%;
    padding: 35px 38px;
    border: 1px solid rgba(12,73,82,.09);
    border-radius: 30px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 18px 45px rgba(25,79,63,.08);
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    font: inherit;
    color: inherit;
    appearance: none;
    -webkit-appearance: none;
    transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease;
}

.involved-choice::before {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    top: -150px;
    right: -100px;
    background: rgba(119,181,134,.12);
    transition: transform .6s ease, opacity .6s ease;
}

.involved-choice::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(to bottom,#dca928,#71a879);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .4s ease;
}

.involved-choice:hover {
    transform: translateY(-8px);
    border-color: rgba(88,143,102,.30);
    box-shadow: 0 30px 65px rgba(26,78,61,.15);
}

.involved-choice:hover::before { transform: scale(1.5); opacity: .8; }
.involved-choice:hover::after { transform: scaleY(1); }

.involved-choice-number {
    position: absolute;
    top: 22px;
    right: 28px;
    color: rgba(10,69,79,.07);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 55px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.involved-choice-icon {
    position: relative;
    z-index: 2;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: linear-gradient(145deg,#eef8f0,#dcefe1);
    font-size: 29px;
    box-shadow: 0 10px 25px rgba(74,124,86,.10);
    transition: transform .45s ease, box-shadow .45s ease;
}

.volunteer-choice .involved-choice-icon { background: #edf7ef; }
.skills-choice .involved-choice-icon { background: #fff6dc; }
.initiative-choice .involved-choice-icon { background: #e7f5f5; }
.support-choice .involved-choice-icon { background: #eef1fb; }

.involved-choice:hover .involved-choice-icon {
    transform: rotate(-5deg) scale(1.1);
    box-shadow: 0 15px 30px rgba(74,124,86,.18);
}

.involved-choice-content {
    position: relative;
    z-index: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-right: 30px;
}

.involved-choice-content strong {
    display: block;
    color: #094654;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    line-height: 1.2;
}

.involved-choice-content small {
    display: block;
    color: #668693;
    font-size: 14px;
    line-height: 1.65;
}

.involved-choice-arrow {
    position: relative;
    z-index: 2;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f4f8ef;
    color: #d19a17;
    font-size: 25px;
    transition: transform .4s ease, background .4s ease, color .4s ease;
}

.involved-choice:hover .involved-choice-arrow {
    transform: translateX(8px);
    background: #dca82b;
    color: #fff;
}

/* Bottom impact strip */
.involved-impact-strip {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 45px auto 0;
    padding: 24px 30px;
    display: flex;
    align-items: center;
    border-radius: 22px;
    background: rgba(8,70,80,.96);
    box-shadow: 0 20px 45px rgba(7,61,70,.15);
    color: #fff;
    text-align: left;
}

.impact-symbol {
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 18px;
    border-radius: 50%;
    background: rgba(255,255,255,.10);
    color: #e3b335;
    font-size: 22px;
    animation: impactPulse 2.5s ease-in-out infinite;
}

.involved-impact-strip > div:nth-child(2) {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.involved-impact-strip strong { font-size: 16px; }
.involved-impact-strip span { color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.5; }

.impact-link {
    margin-left: auto;
    flex: 0 0 auto;
    color: #f0c247;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .3s ease,color .3s ease;
}

.impact-link:hover { transform: translateX(5px); color: #fff; }

/* ============================================================
   INVOLVEMENT STORY POPUP — IMPORTANT SCROLL FIX
   The HTML uses .involvement-overlay / .involvement-panel.
   Do NOT use .involvement-modal here; those classes do not exist.
   ============================================================ */

body.involvement-modal-open {
    overflow: hidden !important;
}

.involvement-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 100000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    background: rgba(3,35,42,.90) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    overscroll-behavior: contain;
    transition: opacity .35s ease, visibility .35s ease;
}

.involvement-overlay.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.involvement-panel {
    position: relative !important;
    width: min(1100px, 94vw) !important;
    height: min(760px, calc(100vh - 48px)) !important;
    max-height: calc(100vh - 48px) !important;
    min-height: 0 !important;
    margin: auto !important;
    display: grid !important;
    grid-template-columns: 45% minmax(0,55%) !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
    border-radius: 34px !important;
    background: #f8fcf7 !important;
    box-shadow: 0 45px 120px rgba(0,0,0,.32) !important;
    transform: translateY(35px) scale(.96);
    transition: transform .45s cubic-bezier(.2,.8,.2,1);
}

.involvement-overlay.show .involvement-panel {
    transform: translateY(0) scale(1);
}

.involvement-panel-visual {
    position: relative !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: radial-gradient(circle at center,#fff 0%,#e2f2e5 48%,#cce5d1 100%) !important;
}

.involvement-panel-visual::before,
.involvement-panel-visual::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.involvement-panel-visual::before {
    width: 350px;
    height: 350px;
    border: 1px solid rgba(89,143,102,.20);
    animation: visualOrbit 12s linear infinite;
}

.involvement-panel-visual::after {
    width: 230px;
    height: 230px;
    border: 1px solid rgba(215,166,42,.20);
    animation: visualOrbitReverse 9s linear infinite;
}

.involvement-eva-large {
    position: relative !important;
    z-index: 5 !important;
    width: 145px !important;
    height: 145px !important;
    flex: 0 0 145px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #fff !important;
    font-size: 72px !important;
    box-shadow: 0 20px 55px rgba(47,106,70,.18) !important;
    animation: involvementEvaFloat 4s ease-in-out infinite;
}

.involvement-orbit {
    position: absolute !important;
    border: 1px solid rgba(77,137,92,.20) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

.involvement-orbit.orbit-a {
    width: 440px;
    height: 170px;
    transform: rotate(-28deg);
    animation: orbitRotate 10s linear infinite;
}

.involvement-orbit.orbit-b {
    width: 300px;
    height: 110px;
    transform: rotate(40deg);
    animation: orbitRotateReverse 8s linear infinite;
}

.involvement-float {
    position: absolute;
    z-index: 4;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.88);
    box-shadow: 0 10px 30px rgba(47,100,67,.12);
    font-size: 20px;
}

.involvement-float.float-one { top: 17%; left: 18%; animation: floatOne 5s ease-in-out infinite; }
.involvement-float.float-two { top: 27%; right: 15%; animation: floatTwo 6s ease-in-out infinite; }
.involvement-float.float-three { bottom: 18%; left: 22%; animation: floatThree 5.5s ease-in-out infinite; }

/* THIS IS THE IMPORTANT PART: only the right side scrolls */
.involvement-panel-content {
    position: relative !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 70px 70px 65px !important;
    background: linear-gradient(145deg,#fff,#f6faf4) !important;
}

.involvement-panel-content::-webkit-scrollbar { width: 8px; }
.involvement-panel-content::-webkit-scrollbar-track { background: #edf4ed; border-radius: 20px; }
.involvement-panel-content::-webkit-scrollbar-thumb { background: #8aae91; border-radius: 20px; }

.involvement-panel-label {
    display: block !important;
    margin-bottom: 17px !important;
    color: #d09c1b !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
}

.involvement-panel-content h3 {
    margin: 0 0 25px !important;
    color: #073f4c !important;
    font-family: Georgia,"Times New Roman",serif !important;
    font-size: clamp(40px,4vw,62px) !important;
    line-height: 1.02 !important;
    letter-spacing: -2px !important;
    overflow-wrap: break-word;
}

.involvement-panel-content > p {
    margin: 0 0 30px !important;
    color: #638391 !important;
    font-size: 17px !important;
    line-height: 1.85 !important;
}

.involvement-panel-points {
    display: flex !important;
    flex-direction: column !important;
    gap: 13px !important;
    margin-bottom: 35px !important;
}

.involvement-point {
    display: flex !important;
    align-items: flex-start !important;
    gap: 13px !important;
    padding: 14px 17px !important;
    border-radius: 14px !important;
    background: #eef7ee !important;
}

.involvement-point span {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #6fa77a;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.involvement-point p {
    min-width: 0;
    margin: 0 !important;
    color: #426b77 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

.involvement-panel-actions {
    display: flex !important;
    align-items: center;
    gap: 13px;
    flex-wrap: wrap;
    padding-bottom: 5px;
}

.involvement-panel-actions .primary-btn,
.involvement-panel-actions .secondary-btn {
    min-height: 50px;
    padding: 13px 24px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.involvement-panel-actions .primary-btn {
    border: none;
    background: #dca82b;
    color: #fff;
    box-shadow: 0 10px 25px rgba(205,155,31,.22);
}

.involvement-panel-actions .secondary-btn {
    border: 1px solid #d5e4d8;
    background: transparent;
    color: #426b77;
}

.involvement-close {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    z-index: 100 !important;
    width: 52px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: #084b59 !important;
    color: #fff !important;
    font-size: 30px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: 0 12px 30px rgba(0,52,64,.25) !important;
}

.involvement-close:hover {
    transform: rotate(90deg) scale(1.08);
    background: #d29d20 !important;
}

@keyframes involvementEvaFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

@keyframes visualOrbit {
    from { transform: rotate(-28deg); }
    to { transform: rotate(332deg); }
}

@keyframes visualOrbitReverse {
    from { transform: rotate(40deg); }
    to { transform: rotate(-320deg); }
}

/* Tablet */
@media (max-width: 900px) {
    .involved-section { padding: 90px 5% 80px; }
    .involved-choice-grid { grid-template-columns: 1fr; }

    .involvement-panel {
        width: min(700px,94vw) !important;
        height: min(820px, calc(100vh - 40px)) !important;
        max-height: calc(100vh - 40px) !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: 280px minmax(0,1fr) !important;
    }

    .involvement-panel-visual {
        height: 280px !important;
        min-height: 280px !important;
    }

    .involvement-panel-content {
        height: 100% !important;
        min-height: 0 !important;
        padding: 45px 40px 50px !important;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .involved-section { padding: 75px 20px 65px; }
    .involved-heading-area h2 { font-size: 45px; letter-spacing: -1.5px; }
    .involved-description { font-size: 15px; line-height: 1.7; }

    .involved-eva-message {
        width: 100%;
        margin: 30px auto 38px;
        padding: 14px 17px;
        border-radius: 20px;
    }

    .involved-choice {
        grid-template-columns: 58px minmax(0,1fr) auto;
        min-height: 160px;
        padding: 28px 20px;
        border-radius: 23px;
    }

    .involved-choice-icon { width: 50px; height: 50px; border-radius: 16px; font-size: 24px; }
    .involved-choice-content { padding-right: 8px; }
    .involved-choice-content strong { font-size: 20px; }
    .involved-choice-content small { font-size: 12px; }
    .involved-choice-arrow { width: 38px; height: 38px; flex-basis: 38px; font-size: 20px; }
    .involved-choice-number { top: 15px; right: 17px; font-size: 38px; }

    .involved-impact-strip {
        align-items: flex-start;
        padding: 20px;
        flex-wrap: wrap;
    }

    .impact-symbol { width: 38px; height: 38px; flex-basis: 38px; }
    .involved-impact-strip > div:nth-child(2) { max-width: calc(100% - 60px); }
    .impact-link { width: 100%; margin: 15px 0 0 55px; }

    .involvement-overlay {
        align-items: flex-start !important;
        padding: 12px !important;
    }

    .involvement-panel {
        width: 100% !important;
        height: calc(100vh - 24px) !important;
        max-height: calc(100vh - 24px) !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: 230px minmax(0,1fr) !important;
        border-radius: 25px !important;
    }

    .involvement-panel-visual {
        height: 230px !important;
        min-height: 230px !important;
    }

    .involvement-eva-large { width: 90px !important; height: 90px !important; flex-basis: 90px; font-size: 45px !important; }
    .involvement-orbit.orbit-a { width: 270px; height: 100px; }
    .involvement-orbit.orbit-b { width: 200px; height: 80px; }
    .involvement-float { width: 38px; height: 38px; font-size: 16px; }

    .involvement-panel-content {
        height: 100% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        padding: 42px 25px 35px !important;
    }

    .involvement-panel-content h3 { font-size: 40px !important; letter-spacing: -1px !important; }
    .involvement-panel-content > p { font-size: 15px !important; }

    .involvement-close {
        top: 12px !important;
        right: 12px !important;
        width: 44px !important;
        height: 44px !important;
        font-size: 25px !important;
    }

    .involvement-panel-actions { flex-direction: column; align-items: stretch; }
    .involvement-panel-actions .primary-btn,
    .involvement-panel-actions .secondary-btn { width: 100%; }
}

@media (max-width: 480px) {
    .involved-heading-area h2 { font-size: 39px; }
    .involvement-panel-content { padding: 40px 20px 30px !important; }
    .involvement-panel-content h3 { font-size: 34px !important; }
}
/* =========================================================
   EVA AI ASSISTANT 2.0
   CHAT + VOICE
========================================================= */

.eva-floating-button {

    position: fixed;

    right: 32px;
    bottom: 30px;

    width: 72px;
    height: 72px;

    border: none;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 12px 35px rgba(0,0,0,.18);

    cursor: pointer;

    z-index: 99999;

    font-size: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.eva-floating-button:hover {

    transform: translateY(-5px);

    box-shadow:
        0 18px 45px rgba(0,0,0,.24);

}


/* =========================================================
   CHAT BOX
========================================================= */

.eva-chat-box {

    position: fixed;

    right: 30px;
    bottom: 115px;

    width: 410px;

    height: 650px;

    max-width: calc(100vw - 30px);
    max-height: calc(100vh - 140px);

    background: #ffffff;

    border-radius: 25px;

    overflow: hidden;

    display: none;

    flex-direction: column;

    z-index: 100000;

    box-shadow:
        0 25px 70px rgba(0,0,0,.25);

    border: 1px solid rgba(13,110,102,.15);

    animation:
        evaOpen .25s ease;

}


.eva-chat-box.active,
.eva-chat-box.eva-open {

    display: flex;

}


@keyframes evaOpen {

    from {

        opacity: 0;

        transform:
            translateY(20px)
            scale(.97);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


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

.eva-chat-header {

    min-height: 88px;

    padding: 16px 18px;

    background:
        linear-gradient(
            135deg,
            #087d78,
            #20a36f
        );

    color: white;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.eva-header-left {

    display: flex;

    align-items: center;

    gap: 12px;

}


.eva-avatar {

    width: 54px;
    height: 54px;

    background: white;

    border-radius: 17px;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 29px;

}


.eva-header-info h3 {

    margin: 0;

    font-family:
        Georgia,
        serif;

    font-size: 25px;

}


.eva-header-info span {

    display: block;

    margin-top: 3px;

    font-size: 12px;

    opacity: .88;

}


.eva-header-actions {

    display: flex;

    align-items: center;

    gap: 6px;

}


.eva-header-button {

    width: 38px;
    height: 38px;

    border: none;

    border-radius: 50%;

    background:
        rgba(255,255,255,.16);

    color: white;

    cursor: pointer;

    font-size: 19px;

    display: flex;

    align-items: center;
    justify-content: center;

}


.eva-header-button:hover {

    background:
        rgba(255,255,255,.28);

}


/* =========================================================
   BODY
========================================================= */

.eva-chat-body {

    flex: 1;

    overflow-y: auto;

    padding: 20px 16px 12px;

    background:
        linear-gradient(
            180deg,
            #f7fcfa,
            #ffffff
        );

    scroll-behavior: smooth;

}


.eva-chat-body::-webkit-scrollbar {

    width: 6px;

}


.eva-chat-body::-webkit-scrollbar-thumb {

    background: #b8d8d1;

    border-radius: 10px;

}


/* =========================================================
   BOT MESSAGE
========================================================= */

.eva-message {

    display: flex;

    gap: 10px;

    margin-bottom: 18px;

}


.eva-message-avatar {

    width: 34px;
    height: 34px;

    flex-shrink: 0;

    border-radius: 12px;

    background: white;

    box-shadow:
        0 3px 12px rgba(0,0,0,.10);

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 19px;

}


.eva-message-content {

    max-width: 85%;

}


.eva-message-name {

    font-size: 12px;

    font-weight: 700;

    color: #087d78;

    margin-bottom: 5px;

}


.eva-bubble {

    background: white;

    border-radius:
        5px
        18px
        18px
        18px;

    padding: 13px 15px;

    box-shadow:
        0 5px 20px rgba(0,0,0,.07);

    color: #25454b;

    font-size: 14px;

    line-height: 1.55;

}


.eva-bubble p {

    margin:
        0 0 7px;

}


.eva-bubble p:last-child {

    margin-bottom: 0;

}


/* =========================================================
   USER MESSAGE
========================================================= */

.eva-user-message {

    display: flex;

    justify-content: flex-end;

    margin:
        5px 0 18px;

}


.eva-user-bubble {

    max-width: 78%;

    padding: 11px 15px;

    background:
        #087d78;

    color: white;

    border-radius:
        18px
        18px
        5px
        18px;

    font-size: 14px;

    line-height: 1.5;

}


/* =========================================================
   QUESTION AREA
========================================================= */

.eva-question-area {

    margin-top: 8px;

}


.eva-question-title {

    font-size: 13px;

    font-weight: 700;

    color: #264b50;

    margin:
        8px 0 10px;

}


.eva-question-list {

    display: flex;

    flex-direction: column;

    gap: 9px;

}


.eva-question-card {

    width: 100%;

    min-height: 48px;

    padding:
        11px
        13px;

    border:
        1px solid #dcece7;

    background: white;

    border-radius: 15px;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 9px;

    text-align: left;

    color: #173f45;

    font-size: 13px;

    font-weight: 600;

    transition:
        background .2s ease,
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;

}


.eva-question-card:hover {

    background:
        #f1faf6;

    border-color:
        #68b9a2;

    transform:
        translateY(-1px);

    box-shadow:
        0 5px 16px rgba(0,0,0,.07);

}


.eva-question-card:disabled {

    opacity: .55;

    cursor:
        wait;

}


.eva-question-icon {

    font-size: 18px;

    width: 23px;

    flex-shrink: 0;

}


.eva-question-text {

    flex: 1;

}


.eva-question-arrow {

    color: #078378;

    font-size: 18px;

}


/* =========================================================
   TYPING
========================================================= */

.eva-typing {

    display: flex;

    align-items: center;

    gap: 5px;

    margin:
        5px 0 15px 44px;

    color: #648084;

    font-size: 12px;

}


.eva-typing span {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #087d78;

    animation:
        evaTyping 1.2s infinite;

}


.eva-typing span:nth-child(2) {

    animation-delay: .15s;

}


.eva-typing span:nth-child(3) {

    animation-delay: .30s;

}


.eva-typing small {

    margin-left: 5px;

}


@keyframes evaTyping {

    0%,
    60%,
    100% {

        transform:
            translateY(0);

        opacity: .4;

    }

    30% {

        transform:
            translateY(-4px);

        opacity: 1;

    }

}


/* =========================================================
   INPUT
========================================================= */

.eva-input-area {

    padding:
        11px 13px 13px;

    background: white;

    border-top:
        1px solid #e8efed;

}


.eva-input-wrapper {

    height: 52px;

    border:
        1px solid #d8e7e3;

    border-radius: 27px;

    display: flex;

    align-items: center;

    padding-left: 16px;

    background: #fbfdfc;

}


#evaInput {

    flex: 1;

    min-width: 0;

    border: none;

    outline: none;

    background: transparent;

    font-size: 14px;

    color: #193d43;

}


#evaInput::placeholder {

    color: #8ba1a3;

}


.eva-input-button {

    border: none;

    cursor: pointer;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

}


.eva-mic-button {

    width: 40px;
    height: 40px;

    background: transparent;

    color: #087d78;

    font-size: 20px;

    border-radius: 50%;

}


.eva-mic-button:hover {

    background: #eaf7f3;

}


.eva-mic-button.listening {

    background: #ffe7e7;

    color: #d62828;

    animation:
        evaMicPulse 1s infinite;

}


@keyframes evaMicPulse {

    50% {

        box-shadow:
            0 0 0 7px
            rgba(214,40,40,.12);

    }

}


.eva-send-button {

    width: 42px;
    height: 42px;

    margin-right: 4px;

    border-radius: 50%;

    background:
        #0b9685;

    color: white;

    font-size: 18px;

}


.eva-send-button:hover {

    background:
        #087d78;

}


.eva-voice-status {

    min-height: 15px;

    text-align: center;

    margin-top: 4px;

    color: #718a8d;

    font-size: 11px;

}


/* =========================================================
   SPEAKING INDICATOR
========================================================= */

.eva-speaking {

    border:
        2px solid #21a477 !important;

    box-shadow:
        0 0 0 4px
        rgba(33,164,119,.10);

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .eva-chat-box {

        right: 10px;

        bottom: 90px;

        width:
            calc(100vw - 20px);

        height:
            min(650px, calc(100vh - 110px));

        border-radius: 22px;

    }


    .eva-floating-button {

        right: 18px;

        bottom: 18px;

        width: 62px;
        height: 62px;

    }

}
/* =========================================================
   EVA FINAL FIX + VOICE CONTROLS
   ========================================================= */

.eva-chat-wrapper {
    position: fixed !important;
    right: 28px !important;
    bottom: 28px !important;
    z-index: 999999 !important;
}


/* ---------------------------------------------------------
   FORCE CHAT WINDOW TO WORK
   --------------------------------------------------------- */

.eva-chat-box {
    position: absolute !important;
    right: 0 !important;
    bottom: 85px !important;

    width: 390px !important;
    max-width: calc(100vw - 30px) !important;

    height: 590px !important;

    display: none !important;

    flex-direction: column !important;

    visibility: hidden !important;
    opacity: 0 !important;

    overflow: hidden !important;

    border-radius: 24px !important;

    background: #ffffff !important;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.25) !important;

    z-index: 1000000 !important;
}


.eva-chat-box.eva-open,
.eva-chat-box.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* ---------------------------------------------------------
   FLOATING BUTTON
   --------------------------------------------------------- */

.eva-chat-button {
    position: relative !important;

    width: 70px !important;
    height: 70px !important;

    border: none !important;
    border-radius: 50% !important;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #e3f7eb
        ) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    cursor: pointer !important;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.22),
        0 0 25px rgba(65, 190, 130, 0.25) !important;

    z-index: 1000001 !important;
}


.eva-chat-button:hover {
    transform: scale(1.08) !important;
}


/* ---------------------------------------------------------
   QUESTION BUTTONS
   --------------------------------------------------------- */

.eva-live-question-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    margin-top: 12px !important;
}


.eva-question-card {
    width: 100% !important;

    display: flex !important;
    align-items: center !important;

    gap: 9px !important;

    padding: 13px 14px !important;

    border:
        1px solid #d8ebe1 !important;

    border-radius: 14px !important;

    background: #ffffff !important;

    color: #164c4a !important;

    text-align: left !important;

    cursor: pointer !important;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease !important;
}


.eva-question-card:hover {
    background: #effaf4 !important;

    transform:
        translateY(-2px) !important;

    box-shadow:
        0 5px 15px rgba(20, 100, 70, 0.10) !important;
}


.eva-question-card:disabled {
    opacity: 0.6 !important;
    cursor: default !important;
}


.eva-question-number {
    width: 24px !important;
    height: 24px !important;

    min-width: 24px !important;

    border-radius: 50% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #e5f5eb !important;

    color: #16775f !important;

    font-size: 11px !important;
    font-weight: 700 !important;
}


.eva-question-icon {
    font-size: 17px !important;
}


.eva-question-text {
    flex: 1 !important;

    font-size: 13px !important;

    line-height: 1.4 !important;
}


.eva-question-arrow {
    font-size: 16px !important;
    color: #20876d !important;
}


/* ---------------------------------------------------------
   USER MESSAGE
   --------------------------------------------------------- */

.eva-user-message {
    display: flex !important;
    justify-content: flex-end !important;

    margin:
        15px 0 !important;
}


.eva-user-bubble {
    max-width: 82% !important;

    padding:
        11px 15px !important;

    border-radius:
        18px 5px 18px 18px !important;

    background:
        linear-gradient(
            135deg,
            #087d82,
            #48aa78
        ) !important;

    color: white !important;

    font-size: 13px !important;

    line-height: 1.5 !important;
}


/* ---------------------------------------------------------
   EVA NAME
   --------------------------------------------------------- */

.eva-message-name {
    font-size: 12px !important;

    font-weight: 700 !important;

    color: #14755e !important;

    margin-bottom: 5px !important;
}


/* ---------------------------------------------------------
   SPEAK ANSWER BUTTON
   --------------------------------------------------------- */

.eva-speak-answer {
    display: inline-flex !important;

    align-items: center !important;

    gap: 5px !important;

    margin-top: 8px !important;

    padding:
        6px 10px !important;

    border:
        1px solid #d2e8dc !important;

    border-radius: 15px !important;

    background: #f1faf5 !important;

    color: #16765d !important;

    font-size: 11px !important;

    cursor: pointer !important;
}


.eva-speak-answer:hover {
    background: #dff5e8 !important;
}


/* ---------------------------------------------------------
   INPUT AREA
   --------------------------------------------------------- */

.eva-input-area {
    display: flex !important;

    align-items: center !important;

    gap: 7px !important;

    padding: 12px !important;

    background: #ffffff !important;

    border-top:
        1px solid #e6eeee !important;
}


.eva-input-area input {
    flex: 1 !important;

    min-width: 0 !important;

    height: 44px !important;

    padding:
        11px 15px !important;

    border:
        1px solid #d7e8e0 !important;

    border-radius: 25px !important;

    outline: none !important;

    font-size: 13px !important;

    color: #23434a !important;

    background: #ffffff !important;
}


.eva-input-area input:focus {
    border-color:
        #48aa78 !important;

    box-shadow:
        0 0 0 3px
        rgba(72,170,120,0.10) !important;
}


/* ---------------------------------------------------------
   MICROPHONE
   --------------------------------------------------------- */

.eva-mic-button {
    width: 44px !important;
    height: 44px !important;

    min-width: 44px !important;

    border: none !important;

    border-radius: 50% !important;

    background:
        #edf8f2 !important;

    color:
        #16765d !important;

    font-size: 18px !important;

    cursor: pointer !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    transition:
        transform 0.2s ease,
        background 0.2s ease !important;
}


.eva-mic-button:hover {
    transform: scale(1.08) !important;

    background:
        #dcefe5 !important;
}


.eva-mic-listening {
    background:
        #ffe5e5 !important;

    color:
        #c73535 !important;

    animation:
        evaMicPulse 1s infinite !important;
}


@keyframes evaMicPulse {

    0% {
        box-shadow:
            0 0 0 0
            rgba(220, 60, 60, 0.35);
    }

    70% {
        box-shadow:
            0 0 0 10px
            rgba(220, 60, 60, 0);
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(220, 60, 60, 0);
    }

}


/* ---------------------------------------------------------
   SEND BUTTON
   --------------------------------------------------------- */

#evaSend {
    width: 44px !important;
    height: 44px !important;

    min-width: 44px !important;

    border: none !important;

    border-radius: 50% !important;

    background:
        linear-gradient(
            135deg,
            #087d82,
            #4aaa78
        ) !important;

    color: white !important;

    font-size: 18px !important;

    cursor: pointer !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;
}


#evaSend:hover {
    transform:
        scale(1.08) !important;

    box-shadow:
        0 5px 15px
        rgba(20,120,100,0.25) !important;
}


/* ---------------------------------------------------------
   NEXT QUESTIONS
   --------------------------------------------------------- */

.eva-next-heading {
    margin:
        15px 0 8px !important;

    color:
        #50736e !important;

    font-size:
        12px !important;

    font-weight:
        700 !important;
}


.eva-next-list {
    display:
        flex !important;

    flex-direction:
        column !important;

    gap:
        7px !important;
}


.eva-next-card {
    padding:
        10px 12px !important;

    font-size:
        12px !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 600px) {

    .eva-chat-wrapper {
        right:
            15px !important;

        bottom:
            15px !important;
    }


    .eva-chat-button {
        width:
            62px !important;

        height:
            62px !important;
    }


    .eva-chat-box {
        right:
            -5px !important;

        bottom:
            75px !important;

        width:
            calc(100vw - 25px) !important;

        height:
            75vh !important;

        max-height:
            600px !important;
    }

}
/* ============================================================
   GEUGF EVA - FINAL CHATBOT
============================================================ */

.eva-chat-wrapper {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 999999;
    font-family: "DM Sans", Arial, sans-serif;
}


/* ============================================================
   FLOATING BUTTON
============================================================ */

.eva-chat-button {
    position: relative;

    width: 68px;
    height: 68px;

    border: 0;
    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #ffffff,
        #e4f7ec
    );

    box-shadow:
        0 12px 35px rgba(0,0,0,.22),
        0 0 25px rgba(67,180,120,.30);

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: .25s ease;

    z-index: 1000000;
}

.eva-chat-button:hover {
    transform: scale(1.08);
}

.eva-avatar {
    font-size: 31px;
    line-height: 1;
}

.eva-online-dot {
    position: absolute;

    right: 2px;
    bottom: 3px;

    width: 15px;
    height: 15px;

    background: #42d47b;

    border: 3px solid white;

    border-radius: 50%;
}


/* ============================================================
   CHAT WINDOW
============================================================ */

.eva-chat-box {
    position: absolute;

    right: 0;
    bottom: 82px;

    width: 390px;
    height: 600px;

    max-width: calc(100vw - 30px);

    display: none;

    flex-direction: column;

    overflow: hidden;

    background: #ffffff;

    border-radius: 24px;

    border: 1px solid #dceae4;

    box-shadow:
        0 25px 80px rgba(0,0,0,.25);

    z-index: 999999;
}

.eva-chat-box.eva-open,
.eva-chat-box.active {
    display: flex !important;

    visibility: visible !important;
    opacity: 1 !important;
}


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

.eva-chat-header {
    min-height: 82px;

    padding: 15px 18px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    background: linear-gradient(
        135deg,
        #075d68,
        #087e74,
        #3aa971
    );

    color: white;
}

.eva-header-info {
    display: flex;

    align-items: center;

    gap: 12px;
}

.eva-mini-avatar {
    width: 50px;
    height: 50px;

    border-radius: 50%;

    background: white;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 25px;

    box-shadow:
        0 5px 18px rgba(0,0,0,.18);
}

.eva-header-info h3 {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 23px;
}

.eva-header-info span {
    display: block;

    margin-top: 3px;

    font-size: 12px;

    opacity: .9;
}

.eva-close {
    width: 38px;
    height: 38px;

    border: 0;

    border-radius: 50%;

    background: rgba(255,255,255,.18);

    color: white;

    font-size: 25px;

    cursor: pointer;

    display: flex;

    align-items: center;
    justify-content: center;
}

.eva-close:hover {
    background: rgba(255,255,255,.30);
}


/* ============================================================
   CHAT BODY
============================================================ */

.eva-chat-body {
    flex: 1;

    min-height: 0;

    overflow-y: auto;

    padding: 20px 16px;

    background:
        linear-gradient(
            180deg,
            #f4fbf7,
            #ffffff
        );
}


/* ============================================================
   EVA MESSAGE
============================================================ */

.eva-message {
    display: flex;

    gap: 10px;

    margin-bottom: 18px;
}

.eva-message-avatar {
    width: 36px;
    height: 36px;

    min-width: 36px;

    border-radius: 50%;

    background: white;

    display: flex;

    align-items: center;
    justify-content: center;

    box-shadow:
        0 3px 12px rgba(0,0,0,.08);
}

.eva-message-content {
    max-width: 82%;

    padding: 14px 16px;

    border-radius:
        6px 18px 18px 18px;

    background: white;

    box-shadow:
        0 5px 20px rgba(0,0,0,.07);

    color: #24434a;

    font-size: 14px;

    line-height: 1.55;
}

.eva-message-content p {
    margin: 5px 0;
}

.eva-message-name {
    font-weight: 700;

    color: #087c72;

    margin-bottom: 5px;
}


/* ============================================================
   USER MESSAGE
============================================================ */

.eva-user-message {
    display: flex;

    justify-content: flex-end;

    margin:
        8px 0 18px;
}

.eva-user-bubble {
    max-width: 78%;

    padding: 12px 16px;

    border-radius:
        18px 18px 5px 18px;

    background:
        linear-gradient(
            135deg,
            #087d82,
            #4aaa78
        );

    color: white;

    font-size: 14px;

    line-height: 1.45;

    box-shadow:
        0 5px 16px rgba(0,0,0,.10);
}


/* ============================================================
   QUESTION HEADING
============================================================ */

.eva-question-heading {
    margin:
        8px 4px 12px;

    color: #173f46;

    font-size: 14px;

    font-weight: 700;
}


/* ============================================================
   QUESTION BUTTONS
============================================================ */

.eva-quick-options {
    display: flex;

    flex-direction: column;

    gap: 9px;
}

.eva-question-card {
    width: 100%;

    min-height: 50px;

    border: 1px solid #dceae4;

    border-radius: 14px;

    background: white;

    padding:
        11px 13px;

    display: flex;

    align-items: center;

    gap: 9px;

    text-align: left;

    cursor: pointer;

    color: #173f46;

    font-size: 13px;

    font-weight: 600;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.eva-question-card:hover {
    transform: translateY(-2px);

    border-color: #68b28a;

    box-shadow:
        0 7px 18px rgba(40,120,80,.12);
}

.eva-question-icon {
    font-size: 18px;

    min-width: 23px;
}

.eva-question-text {
    flex: 1;
}

.eva-question-arrow {
    font-size: 17px;

    color: #0b8176;
}


/* ============================================================
   NEXT QUESTIONS
============================================================ */

.eva-next-question-area {
    margin-top: 20px;
}

.eva-next-heading {
    margin:
        0 3px 10px;

    font-size: 13px;

    font-weight: 700;

    color: #173f46;
}

.eva-next-list {
    display: flex;

    flex-direction: column;

    gap: 8px;
}

.eva-next-card {
    min-height: 44px;
}


/* ============================================================
   ANSWER VOICE BUTTONS
============================================================ */

.eva-answer-actions {
    display: flex;

    gap: 7px;

    margin-top: 12px;
}

.eva-answer-actions button {
    border: 1px solid #d5e8df;

    background: #f6fbf8;

    color: #17695e;

    border-radius: 20px;

    padding:
        6px 10px;

    font-size: 11px;

    cursor: pointer;
}

.eva-answer-actions button:hover {
    background: #eaf7ef;
}


/* ============================================================
   TYPING
============================================================ */

.eva-typing {
    display: none;

    align-items: center;

    gap: 5px;

    padding:
        0 20px 10px;
}

.eva-typing.active {
    display: flex;
}

.eva-typing span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #55a879;

    animation:
        evaTyping 1.2s infinite;
}

.eva-typing span:nth-child(2) {
    animation-delay: .15s;
}

.eva-typing span:nth-child(3) {
    animation-delay: .30s;
}

@keyframes evaTyping {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: .35;
    }

    30% {
        transform: translateY(-5px);
        opacity: 1;
    }
}


/* ============================================================
   INPUT AREA
============================================================ */

.eva-input-area {
    display: flex;

    align-items: center;

    gap: 7px;

    padding: 11px;

    background: white;

    border-top:
        1px solid #e4ece8;
}

.eva-input-area input {
    flex: 1;

    min-width: 0;

    height: 44px;

    padding:
        0 15px;

    border:
        1px solid #d5e6df;

    border-radius: 24px;

    outline: none;

    color: #173f46;

    font-size: 13px;

    background: #fbfdfc;
}

.eva-input-area input:focus {
    border-color: #53a981;

    box-shadow:
        0 0 0 3px rgba(83,169,129,.10);
}


/* ============================================================
   SEND / MIC / STOP
============================================================ */

.eva-input-area button {
    width: 43px;
    height: 43px;

    min-width: 43px;

    border: 0;

    border-radius: 50%;

    cursor: pointer;

    display: flex;

    align-items: center;
    justify-content: center;

    transition: .2s ease;
}

.eva-send-button {
    background:
        linear-gradient(
            135deg,
            #087d82,
            #4aaa78
        );

    color: white;

    font-size: 17px;
}

.eva-mic-button {
    background: #edf8f1;

    color: #087d72;

    font-size: 17px;
}

.eva-stop-voice {
    background: #f4f4f4;

    color: #555;

    font-size: 15px;
}

.eva-input-area button:hover {
    transform: scale(1.08);
}

.eva-mic-button.eva-listening {
    background: #ffe8e8;

    color: #d60000;

    animation:
        evaMicPulse 1s infinite;
}

@keyframes evaMicPulse {

    0% {
        box-shadow:
            0 0 0 0 rgba(220,0,0,.25);
    }

    70% {
        box-shadow:
            0 0 0 10px rgba(220,0,0,0);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(220,0,0,0);
    }
}


/* ============================================================
   EMPTY MESSAGE
============================================================ */

.eva-empty-message {
    padding: 18px;

    border-radius: 14px;

    background: white;

    color: #567077;

    text-align: center;

    font-size: 13px;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 600px) {

    .eva-chat-wrapper {
        right: 15px;
        bottom: 15px;
    }

    .eva-chat-button {
        width: 60px;
        height: 60px;
    }

    .eva-chat-box {
        right: -5px;

        bottom: 73px;

        width:
            calc(100vw - 25px);

        height:
            min(75vh, 600px);

        border-radius: 20px;
    }

    .eva-chat-header {
        min-height: 72px;
    }

    .eva-message-content {
        max-width: 86%;
    }

}
/* ================================
   CONTACT POPUP - FINAL LAYOUT
   ================================ */

#contactPopup {
    position: fixed !important;
    top: 185px !important;
    right: 175px !important;

    width: 395px !important;
    max-width: calc(100vw - 30px) !important;

    background: #ffffff !important;
    border-radius: 24px !important;

    padding: 32px !important;
    box-sizing: border-box !important;

    z-index: 999999 !important;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18) !important;
}

/* Contact popup arrow */
#contactPopup::before {
    content: "" !important;

    position: absolute !important;

    top: -14px !important;

    /* This puts the arrow under CONTACT */
    left: 190px !important;

    width: 0 !important;
    height: 0 !important;

    border-left: 14px solid transparent !important;
    border-right: 14px solid transparent !important;
    border-bottom: 14px solid #ffffff !important;
}


/* Popup heading */
#contactPopup h2 {
    margin: 0 0 30px 0 !important;

    text-align: right !important;

    color: #084858 !important;

    font-size: 32px !important;
    font-weight: 700 !important;
}


/* Close button */
#contactPopup .close-contact,
#contactPopup .contact-close {
    position: absolute !important;

    top: 18px !important;
    right: 18px !important;

    width: 38px !important;
    height: 38px !important;

    border: none !important;
    border-radius: 50% !important;

    background: #edf7f1 !important;

    color: #084858 !important;

    font-size: 22px !important;

    cursor: pointer !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* Intro text */
#contactPopup .contact-intro {
    margin-bottom: 25px !important;

    color: #71888a !important;

    font-size: 17px !important;

    line-height: 1.5 !important;
}


/* Contact information container */
#contactPopup .contact-info {
    display: grid !important;

    grid-template-columns: 1fr 1fr !important;

    gap: 18px !important;

    width: 100% !important;

    box-sizing: border-box !important;
}


/* Individual contact cards */
#contactPopup .contact-card {
    width: 100% !important;

    min-height: 115px !important;

    padding: 22px !important;

    box-sizing: border-box !important;

    border: 1px solid #e3ebe7 !important;

    border-radius: 20px !important;

    background: #ffffff !important;

    display: flex !important;

    align-items: center !important;

    gap: 15px !important;
}


/* Email card takes full width */
#contactPopup .contact-card.email {
    grid-column: 1 / -1 !important;
}


/* Contact icons */
#contactPopup .contact-card .icon {
    flex-shrink: 0 !important;

    font-size: 22px !important;
}


/* Contact card text */
#contactPopup .contact-card h3 {
    margin: 0 0 7px 0 !important;

    color: #084858 !important;

    font-size: 16px !important;
}


#contactPopup .contact-card p {
    margin: 0 !important;

    color: #71888a !important;

    font-size: 15px !important;

    line-height: 1.4 !important;

    word-break: break-word !important;
}


/* Close button at bottom */
#contactPopup .contact-close-bottom {
    margin-top: 25px !important;

    width: 175px !important;
    height: 52px !important;

    border: none !important;

    border-radius: 30px !important;

    background: #edb21e !important;

    color: #ffffff !important;

    font-size: 16px !important;
    font-weight: 700 !important;

    cursor: pointer !important;
}


/* ================================
   MOBILE
   ================================ */

@media (max-width: 700px) {

    #contactPopup {
        top: 120px !important;
        right: 15px !important;
        left: 15px !important;

        width: auto !important;

        padding: 25px !important;
    }

    #contactPopup::before {
        left: auto !important;
        right: 70px !important;
    }

    #contactPopup h2 {
        font-size: 27px !important;
    }

    #contactPopup .contact-info {
        grid-template-columns: 1fr !important;
    }

    #contactPopup .contact-card.email {
        grid-column: auto !important;
    }
}



/* =========================================================
   PREVENT PAGE SCROLL WHEN POPUP OPEN
========================================================= */

body.contact-popup-open {
    overflow: hidden;
}
/* =========================================================
   GEUGF CONTACT DROPDOWN
   CONTACT ONLY - DOES NOT AFFECT OTHER WEBSITE SECTIONS
========================================================= */

.geugf-contact-menu {
    position: relative;
    display: flex;
    align-items: center;
}


/* CONTACT DROPDOWN */

.geugf-contact-panel {
    position: absolute;
    top: calc(100% + 18px);
    right: -20px;

    width: 360px;

    background: #ffffff;

    border-radius: 22px;

    padding: 28px;

    box-sizing: border-box;

    box-shadow:
        0 20px 60px rgba(7, 59, 70, 0.18);

    border: 1px solid rgba(7, 59, 70, 0.08);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-8px);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;

    z-index: 999999;
}


/* LITTLE ARROW */

.geugf-contact-panel::before {
    content: "";

    position: absolute;

    top: -8px;
    right: 42px;

    width: 16px;
    height: 16px;

    background: #ffffff;

    transform: rotate(45deg);

    border-left: 1px solid rgba(7, 59, 70, 0.08);
    border-top: 1px solid rgba(7, 59, 70, 0.08);
}


/* OPEN STATE */

.geugf-contact-panel.geugf-contact-show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}


/* CLOSE BUTTON */

.geugf-contact-close {
    position: absolute;

    top: 14px;
    right: 14px;

    width: 34px;
    height: 34px;

    border: none;

    border-radius: 50%;

    background: #edf7f2;

    color: #074957;

    font-size: 21px;

    line-height: 1;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: 0.2s ease;
}

.geugf-contact-close:hover {
    background: #e5b12a;
    color: #ffffff;
}


/* HEADER */

.geugf-contact-header {
    padding-right: 35px;

    margin-bottom: 20px;
}


.geugf-contact-small-title {
    display: block;

    font-family: "DM Sans", sans-serif;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;

    color: #d99f16;

    margin-bottom: 6px;
}


.geugf-contact-header h3 {
    margin: 0;

    font-family: "Playfair Display", serif;

    font-size: 30px;

    line-height: 1.15;

    color: #073f4d;
}


.geugf-contact-header p {
    margin: 8px 0 0;

    font-family: "DM Sans", sans-serif;

    font-size: 14px;

    line-height: 1.5;

    color: #6b8586;
}


/* DETAILS */

.geugf-contact-details {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


.geugf-contact-detail {
    display: flex;

    align-items: center;

    gap: 14px;

    padding: 13px 14px;

    border-radius: 15px;

    background: #f6faf7;

    border: 1px solid #e7f0eb;

    transition: 0.2s ease;
}


.geugf-contact-detail:hover {
    transform: translateX(3px);

    border-color: #d9a321;

    background: #ffffff;
}


.geugf-contact-detail-icon {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    border-radius: 12px;

    background: #eaf5ef;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 17px;
}


.geugf-contact-detail strong {
    display: block;

    font-family: "DM Sans", sans-serif;

    font-size: 13px;

    font-weight: 700;

    color: #073f4d;

    margin-bottom: 2px;
}


.geugf-contact-detail a,
.geugf-contact-detail span {
    display: block;

    font-family: "DM Sans", sans-serif;

    font-size: 13px;

    color: #6a8586;

    text-decoration: none;

    line-height: 1.4;
}


.geugf-contact-detail a:hover {
    color: #d49c17;
}


/* FOOTER */

.geugf-contact-footer {
    margin-top: 18px;

    padding-top: 14px;

    border-top: 1px solid #e7eeee;

    font-family: "DM Sans", sans-serif;

    font-size: 11px;

    color: #8a9b9b;

    text-align: center;
}


/* MOBILE */

@media (max-width: 600px) {

    .geugf-contact-panel {
        position: fixed;

        top: 85px;

        right: 15px;
        left: 15px;

        width: auto;

        max-width: 360px;

        margin-left: auto;
        margin-right: auto;
    }

}
/* =========================================================
   GEUGF CINEMATIC EVA STORY
   WOMEN HEALTH — ANIME JOURNAL EXPERIENCE
========================================================= */


/* ---------------------------------------------------------
   STORY WINDOW
--------------------------------------------------------- */

.story-screen {
    grid-template-columns: 0.92fr 1.08fr !important;
}


/* ---------------------------------------------------------
   LEFT CINEMATIC SCENE
--------------------------------------------------------- */

.story-visual {
    position: relative !important;

    background:
        linear-gradient(
            180deg,
            #dff2e3 0%,
            #d3ead9 45%,
            #c4dfcc 100%
        ) !important;

    overflow: hidden !important;
}


/* cinematic sky */

.cinema-sky {
    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(255,255,255,0.95),
            rgba(255,255,255,0.35) 35%,
            transparent 65%
        );

    animation:
        skyBreathing 7s ease-in-out infinite;

    pointer-events: none;
}


/* soft glow behind Eva */

.story-glow {
    width: 430px !important;
    height: 430px !important;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.95),
            rgba(255,255,255,0.55) 30%,
            rgba(190,225,198,0.2) 60%,
            transparent 72%
        ) !important;

    filter: blur(8px) !important;

    animation:
        cinematicGlow 5s ease-in-out infinite !important;
}


/* ---------------------------------------------------------
   REMOVE FLOWER
--------------------------------------------------------- */

.story-emoji {
    display: none !important;
}


/* ---------------------------------------------------------
   EVA — CENTER OF THE SCENE
--------------------------------------------------------- */

.cinematic-eva {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    bottom: auto !important;

    transform:
        translate(-50%, -50%) !important;

    z-index: 50 !important;

    animation:
        evaCinematicFloat 4s ease-in-out infinite !important;

    filter:
        drop-shadow(
            0 22px 25px rgba(40,90,55,0.18)
        );
}


/* head */

.cinematic-eva .story-eva-head {
    width: 118px !important;
    height: 118px !important;

    background:
        linear-gradient(
            145deg,
            #f8d9ba,
            #efc39f
        ) !important;

    border:
        3px solid #d5a52a !important;

    box-shadow:
        0 15px 35px rgba(80,70,45,0.14);
}


/* hair */

.cinematic-eva .story-eva-head::before {
    left: -9px !important;
    right: -9px !important;

    top: -25px !important;

    height: 65px !important;

    background:
        linear-gradient(
            145deg,
            #4b3029,
            #2d211e
        ) !important;
}


/* eyes */

.cinematic-eva .story-eye {
    top: 45px !important;

    width: 11px !important;
    height: 16px !important;

    background: #073f4d !important;

    transition:
        height .15s ease;
}


/* blush */

.story-blush {
    position: absolute;

    top: 61px;

    width: 19px;
    height: 9px;

    border-radius: 50%;

    background:
        rgba(238,116,126,0.28);

    filter: blur(2px);
}

.story-blush.left {
    left: 17px;
}

.story-blush.right {
    right: 17px;
}


/* mouth */

.cinematic-eva .story-smile {
    bottom: 25px !important;

    width: 27px !important;
    height: 13px !important;

    border-bottom:
        4px solid #073f4d !important;

    transition:
        height .12s ease,
        border-radius .12s ease;
}


/* Eva body */

.cinematic-eva .story-eva-body {
    width: 125px !important;
    height: 135px !important;

    margin-top: -4px !important;

    border-radius:
        55px 55px 24px 24px !important;

    background:
        linear-gradient(
            160deg,
            #83bd89,
            #4d8b60
        ) !important;

    box-shadow:
        0 18px 35px rgba(50,100,60,0.20);
}


/* ---------------------------------------------------------
   EVA SPEAKING ANIMATION
--------------------------------------------------------- */

.cinematic-eva.speaking .story-smile {

    animation:
        evaMouthTalk .24s ease-in-out infinite alternate;

}

.cinematic-eva.speaking .story-eva-head {

    animation:
        evaHeadTalk .7s ease-in-out infinite alternate;

}


/* ---------------------------------------------------------
   CINEMATIC PARTICLES
--------------------------------------------------------- */

.scene-particle {

    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: rgba(255,255,255,0.8);

    box-shadow:
        0 0 15px rgba(255,255,255,0.9);

    animation:
        particleFloat 5s ease-in-out infinite;
}

.particle-one {
    left: 18%;
    top: 25%;
}

.particle-two {
    right: 20%;
    top: 34%;

    animation-delay: 1s;
}

.particle-three {
    left: 27%;
    bottom: 25%;

    animation-delay: 2s;
}

.particle-four {
    right: 28%;
    bottom: 20%;

    animation-delay: 3s;
}


/* ---------------------------------------------------------
   CINEMATIC CAPTION
--------------------------------------------------------- */

.scene-caption {

    position: absolute;

    left: 50%;
    bottom: 42px;

    transform:
        translateX(-50%);

    padding:
        8px 17px;

    border-radius: 20px;

    background:
        rgba(7,63,77,0.82);

    color: white;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3px;

    white-space: nowrap;

    z-index: 70;

    backdrop-filter: blur(8px);
}


/* ---------------------------------------------------------
   MOVE STORY CONTENT UP
--------------------------------------------------------- */

.cinematic-story-text {

    justify-content:
        flex-start !important;

    padding:
        48px 60px 45px !important;

}


/* title */

.cinematic-story-text h2 {

    margin-bottom:
        13px !important;

    font-size:
        clamp(38px, 4.3vw, 58px) !important;

}


/* progress */

.cinematic-story-text .story-progress {

    margin-bottom:
        12px !important;

}


/* ---------------------------------------------------------
   CHAPTER LABEL
--------------------------------------------------------- */

.story-chapter {

    color:
        #71907b;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        3px;

    margin-bottom:
        15px;

    text-transform:
        uppercase;
}


/* ---------------------------------------------------------
   EVA SPEAKING AREA
--------------------------------------------------------- */

.eva-speaking-area {

    position: relative;

    min-height:
        180px;

    padding:
        22px 25px 22px;

    border-radius:
        20px;

    background:
        linear-gradient(
            145deg,
            #f7fbf7,
            #edf6ef
        );

    border:
        1px solid rgba(111,160,120,0.18);

    box-shadow:
        0 12px 30px rgba(40,90,60,0.06);

    margin-top:
        5px;

}


/* speaking label */

.speaking-label {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        #4f8160;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        2px;

    margin-bottom:
        12px;

}


/* green speaking dot */

.speaking-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #58a873;

    box-shadow:
        0 0 0 5px rgba(88,168,115,0.12);

    animation:
        speakingPulse 1.2s infinite;
}


/* actual typed narration */

#storyDescription {

    margin:
        0 !important;

    color:
        #385a63 !important;

    font-size:
        16px !important;

    line-height:
        1.85 !important;

    min-height:
        115px;

}


/* typing cursor */

.typing-cursor {

    display:
        inline-block;

    color:
        #d19c1e;

    font-weight:
        700;

    animation:
        cursorBlink .7s infinite;

}


/* ---------------------------------------------------------
   ACTION / SOLUTION PANEL
--------------------------------------------------------- */

.story-note {

    margin:
        16px 0 !important;

    padding:
        14px 18px !important;

    border-left:
        4px solid #72a477 !important;

}


/* ---------------------------------------------------------
   FINAL SOLUTION STATE
--------------------------------------------------------- */

.story-screen.solution-scene
.story-visual {

    background:
        linear-gradient(
            180deg,
            #e9f6df,
            #d2e9c9
        ) !important;

}


.story-screen.solution-scene
.story-note {

    background:
        linear-gradient(
            135deg,
            #edf8eb,
            #e1f1df
        ) !important;

    border-left-color:
        #57966a !important;

}


/* ---------------------------------------------------------
   FILM TRANSITION
--------------------------------------------------------- */

.story-screen.scene-changing
.story-visual {

    animation:
        sceneFade .55s ease;

}

.story-screen.scene-changing
.story-text {

    animation:
        dialogueFade .55s ease;

}


/* ---------------------------------------------------------
   ANIMATIONS
--------------------------------------------------------- */

@keyframes skyBreathing {

    0%,100% {
        transform: scale(1);
        opacity: .8;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }

}


@keyframes cinematicGlow {

    0%,100% {
        transform: scale(.92);
        opacity: .65;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }

}


@keyframes evaCinematicFloat {

    0%,100% {
        transform:
            translate(-50%, -50%)
            translateY(0);
    }

    50% {
        transform:
            translate(-50%, -50%)
            translateY(-9px);
    }

}


@keyframes evaMouthTalk {

    from {
        height: 7px;
        border-radius: 50%;
    }

    to {
        height: 15px;
        border-radius: 40%;
    }

}


@keyframes evaHeadTalk {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-2px);
    }

}


@keyframes speakingPulse {

    0%,100% {
        opacity: .45;
        transform: scale(.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }

}


@keyframes cursorBlink {

    0%,50% {
        opacity: 1;
    }

    51%,100% {
        opacity: 0;
    }

}


@keyframes particleFloat {

    0%,100% {
        transform:
            translateY(0)
            scale(.8);

        opacity: .3;
    }

    50% {
        transform:
            translateY(-35px)
            scale(1.2);

        opacity: .9;
    }

}


@keyframes sceneFade {

    0% {
        opacity: .25;
        transform: scale(1.03);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }

}


@keyframes dialogueFade {

    0% {
        opacity: .1;
        transform: translateY(12px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    .cinematic-story-text {

        padding:
            30px 22px 35px !important;

    }

    .eva-speaking-area {

        min-height:
            190px;

    }

    #storyDescription {

        font-size:
            15px !important;

    }

    .cinematic-eva .story-eva-head {

        width:
            90px !important;

        height:
            90px !important;

    }

    .cinematic-eva .story-eva-body {

        width:
            98px !important;

        height:
            105px !important;

    }

    .scene-caption {

        bottom:
            25px;

    }

}
/* =========================================================
   EVO WELCOME VIDEO
   ========================================================= */

.welcome-evo-video {
    position: relative;
    width: 100%;
    max-width: 620px;
    height: 650px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    background: transparent;
}

.welcome-evo-video video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: block;
    background: transparent;
    border: none;
    outline: none;
}

/* Desktop */
@media (min-width: 1200px) {
    .welcome-evo-video {
        max-width: 680px;
        height: 700px;
    }
}

/* Tablet */
@media (max-width: 991px) {
    .welcome-evo-video {
        max-width: 520px;
        height: 560px;
        margin: 0 auto;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .welcome-evo-video {
        width: 100%;
        height: 480px;
    }
}
.grandevo-logo-title {
    display: inline-flex;
    align-items: flex-end;
    white-space: nowrap;
    height: 115px;
}

.grandevo-text {
    font-family: "Playfair Display", serif;
    font-size: clamp(68px, 7.2vw, 108px);
    line-height: .9;
    font-weight: 700;
    letter-spacing: -2px;
    color: #064c5b;
}

.grandevo-evo {
    position: relative;
    display: inline-block;
    width: 95px;
    height: 115px;
    margin-left: -2px;
    overflow: visible;
}

.grandevo-evo img {
    position: absolute;
    width: 125px;
    height: 125px;
    object-fit: contain;
    left: 50%;
    bottom: -2px;
    transform: translateX(-50%);
}

.grandevo-logo-title + h2 {
    margin-top: 5px;
    font-size: clamp(28px, 3vw, 43px);
    line-height: 1.05;
    font-weight: 700;
    color: #064c5b;
}/* =========================================================
   GRANDEVO HERO - EVO SITTING ON THE "E"
   ========================================================= */

.grand-evo-title {
    position: relative;
    display: inline-block;
    width: fit-content;
    margin: 0;
}

.grand-evo-title h1 {
    position: relative;
    margin: 0;
    font-size: clamp(78px, 7vw, 132px);
    line-height: 0.95;
    font-weight: 800;
    letter-spacing: -4px;
    color: #063f4c;
    z-index: 2;
}

/* Evo sits naturally over the E */
.evo-on-grand-evo {
    position: absolute;

    left: 61%;
    top: -35px;

    width: 82px;
    height: auto;

    object-fit: contain;

    z-index: 5;
    pointer-events: none;

    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.12));

    transform: rotate(-3deg);
}

/* FOUNDATION NAME */
.hero-content > h2 {
    margin-top: 10px;
    margin-bottom: 28px;

    font-size: clamp(34px, 3vw, 54px);
    line-height: 1.05;

    font-weight: 700;
    color: #063f4c;

    letter-spacing: -1px;
}


/* RESPONSIVE */
@media (max-width: 1100px) {

    .grand-evo-title h1 {
        font-size: 90px;
    }

    .evo-on-grand-evo {
        width: 105px;
        left: 64%;
        top: -24px;
    }

    .hero-content > h2 {
        font-size: 40px;
    }
}


@media (max-width: 768px) {

    .grand-evo-title h1 {
        font-size: 70px;
        letter-spacing: -2px;
    }

    .evo-on-grand-evo {
        width: 85px;
        left: 64%;
        top: -20px;
    }

    .hero-content > h2 {
        font-size: 32px;
        margin-top: 12px;
    }
}


@media (max-width: 500px) {

    .grand-evo-title h1 {
        font-size: 52px;
    }

    .evo-on-grand-evo {
        width: 65px;
        left: 65%;
        top: -15px;
    }

    .hero-content > h2 {
        font-size: 26px;
    }
}
/* =========================================================
   GRANDEVO + EVO HERO DESIGN
   Matches the 2nd reference design
   ========================================================= */

.grand-evo-logo {
    position: relative;
    display: inline-block;
    width: fit-content;
    margin: 0;
}

/* LARGE GRANDEVO */
.grand-evo-logo h1 {
    position: relative;
    margin: 0;

    font-size: clamp(90px, 8vw, 145px);
    line-height: 0.9;

    font-weight: 800;
    letter-spacing: -5px;

    color: #063f4c;

    z-index: 1;
}

/* EVO SITTING ON THE E */
.evo-sitting {
    position: absolute;

    /*
       These values are for the sitting pose
       shown in your 2nd reference.
    */
    width: 150px;

    left: 53%;
    top: -58px;

    height: auto;

    z-index: 5;

    object-fit: contain;

    pointer-events: none;

    filter:
        drop-shadow(0 8px 10px rgba(0, 0, 0, 0.12));
}

/* SMALL LEAF BESIDE EVO */
.evo-leaf {
    position: absolute;

    left: 91%;
    top: 70px;

    font-size: 55px;

    z-index: 4;

    transform: rotate(-12deg);

    pointer-events: none;
}

/* UNITED GLOBAL FOUNDATION */
.grand-evo-logo + h2 {
    margin-top: 14px;
    margin-bottom: 28px;

    font-size: clamp(36px, 3.2vw, 55px);

    line-height: 1;

    font-weight: 700;

    letter-spacing: -1.5px;

    color: #063f4c;
}


/* TABLET */
@media (max-width: 1100px) {

    .grand-evo-logo h1 {
        font-size: 95px;
    }

    .evo-sitting {
        width: 125px;
        left: 53%;
        top: -48px;
    }

    .evo-leaf {
        left: 90%;
        top: 55px;
        font-size: 42px;
    }

    .grand-evo-logo + h2 {
        font-size: 40px;
    }
}


/* MOBILE */
@media (max-width: 768px) {

    .grand-evo-logo h1 {
        font-size: 70px;
        letter-spacing: -3px;
    }

    .evo-sitting {
        width: 95px;
        left: 53%;
        top: -38px;
    }

    .evo-leaf {
        left: 88%;
        top: 40px;
        font-size: 32px;
    }

    .grand-evo-logo + h2 {
        font-size: 32px;
    }
}
/* GET INVOLVED - EVO IMAGE */
.gi-character {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gi-evo-image {
    width: 280px;
    height: auto;
    display: block;
    object-fit: contain;
}
/* =========================================================
   PROGRAMS PAGE - HERO SPACING FIX
   ========================================================= */

/* Remove excessive empty space at the top of Programs hero */
.programs-page .programs-hero,
.programs-page .programs-hero-section,
.programs-page .programs-hero-inner {
    min-height: 0 !important;
    height: auto !important;
}

/* Main Programs hero */
.programs-page .programs-hero {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}

/* Keep hero content properly aligned */
.programs-page .programs-hero-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 50px !important;
}

/* Left text area */
.programs-page .programs-hero-content {
    transform: none !important;
    margin-top: 0 !important;
}

/* Programs heading */
.programs-page .programs-hero-content h1 {
    margin-top: 15px !important;
    margin-bottom: 25px !important;
}

/* Small OUR PROGRAMS heading */
.programs-page .programs-hero-content .eyebrow,
.programs-page .programs-eyebrow {
    margin-bottom: 10px !important;
}

/* Description */
.programs-page .programs-hero-content p {
    margin-top: 0 !important;
}

/* Right-side EVO */
.programs-page .programs-hero-character,
.programs-page .programs-hero-image,
.programs-page .programs-character {
    position: relative !important;
    transform: none !important;
    margin-top: 0 !important;
}

/* Main EVO image */
.programs-page .programs-hero-character img,
.programs-page .programs-hero-image img,
.programs-page .programs-character img {
    max-width: 360px !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* =========================================================
   REMOVE EXTRA TOP SPACE CAUSED BY HERO WRAPPER
   ========================================================= */

.programs-page section:first-of-type {
    margin-top: 0 !important;
}

/* If an inner wrapper is creating the giant blank area */
.programs-page .hero,
.programs-page .hero-section {
    margin-top: 0 !important;
    padding-top: 60px !important;
}

/* =========================================================
   FLOATING EVO - KEEP IT SMALL
   ========================================================= */

.programs-page .floating-evo,
.programs-page .evo-floating,
.programs-page .programs-floating-evo {
    width: 95px !important;
    height: auto !important;
}
/* =========================================================
   PROGRAM HERO — BIG EVO ON RIGHT SIDE
   Only changes the main hero Evo position/size.
========================================================= */

.programs-page .program-hero {
    position: relative !important;
    overflow: hidden !important;
}

.programs-page .program-evo {
    position: absolute !important;

    /* RIGHT SIDE — this moves Evo into the empty area */
    right: 6% !important;

    /* vertical position */
    top: 25px !important;

    /* large Evo area */
    width: 520px !important;
    height: 620px !important;

    z-index: 10 !important;
}

/* Supplied full-body Evo image */
.programs-page .program-evo .evo-character {
    position: absolute !important;

    width: 520px !important;
    height: 620px !important;

    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    bottom: auto !important;

    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;

    z-index: 10 !important;

    animation: none !important;
}

/* Actual Evo PNG */
.programs-page .program-evo .hero-evo-mascot {
    position: absolute !important;

    width: 520px !important;
    height: 620px !important;

    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    bottom: 0 !important;

    object-fit: contain !important;
    object-position: center bottom !important;

    display: block !important;

    z-index: 20 !important;
}

/* Hide the old CSS-drawn character pieces */
.programs-page .program-evo .evo-hair,
.programs-page .program-evo .evo-face,
.programs-page .program-evo .evo-body,
.programs-page .program-evo .evo-arm {
    display: none !important;
}


/* =========================================================
   DESKTOP — keep Evo in the right half
========================================================= */

@media (min-width: 1200px) {
    .programs-page .program-evo {
        right: 5% !important;
        top: 20px !important;
        width: 540px !important;
        height: 650px !important;
    }

    .programs-page .program-evo .evo-character,
    .programs-page .program-evo .hero-evo-mascot {
        width: 540px !important;
        height: 650px !important;
    }
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) and (min-width: 901px) {
    .programs-page .program-evo {
        right: 2% !important;
        top: 35px !important;
        width: 440px !important;
        height: 540px !important;
    }

    .programs-page .program-evo .evo-character,
    .programs-page .program-evo .hero-evo-mascot {
        width: 440px !important;
        height: 540px !important;
    }
}


/* =========================================================
   MOBILE — don't let Evo cover the text
========================================================= */

@media (max-width: 900px) {
    .programs-page .program-evo {
        position: relative !important;
        right: auto !important;
        top: auto !important;

        width: 280px !important;
        height: 360px !important;

        margin: 20px auto 0 !important;
    }

    .programs-page .program-evo .evo-character,
    .programs-page .program-evo .hero-evo-mascot {
        width: 280px !important;
        height: 360px !important;
    }
}