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

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'League Spartan', sans-serif;
}

html{
    scroll-behavior: smooth;
    font-size: 62.5%;
}

h1{
    font-size: 5rem;
    line-height: 6.4rem;
    color: #222;
}

h2{
    font-size: 4.6rem;
    line-height: 5.4rem;
    color: #222;
}

h4{
    font-size: 2rem;
    color: #222;
}
 h6{
    font-size: 1.2rem;
    font-weight: 700;
 }
 p{
    font-size: 1.6rem;
    color: #465b52;
    margin: 1.5rem 0 2rem 0;
 }
 .section-p1{
    padding: 4rem 8rem;
 }
 .section-m1{
    margin: 4rem 0;
 }
 button.normal{
font-size: 1.4rem;
color: #000;
background-color: #fff;
border-radius: 4px;
font-weight: 600;
padding: 1.5rem 3rem;
cursor: pointer;
border: none;
outline: none;
transition: 0.2s;
 }
 button.white{
    color: #fff;
    background-color:transparent;
 
    font-weight: 600;
    padding: 1.1rem 1.8rem;
    cursor: pointer;
    border: 1px solid #fff;
    outline: none;
    transition: 0.2s;
    font-size: 1.4rem;
    
 }

 body{
    width: 100%;
 }

 /* header starts */
 #header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 8rem;
    background: #E3E6F3;
    box-shadow: 0 5px 15px rgba(0, 0,0,0.1);
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
 }
 #navbar{
    display: flex;
    align-items: center;
    justify-content: center;
 }
 #navbar li{
    list-style: none;
    padding: 0 2rem;
    position: relative;
 }
 #navbar li a{
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 600;
    color: #1a1a1a;
    transition: 0.3s ease;
 }
 #navbar li a:hover{
    color: #088171;
 }
 #navbar li a:hover,#navbar li a.active{
    color: #088171;
 }
 #navbar li a.active::after,#navbar li a:hover::after{
    content: '';
    width: 30%;
    height: 2px;
    background: #088171;
    position: absolute;
    bottom: -4px;
    left: 2rem;
 }

 /* home pages */
 #hero{
    background-image: url("img/hero4.png");
    height: 90vh;
    width: 100%;
    background-size: cover;
    background-position: top 25% right 0;
    padding: 0 8rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
 }
  #hero h4{
   padding-bottom: 1.5rem;
  }
 #hero h1{
    color: #088171;
   }
 #hero button{
   background-image: url('img/button.png');
   background-color: transparent;
   color: #088171;
   border: 0;
   padding: 2rem 6rem 2rem 8rem;
   background-repeat: no-repeat;
   font-size: 1.6rem;
   font-weight: 700;
   cursor: pointer;
 }

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

 #feature .fe-box{
width: 18rem;
text-align: center;
box-shadow: 2rem 2rem 3.4rem rgba(0, 0,0,0.03);
padding: 2.5rem 1.5rem;
border: 1px solid #cce7d0;
border-radius: 4px;
margin: 1.5rem 0;
 }

 #feature .fe-box:hover{
   box-shadow: 1rem 1rem 5.4rem rgba(70, 62, 221, 0.1); 
 }
  #feature .fe-box img{
   /* object-fit: cover; */
   width: 100%;
  }

  #feature .fe-box h6{
   display: inline-block;
   margin-top: 1rem;
   padding: 0.9rem 0.8rem 0.6rem 0.8rem;
   line-height: 1;
   border-radius: 4px;
   color: #088171;
   background-color: #fddde4;
  }
   #feature .fe-box:nth-child(2) h6{
   background-color: #cdebbc;
   }
   #feature .fe-box:nth-child(3) h6{
   background-color: #d1e8f2;
   }
   #feature .fe-box:nth-child(4) h6{
   background-color: #cdd4f8;
   }
   #feature .fe-box:nth-child(5) h6{
   background-color: #f6dbf6;
   }
   #feature .fe-box:nth-child(6) h6{
   background-color: #fff2e5;
   }

   /* products starts */
   #product1{
      text-align: center;
   }
   .pro-container{
      display: flex;
      justify-content: space-between;
      padding-top: 2rem;
      flex-wrap: wrap;
   }
   #product1 .pro{
      min-width: 25rem;
      padding: 1rem 1.2rem;
      border: 1px solid #cce7d0;
      width: 23%;
      border-radius: 2.5rem;
      cursor: pointer;
      box-shadow: 2rem 2rem 3rem rgba(0, 0,0,0.02);
      margin: 1.5rem 0;
      transition: 0.2s ease;
      position: relative;
   }
      #product1 .pro:hover{
         box-shadow: 2rem 2rem 3rem rgba(0, 0, 0, 0.06);
      }
   #product1 .pro img{
      border-radius: 2rem;
      width: 100%;
   }
    .des{
      text-align: start;
      padding: 1rem 0;
   }
   .des span{
      font-size: 1.2rem;
      color: #606063;
   }
   .des h5{
      padding-top: 7px;
      color: #1a1a1a;
      font-size: 1.6rem;
   }
   .des i{
      font-size: 1.2rem;
      color: #f6fa06;
      margin-top: 4px;
   }
   .des h4{
         padding-top: 7px;
         font-size: 1.5rem;
         color: #088171;
         font-weight: 700;
   }
   .pro .cart{
      width: 4rem;
      height: 4rem;
      line-height: 4rem;
      border-radius: 50%;
      background-color: #e8f6ea;
      font-weight: 600;
      color: #088171;
      border: 1px solid #cce7d0;
      position: absolute;
      bottom: 2rem;
      right: 1rem;
   }

   /* banner starts */
   #banner{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      background-image: url('img/banner/b2.jpg');
      width: 100%;
      height: 40vh;
      background-position: center;
      background-size: cover;
   }
   #banner h4{
         font-size: 1.6rem;
         color: #fff;
      }
#banner h2{
   color: #fff;
   padding: 1rem 0;
   font-size: 3rem;
}
#banner h2 span{
   color: red;
}
#banner button:hover{
   background: #088171;
   color: #fff;
}


/* small banner starts */
#sm-banner{
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;

}
.banner-box{
   display: flex;
      align-items: flex-start;
      justify-content: center;
      flex-direction: column;
      background-image: url('img/banner/b17.jpg');
      width: 56.8rem;
      height: 50vh;
      padding: 3rem;
      background-position: center;
      background-size: cover;
}
.banner-box h4{
   color: white;
   font-size: 2rem;
   font-weight: 300;
}
.banner-box h2{
   color: white;
   font-size: 2rem;
   font-weight: 800;
}
.banner-box span{
   color: white;
   font-size: 1.5rem;
   font-weight: 500;
   padding-bottom: 1.5rem;
}
.banner-box:hover button{
   background: #088171;
   color: white;
   border: none;
}
.banner-box2{
   background-image: url('img/banner/b10.jpg');
}

/* banner 3 starts */
#banner3{
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   padding: 0 8rem;
}
#banner3 .banner-box{
   display: flex;
      align-items: flex-start;
      justify-content: center;
      flex-direction: column;
      background-image: url('img/banner/b7.jpg');
      width: 30%;
      height: 30vh;
      padding: 2rem;
      background-position: center;
      background-size: cover;
      margin-bottom: 2rem;
}
#banner3 .banner-box h2{
   color: #fff;
   font-weight: 900;
   font-size: 2.2rem;
}
#banner3 .banner-box h3 {
   color: #fff;
   font-weight: 800;
   font-size: 1.5rem;
   color: red;
}
#banner3 .banner-box2{
   background-image: url('img/banner/b4.jpg');
}
#banner3 .banner-box3 {
   background-image: url('img/banner/b18.jpg');
}