@import url('https://fonts.googleapis.com/css2?family=Agbalumo&family=Noto+Serif:wght@300&family=Poppins:ital,wght@0,500;0,700;1,300&display=swap');
*{
  font-family: 'poppins',sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
}
/* :root  used to define global css variable (custom properties) */
:root{
  --main-color:#fda702;
  --second-color:#ebeff2;
  --bg-color:#fff;
  --text-color: black;

/* box shadow */
--box-shadow:2px 2px 10px  4px rgb(14 55 54 /15%)
}

/*custom scroll bar */
html::-webkit-scrollbar-thumb{
  background: transparent;
}
html::-webkit-scrollbar-track{
  background:var(--text-color);
  border-radius: 5rem;
}
.btn{
  padding: 0.7rem 1.2rem;
  background: var(--main-color);
  color: var(--text-color);
  font-weight: 900;
  display: inline-block;
  text-transform: uppercase;
  clip-path: polygon(100% 0,93% 50%,86% 99%,0% 100%,7% 47%,13% 0%);
}

.btn:hover{
 background: var(--text-color);
 letter-spacing: 4px;
 transition: 0.3s;

}
img{
  width: 100%;
}
section{
  padding: 50px 100px ;
}
header{
 position: fixed;
 width: 100%;
 top: 0;
 right: 0;
 z-index: 1000;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 20px 100px;
 transition: 0.5s linear;
}
header.shadow{
  background: var(--bg-color);
  box-shadow: 0 0 4px rgb(14 55 54 / 15);
}
.logo {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 600;
  column-gap: 0.2rem;
  color:var(--text-color)
}
.logo .fa-solid{
  font-size: 24px;
  color: var(--main-color);
}
.navbar{
  display: flex;
  column-gap: 2.4rem;
}
.navbar a{
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-color);
}
.navbar a:hover{
  color:var(--main-color);
}
.header-icons{
  font-size: 22px;
  cursor: pointer;
  z-index: 100000;
}
#menu-icon{
  display: none;
}
.search-box{
  border-radius: 8px;
   position: absolute;
   top: 100%;
   right:-100%;
}
.search-box input{
 padding: 10px;
 border: none;
 outline: none;
 border-radius: 0.5rem;
 width: 280px;
 box-shadow: var(--box-shadow);
}
.search-box.active{
  right: 1rem;
  transition: 0.2s;

}
.cart{
  
display: flex;
position: absolute;
top: 110%;
 right: -100%;
 flex-direction: column;
 align-items: center;
background: var(--bg-color);
padding: 20px;
border-radius: 0.5rem;
box-shadow: var(--box-shadow);
row-gap: 0.5rem;
}

.cart img{
  width: 100px;
  
}

.cart .box{
 
  display: flex;
  align-items: center;
  column-gap: 2rem;
}
.cart .box  .text h3{
font-size: 1rem;
}
.cart .box  .fa-solid{
  font-size: 24px;
}
.cart .box  .fa-solid:hover{
  color: var(--main-color);
}
.cart h2{
  font-size: 1.1rem;
  font-weight: 600;
}
.cart.active{
right: 1rem;
transition: 0.2s;
}
.user{
  position: absolute;
  right: -100%;
  top: 110%;
  display: flex;
  flex-direction: column;
  align-items: center;
 row-gap: 0.5rem;
 background: var(--bg-color);
 padding: 20px;
 border-radius: 0.5rem;
 box-shadow: var(--box-shadow);
}
.user h2{
  font-size: 1.1rem;
  font-weight: 600;
}
.user.active{
  right: 1rem;
  transition: 0.2s;
}
.user .login-btn{
background: var(--main-color);
color: var(--bg-color);
font-size: 1rem;
text-transform: uppercase;
font-weight: 500;
cursor: pointer;

}
.user .login-btn:hover{
  background: var(--text-color);

}
.user input{
  border: none;
  outline: none;
  background: var(--second-color);
  padding: 10px;
  border-radius: 0.5rem;
  width: 100%;
}
#reset:hover{
  cursor: pointer;
  color: rgb(235, 124, 124);
}
#create:hover{
  cursor: pointer;
  color: rgb(235, 124, 124);
}
.user a{
 text-decoration: underline;
}
.home{
width: 100%;
min-height: 100vh;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(17rem,1fr));
align-items: center;
gap:1.5rem;
background: var(--second-color);
}
.home-text span{
  font-weight: 600;
  text-transform: uppercase;
}
.home-text h1{
  font-size: 3.4rem;
}

.home-img  .e-ship{

  
  animation-name: forwards;
  animation-duration: 3s;
}
@keyframes forwards{
  from{transform: translateX(100%);}
}
.heading{
  text-align: center;
}
.heading h1{
  font-size: 1.7rem;
  font-weight:600;
  text-transform: capitalize;
  color: var(--text-color);
}
.heading span{
  padding: 0.2rem 1.2rem;
  background: var(--main-color);
  color: var(--text-color);
  font-weight: 900;
  display: inline-block;
  text-transform: uppercase;
  clip-path: polygon(100% 0,93% 50%,86% 99%,0% 100%,7% 47%,13% 0%);
}
.new-arrival{
  margin: 2rem;
 
}
.new-arrival .box{
  position: relative;
  overflow: hidden;
  background: var(--second-color);
}

.new-arrival .box img{
align-items: center; 
  width: 300px;
  height: 300px;
  object-fit: cover;
}

.new-arrival .box .content{
  position: absolute;
  top: -100%;
  right: 0;
  width: 100%;
  height: 100%;
  display:flex;
  align-items: center;
  justify-content: center;
  background: hsl(0,0%,91%,0.5);
  overflow: hidden;
 
}
.new-arrival .box:hover .content{
  top:0;
  transition: 0.2s;
}
.new-arrival .box .content a:hover{
  background:var(--bg-color) ;
}
.product-container{
display: grid;
grid-template-columns: repeat(auto-fit,minmax(240px,auto));
gap: 1rem;
margin-top: 2rem;
}
.product-container .box{
  position: relative;
  padding: 10px;
  box-shadow: var(--box-shadow);
}
.product-container .box .content h2{
font-size: 1.2rem;
font-weight: 600;
}
.product-container .box .content .stars .fa-star{
  color: var(--main-color);
}
  .product-container .box .fa-cart-shopping{
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 10px;
    font-size: 24px;
    background: var(--main-color);
    color: var(--bg-color);
  }
   .product-container .box .fa-cart-shopping:hover{
    background: var(--text-color);
   }
     .product-container .box:hover img{
      -webkit-transform: scaleX(-1);
      transform: scaleX(-1);
     transition: 0.5s;
     }


.reviews-container {
  display: grid;
  grid-template-rows: repeat(auto-fit,minmax(240px,auto));
  gap: 1rem;
  margin-top: 2rem;
    
  }


.reviews-container .box{
 padding: 10px;
 border: 2px solid var(--text-color);
 border-radius: 0.5rem;
 text-align: center;
 box-shadow: var(--box-shadow);
}
.reviews-container .box img{
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 50%;

}
.reviews-container .box .stars{
  color: var(--main-color);
}
.reviews-container .box p{
  font-size: 0.938rem;
  font-style: italic;
  margin: 0.5rem 0.5rem;
}
.reviews-container .box h2{
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0.5rem 0.5rem;
}
.reviews-container .box:hover{
  background: var(--text-color);
  color: var(--main-color);
}
.footer{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,auto));
  grid-gap:1rem;
  color: var(--text-color);
}
.footer h2{
   font-size: 1.2rem;
   font-weight: 600;
   margin-bottom: 10px;
}
.footer p{
  font-size: 0.938rem;
  margin-bottom: 10px;
}
.social{
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
}
.social a .fa-brands{
 font-size: 24px;
 color: var(--text-color);
 padding: 10px;
 background: var(--second-color);
}
.social a .fa-solid{
  font-size: 24px;
  color: var(--text-color);
  padding: 10px;
  background: var(--second-color);
  border-radius: 0.5rem;
 }
 .social a .fa-brands:hover{
 background: var(--main-color);
 color: var(--bg-color);
 }
 .social a .fa-solid:hover{
  background: var(--main-color);
  color: var(--bg-color);
  }
  .footer-box h3{
    font-weight: 600;
    margin-bottom: 10px;
  }
  .footer-box li a{
    color: var(--text-color);
  }
  .footer-box li a:hover{
background: var(--main-color);
  }
  .payment{
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
  }
  .payment img{
    width: 44px;
  }
  .copyright {
    padding:20px;
    text-align: center;
    color: var(--text-color);
  }


/* making responsive */
  @media(max-width: 1058px){
    header{
      padding: 18x 60px;
      
    }
    section{
      padding: 50px 60px;

    }
    .home-text h1{
      font-size: 3rem;
    }
  }


  @media(max-width:991px){
    header{
      padding: 18x 4%;
      
    }
    section{
      padding: 50px 4%;

    }
    .home-text h1{
      font-size: 2.4rem;
    }
  }

  @media(max-width:768px){
    header{
      padding: 12px 4%;
      
    }
    section{
      padding: 50px  60px;

    }
    .home-text h1{
      font-size: 2.4rem;
    }
    #menu-icon{
      display: initial;
    }
    header .navbar{
      position: absolute;
      width: 240px;
      height: 100vh;
      right:-100%;
      top: 100%;
      display: flex;
      flex-direction:column;
      background: var(--bg-color);
       row-gap: 1.4rem;
       padding: 20px;   
      box-shadow: 4px 4px 0 px rgb(14 55 54 / 15%);
       transition: 0.2s linear;
       text-align: left;
    }
    .navbar.active{
      right:0;
    }
    .home-text h1{
      font-size: 2rem;
    }
  }
  


@media (max-width:360px){

  .home-text span{
    font-size: 0.8rem;
  }
  .home-text h1{
    font-size: 1.7rem;
  }
  .cart img{
    width:77px;
  }
  .heading h1{
    font-size: 1.4rem;
  }
}