:root {
  --black:#272D3B; 
  --red:#4EBA88;
  --coral:#273849;
  --gradient:linear-gradient(90deg, var(--red), var(--coral)) ;
}

.siteicon {
  border-radius: 100%;
}

* {

    margin: 0; 
    padding: 0;
    text-transform: capitalize;
    transition: all .3s linear;
    border:none; 
    outline:none;
    list-style-type: none;
    text-decoration: none; 
    box-sizing: border-box;	
    -webkit-box-sizing: border;
    -moz-box-sizing: border-box;    
}
*::selection{
  background:var(--red); 
  color:#fff;
}
html {
       font-size:62.5%; 
       overflow-x: hidden;  
       scroll-behavior: smooth;
       scroll-padding-top:4rem;
}
body {
  font-family: 'Nunito', sans-serif;

}


 section {
  padding:3rem 9%;
 }
.moveTop {
  width:5.5rem; 
  height:5.5rem; 
  border-radius: 50%;
  background:#eee;
  position: fixed;
  top:50%;right:2.5rem;
  transform:translateY(-50%); 
  border:.1rem solid rgba(0,0,0,.3);
  box-shadow: 0 .3rem 1rem rgba(0,0,0,.1);
  z-index:1001;
  cursor:pointer;
  text-align:center;
  display:none;
}
.moveTop.show{
  display: block;
}
.moveTop i {
 line-height: 5rem;
 font-size:2rem; 
 color:var(--black);
}
.moveTop:hover i {
  color:#fff;
}
.moveTop:hover{
  background:var(--gradient);
}
.box-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.btn {
  padding:.7rem 3rem;
  margin-top: 1rem;
  border-radius: 5rem;
  background:var(--gradient);
  font-size:1.7rem;
  color:#fff; 
  cursor:pointer;
}
.btn:hover{
  transform: scale(1.1);
}
.heading {
    font-size:5rem; 
    color:transparent;
    text-transform: uppercase;
    background: var(--gradient);
    background-clip:text;
    -webkit-background-clip: text;
    padding:1rem;
    text-align: center;
}

.subtitle {
  font-size:1.5rem; 
  color:var(--coral);
  text-transform: none;
  background: var(--gradient);
  background-clip:text;
  -webkit-background-clip: text;
  padding:1rem;
  text-align: center;
}



 .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background:var(--black);
    position:fixed;
    top:0;left:0; right:0;
    padding:2rem 9%;
    z-index:1000;
  }
  
.header .logo {
    font-size:2.5rem; 
    color:#fff;
    font-weight: bolder; 
  }
.header .navbar  a {
     font-size:2rem; 
     color:#fff;
     margin-left: 2.5rem;
  }
  .header .navbar a:hover {
    color:var(--red);
  }
  .header #menu {
    font-size:3rem; 
    color:#fff;
    cursor:pointer; 
    display:none ;
  }
  
  .fa-times {
    transform:rotate(180deg);
  
  }
   
 .home {
    min-height:100vh;
    background:url(../images/home-bg.jpg)no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;
 } 
 .home .content {
    padding-top:5rem;
    margin:0 auto;
    max-width:70rem;
 }
 .home .content h3{
  text-transform: none;
    font-size:6.5rem; 
    color:#fff; 
 } 
 .home .content p {
  text-transform: none;
    font-size:1.7rem; 
    color:#eee; 
    padding:1rem 0;
 }



.home .swiper {
  width: 100%;
  padding-top: 5rem;
  padding-bottom: 5rem;
}



.home .swiper-slide {
  width: 30rem;
  height: 50rem;
}

.home .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
}
 

.features .box-container .box {
  margin:1rem;
  border-radius: .5rem;
  text-align: center;
  background:#f3f3ff;
  padding:1rem; 
  flex:1 1 30rem;
  cursor:pointer;

}
.features .box-container .box:hover {
    background:var(--gradient); 
}
.features .box-container .box:hover > *{
  color:#ffffff;
}
.features .box-container .box img {
    height:15rem; 
    width:10rem; 
    padding:1rem;
}   
.features .box-container .box h3 {
    font-size:2.4rem; 
    color:var(--black)  ;
    padding:1rem;
}   
.features .box-container .box p {
    font-size:1.5rem;
    color:#666;
    padding:1rem;
}   

 .about .box-container .image {
    flex:1 1 40rem; 
 }  
 .about .box-container .image img {
  width:100%;
 }
 .about .box-container .content {
    flex:1 1 40rem; 
 }  
 .about .box-container .content h3 {
    font-size:3.5rem;
   color:var(--black);
 }
 .about .box-container .content p {
    font-size:2rem;
    text-transform: none;
    color:#666;
    padding:1rem 0;
 }
 .about .box-container .content .share a {
  text-align: center;
  width:6rem ;
  height:6rem; 
  line-height: 6rem;
  border-radius: 50%;
  background:#eee;
  color:var(--black);
  font-size:2rem;
  margin:.3rem;
 }
 .about .box-container .content .share a:hover {
  color:#fff;
  background:var(--gradient);
 }
 .about .box-container .content .share a:last-child {
    margin-left: 2rem;
 }


.usage .swiper {
  width: 100%;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
  
.usage .swiper-slide {
   width: 50rem;
  height: 50rem;
}
  
.usage .swiper-slide img {
  display: block;
  width: 100%;
   height: 100%;
}
  

.usage .row {
  display:flex;
align-items: center;
}   
.usage .row .boxies:first-child  {
  text-align: right;
}   
.usage .row .boxies .box {
    padding:1rem 0;
}
.usage .row .divider {
  padding:0 1rem;
}
.usage .row .boxies .box i {
  font-size:4.5rem; 
  color:var(--red);
  padding:1rem 0;
}
.usage .row .boxies  .box h3 {
  font-size:2.5rem; 
  color:var(--black);
}
.usage .row .boxies  .box p {
  font-size:1.5rem; 
  color:#666;;
}

 .review  .box-container .box {
     flex:1 1 33rem;
     text-align:center;
     padding:2rem;
     margin:1rem;
     border:.1rem solid rgba(0,0,0,.3);
     border-radius: .5rem;
     box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
 }
 .review  .box-container .box img {
    width:13rem ; 
    height:13rem; 
    padding:1rem;
    border-radius: 50%;
    object-fit:cover;

 }  
 .review  .box-container .box  h3 {
  font-size:2.5rem;
  color:var(--black);
 }  
 .review  .box-container .box p {
  font-size:1.4rem; 
  color:#666;
  padding:1rem 0;
 }  
 .review  .box-container .box .stars i {
  font-size:2rem;
  color:var(--red);
  padding:1rem .1rem;
 }  

   .pricing .box-container .box {
    flex:1 1 33rem;
    text-align: center;
    padding:2rem 0;
    margin:1rem;
    border:.1rem solid rgba(0,0,0,.3); 
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
   }
   .pricing .box-container .box .price {
    font-size:5rem; 
    color:var(--black);
    font-weight: bolder;
   }
  

   .pricing .box-container .box h3 {
    font-size:3rem;
    color:#fff; 
    background: var(--gradient);
    padding:1.5rem 0; 
    margin:1rem 0;
   }
   .pricing .box-container .box ul {  
    padding:2rem 0; 
    border-bottom: .1rem solid var(--red);
  }
  .pricing .box-container .box ul li {
    text-transform: none;
    font-size:1.7rem; 
    color:#666; 
    padding:.7rem 0;
  }
  .pricing .box-container .box .btn {
    margin-top: 2rem;
  }

.contact {
    background:linear-gradient(#fff 50%,var(--black) 50.1%)
}
.contact form {
  padding:2rem ;
  background:#fff; 
  box-shadow: 0 .5rem 3rem rgba(0,0,0,.1);
}
.contact form .inputBox {
  position:relative;
}
.contact form .inputBox input,.contact form .inputBox textarea {
 width:100%;
 margin:1.5rem 0;
 padding:1rem 0;
 border-bottom:.2rem solid rgba(0,0,0,.3); 
 font-size: 1.7rem;
 text-transform: none;
}
.contact form .inputBox input:focus,
.contact form .inputBox textarea:focus {
  border-color: var(--red);
}
.contact form .inputBox textarea {
  resize: none;
  height:15rem;
}
.contact form .inputBox label {
  font-size:1.7rem; 
  position:absolute; 
  top:2.3rem; left:0;
}
.contact form .inputBox input:focus ~ label ,
.contact form .inputBox textarea:focus ~ label ,
.contact form .inputBox input:valid ~ label,
.contact form .inputBox textarea:valid ~ label {
 top:-.4rem; 
 font-size: l.5rem;
 color:var(--red);
}


.footer {
  text-align:center;
  background:var(--black); 
  
}
.footer .share a {
  width:4.5rem ;
  height:4.5rem; 
  line-height: 4.5rem;
  border-radius: 50%;
  background:#eee;
  color:var(--black);
  font-size:2rem;
  margin:.3rem;
}
.footer .share a:hover {
  color:#fff;
  background:var(--gradient);
}

.footer .credit {
  text-transform: none;
  color:#eee;
  padding:2.5rem 1rem;
  font-weight: normal;
  font-size: 2rem;
}
.footer .credit span {
  color:var(--red);
}

@media (max-width: 991px) {

    html {
     font-size:55%; 
    }

    .header {
      padding:2rem 4%; 
    }
    section {
      padding:3rem 4%;
    }

    .usage .row {
      flex-flow: column;
    }
    .usage .row .divider {
      display: none;
    }
    .usage .row .boxies .box {
      text-align:center;
    }
 }
 /* Screen 2  */
 @media (max-width: 768px) {
    
  .header #menu {
    display: block;
  }
  .header  {
    padding:2rem 4%;
  }
  .header .navbar {
    position: absolute;
    top:100%;left:0;right:0;
    background: var(--black);
    padding:1rem 2rem;
    border-top:.1rem solid #fff;
    clip-path: polygon(0 0, 100% 0 ,100% 0,0 0);
  }
  .header .navbar.show {
    clip-path: polygon(0 0, 100% 0 ,100% 100%,0 100%);
  }
  .header .navbar  a {
   display: block;
   font-weight: bold;
   background:var(--gradient);
   color:#fff;
   text-align:center;
   margin:1.5rem 0;
   padding:1rem;
   border-radius: .5rem;
  }
  .header .navbar  a:hover {
    color:var(--black);
  }
  .home .content h3 {
    font-size: 4rem;
  }
  .home .content p {
    font-size: 1.5rem;
  }
  .about .box-container .content {
    text-align:center;
  }
  .about .box-container .content .buttons a {
    width:100%;
  }
  .about .box-container .content .buttons a:last-child {
   margin:1rem 0;
  }
 }
 /* Screen 3 */
 @media (max-width: 400px) {
 
   html{
     font-size:50%; 
   }

   .heading{
    font-size:3.5rem;
   }
 
 }
 
 /* End Media Queries Style */