/* ==================================
   OUR VALUES
=================================== */

.values-section{

    padding:130px 0;

    background:
    linear-gradient(
        135deg,
        rgba(37,167,222,.04),
        rgba(201,221,185,.12)
    );

    overflow:hidden;
}

.values-header{

    text-align:center;

    margin-bottom:80px;
}

.values-tag{

    display:inline-block;

    padding:10px 24px;

    border-radius:50px;

    background:
    rgba(37,167,222,.12);

    color:var(--primary);

    font-weight:600;

    margin-bottom:20px;
}

.values-header h2{

    font-size:3rem;

    color:#1f2937;
}

/* Carousel */

.values-carousel{

    position:relative;

    height:380px;

    display:flex;

    justify-content:center;

    align-items:center;
}

.value-card{

    position:absolute;

    width:420px;

    min-height:260px;

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

    backdrop-filter:blur(15px);

    border-radius:30px;

    padding:40px;

    text-align:center;

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

    transition:
    transform 1s ease,
    opacity 1s ease,
    filter 1s ease;

    cursor:pointer;
}

.value-card h3{

    color:var(--primary);

    font-size:2rem;

    margin-bottom:20px;
}

.value-card p{

    line-height:2;

    color:#555;
}

/* CENTER CARD */

.active-card{

    transform:
    translateX(0)
    scale(1);

    z-index:5;

    opacity:1;

    filter:none;

    box-shadow:
    0 0 30px rgba(37,167,222,.25),
    0 20px 60px rgba(0,0,0,.12);
}

/* LEFT CARD */

.left-card{

    transform:
    translateX(-320px)
    scale(.82);

    opacity:.55;

    filter:blur(3px);

    z-index:2;
}

/* RIGHT CARD */

.right-card{

    transform:
    translateX(320px)
    scale(.82);

    opacity:.55;

    filter:blur(3px);

    z-index:2;
}

.values-carousel:hover .value-card{

    transition:
    transform 1.2s ease,
    opacity 1.2s ease,
    filter 1.2s ease;
}

@media(max-width:992px){

    .value-card{

        width:85%;
    }

    .left-card{

        transform:
        translateX(-120px)
        scale(.75);
    }

    .right-card{

        transform:
        translateX(120px)
        scale(.75);
    }
}

@media(max-width:768px){

    .values-carousel{

        height:300px;
    }

    .value-card{

        width:90%;

        padding:30px;
    }

    .left-card,
    .right-card{

        opacity:.15;
    }

    .values-header h2{

        font-size:2rem;
    }
}




























/*==================================================
                TIMELINE SECTION
==================================================*/

*{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Manrope",sans-serif;

    background:#ffffff;

    color:var(--black);

    overflow-x:hidden;

}


/*==================================================
            TIMELINE SECTION
==================================================*/

.timeline-section{

    position:relative;

    width:100%;

    min-height:100vh;

    overflow:hidden;

    background:#fff;

    padding:110px 0;

}


/*==================================================
            MAIN CONTAINER
==================================================*/

.timeline-container{

    width:min(1450px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:

    34%

    66%;

    align-items:center;

    gap:70px;

    position:relative;

    z-index:5;

}


/*==================================================
            LEFT PANEL
==================================================*/

.timeline-left{

    position:relative;

    z-index:10;

}


/*==================================================
            RIGHT PANEL
==================================================*/

.timeline-right{

    position:relative;

    height:920px;

}


/*==================================================
            BACKGROUND
==================================================*/

.timeline-bg{

    position:absolute;

    inset:0;

    overflow:hidden;

}


/*==================================================
            BLUE GLOWS
==================================================*/

.bg-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(130px);

}

.glow-1{

    width:420px;

    height:420px;

    left:-140px;

    top:-120px;

    background:

    rgba(37,167,222,.14);

}

.glow-2{

    width:520px;

    height:520px;

    right:-180px;

    bottom:-180px;

    background:

    rgba(37,167,222,.10);

}


/*==================================================
        FLOATING PARTICLES
==================================================*/

.floating-particles{

    position:absolute;

    inset:0;

}

.particle{

    position:absolute;

    width:5px;

    height:5px;

    border-radius:50%;

    background:var(--primary);

    box-shadow:

    0 0 8px rgba(37,167,222,.9),

    0 0 18px rgba(37,167,222,.45);

}


/*==================================================
        PARTICLE POSITIONS
==================================================*/

.p1{

    top:12%;

    left:10%;

}

.p2{

    top:18%;

    left:35%;

}

.p3{

    top:28%;

    right:15%;

}

.p4{

    top:55%;

    left:12%;

}

.p5{

    top:70%;

    left:48%;

}

.p6{

    bottom:20%;

    right:18%;

}

.p7{

    bottom:12%;

    left:18%;

}

.p8{

    top:8%;

    right:32%;

}


/*==================================================
            SECTION TAG
==================================================*/

.section-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:2.5px;

    text-transform:uppercase;

    color:var(--primary);

    margin-bottom:28px;

}

.section-tag::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--primary);

}


/*==================================================
        INITIAL ANIMATION STATE
==================================================*/

.timeline-left,

.timeline-right{

    opacity:0;

    transform:translateY(40px);

}
/*==================================================
            HEADING
==================================================*/

.timeline-heading{

    font-family:"Cormorant Garamond",serif;

    font-size:5.6rem;

    line-height:.92;

    font-weight:600;

    letter-spacing:-2px;

    color:#151515;

    margin-bottom:30px;

    max-width:580px;

}


/*==================================================
            DESCRIPTION
==================================================*/

.timeline-description{

    max-width:470px;

    color:#6C7280;

    font-size:1.05rem;

    line-height:2;

    margin-bottom:70px;

}


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

.timeline-navigation{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:28px;

}


/*==================================================
        VERTICAL LINE
==================================================*/

.timeline-line{

    position:relative;

    width:2px;

    height:540px;

    background:#E8EEF4;

    border-radius:50px;

    margin-left:12px;

    flex-shrink:0;

}


.timeline-progress{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:78px;

    border-radius:50px;

    background:linear-gradient(

        180deg,

        #25A7DE,

        #8DDCFF

    );

    transition:

    height .65s cubic-bezier(.19,1,.22,1);

}


/*==================================================
        YEARS CONTAINER
==================================================*/

.timeline-years{

    display:flex;

    flex-direction:column;

    gap:18px;

}


/*==================================================
        TIMELINE ITEM
==================================================*/

.timeline-item{

    position:relative;

    width:320px;

    min-height:74px;

    display:flex;

    align-items:center;

    gap:18px;

    background:transparent;

    border:none;

    cursor:pointer;

    text-align:left;

    padding:16px 20px;

    border-radius:22px;

    transition:

    all .45s cubic-bezier(.19,1,.22,1);

}


/*==================================================
            YEAR DOT
==================================================*/

.year-dot{

    width:14px;

    height:14px;

    border-radius:50%;

    background:#fff;

    border:2px solid #D5DEE6;

    flex-shrink:0;

    transition:.45s;

}


/*==================================================
        YEAR CONTENT
==================================================*/

.year-content{

    flex:1;

}

.year-content h4{

    font-size:1.08rem;

    font-weight:700;

    color:#151515;

    margin-bottom:4px;

}

.year-content p{

    font-size:.92rem;

    color:#8A9098;

    line-height:1.5;

}


/*==================================================
            ARROW
==================================================*/

.timeline-item i{

    font-size:1.15rem;

    color:#25A7DE;

    opacity:0;

    transform:translateX(-8px);

    transition:.45s;

}


/*==================================================
            ACTIVE ITEM
==================================================*/

.timeline-item.active{

    background:#F5FBFF;

    box-shadow:

        0 18px 45px rgba(37,167,222,.10);

}


.timeline-item.active .year-dot{

    background:#25A7DE;

    border-color:#25A7DE;

    box-shadow:

        0 0 0 7px rgba(37,167,222,.12);

}


.timeline-item.active h4{

    color:#25A7DE;

}


.timeline-item.active i{

    opacity:1;

    transform:translateX(0);

}


/*==================================================
            HOVER
==================================================*/

.timeline-item:hover{

    transform:translateX(8px);

}


.timeline-item:hover .year-dot{

    border-color:#25A7DE;

}


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

@media(max-width:1200px){

    .timeline-heading{

        font-size:4.5rem;

    }

}

@media(max-width:992px){

    .timeline-container{

        grid-template-columns:1fr;

        gap:80px;

    }

    .timeline-line{

        height:470px;

    }

}

@media(max-width:768px){

    .timeline-heading{

        font-size:3.5rem;

    }

    .timeline-item{

        width:100%;

    }

}
/*==================================================
            RIGHT PANEL
==================================================*/

.timeline-right{

    position:relative;

    width:100%;

    height:920px;

}


/*==================================================
            ORBIT WRAPPER
==================================================*/

.orbit-wrapper{

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:1;

}

.orbit-svg{

    position:absolute;

    width:820px;

    height:820px;

    right:-120px;

    top:-10px;

    overflow:visible;

}


/*==================================================
            ORBIT GLOW
==================================================*/

.orbit-glow{

    position:absolute;

    width:320px;

    height:320px;

    right:120px;

    top:260px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(37,167,222,.22),

        rgba(37,167,222,.08),

        transparent 75%

    );

    filter:blur(90px);

    z-index:0;

}


/*==================================================
            IMAGE CARD
==================================================*/

.timeline-image-card{

    position:absolute;

    top:20px;

    right:70px;

    width:610px;

    height:700px;

    border-radius:34px;

    overflow:hidden;

    background:#ffffff;

    box-shadow:

        0 45px 90px rgba(0,0,0,.10);

    z-index:5;

    transition:

        transform .7s cubic-bezier(.19,1,.22,1),

        box-shadow .6s ease;

}


/*==================================================
        IMAGE
==================================================*/

.timeline-image-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:

        transform .8s ease,

        opacity .45s ease;

}


.timeline-image-card:hover{

    transform:translateY(-10px);

    box-shadow:

        0 60px 120px rgba(0,0,0,.14);

}


.timeline-image-card:hover img{

    transform:scale(1.05);

}


/*==================================================
            TOP HIGHLIGHT
==================================================*/

.timeline-image-card::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:2;

    pointer-events:none;

    border-radius:inherit;

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

}


.timeline-image-card::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:0;

    height:180px;

    background:linear-gradient(

        rgba(255,255,255,.12),

        transparent

    );

    z-index:2;

}


/*==================================================
            FLOATING RING
==================================================*/

.floating-ring{

    position:absolute;

    right:10px;

    top:150px;

    width:120px;

    height:120px;

    z-index:8;

}


.floating-ring span{

    position:absolute;

    inset:0;

    border-radius:50%;

    border:2px solid rgba(37,167,222,.18);

    backdrop-filter:blur(6px);

}


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

@media(max-width:1400px){

    .timeline-image-card{

        width:540px;

        height:630px;

    }

}


@media(max-width:1200px){

    .timeline-right{

        height:760px;

    }

    .timeline-image-card{

        position:relative;

        right:auto;

        margin:auto;

    }

}


@media(max-width:768px){

    .timeline-right{

        height:auto;

    }

    .timeline-image-card{

        width:100%;

        height:500px;

    }

}
/*==================================================
            CONTENT CARD
==================================================*/

.timeline-content-card{

    position:absolute;

    left:40px;

    bottom:20px;

    width:560px;

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-radius:30px;

    padding:38px;

    border:1px solid rgba(37,167,222,.10);

    box-shadow:
        0 30px 70px rgba(0,0,0,.08);

    z-index:12;

    transition:
        transform .45s ease,
        box-shadow .45s ease;

}

.timeline-content-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 45px 90px rgba(0,0,0,.12);

}


/*==================================================
            YEAR BADGE
==================================================*/

.timeline-year{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:90px;

    height:40px;

    padding:0 20px;

    border-radius:999px;

    background:#25A7DE;

    color:#ffffff;

    font-size:.9rem;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:22px;

    box-shadow:
        0 10px 25px rgba(37,167,222,.25);

}


/*==================================================
            TITLE
==================================================*/

.timeline-content-card h3{

    font-family:"Cormorant Garamond",serif;

    font-size:2.5rem;

    line-height:1.1;

    font-weight:600;

    color:#111111;

    margin-bottom:22px;

}


/*==================================================
            DESCRIPTION
==================================================*/

.timeline-content-card p{

    color:#666666;

    font-size:1rem;

    line-height:1.9;

    margin-bottom:34px;

}


/*==================================================
            STATS GRID
==================================================*/

.timeline-stats{

    display:grid;

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

    gap:18px;

}


/*==================================================
            STAT BOX
==================================================*/

.stat-box{

    position:relative;

    background:#F8FCFF;

    border:1px solid rgba(37,167,222,.08);

    border-radius:20px;

    padding:24px 20px;

    text-align:center;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.stat-box:hover{

    transform:translateY(-6px);

    border-color:#25A7DE;

    box-shadow:
        0 18px 40px rgba(37,167,222,.14);

}


/*==================================================
            NUMBER
==================================================*/

.stat-box h4{

    font-size:2rem;

    font-weight:800;

    color:#25A7DE;

    margin-bottom:8px;

}


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

.stat-box span{

    display:block;

    font-size:.9rem;

    color:#7A7A7A;

    font-weight:600;

    letter-spacing:.3px;

}


/*==================================================
            TOP ACCENT
==================================================*/

.stat-box::before{

    content:"";

    position:absolute;

    left:18px;

    right:18px;

    top:0;

    height:3px;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        #25A7DE,
        #8EDFFF
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .4s ease;

}

.stat-box:hover::before{

    transform:scaleX(1);

}


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

@media(max-width:1200px){

    .timeline-content-card{

        position:relative;

        left:auto;

        bottom:auto;

        margin:40px auto 0;

        width:90%;

    }

}

@media(max-width:768px){

    .timeline-content-card{

        width:100%;

        padding:28px;

    }

    .timeline-content-card h3{

        font-size:2rem;

    }

    .timeline-stats{

        grid-template-columns:1fr;

    }

}
/*==================================================
            ORBIT ANIMATION
==================================================*/

.orbit-svg path{

    stroke-dasharray:1200;

    stroke-dashoffset:1200;

    animation:

        orbitDraw 3s ease forwards,

        orbitGlow 6s linear infinite;

}

@keyframes orbitDraw{

    to{

        stroke-dashoffset:0;

    }

}

@keyframes orbitGlow{

    0%{

        filter:drop-shadow(0 0 0px rgba(37,167,222,.15));

    }

    50%{

        filter:drop-shadow(0 0 16px rgba(37,167,222,.65));

    }

    100%{

        filter:drop-shadow(0 0 0px rgba(37,167,222,.15));

    }

}


/*==================================================
            FLOATING IMAGE
==================================================*/

.timeline-image-card{

    animation:

        floatingImage 8s ease-in-out infinite;

}

@keyframes floatingImage{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}


/*==================================================
            FLOATING CONTENT
==================================================*/

.timeline-content-card{

    animation:

        floatingCard 7s ease-in-out infinite;

}

@keyframes floatingCard{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(8px);

    }

    100%{

        transform:translateY(0);

    }

}


/*==================================================
            PARTICLES
==================================================*/

.particle{

    animation:

        sparkle 5s linear infinite;

}

.p1{animation-delay:0s;}
.p2{animation-delay:1s;}
.p3{animation-delay:2s;}
.p4{animation-delay:3s;}
.p5{animation-delay:1.5s;}
.p6{animation-delay:2.5s;}
.p7{animation-delay:4s;}
.p8{animation-delay:5s;}

@keyframes sparkle{

    0%{

        transform:translateY(0) scale(1);

        opacity:.2;

    }

    50%{

        transform:translateY(-18px) scale(1.7);

        opacity:1;

    }

    100%{

        transform:translateY(-36px) scale(.5);

        opacity:0;

    }

}


/*==================================================
            GLOW PULSE
==================================================*/

.orbit-glow{

    animation:

        glowPulse 5s ease-in-out infinite;

}

@keyframes glowPulse{

    0%{

        opacity:.35;

        transform:scale(1);

    }

    50%{

        opacity:.75;

        transform:scale(1.08);

    }

    100%{

        opacity:.35;

        transform:scale(1);

    }

}


/*==================================================
            IMAGE TRANSITION
==================================================*/

.timeline-image-card img{

    will-change:transform,opacity;

}


/*==================================================
            CONTENT FADE
==================================================*/

.timeline-year,
.timeline-content-card h3,
.timeline-content-card p,
.timeline-stats{

    transition:

        opacity .45s ease,

        transform .45s ease;

}


/*==================================================
            PREMIUM HOVER
==================================================*/

.timeline-item:hover{

    background:#FAFDFF;

}

.timeline-item:hover .year-dot{

    box-shadow:

        0 0 0 6px rgba(37,167,222,.10);

}

.timeline-item:hover h4{

    color:#25A7DE;

}


/*==================================================
            IMAGE SHINE
==================================================*/

.timeline-image-card::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-30%;

    width:35%;

    height:250%;

    background:

        linear-gradient(

        rgba(255,255,255,0),

        rgba(255,255,255,.45),

        rgba(255,255,255,0)

    );

    transform:rotate(25deg);

    animation:imageShine 8s infinite;

    z-index:10;

}

@keyframes imageShine{

    0%{

        left:-40%;

    }

    100%{

        left:140%;

    }

}


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

.timeline-left.show,
.timeline-right.show{

    opacity:1;

    transform:translateY(0);

    transition:

        all 1s cubic-bezier(.19,1,.22,1);

}
/*==================================================
            ACCESSIBILITY
==================================================*/

.timeline-item:focus-visible{

    outline:3px solid rgba(37,167,222,.35);

    outline-offset:5px;

}

.hero-btn:focus-visible{

    outline:3px solid rgba(37,167,222,.35);

    outline-offset:6px;

}


/*==================================================
        IMAGE LOADING ANIMATION
==================================================*/

.timeline-image-card.loading img{

    opacity:.2;

    transform:scale(1.08);

    filter:blur(8px);

}

.timeline-image-card.loaded img{

    opacity:1;

    transform:scale(1);

    filter:blur(0);

}


/*==================================================
        CONTENT SWITCH ANIMATION
==================================================*/

.timeline-content-card.changing{

    opacity:0;

    transform:translateY(18px);

}

.timeline-content-card.ready{

    opacity:1;

    transform:translateY(0);

}


/*==================================================
            ACTIVE YEAR SCALE
==================================================*/

.timeline-item.active{

    transform:translateX(10px) scale(1.02);

}


/*==================================================
        HOVER MICRO INTERACTION
==================================================*/

.timeline-item{

    will-change:transform;

}

.timeline-image-card{

    will-change:transform;

}

.timeline-content-card{

    will-change:transform;

}


/*==================================================
        SMOOTH TRANSITIONS
==================================================*/

.timeline-item,
.timeline-content-card,
.timeline-image-card,
.stat-box,
.timeline-year,
.timeline-heading,
.timeline-description{

    transition:

        all .45s cubic-bezier(.19,1,.22,1);

}


/*==================================================
            CUSTOM SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#F4F7FA;

}

::-webkit-scrollbar-thumb{

    background:#25A7DE;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#118CC3;

}


/*==================================================
        LARGE DESKTOP
==================================================*/

@media (min-width:1600px){

    .timeline-container{

        width:1500px;

    }

}


/*==================================================
        TABLET
==================================================*/

@media (max-width:992px){

    .timeline-section{

        padding:80px 0;

    }

    .timeline-right{

        height:auto;

    }

    .timeline-content-card{

        margin-top:40px;

    }

}


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

@media (max-width:768px){

    .timeline-section{

        padding:60px 20px;

    }

    .timeline-heading{

        font-size:3rem;

        line-height:1;

    }

    .timeline-description{

        margin-bottom:40px;

    }

    .timeline-line{

        display:none;

    }

    .timeline-years{

        width:100%;

    }

    .timeline-item{

        width:100%;

        padding:16px;

    }

    .timeline-image-card{

        height:420px;

    }

    .timeline-content-card{

        padding:24px;

    }

    .timeline-content-card h3{

        font-size:2rem;

    }

}


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

@media (max-width:480px){

    .timeline-heading{

        font-size:2.4rem;

    }

    .timeline-image-card{

        height:320px;

        border-radius:24px;

    }

    .timeline-content-card{

        border-radius:24px;

    }

    .timeline-year{

        min-width:70px;

        height:34px;

        font-size:.8rem;

    }

}


/*==================================================
        REDUCED MOTION
==================================================*/

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}















/*==================================================
               TRUSTEE SECTION
==================================================*/

.trustees-section{

    position:relative;

    width:100%;

    padding:140px 0;

    overflow:hidden;

    background:#ffffff;

}


/*==================================================
                CONTAINER
==================================================*/

.trustees-container{

    width:min(1400px,92%);

    margin:auto;

    position:relative;

    z-index:5;

}


/*==================================================
                BACKGROUND
==================================================*/

.trustees-bg{

    position:absolute;

    inset:0;

    overflow:hidden;

}


/*==================================================
            LEFT HALF CIRCLE
==================================================*/

.bg-circle{

    position:absolute;

    left:-240px;

    top:260px;

    width:520px;

    height:520px;

    border-radius:50%;

    border:2px solid rgba(37,167,222,.08);

}


/*==================================================
                RIGHT ORBIT
==================================================*/

.bg-orbit{

    position:absolute;

    right:-130px;

    top:90px;

    width:540px;

    height:540px;

}

.bg-orbit svg{

    width:100%;

    height:100%;

}

.bg-orbit circle{

    fill:none;

    stroke:#25A7DE;

    stroke-width:1.4;

    opacity:.18;

    stroke-dasharray:12 12;

}

.orbit-ball{

    position:absolute;

    width:12px;

    height:12px;

    border-radius:50%;

    background:#25A7DE;

    box-shadow:

    0 0 25px rgba(37,167,222,.6);

}


/*==================================================
                GLOW
==================================================*/

.bg-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

}

.glow-1{

    width:360px;

    height:360px;

    left:-120px;

    top:-80px;

    background:rgba(37,167,222,.10);

}

.glow-2{

    width:460px;

    height:460px;

    right:-120px;

    bottom:-180px;

    background:rgba(37,167,222,.08);

}


/*==================================================
                HEADING
==================================================*/

.section-heading{

    text-align:center;

    max-width:850px;

    margin:0 auto 90px;

}


.section-tag{

    display:inline-block;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:3px;

    color:var(--primary);

    text-transform:uppercase;

    margin-bottom:20px;

}


.section-heading h2{

    font-family:'Cormorant Garamond',serif;

    font-size:4.8rem;

    font-weight:600;

    line-height:1;

    color:#151515;

    margin-bottom:35px;

}


.section-heading p{

    max-width:650px;

    margin:auto;

    color:#6B7280;

    line-height:2;

    font-size:1.05rem;

}


/*==================================================
            DIVIDER
==================================================*/

.heading-divider{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    margin-bottom:35px;

}

.heading-divider span{

    width:90px;

    height:2px;

    background:#DDEAF4;

}

.heading-divider i{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#25A7DE;

    box-shadow:

    0 0 18px rgba(37,167,222,.45);

}
/*==================================================
                CARDS WRAPPER
==================================================*/

.trustees-wrapper{

    display:grid;

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

    gap:34px;

    align-items:stretch;

    position:relative;

}


/*==================================================
                TRUSTEE CARD
==================================================*/

.trustee-card{

    position:relative;

    background:#ffffff;

    border-radius:34px;

    overflow:hidden;

    border:1px solid rgba(37,167,222,.08);

    box-shadow:

        0 25px 60px rgba(0,0,0,.07);

    transition:

        transform .45s cubic-bezier(.19,1,.22,1),

        box-shadow .45s ease,

        border-color .45s ease;

}


/*==================================================
                IMAGE
==================================================*/

.card-image{

    position:relative;

    width:100%;

    height:340px;

    overflow:hidden;

    background:#F8FCFF;

}

.card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:

        transform .8s ease;

}


/*==================================================
                CONTENT
==================================================*/

.card-content{

    position:relative;

    padding:36px 34px 24px;

}


/*==================================================
            QUOTE ICON
==================================================*/

.quote-icon{

    width:58px;

    height:58px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#EAF8FF;

    color:#25A7DE;

    font-size:1.5rem;

    margin-bottom:28px;

}


/*==================================================
            MESSAGE
==================================================*/

.card-content blockquote{

    font-family:"Cormorant Garamond",serif;

    font-size:1.45rem;

    line-height:1.65;

    font-weight:500;

    color:#222222;

    font-style:normal;

    min-height:175px;

}


/*==================================================
            BLUE LINE
==================================================*/

.quote-line{

    width:90px;

    height:3px;

    border-radius:20px;

    margin-top:28px;

    background:linear-gradient(

        90deg,

        #25A7DE,

        #8FDFFF

    );

}


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

.card-footer{

    padding:

        0 34px

        36px;

}


/*==================================================
            NAME
==================================================*/

.card-footer h3{

    font-size:1.45rem;

    font-weight:700;

    color:#151515;

    margin-bottom:8px;

}


/*==================================================
        DESIGNATION
==================================================*/

.card-footer span{

    font-size:.95rem;

    color:#25A7DE;

    font-weight:600;

    letter-spacing:.5px;

}


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

@media(max-width:1200px){

    .trustees-wrapper{

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

    }

}


@media(max-width:768px){

    .trustees-wrapper{

        grid-template-columns:1fr;

    }

    .card-image{

        height:300px;

    }

    .card-content blockquote{

        min-height:auto;

    }

}
/*==================================================
            PREMIUM CARD HOVER
==================================================*/

.trustee-card{

    transform:translateY(0);

    transition:

        transform .55s cubic-bezier(.19,1,.22,1),

        box-shadow .55s ease,

        border-color .55s ease;

}

.trustee-card:hover{

    transform:translateY(-18px);

    border-color:rgba(37,167,222,.20);

    box-shadow:

        0 25px 50px rgba(37,167,222,.08),

        0 50px 120px rgba(0,0,0,.12);

}


/*==================================================
                IMAGE ZOOM
==================================================*/

.trustee-card:hover .card-image img{

    transform:scale(1.08);

}


/*==================================================
            IMAGE OVERLAY
==================================================*/

.card-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        180deg,

        rgba(255,255,255,0),

        rgba(255,255,255,.10),

        rgba(0,0,0,.10)

    );

    pointer-events:none;

}


/*==================================================
            SHINE EFFECT
==================================================*/

.card-image::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-60%;

    width:35%;

    height:260%;

    background:

    linear-gradient(

        rgba(255,255,255,0),

        rgba(255,255,255,.55),

        rgba(255,255,255,0)

    );

    transform:rotate(24deg);

    z-index:3;

    transition:left .9s ease;

}

.trustee-card:hover .card-image::before{

    left:150%;

}


/*==================================================
            QUOTE ICON
==================================================*/

.quote-icon{

    transition:

        transform .45s ease,

        box-shadow .45s ease;

}

.trustee-card:hover .quote-icon{

    transform:rotate(12deg) scale(1.08);

    box-shadow:

        0 12px 30px rgba(37,167,222,.25);

}


/*==================================================
            BLUE ACCENT
==================================================*/

.quote-line{

    transition:

        width .45s ease;

}

.trustee-card:hover .quote-line{

    width:140px;

}


/*==================================================
            NAME
==================================================*/

.card-footer h3{

    transition:.35s;

}

.trustee-card:hover .card-footer h3{

    color:#25A7DE;

}


/*==================================================
            GLOW BORDER
==================================================*/

.trustee-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:34px;

    padding:1px;

    background:

    linear-gradient(

        135deg,

        rgba(37,167,222,.28),

        transparent,

        rgba(37,167,222,.18)

    );

    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:0;

    transition:.45s;

    pointer-events:none;

}

.trustee-card:hover::before{

    opacity:1;

}


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

.bg-orbit{

    animation:

        orbitFloat 10s ease-in-out infinite;

}

@keyframes orbitFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}


/*==================================================
            ORBIT BALL
==================================================*/

.orbit-ball{

    top:0;

    left:50%;

    margin-left:-6px;

    animation:

        orbitRotate 14s linear infinite;

    transform-origin:

        0 270px;

}

@keyframes orbitRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/*==================================================
            GLOW PULSE
==================================================*/

.bg-glow{

    animation:

        glowPulse 6s ease-in-out infinite;

}

@keyframes glowPulse{

    0%{

        opacity:.30;

        transform:scale(1);

    }

    50%{

        opacity:.70;

        transform:scale(1.08);

    }

    100%{

        opacity:.30;

        transform:scale(1);

    }

}


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

.section-heading,

.trustee-card{

    opacity:0;

    transform:translateY(40px);

}

.section-heading.show,

.trustee-card.show{

    opacity:1;

    transform:translateY(0);

    transition:

        all .9s cubic-bezier(.19,1,.22,1);

}
/*==================================================
            FLOATING PARTICLES
==================================================*/

.trustees-section::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background-image:

        radial-gradient(circle at 15% 20%, rgba(37,167,222,.12) 0 2px, transparent 3px),

        radial-gradient(circle at 80% 30%, rgba(37,167,222,.10) 0 2px, transparent 3px),

        radial-gradient(circle at 30% 75%, rgba(37,167,222,.10) 0 1.5px, transparent 2px),

        radial-gradient(circle at 70% 85%, rgba(37,167,222,.08) 0 2px, transparent 3px),

        radial-gradient(circle at 90% 60%, rgba(37,167,222,.12) 0 2px, transparent 3px);

    animation:particleFloat 18s linear infinite;

    opacity:.65;

}

@keyframes particleFloat{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-40px);

    }

}


/*==================================================
            CARD SHADOW DEPTH
==================================================*/

.trustee-card{

    isolation:isolate;

}

.trustee-card::after{

    content:"";

    position:absolute;

    left:12%;

    right:12%;

    bottom:-24px;

    height:28px;

    background:rgba(0,0,0,.10);

    filter:blur(20px);

    border-radius:50%;

    z-index:-1;

    opacity:0;

    transition:.45s;

}

.trustee-card:hover::after{

    opacity:1;

}


/*==================================================
            GLASS TOP EDGE
==================================================*/

.trustee-card{

    overflow:hidden;

}

.trustee-card .card-image{

    position:relative;

}

.trustee-card .card-image::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:90px;

    background:linear-gradient(

        rgba(255,255,255,.22),

        transparent

    );

    z-index:2;

}


/*==================================================
            SOFT BLUE BACKLIGHT
==================================================*/

.trustee-card:hover{

    background:

    linear-gradient(

        180deg,

        #ffffff,

        #fbfdff

    );

}


/*==================================================
            TEXT SMOOTHNESS
==================================================*/

.section-heading h2,
.card-footer h3,
blockquote{

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

}


/*==================================================
            IMAGE RADIUS
==================================================*/

.card-image img{

    border-radius:0;

}


/*==================================================
            BUTTON CURSOR
==================================================*/

.trustee-card{

    cursor:default;

}


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

@media(max-width:1100px){

    .section-heading h2{

        font-size:4rem;

    }

    .trustees-wrapper{

        gap:24px;

    }

}


@media(max-width:992px){

    .trustees-section{

        padding:100px 0;

    }

    .section-heading{

        margin-bottom:60px;

    }

}


@media(max-width:768px){

    .section-heading h2{

        font-size:3rem;

    }

    .section-heading p{

        font-size:.95rem;

    }

    .trustee-card{

        border-radius:28px;

    }

    .card-image{

        height:280px;

    }

}


@media(max-width:480px){

    .section-heading h2{

        font-size:2.5rem;

    }

    .card-content{

        padding:28px;

    }

    .card-footer{

        padding:0 28px 28px;

    }

    .card-content blockquote{

        font-size:1.2rem;

        line-height:1.6;

    }

}


/*==================================================
        REDUCED MOTION
==================================================*/

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

    *{

        animation:none!important;

        transition:none!important;

    }

}
/*==================================================
            MICRO INTERACTIONS
==================================================*/

.trustee-card{

    will-change:transform;

    transform-style:preserve-3d;

    backface-visibility:hidden;

}


/*==================================================
            STAGGER DELAY
==================================================*/

.trustee-card:nth-child(1){

    transition-delay:.05s;

}

.trustee-card:nth-child(2){

    transition-delay:.15s;

}

.trustee-card:nth-child(3){

    transition-delay:.25s;

}


/*==================================================
            FLOATING EFFECT
==================================================*/

.trustee-card{

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

}

.trustee-card:nth-child(2){

    animation-delay:1.5s;

}

.trustee-card:nth-child(3){

    animation-delay:3s;

}

@keyframes cardFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}


/*==================================================
            SECTION PARALLAX SUPPORT
==================================================*/

.trustees-section{

    perspective:1400px;

}

.trustees-container{

    transform-style:preserve-3d;

}


/*==================================================
            HOVER LIGHT
==================================================*/

.trustee-card:hover{

    background-image:

    radial-gradient(

        circle at top,

        rgba(37,167,222,.05),

        transparent 65%

    );

}


/*==================================================
            IMAGE SATURATION
==================================================*/

.card-image img{

    filter:saturate(.95);

}

.trustee-card:hover .card-image img{

    filter:saturate(1.05);

}


/*==================================================
            QUOTE ICON GLOW
==================================================*/

.quote-icon{

    position:relative;

    overflow:hidden;

}

.quote-icon::after{

    content:"";

    position:absolute;

    inset:-25%;

    border-radius:50%;

    background:

    radial-gradient(

        rgba(37,167,222,.22),

        transparent 70%

    );

    opacity:0;

    transition:.45s;

}

.trustee-card:hover .quote-icon::after{

    opacity:1;

}


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

.card-footer{

    transition:transform .4s ease;

}

.trustee-card:hover .card-footer{

    transform:translateY(-4px);

}


/*==================================================
            SELECTION COLOR
==================================================*/

::selection{

    background:#25A7DE;

    color:#fff;

}


/*==================================================
            SMOOTH IMAGE CHANGE
==================================================*/

.card-image img{

    image-rendering:auto;

}


/*==================================================
            PERFORMANCE
==================================================*/

.bg-glow,

.bg-orbit,

.orbit-ball,

.trustee-card,

.card-image img{

    will-change:transform;

}


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

@media(max-width:1200px){

    .bg-circle{

        display:none;

    }

    .bg-orbit{

        opacity:.35;

    }

}

@media(max-width:768px){

    .bg-orbit{

        display:none;

    }

    .section-heading{

        margin-bottom:50px;

    }

}


/*==================================================
            PRINT
==================================================*/

@media print{

    .bg-circle,

    .bg-orbit,

    .bg-glow{

        display:none;

    }

}

















/* ================= NAVBAR ================= */
.navbar {
    width: 100%;
    background: var(--cream);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-container {
    width: 90%;
    max-width: 1280px;
    margin: auto;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo img {
    height: 52px;
    width: auto;
    transition: transform 0.3s ease;
}

.logo:hover img {
    transform: scale(1.04);
}

/* Navigation */
.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-links a {
    position: relative;
    text-decoration: none;
    color: var(--sky);
    font-size: 15px;
    font-weight: 500;
    padding: 6px 0;
    transition: all 0.3s ease;
}

/* Hover Glow */
.nav-links a:hover {
    color: var(--sky);
    text-shadow:
        0 0 8px rgba(37,167,222,0.55),
        0 0 16px rgba(37,167,222,0.45),
        0 0 28px rgba(37,167,222,0.35);
    transform: translateY(-1px);
}

/* Active Link */
.nav-links a.active {
    font-weight: 600;
}

.nav-links a.active::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 2.5px;
    background: var(--sky);
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(37,167,222,0.35);
}

/* Mobile Menu */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.menu-toggle span {
    width: 26px;
    height: 2.5px;
    background: var(--sky);
    border-radius: 10px;
    transition: 0.3s;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 992px) {

    .menu-toggle {
        display: flex;
    }

    .nav-links {
        position: absolute;
        top: 78px;
        right: 0;
        width: 100%;
        background: var(--cream);
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 16px 24px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.08);

        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
    }

    .nav-links.open {
        max-height: 420px;
    }

    .nav-links a {
        width: 100%;
        padding: 14px 0;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }

    .nav-links a:last-child {
        border-bottom: none;
    }
}


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

.footer{
    font-family: 'Poppins', sans-serif;
    position: relative;
    background: linear-gradient(180deg, #1F2937 0%, #111827 55%, #0B1220 100%);
    color: var(--text);
    overflow: hidden;
    padding-top: 80px;
    border-top: 1px solid rgba(37,167,222,0.15);
}

/* Subtle background glow */

.footer::before{
    content: "";
    position: absolute;
    top: -140px;
    left: -120px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(37,167,222,0.18) 0%, rgba(37,167,222,0) 70%);
    pointer-events: none;
}

.footer::after{
    content: "";
    position: absolute;
    right: -140px;
    bottom: -160px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(37,167,222,0.12) 0%, rgba(37,167,222,0) 72%);
    pointer-events: none;
}

/* ================= CONTAINER ================= */

.footer-container{
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.25fr 0.9fr 0.9fr 1fr;
    gap: 48px;
    position: relative;
    z-index: 2;
}

/* ================= BRAND ================= */

.footer-brand{
    padding-right: 10px;
}

.footer-logo{
    display: inline-flex;
    align-items: center;
    margin-bottom: 22px;
    text-decoration: none;
}

.footer-logo img{
    height: 62px;
    width: auto;
    filter: drop-shadow(0 6px 18px rgba(37,167,222,0.18));
    transition: transform 0.35s ease, filter 0.35s ease;
}

.footer-logo:hover img{
    transform: translateY(-2px) scale(1.03);
    filter: drop-shadow(0 10px 26px rgba(37,167,222,0.32));
}

.footer-brand p{
    color: #C7CED8;
    font-size: 15px;
    line-height: 1.9;
    max-width: 380px;
    letter-spacing: 0.2px;
}

/* ================= COLUMNS ================= */

.footer-column h3{
    position: relative;
    color: var(--cream);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 22px;
    letter-spacing: 0.4px;
}

.footer-column h3::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 54px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sky), rgba(37,167,222,0.18));
    box-shadow: 0 0 14px rgba(37,167,222,0.28);
}

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

.footer-column li{
    margin-bottom: 14px;
}

.footer-column a{
    position: relative;
    color: #C7CED8;
    text-decoration: none;
    font-size: 15px;
    transition: color 0.28s ease, transform 0.28s ease;
}

/* underline animation base */

.footer-column a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 1.5px;
    background: var(--sky);
    transition: width 0.3s ease;
}

/* ================= CONTACT ================= */

.footer-contact .contact-item{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.footer-contact .contact-item i{
    color: var(--sky);
    font-size: 16px;
    margin-top: 3px;
    width: 18px;
}

.footer-contact .contact-item span{
    color: #C7CED8;
    font-size: 15px;
    line-height: 1.7;
}

/* ================= QUICK LINKS HOVER ================= */

.footer-column a:hover{
    color: var(--cream);
    transform: translateX(6px);
    text-shadow: 0 0 12px rgba(37,167,222,0.22);
}

.footer-column a:hover::after{
    width: 100%;
}

/* ================= SOCIAL ICONS ================= */

.footer-social{
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
}

.footer-social a{
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(248,245,239,0.08);
    border: 1px solid rgba(37,167,222,0.16);
    color: var(--cream);
    text-decoration: none;
    overflow: hidden;
    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease,
        background 0.45s ease,
        border-color 0.45s ease;
}

/* Soft glow ring */

.footer-social a::before{
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(37,167,222,0.0),
        rgba(37,167,222,0.55),
        rgba(37,167,222,0.0)
    );
    animation: ringRotate 8s linear infinite;
    opacity: 0.9;
}

/* Inner circle */

.footer-social a::after{
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: #111827;
}

/* Icon */

.footer-social a i{
    position: relative;
    z-index: 2;
    font-size: 18px;
    animation: iconRotate 14s linear infinite;
    transition: transform 0.45s ease, color 0.45s ease;
}

/* Hover */

.footer-social a:hover{
    transform: translateY(-6px) scale(1.08);
    background: rgba(37,167,222,0.18);
    border-color: rgba(37,167,222,0.5);
    box-shadow:
        0 0 16px rgba(37,167,222,0.32),
        0 12px 28px rgba(0,0,0,0.28);
}

.footer-social a:hover i{
    color: #ffffff;
    transform: rotateY(180deg) scale(1.12);
}

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

@keyframes ringRotate{
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
}

@keyframes iconRotate{
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
}

/* ================= BOTTOM BAR ================= */

.footer-bottom{
    width: 90%;
    max-width: 1280px;
    margin: 54px auto 0;
    padding: 22px 0 28px;
    border-top: 1px solid rgba(255,255,255,0.08);

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

    position: relative;
    z-index: 2;
}

.footer-bottom p{
    color: var(--muted);
    font-size: 14px;
    letter-spacing: 0.2px;
}

.footer-bottom-links{
    display: flex;
    align-items: center;
    gap: 26px;
}

.footer-bottom-links a{
    position: relative;
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.28s ease;
}

.footer-bottom-links a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 1.5px;
    background: var(--sky);
    transition: width 0.28s ease;
}

.footer-bottom-links a:hover{
    color: var(--cream);
}

.footer-bottom-links a:hover::after{
    width: 100%;
}

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

@media (max-width: 1024px){

    .footer-container{
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    .footer-brand{
        padding-right: 0;
    }

    .footer-bottom{
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 640px){

    .footer{
        padding-top: 64px;
    }

    .footer-container{
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .footer-logo img{
        height: 56px;
    }

    .footer-social{
        gap: 12px;
    }

    .footer-social a{
        width: 48px;
        height: 48px;
    }

    .footer-bottom{
        align-items: flex-start;
    }

    .footer-bottom-links{
        flex-wrap: wrap;
        gap: 16px;
    }
}