* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/SourceSansPro-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/SourceSansPro-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/SourceSansPro-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

/* Constants */

:root {
    --body-color: white;
    --brand-color: #F77944;
    --dark-color: #1B2129;
    --text-darkgrey-color: #252732;
    --text-lightgrey-color: #65656B;
    --text-lightgrey-journey-color: #6A6A6A;
    --text-lightgrey-color-footer: #BCBCBC;
}

/* Margin Bottom Utility Classes */

.m-0 {
    margin: 0;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.mb-15 {
    margin-bottom: 15px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mb-30 {
    margin-bottom: 30px !important;
}

.mb-40 {
    margin-bottom: 40px !important;
}

.mb-50 {
    margin-bottom: 50px !important;
}

/* Margin Top Utility Classes */
.mt-10 {
    margin-top: 10px !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.mt-30 {
    margin-top: 30px !important;
}

.mt-40 {
    margin-top: 40px !important;
}

.mt-50 {
    margin-top: 50px !important;
}

/* Margin Right Utility Classes */
.mr-10 {
    margin-right: 10px !important;
}

.mr-15 {
    margin-right: 15px !important;
}

.mr-20 {
    margin-right: 20px !important;
}

.mr-30 {
    margin-right: 30px !important;
}

.mr-40 {
    margin-right: 40px !important;
}

.mr-50 {
    margin-right: 50px !important;
}

/* Margin Left Utility Classes */
.ml-10 {
    margin-left: 10px !important;
}

.ml-15 {
    margin-left: 15px !important;
}

.ml-20 {
    margin-left: 20px !important;
}

.ml-30 {
    margin-left: 30px !important;
}

.ml-40 {
    margin-left: 40px !important;
}

.ml-50 {
    margin-left: 50px !important;
}

.gradient-text {
    background: var(--linear, linear-gradient(253deg, #ADE8F4 -18.68%, #0077B6 53.04%, #03045E 127.69%)); /* Adjust colors as needed */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    font-weight: 700;
}

/* Containers */

body {
    font-family: 'Source Sans Pro', sans-serif;
    background-color: var(--body-color);
    margin: 0;
    padding: 0;
}

.container {
    /* margin:  20px 20px ; */
    /* margin: 20px calc(20px + (200 - 20) * ((100vw - 320px) / (3840 - 320))); */

    padding: 0;
}

section {
    /* margin:  20px clamp(1rem, 0.7rem + 1.281vw, 2.75rem) ;  */
    /* margin: 20px clamp(0.5rem, 1rem + 2vw, 4rem); */
    margin: 20px clamp(2.5rem, -6rem + 16vw, 26rem);
    /* margin: 0; */
    margin-bottom: 30px;
    padding: 0;
}

footer {
    /* margin:  0px 20px 0px 20px; */
    margin: 20px clamp(2.5rem, -6rem + 16vw, 26rem) 0px clamp(2.5rem, -6rem + 16vw, 26rem);
    padding: 0;
}

p {
    padding: 0;
    margin: 0;
}

/* 2560 */

/* @media screen and (max-width: 1440px) {
    section{
        margin:  20px 200px ;
    }

    footer {
        margin:  0px 20px 0px 20px;
    }
}

@media screen and (max-width: 1024px) {
    section{
        margin:  20px 20px ;
    }

    footer {
        margin:  0px 20px 0px 20px;
    }
} */

/* 480px */

@media screen and (max-width: 768px) {
    section {
        margin: 20px 20px;
    }

    footer {
        margin: 0px 0px 0px 0px;
        padding: 0;
    }
}

/* Fonts */

.capitalize {
    text-transform: capitalize;
}

.navbar-section .right-section {
    /* font-size: 16px; */
    font-size: clamp(16px, 1vw, 32px);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    /* color: var(--text-darkgrey-color); */
}

.navbar-section .left-section {
    /* font-size: 14px; */
    font-size: clamp(12px, 1vw, 24px);
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.banner1 .banner-left-side > * {
    margin: 0px;
}

.banner1 h1 {
    color: var(--Dark, #252732);
    /* font-size: 40px; */
    font-size: 4vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

    .banner1 h1:lang(ar) {
        font-weight: 600;
    }

.banner1 .brand-text {
    color: var(--brand-color);
    font-weight: 700;
}

.banner1 h4 {
    color: #565656;
    /* font-size: 16px; */
    font-size: 1.5vw;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.banner1 .banner-text {
    margin: 20px 0px;
    color: var(--Dark, #252732);
    /* font-size: 16px; */
    font-size: 1.5vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.banner1 .banner-download-app {
    color: var(--Dark, #565656);
    /* font-size: 14px; */
    font-size: 1.5vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 20px;
}

.apple-store-btn .fa-apple {
    font-size: 3vw;
    margin-right: 15px;
}

    .apple-store-btn .fa-apple:lang(ar) {
        margin-right: 0;
        margin-left: 15px;
    }

.apple-store-btn .fa-google-play {
    font-size: 3vw;
    margin-right: 15px;
}

    .apple-store-btn .fa-google-play:lang(ar) {
        margin-right: 0;
        margin-left: 15px;
    }

.download-text {
    font-size: .8vw;
    font-weight: 300;
}

.store-text {
    /* font-size: 14px; */
    font-size: 1.5vw;
    /* font-weight: bold; */
    margin-top: 1px;
}

@media screen and (max-width: 480px) {
    .banner1 h1 {
        font-size: 8vw;
    }

    .banner1 h4 {
        font-size: 3vw;
    }

    .banner1 .banner-text {
        font-size: 3vw;
    }

    .banner1 .banner-download-app {
        font-size: 3vw;
    }

    .apple-store-btn .fa-apple {
        font-size: 8vw;
        margin-right: 15px;
    }

    .apple-store-btn .fa-google-play {
        font-size: 6vw;
        margin-right: 15px;
    }

    .download-text {
        font-size: 2vw;
    }

    .store-text {
        font-size: 3vw;
        margin-top: 1px;
    }
}

.brand-text-privacy {
    color: var(--brand-color);
    font-weight: 600;
    letter-spacing: 8px;
    margin-bottom: 10px;
}

.brand-text-terms {
    color: var(--brand-color);
    font-weight: 600;
    letter-spacing: 8px;
    margin-bottom: 10px;
}

.brand-color {
    color: var(--brand-color);
}

.journey-section .brand-text {
    color: var(--brand-color);
    font-weight: 600;
    letter-spacing: 8px;
    margin-bottom: 10px;
}

    .journey-section .brand-text:lang(ar) {
        letter-spacing: 0px;
        font-size: clamp(12px, 1.4vw, 24px);
    }

.journey-section h4 {
    margin: 0;
    padding: 0;
    /* font-size: 18px; */
    font-size: clamp(18px, 1vw, 26px);
    color: var(--dark-color);
    /*color: red;*/
}

.journey-section h3 {
    margin: 0;
    padding: 0;
    /* font-size: 25px; */
    font-size: clamp(24px, 1vw, 40px);
    color: var(--dark-color);
}

.journey-section p {
    color: var(--text-lightgrey-journey-color);
    line-height: 145%;
    margin: 0;
    padding: 0;
    /* font-size: 14px; */
    font-size: clamp(12px, 1vw, 24px);
}

.features-section h5 {
    margin: 0;
    color: var(--text-darkgrey-color);
    font-size: 16px;
    font-size: clamp(16px, 1vw, 34px);
    font-weight: 600;
}

.features-section p {
    margin: 0;
    /* margin-bottom: 10px;
    margin-top: 10px; */
    color: var(--text-darkgrey-color);
    /* font-size: 14px; */
    font-size: clamp(12px, 1vw, 24px);
    font-weight: 400;
    opacity: 0.5;
}

    .features-section p:lang(ar) {
        text-align: justify;
    }

h3 {
}

h4 {
}

h5 {
}

.footer-bottom p {
    color: var(--text-lightgrey-journey-color);
    font-family: Source Sans Pro;
    /* font-size: 20px; */
    font-size: clamp(11px, 1.2vw, 28px);
    font-style: normal;
    font-weight: 400;
    text-transform: capitalize;
    margin: 0;
    padding: 0;
}

    .footer-bottom p span {
        color: var(--brand-color);
        font-weight: 600;
    }

    .footer-bottom p .atit-link {
        color: var(--Gray, #0077B6);
        text-decoration-line: underline;
    }

    .footer-bottom p .privacy-link {
        color: var(--text-lightgrey-journey-color);
        text-decoration-line: underline;
    }

/* Colors */

/* COMPONENETS*/

/* Menu */
.navbar-section {
    /* background-color: red; */
    /* position: relative; */
    /* height: 50px;
    z-index: 10;
    overflow: visible; */
    position: relative;
}

.navbar {
    /* position: absolute; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: visible;
}

.left-section,
.right-section {
    display: flex;
    align-items: center;
}

.logo-img {
    max-height: 50px;
    margin-right: 20px;
    margin-bottom: 0px;
}

    .logo-img:lang(ar) {
        margin-right: unset;
        margin-left: 20px;
    }

@media screen and (max-width: 480px) {
    .logo-img {
        max-height: 50px;
    }
}

.divider {
    width: .5px;
    height: 20px;
    background-color: var(--text-lightgrey-color);
    margin-right: 10px;
}

.language {
    font-size: clamp(12px, 1vw, 24px);
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text-lightgrey-color);
    transition: color 0.3s;
    font-weight: 300;
    margin: 00px 0px;
}

    .language > img {
        width: 15px;
    }

    .language > svg {
        width: clamp(16px, 1vw, 22px);
        height: clamp(16px, 1vw, 22px);
    }

    .language:hover {
        color: var(--brand-color);
    }

.nav-link {
    text-decoration: none;
    margin-right: 20px;
    color: var(--text-darkgrey-color);
    transition: color 0.3s;
}

    .nav-link:lang(ar) {
        margin-right: 0px;
        margin-left: 20px;
    }

    .nav-link:hover {
        color: var(--brand-color);
    }

.login-btn {
    background-color: var(--brand-color);
    color: #fff;
    border: none;
    padding: 10px 30px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration: none;
}

/* .login-btn:hover {
    background-color: #fff;
    color: var(--brand-color);
    border: 2px solid var(--brand-color);
} */

.show-mobile-flex {
    display: none !important;
}

.show-mobile-block {
    display: none !important;
    width: 100px;
}

.show-desktop-block {
    display: block !important;
}

.show-desktop-flex {
    display: flex !important;
}

@media screen and (max-width: 480px) {
    .navbar {
        flex-direction: column;
        align-items: start;
        gap: 10px;
        /* background-color: #65656B; */
        max-height: 50px;
        overflow: hidden;
        transition: max-height 0.5s ease-out;
    }

        .navbar.active {
            /* background-color: red; */
            max-height: 450px;
        }

    .left-section,
    .right-section {
        flex-direction: column;
        align-items: start;
        gap: 25px;
    }

    .show-mobile-flex {
        display: flex !important;
    }

    .show-mobile-block {
        display: block !important;
        width: 100px;
    }

    .show-desktop-block {
        display: none !important;
    }

    .show-desktop-flex {
        display: none !important;
    }

    .burger-btn {
        display: block;
    }

    .right-section.active {
        display: flex;
        /* animation: slideIn 0.5s forwards; */
        flex-direction: column;
    }

    @keyframes slideIn {
        from {
            transform: translateY(-100%);
        }

        to {
            transform: translateY(0);
        }
    }

    .burger-btn {
        background: none;
        border: none;
        font-size: 24px;
        display: none;
        cursor: pointer;
        position: absolute;
        top: 33px;
        right: 15px;
    }

    #nav-icon3 {
        width: 25px;
        height: 25px;
        /* position: relative; */
        /* margin: 50px auto; */
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        cursor: pointer;
        position: absolute;
        /* top: 33px;
        right: 20px; */
        top: 18px;
        right: 0;
    }

        #nav-icon3:lang(ar) {
            right: unset;
            left: 0;
        }

        #nav-icon3 span {
            display: block;
            position: absolute;
            height: 3.5px;
            width: 100%;
            background: var(--brand-color);
            border-radius: 9px;
            opacity: 1;
            left: 0;
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transition: .25s ease-in-out;
            -moz-transition: .25s ease-in-out;
            -o-transition: .25s ease-in-out;
            transition: .25s ease-in-out;
        }

            #nav-icon3 span:nth-child(1) {
                top: 0px;
            }

            #nav-icon3 span:nth-child(2), #nav-icon3 span:nth-child(3) {
                top: 8px;
            }

            #nav-icon3 span:nth-child(4) {
                top: 16px;
            }

        #nav-icon3.open span:nth-child(1) {
            top: 18px;
            width: 0%;
            left: 50%;
        }

        #nav-icon3.open span:nth-child(2) {
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        #nav-icon3.open span:nth-child(3) {
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        #nav-icon3.open span:nth-child(4) {
            top: 18px;
            width: 0%;
            left: 50%;
        }

    .right-section {
        text-align: center;
        width: 100%;
    }

    .nav-link {
        margin-right: unset;
    }

    .login-btn {
        width: 100%;
        padding: 20px 30px;
    }

    .language {
        margin: 20px 0px;
    }

    .logo-img {
        margin-bottom: 10px;
    }
}

.navbar-background-logo {
    width: 100%;
    position: absolute;
    z-index: -1;
    top: 70px;
    right: -20px;
}

/* Banner */

.banner1 {
    background-color: #EFF3F9;
    width: auto;
    height: 40vw;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.banner-weight {
    position: absolute;
    left: -250px;
    top: -150px;
    width: 400px;
    opacity: .1;
}

.banner-background-logo {
    width: 15%;
    position: absolute;
    left: 45%;
    top: 20%;
    opacity: 1;
}

.banner-content {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 30px;
    height: 100%;
}

.banner-left-side, .banner-right-side {
    display: flex;
    justify-content: center;
    flex: 1;
}

.banner1-alt .banner-left-side {
    order: 1;
}

.banner1-alt .banner-right-side {
    order: 0;
}

.banner-content > .banner-left-side {
    flex: 8;
    width: 100%;
    height: 100%;
    justify-content: center;
}

.banner-content > .banner-right-side {
    flex: 7;
    width: 100%;
}

.banner-right-side .img1 {
    position: absolute;
    height: 70%;
    bottom: 0;
    right: -80px;
}

.banner-right-side .img2 {
    position: absolute;
    height: 80%;
    bottom: 0;
    right: 0px;
}

.banner-right-side .img3 {
    position: absolute;
    height: 95%;
    bottom: 0px;
    right: clamp(1.875rem, 1.982rem + 2.381vw, 3.125rem);
}

.banner-right-side .img1:lang(ar) {
    right: unset;
    left: clamp(5.875rem, 1.982rem + 2.381vw, 3.125rem);
}

.banner-right-side .img2:lang(ar) {
    right: unset;
    left: 40px;
}

.banner-right-side .img3:lang(ar) {
    right: unset;
    left: 0px;
}

.banner-right-side .img1-alt {
    position: absolute;
    height: 70%;
    bottom: 0;
    left: clamp(3.875rem, 1.982rem + 2.381vw, 3.125rem);
}

.banner-right-side .img2-alt {
    position: absolute;
    height: 80%;
    bottom: 0;
    left: 30px;
}

.banner-right-side .img3-alt {
    position: absolute;
    height: 95%;
    bottom: 0px;
    left: 0px;
}

.banner-right-side .img1-alt:lang(ar) {
    left: unset;
    right: -60px;
}

.banner-right-side .img2-alt:lang(ar) {
    left: unset;
    right: 0px;
}

.banner-right-side .img3-alt:lang(ar) {
    left: unset;
    right: clamp(2.875rem, 1.982rem + 2.381vw, 3.125rem);
}

.banner1 .banner-left-side {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

/* Black App Button */

.banner-app-buttons {
    display: flex;
    gap: 10px;
}

.apple-store-btn {
    display: inline-flex;
    align-items: center;
    background-color: #000;
    color: #fff;
    padding: 1vw 1.7vw 1vw 2vw;
    border-radius: 5px;
    /* font-family: 'Arial', sans-serif;  */
    text-decoration: none;
    transition: background-color 0.3s ease;
    position: relative;
    min-width: 162px;
}

    .apple-store-btn:hover {
        background-color: #333;
    }

.text-content {
    display: flex;
    flex-direction: column;
}

.banner {
    width: 100%;
}

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

@media screen and (max-width: 480px) {
    .banner1 {
        height: auto;
    }

    .banner-content {
        flex-direction: column;
        height: unset;
    }

        .banner-content .banner-left-side {
            order: 1;
            flex: unset;
        }

        .banner-content .banner-right-side {
            order: 0;
            flex: unset;
            height: 50vw;
        }

    /* Black App Button */

    .banner-app-buttons {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
        justify-items: center;
        gap: 10px;
    }

    .apple-store-btn {
        padding: 10px 20px;
        border-radius: 5px;
    }

    .banner-right-side .img3:lang(ar) {
        left: 40%;
        top: 15px;
    }

    .banner-right-side .img3 {
        /* position:relative; */
        height: unset;
        width: 50%;
        height: auto;
        bottom: unset;
        right: unset;
        top: 15px;
        left: 40%;
        transform: translate(-40%, 0%);
        transform: rotate(15deg);
    }

    .banner-right-side .img4 {
        position: absolute;
        height: unset;
        width: 50%;
        height: auto;
        bottom: unset;
        right: unset;
        top: 10px;
        left: 20%;
        transform: translate(-20%, 0%);
        transform: rotate(-15deg);
    }
}

/* Journey Section */

.journey-section {
    display: flex;
}

    .journey-section > div {
        /* flex: 1; */
        /* height: 100px; */
        /* width: 100%; */
        /* border: 1px solid red; */
    }

.journey-left-section {
    flex: 8;
}

.journey-right-section {
    flex: 6;
}

@media screen and (max-width: 1024px) {
    .journey-left-section {
        flex: 8;
    }

    .journey-right-section {
        flex: 5;
    }
}

@media screen and (max-width: 768px) {
    .journey-section {
        flex-direction: column;
    }
}

/* left section */

.section-left-section {
    display: flex;
    flex-direction: column;
    margin-bottom: 0px;
}

.journey-section h3 {
    margin-bottom: 20px;
}

.journey-card {
    background-color: #EFF3F9;
    border-radius: 10px;
    display: flex;
    padding: 20px;
    gap: 20px;
    width: 85%;
}

    .journey-card > .journey-card-text-container {
        /* flex:2; */
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .journey-card > img {
        width: 30%;
        border-radius: 10px;
        object-fit: cover;
    }

.journey-right-section {
    position: relative;
}

.grey-circle {
    position: absolute;
    /* top: 50%; */
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: -1;
    width: 100%;
    height: auto;
}

.journey-orange-image-container {
    position: absolute;
    /* top: 59%; */
    left: 50%;
    transform: translate(-50%, 0%);
    width: 65%;
    overflow: hidden;
}

.journey-orange-image {
    display: block;
    width: 100%;
    height: auto;
}

.journey-button {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background-color: white;
    color: #2F2F2F;
    border: none;
    border-radius: 6px;
    padding: 12px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 14px;
    font-weight: 600;
}

    .journey-button:hover {
        background-color: #f5f5f5;
    }

@media screen and (max-width: 1440px) {
    .grey-circle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
        width: 100%;
        height: auto;
    }

    .journey-orange-image-container {
        position: absolute;
        top: 59%;
        left: 50%;
        transform: translate(-50%, -59%);
        width: 65%;
        overflow: hidden;
    }
}

@media screen and (max-width: 768px) {
    .journey-left-section {
        margin-bottom: 50px;
    }

    .journey-card {
        width: unset;
    }

    .grey-circle {
        top: 0;
        left: 50%;
        transform: translate(-50%, 0%);
        width: auto;
        height: 100%;
    }

    .journey-orange-image-container {
        /* display: block; */
        position: relative;
        top: 0;
        /* left: 50%; */
        transform: translate(-50%, 0%);
        width: 65%;
        overflow: hidden;
    }

        .journey-orange-image-container:lang(ar) {
            left: unset;
            right: 50%;
            transform: translate(50%, 0%);
        }

    /*.journey-orange-image-container:lang(ar) {
            left: unset;
            right: 50%;
            transform: translate(50%, 0%);
        }*/
}

/* Review */
/* Features Section */

.features-section {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 30px;
    /* background-color: #161b21; */
    /* height: 300px; */
}

    .features-section > :nth-child(1) {
        order: 1;
        width: 33%;
        /* background-color: red; */
        /* width: 100px;
    height: 100px; */
    }

    .features-section > :nth-child(2) {
        order: 0;
        text-align: right;
        width: 33%;
        /* background-color: blue;
    width: 100px;
    height: 100px; */
    }

    .features-section > :nth-child(3) {
        order: 2;
        width: 33%;
    }

.features-section-image-container {
    position: relative;
}

.features-section-image {
    /* width: 100px; */
    /* height: %; */
    width: 100%;
    object-fit: scale-down;
}

.features-section-background-text {
    position: absolute;
    left: -40px;
    top: -10px;
    height: 50%;
    z-index: -1;
}

.features-section-background-logo {
    position: absolute;
    right: -200px;
    bottom: -150px;
    height: 80%;
    z-index: -1;
}

.features-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    margin: 20px 0px;
}

@media screen and (max-width: 768px) {
    .features-section {
        flex-direction: column;
        align-items: center;
        /* gap: 50px; */
    }

    .features-section-title {
        margin: 40px 0px;
    }

    .features-section > :nth-child(1) {
        order: 0;
        width: 50%;
    }

    .features-section > :nth-child(2) {
        order: 2;
        width: 100%;
        text-align: unset;
    }

    .features-section > :nth-child(2) {
    }

    .features-section > :nth-child(3) {
        order: 1;
        width: 100%;
    }

    .features-section-image {
        width: 100%;
        /* height: unset; */
    }

    .features-section-background-text {
        display: none;
    }

    .features-section-background-logo {
        right: unset;
        left: -350px;
        bottom: -850px;
        height: 80%;
    }

        .features-section-background-logo:lang(ar) {
            right: -350px;
            left: unset;
        }
}

/* Testimonials */
/* Footer */

/* insta promo */
.promo {
    position: relative;
}

    .promo img {
        width: 100%;
    }

.follow-us {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    text-align: center;
    color: #fff;
}

    .follow-us a {
        color: #fff;
    }

/* footer main */

.footer-grid {
    align-items: flex-start;
    display: grid;
    gap: 4.5rem;
    grid-auto-columns: 1fr;
    grid-template-areas:
        "area1"
        "area2"
        "area3";
    width: unset;
    margin-inline: auto;
    padding: 60px 30px 60px 30px;
    background-color: #1C2229;
    color: var(--text-lightgrey-color-footer);
}

    .footer-grid > :nth-child(1) {
        grid-area: area1;
    }

    .footer-grid > :nth-child(2) {
        grid-area: area2;
    }

    .footer-grid > :nth-child(3) {
        grid-area: area3;
    }
/* 480px */
@media screen and (min-width: 768px) {
    .footer-grid {
        align-items: flex-start;
        margin-inline: unset;
        grid-template-areas:
            "area1 area1 area2 area3 area3";
        padding: 60px 30px 20px 60px;
    }

        .footer-grid:lang(ar) {
            padding: 60px 60px 20px 30px;
        }
}

footer h3 {
    color: white;
}

footer ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

    footer ul li {
        margin-bottom: 10px;
    }

.footer-grid a {
    text-decoration: none;
    color: var(--text-lightgrey-color-footer);
}

.brand-info img {
    max-width: 100px;
}

.brand-info > p {
    padding: 0px 0px;
    margin: 20px 0px;
}

.contact-info {
    border: 1px solid #485059;
    background-color: #242A32;
    padding: 20px;
    margin-top: 10px;
}

    .contact-info strong {
        color: var(--brand-color);
        font-weight: 700;
    }

.app-buttons {
    display: flex;
    /* width: 100%; */
    /* max-width: 1000px; */
    margin: 0 auto;
    margin: 30px 0px;
}

.app-button {
    flex: 1;
    /* flex-wrap: wrap;
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 100px; */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 10px;
    border-radius: 5px; /* Gives the rounded corners */
    background-color: #fff;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
    /* max-width: 20px;
    min-width: 110px; */
    text-align: center;
    margin-right: 10px;
    font-size: calc(2px + 1vw);
    font-style: normal;
    font-weight: 400;
}

    .app-button:lang(ar) {
        margin-right: unset;
        margin-left: 10px;
    }

    .app-button span, .app-button i {
        color: var(--text-darkgrey-color);
    }

    .app-button:hover {
        background-color: #f5f5f5; /* Slight background change on hover */
    }

    .app-button span {
        margin-right: 15px;
    }

        .app-button span:lang(ar) {
            margin-right: unset;
            margin-left: 15px;
        }

    .app-button i {
        font-size: 20px;
    }

@media screen and (max-width: 768px) {
    .app-buttons {
        display: block;
    }

    .app-button {
        font-size: 14px;
        margin-top: 10px;
        max-width: 20px;
        min-width: 170px;
    }
}

.footer-social i {
    color: white;
    margin-right: 10px;
}

/* to top */
.footer-end {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 30px 0;
}

.line {
    flex-grow: 1;
    height: 1px;
    background-color: #485059;
}

.circle {
    width: 57px;
    height: 57px;
    border-radius: 50%;
    border: 1px solid #485059;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 20px;
    position: relative;
    z-index: 1;
    text-decoration: none;
}

    .circle:hover {
        background-color: #161b21;
    }

    .circle i {
        color: white;
        font-size: 18px;
    }

.footer-bottom {
    display: flex;
    justify-content: center;
    margin: 15px 0px;
    text-align: center;
}

.page-not-found {
    text-align: center;
    margin: 100px 0px;
}