/* screen >= 560px */
@media (min-width: 35em) {
  .site-header {
    margin-top: 10rem;
  }

  .nav {
    height: 10rem;
  }

  .nav img.grunge-bg {
    display: block;
  }

  h1 {
    text-align: left;
  }

  .hero__item .hero__content {
    width: 320px;
    align-items: start;
  }

  .hero__item .hero__content-box {
    align-items: start;
  }

  .hero__item .hero__content p {
    text-align: left;
  }

  .hero__nav {
    display: block;
  }

  .hero__nav img {
    height: 100vh;
    position: absolute;
    top: -0.5rem;
  }

  .hero__nav .content {
    display: flex;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    padding: 1.4rem;
  }

  .hero__nav .content .counter {
    display: flex;
    align-items: baseline;
  }

  .hero__nav .content .counter .item-num {
    color: var(--text-color-tertiary);
    font-size: 4.4rem;
  }

  .hero__nav .content .counter .seperator {
    color: var(--accent-color);
    margin-right: 0.4rem;
  }

  .hero__nav .content .counter .item-total {
    color: var(--accent-color);
    font-size: 2.4rem;
  }

  .services-section .container,
  .why-us-section .container {
    width: 56rem;
    margin: 0 auto;
  }

  .services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .services .box:last-child {
    grid-column: span 2;
  }

  .services .box:not(.box:last-child) .service {
    align-items: start;
    padding: 2.4rem;
  }

  .services .box:not(.box:last-child) .service h3,
  .services .box:not(.box:last-child) .service p {
    text-align: left;
  }

  .service p {
    margin: 0;
  }

  .about-img-bg {
    display: none;
    flex: 1;
  }

  .about-content-box {
    flex-direction: row;
    flex: 2;
  }

  .about-content,
  .about-section__controls {
    flex: 1;
  }

  .about-content {
    align-items: start;
  }

  .about-content header h2,
  .about-content p {
    text-align: left;
  }

  .about-content header h2 {
    width: max-content;
  }

  .about-content p {
    line-height: 2;
  }

  .about-section__controls .btn {
    flex: 1;
  }

  .why-us-section .container {
    margin-top: 8rem;
    margin-bottom: 8rem;
  }

  .swiper-why-us .swiper-pagination-why-us {
    gap: 1.2rem;
  }

  .why-us-section .swiper-slide .circle {
    top: 24rem;
  }

  .get-in-touch-section .content {
    height: 24rem;
  }

  .projects-section .container {
    margin-left: 0;
    margin-right: 0;
  }

  .projects-section .projects {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-group dd {
    height: 100%;
  }
}

/* screen >= 600px */
@media (min-width: 37.5em) {
  .hero__item .hero__img {
    height: 60vh;
  }

  .hero__item .hero__content {
    gap: 3.2rem;
  }

  .services-section .container,
  .why-us-section .container {
    width: 60rem;
  }
}

/* screen >= 752px */
@media (min-width: 47em) {
  .hero__item .hero__img {
    height: 70vh;
  }

  .hero__item .hero__content {
    gap: 4.8rem;
  }

  .services-section .container,
  .why-us-section .container {
    width: 75rem;
  }

  .about-section__info {
    display: flex;
  }

  .about-img-bg {
    display: flex;
    clip-path: polygon(0 0, 84% 0, 100% 26%, 88% 100%, 0% 100%);
  }

  .footer-group dt {
    text-align: left;
  }

  .footer-group dd .links,
  .footer-group dd .contact-info {
    align-items: start;
    text-align: left;
  }

  .footer-bottom .container {
    display: flex;
    justify-content: space-around;
  }
}

/* screen >= 840px */
@media (min-width: 52.5em) {
  .toggler-box,
  .toggler-box.contact {
    display: none;
  }

  .nav {
    padding-right: 2.4rem;
    background-color: transparent;
  }

  .menu-box,
  .nav__contact-menu {
    display: flex;
  }

  .hero__items {
    padding-left: 10%; /* Match slidesOffsetBefore if needed */
    overflow: visible;
  }

  /* .hero__item .hero__img img {
    width: calc(100% / 1.25);
  } */

  .hero__item .hero__content {
    background-color: transparent;
  }

  .hero__item .hero__content img {
    display: block;
  }

  .hero-footer {
    height: 10rem;
  }

  .hero-footer .swiper-pagination-hero {
    display: none;
  }

  .hero__nav .content {
    gap: 2.4rem;
  }

  .hero__nav {
    width: 28rem;
    height: 10rem;
  }

  .nav-buttons {
    display: flex;
  }

  .get-in-touch-section .box,
  .services-section .container,
  .why-us-section .container {
    width: 84rem;
  }

  .get-in-touch-section .box {
    flex-direction: row;
    justify-content: space-between;
    margin: 0 auto;
  }
}

/* screen >= 1024px */
@media (min-width: 64em) {
  h1 {
    font-size: 3.6rem;
    line-height: 1.6;
  }

  h2 {
    font-size: 3rem;
  }

  h3 {
    font-size: 2.4rem;
  }

  .btn--styled {
    height: 9rem;
  }

  .nav {
    padding: 3.2rem;
  }

  .menu-box .nav__menu .menu-item .menu-item__link {
    padding: 3.2rem;
  }

  .hero__items {
    padding-left: 15%; /* Match slidesOffsetBefore if needed */
  }

  /* .hero__item .hero__img {
    height: 80vh;
  } */

  .hero__item .hero__content {
    width: 38rem;
    padding: 0 3.2rem;
  }

  /* .hero__item .hero__content-box {
    gap: 3.2rem;
  } */

  .hero__item .hero__content p {
    font-size: 1.8rem;
  }
  /* 
  .hero-footer {
    height: 12rem;
  } */

  .get-in-touch-section .box,
  .services-section .container,
  .why-us-section .container {
    width: 102rem;
  }

  .services {
    grid-template-columns: repeat(6, 1fr);
  }

  .services .box:nth-child(1),
  .services .box:nth-child(2),
  .services .box:nth-child(3) {
    grid-column: span 2;
  }

  .services .box:nth-child(4),
  .services .box:nth-child(5) {
    grid-column: span 3;
  }

  .services .box:last-child .service {
    align-items: start;
    padding: 2.4rem;
  }

  .services .box:last-child h3,
  .services .box:last-child p {
    text-align: left;
  }

  .about-section__info {
    height: 48rem;
  }

  .about-content-box {
    flex: 1.5;
  }

  .why-us-section ul {
    gap: 3.2rem;
  }

  .why-us-section .swiper-slide .circle {
    top: 23.5rem;
  }

  .projects-section .projects {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-box {
    display: flex;
  }

  .footer-list {
    flex: 1.5;
  }

  .footer-box aside.map {
    flex: 1;
    border-top: none;
    border-left: var(--text-color-secondary) 0.5px solid;
    padding: 2.4rem;
  }
}

/* screen >= 1220px */
@media (min-width: 76.2em) {
  h1 {
    font-size: 4.4rem;
  }

  h2 {
    font-size: 3.6rem;
  }

  .menu-box .nav__menu .menu-item .menu-item__link {
    padding: 4.8rem;
  }

  .hero__item .hero__img {
    height: 75vh;
  }

  .hero__item .hero__content {
    padding: 0 4.8rem;
    width: 48rem;
  }

  .hero__nav .content .counter .item-num {
    font-size: 5.2rem;
  }

  .get-in-touch-section .box,
  .services-section .container,
  .why-us-section .container {
    width: 122rem;
  }

  .why-us-section .swiper-slide .circle {
    top: 24rem;
  }
}

/* screen >= 1300px */
@media (min-width: 81.25em) {
  .hero__item .hero__img {
    height: 79vh;
  }

  .hero__item .hero__content {
    padding: 0 6.4rem;
    width: 48rem;
  }

  .get-in-touch-section .box,
  .services-section .container,
  .why-us-section .container {
    width: 130rem;
  }

  .about-section__info {
    height: 54rem;
  }

  .about-content {
    padding: 6.4rem 4.8rem;
  }

  .projects-section .projects {
    grid-template-columns: repeat(8, 1fr);
  }

  .projects-section .project {
    grid-column: span 2;
  }

  .projects-section .project:nth-child(1),
  .projects-section .project:nth-child(2) {
    grid-column: span 4;
  }
}

/* screen >= 1450px */
@media (min-width: 90.625em) {
  .hero__item .hero__content {
    width: 57rem;
  }

  .get-in-touch-section .box,
  .services-section .container,
  .why-us-section .container {
    width: 145rem;
  }

  .why-us-section ul {
    gap: 4.8rem;
  }
}