/* =========================================================
   ALAQ ABOUT PAGE
========================================================= */

.alaq-about-page {
    overflow: hidden;

    background:
        #faf8f3;

    color:
        #073c38;
}


/* =========================================================
   EYEBROW
========================================================= */

.alaq-about-eyebrow {
    display: block;

    margin-bottom:
        13px;

    color:
        #65807a;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.8px;
}


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

.alaq-about-hero {
    position: relative;

    min-height:
        450px;

    display: flex;

    align-items:
        center;

    overflow:
        hidden;

    background-image:
        url("../images/about.jpg");

    background-size:
        cover;

    background-position:
        center;

    background-repeat:
        no-repeat;
}


.alaq-about-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(
                5,
                48,
                44,
                0.18
            ),
            rgba(
                5,
                48,
                44,
                0.52
            )
        );
}


.alaq-about-hero-content {
    position: relative;

    z-index: 2;

    width:
        50%;

    margin-left:
        50%;

    padding:
        90px
        clamp(
            45px,
            7vw,
            110px
        );
}


.alaq-about-hero
.alaq-about-eyebrow {
    color:
        rgba(
            255,
            255,
            255,
            0.70
        );
}


.alaq-about-hero h1 {
    max-width:
        680px;

    margin:
        0
        0
        25px;

    color:
        #ffffff;

    font-size:
        clamp(
            52px,
            6vw,
            82px
        );

    font-weight:
        400;

    line-height:
        0.98;

    letter-spacing:
        -3px;
}


.alaq-about-hero p {
    max-width:
        570px;

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.83
        );

    font-size:
        14px;

    line-height:
        1.9;
}


/* =========================================================
   NAME MEANING
========================================================= */

.alaq-meaning-section {
    max-width:
        1300px;

    margin:
        0
        auto;

    padding:
        120px
        clamp(
            25px,
            6vw,
            85px
        );

    display:
        grid;

    grid-template-columns:
        0.7fr
        1.3fr;

    gap:
        clamp(
            55px,
            9vw,
            130px
        );

    align-items:
        center;
}


.alaq-meaning-word {
    min-height:
        290px;

    display:
        flex;

    align-items:
        start;

    justify-content:
        start;



    overflow:
        hidden;
}


.alaq-arabic-word {
    color:
        #f4f0e7;

    font-family:
        "Cairo",
        sans-serif;

    font-size:
        clamp(
            110px,
            15vw,
            200px
        );

    font-weight:
        300;

    line-height:
        1;
}


.alaq-meaning-copy h2 {
    margin:
        0
        0
        23px;

    color:
        #073c38;

    font-size:
        clamp(
            39px,
            4.5vw,
            60px
        );

    font-weight:
        500;

    line-height:
        1.06;

    letter-spacing:
        -1.8px;
}


.alaq-meaning-copy p {
    max-width:
        650px;

    margin:
        0
        0
        19px;

    color:
        #697a76;

    font-size:
        13px;

    line-height:
        1.95;
}


.alaq-meaning-copy blockquote {
    max-width:
        650px;

    margin:
        34px
        0
        0;

    padding:
        22px
        0
        22px
        25px;

    border-left:
        2px solid
        #0a4944;

    color:
        #0a4944;

    font-size:
        18px;

    font-weight:
        500;

    line-height:
        1.5;
}


/* =========================================================
   PURPOSE
========================================================= */

.alaq-purpose-section {
    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    background:
        #edf1ec;
}


.alaq-purpose-copy {
    padding:
        110px
        clamp(
            30px,
            7vw,
            105px
        );

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;
}


.alaq-purpose-copy h2 {
    max-width:
        620px;

    margin:
        0
        0
        25px;

    color:
        #073c38;

    font-size:
        clamp(
            40px,
            4.8vw,
            62px
        );

    font-weight:
        500;

    line-height:
        1.05;

    letter-spacing:
        -2px;
}


.alaq-purpose-copy p {
    max-width:
        590px;

    margin:
        0
        0
        19px;

    color:
        #687975;

    font-size:
        13px;

    line-height:
        1.95;
}


.alaq-purpose-image {
    position: relative;

    min-height:
        680px;

    overflow:
        hidden;
}


.alaq-purpose-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        rgba(
            8,
            67,
            61,
            0.13
        );
}


.alaq-purpose-image img {
    position: absolute;

    inset: 0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;
}


/* =========================================================
   FOUNDER STORY
========================================================= */

.alaq-founder-section {
    max-width:
        1260px;

    margin:
        0
        auto;

    padding:
        120px
        clamp(
            25px,
            6vw,
            75px
        );

    display:
        grid;

    grid-template-columns:
        0.8fr
        1.2fr;

    gap:
        clamp(
            55px,
            9vw,
            135px
        );
}


.alaq-founder-intro {
    position:
        sticky;

    top:
        120px;

    align-self:
        start;
}


.alaq-founder-intro h2 {
    margin: 0;

    color:
        #073c38;

    font-size:
        clamp(
            40px,
            4.6vw,
            59px
        );

    font-weight:
        500;

    line-height:
        1.05;

    letter-spacing:
        -1.7px;
}


.alaq-founder-story p {
    margin:
        0
        0
        26px;

    color:
        #637571;

    font-size:
        14px;

    line-height:
        2;
}


.alaq-founder-story p:first-child {
    color:
        #294e49;

    font-size:
        17px;

    line-height:
        1.9;
}


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

.alaq-values-section {
    padding:
        100px
        clamp(
            22px,
            6vw,
            85px
        );

    background:
        #f1eee5;
}


.alaq-values-heading {
    max-width:
        1250px;

    margin:
        0
        auto
        48px;
}


.alaq-values-heading h2 {
    max-width:
        760px;

    margin: 0;

    color:
        #073c38;

    font-size:
        clamp(
            38px,
            4.5vw,
            58px
        );

    font-weight:
        500;

    line-height:
        1.07;

    letter-spacing:
        -1.7px;
}


.alaq-values-grid {
    max-width:
        1250px;

    margin:
        0
        auto;

    display:
        grid;

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

    gap:
        1px;

    background:
        #d4dcd8;

    border:
        1px solid
        #d4dcd8;
}


.alaq-value-card {
    min-height:
        285px;

    padding:
        32px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-end;

    background:
        #faf8f3;
}


.alaq-value-number {
    margin-bottom:
        auto;

    color:
        #84958f;

    font-size:
        9px;
}


.alaq-value-card h3 {
    margin:
        0
        0
        12px;

    color:
        #073c38;

    font-size:
        22px;

    font-weight:
        500;
}


.alaq-value-card p {
    margin: 0;

    color:
        #71807c;

    font-size:
        11px;

    line-height:
        1.8;
}


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

.alaq-size-cta {
    padding:
        80px
        clamp(
            24px,
            7vw,
            105px
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        50px;

    background:
        #f8f5ed;

    border-top:
        1px solid
        #dce1dd;

    border-bottom:
        1px solid
        #dce1dd;
}


.alaq-size-cta > div {
    max-width:
        720px;
}


.alaq-size-cta h2 {
    margin:
        0
        0
        13px;

    color:
        #073c38;

    font-size:
        clamp(
            34px,
            4vw,
            49px
        );

    font-weight:
        500;

    line-height:
        1.08;

    letter-spacing:
        -1.3px;
}


.alaq-size-cta p {
    max-width:
        610px;

    margin: 0;

    color:
        #6e7d79;

    font-size:
        12px;

    line-height:
        1.85;
}


.alaq-outline-button {
    min-width:
        170px;

    min-height:
        48px;

    padding:
        0
        24px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        #0a4944;

    background:
        transparent;

    color:
        #0a4944;

    font-size:
        10px;

    font-weight:
        600;

    text-decoration:
        none;

    white-space:
        nowrap;
}


.alaq-outline-button:hover {
    background:
        #0a4944;

    color:
        #ffffff;
}


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

.alaq-about-final {
    padding:
        100px
        22px;

    text-align:
        center;

    background:
        #294e49;
}


.alaq-about-final
.alaq-about-eyebrow {
    color:
        rgba(
            255,
            255,
            255,
            0.55
        );
}


.alaq-about-final h2 {
    margin:
        0
        auto
        15px;

    color:
        #ffffff;

    font-size:
        clamp(
            42px,
            5vw,
            62px
        );

    font-weight:
        400;

    line-height:
        1.05;

    letter-spacing:
        -1.9px;
}


.alaq-about-final p {
    margin:
        0
        auto
        28px;

    color:
        rgba(
            255,
            255,
            255,
            0.70
        );

    font-size:
        12px;
}


.alaq-final-button {
    min-width:
        160px;

    min-height:
        48px;

    padding:
        0
        24px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #f4f0e7;

    color:
        #073c38;

    font-size:
        10px;

    font-weight:
        600;

    text-decoration:
        none;
}


/* =========================================================
   TABLET
========================================================= */

@media (
    max-width: 900px
) {

    .alaq-about-hero-content {
        width:
            60%;

        margin-left:
            40%;

        padding:
            70px
            40px;
    }


    .alaq-meaning-section {
        grid-template-columns:
            1fr;

        gap:
            45px;
    }


    .alaq-meaning-word {
        min-height:
            200px;
    }


    .alaq-purpose-section {
        grid-template-columns:
            1fr;
    }


    .alaq-purpose-image {
        min-height:
            500px;
    }


    .alaq-founder-section {
        grid-template-columns:
            1fr;

        gap:
            35px;
    }


    .alaq-founder-intro {
        position:
            static;
    }


    .alaq-values-grid {
        grid-template-columns:
            1fr;
    }


    .alaq-value-card {
        min-height:
            210px;
    }

}


/* =========================================================
   MOBILE / IPHONE
========================================================= */

@media (
    max-width: 650px
) {

    .alaq-about-hero {
        min-height:
            405px;

        align-items:
            flex-end;
    }


    .alaq-about-hero-overlay {
        background:
            rgba(
                5,
                48,
                44,
                0.38
            );
    }


    .alaq-about-hero-content {
        width:
            100%;

        margin-left:
            0;

        padding:
            55px
            20px;
    }


    .alaq-about-hero h1 {
        font-size:
            36px;

        letter-spacing:
            -2px;
    }


    .alaq-about-hero p {
        font-size:
            12px;
    }


    .alaq-meaning-section {
        padding:
            35px
            18px;

            gap: 10px !important;
    }


    .alaq-meaning-word {
        min-height:
            100px;
    }

    .alaq-meaning-word img{
        max-height:
            100px;
    }


    .alaq-meaning-copy h2 {
        font-size:
            36px;
    }


    .alaq-meaning-copy blockquote {
        padding-left:
            15px;

        font-size:
            15px;
    }


    .alaq-purpose-copy {
        padding:
            65px
            20px;
    }


    .alaq-purpose-copy h2 {
        font-size:
            37px;
    }


    .alaq-purpose-image {
        min-height:
            300px;
    }


    .alaq-founder-section {
        padding:
            70px
            20px;
    }


    .alaq-founder-intro h2 {
        font-size:
            38px;
    }


    .alaq-founder-story p {
        font-size:
            12px;

        line-height:
            1.9;
    }


    .alaq-founder-story p:first-child {
        font-size:
            14px;
    }


    .alaq-values-section {
        padding:
            65px
            18px;
    }


    .alaq-values-heading h2 {
        font-size:
            35px;
    }


    .alaq-value-card {
        min-height:
            185px;

        padding:
            24px;
    }


    .alaq-size-cta {
        padding:
            55px
            20px;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            27px;
    }


    .alaq-outline-button {
        width:
            100%;
    }


    .alaq-about-final {
        padding:
            70px
            20px;
    }


    .alaq-about-final h2 {
        font-size:
            39px;
    }

}


/* =========================================================
   ARABIC
========================================================= */

html[dir="rtl"]
.alaq-about-hero h1,

html[dir="rtl"]
.alaq-meaning-copy h2,

html[dir="rtl"]
.alaq-purpose-copy h2,

html[dir="rtl"]
.alaq-founder-intro h2,

html[dir="rtl"]
.alaq-values-heading h2,

html[dir="rtl"]
.alaq-size-cta h2,

html[dir="rtl"]
.alaq-about-final h2 {
    font-family:
        "Cairo",
        Arial,
        sans-serif;

    letter-spacing:
        0;

    line-height:
        1.35;
}


html[dir="rtl"]
.alaq-about-eyebrow {
    font-family:
        "Cairo",
        Arial,
        sans-serif;

    letter-spacing:
        0;
}


html[dir="rtl"]
.alaq-meaning-copy blockquote {
    padding-left:
        0;

    padding-right:
        25px;

    border-left:
        0;

    border-right:
        2px solid
        #0a4944;
}


html[dir="rtl"]
.alaq-about-hero-content {
    margin-left:
        0;

    margin-right:
        50%;
}


@media (
    max-width: 650px
) {

    html[dir="rtl"]
    .alaq-about-hero-content {
        margin-right:
            0;
    }

}

/* =========================================================
   PURPOSE IMAGE
========================================================= */

.alaq-purpose-image {
    position: relative;

    min-height: 680px;

    overflow: hidden;

    background: #ffffff;
}


/* IMAGE */

.alaq-purpose-image img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    display: block;
}


/* SOFT WHITE + GREEN OVERLAY */

.alaq-purpose-image::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.16),
            rgba(255, 255, 255, 0.16)
        ),
        rgba(8, 67, 61, 0.10);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .alaq-purpose-image {
        min-height: 250px;
    }


    .alaq-purpose-image::after {
        background:
            linear-gradient(
                rgba(255, 255, 255, 0.20),
                rgba(255, 255, 255, 0.20)
            ),
            rgba(8, 67, 61, 0.09);
    }

}

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

.alaq-about-final {
    padding: 95px 22px;

    text-align: center;

    background: #f1eee5;

    border-top: 1px solid #dce1dd;
}


.alaq-about-final
.alaq-about-eyebrow {
    color: #7b8d87;
}


.alaq-about-final h2 {
    margin: 0 auto 15px;

    color: #073c38;

    font-size: clamp(
        42px,
        5vw,
        62px
    );

    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -1.9px;
}


.alaq-about-final p {
    max-width: 520px;

    margin: 0 auto 28px;

    color: #6c7c77;

    font-size: 12px;

    line-height: 1.8;
}


.alaq-final-button {
    min-width: 160px;
    min-height: 48px;

    padding: 0 24px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    background: #0a4944;

    color: #ffffff;

    border: 1px solid #0a4944;

    font-size: 10px;
    font-weight: 600;

    text-decoration: none;

    transition:
        background 0.25s ease,
        color 0.25s ease;
}


.alaq-final-button:hover {
    background: transparent;

    color: #0a4944;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .alaq-about-final {
        padding: 65px 20px;
    }


    .alaq-about-final h2 {
        font-size: 39px;
    }

    h1,h2 {
        font-size: 24px !important;
    }

}

@media (max-width: 650px) {
    .alaq-meaning-word img {
display: none !important;    }
}


@media (max-width: 650px) {
    .alaq-meaning-word {
display: none !important;    }

}