@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Train+One&display=swap');
    /* Global classes */
    .pre-loading{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2000;
        background-color: #fff;
    }
    .pre-loading.inactive{
        display: none !important;
    }
    .loader {
        animation: spin 1s infinite linear;
        border: solid 2vmin transparent;
        border-radius: 50%;
        border-right-color: #09f;
        border-top-color: #09f;
        box-sizing: border-box;
        height: 20vmin;
        left: calc(50% - 10vmin);
        position: fixed;
        top: calc(50% - 10vmin);
        width: 20vmin;
        z-index: 1;
    }
    .loader:before {
        animation: spin 2s infinite linear;
        border: solid 2vmin transparent;
        border-radius: 50%;
        border-right-color: #3cf;
        border-top-color: #3cf;
        box-sizing: border-box;
        content: "";
        height: 16vmin;
        left: 0;
        position: absolute;
        top: 0;
        width: 16vmin;
    }
    .loader:after {
        animation: spin 3s infinite linear;
        border: solid 2vmin transparent;
        border-radius: 50%;
        border-right-color: #6ff;
        border-top-color: #6ff;
        box-sizing: border-box;
        content: "";
        height: 12vmin;
        left: 2vmin;
        position: absolute;
        top: 2vmin;
        width: 12vmin;
    }
    @keyframes spin {
        100% {
            transform: rotate(360deg);
        }
    }

    h1{

        font-family: 'Kanit', sans-serif;
        position: relative;
        font-size: 48px;
        text-align: center;
        margin: 50px 0px;
        padding-bottom: 10px;
    }
    h1::after{
        content: "";
        width: 50px;
        height: 5px;
        background-color: #5090be;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
        border-radius: 40px;
    }
    .primary-btn{
        background: linear-gradient(to left, #5090be, #356b63);
        color: white;
        font-size: 20px;
        padding: 10px 50px;
        position: relative;
        overflow: hidden;
    }
    .primary-btn::after{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 0;
        background-color: #c6c6c66b;
        transition: width .5s cubic-bezier(0.5, 1.6, 0.4, 0.7);
    }
    .primary-btn:hover::after{
        color: white;
        width: 100%;
    }
    a:hover{
        text-decoration: none;
    }
    p{
        font-size: 18px;
    }
    .flex-center{
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    body{
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        overflow-y: hidden;
    }
    body.active{
        overflow-y: auto;
    }
    html{
        scroll-behavior: smooth;
    }
    .banner{
        width: 100%;
        height: 100vh;
        overflow: hidden;
        position: relative;
        z-index: 10;
    }
    @media (max-width:575px){
        .banner{
            width: 100%;
            height: 400px;
        }
    }
    .banner::after{
        content: "";
        width: 30px;
        height: 30px;
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
        background-color: white;
    }
    /* Background Vedio */
    .banner video{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        object-fit: cover;
        z-index: -1;
        overflow: hidden;
    }
    .banner .banner-content{
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.61);
        display: flex;
        justify-content: center;
        align-items: center;
        overflow-x: hidden;
    }
    /* Navigation bar */
    .banner-content .navbar{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        padding: 40px 80px 0px 80px;
        transition: .2s;
        z-index: 10000;
        font-family: 'Raleway', sans-serif;
    }
    /* Sticky class is added when page is scrolled */
    .banner-content .sticky{
        background-color: rgb(35 35 35 / 90%);
        width: 100%;
        top: 0;
        left: 0;
        padding: 0px 50px;
        color: white;
        box-shadow: 0px 0px 10px black;
    }
    .banner-content .navbar-brand img{
        width: 200px !important;
    }

    /* .banner-content .sticky .navbar-brand img{
      width: 200px;
    } */
    .banner-content .navbar .nav-link{
        position: relative;
        color: white;
        font-size: 20px;
    }
    .banner-content .navbar-nav .nav-link.active{
        color: #5090be;
    }
    .banner-content .sticky .nav-link{
        color: white

        !important;
    }

    nav .nav-link::before{
        content: "";
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        width: 0;
        height: 3px;
        background-color: #5090be;
        bottom: 0;
        transition: .2s;
    }
    nav .nav-link.active::before,
    nav .nav-link:hover::before{
        width: 50px;
    }
    /* Mobile nav */
    .navbar-collapse{
        text-align: center;
    }
    .navbar .show{
        background-color:;
    }
    .sticky .navbar-collapse {
        text-align: center;
        background-color: ;
    }
    .navbar-toggler {
        background-color: #5090bc;
    }
    .dropdown.show{
        background-color: transparent;
    }
    .dropdown.show .dropdown-menu{
        text-align: left;
    }
    .sticky .dropdown.show .dropdown-menu{
        text-align: left;
    }
    .dropdown-menu a{
        color: white;
    }
    .banner .banner-content h2{
        text-align: center;
        color: #5090be;
    }
    .banner-content .banner-btn{
        display: flex;
        justify-content: center;
    }
    .banner-content .banner-btn a{
        margin-right: 10px;
    }
    /*  Mouse animation in banner section */
    .cursor1{
        /*position: fixed;
        width: 50px;
        height: 50px;
        border: 1px solid #c6c6c6;
        border-radius: 50%;
        left: 0;
        top: 0;
        pointer-events: none;
        transform: translate(-50%, -50%);
        transition: .1s;
        z-index: 22222222;*/
    }
    .cursor2{
        /*position: fixed;
        width: 8px;
        height: 8px;
        background-color: #c6c6c6;
        border-radius: 50%;
        left: 0;
        top: 0;
        pointer-events: none;
        transform: translate(-50%, -50%);
        transition: .15s;
        z-index: 22222222;*/
    }

    p.type-writer {
        font-size: 3rem;
        padding: 0.5rem;
        font-weight: bold;
        letter-spacing: 0.1rem;
        text-align: center;
        overflow: hidden;
        color: white;
    }
    p.type-writer  span.typed-text {
        font-weight: normal;
        color: #5090be;
    }
    p.type-writer  span.cursor {
        display: inline-block;
        background-color: #ccc;
        margin-left: 0.1rem;
        width: 3px;
        animation: blink 1s infinite;
    }
    p.type-writer  span.cursor.typing {
        animation: none;
    }
    @keyframes blink {
        0%  { background-color: #ccc; }
        49% { background-color: #ccc; }
        50% { background-color: transparent; }
        99% { background-color: transparent; }
        100%  { background-color: #ccc; }
    }
    /* Section 1 start from here */
    .section-1{
        width: 100%;
        margin: 0;
        padding: 0 30px;
    }
    .section-1 .parent-box{
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        width: 100%;
        margin: 0;
    }
    .parent-box .box{
        text-align: justify;
    }
    /* Section 2 start from here */
    .section-2{
        margin-top: 100px;
        min-height: 100vh;
        clip-path: polygon(100% 0, 100% 0, 100% 20%, 100% 80%, 0 100%, 0 100%, 0% 80%, 0 21%);
        background: url('../img/section-2.jpg');
        background-color: rgba(0, 0, 0, 0.616);
        background-blend-mode: multiply;
        background-attachment: fixed;
        padding: 0px 40px;
        background-size: cover;
        overflow: hidden;
    }
    .section-2 h1{
        color: #5090be;
    }
    .section-2 p{
        color: white;
        text-align: center;
    }
    /* Section 3 start from here */
    .section-3{
        margin-top: 40px;
        padding-bottom: 100px;
    }
    .section-3 .boxes-main{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .section-3 .boxes-main .box{
        width: 350px;
        height: 300px;
        background-color: #5090be;
        margin-bottom: 20px;
        border-radius: 20px;
        position: relative;
        text-align: center;
        padding: 0px 20px;
        color: white;
        transition: all .5s;
    }
    .section-3 .boxes-main .box:hover{
        box-shadow: 5px 5px 20px -4px rgba(0,0,0,0.75);
    }
    .boxes-main .box .img{
        position: absolute;
        top: -10px;
        left: -10px;
        width: 100px;
        height: 100px;
        background-color: #1e72ad;
        border-radius: 50%;
        border: 5px solid white;
    }
    /* Section 4 start from here */
    .section-4{
        min-height: 100vh;
        width: 100%;
        clip-path: polygon(100% 0, 100% 0, 100% 20%, 100% 80%, 0 100%, 0 100%, 0% 80%, 0 21%);
        background: url('../img/story.jpg');
        background-color: rgba(0, 0, 0, 0.616);
        background-blend-mode: multiply;
        background-attachment: fixed;
        padding: 0px 40px;
        background-repeat: no-repeat;
        background-size: cover;
        color: white;
        margin-bottom: 100px;
        overflow: hidden;
    }
    .section-4 .watch-btn{
        font-size: 100px;
        color: white;
        outline: none;
        border: none;
        user-select: none;
    }
    /* Section 5 start from here */
    .section-5{
        width: 100%;
        margin: 100px 0px;
    }
    .section-5 .swiper-container {
        padding: 50px 0px;
        width: 100%;
    }
    .section-5 .swiper-container .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        align-items: center;
        padding: 50px 0px;
    }
    .swiper-container-horizontal >.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 4px;
        width: 45px;
        border-radius: 0;
    }
    .swiper-slide .review{
        position: relative;
        padding:0px 30px ;
    }
    /* Left quote */
    .swiper-slide .review::before{
        content: "\f10d";
        font-family: "Font Awesome 5 Free";
        position: absolute;
        top: -15px;
        left: -20px;
        font-size: 30px;
        font-weight: 600;
        color:  #5090be;
    }
    /* Rigth Quote */
    .swiper-slide .review::after{
        content: "\f10e";
        font-family: "Font Awesome 5 Free";
        position: absolute;
        top: 0px;
        right: -20px;
        font-size: 30px;
        font-weight: 600;
        color:  #5090be;
    }
    .section-5 .client-detail{
        padding: 10px;
    }
    .section-5 .swiper-slide .client-img{
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin-right: 15px;
        overflow: hidden;
    }
    .client-img img{
        width: 100%;
        height: 100%;
    }
    /* Section-6 */
    .section-6{
        padding-top: 10px;
        padding-bottom: 100px;
        background-image: url('../img/experties.jpg');
        background-color: rgba(0, 0, 0, 0.61);
        background-blend-mode: multiply;
        background-size: cover;
        background-attachment: fixed;
    }
    .section-6 h1{
        color: white;
    }
    .section-6-content{
        padding: 50px 0px 100px 0px;
        position: relative;
    }
    .section-6 .circle{
        width: 500px;
        height: 500px;
        border-radius: 50%;
        position: relative;
        animation: spin 20s linear infinite;
        display: flex;
        flex-wrap: wrap;
    }
    .section-6-logo{
        margin-top: -50px;
        transform: translate(-50%);
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
    }
    .section-6 .circle img{
        width: 200px;
    }
    .section-6 .circle .box{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: white;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.432);
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        animation: boxspin 20s linear infinite;
    }
    @keyframes boxspin{
        to {
            transform: rotateZ(-360deg)
        }
    }
    .section-6 .circle .box img{
        width: 50px;

    }
    .section-6 .circle .box-1{
        top: 0px;
        left: 16px;
    }
    .section-6 .circle .box-2{
        top: 200px;
        left: -47px;
    }
    .section-6 .circle .box-3{
        bottom: 0px;
        left: 37px;
    }
    .section-6 .circle .box-4{
        bottom: -38px;
        right: 120px;
    }
    .section-6 .circle .box-5{
        bottom: 126px;
        right: -34px;
    }
    .section-6 .circle .box-6{
        top: 54px;
        right: -2px;
    }
    .section-6 .circle .box-7{
        top: -44px;
        right: 169px;
    }
    @keyframes spin{
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }
    /* Last section start from here */
    .section-last{
        background-color : rgba(128, 128, 128, 0.185);
    }
    .section-last .counters {
        width: 100%;
        color: black;
        font-size: 40px;
    }
    .section-last .counters {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding: 0px 30px;
        color: white;
        background: linear-gradient(to right, #5090bc , #356b63);
        border-bottom: 2px solid white;
    }
    .section-last .counter-box{
        text-align: center;
        margin: 20px;
    }
    .section-last .counters .counter {
        font-size: 45px;
        margin: 10px 0;

    }
    .footer-dark {
        padding:50px 0;
        color:#f0f9ff;
        background: linear-gradient(to right, #17a2b8 , #343a40);
        position: relative;
    }
    .top-btn{
        width: 100px;
        height: 50px;
        background: #5090bc ;
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translate(-50%);
        border: 2px solid white;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        font-size: 40px;
        color: white;
        text-decoration: none;
        padding-top: 21px;
    }
    .footer-dark h3 {
        margin-top:0;
        margin-bottom:12px;
        font-weight:bold;
        font-size:16px;
    }
    .footer-dark ul {
        padding:0;
        list-style:none;
        line-height:1.6;
        font-size:14px;
        margin-bottom:0;
    }
    .footer-dark ul a {
        color:inherit;
        text-decoration:none;
        opacity:0.6;
    }
    .footer-dark ul a:hover {
        opacity:0.8;
    }
    .footer-dark .item.text {
        margin-bottom:36px;
    }
    .footer-dark .item.text p {
        opacity:0.6;
        margin-bottom:0;
    }
    .footer-dark .item.social {
        text-align:center;
    }
    .footer-dark .item.social > a {
        font-size:20px;
        width:36px;
        height:36px;
        line-height:36px;
        display:inline-block;
        text-align:center;
        border-radius:50%;
        box-shadow:0 0 0 1px rgba(255,255,255,0.4);
        margin:0 8px;
        color:#fff;
        opacity:0.75;
    }
    .footer-dark .item.social > a:hover {
        opacity:0.9;
    }
    .footer-dark .copyright {
        text-align:center;
        padding-top:24px;
        opacity:0.3;
        font-size:13px;
        margin-bottom:0;
    }
    /* Company page style start from here*/
    .second-banner{
        height: 400px;
        background-image: url('../img/story.jpg');
        background-attachment: fixed;
        background-size: cover;
    }
    .bannar-navigation{
        position: absolute;
        bottom: 20px;
        right: 20px;
        color: #5090bc;
    }
    .company-section-1{
        padding: 0px 100px 100px 100px;
    }
    .company-section-1 .box{
        margin-bottom: 20px;
    }
    .company-section-2{
        padding-bottom: 100px;
    }
    .company-section-2 .steps-main{
        color: white;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding-top: 50px;
    }
    .company-section-2 .steps-main .step{
        width: 224.8px;
        height: 250px;
        align-items: center;
        position: relative;
        background-color: #5090be;
        transition: .5s;
        margin-bottom: 55px;
        font-weight: bolder;
        font-size: 19px;
    }
    .company-section-2 .steps-main .step:hover{
        box-shadow: 0px 0px 20px black;
    }
    .company-section-2 .steps-main .step img{
        width: 80px !important;
    }
    .company-section-2 .steps-main .step .step-name{
        position: absolute;
        top: -50px;
        left: 50%;
        transform: translate(-50%);
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 3px solid white;
        background-color: #1e72ad;
        font-size: 19px;
    }
    .steps-main .step{
        border-right: 1px solid rgba(255, 255, 255, 0.747);
    }
    .company-section-3{
        padding-bottom: 100px;
    }
    .company-section-3 .card-main{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .company-section-3 .card-main .card{
        position: relative;
        width: 300px;
        height: 200px;
        background: linear-gradient(to right, #5090bc, #5090bd );
        margin-bottom: 20px;
        text-align: center;
        margin: 10px 5px;
    }
    .company-section-3 .card-main .card p{
        padding-top: 30px;
        color: rgba(255, 255, 255, 0.671);
    }
    .company-section-3 .card-main .card .card-name{
        width: 250px;
        height: 50px;
        border-radius: 20px;
        background-color: #5090be;
        border: 2px solid white;
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translate(-50%);
        transition: .5s;
        font-size: 20px;
        font-weight: bolder;
        color: white;
        box-shadow: 0px 0px 10px black;
    }
    /* Services page style start from here */
    .services{
        padding: 0px 20px 100px 20px;
    }
    .services .service{
        width: 250px;
        height: 320px;
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.212);
        margin-bottom: 20px;
        padding: 20px 0px;
        background: linear-gradient(to bottom, #5090bc, #718086);
        cursor: pointer;
    }
    .services .service .card-img{
        width: 130px;
        display: inline-block;
        transition: width .1s;
    }
    .services .service:hover .card-img{
        width: 0px;
    }
    .services .service .text{
        transition: 5s !important;
    }
    .services .service .text h4{
        font-size: 30px;
        margin-top: 20px;
    }
    .services .service .text span{
        color: rgb(56, 55, 55);
        font-size: 18px;
    }
    .services .service a{
        color: white;
    }
    /* service detail page style staret from here */
    .service-detail{
        margin-bottom: 100px;
    }
    .service-detail .service-img {
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .service-detail .service-img img{
        width: 100%;
    }
    .nav-tabs{
        display: flex;
        justify-content: center;
    }
    .tab-content .tab-pane.active{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        padding: 50px 0px;
    }
    .tab-content .portfolio{
        width: 300px;
        height: 300px;
        margin: 5px;
        position: relative;
        font-size: 20px;
        cursor: pointer;
        transition: .5s;
        overflow: hidden;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.253);
    }
    .tab-content .portfolio .portfolio-dec{
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 80px;
        background-color: rgba(0, 0, 0, 0.658);
        transition: .2s;
        color: white;
        flex-direction: column;
    }
    .tab-content .portfolio img{
        transition: .5s;
    }
    .tab-content .portfolio:hover .portfolio-dec{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    /* Product page style start from here */
    .products{
        padding: 100px 0px;
    }
    .products .card-main{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
    /* Product */
    .products .product{
        margin: 5px;
        width: 400px;
        height: 250px;
        border: 1px solid black;
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        background-size: cover;
    }
    .products .product img{
        height: 100%;
        width: 100%;
    }
    /* Prdouct description */
    .products .product .product-desc{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 80px;
        background-color: rgba(0, 0, 0, 0.644);
        transition: height .5s cubic-bezier(0.5, 1.6, 0.4, 0.7);
    }
    .products .product .product-desc h3{
        font-size: 18px;
        color: white;
    }
    .products .product:hover .product-desc{
        height: 100%;

    }
    .products .product .product-desc a{
        display: none;
        transition: .7s;
    }
    .products .product:hover a{
        display: block;
    }
    /* Carrer page style start from here */
    .resume-section{
        padding-bottom: 100px;
    }
    .resume-section .form-section{
        width: 50%;
        margin: 100px auto;
        position: relative;
        padding:120px 30px;
        border-radius: 20px;
        box-shadow: 0px 0px  20px rgba(0, 0, 0, 0.486);
        color: white;
        font-family: 'Poppins', sans-serif;
        border-bottom: 5px solid #5090bc;
    }
    .form-section .form-icon{
        position: absolute;
        top: -50px;
        left: 50%;
        transform: translate(-50%);
        width: 100px;
        height: 100px;
        background: black;
        border-radius: 50%;
        border: 5px solid white;
        font-size: 50px;
    }
    .resume-section input ,
    .resume-section select,
    .resume-section .custom-file-label{
        background: #D4D3D3;
    }
    .resume-section input:focus,
    .resume-section select:focus{
        background: #D4D3D3;
    }
    .form-section .email{
        margin: 20px 0px;
    }
    .form-section a.primary-btn{
        display: inline-block;
        margin-top: 20px;
        align-self: center;
    }
    /* Contact page style start from here */
    .contact-section-1{
        margin-top: 5px;
        padding-bottom: 100px;
    }
    .contact-section-2 .contact-form{
        background: #fff;
        margin-bottom: 5%;
        width: 70%;
    }
    .contact-section-2 .contact-form .form-control{
        border-radius:1rem;
    }
    .contact-section-2 .contact-image{
        text-align: center;
    }
    .contact-section-2 .contact-image img{
        border-radius: 6rem;
        width: 11%;
        margin-top: -3%;
        transform: rotate(29deg);
    }
    .contact-section-2 .contact-form form{
        padding: 0px 0px 100px 0px;
    }
    .contact-section-2 .contact-form form .row{
        margin-bottom: -7%;
    }
    .contact-section-2 .contact-form .btnContact {
        width: 50%;
        border: none;
        border-radius: 1rem;
        padding: 1.5%;
        background: #5090bc;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
    }
    .contact-section-3 .branches-main{
        padding-top: 50px;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .contact-section-3 .branch{
        width: 300px;
        height: 250px;
        position: relative;
        z-index: 2;
        margin: 8px;
        transition: 2s;
    }
    .contact-section-3 .branch img{
        width: 100%;
        height: 100%;
    }
    .contact-section-3 .branch .country{
        width: 50px;
        height: 30px;
        position: absolute;
        top: -31px;
        left: 50%;
        transform: translate(-50%);
        overflow: hidden;
        transition: 1s;
        z-index: -1;
    }
    .contact-section-3 .branch:hover .country{
        height: 0;
        top: 0;
    }
    .contact-section-3 .branch .overlay{
        position: absolute;
        /* width: 90%; */
        height: 90%;
        left: 50%;
        top: 15px;
        transform: translate(-50%);
        background-color: rgba(0, 0, 0, 0.63);
        color: white;
        width: 0;
        transition: width .1s;
    }
    .contact-section-3 .branch .overlay .overlay-content{
        display: none;
    }

    .contact-section-3 .branch:hover .overlay-content{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .contact-section-3 .branch:hover .overlay{
        width: 90%;
    }
    .modal-full {
        min-width: 90%;
    }
    .dropdown-mobile{
        display: none;
    }
    /* This class id add to dropdown that appear on mobile  this class is add
     for the purpose to hide language deropdown when nav open*/
    .hidedropdownmobile{
        display: none !important;
    }
    .dropnew{

        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        display: none;
        float: left;
        min-width: 10rem;
        padding: .5rem 0;
        margin: .125rem 0 0;
        font-size: 1rem;
        color: #212529;
        text-align: left;
        list-style: none;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid rgba(0,0,0,.15);
        border-radius: .25rem;
        right: 0;
        left: auto;
    }