/* ------------------------- Scaling System by Osmo [https://osmo.supply/] -------------------------  */
/* Desktop */
:root {
    --size-unit: 14;
    /* body font-size in design - no px */
    --size-container-ideal: 1440;
    /* screen-size in design - no px */
    --size-container-min: 991px;
    --size-container-max: 1920px;
    --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
    --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}

/* Tablet */
@media screen and (max-width: 991px) {
    :root {
        --size-unit: 12;
        --size-container-ideal: 834;
        /* screen-size in design - no px */
        --size-container-min: 768px;
        --size-container-max: 991px;
    }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
    :root {
        --size-container-ideal: 390;
        /* screen-size in design - no px */
        --size-container-min: 480px;
        --size-container-max: 767px;
    }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
    :root {
        --size-unit: 13;
        --size-container-ideal: 440;
        /* screen-size in design - no px */
        --size-container-min: 0px;
        --size-container-max: 479px;
    }
}

/* ------------------------- CSS Begin -------------------------------------------------- */

/* ------------------------- Font Families -------------------------------------------------- */

@font-face {
    font-family: 'ar_caption';
    src: url('/assets/fonts/ar_caption.woff2') format('woff2'),
        url('/assets/fonts/ar_caption.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ar_display';
    src: url('/assets/fonts/ar_display.woff2') format('woff2'),
        url('/assets/fonts/ar_display.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ar_body';
    src: url('/assets/fonts/ar_body.woff2') format('woff2'),
        url('/assets/fonts/ar_body.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'en_display';
    src: url('/assets/fonts/en_display.woff2') format('woff2'),
        url('/assets/fonts/en_display.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


:root {
    --pd-red: #ED2224;
    --pd-black: #1A0E1A;
    --pd-iron: #DBDEE3;
    --white: #fff;
    --black-shade: rgba(177, 126, 152, 1);

    --bg-color: var(--pd-black);
    --text-color-main: var(--black-shade);
    --text-color-secondary: var(--white);
    --text-color-emphasis: var(--pd-red);
    --border-color: rgba(177, 126, 152, 0.4);

    --font-display: "en_display";
    --font-body: "Inter";
    --font-caption: "Barlow";

    --font-display-arabic: "ar_display";
    --font-body-arabic: "ar_body";
    --font-caption-arabic: "ar_caption";

    --font-size-hero: 5.85em;
    --font-size-heading: 1.71em;

    --gap-sm: 0.85em;
    --gap-md: 1.42em;
    --gap-lg: 2.85em;
    --gap-xl: 5.71em;

    --transition-curve: cubic-bezier(.17, .67, .01, .99);

}

::-moz-selection {
    color: var(--bg-color);
    background: var(--black-shade);
}

::selection {
    color: var(--bg-color);
    background: var(--black-shade);
}

* {
    padding: 0;
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    font-family: var(--font-body);
    color: var(--text-color-main);
    background-color: var(--bg-color);
    font-size: var(--size-font);

}

nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: fixed;
    background-color: var(--bg-color);
    z-index: 99;

}


section {
    position: relative;
}

.container {
    width: 91.42em;
    position: relative;
}

.nav-container {
    width: 100%;
    height: 4.28em;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px var(--border-color) solid;

}

.nav-logo {
    width: 7.15em;
}

.nav-logo img {
    width: 100%;
}

.nav-items {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.42em;
    text-transform: uppercase;
    height: 100%;
}

.nav-item {
    font-family: var(--font-caption);
    color: var(--text-color-secondary);
    text-decoration: none;
    transition: color 0.200s var(--transition-curve);
}

a.nav-item:hover {
    color: var(--text-color-main);
}

.language-switcher-ar {
    font-family: var(--font-display-arabic);
}

.button {
    padding: 0.71em;
    color: var(--bg-color);
    font-family: var(--font-caption);
    font-size: 1em;
    text-decoration: none;
    text-transform: uppercase;
    background-color: var(--text-color-main);
    border: 1px solid var(--text-color-main);
    transition: all 0.300s var(--transition-curve);
    cursor: pointer;
}

.button:hover {
    color: var(--text-color-main);
    background-color: var(--bg-color);
}

.submit-container {
    display: flex;
    align-items: end;
    justify-content: end;
}

.button.is-transparent {
    background-color: transparent;
    border: 1px solid var(--bg-color);
}

.button.is-transparent:hover {
    border: 1px solid var(--text-color-main);
}

.button.is-em {
    color: var(--text-color-main)
}

.button.is-white {
    background-color: black;
    color: white;
    border-color: black;
}

.button.is-white:hover {
    color: black;
    background-color: var(--pd-red);
}

section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    scroll-margin-top: 6em;
}

.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    /* Slide from below */
}



.hero {
    margin-top: 4.28em;
}

.hero-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.hero-top {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 5.14em 0 8.57em 0;
}

.hero-message {
    width: 52.6em;
    max-width: 52.6em;
    padding-right: 9.28em;
}

.hero-message-text {
    font-size: var(--font-size-hero);
    font-family: var(--font-display);
    line-height: 1;
    color: var(--white);
}

span.is-red {
    color: var(--text-color-emphasis)
}

.hero-cta {
    width: 21.42em;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: start;
    gap: var(--gap-md);

}

.hero-cta p {
    font-family: var(--font-display);
    color: var(--white);
    font-size: var(--font-size-heading)
}

.hero-background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 20%;
    bottom: 0;
    right: 0;
    left: 0;
    object-fit: contain;
    pointer-events: none;

}

.list-card-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
}

.list-card,
.service-card {
    width: 21.78em;
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.list-number-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 0.28em;
}

.chevron-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--bg-color);
    background-color: var(--pd-red);
    padding: 0.28em;
}

.chevron-container.is-white {
    background-color: var(--white);
}

.list-number {
    font-family: var(--font-caption);
}

.chevron-container.is-white+.list-number {
    color: var(--text-color-secondary);
}

.list-card-title {
    color: var(--text-color-secondary);
    font-family: var(--font-display);
    font-size: var(--font-size-heading);
}

.divider {
    margin-top: var(--gap-xl);
    margin-bottom: var(--gap-xl);
    border-bottom: 1px var(--border-color) solid;
}

.section-title h1 {
    color: var(--white);
    font-family: var(--font-caption);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1em;
    padding-bottom: var(--gap-lg);

}

.research-content-container {
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: start;
    gap: var(--gap-lg);
    font-family: var(--font-display);
    padding-top: var(--gap-lg);
    padding-bottom: var(--gap-lg);
}

.research-big-number {
    font-size: 17.14em;
    line-height: 0.8;
}

.research-text {
    color: var(--white);
    font-size: 2.28em;

}

.research-background {
    width: 90%;
    height: 95%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    object-fit: contain;
    pointer-events: none;

}

.process-section {
    position: relative;
}

.process-container {
    position: relative;
}

.process-content-container {
    padding-top: 10em;
    position: relative;
}

.process-background {
    width: 100%;
    height: 120%;
    position: absolute;
    top: -10%;
    bottom: 0;
    left: 0;
    right: 0;
    object-fit: contain;
    pointer-events: none;

}

.services-content-container {
    display: grid;
    grid-template-columns: repeat(3, auto);
    width: 100%;
    row-gap: var(--gap-xl);
    justify-content: space-between;

}

.list-card-content ul {
    list-style-type: none;
}

.service-cover {
    width: 100%;
    height: 12.85em;
    object-fit: cover;
}

.about-contents-container {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    gap: var(--gap-xl);

}

.about-image {
    width: 50%;
    height: 100%;
    object-fit: cover;

}

.about-text {
    width: 100%;
    color: white;
    font-family: var(--font-display);
    font-size: var(--font-size-heading);
}

.trusted-contents-container {
    display: grid;
    grid-template-columns: repeat(4, auto);
}

.is-black {
    color: var(--pd-black);
}

footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--pd-red);
    overflow: hidden;

}

.footer-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: var(--gap-xl);
}

.footer-hero-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--gap-lg)
}

.footer-hero-text {
    font-family: var(--font-display);
    font-size: var(--font-size-hero);
    color: white;
    text-align: center;
}

.divider.is-black {
    border-bottom: 1px var(--pd-black) solid;

}

.footer-divider {
    margin-bottom: var(--gap-md);
}

.contact-info-container {
    width: 100%;
    color: black;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.contact-form-pop-up {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--bg-color);
    z-index: 5;
}

.hidden {
    display: none;
}

.contact-form-container {
    width: 50em;
    display: flex;
    flex-direction: column;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.contact-form label {
    font-family: var(--font-caption);
    text-transform: uppercase;
}

.close {
    width: 100%;
    align-items: end;
    font-family: var(--font-caption);
    text-transform: uppercase;
    text-align: right;
    cursor: pointer;
}

.contact-form input,
.contact-form textarea {
    min-height: 2em;
    color: var(--white);
    background-color: transparent;
    font-family: var(--font-body);
    font-size: 1.2em;
    border: 0;
    border-bottom: 0.05em solid var(--border-color);
    margin-bottom: 2em;
    transition: all 1.2s var(--transition-curve);
}

/* Standard and Firefox */
.contact-form input::placeholder,
.contact-form textarea::placeholder,
.contact-form input::-moz-placeholder,
.contact-form textarea::-moz-placeholder {
    color: var(--black-shade);
    opacity: 0.4;
    transition: opacity 0.8s var(--transition-curve);
}

.contact-form input:focus::placeholder,
.contact-form textarea:focus::placeholder,
.contact-form input:focus::-moz-placeholder,
.contact-form textarea:focus::-moz-placeholder {
    opacity: 1;
}

/* WebKit (Chrome, Safari, Brave, Edge) */
.contact-form input::-webkit-input-placeholder,
.contact-form textarea::-webkit-input-placeholder {
    color: var(--black-shade);
    opacity: 0.4;
    transition: opacity 0.8s var(--transition-curve);
}

.contact-form input:focus::-webkit-input-placeholder,
.contact-form textarea:focus::-webkit-input-placeholder {
    opacity: 1;
}


.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-bottom: 0.05em solid var(--black-shade);
}


.digital {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: end;

}

.address,
.digital {
    font-family: var(--font-caption);
}

.digital a {
    color: var(--pd-black);
    text-decoration: none;

}

.footer-logo {
    width: 100%;
    padding-top: var(--gap-xl);
    position: relative;
}

.footer-logo img {
    width: 100%;
    margin-bottom: -3em;
}

body[dir="rtl"] {

    --font-display: var(--font-display-arabic);
    --font-body: var(--font-body-arabic);
    --font-caption: var(--font-caption-arabic);

    line-height: 1.8;

    .flip,
    .chevron-container {
        transform: scaleX(-1);
    }

    .hero-message {
        padding-right: 0;
    }

    .research-text,
    .about-text {
        line-height: 1.5;
    }

    .close {
        text-align: left;
    }

}

/* Tablet */
@media screen and (max-width: 991px) {
    section {
        max-width: 100vw;
    }

    .container {
        width: 90%;
    }

    .hero-top {
        flex-direction: column;
        align-items: start;
        gap: 5em;
    }

    .list-card-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 5em;
    }

    .services-content-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 5em;
    }

    .service-card {
        width: 100%;
    }

    .service-cover {
        height: auto;
    }

}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
    :root {
        --font-size-hero: 3.5em;
        --font-size-heading: 1.4em;
    }

    a.nav-item:not(.language-switcher-ar):not(.language-switcher-en) {
        display: none;
    }

    a.nav-item,
    .nav-items .button {
        font-size: 1.5em;
    }

    .hero-message {
        width: 100%;
        padding-right: 0;
    }

    .list-card-container {
        grid-template-columns: repeat(1, 1fr);
    }

    .process-background {
        height: 22em;
    }

    .research-content-container {
        flex-direction: column;
        align-items: start;
    }

    .research-big-number {
        font-size: 10em;
    }

    .research-background {
        height: 22em;
    }

    .contact-info-container p,
    .contact-info-container a {
        font-size: 1em;
    }

    .services-content-container {
        grid-template-columns: repeat(1, 1fr);
    }

    .about-contents-container {
        flex-direction: column;
        gap: 2.5em;
    }

    .about-image {
        width: 100%;
    }

    .contact-form input,
    .contact-form textarea {
        font-size: 1.5em;
        text-align: right;
    }

    .footer-logo img {
        margin-bottom: -1em;
    }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {}