/* ═══════════════════════════════════════════════════════
   ASAS Contracting — Large Screen Fixes
   Targets: 1400px+ (above the template's designed range)
   Add this AFTER mellis-responsive.css in every page
═══════════════════════════════════════════════════════ */

/* ── CONTAINER: allow breathing room above 1400px ── */
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

@media (min-width: 1600px) {
  .container {
    max-width: 1480px;
  }
}

/* ── ABOUT SECTION: fix column imbalance at large sizes ── */
@media (min-width: 1400px) {
  .about-one__left {
    margin-right: 60px; /* reduce from 100px */
  }
  .about-one__right {
    margin-left: 40px; /* reduce from 70px */
  }
  /* Constrain the floating second image so it stays within bounds */
  .about-one__img-2 {
    right: -60px; /* was -110px — pulls back toward the image column */
    max-width: 220px;
  }
  .about-one__img-2 img {
    max-width: 100%;
    height: auto;
  }
}

/* ── HERO SLIDER: prevent image distortion above 1600px ── */
@media (min-width: 1600px) {
  .main-slider-two .image-layer,
  .main-slider-three .image-layer-three {
    background-size: cover;
    background-position: center top;
  }
}

/* ── PROJECT / SERVICES CARDS: keep circle consistent ── */
@media (min-width: 1400px) {
  .services-one__img {
    width: 210px;
    height: 210px;
  }
  .services-one__img img {
    width: 210px;
    height: 210px;
    object-fit: cover;
    object-position: center;
  }
}

/* ── SPA CENTER: cap background section width ── */
@media (min-width: 1600px) {
  .spa-center__inner {
    max-width: 1480px;
  }
}

/* ── OPENING HOUR (project info bar): cap width ── */
@media (min-width: 1400px) {
  .opening-hour__inner {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── GALLERY / PROJECT GRID: add a 5th column above 1600px ── */
@media (min-width: 1600px) {
  .gallery-page .masonary-layout .col-xl-4 {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

/* ── COUNTER SECTION: prevent numbers from spreading too thin ── */
@media (min-width: 1400px) {
  .counter-one__single {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* ── AWARD BANNER: scale image slot at large screens ── */
@media (min-width: 1400px) {
  .index-award-banner__image {
    width: 280px;
    height: 100px;
  }
  .index-award-banner__title {
    font-size: 24px;
  }
}

/* ── FOOTER: constrain inner width ── */
@media (min-width: 1400px) {
  .site-footer .container {
    max-width: 1320px;
  }
}

/* ── WHY CHOOSE SECTION: text columns too wide at xl ── */
@media (min-width: 1400px) {
  .why-choose-one__right p,
  .why-choose-one__left p {
    max-width: 520px;
  }
}


/* ═══════════════════════════════════════════════════════
   RESPONSIVE FIXES — gaps in the original template
═══════════════════════════════════════════════════════ */

/* ── 1. SERVICES-ONE CIRCLE: fix distortion at tablet (768–991px) ── */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .services-one__img {
    width: 160px;
    height: 160px;
  }
  .services-one__img img {
    width: 160px;
    height: 160px;
    object-fit: cover;
    object-position: center;
  }
}

/* ── 2. BRAND-TWO (client logos): missing entirely from responsive CSS ── */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .brand-two {
    padding: 60px 0;
  }
  .brand-two .swiper-slide img {
    max-width: 90px;
  }
}

@media only screen and (max-width: 767px) {
  .brand-two {
    padding: 48px 0;
  }
  .brand-two .swiper-slide img {
    max-width: 72px;
  }
}

/* ── 3. GALLERY-PAGE GRID: missing responsive rules ── */
/* At tablet: switch from 3 cols to 2 cols */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .gallery-page .col-xl-4.col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  /* proj pages gallery inside masonary-layout */
  .masonary-layout .col-xl-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* At mobile: single column */
@media only screen and (max-width: 767px) {
  .gallery-page .col-xl-4.col-lg-6,
  .gallery-page .col-xl-4.col-lg-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .masonary-layout .col-xl-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .gallery-page {
    padding: 60px 0;
  }
  .gallery-page .text-center {
    margin-top: 24px;
  }
}

/* ── 4. AWARD BANNER: missing 480px and below ── */
@media only screen and (max-width: 480px) {
  .index-award-banner__inner {
    padding: 20px 16px;
  }
  .index-award-banner__trophy {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
  }
  .index-award-banner__trophy i {
    font-size: 17px;
  }
  .index-award-banner__title {
    font-size: 15px;
    letter-spacing: 0;
  }
  .index-award-banner__sub {
    font-size: 11px;
  }
  .index-award-banner__label {
    font-size: 9px;
    letter-spacing: 1.5px;
  }
  .index-award-banner__image {
    height: 120px;
  }
}

/* ── 5. GALLERY-PAGE IMAGE HEIGHT: ensure consistent on mobile ── */
@media only screen and (max-width: 767px) {
  .gallery-page__img {
    aspect-ratio: 4 / 3; /* less square on mobile = more visible */
  }
}

/* ── 6. PROJECTS PAGE card circle at mobile ── */
@media only screen and (max-width: 767px) {
  .services-one__img {
    width: 140px;
    height: 140px;
  }
  .services-one__img img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    object-position: center;
  }
  .services-one__single {
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }
}