/* ============================================================
   about.css  — Homepage about section & about page styles
   RTL-aware via CSS logical properties throughout
   ============================================================ */

.about-section {
    padding:    80px 0;
    background: #f7f8fa;
    overflow:   hidden;
}

.about-eyebrow {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    background:     #eef4ef;
    color:          #224229;
    font-size:      14px;
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: .7px;
    padding:        5px 14px;
    border-radius:  20px;
    margin-bottom:  16px;
}

.about-title {
    font-size:     34px;
    font-weight:   800;
    color:         #1a1a2e;
    line-height:   1.25;
    margin-bottom: 18px;
}

.about-title span {
    color:    #224229;
    position: relative;
}
.about-title span::after {
    content:            '';
    position:           absolute;
    bottom:             2px;
    inset-inline-start: 0; /* logical → RTL safe */
    width:              100%;
    height:             3px;
    background:         #224229;
    border-radius:      3px;
    opacity:            .3;
}

.about-body {
    font-size:     15px;
    color:         #5a6370;
    line-height:   1.85;
    margin-bottom: 28px;
}

.about-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    background:      #224229;
    color:           #fff;
    border-radius:   30px;
    padding:         12px 28px;
    font-size:       14px;
    font-weight:     700;
    text-decoration: none;
    transition:      all .3s;
    box-shadow:      0 4px 16px rgba(34,66,41,.25);
}
.about-btn:hover {
    background:  #2d5535;
    color:       #fff;
    transform:   translateY(-2px);
    box-shadow:  0 6px 20px rgba(34,66,41,.3);
}
.about-btn i { font-size: 13px; }

/* ── Image side ── */
.about-img-wrap {
    position:        relative;
    display:         flex;
    justify-content: center;
}
.about-img-wrap::before {
    content:          '';
    position:         absolute;
    inset-inline-end: -20px; /* logical → RTL safe */
    top:              -20px;
    width:            70%;
    height:           70%;
    background:       #eef4ef;
    border-radius:    24px;
    z-index:          0;
}

.about-img {
    position:      relative;
    z-index:       1;
    width:         90%;
    max-width:     460px;
    border-radius: 20px;
    object-fit:    cover;
    box-shadow:    0 16px 48px rgba(34,66,41,.14);
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .about-section              { padding: 52px 0; }
    .about-title                { font-size: 26px; }
    .about-img-wrap             { margin-bottom: 40px; }
    .about-img-wrap::before,
    .about-img-wrap::after      { display: none; }
    .about-img                  { width: 100%; max-width: 100%; }
    .about-stat-badge           { inset-inline-start: 12px; }
}