@media (max-width: 995px) {
  #about .container {
    flex-direction: column-reverse;
    align-items: center;
    padding-block: 15rem;
    gap: 10rem;
  }

  #about .content {
    width: 98%;
  }

  #about .content h1 {
    margin-bottom: 1.7rem;
  }

  #about .content img {
    margin-top: 2rem;
    width: 25%;
    height: 10%;
  }

  #about .image-holder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  #services .container {
    padding-block: 15rem;
  }

  #services .container .services-header p {
    width: 80%;
  }

  #services .container .services-list {
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 4rem;
  }

  #services .container .services-list .card {
    width: 60%;
  }

  #services .container .services-list .card p {
    width: 100%;
  }

  #contact .container {
    flex-direction: column;
    align-items: center;
  }

  #contact img {
    width: 90%;
  }
}

@media (min-width: 996px) and (max-width: 1200px) {
  #about .image-holder {
    width: 60%;
  }
  #about .content {
    padding-top: 0;
    width: 40%;
  }

  #about .content h1 {
    font-size: 2.5rem;
  }

  #about .content img {
    width: 24%;
    height: 7rem;
  }

  #about .content p {
    font-size: 1.1rem;
  }
}

@media (min-width: 996px) {
  #about .cel-image-holder {
    display: none;
  }
}

@media (min-width: 766px) {
  #main-header .open,
  .close {
    display: none;
  }
}

@media (max-width: 765px) {
  body.expanded > :not(header) {
    visibility: hidden;
  }

  body.expanded {
    overflow: hidden;
    width: 100vw;
    width: 100vh;
    background-color: black;
    z-index: 100;
  }

  body.expanded #main-header .container {
    flex-direction: column;
    width: 100vw;
    height: 100vw;
    align-items: baseline;
  }

  body.expanded #main-header .logo-box {
    display: none;
  }

  body.expanded #main-header .open {
    display: none;
  }

  body.expanded #main-header .close {
    display: inline-block;
    background-color: transparent;
    border: none;
    width: fit-content;
  }

  body.expanded #main-header ul {
    display: flex;
    flex-direction: column;
    padding-top: 8rem;
    padding-left: 0.5rem;
    gap: 6rem;
  }

  body.expanded #main-header li a {
    font-size: 2rem;
  }

  body.expanded .custom-button {
    visibility: hidden;
  }

  #main-header .container nav {
    display: flex;
    flex-direction: column;
    justify-content: end;
  }

  #main-header .open {
    background-color: transparent !important;
    border: none;
  }

  #main-header ul {
    display: none;
  }

  #main-header .close {
    display: none;
  }

  #main-header .logo-box img {
    width: 3.5rem;
  }

  #services {
    padding-top: 10rem;
  }

  #services .container .services-header h1 {
    width: 100%;
  }

  #collaborators {
    padding-inline: 2rem;
  }

  #collaborators .holder-collaborators {
    flex-direction: column;
    gap: 8rem;
  }

  #collaborators .parceiros {
    gap: 5rem;
  }

  #collaborators .clientes {
    gap: 6rem;
  }

  #collaborators img {
    width: 34%;
  }

  footer .container {
    flex-direction: column;
    align-items: center;
    gap: 5rem;
  }

  footer .container .company {
    text-align: center;
    width: 90%;
    align-items: center;
  }

  footer .container .locations {
    text-align: center;
    width: 90%;
    padding-left: 0rem;
    align-items: center;
  }

  footer .container .socials {
    text-align: center;
    width: 90%;
    padding-left: 0rem;
    align-items: center;
  }

  footer .logo-box {
    justify-content: center;
  }
}

@media (max-width: 576px) {
  body {
    overflow-x: hidden;
  }

  #hero-page .container h1 {
    font-size: 4rem;
  }

  #hero-page .container h2 {
    font-size: 1.2rem;
  }

  #hero-page .container p {
    font-size: 1.2rem;
  }
}