/* Media Queries para a estilização própria
    Iniciando por telas mobile: 360px */

/* Header */

.s-header__image-container--size {
  width: 280px;
}

/* Home */

.s-home__content-container {
  margin-top: 8rem;
}

.s-about,
.s-panels {
  height: auto;
  min-height: 80rem;
}

.s-about__paragraph-container {
  width: fit-content;

  margin-top: 8rem;

  box-sizing: border-box;
}

/* iPhone XS, X */

@media screen and (min-width: 375px) and (height: 812px) {
  /* Quem Somos */

  .s-about__paragraph-container {
    margin-top: 10rem;
  }
}

/* Breakpoint: 390px */

@media screen and (min-width: 390px) {
  /* Home */

  .s-home__content-container {
    margin-top: 15rem;
  }

  /* Quem Somos */

  .s-about__paragraph-container {
    margin-top: 10rem;
  }

  /* Footer */

  .s-footer {
    font-size: 1.4rem;
  }
}

/* Breakpoint: 412px */

@media screen and (min-width: 412px) {
  /* Quem Somos */

  .s-about__paragraph-container {
    margin-top: 12rem;
  }
}

/* iPhone XR, XS Max */

@media screen and (min-width: 414px) and (height: 896px) {
  /* Home */

  .s-home__content-container {
    margin-top: 18rem;
  }

  /* Quem Somos */

  .s-about__paragraph-container {
    margin-top: 14rem;
  }
}

/* Breakpoint: 768px */

@media screen and (min-width: 768px) {
  /* Header */

  .s-header__image-container--size {
    width: 520px;
  }

  /* Toggle Menu Hambúrguer */
  .s-navbar__menu-toggle {
    width: 75px;
    height: 75px;

    margin-right: 1rem;
  }

  /* Itens do menu hambúrguer */
  .s-navbar__one,
  .s-navbar__two,
  .s-navbar__three {
    width: 80%;
    height: 6px;

    margin: 6px auto;
  }

  /* Toggle menu aberto */
  .s-navbar-container--full .s-navbar__menu-toggle {
    left: 88%;
  }
  .s-navbar-container--full .s-navbar__one {
    transform: rotate(45deg) translate(16px, 16px);
  }

  /* Estilização dos itens da nav */
  .s-navbar__menu-item a {
    font-size: 3.6rem;
  }

  /* Home */

  .s-home__sentence {
    font-size: 4.8rem;
  }

  .s-home__button {
    text-align: center;

    width: 40%;
  }

  /* Quem Somos */

  .s-about__paragraph-container {
    margin-top: 16rem;
  }

  .s-about__title {
    font-size: 4.8rem;
  }

  .s-about__paragraph {
    font-size: 2.4rem;

    width: 43ch;
  }

  /* Painéis */

  .s-panels__card {
    width: 85%;
    height: 70%;
  }

  .s-panels__card-title {
    font-size: 5.6rem;
  }

  .s-panels__card-paragraph {
    font-size: 3.2rem;
  }

  /* Ajustes nos tamanhos das imagens */
  #mission {
    width: 18em;
  }

  #values {
    width: 18em;
  }

  /* Soluções */

  .s-solutions__title {
    font-size: 5.6rem;
  }

  .s-solutions__card-container {
    align-items: center;
  }

  .s-solutions__card {
    font-size: 2.4rem;

    margin: 0.5rem 1rem;
  }

  .s-solutions__card-image {
    font-size: 4.8rem;
  }

  /* Ajustes nos tamanhos das imagens */
  #house-image {
    margin-right: 0;
  }

  .s-solutions__card-title {
    font-size: 3.6rem;
  }

  /* Contato */

  .s-contact__title {
    font-size: 5.6rem;
  }

  .s-contact__form-container {
    font-size: 2.4rem;

    max-width: 520px;
    width: 80%;
  }

  .s-contact__btn {
    font-size: 2.4rem;
  }

  .s-contact__media {
    font-size: 5.6rem;
  }

  /* Footer */

  .s-footer__address {
    width: 30ch;

    font-size: 1.8rem;
  }
}

/* Breakpoint 992px */

@media screen and (min-width: 992px) {
  body {
    margin: auto;
  }

  /* Header */

  .s-header {
    z-index: 10;
    width: 100%;

    position: fixed;
    top: 0;

    transition: 200ms ease-in;
  }

  .s-header--scroll {
    background-color: white;
    color: black;
  }

  .ion-icon--black {
    color: black;
  }

  .s-header__image-container--size {
    width: 400px;

    margin: 1rem 0;
  }

  /* Toggle Menu Hambúrguer */
  .s-navbar__menu-toggle {
    display: none;
  }

  /* Menu aberto */
  .s-navbar__menu {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;

    width: 100%;

    padding: 0;
    margin: 0;
  }

  /* Estilização dos itens da nav */
  .s-navbar__menu-item {
    margin: 0.6rem;
  }

  .s-navbar__menu-item a {
    font-size: 2rem;
    font-weight: lighter;
  }

  .s-navbar__menu-item a:hover {
    font-weight: bold;
  }

  .s-navbar__menu-item-a--scroll {
    color: black !important;
  }

  /* Home */

  .s-home {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .s-home__content-container {
    text-align: center;

    margin-top: 18rem;
  }

  .s-home__button {
    transition: transform 200ms ease-in-out;
  }

  .s-home__button:hover {
    background-color: rgba(0, 0, 0, 0);
    border: 0.1rem solid rgba(204, 213, 224, 0.8);

    transform: scale(1.05);
  }

  /* Quem Somos */

  .s-about__paragraph-container {
    margin: 10rem auto 0 auto;
  }

  .s-about__paragraph {
    font-size: 2.4rem;

    width: 43ch;
  }

  /* Soluções */

  .s-solutions__title {
    margin: 0.5rem auto;
  }

  .s-solutions__card-btn {
    transition: transform 200ms ease;
  }

  .s-solutions__card-btn:hover {
    transform: scale(1.03);
  }

  /* Contact */

  .s-contact {
    height: auto;
  }

  .s-contact__media-container {
    margin-bottom: 3rem;
  }

  .s-contact__btn {
    transition: transform 200ms ease-in-out;
  }

  .s-contact__btn:hover {
    transform: scale(1.05);
  }
}

/* Breakpoint 1200px */

@media screen and (min-width: 1200px) {
  body {
    max-width: 2560px;
  }

  /* Header */

  .s-background-home {
    min-height: 95rem;
  }

  .s-header__image-container--size {
    width: 380px;
  }

  /* Estilização dos itens da nav */
  .s-navbar__menu-item {
    margin: 1rem;
  }

  .s-navbar__menu-item a {
    font-size: 1.8rem;
  }

  /* Home */

  .s-home__content-container {
    text-align: left;
  }

  .s-home__sentence {
    font-size: 5.6rem;

    width: 25ch;

    padding: 0.3em;
    padding-left: 0;
  }

  .s-home__sentence span {
    display: inline;
  }

  .s-home__short-desc {
    color: white;
    font-size: 2.4rem;
    text-align: justify;

    display: block;

    width: 30ch;
  }

  .s-home__button {
    text-align: center;

    max-width: 350px;
    width: 20%;

    margin-left: 0;
    margin-right: auto;
  }

  /* Quem Somos */

  .s-about__image-reference--position {
    position: relative;

    width: fit-content;
    height: fit-content;

    margin: 0 auto;
  }

  .s-about {
    width: 100vw;
    height: auto;
  }

  .s-about__title {
    margin: 2rem auto 2rem 0;

    padding: 0.1em;
  }

  .s-about__content-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;

    width: 100%;
    height: auto;

    margin: 5.8rem 0;
  }

  .s-about__paragraph-container {
    margin: 0;
  }

  .s-about__paragraph {
    font-size: 2rem;

    width: 34ch;
  }

  .s-about__image {
    position: absolute;
    top: 19.3%;
    left: 42%;

    display: block;

    width: 64.8rem;
    height: 64.8rem;

    margin: 0;
  }

  .s-about__image img {
    width: 100%;
    height: 100%;
  }

  /* Painéis */

  #cards-carousel {
    display: none;
  }

  .s-panels__cards {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100vh;
  }

  .s-panels__cards-container {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;

    gap: 3rem;

    margin: 3rem;
  }

  .s-panels__card {
    width: 30%;
    min-height: 40rem;

    transition: transform 50ms ease-in-out;
  }

  .s-panels__card:hover {
    transform: scale(1.03);
  }

  .s-panels__card-title {
    font-size: 3.2rem;
  }

  .s-panels__card-paragraph {
    font-size: 2.4rem;
  }

  /* Soluções */

  .s-solutions {
    height: 100vh;
  }

  .s-solutions__content-container {
    margin-top: 8rem;
  }

  .s-solutions__title {
    margin: 0 auto 2rem 2rem;
  }

  .s-solutions__card-container {
    display: grid;
    grid-template-columns: auto auto;

    grid-row-gap: 5rem;
    grid-column-gap: 9rem;
  }

  .s-solutions__card {
    font-size: 1.8rem;
  }

  .s-solutions__card-image {
    font-size: 3.2rem;
  }

  .s-solutions__card-title {
    font-size: 2.4rem;
  }

  .s-solutions__card-paragraph {
    text-align: justify;
  }

  /* Ajustes nos tamanhos das imagens */
  #house-image {
    margin-right: 1rem;
  }

  /* Parágrafos individuais */
  #house-paragraph {
    width: 17ch;
  }

  #industry-paragraph {
    width: 25ch;
  }

  #commercial-paragraph {
    width: 31ch;
  }

  #arquitetura-paragraph {
    width: 29ch;
  }

  /* Contato */

  .s-contact__title {
    font-size: 4.8rem;
  }

  .s-contact__input {
    margin: 0.5rem auto;
  }

  .s-contact__media {
    width: 1em;
    height: 1em;
  }

  /* Footer */

  .s-footer__address {
    font-size: 1.6rem;
  }
}

/* Breakpoint 1400px */

@media screen and (min-width: 1400px) {
  /* Quem Somos */

  .s-about__image {
    top: 19.3%;
  }

  /* Soluções */

  .s-solutions__title {
    margin: 0 auto 2rem 10rem;
  }
}

/* Breakpoint: 1600px */

@media screen and (min-width: 1600px) {
  /* Quem Somos */

  .s-about__content-container {
    margin: 5.9rem 0;
  }

  .s-about__image {
    top: 19%;
  }
}