/* Bootstrap-aligned breakpoints: sm 576 | md 768 | lg 992 | xl 1200 | xxl 1400 */

/* ── XL (max 1199.98px) ── */
@media (max-width: 1199.98px) {
  .philosophy-section {
    --philosophy-pad-y: 1.75rem;
    --philosophy-pad-x: 1.25rem;
    --philosophy-pad-x-side: 1.25rem;

    .philosophy-doctor-wrap {
      width: 100%;
      max-width: 640px;
      margin-inline: auto;
    }

    .philosophy-doctor-img {
      width: 100%;
      height: auto;
      object-fit: contain;
    }



    .philosophy-divider {
      border-inline-start: none !important;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      padding-inline-start: 0 !important;
      padding-top: 1.25rem;
      margin-top: 0.25rem;
      align-items: center;
    }

    .philosophy-feature-item {
      justify-content: center !important;
      text-align: start;
      max-width: 320px;
      margin-inline: auto;
    }
  }
  .consultation-section {
    .consultation-card {
      padding: 38px 36px;
    }

    .consultation-tooth-container {
      width: 205px;
      inset-inline-end: -45px;
      bottom: -26px;
    }
  }

  .reels-carousel-wrapper {
    padding-inline: 0;
  }

  .services-section {
    .services-showcase-wrapper {
      padding-inline: 8px;
    }
  }
}

/* ── LG (max 991.98px) ── */
@media (max-width: 991.98px) {
  :root {
    --header-height: 72px;
  }

  .navbar .container-fluid {
    padding-inline: 1rem !important;
  }

  .hero-pages {
    min-height: 38vh;
    padding-top: calc(var(--header-height) + 1.75rem);
    padding-bottom: 2rem;
    background-size: cover;
    background-position: center;

    .overlay {
      background: linear-gradient(
        180deg,
        rgba(9, 10, 12, 0.9) 0%,
        rgba(9, 10, 12, 0.62) 100%
      );
    }

    h1 {
      font-size: clamp(1.85rem, 6vw, 2.4rem);
    }

    .breadcrumb {
      flex-wrap: wrap;
      justify-content: center;
      row-gap: 0.25rem;
    }
  }

  .philosophy-section {
    --philosophy-pad-y: 1.5rem;
    --philosophy-pad-x: 1rem;
    --philosophy-pad-x-side: 1rem;

    .philosophy-doctor-wrap {
      max-width: 100%;
    }

    .philosophy-doctor-img {
      width: 100%;
      height: auto;
      object-fit: contain;
    }

    .philosophy-divider {
      border-inline-start: none !important;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      padding-inline-start: 0 !important;
      padding-top: 1.25rem;
      margin-top: 0.25rem;
    }
  }

  .services-section {
    .servicesSwiper {
      perspective: none;
    }

    .service-card-wrapper,
    .servicesSwiper .swiper-slide:nth-child(1) .service-card-wrapper,
    .servicesSwiper .swiper-slide:nth-child(2) .service-card-wrapper,
    .servicesSwiper .swiper-slide:nth-child(3) .service-card-wrapper,
    .servicesSwiper .swiper-slide:nth-child(4) .service-card-wrapper,
    .servicesSwiper .swiper-slide:nth-child(5) .service-card-wrapper {
      max-width: 260px;
      transform: none !important;

      &::before,
      &::after {
        display: none;
      }
    }

    .service-luxury-card.featured {
      height: 400px;
      border-radius: 20px;

      .service-card-media {
        border-radius: 0;
        height: 62%;
      }
    }

    .service-luxury-card {
      height: 380px;
    }

    .service-nav-arrow {
      display: none !important;
    }
  }

  .why-section {
    .why-timeline-line {
      display: none;
    }
  }

  .consultation-section {
    .consultation-card {
      padding: 32px 24px;
      border-radius: 28px;
    }

    .consultation-map-box {
      margin-top: 0;
    }

    .consultation-tooth-container {
      display: none !important;
    }
  }

  .before-after-section {
    .ba-card {
      height: 300px;
    }
  }

  .reels-section {
    background-size: cover !important;
    background-position: center bottom;
  }

  .header {
    .btn-gold-outline {
      font-size: 0.78rem;
      padding: 7px 14px;
    }

    .nav-link {
      font-size: 0.85rem;
      padding: 6px 10px !important;
    }
  }

  .luxury-footer {
    .footer-about,
    .footer-widget {
      text-align: center;
    }

    .footer-about .d-flex.align-items-center.gap-2 {
      justify-content: center;
    }

    .footer-contact-item {
      justify-content: center;
    }
  }

  .cta-book-card {
    padding: 1.75rem;
  }

  .cta-book-copy {
    text-align: center;
    padding-inline-end: 0;
  }

  .cta-book-desc {
    max-width: none;
  }

  .luxury-footer .footer-cta-note {
    text-align: center;
    max-width: none;
  }
}

@media (max-width: 1600px) {
  .hero-section {
    img {
      height: 100%;
      width: 100%;
    }
  }

  .navbar {
    .container {
      margin-top: 0;
      border-radius: 0;
      box-shadow: none;
      border: none;
      background: transparent;
    }
  }
}

/* ── MD (max 767.98px) ── */
@media (max-width: 767.98px) {
  .hero-mobile {
    height: 72vh;
    min-height: 560px;

    .hero-mobile-img {
      object-position: center 12%;
    }

    .hero-mobile-content {
      padding: 36px 0 24px;
    }
  }

  .hero-pages {
    min-height: 32vh;
    padding-top: calc(var(--header-height) + 1.25rem);
    padding-bottom: 1.75rem;

    h1 {
      font-size: clamp(1.65rem, 7.5vw, 2rem);
      line-height: 1.2;
    }

    .eyebrow-badge {
      font-size: 0.68rem;
      letter-spacing: 0.14em;
    }
  }

  .philosophy-section {
    --philosophy-pad-y: 1.25rem;
    --philosophy-pad-x: 0.85rem;
    --philosophy-pad-x-side: 0.85rem;

    .philosophy-title {
      font-size: 1.75rem;
    }

    .philosophy-signature {
      font-size: 1.45rem;
    }

    .philosophy-doctor-img {
      width: 100%;
      height: auto;
      object-fit: contain;
    }

    .philosophy-feature-desc {
      font-size: 0.82rem;
    }
  }

  .services-section {
    .font-heading.fs-2 {
      font-size: 1.65rem !important;
      line-height: 1.25;
      padding-inline: 0.5rem;
    }
  }

  .before-after-section {
    .ba-title {
      font-size: 1.75rem;
    }

    .ba-text {
      font-size: 0.88rem;
    }

    .ba-card {
      height: min(72vw, 320px);
    }

    .btn-dark-pill {
      width: 100%;
      justify-content: center;
    }
  }

  .reels-section {
    .font-heading.fs-2 {
      font-size: 1.65rem !important;
      line-height: 1.25;
      padding-inline: 0.75rem;
    }

    .reels-gold-line {
      width: 32px;
    }

    .reels-carousel-wrapper {
      padding-block: 1.5rem !important;
    }

    .reel-nav-btn {
      display: none !important;
    }
  }

  .why-section {
    .why-icon-circle {
      width: 68px;
      height: 68px;
      font-size: 1.5rem;
    }

    .why-node-desc {
      max-width: none;
    }

    .why-node-title {
      font-size: 0.95rem;
    }
  }

  .consultation-section {
    .consultation-card {
      padding: 24px 18px;
      border-radius: 24px;
    }

    .consultation-title {
      font-size: 2rem;
    }

    .consultation-title-script {
      font-size: 1.2em;
    }

    .consultation-desc {
      font-size: 0.88rem;
    }

    .consultation-map-box {
      border-radius: 20px;
      min-height: 240px;
    }

    .btn-consultation-submit {
      width: 100%;
      justify-content: center;
    }
  }

  .luxury-footer {
    .footer-watermark-ae {
      display: none;
    }

    .footer-logo img {
      height: 52px;
    }
  }

  .contact-form-card,
  .contact-info-card,
  .contact-quick-card {
    padding: 1.25rem;
  }

  .social-icon {
    margin-inline-start: 10px;
    margin-bottom: 70px;

    a {
      width: 48px;
      height: 48px;
      font-size: 1.2rem;
    }
  }

  .about-page-img {
    min-height: 220px;
    max-height: 360px;
  }

  .contact-section {
    .contact-quick-card {
      text-align: center;
    }

    .contact-social-strip {
      justify-content: center;
    }
  }

  .reels-page-grid {
    .reel-grid-label {
      font-size: 0.78rem;
    }
  }

  .contact-map-frame {
    min-height: 220px;

    iframe {
      min-height: 220px;
    }
  }

  .btn-gold-pill,
  .btn-dark-pill,
  .btn-gold-outline-pill {
    font-size: 0.84rem;
    padding: 10px 18px;
  }

  .offcanvas {
    .dropdown-menu {
      background: rgba(255, 255, 255, 0.06);
      margin-top: 0.35rem;
    }

    .dropdown-item {
      color: rgba(255, 255, 255, 0.85);
    }
  }
}

/* ── SM (max 575.98px) ── */
@media (max-width: 575.98px) {
  :root {
    --header-height: 68px;
  }

  .hero-mobile {
    height: 78vh;
    min-height: 580px;

    .hero-mobile-content {
      padding: 32px 0 22px;

      .hero-title {
        font-size: clamp(1.7rem, 8.5vw, 2.05rem);
      }

      .eyebrow-badge {
        font-size: 0.65rem;
        letter-spacing: 0.12em;
        padding: 0.45rem 0.85rem;
      }
    }
  }

  .services-section {
    .service-card-wrapper {
      max-width: 300px;
    }

    .service-luxury-card {
      height: 400px;
    }
  }

  .header {
    .navbar-brand img {
      max-height: 38px;
    }

    .btn-lang {
      padding: 6px 14px;
      font-size: 0.82rem;
    }
  }

  .before-after-section {
    .ba-card {
      height: min(78vw, 280px);
    }
  }

  .consultation-section {
    .consultation-card {
      padding: 20px 16px;
    }

    .consultation-title {
      font-size: 1.85rem;
    }
  }

  .reels-section {
    .container {
      padding-inline: 0.85rem;
    }
  }

  .luxury-footer {
    .footer-bottom-bar p {
      font-size: 0.78rem;
      line-height: 1.6;
    }
  }

  .cta-book-card {
    padding: 1.25rem;
    border-radius: 24px;
  }

  .cta-book-submit-row .btn-consultation-submit {
    width: 100%;
    justify-content: center;
  }

  .back-to-top {
    inset-inline-end: 1rem;
    bottom: 1rem;
    width: 42px;
    height: 42px;
  }
}

/* ── LG+ sticky sidebar (inner pages) ── */
@media (min-width: 992px) {
  .blog-details-sidebar {
    position: sticky;
    top: calc(var(--header-height) + 20px);
    align-self: start;
  }

  .header {
    .offcanvas-body {
      flex-direction: row;
      width: 100%;
    }

    .navbar-nav {
      flex-wrap: nowrap;
    }
  }

  .services-section {
    .services-showcase-wrapper {
      padding: 20px 55px;
    }
  }

  .consultation-section {
    .consultation-map-box {
      aspect-ratio: auto;
      min-height: 520px;
    }
  }
}