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


::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--Grey-Dark);
}

::-webkit-scrollbar-thumb {
    background: lighten(var(--Primary-Primary), 20%);
    background-color: var(--primary-primary-dark);
    border-radius: 10px;
    transition: all 200ms ease-out;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--Primary-Primary);
}

html {
    scroll-behavior: smooth;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

h1 {
    margin: 0px !important;
}
:root {
    --hue: 210;
    --size: 100px;
    --border: 10px;
    --speed: 1s;
    --blur: var(--border);
}


@font-face {
    font-family: 'Dubai';
    src:    url('../font/dubai/DubaiW23-Bold.woff2') format('woff2'),
            url('../font/dubai/DubaiW23-Bold.woff') format('woff'),
            url('../font/dubai/DubaiW23-Bold.ttf') format('truetype'),
            url('../font/dubai/DubaiW23-Bold.eot');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Dubai';
    src:    url('../font/dubai/DubaiW23-Light.woff2') format('woff2'),
            url('../font/dubai/DubaiW23-Light.woff') format('woff'),
            url('../font/dubai/DubaiW23-Light.ttf') format('truetype'),
            url('../font/dubai/DubaiW23-Light.eot');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Dubai';
    src:    url('../font/dubai/DubaiW23-Medium.woff2') format('woff2'),
            url('../font/dubai/DubaiW23-Medium.woff') format('woff'),
            url('../font/dubai/DubaiW23-Medium.ttf') format('truetype'),
            url('../font/dubai/DubaiW23-Medium.eot');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Dubai';
    src:    url('../font/dubai/DubaiW23-Regular.woff2') format('woff2'),
            url('../font/dubai/DubaiW23-Regular.woff') format('woff'),
            url('../font/dubai/DubaiW23-Regular.ttf') format('truetype'),
            url('../font/dubai/DubaiW23-Regular.eot');
    font-weight: normal;
    font-style: normal;
}


body {
    margin: 0;
    font-family: 'Dubai';
    overflow-x: hidden;
    overflow: hidden;
    position: relative;
    background-color: var(--Black);
}



body:not(.dark-mode) {
    /* Dark */
    --primary-primary-dark: #2A9595;
    --Primary-Primary: #8DC9CC;
    --primary-primary-light: #E3F1F3;
    --Black: #1E2626;
    --Body: #4A6061;
    --Secondry-Secondry: #889899;
    --secondry-secondry-light: #CFD1D2;
    --Grey-Dark-Grey: #ECECEC;
    --Grey-Mid-grey: #F4F4F4;
    --Grey-Light-grey: #FAFAFA;
    --Grey-Dark: #161616;
    --Black_Black: #000;
    
    --p-p-const: #2A9595;
    --p-p-const-two: #2A9595;
    --light-mod-on: transparent;
    --btn-const: #2A9595;
    --btn-two-const: #FAFAFA;
    --sub-color: #889899;
    --footer-color: #889899;
    --cert-color-one: #16161662;
    --cert-color-two: #1E2626;
    --abt-bac-one: rgba(0, 0, 0, 0.719);
    --abt-bac-two: rgba(0, 0, 0, 0.63);
    --abt-bac-one-cer: rgba(0, 0, 0, 0.719);
    --abt-bac-two-cer: rgba(0, 0, 0, 0.63);
    --cert-box-shad: rgba(0, 0, 0, 0.37);
    --ser-col-back-one: #4A6061;
    --p-p-d-one: #2A9595;
    --care-col-one: #2A9595;
    --col-bef-partners: #161616;
    --vis-mis-tit: #FAFAFA;
    --vis-mis-desc: #CFD1D2;
    --nav-sp-men: #CFD1D2;
    --co-new: #4A6061;
    --txt-colo-tit: #FAFAFA;
    --txt-colo-desc: #EEEEEE;
    --col-gr-dar: #161616;
    --col-gr-dar-opa: #16161667;
    --col-lin-one: #161616bd;
    --col-lin-two: #2a95959d;
    --col-bx-timl: #000000;
    --col-line-timl: #8F8F8F;
    --col-txt-timl: #8F8F8F;
    --col-txttwo-timl: #8DC9CC;
    --col-linhead-timl: #8DC9CC;
    --col-linheadt-timl: #8F8F8F;
    --col-txthead-timl: #D4D4D4;
    --col-txt-des-ourb: #CFD1D2;
    --col-txt-dest-ourb: #8DC9CC;
    --col-txt-tit-b: #CFD1D2;
    --col-backg-b:#000000d2;
    --col-btn-b: #2A9595;
    --col-back-contact: #161616;
    --col-bor-contact-two: #889899;
    --col-black-low-op: #1e262663;
    --col-bor-contact: #889899;
    --col-btn-fil: #2A9595;
    --col-btn-back: transparent;
    --col-swip-sp: #D9D9D9;
    --back-col-fot: #0000006b;
    --down-col: #161616;
    --col-fot-one: #889799;
    --col-down-two: #2c3f3f;
    --col-down-three: #ffffff1e;
    --faq-ans: #cacaca;

    --iso-opacity: 0.6;
    --opacity-two: 1;
    --opacity-three: 1;
    
    --img-filter-one: none;
    --img-filter-two: none;
    --img-filter-three: none;
    --img-filter-four: none;
    --log-filter: none;
}
.dark-mode {
    /* White */
    --Grey-Dark: #FAFAFA;
    --Grey-Light-grey: #1E2626;
    --Primary-Primary: #2A9595;
    --primary-primary-dark: #4A6061;
    --secondry-secondry-light: #4A6061;
    --Black: #EEE;
    --Grey-Dark-Grey: #4A6061;
    --Black_Black: #FAFAFA;

    --p-p-const: #2A9595;
    --p-p-const-two: transparent;
    --light-mod-on: white;
    --btn-const: #2A9595;
    --btn-two-const: #FAFAFA;
    --sub-color: #2A9595;
    --footer-color: #4A6061;
    --cert-color-one: #8dc9cc70;
    --cert-color-two: #6590924f;
    --abt-bac-one: rgba(228, 228, 228, 0.719);
    --abt-bac-two: rgba(158, 158, 158, 0.63);
    --abt-bac-one-cer: rgba(228, 228, 228, 0.281);
    --abt-bac-two-cer: rgba(158, 158, 158, 0.418);
    --cert-box-shad: rgba(255, 255, 255, 0.103);
    --ser-col-back-one: #FAFAFA;
    --p-p-d-one: #FAFAFA;
    --care-col-one: #4A6061;
    --col-bef-partners: #FAFAFA;
    --vis-mis-tit: #FAFAFA;
    --vis-mis-desc: #CFD1D2;
    --nav-sp-men: #000;
    --co-new: #889899;
    --txt-colo-tit: #161616;
    --txt-colo-desc: #1E2626;
    --col-gr-dar: #EEEEEE;
    --col-gr-dar-opa: #eeeeee73;
    --col-lin-one: #bdbdbdc5;
    --col-lin-two: #2a95959d;
    --col-bx-timl: #FFFFFF;
    --col-line-timl:#4A6061;
    --col-txt-timl: #1E2626;
    --col-txttwo-timl: #161616;
    --col-linhead-timl: #889899;
    --col-linheadt-timl: #889899;
    --col-txthead-timl: #1E2626;
    --col-txt-des-ourb: #1E2626;
    --col-txt-dest-ourb: #2A9595;
    --col-txt-tit-b: #1E2626;
    --col-backg-b:#bdbdbdc7;
    --col-btn-b: #161616;
    --col-back-contact: #1E2626;
    --col-bor-contact-two: #86898a;
    --col-black-low-op: #eeeeee28;
    --col-bor-contact: #161616;
    --col-btn-fil: #CFD1D2;
    --col-btn-back: #2A9595;
    --col-swip-sp: #1E2626;
    --back-col-fot: #ffffff5e;
    --down-col: #F4F4F4;
    --col-fot-one: #161616;
    --col-down-two: #e0dddd;
    --col-down-three: #00000044;
    --faq-ans: #5a5a5a;


    --iso-opacity: 1;
    --opacity-two: 0.2;
    --opacity-three: 0.5;

    --img-filter-one: grayscale(100%) brightness(40%);
    --img-filter-two: grayscale(100%) brightness(0%);
    --img-filter-three: grayscale(100%) brightness(80%);
    --img-filter-four: grayscale(0%) brightness(0%);
    --log-filter: grayscale(100%) brightness(0%);
}


.flex {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.sub_title {
    display: flex;
    flex-flow: row;
    gap: 16px;
}

.sub_title .line {
    display: block;
    width: 40px;
    height: 1px;
    margin-top: auto;
    margin-bottom: auto;
    background-color: var(--p-p-const);
}

.btn_st_one {
    background-color: transparent;
    outline: 0px transparent;
    width: 198px;
    padding: 16px 32px;
    gap: 16px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0.5px solid var(--btn-const);
    color: var(--btn-const);
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.2px;
    cursor: pointer;
}

.btn_st_two {
    outline: 0px transparent;
    border: 0px transparent;
    background-color: var(--btn-const);
    width: 198px;
    padding: 12px 16px;
    gap: 8px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    font-family: 'Dubai';
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.175px;
    cursor: pointer;
    color: #fafafa;
}
button::selection,
input::selection,
textarea::selection,
a::selection,
li::selection,
img::selection,
p::selection,
div::selection,
h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
span::selection,
body::selection {
    background-color: #2a9595b9;
    color: white;
}
button,
input,
textarea,
a,
li,
img,
p,
div,
h1,
h2,
h3,
h4,
h5,
span,
body{
    transition: background-color 400ms ease-in-out;
    transition: color 400ms ease-in-out;
}


.av_body_ss {
    color: var(--Secondry-Secondry, #889899);
    /* Body */
    font-family: 'Dubai';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 25.6px;
    /* 160% */
    letter-spacing: 0.08px;
}

.av_body_ssl {
    color: var(--secondry-secondry-light, #CFD1D2);
    /* Body */
    font-family: 'Dubai';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 25.6px;
    /* 160% */
    letter-spacing: 0.08px;
}

.av_body_gdg {
    color: var(--Grey-Dark-Grey, #ECECEC);
    /* Body */
    font-family: 'Dubai';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 25.6px;
    /* 160% */
    letter-spacing: 0.08px;
}

.cg_title_glg {
    color: var(--Grey-Light-grey, #FAFAFA);
    /* H Bold/H3 Bold */
    font-family: 'Dubai';
    font-size: 34px;
    font-style: normal;
    font-weight: 700;
    line-height: 44.2px;
    /* 130% */
    letter-spacing: 0.085px;
}

.cg_h1title_glg {
    color: var(--Grey-Light-grey, #FAFAFA);
    /* H Bold/H1 Bold */
    font-family: 'Dubai';
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    line-height: 44.2px;
    /* 73.667% */
    letter-spacing: -0.3px;
}

.cg_subtit_pp {
    color: var(--Primary-Primary, #8DC9CC);
    /* H Bold/H5 Bold */
    font-family: 'Dubai';
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px;
    /* 130% */
    letter-spacing: 0.03px;
}

.cg_subtitle_ssl {
    color: var(--secondry-secondry-light, #CFD1D2);
    text-align: center;
    /* Subtitle Bold */
    font-family: 'Dubai';
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 25.6px;
    /* 160% */
    letter-spacing: 0.016px;
}

.cg_subtitle_glg {
    color: var(--Grey-Light-grey, #FAFAFA);
    font-family: 'Dubai';
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 25.6px;
    letter-spacing: 0.016px;
}

@keyframes show_page_title {
    0% {
        opacity: 0;
        transform: translate(-50%, -100%);
    }

    30% {
        opacity: 0;
    }

    40% {
        transform: translate(-50%, -100%);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.lang_txt{
    color: var(--Secondry-Secondry, #889899);
}
.act_lang_col{
    color: var(--primary-primary-dark);
}
/* End Global Rules */

/* ====================================================== Start NavBar */
.download_main {
    width: 100%;
    height: 100vh;
    padding: 16px;
    position: fixed;
    z-index: 1000000000000000000000000;
    background-color: #1e262693;
    display: none;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.download_main .container{
    width: 100%;
    max-width: 800px;
    background-color: #161616;
    background-color: var(--down-col);
    box-shadow: 0px 0px 10px 14px #ffffff07;
    padding: 40px 16px;
    border-radius: 10px;
    position: relative;
}
.download_main .head{
    display: flex;
    flex-flow: column nowrap;
    gap: 18px;
}
.download_main .head .title{
    color: var(--txt-colo-tit);
    font-size: 32px;
}
.download_main .head .desc{
    color: var(--txt-colo-desc);
}
.download_main .container{
    display: flex;
    flex-flow:  column nowrap;
    gap: 32px;
}
.download_main .links_download{
    width: 100%;
    height: 44px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    gap: 16px;
}
.download_main .gplay{
    width: 135px;
    height: 100%;
}
.download_main .gplay img{
    width: 100%;
}
.download_main .appstore{
    width: 135px;
    height: 100%;
}
.down_applink{
    transition: all 300ms ease-in-out;
}
.down_applink:hover{
    scale: 1.1;
}
.download_main .close_btn{
    color: var(--txt-colo-tit);
    position: absolute;
    top: 16px;
    right: 16px;
    cursor: pointer;
    font-size: 24px;
}
@media (max-width: 950px) {
    .download_main .container{
        padding: 50px 16px;
    }
    .download_main .head .title{
        font-size: 24px;
    }
}

.qr-down{
    height: 0px;
    background-color: var(--Black);
    position: absolute;
    top: 100%;
    left: 120px;
    color: var(--txt-colo-tit);
    font-size: 14px;
    text-align: center;
    box-shadow: 0 2px 10px var(--col-down-three);
    z-index: 10000000000000;
    overflow: hidden !important;
    transition: all 200ms ease-out;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    letter-spacing: 1px;
    background: radial-gradient(50% 50% at 50% 80%, var(--col-down-two) 0%, var(--Black) 100%);;
}
.qr-down.show{
    height: 360px;
}
.qr-down .box{
    width: 230px;
    height: 100%;
    padding: 16px 13px;
    display: flex;
    flex-flow: column nowrap;
    gap: 12px;
    border: 1px solid var(--co-new);;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top: 0px;
}
@media (max-width: 950px) {
    .qr-down{
        left: 16px;
    }
}
.qr-down .qr-img{
    overflow: hidden;
}
.qr-down .qr-img img{
    border-radius: 10px;
    width: 202px;
    height: 202px;
}
.qr-down .down-btn-qr{
    background-color: #2A9595;
    border-radius: 6px;
    overflow: hidden;
}
.qr-down .down-btn-qr a{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 5px;
    color: #FFFFFF !important;
    font-size: 14px;
}
.qr-down .down-btn-qr a .img-os{
    width: 20px;
    height: 20px;
}
.qr-down .down-btn-qr a .img-os img{
    width: 100%;
}
.navbar {
    width: 100% !important;
    background-color: var(--Black);
    z-index: 999999;
    position: fixed;
    top: 0px;
    left: 0px;
    transition: top 300ms ease-out;
}
#navbar{
    position: relative;
}
.navbar .container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 16px 120px;
    position: relative;
}
.navbar .container::before {
    content: "";
    width: calc(100% - 240px);
    height: 1px;
    position: absolute;
    bottom: 0px;
    left: 120px;
    background-color: var(--co-new);
}
.navbar .container .content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 32px;
}
.navbar .logo {
    width: 50px;
    height: 64px;
}
.navbar .logo a {
    width: 100%;
    height: 100%;
    display: flex;
}
.navbar .logo a img {
    width: 100%;
    height: 100%;
    filter: var(--log-filter);
}
.navbar .container .content .icon_search{
    position: absolute;
    right: 212px;
    top: calc(50% - 17.5px);
}
.navbar .container .content .icon_lang{
    position: absolute;
    right: 166px;
    top: calc(50% - 17.5px);
    display: none;
    z-index: 1000000001;
}
.lang_act_icon{
    display: block;
}
.navbar .container .content .icon_lang,
.navbar .container .content .icon_search{
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.navbar .container .content .icon_search,
.navbar .container .content .icon_lang{
    display: none;
}
.sear_act_icon,
.lang_act_icon{
    display: flex !important;
}
.navbar .container .content .icon_lang .lang_icon{
    width: 100%;
    height: 100%;
}
.navbar .container .content .icon_lang img,
.navbar .container .content .icon_search img{
    width: 100%;
    height: 100%;
    filter: var(--log-filter);
}
.navbar .connt_logo{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    z-index: 1;
}
.navbar .nav_app{
    padding: 8px 10px;
    min-width: 47.97px;
    max-width: 47.97px;
    height: 50px;
    background-color: #ffffff;
    border-radius: 14px;
    position: relative;
    cursor: pointer;
    /* overflow: hidden; */
    box-shadow: 0px 0px 10px #00000059;
    animation: icon_anim 2s ease-in-out infinite alternate-reverse;
}
.navbar .nav_app::before{
    content: "Download Application";
    width: 80px;
    height: 100%;
    position: absolute;
    right: 10px;
    z-index: 1000;
    font-size: 17px;
    line-height: 16px;
    padding-left: 8px;
    top: 0px;
    left: 100%;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-flow: column;
    justify-content: center;
    outline: none;
    background: url(../img/giphy_img.webp);
    background-size: contain;
    background-position: top left;
    -webkit-background-clip: text;
    color: transparent;
}
.navbar .nav_app.ar::before{
    content: "تحميل التطبيق";
}
.navbar .nav_app .image {
    width: 100%;
    height: 100%;
}
.navbar .nav_app .image img{
    width: 100%;
    height: 100%;
    filter: grayscale(0%) brightness(0%);
}
.nav_app .down_icon_anim{
    width: 0px;
    height: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0000008a;
    backdrop-filter: blur(10px);
    border: 1px solid #fff;
    padding: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    transform: translate(-50%, -50%);
    color: #FFF;
    border-radius: 14px;
    animation: down_anim_two 10s ease-in-out infinite;
}
.nav_app .down_icon_anim .icon_down{
    width: 17px;
    animation: down_anim_icon 10s ease-in-out infinite;
    
}
@keyframes down_anim_two {
    0% {
        width: 0px;
        height: 0px;
        opacity: 0;
    }
    30%{
        width: 0px;
        height: 0px;
        opacity: 0;
    }
    40% {
        width: 100%;
        height: 100%;
        opacity: 1;
    }
    90% {
        width: 100%;
        height: 100%;
        opacity: 1;
    }
    100% {
        width: 0px;
        height: 0px;
        opacity: 0;
    }
}
@keyframes down_anim_icon {
    0% {
        transform: scale(0);
    }
    40%{
        transform: scale(0);
    }
    45%{
        transform: scale(1);
    }
    85% {
        transform: scale(1);
    }
    90% {
        transform: scale(0);
    }
    100% {
        transform: scale(0);
    }
}
@media (max-width: 950px){
    .navbar .connt_logo{
        gap: 16px;
    }
    .navbar .nav_app {
        padding: 5px 7px;
        height: 44px;
        min-width: 41.97px;
        max-width: 41.97px;
    }
    .nav_app .down_txt{
        left: calc(100% - 3px);
    }
    .nav_app .down_txt .txt{
        padding: 6px 0px;
        font-size: 15px;
    }
}
.navbar .container .content .icon_lang .lang_box{
    width: 100px;
    height: 0px;
    position: absolute;
    box-shadow: 0px 10px 10px var(--Grey-Dark);
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    right: -34px;
    top: calc(100% + 10px);
    background-color: var(--Black);
    color: var(--Secondry-Secondry, #889899);
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    overflow: hidden;
    transition: all 300ms ease-in-out;
    z-index: 1000000000000;
}
.navbar .container .content .icon_lang .lang_box.box_lan_active{
    height: 100px !important;
}

body.dark-mode .ball {
    transform: translate(30px);
    background: #fafafa !important;
}

body.dark-mode .fa-moon {
    color: #111 !important;
}

#dark_light_btn{
    outline: 0px transparent;
    border: 0px transparent;
    background-color: gray;
    width: 70px;
    height: 35px;
    border-radius: 30px;
    position: absolute;
    top: 30px;
    right: 30px;
    padding: 4px;
    cursor: pointer ;
}
@media (max-width: 950px) {
    #dark_light_btn{
        top: 18px;
    }
}

#dark_light_btn .checkbox {
    opacity: 0;
    position: absolute;
    cursor: pointer;
}
#dark_light_btn label {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px;
    cursor: pointer;
}
#dark_light_btn .fas {
    font-size: 1rem;
    color: white;
}
#dark_light_btn .ball {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    transition: .5s;
    background: #222;
    position: absolute;
    margin-left: -2px;
    cursor: pointer;
}
@media screen and (min-width: 0px) and (max-width: 1200px) {
    #dark_light_btn{
        width: 50px;
        height: 25px;
    }
    #dark_light_btn .ball {
        width: 15px;
        height: 15px;
    }
    #dark_light_btn .fas {
        font-size: 10px;
    }
    body.dark-mode .ball {
        transform: translate(23px);
    }
}

#menu_icon {
    width: 30px;
    height: 25px;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}
.sp {
    width: 30px;
    height: 3px;
    background-color: var(--nav-sp-men);
    border-radius: 20px;
    transition: all 0.3s ease;
}
#span_one,
#span_three {
    transform-origin: 0 50%;
}
#span_two {
    transform-origin: 50% 50%;
}
#menu_icon.open #span_one {
    transform: rotate(45deg);
}
#menu_icon.open #span_two {
    display: none;
}
.navbar #navbar_box {
    height: 0px;
    overflow: hidden;
}
#menu_icon.open #span_three {
    transform: rotate(-47deg);
}
.navbar .container {
    width: 100% !important;
}

@media screen and (min-width: 951px) {
    #menu_icon {
        position: absolute;
        right: 120px;
        top: calc(50% - 12.5px);
    }

    #navbar_box {
        box-shadow: 0px 10px 10px var(--Grey-Dark);
        position: absolute;
        width: 0px;
        top: calc(100% - 2px);
        right: -1000px;
        height: 100vh !important;
        transition: all 350ms ease-out;
        z-index: 999999999;
        background-color: var(--Black);
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    .nav_active {
        width: 450px !important;
        right: 0px !important;
        display: flex !important;
        height: 100vh !important;
        justify-content: center !important;
        align-items: center !important;
        transition: all 250ms ease-in-out;
    }

    .links_box li a {
        font-family: 'Dubai';
        font-size: 24px;
        line-height: 44.2px;
        letter-spacing: -0.3px;
    }

}

@media screen and (min-width: 951px) and (max-width: 1300px) {
    #navbar_box {
        gap: 2px;
    }
    .nav_active {
        width: 350px !important;
    }
    .links_box li a {
        font-size: 18px;
    }
}

.navbar ul li {
    list-style: none;
    display: inline;
}
.links_box li a {
    transition: all 300ms ease-out;
}
.links_box:hover #loc_page a {
    color: var(--Secondry-Secondry) !important;
}
.links_box:hover #loc_page:hover a {
    color: var(--primary-primary-dark) !important;
}
.links_box #loc_page a {
    color: var(--primary-primary-dark);
}
.links_box li:hover a {
    color: var(--primary-primary-dark);
}
/* ====================================================== End NavBar */

.swiper-container-one{
    width: 100%;
    height: 100vh;
    cursor: grab;
}
::-webkit-scrollbar {
    width: 0px;
}
.custom-pagination {
    width: 10px;
    top:50% !important;
    left: 16px !important;
    display: flex;
    flex-flow: column nowrap;
}
@media screen and (min-width: 951px) and (max-width: 1300px){
    .custom-pagination {
        top:70% !important;
    }
}
.custom-pagination .swiper-pagination-bullet {
    background-color: transparent !important;
    opacity: 1 !important;
    width: 10px !important;
    height: 20px !important;
    border-radius: 10px !important;
    border: 1px solid #ffffff77 !important;
    transition: all 300ms ease-in-out !important;
    background: rgba(0, 0, 0, 0.123) !important; /* Adjust the alpha value for transparency */
    backdrop-filter: blur(10px) !important;
}
.custom-pagination .swiper-pagination-bullet-active{
    background-color: #2A9595 !important;
    height: 40px !important;
    border: 1px solid #ffffff88 !important;
}
@media (max-width: 950px) {
    .custom-pagination .swiper-pagination-bullet-active,
    .custom-pagination .swiper-pagination-bullet {
        display: none !important;
    }
}
.form_sections::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}
.form_sections .box_sec{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;
    position: relative;
}
.form_sections .box_sec.active {
    transition: all 400ms ease;
}
.form_sections .box_sec.three{
    height: fit-content;
    display: flex;
    flex-flow: column nowrap;
}

.form_sections .box_sec.one .container{
    width: 100%;
    height: 100%;
    position: relative;
}
.box_sec.one .container .contentn{
    width: 100%;
    background-color: var(--Black);
    padding: 20px 120px 32px 120px;
    display: flex;
    flex-flow:  row nowrap;
    justify-content: center;
    align-items: center;
}
.box_sec.one .container .contentn .title{
    font-family: 'Dubai';
    font-size: 60px;
    font-weight: 700;
    line-height: 78px;
    letter-spacing: -0.5%;
    width: 670px;
    display: flex;
    align-items: center;
    padding-right: 30px;
    color: var(--txt-colo-tit);
    position: relative;
    z-index: 10;
}
.box_sec.one .container .contentn .title::before{
    content: "";
    width: 1000px;
    height: calc(100% + 10px);
    background-color: transparent;
    position: absolute;
    top: -5px;
    right: calc(100% + 24px);
    transition: all 500ms ease-out;
    z-index: -1;
}
.box_sec.one.active .container .contentn .title::before{
    content: "";
    width: 1000px;
    height: calc(100% + 10px);
    background-color: var(--p-p-const);
    position: absolute;
    top: -5px;
    right: calc(100% + 24px);
    animation: show_before_el 4s ease-in-out;
    z-index: -1;
}

@keyframes show_before_el {
    0%{
        width: 1000px;
        right: calc(100% + 24px);
    }
    8%{
        width: 10px;
        right: calc(100% + 24px);
    }
    15%{
        width: 10px;
        right: calc(100% + 24px);
    }
    30%{
        width: 100%;
        right: 0px;
    }
    40%{
        width: 100%;
        right: 0px;
    }
    60%{
        width: 10px;
        right: calc(100% + 24px);
    }
    70%{
        width: 10px;
        right: calc(100% + 24px);
    }
    100%{
        width: 1000px;
        right: calc(100% + 24px);
    }
}
.box_sec.one .container .contentn .desc{
    font-family: 'Dubai';
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0.15%;
    padding-left: 40px;
    width: calc(100% - 670px);
    min-width: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--txt-colo-desc);
}
.box_sec.one .container .img{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: calc(100% - 250px);
    z-index: -1;
}
.box_sec.one .container .img::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: linear-gradient(to bottom, var(--Black), transparent);
    z-index: 1;
}
.box_sec.one .container .img::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background:  var(--col-black-low-op);
    z-index: 1;
}
.box_sec.one .container .img .sl_im {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    animation: slide_img 28s infinite;
    opacity: 0;
    transition: all 800ms ease-in-out;
}
.box_sec.one.active .container .img .sl_im {
    opacity: 1;
}
.box_sec.one .container .img .sl_im.one {
    animation-delay: 0s;
    background: url(../img/back_newserv.jpeg) no-repeat;
}
.box_sec.one .container .img .sl_im.two {
    animation-delay: -7s;
    background: url(../img/back__home_hero_one_new.jpeg) no-repeat;
}
.box_sec.one .container .img .sl_im.three {
    animation-delay: -14s;
    background: url(../img/back_five.jpeg) no-repeat;
}
.box_sec.one .container .img .sl_im.four {
    animation-delay: -21s;
    background: url(../img/hero_newback.jpeg) no-repeat;
}
.box_sec.one .container .img .sl_im.one,
.box_sec.one .container .img .sl_im.two,
.box_sec.one .container .img .sl_im.three,
.box_sec.one .container .img .sl_im.four{
    background-size: cover;
    background-position: center;
}

@keyframes slide_img {
    0%{
        left: -100%;
    }
    4%{
        left: 0px;
    }
    25% {
        left: 0px;
    }
    29%{
        left: 100%;
    }
    100% {
        left: 100%;
    }
}
.form_sections .box_sec.two{
    background-color: var(--col-gr-dar);
    position: relative;
}
.form_sections .box_sec.two .bc_ins{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
    transition: all 500ms ease-in-out;
    background-color: var(--col-gr-dar);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.form_sections .box_sec.two.active .bc_ins{
    background-color: transparent;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}
.box_sec.two.active .bc_ins::after,
.box_sec.two.active .bc_ins::before{
    opacity:0;
}
.form_sections .box_sec.two .container{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 120px;
    padding-right: 120px;
    position: relative;
}
.box_sec.two .container .details{
    width: 100%;
    max-width: 700px;
    height: fit-content;
    display: flex;
    flex-flow: column nowrap;
    gap: 40px;
    z-index: 11;
}
.box_sec.two .container .details .title{
    font-size: 40px;
    font-weight: 400;
    line-height: 44.2px;
    letter-spacing: -0.5%;
    color: var(--txt-colo-tit);
    position: relative;
    left: -100px;
    opacity: 0;
    transition: all 800ms ease-in-out;
}
.box_sec.two .container .details .desc{
    font-family: 'Dubai';
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0.15%;
    color: var(--txt-colo-desc);
    position: relative;
    right: -100px;
    opacity: 0;
    transition: all 800ms ease-in-out;
}
.box_sec.two.active .container .details .title{
    left: 0px;
    opacity: 1;
}
.box_sec.two.active .container .details .desc{
    right: 0px;
    opacity: 1;
}
.box_sec.two .container .details .btn_mov{
    transition: all 800ms ease-in-out;
    position: relative;
    opacity: 0;
}
.box_sec.two.active .container .details .btn_mov{
    opacity: 1;
}
.box_sec.two .container .img{
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    background: url(../img/back_newabout.jpeg) no-repeat;
    background-size: cover;
    background-position: center;
    z-index: 1;
}
.box_sec.two .container .img.en_ar_img{
    right: unset !important;
    left: 0px !important;
}
@media (max-width: 950px){
    .box_sec.two .container .img {
        width: 100%;
    }
    .box_sec.two .container .img::before {
        background: var(--col-backg-b) !important;
    }
}
.box_sec.two .container .img::before{
    content: "";
    width: 100%;;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: linear-gradient(90deg, var(--col-gr-dar) 0.11%, var(--col-gr-dar-opa) 100%,rgba(0, 0, 0, 0.00) 100.11%);
}
.box_sec.two .container .img.en_ar_img::before{
    background: linear-gradient(-90deg, var(--col-gr-dar) 0.11%, var(--col-gr-dar-opa) 100%,rgba(0, 0, 0, 0.00) 100.11%);
}

.form_sections .box_sec.four .container{
    width: 100%;
    height: 100%;
    padding-left: 120px;
    display: flex;
    align-items: center;
    position: relative;
    background: url(../img/back_newserv.jpeg) no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}
.form_sections .box_sec.four .container::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: linear-gradient(to right, var(--col-lin-one), var(--col-lin-two));
}
.box_sec.four .container .content{
    width: 100%;
    max-width: 700px;
    height: fit-content;
    display: flex;
    flex-flow: column nowrap;
    gap: 32px;
    z-index: 3;
}
.box_sec.four .container .content .title{
    font-size: 60px;
    font-weight: 400;
    line-height: 44.2px;
    letter-spacing: -0.5%;
    color: var(--txt-colo-tit);
    position: relative;
    bottom: -100px;
    opacity: 0;
    transition: all 800ms ease-in-out;
}
.box_sec.four.active .container .content .title{
    opacity: 1;
    bottom: 0px;
}
.box_sec.four .container .content .desc{
    font-family: 'Dubai';
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0.15%;
    color: var(--txt-colo-desc);
    margin-bottom: 16px;
    position: relative;
    top: -100px;
    opacity: 0;
    transition: all 800ms ease-in-out;
}
.box_sec.four.active .container .content .desc{
    opacity: 1;
    top: 0px;
}
.box_sec.four .container .content .details{
    display: flex;
    flex-flow: column nowrap;
}
.box_sec.four .container .content .details .bx{
    display: flex;
    flex-flow: row nowrap;
    gap: 16px;
    position: relative;
    left: -200%;
    opacity: 0;
    transition: opacity 800s ease-out 30s, all 800ms ease-in-out;
}
.box_sec.four .container .content .details .bx.one{
    transition-delay: 100ms;
}
.box_sec.four .container .content .details .bx.two{
    transition-delay: 300ms;
}
.box_sec.four .container .content .details .bx.three{
    transition-delay: 500ms;
}
.box_sec.four .container .content .details .bx.four{
    transition-delay: 700ms;
}
.box_sec.four .container .content .details .bx.five{
    transition-delay: 900ms;
}
.box_sec.four .container .content .details .bx.six{
    transition-delay: 1100ms;
}
.box_sec.four.active .container .content .details .bx{
    left: 0%;
    opacity: 1;
}
.box_sec.four .container .content .details .bx.one .icon{
    background: url(../img/icon/iconplus/mony.png) center center / 100% no-repeat;
}
.box_sec.four .container .content .details .bx.two .icon{
    background: url(../img/icon/iconplus/emergancy.png) center center / 100% no-repeat;
}
.box_sec.four .container .content .details .bx.three .icon{
    background: url(../img/icon/iconplus/schedule.png) center center / 100% no-repeat;
}
.box_sec.four .container .content .details .bx.four .icon{
    background: url(../img/icon/iconplus/info.png) center center / 100% no-repeat;
}
.box_sec.four .container .content .details .bx.five .icon{
    background: url(../img/icon/iconplus/battery.png) center center / 100% no-repeat;
}
.box_sec.four .container .content .details .bx.six .icon{
    background: url(../img/icon/iconplus/car.png) center center / 100% no-repeat;
}
.box_sec.four .container .content .details .icon{
    width: 40px;
    height: 50px;
    background-position: center !important;
    filter: var(--img-filter-two);
}
.box_sec.four .container .content .details .info{
    display: flex;
    align-items: center;
    font-family: 'Dubai';
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0.15%;
    color: var(--txt-colo-desc);
}
.anim_tit{
    opacity: 1;
    animation: show_title 600ms ease-out;
}
.box_sec.seven {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
}
@media (min-width: 951px) and (max-width: 1300px){
    .box_sec.seven {
        justify-content: space-between;
    }
}
@media (min-width: 1300px){
    .certificate_new.new .container {
        padding: 80px 100px !important;
    }
}
/* ****************************** Start Industries ************************** */
.box_sec.industries .container {
    width: 100%;
    height: 100%;
    padding-left: 120px;
    padding-right: 120px;
    padding: 100px 120px 0px;
    display: flex;
    position: relative;
    background: url(../img/article/img45.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}
.box_sec.industries .container:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: linear-gradient(to right, var(--col-lin-one), var(--col-lin-two));
    opacity: 1;
}
.box_sec.industries .container .content {
    width: 100%;
    max-width: 1000px;
    height: fit-content;
    display: flex;
    flex-flow: column nowrap;
    gap: 52px;
    z-index: 3;
    color: var(--txt-colo-tit);
}
.box_sec.industries .content .head {
    display: flex;
    flex-flow: column nowrap;
    gap: 32px;
}
.box_sec.industries .content .head .title{
    font-weight: 800;
    font-size: 70px;
    opacity: 0;
    transition: all 800ms ease-out 800ms;
    position: relative;
    bottom: 100px;
}
.box_sec.industries.active .content .head .title{
    opacity: 1 !important;
    bottom: 0px !important;
}
.box_sec.industries .content .head .desc{
    font-size: 18px;
    max-width: 700px;
    line-height: 26px;
    opacity: 0 !important;
    transition: all 800ms ease-out 1400ms;
}
.box_sec.industries.active .content .head .desc{
    opacity: 1 !important;
}
.box_sec.industries .content .btns{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    font-size: 18px;
    gap: 16px;
    position: relative;
    opacity: 0;
    bottom: -200px;
    transition: all 800ms ease-out 1800ms;
}
.box_sec.industries.active .content .btns{
    opacity: 1;
    bottom: 0px !important;
}

.box_sec.industries .content .btns .btn{
    min-width: 220px;
    height: 50px;
    background-color: transparent;
    border: 0px;
    outline: 0px;
    gap: 10px;
    font-size: 18px;
    border-radius: 50px;
    border: 1px solid var(--txt-colo-tit);;
    color: var(--txt-colo-tit);
}
.box_sec.industries .content .btns a{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 18px;
    border-radius: 50px;
    color: var(--txt-colo-tit);
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.box_sec.industries .content .btns a .img-os{
    display: flex;
    align-items: center;
    justify-content: center;
}
.box_sec.industries .content .btns .btn a img{
    width: 30px;
    height: fit-content;
}
.box_sec.industries .content .btns .btn a .txt{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
@media screen and (min-width: 951px) and (max-width: 1300px) {
    .box_sec.industries .container {
        padding: 40px 40px 40px 100px;
    }
    .box_sec.industries .content .head .title {
        font-size: 50px;
    }
    .box_sec.industries .content .head .desc {
        font-size: 16px;
    }
    .box_sec.industries .container .content {
        max-width: 700px;
    }
    .box_sec.industries .content .btns .btn a img {
        width: 24px;
        height: fit-content;
    }
    .box_sec.industries .content .head {
        gap: 18px;
    }
}
@media (max-width: 950px){
    .box_sec.industries .container {
        padding: 40px 16px;
    }
    .box_sec.industries .content .head .title {
        font-size: 40px;
        text-align: center;
    }
    .box_sec.industries.active .content .head .desc {
        text-align: center;
    }
    .box_sec.industries .content .btns .btn {
        min-width: calc(50% - 8px);
        height: 45px;
        font-size: 16px;
        padding: 10px;
    }
    .box_sec.industries .content .btns .btn a img {
        width: 22px;
        height: fit-content;
    }
    .box_sec.industries .content .btns a {
        font-size: 16px;
    }
    .box_sec.industries .content .btns .btn a .txt{
        max-width: calc(100%);
    }
}
/* ****************************** End Industries ************************** */
/* ****************************** Start TimeLine ************************** */
.timelinen .av_subtit_thin{
    font-family: 'Dubai';
    font-size: 16px;
    font-weight: 300;
    line-height: 21px;
    letter-spacing: 0.0015em;
    text-align: left;
}
.timelinen .cg_hthree{
    font-family: 'Dubai';
    font-size: 24px;
    font-weight: 700;
    line-height: 31px;
    letter-spacing: 0em;
    text-align: left;
}
.timelinen .av_body{
    font-family: 'Dubai';
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0.005em;
    text-align: left;
}
@media (max-width: 950px) {
    .timelinen .av_subtit_thin{
        font-family: 'Dubai';
        font-size: 16px;
        font-weight: 300;
        line-height: 21px;
        letter-spacing: 0.0015em;
        text-align: left;
    }
    .timelinen .cg_hthree{
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 26px;
        letter-spacing: 0.03px;
    }
    .timelinen .av_body{
        font-family: 'Dubai';
        font-size: 16px;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: 0.005em;
        text-align: left;
    }
}

.timelinen{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center ;
    position: relative;
    z-index: 1;
}
.timelinen::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: url(../img/back_timeline.png), 100px 100px repeat, #1616169a;
    z-index: -1;
    opacity: var(--opacity-two);
    filter: var(--img-filter-three);
}
.timelinen .container{
    width: 100%;
    padding: 80px 120px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 40px
}
.timelinen .head{
    width: 400px;
    color: var(--txt-colo-tit);
}
.timelinen .head.tl{
    width: 100%;
}
.box_sec.five .timelinen .head h1{
    width: 100%;
    text-align: left;
    font-size: 40px;
    font-weight: 400;
    line-height: 44.2px;
    letter-spacing: -0.5%;
    color: var(--txt-colo-tit);
    transition: all 800ms ease-in-out;
    position: relative;
    top: -100px;
    opacity: 0;
}
@media screen and (min-width: 951px) and (max-width: 1300px) {
    .box_sec.five .timelinen .head h1{
        font-size: 40px;
    }
}
.box_sec.five.active .timelinen .head h1{
    opacity: 1;
    top: 0px;
}
.timelinen .details{
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    gap: 16px;
}
.box_sec.five .timelinen .details .box.one{
    width: 200px;
    height: 350px;
    background-color: var(--col-bx-timl);
    color: var(--col-line-timl);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    left: -100px;
    opacity: 0;
    transition: all 800ms ease-in-out;
}
.box_sec.five.active .timelinen .details .box.one{
    opacity: 1;
    left: 0px;
}
.timelinen .details .box.one .ins{
    width: 100px;
    height: 250px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.timelinen .details .box.one .ins::before{
    content: "";
    width: 2px;
    height: 100%;
    background-color: var(--col-line-timl);
    position: absolute;
    top: 0px;
    left: 6px;
}
.timelinen .details .box.one .ins .to_top{
    position: absolute;
    top: -10px;
    left: 1px;
    font-size: 16px;
    cursor: pointer;
}
.timelinen .details .box.one .ins .to_bottom{
    position: absolute;
    bottom: -10px;
    left: 1px;
    font-size: 16px;
    cursor: pointer;
}
.timelinen .details .box.one .ins .to_bottom:hover,
.timelinen .details .box.one .ins .to_top:hover{
    cursor: pointer;
    box-shadow: 0px 0px 20px #2a95959d;
}
.timelinen .details .box.one .ins .years_box{
    width: 100%;
    height: 200px;
    overflow: hidden;
}
.timelinen .details .box.one .ins .years_box .box_ins{
    width: 100%;
    height: 100%;
    position: relative;
    top: 0px;
    display: flex;
    flex-flow: column nowrap;
    gap: 32px;
    transition: all 300ms ease-in-out;
}
.timelinen .details .box.one .ins .years_box .box_ins .year{
    padding-left: 32px;
    transition: all 200ms ease-out;
}
.timelinen .details .box.one .ins .years_box .box_ins .year span{
    position: absolute;
    left: 1px;
    font-size: 12px;
}
.timelinen .details .box.two{
    width: calc(100% - 216px);
    height: 350px;
    overflow: hidden;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    position: relative;
}
.timelinen .details .box.two .box_ins{
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    gap: 8px;
    position: relative;
    transition: all 500ms ease-in-out;
}
.timelinen .details .box.two .box_ins .bx{
    width: 100%;
    height: calc((100% - 8px) / 2);
    padding: 43px 40px;
    display: flex;
    flex-flow: column nowrap;
    gap: 16px;
    background-color: var(--col-bx-timl);
}
.box_sec.five .details .box.two .box_ins .bx.one,
.box_sec.five .details .box.two .box_ins .bx.two.two{
    position: relative;
    opacity: 0;
    transition:  all 800ms ease-in-out;
}
.box_sec.five .details .box.two .box_ins .bx.one{
    top: -100px;
}
.box_sec.five .details .box.two .box_ins .bx.two.two{
    bottom: -100px;
}
.box_sec.five.active .details .box.two .box_ins .bx.one{
    top: 0px;
    opacity: 1;
}
.box_sec.five.active .details .box.two .box_ins .bx.two.two{
    bottom: 0px;
    opacity: 1;
}
.timelinen .details .box.two .box_ins .bx .head{
    padding-bottom: 16px;
    color: var(--col-txthead-timl);
    border-bottom: 1px solid var(--col-linheadt-timl);
    transition: all 200ms ease-out;
}
.timelinen .details .box.two .box_ins .bx .desc{
    color: var(--col-txthead-timl);
    max-height: 50px !important;
    overflow-y: scroll;
    min-height: 45px;
}
.timelinen .details .box.two .box_ins .bx .desc::-webkit-scrollbar{
    width: 0px;
    background-color: transparent;
}
.act_color_info{
    border-bottom: 1px solid var(--col-linhead-timl) !important;
    color: var(--col-txttwo-timl) !important;
}
.act_color_year{
    color: var(--col-txttwo-timl) !important;
}
.timeline .container.two .act_color_info{
    border-bottom: 1px solid transparent !important;
}
/* Small */
@media (max-width: 950px) {
    .timelinen .container.one {
        display: none;
    }
    .timelinen .head {
        width: 100%;
        padding-bottom: 16px;
        position: relative;
        border-bottom: 0px transparent;
    }
    .timelinen .container.two .head{
        color: var(--col-txttwo-timl) !important;
        border-bottom: 0px transparent !important;
    }
    .timelinen .container.two .head::before {
        content: "";
        width: calc(100% - 100px);
        height: 1px;
        position: absolute;
        bottom: 0px;
        left: 50px;
        background-color: var(--col-linhead-timl);
    }
    .timelinen .container.two .head.basic::before {
        display: none;
    }
    .timelinen .container.two {
        width: 100%;
        padding: 24px 16px 40px 16px;
        display: flex;
        flex-flow: column nowrap;
    }
    .timelinen .container.two .swiper-container{
        width: 100%;
        height: 310px;
        display: flex;
        flex-flow: row nowrap;
        overflow: hidden;
        position: relative;
    }
    .timelinen .container.two .swiper-slide{
        padding: 24px 16px;
        background-color: var(--col-bx-timl);
        height: 240px;
        overflow-y: auto;
    }
    .timelinen .container.two .swiper-slide::-webkit-scrollbar{
        width: 0px;
    }
    .box_sec.five .timelinen .head h1 {
        text-align: center;
    }
    .timelinen .container.two .swiper-slide .head h2{
        text-align: center;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 31.2px;
        
    }
    .timelinen .container.two .swiper-slide .desc{
        padding-top: 16px;
        color: var(--col-txthead-timl);
        text-align: center;
    }
    .swiper-pagination {
        position: absolute;
        bottom: 20px !important;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .swiper-pagination .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: var(--col-swip-sp);
        margin: 0 5px;
        cursor: pointer;
        transition: all 300ms ease-in-out;
    }
    .swiper-pagination .swiper-pagination-bullet-active {
        width: 35px;
        border-radius: 5px;
        background-color:#2A9595;
    }
    
}
@media (min-width: 951px) {
    .timelinen .container.two {
        display: none;
    }
}
/* ****************************** End TimeLine ************************** */
.box_sec.six{
    width: 100%;
    height: 100%;
    background: url(../img/back_contact_home.jpeg) no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    z-index: 2;
}
.box_sec.six::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background-color: var(--col-backg-b);
    z-index: -1;
}
.box_sec.six .container{
    width: 100%;
    height: 100vh;
    padding: 80px 120px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
}
.box_sec.six .container .head{
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    padding-bottom: 40px;
    position: relative;
}
.box_sec.six .container .head .title{
    font-size: 60px;
    font-weight: 400;
    line-height: 44.2px;
    letter-spacing: -0.5%;
    color: var(--txt-colo-tit);
    padding-bottom: 40px;
}
.box_sec.six .container .head .title .span_tit{
    position: relative;
    top: -100px;
    opacity: 0;
    transition: all 800ms ease-in-out;
}
.box_sec.six .container .head .title .span_tit.one{
    transition-delay: 0ms;
}
.box_sec.six .container .head .title .span_tit.two{
    transition-delay: 200ms;
}
.box_sec.six .container .head .title .span_tit.three{
    transition-delay: 400ms;
}
.box_sec.six .container .head .title .span_tit.four{
    transition-delay: 600ms;
}
.box_sec.six.active .container .head .title .span_tit{
    top: 0px;
    opacity: 1;
}
.box_sec.six .container .head .desc{
    width: 100%;
    max-width: 730px;
    font-size: 16px;
    font-weight: 700;
    line-height: 25.6px;
    letter-spacing: 0.1%;
    color: var(--col-txt-des-ourb);
}
.box_sec.six .container .head .sp_sin{
    color: var(--col-txt-dest-ourb);
}
.box_sec.six .container .content{
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    gap: 32px;
}
.box_sec.six .container .content .box{
    width: calc(50% - 16px);
    display: flex;
    flex-flow: column wrap;
    gap: 16px;
    position: relative;
    bottom: -200px;
    opacity: 0;
    transition: all 800ms ease-in-out;
}
.box_sec.six .container .content .box.one{
    transition-delay: 100ms;
}
.box_sec.six .container .content .box.two{
    transition-delay: 300ms;
}
.box_sec.six .container .content .box.three{
    transition-delay: 500ms;
}
.box_sec.six .container .content .box.four{
    transition-delay: 700ms;
}
.box_sec.six.active .container .content .box{
    bottom: 0px;
    opacity: 1;
}

.box_sec.six .container .content .box .tit{
    color: var(--col-txt-tit-b);
}
.box_sec.six .container .content .box .desc{
    color: var(--col-txt-des-ourb);
    text-align: left;
}
.box_sec.six .container .content .box .btn{
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.25%;
    background-color: transparent;
    outline: 0px;
    border: 0px transparent;
    color: var(--col-btn-b);
    cursor: pointer;
}
.box_sec.six .container .content .box img{
    filter: var(--img-filter-four);
}
@media screen and (min-width: 951px) and (max-width: 1300px){
    .box_sec.one .container .contentn {
        padding: 20px 120px;
    }
    .box_sec.one .container .contentn .title {
        font-size: 40px;
        line-height: 55px;
    }

    .box_sec.two .container .details .title {
        font-size: 40px;
    }
    .box_sec.two .container .details {
        gap: 30px;
    }

    .box_sec.four .container .content {
        gap: 24px;
    }
    .box_sec.four .container .content .title {
        font-size: 40px;
    }
    .box_sec.four .container .content .details .icon {
        width: 30px;
        height: 40px;
    }

    .timelinen .head h1 {
        font-size: 40px;
    }

    .box_sec.six .container .head .title {
        font-size: 40px;
        padding-bottom: 24px;
    }
    .box_sec.six .container .head {
        padding-bottom: 24px;
    }
    .box_sec.six .container .content {
        gap: 24px;
    }
    .box_sec.six .container .content .box {
        gap: 8px;
    }
    .contact .content .box_one .head .title{
        font-size: 40px !important;
    }
}

@media (max-width: 950px) {
    .sp{
        background-color: var(--nav-sp-men) !important;
    }
    .navbar .container::before {
        width: calc(100% - 32px);
        left: 16px;
    }
    .navbar .container .content .icon_search {
        width: 32px;
        height: 32px;
        right: 110px;
    }
    .navbar .container .content .icon_lang {
        width: 32px;
        height: 32px;
        right: 62px;
    }

    .box_sec.one .container .contentn {
        background-color: transparent;
        padding: 40px 16px 0px 16px;
        flex-flow: column nowrap;
        justify-content: flex-start;
        height: calc(100% - 140px);
        justify-content: center;
    }
    .box_sec.one .container .contentn .title {
        width: 100%;
        padding-right: 0px;
        font-weight: 100;
        text-align: center;
        line-height: 68px;
        display: flex;
        justify-content: center;
    }
    .box_sec.one .container .contentn .desc {
        width: 100%;
        min-width: 100%;
        padding-top: 16px;
        padding-left: 0px;
        text-align: center;
    }

    .form_sections .box_sec.two .container {
        padding: 16px;
    }
    .box_sec.two .container .details {
        text-align: center;
    }
    .box_sec.two .container .details .title {
        font-weight: 100;
        line-height: 42px;
    }
    .box_sec.two .container .details .btn_mov {
        width: 100%;
        position: relative;
        bottom: -100px;
        color: var(--col-btn-fil);
        background-color: var(--col-btn-back);
    }
    .box_sec.two.active .container .details .btn_mov {
        bottom: 0px;
    }
    .box_sec.two .container .details .btn_mov img{
        filter: var(--img-filter-four);
    }
    .form_sections .box_sec.four .container {
        padding: 16px;
        padding-top: 40px;
        align-items: flex-start;
    }
    .box_sec.four .container .content .title {
        font-weight: 100;
        text-align: center;
    }
    .box_sec.four .container .content .desc {
        text-align: center;
    }
    .box_sec.four .container .content .details .icon {
        width: 40px !important;
    }
    .box_sec.four .container .content .details .info {
        width: fit-content;
        max-width: fit-content;
        flex: 1;
    }
    .box_sec.four .container .content .details {
        gap: 8px;
    }

    .box_sec.six .container {
        padding: 80px 0px 0px 0px;
        /* padding: 0px; */
        justify-content: flex-start;
    }
    .box_sec.six .container .head {
        padding-left: 16px;
        padding-right: 16px;
    }
    .box_sec.six .container .content{
        flex-flow: column wrap;
        overflow-x: scroll;
        height: 320px;
        scroll-behavior: smooth;
        gap: 24px;
        padding-left: 16px;
        padding-right: 16px;
    }
    .box_sec.six .container .content::-webkit-scrollbar{
        width: 0px;
        height: 0px;
    }
    .box_sec.six .container .content .box {
        width: 300px;
        height: 100%;
        padding: 30px 16px;
        border-radius: 4px;
        border: 1px solid var(--txt-colo-desc);
        background-color: rgba(255, 255, 255, 0.096);
        backdrop-filter: blur(10px);
        border-radius: 10px;
        box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
    }
    .box_sec.six .container .content .box .btn {
        margin-top: auto;
    }
    
    .box_sec.six .container .content .box {
        right: -100px;
        bottom: unset;
    }
    .box_sec.six.active .container .content .box {
        bottom: unset;
        right: 0px;
    }
    .box_sec.six .container .head .title .span_tit {
        position: relative;
        top: -110px;
    }
    .box_sec.six .container .head .title .span_tit.one {
        transition-delay: 600ms;
    }
    .box_sec.six .container .head .title .span_tit.two {
        transition-delay: 400ms;
    }
    .box_sec.six.active .container .head .title .span_tit.one {
        top: -5px;
    }
    .box_sec.six.active .container .head .title .span_tit.two {
        top: -5px;
    }
    .box_sec.six .container .head .title .span_tit.three {
        transition-delay: 200ms;
    }
    .box_sec.six .container .head .title .span_tit.four {
        transition-delay: 0ms;
    }
    .box_sec.six .container .head .title {
        text-align: center;
    }
    .box_sec.six .container .head .desc {
        text-align: center;
    }
}
/* ====================================================== Start Hero */
@keyframes show_title {
    0% {
        opacity: 0;
    }

    60% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
@keyframes show_desc {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
/* ====================================================== End Hero */
/* ====================================================== Start Whatsapp */
.whatsapp {
    position: fixed;
    bottom: 100px;
    right: 40px;
    font-size: 60px;
    z-index: 1000;
    cursor: pointer;
    display: none;
    transition: all 200ms ease-out;
    animation: mov-icon 20s ease infinite;
    z-index: 999999999999999999999999999999;
}
@keyframes mov-icon {
    0%{
        bottom: 100px;
        transform: rotate(0deg);
    }
    44%{
        bottom: 100px;
        transform: rotate(0deg);
    }
    48%{
        bottom: 140px;
    }
    49%{
        transform: rotate(360deg);
    }
    51%{
        transform: rotate(360deg);
    }
    52%{
        bottom: 140px;
    }
    56%{
        bottom: 100px;
        transform: rotate(0deg);
    }
    100%{
        bottom: 100px;
    }

}
.whatsapp a {
    transition: all 200ms ease-out;
    color: var(--primary-primary-dark);
}

.whatsapp:hover a {
    color: var(--Primary-Primary);
}

@media screen and (max-width: 950px) {
    .whatsapp {
        bottom: 16px;
        right: 16px;
        font-size: 50px;
    }
}
@media (min-width: 1500px){
    .whatsapp {
        right: 60px;
    }
}
/* ====================================================== End Whatsapp */
/* ====================================================== Start Partners */
.partners {
    width: 100%;
    overflow-x: hidden;
}

.partners .container {
    width: 100%;
    height: fit-content;
    padding: 80px 120px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 48px;
    position: relative;
    background: var(--Grey-Dark, #161616);
}
.partners.new.new .container {
    padding: 80px 100px;
}
.partners.new.new::-webkit-scrollbar {
    width: 0px;
}
.partners .box.one {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 80px;
}
.partners.new.new .box.one {
    gap: 32px;
}

.partners .container .box.one .head {
    width: 62.5%;
    max-width: 750px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 24px;
}
.partners.new .container .box.one .head {
    width: 100%;
    max-width: 850px;
    gap: 16px;
}
.box_sec.seven .partners.new.new .container .box.one .head {
    position: relative;
    left: -100px;
    opacity: 0;
    transition: all 800ms ease-in-out;
}
.box_sec.seven.active .partners.new.new .container .box.one .head {
    left: 0px;
    opacity: 1;
}
.box_sec.seven .certificate_new.new .container .head {
    position: relative;
    right: -100px;
    opacity: 0;
    transition: all 1000ms ease-in-out;
}
.box_sec.seven.active .certificate_new.new .container .head {
    right: 0px;
    opacity: 1;
}
.box_sec.seven .certificate_new.new .certi_box,
.box_sec.seven .partners.new .partner_box {
    opacity: 0;
    transition: all 1000ms ease-in-out;
    position: relative;
}
.box_sec.seven.active .certificate_new.new .certi_box,
.box_sec.seven.active .partners.new .partner_box {
    opacity: 1;
}
.certificate_new.new .certi_box::before,
.partners.new .partner_box::before {
    content: "";
    width: 250px;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 111111111;
}
.certificate_new.new .certi_box::after,
.partners.new .partner_box::after {
    content: "";
    width: 250px;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 111111111;
}
@media (max-width: 950px) {
    .certificate_new.new .certi_box::after,
    .partners.new .partner_box::after,
    .certificate_new.new .certi_box::before,
    .partners.new .partner_box::before {
        display: none;
    }
}
@media screen and (min-width: 951px) and (max-width: 1300px) {
    .partners.new .partner_box::before{
        background: linear-gradient(to right, var(--col-bef-partners),var(--col-bef-partners), transparent);
    }
    .certificate_new.new .certi_box::before{
        background: linear-gradient(to right, var(--Black),var(--Black), transparent);
    }
    .partners.new .partner_box::after{
        background: linear-gradient(to left, var(--col-bef-partners),var(--col-bef-partners), transparent);
    }
    .certificate_new.new .certi_box::after{
        background: linear-gradient(to left, var(--Black),var(--Black), transparent);
    }
}
@media (min-width: 1300px) {
    .partners.new .partner_box::before{
        width: 100px;
        background: linear-gradient(to right, var(--col-bef-partners), transparent);
    }
    .certificate_new.new .certi_box::before{
        width: 100px;
        background: linear-gradient(to right,var(--Black), transparent);
    }
    .partners.new .partner_box::after{
        width: 100px;
        background: linear-gradient(to left, var(--col-bef-partners), transparent);
    }
    .certificate_new.new .certi_box::after{
        width: 100px;
        background: linear-gradient(to left, var(--Black), transparent);
    }
}
.partners .box.one .head .desc {
    text-align: center;
}
.partners .partner_box {
    position: relative;
    width: 1268px;
    height: 101px;
    overflow: hidden;
}

.partners .partner_box .partner_move_box {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-left: 25px;
}

.partners .partner_box .partner_move_box.one {
    animation: move_partner 40s infinite 0s linear;
}

.partners .partner_box .partner_move_box.two {
    animation: move_partner 40s infinite -20s linear;
}

@keyframes move_partner {
    0% {
        transform: translate(-150%, -50%);
    }

    100% {
        transform: translate(50%, -50%);
    }
}

.partners .partner_box .partner {
    width: 178px;
    height: 101px;
    background-position: center;
    background-size: cover;
}

.partners .partner_box .partner.one {
    background: url(../img/carbrand/car1.png) no-repeat;
}

.partners .partner_box .partner.two {
    background: url(../img/carbrand/car2.png) no-repeat;
}

.partners .partner_box .partner.three {
    background: url(../img/carbrand/car3.png) no-repeat;
}

.partners .partner_box .partner.four {
    background: url(../img/carbrand/car4.png) no-repeat;
}

.partners .partner_box .partner.five {
    background: url(../img/carbrand/car5.png) no-repeat;
}

.partners .partner_box .partner.six {
    background: url(../img/carbrand/car6.png) no-repeat;
    filter: none;
}

.partners .partner_box .partner.seven {
    background: url(../img/carbrand/car7.png) no-repeat;
    background-size: 87%;
}

.partners .partner_box .partner.eight {
    background: url(../img/carbrand/car8.png) no-repeat;
    background-size: 87%;
}

.partners .partner_box .partner.nine {
    background: url(../img/carbrand/car9.png) no-repeat;
    background-size: 87%;
}

.partners .partner_box .partner.onez {
    background: url(../img/carbrand/car10.png) no-repeat;
    background-size: 87%;
}



.partners .partner_box .partner.oneone {
    background: url(../img/carbrand/car12.png) no-repeat;
    background-size: 100%;
}

.partners .partner_box .partner.onetwo {
    background: url(../img/carbrand/car13.png) no-repeat;
    background-size: 100%;
}

.partners .partner_box .partner.onethree {
    background: url(../img/carbrand/car14.png) no-repeat;
    background-size: 100%;
}

.partners .partner_box .partner.onefour {
    background: url(../img/carbrand/car15.png) no-repeat;
    background-size: 100%;
}

.partners .partner_box .partner.onefive {
    background: url(../img/carbrand/car16.png) no-repeat;
    background-size: 100%;
}

.partners .partner_box .partner.onesix {
    background: url(../img/carbrand/car17.png) no-repeat;
    background-size: 80%;
}

.partners .partner_box .partner.oneseven {
    background: url(../img/carbrand/car18.png) no-repeat;
    background-size: 100%;
    opacity: 0.6;
}

.partners .partner_box .partner.oneeight {
    background: url(../img/carbrand/car19.png) no-repeat;
    background-size: 50%;
}

.partners .partner_box .partner.onenine {
    background: url(../img/carbrand/car20.png) no-repeat;
    background-size: 100%;
}

.partners .partner_box .partner.twoone {
    background: url(../img/carbrand/aldamani.svg) no-repeat;
    background-size: 70%;
    opacity: 0.6;
}

.partners .partner_box .partner.twotwo {
    background: url(../img/carbrand/car22.png) no-repeat;
    background-size: 50%;
}

.partners .partner_box .partner.twothree {
    background: url(../img/carbrand/car23.png) no-repeat;
    background-size: 100%;
}

.partners .partner_box .partner.twofour {
    background: url(../img/carbrand/car24.png) no-repeat;
    background-size: 100%;
}

.partners .partner_box .partner.twofive {
    background: url(../img/carbrand/car25.png) no-repeat;
    background-size: 60%;
}

.partners .partner_box .partner.twosix {
    background: url(../img/carbrand/car26.png) no-repeat;
    background-size: 130%;
}

.partners .partner_box .partner.twoseven {
    background: url(../img/carbrand/car27.png) no-repeat;
    background-size: 50%;
}

.partners .partner_box .partner.twoeight {
    background: url(../img/carbrand/car28.png) no-repeat;
    background-size: 110%;
}

.partners .partner_box .partner.twonine {
    background: url(../img/carbrand/car29.png) no-repeat;
    background-size: 100%;
}

.partners .partner_box .partner.threeone {
    background: url(../img/carbrand/car30.png) no-repeat;
    background-size: 70%;
}

.partners .partner_box .partner.threetwo {
    background: url(../img/carbrand/car11.png) no-repeat;
    background-size: 70%;
}
.partners .partner_box .partner {
    background-position: center !important;
    opacity: var(--iso-opacity);
    filter: var(--img-filter-one);
}
.page_num {
    display: flex;
    flex-flow: row nowrap;
    gap: 16px;
}

.page_num .page {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    cursor: pointer;
    background: url(../img/svg/page_num_noact.svg) no-repeat;
    background-position: center;
    background-size: cover;
}
.page_num .act {
    background: url(../img/icon/page_num_act.png) no-repeat;
    background-position: center;
    background-size: 600%;
    box-shadow: 0px 0px 15px var(--primary-primary-dark);
}
.page_num .no_act {
    background: url(../img/svg/page_num_noact.svg) no-repeat;
    background-position: center;
    background-size: cover;
}

.certificate_new.new::before,
.certificate_new.new::after {
    display: none;
}
@media screen and (min-width:  951px) and (max-width: 1600px){
    .certificate_new.new .head .title,
    .partners.new .head .title{
        font-size: 24px;
    }
    .partners.new .partner_box .partner {
        width: 120px;
        height: 60px;
    }
    .partners.new .box.one {
        gap: 0px !important;
    }
    .partners.new .partner_box .partner.six {
        background-size: 70%;
    }
    .partners.new .partner_box .partner.nine {
        background-size: 70%;
    }
    .partners.new .partner_box .partner.five {
        background-size: 70%;
    }
    .partners.new .partner_box .partner.four {
        background-size: 70%;
    }
    .partners.new .partner_box .partner.twoone {
        background-size: 65%;
    }
    .partners.new .partner_box .partner.three {
        background-size: 70%;
    }
    .partners.new .partner_box .partner.two {
        background-size: 80%;
    }
    .partners.new .partner_box .partner.one {
        background-size: 70%;
    }
    .partners.new .partner_box .partner.threetwo {
        background-size: 60%;
    }
    .partners.new .partner_box .partner.oneseven {
        background-size: 80%;
    }
    .partners.new .partner_box .partner.seven {
        background-size: 70%;
    }
    .partners.new .partner_box .partner.onenine {
        background-size: 80%;
    }
    .partners.new .partner_box .partner.onefive {
        background-size: 80%;
    }
    .partners.new .partner_box .partner.onefour {
        background-size: 80%;
    }
    .partners.new .partner_box .partner.onetwo {
        background-size: 80%;
    }
    .partners.new .partner_box .partner.oneone {
        background-size: 80%;
    }
    .partners.new .partner_box .partner.threeone {
        background-size: 60%;
    }

    .partners.new.new .container {
        padding: 30px 100px 0px;
    }

    .certificate_new.new .container {
        padding: 40px 100px 16px !important;
    }

}
/* ====================================================== End Partners */
/* ====================================================== Start Certificate New */
.certificate_new {
    width: 100%;
    background-image: linear-gradient(to top, var(--cert-color-one), var(--cert-color-two), transparent);
    position: relative;
}
.certificate_new.new {
    background-image: transparent;
}

.certificate_new::before {
    content: "";
    width: 100%;
    height: 2px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    background-image: linear-gradient(to right, var(--Primary-Primary), transparent, var(--Primary-Primary));
}
.certificate_new::after {
    content: "";
    width: 100%;
    height: 2px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-image: linear-gradient(to right, var(--Primary-Primary), transparent, var(--Primary-Primary));
}

@media screen and (min-width: 951px) {
    .certificate_new {
        background-image: linear-gradient(to top, var(--cert-color-one), var(--cert-color-two), transparent);
    }
    .certificate_new.new {
        background-image: none;
    }
}

.certificate_new .container {
    width: 100%;
    height: fit-content;
    padding: 80px 100px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 48px;
    position: relative;
    overflow-x: hidden;
}
.certificate_new.new .container {
    padding: 60px 100px 24px;
}
.certificate_new .box.one {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 80px;
}
.certificate_new.new .box.one {
    gap: 32px;
}

.certificate_new .container .head {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    gap: 24px;
    text-align: center;
}

.certificate_new .container .head .title {
    width: fit-content;
    position: relative;
}

.certificate_new .container .head .desc {
    max-width: 750px;
}

.certificate_new .sp_logo {
    position: absolute;
    width: 150px;
    height: 150px;
    background: url(../img/sinatralogowithoutcolor.png) no-repeat;
    background-position: center;
    background-size: 100%;
    transform: rotate(14.6deg);
    left: calc(100% + 8px);
    top: -75px;
    opacity: var(--iso-opacity);
    filter: var(--img-filter-two);
}
.certificate_new .sp_logo.ar {
    right: calc(100% + 8px) !important;
    left: unset;
}
.certificate_new .sp_logo.en {
    left: calc(100% + 8px) !important;
    right: unset;
}
@media (max-width: 950px){
    .certificate_new .sp_logo.ar {
        top: calc(100% - 20px);
        left: calc(50% - 50px) !important;
    }
    .certificate_new .sp_logo.en {
        top: calc(100% - 20px);
        left: calc(50% - 50px) !important;
    }
}
.certificate_new .certi_box {
    height: fit-content;
    position: relative;
    width: 1268px;
    height: 101px;
    overflow: hidden;
}

.certificate_new .certi_box .certi_move_box {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-left: 25px;
}

.certificate_new .certi_box .certi_move_box.one {
    animation: move_partner 20s infinite 0s linear;
}

.certificate_new .certi_box .certi_move_box.two {
    animation: move_partner 20s infinite -10s linear;
}

@keyframes move_partner {
    0% {
        transform: translate(-150%, -50%);
    }

    100% {
        transform: translate(50%, -50%);
    }
}

.certificate_new .certi_box .certi {
    width: 138px;
    height: 120px;
    background-position: center;
    background-size: cover;
}
.certificate_new.new .certi_box .certi {
    width: 100px;
    height: 85px;
}

.certificate_new .certi_box .certi.one {
    background: url(../img/iso/is/iso_9001_2015.png) no-repeat;

}

.certificate_new .certi_box .certi.two {
    background: url(../img/iso/is/iso14064.png) no-repeat;
}

.certificate_new .certi_box .certi.three {
    background: url(../img/iso/is/iso-10002.png) no-repeat;
    background-size: 120% !important;
}

.certificate_new .certi_box .certi.four {
    background: url(../img/iso/is/iso-14001.png) no-repeat;
    background-size: 80% !important;
}

.certificate_new .certi_box .certi.five {
    background: url(../img/iso/is/netzero.png) no-repeat;
    background-size: 80% !important;
}

.certificate_new .certi_box .certi.six {
    background: url(../img/iso/is/imageedit_6_5615508176.png) no-repeat;
    background-size: 110% !important;
}

.certificate_new .certi_box .certi.seven {
    background: url(../img/iso/is/iso_27001.png) no-repeat;
}

.certificate_new .certi_box .certi.eight {
    background: url(../img/iso/is/iso26000.png) no-repeat;
}

.certificate_new .certi_box .certi {
    background-position: center !important;
    background-size: 70% !important;
    opacity: var(--iso-opacity);
    filter: var(--img-filter-one);
}
@media screen and (min-width:  950px) and (max-width: 1300px){
    .certificate_new.new .sp_logo {
        width: 120px;
        height: 120px;
        top: -55px;
    }
    .certificate_new.new .container .head {
        gap: 16px;
    }
    .certificate_new.new .box.one {
        gap: 16px;
    }
}
/* ====================================================== End Certificate New */
/* ====================================================== Start Contact */
.contact {
    width: 100%;
    background-color: var(--col-back-contact);
}

.contact .container {
    width: 100%;
    height: fit-content;
    padding: 80px 120px 80px 120px;
    position: relative;
}

.contact .container .content {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    justify-content: flex-end;
}

.contact .content .box_one {
    width: 50%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    gap: 30px;
}

.contact .content .box_two {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 47%;
    height: 100%;
    background: linear-gradient(-90deg, var(--col-back-contact) 0.11%, rgba(0, 0, 0, 0.00) 100.11%), url(../img/back_contact_new.jpeg) no-repeat;
    background-size: cover;
}

.contact .content .box_one .head {
    max-width: 400px;
    height: 111px;
    display: flex;
    flex-flow: column nowrap;
    gap: 24px;
}

.contact.new .content .box_one .head .title,
.contact.new .content .box_one .head .desc {
    color: var(--txt-colo-tit);
}
.contact .content .box_one .head .title,
.contact .content .box_one .head .desc {
    opacity: 1;
}
.contact .content .box_one .head .title{
    font-size: 60px;
    font-weight: 400;
    line-height: 44.2px;
    letter-spacing: -0.5%;
}

.contact .box_one .form {
    width: 100%;
    height: fit-content;
}

.contact .box_one .form form {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-flow: column nowrap;
    gap: 24px;
}

.contact .box_one .form form textarea,
.contact .box_one .form form input {
    display: block;
    width: 100%;
    padding: 16px;
    background-color: transparent;
    outline: 0px transparent;
    border: 0px transparent;
    border: 1px solid var(--col-bor-contact);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20.8px;
    letter-spacing: 0.024px;
    color: var(--btn-const);
}
.contact .box_one .form form .new_btn{
    color: var(--secondry-secondry-light) ;
    background-color: var(--btn-const);;
}
.contact .form_group {
    position: relative;
}
.asterisx {
    color: #F00;
    position: absolute;
    top: 9px;
    right: 9px;
    font-size: 24px;
}
#charCount{
    color: var(--col-bor-contact-two) !important;
    position: absolute;
    bottom: 9px;
    right: 9px;
}
.alert {
    color: #F00;
    font-size: 14px;
    padding-top: 7px;
    display: none;
}
.contact .box_one .form form textarea::placeholder,
.contact .box_one .form form input::placeholder {
    color:  var(--col-bor-contact);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20.8px;
    letter-spacing: 0.024px;
}
.contact .box_one .form form textarea {
    height: 107px;
    border: 1px solid var(--col-bor-contact);
    resize: none;
}
.contact .box_one .form form textarea:focus,
.contact .box_one .form form input:focus {
    color: #2A9595;
    border-color: #2A9595;
}
.contact .box_one .form form .btn_box {
    margin-top: auto;
}
#response {
    margin-bottom: 16px;
    color: var(--Grey-Light-grey);
}
#recaptcha_box {
    width: 100%;
    height: fit-content;
    color: var(--Grey-Light-grey);
    font-size: 14px;
    margin-top: 16px;
}
#recaptcha_box #re_alert {
    margin-top: 8px;
}
#aler_nodata {
    font-size: 16px;
    color: white;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    position: fixed;
    top: 80px;
    left: 0px;
    background-color: rgba(255, 0, 0, 0.712);
    padding: 16px 45px;
    opacity: 1;
    animation: show_alert 5s ease;
    display: none;
    z-index: 10000000000000000000000000000;
}
#inp_errors{
    color: white !important;
    position: fixed;
    top: 200px;
    left: 0px;
    background-color: rgba(255, 0, 0, 0.712);
    display: none;
    flex-flow: column nowrap;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index: 10000000000000000000000000000;
    padding: 16px 45px;
    opacity: 0;
    animation: show_inp_error 5s ease;
}
#inp_errors .alert{
    color: white !important;
    font-size: 14px;
}
.active_alert {
    display: block !important;
}

@media screen and (max-width: 950px) {
    .contact .container .content {
        position: relative;
    }

    #aler_nodata {
        width: 70%;
        min-width: 290px;
        font-size: 14px;
        position: fixed;
        top: 100px;
        left: 0;
        opacity: 0;
        animation: show_alert_two 5s ease;
        display: none;
    }

    #inp_errors{
        width: 90%;
        min-width: 290px;
        color: white !important;
        position: fixed;
        top: 200px;
        left: 0px;
        background-color: rgba(255, 0, 0, 0.712);
        display: none;
        flex-flow: column nowrap;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        z-index: 10000000000000000000000000000;
        padding: 16px;
        opacity: 0;
        animation: show_inp_error_two 5s ease;
    }
}
@keyframes show_alert {
    0% {
        opacity: 0;
        top: 30px;
    }

    3% {
        opacity: 0;
        top: 30px;
    }

    8% {
        opacity: 1;
        top: 80px;
    }
    90%{
        top: 80px;
    }

    98% {
        opacity: 1;
        top: 90px;
    }

    100% {
        opacity: 0;
        top: 70px;
    }
}
@keyframes show_alert_two {
    0% {
        opacity: 0;
        top: 0px;
    }

    3% {
        opacity: 0;
        top: 0px;
    }

    8% {
        opacity: 1;
        top: 40px;
    }

    98% {
        opacity: 1;
        top: 40px;
    }

    100% {
        opacity: 0;
        top: 0px;
    }
}
@keyframes show_inp_error {
    0% {
        opacity: 0;
        top: 70px;
    }

    3% {
        opacity: 0;
        top: 90px;
    }

    8% {
        opacity: 1;
        top: 140px;
    }
    90%{
        top: 140px;
    }

    98% {
        opacity: 1;
        top: 120px;
    }

    100% {
        opacity: 0;
        top: 100px;
    }
}
@keyframes show_inp_error_two {
    0% {
        opacity: 0;
        top: 0px;
    }

    3% {
        opacity: 0;
        top: 0px;
    }

    8% {
        opacity: 1;
        top: 100px;
    }

    98% {
        opacity: 1;
        top: 100px;
    }

    100% {
        opacity: 0;
        top: 0px;
    }
}
@media (max-width: 950px) {
    .contact .content .box_one .head .title {
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 24.708px;
        letter-spacing: 0.06px;
    }
    
}
/* ====================================================== End Contact */
/* ====================================================== Start Footer */
.footer {
    width: 100%;
    background-color: var(--Black);
}
.footer .container {
    width: 100%;
    padding: 40px 110px 8px 110px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}
@media screen and (min-width: 951px) and (max-width: 1250px) {
    .footer .container {
        padding: 16px 50px 8px;
    }
}
.footer .content {
    width: 100%;
    height: fit-content !important;
    height: fit-content;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    gap: 10px
}
.footer .line {
    width: 100%;
    height: 1px;
    background-color: var(--Secondry-Secondry);
    margin-top: 6px;
}
.footer .copyright {
    width: 100%;
    text-align: center;
    margin-top: 6px;
    font-size: 14px;
}
.footer .content .box.left {
    width: 170px;
    display: flex;
    flex-flow: column nowrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
}
.footer .content .box.left .logo {
    width: 50px;
}
.footer .content .box.left .logo img {
    width: 100%;
    opacity: var(--iso-opacity);
    filter: var(--img-filter-two);
}
.footer .box.left .company_desc {
    text-align: center;
    text-wrap: nowrap;
    font-size: 14px;
    color: var(--sub-color);
}
.footer .box.left .git_box {
    display: flex;
    gap: 24px;
}
.footer .box.left .git_box a img {
    opacity: var(--iso-opacity);
    filter: var(--img-filter-one);
}
@media screen and (min-width: 951px) {
    .footer .box.left .git_box a {
        width: 20px;
    }
    .footer .box.left .git_box a img {
        width: 20px;
        opacity: var(--iso-opacity);
        filter: var(--img-filter-one);
    }
    .footer .box.centwo {
        width: 204px;
    }
}

.footer .box .title {
    margin-bottom: 10px;
}
.footer .box.cenzero .links,
.footer .box.cenonetwo .links,
.footer .box.cenone .links,
.footer .box.cen .links {
    display: flex;
    flex-flow: column nowrap;
    gap: 4px;
}
.footer .box.cenone .links .link.mob {
    display: none;
}
.footer .box.cenonetwo .links a,
.footer .box.cenzero .links a,
.footer .box.cenone .links a,
.footer .box.centwo .details,
.footer .box.centwo .details a,
.footer .box.cen .links a {
    color: var(--col-fot-one);
    font-family: 'Dubai';
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20.8px;
    letter-spacing: 0.08px;
}
.footer .box.centwo .details {
    display: flex;
    flex-flow: column nowrap;
    gap: 16px;
}
.footer .box.centwo .details .location,
.footer .box.centwo .details .mail,
.footer .box.centwo .details .phone {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-flow: row nowrap;
    gap: 8px;
}
.footer .box.centwo .details .img {
    align-self: self-start;
}
.footer .box.centwo .details .img img {
    width: 24px;
}
.footer .box.centwo .location .datails {
    width: 160px;
    height: fit-content;
}
#wallet_btn_mo{
    display: none;
}
#wallet_btn_des{
    display: block;
}
@media screen and (min-width: 951px) and (max-width: 1300px) {
    .footer .box.right {
        width: 320px;
    }
    .footer .box.cenone .links a,
    .footer .box.centwo .details,
    .footer .box.centwo .details a,
    .footer .box.cen .links a {
        font-size: 13px;
    }
    .certificate_box .cer {
        width: 50px;
        height: 50px;
    }
    .certificate_box .cer.five {
        width: 55px;
        height: 55px;
    }
}
/* ====================================================== End Footer */
/* Medium Screen */
@media (max-width: 950px) {
    #wallet_btn_des{
        display: none;
    }
    #wallet_btn_mo{
        display: block;
    }
    .btn_st_one {
        width: fit-content;
        padding: 16px 32px;
    }
    .btn_st_two {
        width: 100%;
    }
    .av_body_ssl {
        color: var(--secondry-secondry-light, #CFD1D2);
        font-family: 'Dubai';
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 18.2px;
        letter-spacing: 0.07px;
    }
    .av_body_gdg {
        color: var(--Grey-Dark-Grey, #ECECEC);
        font-family: 'Dubai';
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 25.6px;
        letter-spacing: 0.08px;
    }
    .cg_subtit_pp {
        color: var(--Primary-Primary, #8DC9CC);
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 15.947px;
        letter-spacing: 0.036px;
    }
    .cg_title_glg {
        color: var(--Grey-Light-grey, #FAFAFA);
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 24.708px;
        letter-spacing: 0.06px;
    }
    body {
        overflow-x: hidden !important;
    }

    /* NavBar */
    .navbar .container .content {
        justify-content: space-between;
    }
    #menu_icon {
        width: 30px;
        height: 25px;
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
    }
    .sp {
        width: 30px;
        height: 3px;
        background-color: var(--primary-primary-dark);
        border-radius: 20px;
        transition: all 0.3s ease;
    }
    #span_one,
    #span_three {
        transform-origin: 0 50%;
    }
    #span_two {
        transform-origin: 50% 50%;
    }
    #menu_icon.open #span_one {
        transform: rotate(45deg);
    }
    #menu_icon.open #span_two {
        display: none;
    }
    .navbar #navbar_box {
        height: 0px;
        overflow: hidden;
    }
    #menu_icon.open #span_three {
        transform: rotate(-47deg);
    }
    .navbar .container {
        padding: 16px;
        width: 100% !important;
    }
    #navbar_box {
        box-shadow: 0px 4px 10px var(--Grey-Dark);
        position: absolute;
        width: 100%;
        top: calc(100% - 2px);
        left: 0px;
        height: 0px;
        transition: all 400ms ease-out;
        z-index: 999999999;
        background-color: var(--Black);
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        gap: 16px;
    }
    .nav_active {
        display: flex !important;
        height: 340px !important;
        justify-content: center !important;
        align-items: center !important;
        transition: all 250ms ease-out;
    }

    .sub_title .line {
        display: none !important;
    }
    /* Partners */
    .partners .container {
        padding: 40px 16px;
        gap: 24px;
        overflow: hidden;
    }
    .partners .container::before {
        display: none;
    }
    .partners .box.one {
        gap: 32px;
        position: relative;
        overflow: hidden;
    }
    .box_sec.seven {
        justify-content: flex-start;
        gap: 40px;
    }
    .partners.new .container {
        padding: 40px 16px 40px !important;
    }
    .certificate_new.new .container {
        padding: 0px 16px 60px;
    }
    .certificate_new.new {
        background-image: none;
    }
    .partners .box.one::before {
        content: "";
        width: 50px;
        height: 115px;
        position: absolute;
        bottom: 0px;
        left: 0px;
        z-index: 1;
        background-image: linear-gradient(to right, var(--col-bef-partners), transparent);
    }
    .partners .box.one::after {
        content: "";
        width: 50px;
        height: 115px;
        position: absolute;
        bottom: 0px;
        right: 0px;
        background-image: linear-gradient(to left, var(--col-bef-partners), transparent);
    }
    .partners .container .box.one .head {
        width: 100%;
    }
    /* Start Certificate New */
    .certificate_new .container {
        padding: 40px 16px;
        overflow-x: hidden;
    }
    .certificate_new .box.one {
        overflow-x: hidden;
        position: relative;
    }
    .certificate_new .container .head {
        gap: 80px;
    }
    .certificate_new .sp_logo {
        width: 100px;
        height: 100px;
        top: calc(100% - 20px);
        left: calc(50% - 50px);
    }
    /* End Certificate New */
    /* Contact */
    .contact {
        width: 100%;
        padding: 16px;
        background-color: var(--Black);
    }
    .contact.new {
        padding: 0px;
        padding-bottom: 40px;
    }
    .contact .container {
        background-color: var(--Grey-Dark);
        padding: 40px 16px;
        background: url(../img/back_contact_new.jpeg) no-repeat ;
        background-size: cover;
        background-position: center;
        position: relative;
    }
    .contact .container::before {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        background-color: var(--col-backg-b);
    }
    .contact .box_one .form form .new_btn{
        width: 100%;
        color: #CFD1D2;
        background-color: var(--btn-const);
    }
    .contact .content .box_one {
        width: 100%;
        height: fit-content;
    }
    .contact .content .box_two {
        display: none;
    }
    .contact .content .box_one .head {
        height: fit-content;
        gap: 16px;
    }
    /* Footer */
    .footer {
        width: 100%;
        height: fit-content !important;
        overflow-x: hidden !important;
    }
    .footer .container {
        height: fit-content !important;
        padding: 16px;
        display: flex;
        flex-flow: column nowrap;
        gap: 16px;
    }
    .footer .content {
        height: fit-content !important;
        flex-flow: column nowrap;
        align-items: center;
        margin: 0px;
        gap: 24px;
    }
    .footer .box.right .certificate_box {
        width: 100% !important;
        flex-flow: row wrap;
        overflow: hidden !important;
        justify-content: center;
    }
    .footer .box.cenone {
        align-self: self-start;
        height: fit-content;
        order: 3 !important;
    }
    .footer .box.cenzero {
        align-self: self-start;
        order: 2 !important;
    }
    .footer .box.cenonetwo {
        align-self: self-start;
        order: 4 !important;
        display: none;
    }
    .footer .box.centwo {
        align-self: self-start;
        height: fit-content;
        order: 5 !important;
    }
    .footer .content .box.left {
        order: 6 !important;
        position: relative;
    }
    .footer .content .box.left::before {
        display: none;
    }
    .footer .box.cenone .links .link.mob {
        display: block;
    }
    .footer .box.cen {
        align-self: self-start;
        order: 1 !important;
        height: fit-content;
    }
    .footer .box.right {
        width: 100%;
        height: fit-content !important;
        align-self: self-start;
    }
    .footer .copyright {
        width: 100%;
        height: fit-content !important;
        margin-top: 0px;
    }
    .footer .copyright.ho {
        padding-bottom: 60px;
    }
}
@media (min-width: 951px) {
    .contact.new .content .box_one .head .title, .contact.new .content .box_one .head .desc {
        color: #FAFAFA;
    }
    .contact .box_one .form form textarea,
    .contact .box_one .form form input {
        border: 1px solid #889899;
    }
    .contact .box_one .form form textarea::placeholder,
    .contact .box_one .form form input::placeholder {
        color: #889899;
    }
    .contact .box_one .form form .new_btn {
        color: #FAFAFA;
    }
}
@media screen and (min-width: 951px) and (max-width: 1300px) {
    .contact .box_one .form form .new_btn {
        padding: 8px 32px;
        height: fit-content;
    }
}
/* ====================================================== End Our Certificate */
a {
    cursor: pointer;
}
.certificate_new.new {
    background-color: var(--Black);
}
.dyf{
    font-family: 'Dubai' !important;
}
.box_btn.abo{
    display: flex;
    justify-content: flex-start;
}

.box_sec .arrow_down{
    position: absolute;
    bottom: 0%;
    left: calc(50% - 65px);
    width: 100px;
    height: 200px;
    opacity: 0;
    z-index: 1000000000000000000000000000000000000000000;
}
.box_sec.active .arrow_down{
    opacity: 0;
    animation: hid_arr 8s ;
}
@keyframes hid_arr {
    0%{
        opacity: 0.5;
    }
    90%{
        opacity: 0.5;
    }
    100%{
        opacity: 0;
    }
}
.arrow {
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: 50% 50%;
    transform: translate3d(-50%, -50%, 0);
}
.arrow-first {
    animation: arrow-movement 2s ease-in-out infinite;
}.arrow-second {
    animation: arrow-movement 2s 1s ease-in-out infinite;
}
.arrow:before,
.arrow:after {
    background: var(--col-txttwo-timl);
    content: '';
    display: block;
    height: 3px; 
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
}
.arrow:before {
    transform: rotate(45deg) translateX(-23%);
    transform-origin: top left;
}
.arrow:after {
    transform: rotate(-45deg) translateX(23%);
    transform-origin: top right;
}

@keyframes arrow-movement {
    0% { 
        opacity: 0;
        top: 20%;
    }
    70% {
        opacity: 1;
    }
    100% { 
        opacity: 0;
    }
}


.contact.new{
    height: 100%;
}
.contact.new .container{
    padding: 40px 120px 20px !important;
    height: 100%;
}
.contact.new .container .content{
    justify-content: flex-end;
    height: 90%
}
.contact.new .container .content .box_one{
    width: fit-content;
    z-index: 10;
    /* align-items: flex-end; */
    gap: 10px;
}
.contact.new .box_one .form{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    max-width: 500px;
}
.contact.new .box_one .form form {
    gap: 8px;
}
.contact.new .box_one .form .first_row{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    gap: 8px;
}
.contact.new .box_one .form .first_row .form_group{
    width: calc(50% - 4px) !important;
}
.contact.new .content .box_one .head {
    max-width: 500px;
    justify-content: center;
    gap: 0px;
}
.contact.new .box_one .form form textarea,
.contact.new .box_one .form form input {
    border-radius: 2px;
    padding: 8px 14px;
}
.contact.new .box_one .form form .btn_box {
    display: flex;
    justify-content: flex-end;
}
.contact.new .box_one .form #recaptcha_box{
    display: flex;
    justify-content: flex-end;
    flex-flow: column nowrap;
    margin-top: 4px;
}
.contact.new .box_one .form #recaptcha_box #recaptcha{
    width: fit-content !important;
    display: flex !important;
    flex-flow: row !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
}
.contact .box_one .form form .new_btn {
    height: fit-content;
}
.contact.new .content .box_one .head .title{
    position: relative;
    opacity: 0;
    left: -200px;
    transition: all 800ms ease-in-out;
}
.contact.new .content .box_one .head .desc{
    position: relative;
    opacity: 0;
    right: -200px;
    transition: all 800ms ease-in-out;
}
.box_sec.three.active .contact.new .content .box_one .head .title{
    opacity: 1;
    left: 0px;
}
.box_sec.three.active .contact.new .content .box_one .head .desc{
    opacity: 1;
    right: 0px;
}
.box_sec.three .contact.new .form form .first_row .form_group.one{
    position: relative;
    opacity: 0;
    left: -200px;
    transition: all 800ms ease-in-out 500ms;
}
.box_sec.three.active .contact.new .form form .first_row .form_group.one{
    opacity: 1;
    left: 0px;
}
.box_sec.three .contact.new .form form .first_row .form_group.two{
    position: relative;
    opacity: 0;
    right: -200px;
    transition: all 800ms ease-in-out 500ms;
}
.box_sec.three.active .contact.new .form form .first_row .form_group.two{
    opacity: 1;
    right: 0px;
}
.box_sec.three .contact.new .form form .form_group.three{
    position: relative;
    opacity: 0;
    bottom: -200px;
    transition: all 800ms ease-in-out 800ms;
}
.box_sec.three.active .contact.new .form form .form_group.three{
    opacity: 1;
    bottom: 0px;
}
.box_sec.three .contact.new .form form .form_group.four{
    position: relative;
    opacity: 0;
    bottom: -200px;
    transition: all 800ms ease-in-out 1200ms;
}
.box_sec.three.active .contact.new .form form .form_group.four{
    opacity: 1;
    bottom: 0px;
}
.box_sec.three .contact.new .box_one .form form .btn_box {
    opacity: 0;
    position: relative;
    right: -400px;
    transition: all 800ms ease-in-out 1400ms;
}
.box_sec.three.active .contact.new .box_one .form form .btn_box {
    opacity: 1;
    right: 0px;
}


.box_sec.three{
    background-color: var(--col-back-contact);
}

.footer.hom.actv_footer{
    height: 300px !important;
    bottom: 0px !important;
    left: 0px !important;
    transition: all 600ms ease-in-out !important;
}
.footer.hom{
    padding-top: 30px;
    position: fixed;
    left: 0px;
    bottom: 0px;
    height: 30px;
    z-index: 100000000000;
    background-color: var(--back-col-fot);
    backdrop-filter: blur(20px);
    height: 40px !important;
    transition: all 600ms ease-in-out !important;
    cursor: auto;
}
.footer.hom #menu_move_to_bot{
    width: 50px;
    height: 50px;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 16px;
    border-top-right-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: var(--primary-primary-dark);
    background-color: var(--back-col-fot);
    backdrop-filter: blur(20px);
    border: 1px solid var(--Grey-Light-grey);
    cursor: pointer;
    border-radius: 50%;
    z-index: 1000;
    color: var(--Grey-Light-grey);
    animation: scal-arr 1s ease-in-out infinite alternate;
}
@keyframes scal-arr {
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.2);
    }
}
.footer.hom #menu_move_to_bot::before{
    content: "";
    width: 100%;
    height: 100%;
    border: 1px solid var(--Grey-Light-grey);
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)scale(1.3);
    animation: anim-ico-footer 1s linear infinite;
}
@keyframes anim-ico-footer {
    0%{
        transform: translate(-50%, -50%)scale(1);
        opacity: 1;
    }
    100%{
        transform: translate(-50%, -50%)scale(1.4);
        opacity: 0;
    }
}
.footer.hom::before{
    content: "";
    width: calc(100%);
    height: 1px;
    background-color: var(--Grey-Light-grey);
    position: absolute;
    top: -3px;
    left: 0px;
    z-index: -1;
    opacity: 0.3;
}
.footer.hom::after{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: var(--back-col-fot);
    backdrop-filter: blur(20px);
    top: -2px;
    left: 0px;
}
.footer.hom.actv_footer::after{
    display: none !important;
}

@media (min-width: 1300px){
    .contact.new .container{
        padding: 80px 120px 40px !important;
    }
    .contact.new .content .box_one {
        width: fit-content;
    }
    .contact.new .content .box_one .head {
        gap: 18px;
        max-width: 800px;
    }
    .contact.new .box_one .form {
        max-width: 800px;
    }
    .contact.new .container .content .box_one {
        gap: 30px;
        width: 50%;
        max-width: 700px;
    }
    .contact.new .box_one .form form {
        gap: 24px;
    }
    .contact.new .box_one .form form textarea,
    .contact.new .box_one .form form input {
        padding: 16px;
    }
}
@media (max-width: 950px) {
    .contact.new .container {
        padding: 40px 16px 0px !important;
    }
    .contact.new .container .content {
        height: fit-content;
    }
    .contact.new .content .box_one .head {
        width: 100%;
        gap: 16px;
    }
    .contact.new .content .box_one .head .title{
        font-size: 40px;
    }
    .contact.new .container .content .box_one {
        gap: 32px;
    }
    .contact.new .box_one .form form textarea,
    .contact.new .box_one .form form input {
        padding: 16px;
    }
    .contact.new .box_one .form form .btn_box {
        flex-flow: column nowrap;
        gap: 6px;
    }
    .contact .box_one .form form .new_btn {
        width: 100% !important;
    }

    .footer.hom{
        overflow-x: visible !important;
        bottom: 0px !important;
        height: 100px !important;
    }
    .footer.hom.actv_footer{
        height: calc(100% - 70px) !important;
        bottom: calc(100% - 100px);
    }
    .footer.hom .content {
        gap: 10px 0px ;
        flex-flow:  row wrap;
        justify-content: space-between;

    }
    .footer.hom .box {
        width: calc(55% - 2px);
    }
    .footer.hom .box.cen,
    .footer.hom .box.cenone {
        width: calc(40% - 2px);
    }
    .footer.hom .box .title {
        margin-bottom: 6px;
    }
    .footer.hom .box.cenzero .links,
    .footer.hom .box.cenonetwo .links,
    .footer.hom .box.cenone .links, .footer .box.cen .links {
        gap: 4px;
    }
    .footer.hom .content .box.left {
        margin: auto;
    }
}
@media (min-width: 950px) {
    .footer .box.cenone .link.terms,
    .footer .box.cenone .link.privacy{
        display: none;
    }
}
@media screen and (min-width: 950px) and (max-width: 1300px){
    .footer.hom.actv_footer {
        height: 270px !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
}


#load_sub {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.795);
    z-index: 1000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000;
    display: none;
    justify-content: center;
    align-items: center;
    color: #fff;
}
.load_logo{
    width: 60px;
    height: 60px;
    background: url(../img/watt_logo.png) no-repeat;
    background-size: 60%;
    background-position: center;
}
.loader {
    width: var(--border);
    aspect-ratio: 1;
    border-radius: 50%;
    background: white;
    position: absolute;
    --y: calc((var(--size) * -0.5) + (var(--border) * 0.5));
    transform:
        rotate(0deg) translateY(var(--y));
    animation: spin var(--speed) infinite linear;
}

.loader::before {
    content: "";
    position: absolute;
    inset: calc(var(--border) * -0.5);
    border-radius: 50%;
    background: white;
    filter: blur(var(--blur));
    z-index: -1;
}

.loader::after {
    content: "";
    width: var(--size);
    aspect-ratio: 1;
    position: absolute;
    top: 0%;
    left: 50%;
    translate: -50% 0;
    background: conic-gradient(white, hsl(var(--hue), 100%, 70%), hsl(var(--hue), 100%, 10%), transparent 65%);
    border-radius: 50%;
    mask: radial-gradient(transparent calc(((var(--size) * 0.5) - var(--border)) - 1px),
            white calc((var(--size) * 0.5) - var(--border)));
}
@keyframes spin {
    to {
        transform: rotate(-360deg) translateY(var(--y));
    }
}


.rtl{
    direction: rtl !important;
}
.rtl-txt{
    text-align: right !important;
}
.flxend{
    justify-content: flex-end !important;
}
.falgend{
    align-self: flex-end !important;
}
#search_basic_box{
    display: none !important;
}
@media screen and (min-width: 950px) and (max-width: 1500px) {
    .certificate_new.new .container {
        padding: 40px 100px !important;
    }
    .partners.new.new .container {
        padding: 40px 100px !important;
    }
    .certificate_new .container .head .desc,
    .partners .box.one .head .desc {
        line-height: 16px;
    }
    .certificate_new .container .head {
        gap: 16px !important;
    }
    .certificate_new.new .head .title,
    .partners.new .head .title{
        line-height: 26px;
    }
}




.navbar::before{
    content: "";
    position: absolute;
    width: 100px;
    height:100%;
    bottom: 0px;
    left: 0;
    background: url(../img/wattman/wm27.png) no-repeat;
    background-position: bottom !important;
    background-size: auto 100% !important;
    animation: wm-nav-anim 15s linear 1;
    transform: scale(1);
    transform-origin: center !important;
    z-index: 100000000000000000000;
}
@keyframes wm-nav-anim {
    0%, 5%{
        left: 100%;
        background: url(../img/wattman/wm9.png) no-repeat;
        transform: scale(1);
    }
    10%, 20%{
        left: calc(100% - 120px);
    }
    13%{
        background: url(../img/wattman/wm9.png) no-repeat;
    }
    15%{
        bottom: 0;
        left: calc(100% - 120px);
    }
    17%, 23%{
        bottom: 100%;
        left: calc(100% - 200px);
    }
    15%, 23%{
        background: url(../img/wattman/wm8.png) no-repeat;
    }
    23%, 24%{
        bottom: 100%;
    }
    25%{
        bottom: 0;
    }
    24%, 30%{
        left: calc(100% - 250px);
    }
    24%, 30.9%{
        background: url(../img/wattman/wm1.png) no-repeat;
    }
    30%{
        width: 100px;
        transform: scale(1);
    }
    31%, 45.9%{
        width: 300px;
        background: url(../img/wattman/wm16.png) no-repeat;
        transform: scale(0.5);
    }
    35%{
        transform: scale(0.7);
    }
    40%{
        transform: scale(0.4);
    }
    44%{
        transform: scale(0.7);
    }
    46%{
        width: 300px;
        transform: scale(1);
    }
    46%{
        width: 100px;
    }
    46%, 63.9%{
        left: 340px;
    }
    46%, 53.9%{
        background: url(../img/wattman/wm26.png) no-repeat;
        transform: scale(1);
    }
    54%, 67%{
        opacity: 1;
    }
    54%, 63.9%{
        background: url(../img/wattman/wm28.png) no-repeat;
    }
    60%{
        transform: scale(0.5);
        opacity: 0;
        left: 340px;
    }
    64%{
        left: 0px;
        opacity: 0;
        transform: scale(1);
    }
    64%, 80%{
        background: url(../img/wattman/wm25.png) no-repeat;
    }
    79%{
        opacity: 1;
    }
    79.9%, 80.3% {
        opacity: 0;
    }
    81%{
        opacity: 1;
    }
    80.2%, 100%{
        background: url(../img/wattman/wm27.png) no-repeat;
    }
    67.1%, 100%{
        opacity: 1;
        transform: scale(1);
    }
    80%, 100%{
        width: 100px;
        left: 0px;
        bottom: 0;
        transform: scale(1);
    }
}


@media (max-width: 950px) {
    .navbar::before{
        position: fixed;
        height: 100px;
        left: 16px;
        bottom: 40px;
        animation: rotate-bounce 3s ease-in-out infinite;
    }
}



@keyframes rotate-bounce {
    0%, 100% {
        transform: rotate(0deg) translateY(0);
    }
    25% {
        transform: rotate(10deg) translateY(-10px);
    }
    50% {
        transform: rotate(0deg) translateY(0);
    }
    75% {
        transform: rotate(-10deg) translateY(-10px);
    }
}

.navbar.hide-before::before{
    display: none !important;
}

/* ****************************** Start FAQ ************************** */
.box_sec.faq .container {
    width: 100%;
    height: 100%;
    padding-left: 120px;
    padding-right: 120px;
    padding: 100px 120px 0px;
    display: flex;
    position: relative;
    background: url(../img/back_about_app.png) repeat;
    background-position: center;
    background-size: 1200px;
    background-attachment: fixed;
}
.box_sec.faq .container:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: linear-gradient(to right, var(--col-lin-one), var(--col-lin-two));
    opacity: 0.6;
}
.box_sec.faq .container .content {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 52px;
    z-index: 3;
    color: var(--txt-colo-tit);
}
.box_sec.faq .content .head {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 32px;
}
.box_sec.faq .content .head .title{
    font-weight: 800;
    font-size: 70px;
    opacity: 0;
    transition: all 800ms ease-out 800ms;
    position: relative;
    bottom: 100px;
}
.box_sec.faq.active .content .head .title{
    opacity: 1 !important;
    bottom: 0px !important;
}

.box_sec.faq .row-btn a{
    font-size: 18px;
    padding: 0px 20px;
    position: relative;
    /* border-bottom: 1px solid var(--txt-colo-tit); */
    color: var(--txt-colo-tit);
    opacity: 0.5;
    transition: all 0.3s ease-in-out;
}
.box_sec.faq .row-btn a:before{
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    background-color: var(--txt-colo-tit);
    opacity: 0.5;
    transition: all 0.3s ease-in-out;
}
.box_sec.faq .row-btn a:hover,
.box_sec.faq .row-btn a:hover::before{
    opacity: 1;
}
.box_sec.faq .boxes{
    width: 100%;
    max-width: 1000px;
    display: flex;
    flex-flow: column nowrap;
    gap: 16px;
}



.box_sec.faq .boxfaq{
    padding-left: 24px;
    transition: all 600ms ease-in-out;
    position: relative;
    z-index: 1;
    border-radius: 4px;
    box-shadow: 0px 4px 4px 0px #0000002d;
}
.box_sec.faq .boxfaq::before{
    content: "";
    width: 100%;
    height: 100%;
    background: url(../img/back_about_app.png) no-repeat ;
    background-size: 1000px;
    background-position: center;
    background-attachment: fixed;
    background-color: var(--col-bx-timl);
    position: absolute;
    z-index: -1;
    top: 0px;
    left: 0px;
    backdrop-filter: blur(20px);
    border-radius: 4px;
    opacity: 0.8;
}



.box_sec.faq .boxfaq .ques .txt{
    position: relative;
}
.box_sec.faq .boxfaq .ques .txt::before{
    content: "";
    width: 0px;
    height: 1px;
    background: linear-gradient(to right, transparent, #2A9595, transparent);
    position: absolute;
    bottom: -8px;
    left: 50%;
    transition: all 400ms ease-in-out;
}
.box_sec.faq .boxfaq.act .ques .txt::before{
    width: 100%;
    bottom: -8px;
    left: 0px;
}
.box_sec.faq .boxfaq .ques{
    cursor: pointer;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 10px 24px 10px 0px;
    font-size: 24px;
    transition: all 300ms ease-in-out;
}
.box_sec.faq .boxfaq.act .ques{
    color: #2A9595;
}
.box_sec.faq .boxfaq .ans{
    overflow: hidden;
    transition: all 300ms linear;
}

.box_sec.faq .boxfaq .ans .para{
    word-spacing: 1px;
    color: var(--faq-ans);
    font-size: 18px;
    margin-bottom: 8px;
}

.fi-br-chevron-double-up,
.fi-br-chevron-double-down{
    display: none;
    font-size: 14px !important;
}
.box_sec.faq .boxfaq .icon_up_down .fi-br-chevron-double-down{
    display: block !important;
}
.box_sec.faq .boxfaq.act .icon_up_down .fi-br-chevron-double-down{
    display: none !important;
}
.box_sec.faq .boxfaq.act .icon_up_down .fi-br-chevron-double-up{
    display: block !important;
}

.box_sec.faq .boxfaq .ans .sptit{
    font-size: 14px;
    color: #2A9595;
}
.box_sec.faq .boxfaq .ans .p-group{
    display: flex;
    flex-flow: column;
}

@media screen and (min-width: 951px) and (max-width: 1300px) {
    .box_sec.faq .container {
        padding: 30px 100px 10px 100px;
    }
    .box_sec.faq .container .content {
        gap: 24px;
    }
    .box_sec.faq .content .head .title {
        font-size: 32px;
    }
    .box_sec.faq .content .head {
        gap: 18px;
    }
    .box_sec.faq .boxes {
        gap: 10px;
    }
    .box_sec.faq .boxfaq .ques {
        font-size: 18px;
        padding: 8px 24px 8px 0px;
    }
    .box_sec.faq .boxfaq.last{
        display: none !important;
    }
    .box_sec.faq .boxfaq .ans .para {
        font-size: 16px !important;
    }
    .box_sec.faq .boxfaq .ans .p-group{
        display: block;
        padding-top: 6px;
    }
}
@media (max-width: 950px){
    .box_sec.faq .container {
        padding: 32px 16px 10px;
    }
    .box_sec.faq .content .head .title {
        font-size: 32px;
        text-align: center;
    }
    .box_sec.faq .container .content {
        gap: 24px;
    }
    .box_sec.faq .boxfaq .ans .para {
        font-size: 15px;
    }
    .box_sec.faq .boxfaq .ques {
        font-size: 19px;
    }
    .box_sec.faq .boxes {
        gap: 10px;
    }
}
/* ****************************** End FAQ ************************** */