/* ============================================================
   Unicity Gym — Responsive overrides
   Applied on top of style.css
   ============================================================ */

/* ----------------------------------------------------------
   Global: all images fluid by default
   ---------------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
}

/* ----------------------------------------------------------
   Normal desktop  1200px – 1500px
   ---------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1500px) {

}

/* ----------------------------------------------------------
   Tablet landscape  992px – 1200px
   ---------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1200px) {

  /* About sections - ensure proper stacking */
  .about-area2 .support-wrapper {
    flex-direction: column;
  }

  .about-area2 .right-content2,
  .about-area2 .left-content2 {
    width: 100%;
    max-width: 100%;
  }
}

/* ----------------------------------------------------------
   Tablet portrait  768px – 991px
   ---------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {

  /* Gallery tiles — slightly shorter on tablets */
  .gallery-area .box img {
    height: auto;
    max-height: 320px;
    object-fit: cover;
  }

  /* Trainer / class images — remove excess margin so image
     doesn't push outside its column */
  .about-area2 .support-wrapper .right-content2 {
    margin-left: 20px;
    margin-right: 20px;
  }

  /* About sections stack on tablets */
  .about-area2 .support-wrapper {
    flex-direction: column;
  }

  .about-area2 .right-content2,
  .about-area2 .left-content2 {
    width: 100%;
    max-width: 100%;
  }

  /* Services area - 2 columns on tablets */
  .single-services {
    margin-bottom: 40px;
  }
}

/* ----------------------------------------------------------
   Large mobile  480px – 767px
   ---------------------------------------------------------- */
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .container { width: 450px; }

  /* Gallery tiles */
  .gallery-area .box img {
    height: auto;
    max-height: 260px;
    object-fit: cover;
  }

  /* About / trainer section: full width, no side margin */
  .about-area2 .support-wrapper .right-content2 {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 15px;
    padding-right: 15px;
  }

  .about-area2 .support-wrapper .left-content2 {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* ----------------------------------------------------------
   Small mobile  ≤ 767px  (covers all phones)
   ---------------------------------------------------------- */
@media (max-width: 767px) {

  /* Fix background-attachment:fixed — broken on iOS Safari.
     Parallax effect disabled; image still covers the hero. */
  .slider-area,
  .slider-area-women {
    background-attachment: scroll;
    background-position: center center;
  }

  /* Gallery tiles — compact on phones */
  .gallery-area .box img {
    height: auto;
    max-height: 220px;
    object-fit: cover;
  }

  /* Trainer / class section images */
  .about-area2 .support-wrapper .right-content2 {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
  }

  .about-area2 .support-wrapper .right-content2 .right-img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
  }

  .about-area2 .support-wrapper .left-content2 {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 30px;
    box-sizing: border-box;
  }

  /* Schedule image (index / women pages) */
  .team-area img,
  .gallery-area > .text-center img {
    width: 100%;
    height: auto;
  }

  /* Blog / Private Training section images */
  .home-blog-single .blog-img img {
    width: 100%;
    height: auto;
  }

  /* Pricing cards — full width on mobile */
  .properties {
    max-width: 100%;
  }

  /* Prevent hero caption overflow */
  .slider-area .hero__caption h1,
  .slider-area-women .slider-height .hero__caption h1 {
    font-size: 2rem;
    word-break: break-word;
  }

  /* Border buttons in hero — stack vertically */
  .hero__caption .border-btn {
    display: inline-block;
    margin-bottom: 10px;
  }

  /* Video area responsive */
  .video-area .video-wrap {
    padding: 50px 20px;
  }

  .video-area .video-icon a {
    font-size: 3rem;
    padding: 30px 40px;
  }

  /* Footer menu responsive */
  .footer-menu ul {
    text-align: center;
  }

  .footer-menu ul li {
    display: inline-block;
    margin: 0 10px;
  }

  /* Services area spacing */
  .single-services {
    text-align: center;
    margin-bottom: 30px;
  }
}

/* ----------------------------------------------------------
   Extra small  ≤ 480px
   ---------------------------------------------------------- */
@media (max-width: 480px) {

  /* Gallery even more compact */
  .gallery-area .box img {
    height: auto;
    max-height: 180px;
    object-fit: cover;
  }

  /* Trainer profile heading sizes */
  .about-area2 h1 {
    font-size: 1.4rem !important;
  }

  .about-area2 h2 {
    font-size: 1.2rem !important;
  }

  /* Language / header buttons — don't overlap on tiny screens */
  .header-btns .btn {
    padding: 8px 12px;
    font-size: 13px;
  }
}