/* Main Rules */


body{
    font-family: 'Ubuntu', sans-serif;
}
ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
.btn{background-color: #0073EC; color: #fff; transition: all ease-in-out .3s;}
.btn:hover{transform: scale(1.1);color:#fff;}
.btn-custom, .btn-outline{
    background: #0073EC;
    border-radius: 5px;
    color: #fff;
    padding: 5px 25px;
    margin-right: 15px;
    font-size: 18px;
    border: 3px solid #0073EC;
}

.btn-outline{background: transparent;border: 3px solid #fff;}
.btn-custom:hover{color:#fff;background-color: transparent;}
.btn-outline:hover{background-color: #fff;color: #222;}


.section-header {padding-top:2rem; padding-bottom: 3rem;}
.section-header h2{font-size: 2.5rem;font-weight: 600;} 
.section-header p{font-size: 1.5rem}


.overlay{
    background: #396afc;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #2948ff, #0073EC);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #2948ff, #0073EC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1;
    opacity: 0.7;
}


/* Header and Nav */

header{
    width: 100%;
    display: flex;
    position: relative;
    text-align: center;
    overflow: hidden;
    color: #fff;
    padding-bottom: 5rem;
    background-image: url(../img/cover2.jpg);
    background-size: cover;
}

header .container{
    z-index: 3;
}


header nav .h1{
    font-size: 25px;
    padding-right: 4rem;
    line-height: 18px;
    padding-top: 10px;
}
header nav .navbar-nav .nav-link{
    font-size: 18px;
    color: rgb(255,255,255);
    padding-right: 1rem;
    position: relative;
    transition: .2s;
}
header nav .navbar-nav .nav-link:after{
    transition: all ease-in-out .2s;
    -webkit-transition: all ease-in-out .2s;
    background: #fff;
    width: 90%;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    
}
header nav .navbar-nav .nav-link:hover:after{
    content: "";
    opacity: 1;
    transition: all ease-in-out .2s;
    -webkit-transition: all ease-in-out .2s;
}

header .main-header{
    width: 50%;
    text-align: left;
    padding: 6rem 1rem;
}
header .main-header .h1{
    font-weight: 600;
    text-transform: capitalize;
    padding: 10px 0;
}
header .btn-wrapper{
    padding: 2rem 1rem;
}
header .promotions{
    text-transform: capitalize;
    padding: 1rem 0;
}
header .promotions .promo{
    color: #fff;
    font-size: 18px;
    padding: 5px 0;
    display: block;
}
header .promotions .promo i{padding-right: 10px;font-size:20px;font-weight: 900;}
header .promotions .promo i:first-child{padding-right: 10px;}
header .promotions .promo i:last-child{padding-left: 10px;}
header .waves {
    position: absolute;
    bottom: 0rem;
    right: 0;
    width: 100%;
    z-index: 2;
}





/* Pricing */

.pricing{overflow: hidden; padding-bottom: 10em; padding-top: 4em;}
.pricing-item{margin-bottom: 4em;}
.pricing-wrapper{
    padding: 2em 3em;
    background-color: #fff;
    border-radius: 10px;
    -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}
.pricing h3{
    font-size: 40px;
    padding: 10px 0;
    color: #0073EC;
}

.pricing ul li{padding:10px 0}
.pricing ul li i{padding-right:10px; color: #0073EC;}
.pricing .pricing-footer{padding-top: 2em;}
.pricing .price{font-size: 30px;padding-bottom: 10px;color: #0073EC;}
.pricing .price span{font-size: 18px;color: #212529;}
.pricing .pricing-footer .btn{
    background-color: #0073EC;
    padding: 10px 15px;
    border-radius: 15px;
}
.pricing .featured {
    transform: scale(1.1);
    background: #396afc;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #2948ff, #0073EC);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #2948ff, #0073EC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #fff!important;
}
.pricing .featured ul li i,.pricing .featured .price span,.pricing .featured .price,.pricing .featured h3{color:#fff}
.pricing .featured .pricing-footer .btn{background-color: #fff; color:#0073EC}

/* FAQ */

.card-header{border: 1px solid rgba(255,255,255,1);}
.faq .btn{
    background: #396afc;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #2948ff, #0073EC);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #2948ff, #0073EC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

/* Features */

.features, .services{padding-bottom:4rem;}
.features .features-item i{font-size:3rem;color: #0073EC; padding: 1rem 0;}
.features .features-item h3 {font-size:1.56rem; font-weight: 600; padding: 1rem 0;}
.features .features-item p {text-align: justify; font-size: 16px; padding: 0 0.7rem; margin: 0 auto;text-align-last: center;}

/* Services */


.services .services-item {padding:0 0.7rem}
.services .services-item .item-wrapper{
    border: 1px solid #0073EC;
    border-radius: 10px;
    padding: 3rem 2rem;
    background-color: #fff;
}
.services .services-item i {font-size:5rem;color: #0073EC; padding-bottom: 2rem;}
.services .services-item h2 {font-size:2rem; font-weight: 600;}
.services .services-item p {text-align: justify; font-size: 16px; padding: 1rem 0.7rem; margin: 0 auto;text-align-last: center;}
.services .services-item .br-line {padding-top: 0.5rem;}
.services .services-item .br-line span{color: #0073EC;}
.services .services-item .btn{background-color: #0073EC; color: #fff; transition: all ease-in-out .3s;}
.services .services-item .btn:hover{transform: scale(1.1);}


/* Partners and Payment */

.partners, .payment{padding-bottom: 4rem;}

.partners .logo-container, .payment .logo-container {padding: 2em 3em;}

.partners img, .payment img{
    width: 100%;
    opacity: 0.7;
    transition: all ease-in-out .2s;
}
.partners img:hover, .payment img:hover{
    opacity: 1;
}



/* Support */

.support{
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    color: #fff;
    background-image: url(../img/supportimg.jpg);
    background-size: cover;
    background-position-y: -6rem;

}
.support .container{
    padding: 6rem 0;
    z-index: 2;
}
.support h2{font-size: 3.5rem;font-weight: 600;padding-bottom: 1rem;}
.support p{font-size: 1.5rem;padding-bottom: 1rem;}
.support .btn{background-color: #fff; color: #222; font-size: 20px; padding: 10px 40px; transition: all ease-in-out .3s;}
.support .btn:hover{transform: scale(1.1);}


/* Footer */

footer{background-color: #212529;padding: 4rem 4rem;}
footer h3{color:#fff;font-size:1.5em;padding-bottom: 1em;}
footer ul li {padding: 5px 0;}
footer ul li a {color:#0073EC;transition: all ease-in-out .2s;}
footer ul li a:hover {color:#fff; text-decoration: none;}
footer p{color:#fff;font-size:18px;text-align: justify;}
footer .bt-ft{padding-top: 2rem;}
footer .social a{color:#fff;font-size:2em;padding-right:5px;transition: all ease-in-out .2s;}
footer .social a:hover{color:#0073EC}
footer .copyrights{text-align: right;color:#fff;line-height: 3;}


/* Responsive */

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

@media (max-width: 576px) {
    .support .container{padding-right:20px;padding-left:20px;}
    
}

@media (max-width: 768px) { 
    
    .services .services-item, .pricing .pricing-item .item-wrapper{
        margin-bottom: 10px;
    }
    footer{text-align: center;}
    footer .foot-col {margin-bottom: 20px;}
    footer .copyrights {text-align: center;}
    .pricing .featured {
        transform: scale(1);
    }
    
    
}


@media (max-width: 992px) {
    
    header .main-header{width: 100%; text-align: center;}
    .btn{margin: 20px;}
    .support{background-position-y: 0;}

}

@media (max-width: 1200px) {}