
body{
    font-family: 'Nunito Sans', sans-serif;
    padding: 0;
    margin: 0;
    letter-spacing: .3px;
    color: #262626;
    font-size: .875rem!important;
    font-weight: 400!important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.text-color{
color: #262626;
font-weight: 500;
font-size:14px;
}
.bth{
  font-weight: 600 !important;
}
.taber{
  color: #343a40!important;
  font-weight: 600!important;
}
.font-weight-p{
    font-size:20px;
    font-weight:400;
}
.brdr{
border-top: 1px solid #ccc;
border-radius: 0px !important;
}
.brdre{
    width: 325px;
    border-bottom: 2px solid #01a5fa;
    padding: 20px 0px;
}
.brdr_b{
    border-bottom: 1px solid #ccc !important;
    border-radius: 0px !important;
    }
.border-right{
    border-right:2px solid #DDDDDD !important;
}
.nvbtn1{
  border-color: #01a5fa !important;
  color: #01a5fa !important;
}
.nvbtn1:hover{
  background-color: #01a5fa !important;
  color: #fff !important;
}

.btn1{
  background-color: #01a5fa !important;
  color: #fff !important;
  border-color:#01a5fa ;
}
.btn1:hover{
  background-color: #fff !important;
  color: #01a5fa !important;
  border-color: transparent !important;
  }
  .btn3{
    background-color: #01a5fa !important;
    color: #fff !important;
    border-color:#01a5fa ;
  }
  .btn3:hover{
    background-color: #0680bff7  !important;
    color: #fff !important;
    border-color:#0680bff7 ;
  }

  
.btn2{
  background-color: #01a5fa !important;
  color: #fff !important;
  border-color:#01a5fa ;
}
.btn2:hover{
  background-color: #fff !important;
  color: #01a5fa !important;
  border-color: #01a5fa !important;
  }
  
.btnh:hover{
  background-color: #fff !important;
color: #01a5fa !important;
border-color: transparent !important;

}

.sub-headr{
    font-size: 16px;
    font-weight: normal;
    line-height: 1.6 !important;

} 

.box {
  position: relative;
  max-width: 600px;
  width: 90%;
  height: 400px;
  background: #fff;
  box-shadow: 0 0 15px rgba(0,0,0,.1);
}
.form-bg{
  background-color: #fbfafa14;
}
.list-dire{
  flex-direction:row !important   ;
}
.my-color{
  color: #01a5fa;
  opacity: 0.8;
}
.my-color:hover{
  color: #01a5fa;
  opacity: 1;
}
/* common */
.ribbon {
  width: 150px;
  height: 60px;
  overflow: hidden;
  position: absolute;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.ribbon::before,
.ribbon::after {
  position: absolute;
  z-index: -1;
  content: '';
  display: block;
}
.ribbon span {
  position: absolute;
  display: block;
  width: 217px;
      border-bottom-right-radius: 70px;
    border-bottom-left-radius: 70px;
  padding: 24px 0;
  background-color: #01a5fa;
  color: #fff;
  font: 700 18px/1 'Lato', sans-serif;
  text-transform: uppercase;
  text-align: center;
}
.month{
    font-size: 11px;
}

/* top right*/
.ribbon-top-right {
  top: 0px;
  right: 45px;
}
.ribbon-top-right::before,
.ribbon-top-right::after {
  border-top-color: transparent;
  border-right-color: transparent;
}
.ribbon-top-right::before {
  top: 0;
  left: 0;
}
.ribbon-top-right::after {
  bottom: 0;
  right: 0;
}
.ribbon-top-right span {
  left: -34px;
  top: 0px;
}


.brd{
 border-color: #01a5fa !important;   
}
.right{
    list-style-image: url(../images/tick.svg);
    line-height: 35px;
}
.wrong{
    background-image: url(../images/cross.svg);
    line-height: 35px;
}
.exp-attainica{
    background-color: #00a5fa;
}
.tabes li a.active{
    color: #01a5fa!important;
    border-bottom: 2px solid #01a5fa;

}
.nav-link{
    font-size: 16px !important;
    color: rgba(0,0,0,.5);
    border-bottom: 2px solid transparent;
}

.nav-link .active{
    color: #01a5fa!important;
    border-bottom: 2px solid #01a5fa !important;
}

.nav-link:hover{
    color: #01a5fa!important;
}
.bg-img{
    background-image: url(/images/main-bg.png)!important;
    background-repeat: no-repeat!important;
    background-size: cover!important;
}
.cust-link{
    border: transparent !important;
}
.nav-tabs{
    border:transparent !important;
}
.custom{
    border-bottom: 0px;
}
.bg-colr{
    background-color: #f2fbff !important;
}
.stream-logo {
    height: 60px;
    width: 60px;
}
.flexible-block{
background-image: url(/images/banner-bg.png) !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
.footer-bg{
    background-color: #052c41;
}
.pre-footer{
    background-color: #004467;
}
.social-links:hover{
background-color: #fff;
}
.social-links{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #6991a5;
    text-align: center;
    line-height: 32px;
    color: #000;
}
.card-text{
  font-size: 16px !important;
  font-weight: 400 !important;
}
.tstmnl{
font-size: 16px;
font-weight: 500;
}
.testimonial{
    font-style: italic;
    font-size: 15px !important;
}
.test-monialbg{
    background-color: #f2fbff !important;
}
.imgrounded{
    border-radius: 50%;
}
.carousel-indicators li {
    position: relative !important;
    border:1px solid #01a5fa!important;
    height: 10px !important;
    width: 10px !important;
    border-radius: 50% !important;
    top: 35px;
  }
  .carousel-control-next-icon{
background-image: url("../images/cross.svg");
  }
  .carousel-control-prev-icon{
    background-image: url("../images/tick.svg");
}
  .carousel-indicators .active {
    background-color: #01a5fa;
  }
  #header.active {
    -webkit-box-shadow: 0 0 10px rgba(212,212,212,.6);
    box-shadow: 0 0 10px rgba(212,212,212,.6);
    border-bottom: 1px #f6f8ff;
}
#header {
    width: 100%;
    z-index: 9000;
    -webkit-transition: all .15s linear;
    transition: all .15s linear;
}
.quoto{
    color:#ccc!important;
}
.carousel-control-prev-icon,.carousel-control-next-icon{
color: #00a5fa;
}
#myBtn {
    display: none;
    position: fixed;
    bottom: 75px;
    right: 30px;
    z-index: 99;
    font-size: 16px;
    border: none;
    outline: none;
    background-color:#fffd;
    cursor: pointer;
    padding:8px 15px;
    border-radius: 50%;
  }
  
html{
    scroll-behavior: smooth;
}

  
.pr1{
  font-size: 16px;
}
.pr{
  color: #01a5fa;
}
.bg-pr{
  background-color: #01a5fa;
}
.social-links{
    width: 30px !important;
    height: 30px !important;
    border-radius: 50%;
    background: #6991a5;
    text-align: center;
    line-height: 32px;
 } 
 
 .md-resp{
    font-size: 16px !important;
    font-weight: 600;
}
 .schdule-demo{
     padding: 11px 34px !important;
 }
 .sub-head{
     font-size: 16px;
 }
 .navbar-light .navbar-nav .active>.nav-link, .nav-link:hover{
    color: #01a5fa!important;
    border-bottom: 2px solid #01a5fa;
}
.nav-link{
  border-bottom: 2px solid transparent;
}
.aside-para{
    font-weight: 400 !important;
    font-size: 16px !important;
}
 .mobile-rep-p{
     font-size: 13px;
 }
 
  
  .toggle_radio{
    position: relative;
    background:#848484!important;
    padding: 0 !important;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    position: relative;
    height: 36px;
    width: 213px;
  }
  .toggle_radio > * {
    float: left;
  }
  .toggle_radio input[type=radio]{
    display: none;
    /*position: fixed;*/
  }
  .toggle_radio label{
    color: #fff;
    z-index: 0 !important;
    display: block;
    width: 100px;
    height: 20px;
    margin: 8px 3px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    cursor: pointer;
    z-index: 1;
    /*background: rgba(0,0,0,.1);*/
    text-align: center;
    /*margin: 0 2px;*/
    /*background: blue;*/ /*make it blue*/
  }
  .toggle_option_slider{
    /*display: none;*/
    /*background: red;*/
    width: 100px;
    height: 30px;
    position: absolute;
    top: 3px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -ms-transition: all .4s ease;
    transition: all .4s ease;
  }
  
  #first_toggle:checked ~ .toggle_option_slider{
    background: #01a5fa;
    left: 3px;
  }
  #second_toggle:checked ~ .toggle_option_slider{
    background: #01a5fa;
    left: 109px;
  }
  #third_toggle:checked ~ .toggle_option_slider{
    background: #01a5fa;
    left: 215px;
  }
 
 .exp-attain{
     font-size: 29px;
 }
 .dolr{
   line-height: 1.3 !important;
 }
 .doler{
   font-size: 24px !important;
   color: rgba(0,0,0,.5);
 }
 .ourclient{
    font-weight: 400;
    font-size: 29px;
}
 .testiml{
     font-weight: 500;
     font-size: 29px;
     line-height: 1.5;
 }
 
 .testiml1{
    font-weight: 500;
    font-size: 29px;
    line-height: 1.5;
}
 .wptww-testimonials-text strong:before{
    color: #ccc;
    content: "\201C";
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.4em;
 }
 .cat-text{
     font-size: 20px;
     font-weight: 500;
 }
 .h1-mobile-rep{
     font-size: 44px;
     font-weight: 400px !important;
 }
.radio {
 
    display: block;
   position: relative;
   padding-left: 30px;
   margin-bottom: 12px;
   cursor: pointer;
   font-size: 20px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none
}

/* Hide the browser's default radio button */
.radio input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
}

/* Create a custom radio button */
.checkround {

   position: absolute;
   top: 6px;
   left: 0;
   height: 20px;
   width: 20px;
   background-color: #fff ;
   border-color:#A6A6A6;
   border-style:solid;
   border-width:2px;
    border-radius: 50%;
}

.pricing-table-list{
    list-style-image: url("list.png");
}
.right1{
  background-image: url(../images/tick.svg);
  background-repeat: no-repeat;
  background-position: center;
}
.wrong1{
  background-image: url(../images/cross.svg);
  background-repeat: no-repeat;
  background-position: center;
  }
/* When the radio button is checked, add a blue background */
.radio input:checked ~ .checkround {
   background-color: #fff;
}
::placeholder{
    font-size: 14px !important;
    font-style: italic;
    color:#e6eade !important;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkround:after {
   content: "";
   position: absolute;
   display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio input:checked ~ .checkround:after {
   display: block;
}

/* Style the indicator (dot/circle) */
.radio .checkround:after {
    left: 2px;
   top: 2px;
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background:#01a5fa;
}
textarea {
    resize: none;
}

/* The check */
.check {
   display: block;
   position: relative;
   padding-left: 25px;
   margin-bottom: 12px;
   padding-right: 15px;
   cursor: pointer;
   font-size: 18px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

/* Hide the browser's default checkbox */
.check input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
   position: absolute;
   top: 3px;
   left: 0;
   height: 18px;
   width: 18px;
   background-color: #0087EF ;
   border-color:#A6A6A6;
   border-style:solid;
   border-width:2px;
}



/* When the checkbox is checked, add a blue background */
.check input:checked ~ .checkmark {
   background-color: #0087EF  ;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
   content: "";
   position: absolute;
   display: none;
}

/* Show the checkmark when checked */
.check input:checked ~ .checkmark:after {
   display: block;
}

/* Style the checkmark/indicator */
.check .checkmark:after {
   left: 5px;
   top: 1px;
   width: 5px;
   height: 10px;
   border: solid ;
   border-color:#A6A6A6;
   border-width: 0 3px 3px 0;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
}

.cust-btn{
   margin-bottom: 10px;
   background-color: #0087EF;
   border-width: 2px;
   border-color: #A6A6A6;
   color: #fff;
}
.cust-btn:hover{
   
   border-color: #A6A6A6;
   background-color: #fff;
   color: #0087EF;
   border-radius: 20px;
   transform-style: 2s;

}





/* media queries for responsive */
@media(max-width:535px){
  .mobile-rep-p{
      font-size: 11px;
  }
  .right {
    line-height: 29px;
}
  .carousel-indicators li {
    top: 51px;
  }
  .h1-mobile-rep{
      font-size: 32px !important;
  }
  .h2-mobile-rep{
    font-size: 24px;;
  }
  .social-links {
    width: 30px;
    height: 30px;
    line-height: 32px;
}
.border-right{
    border-right: none !important;
}
.navbar-light .navbar-nav .active>.nav-link, .nav-link:hover{
    border-bottom: none;
}


}

@media(min-width:766px){
.navbar-light .navbar-nav .active>.nav-link, .nav-link:hover{
    border-bottom: none;
}
.md-resp{
    font-size: 11px !important;
}
.social-links {
    width: 30px !important;
    height: 23px !important;;
    line-height: 24px !important;;
}
.carousel-indicators li {
    top: 50px;
  }
  .mobile-rep-p{
    font-size: 16px;
}
.h1-mobile-rep{
font-size: 2.5rem;
}
.h2-mobile-rep{
    font-size: 2rem;
}
.tabes{
  padding: 0px 14px;
}

}
.marginer {
  padding-left: 36px;
} 



@media(min-width:795px){
 
  .social-links{
     width: 30px !important;
     height: 30px !important;
     border-radius: 50%;
     background: #6991a5;
     text-align: center;
     line-height: 32px !important;
  } 
.vy-height{
  height: 100vh;
}
  .tabes{
      padding: 0px 125px;
 }
  .schdule-demo{
      padding: 11px 34px !important;
  }
  .sub-head{
      font-size: 16px;
  }
  .navbar-light .navbar-nav .active>.nav-link, .nav-link:hover{
     color: #01a5fa!important;
     border-bottom: 2px solid #01a5fa;
 }
 .aside-para{
     font-weight: 400 !important;
     font-size: 16px !important;
 }
  .mobile-rep-p{
      font-size: 13px;
  }
   /* .fa-facebook:hover ,.fa-twitter:hover ,.fa-youtube:hover,.fa-linkedin:hover{
     color:#fff !important;
   } */
   .toggle_radio{
     position: relative;
     background: #848484!important;
     padding: 0 !important;
     -webkit-border-radius: 50px;
     -moz-border-radius: 50px;
     border-radius: 50px;
     position: relative;
     height: 36px;
     width: 213px;
   }
   .toggle_radio > * {
     float: left;
   }
   .toggle_radio input[type=radio]{
     display: none;
     /* position: fixed; */
   }
   .toggle_radio label{
     color: #fff;
     display: block;
     width: 100px;
     -o-transition-property: all ;
     height: 20px;
     margin: 8px 3px;
     -webkit-border-radius: 50px;
     -moz-border-radius: 50px;
     border-radius: 50px;
     cursor: pointer;
     /*background: rgba(0,0,0,.1);*/
     text-align: center;
     /*margin: 0 2px;*/
     /*background: blue;*/ /*make it blue*/
   }
   .toggle_option_slider{
     /*display: none;*/
     /*background: red;*/
     width: 100px;
     height: 30px;
     position: absolute;
     top: 3px;
     -webkit-border-radius: 50px;
     -moz-border-radius: 50px;
     border-radius: 50px;
     -webkit-transition: all .4s ease;
     -moz-transition: all .4s ease;
     -o-transition: all .4s ease;
     -ms-transition: all .4s ease;
     transition: all .4s ease;
   }
   
   #first_toggle:checked ~ .toggle_option_slider{
     background: #01a5fa;
     left: 3px;
   }
   #second_toggle:checked ~ .toggle_option_slider{
     background: #01a5fa;
     left: 109px;
   }
   #third_toggle:checked ~ .toggle_option_slider{
     background: #01a5fa;
     left: 215px;
   }
  
  .exp-attain{
      font-size: 29px;
  }
  .ourclient{
     font-weight: 400;
     font-size: 29px;
 }
  .testiml{
      font-weight: 500;
      font-size: 29px;
      line-height: 1.5;
  }
  .testiml1{
     font-weight: 500;
     font-size: 29px;
     line-height: 1.5;
 }
  .wptww-testimonials-text strong:before{
     color: #ccc;
     content: "\201C";
     font-size: 4em;
     line-height: 0.1em;
     margin-right: 0.25em;
     vertical-align: -0.4em;
  }
  .cat-text{
      font-size: 20px;
      font-weight: 500;
  }
  .h1-mobile-rep{
      font-size: 44px;
      font-weight: 400px !important;
  }
 }

 
@media(min-width:994px){
  .image-right{
   right: 0;
   height: 100%;
   position: fixed;
  }

  .image-right1{
    right: 0;
    height: 100%;
    position: fixed;
    overflow: auto;

   }
  .image-left{
   width: inherit;
   height: 100%;
   position: fixed; 
  }
}
 @media(min-width:1023px){
  .md-resp{
    font-size: 16px !important;
}
.tabes{
  padding: 0px 30px;
}
  }

  @media(min-width:1196px){
    .md-resp{
      font-size: 16px !important;
  }
  .tabes{
    padding: 0px 125px;
  }
    }
            #my-parent div{
                display: none;
            }
            #my-parent div.show{
                display: inline-block;
            }
            


            /* Preloaders */
            .loader{
              width: 100px;
              height: 100%;
              margin: 85px auto;
              position: relative;
          }
          .loader span{
              display: block;
              width: 5px;
              height: 10px;
              background: #01a5fa;
              position: absolute;
              bottom: 0;
              margin: auto;
              animation: loading-1 2.25s  infinite ease-in-out;
          }
          .loader span:nth-child(2){
              left: 11px;
              animation-delay: .2s;
          }
          .loader span:nth-child(3){
              left: 22px;
              animation-delay: .4s;
          }
          .loader span:nth-child(4){
              left: 33px;
              animation-delay: .6s;
          }
          .loader span:nth-child(5){
              left: 44px;
              animation-delay: .8s;
          }
          .loader span:nth-child(6){
              left: 55px;
              animation-delay: 1s;
          }
          .loader span:nth-child(7){
              left: 66px;
              animation-delay: 1.2s;
          }
          .loader span:nth-child(8){
              left: 77px;
              animation-delay: 1.4s;
          }
          .loader span:nth-child(9){
              left: 88px;
              animation-delay: 1.6s;
          }
          @-webkit-keyframes loading-1{
              0%{
                  height: 10px;
                  transform: translateY(0px);
              }
              25%{
                  height: 60px;
                  transform: translateY(15px);
              }
              50%{
                  height: 10px;
                  transform: translateY(-10px);
              }
              100%{
                  height: 10px;
                  transform: translateY(0px);
              }
          }
          @keyframes loading-1{
              0%{
                  height: 10px;
                  transform: translateY(0px);
                  background: #01a5fa;
              }
              25%{
                  height: 60px;
                  transform: translateY(15px);
                  background: #1697d8;
              }
              50%{
                  height: 10px;
                  transform: translateY(-10px);
                  background: #01a5fa;
              }
              100%{
                  height: 10px;
                  transform: translateY(0px);
                  background: #1697d8;
              }
          }
          #preloader{
            text-align: center;
            position: absolute;
            top:25%; 
            left:0;
            right:0;
            margin: auto;
        }
        #preloader-main {
          display: none;
           
        }
        .loader11 {
            width: 100px;
            height: 70px;
            margin: 50px auto;
            position: relative
        }
        
        .loader11 span {
            display: block;
            width: 5px;
            height: 10px;
            position: absolute;
            bottom: 0;
            animation: loading-11 2.25s infinite ease-in-out
        }
        
        .loader11 span:nth-child(2) {
            left: 11px;
            animation-delay: .2s
        }
        
        .loader11 span:nth-child(3) {
            left: 22px;
            animation-delay: .4s
        }
        
        .loader11 span:nth-child(4) {
            left: 33px;
            animation-delay: .6s
        }
        
        .loader11 span:nth-child(5) {
            left: 44px;
            animation-delay: .8s
        }
        
        .loader11 span:nth-child(6) {
            left: 55px;
            animation-delay: 1s
        }
        
        .loader11 span:nth-child(7) {
            left: 66px;
            animation-delay: 1.2s
        }
        
        .loader11 span:nth-child(8) {
            left: 77px;
            animation-delay: 1.4s
        }
        
        .loader11 span:nth-child(9) {
            left: 88px;
            animation-delay: 1.6s
        }
        
        @-webkit-keyframes loading-11 {
            0% {
                height: 10px;
                transform: translateY(0);
            }
            25% {
                height: 60px;
                transform: translateY(15px);
            }
            50% {
                height: 10px;
                transform: translateY(-10px);
            }
            100% {
                height: 10px;
                transform: translateY(0);
            }
        }
        
        @keyframes loading-11 {
            0% {
                height: 10px;
                transform: translateY(0);
            }
            25% {
                height: 60px;
                transform: translateY(15px);
            }
            50% {
                height: 10px;
                transform: translateY(-10px);
            }
            100% {
                height: 10px;
                transform: translateY(0);
            }
        }
        
        .switch-text{
          position: sticky;
          z-index: 999;
          padding-left: 5px;
        }