#hero {
  width: 100%;
  height: calc(100vh - 8rem);
  background-color: var(--branco);

  & .interface {
    justify-content: space-between;

    & .conteudo {
      display: flex;
      align-items: left;
      flex-direction: column;
      gap: 3rem;
      width: 50%;

      & h1 {
        font-size: 7rem;
        color: var(--azul-base);
      }

      & p {
        font-size: 2rem;
        color: var(--cinza-texto-base);
        width: 80%;
      }

      & nav {
        display: flex;
        gap: 3rem;
      }
    }

    & .imagem {
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: right;

      & img {
        border-radius: 1rem;
      }
    }
  }
}

#acesso-rapido {
  width: 100%;
  background-color: var(--cinza-claro);

  & .interface {
    flex-direction: column;
    padding: 3% 0;

    & h2 {
      font-size: 3rem;
      color: var(--azul-base);
      margin-bottom: 2rem;
    }

    & .container {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 1rem;

      & a {
        width: 32%;
        background-color: var(--branco);
        text-decoration: none;
        border-radius: 1rem;
        padding: 2rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;

        & .icone {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 6rem;
          height: 6rem;
          border-radius: 50%;
          background-color: var(--vermelho-base);
          color: var(--branco);
          font-size: 2.5rem;
        }

        & .titulo {
          font-size: 2rem;
          font-weight: bold;
          color: var(--azul-base);
        }

        & .descricao {
          font-size: 1.7rem;
          color: var(--cinza-texto-base);
        }

        & .link {
          font-size: 1.7rem;
          color: var(--azul-base);

          & span {
            padding-right: 1rem;
          }
        }
      }
    }
  }
}

#historia {
  width: 100%;
  background-color: var(--branco);

  & .interface {
    flex-direction: column;
    padding: 3% 0;

    & .conteudo {
      width: 100%;
      display: flex;

      & .informacoes {
        width: 50%;
        display: flex;
        flex-direction: column;
        gap: 3rem;

        & h3 {
          font-size: 3rem;
          color: var(--azul-base);
        }

        & p {
          font-size: 1.7rem;
          color: var(--cinza-texto-base);
        }

        & .btn-vermelho {
          width: 40%;
          text-align: center;
        }

        & .container {
          display: flex;
          gap: 1rem;

          & .icone {
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
            background-color: var(--azul-base-opaco);
            display: flex;
            align-items: center;
            justify-content: center;

            & i {
              color: var(--azul-base);
            }
          }

          & .conteudo {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;

            & .titulo {
              font-size: 1.7rem;
              font-weight: bold;
              color: var(--azul-base);
            }

            & .descricao {
              font-size: 1.7rem;
              color: var(--cinza-texto-base);
            }
          }
        }
      }

      & .imagem {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: right;

        & img {
          width: 95%;
          height: 80%;
          border-radius: 1rem;
        }
      }
    }
  }
}

#cursos {
  width: 100%;
  background-color: var(--cinza-claro);

  & .interface {
    flex-direction: column;
    padding: 3% 0;

    & .link {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2rem;

      & .btn-vermelho {
        display: flex;
      }

      & h4 {
        font-size: 3rem;
        color: var(--azul-base);
        margin-bottom: 2rem;
        margin: 0;
      }
    }

    & .container-cards {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;

      & article {
        background-color: var(--branco);
        width: 33%;
        border-radius: 1rem;
        overflow: hidden;

        & img {
          width: 100%;
          height: 20%;
        }

        & .informacoes {
          display: flex;
          flex-direction: column;
          gap: 1rem;
          padding: 2rem;

          & .titulo {
            font-size: 2rem;
            font-weight: bold;
            color: var(--azul-base);
          }

          & .descricao {
            font-size: 1.7rem;
            color: var(--cinza-texto-base);
          }

          & .container-link {
            display: flex;
            justify-content: space-between;

            & p {
              font-size: 1.7rem;
              color: var(--azul-base);
            }

            & a {
              font-size: 1.7rem;
              color: var(--azul-base);
              display: flex;
              justify-content: center;
              align-items: center;
              gap: 1rem;
              text-decoration: none;

              & i {
                font-size: 1.7rem;
              }
            }
          }
        }
      }
    }

    & .btn-vermelho {
      display: none;
    }
  }
}

#contato {
  & .interface {
    flex-direction: column;
    gap: 3rem;

    & h5 {
      font-size: 3.5rem;
      color: var(--azul-base);
    }

    & p {
      font-size: 2rem;
      color: var(--cinza-texto-base);
    }

    & nav {
      display: flex;
      gap: 2rem;
    }
  }
}

/* responsividade */

@media (max-width: 1023px) {
  /* HERO */

  #hero {
    height: auto;
    width: 100%;
    padding: 0 4%;

    & .interface {
      flex-direction: column-reverse;
      padding: 2rem 0;
      height: auto;

      & .imagem {
        width: auto;
        margin-bottom: 2rem;

        & img {
          width: 100%;
          max-height: 100%;
          height: 25rem;
        }
      }

      & .conteudo {
        width: 100%;
        height: auto;

        & h1 {
          font-size: 4rem;
          text-align: center;
          width: 100%;
        }

        & p {
          text-align: justify;
          width: 100%;
        }

        & nav {
          justify-content: space-between;
          display: flex;
          flex-direction: column;
          gap: 1rem;

          & .btn-vermelho {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 5rem;
          }

          & .btn-azul {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 5rem;
          }
        }
      }
    }
  }

  /* ACESSO RAPIDO */

  #acesso-rapido {
    padding: 0 4%;

    & .interface {
      padding: 2rem 0;

      & .container {
        flex-direction: column;

        & a {
          width: 100%;
        }
      }
    }
  }

  /* HISTORIA */

  #historia {
    padding: 0 4%;

    & .interface {
      padding: 2rem 0;

      & .conteudo {
        flex-direction: column-reverse;

        & .imagem {
          width: auto;
          margin-bottom: 2rem;

          & img {
            width: 100%;
            max-height: 100%;
            height: 25rem;
          }
        }

        & .informacoes {
          width: 100%;

          & .container {
            display: flex;
            align-items: center;

            & .icone {
              padding: 2.5rem;
            }
          }

          & .btn-vermelho {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 5rem;
          }

          & p {
            font-size: 2rem;
            width: 100%;
            text-align: justify;
          }

          & h3 {
            text-align: center;
          }
        }
      }
    }
  }

  /* CURSOS */

  #cursos {
    padding: 0 4%;

    & .interface {
      padding: 2rem 0;

      & .link {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        & .btn-vermelho {
          display: none;
        }
      }

      & .container-cards {
        overflow-x: auto;
        height: 30rem;
        align-items: normal;

        & article {
          flex: 0 0 auto;
          width: 27rem;

          & img {
            height: 40%;
          }

          & .informacoes {
            & .descricao {
              width: 100%;
              flex-grow: 1;
              text-align: justify;
            }
          }
        }
      }

      & .btn-vermelho {
        margin-top: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 5rem;
      }
    }
  }

  /* CONTATO  */

  #contato {
    padding: 0 4%;

    & .interface {
      padding: 2rem 0;

      & h5 {
        font-size: 3rem;
        text-align: center;
      }

      & nav {
        flex-direction: column;
        width: 100%;
        gap: 1rem;

        & .btn-azul {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 5rem;
        }

        & .btn-vermelho {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 5rem;
        }
      }
    }
  }
}