/* GLOBAL RESPONSIVE FIX */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
.about-hero {
    width: 100%;
    max-width: 100%;
}

/*=========================================
        SECTION HEADER
=========================================*/

.section-header{

    max-width:750px;

    margin:0 auto 70px;

    text-align:center;

}

.section-subtitle{

    display:inline-block;

    padding:8px 18px;

    background:rgba(246,130,33,.12);

    color:#f68221;

    font-size:.9rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    border-radius:30px;

    margin-bottom:20px;

}

.section-header h2{

    font-size:clamp(2.2rem,5vw,3.5rem);

    line-height:1.2;

    font-weight:700;

    color:#024b40;

    margin-bottom:22px;

}

.section-header h2 span{

    color:#f68221;

}

.section-header p{

    max-width:650px;

    margin:auto;

    font-size:1.05rem;

    line-height:1.9;

    color:#666;

}

/* Responsive */

@media(max-width:768px){

    .section-header{

        margin-bottom:50px;

    }

    .section-header h2{

        font-size:2.2rem;

    }

    .section-header p{

        font-size:1rem;

    }

}


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

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;

    background: rgba(2, 75, 64, 0.92);
    backdrop-filter: blur(12px);

    box-shadow:
        0 5px 25px rgba(0, 0, 0, 0.10);

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


/*--------------------------------------------------
                    NAV CONTAINER
--------------------------------------------------*/

.nav-container {

    min-height: 82px;

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

    gap: 30px;

}


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

.logo {

    display: flex;
    align-items: center;

    flex-shrink: 0;

}


.logo img {

    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 50%;

}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.logo-text h2 {
    margin: 0;
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 800;
}

.logo-text span {
    color: #f68221;
    font-size: .85rem;
    font-weight: 600;
}


/*--------------------------------------------------
                DESKTOP NAVIGATION
--------------------------------------------------*/

.desktop-nav {

    display: flex;
    align-items: center;

    gap: 30px;

    margin-left: auto;

}


.desktop-nav a {

    position: relative;

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

    padding: 30px 0;

    color: #ffffff;

    font-size: .95rem;
    font-weight: 600;

    text-decoration: none;

    transition:
        color .3s ease;

}


/* Underline */

.desktop-nav a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 20px;

    width: 0;
    height: 3px;

    background: #f68221;

    border-radius: 10px;

    transition:
        width .3s ease;

}


.desktop-nav a:hover,
.desktop-nav a.active {

    color: #f68221;

}


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

    width: 100%;

}


/*--------------------------------------------------
                NAV ACTIONS
--------------------------------------------------*/

.nav-actions {

    display: flex;
    align-items: center;

    gap: 10px;

}


.nav-volunteer,
.nav-donate {

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

    min-height: 42px;

    padding: 0 18px;

    border-radius: 10px;

    font-size: .9rem;
    font-weight: 700;

    text-decoration: none;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,

        box-shadow .3s ease;

}


.nav-volunteer {

    color: #024b40;

    background: #ffffff;

    border: 1.5px solid #024b40;

}


.nav-volunteer:hover {

    color: #ffffff;

    background: #024b40;

    transform: translateY(-2px);

}


.nav-donate {

    color: #ffffff;

    background: #f68221;

    box-shadow:
        0 8px 20px rgba(246, 130, 33, .20);

}


.nav-donate:hover {

    background: #d9690b;

    transform: translateY(-2px);

}


/*--------------------------------------------------
                THEME TOGGLE
--------------------------------------------------*/

.theme-toggle {

    width: 42px;
    height: 42px;

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

    border: none;
    border-radius: 10px;

    background: #f1f5f4;

    color: #024b40;

    font-size: 1.15rem;

    cursor: pointer;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;

}


.theme-toggle:hover {

    background: #024b40;

    color: #ffffff;

    transform: translateY(-2px);

}


/*--------------------------------------------------
                MOBILE MENU BUTTON
--------------------------------------------------*/

.mobile-menu-btn {

    display: none;

    width: 46px;
    height: 46px;

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

    border: none;

    border-radius: 10px;

    background: #024b40;

    color: #ffffff;

    font-size: 1.45rem;

    cursor: pointer;

    transition:
        background .3s ease,
        transform .3s ease;

}


.mobile-menu-btn:hover {

    background: #013b32;

    transform: translateY(-2px);

}


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

.mobile-menu {

    position: fixed;

    top: 0;
    right: 0;

    width: min(390px, 88vw);

    height: 100vh;

    z-index: 2000;

    display: flex;
    flex-direction: column;

    background: #ffffff;

    box-shadow:
        -15px 0 50px rgba(0, 0, 0, .18);

    transform: translateX(100%);

    visibility: hidden;

    transition:
        transform .4s cubic-bezier(.77, 0, .18, 1),
        visibility .4s ease;

}


.mobile-menu.active {

    transform: translateX(0);

    visibility: visible;

}


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

.mobile-menu-overlay {

    position: fixed;

    inset: 0;

    z-index: 1500;

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

    opacity: 0;

    visibility: hidden;

    transition:
        opacity .3s ease,
        visibility .3s ease;

}


.mobile-menu-overlay.active {

    opacity: 1;

    visibility: visible;

}


/*--------------------------------------------------
                MOBILE MENU TOP
--------------------------------------------------*/

.mobile-menu-top {

    min-height: 82px;

    padding: 0 25px;

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

    background: #024b40;

}


.mobile-menu-title {

    color: #ffffff;

    font-size: 1.35rem;
    font-weight: 700;

}


.mobile-menu-close {

    width: 42px;
    height: 42px;

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

    border: none;

    border-radius: 10px;

    background: #ffffff;

    color: #024b40;

    font-size: 1.4rem;

    cursor: pointer;

    transition:
        transform .3s ease,
        background .3s ease;

}


.mobile-menu-close:hover {

    background: #f68221;

    color: #ffffff;

    transform: rotate(90deg);

}


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

.mobile-nav {

    display: flex;
    flex-direction: column;

    padding: 20px 18px;

    overflow-y: auto;

}


.mobile-nav a {

    position: relative;

    display: flex;
    align-items: center;

    gap: 15px;

    min-height: 58px;

    padding: 0 16px;

    color: #263c39;

    border-radius: 12px;

    font-size: 1rem;
    font-weight: 600;

    text-decoration: none;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;

}


.mobile-nav a i {

    width: 25px;

    color: #024b40;

    font-size: 1.25rem;

    transition:
        color .25s ease;

}


.mobile-nav a:hover {

    color: #024b40;

    background: #eef6f4;

    transform: translateX(5px);

}


.mobile-nav a.active {

    color: #ffffff;

    background: #024b40;

}


.mobile-nav a.active i {

    color: #f68221;

}


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

.mobile-menu-actions {

    margin-top: auto;

    padding: 20px;

    display: flex;
    flex-direction: column;

    gap: 12px;

    border-top: 1px solid #e5ecea;

}


.mobile-volunteer-btn,
.mobile-donate-btn {

    min-height: 52px;

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

    gap: 10px;

    border-radius: 12px;

    font-size: .95rem;
    font-weight: 700;

    text-decoration: none;

    transition:
        transform .3s ease,
        background .3s ease;

}


.mobile-volunteer-btn {

    color: #024b40;

    border: 1.5px solid #024b40;

    background: #ffffff;

}


.mobile-donate-btn {

    color: #ffffff;

    background: #f68221;

}


.mobile-volunteer-btn:hover,
.mobile-donate-btn:hover {

    transform: translateY(-2px);

}


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

@media (max-width: 1100px) {

    .desktop-nav {

        gap: 18px;

    }

    .desktop-nav a {

        font-size: .88rem;

    }

    .nav-actions {

        gap: 6px;

    }

    .nav-volunteer,
    .nav-donate {

        padding: 0 13px;

    }

}


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

@media (max-width: 991px) {

    .nav-container {

        min-height: 76px;

    }


    .logo img {

        width: 135px;

    }


    .desktop-nav,
    .nav-actions {

        display: none;

    }


    .mobile-menu-btn {

        display: flex;

    }

}


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

@media (max-width: 480px) {

    .nav-container {

        min-height: 70px;

    }


    .logo img {

        width: 120px;

    }


    .mobile-menu-btn {

        width: 44px;
        height: 44px;

        font-size: 1.3rem;

    }


    .mobile-menu {

        width: 92vw;

    }


    .mobile-menu-top {

        min-height: 70px;

        padding: 0 18px;

    }


    .mobile-nav {

        padding: 15px 12px;

    }


    .mobile-nav a {

        min-height: 54px;

    }

}


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

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

    .mobile-menu,
    .mobile-menu-overlay,
    .mobile-nav a,
    .mobile-menu-btn {

        transition: none;

    }

}


/*==================================================
                ABOUT HERO
==================================================*/
.about-hero {

    position: relative;

    min-height: 100vh;

    display: flex;
    align-items: center;

    padding: 82px 0 70px;

   background-image:
    linear-gradient(
        90deg,
        rgba(2, 75, 64, 0.30) 0%,
        rgba(2, 75, 64, 0.15) 50%,
        rgba(2, 75, 64, 0.03) 100%
    ),
    url("../images/BG\ 2.jpeg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
}




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

.hero-bg{

    position:absolute;

    inset:0;

    z-index:1;

}

.hero-bg img{

    width:100%;

    height:100%;

    object-fit:cover;

    transform:scale(1.08);

}




/*==============================
LAYOUT
==============================*/

.hero-grid{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:1.1fr .9fr;

    align-items:center;

    gap:80px;

    padding:170px 0 130px;

}

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

.hero-left{

    color:#fff;

}

.breadcrumb{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:25px;

    color:#fff;

}

.breadcrumb a{

    color:#fff;

    text-decoration:none;

    opacity:.9;

}

.breadcrumb a:hover{

    color:#f68221;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:14px 28px;

    border-radius:50px;

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

    backdrop-filter:blur(12px);

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

    margin-bottom:35px;

    font-weight:600;

}

.hero-badge i{

    color:#f68221;

}

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

.about-hero h1{

    font-size:4.4rem;

    line-height:1.1;

    font-weight:800;

    margin-bottom:30px;

}

.about-hero h1 span{

    color:#f68221;

}

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

.about-hero p{

    max-width:650px;

    color:#e5e7eb;

    line-height:2;

    font-size:1.1rem;

    margin-bottom:45px;

}

/*==============================
BUTTONS
==============================*/

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.btn-primary{

    background:#f68221;

    color:#fff;

}

.btn-primary:hover{

    background:#d86d10;

}

.btn-outline-light{

    border:2px solid rgba(255,255,255,.4);

    color:#fff;

    padding:15px 34px;

    border-radius:50px;

    text-decoration:none;

    transition: .2s ease;

}

.btn-outline-light:hover{

    background:#fff;

    color:#024b40;

}
/*==================================================
                HERO STATS
==================================================*/

.hero-stats{

    display:flex;

    gap:20px;

    margin-top:60px;

    flex-wrap:wrap;

}

.stat-card{

    min-width:150px;

    padding:25px;

    border-radius:20px;

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

    backdrop-filter:blur(15px);

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

    transition: .2s ease;

}

.stat-card:hover{

    transform:translateY(-10px);

    background:rgba(246,130,33,.18);

}

.stat-card h3{

    font-size:2.3rem;

    color:#fff;

    margin-bottom:8px;

}

.stat-card span{

    color:#dbe4e7;

    font-size:.95rem;

}
/*==================================================
                HERO RIGHT IMAGE
==================================================*/

.hero-right{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-image{

    position:relative;

    width:100%;

    max-width:520px;

    border-radius:35px;

    overflow:hidden;

    box-shadow:0 35px 80px rgba(0,0,0,.35);

    z-index:5;

    transition: .2s ease;

}

.hero-image:hover{

    transform: none;

}

.hero-image img{

    width:100%;

    display:block;

    object-fit:cover;

}

/* Decorative Border */

.hero-image::before{

    content:"";

    position:absolute;

    inset:18px;

    border:2px solid rgba(255,255,255,.25);

    border-radius:22px;

    pointer-events:none;

}

/* Orange Accent */

.hero-image::after{

    content:"";

    position:absolute;

    width:170px;

    height:170px;

    background:#f68221;

    border-radius:50%;

    right:-70px;

    bottom:-70px;

    opacity:.9;

    z-index:-1;

}
/*==================================================
            FLOATING SHAPES
==================================================*/

.shape{

    position:absolute;

    border-radius:50%;

    animation: none;

}

.shape1{

    width:180px;

    height:180px;

    background:rgba(246,130,33,.18);

    top:12%;

    right:8%;

    z-index:2;

}

.shape2{

    width:110px;

    height:110px;

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

    bottom:18%;

    left:8%;

    animation: none;

}

.shape3{

    width:70px;

    height:70px;

    background:rgba(246,130,33,.25);

    bottom:28%;

    right:38%;

    animation: none;

}

@keyframes floatShape{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-25px);

    }

    100%{

        transform:translateY(0);

    }

}
/*==================================================
                HERO WAVE
==================================================*/

.hero-wave{

    position:absolute;

    bottom:-2px;

    left:0;

    width:100%;

    line-height:0;

    z-index:20;

}

.hero-wave svg{

    width:100%;

    height:110px;

    display:block;

}

.hero-wave path{

    animation: none;

}

@keyframes waveMove{

    0%{

        transform:translateX(0);

    }

    50%{

        transform:translateX(-20px);

    }

    100%{

        transform:translateX(0);

    }

}

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

@media (max-width:1100px){

    .hero-grid{

        grid-template-columns:1fr;

        text-align:center;

        gap:60px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-stats{

        justify-content:center;

    }

    .hero-right{

        order:-1;

    }

}

@media (max-width:768px){

    .hero-grid{

        padding:140px 0 900px;

    }

    .about-hero h1{

        font-size:2.8rem;

    }

    .about-hero p{

        font-size:1rem;

        line-height:1.8;

    }

    .hero-image{

        max-width:360px;

    }

    .stat-card{

        flex:1;

        min-width:120px;

    }

    .hero-wave svg{

        height:70px;

    }

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

.who-we-are{

    position:relative;

    padding:140px 0;

    background:#ffffff;

    overflow:hidden;

}

/* Decorative Background */

.who-bg-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    z-index:0;

}

.who-bg-circle.one{

    width:350px;

    height:350px;

    background:rgba(2,75,64,.05);

    top:-100px;

    left:-100px;

}

.who-bg-circle.two{

    width:300px;

    height:300px;

    background:rgba(246,130,33,.08);

    bottom:-100px;

    right:-80px;

}

/* Grid */

.who-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

}
/*==================================================
            WHO IMAGES
==================================================*/

.who-images{

    position:relative;

}

.image-main{

    border-radius:30px;

    overflow:hidden;

    box-shadow:0 35px 70px rgba(0,0,0,.15);

}

.image-main img{

    width:100%;

    display:block;

    transition: .2s ease;

}

.image-main:hover img{

    transform:scale(1.08);

}

/* Small Image */

.image-small{

    position:absolute;

    left:-40px;

    bottom:-40px;

    width:240px;

    border-radius:22px;

    overflow:hidden;

    border:8px solid #fff;

    box-shadow:0 20px 45px rgba(0,0,0,.18);

}

.image-small img{

    width:100%;

    display:block;

}

/* Experience Card */

.experience-card{

    position:absolute;

    right:-30px;

    top:50px;

    background:#024b40;

    color:#fff;

    width:180px;

    padding:28px;

    border-radius:22px;

    text-align:center;

    box-shadow:0 20px 40px rgba(2,75,64,.25);

}

.experience-card h2{

    font-size:3rem;

    color:#f68221;

    margin-bottom:10px;

}

.experience-card span{

    line-height:1.6;

}
/*==================================================
            WHO CONTENT
==================================================*/

.who-content h2{

    font-size:3.3rem;

    color:#082c27;

    margin:20px 0;

    line-height:1.15;

}

.who-content h2 span{

    display:block;

    color:#024b40;

}

.who-content .lead{

    font-size:1.2rem;

    color:#475569;

    margin-bottom:25px;

    font-weight:500;

}

.who-content p{

    color:#64748b;

    line-height:1.9;

}
/*==================================================
            FEATURE BOXES
==================================================*/

.who-features{

    display:grid;

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

    gap:22px;

    margin:45px 0;

}

.feature-box{

    display:flex;

    gap:18px;

    align-items:flex-start;

    background:#fff;

    padding:24px;

    border-radius:20px;

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

    transition: .2s ease;

    border-top:4px solid transparent;

}

.feature-box:hover{

    transform:translateY(-10px);

    border-color:#f68221;

    box-shadow:0 25px 45px rgba(2,75,64,.15);

}

.feature-box i{

    width:60px;

    height:60px;

    background:#024b40;

    color:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    flex-shrink:0;

    transition: .2s ease;

}

.feature-box:hover i{

    background:#f68221;

}

.feature-box h4{

    color:#082c27;

    margin-bottom:8px;

}

.feature-box p{

    margin:0;

    font-size:.95rem;

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

@media(max-width:992px){

    .who-grid{

        grid-template-columns:1fr;

    }

    .who-images{

        margin-bottom:60px;

    }

}

@media(max-width:768px){

    .who-we-are{

        padding:90px 0;

    }

    .who-content h2{

        font-size:2.4rem;

    }

    .who-features{

        grid-template-columns:1fr;

    }

    .image-small{

        width:180px;

        left:15px;

        bottom:-20px;

    }

    .experience-card{

        width:150px;

        right:10px;

        top:20px;

        padding:20px;

    }

    .experience-card h2{

        font-size:2.3rem;

    }

}

/*==================================================
                OUR STORY
==================================================*/

.our-story{
    padding:120px 0;
    background:#f8fafc;
    position:relative;
    overflow:hidden;
}

/* Decorative Background */

.our-story::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    background:rgba(246,130,33,.06);
    border-radius:50%;
    top:-220px;
    right:-180px;
}

.our-story::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    background:rgba(2,75,64,.05);
    border-radius:50%;
    bottom:-180px;
    left:-180px;
}

/* Timeline */

.story-timeline{
    position:relative;
    max-width:900px;
    margin:90px auto 0;
}

/* Main Line */

.story-timeline::before{
    content:"";
    position:absolute;
    left:44px;
    top:0;
    width:5px;
    height:100%;
    background:linear-gradient(
        to bottom,
        #024b40,
        #f68221
    );
    border-radius:20px;
}

/* Item */

.story-item{
    position:relative;
    display:flex;
    gap:35px;
    margin-bottom:65px;
}

/* Circle */

.story-dot{
    width:90px;
    height:90px;
    border-radius:50%;
    background:#fff;
    border:6px solid #f68221;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#024b40;
    font-size:34px;
    flex-shrink:0;
    position:relative;
    z-index:2;
    box-shadow:0 15px 35px rgba(0,0,0,.12);
    transition: .2s ease;
}

.story-item:hover .story-dot{

    transform:scale(1.08);

    background:#024b40;

    color:#fff;

    border-color:#024b40;

}

/* Card */

.story-card{

    flex:1;

    background:#fff;

    border-radius:24px;

    padding:35px;

    box-shadow:0 18px 45px rgba(0,0,0,.08);

    transition: .2s ease;

    border-left:6px solid transparent;

}

.story-card:hover{

    transform:translateY(-8px);

    border-left:6px solid #f68221;

    box-shadow:0 25px 55px rgba(2,75,64,.15);

}

/* Year */

.story-year{

    display:inline-block;

    background:#024b40;

    color:#fff;

    padding:8px 18px;

    border-radius:40px;

    font-size:.9rem;

    font-weight:600;

    margin-bottom:18px;

}

/* Heading */

.story-card h3{

    color:#024b40;

    font-size:1.7rem;

    margin-bottom:18px;

}

/* Text */

.story-card p{

    color:#5b6473;

    line-height:1.9;

}

/* Hover Accent */

.story-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:24px;

    pointer-events:none;

}

/* Responsive */

@media(max-width:768px){

.story-timeline::before{

left:29px;

}

.story-item{

gap:20px;

}

.story-dot{

width:60px;

height:60px;

font-size:24px;

border-width:4px;

}

.story-card{

padding:25px;

}

.story-card h3{

font-size:1.35rem;

}

}
/* Alternate Layout */

.story-item.right{

    flex-direction:row-reverse;

}

.story-item.right .story-card{

    text-align:right;

}

.story-item.right .story-year{

    margin-left:auto;

}
.story-card{

    position:relative;

}

.story-card::before{

    content:"";

    position:absolute;

    top:45px;

    width:45px;

    height:3px;

    background:#f68221;

}

/* Left Cards */

.story-item:not(.right) .story-card::before{

    left:-45px;

}

/* Right Cards */

.story-item.right .story-card::before{

    right:-45px;

}

/*==================================================
        MISSION • VISION • VALUES
==================================================*/

.foundation-section{

    padding:120px 0;

    background:#ffffff;

}

.foundation-grid{

    display:grid;

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

    gap:35px;

    margin-top:70px;

}

.foundation-card{

    background:#fff;

    border-radius:25px;

    padding:45px 35px;

    text-align:center;

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

    transition: .2s ease;

    position:relative;

    overflow:hidden;

}

.foundation-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:#22c55e;

    transform:scaleX(0);

    transition: .2s ease;

    transform-origin:left;

}

.foundation-card:hover{

    transform:translateY(-12px);

    box-shadow:0 30px 60px rgba(34,197,94,.15);

}

.foundation-card:hover::before{

    transform:scaleX(1);

}

.foundation-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    background:linear-gradient(135deg,#22c55e,#16a34a);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:40px;

    margin-bottom:30px;

}

.foundation-card h3{

    font-size:1.7rem;

    margin-bottom:20px;

    color:#0f172a;

}

.foundation-card p{

    color:#64748b;

    line-height:1.9;

}

.foundation-card ul{

    margin-top:25px;

    list-style:none;

    padding:0;

}

.foundation-card ul li{

    padding:10px 0;

    color:#475569;

    font-weight:500;

    border-bottom:1px solid #e2e8f0;

}

.foundation-card ul li:last-child{

    border-bottom:none;

}
/*==================================================
        FOUNDATION SECTION
==================================================*/

.foundation-section{
    padding:120px 0;
    background:#f8fafc;
    position:relative;
    overflow:hidden;
}

/* Decorative Background */

.foundation-section::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    background:rgba(246,130,33,.05);
    border-radius:50%;
    top:-250px;
    right:-200px;
}

.foundation-section::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    background:rgba(2,75,64,.05);
    border-radius:50%;
    left:-180px;
    bottom:-180px;
}

/* Grid */

.foundation-grid{

    display:grid;

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

    gap:35px;

    margin-top:70px;

    position:relative;

    z-index:2;

}

/*==============================
        Shared Card
==============================*/

.mission-card,
.vision-card,
.values-card{

    border-radius:28px;

    padding:45px 35px;

    transition: .2s ease;

    position:relative;

    overflow:hidden;

}

.mission-card:hover,
.vision-card:hover,
.values-card:hover{

    transform:translateY(-12px);

}

/*==============================
        Mission Card
==============================*/

.mission-card{

    background:linear-gradient(
        135deg,
        #024b40,
        #046b5b
    );

    color:#fff;

    box-shadow:0 30px 60px rgba(2,75,64,.25);

}

.mission-card h3{

    color:#fff;

}

.mission-card p{

    color:rgba(255,255,255,.9);

}

.mission-card .foundation-icon{

    background:#fff;

    color:#024b40;

}

/*==============================
        Vision Card
==============================*/

.vision-card{

    background:#fff;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

    border-top:6px solid #f68221;

}

.vision-card h3{

    color:#024b40;

}

.vision-card p{

    color:#64748b;

}

/*==============================
        Values Card
==============================*/

.values-card{

    background:#ffffff;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

    border-top:6px solid #024b40;

}

.values-card h3{

    color:#024b40;

}

/*==============================
        Icon
==============================*/

.foundation-icon{

    width:90px;

    height:90px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:30px;

    background:linear-gradient(
        135deg,
        #024b40,
        #046b5b
    );

    color:#fff;

    font-size:38px;

    transition: .2s ease;

}

.vision-card .foundation-icon{

    background:#f68221;

}

.values-card .foundation-icon{

    background:#024b40;

}

.mission-card:hover .foundation-icon,
.vision-card:hover .foundation-icon,
.values-card:hover .foundation-icon{

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

}

/*==============================
        Label
==============================*/

.card-label{

    display:inline-block;

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

    padding:8px 18px;

    border-radius:40px;

    font-size:.85rem;

    letter-spacing:1px;

    font-weight:600;

    margin-bottom:20px;

}

.vision-card .card-label,
.values-card .card-label{

    background:#eef7f5;

    color:#024b40;

}

/*==============================
        Headings
==============================*/

.foundation-grid h3{

    font-size:1.8rem;

    line-height:1.35;

    margin-bottom:20px;

}

.foundation-grid p{

    line-height:1.9;

}

/*==============================
        Values List
==============================*/

.values-list{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-top:30px;

}

.values-list span{

    padding:12px 18px;

    border-radius:50px;

    background:#eef7f5;

    color:#024b40;

    font-weight:600;

    transition: .2s ease;

    cursor:default;

    border:1px solid transparent;

}

.values-list span:hover{

    background:#024b40;

    color:#fff;

    border-color:#f68221;

    transform:translateY(-4px);

}

/*==============================
        Decorative Glow
==============================*/

.mission-card::after,
.vision-card::after,
.values-card::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

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

    right:-100px;

    top:-100px;

}

.vision-card::after{

    background:rgba(246,130,33,.08);

}

.values-card::after{

    background:rgba(2,75,64,.06);

}

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

@media(max-width:1100px){

.foundation-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.foundation-section{

padding:80px 0;

}

.mission-card,
.vision-card,
.values-card{

padding:35px 25px;

}

.foundation-icon{

width:75px;

height:75px;

font-size:30px;

}

.foundation-grid h3{

font-size:1.5rem;

}

.values-list{

gap:10px;

}

.values-list span{

font-size:.9rem;

padding:10px 15px;

}

}

/*==================================================
                WHY WE EXIST
==================================================*/

.why-exist{
    padding:120px 0;
    background:#ffffff;
    position:relative;
    overflow:hidden;
}

/* Decorative Shapes */

.why-exist::before{
    content:"";
    position:absolute;
    width:550px;
    height:550px;
    background:rgba(246,130,33,.05);
    border-radius:50%;
    top:-260px;
    right:-220px;
}

.why-exist::after{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    background:rgba(2,75,64,.05);
    border-radius:50%;
    left:-180px;
    bottom:-180px;
}

/*=================================
        Layout
==================================*/

.why-wrapper{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:80px;

    align-items:center;

    position:relative;

    z-index:2;

}

/*=================================
        Left Side
==================================*/

.why-left h2{

    font-size:3rem;

    line-height:1.2;

    margin:20px 0;

    color:#024b40;

}

.why-left h2 span{

    display:block;

    color:#f68221;

}

.why-left .lead{

    font-size:1.15rem;

    color:#475569;

    margin-bottom:20px;

    line-height:1.9;

}

.why-left p{

    color:#64748b;

    line-height:1.9;

    margin-bottom:25px;

}

/* Quote */

.why-left blockquote{

    position:relative;

    margin:40px 0;

    padding:30px 35px;

    background:#f8fafc;

    border-left:6px solid #f68221;

    border-radius:18px;

    color:#024b40;

    font-size:1.2rem;

    font-weight:600;

    line-height:1.8;

    font-style:italic;

    box-shadow:0 15px 35px rgba(0,0,0,.06);

}

.why-left blockquote::before{

    content:"❝";

    position:absolute;

    top:-18px;

    left:18px;

    font-size:70px;

    color:#f68221;

    opacity:.2;

}

/*=================================
        Right Side
==================================*/

.why-right{

    display:grid;

    gap:28px;

}

/* Card */

.problem-card{

    display:flex;

    gap:25px;

    align-items:flex-start;

    background:#fff;

    padding:30px;

    border-radius:24px;

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

    transition: .2s ease;

    position:relative;

    overflow:hidden;

}

/* Decorative Corner */

.problem-card::after{

    content:"";

    position:absolute;

    width:120px;

    height:120px;

    border-radius:50%;

    background:rgba(246,130,33,.08);

    right:-60px;

    top:-60px;

}

/* Hover */

.problem-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 50px rgba(2,75,64,.15);

}

/* Icon */

.problem-icon{

    width:80px;

    height:80px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #024b40,
        #046b5b
    );

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    flex-shrink:0;

    transition: .2s ease;

}

.problem-card:hover .problem-icon{

    background:#f68221;

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

}

/* Text */

.problem-card h3{

    color:#024b40;

    font-size:1.7rem;

    margin-bottom:12px;

}

.problem-card p{

    color:#64748b;

    line-height:1.8;

}

/*=================================
        Button
==================================*/

.why-left .btn-primary{

    margin-top:10px;

}

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

@media(max-width:992px){

.why-wrapper{

grid-template-columns:1fr;

gap:60px;

}

}

@media(max-width:768px){

.why-exist{

padding:80px 0;

}

.why-left h2{

font-size:2.3rem;

}

.problem-card{

padding:25px;

}

.problem-icon{

width:65px;

height:65px;

font-size:28px;

}

.problem-card h3{

font-size:1.4rem;

}

.why-left blockquote{

padding:25px;

font-size:1rem;

}

}
/*==================================================
                OUR APPROACH
==================================================*/

.approach-section{

    padding:130px 0;

    background:#ffffff;

    position:relative;

    overflow:hidden;

}

/* background decoration */

.approach-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    background:rgba(34,197,94,.05);

    border-radius:50%;

    right:-180px;

    top:-180px;

}

.approach-process{

    position:relative;

    margin-top:80px;

    display:grid;

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

    gap:35px;

}

/* connecting line */

.approach-process::before{

    content:"";

    position:absolute;

    top:70px;

    left:10%;

    right:10%;

    height:3px;

    background:linear-gradient(to right,#22c55e,#16a34a);

    z-index:0;

}

.process-card{

    position:relative;

    z-index:2;

    background:#fff;

    padding:45px 30px;

    border-radius:25px;

    text-align:center;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

    transition: .2s ease;

}

.approach-card:hover .approach-icon{

    background:#f68221;

    color:#fff;

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

}

.process-number{

    position:absolute;

    top:20px;

    right:20px;

    font-size:2.3rem;

    color:#e2e8f0;

    font-weight:800;

}

.approach-icon{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:30px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff4eb;

    border:2px solid rgba(246,130,33,.2);

    color:#f68221;

    font-size:38px;

    transition: .2s ease;

}
.process-icon::after{

    content:"";

    position:absolute;

    inset:-10px;

    border:2px solid rgba(34,197,94,.25);

    border-radius:50%;

}

.process-card:hover .process-icon{

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

}

.process-card h3{

    margin-bottom:18px;

    color:#0f172a;

    font-size:1.5rem;

}

.process-card p{

    color:#64748b;

    line-height:1.9;

}
.step-number{

    position:absolute;

    top:20px;

    right:25px;

    font-size:2.8rem;

    font-weight:800;

    color:rgba(246,130,33,.15);

}
.approach-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:#f68221;

    transform:scaleX(0);

    transition: .2s ease;

}

.approach-card:hover::before{

    transform:scaleX(1);

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

@media(max-width:1100px){

    .approach-process{

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

    }

    .approach-process::before{

        display:none;

    }

}

@media(max-width:768px){

    .approach-section{

        padding:90px 0;

    }

    .approach-process{

        grid-template-columns:1fr;

    }

    .process-card{

        padding:40px 25px;

    }

    .process-icon{

        width:75px;

        height:75px;

        font-size:30px;

    }

}
.impact-section{

    position:relative;

    overflow:hidden;

}

.impact-section::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    radial-gradient(circle at 20% 20%, rgba(255,255,255,.06) 2px, transparent 2px),

    radial-gradient(circle at 80% 60%, rgba(255,255,255,.05) 2px, transparent 2px);

    background-size:120px 120px;

    opacity:.4;

}
.impact-card{

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

    backdrop-filter:blur(18px);

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

    border-radius:25px;

}
.impact-card i{

    color:#f68221;

    font-size:50px;

}
.impact-card h3{

    font-size:4rem;

    font-weight:800;

    margin:20px 0 10px;

}
.impact-card span{

    color:#f68221;

}
.impact-card:hover{

    transform: none;

}

.impact-card:hover i{

    transform: none;

}

.impact-card i{

    transition: .2s ease;

}
.highlight{

    padding:18px 25px;

    border-radius:50px;

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

    transition: .2s ease;

}

.highlight:hover{

    background:#ffffff;

}

.highlight:hover span{

    color:#0f172a;

}

.highlight:hover i{

    color:#f68221;

}
/*==================================================
                LEADERSHIP
==================================================*/

.leadership-section{

    padding:120px 0;

    background:#ffffff;

}

.leadership-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.leader-card{

    background:#fff;

    border-radius:25px;

    overflow:hidden;

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

    transition: .2s ease;

}

.leader-card:hover{

    transform: none;

    box-shadow:0 25px 50px rgba(34,197,94,.15);

}

.leader-image{

    height:350px;

    overflow:hidden;

}

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


    transition: .2s ease;

}

.leader-card:hover img{

    transform: none;

}

.leader-info{

    padding:30px;

    text-align:center;

}

.leader-info h3{

    color:#0f172a;

    margin-bottom:8px;

}

.leader-info span{

    display:block;

    color:#f68221;

    font-weight:600;

    margin-bottom:20px;

}

.leader-info p{

    color:#64748b;

    line-height:1.8;

}

.leader-social{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-top:25px;

}

.leader-social a{

    width:45px;

    height:45px;

    border-radius:50%;

    background:#f1f5f9;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#f68221;

    font-size:20px;

    transition: .2s ease;

}

.leader-social a:hover{

    background:#f68221;

    color:#fff;

}

.leadership-button{

    text-align:center;

    margin-top:60px;

}

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

@media(max-width:1100px){

    .leadership-grid{

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

    }

}

@media(max-width:768px){

    .leadership-section{
        padding:80px 20px;
    }

    .leadership-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .leader-image{
        height:420px;
    }

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

}


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

.partners-section{

    padding:120px 0;

    background:#f8fafc;

}

.partners-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.partner-card{

    background:#fff;

    border-radius:20px;

    padding:35px;

    display:flex;

    justify-content:center;

    align-items:center;

    height:160px;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition: .2s ease;

}

.partner-card:hover{

    transform: none;

    box-shadow:0 18px 40px rgba(34,197,94,.15);

}

.partner-card img{

    max-width:140px;

    max-height:80px;

    object-fit:contain;

    filter:grayscale(100%);

    opacity:.75;

    transition: .2s ease;

}

.partner-card:hover img{

    filter:none;

    opacity:1;

    transform: none;

}

/* CTA */

.partners-cta{

    margin-top:80px;

    background:linear-gradient(135deg,#024b40,#16a34a);

    color:#fff;

    padding:50px;

    border-radius:25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

}

.partners-text h3{

    font-size:2rem;

    margin-bottom:15px;

}

.partners-text p{

    color:rgba(255,255,255,.9);

    line-height:1.8;

}

.partners-cta .btn-primary{

    background:#fff;

    color:#024b40;

    white-space:nowrap;

}

.partners-cta .btn-primary:hover{

    background:#0f172a;

    color:#fff;

}
/*==================================================
        PARTNERS RESPONSIVE
==================================================*/

@media(max-width:992px){

    .partners-grid{

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

    }

    .partners-cta{

        flex-direction:column;

        text-align:center;

    }

}

@media(max-width:768px){

    .partners-section{

        padding:80px 0;

    }

    .partners-grid{

        grid-template-columns:1fr;

    }

    .partner-card{

        height:140px;

    }

    .partners-cta{

        padding:35px 25px;

    }

    .partners-text h3{

        font-size:1.7rem;

    }

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

.faq-section{

    padding:120px 0;

    background:#ffffff;

}

.faq-wrapper{

    max-width:900px;

    margin:70px auto;

}

.faq-item{

    background:#fff;

    border-radius:18px;

    margin-bottom:20px;

    overflow:hidden;

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

    transition: .2s ease;

}

.faq-item:hover{

    transform:translateY(-4px);

}

.faq-question{

    width:100%;

    border:none;

    background:none;

    cursor:pointer;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:28px 30px;

    font-size:1.1rem;

    font-weight:600;

    color:#0f172a;

    text-align:left;

}

.faq-question i{

    color:#f68221;

    font-size:1.6rem;

    transition: .2s ease;

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .4s ease;

}

.faq-answer p{

    padding:0 30px 30px;

    color:#64748b;

    line-height:1.8;

}

.faq-item.active .faq-answer{

    max-height:300px;

}

.faq-item.active .faq-question i{

    transform:rotate(45deg);

}

.faq-contact{

    margin-top:80px;

    text-align:center;

    background:#f8fafc;

    border-radius:25px;

    padding:60px 40px;

}

.faq-contact h3{

    font-size:2rem;

    color:#0f172a;

    margin-bottom:20px;

}

.faq-contact p{

    color:#64748b;

    max-width:650px;

    margin:0 auto 30px;

    line-height:1.8;

}

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

@media(max-width:768px){

    .faq-section{

        padding:80px 0;

    }

    .faq-question{

        padding:22px;

        font-size:1rem;

    }

    .faq-answer p{

        padding:0 22px 25px;

    }

    .faq-contact{

        padding:40px 25px;

    }

    .faq-contact h3{

        font-size:1.6rem;

    }

}
/*==================================================
                CALL TO ACTION
==================================================*/

.cta-section{

    position:relative;

    overflow:hidden;

    padding:120px 0;

    background:linear-gradient(135deg,#024b40,#024b0e);

    text-align:center;

    color:#fff;

}

.cta-content{

    position:relative;

    z-index:2;

    max-width:850px;

    margin:auto;

}

.cta-content .section-subtitle{

    color:#dcfce7;

}

.cta-content h2{

    font-size:3.2rem;

    margin:20px 0;

    color:#fff;

}

.cta-content h2 span{

    display:block;

    color:#dcfce7;

}

.cta-content p{

    font-size:1.1rem;

    line-height:1.9;

    max-width:700px;

    margin:0 auto 45px;

    color:rgba(255,255,255,.9);

}

/* Buttons */

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.cta-buttons a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:16px 34px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition: .2s ease;

}

.cta-buttons .btn-primary{

    background:#fff;

    color:#f68221;

}

.cta-buttons .btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 35px rgba(0, 0, 0, 0.2);

}

.cta-buttons .btn-secondary{

    background:#f68221;

    color:#fff;

}

.cta-buttons .btn-secondary:hover{

    background:#f68221;

    transform:translateY(-5px);

}

.cta-buttons .btn-outline{

    border:2px solid rgba(255,255,255,.5);

    color:#fff;

    background:transparent;

}

.cta-buttons .btn-outline:hover{

    background:#fff;

    color:#f68221;

}

/* Decorative circles */

.cta-circle{

    position:absolute;

    border-radius:50%;

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

}

.circle-one{

    width:320px;

    height:320px;

    top:-120px;

    left:-120px;

}

.circle-two{

    width:250px;

    height:250px;

    right:-80px;

    bottom:-80px;

}

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

@media(max-width:768px){

    .cta-section{

        padding:80px 0;

    }

    .cta-content h2{

        font-size:2.3rem;

    }

    .cta-buttons{

        flex-direction:column;

        align-items:center;

    }

    .cta-buttons a{

        width:100%;

        max-width:320px;

        justify-content:center;

    }

}

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

.footer{

    background:#024b40;

    color:#cbd5e1;

    padding:90px 0 30px;
    

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1.3fr;

    gap:50px;

}

.footer-logo img{

    width:80px;

    margin-bottom:20px;

}

.footer-column h3{

    color:#fff;

    margin-bottom:20px;

}

.footer-column h4{

    color:#fff;

    margin-bottom:25px;

}

.footer-column p{

    line-height:1.9;

    margin-bottom:25px;

}

.footer-column ul{

    list-style:none;

}

.footer-column ul li{

    margin-bottom:14px;

}

.footer-column ul li a{

    color:#cbd5e1;

    text-decoration:none;

    transition: .2s ease;

}

.footer-column ul li a:hover{

    color:#f68221;

    padding-left:6px;

}

.footer-social{

    display:flex;

    gap:15px;

}

.footer-social a{

    width:42px;

    height:42px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#f68221;

    color:#fff;

    border-radius:50%;

    text-decoration:none;

    transition: .2s ease;

}

.footer-social a:hover{

    background:#024b40;

}

.contact-info li{

    display:flex;

    align-items:center;

    gap:10px;

}

.contact-info i{

    color:#f68221;

}

.newsletter{

    margin-top:30px;

}

.newsletter input{

    width:100%;

    padding:14px;

    border:none;

    border-radius:12px;

    margin-bottom:15px;

    outline:none;

}

.newsletter button{

    width:100%;

    padding:14px;

    border:none;

    border-radius:12px;

    background:#f68221;

    color:#fff;

    cursor:pointer;

    transition: .2s ease;

}

.newsletter button:hover{

    background:#f68221;

}

.footer hr{

    border:none;

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

    margin:60px 0 30px;

}

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;

}

.footer-bottom a{

    color:#cbd5e1;

    text-decoration:none;

}

.footer-bottom a:hover{

    color:#22c55e;

}
.modal{

    opacity:0;

    visibility:hidden;

    transition: .2s ease;

}

.modal.show{

    opacity:1;

    visibility:visible;

}
.timeline-item{

    opacity:0;

    transform:translateY(40px);

    transition: .2s ease;

}

.timeline-item.active{

    opacity:1;

    transform:translateY(0);

}
.leader-card{

    transition:transform .35s ease;

    transform-style:preserve-3d;

    will-change:transform;

}
.menu-toggle{

    position:relative;

    width:45px;

    height:45px;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

}

.menu-toggle i{

    position:absolute;

    font-size:30px;

    color:#f68221;

    transition: .2s ease;

}

.close-icon{

    opacity:0;

    transform:rotate(-180deg);

}
.menu-toggle.active .menu-icon{

    opacity:0;

    transform:rotate(180deg);

}

.menu-toggle.active .close-icon{

    opacity:1;

    transform:rotate(0);

}
@media (max-width:991px){

    .nav-links{

        position:fixed;

        top:90px;

        right:-100%;

        width:300px;

        height:calc(100vh - 90px);

        background:#fff;

        display:flex;

        flex-direction:column;

        padding:40px;

        gap:25px;

        transition: .2s ease;

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

    }

    .nav-links.show-menu{

        right:0;

    }

}
.nav-links{

    right:-100%;
    transition: .2s ease;

}

.nav-links.show-menu{

    right:0;

}
/*==================================================
            FOOTER RESPONSIVE
==================================================*/

@media (max-width: 1100px) {

    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr;
        gap: 40px;
    }

}


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

@media (max-width: 991px) {

    .footer {
        padding: 80px 0 30px;
    }

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

}


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

@media (max-width: 768px) {

    .footer {
        padding: 70px 20px 25px;
    }

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

    .footer-column {
        width: 100%;
    }

    .footer-column p {
        line-height: 1.8;
    }

    .footer-social {
        justify-content:flex-start;
        flex-wrap:wrap;
    }

    .newsletter {
        width:100%;
    }

    .newsletter input,
    .newsletter button {
        width:100%;
        box-sizing:border-box;
    }

    .footer hr {
        margin:45px 0 25px;
    }

    .footer-bottom {
        flex-direction:column;
        text-align:center;
        justify-content:center;
        gap:12px;
    }

}


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

@media (max-width: 480px) {

    .footer {
        padding:60px 15px 20px;
    }

    .footer-grid {
        gap:35px;
    }

    .footer-logo img {
        width:70px;
    }

    .footer-social {
        gap:10px;
    }

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

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

}