/* fonts */

/* start header */

/* start carousal */

body {
   font-family: 'Poppins', sans-serif;
}

.header{
    background: linear-gradient(60deg,transparent, rgba(17, 17, 17, 0.85) 45%,  rgba(17, 17, 17, 0.85) 55%, transparent),  url(../img/background.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 770px;
    color: #fff;
    text-align: center;
    position: relative;
    
}

.header .container > img{
    width: 83px;
    height: 80px;
    margin-top: 30px;
}
.header h1{
    width: 80%;
    margin-top: 3%!important;
    font-size: 2.875rem;
    font-weight: 600;
    margin-bottom: 10px !important;
}
.header p{
    width: 64%;
    margin: auto;
    margin-top: 0%;
    font-weight: 300;
    font-size: 24px;
    margin-bottom: 0%;
}
.header ul{
    list-style: none;
    margin-top: 2%;
    margin-bottom: 3%;
}
.header ul li{
    margin-top: 1.2%;
    font-weight: 300;
    font-size: 18px;
}
.header ul li > img{
    width: 2%;
    margin-right: 2%;
}
.header button{
    cursor: pointer;
    background-color: #2142eb;
    border-color: #2142eb;
    width: 260px;
    height: 60px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    font-weight: 300;
    font-size: 1.2rem;
}
.header button:hover{
    -webkit-box-shadow: 0px 0px 9px #3269e8;
    -moz-box-shadow: 0px 0px 9px #3269e8;
    -o-box-shadow: 0px 0px 9px #3269e8;
    box-shadow: 0px 0px 9px #3269e8;
}
/* end carousal */

/* media query for header */

@media(min-width:992px) and (max-width:1300px){
  
    .header .carousel-inner .carousel-item > img{
        height: 580px;
    }
    .carousel-caption h1{
        width: 84%;
        font-size: 33px;
    }
    .carousel-caption p{
        width: 63%;
    }
    .carousel-caption button{
        height: 41px;
        width: 20%;
    }

}
@media(min-width:768px) and (max-width:991px){
    .header{
        height:580px;
    }
     .header .container > img{
        width: 63px;
        height: 60px;
    }
    .header h1{
        width: 78%;
        font-size: 30px
    }
    .header p{
        width: 67%;
        font-size: 19px;
    }
    .header ul li{
        font-size: 14px;
    }
    .header button{
        height: 36px;
        width: 23%;
        font-size: 13px;
    }
}
@media(min-width:551px) and (max-width:767px){
    .header{
        height: 592px;
    }
    .header .container > img{
        width: 53px;
        height: 50px;
    }
    .header h1{
        width: 91%;
        font-size: 26px;
    }
    .header p{
        width: 86%;
        font-size: 20px;
    }
    .header ul li{
        
        font-size: 16px;
    }
    .header button{
           width: 160px;
        height: 41px;
        font-size: 14px;
    }
}
@media(min-width:320px) and (max-width:550px){
    .header{
        height: 455px;
    }
    .header .container > img{
       width: 43px;
        height: 40px;
    }
    .carousel-caption img{
        width: 15%;

    }
    .header h1{
        width: 100%;
        font-size: 16px;
    }
    .header p{
        width: 100%;
        font-size: 13px;
        margin-top: 5%;
    }
    .header ul{
        margin-top: 6%;
    }
    .header ul li{
        font-size: 11px;
    }
    .header button{
        height: 33px;
        width: 36%;
        font-size: 10px;
        margin-left: -1%;
        margin-top: 5%;
    }


}
/* media query for header */

/* end header */

/* start video section */
.touch-bar{
    background-color: #f6f6f6;
    overflow: hidden;
    padding-bottom: 5%
}
.touch-bar .video{
    background: url(../img/mac.jpg) no-repeat;
    height: 570px;
    width: 976px;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    -ms-background-size: 100%;
    background-size: contain;
    margin-top: 123px !important;
    margin-bottom: 70px !important;
}
.touch-bar .video iframe{
    width: 76.6% !important;
    height: 81.9% !important;
    z-index: 9;
    margin-left: 11.75%;
    margin-top: 3.8%;
}
.touch-bar p{
    width: 63%;
    margin-top: 0 !important;
    text-align: center;
    margin: auto;
    font-size: 18px;
    font-family: 'Noto Serif', serif;
    font-style: italic;
    color: #333333;
    font-weight: 500;
}
.touch-bar img{
    margin-top: 3% !important;
}
.touch-bar h5{
    margin-top: 1%;
    color: #333333;
    font-weight: 600;
    font-weight: 600;
    font-size: 18px;
}
.touch-bar span{
    margin-top: -0.5%;
    color: #333;

    font-size: 16px;
    margin-bottom: 23px;
}



/* media query for video section */

@media(min-width:992px) and (max-width:1200px){
    .touch-bar .video iframe{
        height: 84% !important;
    }
    .touch-bar p{
        width: 83%;
        
    }
}
@media(min-width:768px) and (max-width:991px){
    .touch-bar .video {
        height: 718px;
        width: 705px;   
    }    
    .touch-bar .video iframe{
        height: 48% !important;
        width: 76.9% !important;
        margin-top: 2.9%;
    }
     .touch-bar p{
            margin-top: -44% !important;
        width: 86%;
        font-size: 16px;
    }
    .touch-bar img{
        width: 8%;
    }
    .touch-bar h5{
        font-size: 15px;
    }
    .touch-bar span{
        font-size: 14px;
    }
}
@media(min-width:551px) and (max-width:767px){
    .touch-bar .video{
        height: 678px;
        width: 501px;    
    }
     .touch-bar .video iframe{
        height: 36% !important;
        width: 76.9% !important;
        margin-left: 11.6%;
        margin-top: 2.9%;

    }
    .touch-bar p{
        width: 99%;
    margin-top: -78% !important;
        font-size: 14px;
    }
    .touch-bar img{
        margin-top: 5% !important;
        width: 8%;
    }
    .touch-bar h5{
        font-size: 15px;
    }
    .touch-bar span{
        font-size: 13.5px;
    }
}
@media(min-width:320px) and (max-width:550px){
    .touch-bar .video{
        height: 490px;
        width: 277px;
        margin-top: 62px !important;
        margin-bottom: 0 !important;
    }
    .touch-bar .video iframe{
        width: 213px !important;
        height: 135px !important;
        margin-top: 2.9%;
    }
    .touch-bar p{
        width: 100%;
        font-size: 11px;
        margin-top: -96% !important;
    }
    .touch-bar h5{
        font-size: 13px;
    }
    .touch-bar span{
        font-size: 13px;
        margin-bottom: 30px;
    }
}


/* media query for video section */

/* end video section */


/* start why do you need */

.need .container h3{
    margin-bottom: 2%;
    color: #333;
    font-weight: bolder;
    font-weight: 600;
    margin-top: 125px;
    font-size: 30px;
}
.need .container p:first-of-type{
   width: 69%;
    font-size: 20px;
    margin-top: 1%;
    margin-bottom: 60px !important;
    color: #333;
 
}
.need .container p:nth-child(3){
    font-size: 16px;
    color: #555555;
  
    margin-bottom: 25px;
}
.need .container p:nth-child(4){
    width: 59%;
    margin-bottom: 35px !important;
    font-size: 16px;
    color: #555555;
  
}
.need .container p:nth-child(6){
    font-size: 16px;
    color: #555555;
    width: 56%;
    margin-bottom: 70px !important;
  
}
.need .container h5:first-of-type{
    font-size: 20px;
    margin-bottom: 40px;
    color: #333;
    text-transform:uppercase;
    font-weight: 600;
}
.need .container h5:nth-child(7){
    margin-bottom: 50px;
    color: #333;
    font-weight: 600;
        font-size: 24px;
}
.need .container span{
    color: #333;
    font-weight: 600;
    margin-bottom: 0.5%;
    text-transform: uppercase;
}
.need .container .grad-backround{
    background: linear-gradient(to right ,#17ead9,#6078ea);
    border-radius: 8px;
    width: 95%;
    margin-bottom: 3% !important;
     -webkit-box-shadow: 0px 11px 47px #d5d6dc;
    -moz-box-shadow: 0px 11px 47px #d5d6dc;
    -o-box-shadow: 0px 11px 47px #d5d6dc;
    box-shadow: 0px 11px 47px #d5d6dc;
}
.need .container .grad-backround img{
     width: 98%;
    margin: .8% 0.9%;
}
.need .container h5:last-of-type{
    width: 64%;
    font-size: 24px;
    margin-top: 6% !important;
    margin-bottom: 110px !important;
    color: #333;
    font-weight: 600;
}



/* media query for why do you need */
@media(min-width:992px) and (max-width:1200px){

}
@media(min-width:768px) and (max-width:991px){
    .need .container h3{
        font-size: 24px;
    }
    .need .container p:first-of-type{
        width: 76%;
        font-size: 15px;
    }
    .need .container p:nth-child(4){
        width: 65%;
    }
    .need .container h5:first-of-type{
        font-size: 17px;
    }
    .need .container p:nth-child(6){
        font-size: 13.5px;
    }
    .need .container h5:nth-child(7){
        font-size: 17px;
    }
    .need .container span{
        font-size: 13px;
    }
    .need .container h5:last-of-type{
        width: 68%;
        font-size: 18px;
    }
}
@media(min-width:551px) and (max-width:767px){
    .need .container h3{
        font-size: 20px;
    }
    .need .container p:first-of-type{
        width: 87%;
        font-size: 14px;
    }
    .need .container p:nth-child(3){
        font-size: 13.5px;
    }
    .need .container p:nth-child(4){
        width: 90%;
        font-size: 13.5px;
    }
    .need .container h5:first-of-type{
        font-size: 15px;
    }
    .need .container h5:nth-child(7){
        font-size: 15px;
    }
    .need .container span{
        font-size: 12px;
    }
    .need .container .grad-backround img{
        margin: 0.9%;
        margin-bottom: 1.5%;
    }
    .need .container h5:last-of-type{
        font-size: 15px;
        width: 84%;
    }
}
@media(min-width:320px) and (max-width:550px){
    .need .container h3{
        font-size: 16px;
    }
    .need .container p:first-of-type{
        width: 100%;
        font-size: 12px;
    }
    .need .container p:nth-child(3){
        font-size: 12px;
        margin-top: 5%;
    }
    .need .container p:nth-child(4){
        font-size: 12px;
        width: 100%;
    }
    .need .container h5:first-of-type{
        font-size: 13px;
        margin-bottom: 6%;
        margin-top: 7%;
    }
    .need .container p:nth-child(6){
        font-size: 12px;
        width: 100%;
    }
    .need .container h5:nth-child(7){
        font-size: 13px;
    }
    .need .container .grad-backround{
        border-radius: 5px;
    }
    .need .container .grad-backround img{
        margin: 0.9%;
        height: 14px;
        margin-top: -1%;
    }
    .need .container h5:last-of-type{
        font-size: 13px;
        width: 100%;
        line-height: 17px;
    }
}

/* media query for why do you need */

/* end why do you need */


/* start feedback */
.feedback{
    background:url(../img/feedback-overlay.png) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-bottom: 70px;;
    padding-top: 75px;
}
.feedback .feed-fingers p{
    font-size: 30px;
    width: 61%;
    margin-bottom: 2% !important;
    font-family: 'Noto Serif', serif;
    color: #333;
    font-style: italic;
}

.feedback .feed-fingers h6{
    margin-top: 1%;
    color: #333;
    font-weight: 600;
    font-size: 18px;
}
.feedback .feed-fingers span{
    margin-top: -0.4%;
    color: #333;
 
    font-size: 16px;
}

/* media query for feedback */
@media(min-width:992px) and (max-width:1200px){


}
@media(min-width:768px) and (max-width:991px){
    .feedback .feed-fingers p{
        font-size: 26px;
        width: 53%;
    }

}
@media(min-width:551px) and (max-width:767px){
    .feedback .feed-fingers p{
       font-size: 20px;
        width: 77%;
    }
    .feedback .feed-fingers img{
        width: 8%;
    }
    .feedback .feed-fingers h6{
        font-size: 13px;
    }
    .feedback .feed-fingers span{
        font-size: 13px;
    }
}
@media(min-width:320px) and (max-width:550px){
    .feedback .feed-fingers p{
        width: 98%;
        font-size: 15px;
    }
    .feedback .feed-fingers img{
            width: 11%;
        margin-top: 6% !important;
    }
    .feedback .feed-fingers h6{
        font-size: 11px;
    }
    .feedback .feed-fingers span{
        font-size: 11px;
        margin-top: -1.4%;
    }
}



/* media query for feedback */

/* end feedback */

/* start who's for */
.who-for{
    background-image: url(../img/who-s-it-for.jpg);
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    color: #333;
    height: 600px;
}
.who-for h3{
    margin-top: 120px;
    margin-bottom: 60px;
    font-weight: 600;
    font-size: 30px;
}
.who-for ul {
    margin-bottom: 8.5%;
}
.who-for ul li{
    width: 48%;
    margin-top: 1%;
    padding-left: 2.5%;
    font-weight: 500;
    font-size: 16px;

}
.who-for ul li > img{
   width: 4%;
    margin-right: 2%;
    display: inline-block;
    margin-left: -6%;
    
}

/* media query for who's for */
@media(min-width:992px) and (max-width:1200px){
    .who-for{
        height: 536px;
    }

}
@media(min-width:768px) and (max-width:991px){
    .who-for{
        height: 292px;
    }
    .who-for h3{
        margin-top: 49px;
        margin-bottom: 14px;
        font-size: 26px;
    }
    .who-for ul li{
        font-size: 12px;
        width: 51%;
    }
}
@media(min-width:551px) and (max-width:767px){
    .who-for{
        height: 216px;
    }
    .who-for h3{
        font-size: 18px;
        margin-top: 31px;
        margin-bottom: 12px;
    }
    .who-for ul li{
        width: 54%;
        font-size: 10px;
    }
}
@media(min-width:320px) and (max-width:550px){
    .who-for{
        height: 138px;
    }
    .who-for h3{
        font-size: 15px;
        margin-top: 12px;
        margin-bottom: 5px
    }
    .who-for ul li{
       width: 82%;
        font-size: 7px;
    }
}
/* media query for who's for */

/* end who's for */


/* start user experiences */
.user-experiences{
    background: url(../img/user-experiences.png) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow: hidden;
    color: #333;
}
.user-experiences h3{
    margin-top: 100px;
    margin-bottom:60px;
    font-weight: 600;
    font-size: 30px;
}
.user-experiences  .user-quote .quote{
    background-color: #fff;
    width: 100%;
    height: 164px;
    overflow: hidden;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.user-experiences  .user-quote .quote img{
    width: 35px;
    position: absolute;
    top: 7%;
    left: 9%;
}
  
.user-experiences .user-quote .quote p{
    width: 74%;
    font-size: 16px;
    margin-top: 7% !important;
    margin-left: 20% !important;
    font-family: 'Noto Serif', serif;
    font-style: italic;
    color: #4c4c4c;
}
.user-experiences .user-quote h6{
    font-size: 15px;
    margin-top: 6%;
    font-weight: 600;
    color: #4c4c4c;
    font-weight: bold;
    font-size: 16px;
}
.user-experiences .user-quote span{
    margin-top: -1.5%;
    font-size: 14px;
 
    color: #4c4c4c;
    margin-bottom: 100px;
}

/* media query for user experiences */
@media(min-width:768px) and (max-width:991px){
    .user-experiences .user-quote .quote .img3{
        top: 10%;
        left: 14%;
    }
}

@media(min-width:551px) and (max-width:767px){
    .user-experiences .user-quote h6{
        font-size: 13px;
    }
    .user-experiences .user-quote span{
        margin-bottom: 5%;
        font-size: 13px;
    }
}
@media(min-width:320px) and (max-width:550px){
    .user-experiences h3{   
        font-size: 26px;
    }
    .user-experiences .user-quote .quote p{
        font-size: 15px;
    }
    .user-experiences .user-quote h6{
        font-size: 13px;
    }
    .user-experiences .user-quote span{
        margin-bottom: 5%;
        font-size: 13px;
    }
}



/* media query for user experiences*/


/* end user experiences */



/* start what can you expect */
.what-expect h3{
    margin-top: 100px;
    margin-bottom: 30px;;
    color: #333;
    font-size: 30px;
   font-weight: 600;
}
.what-expect span{
    margin-bottom: 30px !important;
    color: #333;
    font-size: 20px;
    font-weight: 300;
}
.what-expect p:first-of-type{
    width:46%;
    margin: 1% auto;
    color: #555;
 
    margin-bottom: 30px;
}
.what-expect p:last-of-type{
    width:63%;
    margin: 1.5% auto;
    margin-bottom: 100px;
    color: #555;
 
}

/* media query for what can you expect */

@media(min-width:551px) and (max-width:767px){
    .what-expect h3{
        font-size: 21px;
    }
    .what-expect span{
        font-size: 15px;
    }
    .what-expect p:first-of-type{
        width: 85%;
        font-size: 15px;
    }
    .what-expect p:last-of-type{
        width: 85%;
        font-size: 15px;
    }

}
@media(min-width:320px) and (max-width:550px){
    .what-expect h3{
        font-size: 17px;
    }
    .what-expect p:first-of-type{
        width: 100%;
        font-size: 13px;
    }
    .what-expect p:last-of-type{
        width: 100%;
        font-size: 13px;
        margin-bottom: 8%;
    }
}

/* media query for what can you expect */

/* end what can you expect */


/* start What happens with your free trial */
.free-trial{
    background-color: #f6f6f6;
    overflow: hidden;
}
.free-trial h3{
    margin-top: 120px;
    margin-bottom: 70px;;
    color: #333;
    font-size: 30px;
    font-weight: 600;
}
.free-trial p{
    margin-top: 7% !important;
    color: #333;
    font-weight: 600;
    width: 81%;
    margin: auto;
    font-size: 18px;
    margin-bottom: 55px !important;
}
.free-trial p .blue{
    color: #2142eb;
}
.free-trial .icons{
    width: 60px;
    height: 60px;
    background-color: #2143ea;
    border-radius: 50%;
    overflow: hidden;
     -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    cursor: pointer;
}
.free-trial .icons:hover{
    -webkit-box-shadow: 0px 0px 9px #3269e8;
    -moz-box-shadow: 0px 0px 9px #3269e8;
    -o-box-shadow: 0px 0px 9px #3269e8;
    box-shadow: 0px 0px 9px #3269e8;
}
.free-trial .icons .img1{
    width: 24px;
    margin-left: 19px;
    margin-top: 11px;
}
.free-trial .icons .img2{
    width: 32px;
    margin-top: 14px;
    margin-left: 14px;
}
.free-trial .icons .img3{
    width: 30px;
    margin-top: 13px;
    margin-left: 15px;
}
.free-trial .icons .img4{
    width: 37px;
    margin-top: 16px;
    margin-left: 11px;
}
.free-trial .icons .fa{
    color: #fff;
    line-height: 60px;
    margin-left: 34%;
    margin-top: 5%;
}
.free-trial .icons .fa-calendar-o:before {
    position: absolute;
    font-size: 31px;
    margin-left: -1.5%;
    margin-top: -1%;
}
.free-trial .btn{
    background-color: #2142eb;
    border-color: #2142eb;
    height: 60px;
    width: 260px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    cursor: pointer;
    margin-bottom: 120px !important;
    font-weight: 300;
    font-size: 1.2rem;
}
.free-trial .btn:hover{
    -webkit-box-shadow: 0px 0px 9px #3269e8;
    -moz-box-shadow: 0px 0px 9px #3269e8;
    -o-box-shadow: 0px 0px 9px #3269e8;
    box-shadow: 0px 0px 9px #3269e8;
}

/* media query for What happens with your free trial */

@media(min-width:551px) and (max-width:767px){
    .free-trial p{
        margin-bottom: 11%;
    }
    .free-trial .btn{
        height: 40px;
        width: 28%;
        font-size: 15px;
    }
}
@media(min-width:320px) and (max-width:550px){
    .free-trial h3{
        font-size: 19px;
    }
    .free-trial p{
        width: 74%;
        font-size: 14px;
        margin-top: 4% !important;
        margin-bottom: 5% !important;
    }
    .free-trial .btn{
       height: 38px;
        width: 116px;
        font-size: 13px;
    }
}


/* media query for What happens with your free trial */

/* end What happens with your free trial */


/* start buy the app now */
.buy-app h3{
    margin-top: 125px;
    margin-bottom: 65px;
    color: #333;
    font-weight: bold;
    font-weight: 600;
    font-size: 30px;
}
.buy-app span{
    color: #333;
    font-weight: bold;
    font-weight: 600;
}
.buy-app p{
    color: #555;
 
    margin-bottom: 30px;
}
.buy-app .btn{
    background-color: #2142eb;
    border-color: #2142eb;
    height: 60px;
    width: 260px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    cursor: pointer;
    margin-top: 55px !important;
    margin-bottom: 230px !important;
    font-weight: 300;
    font-size: 1.2rem;
}
.buy-app .btn:hover{
    -webkit-box-shadow: 0px 0px 9px #3269e8;
    -moz-box-shadow: 0px 0px 9px #3269e8;
    -o-box-shadow: 0px 0px 9px #3269e8;
    box-shadow: 0px 0px 9px #3269e8;
}

/* media query for buy the app now */

@media(min-width:320px) and (max-width:550px){
    .buy-app h3{
        font-size: 18px;
    }
    .buy-app span{
        font-size: 15px;
    }
    .buy-app p{
        font-size: 15px
    }
    .buy-app .btn{
        height: 38px;
        width: 100px;
    }
}

/* media query for buy the app now */

/* end buy the app now */

/* start copyright */
.copyright{
    border-top: 1px solid #ebebeb;
    padding: 1% 0;
    color: #999;
    font-weight: 300;
}
/* media query for copyright */
@media(min-width:320px) and (max-width:767px){
    .copyright span{
        display: block !important;
        text-align: center
    }

}
@media(min-width:320px) and (max-width:500px){
    .copyright span{
        font-size: 13px;
    }

}
/* media query for copyright */
/* end copy right */