/*@font-face {

    font-family:"ff-utility-web-pro";

    src:url("https://use.typekit.net/af/cabdcf/0000000000000000774ee6e4/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"),url("https://use.typekit.net/af/cabdcf/0000000000000000774ee6e4/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff"),url("https://use.typekit.net/af/cabdcf/0000000000000000774ee6e4/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("opentype");

    font-display:auto;font-style:normal;font-weight:300;font-stretch:normal;

    }*/

@font-face {
  font-family: "ff-utility-web-pro";
  src: url("https://use.typekit.net/af/cabdcf/0000000000000000774ee6e4/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3")
      format("woff2"),
    url("https://use.typekit.net/af/cabdcf/0000000000000000774ee6e4/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3")
      format("woff"),
    url("https://use.typekit.net/af/cabdcf/0000000000000000774ee6e4/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3")
      format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 300;
  font-stretch: normal;
}
    html {

        scroll-behavior: smooth;

      }

body{

    font-family: 'ff-utility-web-pro', sans-serif;

    color: #fff;

    

}

.main-screen{

    background: #023753;

    background: linear-gradient(180deg, rgba(2, 55, 83, 1) 0%, rgba(2, 6, 33, 1) 100%);

    z-index: 9;

    position: relative;

}

.container-fluid{

    overflow: hidden;

}

.bg-theme{

    background: #023753;

    background: linear-gradient(180deg, rgba(2, 55, 83, 1) 0%, rgba(2, 6, 33, 1) 100%);

}

.bg-primary{

    background: #000e29 !important;

}

.bg-img{

    background: url('images/theme-bg.png');

    background-size: cover;

    background-repeat: no-repeat;

}

a{

    color: #fff !important;

    text-decoration: none;

}

.db-btn-f{

    position: fixed;

    bottom: 20px;

    right: 20px;

    z-index: 15;



}



.navbar-expand-lg .navbar-nav .nav-link{

    padding: 10px 22px;

}

.navbar {

    position: absolute;

    top: 0;

    left: 50%;

    transform: translate(-50%, 0);

    width: 100%;

    z-index: 3;

}

.download-btn{

    background: #004AD9;

    border-radius: 30px;

    padding: 10px 35px !important;

}

.db-btn{

    float: right;

}



.navbar-brand img{

    width: 110px;

}

.hero{

    width: 100%;

    min-height: 100vh;

   

    overflow: hidden;

    top: 0;

    left: 0;

    position: relative;

    z-index: 1;

}

.hero-video{

    width: 100%;

    position: fixed;

    z-index: -1;

    object-fit: cover;

}

.hero-btn{

    position: fixed;

    bottom: 20px;

    left: 50%;

    transform: translate(-50%, 0);

}



.about-video{

    width: 100%;

    max-width: 350px;

    mix-blend-mode:screen;

    margin: auto;

}



.display-1{

    font-size: 44px;

}

.display-2{

    font-size: 30px;

}

.display-3{

    font-size: 20px;

}

.pure-score{

    position: relative;

    padding: 25px;

    padding-bottom: 0;

}

.score-video{

    width: 100%;

    mix-blend-mode: screen;



}

.video-wrap-c{

    width: 100%;

    border-radius: 50%;

    overflow: hidden;

    padding: 0 45px;

}

.progress-wrap{

    position: relative;

    z-index: 9;

}

.progress-wrap p{

    margin-top: 20px;

}







.od-text{

    padding: 35px;

    text-align: center;

}

.od-wrap .od-card:nth-child(even){

    flex-direction: column-reverse !important;

}

.slider-mw{

    background-image: url('images/slider-main.png');

    background-size:cover;

    background-repeat: no-repeat;

}

.mw-slider{

    margin-top: 50px;

}



.mw-slider-wrap{

    background: rgb(255 255 255 / 5%);

    border: 1px solid #ffffff2c;

    padding: 30px;

    border-radius: 10px;

    text-align: center;

    aspect-ratio: 1 / 1;



}

.s-icon{

    width: 80px !important;

    margin: auto;

}

.owl-dot{

    margin-right: 5px;

}

.owl-dot:last-child{

    margin-right: 0;

}

.owl-dot span{

    background:  rgb(255 255 255 / 5%);

    width: 13px;

    height: 13px;

    border-radius: 50%;

    position: relative;

    display: inline-block;

    border: 1px solid #ffffff2c;

}

.owl-dot.active span{

    background: #fff;

}

.owl-dots{

    text-align: center;

    margin-top: 10px;

}

.d-slider-wrap{

    padding: 0 15px;

}

            .d-caption {
                display: flex;
                padding: 15px;
                background: #ffffff24;
                border: 1px solid #ffffff6b;
                border-radius: 5px;
                min-height: 130px;    
                align-items: center;
            }
            .d-number {
    background: #ffffff47;
    display: flex
;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 40px;
    font-weight: 700;
    line-height: 40px;
    width: 80px;
    margin-right: 20px;
    height: 80px;
}
.d-intro{
        width: calc(100% - 100px);
}
.d-slider .owl-item:nth-child(even) .d-caption{
    margin-top: 80px;
    margin-bottom: 3px;
}
.d-slider .owl-item:nth-child(even) .d-number{
    background: rgba(0, 60, 176, 0.5);
}

.f-slider-wrap{

    display: flex;

    justify-content: space-between;

    background-color:  rgb(255 255 255 / 5%);

    border: 1px solid #ffffff2c;

    padding: 20px;

    border-radius: 10px;

}

.f-slider-text{

    width: 35%;

}

.f-slider-img{

    width: 60%;

}





.f-slider .owl-stage{display: flex;}

.f-item {

    display: flex;

    flex: 1 0 auto;

    height: 100%;

    padding: 5px;

}

.f-slider-wrap {

    position: relative;

    overflow: hidden;

    /* margin-bottom: 80px; *//*This is optional*/

    display: flex;

    align-items: stretch;

}

.f-slider .owl-dots{

    text-align: left;

    position: absolute;

    left: 0;

    bottom: 30px;

    width: 100%;

    text-align: center;

}

.form-control{

    background-color:  rgb(255 255 255 / 5%);

    border: 1px solid #ffffff2c;

    color: #fff;

}

::placeholder {

    color: #fff !important;

    opacity: 0.5 !important; /* Firefox */ 

}

.submit-btn{

    padding: 5px 40px;

    border-radius: 20px;

    background-color: #ffffff73;

    color: #fff;

}

.submit-btn:hover{

    background-color: transparent;

    border: 1px solid #fff;

}

.footer-links{

    list-style: none;

    display: flex;

    padding: 0;

    margin-bottom: 0;

}

.footer-links li{

    margin-right: 20px;

}

.footer-top{

    display: flex;

    margin-top: 100px;

    justify-content: space-between;

    align-items: center;



}

.footer-icons{

    display: flex;

    align-items: center;

}

.footer-icons img{

    width: 30px;

    margin-left: 4px;

}

textarea.form-control{

    height: calc(100% - 30px);

}

.side-form-wraper{

    width: 100%;

    padding: 0 40px 40px 40px

}

@media only screen and (max-width: 600px) {

    .footer-top{

        flex-direction: column;

    }
    .d-slider .owl-item:nth-child(even) .d-caption{
    margin-top: 0;
    margin-bottom: 3px;
}

    .footer-top div{

        margin-top: 10px;

    }

    .f-slider-wrap{

        flex-direction: column;



    }

    .f-slider-text,.f-slider-img{

        width: 100%;

    }

    .f-slider .owl-dots {

        text-align: center;

        position: relative;

        left: 0;

        bottom: 0;

    }

    .od-wrap .od-card:nth-child(even){

        flex-direction: column !important;

    }

    .hero-video{

        height: 100vh;

        width: auto;

    }

    .navbar-collapse{

        background-color: #ffffff30;

    }

    .db-btn {

        float: none;

        text-align: center;

    }

    .navbar-toggler-icon{

        background-image: url('images/hambuger.png');

    }

    .navbar-toggler{

        border: 0;

    }

    .footer-links, .footer{

        font-size: 12px;

    }



        

    

  }







/*contact css*/











header {

/*  padding: 20px;*/

  background: rgba(255, 255, 255, 1);

}



.slide-form {

  position: fixed;

  top: 0;

  right: 0;

  height: 100vh;

  width: 760px;

  background-color: white;

  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);

  overflow-y: auto;

  z-index: 9999;

  transform: translateX(100%);

  opacity: 0;

  pointer-events: none;

  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),

    opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);

}



.slide-form.active {

  transform: translateX(0%);

  opacity: 1;

  pointer-events: auto;

}



.form-header {

  display: flex;

  margin-bottom: 27px;

  justify-content: space-between;

  align-items: flex-start;

}



.form-header h2 {

  margin-top: 40px;

  line-height: 1.4;

  max-width: 600px;

  padding: 0 40px;

}



.form-header span {

  margin-top: 30px;

  margin-right: 43px;

}



#closeForm {

  color: #fff;

  font-size: 45px;

  font-weight: 100;

  cursor: pointer;

}



.form-banner{

  padding: 40px;

  padding-top: 0;

  text-align: center;

}

.form-banner img {

  width: 100%;

  border-radius: 8px;

  overflow: hidden;

}



.form-intro {

  margin-top: 5px;

  margin-bottom: 37px;

  padding: 0 40px;

}



.styled-form {

  width: 100%;

  margin: 0 auto;

  padding: 0 40px;

}





/* form background overlay */

.overlay {

  display: none;

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  transition: transform 0.8s ease-in-out;

  bottom: 0;

  background: rgba(0, 0, 0, 0.747);

  z-index: 1008;

}



/* mobile responsive */

@media (min-width: 600px) {

  .form-group {

    flex: 1 1 45%;

  }

}







/* Tablets (768px and down) */

@media (max-width: 768px) {

  .slide-form {

    width: 90%;

    padding: 20px 15px;

  }



  .form-header {

    flex-direction: row;

    align-items: flex-start;

    margin-bottom: 20px;

  }



  .form-header h2 {

    margin-top: 25px;

    padding: 0;

  }

  .form-banner{

    padding: 0;

  }



  .form-header span {

    margin-top: 10px;

        align-self: flex-end;

        position: absolute;

        top: -5px;

        left: 5px;

        line-height: 20px;

        width: 30px;

        height: 30px;

        border: 1px solid #000;

        border-radius: 50%;

        margin-right: 0;

        text-align: center;

  }

 

  .form-banner img {

    width: 100%;

    margin-left: 0;

    margin-bottom: 15px;

  }



  .form-intro {

    margin-left: 0;

    margin-bottom: 30px;

    padding: 0;

  }

 

}



/* Mobile (480px and down) */

@media (max-width: 480px) {

  .slide-form {

    padding: 15px 10px;

  }



  #closeForm {

    font-size: 36px;

    margin-top: 10px;

  }



  .form-intro {

  }

}



body.no-scroll {

  overflow: hidden;

  height: 100vh;

}



.form-banner .about-video{

  max-width: 250px;

}