* {
  margin: 0;
  padding: 0;
}

/* ------ H E A D E R ------ */

header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 1.5% 8.5% 0%;
}

.Wheader{
  background-color: #efeeeb;
  color: #acc992;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 1.5% 8.5% 0%;
}

.logo {
  width: 35%;
  font-size: 3rem;
}

.nav-items-desktop nav ul {
  display: flex;
  gap: 2rem;
  text-transform: uppercase;
}

.Wnav-items-desktop nav ul {
  display: flex;
  gap: 2rem;
  text-transform: uppercase;
}

ul {
  list-style-type: none;
}

.whiteA{
  color: #acc992;
}

.nav-items-desktop-last-type {
  background-color: #8aa484;
  padding: 8px 20px;
  font-weight: 500;
  color: #fff;
}

.Wnav-items-desktop-last-type {
  background-color: #8aa484;
  padding: 8px 20px;
  font-weight: 500;
  color: #fff;
}

.back-to-top-btn {
  width: 40px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #acc992;
  color: #ffffff;
  border-radius: 100%;
}

/* ------ N A V  I T E M S  M O B I L E ------ */

.nav-items-mobile {
  display: none;
  z-index: 5;
}

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  background-color: rgb(0, 0, 0);
  background-color: #acc992;
  overflow-x: hidden;
  transition: 0.5s;
}

.open {
  font-size: 45px;
  font-weight: 500;
  padding-left: 5px;
  color: #fff;
  margin-right: 1rem;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #fff;
  display: block;
  transition: 0.3s;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-width: 1226px) {

  header img {
      width: 200px;
  }

  .nav-items-mobile {
      display: block;
  }

  .nav-items-desktop {
      display: none;
  }

  .footer-container {
      margin: 5rem 1rem 1rem;
      padding-top: 5rem;
  }

  .footer-nav-items {
      display: none;
  }

  footer {
      flex-direction: column;
  }

  .container-contact {
      padding: 0;
  }

  .project-image img {
      max-width: 300px;
  }

  .container-projects h1 {
      font-size: 1.5rem;
  }

  .container-projects {
      flex-direction: column;
  }

  .home-landing {
      flex-direction: column;
  }

  h2 {
      font-size: 1rem;
  }

  h1 {
      font-size: 1.5rem;
  }

  .home-landing-col1-square {
      display: none;
  }

  .home-landing-col2 {
      width: 100%;
      justify-content: center;
  }

  .home-landing-col2-text {
      flex-direction: column;
  }

  .home-landing-col2-text-socials {
      flex-direction: row;
      gap: 1rem;
      margin: 20px 0px;
  }

  .services-grid, .about-grid, .container-projects, .how-we-operate-grid {
      grid-template-columns: repeat(1, 1fr);
  }

  .container-projects {
      row-gap: 2%;
  }

  .how-we-operate-grid {
      gap: 1%
  }

  .our-team, .coding-languages {
      flex-direction: column;
  }

  .coding-languages {
      gap: 50px;
      margin-left: 30%;
  }

  .about-us-description {
      flex-direction: column;
      row-gap: 50px;
  }

  .error-404 img {
      width: 100%;
  }

  .our-team {
      row-gap: 30px;
  }

  .checklist {
      position: static;
      width: 94%;
  }

  .how-we-operate-cart-first-item {
      width: 100%;
  }

  .page-subtitle {
      font-size: 20px;
  }

  .main-spacing {
      padding: 1.5% 7.5% 0%;
  }
}