html{
    scroll-behavior: smooth;
}
*{
    margin:0;padding:0px;box-sizing: border-box;font-family: 'Poppins', sans-serif;
}
.extra-div h2{
    font-size: 0.9rem;
    margin:20px 0 15px 0;
font-weight: bold;
line-height: 1.1;
word-spacing: 4px;}
a{
    text-decoration: none;
}
a:hover{
    text-decoration: none;
}
li{list-style: none;}
a:hover{text-decoration: none;}
p{
    color:#606060;
    font-size:0.9rem;
    line-height: 1.6;
    font-weight: 400;
}
.extra-div h2,.servicediv h2{
    margin:20px 0 15px 0;
    font-size:0.9rem;
    word-spacing:4px;
    font-weight:400;
    line-height: 1.1;
}
.header{
    width: 100%;
    height:100vh;
    background-image: linear-gradient(rgba(0,168,255,0.3),rgba(0,168,255,0.3)),url('../images/attr.jpg');
    background-repeat: no-repeat;
    background-size:100% 100%;
    clip-path:polygon(100% 0%,100% 75%,50% 100%,0 75%,0 0);
    position: relative;
}

.header:before{
    content:"";
    position:absolute;
    top:0%;
    bottom:0%;
    left:0%;
    right:0%;
    /*opacity: .3%;
    z-index: -1;
    background:linear-gradient(to right,#1e5799 0%,#3ccdbb 0%,#16c9f6 100%);
*/
}
.navbar:before{
    content:"";
    position:absolute;
    top:0%;
    bottom:0%;
    left:0%;
    right:0%;
    opacity: .3%;
    z-index: -1;
    background:linear-gradient(to right,#1e5799 0%,#3ccdbb 0%,#16c9f6 100%);

}
.nav-item a{
    color:white!important;
    font-weight: bold;
}
.header-section{
    width: 100%;
    height:inherit;
    color:white;
    text-align: center;
    position: relative;
}
.center-div{
    width:100%;
    height:auto;
    position: absolute;
    transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    top:50%;
    left:50%;
}
.header-buttons a{
    border:1px solid white;
    border-radius: 100px;
    margin:0 5px;
    padding:12px 35px;
    outline:none;
    color:white;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
}
.header-buttons a:hover{
    color:white;
    background-color:black;
    text-decoration: none;
    box-shadow:0 0 20px 0 rgba(0,0,0,0.3);
}
.center-div p{
    font-size: 1.3rem; 
    padding:10px 0 20px 0; 
    color:white;   
}
.header-extradiv{
    width:100%;
    height:auto;
    margin:100px 0;
    text-align:center;
}
.extra-div{
    background:white;
    border:medium none;
    padding:50px;
    border-radius: 3px;
    transition:0.3s;
}
.extra-div:hover{
    box-shadow: 0 0 20px 0 rgba(0,0,0,0.3);
    transform: translateY(-20%);

}
.service-icons{
    display: flex;
    justify-content: center;
    align-items: center;
}
.progress{
    height:0.6rem;
    margin-bottom: 25px!important;
    background: #606060;
}
/*------------Project offers css starts --------*/
.project-work{
    margin:100px 0;

}
.project-work h1{
    font-size:2rem;
    text-align: center;
}
.serviceoffers{
    background: #f7f7f9;
    padding: 50px 0;
    margin-bottom: 50px;

}
.headings h1{
    font-size:1.5rem;
    font-weight: 600;
    text-transform: uppercase;
}
.names h1{
    color:#2e2e2e;
    font-size: 0.9rem;
    font-weight: bold;
}
/*--------------project offers ends*/

/*------------PRICING CSS----*/
.pricing{
    width:100%;
    height:100vh;
    padding:50px;
    position: relative;
}
.navbar:before{
    content:"";
    position: absolute;
    top:0%;
    bottom:0%;
    left:0;
    right:0;
    opacity: .3;
    z-index:-1;
    background:linear-gradient(160deg,#16c9f6 55%,#fff 0);
}
i{
    color:#2fcdcd;
}
.pricing{
    width:100%;
    height:100vh;
    padding:50px;
    position:relative;
}
.navbar:before{
    content:"";
    position:absolute;
    top:0%;
    bottom:0%;
    left:0%;
    right:0%;
    opacity: .3;
    z-index:-1;
    background:linear-gradient(160deg,#16c9f6 55% 0);

}
.money{
font-size: 40px;
line-height: 1;
color:#606060;
}
.card{
    transition: 0.4s ease;
}
.card-header{
    font-size: 1.6rem;
    font-weight: bold;
    background: #fff;
    padding:25px 9!important;
}
.card-body{
    padding:30px 0px!important;
}
.card-body li{
    margin:10px 0;
    font-weight:400;
    font-size:15px;
    line-height: 1.6;
    color:#606060;
}
.card-footer{
    background: white!important;
    padding:30px 0px!important;
}
.card:hover .card-footer a{
    border:1px solid #50d1c0;
    border-radius: 100px;
    margin:0 5px;
    padding:12px 35px;
    outline:none;
    color:#50d1c0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
}
.card-footer a:hover{
    color:#50d1c0;
    background-color: #50d1c0;
    text-decoration: none;
    box-shadow:0 0 20px 0 rgba(0,0,0,0.3);
}
.card:hover{
    transform:translateY(-20px);
    box-shadow: 0 0 20px 0 rgba(0,0,0,0.3);
}
.card:hover .card-header,.card:hover .money{
    color:#50d1c0;
}
.card-second{
    transform:translateY(-20px);
      box-shadow: 0 0 20px 0 rgba(0,0,0,0.3);
}
/*----------customer-----------*/
.happyclients{
          width:100%;
          height:100vh;
          padding:80px 0;
}
.box{
          text-align: center;
          border:1px solid rgba(0,0,0,0.2)
          /*box-shadow: 0 5px 10px 0 rgba(0,0,0,0.3);*/          /*border-radius: 2px; */
}      
.box:hover{
    background :#16c9f6;
}
.box:hover p{
    color:white;
}
.carousel-indicators{
    position:absolute;
    right:0;
    bottom:-60px!important;
}
.carousel-indicators li{
    background-color:#16c9f6!important;
}
.box a{
    position: relative;

}
.box a img{
    width:100px;
    height:100px;
    border-radius: 50%;
    margin-top:20px;
}
.box a:after{
    content:"\f10d";
    font-family: FontAwesome;
    width:40px;
    height:40px;
    border-radius:50%;
    background:linear-gradient(to right,#1e5799 0%,#3ccdbb 0%,#16c9f6 100%);
color: white;
position: absolute;
top: 120%;
left:10%;
display: flex;
justify-content: center;
align-items:center;
}
.box h1{
    font-size: 13px;
    font-size:400;
    color:#000;
    margin-bottom: 10px;
}
.box h2{
    font-size:13px;
    
}
/**ends*/
/**********   contact      **********/
.contactus{
    width:100%;
    position: relative;
    padding: 80px 0;
    height:100vh;

}
.contactus:before{
    content: "";
    top:0;
    position: absolute;
    left:0;
    right:0;
    bottom:0%;
    background:linear-gradient(330deg,#16c9f6 55%,white 0%);
    z-index:-1;
}
::placeholder{
    font-size: 0.85rem;
}
/**********newslettter*/
.newsletter{
    height:auto;
    width:100%;
    margin:80px auto;
}
.news-input{
    border-radius: 100px 0px 0px 100px!important;
    min-width:150px;
    min-width:45px;
}
.input-group-text{
    color:#fff!important;
    color:#5bc0de!important;
    border-radius: 0 100px 100px 0!important;
min-height: 40px;
min-width: 130px;
}

.footersection{
    width:100%;
    height:auto;
    padding:72px 0 20px 0;
    background: #00abff;
    position: relative;
}
.footersection p{
    color:#fff;
}
.footersection li a{
    font-size: 0.9rem;
    line-height: 1.6;
    font-weight: 400;
    color:#fff;   
}
.footersection h3{
    color:white;
    margin-bottom: 25px;
    font-size: 1.2rem!important;
    font-weight: 600;
    text-shadow: 0 2px 5px rgba(0,0,0,0.4);
}
#myBtn{
    display:none;
       position:fixed;
    bottom:20px;
    right:20px;
    z-index:99;
    border:none;
    color:#fff;
    background-color: #00abff;
    padding:10px;
    border-radius: 10px;

}
#myBtn:hover{
    background: #60606060;
}
@media(max-width:768px){
    .nav-item{
        text-align: center!important;
    }
    .pricing,.happyclients,.contactus{
        height:auto;
        margin-top:50px;
    }
    .card-second{
        transform:translateY(0px);
        margin:30px 0;
    }
    .contactus p{
        padding: 0 50px;
    }
    .footer-div:nth-child(2){
        text-align: left!important;
    }
    .footer-div{
        margin:30px 0;
    }
    
}