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

.about-hero{

    position: relative;

    padding: 220px 0 140px;

    overflow: hidden;

    background:
    linear-gradient(
        135deg,
        rgba(20,30,48,0.96),
        rgba(36,59,85,0.92)
    ),
    #d9d9d9;

}

.about-overlay{

    position: absolute;
    inset: 0;

    background:
    radial-gradient(
        circle at top right,
        rgba(214,123,168,0.25),
        transparent 30%
    );

}

.page-badge{

    display: inline-block;
    padding: 12px 28px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 24px;
}

.page-title{

    font-size: 68px;
    font-weight: 900;
    line-height: 1.05;
    color: #fff;
    margin-bottom: 25px;
    text-shadow: 0 22px 70px rgba(0,0,0,0.18);
}

.page-description{

    max-width: 760px;
    margin: 0 auto;
    color: rgba(255,255,255,0.86);
    font-size: 18px;
    line-height: 1.85;
}

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

.about-section{

    padding: 140px 0;

    background: #fff;

}

.vision-section{

    background: #f8f9fa;

}

.about-image{

    height: 620px;

    border-radius: 40px;

    background: #d9d9d9;

    position: relative;

    overflow: hidden;

}

.about-image::before{

    content: '';

    position: absolute;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background: rgba(214,123,168,0.2);

    top: -50px;
    right: -50px;

    filter: blur(20px);

}

.about-content{

    padding: 20px;

}

.about-content h2{

    font-size: 56px;
    font-weight: 800;

    line-height: 1.2;

    color: #1D3557;

    margin-bottom: 30px;

}

.about-content p{

    font-size: 17px;

    line-height: 1.9;

    color: #6c757d;

    margin-bottom: 25px;

}

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

@media(max-width:991px){

    .about-content h2{
        font-size: 42px;
    }

    .about-image{
        height: 450px;
    }

    .page-title{
        font-size: 52px;
    }

    .page-description{
        font-size: 16px;
    }

}

@media(max-width:768px){

    .about-section{
        padding: 90px 0;
    }

    .about-content h2{
        font-size: 34px;
    }

    .about-image{
        height: 320px;
    }

    .page-title{
        font-size: 38px;
    }

    .page-description{
        font-size: 15px;
    }

}