@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import"vendor/bootstrap.min.css";
@import "component/header.css";
@import "component/footer.css";
/* @import "../component/footer.css"; */

@import"vendor/owl.carousel.min.css";
@import"vendor/animate.css";
@import"../fonts/font-awesome.min.css";
@import"vendor/jquery.mCustomScrollbar.min.css";
@import"vendor/fancybox.css";



    :root{
        --theme-color:#17BECF;
        --bg-color:#E8FCFF;
        --theme-font:"Be Vietnam Pro", sans-serif;
        --text-color:#5E5E5E
    }


/* common css start */
body{font-size: 1.125rem; line-height: 26px; color: var(--text-color); font-family:var(--theme-font) ; font-weight: 300; }
 a { transition: ease-in-out all 0.5s; -moz-transition: ease-in-out all 0.5s; -ms-transition: ease-in-out all 0.5s; -o-transition: ease-in-out all 0.5s; -webkit-transition: ease-in-out all 0.5s;    text-decoration: none; }
 ul{padding-left: 30px; margin-bottom: 20px;}
  ul.check-icon{list-style: none; padding-left: 0; margin-bottom: 21px;}
     ul.check-icon li:not(:last-of-type){margin-bottom: 15px;}
   ul.check-icon li{position: relative; padding-left: 25px;}
 ul.check-icon li:before{content: ""; background: url(../images/check-icon.svg) no-repeat; background-size: contain; height: 16px; width: 16px; position: absolute; left: 0; top: 5px;}
 p a, li a{color: var(--theme-color);}
svg path{transition: .5s ease;}

 a, button { transition: ease-in-out all 0.5s;-moz-transition: ease-in-out all 0.5s; -ms-transition: ease-in-out all 0.5s; -o-transition: ease-in-out all 0.5s; -webkit-transition: ease-in-out all 0.5s;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
 img{max-width: 100%;}
 p{margin-bottom: 30px;}
 p:last-child{margin-bottom: 0px;}

 html{font-size: 100%;}
 .remove-dot{margin-bottom: 0 ; padding-left: 0 ;}
 .remove-dot li{list-style: none;}
 .title-one{font-size: 3.2rem; font-weight: 600; line-height: 1.1; margin-bottom: 10px; color: #000;}
 .title-two{font-size: 2.5rem; font-weight: 600; line-height: 1.1; margin-bottom: 20px; color: #000;}
  .title-two span{color: var(--theme-color);}


 .sec-title p{margin-top: 18px;}
 .sec-title h2{margin-bottom: 0px;}
 .sec-title {max-width: 1132px; margin: 0 auto 55px; text-align: center;}
 .sec-title p a:hover{text-decoration: underline;}



 /* bootstrap css */
 .row>*{padding-left: 15px; padding-right: 15px;}
 .row{margin-left: -15px; margin-right: -15px;}
 .container,.container-fluid{padding-left: 15px; padding-right: 15px;}

 .no-gutters{margin-left: 0; margin-right: 0;}
 .no-gutters>[class*=col-]{padding-left: 0; padding-right: 0;}
 .no-gutters>.col{padding-left: 0; padding-right: 0;}
 

 .custom-container {max-width: 1654px; padding-left: 15px; padding-right: 15px; margin: 0 auto;}
 .form-control:focus{box-shadow: none;}
 /* bootstrap css end */

 .mt-40{margin-top: 40px;}

 .mtb-150{margin-top: 150px; margin-bottom: 150px;}
 .mt-150{margin-top: 150px; }
 .mb-150{ margin-bottom: 150px;}

.ptb-150{padding-top: 150px; padding-bottom: 150px;}
 .pt-150{padding-top: 150px; }
 .pb-150{ padding-bottom: 150px;}


.ptb-100{padding-top: 100px; padding-bottom: 100px;}
.pt-100{padding-top: 100px; }
.pb-100{ padding-bottom: 100px;}



input.common-btn:hover{background-color: #fff; color: #000; border-color: #fff;background-image: url(../images/arrow-btn-two.svg) }
input.common-btn{border: 0; box-shadow: none;background-image: url(../images/arrow-btn.svg) ; transition: .5s ease; background-color: #000; background-repeat: no-repeat; background-size: auto; background-position: center right 27px; padding: 12px 48px 12px 20px; border: 1px solid #000;}
.common-btn svg{margin-left: 10px; transition: .5s ease;}
.common-btn:hover{background-color:#000;border: 1px solid #000; }
.common-btn {border-radius: 10px; width: fit-content; background-color: var(--theme-color);border: 1px solid var(--theme-color);  transition: .5s ease; font-size: 16px;padding: 12px 20px; color: #fff; display: flex; align-items: center; font-weight: 600;}
.common-btn.border-btn {border: 1px solid var(--theme-color); background-color: transparent;}
.common-btn.border-btn:hover { background-color:var(--theme-color);border: 1px solid var(--theme-color) !important;}
.common-btn-two { color: #17BECF; font-weight: 600; font-size: 16px;}
.common-btn-two  svg { margin-left: 20px; vertical-align: middle;}
.common-btn-two:hover { color: #000;}
.common-btn-two:hover svg path{fill: #000; stroke: #000;}
.common-btn:hover svg {transform: rotate(45deg);}
.bg-overly{position:fixed; top: 0; left: 0; visibility: hidden; opacity: 0; height: 100vh; width: 100%; background-color: #000000b0;z-index: 0; z-index: 1; }
.small-btn{padding: 11px 20px;}
input:focus{box-shadow: none !important;}
.wpcf7 form .wpcf7-response-output{display: none;}

.wpcf7 form.sent .wpcf7-response-output {
    background: var(--theme-color);
    display: block;
    color: #fff;
    border: none;
    padding: 5px;
}

.owl-dots{position: absolute; bottom: 33px; left: 0; right: 0; margin: 0 auto; display: flex; justify-content: center;}
.owl-dots button{height: 16px; width: 16px; background-color: var(--theme-color) !important; border: 4px solid var(--theme-color) !important; margin: 5px; border-radius: 100%;}
.owl-dots button.active{ background-color: #fff !important; border: 4px solid var(--theme-color) !important;  border-radius: 100%;}
/* section shape start  */
.section-shape{position: relative;z-index: 1;}
.section-shape:before{background: url(../images/section-shape.svg) no-repeat;z-index: -1; background-position: right bottom 23px !important;  background-size: auto !important; height: 100%; width: 100%; position: absolute; left: 0; top: 0; content: "";}
/* section shape end */
 
.owl-carousel .owl-stage{display: flex;}
.item{height: 100%;}
.item img{height: 100%;}


/* owl slider  */


 .owl-nav button{opacity: .6; height: 50px; width: 50px; background-color: var(--theme-color) !important; position: absolute; top: 50%; transform: translateY(-50%); left: -20px; color: #fff !important; border-radius: 100%; display: flex; justify-content: center; align-items: center;}
 .owl-nav button:hover{background-color: #000 !important;  opacity: 1;}
 .owl-nav button.owl-next {right: -20px; left: initial;}
  .owl-nav button span{font-size: 32px;margin-top: -3px;}
 /* owl slider  */
/* popup video start  */
 .btn-close { background-color: #ffffff !important;  opacity: 1 !important; padding: 10px; border-radius: 100%; transition: 1s ease;    right: -10px !important; top: -10px !important;}
.btn-close:hover{transform: rotate(360deg);}
#modalVideo{border-radius: 10px; margin-bottom: -8px;}
.modal-body{padding: 8px !important; background-color: #fff; border-radius: 10px;}
.modal-content { width: calc(100% - 20px);margin: auto;}
.modal-backdrop{ pointer-events: none;
    user-select: none;}
/* popup video end  */

.ani-round{width: 28PX; height: 44PX; border: 1px solid var(--theme-color); border-radius: 40px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.ani-round .ani{transition: .5s ease; background-color:  transparent; height:6px; width: 1px; border-radius: 5px; margin: 2px 0;}
.ani-round  .ani.active{background-color: var(--theme-color);}
.hero-banner-scroll span{justify-content: center; align-items: center;}
.banner-scroll span{justify-content: center; align-items: center;}


.loader {
  width: 18px;
  margin-left: 5px;
  aspect-ratio: 1;
  display:grid;
  -webkit-mask: conic-gradient(from 15deg,#0000,#000);
  animation: l26 1s infinite steps(12);
}
.loader,
.loader:before,
.loader:after{
  background:
    radial-gradient(closest-side at 50% 12.5%,
     #fff 96%,#0000) 50% 0/20% 80% repeat-y,
    radial-gradient(closest-side at 12.5% 50%,
     #fff 96%,#0000) 0 50%/80% 20% repeat-x;
}
.loader:before,
.loader:after {
  content: "";
  grid-area: 1/1;
  transform: rotate(30deg);
}
.loader:after {
  transform: rotate(60deg);
}
 
@keyframes l26 {
  100% {transform:rotate(1turn)}
}

/* common css end  */

/* responsive css start  */

@media(min-width:1750px){
  .container{max-width: 1680px;}
}


@media(max-width:1749px) and (min-width:1350px){
    .container{max-width: 1300px;}
}
/* responsive css end  */


@media(min-width:1400px){
  .pb-150.our-sevice-section { padding-bottom: 130px;}
}

@media(max-width: 1399px){
/* common css start  */
.sec-title {margin: 0 auto 45px;}
 .mt-40{margin-top: 30px;}

 .mtb-150{margin-top:100px; margin-bottom:100px;}
 .mt-150{margin-top:100px; }
 .mb-150{ margin-bottom:100px;}

.ptb-150{padding-top:100px; padding-bottom:100px;}
 .pt-150{padding-top:100px; }
 .pb-150{ padding-bottom:100px;}


.ptb-100{padding-top: 80px; padding-bottom: 80px;}
.pt-100{padding-top: 80px; }
.pb-100{ padding-bottom: 80px;}
/* common css end */
}



@media(max-width: 1199px){
/* common css start  */
.sec-title {margin: 0 auto 30px;}
 .mt-40{margin-top: 30px;}

 .mtb-150{margin-top:50px; margin-bottom:50px;}
 .mt-150{margin-top:50px; }
 .mb-150{ margin-bottom:50px;}

.ptb-150{padding-top:50px; padding-bottom:50px;}
 .pt-150{padding-top:50px; }
 .pb-150{ padding-bottom:50px;}


.ptb-100{padding-top: 50px; padding-bottom: 50px;}
.pt-100{padding-top: 50px; }
.pb-100{ padding-bottom: 50px;}

.section-shape:before { background-size: 500px !important;}

.common-btn {padding: 9px 20px; font-size: 15px;}
html{font-size: 90%;}

.owl-nav button.owl-next {right: 8px;}
.owl-nav button{left: 8px;}
/* common css end */
}


@media(max-width: 991px){
/* common css start  */
.sec-title {margin: 0 auto 20px;}
 .mt-40{margin-top: 20px;}

 .mtb-150{margin-top:40px; margin-bottom:40px;}
 .mt-150{margin-top:40px; }
 .mb-150{ margin-bottom:40px;}

.ptb-150{padding-top:40px; padding-bottom:40px;}
 .pt-150{padding-top:40px; }
 .pb-150{ padding-bottom:40px;}


.ptb-100{padding-top: 40px; padding-bottom: 40px;}
.pt-100{padding-top: 40px; }
.pb-100{ padding-bottom: 40px;}

.section-shape:before { background-size: 400px !important;}

.common-btn {padding: 9px 20px;}
html{font-size: 85%;}
body{line-height: 24px;}

.title-two {font-size: 2.250rem;}
p {margin-bottom: 25px;}
.sec-title p { margin-top: 12px;}
.owl-dots { bottom: 20px;}

.owl-nav button {height: 42px; width: 42px;}
.owl-nav button svg {height: 16px; margin-top: -2px;}
/* common css end */
}


@media(max-width: 767px){

  /* common css start  */
 .mtb-150{margin-top:30px; margin-bottom:30px;}
 .mt-150{margin-top:30px; }
 .mb-150{ margin-bottom:30px;}

.ptb-150{padding-top:30px; padding-bottom:30px;}
 .pt-150{padding-top:30px; }
 .pb-150{ padding-bottom:30px;}

.ptb-100{padding-top: 30px; padding-bottom: 30px;}
.pt-100{padding-top: 30px; }
.pb-100{ padding-bottom: 30px;}

.section-shape:before { background-size: 350px !important;}

.common-btn {padding: 8px 18px;}
html{font-size: 80%;}
.common-btn{font-size: 14px;}
.common-btn svg { margin-left: 8px; height: 10px;}

p {margin-bottom: 20px;}
.sec-title p { margin-top: 10px;}
.owl-dots button {height: 14px; width: 14px; margin: 4px;}
.owl-dots {bottom: 15px;}
body{font-size: 15px;}

.sec-title {margin: 0 auto 16px;}
.title-two { margin-bottom: 12px; font-size: 2.050rem;}

.common-btn-two svg { margin-left: 12px; height: 11px;}
/* common css end */

}

@media(max-width: 575px){
  /* common css start  */
 .mtb-150{margin-top:25px; margin-bottom:25px;}
 .mt-150{margin-top:25px; }
 .mb-150{ margin-bottom:25px;}

.ptb-150{padding-top:25px; padding-bottom:25px;}
 .pt-150{padding-top:25px; }
 .pb-150{ padding-bottom:25px;}


.ptb-100{padding-top: 25px; padding-bottom: 25px;}
.pt-100{padding-top: 25px; }
.pb-100{ padding-bottom: 25px;}

.common-btn { padding: 7px 18px;}
html{font-size: 72%;}



/* common css end */
}




@media(max-width: 479px)
{



}