/* loader section */

/* loader section */
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    :root{
        --white-color: #fff;
        --darkgray-color: #555555;
        --dmgray-color: #999999;
        --gray-color: #cbd9ec;
        --wgray-color: #dbdbdb;
        --bggray-color: #f8f8f8;
        --darkblue-color: #1a264c;
        --blue-color: #1a264c;
        --mblue-color: #3d4d75;
        --lighblue-color: #5e8ba3;
        --wblue-color: #cbd9ec;
        --lightorange-color: #e6a755;
        --orange-color: #e5952d;
        --cairo-bold-font:Cairo;
        --main-transition: 0.3s;

    }
    html {
        scroll-behavior: smooth;

    }

    html {
        --scrollbarBG:var(--lighblue-color);
        --thumbBG: var(--lightorange-color);
    }
    body::-webkit-scrollbar {
        width: 8px;
        background: transparent;
        opacity: 0;
    }
    body {
        scrollbar-width: thin;
        scrollbar-color: var(--thumbBG) var(--scrollbarBG);
    }
    body::-webkit-scrollbar-track {
        background: var(--scrollbarBG);
    }
    body::-webkit-scrollbar-thumb {
        background-color: var(--thumbBG) ;
        border-radius: 0;
        border: none;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
}

    body {
        margin: 0;
        font-family: 'Cairo', sans-serif;
        overflow-x: hidden !important;
    }
    .overflow{overflow: initial   !important;}
    .overflow2{overflow: initial   !important;}
    @media (max-width: 912px) {
        .overflow{overflow: hidden   !important;}
        .overflow2{
            overflow:visible !important;
        }
    }

    a {
        text-decoration: none;
    }
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .float-right{
        float: right !important;
    }

    .container  {
        padding-left: 11.719vw !important;
        padding-right: 11.719vw !important;
        margin: 0;
        padding-top: 0vw !important;
        padding-bottom: 0vw !important;
        width: 100% !important;
    }





   .container_app {
        padding-left: 11.719vw;
        padding-right: 11.719vw;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    button{
        width: 11.25vw;
        height: 2.6vw;
        padding: 0.37vw 1.67vw 0.52vw;
        background-color: var(--lightorange-color);
        font-family: var(--cairo-bold-font);
        font-size: 0.94vw;
        font-weight: bold;
        line-height: 0.17;
        text-align: center;
        color: var(--white-color);
        border: none;
    }

    @media (max-width: 912px) {
    button {
        width: 37vw;
        height: 9.6vw;
        font-size: 2.94vw;
    }
    }

    button ,
    button:link ,
    button::selection ,
    button:checked ,
    button:focus{
        outline: none;
        box-shadow: none;
    }

    /* start nav */
    .demo-cont{
        overflow-x: hidden;
    }
/* navbar */
    .navbar{
        padding: 0.4vw 0 0vw ;
        box-shadow: 0 0.31vw 0.31vw 0 rgba(0, 0, 0, 0.16);
        background-color: var(--blue-color);
        font-family: var(--cairo-bold-font);
        font-weight:bold ;
        width: 100%;
        overflow-x: hidden;
        height: 5.21vw;
    }

    .navbar .logo-img{
        width: 10.42vw;
        height: 3.54vw;
        object-fit: contain;
        margin: 0 7.12vw 0.4vw 0;
    }
    @media (max-width: 912px) {
        .navbar{
            height: auto;
        }

        .navbar .logo-img {
            width: 24.42vw;
            height: 10.54vw;
        }
    }
    .navbar-nav li .nav-link {
        padding-right: 1.6vw !important;
        padding-left: 1.6vw !important;
        padding-top: 0vw;
        margin-top: -0.3vw;
    }
    @media (max-width: 912px) {
        .navbar-nav li .nav-link {
            padding-top: 3vw;
        }
    }
    .navbar-nav li  {
        text-align: center;
        margin: 0;
    }
    .navbar-nav li a {
        font-family: var(--cairo-bold-font);
        font-weight:bold ;
        font-size: 0.94vw;
        text-align: center;
        color: var(--white-color);
        padding: 0;
        margin: 0;
        white-space:nowrap;
        border-right: 1px solid var(--mblue-color);
    }

    @media (max-width: 912px) {
        .navbar-nav li a {
            font-size: 2.94vw;
            border-right: none;
        }

    }
    .navbar-nav li a:hover {
        color: var(--gray-color);
    }
    .navbar-nav li:last-child a {
        border-right: none;
    }
    .navbar-toggler{
        color: var(--white-color);
    }
    .navbar-toggler .navbar-toggler-icon img{
        width: 8vw;
        height: 8vw;
        position: absolute;
        top: 5vw;
        right: 6vw;
    }
    .navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow:none !important;
}
    .language{
        display: flex;
        padding-top: 0.5vw;
        margin: 0;
    }
    @media (max-width: 1280px) {
        .language{
            display: flex;
            padding-top: 0.5vw;
            margin: 0;
        }
    }
    .languageMain{
        display: flex;
        padding: 0;
        margin: 0;
    }
    @media (max-width: 912px) {
        .languageMain{
            display: block;
        }

    }
    .language-link{
        font-family: var(--cairo-bold-font);
        font-size: 0.89vw;
        text-align: left;
        color: var(--white-color);
        font-family: var(--cairo-bold-font);
        font-weight:500 ;
        margin: 0.89vw 2.7vw 1.39vw 0vw;
        line-height: 2;
    }
    .language:hover .language-link{
        color: var(--gray-color);
    }
    .img_lang{
        width: 0.83vw;
        height: 0.83vw;
        margin: 1.1vw 0.78vw 1.76vw 11.13vw;
        object-fit: contain;
    }
    .language:hover .img_lang{
                color: var(--lighblue-color);
}
.demo{
    padding-top: 0.7vw;
}
    .demo button{
        width: 11.25vw;
        height: 2.6vw;
        margin: 0vw 0 0vw 0vw;
        padding: 0.37vw 2.6vw 0.52vw;
        background-color: #e5952d;
        white-space:nowrap;
        background-color: var(--lightorange-color);
        border-radius: 0;
        border: none;
        color:var(--white-color);
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
        font-family: var(--cairo-bold-font);
        font-weight:bold ;
        font-size: 0.94vw;
        line-height: 0.17;
        text-align: center;
        display: flex;
        align-items: center;
        position: relative;
        z-index: 1;
}
.demo button::before{
    content: "";
    position: absolute;
    left: 50%;
    top:50%;
    width: 0;
    height: 0;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    background-color: var( --orange-color);
    z-index: -1;
    transition: var(--main-transition);
    -webkit-transition: var(--main-transition);
    -moz-transition: var(--main-transition);
    -ms-transition: var(--main-transition);
    -o-transition: var(--main-transition);
}
.demo button:hover::before{
    width: 100%;
    height: 100%;
    color:var(--white-color);
}
.demo button:hover{
    background-color: var(--orange-color);
}
.demo button:hover{
    color:var(--white-color);
}
.demo button ,
.demo button:link ,
.demo button::selection ,
.demo button:checked ,
.demo button:focus{
    outline: none;
    box-shadow: none;
}
.navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
}
@media (max-width: 912px) {
    .navbar-collapse {
        flex-basis: 100%;
        flex-grow: 1;
        align-items: center;
        padding-left: 21vw;
    }}
@media (max-width: 890px) {
    .navbar-collapse {
        flex-basis: 100%;
        flex-grow: 1;
        align-items: center;
        padding-left: 12vw;
    }}

@media (max-width: 912px) {
    .language{
        padding-top: 2vw;
        margin: 0 0vw 0px 8vw;
        }


    .language-link {
        font-size: 2.89vw;
        margin: 0.3vw 2.7vw 1.39vw 2vw;
    }
    .img_lang {
        width: 3.83vw;
        height: 3.83vw;
        margin: 1vw 0 3.76vw 8.5vw;
    }
    .demo button{
        width: 26.25vw;
        height: 6.6vw;
        margin: 0.47vw auto 5vw auto;
        padding: 0.37vw 4vw 0.52vw;
        font-size: 2.94vw;
    }
}
@media (max-width: 890px) {
    .language{
        padding-top: 1vw;
        margin: 0 0vw 0px 17vw;
        }
    }
@media (max-width: 768px)
{
.language {
    padding-top: 1vw;
    margin: 0 0vw 0px 16vw;
}
}
@media (max-width: 600px)
{
.language {
    padding-top: 1vw;
    margin: 0 0vw 0px 17vw;
}
}
@media (max-width: 540px)
{
.language {
    padding-top: 1vw;
    margin: 0 0vw 0px 19vw;
}
}
@media (max-width: 480px) {
    .language{
        padding-top: 0vw;
        margin: 0 0vw 0px 19vw;
        }
    }
@media (max-width: 412px) {
    .language{
        padding-top: 0vw;
        margin: 0 0vw 0px 20vw;
        }
    }
@media (max-width: 400px) {
    .language{
        padding-top: 0vw;
        margin: 0 0vw 0px 22vw;
        }
    }
@media (max-width: 393px) {
    .language{
        padding-top: 0vw;
        margin: 0 0vw 0px 19vw;
        }
    }
    @media (max-width: 384px)
    {
        .language {
            padding-top: 0vw;
            margin: 0 0vw 0px 19vw;
        }
    }
    @media (max-width: 370px) {
        .language{
            padding-top: 0vw;
            margin: 0 0vw 0px 22vw;
            }
        }

@media (max-width: 768px) {
    .img_lang {
        width: 3.83vw;
        height: 3.83vw;
        margin: 1.35vw 0 3.76vw 15.5vw;
    }
    .navbar-collapse {
        flex-basis: 100%;
        flex-grow: 1;
        align-items: center;
        padding-left: 5vw;
    }
}
@media (max-width: 540px) {

    .navbar-collapse {
        flex-basis: 100%;
        flex-grow: 1;
        align-items: center;
        padding-left: 0vw;
    }
}



@media (max-width: 600px) {
    .img_lang {
        width: 3.83vw;
        height: 3.83vw;
        margin: 1.35vw 0 3.76vw 12.5vw;
    }
}
@media (max-width: 540px) {
    .img_lang {
        width: 3.83vw;
        height: 3.83vw;
        margin: 1.35vw 0 3.76vw 18.5vw;
    }
}
@media (max-width: 480px) {
    .img_lang {
        width: 3.83vw;
        height: 3.83vw;
        margin: 1.35vw 0 3.76vw 18.5vw;
    }
}
@media (max-width: 412px) {
    .img_lang {
        width: 3.83vw;
        height: 3.83vw;
        margin: 1.35vw 0 3.76vw 17.5vw;
    }
}
@media (max-width: 384px) {
    .img_lang {
        width: 3.83vw;
        height: 3.83vw;
        margin: 2vw 0 3.76vw 18.5vw;
    }}
@media (max-width: 370px) {
    .img_lang {
        width: 3.83vw;
        height: 3.83vw;
        margin: 2vw 0 3.76vw 15.5vw;
    }}
@media (max-width: 240px) {
    .img_lang {
        width: 3.83vw;
        height: 3.83vw;
        margin: 4vw 0 .76vw 15.5vw;
    }}

@media (max-width: 912px){
.navbar-toggler {
    width: 13vw;
}
}
/* end nav */

/* start slide */
    .fnc-slider {
        overflow: hidden;
        box-sizing: border-box;
        position: relative;
        height:calc(100vh - 5.2vw);
        width: 100%;
    }
    .fnc-slider *, .fnc-slider *:before, .fnc-slider *:after {
        box-sizing: border-box;
    }
    .fnc-slider__slides {
        position: relative;
        height: 100%;
        -webkit-transition: transform 1s 1s, -webkit-transform 1s 1s;
        transition: -webkit-transform 1s 1s;
        transition: transform 1s 1s;
        transition: transform 1s 1s, -webkit-transform 1s 1s;
        -moz-transition: transform 1s 1s, -webkit-transform 1s 1s;
        -ms-transition: transform 1s 1s, -webkit-transform 1s 1s;
        -o-transition: transform 1s 1s, -webkit-transform 1s 1s;
}

    .fnc-slider .m--navbg-dark {
        background-color: var(--blue-color);
    }
    .fnc-slider .m--navbg-green {
        background-color: var(--blue-color);
    }

    .fnc-slide {
        overflow: hidden;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }

    .fnc-slide.m--before-sliding {
        z-index: 2 !important;
        -webkit-transform: translate3d(100%, 0, 0);
                transform: translate3d(100%, 0, 0);
    }
    .fnc-slide.m--active-slide {
        z-index: 1;
        /* -webkit-transition: -webkit-transform 1s 1s ease-in-out;
        transition: -webkit-transform 1s 1s ease-in-out;
        transition: transform 1s 1s ease-in-out;
        transition: transform 1s 1s ease-in-out, -webkit-transform 1s 1s ease-in-out;
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0); */
    }
    .fnc-slide__inner {
        position: relative;
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: cover;

        /* -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0); */
    }
    .m--global-blending-active .fnc-slide__inner, .m--blend-bg-active .fnc-slide__inner {
        background-blend-mode: luminosity;
    }
    /* .m--before-sliding .fnc-slide__inner {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        -moz-transform: translate3d(-100%, 0, 0);
        -ms-transform: translate3d(-100%, 0, 0);
        -o-transform: translate3d(-100%, 0, 0);
}
    .m--active-slide .fnc-slide__inner {
        -webkit-transition: -webkit-transform 1s 1s ease-in-out;
        transition: -webkit-transform 1s 1s ease-in-out;
        transition: transform 1s 1s ease-in-out;
        transition: transform 1s 1s ease-in-out, -webkit-transform 1s 1s ease-in-out;
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    } */
    .fnc-slide__mask {
        overflow: hidden;
        z-index: 1;
        position: absolute;
        left:0;
        top: 0;
        width: 0vw;
        height: 100%;
        margin-right: 0px;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%,0 0);
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%,0 0);
        -webkit-transform-origin: 50% 0;
                transform-origin: 50% 0;
        -webkit-transition-timing-function: ease-in-out;
                transition-timing-function: ease-in-out;
    }
    .m--before-sliding .fnc-slide__mask {
        -webkit-transform: rotate(-0deg) translate3d(0px, 0, 0);
        transform: rotate(-0deg) translate3d(0px, 0, 0);
        opacity: 0;
        -moz-transform: rotate(-0deg) translate3d(0px, 0, 0);
        -ms-transform: rotate(-0deg) translate3d(0px, 0, 0);
        -o-transform: rotate(-0deg) translate3d(0px, 0, 0);
}
    .m--active-slide .fnc-slide__mask {
        -webkit-transition: opacity 1s 1s, -webkit-transform 1s 1s;
        transition: opacity 1s 1s, -webkit-transform 1s 1s;
        transition: transform 1s 1s, opacity 1s 1s;
        transition: transform 1s 1s, opacity 1s 1s, -webkit-transform 1s 1s;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
        background-color: var(--white-color);
        -moz-transition: opacity 1s 1s, -webkit-transform 1s 1s;
        -ms-transition: opacity 1s 1s, -webkit-transform 1s 1s;
        -o-transition: opacity 1s 1s, -webkit-transform 1s 1s;
}
    .m--previous-slide .fnc-slide__mask {
                -webkit-transition: transform 1s 0.33333s, opacity 1s 1s;
                transition: opacity 1s 1s, -webkit-transform 1s 0.33333s;
                transition: transform 1s 0.33333s, opacity 1s 1s;
                transition: transform 1s 0.33333s, opacity 1s 1s, -webkit-transform 1s 0.33333s;
                -webkit-transform: rotate(0deg) translate3d(-0px, 0, 0);
                transform: rotate(0deg) translate3d(-0px, 0, 0);
                opacity: 0;
                -moz-transform: rotate(0deg) translate3d(-0px, 0, 0);
                -ms-transform: rotate(0deg) translate3d(-0px, 0, 0);
                -o-transform: rotate(0deg) translate3d(-0px, 0, 0);
                -moz-transition: transform 1s 0.33333s, opacity 1s 1s;
                -ms-transition: transform 1s 0.33333s, opacity 1s 1s;
                -o-transition: transform 1s 0.33333s, opacity 1s 1s;
}
    .fnc-slide__mask-inner {
        z-index: -1;
        position: absolute;
        width: 98vw;
        height: 109vh;
        background-size: cover;
        background-position: center center;
        /* background-blend-mode:luminosity; */
        background-color: var(--white-color);
        -webkit-transform-origin: 50% 16.5vh;
                transform-origin: 50% 16.5vh;
        -webkit-transition-timing-function: ease-in-out;
                transition-timing-function: ease-in-out;

    }
    .m--before-sliding .fnc-slide__mask-inner {
                -webkit-transform: translateY(0) rotate(0deg) translateX(-0px) translateZ(0);
                transform: translateY(0) rotate(0deg) translateX(-0px) translateZ(0);
                -moz-transform: translateY(0) rotate(0deg) translateX(-0px) translateZ(0);
                -ms-transform: translateY(0) rotate(0deg) translateX(-0px) translateZ(0);
                -o-transform: translateY(0) rotate(0deg) translateX(-0px) translateZ(0);
}
    .m--active-slide .fnc-slide__mask-inner {
        -webkit-transition: -webkit-transform 1s 1s;
        transition: -webkit-transform 1s 1s;
        transition: transform 1s 1s;
        transition: transform 1s 1s, -webkit-transform 1s 1s;
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -moz-transition: -webkit-transform 1s 1s;
        -ms-transition: -webkit-transform 1s 1s;
        -o-transition: -webkit-transform 1s 1s;
}
    .m--previous-slide .fnc-slide__mask-inner {
                -webkit-transition: -webkit-transform 1s 0.33333s;
                transition: -webkit-transform 1s 0.33333s;
                transition: transform 1s 0.33333s;
                transition: transform 1s 0.33333s, -webkit-transform 1s 0.33333s;
                -webkit-transform: translateY(0) rotate(-0deg) translateX(0px) translateZ(0);
                transform: translateY(0) rotate(-0deg) translateX(0px) translateZ(0);
                -moz-transform: translateY(0) rotate(-0deg) translateX(0px) translateZ(0);
                -ms-transform: translateY(0) rotate(-0deg) translateX(0px) translateZ(0);
                -o-transform: translateY(0) rotate(-0deg) translateX(0px) translateZ(0);
}
    .fnc-slide__content-2 {
        z-index: 2;
        position: absolute;
        left: 0;
        top: 0;
        width: 44.27vw;
        height: calc(100vh - 5.2vw);
        padding: 5.2vw 2.87vw 3.13vw 11.72vw;
        background-color: white;
        opacity: 0.8;
    }
    .fnc-slide__content-3 {
        z-index: 2;
        position: absolute;
        left: 0;
        top: 0;
        width: 44.27vw;
        height: calc(100vh - 5.2vw);
        padding: 5.2vw 2.87vw 3.13vw 11.72vw;
        background-color: white;
        opacity: 0.95;
    }
    @media (max-width: 912px) {
        .fnc-slider {
            height: 177.07vw;
        }
        .fnc-slider__slides {
            height: 177.07vw;
        }
        .fnc-slide__inner {
            height: 177.07vw;
        }
        .fnc-slide__mask {
            height: 177.07vw;
        }
        .fnc-slide__mask-inner {
            height: 177.07vw;

        }
    .fnc-slide__content-2 {
        width: 100vw;
        height: 177.07vw;
    }
    .fnc-slide__content-3 {
        width: 100vw;
        height: 177.07vw;
    }
    }

    .fnc-slide__content {
        z-index: 2;
        position: absolute;
        left: 0;
        top: 0;
        width: 44.27vw;
        height: calc(100vh - 5.2vw);
        padding: 3.2vw 2.87vw 3.13vw 11.72vw;
    }



    .fnc-slide__content .line1{
        width: 19.69vw;
        height: 3.65vw;
        margin: 0 0.443vw 2vw 0;
        object-fit: contain;
    }
    .fnc-slide__content .line2{
        width: 9.56vw;
        height: 3.65vw;
        margin: 0.6vw 0 2.55vw 0.443vw;
        object-fit: contain;
    }

    .fnc-slide__heading-line {
        overflow: hidden;
        position: relative;
        font-family: var(--cairo-bold-font);
        font-weight:bold ;
        line-height: 0.97;
        text-align: left;
        color: var(--darkblue-color);
        font-size: 3.44vw;
        text-transform: uppercase;
    }
    .fnc-slide__heading-line .smText {
        font-family: var(--cairo-bold-font);
        line-height: 0.83;
        text-align: left;
        color: var(--lighblue-color);
        font-weight: 400;
        font-size: 1.25vw;
        padding: 0;
        margin: 0;
        text-transform: uppercase;
    }
    .fnc-slide__heading-line .lightText {
        color: var(--lighblue-color);
    }
    .fnc-slide__heading-line-p {
        overflow: hidden;
        position: relative;
        font-family: var(--cairo-bold-font);
        font-size: 0.89vw;
        font-weight: 400;
        line-height: 1.41;
        text-align: left;
        padding-top: 1vw;
        color:var(--darkgray-color);
    }
    .fnc-slide__content button{
        margin-top: 1.6vw;
    }
    @media (max-width: 768px) {
        .fnc-slide__content button {
            margin-top: 3vw;
        }
    }

    .fnc-slide__content button a{
    color: var(--white-color);
    }
    .fnc-slide__content button:hover{
        background-color: var(--orange-color);
    }

    @media (max-width: 912px) {
        .fnc-slide__mask {
            width: 0vw;
        }
        .fnc-slide__content {
            z-index: 2;
            position: absolute;
            left: 0;
            top: 0;
            width: 100vw;
            height: 177.07vw;
            padding: 10vw 5.3vw 56vw 5.3vw;
        }
        .fnc-slide__content .line1 {
            width: 50vw;
            height: 10vw;
            margin: 0 0.443vw 3vw 0;
        }
        .fnc-slide__content .line2 {
            width: 25vw;
            height: 31vw;
            margin: -6.02vw 0 2.55vw 0.443vw;
            object-fit: contain;
        }
        .fnc-slide__heading-line .smText {
            font-size: 4.1vw;
            line-height: 2.3;
        }
        .fnc-slide__heading-line {
            font-size: 9.87vw;
            padding-top: 5.3vw;
        }
        .fnc-slide__heading-line-p {
        font-size: 3.73vw;
        padding-bottom: 9vw;
        padding-top: 6vw;
    }
    .fnc-slide__content button{
        width: 40.27vw;
        height: 10.67vw;
        font-size: 4vw;

    }
    }
    .fnc-slide__heading-line:nth-child(2) {
        padding-left: 30px;
    }
    /* .m--before-sliding .fnc-slide__heading-line {
                -webkit-transform: translateY(100px);
                transform: translateY(100px);
                -moz-transform: translateY(100px);
                -ms-transform: translateY(100px);
                -o-transform: translateY(100px);
}
    .m--active-slide .fnc-slide__heading-line {
        -webkit-transition: -webkit-transform 1s 1s;
        transition: -webkit-transform 1s 1s;
        transition: transform 1s 1s;
        transition: transform 1s 1s, -webkit-transform 1s 1s;
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
        -moz-transition: -webkit-transform 1s 1s;
        -ms-transition: -webkit-transform 1s 1s;
        -o-transition: -webkit-transform 1s 1s;
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
}
    .m--previous-slide .fnc-slide__heading-line {
                -webkit-transition: transform 1s;
                transition: -webkit-transform 1s;
                transition: transform 1s;
                transition: transform 1s, -webkit-transform 1s;
                -webkit-transform: translateY(-100px);
                transform: translateY(-100px);
                -moz-transform: translateY(-100px);
                -ms-transform: translateY(-100px);
                -o-transform: translateY(-100px);
                -moz-transition: transform 1s;
                -ms-transition: transform 1s;
                -o-transition: transform 1s;
} */
    /* .fnc-slide__heading-line span {
    } */
    /* .m--before-sliding .fnc-slide__heading-line span {
} */
    .m--active-slide .fnc-slide__heading-line span {
                -webkit-transition: -webkit-transform 0.1s 0.1s;
                transition: -webkit-transform 0.1s 0.1s;
                transition: transform 0.1s 0.1s;
                transition: transform 0.1s 0.1s , -webkit-transform 1s 1s;
                -webkit-transform: translateY(0);
                transform: translateY(0);
                -moz-transform: translateY(0);
                -ms-transform: translateY(0);
                -o-transform: translateY(0);
                -moz-transition: -webkit-transform 0.1s 0.1s;
                -ms-transition: -webkit-transform 0.1s 0.1s;
                -o-transition: -webkit-transform 0.1s 0.1s;
}
    /* .m--previous-slide .fnc-slide__heading-line span {
} */




/* ----------------------------------------------
 * Generated by Animista on 2022-10-25 23:11:20
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
 @-webkit-keyframes text-focus-in {
    0% {
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  @keyframes text-focus-in {
    0% {
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }

    .fnc-slide__action-btn {
        position: relative;
        margin-left: 200px;
        padding: 5px 15px;
        font-size: 20px;
        line-height: 1;
        color: transparent;
        border: none;
        text-transform: uppercase;
        background: transparent;
        cursor: pointer;
        text-align: center;
        outline: none;
    }
    .fnc-slide__action-btn span {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        -webkit-perspective: 1000px;
        perspective: 1000px;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transition: transform 0.3s;
        transition: -webkit-transform 0.3s;
        transition: transform 0.3s;
        transition: transform 0.3s, -webkit-transform 0.3s;
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
        line-height: 30px;
        color: #fff;
        -moz-transition: transform 0.3s;
        -ms-transition: transform 0.3s;
        -o-transition: transform 0.3s;
}
    .fnc-slide__action-btn span:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border: 2px solid #fff;
        border-top: none;
        border-bottom: none;
    }
    .fnc-slide__action-btn span:after {
        content: attr(data-text);
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        line-height: 30px;
        background: #1F2833;
        opacity: 0;
        -webkit-transform-origin: 50% 0;
                transform-origin: 50% 0;
        -webkit-transform: translateY(100%) rotateX(-90deg);
                transform: translateY(100%) rotateX(-90deg);
        -webkit-transition: opacity 0.15s 0.15s;
        transition: opacity 0.15s 0.15s;
    }
    .fnc-slide__action-btn:hover span {
        -webkit-transform: rotateX(90deg);
                transform: rotateX(90deg);
    }
    .fnc-slide__action-btn:hover span:after {
        opacity: 1;
        -webkit-transition: opacity 0.15s;
        transition: opacity 0.15s;
    }
    .fnc-nav {
        z-index: 5;
        position: absolute;
        right: 0;
        bottom: 0;
    }
    .fnc-nav__bgs {
        z-index: -1;
        overflow: hidden;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .fnc-nav__bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .fnc-nav__bg.m--nav-bg-before {
        z-index: 2 !important;
        -webkit-transform: translateX(100%);
                transform: translateX(100%);
    }
    .fnc-nav__bg.m--active-nav-bg {
        z-index: 1;
        -webkit-transition: transform 1s 1s;
        transition: -webkit-transform 1s 1s;
        transition: transform 1s 1s;
        transition: transform 1s 1s, -webkit-transform 1s 1s;
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -moz-transition: transform 1s 1s;
        -ms-transition: transform 1s 1s;
        -o-transition: transform 1s 1s;
}
    .fnc-nav__controls {
        font-size: 0;

    }
    .fnc-nav__control {
        overflow: hidden;
        position: relative;
        display: inline-block;
        vertical-align: top;
        width: 18.4vw;
        height: 10.94vw;
        padding: 6.25vw 1.56vw 1.3vw 1.56vw;
        font-size: 0.98vw;
        font-weight: bold;
        line-height: 1.2;
        text-align: center;
        background-color: var(--mblue-color);
        font-family: var(--cairo-bold-font) !important;
        color: var(--mblue-color);
        text-transform: uppercase;
        background: transparent;
        border: none;
        outline: none;
        cursor: pointer;
        -webkit-transition: background-color 0.1s;
        transition: background-color 0.1s;
        -moz-transition: background-color 0.1s;
        -ms-transition: background-color 0.1s;
        -o-transition: background-color 0.1s;
}
@media (max-width: 1281px) {
    .fnc-nav__control {
        width: 18.58vw;
    }
}
@media (max-width: 912px) {
    .fnc-nav__control {
        width: 33.33vw;
        height: 42.67vw;
        padding: 17.6vw 2vw 5.3vw 2vw;
        font-size: 3.5vw;
    }
}
/* @media (max-width: 600px){
    .fnc-nav__control {
        height: 38vw;
    }
    }
@media (max-width: 320px){
    .fnc-nav__control {
        height: 30vw;
    }
    } */
    .fnc-nav__control.m--active-control {
        background: var(--mblue-color);
        color: var(--white-color);
    }
    .fnc-nav__control-progress {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background: var(--lighblue-color);
        -webkit-transform-origin: 0 50%;
                transform-origin: 0 50%;
        -webkit-transform: scaleX(0);
                transform: scaleX(0);
        -webkit-transition-timing-function: linear !important;
                transition-timing-function: linear !important;
    }
    .m--with-autosliding .m--active-control .fnc-nav__control-progress {
        -webkit-transform: scaleX(1);
                transform: scaleX(1);
    }
    .m--prev-control .fnc-nav__control-progress {
        -webkit-transform: translateX(100%);
                transform: translateX(100%);
        -webkit-transition: -webkit-transform 1s !important;
        transition: -webkit-transform 1s !important;
        transition: transform 1s !important;
        transition: transform 1s, -webkit-transform 1s !important;
    }
    .m--reset-progress .fnc-nav__control-progress {
        -webkit-transform: scaleX(0);
                transform: scaleX(0);
        -webkit-transition: -webkit-transform 0s 0s !important;
        transition: -webkit-transform 0s 0s !important;
        transition: transform 0s 0s !important;
        transition: transform 0s 0s, -webkit-transform 0s 0s !important;
    }
    .m--autosliding-blocked .fnc-nav__control-progress {
        -webkit-transition: all 0s 0s !important;
        transition: all 0s 0s !important;
        -webkit-transform: scaleX(0) !important;
                transform: scaleX(0) !important;
    }

    /* NOT PART OF COMMON SLIDER STYLES */

    .demo-cont {
        overflow: hidden;
        position: relative;
        height: calc(100vh - 5.2vw);
        -webkit-perspective: 1500px;
                perspective: 1500px;

    }
    .demo-cont__credits {
        box-sizing: border-box;
        overflow-y: auto;
        z-index: 1;
        position: absolute;
        right: 0;
        top: 0;
        width: 400px;
        height: 100%;
        padding: 20px 10px 30px;
        background: #303030;
        font-family: "Open Sans", Helvetica, Arial, sans-serif;
        color: #fff;
        text-align: center;
        -webkit-transition: -webkit-transform 1s;
        transition: -webkit-transform 1s;
        transition: transform 1s;
        transition: transform 1s, -webkit-transform 1s;
        -webkit-transform: translate3d(100%, 0, 0) rotateY(-45deg);
                transform: translate3d(100%, 0, 0) rotateY(-45deg);
        will-change: transform;
    }
    .credits-active .demo-cont__credits {
        -webkit-transition: -webkit-transform 1s 0.23333s;
        transition: -webkit-transform 1s 0.23333s;
        transition: transform 1s 0.23333s;
        transition: transform 1s 0.23333s, -webkit-transform 1s 0.23333s;
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
    .demo-cont__credits *, .demo-cont__credits *:before, .demo-cont__credits *:after {
        box-sizing: border-box;
    }
    .demo-cont__credits-close {
        position: absolute;
        right: 20px;
        top: 20px;
        width: 28px;
        height: 28px;
        cursor: pointer;
    }
    .demo-cont__credits-close:before, .demo-cont__credits-close:after {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        height: 2px;
        margin-top: -1px;
        background: #fff;
    }
    .demo-cont__credits-close:before {
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
    }
    .demo-cont__credits-close:after {
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
    }
    .demo-cont__credits-heading {
        text-transform: uppercase;
        font-size: 40px;
        margin-bottom: 20px;
    }
    .demo-cont__credits-img {
        display: block;
        width: 60%;
        margin: 0 auto 30px;
        border-radius: 10px;
    }
    .demo-cont__credits-name {
        margin-bottom: 20px;
        font-size: 30px;
    }
    .demo-cont__credits-link {
        display: block;
        margin-bottom: 10px;
        font-size: 24px;
        color: #fff;
    }
    .demo-cont__credits-blend {
        font-size: 30px;
        margin-bottom: 10px;
    }

    .example-slider {
        z-index: 2;
        -webkit-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
        -webkit-transition: -webkit-transform 1s;
        transition: -webkit-transform 1s;
        transition: transform 1s;
        transition: transform 1s, -webkit-transform 1s;
    }
    .credits-active .example-slider {
        -webkit-transform: translate3d(-400px, 0, 0) rotateY(10deg) scale(0.9);
                transform: translate3d(-400px, 0, 0) rotateY(10deg) scale(0.9);
    }
    /* .example-slider .fnc-slide-1 .fnc-slide__inner,
    .example-slider .fnc-slide-1 .fnc-slide__mask-inner {
        background-image: url("../image/Slider1_Quality_ITServices.jpg");
    }
    .example-slider .fnc-slide-2 .fnc-slide__inner,
    .example-slider .fnc-slide-2 .fnc-slide__mask-inner {
        background-image: url("../image/slider2.jpg");
    }
    .example-slider .fnc-slide-3 .fnc-slide__inner,
    .example-slider .fnc-slide-3 .fnc-slide__mask-inner {
        background-image: url("../image/slider3.jpg");
    } */
    /* .example-slider .fnc-slide-3 .fnc-slide__inner:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.1);
    } */

    .example-slider .fnc-slide__heading,
    .example-slider .fnc-slide__action-btn,
    .example-slider .fnc-nav__control {
        font-family: "Open Sans", Helvetica, Arial, sans-serif;
    }

    /* COLORFUL SWITCH STYLES
        ORIGINAL DEMO - http://codepen.io/suez/pen/WQjwOb */
    .colorful-switch {
        position: relative;
        width: 180px;
        height: 77.14286px;
        margin: 0 auto;
        border-radius: 32.14286px;
        background: #cfcfcf;
    }
    .colorful-switch:before {
        content: "";
        z-index: -1;
        position: absolute;
        left: -5px;
        top: -5px;
        width: 190px;
        height: 87.14286px;
        border-radius: 37.14286px;
        background: #314239;
        -webkit-transition: background-color 0.3s;
        transition: background-color 0.3s;
    }
    .colorful-switch:hover:before {
        background: #4C735F;
    }
    .colorful-switch__checkbox {
        z-index: -10;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
    }
    .colorful-switch__label {
        z-index: 1;
        overflow: hidden;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 32.14286px;
        cursor: pointer;
    }
    .colorful-switch__bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 540px;
        height: 100%;
        background: -webkit-linear-gradient(left, #14DCD6 0, #10E7BD 180px, #EF9C29 360px, #E76339 100%);
        background: linear-gradient(90deg, #14DCD6 0, #10E7BD 180px, #EF9C29 360px, #E76339 100%);
        -webkit-transition: -webkit-transform 1s;
        transition: -webkit-transform 1s;
        transition: transform 1s;
        transition: transform 1s, -webkit-transform 1s;
        -webkit-transform: translate3d(-360px, 0, 0);
                transform: translate3d(-360px, 0, 0);
    }
    .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__bg {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
    .colorful-switch__dot {
        position: absolute;
        left: 131.14286px;
        top: 50%;
        width: 5.14286px;
        height: 5.14286px;
        margin-left: -2.57143px;
        margin-top: -2.57143px;
        border-radius: 50%;
        background: #fff;
        -webkit-transition: -webkit-transform 1s;
        transition: -webkit-transform 1s;
        transition: transform 1s;
        transition: transform 1s, -webkit-transform 1s;
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
    .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__dot {
        -webkit-transform: translate3d(-80.35714px, 0, 0);
                transform: translate3d(-80.35714px, 0, 0);
    }
    .colorful-switch__on {
        position: absolute;
        left: 104.14286px;
        top: 22.5px;
        width: 19.28571px;
        height: 36px;
        -webkit-transition: transform 1s;
        transition: -webkit-transform 1s;
        transition: transform 1s;
        transition: transform 1s, -webkit-transform 1s;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -moz-transition: transform 1s;
        -ms-transition: transform 1s;
        -o-transition: transform 1s;
}
    .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__on {
        -webkit-transform: translate3d(-80.35714px, 0, 0);
                transform: translate3d(-80.35714px, 0, 0);
    }
    .colorful-switch__on__inner {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-transition: -webkit-transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28);
        transition: -webkit-transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28);
        transition: transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28);
        transition: transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28), -webkit-transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28);
        -webkit-transform-origin: 100% 50%;
                transform-origin: 100% 50%;
        -webkit-transform: rotate(45deg) scale(0) translateZ(0);
                transform: rotate(45deg) scale(0) translateZ(0);
    }
    .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__on__inner {
        -webkit-transition: -webkit-transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61);
        transition: -webkit-transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61);
        transition: transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61);
        transition: transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61), -webkit-transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61);
        -webkit-transform: rotate(45deg) scale(1) translateZ(0);
                transform: rotate(45deg) scale(1) translateZ(0);
    }
    .colorful-switch__on__inner:before, .colorful-switch__on__inner:after {
        content: "";
        position: absolute;
        border-radius: 2.57143px;
        background: #fff;
    }
    .colorful-switch__on__inner:before {
        left: 0;
        bottom: 0;
        width: 100%;
        height: 6.14286px;
    }
    .colorful-switch__on__inner:after {
        right: 0;
        top: 0;
        width: 6.14286px;
        height: 100%;
    }
    .colorful-switch__off {
        position: absolute;
        left: 131.14286px;
        top: 50%;
        width: 41.14286px;
        height: 41.14286px;
        margin-left: -20.57143px;
        margin-top: -20.57143px;
        -webkit-transition: -webkit-transform 1s;
        transition: -webkit-transform 1s;
        transition: transform 1s;
        transition: transform 1s, -webkit-transform 1s;
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
    .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off {
        -webkit-transform: translate3d(-80.35714px, 0, 0);
                transform: translate3d(-80.35714px, 0, 0);
    }
    .colorful-switch__off:before, .colorful-switch__off:after {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        height: 5.14286px;
        margin-top: -2.57143px;
        border-radius: 2.57143px;
        background: #fff;
        -webkit-transition: -webkit-transform 0.25s 0.25s;
        transition: -webkit-transform 0.25s 0.25s;
        transition: transform 0.25s 0.25s;
        transition: transform 0.25s 0.25s, -webkit-transform 0.25s 0.25s;
    }
    .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:before, .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:after {
        -webkit-transition-delay: 0s;
                transition-delay: 0s;
    }
    .colorful-switch__off:before {
        -webkit-transform: rotate(45deg) scaleX(1) translateZ(0);
                transform: rotate(45deg) scaleX(1) translateZ(0);
    }
    .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:before {
        -webkit-transform: rotate(45deg) scaleX(0) translateZ(0);
                transform: rotate(45deg) scaleX(0) translateZ(0);
    }
    .colorful-switch__off:after {
        -webkit-transition-timing-function: cubic-bezier(0.67, -0.16, 0.47, 1.61);
                transition-timing-function: cubic-bezier(0.67, -0.16, 0.47, 1.61);
        -webkit-transform: rotate(-45deg) scaleX(1) translateZ(0);
                transform: rotate(-45deg) scaleX(1) translateZ(0);
    }
    .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:after {
                -webkit-transition-timing-function: ease;
                transition-timing-function: ease;
                -webkit-transform: rotate(-45deg) scaleX(0) translateZ(0);
                transform: rotate(-45deg) scaleX(0) translateZ(0);
                -moz-transform: rotate(-45deg) scaleX(0) translateZ(0);
                -ms-transform: rotate(-45deg) scaleX(0) translateZ(0);
                -o-transform: rotate(-45deg) scaleX(0) translateZ(0);
}
    .btn1{
        position: relative;
        overflow: hidden;
        border-right: 1px solid var(--mblue-color);
    }
    .btn1::before{
        content: "";
        position: absolute;
        top:20%;
        left:42%;
        width: 2.75vw;
        height: 2.75vw;
        background-image: url("../image/practice.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        z-index: 2;
    }
    @media (max-width: 912px) {
        .btn1::before {
            content: "";
            position: absolute;
            top: 15%;
            left: 38%;
            width: 8vw;
            height: 8vw;
            background-image: url(../image/practice.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            z-index: 2;
        }
    }
    .fnc-nav__control.m--active-control.btn1::before {
        background-image: url("../image/practiceW.svg");

    }
    .btn2{
        position: relative;
        overflow: hidden;
        border-right: 1px solid var(--mblue-color);
    }
    .btn2::before{
        content: "";
        position: absolute;
        top:20%;
        left:42%;
        width: 2.75vw;
        height: 2.75vw;
        background-image: url("../image/bulb.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        z-index: 2;
    }

    @media (max-width: 912px) {
        .demo-cont {
            height: 177.07vw;

        }

        .btn2::before {
            content: "";
            position: absolute;
            top: 15%;
            left: 38%;
            width: 8vw;
            height: 8vw;
            background-image: url("../image/bulb.svg");
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            z-index: 2;
        }
    }
    .fnc-nav__control.m--active-control.btn2::before {
        background-image: url("../image/bulbW.svg");
    }
    .btn3{
        position: relative;
        overflow: hidden;
    }
    .btn3::before{
        content: "";
        position: absolute;
        top:20%;
        left:42%;
        width: 2.75vw;
        height: 2.75vw;
        background-image: url("../image/system.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        z-index: 2;
    }
    @media (max-width: 912px) {
        .btn3::before {
            content: "";
            position: absolute;
            top: 15%;
            left: 38%;
            width: 8vw;
            height: 8vw;
            background-image: url("../image/system.svg");
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            z-index: 2;
        }
    }

    .fnc-nav__control.m--active-control.btn3::before {
        background-image: url("../image/systemW.svg");
    }

/* end slide */

/* start mission */

.mission .inerContainerOne{
    width: 44.271vw;
    height: 23.6vw;
    padding: 6vw 2.6vw 5.68vw 11.72vw;
    background-color: var(--bggray-color);
}
.mission button a{
    color: var(--white-color);
}
.mission .inerContainerOne.white{
    width: 44.271vw;
    height: 23.6vw;
    padding: 5vw 2.6vw 5.68vw 11.72vw;
    background-color: var(--white-color);
}
.mission .inerContainerOne .text h6{
    padding: 0;
    margin: 0;
    font-family: var(--cairo-bold-font);
    font-size: 1.04vw;
    font-weight: normal;
    line-height: 0.3;
    text-align: left;
    color: var(--lighblue-color);
}
.mission .inerContainerOne .text h2{
    padding: 0;
    margin: 0;
    font-family: var(--cairo-bold-font);
    font-size: 2.4vw;
    font-weight: bold;
    line-height: 1.13;
    text-align: left;
    padding-top: 0.3vw;
    color:var(--darkblue-color);
}

.mission .inerContainerOne .text button{
    margin-top: 2.2vw;
}
.mission .inerContainerOne .text button:hover{
    background-color: var(--orange-color);
}
.mission .inerContainerTwo{
    background-color: var(--white-color);
    padding: 6vw 4.72vw 0vw 2.1vw    ;
}
.mission .inerContainerTwo.ptt{
    background-color: var(--white-color);
    padding: 5vw 4.72vw 0vw 2.1vw    ;
}

.mission .inerContainerTwo .text h6{
    font-family: var(--cairo-bold-font);
    font-size: 0.89vw;
    font-weight: bold;
    line-height: 1.41;
    text-align: left;
    color: var(--darkgray-color);
    padding: 0;
}
.mission .inerContainerTwo .text .txtP{
    font-family: var(--cairo-bold-font);
    font-size: 0.89vw;
    font-weight: 400;
    line-height: 1.41;
    text-align: left;
    color: var(--darkgray-color);
    margin-top: 1.5vw;
    padding: 0;
}
@media (max-width: 912px) {
    .mission .inerContainerOne {
        width: 100%;
        height: 100%;
        margin: 16vw auto 5.68vw auto;
        padding: 0;
        background-color: var(--white-color);
    }
    .mission .inerContainerOne .text h6{
        font-size: 4.8vw;
        text-align: center;
    }
    .mission .inerContainerOne .text h2{
        font-size: 9.87vw;
        text-align: center;
    }
    .mission .inerContainerTwo .text h6{
        font-size: 3.7vw;
        text-align: center;
    }
    .mission .inerContainerTwo {
        padding: 4.27vw 5.3vw 0vw 5.3vw;
    }
    .mission .inerContainerTwo .text .txtP{
        font-size: 3.7vw;
        text-align: center;
        margin-top: 4vw;
    }
    .mission .inerContainerOne .text button {
        margin-top: 2.2vw;
        position: absolute;
        left: 6vw;
        bottom: -213vw;
        z-index: 10;
        width: 89.3vw;
        height: 13.3vw;
        font-size: 4.8vw;
    }

    }
    @media (max-width: 920px){
        .mission .inerContainerOne .text button {
            bottom: -200vw;
        }
        }
    @media (max-width: 820px){
.mission .inerContainerOne .text button {
    bottom: -200vw;
}
}
    @media (max-width: 800px) {
        .mission .inerContainerOne .text button {
            bottom: -187vw;
        }
    }
    @media (max-width: 770px){
.mission .inerContainerOne .text button {
    bottom: -213vw;
}
    }
    @media (max-width: 712px){
.mission .inerContainerOne .text button {
    bottom: -187vw;
}
    }
    @media (max-width: 600px) {
        .mission .inerContainerOne .text button {
            bottom: -177vw;
        }
    }

    @media (max-width: 550px){
.mission .inerContainerOne .text button {
    bottom: -211vw;
}
}
    @media (max-width: 480px){
.mission .inerContainerOne .text button {
    bottom: -173vw;
}
}
    @media (max-width: 440px){
.mission .inerContainerOne .text button {
    bottom: -132vw;
}
}

@media (max-width: 412px){
.mission .inerContainerOne .text button {
    bottom: -183vw;
}
}

    @media (max-width: 400px) {
    .mission .inerContainerOne .text button {
        bottom: -178vw;
    }
}
@media (max-width: 394px){
.mission .inerContainerOne .text button {
    bottom: -145vw;
}
}
@media (max-width: 391px){
.mission .inerContainerOne .text button {
    bottom: -135vw;
}
}
@media (max-width: 384px){
.mission .inerContainerOne .text button {
    bottom: -180vw;
}
}
    @media (max-width: 380px) {
    .mission .inerContainerOne .text button {
        bottom: -172vw;
    }
}
@media (max-width: 361px){
.mission .inerContainerOne .text button {
    bottom: -168vw;
}
}
@media (max-width: 355px){
.mission .inerContainerOne .text button {
    bottom: -140vw;
}
}

@media (max-width: 340px){
.mission .inerContainerOne .text button {
    bottom: -198vw;
}
}
@media (max-width: 320px){
.mission .inerContainerOne .text button {
    bottom: -191vw;
}
}

@media (max-width: 290px)
{
.mission .inerContainerOne .text button {
    bottom: -119vw;
}
}
@media (max-width: 240px){
.mission .inerContainerOne .text button {
    bottom: -219vw;
}
}

.signatureDiv{
    display: flex;
    padding-top: 1vw;
    text-align: left;
}


.signatureDiv .signatureImg{
    width: 14.22vw;
    height: 3.39vw;
    margin: 0 0.4vw 5.73vw 0.17vw;
    object-fit: contain;
}
.signatureDiv .pathImg{
    width: 2.6vw;
    height: 0.16vw;
    margin-top: 1vw;
    object-fit: contain;
}
.signatureDiv .signatureName{
    padding-left: 0.5vw;
    font-family: var(--cairo-bold-font);
    font-size: 1.25vw;
    font-weight: bold;
    line-height: 1.8;
    color: var(--darkblue-color);
}
.signatureDiv .signaturePosition{
    padding-left: 0.5vw;
    font-family: var(--cairo-bold-font);
    font-size: 0.83vw;
    font-weight: 400;
    line-height: 0.5;
    text-align: left;
    color: var(-darkgray-color);
}
@media (max-width: 912px) {
    .signatureDiv {
        display: block;
        padding-top: 5vw;
        text-align: center;
    }
    .signatureDiv .signatureImg{
        width: 42.93vw;
        height: 10.13vw;
        margin: 0 0vw 0.73vw 0vw;
        object-fit: contain;
    }
    .signatureDiv .pathImg{
        display: none;
    }


.signatureDiv .signatureName {
    font-size: 4.8vw;
}
.signatureDiv .signaturePosition {
    padding-left: 0vw;
    font-size: 3.73vw;
    text-align: center;
    padding-bottom: 46vw;
}
    }
/* end mission */

/* start User Experience */
.userExperience{
    background-color:var(--darkblue-color) ;
    padding: 0 4.6vw 0 11.72vw;
    height: 37.81vw;
}
.userExperience .x{
    overflow: hidden;
    z-index: 1;
}
.userExperience img{
	width: 44vw;
	height: 37.81vw;
	margin: 0;
	object-fit: contain;
	-webkit-animation: kenburns-top 5s ease-out infinite alternate-reverse both;
	animation: kenburns-top 5s ease-out infinite alternate-reverse both;
	overflow: hidden;
}

.userExperience .innerContainer{
    position: relative;
    overflow: hidden;
    width: 32.5vw;
    z-index: 2;
}
.userExperience .innerContainer::before{
    content: "";
        position: absolute;
        top:0;
        left:0;
        background-image: url("../image/wline1.svg");
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 2;
        width: 19.69vw;
        height: 3.65vw;
        margin: 4.69vw 12.87vw 3.13vw 0;
}
.userExperience .innerContainer::after{
        content: "";
        position: absolute;
        bottom: 0;
        right:0 ;
        background-image: url("../image/wline2.svg");
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 2;
        width: 9.56vw;
        height: 3.65vw;
        margin: 0.52vw 2.61vw 4.5vw 0.7vw;
}

.userExperience .innerContainer .text h6{
    margin: 10.57vw 0 0vw 0;
    text-transform: uppercase;
    font-family: var(--cairo-bold-font);
    font-size: 1.04vw;
    font-weight: 400;
    line-height: 1;
    text-align: left;
    color: #cbd9ec;
}
.userExperience .innerContainer .text h2{
    margin: 0 2vw 1.04vw 0;
    font-family: var(--cairo-bold-font);
    font-size: 2.4vw;
    font-weight: bold;
    line-height: 1.17;
    text-align: left;
    color: #fff;
}
.userExperience .innerContainer .text h2 span{
    color: #cbd9ec;
}
.userExperience .innerContainer .text p{
    margin: 1.3vw 2vw 0 0;
    font-family: var(--cairo-bold-font);
    font-size: 0.89vw;
    font-weight: bold;
    line-height: 1.41;
    text-align: left;
    color: #cbd9ec;
}
.userExperience .innerContainer .text p span{
    font-weight: 400;
    display: block;
    margin-top: 1.5vw;
}



@media (max-width: 912px) {
    .userExperience{
        background-color:var(--darkblue-color) ;
        padding: 0 0vw 0 0vw;
        height: 205vw;
    }
    .userExperience img{
        width: 100%;
        height: 66vw;
        margin: 0;
        object-fit: cover;
        animation: none;
        -webkit-animation: none;

}
.userExperience .innerContainer {
    width: 100%;
}
.userExperience .innerContainer::before{
    content: "";
        position: absolute;
        top:0;
        left:0;
        background-image: url("../image/wline1.svg");
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 2;
        width: 58.67vw;
        height: 10.65vw;
        margin: 10.69vw 35.73vw 3.13vw 5vw;
}
.userExperience .innerContainer::after{
        content: "";
        position: absolute;
        bottom: 0;
        right:0 ;
        background-image: url("../image/wline2.svg");
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 2;
        width: 28.27vw;
        height: 11vw;
        margin: 0.52vw 4.61vw 0vw 0.7vw;
}
.userExperience .innerContainer .text h6{
    margin: 27vw auto 0vw auto;
    font-size: 4.8vw;
    text-align: center;
}
.userExperience .innerContainer .text h2{
    margin: 0 3.33vw 2vw 3.33vw;
    font-size: 9.87vw;
    text-align: center;
}
.userExperience .innerContainer .text p{
    margin: 1.3vw 3.5vw 13vw 3.5vw;
    font-size: 3.733vw;
    text-align: center;
}
.userExperience .innerContainer .text p span{
    display: block;
    margin-top: 3vw;
}
}

@media (max-width: 500px) {
    .userExperience{
        height: 215vw;
    }
}

/* end User Experience*/


/* start services*/
.services{
    text-align: center;
}
.services button a{
    color: var(--white-color);
}
.services h6{
    text-align: center;
    font-family: var(--cairo-bold-font);
    font-size: 1.04vw;
    font-weight: 400;
    line-height: 0.3;
    color: var(--lighblue-color);
    margin-top: 5.73vw;
    text-transform: uppercase;
}
.services h2{
    text-align: center;
    font-family: var(--cairo-bold-font);
    font-size: 2.4vw;
    font-weight: bold;
    line-height: 1.13;
    color: var(--darkblue-color);
}
.services p{
    text-align: center;
    font-family: var(--cairo-bold-font);
    font-size: 0.89vw;
    font-weight: 400;
    line-height: 1.41;
    color: var(--darkgray-colo);
    margin: 0.6vw 29.64vw 3.59vw 29.64vw;
}

@media (max-width: 912px) {
    .services h6{
        font-size: 4.8vw;
        margin-top: 19.47vw;
    }
    .services h2{
        font-size: 9.87vw;
        margin: 0vw 5.3vw 0vw 5.3vw;
    }
    .services p{
        font-size: 3.7vw;
        margin: 4vw 5.3vw 14.9vw 5.3vw;
    }
}
.services .row{
    margin:0 11.72vw 0vw 11.72vw ;
    padding: 0;
}
.services .row .col-xl-4{
    padding:0 1.56vw 1.67vw 0;
    margin: 0;

}





.services .row .service1{
    object-fit: contain ;
    background-image: url(../image/FinancialSolutions.png);
    background-color: var(--mblue-color);
    background-repeat: no-repeat;
    background-size: 9.17vw 8.96vw;
    background-position: center top 1.56vw;
    height: 15.2vw;
    margin: 0;
    background-blend-mode: luminosity;
    position: relative;
    z-index: 1;


}

.services .row .service2{
    background-image: url(../image/CRMSolutions.png);
    background-color: var(--mblue-color);
    background-repeat: no-repeat;
    background-size: 10.87vw 10.1vw;
    background-position: center top 1.56vw;
    height: 15.2vw;
    margin: 0;
    background-blend-mode: luminosity;
    position: relative;
    z-index: 1;


}
.services .row .service3{
    background-image: url(../image/PurchasingSolutions.png);
    background-color: var(--mblue-color);
    background-repeat: no-repeat;
    background-size: 10vw 8.96vw;
    background-position: center top 1.56vw;
    height: 15.2vw;
    margin: 0;
    background-blend-mode: luminosity;
    position: relative;
    z-index: 1;

}
.services .row .service4{
    background-image: url(../image/HumanResources.png);
    background-color: var(--mblue-color);
    background-repeat: no-repeat;
    background-size: 9.17vw 8.96vw;
    background-position: center top 1.56vw;
    height: 15.2vw;
    margin: 0;
    background-blend-mode: luminosity;
    position: relative;
    z-index: 1;

}
.services .row .service5{
    background-image: url(../image/ProjectsSolutions.png);
    background-color: var(--mblue-color);
    background-repeat: no-repeat;
    background-size: 9.17vw 8.96vw;
    background-position: center top 1.56vw;
    height: 15.2vw;
    margin: 0;
    background-blend-mode: luminosity;
    position: relative;
    z-index: 1;

}
.services .row .service6{
    background-image: url(../image/KPIsSolutions.png);
    background-color: var(--mblue-color);
    background-repeat: no-repeat;
    background-size: 9.17vw 8.96vw;
    background-position: center top 1.56vw;
    height: 15.2vw;
    margin: 0;
    background-blend-mode: luminosity;
    position: relative;
    z-index: 1;

}


.services .row .service1::before ,
.services .row .service2::before ,
.services .row .service3::before ,
.services .row .service4::before ,
.services .row .service5::before ,
.services .row .service6::before{
    content: "";
    position: absolute;
    left: 50%;
    top:50%;
    width: 0;
    height: 0;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    background-color: var(--darkblue-color);
    z-index: -1;
    transition: var(--main-transition);
    -webkit-transition: var(--main-transition);
    -moz-transition: var(--main-transition);
    -ms-transition: var(--main-transition);
    -o-transition: var(--main-transition);

}

.services .row .service1:hover::before ,
.services .row .service2:hover::before ,
.services .row .service3:hover::before ,
.services .row .service4:hover::before ,
.services .row .service5:hover::before ,
.services .row .service6:hover::before{
    width: 100%;
    height: 100%;
}

@media (max-width: 912px) {
    .services .row{
        margin:0 5.3vw 0vw 5.3vw ;
        padding: 0;
    }
    .services .row .col-xl-4{
        padding:0 0vw 4vw 0;
        margin: 0;

    }
    .services .row .service1{
        background-image: url(../image/FinancialSolutions.png);
        background-color: var(--mblue-color);
        background-repeat: no-repeat;
        background-size: 32.8vw 32.27vw;
        background-position: center top 5.56vw;
        height: 56.27vw;
        margin: 0;
        background-blend-mode: luminosity;
        cursor: pointer;
    }
    .services .row .service2{
        background-image: url(../image/CRMSolutions.png);
        background-color: var(--mblue-color);
        background-repeat: no-repeat;
        background-size: 32.8vw 32.27vw;
        background-position: center top 5.56vw;
        height: 56.27vw;
        margin: 0;
        background-blend-mode: luminosity;
        cursor: pointer;


    }
    .services .row .service3{
        background-image: url(../image/PurchasingSolutions.png);
        background-color: var(--mblue-color);
        background-repeat: no-repeat;
        background-size: 32.8vw 32.27vw;
        background-position: center top 5.56vw;
        height: 56.27vw;
        margin: 0;
        background-blend-mode: luminosity;
        cursor: pointer;

    }
    .services .row .service4{
        background-image: url(../image/HumanResources.png);
        background-color: var(--mblue-color);
        background-repeat: no-repeat;
        background-size: 32.8vw 32.27vw;
        background-position: center top 5.56vw;
        height: 56.27vw;
        margin: 0;
        background-blend-mode: luminosity;
        cursor: pointer;

    }
    .services .row .service5{
        background-image: url(../image/ProjectsSolutions.png);
        background-color: var(--mblue-color);
        background-repeat: no-repeat;
        background-size: 32.8vw 32.27vw;
        background-position: center top 5.56vw;
        height: 56.27vw;
        margin: 0;
        background-blend-mode: luminosity;
        cursor: pointer;

    }
    .services .row .service6{
        background-image: url(../image/KPIsSolutions.png);
        background-color: var(--mblue-color);
        background-repeat: no-repeat;
        background-size: 32.8vw 32.27vw;
        background-position: center top 5.56vw;
        height: 56.27vw;
        margin: 0;
        background-blend-mode: luminosity;
        cursor: pointer;

    }
}

.services .row h1{
    padding-top: 12vw;
    font-family: var(--cairo-bold-font);
    font-size: 1.46vw;
    font-weight: bold;
    line-height: 0.71;
    text-align: center;
    color: #fff;
    margin: 0;
}



.services .row span{
    display: none;
}
.services .row button{
    display: none;
}

.services .row .service1:hover h1,
.services .row .service2:hover h1,
.services .row .service3:hover h1,
.services .row .service4:hover h1,
.services .row .service5:hover h1,
.services .row .service6:hover h1{
    padding-top: 2.7vw;
}
.services .row .service1:hover span,
.services .row .service2:hover span,
.services .row .service3:hover span,
.services .row .service4:hover span,
.services .row .service5:hover span,
.services .row .service6:hover span{
    display: block;
    padding:1.3vw 1.56vw 2vw 1.56vw;
    font-family: var(--cairo-bold-font);
    font-size: 0.89vw;
    font-weight: 400;
    line-height: 1.29;
    text-align: center;
    color: #cbd9ec;
    height: 6.5vw;
}
.services .row .service1:hover button,
.services .row .service2:hover button,
.services .row .service3:hover button,
.services .row .service4:hover button,
.services .row .service5:hover button,
.services .row .service6:hover button{
    display: block;
    margin: auto auto;
}
.services .row button:hover{
    background-color: var(--orange-color);
}
@media (max-width: 912px) {
    .services .row h1{
        padding-top: 43vw;
        font-size: 6.4vw;
    }
    .services .row .service1:hover span,
.services .row .service2:hover span,
.services .row .service3:hover span,
.services .row .service4:hover span,
.services .row .service5:hover span,
.services .row .service6:hover span{
    display: block;
    padding:5vw 5.3vw 5vw 5.3vw;
    font-family: var(--cairo-bold-font);
    font-size: 3.37vw;
    font-weight: 400;
    line-height: 1.29;
    text-align: center;
    color: #cbd9ec;
    height: 24vw;
}
.services .row .service1:hover h1,
.services .row .service2:hover h1,
.services .row .service3:hover h1,
.services .row .service4:hover h1,
.services .row .service5:hover h1,
.services .row .service6:hover h1{
    padding-top: 10vw;
}
}

/* end services*/

/* start app*/
.app{
    background-image: url(../image/BusinessGrowth.jpg);
    background-size:cover ;
    width: 100%;
    height: 30vw;
    margin-top: 7vw;
}
@media (max-width: 912px) {
    .app{
        height: 235vw;
        margin-top: 20vw;
    }
}
.app h6{
    font-family: var(--cairo-bold-font);
    font-size: 1.35vw;
    font-weight: 400;
    line-height: 1.23;
    text-align: left;
    color: var(--white-color);
    padding-top: 4.2vw
    ;

}
.app h2{
    font-family: var(--cairo-bold-font);
    font-size: 2.4vw;
    font-weight: bold;
    line-height: 1.09;
    text-align: left;
    color: var(--white-color);
    width: 31vw;
    padding-bottom: 2.08vw;

}
.app h2 span{
    color: var(--gray-color);

}
.app p{
    font-family:  var(--cairo-bold-font);
    font-size: 0.89vw;
    font-weight: 400;
    line-height: 1.41;
    text-align: left;
    color: var(--gray-color);
    width: 37.5vw;
    padding-bottom: 2.6vw;

}
.app img{
    width: 34.85vw;
    height: 35.26vw;
    margin-top: -2.5vw;
}
.app button:hover{
    background-color: var(--orange-color);
}
.app button a{
    color: var(--white-color);
}

@media (max-width: 912px) {
    .app h6{
        font-size: 5.3vw;
        text-align: center;
        padding-top: 10vw
        ;

    }
    .app h2{
        font-size: 9.87vw;
        text-align: center;
        width: 100%;
        padding-bottom: 5vw;

    }
    .app p{
        font-size: 3.7vw;
        text-align: center;
        width: 100%;
        padding-bottom: 6vw;

    }
    .app img{
        width: 89.3vw;
        height: 89.87vw;
        margin-top: 7vw;
    }
   .container_app {
    padding-left: 5.3vw;
    padding-right: 5.3vw;
    padding-top: 2vw;
    padding-bottom: 2vw;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}
   .container{
    padding-left: 5.3vw !important;
    padding-right: 5.3vw !important;
    padding-top: 2vw !important;
    padding-bottom: 2vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

.app button{
        width: 89.3vw;
        height: 13.3vw;
        font-size: 4.8vw;
}
}
/* end app*/

/* start contact*/
.contact{
    margin: 6.77vw 11.72vw 7.03vw 11.72vw;
}
@media (max-width: 912px) {
    .contact{
        margin: 16vw 5.3vw 7.03vw 5.3vw;
    }
}
.contact h6{
    font-family: var(--cairo-bold-font);
    font-size: 1.04vw;
    font-weight: 400;
    line-height: 0.3;
    text-align: left;
    color: var(--lighblue-color);
}
.contact h2{
    font-family: var(--cairo-bold-font);
    font-size: 2.4vw;
    font-weight: bold;
    line-height: 1.09;
    text-align: left;
    color: var(--darkblue-color);

}
.contact p{
    font-family: var(--cairo-bold-font);
    font-size: 0.94vw;
    font-weight: bold;
    line-height: 1.33;
    text-align: left;
    color: var(--darkgray-color);
    padding-top: 1.8vw;

}
.contact p span{
    font-weight: 400;
    display: block;
    padding-bottom: 2.08vw;

}
@media (max-width: 912px) {
    .contact h6{
        font-size: 4.8vw;
        text-align: center;
        line-height: 0.8;
    }
    .contact h2{
        font-size: 9.87vw;
        text-align: center;
        padding-bottom:5vw ;

    }
    .contact p{
        font-size: 3.73vw;
        padding-top: 5vw;

    }
    .contact p span{
        display: block;
        padding-bottom: 5vw;

    }
}
.bp-input{

    margin-bottom: 1.5vw;
}
#contact_form input[type=text]{
    width: 21.3vw;
    height: 3.13vw;
    border: solid 1px var(--wgray-color);
    padding: 0.7vw 0.78vw 0.9vw 0.9vw;
    font-family: var(--cairo-bold-font);
    font-size: 0.83vw;
    font-weight: 400;
}
#contact_form input[type=text]:focus{
    outline: solid 1px #678aa1 !important;

}
input[type=text]::placeholder {
    padding: 0.7vw 0vw 0.9vw 0vw;
    font-family: var(--cairo-bold-font);
    font-size: 0.83vw;
    font-weight: 400;
    text-align: left;
    color: var(--dmgray-color);
    margin: 0;
    }
input[type=text]::-webkit-input-placeholder {
    padding: 0.7vw 0vw 0.9vw 0vw;
    font-family: var(--cairo-bold-font);
    font-size: 0.83vw;
    font-weight: 400;
    text-align: left;
    color: var(--dmgray-color);
    }
input[type=text]::-moz-placeholder {
    padding: 0.7vw 0vw 0.9vw 0vw;
    font-family: var(--cairo-bold-font);
    font-size: 0.83vw;
    font-weight: 400;
    text-align: left;
    color: var(--dmgray-color);
    }
input[type=text]:-ms-input-placeholder {
    padding: 0.7vw 0vw 0.9vw 0vw;
    font-family: var(--cairo-bold-font);
    font-size: 0.83vw;
    font-weight: 400;
    text-align: left;
    color: var(--dmgray-color);
    }
input[type=text]:-moz-placeholder {
    padding: 0.5vw 0vw 1.3vw 0vw;
    font-family: var(--cairo-bold-font);
    font-size: 0.83vw;
    font-weight: 400;
    text-align: left;
    color: var(--dmgray-color);
}

@media (max-width: 912px) {
    #contact_form input[type=text]{
        width: 89.3vw;
        height: 13.3vw;
        margin-bottom: 4vw;
        font-size: 3.7vw;
        border: solid 1px var(--wgray-color);
    }
    input[type=text]::placeholder {
        padding: 0.7vw 0vw 0.86vw 0.8vw;
        font-family: var(--cairo-bold-font);
        font-weight: 400;
        text-align: left;
        color: var(--dmgray-color);
        margin: 0;
        font-size: 3.7vw;
        }
    input::-webkit-input-placeholder {
        padding: 0.7vw 0vw 0.86vw 0.8vw;
        font-family: var(--cairo-bold-font);
        font-size: 3.7vw;
        font-weight: 400;
        text-align: left;
        color: var(--dmgray-color);
        }
    input::-moz-placeholder {
        padding: 0.7vw 0vw 0.86vw 0.8vw;
        font-family: var(--cairo-bold-font);
        font-size: 3.7vw;
        font-weight: 400;
        text-align: left;
        color: var(--dmgray-color);
        }
    input:-ms-input-placeholder {
        padding: 0.7vw 0vw 0.86vw 0.8vw;
        font-family: var(--cairo-bold-font);
        font-size: 3.7vw;
        font-weight: 400;
        text-align: left;
        color: var(--dmgray-color);
        }
    input:-moz-placeholder {
        padding: 0.7vw 0vw 0.86vw 0.8vw;
        font-family: var(--cairo-bold-font);
        font-size: 3.7vw;
        font-weight: 400;
        text-align: left;
        color: var(--dmgray-color);
    }
}
#contact_form textarea{
    width: 34.48vw;
    height: 8.39vw;
    margin: 0;
    border: solid 1px var(--wgray-color);
    padding: 0.7vw 0.78vw 0.9vw 0.9vw;
    font-family: var(--cairo-bold-font);
    font-size: 0.83vw;
    font-weight: 400;
}
#contact_form textarea::placeholder{
    padding: 0vw 0vw 0vw 0vw;
    font-family: var(--cairo-bold-font);
    font-size: 0.83vw;
    line-height: 0;
    font-weight: 400;
    text-align: left;
    color: var(--dmgray-color);
}
#contact_form textarea:focus{
    outline: solid 1px #678aa1 !important;

}
#contact_form textarea::-webkit-input-placeholder {
    padding: 0.7vw 0vw 0vw 0vw;
    font-family: var(--cairo-bold-font);
    font-size: 0.83vw;
    font-weight: 400;
    text-align: left;
    color: var(--dmgray-color);
    }
    #contact_form textarea::-moz-placeholder {
        padding: 0.7vw 0vw 0vw 0vw;
        font-family: var(--cairo-bold-font);
        font-size: 0.83vw;
        font-weight: 400;
        text-align: left;
        color: var(--dmgray-color);
    }
    #contact_form textarea:-ms-input-placeholder {
        padding: 0.7vw 0vw 0vw 0vw;
        font-family: var(--cairo-bold-font);
        font-size: 0.83vw;
        font-weight: 400;
        text-align: left;
        color: var(--dmgray-color);
    }
    #contact_form textarea:-moz-placeholder {
        padding: 0.7vw 0vw 0vw 0vw;
        font-family: var(--cairo-bold-font);
        font-size: 0.83vw;
        font-weight: 400;
        text-align: left;
        color: var(--dmgray-color);
}
#contact_form input[type=submit]{
    width: 8.13vw;
    height: 8.39vw;
    background-color: var(--lightorange-color);
    font-family: var(--cairo-bold-font);
    font-size: 1.04vw;
    font-weight: bold;
    line-height: 1.15;
    text-align: center;
    color:var(--white-color);
    border: none;
    outline: none;
    box-shadow: none;
    margin-left: 2vw;
}
#contact_form input[type=submit]:hover{
    background-color: var(--orange-color);
}
@media (max-width: 912px) {
    #contact_form textarea{
        padding: 3vw 0vw 0vw 1vw;
        width: 89.3vw;
        height: 42.93vw;
        margin: 0;
        border: solid 1px var(--wgray-color);
    }
    #contact_form textarea::placeholder{
        padding: 1vw 0vw 0vw 0.78vw;
        font-family: var(--cairo-bold-font);
        font-size: 3.7vw;
        font-weight: 400;
        text-align: left;
        color: var(--dmgray-color);
    }
    #contact_form textarea::-webkit-input-placeholder {
        padding: 1vw 0vw 0vw 0.78vw;
        font-family: var(--cairo-bold-font);
        font-size: 3.7vw;
        font-weight: 400;
        text-align: left;
        color: var(--dmgray-color);
        }
        #contact_form textarea::-moz-placeholder {
            padding: 1vw 0vw 0vw 0.78vw;
            font-family: var(--cairo-bold-font);
            font-size: 3.7vw;
            font-weight: 400;
            text-align: left;
            color: var(--dmgray-color);
        }
        #contact_form textarea:-ms-input-placeholder {
            padding: 1vw 0vw 0vw 0.78vw;
            font-family: var(--cairo-bold-font);
            font-size: 3.7vw;
            font-weight: 400;
            text-align: left;
            color: var(--dmgray-color);
        }
        #contact_form textarea:-moz-placeholder {
            padding: 1vw 0vw 0vw 0.78vw;
            font-family: var(--cairo-bold-font);
            font-size:3.7vw;
            font-weight: 400;
            text-align: left;
            color: var(--dmgray-color);
    }
    #contact_form input[type=submit]{
        text-align: center;
        border: none;
        outline: none;
        box-shadow: none;
        margin-left: 0vw;
        margin-top: 5.3vw;
            width: 89.3vw;
    height: 13.3vw;
    font-size: 4.8vw;
    }

    #contact_form textarea::placeholder{
        padding: 1vw 0vw 0vw 0.78vw;
        font-family: var(--cairo-bold-font);
        line-height: 0;
        font-weight: 400;
        text-align: left;
        color: var(--dmgray-color);
    }

}
iframe{
    width: 26.04vw;
    height:31.77vw;
    float: right;
}
.mobile-iframe{
    display: none;
}
@media (max-width: 912px) {
    .lg-iframe iframe{
    display: none;
}
.mobile-iframe{
    display: block;
}
.mobile-iframe iframe{
    width: 89.33vw;
    height:68.53vw ;
    float: center;
    margin-top: 5vw;
    margin-bottom: 5vw;
}
}
/* end contact*/


/* start footer*/
.footer{
    background-image: url(../image/footer.jpg);
    background-size:  100vw 38.18vw;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0;
    padding: 9.4vw 11.72vw 1.4vw 11.72vw;
    background-color: var(--darkblue-color);
}

.footer h1{
    font-family: var(--cairo-bold-font);
    font-size: 3.13vw;
    font-weight: bold;
    line-height: 1.83;
    text-align: center;
    color: var(--white-color);
    margin: auto auto;
    text-transform: uppercase;
}

.footer img.logo{
    width: 11.51vw;
    height: 3.96vw;
    margin: 3.64vw 0 4.12vw 0;
}
.footer .logoText{
    margin: 3.64vw 0 77px 0;
    font-family: var(--cairo-bold-font);
    font-size: 0.89vw;
    font-weight: 400;
    line-height: 1.41;
    text-align: left;
    color: var(--wblue-color);
}
.footer h3{
    font-family: var(--cairo-bold-font);
    font-size: 1.15vw;
    font-weight: bold;
    line-height: 1;
    text-align: left;
    color: var(--white-color);
    text-transform: uppercase;
}
@media (max-width: 912px) {
    .footer{
        background-size:  100vw 100vw;
        padding: 9.4vw 5.3vw 1.04vw 5.3vw;
    }
    .footer h1{
        font-size: 9.87vw;
        margin:9vw 5.3vw 13vw 5.3vw;
        line-height: 1.08;
    }
    .footer img.logo{
        width: 41.3vw;
        height: 14.13vw;
        margin: 0 24vw 4.12vw 24vw;
    }
    .footer .logoText{
        margin: 3.64vw 0 77px 0;
        font-size: 3.7vw;
        text-align: center;
    }
    .footer h3{
        font-size: 4vw;
        text-align: left;
        padding-top: 7vw;
        padding-bottom: 3vw;
    }
    .footer form{
        z-index: 19;
        margin-bottom: 5vw;
    }
}
.footer ul{
    padding-top: 1.1vw;
    padding-bottom: 2.34vw;
}
.footer ul li a{
    font-family: Cairo;
    font-size: 0.89vw;
    font-weight: 400;
    line-height: 2.59;
    text-align: left;
    color: var(--gray-color);
    transition: var(--main-transition);
    -webkit-transition: var(--main-transition);
    -moz-transition: var(--main-transition);
    -ms-transition: var(--main-transition);
    -o-transition: var(--main-transition);
    position: relative;
    overflow: hidden;
    padding-left: 1.5vw;
}

.footer ul li .facebook,
.footer ul li .twitter,
.footer ul li .linkedIn,
.footer ul li .instagram {
    padding-left: 2vw;
}
.footer ul li a:hover{
        color: var(--lightorange-color);
        padding-left: 2vw;
}
.footer ul li .facebook:hover,
.footer ul li .twitter:hover,
.footer ul li .linkedIn:hover,
.footer ul li .instagram:hover{
        padding-left: 2.5vw;
}
.footer .box .links li:hover a{
    color: var(--white-color);
}
.footer ul li a::before {
    content: "";
    position: absolute;
    background-image: url(../image/orangeReg.svg);
    top:0.35vw;
    left:0;
    width: 0.94vw;
    height: 0.99vw;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 2;
}
@media (max-width: 912px) {
    .footer ul li a{
        font-size: 3.7vw;
        padding-left: 4vw;
    }
    .footer ul li a::before {
        content: "";
        position: absolute;
        background-image: url(../image/orangeReg.svg);
        top: 2.25vw;
        left: 0;
        width: 2.94vw;
        height: 2.99vw;
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 2;
    }
    .footer ul li .facebook:hover,
.footer ul li .twitter:hover,
.footer ul li .linkedIn:hover,
.footer ul li .instagram:hover{
        padding-left: 5vw;
}
.footer ul li a:hover{
    padding-left: 5vw;
}
.footer ul li .facebook,
.footer ul li .twitter,
.footer ul li .linkedIn,
.footer ul li .instagram {
    padding-left: 5vw;
}
}
.footer ul li .facebook::before {
    content: "";
    position: absolute;
    background-image: url(../image/facebook.svg);
    top:0.2vw;
    left:0;
    width: 1.2vw;
    height: 1.2vw;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 2;
}
.footer ul li .twitter::before {
    content: "";
    position: absolute;
    background-image: url(../image/twitter.svg);
    top:0.2vw;
    left:0;
    width: 1.2vw;
    height: 1.2vw;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 2;
}
.footer ul li .linkedIn::before {
    content: "";
    position: absolute;
    background-image: url(../image/in.svg);
    top:0.2vw;
    left:0;
    width: 1.2vw;
    height: 1.2vw;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 2;
}
.footer ul li .instagram::before {
    content: "";
    position: absolute;
    background-image: url(../image/instagram.svg);
    top:0.2vw;
    left:0;
    width: 1.2vw;
    height: 1.2vw;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 2;
}
@media (max-width: 912px) {
    .footer ul li .facebook::before {
        content: "";
        position: absolute;
        background-image: url(../image/facebook.svg);
        top:2.25vw;
        left:0;
        width: 3vw;
        height: 3vw;
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 2;
    }
    .footer ul li .twitter::before {
        content: "";
        position: absolute;
        background-image: url(../image/twitter.svg);
        top:2.25vw;
        left:0;
        width: 3vw;
        height: 3vw;
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 2;
    }
    .footer ul li .linkedIn::before {
        content: "";
        position: absolute;
        background-image: url(../image/in.svg);
        top:2.25vw;
        left:0;
        width: 3vw;
        height: 3vw;
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 2;
    }
    .footer ul li .instagram::before {
        content: "";
        position: absolute;
        background-image: url(../image/instagram.svg);
        top:2.25vw;
        left:0;
        width: 3vw;
        height: 3vw;
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 2;
    }
}
.footer p{
    font-family: var(--cairo-bold-font);
    font-size: 0.89vw;
    font-weight: 400;
    line-height: 1.41;
    text-align: left;
    color: var(--gray-color);

}
.footer p span{
    font-weight: bold;
}
.footer p a{
    font-weight: bold;
    font-family: Cairo;
    font-size: 0.89vw;
    font-weight: bold;
    text-align: left;
    color: var(--gray-color);
    text-decoration:underline;
}

.footer p a:hover{
    color: var(--lightorange-color);
}
.pl{
    padding-left: 2.5vw;
    padding-bottom: 0.8vw;
}
.footer h6{
    border-top:1px solid var(--mblue-color);
    padding-top: 1.04vw;
    margin: auto auto;
    font-family: var(--cairo-bold-font);
    font-size: 0.885vw;
    font-weight: bold;
    text-align: center;
    color: var(--white-color);
}
@media (max-width: 912px) {
    .footer p a{
        font-size: 3.7vw;
    }
    .footer p {
        font-size: 3.7vw;
    }
    .footer h6 {
        font-size: 3.7vw;
        padding-top: 4vw;
        padding-bottom: 4vw;
        border-top: 2px solid var(--mblue-color);
    }
}
.footer h6 span{
    font-weight: 400;
}
.sub{
    display: flex;
}
.sub p{
    width: 13.02vw;
    height: 2.92vw;
    margin-right: 1.2vw;
}
.sub input[type=text]{
    width: 16.2vw;
    height: 2.6vw;
    padding: 0.7vw 0.78vw 0.68vw 0.78vw;
    background-color:var(--white-color);
    border: none;
    outline: none;
    box-shadow: none;
    margin-right: -0.3vw;
    font-family: var(--cairo-bold-font);
    font-size: 0.73vw;
    font-weight: 400;
    text-align: left;
    color: var(--darkgray-color);
}


.sub input[type=text]::placeholder{
    font-family: var(--cairo-bold-font);
    font-size: 0.73vw;
    font-weight: 400;
    text-align: left;
    color: #c1c0c0;
    padding: 0.57vw 0vw 0.68vw 0vw;
    border: none;
    outline: none;
    box-shadow: none;

}
.sub input[type=text]::-moz-placeholder{
    font-family: var(--cairo-bold-font);
    font-size: 0.73vw;
    font-weight: 400;
    text-align: left;
    color: #c1c0c0;
    padding: 0.57vw 0vw 0.68vw 0vw;
    border: none;
    outline: none;
    box-shadow: none;
}
.sub input[type=text]::-moz-progress-bar{
    font-family: var(--cairo-bold-font);
    font-size: 0.73vw;
    font-weight: 400;
    text-align: left;
    color: #c1c0c0;
    padding: 0.57vw 0vw 0.68vw 0vw;
    border: none;
    outline: none;
    box-shadow: none;
}
.sub input[type=submit]{
    width: 6.2vw;
    height: 2.6vw;
    padding: 0.37vw 1.09vw 0.52vw 1.09vw;
    background-color: var(--lightorange-color);
    font-family: var(--cairo-bold-font);
    font-size: 0.94vw;
    font-weight: bold;
    text-align: left;
    color: var(--white-color);
    border: none;
    outline: none;
    box-shadow: none;

}
.sub input[type=submit]:hover{
    width: 6.2vw;
    height: 2.6vw;
    padding: 0.37vw 1.09vw 0.52vw 1.09vw;
    background-color: var(--orange-color);
    font-family: var(--cairo-bold-font);
    font-size: 0.94vw;
    font-weight: bold;
    text-align: left;
    color: var(--white-color);
    border: none;
    outline: none;
    box-shadow: none;

}
@media (max-width: 912px) {
    .sub{
        display: block;
    }
    .sub p{
        width: 100%;

        margin-right: 0vw;
    }
    .sub input[type=text] {
        width: 67vw;
        height: 13.3vw;
        padding: 0.6vw 0.78vw 0.5vw 0.78vw;
        background-color: var(--white-color);
        border: none;
        outline: none;
        box-shadow: none;
        margin-right: -0.6vw;
        font-size: 3.7vw;
        margin-top: 10vw;

    }
    .sub input[type=text]::placeholder{
        font-family: var(--cairo-bold-font);
        font-size: 3.73vw;
        font-weight: 400;
        text-align: left;
        color: #c1c0c0;
        padding: 0.57vw 0.78vw 0.68vw 0.78vw;
        border: none;
        outline: none;
        box-shadow: none;

    }
    .sub input[type=text]::-moz-placeholder{
        font-family: var(--cairo-bold-font);
        font-size: 3.73vw;
        font-weight: 400;
        text-align: left;
        color: #c1c0c0;
        padding: 0.57vw 0.78vw 0.68vw 0.78vw;
        border: none;
        outline: none;
        box-shadow: none;
    }
    .sub input[type=text]::-moz-progress-bar{
        font-family: var(--cairo-bold-font);
        font-size: 3.73vw;
        font-weight: 400;
        text-align: left;
        color: #c1c0c0;
        padding: 0.57vw 0.78vw 0.68vw 0.78vw;
        border: none;
        outline: none;
        box-shadow: none;
    }
    .sub input[type=submit] {
        margin: 0;
        width: 21.8vw;
        height: 13.3vw;
        padding: 0.37vw 2.5vw 0.52vw 2.5vw;
        background-color: var(--lightorange-color);
        font-family: var(--cairo-bold-font);
        font-size: 4vw;
        font-weight: bold;
        text-align: left;
        color: var(--white-color);
        border: none;
        outline: none;
        box-shadow: none;
    }
    .sub input[type=submit]:hover{
        width: 6.2vw;
        height: 2.6vw;
        padding: 0.37vw 1.09vw 0.52vw 1.09vw;
        background-color: var(--orange-color);
        font-family: var(--cairo-bold-font);
        font-size: 4vw;
        font-weight: bold;
        text-align: left;
        color: var(--white-color);
        border: none;
        outline: none;
        box-shadow: none;

    }
}
@media (max-width: 400px) {
    .sub input[type=text] {
        width: 67vw;
        height: 13.3vw;
        padding: 0vw 0.78vw 1vw 0.78vw;
        background-color: var(--white-color);
        border: none;
        outline: none;
        box-shadow: none;
        margin-right: -1vw;
    }
}
@media (max-width: 390px) {
    .sub input[type=text] {
        width: 67vw;
        height: 13.3vw;
        padding: 0.8vw 0.78vw 1vw 0.78vw;
        background-color: var(--white-color);
        border: none;
        outline: none;
        box-shadow: none;
        margin-right: -1vw;
    }
}
@media (max-width: 384px) {
    .sub input[type=text] {
        width: 67vw;
        height: 13.3vw;
        padding: 1vw 0.78vw 1vw 0.78vw;
        background-color: var(--white-color);
        border: none;
        outline: none;
        box-shadow: none;
        margin-right: -1vw;
    }
}
/* end footer*/
.whatsapp{
    position: relative;
    right: 0;
    bottom: 0;

}
.cta {
    position: fixed;
    right: 0;
    bottom: 1vw;
    z-index: 100;
    transition: all 1s;
    opacity:0;
}
.cta img{
    width: 10.83vw;
    height: 3.13vw;
}
.hide {
    opacity:0;
    right:-100%;
}
.show {
    opacity:1;
    right:0;
}

@media (max-width: 920px) {
    .cta {
        right: 0vw;
    }
    .cta img {
        width: 28.83vw;
        height: 24.13vw;
    }
    }

/**
 * ----------------------------------------
 * animation
 * ----------------------------------------
 */
@-webkit-keyframes rotate-scale-up {
    0% {
    -webkit-transform: scale(1) rotateZ(0);
            transform: scale(1) rotateZ(0);
    }
    50% {
    -webkit-transform: scale(1.2) rotateZ(180deg);
            transform: scale(1.2) rotateZ(180deg);
    }
    100% {
    -webkit-transform: scale(1) rotateZ(360deg);
            transform: scale(1) rotateZ(360deg);
    }
}
@keyframes rotate-scale-up {
    0% {
    -webkit-transform: scale(1) rotateZ(0);
            transform: scale(1) rotateZ(0);
    }
    50% {
    -webkit-transform: scale(1.2) rotateZ(180deg);
            transform: scale(1.2) rotateZ(180deg);
    }
    100% {
    -webkit-transform: scale(1) rotateZ(360deg);
            transform: scale(1) rotateZ(360deg);
    }
}
@-webkit-keyframes kenburns-top {
    0% {
        -webkit-transform: scale(1.1) ;
        transform: scale(1.1) ;
        -moz-transform: scale(1.1) ;
        -ms-transform: scale(1.1) ;
        -o-transform: scale(1.1) ;
}
    100% {
                -webkit-transform: scale(1.2) ;
                transform: scale(1.2) ;
                -moz-transform: scale(1.2) ;
                -ms-transform: scale(1.2) ;
                -o-transform: scale(1.2) ;
}
    }
    @keyframes kenburns-top {
    0% {
        -webkit-transform: scale(1.1) ;
        transform: scale(1.1) ;
        -moz-transform: scale(1.1) ;
        -ms-transform: scale(1.1) ;
        -o-transform: scale(1.1) ;
}
    100% {
        -webkit-transform: scale(1.2) ;
        transform: scale(1.2) ;
        -moz-transform: scale(1.2) ;
        -ms-transform: scale(1.2) ;
        -o-transform: scale(1.2) ;
}
    }
    .swiper{
        z-index: 100;
        margin-top: -6vw;
    }
    @media (max-width: 920px) {
        .swiper{
            display: none;
        }
    }
    .swiper-slide {
        display: flex;
        height: 100vh;
        transition: 1s all;
    }
    .swiper-pagination {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /* button style */
    .swiper-pagination-bullet {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto;
        height: auto;
        margin: 0 0px;
        background-color: transparent;
        border-radius: 50%;
        cursor: pointer;
        transition: 0.3s;
    }
    .swiper-pagination-bullet span {
        color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* button circle */
    .progress {
        transform: rotate(-90deg);
    }
    .circle-origin {
        fill: transparent;
        stroke: var(--lighblue-color);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-dasharray: 125.664px;
        stroke-dashoffset: 125.664px;

    }
    .swiper-pagination-bullet-active .circle-origin {
        animation: progress 10s;
        -webkit-animation: progress 10s;
}

    @keyframes progress {
        0% {
            stroke-dashoffset: 125.664px;
        }

        90% {
            stroke-dashoffset: 0;
        }

        100% {
            stroke-dashoffset: -125.664px;
        }
    }
    .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
        bottom: 0vw !important;
        left: -35% !important;
        width: 100%;
        height: 3vw;
        padding-top: 0.22vw;
    }
    .progress {
        background-color:transparent;
        height: 2vw;
    margin-left: -0.55vw;
    margin-top: -0.867vw;
    }


    .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 var(--swiper-pagination-bullet-horizontal-gap,16px) !important;
    }
    .padding-lang{
        padding-top: 0.5vw;
    }
    @media (max-width: 1024px) {
        .padding-lang {
            margin-top: 0vw;
            padding-top: 0vw;
        }
    }
    @media (max-width: 370px) {
        .padding-lang {
            padding-top: 0vw;
        }
    }


    /* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
    /* @@@@@@@@@@@@@@@@@@@@@ start about us page  @@@@@@@@@@@@@@@@@@@@@ */
    /* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */


    /* start footer */

    .footer_about{
        margin-left: 0;
        margin-left: 0;
        margin-bottom: 0;
        background-image: url("../image/about_footer.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 100%;
        height: 18.23vw;
        padding: 6.5vw 58.59vw 6.25vw 11.72vw;
        margin-top: -0.1vw;
    }
    .footer_about h1{
    margin: 0 0 2.3vw 0px;
    font-family: var(--cairo-bold-font);
    font-size: 3.44vw;
    font-weight: bold;
    line-height: 0.52;
    text-align: left;
    color: var(--darkblue-color);
    }
    .footer_about ul{
        display: flex;
    }
    .footer_about ul img{
        width: 0.85vw;
        height: 0.68vw;
        margin: 0.3vw 0.3vw 0.39vw 0;
    }
    .footer_about ul li {
        margin: 0 0.4vw 0 0vw;
        font-family: var(--cairo-bold-font);
        font-size: 0.83vw;
        font-weight: normal;
        text-align: left;
        color: var(--darkgray-color);

    }
    .footer_about ul li:last-child {
        font-weight: bold;
        color: var(--lighblue-color);
    }
    .footer_about ul li a{
        color: var(--darkgray-color);

    }
    .footer_about ul li:last-child a{
        color: var(--lighblue-color);
    }
    @media (max-width: 920px) {
        .footer_about{
            height: 34vw;
            padding: 11vw 0vw 6.25vw 5.3vw;
            background-size: cover;
        }
        .footer_about h1{
            margin: 0 0 1.56vw 0px;
            font-family: var(--cairo-bold-font);
            font-size: 9vw;
            font-weight: bold;
            line-height: 0.52;
            text-align: left;
            color: var(--darkblue-color);
            }
            .footer_about ul{
                display: flex;
            }
            .footer_about ul img {
                width: 3vw;
                height: 2.68vw;
                margin: 0vw 0.6vw 0.55vw 0;
            }
            .footer_about ul li {
                margin: 1.4vw 2.4vw 0 0vw;
                font-family: var(--cairo-bold-font);
                font-size: 3.7vw;
                font-weight: normal;
                text-align: left;
                color: var(--darkgray-color);

            }

    }
    /* end footer */

    /* start about_company */

    /* end about_company */
    .about_company img{
        width: 37.5vw;
        height: 24.48vw;
        margin: 4.167vw 0.89vw 7.29vw 3.13vw;
    }
    .about_company h6{
        margin: 4.35vw 1.25vw 0vw 11.72vw;
        font-family: var(--cairo-bold-font);
        font-size: 1.04vw;
        font-weight: 400;
        line-height: 1;
        text-align: left;
        color: #5e8ba3;
    }
    .about_company h2{
    margin: 0vw 3.13vw 0.469vw 11.72vw;
    font-family: var(--cairo-bold-font);
    font-size: 2.4vw;
    font-weight: bold;
    line-height: 1;
    text-align: left;
    color: #1a264c;
    }
    .about_company h2 span{
        color: var(--lighblue-color);
    }
    .about_company p{
    margin: 1.47vw 1.13vw 0.83vw 11.72vw;
    font-family: var(--cairo-bold-font);
    font-size: 0.89vw;
    font-weight: 400;
    line-height: 1.41;
    text-align: left;
    color: var(--darkgray-color);
    }
    .image_block{
        display: block;
    }
    .image_mob_block{
        display: none;
    }
    @media (max-width: 920px) {
        .image_block{
            display: none;
            }
        .image_mob_block{
            display: block;
            }

            .about_company img{
                width: 91vw;
                height: 59.48vw;
                margin: 4.167vw 5.33vw 7.29vw 5.33vw;
            }
            .about_company h6{
                margin: 16vw 5.33vw 0vw 5.33vw;
                font-size:4.8vw;
                text-align: center;
            }
            .about_company h2{
            margin: 0vw 5.33vw 0.469vw 5.33vw;
            font-size: 9.87vw;
            text-align: center;
            }
            .about_company p{
            margin: 1.47vw 5.33vw 0.83vw 5.33vw;
            font-family: var(--cairo-bold-font);
            font-size: 3.73vw;
            text-align: center;
            }
    }
    /* end about us page */

    /* start img_scrol */
    .img_scrol {
        /* The image used */
        background-image: url("../image/cssBg.png");
        /* Set a specific height */
        min-height:21vw;
        margin: 0vw 8.3vw 0vw 11.72vw;
        padding: 0;
        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size:contain;
        position: relative;
    }

    .img_scrol svg {

        width: 80vw;
        height: 24vw;
        object-fit: contain;
        margin-top: -2.5vw;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }
    @media (max-width: 920px) {
        .img_scrol svg {
            width: 89.6vw;
            height: 27.6vw;
            object-fit: contain;
            margin-top: -3.1vw;
            margin-left: 0;
            margin-right: 0;
            padding: 0;
        }
        .img_scrol {
            /* The image used */
            background-image: url("../image/cssBg.png");
            /* Set a specific height */
            min-height:24vw;
            margin: 10vw 5.33vw 0vw 5.33vw;
            padding: 0;
            /* Create the parallax scrolling effect */
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size:contain;
            position: relative;
        }
        .img_scrol img{padding-top: 6vw;}
    }

    /* end img_scrol */


    @media (max-width: 920px) {
    .mission .inerContainerOne.white {
        width: 100%;
    height: 100%;
    margin: 16vw auto 5.68vw auto;
    padding: 0;
        background-color: var(--white-color);
    }
}



    /* end custom_softwer */
    .custom_softwer{
        background-color:var(--blue-color) ;
        width: 100%;
        height: 29.17vw;
        padding: 0 11.72vw;
    }
    .custom_softwer img{
        width: 31vw;
        height: 29.17vw;
        margin: 0 3.65vw 0 0;
    }
    .custom_softwer h6{
        margin: 7.5vw 17.24vw 0vw 8vw;
        font-family: var(--cairo-bold-font);
        font-size: 1.04vw;
        font-weight: 400;
        line-height: 1;
        text-align: left;
        color: var(--gray-color);
    }
    .custom_softwer h2{
        margin: 0vw 0 1vw 8vw;
        font-family: var(--cairo-bold-font);
        font-size: 2.4vw;
        font-weight: bold;
        line-height: 1.13;
        text-align: left;
        color: var(--white-color);
    }
    .custom_softwer h2 span{
        color: var(--gray-color);
    }
    .custom_softwer p{
        margin: 1.5vw 0 6.93vw 8vw;
        font-family: var(--cairo-bold-font);
        font-size: 0.89vw;
        font-weight: 400;
        line-height: 1.41;
        text-align: left;
        color: var(--gray-color);
    }

    @media (max-width: 920px) {
        .custom_softwer {
            background-color: var(--blue-color);
            width: 100%;
            height: 230vw;
            padding: 0 5.33vw;
        }
        .custom_softwer img{
            width: 100%;
            height: 72.17vw;
            margin: 7vw 0 7vw 0;
        }
        .custom_softwer h6{
            margin: 20vw 0vw 0vw 0vw;
            font-size: 4.8vw;
            text-align: center;
        }
        .custom_softwer h2{
            margin: 0vw 0vw 1vw 0vw;
            font-size: 9.87vw;
            text-align: center;
        }
        .custom_softwer h2 span{
            color: var(--gray-color);
        }
        .custom_softwer p{
            margin: 1.5vw 0vw 6.93vw 0vw;
            font-size: 3.73vw;
            text-align: center;
        }
    }

    /* end custom_softwer */
    /* start choos_css */
    .choos_css {
        padding: 5.1vw 11.72vw 5.05vw 11.72vw ;
        background-color: var(--bggray-color);
    }
    .choos_css img{
        width: 34.69vw;
        height: 35.67vw;
        margin: 0 0 0 4.38vw;
    }

    .choos_css h6{
        margin: 1vw 1.25vw 0vw 0vw;
        font-family: var(--cairo-bold-font);
        font-size: 1.04vw;
        font-weight: 400;
        line-height: 1;
        text-align: left;
        color: var(--lighblue-color);
    }
    .choos_css h2{
        margin: 0vw 3.13vw 0.469vw 0vw;
        font-family: var(--cairo-bold-font);
        font-size: 2.4vw;
        font-weight: bold;
        line-height: 1;
        text-align: left;
        color: var(--darkblue-color);
    }
    .choos_css h2 span{
        color: var(--lighblue-color);
    }
    .choos_css p{
        margin: 1.47vw 1.13vw 0.83vw 0vw;
        font-family: var(--cairo-bold-font);
        font-size: 0.89vw;
        font-weight: 400;
        line-height: 1.41;
        text-align: left;
        color: var(--darkgray-color);
    }
    .choos_css .d-blue{
        width: 11.46vw;
        height: 15.63vw;
        margin: 3.3vw 0.75vw 1.19vw 0.75vw;
        padding: 0;
        background-color: var(--darkblue-color);

    }
    .choos_css .d-blue img.Idea {
        width: 3.44vw;
        height: 3.85vw;
        margin: 2.08vw 4.05vw 1.77vw 4.05vw;
        opacity: 0.7;
    }
    .choos_css .m-blue{
        width: 11.46vw;
        height: 15.63vw;
        margin: 3.3vw 0.75vw 1.19vw 0.75vw;
        padding:0vw;
        background-color: var(--mblue-color)
    }
    .choos_css .m-blue img.rating {
        width: 3.8vw;
        height: 3.8vw;
        margin: 2.08vw 3.83vw 1.77vw 3.83vw;
        opacity: 0.7;
    }
    .choos_css .l-blue{
        width: 11.46vw;
        height: 15.63vw;
        margin: 3.3vw 0vw 1.19vw 0.75vw;
        padding: 0vw;
        background-color: var(--lighblue-color);

    }
    .choos_css .l-blue img.technical-support {
        width: 3.8vw;
        height: 3.8vw;
        margin: 2.08vw 3.83vw 1.77vw 3.83vw;
        opacity: 0.7;
    }
    .choos_css h5 {
        margin: .77vw 0 0.52vw;
        font-family: var(--cairo-bold-font);
        font-size: 1.04vw;
        font-weight: bold;
        line-height: 0.5;
        text-align: center;
        color: var(--white-color);
    }
    .choos_css .d-blue p ,
    .choos_css .m-blue p ,
    .choos_css .l-blue p {
        margin:1.208vw 1vw  1.88vw 1vw;
        font-family: var(--cairo-bold-font);
        font-size: 0.89vw;
        font-weight: 400;
        line-height: 1.29;
        text-align: center;
        color: var(--white-color);
    }



    @media (max-width: 920px) {
        .choos_css {
            padding: 18vw 5.33vw 5.05vw 5.33vw ;
        }
        .choos_css img {
            width: 69.69vw;
            height: 70.67vw;
            margin: 9vw 9.38vw 9vw 9.38vw;
        }

        .choos_css h6{
            margin: 1vw 0 0vw 0vw;
            font-size: 4.8vw;
            text-align: center;
        }
        .choos_css h2{
            margin: 0vw 0vw 0.469vw 0vw;
            font-size: 9.87vw;
            text-align: center;
        }
        .choos_css p{
            margin: 1.47vw 1.13vw 0.83vw 0vw;
            font-size: 3.73vw;
            text-align: center;
        }
        .choos_css .d-blue{
            width: 28vw;
            height: 60vw;
            margin: 3.3vw 1.4vw 1.19vw 1.4vw;

        }
        .choos_css .d-blue img.Idea {
            width: 8.44vw;
            height: 8.85vw;
            margin: 7vw 9.5vw 5.77vw 9.5vw
        }
        .choos_css .m-blue{
            width: 28vw;
            height: 60vw;
            margin: 3.3vw 1.4vw 1.19vw 1.4vw;
        }
        .choos_css .m-blue img.rating {
            width: 8.8vw;
            height: 8.8vw;
            margin: 7vw 9.5vw 5.77vw 9.5vw
        }
        .choos_css .l-blue{
            width: 28vw;
            height: 60vw;
            margin: 3.3vw 0vw 1.19vw 1.4vw;

        }
        .choos_css .l-blue img.technical-support {
            width: 8.8vw;
            height: 8.8vw;
            margin: 7vw 9.5vw 5.77vw 9.5vw
        }
        .choos_css h5 {
            margin: 4.77vw 0 3.52vw;
            font-size: 3.7vw;
            text-align: center;
        }
        .choos_css .d-blue p ,
        .choos_css .m-blue p ,
        .choos_css .l-blue p {
            margin:1.208vw 1vw  1.88vw 1vw;
            font-size: 3.2vw;
            text-align: center;
        }
    }
    /* end choos_css */






    /* start client_testimonial */
    .client_testimonial{
        margin: 6.25vw 11.72vw 13.021vw 11.72vw;
    }
    .client_testimonial h6{
        margin: 6.25vw 1.25vw 0vw 0vw;
        font-family: var(--cairo-bold-font);
        font-size: 1.04vw;
        font-weight: 400;
        line-height: 1;
        text-align: center;
        color: var(--lighblue-color);
    }
    .client_testimonial h2{
        margin: 0vw 3.13vw 2.604vw 0vw;
        font-family: var(--cairo-bold-font);
        font-size: 2.4vw;
        font-weight: bold;
        line-height: 1;
        text-align: center;
        color: var(--darkblue-color);
    }

    @media (max-width: 920px) {
        .client_testimonial{
            margin: 18vw 5.33vw 28.021vw 5.33vw;
        }
        .client_testimonial h6{
            margin: 6.25vw 0vw 0vw 0vw;
            font-size: 4.8vw;
        }
        .client_testimonial h2{
            margin: 0vw 0vw 11.604vw 0vw;
    font-size: 9vw;
        }
    }
    .owl-carousel .owl-nav button.owl-next  {
        color: inherit;
        border: none;
        font: inherit;
        background-color: var(--mblue-color) !important;
        margin: 0 0vw 0 0;
        padding: 1.146vw 1.146vw 1.146vw 1.146vw;
        width: 3.13vw;
        height: 3.13vw;


    }
    .owl-carousel .owl-nav button.owl-prev  {
        color: inherit;
        background-color: #cbd9ec !important;
        border: none;
        margin: 0 0.78vw 0 0;
        padding: 1.146vw 1.146vw 1.146vw 1.146vw;
        width: 3.13vw;
        height: 3.13vw;
    }
    .owl-theme .owl-dots{display: none;}
    .owl-theme .owl-nav [class*=owl-] {
        color: #FFF;
        font-size: 3vw !important;
        margin: 0.5vw !important;
        padding: 0px 0px !important;
        background: #D6D6D6;
        display: inline-block;
        cursor: pointer;
        border-radius: 0 !important;
    }
    .owl-carousel .owl-nav button.owl-prev,.owl-carousel .owl-nav button.owl-next{
        background: 0 0;
        border: none;
        padding: 0!important;
        font: message-box !important;
        line-height: 0 !important;
        color: var(--white-color) !important;
        font-size: 1.4vw !important;
        line-height: 0.9vw !important;
    }
    .owl-theme .owl-nav [class*=owl-]:hover, .owl-theme .owl-nav [class*=owl-]:focus ,.owl-theme .owl-nav [class*=owl-]:checked {
        background: #869791;
        color: #FFF;
        text-decoration: none; border: none !important;border-radius: 0 !important;outline: none !important; box-shadow: none !important;
    }
    .owl-theme .owl-nav {
        margin-top: 0 !important;
        right: 45% !important; margin: auto auto !important;
        bottom:-6.5vw !important;
    }
    .owl-theme .owl-dots, .owl-theme .owl-nav {
        text-align: right !important;
        -webkit-tap-highlight-color: transparent; position: absolute;
    }
    .owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled {
        display: block;
    }

    #owl-carousel .item{
        background-color: var(--white-color) !important;
        text-align: left !important;
        border:1px solid #cdd9ea !important;
        width: 99.3% !important;
        height: 25.05vw !important;
        padding: 1.56vw 1.56vw 2.08vw !important;
        position: relative;
    }
    #owl-carousel .item::after{
        content: "";
        position: absolute;
        top: 0vw;
        right:0vw ;
        background-image: url("../image/coma.svg");
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 2;
        width: 5.21vw;
        height: 4.17vw;
        margin: 9.46vw 1.56vw 0vw 0vw;
    }
    #owl-carousel .item img.log1 {
        width: 14.06vw;
        height: 5.31vw;
        margin: 0 3.65vw 3.65vw;
        }
    #owl-carousel .item img.log2 {
        width: 14.065vw;
        height: 5.31vw;
        margin: 0 3.59vw 3.65vw 3.65vw;
        }
    #owl-carousel .item img.log3 {
        width: 12.5vw;
        height: 5.31vw;
        margin: 0 4.43vw 3.65vw;
        }
    #owl-carousel .item h4 {
        margin: 0 0 0 0;
        font-family: var(--cairo-bold-font);
        font-size: 1.25vw;
        font-weight: bold;
        text-align: left;
        color: var(--blue-color);
            }
    #owl-carousel .item h6 {
        margin: 0.5vw 0 1.56vw 0;
        font-family: var(--cairo-bold-font);
        font-size: 0.89vw;
        font-weight: 500;
        text-align: left;
        color:var(--lighblue-color);
        text-transform: uppercase;
            }
    #owl-carousel .item p {
        margin: 0 0vw 0 0;
        -webkit-text-stroke: 1px rgba(0, 0, 0, 0);
        font-family: var(--cairo-bold-font);
        font-size: 0.89vw;
        font-weight: 400;
        line-height: 1.41;
        text-align: left;
        color:var(--darkgray-color);
            }



    .owl-theme .owl-nav [class*=owl-]:hover ,.owl-theme .owl-nav [class*=owl-]:focus{
        background:var(--mblue-color) !important;
        color: #FFF;
        text-decoration: none;
    }

    .owl-carousel .owl-nav button.owl-prev:hover,.owl-carousel .owl-nav button.owl-prev:focus{
        background: 0 0;
        color: #fff !important;}
        /* end choos_css */

        @media (max-width: 920px) {
            .owl-carousel .owl-nav button.owl-next  {
                padding: 1.146vw 1.146vw 1.146vw 1.146vw;
                width: 8.13vw;
                height: 8.13vw;


            }
            .owl-carousel .owl-nav button.owl-prev  {
                padding: 1.146vw 1.146vw 1.146vw 1.146vw;
                width: 8.13vw;
                height: 8.13vw;
            }
            .owl-theme .owl-dots{display: none;}
            .owl-theme .owl-nav [class*=owl-] {
                font-size: 3vw !important;
                margin: 0.5vw !important;
            }
            .owl-carousel .owl-nav button.owl-prev,.owl-carousel .owl-nav button.owl-next{
                font-size: 4.4vw !important;
                line-height: 0vw !important;
                padding: 2.5vw 1.146vw 2.8vw 1.146vw !important;
            }
            .owl-theme .owl-nav {
                margin-top: 0 !important;
                right: 40% !important;
                margin: auto auto !important;
                bottom: 2.5vw !important;
            }

            #owl-carousel .item{
                width: 99.3% !important;
                height: 90.05vw !important;
                padding: 1.56vw 5.56vw 2.08vw !important;
            }
            #owl-carousel .item::after{
                display: none;
                content: "";
                position: absolute;
                top: 0vw;
                right:0vw ;
                background-image: url("../image/coma.svg");
                background-repeat: no-repeat;
                background-size: contain;
                z-index: 2;
                width: 15.21vw;
                height: 14.17vw;
                margin: 73.46vw 7.56vw 0vw 0vw;
            }
            #owl-carousel .item img.log1 {
                width: 45vw;
                height: 15vw;
                margin: 8vw auto 5.65vw auto;
                }
            #owl-carousel .item img.log2 {
                width: 45vw;
                height: 15vw;
                margin: 8vw auto 5.65vw auto;
                }
            #owl-carousel .item img.log3 {
                width: 40vw;
                height: 15vw;
                margin: 8vw auto 5.43vw auto;
                }
            #owl-carousel .item h4 {
                font-size: 8vw;
                text-align: center;
                    }
            #owl-carousel .item h6 {
                margin: 0.5vw 0 1.56vw 0;
                font-size: 4.8vw;
                text-align: center;
                    }
            #owl-carousel .item p {
                font-size: 3.3vw;
                text-align: center;
                    }

        }
        .swiper .swiper-wrapper {
            position: relative;
            width: 100%;
            height: 8% !important;
            z-index: 1;
            display: flex;
            transition-property: transform;
            box-sizing: content-box;
        }

        .error_message{
            font-family: var(--cairo-bold-font);
            border: 1px solid red !important;
        }
        .error_message_text{
            font-family: var(--cairo-bold-font);
            color:red;
            font-size: 0.75vw;
            padding-top: 0;
        }


        @-webkit-keyframes outerRotate1 {
                    0% {
                    transform: translate(-50%, -50%) rotate(0);
                    }
                    100% {
                    transform: translate(-50%, -50%) rotate(360deg);
                    }
                }
                @-moz-keyframes outerRotate1 {
                    0% {
                    transform: translate(-50%, -50%) rotate(0);
                    }
                    100% {
                    transform: translate(-50%, -50%) rotate(360deg);
                    }
                }
                @-o-keyframes outerRotate1 {
                    0% {
                    transform: translate(-50%, -50%) rotate(0);
                    }
                    100% {
                    transform: translate(-50%, -50%) rotate(360deg);
                    }
                }
                @keyframes outerRotate1 {
                    0% {
                    transform: translate(-50%, -50%) rotate(0);
                    }
                    100% {
                    transform: translate(-50%, -50%) rotate(360deg);
                    }
                }
                @-webkit-keyframes outerRotate2 {
                    0% {
                    transform: translate(-50%, -50%) rotate(0);
                    }
                    100% {
                    transform: translate(-50%, -50%) rotate(-360deg);
                    }
                }
                @-moz-keyframes outerRotate2 {
                    0% {
                    transform: translate(-50%, -50%) rotate(0);
                    }
                    100% {
                    transform: translate(-50%, -50%) rotate(-360deg);
                    }
                }
                @-o-keyframes outerRotate2 {
                    0% {
                    transform: translate(-50%, -50%) rotate(0);
                    }
                    100% {
                    transform: translate(-50%, -50%) rotate(-360deg);
                    }
                }
                @keyframes outerRotate2 {
                    0% {
                    transform: translate(-50%, -50%) rotate(0);
                    }
                    100% {
                    transform: translate(-50%, -50%) rotate(-360deg);
                    }
                }
                @-webkit-keyframes textColour {
                    0% {
                    color: #fff;
                    }
                    100% {
                    color: #3BB2D0;
                    }
                }
                @-moz-keyframes textColour {
                    0% {
                    color: #fff;
                    }
                    100% {
                    color: #3BB2D0;
                    }
                }
                @-o-keyframes textColour {
                    0% {
                    color: #fff;
                    }
                    100% {
                    color: #3BB2D0;
                    }
                }
                @keyframes textColour {
                    0% {
                    color: #fff;
                    }
                    100% {
                    color: #3BB2D0;
                    }
                }
                .e-loadholder {
                    position: absolute;
                    top: 75%;
                    left: 51.2%;
                    -webkit-transform: translate(-51%, -50%);
                    -moz-transform: translate(-51%, -50%);
                    -ms-transform: translate(-51%, -50%);
                    -o-transform: translate(-51%, -50%);
                    transform: translate(-51%, -50%);
                    width: 100vw;
                    height: 100vh;
                    border: 5px solid #1B5F70;
                    border-radius: 120px;
                    box-sizing: border-box;
                }
                .e-loadholder:after {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    -webkit-transform: translate(-51%, -50%);
                    -moz-transform: translate(-51%, -50%);
                    -ms-transform: translate(-51%, -50%);
                    -o-transform: translate(-51%, -50%);
                    transform: translate(-51%, -50%);
                    content: " ";
                    display: block;
                    background: #1a264c;
                    transform-origin: center;
                    z-index: 0;
                }
                .e-loadholder:after {
                    width: 160vw;
                    height: 300%;
                    -webkit-animation: outerRotate2 30s infinite linear;
                    -moz-animation: outerRotate2 30s infinite linear;
                    -o-animation: outerRotate2 30s infinite linear;
                    animation: outerRotate2 30s infinite linear;
                }
                .e-loadholder .m-loader {
                    font-size: 8px;
                    font-size: 0.8rem;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    -webkit-transform: translate(-51%, -50%);
                    -moz-transform: translate(-51%, -50%);
                    -ms-transform: translate(-51%, -50%);
                    -o-transform: translate(-51%, -50%);
                    transform: translate(-51%, -50%);
                    width: 100px;
                    height: 100px;
                    color: #888;
                    text-align: center;
                    border: 5px solid #3d4d75;
                    border-radius: 50%;
                    box-sizing: border-box;
                    z-index: 20;
                    text-transform: uppercase;
                    -webkit-border-radius: 50%;
                    -moz-border-radius: 50%;
                    -ms-border-radius: 50%;
                    -o-border-radius: 50%;
        }
                .e-loadholder .m-loader:after {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    -webkit-transform: translate(-51%, -50%);
                    -moz-transform: translate(-51%, -50%);
                    -ms-transform: translate(-51%, -50%);
                    -o-transform: translate(-51%, -50%);
                    transform: translate(-51%, -50%);
                    content: " ";
                    display: block;
                    background: #1a264c;
                    transform-origin: center;
                    z-index: -1;
                }
                .e-loadholder .m-loader:after {
                    width: 40px;
                    height: 120%;
                    -webkit-animation: outerRotate1 15s infinite linear;
                    -moz-animation: outerRotate1 15s infinite linear;
                    -o-animation: outerRotate1 15s infinite linear;
                    animation: outerRotate1 15s infinite linear;
                }
                .e-loadholder .m-loader .e-text {
                    font-size: 8px;
                    font-size: 0.8rem;
                    line-height: 100px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    -webkit-transform: translate(-51%, -50%);
                    -moz-transform: translate(-51%, -50%);
                    -ms-transform: translate(-51%, -50%);
                    -o-transform: translate(-51%, -50%);
                    transform: translate(-51%, -50%);
                    -webkit-animation: textColour 1s alternate linear infinite;
                    -moz-animation: textColour 1s alternate linear infinite;
                    -o-animation: textColour 1s alternate linear infinite;
                    animation: textColour 1s alternate linear infinite;
                    display: block;
                    width: 50px;
                    height: 50px;
                    text-align: center;
                    border: 5px solid #5e8ba3;
                    border-radius: 50%;
                    box-sizing: border-box;
                    z-index: 20;
                    -webkit-border-radius: 50%;
                    -moz-border-radius: 50%;
                    -ms-border-radius: 50%;
                    -o-border-radius: 50%;
        }
                .e-loadholder .m-loader .e-text:before, .e-loadholder .m-loader .e-text:after {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    -webkit-transform: translate(-51%, -50%);
                    -moz-transform: translate(-51%, -50%);
                    -ms-transform: translate(-51%, -50%);
                    -o-transform: translate(-51%, -50%);
                    transform: translate(-51%, -50%);
                    content: " ";
                    display: block;
                    background: #1a264c;
                    transform-origin: center;
                    z-index: -1;
                }
                .e-loadholder .m-loader .e-text:before {
                    width: 130%;
                    height: 20px;
                    -webkit-animation: outerRotate2 3.5s infinite linear;
                    -moz-animation: outerRotate2 3.5s infinite linear;
                    -o-animation: outerRotate2 3.5s infinite linear;
                    animation: outerRotate2 3.5s infinite linear;
                }
                .e-loadholder .m-loader .e-text:after {
                    width: 20px;
                    height: 130%;
                    -webkit-animation: outerRotate1 8s infinite linear;
                    -moz-animation: outerRotate1 8s infinite linear;
                    -o-animation: outerRotate1 8s infinite linear;
                    animation: outerRotate1 8s infinite linear;
                }

                    /* start preloader */
        #pre-loader {z-index: 9999999999;
        position: fixed;
        top: 0;
        left: 0;
        background-color: var(--mblue-color);
        width: 100%;
        height: 100%;
        }
        .preloader .loader {
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 10vw;
        bottom: 0;
        }

        .loadingGraphics {
        display: inline-block;
        width: 350px;
        position: fixed;
        top: 40%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%)  ;
        transform: translate(-50%, -50%)  ;
        -moz-transform: translate(-50%, -50%)  ;
        -ms-transform: translate(-50%, -50%)  ;
        -o-transform: translate(-50%, -50%)  ;
        }
        .loadingText {
        text-transform: uppercase;
        text-align: center;
        margin-top: 20vw;
        -webkit-animation: scale-in-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940)  both;
        animation: scale-in-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940)  both;

        }
        .loadingText img{
            width: 20.83vw;
            height:8.33vw;
            padding: 0;
            margin: 0;
        }
        @media (max-width: 920px) {
            .loadingText img{
                width: 41.46vw;
                height:16.66vw;
                padding: 0;
                margin: 0;
            }
            .loadingText {
                text-transform: uppercase;
                text-align: center;
                margin-top: 50%;
                -webkit-animation: scale-in-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940)  both;
                animation: scale-in-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940)  both;

                }
                .e-loadholder {
                    top: 60%;}
                    .e-loadholder {

                        width: 120vw;
                        height: 120vh;
                    }
                    .e-loadholder:after {
                        width: 200vw;
                        height: 400%;
                    }
        }

        @-webkit-keyframes scale-in-center {
            0% {
            -webkit-transform: scale(0);
                    transform: scale(0);
            opacity: 1;
            }
            100% {
            -webkit-transform: scale(1);
                    transform: scale(1);
            opacity: 1;
            }
        }
        @keyframes scale-in-center {
            0% {
            -webkit-transform: scale(0);
                    transform: scale(0);
            opacity: 1;
            }
            100% {
            -webkit-transform: scale(1);
                    transform: scale(1);
            opacity: 1;
            }
        }
.error-text{
    font-size:0.8vw;
    padding-top: 0;
    margin-top: 0.53vw;
}

    /* end preloader */
    .success-message{
        display:none;
        border: 1px solid #6fb32b;
        width: 100.5%;
        height: 3.5vw;
        color: #6fb32b;
        font-family: var(--cairo-bold-font);
        font-size: 1.3vw;
        position: relative;
        margin-bottom: 2vw;
        text-align: center;
        padding-top: 0.5vw;
        padding-left: 2vw;
    }
    .success-message:before{
        content: "";
        position: absolute;
        background-image: url(../image/green-checkmark.svg);
        top: 0.75vw;
        left: 32%;
        width: 1.7vw;
        height: 1.7vw;
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 2;
    }



        /* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
        /* @@@@@@@@@@@@@@@@@@@@@ start contact us page  @@@@@@@@@@@@@@@@@@@@@ */
        /* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */


    /* start footer */

    .footer_contact{
        margin-left: 0;
        margin-left: 0;
        margin-bottom: 0;
        background-image: url("../image/contact_us_bg.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 100%;
        height: 18.23vw;
        padding: 6.5vw 58.59vw 6.25vw 11.72vw;
        margin-top: -0.1vw;
    }
    .footer_contact h1{
    margin: 0 0 2.3vw 0px;
    font-family: var(--cairo-bold-font);
    font-size: 3.44vw;
    font-weight: bold;
    line-height: 0.52;
    text-align: left;
    color: var(--darkblue-color);
    }
    .footer_contact ul{
        display: flex;
    }
    .footer_contact ul img{
        width: 0.85vw;
        height: 0.68vw;
        margin: 0.3vw 0.3vw 0.39vw 0;
    }
    .footer_contact ul li {
        margin: 0 0.4vw 0 0vw;
        font-family: var(--cairo-bold-font);
        font-size: 0.83vw;
        font-weight: normal;
        text-align: left;
        color: var(--darkgray-color);

    }
    .footer_contact ul li:last-child {
        font-weight: bold;
        color: var(--lighblue-color);
    }
    .footer_contact ul li a{
        color: var(--darkgray-color);

    }
    .footer_contact ul li:last-child a{
        color: var(--lighblue-color);
    }
    @media (max-width: 920px) {
        .footer_contact{
            height: 34vw;
            padding: 11vw 0vw 6.25vw 5.3vw;
            background-size: cover;
        }
        .footer_contact h1{
            margin: 0 0 1.56vw 0px;
            font-family: var(--cairo-bold-font);
            font-size: 9vw;
            font-weight: bold;
            line-height: 0.52;
            text-align: left;
            color: var(--darkblue-color);
            }
            .footer_contact ul{
                display: flex;
            }
            .footer_contact ul img {
                width: 3vw;
                height: 2.68vw;
                margin: 0vw 0.6vw 0.55vw 0;
            }
            .footer_contact ul li {
                margin: 1.4vw 2.4vw 0 0vw;
                font-family: var(--cairo-bold-font);
                font-size: 3.7vw;
                font-weight: normal;
                text-align: left;
                color: var(--darkgray-color);

            }

    }
    /* end footer */


    /* start footer */

    .header_service{
        margin-left: 0;
        margin-left: 0;
        margin-bottom: 0;
        background-image: url("../image/ourservices.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 100%;
        height: 18.23vw;
        padding: 6.5vw 58.59vw 6.25vw 11.72vw;
        margin-top: -0.1vw;
    }
    .header_service h1{
    margin: 0 0 2.3vw 0px;
    font-family: var(--cairo-bold-font);
    font-size: 3.44vw;
    font-weight: bold;
    line-height: 0.52;
    text-align: left;
    color: var(--darkblue-color);
    }
    .header_service ul{
        display: flex;
    }
    .header_service ul img{
        width: 0.85vw;
        height: 0.68vw;
        margin: 0.3vw 0.3vw 0.39vw 0;
    }
    .header_service ul li {
        margin: 0 0.4vw 0 0vw;
        font-family: var(--cairo-bold-font);
        font-size: 0.83vw;
        font-weight: normal;
        text-align: left;
        color: var(--darkgray-color);

    }
    .header_service ul li:last-child {
        font-weight: bold;
        color: var(--lighblue-color);
    }
    .header_service ul li a{
        color: var(--darkgray-color);

    }
    .header_service ul li:last-child a{
        color: var(--lighblue-color);
    }
    @media (max-width: 920px) {
        .header_service{
            height: 34vw;
            padding: 11vw 0vw 6.25vw 5.3vw;
            background-size: cover;
        }
        .header_service h1{
            margin: 0 0 1.56vw 0px;
            font-family: var(--cairo-bold-font);
            font-size: 9vw;
            font-weight: bold;
            line-height: 0.52;
            text-align: left;
            color: var(--darkblue-color);
            }
            .header_service ul{
                display: flex;
            }
            .header_service ul img {
                width: 3vw;
                height: 2.68vw;
                margin: 0vw 0.6vw 0.55vw 0;
            }
            .header_service  ul li {
                margin: 1.4vw 2.4vw 0 0vw;
                font-family: var(--cairo-bold-font);
                font-size: 3.7vw;
                font-weight: normal;
                text-align: left;
                color: var(--darkgray-color);

            }

    }
    /* end footer */




    /* start contact*/
.contact_contact{
    margin: 3.75vw 11.72vw 7.03vw 11.72vw;
}
@media (max-width: 912px) {
    .contact{
        margin: 16vw 5.3vw 7.03vw 5.3vw;
    }
}
.contact_contact h6{
    font-family: var(--cairo-bold-font);
    font-size: 1.04vw;
    font-weight: 400;
    line-height: 0.3;
    text-align: left;
    color: var(--lighblue-color);
    text-transform: uppercase;
}
.contact_contact h2{
    font-family: var(--cairo-bold-font);
    font-size: 2.4vw;
    font-weight: bold;
    line-height: 1.09;
    text-align: left;
    color: var(--darkblue-color);

}
.contact_contact h4{
    font-family: var(--cairo-bold-font);
    font-size: 2.4vw;
    font-weight: bold;
    line-height: 1.09;
    text-align: left;
    color: var(--lighblue-color);
    margin: 1.5vw 0 0vw 0;


}
.contact_contact h4 a{
    font-family: var(--cairo-bold-font);
    font-size: 2.4vw;
    font-weight: bold;
    line-height: 1.09;
    text-align: left;
    color: var(--lighblue-color);
    margin: 1.5vw 0 0vw 0;
    z-index: 99;


}
.contact_contact p{
    font-family: var(--cairo-bold-font);
    font-size: 0.94vw;
    font-weight: bold;
    line-height: 1.33;
    text-align: left;
    color: var(--darkgray-color);
    padding-top: 2.3vw;


}
.contact_contact p span{
    font-weight: 400;
    display: block;

}
.contact_contact .contact_inline {
    display: inline;
    font-family: var(--cairo-bold-font);
    font-size: 0.94vw;
    font-weight: bold;
    line-height: 1;
    text-align: left;
    color: var(--darkgray-color);


}
.contact_contact .contact_inline a{
    display: inline;
    font-family: var(--cairo-bold-font);
    font-size: 0.94vw;
    font-weight: bold;
    line-height: 1;
    text-align: left;
    color: var(--darkgray-color);
    text-decoration: underline;


}
.contact_contact .contact_inline span{
    display: inline;
    font-weight: 400;

}
.contact_contact .padding_5{
    padding-bottom: 5vw;

}
.padding_right_0_2{
    padding-right: 0.2vw;
}
.padding_left_0_2{
    padding-left: 0.5vw;
}
.padding_top_2{
    padding-top: 1vw;
}

@media (max-width: 912px) {
    .contact_contact h6{
        font-size: 4.8vw;
        text-align: center;
        line-height: 0.8;
        margin-top: 8vw;
    }
    .contact_contact h2{
        font-size: 9vw;
        text-align: center;
        padding-bottom:5vw ;

    }
    .contact_contact p{
        font-size: 3.73vw;
        padding-top: 5vw;
        text-align: center;

    }
    .contact_contact p span{
        display: block;
        padding-bottom: 5vw;
        text-align: center;

    }
}
.blue_container{
    margin: 0;
    position: relative;
}
.blue_container::before{
    width: 24.48vw;
    height: 57.4vw;
    margin: 0 0.89vw 8.07vw 14.38vw;
    background-color: #1a264c;
    content: "";
    position: absolute;
    z-index: -1;

}
.blue_container iframe{
    width: 26.82vw;
    height: 48.44vw;
    margin: 3.65vw 5.05vw 3.96vw 7.87vw;
    z-index: 1;
}

#contact_form.form_contact input[type=text]{
    width: 100%;
    height: 3.13vw;
    margin: 0 1.56vw 0 0;
}

#contact_form.form_contact textarea {
    width: 100%;
}
#contact_form.form_contact input[type=submit] {
    width: 11.25vw;
    height: 2.604vw;
    margin: 1.56vw 0vw 0 0;
    right: 0;
    margin-left: 70%;

}
.padding_botom_3{
    padding-bottom: 1vw ;
}
@media (max-width: 912px) {
#contact_form.form_contact input[type=text] {
    width: 100%;
    height: 13.13vw;
    margin-bottom: 4vw;
}
#contact_form.form_contact input[type=submit] {
    text-align: center;
    border: none;
    outline: none;
    box-shadow: none;
    margin-left: 0vw;
    margin-top: 5.3vw;
    width: 89.3vw;
    height: 13.3vw;
    font-size: 4.8vw;
    padding-right: 12vw;
}
.contact_contact .contact_inline {
    font-size: 3.74vw;
    text-align: center;
}
.contact_contact h4 {
    font-size: 7.4vw;
    line-height: 2.09;
    text-align: center;

}
.contact_contact .contact_inline a {
    font-size: 3.74vw;
    line-height: 2;
    text-align: center;
}
.contact_contact {
    margin: 12.75vw 11.72vw 14.03vw 11.72vw;
}
.contact_contact .contact_inline {
    display: block;
}
.contact_contact .contact_inline a{
    display: block;


}
}

/* end contact*/


/* services page start */

/* start services*/


.__services h6{
    text-align: center;
    font-family: var(--cairo-bold-font);
    font-size: 1.04vw;
    font-weight: 400;
    line-height: 0.3;
    color: var(--lighblue-color);
    margin-top: 5.73vw;
    text-transform: uppercase;
    text-align: center;
}
.__services h2{
    text-align: center;
    font-family: var(--cairo-bold-font);
    font-size: 2.4vw;
    font-weight: bold;
    line-height: 1.13;
    color: var(--darkblue-color);
    text-align: center;
}
.__services p{
    text-align: center;
    font-family: var(--cairo-bold-font);
    font-size: 0.89vw;
    font-weight: 400;
    line-height: 1.41;
    color: var(--darkgray-colo);
    margin: 0.6vw 29.64vw 3.13vw 29.64vw;
    text-align: center;
}

@media (max-width: 912px) {
    .__services h6{
        font-size: 4.8vw;
        margin-top: 19.47vw;
    }
    .__services h2{
        font-size: 9.87vw;
        margin: 0vw 5.3vw 0vw 5.3vw;
    }
    .__services p{
        font-size: 3.7vw;
        margin: 4vw 5.3vw 14.9vw 5.3vw;
    }
}
.__services .row{
    margin:0 11.72vw 0vw 11.72vw ;
    padding: 0;
}
.__services .row .col-xl-4{
    padding:0 1.563vw 0 0;
    margin: 0;

}

.__services{
    margin-bottom: 5vw;
}
.__service{
    width: 24.48vw;
  height: 15.42vw;
  margin: 0vw 1.46vw 1vw 0;
  padding: 1.56vw 2.08vw;
  background-color:var(--bggray-color);
}
.__service .__service_inline{
    display: flex;

}
.image_class{
    border-bottom: 3px solid var(--lightorange-color);
    transition:0.3s ;
    width: 0.5vw;
    margin-right: 4.7vw;
    -webkit-transition:0.3s ;
    -moz-transition:0.3s ;
    -ms-transition:0.3s ;
    -o-transition:0.3s ;
}
.ani:hover .image_class{
    width: 2.6vw;
    margin-right: 2.6vw;
}
.__service .__service_inline img{
    width: 2.6vw;
    height: 2.6vw;
    margin: 0.2vw 2.6vw 0.52vw 0;
    object-fit: contain;
    border-spacing: 1vw;
}


.__service .__service_inline h2{
    margin: 1.62vw 0 0.16vw 0.68vw;
    font-family: var(--cairo-bold-font);
    font-size: 1.5vw;
    font-weight: bold;
    line-height: 0.33;
    text-align: left;
    color: var(--blue-color);
}
.__service span {
    margin: 2.24vw 0  1.6vw 0;
    padding: 0 !important;
    font-family: var(--cairo-bold-font);
    font-size: 0.89vw;
    font-weight: 400;
    line-height: 1.41;
    text-align: left !important;
    display: block;
    color: #555;
    height: 3.42vw;

}
.__service a {
    margin: 0vw 0.68vw 0 0.16vw;
    font-family: var(--cairo-bold-font);
    font-size: 0.94vw;
    font-weight: bold;
    line-height: 0.56;
    text-align: left;
    color: var(--lighblue-color);
}
.__service a:hover {
    color: var(--lightorange-color);
}
@media (max-width: 912px) {
    .__service{
        width: 100%;
      height: 60vw;
      margin: 0vw 1.46vw 3vw 0;
      padding: 6.56vw 6.08vw;
    }
    .image_class{
        width: 8.6vw;
        margin-right: 6.6vw;
    }
    .__service .__service_inline img{
        width: 8.6vw;
        height: 8.6vw;
        margin: 0.2vw 2.6vw 0.52vw 0;
    }


    .__service .__service_inline h2{
        margin: 4.62vw 0 0.16vw 0.68vw;
        font-size: 4.5vw;
        line-height: 0.33;
    }
    .__service span {
        margin: 2.24vw 0  1.6vw 0;
        padding: 0 !important;
        font-size: 3.7vw;
        font-weight: 400;
        line-height: 1.41;
        height: 29vw;

    }
    .__service a {
        margin: 0vw 0.68vw 0 0.16vw;
        font-size: 4vw;
    }
    .__service a:hover {
        color: var(--lightorange-color);
    }
}
/* services page end */


 /* start footer */

.servicesdetails{
    margin-left: 0;
    margin-left: 0;
    margin-bottom: 0;
    background-image: url("../image/servicesdetails.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 100%;
    height: 14.06vw;
    padding: 4.7vw 58.59vw 6.25vw 11.72vw;
    margin-top: -0.1vw;
}
.servicesdetails h1{
margin: 0 0 2.3vw 0px;
font-family: var(--cairo-bold-font);
font-size: 3.44vw;
font-weight: bold;
line-height: 0.52;
text-align: left;
color: var(--darkblue-color);
}
.servicesdetails ul{
    display: flex;
}
.servicesdetails ul img{
    width: 0.85vw;
    height: 0.68vw;
    margin: 0.3vw 0.3vw 0.39vw 0;
}
.servicesdetails ul li {
    margin: 0 0.4vw 0 0vw;
    font-family: var(--cairo-bold-font);
    font-size: 0.83vw;
    font-weight: normal;
    text-align: left;
    color: var(--darkgray-color);

}
.servicesdetails ul li:last-child {
    font-weight: bold;
    color: var(--lighblue-color);
}
.servicesdetails ul li a{
    color: var(--darkgray-color);

}
.servicesdetails ul li:last-child a{
    color: var(--lighblue-color);
}
@media (max-width: 920px) {
    .servicesdetails{
        height: 34vw;
        padding: 11vw 0vw 6.25vw 5.3vw;
        background-size: cover;
    }
    .servicesdetails h1{
        margin: 0 0 1.56vw 0px;
        font-family: var(--cairo-bold-font);
        font-size: 9vw;
        font-weight: bold;
        line-height: 0.52;
        text-align: left;
        color: var(--darkblue-color);
        }
        .servicesdetails ul{
            display: flex;
        }
        .servicesdetails ul img {
            width: 3vw;
            height: 2.68vw;
            margin: 0vw 0.6vw 0.55vw 0;
        }
        .servicesdetails ul li {
            margin: 1.4vw 2.4vw 0 0vw;
            font-family: var(--cairo-bold-font);
            font-size: 3.7vw;
            font-weight: normal;
            text-align: left;
            color: var(--darkgray-color);

        }

}
/* end footer */
/*start __servicesdetails */
.__servicesdetails{
    margin: 3.75vw 11.72vw 8.85vw 11.72vw;
}
.__servicesdetails img{
    width: 30.99vw;
    height: 17.8vw;
    margin: 0 0 0.625vw 7vw;
}
.__servicesdetails h6{
    margin: 0;
    font-family: var(--cairo-bold-font);
    font-size: 1.04vw;
    font-weight: 400;
    line-height: 1;
    text-align: left;
    color: var(--lighblue-color);
    text-transform: uppercase;
}
.__servicesdetails h2{
    margin: 0 0 0 0;
  font-family: var(--cairo-bold-font);
  font-size: 2.4vw;
  font-weight: bold;
  line-height: 1.13;
  text-align: left;
  color: var(--darkblue-color);
}
.__servicesdetails p{
    margin: 1vw 0 1.56vw 0;
  font-family: var(--cairo-bold-font);
  font-size: 0.89vw;
  font-weight: 400;
  line-height: 1.41;
  text-align: left;
  color: #555;
}
.__servicesdetails a{
    font-family: var(--cairo-bold-font);
  font-size: 0.94vw;
  font-weight: bold;
  line-height: 0.17;
  text-align: center;
  color: var(--white-color);
}
/* end __servicesdetails */

.__services .ani:hover{
    box-shadow: 0 5px 15px 5px rgb(62 57 107 / 7%);
    margin-top: -0.2vw;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}