/* ==========================================================================
   Homepage mobile fixes — index.php only.

   The stock template's counter-section (the "25+ Year Of Experience" arch
   card overlapping 4 stat items) only had breakpoints down to 991px. Below
   that it kept a fixed 270px top padding and a fixed 280x288px absolutely
   positioned card, so on real phone widths (≤767px) the section was mostly
   empty whitespace with one oversized, off-proportion white blob floating
   in it. These breakpoints bring both down to phone scale.
   ========================================================================== */

@media (max-width: 767px) {
  .counter-wrapper {
    padding: 190px 0 40px;
  }

  .counter-wrapper .counter-box {
    width: 220px;
    height: 220px;
    border-radius: 0 0 110px 110px;
    padding: 46px 16px;
    top: 15%;
  }

  .counter-wrapper .counter-box h2 {
    font-size: 52px;
  }

  .counter-wrapper .counter-box h5 {
    font-size: 15px;
  }

  .counter-wrapper .counter-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 18px;
  }

  .counter-wrapper .counter-area .counter-items {
    text-align: center;
  }

  .counter-wrapper .counter-area .counter-items .counter-content h2 {
    font-size: 28px;
  }
}

@media (max-width: 575px) {
  .counter-wrapper {
    padding: 160px 0 30px;
  }

  .counter-wrapper .counter-box {
    width: 190px;
    height: 190px;
    border-radius: 0 0 95px 95px;
    padding: 38px 14px;
    top: 12%;
  }

  .counter-wrapper .counter-box h2 {
    font-size: 42px;
  }
}