/* ============================= */
/* 🔥 CUSTOM CSS AUTO SLIDER FIX */
/* ============================= */

/* Center the banner */
.main-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 0;
  margin-top: 63px;
}

/* Reduce width */
.main-banner .container {
  max-width: 1100px;
  padding: 0;
}

/* Slider box */
.owl-carousel.owl-loaded {
  display: flex !important;
  overflow: hidden;
  border-radius: 25px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* Hide arrows */
.owl-carousel .owl-nav {
  display: none !important;
}

/* Hide dots */
.owl-carousel .owl-dots {
  display: none !important;
}

/* Make stage horizontal */
.owl-carousel .owl-stage {
  display: flex;
  width: 300% !important;
  animation: autoSlide 12s infinite;
}

/* Each slide */
.owl-carousel .owl-item {
  flex: 0 0 100%;
}

/* Slide styling */
.main-banner .item {
  height: 500px;
  margin-left: 0 !important;
  border-radius: 25px;
  background-size: cover;
  background-position: center;
  padding: 80px;
  display: flex;
  align-items: center;
}

/* 🔥 Animation */
@keyframes autoSlide {

  0%   { transform: translateX(0%); }
  30%  { transform: translateX(0%); }

  33%  { transform: translateX(-100%); }
  63%  { transform: translateX(-100%); }

  66%  { transform: translateX(-200%); }
  96%  { transform: translateX(-200%); }

  100% { transform: translateX(0%); }
}


/* ============================= */
/* 📱 MOBILE RESPONSIVE FIX */
/* ============================= */

@media (max-width: 768px) {

  .main-banner .container {
    max-width: 95%;
  }

  .main-banner .item {
    height: 320px;
    padding: 20px;
    border-radius: 15px;
    justify-content: center;
    text-align: center;
  }

  .header-text {
    width: 100%;
  }

  .header-text h2 {
    font-size: 18px;
    line-height: 24px;
    width: 100%;
  }

  .header-text p {
    font-size: 12px;
    width: 100%;
  }

  .header-text .category {
    font-size: 11px;
  }

}