/* ================================================================================= Page */
.AboutPage {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--normal-gap);
    color: var(--white);
}

/* ================================================================================= Page */

/* ================================================================================= Hero */
.AboutHero {
    position: relative;
    width: 100%;
    min-height: 23rem;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 2rem;
    border: 0.1rem solid var(--white50);
    background-color: var(--gray25);
    border-radius: var(--radius);
    box-shadow:
        0 0 0.6rem transparent,
        inset 0 0 1rem var(--black25);
    transition: box-shadow 0.5s ease;
}

.AboutHero:hover,
.AboutHero:active {
    box-shadow:
        0 0 0.6rem var(--white25),
        inset 0 0 1rem var(--black25);
}

/* ----------------------------------------------------------------------- images */
.AboutHeroCity {
    position: absolute;
    bottom: -15%;
    left: 0px;
    width: 50%;
    height: auto;
    object-fit: contain;
    transition: opacity 0.5s ease;
    opacity: 0.5;
    z-index: 0;
}

.AboutHero:hover .AboutHeroCity,
.AboutHero:active .AboutHeroCity {
    opacity: 1;
}

.AboutHeroPlane {
    position: absolute;
    top: 10%;
    left: 25%;
    width: 28rem;
    max-width: 36%;
    height: auto;
    object-fit: contain;
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
    z-index: 1;
    transition: opacity 0.5s ease;
}

.AboutHero:hover .AboutHeroPlane,
.AboutHero:active .AboutHeroPlane {
    opacity: 1;
}

.AboutHeroElephant {
    position: absolute;
    left: 10%;
    bottom: -30%;
    width: clamp(14rem, 25vw, 23rem);
    height: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    z-index: 2;
}


/* ----------------------------------------------------------------------- images */

/* ---------------------------------------------------------------------- Content */
.AboutHeroContent {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--normal-gap);
}

.AboutHeroTitle {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: var(--white);
    font-family: vazirB, tahoma;
    font-size: 1.75rem;
    font-weight: 700;
}

.AboutHeroDescription {
    width: 100%;
    color: var(--white75);
    font-size: var(--normal-font-size);
    font-family: vazir, tahoma;
    font-weight: 400;
}

.AboutHeroButton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--small-gap);
    padding: var(--button-padding);
    color: var(--white);
    background-color: var(--yellow25);
    border: 0.1rem solid var(--yellow25);
    border-radius: var(--radius);
    font-size: var(--small-font-size);
    transition:
        color 0.4s ease,
        background-color 0.4s ease,
        border-color 0.4s ease,
        transform 0.4s ease;
}

.AboutHeroButton svg {
    width: 1.2rem;
    height: 1.2rem;
    flex: 0 0 auto;
}

.AboutHeroButton:hover {
    color: var(--black);
    background-color: var(--yellow);
    border-color: var(--yellow);
    transform: translateY(-0.1rem);
}

/* ---------------------------------------------------------------------- Content */

/* ================================================================================= Hero */

/* ========================================================================= Information */
.AboutInformation {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: var(--small-gap);
}

/* ----------------------------------------------------------------- Card */
.AboutCard {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--normal-padding);
    border: 0.1rem solid var(--white25);
    border-radius: var(--radius);
    gap: var(--small-gap);
    font-size: var(--normal-font-size);
    transition: border 0.5s ease;
    background-color: var(--gray25);
}

.AboutCard:hover,
.AboutCard:active {
    border: 0.1rem solid var(--white);
}

.AboutCardLabel {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--small-gap);
    padding-bottom: var(--small-padding);
    color: var(--white);
    border-bottom: 0.1rem solid var(--white25);
    font-family: vazirB, tahoma;
    transition: border 0.5s ease;
}

.AboutCard:hover .AboutCardLabel,
.AboutCard:active .AboutCardLabel {
    border-bottom: 0.1rem solid var(--white);
}

.AboutCardLabelText {
    font-size: 1.2rem;
    font-weight: 500;
}

.AboutCardLabel svg {
    width: var(--large-icon-size);
    height: var(--large-icon-size);
}


.AboutStoryContent {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--small-gap);
}

.AboutStoryContent p {
    color: var(--white75);
}

.AboutStoryHighlight {
    color: var(--white);
    background: linear-gradient(to left, var(--yellow25), transparent);
    border-radius: var(--radius);
    padding: var(--button-padding);
}

/* ----------------------------------------------------------------- Card */

/* ------------------------------------------------------------- Services */
.AboutServicesGrid {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--small-gap);
    list-style: none;
}

.AboutServiceItem {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--small-gap);
    padding: var(--normal-padding);
    color: var(--white75);
    background-color: var(--gray25);
    border-radius: var(--radius);
    text-align: center;
    font-size: var(--small-font-size);
    font-weight: 400;
    transition: background-color 0.5s ease, color 0.5s ease;
}

.AboutServiceItem:hover,
.AboutServiceItem:active {
    color: var(--black);
    background-color: var(--white);
}

.AboutServiceItem svg {
    width: 2rem;
    height: 2rem;
}

/* ========================================================================= Information */

/* ================================================================================= Why */
.AboutWhy {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* ------------------------------------------------------------------------ title */
.AboutWhyHeading {
    width: max-content;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--button-padding);
    gap: var(--small-gap);
    color: var(--white);
    background-color: var(--white25);
    border-radius: var(--radius) var(--radius) 0 0;
    font-size: var(--normal-font-size);
    transition: background-color 0.5s ease, color 0.5s ease;
}

.AboutWhy:hover .AboutWhyHeading,
.AboutWhy:active .AboutWhyHeading {
    background-color: var(--white);
    color: var(--black);
}

.AboutWhyHeading svg {
    width: var(--normal-icon-size);
    height: var(--normal-icon-size);
}

.AboutWhyTitle {
    font-size: 1.2rem;
    font-weight: 500;
}

.AboutWhyDivider {
    width: 100%;
    height: 0.1rem;
    background-color: var(--white25);
    transition: background-color 0.5s ease;
}

.AboutWhy:hover .AboutWhyDivider,
.AboutWhy:active .AboutWhyDivider {
    background-color: var(--white);
}

/* ------------------------------------------------------------------------ title */

/* ------------------------------------------------------------------------- Grid */
.AboutWhyGrid {
    width: 100%;
    margin-top: 0.5rem;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--small-gap);
    list-style: none;
}

.AboutWhyItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--large-padding);
    gap: var(--small-gap);
    color: var(--white);
    background-color: var(--gray25);
    border-radius: var(--radius);
    transition: color 0.5s ease, background-color 0.5s ease;
}

.AboutWhyItem:hover,
.AboutWhyItem:active {
    background-color: var(--white);
    color: var(--black);
}

.AboutWhyItem svg {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.AboutWhyItemTitle {
    font-size: var(--normal-font-size);
    font-weight: 600;
}

.AboutWhyItemDescription {
    color: var(--white50);
    font-size: var(--white75);
    transition: color 0.5s ease;
    font-size: var(--small-font-size);
}

.AboutWhyItem:hover .AboutWhyItemDescription,
.AboutWhyItem:active .AboutWhyItemDescription {
    color: var(--black);
}

/* ------------------------------------------------------------------------- Grid */

/* ================================================================================= Why */

/* ============================================================================= Mission */
.AboutMission {
    width: 100%;
    min-height: 18rem;
    position: relative;
    display: flex;
    align-items: start;
    overflow: hidden;
    padding: var(--normal-padding);
    background-color: var(--gray25);
    border-radius: var(--radius);
    border: 0.1rem solid var(--white25);
    transition: border 0.5s ease;
}

.AboutMission:hover,
.AboutMission:active {
    border: 0.1rem solid var(--white);
}

/* ------------------------------------------------------------------- images */
.AboutMissionCity {
    position: absolute;
    left: 0;
    bottom: -15%;
    width: 50%;
    height: auto;
    object-fit: contain;
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    transition: opacity 0.5s ease;
}

.AboutMission:hover .AboutMissionCity,
.AboutMission:active .AboutMissionCity {
    opacity: 1;
}

.AboutMissionImage {
    position: absolute;
    left: 0%;
    bottom: 0;
    width: clamp(14rem, 25vw, 23rem);
    height: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

/* ------------------------------------------------------------------- images */

/* ------------------------------------------------------------------ content */
.AboutMissionContent {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: var(--normal-gap);
    z-index: 2;
}

.AboutMissionLabel {
    width: max-content;
    display: flex;
    align-items: center;
    gap: var(--small-gap);
    padding: var(--button-padding);
    color: var(--black);
    background-color: var(--white);
    border-radius: var(--radius);
    font-size: var(--small-font-size);
}

.AboutMissionLabel svg {
    width: var(--normal-icon-size);
    height: var(--normal-icon-size);
}

.AboutMissionTitle {
    width: 100%;
    color: var(--white);
    font-family: vazirB, tahoma;
    font-size: var(--large-font-size);
    font-weight: 700;
}

.AboutMissionDescription {
    width: 100%;
    color: var(--white75);
    font-size: var(--normal-font-size);
}

/* ------------------------------------------------------------------ content */

/* ============================================================================= Mission */

/* ============================================================================ S Laptop */
@media (max-width: 1024px) {

    /* ---------------------------------------------------------------- Hero */
    .AboutHeroContent {
        width: 60%;
    }

    .AboutHeroElephant {
        left: 5%;
        bottom: -20%;
    }

    .AboutHeroPlane {
        left: 5%;
    }

    .AboutHeroCity {
        width: 60%;
        bottom: -10%;
    }

    .AboutHeroTitle {
        font-size: 1.5rem;
    }

    /* ---------------------------------------------------------------- Hero */

    /* --------------------------------------------------------- Information */
    .AboutInformation {
        grid-template-columns: 1fr 1fr;
    }

    .AboutServicesGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* --------------------------------------------------------- Information */

    /* ----------------------------------------------------------------- Why */
    .AboutWhyGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* ----------------------------------------------------------------- Why */

    /* ------------------------------------------------------------- Mission */
    .AboutMissionContent {
        width: 60%;
    }

    .AboutMissionImage {
        left: 0%;
        width: 20rem;
    }

    .AboutMissionCity {
        width: 60%;
    }

    /* ------------------------------------------------------------- Mission */
}

/* ============================================================================ S Laptop */

/* ============================================================================== tablet */
@media (max-width: 768px) {

    /* ------------------------------------------------------------------ Hero */
    .AboutHero {
        min-height: 30rem;
        align-items: start;
        padding: 1.5rem;
    }

    .AboutHeroContent {
        width: 100%;
    }

    .AboutHeroCity {
        width: 100%;
    }

    .AboutHeroElephant {
        left: 10%;
        bottom: 0;
        width: 16rem;
    }

    .AboutHeroPlane {
        top: 60%;
        left: 50%;
    }

    /* ------------------------------------------------------------------ Hero */

    /* ----------------------------------------------------------- Information */
    .AboutInformation {
        display: flex;
        flex-direction: column;
    }

    /* ----------------------------------------------------------- Information */

    /* ------------------------------------------------------------------- Why */
    .AboutWhyGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* ------------------------------------------------------------------- Why */

    /* --------------------------------------------------------------- Mission */
    .AboutMission {
        min-height: 27rem;
    }

    .AboutMissionContent {
        width: 100%;
    }

    .AboutMissionImage {
        left: 5%;
        bottom: 5;
    }

    .AboutMissionCity {
        bottom: -10%;
        width: 100%;
    }

    .AboutMissionTitle {
        font-size: var(--normal-font-size);
    }

    .AboutMissionDescription {
        font-size: var(--normal-font-size);
    }

    /* --------------------------------------------------------------- Mission */
}

/* ============================================================================== tablet */

/* ============================================================================ L mobile */
@media (max-width: 425px) {

    /* ---------------------------------------------------------------- Hero */
    .AboutHero {
        min-height: 35rem;
        padding: 1rem;
    }

    .AboutHeroTitle {
        font-size: 1.35rem;
    }

    .AboutHeroDescription {
        font-size: var(--small-font-size);
    }

    .AboutHeroElephant {
        width: 14rem;
    }

    .AboutHeroPlane {
        top: 60%;
        left: 50%;
    }

    .AboutHeroCity {
        bottom: 0%;
        width: 100%;
    }

    /* ---------------------------------------------------------------- Hero */

    /* ---------------------------------------------------------------- Card */
    .AboutCard {
        font-size: var(--small-font-size);
    }

    /* ---------------------------------------------------------------- Card */

    /* ------------------------------------------------------------ Services */
    .AboutServicesGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* ------------------------------------------------------------ Services */

    /* ----------------------------------------------------------------- Why */
    .AboutWhyGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .AboutWhyItem svg {
        width: 2rem;
        height: 2rem;
    }

    /* ----------------------------------------------------------------- Why */

    /* ------------------------------------------------------------- Mission */
    .AboutMission {
        min-height: 28rem;
    }

    .AboutMissionImage {
        left: 0%;
        bottom: 10%;
        width: 15rem;
    }

    .AboutMissionCity {
        bottom: -5%;
        width: 100%;
    }

    .AboutMissionDescription {
        font-size: var(--small-font-size);
    }

    /* ------------------------------------------------------------- Mission */
}

/* ============================================================================ L mobile */