.hero-slide {

  min-height: 680px;

  display: flex;

  align-items: center;

  position: relative;

  padding: 80px 0;

  color: #000;

}



.Skin-Problems {

  background: url('https://www.theestheticclinics.com/treatments/wp-content/uploads/2025/10/Artboard-4.png') no-repeat;

  background-size: cover;

  /* background-image: url("../assets/image/Banner/Skin Slider.png"); */

    /* background-size: cover;

    background-repeat: no-repeat; */

}

.Hair-Problems {

  background: url('https://www.theestheticclinics.com/treatments/wp-content/uploads/2025/10/Artboard-4-copy-2-100-1-1.jpg') no-repeat;

  background-size: cover;

  /* background-image: url("../assets/image/Banner/Hair Slider.jpeg"); */

    /* background-size: cover;

    background-repeat: no-repeat; */

}

.Nose-Problems {

  background: url('https://www.theestheticclinics.com/treatments/wp-content/uploads/2025/10/Artboard-4-copy-3-100.jpg') no-repeat;

  background-size: cover;

  /* background-image: url("../assets/image/Banner/Nose Slider.jpg"); */

    /* background-size: cover;

    background-repeat: no-repeat; */

}



/* ✅ Text Styling */

.hero-title {

  font-size: clamp(2rem, 5vw, 3.5rem);

  font-weight: 300;

  line-height: 1.2;

  color: #000;

  animation: fadeUp 1s ease-in-out both;

}

.hero-sub {

  font-size: clamp(1rem, 2vw, 1.25rem);

  margin-top: 18px;

  max-width: 520px;

  color: #000;

  animation: fadeUp 1.4s ease-in-out both;

}

.highlight {

  color: #f4801e;

  font-weight: 600;

}



/* ✅ CTA Button */

.btn-cta {

  background: #F38221 !important;

  border-radius: 30px !important;

  padding: 12px 28px !important;

  color: #fff !important;

  font-weight: 600;

  text-decoration: none;

  border: none;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  transition: all 0.3s ease;

  animation: fadeUp 1.8s ease-in-out both;

}

.btn-cta:hover {

  background: #e56d12;

  transform: translateY(-2px);

}

.btn-cta .btn-arrow {

  width: 18px;

  height: 18px;

  filter: brightness(0) invert(1);

  transition: transform 0.3s ease;

}

.btn-cta:hover .btn-arrow {

  transform: translateX(4px);

}



/* ✅ Controls */

.hero-controls {

  position: absolute;

  left: 8%;

  bottom: 6%;

  display: flex;

  align-items: center;

  gap: 15px;

  z-index: 10;

  animation: fadeUp 2s ease-in-out both;

}

.circle-nav.hero-next {

  width: 48px;

  height: 48px;

  border-radius: 50%;

  border: 2px solid #000;

  background: transparent;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.3s ease;

}

.circle-nav.hero-next:hover {

  border-color: #F38221;

}

.circle-nav.hero-next img {

  width: 20px;

  height: 20px;

  transition: transform 0.3s ease;

}

.circle-nav.hero-next:hover img {

  transform: translateX(3px);

}

.hero-counter {

  font-size: 20px;

  font-weight: 600;

  color: #000;

}



/* ✅ Animation */

@keyframes fadeUp {

  0% { opacity: 0; transform: translateY(20px); }

  100% { opacity: 1; transform: translateY(0); }

}



/* ✅ Tablet (≤991px) */

@media (max-width: 991px) {

  .hero-slide {

    min-height: 65vh;

    padding: 60px 20px;

    background-color: #fff6f0;

  }

  .Skin-Problems, .Hair-Problems, .Nose-Problems {

    background: url('https://www.theestheticclinics.com/treatments/wp-content/uploads/2025/09/TEC-hero-banner2.png') center/cover no-repeat;

    /* background-image: url("../assets/image/Banner/banner bg.jpeg"); */

    /* background-size: cover;

    background-repeat: no-repeat; */

  }

  .hero-controls {

    left: 50%;

    bottom: 40px;

    transform: translateX(-50%);

  }

}



/* ✅ Mobile (≤576px) */

@media (max-width: 576px) {

  .hero-slide {

    min-height: 70vh;

    padding: 50px 16px;

    background-color: #fff6f0;

  }

  .hero-title { font-size: 26px; }

  .hero-sub { font-size: 15px; }

  .circle-nav.hero-next { width: 40px; height: 40px; }

  .hero-counter { font-size: 16px; }

  .hero-controls {

    left: 40%;

    bottom: 30px;

    transform: translateX(-50%);

    gap: 10px;

  }

}



/* ✅ Very Small Devices (≤400px) */

@media (max-width: 400px) {

  .hero-title { font-size: 22px; line-height: 1.3; }

  .hero-sub { font-size: 14px; }

  .btn-cta { padding: 10px 22px !important; font-size: 14px; }

}



/* ✅ Large Screens (≥1600px) */

@media (min-width: 1600px) {

  .hero-title { font-size: 64px; }

  .hero-sub { font-size: 22px; }

  .hero-controls { left: 10%; bottom: 100px; }

}