@import url('https://fonts.googleapis.com/css?family=Roboto+Slab|Ubuntu');
@import url('https://fonts.googleapis.com/css?family=Lato');


html,body{
    font-family: 'Roboto', sans-serif;
    padding: 0;
    margin: 0;
}
body{
    background-color: #fff;
}


::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #fff;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #008080;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #008080;
}

::-moz-scrollbar {
    width: 5px;
    height: 5px;
}

::-moz-scrollbar-track {
    box-shadow: inset 0 0 5px #fff;
    border-radius: 10px;
}

::-moz-scrollbar-thumb {
    background: #008080;
    border-radius: 10px;
}

::-moz-scrollbar-thumb:hover {
    background: #008080;
}

.scrollbar {
    width: 5px;
    height: 5px;
}

.scrollbar-track {
    box-shadow: inset 0 0 5px #fff;
    border-radius: 10px;
}

.scrollbar-thumb {
    background: #008080;
    border-radius: 10px;
}

.scrollbar-thumb:hover {
    background: #008080;
}


.grey-bg{
    background-color: #535151;
}
.grey-text{
    color:#535151;
}
.teel-bg{
    /* background-color: #008080; */
    background: linear-gradient(to left, rgb(74, 216, 237) 0%, rgb(108, 223, 169) 100%)
}
.light-teel-bg{
    background-color: #22eeee;
}
.light-teel-border{
    border: 2px solid #22eeee;
}
.light-teel-text{
    color: #22eeee;
}
.light-grey-text{
    color: #ced4da;
}
.gold-text{
    color: #FFD700;
}
.teel-text{
    color:#008080;
}
.gradient-border{
    border-color:  linear-gradient(to left, rgb(74, 216, 237) 0%, rgb(108, 223, 169) 100%);
}
.gradient-text{linear-gradient(to left, rgb(74, 216, 237) 0%, rgb(108, 223, 169) 100%)
    background: ;
    -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.title{
    font-size:35px;
}
.sub-title{
    font-size:25px;
}
.title:before{
    background: linear-gradient(to left, rgb(74, 216, 237) 0%, rgb(108, 223, 169) 100%);
    content: "";
    display: inline-block;
    height: 50px;
    position: absolute;
    margin-top: -15px;
    width: 5px;
}
.title span{
    margin-left: 20px;
}
p{
    margin: 10px;
}
button{
    border: none;
}
.ui-state-default{
    border:none;
}
.ui-state-active{
    background: linear-gradient(to left, rgb(74, 216, 237) 0%, rgb(108, 223, 169) 100%)
}
.nav-item{
    cursor: pointer;
}
.shadow,
.shadow-lg{
    box-shadow: 0px 6px 8px -3px #ccc !important;
}
.was-validated .form-control:invalid,
.form-control.is-invalid,
.was-validated .custom-select:invalid,
.custom-select.is-invalid{
    border-color: #008080;
}
button:focus,
input:focus{
    outline: none;
}
.form-control:focus{
   box-shadow: 0 0 0 0.2rem transparent !important;
}

button:hover,
input[type="submit"]{
    box-shadow: 0px 6px 8px -3px #000 !important;
    transition: 0.2s ease-in-out;
    cursor: pointer;
}

/*********** Navbar **********/
.navbar .nav-item .nav-link{
    color: #535151;
    border-bottom: 2px solid transparent;
} 
.navbar-brand img{
    width: 75px;
}
.navbar .dropdown-item:hover{
    /* background-color: #008080; */
     background: linear-gradient(to left, rgb(74, 216, 237) 0%, rgb(108, 223, 169) 100%);
    color: #fff;
}
.navbar .dropdown-menu{
    padding:0px;
    box-shadow: 2px 6px 8px -3px #000;
}
.navbar .nav-item:hover .nav-link{
    color: #008080;
}
.navbar .dropdown-item{
    text-align: center;
}

/***************** carousel us in home page ***************/


.carousel-inner button,
.faq_banner .faq_cta{
    border-radius: 30px;
    position: absolute;    
    top: 350px;
    left: 50px;
    z-index: 132;
}

.carousel-control-prev-icon {
    background-image: none !important;
    padding-right: 125px;
}
.carousel-control-next-icon{
    background-image: none !important;
    padding-left: 125px;
}

.carousel-control-next-icon::after{
    content: '>';
    font-size: 40px;
    /* color: #008080; */
    
    background: -webkit-linear-gradient(rgb(74, 216, 237), rgb(108, 223, 169));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.carousel-control-prev-icon::after{
    content: '<';
    font-size: 40px;
    background: -webkit-linear-gradient(rgb(74, 216, 237), rgb(108, 223, 169));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.carousel-indicators {
    bottom: -10px;
}

.carousel-indicators li{
    /*background-color: #22eeee !important;*/
    background-color: #ccc !important;

    cursor:pointer;
    height:15px;
    width:15px;
    margin:0 2px;
    border-radius:50%;
    display:inline-block;
    transition:background-color .6s ease;
}

.carousel-indicators .active{
    /* background-color: #008080 !important; */

    background: linear-gradient(to left, rgb(74, 216, 237) 0%, rgb(108, 223, 169) 100%);
    color: #fff;
}

/***************** About us in home page ****************/



/************* We test in home page **************/
.wetest-section,
.services-section {
    margin: 100px 0px;
}
.wetest-section .wetest1_img{
    width:600px;
}
.wetest-section .wetest2_img{
    width:400px;
}
.wetest-section .sub-title{
    margin-bottom: 5px !important;
}

#testing .iq-fancy-box-02 {
    /* display: flex;
    justify-content: center; */
}

/************* Why C4T in home page **************/
.yc4t-section img{
    width: 400px;
    margin: 10px 0px;
}

/************* Services in home page **************/
.services-section img{
    width: 100px;
}
.services-section .row div{
    width:250px;
    margin:10px;
}

/************* Testimonial in home page **************/

.testimonial_section .row .review_image{
    width:100px;
    height:100px;
    border-radius:50%;
    overflow: hidden;
    margin: auto
}

.testimonial_section .row .col-sm-6{
    /* background-image: url("../imgs/feedback_bg2.svg"); */
    background-size: cover;
    padding: 10px;
    margin: 10px 0px;
    width: 300px;
}
.testimonial_section .row .client{
    width: 100px;
    height:100px;
    border-radius: 50%;
    border: 4px solid #fff;
    overflow: hidden;
    margin: 0px auto;
}
.testimonial_section .row .client1{
    background-image: url("../imgs/confirmtkit.jpg");
    background-size: cover;
}
.testimonial_section .row .client2{
    background-image: url("../imgs/rydo.jpg");
    background-size: cover;
}
.testimonial_section .row .client3{
    background-image: url("../imgs/hungurybells.jpg");
    background-size: cover;
}
.testimonial_section .row .client4{
    background-image: url("../imgs/smacar.png");
    background-size: cover;
}

.testimonial_section .row .tester1{
    background-image: url("../imgs/narendra.jpg");
    background-size: cover;
}
.testimonial_section .row .tester2{
    background-image: url("../imgs/pawel.jpg");
    background-size: cover;
}
.testimonial_section .row .tester3{
    background-image: url("../imgs/hrvoje.jpg");
    background-size: cover;
}
.testimonial_section .row .tester4{
    background-image: url("../imgs/Avatar_3.jpg");
    background-size: cover;
}

/************* CTA in home page **************/
.cta{
    border-radius:20px;
    border: none;
}
.cta:hover{
    box-shadow:0px 4px 4px 0px #000;
    transition: 0.2s linear;
    cursor: pointer;
}

/************* Footer **************/
footer .title{
    font-size: 25px;
}
footer .title:before{
    height: 40px;
    background: linear-gradient(to left, rgb(74, 216, 237) 0%, rgb(108, 223, 169) 100%);
}
footer .sm-links span{
    margin: 0px 10px;
}
footer .sm-links span img{
    width: 50px;
    cursor: pointer;
}
footer .playstore{
    width: 200px;
    margin:20px 10px;
    cursor: pointer;
}
footer input{
    width: 300px;
    border:none;
    border-radius:20px;
    height:40px;
}
footer button{
    border:none;
    border-radius:20px;
    height: 40px;
    width: 100px;
}
footer button{
    cursor: pointer;
}

footer .service-links p:hover{
    cursor: pointer;
    font-weight: bold;
    padding-left:10px;
    background: linear-gradient(to left, rgb(74, 216, 237) 0%, rgb(108, 223, 169) 100%);
    -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    transition: 0.2s linear;
}


/*************** Pricing ****************/
.pricing_banner img,
.faq_banner img,
.webinar_banner img,
.host_pic img,
.mobileapp_banner img,
.desktopapp_banner img,
.website_banner img{
    width: inherit;
}
.pricing .row div{
    box-shadow: 0px 6px 8px -3px #000;
    margin: 0px 10px;
    padding-right:0px;
    padding-left:0px;
}
.pricing p,
.pricing span{
    font-size: 15px;
    color:#535151;
}
.pricing .header{ 
    font-size: 20px;
}
.pricing button{
    padding: 10px 30px;
    border-radius: 30px;
}

/*************** Faq ****************/
.faq_banner .faq_cta button{
    border-radius: 20px;
}
.faq_banner .faq_cta p{
    font-size:25px;
}

/*************** Webinar ****************/

.webinar img{
    width: 200px;
    border-radius: 50%;
    border:5px solid #008080;
}
.webinar button{
    border-radius:20px;
    width: 100%;
}

/*************** Mobile app ****************/
.mobileapp ul,
.desktopapp ul{
    list-style-type: none;
}
.mobileapp ul .teel-text,
.desktopapp ul .font-weight-bold,
.ul-disc ul .font-weight-bold{
    font-size: 20px;
}
.ul-disc ul{
    list-style-type: disc;
}
.ul-circle ul{
    list-style-type: circle;
}
.ul-number ol{
    /* list-style-type: decimal */
}
/*************** About Us ****************/
.aboutus img{
    width: 200px;
    border-radius: 50%;
    border:5px solid #008080;
    height: auto;
}
.ach img{
    width: 100px;
    height: auto;
}
.global_pres img{
    width: inherit;
    height: auto;
}
.clients img{
    width: 95px;
    height: auto;
    max-height: 75px;
}

/*************** Contact ****************/
.contact button{
    border-radius: 5px;
    cursor: pointer;
}
.contact iframe{
    width: inherit;
}

/*************** Review ****************/
.nav-pills .nav-link {
    color: #008080 !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link{
    /* background-color: #008080 !important; */
    color: #fff !important;
    background: linear-gradient(to left, rgb(74, 216, 237) 0%, rgb(108, 223, 169) 100%) !important;
}
.review input[type="text"]{
    border: none;
    border-radius: 0px;
    border-bottom: 2px solid #008080;
}
.review .rev-cont{
    box-shadow: 0px 10px 15px -5px #000;
    padding: 10px;
}
.review .rev-cont .row{
    margin-left: 0px;
    margin-right: 0px;
}

/****** Style Star Rating Widget *****/

.rating { 
  border: none;
  float: left;
}

.rating > input { display: none; } 
.rating > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

/* .rating > .half:before { 
  content: "\f089";
  position: absolute;
} */

.rating > label { 
  color: #ddd; 
 float: right; 
}

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFD700;  } 


/*************** Signup ****************/

/* Login form */
.login-bg{
    /* background-image: url("../imgs/login.svg");
    background-size: cover; */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.login-bg img{
    /* width: inherit; */
    height: auto;
}
.forms{
    /* padding-top: 45px; */
    padding-bottom: 45px;
}
.forms .btn{
    width:260px;
    /* background-color: #008080; */
    background: linear-gradient(to left, rgb(74, 216, 237) 0%, rgb(108, 223, 169) 100%);
    color: white;
    margin-top: 10px;
}
.forms .form-control{
    background-color: transparent;
    border-style: none;
    border-bottom: 2px solid #008080;
    border-radius: 0px;
}
.forms .container{
    padding-top: 10px;
    /* box-shadow: 0px 2px 5px 4px grey; */
    padding-bottom: 10px;
}
.forms:focus-within{
    border-style: none;
}
form label{
    color: #535151;
}
hr{
    width: 80px;
    height: 2px;
    background-color:  #008080;
    margin: auto;
}
.mailwid{
    margin-top: -20px;
}
.custom-checkbox #customCheck{
    background-color: #008080;
    color: #008080;
}
::-webkit-input-placeholder {
  color: peachpuff;
  font-size: 13px;
}
::-moz-placeholder {
  color: peachpuff;
  font-size: 13px;
}
:-ms-input-placeholder {
  color: peachpuff;
  font-size: 13px;
}
::placeholder {
  color: peachpuff;
  font-size: 13px;

}

/*************** Join US ****************/
.join_us input{
    border-style: none;
    border-bottom: 2px solid #008080;
    border-radius: 0px;
}
.join_us label{
    font-weight: bold;
}
.join_us{
    background: url("./assets/imgs/update.png");
    background-size: cover;
}

/*************** T&C ****************/

.tnc ol li{
    list-style-type: decimal;
}
.tnc .title{
    line-height: 1;
}


/*********************** Media Queries ************************/
@media only screen and (max-width:1200px) and (min-width:900px){
    .services-section .row div{
        width:200px;
    }
    footer .title:nth-child(2){
        margin-top: 20px;
    }
    .carousel-inner button,
    .faq_banner .faq_cta{
        top: 300px;
        left: 20px;
    }
    
}

@media only screen and (max-width:992px){
    .login-trigger{
        margin-bottom: 15px;
    }
}

@media only screen and (max-width:992px) and (min-width:768px){
    .wetest-section .wetest2_img{
        width: 300px;
    }
    .yc4t-section img{
        width: 300px;
    }
    .wetest-section .wetest1_img{
        width: 400px;
    }
    .carousel-inner button,
    .faq_banner .faq_cta{
        top: 300px;
        left: 20px;
    }
}

@media only screen and (max-width:768px) and (min-width:576px){
    .yc4t-section img{
        width: 200px;
    }
    .wetest-section .wetest1_img{
        width: 400px;
    }
    .carousel-inner button,
    .faq_banner .faq_cta{
        top: 250px;
        left: 20px;
    }
}

@media only screen and (max-width:576px){
    .yc4t-section img,
    .wetest-section .wetest1_img,
    .wetest-section .wetest2_img{
        width: 300px;
    }
    .title{
        font-size:25px;
    }
    .sub-title{
        font-size:20px;
    }
    .title:before{
        background-color: #008080;
        content: "";
        display: inline-block;
        height: 40px;
        position: absolute;
          margin-top: -15px;
    }

    .carousel-inner button,
    .faq_banner .faq_cta{
        top: 110px;
        left: 20px;
    }
    .faq_banner .faq_cta p{
        font-size:15px;
    }
    body{
        font-size: 0.85rem;
    }

    
}


.error-message {
    font-size: 14px;
}