/*
 * English About page.
 * Keep the visual system in sync with the Persian page and mirror only the
 * directional details needed for a natural left-to-right reading flow.
 */
@import url("../../../per/assets/css/about-modern.css");

.about-modern {
    direction: ltr;
}

.about-hero__overlay {
    background:
        linear-gradient(270deg, rgba(3, 18, 52, .54) 0%, rgba(4, 24, 65, .82) 53%, rgba(4, 22, 60, .97) 100%),
        linear-gradient(180deg, rgba(6, 23, 59, .14) 0%, rgba(4, 18, 49, .62) 100%);
}

.about-hero__overlay::after,
.about-documents::before {
    -webkit-mask-image: linear-gradient(270deg, transparent, #000);
    mask-image: linear-gradient(270deg, transparent, #000);
}

.about-hero__orb--one {
    right: auto;
    left: -110px;
}

.about-hero__orb--two {
    inset: auto auto -270px -210px;
}

.about-hero__signature {
    right: 0;
    left: auto;
}

.about-hero__signature strong {
    grid-column: 2;
}

.about-hero__scroll {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}

.about-story__badge {
    right: auto;
    left: -34px;
}

.about-story__pattern {
    right: 0;
    left: auto;
}

.about-story__content blockquote {
    padding: 20px 20px 20px 24px;
    border-right: 0;
    border-left: 3px solid var(--about-blue);
    border-radius: 0 16px 16px 0;
}

.about-stat {
    border-right: 1px solid var(--about-line);
    border-left: 0;
}

.about-stat:last-child {
    border-right: 0;
}

.about-stat strong {
    text-align: left;
}

.about-service-card::after {
    right: -55px;
    left: auto;
}

.about-service-card li {
    padding-right: 0;
    padding-left: 18px;
}

.about-service-card li::before {
    right: auto;
    left: 0;
}

.about-value-card::after {
    right: 25px;
    left: auto;
}

.about-documents__glow {
    right: auto;
    left: -150px;
}

.about-final-cta__card::after {
    right: -40px;
    left: auto;
}

@media (max-width: 1199px) {
    .about-stat:nth-child(2) {
        border-right: 0;
    }
}

@media (max-width: 767px) {
    .about-story__badge {
        right: 12px;
        left: 12px;
    }

    .about-stat,
    .about-stat:nth-child(2) {
        border-right: 0;
    }

    .about-section-heading {
        text-align: left;
    }
}