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

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  overflow-x: hidden;
  font-family: 'Poppins', sans-serif;
  border: none;
}

.header-el{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10rem;
    font-size: 1.2rem;
}

.logo{
    height: 4.3rem;
    margin: 0.4rem 0;
    /* padding: ; */
}
.navbar{
    display: flex;
    align-items: center;
    
    gap: 3rem;
}
.search{
    padding: 0.3rem;
    text-align: center;
}

.featured{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
 
    /* height: 15rem; */
    /* width: 20rem; */
}
.item{
    height: 20rem;
    width:100%;
}
.mainFeatured{
    /* height: 20rem; */
    width: 20rem;
    border: 2px solid purple;
    margin: 0.3rem;
    border-top-left-radius: 25px;
    border-bottom-right-radius: 25px;
    /* border-radius: 15px; */
    
}
.searchBar{
    display: flex;
    align-items: center;
    border: 1px solid purple;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
.la-search{
    border-left: 1px solid purple;
    padding: 0.1rem 0.3rem;
    background-color: aqua;
}
.btn{
    background-color: aqua;
    color: black;
    font-weight: bold;
    padding: 0.4rem 0.6rem;
    border: 1.5px solid purple;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    /* border-radius: 5px; */
}
.login{
    background-color: white;
    color: black;
    font-weight: bold;
}
.imgText{
    /* background-color: aqua; */
    /* height: 20%; */
    padding: 0.5rem;
}
.cardBottom,.headline{
    display: flex;
    justify-content: space-between;
}
.summary{
    margin: 0.5rem 0;
}

.icon{
    font-size: 2rem;
}
.footer-el{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:35%;
    background-color: aqua;
    font-size: 1.1rem;
    color: black;
    padding: 1.2rem 0;
}
.sm{
    font-size: 2.5rem;
    margin:0 1rem;
}
.shopNow{
    color: black;
}

@media screen and (max-width:1024px) {
    .header-el{
        gap: 5rem;
        font-size: 1.1rem;
    }
    .navbar{
        gap: 1.5rem;
    }
    .footer-el{
        gap:25%;
        font-size: 1rem;
    }
}
@media screen and (max-width:768px) {
     .header-el{
        gap: 1.7rem;
        font-size: 1rem;
    }
    .logo{
        height: 4rem;
        margin: 0.3rem 0;
    }
    .navbar{
        gap: 1rem;
    }
    .searchBar{
        border-top-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }
    .search{
        padding: 0rem;
    }
    .signup{
        font-size: 0.8rem;
        padding: 0.3rem;
        border-top-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }
    .login{
        font-size: 0.8rem;
    } 
    .nav{
        font-size: 0.9rem;
        margin: 0 0.3rem;
    }
    
    .footer-el{
        gap:5%;
        font-size: 1rem;
    }
    .sm{
        font-size: 2.3rem;
        margin:0 0.7rem;
    }
}

@media screen and (max-width:425px) {
    .header-el{
        flex-direction: column;
       gap: 0.5rem;
       font-size: 1rem;
   }
   .logo{
       height: 4rem;
       margin: 0.3rem 0;
   }
   .navbar{
    flex-wrap: wrap;
    /* flex-direction: column; */
       gap: 0.5rem;
       justify-content: center;
       margin-bottom: 1rem;
   }
   
   .footer-el{
       gap:3%;
   }
   .cr{
    padding-left: 1rem;
   }
   .sm{
       font-size: 2.2rem;
       margin: 0;
   }
}