@import 'reset.css';
@import 'helpers.css';
@import 'cursor.css';
@import 'header.css';
@import 'banner.css';

:root {
    --white: #fff;
    --black: #000000;
    --grey: #848484;
    --blue: #27ABE2;
    --yellow: #F8EE1F;
    --green: #00A886;
    --red: #DA1D5D;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html.has-scroll-smooth {
    overflow: hidden;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    background: var(--black);
}

body {
    font-size: 1.5vw;
    overflow-x: hidden !important;
    font-family: 'din_next_lt_arabicregular';
    overflow-y: auto !important;
}

::-webkit-scrollbar {
    display: none;
}

::-moz-scrollbar {
    display: none;
}

::-ms-scrollbar {
    display: none;
}

.d-none {
    display: none;
}

.d-block {
    display: block;
}

#title {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    color: var(--white);
    text-align: center;
    font-family: "lato", sans-serif;
    font-weight: 300;
    font-size: 50px;
    letter-spacing: 10px;
    margin-top: -60px;
    padding-left: 10px;
}

    #title span {
        background: -webkit-linear-gradient(white, #38495a);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

@keyframes animStar {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-2000px);
    }
}



.who_we_are {
    width: 100%;
    background: var(--black);
    padding: 5vw 0 13vw;
}

    .who_we_are .wrap_sett {
        padding: 0 12vw 0 18vw;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
    }

    .who_we_are .left {
        color: var(--white);
        width: 40%;
    }

    .who_we_are .right {
        color: var(--white);
        width: 53%;
        position: relative;
        top: 3vw;
    }

.title_wicon {
    display: flex;
    align-items: center;
    margin-bottom: 2vw;
    position: relative;
    margin-left: 3vw;
    text-transform: uppercase;
}

    .title_wicon i {
        position: absolute;
        height: 10px;
        width: 10px;
        background: var(--white);
        border-radius: 50px;
        top: 48%;
    }

    .title_wicon p {
        font-size: 22px;
        font-family: 'din_next_lt_arabicmedium';
        margin-left: 1.5vw;
        color: var(--white);
    }

    .title_wicon h2 {
    }

.who_we_are .left h2 {
    font-size: 70px;
    font-family: din_next_lt_arabicheavy;
    line-height: 1.1;
    margin-bottom: 1vw;
}

    .who_we_are .left h2 span {
        font-family: 'din_next_lt_arabicregular';
    }

.who_we_are .right p:nth-child(1) {
    margin-bottom: 2vw;
}

.vision_sec {
    width: 100%;
    height: 100vh;
    background: var(--black);
    padding: 0 7vw;
    position: relative;
    overflow: hidden;
}

.grid_vision {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: 100%;
}
    /*.grid_vision .grid_v_template:last-child {
    display: none;
}*/

    .grid_vision .grid_v_template {
        color: var(--white);
        border-right: 1px solid #cccccc26;
        /* display: flex; */
        /* flex-direction: column; */
        /* justify-content: end; */
        position: relative;
    }

        .grid_vision .grid_v_template > div {
            padding: 0 3vw;
            position: absolute;
            /*bottom: 4vw;*/
            padding-top: 10vw;
            height: 100%;
            z-index: 1;
            overflow: hidden;
        }

            .grid_vision .grid_v_template > div .sela_button {
                position: absolute;
                bottom: 12%;
            }

        .grid_vision .grid_v_template h2 {
            font-size: 4vw;
            font-family: 'din_next_lt_arabicheavy';
            line-height: 1;
            color: var(--white);
            transition: all .5s ease;
            transition: background-color 800ms linear;
            /*position: relative;*/
            /*top: 30px;*/
        }

        .grid_vision .grid_v_template p {
            font-size: 18px;
            line-height: 1.4;
            margin: 3vw 0;
            padding-right: 1vw;
            /*transition: all .5s ease;*/
            /*position: relative;*/
            /*top: 30px;*/
        }


        .grid_vision .grid_v_template h3 {
            /*transition: all .5s ease;*/
            /*position: relative;*/
            /*top: 80px;*/
        }

        .grid_vision .grid_v_template.active h2 {
            background: linear-gradient(to right, #00A886 0%, #00AEEF 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .grid_vision .grid_v_template.active p {
            top: 0;
            margin: 3vw 0;
        }

        .grid_vision .grid_v_template.active h3 {
            top: 0;
        }
        /*.grid_vision .grid_v_template a {
    font-size: 15px;
    font-family: 'din_next_lt_arabicbold';
    color: var(--yellow);
    border: 1px solid;
    display: inline-block;
    padding: 8px 80px 12px;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
}*/

        .grid_vision .grid_v_template:nth-child(1) {
            border-left: 1px solid #cccccc26;
        }

        .grid_vision .grid_v_template.red h2 {
            color: var(--red);
        }

        /*.grid_vision .grid_v_template.red a {
    color: var(--red);
}*/

        .grid_vision .grid_v_template.blue h2 {
            color: var(--blue);
        }

/*.grid_vision .grid_v_template.blue a {
    color: var(--blue);
}*/

.vision_sec .bg_img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
}

    .vision_sec .bg_img img {
        transition: all 1s ease;
        position: absolute;
        width: 100%;
        top: 0;
        right: 0;
        object-fit: cover;
        opacity: 0;
        /* filter: blur(20px); */
        /* transform: scale(1.1); */
        transform: translate(30px, 0px);
    }

        .vision_sec .bg_img img.active {
            opacity: 1;
            /* filter: blur(0px); */
            /* transform: scale(1); */
            transform: translate(0px, 0px);
        }

/*.vision_sec .ellipse {
    position: absolute;
    bottom: -50%;
    left: -37%;
    width: 68%;
}

.vision_sec .ellipse img {
    width: 100%;
}*/

.what_we_do {
    width: 100%;
    background: var(--black);
    position: relative;
    overflow: hidden;
    padding-top: 10vw;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: var(--black);
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

    .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .swiper-slide.swiper-slide-active .what_data {
        /*filter: brightness(1);*/
        opacity: 1;
    }

.what_data {
    display: flex;
    /*filter: brightness(0.2);*/
    opacity: .2;
    transition: all .5s ease;
}

    .what_data > div {
        width: 50%;
        color: var(--white);
        text-align: left;
    }

    .what_data > .left {
        position: relative;
        padding-right: 5vw;
        padding-top: 4vw;
    }

        .what_data > .left h2 {
            font-size: 38px;
            font-family: 'din_next_lt_arabicheavy';
            text-transform: uppercase;
            line-height: 1.2;
            margin-bottom: 1vw;
        }

        .what_data > .left p {
            font-size: 18px;
            line-height: 1.2;
            font-family: 'din_next_lt_arabiclight';
            margin-bottom: 2vw;
        }

        .what_data > .left a {
            position: absolute;
            bottom: 0;
        }

.whatwedo_pag {
    position: absolute;
    left: 0;
    top: 18%;
    z-index: 999;
    width: 130px;
    height: 40px;
}


.clients {
    background: var(--black);
    width: 100%;
    padding: 15vw 0 7vw 0;
    position: relative;
    z-index: 2;
}

    .clients .client_parent {
        display: flex;
        position: relative;
        /* padding: 0 14vw 0 20vw; */
        width: 66%;
        margin: 0 14% 0 20%;
        top: -50px;
        padding-top: 10vw;
    }

        .clients .client_parent .swiper-pagination {
            width: 80%;
            background: #5e5c5c9c;
            height: 2px !important;
            left: 0;
            top: 9px !important;
        }

            .clients .client_parent .swiper-pagination span {
                background: #858585 !important;
            }

        .clients .client_parent div#clientsFraction {
            position: absolute;
            top: 8px;
            right: 7%;
            z-index: 2;
            line-height: 0;
            font-size: 20px;
            color: var(--white);
            font-weight: bold;
            letter-spacing: 3px;
        }

        .clients .client_parent .myClients {
            width: 11%;
            position: unset;
        }

        .clients .client_parent .client_detail {
            width: 89%;
            padding-left: 10%;
            position: relative;
            height: 340px;
        }

            .clients .client_parent .client_detail .client_content {
                color: var(--white);
                position: absolute;
                opacity: 0;
            }

                .clients .client_parent .client_detail .client_content.active {
                    opacity: 1;
                }

                .clients .client_parent .client_detail .client_content p {
                    font-size: 28px;
                    line-height: 1.5;
                    font-family: 'din_next_lt_arabiclight';
                    margin-bottom: 2vw;
                }

                .clients .client_parent .client_detail .client_content h2 {
                    font-size: 20px;
                    font-family: 'din_next_lt_arabicbold';
                    line-height: 1;
                    margin-bottom: .8vw;
                    margin-top: 2vw;
                }

                .clients .client_parent .client_detail .client_content h3 {
                    font-size: 20px;
                    line-height: 1;
                }

.cliemts-pagi {
    position: absolute;
    left: 0;
    top: 18%;
    width: 130px;
    height: 20px;
}

    .cliemts-pagi .swiper-button-next {
        right: 0;
        width: 50%;
        transition: all .5s ease;
    }

    .cliemts-pagi .swiper-button-prev {
        left: 0;
        width: 50%;
        justify-content: flex-start;
        transition: all .5s ease;
    }

    .cliemts-pagi .swiper-button-next svg path {
        transition: all .5s ease;
    }

    .cliemts-pagi .swiper-button-next svg line {
        transition: all .5s ease;
    }

    .cliemts-pagi .swiper-button-next:hover svg path {
        stroke: var(--blue);
        fill: var(--blue);
    }

    .cliemts-pagi .swiper-button-next:hover svg line {
        stroke: var(--blue);
        fill: var(--blue);
    }

    .cliemts-pagi .swiper-button-prev svg path {
        transition: all .5s ease;
    }

    .cliemts-pagi .swiper-button-prev svg line {
        transition: all .5s ease;
    }

    .cliemts-pagi .swiper-button-prev:hover svg path {
        stroke: var(--blue);
        fill: var(--blue);
    }

    .cliemts-pagi .swiper-button-prev:hover svg line {
        stroke: var(--blue);
        fill: var(--blue);
    }

.clients h2 {
    color: var(--white);
    font-size: 25px;
    margin-bottom: 10vw;
}

.clients .bg_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

img.bg_layer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    /*height: 100%;*/
}

.clients .client_parent .myClients .swiper-slide {
    background: transparent;
}

.lets_wrap {
    /* background: var(--black); */
    padding: 0vw 8vw;
    background: url(../images/lets_bg.png);
    background-size: cover;
    padding: 12vw 0 15vw;
    border-bottom: 1px solid #7070704d;
}

    .lets_wrap .lets_connect {
        color: var(--black);
        text-align: center;
        /* background: var(--white); */
        padding: 0 17vw;
    }

        .lets_wrap .lets_connect h2 {
            font-size: 117px;
            font-family: 'din_next_lt_arabicbold';
            /* background: linear-gradient(to right, #00A886 0%, #00AEEF 100%); */
            /* -webkit-background-clip: text; */
            /* -webkit-text-fill-color: transparent; */
            line-height: 1;
            margin-bottom: 4vw;
            color: var(--white);
        }

        .lets_wrap .lets_connect > h3 {
            font-size: 31px;
            line-height: 1.1;
            color: var(--white);
            font-family: 'din_next_lt_arabiclight';
        }

        .lets_wrap .lets_connect a {
            margin-top: 3vw;
        }

.footer_wrap {
    background: var(--black);
    color: var(--white);
    /*display: flex;*/
}

    .footer_wrap .flex {
        padding: 8vw 8vw 3vw;
    }

    .footer_wrap .left_foot {
        width: 55%;
        /* padding-right: 15vw; */
    }

    .footer_wrap .right_foot {
        width: 45%;
    }

a.j-btn_more.input {
    padding: 0.2vw 2vw 0.5vw;
}

.footer_wrap .foot_logo img {
    width: 9vw;
}


.footer_wrap .left_foot h2 {
    font-size: 28px;
    color: var(--white);
    line-height: 1;
    margin: .3VW 0 .5vw;
}

.footer_wrap .left_foot p {
    font-size: 45px;
    line-height: 1.1;
    font-family: 'din_next_lt_arabicmedium';
    padding-right: 15vw;
}

.footer_wrap .left_foot .search-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ffffff59;
    /* padding-bottom: .8vw; */
    margin-top: 8vw;
    width: 90%;
}

    .footer_wrap .left_foot .search-wrap input {
        color: var(--white);
        font-size: 18px;
        background: var(--black);
        border: none;
        outline: none;
        height: 100%;
        width: 80%;
        padding: 30px 0px;
    }

        .footer_wrap .left_foot .search-wrap input::placeholder {
            color: var(--white);
        }

    .footer_wrap .left_foot .search-wrap a {
    }

.footer_wrap .left_foot .footer_social {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 1vw;
    margin: 3vw 0 0;
    padding-right: 15vw;
}

    .footer_wrap .left_foot .footer_social a {
        border: 1px solid #fff;
        border-radius: 50px;
        height: 70px;
        width: 70px;
        position: relative;
        display: block;
        transition: all .5s ease-in-out;
    }

        .footer_wrap .left_foot .footer_social a svg {
            width: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            fill: #fff;
            transition: all .5s ease-in-out;
        }

        .footer_wrap .left_foot .footer_social a:hover {
            background-color: #fff;
        }

            .footer_wrap .left_foot .footer_social a:hover svg {
                fill: var(--green);
            }

.footer_wrap .left_foot h4 {
    font-size: 15px;
    text-transform: uppercase;
    color: #CCCCCC;
}

.footer_wrap .right_foot a {
    font-size: 65px;
    color: var(--white);
    display: block;
    line-height: 1;
    margin-bottom: 2vw;
    line-height: 65px;
    height: 65px;
    font-family: 'din_next_lt_arabicmedium';
    margin-left: 0;
    display: inline-block;
    text-transform: uppercase;
}

.copy-right {
    display: flex;
    justify-content: space-between;
    padding: 2vw 8vw 3vw;
    border-top: 1px solid #ffffff2b;
}

    .copy-right p {
        font-size: 15px;
        text-transform: uppercase;
        font-family: 'din_next_lt_arabiclight';
        margin-right: 4vw;
    }

    .copy-right div {
        /*display: flex;*/
        /*justify-content: space-between;*/
        width: 45%;
    }

        .copy-right div:last-child {
            width: 55%;
            text-align: end;
        }

    .copy-right p:last-child {
        margin: 0;
    }

.vision_sec::after {
    content: "";
    width: 100%;
    height: 20px;
    position: absolute;
    left: 0;
    top: -10px;
    background: var(--black);
}

.news_wrap .latest_news .news_left:hover .zoomin {
    transform: scale(1.1);
}

.news_wrap .latest_news .news_left .zoomin {
    transition: all .5s ease;
    position: relative;
}

    .news_wrap .latest_news .news_left .zoomin::after {
        background: linear-gradient(to bottom, #0000001a 0%, #000000 100%);
        content: "";
        width: 100%;
        position: absolute;
        height: 100%;
        bottom: 0;
    }

body:not(.no-js) .image-wrap {
    transition: 1s ease-out;
    transition-delay: 0.2s;
    position: relative;
    width: 100%;
    /*height: 80vh;*/
    overflow: hidden;
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    visibility: hidden;
}

    body:not(.no-js) .image-wrap img {
        transform: scale(1.3);
        transition: 2s ease-out;
    }

body:not(.no-js) .animating .image-wrap {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    visibility: visible;
    transform: skewY(0);
}

body:not(.no-js) .animating img {
    transform: scale(1);
    transition: 4s ease-out;
}

body:not(.no-js) .fadeup {
    opacity: 0;
    transition: 0.4s ease-out;
    transform: translateY(40px);
}

body:not(.no-js) .fading-up {
    opacity: 1;
    transition: 1s ease-out;
    transform: translateY(0px);
    transition-delay: 0.7s;
}


.sela_button {
    display: inline-block;
    height: 3vw;
}

    .sela_button a {
        display: flex;
        align-items: baseline;
        font-size: 20px;
        position: relative;
        color: var(--white);
        height: 3vw;
        align-items: center;
    }

        .sela_button a > div {
            border: 1px solid var(--white);
            padding: 0 15px;
            border-radius: 50px;
            height: 3vw;
            width: 3vw;
            display: flex;
            align-items: center;
            justify-content: space-around;
            transition: all .5s ease;
        }

        .sela_button a:hover > div {
            border: 1px solid var(--blue);
        }

        .sela_button a::before {
            content: "";
            position: absolute;
            left: 5%;
            top: 13px;
            width: 22px;
            height: 22px;
            background: var(--blue);
            border-radius: 50px;
            transition: all 1s cubic-bezier(0.22, 0.61, 0.36, 1);
            opacity: 0;
        }

        .sela_button a:hover::before {
            left: 86%;
            transform: scale(2.2);
        }

        .sela_button a > h3 {
            border: 1px solid var(--white);
            border-radius: 50px;
            padding: 0px 25px 6px 50px;
            height: 3vw;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            z-index: 1;
            transition: all .5s ease;
        }

        .sela_button a:hover h3 {
            border: 1px solid var(--blue);
        }

        .sela_button a h3::before {
            content: "";
            position: absolute;
            left: 5%;
            top: 50%;
            transform: translate(0%, -50%);
            width: 22px;
            height: 22px;
            background: var(--blue);
            border-radius: 50px;
            transition: all 1s cubic-bezier(0.22, 0.61, 0.36, 1);
        }

        .sela_button a:hover h3::before {
            transform: scale(25);
            z-index: -1;
        }

        .sela_button a svg {
            transition: all .5s ease;
        }

        .sela_button a:hover svg {
            transform: rotate(45deg);
        }

        .sela_button a svg path {
            transition: all .5s ease;
        }

        .sela_button a:hover svg path {
            fill: var(--blue);
        }

    .sela_button.green a h3::before {
        background: var(--green);
    }

    .sela_button a:hover h3 {
        border: 1px solid var(--green);
    }

    .sela_button.green a:hover > div {
        border: 1px solid var(--green);
    }

    .sela_button.green a:hover svg path {
        fill: var(--green);
    }

.white-color {
    color: #fff;
}

.lineBar {
    display: none;
}

.what_we_pag_slider {
    padding: 0 0 5vw 18vw;
    position: relative;
    top: -60px;
}

    .what_we_pag_slider div#fraction {
        position: absolute;
        top: 8px;
        right: 28%;
        z-index: 2;
        line-height: 0;
        font-size: 20px;
        color: var(--white);
        font-weight: bold;
        letter-spacing: 3px;
    }

    .what_we_pag_slider .whatwedo {
        padding-top: 6vw;
    }

    .what_we_pag_slider .swiper-pagination {
        background: #323232;
        height: 2px !important;
        width: 62% !important;
        left: 0;
        top: 9px !important;
    }

        .what_we_pag_slider .swiper-pagination span {
            background: #7e7c7cbf !important;
        }

/*opportunities page*/
.opper_wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    position: relative;
}

    .opper_wrap > div {
        width: 50%;
        height: 100%;
        position: relative;
    }

    .opper_wrap .opper_sec {
    }

        .opper_wrap .opper_sec::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 5;
            visibility: visible;
        }

        .opper_wrap .opper_sec:hover::after {
            visibility: hidden;
        }

    .opper_wrap .uniti_sec {
    }

    .opper_wrap > div > img {
        width: 100%;
        height: inherit;
        object-fit: cover;
    }

    .opper_wrap > div .big_heading {
        position: absolute;
        right: 0;
        top: 20%;
        z-index: 4;
    }

        .opper_wrap > div .big_heading h1 {
            font-size: 190px;
            line-height: 1;
            font-family: 'din_next_lt_arabicheavy';
            color: #fff;
            margin-bottom: 1vw;
            transition: all .5s ease;
        }
    
        .opper_wrap > div:nth-child(2) .big_heading h1 {
            font-size: 190px;
        }
        .opper_wrap > div .big_heading h2 {
            font-size: 32px;
            color: var(--white);
            line-height: 1;
            transition: all .5s ease;
            padding-left: 0.4vw;
        }

    .opper_wrap .uniti_sec .big_heading {
        left: 0;
        right: auto;
        text-align: right;
    }

    .opper_wrap > .opper_sec .find_sec {
        position: absolute;
        right: 4vw;
        bottom: 12%;
        width: 45%;
        z-index: 1;
        transition: all .5s ease-in-out;
        opacity: 1;
    }

    .opper_wrap > div .find_sec p {
        font-size: 26px;
        line-height: 1.3;
        color: var(--white);
        font-family: 'din_next_lt_arabiclight';
        margin-bottom: 2vw;
    }

    .opper_wrap .uniti_sec .find_sec {
        right: auto;
        left: 4vw;
        text-align: right;
    }

    .opper_wrap .uniti_sec i {
        position: absolute;
        width: 100%;
        height: 100%;
        right: 0;
        top: 0;
        background: var(--black);
        z-index: 1;
    }

    .opper_wrap > .anim_img {
        width: 70%;
        position: absolute;
        z-index: 2;
        right: -20%;
        bottom: -25%;
        transition: all .5s ease-in-out;
    }

.job_opper_wrap {
    padding: 10vw 0;
}

    .job_opper_wrap .great_opp {
    }

        .job_opper_wrap .great_opp h2 {
            font-size: 75px;
            color: var(--white);
            line-height: 1;
            font-family: 'din_next_lt_arabicbold';
            width: 57%;
            padding-left: 8%;
            margin-bottom: 3vw;
            text-transform: uppercase;
        }

        .job_opper_wrap .great_opp > h3 {
            font-size: 22px;
            color: var(--white);
            line-height: 1.1;
            padding: 0 18% 0 21%;
        }

        .job_opper_wrap .great_opp .bl_line {
            margin-left: 21%;
            margin-top: 4vw;
        }

.jpb_opp_img {
    position: relative;
    margin: 0 5vw 7vw;
}

    .jpb_opp_img img {
        width: 100%;
        filter: brightness(0.3);
    }

    .jpb_opp_img .job_text {
        position: absolute;
        bottom: 15%;
        width: 90%;
        left: 5%;
        display: flex;
        justify-content: space-between;
    }

        .jpb_opp_img .job_text .jobleft {
            width: 55%;
        }

            .jpb_opp_img .job_text .jobleft h3 {
                color: var(--white);
                font-size: 35px;
                line-height: 1.3;
                text-transform: uppercase;
                font-family: 'din_next_lt_arabicheavy';
            }

        .jpb_opp_img .job_text .jobright {
            width: 35%;
            padding-right: 5vw;
        }

            .jpb_opp_img .job_text .jobright p {
                color: var(--white);
                font-size: 25px;
                line-height: 1.3;
                font-family: 'din_next_lt_arabiclight';
                margin-bottom: 2vw;
            }

.job_opper_wrap.white {
    background: var(--white);
}

    .job_opper_wrap.white .title_wicon p {
        color: var(--black);
    }

    .job_opper_wrap.white .title_wicon h2 {
        color: var(--black);
    }

    .job_opper_wrap.white .title_wicon i {
        background: var(--black);
    }

    .job_opper_wrap.white .great_opp {
    }

        .job_opper_wrap.white .great_opp h2 {
            color: var(--black);
        }

        .job_opper_wrap.white .great_opp > h3 {
            color: var(--black);
        }

        .job_opper_wrap.white .great_opp .image-wrap img {
            width: 100%;
        }

.sela_busi {
    width: 82%;
    margin-left: 9%;
    display: flex;
    justify-content: space-between;
    margin-top: 4vw;
}

    .sela_busi .selaleft {
        width: 55%;
    }

    .sela_busi .selaright {
        width: 35%;
        padding-right: 5vw;
    }

    .sela_busi .selaleft h3 {
        color: var(--black);
        font-size: 33px;
        line-height: 1.3;
        text-transform: uppercase;
        font-family: 'din_next_lt_arabicheavy';
    }

    .sela_busi .selaright p {
        color: var(--black);
        font-size: 25px;
        line-height: 1.3;
        font-family: 'din_next_lt_arabiclight';
        margin-bottom: 2vw;
    }

.job_opper_wrap.white .great_opp .reveal {
    margin: 5vw 5vw 0vw;
}

.sela_button.black a {
    color: var(--black);
}

    .sela_button.black a > h3 {
        border: 1px solid var(--black);
    }

    .sela_button.black a > div {
        border: 1px solid var(--black);
    }

    .sela_button.black a > h3::before {
        content: "";
        background: var(--green);
    }

    .sela_button.black a:hover h3 {
        border: 1px solid var(--green);
    }

    .sela_button.black a:hover svg path {
        fill: var(--green);
    }

    .sela_button.black a svg path {
        fill: var(--black);
    }

    .sela_button.black a:hover div {
        border: 1px solid var(--green);
    }
/*opportunities page*/


/*coming soon*/
.coming_wrap {
    position: relative;
    height: 100vh;
    width: 100%;
}

    .coming_wrap video {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: inherit;
        object-fit: cover;
    }

    .coming_wrap .coming_text {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        width: 100%;
    }

        .coming_wrap .coming_text h1 {
            font-size: 30px;
            line-height: 1;
            color: var(--white);
            margin-bottom: 0vw;
        }

        .coming_wrap .coming_text h2 {
            font-size: 170px;
            line-height: .7;
            font-family: 'din_next_lt_arabicheavy';
            color: var(--white);
            margin-bottom: 3vw;
        }

        .coming_wrap .coming_text > h3 {
            color: var(--white);
            font-size: 33px;
            font-family: 'din_next_lt_arabiclight';
            width: 50%;
            margin: auto;
            line-height: 1;
        }

        .coming_wrap .coming_text .coming_btn {
            display: flex;
            align-items: center;
            justify-content: center;
            /* justify-content: space-between; */
            margin-top: 5vw;
        }

            .coming_wrap .coming_text .coming_btn .sela_button {
                margin: 0 1.2vw;
            }
/*coming soon*/



.opper_wrap .opper_sec.active i {
    opacity: 1;
    visibility: visible;
}

.opper_sec:nth-child(2) > .find_sec {
    left: 4vw;
    right: auto;
}

.opper_sec:nth-child(2) > .big_heading {
    left: 0;
    right: auto;
}

    .opper_sec:nth-child(2) > .big_heading h2 {
        text-align: right;
        padding-right: 0.4vw;
    }

.opper_sec.active:first-child ~ div ~ .anim_img {
    right: 50%;
}

.opper_wrap .opper_sec i {
    transition: all .5s ease-in-out;
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
    background: var(--black);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
}

.opper_wrap > .opper_sec.active .find_sec {
    opacity: 0;
}

.opper_wrap > .opper_sec.active .big_heading h1 {
    opacity: .6;
}

.opper_wrap > .opper_sec.active .big_heading h2 {
    opacity: .3;
}
/* contact page */
.contact_wrap {
    position: relative;
    height: 100vh;
    width: 100%;
}

    .contact_wrap video {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: inherit;
        object-fit: cover;
    }

    .contact_wrap .contact_holder {
        position: absolute;
        text-align: center;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

        .contact_wrap .contact_holder h1 {
            font-size: 112px;
            line-height: initial;
            color: var(--white);
            margin-bottom: 0vw;
            text-transform: uppercase;
            font-family: 'din_next_lt_arabicheavy';
            line-height: 1;
        }

        .contact_wrap .contact_holder .inner-shade {
            position: absolute;
            left: 0;
            bottom: -2px;
            width: 100%;
            height: 30%;
            background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,209,0,0) 100%);
        }

.form-section {
    position: relative;
    z-index: 1;
}

    .form-section ul li.active,
    .form-section ul li {
        transition: all .5s ease-in-out;
    }

        .form-section ul li.active a {
            opacity: 1;
            justify-content: center;
        }

        .form-section ul li.active .line,
        .form-section ul li.active .hoverText {
            display: none;
        }

        .form-section ul li a {
            color: #fff;
            display: flex;
            align-items: center;
            font-size: 24px;
            transition: all .5s ease-in-out;
            margin-bottom: 0.5vw;
        }

            .form-section ul li a .line {
                width: 48px;
                position: relative;
                height: 2px;
                margin: 0 20px;
            }

            .form-section ul li a .hoverText {
                opacity: 0;
                visibility: hidden;
                transform: translateY(10px);
                transition: all .5s ease-in-out;
                position: relative;
                font-size: 35px;
            }

            .form-section ul li a .line:after {
                content: "";
                position: absolute;
                width: 0;
                height: 100%;
                right: 0;
                top: 4px;
                background: linear-gradient(90deg, #00A886 0%, #00AEEF 100%);
                transition: all .3s ease-in-out;
            }

            .form-section ul li a:hover .line:after {
                width: 100%;
            }

            .form-section ul li a:hover .hoverText {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
            }
/*.form-section ul li a:hover span.text {
    position: relative;
    transform: translate(-125px, -151px);
}

.form-section ul li a span.text {
    transition: all .5s ease;
}*/
.cont_swiper .swiper-slide {
    background: transparent;
}

.cont_swiper {
    margin: 0 auto;
    max-width: 1280px;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    transition: all .5s ease-in-out;
    /*transform: translateY(20px);*/
    /*height: 300px;*/
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

    .cont_swiper.active {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, -50%);
    }

.form-section ul li.active .cont_swiper {
    opacity: 1;
    position: relative;
    transform: translateY(0);
    visibility: visible;
}

.cont_swiper .swiper-slide {
    opacity: 0 !important;
}

.cont_swiper .swiper-slide-active {
    opacity: 1 !important;
}

.cont_swiper .swiper-slide .form-group {
    display: flex;
    align-items: baseline;
    /* place-content: space-around; */
    justify-content: center;
    margin-bottom: 5%;
}

    .cont_swiper .swiper-slide .form-group input {
        border: none;
        background: transparent;
        color: var(--white);
        font-size: 60px;
        width: 70%;
    }

        .cont_swiper .swiper-slide .form-group input::placeholder {
            color: var(--white);
            opacity: .4;
        }

    .cont_swiper .swiper-slide .form-group label {
        font-size: 60px;
        color: var(--white);
        margin-right: 2vw;
    }

input:focus-visible {
    outline: none;
}

.form-section ul li a span.text {
    font-size: 50px;
    line-height: 1;
    color: var(--green);
}

.cont_swiper .swiper-pagination {
    color: var(--white);
    font-size: 24px;
    font-family: 'din_next_lt_arabicbold';
    bottom: 10%;
    z-index: -1;
}

.contact_next_prev {
    position: absolute;
    bottom: 10%;
    left: 50%;
    width: 40%;
    display: flex;
    height: 40px;
    right: auto;
    transform: translate(-50%, 0);
    z-index: 2;
}

.main_contact {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.cont_head {
    transition: all .5s ease;
}

    .cont_head h1 {
        font-size: 100px;
        font-family: 'din_next_lt_arabicheavy';
        color: var(--white);
        text-align: center;
        line-height: 1;
        margin-top: 15%;
    }

.cont_tabs {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* display: flex; */
    /* flex-direction: column; */
    padding: 25% 0 0% 49%;
}

    .cont_tabs ul {
    }

        .cont_tabs ul li {
        }

            .cont_tabs ul li h2 {
                font-size: 50px;
                line-height: 1;
                /*margin-bottom: 1%;*/
                color: var(--green);
                transition: all .5s ease;
                cursor: pointer;
                position: absolute;
                cursor: pointer;
            }

                .cont_tabs ul li h2:hover {
                    opacity: 1 !important;
                }

                .cont_tabs ul li h2.active {
                    opacity: 1 !important;
                }

            .cont_tabs ul li:nth-child(2) h2 {
                transform: translate(0, 130%);
                opacity: .6;
            }

            .cont_tabs ul li:nth-child(3) h2 {
                transform: translate(0, 260%);
                opacity: .3;
            }

            .cont_tabs ul li:nth-child(1) h2.active {
                transform: translate(-51%, -500%);
                font-size: 35px;
                color: var(--white);
            }

            .cont_tabs ul li:nth-child(2) h2.active {
                transform: translate(-51%, -500%);
                font-size: 35px;
                color: var(--white);
            }

            .cont_tabs ul li:nth-child(3) h2.active {
                transform: translate(-51%, -500%);
                font-size: 35px;
                color: var(--white);
            }

.contact_next_prev .swiper-button-next {
    width: calc(var(--swiper-navigation-size)/ 45 * 45);
    transition: all .5s ease;
}

.contact_next_prev .swiper-button-prev {
    width: calc(var(--swiper-navigation-size)/ 45 * 45);
    transition: all .5s ease;
}

.heading_form {
    position: absolute;
    width: 24%;
    left: 24%;
    transition: all .5s ease-in-out;
}

    .heading_form h3 {
        font-size: 30px;
        line-height: 1.7;
        color: var(--white);
        position: relative;
        padding:0 15% 0 0;
    }

        .heading_form h3::after {
            content: "";
            position: absolute;
            right: 0;
            top: 58%;
            width: 15%;
            height: 2px;
            background: linear-gradient(90deg, rgb(13 92 84) 0%, rgba(0,174,239,1) 50%, rgba(27,93,103,1) 100%);
        }

.opper_mobile {
    display: none;
}

.interst-div {
    display: flex;
    width: 100%;
    padding: 30px 0 0;
}

    .interst-div > div {
        width: 50%;
        flex: 1 auto;
    }

        .interst-div > div:first-child {
            margin-right: 2vw;
        }

        .interst-div > div h3 {
            font-size: 60px;
            color: var(--white);
            line-height: 1;
            text-align: right;
        }

    .interst-div .checkBoxes {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 0 0;
    }

    .interst-div .form-group2 {
        position: relative;
        margin-bottom: 10px;
    }

    .interst-div input[type=radio] {
        padding: 0;
        height: initial;
        width: initial;
        margin-bottom: 0;
        display: none;
        cursor: pointer;
    }

    .interst-div label {
        position: relative;
        cursor: pointer;
        font-size: 30px;
        color: rgba(255, 255, 255, .44);
        line-height: normal;
        transition: all .5s ease-in-out;
    }

        .interst-div label:before {
            content: '';
            -webkit-appearance: none;
            background-color: transparent;
            background: transparent;
            transition: all .5s ease-in-out;
            display: inline-block;
            position: relative;
            vertical-align: middle;
            cursor: pointer;
            margin-right: 15px;
            width: 26px;
            height: 26px;
            border: 1px solid #fff;
            border-radius: 5px;
        }

    .interst-div input[type=radio]:checked + label {
        color: #00A886;
    }

    .interst-div label:after {
        content: '';
        background: #00A886;
        transition: all .5s ease-in-out;
        width: 16px;
        height: 16px;
        position: absolute;
        top: 26px;
        left: 5px;
        border-radius: 50%;
        opacity: 0;
        visibility: hidden;
        transform: scale(0);
    }

    .interst-div input[type=radio]:checked + label:after {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }

/* loader */
.mn_loader {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    right: 0;
    background: #000;
    z-index: 1100;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
}

.loader3 {
    width: 80px;
    height: 80px;
    display: inline-block;
    padding: 0px;
    text-align: left;
}

    .loader3 span {
        position: absolute;
        display: inline-block;
        width: 80px;
        height: 80px;
        border-radius: 100%;
        /*    background:rgba(60, 180, 229,1);*/
        background: #fff;
        -webkit-animation: loader3 1.5s linear infinite;
        animation: loader3 1.5s linear infinite;
    }

        .loader3 span:last-child {
            animation-delay: -0.9s;
            -webkit-animation-delay: -0.9s;
        }

@keyframes loader3 {
    0% {
        transform: scale(0, 0);
        opacity: 0.8;
    }

    100% {
        transform: scale(1, 1);
        opacity: 0;
    }
}

@-webkit-keyframes loader3 {
    0% {
        -webkit-transform: scale(0, 0);
        opacity: 0.8;
    }

    100% {
        -webkit-transform: scale(1, 1);
        opacity: 0;
    }
}

.message-div {
    opacity: 0;
    visibility: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    font-size: 20px;
    line-height: 1.2;
    margin-top: 1vw;
    color: #fff;
    transition: all .5s ease-in-out;
    transform: translateY(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 5vw;
}

    .message-div.show {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

.text_news {
    color: var(--white);
}


.news_wrap {
    width: 100%;
}

    .news_wrap .latest_news {
        padding: 5vw 9vw 10vw;
        display: flex;
    }

        .news_wrap .latest_news .news_left {
            width: 45%;
            position: relative;
            overflow: hidden;
        }

.latest_news .news_left > .read_circle {
    position: absolute;
    top: 4%;
    right: 4%;
    opacity: 0;
    transition: all .5s ease;
}

.latest_news .news_left:hover .read_circle {
    opacity: 1;
}

.news_wrap .latest_news .news_right {
    width: 55%;
    padding-left: 5vw;
}

.news_wrap .latest_news .news_left > img {
    width: 100%;
    height: inherit;
    object-fit: cover;
    filter: brightness(0.6);
}

.news_wrap .latest_news .news_right .news_sec {
    display: flex;
    /* align-items: baseline; */
    margin-bottom: 3vw;
}

    .news_wrap .latest_news .news_right .news_sec .img_news {
        width: 30%;
    }

        .news_wrap .latest_news .news_right .news_sec .img_news img {
            width: 100%;
            display: block;
        }

        .news_wrap .latest_news .news_right .news_sec .img_news > div {
            transition: all .5s;
        }

    .news_wrap .latest_news .news_right .news_sec:hover .img_news > div {
        transform: scale(1.1);
    }

    .news_wrap .latest_news .news_right .news_sec .text_news {
        width: 70%;
        padding-left: 3vw;
    }

        .news_wrap .latest_news .news_right .news_sec .text_news h2 {
            font-size: 18px;
            font-family: 'din_next_lt_arabiclight';
            color: #fff9;
            opacity: .6;
            line-height: 1;
            /* margin-bottom: .5vw; */
        }

        .news_wrap .latest_news .news_right .news_sec .text_news h3 {
            font-size: 42px;
            line-height: 1.1;
            font-family: 'din_next_lt_arabicmedium';
            margin-bottom: 1.5vw;
        }

        .news_wrap .latest_news .news_right .news_sec .text_news p {
            font-size: 20px;
            line-height: 1.4;
            font-family: 'din_next_lt_arabiclight';
            margin-bottom: 2vw;
            width: 80%;
        }

.news_left .image-wrap {
}

.news_wrap .news_left .news_abs_text {
    position: absolute;
    bottom: 5vw;
    left: 2vw;
    padding-right: 5vw;
    z-index: 1;
}

    .news_wrap .news_left .news_abs_text h2 {
        font-size: 50px;
        line-height: 1.1;
        color: var(--white);
        font-family: 'din_next_lt_arabicheavy';
        text-transform: uppercase;
        margin-bottom: 1vw;
    }

    .news_wrap .news_left .news_abs_text h3 {
        font-size: 28px;
        color: var(--white);
        opacity: .6;
        font-family: 'din_next_lt_arabiclight';
        width: 35%;
        line-height: 1.1;
    }


/*BOARD OF DIRECTOR*/
.bod_main_wrap {
    padding-top: 8%;
}

.tab-wrapper {
    text-align: center;
    display: block;
    margin: auto;
    max-width: 800px;
}

    .tab-wrapper .tabs {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
    }

        .tab-wrapper .tabs .tab-link {
            /* margin: 0 1%; */
            list-style: none;
            padding: 10px 40px;
            font-size: 22px;
            color: var(--white);
            cursor: pointer;
            transition: all ease 1s;
            border-bottom: solid 1px var(--white);
            letter-spacing: 1px;
            font-family: 'din_next_lt_arabicmedium';
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: .3;
        }

            .tab-wrapper .tabs .tab-link::before {
                content: "";
                width: 7px;
                height: 7px;
                background: var(--white);
                display: block;
                border-radius: 30px;
                margin-right: .5vw;
                position: relative;
                top: 3.5px;
            }

            .tab-wrapper .tabs .tab-link:hover {
                opacity: 1;
            }

            .tab-wrapper .tabs .tab-link.active {
                opacity: 1;
            }

.content-wrapper {
    padding: 5vw 0vw 0;
}

    .content-wrapper .tab-content {
        display: none;
        opacity: 0;
        transform: translateY(15px);
        animation: fadeIn 1s ease 1 forwards;
    }

        .content-wrapper .tab-content.active {
            display: block;
        }

@keyframes fadeIn {
    100% {
        opacity: 1;
        transform: none;
    }
}

.tab-content .bod_head {
    display: flex;
    padding: 0 7vw;
}

    .tab-content .bod_head .left {
        width: 70%;
        padding-left: 4vw;
    }

    .tab-content .bod_head .right {
        width: 30%;
        padding-top: 5vw;
    }

    .tab-content .bod_head .left h1 {
        font-size: 75px;
        color: var(--white);
        line-height: 1;
        font-family: 'din_next_lt_arabicheavy';
        margin-bottom: 4vw;
    }

    .tab-content .bod_head .left p {
        font-size: 75px;
        color: var(--white);
        line-height: 1;
        font-family: 'din_next_lt_arabiclight';
        margin-bottom: 4vw;
    }

    .tab-content .bod_head .right p {
        font-size: 28px;
        color: var(--white);
        line-height: 1.3;
        font-family: 'din_next_lt_arabiclight';
    }

/*BOARD OF DIRECTOR*/

/*bod*/
.sizew100.my5.relative.ofh {
    color: var(--white);
}

.bod_list_wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 2vw;
}

.bod_item {
    position: relative;
    width: 100%;
    /* height: 13vw; */
    border-bottom: 1px solid var(--tc4);
    /* display: flex; */
    align-items: center;
    justify-content: center;
    transition: all .3s ease-in;
    background: transparent;
    cursor: pointer;
}
    /*  .bod_item::before{
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #470080;
    z-index: -1;
    transition: background .4s ease-out, border .4s ease-out;
    transform: scaleY(0);
    transform-origin: center bottom;
  }
  .bod_item:hover::before{
    transform: scaleY(1);
    border-color: transparent;
  }*/
    .bod_item.active {
        border-color: transparent;
    }

        .bod_item.active::before {
            background-color: var(--tc2);
            transform: scaleY(1);
            border-color: transparent;
        }

    .bod_item:last-child {
        border: 0;
    }

    .bod_item img {
        width: 100%;
        height: inherit;
        object-fit: cover;
        display: block;
    }

.bod_img_wrapper {
    width: 100%;
    height: 74vh;
    overflow: hidden;
}

    .bod_img_wrapper .bod_img {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

        .bod_img_wrapper .bod_img.active {
        }

.bod_rw1 {
    /* display: flex; */
    /*flex-direction: row-reverse;*/
    justify-content: space-between;
}

    .bod_rw1 .bod_right {
        width: 32%;
        float: right;
        padding-top: 8vw;
    }

    .bod_rw1 .bod_left {
        width: 40%;
        float: left;
        padding-top: 8vw;
    }

.bod_names {
    position: absolute;
    right: -55%;
    color: var(--white);
    text-align: right;
    top: 28%;
    width: 90%;
}

    .bod_names .relative h1 {
        font-size: 50px;
        line-height: 1;
        text-transform: uppercase;
        font-family: 'din_next_lt_arabicbold';
        margin-bottom: .8vw;
        padding-left: 0;
    }

    .bod_names .relative > span {
        font-size: 34px;
        font-family: 'din_next_lt_arabiclight';
        line-height: 1.4;
    }

        .bod_names .relative > span > span {
            padding-left: 8vw;
        }

@keyframes animatedBackground {
    from {
        background-position: 0 0;
    }
    /*use negative width if you want it to flow right to left else and positive for left to right*/
    to {
        background-position: -10000px 0;
    }
}

.swiper-button-prev, .swiper-button-next {
    transition: all .5s ease;
}

.title_wicon.black i {
    background: var(--black);
}

.title_wicon.black p {
    color: var(--black);
}

.our_team_wrap {
    background: var(--white);
    padding: 8vw 0 4vw;
}

.body_wrapper {
    padding: 0 7vw 7vw;
}

.our_team_wrap .team_head {
    padding: 0 7vw;
    margin-bottom: 8vw;
}

    .our_team_wrap .team_head h2 {
        font-size: 75px;
        line-height: 1;
        font-family: 'din_next_lt_arabicheavy';
    }

.teamSwiper .swiper-slide {
    background: var(--white);
}

.our_team_wrap .team_slider {
    width: 40%;
    margin: auto;
    height: 100%;
    position: relative;
}

    .our_team_wrap .team_slider .teamSwiper {
        height: 80%;
    }

.big_name {
    position: absolute;
    width: 100%;
    display: block;
    height: 200px;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
}

    .big_name > div {
        /* position: relative; */
    }
/*.big_name > div h2{
    animation: marquee 10s linear infinite;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 10vw;
    line-height: 1;
    text-transform: uppercase;
}*/
.team_slider_wrap {
    height: 100vh;
    position: relative;
    margin-bottom: 5vw;
}

.marquee.active {
    display: block;
}

.marquee {
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 270px;
    width: 100%;
    line-height: 1;
    overflow: hidden;
    white-space: nowrap;
    font-size: 260px;
    font-family: 'din_next_lt_arabicbold';
    text-transform: uppercase;
    /*transition: all .5s ease;*/
    display: none;
}
    /*.marquee:hover {
    -webkit-text-fill-color: white;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}*/
    .marquee .marquee--inner {
        display: block;
        width: 340%;
        position: absolute;
        animation: marquee 40s linear infinite;
    }

        .marquee .marquee--inner:hover {
            animation-play-state: paused;
            /*color: red;*/
        }

        .marquee .marquee--inner span {
            float: left;
            width: 50%;
            overflow: hidden;
            transition: all .5s ease;
        }

@keyframes marquee {
    0% {
        left: 0;
    }

    100% {
        left: -100%;
    }
}

.small_names {
    position: absolute;
    left: 0;
    bottom: 6%;
    width: 100%;
    height: 12%;
}

    .small_names .name_div.active {
        display: block;
    }

    .small_names .name_div {
        position: absolute;
        display: none;
    }

        .small_names .name_div h3 {
            font-size: 40px;
            color: var(--black);
            line-height: 1;
            font-family: 'din_next_lt_arabicmedium';
            margin-bottom: .5vw;
        }

        .small_names .name_div h4 {
            font-size: 25px;
            color: var(--green);
            font-family: 'din_next_lt_arabiclight';
            line-height: 1;
        }

.tea_pagin {
    width: 60%;
    position: absolute;
    top: 0;
    left: 20%;
    height: 100vh;
}

    .tea_pagin .swiper-button-next {
        width: 35%;
        height: 60%;
        top: 0;
        align-items: baseline;
        cursor: none;
    }

    .tea_pagin .swiper-button-prev {
        width: 35%;
        height: 60%;
        top: 0;
        align-items: baseline;
        cursor: none !important;
    }

.bod_item .thumb_text {
    margin-top: 10px;
    transition: all .5s ease;
    opacity: 1;
    visibility: visible;
    text-align: center;
}

.bod_item.active .thumb_text {
    opacity: 0;
    visibility: hidden;
}

.bod_item .thumb_text h2 {
    color: var(--white);
    font-size: 20px;
    line-height: 1;
    font-family: 'din_next_lt_arabiclight';
    margin-bottom: 10px;
}

.bod_item .thumb_text p {
    color: var(--white);
    font-size: 20px;
    line-height: 1;
    font-family: 'din_next_lt_arabicbold';
    text-transform: uppercase;
}

.thumb_anim {
    position: relative;
}

    .thumb_anim::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -100%;
        width: 100%;
        height: 100%;
        background: var(--green);
        opacity: .36;
        transition: all .5s ease;
    }

.bod_item:hover .thumb_anim::after {
    bottom: 0;
}

.bod_item.active .thumb_anim::after {
    bottom: 0;
}

.expert_team {
    padding: 3vw 0 6vw;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-top: 1px solid;
    width: 86%;
    margin: auto;
}

    .expert_team .expert_text {
        width: 60%;
        margin: -10px 0 0;
    }

    .expert_team .sela_button {
        width: 29%;
        display: flex;
        flex-direction: row-reverse;
    }

    .expert_team .expert_text h2 {
        font-size: 27px;
        line-height: 1.3;
        font-family: 'din_next_lt_arabicbold';
        margin-bottom: 2vw;
    }

    .expert_team .expert_text p {
        font-size: 27px;
        line-height: 1.2;
        font-family: 'din_next_lt_arabiclight';
    }
/*bod*/

/*News and achivements*/
.news_main_wrap {
}

    .news_main_wrap .news_top {
        height: 100vh;
        width: 100%;
        background: url(../images/news-bg.jpg);
        background-size: cover;
        position: relative;
    }

        .news_main_wrap .news_top video {
            position: absolute;
            width: 100%;
            height: inherit;
            object-fit: cover;
            opacity: .4;
        }

        .news_main_wrap .news_top::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 200px;
            background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgb(0 0 0 / 0%) 100%);
        }

        .news_main_wrap .news_top .news_text {
            position: absolute;
            top: 50%;
            left: 40%;
            transform: translate(-50%, -50%);
        }

            .news_main_wrap .news_top .news_text h1 {
                font-size: 122px;
                color: var(--white);
                line-height: 1;
                text-transform: uppercase;
                font-family: 'din_next_lt_arabicheavy';
                /*height: 122px;*/
            }

            .news_main_wrap .news_top .news_text h2 {
                font-size: 40px;
                color: var(--white);
                line-height: 1;
                margin-top: 2vw;
            }

    .news_main_wrap .news_bottom {
        background: var(--white);
        width: 100%;
        position: relative;
        padding: 7vw;
    }

    .news_main_wrap .news_bottom {
        background: var(--white);
        width: 100%;
        position: relative;
        padding: 7vw;
        display: grid;
        grid-gap: 3vw;
        grid-template-columns: repeat(2, 1fr);
    }

.news_bottom .achive_left {
}

    .news_bottom .achive_left img {
        width: 100%;
        height: inherit;
        object-fit: cover;
    }

.news_bottom .achive_right {
}


.achive_right .news_sec {
    display: flex;
    margin-bottom: 3vw;
}

    .achive_right .news_sec .img_news {
        width: 30%;
    }

        .achive_right .news_sec .img_news img {
            width: 100%;
        }

    .achive_right .news_sec .text_news {
        width: 70%;
        padding-left: 3vw;
    }

        .achive_right .news_sec .text_news h2 {
            font-size: 18px;
            font-family: 'din_next_lt_arabiclight';
            color: var(--black);
            opacity: .6 !important;
            line-height: 1;
        }

        .achive_right .news_sec .text_news h3 {
            font-size: 42px;
            line-height: 1.1;
            font-family: 'din_next_lt_arabicmedium';
            margin-bottom: 1.5vw;
            color: var(--black);
        }

        .achive_right .news_sec .text_news p {
            font-size: 20px;
            line-height: 1.4;
            font-family: 'din_next_lt_arabiclight';
            margin-bottom: 2vw;
            width: 80%;
            color: var(--black);
        }
/*News and achivements*/

/*news detail*/
.news_detail_wrap {
    width: 100%;
    height: 100vh;
    position: relative;
    padding: 10vw 7vw 0;
}

    .news_detail_wrap .video_bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
        /*.news_detail_wrap .video_bg::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: linear-gradient(250deg, rgb(0 0 0) 0%, rgba(255,209,0,0) 100%);
}*/
        .news_detail_wrap .video_bg video {
            width: 100%;
            height: inherit;
            object-fit: cover;
        }

.nw_det_img {
}

    .nw_det_img img {
        width: 100%;
        height: inherit;
        object-fit: cover;
    }

.nw_det_head {
    width: 75%;
    margin-bottom: 4vw;
    padding-left: 3vw;
}

    .nw_det_head h1 {
        font-size: 75px;
        line-height: 1;
        color: var(--white);
        font-family: 'din_next_lt_arabicheavy';
        text-transform: uppercase;
    }

.news_details {
    width: 100%;
    background: var(--white);
    padding: 4vw 10vw 12vw;
}

    .news_details span {
        font-size: 22px;
        color: var(--grey);
        display: block;
        margin-bottom: 3vw;
    }

    .news_details h2 {
        font-size: 50px;
        line-height: 1.1;
        text-transform: uppercase;
        font-family: 'din_next_lt_arabicheavy';
        width: 75%;
        margin-bottom: 4vw;
        margin-top: 4vw;
    }

    .news_details .news_data {
        padding: 0 9vw 0 9vw;
    }

        .news_details .news_data p {
            font-size: 25px;
            line-height: 1.3;
            margin-bottom: 2vw;
        }

        .news_details .news_data h3 {
            font-size: 40px;
            font-family: 'din_next_lt_arabicbold';
            margin-top: 6vw;
            margin-bottom: 2vw;
        }
/*news detail*/


/*What we do*/
.we_do_wrap {
    color: var(--white);
    /* padding-top: 10vw; */
}

a.tab-link_what {
    cursor: pointer;
    font-size: 27px;
    margin-bottom: 1vw;
    transition: all .5s ease;
    opacity: .34;
    text-transform: uppercase;
    color: var(--white);
    line-height: 2.2;
    font-family: 'din_next_lt_arabicbold';
}

.what_wrapper {
    height: 100vh;
    width: 100%;
}

    .what_wrapper.below {
        height: auto;
        width: 100%;
        padding: 8vw 0;
    }
    /*.what_wrapper.below.land {
    height: 100vh;
    width: 100%;
}*/
    .what_wrapper .tab-wrapper {
        width: 100%;
        max-width: 100%;
        height: 100%;
        position: relative;
    }

        .what_wrapper .tab-wrapper ul.tabs {
            flex-direction: column;
            align-items: baseline;
            height: 100%;
            padding: 0 0 0 10vw;
        }

a.tab-link_what.active {
    opacity: 1;
    font-size: 50px;
    font-weight: bold;
    opacity: 1;
}

.whatwe_bg {
    height: 100vh;
    width: 100%;
    position: absolute;
    top: 0;
    z-index: -1;
    left: 0;
}

    .whatwe_bg img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: inherit;
        object-fit: cover;
        transition: all 1s ease;
        opacity: 0;
        transform: translate(30px, 0px);
        filter: brightness(0.2);
    }

        .whatwe_bg img.active {
            opacity: 1;
            /* filter: blur(0px); */
            /* transform: scale(1); */
            transform: translate(0px, 0px);
        }


.what_wrapper {
    height: 100vh;
    width: 100%;
    /* padding: 0 0 0 14vw; */
}

    .what_wrapper .right_text {
        position: absolute;
        right: 10vw;
        bottom: 7vw;
        z-index: 1;
        width: 42%;
    }

        .what_wrapper .right_text p {
            font-size: 22px;
            color: var(--white);
            text-align: left;
            line-height: 1.3;
        }

.tmkn_text {
    padding: 0 11vw;
}

    .tmkn_text h2 {
        font-size: 70px;
        line-height: 1.1;
        font-family: 'din_next_lt_arabicheavy';
        text-transform: uppercase;
        width: 80%;
        margin-bottom: 2vw;
    }

    .tmkn_text p {
        margin-top: 1vw;
        line-height: 1.3;
        font-size: 22px;
        font-family: 'din_next_lt_arabiclight';
        padding: 0 16vw 0 17vw;
        margin-bottom: 4vw;
    }

    .tmkn_text .sela_button {
        margin-left: 17vw;
    }

.tamkeen_wrap {
    padding: 10vw 0 7vw;
}



.what_slider {
    width: 100%;
    padding-top: 3.125rem;
    padding-top: 4vw !important;
}

    .what_slider .swiper-pagination-bullet,
    .swiper-pagination-bullet-active {
        background: #fff;
    }

    .what_slider .swiper-pagination {
        bottom: 1.25rem !important;
    }

    .what_slider .swiper-slide {
        width: 18.75rem;
        height: 90vh;
        display: flex;
        flex-direction: column;
        justify-content: end;
        align-items: self-start;
    }

        .what_slider .swiper-slide h2 {
            color: #fff;
            font-size: 50px;
            line-height: 1.1;
            text-transform: uppercase;
            /* position: absolute; */
            /* top: 25%; */
            font-family: 'din_next_lt_arabiclight';
            padding: 0 10vw 0 1.5vw;
            margin-bottom: 2vw;
            transition: all .5s ease;
        }

        .what_slider .swiper-slide p {
            color: var(--white);
            line-height: 1.2;
            font-size: 20px;
            font-family: 'din_next_lt_arabiclight';
            padding: 0 4vw 0 1.5vw;
            transform: translateY(50px);
            opacity: 0;
            transition: all 1s ease;
        }

    .what_slider .swiper-slide-active p {
        transform: translateY(0);
        opacity: 1;
    }

    .what_slider .swiper-slide a {
        margin: 1.25rem 1.563rem 3.438rem 1.563rem;
        padding: 0.438em 1.875rem;
        font-size: 0.9rem;
    }

        .what_slider .swiper-slide a:hover {
            color: #005baa;
        }

    .what_slider .swiper-slide div {
        display: block;
        opacity: 1;
        /*padding-bottom: 0.625rem;*/
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        text-align: left;
        padding-top: 15vw;
        background: #00000099;
    }

    .what_slider .swiper-slide-active div {
        display: block;
        opacity: 1;
    }

    /*.what_slider .swiper-slide--one {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url(../images/sport.jpg)
      no-repeat 50% 100% / cover;
}

.what_slider .swiper-slide--two {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url(../images/sport1.jpg)
      no-repeat 50% 100% / cover;
}

.what_slider .swiper-slide--three {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url(../images/sport.jpg)
      no-repeat 50% 100% / cover;
}

.what_slider .swiper-slide--four {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url(../images/sport1.jpg)
      no-repeat 50% 100% / cover;
}

.what_slider .swiper-slide--five {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url(../images/sport.jpg)
      no-repeat 50% 100% / cover;
}*/

    .what_slider .swiper-3d .swiper-slide-shadow-left,
    .what_slider .swiper-3d .swiper-slide-shadow-right {
        background-image: none;
    }

.sport_slider {
    /* width: 90%; */
    margin: auto;
    padding: 0 9%;
    position: relative;
    top: -60px;
}

div#sportFraction {
    position: absolute;
    right: 0;
    /* top: 0; */
    top: 8px;
    z-index: 2;
    line-height: 0;
    font-size: 20px;
    color: var(--white);
    font-weight: bold;
    letter-spacing: 3px;
}

.sport-bar {
    position: absolute;
    top: 0;
    right: 10%;
    width: 57%;
}

    .sport-bar .swiper-pagination {
        left: auto;
        right: 0;
        background: #323232;
        height: 2px !important;
        top: 9px !important;
    }

        .sport-bar .swiper-pagination span {
            background: #7e7c7c !important;
        }

.sport_pag .swiper-button-next {
    width: 4.5%;
    justify-content: flex-start;
}

.sport_pag {
    position: absolute;
    top: 46%;
    height: 50px;
    left: 4.5%;
    width: 91%;
}

.sports_enablbe {
    position: relative;
    padding-top: 5vw;
}

.sport_pag .swiper-button-prev {
    width: 4.5%;
    justify-content: flex-end;
}

.sport_prjct_wrap {
    background: url(../images/project-bg.png);
    background-size: cover;
    padding: 5vw 0 12vw 0;
}

.opacity_text h2 {
    font-size: 45px;
    line-height: 1;
    font-family: 'din_next_lt_arabiclight';
}

.opacity_text {
    padding: 0 20vw;
}

    .opacity_text h2:nth-child(1) {
        opacity: .40;
    }

    .opacity_text h2:nth-child(2) {
        opacity: .55;
    }

    .opacity_text h2:nth-child(3) {
        opacity: .75;
        font-family: 'din_next_lt_arabicregular';
    }

    .opacity_text h2:nth-child(4) {
        font-family: 'din_next_lt_arabicbold';
    }

/*What we do*/


/*Landmark*/
.boul_wrap .boul_text {
    text-align: center;
}

    .boul_wrap .boul_text h1 {
        font-size: 70px;
        width: 70%;
        margin: auto;
        font-weight: bold;
        text-transform: uppercase;
        line-height: 1;
        margin-bottom: 3vw;
        color: var(--white);
        font-family: 'din_next_lt_arabicbold';
    }

    .boul_wrap .boul_text h2 {
        text-align: center;
        font-size: 33px;
        line-height: 1;
        margin-bottom: 2vw;
        color: var(--white);
        font-family: 'din_next_lt_arabicregular';
    }

    .boul_wrap .boul_text a.icn_btn {
        text-align: center;
        display: inline-block;
        line-height: 1;
        color: var(--white);
        /* display: flex; */
        margin-bottom: 4vw;
    }

        .boul_wrap .boul_text a.icn_btn p {
            font-size: 25px;
            font-family: 'din_next_lt_arabiclight';
            display: inline-block;
            margin-right: 1vw;
        }

        .boul_wrap .boul_text a.icn_btn img {
        }

.boul_img {
    padding: 0 7vw;
}

    .boul_img img {
        width: 100%;
    }

.sport_prjct_wrap.boul {
    background: url(../images/shadow-bottom.jpg);
    background-size: cover;
    padding: 8vw 0 15vw 0;
}

.boul_wrap {
    padding: 10vw 0 0 0;
}

.content-wrapper.what {
    padding-top: 0;
}

.key_area {
    background: var(--white);
    padding: 7vw 0 0;
}

    .key_area .riyadh_swiper {
        padding: 0 12vw;
        position: relative;
    }

        .key_area .riyadh_swiper h2 {
            font-size: 65px;
            line-height: 1;
            width: 80%;
            color: var(--black);
            text-transform: uppercase;
            font-family: 'din_next_lt_arabicheavy';
        }

.riyadh_text {
    color: var(--black);
    position: absolute;
    opacity: 0;
}

.riyadh_slider {
    display: flex;
    align-items: center;
    padding: 2vw 10vw 0 10vw;
}

    .riyadh_slider .text_riyad_wrap {
        width: 50%;
        position: relative;
        height: 500px;
        padding-top: 3vw;
    }

    .riyadh_slider .myriyadh {
        width: 50%;
    }

.riyadh_text h3,
.riyadh_text h3 > p {
    font-size: 40px;
    font-family: 'din_next_lt_arabicbold';
    text-transform: uppercase;
    padding-right: 5vw;
    line-height: 1.1;
    margin-bottom: 2vw;
}

.riyadh_text p {
    font-size: 18px;
    line-height: 1.3;
    font-family: 'din_next_lt_arabiclight';
    padding: 0 3vw 0 5vw;
    margin-bottom: 2vw;
}

.riyadh_text img {
    width: 45%;
}

.riyadh_pag {
    width: 140px;
    position: absolute;
    top: 15%;
    right: 15vw;
    height: 50px;
}

    .riyadh_pag .swiper-button-next img, .riyadh_pag .swiper-button-prev img {
        width: 3vw;
    }

.riyadh_text.active {
    opacity: 1;
}

.faq_wrap {
    padding: 10vw 0;
}

    .faq_wrap .faq_top {
        display: flex;
        padding: 0 9vw;
    }

        .faq_wrap .faq_top > div {
            width: 50%;
        }

            .faq_wrap .faq_top > div h2 {
                font-size: 65px;
                line-height: 1;
                color: var(--black);
                text-transform: uppercase;
                font-family: 'din_next_lt_arabicheavy';
            }

            .faq_wrap .faq_top > div p {
                text-align: right;
                color: var(--black);
                line-height: 1.1;
                font-size: 30px;
                font-family: 'din_next_lt_arabiclight';
                padding-left: 7vw;
                margin-top: 11vw;
            }

                .faq_wrap .faq_top > div p a {
                    text-decoration: underline;
                    color: var(--blue);
                }

/*-------------------------------------*/

.b-faq .faq__title {
    position: relative;
    display: block;
    margin-bottom: 2px;
    color: var(--black);
    font-size: 30px;
    -webkit-transition: background-color 0.2s;
    transition: background-color 0.2s;
    font-family: 'din_next_lt_arabicbold';
    line-height: 1;
}

    .b-faq .faq__title:hover {
        transition: all 0.5s ease-out;
    }

.b-faq .faq__active {
}

.b-faq .faq__title .faq__spoiler {
    position: absolute;
    top: -5px;
    right: 0;
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    text-align: center;
    color: #fff;
    line-height: 30px;
    font-size: 20px;
    font-weight: 700;
    border-radius: 50%;
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    border: 1px solid var(--black);
}

.b-faq .faq__rotate {
    transform: rotate(180deg);
}

.b-faq .faq__content {
    font-size: 14px;
    display: none;
    padding: 1vw 0;
}

.b-faq .faq__symbol {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    transform: rotate(135deg);
}

.b-faq .faq__content p {
    color: var(--black);
    font-size: 18px;
}

.b-faq .faq__symbol svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.faq_accordion {
    padding: 0 9vw;
    margin-top: 7vw;
}

strong {
    font-family: 'din_next_lt_arabicbold';
}

.faq_accordion .b-faq {
    border-bottom: 1px solid #7070704f;
    padding: 2vw 0;
}

    .faq_accordion .b-faq:last-child {
        border: none;
    }

/*Landmark*/

/*Sela Portfolio*/
.portfolio_top {
    height: 100vh;
    width: 100%;
    background: url(../images/main-banner.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

    .portfolio_top video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: inherit;
        object-fit: cover;
        opacity: .92;
    }

    .portfolio_top::after {
        content: "";
        width: 100%;
        height: 200px;
        bottom: 0;
        left: 0;
        position: absolute;
        background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgb(0 0 0 / 0%) 100%);
    }

    .portfolio_top .port_text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        padding-left: 7vw;
    }

        .portfolio_top .port_text h1 {
            font-family: 'din_next_lt_arabicheavy';
            font-size: 75px;
            line-height: 1;
            color: var(--white);
            margin-bottom: 1vw;
        }

        .portfolio_top .port_text h2 {
            font-size: 35px;
            color: var(--white);
            line-height: 1.3;
        }

.wrapper_port > h3 {
    font-size: 70px;
    color: var(--white);
    line-height: 1;
    font-family: 'din_next_lt_arabicheavy';
}

.wrapper_port .bl_line {
    width: 130px;
    height: 4px;
}

.wrapper_port {
    padding: 10vw 7vw 0;
}

    .wrapper_port .tab-wrapper {
        max-width: 100%;
        margin-top: 7vw;
    }

        .wrapper_port .tab-wrapper ul.tabs {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
        }

.port_grid_wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 7vw 2vw;
}

    .port_grid_wrap .grid_content {
        display: flex;
        align-items: center;
    }

        .port_grid_wrap .grid_content > div {
            width: 50%;
        }

        .port_grid_wrap .grid_content .image-wrape {
            border: 1px solid #ffffff30;
        }

        .port_grid_wrap .grid_content > div > img {
            width: 100%;
            transform: scale(1.1);
            transition: all .5s ease;
            display: block;
        }

        .port_grid_wrap .grid_content .grid_text {
            padding-left: 2vw;
            width: 50%;
        }

            .port_grid_wrap .grid_content .grid_text h3 {
                font-size: 40px;
                color: var(--white);
                font-family: 'din_next_lt_arabicmedium';
                line-height: 1;
                margin-bottom: 1.5vw;
            }

            .port_grid_wrap .grid_content .grid_text > p {
                font-size: 18px;
                color: var(--white);
                font-family: 'din_next_lt_arabiclight';
                line-height: 1.4;
                margin-bottom: 2vw;
            }

            .port_grid_wrap .grid_content .grid_text a.icn_btn {
                text-align: center;
                display: inline-block;
                line-height: 1;
                color: var(--green);
                /* display: flex; */
            }

                .port_grid_wrap .grid_content .grid_text a.icn_btn p {
                    font-size: 20px;
                    font-family: 'din_next_lt_arabiclight';
                    display: inline-block;
                    margin-right: 1vw;
                }

                .port_grid_wrap .grid_content .grid_text a.icn_btn img {
                    width: .8vw;
                }

        .port_grid_wrap .grid_content > div img:hover {
            transform: scale(1);
        }

a.tab-link_what span {
    font-size: 25px;
    background: linear-gradient(to right, #00A886 0%, #00AEEF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    bottom: 15px;
    opacity: 0;
    font-family: 'din_next_lt_arabicmedium';
    visibility: hidden;
    transition: all .5s ease;
}

a.tab-link_what.active span {
    opacity: 1;
    visibility: visible;
    margin-right: 1vw;
    /* bottom: 15px; */
}


.tab-wrapper.below a.tab-link_what {
    font-size: 45px;
    /*font-family: 'din_next_lt_arabiclight';*/
    line-height: 1;
}

    .tab-wrapper.below a.tab-link_what.active {
        /* font-size: 27px; */
        color: var(--green);
        -webkit-text-stroke-width: thin;
    }

.tab-wrapper.below ul li {
    margin-bottom: 1vw;
}

.tab-wrapper.below {
    display: flex;
    align-items: baseline;
}

    .tab-wrapper.below ul.tabs {
        padding: 1vw 0 0 8vw;
        position: relative;
        top: 13px;
    }

.content-wrapper.landmark {
    padding: 0;
}

/*Popup Team*/

.popup-container {
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    transform: scale(1.3);
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(21, 17, 17, 0.61);
    display: flex;
    align-items: center;
}

.popup-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
}

    .popup-content p {
        font-size: 17px;
        padding: 10px;
        line-height: 20px;
    }

    .popup-content span {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

        .popup-content span:hover,
        .popup-content span:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

.popup-container.show {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

.more-articles {
    margin: 30px 30px 50px;
    font-size: 20px;
}

    .more-articles a {
        margin: 0 10px;
        text-decoration: underline;
    }
/*Popup Team*/


.modal {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000000e0;
    transition: all .4s;
    z-index: 1000;
    transform: scale(1.3);
}

    .modal.show {
        visibility: visible;
        opacity: 1;
        transform: scale(1);
    }

.modal-content {
    border-radius: 4px;
    position: relative;
    width: 70%;
    height: 90vh;
    max-width: 90%;
    background: #fff;
    padding: 5vw 4vw;
    background: url(../images/popup/pop-bg.png);
    background-size: cover;
    color: var(--white);
    background-position: center;
    overflow-x: scroll;
}

    .modal-content .inner-content {
        /*display: flex;*/
        height: 100%;
        width: 100%;
    }

    .modal-content .img {
        width: 30%;
    }

    .modal-content img {
        width: 100%;
        height: inherit;
        object-fit: cover;
        display: block;
    }

.modal-close {
    position: absolute;
    top: 30px;
    right: 30px;
    color: #585858;
    text-decoration: none;
}

.modal-content .inner-content .infos {
    width: 100%;
    position: absolute;
    left: 4vw;
    top: 40%;
}

    .modal-content .inner-content .infos p {
        font-size: 22px;
        line-height: 1.2;
        font-family: 'din_next_lt_arabiclight';
        width: 60%;
        /*margin-top: 4vw;*/
    }

    .modal-content .inner-content .infos h2 {
        font-size: 70px;
        line-height: 1;
        background: linear-gradient(to right, #00A886 0%, #00AEEF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-left: 14%;
        font-family: 'din_next_lt_arabicbold';
    }

    .modal-content .inner-content .infos h3 {
        font-size: 70px;
        line-height: 1;
        font-family: 'din_next_lt_arabiclight';
        margin-left: 20%;
        margin-bottom: 4vw;
    }

.position-static {
    position: absolute;
    right: 4vw;
    top: 6vw;
    font-size: 40px;
    width: 20%;
    text-align: right;
    line-height: 1.1;
    font-family: 'din_next_lt_arabiclight';
    color: #A7A7A7;
}

.modal-close img {
    width: 1vw;
}

.timeline-pag {
    width: 35%;
    position: absolute;
    right: -13.5%;
    bottom: 47%;
    height: 50px;
    transform: rotate(90deg);
    z-index: 222;
}

    .timeline-pag img {
        width: .5vw;
    }

    .timeline-pag::after {
        position: absolute;
        width: 20px;
        height: 2px;
        background: var(--white);
        top: 50%;
        left: 50%;
        display: none;
        content: "";
        transform: translate(-50%, -50%);
    }





/*Facts*/
.fact_number {
    /*margin-top: 8vw;*/
}

    .fact_number .number_fact {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        padding: 4vw 7vw 0;
        grid-gap: 4vw 0;
    }

.fact_detail .fact_bod h2 {
    background: linear-gradient(to right, #00A886 0%, #00AEEF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'din_next_lt_arabicheavy';
    font-size: 50px;
    line-height: 1;
    margin-bottom: .5vw;
}

.fact_detail .fact_bod {
    border-left: 2px solid var(--black);
    padding-left: 2vw;
}

.number_fact .fact_detail {
}

.fact_detail img {
    height: 35%;
    padding-left: 2vw;
}

.fact_detail .fact_bod p {
    font-size: 22px;
    line-height: 1;
    color: var(--black);
    font-family: 'din_next_lt_arabiclight';
}

.copy-right div img {
    width: 40%;
}
/*Facts*/

/*map*/
.contact-map {
    width: 100%;
    position: relative;
    margin-top: 6vw;
}

    .contact-map img {
        width: 70%;
        height: inherit;
        object-fit: cover;
        display: block;
    }

    .contact-map .tab-wrapper {
        max-width: 700px;
        margin: 0;
    }

        .contact-map .tab-wrapper ul.tabs li.tab-link {
            padding: 10px 80px;
        }


/*Dropdown*/
.dropdown {
    /* margin: 2em auto; */
    border-bottom: 1px solid #f9f9f938;
    width: 50%;
    position: absolute;
    right: 8vw;
}

    .dropdown a {
        display: block;
        padding: 0 0 14px 0;
        color: #fff;
        text-decoration: none;
        font-size: 22px;
        text-transform: uppercase;
    }

        .dropdown a:focus, .dropdown a:hover {
        }

        .dropdown a:active {
            /* background: #fbfcfc; */
        }

    .dropdown .fa {
        float: right;
        color: #fff;
        font-size: 15px;
        position: relative;
        top: 16px;
    }
    /*List*/
    .dropdown ul {
        display: none;
        border-top: 1px solid #f9f9f938;
        background: #000;
    }

    .dropdown li {
        padding: 5px 15px 13px 15px;
        cursor: pointer;
        color: #fff;
    }

        .dropdown li:not(:first-child) {
            border-top: 1px solid #f9f9f938;
        }

        .dropdown li:focus, li:hover {
            /* background: #ecf0f1; */
        }

        .dropdown li:active {
            /* background: #fbfcfc; */
        }

.map-list {
    /* width: 50%; */
}

    .map-list .map_text {
        display: flex;
        border-bottom: 1px solid #ffffff24;
        padding-bottom: 1vw;
        margin-bottom: 2vw;
    }

        .map-list .map_text .left {
            width: 40%;
        }

            .map-list .map_text .left h3 {
                font-size: 26px;
                color: var(--white);
                font-family: 'din_next_lt_arabicbold';
                line-height: 1;
            }

            .map-list .map_text .left h4 {
                font-size: 19px;
                color: var(--green);
            }

        .map-list .map_text .right p {
            font-size: 18px;
            color: var(--white);
            line-height: 1.1;
        }

        .map-list .map_text .right {
        }

.map-right {
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
    padding-right: 7vw;
}

    .map-right .top_drp {
        display: flex;
        align-items: baseline;
        margin-bottom: 7vw;
    }

        .map-right .top_drp h2 {
            font-size: 22px;
            color: var(--grey);
            width: 40%;
        }
/*map*/

.principle_wrap {
    padding: 5vw 0;
    background: #000;
}

.title_wicon .pr_wrap {
    width: 90%;
    margin: auto;
}

.principle_wrap .pr_wrap {
    width: 80%;
    margin: auto;
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    margin-bottom: 5vw;
    margin-top: 5vw;
}

    .principle_wrap .pr_wrap .pr_left {
    }

        .principle_wrap .pr_wrap .pr_left h2 {
            color: #ffffff6b;
            font-size: 70px;
            text-transform: uppercase;
            font-family: 'din_next_lt_arabicheavy';
            line-height: 70px;
            position: relative;
            height: 70px;
            transition: all .5s ease;
        }

    .principle_wrap .pr_wrap .pr_right > div {
        position: relative;
        margin-bottom: 6vw;
    }

        .principle_wrap .pr_wrap .pr_right > div::after {
            content: "";
            position: absolute;
            width: 80px;
            left: -130px;
            height: 2px;
            background: #ffffff6b;
            top: 23px;
        }

    .principle_wrap .pr_wrap .pr_right {
        padding-top: 10px;
        position: relative;
    }

        .principle_wrap .pr_wrap .pr_right p {
            color: #ffffff6b;
            font-size: 25px;
            line-height: 1.3;
            transition: all .5s ease;
        }

        .principle_wrap .pr_wrap .pr_right h3 {
            font-size: 35px;
            color: #ffffff6b;
            line-height: 1;
            margin-top: 7px;
            font-weight: bold;
            margin-bottom: 15px;
            transition: all .5s ease;
        }

.who_weare_meet {
    background: #ffffff;
    padding: 5vw 0 12vw;
}

    .who_weare_meet .whoWeAreSection {
        padding: 2vw 0 0 !important;
    }

.what_data.black > .left h2 {
    color: #000;
}

.what_data.black > .left p {
    color: #000;
}

.what_we_do.whatwe_meet .whatwedo #fraction {
    color: #000;
    right: 15%;
}

.what_we_do.whatwe_meet .swiper-pagination {
    background: #0000002e;
    /* right: 36% !important; */
    left: 15%;
}

    .what_we_do.whatwe_meet .swiper-pagination > span {
        background: #000;
    }

.what_we_do.whatwe_meet {
    background: var(--white);
    padding-top: 6vw;
}

    .what_we_do.whatwe_meet .swiper-slide {
        background: #fff;
    }

/*.sela_button.videos_btn {}*/

.sela_button.videos_btn a h3 {
    padding: 0 25px 3px 70px;
    border: none;
    background: #000000b3;
    font-weight: bold;
}

    .sela_button.videos_btn a h3::before {
        opacity: 0;
    }

    .sela_button.videos_btn a h3 img {
        width: 1.2vw !important;
        position: relative;
        position: absolute !important;
        left: 15%;
        top: 50%;
        transform: translate(0, -50%);
    }

.sela_button.videos_btn a > div {
    background: #000000b3;
    border: none;
}

.principle_wrap .pr_wrap:hover h2,
.principle_wrap .pr_wrap:hover p,
.principle_wrap .pr_wrap:hover h3 {
    color: #fff;
}

:focus-visible {
    outline: none;
}


.news_inner_wrap {
    background: #fff;
    z-index: 1;
    position: relative;
    padding: 5vw 0;
}


.news_wrap.news_botto .latest_news {
    padding: 0vw 0;
    /* background: var(--white); */
    width: 100%;
    position: relative;
    padding: 0 7vw;
    display: grid;
    grid-gap: 3vw;
    grid-template-columns: repeat(2, 1fr);
}

    .news_wrap.news_botto .latest_news .news_left,
    .news_wrap.news_botto .latest_news .news_right {
        width: 100%;
    }

.news_inner_wrap .tab-wrapper .tabs .tab-link {
    color: var(--black) !important;
    border-bottom: solid 1px var(--black) !important;
}

    .news_inner_wrap .tab-wrapper .tabs .tab-link::before {
        background: #000;
    }

.news_wrap.news_botto .news_right .text_news {
    color: #000;
}

    .news_wrap.news_botto .news_right .text_news h2 {
        color: #000 !important;
    }

.news_wrap.news_botto .latest_news .news_left .zoominn {
    position: relative;
    overflow: hidden;
}

    .news_wrap.news_botto .latest_news .news_left .zoominn img {
        transition: all .5s ease;
        transform: scale(1);
        display: block;
    }

.news_wrap.news_botto .latest_news .news_left:hover .zoominn img {
    transform: scale(1.1);
}

.news_wrap .latest_news .news_left .zoominn::after {
    background: linear-gradient(to bottom, #0000001a 0%, #000000 100%);
    content: "";
    width: 100%;
    position: absolute;
    height: 100%;
    bottom: 0;
}

.falcon_lgo img {
    width: 15%;
}

.search_accor {
    margin-top: 4vw;
}

.sliderkey .images-div .img::before {
    content: "";
    background: linear-gradient(to right, #0000001a 0%, #000000db 100%);
    position: absolute;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.sliderkey .images-div .img {
    position: relative;
}

.sliderkey .item .images-div .img:first-child::before {
    content: "";
    background: linear-gradient(to left, #0000001a 0%, #000000db 100%);
}

.sela_button.team {
    position: absolute;
    right: 4%;
    bottom: 10%;
}

    .sela_button.team a {
        color: var(--black);
    }

    .sela_button.team a {
    }

        .sela_button.team a svg path {
            fill: var(--black);
        }

        .sela_button.team a h3 {
            background: #ffffffc7;
            border: 1px solid;
        }

        .sela_button.team a > div {
            background: #ffffffc7;
            border: 1px solid;
            z-index: 1;
        }

        .sela_button.team a h3 > img {
            height: auto;
        }

.modal-content .sela_button.team {
    display: none;
}


.sela_button.bod_but a h3 {
    background: #00000059;
    color: #fff;
}

.sela_button.bod_but a > div {
    background: #00000059;
    color: #fff;
}

.sela_button.bod_but a svg path {
    fill: #fff;
}

.sela_button.bod_but a:hover svg path {
    fill: var(--blue);
}
/*.bod_img_wrapper .bod_img .img > img {
    filter: brightness(0.6);
}*/
.bod_img_wrapper .bod_img .img {
    position: relative;
    background: #000;
}

.bod_img_wrapper .bod_img.active {
    z-index: 1;
}

.bod_img_wrapper .bod_img {
       z-index:  0;
}

.our_team_wrap .team_slider .img {
    position: relative;
}

::selection {
    color: #fff;
    background: #000;
}

.main_banner .fist_banner {
    overflow: hidden;
}

    .main_banner .fist_banner i {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #0000003d;
    }

    .main_banner .fist_banner iframe {
        transform: scale(1.2);
    }

.scroll_down {
    position: absolute;
    right: 2%;
    bottom: 4%;
    width: 40px;
    height: 40px;
    z-index: 11;
    opacity: 1;
    transition: all .5s;
}

    .scroll_down img {
        width: 40px;
        height: 40px;
    }

    .scroll_down.onScroll {
        opacity: 0;
    }

.distination_social {
    display: flex;
    z-index: 11;
    position: relative;
    align-items: baseline;
    justify-content: center;
    margin-bottom: 3vw;
}

    .distination_social a {
        border: 1px solid #fff;
        border-radius: 50px;
        height: 50px;
        width: 50px;
        position: relative;
        display: block;
        transition: all .5s ease-in-out;
    }

        .distination_social a svg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 18px;
            height: 18px;
            transition: all .5s ease;
        }

            .distination_social a svg path {
                fill: var(--white);
                transition: all .5s ease;
            }

    .distination_social > div {
        margin-right: 1vw;
    }

        .distination_social > div:last-child {
            margin: 0;
        }

    .distination_social a:hover {
        background: #fff;
    }

        .distination_social a:hover svg path {
            fill: var(--green);
        }

.originally-focused .video-section .left h2:nth-child(1) {
    opacity: .55;
}

.originally-focused .video-section .left h2:nth-child(2) {
    opacity: .75;
}

.sela_busi .selaleft h3:nth-child(1) {
    opacity: .55 !important;
}

.sela_busi .selaleft h3:nth-child(2) {
    opacity: .75 !important;
}

div#audio-control {
    font-size: 20px;
    color: #fff;
    border: 1px solid #fff;
    background: #00000061;
    position: absolute;
    bottom: 4%;
    left: 3%;
    line-height: 1;
    z-index: 1;
    cursor: pointer;
    padding: 10px 30px 18px;
    border-radius: 50px;
}
.cookie {
    position: fixed;
    bottom: -100%;
    width: 90%;
    left: 0;
    background: #fff;
    border-radius: 5px;
    padding: 0;
    display: flex;
    align-items: center;
    z-index: 10;
    left: 5%;
    justify-content: space-between;
    padding: 15px 20px 24px;
}

    .cookie.show {
        bottom: 20px;
    }

    .cookie .cont {
        padding-right: 10vw;
    }

    .cookie h2 {
        font-size: 24px;
        line-height: 1;
        margin-bottom: 10px;
        color: #00A886;
    }

    .cookie p {
        font-size: 16px;
        line-height: 1.2;
        color: rgba(0, 0, 0, .8);
    }