.nav{
background:#fff;
padding:10px 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
background: linear-gradient(45deg, white, white, white);
border:1px;
border-radius:20px;
}
.nav-list{
list-style: none;
padding:20;
margin:0;
display:flex;
justify-content: center;
}
.nav-item{
position:relative;
margin:0 10px;
}
.nav-link{
color:#333;
text-decoration:none;
font-size:16px;
padding:5px;
display:block;
}
.dropdown{
position:absolute;
top:100%;
left:0;
background: #fff;
min-width:150px;
box-shadow:0 2px 5px rgba(0,0,0,0.1);
display:none;
z-index: 1000;
}
.nav-item:hover .dropdown{
display:block;
}
.dropdown-list{
list-style:none;
padding:0;
margin:0;
}
.dropdown-item{
padding:10px;
}
.dropdown-link{
color:#333;
text-decoration:none;
}
.dropdown-link:hover{
color:#99cc33;
background:#fff;
box-shadow:0 2px 5px rgba(0,0,0,0.1);
}
/* Slider Section */
.slider {
margin-top: 100px; /* Matches header height */
position: relative;
max-width: 1200px;
height: 300px;
overflow: hidden;
margin: 0 auto; /* Centers the slider */
border: 1px solid #ddd; /* Optional for visibility */
}
.slides {
display: flex;
width: 6000px; /* 1200px * 5 slides */
animation: slide 10s infinite;
}
.slide {
width: 1200px; /* Fixed width of each slide */
flex-shrink: 0;
position: relative;
}
.slide img {
width: 1200px;
height: 300px;
object-fit: cover; /* Ensures images fill the container without distortion */
}
.text-overlay {
position: absolute;
bottom: 10px;
left: 10px;
background: rgba(0, 0, 0, 0.5);
color: white;
padding: 10px;
border-radius: 5px;
}
@keyframes slide {
0%, 20% {
transform: translateX(0);
}
25%, 45% {
transform: translateX(-1200px);
}
50%, 70% { transform: translateX(-2400px); }
75%, 95% { transform: translateX(-3600px); }
100% { transform: translateX(-4800px); }
}
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
max-width: 1200px;
margin: auto;
}
.card {
background: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
text-align: center;
padding: 15px;
transition: transform 0.3s ease-in-out;
}
.card:hover {
transform: translateY(10px);
}
.card img {
max-width: 100%;
border-radius: 10px;
}
.card h3 {
font-size: 18px;
color: black;
margin: 10px 0;
}
.card p {
color: #666;
font-size: 14px;
}
.card .price {
font-size: 20px;
color: #e91e63;
font-weight: bold;
margin: 10px 0;
}
.card button {
background: #e91e63;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background 0.1s ease-in-out;
}
.card button:hover {
background: #99cc33;
}
