:root {
    --primary-color: #40C1F0;
    --secondary-color: #03597B;
    --cairo-font: "Cairo", serif;
    --tajawal-font: 'Tajawal', sans-serif;
    --neo-font: 'Neo Sans Arabic', sans-serif;
    --ibm-font: 'IBM Plex Sans Arabic', sans-serif;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: var(--cairo-font);
}
html {
    scroll-behavior: smooth;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
a {
    color: unset;
    text-decoration: none;
}
@media (min-width: 1400px) {
    .container {
        max-width: 90.62%;
    }
}
nav {
    .container {
        .navbar-brand img {
            height: calc((2.34 * 100vw) / 100);
        }
        .navbar-nav .nav-item {
            &:not(:first-of-type, .nav-button) {
                margin-inline-start: calc((1.03 * 100vw) / 100);
            }
            &:not(.nav-button) {
                position: relative;
                overflow-y: hidden;
                > img {
                    top: 65%;
                    left: 50%;
                    opacity: 0;
                    position: absolute;
                    transform: translateX(-50%);
                    width: calc((1.04 * 100vw) / 100);
                    transition: opacity .3s ease-in-out;
                }
                &:hover {
                    .nav-link {
                        font-weight: 700;
                    }
                    /* > img {
                        opacity: 1;
                    } */
                }
            }
            .nav-link {
                display: flex;
                cursor: pointer;
                font-weight: 500;
                text-align: center;
                align-items: center;
                justify-content: center;
                color: var(--secondary-color);
                padding-inline: unset !important;
                height: calc((5.7 * 100vw) / 100);
                min-width: calc((6.8 * 100vw) / 100);
                font-size: calc((.93 * 100vw) / 100);
                transition: font-weight .3s ease-in-out;
                img {
                    margin-inline-end: calc((.54 * 100vw) / 100);
                }
            }
            .btn {
                display: flex;
                text-align: center;
                align-items: center;
                justify-content: center;
                &.btn-lang {
                    border: unset;
                    padding: unset;
                    font-weight: 700;
                    color: var(--secondary-color);
                    font-size: calc((1.01 * 100vw) / 100);
                    margin-inline-end: calc((1.95 * 100vw) / 100);
                    img {
                        width: calc((1.61 * 100vw) / 100);
                        height: calc((1.04 * 100vw) / 100);
                        border-radius: calc((.3 * 100vw) / 100);
                        margin-inline-end: calc((.5 * 100vw) / 100);
                    }
                }
                &.btn-contact {
                    color: #FFF;
                    overflow: hidden;
                    position: relative;
                    background-color: var(--primary-color);
                    border-radius: calc((.52 * 100vw) / 100);
                    padding: calc((.42 * 100vw) / 100) calc((2.92 * 100vw) / 100);
                    span {
                        z-index: 1;
                        font-weight: 700;
                        position: relative;
                        font-size: calc((.83 * 100vw) / 100);
                    }
                    &::after {
                        content: "";
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        transform: translateX(110%);
                        border-radius: calc((.52 * 100vw) / 100);
                        background-color: var(--secondary-color);
                    }
                    &:hover::after {
                        animation: left-right-translate 2.3s ease-in-out forwards;
                    }
                }
            }
        }
    }
    @media screen and (max-width: 991px) {
        & {
            background-color: #FFF;
            box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
            .container {
                .navbar-brand {
                    padding-block: 12px;
                    img {
                        height: 34px;
                    }
                }
                .navbar-nav .nav-item {
                    &:not(:first-of-type, .nav-button) {
                        margin-top: 12px;
                        margin-inline-start: unset;
                    }
                    &:not(.nav-button) {
                        > img {
                            display: none;
                        }
                        &:hover .nav-link {
                            font-weight: unset;
                        }
                    }
                    .nav-link {
                        height: unset;
                        padding: unset;
                        font-size: 14px;
                        min-width: unset;
                        img {
                            margin-inline-end: 8px;
                        }
                    }
                    .btn.btn-lang {
                        font-size: 14px;
                        margin-inline-end: unset;
                        img {
                            width: 24px;
                            height: 16px;
                            border-radius: 3px;
                            margin-inline-end: 8px;
                        }
                    }
                }
            }
        }
    }
}
footer {
    color: #FFF;
    background-color: var(--secondary-color);
    .container {
        > div {
            padding-block: calc((10.4 * 100vw) / 100) calc((3.91 * 100vw) / 100);
            > ul > li {
                &:first-of-type,
                &:nth-of-type(2) {
                    margin-inline-end: calc((4.2 * 100vw) / 100);
                }
                &:first-of-type > img {
                    width: calc((4.8 * 100vw) / 100);
                }
                &:nth-of-type(2) {
                    font-family: var(--tajawal-font);
                    min-width: calc((25.1 * 100vw) / 100);
                    li:not(:first-of-type) {
                        margin-top: calc((.42 * 100vw) / 100);
                    }
                    a {
                        font-weight: 400;
                    }
                }
                &:nth-of-type(3) {
                    min-width: calc((25.1 * 100vw) / 100);
                    p {
                        font-family: var(--tajawal-font);
                    }
                    .info {
                        margin-top: calc((.42 * 100vw) / 100);
                        font-family: var(--ibm-font);
                        li:not(:first-of-type) {
                            margin-inline-start: calc((3.02 * 100vw) / 100);
                        }
                    }
                }
                h5 {
                    font-weight: 500;
                    font-family: var(--ibm-font);
                    font-size: calc((.83 * 100vw) / 100);
                    margin-bottom: calc((.42 * 100vw) / 100);
                    padding-bottom: calc((.42 * 100vw) / 100);
                    border-bottom: 1px solid rgba(210, 214, 219, 0.10);
                }
                h6 {
                    font-weight: 700;
                    font-size: calc((.73 * 100vw) / 100);
                    margin-bottom: calc((.42 * 100vw) / 100);
                }
                p,
                a {
                    font-weight: 300;
                    margin-bottom: unset;
                    font-size: calc((.73 * 100vw) / 100);
                }
            }
            .follow-us {
                margin-inline-start: calc((10 * 100vw) / 100);
                h4 {
                    text-wrap: nowrap;
                    font-weight: 500;
                    font-size: calc((1.25 * 100vw) / 100);
                    margin-bottom: calc((1.51 * 100vw) / 100);
                    font-family: var(--neo-font);
                    span {
                        color: var(--primary-color);
                    }
                }
                a img {
                    width: calc((1.61 * 100vw) / 100);
                }
            }
        }
        > p {
            font-weight: 200;
            text-align: center;
            margin-bottom: unset;
            font-family: var(--tajawal-font);
            font-size: calc((.94 * 100vw) / 100);
            padding-block: calc((1.5 * 100vw) / 100);
            border-top: 1px solid rgba(210, 214, 219, 0.10);
        }
    }
    @media screen and (max-width: 991px) {
        & .container {
            > div {
                padding-block: 48px 24px;
                > ul {
                    display: block !important;
                    > li {
                        &:first-of-type,
                        &:nth-of-type(2) {
                            margin-inline-end: unset;
                        }
                        &:first-of-type {
                            margin-bottom: 20px;
                            > img {
                                width: 90px;
                            }
                            div {
                                margin-top: 16px;
                            }
                        }
                        &:nth-of-type(2) {
                            min-width: unset;
                            margin-bottom: 20px;
                            li:not(:first-of-type) {
                                margin-top: 16px;
                            }
                        }
                        &:nth-of-type(3) {
                            min-width: unset;
                            .info {
                                margin-top: 16px;
                                li:not(:first-of-type) {
                                    margin-top: 16px;
                                    margin-inline-start: unset;
                                }
                            }
                        }
                        h5 {
                            font-size: 16px;
                            margin-bottom: 8px;
                            padding-bottom: 8px;
                        }
                        h6 {
                            font-size: 14px;
                            margin-bottom: 8px;
                        }
                        p,
                        a {
                            font-size: 14px;
                        }
                    }
                    .follow-us {
                        margin-inline-start: unset;
                        h4 {
                            font-size: 16px;
                            font-weight: 500;
                            margin-bottom: 16px;
                        }
                        a img {
                            width: 20px;
                        }
                    }
                }
            }
            > p {
                font-size: 13px;
                padding-block: 12px;
            }
        }
    }
}
::placeholder {
    color: #6C737F;
}
@keyframes left-right-translate {
    0% {
        transform: translateX(110%);
    }
    20% {
        transform: translateX(-25%);
    }
    40% {
        transform: translateX(10%);
    }
    60% {
        transform: translateX(-5%);
    }
    80% {
        transform: translateX(5%);
    }
    100% {
        transform: translateX(0%);
    }
}