/* Navigation Bar CSS Starts Here */

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

html,
body{
    width:100%;
    overflow-x:hidden;
}

body{
    font-family:'Inter',sans-serif;
}

h1,h2,h3,h4,h5,h6{
    font-family:'Space Grotesk',sans-serif;
}

.nav-links a{
    font-family:'Space Grotesk',sans-serif;
    font-size:15px;
    font-weight:600;
    letter-spacing:.5px;
}

.volunteer-btn{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
}

.navbar-wrapper{
    position: fixed;
    top: 20px;
    left: 0;
    width: 100%;
    z-index: 999;
    display: flex;
    justify-content: center;
}

.navbar{
    width: 92%;
    max-width: 1450px;

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

    padding:14px 30px;

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

    backdrop-filter:blur(20px);

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

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

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

    border-radius:20px;

    position:relative;

    /* overflow:hidden; */
    overflow:visible;
}


/* .navbar::before{
    content:'';

    position:absolute;

    inset:-2px;

    background:linear-gradient(
    90deg,
    #00BCD4,
    #7ED321,
    #FFC107,
    #FF9800,
    #E91E63,
    #9C27B0,
    #2962FF
    );

    z-index:-2;

    animation:borderMove 8s linear infinite;
}

.navbar::after{
    content:'';

    position:absolute;

    inset:1px;

    background:#08101f;

    border-radius:18px;

    z-index:-1;
} */

.navbar::before{
    content:'';
    position:absolute;
    inset:0;
    padding:1px;
    border-radius:20px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107,
        #FF9800,
        #E91E63,
        #9C27B0,
        #2962FF
    );

    z-index:-2;
}

.navbar::after{
    content:'';
    position:absolute;
    inset:1px;
    background:#08101f;
    border-radius:19px;
    z-index:-1;
}

@keyframes borderMove{
    100%{
        filter:hue-rotate(360deg);
    }
}

.logo img{
    height:60px;
    transition:.4s;
}

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

.nav-links{
    display:flex;
    gap:35px;
    list-style:none;
}

.nav-links a{
    color:white;
    text-decoration:none;
    font-size:15px;
    font-weight:600;
    position:relative;
}

.nav-links a::after{
    content:'';

    position:absolute;
    left:0;
    bottom:-8px;

    width:0;
    height:2px;

    background:linear-gradient(
    90deg,
    #00BCD4,
    #7ED321
    );

    transition:.4s;
}

.nav-links a:hover::after,
.nav-links .active::after{
    width:100%;
}


.volunteer-btn{

    padding:12px 28px;

    border-radius:50px;

    text-decoration:none;

    color:white;

    font-weight:700;

    background:linear-gradient(
    90deg,
    #00BCD4,
    #7ED321,
    #FFC107
    );

    box-shadow:
    0 0 20px rgba(0,188,212,.4);

    transition:.4s;
}

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

.dropdown{
    position:relative;
}

.dropdown-menu{

    position:absolute;

    top:50px;
    left:0;

    min-width:220px;

    background:rgba(20,20,40,.95);

    backdrop-filter:blur(20px);

    border-radius:15px;

    padding:15px;

    opacity:0;
    visibility:hidden;

    transition:.4s;
}

.dropdown:hover .dropdown-menu{
    opacity:1;
    visibility:visible;
}

.dropdown-menu a{
    display:block;
    padding:12px;
}

.menu-btn{
    display:none;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
}

.menu-btn span{
    width:28px;
    height:3px;
    background:white;
}


@media(max-width:991px){

    .dropdown-menu{
        background:rgba(20,20,40,.95);
        z-index: 9999;
    }

    .menu-btn{
        display:flex;
    }

    .nav-links{
        position:absolute;
        top:100%;
        left:0;

        width:100%;

        flex-direction:column;

        background:#08101f;

        padding:25px;

        display:none;
    }

    .nav-links.active{
        display:flex;
    }

    .volunteer-btn{
        display:none;
    }
}

/* Navigation Bar CSS Ends Here */

/* Homepage Starts Here */

/* hero section starts here */

.hero{
    min-height:100vh;
    position:relative;
    overflow:hidden;

    display:flex;
    align-items:center;

    padding:150px 0 100px;

    background:
    radial-gradient(circle at top left, rgba(0,188,212,.15), transparent 35%),
    radial-gradient(circle at bottom right, rgba(126,211,33,.15), transparent 35%),
    linear-gradient(135deg,#050816,#08101f,#111827);
}

/* AURORA */

.aurora{
    position:absolute;
    border-radius:50%;
    filter:blur(130px);
    opacity:.4;
}

.aurora1{
    width:400px;
    height:400px;
    background:#00BCD4;
    top:-100px;
    left:-100px;
}

.aurora2{
    width:400px;
    height:400px;
    background:#7ED321;
    bottom:-100px;
    right:-100px;
}

.aurora3{
    width:300px;
    height:300px;
    background:#9C27B0;
    top:40%;
    left:50%;
}

.hero-container{
    width:90%;
    max-width:1400px;
    margin:auto;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

/* LEFT */

.hero-badge{
    display:inline-block;

    padding:12px 20px;

    border-radius:50px;

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

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

    backdrop-filter:blur(20px);

    color:#fff;
    margin-bottom:25px;
}

.hero-content h1{
    font-size:clamp(3rem,6vw,6rem);
    line-height:1.05;
    color:#fff;
    margin-bottom:25px;
}

.hero-content h1 span{
    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107,
        #FF9800
    );

    -webkit-background-clip:text;
    color:transparent;
}

.hero-content p{
    color:#cbd5e1;
    font-size:18px;
    line-height:1.8;
    max-width:650px;
}

.hero-buttons{
    display:flex;
    gap:20px;
    margin-top:35px;
}

.hero-buttons a{
    transition:all .4s ease;
}

.btn-primary:hover{
    transform:translateY(-5px) scale(1.03);

    box-shadow:
    0 10px 30px rgba(0,188,212,.4),
    0 0 30px rgba(126,211,33,.3);
}

.btn-secondary:hover{
    transform:translateY(-5px);

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

    box-shadow:
    0 10px 25px rgba(255,255,255,.08);
}

.btn-primary{
    padding:16px 32px;
    border-radius:50px;
    text-decoration:none;
    color:#fff;
    font-weight:600;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );
}

.btn-secondary{
    padding:16px 32px;
    border-radius:50px;
    text-decoration:none;
    color:#fff;

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

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

    backdrop-filter:blur(20px);
}

/* STATS */

.stats{
    display:flex;
    gap:20px;
    margin-top:50px;
}

.stat-card{
    flex:1;

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

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

    backdrop-filter:blur(20px);

    border-radius:20px;

    padding:20px;
}

.stat-card h3{
    color:#fff;
    font-size:28px;
    margin-bottom:10px;
}

.stat-card span{
    color:#cbd5e1;
}

/* RIGHT */

.hero-visual{
    display:flex;
    justify-content:center;
}

.orbit-container{
    width:600px;
    height:600px;
    position:relative;
}

.logo-sphere{
    /* width:240px;
    height:240px; */
    width:340px;
    height:340px;

    position:absolute;
    top:50%;
    left:50%;

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

    border-radius:50%;

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

    backdrop-filter:blur(25px);

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

    box-shadow:
    0 0 50px rgba(0,188,212,.25);
}

.logo-sphere img{
    /* width:160px; */
    width:300px;
}

.orbit{
    position:absolute;
    top:50%;
    left:50%;

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

    border-radius:50%;

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

.orbit1{
    width:350px;
    height:350px;
    animation:spin 20s linear infinite;
}

.orbit2{
    width:500px;
    height:500px;
    animation:spin 30s linear infinite reverse;
}

.floating-card{
    position:absolute;

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

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

    backdrop-filter:blur(20px);

    color:#fff;

    padding:15px 25px;

    border-radius:20px;

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

.education{
    top:70px;
    left:40px;
}

.healthcare{
    top:80px;
    right:20px;
}

.law{
    bottom:80px;
    left:30px;
}

.spiritual{
    bottom:70px;
    right:20px;
}

@keyframes spin{
    from{
        transform:translate(-50%,-50%) rotate(0deg);
    }
    to{
        transform:translate(-50%,-50%) rotate(360deg);
    }
}

@keyframes float{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-15px);
    }
}

/* MOBILE */

@media(max-width:992px){

    .hero-container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .hero-buttons{
        justify-content:center;
        flex-wrap:wrap;
    }

    .stats{
        flex-direction:column;
    }

    .orbit-container{
        width:350px;
        height:350px;
        margin-top:50px;
    }

    .orbit1{
        width:220px;
        height:220px;
    }

    .orbit2{
        width:320px;
        height:320px;
    }

    .logo-sphere{
        width:160px;
        height:160px;
    }

    .logo-sphere img{
        width:100px;
    }

    .floating-card{
        font-size:13px;
        padding:10px 15px;
    }
}

/* hero section ends here */

/* stats sec starts here */

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

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

.impact-section{
    padding:120px 5%;
    background:#050816;
    position:relative;
}

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

.impact-heading span{
    display:inline-block;
    color:#00BCD4;
    font-size:14px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:15px;
}

.impact-heading h2{
    font-size:clamp(2rem,5vw,4rem);
    color:#fff;
    margin-bottom:20px;
}

.impact-heading p{
    color:#94a3b8;
    line-height:1.8;
    font-size:17px;
}

.impact-grid{
    max-width:1400px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.impact-card{
    background:rgba(255,255,255,0.05);
    backdrop-filter:blur(20px);

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

    border-radius:24px;

    padding:40px 25px;

    text-align:center;

    transition:.4s ease;

    position:relative;
    overflow:hidden;
}

.impact-card::before{
    content:'';

    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:3px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107,
        #FF9800,
        #9C27B0
    );
}

.impact-card:hover{
    transform:translateY(-10px);

    box-shadow:
    0 15px 40px rgba(0,188,212,.15);
}

.impact-card h3{
    font-size:3rem;
    margin-bottom:15px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.impact-card p{
    color:#cbd5e1;
    font-size:16px;
}

/* Tablet */

@media(max-width:992px){

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

}

/* Mobile */

@media(max-width:576px){

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

    .impact-card h3{
        font-size:2.5rem;
    }

}

/* stats sec ends here */

/* our vison mission sec starts here */

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

.mission-section{
    position:relative;
    padding:120px 5%;
    overflow:hidden;

    background:
    linear-gradient(
        180deg,
        #050816,
        #08101f
    );
}

/* Animated Mesh Background */

.mission-bg{

    position:absolute;

    width:600px;
    height:600px;

    top:-150px;
    right:-200px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(0,188,212,.15),
        transparent 70%
    );

    filter:blur(120px);

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

@keyframes meshMove{

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

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

}

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

.mission-grid{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:80px;

    align-items:center;
}

/* LEFT */

.svg-card{

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

    backdrop-filter:blur(20px);

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

    border-radius:30px;

    padding:50px;

    text-align:center;
}

.svg-card img{

    width:100%;
    max-width:450px;
}

/* RIGHT */

.section-tag{

    display:inline-block;

    color:#00BCD4;

    letter-spacing:2px;

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;
}

.mission-content h2{

    color:#fff;

    font-size:
    clamp(2rem,5vw,4rem);

    margin-bottom:25px;

    line-height:1.2;
}

.mission-content h2 span{

    background:
    linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );

    -webkit-background-clip:text;
    color:transparent;
}

.mission-content p{

    color:#94a3b8;

    line-height:1.9;

    margin-bottom:40px;
}

/* CARDS */

.mission-cards{

    display:flex;
    flex-direction:column;
    gap:20px;
}

.mission-card{

    display:flex;
    gap:20px;

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

    backdrop-filter:blur(20px);

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

    border-radius:25px;

    padding:25px;

    transition:.4s ease;
}

.mission-card:hover{

    transform:
    translateY(-8px);

    box-shadow:
    0 15px 40px
    rgba(0,188,212,.12);
}

.mission-icon{

    width:65px;
    height:65px;

    min-width:65px;

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

    border-radius:15px;

    font-size:28px;

    background:
    linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );
}

.mission-card h3{

    color:#fff;
    margin-bottom:10px;
}

.mission-card p{

    margin:0;
    color:#cbd5e1;
}

/* RESPONSIVE */

@media(max-width:992px){

    .mission-grid{

        grid-template-columns:1fr;

        gap:50px;
    }

    .mission-content{

        text-align:center;
    }

    .mission-card{

        text-align:left;
    }

}

@media(max-width:576px){

    .mission-card{

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

    .svg-card{

        padding:30px;
    }

}

/* our vison mission sec ends here */

/* activities sec starts here */

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

.activities-section{
    position:relative;
    padding:120px 5%;
    background:linear-gradient(
        180deg,
        #050816,
        #08101f
    );
    overflow:hidden;
}

/* GLOW EFFECTS */

.activity-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
    opacity:.15;
}

.glow-1{
    width:350px;
    height:350px;
    background:#00BCD4;
    left:-150px;
    top:20%;
}

.glow-2{
    width:400px;
    height:400px;
    background:#7ED321;
    right:-150px;
    bottom:10%;
}

.container{
    max-width:1400px;
    margin:auto;
    position:relative;
    z-index:2;
}

/* HEADER */

.activities-header{
    text-align:center;
    max-width:850px;
    margin:auto auto 80px;
}

.section-tag{
    display:inline-block;
    color:#00BCD4;
    letter-spacing:3px;
    font-size:14px;
    font-weight:600;
    margin-bottom:15px;
}

.activities-header h2{
    font-size:clamp(2rem,5vw,4rem);
    color:#fff;
    margin-bottom:20px;
}

.activities-header h2 span{
    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );

    -webkit-background-clip:text;
    color:transparent;
}

.activities-header p{
    color:#94a3b8;
    line-height:1.8;
    font-size:17px;
}

/* GRID */

.activities-grid{
    display:grid;
    grid-template-columns:
    repeat(2,1fr);
    gap:30px;
}

/* CARD */

.activity-card{
    position:relative;

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

    backdrop-filter:blur(20px);

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

    border-radius:30px;

    padding:35px;

    overflow:hidden;

    transition:.5s ease;
}

/* Animated Border */

.activity-card::before{
    content:'';

    position:absolute;
    inset:0;

    border-radius:30px;

    padding:1px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107,
        #FF9800,
        #9C27B0
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:.5;
}

/* HOVER */

.activity-card:hover{
    transform:
    translateY(-15px)
    scale(1.03);

    box-shadow:
    0 20px 50px rgba(0,188,212,.20),
    0 0 60px rgba(126,211,33,.12);
}

.activity-icon{
    width:85px;
    height:85px;

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

    border-radius:20px;

    font-size:38px;

    margin-bottom:25px;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );
}

.activity-card h3{
    color:#fff;
    font-size:1.7rem;
    margin-bottom:15px;
}

.activity-card p{
    color:#cbd5e1;
    line-height:1.8;
    margin-bottom:25px;
}

.activity-card ul{
    list-style:none;
    padding:0;
}

.activity-card ul li{
    color:#fff;
    margin-bottom:12px;
    padding-left:5px;
}

.social-card{
    grid-column:1 / -1;
}

/* CTA */

.activities-cta{
    text-align:center;
    margin-top:80px;
}

.activities-cta h3{
    color:#fff;
    font-size:2rem;
    margin-bottom:25px;
}

.activity-btn{
    display:inline-block;

    padding:16px 35px;

    border-radius:50px;

    text-decoration:none;

    color:#fff;

    font-weight:600;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );

    transition:.4s;
}

.activity-btn:hover{
    transform:translateY(-5px);

    box-shadow:
    0 15px 35px rgba(0,188,212,.25);
}

/* RESPONSIVE */

@media(max-width:992px){

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

    .social-card{
        grid-column:auto;
    }

}

@media(max-width:576px){

    .activity-card{
        padding:25px;
    }

    .activity-icon{
        width:70px;
        height:70px;
        font-size:30px;
    }

}

/* activities sec ends here */

/* map sec starts here */

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

.communities-section{
    position:relative;
    padding:140px 5%;
    background:linear-gradient(
        180deg,
        #050816,
        #08101f
    );
    overflow:hidden;
}

/* GLOW */

.communities-bg-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
    opacity:.15;
}

.glow-left{
    width:350px;
    height:350px;
    background:#00BCD4;
    left:-150px;
    top:20%;
}

.glow-right{
    width:400px;
    height:400px;
    background:#7ED321;
    right:-150px;
    bottom:20%;
}

/* HEADER */

.communities-header{
    max-width:850px;
    margin:0 auto 80px;
    text-align:center;
    position:relative;
    z-index:5;
}

.header-badge{

    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:12px 24px;

    border-radius:50px;

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

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

    backdrop-filter:blur(20px);

    color:#00BCD4;

    margin-bottom:25px;
}

.communities-header h2{
    font-size:clamp(2.5rem,5vw,4.5rem);
    color:#fff;
    line-height:1.1;
    margin-bottom:20px;
}

.communities-header h2 span{
    display:block;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );

    -webkit-background-clip:text;
    color:transparent;
}

.communities-header p{
    color:#94a3b8;
    line-height:1.9;
    max-width:700px;
    margin:auto;
}

/* GRID */

.communities-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

/* CARD */

.community-card{

    position:relative;

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

    backdrop-filter:blur(20px);

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

    border-radius:30px;

    padding:35px;

    transition:.4s ease;

    overflow:hidden;
}

.community-card:hover{

    transform:
    translateY(-12px);

    box-shadow:
    0 25px 60px rgba(0,188,212,.15);
}

.community-card::before{

    content:'';

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:3px;

    background:
    linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107,
        #FF9800
    );
}

/* TOP */

.city-top{
    display:flex;
    gap:20px;
    align-items:center;
    margin-bottom:25px;
}

.city-icon{

    width:70px;
    height:70px;

    border-radius:20px;

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

    font-size:30px;

    background:
    linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );
}

.city-top h3{
    color:#fff;
    margin-bottom:5px;
}

.city-top span{
    color:#94a3b8;
}

/* CONTENT */

.community-card p{
    color:#cbd5e1;
    line-height:1.8;
    margin-bottom:25px;
}

/* STATS */

.stats-row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
}

.stats-row div{

    text-align:center;

    padding:15px;

    border-radius:20px;

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

.stats-row h4{

    font-size:1.5rem;

    margin-bottom:5px;

    background:
    linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );

    -webkit-background-clip:text;

    color:transparent;
}

.stats-row span{
    color:#94a3b8;
    font-size:.9rem;
}

/* RESPONSIVE */

@media(max-width:992px){

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

}

@media(max-width:576px){

    .stats-row{
        grid-template-columns:1fr;
    }

}

/* map sec ends here */

/* volunteer sec starts here */

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

.volunteer-section{

    position:relative;

    min-height:80vh;

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

    overflow:hidden;
}

/* VIDEO */

.volunteer-video{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:cover;
}

/* OVERLAY */

.volunteer-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        135deg,
        rgba(5,8,22,.88),
        rgba(8,16,31,.78)
    );

    backdrop-filter:blur(3px);
}

/* CONTENT */

.volunteer-content{

    position:relative;

    z-index:2;

    max-width:900px;

    text-align:center;

    padding:20px;
}

.volunteer-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    border-radius:50px;

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

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

    backdrop-filter:blur(20px);

    color:#00BCD4;

    margin-bottom:30px;
}

.volunteer-content h2{

    font-size:
    clamp(3rem,7vw,6rem);

    color:#fff;

    line-height:1.05;

    margin-bottom:25px;
}

.volunteer-content h2 span{

    background:
    linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );

    -webkit-background-clip:text;

    color:transparent;
}

.volunteer-content p{

    color:#cbd5e1;

    font-size:1.15rem;

    line-height:1.9;

    max-width:700px;

    margin:0 auto 50px;
}

/* MAGNETIC BUTTON */

.magnetic-btn{

    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(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );

    transition:.3s ease;

    position:relative;

    overflow:hidden;
}

.magnetic-btn::before{

    content:'';

    position:absolute;

    top:0;
    left:-100%;

    width:50%;
    height:100%;

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

    transform:skewX(-25deg);

    transition:.8s;
}

.magnetic-btn:hover::before{

    left:150%;
}

.magnetic-btn:hover{

    box-shadow:
    0 20px 50px rgba(0,188,212,.35);

    transform:translateY(-5px);
}

/* volunteer sec ends here */

/* success sec starts here */

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

.success-section{

    padding:120px 5%;

    background:
    linear-gradient(
        180deg,
        #08101f,
        #050816
    );

    overflow:hidden;
}

.success-header{

    text-align:center;

    max-width:850px;

    margin:auto auto 80px;
}

.success-header h2{

    color:#fff;

    font-size:
    clamp(2.5rem,5vw,4.5rem);

    margin-bottom:20px;
}

.success-header h2 span{

    background:
    linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );

    -webkit-background-clip:text;

    color:transparent;
}

.success-header p{

    color:#94a3b8;

    line-height:1.9;
}

/* CAROUSEL */

.carousel-container{

    position:relative;

    overflow:hidden;

    perspective:1500px;
}

.carousel-track{

    display:flex;

    gap:30px;

    width:max-content;

    animation:
    scrollStories 30s linear infinite;
}

.carousel-container:hover .carousel-track{

    animation-play-state:paused;
}

/* CARD */

.story-card{

    width:380px;

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

    backdrop-filter:blur(20px);

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

    border-radius:30px;

    overflow:hidden;

    transition:.5s ease;

    flex-shrink:0;
}

.story-card:hover{

    transform:
    translateY(-15px)
    rotateY(6deg);

    box-shadow:
    0 25px 60px rgba(0,188,212,.15);
}

.story-image{

    height:250px;

    overflow:hidden;
}

.story-image img{

    width:100%;
    height:100%;
    object-fit:cover;

    transition:.6s;
}

.story-card:hover img{

    transform:scale(1.1);
}

.story-content{

    padding:30px;
}

.story-content h3{

    color:#fff;

    margin-bottom:8px;
}

.story-content span{

    display:block;

    color:#00BCD4;

    margin-bottom:15px;
}

.story-content p{

    color:#cbd5e1;

    line-height:1.8;
}

/* ANIMATION */

@keyframes scrollStories{

    from{
        transform:translateX(0);
    }

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

/* MOBILE */

@media(max-width:768px){

    .story-card{

        width:300px;
    }

}

.story-card::before{

    content:'';

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        135deg,
        transparent,
        rgba(255,255,255,.05),
        transparent
    );

    opacity:0;

    transition:.5s;
}

.story-card:hover::before{

    opacity:1;
}

/* success sec ends here */

/* gallery sec starts here */

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

.gallery-section{

    padding:120px 5%;

    background:
    linear-gradient(
        180deg,
        #050816,
        #08101f
    );

    overflow:hidden;
}

/* HEADER */

.gallery-header{

    text-align:center;

    max-width:850px;

    margin:auto auto 80px;
}

.gallery-header h2{

    color:#fff;

    font-size:
    clamp(2.5rem,5vw,4.5rem);

    margin-bottom:20px;
}

.gallery-header h2 span{

    background:
    linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );

    -webkit-background-clip:text;

    color:transparent;
}

.gallery-header p{

    color:#94a3b8;

    line-height:1.9;
}

/* MASONRY GRID */

.gallery-grid{

    display:grid;

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

    grid-auto-rows:250px;

    gap:20px;
}

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:25px;

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

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

/* Sizes */

.gallery-item.large{
    grid-column:span 2;
    grid-row:span 2;
}

.gallery-item.tall{
    grid-row:span 2;
}

.gallery-item.wide{
    grid-column:span 2;
}

/* Images */

.gallery-item img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.7s ease;
}

/* Overlay */

.gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    padding:25px;

    background:
    linear-gradient(
        transparent,
        rgba(0,0,0,.85)
    );

    opacity:0;

    transition:.4s ease;
}

.gallery-overlay h3{

    color:#fff;

    font-size:1.3rem;

    transform:translateY(20px);

    transition:.4s ease;
}

/* Hover */

.gallery-item:hover img{

    transform:scale(1.12);
}

.gallery-item:hover .gallery-overlay{

    opacity:1;
}

.gallery-item:hover h3{

    transform:translateY(0);
}

/* CTA */

.gallery-cta{

    text-align:center;

    margin-top:60px;
}

.gallery-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    padding:18px 35px;

    border-radius:60px;

    color:#fff;

    font-weight:600;

    background:
    linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );

    transition:.4s ease;
}

.gallery-btn:hover{

    transform:translateY(-5px);

    box-shadow:
    0 20px 50px rgba(0,188,212,.25);
}

/* RESPONSIVE */

@media(max-width:992px){

    .gallery-grid{

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

}

@media(max-width:576px){

    .gallery-grid{

        grid-template-columns:1fr;
    }

    .gallery-item.large,
    .gallery-item.tall,
    .gallery-item.wide{

        grid-column:auto;
        grid-row:auto;
    }

}

.gallery-item::before{

    content:'';

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        135deg,
        rgba(0,188,212,.15),
        transparent,
        rgba(126,211,33,.15)
    );

    opacity:0;

    transition:.4s;
}

.gallery-item:hover::before{

    opacity:1;
}

/* gallery sec ends here */

/* why choose sec starts here */

/* ====================================
   WHY CHOOSE US SECTION
==================================== */

.why-choose-section{

    position:relative;

    padding:120px 5%;

    background:
    linear-gradient(
        180deg,
        #08101f,
        #050816
    );

    overflow:hidden;
}

/* GLOWS */

.why-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
    opacity:.12;
}

.glow-left{
    width:350px;
    height:350px;
    background:#00BCD4;
    left:-150px;
    top:20%;
}

.glow-right{
    width:400px;
    height:400px;
    background:#7ED321;
    right:-150px;
    bottom:10%;
}

/* HEADER */

.why-header{
    text-align:center;
    max-width:850px;
    margin:0 auto 80px;
}

.why-header h2{

    color:#fff;

    font-size:
    clamp(2.5rem,5vw,4.5rem);

    margin-bottom:20px;
}

.why-header h2 span{

    background:
    linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );

    -webkit-background-clip:text;

    color:transparent;
}

.why-header p{

    color:#94a3b8;

    line-height:1.9;

    max-width:700px;

    margin:auto;
}

/* GRID */

.why-grid{

    display:grid;

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

    gap:30px;

    max-width:1400px;

    margin:auto;
}

/* CARD */

.why-card{

    position:relative;

    padding:35px;

    border-radius:30px;

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

    backdrop-filter:blur(20px);

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

    overflow:hidden;

    transition:.5s ease;
}

.why-card::before{

    content:'';

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:3px;

    background:
    linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107,
        #FF9800
    );
}

.why-card:hover{

    transform:
    translateY(-12px);

    box-shadow:
    0 25px 60px rgba(0,188,212,.15);
}

/* ICON */

.why-icon{

    width:80px;
    height:80px;

    border-radius:20px;

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

    font-size:36px;

    margin-bottom:25px;

    background:
    linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );
}

/* TEXT */

.why-card h3{

    color:#fff;

    margin-bottom:15px;

    font-size:1.4rem;
}

.why-card p{

    color:#cbd5e1;

    line-height:1.8;
}

/* RESPONSIVE */

@media(max-width:992px){

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

}

@media(max-width:576px){

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

}

.why-card:hover .why-icon{
    transform:rotate(8deg) scale(1.1);
}

.why-icon{
    transition:.4s;
}

/* why choose sec ends here */

/* dashboard sec starts here */

/* ==================================
   LIVE IMPACT DASHBOARD
================================== */

.dashboard-section{
    position:relative;
    padding:120px 5%;
    background:linear-gradient(
        180deg,
        #050816,
        #08101f
    );
    overflow:hidden;
}

.dashboard-bg{
    position:absolute;
    inset:0;
    background:
    radial-gradient(circle at 20% 20%, rgba(0,188,212,.15), transparent 30%),
    radial-gradient(circle at 80% 80%, rgba(126,211,33,.15), transparent 30%);
}

.dashboard-header{
    text-align:center;
    max-width:800px;
    margin:0 auto 80px;
    position:relative;
    z-index:2;
}

.dashboard-header h2{
    font-size:clamp(2.5rem,5vw,4.5rem);
    color:#fff;
    margin-bottom:20px;
}

.dashboard-header h2 span{
    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );
    -webkit-background-clip:text;
    color:transparent;
}

.dashboard-header p{
    color:#94a3b8;
    line-height:1.8;
}

.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
    position:relative;
    z-index:2;
}

.dashboard-card{
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:30px;
    padding:35px;
    text-align:center;
    transition:.4s;
    position:relative;
    overflow:hidden;
}

.dashboard-card:hover{
    transform:translateY(-10px);
    box-shadow:
    0 20px 60px rgba(0,188,212,.15);
}

.dashboard-card::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:3px;
    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );
}

.dashboard-icon{
    width:80px;
    height:80px;
    margin:auto auto 20px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:35px;
    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );
}

.dashboard-card h3{
    font-size:3rem;
    color:#fff;
    margin-bottom:10px;
}

.dashboard-card p{
    color:#94a3b8;
}

.card-status{
    margin-top:20px;
    color:#7ED321;
    font-size:.9rem;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
}

.card-status span{
    width:8px;
    height:8px;
    background:#7ED321;
    border-radius:50%;
    animation:pulseDot 1.5s infinite;
}

@keyframes pulseDot{
    50%{
        opacity:.3;
    }
}

.dashboard-footer{
    margin-top:70px;
    position:relative;
    z-index:2;
}

.dashboard-line{
    height:1px;
    background:rgba(255,255,255,.08);
    margin-bottom:40px;
}

.dashboard-summary{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
    text-align:center;
}

.dashboard-summary strong{
    display:block;
    color:#fff;
    font-size:2rem;
    margin-bottom:10px;
}

.dashboard-summary span{
    color:#94a3b8;
}

/* MOBILE */

@media(max-width:992px){

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

}

@media(max-width:576px){

    .dashboard-grid,
    .dashboard-summary{
        grid-template-columns:1fr;
    }

}

/* dashboard sec ends here */

/* testimonials sec starts here */

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

.testimonials-section{

    padding:120px 5%;

    background:
    linear-gradient(
        180deg,
        #08101f,
        #050816
    );

    overflow:hidden;
}

.testimonials-header{

    text-align:center;

    max-width:850px;

    margin:auto auto 80px;
}

.testimonials-header h2{

    color:#fff;

    font-size:
    clamp(2.5rem,5vw,4.5rem);

    margin-bottom:20px;
}

.testimonials-header h2 span{

    background:
    linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );

    -webkit-background-clip:text;

    color:transparent;
}

.testimonials-header p{

    color:#94a3b8;

    line-height:1.9;
}

/* SLIDER */

.testimonial-slider{

    overflow:hidden;

    position:relative;
}

.testimonial-track{

    display:flex;

    gap:30px;

    width:max-content;

    animation:
    testimonialScroll 30s linear infinite;
}

.testimonial-slider:hover .testimonial-track{

    animation-play-state:paused;
}

/* CARD */

.testimonial-card{

    width:400px;

    padding:30px;

    border-radius:30px;

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

    backdrop-filter:blur(20px);

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

    transition:.4s;

    flex-shrink:0;
}

.testimonial-card:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 25px 60px rgba(0,188,212,.15);
}

/* TOP */

.testimonial-top{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:20px;
}

.testimonial-top img{

    width:70px;
    height:70px;

    border-radius:50%;

    object-fit:cover;

    border:
    3px solid #00BCD4;
}

.testimonial-top h3{

    color:#fff;

    margin-bottom:5px;
}

.testimonial-top span{

    color:#94a3b8;

    font-size:.9rem;
}

/* STARS */

.stars{

    color:#FFC107;

    font-size:1.2rem;

    margin-bottom:15px;
}

/* TEXT */

.testimonial-card p{

    color:#cbd5e1;

    line-height:1.8;
}

/* ANIMATION */

@keyframes testimonialScroll{

    from{
        transform:translateX(0);
    }

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

/* MOBILE */

@media(max-width:768px){

    .testimonial-card{

        width:320px;
    }

}

.testimonial-card::before{

    content:'';

    position:absolute;

    inset:0;

    border-radius:30px;

    background:
    linear-gradient(
        135deg,
        rgba(0,188,212,.08),
        transparent,
        rgba(126,211,33,.08)
    );

    opacity:0;

    transition:.4s;
}

.testimonial-card:hover::before{

    opacity:1;
}

/* testimonials sec ends here */


/* cta sec starts here */

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

.future-cta-section{

    position:relative;

    padding:180px 5%;

    overflow:hidden;

    background:
    linear-gradient(
        180deg,
        #050816,
        #08101f
    );

    text-align:center;
}

/* =====================
   AURORA EFFECT
===================== */

.aurora{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    opacity:.3;

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

.aurora-1{

    width:500px;
    height:500px;

    background:#00BCD4;

    top:-150px;
    left:-150px;
}

.aurora-2{

    width:600px;
    height:600px;

    background:#7ED321;

    right:-200px;
    top:50px;

    animation-delay:2s;
}

.aurora-3{

    width:450px;
    height:450px;

    background:#FFC107;

    bottom:-150px;
    left:40%;

    animation-delay:4s;
}

@keyframes auroraMove{

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

    50%{
        transform:
        translate(40px,-40px)
        scale(1.1);
    }

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

/* CONTENT */

.future-cta-content{

    position:relative;

    z-index:10;

    max-width:1000px;

    margin:auto;
}

.cta-badge{

    display:inline-flex;

    padding:12px 25px;

    border-radius:50px;

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

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

    backdrop-filter:blur(20px);

    color:#00BCD4;

    margin-bottom:30px;
}

.future-cta-content h2{

    font-size:
    clamp(3rem,7vw,6rem);

    color:#fff;

    line-height:1.1;

    margin-bottom:25px;
}

.future-cta-content h2 span{

    display:block;

    background:
    linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );

    -webkit-background-clip:text;

    color:transparent;
}

.future-cta-content p{

    max-width:750px;

    margin:auto;

    color:#cbd5e1;

    font-size:1.15rem;

    line-height:2;

    margin-bottom:50px;
}

/* BUTTONS */

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;
}

.donate-btn,
.volunteer-btn{

    text-decoration:none;

    padding:18px 40px;

    border-radius:60px;

    font-weight:700;

    transition:.4s ease;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );
}

/* PRIMARY */

.donate-btn{

    color:#fff;

    background:
    linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    box-shadow:
    0 15px 40px
    rgba(0,188,212,.25);
}

.donate-btn:hover{

    transform:
    translateY(-5px);

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

/* SECONDARY */

.volunteer-btn{

    color:#fff;

    /* background:
    rgba(255,255,255,.05); */
    background:linear-gradient(
    90deg,
    #00BCD4,
    #7ED321,
    #FFC107
    );

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

    backdrop-filter:blur(20px);
}

.volunteer-btn:hover{

    transform:
    translateY(-5px);

    background:
    rgba(255,255,255,.1);
}

/* MOBILE */

@media(max-width:768px){

    .future-cta-section{

        padding:120px 5%;
    }

    .cta-buttons{

        flex-direction:column;
    }

    .donate-btn,
    .volunteer-btn{

        width:100%;
    }

}

.future-cta-section::before{

    content:'';

    position:absolute;

    inset:0;

    background-image:
    linear-gradient(
        rgba(255,255,255,.03) 1px,
        transparent 1px
    ),
    linear-gradient(
        90deg,
        rgba(255,255,255,.03) 1px,
        transparent 1px
    );

    background-size:50px 50px;

    opacity:.3;
}

/* cta sec ends here */

/* footer starts here */

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

.footer{

    position:relative;

    background:
    linear-gradient(
        180deg,
        #050816,
        #02040d
    );

    padding-top:80px;

    overflow:hidden;
}

/* ANIMATED TOP BORDER */

.footer-top-line{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:
    linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107,
        #00BCD4
    );

    background-size:300% 100%;

    animation:
    gradientMove 6s linear infinite;
}

@keyframes gradientMove{

    0%{
        background-position:0%;
    }

    100%{
        background-position:300%;
    }
}

/* GRID */

.footer-grid{

    display:grid;

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

    gap:40px;
}

/* LOGO */

.footer-logo{

    width:180px;

    margin-bottom:20px;
}

.footer-about p{

    color:#94a3b8;

    line-height:1.9;

    margin-bottom:25px;
}

/* TITLES */

.footer-col h3{

    color:#fff;

    margin-bottom:25px;

    font-size:1.2rem;
}

/* LINKS */

.footer-col ul{

    list-style:none;
}

.footer-col ul li{

    margin-bottom:14px;
}

.footer-col ul li a{

    color:#94a3b8;

    text-decoration:none;

    transition:.3s;
}

.footer-col ul li a:hover{

    color:#00BCD4;

    padding-left:5px;
}

/* CONTACT */

.contact-list li{

    color:#94a3b8;

    line-height:1.8;
}

/* SOCIAL */

.footer-social{

    display:flex;

    gap:12px;
}

.footer-social a{

    width:45px;
    height:45px;

    border-radius:50%;

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

    color:#fff;

    text-decoration:none;

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

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

    transition:.4s;
}

.footer-social a:hover{

    background:#00BCD4;

    transform:translateY(-5px);
}

/* NEWSLETTER */

.newsletter-text{

    color:#94a3b8;

    line-height:1.8;

    margin-bottom:20px;
}

.newsletter-form{

    display:flex;

    flex-direction:column;

    gap:12px;
}

.newsletter-form input{

    height:55px;

    border:none;

    outline:none;

    border-radius:15px;

    padding:0 20px;

    color:#fff;

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

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

.newsletter-form button{

    height:55px;

    border:none;

    border-radius:15px;

    cursor:pointer;

    font-weight:600;

    color:#fff;

    background:
    linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    transition:.4s;
}

.newsletter-form button:hover{

    transform:translateY(-3px);
}

/* BOTTOM */

.footer-bottom{

    margin-top:70px;

    padding:30px 0;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;
}

.footer-bottom p{

    color:#94a3b8;
}

.footer-bottom a{

    color:#94a3b8;

    text-decoration:none;

    margin-left:20px;

    transition:.3s;
}

.footer-bottom a:hover{

    color:#00BCD4;
}

/* RESPONSIVE */

@media(max-width:1200px){

    .footer-grid{

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

@media(max-width:768px){

    .footer-grid{

        grid-template-columns:1fr;
    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;
    }

    .footer-bottom a{

        margin:0 10px;
    }
}

.footer::before{

    content:'';

    position:absolute;

    inset:0;

    background-image:
    linear-gradient(
        rgba(255,255,255,.02) 1px,
        transparent 1px
    ),
    linear-gradient(
        90deg,
        rgba(255,255,255,.02) 1px,
        transparent 1px
    );

    background-size:50px 50px;

    opacity:.4;
}

/* footer ends here */


/* Homepage Ends Here */


/* About Us Page Starts Here */

/* hero section starts here */

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

.about-hero{

    position:relative;

    min-height:75vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:180px 5% 120px;

    overflow:hidden;

    background:
    linear-gradient(
        180deg,
        #050816,
        #08101f
    );
}

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

.hero-grid{

    position:absolute;

    inset:0;

    background-image:
    linear-gradient(
        rgba(255,255,255,.03) 1px,
        transparent 1px
    ),
    linear-gradient(
        90deg,
        rgba(255,255,255,.03) 1px,
        transparent 1px
    );

    background-size:60px 60px;

    opacity:.35;
}

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

.hero-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    opacity:.2;
}

.glow-1{

    width:400px;
    height:400px;

    background:#00BCD4;

    top:-120px;
    left:-100px;
}

.glow-2{

    width:450px;
    height:450px;

    background:#7ED321;

    bottom:-150px;
    right:-150px;
}

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

.hero-overlay-image{

    position:absolute;

    inset:0;

    opacity:.08;

    overflow:hidden;
}

.hero-overlay-image img{

    width:100%;
    height:100%;

    object-fit:cover;
}

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

.about-hero-content{

    position:relative;

    z-index:5;

    text-align:center;

    max-width:1000px;

    margin:auto;
}

/* ==================================
   BREADCRUMB
================================== */

.breadcrumb{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:50px;

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

    backdrop-filter:blur(20px);

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

    margin-bottom:30px;
}

.breadcrumb a{

    color:#00BCD4;

    text-decoration:none;

    font-weight:600;
}

.breadcrumb span{

    color:#cbd5e1;
}

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

.about-hero-content h1{

    color:#fff;

    font-size:
    clamp(3rem,7vw,6rem);

    line-height:1.1;

    margin-bottom:25px;
}

.about-hero-content h1 span{

    display:block;

    background:
    linear-gradient(
        135deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );

    -webkit-background-clip:text;

    color:transparent;
}

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

.about-hero-content p{

    max-width:850px;

    margin:auto;

    color:#cbd5e1;

    font-size:1.15rem;

    line-height:2;
}

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

.floating-particles span{

    position:absolute;

    width:8px;
    height:8px;

    border-radius:50%;

    background:#00BCD4;

    opacity:.4;

    animation:
    floatParticle 8s linear infinite;
}

.floating-particles span:nth-child(1){

    top:20%;
    left:15%;
}

.floating-particles span:nth-child(2){

    top:35%;
    right:20%;
}

.floating-particles span:nth-child(3){

    bottom:25%;
    left:25%;
}

.floating-particles span:nth-child(4){

    bottom:15%;
    right:18%;
}

.floating-particles span:nth-child(5){

    top:50%;
    left:50%;
}

@keyframes floatParticle{

    0%{

        transform:
        translateY(0);
    }

    50%{

        transform:
        translateY(-25px);
    }

    100%{

        transform:
        translateY(0);
    }
}

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

@media(max-width:768px){

    .about-hero{

        min-height:65vh;

        padding:150px 5% 90px;
    }

    .about-hero-content p{

        font-size:1rem;
    }

}

/* hero section ends here */


/* who are we section starts here */

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

.who-we-are-section{

    position:relative;

    padding:140px 5%;

    background:
    linear-gradient(
        180deg,
        #08101f,
        #050816
    );

    overflow:hidden;
}

.who-we-are-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;
}

/* ======================
   IMAGES
====================== */

.who-images{

    position:relative;
}

.main-image{

    position:relative;

    z-index:2;
}

.main-image img{

    width:100%;

    border-radius:30px;

    object-fit:cover;

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

.founder-image{

    position:absolute;

    right:-30px;
    bottom:-40px;

    width:230px;

    z-index:3;
}

.founder-image img{

    width:100%;

    border-radius:25px;

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

    backdrop-filter:blur(20px);
}

/* GLOW */

.image-glow{

    position:absolute;

    width:350px;
    height:350px;

    background:
    radial-gradient(
        circle,
        rgba(0,188,212,.25),
        rgba(126,211,33,.15),
        transparent
    );

    filter:blur(60px);

    top:50%;
    left:50%;

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

    z-index:1;
}

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

.who-content{

    position:relative;
}

.section-tag{

    display:inline-block;

    padding:12px 24px;

    border-radius:50px;

    color:#00BCD4;

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

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

    margin-bottom:25px;
}

.who-content h2{

    color:#fff;

    font-size:
    clamp(2.5rem,5vw,4.5rem);

    line-height:1.15;

    margin-bottom:25px;
}

.who-content h2 span{

    display:block;

    background:
    linear-gradient(
        135deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );

    -webkit-background-clip:text;

    color:transparent;
}

.who-content p{

    color:#cbd5e1;

    line-height:2;

    margin-bottom:20px;

    font-size:1.05rem;
}

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

.who-highlights{

    display:flex;

    gap:20px;

    margin-top:40px;
}

.highlight-card{

    flex:1;

    padding:25px;

    border-radius:25px;

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

    backdrop-filter:blur(20px);

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

    transition:.4s;
}

.highlight-card:hover{

    transform:
    translateY(-8px);

    box-shadow:
    0 15px 40px rgba(0,188,212,.15);
}

.highlight-card h3{

    font-size:2rem;

    color:#00BCD4;

    margin-bottom:8px;
}

.highlight-card span{

    color:#94a3b8;
}

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

@media(max-width:992px){

    .who-we-are-wrapper{

        grid-template-columns:1fr;

        gap:60px;
    }

    .who-images{

        max-width:700px;

        margin:auto;
    }

    .who-content{

        text-align:center;
    }

    .who-highlights{

        justify-content:center;
    }
}

@media(max-width:768px){

    .founder-image{

        width:160px;

        right:0;
        bottom:-20px;
    }

    .who-highlights{

        flex-direction:column;
    }
}

/* who are we section ends here */

/* mission-vision section starts here */

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

.mission-vision-section{

    position:relative;

    padding:140px 5%;

    background:
    linear-gradient(
        180deg,
        #050816,
        #08101f
    );

    overflow:hidden;
}

/* GLOWS */

.mission-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    opacity:.15;
}

.glow-1{

    width:400px;
    height:400px;

    background:#00BCD4;

    top:-150px;
    left:-150px;
}

.glow-2{

    width:450px;
    height:450px;

    background:#7ED321;

    bottom:-150px;
    right:-150px;
}

/* SECTION HEADING */

.section-heading{

    text-align:center;

    max-width:850px;

    margin:auto auto 80px;
}

.section-heading h2{

    color:#fff;

    font-size:
    clamp(2.5rem,5vw,4.5rem);

    margin-bottom:20px;
}

.section-heading h2 span{

    background:
    linear-gradient(
        135deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );

    -webkit-background-clip:text;

    color:transparent;
}

.section-heading p{

    color:#94a3b8;

    line-height:1.9;

    max-width:700px;

    margin:auto;
}

/* GRID */

.mission-vision-grid{

    display:grid;

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

    gap:40px;

    max-width:1400px;

    margin:auto;
}

/* CARDS */

.mission-card,
.vision-card{

    position:relative;

    padding:50px;

    border-radius:35px;

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

    backdrop-filter:blur(25px);

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

    overflow:hidden;

    transition:.5s ease;
}

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

    transform:
    translateY(-12px);

    box-shadow:
    0 25px 60px rgba(0,188,212,.15);
}

/* TOP LINE */

.card-line{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:
    linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );
}

/* ICONS */

.mission-icon,
.vision-icon{

    width:90px;
    height:90px;

    border-radius:25px;

    display:flex;

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

    font-size:40px;

    margin-bottom:30px;

    background:
    linear-gradient(
        135deg,
        rgba(0,188,212,.2),
        rgba(126,211,33,.2)
    );

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

/* TITLE */

.mission-card h3,
.vision-card h3{

    color:#fff;

    font-size:2rem;

    margin-bottom:20px;
}

/* TEXT */

.mission-card p,
.vision-card p{

    color:#cbd5e1;

    line-height:2;

    font-size:1.05rem;
}

/* HOVER EFFECT */

.mission-card::before,
.vision-card::before{

    content:'';

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        135deg,
        rgba(0,188,212,.05),
        transparent,
        rgba(126,211,33,.05)
    );

    opacity:0;

    transition:.4s;
}

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

    opacity:1;
}

/* RESPONSIVE */

@media(max-width:992px){

    .mission-vision-grid{

        grid-template-columns:1fr;
    }
}

@media(max-width:768px){

    .mission-card,
    .vision-card{

        padding:35px;
    }
}

/* mission-vision section ends here */

/* values section starts here */

/* ==================================
   CORE VALUES SECTION
================================== */

.core-values-section{

    position:relative;

    padding:140px 5%;

    background:
    linear-gradient(
        180deg,
        #08101f,
        #050816
    );

    overflow:hidden;
}

/* GLOW EFFECTS */

.values-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    opacity:.12;
}

.glow-left{

    width:400px;
    height:400px;

    background:#00BCD4;

    left:-150px;
    top:20%;
}

.glow-right{

    width:450px;
    height:450px;

    background:#7ED321;

    right:-150px;
    bottom:10%;
}

/* GRID */

.values-grid{

    display:grid;

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

    gap:30px;

    max-width:1400px;

    margin:auto;
}

/* CARD */

.value-card{

    position:relative;

    padding:40px;

    border-radius:30px;

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

    backdrop-filter:blur(25px);

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

    transition:.5s ease;

    overflow:hidden;
}

.value-card:hover{

    transform:
    translateY(-12px);

    box-shadow:
    0 25px 60px rgba(0,188,212,.15);
}

/* TOP BORDER */

.value-card::before{

    content:'';

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:3px;

    background:
    linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );
}

/* HOVER OVERLAY */

.value-card::after{

    content:'';

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        135deg,
        rgba(0,188,212,.05),
        transparent,
        rgba(126,211,33,.05)
    );

    opacity:0;

    transition:.4s;
}

.value-card:hover::after{

    opacity:1;
}

/* ICON */

.value-icon{

    width:90px;
    height:90px;

    border-radius:24px;

    display:flex;

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

    font-size:40px;

    margin-bottom:25px;

    background:
    linear-gradient(
        135deg,
        rgba(0,188,212,.15),
        rgba(126,211,33,.15)
    );

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

/* TITLE */

.value-card h3{

    color:#fff;

    font-size:1.5rem;

    margin-bottom:15px;
}

/* TEXT */

.value-card p{

    color:#cbd5e1;

    line-height:1.9;
}

/* RESPONSIVE */

@media(max-width:992px){

    .values-grid{

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

@media(max-width:768px){

    .values-grid{

        grid-template-columns:1fr;
    }

    .value-card{

        padding:35px;
    }
}

/* values section ends here */

/* journey section starts here */

/* ==================================
   JOURNEY TIMELINE
================================== */

.journey-section{

    position:relative;

    padding:140px 5%;

    background:
    linear-gradient(
        180deg,
        #050816,
        #08101f
    );

    overflow:hidden;
}

/* TIMELINE */

.timeline{

    position:relative;

    max-width:1200px;

    margin:100px auto 0;
}

/* CENTER LINE */

.timeline::before{

    content:'';

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    width:4px;

    height:100%;

    border-radius:50px;

    background:
    linear-gradient(
        to bottom,
        #00BCD4,
        #7ED321,
        #FFC107
    );

    box-shadow:
    0 0 25px rgba(0,188,212,.5);
}

/* ITEM */

.timeline-item{

    position:relative;

    width:50%;

    margin-bottom:80px;
}

/* LEFT */

.timeline-item.left{

    padding-right:60px;

    text-align:right;
}

/* RIGHT */

.timeline-item.right{

    margin-left:50%;

    padding-left:60px;
}

/* DOT */

.timeline-item::before{

    content:'';

    position:absolute;

    top:35px;

    width:22px;
    height:22px;

    border-radius:50%;

    background:#00BCD4;

    border:4px solid #08101f;

    box-shadow:
    0 0 20px rgba(0,188,212,.8);

    z-index:2;
}

.timeline-item.left::before{

    right:-11px;
}

.timeline-item.right::before{

    left:-11px;
}

/* CARD */

.timeline-card{

    padding:35px;

    border-radius:30px;

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

    backdrop-filter:blur(20px);

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

    transition:.4s ease;

    position:relative;
}

.timeline-card:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 25px 60px rgba(0,188,212,.15);
}

.timeline-card::before{

    content:'';

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:3px;

    border-radius:30px 30px 0 0;

    background:
    linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );
}

/* YEAR */

.year{

    display:inline-block;

    padding:10px 18px;

    border-radius:50px;

    background:
    rgba(0,188,212,.15);

    color:#00BCD4;

    font-weight:700;

    margin-bottom:20px;
}

/* CONTENT */

.timeline-card h3{

    color:#fff;

    margin-bottom:15px;

    font-size:1.6rem;
}

.timeline-card p{

    color:#cbd5e1;

    line-height:1.9;
}

/* RESPONSIVE */

@media(max-width:991px){

    .timeline::before{

        left:25px;
    }

    .timeline-item{

        width:100%;

        margin-left:0 !important;

        padding-left:70px !important;

        padding-right:0 !important;

        text-align:left !important;
    }

    .timeline-item::before{

        left:14px !important;
        right:auto !important;
    }

}

/* journey section ends here */

/* impact section starts here */

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

.impact-section{

    position:relative;

    padding:140px 5%;

    background:
    linear-gradient(
        180deg,
        #08101f,
        #050816
    );

    overflow:hidden;
}

/* GLOW */

.impact-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    opacity:.15;
}

.glow-left{

    width:400px;
    height:400px;

    background:#00BCD4;

    left:-150px;
    top:20%;
}

.glow-right{

    width:450px;
    height:450px;

    background:#7ED321;

    right:-150px;
    bottom:20%;
}

/* GRID */

.impact-grid{

    display:grid;

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

    gap:30px;

    margin-top:80px;
}

/* CARD */

.impact-card{

    position:relative;

    padding:45px;

    text-align:center;

    border-radius:30px;

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

    backdrop-filter:blur(20px);

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

    transition:.4s ease;

    overflow:hidden;
}

.impact-card:hover{

    transform:
    translateY(-12px);

    box-shadow:
    0 25px 60px rgba(0,188,212,.15);
}

.impact-card::before{

    content:'';

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:3px;

    background:
    linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );
}

/* NUMBER */

.impact-number{

    font-size:3.5rem;

    font-weight:800;

    margin-bottom:15px;

    background:
    linear-gradient(
        135deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );

    -webkit-background-clip:text;

    color:transparent;
}

/* ADD + SIGN */

.impact-number::after{

    content:"+";
}

/* TITLE */

.impact-card h3{

    color:#fff;

    font-size:1.25rem;

    font-weight:600;
}

/* RESPONSIVE */

@media(max-width:992px){

    .impact-grid{

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

}

@media(max-width:768px){

    .impact-grid{

        grid-template-columns:1fr;
    }

    .impact-number{

        font-size:3rem;
    }

}

/* impact section ends here */

/* leadership section starts here */

/* ==================================
   FOUNDER MESSAGE SECTION
================================== */

.legacy-message-section{

    position:relative;

    padding:140px 5%;

    background:
    linear-gradient(
        180deg,
        #08101f,
        #050816
    );

    overflow:hidden;
}

.legacy-message-container{

    display:grid;

    grid-template-columns:
    430px 1fr;

    gap:70px;

    align-items:center;

    margin-top:80px;
}

/* IMAGE AREA */

.legacy-profile-box{

    position:relative;
}

.legacy-profile-box::before{

    content:'';

    position:absolute;

    width:250px;
    height:250px;

    background:
    radial-gradient(
        circle,
        rgba(0,188,212,.25),
        transparent
    );

    top:-50px;
    left:-50px;

    filter:blur(40px);

    z-index:0;
}

.legacy-profile-image{

    position:relative;

    z-index:2;
}

.legacy-profile-image img{

    width:100%;

    border-radius:35px;

    display:block;

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

    box-shadow:
    0 30px 60px rgba(0,0,0,.3);
}

/* MESSAGE CARD */

.legacy-message-card{

    position:relative;

    padding:50px;

    border-radius:35px;

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

    backdrop-filter:blur(20px);

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

    overflow:hidden;
}

.legacy-message-card::before{

    content:'';

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:3px;

    background:
    linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );
}

/* QUOTE */

.legacy-quote-icon{

    font-size:4rem;

    color:#00BCD4;

    line-height:1;

    margin-bottom:20px;
}

/* NAME */

.legacy-message-card h3{

    color:#fff;

    font-size:2rem;

    margin-bottom:8px;
}

.legacy-message-card span{

    display:inline-block;

    color:#7ED321;

    font-weight:600;

    margin-bottom:25px;
}

/* TEXT */

.legacy-message-card p{

    color:#cbd5e1;

    line-height:2;

    margin-bottom:18px;

    font-size:1.05rem;
}

/* SIGNATURE */

.legacy-sign{

    margin-top:30px;

    font-size:2rem;

    color:#FFC107;

    font-family:cursive;
}

/* HOVER */

.legacy-message-card:hover{

    transform:
    translateY(-8px);

    transition:.4s;

    box-shadow:
    0 25px 60px rgba(0,188,212,.15);
}

/* RESPONSIVE */

@media(max-width:992px){

    .legacy-message-container{

        grid-template-columns:1fr;

        gap:50px;
    }

    .legacy-profile-box{

        max-width:500px;

        margin:auto;
    }

}

@media(max-width:768px){

    .legacy-message-card{

        padding:35px;
    }

    .legacy-message-card h3{

        font-size:1.7rem;
    }

}

/* leadership section ends here */


/* impact area section starts here */

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

.impact-showcase-section{

    padding:140px 5%;

    background:
    linear-gradient(
        180deg,
        #050816,
        #08101f
    );
}

.impact-panel{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

    margin-top:100px;
}

/* IMAGE */

.impact-panel-image{

    position:relative;

    overflow:hidden;

    border-radius:35px;
}

.impact-panel-image img{

    width:100%;

    height:650px;

    object-fit:cover;

    display:block;

    transition:.7s;
}

.impact-panel:hover .impact-panel-image img{

    transform:scale(1.08);
}

/* CONTENT */

.impact-panel-content{

    padding:20px;
}

.impact-badge{

    display:inline-block;

    padding:12px 24px;

    border-radius:50px;

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

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

    color:#00BCD4;

    margin-bottom:25px;
}

.impact-panel-content h3{

    color:#fff;

    font-size:3rem;

    line-height:1.2;

    margin-bottom:25px;
}

.impact-panel-content p{

    color:#cbd5e1;

    line-height:2;

    margin-bottom:40px;
}

/* SERVICES */

.impact-services{

    display:grid;

    gap:25px;
}

.impact-services div{

    padding:25px;

    border-radius:25px;

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

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

    transition:.4s;
}

.impact-services div:hover{

    transform:translateX(10px);

    border-color:
    rgba(0,188,212,.4);
}

.impact-services h4{

    color:#fff;

    margin-bottom:15px;

    font-size:1.1rem;
}

.impact-services ul{

    list-style:none;

    padding:0;
}

.impact-services li{

    color:#cbd5e1;

    margin-bottom:10px;

    position:relative;

    padding-left:18px;
}

.impact-services li::before{

    content:'';

    width:7px;
    height:7px;

    border-radius:50%;

    background:#7ED321;

    position:absolute;

    left:0;
    top:9px;
}

/* RESPONSIVE */

@media(max-width:991px){

    .impact-panel{

        grid-template-columns:1fr;

        gap:40px;
    }

    .impact-panel-two .impact-panel-content{

        order:2;
    }

    .impact-panel-two .impact-panel-image{

        order:1;
    }

    .impact-panel-image img{

        height:450px;
    }

    .impact-panel-content h3{

        font-size:2.2rem;
    }

}

@media(max-width:768px){

    .impact-panel-image img{

        height:350px;
    }

    .impact-panel-content h3{

        font-size:1.8rem;
    }

}

/* impact area section ends here */

/* trust section starts here */

/* ==================================
   WHY CHOOSE US
================================== */

.trust-advantage-section{

    padding:140px 5%;

    background:
    linear-gradient(
        180deg,
        #08101f,
        #050816
    );
}

.trust-grid{

    display:grid;

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

    gap:25px;

    margin-top:80px;
}

/* CARD */

.trust-card{

    position:relative;

    padding:35px;

    border-radius:30px;

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

    backdrop-filter:blur(20px);

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

    transition:.4s;

    overflow:hidden;
}

.trust-card:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 25px 60px rgba(0,188,212,.15);
}

.trust-card::before{

    content:'';

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:3px;

    background:
    linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );
}

/* FEATURED */

.trust-featured{

    grid-row:
    span 2;

    display:flex;

    flex-direction:column;

    justify-content:center;
}

/* ICON */

.trust-icon{

    font-size:3rem;

    margin-bottom:20px;
}

/* TITLE */

.trust-card h3{

    color:#fff;

    font-size:1.5rem;

    margin-bottom:15px;
}

/* TEXT */

.trust-card p{

    color:#cbd5e1;

    line-height:1.9;
}

/* RESPONSIVE */

@media(max-width:991px){

    .trust-grid{

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

    .trust-featured{

        grid-row:auto;

        grid-column:
        span 2;
    }
}

@media(max-width:768px){

    .trust-grid{

        grid-template-columns:1fr;
    }

    .trust-featured{

        grid-column:auto;
    }
}

/* trust section ends here */

/* credibility section starts here */

/* ===============================
   CREDIBILITY HUB
================================ */

.credibility-hub-section{

    padding:140px 5%;

    background:
    linear-gradient(
        180deg,
        #050816,
        #08101f
    );
}

.credibility-hub-card{

    display:grid;

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

    align-items:center;

    gap:60px;

    padding:70px;

    border-radius:40px;

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

    backdrop-filter:blur(25px);

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

    position:relative;

    overflow:hidden;
}

.credibility-hub-card::before{

    content:'';

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:
    linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );
}

/* CONTENT */

.credibility-tag{

    display:inline-block;

    padding:12px 24px;

    border-radius:50px;

    color:#00BCD4;

    background:
    rgba(0,188,212,.1);

    margin-bottom:25px;
}

.credibility-content h2{

    color:#fff;

    font-size:
    clamp(2rem,4vw,4rem);

    line-height:1.2;

    margin-bottom:25px;
}

.credibility-content p{

    color:#cbd5e1;

    line-height:2;

    margin-bottom:20px;
}

/* HIGHLIGHTS */

.credibility-highlights{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-top:30px;

    margin-bottom:35px;
}

.credibility-highlights span{

    padding:12px 18px;

    border-radius:50px;

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

    color:#fff;

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

/* BUTTON */

.credibility-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:16px 32px;

    border-radius:60px;

    text-decoration:none;

    color:#fff;

    font-weight:600;

    background:
    linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    transition:.4s;
}

.credibility-btn:hover{

    transform:
    translateY(-5px);

    box-shadow:
    0 20px 50px rgba(0,188,212,.25);
}

/* VISUAL */

.credibility-visual{

    display:flex;

    justify-content:center;

    align-items:center;
}

.trust-orb{

    position:relative;

    width:320px;
    height:320px;
}

.trust-center{

    position:absolute;

    inset:50% auto auto 50%;

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

    width:120px;
    height:120px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:
    linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    font-size:3rem;

    color:#fff;
}

.trust-ring{

    position:absolute;

    border-radius:50%;

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

    animation:
    orbit 10s linear infinite;
}

.ring-1{

    inset:20px;
}

.ring-2{

    inset:60px;

    animation-direction:reverse;
}

.ring-3{

    inset:100px;
}

@keyframes orbit{

    from{
        transform:rotate(0deg);
    }

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

/* RESPONSIVE */

@media(max-width:991px){

    .credibility-hub-card{

        grid-template-columns:1fr;

        text-align:center;
    }

    .credibility-highlights{

        justify-content:center;
    }

}

@media(max-width:768px){

    .credibility-hub-card{

        padding:40px;
    }

    .trust-orb{

        width:250px;
        height:250px;
    }

}

/* credibility section ends here */

/* allience section starts here */

/* ==================================
   PARTNER NETWORK
================================== */

.alliance-network-section{

    padding:140px 5%;

    background:
    linear-gradient(
        180deg,
        #08101f,
        #050816
    );

    overflow:hidden;
}

/* STATS */

.partner-stats{

    display:grid;

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

    gap:25px;

    margin:70px 0;
}

.partner-stat{

    text-align:center;

    padding:30px;

    border-radius:25px;

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

    backdrop-filter:blur(20px);

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

.partner-stat h3{

    font-size:2.5rem;

    color:#00BCD4;

    margin-bottom:10px;
}

.partner-stat span{

    color:#cbd5e1;
}

/* MARQUEE */

.partner-marquee{

    position:relative;

    overflow:hidden;

    margin-top:60px;

    padding:25px 0;
}

.partner-track{

    display:flex;

    gap:30px;

    width:max-content;

    animation:
    partnerScroll 25s linear infinite;
}

.partner-marquee:hover .partner-track{

    animation-play-state:paused;
}

.partner-logo{

    width:220px;
    height:120px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:25px;

    border-radius:25px;

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

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

    backdrop-filter:blur(20px);

    transition:.4s;
}

.partner-logo:hover{

    transform:
    translateY(-8px);

    border-color:
    rgba(0,188,212,.4);
}

.partner-logo img{

    max-width:100%;

    max-height:60px;

    object-fit:contain;

    filter:
    grayscale(100%)
    brightness(1.4);

    transition:.4s;
}

.partner-logo:hover img{

    filter:none;
}

@keyframes partnerScroll{

    from{

        transform:
        translateX(0);
    }

    to{

        transform:
        translateX(-50%);
    }
}

/* RESPONSIVE */

@media(max-width:991px){

    .partner-stats{

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

}

@media(max-width:768px){

    .partner-stats{

        grid-template-columns:1fr;
    }

    .partner-logo{

        width:180px;
        height:100px;
    }

}

/* allience section ends here */

/* testimonials section starts here */

/* ==================================
   TESTIMONIALS
================================== */

.impact-voices-section{

    padding:140px 5%;

    background:
    linear-gradient(
        180deg,
        #050816,
        #08101f
    );

    overflow:hidden;
}

.impact-voices-slider{

    position:relative;

    max-width:950px;

    margin:80px auto 30px;

    padding:60px;

    border-radius:40px;

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

    backdrop-filter:blur(25px);

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

    text-align:center;
}

.impact-voices-slider::before{

    content:'';

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:
    linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );
}

.voice-slide{

    display:none;
}

.voice-slide.active{

    display:block;
}

.voice-quote{

    font-size:5rem;

    color:#00BCD4;

    line-height:1;

    margin-bottom:20px;
}

.voice-slide p{

    color:#cbd5e1;

    font-size:1.15rem;

    line-height:2;

    max-width:750px;

    margin:auto auto 40px;
}

.voice-person{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;
}

.voice-person img{

    width:80px;
    height:80px;

    border-radius:50%;

    object-fit:cover;

    border:
    3px solid rgba(0,188,212,.4);
}

.voice-person h4{

    color:#fff;

    margin-bottom:5px;
}

.voice-person span{

    color:#94a3b8;
}

.voice-nav{

    position:absolute;

    top:50%;

    transform:
    translateY(-50%);

    width:55px;
    height:55px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    color:#fff;

    font-size:1.4rem;

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

    backdrop-filter:blur(15px);

    transition:.3s;
}

.voice-nav:hover{

    background:
    linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );
}

.voice-prev{

    left:-25px;
}

.voice-next{

    right:-25px;
}

.voice-dots{

    display:flex;

    justify-content:center;

    gap:12px;
}

.voice-dot{

    width:12px;
    height:12px;

    border-radius:50%;

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

    cursor:pointer;
}

.voice-dot.active{

    background:#00BCD4;
}

/* RESPONSIVE */

@media(max-width:768px){

    .impact-voices-slider{

        padding:40px 25px;
    }

    .voice-prev{

        left:10px;
    }

    .voice-next{

        right:10px;
    }

    .voice-slide p{

        font-size:1rem;
    }

}

/* testimonials section ends here */

/* cta section starts here */

/* ===============================
   JOIN THE MISSION CTA
================================ */

.mission-action-section{

    position:relative;

    padding:180px 5%;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        #050816,
        #08101f,
        #050816
    );
}

/* GLOWS */

.mission-action-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    opacity:.2;
}

.glow-one{

    width:450px;
    height:450px;

    background:#00BCD4;

    top:-150px;
    left:-150px;
}

.glow-two{

    width:500px;
    height:500px;

    background:#7ED321;

    bottom:-180px;
    right:-180px;
}

/* CONTENT */

.mission-action-content{

    position:relative;

    z-index:2;

    max-width:950px;

    margin:auto;

    text-align:center;
}

.mission-action-tag{

    display:inline-block;

    padding:14px 28px;

    border-radius:50px;

    color:#00BCD4;

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

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

    margin-bottom:30px;
}

/* HEADING */

.mission-action-content h2{

    color:#fff;

    font-size:
    clamp(3rem,6vw,5.5rem);

    line-height:1.1;

    margin-bottom:25px;
}

.mission-action-content h2 span{

    display:block;

    background:
    linear-gradient(
        135deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );

    -webkit-background-clip:text;

    color:transparent;
}

/* TEXT */

.mission-action-content p{

    max-width:800px;

    margin:auto;

    color:#cbd5e1;

    line-height:2;

    font-size:1.15rem;

    margin-bottom:50px;
}

/* BUTTONS */

.mission-action-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;
}

/* PRIMARY */

.mission-primary-btn{

    padding:18px 40px;

    border-radius:60px;

    text-decoration:none;

    color:#fff;

    font-weight:700;

    background:
    linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    transition:.4s;
}

.mission-primary-btn:hover{

    transform:
    translateY(-6px);

    box-shadow:
    0 20px 50px rgba(0,188,212,.35);
}

/* SECONDARY */

.mission-secondary-btn{

    padding:18px 40px;

    border-radius:60px;

    text-decoration:none;

    color:#fff;

    font-weight:700;

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

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

    backdrop-filter:blur(20px);

    transition:.4s;
}

.mission-secondary-btn:hover{

    transform:
    translateY(-6px);

    border-color:#00BCD4;

    box-shadow:
    0 20px 50px rgba(0,188,212,.15);
}

/* RESPONSIVE */

@media(max-width:768px){

    .mission-action-section{

        padding:120px 5%;
    }

    .mission-action-content h2{

        font-size:2.5rem;
    }

    .mission-action-content p{

        font-size:1rem;
    }

    .mission-action-buttons{

        flex-direction:column;
    }

    .mission-primary-btn,
    .mission-secondary-btn{

        width:100%;
    }

}

/* cta section ends here */

/* faq section starts here */

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

.knowledge-center-section{

    padding:140px 5%;

    background:
    linear-gradient(
        180deg,
        #08101f,
        #050816
    );
}

.knowledge-faq-wrapper{

    max-width:1100px;

    margin:80px auto 0;
}

/* FAQ ITEM */

.knowledge-faq-item{

    margin-bottom:20px;

    border-radius:25px;

    overflow:hidden;

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

    backdrop-filter:blur(20px);

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

    transition:.3s;
}

.knowledge-faq-item:hover{

    border-color:
    rgba(0,188,212,.3);
}

/* QUESTION */

.knowledge-faq-question{

    width:100%;

    border:none;

    background:none;

    color:#fff;

    cursor:pointer;

    display:flex;

    justify-content:space-between;

    align-items:center;

    text-align:left;

    padding:28px 35px;

    font-size:1.1rem;

    font-weight:600;
}

.knowledge-faq-icon{

    width:40px;
    height:40px;

    display:flex;

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

    border-radius:50%;

    background:
    rgba(0,188,212,.1);

    color:#00BCD4;

    font-size:1.6rem;

    transition:.4s;
}

/* ANSWER */

.knowledge-faq-answer{

    max-height:0;

    overflow:hidden;

    transition:
    max-height .4s ease;
}

.knowledge-faq-answer p{

    padding:
    0 35px 30px;

    color:#cbd5e1;

    line-height:2;
}

/* ACTIVE */

.knowledge-faq-item.active
.knowledge-faq-answer{

    max-height:300px;
}
/* .knowledge-faq-item.active
.knowledge-faq-icon{

    transform:rotate(45deg);
} */

.knowledge-faq-item.active
.knowledge-faq-icon{

    transform:rotate(45deg);

    background:
    linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    color:#fff;
}

/* RESPONSIVE */

@media(max-width:768px){

    .knowledge-faq-question{

        padding:22px;

        font-size:1rem;
    }

    .knowledge-faq-answer p{

        padding:
        0 22px 25px;
    }

}

/* faq section ends here */

/* About Us Page Ends Here */



/* Activities Page Starts Here */

/* hero sections starts here */

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

.activities-banner-section{

    position:relative;

    min-height:75vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:180px 5% 120px;

    overflow:hidden;

    background:
    linear-gradient(
        180deg,
        #050816,
        #08101f
    );
}

/* GRID */

.activities-grid-overlay{

    position:absolute;

    inset:0;

    background-image:
    linear-gradient(
        rgba(255,255,255,.03) 1px,
        transparent 1px
    ),
    linear-gradient(
        90deg,
        rgba(255,255,255,.03) 1px,
        transparent 1px
    );

    background-size:60px 60px;

    opacity:.35;
}

/* BACKGROUND IMAGE */

.activities-banner-bg{

    position:absolute;

    inset:0;

    opacity:.12;
}

.activities-banner-bg img{

    width:100%;

    height:100%;

    object-fit:cover;
}

/* GRADIENT GLOWS */

.activities-gradient-1{

    position:absolute;

    width:450px;
    height:450px;

    background:#00BCD4;

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

    border-radius:50%;

    filter:blur(120px);

    opacity:.15;
}

.activities-gradient-2{

    position:absolute;

    width:500px;
    height:500px;

    background:#7ED321;

    right:-200px;
    bottom:-150px;

    border-radius:50%;

    filter:blur(140px);

    opacity:.15;
}

/* CONTENT */

.activities-banner-content{

    position:relative;

    z-index:10;

    text-align:center;

    max-width:1000px;
}

/* BREADCRUMB */

.activities-breadcrumb{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    border-radius:50px;

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

    backdrop-filter:blur(20px);

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

    margin-bottom:35px;
}

.activities-breadcrumb a{

    text-decoration:none;

    color:#00BCD4;

    font-weight:600;
}

.activities-breadcrumb span{

    color:#cbd5e1;
}

/* HEADING */

.activities-banner-content h1{

    color:#fff;

    font-size:
    clamp(3rem,7vw,6rem);

    line-height:1.1;

    margin-bottom:25px;
}

.activities-banner-content h1 span{

    background:
    linear-gradient(
        135deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );

    -webkit-background-clip:text;

    color:transparent;
}

/* TEXT */

.activities-banner-content p{

    max-width:850px;

    margin:auto;

    color:#cbd5e1;

    font-size:1.15rem;

    line-height:2;
}

/* FLOATING PARTICLES */

.activities-particles span{

    position:absolute;

    width:8px;
    height:8px;

    border-radius:50%;

    background:#00BCD4;

    opacity:.35;

    animation:
    activityFloat 8s linear infinite;
}

.activities-particles span:nth-child(1){

    top:20%;
    left:15%;
}

.activities-particles span:nth-child(2){

    top:35%;
    right:20%;
}

.activities-particles span:nth-child(3){

    bottom:30%;
    left:25%;
}

.activities-particles span:nth-child(4){

    bottom:15%;
    right:15%;
}

.activities-particles span:nth-child(5){

    top:55%;
    left:55%;
}

.activities-particles span:nth-child(6){

    top:15%;
    right:40%;
}

@keyframes activityFloat{

    0%,100%{

        transform:translateY(0);
    }

    50%{

        transform:translateY(-30px);
    }
}

/* RESPONSIVE */

@media(max-width:768px){

    .activities-banner-section{

        min-height:65vh;

        padding:150px 5% 90px;
    }

    .activities-banner-content p{

        font-size:1rem;
    }

}

/* hero sections ends here */

/* impact intro section starts here */

/* ===================================
   ACTIVITIES INTRO SECTION
=================================== */

.impact-intro-section{

    padding:140px 5%;

    background:
    linear-gradient(
        180deg,
        #08101f,
        #050816
    );

    position:relative;

    overflow:hidden;
}

.impact-intro-wrapper{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:80px;

    align-items:center;
}

/* IMAGE COLLAGE */

.impact-intro-gallery{

    display:grid;

    grid-template-columns:
    1.2fr 1fr;

    gap:20px;

    align-items:stretch;
}

.impact-photo{

    overflow:hidden;

    border-radius:30px;

    position:relative;

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

.impact-photo img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.6s;
}

.impact-photo:hover img{

    transform:scale(1.08);
}

.impact-photo-large{

    height:520px;
}

.impact-photo-small{

    height:250px;
}

.impact-intro-gallery .impact-photo-small:nth-child(2){

    margin-bottom:20px;
}

/* CONTENT */

.impact-intro-tag{

    display:inline-block;

    padding:12px 24px;

    border-radius:50px;

    background:
    rgba(0,188,212,.1);

    color:#00BCD4;

    font-weight:600;

    margin-bottom:25px;
}

.impact-intro-content h2{

    color:#fff;

    font-size:
    clamp(2.5rem,5vw,4rem);

    line-height:1.2;

    margin-bottom:25px;
}

.impact-intro-content h2 span{

    display:block;

    background:
    linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    -webkit-background-clip:text;

    color:transparent;
}

.impact-intro-content p{

    color:#cbd5e1;

    line-height:2;

    font-size:1.05rem;

    margin-bottom:40px;
}

/* STATS */

.impact-intro-stats{

    display:grid;

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

    gap:20px;
}

.impact-stat-box{

    padding:25px;

    border-radius:25px;

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

    backdrop-filter:blur(20px);

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

    transition:.4s;
}

.impact-stat-box:hover{

    transform:
    translateY(-8px);

    border-color:
    rgba(0,188,212,.3);
}

.impact-stat-box h3{

    font-size:2rem;

    color:#00BCD4;

    margin-bottom:10px;
}

.impact-stat-box span{

    color:#cbd5e1;
}

/* RESPONSIVE */

@media(max-width:991px){

    .impact-intro-wrapper{

        grid-template-columns:1fr;

        gap:50px;
    }

    .impact-photo-large{

        height:400px;
    }
}

@media(max-width:768px){

    .impact-intro-gallery{

        grid-template-columns:1fr;
    }

    .impact-photo-large,
    .impact-photo-small{

        height:280px;
    }

    .impact-intro-stats{

        grid-template-columns:1fr;
    }
}

/* impact intro section ends here */

/* activities section starts here */

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

.activity-showcase-section{

    padding:140px 5%;

    background:
    linear-gradient(
        180deg,
        #050816,
        #08101f
    );
}

.impact-card-grid{

    display:grid;

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

    gap:30px;

    margin-top:80px;
}

/* CARD */

.impact-activity-card{

    position:relative;

    height:480px;

    border-radius:30px;

    overflow:hidden;

    cursor:pointer;

    transition:.5s;
}

.impact-activity-card img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.8s;
}

.impact-card-overlay{

    position:absolute;

    inset:0;

    padding:35px;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    background:
    linear-gradient(
        to top,
        rgba(5,8,22,.95),
        rgba(5,8,22,.35)
    );
}

/* GRADIENT BORDER */

.impact-activity-card::before{

    content:'';

    position:absolute;

    inset:0;

    padding:2px;

    border-radius:30px;

    background:
    linear-gradient(
        135deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );

    opacity:0;

    transition:.5s;

    z-index:2;

    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;
}

.impact-activity-card:hover::before{

    opacity:1;
}

.impact-activity-card:hover{

    transform:
    translateY(-15px);
}

.impact-activity-card:hover img{

    transform:scale(1.1);
}

/* CONTENT */

.impact-card-icon{

    font-size:2rem;

    margin-bottom:15px;
}

.impact-card-overlay h3{

    color:#fff;

    font-size:1.5rem;

    margin-bottom:15px;
}

.impact-card-overlay p{

    color:#cbd5e1;

    line-height:1.8;

    margin-bottom:20px;
}

.impact-card-overlay a{

    color:#00BCD4;

    text-decoration:none;

    font-weight:600;
}

.impact-card-overlay a:hover{

    color:#7ED321;
}

/* RESPONSIVE */

@media(max-width:991px){

    .impact-card-grid{

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

@media(max-width:768px){

    .impact-card-grid{

        grid-template-columns:1fr;
    }

    .impact-activity-card{

        height:420px;
    }
}

/* activities section ends here */

/* impact flow section starts here */

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

.impact-roadmap-section{

    position:relative;

    padding:140px 5%;

    background:
    linear-gradient(
        180deg,
        #050816 0%,
        #08101f 50%,
        #050816 100%
    );

    overflow:hidden;

}

/* BACKGROUND GLOW */

.impact-roadmap-section::before{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    background:
    radial-gradient(circle,
    rgba(0,188,212,.12),
    transparent 70%);

    left:-250px;
    top:-250px;

    filter:blur(50px);

}

.impact-roadmap-section::after{

    content:"";

    position:absolute;

    width:650px;
    height:650px;

    background:
    radial-gradient(circle,
    rgba(126,211,33,.08),
    transparent 70%);

    right:-250px;
    bottom:-250px;

    filter:blur(60px);

}

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

.roadmap-wrapper{

    position:relative;

    max-width:1300px;

    margin:100px auto 0;

}

/*=========================================
 CENTER LINE
==========================================*/

.roadmap-line{

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:4px;

    height:100%;

    border-radius:50px;

    background:
    linear-gradient(
    to bottom,
    #00BCD4,
    #7ED321,
    #FFC107,
    #00BCD4);

    background-size:100% 400%;

    animation:lineGlow 8s linear infinite;

    box-shadow:

    0 0 20px rgba(0,188,212,.4),

    0 0 50px rgba(0,188,212,.25);

}

@keyframes lineGlow{

0%{

background-position:0% 0%;

}

100%{

background-position:0% 100%;

}

}

/*=========================================
 STEP
==========================================*/

.roadmap-step{

    width:50%;

    position:relative;

    margin-bottom:90px;

}

.roadmap-step.left{

    padding-right:80px;

}

.roadmap-step.right{

    margin-left:50%;

    padding-left:80px;

}

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

.roadmap-step::before{

    content:"";

    position:absolute;

    width:24px;
    height:24px;

    border-radius:50%;

    background:#00BCD4;

    border:5px solid #08101f;

    top:55px;

    box-shadow:

    0 0 20px #00BCD4,

    0 0 40px rgba(0,188,212,.5);

    animation:pulseNode 2.5s infinite;

    z-index:10;

}

.roadmap-step.left::before{

    right:-12px;

}

.roadmap-step.right::before{

    left:-12px;

}

@keyframes pulseNode{

0%{

transform:scale(1);

}

50%{

transform:scale(1.3);

}

100%{

transform:scale(1);

}

}

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

.roadmap-card{

    position:relative;

    padding:35px;

    border-radius:30px;

    background:

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

    backdrop-filter:blur(20px);

    border:

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

    transition:.45s;

    overflow:hidden;

}

/* Animated Top Border */

.roadmap-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:3px;

    background:

    linear-gradient(
    90deg,
    #00BCD4,
    #7ED321,
    #FFC107);

    transition:.8s;

}

.roadmap-card:hover::before{

left:0;

}

.roadmap-card:hover{

transform:

translateY(-18px)

scale(1.02);

box-shadow:

0 25px 60px rgba(0,188,212,.15);

border-color:

rgba(0,188,212,.35);

}

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

.roadmap-icon{

    width:90px;
    height:90px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2.2rem;

    margin-bottom:25px;

    background:

    linear-gradient(
    135deg,
    rgba(0,188,212,.18),
    rgba(126,211,33,.18));

    border:

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

    transition:.4s;

}

.roadmap-card:hover .roadmap-icon{

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

}

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

.roadmap-content span{

display:inline-block;

margin-bottom:15px;

color:#00BCD4;

font-weight:700;

letter-spacing:2px;

font-size:.8rem;

}

.roadmap-content h3{

color:#fff;

font-size:1.7rem;

margin-bottom:18px;

}

.roadmap-content p{

color:#cbd5e1;

line-height:1.9;

}

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

@media(max-width:992px){

.roadmap-line{

left:25px;

}

.roadmap-step{

width:100%;

margin-left:0!important;

padding-left:70px!important;

padding-right:0!important;

}

.roadmap-step::before{

left:13px!important;

right:auto!important;

}

}

@media(max-width:768px){

.roadmap-card{

padding:28px;

}

.roadmap-content h3{

font-size:1.4rem;

}

.roadmap-icon{

width:70px;
height:70px;

font-size:1.7rem;

}

}

/* impact flow section ends here */

/* impact dashboard section starts here */

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

.impact-dashboard-section{
    position:relative;
    padding:140px 5%;
    background:linear-gradient(180deg,#050816,#08101f,#050816);
    overflow:hidden;
}

/* Background Glow */

.impact-dashboard-section::before{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    left:-250px;
    top:-250px;
    background:radial-gradient(circle,rgba(0,188,212,.12),transparent 70%);
    filter:blur(70px);
}

.impact-dashboard-section::after{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    right:-250px;
    bottom:-250px;
    background:radial-gradient(circle,rgba(126,211,33,.10),transparent 70%);
    filter:blur(80px);
}

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

.impact-dashboard-grid{

    display:grid;

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

    gap:30px;

    margin-top:90px;

}

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

.dashboard-card{

    position:relative;

    overflow:hidden;

    border-radius:32px;

    padding:35px;

    background:

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

    backdrop-filter:blur(22px);

    border:

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

    transition:.45s;

}

/* animated border */

.dashboard-card::before{

    content:"";

    position:absolute;

    inset:0;

    padding:2px;

    border-radius:32px;

    background:

    linear-gradient(
    135deg,
    #00BCD4,
    #7ED321,
    #FFC107,
    #00BCD4);

    background-size:300%;

    animation:borderMove 8s linear infinite;

    opacity:0;

    transition:.4s;

    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

}

.dashboard-card:hover::before{

    opacity:1;

}

.dashboard-card:hover{

    transform:

    translateY(-15px);

    box-shadow:

    0 30px 60px rgba(0,188,212,.15);

}

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

.dashboard-large{

    grid-column:span 2;

    display:flex;

    align-items:center;

    gap:35px;

    min-height:320px;

}

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

.dashboard-small{

    text-align:center;

    min-height:230px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

/*==================================
 SVG RING
==================================*/

.dashboard-ring{

    position:relative;

    width:190px;

    height:190px;

    flex-shrink:0;

}

.dashboard-ring svg{

    width:100%;

    height:100%;

    transform:rotate(-90deg);

}

.dashboard-track{

    fill:none;

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

    stroke-width:10;

}

.dashboard-progress{

    fill:none;

    stroke:url(#dashboardGradient);

    stroke:#00BCD4;

    stroke-width:10;

    stroke-linecap:round;

    stroke-dasharray:452;

    stroke-dashoffset:452;

    transition:1.5s;

}

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

.dashboard-number{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:row;

}

.dashboard-number span{

    font-size:2.6rem;

    font-weight:700;

    color:#fff;

}

.dashboard-number small{

    font-size:1.4rem;

    color:#00BCD4;

    margin-left:4px;

}

/*==================================
 INFO
==================================*/

.dashboard-info h3{

    color:#fff;

    font-size:1.8rem;

    margin-bottom:18px;

}

.dashboard-info p{

    color:#cbd5e1;

    line-height:1.8;

    margin-bottom:25px;

}

.dashboard-growth{

    display:inline-flex;

    padding:10px 18px;

    border-radius:30px;

    background:

    rgba(0,188,212,.08);

    color:#00BCD4;

    font-size:.9rem;

    font-weight:600;

}

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

.dashboard-icon{

    width:85px;

    height:85px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

    font-size:2rem;

    background:

    linear-gradient(
    135deg,
    rgba(0,188,212,.18),
    rgba(126,211,33,.15));

    border:

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

    transition:.4s;

}

.dashboard-small:hover .dashboard-icon{

    transform:

    rotate(10deg)

    scale(1.08);

}

.dashboard-small h4{

    color:#fff;

    margin-bottom:18px;

    font-size:1.25rem;

}

.dashboard-value{

    font-size:2.4rem;

    font-weight:700;

    color:#00BCD4;

}

/*==================================
 FLOATING SHINE
==================================*/

.dashboard-card::after{

    content:"";

    position:absolute;

    top:-100%;

    left:-60%;

    width:60%;

    height:250%;

    background:

    linear-gradient(

    transparent,

    rgba(255,255,255,.08),

    transparent);

    transform:rotate(25deg);

    transition:1.2s;

}

.dashboard-card:hover::after{

    left:170%;

}

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

@media(max-width:1200px){

.impact-dashboard-grid{

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

}

.dashboard-large{

grid-column:span 2;

}

}

@media(max-width:768px){

.impact-dashboard-grid{

grid-template-columns:1fr;

}

.dashboard-large{

grid-column:span 1;

flex-direction:column;

text-align:center;

}

.dashboard-ring{

width:160px;
height:160px;

}

.dashboard-number span{

font-size:2rem;

}

.dashboard-info h3{

font-size:1.5rem;

}

}

/* impact dashboard section ends here */

/* project section starts here */

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

.featured-projects-section{

    padding:140px 5%;

    background:
    linear-gradient(
        180deg,
        #08101f,
        #050816
    );

}

.project-showcase-card{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:center;

    margin-top:80px;

}

.project-showcase-card.reverse{

    direction:rtl;

}

.project-showcase-card.reverse>*{

    direction:ltr;

}

.project-showcase-image{

    overflow:hidden;

    border-radius:30px;

}

.project-showcase-image img{

    width:100%;

    height:450px;

    object-fit:cover;

    transition:.6s;

}

.project-showcase-card:hover img{

    transform:scale(1.08);

}

.project-showcase-content{

    padding:40px;

    border-radius:30px;

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

    backdrop-filter:blur(20px);

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

    transition:.4s;

}

.project-showcase-card:hover
.project-showcase-content{

    transform:translateY(-10px);

    border-color:
    rgba(0,188,212,.4);

    box-shadow:
    0 20px 45px rgba(0,188,212,.15);

}

.project-category{

    display:inline-block;

    padding:10px 20px;

    border-radius:30px;

    background:
    rgba(0,188,212,.1);

    color:#00BCD4;

    font-size:.9rem;

    margin-bottom:20px;

}

.project-showcase-content h3{

    color:#fff;

    font-size:2rem;

    margin-bottom:20px;

}

.project-showcase-content p{

    color:#cbd5e1;

    line-height:1.9;

    margin-bottom:25px;

}

.project-highlights{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:30px;

}

.project-highlights span{

    padding:10px 18px;

    border-radius:30px;

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

    color:#fff;

    font-size:.9rem;

}

.project-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:#00BCD4;

    font-weight:600;

    transition:.3s;

}

.project-btn:hover{

    color:#7ED321;

}

@media(max-width:991px){

    .project-showcase-card{

        grid-template-columns:1fr;

    }

    .project-showcase-card.reverse{

        direction:ltr;

    }

}

/* project section ends here */

/* gallery section starts here */

/*======================================
    ACTIVITY GALLERY
======================================*/

.activity-gallery-section{

    padding:140px 5%;

    background:
    linear-gradient(
    180deg,
    #050816,
    #08101f);

}

.activity-gallery-grid{

    display:grid;

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

    grid-auto-rows:260px;

    gap:22px;

    margin-top:80px;

}

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    display:block;

}

.gallery-large{

    grid-column:span 2;

}

.gallery-tall{

    grid-row:span 2;

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.8s;

}

.gallery-overlay{

    position:absolute;

    inset:0;

    padding:30px;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    background:

    linear-gradient(

    transparent,

    rgba(5,8,22,.88));

    transition:.4s;

}

.gallery-overlay h3{

    color:#fff;

    font-size:1.7rem;

    margin-bottom:8px;

}

.gallery-overlay span{

    color:#d7dde5;

}

.gallery-item::before{

    content:"";

    position:absolute;

    inset:0;

    padding:2px;

    border-radius:28px;

    background:

    linear-gradient(

    135deg,

    #00BCD4,

    #7ED321,

    #FFC107);

    opacity:0;

    transition:.45s;

    -webkit-mask:

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

    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    z-index:2;

}

.gallery-item:hover::before{

opacity:1;

}

.gallery-item:hover img{

transform:scale(1.1);

}

.gallery-item:hover .gallery-overlay{

background:

linear-gradient(

transparent,

rgba(5,8,22,.97));

}

.gallery-btn-wrapper{

margin-top:70px;

text-align:center;

}

.gallery-view-btn{

display:inline-block;

padding:18px 38px;

border-radius:60px;

text-decoration:none;

font-weight:600;

color:#fff;

background:

linear-gradient(

135deg,

#00BCD4,

#7ED321);

transition:.4s;

}

.gallery-view-btn:hover{

transform:

translateY(-6px);

box-shadow:

0 20px 40px rgba(0,188,212,.25);

}

@media(max-width:992px){

.activity-gallery-grid{

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

}

.gallery-large{

grid-column:span 2;

}

}

@media(max-width:768px){

.activity-gallery-grid{

grid-template-columns:1fr;

grid-auto-rows:250px;

}

.gallery-large,

.gallery-tall{

grid-column:auto;

grid-row:auto;

}

}

/* gallery section ends here */

/* impact stories section starts here */

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

.impact-stories-section{

    padding:140px 5%;

    background:
    linear-gradient(180deg,#08101f,#050816);

    overflow:hidden;

}

.impact-slider{

    margin-top:80px;

    overflow:hidden;

}

.impact-track{

    display:flex;

    gap:35px;

    transition:.7s ease;

}

.impact-story-card{

    min-width:75%;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

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

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

    backdrop-filter:blur(18px);

    border-radius:35px;

    overflow:hidden;

    transform:scale(.9);

    opacity:.45;

    transition:.5s;

}

.impact-story-card.active{

    transform:scale(1);

    opacity:1;

}

.impact-story-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.impact-story-content{

    padding:50px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.story-category{

    color:#00BCD4;

    font-size:.85rem;

    letter-spacing:2px;

    margin-bottom:15px;

}

.impact-story-content h3{

    color:#fff;

    font-size:2rem;

    margin-bottom:20px;

}

.impact-story-content p{

    color:#cbd5e1;

    line-height:1.9;

    margin-bottom:30px;

}

.impact-story-content a{

    color:#00BCD4;

    text-decoration:none;

    font-weight:600;

}

@media(max-width:992px){

.impact-story-card{

grid-template-columns:1fr;

min-width:100%;

}

.impact-story-image img{

height:300px;

}

}

/* impact stories section ends here */

/* ripple section starts here */

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

.ripple-impact-section{

    position:relative;

    padding:160px 5%;

    overflow:hidden;

    background:
    linear-gradient(
    180deg,
    #050816,
    #08101f,
    #050816);

}

.ripple-impact-section .container{

    position:relative;

    z-index:5;

}

.ripple-impact-card::before,
.ripple-impact-card::after{

    pointer-events:none;

}

/* Ripple Background */

.ripple-bg{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    pointer-events:none;

}

.ripple-circle{

    position:absolute;

    border-radius:50%;

    border:1px solid rgba(0,188,212,.15);

    animation:rippleAnimation 8s linear infinite;

    pointer-events:none;

}

.ripple-one{

    width:300px;
    height:300px;

}

.ripple-two{

    width:550px;
    height:550px;

    animation-delay:2s;

}

.ripple-three{

    width:800px;
    height:800px;

    animation-delay:4s;

}

@keyframes rippleAnimation{

0%{

transform:scale(.7);

opacity:.8;

}

100%{

transform:scale(1.4);

opacity:0;

}

}

/* Card */

.ripple-impact-card{

    position:relative;

    z-index:10;

    max-width:950px;

    margin:auto;

    text-align:center;

    padding:80px 60px;

    border-radius:40px;

    background:

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

    backdrop-filter:blur(20px);

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

    overflow:hidden;

}

/* Animated Border */

.ripple-impact-card::before{

    content:"";

    position:absolute;

    inset:0;

    padding:2px;

    border-radius:40px;

    background:

    linear-gradient(
    135deg,
    #00BCD4,
    #7ED321,
    #FFC107,
    #00BCD4);

    background-size:300%;

    animation:borderMove 7s linear infinite;

    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

}

.ripple-icon{

    width:110px;
    height:110px;

    margin:auto auto 30px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-size:3rem;

    background:

    linear-gradient(
    135deg,
    rgba(0,188,212,.18),
    rgba(126,211,33,.18));

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

}

@keyframes floatRipple{

50%{

transform:translateY(-12px);

}

}

.ripple-tag{

    display:inline-block;

    padding:12px 24px;

    border-radius:30px;

    background:rgba(0,188,212,.08);

    color:#00BCD4;

    margin-bottom:25px;

    font-weight:600;

}

.ripple-impact-card h2{

    color:#fff;

    font-size:clamp(2.8rem,5vw,4.8rem);

    line-height:1.15;

    margin-bottom:25px;

}

.ripple-impact-card h2 span{

    background:

    linear-gradient(
    135deg,
    #00BCD4,
    #7ED321,
    #FFC107);

    -webkit-background-clip:text;

    color:transparent;

}

.ripple-impact-card p{

    max-width:760px;

    margin:auto;

    color:#cbd5e1;

    line-height:2;

    margin-bottom:45px;

}

/* Buttons */

.ripple-actions{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.ripple-btn-primary,

.ripple-btn-secondary{

    padding:18px 36px;

    border-radius:60px;

    text-decoration:none;

    font-weight:600;

    transition:.4s;

}

.ripple-btn-primary{

    color:#fff;

    background:

    linear-gradient(
    135deg,
    #00BCD4,
    #7ED321);

}

.ripple-btn-primary:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 40px rgba(0,188,212,.3);

}

.ripple-btn-secondary{

    color:#fff;

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

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

}

.ripple-btn-secondary:hover{

    border-color:#00BCD4;

    transform:translateY(-6px);

}

@media(max-width:768px){

.ripple-impact-card{

padding:60px 30px;

}

.ripple-actions{

flex-direction:column;

}

.ripple-btn-primary,

.ripple-btn-secondary{

width:100%;

}

}

/* ripple section ends here */

/* faq section starts here */

/*========================================
ACTIVITIES FAQ
========================================*/

.activities-faq-section{

    padding:140px 5%;

    background:
    linear-gradient(180deg,#08101f,#050816);

}

.activities-faq-wrapper{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:70px;

    align-items:start;

}

/* LEFT */

.activities-faq-left h2{

    color:#fff;

    font-size:3rem;

    margin:20px 0;

}

.activities-faq-left h2 span{

    color:#00BCD4;

}

.activities-faq-left p{

    color:#cbd5e1;

    line-height:1.9;

}

/* HELP CARD */

.faq-help-card{

    margin-top:45px;

    padding:35px;

    border-radius:30px;

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

    backdrop-filter:blur(20px);

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

}

.faq-help-icon{

    width:80px;

    height:80px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

    background:linear-gradient(135deg,#00BCD4,#7ED321);

    margin-bottom:25px;

}

.faq-help-card h3{

    color:#fff;

    margin-bottom:15px;

}

.faq-contact-btn{

    display:inline-block;

    margin-top:20px;

    padding:14px 30px;

    border-radius:40px;

    text-decoration:none;

    color:#fff;

    background:linear-gradient(135deg,#00BCD4,#7ED321);

    transition:.4s;

}

.faq-contact-btn:hover{

    transform:translateY(-5px);

}

/* FAQ */

.activity-faq-item{

    margin-bottom:20px;

    border-radius:25px;

    overflow:hidden;

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

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

    backdrop-filter:blur(20px);

    transition:.35s;

}

.activity-faq-item.active{

    border-color:#00BCD4;

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

}

.activity-faq-question{

    width:100%;

    border:none;

    background:none;

    color:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:28px;

    cursor:pointer;

    text-align:left;

    font-size:1.05rem;

    font-weight:600;

}

.activity-faq-icon{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,188,212,.12);

    color:#00BCD4;

    font-size:1.5rem;

    transition:.4s;

}

.activity-faq-item.active .activity-faq-icon{

    transform:rotate(45deg);

    background:#00BCD4;

    color:#fff;

}

.activity-faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .45s ease;

}

.activity-faq-answer p{

    color:#cbd5e1;

    padding:0 28px 28px;

    line-height:1.9;

}

.activity-faq-item.active .activity-faq-answer{

    max-height:300px;

}

/* RESPONSIVE */

@media(max-width:991px){

.activities-faq-wrapper{

grid-template-columns:1fr;

}

.activities-faq-left{

text-align:center;

}

.faq-help-card{

max-width:500px;

margin:40px auto 0;

}

}

/* faq section ends here */

/* cta section starts here */

/*==================================
 GRAND CTA
===================================*/

.grand-finale-section{

    position:relative;

    padding:170px 5%;

    overflow:hidden;

    background:
    linear-gradient(
    180deg,
    #050816,
    #08101f,
    #050816);

}

/* glowing blobs */

.grand-bg-orb{

    position:absolute;

    width:500px;
    height:500px;

    border-radius:50%;

    filter:blur(100px);

    opacity:.15;

}

.orb-left{

    left:-180px;

    top:-180px;

    background:#00BCD4;

}

.orb-right{

    right:-180px;

    bottom:-180px;

    background:#7ED321;

}

/* floating particles */

.grand-floating-particles span{

    position:absolute;

    width:8px;
    height:8px;

    border-radius:50%;

    background:#00BCD4;

    opacity:.35;

    animation:grandFloat 8s linear infinite;

}

.grand-floating-particles span:nth-child(1){top:15%;left:18%;}
.grand-floating-particles span:nth-child(2){top:30%;right:20%;}
.grand-floating-particles span:nth-child(3){bottom:20%;left:25%;}
.grand-floating-particles span:nth-child(4){bottom:15%;right:18%;}
.grand-floating-particles span:nth-child(5){top:55%;left:55%;}

@keyframes grandFloat{

50%{

transform:translateY(-30px);

}

}

/* card */

.grand-finale-card{

    position:relative;

    max-width:1150px;

    margin:auto;

    padding:90px 70px;

    border-radius:40px;

    text-align:center;

    background:

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

    backdrop-filter:blur(25px);

    border:

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

    overflow:hidden;

}

/* animated border */

.grand-finale-card::before{

    content:"";

    position:absolute;

    inset:0;

    padding:2px;

    border-radius:40px;

    background:

    linear-gradient(

    90deg,

    #00BCD4,

    #7ED321,

    #FFC107,

    #00BCD4);

    background-size:300%;

    animation:borderMove 8s linear infinite;

    -webkit-mask:

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

    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    pointer-events:none;

}

.grand-earth{

    font-size:5rem;

    margin-bottom:20px;

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

}

@keyframes earthFloat{

50%{

transform:translateY(-10px);

}

}

.grand-tag{

    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(0,188,212,.1);

    color:#00BCD4;

    font-weight:600;

    margin-bottom:25px;

}

.grand-finale-card h2{

    color:#fff;

    font-size:clamp(3rem,6vw,5rem);

    line-height:1.1;

    margin-bottom:25px;

}

.grand-finale-card h2 span{

    display:block;

    background:

    linear-gradient(

    135deg,

    #00BCD4,

    #7ED321,

    #FFC107);

    -webkit-background-clip:text;

    color:transparent;

}

.grand-finale-card p{

    max-width:760px;

    margin:auto;

    color:#cbd5e1;

    line-height:2;

    margin-bottom:45px;

}

/* mini stats */

.grand-mini-stats{

    display:flex;

    justify-content:center;

    gap:35px;

    flex-wrap:wrap;

    margin-bottom:50px;

}

.grand-mini-stats div{

    padding:18px 28px;

    border-radius:20px;

    background:

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

    min-width:180px;

}

.grand-mini-stats strong{

    display:block;

    color:#fff;

    font-size:1.7rem;

    margin:10px 0;

}

.grand-mini-stats span{

    color:#cbd5e1;

    font-size:.95rem;

}

/* buttons */

.grand-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.grand-btn-primary,

.grand-btn-outline{

    padding:18px 38px;

    border-radius:60px;

    text-decoration:none;

    font-weight:600;

    transition:.4s;

}

.grand-btn-primary{

    color:#fff;

    background:

    linear-gradient(

    135deg,

    #00BCD4,

    #7ED321);

}

.grand-btn-primary:hover{

    transform:translateY(-6px);

    box-shadow:

    0 20px 40px rgba(0,188,212,.35);

}

.grand-btn-outline{

    color:#fff;

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

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

}

.grand-btn-outline:hover{

    border-color:#00BCD4;

    transform:translateY(-6px);

}

/* responsive */

@media(max-width:768px){

.grand-finale-card{

padding:60px 30px;

}

.grand-buttons{

flex-direction:column;

}

.grand-btn-primary,
.grand-btn-outline{

width:100%;

}

.grand-mini-stats{

gap:15px;

}

}

/* cta section ends here */

/* Activities Page Starts Ends */

/* community and economic development page starts here */

/* community hero section starts here */

/*======================================
 COMMUNITY HERO
======================================*/

.community-hero-section{

    position:relative;

    min-height:80vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    padding:180px 5% 120px;

    background:#050816;

}

/* Background */

.community-hero-bg{

    position:absolute;

    inset:0;

}

.community-hero-bg img{

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:.25;

}

/* Overlay */

.community-hero-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    rgba(5,8,22,.82),

    rgba(5,8,22,.93)

    );

}

/* Glows */

.community-hero-glow{

    position:absolute;

    width:550px;

    height:550px;

    border-radius:50%;

    filter:blur(110px);

    opacity:.18;

}

.glow-left{

    left:-200px;

    top:-180px;

    background:#00BCD4;

}

.glow-right{

    right:-200px;

    bottom:-180px;

    background:#7ED321;

}

/* Floating Particles */

.community-particles span{

    position:absolute;

    width:8px;

    height:8px;

    background:#00BCD4;

    border-radius:50%;

    opacity:.35;

    animation:communityFloat 8s linear infinite;

}

.community-particles span:nth-child(1){

    top:18%;

    left:15%;

}

.community-particles span:nth-child(2){

    top:30%;

    right:18%;

}

.community-particles span:nth-child(3){

    top:60%;

    left:25%;

}

.community-particles span:nth-child(4){

    bottom:22%;

    right:22%;

}

.community-particles span:nth-child(5){

    top:48%;

    left:60%;

}

.community-particles span:nth-child(6){

    bottom:15%;

    left:45%;

}

@keyframes communityFloat{

    50%{

        transform:

        translateY(-25px);

    }

}

/* Content */

.community-hero-content{

    position:relative;

    z-index:5;

    max-width:900px;

    text-align:center;

}

/* Breadcrumb */

.community-breadcrumb{

    display:inline-flex;

    align-items:center;

    gap:14px;

    padding:14px 28px;

    border-radius:50px;

    background:

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

    backdrop-filter:blur(20px);

    border:

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

    margin-bottom:30px;

}

.community-breadcrumb a{

    color:#00BCD4;

    text-decoration:none;

    font-weight:600;

}

.community-breadcrumb span{

    color:#d1d5db;

}

.community-breadcrumb .current-page{

    color:#fff;

}

/* Tag */

.community-tag{

    display:inline-block;

    padding:12px 24px;

    border-radius:30px;

    background:

    rgba(0,188,212,.12);

    color:#00BCD4;

    letter-spacing:1px;

    font-weight:600;

    margin-bottom:25px;

}

/* Heading */

.community-hero-content h1{

    color:#fff;

    font-size:clamp(3rem,6vw,5.5rem);

    line-height:1.1;

    margin-bottom:25px;

}

.community-hero-content h1 span{

    display:block;

    background:

    linear-gradient(

    135deg,

    #00BCD4,

    #7ED321,

    #FFC107

    );

    -webkit-background-clip:text;

    color:transparent;

}

/* Description */

.community-hero-content p{

    max-width:760px;

    margin:auto;

    color:#d1d5db;

    line-height:2;

    font-size:1.1rem;

    margin-bottom:50px;

}

/* Stats */

.community-mini-stats{

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

}

.community-mini-stats div{

    min-width:180px;

    padding:22px;

    border-radius:24px;

    background:

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

    backdrop-filter:blur(18px);

    border:

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

    transition:.4s;

}

.community-mini-stats div:hover{

    transform:translateY(-8px);

    border-color:

    rgba(0,188,212,.4);

}

.community-mini-stats strong{

    display:block;

    color:#fff;

    font-size:2rem;

    margin-bottom:10px;

}

.community-mini-stats span{

    color:#cbd5e1;

}

/* Mobile */

@media(max-width:768px){

    .community-hero-section{

        min-height:70vh;

        padding:150px 5% 80px;

    }

    .community-mini-stats{

        flex-direction:column;

        align-items:center;

    }

    .community-mini-stats div{

        width:100%;

        max-width:320px;

    }

    .community-breadcrumb{

        flex-wrap:wrap;

        justify-content:center;

        gap:8px;

        padding:12px 18px;

    }

}

/* community hero section ends here */

/* community about section starts here */

/*==================================================
        ABOUT THIS INITIATIVE
==================================================*/

.initiative-showcase-section{

    position: relative;

    padding: 130px 5%;

    background: linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%
    );

    overflow: hidden;

}

/*==============================
Background Glow
==============================*/

.initiative-showcase-section::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(0,188,212,.15),
    transparent 70%);

    filter:blur(90px);

}

.initiative-showcase-section::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(126,211,33,.12),
    transparent 70%);

    filter:blur(90px);

}

/*==============================
Heading
==============================*/

.initiative-heading{

    max-width:850px;

    margin:auto;

    text-align:center;

    margin-bottom:70px;

}

.initiative-subtitle{

    display:inline-block;

    color:#00BCD4;

    letter-spacing:2px;

    font-size:.85rem;

    font-weight:600;

    margin-bottom:18px;

}

.initiative-heading h2{

    font-size:3rem;

    color:#fff;

    margin-bottom:25px;

    line-height:1.2;

}

.initiative-heading h2 span{

    color:#00BCD4;

}

.initiative-heading p{

    color:#CBD5E1;

    line-height:1.9;

    font-size:1.05rem;

}

/*==============================
Showcase
==============================*/

.initiative-showcase{

    position:relative;

    display:flex;

    justify-content:center;

    margin-bottom:90px;

}

.initiative-image{

    position:relative;

    width:100%;

    max-width:900px;

    border-radius:30px;

    overflow:hidden;

    box-shadow:

    0 30px 60px rgba(0,0,0,.35);

}

.initiative-image img{

    width:100%;

    height:550px;

    object-fit:cover;

    transition:.7s;

}

.initiative-image:hover img{

    transform:scale(1.08);

}

/* Dark Overlay */

.initiative-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,.05),
        rgba(5,8,22,.45)
    );

    z-index:1;

}

/*==============================
Floating Badges
==============================*/

.initiative-badge{

    position:absolute;

    z-index:5;

    display:flex;

    align-items:center;

    gap:15px;

    padding:15px 22px;

    border-radius:60px;

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

    backdrop-filter:blur(15px);

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

    color:#fff;

    transition:.4s;

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

}

.initiative-badge:hover{

    transform:translateY(-8px);

    border-color:#00BCD4;

    box-shadow:

    0 15px 30px rgba(0,188,212,.18);

}

.initiative-badge i{

    width:48px;

    height:48px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:1.2rem;

}

.initiative-badge h5{

    margin:0;

    font-size:.95rem;

    font-weight:600;

}

/* Badge Positions */

.badge-one{

    top:25px;

    left:25px;

}

.badge-two{

    top:25px;

    right:25px;

}

.badge-three{

    bottom:25px;

    left:25px;

}

.badge-four{

    bottom:25px;

    right:25px;

}

/*==============================
Bottom Grid
==============================*/

.initiative-content-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:start;

}

.initiative-left h3{

    color:#fff;

    font-size:2rem;

    margin-bottom:20px;

}

.initiative-left p{

    color:#CBD5E1;

    line-height:2;

}

/*==============================
Points
==============================*/

.initiative-point{

    display:flex;

    align-items:center;

    gap:18px;

    padding:20px 24px;

    margin-bottom:18px;

    border-radius:18px;

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

    backdrop-filter:blur(15px);

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

    transition:.35s;

}

.initiative-point:hover{

    transform:translateX(10px);

    border-color:#00BCD4;

    box-shadow:

    0 15px 30px rgba(0,188,212,.15);

}

.initiative-point i{

    color:#00BCD4;

    font-size:1.25rem;

}

.initiative-point span{

    color:#fff;

    font-weight:500;

}

/*==============================
Animation
==============================*/

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

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

@media(max-width:992px){

.initiative-content-grid{

grid-template-columns:1fr;

}

.initiative-image img{

height:420px;

}

.initiative-badge{

position:relative;

margin:15px;

top:auto;

left:auto;

right:auto;

bottom:auto;

display:inline-flex;

}

.initiative-image{

padding-bottom:20px;

}

}

@media(max-width:768px){

.initiative-heading h2{

font-size:2.2rem;

}

.initiative-image img{

height:280px;

}

.initiative-badge{

width:calc(100% - 30px);

justify-content:flex-start;

}

.initiative-left h3{

font-size:1.6rem;

}

}

/* community about section ends here */

/* community pillar section starts here */

/*==================================================
        COMMUNITY PILLARS SECTION
==================================================*/

.community-pillars-section{
    position:relative;
    padding:120px 5%;
    background:linear-gradient(180deg,#050816 0%,#08111F 50%,#050816 100%);
    overflow:hidden;
}

.community-pillars-section::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    top:-180px;
    left:-180px;
    background:radial-gradient(circle,rgba(0,188,212,.12),transparent 70%);
    border-radius:50%;
    filter:blur(90px);
}

.community-pillars-section::after{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    right:-180px;
    bottom:-180px;
    background:radial-gradient(circle,rgba(126,211,33,.10),transparent 70%);
    border-radius:50%;
    filter:blur(90px);
}

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

.pillar-feature-image{

    margin:70px auto 80px;

    max-width:950px;

    border-radius:30px;

    overflow:hidden;

    position:relative;

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

}

.pillar-feature-image img{

    width:100%;

    height:500px;

    object-fit:cover;

    transition:.8s;

}

.pillar-feature-image:hover img{

    transform:scale(1.08);

}

.pillar-feature-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
    rgba(0,0,0,.05),
    rgba(5,8,22,.45));

    z-index:1;

}

/*============================
LIST
============================*/

.pillar-list{

    max-width:1000px;

    margin:auto;

}

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

.pillar-item{

    display:flex;

    align-items:center;

    gap:30px;

    padding:32px 35px;

    margin-bottom:25px;

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

    backdrop-filter:blur(20px);

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

    border-radius:24px;

    position:relative;

    overflow:hidden;

    transition:.45s;

}

/* Gradient Top Line */

.pillar-item::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:0;

    height:3px;

    background:linear-gradient(
    90deg,
    #00BCD4,
    #7ED321,
    #FFC107);

    transition:.5s;

}

.pillar-item:hover::before{

    width:100%;

}

.pillar-item:hover{

    transform:translateY(-8px);

    border-color:rgba(0,188,212,.35);

    box-shadow:
    0 20px 45px rgba(0,188,212,.15);

}

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

.pillar-icon{

    width:80px;

    height:80px;

    min-width:80px;

    border-radius:22px;

    background:linear-gradient(
    135deg,
    #00BCD4,
    #7ED321);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:1.8rem;

    transition:.45s;

}

.pillar-item:hover .pillar-icon{

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

}

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

.pillar-content{

    flex:1;

}

.pillar-content span{

    color:#00BCD4;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:2px;

}

.pillar-content h3{

    color:#fff;

    margin:8px 0 12px;

    font-size:1.45rem;

}

.pillar-content p{

    color:#CBD5E1;

    line-height:1.8;

    margin:0;

}

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

.pillar-arrow{

    width:55px;

    height:55px;

    border-radius:50%;

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

    display:flex;

    justify-content:center;

    align-items:center;

    color:#00BCD4;

    transition:.4s;

}

.pillar-item:hover .pillar-arrow{

    background:#00BCD4;

    color:#fff;

    transform:translateX(8px);

}

/*============================
GLASS SHINE
============================*/

.pillar-item::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-60%;

    width:60%;

    height:250%;

    background:linear-gradient(
    transparent,
    rgba(255,255,255,.08),
    transparent);

    transform:rotate(25deg);

    transition:1s;

}

.pillar-item:hover::after{

    left:170%;

}

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

@media(max-width:992px){

.pillar-item{

flex-direction:column;

align-items:flex-start;

text-align:left;

}

.pillar-arrow{

display:none;

}

.pillar-feature-image img{

height:380px;

}

}

@media(max-width:768px){

.community-pillars-section{

padding:90px 5%;

}

.pillar-feature-image{

margin:50px auto;

}

.pillar-feature-image img{

height:250px;

}

.pillar-item{

padding:25px;

}

.pillar-content h3{

font-size:1.2rem;

}

.pillar-icon{

width:65px;

height:65px;

min-width:65px;

font-size:1.4rem;

}

}

/*=========================================
ACTIVE PILLAR
=========================================*/

.pillar-active{

    transform:translateY(-8px);

    border-color:#00BCD4 !important;

    box-shadow:

    0 20px 45px rgba(0,188,212,.25);

}

.pillar-active .pillar-icon{

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

}

.pillar-active .pillar-arrow{

    background:#00BCD4;

    color:#fff;

    transform:translateX(8px);

}

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

.pillar-item,
.pillar-icon,
.pillar-arrow{

    transition:.4s;

}

/* community pillar section ends here */

/* our approach section starts here */

/*==================================================
        HORIZONTAL JOURNEY SECTION
==================================================*/

.horizontal-journey-section{

    position:relative;

    padding:120px 0;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%
    );

    overflow:hidden;

}

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

.horizontal-journey-section::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    left:-220px;

    top:-220px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(0,188,212,.14),
    transparent 70%);

    filter:blur(90px);

}

.horizontal-journey-section::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    right:-220px;

    bottom:-220px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(126,211,33,.10),
    transparent 70%);

    filter:blur(90px);

}

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

.journey-header{

    max-width:850px;

    margin:auto;

    margin-bottom:70px;

    padding:0 20px;

}

.journey-label{

    display:inline-block;

    color:#00BCD4;

    letter-spacing:2px;

    font-size:.85rem;

    font-weight:600;

    margin-bottom:18px;

}

.journey-header h2{

    color:#fff;

    font-size:3rem;

    margin-bottom:22px;

    line-height:1.2;

}

.journey-header h2 span{

    color:#00BCD4;

}

.journey-header p{

    color:#CBD5E1;

    line-height:1.9;

    font-size:1.05rem;

}

/*=================================
PROGRESS BAR
=================================*/

.journey-progress{

    width:90%;

    max-width:1200px;

    height:4px;

    margin:0 auto 45px;

    border-radius:50px;

    overflow:hidden;

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

}

.journey-progress-bar{

    width:100%;

    height:100%;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );

}

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

.journey-slider{

    display:flex;

    gap:60px;

    overflow-x:auto;

    scroll-snap-type:x mandatory;

    scroll-behavior:smooth;

    padding:20px 6vw 40px;

}

/* Hide Scrollbar */

.journey-slider::-webkit-scrollbar{

    display:none;

}

.journey-slider{

    scrollbar-width:none;

}

/*=================================
SLIDE
=================================*/

.journey-slide{

    min-width:88vw;

    max-width:88vw;

    scroll-snap-align:center;

    position:relative;

}

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

.journey-image{

    position:relative;

    border-radius:35px;

    overflow:hidden;

    box-shadow:

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

}

.journey-image img{

    width:100%;

    height:620px;

    object-fit:cover;

    display:block;

}

.journey-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(0,0,0,.05),

        rgba(5,8,22,.55)

    );

    z-index:1;

}

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

.journey-content{

    position:absolute;

    left:70px;

    bottom:60px;

    width:480px;

    padding:40px;

    border-radius:28px;

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

    backdrop-filter:blur(20px);

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

    z-index:5;

}

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

.slide-number{

    position:absolute;

    top:20px;

    right:30px;

    font-size:5rem;

    font-weight:800;

    color:#00BCD4;

    opacity:.08;

    line-height:1;

}

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

.slide-tag{

    display:inline-block;

    padding:10px 18px;

    border-radius:40px;

    background:rgba(0,188,212,.12);

    color:#00BCD4;

    font-size:.82rem;

    font-weight:600;

    letter-spacing:1px;

    margin-bottom:22px;

}

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

.journey-content h3{

    color:#fff;

    font-size:2rem;

    margin-bottom:18px;

    line-height:1.3;

}

.journey-content p{

    color:#CBD5E1;

    line-height:1.9;

    margin:0;

}

/*=================================
SCROLL HINT
=================================*/

.journey-scroll-hint{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-top:25px;

    color:#00BCD4;

    font-size:.9rem;

    letter-spacing:1px;

}

.journey-scroll-hint i{

    font-size:1rem;

}

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

.journey-slide{

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

}

.journey-slide:hover{

    transform:scale(.98);

}

.journey-image{

    transition:.5s;

}

.journey-image img{

    transition:1s ease;

}

.journey-slide:hover .journey-image img{

    transform:scale(1.08);

}

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

.journey-content{

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

}

.journey-content:hover{

    transform:translateY(-10px);

    border-color:rgba(0,188,212,.35);

    box-shadow:

    0 20px 50px rgba(0,188,212,.18);

}

/* Animated Gradient Border */

.journey-content::before{

    content:"";

    position:absolute;

    inset:0;

    padding:2px;

    border-radius:28px;

    background:

    linear-gradient(

        135deg,

        #00BCD4,

        #7ED321,

        #FFC107,

        #00BCD4

    );

    background-size:300%;

    animation:borderMove 8s linear infinite;

    opacity:0;

    transition:.4s;

    -webkit-mask:

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

    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

}

.journey-content:hover::before{

opacity:1;

}

@keyframes borderMove{

0%{

background-position:0%;

}

100%{

background-position:300%;

}

}

/*==========================================
        GLASS SHINE
==========================================*/
/* 
.journey-content::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-70%;

    width:60%;

    height:250%;

    background:

    linear-gradient(

        transparent,

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

        transparent

    );

    transform:rotate(25deg);

    transition:1.2s;

}

.journey-content:hover::after{

left:180%;

} */

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

.journey-image{

    position:relative;

}

.journey-image::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:35px;

    box-shadow:

    inset 0 0 120px rgba(0,188,212,.08);

    pointer-events:none;

}

/*==========================================
        ACTIVE SLIDE
==========================================*/

.journey-slide.active{

    transform:scale(1);

}

.journey-slide:not(.active){

    opacity:2.55;

    transform:scale(.92);

}

/*==========================================
        PROGRESS BAR
==========================================*/

.journey-progress{

    overflow:hidden;

}

.journey-progress-bar{

    transition:width .6s ease;

}

/*==========================================
        SCROLL HINT
==========================================*/

.journey-scroll-hint{

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

}

@keyframes scrollHint{

50%{

transform:translateX(10px);

}

}

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

.horizontal-journey-section::before{

    animation:bgGlowOne 16s ease-in-out infinite;

}

.horizontal-journey-section::after{

    animation:bgGlowTwo 18s ease-in-out infinite;

}

@keyframes bgGlowOne{

50%{

transform:translate(70px,30px);

}

}

@keyframes bgGlowTwo{

50%{

transform:translate(-70px,-30px);

}

}

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

@media(max-width:992px){

.journey-slide{

min-width:95vw;

max-width:95vw;

}

.journey-content{

position:relative;

left:auto;

bottom:auto;

width:100%;

margin-top:-30px;

border-radius:25px;

}

.journey-image img{

height:420px;

}

.journey-slide:not(.active){

opacity:1;

transform:none;

}

}

@media(max-width:768px){

.horizontal-journey-section{

padding:90px 0;

}

.journey-header h2{

font-size:2.2rem;

}

.journey-image img{

height:280px;

}

.journey-content{

padding:25px;

}

.slide-number{

font-size:3rem;

top:15px;

right:20px;

}

.journey-content h3{

font-size:1.4rem;

}

.journey-content p{

font-size:.95rem;

}

.journey-scroll-hint{

display:none;

}

}



/* our approach section ends here */

/* programs section starts here */

/*==================================================
            PROGRAM DIRECTORY SECTION
==================================================*/

.program-directory-section{

    position:relative;

    padding:120px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%
    );

    overflow:hidden;

}

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

.program-directory-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(0,188,212,.12),
    transparent 70%);

    filter:blur(100px);

}

.program-directory-section::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(126,211,33,.10),
    transparent 70%);

    filter:blur(100px);

}

/*=================================
DIRECTORY
=================================*/

.program-directory{

    margin-top:80px;

}

/*=================================
ROW
=================================*/

.program-row{

    display:grid;

    grid-template-columns:140px 1fr 180px;

    align-items:center;

    gap:40px;

    padding:40px;

    margin-bottom:25px;

    position:relative;

    border-radius:28px;

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

    backdrop-filter:blur(20px);

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

    transition:.45s;

}

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

.program-left{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:18px;

}

.program-number{

    font-size:3rem;

    font-weight:800;

    color:#00BCD4;

    opacity:.18;

}

.program-icon{

    width:75px;

    height:75px;

    border-radius:22px;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:1.7rem;

}

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

.program-center h3{

    color:#fff;

    font-size:1.6rem;

    margin-bottom:15px;

}

.program-center p{

    color:#CBD5E1;

    line-height:1.9;

    margin:0;

}

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

.program-right{

    text-align:right;

}

.program-right a{

    color:#00BCD4;

    font-weight:600;

    text-decoration:none;

    display:inline-flex;

    align-items:center;

    gap:12px;

    transition:.35s;

}

.program-right i{

    transition:.35s;

}

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

.program-row:hover{

    transform:translateY(-8px);

    border-color:rgba(0,188,212,.35);

    box-shadow:

    0 25px 60px rgba(0,188,212,.15);

}

/*==========================================
        TOP GRADIENT BORDER
==========================================*/

.program-row::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:0;

    height:3px;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );

    transition:.6s;

}

.program-row:hover::before{

    width:100%;

}

/*==========================================
        ALTERNATE ACCENT BORDER
==========================================*/

.program-row:nth-child(odd){

    border-left:4px solid rgba(0,188,212,.25);

}

.program-row:nth-child(even){

    border-right:4px solid rgba(126,211,33,.25);

}

/*==========================================
        GLASS SHINE
==========================================*/

/* .program-row::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-70%;

    width:60%;

    height:260%;

    background:

    linear-gradient(

        transparent,

        rgba(255,255,255,.08),

        transparent

    );

    transform:rotate(25deg);

    transition:1.2s;

}

.program-row:hover::after{

    left:180%;

} */

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

.program-icon{

    transition:.45s;

}

.program-row:hover .program-icon{

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

    box-shadow:

    0 0 30px rgba(0,188,212,.28);

}

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

.program-number{

    transition:.45s;

}

.program-row:hover .program-number{

    opacity:.35;

    transform:scale(1.08);

}

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

.program-center h3{

    transition:.35s;

}

.program-row:hover .program-center h3{

    color:#00BCD4;

}

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

.program-right a{

    position:relative;

}

.program-right a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    background:#00BCD4;

    transition:.35s;

}

.program-row:hover .program-right a{

    color:#7ED321;

}

.program-row:hover .program-right a::after{

    width:100%;

}

.program-row:hover .program-right i{

    transform:translateX(8px);

}

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

.program-row{

    isolation:isolate;

}

.program-icon::before{

    content:"";

    position:absolute;

    inset:-12px;

    border-radius:25px;

    background:

    radial-gradient(

        circle,

        rgba(0,188,212,.18),

        transparent 70%

    );

    opacity:0;

    transition:.45s;

    z-index:-1;

}

.program-row:hover .program-icon::before{

    opacity:1;

}

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

@media(max-width:991px){

.program-row{

grid-template-columns:1fr;

text-align:center;

gap:25px;

padding:35px;

}

.program-left{

flex-direction:row;

justify-content:center;

}

.program-right{

text-align:center;

}

}

@media(max-width:768px){

.program-directory-section{

padding:90px 5%;

}

.program-row{

padding:28px;

}

.program-number{

font-size:2.5rem;

}

.program-icon{

width:65px;

height:65px;

font-size:1.4rem;

}

.program-center h3{

font-size:1.3rem;

}

.program-center p{

font-size:.95rem;

line-height:1.8;

}

}

/* programs section ends here */

/* faq section starts here */

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

.community-faq-section{

    position: relative;

    padding: 120px 5%;

    background: linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%
    );

    overflow: hidden;

}

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

.community-faq-section::before{

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    top: -180px;

    left: -180px;

    border-radius: 50%;

    background: radial-gradient(circle,
    rgba(0,188,212,.12),
    transparent 70%);

    filter: blur(90px);

}

.community-faq-section::after{

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    right: -180px;

    bottom: -180px;

    border-radius: 50%;

    background: radial-gradient(circle,
    rgba(126,211,33,.10),
    transparent 70%);

    filter: blur(90px);

}

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

.community-faq-wrapper{

    display: grid;

    grid-template-columns: 420px 1fr;

    gap: 60px;

    margin-top: 80px;

    align-items: start;

}

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

.community-faq-info{

    position: sticky;

    top: 120px;

    padding: 40px;

    border-radius: 30px;

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

    backdrop-filter: blur(18px);

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

}

.community-faq-info h3{

    color: #fff;

    font-size: 2rem;

    margin-bottom: 20px;

}

.community-faq-info p{

    color: #CBD5E1;

    line-height: 1.9;

    margin-bottom: 35px;

}

/*====================================
SMALL BOX
====================================*/

.faq-mini-box{

    display: flex;

    gap: 20px;

    align-items: center;

    padding: 25px;

    border-radius: 20px;

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

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

}

.faq-mini-box i{

    width: 65px;

    height: 65px;

    border-radius: 18px;

    background: linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    display: flex;

    justify-content: center;

    align-items: center;

    color: #fff;

    font-size: 1.5rem;

}

.faq-mini-box h4{

    color: #fff;

    margin-bottom: 8px;

}

.faq-mini-box span{

    color: #CBD5E1;

    font-size: .95rem;

}

/*====================================
FAQ LIST
====================================*/

.community-faq-list{

    display: flex;

    flex-direction: column;

    gap: 18px;

}

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

.community-faq-item{

    border-radius: 22px;

    overflow: hidden;

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

    backdrop-filter: blur(18px);

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

    transition: .4s;

}

.community-faq-question{

    width: 100%;

    padding: 28px 35px;

    border: none;

    background: transparent;

    display: flex;

    justify-content: space-between;

    align-items: center;

    cursor: pointer;

    color: #fff;

    font-size: 1.15rem;

    font-weight: 600;

    text-align: left;

}

.community-faq-question i{

    color: #00BCD4;

    font-size: 1rem;

}

/*====================================
ANSWER
====================================*/

.community-faq-answer{

    max-height: 0;

    overflow: hidden;

    transition: max-height .45s ease;

}

.community-faq-answer p{

    padding: 0 35px 30px;

    color: #CBD5E1;

    line-height: 1.9;

    margin: 0;

}

/* Open */
.community-faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .45s ease, opacity .35s ease;

}

.community-faq-item.active .community-faq-answer{

    opacity:1;

}

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

.community-faq-item:hover{

    transform:translateY(-5px);

    border-color:rgba(0,188,212,.30);

    box-shadow:
    0 20px 40px rgba(0,188,212,.12);

}

/*==========================================
LEFT ACCENT LINE
==========================================*/

.community-faq-item::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:4px;

    height:0;

    background:linear-gradient(
        to bottom,
        #00BCD4,
        #7ED321,
        #FFC107
    );

    transition:.4s;

}

.community-faq-item:hover::before,
.community-faq-item.active::before{

    height:100%;

}

/*==========================================
ACTIVE FAQ
==========================================*/

.community-faq-item.active{

    border-color:rgba(0,188,212,.35);

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

    box-shadow:

    0 20px 45px rgba(0,188,212,.15);

}

/*==========================================
QUESTION
==========================================*/

.community-faq-question{

    transition:.35s;

}

.community-faq-item:hover .community-faq-question{

    color:#00BCD4;

}

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

.community-faq-question i{

    transition:.35s ease;

}

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

    transform:rotate(180deg);

    color:#7ED321;

}

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

.community-faq-answer{

    opacity:0;

    transition:
    max-height .45s ease,
    opacity .35s ease;

}

.community-faq-item.active .community-faq-answer{

    opacity:1;

}

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

.community-faq-info{

    transition:.4s;

}

.community-faq-info:hover{

    border-color:rgba(0,188,212,.30);

    box-shadow:

    0 20px 45px rgba(0,188,212,.12);

}

/*==========================================
SMALL BOX
==========================================*/

.faq-mini-box{

    transition:.35s;

}

.faq-mini-box:hover{

    transform:translateY(-6px);

    border-color:rgba(0,188,212,.25);

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

}

.faq-mini-box i{

    transition:.35s;

}

.faq-mini-box:hover i{

    transform:scale(1.08);

}

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

@media(max-width:991px){

.community-faq-wrapper{

grid-template-columns:1fr;

gap:40px;

}

.community-faq-info{

position:relative;

top:0;

}

}

@media(max-width:768px){

.community-faq-section{

padding:90px 5%;

}

.community-faq-info{

padding:30px;

}

.community-faq-info h3{

font-size:1.6rem;

}

.community-faq-question{

padding:22px 25px;

font-size:1rem;

}

.community-faq-answer p{

padding:0 25px 25px;

}

.faq-mini-box{

padding:20px;

}

.faq-mini-box i{

width:55px;

height:55px;

font-size:1.2rem;

}

}

/* faq section ends here */

/* cta section starts here */

/*==================================================
            COMMUNITY CTA
==================================================*/

.community-impact-cta{

    position:relative;

    padding:120px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 100%
    );

    overflow:hidden;

}

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

.impact-cta-wrapper{

    position:relative;

    max-width:1300px;

    margin:auto;

    padding:90px 80px;

    border-radius:35px;

    overflow:hidden;

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

    backdrop-filter:blur(20px);

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

}

/*====================================
ANIMATED BORDER
====================================*/

.impact-cta-wrapper::before{

    content:"";

    position:absolute;

    inset:0;

    padding:2px;

    border-radius:35px;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321,
        #FFC107,
        #00BCD4
    );

    background-size:300%;

    animation:borderAnimation 8s linear infinite;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

}

@keyframes borderAnimation{

    from{

        background-position:0%;

    }

    to{

        background-position:300%;

    }

}

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

.impact-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(100px);

    pointer-events:none;

}

.impact-circle-1{

    width:300px;

    height:300px;

    background:rgba(0,188,212,.18);

    top:-100px;

    left:-80px;

}

.impact-circle-2{

    width:260px;

    height:260px;

    background:rgba(126,211,33,.15);

    bottom:-100px;

    right:-80px;

}

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

.impact-content{

    position:relative;

    text-align:center;

    max-width:850px;

    margin:auto;

    z-index:2;

}

.impact-tag{

    display:inline-block;

    padding:10px 20px;

    border-radius:40px;

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

    color:#00BCD4;

    font-size:.85rem;

    letter-spacing:2px;

    font-weight:600;

    margin-bottom:25px;

}

.impact-content h2{

    color:#fff;

    font-size:3.4rem;

    line-height:1.2;

    margin-bottom:25px;

}

.impact-content h2 span{

    color:#00BCD4;

}

.impact-content p{

    color:#CBD5E1;

    line-height:2;

    font-size:1.08rem;

}

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

.impact-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

    margin-top:55px;

    position:relative;

    z-index:2;

}

.impact-buttons a{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 32px;

    border-radius:60px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

/* Primary */

.impact-btn-primary{

    background:linear-gradient(
        135deg,
        #00BCD4,
        #0097A7
    );

    color:#fff;

}

/* Outline */

.impact-btn-outline{

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

    color:#fff;

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

}

/* Gradient */

.impact-btn-gradient{

    background:linear-gradient(
        135deg,
        #7ED321,
        #00BCD4
    );

    color:#fff;

}

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

.impact-buttons a:hover{

    transform:translateY(-6px);

    box-shadow:

    0 18px 40px rgba(0,188,212,.22);

}

.impact-btn-outline:hover{

    border-color:#00BCD4;

    color:#00BCD4;

}

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

@media(max-width:991px){

.impact-cta-wrapper{

padding:70px 40px;

}

.impact-content h2{

font-size:2.6rem;

}

}

@media(max-width:768px){

.community-impact-cta{

padding:90px 5%;

}

.impact-cta-wrapper{

padding:50px 25px;

}

.impact-content h2{

font-size:2rem;

}

.impact-content p{

font-size:.95rem;

line-height:1.8;

}

.impact-buttons{

flex-direction:column;

}

.impact-buttons a{

width:100%;

justify-content:center;

}

}

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

.impact-active{

    transform:translateY(-6px) scale(1.03);

    box-shadow:

    0 18px 40px rgba(0,188,212,.25);

}

/*=========================================
SMOOTH TRANSITION
=========================================*/

.impact-cta-wrapper{

    transition:background .35s ease;

}

.impact-buttons a{

    transition:

    transform .35s ease,

    box-shadow .35s ease,

    background .35s ease;

}

/* cta section ends here */

/* community and economic development page ends here */


/* Education & Capacity Building Page Starts Here */

/* Hero section starts here */

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

.education-hero-section{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding:140px 5% 100px;

    background:
    linear-gradient(
    135deg,
    #050816 0%,
    #071321 40%,
    #0A1728 70%,
    #050816 100%);

}

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

.education-hero-overlay{

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at top left,
    rgba(0,188,212,.08),
    transparent 40%),

    radial-gradient(circle at bottom right,
    rgba(126,211,33,.08),
    transparent 40%);

    pointer-events:none;

}

/*==================================
BREADCRUMB
==================================*/

.education-breadcrumb{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:60px;

    position:relative;

    z-index:5;

}

.education-breadcrumb a{

    color:#CBD5E1;

    text-decoration:none;

    transition:.35s;

}

.education-breadcrumb a:hover{

    color:#00BCD4;

}

.education-breadcrumb span{

    color:#7ED321;

    font-size:.9rem;

}

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

.education-hero-grid{

    display:grid;

    grid-template-columns:1fr 520px;

    gap:80px;

    align-items:center;

    position:relative;

    z-index:2;

}

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

.education-tag{

    display:inline-block;

    padding:10px 20px;

    border-radius:50px;

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

    color:#00BCD4;

    font-size:.85rem;

    font-weight:600;

    letter-spacing:2px;

    margin-bottom:25px;

}

.education-hero-content h1{

    color:#fff;

    font-size:4.5rem;

    line-height:1.15;

    margin-bottom:25px;

}

.education-hero-content h1 span{

    color:#00BCD4;

}

.education-hero-content p{

    max-width:700px;

    color:#CBD5E1;

    line-height:2;

    font-size:1.08rem;

    margin-bottom:45px;

}

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

.education-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.education-buttons a{

    padding:18px 35px;

    border-radius:60px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.education-btn-primary{

    background:linear-gradient(
    135deg,
    #00BCD4,
    #0097A7);

    color:#fff;

}

.education-btn-outline{

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

    color:#fff;

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

}

.education-buttons a:hover{

    transform:translateY(-5px);

}

/*==================================
RIGHT VISUAL
==================================*/

.education-hero-visual{

    position:relative;

    height:620px;

}

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

.education-main-card{

    position:absolute;

    right:0;

    top:50%;

    transform:translateY(-50%);

    width:430px;

    padding:45px;

    border-radius:35px;

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

    backdrop-filter:blur(18px);

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

}

.edu-card-top{

    display:inline-block;

    padding:8px 18px;

    border-radius:40px;

    background:rgba(126,211,33,.12);

    color:#7ED321;

    margin-bottom:25px;

}

.education-main-card h3{

    color:#fff;

    font-size:2rem;

    margin-bottom:18px;

}

.education-main-card p{

    color:#CBD5E1;

    line-height:1.9;

}

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

.edu-stats{

    display:flex;

    justify-content:space-between;

    margin-top:35px;

    padding-top:30px;

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

}

.edu-stats h4{

    color:#00BCD4;

    font-size:2rem;

    margin-bottom:8px;

}

.edu-stats span{

    color:#CBD5E1;

    font-size:.95rem;

}


/* part-2 */

/*==================================================
        FLOATING EDUCATION ICONS
==================================================*/

.education-shape{

    position:absolute;

    width:70px;

    height:70px;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:1.8rem;

    backdrop-filter:blur(15px);

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

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

    z-index:1;

}

.shape-book{

    top:18%;

    left:8%;

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

}

.shape-cap{

    top:20%;

    right:10%;

    animation:floatTwo 9s ease-in-out infinite;

}

.shape-laptop{

    bottom:18%;

    left:12%;

    animation:floatThree 10s ease-in-out infinite;

}

.shape-light{

    bottom:12%;

    right:15%;

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

}

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

@keyframes floatOne{

    50%{

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

    }

}

@keyframes floatTwo{

    50%{

        transform:
        translateY(15px)
        rotate(-8deg);

    }

}

@keyframes floatThree{

    50%{

        transform:
        translateY(-20px)
        rotate(-6deg);

    }

}

@keyframes floatFour{

    50%{

        transform:
        translateY(18px)
        rotate(6deg);

    }

}

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

.education-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    z-index:0;

}

.education-circle-1{

    width:220px;

    height:220px;

    background:rgba(0,188,212,.20);

    top:40px;

    left:20px;

}

.education-circle-2{

    width:180px;

    height:180px;

    background:rgba(126,211,33,.18);

    bottom:50px;

    right:20px;

}

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

.education-main-card{

    transition:.45s;

}

.education-main-card:hover{

    transform:
    translateY(-50%)
    translateY(-10px);

    border-color:rgba(0,188,212,.35);

    box-shadow:

    0 30px 70px rgba(0,188,212,.18);

}

/*==================================================
        TOP BORDER
==================================================*/

.education-main-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:0;

    height:3px;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );

    transition:.5s;

}

.education-main-card:hover::before{

    width:100%;

}

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

.education-btn-primary:hover{

    box-shadow:

    0 15px 40px rgba(0,188,212,.28);

}

.education-btn-outline:hover{

    background:#00BCD4;

    color:#fff;

    border-color:#00BCD4;

}

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

.edu-stats div{

    transition:.35s;

}

.edu-stats div:hover{

    transform:translateY(-5px);

}

.edu-stats div:hover h4{

    color:#7ED321;

}

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

.education-tag{

    transition:.35s;

}

.education-tag:hover{

    background:#00BCD4;

    color:#fff;

}

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

@media(max-width:1100px){

.education-hero-grid{

grid-template-columns:1fr;

gap:70px;

}

.education-hero-content{

text-align:center;

}

.education-hero-content p{

margin:auto auto 40px;

}

.education-buttons{

justify-content:center;

}

.education-hero-visual{

height:auto;

display:flex;

justify-content:center;

}

.education-main-card{

position:relative;

transform:none;

right:auto;

top:auto;

width:100%;

max-width:500px;

}

.education-main-card:hover{

transform:translateY(-10px);

}

}

@media(max-width:768px){

.education-hero-section{

padding:120px 5% 80px;

min-height:auto;

}

.education-breadcrumb{

flex-wrap:wrap;

margin-bottom:40px;

}

.education-hero-content h1{

font-size:2.8rem;

}

.education-hero-content p{

font-size:.95rem;

line-height:1.8;

}

.education-buttons{

flex-direction:column;

}

.education-buttons a{

width:100%;

text-align:center;

justify-content:center;

}

.education-main-card{

padding:30px;

}

.edu-stats{

flex-direction:column;

gap:25px;

}

.education-shape{

display:none;

}

}

/* Hero section ends here */

/* About section starts here */

/*==================================================
        ABOUT EDUCATION INITIATIVE
==================================================*/

.education-about-section{

    position:relative;

    padding:120px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%);

    overflow:hidden;

}

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

.education-about-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.10),
        transparent 70%);

    filter:blur(90px);

}

.education-about-section::after{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    bottom:-150px;

    right:-150px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%);

    filter:blur(90px);

}

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

.education-about-heading{

    max-width:850px;

    margin:0 auto 70px;

    position:relative;

    z-index:2;

}

.education-section-tag{

    display:inline-block;

    padding:10px 20px;

    border-radius:40px;

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

    color:#00BCD4;

    font-size:.85rem;

    font-weight:600;

    letter-spacing:2px;

    margin-bottom:20px;

}

.education-about-heading h2{

    color:#fff;

    font-size:3.4rem;

    line-height:1.2;

    margin-bottom:25px;

}

.education-about-heading h2 span{

    color:#00BCD4;

}

.education-about-heading p{

    max-width:720px;

    margin:auto;

    color:#CBD5E1;

    line-height:1.9;

    font-size:1.05rem;

}

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

.education-about-image{

    max-width:1200px;

    margin:0 auto 70px;

    border-radius:35px;

    overflow:hidden;

    position:relative;

    box-shadow:

    0 30px 80px rgba(0,0,0,.35);

}

.education-about-image img{

    width:100%;

    height:600px;

    object-fit:cover;

    display:block;

    transition:.8s;

}

.education-about-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(0,0,0,.05),

        rgba(5,8,22,.45)

    );

    z-index:1;

}

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

.education-about-content{

    max-width:900px;

    margin:auto;

    text-align:center;

    position:relative;

    z-index:2;

}

.education-about-content p{

    color:#CBD5E1;

    line-height:2;

    font-size:1.05rem;

    margin-bottom:25px;

}

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

.education-feature-grid{

    margin-top:60px;

    display:grid;

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

    gap:25px;

}

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

.education-feature-item{

    padding:30px 25px;

    border-radius:22px;

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

    backdrop-filter:blur(18px);

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

    text-align:center;

    transition:.4s;

}

.education-feature-icon{

    font-size:2.2rem;

    margin-bottom:18px;

}

.education-feature-item span{

    display:block;

    color:#fff;

    font-size:1rem;

    font-weight:600;

}

/* part-2  */

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

.education-about-image:hover img{

    transform:scale(1.06);

}

.education-about-image{

    transition:.4s;

}

.education-about-image:hover{

    box-shadow:

    0 35px 90px rgba(0,188,212,.18);

}

/*==================================================
        TOP BORDER
==================================================*/

.education-feature-item::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:0;

    height:3px;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );

    transition:.45s;

}

.education-feature-item:hover::before{

    width:100%;

}

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

.education-feature-item{

    position:relative;

    overflow:hidden;

}

.education-feature-item:hover{

    transform:translateY(-8px);

    border-color:rgba(0,188,212,.35);

    box-shadow:

    0 20px 45px rgba(0,188,212,.15);

}

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

.education-feature-icon{

    transition:.35s;

}

.education-feature-item:hover .education-feature-icon{

    transform:scale(1.15);

}

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

.education-feature-item span{

    transition:.35s;

}

.education-feature-item:hover span{

    color:#00BCD4;

}

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

.education-section-tag{

    transition:.35s;

}

.education-section-tag:hover{

    background:#00BCD4;

    color:#fff;

}

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

.education-about-heading h2 span{

    position:relative;

}

.education-about-heading h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    opacity:.35;

}

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

.education-about-content{

    transition:.35s;

}

.education-about-content:hover{

    transform:translateY(-3px);

}

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

@media(max-width:992px){

.education-feature-grid{

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

}

.education-about-image img{

height:450px;

}

}

@media(max-width:768px){

.education-about-section{

padding:90px 5%;

}

.education-about-heading h2{

font-size:2.2rem;

}

.education-about-heading p{

font-size:.95rem;

}

.education-about-image{

margin-bottom:50px;

border-radius:25px;

}

.education-about-image img{

height:260px;

}

.education-about-content p{

font-size:.95rem;

line-height:1.8;

}

.education-feature-grid{

grid-template-columns:1fr;

gap:18px;

}

.education-feature-item{

padding:25px;

}

.education-feature-icon{

font-size:2rem;

}

}

/* About section ends here */

/* Ecosystem section starts here  */

/*==================================================
            EDUCATION ECOSYSTEM
==================================================*/

.education-ecosystem-section{

    position:relative;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%);

    overflow:hidden;

}

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

.education-ecosystem-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    left:-180px;

    top:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.10),
        transparent 70%);

    filter:blur(90px);

}

.education-ecosystem-section::after{

    content:"";

    position:absolute;

    width:400px;

    height:400px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%);

    filter:blur(90px);

}

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

.ecosystem-wrapper{

    position:relative;

    max-width:1000px;

    height:700px;

    margin:90px auto 0;

}

/*====================================
CENTER
====================================*/

.ecosystem-center{

    position:absolute;

    left:50%;

    top:50%;

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

    z-index:10;

}

.ecosystem-core{

    width:190px;

    height:190px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    color:#fff;

    text-align:center;

    box-shadow:

    0 0 40px rgba(0,188,212,.25);

}

.ecosystem-core i{

    font-size:3rem;

    margin-bottom:18px;

}

.ecosystem-core h3{

    font-size:1.5rem;

    margin:0;

}

/*====================================
NODE
====================================*/

.ecosystem-node{

    position:absolute;

    z-index:20;

}

.ecosystem-node button{

    width:170px;

    height:170px;

    border:none;

    border-radius:50%;

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

    backdrop-filter:blur(18px);

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

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:.4s;

}

.ecosystem-node i{

    font-size:2rem;

    color:#00BCD4;

    margin-bottom:15px;

}

.ecosystem-node span{

    color:#fff;

    font-weight:600;

    font-size:1rem;

    text-align:center;

    padding:0 15px;

}

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

.school{

    top:0;

    left:50%;

    transform:translateX(-50%);

}

.skills{

    top:140px;

    left:40px;

}

.technology{

    top:140px;

    right:40px;

}

.leadership{

    bottom:140px;

    left:40px;

}

.employment{

    bottom:140px;

    right:40px;

}

.community{

    bottom:0;

    left:50%;

    transform:translateX(-50%);

}

/*====================================
SVG LINES
====================================*/

.ecosystem-lines{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    pointer-events:none;

}

.ecosystem-lines line{

    stroke:#00BCD4;

    stroke-width:2;

    opacity:.25;

    stroke-linecap:round;

}

/* part-2 */

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

.ecosystem-core{

    position:relative;

    transition:.45s;

}

.ecosystem-core:hover{

    transform:scale(1.06);

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

}

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

.ecosystem-node button{

    position:relative;

    overflow:hidden;

}

.ecosystem-node button:hover{

    transform:translateY(-8px);

    border-color:rgba(0,188,212,.35);

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

    box-shadow:

    0 20px 50px rgba(0,188,212,.15);

}

/*==================================================
        TOP BORDER
==================================================*/

.ecosystem-node button::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:0;

    height:3px;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );

    transition:.45s;

}

.ecosystem-node button:hover::before{

    width:100%;

}

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

.ecosystem-node i{

    transition:.35s;

}

.ecosystem-node button:hover i{

    transform:scale(1.15);

    color:#7ED321;

}

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

.ecosystem-node span{

    transition:.35s;

}

.ecosystem-node button:hover span{

    color:#00BCD4;

}

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

.school{

    animation:floatOne 7s ease-in-out infinite;

}

.skills{

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

}

.technology{

    animation:floatThree 7.5s ease-in-out infinite;

}

.leadership{

    animation:floatFour 8.5s ease-in-out infinite;

}

.employment{

    animation:floatFive 7.8s ease-in-out infinite;

}

.community{

    animation:floatSix 9s ease-in-out infinite;

}

@keyframes floatOne{

    50%{

        transform:
        translateX(-50%)
        translateY(-12px);

    }

}

@keyframes floatTwo{

    50%{

        transform:
        translateY(-10px);

    }

}

@keyframes floatThree{

    50%{

        transform:
        translateY(10px);

    }

}

@keyframes floatFour{

    50%{

        transform:
        translateY(10px);

    }

}

@keyframes floatFive{

    50%{

        transform:
        translateY(-10px);

    }

}

@keyframes floatSix{

    50%{

        transform:
        translateX(-50%)
        translateY(12px);

    }

}

/*==================================================
        SVG LINES
==================================================*/

.ecosystem-lines line{

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

}

@keyframes lineGlow{

    50%{

        opacity:.6;

        stroke:#7ED321;

    }

}

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

@media(max-width:991px){

.ecosystem-wrapper{

height:auto;

display:grid;

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

gap:25px;

}

.ecosystem-center{

position:relative;

left:auto;

top:auto;

transform:none;

grid-column:span 2;

display:flex;

justify-content:center;

margin-bottom:25px;

}

.ecosystem-node{

position:relative;

top:auto;

left:auto;

right:auto;

bottom:auto;

transform:none !important;

display:flex;

justify-content:center;

}

.ecosystem-lines{

display:none;

}

}

@media(max-width:768px){

.education-ecosystem-section{

padding:90px 5%;

}

.ecosystem-wrapper{

grid-template-columns:1fr;

}

.ecosystem-center{

grid-column:span 1;

}

.ecosystem-core{

width:150px;

height:150px;

}

.ecosystem-core i{

font-size:2.2rem;

}

.ecosystem-core h3{

font-size:1.2rem;

}

.ecosystem-node button{

width:140px;

height:140px;

}

.ecosystem-node i{

font-size:1.5rem;

}

.ecosystem-node span{

font-size:.9rem;

}

}

/* Ecosystem section ends here  */

/* Learning Journey Section Starts Here */

/*==================================================
            LEARNING JOURNEY
==================================================*/

.learning-journey-section{

    position:relative;

    padding:120px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%
    );

    overflow:hidden;

}

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

.learning-journey-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    left:-180px;

    top:-180px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(0,188,212,.10),
    transparent 70%);

    filter:blur(100px);

}

.learning-journey-section::after{

    content:"";

    position:absolute;

    width:400px;

    height:400px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(126,211,33,.08),
    transparent 70%);

    filter:blur(100px);

}

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

/* .learning-journey-wrapper{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:25px;

    margin-top:80px;

    overflow-x:auto;

    padding-bottom:20px;

    scrollbar-width:none;

} */

.learning-journey-wrapper{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:25px;

    overflow-x:auto;

    padding:20px 30px;

    scroll-behavior:smooth;

    scrollbar-width:none;

    scroll-padding-left:30px;

}

.learning-journey-wrapper::-webkit-scrollbar{

    display:none;

}

/*====================================
CHAPTER
====================================*/

.journey-chapter{

    flex:0 0 280px;

    min-height:360px;

    padding:40px 30px;

    border-radius:28px;

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

    backdrop-filter:blur(18px);

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

    text-align:center;

    position:relative;

    transition:.4s;

}

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

.chapter-number{

    position:absolute;

    top:18px;

    right:22px;

    font-size:3rem;

    font-weight:800;

    color:#00BCD4;

    opacity:.10;

}

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

.chapter-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:24px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    color:#fff;

    font-size:2rem;

    margin-bottom:30px;

}

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

.journey-chapter h3{

    color:#fff;

    font-size:1.7rem;

    margin-bottom:18px;

}

.journey-chapter p{

    color:#CBD5E1;

    line-height:1.9;

    font-size:.98rem;

}

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

.journey-arrow{

    flex:0 0 60px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#00BCD4;

    font-size:1.8rem;

}

/* Part 2 */

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

.journey-chapter:hover{

    transform:translateY(-10px);

    border-color:rgba(0,188,212,.35);

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

    box-shadow:
    0 25px 60px rgba(0,188,212,.18);

}

/*==================================================
        TOP GRADIENT LINE
==================================================*/

.journey-chapter::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:3px;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );

    transition:.45s;

}

.journey-chapter:hover::before{

    width:100%;

}

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

.chapter-icon{

    transition:.4s;

}

.journey-chapter:hover .chapter-icon{

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

    box-shadow:

    0 0 30px rgba(0,188,212,.28);

}

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

.chapter-number{

    transition:.35s;

}

.journey-chapter:hover .chapter-number{

    opacity:.20;

    transform:scale(1.08);

}

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

.journey-chapter h3{

    transition:.35s;

}

.journey-chapter:hover h3{

    color:#00BCD4;

}

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

.journey-arrow{

    transition:.35s;

}

.learning-journey-wrapper:hover .journey-arrow{

    opacity:.45;

}

.journey-chapter:hover + .journey-arrow{

    opacity:1;

    transform:translateX(8px);

    color:#7ED321;

}

/*==================================================
        FLOAT EFFECT
==================================================*/

.journey-chapter:nth-child(1){

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

}

.journey-chapter:nth-child(3){

    animation:chapterFloat2 9s ease-in-out infinite;

}

.journey-chapter:nth-child(5){

    animation:chapterFloat3 8.5s ease-in-out infinite;

}

.journey-chapter:nth-child(7){

    animation:chapterFloat4 9.5s ease-in-out infinite;

}

.journey-chapter:nth-child(9){

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

}

.journey-chapter:nth-child(11){

    animation:chapterFloat6 10s ease-in-out infinite;

}

@keyframes chapterFloat1{

    50%{

        transform:translateY(-8px);

    }

}

@keyframes chapterFloat2{

    50%{

        transform:translateY(8px);

    }

}

@keyframes chapterFloat3{

    50%{

        transform:translateY(-6px);

    }

}

@keyframes chapterFloat4{

    50%{

        transform:translateY(8px);

    }

}

@keyframes chapterFloat5{

    50%{

        transform:translateY(-7px);

    }

}

@keyframes chapterFloat6{

    50%{

        transform:translateY(7px);

    }

}

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

@media(max-width:992px){

.journey-chapter{

min-width:260px;

}

.journey-arrow{

font-size:1.5rem;

}

}

@media(max-width:768px){

.learning-journey-section{

padding:90px 5%;

}

.learning-journey-wrapper{

justify-content:flex-start;

padding-bottom:15px;

}

.journey-chapter{

min-width:240px;

min-height:320px;

padding:30px 25px;

}

.chapter-icon{

width:75px;

height:75px;

font-size:1.6rem;

}

.chapter-number{

font-size:2.5rem;

}

.journey-chapter h3{

font-size:1.4rem;

}

.journey-chapter p{

font-size:.92rem;

line-height:1.8;

}

.journey-arrow{

display:none;

}

}

/* Learning Journey Section Ends Here */

/* Programs we offer section starts here */

/*==================================================
            PROGRAMS WE OFFER
==================================================*/

.education-programs-section{

    position:relative;

    padding:120px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%);

    overflow:hidden;

}

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

.education-programs-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    left:-180px;

    top:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.10),
        transparent 70%);

    filter:blur(90px);

}

.education-programs-section::after{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    right:-150px;

    bottom:-150px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%);

    filter:blur(90px);

}

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

.program-magazine-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    grid-template-rows:280px 280px 250px;

    gap:25px;

    margin-top:80px;

}

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

.magazine-card{

    position:relative;

    padding:40px;

    border-radius:30px;

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

    backdrop-filter:blur(18px);

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

    overflow:hidden;

    transition:.4s;

}

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

.feature-card{

    grid-row:1 / span 2;

}

.bottom-card{

    grid-column:1 / span 2;

}

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

.program-index{

    position:absolute;

    top:25px;

    right:30px;

    font-size:4rem;

    font-weight:800;

    color:#00BCD4;

    opacity:.08;

}

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

.program-label{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background:rgba(0,188,212,.12);

    color:#00BCD4;

    font-size:.8rem;

    font-weight:600;

    letter-spacing:1px;

    margin-bottom:20px;

}

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

.magazine-card h3{

    color:#fff;

    font-size:2rem;

    line-height:1.3;

    margin-bottom:18px;

}

.magazine-card p{

    color:#CBD5E1;

    line-height:1.9;

    margin-bottom:30px;

}

.magazine-card a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:#00BCD4;

    font-weight:600;

    transition:.35s;

}

.magazine-card a i{

    transition:.35s;

}

/* part 2 */

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

.magazine-card:hover{

    transform:translateY(-10px);

    border-color:rgba(0,188,212,.35);

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

    box-shadow:
    0 25px 60px rgba(0,188,212,.15);

}

/*==================================================
        TOP GRADIENT BORDER
==================================================*/

.magazine-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:3px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );

    transition:.5s;

}

.magazine-card:hover::before{

    width:100%;

}

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

.feature-card{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.feature-card h3{

    font-size:2.8rem;

    max-width:400px;

}

.feature-card p{

    max-width:480px;

}

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

.bottom-card{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.bottom-card h3{

    font-size:2.4rem;

}

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

.program-index{

    transition:.4s;

}

.magazine-card:hover .program-index{

    opacity:.18;

    transform:scale(1.08);

}

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

.program-label{

    transition:.35s;

}

.magazine-card:hover .program-label{

    background:#00BCD4;

    color:#fff;

}

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

.magazine-card h3{

    transition:.35s;

}

.magazine-card:hover h3{

    color:#00BCD4;

}

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

.magazine-card a{

    position:relative;

}

.magazine-card a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    background:#00BCD4;

    transition:.35s;

}

.magazine-card:hover a{

    color:#7ED321;

}

.magazine-card:hover a::after{

    width:100%;

}

.magazine-card:hover a i{

    transform:translateX(8px);

}

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

@media(max-width:992px){

.program-magazine-grid{

grid-template-columns:1fr;

grid-template-rows:auto;

}

.feature-card,
.bottom-card{

grid-column:auto;

grid-row:auto;

}

.magazine-card{

padding:35px;

}

}

@media(max-width:768px){

.education-programs-section{

padding:90px 5%;

}

.program-magazine-grid{

gap:20px;

}

.magazine-card{

padding:28px;

border-radius:24px;

}

.feature-card h3{

font-size:2rem;

}

.bottom-card h3{

font-size:1.8rem;

}

.magazine-card h3{

font-size:1.5rem;

}

.magazine-card p{

font-size:.95rem;

line-height:1.8;

}

.program-index{

font-size:3rem;

}

}

/* Programs we offer section ends here */

/* Learning areas section starts here */

/*==================================================
            LEARNING AREAS
==================================================*/

.learning-areas-section{

    position:relative;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%);

    overflow:hidden;

}

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

.learning-areas-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    left:-180px;

    top:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.10),
        transparent 70%);

    filter:blur(90px);

}

.learning-areas-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%);

    filter:blur(90px);

}

/*====================================
HUB
====================================*/

.learning-hub{

    position:relative;

    width:100%;

    max-width:1100px;

    height:850px;

    margin:80px auto 0;

}

/*====================================
CENTER
====================================*/

.learning-center{

    position:absolute;

    left:50%;

    top:50%;

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

    width:420px;

    text-align:center;

    z-index:20;

}

.learning-center h2{

    color:#fff;

    font-size:3rem;

    margin:20px 0;

    line-height:1.2;

}

.learning-center h2 span{

    color:#00BCD4;

}

.learning-center p{

    color:#CBD5E1;

    line-height:1.9;

}

/*====================================
HEXAGONS
====================================*/

.hexagon{

    position:absolute;

    width:180px;

    height:200px;

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

    backdrop-filter:blur(18px);

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

    clip-path:polygon(
        25% 6%,
        75% 6%,
        100% 50%,
        75% 94%,
        25% 94%,
        0 50%
    );

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:20px;

    transition:.4s;

}

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

.hexagon i{

    font-size:2.2rem;

    color:#00BCD4;

    margin-bottom:18px;

}

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

.hexagon h4{

    color:#fff;

    font-size:1rem;

    line-height:1.5;

    margin:0;

}

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

.hex-1{

    left:50%;

    top:0;

    transform:translateX(-50%);

}

.hex-2{

    right:80px;

    top:180px;

}

.hex-3{

    right:80px;

    bottom:180px;

}

.hex-4{

    left:80px;

    top:180px;

}

.hex-5{

    left:80px;

    bottom:180px;

}

.hex-6{

    left:50%;

    bottom:0;

    transform:translateX(-50%);

}

/* part 2 */

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

.hexagon:hover{

    transform:translateY(-10px);

    border-color:rgba(0,188,212,.35);

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

    box-shadow:
    0 20px 50px rgba(0,188,212,.18);

}

/* Fix transform for top & bottom hexagons */

.hex-1:hover{

    transform:translateX(-50%) translateY(-10px);

}

.hex-6:hover{

    transform:translateX(-50%) translateY(-10px);

}

/*==================================================
        TOP GRADIENT BORDER
==================================================*/

.hexagon::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:3px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321,
        #FFC107
    );

    transition:.45s;

}

.hexagon:hover::before{

    width:100%;

}

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

.hexagon i{

    transition:.35s;

}

.hexagon:hover i{

    transform:scale(1.18) rotate(-8deg);

    color:#7ED321;

}

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

.hexagon h4{

    transition:.35s;

}

.hexagon:hover h4{

    color:#00BCD4;

}

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

.hex-1{

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

}

.hex-2{

    animation:floatRightTop 9s ease-in-out infinite;

}

.hex-3{

    animation:floatRightBottom 8.5s ease-in-out infinite;

}

.hex-4{

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

}

.hex-5{

    animation:floatLeftBottom 9s ease-in-out infinite;

}

.hex-6{

    animation:floatBottom 8.5s ease-in-out infinite;

}

@keyframes floatTop{

    50%{

        transform:
        translateX(-50%)
        translateY(-10px);

    }

}

@keyframes floatBottom{

    50%{

        transform:
        translateX(-50%)
        translateY(10px);

    }

}

@keyframes floatLeftTop{

    50%{

        transform:translateY(-8px);

    }

}

@keyframes floatLeftBottom{

    50%{

        transform:translateY(8px);

    }

}

@keyframes floatRightTop{

    50%{

        transform:translateY(8px);

    }

}

@keyframes floatRightBottom{

    50%{

        transform:translateY(-8px);

    }

}

/*==================================================
        CENTER
==================================================*/

.learning-center{

    transition:.4s;

}

.learning-center:hover{

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

}

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

@media(max-width:991px){

.learning-hub{

height:auto;

display:grid;

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

gap:30px;

}

.learning-center{

position:relative;

left:auto;

top:auto;

transform:none;

width:100%;

grid-column:span 2;

margin-bottom:20px;

}

.hexagon{

position:relative;

left:auto!important;

right:auto!important;

top:auto!important;

bottom:auto!important;

transform:none!important;

margin:auto;

}

.hexagon:hover{

transform:translateY(-8px)!important;

}

}

@media(max-width:768px){

.learning-areas-section{

padding:90px 5%;

}

.learning-hub{

grid-template-columns:1fr;

}

.learning-center{

grid-column:span 1;

}

.learning-center h2{

font-size:2.2rem;

}

.learning-center p{

font-size:.95rem;

}

.hexagon{

width:170px;

height:190px;

}

.hexagon i{

font-size:2rem;

}

.hexagon h4{

font-size:.95rem;

}

}

/* Learning areas section ends here */

/* Metrics Section Starts Here */

/*==================================================
            SUCCESS METRICS
==================================================*/

.success-metrics-section{

    position:relative;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%);

    overflow:hidden;

}

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

.success-metrics-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    left:-180px;

    top:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.10),
        transparent 70%);

    filter:blur(90px);

}

.success-metrics-section::after{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%);

    filter:blur(90px);

}

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

.metrics-wrapper{

    max-width:1100px;

    margin:90px auto 0;

}

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

.metric-item{

    padding:45px 0;

    text-align:center;

    position:relative;

    transition:.35s;

}

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

.metric-number{

    font-size:5rem;

    font-weight:800;

    color:#fff;

    line-height:1;

    letter-spacing:-2px;

    margin-bottom:15px;

}

.metric-number span{

    color:#00BCD4;

}

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

.metric-title{

    color:#CBD5E1;

    font-size:1.15rem;

    letter-spacing:1px;

    text-transform:uppercase;

}

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

.metric-divider{

    width:100%;

    height:1px;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(0,188,212,.45),

        rgba(126,211,33,.45),

        transparent

    );

}

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

.metric-item:hover{

    transform:translateY(-8px);

}

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

.metric-number{

    transition:.4s;

}

.metric-item:hover .metric-number{

    transform:scale(1.06);

}

.metric-item:hover .metric-number span{

    color:#7ED321;

}

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

.metric-title{

    transition:.35s;

}

.metric-item:hover .metric-title{

    color:#fff;

    letter-spacing:2px;

}

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

.metric-divider{

    position:relative;

    overflow:hidden;

}

.metric-divider::before{

    content:"";

    position:absolute;

    left:-35%;

    top:0;

    width:35%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.9),

        transparent

    );

    animation:dividerMove 5s linear infinite;

}

@keyframes dividerMove{

    from{

        left:-35%;

    }

    to{

        left:135%;

    }

}

/*==================================================
        FIRST & LAST ITEM
==================================================*/

.metric-item:first-child{

    padding-top:0;

}

.metric-item:last-child{

    padding-bottom:0;

}

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

.success-metrics-section .section-tag{

    transition:.35s;

}

.success-metrics-section .section-tag:hover{

    background:#00BCD4;

    color:#fff;

}

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

.success-metrics-section h2 span{

    position:relative;

}

.success-metrics-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:20px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

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

@media(max-width:992px){

.metric-number{

font-size:4.2rem;

}

.metric-item{

padding:38px 0;

}

}

@media(max-width:768px){

.success-metrics-section{

padding:90px 5%;

}

.metrics-wrapper{

margin-top:60px;

}

.metric-number{

font-size:3rem;

letter-spacing:-1px;

}

.metric-title{

font-size:.95rem;

line-height:1.7;

}

.metric-item{

padding:30px 0;

}

}

/* Metrics Section Ends Here */

/* Education Matters Section Starts Here */

/*==================================================
        WHY EDUCATION MATTERS
==================================================*/

.education-editorial-section{

    position:relative;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%
    );

    overflow:hidden;

}

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

.education-editorial-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    left:-180px;

    top:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.10),
        transparent 70%
    );

    filter:blur(90px);

}

.education-editorial-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(90px);

}

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

.editorial-wrapper{

    max-width:1100px;

    margin:90px auto 0;

}

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

.editorial-item{

    display:grid;

    grid-template-columns:170px 1fr;

    gap:50px;

    align-items:flex-start;

    padding:55px 0;

    position:relative;

}

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

.editorial-number{

    font-size:5rem;

    font-weight:800;

    line-height:1;

    color:#00BCD4;

    opacity:.12;

    letter-spacing:-3px;

    user-select:none;

}

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

.editorial-content{

    max-width:760px;

}

.editorial-content h3{

    color:#fff;

    font-size:2rem;

    margin-bottom:18px;

    line-height:1.2;

}

.editorial-content p{

    color:#CBD5E1;

    line-height:2;

    font-size:1.05rem;

}

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

.editorial-divider{

    width:100%;

    height:1px;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(0,188,212,.45),

        rgba(126,211,33,.45),

        transparent

    );

}

/* Part 2 */


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

.editorial-item{

    transition:.4s;

}

.editorial-item:hover{

    transform:translateX(12px);

}

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

.editorial-number{

    transition:.4s;

}

.editorial-item:hover .editorial-number{

    color:#7ED321;

    opacity:.28;

    transform:scale(1.08);

}

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

.editorial-content h3{

    transition:.35s;

}

.editorial-item:hover .editorial-content h3{

    color:#00BCD4;

    letter-spacing:.5px;

}

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

.editorial-content p{

    transition:.35s;

}

.editorial-item:hover .editorial-content p{

    color:#E2E8F0;

}

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

.editorial-divider{

    position:relative;

    overflow:hidden;

}

.editorial-divider::before{

    content:"";

    position:absolute;

    top:0;

    left:-30%;

    width:30%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.9),

        transparent

    );

    animation:editorialLine 5s linear infinite;

}

@keyframes editorialLine{

    from{

        left:-30%;

    }

    to{

        left:130%;

    }

}

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

.education-editorial-section .section-tag{

    transition:.35s;

}

.education-editorial-section .section-tag:hover{

    background:#00BCD4;

    color:#fff;

}

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

.education-editorial-section h2 span{

    position:relative;

}

.education-editorial-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:20px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

/*==================================================
        FIRST & LAST ITEM
==================================================*/

.editorial-item:first-child{

    padding-top:0;

}

.editorial-item:last-child{

    padding-bottom:0;

}

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

@media(max-width:992px){

.editorial-item{

grid-template-columns:100px 1fr;

gap:30px;

padding:45px 0;

}

.editorial-number{

font-size:4rem;

}

.editorial-content h3{

font-size:1.8rem;

}

}

@media(max-width:768px){

.education-editorial-section{

padding:90px 5%;

}

.editorial-wrapper{

margin-top:60px;

}

.editorial-item{

grid-template-columns:1fr;

gap:20px;

padding:35px 0;

}

.editorial-number{

font-size:3rem;

opacity:.2;

}

.editorial-item:hover{

transform:none;

}

.editorial-content{

max-width:100%;

}

.editorial-content h3{

font-size:1.5rem;

}

.editorial-content p{

font-size:.95rem;

line-height:1.8;

}

}

/* Education Matters Section Ends Here */

/* FAQ Section Starts Here */

/*==================================================
            EDUCATION FAQ
==================================================*/

.education-faq-section{

    position:relative;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%
    );

    overflow:hidden;

}

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

.education-faq-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.10),
        transparent 70%
    );

    filter:blur(90px);

}

.education-faq-section::after{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(90px);

}

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

.education-faq-wrapper{

    max-width:1000px;

    margin:80px auto 0;

    position:relative;

    z-index:2;

}

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

.education-faq-item{

    position:relative;

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

    transition:.35s;

}

/* Left Accent */

.education-faq-item::before{

    content:"";

    position:absolute;

    left:0;

    top:20px;

    width:3px;

    height:0;

    border-radius:20px;

    background:linear-gradient(
        to bottom,
        #00BCD4,
        #7ED321
    );

    transition:.35s;

}

.education-faq-item.active::before{

    height:calc(100% - 40px);

}

/*====================================
QUESTION
====================================*/

.education-faq-question{

    width:100%;

    background:none;

    border:none;

    outline:none;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:32px 25px;

    cursor:pointer;

    text-align:left;

}

.education-faq-question span{

    color:#fff;

    font-size:1.25rem;

    font-weight:600;

    transition:.35s;

}

.education-faq-question i{

    color:#00BCD4;

    font-size:1rem;

    transition:.35s;

}

/*====================================
ANSWER
====================================*/

.education-faq-answer{

    max-height:0;

    overflow:hidden;

    opacity:0;

    transition:

    max-height .45s ease,

    opacity .35s ease;

}

.education-faq-answer p{

    padding:0 25px 30px;

    color:#CBD5E1;

    line-height:2;

    max-width:820px;

}

/* Part 2 */

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

.education-faq-item:hover{

    padding-left:15px;

}

.education-faq-item:hover .education-faq-question span{

    color:#00BCD4;

}

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

.education-faq-item.active .education-faq-question span{

    color:#00BCD4;

}

.education-faq-item.active::before{

    background:linear-gradient(
        to bottom,
        #00BCD4,
        #7ED321,
        #FFC107
    );

}

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

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

    transform:rotate(180deg);

    color:#7ED321;

}

.education-faq-item:hover .education-faq-question i{

    transform:translateX(-4px);

}

/*==================================================
        ANSWER
==================================================*/

.education-faq-item.active .education-faq-answer{

    opacity:1;

}

.education-faq-answer p{

    transition:.35s;

}

.education-faq-item:hover .education-faq-answer p{

    color:#E2E8F0;

}

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

.education-faq-item{

    overflow:hidden;

}

.education-faq-item::after{

    content:"";

    position:absolute;

    left:-25%;

    bottom:0;

    width:25%;

    height:1px;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.9),

        transparent

    );

    animation:faqDivider 5s linear infinite;

}

@keyframes faqDivider{

    from{

        left:-25%;

    }

    to{

        left:125%;

    }

}

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

.education-faq-section .section-tag{

    transition:.35s;

}

.education-faq-section .section-tag:hover{

    background:#00BCD4;

    color:#fff;

}

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

.education-faq-section h2 span{

    position:relative;

}

.education-faq-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:20px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

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

@media(max-width:768px){

.education-faq-section{

padding:90px 5%;

}

.education-faq-wrapper{

margin-top:60px;

}

.education-faq-question{

padding:24px 15px;

gap:15px;

}

.education-faq-question span{

font-size:1rem;

line-height:1.6;

}

.education-faq-answer p{

padding:0 15px 25px;

font-size:.95rem;

line-height:1.8;

}

.education-faq-item:hover{

padding-left:0;

}

}

/* FAQ Section Ends Here */

/* CTA Section Starts Here */

/*==================================================
        LEARNING PARTNER CTA
==================================================*/

.learning-partner-section{

    position:relative;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%
    );

    overflow:hidden;

}

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

.learning-partner-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    left:-180px;

    top:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.10),
        transparent 70%
    );

    filter:blur(100px);

}

.learning-partner-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(100px);

}

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

.learning-partner-wrapper{

    position:relative;

    display:grid;

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

    gap:70px;

    align-items:center;

    max-width:1300px;

    margin:auto;

    z-index:2;

}

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

.learning-partner-content h2{

    color:#fff;

    font-size:3.5rem;

    line-height:1.2;

    margin:25px 0;

}

.learning-partner-content h2 span{

    color:#00BCD4;

}

.learning-partner-content p{

    max-width:700px;

    color:#CBD5E1;

    font-size:1.08rem;

    line-height:2;

    margin-bottom:45px;

}

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

.learning-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.learning-buttons a{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 34px;

    border-radius:60px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

/* Primary */

.learning-btn-primary{

    background:linear-gradient(
        135deg,
        #00BCD4,
        #0097A7
    );

    color:#fff;

}

/* Outline */

.learning-btn-outline{

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

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

    color:#fff;

}

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

.learning-highlight-card{

    position:relative;

    padding:50px 40px;

    border-radius:30px;

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

    backdrop-filter:blur(18px);

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

    overflow:hidden;

}

.learning-highlight-card span{

    display:inline-block;

    color:#7ED321;

    font-size:.85rem;

    font-weight:600;

    letter-spacing:2px;

    margin-bottom:25px;

}

.learning-highlight-card h3{

    color:#fff;

    font-size:4rem;

    line-height:1;

    margin-bottom:20px;

}

.learning-highlight-card p{

    color:#CBD5E1;

    line-height:1.9;

    margin-bottom:35px;

}

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

.learning-btn-full{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    padding:18px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    background:linear-gradient(
        135deg,
        #7ED321,
        #00BCD4
    );

    color:#fff;

}

/* Part 2 */

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

.learning-partner-content{

    transition:.4s;

}

.learning-partner-content:hover{

    transform:translateY(-5px);

}

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

.learning-highlight-card{

    transition:.45s;

}

.learning-highlight-card:hover{

    transform:translateY(-10px);

    border-color:rgba(0,188,212,.35);

    box-shadow:

    0 30px 70px rgba(0,188,212,.18);

}

/*==================================================
        TOP GRADIENT BORDER
==================================================*/

.learning-highlight-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:3px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321,

        #FFC107

    );

    transition:.5s;

}

.learning-highlight-card:hover::before{

    width:100%;

}

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

.learning-highlight-card h3{

    transition:.35s;

}

.learning-highlight-card:hover h3{

    color:#00BCD4;

    transform:scale(1.05);

}

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

.learning-highlight-card span{

    transition:.35s;

}

.learning-highlight-card:hover span{

    color:#00BCD4;

    letter-spacing:3px;

}

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

.learning-buttons a{

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        background .35s ease,

        color .35s ease;

}

.learning-buttons a:hover{

    transform:translateY(-6px);

}

.learning-btn-primary:hover{

    box-shadow:

        0 18px 40px rgba(0,188,212,.25);

}

.learning-btn-outline:hover{

    background:#00BCD4;

    color:#fff;

    border-color:#00BCD4;

}

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

.learning-btn-full{

    transition:.35s;

}

.learning-btn-full:hover{

    transform:translateY(-5px);

    box-shadow:

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

}

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

.learning-partner-content h2 span{

    position:relative;

}

.learning-partner-content h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:20px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

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

@media(max-width:992px){

.learning-partner-wrapper{

grid-template-columns:1fr;

gap:50px;

}

.learning-partner-content{

text-align:center;

}

.learning-partner-content p{

margin-left:auto;

margin-right:auto;

}

.learning-buttons{

justify-content:center;

}

}

@media(max-width:768px){

.learning-partner-section{

padding:90px 5%;

}

.learning-partner-content h2{

font-size:2.3rem;

}

.learning-partner-content p{

font-size:.95rem;

line-height:1.8;

}

.learning-buttons{

flex-direction:column;

}

.learning-buttons a{

width:100%;

justify-content:center;

}

.learning-highlight-card{

padding:35px 25px;

}

.learning-highlight-card h3{

font-size:3rem;

}

}

/* CTA Section Ends Here */

/* Education & Capacity Building Page Ends Here */


/* Environmental Protection & Sustainability Page Starts Here */

/* Hero section starts here */

/*====================================
BREADCRUMB
====================================*/

.hero-breadcrumb{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top: 1.5rem;

    margin-bottom:60px;

    position:relative;

    z-index:5;

}

.hero-breadcrumb a{

    color:#CBD5E1;

    text-decoration:none;

    transition:.35s;

}

.hero-breadcrumb a:hover{

    color:#00BCD4;

}

.hero-breadcrumb i{

    color:#7ED321;

    font-size:.9rem;

}

.hero-breadcrumb span{

    color:#7ED321;

    font-size:.9rem;

}

/*==================================================
            ENVIRONMENT HERO
==================================================*/

.environment-hero{

    position:relative;

    min-height:100vh;

    padding:120px 5% 80px;

    overflow:hidden;

    display:flex;

    align-items:center;

    background:
    radial-gradient(circle at top left,
    rgba(0,188,212,.08),
    transparent 35%),

    radial-gradient(circle at bottom right,
    rgba(126,211,33,.08),
    transparent 35%),

    linear-gradient(
    180deg,
    #050816 0%,
    #08111F 55%,
    #050816 100%);

}

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

.environment-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);

    background-size:70px 70px;

    mask-image:radial-gradient(circle, black 35%, transparent 90%);

    pointer-events:none;

}

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

.environment-hero-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:90px;

    position:relative;

    z-index:2;

}

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

.environment-left{

    max-width:650px;

}

.hero-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(0,188,212,.12);

    color:#00BCD4;

    font-size:.82rem;

    letter-spacing:2px;

    font-weight:600;

}

.environment-left h1{

    font-size:4.6rem;

    line-height:1.08;

    color:#fff;

    margin:28px 0;

}

.environment-left h1 span{

    color:#00BCD4;

}

.environment-left p{

    color:#CBD5E1;

    font-size:1.08rem;

    line-height:2;

    margin-bottom:45px;

}

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

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.hero-buttons a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 35px;

    border-radius:60px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.hero-btn-primary{

    background:linear-gradient(
    135deg,
    #00BCD4,
    #7ED321);

    color:#fff;

}

.hero-btn-outline{

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

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

    color:#fff;

}

/*====================================
ECOSYSTEM
====================================*/

.ecosystem-circle{

    position:relative;

    width:620px;

    height:620px;

    margin:auto;

}

/*====================================
CENTER
====================================*/

.ecosystem-center{

    position:absolute;

    left:50%;

    top:50%;

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

    width:180px;

    height:180px;

    border-radius:50%;

    background:linear-gradient(
    135deg,
    #00BCD4,
    #7ED321);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    color:#fff;

    text-align:center;

    box-shadow:

    0 0 50px rgba(0,188,212,.20);

    z-index:20;

}

.ecosystem-center i{

    font-size:3rem;

    margin-bottom:14px;

}

.ecosystem-center h3{

    font-size:1.45rem;

}

/*====================================
NODES
====================================*/

.eco-item{

    position:absolute;

    width:130px;

    height:130px;

    border-radius:50%;

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

    backdrop-filter:blur(18px);

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

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    transition:.4s;

    z-index:10;

}

.eco-item i{

    font-size:2rem;

    color:#00BCD4;

    margin-bottom:12px;

}

.eco-item span{

    color:#fff;

    font-size:.9rem;

    font-weight:600;

}

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

.forest{

    left:50%;

    top:0;

    transform:translateX(-50%);

}

.wildlife{

    top:90px;

    right:20px;

}

.energy{

    right:0;

    top:50%;

    transform:translateY(-50%);

}

.recycle{

    left:50%;

    bottom:0;

    transform:translateX(-50%);

}

.water{

    left:0;

    top:50%;

    transform:translateY(-50%);

}

.climate{

    left:20px;

    top:90px;

}

/*====================================
LINES
====================================*/

.eco-lines{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

}

.eco-lines line{

    stroke:#00BCD4;

    stroke-width:2;

    opacity:.22;

}

/* Part 2 */

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

.ecosystem-center{

    transition:.45s;

}

.ecosystem-center:hover{

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

    box-shadow:

        0 0 70px rgba(0,188,212,.35),

        0 0 120px rgba(126,211,33,.15);

}

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

.eco-item:hover{

    border-color:rgba(0,188,212,.35);

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

    box-shadow:

        0 20px 45px rgba(0,188,212,.15);

}

/* Keep original positioning */

.forest:hover{

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

}

.recycle:hover{

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

}

.energy:hover{

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

}

.water:hover{

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

}

.wildlife:hover,
.climate:hover{

    transform:scale(1.08);

}

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

.eco-item i{

    transition:.35s;

}

.eco-item:hover i{

    color:#7ED321;

    transform:scale(1.15) rotate(-8deg);

}

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

.eco-item span{

    transition:.35s;

}

.eco-item:hover span{

    color:#00BCD4;

}

/*==================================================
        FLOATING ANIMATION
==================================================*/
/* 
.forest{

    animation:floatTop 7s ease-in-out infinite;

}

.recycle{

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

}

.water{

    animation:floatLeft 7.5s ease-in-out infinite;

}

.energy{

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

}

.climate{

    animation:floatLeftTop 8.5s ease-in-out infinite;

}

.wildlife{

    animation:floatRightTop 8.5s ease-in-out infinite;

} */

@keyframes floatTop{

    50%{

        transform:
        translateX(-50%)
        translateY(-14px);

    }

}

@keyframes floatBottom{

    50%{

        transform:
        translateX(-50%)
        translateY(14px);

    }

}

@keyframes floatLeft{

    50%{

        transform:translateY(-10px);

    }

}

@keyframes floatRight{

    50%{

        transform:translateY(10px);

    }

}

@keyframes floatLeftTop{

    50%{

        transform:translate(-10px,-12px);

    }

}

@keyframes floatRightTop{

    50%{

        transform:translate(10px,-12px);

    }

}

/*==================================================
        CONNECTION LINES
==================================================*/

.eco-lines line{

    stroke:#00BCD4;

    stroke-width:2;

    stroke-linecap:round;

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

}

@keyframes linePulse{

    0%,100%{

        opacity:.20;

        stroke:#00BCD4;

    }

    50%{

        opacity:.65;

        stroke:#7ED321;

    }

}

/*==================================================
        FLOATING DOTS
==================================================*/

.hero-dot{

    position:absolute;

    width:8px;

    height:8px;

    border-radius:50%;

    background:#00BCD4;

    opacity:.35;

}

.dot1{

    top:18%;

    left:18%;

    animation:dotFloat 8s linear infinite;

}

.dot2{

    top:28%;

    right:22%;

    animation:dotFloat 9s linear infinite;

}

.dot3{

    bottom:24%;

    left:30%;

    animation:dotFloat 10s linear infinite;

}

.dot4{

    bottom:18%;

    right:28%;

    animation:dotFloat 8.5s linear infinite;

}

@keyframes dotFloat{

    0%{

        transform:translateY(0);

        opacity:.2;

    }

    50%{

        transform:translateY(-25px);

        opacity:.8;

    }

    100%{

        transform:translateY(0);

        opacity:.2;

    }

}

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

.hero-buttons a{

    transition:

        transform .35s,

        box-shadow .35s,

        background .35s;

}

.hero-buttons a:hover{

    transform:translateY(-6px);

}

.hero-btn-primary:hover{

    box-shadow:

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

}

.hero-btn-outline:hover{

    background:#00BCD4;

    border-color:#00BCD4;

    color:#fff;

}

/*==================================================
        HERO TAG
==================================================*/

.hero-tag{

    transition:.35s;

}

.hero-tag:hover{

    background:#00BCD4;

    color:#fff;

}

/*==================================================
        SCROLL INDICATOR
==================================================*/

.hero-scroll{

    position:absolute;

    left:50%;

    bottom:30px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

    color:#CBD5E1;

}

.hero-scroll i{

    color:#00BCD4;

    animation:scrollDown 2s infinite;

}

@keyframes scrollDown{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(8px);

    }

}

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

@media(max-width:1100px){

.ecosystem-circle{

width:500px;

height:500px;

}

.eco-item{

width:110px;

height:110px;

}

}

@media(max-width:992px){

.environment-hero-wrapper{

grid-template-columns:1fr;

gap:70px;

text-align:center;

}

.environment-left{

margin:auto;

}

.hero-buttons{

justify-content:center;

}

.ecosystem-circle{

width:420px;

height:420px;

}

.eco-item{

width:95px;

height:95px;

}

.eco-item i{

font-size:1.4rem;

}

.eco-item span{

font-size:.75rem;

}

}

/* @media(max-width:768px){

.environment-hero{

padding:110px 5% 80px;

}

.environment-left h1{

font-size:2.5rem;

}

.environment-left p{

font-size:.95rem;

line-height:1.8;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons a{

width:100%;

}

.ecosystem-circle{

width:320px;

height:320px;

}

.ecosystem-center{

width:120px;

height:120px;

}

.ecosystem-center h3{

font-size:1rem;

}

.ecosystem-center i{

font-size:2rem;

}

.eco-item{

width:80px;

height:80px;

}

.eco-item i{

font-size:1.1rem;

margin-bottom:6px;

}

.eco-item span{

font-size:.68rem;

}

.hero-scroll{

display:none;

}

} */


@media(max-width:768px){

.environment-hero{

    padding:110px 5% 80px;

}

.environment-hero-wrapper{

    grid-template-columns:1fr;

    gap:60px;

    text-align:center;

}

.environment-left{

    margin:auto;

}

.environment-left h1{

    font-size:2.3rem;

}

.environment-left p{

    font-size:.95rem;

    line-height:1.8;

}

.hero-buttons{

    flex-direction:column;

}

.hero-buttons a{

    width:100%;

}

/*==============================
ECOSYSTEM
==============================*/

.ecosystem-circle{

    width:320px;

    height:320px;

    margin:auto;

}

/* Center */

.ecosystem-center{

    width:110px;

    height:110px;

}

.ecosystem-center i{

    font-size:1.7rem;

}

.ecosystem-center h3{

    font-size:.85rem;

}

/* Nodes */

.eco-item{

    width:72px;

    height:72px;

    padding:6px;

}

.eco-item i{

    font-size:1rem;

    margin-bottom:4px;

}

.eco-item span{

    font-size:.58rem;

    line-height:1.2;

}

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

.forest{

    top:-5px;

    left:50%;

    transform:translateX(-50%);

}

.wildlife{

    top:45px;

    right:-5px;

}

.energy{

    right:-8px;

    top:50%;

    transform:translateY(-50%);

}

.recycle{

    bottom:-5px;

    left:50%;

    transform:translateX(-50%);

}

.water{

    left:-8px;

    top:50%;

    transform:translateY(-50%);

}

.climate{

    top:45px;

    left:-5px;

}

.hero-scroll{

    display:none;

}

}


/* Hero section ends here */

/* about section starts here */

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

.environment-about-section{

    position:relative;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%
    );

    overflow:hidden;

}

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

.environment-about-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(90px);

}

.environment-about-section::after{

    content:"";

    position:absolute;

    width:400px;

    height:400px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(90px);

}

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

.environment-about-section .section-heading{

    max-width:850px;

    margin:0 auto 70px;

    position:relative;

    z-index:2;

}

.environment-about-section .section-heading h2{

    color:#fff;

    font-size:3.3rem;

    margin:25px 0;

    line-height:1.2;

}

.environment-about-section .section-heading h2 span{

    color:#00BCD4;

}

.environment-about-section .section-heading p{

    color:#CBD5E1;

    line-height:2;

    font-size:1.05rem;

}

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

.environment-image{

    position:relative;

    max-width:1250px;

    margin:0 auto 80px;

    border-radius:35px;

    overflow:hidden;

    z-index:2;

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

}

.environment-image img{

    width:100%;

    height:520px;

    object-fit:cover;

    display:block;

    transition:.6s;

}

.environment-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        to top,

        rgba(5,8,22,.55),

        rgba(5,8,22,.08)

    );

    z-index:1;

}

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

.environment-values{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:25px;

    max-width:1200px;

    margin:auto;

}

/*====================================
VALUE
====================================*/

.environment-value{

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

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

    border-radius:24px;

    padding:40px 25px;

    text-align:center;

    transition:.35s;

}

.value-icon{

    width:75px;

    height:75px;

    margin:0 auto 25px;

    border-radius:50%;

    background:rgba(0,188,212,.12);

    display:flex;

    align-items:center;

    justify-content:center;

}

.value-icon i{

    color:#00BCD4;

    font-size:2rem;

}

.environment-value h4{

    color:#fff;

    font-size:1.2rem;

    font-weight:600;

}

/* part-2 */

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

.environment-image{

    transition:.45s;

}

.environment-image:hover{

    transform:translateY(-8px);

    box-shadow:

    0 30px 70px rgba(0,188,212,.15);

}

.environment-image:hover img{

    transform:scale(1.06);

}

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

.environment-image::after{

    content:"";

    position:absolute;

    inset:0;

    border:1px solid rgba(0,188,212,.18);

    border-radius:35px;

    opacity:0;

    transition:.4s;

    z-index:2;

}

.environment-image:hover::after{

    opacity:1;

}

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

.environment-value{

    transition:

    transform .35s,

    border-color .35s,

    box-shadow .35s,

    background .35s;

}

.environment-value:hover{

    transform:translateY(-10px);

    border-color:rgba(0,188,212,.30);

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

    box-shadow:

    0 20px 50px rgba(0,188,212,.12);

}

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

.value-icon{

    transition:.35s;

}

.environment-value:hover .value-icon{

    background:rgba(0,188,212,.20);

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

}

.value-icon i{

    transition:.35s;

}

.environment-value:hover .value-icon i{

    color:#7ED321;

    transform:scale(1.15);

}

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

.environment-value h4{

    transition:.35s;

}

.environment-value:hover h4{

    color:#00BCD4;

}

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

.environment-about-section .section-tag{

    transition:.35s;

}

.environment-about-section .section-tag:hover{

    background:#00BCD4;

    color:#fff;

}

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

.environment-about-section h2 span{

    position:relative;

}

.environment-about-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:20px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

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

@media(max-width:992px){

.environment-about-section .section-heading h2{

font-size:2.8rem;

}

.environment-values{

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

gap:20px;

}

.environment-image img{

height:420px;

}

}

@media(max-width:768px){

.environment-about-section{

padding:90px 5%;

}

.environment-about-section .section-heading{

margin-bottom:50px;

}

.environment-about-section .section-heading h2{

font-size:2.2rem;

}

.environment-about-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.environment-image{

margin-bottom:50px;

border-radius:25px;

}

.environment-image img{

height:260px;

}

.environment-values{

grid-template-columns:1fr;

gap:18px;

}

.environment-value{

padding:30px 20px;

}

.value-icon{

width:65px;

height:65px;

margin-bottom:20px;

}

.value-icon i{

font-size:1.6rem;

}

.environment-value h4{

font-size:1.05rem;

}

}

/* about section ends here */

/* sustainability section starts here */

/*==================================================
        SUSTAINABILITY PILLARS
==================================================*/

.sustainability-pillar-section{

    position:relative;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%
    );

    overflow:hidden;

}

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

.sustainability-pillar-section::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    top:-220px;

    left:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(90px);

}

.sustainability-pillar-section::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-200px;

    bottom:-200px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(90px);

}

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

.sustainability-pillar-section .section-heading{

    max-width:850px;

    margin:0 auto;

    position:relative;

    z-index:2;

}

.sustainability-pillar-section .section-heading h2{

    color:#fff;

    font-size:3.3rem;

    line-height:1.2;

    margin:25px 0;

}

.sustainability-pillar-section .section-heading h2 span{

    color:#00BCD4;

}

.sustainability-pillar-section .section-heading p{

    color:#CBD5E1;

    line-height:2;

    font-size:1.05rem;

}

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

.pillar-ecosystem-wrapper{

    position:relative;

    width:700px;

    height:700px;

    margin:90px auto 0;

    z-index:2;

}

/*====================================
CENTER CORE
====================================*/

.pillar-core{

    position:absolute;

    left:50%;

    top:50%;

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

    width:190px;

    height:190px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:#fff;

    z-index:20;

    box-shadow:

        0 0 50px rgba(0,188,212,.18);

}

.pillar-core i{

    font-size:3rem;

    margin-bottom:16px;

}

.pillar-core h3{

    font-size:1.4rem;

    font-weight:700;

}

/*====================================
PILLAR ORBITS
====================================*/

.pillar-orbit{

    position:absolute;

    width:145px;

    height:145px;

    border-radius:50%;

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

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

    backdrop-filter:blur(18px);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    transition:.4s;

    z-index:10;

}

.pillar-orbit i{

    color:#00BCD4;

    font-size:2rem;

    margin-bottom:14px;

}

.pillar-orbit span{

    color:#fff;

    font-size:.92rem;

    font-weight:600;

    line-height:1.5;

}

/*====================================
NODE POSITIONS
====================================*/

.pillar-biodiversity{

    left:50%;

    top:0;

    transform:translateX(-50%)!important;

}

.pillar-renewable{

    top:100px;

    right:0;

}

.pillar-waste{

    right:0;

    bottom:100px;

}

.pillar-future{

    left:50%;

    bottom:0;

    transform:translateX(-50%)!important;

}

.pillar-climate{

    left:0;

    bottom:100px;

}

.pillar-water{

    left:0;

    top:100px;

}

/*====================================
SVG CONNECTIONS
====================================*/

.pillar-connection-svg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    z-index:1;

}

.pillar-connection-svg line{

    stroke:#00BCD4;

    stroke-width:2;

    stroke-linecap:round;

    opacity:.22;

}

/* Part - 2 */

/*==================================================
        CENTER CORE
==================================================*/

.pillar-core{

    transition:.45s;

    animation:pillarCoreFloat 6s ease-in-out infinite;

}

@keyframes pillarCoreFloat{

    0%,100%{

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

    }

    50%{

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

    }

}

.pillar-core:hover{

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

    box-shadow:

        0 0 70px rgba(0,188,212,.35),

        0 0 120px rgba(126,211,33,.15);

}

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

.pillar-orbit{

    transition:

        transform .35s ease,

        border-color .35s ease,

        background .35s ease,

        box-shadow .35s ease;

}

.pillar-orbit:hover{

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

    border-color:rgba(0,188,212,.30);

    box-shadow:

        0 20px 50px rgba(0,188,212,.15);

}

/* Preserve Position */

.pillar-biodiversity:hover{

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

}

.pillar-future:hover{

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

}

.pillar-renewable:hover,
.pillar-waste:hover,
.pillar-climate:hover,
.pillar-water:hover{

    transform:scale(1.08);

}

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

.pillar-orbit i{

    transition:.35s;

}

.pillar-orbit:hover i{

    color:#7ED321;

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

}

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

.pillar-orbit span{

    transition:.35s;

}

.pillar-orbit:hover span{

    color:#00BCD4;

}

/*==================================================
        FLOATING MOTION
==================================================*/
/* 
.pillar-biodiversity{

    animation:pillarFloatTop 7s ease-in-out infinite;

}

.pillar-renewable{

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

}

.pillar-waste{

    animation:pillarFloatRightBottom 8.5s ease-in-out infinite;

}

.pillar-future{

    animation:pillarFloatBottom 7.5s ease-in-out infinite;

}

.pillar-climate{

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

}

.pillar-water{

    animation:pillarFloatLeftTop 8.5s ease-in-out infinite;

} */

@keyframes pillarFloatTop{

    50%{

        transform:
        translateX(-50%)
        translateY(-14px);

    }

}

@keyframes pillarFloatBottom{

    50%{

        transform:
        translateX(-50%)
        translateY(14px);

    }

}

@keyframes pillarFloatRightTop{

    50%{

        transform:
        translate(10px,-10px);

    }

}

@keyframes pillarFloatRightBottom{

    50%{

        transform:
        translate(10px,10px);

    }

}

@keyframes pillarFloatLeftBottom{

    50%{

        transform:
        translate(-10px,10px);

    }

}

@keyframes pillarFloatLeftTop{

    50%{

        transform:
        translate(-10px,-10px);

    }

}

/*==================================================
        CONNECTION LINES
==================================================*/

.pillar-connection-svg line{

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

}

@keyframes pillarLineGlow{

    0%,100%{

        opacity:.20;

        stroke:#00BCD4;

    }

    50%{

        opacity:.65;

        stroke:#7ED321;

    }

}

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

.sustainability-pillar-section h2 span{

    position:relative;

}

.sustainability-pillar-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:30px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

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

.sustainability-pillar-section .section-tag{

    transition:.35s;

}

.sustainability-pillar-section .section-tag:hover{

    background:#00BCD4;

    color:#fff;

}

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

@media(max-width:992px){

.pillar-ecosystem-wrapper{

width:520px;

height:520px;

margin-top:70px;

}

.pillar-core{

width:150px;

height:150px;

}

.pillar-core i{

font-size:2.4rem;

}

.pillar-core h3{

font-size:1.1rem;

}

.pillar-orbit{

width:110px;

height:110px;

}

.pillar-orbit i{

font-size:1.5rem;

}

.pillar-orbit span{

font-size:.75rem;

line-height:1.4;

}

.pillar-renewable,
.pillar-water{

top:70px;

}

.pillar-waste,
.pillar-climate{

bottom:70px;

}

}

@media(max-width:768px){

.sustainability-pillar-section{

padding:90px 5%;

}

.pillar-ecosystem-wrapper{

width:340px;

height:340px;

margin-top:60px;

}

.pillar-core{

width:105px;

height:105px;

}

.pillar-core i{

font-size:1.5rem;

margin-bottom:8px;

}

.pillar-core h3{

font-size:.82rem;

}

.pillar-orbit{

width:75px;

height:75px;

}

.pillar-orbit i{

font-size:1rem;

margin-bottom:5px;

}

.pillar-orbit span{

font-size:.58rem;

line-height:1.3;

}

.pillar-renewable,
.pillar-water{

top:45px;

}

.pillar-waste,
.pillar-climate{

bottom:45px;

}

}

/* sustainability section ends here */

/* environment section starts here */

/*==================================================
        ENVIRONMENTAL STRATEGY
==================================================*/

.environment-strategy-section{

    position:relative;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%
    );

    overflow:hidden;

}

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

.environment-strategy-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    left:-180px;

    top:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(90px);

}

.environment-strategy-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(90px);

}

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

.environment-strategy-section .section-heading{

    max-width:850px;

    margin:0 auto 100px;

    position:relative;

    z-index:2;

}

.environment-strategy-section .section-heading h2{

    color:#fff;

    font-size:3.3rem;

    margin:25px 0;

    line-height:1.2;

}

.environment-strategy-section .section-heading h2 span{

    color:#00BCD4;

}

.environment-strategy-section .section-heading p{

    color:#CBD5E1;

    line-height:2;

    font-size:1.05rem;

}

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

.tree-growth-wrapper{

    position:relative;

    max-width:1100px;

    margin:auto;

    padding:20px 0;

    z-index:2;

}

/*====================================
TREE TRUNK
====================================*/

.tree-trunk{

    position:absolute;

    left:50%;

    top:0;

    bottom:0;

    width:8px;

    transform:translateX(-50%);

    border-radius:20px;

    background:linear-gradient(

        to bottom,

        #7ED321,

        #00BCD4,

        #7ED321

    );

    opacity:.8;

}

/*====================================
TREE STAGE
====================================*/

.tree-stage{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:90px;

}

/*====================================
LEFT / RIGHT
====================================*/

.stage-seed,
.stage-growth,
.stage-forest{

    padding-right:50%;

}

.stage-roots,
.stage-branches{

    padding-left:50%;

}

.stage-future{

    justify-content:center;

    margin-bottom:0;

}

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

.tree-icon{

    width:90px;

    height:90px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:2rem;

    box-shadow:

        0 0 35px rgba(0,188,212,.18);

    z-index:5;

}

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

.tree-content{

    width:42%;

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

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

    border-radius:24px;

    padding:30px;

    backdrop-filter:blur(18px);

}

.tree-content h4{

    color:#fff;

    font-size:1.5rem;

    margin-bottom:15px;

}

.tree-content p{

    color:#CBD5E1;

    line-height:1.9;

}

/*====================================
ALIGNMENT
====================================*/

.stage-seed .tree-content,
.stage-growth .tree-content,
.stage-forest .tree-content{

    margin-right:40px;

    text-align:right;

}

.stage-roots .tree-content,
.stage-branches .tree-content{

    margin-left:40px;

    text-align:left;

}

/*====================================
FUTURE
====================================*/

.future-circle{

    width:220px;

    height:220px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:#fff;

    box-shadow:

        0 0 50px rgba(0,188,212,.25);

}

.future-circle i{

    font-size:3.2rem;

    margin-bottom:18px;

}

.future-circle h3{

    font-size:1.6rem;

    line-height:1.3;

}

/* part-2 */

/*==================================================
        TREE TRUNK
==================================================*/

.tree-trunk{

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

}

@keyframes treeTrunkGlow{

    0%,100%{

        box-shadow:

        0 0 0 rgba(0,188,212,0);

        opacity:.75;

    }

    50%{

        box-shadow:

        0 0 20px rgba(0,188,212,.35),

        0 0 45px rgba(126,211,33,.15);

        opacity:1;

    }

}

/*==================================================
        TREE STAGES
==================================================*/

.tree-content{

    transition:

        transform .35s ease,

        border-color .35s ease,

        background .35s ease,

        box-shadow .35s ease;

}

.tree-content:hover{

    transform:translateY(-8px);

    border-color:rgba(0,188,212,.25);

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

    box-shadow:

    0 18px 45px rgba(0,188,212,.12);

}

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

.tree-icon{

    transition:.4s;

}

.tree-stage:hover .tree-icon{

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

    box-shadow:

    0 0 35px rgba(0,188,212,.30);

}

.tree-stage:hover .tree-icon i{

    color:#fff;

}

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

.tree-content h4{

    transition:.35s;

}

.tree-stage:hover h4{

    color:#00BCD4;

}

.tree-content p{

    transition:.35s;

}

.tree-stage:hover p{

    color:#E2E8F0;

}

/*==================================================
        FUTURE CIRCLE
==================================================*/

.future-circle{

    transition:.45s;

    animation:futurePulse 6s ease-in-out infinite;

}

@keyframes futurePulse{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

}

.future-circle:hover{

    transform:scale(1.08);

    box-shadow:

    0 0 70px rgba(0,188,212,.35),

    0 0 120px rgba(126,211,33,.18);

}

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

.environment-strategy-section h2 span{

    position:relative;

}

.environment-strategy-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:30px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

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

.environment-strategy-section .section-tag{

    transition:.35s;

}

.environment-strategy-section .section-tag:hover{

    background:#00BCD4;

    color:#fff;

}

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

@media(max-width:992px){

.tree-growth-wrapper{

padding-left:40px;

}

.tree-trunk{

left:30px;

transform:none;

}

.tree-stage{

padding:0 !important;

margin-bottom:60px;

justify-content:flex-start;

gap:25px;

}

.stage-roots,
.stage-branches{

flex-direction:row-reverse;

justify-content:flex-start;

}

.tree-content{

width:100%;

margin:0 !important;

text-align:left !important;

}

.tree-icon{

width:75px;

height:75px;

font-size:1.6rem;

flex-shrink:0;

}

.future-circle{

width:180px;

height:180px;

margin-left:0;

}

}

@media(max-width:768px){

.environment-strategy-section{

padding:90px 5%;

}

.environment-strategy-section .section-heading{

margin-bottom:70px;

}

.environment-strategy-section .section-heading h2{

font-size:2.3rem;

}

.environment-strategy-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.tree-growth-wrapper{

padding-left:28px;

}

.tree-trunk{

left:18px;

width:5px;

}

.tree-stage{

gap:18px;

margin-bottom:45px;

}

.tree-icon{

width:60px;

height:60px;

font-size:1.2rem;

}

.tree-content{

padding:20px;

border-radius:18px;

}

.tree-content h4{

font-size:1.1rem;

margin-bottom:10px;

}

.tree-content p{

font-size:.9rem;

line-height:1.7;

}

.future-circle{

width:140px;

height:140px;

}

.future-circle i{

font-size:2rem;

margin-bottom:10px;

}

.future-circle h3{

font-size:1rem;

}

}

/* environment section ends here */

/* initiatives section starts here */

/*==================================================
        ENVIRONMENT INITIATIVES
==================================================*/

.environment-initiatives-section{

    position:relative;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%
    );

    overflow:hidden;

}

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

.environment-initiatives-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(90px);

}

.environment-initiatives-section::after{

    content:"";

    position:absolute;

    width:400px;

    height:400px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(90px);

}

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

.environment-initiatives-section .section-heading{

    max-width:850px;

    margin:0 auto 80px;

    position:relative;

    z-index:2;

}

.environment-initiatives-section .section-heading h2{

    color:#fff;

    font-size:3.3rem;

    line-height:1.2;

    margin:25px 0;

}

.environment-initiatives-section .section-heading h2 span{

    color:#00BCD4;

}

.environment-initiatives-section .section-heading p{

    color:#CBD5E1;

    line-height:2;

    font-size:1.05rem;

}

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

.initiative-masonry{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:2fr 1fr;

    grid-template-areas:

    "tree waste"

    "tree climate"

    "energy energy"

    "water water";

    gap:25px;

}

/*====================================
BLOCKS
====================================*/

.initiative-block{

    position:relative;

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

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

    backdrop-filter:blur(18px);

    border-radius:28px;

    padding:45px;

    overflow:hidden;

    transition:.4s;

}

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

.block-tree{

    grid-area:tree;

    min-height:520px;

}

.block-waste{

    grid-area:waste;

    min-height:245px;

}

.block-climate{

    grid-area:climate;

    min-height:245px;

}

.block-energy{

    grid-area:energy;

    min-height:260px;

}

.block-water{

    grid-area:water;

    min-height:180px;

}

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

.initiative-number{

    display:inline-block;

    font-size:3.5rem;

    font-weight:800;

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

    line-height:1;

    margin-bottom:30px;

}

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

.initiative-block h3{

    color:#fff;

    font-size:2rem;

    line-height:1.3;

    margin-bottom:20px;

}

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

.initiative-block p{

    max-width:520px;

    color:#CBD5E1;

    line-height:2;

    font-size:1rem;

}

/*====================================
ACCENT LINE
====================================*/

.initiative-block::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:6px;

    height:100%;

    background:linear-gradient(

        180deg,

        #00BCD4,

        #7ED321

    );

    border-radius:10px;

}

/* part-2 */

/*==================================================
        INITIATIVE BLOCK HOVER
==================================================*/

.initiative-block{

    transition:

        transform .4s ease,

        border-color .4s ease,

        box-shadow .4s ease,

        background .4s ease;

}

.initiative-block:hover{

    transform:translateY(-10px);

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

    border-color:rgba(0,188,212,.25);

    box-shadow:

    0 25px 60px rgba(0,188,212,.12);

}

/*====================================
ACCENT LINE
====================================*/

.initiative-block::before{

    transition:.45s;

}

.initiative-block:hover::before{

    width:10px;

}

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

.initiative-number{

    transition:.35s;

}

.initiative-block:hover .initiative-number{

    color:rgba(0,188,212,.25);

    transform:translateX(6px);

}

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

.initiative-block h3{

    transition:.35s;

}

.initiative-block:hover h3{

    color:#00BCD4;

}

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

.initiative-block p{

    transition:.35s;

}

.initiative-block:hover p{

    color:#E2E8F0;

}

/*====================================
TOP RIGHT GLOW
====================================*/

.initiative-block::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    right:-70px;

    top:-70px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,188,212,.12),

        transparent 70%

    );

    opacity:0;

    transition:.45s;

}

.initiative-block:hover::after{

    opacity:1;

}

/*====================================
TREE FEATURE
====================================*/

.block-tree h3{

    font-size:2.4rem;

}

.block-tree p{

    font-size:1.05rem;

    max-width:480px;

}

/*====================================
ENERGY FEATURE
====================================*/

.block-energy{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.block-energy h3{

    font-size:2.3rem;

}

/*====================================
WATER FEATURE
====================================*/

.block-water{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

}

.block-water p{

    max-width:500px;

}

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

.environment-initiatives-section .section-tag{

    transition:.35s;

}

.environment-initiatives-section .section-tag:hover{

    background:#00BCD4;

    color:#fff;

}

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

.environment-initiatives-section h2 span{

    position:relative;

}

.environment-initiatives-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:30px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

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

@media(max-width:992px){

.initiative-masonry{

grid-template-columns:1fr;

grid-template-areas:

"tree"

"waste"

"climate"

"energy"

"water";

}

.block-tree,
.block-waste,
.block-climate,
.block-energy,
.block-water{

min-height:auto;

}

.block-water{

display:block;

}

.block-tree h3,
.block-energy h3{

font-size:2rem;

}

}

@media(max-width:768px){

.environment-initiatives-section{

padding:90px 5%;

}

.environment-initiatives-section .section-heading{

margin-bottom:60px;

}

.environment-initiatives-section .section-heading h2{

font-size:2.3rem;

}

.environment-initiatives-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.initiative-masonry{

gap:18px;

}

.initiative-block{

padding:28px 24px;

border-radius:20px;

}

.initiative-number{

font-size:2.6rem;

margin-bottom:18px;

}

.initiative-block h3{

font-size:1.5rem !important;

margin-bottom:14px;

}

.initiative-block p{

font-size:.92rem;

line-height:1.8;

}

}

/* initiatives section ends here */

/* protecttion section starts here */

/*==================================================
        AREAS WE PROTECT
==================================================*/

.protection-bubble-section{

    position:relative;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%
    );

    overflow:hidden;

}

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

.protection-bubble-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    left:-180px;

    top:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(90px);

}

.protection-bubble-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(90px);

}

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

.protection-bubble-section .section-heading{

    max-width:850px;

    margin:0 auto 90px;

    position:relative;

    z-index:2;

}

.protection-bubble-section .section-heading h2{

    color:#fff;

    font-size:3.3rem;

    line-height:1.2;

    margin:25px 0;

}

.protection-bubble-section .section-heading h2 span{

    color:#00BCD4;

}

.protection-bubble-section .section-heading p{

    color:#CBD5E1;

    line-height:2;

    font-size:1.05rem;

}

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

.bubble-layout{

    position:relative;

    width:900px;

    height:720px;

    margin:auto;

    z-index:2;

}

/*====================================
COMMON BUBBLE
====================================*/

.nature-bubble{

    position:absolute;

    border-radius:50%;

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

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

    backdrop-filter:blur(20px);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:#fff;

    transition:.4s;

}

.nature-bubble i{

    color:#00BCD4;

    margin-bottom:12px;

}

/*====================================
CENTER BUBBLE
====================================*/

.bubble-center{

    width:240px;

    height:240px;

    left:50%;

    top:50%;

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

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    box-shadow:

    0 0 45px rgba(0,188,212,.18);

    z-index:5;

}

.bubble-center i{

    color:#fff;

    font-size:3rem;

}

.bubble-center h3{

    font-size:1.5rem;

}

/*====================================
FOREST
====================================*/

.bubble-forest{

    width:170px;

    height:170px;

    left:50%;

    top:0;

    transform:translateX(-50%)!important;

}

.bubble-forest i{

    font-size:2rem;

}

/*====================================
WILDLIFE
====================================*/

.bubble-wildlife{

    width:150px;

    height:150px;

    left:80px;

    top:170px;

}

.bubble-wildlife i{

    font-size:1.9rem;

}

/*====================================
RIVERS
====================================*/

.bubble-rivers{

    width:150px;

    height:150px;

    right:80px;

    top:170px;

}

.bubble-rivers i{

    font-size:1.9rem;

}

/*====================================
AIR
====================================*/

.bubble-air{

    width:165px;

    height:165px;

    left:110px;

    bottom:120px;

}

.bubble-air i{

    font-size:2rem;

}

/*====================================
AGRICULTURE
====================================*/

.bubble-farm{

    width:170px;

    height:170px;

    right:100px;

    bottom:120px;

}

.bubble-farm i{

    font-size:2rem;

}

/*====================================
OCEANS
====================================*/

.bubble-ocean{

    width:180px;

    height:180px;

    left:50%;

    bottom:0;

    transform:translateX(-50%)!important;

}

.bubble-ocean i{

    font-size:2.1rem;

}

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

.nature-bubble span{

    font-size:1rem;

    font-weight:600;

    line-height:1.5;

}

/* part 2 */

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

.nature-bubble{

    transition:

    transform .4s ease,

    background .4s ease,

    border-color .4s ease,

    box-shadow .4s ease;

}

.nature-bubble:hover{

    transform:scale(1.08);

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

    border-color:rgba(0,188,212,.25);

    box-shadow:

    0 20px 55px rgba(0,188,212,.15);

}

/* Keep translated bubbles centered */

.bubble-center:hover{

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

}

.bubble-forest:hover{

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

}

.bubble-ocean:hover{

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

}

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

.nature-bubble i{

    transition:.35s;

}

.nature-bubble:hover i{

    color:#7ED321;

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

}

.bubble-center:hover i{

    color:#fff;

}

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

.nature-bubble span,

.bubble-center h3{

    transition:.35s;

}

.nature-bubble:hover span{

    color:#00BCD4;

}

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

.bubble-center{

    animation:centerFloat 6s ease-in-out infinite;

}
/* 
.bubble-forest{

    animation:bubbleFloat1 7s ease-in-out infinite;

}

.bubble-wildlife{

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

}

.bubble-rivers{

    animation:bubbleFloat3 8.5s ease-in-out infinite;

}

.bubble-air{

    animation:bubbleFloat4 7.5s ease-in-out infinite;

}

.bubble-farm{

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

}

.bubble-ocean{

    animation:bubbleFloat6 7s ease-in-out infinite;

} */

@keyframes centerFloat{

    0%,100%{

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

    }

    50%{

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

    }

}

@keyframes bubbleFloat1{

    50%{

        transform:translateX(-50%) translateY(-14px);

    }

}

@keyframes bubbleFloat2{

    50%{

        transform:translate(-10px,-12px);

    }

}

@keyframes bubbleFloat3{

    50%{

        transform:translate(10px,-12px);

    }

}

@keyframes bubbleFloat4{

    50%{

        transform:translate(-10px,10px);

    }

}

@keyframes bubbleFloat5{

    50%{

        transform:translate(10px,10px);

    }

}

@keyframes bubbleFloat6{

    50%{

        transform:translateX(-50%) translateY(12px);

    }

}

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

.bubble-center{

    box-shadow:

    0 0 45px rgba(0,188,212,.18);

}

.bubble-center::before{

    content:"";

    position:absolute;

    inset:-12px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:glowRing 5s linear infinite;

}

@keyframes glowRing{

    0%{

        transform:scale(.95);

        opacity:.7;

    }

    100%{

        transform:scale(1.12);

        opacity:0;

    }

}

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

.protection-bubble-section h2 span{

    position:relative;

}

.protection-bubble-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:20px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

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

.protection-bubble-section .section-tag{

    transition:.35s;

}

.protection-bubble-section .section-tag:hover{

    background:#00BCD4;

    color:#fff;

}

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

@media(max-width:992px){

.bubble-layout{

width:560px;

height:560px;

}

.bubble-center{

width:180px;

height:180px;

}

.bubble-center i{

font-size:2.4rem;

}

.bubble-center h3{

font-size:1.2rem;

}

.bubble-forest,
.bubble-ocean{

width:140px;

height:140px;

}

.bubble-wildlife,
.bubble-rivers,
.bubble-air,
.bubble-farm{

width:120px;

height:120px;

}

.bubble-wildlife{

left:20px;

}

.bubble-rivers{

right:20px;

}

.bubble-air{

left:40px;

}

.bubble-farm{

right:40px;

}

}

@media(max-width:768px){

.protection-bubble-section{

padding:90px 5%;

}

.protection-bubble-section .section-heading{

margin-bottom:60px;

}

.protection-bubble-section .section-heading h2{

font-size:2.3rem;

}

.protection-bubble-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

/* Mobile Stack */

.bubble-layout{

width:100%;

height:auto;

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:18px;

}

.nature-bubble{

position:relative;

left:auto !important;

right:auto !important;

top:auto !important;

bottom:auto !important;

transform:none !important;

width:140px;

height:140px;

}

.bubble-center{

width:180px;

height:180px;

order:-1;

}

.bubble-center i{

font-size:2.2rem;

}

.bubble-center h3{

font-size:1.1rem;

}

.nature-bubble i{

font-size:1.5rem;

margin-bottom:8px;

}

.nature-bubble span{

font-size:.85rem;

}

}

/* protecttion section ends here */

/* impact section starts here */

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

.impact-wall-section{

    position:relative;

    padding:130px 5%;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%
    );

}

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

.impact-wall-section::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    left:-220px;

    top:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(90px);

}

.impact-wall-section::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-220px;

    bottom:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(90px);

}

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

.impact-wall-section .section-heading{

    max-width:850px;

    margin:0 auto 90px;

    position:relative;

    z-index:2;

}

.impact-wall-section .section-heading h2{

    color:#fff;

    font-size:3.3rem;

    margin:25px 0;

    line-height:1.2;

}

.impact-wall-section .section-heading h2 span{

    color:#00BCD4;

}

.impact-wall-section .section-heading p{

    color:#CBD5E1;

    line-height:2;

    font-size:1.05rem;

}

/*====================================
IMPACT WALL
====================================*/

.impact-wall{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:70px 100px;

    max-width:1200px;

    margin:auto;

}

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

.impact-wall-item{

    position:relative;

    padding:45px 0;

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

    transition:.4s;

}

/* Alternate Layout */

.impact-wall-item:nth-child(even){

    margin-top:90px;

}

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

.impact-wall-item h3{

    font-size:6rem;

    font-weight:800;

    line-height:1;

    margin-bottom:18px;

    color:transparent;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    -webkit-background-clip:text;

    background-clip:text;

    transition:.4s;

}

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

.impact-wall-item h4{

    font-size:2rem;

    color:#fff;

    line-height:1.3;

    font-weight:600;

    max-width:220px;

    transition:.35s;

}

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

.impact-wall-item::before{

    content:"";

    position:absolute;

    right:0;

    top:15px;

    width:140px;

    height:140px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    opacity:0;

    transition:.4s;

}

/*====================================
BOTTOM LINE
====================================*/

.impact-wall-item::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:70px;

    height:3px;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    transition:.4s;

}

/* Part -2  */

/*==================================================
        IMPACT ITEM HOVER
==================================================*/

.impact-wall-item{

    transition:

    transform .4s ease,

    border-color .4s ease;

}

.impact-wall-item:hover{

    transform:translateY(-10px);

    border-top-color:rgba(0,188,212,.35);

}

.impact-wall-item:hover::before{

    opacity:1;

}

.impact-wall-item:hover::after{

    width:140px;

}

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

.impact-wall-item h3{

    transition:

    transform .4s,

    filter .4s,

    letter-spacing .4s;

}

.impact-wall-item:hover h3{

    transform:translateX(8px);

    letter-spacing:2px;

    filter:

    drop-shadow(0 0 18px rgba(0,188,212,.30));

}

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

.impact-wall-item h4{

    transition:.35s;

}

.impact-wall-item:hover h4{

    color:#00BCD4;

}

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

.impact-wall-item::before{

    animation:impactGlow 7s ease-in-out infinite;

}

@keyframes impactGlow{

    0%,100%{

        transform:scale(.8);

        opacity:0;

    }

    50%{

        transform:scale(1.15);

        opacity:.45;

    }

}

/*==================================================
        BOTTOM ACCENT
==================================================*/

.impact-wall-item::after{

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

}

@keyframes accentPulse{

    0%,100%{

        opacity:.5;

    }

    50%{

        opacity:1;

    }

}

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

.impact-wall-section h2 span{

    position:relative;

}

.impact-wall-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:20px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

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

.impact-wall-section .section-tag{

    transition:.35s;

}

.impact-wall-section .section-tag:hover{

    background:#00BCD4;

    color:#fff;

}

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

@media(max-width:992px){

.impact-wall{

grid-template-columns:1fr;

gap:35px;

}

.impact-wall-item:nth-child(even){

margin-top:0;

}

.impact-wall-item{

padding:35px 0;

}

.impact-wall-item h3{

font-size:5rem;

}

.impact-wall-item h4{

font-size:1.8rem;

max-width:100%;

}

}

@media(max-width:768px){

.impact-wall-section{

padding:90px 5%;

}

.impact-wall-section .section-heading{

margin-bottom:60px;

}

.impact-wall-section .section-heading h2{

font-size:2.3rem;

}

.impact-wall-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.impact-wall{

gap:25px;

}

.impact-wall-item{

padding:25px 0;

}

.impact-wall-item h3{

font-size:3.6rem;

margin-bottom:12px;

}

.impact-wall-item h4{

font-size:1.3rem;

}

.impact-wall-item::before{

width:90px;

height:90px;

}

}

/* impact section ends here */

/* sustainability section starts here */

/*==================================================
        NATURE FLOW SECTION
==================================================*/

.nature-flow-section{

    position:relative;

    padding:130px 5%;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%
    );

}

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

.nature-flow-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(90px);

}

.nature-flow-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(90px);

}

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

.nature-flow-section .section-heading{

    max-width:850px;

    margin:0 auto 90px;

    position:relative;

    z-index:5;

}

.nature-flow-section .section-heading h2{

    color:#fff;

    font-size:3.3rem;

    line-height:1.2;

    margin:25px 0;

}

.nature-flow-section .section-heading h2 span{

    color:#00BCD4;

}

.nature-flow-section .section-heading p{

    color:#CBD5E1;

    line-height:2;

    font-size:1.05rem;

}

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

.river-flow-wrapper{

    position:relative;

    width:1000px;

    height:900px;

    margin:auto;

    z-index:2;

}

/*====================================
SVG RIVER
====================================*/

.river-path{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

}

.river-path path{

    fill:none;

    stroke:#00BCD4;

    stroke-width:8;

    stroke-linecap:round;

    stroke-linejoin:round;

    opacity:.25;

}

/*====================================
FLOW POINT
====================================*/

.flow-point{

    position:absolute;

    display:flex;

    align-items:center;

    gap:18px;

    z-index:5;

}

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

.flow-icon{

    width:85px;

    height:85px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:2rem;

    flex-shrink:0;

    box-shadow:

    0 0 35px rgba(0,188,212,.18);

}

.flow-point h4{

    color:#fff;

    font-size:1.35rem;

    font-weight:600;

    max-width:220px;

    line-height:1.4;

}

/*====================================
POINT POSITIONS
====================================*/

.point-nature{

    top:10px;

    left:330px;

}

.point-environment{

    top:190px;

    right:140px;

}

.point-community{

    top:390px;

    left:150px;

}

.point-growth{

    top:610px;

    right:90px;

}

.point-future{

    bottom:0;

    left:340px;

}

/*====================================
CONNECTOR
====================================*/

.flow-point::before{

    content:"";

    position:absolute;

    width:55px;

    height:2px;

    background:rgba(0,188,212,.35);

}

/* Left side items */

.point-nature::before,

.point-community::before,

.point-future::before{

    right:-45px;

}

/* Right side items */

.point-environment::before,

.point-growth::before{

    left:-45px;

}

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

.nature-flow-section h2 span{

    position:relative;

}

.nature-flow-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    opacity:.35;

}

/* Part 2 */

/*==================================================
        FLOW POINT HOVER
==================================================*/

.flow-point{

    transition:.4s;

}

.flow-point:hover{

    transform:translateY(-10px);

}

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

.flow-icon{

    transition:

    transform .4s,

    box-shadow .4s,

    background .4s;

}

.flow-point:hover .flow-icon{

    transform:scale(1.1) rotate(-8deg);

    box-shadow:

    0 0 35px rgba(0,188,212,.35),

    0 0 70px rgba(126,211,33,.15);

}

.flow-point:hover .flow-icon i{

    color:#fff;

}

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

.flow-point h4{

    transition:.35s;

}

.flow-point:hover h4{

    color:#00BCD4;

}

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

.river-path path{

    stroke-dasharray:18 12;

    animation:riverFlow 12s linear infinite;

}

@keyframes riverFlow{

    from{

        stroke-dashoffset:0;

    }

    to{

        stroke-dashoffset:-600;

    }

}

/*==================================================
        FLOATING MOTION
==================================================*/

.point-nature{

    animation:riverFloat1 7s ease-in-out infinite;

}

.point-environment{

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

}

.point-community{

    animation:riverFloat3 7.5s ease-in-out infinite;

}

.point-growth{

    animation:riverFloat4 8.5s ease-in-out infinite;

}

.point-future{

    animation:riverFloat5 7s ease-in-out infinite;

}

@keyframes riverFloat1{

    50%{

        transform:translateY(-12px);

    }

}

@keyframes riverFloat2{

    50%{

        transform:translate(8px,-10px);

    }

}

@keyframes riverFloat3{

    50%{

        transform:translate(-8px,10px);

    }

}

@keyframes riverFloat4{

    50%{

        transform:translate(10px,-8px);

    }

}

@keyframes riverFloat5{

    50%{

        transform:translateY(12px);

    }

}

/*==================================================
        CONNECTOR
==================================================*/

.flow-point::before{

    transition:.4s;

}

.flow-point:hover::before{

    width:75px;

    background:#7ED321;

}

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

.nature-flow-section .section-tag{

    transition:.35s;

}

.nature-flow-section .section-tag:hover{

    background:#00BCD4;

    color:#fff;

}

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

@media(max-width:992px){

.river-flow-wrapper{

width:100%;

height:760px;

}

.flow-icon{

width:70px;

height:70px;

font-size:1.6rem;

}

.flow-point h4{

font-size:1.1rem;

max-width:170px;

}

.point-nature{

left:220px;

}

.point-environment{

right:40px;

}

.point-community{

left:40px;

}

.point-growth{

right:20px;

}

.point-future{

left:230px;

}

}

@media(max-width:768px){

.nature-flow-section{

padding:90px 5%;

}

.nature-flow-section .section-heading{

margin-bottom:60px;

}

.nature-flow-section .section-heading h2{

font-size:2.3rem;

}

.nature-flow-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

/* Mobile Layout */

.river-flow-wrapper{

width:100%;

height:auto;

display:flex;

flex-direction:column;

align-items:center;

gap:35px;

}

.river-path{

display:none;

}

.flow-point{

position:relative;

left:auto !important;

right:auto !important;

top:auto !important;

bottom:auto !important;

width:100%;

justify-content:center;

text-align:center;

flex-direction:column;

}

.flow-point::before{

display:none;

}

.flow-icon{

width:70px;

height:70px;

font-size:1.5rem;

margin-bottom:12px;

}

.flow-point h4{

font-size:1.1rem;

max-width:220px;

}

}

/* sustainability section ends here */

/* faq section starts here */

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

.nature-faq-section{

    position:relative;

    padding:130px 5%;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%
    );

}

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

.nature-faq-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    left:-180px;

    top:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(90px);

}

.nature-faq-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(90px);

}

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

.nature-faq-section .section-heading{

    max-width:850px;

    margin:0 auto 80px;

    position:relative;

    z-index:2;

}

.nature-faq-section .section-heading h2{

    color:#fff;

    font-size:3.3rem;

    line-height:1.2;

    margin:25px 0;

}

.nature-faq-section .section-heading h2 span{

    color:#00BCD4;

}

.nature-faq-section .section-heading p{

    color:#CBD5E1;

    font-size:1.05rem;

    line-height:2;

}

/*====================================
FAQ LIST
====================================*/

.nature-faq-list{

    position:relative;

    max-width:1000px;

    margin:auto;

    z-index:2;

}

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

.nature-faq-item{

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

    position:relative;

}

/*====================================
GREEN BORDER
====================================*/

.nature-faq-item::before{

    content:"";

    position:absolute;

    left:0;

    top:22px;

    width:4px;

    height:42px;

    border-radius:20px;

    background:#7ED321;

    transition:.35s;

}

/*====================================
QUESTION
====================================*/

.nature-faq-question{

    width:100%;

    background:none;

    border:none;

    outline:none;

    cursor:pointer;

    color:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:30px 25px;

    text-align:left;

    font-size:1.18rem;

    font-weight:600;

}

.nature-faq-question span{

    max-width:90%;

    line-height:1.6;

}

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

.nature-faq-question i{

    color:#00BCD4;

    font-size:1rem;

    transition:.35s;

}

/*====================================
ANSWER
====================================*/

.nature-faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .45s ease;

}

.nature-faq-answer p{

    color:#CBD5E1;

    line-height:2;

    padding:0 25px 30px 25px;

    max-width:850px;

}

/* Part 2 */

/*==================================================
        FAQ ITEM HOVER
==================================================*/

.nature-faq-item{

    transition:

    border-color .35s ease,

    background .35s ease;

}

.nature-faq-item:hover{

    border-color:rgba(0,188,212,.18);

}

.nature-faq-item:hover::before{

    height:70px;

    background:linear-gradient(

        180deg,

        #7ED321,

        #00BCD4

    );

}

/*==================================================
        QUESTION
==================================================*/

.nature-faq-question{

    transition:.35s;

}

.nature-faq-item:hover .nature-faq-question{

    padding-left:35px;

}

.nature-faq-item:hover .nature-faq-question span{

    color:#00BCD4;

}

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

.nature-faq-question i{

    transition:

    transform .35s,

    color .35s;

}

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

    transform:rotate(45deg);

    color:#7ED321;

}

/*==================================================
        ANSWER
==================================================*/

.nature-faq-answer{

    transition:

    max-height .45s ease,

    opacity .35s ease;

    opacity:0;

}

.nature-faq-item.active .nature-faq-answer{

    opacity:1;

}

.nature-faq-item.active::before{

    height:100%;

    top:0;

    border-radius:0;

    background:linear-gradient(

        180deg,

        #7ED321,

        #00BCD4

    );

}

/*==================================================
        ACTIVE QUESTION
==================================================*/

.nature-faq-item.active .nature-faq-question span{

    color:#00BCD4;

}

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

.nature-faq-section h2 span{

    position:relative;

}

.nature-faq-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:20px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

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

.nature-faq-section .section-tag{

    transition:.35s;

}

.nature-faq-section .section-tag:hover{

    background:#00BCD4;

    color:#fff;

}

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

@media(max-width:768px){

.nature-faq-section{

padding:90px 5%;

}

.nature-faq-section .section-heading{

margin-bottom:60px;

}

.nature-faq-section .section-heading h2{

font-size:2.3rem;

}

.nature-faq-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.nature-faq-question{

padding:22px 18px;

font-size:1rem;

gap:15px;

}

.nature-faq-item:hover .nature-faq-question{

padding-left:24px;

}

.nature-faq-question span{

max-width:85%;

}

.nature-faq-answer p{

padding:0 18px 22px;

font-size:.9rem;

line-height:1.8;

}

.nature-faq-item::before{

left:0;

top:18px;

height:36px;

}

}


/* faq section ends here */

/* cta section starts here */

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

.green-partner-section{

    position:relative;

    min-height:700px;

    display:flex;

    align-items:flex-end;

    overflow:hidden;

    background:#050816;

}

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

.green-partner-bg{

    position:absolute;

    inset:0;

    z-index:1;

}

.green-partner-bg img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:8s ease;

}

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

.green-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        to top,

        rgba(5,8,22,.95) 8%,

        rgba(5,8,22,.75) 35%,

        rgba(5,8,22,.35) 70%,

        rgba(5,8,22,.15) 100%

    );

    z-index:2;

}

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

.green-partner-content{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

    text-align:center;

}

.green-partner-content h2{

    color:#fff;

    font-size:4rem;

    line-height:1.15;

    margin:25px 0;

}

.green-partner-content h2 span{

    color:#00BCD4;

}

.green-partner-content p{

    max-width:700px;

    margin:auto;

    color:#CBD5E1;

    font-size:1.08rem;

    line-height:2;

}

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

.green-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;

    margin-top:45px;

}

.green-buttons a{

    min-width:220px;

    padding:18px 35px;

    border-radius:60px;

    text-decoration:none;

    font-weight:600;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    transition:.4s;

}

.green-buttons .btn-primary{

    background:linear-gradient(

        135deg,

        #00BCD4,

        #7ED321

    );

    color:#fff;

}

.green-buttons .btn-secondary{

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

    color:#fff;

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

    backdrop-filter:blur(12px);

}

.green-buttons .btn-outline{

    border:1px solid rgba(0,188,212,.4);

    color:#00BCD4;

    background:transparent;

}

/*====================================
FLOATING ELEMENTS
====================================*/

.floating-leaf{

    position:absolute;

    color:rgba(126,211,33,.25);

    z-index:3;

    pointer-events:none;

}

.leaf-one{

    left:8%;

    top:18%;

    font-size:3rem;

}

.leaf-two{

    right:12%;

    top:30%;

    font-size:2.6rem;

}

.leaf-three{

    right:18%;

    bottom:26%;

    font-size:3.4rem;

}

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

.green-partner-content h2 span{

    position:relative;

}

.green-partner-content h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:30px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

/* Part 2 */

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

.green-partner-bg img{

    animation:landscapeZoom 18s ease-in-out infinite alternate;

}

@keyframes landscapeZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}

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

.green-overlay::before{

    content:"";

    position:absolute;

    inset:0;

    background:radial-gradient(

        circle at center,

        rgba(0,188,212,.08),

        transparent 65%

    );

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

}

@keyframes overlayGlow{

    0%,100%{

        opacity:.4;

    }

    50%{

        opacity:.9;

    }

}

/*==================================================
        FLOATING LEAVES
==================================================*/

.floating-leaf{

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

}

.leaf-two{

    animation-delay:2s;

}

.leaf-three{

    animation-delay:4s;

}

@keyframes leafFloat{

    0%,100%{

        transform:

        translateY(0)

        rotate(0deg);

        opacity:.18;

    }

    50%{

        transform:

        translateY(-25px)

        rotate(18deg);

        opacity:.45;

    }

}

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

.green-buttons a{

    position:relative;

    overflow:hidden;

}

.green-buttons a::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transform:skewX(-25deg);

    transition:.7s;

}

.green-buttons a:hover::before{

    left:150%;

}

.green-buttons .btn-primary:hover{

    transform:translateY(-8px);

    box-shadow:

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

}

.green-buttons .btn-secondary:hover{

    transform:translateY(-8px);

    border-color:#00BCD4;

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

}

.green-buttons .btn-outline:hover{

    transform:translateY(-8px);

    background:#00BCD4;

    color:#fff;

    border-color:#00BCD4;

}

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

.green-buttons a i{

    transition:.35s;

}

.green-buttons a:hover i{

    transform:rotate(-15deg) scale(1.15);

}

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

.green-partner-content{

    animation:contentRise 1.2s ease;

}

@keyframes contentRise{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

.green-partner-content .section-tag{

    transition:.35s;

}

.green-partner-content .section-tag:hover{

    background:#00BCD4;

    color:#fff;

}

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

@media(max-width:992px){

.green-partner-section{

min-height:620px;

}

.green-partner-content h2{

font-size:3.1rem;

}

.green-buttons{

gap:15px;

}

.green-buttons a{

min-width:200px;

}

}

@media(max-width:768px){

.green-partner-section{

min-height:560px;

}

.green-partner-content{

margin-bottom:60px;

}

.green-partner-content h2{

font-size:2.3rem;

}

.green-partner-content p{

font-size:.95rem;

line-height:1.8;

}

.green-buttons{

flex-direction:column;

align-items:center;

gap:15px;

}

.green-buttons a{

width:100%;

max-width:320px;

padding:16px 25px;

}

.floating-leaf{

display:none;

}

}

/* cta section ends here */

/* Environmental Protection & Sustainability Page Ends Here*/

/* Healthcare services page starts here */

/* Hero section starts here */

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

.healthcare-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 60%,
        #050816 100%
    );

}

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

.health-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    z-index:1;

}

.glow-one{

    width:520px;

    height:520px;

    left:-180px;

    top:-180px;

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

}

.glow-two{

    width:450px;

    height:450px;

    right:-160px;

    bottom:-160px;

    background:rgba(126,211,33,.10);

}

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

.healthcare-hero-content{

    position:relative;

    z-index:10;

    max-width:900px;

    text-align:center;

}

.healthcare-hero-content h1{

    font-size:4.5rem;

    color:#fff;

    line-height:1.15;

    margin:25px 0;

    font-weight:700;

}

.healthcare-hero-content h1 span{

    color:#00BCD4;

}

.healthcare-hero-content p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

    font-size:1.08rem;

}

/*====================================
BREADCRUMB
====================================*/

.healthcare-breadcrumb{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-bottom:45px;

}

.healthcare-breadcrumb a{

    color:#CBD5E1;

    text-decoration:none;

    transition:.35s;

}

.healthcare-breadcrumb a:hover{

    color:#00BCD4;

}

.healthcare-breadcrumb i{

    color:#64748B;

    font-size:.85rem;

}

.healthcare-breadcrumb span{

    color:#7ED321;

}

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

.healthcare-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:45px;

    flex-wrap:wrap;

}

.healthcare-buttons a{

    min-width:220px;

    padding:18px 34px;

    border-radius:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.healthcare-buttons .btn-primary{

    background:linear-gradient(

        135deg,

        #00BCD4,

        #7ED321

    );

    color:#fff;

}

.healthcare-buttons .btn-secondary{

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

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

    backdrop-filter:blur(12px);

    color:#fff;

}

/*====================================
FLOATING MEDICAL ICONS
====================================*/

.floating-medical{

    position:absolute;

    width:70px;

    height:70px;

    border-radius:50%;

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

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

    backdrop-filter:blur(18px);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#00BCD4;

    font-size:1.7rem;

    z-index:2;

}

.medical-one{

    top:16%;

    left:10%;

}

.medical-two{

    top:22%;

    right:15%;

}

.medical-three{

    top:60%;

    left:8%;

}

.medical-four{

    bottom:20%;

    right:12%;

}

.medical-five{

    bottom:34%;

    left:18%;

}

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

.medical-particles{

    position:absolute;

    inset:0;

    z-index:1;

}

.medical-particles span{

    position:absolute;

    width:6px;

    height:6px;

    border-radius:50%;

    background:#00BCD4;

    opacity:.35;

}

.medical-particles span:nth-child(1){

    top:15%;

    left:18%;

}

.medical-particles span:nth-child(2){

    top:30%;

    right:20%;

}

.medical-particles span:nth-child(3){

    top:45%;

    left:30%;

}

.medical-particles span:nth-child(4){

    top:60%;

    right:32%;

}

.medical-particles span:nth-child(5){

    bottom:25%;

    left:25%;

}

.medical-particles span:nth-child(6){

    bottom:18%;

    right:16%;

}

.medical-particles span:nth-child(7){

    top:50%;

    right:8%;

}

.medical-particles span:nth-child(8){

    bottom:38%;

    left:12%;

}

/*====================================
GLASS WAVES
====================================*/

.medical-wave{

    position:absolute;

    left:-10%;

    width:120%;

    border-radius:50% 50% 0 0;

    backdrop-filter:blur(30px);

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

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

}

.medical-wave-one{

    height:180px;

    bottom:-60px;

    z-index:2;

}

.medical-wave-two{

    height:140px;

    bottom:30px;

    opacity:.65;

    z-index:3;

}

.medical-wave-three{

    height:110px;

    bottom:95px;

    opacity:.35;

    z-index:4;

}

/*====================================
ECG
====================================*/

.ecg-wrapper{

    position:absolute;

    left:0;

    bottom:160px;

    width:100%;

    z-index:5;

    opacity:.6;

}

.ecg-line{

    width:100%;

    height:80px;

}

.ecg-line path{

    fill:none;

    stroke:#00BCD4;

    stroke-width:3;

    stroke-linecap:round;

    stroke-linejoin:round;

}

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

.hero-scroll{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    text-align:center;

    color:#CBD5E1;

    z-index:10;

}

.hero-scroll span{

    font-size:.85rem;

    letter-spacing:2px;

    text-transform:uppercase;

}

.scroll-line{

    width:2px;

    height:45px;

    margin:12px auto 0;

    background:linear-gradient(

        #00BCD4,

        transparent

    );

}

/* Part 2 */

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

.healthcare-hero-content{

    animation:heroFadeUp 1.2s ease;

}

@keyframes heroFadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
        FLOATING MEDICAL ICONS
==================================================*/

.floating-medical{

    transition:

    transform .4s,

    box-shadow .4s,

    border-color .4s;

    animation:medicalFloat 7s ease-in-out infinite;

}

.medical-two{

    animation-delay:1.5s;

}

.medical-three{

    animation-delay:3s;

}

.medical-four{

    animation-delay:4.5s;

}

.medical-five{

    animation-delay:6s;

}

@keyframes medicalFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

}

.floating-medical:hover{

    transform:scale(1.1);

    border-color:rgba(0,188,212,.35);

    box-shadow:

    0 0 35px rgba(0,188,212,.25);

}

.floating-medical:hover i{

    color:#7ED321;

}

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

.medical-particles span{

    animation:particleFloat 8s linear infinite;

}

.medical-particles span:nth-child(even){

    animation-duration:11s;

}

@keyframes particleFloat{

    0%{

        transform:translateY(0) scale(1);

        opacity:.15;

    }

    50%{

        transform:translateY(-30px) scale(1.4);

        opacity:.55;

    }

    100%{

        transform:translateY(-60px) scale(.8);

        opacity:0;

    }

}

/*==================================================
        MEDICAL WAVES
==================================================*/

.medical-wave{

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

}

.medical-wave-two{

    animation-delay:2s;

}

.medical-wave-three{

    animation-delay:4s;

}

@keyframes waveMotion{

    0%,100%{

        transform:translateX(0);

    }

    50%{

        transform:translateX(-25px);

    }

}

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

.ecg-line path{

    stroke-dasharray:1400;

    stroke-dashoffset:1400;

    animation:ecgPulse 5s linear infinite;

}

@keyframes ecgPulse{

    0%{

        stroke-dashoffset:1400;

    }

    100%{

        stroke-dashoffset:0;

    }

}

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

.healthcare-buttons a{

    position:relative;

    overflow:hidden;

}

.healthcare-buttons a::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transform:skewX(-25deg);

    transition:.7s;

}

.healthcare-buttons a:hover::before{

    left:160%;

}

.healthcare-buttons .btn-primary:hover{

    transform:translateY(-8px);

    box-shadow:

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

}

.healthcare-buttons .btn-secondary:hover{

    transform:translateY(-8px);

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

    border-color:#00BCD4;

}

/*==================================================
        SCROLL INDICATOR
==================================================*/

.scroll-line{

    animation:scrollMove 2s infinite;

}

@keyframes scrollMove{

    0%{

        height:18px;

        opacity:.2;

    }

    50%{

        height:45px;

        opacity:1;

    }

    100%{

        height:18px;

        opacity:.2;

    }

}

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

.healthcare-hero-content h1 span{

    position:relative;

}

.healthcare-hero-content h1 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:30px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

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

.healthcare-hero .section-tag{

    transition:.35s;

}

.healthcare-hero .section-tag:hover{

    background:#00BCD4;

    color:#fff;

}

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

@media(max-width:992px){

.healthcare-hero{

padding:120px 5% 160px;

min-height:auto;

}

.healthcare-hero-content h1{

font-size:3.5rem;

}

.floating-medical{

width:60px;

height:60px;

font-size:1.4rem;

}

.ecg-wrapper{

bottom:120px;

}

}

@media(max-width:768px){

.healthcare-hero{

padding:120px 5% 140px;

}

.healthcare-hero-content h1{

font-size:2.5rem;

}

.healthcare-hero-content p{

font-size:.95rem;

line-height:1.8;

}

.healthcare-breadcrumb{

flex-wrap:wrap;

justify-content:center;

font-size:.9rem;

}

.healthcare-buttons{

flex-direction:column;

align-items:center;

gap:15px;

}

.healthcare-buttons a{

width:100%;

max-width:320px;

}

.floating-medical{

display:none;

}

.medical-particles{

display:none;

}

.medical-wave-one{

height:120px;

}

.medical-wave-two{

height:90px;

}

.medical-wave-three{

height:70px;

}

.ecg-wrapper{

bottom:90px;

}

.hero-scroll{

bottom:20px;

}

}

/* Hero section ends here */

/* About Section Starts Here */

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

.health-about-section{

    position:relative;

    padding:130px 5%;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%
    );

}

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

.health-about-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    left:-180px;

    top:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(90px);

}

.health-about-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(90px);

}

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

.health-about-section .section-heading{

    max-width:850px;

    margin:0 auto 70px;

    position:relative;

    z-index:2;

}

.health-about-section .section-heading h2{

    color:#fff;

    font-size:3.3rem;

    line-height:1.2;

    margin:25px 0;

}

.health-about-section .section-heading h2 span{

    color:#00BCD4;

}

.health-about-section .section-heading p{

    color:#CBD5E1;

    font-size:1.05rem;

    line-height:2;

}

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

.health-report-image{

    position:relative;

    max-width:1200px;

    margin:0 auto 70px;

    border-radius:30px;

    overflow:hidden;

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

    z-index:2;

}

.health-report-image img{

    width:100%;

    height:520px;

    object-fit:cover;

    display:block;

}

.health-report-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        to top,

        rgba(5,8,22,.45),

        rgba(5,8,22,.08)

    );

    z-index:1;

}

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

.health-report-content{

    max-width:1100px;

    margin:auto;

    position:relative;

    z-index:2;

}

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

.health-report-text{

    max-width:900px;

    margin:0 auto 60px;

    text-align:center;

}

.health-report-text h3{

    color:#fff;

    font-size:2.2rem;

    margin-bottom:25px;

}

.health-report-text p{

    color:#CBD5E1;

    line-height:2;

    font-size:1rem;

}

/*====================================
HEALTH VALUES
====================================*/

.health-values{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

}

.health-value{

    display:flex;

    align-items:center;

    gap:12px;

    padding:16px 24px;

    border-radius:60px;

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

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

    backdrop-filter:blur(16px);

    transition:.35s;

}

.health-value i{

    color:#00BCD4;

    font-size:1.2rem;

}

.health-value span{

    color:#fff;

    font-size:1rem;

    font-weight:500;

}

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

.health-about-section h2 span{

    position:relative;

}

.health-about-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:20px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

/* Part 2 */

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

.health-report-image{

    transition:

    transform .45s ease,

    box-shadow .45s ease,

    border-color .45s ease;

}

.health-report-image:hover{

    transform:translateY(-8px);

    border-color:rgba(0,188,212,.25);

    box-shadow:

    0 25px 60px rgba(0,188,212,.15);

}

.health-report-image img{

    transition:transform 7s ease;

}

.health-report-image:hover img{

    transform:scale(1.08);

}

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

.health-report-text h3{

    transition:.35s;

}

.health-report-text:hover h3{

    color:#00BCD4;

}

.health-report-text p{

    transition:.35s;

}

.health-report-text:hover p{

    color:#E2E8F0;

}

/*==================================================
        HEALTH VALUE
==================================================*/

.health-value{

    position:relative;

    overflow:hidden;

    transition:

    transform .35s ease,

    border-color .35s ease,

    background .35s ease,

    box-shadow .35s ease;

}

.health-value::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.25),

        transparent

    );

    transform:skewX(-25deg);

    transition:.7s;

}

.health-value:hover::before{

    left:160%;

}

.health-value:hover{

    transform:translateY(-8px);

    border-color:rgba(0,188,212,.25);

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

    box-shadow:

    0 18px 40px rgba(0,188,212,.12);

}

.health-value i{

    transition:.35s;

}

.health-value:hover i{

    color:#7ED321;

    transform:rotate(-12deg) scale(1.15);

}

.health-value span{

    transition:.35s;

}

.health-value:hover span{

    color:#00BCD4;

}

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

.health-report-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:radial-gradient(

        circle at center,

        rgba(0,188,212,.10),

        transparent 70%

    );

    opacity:0;

    transition:.45s;

    z-index:2;

}

.health-report-image:hover::after{

    opacity:1;

}

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

.health-about-section .section-tag{

    transition:.35s;

}

.health-about-section .section-tag:hover{

    background:#00BCD4;

    color:#fff;

}

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

@media(max-width:992px){

.health-report-image img{

height:420px;

}

.health-report-text h3{

font-size:2rem;

}

.health-values{

gap:15px;

}

.health-value{

padding:14px 22px;

}

}

@media(max-width:768px){

.health-about-section{

padding:90px 5%;

}

.health-about-section .section-heading{

margin-bottom:60px;

}

.health-about-section .section-heading h2{

font-size:2.3rem;

}

.health-about-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.health-report-image{

margin-bottom:50px;

border-radius:20px;

}

.health-report-image img{

height:260px;

}

.health-report-text{

margin-bottom:40px;

}

.health-report-text h3{

font-size:1.6rem;

margin-bottom:16px;

}

.health-report-text p{

font-size:.92rem;

line-height:1.8;

}

.health-values{

justify-content:center;

gap:12px;

}

.health-value{

width:100%;

max-width:320px;

justify-content:center;

padding:14px 20px;

}

.health-value span{

font-size:.95rem;

}

}

/* About Section Ends Here */

/* Ecosystem section starts here */

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

.medical-network-section{

    position:relative;

    padding:130px 5%;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%
    );

}

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

.medical-network-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(90px);

}

.medical-network-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(90px);

}

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

.medical-network-section .section-heading{

    max-width:850px;

    margin:0 auto 90px;

    position:relative;

    z-index:5;

}

.medical-network-section .section-heading h2{

    color:#fff;

    font-size:3.3rem;

    margin:25px 0;

    line-height:1.2;

}

.medical-network-section .section-heading h2 span{

    color:#00BCD4;

}

.medical-network-section .section-heading p{

    color:#CBD5E1;

    line-height:2;

    font-size:1.05rem;

}

/*====================================
NETWORK
====================================*/

.medical-network{

    position:relative;

    width:900px;

    height:700px;

    margin:auto;

    z-index:2;

}

/*====================================
SVG LINES
====================================*/

.network-lines{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

}

.network-lines line{

    stroke:#00BCD4;

    stroke-width:3;

    stroke-linecap:round;

    opacity:.25;

}

/*====================================
COMMON NODE
====================================*/

.network-node{

    position:absolute;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    text-decoration:none;

    color:#fff;

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

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

    backdrop-filter:blur(18px);

    transition:.35s;

}

/*====================================
CENTER
====================================*/

.network-center{

    width:180px;

    height:180px;

    border-radius:28px;

    left:50%;

    top:50%;

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

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    box-shadow:

    0 0 40px rgba(0,188,212,.18);

}

.network-center i{

    font-size:3rem;

    margin-bottom:18px;

    color:#fff;

}

.network-center h3{

    color:#fff;

    font-size:1.5rem;

}

/*====================================
SMALL NODES
====================================*/

.node-doctors,
.node-clinics,
.node-awareness,
.node-nutrition,
.node-emergency,
.node-wellness{

    width:130px;

    height:130px;

    border-radius:24px;

}

.network-node i{

    font-size:2rem;

    color:#00BCD4;

    margin-bottom:14px;

}

.network-node span{

    color:#fff;

    font-weight:600;

    font-size:.95rem;

    line-height:1.4;

}

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

.node-doctors{

    top:20px;

    left:50%;

    transform:translateX(-50%);

}

.node-clinics{

    left:110px;

    top:170px;

}

.node-awareness{

    right:110px;

    top:170px;

}

.node-nutrition{

    left:150px;

    bottom:120px;

}

.node-emergency{

    right:150px;

    bottom:120px;

}

.node-wellness{

    left:50%;

    bottom:10px;

    transform:translateX(-50%);

}

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

.medical-network-section h2 span{

    position:relative;

}

.medical-network-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:20px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

/* Part - 2 */

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

.network-node{

    overflow:hidden;

    transition:

    transform .4s ease,

    border-color .4s ease,

    box-shadow .4s ease,

    background .4s ease;

}

.network-node:hover{

    transform:translateY(-10px);

    border-color:rgba(0,188,212,.30);

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

    box-shadow:

    0 20px 45px rgba(0,188,212,.15);

}

/* Keep transformed nodes centered */

.network-center:hover{

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

}

.node-doctors:hover,

.node-wellness:hover{

    transform:translateX(-50%) translateY(-10px);

}

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

.network-node i{

    transition:.35s;

}

.network-node:hover i{

    color:#7ED321;

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

}

.network-center:hover i{

    color:#fff;

}

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

.network-node span,

.network-center h3{

    transition:.35s;

}

.network-node:hover span{

    color:#00BCD4;

}

/*==================================================
        CONNECTION LINES
==================================================*/

.network-lines line{

    stroke-dasharray:12 10;

    animation:networkPulse 10s linear infinite;

}

@keyframes networkPulse{

    from{

        stroke-dashoffset:0;

    }

    to{

        stroke-dashoffset:-500;

    }

}

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

.network-center{

    position:absolute;

}

.network-center::before{

    content:"";

    position:absolute;

    inset:-14px;

    border-radius:34px;

    border:2px solid rgba(0,188,212,.15);

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

}

@keyframes centerPulse{

    0%{

        transform:scale(.95);

        opacity:.7;

    }

    100%{

        transform:scale(1.12);

        opacity:0;

    }

}

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

.network-node::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:radial-gradient(

        circle,

        rgba(0,188,212,.12),

        transparent 70%

    );

    opacity:0;

    transition:.35s;

}

.network-node:hover::after{

    opacity:1;

}

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

.node-doctors{

    animation:floatOne 7s ease-in-out infinite;

}

.node-clinics{

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

}

.node-awareness{

    animation:floatThree 7.5s ease-in-out infinite;

}

.node-nutrition{

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

}

.node-emergency{

    animation:floatFive 7s ease-in-out infinite;

}

.node-wellness{

    animation:floatSix 8.5s ease-in-out infinite;

}

@keyframes floatOne{

    50%{

        transform:translateX(-50%) translateY(-12px);

    }

}

@keyframes floatTwo{

    50%{

        transform:translate(-8px,-10px);

    }

}

@keyframes floatThree{

    50%{

        transform:translate(8px,-10px);

    }

}

@keyframes floatFour{

    50%{

        transform:translate(-10px,10px);

    }

}

@keyframes floatFive{

    50%{

        transform:translate(10px,10px);

    }

}

@keyframes floatSix{

    50%{

        transform:translateX(-50%) translateY(12px);

    }

}

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

.medical-network-section .section-tag{

    transition:.35s;

}

.medical-network-section .section-tag:hover{

    background:#00BCD4;

    color:#fff;

}

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

@media(max-width:992px){

.medical-network{

width:650px;

height:620px;

}

.network-center{

width:150px;

height:150px;

}

.network-center i{

font-size:2.4rem;

}

.network-center h3{

font-size:1.2rem;

}

.node-doctors,
.node-clinics,
.node-awareness,
.node-nutrition,
.node-emergency,
.node-wellness{

width:105px;

height:105px;

}

.network-node i{

font-size:1.6rem;

}

.network-node span{

font-size:.85rem;

}

.node-clinics{

left:40px;

}

.node-awareness{

right:40px;

}

.node-nutrition{

left:80px;

}

.node-emergency{

right:80px;

}

}

@media(max-width:768px){

.medical-network-section{

padding:90px 5%;

}

.medical-network-section .section-heading{

margin-bottom:60px;

}

.medical-network-section .section-heading h2{

font-size:2.3rem;

}

.medical-network-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

/* Mobile Stack */

.medical-network{

width:100%;

height:auto;

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:18px;

}

.network-lines{

display:none;

}

.network-node{

position:relative;

left:auto !important;

right:auto !important;

top:auto !important;

bottom:auto !important;

transform:none !important;

width:140px;

height:140px;

}

.network-center{

width:180px;

height:180px;

order:-1;

}

.network-center::before{

display:none;

}

.network-center i{

font-size:2.5rem;

}

.network-center h3{

font-size:1.2rem;

}

}

/* Ecosystem section ends here */

/* care section starts here */

/*==================================================
        CARE FLOW SECTION
==================================================*/

.care-flow-section{

    position:relative;

    padding:130px 5%;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%
    );

}

.care-flow-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(90px);

}

.care-flow-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(90px);

}

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

.care-flow-section .section-heading{

    max-width:850px;

    margin:0 auto 90px;

    position:relative;

    z-index:5;

}

.care-flow-section .section-heading h2{

    color:#fff;

    font-size:3.3rem;

    margin:25px 0;

}

.care-flow-section .section-heading h2 span{

    color:#00BCD4;

}

.care-flow-section .section-heading p{

    color:#CBD5E1;

    line-height:2;

}

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

.care-flow-wrapper{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    max-width:1400px;

    margin:auto;

    z-index:5;

}

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

.care-flow-wrapper::before{

    content:"";

    position:absolute;

    left:7%;

    right:7%;

    top:35px;

    height:3px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    z-index:1;

}

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

.care-stage{

    position:relative;

    flex:1;

    text-align:center;

    z-index:2;

}

/*====================================
HEART
====================================*/

.care-stage-heart{

    width:72px;

    height:72px;

    margin:auto;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    color:#fff;

    font-size:1.6rem;

    box-shadow:
    0 0 25px rgba(0,188,212,.20);

    transition:.35s;

}

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

.care-stage h4{

    margin-top:22px;

    color:#fff;

    font-size:1.05rem;

    line-height:1.5;

    transition:.35s;

}

/*====================================
ECG PEAKS
====================================*/

/* .care-stage:not(:last-child)::after{

    content:"";

    position:absolute;

    top:22px;

    right:-11%;

    width:70px;

    height:22px;

    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='22' viewBox='0 0 70 22'%3E%3Cpath d='M0 11 L18 11 L25 3 L34 19 L44 7 L53 11 L70 11' stroke='%2300BCD4' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;

} */

/*====================================
UNDERLINE
====================================*/

.care-flow-section h2 span{

    position:relative;

}

.care-flow-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    opacity:.35;

}

/* part-2 */

/*==================================================
        HEART BEAT
==================================================*/

.care-stage-heart{

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

}

.care-stage:nth-child(2) .care-stage-heart{

    animation-delay:.25s;

}

.care-stage:nth-child(3) .care-stage-heart{

    animation-delay:.5s;

}

.care-stage:nth-child(4) .care-stage-heart{

    animation-delay:.75s;

}

.care-stage:nth-child(5) .care-stage-heart{

    animation-delay:1s;

}

.care-stage:nth-child(6) .care-stage-heart{

    animation-delay:1.25s;

}

@keyframes careHeartbeat{

    0%,100%{

        transform:scale(1);

    }

    15%{

        transform:scale(1.12);

    }

    30%{

        transform:scale(.95);

    }

    45%{

        transform:scale(1.08);

    }

}

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

/* .care-stage:not(:last-child)::after{

    animation:ecgGlow 2.5s linear infinite;

} */

@keyframes ecgGlow{

    0%,100%{

        opacity:.55;

    }

    50%{

        opacity:1;

        filter:drop-shadow(0 0 8px rgba(0,188,212,.45));

    }

}

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

.care-stage{

    transition:.35s;

}

.care-stage:hover{

    transform:translateY(-8px);

}

.care-stage:hover .care-stage-heart{

    box-shadow:

    0 0 20px rgba(0,188,212,.35),

    0 0 45px rgba(126,211,33,.18);

}

.care-stage:hover i{

    transform:scale(1.15);

}

.care-stage-heart i{

    transition:.35s;

}

.care-stage h4{

    transition:.35s;

}

.care-stage:hover h4{

    color:#00BCD4;

}

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

.care-stage-heart{

    position:relative;

    overflow:hidden;

}

.care-stage-heart::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:50%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

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

        transparent

    );

    transform:skewX(-25deg);

    transition:.7s;

}

.care-stage:hover .care-stage-heart::before{

    left:160%;

}

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

.care-flow-section .section-tag{

    transition:.35s;

}

.care-flow-section .section-tag:hover{

    background:#00BCD4;

    color:#fff;

}

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

@media(max-width:992px){

.care-flow-wrapper{

overflow-x:auto;

justify-content:flex-start;

padding-bottom:20px;

gap:35px;

scrollbar-width:none;

}

.care-flow-wrapper::-webkit-scrollbar{

display:none;

}

.care-stage{

min-width:170px;

}

.care-flow-wrapper::before{

left:85px;

right:85px;

}

.care-stage:not(:last-child)::after{

right:-55px;

}

}

@media(max-width:768px){

.care-flow-section{

padding:90px 5%;

}

.care-flow-section .section-heading{

margin-bottom:60px;

}

.care-flow-section .section-heading h2{

font-size:2.3rem;

}

.care-flow-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.care-flow-wrapper{

gap:25px;

}

.care-stage{

min-width:145px;

}

.care-stage-heart{

width:60px;

height:60px;

font-size:1.3rem;

}

.care-stage h4{

font-size:.9rem;

margin-top:16px;

}

.care-stage:not(:last-child)::after{

width:55px;

right:-42px;

top:18px;

}

}

/* care section ends here */

/* service section starts here */

/*==================================================
        MEDICAL DASHBOARD SECTION
==================================================*/

.medical-dashboard-section{

    position:relative;

    padding:130px 5%;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%
    );

}

.medical-dashboard-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(90px);

}

.medical-dashboard-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(90px);

}

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

.medical-dashboard-section .section-heading{

    max-width:850px;

    margin:0 auto 90px;

    position:relative;

    z-index:5;

}

.medical-dashboard-section .section-heading h2{

    color:#fff;

    font-size:3.3rem;

    margin:25px 0;

    line-height:1.2;

}

.medical-dashboard-section .section-heading h2 span{

    color:#00BCD4;

}

.medical-dashboard-section .section-heading p{

    color:#CBD5E1;

    line-height:2;

    font-size:1.05rem;

}

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

.medical-dashboard-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    grid-template-rows:

    280px

    210px

    190px;

    gap:24px;

    max-width:1350px;

    margin:auto;

    position:relative;

    z-index:5;

}

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

.dashboard-panel{

    position:relative;

    overflow:hidden;

    padding:35px;

    border-radius:28px;

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

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

    backdrop-filter:blur(20px);

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

}

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

.panel-icon{

    width:72px;

    height:72px;

    border-radius:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(

        135deg,

        #00BCD4,

        #7ED321

    );

    color:#fff;

    font-size:1.8rem;

    margin-bottom:25px;

    box-shadow:

    0 12px 30px rgba(0,188,212,.20);

}

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

.dashboard-panel h3{

    color:#fff;

    font-size:1.9rem;

    margin-bottom:15px;

    line-height:1.3;

}

.dashboard-panel p{

    color:#CBD5E1;

    line-height:1.9;

    font-size:.98rem;

}

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

.panel-primary{

    grid-column:1;

    grid-row:1;

}

.panel-camps{

    grid-column:2;

    grid-row:1;

}

.panel-emergency{

    grid-column:2;

    grid-row:2;

}

.panel-maternal{

    grid-column:1;

    grid-row:2;

    flex-direction:row;

    align-items:center;

    justify-content:flex-start;

    gap:30px;

}

.panel-awareness{

    grid-column:1 / span 2;

    grid-row:3;

    flex-direction:row;

    align-items:center;

    justify-content:flex-start;

    gap:30px;

}

/*====================================
DECORATIVE CORNER
====================================*/

.dashboard-panel::before{

    content:"";

    position:absolute;

    width:120px;

    height:120px;

    right:-40px;

    top:-40px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,188,212,.08),

        transparent 70%

    );

}

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

.medical-dashboard-section h2 span{

    position:relative;

}

.medical-dashboard-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:20px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

/* Part - 2 */

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

.dashboard-panel{

    transition:

    transform .4s ease,

    border-color .4s ease,

    box-shadow .4s ease,

    background .4s ease;

}

.dashboard-panel:hover{

    transform:translateY(-10px);

    border-color:rgba(0,188,212,.25);

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

    box-shadow:

    0 25px 60px rgba(0,188,212,.12);

}

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

.dashboard-panel::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    transform:scaleX(0);

    transform-origin:left;

    transition:.45s;

}

.dashboard-panel:hover::after{

    transform:scaleX(1);

}

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

.panel-icon{

    transition:

    transform .35s,

    box-shadow .35s;

}

.dashboard-panel:hover .panel-icon{

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

    box-shadow:

    0 15px 35px rgba(0,188,212,.30),

    0 0 25px rgba(126,211,33,.15);

}

.panel-icon i{

    transition:.35s;

}

.dashboard-panel:hover .panel-icon i{

    transform:scale(1.15);

}

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

.dashboard-panel h3{

    transition:.35s;

}

.dashboard-panel:hover h3{

    color:#00BCD4;

}

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

.dashboard-panel p{

    transition:.35s;

}

.dashboard-panel:hover p{

    color:#E2E8F0;

}

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

.dashboard-panel{

    overflow:hidden;

}

.dashboard-panel .panel-icon::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:50%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.dashboard-panel:hover .panel-icon::before{

    left:170%;

}

.panel-icon{

    position:relative;

    overflow:hidden;

}

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

.panel-primary{

    animation:dashboardFloatOne 7s ease-in-out infinite;

}

.panel-camps{

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

}

.panel-emergency{

    animation:dashboardFloatThree 7.5s ease-in-out infinite;

}

.panel-maternal{

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

}

.panel-awareness{

    animation:dashboardFloatFive 9s ease-in-out infinite;

}

@keyframes dashboardFloatOne{

    50%{

        transform:translateY(-6px);

    }

}

@keyframes dashboardFloatTwo{

    50%{

        transform:translateY(6px);

    }

}

@keyframes dashboardFloatThree{

    50%{

        transform:translateY(-6px);

    }

}

@keyframes dashboardFloatFour{

    50%{

        transform:translateY(6px);

    }

}

@keyframes dashboardFloatFive{

    50%{

        transform:translateY(-6px);

    }

}

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

.medical-dashboard-section .section-tag{

    transition:.35s;

}

.medical-dashboard-section .section-tag:hover{

    background:#00BCD4;

    color:#fff;

}

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

@media(max-width:992px){

.medical-dashboard-grid{

grid-template-columns:1fr;

grid-template-rows:auto;

}

.panel-primary,
.panel-camps,
.panel-emergency,
.panel-maternal,
.panel-awareness{

grid-column:auto;

grid-row:auto;

min-height:230px;

}

.panel-maternal,
.panel-awareness{

flex-direction:column;

align-items:flex-start;

gap:20px;

}

.dashboard-panel h3{

font-size:1.6rem;

}

}

@media(max-width:768px){

.medical-dashboard-section{

padding:90px 5%;

}

.medical-dashboard-section .section-heading{

margin-bottom:60px;

}

.medical-dashboard-section .section-heading h2{

font-size:2.3rem;

}

.medical-dashboard-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.medical-dashboard-grid{

gap:18px;

}

.dashboard-panel{

padding:25px;

border-radius:22px;

min-height:200px;

}

.panel-icon{

width:60px;

height:60px;

font-size:1.5rem;

margin-bottom:18px;

}

.dashboard-panel h3{

font-size:1.35rem;

margin-bottom:12px;

}

.dashboard-panel p{

font-size:.92rem;

line-height:1.7;

}

}

/* service section ends here */

/* medical section starts here */

/*==================================================
        MEDICAL MOLECULE SECTION
==================================================*/

.medical-molecule-section{

    position:relative;

    padding:130px 5%;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%
    );

}

.medical-molecule-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(90px);

}

.medical-molecule-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(90px);

}

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

.medical-molecule-section .section-heading{

    max-width:850px;

    margin:0 auto 90px;

    position:relative;

    z-index:5;

}

.medical-molecule-section .section-heading h2{

    color:#fff;

    font-size:3.3rem;

    margin:25px 0;

    line-height:1.2;

}

.medical-molecule-section .section-heading h2 span{

    color:#00BCD4;

}

.medical-molecule-section .section-heading p{

    color:#CBD5E1;

    font-size:1.05rem;

    line-height:2;

}

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

.molecule-health-layout{

    position:relative;

    width:900px;

    height:650px;

    margin:auto;

    z-index:5;

}

/*====================================
SVG LINES
====================================*/

.molecule-svg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

}

.molecule-svg line{

    stroke:#00BCD4;

    stroke-width:3;

    stroke-linecap:round;

    opacity:.28;

}

/*====================================
COMMON NODE
====================================*/

.molecule-node,

.molecule-core{

    position:absolute;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    text-decoration:none;

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

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

    backdrop-filter:blur(18px);

    border-radius:50%;

}

/*====================================
CENTER NODE
====================================*/

.molecule-core{

    width:170px;

    height:170px;

    left:50%;

    top:50%;

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

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

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

}

.molecule-core i{

    color:#fff;

    font-size:3rem;

    margin-bottom:15px;

}

.molecule-core h3{

    color:#fff;

    font-size:1.45rem;

}

/*====================================
OUTER NODES
====================================*/

.molecule-node{

    width:120px;

    height:120px;

}

.molecule-node i{

    color:#00BCD4;

    font-size:2rem;

    margin-bottom:12px;

}

.molecule-node span{

    color:#fff;

    font-size:.95rem;

    font-weight:600;

    line-height:1.4;

    padding:0 12px;

}

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

.molecule-vaccine{

    top:10px;

    left:50%;

    transform:translateX(-50%);

}

.molecule-nutrition{

    left:120px;

    top:180px;

}

.molecule-dental{

    right:120px;

    top:180px;

}

.molecule-diagnostics{

    left:170px;

    bottom:100px;

}

.molecule-prevention{

    right:170px;

    bottom:100px;

}

.molecule-community{

    left:50%;

    bottom:0;

    transform:translateX(-50%);

}

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

.medical-molecule-section h2 span{

    position:relative;

}

.medical-molecule-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    opacity:.35;

}

/* Part 2 */

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

.molecule-node,
.molecule-core{

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

}

.molecule-node:hover{

    transform:translateY(-10px) scale(1.05);

    border-color:rgba(0,188,212,.30);

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

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

}

.molecule-core:hover{

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

    box-shadow:
    0 0 35px rgba(0,188,212,.35),
    0 0 70px rgba(126,211,33,.15);

}

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

.molecule-node i,
.molecule-core i{

    transition:.4s;

}

.molecule-node:hover i{

    transform:rotate(-12deg) scale(1.18);

    color:#7ED321;

}

.molecule-core:hover i{

    transform:scale(1.12);

}

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

.molecule-node span{

    transition:.35s;

}

.molecule-node:hover span{

    color:#00BCD4;

}

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

.molecule-node::before,
.molecule-core::before{

    content:"";

    position:absolute;

    inset:-10px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    opacity:0;

    transition:.35s;

}

.molecule-node:hover::before{

    opacity:1;

    inset:-14px;

}

.molecule-core::before{

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

}

@keyframes medicalPulse{

    0%{

        transform:scale(.95);

        opacity:.7;

    }

    100%{

        transform:scale(1.15);

        opacity:0;

    }

}

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

.molecule-svg line{

    stroke-dasharray:10 10;

    animation:moleculeFlow 12s linear infinite;

}

@keyframes moleculeFlow{

    from{

        stroke-dashoffset:0;

    }

    to{

        stroke-dashoffset:-500;

    }

}

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

.molecule-vaccine{

    animation:moleculeFloat1 7s ease-in-out infinite;

}

.molecule-nutrition{

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

}

.molecule-dental{

    animation:moleculeFloat3 7.5s ease-in-out infinite;

}

.molecule-diagnostics{

    animation:moleculeFloat4 8.5s ease-in-out infinite;

}

.molecule-prevention{

    animation:moleculeFloat5 8s ease-in-out infinite;

}

.molecule-community{

    animation:moleculeFloat6 7s ease-in-out infinite;

}

@keyframes moleculeFloat1{

    50%{

        transform:translateX(-50%) translateY(-10px);

    }

}

@keyframes moleculeFloat2{

    50%{

        transform:translate(-8px,-8px);

    }

}

@keyframes moleculeFloat3{

    50%{

        transform:translate(8px,-8px);

    }

}

@keyframes moleculeFloat4{

    50%{

        transform:translate(-8px,8px);

    }

}

@keyframes moleculeFloat5{

    50%{

        transform:translate(8px,8px);

    }

}

@keyframes moleculeFloat6{

    50%{

        transform:translateX(-50%) translateY(10px);

    }

}

/*==================================================
        SECTION TAG
==================================================*/

.medical-molecule-section .section-tag{

    transition:.35s;

}

.medical-molecule-section .section-tag:hover{

    background:#00BCD4;

    color:#fff;

}

/*==================================================
        RESPONSIVE
==================================================*/

@media(max-width:992px){

.molecule-health-layout{

width:650px;

height:580px;

}

.molecule-core{

width:140px;

height:140px;

}

.molecule-core i{

font-size:2.4rem;

}

.molecule-core h3{

font-size:1.2rem;

}

.molecule-node{

width:95px;

height:95px;

}

.molecule-node i{

font-size:1.5rem;

margin-bottom:8px;

}

.molecule-node span{

font-size:.78rem;

padding:0 8px;

}

.molecule-nutrition{

left:40px;

}

.molecule-dental{

right:40px;

}

.molecule-diagnostics{

left:90px;

}

.molecule-prevention{

right:90px;

}

}

@media(max-width:768px){

.medical-molecule-section{

padding:90px 5%;

}

.medical-molecule-section .section-heading{

margin-bottom:60px;

}

.medical-molecule-section .section-heading h2{

font-size:2.3rem;

}

.medical-molecule-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

/* Mobile Layout */

.molecule-health-layout{

width:100%;

height:auto;

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

justify-items:center;

}

.molecule-svg{

display:none;

}

.molecule-core{

position:relative;

left:auto;

top:auto;

transform:none !important;

width:170px;

height:170px;

grid-column:1 / span 2;

margin-bottom:10px;

}

.molecule-node{

position:relative;

left:auto !important;

right:auto !important;

top:auto !important;

bottom:auto !important;

transform:none !important;

width:130px;

height:130px;

}

.molecule-node i{

font-size:1.7rem;

}

.molecule-node span{

font-size:.9rem;

}

}

/* medical section ends here */

/* impact section starts here */

/*==================================================
        HEALTHCARE IMPACT SECTION
==================================================*/

.health-impact-editorial{

    position:relative;

    padding:130px 5%;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%
    );

}

.health-impact-editorial::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(90px);

}

.health-impact-editorial::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(90px);

}

/*====================================
SECTION HEADING
====================================*/

.health-impact-editorial .section-heading{

    max-width:850px;

    margin:0 auto 90px;

    position:relative;

    z-index:5;

}

.health-impact-editorial .section-heading h2{

    color:#fff;

    font-size:3.3rem;

    line-height:1.2;

    margin:25px 0;

}

.health-impact-editorial .section-heading h2 span{

    color:#00BCD4;

}

.health-impact-editorial .section-heading p{

    color:#CBD5E1;

    font-size:1.05rem;

    line-height:2;

}

/*====================================
EDITORIAL GRID
====================================*/

.impact-editorial-grid{

    position:relative;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:60px;

    max-width:1400px;

    margin:auto;

    z-index:5;

}

/*====================================
ITEM
====================================*/

.impact-editorial-item{

    text-align:center;

    position:relative;

}

/*====================================
NUMBER
====================================*/

.impact-number{

    font-size:5rem;

    line-height:1;

    font-weight:700;

    color:#fff;

    margin-bottom:28px;

    letter-spacing:-2px;

}

/*====================================
DIVIDER
====================================*/

.impact-divider{

    display:block;

    width:110px;

    height:3px;

    margin:0 auto 28px;

    border-radius:20px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

}

/*====================================
TITLE
====================================*/

.impact-editorial-item h4{

    color:#CBD5E1;

    font-size:1.15rem;

    font-weight:500;

    line-height:1.7;

}

/*====================================
VERTICAL DIVIDERS
====================================*/

.impact-editorial-item:not(:last-child)::after{

    content:"";

    position:absolute;

    right:-30px;

    top:50%;

    transform:translateY(-50%);

    width:1px;

    height:180px;

    background:linear-gradient(

        transparent,

        rgba(255,255,255,.12),

        transparent

    );

}

/*====================================
HEADING UNDERLINE
====================================*/

.health-impact-editorial h2 span{

    position:relative;

}

.health-impact-editorial h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:30px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

/* Part 2 */

/*==================================================
        STATISTICS HOVER
==================================================*/

.impact-editorial-item{

    transition:transform .35s ease;

}

.impact-editorial-item:hover{

    transform:translateY(-8px);

}

/*==================================================
        NUMBER
==================================================*/

.impact-number{

    transition:

    color .35s ease,

    text-shadow .35s ease,

    transform .35s ease;

}

.impact-editorial-item:hover .impact-number{

    color:#00BCD4;

    transform:scale(1.05);

    text-shadow:

    0 0 18px rgba(0,188,212,.30);

}

/*==================================================
        DIVIDER
==================================================*/

.impact-divider{

    transition:

    width .35s ease,

    box-shadow .35s ease;

}

.impact-editorial-item:hover .impact-divider{

    width:140px;

    box-shadow:

    0 0 12px rgba(0,188,212,.30);

}

/*==================================================
        TITLE
==================================================*/

.impact-editorial-item h4{

    transition:.35s;

}

.impact-editorial-item:hover h4{

    color:#fff;

}

/*==================================================
        VERTICAL LINE
==================================================*/

.impact-editorial-item::after{

    transition:.35s;

}

.impact-editorial-item:hover::after{

    background:linear-gradient(

        transparent,

        rgba(0,188,212,.45),

        transparent

    );

}

/*==================================================
        COUNT-UP EFFECT
==================================================*/

.impact-number{

    animation:impactFade 1s ease;

}

@keyframes impactFade{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
        SECTION TAG
==================================================*/

.health-impact-editorial .section-tag{

    transition:.35s;

}

.health-impact-editorial .section-tag:hover{

    background:#00BCD4;

    color:#fff;

}

/*==================================================
        RESPONSIVE
==================================================*/

@media(max-width:992px){

.impact-editorial-grid{

grid-template-columns:repeat(2,1fr);

gap:50px 35px;

}

.impact-editorial-item:nth-child(2)::after{

display:none;

}

.impact-number{

font-size:4rem;

}

}

@media(max-width:768px){

.health-impact-editorial{

padding:90px 5%;

}

.health-impact-editorial .section-heading{

margin-bottom:60px;

}

.health-impact-editorial .section-heading h2{

font-size:2.3rem;

}

.health-impact-editorial .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.impact-editorial-grid{

grid-template-columns:1fr;

gap:40px;

}

.impact-editorial-item::after{

display:none;

}

.impact-number{

font-size:3.5rem;

}

.impact-divider{

width:90px;

margin-bottom:20px;

}

.impact-editorial-item h4{

font-size:1rem;

}

}

/* impact section ends here */

/* programs section starts here */

/*==================================================
        PRESCRIPTION SHEET SECTION
==================================================*/

.prescription-sheet-section{

    position:relative;

    padding:130px 5%;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%
    );

}

.prescription-sheet-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(90px);

}

.prescription-sheet-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(90px);

}

/*====================================
SECTION HEADING
====================================*/

.prescription-sheet-section .section-heading{

    max-width:850px;

    margin:0 auto 90px;

    position:relative;

    z-index:5;

}

.prescription-sheet-section .section-heading h2{

    color:#fff;

    font-size:3.3rem;

    margin:25px 0;

    line-height:1.2;

}

.prescription-sheet-section .section-heading h2 span{

    color:#00BCD4;

}

.prescription-sheet-section .section-heading p{

    color:#CBD5E1;

    font-size:1.05rem;

    line-height:2;

}

/*====================================
PRESCRIPTION SHEET
====================================*/

.prescription-sheet{

    position:relative;

    max-width:950px;

    margin:auto;

    padding:45px 50px;

    border-radius:24px;

    background:#F8FAFC;

    color:#0F172A;

    overflow:hidden;

    box-shadow:

    0 25px 60px rgba(0,0,0,.25);

    z-index:5;

}

/*====================================
PAPER LINES
====================================*/

.prescription-sheet::before{

    content:"";

    position:absolute;

    inset:0;

    background:repeating-linear-gradient(

        to bottom,

        transparent 0,

        transparent 38px,

        rgba(148,163,184,.18) 39px,

        transparent 40px

    );

    pointer-events:none;

}

/*====================================
LEFT RED MARGIN
====================================*/

.prescription-sheet::after{

    content:"";

    position:absolute;

    left:65px;

    top:0;

    bottom:0;

    width:2px;

    background:#EF4444;

    opacity:.35;

}

/*====================================
HEADER
====================================*/

.prescription-header{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    padding-bottom:25px;

    margin-bottom:35px;

    border-bottom:2px dashed rgba(15,23,42,.15);

    z-index:2;

}

.prescription-header h3{

    font-size:2rem;

    color:#0F172A;

    margin-bottom:8px;

}

.prescription-header span{

    color:#475569;

}

.prescription-date{

    text-align:right;

}

.prescription-date strong{

    display:block;

    color:#0F172A;

    margin-bottom:6px;

}

.prescription-date span{

    color:#475569;

}

/*====================================
LIST
====================================*/

.prescription-list{

    position:relative;

    z-index:2;

}

.prescription-item{

    display:flex;

    align-items:center;

    gap:22px;

    min-height:58px;

    padding-left:25px;

}

.rx-mark{

    color:#00BCD4;

    font-size:2rem;

    font-weight:700;

    min-width:34px;

}

.prescription-item span:last-child{

    font-size:1.1rem;

    color:#1E293B;

    font-weight:500;

}

/*====================================
FOOTER
====================================*/

.prescription-footer{

    position:relative;

    margin-top:50px;

    display:flex;

    justify-content:flex-end;

    z-index:2;

}

.doctor-signature{

    width:260px;

    text-align:center;

}

.signature-line{

    display:block;

    width:100%;

    height:2px;

    margin-bottom:10px;

    background:#0F172A;

}

.doctor-signature p{

    color:#475569;

    font-size:.95rem;

}

/*====================================
HEADING UNDERLINE
====================================*/

.prescription-sheet-section h2 span{

    position:relative;

}

.prescription-sheet-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:20px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

/* Part 2 */

/*==================================================
        PAPER HOVER
==================================================*/

.prescription-sheet{

    transition:

    transform .45s ease,

    box-shadow .45s ease;

}

.prescription-sheet:hover{

    transform:translateY(-10px);

    box-shadow:

    0 35px 80px rgba(0,0,0,.30);

}

/*==================================================
        HEADER
==================================================*/

.prescription-header{

    transition:.35s;

}

.prescription-sheet:hover .prescription-header h3{

    color:#00BCD4;

}

/*==================================================
        PRESCRIPTION ITEM
==================================================*/

.prescription-item{

    position:relative;

    transition:

    padding-left .35s ease,

    background .35s ease;

}

.prescription-item::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:2px;

    border-radius:20px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    transition:.45s;

}

.prescription-item:hover{

    padding-left:35px;

    background:rgba(0,188,212,.04);

}

.prescription-item:hover::after{

    width:100%;

}

/*==================================================
        RX ANIMATION
==================================================*/

.rx-mark{

    transition:

    transform .35s,

    color .35s;

    animation:rxPulse 2.5s infinite;

}

@keyframes rxPulse{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.15);

    }

}

.prescription-item:hover .rx-mark{

    color:#7ED321;

    transform:rotate(-10deg) scale(1.2);

}

/*==================================================
        TEXT
==================================================*/

.prescription-item span:last-child{

    transition:.35s;

}

.prescription-item:hover span:last-child{

    color:#00BCD4;

}

/*==================================================
        SIGNATURE
==================================================*/

.signature-line{

    position:relative;

    overflow:hidden;

}

.signature-line::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(0,188,212,.6),

        transparent

    );

    transition:.8s;

}

.prescription-sheet:hover .signature-line::after{

    left:150%;

}

/*==================================================
        PAPER SHINE
==================================================*/

.prescription-sheet{

    overflow:hidden;

}

.prescription-sheet .prescription-header::before{

    content:"";

    position:absolute;

    top:-20px;

    left:-120%;

    width:40%;

    height:220%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transform:skewX(-25deg);

    transition:1s;

}

.prescription-sheet:hover .prescription-header::before{

    left:150%;

}

/*==================================================
        SECTION TAG
==================================================*/

.prescription-sheet-section .section-tag{

    transition:.35s;

}

.prescription-sheet-section .section-tag:hover{

    background:#00BCD4;

    color:#fff;

}

/*==================================================
        RESPONSIVE
==================================================*/

@media(max-width:992px){

.prescription-sheet{

padding:40px 35px;

}

.prescription-header{

flex-direction:column;

gap:20px;

}

.prescription-date{

text-align:left;

}

}

@media(max-width:768px){

.prescription-sheet-section{

padding:90px 5%;

}

.prescription-sheet-section .section-heading{

margin-bottom:60px;

}

.prescription-sheet-section .section-heading h2{

font-size:2.3rem;

}

.prescription-sheet-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.prescription-sheet{

padding:30px 20px;

border-radius:18px;

}

.prescription-sheet::after{

left:35px;

}

.prescription-header h3{

font-size:1.5rem;

}

.prescription-item{

gap:14px;

padding-left:15px;

min-height:52px;

}

.rx-mark{

font-size:1.6rem;

min-width:24px;

}

.prescription-item span:last-child{

font-size:.95rem;

}

.doctor-signature{

width:100%;

}

}

/* programs section ends here */

/* faq section starts here */

/*==================================================
        MEDICAL FAQ SECTION
==================================================*/

.medical-faq-section{

    position:relative;

    padding:130px 5%;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%
    );

}

.medical-faq-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    left:-180px;

    top:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(90px);

}

.medical-faq-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(90px);

}

/*====================================
SECTION HEADING
====================================*/

.medical-faq-section .section-heading{

    max-width:850px;

    margin:0 auto 90px;

    position:relative;

    z-index:5;

}

.medical-faq-section .section-heading h2{

    color:#fff;

    font-size:3.3rem;

    line-height:1.2;

    margin:25px 0;

}

.medical-faq-section .section-heading h2 span{

    color:#00BCD4;

}

.medical-faq-section .section-heading p{

    color:#CBD5E1;

    font-size:1.05rem;

    line-height:2;

}

/*====================================
FAQ WRAPPER
====================================*/

.medical-faq-wrapper{

    max-width:950px;

    margin:auto;

    position:relative;

    z-index:5;

}

/*====================================
FAQ ITEM
====================================*/

.medical-faq-item{

    position:relative;

    border-bottom:1px solid rgba(255,255,255,.08);

}

/*====================================
LEFT HEARTBEAT INDICATOR
====================================*/

.medical-faq-item::before{

    content:"";

    position:absolute;

    left:0;

    top:28px;

    width:4px;

    height:42px;

    border-radius:20px;

    background:linear-gradient(

        180deg,

        #00BCD4,

        #7ED321

    );

    transition:.35s;

}

/*====================================
QUESTION
====================================*/

.medical-faq-question{

    width:100%;

    border:none;

    background:none;

    color:#fff;

    display:flex;

    align-items:center;

    gap:22px;

    padding:28px 20px 28px 28px;

    cursor:pointer;

    text-align:left;

}

/*====================================
HEART
====================================*/

.medical-faq-icon{

    width:56px;

    height:56px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(12px);

    color:#00BCD4;

    flex-shrink:0;

}

.medical-faq-icon i{

    font-size:1.2rem;

}

/*====================================
QUESTION TEXT
====================================*/

.medical-faq-question span{

    color:#fff;

    font-size:1.1rem;

    font-weight:600;

    line-height:1.6;

}

/*====================================
ANSWER
====================================*/

.medical-faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .45s ease;

}

.medical-faq-answer p{

    color:#CBD5E1;

    line-height:2;

    padding:0 20px 30px 106px;

    font-size:.98rem;

}

/*====================================
HEADING UNDERLINE
====================================*/

.medical-faq-section h2 span{

    position:relative;

}

.medical-faq-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:30px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

/* Part 2 */

/*==================================================
        FAQ HOVER
==================================================*/

.medical-faq-item{

    transition:

    border-color .35s ease,

    background .35s ease;

}

.medical-faq-item:hover{

    border-color:rgba(0,188,212,.20);

}

.medical-faq-item:hover::before{

    height:70px;

    background:linear-gradient(

        180deg,

        #7ED321,

        #00BCD4

    );

}

/*==================================================
        HEART ICON
==================================================*/

.medical-faq-icon{

    transition:

    transform .35s,

    box-shadow .35s,

    border-color .35s,

    background .35s;

}

.medical-faq-icon i{

    transition:.35s;

    animation:medicalHeartBeat 2s infinite;

}

@keyframes medicalHeartBeat{

    0%,100%{

        transform:scale(1);

    }

    20%{

        transform:scale(1.15);

    }

    40%{

        transform:scale(.92);

    }

    60%{

        transform:scale(1.08);

    }

}

.medical-faq-item:hover .medical-faq-icon{

    border-color:rgba(0,188,212,.30);

    box-shadow:

    0 0 25px rgba(0,188,212,.18);

}

.medical-faq-item:hover .medical-faq-icon i{

    color:#7ED321;

}

/*==================================================
        ACTIVE FAQ
==================================================*/

.medical-faq-item.active::before{

    top:0;

    height:100%;

    border-radius:0;

}

.medical-faq-item.active .medical-faq-icon{

    background:linear-gradient(

        135deg,

        #00BCD4,

        #7ED321

    );

}

.medical-faq-item.active .medical-faq-icon i{

    color:#fff;

}

/*==================================================
        QUESTION
==================================================*/

.medical-faq-question{

    transition:.35s;

}

.medical-faq-item:hover .medical-faq-question{

    padding-left:36px;

}

.medical-faq-question span{

    transition:.35s;

}

.medical-faq-item:hover .medical-faq-question span,

.medical-faq-item.active .medical-faq-question span{

    color:#00BCD4;

}

/*==================================================
        ANSWER
==================================================*/

.medical-faq-answer{

    opacity:0;

    transition:

    max-height .45s ease,

    opacity .35s ease;

}

.medical-faq-item.active .medical-faq-answer{

    opacity:1;

}

/*==================================================
        SECTION TAG
==================================================*/

.medical-faq-section .section-tag{

    transition:.35s;

}

.medical-faq-section .section-tag:hover{

    background:#00BCD4;

    color:#fff;

}

/*==================================================
        RESPONSIVE
==================================================*/

@media(max-width:768px){

.medical-faq-section{

padding:90px 5%;

}

.medical-faq-section .section-heading{

margin-bottom:60px;

}

.medical-faq-section .section-heading h2{

font-size:2.3rem;

}

.medical-faq-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.medical-faq-question{

padding:22px 15px 22px 22px;

gap:15px;

}

.medical-faq-item:hover .medical-faq-question{

padding-left:26px;

}

.medical-faq-icon{

width:48px;

height:48px;

}

.medical-faq-icon i{

font-size:1rem;

}

.medical-faq-question span{

font-size:1rem;

}

.medical-faq-answer p{

padding:0 15px 24px 85px;

font-size:.92rem;

line-height:1.8;

}

.medical-faq-item::before{

top:22px;

height:34px;

}

}


/* faq section ends here */

/* cta section starts here */

/*==================================================
        HEALTHCARE CTA SECTION
==================================================*/

.healthcare-cta-section{

    position:relative;

    min-height:720px;

    display:flex;

    align-items:flex-end;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 45%,
        #050816 100%
    );

}

/*====================================
BACKGROUND BLUE GLOW
====================================*/

.medical-blue-glow{

    position:absolute;

    inset:0;

    background:

    radial-gradient(
        circle at 50% 70%,
        rgba(0,188,212,.18),
        transparent 45%
    ),

    radial-gradient(
        circle at 20% 30%,
        rgba(126,211,33,.05),
        transparent 35%
    ),

    radial-gradient(
        circle at 80% 20%,
        rgba(0,188,212,.08),
        transparent 35%
    );

    z-index:1;

}

/*====================================
HOSPITAL SKYLINE
====================================*/

.hospital-skyline{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:290px;

    display:flex;

    align-items:flex-end;

    justify-content:space-evenly;

    z-index:2;

}

.hospital-building{

    position:relative;

    background:#0A162A;

    border-top:2px solid rgba(0,188,212,.08);

}

/*====================================
BUILDINGS
====================================*/

.building-one{

    width:180px;

    height:180px;

}

.building-two{

    width:220px;

    height:250px;

}

.building-three{

    width:280px;

    height:290px;

}

.building-four{

    width:210px;

    height:230px;

}

.building-five{

    width:170px;

    height:170px;

}

/*====================================
HOSPITAL WINDOWS
====================================*/

.hospital-building::before{

    content:"";

    position:absolute;

    inset:18px;

    background:

    repeating-linear-gradient(

        to right,

        rgba(0,188,212,.15) 0 12px,

        transparent 12px 28px

    ),

    repeating-linear-gradient(

        to bottom,

        rgba(0,188,212,.18) 0 12px,

        transparent 12px 28px

    );

    opacity:.45;

}

/*====================================
MEDICAL CROSS
====================================*/

.building-three::after{

    content:"+";

    position:absolute;

    top:25px;

    left:50%;

    transform:translateX(-50%);

    width:60px;

    height:60px;

    border-radius:50%;

    background:#00BCD4;

    color:#fff;

    font-size:2rem;

    font-weight:700;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:

    0 0 30px rgba(0,188,212,.35);

}

/*====================================
FLOATING ICONS
====================================*/

.medical-plus{

    position:absolute;

    color:rgba(0,188,212,.28);

    z-index:3;

    font-size:2rem;

}

.plus-one{

    left:12%;

    top:22%;

}

.plus-two{

    right:14%;

    top:32%;

}

.plus-three{

    right:25%;

    top:18%;

}

/*====================================
CONTENT
====================================*/

.healthcare-cta-content{

    position:relative;

    z-index:5;

    max-width:860px;

    margin:0 auto 70px;

    text-align:center;

}

.healthcare-cta-content h2{

    color:#fff;

    font-size:4rem;

    line-height:1.15;

    margin:25px 0;

}

.healthcare-cta-content h2 span{

    color:#00BCD4;

}

.healthcare-cta-content p{

    max-width:720px;

    margin:auto;

    color:#CBD5E1;

    font-size:1.05rem;

    line-height:2;

}

/*====================================
BUTTONS
====================================*/

.healthcare-cta-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

    margin-top:45px;

}

.healthcare-cta-buttons a{

    min-width:220px;

    padding:18px 34px;

    border-radius:60px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.health-btn-primary{

    background:linear-gradient(

        135deg,

        #00BCD4,

        #7ED321

    );

    color:#fff;

}

.health-btn-secondary{

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(15px);

    color:#fff;

}

.health-btn-outline{

    border:1px solid rgba(0,188,212,.35);

    color:#00BCD4;

    background:transparent;

}

/*====================================
HEADING UNDERLINE
====================================*/

.healthcare-cta-content h2 span{

    position:relative;

}

.healthcare-cta-content h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:30px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

/* Part - 2 */

/*==================================================
        CONTENT
==================================================*/

.healthcare-cta-content{

    animation:ctaFadeUp 1.2s ease;

}

@keyframes ctaFadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
        BLUE GLOW
==================================================*/

.medical-blue-glow{

    animation:medicalGlow 8s ease-in-out infinite;

}

@keyframes medicalGlow{

    0%,100%{

        opacity:.7;

    }

    50%{

        opacity:1;

    }

}

/*==================================================
        HOSPITAL WINDOWS
==================================================*/

.hospital-building::before{

    animation:windowLights 4s ease-in-out infinite;

}

.building-two::before{

    animation-delay:1s;

}

.building-three::before{

    animation-delay:2s;

}

.building-four::before{

    animation-delay:3s;

}

@keyframes windowLights{

    0%,100%{

        opacity:.20;

    }

    50%{

        opacity:.55;

    }

}

/*==================================================
        MEDICAL CROSS
==================================================*/

.building-three::after{

    animation:crossPulse 2s ease-in-out infinite;

}

@keyframes crossPulse{

    0%,100%{

        transform:translateX(-50%) scale(1);

        box-shadow:

        0 0 20px rgba(0,188,212,.30);

    }

    50%{

        transform:translateX(-50%) scale(1.12);

        box-shadow:

        0 0 40px rgba(0,188,212,.55);

    }

}

/*==================================================
        FLOATING MEDICAL ICONS
==================================================*/

.medical-plus{

    animation:medicalFloat 8s ease-in-out infinite;

}

.plus-two{

    animation-delay:2s;

}

.plus-three{

    animation-delay:4s;

}

@keyframes medicalFloat{

    0%,100%{

        transform:translateY(0) rotate(0deg);

        opacity:.18;

    }

    50%{

        transform:translateY(-25px) rotate(10deg);

        opacity:.45;

    }

}

/*==================================================
        CTA BUTTONS
==================================================*/

.healthcare-cta-buttons a{

    position:relative;

    overflow:hidden;

}

.healthcare-cta-buttons a::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:55%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.healthcare-cta-buttons a:hover::before{

    left:160%;

}

.health-btn-primary:hover{

    transform:translateY(-8px);

    box-shadow:

    0 20px 45px rgba(0,188,212,.30);

}

.health-btn-secondary:hover{

    transform:translateY(-8px);

    background:rgba(255,255,255,.12);

    border-color:#00BCD4;

}

.health-btn-outline:hover{

    transform:translateY(-8px);

    background:#00BCD4;

    border-color:#00BCD4;

    color:#fff;

}

/*==================================================
        BUTTON ICON EFFECT
==================================================*/

.healthcare-cta-buttons a{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

}

.healthcare-cta-buttons a:hover{

    letter-spacing:.3px;

}

/*==================================================
        SECTION TAG
==================================================*/

.healthcare-cta-section .section-tag{

    transition:.35s;

}

.healthcare-cta-section .section-tag:hover{

    background:#00BCD4;

    color:#fff;

}

/*==================================================
        RESPONSIVE
==================================================*/

@media(max-width:992px){

.healthcare-cta-section{

min-height:640px;

}

.healthcare-cta-content h2{

font-size:3rem;

}

.hospital-skyline{

height:220px;

}

.building-one{

width:120px;

height:120px;

}

.building-two{

width:150px;

height:180px;

}

.building-three{

width:190px;

height:220px;

}

.building-four{

width:150px;

height:170px;

}

.building-five{

width:120px;

height:120px;

}

}

@media(max-width:768px){

.healthcare-cta-section{

min-height:560px;

padding:90px 5% 40px;

}

.healthcare-cta-content{

margin-bottom:40px;

}

.healthcare-cta-content h2{

font-size:2.3rem;

}

.healthcare-cta-content p{

font-size:.95rem;

line-height:1.8;

}

.healthcare-cta-buttons{

flex-direction:column;

align-items:center;

gap:15px;

}

.healthcare-cta-buttons a{

width:100%;

max-width:320px;

padding:16px 24px;

}

.medical-plus{

display:none;

}

.hospital-skyline{

height:160px;

}

.building-one{

width:70px;

height:80px;

}

.building-two{

width:90px;

height:120px;

}

.building-three{

width:110px;

height:150px;

}

.building-four{

width:90px;

height:115px;

}

.building-five{

width:70px;

height:80px;

}

.building-three::after{

width:40px;

height:40px;

font-size:1.4rem;

}

}

/* cta section ends here */

/* Healthcare services page ends here */

/* Holistic Development & Spiritual Development Page Starts Here */

/* Hero Section Starts Here */

/*==================================================
        SPIRITUAL HERO SECTION
==================================================*/

.spiritual-hero-section{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    padding:180px 5% 120px;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

/*====================================
BACKGROUND GLOW
====================================*/

.spiritual-hero-section::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    left:50%;

    bottom:-330px;

    transform:translateX(-50%);

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(244,197,66,.22) 0%,

        rgba(0,188,212,.12) 45%,

        transparent 75%

    );

    filter:blur(40px);

}

.spiritual-hero-section::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at top,
    rgba(255,255,255,.03),
    transparent 60%);

}

/*====================================
SACRED AURA
====================================*/

.sacred-aura{

    position:absolute;

    width:500px;

    height:500px;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:

    0 0 60px rgba(244,197,66,.15),

    inset 0 0 60px rgba(0,188,212,.08);

    z-index:1;

}

.sacred-aura::before{

    content:"";

    position:absolute;

    inset:40px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.06);

}

.sacred-aura::after{

    content:"";

    position:absolute;

    inset:80px;

    border-radius:50%;

    border:1px dashed rgba(126,211,33,.18);

}

/*====================================
RISING SUN
====================================*/

.sunrise-circle{

    position:absolute;

    left:50%;

    bottom:-180px;

    transform:translateX(-50%);

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        #F4C542 0%,

        rgba(244,197,66,.85) 30%,

        rgba(0,188,212,.18) 65%,

        transparent 100%

    );

    filter:blur(6px);

    z-index:1;

}

/*====================================
CONTENT
====================================*/

.spiritual-hero-content{

    position:relative;

    max-width:920px;

    margin:auto;

    text-align:center;

    z-index:5;

}

.hero-mini-title{

    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:#7ED321;

    font-size:.9rem;

    letter-spacing:2px;

    margin-bottom:35px;

}

.spiritual-hero-content h1{

    color:#fff;

    font-size:4.5rem;

    line-height:1.15;

    margin-bottom:30px;

}

.spiritual-hero-content h1 span{

    display:block;

    color:#00BCD4;

}

.spiritual-hero-content p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    font-size:1.15rem;

    line-height:2;

}

/*====================================
TAGS
====================================*/

.hero-spiritual-tags{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

    margin-top:45px;

}

.hero-spiritual-tags span{

    padding:14px 24px;

    border-radius:50px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:#fff;

    backdrop-filter:blur(12px);

}

/*====================================
LOTUS PETALS
====================================*/

.lotus-petal{

    position:absolute;

    font-size:2rem;

    z-index:3;

    opacity:.75;

}

.lotus-one{

    left:12%;

    top:25%;

}

.lotus-two{

    right:15%;

    top:20%;

}

.lotus-three{

    left:18%;

    bottom:22%;

}

.lotus-four{

    right:12%;

    bottom:18%;

}

/*====================================
PARTICLES
====================================*/

.spiritual-particles{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.spiritual-particles span{

    position:absolute;

    width:6px;

    height:6px;

    border-radius:50%;

    background:#F4C542;

    box-shadow:

    0 0 15px rgba(244,197,66,.5);

}

.spiritual-particles span:nth-child(1){

    left:20%;

    top:18%;

}

.spiritual-particles span:nth-child(2){

    left:35%;

    top:28%;

}

.spiritual-particles span:nth-child(3){

    right:25%;

    top:22%;

}

.spiritual-particles span:nth-child(4){

    right:18%;

    bottom:28%;

}

.spiritual-particles span:nth-child(5){

    left:28%;

    bottom:20%;

}

.spiritual-particles span:nth-child(6){

    left:50%;

    top:12%;

}

/*====================================
BREADCRUMB
====================================*/

.spiritual-breadcrumb{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    margin-bottom:70px;

    position:relative;

    z-index:5;

}

.spiritual-breadcrumb a{

    color:#CBD5E1;

    text-decoration:none;

    transition:.35s;

}

.spiritual-breadcrumb a:hover{

    color:#00BCD4;

}

.spiritual-breadcrumb i{

    color:#7ED321;

    font-size:.8rem;

}

.spiritual-breadcrumb span{

    color:#7ED321;

    font-size:.95rem;

}

/*====================================
SCROLL
====================================*/

.hero-scroll{

    position:absolute;

    left:50%;

    bottom:40px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    color:#CBD5E1;

    z-index:5;

}

.hero-scroll i{

    color:#00BCD4;

    font-size:1.2rem;

}

/*====================================
HEADING UNDERLINE
====================================*/

.spiritual-hero-content h1 span{

    position:relative;

}

.spiritual-hero-content h1 span::after{

    content:"";

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    bottom:-10px;

    width:220px;

    height:3px;

    border-radius:20px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.4;

}

/* Part - 2  */

/*==================================================
        SACRED AURA ANIMATION
==================================================*/

.sacred-aura{

    animation:sacredBreath 8s ease-in-out infinite;

}

.sacred-aura::before{

    animation:innerAura 6s linear infinite;

}

.sacred-aura::after{

    animation:outerAura 30s linear infinite;

}

@keyframes sacredBreath{

    0%,100%{

        transform:translate(-50%,-50%) scale(1);

        box-shadow:

        0 0 60px rgba(244,197,66,.15),

        inset 0 0 60px rgba(0,188,212,.08);

    }

    50%{

        transform:translate(-50%,-50%) scale(1.05);

        box-shadow:

        0 0 100px rgba(244,197,66,.28),

        inset 0 0 80px rgba(0,188,212,.15);

    }

}

@keyframes innerAura{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes outerAura{

    from{

        transform:rotate(360deg);

    }

    to{

        transform:rotate(0deg);

    }

}

/*==================================================
        SUNRISE
==================================================*/

.sunrise-circle{

    animation:sunGlow 7s ease-in-out infinite;

}

@keyframes sunGlow{

    0%,100%{

        transform:translateX(-50%) scale(1);

        filter:blur(6px);

    }

    50%{

        transform:translateX(-50%) scale(1.08);

        filter:blur(2px);

    }

}

/*==================================================
        LOTUS PETALS
==================================================*/

.lotus-petal{

    animation:lotusFloat 10s ease-in-out infinite;

}

.lotus-two{

    animation-delay:2s;

}

.lotus-three{

    animation-delay:4s;

}

.lotus-four{

    animation-delay:6s;

}

@keyframes lotusFloat{

    0%,100%{

        transform:translateY(0) rotate(0deg);

        opacity:.75;

    }

    50%{

        transform:translateY(-18px) rotate(8deg);

        opacity:1;

    }

}

/*==================================================
        PARTICLES
==================================================*/

.spiritual-particles span{

    animation:particleRise 8s linear infinite;

}

.spiritual-particles span:nth-child(2){

    animation-delay:1s;

}

.spiritual-particles span:nth-child(3){

    animation-delay:2s;

}

.spiritual-particles span:nth-child(4){

    animation-delay:3s;

}

.spiritual-particles span:nth-child(5){

    animation-delay:4s;

}

.spiritual-particles span:nth-child(6){

    animation-delay:5s;

}

@keyframes particleRise{

    0%{

        transform:translateY(20px);

        opacity:0;

    }

    40%{

        opacity:1;

    }

    100%{

        transform:translateY(-45px);

        opacity:0;

    }

}

/*==================================================
        HERO TAGS
==================================================*/

.hero-spiritual-tags span{

    transition:

    transform .35s,

    border-color .35s,

    box-shadow .35s,

    background .35s;

}

.hero-spiritual-tags span:hover{

    transform:translateY(-6px);

    border-color:rgba(0,188,212,.25);

    background:rgba(255,255,255,.08);

    box-shadow:

    0 15px 30px rgba(0,188,212,.12);

}

/*==================================================
        MINI TITLE
==================================================*/

.hero-mini-title{

    transition:.35s;

}

.hero-mini-title:hover{

    background:rgba(0,188,212,.12);

    color:#fff;

}

/*==================================================
        SCROLL
==================================================*/

.hero-scroll{

    animation:scrollMove 2.5s ease-in-out infinite;

}

@keyframes scrollMove{

    0%,100%{

        transform:translateX(-50%) translateY(0);

    }

    50%{

        transform:translateX(-50%) translateY(8px);

    }

}

/*==================================================
        SECTION TAG
==================================================*/

.spiritual-hero-section .section-tag{

    transition:.35s;

}

.spiritual-hero-section .section-tag:hover{

    background:#00BCD4;

    color:#fff;

}

/*==================================================
        RESPONSIVE
==================================================*/

@media(max-width:992px){

.spiritual-hero-content h1{

font-size:3.4rem;

}

.sacred-aura{

width:400px;

height:400px;

}

.sunrise-circle{

width:420px;

height:420px;

}

}

@media(max-width:768px){

.spiritual-hero-section{

min-height:100vh;

padding:150px 5% 100px;

}

.spiritual-breadcrumb{

flex-wrap:wrap;

gap:8px;

margin-bottom:50px;

}

.spiritual-hero-content h1{

font-size:2.4rem;

}

.spiritual-hero-content p{

font-size:.95rem;

line-height:1.8;

}

.hero-spiritual-tags{

gap:12px;

margin-top:35px;

}

.hero-spiritual-tags span{

padding:10px 18px;

font-size:.85rem;

}

.sacred-aura{

width:280px;

height:280px;

}

.sunrise-circle{

width:320px;

height:320px;

bottom:-120px;

}

.lotus-petal{

font-size:1.5rem;

}

.hero-scroll{

bottom:20px;

font-size:.85rem;

}

}

/* Hero Section Ends Here */

/* About Section Starts Here */

/*==================================================
        SPIRITUAL BOOK SECTION
==================================================*/

.spiritual-book-section{

    position:relative;

    padding:130px 5%;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%
    );

}

.spiritual-book-section::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    top:-220px;

    left:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(100px);

}

.spiritual-book-section::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(100px);

}

/*====================================
SECTION HEADING
====================================*/

.spiritual-book-section .section-heading{

    max-width:850px;

    margin:0 auto 90px;

    position:relative;

    z-index:5;

}

.spiritual-book-section .section-heading h2{

    color:#fff;

    font-size:3.3rem;

    margin:25px 0;

    line-height:1.2;

}

.spiritual-book-section .section-heading h2 span{

    color:#00BCD4;

}

.spiritual-book-section .section-heading p{

    color:#CBD5E1;

    line-height:2;

    font-size:1.05rem;

}

/*====================================
BOOK
====================================*/

.wisdom-book-wrapper{

    position:relative;

    display:grid;

    grid-template-columns:1fr 1fr;

    max-width:1200px;

    margin:auto;

    border-radius:24px;

    overflow:hidden;

    background:#F8FAFC;

    box-shadow:

    0 30px 70px rgba(0,0,0,.30);

    z-index:5;

}

/*====================================
BOOK PAGES
====================================*/

.wisdom-book-page{

    position:relative;

    min-height:620px;

    padding:50px;

    background:#F8FAFC;

}

/*====================================
LEFT PAGE
====================================*/

.left-page{

    display:flex;

    justify-content:center;

    align-items:center;

}

.left-page img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:18px;

}

/*====================================
CENTER FOLD
====================================*/

.book-center-fold{

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:36px;

    height:100%;

    background:linear-gradient(

        90deg,

        rgba(0,0,0,.10),

        rgba(255,255,255,.85),

        rgba(0,0,0,.10)

    );

    box-shadow:

    inset 0 0 25px rgba(0,0,0,.12);

    z-index:5;

}

/*====================================
RIGHT PAGE
====================================*/

.right-page{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.right-page h3{

    color:#0F172A;

    font-size:2.2rem;

    margin-bottom:25px;

}

.right-page p{

    color:#475569;

    font-size:1rem;

    line-height:2;

    margin-bottom:40px;

}

/*====================================
VALUES
====================================*/

.spiritual-values{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px;

}

.spiritual-value{

    display:flex;

    align-items:center;

    gap:16px;

    padding:18px 20px;

    border-radius:16px;

    background:#FFFFFF;

    border:1px solid rgba(15,23,42,.06);

    box-shadow:

    0 10px 25px rgba(15,23,42,.05);

}

.spiritual-value span{

    font-size:2rem;

    flex-shrink:0;

}

.spiritual-value h4{

    color:#0F172A;

    font-size:1rem;

    font-weight:600;

    margin:0;

}

/*====================================
PAGE SHADOWS
====================================*/

.left-page::before{

    content:"";

    position:absolute;

    top:0;

    right:0;

    width:40px;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(0,0,0,.05)

    );

}

.right-page::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:40px;

    height:100%;

    background:linear-gradient(

        90deg,

        rgba(0,0,0,.05),

        transparent

    );

}

/*====================================
HEADING UNDERLINE
====================================*/

.spiritual-book-section h2 span{

    position:relative;

}

.spiritual-book-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:20px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

/* Part-2 */

/*==================================================
        BOOK HOVER
==================================================*/

.wisdom-book-wrapper{

    transition:

    transform .45s ease,

    box-shadow .45s ease;

}

.wisdom-book-wrapper:hover{

    transform:translateY(-10px);

    box-shadow:

    0 45px 90px rgba(0,0,0,.35);

}

/*==================================================
        PAGE DEPTH
==================================================*/

.left-page,

.right-page{

    transition:

    transform .45s ease,

    background .35s ease;

}

.wisdom-book-wrapper:hover .left-page{

    transform:rotateY(-2deg);

}

.wisdom-book-wrapper:hover .right-page{

    transform:rotateY(2deg);

}

/*==================================================
        IMAGE
==================================================*/

.left-page img{

    transition:

    transform .6s ease,

    filter .6s ease;

}

.wisdom-book-wrapper:hover .left-page img{

    transform:scale(1.05);

    filter:brightness(1.05);

}

/*==================================================
        CENTER FOLD
==================================================*/

.book-center-fold{

    transition:.45s;

}

.wisdom-book-wrapper:hover .book-center-fold{

    width:42px;

    box-shadow:

    inset 0 0 35px rgba(0,0,0,.18),

    0 0 20px rgba(0,188,212,.10);

}

/*==================================================
        VALUE CARDS
==================================================*/

.spiritual-value{

    transition:

    transform .35s ease,

    box-shadow .35s ease,

    border-color .35s ease,

    background .35s ease;

}

.spiritual-value:hover{

    transform:translateY(-8px);

    border-color:rgba(0,188,212,.25);

    background:#FFFFFF;

    box-shadow:

    0 18px 35px rgba(0,188,212,.10);

}

/*==================================================
        VALUE ICON
==================================================*/

.spiritual-value span{

    transition:

    transform .35s ease;

}

.spiritual-value:hover span{

    transform:scale(1.15) rotate(-8deg);

}

/*==================================================
        VALUE TITLE
==================================================*/

.spiritual-value h4{

    transition:.35s;

}

.spiritual-value:hover h4{

    color:#00BCD4;

}

/*==================================================
        BOOK TITLE
==================================================*/

.right-page h3{

    transition:.35s;

}

.wisdom-book-wrapper:hover .right-page h3{

    color:#00BCD4;

}

/*==================================================
        PAPER SHINE
==================================================*/

.wisdom-book-wrapper{

    overflow:hidden;

}

.wisdom-book-wrapper::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:35%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.30),

        transparent

    );

    transform:skewX(-25deg);

    transition:1s;

    z-index:10;

}

.wisdom-book-wrapper:hover::after{

    left:150%;

}

/*==================================================
        SECTION TAG
==================================================*/

.spiritual-book-section .section-tag{

    transition:.35s;

}

.spiritual-book-section .section-tag:hover{

    background:#00BCD4;

    color:#fff;

}

/*==================================================
        RESPONSIVE
==================================================*/

@media(max-width:992px){

.wisdom-book-wrapper{

grid-template-columns:1fr;

}

.book-center-fold{

display:none;

}

.wisdom-book-page{

min-height:auto;

padding:40px;

}

.left-page{

min-height:380px;

}

.left-page::before,

.right-page::before{

display:none;

}

.right-page h3{

font-size:1.9rem;

}

.spiritual-values{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.spiritual-book-section{

padding:90px 5%;

}

.spiritual-book-section .section-heading{

margin-bottom:60px;

}

.spiritual-book-section .section-heading h2{

font-size:2.3rem;

}

.spiritual-book-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.wisdom-book-page{

padding:25px;

}

.left-page{

min-height:260px;

}

.right-page h3{

font-size:1.6rem;

margin-bottom:18px;

}

.right-page p{

font-size:.92rem;

line-height:1.8;

margin-bottom:30px;

}

.spiritual-values{

grid-template-columns:1fr;

gap:16px;

}

.spiritual-value{

padding:16px;

}

.spiritual-value span{

font-size:1.7rem;

}

.spiritual-value h4{

font-size:.95rem;

}

}

/* About Section Ends Here */

/* Journey Section Starts Here */

/*==================================================
        MOUNTAIN JOURNEY SECTION
==================================================*/

.mountain-journey-section{

    position:relative;

    padding:130px 5%;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%
    );

}

.mountain-journey-section::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    left:-220px;

    top:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(100px);

}

.mountain-journey-section::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(100px);

}

/*====================================
SECTION HEADING
====================================*/

.mountain-journey-section .section-heading{

    max-width:850px;

    margin:0 auto 90px;

    position:relative;

    z-index:5;

}

.mountain-journey-section .section-heading h2{

    color:#fff;

    font-size:3.3rem;

    margin:25px 0;

    line-height:1.2;

}

.mountain-journey-section .section-heading h2 span{

    color:#00BCD4;

}

.mountain-journey-section .section-heading p{

    color:#CBD5E1;

    font-size:1.05rem;

    line-height:2;

}

/*====================================
WRAPPER
====================================*/

.mountain-path-wrapper{

    position:relative;

    width:1000px;

    height:700px;

    max-width:100%;

    margin:auto;

    z-index:5;

}

/*====================================
MOUNTAIN
====================================*/

.mountain-shape{

    position:absolute;

    inset:0;

}

.mountain-svg{

    width:100%;

    height:100%;

}

.mountain-fill{

    fill:url(#mountainGradient);

}

.mountain-svg defs{

    display:none;

}

/* fallback */

.mountain-fill{

    fill:#112238;

}

.trail-line{

    fill:none;

    stroke:#F4C542;

    stroke-width:6;

    stroke-linecap:round;

    stroke-dasharray:12 10;

    opacity:.9;

}

/*====================================
PEAK GLOW
====================================*/

.mountain-peak-glow{

    position:absolute;

    top:40px;

    right:175px;

    width:220px;

    height:220px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(244,197,66,.35),

        transparent 70%

    );

    filter:blur(35px);

}

/*====================================
COMMON STEP
====================================*/

.journey-stop{

    position:absolute;

    display:flex;

    align-items:center;

    gap:15px;

    z-index:10;

}

.stop-dot{

    width:68px;

    height:68px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(

        135deg,

        #00BCD4,

        #7ED321

    );

    color:#fff;

    font-size:1.4rem;

    box-shadow:

    0 15px 30px rgba(0,188,212,.18);

}

.stop-dot.summit{

    background:linear-gradient(

        135deg,

        #F4C542,

        #00BCD4

    );

}

.journey-stop h4{

    color:#fff;

    font-size:1.1rem;

    font-weight:600;

    margin:0;

}

/*====================================
POSITIONS
====================================*/

.stop-one{

    left:180px;

    bottom:75px;

}

.stop-two{

    left:285px;

    bottom:165px;

}

.stop-three{

    left:405px;

    bottom:255px;

}

.stop-four{

    left:525px;

    bottom:355px;

}

.stop-five{

    left:640px;

    bottom:470px;

}

.stop-six{

    right:90px;

    top:70px;

}

/*====================================
CLOUDS
====================================*/

.mountain-cloud{

    position:absolute;

    width:140px;

    height:50px;

    background:rgba(255,255,255,.06);

    border-radius:60px;

    filter:blur(1px);

}

.mountain-cloud::before,

.mountain-cloud::after{

    content:"";

    position:absolute;

    background:rgba(255,255,255,.06);

    border-radius:50%;

}

.mountain-cloud::before{

    width:65px;

    height:65px;

    left:18px;

    top:-28px;

}

.mountain-cloud::after{

    width:55px;

    height:55px;

    right:18px;

    top:-20px;

}

.cloud-one{

    top:90px;

    left:90px;

}

.cloud-two{

    top:170px;

    right:120px;

}

.cloud-three{

    bottom:220px;

    left:70px;

}

/*====================================
UNDERLINE
====================================*/

.mountain-journey-section h2 span{

    position:relative;

}

.mountain-journey-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:20px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

/* Part - 2 */

/*==================================================
        MOUNTAIN HOVER
==================================================*/

.journey-stop{

    transition:transform .4s ease;

}

.journey-stop:hover{

    transform:translateY(-8px);

}

/*==================================================
        STEP DOT
==================================================*/

.stop-dot{

    transition:

    transform .35s ease,

    box-shadow .35s ease,

    background .35s ease;

}

.journey-stop:hover .stop-dot{

    transform:scale(1.12);

    box-shadow:

    0 0 25px rgba(0,188,212,.30),

    0 0 45px rgba(126,211,33,.18);

}

/*==================================================
        STEP TITLE
==================================================*/

.journey-stop h4{

    transition:.35s;

}

.journey-stop:hover h4{

    color:#00BCD4;

}

/*==================================================
        TRAIL
==================================================*/

.trail-line{

    animation:trailMove 12s linear infinite;

}

@keyframes trailMove{

    from{

        stroke-dashoffset:0;

    }

    to{

        stroke-dashoffset:-300;

    }

}

/*==================================================
        SUMMIT
==================================================*/

.stop-dot.summit{

    animation:summitGlow 2.5s ease-in-out infinite;

}

@keyframes summitGlow{

    0%,100%{

        transform:scale(1);

        box-shadow:

        0 0 20px rgba(244,197,66,.35);

    }

    50%{

        transform:scale(1.12);

        box-shadow:

        0 0 45px rgba(244,197,66,.60);

    }

}

/*==================================================
        SUNRISE
==================================================*/

.mountain-peak-glow{

    animation:sunriseGlow 6s ease-in-out infinite;

}

@keyframes sunriseGlow{

    0%,100%{

        opacity:.55;

        transform:scale(1);

    }

    50%{

        opacity:1;

        transform:scale(1.12);

    }

}

/*==================================================
        CLOUDS
==================================================*/

.cloud-one{

    animation:cloudMoveOne 16s ease-in-out infinite;

}

.cloud-two{

    animation:cloudMoveTwo 20s ease-in-out infinite;

}

.cloud-three{

    animation:cloudMoveThree 18s ease-in-out infinite;

}

@keyframes cloudMoveOne{

    50%{

        transform:translateX(35px);

    }

}

@keyframes cloudMoveTwo{

    50%{

        transform:translateX(-30px);

    }

}

@keyframes cloudMoveThree{

    50%{

        transform:translateX(25px);

    }

}

/*==================================================
        MOUNTAIN
==================================================*/

.mountain-shape{

    transition:transform .5s ease;

}

.mountain-path-wrapper:hover .mountain-shape{

    transform:scale(1.02);

}

/*==================================================
        SECTION TAG
==================================================*/

.mountain-journey-section .section-tag{

    transition:.35s;

}

.mountain-journey-section .section-tag:hover{

    background:#00BCD4;

    color:#fff;

}

/*==================================================
        RESPONSIVE
==================================================*/

@media(max-width:992px){

.mountain-path-wrapper{

height:620px;

}

.stop-dot{

width:58px;

height:58px;

font-size:1.2rem;

}

.journey-stop h4{

font-size:.95rem;

}

.stop-one{

left:90px;

bottom:70px;

}

.stop-two{

left:180px;

bottom:145px;

}

.stop-three{

left:290px;

bottom:225px;

}

.stop-four{

left:400px;

bottom:315px;

}

.stop-five{

left:520px;

bottom:410px;

}

.stop-six{

right:35px;

top:65px;

}

}

@media(max-width:768px){

.mountain-journey-section{

padding:90px 5%;

}

.mountain-journey-section .section-heading{

margin-bottom:60px;

}

.mountain-journey-section .section-heading h2{

font-size:2.3rem;

}

.mountain-journey-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

/* Mobile Timeline Layout */

.mountain-svg,

.mountain-cloud,

.mountain-peak-glow{

display:none;

}

.mountain-path-wrapper{

height:auto;

display:flex;

flex-direction:column;

gap:25px;

}

.journey-stop{

position:relative;

left:auto !important;

right:auto !important;

top:auto !important;

bottom:auto !important;

transform:none !important;

padding-left:20px;

}

.journey-stop::before{

content:"";

position:absolute;

left:32px;

top:65px;

width:3px;

height:40px;

background:linear-gradient(

180deg,

#00BCD4,

#7ED321

);

}

.journey-stop:last-child::before{

display:none;

}

.stop-dot{

width:60px;

height:60px;

font-size:1.2rem;

flex-shrink:0;

}

.journey-stop h4{

font-size:1rem;

}

}

/* Journey Section Ends Here */

/* Growth Section Starts Here */

/*==================================================
        LOTUS GROWTH SECTION
==================================================*/

.lotus-growth-section{

    position:relative;

    padding:130px 5%;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.lotus-growth-section::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    left:-220px;

    top:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(100px);

}

.lotus-growth-section::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(100px);

}

/*====================================
SECTION HEADING
====================================*/

.lotus-growth-section .section-heading{

    max-width:850px;

    margin:0 auto 90px;

    text-align:center;

    position:relative;

    z-index:5;

}

.lotus-growth-section .section-heading h2{

    color:#fff;

    font-size:3.3rem;

    margin:25px 0;

    line-height:1.2;

}

.lotus-growth-section .section-heading h2 span{

    color:#00BCD4;

}

.lotus-growth-section .section-heading p{

    color:#CBD5E1;

    line-height:2;

    font-size:1.05rem;

}

/*====================================
LOTUS WRAPPER
====================================*/

.lotus-wrapper{

    position:relative;

    width:900px;

    height:760px;

    margin:auto;

    max-width:100%;

    z-index:5;

}

/*====================================
CENTER
====================================*/

.lotus-center{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:180px;

    height:180px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    color:#fff;

    text-align:center;

    box-shadow:

    0 20px 50px rgba(0,188,212,.20);

}

.lotus-center i{

    font-size:2.8rem;

    margin-bottom:15px;

}

.lotus-center h3{

    font-size:1.4rem;

}

/*====================================
PETALS
====================================*/

.lotus-petall{

    position:absolute;

    width:180px;

    height:220px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:#fff;

    clip-path:polygon(
        50% 0%,
        92% 25%,
        100% 65%,
        50% 100%,
        0% 65%,
        8% 25%
    );

    box-shadow:

    0 15px 35px rgba(0,0,0,.20);

}

.lotus-petall i{

    font-size:2rem;

    color:#7ED321;

    margin-bottom:15px;

}

.lotus-petall h4{

    font-size:1.05rem;

    line-height:1.4;

}

/*====================================
POSITIONS
====================================*/

.lotus-top{

    left:50%;

    top:20px;

    transform:translateX(-50%) !important;

}

.lotus-left{

    left:180px;

    top:180px;

    transform:rotate(-25deg);

}

.lotus-right{

    right:180px;

    top:180px;

    transform:rotate(25deg);

}

.lotus-bottom-left{

    left:210px;

    bottom:120px;

    transform:rotate(-12deg);

}

.lotus-bottom-right{

    right:210px;

    bottom:120px;

    transform:rotate(12deg);

}

/*====================================
BOTTOM PETAL
====================================*/

.lotus-base{

    position:absolute;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    width:300px;

    height:130px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    border-radius:0 0 180px 180px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    backdrop-filter:blur(18px);

    color:#fff;

}

.lotus-base i{

    color:#7ED321;

    font-size:2rem;

    margin-bottom:10px;

}

.lotus-base h4{

    font-size:1.2rem;

}

/*====================================
UNDERLINE
====================================*/

.lotus-growth-section h2 span{

    position:relative;

}

.lotus-growth-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:20px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

/* Part - 2 */

/*==================================================
        LOTUS HOVER
==================================================*/

.lotus-petal,
.lotus-center,
.lotus-base{

    transition:
    transform .45s ease,
    box-shadow .45s ease,
    border-color .45s ease,
    background .45s ease;

}

.lotus-petal:hover{

    background:rgba(255,255,255,.08);

    border-color:rgba(0,188,212,.28);

    box-shadow:
    0 20px 45px rgba(0,188,212,.18);

}

.lotus-center:hover{

    transform:translate(-50%,-50%) scale(1.06);

    box-shadow:
    0 0 30px rgba(0,188,212,.30),
    0 0 70px rgba(126,211,33,.15);

}

.lotus-base:hover{

    background:rgba(255,255,255,.08);

    border-color:rgba(126,211,33,.25);

}

/*==================================================
        ICONS
==================================================*/

.lotus-petal i,
.lotus-center i,
.lotus-base i{

    transition:.4s;

}

.lotus-petal:hover i{

    color:#00BCD4;

    transform:scale(1.18) rotate(-10deg);

}

.lotus-center:hover i{

    transform:rotate(360deg);

}

.lotus-base:hover i{

    transform:translateY(-6px);

}

/*==================================================
        TITLES
==================================================*/

.lotus-petal h4,
.lotus-base h4{

    transition:.35s;

}

.lotus-petal:hover h4,
.lotus-base:hover h4{

    color:#00BCD4;

}

/*==================================================
        FLOATING ANIMATION
==================================================*/

.lotus-top{

    animation:lotusFloatTop 6s ease-in-out infinite;

}

.lotus-left{

    animation:lotusFloatLeft 7s ease-in-out infinite;

}

.lotus-right{

    animation:lotusFloatRight 7s ease-in-out infinite;

}

.lotus-bottom-left{

    animation:lotusFloatBottomLeft 8s ease-in-out infinite;

}

.lotus-bottom-right{

    animation:lotusFloatBottomRight 8s ease-in-out infinite;

}

.lotus-base{

    animation:lotusBaseFloat 6s ease-in-out infinite;

}

@keyframes lotusFloatTop{

    50%{

        transform:translateX(-50%) translateY(-12px);

    }

}

@keyframes lotusFloatLeft{

    50%{

        transform:rotate(-25deg) translateY(-10px);

    }

}

@keyframes lotusFloatRight{

    50%{

        transform:rotate(25deg) translateY(-10px);

    }

}

@keyframes lotusFloatBottomLeft{

    50%{

        transform:rotate(-12deg) translateY(10px);

    }

}

@keyframes lotusFloatBottomRight{

    50%{

        transform:rotate(12deg) translateY(10px);

    }

}

@keyframes lotusBaseFloat{

    50%{

        transform:translateX(-50%) translateY(8px);

    }

}

/*==================================================
        INNER SELF GLOW
==================================================*/

.lotus-center::before{

    content:"";

    position:absolute;

    inset:-12px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.18);

    animation:innerGlow 3s ease-in-out infinite;

}

@keyframes innerGlow{

    0%{

        transform:scale(.95);

        opacity:.7;

    }

    100%{

        transform:scale(1.18);

        opacity:0;

    }

}

/*==================================================
        SECTION TAG
==================================================*/

.lotus-growth-section .section-tag{

    transition:.35s;

}

.lotus-growth-section .section-tag:hover{

    background:#00BCD4;

    color:#fff;

}

/*==================================================
        RESPONSIVE
==================================================*/

/*====================================
TABLET
====================================*/

@media (max-width:991px){

.lotus-wrapper{

    width:100%;

    height:650px;

}

.lotus-center{

    width:140px;
    height:140px;

}

.lotus-center h3{

    font-size:1.1rem;

}

.lotus-center i{

    font-size:2rem;

}

.lotus-petall{

    width:130px;
    height:165px;

}

.lotus-petall h4{

    font-size:.9rem;

}

.lotus-top{

    top:10px;

}

.lotus-left{

    left:40px;
    top:170px;

}

.lotus-right{

    right:40px;
    top:170px;

}

.lotus-bottom-left{

    left:80px;
    bottom:95px;

}

.lotus-bottom-right{

    right:80px;
    bottom:95px;

}

.lotus-base{

    width:220px;
    height:110px;

}

}


/*====================================
MOBILE
====================================*/

@media (max-width:767px){

.lotus-wrapper{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:18px;

    width:100%;

    height:auto;

}

.lotus-center,
.lotus-petall,
.lotus-base{

    position:relative;

    left:auto !important;

    right:auto !important;

    top:auto !important;

    bottom:auto !important;

    transform:none !important;

}

.lotus-center{

    width:170px;

    height:170px;

    order:1;

}

.lotus-top{

    order:2;

}

.lotus-left{

    order:3;

}

.lotus-right{

    order:4;

}

.lotus-bottom-left{

    order:5;

}

.lotus-bottom-right{

    order:6;

}

.lotus-base{

    order:7;

    width:240px;

    height:110px;

    border-radius:70px;

}

.lotus-petall{

    width:100%;

    max-width:300px;

    height:95px;

    clip-path:none;

    border-radius:18px;

    flex-direction:row;

    justify-content:flex-start;

    gap:18px;

    padding:0 25px;

}

.lotus-petall i{

    margin:0;

    font-size:1.6rem;

}

.lotus-petall h4{

    margin:0;

    font-size:1rem;

}

}
/* Growth Section Ends Here */

/* Programs Section Starts Here */

/*==================================================
        ZEN GARDEN SECTION
==================================================*/

.zen-garden-section{

    position:relative;

    padding:130px 5%;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%
    );

}

.zen-garden-section::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    left:-220px;

    top:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(100px);

}

.zen-garden-section::after{

    content:"";

    position:absolute;

    width:460px;

    height:460px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(100px);

}

/*====================================
SECTION HEADING
====================================*/

.zen-garden-section .section-heading{

    max-width:850px;

    margin:0 auto 90px;

    position:relative;

    z-index:5;

}

.zen-garden-section .section-heading h2{

    color:#fff;

    font-size:3.3rem;

    margin:25px 0;

    line-height:1.2;

}

.zen-garden-section .section-heading h2 span{

    color:#00BCD4;

}

.zen-garden-section .section-heading p{

    color:#CBD5E1;

    font-size:1.05rem;

    line-height:2;

}

/*====================================
LAYOUT
====================================*/

.zen-garden-layout{

    position:relative;

    display:grid;

    grid-template-columns:1.3fr 1fr 1fr;

    grid-auto-rows:240px;

    gap:28px;

    max-width:1350px;

    margin:auto;

    z-index:5;

}

/*====================================
COMMON ISLAND
====================================*/

.zen-island{

    position:relative;

    overflow:hidden;

    border-radius:42px;

    padding:40px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    background:

    repeating-radial-gradient(

        circle at center,

        rgba(255,255,255,.05) 0px,

        rgba(255,255,255,.05) 2px,

        transparent 3px,

        transparent 14px

    ),

    rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    box-shadow:

    0 20px 45px rgba(0,0,0,.22);

}

/*====================================
STONE
====================================*/

.zen-stone{

    width:90px;

    height:90px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:25px;

    box-shadow:

    0 15px 30px rgba(0,188,212,.18);

}

.zen-stone i{

    color:#fff;

    font-size:2rem;

}

/*====================================
TEXT
====================================*/

.zen-island h3{

    color:#fff;

    font-size:1.45rem;

    margin-bottom:15px;

}

.zen-island p{

    color:#CBD5E1;

    line-height:1.9;

    font-size:.96rem;

}

/*====================================
ORGANIC SHAPES
====================================*/

.meditation-zone{

    grid-row:span 2;

    border-radius:80px 45px 70px 40px;

}

.personality-zone{

    grid-row:span 2;

    border-radius:45px 90px 45px 70px;

}

.workshop-zone{

    grid-column:span 2;

    border-radius:90px 35px 90px 35px;

}

.yoga-zone{

    border-radius:70px 35px 65px 40px;

}

.values-zone{

    border-radius:35px 80px 35px 70px;

}

/*====================================
SAND RIPPLE
====================================*/

.zen-island::before{

    content:"";

    position:absolute;

    inset:15px;

    border-radius:inherit;

    border:1px solid rgba(255,255,255,.04);

    pointer-events:none;

}

.zen-island::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    right:-120px;

    bottom:-120px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.05);

    pointer-events:none;

}

/*====================================
UNDERLINE
====================================*/

.zen-garden-section h2 span{

    position:relative;

}

.zen-garden-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    opacity:.35;

}

/* Part - 2 */

/*==================================================
        ISLAND HOVER
==================================================*/

.zen-island{

    transition:

    transform .45s ease,

    box-shadow .45s ease,

    border-color .45s ease,

    background .45s ease;

}

.zen-island:hover{

    transform:translateY(-10px);

    border-color:rgba(0,188,212,.25);

    box-shadow:

    0 30px 60px rgba(0,188,212,.15);

}

/*==================================================
        STONE
==================================================*/

.zen-stone{

    position:relative;

    transition:

    transform .4s ease,

    box-shadow .4s ease;

}

.zen-stone::before{

    content:"";

    position:absolute;

    inset:-10px;

    border-radius:50%;

    border:2px solid rgba(126,211,33,.15);

    opacity:0;

    transition:.4s;

}

.zen-island:hover .zen-stone{

    transform:rotate(-8deg) scale(1.1);

    box-shadow:

    0 0 30px rgba(0,188,212,.30),

    0 0 55px rgba(126,211,33,.18);

}

.zen-island:hover .zen-stone::before{

    opacity:1;

    animation:stoneRipple 2s infinite;

}

@keyframes stoneRipple{

    0%{

        transform:scale(.9);

        opacity:.7;

    }

    100%{

        transform:scale(1.4);

        opacity:0;

    }

}

/*==================================================
        ICON
==================================================*/

.zen-stone i{

    transition:.35s;

}

.zen-island:hover .zen-stone i{

    transform:scale(1.15);

}

/*==================================================
        TEXT
==================================================*/

.zen-island h3{

    transition:.35s;

}

.zen-island:hover h3{

    color:#00BCD4;

}

.zen-island p{

    transition:.35s;

}

.zen-island:hover p{

    color:#E2E8F0;

}

/*==================================================
        SAND ANIMATION
==================================================*/

.zen-island::after{

    transition:.5s;

}

.zen-island:hover::after{

    transform:scale(1.25);

    border-color:rgba(126,211,33,.12);

}

.zen-island::before{

    transition:.45s;

}

.zen-island:hover::before{

    inset:10px;

    border-color:rgba(0,188,212,.10);

}

/*==================================================
        FLOATING MOTION
==================================================*/

.meditation-zone{

    animation:zenFloatOne 8s ease-in-out infinite;

}

.yoga-zone{

    animation:zenFloatTwo 7s ease-in-out infinite;

}

.values-zone{

    animation:zenFloatThree 9s ease-in-out infinite;

}

.personality-zone{

    animation:zenFloatFour 8s ease-in-out infinite;

}

.workshop-zone{

    animation:zenFloatFive 10s ease-in-out infinite;

}

@keyframes zenFloatOne{

    50%{

        transform:translateY(-8px);

    }

}

@keyframes zenFloatTwo{

    50%{

        transform:translateY(6px);

    }

}

@keyframes zenFloatThree{

    50%{

        transform:translateY(-6px);

    }

}

@keyframes zenFloatFour{

    50%{

        transform:translateY(8px);

    }

}

@keyframes zenFloatFive{

    50%{

        transform:translateY(-5px);

    }

}

/*==================================================
        SECTION TAG
==================================================*/

.zen-garden-section .section-tag{

    transition:.35s;

}

.zen-garden-section .section-tag:hover{

    background:#00BCD4;

    color:#fff;

}

/*==================================================
        RESPONSIVE
==================================================*/

@media(max-width:992px){

.zen-garden-layout{

grid-template-columns:1fr 1fr;

grid-auto-rows:220px;

}

.meditation-zone{

grid-row:span 1;

}

.personality-zone{

grid-row:span 1;

}

.workshop-zone{

grid-column:span 2;

}

.zen-island{

padding:30px;

}

.zen-stone{

width:75px;

height:75px;

}

.zen-stone i{

font-size:1.6rem;

}

.zen-island h3{

font-size:1.2rem;

}

}

@media(max-width:768px){

.zen-garden-section{

padding:90px 5%;

}

.zen-garden-section .section-heading{

margin-bottom:60px;

}

.zen-garden-section .section-heading h2{

font-size:2.3rem;

}

.zen-garden-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.zen-garden-layout{

grid-template-columns:1fr;

grid-auto-rows:auto;

gap:20px;

}

.meditation-zone,

.personality-zone,

.workshop-zone{

grid-column:auto;

grid-row:auto;

}

.zen-island{

padding:28px;

border-radius:30px !important;

}

.zen-stone{

width:70px;

height:70px;

margin-bottom:20px;

}

.zen-stone i{

font-size:1.5rem;

}

.zen-island h3{

font-size:1.2rem;

}

.zen-island p{

font-size:.92rem;

line-height:1.8;

}

}

/* Programs Section Ends Here */

/* Development Section Starts Here */

/*==================================================
        MANDALA GROWTH SECTION
==================================================*/

.mandala-growth-section{

    position:relative;

    padding:130px 5%;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.mandala-growth-section::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    left:-220px;

    top:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(100px);

}

.mandala-growth-section::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(100px);

}

/*====================================
SECTION HEADING
====================================*/

.mandala-growth-section .section-heading{

    max-width:850px;

    margin:0 auto 90px;

    position:relative;

    z-index:5;

}

.mandala-growth-section .section-heading h2{

    color:#fff;

    font-size:3.3rem;

    line-height:1.2;

    margin:25px 0;

}

.mandala-growth-section .section-heading h2 span{

    color:#00BCD4;

}

.mandala-growth-section .section-heading p{

    color:#CBD5E1;

    font-size:1.05rem;

    line-height:2;

}

/*====================================
MANDALA WRAPPER
====================================*/

.mandala-wrapper{

    position:relative;

    width:760px;

    height:760px;

    max-width:100%;

    margin:auto;

    z-index:5;

}

/*====================================
SACRED RINGS
====================================*/

.mandala-ring{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    border:1px solid rgba(255,255,255,.06);

}

.ring-one{

    width:620px;

    height:620px;

}

.ring-two{

    width:470px;

    height:470px;

    border-style:dashed;

    border-color:rgba(126,211,33,.18);

}

.ring-three{

    width:300px;

    height:300px;

    border-color:rgba(0,188,212,.20);

}

/*====================================
CENTER
====================================*/

.mandala-center{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:190px;

    height:190px;

    border-radius:50%;

    background:linear-gradient(

        135deg,

        #00BCD4,

        #7ED321

    );

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:#fff;

    box-shadow:

    0 20px 45px rgba(0,188,212,.20);

}

.mandala-center i{

    font-size:2.8rem;

    margin-bottom:15px;

}

.mandala-center h3{

    font-size:1.35rem;

    line-height:1.4;

}

/*====================================
COMMON NODE
====================================*/

.mandala-node{

    position:absolute;

    width:130px;

    height:130px;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    box-shadow:

    0 15px 35px rgba(0,0,0,.20);

}

.mandala-node i{

    color:#7ED321;

    font-size:2rem;

    margin-bottom:12px;

}

.mandala-node span{

    color:#fff;

    font-size:.95rem;

    line-height:1.4;

    font-weight:600;

}

/*====================================
NODE POSITIONS
====================================*/

.mental-node{

    left:50%;

    top:20px;

    transform:translateX(-50%);

}

.physical-node{

    right:55px;

    top:170px;

}

.spiritual-node{

    right:55px;

    bottom:170px;

}

.emotional-node{

    left:50%;

    bottom:20px;

    transform:translateX(-50%);

}

.social-node{

    left:55px;

    bottom:170px;

}

.wisdom-node{

    left:55px;

    top:170px;

}

/*====================================
CONNECTING DOTS
====================================*/

.mandala-node::before{

    content:"";

    position:absolute;

    width:12px;

    height:12px;

    border-radius:50%;

    background:#00BCD4;

    box-shadow:

    0 0 15px rgba(0,188,212,.35);

}

.mental-node::before{

    bottom:-42px;

}

.physical-node::before{

    left:-42px;

}

.spiritual-node::before{

    left:-42px;

}

.emotional-node::before{

    top:-42px;

}

.social-node::before{

    right:-42px;

}

.wisdom-node::before{

    right:-42px;

}

/*====================================
HEADING UNDERLINE
====================================*/

.mandala-growth-section h2 span{

    position:relative;

}

.mandala-growth-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:30px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

/* Part - 2 */

/*==================================================
        NODE HOVER
==================================================*/

.mandala-node,
.mandala-center{

    transition:

    transform .45s ease,

    box-shadow .45s ease,

    border-color .45s ease,

    background .45s ease;

}

.mandala-node:hover{

    transform:scale(1.08);

    border-color:rgba(0,188,212,.25);

    background:rgba(255,255,255,.08);

    box-shadow:

    0 20px 45px rgba(0,188,212,.18);

}

.mandala-center:hover{

    transform:translate(-50%,-50%) scale(1.08);

    box-shadow:

    0 0 30px rgba(0,188,212,.35),

    0 0 60px rgba(126,211,33,.18);

}

/*==================================================
        ICON
==================================================*/

.mandala-node i,
.mandala-center i{

    transition:.4s;

}

.mandala-node:hover i{

    color:#00BCD4;

    transform:rotate(-12deg) scale(1.18);

}

.mandala-center:hover i{

    transform:rotate(360deg);

}

/*==================================================
        TITLE
==================================================*/

.mandala-node span{

    transition:.35s;

}

.mandala-node:hover span{

    color:#00BCD4;

}

/*==================================================
        SACRED RINGS
==================================================*/

.ring-one{

    animation:ringRotateOne 40s linear infinite;

}

.ring-two{

    animation:ringRotateTwo 28s linear infinite reverse;

}

.ring-three{

    animation:ringRotateThree 20s linear infinite;

}

@keyframes ringRotateOne{

    from{

        transform:translate(-50%,-50%) rotate(0deg);

    }

    to{

        transform:translate(-50%,-50%) rotate(360deg);

    }

}

@keyframes ringRotateTwo{

    from{

        transform:translate(-50%,-50%) rotate(360deg);

    }

    to{

        transform:translate(-50%,-50%) rotate(0deg);

    }

}

@keyframes ringRotateThree{

    from{

        transform:translate(-50%,-50%) rotate(0deg);

    }

    to{

        transform:translate(-50%,-50%) rotate(360deg);

    }

}

/*==================================================
        CENTER ENERGY
==================================================*/

.mandala-center::before{

    content:"";

    position:absolute;

    inset:-12px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.15);

    animation:centerPulse 3s ease-in-out infinite;

}

@keyframes centerPulse{

    0%{

        transform:scale(.95);

        opacity:.8;

    }

    100%{

        transform:scale(1.25);

        opacity:0;

    }

}

/*==================================================
        CONNECTING DOTS
==================================================*/

.mandala-node::before{

    animation:energyDot 2s ease-in-out infinite;

}

@keyframes energyDot{

    0%,100%{

        transform:scale(1);

        opacity:.6;

    }

    50%{

        transform:scale(1.5);

        opacity:1;

    }

}

/*==================================================
        FLOATING EFFECT
==================================================*/

.mental-node{

    animation:mandalaFloat1 7s ease-in-out infinite;

}

.physical-node{

    animation:mandalaFloat2 8s ease-in-out infinite;

}

.spiritual-node{

    animation:mandalaFloat3 7.5s ease-in-out infinite;

}

.emotional-node{

    animation:mandalaFloat4 8s ease-in-out infinite;

}

.social-node{

    animation:mandalaFloat5 7s ease-in-out infinite;

}

.wisdom-node{

    animation:mandalaFloat6 8.5s ease-in-out infinite;

}

@keyframes mandalaFloat1{

    50%{

        transform:translateX(-50%) translateY(-10px);

    }

}

@keyframes mandalaFloat2{

    50%{

        transform:translate(8px,-8px);

    }

}

@keyframes mandalaFloat3{

    50%{

        transform:translate(8px,8px);

    }

}

@keyframes mandalaFloat4{

    50%{

        transform:translateX(-50%) translateY(10px);

    }

}

@keyframes mandalaFloat5{

    50%{

        transform:translate(-8px,8px);

    }

}

@keyframes mandalaFloat6{

    50%{

        transform:translate(-8px,-8px);

    }

}

/*==================================================
        SECTION TAG
==================================================*/

.mandala-growth-section .section-tag{

    transition:.35s;

}

.mandala-growth-section .section-tag:hover{

    background:#00BCD4;

    color:#fff;

}

/*==================================================
        RESPONSIVE
==================================================*/

@media(max-width:992px){

.mandala-wrapper{

width:620px;

height:620px;

}

.ring-one{

width:520px;

height:520px;

}

.ring-two{

width:390px;

height:390px;

}

.ring-three{

width:250px;

height:250px;

}

.mandala-center{

width:150px;

height:150px;

}

.mandala-center i{

font-size:2.2rem;

}

.mandala-center h3{

font-size:1.1rem;

}

.mandala-node{

width:105px;

height:105px;

}

.mandala-node i{

font-size:1.5rem;

}

.mandala-node span{

font-size:.82rem;

}

.physical-node,

.spiritual-node{

right:25px;

}

.social-node,

.wisdom-node{

left:25px;

}

}

@media(max-width:768px){

.mandala-growth-section{

padding:90px 5%;

}

.mandala-growth-section .section-heading{

margin-bottom:60px;

}

.mandala-growth-section .section-heading h2{

font-size:2.3rem;

}

.mandala-growth-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

/* Mobile Layout */

.mandala-ring{

display:none;

}

.mandala-wrapper{

width:100%;

height:auto;

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

justify-items:center;

}

.mandala-center{

position:relative;

left:auto;

top:auto;

transform:none !important;

grid-column:1 / span 2;

margin-bottom:15px;

width:170px;

height:170px;

}

.mandala-node{

position:relative;

left:auto !important;

right:auto !important;

top:auto !important;

bottom:auto !important;

transform:none !important;

width:140px;

height:140px;

}

.mandala-node::before{

display:none;

}

.mandala-node span{

font-size:.9rem;

}

}

/* Development Section Ends Here */

/* Impact Section Starts Here */

/*==================================================
        SPIRITUAL IMPACT SECTION
==================================================*/

.spiritual-impact-section{

    position:relative;

    padding:130px 5%;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.spiritual-impact-section::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    top:-220px;

    left:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(100px);

}

.spiritual-impact-section::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(100px);

}

/*====================================
SECTION HEADING
====================================*/

.spiritual-impact-section .section-heading{

    max-width:850px;

    margin:0 auto 90px;

    text-align:center;

    position:relative;

    z-index:5;

}

.spiritual-impact-section .section-heading h2{

    color:#fff;

    font-size:3.3rem;

    margin:25px 0;

    line-height:1.2;

}

.spiritual-impact-section .section-heading h2 span{

    color:#00BCD4;

}

.spiritual-impact-section .section-heading p{

    color:#CBD5E1;

    font-size:1.05rem;

    line-height:2;

}

/*====================================
GRID
====================================*/

.spiritual-impact-grid{

    position:relative;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:70px 80px;

    max-width:1200px;

    margin:auto;

    z-index:5;

}

/*====================================
ITEM
====================================*/

.impact-story{

    position:relative;

    padding:35px 0;

    text-align:left;

}

/*====================================
BIG BACKGROUND NUMBER
====================================*/

.impact-story::before{

    content:attr(data-bg);

    position:absolute;

    left:-10px;

    top:-30px;

    font-size:8rem;

    font-weight:800;

    line-height:1;

    color:rgba(255,255,255,.04);

    letter-spacing:-6px;

    user-select:none;

    pointer-events:none;

}

/*====================================
MAIN NUMBER
====================================*/

.impact-story h3{

    position:relative;

    font-size:4.5rem;

    font-weight:700;

    color:#fff;

    line-height:1;

    margin-bottom:25px;

    z-index:2;

}

/*====================================
LINE
====================================*/

.impact-line{

    width:150px;

    height:3px;

    border-radius:20px;

    margin-bottom:22px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

}

/*====================================
TITLE
====================================*/

.impact-story h4{

    position:relative;

    color:#CBD5E1;

    font-size:1.2rem;

    font-weight:500;

    line-height:1.6;

    z-index:2;

}

/*====================================
DIVIDER
====================================*/

.impact-story:nth-child(1),
.impact-story:nth-child(2){

    border-bottom:1px solid rgba(255,255,255,.08);

    padding-bottom:60px;

}

.impact-story:nth-child(3),
.impact-story:nth-child(4){

    padding-top:60px;

}

/*====================================
UNDERLINE
====================================*/

.spiritual-impact-section h2 span{

    position:relative;

}

.spiritual-impact-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:20px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

/* Part - 2 */

/*==================================================
        ITEM HOVER
==================================================*/

.impact-story{

    transition:

    transform .4s ease,

    opacity .35s ease;

}

.impact-story:hover{

    transform:translateY(-10px);

}

/*==================================================
        LARGE NUMBER
==================================================*/

.impact-story h3{

    transition:

    color .35s ease,

    letter-spacing .35s ease,

    text-shadow .35s ease;

}

.impact-story:hover h3{

    color:#00BCD4;

    letter-spacing:2px;

    text-shadow:

    0 0 18px rgba(0,188,212,.25);

}

/*==================================================
        BACKGROUND NUMBER
==================================================*/

.impact-story::before{

    transition:

    transform .5s ease,

    color .35s ease,

    opacity .35s ease;

}

.impact-story:hover::before{

    transform:scale(1.08);

    color:rgba(126,211,33,.08);

}

/*==================================================
        IMPACT LINE
==================================================*/

.impact-line{

    position:relative;

    overflow:hidden;

}

.impact-line::after{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

    background:#fff;

    opacity:.35;

}

.impact-story:hover .impact-line::after{

    animation:impactLineMove .9s ease;

}

@keyframes impactLineMove{

    from{

        left:-100%;

    }

    to{

        left:120%;

    }

}

/*==================================================
        TITLE
==================================================*/

.impact-story h4{

    transition:

    color .35s ease,

    transform .35s ease;

}

.impact-story:hover h4{

    color:#fff;

    transform:translateX(6px);

}

/*==================================================
        STAGGER ANIMATION
==================================================*/

.impact-story{

    opacity:0;

    animation:impactFade .8s forwards;

}

.impact-story:nth-child(1){

    animation-delay:.1s;

}

.impact-story:nth-child(2){

    animation-delay:.25s;

}

.impact-story:nth-child(3){

    animation-delay:.4s;

}

.impact-story:nth-child(4){

    animation-delay:.55s;

}

@keyframes impactFade{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
        SECTION TAG
==================================================*/

.spiritual-impact-section .section-tag{

    transition:.35s;

}

.spiritual-impact-section .section-tag:hover{

    background:#00BCD4;

    color:#fff;

}

/*==================================================
        RESPONSIVE
==================================================*/

@media(max-width:992px){

.spiritual-impact-grid{

grid-template-columns:1fr;

gap:55px;

}

.impact-story{

padding:25px 0 !important;

border-bottom:1px solid rgba(255,255,255,.08);

}

.impact-story:last-child{

border-bottom:none;

}

.impact-story::before{

font-size:6rem;

top:-10px;

}

.impact-story h3{

font-size:3.8rem;

}

}

@media(max-width:768px){

.spiritual-impact-section{

padding:90px 5%;

}

.spiritual-impact-section .section-heading{

margin-bottom:60px;

}

.spiritual-impact-section .section-heading h2{

font-size:2.3rem;

}

.spiritual-impact-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.spiritual-impact-grid{

gap:40px;

}

.impact-story{

text-align:center;

padding:20px 0 !important;

}

.impact-story::before{

left:50%;

top:-5px;

transform:translateX(-50%);

font-size:4.8rem;

letter-spacing:-3px;

}

.impact-story:hover::before{

transform:translateX(-50%) scale(1.08);

}

.impact-story h3{

font-size:3rem;

margin-bottom:18px;

}

.impact-line{

width:120px;

margin:0 auto 18px;

}

.impact-story h4{

font-size:1.05rem;

}

.impact-story:hover h4{

transform:none;

}

}

/* Impact Section Ends Here */

/* Matters Section Starts Here */

/*==================================================
        SOUL FLOW SECTION
==================================================*/

.soulflow-section{

    position:relative;

    padding:130px 5%;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.soulflow-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(90px);

}

.soulflow-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    bottom:-180px;

    right:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(90px);

}

/*==================================
SECTION HEADING
==================================*/

.soulflow-section .section-heading{

    max-width:850px;

    margin:0 auto 90px;

    position:relative;

    z-index:5;

}

.soulflow-section .section-heading h2{

    color:#fff;

    font-size:3.3rem;

    line-height:1.2;

    margin:25px 0;

}

.soulflow-section .section-heading h2 span{

    color:#00BCD4;

}

.soulflow-section .section-heading p{

    color:#CBD5E1;

    line-height:2;

    font-size:1.05rem;

}

/*==================================
FLOW
==================================*/

.soulflow-path{

    position:relative;

    max-width:760px;

    margin:auto;

    z-index:5;

}

/*==================================
CENTER LINE
==================================*/

.soulflow-line{

    position:absolute;

    left:47px;

    top:0;

    bottom:0;

    width:2px;

    background:linear-gradient(

        to bottom,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

/*==================================
STEP
==================================*/

.soulflow-step{

    position:relative;

    display:flex;

    align-items:center;

    gap:35px;

    margin-bottom:60px;

}

.soulflow-step:last-child{

    margin-bottom:0;

}

/*==================================
ICON
==================================*/

.soulflow-wave{

    position:relative;

    width:95px;

    height:95px;

    min-width:95px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    color:#fff;

    font-size:2rem;

    box-shadow:

    0 15px 35px rgba(0,188,212,.18);

    z-index:2;

}

/* Ripple Rings */

.soulflow-wave::before,

.soulflow-wave::after{

    content:"";

    position:absolute;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.08);

}

.soulflow-wave::before{

    inset:-10px;

}

.soulflow-wave::after{

    inset:-22px;

}

/*==================================
CONTENT
==================================*/

.soulflow-info{

    flex:1;

}

.soulflow-info h3{

    color:#fff;

    font-size:1.6rem;

    margin-bottom:10px;

}

.soulflow-info p{

    color:#CBD5E1;

    line-height:1.8;

    max-width:520px;

}

/*==================================
HOVER
==================================*/

.soulflow-step{

    transition:.35s;

}

.soulflow-step:hover{

    transform:translateX(10px);

}

.soulflow-wave{

    transition:.35s;

}

.soulflow-step:hover .soulflow-wave{

    transform:scale(1.08);

    box-shadow:

    0 0 30px rgba(0,188,212,.35);

}

.soulflow-info h3{

    transition:.35s;

}

.soulflow-step:hover h3{

    color:#00BCD4;

}

/*==================================
RIPPLE ANIMATION
==================================*/

.soulflow-wave::before{

    animation:soulRippleOne 3s linear infinite;

}

.soulflow-wave::after{

    animation:soulRippleTwo 3s linear infinite 1s;

}

@keyframes soulRippleOne{

    0%{

        transform:scale(1);

        opacity:.7;

    }

    100%{

        transform:scale(1.4);

        opacity:0;

    }

}

@keyframes soulRippleTwo{

    0%{

        transform:scale(1);

        opacity:.5;

    }

    100%{

        transform:scale(1.7);

        opacity:0;

    }

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:768px){

.soulflow-section{

padding:90px 5%;

}

.soulflow-section .section-heading{

margin-bottom:60px;

}

.soulflow-section .section-heading h2{

font-size:2.3rem;

}

.soulflow-path{

max-width:100%;

}

.soulflow-line{

left:37px;

}

.soulflow-step{

gap:20px;

margin-bottom:45px;

}

.soulflow-wave{

width:75px;

height:75px;

min-width:75px;

font-size:1.5rem;

}

.soulflow-info h3{

font-size:1.2rem;

}

.soulflow-info p{

font-size:.92rem;

line-height:1.7;

}

}

/* Matters Section Ends Here */

/* FAQ Section Starts Here */

/*==================================================
        ZEN FAQ SECTION
==================================================*/

.zenfaq-section{

    position:relative;

    padding:120px 5%;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.zenfaq-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(90px);

}

.zenfaq-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    bottom:-180px;

    right:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(90px);

}

/*=====================================
WRAPPER
=====================================*/

.zenfaq-wrapper{

    max-width:900px;

    margin:auto;

    position:relative;

    z-index:2;

}

/*=====================================
ITEM
=====================================*/

.zenfaq-item{

    border-bottom:1px solid rgba(255,255,255,.08);

}

.zenfaq-item:last-child{

    border-bottom:none;

}

/*=====================================
QUESTION
=====================================*/

.zenfaq-question{

    width:100%;

    display:flex;

    align-items:center;

    gap:22px;

    padding:28px 0;

    border:none;

    background:none;

    color:#fff;

    cursor:pointer;

    text-align:left;

}

/*=====================================
SUN
=====================================*/

.zenfaq-sun{

    width:52px;

    height:52px;

    min-width:52px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    color:#fff;

    position:relative;

    box-shadow:
    0 0 18px rgba(0,188,212,.25);

}

.zenfaq-sun::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.15);

}

/*=====================================
TITLE
=====================================*/

.zenfaq-title{

    flex:1;

    font-size:1.2rem;

    font-weight:600;

    color:#fff;

}

/*=====================================
PLUS
=====================================*/

.zenfaq-toggle{

    width:42px;

    height:42px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#00BCD4;

    font-size:1.1rem;

    transition:.35s;

}

/*=====================================
ANSWER
=====================================*/

.zenfaq-answer{

    max-height:0;

    overflow:hidden;

    transition:.45s ease;

    padding-left:74px;

}

.zenfaq-answer p{

    color:#CBD5E1;

    line-height:1.9;

    padding-bottom:25px;

}

/*=====================================
ACTIVE
=====================================*/

.zenfaq-item.active .zenfaq-answer{

    max-height:220px;

}

.zenfaq-item.active .zenfaq-toggle{

    transform:rotate(45deg);

}

.zenfaq-item.active .zenfaq-sun{

    box-shadow:
    0 0 25px rgba(0,188,212,.35),
    0 0 45px rgba(126,211,33,.18);

}

/*=====================================
HOVER
=====================================*/

.zenfaq-question{

    transition:.35s;

}

.zenfaq-question:hover{

    padding-left:12px;

}

.zenfaq-question:hover .zenfaq-title{

    color:#00BCD4;

}

.zenfaq-question:hover .zenfaq-sun{

    transform:rotate(15deg) scale(1.08);

}

.zenfaq-sun,

.zenfaq-title{

    transition:.35s;

}

/*=====================================
RESPONSIVE
=====================================*/

@media(max-width:768px){

.zenfaq-section{

padding:90px 5%;

}

.zenfaq-question{

gap:15px;

padding:22px 0;

}

.zenfaq-sun{

width:45px;

height:45px;

min-width:45px;

}

.zenfaq-title{

font-size:1rem;

}

.zenfaq-answer{

padding-left:60px;

}

.zenfaq-answer p{

font-size:.95rem;

line-height:1.8;

}

}


/* FAQ Section Ends Here */

/* CTA Section Starts Here */

/*==================================================
        TEMPLE CTA SECTION
==================================================*/

.templecta-section{

    position:relative;

    overflow:hidden;

    padding:140px 5% 220px;

    background:linear-gradient(
        180deg,
        #08101f 0%,
        #111c35 45%,
        #060b15 100%
    );

}

/*===================================
SUN GLOW
===================================*/

.templecta-sun{

    position:absolute;

    top:70px;

    left:50%;

    transform:translateX(-50%);

    width:260px;

    height:260px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(255,214,92,.55),
    rgba(255,214,92,.12),
    transparent 72%);

    filter:blur(25px);

    z-index:1;

}

/*===================================
CONTENT
===================================*/

.templecta-content{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:auto;

    text-align:center;

}

.templecta-tag{

    display:inline-block;

    padding:10px 24px;

    border-radius:50px;

    color:#7ED321;

    border:1px solid rgba(126,211,33,.25);

    background:rgba(255,255,255,.04);

    margin-bottom:28px;

    letter-spacing:1px;

    font-size:.85rem;

}

.templecta-content h2{

    color:#fff;

    font-size:3.4rem;

    line-height:1.2;

    margin-bottom:25px;

}

.templecta-content h2 span{

    color:#FFD65C;

}

.templecta-content p{

    color:#D4D9E3;

    font-size:1.05rem;

    line-height:2;

    max-width:760px;

    margin:0 auto 50px;

}

/*===================================
BUTTONS
===================================*/

.templecta-actions{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;

}

.templecta-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:17px 30px;

    border-radius:60px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.templecta-primary{

    background:#FFD65C;

    color:#111;

}

.templecta-outline{

    color:#fff;

    border:1px solid rgba(255,255,255,.18);

    background:rgba(255,255,255,.05);

}

.templecta-btn:hover{

    transform:translateY(-6px);

}

.templecta-primary:hover{

    box-shadow:0 18px 35px rgba(255,214,92,.30);

}

.templecta-outline:hover{

    border-color:#FFD65C;

    color:#FFD65C;

}

/*===================================
TEMPLE
===================================*/

.templecta-silhouette{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:170px;

    z-index:2;

}

/* Temple Base */

.templecta-base{

    position:absolute;

    bottom:0;

    left:50%;

    transform:translateX(-50%);

    width:380px;

    height:80px;

    background:#03060d;

}

.templecta-base::before{

    content:"";

    position:absolute;

    top:-55px;

    left:50%;

    transform:translateX(-50%);

    width:260px;

    height:60px;

    background:#03060d;

}

/* Domes */

.templecta-dome{

    position:absolute;

    bottom:80px;

    width:95px;

    height:95px;

    background:#03060d;

    border-radius:50% 50% 0 0;

}

.temple-center{

    left:50%;

    transform:translateX(-50%);

    width:120px;

    height:120px;

}

.temple-left{

    left:calc(50% - 120px);

}

.temple-right{

    left:calc(50% + 25px);

}

/*===================================
PARTICLES
===================================*/

.templecta-particles span{

    position:absolute;

    width:5px;

    height:5px;

    border-radius:50%;

    background:#FFD65C;

    opacity:.6;

    animation:templeFloat 8s linear infinite;

}

.templecta-particles span:nth-child(1){

left:15%;
top:65%;

}

.templecta-particles span:nth-child(2){

left:28%;
top:30%;

animation-delay:2s;

}

.templecta-particles span:nth-child(3){

left:52%;
top:40%;

animation-delay:1s;

}

.templecta-particles span:nth-child(4){

left:68%;
top:25%;

animation-delay:3s;

}

.templecta-particles span:nth-child(5){

left:82%;
top:55%;

animation-delay:5s;

}

.templecta-particles span:nth-child(6){

left:45%;
top:18%;

animation-delay:4s;

}

@keyframes templeFloat{

    0%{

        transform:translateY(0);

        opacity:0;

    }

    30%{

        opacity:.7;

    }

    100%{

        transform:translateY(-90px);

        opacity:0;

    }

}

/*===================================
RESPONSIVE
===================================*/

@media(max-width:991px){

.templecta-content h2{

font-size:2.7rem;

}

.templecta-actions{

gap:15px;

}

.templecta-base{

width:300px;

}

.templecta-base::before{

width:200px;

}

}

@media(max-width:767px){

.templecta-section{

padding:90px 5% 170px;

}

.templecta-content h2{

font-size:2.1rem;

}

.templecta-content p{

font-size:.95rem;

line-height:1.8;

}

.templecta-actions{

flex-direction:column;

align-items:center;

}

.templecta-btn{

width:100%;

max-width:320px;

justify-content:center;

}

.templecta-base{

width:220px;

height:55px;

}

.templecta-base::before{

width:150px;

height:40px;

top:-38px;

}

.templecta-dome{

width:60px;

height:60px;

bottom:55px;

}

.temple-center{

width:75px;

height:75px;

}

.temple-left{

left:calc(50% - 75px);

}

.temple-right{

left:calc(50% + 15px);

}

}

/* CTA Section Ends Here */

/* Holistic Development & Spiritual Development Page Ends Here*/

/* Human Rights And Avocacy Page Starts Here */

/* Hero Section Starts Here */

/*==================================================
        JUSTICE HERO SECTION
==================================================*/

.justicehero-section{

    position:relative;

    overflow:hidden;

    padding:180px 5% 140px;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

/*====================================
BACKGROUND GLOW
====================================*/

.justicehero-section::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    left:-250px;

    top:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.12),
        transparent 70%
    );

    filter:blur(120px);

}

.justicehero-section::after{

    content:"";

    position:absolute;

    width:480px;

    height:480px;

    right:-220px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.10),
        transparent 70%
    );

    filter:blur(120px);

}

/*====================================
SPOTLIGHTS
====================================*/

.justicehero-light{

    position:absolute;

    width:450px;

    height:700px;

    top:-200px;

    background:linear-gradient(
        180deg,
        rgba(0,188,212,.18),
        transparent
    );

    clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);

    opacity:.25;

}

.justicehero-light-left{

    left:-120px;

    transform:rotate(-18deg);

}

.justicehero-light-right{

    right:-120px;

    transform:rotate(18deg);

}

/*====================================
LIGHT RAYS
====================================*/

.justicehero-rays{

    position:absolute;

    inset:0;

    background:
    repeating-linear-gradient(
        90deg,
        transparent,
        transparent 120px,
        rgba(255,255,255,.02) 121px,
        transparent 122px
    );

    opacity:.4;

}

/*====================================
CONTENT
====================================*/

.justicehero-content{

    position:relative;

    max-width:900px;

    margin:auto;

    text-align:center;

    z-index:5;

}

.justicehero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 26px;

    border-radius:50px;

    border:1px solid rgba(0,188,212,.20);

    background:rgba(255,255,255,.05);

    color:#7ED321;

    font-size:.85rem;

    letter-spacing:1px;

    margin-bottom:30px;

}

.justicehero-content h1{

    color:#fff;

    font-size:4.2rem;

    line-height:1.15;

    margin-bottom:30px;

    font-weight:700;

}

.justicehero-content h1 span{

    color:#00BCD4;

}

.justicehero-content p{

    max-width:760px;

    margin:0 auto 45px;

    color:#CBD5E1;

    line-height:2;

    font-size:1.08rem;

}

/*====================================
BUTTONS
====================================*/

.justicehero-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;

}

.justicehero-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 34px;

    border-radius:60px;

    text-decoration:none;

    transition:.35s;

    font-weight:600;

}

.justicehero-primary{

    background:#00BCD4;

    color:#fff;

}

.justicehero-outline{

    color:#fff;

    border:1px solid rgba(255,255,255,.15);

    background:rgba(255,255,255,.05);

}

/*====================================
JUSTICE SYMBOL
====================================*/

.justicehero-symbol{

    position:absolute;

    right:8%;

    top:50%;

    transform:translateY(-50%);

    font-size:9rem;

    color:rgba(255,255,255,.05);

    z-index:1;

}

.justicehero-symbol i{

    text-shadow:
    0 0 40px rgba(0,188,212,.20);

}

/*====================================
FLOATING DOCUMENTS
====================================*/

.justicehero-documents span{

    position:absolute;

    width:65px;

    height:65px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:#00BCD4;

    backdrop-filter:blur(12px);

    font-size:1.5rem;

}

.justicehero-documents span:nth-child(1){

    left:12%;

    top:22%;

}

.justicehero-documents span:nth-child(2){

    right:14%;

    top:20%;

}

.justicehero-documents span:nth-child(3){

    left:18%;

    bottom:20%;

}

.justicehero-documents span:nth-child(4){

    right:18%;

    bottom:18%;

}

/*====================================
PARTICLES
====================================*/

.justicehero-particles span{

    position:absolute;

    width:6px;

    height:6px;

    border-radius:50%;

    background:#7ED321;

    opacity:.45;

}

.justicehero-particles span:nth-child(1){left:15%;top:18%;}
.justicehero-particles span:nth-child(2){left:30%;top:70%;}
.justicehero-particles span:nth-child(3){left:50%;top:15%;}
.justicehero-particles span:nth-child(4){left:70%;top:65%;}
.justicehero-particles span:nth-child(5){left:82%;top:28%;}
.justicehero-particles span:nth-child(6){left:90%;top:52%;}

/*====================================
SCROLL
====================================*/

.justicehero-scroll{

    position:absolute;

    left:50%;

    bottom:40px;

    transform:translateX(-50%);

    width:34px;

    height:56px;

    border-radius:25px;

    border:2px solid rgba(255,255,255,.15);

}

.justicehero-scroll span{

    position:absolute;

    left:50%;

    top:10px;

    transform:translateX(-50%);

    width:6px;

    height:12px;

    border-radius:20px;

    background:#00BCD4;

}

/*====================================
RESPONSIVE
====================================*/

@media(max-width:991px){

.justicehero-content h1{

font-size:3.2rem;

}

.justicehero-symbol{

display:none;

}

.justicehero-documents span{

width:55px;
height:55px;
font-size:1.3rem;

}

}

@media(max-width:768px){

.justicehero-section{

padding:140px 5% 100px;

}

.justicehero-content h1{

font-size:2.4rem;

}

.justicehero-content p{

font-size:.95rem;

line-height:1.8;

}

.justicehero-buttons{

flex-direction:column;

align-items:center;

}

.justicehero-btn{

width:100%;

max-width:300px;

justify-content:center;

}

.justicehero-documents{

display:none;

}

.justicehero-light{

display:none;

}

}

/* Part - 2 */

/*==================================================
        BUTTON HOVER
==================================================*/

.justicehero-btn{

    transition:

    transform .35s ease,

    box-shadow .35s ease,

    border-color .35s ease,

    background .35s ease;

}

.justicehero-btn:hover{

    transform:translateY(-6px);

}

.justicehero-primary:hover{

    box-shadow:

    0 15px 35px rgba(0,188,212,.30);

}

.justicehero-outline:hover{

    border-color:#00BCD4;

    background:rgba(0,188,212,.08);

    color:#00BCD4;

}

/*==================================================
        BADGE
==================================================*/

.justicehero-badge{

    transition:.35s;

}

.justicehero-badge:hover{

    border-color:rgba(0,188,212,.45);

    box-shadow:

    0 0 20px rgba(0,188,212,.15);

}

/*==================================================
        FLOATING DOCUMENTS
==================================================*/

.justicehero-documents span{

    animation:justiceDocumentFloat 7s ease-in-out infinite;

    transition:.35s;

}

.justicehero-documents span:nth-child(2){

    animation-delay:1s;

}

.justicehero-documents span:nth-child(3){

    animation-delay:2s;

}

.justicehero-documents span:nth-child(4){

    animation-delay:3s;

}

@keyframes justiceDocumentFloat{

    0%,100%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(-12px) rotate(4deg);

    }

}

.justicehero-documents span:hover{

    transform:scale(1.12);

    box-shadow:

    0 0 25px rgba(0,188,212,.25);

}

/*==================================================
        JUSTICE SYMBOL
==================================================*/

.justicehero-symbol{

    animation:justiceGlow 6s ease-in-out infinite;

}

@keyframes justiceGlow{

    0%,100%{

        opacity:.45;

        transform:translateY(-50%) scale(1);

    }

    50%{

        opacity:.8;

        transform:translateY(-50%) scale(1.05);

    }

}

/*==================================================
        SPOTLIGHTS
==================================================*/

.justicehero-light-left{

    animation:justiceLightLeft 8s ease-in-out infinite;

}

.justicehero-light-right{

    animation:justiceLightRight 8s ease-in-out infinite;

}

@keyframes justiceLightLeft{

    0%,100%{

        transform:rotate(-18deg);

        opacity:.18;

    }

    50%{

        transform:rotate(-14deg);

        opacity:.32;

    }

}

@keyframes justiceLightRight{

    0%,100%{

        transform:rotate(18deg);

        opacity:.18;

    }

    50%{

        transform:rotate(14deg);

        opacity:.32;

    }

}

/*==================================================
        PARTICLES
==================================================*/

.justicehero-particles span{

    animation:justiceParticle 10s linear infinite;

}

.justicehero-particles span:nth-child(2){

animation-delay:1s;

}

.justicehero-particles span:nth-child(3){

animation-delay:2s;

}

.justicehero-particles span:nth-child(4){

animation-delay:3s;

}

.justicehero-particles span:nth-child(5){

animation-delay:4s;

}

.justicehero-particles span:nth-child(6){

animation-delay:5s;

}

@keyframes justiceParticle{

    0%{

        transform:translateY(0);

        opacity:0;

    }

    20%{

        opacity:.6;

    }

    100%{

        transform:translateY(-90px);

        opacity:0;

    }

}

/*==================================================
        SCROLL INDICATOR
==================================================*/

.justicehero-scroll span{

    animation:justiceScroll 2s infinite;

}

@keyframes justiceScroll{

    0%{

        opacity:1;

        transform:translate(-50%,0);

    }

    100%{

        opacity:0;

        transform:translate(-50%,22px);

    }

}

/*==================================================
        CONTENT ENTRANCE
==================================================*/

.justicehero-content{

    animation:justiceContentUp .9s ease;

}

@keyframes justiceContentUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
        HEADING EFFECT
==================================================*/

.justicehero-content h1 span{

    position:relative;

}

.justicehero-content h1 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:100%;

    height:3px;

    border-radius:30px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

/*==================================================
        RESPONSIVE IMPROVEMENTS
==================================================*/

@media(max-width:768px){

.justicehero-rays{

opacity:.15;

}

.justicehero-particles span{

width:4px;

height:4px;

}

.justicehero-scroll{

bottom:20px;

transform:translateX(-50%) scale(.85);

}

.justicehero-badge{

font-size:.75rem;

padding:10px 20px;

}

}

/*====================================
BREADCRUMB
====================================*/

.justicehero-breadcrumb{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:30px;

}

.justicehero-breadcrumb a{

    color:#CBD5E1;

    text-decoration:none;

    transition:.35s;

}

.justicehero-breadcrumb a:hover{

    color:#00BCD4;

}

.justicehero-breadcrumb span{

    color:#7ED321;

    font-size:.9rem;

}

.justicehero-current{

    color:#00BCD4 !important;

    font-weight:600;

}

@media(max-width:768px){

.justicehero-breadcrumb{

gap:8px;

font-size:.85rem;

margin-bottom:25px;

}

}

/* Hero Section Ends Here */

/* About Section Starts Here */

/*==================================================
        RIGHTS CHARTER SECTION
==================================================*/

.rightscharter-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.rightscharter-section::before{

    content:"";

    position:absolute;

    width:480px;

    height:480px;

    left:-220px;

    top:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(120px);

}

.rightscharter-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*====================================
SECTION HEADING
====================================*/

.rightscharter-section .section-heading{

    max-width:900px;

    margin:0 auto 80px;

    position:relative;

    z-index:2;

}

.rightscharter-section .section-heading h2{

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

    margin:25px 0;

}

.rightscharter-section .section-heading h2 span{

    color:#00BCD4;

}

.rightscharter-section .section-heading p{

    color:#CBD5E1;

    line-height:2;

    font-size:1.05rem;

    max-width:760px;

    margin:auto;

}

/*====================================
DOCUMENT
====================================*/

.rightscharter-document{

    display:flex;

    justify-content:center;

    margin-bottom:70px;

    position:relative;

    z-index:2;

}

.rightscharter-paper{

    position:relative;

    width:100%;

    max-width:720px;

    padding:60px;

    border-radius:30px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    overflow:hidden;

}

/* Paper Glow */

.rightscharter-paper::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        135deg,
        rgba(255,255,255,.05),
        transparent
    );

    pointer-events:none;

}

.rightscharter-paper::after{

    content:"";

    position:absolute;

    right:-80px;

    top:-80px;

    width:180px;

    height:180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.10),
        transparent 70%
    );

}

/*====================================
HEADER
====================================*/

.rightscharter-header{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    margin-bottom:40px;

}

.rightscharter-header i{

    font-size:2.5rem;

    color:#00BCD4;

}

.rightscharter-header h3{

    color:#fff;

    font-size:2rem;

    margin:0;

}

/*====================================
LINES
====================================*/

.rightscharter-lines{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.rightscharter-lines span{

    display:block;

    width:100%;

    height:3px;

    border-radius:20px;

    background:rgba(255,255,255,.08);

}

.rightscharter-lines span:nth-child(2){

    width:90%;

}

.rightscharter-lines span:nth-child(3){

    width:96%;

}

.rightscharter-lines span:nth-child(4){

    width:82%;

}

.rightscharter-lines span:nth-child(5){

    width:94%;

}

.rightscharter-lines span:nth-child(6){

    width:76%;

}

/*====================================
SEAL
====================================*/

.rightscharter-seal{

    position:absolute;

    right:40px;

    bottom:35px;

    width:80px;

    height:80px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    color:#fff;

    font-size:2rem;

    box-shadow:

    0 10px 30px rgba(0,188,212,.25);

}

/*====================================
CONTENT
====================================*/

.rightscharter-content{

    max-width:850px;

    margin:0 auto 60px;

    text-align:center;

    position:relative;

    z-index:2;

}

.rightscharter-content h3{

    color:#fff;

    font-size:2rem;

    margin-bottom:25px;

}

.rightscharter-content p{

    color:#CBD5E1;

    line-height:2;

    font-size:1.03rem;

}

/*====================================
PRINCIPLES
====================================*/

.rightscharter-principles{

    text-align:center;

    position:relative;

    z-index:2;

}

.rightscharter-principles h4{

    color:#fff;

    font-size:1.7rem;

    margin-bottom:35px;

}

.rightscharter-tags{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;

}

.rightscharter-tag{

    display:flex;

    align-items:center;

    gap:12px;

    padding:16px 28px;

    border-radius:50px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:#fff;

    font-weight:600;

}

.rightscharter-tag i{

    color:#00BCD4;

    font-size:1.1rem;

}

/* Part - 2 */

/*==================================================
        PAPER HOVER
==================================================*/

.rightscharter-paper{

    transition:

    transform .45s ease,

    box-shadow .45s ease,

    border-color .45s ease;

}

.rightscharter-paper:hover{

    transform:translateY(-10px);

    border-color:rgba(0,188,212,.20);

    box-shadow:

    0 25px 60px rgba(0,188,212,.12);

}

/*==================================================
        DOCUMENT HEADER
==================================================*/

.rightscharter-header i{

    transition:.4s;

}

.rightscharter-paper:hover .rightscharter-header i{

    transform:rotate(-12deg) scale(1.15);

    color:#7ED321;

}

.rightscharter-header h3{

    transition:.35s;

}

.rightscharter-paper:hover .rightscharter-header h3{

    color:#00BCD4;

}

/*==================================================
        DOCUMENT LINES
==================================================*/

.rightscharter-lines span{

    transition:.35s;

}

.rightscharter-paper:hover .rightscharter-lines span{

    background:rgba(0,188,212,.15);

}

/*==================================================
        SEAL
==================================================*/

.rightscharter-seal{

    transition:

    transform .4s ease,

    box-shadow .4s ease;

}

.rightscharter-paper:hover .rightscharter-seal{

    transform:rotate(12deg) scale(1.08);

    box-shadow:

    0 0 25px rgba(0,188,212,.30),

    0 0 50px rgba(126,211,33,.15);

}

/*==================================================
        CONTENT
==================================================*/

.rightscharter-content h3{

    transition:.35s;

}

.rightscharter-content:hover h3{

    color:#00BCD4;

}

.rightscharter-content p{

    transition:.35s;

}

.rightscharter-content:hover p{

    color:#E2E8F0;

}

/*==================================================
        PRINCIPLE TAGS
==================================================*/

.rightscharter-tag{

    transition:

    transform .35s ease,

    background .35s ease,

    border-color .35s ease,

    box-shadow .35s ease;

}

.rightscharter-tag:hover{

    transform:translateY(-6px);

    border-color:rgba(0,188,212,.25);

    background:rgba(0,188,212,.08);

    box-shadow:

    0 15px 35px rgba(0,188,212,.15);

}

.rightscharter-tag i{

    transition:.35s;

}

.rightscharter-tag:hover i{

    transform:scale(1.2);

    color:#7ED321;

}

/*==================================================
        FLOATING DOCUMENT
==================================================*/

.rightscharter-paper{

    animation:rightsPaperFloat 8s ease-in-out infinite;

}

@keyframes rightsPaperFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

/*==================================================
        SEAL PULSE
==================================================*/

.rightscharter-seal::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.15);

    animation:rightsSealPulse 3s ease-out infinite;

}

@keyframes rightsSealPulse{

    from{

        transform:scale(1);

        opacity:.7;

    }

    to{

        transform:scale(1.45);

        opacity:0;

    }

}

/*==================================================
        ENTRANCE ANIMATION
==================================================*/

.rightscharter-document{

    animation:rightsFadeUp .9s ease;

}

.rightscharter-content{

    animation:rightsFadeUp 1.1s ease;

}

.rightscharter-principles{

    animation:rightsFadeUp 1.3s ease;

}

@keyframes rightsFadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
        RESPONSIVE
==================================================*/

@media(max-width:991px){

.rightscharter-paper{

padding:45px 35px;

}

.rightscharter-header h3{

font-size:1.7rem;

}

.rightscharter-content h3{

font-size:1.7rem;

}

.rightscharter-tag{

padding:14px 22px;

}

}

@media(max-width:768px){

.rightscharter-section{

padding:90px 5%;

}

.rightscharter-section .section-heading{

margin-bottom:60px;

}

.rightscharter-section .section-heading h2{

font-size:2.3rem;

}

.rightscharter-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.rightscharter-paper{

padding:30px 20px;

border-radius:22px;

}

.rightscharter-header{

flex-direction:column;

gap:12px;

margin-bottom:30px;

}

.rightscharter-header h3{

font-size:1.45rem;

text-align:center;

}

.rightscharter-header i{

font-size:2rem;

}

.rightscharter-seal{

width:60px;

height:60px;

font-size:1.5rem;

right:20px;

bottom:20px;

}

.rightscharter-content{

margin-bottom:45px;

}

.rightscharter-content h3{

font-size:1.5rem;

}

.rightscharter-content p{

font-size:.95rem;

line-height:1.8;

}

.rightscharter-principles h4{

font-size:1.35rem;

margin-bottom:25px;

}

.rightscharter-tags{

gap:15px;

}

.rightscharter-tag{

width:100%;

justify-content:center;

padding:14px 20px;

font-size:.95rem;

}

}

/* About Section Ends Here */

/* Fundamentals Section Starts Here */

/*==================================================
        FUNDAMENTAL RIGHTS SECTION
==================================================*/

.rightsgrid-section{

    position:relative;

    padding:130px 5%;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.rightsgrid-section::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    left:-220px;

    top:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(120px);

}

.rightsgrid-section::after{

    content:"";

    position:absolute;

    width:460px;

    height:460px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.rightsgrid-section .section-heading{

    max-width:850px;

    margin:0 auto 80px;

    position:relative;

    z-index:5;

}

.rightsgrid-section .section-heading h2{

    color:#fff;

    font-size:3.2rem;

    margin:25px 0;

    line-height:1.2;

}

.rightsgrid-section .section-heading h2 span{

    color:#00BCD4;

}

.rightsgrid-section .section-heading p{

    color:#CBD5E1;

    max-width:760px;

    margin:auto;

    line-height:2;

    font-size:1.05rem;

}

/*==================================
LAYOUT
==================================*/

.rightsgrid-layout{

    position:relative;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

    max-width:1200px;

    margin:auto;

    z-index:5;

}

/*==================================
CENTER BOX
==================================*/

.rightsgrid-center{

    grid-column:1 / span 2;

    padding:50px;

    border-radius:28px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    text-align:center;

    position:relative;

    overflow:hidden;

}

.rightsgrid-center::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,188,212,.10),

        transparent 70%

    );

}

.rightsgrid-center-icon{

    width:90px;

    height:90px;

    margin:auto auto 25px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(

        135deg,

        #00BCD4,

        #7ED321

    );

    color:#fff;

    font-size:2rem;

    position:relative;

    z-index:2;

}

.rightsgrid-center h2{

    color:#fff;

    margin-bottom:18px;

    position:relative;

    z-index:2;

}

.rightsgrid-center p{

    color:#CBD5E1;

    max-width:650px;

    margin:auto;

    line-height:1.9;

    position:relative;

    z-index:2;

}

/*==================================
RIGHT CARD
==================================*/

.rightsgrid-card{

    padding:35px;

    border-radius:24px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(16px);

    position:relative;

    overflow:hidden;

}

.rightsgrid-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:linear-gradient(

        to bottom,

        #00BCD4,

        #7ED321

    );

}

/*==================================
ICON
==================================*/

.rightsgrid-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,188,212,.10);

    color:#00BCD4;

    font-size:1.8rem;

    margin-bottom:25px;

}

/*==================================
TEXT
==================================*/

.rightsgrid-card h3{

    color:#fff;

    margin-bottom:15px;

    font-size:1.4rem;

}

.rightsgrid-card p{

    color:#CBD5E1;

    line-height:1.8;

}

/*==================================
UNDERLINE
==================================*/

.rightsgrid-section h2 span{

    position:relative;

}

.rightsgrid-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:30px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

/* Part - 2 */

/*==================================================
        CARD HOVER
==================================================*/

.rightsgrid-card{

    transition:

    transform .35s ease,

    border-color .35s ease,

    box-shadow .35s ease,

    background .35s ease;

}

.rightsgrid-card:hover{

    transform:translateY(-8px);

    border-color:rgba(0,188,212,.20);

    background:rgba(255,255,255,.06);

    box-shadow:

    0 18px 40px rgba(0,188,212,.12);

}

/*==================================================
        ICON
==================================================*/

.rightsgrid-icon{

    transition:

    transform .35s ease,

    background .35s ease,

    color .35s ease,

    box-shadow .35s ease;

}

.rightsgrid-card:hover .rightsgrid-icon{

    transform:rotate(-10deg) scale(1.08);

    background:rgba(0,188,212,.18);

    color:#7ED321;

    box-shadow:

    0 0 25px rgba(0,188,212,.18);

}

/*==================================================
        TITLE
==================================================*/

.rightsgrid-card h3{

    transition:.35s;

}

.rightsgrid-card:hover h3{

    color:#00BCD4;

}

.rightsgrid-card p{

    transition:.35s;

}

.rightsgrid-card:hover p{

    color:#E2E8F0;

}

/*==================================================
        LEFT ACCENT BAR
==================================================*/

.rightsgrid-card::before{

    transition:.35s;

}

.rightsgrid-card:hover::before{

    width:8px;

}

/*==================================================
        CENTER BOX
==================================================*/

.rightsgrid-center{

    transition:

    transform .4s ease,

    border-color .4s ease,

    box-shadow .4s ease;

}

.rightsgrid-center:hover{

    transform:translateY(-8px);

    border-color:rgba(0,188,212,.20);

    box-shadow:

    0 25px 60px rgba(0,188,212,.15);

}

.rightsgrid-center-icon{

    transition:

    transform .4s ease,

    box-shadow .4s ease;

}

.rightsgrid-center:hover .rightsgrid-center-icon{

    transform:rotate(360deg) scale(1.08);

    box-shadow:

    0 0 30px rgba(0,188,212,.30),

    0 0 55px rgba(126,211,33,.15);

}

.rightsgrid-center h2{

    transition:.35s;

}

.rightsgrid-center:hover h2{

    color:#00BCD4;

}

/*==================================================
        FLOAT ANIMATION
==================================================*/

.rightsgrid-card{

    animation:rightsCardFloat 8s ease-in-out infinite;

}

.rightsgrid-card:nth-child(1){

    animation-delay:0s;

}

.rightsgrid-card:nth-child(2){

    animation-delay:1s;

}

.rightsgrid-card:nth-child(4){

    animation-delay:2s;

}

.rightsgrid-card:nth-child(5){

    animation-delay:3s;

}

.rightsgrid-card:nth-child(6){

    animation-delay:4s;

}

.rightsgrid-card:nth-child(7){

    animation-delay:5s;

}

@keyframes rightsCardFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

}

/*==================================================
        CENTER GLOW
==================================================*/

.rightsgrid-center::after{

    content:"";

    position:absolute;

    inset:-12px;

    border-radius:32px;

    border:2px solid rgba(0,188,212,.10);

    animation:rightsCenterPulse 3.5s ease-in-out infinite;

}

@keyframes rightsCenterPulse{

    0%{

        transform:scale(.98);

        opacity:.8;

    }

    100%{

        transform:scale(1.03);

        opacity:0;

    }

}

/*==================================================
        ENTRANCE
==================================================*/

.rightsgrid-card,

.rightsgrid-center{

    opacity:0;

    animation:rightsFadeUp .8s forwards;

}

.rightsgrid-card:nth-child(1){

animation-delay:.1s;

}

.rightsgrid-card:nth-child(2){

animation-delay:.2s;

}

.rightsgrid-center{

animation-delay:.35s;

}

.rightsgrid-card:nth-child(4){

animation-delay:.5s;

}

.rightsgrid-card:nth-child(5){

animation-delay:.6s;

}

.rightsgrid-card:nth-child(6){

animation-delay:.7s;

}

.rightsgrid-card:nth-child(7){

animation-delay:.8s;

}

@keyframes rightsFadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
        RESPONSIVE
==================================================*/

@media(max-width:991px){

.rightsgrid-layout{

gap:22px;

}

.rightsgrid-center{

padding:40px 30px;

}

.rightsgrid-card{

padding:28px;

}

.rightsgrid-icon{

width:60px;

height:60px;

font-size:1.5rem;

}

.rightsgrid-card h3{

font-size:1.25rem;

}

}

@media(max-width:768px){

.rightsgrid-section{

padding:90px 5%;

}

.rightsgrid-section .section-heading{

margin-bottom:60px;

}

.rightsgrid-section .section-heading h2{

font-size:2.3rem;

}

.rightsgrid-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.rightsgrid-layout{

grid-template-columns:1fr;

}

.rightsgrid-center{

grid-column:auto;

padding:35px 25px;

order:-1;

}

.rightsgrid-center h2{

font-size:1.8rem;

}

.rightsgrid-center p{

font-size:.95rem;

line-height:1.8;

}

.rightsgrid-card{

padding:25px;

}

.rightsgrid-icon{

width:58px;

height:58px;

font-size:1.4rem;

margin-bottom:18px;

}

.rightsgrid-card h3{

font-size:1.2rem;

}

.rightsgrid-card p{

font-size:.92rem;

line-height:1.7;

}

}

/* Fundamentals Section Ends Here */

/* Path Sections Starts Here */

/*==================================================
        JUSTICE BRIDGE SECTION
==================================================*/

.justicebridge-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.justicebridge-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    left:-180px;

    top:-180px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(0,188,212,.08),
    transparent 70%);

    filter:blur(120px);

}

.justicebridge-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(126,211,33,.08),
    transparent 70%);

    filter:blur(120px);

}

/*====================================
SECTION HEADING
====================================*/

.justicebridge-section .section-heading{

    max-width:850px;

    margin:0 auto 90px;

    position:relative;

    z-index:5;

}

.justicebridge-section .section-heading h2{

    color:#fff;

    font-size:3.2rem;

    margin:25px 0;

}

.justicebridge-section .section-heading h2 span{

    color:#00BCD4;

}

.justicebridge-section .section-heading p{

    color:#CBD5E1;

    line-height:2;

    max-width:760px;

    margin:auto;

}

/*====================================
BRIDGE
====================================*/

.justicebridge{

    position:relative;

    max-width:1350px;

    margin:auto;

    padding-top:40px;

    z-index:5;

}

/*====================================
BRIDGE DECK
====================================*/

.justicebridge-deck{

    position:absolute;

    top:0;

    left:3%;

    right:3%;

    height:16px;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    box-shadow:

    0 0 20px rgba(0,188,212,.15);

}

/*====================================
GRID
====================================*/

.justicebridge-grid{

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:25px;

}

/*====================================
ITEM
====================================*/

.justicebridge-item{

    text-align:center;

    position:relative;

}

/*====================================
PILLAR
====================================*/

.justicebridge-pillar{

    width:12px;

    height:90px;

    margin:0 auto;

    background:linear-gradient(

        to bottom,

        #00BCD4,

        #7ED321

    );

    border-radius:20px;

    opacity:.35;

}

/*====================================
ICON
====================================*/

.justicebridge-icon{

    width:90px;

    height:90px;

    margin:20px auto;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(15px);

    color:#00BCD4;

    font-size:2rem;

    position:relative;

}

.justicebridge-icon::before{

    content:"";

    position:absolute;

    inset:-10px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

}

/*====================================
TEXT
====================================*/

.justicebridge-item h4{

    color:#fff;

    margin-bottom:12px;

    font-size:1.2rem;

}

.justicebridge-item p{

    color:#CBD5E1;

    line-height:1.8;

    font-size:.92rem;

    padding:0 10px;

}

/*====================================
HEADING UNDERLINE
====================================*/

.justicebridge-section h2 span{

    position:relative;

}

.justicebridge-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:30px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

/*====================================
RESPONSIVE
====================================*/

@media(max-width:1200px){

.justicebridge-grid{

grid-template-columns:repeat(3,1fr);

row-gap:50px;

}

.justicebridge-deck{

display:none;

}

.justicebridge-pillar{

display:none;

}

}

@media(max-width:768px){

.justicebridge-section{

padding:90px 5%;

}

.justicebridge-section .section-heading{

margin-bottom:60px;

}

.justicebridge-section .section-heading h2{

font-size:2.3rem;

}

.justicebridge-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.justicebridge-grid{

grid-template-columns:1fr;

gap:35px;

}

.justicebridge-icon{

width:75px;

height:75px;

font-size:1.6rem;

margin-bottom:15px;

}

.justicebridge-item h4{

font-size:1.1rem;

}

.justicebridge-item p{

font-size:.9rem;

}

}

/* Part-2 */

/*==================================================
        CARD HOVER
==================================================*/

.justicebridge-item{

    transition:transform .35s ease;

}

.justicebridge-item:hover{

    transform:translateY(-10px);

}

.justicebridge-icon{

    transition:

    transform .35s ease,

    border-color .35s ease,

    box-shadow .35s ease,

    background .35s ease;

}

.justicebridge-item:hover .justicebridge-icon{

    transform:scale(1.08);

    border-color:rgba(0,188,212,.20);

    background:rgba(255,255,255,.08);

    box-shadow:

    0 20px 45px rgba(0,188,212,.18);

}

/*==================================================
        ICON
==================================================*/

.justicebridge-icon i{

    transition:.35s;

}

.justicebridge-item:hover .justicebridge-icon i{

    transform:rotate(-10deg) scale(1.15);

    color:#7ED321;

}

/*==================================================
        RIPPLE
==================================================*/

.justicebridge-icon::before{

    animation:bridgeRipple 3s ease-out infinite;

}

@keyframes bridgeRipple{

    0%{

        transform:scale(1);

        opacity:.8;

    }

    100%{

        transform:scale(1.35);

        opacity:0;

    }

}

/*==================================================
        PILLAR
==================================================*/

.justicebridge-pillar{

    transition:.35s;

}

.justicebridge-item:hover .justicebridge-pillar{

    opacity:1;

    box-shadow:

    0 0 20px rgba(0,188,212,.20);

}

/*==================================================
        TITLE
==================================================*/

.justicebridge-item h4{

    transition:.35s;

}

.justicebridge-item:hover h4{

    color:#00BCD4;

}

.justicebridge-item p{

    transition:.35s;

}

.justicebridge-item:hover p{

    color:#E2E8F0;

}

/*==================================================
        BRIDGE DECK
==================================================*/

.justicebridge-deck{

    animation:bridgeGlow 5s ease-in-out infinite;

}

@keyframes bridgeGlow{

    0%,100%{

        opacity:.25;

    }

    50%{

        opacity:.65;

    }

}

/*==================================================
        FLOATING ITEMS
==================================================*/

/* .justicebridge-item:nth-child(1){

    animation:bridgeFloat1 6s ease-in-out infinite;

}

.justicebridge-item:nth-child(2){

    animation:bridgeFloat2 7s ease-in-out infinite;

}

.justicebridge-item:nth-child(3){

    animation:bridgeFloat3 6.5s ease-in-out infinite;

}

.justicebridge-item:nth-child(4){

    animation:bridgeFloat4 7.5s ease-in-out infinite;

}

.justicebridge-item:nth-child(5){

    animation:bridgeFloat5 6.8s ease-in-out infinite;

}

.justicebridge-item:nth-child(6){

    animation:bridgeFloat6 8s ease-in-out infinite;

}

@keyframes bridgeFloat1{

    50%{

        transform:translateY(-8px);

    }

}

@keyframes bridgeFloat2{

    50%{

        transform:translateY(-12px);

    }

}

@keyframes bridgeFloat3{

    50%{

        transform:translateY(-8px);

    }

}

@keyframes bridgeFloat4{

    50%{

        transform:translateY(-12px);

    }

}

@keyframes bridgeFloat5{

    50%{

        transform:translateY(-8px);

    }

}

@keyframes bridgeFloat6{

    50%{

        transform:translateY(-12px);

    }

} */

/*==================================================
        ENTRANCE
==================================================*/

/* .justicebridge-item{

    opacity:0;

    animation:bridgeFadeUp .8s forwards;

}

.justicebridge-item:nth-child(1){

animation-delay:.1s;

}

.justicebridge-item:nth-child(2){

animation-delay:.2s;

}

.justicebridge-item:nth-child(3){

animation-delay:.3s;

}

.justicebridge-item:nth-child(4){

animation-delay:.4s;

}

.justicebridge-item:nth-child(5){

animation-delay:.5s;

}

.justicebridge-item:nth-child(6){

animation-delay:.6s;

} */

/* @keyframes bridgeFadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

} */

/*==================================================
        RESPONSIVE
==================================================*/

@media(max-width:1200px){

.justicebridge-item{

animation:none;

opacity:1;

}

.justicebridge-deck{

display:none;

}

.justicebridge-pillar{

display:none;

}

}

@media(max-width:768px){

.justicebridge-item:hover{

transform:translateY(-6px);

}

.justicebridge-icon{

width:75px;

height:75px;

}

.justicebridge-icon i{

font-size:1.5rem;

}

.justicebridge-item h4{

font-size:1.1rem;

}

.justicebridge-item p{

font-size:.9rem;

line-height:1.7;

}

}

/* Path Sections Ends Here */

/* Service Section Starts Here */

/*==================================================
        ADVOCACY COMMAND CENTER
==================================================*/

.advocacypanel-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.advocacypanel-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(0,188,212,.08),
    transparent 70%);

    filter:blur(120px);

}

.advocacypanel-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(126,211,33,.08),
    transparent 70%);

    filter:blur(120px);

}

/*====================================
SECTION HEADING
====================================*/

.advocacypanel-section .section-heading{

    max-width:850px;

    margin:0 auto 70px;

    position:relative;

    z-index:5;

}

.advocacypanel-section .section-heading h2{

    color:#fff;

    font-size:3.2rem;

    margin:25px 0;

    line-height:1.2;

}

.advocacypanel-section .section-heading h2 span{

    color:#00BCD4;

}

.advocacypanel-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*====================================
GRID
====================================*/

.advocacypanel-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

    max-width:1200px;

    margin:auto;

    position:relative;

    z-index:5;

}

/*====================================
MAIN PANEL
====================================*/

.advocacypanel-main{

    grid-column:1 / span 2;

    display:flex;

    align-items:center;

    gap:35px;

    padding:45px;

    border-radius:28px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    position:relative;

    overflow:hidden;

}

.advocacypanel-main::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:6px;

    height:100%;

    background:linear-gradient(

        to bottom,

        #00BCD4,

        #7ED321

    );

}

.advocacypanel-main::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    right:-90px;

    top:-90px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,188,212,.08),

        transparent 70%

    );

}

/*====================================
SMALL PANELS
====================================*/

.advocacypanel-box{

    padding:35px;

    border-radius:24px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(16px);

    position:relative;

    overflow:hidden;

}

.advocacypanel-box::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:linear-gradient(

        to bottom,

        #00BCD4,

        #7ED321

    );

}

/*====================================
ICON
====================================*/

.advocacypanel-icon{

    width:75px;

    height:75px;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,188,212,.10);

    color:#00BCD4;

    font-size:1.8rem;

    flex-shrink:0;

}

.advocacypanel-main .advocacypanel-icon{

    width:90px;

    height:90px;

    font-size:2.2rem;

}

/*====================================
LABEL
====================================*/

.advocacypanel-label{

    display:inline-block;

    padding:8px 18px;

    margin-bottom:18px;

    border-radius:30px;

    background:rgba(0,188,212,.12);

    color:#00BCD4;

    font-size:.75rem;

    font-weight:600;

    letter-spacing:1px;

}

/*====================================
TEXT
====================================*/

.advocacypanel-main h3{

    color:#fff;

    font-size:2rem;

    margin-bottom:18px;

}

.advocacypanel-main p{

    color:#CBD5E1;

    line-height:1.9;

}

.advocacypanel-box h4{

    color:#fff;

    font-size:1.35rem;

    margin:22px 0 14px;

}

.advocacypanel-box p{

    color:#CBD5E1;

    line-height:1.8;

}

/*====================================
UNDERLINE
====================================*/

.advocacypanel-section h2 span{

    position:relative;

}

.advocacypanel-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:30px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

/*====================================
RESPONSIVE
====================================*/

@media(max-width:991px){

.advocacypanel-main{

flex-direction:column;

text-align:center;

padding:35px;

}

.advocacypanel-grid{

gap:20px;

}

}

@media(max-width:768px){

.advocacypanel-section{

padding:90px 5%;

}

.advocacypanel-section .section-heading{

margin-bottom:55px;

}

.advocacypanel-section .section-heading h2{

font-size:2.3rem;

}

.advocacypanel-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.advocacypanel-grid{

grid-template-columns:1fr;

}

.advocacypanel-main{

grid-column:auto;

}

.advocacypanel-box{

padding:25px;

}

.advocacypanel-main{

padding:30px 25px;

}

.advocacypanel-main .advocacypanel-icon{

width:75px;

height:75px;

font-size:1.8rem;

}

.advocacypanel-icon{

width:60px;

height:60px;

font-size:1.5rem;

}

.advocacypanel-main h3{

font-size:1.6rem;

}

.advocacypanel-box h4{

font-size:1.2rem;

}

.advocacypanel-main p,

.advocacypanel-box p{

font-size:.92rem;

line-height:1.7;

}

}

/* Part - 2 */

/*==================================================
        PANEL HOVER
==================================================*/

.advocacypanel-main,
.advocacypanel-box{

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease,
        background .35s ease;

}

.advocacypanel-main:hover,
.advocacypanel-box:hover{

    transform:translateY(-8px);

    border-color:rgba(0,188,212,.20);

    background:rgba(255,255,255,.07);

    box-shadow:
        0 20px 45px rgba(0,188,212,.15);

}

/*==================================================
        LEFT ACCENT BAR
==================================================*/

.advocacypanel-main::before,
.advocacypanel-box::before{

    transition:.35s;

}

.advocacypanel-main:hover::before,
.advocacypanel-box:hover::before{

    width:8px;

}

/*==================================================
        ICON
==================================================*/

.advocacypanel-icon{

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        box-shadow .35s ease;

}

.advocacypanel-main:hover .advocacypanel-icon,
.advocacypanel-box:hover .advocacypanel-icon{

    transform:rotate(-8deg) scale(1.08);

    background:rgba(0,188,212,.16);

    color:#7ED321;

    box-shadow:
        0 0 25px rgba(0,188,212,.20);

}

/*==================================================
        ICON RIPPLE
==================================================*/

.advocacypanel-icon{

    position:relative;

}

.advocacypanel-icon::after{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:24px;

    border:2px solid rgba(0,188,212,.12);

    animation:advocacyRipple 3s ease-out infinite;

}

@keyframes advocacyRipple{

    from{

        transform:scale(1);

        opacity:.7;

    }

    to{

        transform:scale(1.25);

        opacity:0;

    }

}

/*==================================================
        LABEL
==================================================*/

.advocacypanel-label{

    transition:.35s;

}

.advocacypanel-main:hover .advocacypanel-label{

    background:#00BCD4;

    color:#fff;

}

/*==================================================
        TITLES
==================================================*/

.advocacypanel-main h3,
.advocacypanel-box h4{

    transition:.35s;

}

.advocacypanel-main:hover h3,
.advocacypanel-box:hover h4{

    color:#00BCD4;

}

.advocacypanel-main p,
.advocacypanel-box p{

    transition:.35s;

}

.advocacypanel-main:hover p,
.advocacypanel-box:hover p{

    color:#E2E8F0;

}

/*==================================================
        BACKGROUND GLOW
==================================================*/

.advocacypanel-main::after{

    transition:.5s;

}

.advocacypanel-main:hover::after{

    transform:scale(1.25);

    opacity:.9;

}

/*==================================================
        RESPONSIVE
==================================================*/

@media(max-width:991px){

.advocacypanel-main:hover,
.advocacypanel-box:hover{

transform:translateY(-5px);

}

}

@media(max-width:768px){

.advocacypanel-main:hover,
.advocacypanel-box:hover{

transform:none;

}

.advocacypanel-icon{

width:60px;

height:60px;

font-size:1.5rem;

}

.advocacypanel-main .advocacypanel-icon{

width:70px;

height:70px;

font-size:1.7rem;

}

}

/* Service Section Ends Here */

/* Matter Section Starts Here */

/*==================================================
        WHY HUMAN RIGHTS MATTER
==================================================*/

.rightsimpact-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.rightsimpact-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(120px);

}

.rightsimpact-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*====================================
SECTION HEADING
====================================*/

.rightsimpact-section .section-heading{

    max-width:850px;

    margin:0 auto 80px;

    position:relative;

    z-index:5;

}

.rightsimpact-section .section-heading h2{

    color:#fff;

    font-size:3.2rem;

    margin:25px 0;

    line-height:1.2;

}

.rightsimpact-section .section-heading h2 span{

    color:#00BCD4;

}

.rightsimpact-section .section-heading p{

    color:#CBD5E1;

    max-width:760px;

    margin:auto;

    line-height:2;

}

/*====================================
FLOW
====================================*/

.rightsimpact-flow{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:22px;

    max-width:1450px;

    margin:auto;

    z-index:5;

}

/*====================================
CARD
====================================*/

.rightsimpact-card{

    width:230px;

    min-height:250px;

    padding:30px;

    border-radius:24px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(15px);

    text-align:center;

    position:relative;

    overflow:hidden;

}

/* .rightsimpact-card:nth-child(1){

    transform:rotate(-6deg);

}

.rightsimpact-card:nth-child(3){

    transform:rotate(4deg);

}

.rightsimpact-card:nth-child(5){

    transform:rotate(-5deg);

}

.rightsimpact-card:nth-child(7){

    transform:rotate(5deg);

}

.rightsimpact-card:nth-child(9){

    transform:rotate(-4deg);

} */

.rightsimpact-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:linear-gradient(
        to bottom,
        #00BCD4,
        #7ED321
    );

}

/*====================================
ICON
====================================*/

.rightsimpact-icon{

    width:70px;

    height:70px;

    margin:0 auto 22px;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,188,212,.10);

    color:#00BCD4;

    font-size:1.7rem;

}

.rightsimpact-card h3{

    color:#fff;

    font-size:1.25rem;

    margin-bottom:15px;

}

.rightsimpact-card p{

    color:#CBD5E1;

    line-height:1.8;

    font-size:.92rem;

}

/*====================================
ARROWS
====================================*/

.rightsimpact-arrow{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    color:#00BCD4;

    font-size:1.2rem;

}

/*====================================
UNDERLINE
====================================*/

.rightsimpact-section h2 span{

    position:relative;

}

.rightsimpact-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    opacity:.35;

}

/*====================================
RESPONSIVE
====================================*/

@media(max-width:1200px){

.rightsimpact-flow{

flex-direction:column;

}

.rightsimpact-arrow{

transform:rotate(90deg);

}

.rightsimpact-card{

transform:none !important;

width:100%;

max-width:420px;

min-height:auto;

}

}

@media(max-width:768px){

.rightsimpact-section{

padding:90px 5%;

}

.rightsimpact-section .section-heading{

margin-bottom:55px;

}

.rightsimpact-section .section-heading h2{

font-size:2.3rem;

}

.rightsimpact-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.rightsimpact-card{

padding:25px;

}

.rightsimpact-icon{

width:60px;

height:60px;

font-size:1.5rem;

}

.rightsimpact-card h3{

font-size:1.15rem;

}

.rightsimpact-card p{

font-size:.9rem;

line-height:1.7;

}

.rightsimpact-arrow{

width:45px;

height:45px;

font-size:1rem;

}

}


/* part-2 */

/*==================================================
        CARD HOVER
==================================================*/

.rightsimpact-card{

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;

}

.rightsimpact-card:hover{

    transform:translateY(-10px) rotate(0deg) !important;

    border-color:rgba(0,188,212,.20);

    background:rgba(255,255,255,.07);

    box-shadow:
        0 20px 45px rgba(0,188,212,.15);

}

/*==================================================
        LEFT ACCENT BAR
==================================================*/

.rightsimpact-card::before{

    transition:.35s;

}

.rightsimpact-card:hover::before{

    width:8px;

}

/*==================================================
        ICON
==================================================*/

.rightsimpact-icon{

    position:relative;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        box-shadow .35s ease;

}

.rightsimpact-card:hover .rightsimpact-icon{

    transform:rotate(-8deg) scale(1.08);

    background:rgba(0,188,212,.16);

    color:#7ED321;

    box-shadow:
        0 0 25px rgba(0,188,212,.20);

}

/*==================================================
        RIPPLE EFFECT
==================================================*/

.rightsimpact-icon::after{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:24px;

    border:2px solid rgba(0,188,212,.12);

    animation:rightsImpactRipple 3s ease-out infinite;

}

@keyframes rightsImpactRipple{

    from{

        transform:scale(1);

        opacity:.7;

    }

    to{

        transform:scale(1.25);

        opacity:0;

    }

}

/*==================================================
        ARROWS
==================================================*/

.rightsimpact-arrow{

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.rightsimpact-card:hover + .rightsimpact-arrow{

    transform:scale(1.15);

    background:rgba(0,188,212,.10);

    color:#7ED321;

    border-color:rgba(0,188,212,.20);

    box-shadow:
        0 0 20px rgba(0,188,212,.15);

}

/*==================================================
        TEXT
==================================================*/

.rightsimpact-card h3{

    transition:.35s;

}

.rightsimpact-card:hover h3{

    color:#00BCD4;

}

.rightsimpact-card p{

    transition:.35s;

}

.rightsimpact-card:hover p{

    color:#E2E8F0;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:1200px){

.rightsimpact-card:hover{

transform:translateY(-6px) !important;

}

.rightsimpact-card:hover + .rightsimpact-arrow{

transform:rotate(90deg) scale(1.1);

}

}

@media(max-width:768px){

.rightsimpact-card:hover{

transform:none !important;

}

.rightsimpact-icon{

width:60px;

height:60px;

font-size:1.5rem;

}

.rightsimpact-arrow{

width:45px;

height:45px;

font-size:1rem;

}

}

/* Matter Section Ends Here */

/* FAQ Section Starts Here */

/*==================================================
        JUSTICE FAQ SECTION
==================================================*/

.justicefaq-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.justicefaq-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(120px);

}

.justicefaq-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*====================================
SECTION HEADING
====================================*/

.justicefaq-section .section-heading{

    max-width:850px;

    margin:0 auto 70px;

    position:relative;

    z-index:5;

}

.justicefaq-section .section-heading h2{

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

    margin:25px 0;

}

.justicefaq-section .section-heading h2 span{

    color:#00BCD4;

}

.justicefaq-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*====================================
FAQ WRAPPER
====================================*/

.justicefaq-wrapper{

    max-width:950px;

    margin:auto;

    position:relative;

    z-index:5;

}

/*====================================
FAQ ITEM
====================================*/

.justicefaq-item{

    border-bottom:1px solid rgba(255,255,255,.08);

}

/*====================================
QUESTION
====================================*/

.justicefaq-question{

    width:100%;

    background:none;

    border:none;

    padding:28px 0;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    text-align:left;

}

/*====================================
LEFT
====================================*/

.justicefaq-left{

    display:flex;

    align-items:center;

    gap:22px;

}

/*====================================
ICON
====================================*/

.justicefaq-icon{

    width:52px;

    height:52px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,188,212,.10);

    color:#00BCD4;

    font-size:1.2rem;

    flex-shrink:0;

    box-shadow:

        0 0 18px rgba(0,188,212,.15);

}

/*====================================
TITLE
====================================*/

.justicefaq-question h4{

    color:#fff;

    font-size:1.2rem;

    margin:0;

    font-weight:600;

    transition:.35s;

}

/*====================================
PLUS
====================================*/

.justicefaq-toggle{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:#00BCD4;

    font-size:1.4rem;

    font-weight:600;

    transition:.35s;

    flex-shrink:0;

}

/*====================================
ANSWER
====================================*/

.justicefaq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .45s ease;

}

.justicefaq-answer p{

    color:#CBD5E1;

    line-height:1.9;

    padding:

        0

        0

        28px

        74px;

}

/*====================================
ACTIVE
====================================*/

.justicefaq-item.active .justicefaq-answer{

    max-height:250px;

}

.justicefaq-item.active .justicefaq-toggle{

    background:#00BCD4;

    color:#fff;

}

.justicefaq-item.active .justicefaq-toggle::before{

    content:"−";

}

.justicefaq-item.active .justicefaq-toggle{

    font-size:0;

}

.justicefaq-item.active .justicefaq-toggle::before{

    font-size:1.6rem;

}

/*====================================
UNDERLINE
====================================*/

.justicefaq-section h2 span{

    position:relative;

}

.justicefaq-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:30px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

/*====================================
RESPONSIVE
====================================*/

@media(max-width:768px){

.justicefaq-section{

padding:90px 5%;

}

.justicefaq-section .section-heading{

margin-bottom:50px;

}

.justicefaq-section .section-heading h2{

font-size:2.3rem;

}

.justicefaq-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.justicefaq-question{

padding:22px 0;

}

.justicefaq-left{

gap:15px;

align-items:flex-start;

}

.justicefaq-icon{

width:42px;

height:42px;

font-size:1rem;

}

.justicefaq-question h4{

font-size:1rem;

line-height:1.5;

}

.justicefaq-toggle{

width:36px;

height:36px;

font-size:1.2rem;

}

.justicefaq-answer p{

padding:

0

0

22px

57px;

font-size:.9rem;

line-height:1.8;

}

}


/* part - 2 */

/*==================================================
        FAQ HOVER
==================================================*/

.justicefaq-item{

    transition:border-color .35s ease;

}

.justicefaq-item:hover{

    border-bottom-color:rgba(0,188,212,.20);

}

.justicefaq-question:hover h4{

    color:#00BCD4;

}

/*==================================================
        ICON
==================================================*/

.justicefaq-icon{

    position:relative;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        box-shadow .35s ease;

}

.justicefaq-question:hover .justicefaq-icon{

    transform:rotate(-8deg) scale(1.08);

    background:rgba(0,188,212,.16);

    color:#7ED321;

    box-shadow:
        0 0 22px rgba(0,188,212,.20);

}

.justicefaq-icon::after{

    content:"";

    position:absolute;

    inset:-6px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:justiceFaqPulse 3s ease-out infinite;

}

@keyframes justiceFaqPulse{

    from{

        transform:scale(1);

        opacity:.7;

    }

    to{

        transform:scale(1.35);

        opacity:0;

    }

}

/*==================================================
        PLUS BUTTON
==================================================*/

.justicefaq-toggle{

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

}

.justicefaq-question:hover .justicefaq-toggle{

    transform:rotate(90deg);

    background:rgba(0,188,212,.12);

    border-color:rgba(0,188,212,.20);

    color:#7ED321;

    box-shadow:
        0 0 20px rgba(0,188,212,.15);

}

/* Active */

.justicefaq-item.active .justicefaq-toggle{

    transform:rotate(180deg);

}

/*==================================================
        ANSWER ANIMATION
==================================================*/

.justicefaq-answer{

    opacity:0;

    transition:

        max-height .45s ease,

        opacity .35s ease;

}

.justicefaq-item.active .justicefaq-answer{

    opacity:1;

}

/*==================================================
        ACTIVE QUESTION
==================================================*/

.justicefaq-item.active .justicefaq-question h4{

    color:#00BCD4;

}

.justicefaq-item.active .justicefaq-icon{

    background:rgba(0,188,212,.18);

    color:#7ED321;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.justicefaq-question:hover .justicefaq-toggle{

transform:none;

}

.justicefaq-question:hover .justicefaq-icon{

transform:scale(1.05);

}

}

/* FAQ Section Ends Here */

/* CTA Section Starts Here */

/*==================================================
        JUSTICE CTA SECTION
==================================================*/

.justicecta-section{

    position:relative;

    overflow:hidden;

    padding:170px 5% 120px;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

    text-align:center;

}

/*==================================
BACKGROUND GLOW
==================================*/

.justicecta-section::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    left:50%;

    top:-280px;

    transform:translateX(-50%);

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.14),
        transparent 70%
    );

    filter:blur(120px);

}

.justicecta-section::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        transparent,

        rgba(5,8,22,.15),

        #050816

    );

    pointer-events:none;

}

/*==================================
LIGHT RAYS
==================================*/

.justicecta-rays{

    position:absolute;

    inset:0;

    background:

    repeating-conic-gradient(

        from 270deg at 50% 15%,

        rgba(0,188,212,.08) 0deg,

        transparent 12deg,

        transparent 24deg

    );

    opacity:.45;

    pointer-events:none;

}

/*==================================
PARTICLES
==================================*/

.justicecta-particles span{

    position:absolute;

    width:6px;

    height:6px;

    border-radius:50%;

    background:#00BCD4;

    opacity:.45;

}

.justicecta-particles span:nth-child(1){

top:18%;

left:22%;

}

.justicecta-particles span:nth-child(2){

top:28%;

right:24%;

}

.justicecta-particles span:nth-child(3){

top:42%;

left:18%;

}

.justicecta-particles span:nth-child(4){

top:38%;

right:18%;

}

.justicecta-particles span:nth-child(5){

top:52%;

left:50%;

}

.justicecta-particles span:nth-child(6){

top:60%;

right:46%;

}

/*==================================
MONUMENT
==================================*/

.justicecta-monument{

    position:relative;

    width:420px;

    height:230px;

    margin:0 auto 70px;

    z-index:3;

}

/* Roof */

.justicecta-roof{

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:240px;

    height:0;

    border-left:120px solid transparent;

    border-right:120px solid transparent;

    border-bottom:40px solid rgba(255,255,255,.12);

}

/* Base */

.justicecta-base{

    position:absolute;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    width:320px;

    height:22px;

    border-radius:4px;

    background:rgba(255,255,255,.12);

}

/* Columns */

.justicecta-column{

    position:absolute;

    bottom:22px;

    width:26px;

    height:140px;

    border-radius:6px;

    background:rgba(255,255,255,.12);

}

.justicecta-column:nth-child(2){

left:90px;

}

.justicecta-column:nth-child(3){

left:155px;

}

.justicecta-column:nth-child(4){

right:155px;

}

.justicecta-column:nth-child(5){

right:90px;

}

/* Scale */

.justicecta-scale{

    position:absolute;

    left:50%;

    top:55px;

    transform:translateX(-50%);

    width:90px;

    height:90px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,188,212,.10);

    color:#00BCD4;

    font-size:2.2rem;

    border:1px solid rgba(0,188,212,.20);

}

/*==================================
CONTENT
==================================*/

.justicecta-content{

    max-width:900px;

    margin:auto;

    position:relative;

    z-index:5;

}

.justicecta-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:40px;

    background:rgba(0,188,212,.12);

    color:#00BCD4;

    font-size:.85rem;

    font-weight:600;

    letter-spacing:1px;

}

.justicecta-content h2{

    color:#fff;

    font-size:3.4rem;

    margin:28px 0;

    line-height:1.2;

}

.justicecta-content h2 span{

    color:#00BCD4;

}

.justicecta-content p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

    font-size:1.05rem;

}

/*==================================
BUTTONS
==================================*/

.justicecta-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

    margin-top:45px;

}

.justicecta-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:16px 28px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.justicecta-primary{

    background:#00BCD4;

    color:#fff;

}

.justicecta-outline{

    border:1px solid rgba(255,255,255,.15);

    color:#fff;

    background:rgba(255,255,255,.05);

}

/*==================================
UNDERLINE
==================================*/

.justicecta-content h2 span{

    position:relative;

}

.justicecta-content h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    opacity:.35;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.justicecta-monument{

width:320px;

transform:scale(.9);

}

.justicecta-content h2{

font-size:2.8rem;

}

}

@media(max-width:768px){

.justicecta-section{

padding:110px 5% 80px;

}

.justicecta-monument{

width:260px;

height:180px;

margin-bottom:50px;

transform:scale(.75);

}

.justicecta-content h2{

font-size:2.2rem;

}

.justicecta-content p{

font-size:.95rem;

line-height:1.8;

}

.justicecta-buttons{

flex-direction:column;

align-items:center;

}

.justicecta-btn{

width:100%;

max-width:320px;

justify-content:center;

}

}

/* Part - 2 */

/*==================================================
        BUTTON HOVER
==================================================*/

.justicecta-btn{

    transition:

        transform .35s ease,

        background .35s ease,

        color .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;

}

.justicecta-btn:hover{

    transform:translateY(-5px);

}

.justicecta-primary:hover{

    background:#7ED321;

    box-shadow:

        0 15px 35px rgba(126,211,33,.25);

}

.justicecta-outline:hover{

    background:rgba(0,188,212,.12);

    border-color:#00BCD4;

    color:#00BCD4;

    box-shadow:

        0 15px 35px rgba(0,188,212,.18);

}

/*==================================================
        MONUMENT
==================================================*/

.justicecta-monument{

    transition:transform .5s ease;

}

.justicecta-section:hover .justicecta-monument{

    transform:translateY(-8px);

}

/*==================================================
        SCALE ICON
==================================================*/

.justicecta-scale{

    position:relative;

    transition:

        transform .4s ease,

        box-shadow .4s ease,

        background .4s ease;

}

.justicecta-scale:hover{

    transform:translateX(-50%) scale(1.08);

    background:rgba(0,188,212,.18);

    box-shadow:

        0 0 30px rgba(0,188,212,.25),

        0 0 60px rgba(126,211,33,.12);

}

/*==================================================
        RIPPLE EFFECT
==================================================*/

.justicecta-scale::after{

    content:"";

    position:absolute;

    inset:-10px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.15);

    animation:justiceScaleRipple 3s ease-out infinite;

}

@keyframes justiceScaleRipple{

    0%{

        transform:scale(1);

        opacity:.75;

    }

    100%{

        transform:scale(1.35);

        opacity:0;

    }

}

/*==================================================
        LIGHT RAYS
==================================================*/

/* .justicecta-rays{

    animation:justiceRaysRotate 40s linear infinite;

} */

@keyframes justiceRaysRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*==================================================
        FLOATING PARTICLES
==================================================*/

.justicecta-particles span{

    animation:justiceParticleFloat 8s ease-in-out infinite;

}

.justicecta-particles span:nth-child(2){

animation-delay:1s;

}

.justicecta-particles span:nth-child(3){

animation-delay:2s;

}

.justicecta-particles span:nth-child(4){

animation-delay:3s;

}

.justicecta-particles span:nth-child(5){

animation-delay:4s;

}

.justicecta-particles span:nth-child(6){

animation-delay:5s;

}

@keyframes justiceParticleFloat{

    0%,100%{

        transform:translateY(0);

        opacity:.3;

    }

    50%{

        transform:translateY(-20px);

        opacity:.8;

    }

}

/*==================================================
        TITLE
==================================================*/

.justicecta-content h2{

    transition:.35s;

}

.justicecta-section:hover .justicecta-content h2{

    color:#fff;

}

.justicecta-section:hover .justicecta-content h2 span{

    color:#7ED321;

}

/*==================================================
        TAG
==================================================*/

.justicecta-tag{

    transition:.35s;

}

.justicecta-tag:hover{

    background:#00BCD4;

    color:#fff;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.justicecta-section:hover .justicecta-monument{

transform:none;

}

.justicecta-btn:hover{

transform:none;

}

.justicecta-scale:hover{

transform:translateX(-50%) scale(1.04);

}

}

/* CTA Section Ends Here */


/* Human Rights And Avocacy Page Ends Here */

/* Humanitarian Aid And Disaster Relief Page Starts Here */

/* Hero Section Starts Here */

/*==================================================
        BEACON OF HOPE HERO
==================================================*/

.reliefhero-section{

    position:relative;

    overflow:hidden;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:170px 5% 120px;

    background:linear-gradient(
        180deg,
        #040915 0%,
        #071321 45%,
        #0A1B2F 100%
    );

}

/*====================================
BACKGROUND GLOW
====================================*/

.reliefhero-section::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    left:50%;

    top:-320px;

    transform:translateX(-50%);

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.18),
        transparent 70%
    );

    filter:blur(130px);

}

.reliefhero-section::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        transparent,
        rgba(5,8,22,.25),
        #050816
    );

}

/*====================================
LIGHTHOUSE
====================================*/

.reliefhero-lighthouse{

    position:absolute;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    width:170px;

    height:340px;

    z-index:2;

}

/* Base */

.reliefhero-base{

    position:absolute;

    bottom:0;

    left:50%;

    transform:translateX(-50%);

    width:210px;

    height:22px;

    border-radius:5px;

    background:rgba(255,255,255,.12);

}

/* Body */

.reliefhero-body{

    position:absolute;

    bottom:22px;

    left:50%;

    transform:translateX(-50%);

    width:95px;

    height:220px;

    border-radius:18px 18px 8px 8px;

    background:linear-gradient(
        to bottom,
        rgba(255,255,255,.18),
        rgba(255,255,255,.08)
    );

}

/* Top */

.reliefhero-top{

    position:absolute;

    left:50%;

    top:35px;

    transform:translateX(-50%);

    width:120px;

    height:40px;

    border-radius:12px 12px 0 0;

    background:rgba(255,255,255,.15);

}

/*====================================
BEACON
====================================*/

.reliefhero-beacon{

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:16px;

    height:16px;

    border-radius:50%;

    background:#7ED321;

    box-shadow:

        0 0 18px rgba(126,211,33,.8),

        0 0 40px rgba(0,188,212,.35);

}

/*====================================
LIGHT RAYS
====================================*/

.reliefhero-light{

    position:absolute;

    left:50%;

    top:35px;

    transform:translateX(-50%);

    width:700px;

    height:700px;

    border-radius:50%;

    background:

    repeating-conic-gradient(

        from 270deg,

        rgba(0,188,212,.10) 0deg,

        transparent 10deg,

        transparent 22deg

    );

    opacity:.5;

}

/*====================================
HELICOPTER
====================================*/

.reliefhero-helicopter{

    position:absolute;

    top:18%;

    left:12%;

    font-size:2.5rem;

    color:rgba(255,255,255,.7);

    z-index:4;

}

/*====================================
FLOATING ICONS
====================================*/

.reliefhero-floating{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.reliefhero-floating i{

    position:absolute;

    color:#00BCD4;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    width:60px;

    height:60px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    backdrop-filter:blur(15px);

}

.reliefhero-floating i:nth-child(1){

top:28%;

left:18%;

}

.reliefhero-floating i:nth-child(2){

top:34%;

right:18%;

}

.reliefhero-floating i:nth-child(3){

bottom:26%;

right:25%;

}

/*====================================
CLOUDS
====================================*/

.reliefhero-cloud{

    position:absolute;

    width:240px;

    height:75px;

    border-radius:100px;

    background:rgba(255,255,255,.05);

    filter:blur(5px);

}

.reliefhero-cloud::before,

.reliefhero-cloud::after{

    content:"";

    position:absolute;

    background:inherit;

    border-radius:50%;

}

.reliefhero-cloud::before{

    width:95px;

    height:95px;

    left:35px;

    top:-35px;

}

.reliefhero-cloud::after{

    width:75px;

    height:75px;

    right:40px;

    top:-22px;

}

.reliefhero-cloud-one{

    top:12%;

    left:8%;

}

.reliefhero-cloud-two{

    top:22%;

    right:10%;

}

/*====================================
CONTENT
====================================*/

.reliefhero-content{

    position:relative;

    z-index:5;

    max-width:900px;

    margin:auto;

    text-align:center;

}

.reliefhero-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:40px;

    background:rgba(0,188,212,.12);

    color:#00BCD4;

    font-size:.85rem;

    font-weight:600;

    letter-spacing:1px;

}

.reliefhero-content h1{

    color:#fff;

    font-size:4rem;

    line-height:1.2;

    margin:30px 0;

}

.reliefhero-content h1 span{

    color:#00BCD4;

}

.reliefhero-content p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

    font-size:1.05rem;

}

/*====================================
BUTTONS
====================================*/

.reliefhero-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

    margin-top:45px;

}

.reliefhero-btn{

    display:flex;

    align-items:center;

    gap:12px;

    padding:16px 30px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

}

.reliefhero-primary{

    background:#00BCD4;

    color:#fff;

}

.reliefhero-outline{

    background:rgba(255,255,255,.05);

    color:#fff;

    border:1px solid rgba(255,255,255,.12);

}

/*====================================
BREADCRUMB
====================================*/

.reliefhero-breadcrumb{

    position:relative;

    z-index:5;

    text-align:center;

    margin-bottom:45px;

    color:#94A3B8;

}

.reliefhero-breadcrumb a{

    color:#CBD5E1;

    text-decoration:none;

}

.reliefhero-breadcrumb span{

    margin:0 8px;
    color: #019BB0;

}

/*====================================
SCROLL
====================================*/

.reliefhero-scroll{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    color:#CBD5E1;

    z-index:5;

}

.reliefhero-scroll i{

    margin-top:10px;

    font-size:1.2rem;

}

/*====================================
RESPONSIVE
====================================*/

@media(max-width:991px){

.reliefhero-content h1{

font-size:3rem;

}

.reliefhero-lighthouse{

transform:translateX(-50%) scale(.85);

}

}

@media(max-width:768px){

.reliefhero-section{

padding:140px 5% 90px;

min-height:auto;

}

.reliefhero-content h1{

font-size:2.3rem;

}

.reliefhero-content p{

font-size:.95rem;

line-height:1.8;

}

.reliefhero-buttons{

flex-direction:column;

align-items:center;

}

.reliefhero-btn{

width:100%;

max-width:320px;

justify-content:center;

}

.reliefhero-lighthouse{

transform:translateX(-50%) scale(.65);

bottom:-20px;

}

.reliefhero-floating{

display:none;

}

.reliefhero-cloud{

display:none;

}

}

/* Part - 2 */

/*==================================================
        BUTTON HOVER
==================================================*/

.reliefhero-btn{

    transition:

        transform .35s ease,

        background .35s ease,

        border-color .35s ease,

        color .35s ease,

        box-shadow .35s ease;

}

.reliefhero-btn:hover{

    transform:translateY(-5px);

}

.reliefhero-primary:hover{

    background:#7ED321;

    box-shadow:

        0 18px 40px rgba(126,211,33,.25);

}

.reliefhero-outline:hover{

    background:rgba(0,188,212,.12);

    border-color:#00BCD4;

    color:#00BCD4;

    box-shadow:

        0 18px 40px rgba(0,188,212,.18);

}

/*==================================================
        LIGHTHOUSE
==================================================*/

.reliefhero-lighthouse{

    transition:transform .5s ease;

}

.reliefhero-section:hover .reliefhero-lighthouse{

    transform:translateX(-50%) translateY(-8px);

}

/*==================================================
        BEACON LIGHT
==================================================*/

.reliefhero-beacon{

    animation:reliefBeaconGlow 2.5s ease-in-out infinite;

}

@keyframes reliefBeaconGlow{

    0%,100%{

        box-shadow:

        0 0 12px rgba(126,211,33,.7),

        0 0 30px rgba(0,188,212,.25);

    }

    50%{

        box-shadow:

        0 0 25px rgba(126,211,33,1),

        0 0 70px rgba(0,188,212,.55);

    }

}

/*==================================================
        ROTATING LIGHT
==================================================*/

.reliefhero-light{

    animation:reliefLightRotate 20s linear infinite;

    transform-origin:center center;

}

@keyframes reliefLightRotate{

    from{

        transform:translateX(-50%) rotate(0deg);

    }

    to{

        transform:translateX(-50%) rotate(360deg);

    }

}

/*==================================================
        HELICOPTER
==================================================*/

.reliefhero-helicopter{

    animation:reliefHelicopterMove 18s linear infinite;

}

@keyframes reliefHelicopterMove{

    0%{

        left:-10%;

        transform:translateY(0);

    }

    25%{

        transform:translateY(-10px);

    }

    50%{

        transform:translateY(5px);

    }

    75%{

        transform:translateY(-8px);

    }

    100%{

        left:110%;

        transform:translateY(0);

    }

}

/*==================================================
        FLOATING ICONS
==================================================*/

.reliefhero-floating i{

    animation:reliefIconFloat 6s ease-in-out infinite;

}

.reliefhero-floating i:nth-child(2){

animation-delay:2s;

}

.reliefhero-floating i:nth-child(3){

animation-delay:4s;

}

@keyframes reliefIconFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

}

/*==================================================
        CLOUDS
==================================================*/

.reliefhero-cloud-one{

    animation:reliefCloudLeft 45s linear infinite;

}

.reliefhero-cloud-two{

    animation:reliefCloudRight 55s linear infinite;

}

@keyframes reliefCloudLeft{

    from{

        transform:translateX(-80px);

    }

    to{

        transform:translateX(120px);

    }

}

@keyframes reliefCloudRight{

    from{

        transform:translateX(80px);

    }

    to{

        transform:translateX(-120px);

    }

}

/*==================================================
        SCROLL INDICATOR
==================================================*/

.reliefhero-scroll i{

    animation:reliefScrollBounce 1.8s ease-in-out infinite;

}

@keyframes reliefScrollBounce{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(8px);

    }

}

/*==================================================
        TAG
==================================================*/

.reliefhero-tag{

    transition:.35s;

}

.reliefhero-tag:hover{

    background:#00BCD4;

    color:#fff;

}

/*==================================================
        TITLE
==================================================*/

.reliefhero-content h1 span{

    transition:.35s;

}

.reliefhero-section:hover .reliefhero-content h1 span{

    color:#7ED321;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.reliefhero-section:hover .reliefhero-lighthouse{

transform:translateX(-50%) scale(.65);

}

.reliefhero-btn:hover{

transform:none;

}

.reliefhero-light{

animation-duration:30s;

}

.reliefhero-helicopter{

display:none;

}

}

/* Hero Section Ends Here */

/* About Section Starts Here */

/*==================================================
        EMERGENCY RELIEF BOARD
==================================================*/

.reliefboard-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.reliefboard-section::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    left:-220px;

    top:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(120px);

}

.reliefboard-section::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*====================================
SECTION HEADING
====================================*/

.reliefboard-section .section-heading{

    max-width:850px;

    margin:0 auto 80px;

    position:relative;

    z-index:5;

}

.reliefboard-section .section-heading h2{

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

    margin:25px 0;

}

.reliefboard-section .section-heading h2 span{

    color:#00BCD4;

}

.reliefboard-section .section-heading p{

    color:#CBD5E1;

    max-width:760px;

    margin:auto;

    line-height:2;

}

/*====================================
LAYOUT
====================================*/

.reliefboard-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

    max-width:1300px;

    margin:auto;

    position:relative;

    z-index:5;

}

/*====================================
VISUAL
====================================*/

.reliefboard-screen{

    position:relative;

    min-height:520px;

    border-radius:32px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

}

.reliefboard-screen::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        135deg,

        rgba(0,188,212,.05),

        transparent 45%

    );

}

.reliefboard-map{

    width:180px;

    height:180px;

    border-radius:50%;

    background:rgba(0,188,212,.10);

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    z-index:2;

}

.reliefboard-map i{

    font-size:4rem;

    color:#00BCD4;

}

/*====================================
PULSES
====================================*/

.reliefboard-pulse{

    position:absolute;

    border:2px solid rgba(0,188,212,.15);

    border-radius:50%;

}

.pulse-one{

    width:240px;

    height:240px;

}

.pulse-two{

    width:330px;

    height:330px;

}

.pulse-three{

    width:420px;

    height:420px;

}

/*====================================
BADGE
====================================*/

.reliefboard-badge{

    position:absolute;

    left:30px;

    bottom:30px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 20px;

    border-radius:50px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.08);

    color:#fff;

    font-weight:600;

}

.reliefboard-badge i{

    color:#00BCD4;

}

/*====================================
CONTENT
====================================*/

.reliefboard-label{

    display:inline-block;

    padding:10px 22px;

    border-radius:40px;

    background:rgba(0,188,212,.12);

    color:#00BCD4;

    font-size:.82rem;

    font-weight:600;

    letter-spacing:1px;

    margin-bottom:22px;

}

.reliefboard-content h3{

    color:#fff;

    font-size:2.5rem;

    line-height:1.3;

    margin-bottom:22px;

}

.reliefboard-content p{

    color:#CBD5E1;

    line-height:2;

    margin-bottom:35px;

}

.reliefboard-content h4{

    color:#fff;

    margin-bottom:25px;

    font-size:1.3rem;

}

/*====================================
TAGS
====================================*/

.reliefboard-tags{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.reliefboard-tag{

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px 20px;

    border-radius:18px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:#fff;

    font-weight:500;

}

.reliefboard-tag i{

    width:42px;

    height:42px;

    border-radius:12px;

    background:rgba(0,188,212,.12);

    color:#00BCD4;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.1rem;

}

/*====================================
HEADING UNDERLINE
====================================*/

.reliefboard-section h2 span{

    position:relative;

}

.reliefboard-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    opacity:.35;

}

/*====================================
RESPONSIVE
====================================*/

@media(max-width:991px){

.reliefboard-wrapper{

grid-template-columns:1fr;

gap:45px;

}

.reliefboard-screen{

min-height:420px;

}

.reliefboard-content{

text-align:center;

}

.reliefboard-tags{

max-width:650px;

margin:auto;

}

}

@media(max-width:768px){

.reliefboard-section{

padding:90px 5%;

}

.reliefboard-section .section-heading{

margin-bottom:60px;

}

.reliefboard-section .section-heading h2{

font-size:2.3rem;

}

.reliefboard-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.reliefboard-screen{

min-height:340px;

border-radius:24px;

}

.reliefboard-map{

width:130px;

height:130px;

}

.reliefboard-map i{

font-size:3rem;

}

.pulse-one{

width:180px;

height:180px;

}

.pulse-two{

width:240px;

height:240px;

}

.pulse-three{

width:300px;

height:300px;

}

.reliefboard-badge{

left:20px;

right:20px;

bottom:20px;

justify-content:center;

font-size:.9rem;

}

.reliefboard-content h3{

font-size:2rem;

}

.reliefboard-tags{

grid-template-columns:1fr;

}

.reliefboard-tag{

padding:16px 18px;

font-size:.95rem;

}

}

/* Part-2 */

/*==================================================
        SCREEN HOVER
==================================================*/

.reliefboard-screen{

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;

}

.reliefboard-screen:hover{

    transform:translateY(-8px);

    border-color:rgba(0,188,212,.18);

    box-shadow:
        0 25px 60px rgba(0,188,212,.15);

}

/*==================================================
        CENTRAL RELIEF ICON
==================================================*/

.reliefboard-map{

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        background .4s ease;

}

.reliefboard-screen:hover .reliefboard-map{

    transform:scale(1.08);

    background:rgba(0,188,212,.18);

    box-shadow:
        0 0 35px rgba(0,188,212,.25);

}

.reliefboard-map i{

    transition:
        transform .4s ease,
        color .4s ease;

}

.reliefboard-screen:hover .reliefboard-map i{

    transform:rotate(-10deg);

    color:#7ED321;

}

/*==================================================
        RADAR PULSE
==================================================*/

.pulse-one{

    animation:reliefPulseOne 3s linear infinite;

}

.pulse-two{

    animation:reliefPulseTwo 3s linear infinite;

    animation-delay:.7s;

}

.pulse-three{

    animation:reliefPulseThree 3s linear infinite;

    animation-delay:1.4s;

}

@keyframes reliefPulseOne{

    0%{

        transform:scale(.9);

        opacity:.7;

    }

    100%{

        transform:scale(1.2);

        opacity:0;

    }

}

@keyframes reliefPulseTwo{

    0%{

        transform:scale(.9);

        opacity:.6;

    }

    100%{

        transform:scale(1.25);

        opacity:0;

    }

}

@keyframes reliefPulseThree{

    0%{

        transform:scale(.9);

        opacity:.5;

    }

    100%{

        transform:scale(1.3);

        opacity:0;

    }

}

/*==================================================
        BADGE
==================================================*/

.reliefboard-badge{

    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease;

}

.reliefboard-screen:hover .reliefboard-badge{

    transform:translateY(-5px);

    background:rgba(0,188,212,.12);

    box-shadow:
        0 12px 30px rgba(0,188,212,.18);

}

/*==================================================
        TAGS
==================================================*/

.reliefboard-tag{

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;

}

.reliefboard-tag:hover{

    transform:translateY(-6px);

    border-color:rgba(0,188,212,.20);

    background:rgba(255,255,255,.08);

    box-shadow:
        0 15px 35px rgba(0,188,212,.15);

}

.reliefboard-tag i{

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;

}

.reliefboard-tag:hover i{

    transform:rotate(-10deg) scale(1.1);

    background:rgba(0,188,212,.18);

    color:#7ED321;

}

/*==================================================
        TEXT
==================================================*/

.reliefboard-content h3{

    transition:.35s;

}

.reliefboard-wrapper:hover .reliefboard-content h3{

    color:#00BCD4;

}

.reliefboard-content p{

    transition:.35s;

}

.reliefboard-wrapper:hover .reliefboard-content p{

    color:#E2E8F0;

}

/*==================================================
        LABEL
==================================================*/

.reliefboard-label{

    transition:.35s;

}

.reliefboard-label:hover{

    background:#00BCD4;

    color:#fff;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.reliefboard-screen:hover{

transform:none;

}

.reliefboard-tag:hover{

transform:none;

}

.reliefboard-screen:hover .reliefboard-map{

transform:scale(1.04);

}

}

/* About Section Ends Here */

/* Services Section Starts Here */

/*==================================================
        RESCUE OPERATION DASHBOARD
==================================================*/

.rescuedashboard-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.rescuedashboard-section::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    left:-220px;

    top:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(120px);

}

.rescuedashboard-section::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.rescuedashboard-section .section-heading{

    max-width:850px;

    margin:0 auto 80px;

    position:relative;

    z-index:5;

}

.rescuedashboard-section .section-heading h2{

    color:#fff;

    font-size:3.2rem;

    margin:25px 0;

    line-height:1.2;

}

.rescuedashboard-section .section-heading h2 span{

    color:#00BCD4;

}

.rescuedashboard-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
GRID
==================================*/

.rescuedashboard-grid{

    position:relative;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

    max-width:1250px;

    margin:auto;

    z-index:5;

}

/*==================================
MAIN PANEL
==================================*/

.rescuedashboard-main{

    grid-column:1 / span 2;

    display:flex;

    align-items:center;

    gap:35px;

    padding:45px;

    border-radius:30px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    position:relative;

    overflow:hidden;

}

.rescuedashboard-main::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:6px;

    height:100%;

    background:linear-gradient(
        to bottom,
        #00BCD4,
        #7ED321
    );

}

.rescuedashboard-main::after{

    content:"";

    position:absolute;

    width:240px;

    height:240px;

    right:-90px;

    top:-90px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

}

/*==================================
STATUS
==================================*/

.rescuedashboard-status{

    position:absolute;

    top:20px;

    right:25px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:8px 16px;

    border-radius:40px;

    background:rgba(255,255,255,.05);

    color:#CBD5E1;

    font-size:.85rem;

}

.status-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#7ED321;

}

/*==================================
MAIN ICON
==================================*/

.rescuedashboard-icon{

    width:100px;

    height:100px;

    border-radius:24px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,188,212,.12);

    color:#00BCD4;

    font-size:2.4rem;

    flex-shrink:0;

}

/*==================================
TEXT
==================================*/

.rescuedashboard-content h3{

    color:#fff;

    font-size:2rem;

    margin-bottom:18px;

}

.rescuedashboard-content p{

    color:#CBD5E1;

    line-height:1.9;

}

/*==================================
SMALL PANELS
==================================*/

.rescuedashboard-panel{

    padding:32px;

    border-radius:24px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(16px);

    position:relative;

}

.rescuedashboard-panel::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:linear-gradient(
        to bottom,
        #00BCD4,
        #7ED321
    );

}

/*==================================
WIDE PANEL
==================================*/

.rescuedashboard-wide{

    grid-column:1 / span 2;

    display:flex;

    align-items:center;

    gap:25px;

    padding:35px;

    border-radius:24px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(16px);

    position:relative;

}

.rescuedashboard-wide::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:linear-gradient(
        to bottom,
        #00BCD4,
        #7ED321
    );

}

/*==================================
ICONS
==================================*/

.rescuedashboard-miniicon{

    width:65px;

    height:65px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,188,212,.10);

    color:#00BCD4;

    font-size:1.6rem;

    margin-bottom:22px;

}

.rescuedashboard-wide .rescuedashboard-miniicon{

    margin-bottom:0;

    flex-shrink:0;

}

/*==================================
PANEL TEXT
==================================*/

.rescuedashboard-panel h4{

    color:#fff;

    font-size:1.35rem;

    margin-bottom:15px;

}

.rescuedashboard-panel p{

    color:#CBD5E1;

    line-height:1.8;

}

.rescuedashboard-wide h3{

    color:#fff;

    font-size:1.8rem;

    margin-bottom:12px;

}

.rescuedashboard-wide p{

    color:#CBD5E1;

    line-height:1.9;

}

/*==================================
HEADING UNDERLINE
==================================*/

.rescuedashboard-section h2 span{

    position:relative;

}

.rescuedashboard-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    opacity:.35;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.rescuedashboard-main{

flex-direction:column;

text-align:center;

padding:35px;

}

.rescuedashboard-status{

position:static;

margin-bottom:20px;

justify-content:center;

}

}

@media(max-width:768px){

.rescuedashboard-section{

padding:90px 5%;

}

.rescuedashboard-section .section-heading{

margin-bottom:60px;

}

.rescuedashboard-section .section-heading h2{

font-size:2.3rem;

}

.rescuedashboard-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.rescuedashboard-grid{

grid-template-columns:1fr;

}

.rescuedashboard-main,

.rescuedashboard-wide{

grid-column:auto;

}

.rescuedashboard-wide{

flex-direction:column;

text-align:center;

}

.rescuedashboard-main{

padding:30px;

}

.rescuedashboard-panel{

padding:25px;

}

.rescuedashboard-icon{

width:80px;

height:80px;

font-size:2rem;

}

.rescuedashboard-miniicon{

width:55px;

height:55px;

font-size:1.4rem;

}

.rescuedashboard-content h3{

font-size:1.7rem;

}

.rescuedashboard-panel h4{

font-size:1.2rem;

}

.rescuedashboard-wide h3{

font-size:1.5rem;

}

.rescuedashboard-content p,

.rescuedashboard-panel p,

.rescuedashboard-wide p{

font-size:.92rem;

line-height:1.7;

}

}

/* Part - 2 */

/*==================================================
        MAIN PANEL HOVER
==================================================*/

.rescuedashboard-main{

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;

}

.rescuedashboard-main:hover{

    transform:translateY(-8px);

    border-color:rgba(0,188,212,.20);

    background:rgba(255,255,255,.07);

    box-shadow:
        0 20px 50px rgba(0,188,212,.16);

}

/*==================================================
        SMALL PANELS
==================================================*/

.rescuedashboard-panel,
.rescuedashboard-wide{

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;

}

.rescuedashboard-panel:hover,
.rescuedashboard-wide:hover{

    transform:translateY(-8px);

    border-color:rgba(0,188,212,.18);

    background:rgba(255,255,255,.07);

    box-shadow:
        0 18px 40px rgba(0,188,212,.14);

}

/*==================================================
        LEFT ACCENT BAR
==================================================*/

.rescuedashboard-main::before,
.rescuedashboard-panel::before,
.rescuedashboard-wide::before{

    transition:.35s;

}

.rescuedashboard-main:hover::before,
.rescuedashboard-panel:hover::before,
.rescuedashboard-wide:hover::before{

    width:8px;

}

/*==================================================
        STATUS INDICATOR
==================================================*/

.status-dot{

    animation:rescueStatusBlink 1.6s ease-in-out infinite;

}

@keyframes rescueStatusBlink{

    0%,100%{

        opacity:1;

        box-shadow:
            0 0 0 rgba(126,211,33,0);

    }

    50%{

        opacity:.45;

        box-shadow:
            0 0 12px rgba(126,211,33,.8);

    }

}

/*==================================================
        MAIN ICON
==================================================*/

.rescuedashboard-icon{

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        box-shadow .35s ease;

}

.rescuedashboard-main:hover .rescuedashboard-icon{

    transform:rotate(-8deg) scale(1.08);

    background:rgba(0,188,212,.18);

    color:#7ED321;

    box-shadow:
        0 0 30px rgba(0,188,212,.22);

}

/*==================================================
        MINI ICONS
==================================================*/

.rescuedashboard-miniicon{

    position:relative;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        box-shadow .35s ease;

}

.rescuedashboard-panel:hover .rescuedashboard-miniicon,
.rescuedashboard-wide:hover .rescuedashboard-miniicon{

    transform:rotate(-10deg) scale(1.08);

    background:rgba(0,188,212,.18);

    color:#7ED321;

    box-shadow:
        0 0 25px rgba(0,188,212,.20);

}

/*==================================================
        RIPPLE EFFECT
==================================================*/

.rescuedashboard-icon::after,
.rescuedashboard-miniicon::after{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:22px;

    border:2px solid rgba(0,188,212,.12);

    animation:rescueRipple 3s ease-out infinite;

}

@keyframes rescueRipple{

    from{

        transform:scale(1);

        opacity:.7;

    }

    to{

        transform:scale(1.25);

        opacity:0;

    }

}

/*==================================================
        TEXT
==================================================*/

.rescuedashboard-content h3,
.rescuedashboard-panel h4,
.rescuedashboard-wide h3{

    transition:.35s;

}

.rescuedashboard-main:hover .rescuedashboard-content h3,
.rescuedashboard-panel:hover h4,
.rescuedashboard-wide:hover h3{

    color:#00BCD4;

}

.rescuedashboard-content p,
.rescuedashboard-panel p,
.rescuedashboard-wide p{

    transition:.35s;

}

.rescuedashboard-main:hover .rescuedashboard-content p,
.rescuedashboard-panel:hover p,
.rescuedashboard-wide:hover p{

    color:#E2E8F0;

}

/*==================================================
        STATUS BADGE
==================================================*/

.rescuedashboard-status{

    transition:
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.rescuedashboard-main:hover .rescuedashboard-status{

    background:rgba(0,188,212,.10);

    box-shadow:
        0 0 20px rgba(0,188,212,.12);

}

/*==================================================
        MAIN GLOW
==================================================*/

.rescuedashboard-main::after{

    transition:.45s;

}

.rescuedashboard-main:hover::after{

    transform:scale(1.25);

    opacity:.9;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.rescuedashboard-main:hover,
.rescuedashboard-panel:hover,
.rescuedashboard-wide:hover{

transform:none;

}

.rescuedashboard-main:hover .rescuedashboard-icon{

transform:scale(1.05);

}

.rescuedashboard-panel:hover .rescuedashboard-miniicon,
.rescuedashboard-wide:hover .rescuedashboard-miniicon{

transform:scale(1.05);

}

}

/* Services Section Ends Here */

/* Journey Section Starts Here */

/*==================================================
        RESCUE PATH JOURNEY
==================================================*/

.rescuepath-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.rescuepath-section::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    left:-220px;

    top:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(120px);

}

.rescuepath-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.rescuepath-section .section-heading{

    max-width:850px;

    margin:0 auto 80px;

    position:relative;

    z-index:5;

}

.rescuepath-section .section-heading h2{

    color:#fff;

    font-size:3.2rem;

    margin:25px 0;

    line-height:1.2;

}

.rescuepath-section .section-heading h2 span{

    color:#00BCD4;

}

.rescuepath-section .section-heading p{

    color:#CBD5E1;

    max-width:760px;

    margin:auto;

    line-height:2;

}

/*==================================
WRAPPER
==================================*/

.rescuepath-wrapper{

    position:relative;

    max-width:1100px;

    margin:auto;

    z-index:5;

}

.rescuepath-wrapper::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    bottom:0;

    width:3px;

    transform:translateX(-50%);

    background:

    linear-gradient(

        to bottom,

        rgba(0,188,212,.35),

        rgba(126,211,33,.35)

    );

}

/*==================================
STEP
==================================*/

.rescuepath-step{

    width:calc(50% - 60px);

    position:relative;

    display:flex;

    align-items:center;

    gap:22px;

    padding:28px;

    margin-bottom:30px;

    border-radius:24px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(16px);

}

.rescuepath-step.left{

    margin-right:auto;

}

.rescuepath-step.right{

    margin-left:auto;

}

/*==================================
CENTER DOT
==================================*/

.rescuepath-step::before{

    content:"";

    position:absolute;

    top:50%;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#00BCD4;

    border:4px solid #08111F;

    transform:translateY(-50%);

}

.rescuepath-step.left::before{

    right:-69px;

}

.rescuepath-step.right::before{

    left:-69px;

}

/*==================================
ICON
==================================*/

.rescuepath-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,188,212,.10);

    color:#00BCD4;

    font-size:1.7rem;

    flex-shrink:0;

}

/*==================================
TEXT
==================================*/

.rescuepath-content h3{

    color:#fff;

    font-size:1.45rem;

    margin-bottom:12px;

}

.rescuepath-content p{

    color:#CBD5E1;

    line-height:1.8;

}

/*==================================
FOOTPRINTS
==================================*/

.rescuepath-footprints{

    position:relative;

    width:100%;

    display:flex;

    justify-content:center;

    margin:-10px 0 20px;

    z-index:2;

}

.rescuepath-footprints i{

    color:#7ED321;

    font-size:1.2rem;

    opacity:.75;

    transform:rotate(90deg);

}

/*==================================
UNDERLINE
==================================*/

.rescuepath-section h2 span{

    position:relative;

}

.rescuepath-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    opacity:.35;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.rescuepath-wrapper::before{

left:24px;

transform:none;

}

.rescuepath-step{

width:calc(100% - 50px);

margin-left:50px !important;

}

.rescuepath-step::before{

left:-35px !important;

right:auto;

}

.rescuepath-footprints{

justify-content:flex-start;

padding-left:15px;

}

}

@media(max-width:768px){

.rescuepath-section{

padding:90px 5%;

}

.rescuepath-section .section-heading{

margin-bottom:60px;

}

.rescuepath-section .section-heading h2{

font-size:2.3rem;

}

.rescuepath-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.rescuepath-step{

padding:22px;

gap:18px;

}

.rescuepath-icon{

width:55px;

height:55px;

font-size:1.4rem;

}

.rescuepath-content h3{

font-size:1.2rem;

}

.rescuepath-content p{

font-size:.9rem;

line-height:1.7;

}

.rescuepath-footprints i{

font-size:1rem;

}

}

/* Part - 2 */

/*==================================================
        STEP HOVER
==================================================*/

.rescuepath-step{

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;

}

.rescuepath-step:hover{

    transform:translateY(-8px);

    background:rgba(255,255,255,.07);

    border-color:rgba(0,188,212,.18);

    box-shadow:
        0 20px 45px rgba(0,188,212,.15);

}

/*==================================================
        CENTER NODE
==================================================*/

.rescuepath-step::before{

    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease;

}

.rescuepath-step:hover::before{

    transform:translateY(-50%) scale(1.35);

    background:#7ED321;

    box-shadow:
        0 0 18px rgba(126,211,33,.6);

}

/*==================================================
        ICON
==================================================*/

.rescuepath-icon{

    position:relative;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        box-shadow .35s ease;

}

.rescuepath-step:hover .rescuepath-icon{

    transform:rotate(-8deg) scale(1.08);

    background:rgba(0,188,212,.18);

    color:#7ED321;

    box-shadow:
        0 0 28px rgba(0,188,212,.22);

}

/*==================================================
        ICON RIPPLE
==================================================*/

.rescuepath-icon::after{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:22px;

    border:2px solid rgba(0,188,212,.12);

    animation:rescuePathRipple 3s ease-out infinite;

}

@keyframes rescuePathRipple{

    0%{

        transform:scale(1);

        opacity:.7;

    }

    100%{

        transform:scale(1.3);

        opacity:0;

    }

}

/*==================================================
        FOOTPRINTS
==================================================*/

.rescuepath-footprints i{

    animation:rescueFootprints 2.5s ease-in-out infinite;

}

@keyframes rescueFootprints{

    0%,100%{

        opacity:.35;

        transform:rotate(90deg) scale(1);

    }

    50%{

        opacity:1;

        transform:rotate(90deg) scale(1.15);

        color:#7ED321;

    }

}

/*==================================================
        CONTENT
==================================================*/

.rescuepath-content h3{

    transition:.35s;

}

.rescuepath-step:hover h3{

    color:#00BCD4;

}

.rescuepath-content p{

    transition:.35s;

}

.rescuepath-step:hover p{

    color:#E2E8F0;

}

/*==================================================
        CENTER PATH
==================================================*/

.rescuepath-wrapper::before{

    animation:rescuePathGlow 4s linear infinite;

}

@keyframes rescuePathGlow{

    0%{

        opacity:.4;

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:.4;

    }

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:991px){

.rescuepath-step:hover{

transform:translateY(-5px);

}

}

@media(max-width:768px){

.rescuepath-step:hover{

transform:none;

}

.rescuepath-step:hover .rescuepath-icon{

transform:scale(1.05);

}

.rescuepath-icon{

width:55px;

height:55px;

font-size:1.4rem;

}

}

/* Journey Section Ends Here */

/* Areas Section Starts Here */

/*==================================================
        LIFELINE SUPPORT WALL
==================================================*/

.lifelinewall-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.lifelinewall-section::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    top:-220px;

    left:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(120px);

}

.lifelinewall-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.lifelinewall-section .section-heading{

    max-width:850px;

    margin:0 auto 90px;

    position:relative;

    z-index:5;

}

.lifelinewall-section .section-heading h2{

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

    margin:25px 0;

}

.lifelinewall-section .section-heading h2 span{

    color:#00BCD4;

}

.lifelinewall-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
WRAPPER
==================================*/

.lifelinewall-wrapper{

    position:relative;

    max-width:1050px;

    margin:auto;

    padding-top:170px;

    z-index:5;

}

/*==================================
VERTICAL LIFELINE
==================================*/

.lifelinewall-rail{

    position:absolute;

    left:50%;

    top:140px;

    bottom:0;

    width:4px;

    transform:translateX(-50%);

    border-radius:50px;

    background:linear-gradient(

        to bottom,

        #00BCD4,

        #7ED321

    );

}

/*==================================
CENTER
==================================*/

.lifelinewall-anchor{

    position:absolute;

    /* top:0; */
    top:-125px;

    left:50%;

    transform:translateX(-50%);

    width:320px;

    text-align:center;

}

.lifelinewall-anchor-icon{

    width:110px;

    height:110px;

    margin:auto;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,188,212,.12);

    border:2px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-size:2.5rem;

    margin-bottom:25px;

}

.lifelinewall-anchor h3{

    color:#fff;

    font-size:2rem;

    margin-bottom:15px;

}

.lifelinewall-anchor p{

    color:#CBD5E1;

    line-height:1.8;

}

/*==================================
SUPPORT NODES
==================================*/

.lifelinewall-node{

    position:relative;

    width:calc(50% - 70px);

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:45px;

}

.lifelinewall-node.left{

    margin-right:auto;

    text-align:right;

    flex-direction:row-reverse;

}

.lifelinewall-node.right{

    margin-left:auto;

}

/*==================================
CONNECTOR
==================================*/

.lifelinewall-node::before{

    content:"";

    position:absolute;

    top:50%;

    width:60px;

    height:3px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

}

.lifelinewall-node.left::before{

    right:-65px;

}

.lifelinewall-node.right::before{

    left:-65px;

}

/*==================================
CENTER DOT
==================================*/

.lifelinewall-node::after{

    content:"";

    position:absolute;

    top:50%;

    width:14px;

    height:14px;

    border-radius:50%;

    background:#00BCD4;

    border:4px solid #08111F;

    transform:translateY(-50%);

}

.lifelinewall-node.left::after{

    right:-76px;

}

.lifelinewall-node.right::after{

    left:-76px;

}

/*==================================
ICON
==================================*/

.lifelinewall-icon{

    width:68px;

    height:68px;

    flex-shrink:0;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:#00BCD4;

    font-size:1.6rem;

    backdrop-filter:blur(14px);

}

/*==================================
TEXT
==================================*/

.lifelinewall-content{

    flex:1;

}

.lifelinewall-content h4{

    color:#fff;

    font-size:1.35rem;

    margin-bottom:10px;

}

.lifelinewall-content p{

    color:#CBD5E1;

    line-height:1.8;

}

/*==================================
UNDERLINE
==================================*/

.lifelinewall-section h2 span{

    position:relative;

}

.lifelinewall-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:30px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.lifelinewall-wrapper{

padding-top:0;

}

.lifelinewall-anchor{

position:relative;

left:auto;

top:auto;

transform:none;

margin:0 auto 60px;

}

.lifelinewall-rail{

left:28px;

top:220px;

}

.lifelinewall-node{

width:calc(100% - 70px);

margin-left:70px !important;

margin-right:0 !important;

flex-direction:row !important;

text-align:left !important;

}

.lifelinewall-node::before{

left:-42px !important;

width:38px;

right:auto;

}

.lifelinewall-node::after{

left:-53px !important;

right:auto;

}

}

@media(max-width:768px){

.lifelinewall-section{

padding:90px 5%;

}

.lifelinewall-section .section-heading{

margin-bottom:60px;

}

.lifelinewall-section .section-heading h2{

font-size:2.3rem;

}

.lifelinewall-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.lifelinewall-anchor{

width:100%;

}

.lifelinewall-anchor-icon{

width:85px;

height:85px;

font-size:2rem;

}

.lifelinewall-anchor h3{

font-size:1.6rem;

}

.lifelinewall-node{

gap:16px;

margin-bottom:35px;

}

.lifelinewall-icon{

width:56px;

height:56px;

font-size:1.3rem;

}

.lifelinewall-content h4{

font-size:1.1rem;

}

.lifelinewall-content p{

font-size:.9rem;

line-height:1.7;

}

}

/* Part - 2 */

/*==================================================
        ANCHOR
==================================================*/

.lifelinewall-anchor{

    transition:transform .4s ease;

}

.lifelinewall-anchor:hover{

    transform:translateX(-50%) translateY(-8px);

}

@media(max-width:991px){

.lifelinewall-anchor:hover{

transform:translateY(-8px);

}

}

/*==================================================
        ANCHOR ICON
==================================================*/

.lifelinewall-anchor-icon{

    position:relative;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        box-shadow .35s ease;

}

.lifelinewall-anchor:hover .lifelinewall-anchor-icon{

    transform:scale(1.08);

    background:rgba(0,188,212,.18);

    color:#7ED321;

    box-shadow:
        0 0 35px rgba(0,188,212,.25);

}

.lifelinewall-anchor-icon::after{

    content:"";

    position:absolute;

    inset:-10px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:lifelineAnchorPulse 3s ease-out infinite;

}

@keyframes lifelineAnchorPulse{

    0%{

        transform:scale(1);

        opacity:.75;

    }

    100%{

        transform:scale(1.35);

        opacity:0;

    }

}

/*==================================================
        LIFELINE
==================================================*/

.lifelinewall-rail{

    animation:lifelineGlow 3.5s linear infinite;

}

@keyframes lifelineGlow{

    0%,100%{

        opacity:.5;

    }

    50%{

        opacity:1;

    }

}

/*==================================================
        SUPPORT NODES
==================================================*/

.lifelinewall-node{

    transition:
        transform .35s ease,
        background .35s ease;

}

.lifelinewall-node:hover{

    transform:translateY(-6px);

}

/*==================================================
        CONNECTOR
==================================================*/

.lifelinewall-node::before{

    transition:
        background .35s ease,
        width .35s ease;

}

.lifelinewall-node:hover::before{

    width:75px;

    background:linear-gradient(
        90deg,
        #7ED321,
        #00BCD4
    );

}

/*==================================================
        CENTER DOT
==================================================*/

.lifelinewall-node::after{

    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease;

}

.lifelinewall-node:hover::after{

    transform:translateY(-50%) scale(1.35);

    background:#7ED321;

    box-shadow:
        0 0 18px rgba(126,211,33,.65);

}

/*==================================================
        ICON
==================================================*/

.lifelinewall-icon{

    position:relative;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.lifelinewall-node:hover .lifelinewall-icon{

    transform:rotate(-10deg) scale(1.08);

    background:rgba(0,188,212,.18);

    border-color:rgba(0,188,212,.20);

    color:#7ED321;

    box-shadow:
        0 0 28px rgba(0,188,212,.20);

}

.lifelinewall-icon::after{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:22px;

    border:2px solid rgba(0,188,212,.12);

    animation:lifelineIconRipple 3s ease-out infinite;

}

@keyframes lifelineIconRipple{

    from{

        transform:scale(1);

        opacity:.7;

    }

    to{

        transform:scale(1.28);

        opacity:0;

    }

}

/*==================================================
        TEXT
==================================================*/

.lifelinewall-content h4{

    transition:.35s;

}

.lifelinewall-node:hover h4{

    color:#00BCD4;

}

.lifelinewall-content p{

    transition:.35s;

}

.lifelinewall-node:hover p{

    color:#E2E8F0;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.lifelinewall-anchor:hover{

transform:none;

}

.lifelinewall-node:hover{

transform:none;

}

.lifelinewall-node:hover .lifelinewall-icon{

transform:scale(1.05);

}

}

/* Areas Section Ends Here */

/* Impact Section Starts Here */

/*==================================================
        IMPACT EDITORIAL SECTION
==================================================*/

.impacteditor-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.impacteditor-section::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    left:-220px;

    top:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(120px);

}

.impacteditor-section::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.impacteditor-section .section-heading{

    max-width:850px;

    margin:0 auto 90px;

    position:relative;

    z-index:5;

}

.impacteditor-section .section-heading h2{

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

    margin:25px 0;

}

.impacteditor-section .section-heading h2 span{

    color:#00BCD4;

}

.impacteditor-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
EDITORIAL WRAPPER
==================================*/

.impacteditor-wrapper{

    max-width:900px;

    margin:auto;

    position:relative;

    z-index:5;

}

/*==================================
STATISTICS
==================================*/

.impacteditor-item{

    text-align:center;

    padding:45px 0;

}

.impacteditor-item h3{

    margin:0;

    font-size:5rem;

    line-height:1;

    font-weight:800;

    color:#fff;

    letter-spacing:-2px;

}

.impacteditor-item span{

    display:block;

    margin-top:20px;

    color:#CBD5E1;

    font-size:1.25rem;

    letter-spacing:1px;

    text-transform:uppercase;

}

/*==================================
DIVIDER
==================================*/

.impacteditor-divider{

    width:220px;

    height:2px;

    margin:0 auto;

    border-radius:20px;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(0,188,212,.7),

        rgba(126,211,33,.7),

        transparent

    );

}

/*==================================
UNDERLINE
==================================*/

.impacteditor-section h2 span{

    position:relative;

}

.impacteditor-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:30px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:768px){

.impacteditor-section{

padding:90px 5%;

}

.impacteditor-section .section-heading{

margin-bottom:60px;

}

.impacteditor-section .section-heading h2{

font-size:2.3rem;

}

.impacteditor-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.impacteditor-item{

padding:35px 0;

}

.impacteditor-item h3{

font-size:3.2rem;

letter-spacing:-1px;

}

.impacteditor-item span{

font-size:1rem;

margin-top:15px;

}

.impacteditor-divider{

width:140px;

}

}

/* Part - 2 */

/*==================================================
        STATISTICS HOVER
==================================================*/

.impacteditor-item{

    transition:transform .35s ease;

}

.impacteditor-item:hover{

    transform:translateY(-8px);

}

/*==================================================
        NUMBER
==================================================*/

.impacteditor-item h3{

    position:relative;

    transition:
        color .35s ease,
        transform .35s ease,
        text-shadow .35s ease;

}

.impacteditor-item:hover h3{

    color:#00BCD4;

    transform:scale(1.06);

    text-shadow:
        0 0 20px rgba(0,188,212,.25);

}

/*==================================================
        NUMBER GLOW
==================================================*/

.impacteditor-item h3::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-12px;

    transform:translateX(-50%);

    width:0;

    height:4px;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    transition:.35s;

}

.impacteditor-item:hover h3::after{

    width:90px;

}

/*==================================================
        LABEL
==================================================*/

.impacteditor-item span{

    transition:
        color .35s ease,
        letter-spacing .35s ease;

}

.impacteditor-item:hover span{

    color:#fff;

    letter-spacing:2px;

}

/*==================================================
        DIVIDER
==================================================*/

.impacteditor-divider{

    position:relative;

    overflow:hidden;

}

.impacteditor-divider::after{

    content:"";

    position:absolute;

    left:-35%;

    top:0;

    width:35%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.9),

        transparent

    );

    animation:impactDividerFlow 4s linear infinite;

}

@keyframes impactDividerFlow{

    from{

        left:-35%;

    }

    to{

        left:135%;

    }

}

/*==================================================
        WRAPPER
==================================================*/

.impacteditor-wrapper:hover .impacteditor-divider{

    background:linear-gradient(

        90deg,

        transparent,

        rgba(0,188,212,1),

        rgba(126,211,33,1),

        transparent

    );

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.impacteditor-item:hover{

transform:none;

}

.impacteditor-item:hover h3{

transform:scale(1.03);

}

.impacteditor-item:hover span{

letter-spacing:1px;

}

}

/* Impact Section Ends Here */

/* Matters Section Starts Here */

/*==================================================
        RIPPLE OF HOPE
==================================================*/

.hopewave-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.hopewave-section::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    top:-220px;

    left:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(120px);

}

.hopewave-section::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.hopewave-section .section-heading{

    max-width:850px;

    margin:0 auto 90px;

    position:relative;

    z-index:5;

}

.hopewave-section .section-heading h2{

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

    margin:25px 0;

}

.hopewave-section .section-heading h2 span{

    color:#00BCD4;

}

.hopewave-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
WRAPPER
==================================*/

.hopewave-wrapper{

    position:relative;

    width:100%;

    max-width:900px;

    height:760px;

    margin:auto;

    z-index:5;

}

/*==================================
RIPPLES
==================================*/

.hopewave-ring{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    border:2px solid rgba(0,188,212,.10);

}

.ring-one{

    width:180px;

    height:180px;

}

.ring-two{

    width:300px;

    height:300px;

}

.ring-three{

    width:430px;

    height:430px;

}

.ring-four{

    width:570px;

    height:570px;

}

.ring-five{

    width:720px;

    height:720px;

}

/*==================================
CENTER
==================================*/

.hopewave-center{

    position:absolute;

    left:50%;

    /* top:50%; */
    top:54%;

    transform:translate(-50%,-50%);

    text-align:center;

    z-index:10;

}

.hopewave-core{

    width:110px;

    height:110px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,188,212,.12);

    border:2px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-size:2.5rem;

}

.hopewave-center h3{

    color:#fff;

    font-size:1.9rem;

}

/*==================================
STEPS
==================================*/

.hopewave-step{

    position:absolute;

    width:190px;

    text-align:center;

}

.hopewave-step span{

    display:inline-flex;

    width:48px;

    height:48px;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:rgba(0,188,212,.12);

    border:1px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-weight:700;

    margin-bottom:18px;

}

.hopewave-step h4{

    color:#fff;

    font-size:1.2rem;

    line-height:1.4;

}

/*==================================
POSITIONS
==================================*/

.step-one{

    left:50%;

    top:17%;

    transform:translateX(-50%);

}

.step-two{

    right:8%;

    top:50%;

    transform:translateY(-50%);

}

.step-three{

    left:50%;

    bottom:11%;

    transform:translateX(-50%);

}

.step-four{

    left:8%;

    top:50%;

    transform:translateY(-50%);

}

/*==================================
UNDERLINE
==================================*/

.hopewave-section h2 span{

    position:relative;

}

.hopewave-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:30px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.hopewave-wrapper{

height:auto;

display:grid;

grid-template-columns:1fr;

gap:35px;

}

.hopewave-ring{

display:none;

}

.hopewave-center,

.hopewave-step{

position:relative;

left:auto;

right:auto;

top:auto;

bottom:auto;

transform:none;

margin:auto;

width:100%;

max-width:360px;

text-align:center;

}

.hopewave-center{

margin-bottom:25px;

}

}

@media(max-width:768px){

.hopewave-section{

padding:90px 5%;

}

.hopewave-section .section-heading{

margin-bottom:60px;

}

.hopewave-section .section-heading h2{

font-size:2.3rem;

}

.hopewave-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.hopewave-core{

width:85px;

height:85px;

font-size:2rem;

}

.hopewave-center h3{

font-size:1.5rem;

}

.hopewave-step{

max-width:280px;

}

.hopewave-step span{

width:42px;

height:42px;

font-size:.95rem;

}

.hopewave-step h4{

font-size:1.05rem;

}

}

/* Part - 2 */

/*==================================================
        CENTER CORE
==================================================*/

.hopewave-center{

    transition:transform .4s ease;

}

.hopewave-center:hover{

    transform:translate(-50%,-50%) scale(1.04);

}

.hopewave-core{

    position:relative;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        box-shadow .35s ease;

}

.hopewave-center:hover .hopewave-core{

    background:rgba(0,188,212,.18);

    color:#7ED321;

    box-shadow:
        0 0 35px rgba(0,188,212,.25);

}

/* Ripple around center */

.hopewave-core::after{

    content:"";

    position:absolute;

    inset:-10px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:hopeCorePulse 3s ease-out infinite;

}

@keyframes hopeCorePulse{

    from{

        transform:scale(1);

        opacity:.75;

    }

    to{

        transform:scale(1.35);

        opacity:0;

    }

}

/*==================================================
        RIPPLE RINGS
==================================================*/

.hopewave-ring{

    animation:hopeRippleGlow 4s ease-in-out infinite;

}

.ring-two{

animation-delay:.5s;

}

.ring-three{

animation-delay:1s;

}

.ring-four{

animation-delay:1.5s;

}

.ring-five{

animation-delay:2s;

}

@keyframes hopeRippleGlow{

    0%,100%{

        opacity:.25;

        border-color:rgba(0,188,212,.10);

    }

    50%{

        opacity:1;

        border-color:rgba(126,211,33,.35);

    }

}

/*==================================================
        STEP
==================================================*/

.hopewave-step{

    transition:transform .35s ease;

}

.hopewave-step:hover{

    transform:translateY(-8px);

}

/* Keep original positioning */

.step-one:hover{

    transform:translateX(-50%) translateY(-8px);

}

.step-two:hover{

    transform:translateY(-50%) translateX(8px);

}

.step-three:hover{

    transform:translateX(-50%) translateY(-8px);

}

.step-four:hover{

    transform:translateY(-50%) translateX(-8px);

}

/*==================================================
        STEP NUMBER
==================================================*/

.hopewave-step span{

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        box-shadow .35s ease;

}

.hopewave-step:hover span{

    transform:scale(1.12);

    background:#00BCD4;

    color:#fff;

    box-shadow:
        0 0 25px rgba(0,188,212,.25);

}

/*==================================================
        STEP TITLE
==================================================*/

.hopewave-step h4{

    transition:
        color .35s ease,
        letter-spacing .35s ease;

}

.hopewave-step:hover h4{

    color:#00BCD4;

    letter-spacing:.5px;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:991px){

.hopewave-center:hover{

transform:scale(1.02);

}

.hopewave-step:hover{

transform:translateY(-5px);

}

.step-one:hover,
.step-two:hover,
.step-three:hover,
.step-four:hover{

transform:translateY(-5px);

}

}

@media(max-width:768px){

.hopewave-center:hover{

transform:none;

}

.hopewave-step:hover{

transform:none;

}

.hopewave-step:hover span{

transform:scale(1.05);

}

}

/* Matters Section Ends Here */

/* FAQ Section Starts Here */

/*==================================================
        RESCUE FAQ SECTION
==================================================*/

.rescuefaq-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.rescuefaq-section::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    top:-220px;

    left:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(120px);

}

.rescuefaq-section::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*====================================
SECTION HEADING
====================================*/

.rescuefaq-section .section-heading{

    max-width:850px;

    margin:0 auto 70px;

    position:relative;

    z-index:5;

}

.rescuefaq-section .section-heading h2{

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

    margin:25px 0;

}

.rescuefaq-section .section-heading h2 span{

    color:#00BCD4;

}

.rescuefaq-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*====================================
FAQ WRAPPER
====================================*/

.rescuefaq-wrapper{

    max-width:950px;

    margin:auto;

    position:relative;

    z-index:5;

}

/*====================================
FAQ ITEM
====================================*/

.rescuefaq-item{

    border-bottom:1px solid rgba(255,255,255,.08);

}

/*====================================
QUESTION
====================================*/

.rescuefaq-question{

    width:100%;

    background:none;

    border:none;

    padding:28px 0;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    text-align:left;

}

/*====================================
LEFT
====================================*/

.rescuefaq-left{

    display:flex;

    align-items:center;

    gap:22px;

}

/*====================================
ICON
====================================*/

.rescuefaq-icon{

    width:54px;

    height:54px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    background:rgba(0,188,212,.10);

    color:#00BCD4;

    font-size:1.25rem;

    box-shadow:

        0 0 18px rgba(0,188,212,.15);

}

/*====================================
TITLE
====================================*/

.rescuefaq-question h4{

    margin:0;

    color:#fff;

    font-size:1.2rem;

    font-weight:600;

    transition:.35s;

}

/*====================================
PLUS
====================================*/

.rescuefaq-toggle{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:#00BCD4;

    font-size:1.4rem;

    font-weight:600;

    transition:.35s;

}

/*====================================
ANSWER
====================================*/

.rescuefaq-answer{

    max-height:0;

    overflow:hidden;

    opacity:0;

    transition:

        max-height .45s ease,

        opacity .35s ease;

}

.rescuefaq-answer p{

    padding:

        0

        0

        28px

        76px;

    color:#CBD5E1;

    line-height:1.9;

}

/*====================================
ACTIVE
====================================*/

.rescuefaq-item.active .rescuefaq-answer{

    max-height:250px;

    opacity:1;

}

.rescuefaq-item.active .rescuefaq-toggle{

    background:#00BCD4;

    color:#fff;

    font-size:0;

}

.rescuefaq-item.active .rescuefaq-toggle::before{

    content:"−";

    font-size:1.6rem;

}

/*====================================
HEADING UNDERLINE
====================================*/

.rescuefaq-section h2 span{

    position:relative;

}

.rescuefaq-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:30px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    opacity:.35;

}

/*====================================
RESPONSIVE
====================================*/

@media(max-width:768px){

.rescuefaq-section{

padding:90px 5%;

}

.rescuefaq-section .section-heading{

margin-bottom:50px;

}

.rescuefaq-section .section-heading h2{

font-size:2.3rem;

}

.rescuefaq-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.rescuefaq-question{

padding:22px 0;

}

.rescuefaq-left{

gap:15px;

align-items:flex-start;

}

.rescuefaq-icon{

width:44px;

height:44px;

font-size:1rem;

}

.rescuefaq-question h4{

font-size:1rem;

line-height:1.5;

}

.rescuefaq-toggle{

width:36px;

height:36px;

font-size:1.2rem;

}

.rescuefaq-answer p{

padding:

0

0

22px

59px;

font-size:.9rem;

line-height:1.8;

}

}

/* Part - 2 */

/*==================================================
        FAQ ITEM
==================================================*/

.rescuefaq-item{

    transition:border-color .35s ease;

}

.rescuefaq-item:hover{

    border-bottom-color:rgba(0,188,212,.22);

}

/*==================================================
        QUESTION TITLE
==================================================*/

.rescuefaq-question h4{

    transition:
        color .35s ease,
        letter-spacing .35s ease;

}

.rescuefaq-item:hover h4{

    color:#00BCD4;

    letter-spacing:.3px;

}

.rescuefaq-item.active h4{

    color:#00BCD4;

}

/*==================================================
        AMBULANCE ICON
==================================================*/

.rescuefaq-icon{

    position:relative;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        box-shadow .35s ease;

}

.rescuefaq-item:hover .rescuefaq-icon{

    transform:rotate(-8deg) scale(1.08);

    background:rgba(0,188,212,.18);

    color:#7ED321;

    box-shadow:
        0 0 28px rgba(0,188,212,.22);

}

.rescuefaq-item.active .rescuefaq-icon{

    background:rgba(0,188,212,.18);

    color:#7ED321;

}

/*==================================================
        ICON PULSE
==================================================*/

.rescuefaq-icon::after{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:rescueFaqPulse 3s ease-out infinite;

}

@keyframes rescueFaqPulse{

    0%{

        transform:scale(1);

        opacity:.75;

    }

    100%{

        transform:scale(1.35);

        opacity:0;

    }

}

/*==================================================
        TOGGLE BUTTON
==================================================*/

.rescuefaq-toggle{

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        color .35s ease,
        box-shadow .35s ease;

}

.rescuefaq-item:hover .rescuefaq-toggle{

    transform:rotate(90deg);

    background:rgba(0,188,212,.10);

    border-color:rgba(0,188,212,.20);

    color:#7ED321;

    box-shadow:
        0 0 20px rgba(0,188,212,.16);

}

.rescuefaq-item.active .rescuefaq-toggle{

    transform:rotate(180deg);

}

/*==================================================
        ANSWER
==================================================*/

.rescuefaq-answer p{

    transition:color .35s ease;

}

.rescuefaq-item:hover .rescuefaq-answer p{

    color:#E2E8F0;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.rescuefaq-item:hover .rescuefaq-toggle{

transform:none;

}

.rescuefaq-item:hover .rescuefaq-icon{

transform:scale(1.05);

}

}

/* FAQ Section Ends Here */

/* CTA Section Starts Here */

/*==================================================
        EMERGENCY SIGNAL CTA
==================================================*/

.emergencysignal-section{

    position:relative;

    overflow:hidden;

    padding:140px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

/*==================================
BACKGROUND GLOWS
==================================*/

.emergencysignal-section::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    left:-220px;

    top:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(120px);

}

.emergencysignal-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
CENTER GLOW
==================================*/

.emergencysignal-glow{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:650px;

    height:650px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.12),
        transparent 70%
    );

    filter:blur(80px);

}

/*==================================
BACKGROUND CROSS
==================================*/

.emergencysignal-cross{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    z-index:1;

    opacity:.04;

    pointer-events:none;

}

.emergencysignal-cross i{

    font-size:18rem;

    color:#fff;

}

/*==================================
WRAPPER
==================================*/

.emergencysignal-wrapper{

    position:relative;

    z-index:5;

    max-width:900px;

    margin:auto;

    text-align:center;

}

/*==================================
ICON
==================================*/

.emergencysignal-icon{

    width:110px;

    height:110px;

    margin:0 auto 30px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,188,212,.12);

    border:2px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-size:2.8rem;

}

/*==================================
BADGE
==================================*/

.emergencysignal-badge{

    display:inline-block;

    padding:10px 24px;

    margin-bottom:25px;

    border-radius:50px;

    background:rgba(0,188,212,.10);

    color:#00BCD4;

    font-size:.82rem;

    font-weight:600;

    letter-spacing:1px;

}

/*==================================
TITLE
==================================*/

.emergencysignal-wrapper h2{

    color:#fff;

    font-size:3.4rem;

    line-height:1.2;

    margin-bottom:25px;

}

.emergencysignal-wrapper h2 span{

    color:#00BCD4;

}

/*==================================
TEXT
==================================*/

.emergencysignal-wrapper p{

    max-width:720px;

    margin:0 auto 35px;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
DIVIDER
==================================*/

.emergencysignal-divider{

    width:180px;

    height:2px;

    margin:40px auto;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        transparent,
        #00BCD4,
        #7ED321,
        transparent
    );

}

/*==================================
BUTTONS
==================================*/
/*==================================================
        PREMIUM CTA BUTTONS
==================================================*/
/*==================================
CTA BUTTONS
==================================*/

/*=====================================
EMERGENCY BUTTONS
=====================================*/

.emergencysignal-actions{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.emergency-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-width:260px;

    height:62px;

    padding:0 34px;

    border-radius:60px;

    text-decoration:none !important;

    color:#fff !important;

    font-weight:600;

    font-size:16px;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #0097A7
    );

    border:none;

    transition:.35s;

    box-shadow:
        0 15px 35px rgba(0,188,212,.25);

}

.emergency-btn span{

    text-decoration:none !important;

    color:inherit;

}

.emergency-btn:hover{

    color:#fff !important;

    text-decoration:none !important;

    transform:translateY(-6px);

    background:linear-gradient(
        135deg,
        #7ED321,
        #00BCD4
    );

    box-shadow:
        0 20px 45px rgba(0,188,212,.35);

}

.emergency-btn:hover span{

    text-decoration:none !important;

}

.emergency-secondary{

    background:linear-gradient(
        135deg,
        #0EA5E9,
        #06B6D4
    );

}

.emergency-tertiary{

    background:linear-gradient(
        135deg,
        #14B8A6,
        #22C55E
    );

}

.emergency-btn::before,
.emergency-btn::after{

    display:none !important;

}

@media(max-width:768px){

.emergencysignal-actions{

flex-direction:column;

}

.emergency-btn{

width:100%;

max-width:340px;

min-width:auto;

}

}

/*==================================
PARTICLES
==================================*/

.emergencysignal-particles{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.emergencysignal-particles span{

    position:absolute;

    width:6px;

    height:6px;

    border-radius:50%;

    background:#7ED321;

    opacity:.4;

}

.emergencysignal-particles span:nth-child(1){

top:18%;

left:18%;

}

.emergencysignal-particles span:nth-child(2){

top:28%;

right:22%;

}

.emergencysignal-particles span:nth-child(3){

top:62%;

left:15%;

}

.emergencysignal-particles span:nth-child(4){

top:70%;

right:18%;

}

.emergencysignal-particles span:nth-child(5){

bottom:18%;

left:38%;

}

.emergencysignal-particles span:nth-child(6){

bottom:22%;

right:36%;

}

/*==================================
HEADING UNDERLINE
==================================*/

/* .emergencysignal-wrapper h2 span{

    position:relative;

}

.emergencysignal-wrapper h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    opacity:.35;

} */

/*==================================
RESPONSIVE
==================================*/

@media(max-width:768px){

.emergencysignal-section{

padding:90px 5%;

}

.emergencysignal-glow{

width:350px;

height:350px;

}

.emergencysignal-cross i{

font-size:10rem;

}

.emergencysignal-icon{

width:85px;

height:85px;

font-size:2rem;

margin-bottom:22px;

}

.emergencysignal-badge{

font-size:.75rem;

padding:8px 18px;

}

.emergencysignal-wrapper h2{

font-size:2.3rem;

}

.emergencysignal-wrapper p{

font-size:.95rem;

line-height:1.8;

margin-bottom:28px;

}

.emergencysignal-divider{

width:120px;

margin:30px auto;

}

.emergencysignal-actions{

flex-direction:column;

align-items:center;

}

.emergencysignal-actions .theme-btn{

width:100%;

max-width:320px;

justify-content:center;

}

}

/* Part - 2 */



/* CTA Section Ends Here */

/* Humanitarian Aid And Disaster Relief Page Ends Here */

/* Other Specialized Services Page Starts Here */

/* Hero Section Starts Here */

/*==================================================
        INNOVATION HUB HERO
==================================================*/

.innovationhubhero-section{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    min-height:100vh;

    padding:180px 5% 120px;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 60%,
        #050816 100%
    );

}

/*==================================
BACKGROUND GLOW
==================================*/

.innovationhubhero-section::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    left:-250px;

    top:-250px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.10),
        transparent 70%
    );

    filter:blur(140px);

}

.innovationhubhero-section::after{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    right:-220px;

    bottom:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(140px);

}

/*==================================
LIGHT RAYS
==================================*/

.innovationhubhero-rays{

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at center,
        rgba(0,188,212,.10),
        transparent 55%),

        repeating-conic-gradient(

            from 0deg,

            rgba(0,188,212,.035) 0deg,

            transparent 14deg,

            transparent 30deg

        );

    opacity:.7;

}

/*==================================
GLASS OVERLAY
==================================*/

.innovationhubhero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        135deg,

        rgba(255,255,255,.03),

        rgba(255,255,255,.01)

    );

    backdrop-filter:blur(2px);

}

/*==================================
CONTENT
==================================*/

.innovationhubhero-content{

    position:relative;

    z-index:10;

    max-width:850px;

}

.innovationhubhero-tag{

    display:inline-block;

    padding:10px 24px;

    margin-bottom:25px;

    border-radius:50px;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.15);

    color:#00BCD4;

    font-size:.82rem;

    font-weight:600;

    letter-spacing:1px;

}

.innovationhubhero-content h1{

    color:#fff;

    font-size:4.5rem;

    line-height:1.15;

    margin-bottom:30px;

    font-weight:700;

}

.innovationhubhero-content h1 span{

    color:#00BCD4;

}

.innovationhubhero-content p{

    max-width:720px;

    color:#CBD5E1;

    font-size:1.12rem;

    line-height:2;

}

/*==================================
FLOATING SHAPES
==================================*/

.innovationhubhero-shape{

    position:absolute;

    border:2px solid rgba(255,255,255,.08);

    backdrop-filter:blur(8px);

}

.shape-one{

    width:70px;

    height:70px;

    left:8%;

    top:18%;

    border-radius:18px;

    transform:rotate(18deg);

}

.shape-two{

    width:90px;

    height:90px;

    right:12%;

    top:22%;

    border-radius:50%;

}

.shape-three{

    width:75px;

    height:75px;

    left:15%;

    bottom:18%;

    clip-path:polygon(50% 0%,100% 50%,50% 100%,0 50%);

}

.shape-four{

    width:85px;

    height:85px;

    right:10%;

    bottom:18%;

    border-radius:22px;

    transform:rotate(45deg);

}

/*==================================
SERVICE ICONS
==================================*/

.innovationhubhero-icons{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.innovationhubhero-icons span{

    position:absolute;

    width:56px;

    height:56px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(15px);

    color:#00BCD4;

    font-size:1.35rem;

}

.innovationhubhero-icons span:nth-child(1){

top:18%;

left:28%;

}

.innovationhubhero-icons span:nth-child(2){

top:28%;

right:20%;

}

.innovationhubhero-icons span:nth-child(3){

top:55%;

left:10%;

}

.innovationhubhero-icons span:nth-child(4){

top:62%;

right:14%;

}

.innovationhubhero-icons span:nth-child(5){

bottom:16%;

left:28%;

}

.innovationhubhero-icons span:nth-child(6){

bottom:14%;

right:28%;

}

/*==================================
PARTICLES
==================================*/

.innovationhubhero-particles{

    position:absolute;

    inset:0;

}

.innovationhubhero-particles span{

    position:absolute;

    width:5px;

    height:5px;

    border-radius:50%;

    background:#7ED321;

    opacity:.45;

}

.innovationhubhero-particles span:nth-child(1){

top:16%;

left:18%;

}

.innovationhubhero-particles span:nth-child(2){

top:28%;

left:75%;

}

.innovationhubhero-particles span:nth-child(3){

top:62%;

left:12%;

}

.innovationhubhero-particles span:nth-child(4){

top:70%;

right:18%;

}

.innovationhubhero-particles span:nth-child(5){

bottom:22%;

left:42%;

}

.innovationhubhero-particles span:nth-child(6){

bottom:18%;

right:32%;

}

/*==================================
SCROLL
==================================*/

.innovationhubhero-scroll{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    width:34px;

    height:58px;

    border:2px solid rgba(255,255,255,.18);

    border-radius:40px;

    display:flex;

    justify-content:center;

    padding-top:10px;

}

.innovationhubhero-scroll span{

    width:6px;

    height:12px;

    border-radius:20px;

    background:#00BCD4;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.innovationhubhero-section{

text-align:center;

padding:160px 5% 100px;

}

.innovationhubhero-content{

margin:auto;

}

.innovationhubhero-content h1{

font-size:3.5rem;

}

.innovationhubhero-content p{

margin:auto;

}

}

@media(max-width:768px){

.innovationhubhero-section{

min-height:auto;

padding:140px 5% 90px;

}

.innovationhubhero-content h1{

font-size:2.5rem;

}

.innovationhubhero-content p{

font-size:.95rem;

line-height:1.8;

}

.innovationhubhero-icons span{

width:44px;

height:44px;

font-size:1rem;

}

.shape-one,
.shape-two,
.shape-three,
.shape-four{

width:50px;

height:50px;

}

.innovationhubhero-scroll{

display:none;

}

}

/* Part - 2 */

/*==================================================
        LIGHT RAYS
==================================================*/

.innovationhubhero-rays{

    animation:innovationRayRotate 35s linear infinite;

    transform-origin:center;

}

@keyframes innovationRayRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*==================================================
        FLOATING SHAPES
==================================================*/

.innovationhubhero-shape{

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease,
        background .4s ease;

}

.shape-one{

    animation:shapeFloatOne 7s ease-in-out infinite;

}

.shape-two{

    animation:shapeFloatTwo 8s ease-in-out infinite;

}

.shape-three{

    animation:shapeFloatThree 9s ease-in-out infinite;

}

.shape-four{

    animation:shapeFloatFour 10s ease-in-out infinite;

}

@keyframes shapeFloatOne{

    50%{

        transform:translateY(-18px) rotate(35deg);

    }

}

@keyframes shapeFloatTwo{

    50%{

        transform:translateY(15px) scale(1.08);

    }

}

@keyframes shapeFloatThree{

    50%{

        transform:translateY(-15px) rotate(-20deg);

    }

}

@keyframes shapeFloatFour{

    50%{

        transform:translateY(18px) rotate(70deg);

    }

}

.innovationhubhero-shape:hover{

    border-color:rgba(0,188,212,.25);

    background:rgba(0,188,212,.08);

    box-shadow:
        0 0 25px rgba(0,188,212,.18);

}

/*==================================================
        SERVICE ICONS
==================================================*/

.innovationhubhero-icons span{

    transition:
        transform .35s ease,
        color .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

    animation:serviceFloat 6s ease-in-out infinite;

}

.innovationhubhero-icons span:nth-child(2){

animation-delay:.8s;

}

.innovationhubhero-icons span:nth-child(3){

animation-delay:1.6s;

}

.innovationhubhero-icons span:nth-child(4){

animation-delay:2.4s;

}

.innovationhubhero-icons span:nth-child(5){

animation-delay:3.2s;

}

.innovationhubhero-icons span:nth-child(6){

animation-delay:4s;

}

@keyframes serviceFloat{

    50%{

        transform:translateY(-14px);

    }

}

.innovationhubhero-icons span:hover{

    transform:translateY(-10px) scale(1.08);

    background:rgba(0,188,212,.15);

    border-color:rgba(0,188,212,.22);

    color:#7ED321;

    box-shadow:
        0 0 25px rgba(0,188,212,.20);

}

/*==================================================
        PARTICLES
==================================================*/

.innovationhubhero-particles span{

    animation:innovationParticles 6s ease-in-out infinite;

}

.innovationhubhero-particles span:nth-child(2){

animation-delay:.8s;

}

.innovationhubhero-particles span:nth-child(3){

animation-delay:1.6s;

}

.innovationhubhero-particles span:nth-child(4){

animation-delay:2.4s;

}

.innovationhubhero-particles span:nth-child(5){

animation-delay:3.2s;

}

.innovationhubhero-particles span:nth-child(6){

animation-delay:4s;

}

@keyframes innovationParticles{

    0%,100%{

        transform:translateY(0) scale(1);

        opacity:.35;

    }

    50%{

        transform:translateY(-22px) scale(1.5);

        opacity:1;

    }

}

/*==================================================
        CONTENT
==================================================*/

.innovationhubhero-tag{

    transition:
        background .35s ease,
        color .35s ease,
        box-shadow .35s ease;

}

.innovationhubhero-tag:hover{

    background:#00BCD4;

    color:#fff;

    box-shadow:
        0 0 20px rgba(0,188,212,.20);

}

.innovationhubhero-content h1{

    transition:.35s;

}

.innovationhubhero-content:hover h1 span{

    color:#7ED321;

}

.innovationhubhero-content p{

    transition:.35s;

}

.innovationhubhero-content:hover p{

    color:#E2E8F0;

}

/*==================================================
        SCROLL INDICATOR
==================================================*/

.innovationhubhero-scroll span{

    animation:scrollBounce 2s ease-in-out infinite;

}

@keyframes scrollBounce{

    0%{

        transform:translateY(0);

        opacity:1;

    }

    50%{

        transform:translateY(16px);

        opacity:.4;

    }

    100%{

        transform:translateY(0);

        opacity:1;

    }

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.innovationhubhero-icons span:hover{

transform:none;

}

.innovationhubhero-shape:hover{

box-shadow:none;

}

}

/*====================================
PREMIUM BREADCRUMB
====================================*/

.innovationhubhero-breadcrumb{

    display:inline-flex;

    align-items:center;

    gap:14px;

    padding:10px 22px;

    margin-bottom:30px;

    border-radius:50px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(12px);

}

.innovationhubhero-breadcrumb a{

    color:#CBD5E1;

    text-decoration:none;

    font-size:.95rem;

    transition:.35s;

}

.innovationhubhero-breadcrumb a:hover{

    color:#00BCD4;

}

.innovationhubhero-breadcrumb span{

    color:rgba(255,255,255,.35);

    font-size:.85rem;

}

.innovationhubhero-breadcrumb .current{

    color:#00BCD4;

    font-weight:600;

}

/* Hero Section Ends Here */

/* About Section Starts Here */

/*==================================================
        EXPERTISE SHOWCASE
==================================================*/

.expertiseshowcase-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.expertiseshowcase-section::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    left:-220px;

    top:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(120px);

}

.expertiseshowcase-section::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*====================================
SECTION HEADING
====================================*/

.expertiseshowcase-section .section-heading{

    max-width:850px;

    margin:0 auto 80px;

    position:relative;

    z-index:5;

}

.expertiseshowcase-section .section-heading h2{

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

    margin:25px 0;

}

.expertiseshowcase-section .section-heading h2 span{

    color:#00BCD4;

}

.expertiseshowcase-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*====================================
SHOWCASE PANEL
====================================*/

.expertiseshowcase-panel{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:420px 1fr;

    gap:70px;

    align-items:center;

    max-width:1250px;

    margin:auto;

    padding:70px;

    border-radius:35px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}

/*====================================
VISUAL
====================================*/

.expertiseshowcase-visual{

    position:relative;

    height:420px;

    display:flex;

    justify-content:center;

    align-items:center;

}

/*====================================
CENTER CIRCLE
====================================*/

.expertiseshowcase-circle{

    width:180px;

    height:180px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,188,212,.12);

    border:2px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-size:4rem;

    position:relative;

    z-index:2;

}

/*====================================
FLOATING ICONS
====================================*/

.expertiseshowcase-floating{

    position:absolute;

    width:70px;

    height:70px;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(12px);

    color:#00BCD4;

    font-size:1.6rem;

}

.icon-one{

    top:40px;

    left:40px;

}

.icon-two{

    top:80px;

    right:30px;

}

.icon-three{

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

}

/*====================================
CONTENT
====================================*/

.expertiseshowcase-content h3{

    color:#fff;

    font-size:2.1rem;

    line-height:1.3;

    margin-bottom:25px;

}

.expertiseshowcase-content p{

    color:#CBD5E1;

    line-height:2;

    margin-bottom:35px;

}

/*====================================
VALUES
====================================*/

.expertiseshowcase-values{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.expertiseshowcase-value{

    padding:14px 24px;

    border-radius:50px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:#fff;

    font-size:.95rem;

    font-weight:500;

    backdrop-filter:blur(10px);

}

/*====================================
HEADING UNDERLINE
====================================*/

.expertiseshowcase-section h2 span{

    position:relative;

}

.expertiseshowcase-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    opacity:.35;

}

/*====================================
RESPONSIVE
====================================*/

@media(max-width:991px){

.expertiseshowcase-panel{

grid-template-columns:1fr;

gap:50px;

padding:50px 35px;

text-align:center;

}

.expertiseshowcase-visual{

height:320px;

}

.expertiseshowcase-values{

justify-content:center;

}

}

@media(max-width:768px){

.expertiseshowcase-section{

padding:90px 5%;

}

.expertiseshowcase-section .section-heading{

margin-bottom:60px;

}

.expertiseshowcase-section .section-heading h2{

font-size:2.3rem;

}

.expertiseshowcase-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.expertiseshowcase-panel{

padding:35px 25px;

border-radius:25px;

}

.expertiseshowcase-circle{

width:120px;

height:120px;

font-size:2.8rem;

}

.expertiseshowcase-floating{

width:55px;

height:55px;

font-size:1.2rem;

}

.expertiseshowcase-content h3{

font-size:1.6rem;

}

.expertiseshowcase-content p{

font-size:.95rem;

line-height:1.8;

}

.expertiseshowcase-values{

gap:12px;

}

.expertiseshowcase-value{

padding:12px 18px;

font-size:.88rem;

}

}

/* Part - 2 */

/*==================================================
        SHOWCASE PANEL
==================================================*/

.expertiseshowcase-panel{

    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;

}

.expertiseshowcase-panel:hover{

    transform:translateY(-8px);

    border-color:rgba(0,188,212,.15);

    box-shadow:
        0 30px 80px rgba(0,188,212,.10);

}

/*==================================================
        CENTER ICON
==================================================*/

.expertiseshowcase-circle{

    position:relative;

    transition:
        transform .4s ease,
        background .4s ease,
        color .4s ease,
        box-shadow .4s ease;

}

.expertiseshowcase-panel:hover .expertiseshowcase-circle{

    transform:scale(1.08);

    background:rgba(0,188,212,.18);

    color:#7ED321;

    box-shadow:
        0 0 45px rgba(0,188,212,.25);

}

.expertiseshowcase-circle::after{

    content:"";

    position:absolute;

    inset:-12px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:expertCirclePulse 3s ease-out infinite;

}

@keyframes expertCirclePulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.35);

        opacity:0;

    }

}

/*==================================================
        FLOATING ICONS
==================================================*/

.expertiseshowcase-floating{

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.icon-one{

    animation:expertFloatOne 5s ease-in-out infinite;

}

.icon-two{

    animation:expertFloatTwo 6s ease-in-out infinite;

}

.icon-three{

    animation:expertFloatThree 7s ease-in-out infinite;

}

@keyframes expertFloatOne{

    50%{

        transform:translateY(-14px);

    }

}

@keyframes expertFloatTwo{

    50%{

        transform:translateY(14px);

    }

}

@keyframes expertFloatThree{

    50%{

        transform:translateX(-50%) translateY(-16px);

    }

}

.expertiseshowcase-floating:hover{

    transform:translateY(-10px) scale(1.08);

    background:rgba(0,188,212,.15);

    border-color:rgba(0,188,212,.20);

    color:#7ED321;

    box-shadow:
        0 0 28px rgba(0,188,212,.22);

}

/*==================================================
        CONTENT
==================================================*/

.expertiseshowcase-content h3{

    transition:.35s;

}

.expertiseshowcase-panel:hover .expertiseshowcase-content h3{

    color:#00BCD4;

}

.expertiseshowcase-content p{

    transition:.35s;

}

.expertiseshowcase-panel:hover .expertiseshowcase-content p{

    color:#E2E8F0;

}

/*==================================================
        CORE VALUES
==================================================*/

.expertiseshowcase-value{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        color .35s ease,
        box-shadow .35s ease;

}

.expertiseshowcase-value::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s ease;

    z-index:-1;

}

.expertiseshowcase-value:hover{

    transform:translateY(-5px);

    color:#fff;

    border-color:transparent;

    box-shadow:
        0 12px 28px rgba(0,188,212,.22);

}

.expertiseshowcase-value:hover::before{

    transform:scaleX(1);

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.expertiseshowcase-panel:hover{

transform:none;

}

.expertiseshowcase-floating:hover{

transform:scale(1.05);

}

.expertiseshowcase-value:hover{

transform:none;

}

}

/* About Section Ends Here */

/* Service Section Starts Here */

/*==================================================
        SPECIALIZED SERVICE AREAS
==================================================*/

.expertisegrid-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.expertisegrid-section::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    top:-220px;

    left:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(120px);

}

.expertisegrid-section::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.expertisegrid-section .section-heading{

    max-width:850px;

    margin:0 auto 80px;

    position:relative;

    z-index:5;

}

.expertisegrid-section .section-heading h2{

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

    margin:25px 0;

}

.expertisegrid-section .section-heading h2 span{

    color:#00BCD4;

}

.expertisegrid-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
GRID
==================================*/

.expertisegrid-layout{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:24px;

    max-width:1250px;

    margin:auto;

}

/*==================================
BOX
==================================*/

.expertisegrid-box{

    position:relative;

    overflow:hidden;

    padding:38px;

    border-radius:28px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(16px);

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    min-height:230px;

}

/*==================================
SIZES
==================================*/

.expertisegrid-large{

    min-height:300px;

}

.expertisegrid-medium{

    min-height:138px;

}

.expertisegrid-wide{

    grid-column:1/-1;

    display:flex;

    flex-direction:row;

    align-items:center;

    gap:30px;

    min-height:180px;

}

/*==================================
ICON
==================================*/

.expertisegrid-icon{

    width:74px;

    height:74px;

    margin-bottom:28px;

    border-radius:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.15);

    color:#00BCD4;

    font-size:1.8rem;

    flex-shrink:0;

}

.expertisegrid-wide .expertisegrid-icon{

    margin-bottom:0;

}

/*==================================
TEXT
==================================*/

.expertisegrid-box h3{

    color:#fff;

    font-size:1.7rem;

    line-height:1.3;

    margin-bottom:18px;

}

.expertisegrid-medium h3{

    font-size:1.35rem;

    margin-bottom:12px;

}

.expertisegrid-box p{

    color:#CBD5E1;

    line-height:1.9;

}

.expertisegrid-medium p{

    line-height:1.7;

    font-size:.95rem;

}

/*==================================
ACCENT LINE
==================================*/

.expertisegrid-box::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:linear-gradient(

        180deg,

        #00BCD4,

        #7ED321

    );

    opacity:.65;

}

/*==================================
BACKGROUND SHAPE
==================================*/

.expertisegrid-box::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    right:-80px;

    bottom:-80px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,188,212,.08),

        transparent 70%

    );

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.expertisegrid-layout{

grid-template-columns:1fr;

}

.expertisegrid-wide{

grid-column:auto;

flex-direction:column;

align-items:flex-start;

}

.expertisegrid-large,

.expertisegrid-medium,

.expertisegrid-wide{

min-height:auto;

}

}

@media(max-width:768px){

.expertisegrid-section{

padding:90px 5%;

}

.expertisegrid-section .section-heading{

margin-bottom:60px;

}

.expertisegrid-section .section-heading h2{

font-size:2.3rem;

}

.expertisegrid-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.expertisegrid-box{

padding:28px;

border-radius:22px;

}

.expertisegrid-icon{

width:60px;

height:60px;

font-size:1.5rem;

margin-bottom:20px;

}

.expertisegrid-box h3{

font-size:1.45rem;

}

.expertisegrid-medium h3{

font-size:1.2rem;

}

.expertisegrid-box p{

font-size:.92rem;

line-height:1.8;

}

}

/* Part - 2 */

/*==================================================
        SERVICE TILES
==================================================*/

.expertisegrid-box{

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease,
        background .4s ease;

}

.expertisegrid-box:hover{

    transform:translateY(-10px);

    border-color:rgba(0,188,212,.18);

    background:rgba(255,255,255,.06);

    box-shadow:
        0 25px 60px rgba(0,188,212,.12);

}

/*==================================================
        ACCENT BAR
==================================================*/

.expertisegrid-box::before{

    transition:
        width .35s ease,
        opacity .35s ease;

}

.expertisegrid-box:hover::before{

    width:8px;

    opacity:1;

}

/*==================================================
        BACKGROUND GLOW
==================================================*/

.expertisegrid-box::after{

    transition:
        transform .5s ease,
        opacity .5s ease;

}

.expertisegrid-box:hover::after{

    transform:scale(1.3);

    opacity:1;

}

/*==================================================
        ICON
==================================================*/

.expertisegrid-icon{

    position:relative;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        color .35s ease,
        box-shadow .35s ease;

}

.expertisegrid-box:hover .expertisegrid-icon{

    transform:rotate(-8deg) scale(1.08);

    background:linear-gradient(
        135deg,
        rgba(0,188,212,.18),
        rgba(126,211,33,.15)
    );

    border-color:rgba(0,188,212,.25);

    color:#7ED321;

    box-shadow:
        0 0 28px rgba(0,188,212,.22);

}

.expertisegrid-icon::after{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:24px;

    border:2px solid rgba(0,188,212,.10);

    animation:gridIconPulse 3s ease-out infinite;

}

@keyframes gridIconPulse{

    0%{

        transform:scale(1);

        opacity:.7;

    }

    100%{

        transform:scale(1.3);

        opacity:0;

    }

}

/*==================================================
        TITLES
==================================================*/

.expertisegrid-box h3{

    transition:
        color .35s ease,
        transform .35s ease;

}

.expertisegrid-box:hover h3{

    color:#00BCD4;

    transform:translateX(6px);

}

/*==================================================
        DESCRIPTION
==================================================*/

.expertisegrid-box p{

    transition:color .35s ease;

}

.expertisegrid-box:hover p{

    color:#E2E8F0;

}

/*==================================================
        WIDE TILE
==================================================*/

.expertisegrid-wide:hover .expertisegrid-icon{

    transform:rotate(8deg) scale(1.1);

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.expertisegrid-box:hover{

transform:none;

box-shadow:none;

}

.expertisegrid-box:hover h3{

transform:none;

}

.expertisegrid-box:hover .expertisegrid-icon{

transform:scale(1.05);

}

}

/* Service Section Ends Here */

/* Approach Section Starts Here */

/*==================================================
        SOLUTION LADDER
==================================================*/

.solutionladder-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.solutionladder-section::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    left:-220px;

    top:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(120px);

}

.solutionladder-section::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.solutionladder-section .section-heading{

    max-width:850px;

    margin:0 auto 90px;

    position:relative;

    z-index:5;

}

.solutionladder-section .section-heading h2{

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

    margin:25px 0;

}

.solutionladder-section .section-heading h2 span{

    color:#00BCD4;

}

.solutionladder-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
WRAPPER
==================================*/

.solutionladder-wrapper{

    position:relative;

    max-width:1100px;

    margin:auto;

    z-index:5;

}

/*==================================
STEP
==================================*/

.solutionladder-step{

    width:100%;

    display:flex;

    margin-bottom:20px;

}

.solutionladder-step.left{

    justify-content:flex-start;

}

.solutionladder-step.right{

    justify-content:flex-end;

}

/*==================================
CARD
==================================*/

.solutionladder-card{

    position:relative;

    width:470px;

    padding:30px;

    border-radius:24px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(14px);

}

/*==================================
LADDER SIDE RAIL
==================================*/

.solutionladder-card::before{

    content:"";

    position:absolute;

    top:50%;

    width:65px;

    height:3px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

}

.solutionladder-step.left .solutionladder-card::before{

    right:-65px;

}

.solutionladder-step.right .solutionladder-card::before{

    left:-65px;

}

/*==================================
ICON
==================================*/

.solutionladder-icon{

    width:70px;

    height:70px;

    margin-bottom:25px;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-size:1.7rem;

}

/*==================================
TEXT
==================================*/

.solutionladder-card h3{

    color:#fff;

    font-size:1.55rem;

    margin-bottom:15px;

}

.solutionladder-card p{

    color:#CBD5E1;

    line-height:1.9;

}

/*==================================
LADDER RUNG
==================================*/

.solutionladder-rung{

    position:relative;

    width:6px;

    height:70px;

    margin:0 auto 20px;

    border-radius:20px;

    background:linear-gradient(
        180deg,
        #00BCD4,
        #7ED321
    );

}

.solutionladder-rung::before,

.solutionladder-rung::after{

    content:"";

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    width:120px;

    height:3px;

    border-radius:20px;

    background:rgba(255,255,255,.10);

}

.solutionladder-rung::before{

    top:15px;

}

.solutionladder-rung::after{

    bottom:15px;

}

/*==================================
HEADING UNDERLINE
==================================*/

.solutionladder-section h2 span{

    position:relative;

}

.solutionladder-section h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    opacity:.35;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.solutionladder-step.left,
.solutionladder-step.right{

justify-content:center;

}

.solutionladder-card{

width:100%;

max-width:550px;

}

.solutionladder-card::before{

display:none;

}

.solutionladder-rung::before,
.solutionladder-rung::after{

width:80px;

}

}

@media(max-width:768px){

.solutionladder-section{

padding:90px 5%;

}

.solutionladder-section .section-heading{

margin-bottom:60px;

}

.solutionladder-section .section-heading h2{

font-size:2.3rem;

}

.solutionladder-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.solutionladder-card{

padding:24px;

border-radius:20px;

}

.solutionladder-icon{

width:58px;

height:58px;

font-size:1.4rem;

margin-bottom:18px;

}

.solutionladder-card h3{

font-size:1.3rem;

}

.solutionladder-card p{

font-size:.92rem;

line-height:1.8;

}

.solutionladder-rung{

height:55px;

}

.solutionladder-rung::before,
.solutionladder-rung::after{

width:60px;

}

}

/* Part - 2 */

/*==================================================
        LADDER CARD
==================================================*/

.solutionladder-card{

    transition:
        transform .4s ease,
        background .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;

}

.solutionladder-card:hover{

    transform:translateY(-10px);

    background:rgba(255,255,255,.06);

    border-color:rgba(0,188,212,.18);

    box-shadow:
        0 25px 60px rgba(0,188,212,.15);

}

/*==================================================
        CONNECTOR
==================================================*/

.solutionladder-card::before{

    transition:
        width .35s ease,
        opacity .35s ease;

}

.solutionladder-card:hover::before{

    width:85px;

    opacity:1;

}

/*==================================================
        ICON
==================================================*/

.solutionladder-icon{

    position:relative;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.solutionladder-card:hover .solutionladder-icon{

    transform:rotate(-10deg) scale(1.08);

    background:linear-gradient(
        135deg,
        rgba(0,188,212,.18),
        rgba(126,211,33,.15)
    );

    color:#7ED321;

    border-color:rgba(0,188,212,.25);

    box-shadow:
        0 0 30px rgba(0,188,212,.25);

}

/* Pulse Ring */

.solutionladder-icon::after{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:24px;

    border:2px solid rgba(0,188,212,.12);

    animation:ladderPulse 3s ease-out infinite;

}

@keyframes ladderPulse{

    from{

        transform:scale(1);

        opacity:.75;

    }

    to{

        transform:scale(1.35);

        opacity:0;

    }

}

/*==================================================
        HEADING
==================================================*/

.solutionladder-card h3{

    transition:
        color .35s ease,
        transform .35s ease;

}

.solutionladder-card:hover h3{

    color:#00BCD4;

    transform:translateX(6px);

}

/*==================================================
        DESCRIPTION
==================================================*/

.solutionladder-card p{

    transition:color .35s ease;

}

.solutionladder-card:hover p{

    color:#E2E8F0;

}

/*==================================================
        LADDER RUNG
==================================================*/

.solutionladder-rung{

    transition:all .35s ease;

}

.solutionladder-wrapper:hover .solutionladder-rung{

    background:linear-gradient(
        180deg,
        #7ED321,
        #00BCD4
    );

}

.solutionladder-rung::before,

.solutionladder-rung::after{

    transition:.35s;

}

.solutionladder-wrapper:hover .solutionladder-rung::before,

.solutionladder-wrapper:hover .solutionladder-rung::after{

    background:rgba(0,188,212,.25);

}

/*==================================================
        PROGRESS GLOW
==================================================*/

.solutionladder-rung::after{

    animation:ladderGlow 3s linear infinite;

}

@keyframes ladderGlow{

    0%{

        box-shadow:0 0 0 rgba(0,188,212,0);

    }

    50%{

        box-shadow:0 0 18px rgba(0,188,212,.35);

    }

    100%{

        box-shadow:0 0 0 rgba(0,188,212,0);

    }

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.solutionladder-card:hover{

transform:none;

box-shadow:none;

}

.solutionladder-card:hover h3{

transform:none;

}

.solutionladder-card:hover .solutionladder-icon{

transform:scale(1.05);

}

}

/* Approach Section Ends Here */

/* Gallery Section Starts Here */

/*==================================================
        FLOATING MOSAIC
==================================================*/

.floatingmosaic-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.floatingmosaic-section::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    top:-220px;

    left:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(120px);

}

.floatingmosaic-section::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.floatingmosaic-section .section-heading{

    max-width:850px;

    margin:0 auto 80px;

    position:relative;

    z-index:5;

}

.floatingmosaic-section .section-heading h2{

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

    margin:25px 0;

}

.floatingmosaic-section .section-heading h2 span{

    color:#00BCD4;

}

.floatingmosaic-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
GRID
==================================*/

.floatingmosaic-grid{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    grid-auto-rows:180px;

    gap:24px;

    max-width:1300px;

    margin:auto;

}

/*==================================
ITEM
==================================*/

.floatingmosaic-item{

    position:relative;

    overflow:hidden;

    border-radius:26px;

    display:block;

    background:#111827;

    border:1px solid rgba(255,255,255,.08);

    text-decoration:none;

}

/*==================================
IMAGE
==================================*/

.floatingmosaic-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/*==================================
SIZES
==================================*/

.floatingmosaic-large{

    grid-row:span 3;

}

.floatingmosaic-medium{

    grid-row:span 2;

}

.floatingmosaic-small{

    grid-row:span 1;

}

/*==================================
OVERLAY
==================================*/

.floatingmosaic-overlay{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:30px 24px;

    background:linear-gradient(

        to top,

        rgba(5,8,22,.95),

        rgba(5,8,22,.20),

        transparent

    );

}

.floatingmosaic-overlay h4{

    margin:0;

    color:#fff;

    font-size:1.25rem;

    font-weight:600;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.floatingmosaic-grid{

grid-template-columns:1fr 1fr;

grid-auto-rows:220px;

}

.floatingmosaic-large{

grid-row:span 2;

}

.floatingmosaic-medium{

grid-row:span 1;

}

.floatingmosaic-small{

grid-row:span 1;

}

}

@media(max-width:768px){

.floatingmosaic-section{

padding:90px 5%;

}

.floatingmosaic-section .section-heading{

margin-bottom:60px;

}

.floatingmosaic-section .section-heading h2{

font-size:2.3rem;

}

.floatingmosaic-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.floatingmosaic-grid{

grid-template-columns:1fr;

grid-auto-rows:260px;

gap:18px;

}

.floatingmosaic-large,

.floatingmosaic-medium,

.floatingmosaic-small{

grid-row:auto;

}

.floatingmosaic-item{

border-radius:20px;

}

.floatingmosaic-overlay{

padding:22px 18px;

}

.floatingmosaic-overlay h4{

font-size:1.05rem;

}

}

/* Part - 2 */

/*==================================================
        MOSAIC TILE
==================================================*/

.floatingmosaic-item{

    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;

}

.floatingmosaic-item:hover{

    transform:translateY(-12px);

    border-color:rgba(0,188,212,.20);

    box-shadow:
        0 25px 60px rgba(0,188,212,.18);

}

/*==================================================
        IMAGE
==================================================*/

.floatingmosaic-item img{

    transition:
        transform .7s ease,
        filter .5s ease;

}

.floatingmosaic-item:hover img{

    transform:scale(1.12);

    filter:brightness(.88);

}

/*==================================================
        OVERLAY
==================================================*/

.floatingmosaic-overlay{

    transition:
        background .4s ease,
        padding .4s ease;

}

.floatingmosaic-item:hover .floatingmosaic-overlay{

    padding-bottom:38px;

    background:linear-gradient(

        to top,

        rgba(5,8,22,.98),

        rgba(0,188,212,.18),

        transparent

    );

}

/*==================================================
        TITLE
==================================================*/

.floatingmosaic-overlay h4{

    position:relative;

    display:inline-block;

    transition:
        color .35s ease,
        transform .35s ease;

}

.floatingmosaic-item:hover .floatingmosaic-overlay h4{

    color:#00BCD4;

    transform:translateX(10px);

}

/* Animated underline */

.floatingmosaic-overlay h4::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    border-radius:20px;

    background:#7ED321;

    transition:.35s ease;

}

.floatingmosaic-item:hover .floatingmosaic-overlay h4::after{

    width:100%;

}

/*==================================================
        GLOW EFFECT
==================================================*/

.floatingmosaic-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.10),

        transparent,

        rgba(126,211,33,.08)

    );

    opacity:0;

    transition:.4s;

    z-index:1;

    pointer-events:none;

}

.floatingmosaic-item:hover::before{

    opacity:1;

}

/*==================================================
        FLOATING ANIMATION
==================================================*/

.floatingmosaic-large{

    animation:mosaicFloatLarge 7s ease-in-out infinite;

}

.floatingmosaic-medium{

    animation:mosaicFloatMedium 8s ease-in-out infinite;

}

.floatingmosaic-small{

    animation:mosaicFloatSmall 6s ease-in-out infinite;

}

@keyframes mosaicFloatLarge{

    50%{

        transform:translateY(-8px);

    }

}

@keyframes mosaicFloatMedium{

    50%{

        transform:translateY(8px);

    }

}

@keyframes mosaicFloatSmall{

    50%{

        transform:translateY(-6px);

    }

}

/* Keep hover stronger than floating */

.floatingmosaic-large:hover,

.floatingmosaic-medium:hover,

.floatingmosaic-small:hover{

    animation-play-state:paused;

    transform:translateY(-12px);

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.floatingmosaic-large,

.floatingmosaic-medium,

.floatingmosaic-small{

animation:none;

}

.floatingmosaic-item:hover{

transform:none;

box-shadow:none;

}

.floatingmosaic-item:hover .floatingmosaic-overlay{

padding-bottom:22px;

}

.floatingmosaic-item:hover .floatingmosaic-overlay h4{

transform:none;

}

}

/* Gallery Section Ends Here */

/* Impact Section Starts Here */

/*==================================================
        EDITORIAL METRICS
==================================================*/

.editorialmetrics-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.editorialmetrics-section::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    top:-220px;

    left:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(120px);

}

.editorialmetrics-section::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.editorialmetrics-section .section-heading{

    max-width:850px;

    margin:0 auto 90px;

    position:relative;

    z-index:5;

}

.editorialmetrics-section .section-heading h2{

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

    margin:25px 0;

}

.editorialmetrics-section .section-heading h2 span{

    color:#00BCD4;

}

.editorialmetrics-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
WRAPPER
==================================*/

.editorialmetrics-wrapper{

    position:relative;

    z-index:5;

    max-width:1200px;

    margin:auto;

}

/*==================================
ITEM
==================================*/

.editorialmetrics-item{

    text-align:center;

    padding:50px 20px;

}

/*==================================
NUMBER
==================================*/

.editorialmetrics-item h3{

    margin:0;

    color:#fff;

    font-size:6rem;

    font-weight:800;

    line-height:1;

    letter-spacing:-3px;

}

.editorialmetrics-item h3 span{

    color:#00BCD4;

    font-size:.6em;

    font-weight:700;

}

/*==================================
TITLE
==================================*/

.editorialmetrics-item h4{

    margin:22px 0 0;

    color:#CBD5E1;

    font-size:1.25rem;

    font-weight:500;

    letter-spacing:.5px;

}

/*==================================
DIVIDER
==================================*/

.editorialmetrics-divider{

    width:220px;

    height:2px;

    margin:0 auto;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(0,188,212,.85),
        rgba(126,211,33,.85),
        transparent
    );

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.editorialmetrics-item{

padding:40px 20px;

}

.editorialmetrics-item h3{

font-size:5rem;

}

.editorialmetrics-divider{

width:180px;

}

}

@media(max-width:768px){

.editorialmetrics-section{

padding:90px 5%;

}

.editorialmetrics-section .section-heading{

margin-bottom:60px;

}

.editorialmetrics-section .section-heading h2{

font-size:2.3rem;

}

.editorialmetrics-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.editorialmetrics-item{

padding:32px 10px;

}

.editorialmetrics-item h3{

font-size:3.5rem;

letter-spacing:-1px;

}

.editorialmetrics-item h4{

font-size:1rem;

margin-top:16px;

}

.editorialmetrics-divider{

width:120px;

}

}

/* Part - 2 */

/*==================================================
        METRIC ITEM
==================================================*/

.editorialmetrics-item{

    position:relative;

    transition:transform .4s ease;

}

.editorialmetrics-item:hover{

    transform:translateY(-8px);

}

/*==================================================
        NUMBER
==================================================*/

.editorialmetrics-item h3{

    transition:
        transform .35s ease,
        color .35s ease,
        text-shadow .35s ease;

}

.editorialmetrics-item:hover h3{

    color:#00BCD4;

    transform:scale(1.05);

    text-shadow:
        0 0 30px rgba(0,188,212,.25);

}

.editorialmetrics-item h3 span{

    transition:color .35s ease;

}

.editorialmetrics-item:hover h3 span{

    color:#7ED321;

}

/*==================================================
        TITLE
==================================================*/

.editorialmetrics-item h4{

    position:relative;

    display:inline-block;

    transition:
        color .35s ease,
        letter-spacing .35s ease;

}

.editorialmetrics-item:hover h4{

    color:#fff;

    letter-spacing:1px;

}

/* Animated underline */

.editorialmetrics-item h4::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-10px;

    width:0;

    height:2px;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    transform:translateX(-50%);

    transition:.35s ease;

}

.editorialmetrics-item:hover h4::after{

    width:100%;

}

/*==================================================
        DIVIDER
==================================================*/

.editorialmetrics-divider{

    position:relative;

    overflow:hidden;

}

.editorialmetrics-divider::after{

    content:"";

    position:absolute;

    top:0;

    left:-35%;

    width:35%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.85),
        transparent
    );

    animation:editorialDividerGlow 4s linear infinite;

}

@keyframes editorialDividerGlow{

    from{

        left:-35%;

    }

    to{

        left:135%;

    }

}

/*==================================================
        NUMBER PULSE
==================================================*/

.editorialmetrics-item h3::after{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:140px;

    height:140px;

    border-radius:50%;

    transform:translate(-50%,-50%);

    background:radial-gradient(
        circle,
        rgba(0,188,212,.10),
        transparent 70%
    );

    opacity:0;

    transition:.35s ease;

    z-index:-1;

}

.editorialmetrics-item:hover h3::after{

    opacity:1;

    transform:translate(-50%,-50%) scale(1.15);

}

/* Required because ::after is absolute */

.editorialmetrics-item h3{

    position:relative;

    display:inline-block;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.editorialmetrics-item:hover{

transform:none;

}

.editorialmetrics-item:hover h3{

transform:none;

text-shadow:none;

}

.editorialmetrics-item:hover h4{

letter-spacing:.5px;

}

}

/* Impact Section Ends Here */

/* Specialized Section Starts Here */

/*==================================================
        GROWTH PYRAMID
==================================================*/

.growthpyramid-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.growthpyramid-section::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    top:-220px;

    left:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(120px);

}

.growthpyramid-section::after{

    content:"";

    position:absolute;

    width:460px;

    height:460px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.growthpyramid-section .section-heading{

    max-width:850px;

    margin:0 auto 80px;

    position:relative;

    z-index:5;

}

.growthpyramid-section .section-heading h2{

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

    margin:25px 0;

}

.growthpyramid-section .section-heading h2 span{

    color:#00BCD4;

}

.growthpyramid-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
PYRAMID
==================================*/

.growthpyramid-wrapper{

    position:relative;

    z-index:5;

    max-width:900px;

    margin:auto;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:18px;

}

/*==================================
LEVEL
==================================*/

.growthpyramid-level{

    display:flex;

    justify-content:center;

    width:100%;

}

/*==================================
WIDTHS
==================================*/

.level-one .growthpyramid-box{

    width:100%;

}

.level-two .growthpyramid-box{

    width:82%;

}

.level-three .growthpyramid-box{

    width:66%;

}

.level-four .growthpyramid-box{

    width:50%;

}

.level-five .growthpyramid-box{

    width:36%;

}

/*==================================
BOX
==================================*/

.growthpyramid-box{

    position:relative;

    padding:22px 35px;

    border-radius:18px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(15px);

    text-align:center;

    overflow:hidden;

}

/* Left Accent */

.growthpyramid-box::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:linear-gradient(
        180deg,
        #00BCD4,
        #7ED321
    );

}

/* Background Glow */

.growthpyramid-box::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    right:-90px;

    top:-90px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

}

/*==================================
NUMBER
==================================*/

.growthpyramid-box span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

    margin-bottom:16px;

    border-radius:50%;

    background:rgba(0,188,212,.12);

    border:1px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-weight:700;

    font-size:.95rem;

}

/*==================================
TITLE
==================================*/

.growthpyramid-box h3{

    margin:0;

    color:#fff;

    font-size:1.35rem;

    font-weight:600;

    line-height:1.4;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.level-one .growthpyramid-box,
.level-two .growthpyramid-box,
.level-three .growthpyramid-box,
.level-four .growthpyramid-box,
.level-five .growthpyramid-box{

width:100%;

}

.growthpyramid-wrapper{

max-width:650px;

}

}

@media(max-width:768px){

.growthpyramid-section{

padding:90px 5%;

}

.growthpyramid-section .section-heading{

margin-bottom:60px;

}

.growthpyramid-section .section-heading h2{

font-size:2.3rem;

}

.growthpyramid-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.growthpyramid-wrapper{

gap:14px;

}

.growthpyramid-box{

padding:18px 20px;

border-radius:16px;

}

.growthpyramid-box span{

width:36px;

height:36px;

font-size:.85rem;

margin-bottom:14px;

}

.growthpyramid-box h3{

font-size:1.08rem;

}

}

/* Part - 2 */

/*==================================================
        PYRAMID LEVEL
==================================================*/

.growthpyramid-box{

    transition:
        transform .4s ease,
        background .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;

}

.growthpyramid-box:hover{

    transform:translateY(-8px) scale(1.02);

    background:rgba(255,255,255,.07);

    border-color:rgba(0,188,212,.20);

    box-shadow:
        0 20px 50px rgba(0,188,212,.16);

}

/*==================================================
        LEFT ACCENT
==================================================*/

.growthpyramid-box::before{

    transition:
        width .35s ease,
        opacity .35s ease;

}

.growthpyramid-box:hover::before{

    width:8px;

    opacity:1;

}

/*==================================================
        BACKGROUND GLOW
==================================================*/

.growthpyramid-box::after{

    transition:
        transform .5s ease,
        opacity .5s ease;

}

.growthpyramid-box:hover::after{

    transform:scale(1.4);

    opacity:1;

}

/*==================================================
        NUMBER
==================================================*/

.growthpyramid-box span{

    position:relative;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        color .35s ease,
        box-shadow .35s ease;

}

.growthpyramid-box:hover span{

    transform:scale(1.12);

    background:#00BCD4;

    border-color:#00BCD4;

    color:#fff;

    box-shadow:
        0 0 28px rgba(0,188,212,.30);

}

/* Pulse Ring */

.growthpyramid-box span::after{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:growthStepPulse 3s ease-out infinite;

}

@keyframes growthStepPulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.45);

        opacity:0;

    }

}

/*==================================================
        TITLE
==================================================*/

.growthpyramid-box h3{

    transition:
        color .35s ease,
        letter-spacing .35s ease;

}

.growthpyramid-box:hover h3{

    color:#00BCD4;

    letter-spacing:.5px;

}

/*==================================================
        PROGRESS EFFECT
==================================================*/

.level-one .growthpyramid-box{

    animation:pyramidGlow1 6s ease-in-out infinite;

}

.level-two .growthpyramid-box{

    animation:pyramidGlow2 6s ease-in-out infinite;

}

.level-three .growthpyramid-box{

    animation:pyramidGlow3 6s ease-in-out infinite;

}

.level-four .growthpyramid-box{

    animation:pyramidGlow4 6s ease-in-out infinite;

}

.level-five .growthpyramid-box{

    animation:pyramidGlow5 6s ease-in-out infinite;

}

.level-two .growthpyramid-box{

animation-delay:.6s;

}

.level-three .growthpyramid-box{

animation-delay:1.2s;

}

.level-four .growthpyramid-box{

animation-delay:1.8s;

}

.level-five .growthpyramid-box{

animation-delay:2.4s;

}

@keyframes pyramidGlow1{

    50%{

        box-shadow:0 0 20px rgba(0,188,212,.12);

    }

}

@keyframes pyramidGlow2{

    50%{

        box-shadow:0 0 20px rgba(0,188,212,.14);

    }

}

@keyframes pyramidGlow3{

    50%{

        box-shadow:0 0 22px rgba(0,188,212,.16);

    }

}

@keyframes pyramidGlow4{

    50%{

        box-shadow:0 0 24px rgba(0,188,212,.18);

    }

}

@keyframes pyramidGlow5{

    50%{

        box-shadow:0 0 26px rgba(126,211,33,.22);

    }

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.growthpyramid-box:hover{

transform:none;

box-shadow:none;

}

.growthpyramid-box:hover span{

transform:scale(1.05);

}

.growthpyramid-box:hover h3{

letter-spacing:0;

}

}

/* Specialized Section Ends Here */

/* FAQ Section Starts Here */

/*==================================================
        INNOVATION FAQ
==================================================*/

.innovationfaq-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.innovationfaq-section::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    left:-220px;

    top:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(120px);

}

.innovationfaq-section::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.innovationfaq-section .section-heading{

    max-width:850px;

    margin:0 auto 80px;

    position:relative;

    z-index:5;

}

.innovationfaq-section .section-heading h2{

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

    margin:25px 0;

}

.innovationfaq-section .section-heading h2 span{

    color:#00BCD4;

}

.innovationfaq-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
FAQ WRAPPER
==================================*/

.innovationfaq-wrapper{

    position:relative;

    z-index:5;

    max-width:950px;

    margin:auto;

}

/*==================================
FAQ ITEM
==================================*/

.innovationfaq-item{

    border-bottom:1px solid rgba(255,255,255,.08);

}

/*==================================
QUESTION
==================================*/

.innovationfaq-question{

    width:100%;

    padding:28px 0;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:none;

    border:none;

    cursor:pointer;

    text-align:left;

}

/*==================================
LEFT
==================================*/

.innovationfaq-left{

    display:flex;

    align-items:center;

    gap:22px;

}

/*==================================
ICON
==================================*/

.innovationfaq-icon{

    width:52px;

    height:52px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.15);

    color:#00BCD4;

    font-size:1.2rem;

}

/*==================================
TITLE
==================================*/

.innovationfaq-question h4{

    margin:0;

    color:#fff;

    font-size:1.2rem;

    font-weight:600;

}

/*==================================
TOGGLE
==================================*/

.innovationfaq-toggle{

    width:40px;

    height:40px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    color:#00BCD4;

    font-size:1.4rem;

    font-weight:600;

    flex-shrink:0;

}

/*==================================
ANSWER
==================================*/

.innovationfaq-answer{

    max-height:0;

    overflow:hidden;

    opacity:0;

    transition:

        max-height .45s ease,

        opacity .35s ease;

}

.innovationfaq-answer p{

    padding:

        0

        0

        28px

        74px;

    margin:0;

    color:#CBD5E1;

    line-height:1.9;

}

/*==================================
ACTIVE
==================================*/

.innovationfaq-item.active .innovationfaq-answer{

    max-height:250px;

    opacity:1;

}

.innovationfaq-item.active .innovationfaq-toggle{

    background:#00BCD4;

    color:#fff;

    border-color:#00BCD4;

    font-size:0;

}

.innovationfaq-item.active .innovationfaq-toggle::before{

    content:"−";

    font-size:1.5rem;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:768px){

.innovationfaq-section{

padding:90px 5%;

}

.innovationfaq-section .section-heading{

margin-bottom:60px;

}

.innovationfaq-section .section-heading h2{

font-size:2.3rem;

}

.innovationfaq-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.innovationfaq-question{

padding:22px 0;

}

.innovationfaq-left{

gap:15px;

align-items:flex-start;

}

.innovationfaq-icon{

width:44px;

height:44px;

font-size:1rem;

}

.innovationfaq-question h4{

font-size:1rem;

line-height:1.5;

}

.innovationfaq-toggle{

width:36px;

height:36px;

font-size:1.2rem;

}

.innovationfaq-answer p{

padding:

0

0

22px

58px;

font-size:.92rem;

line-height:1.8;

}

}

/* Part - 2 */

/*==================================================
        FAQ ITEM
==================================================*/

.innovationfaq-item{

    transition:
        border-color .35s ease;

}

.innovationfaq-item:hover{

    border-bottom-color:rgba(0,188,212,.20);

}

/*==================================================
        QUESTION
==================================================*/

.innovationfaq-question h4{

    transition:
        color .35s ease,
        transform .35s ease;

}

.innovationfaq-item:hover h4{

    color:#00BCD4;

    transform:translateX(6px);

}

.innovationfaq-item.active h4{

    color:#00BCD4;

}

/*==================================================
        LIGHTNING ICON
==================================================*/

.innovationfaq-icon{

    position:relative;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.innovationfaq-item:hover .innovationfaq-icon{

    transform:rotate(12deg) scale(1.08);

    background:rgba(0,188,212,.18);

    border-color:rgba(0,188,212,.25);

    color:#7ED321;

    box-shadow:
        0 0 28px rgba(0,188,212,.25);

}

.innovationfaq-item.active .innovationfaq-icon{

    background:rgba(0,188,212,.18);

    color:#7ED321;

}

/* Pulse Ring */

.innovationfaq-icon::after{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:innovationBoltPulse 3s ease-out infinite;

}

@keyframes innovationBoltPulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.35);

        opacity:0;

    }

}

/*==================================================
        TOGGLE
==================================================*/

.innovationfaq-toggle{

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        color .35s ease,
        box-shadow .35s ease;

}

.innovationfaq-item:hover .innovationfaq-toggle{

    transform:rotate(90deg);

    background:rgba(0,188,212,.10);

    border-color:rgba(0,188,212,.20);

    color:#7ED321;

    box-shadow:
        0 0 20px rgba(0,188,212,.18);

}

.innovationfaq-item.active .innovationfaq-toggle{

    transform:rotate(180deg);

}

/*==================================================
        ANSWER
==================================================*/

.innovationfaq-answer p{

    transition:color .35s ease;

}

.innovationfaq-item:hover .innovationfaq-answer p{

    color:#E2E8F0;

}

/*==================================================
        ACTIVE LINE
==================================================*/

.innovationfaq-item{

    position:relative;

}

.innovationfaq-item::before{

    content:"";

    position:absolute;

    left:0;

    bottom:-1px;

    width:0;

    height:2px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    transition:width .4s ease;

}

.innovationfaq-item:hover::before,

.innovationfaq-item.active::before{

    width:100%;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.innovationfaq-item:hover .innovationfaq-toggle{

transform:none;

}

.innovationfaq-item:hover h4{

transform:none;

}

.innovationfaq-item:hover .innovationfaq-icon{

transform:scale(1.05);

}

}



/* FAQ Section Ends Here */

/* CTA Section Starts Here */

/*==================================================
        INNOVATION PULSE CTA
==================================================*/

.innovationpulsecta-section{

    position:relative;

    overflow:hidden;

    padding:140px 5%;

    background:linear-gradient(
        135deg,
        #050816 0%,
        #08111F 45%,
        #071C28 100%
    );

}

/*==================================
GRID PATTERN
==================================*/

.innovationpulsecta-grid{

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),

        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);

    background-size:55px 55px;

    opacity:.35;

}

/*==================================
ANIMATED GRADIENT
==================================*/

.innovationpulsecta-gradient{

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(0,188,212,.08),
        transparent,
        rgba(126,211,33,.08)
    );

}

/*==================================
RADIAL GLOW
==================================*/

.innovationpulsecta-glow{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:700px;

    height:700px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.18),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
FLOATING PARTICLES
==================================*/

.innovationpulsecta-particles{

    position:absolute;

    inset:0;

}

.innovationpulsecta-particles span{

    position:absolute;

    width:8px;

    height:8px;

    border-radius:50%;

    background:#00BCD4;

    opacity:.4;

}

.innovationpulsecta-particles span:nth-child(1){

top:18%;

left:15%;

}

.innovationpulsecta-particles span:nth-child(2){

top:25%;

right:18%;

}

.innovationpulsecta-particles span:nth-child(3){

top:55%;

left:8%;

}

.innovationpulsecta-particles span:nth-child(4){

top:68%;

right:12%;

}

.innovationpulsecta-particles span:nth-child(5){

bottom:20%;

left:28%;

}

.innovationpulsecta-particles span:nth-child(6){

bottom:18%;

right:32%;

}

/*==================================
CONTENT PANEL
==================================*/

.innovationpulsecta-wrapper{

    position:relative;

    z-index:5;

    max-width:980px;

    margin:auto;

    padding:80px 70px;

    text-align:center;

    border-radius:34px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}

/*==================================
TAG
==================================*/

.innovationpulsecta-tag{

    display:inline-block;

    margin-bottom:26px;

    padding:10px 24px;

    border-radius:50px;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.15);

    color:#00BCD4;

    font-size:.82rem;

    font-weight:600;

    letter-spacing:1px;

}

/*==================================
HEADING
==================================*/

.innovationpulsecta-wrapper h2{

    color:#fff;

    font-size:3.4rem;

    line-height:1.25;

    margin-bottom:30px;

}

.innovationpulsecta-wrapper h2 span{

    color:#00BCD4;

}

/*==================================
TEXT
==================================*/

.innovationpulsecta-wrapper p{

    max-width:760px;

    margin:0 auto 45px;

    color:#CBD5E1;

    line-height:2;

    font-size:1.05rem;

}

/*==================================
BUTTONS
==================================*/

.innovationpulsecta-actions{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.innovationpulsecta-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-width:270px;

    height:64px;

    padding:0 32px;

    border-radius:60px;

    text-decoration:none;

    color:#fff;

    font-weight:600;

    font-size:16px;

    border:1px solid transparent;

}

.innovationpulsecta-btn span{

    color:inherit;

}

.innovationpulsecta-primary{

    background:linear-gradient(
        135deg,
        #00BCD4,
        #0097A7
    );

}

.innovationpulsecta-secondary{

    background:linear-gradient(
        135deg,
        #0EA5E9,
        #06B6D4
    );

}

.innovationpulsecta-tertiary{

    background:linear-gradient(
        135deg,
        #14B8A6,
        #22C55E
    );

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.innovationpulsecta-wrapper{

padding:60px 40px;

}

.innovationpulsecta-wrapper h2{

font-size:2.8rem;

}

}

@media(max-width:768px){

.innovationpulsecta-section{

padding:90px 5%;

}

.innovationpulsecta-wrapper{

padding:40px 24px;

border-radius:24px;

}

.innovationpulsecta-wrapper h2{

font-size:2rem;

}

.innovationpulsecta-wrapper p{

font-size:.95rem;

line-height:1.8;

margin-bottom:35px;

}

.innovationpulsecta-actions{

flex-direction:column;

align-items:center;

}

.innovationpulsecta-btn{

width:100%;

max-width:340px;

min-width:auto;

height:58px;

font-size:15px;

}

}


/* Part - 2 */

/*==================================================
        CTA PANEL
==================================================*/

.innovationpulsecta-wrapper{

    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;

}

.innovationpulsecta-wrapper:hover{

    transform:translateY(-8px);

    border-color:rgba(0,188,212,.18);

    box-shadow:
        0 35px 90px rgba(0,188,212,.15);

}

/*==================================================
        ANIMATED GRADIENT
==================================================*/

.innovationpulsecta-gradient{

    background-size:250% 250%;

    animation:innovationGradientMove 12s ease infinite;

}

@keyframes innovationGradientMove{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}

/*==================================================
        RADIAL GLOW
==================================================*/

.innovationpulsecta-glow{

    animation:innovationPulseGlow 6s ease-in-out infinite;

}

@keyframes innovationPulseGlow{

    0%,100%{

        transform:translate(-50%,-50%) scale(1);

        opacity:.75;

    }

    50%{

        transform:translate(-50%,-50%) scale(1.12);

        opacity:1;

    }

}

/*==================================================
        GRID
==================================================*/

.innovationpulsecta-grid{

    animation:gridShift 20s linear infinite;

}

@keyframes gridShift{

    from{

        background-position:0 0;

    }

    to{

        background-position:55px 55px;

    }

}

/*==================================================
        FLOATING PARTICLES
==================================================*/

.innovationpulsecta-particles span{

    animation:particleFloat 8s ease-in-out infinite;

}

.innovationpulsecta-particles span:nth-child(2){

animation-delay:1s;

}

.innovationpulsecta-particles span:nth-child(3){

animation-delay:2s;

}

.innovationpulsecta-particles span:nth-child(4){

animation-delay:3s;

}

.innovationpulsecta-particles span:nth-child(5){

animation-delay:4s;

}

.innovationpulsecta-particles span:nth-child(6){

animation-delay:5s;

}

@keyframes particleFloat{

    0%,100%{

        transform:translateY(0) scale(1);

        opacity:.35;

    }

    50%{

        transform:translateY(-28px) scale(1.6);

        opacity:1;

    }

}

/*==================================================
        TAG
==================================================*/

.innovationpulsecta-tag{

    transition:
        background .35s ease,
        color .35s ease,
        box-shadow .35s ease;

}

.innovationpulsecta-tag:hover{

    background:#00BCD4;

    color:#fff;

    box-shadow:
        0 0 25px rgba(0,188,212,.30);

}

/*==================================================
        HEADING
==================================================*/

.innovationpulsecta-wrapper h2 span{

    transition:.35s;

}

.innovationpulsecta-wrapper:hover h2 span{

    color:#7ED321;

}

/*==================================================
        BUTTONS
==================================================*/

.innovationpulsecta-btn{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        filter .35s ease;

}

.innovationpulsecta-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.6s;

}

.innovationpulsecta-btn:hover::before{

    left:140%;

}

.innovationpulsecta-btn:hover{

    transform:translateY(-6px);

    filter:brightness(1.08);

    box-shadow:
        0 18px 40px rgba(0,188,212,.28);

}

.innovationpulsecta-btn span{

    transition:.35s;

}

.innovationpulsecta-btn:hover span{

    letter-spacing:.4px;

}

/* Individual Glow */

.innovationpulsecta-primary:hover{

    box-shadow:
        0 18px 40px rgba(0,188,212,.35);

}

.innovationpulsecta-secondary:hover{

    box-shadow:
        0 18px 40px rgba(14,165,233,.35);

}

.innovationpulsecta-tertiary:hover{

    box-shadow:
        0 18px 40px rgba(34,197,94,.35);

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.innovationpulsecta-wrapper:hover{

transform:none;

box-shadow:none;

}

.innovationpulsecta-btn:hover{

transform:none;

box-shadow:none;

}

.innovationpulsecta-btn:hover span{

letter-spacing:0;

}

}

/* CTA Section Ends Here */

/* Other Specialized Services Page Ends Here */

/* Social Welfare And Inclusion Page Starts Here */

/* Hero Section Starts Here */

/*==================================================
        UNITY CIRCLE HERO
==================================================*/

.unitycirclehero-section{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    min-height:100vh;

    padding:180px 5% 120px;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

/*==================================
BACKGROUND GLOWS
==================================*/

.unitycirclehero-section::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    top:-280px;

    left:-250px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.12),
        transparent 70%
    );

    filter:blur(150px);

}

.unitycirclehero-section::after{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    right:-220px;

    bottom:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.10),
        transparent 70%
    );

    filter:blur(130px);

}

/*==================================
LIGHT RAYS
==================================*/

.unitycirclehero-rays{

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at center,
        rgba(0,188,212,.10),
        transparent 60%),

        repeating-conic-gradient(

            from 0deg,

            rgba(0,188,212,.03) 0deg,

            transparent 15deg,

            transparent 30deg

        );

    opacity:.75;

}

/*==================================
GLASS OVERLAY
==================================*/

.unitycirclehero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        135deg,

        rgba(255,255,255,.03),

        rgba(255,255,255,.01)

    );

    backdrop-filter:blur(2px);

}

/*==================================
NETWORK LINES
==================================*/

.unitycirclehero-network{

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(

            rgba(0,188,212,.08) 2px,

            transparent 2px

        ),

        linear-gradient(

            90deg,

            rgba(0,188,212,.08) 2px,

            transparent 2px

        );

    background-size:180px 180px;

    opacity:.15;

}

/*==================================
CONTENT
==================================*/

.unitycirclehero-content{

    position:relative;

    z-index:20;

    max-width:860px;

}

.unitycirclehero-tag{

    display:inline-block;

    margin-bottom:25px;

    padding:10px 24px;

    border-radius:50px;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-size:.82rem;

    font-weight:600;

    letter-spacing:1px;

}

.unitycirclehero-content h1{

    color:#fff;

    font-size:4.5rem;

    line-height:1.15;

    margin-bottom:30px;

    font-weight:700;

}

.unitycirclehero-content h1 span{

    color:#00BCD4;

}

.unitycirclehero-content p{

    max-width:720px;

    color:#CBD5E1;

    font-size:1.1rem;

    line-height:2;

}

/*==================================
INTERCONNECTED CIRCLES
==================================*/

.unitycirclehero-circles{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.unitycirclehero-circles span{

    position:absolute;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.18);

    background:rgba(255,255,255,.02);

    backdrop-filter:blur(10px);

    box-shadow:

        inset 0 0 25px rgba(0,188,212,.05),

        0 0 35px rgba(0,188,212,.08);

}

.circle-one{

    width:180px;

    height:180px;

    top:12%;

    left:8%;

}

.circle-two{

    width:120px;

    height:120px;

    top:18%;

    right:18%;

}

.circle-three{

    width:150px;

    height:150px;

    top:46%;

    left:72%;

}

.circle-four{

    width:100px;

    height:100px;

    bottom:16%;

    left:18%;

}

.circle-five{

    width:170px;

    height:170px;

    bottom:10%;

    right:10%;

}

/*==================================
COMMUNITY ICONS
==================================*/

.unitycirclehero-icons{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.unitycirclehero-icons span{

    position:absolute;

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(15px);

    color:#00BCD4;

    font-size:1.35rem;

}

.unitycirclehero-icons span:nth-child(1){

top:18%;

left:12%;

}

.unitycirclehero-icons span:nth-child(2){

top:22%;

right:22%;

}

.unitycirclehero-icons span:nth-child(3){

top:48%;

right:26%;

}

.unitycirclehero-icons span:nth-child(4){

bottom:18%;

left:22%;

}

.unitycirclehero-icons span:nth-child(5){

bottom:14%;

right:14%;

}

.unitycirclehero-icons span:nth-child(6){

top:65%;

left:65%;

}

/*==================================
PARTICLES
==================================*/

.unitycirclehero-particles{

    position:absolute;

    inset:0;

}

.unitycirclehero-particles span{

    position:absolute;

    width:6px;

    height:6px;

    border-radius:50%;

    background:#7ED321;

    opacity:.45;

}

.unitycirclehero-particles span:nth-child(1){

top:15%;

left:35%;

}

.unitycirclehero-particles span:nth-child(2){

top:30%;

right:35%;

}

.unitycirclehero-particles span:nth-child(3){

top:58%;

left:14%;

}

.unitycirclehero-particles span:nth-child(4){

top:70%;

right:18%;

}

.unitycirclehero-particles span:nth-child(5){

bottom:22%;

left:48%;

}

.unitycirclehero-particles span:nth-child(6){

bottom:18%;

right:40%;

}

/*==================================
SCROLL
==================================*/

.unitycirclehero-scroll{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    width:34px;

    height:58px;

    border:2px solid rgba(255,255,255,.18);

    border-radius:40px;

    display:flex;

    justify-content:center;

    padding-top:10px;

}

.unitycirclehero-scroll span{

    width:6px;

    height:12px;

    border-radius:20px;

    background:#00BCD4;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.unitycirclehero-section{

text-align:center;

padding:160px 5% 100px;

}

.unitycirclehero-content{

margin:auto;

}

.unitycirclehero-content h1{

font-size:3.5rem;

}

.unitycirclehero-content p{

margin:auto;

}

}

@media(max-width:768px){

.unitycirclehero-section{

min-height:auto;

padding:140px 5% 90px;

}

.unitycirclehero-content h1{

font-size:2.5rem;

}

.unitycirclehero-content p{

font-size:.95rem;

line-height:1.8;

}

.unitycirclehero-circles span{

transform:scale(.7);

}

.unitycirclehero-icons span{

width:44px;

height:44px;

font-size:1rem;

}

.unitycirclehero-scroll{

display:none;

}

}

/* Part - 2 */

/*==================================================
        LIGHT RAYS
==================================================*/

.unitycirclehero-rays{

    animation:unityRayRotate 35s linear infinite;

    transform-origin:center;

}

@keyframes unityRayRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*==================================================
        NETWORK GRID
==================================================*/

.unitycirclehero-network{

    animation:unityNetworkMove 22s linear infinite;

}

@keyframes unityNetworkMove{

    from{

        background-position:0 0;

    }

    to{

        background-position:180px 180px;

    }

}

/*==================================================
        GLOWING CIRCLES
==================================================*/

.unitycirclehero-circles span{

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease,
        background .4s ease;

}

.circle-one{

    animation:unityCircleOne 8s ease-in-out infinite;

}

.circle-two{

    animation:unityCircleTwo 7s ease-in-out infinite;

}

.circle-three{

    animation:unityCircleThree 9s ease-in-out infinite;

}

.circle-four{

    animation:unityCircleFour 6s ease-in-out infinite;

}

.circle-five{

    animation:unityCircleFive 10s ease-in-out infinite;

}

@keyframes unityCircleOne{

    50%{

        transform:translateY(-15px);

    }

}

@keyframes unityCircleTwo{

    50%{

        transform:translateY(18px);

    }

}

@keyframes unityCircleThree{

    50%{

        transform:translateX(-12px);

    }

}

@keyframes unityCircleFour{

    50%{

        transform:translateY(-12px);

    }

}

@keyframes unityCircleFive{

    50%{

        transform:translateY(16px);

    }

}

.unitycirclehero-circles span:hover{

    border-color:rgba(0,188,212,.28);

    background:rgba(0,188,212,.08);

    box-shadow:

        inset 0 0 40px rgba(0,188,212,.12),

        0 0 45px rgba(0,188,212,.22);

}

/*==================================================
        COMMUNITY ICONS
==================================================*/

.unitycirclehero-icons span{

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        color .35s ease,
        box-shadow .35s ease;

    animation:unityIconFloat 6s ease-in-out infinite;

}

.unitycirclehero-icons span:nth-child(2){

animation-delay:.8s;

}

.unitycirclehero-icons span:nth-child(3){

animation-delay:1.6s;

}

.unitycirclehero-icons span:nth-child(4){

animation-delay:2.4s;

}

.unitycirclehero-icons span:nth-child(5){

animation-delay:3.2s;

}

.unitycirclehero-icons span:nth-child(6){

animation-delay:4s;

}

@keyframes unityIconFloat{

    50%{

        transform:translateY(-14px);

    }

}

.unitycirclehero-icons span:hover{

    transform:translateY(-10px) scale(1.08);

    background:rgba(0,188,212,.18);

    border-color:rgba(0,188,212,.25);

    color:#7ED321;

    box-shadow:

        0 0 28px rgba(0,188,212,.25);

}

/*==================================================
        PARTICLES
==================================================*/

.unitycirclehero-particles span{

    animation:unityParticleFloat 6s ease-in-out infinite;

}

.unitycirclehero-particles span:nth-child(2){

animation-delay:.8s;

}

.unitycirclehero-particles span:nth-child(3){

animation-delay:1.6s;

}

.unitycirclehero-particles span:nth-child(4){

animation-delay:2.4s;

}

.unitycirclehero-particles span:nth-child(5){

animation-delay:3.2s;

}

.unitycirclehero-particles span:nth-child(6){

animation-delay:4s;

}

@keyframes unityParticleFloat{

    0%,100%{

        transform:translateY(0) scale(1);

        opacity:.35;

    }

    50%{

        transform:translateY(-24px) scale(1.5);

        opacity:1;

    }

}

/*==================================================
        TAG
==================================================*/

.unitycirclehero-tag{

    transition:
        background .35s ease,
        color .35s ease,
        box-shadow .35s ease;

}

.unitycirclehero-tag:hover{

    background:#00BCD4;

    color:#fff;

    box-shadow:

        0 0 25px rgba(0,188,212,.28);

}

/*==================================================
        CONTENT
==================================================*/

.unitycirclehero-content h1 span{

    transition:.35s;

}

.unitycirclehero-content:hover h1 span{

    color:#7ED321;

}

.unitycirclehero-content p{

    transition:.35s;

}

.unitycirclehero-content:hover p{

    color:#E2E8F0;

}

/*==================================================
        SCROLL
==================================================*/

.unitycirclehero-scroll span{

    animation:unityScrollBounce 2s ease-in-out infinite;

}

@keyframes unityScrollBounce{

    0%{

        transform:translateY(0);

        opacity:1;

    }

    50%{

        transform:translateY(16px);

        opacity:.4;

    }

    100%{

        transform:translateY(0);

        opacity:1;

    }

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.unitycirclehero-circles span:hover{

box-shadow:none;

}

.unitycirclehero-icons span:hover{

transform:scale(1.05);

}

}

/* Hero Section Ends Here */

/* About Section Starts Here */

/*==================================================
        INCLUSION CANVAS
==================================================*/

.inclusioncanvas-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.inclusioncanvas-section::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    left:-220px;

    top:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(130px);

}

.inclusioncanvas-section::after{

    content:"";

    position:absolute;

    width:480px;

    height:480px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.inclusioncanvas-section .section-heading{

    max-width:850px;

    margin:0 auto 80px;

    position:relative;

    z-index:5;

}

.inclusioncanvas-section .section-heading h2{

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

    margin:25px 0;

}

.inclusioncanvas-section .section-heading h2 span{

    color:#00BCD4;

}

.inclusioncanvas-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
CANVAS WRAPPER
==================================*/

.inclusioncanvas-wrapper{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:430px 1fr;

    gap:70px;

    align-items:center;

    max-width:1250px;

    margin:auto;

    padding:70px;

    border-radius:34px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}

/*==================================
VISUAL
==================================*/

.inclusioncanvas-visual{

    position:relative;

    height:420px;

    display:flex;

    justify-content:center;

    align-items:center;

}

/*==================================
CENTER
==================================*/

.inclusioncanvas-center{

    position:relative;

    z-index:3;

    width:170px;

    height:170px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,188,212,.12);

    border:2px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-size:4rem;

}

/*==================================
NODES
==================================*/

.inclusioncanvas-node{

    position:absolute;

    z-index:2;

    width:70px;

    height:70px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(12px);

    color:#00BCD4;

    font-size:1.5rem;

}

.node-one{

    top:35px;

    left:50%;

    transform:translateX(-50%);

}

.node-two{

    top:50%;

    right:25px;

    transform:translateY(-50%);

}

.node-three{

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

}

.node-four{

    top:50%;

    left:25px;

    transform:translateY(-50%);

}

/*==================================
CONNECTING LINES
==================================*/

.canvas-link{

    position:absolute;

    left:50%;

    top:50%;

    height:2px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    opacity:.35;

    transform-origin:left center;

}

.link-one{

    width:120px;

    transform:
        translate(-50%,-50%)
        rotate(-90deg);

}

.link-two{

    width:140px;

    transform:
        translate(-50%,-50%)
        rotate(0deg);

}

.link-three{

    width:120px;

    transform:
        translate(-50%,-50%)
        rotate(90deg);

}

.link-four{

    width:140px;

    transform:
        translate(-50%,-50%)
        rotate(180deg);

}

/*==================================
CONTENT
==================================*/

.inclusioncanvas-content h3{

    color:#fff;

    font-size:2.2rem;

    line-height:1.3;

    margin-bottom:24px;

}

.inclusioncanvas-content p{

    color:#CBD5E1;

    line-height:2;

    margin-bottom:40px;

}

/*==================================
PRINCIPLES
==================================*/

.inclusioncanvas-principles{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.inclusioncanvas-principle{

    display:flex;

    align-items:center;

    gap:16px;

    padding:18px 20px;

    border-radius:18px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

}

.inclusioncanvas-principle span{

    font-size:1.7rem;

    flex-shrink:0;

}

.inclusioncanvas-principle h4{

    margin:0;

    color:#fff;

    font-size:1rem;

    font-weight:600;

    line-height:1.5;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.inclusioncanvas-wrapper{

grid-template-columns:1fr;

gap:55px;

padding:50px 35px;

text-align:center;

}

.inclusioncanvas-visual{

height:340px;

}

.inclusioncanvas-principles{

max-width:600px;

margin:auto;

}

}

@media(max-width:768px){

.inclusioncanvas-section{

padding:90px 5%;

}

.inclusioncanvas-section .section-heading{

margin-bottom:60px;

}

.inclusioncanvas-section .section-heading h2{

font-size:2.3rem;

}

.inclusioncanvas-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.inclusioncanvas-wrapper{

padding:35px 22px;

border-radius:24px;

}

.inclusioncanvas-center{

width:120px;

height:120px;

font-size:2.8rem;

}

.inclusioncanvas-node{

width:52px;

height:52px;

font-size:1.15rem;

}

.canvas-link{

display:none;

}

.inclusioncanvas-content h3{

font-size:1.6rem;

}

.inclusioncanvas-content p{

font-size:.95rem;

line-height:1.8;

}

.inclusioncanvas-principles{

grid-template-columns:1fr;

gap:14px;

}

.inclusioncanvas-principle{

padding:16px 18px;

}

.inclusioncanvas-principle span{

font-size:1.5rem;

}

.inclusioncanvas-principle h4{

font-size:.95rem;

}

}

/* Part - 2 */

/*==================================================
        CANVAS WRAPPER
==================================================*/

.inclusioncanvas-wrapper{

    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;

}

.inclusioncanvas-wrapper:hover{

    transform:translateY(-8px);

    border-color:rgba(0,188,212,.18);

    box-shadow:
        0 30px 80px rgba(0,188,212,.14);

}

/*==================================================
        COMMUNITY HUB
==================================================*/

.inclusioncanvas-center{

    position:relative;

    transition:
        transform .4s ease,
        background .4s ease,
        border-color .4s ease,
        color .4s ease,
        box-shadow .4s ease;

}

.inclusioncanvas-wrapper:hover .inclusioncanvas-center{

    transform:scale(1.08);

    background:rgba(0,188,212,.18);

    border-color:rgba(0,188,212,.30);

    color:#7ED321;

    box-shadow:
        0 0 40px rgba(0,188,212,.25);

}

.inclusioncanvas-center::after{

    content:"";

    position:absolute;

    inset:-12px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:canvasCenterPulse 3s ease-out infinite;

}

@keyframes canvasCenterPulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.35);

        opacity:0;

    }

}

/*==================================================
        COMMUNITY NODES
==================================================*/

.inclusioncanvas-node{

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        color .35s ease,
        box-shadow .35s ease;

}

.node-one{

    animation:canvasNodeOne 6s ease-in-out infinite;

}

.node-two{

    animation:canvasNodeTwo 7s ease-in-out infinite;

}

.node-three{

    animation:canvasNodeThree 8s ease-in-out infinite;

}

.node-four{

    animation:canvasNodeFour 6.5s ease-in-out infinite;

}

@keyframes canvasNodeOne{

    50%{

        transform:translateX(-50%) translateY(-12px);

    }

}

@keyframes canvasNodeTwo{

    50%{

        transform:translateY(-50%) translateX(12px);

    }

}

@keyframes canvasNodeThree{

    50%{

        transform:translateX(-50%) translateY(12px);

    }

}

@keyframes canvasNodeFour{

    50%{

        transform:translateY(-50%) translateX(-12px);

    }

}

.inclusioncanvas-node:hover{

    transform:scale(1.1);

    background:rgba(0,188,212,.18);

    border-color:rgba(0,188,212,.25);

    color:#7ED321;

    box-shadow:
        0 0 28px rgba(0,188,212,.22);

}

/*==================================================
        CONNECTION LINES
==================================================*/

.canvas-link{

    animation:canvasConnectionGlow 3s ease-in-out infinite;

}

.link-two{

animation-delay:.6s;

}

.link-three{

animation-delay:1.2s;

}

.link-four{

animation-delay:1.8s;

}

@keyframes canvasConnectionGlow{

    0%,100%{

        opacity:.25;

    }

    50%{

        opacity:1;

        box-shadow:
            0 0 18px rgba(0,188,212,.35);

    }

}

/*==================================================
        CONTENT
==================================================*/

.inclusioncanvas-content h3{

    transition:
        color .35s ease,
        transform .35s ease;

}

.inclusioncanvas-wrapper:hover .inclusioncanvas-content h3{

    color:#00BCD4;

    transform:translateX(6px);

}

.inclusioncanvas-content p{

    transition:color .35s ease;

}

.inclusioncanvas-wrapper:hover .inclusioncanvas-content p{

    color:#E2E8F0;

}

/*==================================================
        PRINCIPLES
==================================================*/

.inclusioncanvas-principle{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;

}

.inclusioncanvas-principle::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:0;

    height:100%;

    background:linear-gradient(
        90deg,
        rgba(0,188,212,.12),
        rgba(126,211,33,.08)
    );

    transition:.4s ease;

    z-index:0;

}

.inclusioncanvas-principle>*{

    position:relative;

    z-index:2;

}

.inclusioncanvas-principle:hover{

    transform:translateY(-6px);

    border-color:rgba(0,188,212,.18);

    box-shadow:
        0 18px 40px rgba(0,188,212,.12);

}

.inclusioncanvas-principle:hover::before{

    width:100%;

}

.inclusioncanvas-principle span{

    transition:transform .35s ease;

}

.inclusioncanvas-principle:hover span{

    transform:scale(1.2);

}

.inclusioncanvas-principle h4{

    transition:color .35s ease;

}

.inclusioncanvas-principle:hover h4{

    color:#00BCD4;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.inclusioncanvas-wrapper:hover{

transform:none;

box-shadow:none;

}

.inclusioncanvas-principle:hover{

transform:none;

box-shadow:none;

}

.inclusioncanvas-wrapper:hover .inclusioncanvas-content h3{

transform:none;

}

.inclusioncanvas-node:hover{

transform:scale(1.05);

}

}

/* About Section Ends Here */

/* Programs Section Starts Here */

/*==================================================
        INCLUSION CARDS
==================================================*/

.inclusioncards-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.inclusioncards-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(130px);

}

.inclusioncards-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.inclusioncards-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.inclusioncards-section .section-heading h2{

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

    margin:24px 0;

}

.inclusioncards-section .section-heading h2 span{

    color:#00BCD4;

}

.inclusioncards-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
GRID
==================================*/

.inclusioncards-grid{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    max-width:1300px;

    margin:auto;

}

/*==================================
CARD
==================================*/

.inclusioncards-item{

    position:relative;

    overflow:hidden;

    padding:40px 32px;

    text-align:center;

    border-radius:28px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(16px);

}

/* Top Accent */

.inclusioncards-item::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:80px;

    height:4px;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

}

/* Background Glow */

.inclusioncards-item::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    top:-110px;

    right:-110px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

}

/*==================================
ICON
==================================*/

.inclusioncards-icon{

    width:82px;

    height:82px;

    margin:0 auto 28px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-size:2rem;

}

/*==================================
TEXT
==================================*/

.inclusioncards-item h3{

    color:#fff;

    font-size:1.45rem;

    margin-bottom:18px;

    line-height:1.3;

}

.inclusioncards-item p{

    margin:0;

    color:#CBD5E1;

    line-height:1.9;

    font-size:.96rem;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.inclusioncards-grid{

grid-template-columns:repeat(2,1fr);

gap:22px;

}

}

@media(max-width:768px){

.inclusioncards-section{

padding:90px 5%;

}

.inclusioncards-section .section-heading{

margin-bottom:60px;

}

.inclusioncards-section .section-heading h2{

font-size:2.3rem;

}

.inclusioncards-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.inclusioncards-grid{

grid-template-columns:1fr;

gap:18px;

}

.inclusioncards-item{

padding:32px 24px;

border-radius:22px;

}

.inclusioncards-icon{

width:68px;

height:68px;

font-size:1.6rem;

margin-bottom:22px;

}

.inclusioncards-item h3{

font-size:1.25rem;

margin-bottom:14px;

}

.inclusioncards-item p{

font-size:.92rem;

line-height:1.8;

}

}

/* Part - 2 */

/*==================================================
        CARD
==================================================*/

.inclusioncards-item{

    transition:
        transform .45s ease,
        border-color .45s ease,
        background .45s ease,
        box-shadow .45s ease;

}

.inclusioncards-item:hover{

    transform:translateY(-12px);

    background:rgba(255,255,255,.07);

    border-color:rgba(0,188,212,.20);

    box-shadow:
        0 25px 65px rgba(0,188,212,.16);

}

/*==================================================
        TOP ACCENT
==================================================*/

.inclusioncards-item::before{

    transition:
        width .35s ease,
        height .35s ease,
        opacity .35s ease;

}

.inclusioncards-item:hover::before{

    width:140px;

    height:5px;

    opacity:1;

}

/*==================================================
        BACKGROUND GLOW
==================================================*/

.inclusioncards-item::after{

    transition:
        transform .45s ease,
        opacity .45s ease;

}

.inclusioncards-item:hover::after{

    transform:scale(1.35);

    opacity:1;

}

/*==================================================
        ICON
==================================================*/

.inclusioncards-icon{

    position:relative;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        color .35s ease,
        box-shadow .35s ease;

}

.inclusioncards-item:hover .inclusioncards-icon{

    transform:rotate(-8deg) scale(1.08);

    background:linear-gradient(
        135deg,
        rgba(0,188,212,.20),
        rgba(126,211,33,.15)
    );

    border-color:rgba(0,188,212,.28);

    color:#7ED321;

    box-shadow:
        0 0 30px rgba(0,188,212,.28);

}

/* Animated Pulse Ring */

.inclusioncards-icon::after{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:inclusionCardPulse 3s ease-out infinite;

}

@keyframes inclusionCardPulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.4);

        opacity:0;

    }

}

/*==================================================
        TITLE
==================================================*/

.inclusioncards-item h3{

    transition:
        color .35s ease,
        transform .35s ease;

}

.inclusioncards-item:hover h3{

    color:#00BCD4;

    transform:translateY(-3px);

}

/*==================================================
        DESCRIPTION
==================================================*/

.inclusioncards-item p{

    transition:
        color .35s ease;

}

.inclusioncards-item:hover p{

    color:#E2E8F0;

}

/*==================================================
        FLOATING ANIMATION
==================================================*/

.inclusioncards-item{

    animation:inclusionCardFloat 8s ease-in-out infinite;

}

.inclusioncards-item:nth-child(2){

animation-delay:.5s;

}

.inclusioncards-item:nth-child(3){

animation-delay:1s;

}

.inclusioncards-item:nth-child(4){

animation-delay:1.5s;

}

.inclusioncards-item:nth-child(5){

animation-delay:2s;

}

.inclusioncards-item:nth-child(6){

animation-delay:2.5s;

}

@keyframes inclusionCardFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

}

/* Stop floating while hovering */

.inclusioncards-item:hover{

    animation-play-state:paused;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.inclusioncards-item{

animation:none;

}

.inclusioncards-item:hover{

transform:none;

box-shadow:none;

}

.inclusioncards-item:hover h3{

transform:none;

}

.inclusioncards-item:hover .inclusioncards-icon{

transform:scale(1.05);

}

}

/* Programs Section Ends Here */

/* Inclusion Section Starts Here */

/*==================================================
        INCLUSION JOURNEY
==================================================*/

.inclusionjourney-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.inclusionjourney-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(130px);

}

.inclusionjourney-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.inclusionjourney-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 90px;

}

.inclusionjourney-section .section-heading h2{

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

    margin:24px 0;

}

.inclusionjourney-section .section-heading h2 span{

    color:#00BCD4;

}

.inclusionjourney-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
WRAPPER
==================================*/

.inclusionjourney-wrapper{

    position:relative;

    z-index:5;

    max-width:900px;

    margin:auto;

}

/*==================================
ITEM
==================================*/

.inclusionjourney-item{

    text-align:center;

    padding:28px 0;

}

/*==================================
NUMBER
==================================*/

.inclusionjourney-number{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:80px;

    height:80px;

    margin:0 auto 22px;

    border-radius:50%;

    background:rgba(0,188,212,.10);

    border:2px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-size:1.5rem;

    font-weight:700;

    backdrop-filter:blur(12px);

}

/*==================================
TITLE
==================================*/

.inclusionjourney-item h3{

    margin:0;

    color:#fff;

    font-size:1.4rem;

    line-height:1.4;

    font-weight:600;

}

/*==================================
DIVIDER
==================================*/

.inclusionjourney-divider{

    width:2px;

    height:55px;

    margin:0 auto;

    background:linear-gradient(

        180deg,

        #00BCD4,

        #7ED321

    );

    opacity:.6;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:768px){

.inclusionjourney-section{

padding:90px 5%;

}

.inclusionjourney-section .section-heading{

margin-bottom:60px;

}

.inclusionjourney-section .section-heading h2{

font-size:2.3rem;

}

.inclusionjourney-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.inclusionjourney-item{

padding:22px 0;

}

.inclusionjourney-number{

width:64px;

height:64px;

font-size:1.2rem;

margin-bottom:18px;

}

.inclusionjourney-item h3{

font-size:1.1rem;

}

.inclusionjourney-divider{

height:40px;

}

}

/* Part - 2 */

/*==================================================
        JOURNEY ITEM
==================================================*/

.inclusionjourney-item{

    transition:
        transform .35s ease;

}

.inclusionjourney-item:hover{

    transform:translateY(-6px);

}

/*==================================================
        STEP NUMBER
==================================================*/

.inclusionjourney-number{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        color .35s ease,
        box-shadow .35s ease;

}

/* Pulse Ring */

.inclusionjourney-number::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:journeyPulse 3s ease-out infinite;

}

@keyframes journeyPulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.45);

        opacity:0;

    }

}

/* Shine Effect */

.inclusionjourney-number::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.7s;

}

.inclusionjourney-item:hover .inclusionjourney-number::after{

    left:150%;

}

.inclusionjourney-item:hover .inclusionjourney-number{

    transform:scale(1.08);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.20),

        rgba(126,211,33,.15)

    );

    border-color:rgba(0,188,212,.30);

    color:#7ED321;

    box-shadow:

        0 0 35px rgba(0,188,212,.25);

}

/*==================================================
        TITLE
==================================================*/

.inclusionjourney-item h3{

    transition:
        color .35s ease,
        letter-spacing .35s ease;

}

.inclusionjourney-item:hover h3{

    color:#00BCD4;

    letter-spacing:.4px;

}

/*==================================================
        DIVIDER
==================================================*/

.inclusionjourney-divider{

    position:relative;

    overflow:hidden;

}

.inclusionjourney-divider::before{

    content:"";

    position:absolute;

    left:0;

    top:-100%;

    width:100%;

    height:100%;

    background:linear-gradient(

        180deg,

        transparent,

        rgba(255,255,255,.8),

        transparent

    );

    animation:journeyDividerFlow 2.8s linear infinite;

}

@keyframes journeyDividerFlow{

    from{

        top:-100%;

    }

    to{

        top:100%;

    }

}

/*==================================================
        STAGGERED ENTRY FLOAT
==================================================*/

.inclusionjourney-item{

    animation:journeyFloat 7s ease-in-out infinite;

}

.inclusionjourney-item:nth-of-type(1){

animation-delay:0s;

}

.inclusionjourney-item:nth-of-type(3){

animation-delay:.5s;

}

.inclusionjourney-item:nth-of-type(5){

animation-delay:1s;

}

.inclusionjourney-item:nth-of-type(7){

animation-delay:1.5s;

}

.inclusionjourney-item:nth-of-type(9){

animation-delay:2s;

}

.inclusionjourney-item:nth-of-type(11){

animation-delay:2.5s;

}

@keyframes journeyFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-4px);

    }

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.inclusionjourney-item{

animation:none;

}

.inclusionjourney-item:hover{

transform:none;

}

.inclusionjourney-item:hover h3{

letter-spacing:0;

}

.inclusionjourney-item:hover .inclusionjourney-number{

transform:scale(1.05);

box-shadow:none;

}

}

/* Inclusion Section Ends Here */

/* Impact Section Starts Here */

/*==================================================
        EDITORIAL IMPACT
==================================================*/

.editorialimpact-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.editorialimpact-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(130px);

}

.editorialimpact-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.editorialimpact-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 90px;

}

.editorialimpact-section .section-heading h2{

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

    margin:24px 0;

}

.editorialimpact-section .section-heading h2 span{

    color:#00BCD4;

}

.editorialimpact-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
WRAPPER
==================================*/

.editorialimpact-wrapper{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:auto;

}

/*==================================
ITEM
==================================*/

.editorialimpact-item{

    text-align:center;

    padding:40px 0;

}

/*==================================
NUMBER
==================================*/

.editorialimpact-item h3{

    margin:0;

    font-size:5rem;

    font-weight:800;

    line-height:1;

    color:#00BCD4;

    letter-spacing:-2px;

}

/*==================================
TITLE
==================================*/

.editorialimpact-item h4{

    margin:18px 0 0;

    color:#ffffff;

    font-size:1.45rem;

    font-weight:500;

    letter-spacing:.5px;

}

/*==================================
DIVIDER
==================================*/

.editorialimpact-line{

    width:220px;

    height:2px;

    margin:auto;

    background:linear-gradient(

        90deg,

        transparent,

        #00BCD4,

        #7ED321,

        transparent

    );

    opacity:.8;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:768px){

.editorialimpact-section{

padding:90px 5%;

}

.editorialimpact-section .section-heading{

margin-bottom:60px;

}

.editorialimpact-section .section-heading h2{

font-size:2.3rem;

}

.editorialimpact-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.editorialimpact-item{

padding:30px 0;

}

.editorialimpact-item h3{

font-size:3.3rem;

}

.editorialimpact-item h4{

font-size:1.1rem;

margin-top:14px;

}

.editorialimpact-line{

width:150px;

}

}

/* Part - 2 */

/*==================================================
        IMPACT ITEM
==================================================*/

.editorialimpact-item{

    transition:
        transform .35s ease;

}

.editorialimpact-item:hover{

    transform:translateY(-8px);

}

/*==================================================
        IMPACT NUMBER
==================================================*/

.editorialimpact-item h3{

    position:relative;

    display:inline-block;

    transition:
        transform .35s ease,
        color .35s ease,
        text-shadow .35s ease;

}

/* Glow Behind Number */

.editorialimpact-item h3::before{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:140px;

    height:140px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,188,212,.18),

        transparent 70%

    );

    filter:blur(25px);

    opacity:0;

    transition:.4s;

    z-index:-1;

}

.editorialimpact-item:hover h3{

    color:#7ED321;

    transform:scale(1.05);

    text-shadow:

        0 0 25px rgba(0,188,212,.35);

}

.editorialimpact-item:hover h3::before{

    opacity:1;

}

/*==================================================
        TITLE
==================================================*/

.editorialimpact-item h4{

    transition:
        color .35s ease,
        letter-spacing .35s ease;

}

.editorialimpact-item:hover h4{

    color:#00BCD4;

    letter-spacing:.6px;

}

/*==================================================
        DIVIDER
==================================================*/

.editorialimpact-line{

    position:relative;

    overflow:hidden;

}

.editorialimpact-line::before{

    content:"";

    position:absolute;

    top:0;

    left:-40%;

    width:40%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.9),

        transparent

    );

    animation:impactDividerFlow 2.8s linear infinite;

}

@keyframes impactDividerFlow{

    from{

        left:-40%;

    }

    to{

        left:120%;

    }

}

/*==================================================
        FLOATING NUMBERS
==================================================*/

.editorialimpact-item{

    animation:impactFloat 7s ease-in-out infinite;

}

.editorialimpact-item:nth-child(1){

animation-delay:0s;

}

.editorialimpact-item:nth-child(3){

animation-delay:.6s;

}

.editorialimpact-item:nth-child(5){

animation-delay:1.2s;

}

.editorialimpact-item:nth-child(7){

animation-delay:1.8s;

}

@keyframes impactFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-5px);

    }

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.editorialimpact-item{

animation:none;

}

.editorialimpact-item:hover{

transform:none;

}

.editorialimpact-item:hover h3{

transform:scale(1.03);

text-shadow:none;

}

.editorialimpact-item:hover h4{

letter-spacing:0;

}

}

/* Impact Section Ends Here */

/* Matters Section Starts Here */

/*==================================================
        INCLUSION VALUE CARDS
==================================================*/

.inclusionvaluecards-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.inclusionvaluecards-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(130px);

}

.inclusionvaluecards-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.inclusionvaluecards-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.inclusionvaluecards-section .section-heading h2{

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

    margin:24px 0;

}

.inclusionvaluecards-section .section-heading h2 span{

    color:#00BCD4;

}

.inclusionvaluecards-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
GRID
==================================*/

.inclusionvaluecards-grid{

    position:relative;

    z-index:5;

    max-width:1150px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

}

/*==================================
LAST ROW CENTER
==================================*/

.inclusionvaluecards-item:nth-child(4){

    grid-column:1 / 2;

    justify-self:end;

    width:100%;

    max-width:340px;

}

.inclusionvaluecards-item:nth-child(5){

    grid-column:2 / 3;

    justify-self:start;

    width:100%;

    max-width:340px;

}

/*==================================
CARD
==================================*/

.inclusionvaluecards-item{

    position:relative;

    overflow:hidden;

    text-align:center;

    padding:40px 30px;

    border-radius:26px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(16px);

}

/* Top Accent */

.inclusionvaluecards-item::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:90px;

    height:4px;

    border-radius:50px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

}

/* Glow */

.inclusionvaluecards-item::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    top:-120px;

    right:-120px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,188,212,.08),

        transparent 70%

    );

}

/*==================================
ICON
==================================*/

.inclusionvaluecards-icon{

    width:82px;

    height:82px;

    margin:0 auto 24px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    font-size:2rem;

}

/*==================================
TEXT
==================================*/

.inclusionvaluecards-item h3{

    margin-bottom:16px;

    color:#fff;

    font-size:1.35rem;

    line-height:1.35;

}

.inclusionvaluecards-item p{

    margin:0;

    color:#CBD5E1;

    line-height:1.9;

    font-size:.95rem;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.inclusionvaluecards-grid{

grid-template-columns:repeat(2,1fr);

}

.inclusionvaluecards-item:nth-child(4),

.inclusionvaluecards-item:nth-child(5){

grid-column:auto;

justify-self:stretch;

max-width:none;

}

}

@media(max-width:768px){

.inclusionvaluecards-section{

padding:90px 5%;

}

.inclusionvaluecards-section .section-heading{

margin-bottom:60px;

}

.inclusionvaluecards-section .section-heading h2{

font-size:2.3rem;

}

.inclusionvaluecards-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.inclusionvaluecards-grid{

grid-template-columns:1fr;

gap:18px;

}

.inclusionvaluecards-item{

padding:32px 24px;

border-radius:22px;

}

.inclusionvaluecards-icon{

width:68px;

height:68px;

font-size:1.6rem;

margin-bottom:20px;

}

.inclusionvaluecards-item h3{

font-size:1.2rem;

margin-bottom:12px;

}

.inclusionvaluecards-item p{

font-size:.92rem;

line-height:1.8;

}

}

/* Part - 2 */

/*==================================================
        CARD
==================================================*/

.inclusionvaluecards-item{

    transition:
        transform .4s ease,
        border-color .4s ease,
        background .4s ease,
        box-shadow .4s ease;

}

.inclusionvaluecards-item:hover{

    transform:translateY(-10px);

    background:rgba(255,255,255,.07);

    border-color:rgba(0,188,212,.20);

    box-shadow:
        0 22px 55px rgba(0,188,212,.15);

}

/*==================================================
        TOP ACCENT
==================================================*/

.inclusionvaluecards-item::before{

    transition:
        width .35s ease,
        opacity .35s ease;

}

.inclusionvaluecards-item:hover::before{

    width:140px;

    opacity:1;

}

/*==================================================
        BACKGROUND GLOW
==================================================*/

.inclusionvaluecards-item::after{

    transition:
        transform .45s ease,
        opacity .45s ease;

}

.inclusionvaluecards-item:hover::after{

    transform:scale(1.35);

    opacity:1;

}

/*==================================================
        ICON
==================================================*/

.inclusionvaluecards-icon{

    position:relative;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

/* Pulse Ring */

.inclusionvaluecards-icon::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:inclusionValuePulse 3s ease-out infinite;

}

@keyframes inclusionValuePulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.45);

        opacity:0;

    }

}

.inclusionvaluecards-item:hover .inclusionvaluecards-icon{

    transform:rotate(-10deg) scale(1.08);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.20),

        rgba(126,211,33,.15)

    );

    border-color:rgba(0,188,212,.30);

    box-shadow:
        0 0 30px rgba(0,188,212,.28);

}

/*==================================================
        TITLE
==================================================*/

.inclusionvaluecards-item h3{

    transition:
        color .35s ease,
        transform .35s ease;

}

.inclusionvaluecards-item:hover h3{

    color:#00BCD4;

    transform:translateY(-3px);

}

/*==================================================
        DESCRIPTION
==================================================*/

.inclusionvaluecards-item p{

    transition:color .35s ease;

}

.inclusionvaluecards-item:hover p{

    color:#E2E8F0;

}

/*==================================================
        FLOATING EFFECT
==================================================*/

.inclusionvaluecards-item{

    animation:inclusionValueFloat 8s ease-in-out infinite;

}

.inclusionvaluecards-item:nth-child(2){

animation-delay:.5s;

}

.inclusionvaluecards-item:nth-child(3){

animation-delay:1s;

}

.inclusionvaluecards-item:nth-child(4){

animation-delay:1.5s;

}

.inclusionvaluecards-item:nth-child(5){

animation-delay:2s;

}

@keyframes inclusionValueFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-5px);

    }

}

/* Pause Float on Hover */

.inclusionvaluecards-item:hover{

    animation-play-state:paused;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.inclusionvaluecards-item{

animation:none;

}

.inclusionvaluecards-item:hover{

transform:none;

box-shadow:none;

}

.inclusionvaluecards-item:hover .inclusionvaluecards-icon{

transform:scale(1.05);

box-shadow:none;

}

.inclusionvaluecards-item:hover h3{

transform:none;

}

}

/* Matters Section Ends Here */

/* FAQ Section Starts Here */

/*==================================================
        INCLUSION LINE FAQ
==================================================*/

.inclusionlinefaq-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.inclusionlinefaq-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(130px);

}

.inclusionlinefaq-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.inclusionlinefaq-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.inclusionlinefaq-section .section-heading h2{

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

    margin:24px 0;

}

.inclusionlinefaq-section .section-heading h2 span{

    color:#00BCD4;

}

.inclusionlinefaq-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
FAQ WRAPPER
==================================*/

.inclusionlinefaq-wrapper{

    position:relative;

    z-index:5;

    max-width:950px;

    margin:auto;

}

/*==================================
FAQ ITEM
==================================*/

.inclusionlinefaq-item{

    border-bottom:1px solid rgba(255,255,255,.10);

}

/*==================================
QUESTION
==================================*/

.inclusionlinefaq-question{

    width:100%;

    padding:28px 0;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:none;

    border:none;

    cursor:pointer;

    text-align:left;

}

/*==================================
LEFT
==================================*/

.inclusionlinefaq-left{

    display:flex;

    align-items:center;

    gap:20px;

}

/*==================================
ICON
==================================*/

.inclusionlinefaq-icon{

    width:54px;

    height:54px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    font-size:1.35rem;

}

/*==================================
TITLE
==================================*/

.inclusionlinefaq-question h4{

    margin:0;

    color:#fff;

    font-size:1.18rem;

    font-weight:600;

    line-height:1.5;

}

/*==================================
TOGGLE
==================================*/

.inclusionlinefaq-toggle{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:#00BCD4;

    font-size:1.5rem;

    font-weight:600;

    flex-shrink:0;

}

/*==================================
ANSWER
==================================*/

.inclusionlinefaq-answer{

    max-height:0;

    overflow:hidden;

    opacity:0;

    transition:

        max-height .45s ease,

        opacity .35s ease;

}

.inclusionlinefaq-answer p{

    margin:0;

    padding:

        0

        0

        28px

        74px;

    color:#CBD5E1;

    line-height:1.9;

}

/*==================================
ACTIVE
==================================*/

.inclusionlinefaq-item.active .inclusionlinefaq-answer{

    max-height:220px;

    opacity:1;

}

.inclusionlinefaq-item.active .inclusionlinefaq-toggle{

    background:#00BCD4;

    color:#fff;

    border-color:#00BCD4;

    font-size:0;

}

.inclusionlinefaq-item.active .inclusionlinefaq-toggle::before{

    content:"−";

    font-size:1.5rem;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:768px){

.inclusionlinefaq-section{

padding:90px 5%;

}

.inclusionlinefaq-section .section-heading{

margin-bottom:60px;

}

.inclusionlinefaq-section .section-heading h2{

font-size:2.3rem;

}

.inclusionlinefaq-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.inclusionlinefaq-question{

padding:22px 0;

}

.inclusionlinefaq-left{

gap:15px;

align-items:flex-start;

}

.inclusionlinefaq-icon{

width:46px;

height:46px;

font-size:1.1rem;

}

.inclusionlinefaq-question h4{

font-size:1rem;

}

.inclusionlinefaq-toggle{

width:36px;

height:36px;

font-size:1.2rem;

}

.inclusionlinefaq-answer p{

padding:

0

0

22px

60px;

font-size:.92rem;

line-height:1.8;

}

}

/* Part - 2 */

/*==================================================
        FAQ ITEM
==================================================*/

.inclusionlinefaq-item{

    position:relative;

    transition:
        border-color .35s ease;

}

.inclusionlinefaq-item:hover{

    border-bottom-color:rgba(0,188,212,.20);

}

/* Active Bottom Line */

.inclusionlinefaq-item::before{

    content:"";

    position:absolute;

    left:0;

    bottom:-1px;

    width:0;

    height:2px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    transition:width .4s ease;

}

.inclusionlinefaq-item:hover::before,

.inclusionlinefaq-item.active::before{

    width:100%;

}

/*==================================================
        COMMUNITY ICON
==================================================*/

.inclusionlinefaq-icon{

    position:relative;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

/* Pulse Ring */

.inclusionlinefaq-icon::after{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:communityPulse 3s ease-out infinite;

}

@keyframes communityPulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.4);

        opacity:0;

    }

}

.inclusionlinefaq-item:hover .inclusionlinefaq-icon{

    transform:rotate(-10deg) scale(1.08);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.18),

        rgba(126,211,33,.15)

    );

    border-color:rgba(0,188,212,.28);

    box-shadow:
        0 0 28px rgba(0,188,212,.25);

}

/*==================================================
        QUESTION
==================================================*/

.inclusionlinefaq-question h4{

    transition:
        color .35s ease,
        transform .35s ease;

}

.inclusionlinefaq-item:hover h4{

    color:#00BCD4;

    transform:translateX(6px);

}

.inclusionlinefaq-item.active h4{

    color:#00BCD4;

}

/*==================================================
        TOGGLE
==================================================*/

.inclusionlinefaq-toggle{

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.inclusionlinefaq-item:hover .inclusionlinefaq-toggle{

    transform:rotate(90deg);

    border-color:rgba(0,188,212,.20);

    background:rgba(0,188,212,.08);

    box-shadow:
        0 0 18px rgba(0,188,212,.18);

}

.inclusionlinefaq-item.active .inclusionlinefaq-toggle{

    transform:rotate(180deg);

}

/*==================================================
        ANSWER
==================================================*/

.inclusionlinefaq-answer p{

    transition:color .35s ease;

}

.inclusionlinefaq-item:hover .inclusionlinefaq-answer p{

    color:#E2E8F0;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.inclusionlinefaq-item:hover h4{

transform:none;

}

.inclusionlinefaq-item:hover .inclusionlinefaq-toggle{

transform:none;

box-shadow:none;

}

.inclusionlinefaq-item:hover .inclusionlinefaq-icon{

transform:scale(1.05);

}

}

/* FAQ Section Ends Here */

/* CTA Section Starts Here */

/*==================================================
        COMMUNITY CONNECTION CTA
==================================================*/

.communityconnectcta-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 60%,
        #050816 100%
    );

}

/*==================================
BACKGROUND GLOWS
==================================*/

.communityconnectcta-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    pointer-events:none;

}

.glow-one{

    width:420px;

    height:420px;

    top:-140px;

    left:-120px;

    background:rgba(0,188,212,.12);

}

.glow-two{

    width:420px;

    height:420px;

    right:-120px;

    bottom:-140px;

    background:rgba(126,211,33,.10);

}

/*==================================
DOTTED NETWORK
==================================*/

.communityconnectcta-network{

    position:absolute;

    inset:0;

    pointer-events:none;

    overflow:hidden;

}

.communityconnectcta-network span{

    position:absolute;

    width:7px;

    height:7px;

    border-radius:50%;

    background:rgba(255,255,255,.18);

}

.communityconnectcta-network span:nth-child(1){

top:18%;

left:18%;

}

.communityconnectcta-network span:nth-child(2){

top:30%;

right:24%;

}

.communityconnectcta-network span:nth-child(3){

top:70%;

left:22%;

}

.communityconnectcta-network span:nth-child(4){

bottom:20%;

right:18%;

}

.communityconnectcta-network span:nth-child(5){

top:50%;

left:50%;

}

.communityconnectcta-network span:nth-child(6){

bottom:38%;

right:40%;

}

/*==================================
CTA BOX
==================================*/

.communityconnectcta-box{

    position:relative;

    z-index:5;

    max-width:980px;

    margin:auto;

    text-align:center;

    padding:70px 60px;

    border-radius:34px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    overflow:hidden;

}

.communityconnectcta-box::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

}

.communityconnectcta-box::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    right:-130px;

    top:-130px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.10),
        transparent 70%
    );

}

/*==================================
BADGE
==================================*/

.communityconnectcta-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:50px;

    margin-bottom:28px;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-weight:600;

}

.communityconnectcta-badge i{

    font-size:1rem;

}

/*==================================
HEADING
==================================*/

.communityconnectcta-box h2{

    color:#fff;

    font-size:3rem;

    line-height:1.25;

    margin-bottom:25px;

}

.communityconnectcta-box h2 span{

    color:#00BCD4;

}

.communityconnectcta-box p{

    max-width:760px;

    margin:0 auto 45px;

    color:#CBD5E1;

    line-height:2;

    font-size:1rem;

}

/*==================================
BUTTONS
==================================*/

.communityconnectcta-actions{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

}

.communityconnectcta-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 30px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    font-size:.96rem;

    transition:.35s ease;

}

.communityconnectcta-btn.primary{

    color:#08111F;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

}

.communityconnectcta-btn.secondary{

    color:#fff;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(12px);

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:768px){

.communityconnectcta-section{

padding:90px 5%;

}

.communityconnectcta-box{

padding:45px 24px;

border-radius:24px;

}

.communityconnectcta-box h2{

font-size:2.2rem;

}

.communityconnectcta-box p{

font-size:.95rem;

line-height:1.8;

margin-bottom:35px;

}

.communityconnectcta-actions{

flex-direction:column;

gap:14px;

}

.communityconnectcta-btn{

width:100%;

padding:15px 20px;

}

}

/* Part - 2 */

/*==================================================
        CTA PANEL
==================================================*/

.communityconnectcta-box{

    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;

}

.communityconnectcta-box:hover{

    transform:translateY(-8px);

    border-color:rgba(0,188,212,.18);

    box-shadow:
        0 30px 80px rgba(0,188,212,.15);

}

/*==================================================
        BADGE
==================================================*/

.communityconnectcta-badge{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.communityconnectcta-badge::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.communityconnectcta-box:hover .communityconnectcta-badge{

    transform:scale(1.05);

    background:rgba(0,188,212,.16);

    border-color:rgba(0,188,212,.25);

    box-shadow:
        0 0 25px rgba(0,188,212,.20);

}

.communityconnectcta-box:hover .communityconnectcta-badge::before{

    left:160%;

}

/*==================================================
        HEADING
==================================================*/

.communityconnectcta-box h2{

    transition:
        transform .35s ease;

}

.communityconnectcta-box:hover h2{

    transform:translateY(-4px);

}

/*==================================================
        BUTTONS
==================================================*/

.communityconnectcta-btn{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease,
        color .35s ease;

}

/* Shine */

.communityconnectcta-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:55%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.7s;

}

.communityconnectcta-btn:hover::before{

    left:150%;

}

/* Primary */

.communityconnectcta-btn.primary:hover{

    transform:translateY(-5px);

    box-shadow:
        0 18px 40px rgba(0,188,212,.30);

}

/* Secondary */

.communityconnectcta-btn.secondary:hover{

    transform:translateY(-5px);

    color:#fff;

    border-color:rgba(0,188,212,.25);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.18),

        rgba(126,211,33,.15)

    );

    box-shadow:
        0 18px 40px rgba(0,188,212,.18);

}

/*==================================================
        NETWORK DOTS
==================================================*/

.communityconnectcta-network span{

    animation:communityDotFloat 6s ease-in-out infinite;

}

.communityconnectcta-network span:nth-child(2){

animation-delay:.8s;

}

.communityconnectcta-network span:nth-child(3){

animation-delay:1.6s;

}

.communityconnectcta-network span:nth-child(4){

animation-delay:2.4s;

}

.communityconnectcta-network span:nth-child(5){

animation-delay:3.2s;

}

.communityconnectcta-network span:nth-child(6){

animation-delay:4s;

}

@keyframes communityDotFloat{

    0%,100%{

        transform:translateY(0) scale(1);

        opacity:.35;

    }

    50%{

        transform:translateY(-14px) scale(1.4);

        opacity:1;

        box-shadow:
            0 0 18px rgba(0,188,212,.35);

    }

}

/*==================================================
        BACKGROUND GLOW
==================================================*/

.communityconnectcta-glow{

    animation:communityGlowMove 10s ease-in-out infinite;

}

.glow-two{

animation-delay:5s;

}

@keyframes communityGlowMove{

    0%,100%{

        transform:scale(1);

        opacity:.6;

    }

    50%{

        transform:scale(1.15);

        opacity:1;

    }

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.communityconnectcta-box:hover{

transform:none;

box-shadow:none;

}

.communityconnectcta-box:hover h2{

transform:none;

}

.communityconnectcta-btn:hover{

transform:none;

box-shadow:none;

}

.communityconnectcta-box:hover .communityconnectcta-badge{

transform:none;

box-shadow:none;

}

.communityconnectcta-network span{

animation-duration:8s;

}

}

/* CTA Section Ends Here */

/* Social Welfare And Inclusion Page Ends Here */

/* Become Volunteer Page Starts Here */

/* Hero Section Starts Here */

/*==================================================
        VOLUNTEER WELCOME HERO
==================================================*/

.volunteerwelcome-section{

    position:relative;

    overflow:hidden;

    min-height:100vh;

    padding:170px 5% 120px;

    display:flex;

    align-items:center;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

/*==================================
BACKGROUND GLOW
==================================*/

.volunteerwelcome-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    pointer-events:none;

}

.volunteerwelcome-glow-left{

    width:520px;

    height:520px;

    top:-180px;

    left:-180px;

    background:rgba(0,188,212,.12);

}

.volunteerwelcome-glow-right{

    width:460px;

    height:460px;

    right:-150px;

    bottom:-150px;

    background:rgba(126,211,33,.10);

}

/*==================================
FLOATING PARTICLES
==================================*/

.volunteerwelcome-particles{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.volunteerwelcome-particles span{

    position:absolute;

    width:6px;

    height:6px;

    border-radius:50%;

    background:#00BCD4;

    opacity:.25;

}

.volunteerwelcome-particles span:nth-child(1){

top:16%;

left:10%;

}

.volunteerwelcome-particles span:nth-child(2){

top:28%;

left:82%;

}

.volunteerwelcome-particles span:nth-child(3){

top:55%;

left:18%;

}

.volunteerwelcome-particles span:nth-child(4){

bottom:18%;

left:30%;

}

.volunteerwelcome-particles span:nth-child(5){

bottom:25%;

right:12%;

}

.volunteerwelcome-particles span:nth-child(6){

top:48%;

right:42%;

}

.volunteerwelcome-particles span:nth-child(7){

bottom:12%;

right:50%;

}

/*==================================
FLOATING ICONS
==================================*/

.volunteerwelcome-floating-icons{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.volunteerwelcome-floating-icons i{

    position:absolute;

    color:rgba(255,255,255,.10);

    font-size:1.8rem;

}

.volunteerwelcome-icon-one{

top:20%;

left:8%;

}

.volunteerwelcome-icon-two{

top:18%;

right:16%;

}

.volunteerwelcome-icon-three{

top:68%;

left:10%;

}

.volunteerwelcome-icon-four{

bottom:18%;

right:18%;

}

.volunteerwelcome-icon-five{

top:50%;

right:8%;

}

/*==================================
BREADCRUMB
==================================*/

.volunteerwelcome-breadcrumb{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 22px;

    margin-bottom:45px;

    border-radius:50px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(14px);

}

.volunteerwelcome-breadcrumb a{

    text-decoration:none;

    color:#CBD5E1;

    transition:.3s;

}

.volunteerwelcome-breadcrumb a:hover{

    color:#00BCD4;

}

.volunteerwelcome-breadcrumb i{

    color:#00BCD4;

    font-size:.8rem;

}

.volunteerwelcome-breadcrumb .active{

    color:#00BCD4;

}

/*==================================
LAYOUT
==================================*/

.volunteerwelcome-wrapper{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:70px;

    align-items:center;

}

/*==================================
CONTENT
==================================*/

.volunteerwelcome-content{

    position:relative;

    z-index:5;

}

.volunteerwelcome-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    margin-bottom:28px;

    border-radius:50px;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-weight:600;

}

.volunteerwelcome-content h1{

    margin-bottom:28px;

    color:#fff;

    font-size:4.6rem;

    line-height:1.08;

    font-weight:800;

}

.volunteerwelcome-content h1 span{

    color:#00BCD4;

}

.volunteerwelcome-content p{

    max-width:620px;

    margin-bottom:45px;

    color:#CBD5E1;

    font-size:1.05rem;

    line-height:2;

}

/*==================================
BUTTONS
==================================*/

.volunteerwelcome-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.volunteerwelcome-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:60px;

    text-decoration:none;

    font-size:.96rem;

    font-weight:600;

}

.volunteerwelcome-button-primary{

    color:#08111F;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

}

.volunteerwelcome-button-secondary{

    color:#fff;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(14px);

}

/*==================================
RIGHT SIDE
==================================*/

.volunteerwelcome-visual{

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}

.volunteerwelcome-orbit{

    position:relative;

    width:430px;

    height:430px;

    border-radius:50%;

    border:2px dashed rgba(255,255,255,.10);

}

.volunteerwelcome-center{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:135px;

    height:135px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    color:#08111F;

    font-size:3rem;

    box-shadow:0 0 45px rgba(0,188,212,.30);

}

.volunteerwelcome-node{

    position:absolute;

    width:66px;

    height:66px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(12px);

    font-size:1.5rem;

}

.volunteerwelcome-node-one{

top:-18px;

left:50%;

transform:translateX(-50%);

}

.volunteerwelcome-node-two{

right:-18px;

top:50%;

transform:translateY(-50%);

}

.volunteerwelcome-node-three{

bottom:-18px;

left:50%;

transform:translateX(-50%);

}

.volunteerwelcome-node-four{

left:-18px;

top:50%;

transform:translateY(-50%);

}

/*==================================
SCROLL INDICATOR
==================================*/

.volunteerwelcome-scroll{

    position:absolute;

    left:50%;

    bottom:30px;

    transform:translateX(-50%);

    text-align:center;

    color:#CBD5E1;

    font-size:.9rem;

}

.volunteerwelcome-scroll-mouse{

    width:28px;

    height:48px;

    margin:12px auto 0;

    border-radius:20px;

    border:2px solid rgba(255,255,255,.18);

    display:flex;

    justify-content:center;

}

.volunteerwelcome-scroll-dot{

    width:5px;

    height:10px;

    margin-top:8px;

    border-radius:20px;

    background:#00BCD4;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.volunteerwelcome-wrapper{

grid-template-columns:1fr;

text-align:center;

gap:60px;

}

.volunteerwelcome-content p{

margin-left:auto;

margin-right:auto;

}

.volunteerwelcome-buttons{

justify-content:center;

}

}

@media(max-width:768px){

.volunteerwelcome-section{

padding:140px 5% 100px;

min-height:auto;

}

.volunteerwelcome-content h1{

font-size:2.8rem;

}

.volunteerwelcome-content p{

font-size:.95rem;

line-height:1.8;

}

.volunteerwelcome-orbit{

width:290px;

height:290px;

}

.volunteerwelcome-center{

width:95px;

height:95px;

font-size:2.2rem;

}

.volunteerwelcome-node{

width:50px;

height:50px;

font-size:1.1rem;

}

.volunteerwelcome-buttons{

flex-direction:column;

}

.volunteerwelcome-button{

width:100%;

}

.volunteerwelcome-breadcrumb{

font-size:.9rem;

padding:10px 18px;

}

}

/* Part - 2 */


/*==================================================
        HERO PANEL
==================================================*/

.volunteerwelcome-content{

    animation:volunteerwelcomeFadeLeft 1s ease;

}

.volunteerwelcome-visual{

    animation:volunteerwelcomeFadeRight 1s ease;

}

@keyframes volunteerwelcomeFadeLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes volunteerwelcomeFadeRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*==================================================
        BACKGROUND GLOW
==================================================*/

.volunteerwelcome-glow{

    animation:volunteerwelcomeGlowMove 8s ease-in-out infinite;

}

.volunteerwelcome-glow-right{

    animation-delay:4s;

}

@keyframes volunteerwelcomeGlowMove{

    0%,100%{

        transform:scale(1);

        opacity:.6;

    }

    50%{

        transform:scale(1.18);

        opacity:1;

    }

}

/*==================================================
        FLOATING PARTICLES
==================================================*/

.volunteerwelcome-particles span{

    animation:volunteerwelcomeParticleFloat 7s ease-in-out infinite;

}

.volunteerwelcome-particles span:nth-child(2){

animation-delay:.8s;

}

.volunteerwelcome-particles span:nth-child(3){

animation-delay:1.6s;

}

.volunteerwelcome-particles span:nth-child(4){

animation-delay:2.4s;

}

.volunteerwelcome-particles span:nth-child(5){

animation-delay:3.2s;

}

.volunteerwelcome-particles span:nth-child(6){

animation-delay:4s;

}

.volunteerwelcome-particles span:nth-child(7){

animation-delay:4.8s;

}

@keyframes volunteerwelcomeParticleFloat{

    0%,100%{

        transform:translateY(0);

        opacity:.25;

    }

    50%{

        transform:translateY(-22px);

        opacity:1;

    }

}

/*==================================================
        FLOATING ICONS
==================================================*/

.volunteerwelcome-floating-icons i{

    animation:volunteerwelcomeIconFloat 6s ease-in-out infinite;

}

.volunteerwelcome-icon-two{

animation-delay:.7s;

}

.volunteerwelcome-icon-three{

animation-delay:1.4s;

}

.volunteerwelcome-icon-four{

animation-delay:2.1s;

}

.volunteerwelcome-icon-five{

animation-delay:2.8s;

}

@keyframes volunteerwelcomeIconFloat{

    0%,100%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(-14px) rotate(8deg);

    }

}

/*==================================================
        BADGE
==================================================*/

.volunteerwelcome-badge{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.volunteerwelcome-badge::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform:skewX(-25deg);

    transition:.8s;

}

.volunteerwelcome-badge:hover{

    transform:translateY(-3px);

    box-shadow:0 0 25px rgba(0,188,212,.25);

}

.volunteerwelcome-badge:hover::before{

    left:150%;

}

/*==================================================
        BUTTONS
==================================================*/

.volunteerwelcome-button{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.volunteerwelcome-button::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:55%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform:skewX(-25deg);

    transition:.7s;

}

.volunteerwelcome-button:hover::before{

    left:150%;

}

.volunteerwelcome-button-primary:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 40px rgba(0,188,212,.30);

}

.volunteerwelcome-button-secondary:hover{

    transform:translateY(-5px);

    background:linear-gradient(
        135deg,
        rgba(0,188,212,.18),
        rgba(126,211,33,.15)
    );

    border-color:rgba(0,188,212,.25);

    color:#fff;

    box-shadow:0 18px 40px rgba(0,188,212,.18);

}

/*==================================================
        ORBIT
==================================================*/

.volunteerwelcome-orbit{

    animation:volunteerwelcomeRotate 28s linear infinite;

}

@keyframes volunteerwelcomeRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.volunteerwelcome-center{

    animation:volunteerwelcomeCenterPulse 3s ease-in-out infinite;

}

@keyframes volunteerwelcomeCenterPulse{

    0%,100%{

        transform:translate(-50%,-50%) scale(1);

    }

    50%{

        transform:translate(-50%,-50%) scale(1.08);

    }

}

/* Keep icons upright while orbit rotates */

.volunteerwelcome-node{

    animation:volunteerwelcomeNodeRotate 28s linear infinite reverse;

}

@keyframes volunteerwelcomeNodeRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(-360deg);

    }

}

/*==================================================
        SCROLL INDICATOR
==================================================*/

.volunteerwelcome-scroll-dot{

    animation:volunteerwelcomeScroll 1.8s infinite;

}

@keyframes volunteerwelcomeScroll{

    0%{

        transform:translateY(0);

        opacity:1;

    }

    100%{

        transform:translateY(18px);

        opacity:0;

    }

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.volunteerwelcome-orbit{

animation-duration:40s;

}

.volunteerwelcome-button:hover{

transform:none;

box-shadow:none;

}

.volunteerwelcome-badge:hover{

transform:none;

box-shadow:none;

}

.volunteerwelcome-glow{

animation-duration:10s;

}

}

/* Hero Section Ends Here */

/* Why Volunteer Section Starts Here */

/*==================================================
        VOLUNTEER BENEFITS
==================================================*/

.volunteerbenefits-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.volunteerbenefits-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(130px);

}

.volunteerbenefits-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.volunteerbenefits-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.volunteerbenefits-section .section-heading h2{

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

    margin:24px 0;

}

.volunteerbenefits-section .section-heading h2 span{

    color:#00BCD4;

}

.volunteerbenefits-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
GRID
==================================*/

.volunteerbenefits-grid{

    position:relative;

    z-index:5;

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

/*==================================
CARD
==================================*/

.volunteerbenefits-card{

    position:relative;

    overflow:hidden;

    padding:40px 35px;

    border-radius:28px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(16px);

}

.volunteerbenefits-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

}

.volunteerbenefits-card::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    right:-120px;

    top:-120px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

}

/*==================================
ICON
==================================*/

.volunteerbenefits-icon{

    width:82px;

    height:82px;

    margin-bottom:28px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    font-size:2rem;

}

/*==================================
TEXT
==================================*/

.volunteerbenefits-card h3{

    margin-bottom:16px;

    color:#fff;

    font-size:1.5rem;

    line-height:1.3;

    font-weight:700;

}

.volunteerbenefits-card p{

    margin:0;

    color:#CBD5E1;

    font-size:.97rem;

    line-height:1.9;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.volunteerbenefits-grid{

grid-template-columns:1fr;

gap:22px;

}

}

@media(max-width:768px){

.volunteerbenefits-section{

padding:90px 5%;

}

.volunteerbenefits-section .section-heading{

margin-bottom:60px;

}

.volunteerbenefits-section .section-heading h2{

font-size:2.3rem;

}

.volunteerbenefits-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.volunteerbenefits-card{

padding:30px 24px;

border-radius:22px;

}

.volunteerbenefits-icon{

width:68px;

height:68px;

font-size:1.6rem;

margin-bottom:20px;

}

.volunteerbenefits-card h3{

font-size:1.25rem;

margin-bottom:12px;

}

.volunteerbenefits-card p{

font-size:.92rem;

line-height:1.8;

}

}

/* Part - 2 */

/*==================================================
        BENEFIT CARD
==================================================*/

.volunteerbenefits-card{

    transition:
        transform .4s ease,
        border-color .4s ease,
        background .4s ease,
        box-shadow .4s ease;

}

.volunteerbenefits-card:hover{

    transform:translateY(-10px);

    background:rgba(255,255,255,.07);

    border-color:rgba(0,188,212,.20);

    box-shadow:
        0 25px 60px rgba(0,188,212,.15);

}

/*==================================================
        TOP BORDER
==================================================*/

.volunteerbenefits-card::before{

    transition:
        height .35s ease,
        opacity .35s ease;

}

.volunteerbenefits-card:hover::before{

    height:6px;

    opacity:1;

}

/*==================================================
        BACKGROUND GLOW
==================================================*/

.volunteerbenefits-card::after{

    transition:
        transform .45s ease,
        opacity .45s ease;

}

.volunteerbenefits-card:hover::after{

    transform:scale(1.4);

    opacity:1;

}

/*==================================================
        ICON
==================================================*/

.volunteerbenefits-icon{

    position:relative;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

/* Pulse Ring */

.volunteerbenefits-icon::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:volunteerBenefitsPulse 3s ease-out infinite;

}

@keyframes volunteerBenefitsPulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.45);

        opacity:0;

    }

}

.volunteerbenefits-card:hover .volunteerbenefits-icon{

    transform:rotate(-10deg) scale(1.08);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.20),

        rgba(126,211,33,.16)

    );

    border-color:rgba(0,188,212,.30);

    box-shadow:
        0 0 30px rgba(0,188,212,.28);

}

/*==================================================
        TITLE
==================================================*/

.volunteerbenefits-card h3{

    transition:
        color .35s ease,
        transform .35s ease;

}

.volunteerbenefits-card:hover h3{

    color:#00BCD4;

    transform:translateY(-3px);

}

/*==================================================
        DESCRIPTION
==================================================*/

.volunteerbenefits-card p{

    transition:
        color .35s ease;

}

.volunteerbenefits-card:hover p{

    color:#E2E8F0;

}

/*==================================================
        FLOATING EFFECT
==================================================*/

.volunteerbenefits-card{

    animation:volunteerBenefitsFloat 8s ease-in-out infinite;

}

.volunteerbenefits-card:nth-child(2){

animation-delay:.6s;

}

.volunteerbenefits-card:nth-child(3){

animation-delay:1.2s;

}

.volunteerbenefits-card:nth-child(4){

animation-delay:1.8s;

}

@keyframes volunteerBenefitsFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-5px);

    }

}

.volunteerbenefits-card:hover{

    animation-play-state:paused;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.volunteerbenefits-card{

animation:none;

}

.volunteerbenefits-card:hover{

transform:none;

box-shadow:none;

}

.volunteerbenefits-card:hover .volunteerbenefits-icon{

transform:scale(1.05);

box-shadow:none;

}

.volunteerbenefits-card:hover h3{

transform:none;

}

}

/* Why Volunteer Section Ends Here */

/* Volunteer Registration Starts Here */

/*==================================================
        VOLUNTEER REGISTRATION
==================================================*/

.volunteerregistration-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.volunteerregistration-section::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    left:-220px;

    top:-220px;

    border-radius:50%;

    background:radial-gradient(circle,rgba(0,188,212,.08),transparent 70%);

    filter:blur(130px);

}

.volunteerregistration-section::after{

    content:"";

    position:absolute;

    width:460px;

    height:460px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(circle,rgba(126,211,33,.08),transparent 70%);

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.volunteerregistration-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.volunteerregistration-section .section-heading h2{

    color:#fff;

    font-size:3.2rem;

    margin:24px 0;

    line-height:1.2;

}

.volunteerregistration-section .section-heading h2 span{

    color:#00BCD4;

}

.volunteerregistration-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
LAYOUT
==================================*/

.volunteerregistration-wrapper{

    position:relative;

    z-index:5;

    max-width:1350px;

    margin:auto;

    display:grid;

    grid-template-columns:420px 1fr;

    gap:40px;

    align-items:start;

}

/*==================================
LEFT PANEL
==================================*/

.volunteerregistration-info{

    position:sticky;

    top:120px;

    padding:45px 35px;

    border-radius:30px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    overflow:hidden;

}

.volunteerregistration-info::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

}

/*==================================
ILLUSTRATION
==================================*/

.volunteerregistration-illustration{

    width:130px;

    height:130px;

    margin:0 auto 30px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    color:#08111F;

    font-size:3.2rem;

    box-shadow:0 0 35px rgba(0,188,212,.25);

}

.volunteerregistration-info h3{

    color:#fff;

    text-align:center;

    font-size:2rem;

    margin-bottom:20px;

}

.volunteerregistration-info p{

    color:#CBD5E1;

    text-align:center;

    line-height:1.9;

    margin-bottom:35px;

}

/*==================================
IMPACT STATS
==================================*/

.volunteerregistration-impact{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.volunteerregistration-impact-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 22px;

    border-radius:18px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.06);

}

.volunteerregistration-impact-item h4{

    margin:0;

    color:#00BCD4;

    font-size:1.7rem;

    font-weight:700;

}

.volunteerregistration-impact-item span{

    color:#fff;

    font-size:1rem;

    font-weight:500;

}

/*==================================
FORM BOX
==================================*/

.volunteerregistration-formbox{

    padding:45px;

    border-radius:30px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}

/*==================================
GRID
==================================*/

.volunteerregistration-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:24px;

}

.volunteerregistration-full{

    grid-column:1/-1;

}

/*==================================
FIELDS
==================================*/

.volunteerregistration-field{

    display:flex;

    flex-direction:column;

}

.volunteerregistration-field label{

    color:#fff;

    margin-bottom:10px;

    font-weight:600;

    font-size:.95rem;

}

.volunteerregistration-field input,

.volunteerregistration-field select,

.volunteerregistration-field textarea{

    width:100%;

    padding:16px 18px;

    border-radius:14px;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.04);

    color:#fff;

    font-size:.95rem;

    outline:none;

    transition:.3s;

}

.volunteerregistration-field textarea{

    resize:vertical;

    min-height:130px;

}

.volunteerregistration-field input::placeholder,

.volunteerregistration-field textarea::placeholder{

    color:#94A3B8;

}

.volunteerregistration-field select{

    appearance:none;

    cursor:pointer;

}

.volunteerregistration-field option{

    color:#111827;

}

.volunteerregistration-field input[type=file]{

    padding:14px;

    cursor:pointer;

}

/*==================================
SUBMIT BUTTON
==================================*/

.volunteerregistration-button{

    width:100%;

    margin-top:35px;

    border:none;

    cursor:pointer;

    padding:18px 28px;

    border-radius:60px;

    font-size:1rem;

    font-weight:700;

    color:#08111F;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:1100px){

.volunteerregistration-wrapper{

grid-template-columns:1fr;

}

.volunteerregistration-info{

position:relative;

top:0;

}

}

@media(max-width:768px){

.volunteerregistration-section{

padding:90px 5%;

}

.volunteerregistration-section .section-heading{

margin-bottom:60px;

}

.volunteerregistration-section .section-heading h2{

font-size:2.3rem;

}

.volunteerregistration-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.volunteerregistration-formbox{

padding:30px 22px;

border-radius:22px;

}

.volunteerregistration-info{

padding:35px 25px;

border-radius:22px;

}

.volunteerregistration-grid{

grid-template-columns:1fr;

gap:18px;

}

.volunteerregistration-full{

grid-column:auto;

}

.volunteerregistration-illustration{

width:95px;

height:95px;

font-size:2.3rem;

}

.volunteerregistration-info h3{

font-size:1.6rem;

}

.volunteerregistration-impact-item{

padding:16px;

}

.volunteerregistration-impact-item h4{

font-size:1.4rem;

}

.volunteerregistration-button{

padding:16px;

font-size:.95rem;

}

}

/* Part - 2 */

/*==================================================
        INFO PANEL
==================================================*/

.volunteerregistration-info{

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;

}

.volunteerregistration-info:hover{

    transform:translateY(-8px);

    border-color:rgba(0,188,212,.18);

    box-shadow:
        0 25px 60px rgba(0,188,212,.15);

}

/*==================================================
        ILLUSTRATION
==================================================*/

.volunteerregistration-illustration{

    position:relative;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

/* Pulse Ring */

.volunteerregistration-illustration::before{

    content:"";

    position:absolute;

    inset:-10px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.15);

    animation:volunteerRegisterPulse 3s ease-out infinite;

}

@keyframes volunteerRegisterPulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.45);

        opacity:0;

    }

}

.volunteerregistration-info:hover .volunteerregistration-illustration{

    transform:rotate(-8deg) scale(1.08);

    box-shadow:
        0 0 40px rgba(0,188,212,.35);

}

/*==================================================
        IMPACT STATS
==================================================*/

.volunteerregistration-impact-item{

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease;

}

.volunteerregistration-impact-item:hover{

    transform:translateX(10px);

    background:rgba(255,255,255,.07);

    border-color:rgba(0,188,212,.20);

}

.volunteerregistration-impact-item h4{

    transition:
        color .35s ease;

}

.volunteerregistration-impact-item:hover h4{

    color:#7ED321;

}

/*==================================================
        FORM FIELDS
==================================================*/

.volunteerregistration-field input,

.volunteerregistration-field select,

.volunteerregistration-field textarea{

    transition:
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;

}

.volunteerregistration-field input:focus,

.volunteerregistration-field select:focus,

.volunteerregistration-field textarea:focus{

    border-color:#00BCD4;

    background:rgba(0,188,212,.05);

    box-shadow:
        0 0 0 4px rgba(0,188,212,.08);

}

/*==================================================
        FILE INPUT
==================================================*/

.volunteerregistration-field input[type=file]{

    border:2px dashed rgba(255,255,255,.12);

    background:rgba(255,255,255,.03);

}

.volunteerregistration-field input[type=file]:hover{

    border-color:#00BCD4;

    background:rgba(0,188,212,.05);

}

/*==================================================
        BUTTON
==================================================*/

.volunteerregistration-button{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

/* Shine Effect */

.volunteerregistration-button::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:50%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.7s;

}

.volunteerregistration-button:hover::before{

    left:150%;

}

.volunteerregistration-button:hover{

    transform:translateY(-4px);

    box-shadow:
        0 18px 45px rgba(0,188,212,.30);

}

/*==================================================
        FLOATING FORM PANEL
==================================================*/

.volunteerregistration-formbox{

    animation:volunteerFormFloat 8s ease-in-out infinite;

}

@keyframes volunteerFormFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

}

/*==================================================
        INPUT LABEL
==================================================*/

.volunteerregistration-field label{

    transition:
        color .3s ease;

}

.volunteerregistration-field:focus-within label{

    color:#00BCD4;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.volunteerregistration-info:hover,

.volunteerregistration-formbox{

animation:none;

transform:none;

box-shadow:none;

}

.volunteerregistration-impact-item:hover{

transform:none;

}

.volunteerregistration-button:hover{

transform:none;

box-shadow:none;

}

.volunteerregistration-info:hover .volunteerregistration-illustration{

transform:scale(1.05);

box-shadow:none;

}

}

/* Volunteer Registration Ends Here */

/* Opputunity Section Starts Here */

/*==================================================
        VOLUNTEER OPPORTUNITIES
==================================================*/

.volunteeropportunity-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.volunteeropportunity-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(130px);

}

.volunteeropportunity-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.volunteeropportunity-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.volunteeropportunity-section .section-heading h2{

    margin:24px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.volunteeropportunity-section .section-heading h2 span{

    color:#00BCD4;

}

.volunteeropportunity-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
GRID
==================================*/

.volunteeropportunity-grid{

    position:relative;

    z-index:5;

    max-width:1250px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

}

/*==================================
CARD
==================================*/

.volunteeropportunity-card{

    position:relative;

    overflow:hidden;

    padding:38px 30px;

    text-align:center;

    border-radius:26px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}

.volunteeropportunity-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

}

.volunteeropportunity-card::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    right:-120px;

    top:-120px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

}

/*==================================
ICON
==================================*/

.volunteeropportunity-icon{

    width:85px;

    height:85px;

    margin:0 auto 26px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    font-size:2.2rem;

}

/*==================================
TEXT
==================================*/

.volunteeropportunity-card h3{

    margin-bottom:15px;

    color:#fff;

    font-size:1.4rem;

    font-weight:700;

    line-height:1.3;

}

.volunteeropportunity-card p{

    margin:0;

    color:#CBD5E1;

    font-size:.95rem;

    line-height:1.9;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.volunteeropportunity-grid{

grid-template-columns:repeat(2,1fr);

gap:22px;

}

}

@media(max-width:768px){

.volunteeropportunity-section{

padding:90px 5%;

}

.volunteeropportunity-section .section-heading{

margin-bottom:60px;

}

.volunteeropportunity-section .section-heading h2{

font-size:2.3rem;

}

.volunteeropportunity-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.volunteeropportunity-grid{

grid-template-columns:1fr;

gap:18px;

}

.volunteeropportunity-card{

padding:30px 24px;

border-radius:22px;

}

.volunteeropportunity-icon{

width:70px;

height:70px;

font-size:1.8rem;

margin-bottom:20px;

}

.volunteeropportunity-card h3{

font-size:1.2rem;

margin-bottom:12px;

}

.volunteeropportunity-card p{

font-size:.92rem;

line-height:1.8;

}

}

/* Part - 2 */

/*==================================================
        OPPORTUNITY CARD
==================================================*/

.volunteeropportunity-card{

    transition:
        transform .4s ease,
        background .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;

}

.volunteeropportunity-card:hover{

    transform:translateY(-10px);

    background:rgba(255,255,255,.07);

    border-color:rgba(0,188,212,.20);

    box-shadow:
        0 25px 60px rgba(0,188,212,.15);

}

/*==================================================
        TOP ACCENT
==================================================*/

.volunteeropportunity-card::before{

    transition:
        height .35s ease,
        opacity .35s ease;

}

.volunteeropportunity-card:hover::before{

    height:6px;

    opacity:1;

}

/*==================================================
        BACKGROUND GLOW
==================================================*/

.volunteeropportunity-card::after{

    transition:
        transform .45s ease,
        opacity .45s ease;

}

.volunteeropportunity-card:hover::after{

    transform:scale(1.4);

    opacity:1;

}

/*==================================================
        ICON
==================================================*/

.volunteeropportunity-icon{

    position:relative;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

/* Pulse Ring */

.volunteeropportunity-icon::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:volunteerOpportunityPulse 3s ease-out infinite;

}

@keyframes volunteerOpportunityPulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.45);

        opacity:0;

    }

}

.volunteeropportunity-card:hover .volunteeropportunity-icon{

    transform:rotate(-8deg) scale(1.08);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.20),

        rgba(126,211,33,.15)

    );

    border-color:rgba(0,188,212,.30);

    box-shadow:
        0 0 32px rgba(0,188,212,.28);

}

/*==================================================
        TITLE
==================================================*/

.volunteeropportunity-card h3{

    transition:
        color .35s ease,
        transform .35s ease;

}

.volunteeropportunity-card:hover h3{

    color:#00BCD4;

    transform:translateY(-3px);

}

/*==================================================
        DESCRIPTION
==================================================*/

.volunteeropportunity-card p{

    transition:
        color .35s ease;

}

.volunteeropportunity-card:hover p{

    color:#E2E8F0;

}

/*==================================================
        FLOATING EFFECT
==================================================*/

.volunteeropportunity-card{

    animation:volunteerOpportunityFloat 8s ease-in-out infinite;

}

.volunteeropportunity-card:nth-child(2){

animation-delay:.6s;

}

.volunteeropportunity-card:nth-child(3){

animation-delay:1.2s;

}

.volunteeropportunity-card:nth-child(4){

animation-delay:1.8s;

}

.volunteeropportunity-card:nth-child(5){

animation-delay:2.4s;

}

.volunteeropportunity-card:nth-child(6){

animation-delay:3s;

}

@keyframes volunteerOpportunityFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

}

/* Pause Float on Hover */

.volunteeropportunity-card:hover{

    animation-play-state:paused;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.volunteeropportunity-card{

animation:none;

}

.volunteeropportunity-card:hover{

transform:none;

box-shadow:none;

}

.volunteeropportunity-card:hover .volunteeropportunity-icon{

transform:scale(1.05);

box-shadow:none;

}

.volunteeropportunity-card:hover h3{

transform:none;

}

}

/* Opputunity Section Ends Here */

/* Gallery Section Starts Here */

/*==================================================
        VOLUNTEER GALLERY
==================================================*/

.volunteergallery-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.volunteergallery-section::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    top:-220px;

    left:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(130px);

}

.volunteergallery-section::after{

    content:"";

    position:absolute;

    width:460px;

    height:460px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.volunteergallery-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.volunteergallery-section .section-heading h2{

    margin:24px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.volunteergallery-section .section-heading h2 span{

    color:#00BCD4;

}

.volunteergallery-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
MASONRY GRID
==================================*/

.volunteergallery-grid{

    position:relative;

    z-index:5;

    max-width:1300px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    grid-auto-rows:220px;

    gap:22px;

}

/*==================================
ITEM
==================================*/

.volunteergallery-item{

    position:relative;

    overflow:hidden;

    border-radius:26px;

    background:#111827;

}

/*==================================
SIZES
==================================*/

.volunteergallery-large{

    grid-column:span 2;

    grid-row:span 2;

}

.volunteergallery-medium{

    grid-column:span 1;

    grid-row:span 2;

}

.volunteergallery-small{

    grid-column:span 1;

    grid-row:span 1;

}

/*==================================
IMAGE
==================================*/

.volunteergallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/*==================================
OVERLAY
==================================*/

.volunteergallery-overlay{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:28px 24px;

    background:linear-gradient(

        180deg,

        transparent,

        rgba(0,0,0,.85)

    );

}

.volunteergallery-overlay h3{

    margin:0;

    color:#fff;

    font-size:1.3rem;

    font-weight:600;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.volunteergallery-grid{

grid-template-columns:repeat(2,1fr);

grid-auto-rows:220px;

}

.volunteergallery-large,

.volunteergallery-medium{

grid-column:span 1;

grid-row:span 1;

}

.volunteergallery-small{

grid-column:span 1;

grid-row:span 1;

}

}

@media(max-width:768px){

.volunteergallery-section{

padding:90px 5%;

}

.volunteergallery-section .section-heading{

margin-bottom:60px;

}

.volunteergallery-section .section-heading h2{

font-size:2.3rem;

}

.volunteergallery-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.volunteergallery-grid{

grid-template-columns:1fr;

grid-auto-rows:250px;

gap:18px;

}

.volunteergallery-large,

.volunteergallery-medium,

.volunteergallery-small{

grid-column:span 1;

grid-row:span 1;

}

.volunteergallery-item{

border-radius:20px;

}

.volunteergallery-overlay{

padding:22px 18px;

}

.volunteergallery-overlay h3{

font-size:1.1rem;

}

}

/* Part - 2 */

/*==================================================
        GALLERY ITEM
==================================================*/

.volunteergallery-item{

    transition:
        transform .45s ease,
        box-shadow .45s ease;

    animation:volunteerGalleryFloat 8s ease-in-out infinite;

}

.volunteergallery-item:hover{

    transform:translateY(-10px);

    box-shadow:
        0 25px 60px rgba(0,188,212,.18);

}

/* Floating Delay */

.volunteergallery-item:nth-child(2){

animation-delay:.6s;

}

.volunteergallery-item:nth-child(3){

animation-delay:1.2s;

}

.volunteergallery-item:nth-child(4){

animation-delay:1.8s;

}

.volunteergallery-item:nth-child(5){

animation-delay:2.4s;

}

@keyframes volunteerGalleryFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

}

.volunteergallery-item:hover{

    animation-play-state:paused;

}

/*==================================================
        IMAGE
==================================================*/

.volunteergallery-item img{

    transition:
        transform .7s ease,
        filter .45s ease;

}

.volunteergallery-item:hover img{

    transform:scale(1.12);

    filter:brightness(.82);

}

/*==================================================
        OVERLAY
==================================================*/

.volunteergallery-overlay{

    transition:
        padding .35s ease,
        background .35s ease;

}

.volunteergallery-item:hover .volunteergallery-overlay{

    padding-bottom:36px;

    background:linear-gradient(

        180deg,

        transparent,

        rgba(5,8,22,.95)

    );

}

/*==================================================
        TITLE
==================================================*/

.volunteergallery-overlay h3{

    position:relative;

    display:inline-block;

    transition:
        color .35s ease,
        transform .35s ease;

}

.volunteergallery-overlay h3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    border-radius:50px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    transition:.35s;

}

.volunteergallery-item:hover .volunteergallery-overlay h3{

    color:#00BCD4;

    transform:translateY(-4px);

}

.volunteergallery-item:hover .volunteergallery-overlay h3::after{

    width:100%;

}

/*==================================================
        SOFT GLOW
==================================================*/

.volunteergallery-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.12),

        transparent 45%,

        rgba(126,211,33,.10)

    );

    opacity:0;

    transition:.45s;

    z-index:1;

    pointer-events:none;

}

.volunteergallery-item:hover::before{

    opacity:1;

}

/*==================================================
        SHINE EFFECT
==================================================*/

.volunteergallery-item::after{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:40%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.28),

        transparent

    );

    transform:skewX(-20deg);

    transition:.8s;

    z-index:2;

}

.volunteergallery-item:hover::after{

    left:150%;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.volunteergallery-item{

animation:none;

}

.volunteergallery-item:hover{

transform:none;

box-shadow:none;

}

.volunteergallery-item:hover img{

transform:scale(1.05);

}

.volunteergallery-item:hover .volunteergallery-overlay{

padding-bottom:22px;

}

.volunteergallery-item:hover .volunteergallery-overlay h3{

transform:none;

}

}

/* Gallery Section Ends Here */

/* Impact Section Starts Here */

/*==================================================
        VOLUNTEER IMPACT
==================================================*/

.volunteerimpact-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.volunteerimpact-section::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    top:-220px;

    left:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(130px);

}

.volunteerimpact-section::after{

    content:"";

    position:absolute;

    width:460px;

    height:460px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.volunteerimpact-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.volunteerimpact-section .section-heading h2{

    margin:24px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.volunteerimpact-section .section-heading h2 span{

    color:#00BCD4;

}

.volunteerimpact-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
WRAPPER
==================================*/

.volunteerimpact-wrapper{

    position:relative;

    z-index:5;

    max-width:900px;

    margin:auto;

}

/*==================================
ITEM
==================================*/

.volunteerimpact-item{

    text-align:center;

    padding:38px 0;

}

/*==================================
NUMBER
==================================*/

.volunteerimpact-item h3{

    margin:0;

    color:#00BCD4;

    font-size:5rem;

    font-weight:800;

    line-height:1;

    letter-spacing:-2px;

}

/*==================================
TITLE
==================================*/

.volunteerimpact-item h4{

    margin:18px 0 0;

    color:#fff;

    font-size:1.45rem;

    font-weight:500;

    letter-spacing:.5px;

}

/*==================================
DIVIDER
==================================*/

.volunteerimpact-divider{

    width:220px;

    height:2px;

    margin:auto;

    background:linear-gradient(

        90deg,

        transparent,

        #00BCD4,

        #7ED321,

        transparent

    );

    opacity:.8;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:768px){

.volunteerimpact-section{

padding:90px 5%;

}

.volunteerimpact-section .section-heading{

margin-bottom:60px;

}

.volunteerimpact-section .section-heading h2{

font-size:2.3rem;

}

.volunteerimpact-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.volunteerimpact-item{

padding:30px 0;

}

.volunteerimpact-item h3{

font-size:3.4rem;

}

.volunteerimpact-item h4{

font-size:1.1rem;

margin-top:14px;

}

.volunteerimpact-divider{

width:150px;

}

}

/* Part - 2 */

/*==================================================
        IMPACT ITEM
==================================================*/

.volunteerimpact-item{

    transition:
        transform .4s ease;

}

.volunteerimpact-item:hover{

    transform:translateY(-8px);

}

/*==================================================
        NUMBER
==================================================*/

.volunteerimpact-item h3{

    position:relative;

    display:inline-block;

    transition:
        color .35s ease,
        transform .35s ease,
        text-shadow .35s ease;

}

/* Glow Behind Number */

.volunteerimpact-item h3::before{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:150px;

    height:150px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,188,212,.18),

        transparent 70%

    );

    filter:blur(28px);

    opacity:0;

    transition:.4s;

    z-index:-1;

}

.volunteerimpact-item:hover h3{

    color:#7ED321;

    transform:scale(1.06);

    text-shadow:

        0 0 28px rgba(0,188,212,.35);

}

.volunteerimpact-item:hover h3::before{

    opacity:1;

}

/*==================================================
        TITLE
==================================================*/

.volunteerimpact-item h4{

    transition:
        color .35s ease,
        letter-spacing .35s ease;

}

.volunteerimpact-item:hover h4{

    color:#00BCD4;

    letter-spacing:.6px;

}

/*==================================================
        DIVIDER
==================================================*/

.volunteerimpact-divider{

    position:relative;

    overflow:hidden;

}

.volunteerimpact-divider::before{

    content:"";

    position:absolute;

    top:0;

    left:-45%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.9),

        transparent

    );

    animation:volunteerImpactLine 2.8s linear infinite;

}

@keyframes volunteerImpactLine{

    from{

        left:-45%;

    }

    to{

        left:120%;

    }

}

/*==================================================
        FLOATING EFFECT
==================================================*/

.volunteerimpact-item{

    animation:volunteerImpactFloat 8s ease-in-out infinite;

}

.volunteerimpact-item:nth-child(1){

animation-delay:0s;

}

.volunteerimpact-item:nth-child(3){

animation-delay:.7s;

}

.volunteerimpact-item:nth-child(5){

animation-delay:1.4s;

}

.volunteerimpact-item:nth-child(7){

animation-delay:2.1s;

}

@keyframes volunteerImpactFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-5px);

    }

}

/* Pause Float on Hover */

.volunteerimpact-item:hover{

    animation-play-state:paused;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.volunteerimpact-item{

animation:none;

}

.volunteerimpact-item:hover{

transform:none;

}

.volunteerimpact-item:hover h3{

transform:scale(1.03);

text-shadow:none;

}

.volunteerimpact-item:hover h4{

letter-spacing:0;

}

}

/* Impact Section Ends Here */

/* Testimonials Section Starts Here */

/*==================================================
        VOLUNTEER TESTIMONIALS
==================================================*/

.volunteertestimonial-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.volunteertestimonial-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(130px);

}

.volunteertestimonial-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.volunteertestimonial-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.volunteertestimonial-section .section-heading h2{

    margin:24px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.volunteertestimonial-section .section-heading h2 span{

    color:#00BCD4;

}

.volunteertestimonial-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
SLIDER
==================================*/

.volunteertestimonial-slider{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:auto;

    min-height:520px;

}

/*==================================
ITEM
==================================*/

.volunteertestimonial-item{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:55px 45px;

    border-radius:30px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.5s ease;

}

.volunteertestimonial-item.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

/*==================================
QUOTE
==================================*/

.volunteertestimonial-quote{

    font-size:7rem;

    font-weight:700;

    color:#00BCD4;

    line-height:.6;

    margin-bottom:20px;

    font-family:Georgia,serif;

}

/*==================================
PHOTO
==================================*/

.volunteertestimonial-photo{

    width:120px;

    height:120px;

    margin-bottom:25px;

    border-radius:50%;

    overflow:hidden;

    border:4px solid rgba(0,188,212,.18);

}

.volunteertestimonial-photo img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/*==================================
NAME
==================================*/

.volunteertestimonial-item h3{

    margin:0 0 10px;

    color:#fff;

    font-size:1.7rem;

    font-weight:700;

}

/*==================================
ROLE
==================================*/

.volunteertestimonial-item span{

    display:inline-block;

    margin-bottom:24px;

    color:#00BCD4;

    font-size:1rem;

    font-weight:600;

}

/*==================================
TEXT
==================================*/

.volunteertestimonial-item p{

    max-width:650px;

    margin:0;

    color:#CBD5E1;

    font-size:1rem;

    line-height:2;

}

/*==================================
NAVIGATION
==================================*/

.volunteertestimonial-navigation{

    position:relative;

    z-index:5;

    display:flex;

    justify-content:center;

    gap:18px;

    margin-top:45px;

}

.volunteertestimonial-navigation button{

    width:56px;

    height:56px;

    border:none;

    cursor:pointer;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:#fff;

    font-size:1rem;

    backdrop-filter:blur(12px);

    transition:.35s ease;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:768px){

.volunteertestimonial-section{

padding:90px 5%;

}

.volunteertestimonial-section .section-heading{

margin-bottom:60px;

}

.volunteertestimonial-section .section-heading h2{

font-size:2.3rem;

}

.volunteertestimonial-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.volunteertestimonial-slider{

min-height:580px;

}

.volunteertestimonial-item{

padding:40px 25px;

border-radius:22px;

}

.volunteertestimonial-quote{

font-size:5rem;

margin-bottom:16px;

}

.volunteertestimonial-photo{

width:90px;

height:90px;

margin-bottom:20px;

}

.volunteertestimonial-item h3{

font-size:1.4rem;

}

.volunteertestimonial-item span{

font-size:.9rem;

margin-bottom:18px;

}

.volunteertestimonial-item p{

font-size:.92rem;

line-height:1.8;

}

.volunteertestimonial-navigation{

margin-top:35px;

}

.volunteertestimonial-navigation button{

width:48px;

height:48px;

}

}

/* Part - 2 */

/*==================================================
        TESTIMONIAL CARD
==================================================*/

.volunteertestimonial-item{

    transition:
        opacity .5s ease,
        transform .5s ease,
        border-color .4s ease,
        box-shadow .4s ease;

}

.volunteertestimonial-item.active{

    box-shadow:
        0 25px 60px rgba(0,188,212,.12);

    border-color:rgba(0,188,212,.15);

}

/*==================================================
        QUOTATION MARK
==================================================*/

.volunteertestimonial-quote{

    position:relative;

    animation:volunteerQuoteFloat 4s ease-in-out infinite;

}

@keyframes volunteerQuoteFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

/*==================================================
        PHOTO
==================================================*/

.volunteertestimonial-photo{

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.volunteertestimonial-item:hover .volunteertestimonial-photo{

    transform:scale(1.08);

    border-color:#00BCD4;

    box-shadow:
        0 0 30px rgba(0,188,212,.30);

}

/*==================================================
        NAME
==================================================*/

.volunteertestimonial-item h3{

    transition:
        color .35s ease,
        transform .35s ease;

}

.volunteertestimonial-item:hover h3{

    color:#00BCD4;

    transform:translateY(-2px);

}

/*==================================================
        ROLE
==================================================*/

.volunteertestimonial-item span{

    transition:
        letter-spacing .35s ease;

}

.volunteertestimonial-item:hover span{

    letter-spacing:1px;

}

/*==================================================
        TEXT
==================================================*/

.volunteertestimonial-item p{

    transition:
        color .35s ease;

}

.volunteertestimonial-item:hover p{

    color:#E2E8F0;

}

/*==================================================
        NAVIGATION BUTTONS
==================================================*/

.volunteertestimonial-navigation button{

    position:relative;

    overflow:hidden;

}

.volunteertestimonial-navigation button::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:50%;

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.20),

        rgba(126,211,33,.15)

    );

    opacity:0;

    transition:.35s;

}

.volunteertestimonial-navigation button i{

    position:relative;

    z-index:2;

}

.volunteertestimonial-navigation button:hover{

    transform:translateY(-4px);

    border-color:rgba(0,188,212,.25);

    box-shadow:
        0 12px 30px rgba(0,188,212,.22);

}

.volunteertestimonial-navigation button:hover::before{

    opacity:1;

}

/*==================================================
        FADE ANIMATION
==================================================*/

.volunteertestimonial-item.active{

    animation:volunteerTestimonialFade .55s ease;

}

@keyframes volunteerTestimonialFade{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.volunteertestimonial-item:hover .volunteertestimonial-photo{

transform:scale(1.04);

box-shadow:none;

}

.volunteertestimonial-navigation button:hover{

transform:none;

box-shadow:none;

}

.volunteertestimonial-item:hover h3{

transform:none;

}

}

/* Testimonials Section Ends Here */

/* FAQ Section Starts Here */

/*==================================================
        VOLUNTEER FAQ
==================================================*/

.volunteerfaq-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.volunteerfaq-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(130px);

}

.volunteerfaq-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.volunteerfaq-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.volunteerfaq-section .section-heading h2{

    margin:24px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.volunteerfaq-section .section-heading h2 span{

    color:#00BCD4;

}

.volunteerfaq-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
FAQ WRAPPER
==================================*/

.volunteerfaq-wrapper{

    position:relative;

    z-index:5;

    max-width:950px;

    margin:auto;

}

/*==================================
FAQ ITEM
==================================*/

.volunteerfaq-item{

    border-bottom:1px solid rgba(255,255,255,.10);

}

/*==================================
QUESTION
==================================*/

.volunteerfaq-question{

    width:100%;

    padding:28px 0;

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:none;

    border:none;

    cursor:pointer;

    text-align:left;

}

/*==================================
LEFT
==================================*/

.volunteerfaq-left{

    display:flex;

    align-items:center;

    gap:20px;

}

/*==================================
ICON
==================================*/

.volunteerfaq-icon{

    width:54px;

    height:54px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    font-size:1.35rem;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

}

/*==================================
TITLE
==================================*/

.volunteerfaq-question h4{

    margin:0;

    color:#fff;

    font-size:1.18rem;

    font-weight:600;

    line-height:1.5;

}

/*==================================
TOGGLE
==================================*/

.volunteerfaq-toggle{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:#00BCD4;

    font-size:1.5rem;

    font-weight:600;

    flex-shrink:0;

}

/*==================================
ANSWER
==================================*/

.volunteerfaq-answer{

    max-height:0;

    overflow:hidden;

    opacity:0;

    transition:
        max-height .45s ease,
        opacity .35s ease;

}

.volunteerfaq-answer p{

    margin:0;

    padding:
        0
        0
        28px
        74px;

    color:#CBD5E1;

    font-size:.96rem;

    line-height:1.9;

}

/*==================================
ACTIVE
==================================*/

.volunteerfaq-item.active .volunteerfaq-answer{

    max-height:220px;

    opacity:1;

}

.volunteerfaq-item.active .volunteerfaq-toggle{

    background:#00BCD4;

    color:#fff;

    border-color:#00BCD4;

    font-size:0;

}

.volunteerfaq-item.active .volunteerfaq-toggle::before{

    content:"−";

    font-size:1.5rem;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:768px){

.volunteerfaq-section{

padding:90px 5%;

}

.volunteerfaq-section .section-heading{

margin-bottom:60px;

}

.volunteerfaq-section .section-heading h2{

font-size:2.3rem;

}

.volunteerfaq-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.volunteerfaq-question{

padding:22px 0;

}

.volunteerfaq-left{

gap:15px;

align-items:flex-start;

}

.volunteerfaq-icon{

width:46px;

height:46px;

font-size:1.1rem;

}

.volunteerfaq-question h4{

font-size:1rem;

}

.volunteerfaq-toggle{

width:36px;

height:36px;

font-size:1.2rem;

}

.volunteerfaq-answer p{

padding:
0
0
22px
60px;

font-size:.92rem;

line-height:1.8;

}

}

/* Part - 2 */

/*==================================================
        FAQ ITEM
==================================================*/

.volunteerfaq-item{

    position:relative;

    transition:
        border-color .35s ease;

}

.volunteerfaq-item:hover{

    border-bottom-color:rgba(0,188,212,.20);

}

/* Animated Bottom Line */

.volunteerfaq-item::before{

    content:"";

    position:absolute;

    left:0;

    bottom:-1px;

    width:0;

    height:2px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    transition:width .4s ease;

}

.volunteerfaq-item:hover::before,

.volunteerfaq-item.active::before{

    width:100%;

}

/*==================================================
        ICON
==================================================*/

.volunteerfaq-icon{

    position:relative;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

/* Pulse Ring */

.volunteerfaq-icon::after{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:volunteerFaqPulse 3s ease-out infinite;

}

@keyframes volunteerFaqPulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.45);

        opacity:0;

    }

}

.volunteerfaq-item:hover .volunteerfaq-icon{

    transform:rotate(-10deg) scale(1.08);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.18),

        rgba(126,211,33,.15)

    );

    border-color:rgba(0,188,212,.28);

    box-shadow:
        0 0 28px rgba(0,188,212,.25);

}

/*==================================================
        QUESTION
==================================================*/

.volunteerfaq-question h4{

    transition:
        color .35s ease,
        transform .35s ease;

}

.volunteerfaq-item:hover h4{

    color:#00BCD4;

    transform:translateX(6px);

}

.volunteerfaq-item.active h4{

    color:#00BCD4;

}

/*==================================================
        TOGGLE
==================================================*/

.volunteerfaq-toggle{

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.volunteerfaq-item:hover .volunteerfaq-toggle{

    transform:rotate(90deg);

    background:rgba(0,188,212,.08);

    border-color:rgba(0,188,212,.20);

    box-shadow:
        0 0 18px rgba(0,188,212,.18);

}

.volunteerfaq-item.active .volunteerfaq-toggle{

    transform:rotate(180deg);

}

/*==================================================
        ANSWER
==================================================*/

.volunteerfaq-answer p{

    transition:color .35s ease;

}

.volunteerfaq-item:hover .volunteerfaq-answer p{

    color:#E2E8F0;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.volunteerfaq-item:hover h4{

transform:none;

}

.volunteerfaq-item:hover .volunteerfaq-toggle{

transform:none;

box-shadow:none;

}

.volunteerfaq-item:hover .volunteerfaq-icon{

transform:scale(1.05);

}

}

/* FAQ Section Ends Here */

/* CTA Section Starts Here */

/*==================================================
        VOLUNTEER CTA
==================================================*/

.volunteercta-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

/*==================================
BACKGROUND GLOWS
==================================*/

.volunteercta-section::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,188,212,.14),

        transparent 70%

    );

    filter:blur(120px);

}

.volunteercta-section::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);

    background-size:40px 40px;

    opacity:.45;

}

/*==================================
GLASS PANEL
==================================*/

.volunteercta-panel{

    position:relative;

    z-index:5;

    max-width:980px;

    margin:auto;

    padding:70px 60px;

    text-align:center;

    border-radius:35px;

    overflow:hidden;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(18px);

}

.volunteercta-panel::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        135deg,

        rgba(255,255,255,.05),

        transparent 45%,

        rgba(0,188,212,.04)

    );

    pointer-events:none;

}

/*==================================
BADGE
==================================*/

.volunteercta-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    margin-bottom:28px;

    border-radius:60px;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-size:.95rem;

    font-weight:600;

    letter-spacing:.5px;

}

/*==================================
HEADING
==================================*/

.volunteercta-panel h2{

    margin:0 0 25px;

    color:#fff;

    font-size:3.4rem;

    line-height:1.2;

    font-weight:800;

}

.volunteercta-panel h2 span{

    display:block;

    color:#00BCD4;

}

/*==================================
CONTENT
==================================*/

.volunteercta-panel p{

    max-width:720px;

    margin:0 auto 45px;

    color:#CBD5E1;

    font-size:1rem;

    line-height:2;

}

/*==================================
BUTTONS
==================================*/

.volunteercta-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

}

/*==================================
BUTTON
==================================*/

.volunteercta-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:17px 34px;

    border-radius:60px;

    text-decoration:none;

    font-size:.96rem;

    font-weight:600;

    transition:.35s;

}

/* Primary */

.volunteercta-primary{

    color:#08111F;

    background:linear-gradient(

        135deg,

        #00BCD4,

        #7ED321

    );

}

/* Secondary */

.volunteercta-secondary{

    color:#fff;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(12px);

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:768px){

.volunteercta-section{

padding:90px 5%;

}

.volunteercta-panel{

padding:45px 25px;

border-radius:24px;

}

.volunteercta-badge{

font-size:.85rem;

padding:10px 18px;

margin-bottom:22px;

}

.volunteercta-panel h2{

font-size:2.3rem;

}

.volunteercta-panel p{

font-size:.95rem;

line-height:1.8;

margin-bottom:35px;

}

.volunteercta-buttons{

flex-direction:column;

gap:15px;

}

.volunteercta-button{

width:100%;

padding:16px;

font-size:.94rem;

}

}

/* Part - 2 */

/*==================================================
        CTA PANEL
==================================================*/

.volunteercta-panel{

    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;

    animation:volunteerCtaFloat 8s ease-in-out infinite;

}

@keyframes volunteerCtaFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

.volunteercta-panel:hover{

    border-color:rgba(0,188,212,.22);

    box-shadow:
        0 30px 80px rgba(0,188,212,.18);

}

/*==================================================
        BACKGROUND GLOW
==================================================*/

.volunteercta-section::before{

    animation:volunteerCtaGlow 8s ease-in-out infinite;

}

@keyframes volunteerCtaGlow{

    0%,100%{

        transform:translate(-50%,-50%) scale(1);

        opacity:.6;

    }

    50%{

        transform:translate(-50%,-50%) scale(1.15);

        opacity:1;

    }

}

/*==================================================
        BADGE
==================================================*/

.volunteercta-badge{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.volunteercta-badge::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-20deg);

    transition:.7s;

}

.volunteercta-badge:hover{

    transform:translateY(-3px);

    box-shadow:
        0 0 25px rgba(0,188,212,.20);

}

.volunteercta-badge:hover::before{

    left:150%;

}

/*==================================================
        HEADING
==================================================*/

.volunteercta-panel h2 span{

    animation:volunteerHeadingGlow 3s ease-in-out infinite;

}

@keyframes volunteerHeadingGlow{

    0%,100%{

        text-shadow:none;

    }

    50%{

        text-shadow:
            0 0 20px rgba(0,188,212,.45);

    }

}

/*==================================================
        BUTTONS
==================================================*/

.volunteercta-button{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

/* Shine Effect */

.volunteercta-button::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.volunteercta-button:hover::before{

    left:150%;

}

/* Primary */

.volunteercta-primary:hover{

    transform:translateY(-5px);

    box-shadow:
        0 18px 45px rgba(0,188,212,.32);

}

/* Secondary */

.volunteercta-secondary:hover{

    transform:translateY(-5px);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.16),

        rgba(126,211,33,.12)

    );

    border-color:rgba(0,188,212,.25);

    box-shadow:
        0 18px 40px rgba(0,188,212,.18);

}

/*==================================================
        GRID BACKGROUND
==================================================*/

.volunteercta-section::after{

    animation:volunteerGridMove 20s linear infinite;

}

@keyframes volunteerGridMove{

    from{

        background-position:0 0,0 0;

    }

    to{

        background-position:40px 40px,40px 40px;

    }

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.volunteercta-panel{

animation:none;

}

.volunteercta-panel:hover{

transform:none;

box-shadow:none;

}

.volunteercta-badge:hover{

transform:none;

box-shadow:none;

}

.volunteercta-primary:hover,

.volunteercta-secondary:hover{

transform:none;

box-shadow:none;

}

}

/* CTA Section Ends Here */

/* Become Volunteer Page Ends Here */

/* Career Page Starts Here */

/* Hero Section Starts Here */

/*==================================================
        CAREER HERO
==================================================*/

.careerhero-section{

    position:relative;

    overflow:hidden;

    min-height:100vh;

    padding:170px 5% 120px;

    display:flex;

    align-items:center;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

/*==================================
BACKGROUND GLOW
==================================*/

.careerhero-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    pointer-events:none;

}

.careerhero-glow-left{

    width:520px;

    height:520px;

    left:-180px;

    top:-180px;

    background:rgba(0,188,212,.12);

}

.careerhero-glow-right{

    width:460px;

    height:460px;

    right:-150px;

    bottom:-150px;

    background:rgba(126,211,33,.10);

}

/*==================================
DOTTED CONNECTIONS
==================================*/

.careerhero-connections{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.careerhero-connections span{

    position:absolute;

    border-top:2px dashed rgba(255,255,255,.08);

}

.careerhero-connections span:nth-child(1){

top:18%;

left:8%;

width:220px;

transform:rotate(18deg);

}

.careerhero-connections span:nth-child(2){

top:32%;

right:10%;

width:180px;

transform:rotate(-20deg);

}

.careerhero-connections span:nth-child(3){

bottom:22%;

left:18%;

width:260px;

transform:rotate(-8deg);

}

.careerhero-connections span:nth-child(4){

bottom:18%;

right:18%;

width:200px;

transform:rotate(14deg);

}

/*==================================
FLOATING ICONS
==================================*/

.careerhero-floating-icons{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.careerhero-floating-icons i{

    position:absolute;

    color:rgba(255,255,255,.10);

    font-size:1.9rem;

}

.careerhero-icon-one{

top:20%;

left:8%;

}

.careerhero-icon-two{

top:18%;

right:12%;

}

.careerhero-icon-three{

top:55%;

left:12%;

}

.careerhero-icon-four{

bottom:18%;

right:18%;

}

.careerhero-icon-five{

bottom:22%;

left:45%;

}

/*==================================
ABSTRACT SHAPES
==================================*/

.careerhero-shapes{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.careerhero-shape{

    position:absolute;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.02);

    backdrop-filter:blur(10px);

}

.careerhero-square{

    width:70px;

    height:70px;

    top:16%;

    left:42%;

    transform:rotate(15deg);

}

.careerhero-circle{

    width:60px;

    height:60px;

    border-radius:50%;

    bottom:18%;

    left:8%;

}

.careerhero-triangle{

    width:0;

    height:0;

    border-left:35px solid transparent;

    border-right:35px solid transparent;

    border-bottom:60px solid rgba(255,255,255,.04);

    border-top:none;

    right:14%;

    top:42%;

    background:none;

}

.careerhero-diamond{

    width:55px;

    height:55px;

    right:36%;

    bottom:14%;

    transform:rotate(45deg);

}

/*==================================
LAYOUT
==================================*/

.careerhero-wrapper{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:70px;

    align-items:center;

}

/*==================================
BREADCRUMB
==================================*/

.careerhero-breadcrumb{

    position:relative;

    z-index:5;

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 22px;

    margin-bottom:45px;

    border-radius:60px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(14px);

}

.careerhero-breadcrumb a{

    color:#CBD5E1;

    text-decoration:none;

}

.careerhero-breadcrumb span{

    color:#00BCD4;

}

/*==================================
CONTENT
==================================*/

.careerhero-content{

    position:relative;

}

.careerhero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    margin-bottom:28px;

    border-radius:60px;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-weight:600;

}

.careerhero-content h1{

    margin-bottom:28px;

    color:#fff;

    font-size:4.4rem;

    line-height:1.08;

    font-weight:800;

}

.careerhero-content h1 span{

    display:block;

    color:#00BCD4;

}

.careerhero-content p{

    max-width:620px;

    margin-bottom:42px;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
BUTTONS
==================================*/

.careerhero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.careerhero-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:60px;

    text-decoration:none;

    font-size:.95rem;

    font-weight:600;

}

.careerhero-primary{

    color:#08111F;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

}

.careerhero-secondary{

    color:#fff;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(12px);

}

/*==================================
VISUAL
==================================*/

.careerhero-visual{

    display:flex;

    justify-content:center;

    align-items:center;

}

.careerhero-orbit{

    position:relative;

    width:420px;

    height:420px;

    border-radius:50%;

    border:2px dashed rgba(255,255,255,.10);

}

.careerhero-center{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:130px;

    height:130px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    color:#08111F;

    font-size:3rem;

    box-shadow:0 0 40px rgba(0,188,212,.28);

}

.careerhero-node{

    position:absolute;

    width:65px;

    height:65px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(12px);

    color:#fff;

}

.careerhero-node1{

top:-18px;

left:50%;

transform:translateX(-50%);

}

.careerhero-node2{

right:-18px;

top:50%;

transform:translateY(-50%);

}

.careerhero-node3{

bottom:-18px;

left:50%;

transform:translateX(-50%);

}

.careerhero-node4{

left:-18px;

top:50%;

transform:translateY(-50%);

}

.careerhero-svg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

}

.careerhero-svg circle{

    stroke:rgba(0,188,212,.15);

    stroke-width:2;

    stroke-dasharray:8 10;

}

/*==================================
SCROLL
==================================*/

.careerhero-scroll{

    position:absolute;

    left:50%;

    bottom:30px;

    transform:translateX(-50%);

    text-align:center;

    color:#CBD5E1;

    z-index:5;

}

.careerhero-scroll-mouse{

    width:28px;

    height:48px;

    margin:10px auto 0;

    border:2px solid rgba(255,255,255,.18);

    border-radius:20px;

    display:flex;

    justify-content:center;

}

.careerhero-scroll-dot{

    width:5px;

    height:10px;

    margin-top:8px;

    border-radius:20px;

    background:#00BCD4;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.careerhero-wrapper{

grid-template-columns:1fr;

text-align:center;

gap:60px;

}

.careerhero-content p{

margin:auto auto 40px;

}

.careerhero-buttons{

justify-content:center;

}

}

@media(max-width:768px){

.careerhero-section{

padding:140px 5% 100px;

min-height:auto;

}

.careerhero-content h1{

font-size:2.8rem;

}

.careerhero-content p{

font-size:.95rem;

line-height:1.8;

}

.careerhero-orbit{

width:290px;

height:290px;

}

.careerhero-center{

width:95px;

height:95px;

font-size:2.2rem;

}

.careerhero-node{

width:48px;

height:48px;

font-size:1rem;

}

.careerhero-buttons{

flex-direction:column;

}

.careerhero-button{

width:100%;

}

.careerhero-breadcrumb{

font-size:.9rem;

}

}

/* Part - 2 */

/*==================================================
        HERO CONTENT
==================================================*/

.careerhero-content{

    animation:careerHeroFadeLeft 1s ease;

}

.careerhero-visual{

    animation:careerHeroFadeRight 1s ease;

}

@keyframes careerHeroFadeLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes careerHeroFadeRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*==================================================
        BACKGROUND GLOWS
==================================================*/

.careerhero-glow{

    animation:careerHeroGlow 8s ease-in-out infinite;

}

.careerhero-glow-right{

    animation-delay:4s;

}

@keyframes careerHeroGlow{

    0%,100%{

        transform:scale(1);

        opacity:.6;

    }

    50%{

        transform:scale(1.18);

        opacity:1;

    }

}

/*==================================================
        DOTTED CONNECTIONS
==================================================*/

.careerhero-connections span{

    animation:careerHeroConnections 5s linear infinite;

}

@keyframes careerHeroConnections{

    from{

        border-top-color:rgba(255,255,255,.05);

    }

    50%{

        border-top-color:rgba(0,188,212,.22);

    }

    to{

        border-top-color:rgba(255,255,255,.05);

    }

}

/*==================================================
        FLOATING CAREER ICONS
==================================================*/

.careerhero-floating-icons i{

    animation:careerHeroIconFloat 6s ease-in-out infinite;

}

.careerhero-icon-two{

animation-delay:.8s;

}

.careerhero-icon-three{

animation-delay:1.6s;

}

.careerhero-icon-four{

animation-delay:2.4s;

}

.careerhero-icon-five{

animation-delay:3.2s;

}

@keyframes careerHeroIconFloat{

    0%,100%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(-16px) rotate(8deg);

    }

}

/*==================================================
        ABSTRACT SHAPES
==================================================*/

.careerhero-shape{

    animation:careerHeroShapeFloat 8s ease-in-out infinite;

}

.careerhero-circle{

animation-delay:1s;

}

.careerhero-square{

animation-delay:2s;

}

.careerhero-triangle{

animation-delay:3s;

}

.careerhero-diamond{

animation-delay:4s;

}

@keyframes careerHeroShapeFloat{

    0%,100%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(-14px) rotate(12deg);

    }

}

/*==================================================
        BADGE
==================================================*/

.careerhero-badge{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.careerhero-badge::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:55%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform:skewX(-25deg);

    transition:.8s;

}

.careerhero-badge:hover{

    transform:translateY(-3px);

    box-shadow:0 0 25px rgba(0,188,212,.25);

}

.careerhero-badge:hover::before{

    left:150%;

}

/*==================================================
        BUTTONS
==================================================*/

.careerhero-button{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.careerhero-button::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:50%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform:skewX(-25deg);

    transition:.7s;

}

.careerhero-button:hover::before{

    left:150%;

}

.careerhero-primary:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 42px rgba(0,188,212,.30);

}

.careerhero-secondary:hover{

    transform:translateY(-5px);

    background:linear-gradient(
        135deg,
        rgba(0,188,212,.18),
        rgba(126,211,33,.15)
    );

    border-color:rgba(0,188,212,.25);

    box-shadow:0 18px 40px rgba(0,188,212,.18);

}

/*==================================================
        ORBIT
==================================================*/

.careerhero-orbit{

    animation:careerHeroOrbit 28s linear infinite;

}

@keyframes careerHeroOrbit{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.careerhero-center{

    animation:careerHeroCenterPulse 3s ease-in-out infinite;

}

@keyframes careerHeroCenterPulse{

    0%,100%{

        transform:translate(-50%,-50%) scale(1);

    }

    50%{

        transform:translate(-50%,-50%) scale(1.08);

    }

}

/* Keep Icons Upright */

.careerhero-node{

    animation:careerHeroNodeRotate 28s linear infinite reverse;

}

@keyframes careerHeroNodeRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(-360deg);

    }

}

/*==================================================
        SCROLL INDICATOR
==================================================*/

.careerhero-scroll-dot{

    animation:careerHeroScroll 1.8s infinite;

}

@keyframes careerHeroScroll{

    0%{

        transform:translateY(0);

        opacity:1;

    }

    100%{

        transform:translateY(18px);

        opacity:0;

    }

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.careerhero-orbit{

animation-duration:40s;

}

.careerhero-button:hover{

transform:none;

box-shadow:none;

}

.careerhero-badge:hover{

transform:none;

box-shadow:none;

}

.careerhero-glow{

animation-duration:10s;

}

}

/* Hero Section Ends Here */

/* Why Work Section Starts Here */

/*==================================================
        CAREER BENEFITS
==================================================*/

.careerbenefits-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.careerbenefits-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(130px);

}

.careerbenefits-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.careerbenefits-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.careerbenefits-section .section-heading h2{

    margin:24px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.careerbenefits-section .section-heading h2 span{

    color:#00BCD4;

}

.careerbenefits-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
GRID
==================================*/

.careerbenefits-grid{

    position:relative;

    z-index:5;

    max-width:1280px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

}

/*==================================
CARD
==================================*/

.careerbenefits-card{

    position:relative;

    overflow:hidden;

    padding:38px 32px;

    border-radius:26px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}

.careerbenefits-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

}

.careerbenefits-card::after{

    content:"";

    position:absolute;

    top:-120px;

    right:-120px;

    width:220px;

    height:220px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,188,212,.08),

        transparent 70%

    );

}

/*==================================
ICON
==================================*/

.careerbenefits-icon{

    width:82px;

    height:82px;

    margin-bottom:26px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    font-size:2rem;

}

/*==================================
TEXT
==================================*/

.careerbenefits-card h3{

    margin-bottom:15px;

    color:#fff;

    font-size:1.45rem;

    font-weight:700;

    line-height:1.3;

}

.careerbenefits-card p{

    margin:0;

    color:#CBD5E1;

    font-size:.96rem;

    line-height:1.9;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.careerbenefits-grid{

grid-template-columns:repeat(2,1fr);

gap:22px;

}

}

@media(max-width:768px){

.careerbenefits-section{

padding:90px 5%;

}

.careerbenefits-section .section-heading{

margin-bottom:60px;

}

.careerbenefits-section .section-heading h2{

font-size:2.3rem;

}

.careerbenefits-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.careerbenefits-grid{

grid-template-columns:1fr;

gap:18px;

}

.careerbenefits-card{

padding:30px 24px;

border-radius:22px;

}

.careerbenefits-icon{

width:70px;

height:70px;

margin-bottom:20px;

font-size:1.8rem;

}

.careerbenefits-card h3{

font-size:1.2rem;

margin-bottom:12px;

}

.careerbenefits-card p{

font-size:.92rem;

line-height:1.8;

}

}

/* Part - 2 */

/*==================================================
        BENEFITS CARD
==================================================*/

.careerbenefits-card{

    transition:
        transform .4s ease,
        background .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;

}

.careerbenefits-card:hover{

    transform:translateY(-10px);

    background:rgba(255,255,255,.07);

    border-color:rgba(0,188,212,.20);

    box-shadow:
        0 25px 60px rgba(0,188,212,.15);

}

/*==================================================
        TOP ACCENT
==================================================*/

.careerbenefits-card::before{

    transition:
        height .35s ease,
        opacity .35s ease;

}

.careerbenefits-card:hover::before{

    height:6px;

    opacity:1;

}

/*==================================================
        BACKGROUND GLOW
==================================================*/

.careerbenefits-card::after{

    transition:
        transform .45s ease,
        opacity .45s ease;

}

.careerbenefits-card:hover::after{

    transform:scale(1.4);

    opacity:1;

}

/*==================================================
        ICON
==================================================*/

.careerbenefits-icon{

    position:relative;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

/* Pulse Ring */

.careerbenefits-icon::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:careerBenefitsPulse 3s ease-out infinite;

}

@keyframes careerBenefitsPulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.45);

        opacity:0;

    }

}

.careerbenefits-card:hover .careerbenefits-icon{

    transform:rotate(-8deg) scale(1.08);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.20),

        rgba(126,211,33,.16)

    );

    border-color:rgba(0,188,212,.30);

    box-shadow:
        0 0 30px rgba(0,188,212,.28);

}

/*==================================================
        TITLE
==================================================*/

.careerbenefits-card h3{

    transition:
        color .35s ease,
        transform .35s ease;

}

.careerbenefits-card:hover h3{

    color:#00BCD4;

    transform:translateY(-3px);

}

/*==================================================
        DESCRIPTION
==================================================*/

.careerbenefits-card p{

    transition:
        color .35s ease;

}

.careerbenefits-card:hover p{

    color:#E2E8F0;

}

/*==================================================
        FLOATING EFFECT
==================================================*/

.careerbenefits-card{

    animation:careerBenefitsFloat 8s ease-in-out infinite;

}

.careerbenefits-card:nth-child(2){

animation-delay:.6s;

}

.careerbenefits-card:nth-child(3){

animation-delay:1.2s;

}

.careerbenefits-card:nth-child(4){

animation-delay:1.8s;

}

.careerbenefits-card:nth-child(5){

animation-delay:2.4s;

}

.careerbenefits-card:nth-child(6){

animation-delay:3s;

}

@keyframes careerBenefitsFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

}

/* Pause Floating While Hovering */

.careerbenefits-card:hover{

    animation-play-state:paused;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.careerbenefits-card{

animation:none;

}

.careerbenefits-card:hover{

transform:none;

box-shadow:none;

}

.careerbenefits-card:hover .careerbenefits-icon{

transform:scale(1.05);

box-shadow:none;

}

.careerbenefits-card:hover h3{

transform:none;

}

}

/* Why Work Section Ends Here */

/* Current Opening Section Starts Here */

/*==================================================
        CURRENT OPENINGS
==================================================*/

.careeropenings-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.careeropenings-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(130px);

}

.careeropenings-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.careeropenings-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.careeropenings-section .section-heading h2{

    margin:24px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.careeropenings-section .section-heading h2 span{

    color:#00BCD4;

}

.careeropenings-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
JOB LIST
==================================*/

.careeropenings-list{

    position:relative;

    z-index:5;

    max-width:1100px;

    margin:auto;

}

/*==================================
JOB ITEM
==================================*/

.careeropenings-item{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    padding:35px 0;

    border-bottom:1px solid rgba(255,255,255,.10);

}

/*==================================
LEFT
==================================*/

.careeropenings-left{

    flex:1;

}

.careeropenings-left h3{

    margin:0 0 14px;

    color:#fff;

    font-size:1.7rem;

    font-weight:700;

}

/*==================================
META
==================================*/

.careeropenings-meta{

    display:flex;

    flex-wrap:wrap;

    gap:30px;

}

.careeropenings-meta span{

    display:flex;

    align-items:center;

    gap:10px;

    color:#CBD5E1;

    font-size:.96rem;

}

.careeropenings-meta i{

    color:#00BCD4;

    font-size:.9rem;

}

/*==================================
APPLY BUTTON
==================================*/

.careeropenings-button{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#00BCD4;

    text-decoration:none;

    font-size:1rem;

    font-weight:600;

    white-space:nowrap;

}

.careeropenings-button i{

    font-size:.9rem;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:768px){

.careeropenings-section{

padding:90px 5%;

}

.careeropenings-section .section-heading{

margin-bottom:60px;

}

.careeropenings-section .section-heading h2{

font-size:2.3rem;

}

.careeropenings-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.careeropenings-item{

flex-direction:column;

align-items:flex-start;

gap:20px;

padding:28px 0;

}

.careeropenings-left h3{

font-size:1.35rem;

margin-bottom:12px;

}

.careeropenings-meta{

flex-direction:column;

gap:12px;

}

.careeropenings-meta span{

font-size:.92rem;

}

.careeropenings-button{

font-size:.95rem;

}

}

/* Part - 2 */

/*==================================================
        JOB ITEM
==================================================*/

.careeropenings-item{

    position:relative;

    transition:
        padding .35s ease,
        border-color .35s ease;

}

.careeropenings-item:hover{

    padding-left:18px;

    border-bottom-color:rgba(0,188,212,.22);

}

/*==================================
ANIMATED DIVIDER
==================================*/

.careeropenings-item::before{

    content:"";

    position:absolute;

    left:0;

    bottom:-1px;

    width:0;

    height:2px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    transition:width .45s ease;

}

.careeropenings-item:hover::before{

    width:100%;

}

/*==================================================
        JOB TITLE
==================================================*/

.careeropenings-left h3{

    transition:
        color .35s ease,
        transform .35s ease;

}

.careeropenings-item:hover .careeropenings-left h3{

    color:#00BCD4;

    transform:translateX(6px);

}

/*==================================================
        META
==================================================*/

.careeropenings-meta span{

    transition:
        color .35s ease;

}

.careeropenings-meta i{

    transition:
        transform .35s ease,
        color .35s ease;

}

.careeropenings-item:hover .careeropenings-meta span{

    color:#E2E8F0;

}

.careeropenings-item:hover .careeropenings-meta i{

    color:#7ED321;

    transform:scale(1.15);

}

/*==================================================
        APPLY BUTTON
==================================================*/

.careeropenings-button{

    position:relative;

    overflow:hidden;

    transition:
        color .35s ease,
        transform .35s ease;

}

.careeropenings-button::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    background:#00BCD4;

    transition:.35s;

}

.careeropenings-button i{

    transition:
        transform .35s ease;

}

.careeropenings-item:hover .careeropenings-button{

    color:#7ED321;

    transform:translateX(8px);

}

.careeropenings-item:hover .careeropenings-button::after{

    width:100%;

}

.careeropenings-item:hover .careeropenings-button i{

    transform:translateX(6px);

}

/*==================================================
        FLOATING ENTRANCE
==================================================*/

.careeropenings-item{

    animation:careerOpeningsFloat 7s ease-in-out infinite;

}

.careeropenings-item:nth-child(2){

animation-delay:.7s;

}

.careeropenings-item:nth-child(3){

animation-delay:1.4s;

}

.careeropenings-item:nth-child(4){

animation-delay:2.1s;

}

@keyframes careerOpeningsFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-4px);

    }

}

/* Pause Floating on Hover */

.careeropenings-item:hover{

    animation-play-state:paused;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.careeropenings-item{

animation:none;

}

.careeropenings-item:hover{

padding-left:0;

}

.careeropenings-item:hover .careeropenings-left h3{

transform:none;

}

.careeropenings-item:hover .careeropenings-button{

transform:none;

}

.careeropenings-item:hover .careeropenings-button i{

transform:translateX(3px);

}

}

/* Current Opening Section Ends Here */

/* Job Application Section Starts Here */

/*==================================================
        CAREER APPLICATION
==================================================*/

.careerapplication-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.careerapplication-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(130px);

}

.careerapplication-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.careerapplication-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.careerapplication-section .section-heading h2{

    margin:24px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.careerapplication-section .section-heading h2 span{

    color:#00BCD4;

}

.careerapplication-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
WRAPPER
==================================*/

.careerapplication-wrapper{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:420px 1fr;

    gap:35px;

    max-width:1400px;

    margin:auto;

    align-items:stretch;

}

/*==================================
LEFT PANEL
==================================*/

.careerapplication-info{

    padding:45px;

    border-radius:30px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}

.careerapplication-illustration{

    text-align:center;

    margin-bottom:30px;

}

.careerapplication-illustration img{

    width:100%;

    max-width:280px;

}

.careerapplication-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    margin-bottom:25px;

    border-radius:60px;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-weight:600;

    font-size:.92rem;

}

.careerapplication-info h3{

    margin-bottom:20px;

    color:#fff;

    font-size:2rem;

    line-height:1.3;

}

.careerapplication-info h3 span{

    display:block;

    color:#00BCD4;

}

.careerapplication-info p{

    color:#CBD5E1;

    line-height:1.9;

    margin-bottom:35px;

}

/*==================================
STATISTICS
==================================*/

.careerapplication-stats{

    display:grid;

    grid-template-columns:1fr;

    gap:18px;

}

.careerapplication-stat{

    padding:20px;

    border-radius:18px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.06);

}

.careerapplication-stat h4{

    margin:0 0 8px;

    color:#00BCD4;

    font-size:2rem;

    font-weight:700;

}

.careerapplication-stat span{

    color:#CBD5E1;

    font-size:.95rem;

}

/*==================================
FORM BOX
==================================*/

.careerapplication-formbox{

    padding:45px;

    border-radius:30px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}

/*==================================
GRID
==================================*/

.careerapplication-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:24px;

}

.careerapplication-full{

    grid-column:1/-1;

}

/*==================================
FIELDS
==================================*/

.careerapplication-field{

    display:flex;

    flex-direction:column;

}

.careerapplication-field label{

    margin-bottom:10px;

    color:#fff;

    font-size:.95rem;

    font-weight:600;

}

.careerapplication-field input,

.careerapplication-field select,

.careerapplication-field textarea{

    width:100%;

    padding:16px 18px;

    border-radius:14px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:#fff;

    outline:none;

    font-size:.95rem;

    font-family:inherit;

}

.careerapplication-field input::placeholder,

.careerapplication-field textarea::placeholder{

    color:#94A3B8;

}

.careerapplication-field textarea{

    resize:vertical;

    min-height:150px;

}

.careerapplication-field select{

    appearance:none;

    cursor:pointer;

}

.careerapplication-field option{

    background:#08111F;

    color:#fff;

}

/*==================================
FILE INPUT
==================================*/

.careerapplication-field input[type="file"]{

    padding:14px;

    cursor:pointer;

}

/*==================================
SUBMIT BUTTON
==================================*/

.careerapplication-submit{

    margin-top:35px;

    border:none;

    cursor:pointer;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 40px;

    border-radius:60px;

    font-size:1rem;

    font-weight:600;

    color:#08111F;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.careerapplication-wrapper{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.careerapplication-section{

padding:90px 5%;

}

.careerapplication-section .section-heading{

margin-bottom:60px;

}

.careerapplication-section .section-heading h2{

font-size:2.3rem;

}

.careerapplication-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.careerapplication-info,

.careerapplication-formbox{

padding:28px 22px;

border-radius:22px;

}

.careerapplication-info h3{

font-size:1.6rem;

}

.careerapplication-grid{

grid-template-columns:1fr;

gap:18px;

}

.careerapplication-full{

grid-column:auto;

}

.careerapplication-submit{

width:100%;

padding:16px;

}

}

/* Part - 2 */

/*==================================================
        LEFT PANEL
==================================================*/

.careerapplication-info{

    position:relative;

    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;

    animation:careerApplicationFloat 8s ease-in-out infinite;

}

@keyframes careerApplicationFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

.careerapplication-info:hover{

    border-color:rgba(0,188,212,.22);

    box-shadow:

        0 25px 60px rgba(0,188,212,.16);

}

/*==================================================
        ILLUSTRATION
==================================================*/

.careerapplication-illustration img{

    transition:
        transform .45s ease;

    animation:careerIllustrationFloat 5s ease-in-out infinite;

}

@keyframes careerIllustrationFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

.careerapplication-info:hover .careerapplication-illustration img{

    transform:scale(1.05);

}

/*==================================================
        BADGE
==================================================*/

.careerapplication-badge{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.careerapplication-badge::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.careerapplication-badge:hover{

    transform:translateY(-3px);

    box-shadow:

        0 0 25px rgba(0,188,212,.25);

}

.careerapplication-badge:hover::before{

    left:150%;

}

/*==================================================
        STATS
==================================================*/

.careerapplication-stat{

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease;

}

.careerapplication-stat:hover{

    transform:translateX(8px);

    background:rgba(255,255,255,.06);

    border-color:rgba(0,188,212,.18);

}

.careerapplication-stat h4{

    transition:
        color .35s ease;

}

.careerapplication-stat:hover h4{

    color:#7ED321;

}

/*==================================================
        FORM BOX
==================================================*/

.careerapplication-formbox{

    transition:
        border-color .35s ease,
        box-shadow .35s ease;

}

.careerapplication-formbox:hover{

    border-color:rgba(0,188,212,.18);

    box-shadow:

        0 25px 60px rgba(0,188,212,.14);

}

/*==================================================
        INPUTS
==================================================*/

.careerapplication-field input,

.careerapplication-field select,

.careerapplication-field textarea{

    transition:
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;

}

.careerapplication-field input:focus,

.careerapplication-field select:focus,

.careerapplication-field textarea:focus{

    border-color:#00BCD4;

    background:rgba(255,255,255,.08);

    box-shadow:

        0 0 0 4px rgba(0,188,212,.10);

}

/*==================================================
        LABEL
==================================================*/

.careerapplication-field label{

    transition:
        color .35s ease;

}

.careerapplication-field:focus-within label{

    color:#00BCD4;

}

/*==================================================
        FILE INPUT
==================================================*/

.careerapplication-field input[type="file"]{

    transition:
        border-color .35s ease,
        background .35s ease;

}

.careerapplication-field input[type="file"]:hover{

    border-color:#00BCD4;

    background:rgba(0,188,212,.08);

}

/*==================================================
        SUBMIT BUTTON
==================================================*/

.careerapplication-submit{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.careerapplication-submit::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.careerapplication-submit:hover{

    transform:translateY(-5px);

    box-shadow:

        0 18px 45px rgba(0,188,212,.30);

}

.careerapplication-submit:hover::before{

    left:150%;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.careerapplication-info{

animation:none;

}

.careerapplication-info:hover,

.careerapplication-formbox:hover{

transform:none;

box-shadow:none;

}

.careerapplication-stat:hover{

transform:none;

}

.careerapplication-submit:hover{

transform:none;

box-shadow:none;

}

.careerapplication-badge:hover{

transform:none;

box-shadow:none;

}

}

/* Job Application Section Ends Here */

/* Life Section Starts Here */

/*==================================================
        LIFE AT INFO CHARITABLE TRUST
==================================================*/

.careerlife-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.careerlife-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(130px);

}

.careerlife-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.careerlife-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.careerlife-section .section-heading h2{

    margin:24px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.careerlife-section .section-heading h2 span{

    color:#00BCD4;

}

.careerlife-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
GRID
==================================*/

.careerlife-grid{

    position:relative;

    z-index:5;

    max-width:1280px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

}

/*==================================
CARD
==================================*/

.careerlife-card{

    position:relative;

    overflow:hidden;

    padding:38px 32px;

    border-radius:26px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}

.careerlife-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

}

.careerlife-card::after{

    content:"";

    position:absolute;

    top:-120px;

    right:-120px;

    width:220px;

    height:220px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,188,212,.08),

        transparent 70%

    );

}

/*==================================
ICON
==================================*/

.careerlife-icon{

    width:82px;

    height:82px;

    margin-bottom:26px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    font-size:2rem;

}

/*==================================
TEXT
==================================*/

.careerlife-card h3{

    margin-bottom:15px;

    color:#fff;

    font-size:1.4rem;

    font-weight:700;

    line-height:1.3;

}

.careerlife-card p{

    margin:0;

    color:#CBD5E1;

    font-size:.96rem;

    line-height:1.9;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.careerlife-grid{

grid-template-columns:repeat(2,1fr);

gap:22px;

}

}

@media(max-width:768px){

.careerlife-section{

padding:90px 5%;

}

.careerlife-section .section-heading{

margin-bottom:60px;

}

.careerlife-section .section-heading h2{

font-size:2.3rem;

}

.careerlife-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.careerlife-grid{

grid-template-columns:1fr;

gap:18px;

}

.careerlife-card{

padding:30px 24px;

border-radius:22px;

}

.careerlife-icon{

width:70px;

height:70px;

margin-bottom:20px;

font-size:1.8rem;

}

.careerlife-card h3{

font-size:1.2rem;

margin-bottom:12px;

}

.careerlife-card p{

font-size:.92rem;

line-height:1.8;

}

}

/* Part - 2 */

/*==================================================
        LIFESTYLE CARD
==================================================*/

.careerlife-card{

    transition:
        transform .4s ease,
        background .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;

}

.careerlife-card:hover{

    transform:translateY(-10px);

    background:rgba(255,255,255,.07);

    border-color:rgba(0,188,212,.20);

    box-shadow:
        0 25px 60px rgba(0,188,212,.15);

}

/*==================================================
        TOP ACCENT
==================================================*/

.careerlife-card::before{

    transition:
        height .35s ease,
        opacity .35s ease;

}

.careerlife-card:hover::before{

    height:6px;

    opacity:1;

}

/*==================================================
        BACKGROUND GLOW
==================================================*/

.careerlife-card::after{

    transition:
        transform .45s ease,
        opacity .45s ease;

}

.careerlife-card:hover::after{

    transform:scale(1.4);

    opacity:1;

}

/*==================================================
        ICON
==================================================*/

.careerlife-icon{

    position:relative;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

/* Pulse Ring */

.careerlife-icon::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:careerLifePulse 3s ease-out infinite;

}

@keyframes careerLifePulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.45);

        opacity:0;

    }

}

.careerlife-card:hover .careerlife-icon{

    transform:rotate(-8deg) scale(1.08);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.20),

        rgba(126,211,33,.16)

    );

    border-color:rgba(0,188,212,.30);

    box-shadow:
        0 0 30px rgba(0,188,212,.28);

}

/*==================================================
        TITLE
==================================================*/

.careerlife-card h3{

    transition:
        color .35s ease,
        transform .35s ease;

}

.careerlife-card:hover h3{

    color:#00BCD4;

    transform:translateY(-3px);

}

/*==================================================
        DESCRIPTION
==================================================*/

.careerlife-card p{

    transition:
        color .35s ease;

}

.careerlife-card:hover p{

    color:#E2E8F0;

}

/*==================================================
        FLOATING EFFECT
==================================================*/

.careerlife-card{

    animation:careerLifeFloat 8s ease-in-out infinite;

}

.careerlife-card:nth-child(2){

animation-delay:.6s;

}

.careerlife-card:nth-child(3){

animation-delay:1.2s;

}

.careerlife-card:nth-child(4){

animation-delay:1.8s;

}

.careerlife-card:nth-child(5){

animation-delay:2.4s;

}

.careerlife-card:nth-child(6){

animation-delay:3s;

}

@keyframes careerLifeFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

}

/* Pause Floating While Hovering */

.careerlife-card:hover{

    animation-play-state:paused;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.careerlife-card{

animation:none;

}

.careerlife-card:hover{

transform:none;

box-shadow:none;

}

.careerlife-card:hover .careerlife-icon{

transform:scale(1.05);

box-shadow:none;

}

.careerlife-card:hover h3{

transform:none;

}

}

/* Life Section Ends Here */

/* Gallery Section Starts Here */

/*==================================================
        WORKPLACE GALLERY
==================================================*/

.careergallery-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.careergallery-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(130px);

}

.careergallery-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.careergallery-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.careergallery-section .section-heading h2{

    margin:24px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.careergallery-section .section-heading h2 span{

    color:#00BCD4;

}

.careergallery-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
MASONRY GRID
==================================*/

.careergallery-grid{

    position:relative;

    z-index:5;

    max-width:1300px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    grid-auto-rows:220px;

    gap:22px;

}

/*==================================
ITEM
==================================*/

.careergallery-item{

    position:relative;

    overflow:hidden;

    border-radius:26px;

    background:#111827;

}

/*==================================
GRID SIZES
==================================*/

.careergallery-large{

    grid-column:span 2;

    grid-row:span 2;

}

.careergallery-medium{

    grid-column:span 1;

    grid-row:span 2;

}

.careergallery-small{

    grid-column:span 1;

    grid-row:span 1;

}

/*==================================
IMAGE
==================================*/

.careergallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/*==================================
OVERLAY
==================================*/

.careergallery-overlay{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:28px 24px;

    background:linear-gradient(

        180deg,

        transparent,

        rgba(0,0,0,.88)

    );

}

.careergallery-overlay h3{

    margin:0;

    color:#fff;

    font-size:1.3rem;

    font-weight:600;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.careergallery-grid{

grid-template-columns:repeat(2,1fr);

grid-auto-rows:220px;

}

.careergallery-large,

.careergallery-medium,

.careergallery-small{

grid-column:span 1;

grid-row:span 1;

}

}

@media(max-width:768px){

.careergallery-section{

padding:90px 5%;

}

.careergallery-section .section-heading{

margin-bottom:60px;

}

.careergallery-section .section-heading h2{

font-size:2.3rem;

}

.careergallery-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.careergallery-grid{

grid-template-columns:1fr;

grid-auto-rows:250px;

gap:18px;

}

.careergallery-large,

.careergallery-medium,

.careergallery-small{

grid-column:span 1;

grid-row:span 1;

}

.careergallery-item{

border-radius:20px;

}

.careergallery-overlay{

padding:22px 18px;

}

.careergallery-overlay h3{

font-size:1.1rem;

}

}

/* Part - 2 */

/*==================================================
        GALLERY ITEM
==================================================*/

.careergallery-item{

    transition:
        transform .45s ease,
        box-shadow .45s ease;

    animation:careerGalleryFloat 8s ease-in-out infinite;

}

.careergallery-item:hover{

    transform:translateY(-10px);

    box-shadow:
        0 25px 60px rgba(0,188,212,.18);

}

/* Floating Delay */

.careergallery-item:nth-child(2){

animation-delay:.6s;

}

.careergallery-item:nth-child(3){

animation-delay:1.2s;

}

.careergallery-item:nth-child(4){

animation-delay:1.8s;

}

.careergallery-item:nth-child(5){

animation-delay:2.4s;

}

@keyframes careerGalleryFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

}

.careergallery-item:hover{

    animation-play-state:paused;

}

/*==================================================
        IMAGE
==================================================*/

.careergallery-item img{

    transition:
        transform .7s ease,
        filter .45s ease;

}

.careergallery-item:hover img{

    transform:scale(1.12);

    filter:brightness(.82);

}

/*==================================================
        OVERLAY
==================================================*/

.careergallery-overlay{

    transition:
        padding .35s ease,
        background .35s ease;

}

.careergallery-item:hover .careergallery-overlay{

    padding-bottom:36px;

    background:linear-gradient(

        180deg,

        transparent,

        rgba(5,8,22,.95)

    );

}

/*==================================================
        TITLE
==================================================*/

.careergallery-overlay h3{

    position:relative;

    display:inline-block;

    transition:
        color .35s ease,
        transform .35s ease;

}

.careergallery-overlay h3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    border-radius:50px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    transition:.35s;

}

.careergallery-item:hover .careergallery-overlay h3{

    color:#00BCD4;

    transform:translateY(-4px);

}

.careergallery-item:hover .careergallery-overlay h3::after{

    width:100%;

}

/*==================================================
        SOFT GLOW
==================================================*/

.careergallery-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.12),

        transparent 45%,

        rgba(126,211,33,.10)

    );

    opacity:0;

    transition:.45s;

    z-index:1;

    pointer-events:none;

}

.careergallery-item:hover::before{

    opacity:1;

}

/*==================================================
        SHINE EFFECT
==================================================*/

.careergallery-item::after{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:40%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.28),

        transparent

    );

    transform:skewX(-20deg);

    transition:.8s;

    z-index:2;

}

.careergallery-item:hover::after{

    left:150%;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.careergallery-item{

animation:none;

}

.careergallery-item:hover{

transform:none;

box-shadow:none;

}

.careergallery-item:hover img{

transform:scale(1.05);

}

.careergallery-item:hover .careergallery-overlay{

padding-bottom:22px;

}

.careergallery-item:hover .careergallery-overlay h3{

transform:none;

}

}

/* Gallery Section Ends Here */

/* FAQ Section Starts Here */

/*==================================================
        CAREER FAQ
==================================================*/

.careerfaq-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.careerfaq-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(130px);

}

.careerfaq-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.careerfaq-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.careerfaq-section .section-heading h2{

    margin:24px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.careerfaq-section .section-heading h2 span{

    color:#00BCD4;

}

.careerfaq-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
FAQ WRAPPER
==================================*/

.careerfaq-wrapper{

    position:relative;

    z-index:5;

    max-width:950px;

    margin:auto;

}

/*==================================
FAQ ITEM
==================================*/

.careerfaq-item{

    border-bottom:1px solid rgba(255,255,255,.10);

}

/*==================================
QUESTION
==================================*/

.careerfaq-question{

    width:100%;

    padding:28px 0;

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:none;

    border:none;

    cursor:pointer;

    text-align:left;

}

/*==================================
LEFT SIDE
==================================*/

.careerfaq-left{

    display:flex;

    align-items:center;

    gap:20px;

}

/*==================================
ICON
==================================*/

.careerfaq-icon{

    width:54px;

    height:54px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    font-size:1.35rem;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

}

/*==================================
TITLE
==================================*/

.careerfaq-question h4{

    margin:0;

    color:#fff;

    font-size:1.18rem;

    font-weight:600;

    line-height:1.5;

}

/*==================================
TOGGLE
==================================*/

.careerfaq-toggle{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:#00BCD4;

    font-size:1.5rem;

    font-weight:600;

    flex-shrink:0;

}

/*==================================
ANSWER
==================================*/

.careerfaq-answer{

    max-height:0;

    overflow:hidden;

    opacity:0;

    transition:
        max-height .45s ease,
        opacity .35s ease;

}

.careerfaq-answer p{

    margin:0;

    padding:
        0
        0
        28px
        74px;

    color:#CBD5E1;

    font-size:.96rem;

    line-height:1.9;

}

/*==================================
ACTIVE
==================================*/

.careerfaq-item.active .careerfaq-answer{

    max-height:220px;

    opacity:1;

}

.careerfaq-item.active .careerfaq-toggle{

    background:#00BCD4;

    border-color:#00BCD4;

    color:#fff;

    font-size:0;

}

.careerfaq-item.active .careerfaq-toggle::before{

    content:"−";

    font-size:1.5rem;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:768px){

.careerfaq-section{

padding:90px 5%;

}

.careerfaq-section .section-heading{

margin-bottom:60px;

}

.careerfaq-section .section-heading h2{

font-size:2.3rem;

}

.careerfaq-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.careerfaq-question{

padding:22px 0;

}

.careerfaq-left{

gap:15px;

align-items:flex-start;

}

.careerfaq-icon{

width:46px;

height:46px;

font-size:1.1rem;

}

.careerfaq-question h4{

font-size:1rem;

}

.careerfaq-toggle{

width:36px;

height:36px;

font-size:1.2rem;

}

.careerfaq-answer p{

padding:
0
0
22px
60px;

font-size:.92rem;

line-height:1.8;

}

}

/* Part - 2 */

/*==================================================
        FAQ ITEM
==================================================*/

.careerfaq-item{

    position:relative;

    transition:
        border-color .35s ease;

}

.careerfaq-item:hover{

    border-bottom-color:rgba(0,188,212,.22);

}

/* Animated Divider */

.careerfaq-item::before{

    content:"";

    position:absolute;

    left:0;

    bottom:-1px;

    width:0;

    height:2px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    transition:width .4s ease;

}

.careerfaq-item:hover::before,

.careerfaq-item.active::before{

    width:100%;

}

/*==================================================
        ICON
==================================================*/

.careerfaq-icon{

    position:relative;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

/* Pulse Ring */

.careerfaq-icon::after{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:careerFaqPulse 3s ease-out infinite;

}

@keyframes careerFaqPulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.45);

        opacity:0;

    }

}

.careerfaq-item:hover .careerfaq-icon{

    transform:rotate(-10deg) scale(1.08);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.20),

        rgba(126,211,33,.16)

    );

    border-color:rgba(0,188,212,.28);

    box-shadow:
        0 0 28px rgba(0,188,212,.25);

}

/*==================================================
        QUESTION
==================================================*/

.careerfaq-question h4{

    transition:
        color .35s ease,
        transform .35s ease;

}

.careerfaq-item:hover h4{

    color:#00BCD4;

    transform:translateX(6px);

}

.careerfaq-item.active h4{

    color:#00BCD4;

}

/*==================================================
        TOGGLE
==================================================*/

.careerfaq-toggle{

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.careerfaq-item:hover .careerfaq-toggle{

    transform:rotate(90deg);

    background:rgba(0,188,212,.08);

    border-color:rgba(0,188,212,.20);

    box-shadow:
        0 0 18px rgba(0,188,212,.18);

}

.careerfaq-item.active .careerfaq-toggle{

    transform:rotate(180deg);

}

/*==================================================
        ANSWER
==================================================*/

.careerfaq-answer p{

    transition:color .35s ease;

}

.careerfaq-item:hover .careerfaq-answer p{

    color:#E2E8F0;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.careerfaq-item:hover h4{

transform:none;

}

.careerfaq-item:hover .careerfaq-toggle{

transform:none;

box-shadow:none;

}

.careerfaq-item:hover .careerfaq-icon{

transform:scale(1.05);

}

}

/* FAQ Section Ends Here */

/* CTA Section Starts Here */

/*==================================================
        CAREER CTA
==================================================*/

.careercta-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

/*==================================
CYAN GLOWS
==================================*/

.careercta-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(130px);

    pointer-events:none;

}

.careercta-glow-left{

    width:650px;

    height:650px;

    left:-220px;

    top:-220px;

    background:rgba(0,188,212,.12);

}

.careercta-glow-right{

    width:520px;

    height:520px;

    right:-180px;

    bottom:-180px;

    background:rgba(126,211,33,.10);

}

/*==================================
DOTTED GRID
==================================*/

.careercta-grid{

    position:absolute;

    inset:0;

    opacity:.35;

    background-image:

        radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);

    background-size:32px 32px;

}

/*==================================
FLOATING ICONS
==================================*/

.careercta-icons{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.careercta-icons i{

    position:absolute;

    color:rgba(255,255,255,.08);

    font-size:2rem;

}

.careercta-icon1{

top:18%;

left:10%;

}

.careercta-icon2{

top:24%;

right:12%;

}

.careercta-icon3{

bottom:18%;

left:16%;

}

.careercta-icon4{

top:52%;

right:20%;

}

.careercta-icon5{

bottom:16%;

right:36%;

}

/*==================================
ABSTRACT SHAPES
==================================*/

.careercta-shapes{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.careercta-shape{

    position:absolute;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.03);

    backdrop-filter:blur(10px);

}

.careercta-circle{

    width:70px;

    height:70px;

    border-radius:50%;

    top:20%;

    left:40%;

}

.careercta-square{

    width:60px;

    height:60px;

    transform:rotate(20deg);

    right:18%;

    top:36%;

}

.careercta-diamond{

    width:50px;

    height:50px;

    transform:rotate(45deg);

    left:22%;

    bottom:16%;

}

/*==================================
GLASS PANEL
==================================*/

.careercta-panel{

    position:relative;

    z-index:5;

    max-width:980px;

    margin:auto;

    padding:70px 60px;

    text-align:center;

    overflow:hidden;

    border-radius:34px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(20px);

}

.careercta-panel::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        135deg,

        rgba(255,255,255,.05),

        transparent 45%,

        rgba(0,188,212,.05)

    );

    pointer-events:none;

}

/*==================================
BADGE
==================================*/

.careercta-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    margin-bottom:28px;

    border-radius:60px;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-size:.95rem;

    font-weight:600;

}

/*==================================
HEADING
==================================*/

.careercta-panel h2{

    margin:0 0 25px;

    color:#fff;

    font-size:3.4rem;

    line-height:1.2;

    font-weight:800;

}

.careercta-panel h2 span{

    display:block;

    color:#00BCD4;

}

/*==================================
CONTENT
==================================*/

.careercta-panel p{

    max-width:720px;

    margin:0 auto 45px;

    color:#CBD5E1;

    font-size:1rem;

    line-height:2;

}

/*==================================
BUTTONS
==================================*/

.careercta-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

}

.careercta-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:17px 34px;

    border-radius:60px;

    text-decoration:none;

    font-size:.96rem;

    font-weight:600;

    transition:.35s;

}

/* Primary */

.careercta-primary{

    color:#08111F;

    background:linear-gradient(

        135deg,

        #00BCD4,

        #7ED321

    );

}

/* Secondary */

.careercta-secondary{

    color:#fff;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(12px);

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:768px){

.careercta-section{

padding:90px 5%;

}

.careercta-panel{

padding:45px 25px;

border-radius:24px;

}

.careercta-badge{

font-size:.85rem;

padding:10px 18px;

margin-bottom:22px;

}

.careercta-panel h2{

font-size:2.3rem;

}

.careercta-panel p{

font-size:.95rem;

line-height:1.8;

margin-bottom:35px;

}

.careercta-buttons{

flex-direction:column;

gap:15px;

}

.careercta-btn{

width:100%;

padding:16px;

font-size:.94rem;

}

}

/* Part - 2 */

/*==================================================
        GLASS PANEL
==================================================*/

.careercta-panel{

    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;

    animation:careerCtaFloat 8s ease-in-out infinite;

}

@keyframes careerCtaFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

.careercta-panel:hover{

    border-color:rgba(0,188,212,.22);

    box-shadow:
        0 30px 80px rgba(0,188,212,.18);

}

/*==================================================
        CYAN GLOWS
==================================================*/

.careercta-glow{

    animation:careerCtaGlow 8s ease-in-out infinite;

}

.careercta-glow-right{

    animation-delay:4s;

}

@keyframes careerCtaGlow{

    0%,100%{

        transform:scale(1);

        opacity:.6;

    }

    50%{

        transform:scale(1.18);

        opacity:1;

    }

}

/*==================================================
        DOTTED GRID
==================================================*/

.careercta-grid{

    animation:careerGridMove 20s linear infinite;

}

@keyframes careerGridMove{

    from{

        background-position:0 0;

    }

    to{

        background-position:32px 32px;

    }

}

/*==================================================
        FLOATING CAREER ICONS
==================================================*/

.careercta-icons i{

    animation:careerIconFloat 6s ease-in-out infinite;

}

.careercta-icon2{

animation-delay:.8s;

}

.careercta-icon3{

animation-delay:1.6s;

}

.careercta-icon4{

animation-delay:2.4s;

}

.careercta-icon5{

animation-delay:3.2s;

}

@keyframes careerIconFloat{

    0%,100%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(-16px) rotate(8deg);

    }

}

/*==================================================
        ABSTRACT SHAPES
==================================================*/

.careercta-shape{

    animation:careerShapeFloat 8s ease-in-out infinite;

}

.careercta-circle{

animation-delay:.5s;

}

.careercta-square{

animation-delay:1.5s;

}

.careercta-diamond{

animation-delay:2.5s;

}

@keyframes careerShapeFloat{

    0%,100%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(-14px) rotate(15deg);

    }

}

/*==================================================
        BADGE
==================================================*/

.careercta-badge{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.careercta-badge::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.careercta-badge:hover{

    transform:translateY(-3px);

    box-shadow:
        0 0 25px rgba(0,188,212,.20);

}

.careercta-badge:hover::before{

    left:150%;

}

/*==================================================
        HEADING
==================================================*/

.careercta-panel h2 span{

    animation:careerHeadingGlow 3s ease-in-out infinite;

}

@keyframes careerHeadingGlow{

    0%,100%{

        text-shadow:none;

    }

    50%{

        text-shadow:
            0 0 20px rgba(0,188,212,.45);

    }

}

/*==================================================
        BUTTONS
==================================================*/

.careercta-btn{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.careercta-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.careercta-btn:hover::before{

    left:150%;

}

/* Primary Button */

.careercta-primary:hover{

    transform:translateY(-5px);

    box-shadow:
        0 18px 45px rgba(0,188,212,.30);

}

/* Secondary Buttons */

.careercta-secondary:hover{

    transform:translateY(-5px);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.16),

        rgba(126,211,33,.12)

    );

    border-color:rgba(0,188,212,.25);

    box-shadow:
        0 18px 40px rgba(0,188,212,.18);

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.careercta-panel{

animation:none;

}

.careercta-panel:hover{

transform:none;

box-shadow:none;

}

.careercta-badge:hover{

transform:none;

box-shadow:none;

}

.careercta-primary:hover,

.careercta-secondary:hover{

transform:none;

box-shadow:none;

}

.careercta-glow{

animation-duration:10s;

}

}

/* CTA Section Ends Here */

/* Career Page Ends Here */

/* Contact Us Page Starts Here */

/* Hero Section Starts Here */

/*==================================================
        CONTACT HERO
==================================================*/

.contacthero-section{

    position:relative;

    overflow:hidden;

    min-height:100vh;

    display:flex;

    align-items:center;

    padding:170px 5% 120px;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

/*==================================
BACKGROUND GLOWS
==================================*/

.contacthero-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(130px);

    pointer-events:none;

}

.contacthero-glow-left{

    width:560px;

    height:560px;

    left:-180px;

    top:-180px;

    background:rgba(0,188,212,.12);

}

.contacthero-glow-right{

    width:480px;

    height:480px;

    right:-160px;

    bottom:-160px;

    background:rgba(126,211,33,.10);

}

/*==================================
DOTTED CONNECTIONS
==================================*/

.contacthero-connections{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.contacthero-connections span{

    position:absolute;

    border-top:2px dashed rgba(255,255,255,.08);

}

.contacthero-connections span:nth-child(1){

    top:18%;

    left:8%;

    width:220px;

    transform:rotate(15deg);

}

.contacthero-connections span:nth-child(2){

    top:34%;

    right:10%;

    width:190px;

    transform:rotate(-18deg);

}

.contacthero-connections span:nth-child(3){

    bottom:22%;

    left:20%;

    width:250px;

    transform:rotate(-8deg);

}

.contacthero-connections span:nth-child(4){

    bottom:18%;

    right:18%;

    width:210px;

    transform:rotate(14deg);

}

/*==================================
FLOATING ICONS
==================================*/

.contacthero-icons{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.contacthero-icons i{

    position:absolute;

    color:rgba(255,255,255,.10);

    font-size:1.8rem;

}

.contacthero-icon1{

top:18%;

left:10%;

}

.contacthero-icon2{

top:22%;

right:14%;

}

.contacthero-icon3{

left:14%;

bottom:22%;

}

.contacthero-icon4{

right:18%;

bottom:18%;

}

.contacthero-icon5{

left:46%;

top:15%;

}

/*==================================
LOCATION PINS
==================================*/

.contacthero-pins{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.contacthero-pin{

    position:absolute;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#00BCD4;

    box-shadow:0 0 18px rgba(0,188,212,.45);

}

.contacthero-pin::after{

    content:"";

    position:absolute;

    left:50%;

    top:100%;

    transform:translateX(-50%);

    width:2px;

    height:18px;

    background:rgba(0,188,212,.35);

}

.contacthero-pin1{

top:28%;

left:38%;

}

.contacthero-pin2{

top:55%;

right:26%;

}

.contacthero-pin3{

bottom:20%;

left:26%;

}

/*==================================
LAYOUT
==================================*/

.contacthero-wrapper{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:70px;

    align-items:center;

}

/*==================================
BREADCRUMB
==================================*/

.contacthero-breadcrumb{

    position:relative;

    z-index:5;

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-bottom:45px;

    padding:12px 22px;

    border-radius:60px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(14px);

}

.contacthero-breadcrumb a{

    color:#CBD5E1;

    text-decoration:none;

}

.contacthero-breadcrumb span{

    color:#00BCD4;

}

/*==================================
CONTENT
==================================*/

.contacthero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:28px;

    padding:12px 24px;

    border-radius:60px;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-weight:600;

}

.contacthero-content h1{

    margin:0 0 28px;

    color:#fff;

    font-size:4.3rem;

    line-height:1.08;

    font-weight:800;

}

.contacthero-content h1 span{

    display:block;

    color:#00BCD4;

}

.contacthero-content p{

    max-width:620px;

    margin-bottom:42px;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
BUTTONS
==================================*/

.contacthero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.contacthero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:60px;

    text-decoration:none;

    font-size:.96rem;

    font-weight:600;

}

.contacthero-primary{

    color:#08111F;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

}

.contacthero-secondary{

    color:#fff;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(12px);

}

/*==================================
NETWORK VISUAL
==================================*/

.contacthero-visual{

    display:flex;

    justify-content:center;

    align-items:center;

}

.contacthero-network{

    position:relative;

    width:420px;

    height:420px;

    border-radius:50%;

    border:2px dashed rgba(255,255,255,.10);

}

.contacthero-center{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:130px;

    height:130px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    color:#08111F;

    font-size:3rem;

    box-shadow:0 0 40px rgba(0,188,212,.30);

}

.contacthero-node{

    position:absolute;

    width:65px;

    height:65px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(12px);

    color:#fff;

}

.contacthero-node1{

top:-18px;

left:50%;

transform:translateX(-50%);

}

.contacthero-node2{

right:-18px;

top:50%;

transform:translateY(-50%);

}

.contacthero-node3{

bottom:-18px;

left:50%;

transform:translateX(-50%);

}

.contacthero-node4{

left:-18px;

top:50%;

transform:translateY(-50%);

}

.contacthero-svg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

}

.contacthero-svg circle{

    stroke:rgba(0,188,212,.16);

    stroke-width:2;

    stroke-dasharray:8 10;

}

/*==================================
SCROLL
==================================*/

.contacthero-scroll{

    position:absolute;

    left:50%;

    bottom:30px;

    transform:translateX(-50%);

    text-align:center;

    color:#CBD5E1;

    z-index:5;

}

.contacthero-scroll-mouse{

    width:28px;

    height:48px;

    margin:10px auto 0;

    border:2px solid rgba(255,255,255,.18);

    border-radius:20px;

    display:flex;

    justify-content:center;

}

.contacthero-scroll-dot{

    width:5px;

    height:10px;

    margin-top:8px;

    border-radius:20px;

    background:#00BCD4;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.contacthero-wrapper{

grid-template-columns:1fr;

text-align:center;

gap:60px;

}

.contacthero-content p{

margin:0 auto 40px;

}

.contacthero-buttons{

justify-content:center;

}

}

@media(max-width:768px){

.contacthero-section{

padding:140px 5% 100px;

min-height:auto;

}

.contacthero-content h1{

font-size:2.8rem;

}

.contacthero-content p{

font-size:.95rem;

line-height:1.8;

}

.contacthero-network{

width:290px;

height:290px;

}

.contacthero-center{

width:95px;

height:95px;

font-size:2.2rem;

}

.contacthero-node{

width:48px;

height:48px;

font-size:1rem;

}

.contacthero-buttons{

flex-direction:column;

}

.contacthero-btn{

width:100%;

}

.contacthero-breadcrumb{

font-size:.9rem;

}

}

/* Part - 2 */

/*==================================================
        HERO CONTENT
==================================================*/

.contacthero-content{

    animation:contactHeroFadeLeft 1s ease;

}

.contacthero-visual{

    animation:contactHeroFadeRight 1s ease;

}

@keyframes contactHeroFadeLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes contactHeroFadeRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*==================================================
        BACKGROUND GLOWS
==================================================*/

.contacthero-glow{

    animation:contactHeroGlow 8s ease-in-out infinite;

}

.contacthero-glow-right{

    animation-delay:4s;

}

@keyframes contactHeroGlow{

    0%,100%{

        transform:scale(1);

        opacity:.6;

    }

    50%{

        transform:scale(1.18);

        opacity:1;

    }

}

/*==================================================
        DOTTED CONNECTIONS
==================================================*/

.contacthero-connections span{

    animation:contactHeroConnections 5s linear infinite;

}

@keyframes contactHeroConnections{

    0%{

        border-top-color:rgba(255,255,255,.05);

    }

    50%{

        border-top-color:rgba(0,188,212,.22);

    }

    100%{

        border-top-color:rgba(255,255,255,.05);

    }

}

/*==================================================
        FLOATING COMMUNICATION ICONS
==================================================*/

.contacthero-icons i{

    animation:contactHeroIconFloat 6s ease-in-out infinite;

}

.contacthero-icon2{

animation-delay:.8s;

}

.contacthero-icon3{

animation-delay:1.6s;

}

.contacthero-icon4{

animation-delay:2.4s;

}

.contacthero-icon5{

animation-delay:3.2s;

}

@keyframes contactHeroIconFloat{

    0%,100%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(-15px) rotate(8deg);

    }

}

/*==================================================
        LOCATION PINS
==================================================*/

.contacthero-pin{

    animation:contactHeroPinPulse 2.5s ease-in-out infinite;

}

.contacthero-pin2{

animation-delay:.8s;

}

.contacthero-pin3{

animation-delay:1.6s;

}

@keyframes contactHeroPinPulse{

    0%,100%{

        transform:scale(1);

        box-shadow:0 0 18px rgba(0,188,212,.45);

    }

    50%{

        transform:scale(1.3);

        box-shadow:0 0 35px rgba(0,188,212,.7);

    }

}

/*==================================================
        BADGE
==================================================*/

.contacthero-badge{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.contacthero-badge::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:50%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.contacthero-badge:hover{

    transform:translateY(-3px);

    box-shadow:

        0 0 25px rgba(0,188,212,.25);

}

.contacthero-badge:hover::before{

    left:150%;

}

/*==================================================
        BUTTONS
==================================================*/

.contacthero-btn{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.contacthero-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.contacthero-btn:hover::before{

    left:150%;

}

.contacthero-primary:hover{

    transform:translateY(-5px);

    box-shadow:

        0 18px 45px rgba(0,188,212,.30);

}

.contacthero-secondary:hover{

    transform:translateY(-5px);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.18),

        rgba(126,211,33,.14)

    );

    border-color:rgba(0,188,212,.25);

    box-shadow:

        0 18px 40px rgba(0,188,212,.18);

}

/*==================================================
        NETWORK VISUAL
==================================================*/

.contacthero-network{

    animation:contactHeroRotate 30s linear infinite;

}

@keyframes contactHeroRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.contacthero-center{

    animation:contactHeroCenterPulse 3s ease-in-out infinite;

}

@keyframes contactHeroCenterPulse{

    0%,100%{

        transform:translate(-50%,-50%) scale(1);

    }

    50%{

        transform:translate(-50%,-50%) scale(1.08);

    }

}

/* Keep Icons Upright */

.contacthero-node{

    animation:contactHeroNodeRotate 30s linear infinite reverse;

}

@keyframes contactHeroNodeRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(-360deg);

    }

}

/*==================================================
        SCROLL INDICATOR
==================================================*/

.contacthero-scroll-dot{

    animation:contactHeroScroll 1.8s infinite;

}

@keyframes contactHeroScroll{

    0%{

        transform:translateY(0);

        opacity:1;

    }

    100%{

        transform:translateY(18px);

        opacity:0;

    }

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.contacthero-network{

animation-duration:40s;

}

.contacthero-btn:hover{

transform:none;

box-shadow:none;

}

.contacthero-badge:hover{

transform:none;

box-shadow:none;

}

.contacthero-glow{

animation-duration:10s;

}

}

/* Hero Section Ends Here */

/* Contact Information Section Starts Here */

/*==================================================
        CONTACT STRIP
==================================================*/

.contactstrip-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

/*==================================
BACKGROUND GLOWS
==================================*/

.contactstrip-section::before{

    content:"";

    position:absolute;

    left:-220px;

    top:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,188,212,.10),

        transparent 70%

    );

    filter:blur(140px);

}

.contactstrip-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(126,211,33,.08),

        transparent 70%

    );

    filter:blur(130px);

}

/*==================================
DOTTED PATTERN
==================================*/

.contactstrip-section .container{

    position:relative;

    z-index:2;

}

.contactstrip-section .container::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:.05;

    background-image:

        radial-gradient(#ffffff 1px,transparent 1px);

    background-size:24px 24px;

    pointer-events:none;

}

/*==================================
SECTION HEADING
==================================*/

.contactstrip-section .section-heading{

    max-width:820px;

    margin:0 auto 80px;

    position:relative;

    z-index:2;

}

.contactstrip-section .section-heading h2{

    margin:22px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.contactstrip-section .section-heading h2 span{

    color:#00BCD4;

}

.contactstrip-section .section-heading p{

    max-width:720px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
CONTACT STRIP
==================================*/

.contactstrip-wrapper{

    position:relative;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    align-items:center;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    border-radius:28px;

    backdrop-filter:blur(18px);

    overflow:hidden;

}

/*==================================
ITEM
==================================*/

.contactstrip-item{

    position:relative;

    padding:55px 35px;

    text-align:center;

}

/* Vertical Divider */

.contactstrip-item:not(:last-child)::after{

    content:"";

    position:absolute;

    top:50%;

    right:0;

    transform:translateY(-50%);

    width:1px;

    height:70%;

    background:rgba(255,255,255,.08);

}

/*==================================
ICON
==================================*/

.contactstrip-icon{

    width:82px;

    height:82px;

    margin:0 auto 28px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,188,212,.08);

    border:1px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-size:2rem;

}

/*==================================
TEXT
==================================*/

.contactstrip-item h3{

    margin-bottom:16px;

    color:#fff;

    font-size:1.35rem;

    font-weight:700;

}

.contactstrip-item p{

    margin-bottom:10px;

    color:#E2E8F0;

    font-size:.98rem;

    line-height:1.8;

}

.contactstrip-item span{

    display:block;

    color:#94A3B8;

    font-size:.92rem;

    line-height:1.8;

}

/*==================================
BOTTOM BAR
==================================*/

.contactstrip-footer{

    margin-top:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

    text-align:center;

}

.contactstrip-footer span{

    color:#CBD5E1;

    font-size:1rem;

}

.contactstrip-footer a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:14px 26px;

    border-radius:60px;

    text-decoration:none;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:#00BCD4;

    font-weight:600;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.contactstrip-wrapper{

grid-template-columns:repeat(2,1fr);

}

.contactstrip-item:nth-child(2)::after{

display:none;

}

.contactstrip-item{

border-bottom:1px solid rgba(255,255,255,.08);

}

.contactstrip-item:nth-last-child(-n+2){

border-bottom:none;

}

}

@media(max-width:768px){

.contactstrip-section{

padding:90px 5%;

}

.contactstrip-section .section-heading{

margin-bottom:60px;

}

.contactstrip-section .section-heading h2{

font-size:2.3rem;

}

.contactstrip-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.contactstrip-wrapper{

grid-template-columns:1fr;

border-radius:22px;

}

.contactstrip-item{

padding:35px 25px;

}

.contactstrip-item::after{

display:none;

}

.contactstrip-item:not(:last-child){

border-bottom:1px solid rgba(255,255,255,.08);

}

.contactstrip-icon{

width:70px;

height:70px;

font-size:1.7rem;

margin-bottom:20px;

}

.contactstrip-item h3{

font-size:1.15rem;

}

.contactstrip-item p,

.contactstrip-item span{

font-size:.92rem;

}

.contactstrip-footer{

margin-top:35px;

flex-direction:column;

gap:14px;

}

.contactstrip-footer a{

width:100%;

justify-content:center;

}

}

/* Part - 2 */

/*==================================================
        CONTACT ITEM
==================================================*/

.contactstrip-item{

    transition:
        background .4s ease,
        transform .4s ease;

}

.contactstrip-item:hover{

    background:rgba(255,255,255,.03);

    transform:translateY(-6px);

}

/*==================================
TOP HIGHLIGHT
==================================*/

.contactstrip-item::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:0;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    transition:.35s;

}

.contactstrip-item:hover::before{

    height:4px;

}

/*==================================
VERTICAL DIVIDER
==================================*/

.contactstrip-item::after{

    transition:
        background .35s ease,
        box-shadow .35s ease;

}

.contactstrip-item:hover::after{

    background:#00BCD4;

    box-shadow:
        0 0 18px rgba(0,188,212,.40);

}

/*==================================================
        ICON
==================================================*/

.contactstrip-icon{

    position:relative;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

/* Pulse Ring */

.contactstrip-icon::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:contactStripPulse 3s ease-out infinite;

}

@keyframes contactStripPulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.45);

        opacity:0;

    }

}

.contactstrip-item:hover .contactstrip-icon{

    transform:rotate(-10deg) scale(1.08);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.18),

        rgba(126,211,33,.16)

    );

    border-color:rgba(0,188,212,.30);

    box-shadow:

        0 0 30px rgba(0,188,212,.28);

}

/*==================================================
        TITLE
==================================================*/

.contactstrip-item h3{

    transition:
        color .35s ease,
        transform .35s ease;

}

.contactstrip-item:hover h3{

    color:#00BCD4;

    transform:translateY(-3px);

}

/*==================================================
        TEXT
==================================================*/

.contactstrip-item p,

.contactstrip-item span{

    transition:
        color .35s ease;

}

.contactstrip-item:hover p{

    color:#E2E8F0;

}

.contactstrip-item:hover span{

    color:#CBD5E1;

}

/*==================================================
        FLOATING EFFECT
==================================================*/

.contactstrip-item{

    animation:contactStripFloat 8s ease-in-out infinite;

}

.contactstrip-item:nth-child(2){

animation-delay:.7s;

}

.contactstrip-item:nth-child(3){

animation-delay:1.4s;

}

.contactstrip-item:nth-child(4){

animation-delay:2.1s;

}

@keyframes contactStripFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-5px);

    }

}

/* Pause Floating */

.contactstrip-item:hover{

    animation-play-state:paused;

}

/*==================================================
        EMERGENCY CONTACT
==================================================*/

.contactstrip-footer a{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.contactstrip-footer a::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.contactstrip-footer a:hover{

    transform:translateY(-4px);

    border-color:rgba(0,188,212,.25);

    box-shadow:

        0 15px 35px rgba(0,188,212,.22);

}

.contactstrip-footer a:hover::before{

    left:150%;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.contactstrip-item{

animation:none;

}

.contactstrip-item:hover{

transform:none;

}

.contactstrip-item:hover::after{

box-shadow:none;

}

.contactstrip-item:hover .contactstrip-icon{

transform:scale(1.05);

box-shadow:none;

}

.contactstrip-item:hover h3{

transform:none;

}

.contactstrip-footer a:hover{

transform:none;

box-shadow:none;

}

}

/* Contact Information Section Ends Here */

/* Form Section Starts Here */

/*==================================================
        CONTACT FORM
==================================================*/

.contactform-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.contactform-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,188,212,.08),

        transparent 70%

    );

    filter:blur(130px);

}

.contactform-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(126,211,33,.08),

        transparent 70%

    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.contactform-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.contactform-section .section-heading h2{

    margin:24px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.contactform-section .section-heading h2 span{

    color:#00BCD4;

}

.contactform-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
WRAPPER
==================================*/

.contactform-wrapper{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:420px 1fr;

    gap:35px;

    max-width:1400px;

    margin:auto;

    align-items:stretch;

}

/*==================================
LEFT PANEL
==================================*/

.contactform-info{

    padding:45px;

    border-radius:30px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}

.contactform-illustration{

    text-align:center;

    margin-bottom:30px;

}

.contactform-illustration img{

    width:100%;

    max-width:280px;

}

.contactform-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    margin-bottom:25px;

    border-radius:60px;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-weight:600;

    font-size:.92rem;

}

.contactform-info h3{

    margin-bottom:20px;

    color:#fff;

    font-size:2rem;

    line-height:1.3;

}

.contactform-info h3 span{

    display:block;

    color:#00BCD4;

}

.contactform-info p{

    margin-bottom:35px;

    color:#CBD5E1;

    line-height:1.9;

}

/*==================================
HIGHLIGHTS
==================================*/

.contactform-highlights{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.contactform-highlight{

    display:flex;

    align-items:center;

    gap:15px;

}

.contactform-check{

    width:46px;

    height:46px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-size:1.1rem;

    font-weight:600;

    flex-shrink:0;

}

.contactform-highlight span{

    color:#E2E8F0;

    font-size:.96rem;

    font-weight:500;

}

/*==================================
FORM BOX
==================================*/

.contactform-box{

    padding:45px;

    border-radius:30px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}

/*==================================
FORM GRID
==================================*/

.contactform-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:24px;

}

.contactform-full{

    grid-column:1/-1;

}

/*==================================
FIELDS
==================================*/

.contactform-field{

    display:flex;

    flex-direction:column;

}

.contactform-field label{

    margin-bottom:10px;

    color:#fff;

    font-size:.95rem;

    font-weight:600;

}

.contactform-field input,

.contactform-field select,

.contactform-field textarea{

    width:100%;

    padding:16px 18px;

    border-radius:14px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:#fff;

    outline:none;

    font-size:.95rem;

    font-family:inherit;

}

.contactform-field input::placeholder,

.contactform-field textarea::placeholder{

    color:#94A3B8;

}

.contactform-field textarea{

    resize:vertical;

    min-height:170px;

}

.contactform-field select{

    appearance:none;

    cursor:pointer;

}

.contactform-field option{

    background:#08111F;

    color:#fff;

}

/*==================================
SUBMIT BUTTON
==================================*/

.contactform-submit{

    margin-top:35px;

    border:none;

    cursor:pointer;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 40px;

    border-radius:60px;

    background:linear-gradient(

        135deg,

        #00BCD4,

        #7ED321

    );

    color:#08111F;

    font-size:1rem;

    font-weight:600;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.contactform-wrapper{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.contactform-section{

padding:90px 5%;

}

.contactform-section .section-heading{

margin-bottom:60px;

}

.contactform-section .section-heading h2{

font-size:2.3rem;

}

.contactform-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.contactform-info,

.contactform-box{

padding:28px 22px;

border-radius:22px;

}

.contactform-info h3{

font-size:1.6rem;

}

.contactform-grid{

grid-template-columns:1fr;

gap:18px;

}

.contactform-full{

grid-column:auto;

}

.contactform-submit{

width:100%;

padding:16px;

}

.contactform-check{

width:40px;

height:40px;

font-size:1rem;

}

.contactform-highlight span{

font-size:.92rem;

}

}

/* Part - 2 */

/*==================================================
        LEFT PANEL
==================================================*/

.contactform-info{

    position:relative;

    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;

    animation:contactFormFloat 8s ease-in-out infinite;

}

@keyframes contactFormFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

.contactform-info:hover{

    border-color:rgba(0,188,212,.22);

    box-shadow:
        0 25px 60px rgba(0,188,212,.16);

}

/*==================================================
        ILLUSTRATION
==================================================*/

.contactform-illustration img{

    transition:
        transform .45s ease;

    animation:contactIllustrationFloat 5s ease-in-out infinite;

}

@keyframes contactIllustrationFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

.contactform-info:hover .contactform-illustration img{

    transform:scale(1.05);

}

/*==================================================
        BADGE
==================================================*/

.contactform-badge{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.contactform-badge::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.contactform-badge:hover{

    transform:translateY(-3px);

    box-shadow:
        0 0 25px rgba(0,188,212,.25);

}

.contactform-badge:hover::before{

    left:150%;

}

/*==================================================
        HIGHLIGHTS
==================================================*/

.contactform-highlight{

    transition:
        transform .35s ease;

}

.contactform-check{

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.contactform-highlight:hover{

    transform:translateX(8px);

}

.contactform-highlight:hover .contactform-check{

    transform:rotate(-8deg) scale(1.08);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.18),

        rgba(126,211,33,.16)

    );

    border-color:rgba(0,188,212,.28);

    box-shadow:
        0 0 24px rgba(0,188,212,.22);

}

/*==================================================
        FORM BOX
==================================================*/

.contactform-box{

    transition:
        border-color .35s ease,
        box-shadow .35s ease;

}

.contactform-box:hover{

    border-color:rgba(0,188,212,.18);

    box-shadow:
        0 25px 60px rgba(0,188,212,.14);

}

/*==================================================
        INPUTS
==================================================*/

.contactform-field input,

.contactform-field select,

.contactform-field textarea{

    transition:
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;

}

.contactform-field input:focus,

.contactform-field select:focus,

.contactform-field textarea:focus{

    border-color:#00BCD4;

    background:rgba(255,255,255,.08);

    box-shadow:
        0 0 0 4px rgba(0,188,212,.10);

}

/*==================================================
        LABEL
==================================================*/

.contactform-field label{

    transition:
        color .35s ease;

}

.contactform-field:focus-within label{

    color:#00BCD4;

}

/*==================================================
        SUBMIT BUTTON
==================================================*/

.contactform-submit{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.contactform-submit::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.contactform-submit:hover{

    transform:translateY(-5px);

    box-shadow:
        0 18px 45px rgba(0,188,212,.30);

}

.contactform-submit:hover::before{

    left:150%;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.contactform-info{

animation:none;

}

.contactform-info:hover,

.contactform-box:hover{

transform:none;

box-shadow:none;

}

.contactform-highlight:hover{

transform:none;

}

.contactform-highlight:hover .contactform-check{

transform:scale(1.05);

box-shadow:none;

}

.contactform-submit:hover{

transform:none;

box-shadow:none;

}

.contactform-badge:hover{

transform:none;

box-shadow:none;

}

}

/* Form Section Ends Here */

/* Location Section Starts Here */

/*==================================================
        FIND US
==================================================*/

.contactlocation-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.contactlocation-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(130px);

}

.contactlocation-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.contactlocation-section .section-heading{

    position:relative;

    z-index:2;

    max-width:850px;

    margin:0 auto 80px;

}

.contactlocation-section .section-heading h2{

    margin:22px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.contactlocation-section .section-heading h2 span{

    color:#00BCD4;

}

.contactlocation-section .section-heading p{

    max-width:720px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
GOOGLE MAP
==================================*/

.contactlocation-map{

    position:relative;

    z-index:2;

    overflow:hidden;

    border-radius:30px;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(16px);

    box-shadow:

        0 20px 60px rgba(0,0,0,.25);

}

.contactlocation-map iframe{

    width:100%;

    height:520px;

    border:none;

    display:block;

    filter:grayscale(.15) contrast(1.05);

}

/*==================================
LOCATION SUMMARY
==================================*/

.contactlocation-summary{

    position:relative;

    z-index:3;

    margin:40px auto 0;

    padding:35px 40px;

    max-width:1100px;

    display:grid;

    grid-template-columns:1fr 1fr auto;

    gap:35px;

    align-items:center;

    border-radius:24px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}

/*==================================
ITEM
==================================*/

.contactlocation-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

}

/*==================================
ICON
==================================*/

.contactlocation-icon{

    width:65px;

    height:65px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-size:1.5rem;

}

/*==================================
CONTENT
==================================*/

.contactlocation-content h4{

    margin:0 0 10px;

    color:#fff;

    font-size:1.2rem;

    font-weight:700;

}

.contactlocation-content p{

    margin:0;

    color:#CBD5E1;

    font-size:.95rem;

    line-height:1.9;

}

/*==================================
ACTION
==================================*/

.contactlocation-action{

    display:flex;

    justify-content:flex-end;

}

.contactlocation-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:17px 34px;

    border-radius:60px;

    text-decoration:none;

    background:linear-gradient(

        135deg,

        #00BCD4,

        #7ED321

    );

    color:#08111F;

    font-weight:600;

    font-size:.95rem;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.contactlocation-summary{

grid-template-columns:1fr;

text-align:center;

padding:35px 30px;

}

.contactlocation-item{

justify-content:center;

text-align:left;

}

.contactlocation-action{

justify-content:center;

}

}

@media(max-width:768px){

.contactlocation-section{

padding:90px 5%;

}

.contactlocation-section .section-heading{

margin-bottom:60px;

}

.contactlocation-section .section-heading h2{

font-size:2.3rem;

}

.contactlocation-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.contactlocation-map{

border-radius:22px;

}

.contactlocation-map iframe{

height:340px;

}

.contactlocation-summary{

padding:28px 22px;

border-radius:20px;

gap:25px;

}

.contactlocation-item{

flex-direction:column;

align-items:center;

text-align:center;

}

.contactlocation-icon{

width:56px;

height:56px;

font-size:1.3rem;

}

.contactlocation-content h4{

font-size:1.05rem;

}

.contactlocation-content p{

font-size:.92rem;

line-height:1.8;

}

.contactlocation-btn{

width:100%;

padding:16px;

}

}

/* Part - 2 */

/*==================================================
        MAP
==================================================*/

.contactlocation-map{

    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;

}

.contactlocation-map:hover{

    transform:translateY(-8px);

    border-color:rgba(0,188,212,.20);

    box-shadow:

        0 30px 70px rgba(0,188,212,.18);

}

/*==================================
MAP IFRAME
==================================*/

.contactlocation-map iframe{

    transition:
        transform .7s ease,
        filter .45s ease;

}

.contactlocation-map:hover iframe{

    transform:scale(1.03);

    filter:grayscale(0) contrast(1.08);

}

/*==================================================
        LOCATION SUMMARY
==================================================*/

.contactlocation-summary{

    transition:
        border-color .35s ease,
        box-shadow .35s ease;

}

.contactlocation-summary:hover{

    border-color:rgba(0,188,212,.18);

    box-shadow:

        0 20px 60px rgba(0,188,212,.14);

}

/*==================================================
        LOCATION ITEM
==================================================*/

.contactlocation-item{

    transition:
        transform .35s ease;

}

.contactlocation-item:hover{

    transform:translateY(-5px);

}

/*==================================================
        ICON
==================================================*/

.contactlocation-icon{

    position:relative;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

/* Pulse Ring */

.contactlocation-icon::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:contactLocationPulse 3s ease-out infinite;

}

@keyframes contactLocationPulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.45);

        opacity:0;

    }

}

.contactlocation-item:hover .contactlocation-icon{

    transform:rotate(-8deg) scale(1.08);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.18),

        rgba(126,211,33,.16)

    );

    border-color:rgba(0,188,212,.28);

    box-shadow:

        0 0 30px rgba(0,188,212,.28);

}

/*==================================================
        CONTENT
==================================================*/

.contactlocation-content h4{

    transition:
        color .35s ease,
        transform .35s ease;

}

.contactlocation-content p{

    transition:
        color .35s ease;

}

.contactlocation-item:hover h4{

    color:#00BCD4;

    transform:translateY(-2px);

}

.contactlocation-item:hover p{

    color:#E2E8F0;

}

/*==================================================
        DIRECTION BUTTON
==================================================*/

.contactlocation-btn{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.contactlocation-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.contactlocation-btn:hover{

    transform:translateY(-5px);

    box-shadow:

        0 18px 45px rgba(0,188,212,.30);

}

.contactlocation-btn:hover::before{

    left:150%;

}

/*==================================================
        FLOATING SUMMARY ITEMS
==================================================*/

.contactlocation-item{

    animation:contactLocationFloat 8s ease-in-out infinite;

}

.contactlocation-item:nth-child(2){

animation-delay:1s;

}

@keyframes contactLocationFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-5px);

    }

}

.contactlocation-item:hover{

    animation-play-state:paused;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.contactlocation-map:hover{

transform:none;

box-shadow:none;

}

.contactlocation-map:hover iframe{

transform:scale(1.01);

}

.contactlocation-summary:hover{

box-shadow:none;

}

.contactlocation-item{

animation:none;

}

.contactlocation-item:hover{

transform:none;

}

.contactlocation-item:hover .contactlocation-icon{

transform:scale(1.05);

box-shadow:none;

}

.contactlocation-btn:hover{

transform:none;

box-shadow:none;

}

}

/* Location Section Ends Here */

/* Social Section Starts Here */

/*==================================================
        CONNECT WITH US
==================================================*/

.contactsocial-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.contactsocial-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,188,212,.08),

        transparent 70%

    );

    filter:blur(130px);

}

.contactsocial-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(126,211,33,.08),

        transparent 70%

    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.contactsocial-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.contactsocial-section .section-heading h2{

    margin:24px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.contactsocial-section .section-heading h2 span{

    color:#00BCD4;

}

.contactsocial-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
SOCIAL GRID
==================================*/

.contactsocial-grid{

    position:relative;

    z-index:5;

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

/*==================================
SOCIAL ITEM
==================================*/

.contactsocial-item{

    position:relative;

    padding:35px 25px;

    text-align:center;

    text-decoration:none;

    border-radius:24px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    overflow:hidden;

}

.contactsocial-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        135deg,

        rgba(255,255,255,.05),

        transparent 45%,

        rgba(0,188,212,.05)

    );

    pointer-events:none;

}

/*==================================
SOCIAL ICON
==================================*/

.contactsocial-icon{

    width:95px;

    height:95px;

    margin:0 auto 24px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,188,212,.08);

    border:1px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-size:2.4rem;

}

/*==================================
TEXT
==================================*/

.contactsocial-item h4{

    margin:0 0 10px;

    color:#fff;

    font-size:1.3rem;

    font-weight:700;

}

.contactsocial-item span{

    display:block;

    color:#94A3B8;

    font-size:.92rem;

    line-height:1.8;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.contactsocial-grid{

grid-template-columns:repeat(2,1fr);

gap:25px;

}

}

@media(max-width:768px){

.contactsocial-section{

padding:90px 5%;

}

.contactsocial-section .section-heading{

margin-bottom:60px;

}

.contactsocial-section .section-heading h2{

font-size:2.3rem;

}

.contactsocial-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.contactsocial-grid{

grid-template-columns:1fr;

gap:20px;

}

.contactsocial-item{

padding:30px 22px;

border-radius:20px;

}

.contactsocial-icon{

width:78px;

height:78px;

margin-bottom:18px;

font-size:2rem;

}

.contactsocial-item h4{

font-size:1.15rem;

}

.contactsocial-item span{

font-size:.9rem;

}

}

/* Part - 2 */

/*==================================================
        SOCIAL ITEM
==================================================*/

.contactsocial-item{

    transition:
        transform .4s ease,
        background .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;

    animation:contactSocialFloat 8s ease-in-out infinite;

}

.contactsocial-item:hover{

    transform:translateY(-12px);

    background:rgba(255,255,255,.07);

    border-color:rgba(0,188,212,.22);

    box-shadow:
        0 25px 60px rgba(0,188,212,.18);

}

/* Floating Delay */

.contactsocial-item:nth-child(2){

animation-delay:.6s;

}

.contactsocial-item:nth-child(3){

animation-delay:1.2s;

}

.contactsocial-item:nth-child(4){

animation-delay:1.8s;

}

.contactsocial-item:nth-child(5){

animation-delay:2.4s;

}

.contactsocial-item:nth-child(6){

animation-delay:3s;

}

@keyframes contactSocialFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

}

.contactsocial-item:hover{

    animation-play-state:paused;

}

/*==================================================
        TOP ACCENT
==================================================*/

.contactsocial-item::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:0;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    transition:.35s;

}

.contactsocial-item:hover::after{

    height:4px;

}

/*==================================================
        ICON
==================================================*/

.contactsocial-icon{

    position:relative;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        color .35s ease;

}

/* Pulse Ring */

.contactsocial-icon::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:contactSocialPulse 3s ease-out infinite;

}

@keyframes contactSocialPulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.45);

        opacity:0;

    }

}

.contactsocial-item:hover .contactsocial-icon{

    transform:rotate(-10deg) scale(1.08);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.20),

        rgba(126,211,33,.16)

    );

    border-color:rgba(0,188,212,.30);

    color:#ffffff;

    box-shadow:
        0 0 35px rgba(0,188,212,.28);

}

/*==================================================
        TITLE
==================================================*/

.contactsocial-item h4{

    transition:
        color .35s ease,
        transform .35s ease;

}

.contactsocial-item:hover h4{

    color:#00BCD4;

    transform:translateY(-3px);

}

/*==================================================
        DESCRIPTION
==================================================*/

.contactsocial-item span{

    transition:
        color .35s ease;

}

.contactsocial-item:hover span{

    color:#E2E8F0;

}

/*==================================================
        SHINE EFFECT
==================================================*/

.contactsocial-item{

    overflow:hidden;

}

.contactsocial-item .contactsocial-icon::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    border-radius:50%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.contactsocial-item:hover .contactsocial-icon::after{

    left:150%;

}

/*==================================================
        PLATFORM BRAND COLORS
==================================================*/

.contactsocial-item:nth-child(1):hover .contactsocial-icon{

background:linear-gradient(135deg,#1877F2,#00BCD4);

}

.contactsocial-item:nth-child(2):hover .contactsocial-icon{

background:linear-gradient(135deg,#E4405F,#FCAF45);

}

.contactsocial-item:nth-child(3):hover .contactsocial-icon{

background:linear-gradient(135deg,#0A66C2,#00BCD4);

}

.contactsocial-item:nth-child(4):hover .contactsocial-icon{

background:linear-gradient(135deg,#111111,#444444);

}

.contactsocial-item:nth-child(5):hover .contactsocial-icon{

background:linear-gradient(135deg,#FF0000,#FF5E57);

}

.contactsocial-item:nth-child(6):hover .contactsocial-icon{

background:linear-gradient(135deg,#25D366,#00BCD4);

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.contactsocial-item{

animation:none;

}

.contactsocial-item:hover{

transform:none;

box-shadow:none;

}

.contactsocial-item:hover .contactsocial-icon{

transform:scale(1.05);

box-shadow:none;

}

.contactsocial-item:hover h4{

transform:none;

}

}

/* Social Section Ends Here */

/* FAQ Section Starts Here */

/*==================================================
        CONTACT FAQ
==================================================*/

.contactfaq-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.contactfaq-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(130px);

}

.contactfaq-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.contactfaq-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.contactfaq-section .section-heading h2{

    margin:24px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.contactfaq-section .section-heading h2 span{

    color:#00BCD4;

}

.contactfaq-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
FAQ WRAPPER
==================================*/

.contactfaq-wrapper{

    position:relative;

    z-index:5;

    max-width:950px;

    margin:auto;

}

/*==================================
FAQ ITEM
==================================*/

.contactfaq-item{

    border-bottom:1px solid rgba(255,255,255,.10);

}

/*==================================
QUESTION
==================================*/

.contactfaq-question{

    width:100%;

    padding:28px 0;

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:none;

    border:none;

    cursor:pointer;

    text-align:left;

}

/*==================================
LEFT SIDE
==================================*/

.contactfaq-left{

    display:flex;

    align-items:center;

    gap:20px;

}

/*==================================
PHONE ICON
==================================*/

.contactfaq-icon{

    width:54px;

    height:54px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-size:1.2rem;

}

/*==================================
QUESTION
==================================*/

.contactfaq-question h4{

    margin:0;

    color:#fff;

    font-size:1.18rem;

    font-weight:600;

    line-height:1.5;

}

/*==================================
TOGGLE
==================================*/

.contactfaq-toggle{

    width:42px;

    height:42px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:#00BCD4;

    font-size:1.5rem;

    font-weight:600;

}

/*==================================
ANSWER
==================================*/

.contactfaq-answer{

    max-height:0;

    opacity:0;

    overflow:hidden;

    transition:
        max-height .45s ease,
        opacity .35s ease;

}

.contactfaq-answer p{

    margin:0;

    padding:
        0
        0
        28px
        74px;

    color:#CBD5E1;

    font-size:.96rem;

    line-height:1.9;

}

/*==================================
ACTIVE
==================================*/

.contactfaq-item.active .contactfaq-answer{

    max-height:220px;

    opacity:1;

}

.contactfaq-item.active .contactfaq-toggle{

    background:#00BCD4;

    border-color:#00BCD4;

    color:#fff;

    font-size:0;

}

.contactfaq-item.active .contactfaq-toggle::before{

    content:"−";

    font-size:1.5rem;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:768px){

.contactfaq-section{

padding:90px 5%;

}

.contactfaq-section .section-heading{

margin-bottom:60px;

}

.contactfaq-section .section-heading h2{

font-size:2.3rem;

}

.contactfaq-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.contactfaq-question{

padding:22px 0;

}

.contactfaq-left{

gap:15px;

align-items:flex-start;

}

.contactfaq-icon{

width:46px;

height:46px;

font-size:1rem;

}

.contactfaq-question h4{

font-size:1rem;

}

.contactfaq-toggle{

width:36px;

height:36px;

font-size:1.2rem;

}

.contactfaq-answer p{

padding:
0
0
22px
60px;

font-size:.92rem;

line-height:1.8;

}

}

/* Part - 2 */

/*==================================================
        FAQ ITEM
==================================================*/

.contactfaq-item{

    position:relative;

    transition:
        border-color .35s ease;

}

.contactfaq-item:hover{

    border-bottom-color:rgba(0,188,212,.22);

}

/* Animated Line */

.contactfaq-item::before{

    content:"";

    position:absolute;

    left:0;

    bottom:-1px;

    width:0;

    height:2px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    transition:width .4s ease;

}

.contactfaq-item:hover::before,

.contactfaq-item.active::before{

    width:100%;

}

/*==================================================
        PHONE ICON
==================================================*/

.contactfaq-icon{

    position:relative;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

/* Pulse Ring */

.contactfaq-icon::after{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:contactFaqPulse 3s ease-out infinite;

}

@keyframes contactFaqPulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.45);

        opacity:0;

    }

}

.contactfaq-item:hover .contactfaq-icon{

    transform:rotate(-10deg) scale(1.08);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.20),

        rgba(126,211,33,.16)

    );

    border-color:rgba(0,188,212,.28);

    box-shadow:
        0 0 28px rgba(0,188,212,.25);

}

/*==================================================
        QUESTION
==================================================*/

.contactfaq-question h4{

    transition:
        color .35s ease,
        transform .35s ease;

}

.contactfaq-item:hover h4{

    color:#00BCD4;

    transform:translateX(6px);

}

.contactfaq-item.active h4{

    color:#00BCD4;

}

/*==================================================
        TOGGLE
==================================================*/

.contactfaq-toggle{

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.contactfaq-item:hover .contactfaq-toggle{

    transform:rotate(90deg);

    background:rgba(0,188,212,.08);

    border-color:rgba(0,188,212,.20);

    box-shadow:
        0 0 18px rgba(0,188,212,.18);

}

.contactfaq-item.active .contactfaq-toggle{

    transform:rotate(180deg);

}

/*==================================================
        ANSWER
==================================================*/

.contactfaq-answer p{

    transition:color .35s ease;

}

.contactfaq-item:hover .contactfaq-answer p{

    color:#E2E8F0;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.contactfaq-item:hover h4{

transform:none;

}

.contactfaq-item:hover .contactfaq-toggle{

transform:none;

box-shadow:none;

}

.contactfaq-item:hover .contactfaq-icon{

transform:scale(1.05);

}

}

/* FAQ Section Ends Here */

/* CTA Section Starts Here */

/*==================================================
        CONTACT CTA
==================================================*/

.contactcta-section{

    position:relative;

    overflow:hidden;

    padding:140px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

/*==================================
BACKGROUND GLOWS
==================================*/

.contactcta-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    pointer-events:none;

}

.contactcta-glow-left{

    width:650px;

    height:650px;

    left:-240px;

    top:-240px;

    background:rgba(0,188,212,.12);

}

.contactcta-glow-right{

    width:520px;

    height:520px;

    right:-180px;

    bottom:-180px;

    background:rgba(126,211,33,.10);

}

/*==================================
DOTTED NETWORK
==================================*/

.contactcta-network{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.contactcta-network span{

    position:absolute;

    border-top:2px dashed rgba(255,255,255,.08);

}

.contactcta-network span:nth-child(1){

top:18%;

left:8%;

width:240px;

transform:rotate(12deg);

}

.contactcta-network span:nth-child(2){

top:32%;

right:10%;

width:210px;

transform:rotate(-18deg);

}

.contactcta-network span:nth-child(3){

left:18%;

bottom:24%;

width:260px;

transform:rotate(-10deg);

}

.contactcta-network span:nth-child(4){

right:18%;

bottom:18%;

width:220px;

transform:rotate(15deg);

}

.contactcta-network span:nth-child(5){

top:50%;

left:42%;

width:180px;

transform:rotate(90deg);

}

/*==================================
FLOATING ICONS
==================================*/

.contactcta-icons{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.contactcta-icons i{

    position:absolute;

    color:rgba(255,255,255,.08);

    font-size:2rem;

}

.contactcta-icon1{

top:18%;

left:12%;

}

.contactcta-icon2{

top:24%;

right:15%;

}

.contactcta-icon3{

left:18%;

bottom:18%;

}

.contactcta-icon4{

right:22%;

top:55%;

}

.contactcta-icon5{

bottom:14%;

right:35%;

}

/*==================================
ABSTRACT SHAPES
==================================*/

.contactcta-shapes{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.contactcta-shape{

    position:absolute;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.03);

    backdrop-filter:blur(12px);

}

.contactcta-circle{

    width:70px;

    height:70px;

    border-radius:50%;

    top:18%;

    left:42%;

}

.contactcta-square{

    width:58px;

    height:58px;

    top:38%;

    right:18%;

    transform:rotate(18deg);

}

.contactcta-diamond{

    width:48px;

    height:48px;

    left:20%;

    bottom:16%;

    transform:rotate(45deg);

}

/*==================================
GLASS PANEL
==================================*/

.contactcta-panel{

    position:relative;

    z-index:5;

    max-width:980px;

    margin:auto;

    padding:70px 60px;

    text-align:center;

    border-radius:34px;

    overflow:hidden;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(20px);

}

.contactcta-panel::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        135deg,

        rgba(255,255,255,.05),

        transparent 45%,

        rgba(0,188,212,.05)

    );

    pointer-events:none;

}

/*==================================
BADGE
==================================*/

.contactcta-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    margin-bottom:28px;

    border-radius:60px;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-size:.95rem;

    font-weight:600;

}

/*==================================
HEADING
==================================*/

.contactcta-panel h2{

    margin:0 0 25px;

    color:#fff;

    font-size:3.4rem;

    line-height:1.2;

    font-weight:800;

}

.contactcta-panel h2 span{

    display:block;

    color:#00BCD4;

}

/*==================================
CONTENT
==================================*/

.contactcta-panel p{

    max-width:730px;

    margin:0 auto 45px;

    color:#CBD5E1;

    font-size:1rem;

    line-height:2;

}

/*==================================
BUTTONS
==================================*/

.contactcta-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

}

.contactcta-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:17px 34px;

    border-radius:60px;

    text-decoration:none;

    font-size:.96rem;

    font-weight:600;

    transition:.35s;

}

/* Primary */

.contactcta-primary{

    color:#08111F;

    background:linear-gradient(

        135deg,

        #00BCD4,

        #7ED321

    );

}

/* Secondary */

.contactcta-secondary{

    color:#fff;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(12px);

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:768px){

.contactcta-section{

padding:90px 5%;

}

.contactcta-panel{

padding:45px 25px;

border-radius:24px;

}

.contactcta-badge{

font-size:.85rem;

padding:10px 18px;

margin-bottom:22px;

}

.contactcta-panel h2{

font-size:2.3rem;

}

.contactcta-panel p{

font-size:.95rem;

line-height:1.8;

margin-bottom:35px;

}

.contactcta-buttons{

flex-direction:column;

gap:15px;

}

.contactcta-btn{

width:100%;

padding:16px;

font-size:.94rem;

}

}

/* Part - 2 */

/*==================================================
        GLASS PANEL
==================================================*/

.contactcta-panel{

    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;

    animation:contactCtaFloat 8s ease-in-out infinite;

}

@keyframes contactCtaFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

.contactcta-panel:hover{

    border-color:rgba(0,188,212,.22);

    box-shadow:
        0 30px 80px rgba(0,188,212,.18);

}

/*==================================================
        BACKGROUND GLOWS
==================================================*/

.contactcta-glow{

    animation:contactCtaGlow 8s ease-in-out infinite;

}

.contactcta-glow-right{

    animation-delay:4s;

}

@keyframes contactCtaGlow{

    0%,100%{

        transform:scale(1);

        opacity:.6;

    }

    50%{

        transform:scale(1.18);

        opacity:1;

    }

}

/*==================================================
        DOTTED NETWORK
==================================================*/

.contactcta-network span{

    animation:contactCtaNetwork 4s linear infinite;

}

@keyframes contactCtaNetwork{

    0%{

        border-top-color:rgba(255,255,255,.05);

    }

    50%{

        border-top-color:rgba(0,188,212,.22);

    }

    100%{

        border-top-color:rgba(255,255,255,.05);

    }

}

/*==================================================
        FLOATING ICONS
==================================================*/

.contactcta-icons i{

    animation:contactCtaIconFloat 6s ease-in-out infinite;

}

.contactcta-icon2{

animation-delay:.8s;

}

.contactcta-icon3{

animation-delay:1.6s;

}

.contactcta-icon4{

animation-delay:2.4s;

}

.contactcta-icon5{

animation-delay:3.2s;

}

@keyframes contactCtaIconFloat{

    0%,100%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(-16px) rotate(8deg);

    }

}

/*==================================================
        ABSTRACT SHAPES
==================================================*/

.contactcta-shape{

    animation:contactCtaShapeFloat 8s ease-in-out infinite;

}

.contactcta-circle{

animation-delay:.5s;

}

.contactcta-square{

animation-delay:1.5s;

}

.contactcta-diamond{

animation-delay:2.5s;

}

@keyframes contactCtaShapeFloat{

    0%,100%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(-14px) rotate(15deg);

    }

}

/*==================================================
        BADGE
==================================================*/

.contactcta-badge{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.contactcta-badge::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.contactcta-badge:hover{

    transform:translateY(-3px);

    box-shadow:
        0 0 25px rgba(0,188,212,.20);

}

.contactcta-badge:hover::before{

    left:150%;

}

/*==================================================
        HEADING
==================================================*/

.contactcta-panel h2 span{

    animation:contactCtaHeadingGlow 3s ease-in-out infinite;

}

@keyframes contactCtaHeadingGlow{

    0%,100%{

        text-shadow:none;

    }

    50%{

        text-shadow:
            0 0 20px rgba(0,188,212,.45);

    }

}

/*==================================================
        BUTTONS
==================================================*/

.contactcta-btn{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.contactcta-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.contactcta-btn:hover::before{

    left:150%;

}

/* Primary Button */

.contactcta-primary:hover{

    transform:translateY(-5px);

    box-shadow:
        0 18px 45px rgba(0,188,212,.30);

}

/* Secondary Buttons */

.contactcta-secondary:hover{

    transform:translateY(-5px);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.16),

        rgba(126,211,33,.12)

    );

    border-color:rgba(0,188,212,.25);

    box-shadow:
        0 18px 40px rgba(0,188,212,.18);

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.contactcta-panel{

animation:none;

}

.contactcta-panel:hover{

transform:none;

box-shadow:none;

}

.contactcta-badge:hover{

transform:none;

box-shadow:none;

}

.contactcta-primary:hover,

.contactcta-secondary:hover{

transform:none;

box-shadow:none;

}

.contactcta-glow{

animation-duration:10s;

}

}

/* CTA Section Ends Here */

/* Contact Us Page Ends Here */


/* Donate Page Starts Here */

/* Hero Section Starts Here */

/*==================================================
        DONATE HERO
==================================================*/

.donatehero-section{

    position:relative;

    overflow:hidden;

    padding:170px 5% 120px;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

/*==================================
BACKGROUND GLOWS
==================================*/

.donatehero-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    pointer-events:none;

}

.donatehero-glow-left{

    width:620px;

    height:620px;

    top:-240px;

    left:-220px;

    background:rgba(0,188,212,.12);

}

.donatehero-glow-right{

    width:520px;

    height:520px;

    right:-180px;

    bottom:-180px;

    background:rgba(126,211,33,.10);

}

/*==================================
FLOATING DONATION ICONS
==================================*/

.donatehero-icons{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.donatehero-icons i{

    position:absolute;

    color:rgba(255,255,255,.08);

    font-size:2rem;

}

.donatehero-icon1{

top:16%;

left:8%;

}

.donatehero-icon2{

top:28%;

right:10%;

}

.donatehero-icon3{

top:62%;

left:10%;

}

.donatehero-icon4{

bottom:22%;

right:15%;

}

.donatehero-icon5{

bottom:14%;

left:46%;

}

/*==================================
FLOATING HEARTS
==================================*/

.donatehero-hearts{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.donatehero-heart{

    position:absolute;

    color:rgba(255,255,255,.12);

    font-size:1.8rem;

}

.heart1{

top:18%;

left:32%;

}

.heart2{

top:58%;

right:30%;

}

.heart3{

bottom:18%;

left:20%;

}

.heart4{

top:36%;

right:8%;

}

/*==================================
PARTICLES
==================================*/

.donatehero-particles{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.donatehero-particles span{

    position:absolute;

    width:6px;

    height:6px;

    border-radius:50%;

    background:rgba(255,255,255,.18);

}

.donatehero-particles span:nth-child(1){

top:20%;

left:18%;

}

.donatehero-particles span:nth-child(2){

top:32%;

right:20%;

}

.donatehero-particles span:nth-child(3){

bottom:28%;

left:28%;

}

.donatehero-particles span:nth-child(4){

bottom:18%;

right:32%;

}

.donatehero-particles span:nth-child(5){

top:58%;

left:46%;

}

.donatehero-particles span:nth-child(6){

top:70%;

right:14%;

}

/*==================================
WRAPPER
==================================*/

.donatehero-wrapper{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:1fr 520px;

    gap:60px;

    align-items:center;

}

/*==================================
BREADCRUMB
==================================*/

.donatehero-breadcrumb{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-bottom:28px;

    padding:12px 22px;

    border-radius:50px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(14px);

}

.donatehero-breadcrumb a,

.donatehero-breadcrumb span{

    color:#CBD5E1;

    text-decoration:none;

    font-size:.95rem;

}

.donatehero-breadcrumb i{

    color:#00BCD4;

    font-size:.8rem;

}

/*==================================
BADGE
==================================*/

.donatehero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    margin-bottom:28px;

    border-radius:60px;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-size:.95rem;

    font-weight:600;

}

/*==================================
CONTENT
==================================*/

.donatehero-content h1{

    margin-bottom:25px;

    color:#fff;

    font-size:4.2rem;

    line-height:1.15;

    font-weight:800;

}

.donatehero-content h1 span{

    display:block;

    color:#00BCD4;

}

.donatehero-content p{

    max-width:650px;

    margin-bottom:40px;

    color:#CBD5E1;

    font-size:1rem;

    line-height:2;

}

/*==================================
BUTTONS
==================================*/

.donatehero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.donatehero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:17px 34px;

    border-radius:60px;

    text-decoration:none;

    font-size:.96rem;

    font-weight:600;

}

.donatehero-primary{

    color:#08111F;

    background:linear-gradient(

        135deg,

        #00BCD4,

        #7ED321

    );

}

.donatehero-secondary{

    color:#fff;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(12px);

}

/*==================================
DONATION VISUAL
==================================*/

.donatehero-visual{

    display:flex;

    justify-content:center;

}

.donatehero-circle{

    position:relative;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}

.donatehero-svg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

}

.donatehero-svg circle{

    stroke:rgba(0,188,212,.18);

    stroke-width:2;

    stroke-dasharray:10 10;

}

.donatehero-center{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:110px;

    height:110px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(

        135deg,

        #00BCD4,

        #7ED321

    );

    color:#08111F;

    font-size:2.8rem;

}

.donatehero-node{

    position:absolute;

    width:68px;

    height:68px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(10px);

    font-size:1.5rem;

}

.node1{

top:18px;

left:50%;

transform:translateX(-50%)!important;

}

.node2{

left:18px;

top:50%;

transform:translateY(-50%)!important;

}

.node3{

right:18px;

top:50%;

transform:translateY(-50%)!important;

}

.node4{

bottom:18px;

left:50%;

transform:translateX(-50%)!important;

}

/*==================================
SCROLL
==================================*/

.donatehero-scroll{

    margin-top:80px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

}

.donatehero-scroll span{

    color:#94A3B8;

    font-size:.9rem;

}

.donatehero-mouse{

    width:34px;

    height:58px;

    border:2px solid rgba(255,255,255,.18);

    border-radius:25px;

    display:flex;

    justify-content:center;

    padding-top:8px;

}

.donatehero-wheel{

    width:6px;

    height:12px;

    border-radius:20px;

    background:#00BCD4;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.donatehero-wrapper{

grid-template-columns:1fr;

text-align:center;

}

.donatehero-buttons{

justify-content:center;

}

.donatehero-content p{

margin-left:auto;

margin-right:auto;

}

.donatehero-breadcrumb{

justify-content:center;

}

}

@media(max-width:768px){

.donatehero-section{

padding:140px 5% 90px;

}

.donatehero-content h1{

font-size:2.6rem;

}

.donatehero-content p{

font-size:.95rem;

line-height:1.8;

}

.donatehero-circle{

width:320px;

height:320px;

}

.donatehero-center{

width:90px;

height:90px;

font-size:2rem;

}

.donatehero-node{

width:55px;

height:55px;

font-size:1.2rem;

}

.donatehero-buttons{

flex-direction:column;

}

.donatehero-btn{

width:100%;

}

}

/* Part - 2 */

/*==================================================
        HERO CONTENT
==================================================*/

.donatehero-content{

    animation:donateHeroFadeLeft 1s ease;

}

.donatehero-visual{

    animation:donateHeroFadeRight 1s ease;

}

@keyframes donateHeroFadeLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes donateHeroFadeRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*==================================================
        BACKGROUND GLOWS
==================================================*/

.donatehero-glow{

    animation:donateHeroGlow 8s ease-in-out infinite;

}

.donatehero-glow-right{

    animation-delay:4s;

}

@keyframes donateHeroGlow{

    0%,100%{

        transform:scale(1);

        opacity:.6;

    }

    50%{

        transform:scale(1.18);

        opacity:1;

    }

}

/*==================================================
        FLOATING DONATION ICONS
==================================================*/

.donatehero-icons i{

    animation:donateHeroIconFloat 6s ease-in-out infinite;

}

.donatehero-icon2{

animation-delay:.8s;

}

.donatehero-icon3{

animation-delay:1.6s;

}

.donatehero-icon4{

animation-delay:2.4s;

}

.donatehero-icon5{

animation-delay:3.2s;

}

@keyframes donateHeroIconFloat{

    0%,100%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(-18px) rotate(10deg);

    }

}

/*==================================================
        FLOATING HEARTS
==================================================*/

.donatehero-heart{

    animation:donateHeroHeart 5s ease-in-out infinite;

}

.heart2{

animation-delay:1s;

}

.heart3{

animation-delay:2s;

}

.heart4{

animation-delay:3s;

}

@keyframes donateHeroHeart{

    0%{

        transform:translateY(0) scale(.9);

        opacity:.2;

    }

    50%{

        transform:translateY(-22px) scale(1.2);

        opacity:.7;

    }

    100%{

        transform:translateY(-45px) scale(.9);

        opacity:0;

    }

}

/*==================================================
        PARTICLES
==================================================*/

.donatehero-particles span{

    animation:donateHeroParticle 6s linear infinite;

}

.donatehero-particles span:nth-child(2){

animation-delay:1s;

}

.donatehero-particles span:nth-child(3){

animation-delay:2s;

}

.donatehero-particles span:nth-child(4){

animation-delay:3s;

}

.donatehero-particles span:nth-child(5){

animation-delay:4s;

}

.donatehero-particles span:nth-child(6){

animation-delay:5s;

}

@keyframes donateHeroParticle{

    0%{

        transform:translateY(0) scale(.5);

        opacity:0;

    }

    50%{

        opacity:1;

    }

    100%{

        transform:translateY(-70px) scale(1.2);

        opacity:0;

    }

}

/*==================================================
        BREADCRUMB
==================================================*/

.donatehero-breadcrumb{

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.donatehero-breadcrumb:hover{

    transform:translateY(-3px);

    border-color:rgba(0,188,212,.20);

    box-shadow:

        0 0 22px rgba(0,188,212,.18);

}

/*==================================================
        BADGE
==================================================*/

.donatehero-badge{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.donatehero-badge::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.donatehero-badge:hover{

    transform:translateY(-3px);

    box-shadow:

        0 0 25px rgba(0,188,212,.25);

}

.donatehero-badge:hover::before{

    left:150%;

}

/*==================================================
        DONATION VISUAL
==================================================*/

.donatehero-circle{

    animation:donateHeroRotate 30s linear infinite;

}

@keyframes donateHeroRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.donatehero-center{

    animation:donateHeroCenterPulse 3s ease-in-out infinite;

}

@keyframes donateHeroCenterPulse{

    0%,100%{

        transform:translate(-50%,-50%) scale(1);

    }

    50%{

        transform:translate(-50%,-50%) scale(1.08);

    }

}

/* Keep Nodes Upright */

.donatehero-node{

    animation:donateHeroNodeRotate 30s linear infinite reverse;

}

@keyframes donateHeroNodeRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(-360deg);

    }

}

/*==================================================
        BUTTONS
==================================================*/

.donatehero-btn{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.donatehero-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.donatehero-btn:hover::before{

    left:150%;

}

.donatehero-primary:hover{

    transform:translateY(-5px);

    box-shadow:

        0 18px 45px rgba(0,188,212,.30);

}

.donatehero-secondary:hover{

    transform:translateY(-5px);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.18),

        rgba(126,211,33,.14)

    );

    border-color:rgba(0,188,212,.22);

    box-shadow:

        0 18px 40px rgba(0,188,212,.18);

}

/*==================================================
        SCROLL INDICATOR
==================================================*/

.donatehero-wheel{

    animation:donateHeroScroll 1.8s infinite;

}

@keyframes donateHeroScroll{

    0%{

        transform:translateY(0);

        opacity:1;

    }

    100%{

        transform:translateY(18px);

        opacity:0;

    }

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.donatehero-circle{

animation-duration:40s;

}

.donatehero-btn:hover{

transform:none;

box-shadow:none;

}

.donatehero-badge:hover{

transform:none;

box-shadow:none;

}

.donatehero-breadcrumb:hover{

transform:none;

box-shadow:none;

}

.donatehero-glow{

animation-duration:10s;

}

}

/* Hero Section Ends Here */

/* Impact Section Starts Here */

/*==================================================
        DONATION IMPACT
==================================================*/

.donateimpact-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

/*==================================
BACKGROUND GLOWS
==================================*/

.donateimpact-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,188,212,.08),

        transparent 70%

    );

    filter:blur(130px);

}

.donateimpact-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(126,211,33,.08),

        transparent 70%

    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.donateimpact-section .section-heading{

    position:relative;

    z-index:2;

    max-width:850px;

    margin:0 auto 80px;

}

.donateimpact-section .section-heading h2{

    margin:24px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.donateimpact-section .section-heading h2 span{

    color:#00BCD4;

}

.donateimpact-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
GRID
==================================*/

.donateimpact-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

    max-width:1200px;

    margin:auto;

}

/*==================================
CARD
==================================*/

.donateimpact-card{

    position:relative;

    overflow:hidden;

    padding:42px;

    border-radius:26px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}

.donateimpact-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

}

.donateimpact-card::after{

    content:"";

    position:absolute;

    top:-120px;

    right:-120px;

    width:240px;

    height:240px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,188,212,.08),

        transparent 70%

    );

}

/*==================================
NUMBER
==================================*/

.donateimpact-number{

    position:absolute;

    top:22px;

    right:28px;

    color:rgba(255,255,255,.06);

    font-size:4rem;

    font-weight:800;

    line-height:1;

    user-select:none;

}

/*==================================
ICON
==================================*/

.donateimpact-icon{

    width:82px;

    height:82px;

    margin-bottom:28px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    font-size:2rem;

}

/*==================================
TEXT
==================================*/

.donateimpact-card h3{

    margin-bottom:16px;

    color:#fff;

    font-size:1.45rem;

    font-weight:700;

    line-height:1.3;

}

.donateimpact-card p{

    color:#CBD5E1;

    font-size:.96rem;

    line-height:2;

    margin-bottom:28px;

}

/*==================================
BOTTOM LINE
==================================*/

.donateimpact-line{

    width:70px;

    height:4px;

    border-radius:10px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.donateimpact-grid{

grid-template-columns:1fr;

gap:25px;

}

}

@media(max-width:768px){

.donateimpact-section{

padding:90px 5%;

}

.donateimpact-section .section-heading{

margin-bottom:60px;

}

.donateimpact-section .section-heading h2{

font-size:2.3rem;

}

.donateimpact-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.donateimpact-card{

padding:30px 24px;

border-radius:22px;

}

.donateimpact-number{

font-size:3rem;

top:18px;

right:20px;

}

.donateimpact-icon{

width:68px;

height:68px;

margin-bottom:20px;

font-size:1.7rem;

}

.donateimpact-card h3{

font-size:1.2rem;

margin-bottom:12px;

}

.donateimpact-card p{

font-size:.92rem;

line-height:1.8;

margin-bottom:22px;

}

.donateimpact-line{

width:55px;

height:3px;

}

}

/* Part - 2 */

/*==================================================
        IMPACT CARD
==================================================*/

.donateimpact-card{

    transition:
        transform .4s ease,
        background .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;

    animation:donateImpactFloat 8s ease-in-out infinite;

}

.donateimpact-card:hover{

    transform:translateY(-12px);

    background:rgba(255,255,255,.07);

    border-color:rgba(0,188,212,.22);

    box-shadow:
        0 28px 70px rgba(0,188,212,.16);

}

/* Floating Delay */

.donateimpact-card:nth-child(2){

animation-delay:.8s;

}

.donateimpact-card:nth-child(3){

animation-delay:1.6s;

}

.donateimpact-card:nth-child(4){

animation-delay:2.4s;

}

@keyframes donateImpactFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

}

.donateimpact-card:hover{

    animation-play-state:paused;

}

/*==================================================
        TOP ACCENT
==================================================*/

.donateimpact-card::before{

    transition:
        height .35s ease,
        opacity .35s ease;

}

.donateimpact-card:hover::before{

    height:7px;

    opacity:1;

}

/*==================================================
        BACKGROUND GLOW
==================================================*/

.donateimpact-card::after{

    transition:
        transform .45s ease,
        opacity .45s ease;

}

.donateimpact-card:hover::after{

    transform:scale(1.35);

    opacity:1;

}

/*==================================================
        NUMBER
==================================================*/

.donateimpact-number{

    transition:
        color .35s ease,
        transform .35s ease;

}

.donateimpact-card:hover .donateimpact-number{

    color:rgba(0,188,212,.14);

    transform:scale(1.08);

}

/*==================================================
        ICON
==================================================*/

.donateimpact-icon{

    position:relative;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

/* Pulse Ring */

.donateimpact-icon::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:donateImpactPulse 3s ease-out infinite;

}

@keyframes donateImpactPulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.45);

        opacity:0;

    }

}

.donateimpact-card:hover .donateimpact-icon{

    transform:rotate(-10deg) scale(1.08);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.18),

        rgba(126,211,33,.16)

    );

    border-color:rgba(0,188,212,.30);

    box-shadow:
        0 0 30px rgba(0,188,212,.28);

}

/*==================================================
        TITLE
==================================================*/

.donateimpact-card h3{

    transition:
        color .35s ease,
        transform .35s ease;

}

.donateimpact-card:hover h3{

    color:#00BCD4;

    transform:translateY(-3px);

}

/*==================================================
        DESCRIPTION
==================================================*/

.donateimpact-card p{

    transition:
        color .35s ease;

}

.donateimpact-card:hover p{

    color:#E2E8F0;

}

/*==================================================
        BOTTOM LINE
==================================================*/

.donateimpact-line{

    transition:
        width .35s ease,
        box-shadow .35s ease;

}

.donateimpact-card:hover .donateimpact-line{

    width:130px;

    box-shadow:
        0 0 20px rgba(0,188,212,.35);

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.donateimpact-card{

animation:none;

}

.donateimpact-card:hover{

transform:none;

box-shadow:none;

}

.donateimpact-card:hover .donateimpact-number{

transform:none;

}

.donateimpact-card:hover .donateimpact-icon{

transform:scale(1.05);

box-shadow:none;

}

.donateimpact-card:hover h3{

transform:none;

}

.donateimpact-card:hover .donateimpact-line{

width:70px;

box-shadow:none;

}

}

/* Impact Section Ends Here */

/* Donation Form Section Starts Here */

/*==================================================
        DONATION FORM
==================================================*/

.donateform-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.donateform-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(130px);

}

.donateform-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.donateform-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.donateform-section .section-heading h2{

    margin:24px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.donateform-section .section-heading h2 span{

    color:#00BCD4;

}

.donateform-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
WRAPPER
==================================*/

.donateform-wrapper{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:420px 1fr;

    gap:35px;

    max-width:1400px;

    margin:auto;

    align-items:stretch;

}

/*==================================
LEFT PANEL
==================================*/

.donateform-info{

    padding:45px;

    border-radius:30px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}

.donateform-illustration{

    text-align:center;

    margin-bottom:30px;

}

.donateform-illustration img{

    width:100%;

    max-width:280px;

}

.donateform-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    margin-bottom:25px;

    border-radius:60px;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-weight:600;

    font-size:.92rem;

}

.donateform-info h3{

    margin-bottom:20px;

    color:#fff;

    font-size:2rem;

    line-height:1.3;

}

.donateform-info h3 span{

    display:block;

    color:#00BCD4;

}

.donateform-info p{

    margin-bottom:35px;

    color:#CBD5E1;

    line-height:1.9;

}

/*==================================
IMPACT STATS
==================================*/

.donateform-stats{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.donateform-stat{

    display:flex;

    align-items:center;

    gap:16px;

}

.donateform-staticon{

    width:48px;

    height:48px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    font-size:1.2rem;

}

.donateform-stat strong{

    display:block;

    color:#fff;

    font-size:1.1rem;

    font-weight:700;

    margin-bottom:3px;

}

.donateform-stat span{

    color:#CBD5E1;

    font-size:.92rem;

}

/*==================================
FORM PANEL
==================================*/

.donateform-box{

    padding:45px;

    border-radius:30px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}

/*==================================
GRID
==================================*/

.donateform-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:24px;

}

.donateform-full{

    grid-column:1/-1;

}

/*==================================
FIELDS
==================================*/

.donateform-field{

    display:flex;

    flex-direction:column;

}

.donateform-field label{

    margin-bottom:10px;

    color:#fff;

    font-size:.95rem;

    font-weight:600;

}

.donateform-field input,

.donateform-field select,

.donateform-field textarea{

    width:100%;

    padding:16px 18px;

    border-radius:14px;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.05);

    color:#fff;

    outline:none;

    font-size:.95rem;

    font-family:inherit;

}

.donateform-field input::placeholder,

.donateform-field textarea::placeholder{

    color:#94A3B8;

}

.donateform-field textarea{

    resize:vertical;

    min-height:170px;

}

.donateform-field select{

    appearance:none;

    cursor:pointer;

}

.donateform-field option{

    background:#08111F;

    color:#fff;

}

/*==================================
SUBMIT BUTTON
==================================*/

.donateform-submit{

    margin-top:35px;

    border:none;

    cursor:pointer;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 40px;

    border-radius:60px;

    background:linear-gradient(

        135deg,

        #00BCD4,

        #7ED321

    );

    color:#08111F;

    font-size:1rem;

    font-weight:600;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.donateform-wrapper{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.donateform-section{

padding:90px 5%;

}

.donateform-section .section-heading{

margin-bottom:60px;

}

.donateform-section .section-heading h2{

font-size:2.3rem;

}

.donateform-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.donateform-info,

.donateform-box{

padding:28px 22px;

border-radius:22px;

}

.donateform-info h3{

font-size:1.6rem;

}

.donateform-grid{

grid-template-columns:1fr;

gap:18px;

}

.donateform-full{

grid-column:auto;

}

.donateform-submit{

width:100%;

padding:16px;

}

.donateform-staticon{

width:42px;

height:42px;

font-size:1rem;

}

.donateform-stat strong{

font-size:1rem;

}

.donateform-stat span{

font-size:.88rem;

}

}

/* Part - 2 */

/*==================================================
        LEFT PANEL
==================================================*/

.donateform-info{

    position:relative;

    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;

    animation:donateFormFloat 8s ease-in-out infinite;

}

@keyframes donateFormFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

.donateform-info:hover{

    border-color:rgba(0,188,212,.22);

    box-shadow:
        0 25px 60px rgba(0,188,212,.16);

}

/*==================================================
        DONATION ILLUSTRATION
==================================================*/

.donateform-illustration img{

    transition:
        transform .45s ease;

    animation:donateIllustrationFloat 5s ease-in-out infinite;

}

@keyframes donateIllustrationFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

.donateform-info:hover .donateform-illustration img{

    transform:scale(1.05);

}

/*==================================================
        BADGE
==================================================*/

.donateform-badge{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.donateform-badge::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.donateform-badge:hover{

    transform:translateY(-3px);

    box-shadow:
        0 0 25px rgba(0,188,212,.22);

}

.donateform-badge:hover::before{

    left:150%;

}

/*==================================================
        IMPACT STATISTICS
==================================================*/

.donateform-stat{

    transition:
        transform .35s ease;

}

.donateform-staticon{

    position:relative;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

/* Pulse Ring */

.donateform-staticon::before{

    content:"";

    position:absolute;

    inset:-7px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:donateStatPulse 3s ease-out infinite;

}

@keyframes donateStatPulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.45);

        opacity:0;

    }

}

.donateform-stat:hover{

    transform:translateX(8px);

}

.donateform-stat:hover .donateform-staticon{

    transform:rotate(-10deg) scale(1.08);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.18),

        rgba(126,211,33,.16)

    );

    border-color:rgba(0,188,212,.30);

    box-shadow:
        0 0 30px rgba(0,188,212,.25);

}

/*==================================================
        FORM PANEL
==================================================*/

.donateform-box{

    transition:
        border-color .35s ease,
        box-shadow .35s ease;

}

.donateform-box:hover{

    border-color:rgba(0,188,212,.18);

    box-shadow:
        0 25px 60px rgba(0,188,212,.14);

}

/*==================================================
        FORM FIELDS
==================================================*/

.donateform-field input,

.donateform-field select,

.donateform-field textarea{

    transition:
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;

}

.donateform-field input:focus,

.donateform-field select:focus,

.donateform-field textarea:focus{

    border-color:#00BCD4;

    background:rgba(255,255,255,.08);

    box-shadow:
        0 0 0 4px rgba(0,188,212,.10);

}

/*==================================================
        LABEL
==================================================*/

.donateform-field label{

    transition:color .35s ease;

}

.donateform-field:focus-within label{

    color:#00BCD4;

}

/*==================================================
        DONATE BUTTON
==================================================*/

.donateform-submit{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.donateform-submit::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.donateform-submit:hover{

    transform:translateY(-5px);

    box-shadow:
        0 18px 45px rgba(0,188,212,.30);

}

.donateform-submit:hover::before{

    left:150%;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.donateform-info{

animation:none;

}

.donateform-info:hover,

.donateform-box:hover{

transform:none;

box-shadow:none;

}

.donateform-stat:hover{

transform:none;

}

.donateform-stat:hover .donateform-staticon{

transform:scale(1.05);

box-shadow:none;

}

.donateform-submit:hover{

transform:none;

box-shadow:none;

}

.donateform-badge:hover{

transform:none;

box-shadow:none;

}

}

/* Donation Form Section Ends Here */

/* Support Section Starts Here */

/*==================================================
        OTHER WAYS TO SUPPORT
==================================================*/

.donatesupport-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.donatesupport-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,188,212,.08),

        transparent 70%

    );

    filter:blur(130px);

}

.donatesupport-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(126,211,33,.08),

        transparent 70%

    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.donatesupport-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.donatesupport-section .section-heading h2{

    margin:24px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.donatesupport-section .section-heading h2 span{

    color:#00BCD4;

}

.donatesupport-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
SUPPORT GRID
==================================*/

.donatesupport-grid{

    position:relative;

    z-index:5;

    max-width:1250px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

/*==================================
SUPPORT CARD
==================================*/

.donatesupport-card{

    position:relative;

    overflow:hidden;

    padding:40px 32px;

    border-radius:24px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}

.donatesupport-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        135deg,

        rgba(255,255,255,.05),

        transparent 45%,

        rgba(0,188,212,.05)

    );

    pointer-events:none;

}

/*==================================
ICON
==================================*/

.donatesupport-icon{

    width:82px;

    height:82px;

    margin-bottom:28px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    font-size:2rem;

}

/*==================================
TEXT
==================================*/

.donatesupport-card h3{

    margin-bottom:16px;

    color:#fff;

    font-size:1.35rem;

    font-weight:700;

    line-height:1.3;

}

.donatesupport-card p{

    margin-bottom:28px;

    color:#CBD5E1;

    font-size:.95rem;

    line-height:1.9;

}

/*==================================
LINK
==================================*/

.donatesupport-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#00BCD4;

    text-decoration:none;

    font-size:.95rem;

    font-weight:600;

}

.donatesupport-link i{

    font-size:.85rem;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.donatesupport-grid{

grid-template-columns:repeat(2,1fr);

gap:24px;

}

}

@media(max-width:768px){

.donatesupport-section{

padding:90px 5%;

}

.donatesupport-section .section-heading{

margin-bottom:60px;

}

.donatesupport-section .section-heading h2{

font-size:2.3rem;

}

.donatesupport-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.donatesupport-grid{

grid-template-columns:1fr;

gap:20px;

}

.donatesupport-card{

padding:30px 24px;

border-radius:20px;

}

.donatesupport-icon{

width:68px;

height:68px;

margin-bottom:22px;

font-size:1.7rem;

}

.donatesupport-card h3{

font-size:1.2rem;

margin-bottom:12px;

}

.donatesupport-card p{

font-size:.92rem;

line-height:1.8;

margin-bottom:20px;

}

.donatesupport-link{

font-size:.9rem;

}

}

/* Part - 2 */

/*==================================================
        SUPPORT CARD
==================================================*/

.donatesupport-card{

    transition:
        transform .4s ease,
        background .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;

    animation:donateSupportFloat 8s ease-in-out infinite;

}

@keyframes donateSupportFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

/* Stagger Animation */

.donatesupport-card:nth-child(2){

animation-delay:.6s;

}

.donatesupport-card:nth-child(3){

animation-delay:1.2s;

}

.donatesupport-card:nth-child(4){

animation-delay:1.8s;

}

.donatesupport-card:nth-child(5){

animation-delay:2.4s;

}

.donatesupport-card:nth-child(6){

animation-delay:3s;

}

.donatesupport-card:hover{

    transform:translateY(-12px);

    background:rgba(255,255,255,.07);

    border-color:rgba(0,188,212,.22);

    box-shadow:

        0 28px 70px rgba(0,188,212,.16);

}

.donatesupport-card:hover{

    animation-play-state:paused;

}

/*==================================================
        TOP ACCENT
==================================================*/

.donatesupport-card::after{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    transition:width .4s ease;

}

.donatesupport-card:hover::after{

    width:100%;

}

/*==================================================
        ICON
==================================================*/

.donatesupport-icon{

    position:relative;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

/* Pulse Ring */

.donatesupport-icon::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:donateSupportPulse 3s ease-out infinite;

}

@keyframes donateSupportPulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.45);

        opacity:0;

    }

}

.donatesupport-card:hover .donatesupport-icon{

    transform:rotate(-10deg) scale(1.08);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.18),

        rgba(126,211,33,.16)

    );

    border-color:rgba(0,188,212,.30);

    box-shadow:

        0 0 30px rgba(0,188,212,.28);

}

/*==================================================
        TITLE
==================================================*/

.donatesupport-card h3{

    transition:
        color .35s ease,
        transform .35s ease;

}

.donatesupport-card:hover h3{

    color:#00BCD4;

    transform:translateY(-3px);

}

/*==================================================
        DESCRIPTION
==================================================*/

.donatesupport-card p{

    transition:color .35s ease;

}

.donatesupport-card:hover p{

    color:#E2E8F0;

}

/*==================================================
        LEARN MORE LINK
==================================================*/

.donatesupport-link{

    position:relative;

    transition:
        color .35s ease,
        letter-spacing .35s ease;

}

.donatesupport-link i{

    transition:
        transform .35s ease;

}

.donatesupport-card:hover .donatesupport-link{

    letter-spacing:.5px;

}

.donatesupport-card:hover .donatesupport-link i{

    transform:translateX(8px);

}

/* Animated Underline */

.donatesupport-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    border-radius:20px;

    background:#00BCD4;

    transition:width .35s ease;

}

.donatesupport-card:hover .donatesupport-link::after{

    width:100%;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.donatesupport-card{

animation:none;

}

.donatesupport-card:hover{

transform:none;

box-shadow:none;

}

.donatesupport-card:hover .donatesupport-icon{

transform:scale(1.05);

box-shadow:none;

}

.donatesupport-card:hover h3{

transform:none;

}

.donatesupport-card:hover .donatesupport-link i{

transform:translateX(4px);

}

}

/* Support Section Ends Here */

/* Testimonials Section Starts Here */

/*==================================================
        DONOR TESTIMONIALS
==================================================*/

.donatetestimonial-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.donatetestimonial-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(130px);

}

.donatetestimonial-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.donatetestimonial-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.donatetestimonial-section .section-heading h2{

    margin:24px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.donatetestimonial-section .section-heading h2 span{

    color:#00BCD4;

}

.donatetestimonial-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
SLIDER
==================================*/

.donatetestimonial-slider{

    position:relative;

    z-index:5;

    max-width:900px;

    margin:auto;

    padding:60px 50px;

    text-align:center;

    border-radius:30px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}

/*==================================
QUOTE
==================================*/

.donatetestimonial-quote{

    position:absolute;

    top:20px;

    left:50%;

    transform:translateX(-50%);

    font-size:8rem;

    line-height:1;

    color:rgba(0,188,212,.12);

    font-family:serif;

    user-select:none;

}

/*==================================
IMAGE
==================================*/

.donatetestimonial-image{

    width:120px;

    height:120px;

    margin:40px auto 30px;

    border-radius:50%;

    overflow:hidden;

    border:4px solid rgba(0,188,212,.20);

}

.donatetestimonial-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/*==================================
CONTENT
==================================*/

.donatetestimonial-content p{

    max-width:700px;

    margin:0 auto 30px;

    color:#CBD5E1;

    font-size:1.05rem;

    line-height:2;

    font-style:italic;

}

.donatetestimonial-content h4{

    margin-bottom:8px;

    color:#fff;

    font-size:1.3rem;

    font-weight:700;

}

.donatetestimonial-content span{

    color:#00BCD4;

    font-size:.95rem;

}

/*==================================
NAVIGATION
==================================*/

.donatetestimonial-nav{

    display:flex;

    justify-content:center;

    gap:18px;

    margin-top:40px;

}

.donatetestimonial-nav button{

    width:54px;

    height:54px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    color:#00BCD4;

    font-size:1rem;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

}

/*==================================================
        DONATION IMPACT NUMBERS
==================================================*/

.donatestats-section{

    position:relative;

    overflow:hidden;

    padding:120px 5%;

    background:#050816;

}

.donatestats-grid{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;

    align-items:center;

    gap:30px;

}

.donatestats-item{

    text-align:center;

}

.donatestats-item h2{

    margin-bottom:16px;

    color:#fff;

    font-size:3.8rem;

    font-weight:800;

}

.donatestats-item p{

    color:#CBD5E1;

    font-size:1rem;

    letter-spacing:.5px;

}

.donatestats-divider{

    width:2px;

    height:90px;

    background:linear-gradient(

        180deg,

        #00BCD4,

        #7ED321

    );

    opacity:.45;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.donatestats-grid{

grid-template-columns:1fr;

gap:25px;

}

.donatestats-divider{

width:80px;

height:2px;

margin:auto;

}

}

@media(max-width:768px){

.donatetestimonial-section,

.donatestats-section{

padding:90px 5%;

}

.donatetestimonial-section .section-heading{

margin-bottom:60px;

}

.donatetestimonial-section .section-heading h2{

font-size:2.3rem;

}

.donatetestimonial-slider{

padding:40px 25px;

border-radius:22px;

}

.donatetestimonial-quote{

font-size:5rem;

}

.donatetestimonial-image{

width:90px;

height:90px;

margin-top:20px;

}

.donatetestimonial-content p{

font-size:.95rem;

line-height:1.8;

}

.donatetestimonial-content h4{

font-size:1.15rem;

}

.donatestats-item h2{

font-size:2.5rem;

}

.donatestats-item p{

font-size:.95rem;

}

}

/* Part - 2 */

/*==================================================
        TESTIMONIAL SLIDER
==================================================*/

.donatetestimonial-slider{

    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;

}

.donatetestimonial-slider:hover{

    transform:translateY(-10px);

    border-color:rgba(0,188,212,.20);

    box-shadow:
        0 28px 70px rgba(0,188,212,.16);

}

/*==================================================
        QUOTATION MARK
==================================================*/

.donatetestimonial-quote{

    animation:donateQuoteGlow 5s ease-in-out infinite;

}

@keyframes donateQuoteGlow{

    0%,100%{

        transform:translateX(-50%) scale(1);

        opacity:.18;

    }

    50%{

        transform:translateX(-50%) scale(1.15);

        opacity:.35;

    }

}

/*==================================================
        DONOR IMAGE
==================================================*/

.donatetestimonial-image{

    position:relative;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.donatetestimonial-image::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:donateImagePulse 3s ease-out infinite;

}

@keyframes donateImagePulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.4);

        opacity:0;

    }

}

.donatetestimonial-slider:hover .donatetestimonial-image{

    transform:scale(1.08);

    border-color:#00BCD4;

    box-shadow:
        0 0 35px rgba(0,188,212,.28);

}

.donatetestimonial-image img{

    transition:transform .45s ease;

}

.donatetestimonial-slider:hover .donatetestimonial-image img{

    transform:scale(1.08);

}

/*==================================================
        CONTENT
==================================================*/

.donatetestimonial-content h4{

    transition:
        color .35s ease,
        transform .35s ease;

}

.donatetestimonial-content p{

    transition:color .35s ease;

}

.donatetestimonial-slider:hover h4{

    color:#00BCD4;

    transform:translateY(-3px);

}

.donatetestimonial-slider:hover p{

    color:#E2E8F0;

}

/*==================================================
        NAVIGATION
==================================================*/

.donatetestimonial-nav button{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.donatetestimonial-nav button::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.donatetestimonial-nav button:hover{

    transform:translateY(-4px);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.18),

        rgba(126,211,33,.15)

    );

    border-color:rgba(0,188,212,.22);

    color:#fff;

    box-shadow:
        0 16px 35px rgba(0,188,212,.20);

}

.donatetestimonial-nav button:hover::before{

    left:150%;

}

/*==================================================
        DONATION STATISTICS
==================================================*/

.donatestats-item{

    transition:transform .35s ease;

}

.donatestats-item:hover{

    transform:translateY(-8px);

}

.donatestats-item h2{

    transition:
        color .35s ease,
        text-shadow .35s ease,
        transform .35s ease;

}

.donatestats-item:hover h2{

    color:#00BCD4;

    text-shadow:
        0 0 25px rgba(0,188,212,.40);

    transform:scale(1.05);

}

.donatestats-item p{

    transition:color .35s ease;

}

.donatestats-item:hover p{

    color:#E2E8F0;

}

/*==================================================
        DIVIDERS
==================================================*/

.donatestats-divider{

    transition:
        opacity .35s ease,
        transform .35s ease,
        box-shadow .35s ease;

}

.donatestats-grid:hover .donatestats-divider{

    opacity:.8;

    box-shadow:
        0 0 18px rgba(0,188,212,.30);

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.donatetestimonial-slider:hover{

transform:none;

box-shadow:none;

}

.donatetestimonial-slider:hover .donatetestimonial-image{

transform:scale(1.05);

box-shadow:none;

}

.donatetestimonial-nav button:hover{

transform:none;

box-shadow:none;

}

.donatestats-item:hover{

transform:none;

}

.donatestats-item:hover h2{

transform:none;

text-shadow:none;

}

}

/* Testimonials Section Ends Here */

/* FAQ Section Starts Here */

/*==================================================
        DONATION FAQ
==================================================*/

.donatefaq-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.donatefaq-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(130px);

}

.donatefaq-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.donatefaq-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.donatefaq-section .section-heading h2{

    margin:24px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.donatefaq-section .section-heading h2 span{

    color:#00BCD4;

}

.donatefaq-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
FAQ WRAPPER
==================================*/

.donatefaq-wrapper{

    position:relative;

    z-index:5;

    max-width:950px;

    margin:auto;

}

/*==================================
FAQ ITEM
==================================*/

.donatefaq-item{

    border-bottom:1px solid rgba(255,255,255,.10);

}

/*==================================
QUESTION
==================================*/

.donatefaq-question{

    width:100%;

    padding:28px 0;

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:none;

    border:none;

    cursor:pointer;

    text-align:left;

}

/*==================================
LEFT SIDE
==================================*/

.donatefaq-left{

    display:flex;

    align-items:center;

    gap:20px;

}

/*==================================
HEART ICON
==================================*/

.donatefaq-icon{

    width:56px;

    height:56px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-size:1.25rem;

}

/*==================================
QUESTION TITLE
==================================*/

.donatefaq-question h4{

    margin:0;

    color:#fff;

    font-size:1.18rem;

    font-weight:600;

    line-height:1.5;

}

/*==================================
TOGGLE
==================================*/

.donatefaq-toggle{

    width:42px;

    height:42px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:#00BCD4;

    font-size:1.5rem;

    font-weight:600;

}

/*==================================
ANSWER
==================================*/

.donatefaq-answer{

    max-height:0;

    opacity:0;

    overflow:hidden;

    transition:

        max-height .45s ease,

        opacity .35s ease;

}

.donatefaq-answer p{

    margin:0;

    padding:

        0

        0

        28px

        76px;

    color:#CBD5E1;

    font-size:.96rem;

    line-height:1.9;

}

/*==================================
ACTIVE
==================================*/

.donatefaq-item.active .donatefaq-answer{

    max-height:240px;

    opacity:1;

}

.donatefaq-item.active .donatefaq-toggle{

    background:#00BCD4;

    border-color:#00BCD4;

    color:#fff;

    font-size:0;

}

.donatefaq-item.active .donatefaq-toggle::before{

    content:"−";

    font-size:1.5rem;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:768px){

.donatefaq-section{

padding:90px 5%;

}

.donatefaq-section .section-heading{

margin-bottom:60px;

}

.donatefaq-section .section-heading h2{

font-size:2.3rem;

}

.donatefaq-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.donatefaq-question{

padding:22px 0;

}

.donatefaq-left{

gap:15px;

align-items:flex-start;

}

.donatefaq-icon{

width:46px;

height:46px;

font-size:1rem;

}

.donatefaq-question h4{

font-size:1rem;

}

.donatefaq-toggle{

width:36px;

height:36px;

font-size:1.2rem;

}

.donatefaq-answer p{

padding:

0

0

22px

60px;

font-size:.92rem;

line-height:1.8;

}

}

/* Part - 2 */

/*==================================================
        FAQ ITEM
==================================================*/

.donatefaq-item{

    position:relative;

    transition:
        border-color .35s ease;

}

.donatefaq-item:hover{

    border-bottom-color:rgba(0,188,212,.22);

}

/* Animated Line */

.donatefaq-item::before{

    content:"";

    position:absolute;

    left:0;

    bottom:-1px;

    width:0;

    height:2px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    transition:width .4s ease;

}

.donatefaq-item:hover::before,

.donatefaq-item.active::before{

    width:100%;

}

/*==================================================
        HEART ICON
==================================================*/

.donatefaq-icon{

    position:relative;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

/* Pulse Ring */

.donatefaq-icon::after{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:donateFaqPulse 3s ease-out infinite;

}

@keyframes donateFaqPulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.45);

        opacity:0;

    }

}

.donatefaq-item:hover .donatefaq-icon{

    transform:rotate(-10deg) scale(1.08);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.20),

        rgba(126,211,33,.16)

    );

    border-color:rgba(0,188,212,.28);

    box-shadow:

        0 0 30px rgba(0,188,212,.25);

}

/*==================================================
        QUESTION
==================================================*/

.donatefaq-question h4{

    transition:
        color .35s ease,
        transform .35s ease;

}

.donatefaq-item:hover h4{

    color:#00BCD4;

    transform:translateX(6px);

}

.donatefaq-item.active h4{

    color:#00BCD4;

}

/*==================================================
        TOGGLE
==================================================*/

.donatefaq-toggle{

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.donatefaq-item:hover .donatefaq-toggle{

    transform:rotate(90deg);

    background:rgba(0,188,212,.08);

    border-color:rgba(0,188,212,.20);

    box-shadow:

        0 0 18px rgba(0,188,212,.18);

}

.donatefaq-item.active .donatefaq-toggle{

    transform:rotate(180deg);

}

/*==================================================
        ANSWER
==================================================*/

.donatefaq-answer p{

    transition:color .35s ease;

}

.donatefaq-item:hover .donatefaq-answer p{

    color:#E2E8F0;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.donatefaq-item:hover h4{

transform:none;

}

.donatefaq-item:hover .donatefaq-toggle{

transform:none;

box-shadow:none;

}

.donatefaq-item:hover .donatefaq-icon{

transform:scale(1.05);

box-shadow:none;

}

}

/* FAQ Section Ends Here */

/* CTA Section Starts Here */

/*==================================================
        DONATE CTA
==================================================*/

.donatecta-section{

    position:relative;

    overflow:hidden;

    padding:140px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

/*==================================
BACKGROUND GLOWS
==================================*/

.donatecta-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(150px);

    pointer-events:none;

}

.donatecta-glow-left{

    width:650px;

    height:650px;

    top:-240px;

    left:-220px;

    background:rgba(0,188,212,.12);

}

.donatecta-glow-right{

    width:520px;

    height:520px;

    right:-180px;

    bottom:-180px;

    background:rgba(126,211,33,.10);

}

/*==================================
FLOATING HEARTS
==================================*/

.donatecta-hearts{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.donatecta-heart{

    position:absolute;

    font-size:2rem;

    opacity:.08;

}

.heart1{

top:14%;

left:10%;

}

.heart2{

top:28%;

right:14%;

}

.heart3{

bottom:18%;

left:16%;

}

.heart4{

bottom:24%;

right:22%;

}

.heart5{

top:50%;

left:50%;

}

/*==================================
HELPING HANDS
==================================*/

.donatecta-hands{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.donatecta-hands i{

    position:absolute;

    color:rgba(255,255,255,.08);

    font-size:2.2rem;

}

.hand1{

top:18%;

left:28%;

}

.hand2{

top:20%;

right:24%;

}

.hand3{

bottom:20%;

left:30%;

}

.hand4{

bottom:16%;

right:18%;

}

/*==================================
ABSTRACT SHAPES
==================================*/

.donatecta-shapes{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.donatecta-shapes span{

    position:absolute;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.03);

    backdrop-filter:blur(10px);

}

.shape-circle{

    width:70px;

    height:70px;

    border-radius:50%;

    top:18%;

    left:45%;

}

.shape-square{

    width:58px;

    height:58px;

    transform:rotate(20deg);

    right:18%;

    top:38%;

}

.shape-triangle{

    width:55px;

    height:55px;

    left:18%;

    bottom:18%;

    clip-path:polygon(50% 0%,0% 100%,100% 100%);

}

/*==================================
GLASS PANEL
==================================*/

.donatecta-panel{

    position:relative;

    z-index:5;

    max-width:980px;

    margin:auto;

    padding:70px 60px;

    text-align:center;

    border-radius:34px;

    overflow:hidden;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(20px);

}

.donatecta-panel::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        135deg,

        rgba(255,255,255,.05),

        transparent 45%,

        rgba(0,188,212,.05)

    );

    pointer-events:none;

}

/*==================================
BADGE
==================================*/

.donatecta-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    margin-bottom:28px;

    border-radius:60px;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-size:.95rem;

    font-weight:600;

}

/*==================================
HEADING
==================================*/

.donatecta-panel h2{

    margin:0 0 25px;

    color:#fff;

    font-size:3.5rem;

    font-weight:800;

    line-height:1.2;

}

.donatecta-panel h2 span{

    display:block;

    color:#00BCD4;

}

/*==================================
CONTENT
==================================*/

.donatecta-panel p{

    max-width:720px;

    margin:0 auto 45px;

    color:#CBD5E1;

    font-size:1rem;

    line-height:2;

}

/*==================================
BUTTONS
==================================*/

.donatecta-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

}

.donatecta-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:17px 34px;

    border-radius:60px;

    text-decoration:none;

    font-size:.96rem;

    font-weight:600;

    transition:.35s;

}

/* Primary */

.donatecta-primary{

    color:#08111F;

    background:linear-gradient(

        135deg,

        #00BCD4,

        #7ED321

    );

}

/* Secondary */

.donatecta-secondary{

    color:#fff;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(12px);

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:768px){

.donatecta-section{

padding:90px 5%;

}

.donatecta-panel{

padding:45px 25px;

border-radius:24px;

}

.donatecta-badge{

font-size:.85rem;

padding:10px 18px;

margin-bottom:22px;

}

.donatecta-panel h2{

font-size:2.3rem;

}

.donatecta-panel p{

font-size:.95rem;

line-height:1.8;

margin-bottom:35px;

}

.donatecta-buttons{

flex-direction:column;

gap:15px;

}

.donatecta-btn{

width:100%;

padding:16px;

font-size:.94rem;

}

}

/* Part - 2 */

/*==================================================
        GLASS PANEL
==================================================*/

.donatecta-panel{

    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;

    animation:donateCtaFloat 8s ease-in-out infinite;

}

@keyframes donateCtaFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

.donatecta-panel:hover{

    border-color:rgba(0,188,212,.22);

    box-shadow:
        0 30px 80px rgba(0,188,212,.18);

}

/*==================================================
        BACKGROUND GLOWS
==================================================*/

.donatecta-glow{

    animation:donateCtaGlow 8s ease-in-out infinite;

}

.donatecta-glow-right{

    animation-delay:4s;

}

@keyframes donateCtaGlow{

    0%,100%{

        transform:scale(1);

        opacity:.6;

    }

    50%{

        transform:scale(1.18);

        opacity:1;

    }

}

/*==================================================
        FLOATING HEARTS
==================================================*/

.donatecta-heart{

    animation:donateHeartFloat 6s ease-in-out infinite;

}

.heart2{

animation-delay:1s;

}

.heart3{

animation-delay:2s;

}

.heart4{

animation-delay:3s;

}

.heart5{

animation-delay:4s;

}

@keyframes donateHeartFloat{

    0%,100%{

        transform:translateY(0) scale(.9);

        opacity:.08;

    }

    50%{

        transform:translateY(-20px) scale(1.2);

        opacity:.25;

    }

}

/*==================================================
        HELPING HANDS
==================================================*/

.donatecta-hands i{

    animation:donateHandsFloat 6s ease-in-out infinite;

}

.hand2{

animation-delay:.8s;

}

.hand3{

animation-delay:1.6s;

}

.hand4{

animation-delay:2.4s;

}

@keyframes donateHandsFloat{

    0%,100%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(-16px) rotate(8deg);

    }

}

/*==================================================
        ABSTRACT SHAPES
==================================================*/

.donatecta-shapes span{

    animation:donateShapeFloat 8s ease-in-out infinite;

}

.shape-square{

animation-delay:1.2s;

}

.shape-triangle{

animation-delay:2.4s;

}

@keyframes donateShapeFloat{

    0%,100%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(-14px) rotate(12deg);

    }

}

/*==================================================
        BADGE
==================================================*/

.donatecta-badge{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.donatecta-badge::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.donatecta-badge:hover{

    transform:translateY(-3px);

    box-shadow:
        0 0 25px rgba(0,188,212,.20);

}

.donatecta-badge:hover::before{

    left:150%;

}

/*==================================================
        HEADING
==================================================*/

.donatecta-panel h2 span{

    animation:donateHeadingGlow 3s ease-in-out infinite;

}

@keyframes donateHeadingGlow{

    0%,100%{

        text-shadow:none;

    }

    50%{

        text-shadow:
            0 0 20px rgba(0,188,212,.45);

    }

}

/*==================================================
        BUTTONS
==================================================*/

.donatecta-btn{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.donatecta-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.donatecta-btn:hover::before{

    left:150%;

}

/* Primary Button */

.donatecta-primary:hover{

    transform:translateY(-5px);

    box-shadow:
        0 18px 45px rgba(0,188,212,.30);

}

/* Secondary Buttons */

.donatecta-secondary:hover{

    transform:translateY(-5px);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.16),

        rgba(126,211,33,.12)

    );

    border-color:rgba(0,188,212,.25);

    box-shadow:
        0 18px 40px rgba(0,188,212,.18);

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.donatecta-panel{

animation:none;

}

.donatecta-panel:hover{

transform:none;

box-shadow:none;

}

.donatecta-badge:hover{

transform:none;

box-shadow:none;

}

.donatecta-primary:hover,

.donatecta-secondary:hover{

transform:none;

box-shadow:none;

}

.donatecta-glow{

animation-duration:10s;

}

}

/* CTA Section Ends Here */


/* Donate Page Ends Here */


/* FAQS Page Starts Here */

/* Hero Section Starts Here */

/*==================================================
        KNOWLEDGE NETWORK HERO
==================================================*/

.faqnetwork-section{

    position:relative;

    overflow:hidden;

    padding:170px 5% 120px;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #07111F 55%,
        #050816 100%
    );

}

/*==================================
BACKGROUND GRID
==================================*/

.faqnetwork-grid{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:70px 70px;

    mask-image:radial-gradient(circle at center,black 45%,transparent 95%);

    opacity:.45;

}

/*==================================
RADIAL GLOWS
==================================*/

.faqnetwork-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    pointer-events:none;

}

.faqnetwork-glow-left{

    width:620px;

    height:620px;

    top:-250px;

    left:-220px;

    background:rgba(0,188,212,.12);

}

.faqnetwork-glow-right{

    width:520px;

    height:520px;

    right:-180px;

    bottom:-180px;

    background:rgba(126,211,33,.10);

}

/*==================================
FLOATING GLASS BUBBLES
==================================*/

.faqnetwork-bubbles{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.faqnetwork-bubbles .bubble{

    position:absolute;

    border-radius:50%;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

}

.b1{

width:90px;

height:90px;

top:15%;

left:6%;

}

.b2{

width:60px;

height:60px;

top:22%;

right:12%;

}

.b3{

width:80px;

height:80px;

bottom:14%;

left:12%;

}

.b4{

width:45px;

height:45px;

bottom:18%;

right:18%;

}

.b5{

width:120px;

height:120px;

top:48%;

left:48%;

opacity:.3;

}

/*==================================
FLOATING ICONS
==================================*/

.faqnetwork-floating{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.faqnetwork-floating i{

    position:absolute;

    color:rgba(255,255,255,.08);

    font-size:2rem;

}

.f1{

top:14%;

left:18%;

}

.f2{

top:30%;

right:8%;

}

.f3{

bottom:20%;

left:22%;

}

.f4{

bottom:24%;

right:18%;

}

.f5{

top:52%;

right:36%;

}

/*==================================
WRAPPER
==================================*/

.faqnetwork-wrapper{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:1fr 520px;

    gap:70px;

    align-items:center;

}

/*==================================
BREADCRUMB
==================================*/

.faqnetwork-breadcrumb{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 22px;

    margin-bottom:28px;

    border-radius:60px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(12px);

}

.faqnetwork-breadcrumb a,

.faqnetwork-breadcrumb span{

    color:#CBD5E1;

    text-decoration:none;

    font-size:.95rem;

}

.faqnetwork-breadcrumb i{

    color:#00BCD4;

    font-size:.8rem;

}

/*==================================
BADGE
==================================*/

.faqnetwork-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin:30px 0;

    padding:12px 24px;

    border-radius:60px;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-weight:600;

    font-size:.95rem;

}

/*==================================
TEXT
==================================*/

.faqnetwork-content h1{

    margin-bottom:25px;

    color:#fff;

    font-size:4.2rem;

    line-height:1.15;

    font-weight:800;

}

.faqnetwork-content h1 span{

    display:block;

    color:#00BCD4;

}

.faqnetwork-content p{

    margin-bottom:35px;

    max-width:650px;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
SEARCH HINT
==================================*/

.faqnetwork-searchhint{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:40px;

    padding:18px 24px;

    border-radius:18px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(12px);

    color:#CBD5E1;

}

.faqnetwork-searchhint i{

    color:#00BCD4;

}

.faqnetwork-searchhint strong{

    color:#fff;

}

/*==================================
BUTTONS
==================================*/

.faqnetwork-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:40px;

}

.faqnetwork-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:17px 34px;

    border-radius:60px;

    text-decoration:none;

    font-weight:600;

}

.faqnetwork-primary{

    background:linear-gradient(

        135deg,

        #00BCD4,

        #7ED321

    );

    color:#08111F;

}

.faqnetwork-secondary{

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:#fff;

}

/*==================================
QUICK TAGS
==================================*/

.faqnetwork-tags{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

}

.faqnetwork-tags span{

    padding:12px 22px;

    border-radius:50px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:#CBD5E1;

    font-size:.92rem;

}

/*==================================
KNOWLEDGE GRAPH
==================================*/

.faqnetwork-visual{

    position:relative;

    width:420px;

    height:420px;

    margin:auto;

}

.faqnetwork-lines{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

}

.faqnetwork-lines line{

    stroke:rgba(0,188,212,.18);

    stroke-width:2;

    stroke-dasharray:8 8;

}

/*==================================
NODES
==================================*/

.faqnode{

    position:absolute;

    width:74px;

    height:74px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(12px);

    font-size:1.5rem;

}

.faqnode.center{

    width:110px;

    height:110px;

    top:155px;

    left:155px;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    color:#08111F;

    font-size:2.6rem;

}

.n1{

top:0;

left:173px;

}

.n2{

top:85px;

left:20px;

}

.n3{

top:85px;

right:20px;

}

.n4{

bottom:85px;

left:20px;

}

.n5{

bottom:85px;

right:20px;

}

.n6{

bottom:0;

left:173px;

}

/*==================================
SCROLL
==================================*/

.faqnetwork-scroll{

    margin-top:80px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

}

.faqnetwork-scroll span{

    color:#94A3B8;

}

.faqnetwork-mouse{

    width:34px;

    height:58px;

    border:2px solid rgba(255,255,255,.18);

    border-radius:25px;

    display:flex;

    justify-content:center;

    padding-top:8px;

}

.faqnetwork-wheel{

    width:6px;

    height:12px;

    border-radius:20px;

    background:#00BCD4;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.faqnetwork-wrapper{

grid-template-columns:1fr;

text-align:center;

}

.faqnetwork-buttons,

.faqnetwork-tags{

justify-content:center;

}

.faqnetwork-content p{

margin:auto auto 35px;

}

.faqnetwork-searchhint{

justify-content:center;

}

}

@media(max-width:768px){

.faqnetwork-section{

padding:140px 5% 90px;

}

.faqnetwork-content h1{

font-size:2.7rem;

}

.faqnetwork-content p{

line-height:1.8;

font-size:.95rem;

}

.faqnetwork-visual{

width:320px;

height:320px;

}

.faqnode{

width:56px;

height:56px;

font-size:1.2rem;

}

.faqnode.center{

width:82px;

height:82px;

top:119px;

left:119px;

font-size:2rem;

}

.n1{

left:132px;

}

.n2{

top:60px;

left:8px;

}

.n3{

top:60px;

right:8px;

}

.n4{

bottom:60px;

left:8px;

}

.n5{

bottom:60px;

right:8px;

}

.n6{

left:132px;

}

.faqnetwork-buttons{

flex-direction:column;

}

.faqnetwork-btn{

width:100%;

}

}

/* Part - 2 */

/*==================================================
        CONTENT ANIMATION
==================================================*/

.faqnetwork-content{

    animation:faqNetworkFadeLeft 1s ease;

}

.faqnetwork-visual{

    animation:faqNetworkFadeRight 1s ease;

}

@keyframes faqNetworkFadeLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes faqNetworkFadeRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*==================================================
        GRID MOVEMENT
==================================================*/

.faqnetwork-grid{

    animation:faqGridMove 20s linear infinite;

}

@keyframes faqGridMove{

    from{

        transform:translate(0,0);

    }

    to{

        transform:translate(70px,70px);

    }

}

/*==================================================
        GLOWS
==================================================*/

.faqnetwork-glow{

    animation:faqGlowPulse 8s ease-in-out infinite;

}

.faqnetwork-glow-right{

animation-delay:4s;

}

@keyframes faqGlowPulse{

    0%,100%{

        transform:scale(1);

        opacity:.6;

    }

    50%{

        transform:scale(1.15);

        opacity:1;

    }

}

/*==================================================
        FLOATING BUBBLES
==================================================*/

.faqnetwork-bubbles .bubble{

    animation:faqBubbleFloat 8s ease-in-out infinite;

}

.b2{

animation-delay:1s;

}

.b3{

animation-delay:2s;

}

.b4{

animation-delay:3s;

}

.b5{

animation-delay:4s;

}

@keyframes faqBubbleFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-20px);

    }

}

/*==================================================
        FLOATING ICONS
==================================================*/

.faqnetwork-floating i{

    animation:faqIconFloat 6s ease-in-out infinite;

}

.f2{

animation-delay:.8s;

}

.f3{

animation-delay:1.6s;

}

.f4{

animation-delay:2.4s;

}

.f5{

animation-delay:3.2s;

}

@keyframes faqIconFloat{

    0%,100%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(-16px) rotate(10deg);

    }

}

/*==================================================
        BREADCRUMB
==================================================*/

.faqnetwork-breadcrumb{

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.faqnetwork-breadcrumb:hover{

    transform:translateY(-3px);

    border-color:rgba(0,188,212,.22);

    box-shadow:
        0 0 22px rgba(0,188,212,.18);

}

/*==================================================
        BADGE
==================================================*/

.faqnetwork-badge{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.faqnetwork-badge::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:40%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.faqnetwork-badge:hover{

    transform:translateY(-3px);

    box-shadow:
        0 0 24px rgba(0,188,212,.22);

}

.faqnetwork-badge:hover::before{

    left:150%;

}

/*==================================================
        SEARCH HINT
==================================================*/

.faqnetwork-searchhint{

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.faqnetwork-searchhint:hover{

    transform:translateY(-4px);

    border-color:rgba(0,188,212,.20);

    box-shadow:
        0 18px 35px rgba(0,188,212,.15);

}

/*==================================================
        TAGS
==================================================*/

.faqnetwork-tags span{

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;

}

.faqnetwork-tags span:hover{

    transform:translateY(-5px);

    background:rgba(0,188,212,.10);

    border-color:rgba(0,188,212,.22);

    color:#fff;

    box-shadow:
        0 16px 30px rgba(0,188,212,.15);

}

/*==================================================
        SVG CONNECTIONS
==================================================*/

.faqnetwork-lines line{

    animation:faqLineFlow 3s linear infinite;

}

@keyframes faqLineFlow{

    from{

        stroke-dashoffset:100;

    }

    to{

        stroke-dashoffset:0;

    }

}

/*==================================================
        KNOWLEDGE NODES
==================================================*/

.faqnode{

    position:absolute;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.faqnode::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:faqNodePulse 3s ease-out infinite;

}

@keyframes faqNodePulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.5);

        opacity:0;

    }

}

.faqnode:hover{

    transform:scale(1.12);

    border-color:rgba(0,188,212,.28);

    box-shadow:
        0 0 30px rgba(0,188,212,.28);

}

/*==================================================
        CENTER NODE
==================================================*/

.faqnode.center{

    animation:faqCenterPulse 3s ease-in-out infinite;

}

@keyframes faqCenterPulse{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

}

/*==================================================
        BUTTONS
==================================================*/

.faqnetwork-btn{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.faqnetwork-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:40%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.faqnetwork-btn:hover::before{

    left:150%;

}

.faqnetwork-primary:hover{

    transform:translateY(-5px);

    box-shadow:
        0 18px 45px rgba(0,188,212,.30);

}

.faqnetwork-secondary:hover{

    transform:translateY(-5px);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.16),

        rgba(126,211,33,.12)

    );

    border-color:rgba(0,188,212,.22);

    box-shadow:
        0 18px 40px rgba(0,188,212,.18);

}

/*==================================================
        SCROLL INDICATOR
==================================================*/

.faqnetwork-wheel{

    animation:faqWheelScroll 1.8s infinite;

}

@keyframes faqWheelScroll{

    0%{

        transform:translateY(0);

        opacity:1;

    }

    100%{

        transform:translateY(18px);

        opacity:0;

    }

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.faqnetwork-grid{

animation:none;

}

.faqnetwork-searchhint:hover,

.faqnetwork-breadcrumb:hover,

.faqnetwork-badge:hover,

.faqnetwork-tags span:hover,

.faqnetwork-primary:hover,

.faqnetwork-secondary:hover{

transform:none;

box-shadow:none;

}

.faqnode:hover{

transform:scale(1.05);

box-shadow:none;

}

.faqnetwork-glow{

animation-duration:10s;

}

}

/* Hero Section Ends Here */

/* Popular Section Starts Here */

/*==================================================
        POPULAR QUESTIONS
==================================================*/

.faqpopular-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.faqpopular-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,188,212,.08),

        transparent 70%

    );

    filter:blur(130px);

}

.faqpopular-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(126,211,33,.08),

        transparent 70%

    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.faqpopular-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.faqpopular-section .section-heading h2{

    margin:22px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.faqpopular-section .section-heading h2 span{

    color:#00BCD4;

}

.faqpopular-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
WRAPPER
==================================*/

.faqpopular-wrapper{

    position:relative;

    z-index:5;

    max-width:1300px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 80px 1fr;

    gap:40px;

    align-items:flex-start;

}

/*==================================
COLUMN
==================================*/

.faqpopular-column{

    display:flex;

    flex-direction:column;

    gap:45px;

}

/*==================================
ITEM
==================================*/

.faqpopular-item{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:24px;

    padding-bottom:35px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

/*==================================
ICON
==================================*/

.faqpopular-icon{

    width:68px;

    height:68px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(0,188,212,.08);

    border:1px solid rgba(0,188,212,.16);

    backdrop-filter:blur(12px);

    font-size:1.7rem;

}

/*==================================
CONTENT
==================================*/

.faqpopular-content{

    flex:1;

}

.faqpopular-content h3{

    margin-bottom:16px;

    color:#fff;

    font-size:1.28rem;

    font-weight:700;

    line-height:1.45;

}

.faqpopular-content p{

    color:#CBD5E1;

    font-size:.97rem;

    line-height:1.9;

}

/*==================================
CENTER DIVIDER
==================================*/

.faqpopular-divider{

    display:flex;

    justify-content:center;

    align-items:center;

}

.faqpopular-divider span{

    width:2px;

    height:100%;

    min-height:620px;

    background:linear-gradient(

        180deg,

        transparent,

        rgba(0,188,212,.35),

        rgba(126,211,33,.35),

        transparent

    );

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.faqpopular-wrapper{

grid-template-columns:1fr;

gap:0;

}

.faqpopular-divider{

display:none;

}

}

@media(max-width:768px){

.faqpopular-section{

padding:90px 5%;

}

.faqpopular-section .section-heading{

margin-bottom:60px;

}

.faqpopular-section .section-heading h2{

font-size:2.3rem;

}

.faqpopular-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.faqpopular-column{

gap:35px;

}

.faqpopular-item{

gap:18px;

padding-bottom:28px;

}

.faqpopular-icon{

width:54px;

height:54px;

font-size:1.35rem;

}

.faqpopular-content h3{

font-size:1.08rem;

margin-bottom:12px;

}

.faqpopular-content p{

font-size:.92rem;

line-height:1.8;

}

}

/* Part - 2 */

/*==================================================
        FAQ ITEM
==================================================*/

.faqpopular-item{

    transition:
        transform .4s ease,
        border-color .4s ease;

}

.faqpopular-item:hover{

    transform:translateX(12px);

    border-bottom-color:rgba(0,188,212,.22);

}

/* Animated Bottom Line */

.faqpopular-item::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-1px;

    width:0;

    height:2px;

    border-radius:20px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    transition:width .45s ease;

}

.faqpopular-item:hover::after{

    width:100%;

}

/*==================================================
        ICON
==================================================*/

.faqpopular-icon{

    position:relative;

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;

}

/* Pulse Ring */

.faqpopular-icon::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:faqPopularPulse 3s ease-out infinite;

}

@keyframes faqPopularPulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.5);

        opacity:0;

    }

}

.faqpopular-item:hover .faqpopular-icon{

    transform:rotate(-10deg) scale(1.08);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.18),

        rgba(126,211,33,.16)

    );

    border-color:rgba(0,188,212,.30);

    box-shadow:

        0 0 30px rgba(0,188,212,.25);

}

/*==================================================
        CONTENT
==================================================*/

.faqpopular-content h3{

    transition:
        color .35s ease,
        transform .35s ease;

}

.faqpopular-content p{

    transition:color .35s ease;

}

.faqpopular-item:hover h3{

    color:#00BCD4;

    transform:translateY(-3px);

}

.faqpopular-item:hover p{

    color:#E2E8F0;

}

/*==================================================
        CENTER DIVIDER
==================================================*/

.faqpopular-divider span{

    position:relative;

    overflow:hidden;

}

.faqpopular-divider span::before{

    content:"";

    position:absolute;

    top:-100%;

    left:50%;

    transform:translateX(-50%);

    width:4px;

    height:100px;

    border-radius:20px;

    background:linear-gradient(

        180deg,

        transparent,

        #00BCD4,

        #7ED321,

        transparent

    );

    animation:faqDividerFlow 4s linear infinite;

}

@keyframes faqDividerFlow{

    from{

        top:-120px;

    }

    to{

        top:100%;

    }

}

/*==================================================
        SECTION REVEAL
==================================================*/

.faqpopular-column:first-child .faqpopular-item{

    animation:faqLeftReveal .8s ease both;

}

.faqpopular-column:last-child .faqpopular-item{

    animation:faqRightReveal .8s ease both;

}

.faqpopular-item:nth-child(2){

animation-delay:.15s;

}

.faqpopular-item:nth-child(3){

animation-delay:.3s;

}

@keyframes faqLeftReveal{

    from{

        opacity:0;

        transform:translateX(-40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes faqRightReveal{

    from{

        opacity:0;

        transform:translateX(40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.faqpopular-item:hover{

transform:none;

}

.faqpopular-item:hover .faqpopular-icon{

transform:scale(1.05);

box-shadow:none;

}

.faqpopular-item:hover h3{

transform:none;

}

.faqpopular-divider{

display:none;

}

}

/* Popular Section Ends Here */

/* All FAQ Section Starts Here */

/*==================================================
        ALL FREQUENTLY ASKED QUESTIONS
==================================================*/

.faqglass-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.faqglass-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,188,212,.08),

        transparent 70%

    );

    filter:blur(130px);

}

.faqglass-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(126,211,33,.08),

        transparent 70%

    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.faqglass-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.faqglass-section .section-heading h2{

    margin:24px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.faqglass-section .section-heading h2 span{

    color:#00BCD4;

}

.faqglass-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
WRAPPER
==================================*/

.faqglass-wrapper{

    position:relative;

    z-index:5;

    max-width:1100px;

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:28px;

}

/*==================================
CATEGORY
==================================*/

.faqglass-category{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

}

.faqglass-category::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        135deg,

        rgba(255,255,255,.05),

        transparent 45%,

        rgba(0,188,212,.05)

    );

    pointer-events:none;

}

/*==================================
CATEGORY HEADER
==================================*/

.faqglass-heading{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:28px 35px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.faqglass-title{

    display:flex;

    align-items:center;

    gap:18px;

}

.faqglass-icon{

    width:64px;

    height:64px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    font-size:1.6rem;

}

.faqglass-title h3{

    margin:0;

    color:#fff;

    font-size:1.4rem;

    font-weight:700;

}

.faqglass-count{

    padding:10px 18px;

    border-radius:40px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:#CBD5E1;

    font-size:.9rem;

}

/*==================================
QUESTION LIST
==================================*/

.faqglass-list{

    padding:10px 35px 30px;

}

/*==================================
FAQ ITEM
==================================*/

.faqglass-item{

    border-bottom:1px solid rgba(255,255,255,.08);

}

.faqglass-item:last-child{

    border-bottom:none;

}

/*==================================
QUESTION
==================================*/

.faqglass-question{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:22px 0;

    border:none;

    outline:none;

    background:none;

    cursor:pointer;

    text-align:left;

    color:#fff;

    font-size:1rem;

    font-weight:600;

    line-height:1.6;

}

.faqglass-question span{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:#00BCD4;

    font-size:1.4rem;

    font-weight:600;

}

/*==================================
ANSWER
==================================*/

.faqglass-answer{

    max-height:0;

    overflow:hidden;

    opacity:0;

    transition:

        max-height .45s ease,

        opacity .35s ease;

}

.faqglass-answer{

    color:#CBD5E1;

    font-size:.96rem;

    line-height:1.9;

    padding:0;

}

.faqglass-answer p{

    margin:0;

}

.faqglass-item.active .faqglass-answer{

    max-height:250px;

    opacity:1;

    padding:0 0 22px;

}

.faqglass-item.active .faqglass-question span{

    background:#00BCD4;

    color:#fff;

    font-size:0;

}

.faqglass-item.active .faqglass-question span::before{

    content:"−";

    font-size:1.5rem;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:768px){

.faqglass-section{

padding:90px 5%;

}

.faqglass-section .section-heading{

margin-bottom:60px;

}

.faqglass-section .section-heading h2{

font-size:2.3rem;

}

.faqglass-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.faqglass-category{

border-radius:22px;

}

.faqglass-heading{

padding:22px;

align-items:flex-start;

flex-direction:column;

}

.faqglass-title{

gap:15px;

}

.faqglass-icon{

width:52px;

height:52px;

font-size:1.3rem;

}

.faqglass-title h3{

font-size:1.15rem;

}

.faqglass-count{

font-size:.82rem;

padding:8px 15px;

}

.faqglass-list{

padding:0 22px 20px;

}

.faqglass-question{

font-size:.95rem;

padding:20px 0;

}

.faqglass-question span{

width:34px;

height:34px;

font-size:1.2rem;

}

.faqglass-answer{

font-size:.92rem;

line-height:1.8;

}

}

/* Part - 2 */

/*==================================================
        CATEGORY CARD
==================================================*/

.faqglass-category{

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;

}

.faqglass-category:hover{

    transform:translateY(-8px);

    border-color:rgba(0,188,212,.20);

    box-shadow:
        0 28px 70px rgba(0,188,212,.16);

}

/* Animated Top Border */

.faqglass-category::after{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:3px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    transition:width .45s ease;

}

.faqglass-category:hover::after{

    width:100%;

}

/*==================================================
        CATEGORY ICON
==================================================*/

.faqglass-icon{

    position:relative;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

/* Pulse Ring */

.faqglass-icon::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:faqGlassPulse 3s ease-out infinite;

}

@keyframes faqGlassPulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.45);

        opacity:0;

    }

}

.faqglass-category:hover .faqglass-icon{

    transform:rotate(-10deg) scale(1.08);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.18),

        rgba(126,211,33,.16)

    );

    border-color:rgba(0,188,212,.30);

    box-shadow:

        0 0 30px rgba(0,188,212,.25);

}

/*==================================================
        CATEGORY TITLE
==================================================*/

.faqglass-title h3{

    transition:
        color .35s ease,
        transform .35s ease;

}

.faqglass-category:hover .faqglass-title h3{

    color:#00BCD4;

    transform:translateX(6px);

}

/*==================================================
        QUESTION
==================================================*/

.faqglass-item{

    position:relative;

    transition:border-color .35s ease;

}

.faqglass-item:hover{

    border-bottom-color:rgba(0,188,212,.18);

}

.faqglass-question{

    transition:color .35s ease;

}

.faqglass-item:hover .faqglass-question{

    color:#00BCD4;

}

/* Animated Underline */

.faqglass-item::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-1px;

    width:0;

    height:2px;

    border-radius:20px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    transition:width .35s ease;

}

.faqglass-item:hover::after,

.faqglass-item.active::after{

    width:100%;

}

/*==================================================
        TOGGLE BUTTON
==================================================*/

.faqglass-question span{

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.faqglass-item:hover .faqglass-question span{

    transform:rotate(90deg);

    background:rgba(0,188,212,.08);

    border-color:rgba(0,188,212,.22);

    box-shadow:

        0 0 18px rgba(0,188,212,.18);

}

.faqglass-item.active .faqglass-question span{

    transform:rotate(180deg);

}

/*==================================================
        ANSWER
==================================================*/

.faqglass-answer{

    transition:

        max-height .45s ease,

        opacity .35s ease,

        color .35s ease,

        padding .35s ease;

}

.faqglass-item:hover .faqglass-answer{

    color:#E2E8F0;

}

/*==================================================
        QUESTION COUNT
==================================================*/

.faqglass-count{

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease;

}

.faqglass-category:hover .faqglass-count{

    transform:translateY(-3px);

    background:rgba(0,188,212,.10);

    border-color:rgba(0,188,212,.20);

}

/*==================================================
        STAGGER ENTRANCE
==================================================*/

.faqglass-category{

    animation:faqGlassReveal .8s ease both;

}

.faqglass-category:nth-child(2){

animation-delay:.1s;

}

.faqglass-category:nth-child(3){

animation-delay:.2s;

}

.faqglass-category:nth-child(4){

animation-delay:.3s;

}

.faqglass-category:nth-child(5){

animation-delay:.4s;

}

@keyframes faqGlassReveal{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.faqglass-category:hover{

transform:none;

box-shadow:none;

}

.faqglass-category:hover .faqglass-icon{

transform:scale(1.05);

box-shadow:none;

}

.faqglass-category:hover .faqglass-title h3{

transform:none;

}

.faqglass-item:hover .faqglass-question span{

transform:none;

box-shadow:none;

}

}

/* All FAQ Section Ends Here */

/* Support Section Starts Here */

/*==================================================
        STILL NEED HELP
==================================================*/

.faqsupport-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.faqsupport-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,188,212,.08),

        transparent 70%

    );

    filter:blur(130px);

}

.faqsupport-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(126,211,33,.08),

        transparent 70%

    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.faqsupport-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.faqsupport-section .section-heading h2{

    margin:24px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.faqsupport-section .section-heading h2 span{

    color:#00BCD4;

}

.faqsupport-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
SUPPORT GRID
==================================*/

.faqsupport-grid{

    position:relative;

    z-index:5;

    max-width:1300px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

}

/*==================================
SUPPORT CARD
==================================*/

.faqsupport-card{

    position:relative;

    overflow:hidden;

    padding:40px 30px;

    border-radius:26px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}

.faqsupport-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        135deg,

        rgba(255,255,255,.05),

        transparent 45%,

        rgba(0,188,212,.05)

    );

    pointer-events:none;

}

/*==================================
ICON
==================================*/

.faqsupport-icon{

    width:74px;

    height:74px;

    margin-bottom:22px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    backdrop-filter:blur(12px);

    font-size:1.9rem;

}

/*==================================
LABEL
==================================*/

.faqsupport-number{

    display:inline-block;

    margin-bottom:18px;

    padding:8px 16px;

    border-radius:30px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:#00BCD4;

    font-size:.82rem;

    font-weight:600;

    letter-spacing:.5px;

}

/*==================================
TEXT
==================================*/

.faqsupport-card h3{

    margin-bottom:16px;

    color:#fff;

    font-size:1.35rem;

    font-weight:700;

    line-height:1.4;

}

.faqsupport-card p{

    margin-bottom:30px;

    color:#CBD5E1;

    font-size:.95rem;

    line-height:1.9;

}

/*==================================
LINK
==================================*/

.faqsupport-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#00BCD4;

    text-decoration:none;

    font-size:.95rem;

    font-weight:600;

}

.faqsupport-link i{

    font-size:.85rem;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:1200px){

.faqsupport-grid{

grid-template-columns:repeat(2,1fr);

gap:24px;

}

}

@media(max-width:768px){

.faqsupport-section{

padding:90px 5%;

}

.faqsupport-section .section-heading{

margin-bottom:60px;

}

.faqsupport-section .section-heading h2{

font-size:2.3rem;

}

.faqsupport-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.faqsupport-grid{

grid-template-columns:1fr;

gap:20px;

}

.faqsupport-card{

padding:30px 24px;

border-radius:22px;

}

.faqsupport-icon{

width:62px;

height:62px;

margin-bottom:18px;

font-size:1.6rem;

}

.faqsupport-number{

font-size:.78rem;

padding:7px 14px;

margin-bottom:15px;

}

.faqsupport-card h3{

font-size:1.18rem;

margin-bottom:12px;

}

.faqsupport-card p{

font-size:.92rem;

line-height:1.8;

margin-bottom:22px;

}

.faqsupport-link{

font-size:.9rem;

}

}

/* Part - 2 */

/*==================================================
        SUPPORT CARD
==================================================*/

.faqsupport-card{

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;

    animation:faqSupportFloat 8s ease-in-out infinite;

}

@keyframes faqSupportFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

/* Stagger Animation */

.faqsupport-card:nth-child(2){

animation-delay:.5s;

}

.faqsupport-card:nth-child(3){

animation-delay:1s;

}

.faqsupport-card:nth-child(4){

animation-delay:1.5s;

}

.faqsupport-card:hover{

    transform:translateY(-12px);

    border-color:rgba(0,188,212,.22);

    box-shadow:

        0 28px 70px rgba(0,188,212,.18);

    animation-play-state:paused;

}

/*==================================================
        TOP ACCENT LINE
==================================================*/

.faqsupport-card::after{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:3px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    transition:width .45s ease;

}

.faqsupport-card:hover::after{

    width:100%;

}

/*==================================================
        ICON
==================================================*/

.faqsupport-icon{

    position:relative;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

/* Pulse Ring */

.faqsupport-icon::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:faqSupportPulse 3s ease-out infinite;

}

@keyframes faqSupportPulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.45);

        opacity:0;

    }

}

.faqsupport-card:hover .faqsupport-icon{

    transform:rotate(-10deg) scale(1.08);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.18),

        rgba(126,211,33,.16)

    );

    border-color:rgba(0,188,212,.30);

    box-shadow:

        0 0 30px rgba(0,188,212,.28);

}

/*==================================================
        LABEL
==================================================*/

.faqsupport-number{

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease;

}

.faqsupport-card:hover .faqsupport-number{

    transform:translateY(-3px);

    background:rgba(0,188,212,.10);

    border-color:rgba(0,188,212,.20);

}

/*==================================================
        TITLE
==================================================*/

.faqsupport-card h3{

    transition:
        color .35s ease,
        transform .35s ease;

}

.faqsupport-card:hover h3{

    color:#00BCD4;

    transform:translateY(-3px);

}

/*==================================================
        DESCRIPTION
==================================================*/

.faqsupport-card p{

    transition:color .35s ease;

}

.faqsupport-card:hover p{

    color:#E2E8F0;

}

/*==================================================
        LINK
==================================================*/

.faqsupport-link{

    position:relative;

    transition:
        color .35s ease,
        letter-spacing .35s ease;

}

.faqsupport-link i{

    transition:transform .35s ease;

}

.faqsupport-card:hover .faqsupport-link{

    letter-spacing:.5px;

}

.faqsupport-card:hover .faqsupport-link i{

    transform:translateX(8px);

}

/* Animated Underline */

.faqsupport-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    border-radius:20px;

    background:#00BCD4;

    transition:width .35s ease;

}

.faqsupport-card:hover .faqsupport-link::after{

    width:100%;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.faqsupport-card{

animation:none;

}

.faqsupport-card:hover{

transform:none;

box-shadow:none;

}

.faqsupport-card:hover .faqsupport-icon{

transform:scale(1.05);

box-shadow:none;

}

.faqsupport-card:hover .faqsupport-number{

transform:none;

}

.faqsupport-card:hover h3{

transform:none;

}

.faqsupport-card:hover .faqsupport-link i{

transform:translateX(4px);

}

}   

/* Support Section Ends Here */

/* Ask Section Starts Here */

/*==================================================
        ASK A QUESTION
==================================================*/

.faqask-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.faqask-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,188,212,.08),

        transparent 70%

    );

    filter:blur(130px);

}

.faqask-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(126,211,33,.08),

        transparent 70%

    );

    filter:blur(120px);

}

/*==================================
WRAPPER
==================================*/

.faqask-wrapper{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:1fr 560px;

    gap:70px;

    align-items:center;

}

/*==================================
LEFT SIDE
==================================*/

.faqask-info{

    position:relative;

}

.faqask-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    margin-bottom:30px;

    border-radius:50px;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-size:.9rem;

    font-weight:600;

}

.faqask-illustration{

    margin-bottom:35px;

}

.faqask-illustration img{

    width:100%;

    max-width:420px;

    display:block;

}

.faqask-info h2{

    margin-bottom:20px;

    color:#fff;

    font-size:3rem;

    line-height:1.2;

    font-weight:800;

}

.faqask-info h2 span{

    display:block;

    color:#00BCD4;

}

.faqask-info>p{

    max-width:560px;

    margin-bottom:40px;

    color:#CBD5E1;

    font-size:1rem;

    line-height:2;

}

/*==================================
HIGHLIGHTS
==================================*/

.faqask-highlights{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.faqask-highlight{

    display:flex;

    align-items:center;

    gap:18px;

}

.faqask-icon{

    width:60px;

    height:60px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    backdrop-filter:blur(12px);

    font-size:1.45rem;

}

.faqask-highlight h4{

    margin-bottom:6px;

    color:#fff;

    font-size:1.1rem;

    font-weight:600;

}

.faqask-highlight p{

    color:#CBD5E1;

    font-size:.93rem;

    line-height:1.7;

}

/*==================================
FORM
==================================*/

.faqask-formbox{

    position:relative;

    padding:40px;

    border-radius:28px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

}

.faqask-formbox::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:28px;

    background:linear-gradient(

        135deg,

        rgba(255,255,255,.05),

        transparent 45%,

        rgba(0,188,212,.05)

    );

    pointer-events:none;

}

.faqask-formbox form{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px;

}

/*==================================
FIELDS
==================================*/

.faqask-field{

    display:flex;

    flex-direction:column;

}

.faqask-full{

    grid-column:1/-1;

}

.faqask-field label{

    margin-bottom:10px;

    color:#fff;

    font-size:.92rem;

    font-weight:500;

}

.faqask-field input,

.faqask-field textarea{

    width:100%;

    padding:16px 18px;

    border-radius:14px;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.04);

    backdrop-filter:blur(10px);

    color:#fff;

    font-size:.95rem;

    outline:none;

    transition:.35s;

}

.faqask-field textarea{

    resize:none;

    min-height:180px;

}

.faqask-field input::placeholder,

.faqask-field textarea::placeholder{

    color:#94A3B8;

}

/*==================================
SUBMIT BUTTON
==================================*/

.faqask-submit{

    grid-column:1/-1;

    border:none;

    cursor:pointer;

    padding:18px;

    border-radius:60px;

    background:linear-gradient(

        135deg,

        #00BCD4,

        #7ED321

    );

    color:#08111F;

    font-size:1rem;

    font-weight:700;

    transition:.35s;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.faqask-wrapper{

grid-template-columns:1fr;

gap:60px;

}

.faqask-info{

text-align:center;

}

.faqask-info>p{

margin-left:auto;

margin-right:auto;

}

.faqask-illustration img{

margin:auto;

}

}

@media(max-width:768px){

.faqask-section{

padding:90px 5%;

}

.faqask-info h2{

font-size:2.3rem;

}

.faqask-info>p{

font-size:.95rem;

line-height:1.8;

}

.faqask-highlights{

gap:18px;

}

.faqask-highlight{

align-items:flex-start;

text-align:left;

}

.faqask-icon{

width:52px;

height:52px;

font-size:1.2rem;

}

.faqask-formbox{

padding:25px;

border-radius:22px;

}

.faqask-formbox form{

grid-template-columns:1fr;

gap:18px;

}

.faqask-full{

grid-column:auto;

}

.faqask-field textarea{

min-height:150px;

}

.faqask-submit{

padding:16px;

font-size:.95rem;

}

}

/* Part - 2 */

/*==================================================
        LEFT CONTENT
==================================================*/

.faqask-info{

    animation:faqAskFadeLeft .9s ease;

}

.faqask-formbox{

    animation:faqAskFadeRight .9s ease;

}

@keyframes faqAskFadeLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes faqAskFadeRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*==================================================
        FORM PANEL
==================================================*/

.faqask-formbox{

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;

    animation:faqAskGlassFloat 8s ease-in-out infinite;

}

@keyframes faqAskGlassFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

.faqask-formbox:hover{

    transform:translateY(-10px);

    border-color:rgba(0,188,212,.22);

    box-shadow:

        0 30px 70px rgba(0,188,212,.18);

}

/*==================================================
        BADGE
==================================================*/

.faqask-badge{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.faqask-badge::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.faqask-badge:hover{

    transform:translateY(-3px);

    box-shadow:

        0 0 24px rgba(0,188,212,.20);

}

.faqask-badge:hover::before{

    left:150%;

}

/*==================================================
        ILLUSTRATION
==================================================*/

.faqask-illustration img{

    animation:faqAskIllustration 6s ease-in-out infinite;

}

@keyframes faqAskIllustration{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-14px);

    }

}

/*==================================================
        HIGHLIGHTS
==================================================*/

.faqask-highlight{

    transition:
        transform .35s ease;

}

.faqask-highlight:hover{

    transform:translateX(10px);

}

.faqask-icon{

    position:relative;

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;

}

/* Pulse Ring */

.faqask-icon::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:faqAskPulse 3s ease-out infinite;

}

@keyframes faqAskPulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.45);

        opacity:0;

    }

}

.faqask-highlight:hover .faqask-icon{

    transform:rotate(-10deg) scale(1.08);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.18),

        rgba(126,211,33,.16)

    );

    border-color:rgba(0,188,212,.30);

    box-shadow:

        0 0 28px rgba(0,188,212,.25);

}

.faqask-highlight h4{

    transition:

        color .35s ease,

        transform .35s ease;

}

.faqask-highlight:hover h4{

    color:#00BCD4;

    transform:translateY(-2px);

}

/*==================================================
        FORM FIELDS
==================================================*/

.faqask-field input,

.faqask-field textarea{

    transition:

        border-color .35s ease,

        background .35s ease,

        box-shadow .35s ease,

        transform .35s ease;

}

.faqask-field input:focus,

.faqask-field textarea:focus{

    border-color:rgba(0,188,212,.30);

    background:rgba(0,188,212,.06);

    box-shadow:

        0 0 0 4px rgba(0,188,212,.08);

    transform:translateY(-2px);

}

/*==================================================
        SUBMIT BUTTON
==================================================*/

.faqask-submit{

    position:relative;

    overflow:hidden;

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.faqask-submit::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.faqask-submit:hover{

    transform:translateY(-5px);

    box-shadow:

        0 20px 45px rgba(0,188,212,.28);

}

.faqask-submit:hover::before{

    left:150%;

}

/*==================================================
        STAGGER ANIMATION
==================================================*/

.faqask-field{

    opacity:0;

    animation:faqFieldReveal .7s ease forwards;

}

.faqask-field:nth-child(1){

animation-delay:.10s;

}

.faqask-field:nth-child(2){

animation-delay:.18s;

}

.faqask-field:nth-child(3){

animation-delay:.26s;

}

.faqask-field:nth-child(4){

animation-delay:.34s;

}

.faqask-field:nth-child(5){

animation-delay:.42s;

}

.faqask-submit{

    opacity:0;

    animation:faqFieldReveal .7s ease forwards;

    animation-delay:.55s;

}

@keyframes faqFieldReveal{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.faqask-formbox{

animation:none;

}

.faqask-formbox:hover{

transform:none;

box-shadow:none;

}

.faqask-highlight:hover{

transform:none;

}

.faqask-highlight:hover .faqask-icon{

transform:scale(1.05);

box-shadow:none;

}

.faqask-submit:hover{

transform:none;

box-shadow:none;

}

.faqask-field input:focus,

.faqask-field textarea:focus{

transform:none;

}

}

/* Ask Section Ends Here */

/* CTA Section Starts Here */

/*==================================================
        FAQ FINAL CTA
==================================================*/

.faqcta-section{

    position:relative;

    overflow:hidden;

    padding:140px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

/*==================================
BACKGROUND GLOWS
==================================*/

.faqcta-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(150px);

    pointer-events:none;

}

.faqcta-glow-left{

    width:650px;

    height:650px;

    top:-260px;

    left:-220px;

    background:rgba(0,188,212,.12);

}

.faqcta-glow-right{

    width:560px;

    height:560px;

    right:-180px;

    bottom:-180px;

    background:rgba(126,211,33,.10);

}

/*==================================
FLOATING CHAT BUBBLES
==================================*/

.faqcta-bubbles{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.faqcta-bubbles .bubble{

    position:absolute;

    font-size:2rem;

    opacity:.08;

}

.bubble1{

top:14%;

left:10%;

}

.bubble2{

top:24%;

right:12%;

}

.bubble3{

top:62%;

left:14%;

}

.bubble4{

bottom:18%;

right:18%;

}

.bubble5{

bottom:12%;

left:48%;

}

/*==================================
ABSTRACT SHAPES
==================================*/

.faqcta-shapes{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.faqcta-shapes .shape{

    position:absolute;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.03);

    backdrop-filter:blur(10px);

}

.faqcta-shapes .circle{

    width:70px;

    height:70px;

    border-radius:50%;

    top:18%;

    left:42%;

}

.faqcta-shapes .square{

    width:55px;

    height:55px;

    top:35%;

    right:18%;

    transform:rotate(22deg);

}

.faqcta-shapes .triangle{

    width:60px;

    height:60px;

    left:20%;

    bottom:18%;

    clip-path:polygon(50% 0%,0% 100%,100% 100%);

}

/*==================================
GLASS PANEL
==================================*/

.faqcta-panel{

    position:relative;

    z-index:5;

    max-width:980px;

    margin:auto;

    padding:70px 60px;

    text-align:center;

    border-radius:34px;

    overflow:hidden;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(22px);

}

.faqcta-panel::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        135deg,

        rgba(255,255,255,.05),

        transparent 45%,

        rgba(0,188,212,.05)

    );

    pointer-events:none;

}

/*==================================
BADGE
==================================*/

.faqcta-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    margin-bottom:28px;

    border-radius:60px;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-size:.95rem;

    font-weight:600;

}

/*==================================
HEADING
==================================*/

.faqcta-panel h2{

    margin:0 0 24px;

    color:#fff;

    font-size:3.6rem;

    font-weight:800;

    line-height:1.2;

}

.faqcta-panel h2 span{

    display:block;

    color:#00BCD4;

}

/*==================================
CONTENT
==================================*/

.faqcta-panel p{

    max-width:760px;

    margin:0 auto 45px;

    color:#CBD5E1;

    font-size:1rem;

    line-height:2;

}

/*==================================
BUTTONS
==================================*/

.faqcta-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:50px;

}

.faqcta-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:17px 34px;

    border-radius:60px;

    text-decoration:none;

    font-size:.96rem;

    font-weight:600;

    transition:.35s;

}

/* Primary */

.faqcta-primary{

    background:linear-gradient(

        135deg,

        #00BCD4,

        #7ED321

    );

    color:#08111F;

}

/* Secondary */

.faqcta-secondary{

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.10);

    color:#fff;

    backdrop-filter:blur(12px);

}

/*==================================
BOTTOM INFO
==================================*/

.faqcta-footer{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:35px;

    padding-top:28px;

    border-top:1px solid rgba(255,255,255,.08);

}

.faqcta-info{

    display:flex;

    align-items:center;

    gap:10px;

    color:#CBD5E1;

    font-size:.95rem;

}

.faqcta-info i{

    color:#00BCD4;

    font-size:1rem;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:768px){

.faqcta-section{

padding:90px 5%;

}

.faqcta-panel{

padding:45px 25px;

border-radius:24px;

}

.faqcta-badge{

font-size:.85rem;

padding:10px 18px;

margin-bottom:22px;

}

.faqcta-panel h2{

font-size:2.3rem;

}

.faqcta-panel p{

font-size:.95rem;

line-height:1.8;

margin-bottom:35px;

}

.faqcta-buttons{

flex-direction:column;

gap:15px;

margin-bottom:35px;

}

.faqcta-btn{

width:100%;

padding:16px;

font-size:.94rem;

}

.faqcta-footer{

flex-direction:column;

gap:18px;

align-items:center;

}

}

/* Part - 2 */

/*==================================================
        GLASS PANEL
==================================================*/

.faqcta-panel{

    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;

    animation:faqCtaFloat 8s ease-in-out infinite;

}

@keyframes faqCtaFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

.faqcta-panel:hover{

    border-color:rgba(0,188,212,.22);

    box-shadow:
        0 30px 80px rgba(0,188,212,.18);

}

/*==================================================
        BACKGROUND GLOWS
==================================================*/

.faqcta-glow{

    animation:faqCtaGlow 8s ease-in-out infinite;

}

.faqcta-glow-right{

    animation-delay:4s;

}

@keyframes faqCtaGlow{

    0%,100%{

        transform:scale(1);

        opacity:.6;

    }

    50%{

        transform:scale(1.18);

        opacity:1;

    }

}

/*==================================================
        FLOATING CHAT BUBBLES
==================================================*/

.faqcta-bubbles .bubble{

    animation:faqBubbleFloat 6s ease-in-out infinite;

}

.bubble2{

animation-delay:1s;

}

.bubble3{

animation-delay:2s;

}

.bubble4{

animation-delay:3s;

}

.bubble5{

animation-delay:4s;

}

@keyframes faqBubbleFloat{

    0%,100%{

        transform:translateY(0) scale(.9);

        opacity:.08;

    }

    50%{

        transform:translateY(-22px) scale(1.18);

        opacity:.28;

    }

}

/*==================================================
        ABSTRACT SHAPES
==================================================*/

.faqcta-shapes .shape{

    animation:faqShapeFloat 8s ease-in-out infinite;

}

.square{

animation-delay:1.5s;

}

.triangle{

animation-delay:3s;

}

@keyframes faqShapeFloat{

    0%,100%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(-14px) rotate(12deg);

    }

}

/*==================================================
        BADGE
==================================================*/

.faqcta-badge{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.faqcta-badge::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.faqcta-badge:hover{

    transform:translateY(-3px);

    box-shadow:
        0 0 24px rgba(0,188,212,.22);

}

.faqcta-badge:hover::before{

    left:150%;

}

/*==================================================
        HEADING
==================================================*/

.faqcta-panel h2 span{

    animation:faqHeadingGlow 3s ease-in-out infinite;

}

@keyframes faqHeadingGlow{

    0%,100%{

        text-shadow:none;

    }

    50%{

        text-shadow:

            0 0 18px rgba(0,188,212,.45);

    }

}

/*==================================================
        BUTTONS
==================================================*/

.faqcta-btn{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.faqcta-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.faqcta-btn:hover::before{

    left:150%;

}

.faqcta-primary:hover{

    transform:translateY(-5px);

    box-shadow:

        0 20px 45px rgba(0,188,212,.30);

}

.faqcta-secondary:hover{

    transform:translateY(-5px);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.16),

        rgba(126,211,33,.12)

    );

    border-color:rgba(0,188,212,.22);

    box-shadow:

        0 18px 40px rgba(0,188,212,.18);

}

/*==================================================
        FOOTER INFO
==================================================*/

.faqcta-info{

    transition:
        transform .35s ease,
        color .35s ease;

}

.faqcta-info i{

    transition:
        transform .35s ease,
        color .35s ease;

}

.faqcta-info:hover{

    transform:translateY(-4px);

    color:#fff;

}

.faqcta-info:hover i{

    transform:scale(1.2);

    color:#7ED321;

}

/*==================================================
        ENTRANCE ANIMATION
==================================================*/

.faqcta-panel>*{

    opacity:0;

    animation:faqCtaReveal .8s ease forwards;

}

.faqcta-badge{

animation-delay:.1s;

}

.faqcta-panel h2{

animation-delay:.2s;

}

.faqcta-panel p{

animation-delay:.35s;

}

.faqcta-buttons{

animation-delay:.5s;

}

.faqcta-footer{

animation-delay:.7s;

}

@keyframes faqCtaReveal{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.faqcta-panel{

animation:none;

}

.faqcta-panel:hover{

transform:none;

box-shadow:none;

}

.faqcta-badge:hover{

transform:none;

box-shadow:none;

}

.faqcta-primary:hover,

.faqcta-secondary:hover{

transform:none;

box-shadow:none;

}

.faqcta-info:hover{

transform:none;

}

.faqcta-info:hover i{

transform:none;

}

.faqcta-glow{

animation-duration:10s;

}

}

/* CTA Section Ends Here */

/* FAQS Page Ends Here */


/* Gallery Page Starts Here */

/* Hero Section Starts Here */

/*==================================================
        GALLERY HERO
==================================================*/

.galleryhero-section{

    position:relative;

    overflow:hidden;

    padding:170px 5% 120px;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

/*==================================
BACKGROUND GLOWS
==================================*/

.galleryhero-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(150px);

    pointer-events:none;

}

.galleryhero-glow-left{

    width:650px;

    height:650px;

    top:-260px;

    left:-220px;

    background:rgba(0,188,212,.12);

}

.galleryhero-glow-right{

    width:560px;

    height:560px;

    right:-180px;

    bottom:-180px;

    background:rgba(126,211,33,.10);

}

/*==================================
FLOATING PHOTO FRAMES
==================================*/

.galleryhero-frames{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.galleryhero-frame{

    position:absolute;

    width:68px;

    height:68px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(14px);

    color:#00BCD4;

    font-size:1.4rem;

}

.frame1{

top:14%;

left:8%;

transform:rotate(-15deg);

}

.frame2{

top:22%;

right:10%;

transform:rotate(12deg);

}

.frame3{

top:58%;

left:10%;

transform:rotate(18deg);

}

.frame4{

bottom:20%;

right:14%;

transform:rotate(-12deg);

}

.frame5{

bottom:12%;

left:46%;

transform:rotate(8deg);

}

/*==================================
CAMERA FLASHES
==================================*/

.galleryhero-flashes{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.galleryhero-flashes .flash{

    position:absolute;

    width:10px;

    height:10px;

    border-radius:50%;

    background:#fff;

    box-shadow:

    0 0 25px rgba(255,255,255,.9),

    0 0 70px rgba(0,188,212,.4);

    opacity:0;

}

.flash1{

top:20%;

left:34%;

}

.flash2{

top:38%;

right:18%;

}

.flash3{

bottom:20%;

left:28%;

}

.flash4{

bottom:26%;

right:36%;

}

/*==================================
PARTICLES
==================================*/

.galleryhero-particles{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.galleryhero-particles span{

    position:absolute;

    width:6px;

    height:6px;

    border-radius:50%;

    background:rgba(255,255,255,.35);

}

.galleryhero-particles span:nth-child(1){

top:18%;

left:18%;

}

.galleryhero-particles span:nth-child(2){

top:30%;

right:18%;

}

.galleryhero-particles span:nth-child(3){

top:52%;

left:8%;

}

.galleryhero-particles span:nth-child(4){

top:64%;

right:12%;

}

.galleryhero-particles span:nth-child(5){

bottom:18%;

left:22%;

}

.galleryhero-particles span:nth-child(6){

bottom:28%;

right:26%;

}

.galleryhero-particles span:nth-child(7){

bottom:12%;

left:55%;

}

.galleryhero-particles span:nth-child(8){

top:42%;

left:50%;

}

/*==================================
WRAPPER
==================================*/

.galleryhero-wrapper{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:1fr 540px;

    gap:70px;

    align-items:center;

}

/*==================================
BREADCRUMB
==================================*/

.galleryhero-breadcrumb{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 22px;

    margin-bottom:28px;

    border-radius:50px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(14px);

}

.galleryhero-breadcrumb a,

.galleryhero-breadcrumb span{

    color:#CBD5E1;

    text-decoration:none;

    font-size:.94rem;

}

.galleryhero-breadcrumb i{

    color:#00BCD4;

    font-size:.8rem;

}

/*==================================
BADGE
==================================*/

.galleryhero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    margin-bottom:30px;

    border-radius:50px;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-size:.92rem;

    font-weight:600;

}

/*==================================
CONTENT
==================================*/

.galleryhero-content h1{

    margin-bottom:24px;

    color:#fff;

    font-size:4.2rem;

    line-height:1.15;

    font-weight:800;

}

.galleryhero-content h1 span{

    display:block;

    color:#00BCD4;

}

.galleryhero-content p{

    max-width:650px;

    margin-bottom:40px;

    color:#CBD5E1;

    font-size:1rem;

    line-height:2;

}

/*==================================
BUTTONS
==================================*/

.galleryhero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.galleryhero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:17px 34px;

    border-radius:60px;

    text-decoration:none;

    font-size:.96rem;

    font-weight:600;

}

.galleryhero-primary{

    color:#08111F;

    background:linear-gradient(

        135deg,

        #00BCD4,

        #7ED321

    );

}

.galleryhero-secondary{

    color:#fff;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(12px);

}

/*==================================
PHOTO COLLAGE
==================================*/

.galleryhero-collage{

    position:relative;

    width:520px;

    height:520px;

    margin:auto;

}

.galleryhero-photo{

    position:absolute;

    overflow:hidden;

    border-radius:24px;

    background:#111;

    border:10px solid rgba(255,255,255,.10);

    backdrop-filter:blur(20px);

}

.galleryhero-photo img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.photo1{

width:190px;

height:220px;

top:0;

left:25px;

transform:rotate(-10deg);

}

.photo2{

width:170px;

height:200px;

top:35px;

right:20px;

transform:rotate(8deg);

}

.photo3{

width:170px;

height:200px;

bottom:25px;

left:20px;

transform:rotate(8deg);

}

.photo4{

width:190px;

height:220px;

bottom:0;

right:20px;

transform:rotate(-10deg);

}

/*==================================
CENTER CAMERA
==================================*/

.galleryhero-camera{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:110px;

    height:110px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(

        135deg,

        #00BCD4,

        #7ED321

    );

    color:#08111F;

    font-size:2.6rem;

    box-shadow:

    0 0 40px rgba(0,188,212,.35);

}

/*==================================
SCROLL
==================================*/

.galleryhero-scroll{

    margin-top:80px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

}

.galleryhero-scroll span{

    color:#94A3B8;

    font-size:.9rem;

}

.galleryhero-mouse{

    width:34px;

    height:58px;

    border:2px solid rgba(255,255,255,.18);

    border-radius:25px;

    display:flex;

    justify-content:center;

    padding-top:8px;

}

.galleryhero-wheel{

    width:6px;

    height:12px;

    border-radius:20px;

    background:#00BCD4;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.galleryhero-wrapper{

grid-template-columns:1fr;

text-align:center;

}

.galleryhero-content p{

margin-left:auto;

margin-right:auto;

}

.galleryhero-buttons{

justify-content:center;

}

}

@media(max-width:768px){

.galleryhero-section{

padding:140px 5% 90px;

}

.galleryhero-content h1{

font-size:2.7rem;

}

.galleryhero-content p{

font-size:.95rem;

line-height:1.8;

}

.galleryhero-collage{

width:320px;

height:320px;

}

.photo1{

width:120px;

height:145px;

left:10px;

}

.photo2{

width:110px;

height:135px;

right:10px;

}

.photo3{

width:110px;

height:135px;

left:10px;

}

.photo4{

width:120px;

height:145px;

right:10px;

}

.galleryhero-camera{

width:82px;

height:82px;

font-size:2rem;

}

.galleryhero-buttons{

flex-direction:column;

}

.galleryhero-btn{

width:100%;

}

}

/* Part - 2 */

/*==================================================
        HERO ENTRANCE
==================================================*/

.galleryhero-content{

    animation:galleryHeroFadeLeft .9s ease;

}

.galleryhero-collage{

    animation:galleryHeroFadeRight .9s ease;

}

@keyframes galleryHeroFadeLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes galleryHeroFadeRight{

    from{

        opacity:0;

        transform:translateX(60px) scale(.9);

    }

    to{

        opacity:1;

        transform:translateX(0) scale(1);

    }

}

/*==================================================
        GLOW ANIMATION
==================================================*/

.galleryhero-glow{

    animation:galleryGlowPulse 8s ease-in-out infinite;

}

.galleryhero-glow-right{

animation-delay:4s;

}

@keyframes galleryGlowPulse{

    0%,100%{

        transform:scale(1);

        opacity:.6;

    }

    50%{

        transform:scale(1.18);

        opacity:1;

    }

}

/*==================================================
        FLOATING PHOTO FRAMES
==================================================*/

.galleryhero-frame{

    animation:galleryFrameFloat 7s ease-in-out infinite;

}

.frame2{

animation-delay:1s;

}

.frame3{

animation-delay:2s;

}

.frame4{

animation-delay:3s;

}

.frame5{

animation-delay:4s;

}

@keyframes galleryFrameFloat{

    0%,100%{

        transform:translateY(0) rotate(-10deg);

    }

    50%{

        transform:translateY(-18px) rotate(10deg);

    }

}

/*==================================================
        CAMERA FLASH
==================================================*/

.galleryhero-flashes .flash{

    animation:galleryFlash 5s infinite;

}

.flash2{

animation-delay:1.2s;

}

.flash3{

animation-delay:2.4s;

}

.flash4{

animation-delay:3.6s;

}

@keyframes galleryFlash{

    0%,85%{

        opacity:0;

        transform:scale(.2);

    }

    88%{

        opacity:1;

        transform:scale(3);

    }

    100%{

        opacity:0;

        transform:scale(6);

    }

}

/*==================================================
        FLOATING PARTICLES
==================================================*/

.galleryhero-particles span{

    animation:galleryParticleFloat 8s linear infinite;

}

.galleryhero-particles span:nth-child(even){

animation-duration:10s;

}

@keyframes galleryParticleFloat{

    from{

        transform:translateY(20px);

        opacity:0;

    }

    50%{

        opacity:1;

    }

    to{

        transform:translateY(-120px);

        opacity:0;

    }

}

/*==================================================
        BADGE
==================================================*/

.galleryhero-badge{

    position:relative;

    overflow:hidden;

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.galleryhero-badge::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.galleryhero-badge:hover{

    transform:translateY(-3px);

    box-shadow:

        0 0 25px rgba(0,188,212,.25);

}

.galleryhero-badge:hover::before{

    left:150%;

}

/*==================================================
        PHOTO COLLAGE
==================================================*/

.galleryhero-photo{

    transition:

        transform .45s ease,

        box-shadow .45s ease,

        border-color .45s ease;

}

.galleryhero-photo img{

    transition:transform .45s ease;

}

.galleryhero-photo:hover{

    z-index:20;

    border-color:rgba(0,188,212,.30);

    box-shadow:

        0 25px 55px rgba(0,188,212,.22);

}

.galleryhero-photo:hover img{

    transform:scale(1.12);

}

.photo1{

animation:photoFloat1 6s ease-in-out infinite;

}

.photo2{

animation:photoFloat2 7s ease-in-out infinite;

}

.photo3{

animation:photoFloat3 8s ease-in-out infinite;

}

.photo4{

animation:photoFloat4 6.5s ease-in-out infinite;

}

@keyframes photoFloat1{

    50%{

        transform:translateY(-12px) rotate(-8deg);

    }

}

@keyframes photoFloat2{

    50%{

        transform:translateY(-15px) rotate(10deg);

    }

}

@keyframes photoFloat3{

    50%{

        transform:translateY(-10px) rotate(6deg);

    }

}

@keyframes photoFloat4{

    50%{

        transform:translateY(-16px) rotate(-8deg);

    }

}

/*==================================================
        CENTER CAMERA
==================================================*/

.galleryhero-camera{

    animation:cameraPulse 3s ease-in-out infinite;

}

.galleryhero-camera i{

    animation:cameraRotate 12s linear infinite;

}

@keyframes cameraPulse{

    0%,100%{

        transform:translate(-50%,-50%) scale(1);

    }

    50%{

        transform:translate(-50%,-50%) scale(1.08);

        box-shadow:

            0 0 60px rgba(0,188,212,.45);

    }

}

@keyframes cameraRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*==================================================
        BUTTONS
==================================================*/

.galleryhero-btn{

    position:relative;

    overflow:hidden;

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;

}

.galleryhero-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:40%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.galleryhero-btn:hover::before{

    left:150%;

}

.galleryhero-primary:hover{

    transform:translateY(-5px);

    box-shadow:

        0 18px 45px rgba(0,188,212,.30);

}

.galleryhero-secondary:hover{

    transform:translateY(-5px);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.16),

        rgba(126,211,33,.12)

    );

    border-color:rgba(0,188,212,.22);

    box-shadow:

        0 18px 40px rgba(0,188,212,.18);

}

/*==================================================
        SCROLL INDICATOR
==================================================*/

.galleryhero-wheel{

    animation:galleryScrollWheel 1.8s infinite;

}

@keyframes galleryScrollWheel{

    0%{

        transform:translateY(0);

        opacity:1;

    }

    100%{

        transform:translateY(18px);

        opacity:0;

    }

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.galleryhero-photo:hover{

transform:none;

box-shadow:none;

}

.galleryhero-btn:hover{

transform:none;

box-shadow:none;

}

.galleryhero-badge:hover{

transform:none;

box-shadow:none;

}

.galleryhero-glow{

animation-duration:10s;

}

.galleryhero-camera i{

animation-duration:18s;

}

}

/* Hero Section Ends Here */

/* Featured Gallery Section Starts Here */

/*==================================================
        FEATURED GALLERY
==================================================*/

.galleryfeatured-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.galleryfeatured-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,188,212,.08),

        transparent 70%

    );

    filter:blur(130px);

}

.galleryfeatured-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(126,211,33,.08),

        transparent 70%

    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.galleryfeatured-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.galleryfeatured-section .section-heading h2{

    margin:22px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.galleryfeatured-section .section-heading h2 span{

    color:#00BCD4;

}

.galleryfeatured-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
EDITORIAL GRID
==================================*/

.galleryfeatured-grid{

    position:relative;

    z-index:5;

    max-width:1320px;

    margin:auto;

    display:grid;

    grid-template-columns:1.4fr 1fr;

    grid-template-rows:260px 260px 260px;

    gap:24px;

}

/*==================================
GRID POSITIONS
==================================*/

.galleryfeatured-item.large{

    grid-column:1;

    grid-row:1 / span 2;

}

.galleryfeatured-item.small:nth-child(2){

    grid-column:2;

    grid-row:1;

}

.galleryfeatured-item.small:nth-child(3){

    grid-column:2;

    grid-row:2;

}

.galleryfeatured-item.medium{

    grid-column:1;

    grid-row:3;

}

.galleryfeatured-item.large2{

    grid-column:2;

    grid-row:3;

}

/*==================================
ITEM
==================================*/

.galleryfeatured-item{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    background:#111827;

    border:1px solid rgba(255,255,255,.08);

}

.galleryfeatured-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/*==================================
OVERLAY
==================================*/

.galleryfeatured-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:28px;

    background:linear-gradient(

        180deg,

        transparent 25%,

        rgba(3,7,18,.92)

    );

}

/*==================================
CATEGORY BADGE
==================================*/

.galleryfeatured-category{

    align-self:flex-start;

    margin-bottom:18px;

    padding:9px 18px;

    border-radius:40px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(14px);

    color:#fff;

    font-size:.82rem;

    font-weight:600;

}

/*==================================
TITLE
==================================*/

.galleryfeatured-overlay h3{

    margin-bottom:22px;

    color:#fff;

    font-size:1.45rem;

    line-height:1.45;

    font-weight:700;

}

.galleryfeatured-item.small h3{

    font-size:1.15rem;

}

.galleryfeatured-item.medium h3{

    font-size:1.2rem;

}

/*==================================
VIEW BUTTON
==================================*/

.galleryfeatured-overlay a{

    width:54px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.10);

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(14px);

    color:#fff;

    text-decoration:none;

    font-size:1rem;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.galleryfeatured-grid{

grid-template-columns:1fr 1fr;

grid-template-rows:auto;

}

.galleryfeatured-item.large,

.galleryfeatured-item.small:nth-child(2),

.galleryfeatured-item.small:nth-child(3),

.galleryfeatured-item.medium,

.galleryfeatured-item.large2{

grid-column:auto;

grid-row:auto;

height:280px;

}

}

@media(max-width:768px){

.galleryfeatured-section{

padding:90px 5%;

}

.galleryfeatured-section .section-heading{

margin-bottom:60px;

}

.galleryfeatured-section .section-heading h2{

font-size:2.3rem;

}

.galleryfeatured-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.galleryfeatured-grid{

grid-template-columns:1fr;

gap:18px;

}

.galleryfeatured-item{

height:260px;

border-radius:22px;

}

.galleryfeatured-overlay{

padding:22px;

}

.galleryfeatured-category{

font-size:.76rem;

padding:8px 14px;

margin-bottom:14px;

}

.galleryfeatured-overlay h3{

font-size:1.1rem !important;

margin-bottom:18px;

}

.galleryfeatured-overlay a{

width:46px;

height:46px;

font-size:.9rem;

}

}

/* Part - 2 */

/*==================================================
        GALLERY ITEM
==================================================*/

.galleryfeatured-item{

    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;

    animation:galleryCardFloat 8s ease-in-out infinite;

}

.galleryfeatured-item:nth-child(2){

animation-delay:.4s;

}

.galleryfeatured-item:nth-child(3){

animation-delay:.8s;

}

.galleryfeatured-item:nth-child(4){

animation-delay:1.2s;

}

.galleryfeatured-item:nth-child(5){

animation-delay:1.6s;

}

@keyframes galleryCardFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

.galleryfeatured-item:hover{

    transform:translateY(-12px);

    border-color:rgba(0,188,212,.25);

    box-shadow:

        0 28px 70px rgba(0,188,212,.20);

    z-index:20;

}

/*==================================================
        IMAGE ZOOM
==================================================*/

.galleryfeatured-item img{

    transition:

        transform .7s ease,

        filter .5s ease;

}

.galleryfeatured-item:hover img{

    transform:scale(1.12);

    filter:brightness(.82);

}

/*==================================================
        GLASS OVERLAY
==================================================*/

.galleryfeatured-overlay{

    opacity:.95;

    transition:

        background .45s ease,

        padding .45s ease;

}

.galleryfeatured-item:hover .galleryfeatured-overlay{

    background:linear-gradient(

        180deg,

        rgba(3,7,18,.10),

        rgba(3,7,18,.96)

    );

    padding-bottom:36px;

}

/*==================================================
        CATEGORY BADGE
==================================================*/

.galleryfeatured-category{

    position:relative;

    overflow:hidden;

    transition:

        transform .35s ease,

        background .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;

}

.galleryfeatured-category::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.galleryfeatured-item:hover .galleryfeatured-category{

    transform:translateY(-4px);

    background:rgba(0,188,212,.18);

    border-color:rgba(0,188,212,.25);

    box-shadow:

        0 0 25px rgba(0,188,212,.22);

}

.galleryfeatured-item:hover .galleryfeatured-category::before{

    left:150%;

}

/*==================================================
        TITLE
==================================================*/

.galleryfeatured-overlay h3{

    transition:

        color .35s ease,

        transform .35s ease;

}

.galleryfeatured-item:hover h3{

    color:#00BCD4;

    transform:translateY(-4px);

}

/*==================================================
        VIEW ICON
==================================================*/

.galleryfeatured-overlay a{

    position:relative;

    overflow:hidden;

    transition:

        transform .35s ease,

        background .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;

}

.galleryfeatured-overlay a::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:galleryViewPulse 3s ease-out infinite;

}

@keyframes galleryViewPulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.45);

        opacity:0;

    }

}

.galleryfeatured-item:hover .galleryfeatured-overlay a{

    transform:rotate(15deg) scale(1.08);

    background:linear-gradient(

        135deg,

        #00BCD4,

        #7ED321

    );

    color:#08111F;

    border-color:transparent;

    box-shadow:

        0 0 28px rgba(0,188,212,.30);

}

/*==================================================
        TOP SHINE
==================================================*/

.galleryfeatured-item::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-35%;

    width:55%;

    height:220%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.16),

        transparent

    );

    transform:rotate(25deg);

    transition:.8s;

    z-index:2;

    pointer-events:none;

}

.galleryfeatured-item:hover::before{

    left:140%;

}

/*==================================================
        STAGGER REVEAL
==================================================*/

.galleryfeatured-item{

    opacity:0;

    animation:
        galleryReveal .8s ease forwards,
        galleryCardFloat 8s ease-in-out infinite;

}

.galleryfeatured-item:nth-child(1){

animation-delay:.1s,0s;

}

.galleryfeatured-item:nth-child(2){

animation-delay:.25s,.4s;

}

.galleryfeatured-item:nth-child(3){

animation-delay:.4s,.8s;

}

.galleryfeatured-item:nth-child(4){

animation-delay:.55s,1.2s;

}

.galleryfeatured-item:nth-child(5){

animation-delay:.7s,1.6s;

}

@keyframes galleryReveal{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.galleryfeatured-item{

animation:
galleryReveal .8s ease forwards;

}

.galleryfeatured-item:hover{

transform:none;

box-shadow:none;

}

.galleryfeatured-item:hover img{

transform:scale(1.05);

}

.galleryfeatured-item:hover .galleryfeatured-category{

transform:none;

box-shadow:none;

}

.galleryfeatured-item:hover h3{

transform:none;

}

.galleryfeatured-item:hover .galleryfeatured-overlay a{

transform:scale(1.05);

box-shadow:none;

}

}

/* Featured Gallery Section Ends Here */

/* Event Section Starts Here */

/*==================================================
        EVENT HIGHLIGHTS
==================================================*/

.gallerytimeline-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.gallerytimeline-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,188,212,.08),

        transparent 70%

    );

    filter:blur(130px);

}

.gallerytimeline-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(126,211,33,.08),

        transparent 70%

    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.gallerytimeline-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 90px;

}

.gallerytimeline-section .section-heading h2{

    margin:22px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.gallerytimeline-section .section-heading h2 span{

    color:#00BCD4;

}

.gallerytimeline-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
TIMELINE
==================================*/

.gallerytimeline{

    position:relative;

    max-width:1250px;

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:70px;

    z-index:5;

}

.gallerytimeline::before{

    content:"";

    position:absolute;

    left:120px;

    top:0;

    bottom:0;

    width:2px;

    background:linear-gradient(

        180deg,

        transparent,

        rgba(0,188,212,.40),

        rgba(126,211,33,.35),

        transparent

    );

}

/*==================================
TIMELINE ITEM
==================================*/

.gallerytimeline-item{

    position:relative;

    display:grid;

    grid-template-columns:120px 40px 1fr;

    align-items:flex-start;

    gap:35px;

}

/*==================================
YEAR
==================================*/

.gallerytimeline-year{

    display:flex;

    justify-content:center;

}

.gallerytimeline-year span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:90px;

    height:90px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(0,188,212,.18);

    backdrop-filter:blur(18px);

    color:#00BCD4;

    font-size:1.4rem;

    font-weight:700;

}

/*==================================
DOT
==================================*/

.gallerytimeline-dot{

    position:relative;

    width:18px;

    height:18px;

    margin-top:36px;

    border-radius:50%;

    background:#00BCD4;

    box-shadow:

        0 0 20px rgba(0,188,212,.45);

}

/*==================================
CARD
==================================*/

.gallerytimeline-card{

    position:relative;

    display:grid;

    grid-template-columns:280px 1fr;

    gap:28px;

    overflow:hidden;

    border-radius:28px;

    padding:25px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}

.gallerytimeline-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        135deg,

        rgba(255,255,255,.04),

        transparent 45%,

        rgba(0,188,212,.05)

    );

    pointer-events:none;

}

/*==================================
IMAGE
==================================*/

.gallerytimeline-image{

    position:relative;

    overflow:hidden;

    border-radius:20px;

}

.gallerytimeline-image img{

    width:100%;

    height:100%;

    min-height:240px;

    object-fit:cover;

    display:block;

}

/*==================================
CONTENT
==================================*/

.gallerytimeline-content{

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.gallerytimeline-tag{

    align-self:flex-start;

    margin-bottom:18px;

    padding:9px 18px;

    border-radius:40px;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(12px);

    color:#fff;

    font-size:.82rem;

    font-weight:600;

}

.gallerytimeline-content h3{

    margin-bottom:18px;

    color:#fff;

    font-size:1.6rem;

    font-weight:700;

    line-height:1.4;

}

.gallerytimeline-content p{

    margin-bottom:25px;

    color:#CBD5E1;

    line-height:1.9;

}

.gallerytimeline-content a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#00BCD4;

    text-decoration:none;

    font-weight:600;

    font-size:.95rem;

}

.gallerytimeline-content a i{

    font-size:.85rem;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.gallerytimeline::before{

left:45px;

}

.gallerytimeline-item{

grid-template-columns:90px 30px 1fr;

gap:22px;

}

.gallerytimeline-year span{

width:70px;

height:70px;

font-size:1.15rem;

}

.gallerytimeline-card{

grid-template-columns:1fr;

}

.gallerytimeline-image img{

min-height:240px;

}

}

@media(max-width:768px){

.gallerytimeline-section{

padding:90px 5%;

}

.gallerytimeline-section .section-heading{

margin-bottom:60px;

}

.gallerytimeline-section .section-heading h2{

font-size:2.3rem;

}

.gallerytimeline-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.gallerytimeline{

gap:45px;

}

.gallerytimeline::before{

left:30px;

}

.gallerytimeline-item{

grid-template-columns:60px 20px 1fr;

gap:16px;

}

.gallerytimeline-year span{

width:50px;

height:50px;

font-size:.95rem;

}

.gallerytimeline-dot{

width:14px;

height:14px;

margin-top:18px;

}

.gallerytimeline-card{

padding:18px;

border-radius:22px;

gap:20px;

}

.gallerytimeline-image img{

min-height:200px;

}

.gallerytimeline-tag{

font-size:.75rem;

padding:8px 14px;

margin-bottom:14px;

}

.gallerytimeline-content h3{

font-size:1.2rem;

margin-bottom:12px;

}

.gallerytimeline-content p{

font-size:.92rem;

line-height:1.8;

margin-bottom:18px;

}

.gallerytimeline-content a{

font-size:.9rem;

}

}

/* Part - 2 */

/*==================================================
        TIMELINE ITEMS
==================================================*/

.gallerytimeline-item{

    opacity:0;

    animation:timelineReveal .8s ease forwards;

}

.gallerytimeline-item:nth-child(1){

animation-delay:.1s;

}

.gallerytimeline-item:nth-child(2){

animation-delay:.35s;

}

.gallerytimeline-item:nth-child(3){

animation-delay:.6s;

}

@keyframes timelineReveal{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
        TIMELINE LINE
==================================================*/

.gallerytimeline::before{

    overflow:hidden;

}

.gallerytimeline::after{

    content:"";

    position:absolute;

    left:119px;

    top:-120px;

    width:4px;

    height:120px;

    border-radius:20px;

    background:linear-gradient(

        180deg,

        transparent,

        #00BCD4,

        #7ED321,

        transparent

    );

    animation:timelineFlow 3s linear infinite;

}

@keyframes timelineFlow{

    from{

        top:-120px;

    }

    to{

        top:100%;

    }

}

/*==================================================
        YEAR BADGE
==================================================*/

.gallerytimeline-year span{

    position:relative;

    transition:

        transform .35s ease,

        border-color .35s ease,

        box-shadow .35s ease,

        background .35s ease;

}

.gallerytimeline-year span::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.12);

    animation:timelineYearPulse 3s ease-out infinite;

}

@keyframes timelineYearPulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.45);

        opacity:0;

    }

}

.gallerytimeline-item:hover .gallerytimeline-year span{

    transform:scale(1.08);

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.16),

        rgba(126,211,33,.14)

    );

    border-color:rgba(0,188,212,.30);

    box-shadow:

        0 0 30px rgba(0,188,212,.25);

}

/*==================================================
        TIMELINE DOT
==================================================*/

.gallerytimeline-dot{

    animation:timelineDotPulse 2.5s ease-in-out infinite;

}

@keyframes timelineDotPulse{

    0%,100%{

        transform:scale(1);

        box-shadow:

            0 0 15px rgba(0,188,212,.45);

    }

    50%{

        transform:scale(1.35);

        box-shadow:

            0 0 35px rgba(0,188,212,.65);

    }

}

/*==================================================
        CARD
==================================================*/

.gallerytimeline-card{

    transition:

        transform .4s ease,

        border-color .4s ease,

        box-shadow .4s ease;

}

.gallerytimeline-card:hover{

    transform:translateY(-10px);

    border-color:rgba(0,188,212,.22);

    box-shadow:

        0 28px 70px rgba(0,188,212,.18);

}

/* Animated Top Border */

.gallerytimeline-card::after{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:3px;

    background:linear-gradient(

        90deg,

        #00BCD4,

        #7ED321

    );

    transition:width .45s ease;

}

.gallerytimeline-card:hover::after{

    width:100%;

}

/*==================================================
        IMAGE
==================================================*/

.gallerytimeline-image{

    overflow:hidden;

}

.gallerytimeline-image img{

    transition:

        transform .6s ease,

        filter .45s ease;

}

.gallerytimeline-card:hover .gallerytimeline-image img{

    transform:scale(1.12);

    filter:brightness(.88);

}

/*==================================================
        CATEGORY TAG
==================================================*/

.gallerytimeline-tag{

    position:relative;

    overflow:hidden;

    transition:

        transform .35s ease,

        border-color .35s ease,

        background .35s ease,

        box-shadow .35s ease;

}

.gallerytimeline-tag::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.gallerytimeline-card:hover .gallerytimeline-tag{

    transform:translateY(-3px);

    background:rgba(0,188,212,.14);

    border-color:rgba(0,188,212,.25);

    box-shadow:

        0 0 24px rgba(0,188,212,.18);

}

.gallerytimeline-card:hover .gallerytimeline-tag::before{

    left:150%;

}

/*==================================================
        CONTENT
==================================================*/

.gallerytimeline-content h3{

    transition:

        color .35s ease,

        transform .35s ease;

}

.gallerytimeline-card:hover h3{

    color:#00BCD4;

    transform:translateY(-3px);

}

.gallerytimeline-content p{

    transition:color .35s ease;

}

.gallerytimeline-card:hover p{

    color:#E2E8F0;

}

/*==================================================
        LINK
==================================================*/

.gallerytimeline-content a{

    position:relative;

    transition:

        letter-spacing .35s ease,

        color .35s ease;

}

.gallerytimeline-content a i{

    transition:transform .35s ease;

}

.gallerytimeline-content a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    border-radius:20px;

    background:#00BCD4;

    transition:width .35s ease;

}

.gallerytimeline-card:hover .gallerytimeline-content a{

    letter-spacing:.4px;

}

.gallerytimeline-card:hover .gallerytimeline-content a i{

    transform:translateX(8px);

}

.gallerytimeline-card:hover .gallerytimeline-content a::after{

    width:100%;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:991px){

.gallerytimeline::after{

left:44px;

}

}

@media(max-width:768px){

.gallerytimeline::after{

left:29px;

}

.gallerytimeline-card:hover{

transform:none;

box-shadow:none;

}

.gallerytimeline-card:hover .gallerytimeline-image img{

transform:scale(1.05);

}

.gallerytimeline-card:hover .gallerytimeline-year span{

transform:scale(1.05);

box-shadow:none;

}

.gallerytimeline-card:hover h3{

transform:none;

}

.gallerytimeline-card:hover .gallerytimeline-content a i{

transform:translateX(4px);

}

}

/* Event Section Ends Here */

/* Community Section Starts Here */

/*==================================================
        COMMUNITY STORIES
==================================================*/

.gallerystory-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.gallerystory-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,188,212,.08),

        transparent 70%

    );

    filter:blur(130px);

}

.gallerystory-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(126,211,33,.08),

        transparent 70%

    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.gallerystory-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.gallerystory-section .section-heading h2{

    margin:22px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.gallerystory-section .section-heading h2 span{

    color:#00BCD4;

}

.gallerystory-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
GRID
==================================*/

.gallerystory-grid{

    position:relative;

    z-index:5;

    max-width:1320px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

/*==================================
CARD
==================================*/

.gallerystory-card{

    position:relative;

    overflow:hidden;

    border-radius:30px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}

.gallerystory-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        135deg,

        rgba(255,255,255,.05),

        transparent 45%,

        rgba(0,188,212,.05)

    );

    pointer-events:none;

    z-index:1;

}

/*==================================
IMAGE
==================================*/

.gallerystory-image{

    position:relative;

    overflow:hidden;

    height:300px;

}

.gallerystory-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/*==================================
CATEGORY
==================================*/

.gallerystory-category{

    position:absolute;

    top:22px;

    left:22px;

    z-index:2;

    padding:10px 18px;

    border-radius:50px;

    background:rgba(255,255,255,.10);

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(15px);

    color:#fff;

    font-size:.82rem;

    font-weight:600;

}

/*==================================
CONTENT
==================================*/

.gallerystory-content{

    position:relative;

    z-index:2;

    padding:30px;

}

/*==================================
META
==================================*/

.gallerystory-meta{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

    color:#94A3B8;

    font-size:.82rem;

    text-transform:uppercase;

    letter-spacing:.5px;

}

/*==================================
TITLE
==================================*/

.gallerystory-content h3{

    margin-bottom:18px;

    color:#fff;

    font-size:1.5rem;

    font-weight:700;

    line-height:1.4;

}

/*==================================
DESCRIPTION
==================================*/

.gallerystory-content p{

    margin-bottom:28px;

    color:#CBD5E1;

    font-size:.95rem;

    line-height:1.9;

}

/*==================================
LINK
==================================*/

.gallerystory-content a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#00BCD4;

    text-decoration:none;

    font-size:.95rem;

    font-weight:600;

}

.gallerystory-content a i{

    font-size:.82rem;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:1200px){

.gallerystory-grid{

grid-template-columns:repeat(2,1fr);

gap:24px;

}

}

@media(max-width:768px){

.gallerystory-section{

padding:90px 5%;

}

.gallerystory-section .section-heading{

margin-bottom:60px;

}

.gallerystory-section .section-heading h2{

font-size:2.3rem;

}

.gallerystory-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.gallerystory-grid{

grid-template-columns:1fr;

gap:22px;

}

.gallerystory-card{

border-radius:22px;

}

.gallerystory-image{

height:240px;

}

.gallerystory-category{

top:16px;

left:16px;

padding:8px 14px;

font-size:.75rem;

}

.gallerystory-content{

padding:24px;

}

.gallerystory-meta{

font-size:.74rem;

margin-bottom:14px;

}

.gallerystory-content h3{

font-size:1.22rem;

margin-bottom:14px;

}

.gallerystory-content p{

font-size:.92rem;

line-height:1.8;

margin-bottom:22px;

}

.gallerystory-content a{

font-size:.9rem;

}

}

/* Part - 2  */

/*==================================================
        COMMUNITY STORIES
==================================================*/

.gallerystory-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.gallerystory-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,188,212,.08),

        transparent 70%

    );

    filter:blur(130px);

}

.gallerystory-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(126,211,33,.08),

        transparent 70%

    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.gallerystory-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.gallerystory-section .section-heading h2{

    margin:22px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.gallerystory-section .section-heading h2 span{

    color:#00BCD4;

}

.gallerystory-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
GRID
==================================*/

.gallerystory-grid{

    position:relative;

    z-index:5;

    max-width:1320px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

/*==================================
CARD
==================================*/

.gallerystory-card{

    position:relative;

    overflow:hidden;

    border-radius:30px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}

.gallerystory-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        135deg,

        rgba(255,255,255,.05),

        transparent 45%,

        rgba(0,188,212,.05)

    );

    pointer-events:none;

    z-index:1;

}

/*==================================
IMAGE
==================================*/

.gallerystory-image{

    position:relative;

    overflow:hidden;

    height:300px;

}

.gallerystory-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/*==================================
CATEGORY
==================================*/

.gallerystory-category{

    position:absolute;

    top:22px;

    left:22px;

    z-index:2;

    padding:10px 18px;

    border-radius:50px;

    background:rgba(255,255,255,.10);

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(15px);

    color:#fff;

    font-size:.82rem;

    font-weight:600;

}

/*==================================
CONTENT
==================================*/

.gallerystory-content{

    position:relative;

    z-index:2;

    padding:30px;

}

/*==================================
META
==================================*/

.gallerystory-meta{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

    color:#94A3B8;

    font-size:.82rem;

    text-transform:uppercase;

    letter-spacing:.5px;

}

/*==================================
TITLE
==================================*/

.gallerystory-content h3{

    margin-bottom:18px;

    color:#fff;

    font-size:1.5rem;

    font-weight:700;

    line-height:1.4;

}

/*==================================
DESCRIPTION
==================================*/

.gallerystory-content p{

    margin-bottom:28px;

    color:#CBD5E1;

    font-size:.95rem;

    line-height:1.9;

}

/*==================================
LINK
==================================*/

.gallerystory-content a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#00BCD4;

    text-decoration:none;

    font-size:.95rem;

    font-weight:600;

}

.gallerystory-content a i{

    font-size:.82rem;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:1200px){

.gallerystory-grid{

grid-template-columns:repeat(2,1fr);

gap:24px;

}

}

@media(max-width:768px){

.gallerystory-section{

padding:90px 5%;

}

.gallerystory-section .section-heading{

margin-bottom:60px;

}

.gallerystory-section .section-heading h2{

font-size:2.3rem;

}

.gallerystory-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.gallerystory-grid{

grid-template-columns:1fr;

gap:22px;

}

.gallerystory-card{

border-radius:22px;

}

.gallerystory-image{

height:240px;

}

.gallerystory-category{

top:16px;

left:16px;

padding:8px 14px;

font-size:.75rem;

}

.gallerystory-content{

padding:24px;

}

.gallerystory-meta{

font-size:.74rem;

margin-bottom:14px;

}

.gallerystory-content h3{

font-size:1.22rem;

margin-bottom:14px;

}

.gallerystory-content p{

font-size:.92rem;

line-height:1.8;

margin-bottom:22px;

}

.gallerystory-content a{

font-size:.9rem;

}

}

/* Community Section Ends Here */

/* Video Section Starts Here */

/*==================================================
        VIDEO GALLERY
==================================================*/

.galleryvideo-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.galleryvideo-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.08),
        transparent 70%
    );

    filter:blur(130px);

}

.galleryvideo-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(126,211,33,.08),
        transparent 70%
    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.galleryvideo-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.galleryvideo-section .section-heading h2{

    margin:22px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.galleryvideo-section .section-heading h2 span{

    color:#00BCD4;

}

.galleryvideo-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
FEATURED VIDEO
==================================*/

.galleryvideo-featured{

    position:relative;

    z-index:5;

    overflow:hidden;

    max-width:1320px;

    margin:0 auto 60px;

    height:650px;

    border-radius:34px;

    background:#111827;

    border:1px solid rgba(255,255,255,.08);

}

.galleryvideo-featured img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/*==================================
PLAY BUTTON
==================================*/

.galleryvideo-play{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:110px;

    height:110px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    text-decoration:none;

    background:rgba(255,255,255,.10);

    border:2px solid rgba(255,255,255,.18);

    backdrop-filter:blur(20px);

    color:#fff;

    font-size:2rem;

}

/*==================================
BOTTOM OVERLAY
==================================*/

.galleryvideo-overlay{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    padding:35px;

    background:linear-gradient(
        180deg,
        transparent,
        rgba(3,7,18,.95)
    );

}

.galleryvideo-left{

    max-width:650px;

}

.galleryvideo-badge{

    display:inline-flex;

    align-items:center;

    padding:9px 18px;

    margin-bottom:18px;

    border-radius:40px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(12px);

    color:#fff;

    font-size:.82rem;

    font-weight:600;

}

.galleryvideo-overlay h3{

    color:#fff;

    font-size:2rem;

    line-height:1.35;

    font-weight:700;

}

.galleryvideo-duration{

    padding:12px 18px;

    border-radius:40px;

    background:rgba(0,188,212,.15);

    border:1px solid rgba(0,188,212,.20);

    backdrop-filter:blur(14px);

    color:#fff;

    font-size:.9rem;

    font-weight:700;

}

/*==================================
VIDEO GRID
==================================*/

.galleryvideo-grid{

    position:relative;

    z-index:5;

    max-width:1320px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:26px;

}

/*==================================
CARD
==================================*/

.galleryvideo-card{

    overflow:hidden;

    border-radius:26px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}

.galleryvideo-thumb{

    position:relative;

    overflow:hidden;

    height:220px;

}

.galleryvideo-thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/*==================================
MINI PLAY
==================================*/

.galleryvideo-mini-play{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.18);

    backdrop-filter:blur(12px);

    color:#fff;

    font-size:1rem;

}

/*==================================
TIME
==================================*/

.galleryvideo-time{

    position:absolute;

    right:15px;

    bottom:15px;

    padding:8px 14px;

    border-radius:30px;

    background:rgba(3,7,18,.80);

    backdrop-filter:blur(10px);

    color:#fff;

    font-size:.75rem;

    font-weight:600;

}

/*==================================
CONTENT
==================================*/

.galleryvideo-content{

    padding:25px;

}

.galleryvideo-category{

    display:inline-flex;

    align-items:center;

    padding:8px 16px;

    margin-bottom:18px;

    border-radius:35px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:#00BCD4;

    font-size:.78rem;

    font-weight:600;

}

.galleryvideo-content h4{

    color:#fff;

    font-size:1.2rem;

    line-height:1.5;

    font-weight:700;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:1200px){

.galleryvideo-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:991px){

.galleryvideo-featured{

height:500px;

}

.galleryvideo-overlay{

flex-direction:column;

align-items:flex-start;

gap:20px;

}

.galleryvideo-overlay h3{

font-size:1.6rem;

}

}

@media(max-width:768px){

.galleryvideo-section{

padding:90px 5%;

}

.galleryvideo-section .section-heading{

margin-bottom:60px;

}

.galleryvideo-section .section-heading h2{

font-size:2.3rem;

}

.galleryvideo-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.galleryvideo-featured{

height:320px;

border-radius:22px;

margin-bottom:35px;

}

.galleryvideo-play{

width:72px;

height:72px;

font-size:1.3rem;

}

.galleryvideo-overlay{

padding:20px;

}

.galleryvideo-overlay h3{

font-size:1.15rem;

}

.galleryvideo-duration{

padding:8px 14px;

font-size:.78rem;

}

.galleryvideo-grid{

grid-template-columns:1fr;

gap:20px;

}

.galleryvideo-card{

border-radius:22px;

}

.galleryvideo-thumb{

height:210px;

}

.galleryvideo-mini-play{

width:50px;

height:50px;

font-size:.9rem;

}

.galleryvideo-content{

padding:20px;

}

.galleryvideo-category{

font-size:.72rem;

padding:7px 14px;

margin-bottom:14px;

}

.galleryvideo-content h4{

font-size:1.05rem;

}

}

/* Part - 2 */

/*==================================================
        FEATURED VIDEO
==================================================*/

.galleryvideo-featured{

    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;

    animation:featuredVideoFloat 8s ease-in-out infinite;

}

@keyframes featuredVideoFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

.galleryvideo-featured:hover{

    transform:translateY(-10px);

    border-color:rgba(0,188,212,.25);

    box-shadow:

        0 30px 75px rgba(0,188,212,.20);

}

/*==================================================
        FEATURED IMAGE
==================================================*/

.galleryvideo-featured img{

    transition:

        transform .8s ease,

        filter .5s ease;

}

.galleryvideo-featured:hover img{

    transform:scale(1.08);

    filter:brightness(.85);

}

/*==================================================
        PLAY BUTTON
==================================================*/

.galleryvideo-play{

    position:relative;

    overflow:hidden;

    transition:

        transform .35s ease,

        background .35s ease,

        box-shadow .35s ease;

}

.galleryvideo-play::before{

    content:"";

    position:absolute;

    inset:-10px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.15);

    animation:featuredPlayPulse 2.5s ease-out infinite;

}

@keyframes featuredPlayPulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.55);

        opacity:0;

    }

}

.galleryvideo-featured:hover .galleryvideo-play{

    transform:translate(-50%,-50%) scale(1.12);

    background:linear-gradient(

        135deg,

        #00BCD4,

        #7ED321

    );

    color:#08111F;

    box-shadow:

        0 0 40px rgba(0,188,212,.35);

}

/*==================================================
        BADGE
==================================================*/

.galleryvideo-badge{

    position:relative;

    overflow:hidden;

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.galleryvideo-badge::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.galleryvideo-featured:hover .galleryvideo-badge{

    transform:translateY(-3px);

    box-shadow:

        0 0 25px rgba(0,188,212,.22);

}

.galleryvideo-featured:hover .galleryvideo-badge::before{

    left:150%;

}

/*==================================================
        TITLE
==================================================*/

.galleryvideo-overlay h3{

    transition:

        color .35s ease,

        transform .35s ease;

}

.galleryvideo-featured:hover h3{

    color:#00BCD4;

    transform:translateY(-4px);

}

/*==================================================
        VIDEO CARDS
==================================================*/

.galleryvideo-card{

    transition:

        transform .45s ease,

        border-color .45s ease,

        box-shadow .45s ease;

    opacity:0;

    animation:

        videoCardReveal .8s ease forwards,

        videoCardFloat 8s ease-in-out infinite;

}

.galleryvideo-card:nth-child(1){

animation-delay:.1s,0s;

}

.galleryvideo-card:nth-child(2){

animation-delay:.25s,.5s;

}

.galleryvideo-card:nth-child(3){

animation-delay:.4s,1s;

}

.galleryvideo-card:nth-child(4){

animation-delay:.55s,1.5s;

}

@keyframes videoCardReveal{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes videoCardFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

.galleryvideo-card:hover{

    transform:translateY(-12px);

    border-color:rgba(0,188,212,.25);

    box-shadow:

        0 25px 65px rgba(0,188,212,.18);

}

/*==================================================
        THUMBNAIL
==================================================*/

.galleryvideo-thumb img{

    transition:

        transform .6s ease,

        filter .45s ease;

}

.galleryvideo-card:hover .galleryvideo-thumb img{

    transform:scale(1.12);

    filter:brightness(.82);

}

/*==================================================
        MINI PLAY
==================================================*/

.galleryvideo-mini-play{

    transition:

        transform .35s ease,

        background .35s ease,

        box-shadow .35s ease;

}

.galleryvideo-mini-play::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.12);

    animation:miniPlayPulse 2.8s ease-out infinite;

}

@keyframes miniPlayPulse{

    from{

        transform:scale(1);

        opacity:.8;

    }

    to{

        transform:scale(1.5);

        opacity:0;

    }

}

.galleryvideo-card:hover .galleryvideo-mini-play{

    transform:translate(-50%,-50%) scale(1.1);

    background:linear-gradient(

        135deg,

        #00BCD4,

        #7ED321

    );

    color:#08111F;

    box-shadow:

        0 0 28px rgba(0,188,212,.30);

}

/*==================================================
        CATEGORY
==================================================*/

.galleryvideo-category{

    position:relative;

    overflow:hidden;

    transition:

        transform .35s ease,

        background .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;

}

.galleryvideo-category::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.galleryvideo-card:hover .galleryvideo-category{

    transform:translateY(-3px);

    background:rgba(0,188,212,.15);

    border-color:rgba(0,188,212,.22);

    box-shadow:

        0 0 20px rgba(0,188,212,.18);

}

.galleryvideo-card:hover .galleryvideo-category::before{

    left:150%;

}

/*==================================================
        TITLE
==================================================*/

.galleryvideo-content h4{

    transition:

        color .35s ease,

        transform .35s ease;

}

.galleryvideo-card:hover h4{

    color:#00BCD4;

    transform:translateY(-3px);

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.galleryvideo-featured{

animation:none;

}

.galleryvideo-featured:hover{

transform:none;

box-shadow:none;

}

.galleryvideo-card{

animation:videoCardReveal .8s ease forwards;

}

.galleryvideo-card:hover{

transform:none;

box-shadow:none;

}

.galleryvideo-card:hover .galleryvideo-thumb img{

transform:scale(1.05);

}

.galleryvideo-card:hover .galleryvideo-category{

transform:none;

box-shadow:none;

}

.galleryvideo-card:hover h4{

transform:none;

}

.galleryvideo-featured:hover .galleryvideo-play{

transform:translate(-50%,-50%) scale(1.05);

box-shadow:none;

}

}

/* Video Section Ends Here */

/* Wall Section Starts Here */

/*==================================================
        PHOTO WALL
==================================================*/

.gallerywall-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.gallerywall-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,188,212,.08),

        transparent 70%

    );

    filter:blur(130px);

}

.gallerywall-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(126,211,33,.08),

        transparent 70%

    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.gallerywall-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.gallerywall-section .section-heading h2{

    margin:22px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.gallerywall-section .section-heading h2 span{

    color:#00BCD4;

}

.gallerywall-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
FLOATING MOSAIC
==================================*/

.gallerywall-grid{

    position:relative;

    z-index:5;

    max-width:1320px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(5,1fr);

    grid-auto-rows:160px;

    gap:24px;

    align-items:center;

}

/*==================================
PHOTO CARD
==================================*/

.gallerywall-item{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    border:1px solid rgba(255,255,255,.08);

    background:#111827;

    box-shadow:

        0 15px 40px rgba(0,0,0,.20);

}

/*==================================
IMAGE SIZE
==================================*/

.gallerywall-item.small{

    grid-row:span 1;

}

.gallerywall-item.medium{

    grid-row:span 2;

}

.gallerywall-item.large{

    grid-row:span 3;

}

/*==================================
ROTATIONS
==================================*/

.rotate-left{

    transform:rotate(-6deg);

}

.rotate-right{

    transform:rotate(6deg);

}

/*==================================
IMAGE
==================================*/

.gallerywall-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/*==================================
OVERLAY
==================================*/

.gallerywall-overlay{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:18px;

    background:linear-gradient(

        180deg,

        transparent,

        rgba(3,7,18,.94)

    );

}

.gallerywall-overlay span{

    display:inline-flex;

    align-items:center;

    padding:8px 16px;

    border-radius:35px;

    background:rgba(255,255,255,.10);

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(14px);

    color:#fff;

    font-size:.8rem;

    font-weight:600;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:1200px){

.gallerywall-grid{

grid-template-columns:repeat(3,1fr);

grid-auto-rows:180px;

gap:20px;

}

.gallerywall-item.large{

grid-row:span 2;

}

}

@media(max-width:768px){

.gallerywall-section{

padding:90px 5%;

}

.gallerywall-section .section-heading{

margin-bottom:60px;

}

.gallerywall-section .section-heading h2{

font-size:2.3rem;

}

.gallerywall-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.gallerywall-grid{

grid-template-columns:repeat(2,1fr);

grid-auto-rows:150px;

gap:16px;

}

.gallerywall-item.small,

.gallerywall-item.medium,

.gallerywall-item.large{

grid-row:span 1;

}

.rotate-left,

.rotate-right{

transform:rotate(0deg);

}

.gallerywall-item{

border-radius:18px;

}

.gallerywall-overlay{

padding:12px;

}

.gallerywall-overlay span{

padding:7px 12px;

font-size:.72rem;

}

}

/* Part - 2 */

/*==================================================
        PHOTO WALL REVEAL
==================================================*/

.gallerywall-item{

    opacity:0;

    animation:

        galleryWallReveal .8s ease forwards,

        galleryWallFloat 8s ease-in-out infinite;

    transition:

        transform .45s ease,

        box-shadow .45s ease,

        border-color .45s ease;

}

.gallerywall-item:nth-child(1){animation-delay:.10s,0s;}
.gallerywall-item:nth-child(2){animation-delay:.20s,.5s;}
.gallerywall-item:nth-child(3){animation-delay:.30s,1s;}
.gallerywall-item:nth-child(4){animation-delay:.40s,1.5s;}
.gallerywall-item:nth-child(5){animation-delay:.50s,2s;}
.gallerywall-item:nth-child(6){animation-delay:.60s,2.5s;}
.gallerywall-item:nth-child(7){animation-delay:.70s,3s;}
.gallerywall-item:nth-child(8){animation-delay:.80s,3.5s;}
.gallerywall-item:nth-child(9){animation-delay:.90s,4s;}
.gallerywall-item:nth-child(10){animation-delay:1s,4.5s;}

@keyframes galleryWallReveal{

    from{

        opacity:0;

        transform:translateY(45px) scale(.9);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

@keyframes galleryWallFloat{

    0%,100%{

        translate:0 0;

    }

    50%{

        translate:0 -8px;

    }

}

/*==================================================
        IMAGE
==================================================*/

.gallerywall-item img{

    transition:

        transform .7s ease,

        filter .45s ease;

}

.gallerywall-item:hover img{

    transform:scale(1.15);

    filter:brightness(.82);

}

/*==================================================
        STRAIGHTEN EFFECT
==================================================*/

.gallerywall-item:hover{

    transform:rotate(0deg) translateY(-12px);

    border-color:rgba(0,188,212,.25);

    box-shadow:

        0 28px 70px rgba(0,188,212,.20);

    z-index:30;

}

/*==================================================
        GLASS CAPTION
==================================================*/

.gallerywall-overlay{

    opacity:0;

    transform:translateY(30px);

    transition:

        opacity .35s ease,

        transform .35s ease,

        background .35s ease;

}

.gallerywall-item:hover .gallerywall-overlay{

    opacity:1;

    transform:translateY(0);

    background:linear-gradient(

        180deg,

        transparent,

        rgba(3,7,18,.96)

    );

}

/*==================================================
        CATEGORY BADGE
==================================================*/

.gallerywall-overlay span{

    position:relative;

    overflow:hidden;

    transition:

        transform .35s ease,

        background .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;

}

.gallerywall-overlay span::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.gallerywall-item:hover .gallerywall-overlay span{

    transform:translateY(-3px);

    background:rgba(0,188,212,.16);

    border-color:rgba(0,188,212,.25);

    box-shadow:

        0 0 22px rgba(0,188,212,.20);

}

.gallerywall-item:hover .gallerywall-overlay span::before{

    left:150%;

}

/*==================================================
        SHINE EFFECT
==================================================*/

.gallerywall-item::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-35%;

    width:55%;

    height:220%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.18),

        transparent

    );

    transform:rotate(25deg);

    transition:.8s;

    z-index:2;

    pointer-events:none;

}

.gallerywall-item:hover::before{

    left:140%;

}

/*==================================================
        GLOW BORDER
==================================================*/

.gallerywall-item::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:22px;

    border:1px solid transparent;

    transition:border-color .35s ease;

    pointer-events:none;

}

.gallerywall-item:hover::after{

    border-color:rgba(0,188,212,.20);

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.gallerywall-item{

animation:galleryWallReveal .7s ease forwards;

}

.gallerywall-item:hover{

transform:none;

box-shadow:none;

}

.gallerywall-item:hover img{

transform:scale(1.05);

}

.gallerywall-item:hover .gallerywall-overlay{

opacity:1;

transform:none;

}

.gallerywall-item:hover .gallerywall-overlay span{

transform:none;

box-shadow:none;

}

}

/* Wall Section Ends Here */

/* Social Section Starts Here */

/*==================================================
        SOCIAL MEMORIES
==================================================*/

.gallerysocial-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.gallerysocial-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,188,212,.08),

        transparent 70%

    );

    filter:blur(130px);

}

.gallerysocial-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(126,211,33,.08),

        transparent 70%

    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.gallerysocial-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.gallerysocial-section .section-heading h2{

    margin:22px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.gallerysocial-section .section-heading h2 span{

    color:#00BCD4;

}

.gallerysocial-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
INSTAGRAM GRID
==================================*/

.gallerysocial-grid{

    position:relative;

    z-index:5;

    max-width:1320px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

}

/*==================================
POST
==================================*/

.gallerysocial-post{

    overflow:hidden;

    border-radius:28px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}

.gallerysocial-post::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        135deg,

        rgba(255,255,255,.04),

        transparent 45%,

        rgba(0,188,212,.05)

    );

    pointer-events:none;

    z-index:1;

}

/*==================================
IMAGE
==================================*/

.gallerysocial-image{

    position:relative;

    overflow:hidden;

    aspect-ratio:1/1;

}

.gallerysocial-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/*==================================
DATE BADGE
==================================*/

.gallerysocial-date{

    position:absolute;

    top:18px;

    right:18px;

    padding:8px 16px;

    border-radius:35px;

    background:rgba(255,255,255,.10);

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(12px);

    color:#fff;

    font-size:.75rem;

    font-weight:600;

}

/*==================================
CONTENT
==================================*/

.gallerysocial-content{

    position:relative;

    z-index:2;

    padding:22px;

}

/*==================================
SOCIAL STATS
==================================*/

.gallerysocial-stats{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}

.gallerysocial-stats span{

    display:flex;

    align-items:center;

    gap:8px;

    color:#CBD5E1;

    font-size:.9rem;

    font-weight:600;

}

/*==================================
TITLE
==================================*/

.gallerysocial-content p{

    color:#fff;

    font-size:1.1rem;

    font-weight:600;

    line-height:1.6;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:1200px){

.gallerysocial-grid{

grid-template-columns:repeat(2,1fr);

gap:22px;

}

}

@media(max-width:768px){

.gallerysocial-section{

padding:90px 5%;

}

.gallerysocial-section .section-heading{

margin-bottom:60px;

}

.gallerysocial-section .section-heading h2{

font-size:2.3rem;

}

.gallerysocial-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.gallerysocial-grid{

grid-template-columns:1fr;

gap:20px;

}

.gallerysocial-post{

border-radius:22px;

}

.gallerysocial-content{

padding:18px;

}

.gallerysocial-date{

top:14px;

right:14px;

padding:7px 14px;

font-size:.72rem;

}

.gallerysocial-stats{

margin-bottom:14px;

}

.gallerysocial-stats span{

font-size:.82rem;

}

.gallerysocial-content p{

font-size:1rem;

}

}

/* Part - 2 */

/*==================================================
        SOCIAL POSTS
==================================================*/

.gallerysocial-post{

    position:relative;

    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;

    opacity:0;

    animation:
        socialReveal .8s ease forwards,
        socialFloat 8s ease-in-out infinite;

}

.gallerysocial-post:nth-child(1){animation-delay:.1s,0s;}
.gallerysocial-post:nth-child(2){animation-delay:.25s,.5s;}
.gallerysocial-post:nth-child(3){animation-delay:.4s,1s;}
.gallerysocial-post:nth-child(4){animation-delay:.55s,1.5s;}
.gallerysocial-post:nth-child(5){animation-delay:.7s,2s;}
.gallerysocial-post:nth-child(6){animation-delay:.85s,2.5s;}

@keyframes socialReveal{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes socialFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

.gallerysocial-post:hover{

    transform:translateY(-12px);

    border-color:rgba(0,188,212,.25);

    box-shadow:

        0 28px 70px rgba(0,188,212,.18);

}

/*==================================================
        IMAGE
==================================================*/

.gallerysocial-image img{

    transition:

        transform .7s ease,

        filter .45s ease;

}

.gallerysocial-post:hover .gallerysocial-image img{

    transform:scale(1.12);

    filter:brightness(.82);

}

/*==================================================
        SHINE EFFECT
==================================================*/

.gallerysocial-post::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-35%;

    width:55%;

    height:220%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.18),

        transparent

    );

    transform:rotate(25deg);

    transition:.8s;

    pointer-events:none;

}

.gallerysocial-post:hover::after{

    left:140%;

}

/*==================================================
        DATE BADGE
==================================================*/

.gallerysocial-date{

    position:relative;

    overflow:hidden;

    transition:

        transform .35s ease,

        background .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;

}

.gallerysocial-date::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.gallerysocial-post:hover .gallerysocial-date{

    transform:translateY(-3px);

    background:rgba(0,188,212,.16);

    border-color:rgba(0,188,212,.24);

    box-shadow:

        0 0 22px rgba(0,188,212,.20);

}

.gallerysocial-post:hover .gallerysocial-date::before{

    left:150%;

}

/*==================================================
        STATS
==================================================*/

.gallerysocial-stats span{

    transition:

        color .35s ease,

        transform .35s ease;

}

.gallerysocial-stats span:first-child:hover{

    color:#ff5b8f;

    transform:scale(1.08);

}

.gallerysocial-stats span:last-child:hover{

    color:#00BCD4;

    transform:scale(1.08);

}

/*==================================================
        TITLE
==================================================*/

.gallerysocial-content p{

    transition:

        color .35s ease,

        transform .35s ease;

}

.gallerysocial-post:hover .gallerysocial-content p{

    color:#00BCD4;

    transform:translateY(-3px);

}

/*==================================================
        GLOW BORDER
==================================================*/

.gallerysocial-post::before{

    transition:

        border-color .35s ease;

}

.gallerysocial-post:hover::before{

    border:1px solid rgba(0,188,212,.15);

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.gallerysocial-post{

animation:socialReveal .7s ease forwards;

}

.gallerysocial-post:hover{

transform:none;

box-shadow:none;

}

.gallerysocial-post:hover .gallerysocial-image img{

transform:scale(1.05);

}

.gallerysocial-post:hover .gallerysocial-date{

transform:none;

box-shadow:none;

}

.gallerysocial-post:hover .gallerysocial-content p{

transform:none;

}

.gallerysocial-stats span:hover{

transform:none;

}

}

/* Social Section Ends Here */

/* Media Section Starts Here */

/*==================================================
        MEDIA COVERAGE
==================================================*/

.gallerymedia-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

.gallerymedia-section::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,188,212,.08),

        transparent 70%

    );

    filter:blur(130px);

}

.gallerymedia-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:460px;

    height:460px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(126,211,33,.08),

        transparent 70%

    );

    filter:blur(120px);

}

/*==================================
SECTION HEADING
==================================*/

.gallerymedia-section .section-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 80px;

}

.gallerymedia-section .section-heading h2{

    margin:22px 0;

    color:#fff;

    font-size:3.2rem;

    line-height:1.2;

}

.gallerymedia-section .section-heading h2 span{

    color:#00BCD4;

}

.gallerymedia-section .section-heading p{

    max-width:760px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

}

/*==================================
WRAPPER
==================================*/

.gallerymedia-wrapper{

    position:relative;

    z-index:5;

    max-width:1320px;

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:28px;

}

/*==================================
CARD
==================================*/

.gallerymedia-card{

    position:relative;

    display:grid;

    grid-template-columns:120px 280px 1fr;

    gap:30px;

    align-items:center;

    overflow:hidden;

    padding:24px;

    border-radius:30px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

}

.gallerymedia-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        135deg,

        rgba(255,255,255,.05),

        transparent 45%,

        rgba(0,188,212,.05)

    );

    pointer-events:none;

}

/*==================================
MEDIA LOGO
==================================*/

.gallerymedia-logo{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:center;

    width:90px;

    height:90px;

    margin:auto;

    border-radius:22px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(14px);

}

.gallerymedia-logo img{

    max-width:65px;

    max-height:65px;

    object-fit:contain;

}

/*==================================
THUMBNAIL
==================================*/

.gallerymedia-thumb{

    position:relative;

    overflow:hidden;

    height:180px;

    border-radius:22px;

}

.gallerymedia-thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/*==================================
CONTENT
==================================*/

.gallerymedia-content{

    position:relative;

    z-index:2;

}

/*==================================
CATEGORY
==================================*/

.gallerymedia-category{

    display:inline-flex;

    align-items:center;

    padding:9px 18px;

    margin-bottom:18px;

    border-radius:40px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(12px);

    color:#00BCD4;

    font-size:.82rem;

    font-weight:600;

}

/*==================================
TITLE
==================================*/

.gallerymedia-content h3{

    margin-bottom:22px;

    color:#fff;

    font-size:1.45rem;

    line-height:1.55;

    font-weight:700;

}

/*==================================
LINK
==================================*/

.gallerymedia-content a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#00BCD4;

    text-decoration:none;

    font-size:.95rem;

    font-weight:600;

}

.gallerymedia-content a i{

    font-size:.82rem;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.gallerymedia-card{

grid-template-columns:1fr;

gap:22px;

text-align:center;

padding:22px;

}

.gallerymedia-logo{

margin:auto;

}

.gallerymedia-thumb{

height:240px;

}

.gallerymedia-category{

justify-content:center;

}

.gallerymedia-content a{

justify-content:center;

}

}

@media(max-width:768px){

.gallerymedia-section{

padding:90px 5%;

}

.gallerymedia-section .section-heading{

margin-bottom:60px;

}

.gallerymedia-section .section-heading h2{

font-size:2.3rem;

}

.gallerymedia-section .section-heading p{

font-size:.95rem;

line-height:1.8;

}

.gallerymedia-wrapper{

gap:20px;

}

.gallerymedia-card{

padding:18px;

border-radius:22px;

}

.gallerymedia-logo{

width:72px;

height:72px;

border-radius:18px;

}

.gallerymedia-logo img{

max-width:50px;

max-height:50px;

}

.gallerymedia-thumb{

height:200px;

border-radius:18px;

}

.gallerymedia-category{

font-size:.74rem;

padding:8px 14px;

margin-bottom:14px;

}

.gallerymedia-content h3{

font-size:1.15rem;

margin-bottom:18px;

}

.gallerymedia-content a{

font-size:.9rem;

}

}

/* Part - 2 */

/*==================================================
        MEDIA CARD
==================================================*/

.gallerymedia-card{

    opacity:0;

    animation:

        mediaReveal .8s ease forwards,

        mediaFloat 8s ease-in-out infinite;

    transition:

        transform .45s ease,

        border-color .45s ease,

        box-shadow .45s ease;

}

.gallerymedia-card:nth-child(1){

animation-delay:.1s,0s;

}

.gallerymedia-card:nth-child(2){

animation-delay:.3s,.6s;

}

.gallerymedia-card:nth-child(3){

animation-delay:.5s,1.2s;

}

.gallerymedia-card:nth-child(4){

animation-delay:.7s,1.8s;

}

@keyframes mediaReveal{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes mediaFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

}

.gallerymedia-card:hover{

    transform:translateY(-10px);

    border-color:rgba(0,188,212,.24);

    box-shadow:

        0 28px 70px rgba(0,188,212,.18);

}

/*==================================================
        SHINE EFFECT
==================================================*/

.gallerymedia-card::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-35%;

    width:55%;

    height:220%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.18),

        transparent

    );

    transform:rotate(25deg);

    transition:.8s;

    pointer-events:none;

}

.gallerymedia-card:hover::after{

    left:140%;

}

/*==================================================
        LOGO
==================================================*/

.gallerymedia-logo{

    transition:

        transform .35s ease,

        border-color .35s ease,

        box-shadow .35s ease,

        background .35s ease;

}

.gallerymedia-logo img{

    transition:

        transform .35s ease,

        filter .35s ease;

}

.gallerymedia-card:hover .gallerymedia-logo{

    transform:rotate(6deg) scale(1.06);

    background:rgba(0,188,212,.12);

    border-color:rgba(0,188,212,.22);

    box-shadow:

        0 0 28px rgba(0,188,212,.22);

}

.gallerymedia-card:hover .gallerymedia-logo img{

    transform:scale(1.08);

    filter:brightness(1.08);

}

/*==================================================
        THUMBNAIL
==================================================*/

.gallerymedia-thumb img{

    transition:

        transform .65s ease,

        filter .45s ease;

}

.gallerymedia-card:hover .gallerymedia-thumb img{

    transform:scale(1.12);

    filter:brightness(.84);

}

/*==================================================
        CATEGORY
==================================================*/

.gallerymedia-category{

    position:relative;

    overflow:hidden;

    transition:

        transform .35s ease,

        background .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;

}

.gallerymedia-category::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.gallerymedia-card:hover .gallerymedia-category{

    transform:translateY(-3px);

    background:rgba(0,188,212,.15);

    border-color:rgba(0,188,212,.22);

    box-shadow:

        0 0 20px rgba(0,188,212,.18);

}

.gallerymedia-card:hover .gallerymedia-category::before{

    left:150%;

}

/*==================================================
        TITLE
==================================================*/

.gallerymedia-content h3{

    transition:

        color .35s ease,

        transform .35s ease;

}

.gallerymedia-card:hover .gallerymedia-content h3{

    color:#00BCD4;

    transform:translateY(-4px);

}

/*==================================================
        READ MORE
==================================================*/

.gallerymedia-content a{

    position:relative;

    transition:

        letter-spacing .35s ease,

        color .35s ease;

}

.gallerymedia-content a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    border-radius:30px;

    background:#00BCD4;

    transition:width .35s ease;

}

.gallerymedia-content a i{

    transition:transform .35s ease;

}

.gallerymedia-card:hover .gallerymedia-content a{

    letter-spacing:.5px;

}

.gallerymedia-card:hover .gallerymedia-content a::after{

    width:100%;

}

.gallerymedia-card:hover .gallerymedia-content a i{

    transform:translateX(8px);

}

/*==================================================
        GLOW BORDER
==================================================*/

.gallerymedia-card:hover{

    outline:1px solid rgba(0,188,212,.12);

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.gallerymedia-card{

animation:mediaReveal .8s ease forwards;

}

.gallerymedia-card:hover{

transform:none;

box-shadow:none;

}

.gallerymedia-card:hover .gallerymedia-thumb img{

transform:scale(1.05);

}

.gallerymedia-card:hover .gallerymedia-logo{

transform:scale(1.03);

box-shadow:none;

}

.gallerymedia-card:hover .gallerymedia-category{

transform:none;

box-shadow:none;

}

.gallerymedia-card:hover .gallerymedia-content h3{

transform:none;

}

.gallerymedia-card:hover .gallerymedia-content a i{

transform:translateX(4px);

}

}

/* Media Section Ends Here */

/* CTA Section Starts Here */

/*==================================================
        FINAL CTA
==================================================*/

.gallerycta-section{

    position:relative;

    overflow:hidden;

    padding:140px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

/*==================================
BACKGROUND GLOWS
==================================*/

.gallerycta-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(150px);

    pointer-events:none;

}

.gallerycta-glow-left{

    width:650px;

    height:650px;

    top:-250px;

    left:-220px;

    background:rgba(0,188,212,.12);

}

.gallerycta-glow-right{

    width:560px;

    height:560px;

    bottom:-220px;

    right:-180px;

    background:rgba(126,211,33,.10);

}

/*==================================
FLOATING CAMERAS
==================================*/

.gallerycta-cameras{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.gallerycta-cameras i{

    position:absolute;

    color:rgba(255,255,255,.08);

    font-size:2rem;

}

.camera1{

top:12%;

left:8%;

}

.camera2{

top:20%;

right:12%;

}

.camera3{

top:62%;

left:10%;

}

.camera4{

bottom:18%;

right:15%;

}

.camera5{

bottom:10%;

left:48%;

}

/*==================================
PHOTO FRAMES
==================================*/

.gallerycta-frames{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.gallerycta-frames .frame{

    position:absolute;

    width:75px;

    height:75px;

    border-radius:16px;

    border:2px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.03);

    backdrop-filter:blur(12px);

}

.frame1{

top:16%;

left:24%;

}

.frame2{

top:26%;

right:22%;

}

.frame3{

bottom:18%;

left:20%;

}

.frame4{

bottom:16%;

right:26%;

}

/*==================================
ABSTRACT SHAPES
==================================*/

.gallerycta-shapes{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.gallerycta-shapes span{

    position:absolute;

    opacity:.08;

}

.circle{

    width:18px;

    height:18px;

    border-radius:50%;

    background:#00BCD4;

    top:38%;

    left:12%;

}

.square{

    width:18px;

    height:18px;

    background:#7ED321;

    top:22%;

    right:36%;

}

.triangle{

    width:0;

    height:0;

    border-left:12px solid transparent;

    border-right:12px solid transparent;

    border-bottom:22px solid #00BCD4;

    bottom:22%;

    left:62%;

}

/*==================================
GLASS PANEL
==================================*/

.gallerycta-panel{

    position:relative;

    z-index:5;

    max-width:1100px;

    margin:auto;

    padding:80px 70px;

    text-align:center;

    border-radius:36px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(24px);

}

.gallerycta-panel::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:36px;

    background:linear-gradient(

        135deg,

        rgba(255,255,255,.05),

        transparent 45%,

        rgba(0,188,212,.05)

    );

    pointer-events:none;

}

/*==================================
BADGE
==================================*/

.gallerycta-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    margin-bottom:28px;

    border-radius:50px;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-size:.92rem;

    font-weight:600;

}

/*==================================
HEADING
==================================*/

.gallerycta-panel h2{

    margin-bottom:24px;

    color:#fff;

    font-size:3.4rem;

    line-height:1.2;

    font-weight:800;

}

.gallerycta-panel h2 span{

    display:block;

    color:#00BCD4;

}

/*==================================
CONTENT
==================================*/

.gallerycta-panel p{

    max-width:760px;

    margin:0 auto 45px;

    color:#CBD5E1;

    font-size:1rem;

    line-height:2;

}

/*==================================
BUTTONS
==================================*/

.gallerycta-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:45px;

}

.gallerycta-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:17px 34px;

    border-radius:60px;

    text-decoration:none;

    font-size:.96rem;

    font-weight:600;

}

.gallerycta-primary{

    color:#08111F;

    background:linear-gradient(

        135deg,

        #00BCD4,

        #7ED321

    );

}

.gallerycta-secondary{

    color:#fff;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(12px);

}

/*==================================
FOOTER
==================================*/

.gallerycta-footer{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:40px;

}

.gallerycta-info{

    display:flex;

    align-items:center;

    gap:10px;

    color:#CBD5E1;

    font-size:.95rem;

}

.gallerycta-info i{

    color:#00BCD4;

    font-size:1rem;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.gallerycta-panel{

padding:60px 40px;

}

.gallerycta-panel h2{

font-size:2.8rem;

}

}

@media(max-width:768px){

.gallerycta-section{

padding:90px 5%;

}

.gallerycta-panel{

padding:45px 24px;

border-radius:24px;

}

.gallerycta-panel h2{

font-size:2rem;

}

.gallerycta-panel p{

font-size:.94rem;

line-height:1.8;

margin-bottom:30px;

}

.gallerycta-buttons{

flex-direction:column;

gap:14px;

margin-bottom:30px;

}

.gallerycta-btn{

width:100%;

}

.gallerycta-footer{

flex-direction:column;

gap:18px;

align-items:center;

}

.gallerycta-badge{

font-size:.78rem;

padding:10px 18px;

}

.gallerycta-cameras i,

.gallerycta-frames .frame{

display:none;

}

}

/* Part - 2 */

/*==================================================
        SECTION REVEAL
==================================================*/

.gallerycta-panel{

    opacity:0;

    animation:galleryCTAReveal 1s ease forwards;

}

@keyframes galleryCTAReveal{

    from{

        opacity:0;

        transform:translateY(60px) scale(.96);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

/*==================================================
        FLOATING CAMERA ICONS
==================================================*/

.gallerycta-cameras i{

    animation:cameraFloat 8s ease-in-out infinite;

}

.camera1{animation-delay:0s;}
.camera2{animation-delay:1s;}
.camera3{animation-delay:2s;}
.camera4{animation-delay:3s;}
.camera5{animation-delay:4s;}

@keyframes cameraFloat{

    0%,100%{

        transform:translateY(0) rotate(0deg);

    }

    25%{

        transform:translateY(-12px) rotate(-8deg);

    }

    50%{

        transform:translateY(-22px) rotate(6deg);

    }

    75%{

        transform:translateY(-10px) rotate(-4deg);

    }

}

/*==================================================
        FLOATING PHOTO FRAMES
==================================================*/

.gallerycta-frames .frame{

    animation:photoFrameFloat 9s ease-in-out infinite;

}

.frame1{animation-delay:0s;}
.frame2{animation-delay:1.5s;}
.frame3{animation-delay:3s;}
.frame4{animation-delay:4.5s;}

@keyframes photoFrameFloat{

    0%,100%{

        transform:rotate(-8deg) translateY(0);

    }

    50%{

        transform:rotate(8deg) translateY(-18px);

    }

}

/*==================================================
        ABSTRACT SHAPES
==================================================*/

.gallerycta-shapes span{

    animation:shapeMove 10s linear infinite;

}

@keyframes shapeMove{

    0%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(-20px) rotate(180deg);

    }

    100%{

        transform:translateY(0) rotate(360deg);

    }

}

/*==================================================
        GLASS PANEL
==================================================*/

.gallerycta-panel{

    transition:

        transform .45s ease,

        border-color .45s ease,

        box-shadow .45s ease;

}

.gallerycta-panel:hover{

    transform:translateY(-10px);

    border-color:rgba(0,188,212,.22);

    box-shadow:

        0 35px 90px rgba(0,188,212,.18);

}

/* Animated Border */

.gallerycta-panel::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:36px;

    padding:1px;

    background:linear-gradient(

        135deg,

        transparent,

        rgba(0,188,212,.35),

        rgba(126,211,33,.30),

        transparent

    );

    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    opacity:0;

    transition:.45s;

}

.gallerycta-panel:hover::after{

    opacity:1;

}

/*==================================================
        BADGE
==================================================*/

.gallerycta-badge{

    position:relative;

    overflow:hidden;

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        background .35s ease;

}

.gallerycta-badge::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:40%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.gallerycta-panel:hover .gallerycta-badge{

    transform:translateY(-4px);

    box-shadow:

        0 0 25px rgba(0,188,212,.20);

}

.gallerycta-panel:hover .gallerycta-badge::before{

    left:150%;

}

/*==================================================
        HEADING
==================================================*/

.gallerycta-panel h2{

    transition:

        transform .35s ease,

        letter-spacing .35s ease;

}

.gallerycta-panel:hover h2{

    transform:translateY(-3px);

    letter-spacing:.4px;

}

/*==================================================
        BUTTONS
==================================================*/

.gallerycta-btn{

    position:relative;

    overflow:hidden;

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;

}

.gallerycta-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:40%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.75s;

}

.gallerycta-btn:hover{

    transform:translateY(-6px);

    box-shadow:

        0 18px 45px rgba(0,188,212,.22);

}

.gallerycta-btn:hover::before{

    left:150%;

}

.gallerycta-secondary:hover{

    border-color:rgba(0,188,212,.28);

    background:rgba(0,188,212,.12);

}

/*==================================================
        FOOTER ITEMS
==================================================*/

.gallerycta-info{

    transition:

        transform .35s ease,

        color .35s ease;

}

.gallerycta-info i{

    transition:

        transform .35s ease,

        color .35s ease;

}

.gallerycta-info:hover{

    color:#ffffff;

    transform:translateY(-3px);

}

.gallerycta-info:hover i{

    color:#7ED321;

    transform:scale(1.2);

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.gallerycta-panel:hover{

transform:none;

box-shadow:none;

}

.gallerycta-btn:hover{

transform:none;

box-shadow:none;

}

.gallerycta-info:hover{

transform:none;

}

.gallerycta-info:hover i{

transform:none;

}

.gallerycta-cameras i,

.gallerycta-frames .frame,

.gallerycta-shapes span{

animation-duration:14s;

}

}



/* CTA Section Ends Here */


/* Gallery Page Ends Here */

/* Our Authenticity Page Starts Here */

/* Hero Section Starts Here */

/*==================================================
            AUTHENTICITY HERO SECTION
==================================================*/

.authhero-section{

    position:relative;

    overflow:hidden;

    padding:170px 5% 130px;

    background:
    linear-gradient(
        180deg,
        #040816 0%,
        #07111f 55%,
        #050814 100%
    );

}

/*==================================================
            BACKGROUND GLOWS
==================================================*/

.authhero-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    pointer-events:none;

}

.authhero-glow-one{

    width:650px;

    height:650px;

    top:-250px;

    left:-220px;

    background:rgba(0,188,212,.16);

}

.authhero-glow-two{

    width:600px;

    height:600px;

    right:-180px;

    bottom:-220px;

    background:rgba(126,211,33,.12);

}

/*==================================================
            GRID BACKGROUND
==================================================*/

.authhero-grid{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);

    background-size:70px 70px;

    mask-image:linear-gradient(to bottom, rgba(0,0,0,.85), transparent);

    opacity:.35;

    pointer-events:none;

}

/*==================================================
            FLOATING ICONS
==================================================*/

.authhero-floating-icons{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.authhero-floating-icons .icon{

    position:absolute;

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    color:#00BCD4;

    font-size:1.6rem;

}

.icon-1{

top:15%;

left:7%;

}

.icon-2{

top:18%;

right:10%;

}

.icon-3{

bottom:18%;

left:12%;

}

.icon-4{

bottom:20%;

right:14%;

}

.icon-5{

top:48%;

right:5%;

}

/*==================================================
            CONTENT
==================================================*/

.authhero-content{

    position:relative;

    z-index:10;

    max-width:1080px;

    margin:auto;

    text-align:center;

}

/*==================================================
            BREADCRUMB
==================================================*/

.authhero-breadcrumb{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-bottom:25px;

    font-size:.95rem;

}

.authhero-breadcrumb a{

    color:#9EDFF5;

    text-decoration:none;

}

.authhero-breadcrumb span{

    color:#bfcad8;

}

/*==================================================
            BADGE
==================================================*/

.authhero-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:13px 24px;

    margin-bottom:30px;

    border-radius:50px;

    background:rgba(0,188,212,.08);

    border:1px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-weight:600;

    backdrop-filter:blur(16px);

}

/*==================================================
            HEADING
==================================================*/

.authhero-content h1{

    color:#fff;

    font-size:4.3rem;

    font-weight:800;

    line-height:1.15;

    margin-bottom:28px;

}

.authhero-content h1 span{

    display:block;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

/*==================================================
            DESCRIPTION
==================================================*/

.authhero-content p{

    max-width:900px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

    font-size:1.05rem;

    margin-bottom:55px;

}

/*==================================================
            HIGHLIGHTS
==================================================*/

.authhero-highlights{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:22px;

    margin-bottom:55px;

}

.authhero-card{

    padding:30px 22px;

    border-radius:24px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    text-align:center;

}

.authhero-card .icon{

    width:72px;

    height:72px;

    margin:auto auto 22px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(0,188,212,.10);

    color:#00BCD4;

    font-size:1.7rem;

}

.authhero-card h4{

    color:#fff;

    margin-bottom:12px;

    font-size:1.2rem;

}

.authhero-card p{

    margin:0;

    color:#c7d3df;

    line-height:1.7;

    font-size:.95rem;

}

/*==================================================
            BUTTONS
==================================================*/

.authhero-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

.authhero-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:17px 34px;

    border-radius:60px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.authhero-btn.primary{

    color:#08111F;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

}

.authhero-btn.secondary{

    color:#fff;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(16px);

}

/*==================================================
            TRUST BAR
==================================================*/

.authhero-verification{

    position:relative;

    z-index:5;

    margin-top:90px;

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

    padding:0 5%;

}

.verify-item{

    display:flex;

    align-items:center;

    gap:10px;

    padding:16px 28px;

    border-radius:50px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    color:#E2E8F0;

    font-size:.95rem;

}

.verify-item i{

    color:#00BCD4;

}

/*==================================================
            RESPONSIVE
==================================================*/

@media(max-width:1200px){

.authhero-highlights{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:991px){

.authhero-section{

padding:140px 5% 100px;

}

.authhero-content h1{

font-size:3.3rem;

}

}

@media(max-width:768px){

.authhero-section{

padding:120px 5% 80px;

}

.authhero-content h1{

font-size:2.4rem;

}

.authhero-content p{

font-size:.96rem;

line-height:1.8;

}

.authhero-highlights{

grid-template-columns:1fr;

gap:18px;

}

.authhero-buttons{

flex-direction:column;

}

.authhero-btn{

width:100%;

justify-content:center;

}

.authhero-verification{

margin-top:60px;

flex-direction:column;

align-items:center;

}

.verify-item{

width:100%;

justify-content:center;

}

.authhero-floating-icons .icon{

display:none;

}

}

/* Part - 2 */

/*==================================================
            HERO REVEAL
==================================================*/

.authhero-content{

    opacity:0;

    animation:authHeroReveal 1.1s ease forwards;

}

@keyframes authHeroReveal{

    from{

        opacity:0;

        transform:translateY(70px) scale(.96);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

/*==================================================
            FLOATING TRUST ICONS
==================================================*/

.authhero-floating-icons .icon{

    animation:trustFloat 9s ease-in-out infinite;

}

.icon-1{animation-delay:0s;}
.icon-2{animation-delay:1.4s;}
.icon-3{animation-delay:2.8s;}
.icon-4{animation-delay:4.2s;}
.icon-5{animation-delay:5.6s;}

@keyframes trustFloat{

    0%,100%{

        transform:translateY(0) rotate(0deg);

    }

    25%{

        transform:translateY(-10px) rotate(-6deg);

    }

    50%{

        transform:translateY(-22px) rotate(6deg);

    }

    75%{

        transform:translateY(-12px) rotate(-4deg);

    }

}

/*==================================================
            GRID MOVEMENT
==================================================*/

.authhero-grid{

    animation:gridMove 18s linear infinite;

}

@keyframes gridMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(70px);

    }

}

/*==================================================
            BADGE
==================================================*/

.authhero-badge{

    position:relative;

    overflow:hidden;

}

.authhero-badge::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:40%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.9s;

}

.authhero-badge:hover::before{

    left:160%;

}

.authhero-badge:hover{

    box-shadow:0 0 30px rgba(0,188,212,.25);

}

/*==================================================
            HEADING
==================================================*/

.authhero-content h1{

    transition:

        transform .35s ease,

        letter-spacing .35s ease;

}

.authhero-content:hover h1{

    transform:translateY(-4px);

    letter-spacing:.5px;

}

/*==================================================
            HIGHLIGHT CARDS
==================================================*/

.authhero-card{

    position:relative;

    overflow:hidden;

    transition:

        transform .4s ease,

        border-color .4s ease,

        box-shadow .4s ease;

}

.authhero-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.authhero-card:hover{

    transform:translateY(-10px);

    border-color:rgba(0,188,212,.25);

    box-shadow:

        0 20px 45px rgba(0,188,212,.15);

}

.authhero-card:hover::before{

    left:150%;

}

.authhero-card .icon{

    transition:

        transform .4s ease,

        box-shadow .4s ease,

        background .4s ease;

}

.authhero-card:hover .icon{

    transform:rotate(8deg) scale(1.08);

    background:rgba(0,188,212,.18);

    box-shadow:0 0 25px rgba(0,188,212,.22);

}

/*==================================================
            BUTTONS
==================================================*/

.authhero-btn{

    position:relative;

    overflow:hidden;

}

.authhero-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:40%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.authhero-btn:hover::before{

    left:150%;

}

.authhero-btn:hover{

    transform:translateY(-6px);

}

.authhero-btn.primary:hover{

    box-shadow:

        0 18px 45px rgba(0,188,212,.28);

}

.authhero-btn.secondary:hover{

    background:rgba(0,188,212,.10);

    border-color:rgba(0,188,212,.25);

    box-shadow:

        0 18px 40px rgba(0,188,212,.16);

}

/*==================================================
            VERIFICATION BAR
==================================================*/

.verify-item{

    transition:

        transform .35s ease,

        border-color .35s ease,

        box-shadow .35s ease,

        color .35s ease;

}

.verify-item i{

    transition:

        transform .35s ease,

        color .35s ease;

}

.verify-item:hover{

    transform:translateY(-5px);

    border-color:rgba(0,188,212,.22);

    color:#fff;

    box-shadow:

        0 15px 35px rgba(0,188,212,.14);

}

.verify-item:hover i{

    color:#7ED321;

    transform:scale(1.18);

}

/*==================================================
            GLOW PULSE
==================================================*/

.authhero-glow{

    animation:glowPulse 8s ease-in-out infinite;

}

.authhero-glow-two{

    animation-delay:3s;

}

@keyframes glowPulse{

    0%,100%{

        opacity:.8;

        transform:scale(1);

    }

    50%{

        opacity:1;

        transform:scale(1.08);

    }

}

/*==================================================
            RESPONSIVE
==================================================*/

@media(max-width:768px){

.authhero-card:hover{

transform:none;

box-shadow:none;

}

.authhero-btn:hover{

transform:none;

}

.verify-item:hover{

transform:none;

box-shadow:none;

}

.verify-item:hover i{

transform:none;

}

.authhero-floating-icons .icon{

animation-duration:14s;

}

}

/* Hero Section Ends Here */

/* Introduction Section Starts Here */

/*==================================================
        OUR AUTHENTICITY INTRODUCTION
==================================================*/

.authintro-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%
    );

}

/*==================================
BACKGROUND GLOWS
==================================*/

.authintro-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(150px);

    pointer-events:none;

}

.authintro-glow-one{

    width:620px;

    height:620px;

    top:-220px;

    left:-220px;

    background:rgba(0,188,212,.11);

}

.authintro-glow-two{

    width:560px;

    height:560px;

    right:-180px;

    bottom:-180px;

    background:rgba(126,211,33,.10);

}

/*==================================
BACKGROUND PATTERN
==================================*/

.authintro-pattern{

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

        linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:80px 80px;

    opacity:.35;

    pointer-events:none;

}

/*==================================
SECTION HEADING
==================================*/

.authintro-heading{

    position:relative;

    z-index:5;

    max-width:900px;

    margin:0 auto 90px;

    text-align:center;

}

.authintro-subtitle{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:50px;

    margin-bottom:24px;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    color:#00BCD4;

    font-size:.92rem;

    font-weight:600;

    backdrop-filter:blur(16px);

}

.authintro-heading h2{

    color:#ffffff;

    font-size:3.3rem;

    line-height:1.2;

    font-weight:800;

    margin-bottom:28px;

}

.authintro-heading h2 span{

    display:block;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.authintro-heading p{

    color:#CBD5E1;

    font-size:1rem;

    line-height:2;

}

/*==================================
MAIN WRAPPER
==================================*/

.authintro-wrapper{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:60px;

    align-items:center;

}

/*==================================
LEFT CONTENT
==================================*/

.authintro-content{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.authintro-block{

    display:flex;

    gap:24px;

    padding:32px;

    border-radius:28px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}

.authintro-block .icon{

    width:78px;

    height:78px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,188,212,.10);

    color:#00BCD4;

    font-size:1.8rem;

}

.authintro-block h3{

    color:#ffffff;

    margin-bottom:12px;

    font-size:1.35rem;

}

.authintro-block p{

    color:#CBD5E1;

    line-height:1.9;

    font-size:.97rem;

}

/*==================================
RIGHT PANEL
==================================*/

.authintro-panel{

    position:relative;

}

.authintro-card{

    position:relative;

    padding:45px;

    border-radius:34px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

}

.authintro-card-top{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:35px;

}

.verify-icon{

    width:70px;

    height:70px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,188,212,.10);

    color:#00BCD4;

    font-size:1.7rem;

}

.authintro-card-top span{

    color:#00BCD4;

    letter-spacing:2px;

    font-size:.85rem;

    font-weight:700;

}

.authintro-card h3{

    color:#ffffff;

    font-size:2rem;

    margin-bottom:20px;

}

.authintro-card p{

    color:#CBD5E1;

    line-height:2;

    margin-bottom:35px;

}

/*==================================
FEATURES
==================================*/

.authintro-features{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.authintro-features div{

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 18px;

    border-radius:16px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.07);

    color:#E2E8F0;

    font-size:.94rem;

}

.authintro-features i{

    color:#7ED321;

}

/*==================================
QUOTE PANEL
==================================*/

.authintro-footer{

    position:relative;

    z-index:5;

    margin-top:90px;

    padding:45px;

    border-radius:30px;

    text-align:center;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

}

.quote-icon{

    width:80px;

    height:80px;

    margin:0 auto 24px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,188,212,.10);

    color:#00BCD4;

    font-size:2rem;

}

.authintro-footer p{

    max-width:900px;

    margin:auto;

    color:#CBD5E1;

    line-height:2;

    font-size:1.05rem;

}

.authintro-footer strong{

    color:#ffffff;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:1200px){

.authintro-wrapper{

grid-template-columns:1fr;

}

}

@media(max-width:991px){

.authintro-section{

padding:100px 5%;

}

.authintro-heading h2{

font-size:2.7rem;

}

.authintro-card{

padding:35px;

}

}

@media(max-width:768px){

.authintro-section{

padding:80px 5%;

}

.authintro-heading{

margin-bottom:60px;

}

.authintro-heading h2{

font-size:2rem;

}

.authintro-heading p{

font-size:.95rem;

line-height:1.8;

}

.authintro-block{

flex-direction:column;

text-align:center;

padding:24px;

}

.authintro-block .icon{

margin:auto;

}

.authintro-card{

padding:26px;

}

.authintro-card h3{

font-size:1.6rem;

}

.authintro-features{

grid-template-columns:1fr;

}

.authintro-footer{

padding:30px 22px;

margin-top:60px;

}

.authintro-footer p{

font-size:.95rem;

line-height:1.8;

}

}

/* Part - 2 */

/*==================================================
        SECTION REVEAL
==================================================*/

.authintro-heading{

    opacity:0;

    animation:authIntroHeadingReveal 1s ease forwards;

}

.authintro-wrapper{

    opacity:0;

    animation:authIntroContentReveal 1s ease .25s forwards;

}

.authintro-footer{

    opacity:0;

    animation:authIntroFooterReveal 1s ease .55s forwards;

}

@keyframes authIntroHeadingReveal{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes authIntroContentReveal{

    from{

        opacity:0;

        transform:translateY(70px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes authIntroFooterReveal{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
        BACKGROUND GLOW
==================================================*/

.authintro-glow{

    animation:authGlowPulse 9s ease-in-out infinite;

}

.authintro-glow-two{

    animation-delay:3s;

}

@keyframes authGlowPulse{

    0%,100%{

        opacity:.8;

        transform:scale(1);

    }

    50%{

        opacity:1;

        transform:scale(1.08);

    }

}

/*==================================================
        GRID MOTION
==================================================*/

.authintro-pattern{

    animation:authGridMove 18s linear infinite;

}

@keyframes authGridMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(70px);

    }

}

/*==================================================
        SUBTITLE
==================================================*/

.authintro-subtitle{

    position:relative;

    overflow:hidden;

}

.authintro-subtitle::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:35%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.9s;

}

.authintro-heading:hover .authintro-subtitle::before{

    left:150%;

}

.authintro-heading:hover .authintro-subtitle{

    box-shadow:

        0 0 25px rgba(0,188,212,.20);

}

/*==================================================
        INFORMATION BLOCKS
==================================================*/

.authintro-block{

    position:relative;

    overflow:hidden;

    transition:

        transform .4s ease,

        border-color .4s ease,

        box-shadow .4s ease;

}

.authintro-block::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:40%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transform:skewX(-25deg);

    transition:.85s;

}

.authintro-block:hover{

    transform:translateY(-10px);

    border-color:rgba(0,188,212,.22);

    box-shadow:

        0 22px 45px rgba(0,188,212,.15);

}

.authintro-block:hover::before{

    left:150%;

}

.authintro-block .icon{

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        background .35s ease;

}

.authintro-block:hover .icon{

    transform:rotate(8deg) scale(1.08);

    background:rgba(0,188,212,.18);

    box-shadow:

        0 0 28px rgba(0,188,212,.25);

}

/*==================================================
        VERIFICATION PANEL
==================================================*/

.authintro-card{

    position:relative;

    overflow:hidden;

    transition:

        transform .4s ease,

        border-color .4s ease,

        box-shadow .4s ease;

}

.authintro-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:34px;

    padding:1px;

    background:linear-gradient(

        135deg,

        transparent,

        rgba(0,188,212,.30),

        rgba(126,211,33,.30),

        transparent

    );

    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    opacity:0;

    transition:.45s;

}

.authintro-card:hover{

    transform:translateY(-10px);

    border-color:rgba(0,188,212,.22);

    box-shadow:

        0 30px 65px rgba(0,188,212,.18);

}

.authintro-card:hover::after{

    opacity:1;

}

.verify-icon{

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        background .35s ease;

}

.authintro-card:hover .verify-icon{

    transform:rotate(-10deg) scale(1.08);

    background:rgba(0,188,212,.18);

    box-shadow:

        0 0 28px rgba(0,188,212,.25);

}

/*==================================================
        FEATURE LIST
==================================================*/

.authintro-features div{

    transition:

        transform .35s ease,

        background .35s ease,

        border-color .35s ease;

}

.authintro-features div:hover{

    transform:translateX(8px);

    background:rgba(0,188,212,.08);

    border-color:rgba(0,188,212,.20);

}

.authintro-features div i{

    transition:

        transform .35s ease,

        color .35s ease;

}

.authintro-features div:hover i{

    transform:scale(1.25);

    color:#00BCD4;

}

/*==================================================
        QUOTE PANEL
==================================================*/

.authintro-footer{

    transition:

        transform .4s ease,

        box-shadow .4s ease,

        border-color .4s ease;

}

.authintro-footer:hover{

    transform:translateY(-8px);

    border-color:rgba(0,188,212,.20);

    box-shadow:

        0 30px 70px rgba(0,188,212,.15);

}

.quote-icon{

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.authintro-footer:hover .quote-icon{

    transform:rotate(-10deg) scale(1.08);

    box-shadow:

        0 0 25px rgba(0,188,212,.20);

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.authintro-block:hover,

.authintro-card:hover,

.authintro-footer:hover{

transform:none;

box-shadow:none;

}

.authintro-features div:hover{

transform:none;

}

.authintro-block:hover .icon,

.authintro-card:hover .verify-icon,

.authintro-footer:hover .quote-icon{

transform:none;

box-shadow:none;

}

.authintro-pattern{

animation-duration:24s;

}

}

/* Introduction Section Ends Here */

/* Certificates Section Starts Here */

/*==================================================
        CERTIFICATES & REGISTRATIONS
==================================================*/

.authcert-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%
    );

}

/*==================================
BACKGROUND GLOWS
==================================*/

.authcert-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(150px);

    pointer-events:none;

}

.authcert-glow-left{

    width:620px;

    height:620px;

    top:-220px;

    left:-220px;

    background:rgba(0,188,212,.11);

}

.authcert-glow-right{

    width:560px;

    height:560px;

    bottom:-180px;

    right:-180px;

    background:rgba(126,211,33,.10);

}

/*==================================
BACKGROUND PATTERN
==================================*/

.authcert-pattern{

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

        linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:75px 75px;

    opacity:.35;

    pointer-events:none;

}

/*==================================
SECTION HEADING
==================================*/

.authcert-heading{

    position:relative;

    z-index:5;

    max-width:900px;

    margin:0 auto 90px;

    text-align:center;

}

.authcert-subtitle{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    margin-bottom:25px;

    border-radius:50px;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    backdrop-filter:blur(16px);

    color:#00BCD4;

    font-weight:600;

    font-size:.92rem;

}

.authcert-heading h2{

    color:#ffffff;

    font-size:3.3rem;

    font-weight:800;

    line-height:1.2;

    margin-bottom:28px;

}

.authcert-heading h2 span{

    display:block;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.authcert-heading p{

    color:#CBD5E1;

    line-height:2;

    font-size:1rem;

}

/*==================================
GRID
==================================*/

.authcert-grid{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:32px;

}

/*==================================
CARD
==================================*/

.authcert-card{

    border-radius:30px;

    overflow:hidden;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}

/*==================================
IMAGE
==================================*/

.authcert-image{

    position:relative;

    height:290px;

    overflow:hidden;

}

.authcert-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.authcert-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(5,8,22,.72);

    opacity:0;

}

.authcert-overlay a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:15px 28px;

    border-radius:50px;

    background:#00BCD4;

    color:#07111F;

    text-decoration:none;

    font-weight:700;

}

/*==================================
CONTENT
==================================*/

.authcert-content{

    padding:34px;

}

.authcert-tag{

    display:inline-flex;

    align-items:center;

    padding:9px 18px;

    margin-bottom:20px;

    border-radius:40px;

    background:rgba(126,211,33,.10);

    border:1px solid rgba(126,211,33,.18);

    color:#7ED321;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.4px;

}

.authcert-content h3{

    color:#ffffff;

    font-size:1.5rem;

    margin-bottom:18px;

}

.authcert-content p{

    color:#CBD5E1;

    line-height:1.9;

    margin-bottom:28px;

    font-size:.96rem;

}

/*==================================
BUTTON
==================================*/

.authcert-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    padding:15px 28px;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    color:#08111F;

    font-weight:700;

}

/*==================================
BOTTOM PANEL
==================================*/

.authcert-footer{

    position:relative;

    z-index:5;

    margin-top:90px;

    display:flex;

    align-items:center;

    gap:35px;

    padding:42px;

    border-radius:32px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

}

.authcert-footer-icon{

    width:95px;

    height:95px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,188,212,.10);

    color:#00BCD4;

    font-size:2.3rem;

}

.authcert-footer-content h3{

    color:#ffffff;

    font-size:2rem;

    margin-bottom:16px;

}

.authcert-footer-content p{

    color:#CBD5E1;

    line-height:1.9;

    font-size:1rem;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:1200px){

.authcert-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:991px){

.authcert-section{

padding:100px 5%;

}

.authcert-heading h2{

font-size:2.7rem;

}

.authcert-footer{

flex-direction:column;

text-align:center;

}

}

@media(max-width:768px){

.authcert-section{

padding:80px 5%;

}

.authcert-heading{

margin-bottom:60px;

}

.authcert-heading h2{

font-size:2rem;

}

.authcert-heading p{

font-size:.95rem;

line-height:1.8;

}

.authcert-grid{

grid-template-columns:1fr;

gap:24px;

}

.authcert-image{

height:240px;

}

.authcert-content{

padding:24px;

}

.authcert-content h3{

font-size:1.3rem;

}

.authcert-btn{

width:100%;

justify-content:center;

}

.authcert-footer{

padding:28px 22px;

margin-top:60px;

}

.authcert-footer-icon{

width:75px;

height:75px;

font-size:1.8rem;

}

.authcert-footer-content h3{

font-size:1.5rem;

}

.authcert-footer-content p{

font-size:.95rem;

line-height:1.8;

}

}

/* Part - 2 */

/*==================================================
        SECTION REVEAL
==================================================*/

.authcert-heading{

    opacity:0;

    animation:authCertHeadingReveal 1s ease forwards;

}

.authcert-grid{

    opacity:0;

    animation:authCertGridReveal 1s ease .25s forwards;

}

.authcert-footer{

    opacity:0;

    animation:authCertFooterReveal 1s ease .55s forwards;

}

@keyframes authCertHeadingReveal{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes authCertGridReveal{

    from{

        opacity:0;

        transform:translateY(70px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes authCertFooterReveal{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
        GLOW PULSE
==================================================*/

.authcert-glow{

    animation:authCertGlowPulse 8s ease-in-out infinite;

}

.authcert-glow-right{

    animation-delay:3s;

}

@keyframes authCertGlowPulse{

    0%,100%{

        opacity:.8;

        transform:scale(1);

    }

    50%{

        opacity:1;

        transform:scale(1.08);

    }

}

/*==================================================
        BACKGROUND GRID
==================================================*/

.authcert-pattern{

    animation:authCertGridMove 18s linear infinite;

}

@keyframes authCertGridMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(70px);

    }

}

/*==================================================
        SUBTITLE BADGE
==================================================*/

.authcert-subtitle{

    position:relative;

    overflow:hidden;

}

.authcert-subtitle::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:40%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.9s;

}

.authcert-heading:hover .authcert-subtitle::before{

    left:160%;

}

.authcert-heading:hover .authcert-subtitle{

    box-shadow:0 0 25px rgba(0,188,212,.20);

}

/*==================================================
        DOCUMENT CARDS
==================================================*/

.authcert-card{

    position:relative;

    transition:

        transform .45s ease,

        border-color .45s ease,

        box-shadow .45s ease;

}

.authcert-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:30px;

    padding:1px;

    background:linear-gradient(

        135deg,

        transparent,

        rgba(0,188,212,.28),

        rgba(126,211,33,.28),

        transparent

    );

    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    opacity:0;

    transition:.45s;

}

.authcert-card:hover{

    transform:translateY(-12px);

    border-color:rgba(0,188,212,.20);

    box-shadow:

        0 28px 60px rgba(0,188,212,.18);

}

.authcert-card:hover::after{

    opacity:1;

}

/*==================================================
        DOCUMENT IMAGE
==================================================*/

.authcert-image img{

    transition:

        transform .6s ease,

        filter .6s ease;

}

.authcert-card:hover .authcert-image img{

    transform:scale(1.08);

    filter:brightness(1.05);

}

.authcert-overlay{

    transition:

        opacity .45s ease,

        backdrop-filter .45s ease;

}

.authcert-card:hover .authcert-overlay{

    opacity:1;

    backdrop-filter:blur(5px);

}

.authcert-overlay a{

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.authcert-overlay a:hover{

    transform:translateY(-4px);

    box-shadow:

        0 15px 35px rgba(0,188,212,.30);

}

/*==================================================
        VERIFICATION TAG
==================================================*/

.authcert-tag{

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        background .35s ease;

}

.authcert-card:hover .authcert-tag{

    transform:translateY(-2px);

    background:rgba(126,211,33,.15);

    box-shadow:

        0 0 20px rgba(126,211,33,.18);

}

/*==================================================
        BUTTON
==================================================*/

.authcert-btn{

    position:relative;

    overflow:hidden;

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.authcert-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:40%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.authcert-btn:hover{

    transform:translateY(-5px);

    box-shadow:

        0 18px 40px rgba(0,188,212,.28);

}

.authcert-btn:hover::before{

    left:150%;

}

/*==================================================
        FOOTER PANEL
==================================================*/

.authcert-footer{

    transition:

        transform .45s ease,

        border-color .45s ease,

        box-shadow .45s ease;

}

.authcert-footer:hover{

    transform:translateY(-8px);

    border-color:rgba(0,188,212,.20);

    box-shadow:

        0 30px 70px rgba(0,188,212,.15);

}

.authcert-footer-icon{

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        background .35s ease;

}

.authcert-footer:hover .authcert-footer-icon{

    transform:rotate(-12deg) scale(1.08);

    background:rgba(0,188,212,.18);

    box-shadow:

        0 0 28px rgba(0,188,212,.22);

}

/*==================================================
        RESPONSIVE
==================================================*/

@media(max-width:768px){

.authcert-card:hover,

.authcert-footer:hover{

transform:none;

box-shadow:none;

}

.authcert-btn:hover{

transform:none;

box-shadow:none;

}

.authcert-footer:hover .authcert-footer-icon{

transform:none;

box-shadow:none;

}

.authcert-pattern{

animation-duration:24s;

}

}

/* Certificates Section Ends Here */

/* FAQ Section Starts Here */

/*==================================================
            AUTHENTICITY FAQ
==================================================*/

.authfaq-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%
    );

}

/*==================================
BACKGROUND
==================================*/

.authfaq-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(150px);

    pointer-events:none;

}

.authfaq-glow-left{

    width:620px;

    height:620px;

    top:-220px;

    left:-220px;

    background:rgba(0,188,212,.11);

}

.authfaq-glow-right{

    width:560px;

    height:560px;

    bottom:-180px;

    right:-180px;

    background:rgba(126,211,33,.10);

}

.authfaq-lines{

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

        linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:80px 80px;

    opacity:.35;

    pointer-events:none;

}

/*==================================
HEADING
==================================*/

.authfaq-heading{

    position:relative;

    z-index:5;

    max-width:900px;

    margin:0 auto 90px;

    text-align:center;

}

.authfaq-subtitle{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    margin-bottom:24px;

    border-radius:50px;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    backdrop-filter:blur(16px);

    color:#00BCD4;

    font-size:.92rem;

    font-weight:600;

}

.authfaq-heading h2{

    color:#fff;

    font-size:3.3rem;

    font-weight:800;

    line-height:1.2;

    margin-bottom:28px;

}

.authfaq-heading h2 span{

    display:block;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.authfaq-heading p{

    color:#CBD5E1;

    line-height:2;

    font-size:1rem;

}

/*==================================
FAQ WRAPPER
==================================*/

.authfaq-wrapper{

    position:relative;

    z-index:5;

    max-width:980px;

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:22px;

}

/*==================================
FAQ ITEM
==================================*/

.authfaq-item{

    border-radius:28px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    overflow:hidden;

}

/*==================================
QUESTION
==================================*/

.authfaq-question{

    width:100%;

    display:flex;

    align-items:center;

    gap:22px;

    padding:28px 32px;

    border:none;

    outline:none;

    background:transparent;

    cursor:pointer;

    color:#fff;

    text-align:left;

}

.authfaq-icon{

    width:65px;

    height:65px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:rgba(0,188,212,.10);

    color:#00BCD4;

    font-size:1.4rem;

}

.authfaq-title{

    flex:1;

    font-size:1.12rem;

    font-weight:700;

    line-height:1.6;

}

.authfaq-arrow{

    width:50px;

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    color:#fff;

    flex-shrink:0;

}

/*==================================
ANSWER
==================================*/

.authfaq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .45s ease;

}

.authfaq-answer p{

    padding:0 32px 30px 119px;

    margin:0;

    color:#CBD5E1;

    line-height:2;

    font-size:.96rem;

}

/*==================================
ACTIVE
==================================*/

.authfaq-item.active .authfaq-answer{

    max-height:300px;

}

.authfaq-item.active .authfaq-arrow{

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    color:#07111F;

}

/*==================================
BOTTOM NOTE
==================================*/

.authfaq-note{

    position:relative;

    z-index:5;

    margin-top:90px;

    display:flex;

    align-items:center;

    gap:30px;

    padding:40px;

    border-radius:32px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

}

.authfaq-note-icon{

    width:90px;

    height:90px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(0,188,212,.10);

    color:#00BCD4;

    font-size:2rem;

}

.authfaq-note-content{

    flex:1;

}

.authfaq-note-content h3{

    color:#fff;

    font-size:2rem;

    margin-bottom:14px;

}

.authfaq-note-content p{

    color:#CBD5E1;

    line-height:1.9;

    margin:0;

}

.authfaq-contact-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:17px 34px;

    border-radius:50px;

    text-decoration:none;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    color:#07111F;

    font-weight:700;

    white-space:nowrap;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.authfaq-heading h2{

font-size:2.7rem;

}

.authfaq-note{

flex-direction:column;

text-align:center;

}

}

@media(max-width:768px){

.authfaq-section{

padding:80px 5%;

}

.authfaq-heading{

margin-bottom:60px;

}

.authfaq-heading h2{

font-size:2rem;

}

.authfaq-heading p{

font-size:.95rem;

line-height:1.8;

}

.authfaq-question{

padding:22px;

gap:16px;

align-items:flex-start;

}

.authfaq-icon{

width:55px;

height:55px;

font-size:1.2rem;

}

.authfaq-title{

font-size:1rem;

}

.authfaq-answer p{

padding:0 22px 22px;

font-size:.94rem;

line-height:1.8;

}

.authfaq-note{

padding:28px 22px;

margin-top:60px;

}

.authfaq-note-icon{

width:72px;

height:72px;

font-size:1.6rem;

}

.authfaq-note-content h3{

font-size:1.5rem;

}

.authfaq-contact-btn{

width:100%;

justify-content:center;

}

}

/* Part - 2 */

/*==================================================
            SECTION REVEAL
==================================================*/

.authfaq-heading{

    opacity:0;

    animation:authFaqHeadingReveal 1s ease forwards;

}

.authfaq-wrapper{

    opacity:0;

    animation:authFaqWrapperReveal 1s ease .25s forwards;

}

.authfaq-note{

    opacity:0;

    animation:authFaqNoteReveal 1s ease .55s forwards;

}

@keyframes authFaqHeadingReveal{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes authFaqWrapperReveal{

    from{

        opacity:0;

        transform:translateY(70px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes authFaqNoteReveal{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
            GLOW PULSE
==================================================*/

.authfaq-glow{

    animation:authFaqGlow 8s ease-in-out infinite;

}

.authfaq-glow-right{

    animation-delay:3s;

}

@keyframes authFaqGlow{

    0%,100%{

        opacity:.8;

        transform:scale(1);

    }

    50%{

        opacity:1;

        transform:scale(1.08);

    }

}

/*==================================================
            GRID MOTION
==================================================*/

.authfaq-lines{

    animation:authFaqGridMove 18s linear infinite;

}

@keyframes authFaqGridMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(70px);

    }

}

/*==================================================
            SUBTITLE
==================================================*/

.authfaq-subtitle{

    position:relative;

    overflow:hidden;

}

.authfaq-subtitle::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:40%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.85s;

}

.authfaq-heading:hover .authfaq-subtitle::before{

    left:150%;

}

.authfaq-heading:hover .authfaq-subtitle{

    box-shadow:0 0 25px rgba(0,188,212,.20);

}

/*==================================================
            FAQ ITEM
==================================================*/

.authfaq-item{

    position:relative;

    transition:

        transform .4s ease,

        border-color .4s ease,

        box-shadow .4s ease;

}

.authfaq-item::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:28px;

    padding:1px;

    background:linear-gradient(

        135deg,

        transparent,

        rgba(0,188,212,.28),

        rgba(126,211,33,.28),

        transparent

    );

    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    opacity:0;

    transition:.4s;

}

.authfaq-item:hover{

    transform:translateY(-8px);

    border-color:rgba(0,188,212,.18);

    box-shadow:

        0 24px 55px rgba(0,188,212,.15);

}

.authfaq-item:hover::after{

    opacity:1;

}

/*==================================================
            ICON
==================================================*/

.authfaq-icon{

    transition:

        transform .35s ease,

        background .35s ease,

        box-shadow .35s ease;

}

.authfaq-item:hover .authfaq-icon{

    transform:rotate(-10deg) scale(1.08);

    background:rgba(0,188,212,.18);

    box-shadow:

        0 0 24px rgba(0,188,212,.22);

}

/*==================================================
            ARROW
==================================================*/

.authfaq-arrow{

    transition:

        transform .35s ease,

        background .35s ease,

        color .35s ease;

}

.authfaq-item.active .authfaq-arrow{

    transform:rotate(45deg);

}

.authfaq-item:hover .authfaq-arrow{

    transform:scale(1.08);

}

/*==================================================
            QUESTION
==================================================*/

.authfaq-question{

    transition:background .35s ease;

}

.authfaq-item:hover .authfaq-question{

    background:rgba(255,255,255,.015);

}

/*==================================================
            CONTACT PANEL
==================================================*/

.authfaq-note{

    transition:

        transform .4s ease,

        border-color .4s ease,

        box-shadow .4s ease;

}

.authfaq-note:hover{

    transform:translateY(-8px);

    border-color:rgba(0,188,212,.20);

    box-shadow:

        0 30px 70px rgba(0,188,212,.16);

}

.authfaq-note-icon{

    transition:

        transform .35s ease,

        background .35s ease,

        box-shadow .35s ease;

}

.authfaq-note:hover .authfaq-note-icon{

    transform:rotate(-12deg) scale(1.08);

    background:rgba(0,188,212,.18);

    box-shadow:

        0 0 28px rgba(0,188,212,.22);

}

/*==================================================
            CONTACT BUTTON
==================================================*/

.authfaq-contact-btn{

    position:relative;

    overflow:hidden;

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.authfaq-contact-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:40%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.authfaq-contact-btn:hover{

    transform:translateY(-5px);

    box-shadow:

        0 18px 40px rgba(0,188,212,.30);

}

.authfaq-contact-btn:hover::before{

    left:150%;

}

/*==================================================
            MOBILE
==================================================*/

@media(max-width:768px){

.authfaq-item:hover,

.authfaq-note:hover{

transform:none;

box-shadow:none;

}

.authfaq-contact-btn:hover{

transform:none;

box-shadow:none;

}

.authfaq-item:hover .authfaq-icon,

.authfaq-note:hover .authfaq-note-icon{

transform:none;

box-shadow:none;

}

.authfaq-lines{

animation-duration:24s;

}

}

/* FAQ Section Ends Here */

/* CTA Section Starts Here */

/*==================================================
            AUTHENTICITY CTA
==================================================*/

.authcta-section{

    position:relative;

    overflow:hidden;

    padding:130px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 50%,
        #050816 100%
    );

}

/*==================================
BACKGROUND
==================================*/

.authcta-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(150px);

    pointer-events:none;

}

.authcta-glow-left{

    width:620px;

    height:620px;

    top:-220px;

    left:-220px;

    background:rgba(0,188,212,.11);

}

.authcta-glow-right{

    width:560px;

    height:560px;

    right:-180px;

    bottom:-180px;

    background:rgba(126,211,33,.10);

}

.authcta-grid{

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

        linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:80px 80px;

    opacity:.35;

    pointer-events:none;

}

/*==================================
MAIN CARD
==================================*/

.authcta-card{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:1.8fr 1fr;

    gap:60px;

    align-items:center;

    padding:70px;

    border-radius:36px;

    overflow:hidden;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(22px);

}

/*==================================
DECORATIVE CIRCLES
==================================*/

.authcta-circle{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

}

.authcta-circle-one{

    width:240px;

    height:240px;

    right:-90px;

    top:-90px;

    background:rgba(0,188,212,.08);

}

.authcta-circle-two{

    width:170px;

    height:170px;

    left:-60px;

    bottom:-60px;

    background:rgba(126,211,33,.08);

}

/*==================================
LEFT CONTENT
==================================*/

.authcta-content{

    position:relative;

    z-index:2;

}

.authcta-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    margin-bottom:28px;

    border-radius:50px;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    backdrop-filter:blur(15px);

    color:#00BCD4;

    font-size:.92rem;

    font-weight:600;

}

.authcta-content h2{

    color:#fff;

    font-size:3.3rem;

    font-weight:800;

    line-height:1.18;

    margin-bottom:28px;

}

.authcta-content h2 span{

    display:block;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.authcta-content p{

    color:#CBD5E1;

    font-size:1rem;

    line-height:2;

    max-width:700px;

}

/*==================================
BUTTONS
==================================*/

.authcta-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:40px;

}

.authcta-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:17px 34px;

    border-radius:50px;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.authcta-primary{

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    color:#08111F;

}

.authcta-secondary{

    color:#fff;

    border:1px solid rgba(255,255,255,.15);

    background:rgba(255,255,255,.05);

}

/*==================================
RIGHT PANEL
==================================*/

.authcta-side{

    position:relative;

    z-index:2;

    padding:40px;

    border-radius:30px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    text-align:center;

}

.authcta-shield{

    width:110px;

    height:110px;

    margin:0 auto 28px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(0,188,212,.10);

    color:#00BCD4;

    font-size:3rem;

}

.authcta-side h3{

    color:#fff;

    font-size:2rem;

    line-height:1.3;

    margin-bottom:30px;

}

.authcta-side ul{

    list-style:none;

    padding:0;

    margin:0;

}

.authcta-side li{

    display:flex;

    align-items:center;

    gap:14px;

    color:#CBD5E1;

    margin-bottom:18px;

    text-align:left;

    line-height:1.8;

}

.authcta-side li i{

    color:#7ED321;

    font-size:1rem;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:1200px){

.authcta-card{

grid-template-columns:1fr;

gap:45px;

}

}

@media(max-width:991px){

.authcta-section{

padding:100px 5%;

}

.authcta-card{

padding:50px;

}

.authcta-content h2{

font-size:2.7rem;

}

}

@media(max-width:768px){

.authcta-section{

padding:80px 5%;

}

.authcta-card{

padding:35px 25px;

gap:35px;

}

.authcta-content h2{

font-size:2rem;

}

.authcta-content p{

font-size:.95rem;

line-height:1.8;

}

.authcta-buttons{

flex-direction:column;

}

.authcta-btn{

width:100%;

justify-content:center;

}

.authcta-side{

padding:30px 22px;

}

.authcta-shield{

width:85px;

height:85px;

font-size:2.3rem;

}

.authcta-side h3{

font-size:1.5rem;

}

.authcta-side li{

font-size:.95rem;

}

}

/* Part - 2 */

/*==================================================
            SECTION REVEAL
==================================================*/

.authcta-card{

    opacity:0;

    animation:authCtaReveal 1s ease forwards;

}

@keyframes authCtaReveal{

    from{

        opacity:0;

        transform:translateY(70px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
            BACKGROUND GLOWS
==================================================*/

.authcta-glow{

    animation:authCtaGlow 8s ease-in-out infinite;

}

.authcta-glow-right{

    animation-delay:3s;

}

@keyframes authCtaGlow{

    0%,100%{

        transform:scale(1);

        opacity:.8;

    }

    50%{

        transform:scale(1.08);

        opacity:1;

    }

}

/*==================================================
            GRID MOTION
==================================================*/

.authcta-grid{

    animation:authCtaGridMove 18s linear infinite;

}

@keyframes authCtaGridMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(70px);

    }

}

/*==================================================
            FLOATING CIRCLES
==================================================*/

.authcta-circle{

    animation:authCircleFloat 7s ease-in-out infinite;

}

.authcta-circle-two{

    animation-delay:2.5s;

}

@keyframes authCircleFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

}

/*==================================================
            MAIN GLASS CARD
==================================================*/

.authcta-card{

    transition:

        transform .45s ease,

        border-color .45s ease,

        box-shadow .45s ease;

}

.authcta-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:36px;

    padding:1px;

    background:linear-gradient(

        135deg,

        transparent,

        rgba(0,188,212,.30),

        rgba(126,211,33,.30),

        transparent

    );

    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    opacity:0;

    transition:.45s;

}

.authcta-card:hover{

    transform:translateY(-10px);

    border-color:rgba(0,188,212,.18);

    box-shadow:

        0 35px 80px rgba(0,188,212,.16);

}

.authcta-card:hover::after{

    opacity:1;

}

/*==================================================
            BADGE
==================================================*/

.authcta-badge{

    position:relative;

    overflow:hidden;

}

.authcta-badge::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:40%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.authcta-content:hover .authcta-badge::before{

    left:150%;

}

.authcta-content:hover .authcta-badge{

    box-shadow:

        0 0 24px rgba(0,188,212,.22);

}

/*==================================================
            BUTTONS
==================================================*/

.authcta-btn{

    position:relative;

    overflow:hidden;

}

.authcta-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:40%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.authcta-btn:hover{

    transform:translateY(-5px);

}

.authcta-primary:hover{

    box-shadow:

        0 18px 45px rgba(0,188,212,.30);

}

.authcta-secondary:hover{

    background:rgba(255,255,255,.10);

    border-color:rgba(0,188,212,.25);

    box-shadow:

        0 18px 40px rgba(0,188,212,.15);

}

.authcta-btn:hover::before{

    left:150%;

}

/*==================================================
            RIGHT TRUST PANEL
==================================================*/

.authcta-side{

    transition:

        transform .45s ease,

        box-shadow .45s ease,

        border-color .45s ease;

}

.authcta-card:hover .authcta-side{

    transform:translateY(-8px);

    border-color:rgba(0,188,212,.18);

    box-shadow:

        0 28px 65px rgba(0,188,212,.16);

}

/*==================================================
            SHIELD ICON
==================================================*/

.authcta-shield{

    transition:

        transform .35s ease,

        background .35s ease,

        box-shadow .35s ease;

}

.authcta-card:hover .authcta-shield{

    transform:rotate(-10deg) scale(1.08);

    background:rgba(0,188,212,.18);

    box-shadow:

        0 0 30px rgba(0,188,212,.24);

}

/*==================================================
            TRUST LIST
==================================================*/

.authcta-side li{

    transition:

        transform .3s ease,

        color .3s ease;

}

.authcta-side li:hover{

    transform:translateX(8px);

    color:#ffffff;

}

.authcta-side li i{

    transition:

        transform .3s ease,

        color .3s ease;

}

.authcta-side li:hover i{

    transform:scale(1.2);

    color:#00BCD4;

}

/*==================================================
            RESPONSIVE
==================================================*/

@media(max-width:768px){

.authcta-card:hover,

.authcta-card:hover .authcta-side{

transform:none;

box-shadow:none;

}

.authcta-btn:hover{

transform:none;

box-shadow:none;

}

.authcta-card:hover .authcta-shield{

transform:none;

box-shadow:none;

}

.authcta-side li:hover{

transform:none;

}

.authcta-grid{

animation-duration:24s;

}

}

/* CTA Section Ends Here */

/* Our Authenticity Page Ends Here */

/* Volunteers Page Starts Here */

/* Hero Section Starts Here */

/*==================================================
            SIMPLE VOLUNTEERS HERO
==================================================*/

.volshero-section{

    position:relative;

    overflow:hidden;

    padding:160px 5% 110px;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08111F 55%,
        #050816 100%
    );

}

/*==================================
BACKGROUND GLOWS
==================================*/

.volshero-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    pointer-events:none;

}

.volshero-glow-left{

    width:520px;

    height:520px;

    top:-180px;

    left:-180px;

    background:rgba(0,188,212,.12);

}

.volshero-glow-right{

    width:500px;

    height:500px;

    right:-180px;

    bottom:-180px;

    background:rgba(126,211,33,.10);

}

/*==================================
LAYOUT
==================================*/

.volshero-section .container{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1.1fr .9fr;

    align-items:center;

    gap:70px;

}

/*==================================
BREADCRUMB
==================================*/

.volshero-breadcrumb{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:30px;

    font-size:.95rem;

}

.volshero-breadcrumb a{

    color:#00BCD4;

    text-decoration:none;

    font-weight:600;

}

.volshero-breadcrumb span{

    color:#94A3B8;

}

/*==================================
BADGE
==================================*/

.volshero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:50px;

    margin-bottom:25px;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    color:#00BCD4;

    font-size:.95rem;

    font-weight:600;

}

/*==================================
TITLE
==================================*/

.volshero-content h1{

    color:#ffffff;

    font-size:4rem;

    line-height:1.15;

    font-weight:800;

    margin-bottom:28px;

}

.volshero-content h1 span{

    display:block;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

/*==================================
DESCRIPTION
==================================*/

.volshero-content p{

    max-width:650px;

    color:#CBD5E1;

    line-height:2;

    font-size:1.05rem;

}

/*==================================
BUTTONS
==================================*/

.volshero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-top:45px;

}

.volshero-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:16px 34px;

    border-radius:50px;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.volshero-primary{

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

    color:#07111F;

}

.volshero-outline{

    color:#ffffff;

    border:1px solid rgba(255,255,255,.15);

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(18px);

}

/*==================================
IMAGE
==================================*/

.volshero-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.volshero-image::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:radial-gradient(

        rgba(0,188,212,.22),

        transparent 70%

    );

    z-index:0;

}

.volshero-image img{

    position:relative;

    z-index:2;

    width:100%;

    max-width:500px;

    object-fit:contain;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:1200px){

.volshero-section .container{

grid-template-columns:1fr;

gap:70px;

text-align:center;

}

.volshero-content p{

margin:auto;

}

.volshero-buttons{

justify-content:center;

}

}

@media(max-width:768px){

.volshero-section{

padding:130px 5% 80px;

}

.volshero-content h1{

font-size:2.4rem;

}

.volshero-buttons{

flex-direction:column;

}

.volshero-btn{

width:100%;

}

.volshero-image img{

max-width:340px;

}

}

/* Part - 2 */

/*==================================================
            HERO ENTRANCE
==================================================*/

.volshero-content{

    opacity:0;

    transform:translateX(-60px);

    animation:volsHeroContent 1s ease forwards;

}

.volshero-image{

    opacity:0;

    transform:translateX(60px);

    animation:volsHeroImage 1s ease .2s forwards;

}

@keyframes volsHeroContent{

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes volsHeroImage{

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*==================================================
            BACKGROUND GLOWS
==================================================*/

.volshero-glow{

    animation:volsGlow 8s ease-in-out infinite;

}

.volshero-glow-right{

    animation-delay:3s;

}

@keyframes volsGlow{

    0%,100%{

        transform:scale(1);

        opacity:.75;

    }

    50%{

        transform:scale(1.12);

        opacity:1;

    }

}

/*==================================================
            BADGE SHINE
==================================================*/

.volshero-badge{

    position:relative;

    overflow:hidden;

}

.volshero-badge::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:35%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.55),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.volshero-content:hover .volshero-badge::before{

    left:150%;

}

.volshero-content:hover .volshero-badge{

    box-shadow:

        0 0 28px rgba(0,188,212,.22);

}

/*==================================================
            BUTTONS
==================================================*/

.volshero-btn{

    position:relative;

    overflow:hidden;

}

.volshero-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:35%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.55),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.volshero-btn:hover::before{

    left:150%;

}

.volshero-btn:hover{

    transform:translateY(-4px);

}

.volshero-primary:hover{

    box-shadow:

        0 18px 45px rgba(0,188,212,.30);

}

.volshero-outline:hover{

    background:rgba(255,255,255,.10);

    border-color:rgba(0,188,212,.25);

    box-shadow:

        0 16px 35px rgba(0,188,212,.15);

}

/*==================================================
            IMAGE
==================================================*/

.volshero-image::before{

    animation:volsPulse 5s ease-in-out infinite;

}

@keyframes volsPulse{

    0%,100%{

        transform:scale(1);

        opacity:.55;

    }

    50%{

        transform:scale(1.15);

        opacity:.9;

    }

}

.volshero-image img{

    transition:

        transform .5s ease,

        filter .5s ease;

}

.volshero-image:hover img{

    transform:translateY(-10px) scale(1.03);

    filter:drop-shadow(0 20px 40px rgba(0,188,212,.25));

}

/*==================================================
            HEADING
==================================================*/

.volshero-content h1 span{

    background-size:200% auto;

    animation:volsGradient 6s linear infinite;

}

@keyframes volsGradient{

    from{

        background-position:0% center;

    }

    to{

        background-position:200% center;

    }

}

/*==================================================
            PARAGRAPH
==================================================*/

.volshero-content p{

    animation:volsFade 1.2s ease;

}

@keyframes volsFade{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
            RESPONSIVE
==================================================*/

@media(max-width:768px){

.volshero-btn:hover{

transform:none;

box-shadow:none;

}

.volshero-image:hover img{

transform:none;

filter:none;

}

}

/* Hero Section Ends Here */

/* Statistics Section Starts Here */

/*==================================================
            VOLUNTEER STATISTICS
==================================================*/

.volstats-section{

    position:relative;

    overflow:hidden;

    padding:120px 5%;

    background:linear-gradient(
        180deg,
        #07111F 0%,
        #091827 50%,
        #07111F 100%
    );

}

/*==================================
BACKGROUND GLOWS
==================================*/

.volstats-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(130px);

    pointer-events:none;

}

.volstats-glow-left{

    width:420px;

    height:420px;

    top:-150px;

    left:-180px;

    background:rgba(0,188,212,.10);

}

.volstats-glow-right{

    width:420px;

    height:420px;

    right:-180px;

    bottom:-150px;

    background:rgba(126,211,33,.08);

}

/*==================================
HEADING
==================================*/

.volstats-heading{

    position:relative;

    z-index:2;

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.volstats-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    margin-bottom:25px;

    border-radius:50px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    color:#00BCD4;

    font-size:.95rem;

    font-weight:600;

}

.volstats-heading h2{

    color:#ffffff;

    font-size:3.2rem;

    line-height:1.2;

    font-weight:800;

    margin-bottom:20px;

}

.volstats-heading h2 span{

    display:block;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.volstats-heading p{

    color:#CBD5E1;

    font-size:1.05rem;

    line-height:2;

}

/*==================================
GRID
==================================*/

.volstats-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

}

/*==================================
CARD
==================================*/

.volstats-card{

    position:relative;

    overflow:hidden;

    padding:40px 30px;

    text-align:center;

    border-radius:28px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    transition:.4s ease;

}

.volstats-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:28px;

    background:linear-gradient(
        135deg,
        rgba(0,188,212,.08),
        transparent,
        rgba(126,211,33,.08)
    );

    opacity:0;

    transition:.4s;

}

/*==================================
ICON
==================================*/

.volstats-icon{

    width:74px;

    height:74px;

    margin:0 auto 24px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(0,188,212,.12);

    border:1px solid rgba(0,188,212,.18);

    font-size:1.8rem;

    color:#00BCD4;

}

/*==================================
COUNTER
==================================*/

.volstats-card h3{

    display:inline-block;

    color:#ffffff;

    font-size:3rem;

    font-weight:800;

    margin-bottom:6px;

}

.volstats-symbol{

    display:inline-block;

    color:#7ED321;

    font-size:2rem;

    font-weight:700;

    margin-left:3px;

}

/*==================================
TITLE
==================================*/

.volstats-card h4{

    margin-top:15px;

    color:#CBD5E1;

    font-size:1.02rem;

    line-height:1.8;

    font-weight:500;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:1100px){

.volstats-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.volstats-section{

padding:90px 5%;

}

.volstats-heading{

margin-bottom:50px;

}

.volstats-heading h2{

font-size:2.3rem;

}

.volstats-grid{

grid-template-columns:1fr;

gap:22px;

}

.volstats-card{

padding:35px 25px;

}

.volstats-card h3{

font-size:2.4rem;

}

.volstats-icon{

width:65px;

height:65px;

font-size:1.5rem;

}

}

/* Part - 2 */

/*==================================================
            SECTION REVEAL
==================================================*/

.volstats-heading{

    opacity:0;

    transform:translateY(40px);

    animation:volStatsHeading .9s ease forwards;

}

@keyframes volStatsHeading{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
            BACKGROUND GLOWS
==================================================*/

.volstats-glow{

    animation:volStatsGlow 8s ease-in-out infinite;

}

.volstats-glow-right{

    animation-delay:4s;

}

@keyframes volStatsGlow{

    0%,100%{

        transform:scale(1);

        opacity:.7;

    }

    50%{

        transform:scale(1.18);

        opacity:1;

    }

}

/*==================================================
            BADGE SHINE
==================================================*/

.volstats-badge{

    position:relative;

    overflow:hidden;

}

.volstats-badge::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:35%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.55),

        transparent

    );

    transform:skewX(-25deg);

    transition:.9s;

}

.volstats-heading:hover .volstats-badge::before{

    left:150%;

}

/*==================================================
            CARD ENTRANCE
==================================================*/

.volstats-card{

    opacity:0;

    transform:translateY(40px);

    animation:volStatsCard .8s ease forwards;

}

.volstats-card:nth-child(1){animation-delay:.1s;}
.volstats-card:nth-child(2){animation-delay:.2s;}
.volstats-card:nth-child(3){animation-delay:.3s;}
.volstats-card:nth-child(4){animation-delay:.4s;}
.volstats-card:nth-child(5){animation-delay:.5s;}
.volstats-card:nth-child(6){animation-delay:.6s;}

@keyframes volStatsCard{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
            CARD HOVER
==================================================*/

.volstats-card:hover{

    transform:translateY(-10px);

    border-color:rgba(0,188,212,.18);

    box-shadow:

        0 22px 60px rgba(0,188,212,.18);

}

.volstats-card:hover::before{

    opacity:1;

}

/*==================================================
            FLOATING ICON
==================================================*/

.volstats-icon{

    animation:volStatsFloat 4s ease-in-out infinite;

    transition:

        transform .4s ease,

        box-shadow .4s ease,

        background .4s ease;

}

.volstats-card:nth-child(2) .volstats-icon{

    animation-delay:.5s;

}

.volstats-card:nth-child(3) .volstats-icon{

    animation-delay:1s;

}

.volstats-card:nth-child(4) .volstats-icon{

    animation-delay:1.5s;

}

.volstats-card:nth-child(5) .volstats-icon{

    animation-delay:2s;

}

.volstats-card:nth-child(6) .volstats-icon{

    animation-delay:2.5s;

}

@keyframes volStatsFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

.volstats-card:hover .volstats-icon{

    transform:translateY(-10px) rotate(-10deg) scale(1.08);

    background:rgba(0,188,212,.18);

    box-shadow:

        0 0 30px rgba(0,188,212,.30);

}

/*==================================================
            COUNTER
==================================================*/

.volstats-card h3{

    transition:.35s;

}

.volstats-card:hover h3{

    transform:scale(1.08);

    color:#00BCD4;

}

/*==================================================
            TITLE
==================================================*/

.volstats-card h4{

    transition:.35s;

}

.volstats-card:hover h4{

    color:#ffffff;

}

/*==================================================
            HEADING GRADIENT
==================================================*/

.volstats-heading h2 span{

    background-size:200% auto;

    animation:volStatsGradient 6s linear infinite;

}

@keyframes volStatsGradient{

    from{

        background-position:0% center;

    }

    to{

        background-position:200% center;

    }

}

/*==================================================
            MOBILE
==================================================*/

@media(max-width:768px){

.volstats-card:hover{

transform:none;

box-shadow:none;

}

.volstats-card:hover .volstats-icon{

transform:none;

box-shadow:none;

}

.volstats-card:hover h3{

transform:none;

}

}

/* Statistics Section Ends Here */

/* Volunteers Section Starts Here */

/*==================================================
            MEET OUR VOLUNTEERS
==================================================*/

.volteam-section{

    position:relative;

    overflow:hidden;

    padding:120px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08121E 50%,
        #050816 100%
    );

}

/*==================================
BACKGROUND GLOWS
==================================*/

.volteam-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(130px);

    pointer-events:none;

}

.volteam-glow-left{

    width:450px;

    height:450px;

    top:-180px;

    left:-180px;

    background:rgba(0,188,212,.10);

}

.volteam-glow-right{

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    background:rgba(126,211,33,.08);

}

/*==================================
HEADING
==================================*/

.volteam-heading{

    position:relative;

    z-index:2;

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.volteam-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    border-radius:50px;

    margin-bottom:25px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    color:#00BCD4;

    font-size:.95rem;

    font-weight:600;

}

.volteam-heading h2{

    font-size:3.2rem;

    font-weight:800;

    color:#ffffff;

    line-height:1.2;

    margin-bottom:18px;

}

.volteam-heading h2 span{

    display:block;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.volteam-heading p{

    color:#CBD5E1;

    line-height:2;

    font-size:1.05rem;

}

/*==================================
GRID
==================================*/

.volteam-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

/*==================================
CARD
==================================*/

.volteam-card{

    position:relative;

    overflow:hidden;

    padding:35px;

    border-radius:30px;

    text-align:center;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(22px);

    transition:.4s ease;

}

.volteam-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:30px;

    background:linear-gradient(
        135deg,
        rgba(0,188,212,.08),
        transparent,
        rgba(126,211,33,.08)
    );

    opacity:0;

    transition:.4s;

}

/*==================================
PROFILE IMAGE
==================================*/

.volteam-photo{

    position:relative;

    width:150px;

    height:150px;

    margin:0 auto 25px;

    border-radius:50%;

    padding:6px;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

}

.volteam-photo img{

    width:100%;

    height:100%;

    border-radius:50%;

    object-fit:cover;

    border:4px solid #07111F;

}

/*==================================
NAME
==================================*/

.volteam-content h3{

    color:#ffffff;

    font-size:1.55rem;

    font-weight:700;

    margin-bottom:8px;

}

/*==================================
ROLE
==================================*/

.volteam-role{

    display:inline-block;

    color:#00BCD4;

    font-size:.95rem;

    font-weight:600;

    margin-bottom:18px;

}

/*==================================
DESCRIPTION
==================================*/

.volteam-content p{

    color:#CBD5E1;

    font-size:.96rem;

    line-height:1.9;

    margin-bottom:22px;

}

/*==================================
RATING
==================================*/

.volteam-rating{

    display:flex;

    justify-content:center;

    gap:6px;

    margin-bottom:22px;

}

.volteam-rating i{

    color:#FFD54A;

    font-size:1rem;

}

/*==================================
SKILLS
==================================*/

.volteam-skills{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:25px;

}

.volteam-skills span{

    padding:8px 16px;

    border-radius:40px;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.18);

    color:#E2E8F0;

    font-size:.85rem;

}

/*==================================
JOINED
==================================*/

.volteam-joined{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    color:#94A3B8;

    margin-bottom:25px;

    font-size:.95rem;

}

.volteam-joined i{

    color:#7ED321;

}

/*==================================
SOCIAL
==================================*/

.volteam-social{

    display:flex;

    justify-content:center;

    gap:14px;

}

.volteam-social a{

    width:45px;

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    text-decoration:none;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:#ffffff;

    transition:.35s;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:1100px){

.volteam-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.volteam-section{

padding:90px 5%;

}

.volteam-heading{

margin-bottom:50px;

}

.volteam-heading h2{

font-size:2.3rem;

}

.volteam-grid{

grid-template-columns:1fr;

gap:25px;

}

.volteam-card{

padding:30px 25px;

}

.volteam-photo{

width:130px;

height:130px;

}

.volteam-content h3{

font-size:1.35rem;

}

}

/* Part - 2 */

/*==================================================
            SECTION REVEAL
==================================================*/

.volteam-heading{

    opacity:0;

    transform:translateY(40px);

    animation:volTeamHeading .9s ease forwards;

}

@keyframes volTeamHeading{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
            BACKGROUND GLOWS
==================================================*/

.volteam-glow{

    animation:volTeamGlow 8s ease-in-out infinite;

}

.volteam-glow-right{

    animation-delay:4s;

}

@keyframes volTeamGlow{

    0%,100%{

        transform:scale(1);

        opacity:.75;

    }

    50%{

        transform:scale(1.18);

        opacity:1;

    }

}

/*==================================================
            BADGE SHINE
==================================================*/

.volteam-badge{

    position:relative;

    overflow:hidden;

}

.volteam-badge::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:35%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.55),

        transparent

    );

    transform:skewX(-25deg);

    transition:.9s;

}

.volteam-heading:hover .volteam-badge::before{

    left:150%;

}

/*==================================================
            CARD ENTRANCE
==================================================*/

.volteam-card{

    opacity:0;

    transform:translateY(45px);

    animation:volTeamCard .8s ease forwards;

}

.volteam-card:nth-child(1){animation-delay:.1s;}
.volteam-card:nth-child(2){animation-delay:.25s;}
.volteam-card:nth-child(3){animation-delay:.4s;}
.volteam-card:nth-child(4){animation-delay:.55s;}
.volteam-card:nth-child(5){animation-delay:.7s;}
.volteam-card:nth-child(6){animation-delay:.85s;}

@keyframes volTeamCard{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
            CARD HOVER
==================================================*/

.volteam-card{

    transition:

        transform .45s ease,

        border-color .45s ease,

        box-shadow .45s ease;

}

.volteam-card:hover{

    transform:translateY(-14px);

    border-color:rgba(0,188,212,.20);

    box-shadow:

        0 28px 65px rgba(0,188,212,.16);

}

.volteam-card:hover::before{

    opacity:1;

}

/*==================================================
            PROFILE IMAGE
==================================================*/

.volteam-photo{

    transition:

        transform .45s ease,

        box-shadow .45s ease;

}

.volteam-photo::before{

    content:"";

    position:absolute;

    inset:-6px;

    border-radius:50%;

    border:2px solid rgba(0,188,212,.25);

    opacity:0;

    transition:.45s;

}

.volteam-photo img{

    transition:

        transform .45s ease,

        filter .45s ease;

}

.volteam-card:hover .volteam-photo{

    box-shadow:

        0 0 35px rgba(0,188,212,.25);

}

.volteam-card:hover .volteam-photo::before{

    opacity:1;

    animation:volTeamRing 2.5s linear infinite;

}

.volteam-card:hover .volteam-photo img{

    transform:scale(1.08);

    filter:brightness(1.05);

}

@keyframes volTeamRing{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*==================================================
            NAME
==================================================*/

.volteam-content h3{

    transition:.35s;

}

.volteam-card:hover h3{

    color:#00BCD4;

}

/*==================================================
            ROLE
==================================================*/

.volteam-role{

    transition:.35s;

}

.volteam-card:hover .volteam-role{

    color:#7ED321;

}

/*==================================================
            RATING
==================================================*/

.volteam-rating i{

    transition:

        transform .35s ease,

        color .35s ease;

}

.volteam-card:hover .volteam-rating i{

    color:#FFD54A;

    transform:scale(1.18);

}

/*==================================================
            SKILLS
==================================================*/

.volteam-skills span{

    transition:

        transform .35s ease,

        background .35s ease,

        border-color .35s ease;

}

.volteam-skills span:hover{

    transform:translateY(-4px);

    background:rgba(0,188,212,.18);

    border-color:rgba(0,188,212,.28);

}

/*==================================================
            SOCIAL ICONS
==================================================*/

.volteam-social{

    overflow:hidden;

}

.volteam-social a{

    transform:translateY(18px);

    opacity:0;

    transition:

        transform .45s ease,

        opacity .45s ease,

        background .35s ease,

        box-shadow .35s ease;

}

.volteam-card:hover .volteam-social a{

    transform:translateY(0);

    opacity:1;

}

.volteam-card:hover .volteam-social a:nth-child(1){

    transition-delay:.05s;

}

.volteam-card:hover .volteam-social a:nth-child(2){

    transition-delay:.12s;

}

.volteam-card:hover .volteam-social a:nth-child(3){

    transition-delay:.18s;

}

.volteam-social a:hover{

    background:#00BCD4;

    color:#07111F;

    transform:translateY(-5px);

    box-shadow:

        0 12px 28px rgba(0,188,212,.35);

}

/*==================================================
            JOINED INFO
==================================================*/

.volteam-joined{

    transition:.35s;

}

.volteam-card:hover .volteam-joined{

    color:#E2E8F0;

}

/*==================================================
            HEADING GRADIENT
==================================================*/

.volteam-heading h2 span{

    background-size:200% auto;

    animation:volTeamGradient 6s linear infinite;

}

@keyframes volTeamGradient{

    from{

        background-position:0% center;

    }

    to{

        background-position:200% center;

    }

}

/*==================================================
            MOBILE
==================================================*/

@media(max-width:768px){

.volteam-card:hover{

transform:none;

box-shadow:none;

}

.volteam-card:hover .volteam-photo{

box-shadow:none;

}

.volteam-card:hover .volteam-photo img{

transform:none;

filter:none;

}

.volteam-card:hover .volteam-social a{

transform:none;

opacity:1;

}

.volteam-social a:hover{

transform:none;

box-shadow:none;

}

}

/* Volunteers Section Ends Here */

/* Benefits Section Starts Here */

/*==================================================
            VOLUNTEER BENEFITS
==================================================*/

.volbenefit-section{

    position:relative;

    overflow:hidden;

    padding:120px 5%;

    background:linear-gradient(
        180deg,
        #07111F 0%,
        #081522 50%,
        #07111F 100%
    );

}

/*==================================
BACKGROUND GLOWS
==================================*/

.volbenefit-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(130px);

    pointer-events:none;

}

.volbenefit-glow-left{

    width:420px;

    height:420px;

    top:-180px;

    left:-180px;

    background:rgba(0,188,212,.10);

}

.volbenefit-glow-right{

    width:420px;

    height:420px;

    bottom:-180px;

    right:-180px;

    background:rgba(126,211,33,.08);

}

/*==================================
HEADING
==================================*/

.volbenefit-heading{

    position:relative;

    z-index:2;

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.volbenefit-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    margin-bottom:22px;

    border-radius:50px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    color:#00BCD4;

    font-size:.95rem;

    font-weight:600;

}

.volbenefit-heading h2{

    color:#ffffff;

    font-size:3.2rem;

    font-weight:800;

    line-height:1.2;

    margin-bottom:20px;

}

.volbenefit-heading h2 span{

    display:block;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.volbenefit-heading p{

    color:#CBD5E1;

    font-size:1.05rem;

    line-height:2;

}

/*==================================
BENTO GRID
==================================*/

.volbenefit-bento{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    grid-auto-rows:270px;

    gap:28px;

}

/*==================================
CARD SIZE
==================================*/

.volbenefit-large{

    grid-column:span 2;

}

.volbenefit-wide{

    grid-column:span 2;

}

/*==================================
CARD
==================================*/

.volbenefit-card{

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    padding:30px;

    border-radius:28px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    transition:.4s ease;

}

.volbenefit-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:28px;

    background:linear-gradient(
        135deg,
        rgba(0,188,212,.08),
        transparent,
        rgba(126,211,33,.08)
    );

    opacity:0;

    transition:.4s;

}

/*==================================
IMAGE
==================================*/

.volbenefit-image{

    position:relative;

    z-index:2;

    display:flex;

    justify-content:center;

    align-items:center;

    height:120px;

    margin-bottom:18px;

}

.volbenefit-image img{

    max-width:95px;

    max-height:95px;

    object-fit:contain;

}

/*==================================
CONTENT
==================================*/

.volbenefit-content{

    position:relative;

    z-index:2;

}

.volbenefit-content h3{

    color:#ffffff;

    font-size:1.45rem;

    font-weight:700;

    margin-bottom:14px;

}

.volbenefit-content p{

    color:#CBD5E1;

    font-size:.96rem;

    line-height:1.9;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:1100px){

.volbenefit-bento{

grid-template-columns:repeat(2,1fr);

}

.volbenefit-large,

.volbenefit-wide{

grid-column:span 2;

}

}

@media(max-width:768px){

.volbenefit-section{

padding:90px 5%;

}

.volbenefit-heading{

margin-bottom:50px;

}

.volbenefit-heading h2{

font-size:2.3rem;

}

.volbenefit-bento{

grid-template-columns:1fr;

grid-auto-rows:auto;

gap:22px;

}

.volbenefit-large,

.volbenefit-wide{

grid-column:span 1;

}

.volbenefit-card{

padding:28px 22px;

min-height:260px;

}

.volbenefit-image{

height:90px;

}

.volbenefit-image img{

max-width:75px;

max-height:75px;

}

.volbenefit-content h3{

font-size:1.25rem;

}

}

/* Part - 2 */

/*==================================================
            SECTION REVEAL
==================================================*/

.volbenefit-heading{

    opacity:0;

    transform:translateY(40px);

    animation:volBenefitHeading .9s ease forwards;

}

@keyframes volBenefitHeading{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
            BACKGROUND GLOW
==================================================*/

.volbenefit-glow{

    animation:volBenefitGlow 8s ease-in-out infinite;

}

.volbenefit-glow-right{

    animation-delay:4s;

}

@keyframes volBenefitGlow{

    0%,100%{

        transform:scale(1);

        opacity:.75;

    }

    50%{

        transform:scale(1.15);

        opacity:1;

    }

}

/*==================================================
            BADGE SHINE
==================================================*/

.volbenefit-badge{

    position:relative;

    overflow:hidden;

}

.volbenefit-badge::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:35%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.6),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.volbenefit-heading:hover .volbenefit-badge::before{

    left:150%;

}

/*==================================================
            CARD REVEAL
==================================================*/

.volbenefit-card{

    opacity:0;

    transform:translateY(40px);

    animation:volBenefitCard .8s ease forwards;

}

.volbenefit-card:nth-child(1){animation-delay:.10s;}
.volbenefit-card:nth-child(2){animation-delay:.20s;}
.volbenefit-card:nth-child(3){animation-delay:.30s;}
.volbenefit-card:nth-child(4){animation-delay:.40s;}
.volbenefit-card:nth-child(5){animation-delay:.50s;}
.volbenefit-card:nth-child(6){animation-delay:.60s;}

@keyframes volBenefitCard{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
            CARD HOVER
==================================================*/

.volbenefit-card{

    transition:

        transform .45s ease,

        box-shadow .45s ease,

        border-color .45s ease;

}

.volbenefit-card:hover{

    transform:translateY(-12px);

    border-color:rgba(0,188,212,.20);

    box-shadow:

        0 22px 60px rgba(0,188,212,.18);

}

.volbenefit-card:hover::before{

    opacity:1;

}

/*==================================================
            PREMIUM BORDER
==================================================*/

.volbenefit-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:28px;

    padding:1px;

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.35),

        transparent,

        rgba(126,211,33,.35)

    );

    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    opacity:0;

    transition:.4s;

}

.volbenefit-card:hover::after{

    opacity:1;

}

/*==================================================
            ILLUSTRATION
==================================================*/

.volbenefit-image{

    transition:transform .45s ease;

}

.volbenefit-image img{

    transition:

        transform .45s ease,

        filter .45s ease;

}

.volbenefit-card:hover .volbenefit-image{

    transform:translateY(-8px);

}

.volbenefit-card:hover .volbenefit-image img{

    transform:scale(1.08) rotate(-3deg);

    filter:drop-shadow(

        0 12px 25px rgba(0,188,212,.30)

    );

}

/* Floating Illustration */

.volbenefit-image img{

    animation:volBenefitFloat 5s ease-in-out infinite;

}

.volbenefit-card:nth-child(2) img{

    animation-delay:.5s;

}

.volbenefit-card:nth-child(3) img{

    animation-delay:1s;

}

.volbenefit-card:nth-child(4) img{

    animation-delay:1.5s;

}

.volbenefit-card:nth-child(5) img{

    animation-delay:2s;

}

.volbenefit-card:nth-child(6) img{

    animation-delay:2.5s;

}

@keyframes volBenefitFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

/*==================================================
            TITLE
==================================================*/

.volbenefit-content h3{

    transition:.35s;

}

.volbenefit-card:hover h3{

    color:#00BCD4;

}

/*==================================================
            DESCRIPTION
==================================================*/

.volbenefit-content p{

    transition:.35s;

}

.volbenefit-card:hover p{

    color:#ffffff;

}

/*==================================================
            HEADING GRADIENT
==================================================*/

.volbenefit-heading h2 span{

    background-size:200% auto;

    animation:volBenefitGradient 6s linear infinite;

}

@keyframes volBenefitGradient{

    from{

        background-position:0% center;

    }

    to{

        background-position:200% center;

    }

}

/*==================================================
            MOBILE
==================================================*/

@media(max-width:768px){

.volbenefit-card:hover{

transform:none;

box-shadow:none;

}

.volbenefit-card:hover .volbenefit-image{

transform:none;

}

.volbenefit-card:hover .volbenefit-image img{

transform:none;

filter:none;

}

}

/* Benefits Section Ends Here */

/* FAQ Section Starts Here */

/*==================================================
            VOLUNTEER FAQ
==================================================*/

.volfaq-section{

    position:relative;

    overflow:hidden;

    padding:120px 5%;

    background:linear-gradient(
        180deg,
        #050816 0%,
        #08131F 50%,
        #050816 100%
    );

}

/*==================================
BACKGROUND GLOWS
==================================*/

.volfaq-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(130px);

    pointer-events:none;

}

.volfaq-glow-left{

    width:450px;

    height:450px;

    top:-180px;

    left:-180px;

    background:rgba(0,188,212,.10);

}

.volfaq-glow-right{

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    background:rgba(126,211,33,.08);

}

/*==================================
HEADING
==================================*/

.volfaq-heading{

    position:relative;

    z-index:2;

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.volfaq-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    margin-bottom:22px;

    border-radius:50px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    color:#00BCD4;

    font-size:.95rem;

    font-weight:600;

}

.volfaq-heading h2{

    color:#ffffff;

    font-size:3.2rem;

    font-weight:800;

    line-height:1.2;

    margin-bottom:20px;

}

.volfaq-heading h2 span{

    display:block;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.volfaq-heading p{

    color:#CBD5E1;

    font-size:1.05rem;

    line-height:2;

}

/*==================================
FAQ WRAPPER
==================================*/

.volfaq-wrapper{

    position:relative;

    z-index:2;

    max-width:900px;

    margin:auto;

}

/*==================================
FAQ ITEM
==================================*/

.volfaq-item{

    margin-bottom:20px;

    border-radius:22px;

    overflow:hidden;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    transition:.35s ease;

}

/*==================================
QUESTION
==================================*/

.volfaq-question{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:24px 30px;

    cursor:pointer;

    border:none;

    outline:none;

    background:transparent;

    color:#ffffff;

    font-size:1.1rem;

    font-weight:600;

    text-align:left;

}

.volfaq-question span{

    flex:1;

}

.volfaq-question i{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(0,188,212,.10);

    border:1px solid rgba(0,188,212,.15);

    color:#00BCD4;

    font-size:.95rem;

    transition:.35s;

}

/*==================================
ANSWER
==================================*/

.volfaq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .45s ease;

}

.volfaq-answer p{

    padding:0 30px 28px;

    color:#CBD5E1;

    line-height:2;

    font-size:1rem;

}

/*==================================
ACTIVE STATE
==================================*/

.volfaq-item.active{

    border-color:rgba(0,188,212,.20);

}

.volfaq-item.active .volfaq-answer{

    max-height:300px;

}

.volfaq-item.active .volfaq-question i{

    transform:rotate(45deg);

    background:#00BCD4;

    color:#07111F;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:768px){

.volfaq-section{

padding:90px 5%;

}

.volfaq-heading{

margin-bottom:50px;

}

.volfaq-heading h2{

font-size:2.3rem;

}

.volfaq-question{

padding:20px;

font-size:1rem;

}

.volfaq-question i{

width:36px;

height:36px;

font-size:.85rem;

}

.volfaq-answer p{

padding:0 20px 22px;

font-size:.95rem;

}

}

/* Part - 2 */

/*==================================================
            SECTION REVEAL
==================================================*/

.volfaq-heading{

    opacity:0;

    transform:translateY(40px);

    animation:volFaqHeading .9s ease forwards;

}

@keyframes volFaqHeading{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
            BACKGROUND GLOWS
==================================================*/

.volfaq-glow{

    animation:volFaqGlow 8s ease-in-out infinite;

}

.volfaq-glow-right{

    animation-delay:4s;

}

@keyframes volFaqGlow{

    0%,100%{

        transform:scale(1);

        opacity:.75;

    }

    50%{

        transform:scale(1.15);

        opacity:1;

    }

}

/*==================================================
            BADGE SHINE
==================================================*/

.volfaq-badge{

    position:relative;

    overflow:hidden;

}

.volfaq-badge::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:35%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.6),

        transparent

    );

    transform:skewX(-25deg);

    transition:.9s;

}

.volfaq-heading:hover .volfaq-badge::before{

    left:150%;

}

/*==================================================
            FAQ CARD
==================================================*/

.volfaq-item{

    opacity:0;

    transform:translateY(35px);

    animation:volFaqItem .7s ease forwards;

    transition:

        transform .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;

}

.volfaq-item:nth-child(1){animation-delay:.10s;}
.volfaq-item:nth-child(2){animation-delay:.20s;}
.volfaq-item:nth-child(3){animation-delay:.30s;}
.volfaq-item:nth-child(4){animation-delay:.40s;}
.volfaq-item:nth-child(5){animation-delay:.50s;}
.volfaq-item:nth-child(6){animation-delay:.60s;}

@keyframes volFaqItem{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.volfaq-item:hover{

    transform:translateY(-4px);

    border-color:rgba(0,188,212,.20);

    box-shadow:

        0 18px 45px rgba(0,188,212,.14);

}

/*==================================================
            PREMIUM BORDER
==================================================*/

.volfaq-item::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:22px;

    padding:1px;

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.35),

        transparent,

        rgba(126,211,33,.35)

    );

    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    opacity:0;

    transition:.35s;

}

.volfaq-item:hover::before,

.volfaq-item.active::before{

    opacity:1;

}

/*==================================================
            QUESTION
==================================================*/

.volfaq-question{

    transition:background .35s ease;

}

.volfaq-item:hover .volfaq-question{

    background:rgba(255,255,255,.02);

}

.volfaq-question span{

    transition:.35s;

}

.volfaq-item:hover .volfaq-question span{

    color:#00BCD4;

}

/*==================================================
            ICON
==================================================*/

.volfaq-question i{

    transition:

        transform .35s ease,

        background .35s ease,

        color .35s ease,

        box-shadow .35s ease;

}

.volfaq-item:hover .volfaq-question i{

    background:rgba(0,188,212,.18);

    box-shadow:

        0 0 20px rgba(0,188,212,.28);

}

/*==================================================
            ANSWER
==================================================*/

.volfaq-answer p{

    opacity:.85;

    transition:.35s;

}

.volfaq-item.active .volfaq-answer p{

    opacity:1;

    color:#E2E8F0;

}

/*==================================================
            HEADING GRADIENT
==================================================*/

.volfaq-heading h2 span{

    background-size:200% auto;

    animation:volFaqGradient 6s linear infinite;

}

@keyframes volFaqGradient{

    from{

        background-position:0% center;

    }

    to{

        background-position:200% center;

    }

}

/*==================================================
            MOBILE
==================================================*/

@media(max-width:768px){

.volfaq-item:hover{

transform:none;

box-shadow:none;

}

.volfaq-item:hover .volfaq-question span{

color:#ffffff;

}

.volfaq-item:hover .volfaq-question i{

box-shadow:none;

}

}

/* FAQ Section Ends Here */

/* CTA Section Starts Here */

/*==================================================
            VOLUNTEER CTA
==================================================*/

.volcta-section{

    position:relative;

    overflow:hidden;

    padding:120px 5%;

    background:linear-gradient(
        180deg,
        #040814 0%,
        #07111F 50%,
        #040814 100%
    );

}

/*==================================
BACKGROUND GLOWS
==================================*/

.volcta-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    pointer-events:none;

}

.volcta-glow-left{

    width:480px;

    height:480px;

    left:-180px;

    top:-180px;

    background:rgba(0,188,212,.10);

}

.volcta-glow-right{

    width:450px;

    height:450px;

    right:-180px;

    bottom:-180px;

    background:rgba(126,211,33,.10);

}

/*==================================
FLOATING PARTICLES
==================================*/

.volcta-particles{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.volcta-particles span{

    position:absolute;

    width:8px;

    height:8px;

    border-radius:50%;

    background:#00BCD4;

    opacity:.18;

}

.volcta-particles span:nth-child(1){

    top:15%;

    left:12%;

}

.volcta-particles span:nth-child(2){

    top:28%;

    right:18%;

}

.volcta-particles span:nth-child(3){

    bottom:18%;

    left:25%;

}

.volcta-particles span:nth-child(4){

    bottom:12%;

    right:22%;

}

.volcta-particles span:nth-child(5){

    top:52%;

    left:50%;

}

.volcta-particles span:nth-child(6){

    top:72%;

    right:42%;

}

/*==================================
GLASS PANEL
==================================*/

.volcta-panel{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1.15fr .85fr;

    align-items:center;

    gap:70px;

    padding:70px;

    border-radius:35px;

    overflow:hidden;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(22px);

}

/*==================================
CONTENT
==================================*/

.volcta-content{

    position:relative;

    z-index:2;

}

.volcta-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    margin-bottom:24px;

    border-radius:50px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:#00BCD4;

    font-weight:600;

    backdrop-filter:blur(15px);

}

.volcta-badge i{

    font-size:.95rem;

}

.volcta-content h2{

    font-size:3.6rem;

    color:#ffffff;

    font-weight:800;

    line-height:1.15;

    margin-bottom:25px;

}

.volcta-content h2 span{

    display:block;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.volcta-content p{

    max-width:620px;

    color:#CBD5E1;

    font-size:1.08rem;

    line-height:2;

    margin-bottom:40px;

}

/*==================================
BUTTONS
==================================*/

.volcta-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.volcta-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:16px 34px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.volcta-primary{

    color:#07111F;

    background:linear-gradient(
        135deg,
        #00BCD4,
        #7ED321
    );

}

.volcta-outline{

    color:#ffffff;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.10);

}

/*==================================
ILLUSTRATION
==================================*/

.volcta-illustration{

    display:flex;

    justify-content:center;

    align-items:center;

}

.volcta-circle{

    width:430px;

    height:430px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:radial-gradient(
        circle,
        rgba(0,188,212,.15),
        rgba(126,211,33,.06),
        transparent
    );

    border:1px solid rgba(255,255,255,.08);

}

.volcta-circle img{

    width:82%;

    max-width:330px;

    object-fit:contain;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.volcta-panel{

grid-template-columns:1fr;

text-align:center;

padding:55px 40px;

gap:45px;

}

.volcta-content p{

margin:auto auto 35px;

}

.volcta-buttons{

justify-content:center;

}

.volcta-circle{

width:340px;

height:340px;

}

}

@media(max-width:768px){

.volcta-section{

padding:90px 5%;

}

.volcta-panel{

padding:40px 25px;

border-radius:25px;

}

.volcta-content h2{

font-size:2.4rem;

}

.volcta-content p{

font-size:.98rem;

line-height:1.9;

}

.volcta-btn{

width:100%;

justify-content:center;

}

.volcta-circle{

width:260px;

height:260px;

}

.volcta-circle img{

max-width:210px;

}

}


/* Part - 2 */

/*==================================================
            SECTION REVEAL
==================================================*/

.volcta-panel{

    opacity:0;

    transform:translateY(50px);

    animation:volCtaReveal .9s ease forwards;

}

@keyframes volCtaReveal{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
            BACKGROUND GLOWS
==================================================*/

.volcta-glow{

    animation:volCtaGlow 8s ease-in-out infinite;

}

.volcta-glow-right{

    animation-delay:4s;

}

@keyframes volCtaGlow{

    0%,100%{

        transform:scale(1);

        opacity:.75;

    }

    50%{

        transform:scale(1.18);

        opacity:1;

    }

}

/*==================================================
            FLOATING PARTICLES
==================================================*/

.volcta-particles span{

    animation:volParticle 10s linear infinite;

}

.volcta-particles span:nth-child(2){animation-delay:1s;}
.volcta-particles span:nth-child(3){animation-delay:2.5s;}
.volcta-particles span:nth-child(4){animation-delay:4s;}
.volcta-particles span:nth-child(5){animation-delay:5.5s;}
.volcta-particles span:nth-child(6){animation-delay:7s;}

@keyframes volParticle{

    0%{

        transform:translateY(0) scale(1);

        opacity:.15;

    }

    50%{

        transform:translateY(-35px) scale(1.5);

        opacity:.45;

    }

    100%{

        transform:translateY(-70px) scale(.8);

        opacity:0;

    }

}

/*==================================================
            PREMIUM GRADIENT BORDER
==================================================*/

.volcta-panel::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:35px;

    padding:1px;

    background:linear-gradient(
        135deg,
        #00BCD4,
        transparent,
        #7ED321,
        transparent,
        #00BCD4
    );

    background-size:300% 300%;

    animation:volBorderMove 6s linear infinite;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

}

@keyframes volBorderMove{

    0%{

        background-position:0% 50%;

    }

    100%{

        background-position:300% 50%;

    }

}

/*==================================================
            BADGE SHINE
==================================================*/

.volcta-badge{

    position:relative;

    overflow:hidden;

}

.volcta-badge::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:35%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.65),

        transparent

    );

    transform:skewX(-25deg);

    transition:.9s;

}

.volcta-panel:hover .volcta-badge::before{

    left:150%;

}

/*==================================================
            HEADING
==================================================*/

.volcta-content h2 span{

    background-size:200% auto;

    animation:volHeadingGradient 6s linear infinite;

}

@keyframes volHeadingGradient{

    from{

        background-position:0% center;

    }

    to{

        background-position:200% center;

    }

}

/*==================================================
            BUTTONS
==================================================*/

.volcta-btn{

    position:relative;

    overflow:hidden;

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        letter-spacing .35s ease;

}

.volcta-btn::before{

    content:"";

    position:absolute;

    inset:0;

    left:-120%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.28),

        transparent

    );

    transition:.7s;

}

.volcta-btn:hover::before{

    left:120%;

}

.volcta-primary:hover{

    transform:translateY(-5px);

    box-shadow:

        0 18px 40px rgba(0,188,212,.30);

    letter-spacing:.4px;

}

.volcta-outline:hover{

    transform:translateY(-5px);

    background:rgba(255,255,255,.10);

    border-color:#00BCD4;

    color:#00BCD4;

    box-shadow:

        0 15px 35px rgba(0,188,212,.18);

}

/*==================================================
            ILLUSTRATION
==================================================*/

.volcta-circle{

    animation:volCirclePulse 6s ease-in-out infinite;

}

@keyframes volCirclePulse{

    0%,100%{

        transform:scale(1);

        box-shadow:

            0 0 0 rgba(0,188,212,0);

    }

    50%{

        transform:scale(1.04);

        box-shadow:

            0 0 50px rgba(0,188,212,.22);

    }

}

.volcta-circle img{

    animation:volImageFloat 5s ease-in-out infinite;

    transition:transform .4s ease;

}

@keyframes volImageFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-14px);

    }

}

.volcta-panel:hover .volcta-circle img{

    transform:scale(1.06);

}

/*==================================================
            TEXT
==================================================*/

.volcta-content p{

    transition:.35s;

}

.volcta-panel:hover .volcta-content p{

    color:#E2E8F0;

}

/*==================================================
            MOBILE
==================================================*/

@media(max-width:768px){

.volcta-primary:hover,
.volcta-outline:hover{

transform:none;

box-shadow:none;

letter-spacing:normal;

}

.volcta-panel:hover .volcta-circle img{

transform:none;

}

}

/* CTA Section Ends Here */

/* Volunteers Page Ends Here */

/* Privacy Policy Page Starts Here */

/*==================================================
            PRIVACY POLICY
==================================================*/

.privacy-section{

    position:relative;

    overflow:hidden;

    padding:120px 5%;

    background:linear-gradient(
        180deg,
        #040814 0%,
        #07111F 50%,
        #040814 100%
    );

}

/*==================================
BACKGROUND GLOWS
==================================*/

.privacy-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    pointer-events:none;

}

.privacy-glow-left{

    width:480px;

    height:480px;

    top:-180px;

    left:-180px;

    background:rgba(0,188,212,.10);

}

.privacy-glow-right{

    width:450px;

    height:450px;

    right:-180px;

    bottom:-180px;

    background:rgba(126,211,33,.08);

}

/*==================================
HEADER
==================================*/

.privacy-header{

    position:relative;

    z-index:2;

    max-width:780px;

    margin:0 auto 70px;

    text-align:center;

}

.privacy-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    margin-bottom:22px;

    border-radius:50px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    color:#00BCD4;

    font-size:.95rem;

    font-weight:600;

}

.privacy-badge i{

    font-size:.95rem;

}

.privacy-header h2{

    color:#ffffff;

    font-size:3.3rem;

    font-weight:800;

    line-height:1.15;

    margin-bottom:20px;

}

.privacy-header h2 span{

    display:block;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.privacy-header p{

    color:#CBD5E1;

    font-size:1.05rem;

    line-height:2;

}

/*==================================
MAIN GLASS CARD
==================================*/

.privacy-card{

    position:relative;

    z-index:2;

    max-width:1050px;

    margin:auto;

    padding:60px;

    border-radius:32px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(22px);

    overflow:hidden;

}

/*==================================
POLICY BLOCK
==================================*/

.privacy-block{

    padding:12px 0;

}

.privacy-block h3{

    margin-bottom:16px;

    color:#ffffff;

    font-size:1.45rem;

    font-weight:700;

}

.privacy-block p{

    color:#CBD5E1;

    font-size:1rem;

    line-height:2;

}

/*==================================
DIVIDER
==================================*/

.privacy-divider{

    width:100%;

    height:1px;

    margin:28px 0;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(0,188,212,.35),
        rgba(126,211,33,.35),
        transparent
    );

}

/*==================================
SCROLLBAR
==================================*/

.privacy-card::-webkit-scrollbar{

    width:8px;

}

.privacy-card::-webkit-scrollbar-thumb{

    border-radius:20px;

    background:#00BCD4;

}

.privacy-card::-webkit-scrollbar-track{

    background:transparent;

}

/*==================================
TEXT SELECTION
==================================*/

.privacy-card ::selection{

    color:#07111F;

    background:#00BCD4;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.privacy-card{

padding:45px;

}

.privacy-header h2{

font-size:2.8rem;

}

}

@media(max-width:768px){

.privacy-section{

padding:90px 5%;

}

.privacy-header{

margin-bottom:45px;

}

.privacy-header h2{

font-size:2.2rem;

}

.privacy-header p{

font-size:.96rem;

line-height:1.9;

}

.privacy-card{

padding:30px 22px;

border-radius:24px;

}

.privacy-block h3{

font-size:1.18rem;

}

.privacy-block p{

font-size:.95rem;

line-height:1.9;

}

.privacy-divider{

margin:22px 0;

}

}

/* Part - 2 */

/*==================================================
            SECTION REVEAL
==================================================*/

.privacy-header{

    opacity:0;

    transform:translateY(40px);

    animation:privacyHeader .9s ease forwards;

}

.privacy-card{

    opacity:0;

    transform:translateY(60px);

    animation:privacyCard 1s ease .25s forwards;

}

@keyframes privacyHeader{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes privacyCard{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
            BACKGROUND GLOW
==================================================*/

.privacy-glow{

    animation:privacyGlow 8s ease-in-out infinite;

}

.privacy-glow-right{

    animation-delay:4s;

}

@keyframes privacyGlow{

    0%,100%{

        transform:scale(1);

        opacity:.75;

    }

    50%{

        transform:scale(1.15);

        opacity:1;

    }

}

/*==================================================
            PREMIUM BORDER
==================================================*/

.privacy-card::before{

    content:"";

    position:absolute;

    inset:0;

    padding:1px;

    border-radius:32px;

    background:linear-gradient(
        135deg,
        rgba(0,188,212,.55),
        transparent,
        rgba(126,211,33,.55),
        transparent,
        rgba(0,188,212,.55)
    );

    background-size:300% 300%;

    animation:privacyBorder 8s linear infinite;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

}

@keyframes privacyBorder{

    from{

        background-position:0% 50%;

    }

    to{

        background-position:300% 50%;

    }

}

/*==================================================
            BADGE SHINE
==================================================*/

.privacy-badge{

    position:relative;

    overflow:hidden;

}

.privacy-badge::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:35%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.65),

        transparent

    );

    transform:skewX(-25deg);

    transition:.9s;

}

.privacy-header:hover .privacy-badge::before{

    left:150%;

}

/*==================================================
            HEADING
==================================================*/

.privacy-header h2 span{

    background-size:200% auto;

    animation:privacyGradient 6s linear infinite;

}

@keyframes privacyGradient{

    from{

        background-position:0% center;

    }

    to{

        background-position:200% center;

    }

}

/*==================================================
            POLICY BLOCK
==================================================*/

.privacy-block{

    transition:

        transform .35s ease,

        padding-left .35s ease;

}

.privacy-block:hover{

    transform:translateX(8px);

    padding-left:10px;

}

.privacy-block h3{

    position:relative;

    transition:.35s;

}

.privacy-block h3::before{

    content:"";

    position:absolute;

    left:-18px;

    top:50%;

    transform:translateY(-50%);

    width:0;

    height:12px;

    border-radius:10px;

    background:#00BCD4;

    transition:.35s;

}

.privacy-block:hover h3{

    color:#00BCD4;

}

.privacy-block:hover h3::before{

    width:8px;

}

/*==================================================
            PARAGRAPH
==================================================*/

.privacy-block p{

    transition:.35s;

}

.privacy-block:hover p{

    color:#E2E8F0;

}

/*==================================================
            DIVIDER
==================================================*/

.privacy-divider{

    background-size:200% 100%;

    animation:privacyDivider 5s linear infinite;

}

@keyframes privacyDivider{

    from{

        background-position:0%;

    }

    to{

        background-position:200%;

    }

}

/*==================================================
            GLASS CARD HOVER
==================================================*/

.privacy-card{

    transition:

        transform .4s ease,

        box-shadow .4s ease;

}

.privacy-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 30px 80px rgba(0,188,212,.18);

}

/*==================================================
            MOBILE
==================================================*/

@media(max-width:768px){

.privacy-card:hover{

transform:none;

box-shadow:none;

}

.privacy-block:hover{

transform:none;

padding-left:0;

}

.privacy-block h3::before{

display:none;

}

}

/* Privacy Policy Page Ends Here */

/* Terms And Conditions Page Starts Here */

/*==================================================
            TERMS & CONDITIONS
==================================================*/

.terms-section{

    position:relative;

    overflow:hidden;

    padding:120px 5%;

    background:linear-gradient(
        180deg,
        #040814 0%,
        #07111F 50%,
        #040814 100%
    );

}

/*==================================
BACKGROUND GLOWS
==================================*/

.terms-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    pointer-events:none;

}

.terms-glow-left{

    width:480px;

    height:480px;

    top:-180px;

    left:-180px;

    background:rgba(0,188,212,.10);

}

.terms-glow-right{

    width:450px;

    height:450px;

    right:-180px;

    bottom:-180px;

    background:rgba(126,211,33,.08);

}

/*==================================
HEADER
==================================*/

.terms-header{

    position:relative;

    z-index:2;

    max-width:780px;

    margin:0 auto 70px;

    text-align:center;

}

.terms-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    margin-bottom:22px;

    border-radius:50px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    color:#00BCD4;

    font-size:.95rem;

    font-weight:600;

}

.terms-badge i{

    font-size:.95rem;

}

.terms-header h2{

    color:#ffffff;

    font-size:3.3rem;

    font-weight:800;

    line-height:1.15;

    margin-bottom:20px;

}

.terms-header h2 span{

    display:block;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #7ED321
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.terms-header p{

    color:#CBD5E1;

    font-size:1.05rem;

    line-height:2;

}

/*==================================
MAIN GLASS CARD
==================================*/

.terms-card{

    position:relative;

    z-index:2;

    max-width:1050px;

    margin:auto;

    padding:60px;

    border-radius:32px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(22px);

    overflow:hidden;

}

/*==================================
TERMS BLOCK
==================================*/

.terms-block{

    padding:12px 0;

}

.terms-block h3{

    margin-bottom:16px;

    color:#ffffff;

    font-size:1.45rem;

    font-weight:700;

}

.terms-block p{

    color:#CBD5E1;

    font-size:1rem;

    line-height:2;

}

/*==================================
DIVIDER
==================================*/

.terms-divider{

    width:100%;

    height:1px;

    margin:28px 0;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(0,188,212,.35),
        rgba(126,211,33,.35),
        transparent
    );

}

/*==================================
SCROLLBAR
==================================*/

.terms-card::-webkit-scrollbar{

    width:8px;

}

.terms-card::-webkit-scrollbar-thumb{

    border-radius:20px;

    background:#00BCD4;

}

.terms-card::-webkit-scrollbar-track{

    background:transparent;

}

/*==================================
TEXT SELECTION
==================================*/

.terms-card ::selection{

    color:#07111F;

    background:#00BCD4;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:991px){

.terms-card{

padding:45px;

}

.terms-header h2{

font-size:2.8rem;

}

}

@media(max-width:768px){

.terms-section{

padding:90px 5%;

}

.terms-header{

margin-bottom:45px;

}

.terms-header h2{

font-size:2.2rem;

}

.terms-header p{

font-size:.96rem;

line-height:1.9;

}

.terms-card{

padding:30px 22px;

border-radius:24px;

}

.terms-block h3{

font-size:1.18rem;

}

.terms-block p{

font-size:.95rem;

line-height:1.9;

}

.terms-divider{

margin:22px 0;

}

}

/* Part - 2 */

/*==================================================
            SECTION REVEAL
==================================================*/

.terms-header{

    opacity:0;

    transform:translateY(40px);

    animation:termsHeader .9s ease forwards;

}

.terms-card{

    opacity:0;

    transform:translateY(60px);

    animation:termsCard 1s ease .25s forwards;

}

@keyframes termsHeader{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes termsCard{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
            BACKGROUND GLOWS
==================================================*/

.terms-glow{

    animation:termsGlow 8s ease-in-out infinite;

}

.terms-glow-right{

    animation-delay:4s;

}

@keyframes termsGlow{

    0%,100%{

        transform:scale(1);

        opacity:.75;

    }

    50%{

        transform:scale(1.15);

        opacity:1;

    }

}

/*==================================================
            PREMIUM BORDER
==================================================*/

.terms-card::before{

    content:"";

    position:absolute;

    inset:0;

    padding:1px;

    border-radius:32px;

    background:linear-gradient(

        135deg,

        rgba(0,188,212,.55),

        transparent,

        rgba(126,211,33,.55),

        transparent,

        rgba(0,188,212,.55)

    );

    background-size:300% 300%;

    animation:termsBorder 8s linear infinite;

    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

}

@keyframes termsBorder{

    from{

        background-position:0% 50%;

    }

    to{

        background-position:300% 50%;

    }

}

/*==================================================
            BADGE SHINE
==================================================*/

.terms-badge{

    position:relative;

    overflow:hidden;

}

.terms-badge::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:35%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.65),

        transparent

    );

    transform:skewX(-25deg);

    transition:.9s;

}

.terms-header:hover .terms-badge::before{

    left:150%;

}

/*==================================================
            HEADING
==================================================*/

.terms-header h2 span{

    background-size:200% auto;

    animation:termsGradient 6s linear infinite;

}

@keyframes termsGradient{

    from{

        background-position:0% center;

    }

    to{

        background-position:200% center;

    }

}

/*==================================================
            TERMS BLOCK
==================================================*/

.terms-block{

    transition:

        transform .35s ease,

        padding-left .35s ease;

}

.terms-block:hover{

    transform:translateX(8px);

    padding-left:10px;

}

.terms-block h3{

    position:relative;

    transition:.35s;

}

.terms-block h3::before{

    content:"";

    position:absolute;

    left:-18px;

    top:50%;

    transform:translateY(-50%);

    width:0;

    height:12px;

    border-radius:10px;

    background:#00BCD4;

    transition:.35s;

}

.terms-block:hover h3{

    color:#00BCD4;

}

.terms-block:hover h3::before{

    width:8px;

}

/*==================================================
            PARAGRAPH
==================================================*/

.terms-block p{

    transition:.35s;

}

.terms-block:hover p{

    color:#E2E8F0;

}

/*==================================================
            DIVIDER
==================================================*/

.terms-divider{

    background-size:200% 100%;

    animation:termsDivider 5s linear infinite;

}

@keyframes termsDivider{

    from{

        background-position:0%;

    }

    to{

        background-position:200%;

    }

}

/*==================================================
            GLASS CARD HOVER
==================================================*/

.terms-card{

    transition:

        transform .4s ease,

        box-shadow .4s ease;

}

.terms-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 30px 80px rgba(0,188,212,.18);

}

/*==================================================
            MOBILE
==================================================*/

@media(max-width:768px){

.terms-card:hover{

transform:none;

box-shadow:none;

}

.terms-block:hover{

transform:none;

padding-left:0;

}

.terms-block h3::before{

display:none;

}

}


/* Terms And Conditions Page Ends Here */