body{font-family:Arial,sans-serif;margin:0;padding:0;color:#333;}
.container{width:90%;max-width:1200px;margin:0 auto;}
.slider{position:relative;width:100%;height:450px;overflow:hidden;border-radius:0 0 0px 0px;margin-bottom:40px;}
.slide{position:absolute;inset:0;opacity:0;animation:fade 12s infinite;}
.slide img{width:100%;height:100%;object-fit:cover;}
.slide-overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);}
.slide-text{position:absolute;bottom:50px;left:50px;color:#fff;}
.slide-text h1{font-size:34px;color:#f5c400;margin:0 0 10px 0;}
.slide-text p{font-size:16px;max-width:500px;}
.slide:nth-child(1){animation-delay:0s;} .slide:nth-child(2){animation-delay:4s;} .slide:nth-child(3){animation-delay:8s;}
@keyframes fade{0%{opacity:0}10%{opacity:1}30%{opacity:1}40%{opacity:0}100%{opacity:0}}
section h2{font-size:28px;margin-bottom:20px;color:#222;border-bottom:2px solid #f5c400;display:inline-block;padding-bottom:5px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:40px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:40px;}
.card{background:#fff;border-radius:10px;padding:10px;text-align:center;box-shadow:0 4px 8px rgba(0,0,0,0.1);}
.card img{width:100%;height:100%;object-fit:cover;margin-bottom:10px;}
.price{font-weight:bold;color:#f5c400;}
footer{background:#222;color:#fff;padding:20px 0;text-align:center;}
footer p{margin:0;}
/* ===== RESPONSIVE ===== */

/* Tablet */
@media (max-width: 992px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .slide-text {
    left: 20px;
    bottom: 30px;
  }

  .slide-text h1 {
    font-size: 24px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .grid-4,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .slider {
    height: 250px;
  }

  .slide-text {
    left: 15px;
    bottom: 20px;
  }

  .slide-text h1 {
    font-size: 18px;
  }

  .slide-text p {
    font-size: 13px;
  }
}
.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
@media (max-width: 576px) {
  .slide-text {
    max-width: 90%;
  }
}