@import url("https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap");

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Spartan",sans-serif;
}
html {
    scroll-behavior: smooth;
  }
  
  /* Global Styles */
  
  h1 {
    font-size: 50px;
    line-height: 64px;
    color: #222;
  }
  
  h2 {
    font-size: 46px;
    line-height: 54px;
    color: #222;
  }
  
  h4 {
    font-size: 20px;
    color: #222;
  }
  
  h6 {
    font-weight: 700;
    font-size: 12px;
  }
  
  p {
    font-size: 16px;
    color: #465b52;
    margin: 15px 0 20px 0;
  }
  
  .section-p1 {
    padding: 40px 80px;
  }
  
  .section-m1 {
    margin: 40px 0;
  }
  
  button.white{
    font-size: 13px;
    font-weight: 600;
    padding: 11px 18px;
    color:rgb(250, 250, 250);
    background-color: transparent;
    cursor: pointer;
    border: 1px solid white;
    outline: none;
    transition: 0.2s;
  }

  body {
    width: 100%;
  }
  /*Header*/
  #header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 80px;
    background-color: #e3e6f3;
    box-shadow: 0 5px 15px rgba(0, 0,0, 0.06);
    z-index: 999;
    position: sticky;
    top: 0;
    left: 0;
  }

  #navbar{
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #navbar li{
    list-style: none;
    padding: 0 20px;
    position: relative;
  }

  #navbar li a{
   text-decoration: none;
   font-size: 16px;
   font-weight: 600;
   color: #1a1a1a;
   transition: 0.3s ease;
  }

  #navbar li a:hover{
    color: green;
  }

  #navbar li a:hover,
  #navbar li a.active{
    color: green;
  }

  #navbar li a.active::after,
  #navbar li a:hover::after{
    content: "";
    width: 30%;
    height: 2px;
    background: green;
    position: absolute;
    bottom: -4px;
    left: 20px;
  }
#mobile{
  display: none;
  align-items: center;
}

  /* hero */
  #hero{
    background-image: url(img/hero4.png);
    height: 90vh;
    width: 100%;
    background-size: cover;
    background-position: top 25% right 0;
    padding: 0 80px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
  #hero h4{
    padding-bottom: 15px;
  }

  #hero h1{
    color: #0de587;
  }

  #hero button{
     background-image: url("img/button.png");
     background-color: transparent;
     color: #0de587;
     border: 0;
     padding: 14px 80px 14px 65px;
     background-repeat: no-repeat;
     cursor: pointer;
     font-weight: 700;
     font-size: 15px;
  }

  /* feature */

  #feature{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  #feature .box{
    width: 180px;
    text-align: center;
    padding: 25px 15px;
    box-shadow: 20px 20px 34px rgba(0, 0,, 0.03);
    border: 1px solid #cce7d0;
    border-radius: 4px ;
    margin:  15px 0;
  }

  #feature .box:hover,#product1 .pro:hover{
    box-shadow: 10px 10px 54px rgba(70, 62, 221,0.1);
  } 


  #feature .box img{
    margin-bottom: 10px;
    width: 100%;
  }
  
  #feature .box h6{
    display: inline-block;
    padding: 9px 8px 6px 8px ;
    line-height: 1 ;
    border-radius: 4px;
    color:#088176;
    background-color: #fddda4;
  }

  #feature .box:nth-child(2) h6{
    background-color: #8198e8;
  }

  #feature .box:nth-child(3) h6{
    background-color: #f49d7d;
  }

  #feature .box:nth-child(4) h6{
    background-color: #f3916d;
  }

  #feature .box:nth-child(5) h6{
    background-color: #e5e07e;
  }

  #feature .box:nth-child(6) h6{
    background-color: #6b8bec;
  }

  /* product
   */
   #product1{
    text-align: center;
   }

   #product1 .pro-container{
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    flex-wrap: wrap;
  }

   #product1 .pro{
    width: 23%;
    min-width: 250px;
    padding: 10px 12px ;
    border: 1px solid #ddd;
    border-radius: 25px;
    cursor: pointer;
    box-shadow: 20px 20px 30px rgba(0, 0,0, 0.02);
    margin: 15px 0;
    transition: 0.2s ease;
    position: relative;
   }
   
   #product1 .pro img{
    width: 100%;
    border-radius: 20px;
  }

  #product1 .pro .des{
    text-align:start;
    padding: 10px  0;
  }

  #product1 .pro .des span{
    color: #606063;
    font-size: 12px;
  }

  #product1 .pro .des h5{
    padding-top: 7px ;
    color: #1a1a1a;
    font-size: 14px;
  }

  #product1 .pro .des i{
    font-size: 12px;
    color: rgba(243, 181, 25);
  }

  #product1 .pro .des h4{
    padding-top: 7px;
    font-size: 15px;
    font-weight: 700;
    color: #0de587;
  }
  
  #product1 .pro .Cart{
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50px;
    background-color: #a9dad57a;
    font-weight: 500;
    color: #0b645d;
    border: 1px solid #cce7d0;
    bottom: 20px;
    right: 20px;
    position: absolute;
  }

  /* #banner */
 #banner{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-image: url("img/banner/b2.jpg");
  width: 100%;
  height: 40vh;
  background-size: cover;
  background-position: center;
 } 
 
 #banner h4{
  color: #e3e6f3;
  font-size: 16px;
 }

 #banner h2{
  color: #e3e6f3;
  font-size: 30px;
  padding: 10px 0;
 }

 #banner h2 span{
  color: #c22929;
  font-size: 30px;
  padding: 10px 0;
 }

 #banner button:hover{
  background-color: #088176;
  color: #cce7d0;
 }

 #sm_banner{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
 }

 #sm_banner .banner_box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background-image: url("img/banner/b17.jpg");
  min-width: 680px;
  height: 50vh;
  background-size: cover;
  background-position: center;
  padding: 30px;
 }

 #sm_banner .banner_box2{
  background-image: url("img/banner/b10.jpg");
 }

 #sm_banner h4{
  color: #fff;
  font-size: 20px;
  font-weight: 300;
 }

 #sm_banner h2{
  color: #fff;
  font-size: 28px;
  font-weight: 800;
 }

 #sm_banner span{
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding-bottom: 15px;
 }
 
 #sm_banner .banner_box:hover button{
  background-color: #088176;
  border:1px solid #71d8cf  ;
 }

 #banner3{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 80px;
 }

 #banner3 .banner_box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background-image: url("img/banner/b7.jpg");
  min-width: 30%;
  height: 30vh;
  background-size: cover;
  background-position: center;
  padding: 20px;
  margin-bottom: 20px; 
 } 

 #banner3 .banner_box2{
  background-image: url("img/banner/b4.jpg"); 
 }

 #banner3 .banner_box3{
  background-image: url("img/banner/b18.jpg"); 
 }

 #banner3 h2{
  color: #fff;
  font-weight: 900;
  font-size: 22px;
 }

 #banner3 h3{
  color: #c13434;
  font-weight: 800;
  font-size: 22px;
 }

 #newsletter {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  background-image: url("img/banner/b14.png");
  background-repeat: no-repeat;
  background-position: 20% 30%;
  background-color: #041e42;
 }

 #newsletter h4{
   font-size: 22px;
   font-weight: 700;
   color: #fff;
 }

 #newsletter p{
  font-size: 14px;
  font-weight: 600;
  color: #60b97b;
}

#newsletter p span{
  color: #eac335; 
}

#newsletter .form{
  display: flex;
  width: 40%;
}

#newsletter input{
  height: 3.125rem;
  padding: 0 1.25em;
  font-size: 14px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 4px ;
  outline: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

#newsletter button{
  background-color: #0b645d;
  color:#ffffff ;
  white-space: nowrap;
  border-top-left-radius: 0;
  border-bottom-left-radius:0;
}

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

footer .col{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 20px;
}

footer .logo{
  margin-bottom: 30px;
}

footer h4{
  font-size: 14px;
  padding-bottom: 20px;
}

footer p{
  font-size: 13px;
  margin: 0 0 8px 0;
}
footer a{
  font-size: 13px;
  text-decoration:none ;
  color: #222;
  margin-bottom: 10px;
}

footer .follow{
  margin-top: 20px;
}
footer .follow{
  color:#465b52 ;
  padding-right: 4px;
  cursor:pointer ;
}

footer .install .row img{
  border: 1px solid #088178;
  border-radius: 6px;
}

footer .install img{
  margin: 10px 0 15px 0;
}

footer .follow i:hover,
footer a:hover{
  color: #088176;
}

footer .copyright{
  width: 100%;
  text-align: center;
}

/* Start media query */
@media (max-width: 799px) {
  #navbar {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      position: fixed;
      top: 0;
      right: -300px;
      height: 100vh;
      width: 300px;
      background-color: #e3e6f3;
      box-shadow: 0 40px 60px rgb(0, 0, 0, 0.1);
      padding: 80px 0 0 10px;
      /* transition: 0.3s right ease-in-out; */
  }

  #navbar.active {
      right: 0;
  }

  #mobile {
      display: flex;
      align-items: center;
  }

  #mobile li {
      color: #e3e6f3;
      font-size: 24px;
      padding: 20px;
  }
}