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

.about-hero{

    background:#050708;

}

.about-banner{

    position:relative;

    height:500px;

    overflow:hidden;

}

.about-banner-image{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/* Overlay */

.about-banner-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    background:

        linear-gradient(

            90deg,

            rgba(0,0,0,.65) 0%,

            rgba(0,0,0,.35) 35%,

            rgba(0,0,0,.05) 100%

        );

}

.about-banner-overlay .container{

    display:flex;

    align-items:center;

    height:100%;

}

.about-banner-overlay h1{

    margin:0;

    color:#00c083;

    font-size:68px;

    font-family:'Poppins';

    font-weight:normal;

    line-height:1;

}


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

.about-intro{

    position:relative;

    padding:110px 0 140px;

    background:#000;

    overflow:hidden;

    box-shadow:

        inset 0 180px 180px -120px rgba(0,185,165,.20),

        inset 0 -180px 180px -120px rgba(0,185,165,.20);

}

/* Mesh */

.about-mesh-left{

    position:absolute;

    left:-150px;

    top:-60px;

    width:520px;

    opacity:.35;

    pointer-events:none;

}

.about-mesh-right{

    position:absolute;

    right:-150px;

    bottom:-120px;

    width:500px;

    opacity:.35;

    pointer-events:none;

}


/*==================================================
Content
==================================================*/

.about-content{

    position:relative;

    z-index:5;

    text-align:center;

    max-width:1100px;

    margin:auto;

}

.about-content h2{

    margin:0;

    color:#fff;

    font-size:var(--fs-5xl);

    line-height:1.12;

    font-family:'Poppins';

    font-weight:normal;

}

.about-content span{

    color:#80ce0a;

}

.about-content p{

    margin:55px auto 0;

    max-width:980px;

    color:#00c0a0;

    font-size:var(--fs-lg);

    line-height:1.45;

    font-family:'Poppins';

    font-weight:normal;

}


/*==================================================
Stats
==================================================*/

.about-stats{

    display:flex;

    justify-content:center;

    margin-top:120px;

    position:relative;

    z-index:5;

}

.about-stat{

    flex:1;

    max-width:340px;

    text-align:center;

    padding:0 40px;

    border-right:1px solid rgba(0,192,131,.45);

}

.about-stat:last-child{

    border-right:none;

}

.about-stat h3{

    margin:0 0 15px;

    color:#ffffff;

    font-size:78px;

    font-family:'Poppins';

    font-weight:normal;

    line-height:1;

}

.about-stat span{

    display:block;

    color:#00c083;

    font-size:22px;

    line-height:1.35;

    text-transform:uppercase;

    font-family:'Poppins';

    font-weight:normal;

}


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

@media(max-width:1199px){

    .about-content h2{

        font-size:60px;

    }

    .about-content p{

        font-size:var(--fs-xl);

    }

}

@media(max-width:991px){

    .about-banner{

        height:420px;

    }

    .about-banner-overlay h1{

        font-size:var(--fs-5xl);

    }

    .about-content h2{

        font-size:52px;

    }

    .about-content p{

        font-size:22px;

    }

    .about-stat h3{

        font-size:var(--fs-5xl);

    }

}

@media(max-width:767px){

    .about-banner{

        height:280px;

    }

    .about-banner-overlay{

        justify-content:center;

        text-align:center;

    }

    .about-banner-overlay .container{

        justify-content:center;

    }

    .about-banner-overlay h1{

        font-size:42px;

    }

    .about-intro{

        padding:80px 0 100px;

    }

    .about-content h2{

        font-size:var(--fs-6xl);

    }

    .about-content p{

        font-size:var(--fs-md);

        margin-top:35px;

    }

    .about-stats{

        flex-direction:column;

        gap:50px;

        margin-top:80px;

    }

    .about-stat{

        border:none;

        padding:0;

    }

    .about-stat h3{

        font-size:48px;

    }

    .about-stat span{

        font-size:var(--fs-md);

    }

}