/*==================================================
  MASTER.CSS
  Premium NGO Template
==================================================*/

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--heading);
    overflow-x:hidden;
    line-height:1.6;
    padding-top:100px;
    transition:.35s;

}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

.container{
    width:92%;
    max-width:1400px;
    margin:auto;
}

/*==========================================
        COLOR VARIABLES
==========================================*/

:root{

    /* Theme Colors */
    --primary:#16C79A;
    --primary-dark:#0C9E79;

    /* Backgrounds */
    --bg:#071A1F;
    --bg2:#0C242A;
    --card:#102A31;

    /* Text */
    --heading:#ffffff;
    --text:#d4dcdc;

    /* Others */
    --border:rgba(255,255,255,.08);
    --glass:rgba(255,255,255,.07);
    --shadow:0 20px 50px rgba(0,0,0,.35);
    --radius:18px;
    --transition:.35s;

}
body.light{

    --bg:#F5F8FA;
    --bg2:#FFFFFF;
    --card:#FFFFFF;

    --heading:#1B1B1B;
    --text:#555555;

    --border:rgba(0,0,0,.08);
    --glass:rgba(0,0,0,.04);

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

}

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

.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:9999;
    padding:18px 0;
    transition:all .35s ease;
}

.header.sticky{
    padding:0px 0;
}

.header.sticky .navbar{
    background:rgba(7,22,27,.96);
    backdrop-filter:blur(20px);
    box-shadow:0 15px 45px rgba(0,0,0,.30);
}

/*==========================================
            NAVBAR
==========================================*/

.navbar{
    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:82px;

    padding:12px 28px;

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

    backdrop-filter:blur(18px);

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

    border-radius:20px;

    transition:.35s;
}

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

.logo{
    display:flex;
    align-items:center;
    gap:14px;
    justify-self:start;
    text-decoration:none;
}

.logo-icon{

    width:60px;
    height:60px;

    border-radius:16px;

    overflow:hidden;

    background:#ffffff;

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

}

.logo-icon img{

    width:100%;
    height:100%;

    object-fit:cover;

}

.logo-content{

    display:flex;
    flex-direction:column;

}

.logo-content h2{

    color:#fff;

    font-size:24px;

    font-weight:800;

    margin:0;

}

.logo-content p{
    color:#bfc7ca;
    font-size:11px;
    line-height:16px;
    margin-top:2px;
    max-width:210px;
}
/*==========================================
            NAVIGATION
==========================================*/

.nav-menu{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:38px;

    list-style:none;

    margin:0 auto;
    padding:0;
}

.nav-menu li{

    list-style:none;

}

.nav-menu li a{

    position:relative;

    text-decoration:none;

    color:#fff;

    font-size:15px;

    font-weight:600;

    transition:.35s;

}

.nav-menu li a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#1AD1A5;

    transition:.35s;

    border-radius:20px;

}

.nav-menu li a:hover,
.nav-menu li a.active{

    color:#1AD1A5;

}

.nav-menu li a:hover::after,
.nav-menu li a.active::after{

    width:100%;

}

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

.header-right{
    display:flex;

    align-items:center;
    justify-self:end;
    
    gap:12px;
}

/*==========================================
            THEME BUTTON
==========================================*/

.theme-btn{

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

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

    color:#fff;

    cursor:pointer;

    transition:.35s;

}

.theme-btn:hover{

    background:#1AD1A5;

    transform:rotate(25deg);

}

/*==========================================
            IMPACT BUTTON
==========================================*/

.impact-btn{

    padding:13px 24px;

    border-radius:40px;

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

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.impact-btn:hover{

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

}

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

.donate-btn{

    padding:14px 28px;

    border-radius:40px;

    background:linear-gradient(135deg,#18D5A7,#14B8C4);

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

    box-shadow:0 12px 35px rgba(24,213,167,.35);

}

.donate-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 20px 45px rgba(24,213,167,.45);

}

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

.menu-toggle{

    display:none;

    width:46px;

    height:46px;

    border:none;

    background:transparent;

    cursor:pointer;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:6px;

}

.menu-toggle span{

    width:28px;

    height:3px;

    background:#fff;

    border-radius:30px;

    transition:.35s;

}

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

.menu-overlay{

    display:none;

}
/*==========================================
        LARGE TABLET
==========================================*/

@media (max-width:1200px){

.logo-content p{
    display:none;
}

.nav-menu{
    gap:24px;
}

.impact-btn{
    display:none;
}

}

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

@media (max-width:991px){

.header{
    padding:12px 0;
}

.navbar{
    padding:14px 20px;
}

/* Logo */

.logo-icon{
    width:52px;
    height:52px;
}

.logo-content h2{
    font-size:20px;
}

/* Right Buttons */

.header-right{

    margin-left:auto;

}

.theme-btn,
.impact-btn,
.donate-btn{

    display:none;

}

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

.menu-toggle{

    display:flex;

    z-index:10001;

}

.menu-toggle span{

    transition:.35s;

}

.menu-toggle.active span:nth-child(1){

    transform:translateY(9px) rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    transform:translateY(-9px) rotate(-45deg);

}

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

.nav-menu{

    position:absolute;

    top:0;
    right:0;

    width:70%;

    height:100vh;

    background:#07171d;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    justify-content:flex-start;

    gap:0;

    padding:100px 35px 40px;

    transition:.40s ease;

    z-index:9999;

    overflow-y:auto;

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

    transform: translate(104%);

}

.nav-menu.active{

    transform: translate(0%);

}

.nav-menu li{

    width:100%;

}

.nav-menu li a{

    display:block;

    width:100%;

    padding:18px 0;

    font-size:17px;

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

}

.nav-menu li a::after{

    display:none;

}

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

.menu-overlay{

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(4px);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    display:block;

    z-index:9998;

}

.menu-overlay.active{

    opacity:1;

    visibility:visible;

}

}

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

@media(max-width:768px){

.navbar{

    padding:12px 16px;

}

.logo{

    gap:12px;

}

.logo-icon{

    width:48px;

    height:48px;

}

.logo-content h2{

    font-size:18px;

}

}

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

@media(max-width:480px){

.header{

    padding:8px 0;
    z-index:10000;

}

.navbar{

    padding:10px 14px;

    border-radius:16px;
    width: 350px;
    z-index:10001;
}

.logo-icon{

    width:44px;

    height:44px;

}

.logo-content h2{

    font-size:17px;

}

.nav-menu{

    padding:90px 25px 30px;

}

.nav-menu li a{

    padding:16px 0;

    font-size:16px;

}

.menu-toggle{

    width:42px;

    height:42px;
    z-index:10002;
}

}
/* Hamburger Animation */

.menu-toggle.active span:nth-child(1){

    transform:translateY(9px) rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    transform:translateY(-9px) rotate(-45deg);

}

/*==========================================
COMMON BUTTON
==========================================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:10px 20px;

    border-radius:40px;

    background:linear-gradient(135deg,#16C79A,#11B9C5);

    color:#fff;

    font-weight:600;

    transition:.35s;
    flex:1;

}

.btn:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(22,199,154,.35);

}

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

section{

    padding:110px 0;

    position:relative;

}

.section-title{

    font-size:45px;

    font-weight:800;

    margin-bottom:20px;

}

.gallery .section-subtitle{

    color:#95a7ab;

    font-size:18px;

    max-width:700px;

    line-height:32px;
    text-align: center;
    margin: auto;
   

}

/*==========================================
CARDS
==========================================*/

.card{

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

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

    backdrop-filter:blur(18px);

    border-radius:22px;

    padding:30px;

    transition:.35s;

}

.card:hover{

    transform:translateY(-8px);

    border-color:rgba(22,199,154,.35);

}

/*==========================================
UTILITY
==========================================*/

.text-center{

    text-align:center;

}

.mt-30{

    margin-top:30px;

}

.mt-50{

    margin-top:50px;

}

.mb-30{

    margin-bottom:30px;

}

.mb-50{

    margin-bottom:50px;

}
/*------------------------------------------------------------------------------------------*/

/*==================================================
        PREMIUM SWIPER HERO
==================================================*/

.hero-slider{

    position:relative;

    width:100%;

    min-height:100vh;

    overflow:hidden;

    background:linear-gradient(135deg,#07171d,#0d262d,#133942);

}

.hero-slider .swiper-slide{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    padding:140px 0 90px;

}

.hero-slider .swiper-slide::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(90deg,
    rgba(7,23,29,.92) 0%,
    rgba(7,23,29,.75) 35%,
    rgba(7,23,29,.25) 100%);

    z-index:1;

}

.hero-slider .container{

    position:relative;

    z-index:5;

}

.hero-wrapper{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:80px;

    align-items:center;

}

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

.hero-content{

    color:#fff;

}

.hero-tag{

    display:inline-block;

    color:#37d7b6;

    font-size:15px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.hero-title{

    font-size:50px;

    line-height:84px;

    font-weight:900;

    color:#fff;

    margin-bottom:25px;

    letter-spacing:-2px;

}

.hero-title span{

    color:#16C79A;

}

.hero-text{

    max-width:620px;

    color:#bfd1d5;

    font-size:19px;

    line-height:34px;

    margin-bottom:45px;

}

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

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:55px;

}

.hero-primary{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 38px;

    border-radius:60px;

    text-decoration:none;

    color:#fff;

    font-weight:700;

    background:linear-gradient(135deg,#16C79A,#11B9C5);

    box-shadow:0 18px 45px rgba(22,199,154,.35);

    transition:.35s;

}

.hero-primary:hover{

    transform:translateY(-5px);

}

.hero-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 38px;

    border-radius:60px;

    text-decoration:none;

    color:#fff;

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

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

    backdrop-filter:blur(12px);

    transition:.35s;

}

.hero-secondary:hover{

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

}

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

.hero-stats{

    display:flex;

    gap:50px;

    flex-wrap:wrap;

}

.hero-stat h2{

    color:#16C79A;

    font-size:46px;

    margin-bottom:8px;

}

.hero-stat p{

    color:#b9c8cb;

    font-size:15px;

}

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

.hero-image{

    position:relative;

}

.hero-image img{

    width:100%;

    height:680px;

    object-fit:cover;

    border-radius:35px;

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

}

/*==========================================
        FLOATING CARD
==========================================*/

.floating-card{

    position:absolute;

    left:-45px;

    bottom:45px;

    width:290px;

    padding:28px;

    border-radius:28px;

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

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

    backdrop-filter:blur(18px);

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

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

}

.floating-card h3{

    font-size:42px;

    color:#16C79A;

    margin-bottom:8px;

}

.floating-card span{

    display:block;

    color:#fff;

    font-weight:700;

    margin-bottom:14px;

}

.floating-card p{

    color:#bfd1d5;

    line-height:26px;

    font-size:14px;

}

/*==========================================
        SWIPER ARROWS
==========================================*/

.swiper-button-next,
.swiper-button-prev{

    width:60px;

    height:60px;

    border-radius:50%;

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

    backdrop-filter:blur(12px);

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

    color:#fff;

    transition:.35s;

}

.swiper-button-next:hover,
.swiper-button-prev:hover{

    background:#16C79A;

}

.swiper-button-next::after,
.swiper-button-prev::after{

    font-size:20px;

    font-weight:700;

}

/*==========================================
        PAGINATION
==========================================*/

.swiper-pagination{

    bottom:35px !important;

}

.swiper-pagination-bullet{

    width:12px;

    height:12px;

    background:#ffffff;

    opacity:.4;

    transition:.35s;

}

.swiper-pagination-bullet-active{

    width:34px;

    border-radius:20px;

    background:#16C79A;

    opacity:1;

}

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

.hero-slider::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    right:-180px;

    top:-180px;

    border-radius:50%;

    background:rgba(22,199,154,.10);

    filter:blur(130px);

}

.hero-slider::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    left:-150px;

    bottom:-150px;

    border-radius:50%;

    background:rgba(17,185,197,.08);

    filter:blur(120px);

}

/*==========================================
        FLOAT ANIMATION
==========================================*/

@keyframes floatCard{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-16px);

}

100%{

transform:translateY(0);

}

}
/*==================================================
            LARGE TABLETS
==================================================*/

@media (max-width:1200px){

.hero-wrapper{

    grid-template-columns:1fr 1fr;

    gap:50px;

}

.hero-title{

    font-size:58px;

    line-height:68px;

}

.hero-image img{

    height:600px;

}

.floating-card{

    width:250px;

    left:-20px;

}

}

/*==================================================
                TABLETS
==================================================*/

@media (max-width:991px){

.hero-slider .swiper-slide{

    padding:140px 0 70px;

}

.hero-wrapper{

    grid-template-columns:1fr;

    gap:60px;

    text-align:center;

}

.hero-content{

    order:2;

}

.hero-image{

    order:1;

}

.hero-title{

    font-size:48px;

    line-height:58px;

}

.hero-text{

    margin:auto;

    margin-bottom:40px;

}

.hero-buttons{

    justify-content:center;

}

.hero-stats{

    justify-content:center;

}

.hero-image img{

    height:520px;

}

.floating-card{

    left:50%;

    bottom:20px;

    transform:translateX(-50%);

    width:280px;

}

.swiper-button-next,
.swiper-button-prev{

    display:none;

}

}

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

@media (max-width:768px){

.hero-slider .swiper-slide{

    padding:120px 0 60px;

}

.hero-title{

    font-size:38px;

    line-height:48px;

    letter-spacing:-1px;

}

.hero-text{

    font-size:17px;

    line-height:30px;

}

.hero-tag{

    font-size:13px;

    padding:10px 18px;

}

.hero-primary,
.hero-secondary{

    width:100%;

    justify-content:center;

}

.hero-buttons{

    flex-direction:column;

    gap:15px;

}

.hero-stats{

    gap:25px;

}

.hero-stat{

    min-width:120px;

}

.hero-stat h2{

    font-size:36px;

}

.hero-image img{

    height:420px;

    border-radius:25px;

}

.floating-card{

    position:relative;

    left:auto;

    bottom:auto;

    transform:none;

    width:100%;

    margin-top:20px;

}

}

/*==================================================
            SMALL MOBILES
==================================================*/

@media (max-width:480px){

.hero-slider .swiper-slide{

    padding:105px 0 45px;

}

.hero-title{

    font-size:30px;

    line-height:40px;

}

.hero-text{

    font-size:15px;

    line-height:28px;

}

.hero-tag{

    font-size:12px;

    letter-spacing:.5px;

}

.hero-image img{

    height:320px;

}

.hero-stat{

    width:48%;

}

.hero-stat h2{

    font-size:30px;

}

.hero-stat p{

    font-size:13px;

}

.swiper-pagination{

    bottom:20px !important;

}

.swiper-pagination-bullet{

    width:10px;

    height:10px;

}

.swiper-pagination-bullet-active{

    width:26px;

}

}

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

.about-section{

    background:#081b22;

    padding:120px 0;
    text-align: start;

}

.about-grid{

    display:grid;

    grid-template-columns:48% 52%;

    gap:70px;

    align-items:center;

}


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

.about-gallery{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:22px;

    height:650px;

}

.gallery-left{

    height:100%;

}

.gallery-left img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:30px;

}

.gallery-right{

    display:grid;

    grid-template-rows:1fr 1fr;

    gap:22px;

}

.gallery-right img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:30px;

    transition:.45s;

}

.gallery-left img{

    transition:.45s;

}


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

.gallery-left img:hover,

.gallery-right img:hover{

    transform:scale(1.05);

}


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

.about-small-title{

    color:#2bd8b0;

    font-size:14px;

    letter-spacing:3px;

    font-weight:700;

    text-transform:uppercase;

}

.about-content h2{

    font-size:45px;

    line-height:64px;

    margin:22px 0;

    color:#fff;

    font-weight:800;

}

.about-content p{

    color:#bcc9cd;

    font-size:18px;

    line-height:34px;

    margin-bottom:25px;

}

.about-buttons{

    display:flex;

    gap:15px;

    margin-top:35px;

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

.about-grid{

grid-template-columns:1fr;

}

.about-gallery{

height:auto;

}

.about-content{

margin-top:40px;

}

.about-content h2{

font-size:40px;

line-height:48px;

}

}

@media(max-width:576px){

.about-gallery{

grid-template-columns:1fr;

}

.gallery-right{

grid-template-columns:1fr 1fr;

grid-template-rows:auto;

}

.gallery-left{

height:300px;

}

.gallery-right img{

height:180px;

}

}

/*====================================================
                OUR FOCUS AREAS
====================================================*/

.features{
    position:relative;
    padding:120px 0;
    background:linear-gradient(180deg,#0c2329 0%,#081b21 100%);
    overflow:hidden;
    text-align: start;
}

/* Background Glow */

.features::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    top:-220px;
    left:-180px;
    border-radius:50%;
    background:rgba(33,220,170,.10);
    filter:blur(120px);
}

.features::after{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    right:-180px;
    bottom:-220px;
    border-radius:50%;
    background:rgba(22,199,154,.08);
    filter:blur(120px);
}

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

.section-header{
    position:relative;
    z-index:2;
    max-width:760px;
    margin-bottom:70px;
}

.section-tag{

    display:inline-block;

    color:#37d7b6;

    font-size:15px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.features .section-title{

    font-size:45px;

    line-height:58px;

    font-weight:800;

    color:#fff;

    margin-bottom:25px;

}

.features .section-subtitle{

    color:#b6c3c7;

    font-size:18px;

    line-height:34px;

    max-width:720px;

}

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

.feature-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:28px;

}

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

.feature-card{

    position:relative;

    min-height:250px;

    padding:12px;

    border-radius:30px;

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

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

    backdrop-filter:blur(16px);

    overflow:hidden;

    transition:.45s ease;

}

/* Bottom Glow */

.feature-card::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    right:-70px;

    bottom:-70px;

    border-radius:50%;

    background:rgba(24,210,165,.18);

    filter:blur(45px);

    transition:.45s;

}

/* Border Shine */

.feature-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:30px;

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

    pointer-events:none;

}

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

.feature-card:hover{

    transform:translateY(-10px);

    border-color:#2fd6b1;

    box-shadow:

    0 20px 45px rgba(0,0,0,.30);

}

.feature-card:hover::before{

    width:240px;

    height:240px;

}

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

.feature-icon{

    width:56px;

    height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:30px;

    font-size:28px;

    color:#33d7b4;

}

/* Remove Background */

.feature-icon i{

    transition:.35s;

}

.feature-card:hover .feature-icon i{

    transform:scale(1.15);

}

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

.feature-card h3{

    color:#fff;

    font-size:30px;

    font-weight:700;

    line-height:38px;

    margin-bottom:18px;

}

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

.feature-card p{

    color:#aebdc2;

    font-size:18px;

    line-height:33px;

}

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

.feature-card{

    opacity:0;

    transform:translateY(60px);

    transition:

        opacity .8s ease,

        transform .8s ease,

        border-color .35s,

        box-shadow .35s;
    text-align: start;

}

.feature-card.show{

    opacity:1;

    transform:translateY(0);

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

/*=========================
    Large Laptop
=========================*/

@media (max-width:1400px){

    .feature-grid{

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

        gap:24px;

    }

    .features .section-title{

        font-size:45px;

        line-height:54px;

    }

}


/*=========================
        Laptop
=========================*/

@media (max-width:1200px){

    .features{

        padding:100px 0;

    }

    .section-header{

        max-width:700px;

    }

    .features .section-title{

        font-size:40px;

        line-height:52px;

    }

    .feature-grid{

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

        gap:20px;

    }

    .feature-card{

        padding:28px;

        min-height:230px;

    }

    .feature-card h3{

        font-size:24px;

        line-height:32px;

    }

    .feature-card p{

        font-size:16px;

        line-height:30px;

    }

}


/*=========================
        Tablet
=========================*/

@media (max-width:991px){

    .feature-grid{

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

    }

    .features .section-title{

        font-size:36px;

        line-height:48px;

    }

    .feature-card{

        min-height:220px;

    }

}


/*=========================
        Mobile
=========================*/

@media (max-width:767px){

    .features{

        padding:80px 0;

    }

    .section-header{

        margin-bottom:45px;

        text-align:center;

    }

    .features .section-title{

        font-size:30px;

        line-height:40px;

    }

    .features .section-subtitle{

        font-size:16px;

        line-height:28px;

    }

    .feature-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .feature-card{

        min-height:auto;

        padding:25px;

    }

    .feature-card h3{

        font-size:22px;

        line-height:30px;

    }

    .feature-card p{

        font-size:15px;

        line-height:28px;

    }

}


/*=========================
    Small Mobile
=========================*/

@media (max-width:480px){

    .features .section-title{

        font-size:28px;

        line-height:38px;

    }

    .section-tag{

        font-size:13px;

        letter-spacing:2px;

    }

    .feature-icon{

        width:48px;

        height:48px;

        font-size:24px;

        margin-bottom:22px;

    }

}


/*====================================================
                IMPACT SECTION
====================================================*/

.impact-section{

    padding:120px 0;

    background:
    radial-gradient(circle at top left,#143a41 0%,#081c21 65%);

    overflow:hidden;

}

.impact-heading{

    max-width:760px;

    margin-bottom:55px;
    text-align: start;

}

.impact-tag{

    color:var(--primary);

    font-size:15px;

    letter-spacing:3px;

    font-weight:700;

    margin-bottom:15px;

}

.impact-heading h2{

    font-size:45px;

    line-height:66px;

    font-weight:800;

    color:#fff;

}

/*=========================
CARDS
=========================*/

.impact-cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(175px,1fr));

    gap:22px;

}

.impact-card{

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

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

    border-radius:26px;

    padding:38px 26px;

    min-height:210px;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:flex-start;

    text-align:left;

    transition:.35s;

    backdrop-filter:blur(18px);

}

.impact-card:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

    box-shadow:

    0 18px 45px rgba(0,0,0,.25);

}

.impact-card h3{

    font-size:34px;

    font-weight:800;

    color:var(--primary);

    margin-bottom:18px;

}

.impact-card h4{

    font-size:19px;

    line-height:30px;

    color:#fff;

    font-weight:600;

}
.impact-card p{

    margin-top:12px;

    color:#aab9bd;

    line-height:28px;

    font-size:15px;

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

    .impact-heading h2{

        font-size:46px;

        line-height:56px;

    }

    .impact-cards{

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

    }

}

@media(max-width:991px){

    .impact-cards{

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

    }

}

@media(max-width:576px){

    .impact-heading h2{

        font-size:34px;

        line-height:42px;

    }

    .impact-cards{

        grid-template-columns:1fr;

    }

}


.impact-card{

    opacity:0;

    transform:translateY(60px);

    transition:

        opacity .7s ease,

        transform .7s ease;

}

.impact-card.show-impact{

    opacity:1;

    transform:translateY(0);

}




/*==================================================
                PROJECTS
==================================================*/

.projects{
    padding:120px 0;
    background:var(--bg);
}

.project-filter{
    display:flex;
    justify-content:center;
    gap:18px;
    margin:55px 0;
    flex-wrap:wrap;
}

.filter-btn{
    padding:14px 28px;
    border-radius:40px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.04);
    color:#fff;
    cursor:pointer;
    transition:.35s;
}

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

.project-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
}

.project-card{
    position:relative;
    border-radius:30px;
    overflow:hidden;
    height:420px;
    cursor:pointer;
}

.project-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.8s;
}

.project-card:hover img{
    transform:scale(1.15);
}

.project-info{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    padding:35px;
    background:linear-gradient(to top,
    rgba(7,26,31,.95),
    rgba(7,26,31,0));
}

.project-info h3{
    font-size:30px;
    margin-bottom:12px;
}

.project-info p{
    color:var(--text);
    line-height:28px;
}

.project-arrow{
    position:absolute;
    top:25px;
    right:25px;
    width:55px;
    height:55px;
    border-radius:50%;
    background:#16C79A;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    opacity:0;
    transition:.35s;
}

.project-card:hover .project-arrow{
    opacity:1;
    transform:rotate(-45deg);
}



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

.zoom{
    overflow:hidden;
}

.zoom img{
    transition:.8s;
}

.zoom:hover img{
    transform:scale(1.12);
}

.overlay-dark{
    position:absolute;
    inset:0;
    background:linear-gradient(
    to top,
    rgba(7,26,31,.90),
    rgba(7,26,31,.15)
    );
}

.border-glow{
    border:1px solid rgba(22,199,154,.25);
}

.hover-lift{
    transition:.4s;
}

.hover-lift:hover{
    transform:translateY(-10px);
}

.blur-card{
    backdrop-filter:blur(18px);
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
}
/*==================================================
                TESTIMONIAL SECTION
==================================================*/

.testimonials{
    padding:120px 0;
    background:var(--bg);
    position:relative;
}

.testimonial-slider{
    margin-top:70px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
}

.testimonial-card{
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:28px;
    padding:40px;
    transition:.4s;
}

.testimonial-card:hover{
    transform:translateY(-12px);
    border-color:var(--primary);
}

.quote-icon{
    width:70px;
    height:70px;
    border-radius:50%;
    background:linear-gradient(135deg,#16C79A,#12B4C1);
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
    color:#fff;
    margin-bottom:25px;
}

.testimonial-card p{
    color:#c8d2d4;
    line-height:32px;
    margin-bottom:30px;
}

.client{
    display:flex;
    align-items:center;
    gap:15px;
}

.client img{
    width:70px;
    height:70px;
    border-radius:50%;
    object-fit:cover;
}

.client h4{
    font-size:20px;
}

.client span{
    color:#9fb0b4;
    font-size:14px;
}





/*==================================================
            WHATSAPP BUTTON
==================================================*/

.whatsapp{
    position:fixed;
    right:30px;
    bottom:30px;
    width:50px;
    height:50px;
    border-radius:50%;
    background:#25D366;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
    box-shadow:0 18px 40px rgba(37,211,102,.35);
    z-index:999;
    transition:.35s;
}

.whatsapp:hover{
    transform:scale(1.1);
}

/*==================================================
            SCROLL TO TOP
==================================================*/

.scrollTop{
    position:fixed;
    left:30px;
    bottom:30px;
    width:60px;
    height:60px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transition:.35s;
    z-index:999;
}

.scrollTop.active{
    opacity:1;
    visibility:visible;
}

.scrollTop:hover{
    transform:translateY(-5px);
}

/*==================================================
                PAGE LOADER
==================================================*/

.loader{
    position:fixed;
    inset:0;
    background:var(--bg);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:99999;
}

.loader span{
    width:80px;
    height:80px;
    border-radius:50%;
    border:6px solid rgba(255,255,255,.15);
    border-top:6px solid var(--primary);
    animation:spin 1s linear infinite;
}

@keyframes spin{

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

100%{
transform:rotate(360deg);
}

}

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

.fade{
    animation:fade .8s ease forwards;
}

@keyframes fade{

0%{
opacity:0;
transform:translateY(40px);
}

100%{
opacity:1;
transform:translateY(0);
}

}

.scale{
    animation:scale .8s ease;
}

@keyframes scale{

0%{
transform:scale(.85);
opacity:0;
}

100%{
transform:scale(1);
opacity:1;
}

}

.rotate{
    transition:.35s;
}

.rotate:hover{
    transform:rotate(5deg);
}

/*==================================================
                SPACING HELPERS
==================================================*/

.pt-120{padding-top:120px;}
.pb-120{padding-bottom:120px;}
.mt-80{margin-top:80px;}
.mb-80{margin-bottom:80px;}
.text-white{color:#fff;}
.text-muted{color:#9EB0B3;}
.w-100{width:100%;}
.d-flex{display:flex;}
.align-center{align-items:center;}
.justify-between{justify-content:space-between;}


/**-------------------------------------------------------------------------------------*/

/*====================================================
            SUCCESS STORIES
====================================================*/

.success-section{
    position:relative;
    padding:120px 0;
    background:linear-gradient(180deg,#0b2026 0%,#08181d 100%);
    overflow:hidden;
    text-align: start;
}

/* Background Glow */

.success-section::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    left:-180px;
    top:-180px;
    border-radius:50%;
    background:rgba(24,210,170,.08);
    filter:blur(130px);
}

.success-section::after{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    right:-150px;
    bottom:-150px;
    border-radius:50%;
    background:rgba(24,210,170,.06);
    filter:blur(120px);
}

/*====================================================
                MAIN WRAPPER
====================================================*/

.success-wrapper{

    position:relative;

    display:grid;

    grid-template-columns:45% 45%;

    background:#0d2227;

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

    border-radius:34px;

    overflow:hidden;

    min-height:760px;

    z-index:2;

}

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

.success-image{

    position:relative;

    overflow:hidden;

}

.success-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s ease;

}

.success-wrapper:hover .success-image img{

    transform:scale(1.05);

}

/* Dark Overlay */

.success-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(0,0,0,.10),
        rgba(0,0,0,.30)
    );

    z-index:1;

}

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

.success-content{

    padding:70px 55px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

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

.success-content .section-tag{

    display:inline-block;

    color:#33d7b4;

    font-size:15px;

    letter-spacing:3px;

    font-weight:700;

    margin-bottom:18px;

    text-transform:uppercase;

}

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

.success-content h2{

    color:#fff;

    font-size:45px;

    line-height:64px;

    font-weight:800;

    margin-bottom:30px;

}

/*====================================================
                PARAGRAPH
====================================================*/

.success-content>p{

    color:#b7c6ca;

    font-size:18px;

    line-height:34px;

    margin-bottom:40px;

    max-width:520px;

}

/*====================================================
            STORY GRID
====================================================*/

.story-grid{
    display:grid;
    grid-template-columns:64% 62%;
    justify-content:space-between;
    gap:30px;
}

.mt-25{

    margin-top:25px;

}
/*====================================================
                STORY CARDS
====================================================*/

.story-card{

    position:relative;

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

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

    border-radius:28px;

    padding:40px;

    min-height:260px;

    overflow:hidden;

    transition:all .4s ease;

    backdrop-filter:blur(18px);

}

/* Green Glow */

.story-card::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    right:-80px;

    bottom:-80px;

    border-radius:50%;

    background:rgba(24,210,170,.12);

    filter:blur(45px);

    transition:.45s;

}

/* Border Highlight */

.story-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:28px;

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

    pointer-events:none;

}

/*====================================================
                    BEFORE
====================================================*/

.story-card.before{

    background:#0b2226;

}

/*====================================================
                    AFTER
====================================================*/

.story-card.after{

    background:linear-gradient(

        180deg,

        rgba(37,72,74,.95),

        rgba(18,45,52,.95)

    );

}

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

.story-card span{

    display:block;

    color:#6db9ff;

    font-size:13px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:24px;

}

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

.story-card h3{

    color:#fff;

    font-size:30px;

    line-height:36px;

    font-weight:700;

    margin-bottom:22px;

}

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

.story-card p{

    color:#b7c4c8;

    font-size:18px;

    line-height:34px;

    margin:0;

}

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

.story-card:hover{

    transform:translateY(-8px);

    border-color:#35d7b5;

    box-shadow:

        0 20px 50px rgba(0,0,0,.28);

}

.story-card:hover::before{

    width:240px;

    height:240px;

}

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

.story-button{

    margin-top:40px;

}

.story-button .btn{

    padding:18px 34px;

    border-radius:60px;

    font-size:16px;

    font-weight:600;

}

.story-button .btn i{

    margin-left:10px;

    transition:.35s;

}

.story-button .btn:hover i{

    transform:translateX(6px);

}

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

.story-card{

    opacity:0;

    transform:translateY(50px);

    transition:

        opacity .8s ease,

        transform .8s ease,

        border-color .35s,

        box-shadow .35s;

}

.story-card.show{

    opacity:1;

    transform:translateY(0);
    padding:14px;

}

/*====================================================
            IMAGE OVERLAY TEXT
(Optional)
====================================================*/

.success-image-caption{

    position:absolute;

    left:35px;

    top:35px;

    color:#fff;

    z-index:5;

    font-size:26px;

    font-weight:600;

    max-width:340px;

    line-height:38px;

}

/*====================================================
            IMAGE DARK FADE
====================================================*/

.success-image::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:180px;

    background:linear-gradient(

        transparent,

        rgba(0,0,0,.55)

    );

    z-index:2;

}
/*====================================================
            SUCCESS STORIES RESPONSIVE
====================================================*/

/*==============================
        1400px
==============================*/

@media (max-width:1400px){

    .success-content{

        padding:60px 45px;

    }

    .success-content h2{

        font-size:45px;

        line-height:58px;

    }

}


/*==============================
        1200px
==============================*/

@media (max-width:1200px){

    .success-section{

        padding:100px 0;

    }

    .success-wrapper{

        grid-template-columns:50% 50%;

    }

    .success-content{

        padding:50px 40px;

    }

    .success-content h2{

        font-size:42px;

        line-height:52px;

    }

    .success-content>p{

        font-size:17px;

        line-height:30px;

    }

    .story-card{

        padding:26px;

        min-height:230px;

    }

    .story-card h3{

        font-size:24px;

        line-height:32px;

    }

    .story-card p{

        font-size:16px;

        line-height:28px;

    }

}


/*==============================
            992px
==============================*/

@media (max-width:992px){

    .success-wrapper{

        grid-template-columns:1fr;

    }

    .success-image{

        height:500px;

    }

    .success-content{

        padding:50px 35px;

    }

    .success-content h2{

        font-size:40px;

        line-height:50px;

    }

}


/*==============================
            768px
==============================*/

@media (max-width:768px){

    .success-section{

        padding:80px 0;

    }

    .success-content{

        padding:40px 25px;

    }

    .success-content h2{

        font-size:34px;

        line-height:44px;

    }

    .success-content>p{

        font-size:16px;

        line-height:28px;

    }

    .story-grid{

        grid-template-columns:1fr;

    }

    .story-card{

        min-height:auto;

    }

    .story-button{

        text-align:center;

    }

    .story-button .btn{

        width:100%;

        justify-content:center;

    }

}


/*==============================
            576px
==============================*/

@media (max-width:576px){

    .success-image{

        height:320px;

    }

    .success-content{

        padding:30px 20px;

    }

    .success-content .section-tag{

        font-size:13px;

        letter-spacing:2px;

    }

    .success-content h2{

        font-size:28px;

        line-height:38px;

    }

    .success-content>p{

        font-size:15px;

        line-height:26px;

        margin-bottom:30px;

    }

    .story-card{

        padding:22px;

        border-radius:22px;

    }

    .story-card span{

        font-size:12px;

        letter-spacing:2px;

    }

    .story-card h3{

        font-size:20px;

        line-height:28px;

        margin-bottom:15px;

    }

    .story-card p{

        font-size:15px;

        line-height:24px;

    }

}


/*==============================
            400px
==============================*/

@media (max-width:400px){

    .success-image{

        height:260px;

    }

    .success-content{

        padding:25px 18px;

    }

    .success-content h2{

        font-size:24px;

        line-height:32px;

    }

    .story-card{

        padding:18px;

    }

    .story-button .btn{

        font-size:15px;

        padding:15px 22px;

    }

}

/**=------------------------------------------------------------------------------------------*/

/*==================================================
                PROGRAMS SECTION
==================================================*/

.programs{
    position:relative;
    padding:120px 0;
    background:#091e24;
    overflow:hidden;
}

.programs::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(22,199,154,.08);
    filter:blur(150px);
    right:-220px;
    top:-150px;
}

.programs::after{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    border-radius:50%;
    background:rgba(0,174,255,.05);
    filter:blur(130px);
    left:-180px;
    bottom:-180px;
}

/*==================================================
                SLIDER
==================================================*/

.program-slider{

    position:relative;

    margin-top:70px;

    overflow:hidden;

}

.program-track{

    display:flex;

    gap:30px;

    transition:transform .7s ease;

    will-change:transform;

}

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

.program-card{

    flex:0 0 calc(33.333% - 20px);

    background:#10252b;

    border-radius:28px;

    overflow:hidden;

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

    transition:.45s;

    position:relative;

}

.program-card:hover{

    transform:translateY(-12px);

    border-color:#16C79A;

    box-shadow:

        0 25px 70px rgba(0,0,0,.35);

}

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

.program-image{

    position:relative;

    height:270px;

    overflow:hidden;

}

.program-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.7s;

}

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

    transform:scale(1.12);

}

/* Dark Gradient */

.program-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        to top,

        rgba(0,0,0,.55),

        transparent

    );

    z-index:1;

}

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

.program-content{

    padding:30px;

}

.program-location{

    display:block;

    color:#64c5ff;

    font-size:14px;

    font-weight:700;

    margin-bottom:18px;

    letter-spacing:.5px;

}

.program-content h3{

    color:#fff;

    font-size:31px;

    line-height:40px;

    margin-bottom:18px;

    font-weight:700;

}

.program-content p{

    color:#b8c7ca;

    font-size:17px;

    line-height:31px;

    margin-bottom:28px;

}

/*==================================================
                LINK
==================================================*/

.program-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#1fd7a8;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.program-link:hover{

    color:#fff;

}

.program-link i{

    transition:.35s;

}

.program-link:hover i{

    transform:translateX(6px);

}
/*==================================================
                NAVIGATION BUTTONS
==================================================*/

.slider-btn{

    position:absolute;

    top:45%;

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

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

    backdrop-filter:blur(12px);

    color:#fff;

    font-size:20px;

    cursor:pointer;

    z-index:20;

    transition:.35s;

}

.slider-btn.prev{

    left:-5px;

}

.slider-btn.next{

    right:-5px;

}

.slider-btn:hover{

    background:#16C79A;

    transform:translateY(-50%) scale(1.08);

    box-shadow:0 15px 35px rgba(22,199,154,.35);

}

.slider-btn{

    transform:translateY(-50%);

}

/*==================================================
                PAGINATION DOTS
==================================================*/

.slider-dots{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-top:45px;

}

.slider-dots .dot{

    width:12px;

    height:12px;

    border-radius:50%;

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

    cursor:pointer;

    transition:.35s;

}

.slider-dots .dot.active{

    width:38px;

    border-radius:30px;

    background:#16C79A;

}

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

.program-card::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    right:-120px;

    top:-120px;

    border-radius:50%;

    background:rgba(22,199,154,.10);

    filter:blur(45px);

    opacity:0;

    transition:.45s;

}

.program-card:hover::before{

    opacity:1;

}

.program-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:28px;

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

    pointer-events:none;

}

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

.program-image::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.28),

        transparent

    );

    transform:skewX(-25deg);

    transition:1s;

    z-index:3;

}

.program-card:hover .program-image::after{

    left:170%;

}

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

.program-content{

    position:relative;

    z-index:5;

}

.program-content h3{

    transition:.35s;

}

.program-card:hover h3{

    color:#16C79A;

}

/*==================================================
                CARD REVEAL
==================================================*/

.program-card{

    opacity:0;

    transform:translateY(50px);

}

.program-card.show{

    opacity:1;

    transform:translateY(0);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

/*==================================================
                SCROLLBAR HIDE
==================================================*/

.program-slider{

    scrollbar-width:none;

}

.program-slider::-webkit-scrollbar{

    display:none;

}

/*==================================================
                SECTION DECORATION
==================================================*/

.programs .container{

    position:relative;

    z-index:2;

}

.programs .hero-tag{

    margin-bottom:20px;

}

.programs .section-title{

    margin-bottom:20px;

}

.programs .section-subtitle{

    max-width:720px;

    margin:0 auto;

    color:#b8c7ca;

    line-height:30px;

}

/*==================================================
                OPTIONAL BADGE
==================================================*/

.program-badge{

    position:absolute;

    top:20px;

    left:20px;

    background:rgba(22,199,154,.95);

    color:#fff;

    padding:8px 16px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

    z-index:5;

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

/*==============================
            1400px
==============================*/

@media (max-width:1400px){

    .program-card{
        flex:0 0 calc(33.333% - 22px);
    }

    .program-image{
        height:250px;
    }

    .program-content h3{
        font-size:28px;
        line-height:36px;
    }

}

/*==============================
            1200px
==============================*/

@media (max-width:1200px){

    .programs{
        padding:100px 0;
    }

    .program-track{
        gap:25px;
    }

    .program-card{
        flex:0 0 calc(50% - 13px);
    }

    .program-image{
        height:240px;
    }

    .program-content{
        padding:28px;
    }

    .program-content h3{
        font-size:26px;
    }

    .program-content p{
        font-size:16px;
        line-height:28px;
    }

}

/*==============================
            992px
==============================*/

@media (max-width:992px){

    .program-card{
        flex:0 0 calc(50% - 12px);
    }

    .program-image{
        height:220px;
    }

    .slider-btn{
        width:50px;
        height:50px;
        font-size:18px;
    }

}

/*==============================
            768px
==============================*/

@media (max-width:768px){

    .programs{
        padding:80px 0;
    }

    .program-track{
        gap:20px;
    }

    .program-card{
        flex:0 0 100%;
    }

    .program-image{
        height:240px;
    }

    .program-content{
        padding:24px;
    }

    .program-content h3{
        font-size:24px;
        line-height:32px;
    }

    .program-content p{
        font-size:15px;
        line-height:26px;
    }

    .slider-btn{
        display:none;
    }

    .slider-dots{
        margin-top:35px;
    }

}

/*==============================
            576px
==============================*/

@media (max-width:576px){

    .programs{
        padding:70px 0;
    }

    .program-image{
        height:220px;
    }

    .program-content{
        padding:22px;
    }

    .program-location{
        font-size:13px;
    }

    .program-content h3{
        font-size:22px;
        line-height:30px;
    }

    .program-content p{
        font-size:15px;
        line-height:24px;
    }

    .program-link{
        font-size:15px;
    }

    .slider-dots .dot{
        width:10px;
        height:10px;
    }

    .slider-dots .dot.active{
        width:30px;
    }

}

/*==============================
            420px
==============================*/

@media (max-width:420px){

    .program-image{
        height:200px;
    }

    .program-content{
        padding:20px;
    }

    .program-content h3{
        font-size:20px;
        line-height:28px;
    }

    .program-content p{
        font-size:14px;
        line-height:23px;
    }

    .program-link{
        font-size:14px;
    }

}

/*----------------------------------------------------------------------------------------*/

/*==================================================
                GALLERY SECTION
==================================================*/

.gallery{

    position:relative;

    padding:120px 0;

    background:#081d22;

    overflow:hidden;

}

.gallery::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    left:-220px;

    top:-180px;

    border-radius:50%;

    background:rgba(22,199,154,.08);

    filter:blur(140px);

}

.gallery::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

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

    filter:blur(130px);

}

/*==================================================
                GALLERY GRID
==================================================*/

.gallery-grid{

    display:grid;

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

    grid-auto-rows:180px;

    gap:22px;

    margin-top:70px;

    position:relative;

    z-index:2;

}

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

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:26px;

    cursor:pointer;

    background:#10252b;

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

    transition:.45s;

}

.gallery-item:hover{

    transform:translateY(-10px);

    border-color:#16C79A;

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

}

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

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.8s;

}

.gallery-item:hover img{

    transform:scale(1.12);

}

/*==================================================
                SIZES
==================================================*/

.gallery-large{

    grid-column:span 2;

    grid-row:span 2;

}

.gallery-wide{

    grid-column:span 2;

}

.gallery-tall{

    grid-row:span 2;

}

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

.gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    padding:28px;

    background:linear-gradient(

        to top,

        rgba(4,18,22,.95),

        rgba(4,18,22,.15)

    );

    opacity:0;

    transition:.4s;

}

.gallery-item:hover .gallery-overlay{

    opacity:1;

}

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

.gallery-content{

    width:100%;

}

.gallery-content span{

    display:inline-block;

    color:#16C79A;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:10px;

    text-transform:uppercase;

}

.gallery-content h3{

    color:#fff;

    font-size:26px;

    font-weight:700;

    line-height:34px;

    margin-bottom:18px;

}

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

.gallery-icon{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#16C79A;

    color:#fff;

    text-decoration:none;

    transition:.35s;

}

.gallery-icon:hover{

    background:#fff;

    color:#16C79A;

    transform:rotate(90deg);

}

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

.gallery-btn{

    margin-top:60px;

}

.gallery-btn .btn{

    padding:18px 34px;

    border-radius:60px;

    font-weight:600;

}

.gallery-btn .btn i{

    margin-left:10px;

    transition:.35s;

}

.gallery-btn .btn:hover i{

    transform:translateX(6px);

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

/*==============================
            1400px
==============================*/

@media (max-width:1400px){

    .gallery-grid{

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

        gap:20px;

    }

}

/*==============================
            1200px
==============================*/

@media (max-width:1200px){

    .gallery{

        padding:100px 0;

    }

    .gallery-grid{

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

        grid-auto-rows:190px;

    }

    .gallery-large{

        grid-column:span 2;

        grid-row:span 2;

    }

    .gallery-wide{

        grid-column:span 2;

    }

    .gallery-tall{

        grid-row:span 2;

    }

}

/*==============================
            992px
==============================*/

@media (max-width:992px){

    .gallery-grid{

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

        grid-auto-rows:220px;

    }

    .gallery-large,

    .gallery-wide,

    .gallery-tall{

        grid-column:span 1;

        grid-row:span 1;

    }

    .gallery-content h3{

        font-size:22px;

    }

}

/*==============================
            768px
==============================*/

@media (max-width:768px){

    .gallery{

        padding:80px 0;

    }

    .gallery-grid{

        grid-template-columns:1fr;

        grid-auto-rows:280px;

        gap:20px;

    }

    .gallery-large,

    .gallery-wide,

    .gallery-tall{

        grid-column:span 1;

        grid-row:span 1;

    }

    .gallery-content{

        text-align:center;

    }

    .gallery-overlay{

        justify-content:center;

        align-items:center;

        text-align:center;

    }

    .gallery-icon{

        margin:20px auto 0;

    }

}

/*==============================
            480px
==============================*/

@media (max-width:480px){

    .gallery-grid{

        grid-auto-rows:240px;

    }

    .gallery-content h3{

        font-size:20px;

        line-height:28px;

    }

    .gallery-content span{

        font-size:13px;

    }

}

/*---------------------------------------------------------------------------------------------------*/

/*==================================================
            PARTNER SECTION
==================================================*/

.partner-section{
    position:relative;
    padding:120px 0;
    background:#08181d;
    overflow:hidden;
    text-align: start;
}

.partner-section::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    left:-180px;
    top:-180px;
    border-radius:50%;
    background:rgba(22,199,154,.08);
    filter:blur(140px);
}

.partner-section::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    right:-180px;
    bottom:-180px;
    border-radius:50%;
    background:rgba(0,174,255,.05);
    filter:blur(130px);
}

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

.partner-wrapper{

    position:relative;

    display:grid;

    grid-template-columns:48% 52%;

    gap:60px;

    align-items:center;

    z-index:2;

}

/*==================================================
                LEFT CARD
==================================================*/

.partner-card{

    position:relative;

    background:linear-gradient(
        135deg,
        rgba(42,73,72,.92),
        rgba(30,54,57,.92)
    );

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

    border-radius:34px;

    padding:50px;

    backdrop-filter:blur(18px);

    overflow:hidden;

    transition:.45s;

}

.partner-card:hover{

    transform:translateY(-8px);

    border-color:#4CE0C4;

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

}

.partner-card::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    right:-80px;

    top:-80px;

    border-radius:50%;

    background:rgba(76,224,196,.10);

    filter:blur(45px);

}

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

.partner-tag{

    display:block;

    color:#5FE5CB;

    font-size:15px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:28px;

}

.partner-card h3{

    color:#fff;

    font-size:42px;

    line-height:54px;

    font-weight:700;

    margin-bottom:35px;

}

.partner-list{

    margin:0;

    padding-left:22px;

}

.partner-list li{

    color:#d8e4e3;

    font-size:19px;

    line-height:38px;

    margin-bottom:8px;

}

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

.partner-small-title{

    display:inline-block;

    color:#5FE5CB;

    font-size:15px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:20px;

}

.partner-content h2{

    color:#fff;

    font-size:45px;

    line-height:74px;

    font-weight:800;

    margin-bottom:24px;

}

.partner-content p{

    color:#b8c7ca;

    font-size:21px;

    line-height:38px;

    max-width:650px;

    margin-bottom:45px;

}

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

.partner-buttons{

    display:flex;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

/* Primary Button */

.partner-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 36px;

    border-radius:60px;

    background:linear-gradient(
        135deg,
        #6FE8E5,
        #53B8F2
    );

    color:#fff;

    font-size:18px;

    font-weight:700;

    text-decoration:none;

    transition:.35s;

}

.partner-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(83,184,242,.35);

}

/* Outline Button */

.btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 34px;

    border-radius:60px;

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

    color:#fff;

    font-size:18px;

    font-weight:600;

    text-decoration:none;

    transition:.35s;

}

.btn-outline:hover{

    background:#ffffff;

    color:#08181d;

    border-color:var(--heading);

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

/*==============================
            1400px
==============================*/

@media (max-width:1400px){

    .partner-content h2{

        font-size:45px;

        line-height:66px;

    }

}

/*==============================
            1200px
==============================*/

@media (max-width:1200px){

    .partner-section{

        padding:100px 0;

    }

    .partner-wrapper{

        gap:45px;

    }

    .partner-card{

        padding:40px;

    }

    .partner-card h3{

        font-size:34px;

        line-height:46px;

    }

    .partner-content h2{

        font-size:45px;

        line-height:60px;

    }

    .partner-content p{

        font-size:18px;

        line-height:32px;

    }

}

/*==============================
            992px
==============================*/

@media (max-width:992px){

    .partner-wrapper{

        grid-template-columns:1fr;

        gap:50px;

    }

    .partner-card{

        order:2;

    }

    .partner-content{

        order:1;

    }

    .partner-content h2{

        font-size:46px;

        line-height:56px;

    }

}

/*==============================
            768px
==============================*/

@media (max-width:768px){

    .partner-section{

        padding:80px 0;

    }

    .partner-card{

        padding:35px 28px;

        border-radius:28px;

    }

    .partner-card h3{

        font-size:30px;

        line-height:40px;

    }

    .partner-list li{

        font-size:17px;

        line-height:32px;

    }

    .partner-content h2{

        font-size:40px;

        line-height:50px;

    }

    .partner-content p{

        font-size:17px;

        line-height:30px;

    }

    .partner-buttons{

        flex-direction:column;

        align-items:stretch;

    }

    .partner-btn,

    .btn-outline{

        width:100%;

        justify-content:center;

    }

}

/*==============================
            576px
==============================*/

@media (max-width:576px){

    .partner-card{

        padding:28px 22px;

    }

    .partner-tag,

    .partner-small-title{

        font-size:13px;

        letter-spacing:2px;

    }

    .partner-card h3{

        font-size:24px;

        line-height:34px;

        margin-bottom:25px;

    }

    .partner-list li{

        font-size:15px;

        line-height:28px;

    }

    .partner-content h2{

        font-size:32px;

        line-height:40px;

    }

    .partner-content p{

        font-size:15px;

        line-height:27px;

    }

    .partner-btn,

    .btn-outline{

        font-size:15px;

        padding:15px 24px;

    }

}

/*---------------------------------------------------------------------------------------------------*/



/*=========================================
        GET INVOLVED
==========================================*/

.get-involved{
    padding:40px 0;
    position:relative;
    overflow:hidden;
    text-align:start;

    background:
        linear-gradient(rgba(7,24,29,.82), rgba(7,24,29,.82)),
        url("https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?w=2000");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;
}

.get-involved::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    left:-150px;
    top:-150px;
    border-radius:50%;
    background:#25c8b430;
    filter:blur(120px);
}

.get-involved::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    right:-180px;
    bottom:-180px;
    border-radius:50%;
    background:#25c8b420;
    filter:blur(120px);
}

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

.involved-header{
    text-align:center;
    /*max-width:850px;*/
    margin:auto;
    margin-bottom:70px;
    text-align: start;
}

.involved-tag{
    display:inline-block;
    color:#54d9c7;
    font-size:15px;
    font-weight:700;
    letter-spacing:3px;
    margin-bottom:20px;
    text-transform:uppercase;
}

.involved-header h2{
    color:#fff;
    font-size:45px;
    line-height:1.2;
    font-weight:800;
    margin-bottom:20px;
}

.involved-header p{
    color:#b8c8cb;
    font-size:18px;
    line-height:32px;
}

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

.involved-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:25px;
}

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

.involved-card{
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(15px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:28px;
    padding:22px 22px;
    transition:.4s;
    position:relative;
    overflow:hidden;
    min-height:260px;
}

.involved-card::before{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    right:-90px;
    bottom:-90px;
    border-radius:50%;
    background:#2fd6c51c;
    transition:.4s;
}

.involved-card:hover{
    transform:translateY(-10px);
    border-color:#3ddac8;
    box-shadow:0 20px 45px rgba(0,0,0,.25);
}

.involved-card:hover::before{
    transform:scale(1.4);
}

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

.card-icon{
    width:65px;
    height:65px;
    border-radius:18px;
    background:linear-gradient(135deg,#ffd66b,#f3a321);
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:28px;
    margin-bottom:25px;
}

.card-icon i{
    transition:.4s;
}

.involved-card:hover .card-icon i{
    transform:rotate(-10deg) scale(1.1);
}

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

.involved-card h3{
    color:#fff;
    font-size:24px;
    margin-bottom:18px;
    font-weight:700;
}

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

.involved-card p{
    color:#b6c6ca;
    line-height:29px;
    font-size:16px;
}

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

@media(max-width:1400px){

.involved-grid{
    grid-template-columns:repeat(5,1fr);
}

}

@media(max-width:1200px){

.involved-header h2{
    font-size:44px;
}

.involved-grid{
    grid-template-columns:repeat(3,1fr);
}

}

@media(max-width:991px){

.get-involved{
    padding:90px 0;
}

.involved-header h2{
    font-size:38px;
}

.involved-grid{
    grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:767px){

.involved-header{
    margin-bottom:45px;
}

.involved-header h2{
    font-size:32px;
}

.involved-header p{
    font-size:16px;
    line-height:28px;
}

.involved-grid{
    grid-template-columns:1fr;
}

.involved-card{
    min-height:auto;
}

}

/*--------------------------------------------------------------------------------------*/

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

.testimonial-section{
    position:relative;
    padding:120px 0;
    background:#07181d;
    overflow:hidden;
}

.testimonial-section::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    top:-220px;
    left:-180px;
    border-radius:50%;
    background:rgba(76,224,196,.08);
    filter:blur(150px);
}

.testimonial-section::after{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    right:-180px;
    bottom:-180px;
    border-radius:50%;
    background:rgba(255,183,77,.07);
    filter:blur(140px);
}

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

.testimonial-section .container{
    position:relative;
    z-index:2;
}

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

.testimonial-heading{
    text-align:center;
    max-width:850px;
    margin:0 auto 70px;
}

.section-tag{
    display:inline-block;
    color:#4CE0C4;
    font-size:15px;
    font-weight:700;
    letter-spacing:4px;
    text-transform:uppercase;
    margin-bottom:18px;
}

.testimonial-heading h2{
    color:var(--heading);
    font-size:45px;
    line-height:68px;
    font-weight:800;
    margin-bottom:25px;
}

.testimonial-heading p{
    color:#b8c7ca;
    font-size:18px;
    line-height:34px;
    max-width:720px;
    margin:auto;
}

/*==================================================
            SWIPER
==================================================*/

.testimonialSwiper{
    width:100%;
    overflow:hidden;
    padding:15px 0 80px;
}

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

.testimonialSwiper .swiper-slide{
    display:flex;
    justify-content:center;
    align-items:center;
    height:auto;
}

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

.testimonial-card{

    position:relative;

    width:100%;
    max-width:850px;

    padding:50px;

    border-radius:30px;

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

    backdrop-filter:blur(18px);

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

    overflow:hidden;

    transition:.45s ease;

}

/* Decorative Glow */

.testimonial-card::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    right:-130px;

    top:-130px;

    border-radius:50%;

    background:rgba(76,224,196,.08);

    filter:blur(10px);

}

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

.quote-icon{

    width:72px;

    height:72px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        #FFD76A,
        #F5A623
    );

    color:#fff;

    font-size:30px;

    margin-bottom:35px;

}

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

.testimonial-text{

    color:#d7e0e2;

    font-size:20px;

    line-height:36px;

    margin-bottom:45px;

}

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

.testimonial-footer{

    display:flex;

    align-items:center;

    gap:18px;

}

.testimonial-image{

    width:75px;

    height:75px;

    border-radius:50%;

    overflow:hidden;

    border:3px solid rgba(76,224,196,.30);

    flex-shrink:0;

}

.testimonial-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.testimonial-info h4{

    color:#fff;

    font-size:22px;

    font-weight:700;

    margin-bottom:6px;

}

.testimonial-info span{

    color:#4CE0C4;

    font-size:15px;

    letter-spacing:1px;

    text-transform:uppercase;

}
/*==================================================
                HOVER EFFECTS
==================================================*/

.testimonial-card:hover{

    transform:translateY(-12px);

    border-color:rgba(76,224,196,.45);

    box-shadow:
        0 25px 60px rgba(0,0,0,.35),
        0 0 35px rgba(76,224,196,.12);

}

.testimonial-card:hover::before{

    transform:scale(1.4);

    transition:.6s;

}

/* Quote Animation */

.quote-icon{

    transition:.4s ease;

}

.testimonial-card:hover .quote-icon{

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

}

/* Image Animation */

.testimonial-image{

    transition:.4s ease;

}

.testimonial-card:hover .testimonial-image{

    transform:scale(1.08);

}

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

.testimonial-card::after{

    content:"";

    position:absolute;

    top:-150%;

    left:-70%;

    width:40%;

    height:300%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.12),
        transparent
    );

    transform:rotate(25deg);

    transition:1s;

}

.testimonial-card:hover::after{

    left:150%;

}

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

.testimonial-text{

    transition:.4s;

}

.testimonial-card:hover .testimonial-text{

    color:var(--heading);

}

.testimonial-info h4{

    transition:.35s;

}

.testimonial-card:hover .testimonial-info h4{

    color:#4CE0C4;

}

/*==================================================
            SWIPER PAGINATION
==================================================*/

.testimonialSwiper .swiper-pagination{

    bottom:10px !important;

}

.testimonialSwiper .swiper-pagination-bullet{

    width:12px;

    height:12px;

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

    opacity:1;

    transition:.35s;

}

.testimonialSwiper .swiper-pagination-bullet-active{

    width:34px;

    border-radius:30px;

    background:#4CE0C4;

}

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

.testimonialSwiper .swiper-button-next,
.testimonialSwiper .swiper-button-prev{

    width:55px;

    height:55px;

    border-radius:50%;

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

    backdrop-filter:blur(10px);

    color:var(--heading);

    transition:.35s;

}

.testimonialSwiper .swiper-button-next::after,
.testimonialSwiper .swiper-button-prev::after{

    font-size:18px;

    font-weight:700;

}

.testimonialSwiper .swiper-button-next:hover,
.testimonialSwiper .swiper-button-prev:hover{

    background:#4CE0C4;

    color:#07181d;

}

/*==================================================
            FLOAT ANIMATION
==================================================*/

@keyframes floatingCard{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

.testimonialSwiper .swiper-slide-active .testimonial-card{

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

}

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

@media(max-width:1200px){

.testimonial-heading h2{

    font-size:46px;

    line-height:58px;

}

.testimonial-card{

    max-width:700px;

    padding:40px;

}

}

@media(max-width:991px){

.testimonial-section{

    padding:90px 0;

}

.testimonial-heading{

    margin-bottom:50px;

}

.testimonial-heading h2{

    font-size:38px;

    line-height:48px;

}

.testimonial-card{

    max-width:100%;

    padding:35px;

}

.testimonial-text{

    font-size:18px;

    line-height:32px;

}

.testimonialSwiper .swiper-button-next,
.testimonialSwiper .swiper-button-prev{

    display:none;

}

}

@media(max-width:767px){

.testimonial-section{

    padding:70px 0;

}

.testimonial-heading h2{

    font-size:30px;

    line-height:40px;

}

.testimonial-heading p{

    font-size:16px;

    line-height:28px;

}

.testimonial-card{

    padding:28px;

    border-radius:24px;

}

.quote-icon{

    width:60px;

    height:60px;

    font-size:24px;

    margin-bottom:25px;

}

.testimonial-text{

    font-size:16px;

    line-height:28px;

    margin-bottom:30px;

}

.testimonial-image{

    width:60px;

    height:60px;

}

.testimonial-info h4{

    font-size:18px;

}

.testimonial-info span{

    font-size:13px;

}

}

@media(max-width:480px){

.testimonial-heading h2{

    font-size:26px;

    line-height:36px;

}

.section-tag{

    font-size:13px;

    letter-spacing:3px;

}

.testimonial-card{

    padding:22px;

}

}

/*-------------------------------------------------------------------------------------------------*/

/*==================================================
            NEWS & EVENTS SECTION
==================================================*/

.news-events-section{
    position:relative;
    padding:120px 0;
    background:#071417;
    overflow:hidden;
    text-align: start;
}

/* Background Glow */

.news-events-section::before{
    content:"";
    position:absolute;
    width:650px;
    height:650px;
    left:-280px;
    top:-280px;
    border-radius:50%;
    background:rgba(50,185,160,.06);
    filter:blur(170px);
}

.news-events-section::after{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    right:-180px;
    bottom:-220px;
    border-radius:50%;
    background:rgba(35,170,150,.05);
    filter:blur(170px);
}

.news-events-section .container{
    position:relative;
    z-index:5;
}

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

.news-heading{

    max-width:780px;

    margin-bottom:70px;

}

.news-tag{

    display:inline-block;

    color:#48D7BF;

    font-size:15px;

    font-weight:700;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:22px;

}

.news-heading h2{

    color:#fff;

    font-size:45px;

    line-height:76px;

    font-weight:800;

    letter-spacing:-2px;

}

/*==================================================
            CARD AREA
==================================================*/

.news-slider{

    position:relative;

    overflow:hidden;

}

.news-track{

    display:flex;

    gap:22px;

    align-items:stretch;

}

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

.news-card{

    flex:0 0 290px;

    min-height:370px;

    padding:38px 30px;

    background:#0B1C1F;

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

    border-radius:34px;

    position:relative;

    overflow:hidden;

    transition:.4s;

}

/* Inner Glow */

.news-card::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    right:-110px;

    bottom:-110px;

    border-radius:50%;

    background:rgba(58,214,187,.08);

    filter:blur(40px);

    opacity:0;

    transition:.45s;

}

.news-card:hover::before{

    opacity:1;

}

.news-card:hover{

    transform:translateY(-10px);

    border-color:#46D9C6;

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

}

/*==================================================
            CATEGORY
==================================================*/

.card-category{

    display:inline-block;

    color:#45D8C4;

    font-size:15px;

    font-weight:700;

    letter-spacing:3px;

    margin-bottom:30px;

    text-transform:uppercase;

}

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

.news-card h3{

    color:#fff;

    font-size:24px;

    line-height:38px;

    font-weight:700;

    margin-bottom:20px;

}

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

.news-card p{

    color:#AFC2C4;

    font-size:18px;

    line-height:36px;

}

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

.news-next{

    position:absolute;

    top:50%;

    right:-25px;

    transform:translateY(-50%);

    width:68px;

    height:68px;

    border-radius:50%;

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

    background:#0E2023;

    color:#fff;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    transition:.35s;

}

.news-next:hover{

    background:#49D9C7;

    color:#081416;

    border-color:#49D9C7;

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

@media(max-width:1400px){

.news-heading h2{

    font-size:45px;

    line-height:68px;

}

.news-card{

    flex:0 0 270px;

}

}

@media(max-width:1200px){

.news-events-section{

    padding:100px 0;

}

.news-heading{

    margin-bottom:55px;

}

.news-heading h2{

    font-size:40px;

    line-height:60px;

}

.news-card{

    flex:0 0 250px;

    min-height:340px;

    padding:32px 25px;

}

.news-card h3{

    font-size:22px;

    line-height:34px;

}

.news-card p{

    font-size:16px;

    line-height:30px;

}

}

@media(max-width:992px){

.news-heading h2{

    font-size:42px;

    line-height:50px;

}

.news-card{

    flex:0 0 230px;

    min-height:320px;

}

.news-next{

    display:none;

}

}

@media(max-width:768px){

.news-events-section{

    padding:80px 0;

}

.news-heading{

    margin-bottom:40px;

}

.news-heading h2{

    font-size:34px;

    line-height:42px;

}

.news-track{

    gap:18px;

}

.news-card{

    flex:0 0 260px;

}

}

@media(max-width:576px){

.news-heading h2{

    font-size:28px;

    line-height:36px;

}

.news-tag{

    font-size:13px;

}

.news-card{

    flex:0 0 230px;

    min-height:290px;

    padding:25px;

}

.news-card h3{

    font-size:20px;

    line-height:30px;

}

.news-card p{

    font-size:15px;

    line-height:28px;

}

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

.news-card{

    transition:

    transform .45s,

    border-color .45s,

    box-shadow .45s;

}

.news-card:hover{

    transform:translateY(-12px);

    border-color:#4CE0C4;

    box-shadow:

    0 25px 55px rgba(0,0,0,.35);

}

.news-card h3{

    transition:.35s;

}

.news-card:hover h3{

    color:#4CE0C4;

}


/*---------------------------------------------------------------------------------------------------*/

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

.donation-cta{
    position:relative;
    width:100%;
    min-height:720px;
    padding:120px 0;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#07181d;
}

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

.donation-bg{
    position:absolute;
    inset:0;
    z-index:1;
}

.donation-bg img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transform:scale(1.05);
}

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

.donation-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(5,15,18,.85) 0%,
        rgba(5,15,18,.55) 45%,
        rgba(5,15,18,.65) 100%
    );
    z-index:2;
}

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

.donation-cta .container{
    position:relative;
    z-index:5;
    width:100%;
    max-width:1320px;
    margin:auto;
}

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

.donation-box{

    position:relative;

    width:72%;

    max-width:920px;

    padding:70px;

    border-radius:40px;

    background:rgba(8,22,25,.72);

    backdrop-filter:blur(18px);

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

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

    overflow:hidden;

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

}

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

.donation-box::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    right:-120px;

    top:-120px;

    border-radius:50%;

    background:rgba(77,224,198,.10);

    filter:blur(55px);

}

.donation-box::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    left:-100px;

    bottom:-100px;

    border-radius:50%;

    background:rgba(0,150,255,.06);

    filter:blur(55px);

}

/*==================================================
            SMALL TAG
==================================================*/

.donation-tag{

    display:inline-block;

    color:#52E0CC;

    font-size:15px;

    font-weight:700;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:22px;

}

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

.donation-box h2{

    color:#fff;

    font-size:45px;

    line-height:74px;

    font-weight:800;

    letter-spacing:-2px;

    margin-bottom:28px;

    max-width:720px;

}

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

.donation-box p{

    color:#D5E0E2;

    font-size:21px;

    line-height:38px;

    max-width:650px;

    margin-bottom:45px;
    margin-left: 42px;
   
}

/*==================================================
            BUTTON AREA
==================================================*/

.donation-buttons{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;
    margin-left: 124px;
}
/*==================================================
                BUTTONS
==================================================*/

.btn-donate,
.btn-outline{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:1;
    height:64px;
    padding:0 34px;
    border-radius:60px;
    text-decoration:none;
    font-size:18px;
    font-weight:700;
    transition:all .4s ease;
    position:relative;
    overflow:hidden;
    z-index:1;
}

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

.btn-donate{
    background:linear-gradient(135deg,#53E3D8,#48A7FF);
    color:#fff;
    box-shadow:0 15px 35px rgba(72,167,255,.35);
}

.btn-donate:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 45px rgba(72,167,255,.45);
}

.btn-donate::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:60%;
    height:100%;
    background:rgba(255,255,255,.35);
    transform:skewX(-25deg);
    transition:.8s;
}

.btn-donate:hover::before{
    left:150%;
}

/*==============================
      OUTLINE BUTTON
==============================*/

.btn-outline{
    color:#fff;
    border:1px solid rgba(255,255,255,.25);
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(10px);
}

.btn-outline:hover{
    background:#fff;
    color:#07181d;
    border-color:#fff;
    transform:translateY(-6px);
}

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

.donation-box{
    transition:all .5s ease;
}

.donation-box:hover{
    transform:translateY(-8px);
    box-shadow:
        0 35px 90px rgba(0,0,0,.45);
}

/*==================================================
            FLOAT ANIMATION
==================================================*/

@keyframes floatPanel{

    0%{
        transform:translateY(0px);
    }

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

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

}

.donation-box{

    animation:floatPanel 6s ease-in-out infinite;
    margin-left: 182px;
}

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

@media(max-width:1200px){

.donation-box{

    width:85%;
    padding:60px;

}

.donation-box h2{

    font-size:58px;
    line-height:64px;

}

}

@media(max-width:991px){

.donation-cta{

    min-height:auto;
    padding:90px 0;

}

.donation-box{

    width:100%;
    padding:45px;

}

.donation-box h2{

    font-size:46px;
    line-height:54px;

}

.donation-box p{

    font-size:18px;
    line-height:32px;

}

}

@media(max-width:767px){

.donation-box{

    padding:35px;
    border-radius:28px;

}

.donation-tag{

    font-size:13px;
    letter-spacing:3px;

}

.donation-box h2{

    font-size:36px;
    line-height:44px;

}

.donation-box p{

    font-size:16px;
    line-height:28px;

}

.donation-buttons{

    flex-direction:column;
    align-items:stretch;
    gap:15px;
   
}

.btn-donate,
.btn-outline{

    width:100%;

}

}

@media(max-width:480px){

.donation-cta{

    padding:70px 0;

}

.donation-box{

    padding:25px;
    border-radius:22px;

}

.donation-box h2{

    font-size:30px;
    line-height:38px;

}

.donation-box p{

    font-size:15px;
    line-height:25px;

}

.btn-donate,
.btn-outline{

    font-size:14px;
    height:54px;
    padding: 15px;
}

}

/*---------------------------------------------------------------------------------------------------*/

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

.footer{
    background:#07181d;
    color:#d9e4e6;
    padding:90px 0 30px;
    position:relative;
    overflow:hidden;
    text-align: start;
}

.footer::before{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    top:-180px;
    right:-120px;
    border-radius:50%;
    background:rgba(70,224,205,.08);
    filter:blur(80px);
}

.footer::after{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    bottom:-140px;
    left:-100px;
    border-radius:50%;
    background:rgba(56,132,255,.06);
    filter:blur(70px);
}

.footer .container{
    position:relative;
    z-index:2;
}

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

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.3fr;
    gap:60px;
    padding-bottom:50px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

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

.footer h2{
    color:#fff;
    font-size:34px;
    margin-bottom:20px;
    font-weight:700;
}

.footer h3{
    color:#fff;
    font-size:22px;
    margin-bottom:25px;
    position:relative;
}

.footer h3::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-10px;
    width:45px;
    height:3px;
    background:#4EE2CF;
    border-radius:5px;
}

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

.footer-about p{
    line-height:32px;
    font-size:16px;
    color:#cfd9db;
    margin-bottom:30px;
}

/*=========================================
        LINKS
=========================================*/

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

.footer ul li{
    margin-bottom:16px;
}

.footer ul li a{
    color:#cfd9db;
    text-decoration:none;
    transition:.35s;
    display:inline-block;
}

.footer ul li a:hover{
    color:#4EE2CF;
    transform:translateX(6px);
}

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

.footer-contact li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    line-height:28px;
    color:#cfd9db;
}

.footer-contact i{
    color:#4EE2CF;
    font-size:17px;
    margin-top:5px;
    width:18px;
}

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

.footer-social{
    display:flex;
    gap:15px;
}

.footer-social a{
    width:48px;
    height:48px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    color:#fff;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    transition:.35s;
}

.footer-social a:hover{
    background:#4EE2CF;
    color:#07181d;
    transform:translateY(-5px);
}

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

.footer-bottom{
    padding-top:30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
}

.footer-bottom p{
    margin:0;
    color:#bfcfd2;
    font-size:15px;
    line-height:28px;
}

.footer-bottom strong{
    color:#4EE2CF;
    font-weight:700;
}

/*=========================================
        POLICY LINKS
=========================================*/

.footer-policy{
    display:flex;
    align-items:center;
    gap:18px;
}

.footer-policy span{
    color:rgba(255,255,255,.25);
}

.footer-policy a{
    color:#cfd9db;
    text-decoration:none;
    transition:.35s;
    font-size:15px;
}

.footer-policy a:hover{
    color:#4EE2CF;
}

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

.footer-grid > div{
    transition:.35s ease;
}

.footer-grid > div:hover{
    transform:translateY(-6px);
}

.footer-about h2{
    transition:.35s;
}

.footer-about:hover h2{
    color:#4EE2CF;
}

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

@keyframes footerFloat{

    0%{
        transform:translateY(0);
    }

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

    100%{
        transform:translateY(0);
    }

}

.footer-social a:nth-child(1){
    animation:footerFloat 4s ease-in-out infinite;
}

.footer-social a:nth-child(2){
    animation:footerFloat 4s ease-in-out infinite .3s;
}

.footer-social a:nth-child(3){
    animation:footerFloat 4s ease-in-out infinite .6s;
}

.footer-social a:nth-child(4){
    animation:footerFloat 4s ease-in-out infinite .9s;
}

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

@media(max-width:1199px){

.footer-grid{

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

}

}

@media(max-width:767px){

.footer{

    padding:70px 0 25px;

}

.footer-grid{

    grid-template-columns:1fr;
    gap:40px;
    text-align:center;

}

.footer h3::after{

    left:50%;
    transform:translateX(-50%);

}

.footer-social{

    justify-content:center;

}

.footer-contact li{

    justify-content:center;
    text-align:left;

}

.footer-bottom{

    flex-direction:column;
    text-align:center;

}

.footer-policy{

    justify-content:center;
    flex-wrap:wrap;

}

}

@media(max-width:480px){

.footer h2{

    font-size:28px;

}

.footer h3{

    font-size:20px;

}

.footer-about p{

    font-size:15px;
    line-height:28px;

}

.footer ul li{

    margin-bottom:14px;

}

.footer-social a{

    width:42px;
    height:42px;

}

.footer-bottom p,
.footer-policy a{

    font-size:14px;

}

}