@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Ubuntu:400,500&display=swap');

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

:root{
    --dgreen:#16017e;
    --green:#16017e;
    --sky:#00a3d1;
    --white:#fff;
    --red:#16017e;
}
.justify-content-center{justify-content: center;}

body{font-size: 16px; font-family: 'Open Sans', sans-serif !important; color:#252525 !important;}

.header-top{margin-bottom:0}
.header-top a{color:var(--white);}
.header-top a.logo{margin:0 0; display:inline-block;}
.header-top a.reach{float:right; margin:50px 15px; position: relative; font-size: 18px;}

a .call{width: 20px; height: 20px; background:url(../images/call.png) center center no-repeat; float: left; margin-top:2px;}
.header-top a.reach:hover{color: var(--yellow); text-decoration:none;}

header{background:var(--dgreen) url(../img/mainbg.jpeg) no-repeat center center; background-size:100% 100%; position:relative; padding-bottom:60px;}
header::before{content:""; position: absolute; top: 0; left: 0; width: 100%; height:100%;         background-color: rgb(3 3 3 / 63%);}
section h2{font-size: 30px; font-weight:400; color:#545454; font-family: 'Ubuntu', sans-serif;}

.header-information{padding:50px 0 0; color:var(--white);}
.header-information p{font-size:20px;}
.header-information h2{font-weight:400; margin-bottom:15px; font-size:30px; font-family: 'Ubuntu', sans-serif;}
.header-information h2 strong{font-size:33px;font-weight:700;}
.header-information h4{font-size:22px; margin-bottom:30px; font-weight:700;}
.header-information h3{font-size:22px; text-decoration: underline; margin-top:101px;}
.header-information ul{list-style: none; margin-bottom:50px}
.header-information ul li{margin-bottom:12px; font-size:16px; position: relative; line-height:normal;}
.header-information ul li span{background-color: var(--green); font-weight: 700; display:inline-block; margin-right:5px; padding: 2px 5px;}

.thank-you-page-content{font-size:16px; font-family: 'Open Sans', sans-serif; font-weight:400;}
.thank-you-page-content .firstline,
.thank-you-page-content p{font-size:16px;}
.thank-you-page-content .firstline strong{font-family: 'Ubuntu', sans-serif; font-weight:700;}
.thank-you-page-content h2{margin-bottom:20px;}
.thank-you-page-content h2 a{text-decoration:none; font-family: 'Open Sans', sans-serif; color: #fff;}

.header-lp-forms{padding:25px 25px 5px; margin-left:20px; background:rgb(20 98 160); border-radius:15px; color:var(--white);  box-shadow:-22px 22px rgb(20 98 160 / 23%)}
.header-lp-forms .form-group{margin-bottom:15px}
.modal .header-lp-forms{box-shadow: none;margin-left: 0px;}
.header-lp-forms input,
.header-lp-forms select,
.header-lp-forms textarea,
.header-lp-forms input{border-radius:7px; border-color:transparent; height:50px; width: 100%; font-weight: 400; background-color:var(--white); color: #000; font-size: 15px;}
.header-lp-forms textarea{height:60px; resize: none;}
.header-lp-forms input.btn-danger{background-color:var(--dgreen); text-transform:uppercase; transition:400ms linear; color:var(--white); font-weight:600;}
.header-lp-forms input.btn-danger:hover{border-color: transparent; background-color: var(--sky); transition:400ms linear;}
.header-lp-forms h4{font-size:18px; font-weight:600; margin-bottom:25px;}
.header-lp-forms p{font-size:15px; margin-bottom:25px}
.header-lp-forms input::-webkit-input-placeholder{opacity: 1; color:#000;}
.header-lp-forms input::-moz-placeholder{opacity: 1; color:#000;}
.header-lp-forms textarea::-webkit-input-placeholder{opacity: 1; color:#000;}
.header-lp-forms textarea::-moz-placeholder{opacity: 1; color:#000;}
.highlights{color: var(--white); font-size:22px; margin-top: 40px; text-decoration: underline;}
.highlights a{color: var(--white)}
.highlights a:hover{color: var(--white)}
.highlights img{margin-right:10px;}

.additionals{background-color:#f1f1f1; padding:50px 0;}
.additionals .counter-box{width:100%;background-color:transparent; display:flex; justify-content:center; align-items:center; float:left;}
.additionals .counter-box .box{width:100%; text-align: center;}
.additionals .counter-box .icon-box{width:92px; height: 92px; border-radius: 50%; background-color: var(--green); display:flex; justify-content: center; align-items: center; margin:0 auto 25px;}
.additionals .counter,
.product-range-counter .counter{font-weight:700; color: var(--red); margin-top: 10px; margin-bottom: 0;}
.additionals .counter-box p{ padding:0 15px; margin-bottom: 0;}
.additionals h2{font-weight:400; margin-bottom:40px}
.additionals h2 strong{color:var(--yellow); display: block; font-weight:700;}
.f14{font-size:14px}
.pr-50{padding-right: 50px}
.light-gray{background-color:#f6f6f6;}
.common-area{padding:70px 0; background-color:var(--dgreen); background-size:100% 100%; background-position: center center; background-repeat: no-repeat}
.common-area.bg2{background-image:url(../images/bg2.jpg); text-align: center;}
.common-area.bg3{background-image:url(../images/bg3.jpg); }
.common-area.bg4{background-image:url(../images/bg4.jpg); }
.common-area.bg5{background-image:url(../images/bg5.jpg); }
.common-area h2 a{color:var(--white); transition: 400ms linear}
.common-area h2:hover a{text-decoration: none; color:var(--green); transition: 400ms linear}
.common-area h4{font-size:17px; color:var(--white); margin-bottom: 20px}
.btn-common{border-radius:7px; padding:15px 40px; display:inline-block; }
.common-area.bg3 .btn-common,
.common-area.bg4 .btn-common:hover,
.common-area.bg2 .btn-common:hover{background-color:var(--green); transition:400ms linear; color:var(--white);}
.common-area.bg3 .btn-common:hover,
.common-area.bg4 .btn-common,
.common-area.bg2 .btn-common{background-color:var(--red); text-decoration: none; color:var(--white);}
.common-area.bg5 .btn-common{border:2px solid #fff; color: #fff;  margin-left: 10px; transition:400ms linear;}
.common-area.bg5 .btn-common:hover{text-decoration: none; background-color:var(--red); border-color:var(--red); transition:400ms linear;}
.common-area.bg5 p,
.common-area.bg2 p{font-size:18px; color: #fff;}



.information{padding:50px 0; background:var(--white); position: relative;}
.information h2{color:#16017e; font-family: 'Ubuntu', sans-serif;}
.information.gray h2{color:#525252;}
.information article{padding-top:40px;}
.information.infode article{padding:20px 0 0}
.information article ul{list-style:none; margin-top:10px;}
.information article ul li{margin-bottom:10px; font-size:16px; font-weight:600;}
.information article ul li p{font-weight:400; margin:5px 0;}
.information article ul li span{display:inline-block; position:relative; padding-left:25px}
.information article ul li span::before{width:15px; height:15px; content:''; background:var(--dgreen) url(../images/tick.png) center 2px no-repeat; position: absolute; top:6px; left:0px;}
.information .yt-btn{margin-top:30px; float: right;}
.information .yt-btn a{position: relative; cursor: pointer; display: block;}
.information .yt-btn a img{max-width: 100%;}
.information .yt-btn a::after{position:absolute; left: 50%; top:50%; transition:400ms ease-in-out; transform: translate(-50%, -50%); content: ""; width:60px; height:42px; background:url(../images/yt-icon.png) no-repeat; opacity: 1;}
.information .yt-btn a::before{position: absolute; top:0; left: 0; content:""; width: 100%; transition:400ms ease-in-out; height: 100%; background-color: rgba(0, 0, 0, 0.6); opacity: 0;}
.information .yt-btn a:hover::before{opacity: 1; transition:400ms ease-in-out;}
.information .yt-btn a:hover::after{opacity: .8; transition:400ms ease-in-out;}
.information.greenish{background-color:#16017e; color:#fff;}
.information.greenish h2{color:#fff;}
/*article.section-article{padding:0; }*/
article.section-article h2{margin-bottom: 30px; color:#313131; text-align: center;}
article.section-article ul{display: flex; flex-wrap:wrap; justify-content: center; margin-left: -10px; margin-right:-10px; margin-bottom:0;}
article.section-article ul li{width:50%; padding:5px; margin-bottom: 0;}


article.section-article ul li div {
  background-color: #ffffff;
  min-height: 88px;
  color: #000000;
  text-align: center;
  padding: 5px;
  display: flex
;
  justify-content: center;
  align-items: center;
}
article.section-article .common-area{background-color: transparent; padding:40px 0 10px}

.parameters-table{width:100%; margin-top:20px;}
.parameters-table th,
.parameters-table td{width:25%; padding:15px; text-align: center;}
.parameters-table .t-title{padding: 15px; background:#16017e; color: #fff; border-radius: 10px; height: 100%;}
.parameters-table .t-body{padding: 15px; border:2px solid #ccc; position: relative; background-color:#fff;}
.parameters-table .t-body::before{content:""; position:absolute; width:3px; height:30px; top:-32px; left:0; right:0; margin: auto; background-color:#ccc;}

.colStyle{padding:30px 30px; border:2px solid #16017e;}
.colStyle.green{background-color:#16017e; border-color: transparent; color:#fff;}
.colStyle.green h2{color:#fff;}
.colStyle img{max-width: 100%;}

.certification h2{color: #313131; margin-bottom: 40px;}
.certification img{max-width: 100%;}

.ulv-details{padding:25px 0 20px; border-bottom:1px solid #16017e; overflow:hidden;}
.ulv-details:last-of-type{border-bottom:none; padding-bottom: 0;}
.ulv-details .img-box{float:left; width:33.33%; padding:15px; text-align:center;}
.ulv-details .detail-text{float: left; width:66.66%; padding:15px;}
.ulv-details:nth-child(odd) .img-box{float: right;}
.ulv-details h3{font-size:24px; color:#16017e; margin-bottom:15px;}
.ulv-details h4{font-size:18px; font-weight:600; margin-bottom:10px;}
.ulv-details ul{padding-left:20px; margin-bottom:20px;}

#videoModal iframe,
#videoModal2 iframe{height:400px; width: 100%; margin: 0; border: 10px solid #1d0102;}
#videoModal.modal,
#videoModal2.modal{top: 50%; transform:translateY(-50%); height: 440px;}
#videoModal .modal-content,
#videoModal2 .modal-content{background-color: transparent; border-radius: 0; border: none;}
#videoModal.modal .modal-body,
#videoModal2.modal .modal-body{padding:10px;}
#videoModal.modal .modal-body button.close,
#videoModal2.modal .modal-body button.close{position: absolute; right:0px; top:-15px; font-size:50px; color:var(--yellow);}
.modal-backdrop.show{opacity:0.8;}

.single-page{padding:50px 0;}
.single-page h2{font-size:26px;}
.single-page h4{font-size:18px;}
.single-page .price{font-size:20px; font-weight:600; padding:12px 0; margin: 0; margin-bottom:12px;}
.single-page .spacification{border-top:1px solid #6bb71b; padding:15px 0;}
.single-page .spacification.ylw{padding: 15px; background: #e6d504; margin-bottom: 30px;}
.single-page .spacification.ylw h4{color:#000; font-weight: 700;}
.single-page .spacification p{display:flex; flex-wrap:wrap; margin-left: -5px; margin-right:-5px; margin-bottom: 0;}
.single-page .spacification p span{display:block; background:rgba(0, 0, 0, 0.4); padding:5px; margin:5px; font-size: 13px;}

.technical-spacification table{width:100%;}
.technical-spacification h3{margin-bottom:15px; padding:6px 0;}
.technical-spacification table th{border:1px solid #3f7504; background-color: #16017e;  padding:6px 0; text-align: center; color:#fff;}
.technical-spacification table tr{background-color:#fff;}
.technical-spacification table tr:nth-child(odd){background-color:#f0f0f0;}
.technical-spacification table tr td{border:1px solid #3f7504; padding:6px 0; text-align: center;}
.border-style{border:1px solid #16017e; padding:15px; border-top:none;}

footer{background-color:#102d35; padding:35px 0 20px; text-align: center; font-size:13px; color:#dddada;}
footer a{color:#dddada; margin: 0 10px;}
footer a:hover{color:var(--green);}

.subtitutes{text-align: center;}
.subtitutes .img-box{padding:0; border-bottom:1px solid #ccc; height:220px; position: relative; margin:15px 0 0;}
.subtitutes .img-box h3{font-size:18px;}
.subtitutes .img-box img{max-width:42%; margin-bottom:20px;}
.subtitutes .img-box::after{position: absolute; content:""; height:96%; width:1px; background-color:#ccc; top:0; right: -15px;}
.subtitutes .col-6:nth-child(even) .img-box::after{display:none;}
.subtitutes .col-6:nth-child(3) .img-box,
.subtitutes .col-6:nth-child(4) .img-box{border-bottom:none;}

.single-product-carousel .owl-dots{display: flex; justify-content: center;}
.single-product-carousel .owl-dots button{width:12px; height:12px; outline: none; background-color:#ccc; margin:0 2px; border-radius:50%;} 
.single-product-carousel .owl-dots button.active{background-color:#16017e;}

 .img-box img{max-width:100%;}
.form-modal .modal-content{background-color: transparent;}
.form-modal .modal-content .close{position: absolute; right: -6px; top: -6px; width: 36px; height: 36px; background: #000; border-radius: 50%; opacity: 1; color: #fff;}
.mobile-activity{display: none;}

@media screen and (max-width:767px){
    header{background:var(--sky) url(../images/mb01.jpg) no-repeat; background-size: 100% 100%; padding-bottom: 40px;}
    .header-top {text-align: center;}
    .header-top a.logo img{width:150px;}
    .header-top a.reach{margin:10px 0; font-size: 16px; display: inline-block; float: none;}
    .header-top a.reach::after{display: none;}
    .header-information{padding:30px 0;}
    .header-information h2{font-size:26px}
    .header-information h2 strong{font-size:32px;}
    .header-information h4{font-size:18px; margin-bottom: 20px;}
    .header-information h3{font-size:18px; margin-top: 0;}
    .header-information ul{margin-bottom: 30px;}
    .header-information ul li,
    .information article ul li{margin-bottom:5px; padding-left:0; font-size:13px;}
    .header-information ul li::before,
    .information article ul li::before{width: 8px; height: 8px; top:8px}
    .header-lp-forms{padding:15px; box-shadow: none; margin-left: 0;}
    .header-lp-forms p{font-size:13px}
    .highlights{font-size: 15px; margin-top: 20px;}
    .additionals,
    .information,
    .testimonials,
    .product-range,
    .common-section,
    .common-area{padding:40px 0;}
    .pr-50{padding-right:15px;}
    .common-area.bg2{text-align: center;}
    .common-area h4{font-size:18px;}
    .additionals h2{font-size:26px; margin-bottom:15px;}
    .additionals .counter-box{height:auto;}
    .additionals .counter-box .box{margin:15px 0;}
    .additionals .counter-box .icon-box{width:72px; height:72px; margin: 0 auto 10px;}
    .additionals .counter{font-size:17px; }
    .additionals .counter-box p{font-size:14px; padding:0;}
    .additionals h2{font-size:36px; text-align: center;}
    .subtitutes .img-box img{max-width:72%;}
    .colStyle{padding:20px 15px;}
    .technical-spacification{text-align: center;}
    .btn-common{padding:10px 20px;}
    section h2,.certification h2{font-size:26px;}
    section h2 br,
    .header-information h2 br{display: none;}
    .information article{padding: 0;}
    .information article ul{padding: 0;}
    .information .yt-btn{margin-top:30px; width:100%;}
    .information .yt-btn a img{max-width: 100%;}
    .information .yt-btn a{box-shadow: none; text-align: center;}
    .business-box{width:100%; display: block;}
    .business-box .box{width:50%;}
    .certify img{width:19%;}
    .common-section h2,
    .product-range h2, 
    .testimonials h2{margin-bottom: 30px}
    .pro-box{ margin-bottom: 15px;}
    .pro-box h4{text-align: center; font-size: 13px; padding: 10px 0;}
    #clients .owl-nav,
    #clients .owl-dots{display: none;}
    .testimonials .owl-item .item{width: 100%; margin: 10px auto; padding:20px; font-size:14px; box-shadow: none; min-height:400px}
    footer{margin-bottom: 0; padding:20px 0 60px;}
    footer a{margin: 0 6px;}
    .img-box img{max-width:100%;}
    .features .img-box img{border:none}
    .btn-danger{margin-top: 15px;}
    .ulv-details .img-box,.ulv-details .detail-text{width: 100%; padding:15px 0;}
    article.section-article ul li{padding:5px; margin:0;}
    .pd-0{padding:0;}
    .pt0{padding-top:0;}

    .mobile-activity{width: 100%; display: block; position: fixed; left: 0; bottom: 0; z-index: 3;}
    .mobile-activity a{width: 50%; float: left; padding:10px;  display: flex; justify-content: center; font-size:14px; font-weight:600; letter-spacing: 1px; cursor:pointer; color: var(--white); background-color:var(--sky); text-transform:uppercase;}
    .mobile-activity a:first-child{background-color:#0b639f;}
    .mobile-activity a .env{margin-top:0}
    .mobile-activity a .call{background-position: left center; margin-top:1px}
    .benefits .owl-item .item .benefits-slide{display: block;}
    .benefits .owl-item .item{width:100%;}
    .benefits .owl-item .item .benefits-slide .content-box{float: left; padding: 30px 15px; height:410px; overflow-y: auto;}
    .benefits .owl-item .item .benefits-slide .img-box {display: none;}
    .subtitutes .img-box h3{font-size:15px;}
    .parameters-table th,
    .parameters-table td{padding:10px 2px; font-size: 13px;}
    .parameters-table .t-title,
    .parameters-table .t-body{padding:3px; display:flex; flex-wrap:wrap; height: 90px; justify-content: center; align-items: center;}
    .parameters-table .t-body{height:74px;}
    .parameters-table .t-body::before{height: 20px; top:-22px;}
}

/*Animation Bounce*/
@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%, 43%{
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }
}

@keyframes bounce {
  from, 20%, 53%, 80%, to{
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }
}
.btnBounce{
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}
.btnBounce:hover{
    -webkit-animation-duration:0s;
      animation-duration:0s;
}

@media (max-width:767px) {
    .hidden-xs {
        display: none!important
    }
}

@media (min-width:768px) and (max-width:991px) {
    .hidden-sm {
        display: none!important
    }
}

@media (min-width:992px) and (max-width:1199px) {
    .hidden-md {
        display: none!important
    }
}

@media (min-width:1200px) {
    .hidden-lg {
        display: none!important
    }
}


:root {
  --animation-speed: 40s;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-1750px); } /* Direct value used */
}

.slider {
  height: 150px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: auto;
}

.slide-track {
  animation: scroll var(--animation-speed) linear infinite;
  display: flex;
  width: 3500px; /* calc(250px * 14) replaced */
}

.slide {
  height: 100px;
  width: 250px;
}