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


.about-section {

    padding: 90px 0;

    background: #ffffff;

}



/* IMAGE */


.about-image {

    position: relative;

}



.about-image img {


    width: 100%;

    border-radius: 30px;


    box-shadow:

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


}



.experience-badge {


    position: absolute;


    right: 30px;

    bottom: 30px;



    width: 150px;

    height: 150px;



    background: #9b1515;


    color: white;


    border-radius: 50%;



    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;



    box-shadow:

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



}



.experience-badge h3 {


    font-size: 45px;

    font-weight: 800;

    margin: 0;


}



.experience-badge p {


    margin: 0;

    font-size: 14px;

}





/* CONTENT */


.about-content {


    padding-left: 40px;


}



.about-tag {


    color: #e63946;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 2px;


}




.about-content h2 {


    font-size: 45px;

    font-weight: 800;

    color: #081426;


    margin: 15px 0 25px;


}



.about-content p {


    color: #64748b;


    font-size: 17px;


    line-height: 1.8;


    margin-bottom: 15px;


}



.about-btn {


    display: inline-block;


    margin-top: 20px;


    padding: 14px 35px;


    background: #9b1515;


    color: white;


    border-radius: 50px;


    font-weight: 600;


}



.about-btn:hover {


    background: #e63946;

    color: white;


}








/* ============================
   COUNTER AREA
============================ */


.about-counter-row {


    margin-top: 80px;


    display: grid;


    grid-template-columns:

        repeat(5, 1fr);


    gap: 20px;


}




.counter-box {


    text-align: center;


    padding: 30px 15px;


    background: #fff;


    border-radius: 20px;


    border: 1px solid #eeeeee;


    transition: .4s;



}




.counter-box:hover {


    transform: translateY(-12px);


    box-shadow:

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


}



.counter-box h3 {


    font-size: 42px;


    font-weight: 800;


    color: #9b1515;


    margin-bottom: 12px;


}



.counter-box p {


    font-size: 14px;


    color: #475569;


    line-height: 1.6;


    margin: 0;


}







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


@media(max-width:1200px) {


    .about-counter-row {


        grid-template-columns:

            repeat(3, 1fr);


    }


}





@media(max-width:991px) {



    .about-content {


        padding-left: 0;

        margin-top: 40px;


    }



    .about-content h2 {


        font-size: 36px;


    }



}





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


@media(max-width:576px) {



    .about-section {

        padding: 60px 0;

    }



    .experience-badge {


        width: 110px;

        height: 110px;


    }



    .experience-badge h3 {


        font-size: 32px;


    }



    .about-counter-row {


        grid-template-columns:

            repeat(1, 1fr);


    }



}