@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600&display=swap');

*{
   font-family: 'Nunito', sans-serif;
   margin:0; padding:0;
   box-sizing: border-box;
   outline: none; border:none;
   text-decoration: none;
   transition: all .2s linear;
   text-transform: capitalize;
}

html{
   font-size: 62.5%;
   overflow-x: hidden;
}

body{
   background: #eee;
}

.container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 3rem 2rem;
}

.container .title {
   font-size: 3.5rem;
   color: #444;
   margin-bottom: 3rem;
   text-transform: uppercase;
   text-align: center;
}

.container .products-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
   gap: 2rem;
}

.container .products-container .product {
   text-align: center;
   padding: 3rem 2rem;
   background: #fff;
   box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
   outline: .1rem solid #ccc;
   outline-offset: -1.5rem;
   cursor: pointer;
}

.container .products-container .product:hover {
   outline: .2rem solid #222;
   outline-offset: 0;
}

.container .products-container .product img {
   height: 25rem;
}

.container .products-container .product:hover img {
   transform: scale(.9);
}

.container .products-container .product h3 {
   padding: .5rem 0;
   font-size: 2rem;
   color: #444;
}

.container .products-container .product:hover h3 {
   color: #27ae60;
}

.container .products-container .product .price {
   font-size: 2rem;
   color: #444;
}
.products-preview h1{
   color: #0160f0;
}

.products-preview {
   position: fixed;
   top: 0;
   left: 0;
   min-height: 100vh;
   width: 100%;
   background: rgba(0, 0, 0, .8);
   display: none;
   align-items: center;
   justify-content: center;
   overflow-y: auto; /* Enable scrolling */
}

.products-preview .preview  {
   display: none;
   padding: 2rem;
   text-align: center;
   background: #fff;
   position: relative;
   margin: 2rem;
   width: 40rem;
   max-height: 90vh; /* Limit height for scrolling */
   overflow-y: auto; /* Enable scrolling inside preview */
}

.products-preview .preview.active {
   display: inline-block;
}

.products-preview .preview img {
   height: 30rem;
}

.products-preview .preview .fa-times {
   position: absolute;
   top: 1rem;
   right: 1.5rem;
   cursor: pointer;
   color: #444;
   font-size: 4rem;
}

.products-preview .preview .fa-times:hover {
   transform: rotate(90deg);
}

.products-preview .preview h3 {
   color: #444;
   padding: .5rem 0;
   font-size: 2.5rem;
}

.products-preview .preview .stars {
   padding: 1rem 0;
   font-size: 1.7rem;
}

.products-preview .preview .stars i {
   color: #27ae60;
}

.products-preview .preview .stars span {
   color: #999;
}

.products-preview .preview p {
   line-height: 1.5;
   padding: 1rem 0;
   font-size: 1.6rem;
   color: #777;
}

.products-preview .preview .price {
   padding: 1rem 0;
   font-size: 2.5rem;
   color: #27ae60;
}

.products-preview .preview .buttons {
   display: flex;
   gap: 1.5rem;
   flex-wrap: wrap;
   margin-top: 1rem;
}

.products-preview .preview .buttons a {
   flex: 1 1 16rem;
   padding: 1rem;
   font-size: 1.8
}

.products-preview .preview .buttons a.cart{
   background: #444;
   color:#fff;
}

.products-preview .preview .buttons a.cart:hover{
   background: #111;
}

.products-preview .preview .buttons a.buy:hover{
   background: #444;
   color:#fff;
}


@media (max-width:991px){

   html{
      font-size: 55%;
   }

}

@media (max-width:768px){

   .products-preview .preview img{
      height: 25rem;
   }

}

@media (max-width:450px){

   html{
      font-size: 50%;
   }

}
/* header */
* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

body {
   font-family: "Poppins", sans-serif;
   --color1: #FFF;
   --color2: #181818;
}

.nav-bar {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   list-style: none;
   position: relative;
   background-color: var(--color2);
   padding: 12px 20px;
}

.logo img {
   width: 40px;
}

.menu {
   display: flex;
}

.menu li {
   padding-left: 30px;
}

.menu li a {
   display: inline-block;
   text-decoration: none;
   color: var(--color1);
   text-align: center;
   transition: 0.15s ease-in-out;
   position: relative;
   text-transform: uppercase;
   font-size: 18px; /* Increased font size */
}

.menu li a::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 0;
   height: 1px;
   background-color: var(--color1);
   transition: 0.15s ease-in-out;
}

.menu li a:hover::after {
   width: 100%;
}

.open-menu,
.close-menu {
   position: absolute;
   color: var(--color1);
   cursor: pointer;
   font-size: 1.5rem;
   display: none;
}

.open-menu {
   top: 50%;
   right: 20px;
   transform: translateY(-50%);
}

.close-menu {
   top: 20px;
   right: 20px;
}

#check {
   display: none;
}

@media (max-width: 610px) {
   .menu {
       flex-direction: column;
       align-items: center;
       justify-content: center;
       width: 80%;
       height: 100vh;
       position: fixed;
       top: 0;
       right: -100%;
       z-index: 100;
       background-color: var(--color2);
       transition: all 0.2s ease-in-out;
   }

   .menu li {
       margin-top: 40px;
   }

   .menu li a {
       padding: 10px;
       font-size: 20px; /* Increased font size for mobile */
   }

   .open-menu,
   .close-menu {
       display: block;
   }

   #check:checked ~ .menu {
       right: 0;
   }
}
/* ✅ Search bar styles */
.search-bar {
   display: flex;
   justify-content: center;   /* Center horizontally */
   align-items: center;       /* Align vertically if needed */
   margin: 2rem auto;         /* Add space top-bottom and center */
   width: 100%;
}

.search-bar input {
   width: 60%;
   max-width: 500px;
   min-width: 200px;
   padding: 1rem 1.5rem;
   font-size: 1.6rem;
   border: 1px solid #ccc;
   border-radius: 50px;
   outline: none;
   transition: all 0.3s ease;
   display: block;
   margin: 0 auto;           /* Extra centering */
}

.search-bar input:focus {
   border-color: #27ae60;
   box-shadow: 0 0 8px rgba(39, 174, 96, 0.4);
}

/* ✅ Tablet */
@media (max-width: 768px) {
   .search-bar input {
      width: 80%;
      font-size: 1.4rem;
      padding: 0.8rem 1.2rem;
   }
}

/* ✅ Mobile */
@media (max-width: 480px) {
   .search-bar input {
      width: 90%;
      font-size: 1.3rem;
      padding: 0.7rem 1rem;
   }
}