/* ==========================================================
   AVARTHANA TECHNOLOGIES
   ABOUT SECTION
   Release 1.4.1
========================================================== */

.about-section{

    padding:120px 0;

    background:#f8fbff;

}

.about-section .container{

    max-width:1520px;

}


/* ==========================================================
   LAYOUT
========================================================== */

.about-layout{

    display:grid;

    grid-template-columns:1fr 1.15fr;

    gap:60px;

    align-items:center;

}


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

.about-content{

    max-width:620px;

}

.about-content .section-label{

    display:inline-block;

    margin-bottom:18px;

    font-size:.80rem;

    font-weight:700;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:#1683ff;

}

.about-content h2{

    margin:0 0 28px;

    font-size:clamp(2.2rem,2.8vw,3rem);

    line-height:1.15;

    font-weight:800;

    color:#0d213d;

}

.about-content p{

    margin:0 0 26px;

    font-size:1.05rem;

    line-height:1.9;

    color:#5d6f86;

}


/* ==========================================================
   HIGHLIGHTS
========================================================== */

.about-highlights{

    display:grid;

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

    gap:22px;

    margin:45px 0;

}

.highlight-item{

    padding:24px;

    border:1px solid #dce8f6;

    border-radius:16px;

    background:#ffffff;

    box-shadow:0 10px 28px rgba(10,40,70,.05);

    transition:.30s;

}

.highlight-item:hover{

    transform:translateY(-4px);

    border-color:#1683ff;

    box-shadow:0 18px 38px rgba(10,40,70,.10);

}

.highlight-item h3{

    margin:0 0 8px;

    font-size:1.35rem;

    font-weight:700;

    color:#10223d;

}

.highlight-item span{

    font-size:.95rem;

    color:#60738a;

}


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

.about-image{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    box-shadow:0 24px 55px rgba(10,40,70,.12);

    width:100%;

    max-width:700px;

    margin-left:auto;

}

.about-image img{

    width:100%;

    height:auto;

    display:block;

    object-fit:cover;

    transition:transform .45s ease;

}

.about-image:hover img{

    transform:scale(1.02);

}

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

.about-content .btn{

    margin-top:10px;

}


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

@media (max-width:1200px){

    .about-layout{

        grid-template-columns:1fr;

        gap:60px;

    }

    .about-content{

        max-width:none;

    }

}

@media (max-width:768px){

    .about-section{

        padding:90px 0;

    }

    .about-highlights{

        grid-template-columns:1fr;

    }

    .about-content h2{

        font-size:2rem;

    }

}

@media (max-width:576px){

    .about-content p{

        font-size:1rem;

    }

    .highlight-item{

        padding:20px;

    }

}