:root {
    --primary-color: #35BDEF;
    --secondary-color: #03597C;
    --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;
}
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: 86.5%;
    }
}
nav {
    .container {
        padding-block: calc(1.25 * 100vw / 100) !important;
        .navbar-brand img {
            height: calc((3.1 * 100vw) / 100);
        }
        .navbar-nav .nav-item {
            &:not(:first-of-type, .nav-button) {
                margin-inline-start: calc((3.12 * 100vw) / 100);
            }
            .nav-link {
                color: #333;
                cursor: pointer;
                text-align: center;
                font-family: var(--neo-font);
                padding-inline: unset !important;
                border-bottom: 2px solid transparent;
                font-size: calc((1.04 * 100vw) / 100);
                padding-block: calc((.21 * 100vw) / 100);
                img {
                    width: calc((1.25 * 100vw) / 100);
                    &.un-active {
                        display: inline-block;
                    }
                    &.active {
                        display: none;
                    }
                }
                &:hover {
                    color: var(--primary-color);
                    img {
                        &.un-active {
                            display: none;
                        }
                        &.active {
                            display: inline-block;
                        }
                    }
                }
                &.active {
                    font-weight: 700;
                    color: var(--primary-color);
                    border-bottom-color: var(--primary-color);
                }
            }
            .btn {
                display: flex;
                text-align: center;
                align-items: center;
                justify-content: center;
                font-family: var(--tajawal-font);
                &.btn-contact {
                    color: #FFF;
                    font-weight: 700;
                    font-size: calc((1.04 * 100vw) / 100);
                    border-radius: calc((.52 * 100vw) / 100);
                    background-color: var(--secondary-color);
                    padding: calc((.6 * 100vw) / 100) calc((1.15 * 100vw) / 100);
                }
                &.btn-lang {
                    color: #333;
                    padding: unset;
                    font-weight: 300;
                    text-align: center;
                    border-radius: 50%;
                    border: 1px solid #D9D9D9;
                    width: calc((2.8 * 100vw) / 100);
                    height: calc((2.8 * 100vw) / 100);
                    font-size: calc((1.55 * 100vw) / 100);
                    margin-inline-start: calc((1.1 * 100vw) / 100);
                }
            }
        }
    }
    .modal-dialog:not(.contact-us) {
        max-width: calc((56.35 * 100vw) / 100);
        .modal-content {
            background-color: #FFF;
            background-repeat: no-repeat;
            font-family: var(--cairo-font);
            padding: calc((.83 * 100vw) / 100);
            margin-top: calc((4 * 100vw) / 100);
            border-radius: calc((1.04 * 100vw) / 100);
            box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.10);
            background-image: url("../media/patterns/intro-right.svg");
            background-size: calc((16.1 * 100vw) / 100) calc((16.62 * 100vw) / 100);
            background-position: calc((-5.2 * 100vw) / 100) calc((10 * 100vw) / 100);
            .solutions-header {
                padding: calc((.52 * 100vw) / 100);
                margin-bottom: calc((.52 * 100vw) / 100);
                h5 {
                    font-weight: 700;
                    color: var(--secondary-color);
                    font-size: calc((1.04 * 100vw) / 100);
                    margin-bottom: calc((.21 * 100vw) / 100);
                }
                p {
                    color: #09253D;
                    text-align: justify;
                    margin-bottom: unset;
                    font-size: calc((.73 * 100vw) / 100);
                }
            }
            ul li {
                color: #09253D;
                text-align: center;
                padding: calc((1.04 * 100vw) / 100);
                &:not(:first-of-type) {
                    margin-inline-start: calc((3.12 * 100vw) / 100);
                }
                &:first-of-type {
                    background-color: #FAFAFA;
                    border-radius: calc((.52 * 100vw) / 100);
                }
                &:first-of-type,
                &:nth-of-type(2) {
                    min-width: calc((14.6 * 100vw) / 100);
                }
                &:nth-of-type(2),
                &:last-of-type {
                    border: 1px solid transparent;
                    border-radius: calc((.52 * 100vw) / 100);
                    transition: border-color .3s ease-in-out;
                    &:hover {
                        border-color: rgba(0, 0, 0, 0.20);
                    }
                }
                h6 {
                    font-weight: 700;
                    font-size: calc((.83 * 100vw) / 100);
                    margin-bottom: calc((.5 * 100vw) / 100);
                }
                > p {
                    font-weight: 500;
                    line-height: 150%;
                    margin-bottom: unset;
                    font-size: calc((.62 * 100vw) / 100);
                }
                > img {
                    width: calc((5.3 * 100vw) / 100);
                    margin-top: calc((.52 * 100vw) / 100);
                }
                button {
                    margin-top: calc((1.9 * 100vw) / 100);
                    border-radius: calc((.3 * 100vw) / 100);
                    margin-bottom: calc((2.7 * 100vw) / 100);
                    background-color: var(--secondary-color);
                    padding: calc((.45 * 100vw) / 100) calc((.8 * 100vw) / 100);
                    img {
                        width: calc((.84 * 100vw) / 100);
                        margin-inline-end: calc((.5 * 100vw) / 100);
                    }
                    p {
                        font-weight: 700;
                        margin-bottom: unset;
                        font-family: var(--tajawal-font);
                        font-size: calc((.7 * 100vw) / 100);
                    }
                    img,
                    p {
                        z-index: 1;
                        position: relative;
                    }
                }
            }
        }
    }
    @media screen and (max-width: 991px) {
        & {
            .container {
                padding-block: 8px !important;
                .navbar-brand {
                    margin: unset;
                    img {
                        height: 36px;
                        padding: unset;
                    }
                }
                .navbar-toggler img {
                    width: 28px;
                }
                .navbar-nav .nav-item {
                    &:not(:first-of-type, .nav-button) {
                        margin-inline-start: unset;
                    }
                    .nav-link {
                        font-size: 14px;
                        padding-block: 8px;
                        img {
                            width: 16px;
                        }
                    }
                    .btn {
                        &.btn-contact {
                            font-size: 12px;
                            padding: 8px 12px;
                            width: fit-content;
                            border-radius: 12px;
                        }
                        &.btn-lang {
                            width: 32px;
                            height: 32px;
                            font-size: 16px;
                            margin-inline-start: 8px;
                        }
                    }
                }
                .navbar-collapse .navbar-nav:last-of-type {
                    display: flex;
                    align-items: center;
                    flex-direction: row;
                    justify-content: center;
                }
            }
            .modal-dialog:not(.contact-us) {
                max-width: 90%;
                .modal-content {
                    padding: unset;
                    margin-top: 16px;
                    border-radius: 12px;
                    .solutions-header {
                        padding: unset;
                        margin-bottom: 16px;
                        h5 {
                            font-size: 16px;
                            margin-bottom: 8px;
                        }
                        p {
                            font-size: 14px;
                        }
                    }
                    ul li {
                        padding: 8px;
                        &:not(:first-of-type) {
                            margin-top: 16px;
                            margin-inline-start: unset;
                        }
                        &:first-of-type {
                            border-radius: 12px;
                        }
                        &:first-of-type,
                        &:nth-of-type(2) {
                            min-width: unset;
                        }
                        &:nth-of-type(2),
                        &:last-of-type {
                            border-radius: 12px;
                        }
                        h6 {
                            font-size: 14px;
                            margin-bottom: 4px;
                        }
                        > p {
                            font-size: 12px;
                        }
                        > img {
                            width: 80px;
                            margin-top: 8px;
                        }
                        button {
                            margin-top: 16px;
                            padding: 8px 12px;
                            border-radius: 12px;
                            margin-bottom: 16px;
                            img {
                                width: 16px;
                                margin-inline-end: 8px;
                            }
                            p {
                                font-size: 12px;
                            }
                        }
                    }
                }
            }
        }
    }
}
main section.address {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("../media/images/address.jpg");
    padding-block: calc((10.62 * 100vw) / 100) calc((9.3 * 100vw) / 100);
    .address-card {
        background-color: #FFF;
        font-family: var(--neo-font);
        color: var(--secondary-color);
        width: calc((32.4 * 100vw) / 100);
        padding: calc((1.25 * 100vw) / 100);
        border-radius: calc((.83 * 100vw) / 100);
        box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08);
        h4 {
            font-weight: 700;
            font-size: calc((1.6 * 100vw) / 100);
            margin-bottom: calc((1.04 * 100vw) / 100);
        }
        p {
            font-weight: 500;
            text-align: justify;
            font-size: calc((.83 * 100vw) / 100);
            margin-bottom: calc((1.04 * 100vw) / 100);
        }
        > ul {
            margin-bottom: calc((1.04 * 100vw) / 100);
            li {
                width: 50%;
                display: flex;
                align-items: center;
                img {
                    width: calc((1.25 * 100vw) / 100);
                    margin-inline-end: calc((.31 * 100vw) / 100);
                }
                a,
                span {
                    font-weight: 500;
                    font-size: calc((.83 * 100vw) / 100);
                }
                &:last-of-type {
                    margin-top: calc((.42 * 100vw) / 100);
                }
            }
        }
        div {
            button {
                border: 1px solid #D2D6DB;
                background-color: var(--primary-color);
                border-radius: calc((.21 * 100vw) / 100);
                padding-inline: calc((.83 * 100vw) / 100);
                img {
                    width: calc((1.25 * 100vw) / 100);
                    margin-inline-end: calc((.21 * 100vw) / 100);
                }
                span {
                    color: #FFF;
                    font-weight: 500;
                    font-family: var(--ibm-font);
                    font-size: calc((.83 * 100vw) / 100);
                }
            }
            a img {
                width: calc((1.61 * 100vw) / 100);
            }
        }
    }
    &.en-mode {
        background-image: url("../media/images/address-en.jpg");
    }
    @media screen and (max-width: 991px) {
        & {
            margin-bottom: 360px;
            padding-block: 10px 285px;
            background-position: left top;
            .address-card {
                width: 100%;
                padding: 20px;
                border-radius: 12px;
                h4 {
                    font-size: 15px;
                    margin-bottom: 8px;
                }
                p {
                    font-size: 12px;
                    margin-bottom: 8px;
                }
                > ul {
                    margin-bottom: 12px;
                    li {
                        width: 100%;
                        img {
                            width: 16px;
                            margin-inline-end: 8px;
                        }
                        a,
                        span {
                            font-size: 12px;
                        }
                        &:not(:first-of-type) {
                            margin-top: 8px;
                        }
                    }
                }
                div {
                    button {
                        padding-inline: 12px;
                        img {
                            width: 16px;
                            margin-inline-end: 8px;
                        }
                        span {
                            font-size: 12px;
                        }
                    }
                    a img {
                        width: 20px;
                    }
                }
            }
            &.en-mode {
                background-position: right top;
            }
        }
    }
}
.contact-us {
    position: relative;
    font-family: var(--neo-font);
    .contact-us-info {
        inset: 0;
        z-index: 1;
        color: #FFF;
        position: absolute;
        background-color: #024661;
        top: calc((5.6 * 100vw) / 100);
        bottom: calc((-3.4 * 100vw) / 100);
        border-radius: calc((1.04 * 100vw) / 100);
        padding: calc((1.82 * 100vw) / 100) calc((1.5 * 100vw) / 100);
        &::after {
            content: "";
            inset: 0;
            z-index: 3;
            position: absolute;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center bottom;
            border-bottom-left-radius: calc((1.04 * 100vw) / 100);
            border-bottom-right-radius: calc((1.04 * 100vw) / 100);
            background-image: url("../media/images/contact-us.svg");
        }
        h3 {
            font-weight: 700;
            font-size: calc((2.3 * 100vw) / 100);
            margin-bottom: calc((1.04 * 100vw) / 100);
        }
        p {
            font-weight: 500;
            width: calc((32 * 100vw) / 100);
            font-size: calc((1.04 * 100vw) / 100);
        }
        > img {
            position: absolute;
            &.flower {
                z-index: 4;
                left: calc((-2 * 100vw) / 100);
                top: calc((-.8 * 100vw) / 100);
                width: calc((9.23 * 100vw) / 100);
                height: calc((10.24 * 100vw) / 100);
            }
            &.mail {
                z-index: 2;
                right: calc((7.32 * 100vw) / 100);
                bottom: calc((5.8 * 100vw) / 100);
                width: calc((14.85 * 100vw) / 100);
                height: calc((14.1 * 100vw) / 100);
            }
        }
    }
    form {
        z-index: 2;
        overflow: hidden;
        position: relative;
        background-color: #FFF;
        left: calc((8 * 100vw) / 100);
        width: calc((43.33 * 100vw) / 100);
        border-radius: calc((.52 * 100vw) / 100);
        box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.10);
        .form-header {
            background-color: var(--secondary-color);
            padding: calc((.99 * 100vw) / 100) calc((2.97 * 100vw) / 100);
            img {
                width: calc((3.65 * 100vw) / 100);
                margin-inline-end: calc((1.1 * 100vw) / 100);
            }
            h5 {
                color: #FFF;
                font-weight: 500;
                margin-bottom: unset;
                font-size: calc((1.25 * 100vw) / 100);
            }
        }
        .row {
            padding: calc((1.04 * 100vw) / 100);
            .form-group {
                margin-bottom: calc((1.25 * 100vw) / 100);
                label {
                    display: flex;
                    color: #161616;
                    font-weight: 700;
                    align-items: center;
                    font-size: calc((.73 * 100vw) / 100);
                    margin-bottom: calc((.42 * 100vw) / 100);
                    span:first-of-type {
                        color: #B42318;
                        font-weight: 600;
                        font-family: var(--ibm-font);
                        margin-inline-end: calc((.21 * 100vw) / 100);
                    }
                }
                .select-box input,
                input,
                textarea {
                    width: 100%;
                    direction: rtl;
                    background-color: #F3F4F6;
                    font-size: calc((.73 * 100vw) / 100);
                    border-radius: calc((.21 * 100vw) / 100);
                    padding: calc((.42 * 100vw) / 100) calc((.83 * 100vw) / 100);
                }
                .select-box {
                    position: relative;
                    .selected-option {
                        overflow: hidden;
                        border-radius: .5rem;
                        background-color: #eee;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        div {
                            position: relative;
                            text-align: center;
                            cursor: pointer;
                            padding-inline: 12px;
                            font-size: calc((.73 * 100vw) / 100);
                            strong {
                                margin-inline-start: 5px;
                            }
                            &::after{
                                position: absolute;
                                content: "";
                                right: .8rem;
                                top: 50%;
                                transform: translateY(-50%) rotate(45deg);
                                width: .8rem;
                                height: .8rem;
                                border-right: .12rem solid var(--primary);
                                border-bottom: .12rem solid var(--primary);
                                transition: .2s;
                            }
                            &.active::after{
                                transform: translateY(-50%) rotate(225deg);
                            }
                        }
                    }
                }
                .select-box .options {
                    position: absolute;
                    top: 4rem;
                    z-index: 1;
                    width: 100%;
                    background-color: #fff;
                    border-radius: .5rem;
                    display: none;
                    font-size: calc((.73 * 100vw) / 100);
                }
                .select-box .options.active {
                    display: block;
                }
                .select-box .options::before {
                    position: absolute;
                    content: "";
                    left: 1rem;
                    top: -1.2rem;
                    width: 0;
                    height: 0;
                    border: .6rem solid transparent;
                    border-bottom-color: var(--primary);
                }
                input.search-box {
                    background-color: var(--primary);
                    color: #fff;
                    border-radius: .5rem .5rem 0 0;
                    padding: 1.4rem 1rem;
                }
                .select-box ol {
                    list-style: none;
                    max-height: 14rem;
                    overflow: overlay;
                    padding-inline-start: 1rem;
                    &::-webkit-scrollbar {
                        width: 0.6rem;
                    }
                    &::-webkit-scrollbar-thumb {
                        width: 0.4rem;
                        height: 3rem;
                        background-color: #ccc;
                        border-radius: .4rem;
                    }
                    li {
                        padding: 1rem;
                        display: flex;
                        justify-content: space-between;
                        cursor: pointer;
                        &.hide {
                            display: none;
                        }
                        &:not(:last-child) {
                            border-bottom: .1rem solid #eee;
                        }
                        &:hover {
                            background-color: lightcyan;
                        }
                        .country-name {
                            margin-left: .4rem;
                        }
                    }
                }
                .error-message {
                    height: 22px;
                    margin-top: 4px;
                    color: #B42318;
                    margin-bottom: unset;
                    font-size: calc((.73 * 100vw) / 100);
                }
            }
            button {
                width: 100%;
                color: #FFF;
                font-weight: 700;
                font-family: var(--tajawal-font);
                padding: calc((.52 * 100vw) / 100);
                font-size: calc((1.25 * 100vw) / 100);
                border-radius: calc((.52 * 100vw) / 100);
                background-color: var(--secondary-color);
            }
        }
    }
    &.en-mode {
        .contact-us-info {
            &::after {
                transform: scaleX(-1);
            }
            > img {
                &.flower {
                    left: unset;
                    transform: scaleX(-1);
                    top: calc((-1 * 100vw) / 100);
                    right: calc((-2 * 100vw) / 100);
                }
                &.mail {
                    right: unset;
                    left: calc((7.32 * 100vw) / 100);
                }
            }
        }
        form {
            left: unset;
            right: calc((7 * 100vw) / 100);
            .row .form-group {
                .select-box input,
                input,
                textarea {
                    direction: ltr;
                }
            }
        }
    }
    @media screen and (max-width: 991px) {
        & {
            .contact-us-info {
                bottom: 0;
                top: -360px;
                padding: 20px;
                border-top-left-radius: 12px;
                border-top-right-radius: 12px;
                border-bottom-left-radius: unset;
                border-bottom-right-radius: unset;
                &::after {
                    background-size: 165% 20%;
                    border-bottom-left-radius: 12px;
                    border-bottom-right-radius: 12px;
                }
                h3 {
                    font-size: 20px;
                    margin-bottom: 12px;
                }
                p {
                    width: unset;
                    font-size: 14px;
                }
                > img {
                    &.flower {
                        left: 11px;
                        top: -50px;
                        width: 100px;
                        height: 100px;
                        transform: rotate(76deg);
                    }
                    &.mail {
                        right: 10px;
                        bottom: 45px;
                        width: 150px;
                        height: 150px;
                    }
                }
            }
            form {
                left: 50%;
                width: 95%;
                bottom: 200px;
                border-radius: 12px;
                transform: translateX(-50%);
                .form-header {
                    padding: 12px 20px;
                    img {
                        width: 32px;
                        margin-inline-end: 10px;
                    }
                    h5 {
                        font-size: 16px;
                    }
                }
                .row {
                    padding: 20px;
                    .form-group {
                        margin-bottom: 20px;
                        label {
                            font-size: 14px;
                            span:first-of-type {
                                margin-inline-end: 10px;
                            }
                        }
                        .select-box input,
                        input,
                        textarea {
                            font-size: 14px;
                            padding: 12px 20px;
                            border-radius: 12px;
                        }
                        .select-box .selected-option div,
                        .search-box .options,
                        .select-box .options,
                        .select-box .options.en-mode {
                            font-size: 14px;
                        }
                        .error-message {
                            height: unset;
                            font-size: 12px;
                        }
                    }
                    button {
                        padding: 12px;
                        font-size: 16px;
                        border-radius: 12px;
                    }
                }
            }
            &.en-mode {
                .contact-us-info > img {
                    &.flower {
                        top: -50px;
                        right: 11px;
                        transform: rotate(76deg);
                    }
                    &.mail {
                        left: 25px;
                        bottom: 25px;
                    }
                }
                form {
                    right: 50%;
                    transform: translateX(50%);
                }
            }
        }
    }
    @media screen and (min-width: 768px) and (max-width: 991px) {
        & .contact-us-info::after {
            background-size: 165% 30%;
        }
    }
}
.modal-dialog.contact-us {
    max-width: calc((86.5 * 100vw) / 100);
    .modal-content {
        .contact-us-info .btn {
            z-index: 4;
            position: absolute;
            top: calc((.99 * 100vw) / 100);
            left: calc((1.15 * 100vw) / 100);
            img {
                width: calc((1.93 * 100vw) / 100);
            }
        }
        form {
            left: calc((4.43 * 100vw) / 100);
        }
        &.en-mode {
            .contact-us-info {
                &::after {
                    transform: scaleX(-1);
                }
                > img {
                    &.flower {
                        left: unset;
                        transform: scaleX(-1);
                        top: calc((-1 * 100vw) / 100);
                        right: calc((-4 * 100vw) / 100);
                    }
                    &.mail {
                        right: unset;
                        left: calc((7.32 * 100vw) / 100);
                    }
                }
                .btn {
                    left: unset;
                    right: calc((1.15 * 100vw) / 100);
                }
            }
            form {
                left: unset;
                right: calc((4.43 * 100vw) / 100);
                .row .form-group {
                    .select-box input,
                    input,
                    textarea {
                        direction: ltr;
                    }
                }
            }
        }
    }
    @media screen and (max-width: 991px) {
        & {
            max-width: 90%;
            .modal-content {
                .contact-us-info {
                    top: 0;
                    bottom: -365px;
                    .btn {
                        top: 10px;
                        left: 10px;
                        img {
                            width: 32px;
                        }
                    }
                }
                form {
                    left: 50%;
                    top: 140px;
                    bottom: unset;
                }
                &.en-mode {
                    .contact-us-info {
                        > img {
                            &.flower {
                                top: 10px;
                                right: 10px;
                            }
                            &.mail {
                                left: 10px;
                            }
                        }
                        .btn {
                            right: 10px;
                        }
                    }
                    form {
                        top: 155px;
                        right: 50%;
                        transform: translateX(50%);
                    }
                }
            }
        }
    }
}
.btn-animation {
    overflow: hidden;
    position: relative;
    span {
        top: 50%;
        position: absolute;
        border-radius: 50%;
        transition: all .6s linear;
        transform: translateY(-50%);
        width: calc((1.9 * 100vw) / 100);
        height: calc((1.9 * 100vw) / 100);
        right: calc((-1.4 * 100vw) / 100);
        background-color: var(--primary-color);
    }
    &:hover span {
        top: 50%;
        right: 50%;
        transform: translate(50%, -50%);
        width: calc((14.4 * 100vw) / 100);
        height: calc((5.9 * 100vw) / 100);
    }
    @media screen and (max-width: 991px) {
        & {
            span {
                width: 25px;
                height: 25px;
                right: -10px;
            }
            &:hover span {
                width: 100px;
                height: 50px;
            }
        }
    }
}
footer {
    color: #FFF;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left bottom;
    background-color: var(--secondary-color);
    background-image: url("../media/patterns/footer.svg");
    .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;
                            }
                        }
                        &: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-inline-start: 12px;
                                }
                            }
                        }
                        h5 {
                            font-size: 16px;
                            color: #F9B776;
                            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;
                        }
                        ul li {
                            &:not(:first-of-type) {
                                margin-inline-start: 8px;
                            }
                            img {
                                width: 20px;
                            }
                        }
                    }
                }
            }
            > p {
                font-size: 13px;
                padding-block: 12px;
            }
        }
    }
}
::placeholder {
    color: #6C737F;
}