@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

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

ul li{
    list-style: none;
}
    .navbar{
    height: 80px;
    background-color: transparent;
}

.nav-item{
    margin-right: 10px;
}


.nav-item .nav-link{
    font-weight: 500;
    color: white !important;
    font-size: 18px;
}

.navbar .btn{
    width: 120px;
    height: 40px;
    
}


.header{
    height: 100vh;
    width: 100%;
    background-image: url('../images/bgr-header.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white !important;
    
}

.content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 85%;
    width: 100%;
}

.content .img-side{
    max-width: 48%;
}

.img-side img{
    width: 100%;
    height: 100%;
}

.text-side{
    max-width: 60%;
}

.text-side p:first-of-type{
    font-size: 14px;
}

.text-side h2{
    font-size: 58px;
    text-transform: capitalize;
    font-weight: 600;
    margin-bottom: 10px;
}

.text-side p:last-of-type{
    font-size: 12px;
    margin-bottom: 30px;
}


.aboutUs{
    padding-top: 80px;
    padding-bottom: 60px;
    background-image: url('../images/Curve\ Line3.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


.aboutUs .img-sec img{
    width: 100%;
}

.text-sec h5{
    font-size: 14px;
    color: #218838;
}

.text-sec h2{
    font-size: 55px;
    text-transform: capitalize;
    font-weight: 600;
    color: #666;
}



.products{
    padding-bottom: 80px;
}

.products p{
    font-size: 14px;
    text-transform: capitalize;
    color: #218838;
    margin-bottom: 4px;
}

.products h3{
    font-size: 40px;
    text-transform: capitalize;
    font-weight: 600;
    color: #888;
}

.products p:nth-of-type(2){
    margin-bottom: 40px;
}

.product-item{
    text-align: center;
    background-color: white !important;
    color: rgba(65, 35, 146, 0.8);
    height: 180px;
    line-height: 115px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    margin: .5%;
    border-radius: 2px;
}

/* 
.product-item:nth-of-type(1){
    background-color: #d45c0d;
}

.product-item:nth-of-type(2){
    background-color: #0e73a1;
}

.product-item:nth-of-type(3){
    background-color: #e91e63;
}

.product-item:nth-of-type(4){
    background-color: #4845B4;
}

.product-item:nth-of-type(5){
    background-color: #009688;
}

.product-item:nth-of-type(6){
    background-color: #4845B4;
} */


.products .product-item img{
    width: 50px;
}


.products .product-item h5{
    font-size: 16px;
    text-transform: capitalize;
    font-weight: 600;

}




.feat{
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: aliceblue;
}

.tophead{
    font-weight: 600;
    margin-bottom: 30px;
}

.tophead h2{
    font-size: 50px;
    color: #666;

}
.tophead .p{
    font-size: 18px;
    color: #218838;
    font-weight: 500;
}

.feat-item{
    padding: 15px;
    border-radius: 5px;

}

.feat-item img{
    width: 80px;
    margin-bottom: 20px;
}


.feat-item h3{
font-size: 20px;
color: #218838;

}

.feat-item p{
    font-size: 15px;
}


.feat-img img{
    width: 90%;
    margin-left: 10%;
}



.ourValue{
    position: relative;
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: aliceblue;
    background-image: url('../images/bgr-banner3.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}



.ourValue h2{
    font-size: 40px;
    text-transform: capitalize;
    font-weight: 600;
    color: #fff;

}

.ourValue .p{
    margin-bottom: 60px;
    color: #fff;
}

.ourValue .img img{
    width: 100%;
}


.cardList{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cardList h4{
    font-size:16px;
    min-width:190px;
}

.ourValue .cardList .card{
    width: 300px;
    height: 150px;
    padding: 10px;
    border-radius: 10px;
    background-color: white;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.ourValue .cardList .text{
    text-align: left;
}

.card h4{
    text-transform: capitalize;
}

.card p{
    text-transform: capitalize;
    font-size: 14px;
}


.cardList .card .img-box img{
    width: 100%;
    height: 100%;
}



.pricing{
padding-bottom: 60px;
padding-top: 60px;
text-align: center;
background-image: url('../images/Curve\ Line\ \(2\).svg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

.pricing h2{
    font-weight: 600;
    font-size: 40px;
    text-transform: capitalize;
    color: #666;


}

.price{
    color: #fcfcfc;
    margin-bottom: 20px;
    font-size:20px;
}

.pricing .p{
    text-transform: capitalize;
    color: #218838;

}

.pricing-item h2{
    text-transform: capitalize;
    font-size: 38px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #218838;
}

.pricing-item{
    border-radius: 10px;
    box-shadow: rgba(8, 8, 97, 0.2) 0px 7px 29px 0px;
    padding: 20px;
    color: white;
    margin: 1%;

}

/*.pricing-item ul li{*/
/*    margin-bottom:5px;*/
/*}*/

.pricing-item ul {
  list-style: none;
  padding-left: 0;
  text-align: left;
}
.pricing-item ul li {
  position: relative;
  padding-left: 1.5em;  /* space to preserve indentation on wrap */
}
.pricing-item ul li:before {
    content: "\2605";
    font-family: 'Glyphicons Halflings';
    font-size: 13px;
    float: left;
    margin-top: 4px;
    margin-right: 30px;
    color: #CCCCCC;
}


.normal{
     background-image: linear-gradient(#771BBD, #3f2ab6);
}

.unique{
    background-image: linear-gradient(#1bbd79, #5343b3) !important;
}

.pricing-item h3{
    text-transform: capitalize;
    font-weight: 600;
    margin-bottom: 20px;
}
.pricing-item img{
    width: 100px;
    margin-bottom: 20px;
}

.pricing-item:nth-child(3) img{
margin-bottom: 40px;
}

.list a{
    text-transform: capitalize;
}


@media (min-width: 768px){
    .col-md-6{
        max-width: 48%;
    }
}


@media (min-width: 992px){
    .col-lg-4{
        max-width: 31.333333%;
    }
}

.fa-check{
    color: #f44336;
}





.contact-us{
    position: relative;
    padding-top: 80px;
    padding-bottom: 80px;
    background-image: url('../images/bgr-banner3.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}



.formSide{
    background-color: #fff;
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 10px;
    text-align: left;
}

form{
    width: 100%;
}


.contact-us p ,.contact-us h3{
    color: #218838;
    text-transform: capitalize;
    
}

.imgForm{
    display: flex;
    align-items: center;
    justify-content: center;
}

.imgForm img{
    width: 100%;
}







.blog{
    padding-top: 80px;
    padding-bottom: 80px;
    background-image: url('../images/Curve\ Line\ \(2\).svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.blog h2{
    font-size: 40px;
    font-weight: 600;
    text-transform: capitalize;
    color: #666;

}

.blog .p{
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    color: #218838;
}

.blog-item{
    border-radius: 10px;
    overflow: hidden;
    background-color: aliceblue;
    box-shadow: rgba(8, 8, 97, 0.2) 0px 7px 29px 0px;
    padding: 0;
    margin: 1%;

}

.blog .blog-item .img-box{
    width: 100%;
    height: 220px;
    margin-bottom: 10px;

}

.blog .blog-item .img-box img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;


}

.blog-item h4{
    font-size: 20px;
    margin-bottom: 10px;
    margin-top: 30px;
    color: #218838;
}

.blog-item p{
    font-size: 14px;
}

@media (min-width: 992px){
    .col-lg-3{
        max-width: 23%;
    }

    .col-lg-2{
        max-width: 15.6%;
    }
}





.footer{
    padding-top: 80px;
    padding-bottom: 10px;
    background-image: url('../images/bgr-banner3.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: white;
}

.footer ul li{
    display: inline-block;
    margin: 10px;
}

.footer ul li a{
    color: white;
    text-decoration: none;
}

.footerHead ul{
    margin-top: 20px;
}

.footerHead ul li:hover .fa-facebook{
    color: #0b5dff;
}

.footerHead ul li:hover .fa-instagram-square{
    color: #E1306C;
}

.footerHead ul li:hover .fa-twitter{
    color: #1DA1F2;
}

.footerHead ul li:hover .fa-linkedin-in{
    color: #2867B2;
}

.footerHead ul li:hover .fa-pinterest-square{
    color: #E60023;
}

.footerHead ul li:hover .fa-snapchat-ghost{
    color: #FFFC00;
}

.footerBody ul li{
    border-left: 2px solid black;
    padding-left: 10px;
}

.footerBody ul li a{
text-transform: capitalize;
font-size: 22px;
}



.hvr-shutter-out-vertical::before{
    background-color: #016DAB !important;
}

.t{
    left: 55% !important;
}

.t2{
    left: 52.5% !important;
}

.animation{
    position: absolute;
    left: 50%;
    animation: spin 2s linear infinite ;
    
}


@keyframes spin {
    0%{transform: rotate(0deg);}
    100% {transform: rotate(360deg)}
}

.size{
    width: 30px;
    height: 30px;
}



.animation2{
    position: absolute;
    right: 30%;
    bottom: -10%;
    animation: walk 4s linear infinite alternate ;
}


.animation3{
    position: absolute;
    right: 30%;
    animation: walk2 4s linear infinite alternate-reverse ;
}

.animation4{
    position: absolute;
    right: 40%;
    top: 20%;
    animation: spin 2s linear infinite alternate;
}

.animation5{
    position: absolute;
    right: 20%;
    bottom: 10%;
    animation: spin 2s ease-in-out infinite alternate;
}

.animation6{
    position: absolute;
    top: 50%;
    right: 50%;
    animation: walk 4s linear infinite alternate;
}

.animation7{
    opacity:.5;
    position: absolute;
    left: 10%;
    bottom: -10%;
    animation: scale 1s linear infinite alternate;
}

.animation8{
    position: absolute;
    left: 10%;
    bottom: 10%;
    animation: spin 3s linear infinite alternate;
}

@keyframes walk{
    0% {transform: translateX(0) translateY(0)}
    15%{transform: translateX(10px) translateY(30px) }
    30%{transform: translateX(30px) translateY(0) }
    45%{transform: translateX(50px) translateY(30px) }
    60%{transform: translateX(70px) translateY(0) }
    75%{transform: translateX(90px) translateY(30px) }
    100%{transform: translateX(110px) translateY(0)  }
}

@keyframes walk2{
    0%{transform: translateX(0) translateY(0)}
    15%{transform: translateX(10px) translateY(30px) }
    30%{transform: translateX(30px) translateY(0) }
    45%{transform: translateX(50px) translateY(30px) }
    60%{transform: translateX(70px) translateY(0) }
    75%{transform: translateX(90px) translateY(30px) }
    100%{transform: translateX(110px) translateY(0)}

}


@keyframes scale{
    0%{transform: scale(.8)}

    100%{transform: scale(1.2)}

}







@media (max-width:570px){
    
   .animation,.animation2,.animation3,.animation4,.animation5,.animation6,.animation7,.animation8{
        display:none;
    }
    

    
    .navbar-collapse{
    background-color:#28a745;
    padding:10px;
    text-align:center;
}

    .header{
        height: 70vh;
    }
    .text-side p:first-of-type{
        font-size: 12px;
    }

    .text-side h2{
        font-size: 25px;
        margin-bottom:40px;
    }

    .text-side p:last-of-type{
        font-size: 14px;
    }

    .text-side{
        max-width:100%;
        text-align: center;
        
    }

    .btns .btn{
        font-size: 14px;
    }

    .text-sec{
        text-align: center;
        margin-bottom: 50px
    }

    .text-sec h5{
        font-size: 12px;
    }

    .text-sec h2{
        font-size: 25px;
    }

    .text-sec p{
        font-size: 14px;
    }

    .text-sec .btn{
        font-size: 14px;
    }



    .products p{
        font-size: 12px;
    }

    .products h3{
        font-size:25px ;
    }


    .product-item{
        margin: 10%;
        margin-bottom: 10px;
        margin-top: 10px;    }

    /**/


    .tophead h2{
        font-size: 25px;
    }

    .tophead .p{
        font-size: 14px;
    }

    .feat{
        text-align: center;
    }

    .feat-item{
        text-align: center !important;
        align-items:center;
    }

    .ourValue h2{
        font-size: 25px;
    }

    .ourValue .p{
        font-size: 12px;
    }

    .img-box{
        width: 85px;
    }

    .card p{
        width: 75%;
    }

    .img{
        margin-top:40px;
        margin-bottom: 50px;
    }


    .pricing h2{
        font-size: 25px;
    }

    .pricing .p{
        font-size: 14px;
    }

    .pricing-item{
        margin: 10%;
        padding:14px;
    }

    .formSide{
        margin: 5%;
        margin-bottom: 50px;
    }


    .blog h2{
        font-size: 25px;
    }

    .blog .p{
        font-size: 12px;
    }

    .blog-item{
        margin: 14%;
        margin-bottom: 10px;
        margin-top: 10px;
    }
}



@media (min-width: 768px) and (max-width: 991.98px) { 

    .header{
        height:60vh
    }
    .text-side{
        max-width: 100%;
    }

    .text-sec{
        margin-bottom: 50px;
    }






    
    .img-box{
        width: 85px;
    }

    .card p{
        width: 75%;
    }

    .img{
        margin-bottom: 50px;
    }

 }