/* 🌅 HERO SECTION */

.hero-section {

  padding: 120px 8% 80px;

  /* background-image: url('https://www.theestheticclinics.com/treatments/wp-content/uploads/2025/10/About-Us-Banner.jpg'); */

  background-image: url('https://www.theestheticclinics.com/assets/image/Banner/About-Us-Banner.jpg');

  background-size: cover;

  background-repeat: no-repeat;

  color: #000;

  text-align: left !important;
  /* Default desktop alignment */

}



/* 🧍 Content */

.hero-content {

  position: relative;

  z-index: 2;

}



.highlight-text {

  color: #F38221;

  line-height: 1.3;

  font-size: 50px;

  font-weight: 700;

  margin-bottom: 15px;

}



.hero-content h1 {

  font-size: 45px;

  font-weight: 600;

}



.hero-content p {

  font-size: 20px;

  color: #333;

  max-width: 600px;

  margin: 0 0 25px;

}



/* 🎯 Buttons */

.btn-outline-orange {

  padding: 5px 24px !important;

  border-radius: 40px;

  border: 2px solid #F38221;

  text-decoration: none !important;

  color: #000;

  font-size: 18px;

  font-weight: 600;

  display: inline-block;

  transition: all 0.3s ease;

}



.btn-outline-orange:hover {

  background-color: #F38221;

  color: #fff;

}



/* 🩺 Image */

.hero-image {

  max-width: 420px;

}



/* ============================= */

/* 💻 Tablet (992px ↓) */

/* ============================= */

@media (max-width: 992px) {

  .hero-section {

    text-align: center !important;

    padding: 100px 6% 60px;

    background-image: url('https://www.theestheticclinics.com/treatments/wp-content/uploads/2025/10/Artboard-4b.jpeg');

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

    /* background-size: cover;

    background-repeat: no-repeat; */

  }



  .hero-section .d-flex {

    justify-content: center !important;

  }



  .highlight-text {

    font-size: 36px;

  }



  .hero-content h1 {

    font-size: 24px;

  }



  .hero-content p {

    font-size: 18px;

    margin: 0 auto 25px;

  }



  .hero-image {

    max-width: 320px;

  }

}



/* ============================= */

/* 📱 Mobile (576px ↓) */

/* ============================= */

@media (max-width: 576px) {

  .hero-section {

    padding: 80px 20px 40px;

    background-size: cover;

    background-position: center center;

  }



  .highlight-text {

    font-size: 24px;

    line-height: 1.3;

  }



  .hero-content h1 {

    font-size: 18px;

  }



  .hero-content p {

    font-size: 15px;

    line-height: 1.6;

  }



  .btn-outline-orange {

    width: 100%;

    font-size: 16px;

    padding: 10px 0 !important;

  }



  .d-flex.flex-wrap.gap-3.mt-4 {

    gap: 10px !important;

  }

}



/* ============================= */

/* 📲 Extra Small (400px ↓) */

/* ============================= */

@media (max-width: 400px) {

  .highlight-text {

    font-size: 22px;

  }



  .hero-content h1 {

    font-size: 16px;

  }



  .hero-content p {

    font-size: 14px;

  }



  .btn-outline-orange {

    font-size: 15px;

  }

}