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


.about-hero{
    position:relative; /* برای اینکه بک‌گراند مطلق نسبت به این عنصر جاگیری بشه */
    padding:clamp(5rem,8vw,8rem) 0;
    background:
    linear-gradient(
        135deg,
        var(--surface),
        #ffffff
    );
    overflow:hidden;
}



.about-hero-bg{
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:0;
    pointer-events:none;
}


.about-hero .container{
    position:relative;
    z-index:1; /* تا محتوا بالای عکس محو قرار بگیره */
}



.about-hero-content{

    display:grid;

    grid-template-columns:

    1fr 1fr;

    align-items:center;

    gap:4rem;

}



/* TEXT */


.about-hero-text{

    direction:rtl;


}


.about-eyebrow{

    display:inline-block;

    padding:.5rem 1rem;

    background:rgba(37,99,235,.1);

    color:var(--secondary);

    border-radius:var(--radius-round);

    font-size:.9rem;

    margin-bottom:1.5rem;

}


.about-hero-text h1{

    font-family:var(--font-heading);

    font-size:var(--hero-title-size-s);

    font-weight:var(--title-weight);

    line-height:1.18;

    color:var(--text);

    letter-spacing:-1px;

    margin-top:55px;

    margin-bottom:15px;

}



.about-hero-text p{

    font-size:var(--hero-desc-size);

    font-family:var(--font-body);

    line-height:2;

    color:var(--text-light);

    max-width:576px;

    

}



/* FEATURES */


.about-hero-stats{

    display:flex;

    flex-wrap:wrap;

    gap:1rem;

    margin-top:2.5rem;

}



.about-stat{

    display:flex;

    align-items:center;

    gap:.7rem;

    padding:.9rem 1.2rem;

    background:white;

    border:1px solid var(--border);

    border-radius:var(--radius-md);

    color:var(--text);

    font-family:var(--font-body);

    box-shadow:0 10px 30px rgba(15,76,129,.05);

}



.stat-icon{

    color:var(--secondary);

    font-family:var(--font-body);

    font-size:1.2rem;

}



/* IMAGE */


.about-hero-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}



.image-about{

    position:relative;

    width:min(100%,520px);

    aspect-ratio:1/1;

    z-index:2;

}

.about-hero-bg img{
    width:100%;
    height:100%;
    object-fit:cover;

    /* opacity ثابت حذف شد */

    -webkit-mask-image: linear-gradient(
        to right,
        #000 0%,
        #000 10%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        #000 0%,
        #000 10%,
        transparent 100%
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}
/* RESPONSIVE */


@media(max-width:992px){


    .about-hero-content{

        grid-template-columns:1fr;

    }


    .about-hero-text{

        text-align:center;

    }


    .about-hero-text p{

        margin:auto;

    }


    .about-hero-stats{

        justify-content:center;

    }


}