/* .hero-section {
  background-size: cover;
  background-position: center;
  height: 700px;
} */

html, body {
  width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

.sale-badge {
  background-color: #FFD700;
  color: #000;
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: bold;
}

.promo-banner {
  color: white;
  background-image: url('/images/promo_bg.png');
  background-size: cover;
  height: 500px;
}
.logo{
  width: 50px;
  height: 50px;
}

@media (max-width: 426px) {
  .Email-div{
    max-width: 15rem !important;
  }
  .email-p{
   line-height: 0rem !important; 
  }
  .hero-section {
    height: 400px !important;
  }
  .promo-banner {
    height: 149px !important;
    font-size: 1.25rem;
    padding: 32px 16px;
  }
  .sale-badge {
    font-size: 16px;
    padding: 4px 12px;
  }
  h1, h2, h3 {
    font-size: 1.1rem !important;
  }
  .swiper-slide h1 {
    font-size: 2rem !important;
  }
  .swiper-slide p {
    font-size: 1.1rem !important;
  }
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .grid {
    gap: 16px !important;
  }
  .bg-white {
    border-radius: 16px !important;
  }
  .rounded-xl, .rounded-2xl, .rounded-lg {
    border-radius: 16px !important;
  }
  .p-2, .p-4 {
    padding: 16px !important;
  }
  .h-32, .h-48, .h-60 {
    height: 180px !important;
  }
  .line-clamp-2 {
    font-size: 1.25rem !important;
  }
  .text-sm, .text-xs {
    font-size: 0.8rem !important;
    line-height: 0.9rem;
  }
  .text-lg, .text-base {
    font-size: 1.25rem !important;
  }
  .py-8, .py-12, .py-16 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .swiper-pagination {
    bottom: 8px !important;
  }
}