:root{
    --dblue: #02122a;
    --blue: #0495b1;
    --white: #ffffff;
    --white-o: rgb(255 255 255 / 50%);
    --grey: #eef3f9;
    --black: #000000;
    --black-o: rgb(0 0 0 / 50%);
}
.dblue{color: var(--dblue) ;}
.blue{color: var(--blue);}
.white,.bg-black{color: var(--white);}
.navbar-toggler{color: var(--white);}
/*  */
.bg-dblue{background-color:var(--dblue) !important;}
.bg-grey{background-color:var(--grey) ;}
.bg-black{background-color:var(--black) ;}
/*  */
@font-face {
    font-family: 'OpenSans-Light';
    src: url('../fonts/OpenSans-Light.ttf');
    font-weight: normal;
    font-style: normal;
}
.ff-ol{
    font-family: 'OpenSans-Light';
}
@font-face {
    font-family: 'OpenSans-Regular';
    src: url('../fonts/OpenSans-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}
.ff-or{
    font-family: 'OpenSans-Regular';
}
@font-face {
    font-family: 'OpenSans-Medium';
    src: url('../fonts/OpenSans-Medium.ttf');
    font-weight: normal;
    font-style: normal;
}
.ff-om{
    font-family: 'OpenSans-Medium';
}
@font-face {
    font-family: 'OpenSans-SemiBold';
    src: url('../fonts/OpenSans-SemiBold.ttf');
    font-weight: normal;
    font-style: normal;
}
.ff-os{
    font-family: 'OpenSans-SemiBold';
}
@font-face {
    font-family: 'OpenSans-Bold';
    src: url('../fonts/OpenSans-Bold.ttf');
    font-weight: normal;
    font-style: normal;
}
.ff-ob{
    font-family: 'OpenSans-Bold';
}
@font-face {
    font-family: 'OpenSans-ExtraBold';
    src: url('../fonts/OpenSans-ExtraBold.ttf');
    font-weight: normal;
    font-style: normal;
}
.ff-ox{
    font-family: 'OpenSans-ExtraBold';
}
body {
    font-family: 'OpenSans-Regular';
    font-size: 18px;
    overflow-x: hidden;
    line-height: inherit;
    color: #000;

}
p{line-height:28px;letter-spacing: 0px;margin-bottom: 25px;}
body,html {
    height: 100%;
    scroll-behavior: smooth;
}
._rel{position: relative;}
a,a:after,img,a:before,.btn-theme,.overly,.blog-box{
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
a{
    display: inline-block;
    text-decoration: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    -ms-appearance: none;
    color: var(--blue);
    position: relative;
    
}
a:hover,a:focus,a:active{
    text-decoration: none;
    outline: none;
    color:inherit;
}
a.anchor {
    display: block;
    position: relative;
    top: -150px;
    visibility: hidden;
}
.btn-theme{

}
.btn-outline,.btn-theme,.btn-bb{
    height: 60px;
    text-align: center;
    min-width: 180px;
    border: 0px;
    font-size: 15px;
    padding: 0px 20px;
    /*border-radius: 2px;*/
    /*font-family: 'OpenSans-Bold';*/
	font-family: 'OpenSans-Regular';
}
.btn-theme{
    background: var(--blue);
    color: #fff;
    line-height: 60px;
}
.btn-outline{
   border: 1px solid;
   background-color: transparent;
   line-height: 58px;
}
.btn-bb{
    border-bottom: 1px solid;
    line-height: 59px;
    /* text-transform: uppercase; */
    border-color: var(--black-o);
    color: var(--black);
}
.btn-outline.white,.btn-bb.white{
    color: var(--white);
    border-color: var(--white);
}
.btn-bb:hover,.btn-outline:hover{
    color: var(--white);
    background-color: var(--blue);
    border-color: var(--blue);
}
.btn-theme:hover{
    background-color: var(--dblue);
    color: var(--white);
}
.bg-dblue .btn-theme:hover{
    background-color: var(--white);
    color: var(--dblue);
}
.btn-arrow{
    height: 60px;
    width: 60px;
    line-height: 58px;
    text-align: center;
    color: var(--white);
    border:1px solid var(--white);
    font-size: 24px;
}
.btn-arrow.black{
    color: var(--black);
    border-color: var(--black);
}
.btn-arrow:hover,.btn-arrow:focus,.btn-arrow:active{
    background-color: var(--blue);
    color: var(--white);
    border-color: var(--blue);
}
.play-btn{
    height: 170px;
    line-height: 170px;
    width: 170px;
    border-radius: 50%;
    text-align: center;
    border: solid 1px rgb(255 255 255 / 10%);
    color: var(--white);
    font-size: 30px;
    position: relative;
    /*display: block;*/
}
.play-btn span{
    display: inline-block;
    width: 80px;
    height: 80px;
    line-height: 80px;
    border-radius: 50%;
    background-color: rgb(255 255 255 / 10%);
}
.play-btn:hover{
    border-color: var(--white);
}
.play-btn:hover span{
    background-color: var(--white);
    color: var(--blue);
}
.play-btn strong{
    font-size: 16px;
    display: block;
    position: absolute;
    bottom: -59px;
    left: 36%;
}
img{
    max-width: 100%;
    height: auto;
}
h1,h2,h3,h4,h5,h6{
    color: var(--dblue);
}
.white h1,.white h2,.white h3,.white h4,.white h5,.white h6{
    color: var(--white);
}
h1{
    font-family: 'OpenSans-Bold';
    font-size: 70px;
    line-height: 80px;
    letter-spacing: -2.29px;
    margin-bottom: 20px;
}
h2{
    font-family: 'OpenSans-Bold';
    font-size: 44px;
    line-height: normal;
    letter-spacing: -1.35px;
    margin-bottom: 20px;
}
h3{
    font-family: 'OpenSans-Bold';
    font-size: 30px;
    line-height: normal;
    letter-spacing: -1px;
    margin-bottom: 20px;
}
h4{
    font-family: 'OpenSans-Bold';
    font-size: 25px;
    line-height: normal;
    letter-spacing: 0px;
    margin-bottom: 20px;
}
h5{
    font-family: 'OpenSans-Bold';
    font-size: 23px;
    line-height: normal;
    letter-spacing: 0px;
    margin-bottom: 20px;
}
h6{
    font-family: 'OpenSans-Bold';
    font-size: 20px;
    letter-spacing: 0;
    line-height: normal;
    margin-bottom: 20px;
    
}
.f-60{
    font-family: 'OpenSans-Bold';
    font-size: 50px;
    line-height: normal;
    margin-bottom: 20px;
    letter-spacing: -1.5px;
}
.f-36{font-size: 30px;line-height:normal;}
.f-24{font-size: 20px;line-height:normal;}
.f-20{font-size: 18px;line-height: 28px;}
section {
    width: 100%;
    padding: 120px 0;
    position: relative;
    clear: both;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
[class*="max-"]{
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}
.max-1200{
    max-width: 1200px;
    
}
.max-1100{
    max-width: 1100px;
    
}
.max-1000{
    max-width: 1000px;
}
.max-900{
    max-width: 900px;
}
/*nav*/
.mainMenu{
    padding: 50px 0px;
}
.mainMenu.hover,.mainMenu.active{
    background-color: var(--black);
}
.mainMenu._transparent{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 999;
}
.mainMenu.sticky{
   position: fixed;
    background-color: var(--black);
    padding: 40px 0px;
    box-shadow: 10px 0 25px 0 rgb(0 0 0 / 6%);
}
.mainMenu ul{
    align-items: center;
}
.mainMenu li{
    margin-left: 40px;
}
.mainMenu li a{
    font-size: 16px;
    position: relative;
    color: var(--white);
    padding: 10px 0px;
    z-index: 9;
}
.mainMenu li a.dblue{
    color: var(--dblue);
}
.mainMenu li a.dblue:hover{
    color: var(--blue);
}
.mainMenu ._left a:after{
    content: "";
    height: 1px;
    width: 0%;
    background-color: var(--white);
    position: absolute;
    bottom: 0;
    left: 0;
}
.current-menu-item .sub-menu a:after{
    display: none;
}
.current-menu-item .sub-menu a:hover:after{
    display: block;
}
.mainMenu ._left a:hover:after,.mainMenu ._left .current-menu-item a:after{
    width: 100%; 
}
/* .menu-item-has-children{position: relative;} */
.mainMenu {
	
}
.mainMenu  .sub-menu{
    position: absolute;
    left: 0;
    right: 0;
    top: -100vh;
    padding: 15px 0px;
    box-shadow: 0 10px 10px 0 rgb(0 0 0 / 38%);
    border-bottom: 1px solid rgb(255 255 255 / 40%);
    /* transition:all 0.4s ease-in-out;
	-webkit-transition:all 0.4s ease-in-out;*/
	

}
.menu-item-has-children:hover .sub-menu{
    top: 90%;
}
.mainMenu  .sub-menu:before{
	content:"";
	position:absolute;
	top:-200px;
	left:0;
	right:0;
	height:300px;
	background-color:var(--black);
	z-index:-1;
}

.active.sub-menu{
    display: block;
}
.lang{
    height: 40px;
    line-height: 38px;
    width: 40px;
    border: 1px solid var(--white);
    text-transform: uppercase;
    text-align: center;
    padding: 0px;
    position: relative;
    z-index: 999;
}
.lang a{
    padding: 0px !important;
}
.lang:hover{
    background-color: var(--white);
}
.lang:hover a{
    color: var(--black);
}
.menu-box{
    max-width: 380px;
    width: 100%;
}
/*home hero*/
.home-hero .btn-arrow{
    position: absolute;
    bottom: 5%;
    z-index: 1;
    left: 5%;
}
.home-hero .bg{
    height: 900px;
    display: flex;
    align-items: center;
    text-align: center;
    background-color: rgb(0 0 0 / 70%);
    background-blend-mode: overlay;

}
.home-hero .max-1000{
    padding-top: 80px;
}
.home-hero .carousel-indicators{
   justify-content: flex-end;
   bottom: 70px;
}
.carousel-indicators .dot{
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background-color: var(--white);
    border:2px solid transparent;
}
.carousel-indicators .dot.active{
    background-color: transparent;
    border-color: var(--white);
}
.home-hero .btn-bb{
    /*text-transform: uppercase;*/
}
/* solution-box */
.solution-box{
    height: calc(100% - 30px);
    padding-bottom: 120px;
    position: relative;
}
.solution-box img{
    margin-bottom: 30px;
    width: 100%;
}
.solution-box p{
    color: var(--white-o);
}
.solution-box .btn-bb{
    text-transform: inherit;
    position: absolute;
    bottom: 30px;
    left: 50%;
   transform: translate(-50%,0);
   -webkit-transform: translate(-50%,0);
}
.partner-box{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 180px;
    border-radius: 2px;
    border: solid 1px #e6e6e6;
    background-color: #fff;
}
.partner-box:hover img{
    transform: scale(1.1);
    -webkie-transform: scale(1.1);
}
.code-toggle .box{
    border-bottom: 1px solid #e8e8e8;
    padding: 40px 0px;
    cursor: pointer;
}
.code-toggle .body{
    max-width: 480px;
    width: 100%;
    padding-top: 10px;
    display: none;
}`
.code-toggle .box.active .body{
    display: block;
}
.code-toggle .head{
    position: relative;
    width: fit-content;
    padding-right: 30px;
}
.code-toggle .head::after{
    content: "";
    height: 21px;
    width: 21px;
    background-image: url(../images/plus.png);
    position: absolute;
    right: 0;
    top: 0;
    display: none;
    
}
.code-toggle .box:hover .head:after,
.code-toggle .box.active .head:after{
    display: inline;
}
.code-toggle .body img{display: none;}
.customers-logo .partner-box{
    width: 280px;
    margin-right: 20px;
}
.code-toggle-images img{
    display: none;
    width: 100%;
	height:75vh;
	object-fit:cover;
}
.code-toggle-images img.active{
    display: block;
}
/*  */
.blog-box{
    border-radius: 2px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background-color: #fff;
    height: calc(100% - 50px);
    padding-bottom: 50px;
}
.blog-box .img{
    position: relative;
}
.blog-box .overly{
    position:absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgb(4 149 177 / 90%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
}
.blog-box:hover{
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
}
.blog-box:hover .overly{
    opacity: 1;
}
.overly .btn-outline:hover{
    background-color: var(--white);
    color: var(--blue);
}
.blog-box .text{
    padding: 30px;
}
.blog-box .cat{
    font-size: 14px;
    color: var(--black-o);
}
.blog-box .h6{
    font-family: 'OpenSans-SemiBold';
}
.blog-slider .blog-box{
    margin: 5px 20px 5px 2px;
    max-width: 400px;
    padding-bottom: 0px;
}
.arrows .btn-arrow{
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    position:absolute;
    right: 90px;
    top: 50%;
   transform: translate(0, -50%);
   -webkit-transform: translate(0, -50%);
}
.arrows .btn-arrow.__prev {
    right: auto;
    left: -30px;
    background-color: var(--blue);
    border-color: var(--blue);
}
.customer-supourt p{
    color: var(--black-o);
}
.s-form strong{
    font-size: 14px;
    display: block;
    margin-bottom: 20px;
}
.theme-form input,.theme-form textarea{
    width: 100%;
    height: 60px;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid rgb(2 18 42 / 10%);
    padding-left: 20px;
}
.theme-form input::placeholder{
	color: var(--black-o);
}

.theme-form textarea{
    height: 180px;
}
.theme-form.white input,.theme-form textarea{
    border-bottom: 1px solid var(--white-o);
    color: var(--white);
}
.theme-form.white input::placeholder{
	color: var(--white-o);
}
.theme-form input:focus{
    border-color: #02122a;
}
.theme-form.white input:focus,.theme-form textarea:focus{
    border-color: var(--white);
}
.theme-form label{
    font-size: 15px;
    text-align: left;
}
.theme-form input[type=checkbox]{
    height: 30px;
    width: 30px;
    background-color: transparent;
    margin-right: 10px;
    vertical-align:middle;
    border-radius: 5px;
}
.theme-form a{
    color: var(--blue);
}
footer{
    padding-top: 77px;
    background-color: var(--dblue);
}
.widget{
    margin-bottom: 50px;
}
.widget h6{
    color: #fff;
    font-size: var(--white);
    font-size: 16px;
    line-height: 40px;
    text-transform: uppercase;
}
.widget li{
    margin-bottom: 10px;
}
.widget li a{
    font-family: 'OpenSans-Light';
    color: #fff;
    font-size: 16px;
}
.widget li a:hover,.widget li.current-menu-item a{
    color: var(--blue);
}
.social-icons li{
    display: inline-block;
}
.social-icons a{
    border: 1px solid var(--white-o);
    width: 30px;
    height: 30px;
    line-height: 28px;
    text-align: center;
    color: var(--white);
    align-items: center;
}
.social-icons a:hover{
    background-color: var(--white);
    color: var(--dblue) !important;
}
a>i{align-items: center;}
.copyright{
    font-size: 12px;
    margin-top: 50px;
    padding: 15px 0px;
    color: var(--white-o);
    border-top: 1px solid var(--white-o);
}
.copyright ul li:not(:first-child){
    margin-left: 10px;
}
.copyright li,.copyright ul{
    display: inline-block;
}
.copyright li a{
    color: var(--white-o);
}
.copyright li a:hover{
    color: var(--white);
}
.percept-hero{
    padding-top: 300px;
    padding-bottom: 100px;
    display: flex;
    align-items: flex-end;
}
.percept-hero .logo>span{
    display: block;
    font-family: 'OpenSans-Light';
    font-size: 30px;
    letter-spacing: 23.4px;
}
.videos.h-800{
    height: 800px;
}
.videos{
    display: flex;
    align-items: flex-end;
    background-color: rgb(0, 0, 0,0.5);
    background-blend-mode: overlay;
    padding-bottom: 80px;
}
.icon-box{
    /*cursor: pointer;*/
}
.icon-box span{
    font-family: 'OpenSans-SemiBold';
    width: 100%;
    display: block;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 15px;
}
.icon-box img{
    height: 50px;
    object-fit: contain;
}
.horizontal-dots .carousel-indicators{
    margin: 0px;
    display: inline-block;
    top: 50%;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    right: -100px;
    left: inherit;
    height: fit-content;
}
.horizontal-dots .dot{
    margin: 5px 0px;
    display: block;
}
.banner-700{
    height: 700px;
    display: flex;
    align-items: center;
}
.drag-img{
    padding: 100px 0px 170px;
    background-color: var(--black);
}
.drag-img h2{
    letter-spacing: -1.35px;
}
.image-controls .icon-box{opacity: 0.25;}
.image-controls .icon-box.active,
.image-controls .icon-box:hover{opacity: 1;}
.image-holder .overly{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(0 0 0 / 0%);
}
.watermarking{
    background-color: rgb(0,0, 0,0.5);
    background-blend-mode: overlay;
}
.watermarking .shape{
    margin-bottom: -100px;
    position: relative;
    z-index: 10;
}
.best-video{
    padding-top: 180px;
}
.stay-connectd{
    background-color: var(--black);
}
.stay-connectd .banner-900{
    margin-left: 90px;
    height: 900px;
    text-align: center;
    display: flex;
    align-items: center;
}
.image-overly{
    position: relative;
}
.image-overly .text{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    text-align: center;
}
.w-features p{
    color: var(--white-o);
}
.w-features  .img{
    max-width: 90%;
    display: block;
}
.w-features .row{
    margin-top: 100px;
    margin-bottom: 100px;
}
.w-features ._text{
    max-width: 440px;
    width: 100%;
}
.w-features .row:nth-child(even) .img{
    margin-left: auto;
}
.w-features .row:nth-child(even) ._text{
    margin-left: auto;
}
.w-features .row:nth-child(even) ._c1{
    order: 2;
}
.w-features .row:nth-child(even) ._c2{
    order: 1;
}
.w-features .btn-bb,.learn{
    text-transform: inherit;
    font-family: 'OpenSans-Regular';
}
.banner-2 ._text{
    padding-top: 180px;
    position: absolute;
    top: 0;
    width: 100%;
}
.banner-2 ._text2{
    padding-top: 300px;
    position: absolute;
    top: 0;
    width: 100%;
}
.our-work p{
    color: var(--white-o);
	font-family: 'OpenSans-Light';
}

.slick-slider ul{
	font-family: 'OpenSans-Light';
	color: var(--white-o);
}

.work-slider .work-box{
    width: 40vw;
    transform: scale(0.4);
    opacity: 0.5;
}
.slick-center .work-box{
    transform: scale(1);
    opacity: 1;
}
.work-box img,.work-box .btn-bb{
    width: 100%;
    min-width: 100%;
}
.dark-p p,p.dark-p{
    color: var(--white-o);
}
.built{
    height: 900px;
    padding-bottom: 80px;
    display: flex;
    align-items: flex-end;
}
.accessories{
    height: 800px;
    background-color: rgb(0,0,0,0.35);
    background-blend-mode: overlay;
    display: flex;
    align-items: center;
}
.accesories-slider img{
    width: 25vw;
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
}
.accesories-slider .slick-center img{
    transform: scale(1);
    -webkit-transform: scale(1)
}
.accesories-slider .slick-slide img{
    display: inline-block;
}
.accesories-slider .slick-slide{
    display: flex !important;
    align-items:center;
    justify-content: center;
} 
.click-fast{
    background-blend-mode: overlay;
    background-color: rgb(0 0 0 / 35%);
    padding: 100px 0;
}
.arrows-slider{
    position: relative;
}
.arrows-slider .arrows{
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    font-size: 40px;
}
.arrows-slider ._back{left: 0;}
.arrows-slider ._next{right: 0;}
.docking{
    padding: 100px 0px 80px;
}
#city-slider .carousel-control-prev,#city-slider .carousel-control-next{
    font-size: 30px;
    align-items: flex-end;
    padding-bottom: 150px;
}
#city-slider .carousel-caption{
    padding-bottom: 100px;
}
#city-slider .carousel-indicators{
    bottom: 50px;
}
.precept-form .icon-box h4{margin-top: 20px;}
/*  */
.selectric{
    background-color: transparent;
    border:0;
    text-align: left;
}
.selectric-label{
    margin: 0;
    background-color: transparent;
    color: var(--white-o);
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid var(--white-o);
    font-size: 18px;
    padding-left: 20px;
}
.selectric-button{
    height: 60px;
    line-height: 60px;
    width: 60px;
}
.selectric-items li{
    text-align: left;
    font-size: 18px;
}
.selectric-items li.selected,.selectric-items li:hover{
    color: var(--white);
    background-color: var(--blue);
}
/*  */
.products{
    padding-top: 320px;
    padding-bottom: 50px;
}
.products .hero{
    height: 1000px;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
}
.product-box{
    border-radius: 2px;
    background-color: var(--white);
    box-shadow: 0 0 2px 0 var(--black-o);
    height: calc(100% - 30px);
    position: relative;
    padding-bottom: 120px;
}
.product-box ._bgImg{
    border-radius: 2px 2px 0px 0px;
    height: 350px;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.product-box ._bgImg img{
    max-height: 80%;
    object-fit: contain;
}
.product-box .text{
    padding: 25px 50px 0px 50px;
    border-radius:0px 0px 2px 2px;
}
.product-box p{
    font-size: 16px;
}
.product-box .btn-bb{
    position: absolute;
    bottom: 30px;
}
.product-box:hover img{
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
}
/* product-detial */
.product-detial{
    padding-top: 320px;
    padding-bottom: 0;
    background-color: rgb(0 0 0 / 70%);
}
.image-holder{
    position: relative;
}
/*  */
.circls div,.circls{
    border: solid 1px rgb(255 255 255 / 10%);
    border-radius: 50%; 
    display: flex;
    align-items: center;
    justify-content: center
}
.circls{
    height:900px;
    width: 900px;
}
.circls .c1{
    height:700px;
    width: 700px;
}
.circls .c2{
    height:500px;
    width: 500px;
}
.circls .c3{
    height:300px;
    width: 300px;
}
.video-player{
    height: 750px;
    background-color: rgb(0 0 0 / 35%);
    background-blend-mode: overlay;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding-bottom: 100px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
} 
.video-player .circls{
    position: absolute;
    right: 0px;
    top: -50px;
}
.image-overly{
    position: relative;
}
.image-overly:after{
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgb(0 0 0 / 35%);
}
.video-wall .image-overly{
    position: absolute;
    top: 0;
    width: 100%;
}
.video-wall .wrapper{
    background-color: var(--white);
    margin-top: 100px;
    border-radius: 2px;
    border: solid 1px #e7e7e7;
}
.s-image{
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.s-text{
    border-right: solid 1px #e7e7e7;
}
.s-text .text{
    max-width: 90%;
    margin: 0 auto;
    padding: 40px 0px;
    
}
.icon-list{}
.icon-list li{
    position: relative;
    padding: 20px 0px 20px 40px;
    border-top: 1px solid #e7e7e7;
    font-size: 16px;
}
.icon-list li img{
    position: absolute;
    top: 20px;
    left: 0;
}
.w-90{
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.downloads-files{
    padding: 0px 50px;
}
.downloads-files li{
    padding-left: 0px;
}
.downloads-files a{
    font-family: 'OpenSans-Bold';
    width: 100%;
    padding-right: 30px;
    position: relative;   
}
.downloads-files a i{
    position: absolute;
    right: 0;
}
.video-item{
    height: 850px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(0, 0, 0,0.9);
    background-blend-mode: overlay;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.video-item .circls{
    z-index: 2;
    position: relative;
}
.video-item .video-holder:after,#home-slider .video-holder:after{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #00000054;
}
.video-item .play-btn span,.play-btn.outline span{
    background-color: transparent;
    border: 1px solid var(--white);
}
.demo-videos .arrows img,.demo-videos .arrows .img{
    width: 187px;
    height: 200px;
    object-fit: contain;
}
.demo-videos .arrows strong{
    font-size: 16px;
    display: inline-block;
    color: #fff;
    text-align: right;
}
.demo-videos .video-item{position: relative;}
.demo-videos .text{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: fit-content;
    padding-top: 120px;
}
.demo-videos .slick-dots{
    bottom: 80px;
}
.before-bg-900{
    padding-top: 320px;
}
.before-bg-900 .container{position: relative;}
.before-bg-900:before{
    content: "";
    background-color: var(--dblue);
    height: 900px;
    width: 100%;
    position: absolute;
    top: 0;
}
.blog-single .feature{
    max-height: 700px;
    object-fit: cover;
}
.share-btns li{
    display: inline-block;
    margin-right: 10px;
    font-family: 'OpenSans-Bold';
}
.share-btns a{
    height: 30px;
    width: 30px;
    line-height: 28px;
    color: var(--dblue);
    border: 1px solid rgb(0, 0, 0,0.1);
    text-align: center;
    font-size: 14px;
}
.share-btns a:hover{
    color: var(--white);
    background-color: var(--dblue);
    border-color: var(--dblue);
}
.blog-box img{
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    object-position: center;
	height:250px;
}
.blog-page .blog-box img{
	height:350px;
}
.related-posts-sider .blog-box{
    height: auto;
    padding-bottom: 0px;
    margin: 5px 0px;
}
.contact-form{
    background-color: #031a3c;
    padding: 80px 80px;
}
.contact-page .map{
   position: absolute;
   left: 50%;
   transform: translate(-50%,0);
   -webkit-transform: translate(-50%,0);
   top: 100px;
}
.technical-supourt h2{
    color: var(--dblue);
}
.technical-supourt .cat{
    color: rgb(3 26 60 / 50%);
}
.c-list a{
    color: var(--dblue);
    font-family: 'OpenSans-SemiBold';
    font-size: 20px;
    padding: 5px;
}
.c-list a:hover{
    color: var(--blue);
}
.c-list li:not(:first-child){
    /*border-top: 1px solid rgb(3 26 60 / 10%);*/
}
.about-page{
    padding-top: 300px;
}
.video-700{
    height: 700px;
}
.center-play .circls{
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    right: inherit;
}
.our-values .icon-box{
    max-width: 380px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.our-values::before{
    content: "";
    background-color: var(--dblue);
    width: 100%;
    height: calc(100% - 300px);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}
.tpartner-box{
    height: calc(100% - 30px);
    padding-bottom: 100px;
    position:relative;
}
.tpartner-box img{
    margin-bottom: 50px;
}
.tpartner-box .btn-bb{
    position:absolute;
    left: 0;
    bottom: 0;
}
.spartner-box{
    border: 1px solid #e7e7e7;
    border-radius: 2px;
    height: calc(100% - 30px);
    position:relative;
    padding-bottom: 110px;
}
.spartner-box .img{
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #e7e7e7;
}
.spartner-box .text{
    padding: 25px 40px 0px 40px;
}
.spartner-box p{
    font-size: 16px;
    line-height: 26px;
}
.spartner-box .btn-bb{
    position:absolute;
    bottom: 30px;
}
.video-holder {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}
.home-hero .container{
    position: relative;
    z-index: 2;
}
.Yplaybtn i + i,.Yplaybtn.active i{
    display: none;
}
.Yplaybtn.active i + i{
    display: inline-block;
}
.Yplaybtn:active,.Yplaybtn:focus{
    color: #fff !important;
}
.video-player .circls{
    z-index: 999;
}
.video-player .max-1100{
    /* position: relative; */
    /* z-index: 2; */
}
.video-holder{
    opacity: 0;
}
.video-holder.active,#home-slider .video-holder{
    opacity: 1;
}
.megamenu{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - 150px);
    background-color: rgb(0 0 0 / 70%)
}
.megamenu .holder-menu{
    padding: 50px 0px;
}
.megamenu .bg-white{
    color: #121212;
}
.product-holder{
    text-align: center;
}
.product-holder .img{
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.product-holder .img img{
    max-width: 180px;
    max-height: 124px;
    object-fit: contain;
    object-position: center;
}
.product-holder .img:hover img{
    transform: scale(1.08);
}
.product-holder h6{
    font-size: 18px;
    margin-bottom: 5px;
}
.product-holder .cat{
    font-family: 'OpenSans-SemiBold';
    display: block;
    font-size: 14px;
    /*color: rgb(18 18 18 / 50%);*/
}
.product-holder ul{
    margin-top: 20px;
    margin-bottom: 20px;
}
.product-holder li{
    margin: 0;
    margin-bottom: 10px;
}
.product-holder li a{
    font-size: 16px;
    color: #121212;
    padding: 0;
}
.product-holder li a:hover{
    color: var(--blue);
}
.btn-view:after,.btn-view:before{
    display: none;
}
.btn-view{
    font-family: 'OpenSans-SemiBold';
    border-bottom: solid 1px #1b1b1b;
    padding: 8px 0px;
    font-size: 14px;
    color: #1b1b1b !important;
}
.btn-view i{
    margin-left: 5px;
    font-size: 20px;
    vertical-align: middle;
}
.btn-view:hover{
    background-color: var(--blue);
    color: var(--white) !important;
    padding: 8px 15px;
    border-color: var(--blue);
}
.sub-menu.bg-white{
    /*border-top: 20px solid var(--black);*/
}
.bg-fixed, .pers section{
    background-attachment: fixed;
    /*background-size: 100% 100%;*/
}
.vertical-slider .slick-dots{
    width: fit-content;
    left: auto;
    right: -50px;
    top: 50%;
   transform: translate(0, -50%);
   -webkit-transform: translate(0, -50%);
   bottom: auto;
}
.vertical-slider .slick-dots li{
    display: block;
    margin: 12px 0px;
}
.ion-popup{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color:var(--black-o);
    z-index: 999;
    display: none;
}
.ion-popup .body{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ion-popup .video{
    height: 80vh;
    width: 80vw;
    position: relative;
}
._close{
    height: 60px;
    line-height: 60px;
    width: 60px;
    text-align: center;
    color: var(--black);
    background-color: var(--white);
    font-size: 30px;
}
.ion-popup ._close{
    position: absolute;
    right: 20px;
    top: 20px;
}
.accpatance label{
    position: relative;
    padding-left: 50px;
    vertical-align: middle;
    padding-top: 7px;
}
.accpatance label input{position: absolute;left: 0;}
.downloads-files .icon-list li{padding-left: 0;}
/*  */
.code-slider img{max-width: 70%;}
.code-slider .center img{max-width: 100%;}
.code-slider .item{
    position: absolute;
    cursor: pointer;
}
.code-slider .active{
    animation: scale-animations 0.5s;
    -webkit-animation: scale-animations 0.5s;
}
.code-slider .center{animation: none;}
.code-slider .item:nth-child(1){
    top: 10%;
    left: 15%;
}
.code-slider .item:nth-child(2){
    bottom: 10%;
    left: 22%;
}
.code-slider .item:nth-child(3){
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.code-slider .item:nth-child(4){
    top: 10%;
    right: 25%;
}
.code-slider .item:nth-child(5){
    right: 15%;
}
.code-slider .item:nth-child(6){
    bottom: 10%;
    right: 25%;
}
.dock-box{
    position: relative;
    display: flex;
    max-width: 680px;
    width: 100%;
    align-items: center;
    padding-top: 100px;
}
.dock-box h2{
    position: absolute;
    top: 0;
    left: 70px;
}
.dock-box img{
    max-width: 300px;
    width: 100%;
}
.dock-box p{padding:0px 30px;}

.search-form{
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--black);
    padding: 20px;
    min-width: 300px;
    display: none;
}
.search-form input{
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--white);
    height: 50px;
    background-color: transparent;
    color: var(--white);
    font-size: 14px;
}
.search-form button{
    height: 40px;
    width: 40px;
    border: 0px;
    background-color: var(--blue);
    color: var(--white);
    position: absolute;
    right: 20px;
    bottom: 25px;
}
/**/
.mobile-menu{
    padding: 37px 30px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    z-index: 9999;
    background-color: var(--black);
    display: none;
}
.mobile-menu .head{
    display: flex;
    align-items: center;
    border-bottom: solid 1px rgb(255 255 255 / 10%);
    padding-bottom: 30px;
}
.mobile-menu a{
    color: var(--white);
}
.mobile-menu .search-form{
    position: relative;
    left: auto;
    right: auto;
    padding: 10px;
    min-width: 100%;
    margin-bottom: 10px;
}
.mobile-menu .closed{
    font-size: 40px;
}
.mobile-menu .search-form button{
    bottom: 18px;
}
.mobile-menu li a{
    font-size: 18px;
    padding: 30px 0px;
    border-bottom: solid 1px rgb(255 255 255 / 10%);
    width: 100%;
    position: relative;
}
.mobile-menu li a i{
    position: absolute;
    right: 0;
    height: 100%;
    width: 40px;
}
.mobile-menu .sub-menu{
    display: none;
}
.mobile-menu .p-box{
    display: block;
    width: 180px;
    text-align: center;
    margin-right: 60px;
    font-size: 18px;
    border-bottom: 0px;
    font-family: 'OpenSans-Bold';
}
.mobile-menu .p-box img{
    max-width: 170px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 30px;
    max-height: 100px;
    object-fit: contain;
    object-position: center;
}
.product-menu-slider{
    padding-bottom: 50px;
}
.m-link-box{
    display: block;
    width: 100%;
    padding-right: 30px;
    color: var(--white);
}
.m-link-box h6{
    font-size: 24px;
    line-height: 34px;
    margin-bottom: 10px;
    color: var(--white);
}
.m-link-box p{
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 0px;
}
#loadmore i{display: none;}
.search-box .img{
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.search-box .img img{
    max-height: 300px;
    object-fit: contain;
    object-position: center;
}
.default-page-wrapper{
    padding: 50px;
}
.theme-default-page{
    padding-top: 250px;
}
.theme-default-page:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 600px;
    background-color: var(--dblue);
}
.theme-default-page ._text{
    padding: 80px 50px;
    background-color: var(--white);
}
.page-item.active .page-link,.page-link:hover{
    border-color: var(--blue);
    background-color: var(--blue);
    color: var(--white);
}
.page-link{
    color: var(--blue);
}
.blog-single .bg-white{
    padding: 50px;
}
.style-list ul{
    margin-bottom: 20px;
}
.style-list ul li{
    position: relative;
    padding-left: 15px;
    margin-bottom: 5px;
}
.style-list ul li:before{
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    height: 5px;
    width: 5px;
    border-radius: 50%;
    background-color: var(--blue);
}
.wpcf7-not-valid-tip{
    text-align: left;
}
.partner-box img{
    max-width: 90%;
    filter: grayscale(1);
    max-height: 85%;
    object-fit: contain;
}
.partner-box:hover img{
    filter: grayscale(0);
}
/**/
.hero-450{
    height: 450px;
    display: flex;
    align-items: flex-end;
    background-blend-mode: overlay;
    background-color: rgb(0, 0, 0,0.5);
}
@media(max-width:991px){
    .hero-450{
        height: auto;
        padding-top: 150px;
        padding-bottom: 50px !important;
        display: block;
    }
}
.product-box li,.tt-partners li{
    position: relative;
    padding: 10px 0px 10px 40px;
    border-top: 1px solid #e7e7e7;
    font-size: 16px;
}
.product-box li:before,.tt-partners li:before{
    content: "";
    height: 15px;
    width: 15px;
    background-size: contain;
    background-image: url(../images/plus.png);
    position: absolute;
    left: 0;
}

.product-box li,.tt-mainpage li{
    position: relative;
    padding: 10px 0px 10px 40px;
    /* border-top: 1px solid #e7e7e7; */
    font-size: 16px;
}
.product-box li:before,.tt-mainpage li:before{
    content: "";
    height: 15px;
    width: 15px;
    position: absolute;
    left: 0;
}

.online-rr img{
    width: 100%;
    height: 300px;
    object-fit: cover;
}
.tt-partners ol{
    list-style: none;

}
.mega-sub-links li{
    padding-left: 0px;
    margin-left: 0px;
}

.mega-sub-links li a{
    color: var(--white);
    font-family: 'OpenSans-Bold';
    font-size: 16px;
    position: relative;
    padding-left: 30px;
}
.mega-sub-links li a:before{
    content: "";
    height: 15px;
    width: 15px;
    background-size: contain;
    background-image: url(../images/plus.png);
    position: absolute;
    left: 0;
}
.theme-form input[type=checkbox],.theme-form input[type=radio]{
    height: inherit;
    width: inherit;
}
.salesforce_w2l_lead  input[type=submit]{
    padding: 15px 35px;
    background-color: var(--blue);
    color: var(--white);
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border: 0px;
}
.salesforce_w2l_lead  .selectric-wrapper{
    max-width: 90%;
}
.carrer-box{
	height: calc(100% - 30px);
    position: relative;
    padding-bottom: 115px;
}
.carrer-box .btn-outline{
	position:absolute;
	left: 50%;
   transform: translate(-50%,0);
   -webkit-transform: translate(-50%,0);
	bottom:30px;
}
.sf_field{
    margin-bottom: 25px;
}
.salesforce_w2l_lead .w2lsubmit,.salesforce_w2l_lead .g-recaptcha{
    text-align: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
@media(min-width: 991px){
    .jobs-opening.c-padding{
        height: 80vh;
        display: flex;
        align-items: center;
    }
}
.our-work .arrows{
    background-color: var(--blue);
    border-color: var(--blue);
    height: 45px;
    line-height: 45px;
    width: 45px;
    text-align: center;
    color: var(--white);
}
.our-work .arrows._back{left: 20px;}
.our-work .arrows._next{right: 20px;}
/**/
.code-toggle .hide-item{
    display: none;
}
.view-all-services span + span,
.view-all-services.active span{display: none;}

.view-all-services.active span + span{display: inline-block;}
.view-all-services:focus,.view-all-services:active{
    color: var(--white);
}
.iframe-video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
@media(min-width: 1000px){
    .demo-videos h2{
        font-size: 30px !important;
        line-height: 40px;
    }
}
nav .product-holder a:after,nav .product-holder a:before {
	display:none;
}
.product-holder a{
	border:0px !important;
	border-bottom: none !important;
}
.product-holder a:hover{
	border-bottom:0px !important;
}
.sub-menu .container-fluid{
    border-top: 1px solid rgb(255 255 255 / 40%);
    /*border-bottom: 1px solid rgb(255 255 255 / 40%);*/
    padding-top: 20px;
    padding-bottom: 20px;
}
.code-toggle-images{
    position: sticky;
    top: 90px;
    right: 0;
    left: 0;
}
.industries .col-lg-6{
    position: relative;
}
/*  */
.blog-slider .slick-track{
    display: flex !important;
}
.blog-slider  .slick-slide{
    height: inherit !important;
	padding: 6px !important;
}
.blog-slider .blog-box{
	height:100%;
}

details {
  margin: 5px;
  font-size: 18px;
}
details > * {
  padding: .75rem;
}
details > div {
  background: #595959;
  border-radius: 0 0 5px 5px;
}
summary {
  border-radius: 5px;
  font-size: 20px;
  font-family: sans-serif;
  font-weight: bold;
  color: #fff;
  background: #373737;
  cursor: pointer;
}
details[open] summary {
  border-radius: 5px 5px 0 0;
}