/* === Global responsive fixes for ssk-do.com === */

/* 1. Make all images responsive by default */
img {
  max-width: 100%;
  height: auto;
}

/* 2. Home slider – don’t force giant fixed height on small screens */
@media (max-width: 767.98px) {
  .owl-carousel.home-slider {
    height: auto;
  }

  .owl-carousel.home-slider .slider-item,
  .owl-carousel.home-slider .slider-item .container-fluid,
  .owl-carousel.home-slider .slider-item .row {
    height: auto;
    min-height: 420px;
    padding-top: 90px;
    padding-bottom: 90px;
  }

  .home-slider h1 {
    font-size: 1.8rem;
    line-height: 1.25;
  }

  .home-slider .subheading {
    font-size: 1rem;
  }
}

/* 3. Section spacing and top bar on very small phones */
@media (max-width: 575.98px) {
  .top .text,
  .top a.text {
    font-size: 0.75rem;
  }

  .top .btn.btn-sm {
    padding: 4px 8px;
    font-size: 0.7rem;
  }

  .ftco-section {
    padding-top: 2.8rem;
    padding-bottom: 2.8rem;
  }
}

/* 4. Fix stacked cards spacing on tablet/mobile */
@media (max-width: 991.98px) {
  .ftco-section .col-md-4,
  .ftco-section .col-md-6 {
    margin-bottom: 1.5rem;
  }
}

/* 5. Make sure trainer / program images never overflow */
.coach img,
.services img,
.gallery img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 6. Optional helper: responsive tables (if you use any big tables) */
/* Wrap wide tables in <div class="table-responsive-custom"> ... </div> */
.table-responsive-custom {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive-custom > table {
  min-width: 600px;
}

/* === Coaches banner specific fix === */

.hero-wrap-coaches {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  /* Desktop/tablet height */
  min-height: 420px;
  padding: 140px 0 100px; /* space for navbar + title */
  position: relative;
}

.hero-wrap-coaches .overlay {
  background: rgba(0, 0, 0, 0.45); /* darken team photo so text is readable */
}

@media (max-width: 991.98px) {
  .hero-wrap-coaches {
    min-height: 360px;
    padding: 130px 0 80px;
  }

  .hero-wrap-coaches .bread {
    font-size: 2rem;
  }
}

@media (max-width: 575.98px) {
  .hero-wrap-coaches {
    min-height: 260px;
    padding: 110px 0 60px;
  }

  .hero-wrap-coaches .bread {
    font-size: 1.6rem;
    line-height: 1.2;
  }

  .hero-wrap-coaches .breadcrumbs {
    font-size: 0.85rem;
  }
}