/* =========================================================
   ABOUT PAGE
   FIDAR AFARIN PISHRO
   DARK / GOLD INDUSTRIAL THEME
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {

    --about-bg:
        #060b14;

    --about-bg-soft:
        #0a101c;

    --about-bg-card:
        rgba(255,255,255,.035);

    --about-border:
        rgba(255,255,255,.09);

    --about-gold:
        #D4AF37;

    --about-gold-light:
        #F5D36C;

    --about-text:
        #ffffff;

    --about-text-soft:
        #d2d5db;

    --about-text-muted:
        #9299a7;

    --about-container:
        1400px;

}


/* =========================================================
   BASE
========================================================= */

body {

    background:
        var(--about-bg);

    color:
        var(--about-text);

}


main {

    overflow:
        hidden;

}


.container {

    width:
        92%;

    max-width:
        var(--about-container);

    margin:
        0 auto;

}


.section-padding {

    padding:
        110px 0;

}


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

.about-hero {

    position:
        relative;

    min-height:
        620px;

    display:
        flex;

    align-items:
        center;

    padding:
        100px 4% 80px;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(212,175,55,.12),
            transparent 35%
        ),
        radial-gradient(
            circle at 10% 70%,
            rgba(37,99,235,.09),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #050914,
            #09111f 55%,
            #060b14
        );

}


.about-hero::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    opacity:
        .55;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size:
        48px 48px;

    pointer-events:
        none;

}


.about-hero-grid {

    position:
        relative;

    z-index:
        2;

    width:
        92%;

    max-width:
        var(--about-container);

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(0,.95fr);

    align-items:
        center;

    gap:
        80px;

}


.about-hero-content {

    max-width:
        760px;

}


.about-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        11px;

    margin-bottom:
        24px;

    padding:
        9px 16px;

    border:
        1px solid
        rgba(212,175,55,.28);

    border-radius:
        999px;

    background:
        rgba(212,175,55,.08);

    color:
        var(--about-gold-light);

    font-size:
        14px;

    font-weight:
        700;

}


.about-eyebrow::before {

    content:
        "";

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--about-gold);

    box-shadow:
        0 0 12px
        rgba(212,175,55,.8);

}


#aboutTitle {

    margin:
        0 0 22px;

    font-size:
        clamp(
            42px,
            6vw,
            72px
        );

    line-height:
        1.2;

    font-weight:
        900;

    letter-spacing:
        -1.5px;

}


#aboutExcerpt {

    max-width:
        720px;

    margin:
        0;

    color:
        var(--about-text-soft);

    font-size:
        clamp(
            17px,
            2vw,
            21px
        );

    line-height:
        2;

}


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

.about-hero-media {

    position:
        relative;

}


.about-hero-image-frame {

    position:
        relative;

    min-height:
        430px;

    padding:
        14px;

    border:
        1px solid
        rgba(212,175,55,.35);

    border-radius:
        28px;

    background:
        rgba(255,255,255,.025);

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.45);

}


.about-hero-image-frame::before {

    content:
        "";

    position:
        absolute;

    width:
        130px;

    height:
        130px;

    right:
        -35px;

    top:
        -35px;

    border:
        1px solid
        rgba(212,175,55,.35);

    border-radius:
        24px;

    pointer-events:
        none;

}


.about-hero-image {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    height:
        400px;

    object-fit:
        cover;

    border-radius:
        20px;

}


.about-hero-image-placeholder {

    position:
        absolute;

    inset:
        14px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        20px;

    background:
        linear-gradient(
            145deg,
            #111827,
            #080c14
        );

    color:
        var(--about-gold);

}


.about-hero-image-placeholder span {

    font-size:
        76px;

    font-weight:
        900;

    letter-spacing:
        2px;

}


.about-hero-image-placeholder small {

    margin-top:
        8px;

    color:
        #959baa;

    font-size:
        13px;

    letter-spacing:
        2px;

}


.about-hero-image-frame:not(.is-empty)
.about-hero-image-placeholder {

    display:
        none;

}


.about-hero-image-frame.is-empty
.about-hero-image {

    opacity:
        0;

}


/* =========================================================
   INTRO
========================================================= */

.about-intro {

    background:
        #060b14;

}


.about-intro-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0,1.4fr)
        minmax(320px,.6fr);

    gap:
        80px;

    align-items:
        start;

}


.about-section-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        18px;

    color:
        var(--about-gold);

    font-size:
        14px;

    font-weight:
        800;

}


.about-section-eyebrow::before {

    content:
        "";

    width:
        30px;

    height:
        2px;

    border-radius:
        99px;

    background:
        var(--about-gold);

}


.about-intro-content h2 {

    margin:
        0 0 26px;

    font-size:
        clamp(
            30px,
            4vw,
            46px
        );

    font-weight:
        900;

}


.about-content-text {

    color:
        var(--about-text-soft);

    font-size:
        17px;

    line-height:
        2.25;

}


.about-content-text p {

    margin:
        0 0 22px;

}


.about-content-text p:last-child {

    margin-bottom:
        0;

}


/* =========================================================
   INTRO CARD
========================================================= */

.about-intro-card {

    position:
        relative;

    padding:
        34px;

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

    border-radius:
        24px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        );

    box-shadow:
        0 20px 55px
        rgba(0,0,0,.25);

}


.about-intro-card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    right:
        0;

    width:
        4px;

    height:
        100%;

    border-radius:
        0 24px 24px 0;

    background:
        var(--about-gold);

}


.about-intro-icon {

    width:
        64px;

    height:
        64px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        22px;

    border:
        1px solid
        rgba(212,175,55,.35);

    border-radius:
        18px;

    background:
        rgba(212,175,55,.08);

    color:
        var(--about-gold-light);

    font-size:
        20px;

    font-weight:
        900;

}


.about-card-label {

    display:
        block;

    margin-bottom:
        12px;

    color:
        var(--about-gold);

    font-size:
        11px;

    letter-spacing:
        1.5px;

}


.about-intro-card h3 {

    margin:
        0 0 15px;

    font-size:
        22px;

    line-height:
        1.7;

}


.about-intro-card p {

    margin:
        0 0 24px;

    color:
        var(--about-text-muted);

    line-height:
        2;

}


.about-inline-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--about-gold-light);

    font-weight:
        700;

    transition:
        .3s;

}


.about-inline-link:hover {

    color:
        white;

    gap:
        15px;

}


/* =========================================================
   AREAS
========================================================= */

.about-areas {

    position:
        relative;

    background:
        #090f19;

}


.about-section-heading {

    display:
        flex;

    align-items:
        end;

    justify-content:
        space-between;

    gap:
        40px;

    margin-bottom:
        55px;

}


.about-section-heading h2 {

    margin:
        0;

    font-size:
        clamp(
            30px,
            4vw,
            46px
        );

    font-weight:
        900;

}


.about-section-heading > p {

    max-width:
        560px;

    margin:
        0;

    color:
        var(--about-text-muted);

    line-height:
        2;

}


.about-areas-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:
        20px;

}


.about-area-card {

    position:
        relative;

    min-height:
        230px;

    padding:
        30px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    overflow:
        hidden;

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

    border-radius:
        22px;

    background:
        rgba(255,255,255,.025);

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;

}


.about-area-card::after {

    content:
        "";

    position:
        absolute;

    width:
        120px;

    height:
        120px;

    left:
        -60px;

    bottom:
        -60px;

    border-radius:
        50%;

    background:
        rgba(212,175,55,.07);

    pointer-events:
        none;

}


.about-area-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(212,175,55,.4);

    background:
        rgba(212,175,55,.035);

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.28);

}


.about-card-number {

    color:
        rgba(212,175,55,.45);

    font-size:
        14px;

    font-weight:
        900;

    letter-spacing:
        1px;

}


.about-area-card h3 {

    margin:
        34px 0 10px;

    font-size:
        20px;

    font-weight:
        800;

}


.about-area-card p {

    margin:
        0;

    color:
        var(--about-text-muted);

    font-size:
        15px;

    line-height:
        2;

}


/* =========================================================
   VALUES
========================================================= */

.about-values {

    background:
        #060b14;

}


.about-section-heading-center {

    display:
        block;

    max-width:
        800px;

    margin:
        0 auto 55px;

    text-align:
        center;

}


.about-section-heading-center .about-section-eyebrow {

    justify-content:
        center;

}


.about-section-heading-center h2 {

    margin:
        0 0 16px;

}


.about-section-heading-center > p {

    max-width:
        680px;

    margin:
        auto;

}


.about-values-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:
        20px;

}


.about-value-card {

    padding:
        30px;

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

    border-radius:
        22px;

    background:
        rgba(255,255,255,.025);

    transition:
        transform .35s ease,
        border-color .35s ease;

}


.about-value-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(212,175,55,.35);

}


.about-value-icon {

    width:
        52px;

    height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        25px;

    border-radius:
        15px;

    background:
        rgba(212,175,55,.09);

    color:
        var(--about-gold-light);

    font-size:
        14px;

    font-weight:
        900;

}


.about-value-card h3 {

    margin:
        0 0 12px;

    font-size:
        19px;

}


.about-value-card p {

    margin:
        0;

    color:
        var(--about-text-muted);

    font-size:
        14px;

    line-height:
        2;

}


/* =========================================================
   GALLERY
========================================================= */

.about-gallery {

    background:
        #090f19;

}


.about-gallery-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:
        20px;

}


.about-gallery-item {

    position:
        relative;

    height:
        280px;

    margin:
        0;

    overflow:
        hidden;

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

    border-radius:
        22px;

    background:
        #080d15;

}


.about-gallery-item img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .5s ease;

}


.about-gallery-item:hover img {

    transform:
        scale(1.06);

}


/* =========================================================
   CTA
========================================================= */

.about-cta {

    background:
        #060b14;

}


.about-cta-inner {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        45px;

    padding:
        55px 60px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(212,175,55,.25);

    border-radius:
        28px;

    background:
        linear-gradient(
            135deg,
            rgba(212,175,55,.09),
            rgba(255,255,255,.025)
        );

}


.about-cta-glow {

    position:
        absolute;

    width:
        350px;

    height:
        350px;

    left:
        -150px;

    top:
        -170px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.14),
            transparent 70%
        );

    pointer-events:
        none;

}


.about-cta-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        750px;

}


.about-cta-content h2 {

    margin:
        0 0 15px;

    font-size:
        clamp(
            26px,
            3vw,
            38px
        );

    line-height:
        1.6;

    font-weight:
        900;

}


.about-cta-content p {

    margin:
        0;

    color:
        var(--about-text-muted);

    line-height:
        2;

}


.about-cta-actions {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    flex-shrink:
        0;

}


.about-cta-primary,
.about-cta-secondary {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        50px;

    padding:
        0 25px;

    border-radius:
        40px;

    font-size:
        14px;

    font-weight:
        800;

    transition:
        .3s;

}


.about-cta-primary {

    background:
        linear-gradient(
            135deg,
            #D4AF37,
            #F5D36C
        );

    color:
        #111;

    box-shadow:
        0 0 25px
        rgba(212,175,55,.28);

}


.about-cta-primary:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 0 35px
        rgba(212,175,55,.5);

}


.about-cta-secondary {

    border:
        1px solid
        rgba(255,255,255,.12);

    background:
        rgba(255,255,255,.035);

    color:
        white;

}


.about-cta-secondary:hover {

    border-color:
        rgba(212,175,55,.4);

    color:
        var(--about-gold-light);

}


/* =========================================================
   STATES
========================================================= */

.about-loading {

    color:
        var(--about-text-muted);

}


.about-error {

    padding:
        25px;

    border:
        1px solid
        rgba(239,68,68,.25);

    border-radius:
        18px;

    background:
        rgba(239,68,68,.06);

    color:
        #fca5a5;

}


.about-error strong {

    display:
        block;

    margin-bottom:
        10px;

}


.about-error p {

    margin:
        0 0 16px;

}


.about-error button {

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:
        9px;

    padding:
        9px 15px;

    background:
        rgba(255,255,255,.05);

    color:
        white;

    cursor:
        pointer;

}


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

@media (max-width: 1100px) {

    .about-hero-grid {

        gap:
            45px;

    }


    .about-areas-grid {

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

    }


    .about-values-grid {

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

    }

}


@media (max-width: 850px) {

    .about-hero {

        padding:
            75px 0;

    }


    .about-hero-grid {

        width:
            92%;

        grid-template-columns:
            1fr;

    }


    .about-hero-content {

        max-width:
            none;

        text-align:
            center;

    }


    .about-eyebrow {

        justify-content:
            center;

    }


    #aboutExcerpt {

        margin:
            auto;

    }


    .about-hero-media {

        max-width:
            720px;

        width:
            100%;

        margin:
            auto;

    }


    .about-intro-grid {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    .about-section-heading {

        display:
            block;

    }


    .about-section-heading > p {

        margin-top:
            20px;

    }


    .about-gallery-grid {

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

    }


    .about-cta-inner {

        flex-direction:
            column;

        align-items:
            flex-start;

        padding:
            45px 35px;

    }

}


@media (max-width: 600px) {

    .section-padding {

        padding:
            75px 0;

    }


    .about-hero {

        min-height:
            auto;

    }


    #aboutTitle {

        font-size:
            38px;

    }


    #aboutExcerpt {

        font-size:
            16px;

    }


    .about-hero-image-frame {

        min-height:
            320px;

    }


    .about-hero-image {

        height:
            290px;

    }


    .about-area-card {

        min-height:
            210px;

    }


    .about-areas-grid,
    .about-values-grid,
    .about-gallery-grid {

        grid-template-columns:
            1fr;

    }


    .about-gallery-item {

        height:
            240px;

    }


    .about-cta-actions {

        width:
            100%;

        flex-direction:
            column;

    }


    .about-cta-primary,
    .about-cta-secondary {

        width:
            100%;

    }

}


@media (max-width: 400px) {

    #aboutTitle {

        font-size:
            33px;

    }


    .about-intro-card {

        padding:
            27px;

    }


    .about-area-card,
    .about-value-card {

        padding:
            25px;

    }

}