/* ==========================================================================
   1) Base (desktop) styles
   ========================================================================== */

/* …your default desktop (large-screen) styles go here… */

/* ==========================================================================
   2) Media-query breakpoints (max-width only)
   ========================================================================== */
@media (min-width: 768px) {
  .section-industries .section-industries-swiper {
    overflow: visible;
  }

  .section-industries .section-industries-swiper .section-industries-grid {
    display: grid !important;
    gap: 30px;
    grid-template-columns: repeat(2, 1fr);
  }

  .section-industries
    .section-industries-swiper
    .section-industries-grid
    .swiper-slide {
    width: 100% !important;
  }
}

@media (min-width: 992px) {
  .section-industries .section-industries-swiper .section-industries-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .section-industries .section-industries-swiper .section-industries-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* Very large screens down to 1440px */
@media (max-width: 1439px) {
  .why-choose-us-contant .why-choose-us-grid {
    flex-direction: column;
    align-items: center;
  }
  .why-choose-us-contant .why-choose-us-grid .heading {
    margin-bottom: 60px;
  }
  .footer .footer__top .footer__links {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .footer .footer__top .footer__links > div {
    width: calc(50% - 20px);
  }
}
/* Large desktops down to 1200px */
@media (max-width: 1199px) {
}
@media (max-width: 1023px) {
  .atelier-section {
    flex-direction: column;
  }

  .atelier-section__left,
  .atelier-section__slider,
  .atelier-section__right {
    width: 100%;
    max-width: 100%;
    text-align: center;
  }

  .atelier-section__slider-content {
    height: auto;
  }

  .atelier-section__slider-item {
    aspect-ratio: 1 / 1;
  }

  .atelier-section__slider-nav {
    justify-content: center;
  }

  .atelier-section__slider-nav-wrapper {
    margin-top: 20px;
  }
}
/* Small desktops & tablets down to 992px */
@media (max-width: 991px) {
  .section-services
    .services-content
    .swiper-container
    .swiper-wrapper
    .swiper-slide
    .cta-content {
    flex-direction: column;
  }
  .section-services
    .services-content
    .swiper-container
    .swiper-wrapper
    .swiper-slide
    .cta-content
    h3 {
    font-size: clamp(2.5rem, 1.8629rem + 2.7184vw, 5.125rem);
  }
  .section-banner .banner-content {
    margin-top: unset;
  }
  .footer .footer__top > div {
    width: 50%;
  }
}
/* Tablets & small desktops down to 768px */
@media (max-width: 767px) {
  header.atelier-header .topbar {
    padding-block: 10px;
  }
  .section-services {
    padding: 20px;
  }
  .why-choose-us-contant .why-choose-us-grid {
    flex-direction: column;
  }

  .why-choose-us-contant .why-choose-us-content h2 {
    text-align: center;
    font-size: 2rem;
  }

  .why-choose-us-contant .card {
    flex: 1 1 100%;
  }
  .section-contact .contact-content .form-wrapper .fitout-form .form-half {
    flex: 1 1 100%;
  }

  .section-contact .contact-content .form-wrapper h3 {
    text-align: center;
  }

  .section-contact .contact-content .form-wrapper .fitout-form .form-submit {
    justify-content: center;
  }

  .section-contact
    .contact-content
    .form-wrapper
    .fitout-form
    .form-submit
    button {
    width: 100%;
  }
  .footer__top {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer__chat button {
    width: 100%;
  }

  /* .footer__links {
    flex-direction: column;
    align-items: center;
  } */
  .footer .footer__top > div {
    width: 100%;
  }

  .footer__chat {
    align-self: center;
    margin-top: 1rem;
  }

  .footer__logo img {
    max-height: 100px;
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  .footer__bottom p {
    text-align: center;
  }
}
/* Mobile landscape down to 576px */
@media (max-width: 575px) {
  /* e.g. adjust from S → XS */
}
/* Mobile portrait down to 400px */
@media (max-width: 399px) {
  /* e.g. very small phones */
}