@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap");

:root {
  --Laranja: #f08101;
  --Vermelho: #d93b20;
  --Azul: #2e01be;
}

* {
  line-height: 100%;
  font-family: "Fredoka", sans-serif;
  margin: 0;
  padding: 0;
  z-index: 1;
}

/* Elemento Footer */
#footer.section-page {
  *:not(.disabled) {
    color: white;
  }

  background-color: #120049;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  margin-top: 64px;
  padding: 64px calc((100vw - 1200px) / 2);
  width: 100vw;

  > div {
    display: flex;
    flex-direction: column;
    gap: 6px;

    > h5 {
      margin-bottom: 8px;
    }
  }

  > .logotipo {
    grid-area: logotipo;
  }

  > .servicos {
    grid-area: servicos;
  }

  > .redes-sociais {
    grid-area: redes-sociais;
  }

  > .sobre-nos {
    grid-area: sobre-nos;
  }

  @media (max-width: 1300px) {
    padding: 64px 56px;
  }

  @media (max-width: 1000px) {
    display: grid;
    gap: 24px;
    grid-template-areas:
      "logotipo servicos redes-sociais"
      ". sobre-nos .";
  }

  @media (max-width: 800px) {
    align-items: center;
    display: flex;
    flex-direction: column;

    > div > .item,
    div > h5 {
      cursor: default;
      text-align: center;
    }
  }
}

.last-infos {
  box-sizing: border-box;
  justify-content: center;
  background-color: #120049;
  display: flex;
  padding: 24px;
  width: 100vw;

  > p {
    line-height: 120%;
    text-align: center;
  }
}

/* Elemento Header */

header {
  align-items: center;
  background-color: #0f003f;
  box-sizing: border-box;
  color: #ffffff;
  display: flex;
  font-size: 20px;
  height: 80px;
  justify-content: space-between;
  user-select: none;
  width: 100%;
  padding: 0 40px;
  position: fixed;
  z-index: 2;

  > .left {
    width: min-content;
    > svg {
      height: 36px;
    }
  }

  > .right {
    align-items: center;
    display: flex;
    gap: 24px;

    > .menu-computer {
      display: flex;
      gap: 24px;

      > .item {
        border-bottom: 2px solid transparent;
        padding: 4px 8px;
        transition: 200ms;
      }

      > .item:hover {
        border-bottom: 2px solid #ffffff;
        cursor: default;
      }
    }

    > .hamburguer-menu {
      display: none;
    }
  }

  @media (max-width: 900px) {
    > .right {
      > .menu-computer {
        display: none;
      }

      > .hamburguer-menu {
        cursor: pointer;
        display: flex;
      }
    }
  }

  @media (max-width: 600px) {
    height: 72px;
    padding: 24px;

    > .left {
      > img {
        width: 120px;
      }
    }

    > .right {
      > .menu-computer {
        display: none;
      }

      > .login {
        /* display: none; */
      }

      > .hamburguer-menu {
        display: flex;
      }
    }
  }
}

/* Elemento Mobile Menu Container */

#mobile-menu-container {
  *:not(.disabled) {
    color: white;
  }

  background-color: rgba(0, 0, 0, 0.339);
  display: none;
  height: 100dvh;
  width: 100vw;
  position: fixed;
  overflow-y: hidden;
  z-index: 2;
  right: 0;

  > .content {
    background-color: #1a006b;
    box-sizing: border-box;
    height: 100dvh;
    overflow-y: hidden;
    padding: 0 40px;
    position: absolute;
    right: 0;
    width: 80vw;
    > .header {
      box-sizing: border-box;
      text-align: end;
      padding: 16px 0;
      user-select: none;
      font-size: 32px;
      margin-bottom: 24px;
      width: 100%;
      > .close-menu {
        color: rgb(255, 144, 144);
      }
    }

    > .items {
      display: flex;
      flex-direction: column;
      gap: 16px;

      > div.show {
        margin-bottom: 24px;

        > .title > svg {
          rotate: 90deg;
        }
      }

      > div {
        display: flex;
        flex-direction: column;
        gap: 4px;
        > .item {
          display: none;
        }

        > .title {
          display: flex;
          justify-content: space-between;
          margin-bottom: 8px;

          > svg {
            rotate: 0deg;
            transition: 200ms;
            width: 12px;
          }
        }

        > p {
          > a {
            text-decoration: none;
          }
        }
      }

      > div.show {
        > .item {
          display: flex;
        }
      }
    }

    > .logotipo {
      position: absolute;
      bottom: 16px;
      > svg {
        width: 50vw;
      }
    }
  }
}

/* Estilizando os padrões da página */

html {
  font-size: 10px;
}

a.disabled {
  color: gray;
  text-decoration: none;
}

h1 {
  font-size: 64px;
  font-weight: 600;
  line-height: 100%;
}

h2 {
  font-size: 48px;
  font-weight: 600;
  letter-spacing: 1.6px;

  @media (max-width: 960px) {
    font-size: 40px;
  }

  @media (max-width: 700px) {
    font-size: 32px;
  }
}

h3 {
  font-size: 40px;
}

h4 {
  font-size: 32px;
  font-weight: 500;
}

h5 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 1px;
}

p.p1 {
  font-size: 20px;
}

p.p2 {
  font-size: 16px;
}

button {
  align-items: center;
  border-radius: 24px;
  border: none;
  cursor: pointer;
  display: flex;
  font-size: 20px;
  font-weight: 500;
  outline: none;
  padding: 10px 24px;
  transition: 300ms ease-out;
  width: fit-content;
}

button.orange {
  box-shadow: 0px 0px 16px 0px #f08101;
  color: #ffffff;
}

button.orange:hover {
  box-shadow: 0px 0px 16px 6px #f08101;
}

button.orange.filled {
  background-color: var(--Laranja);
}

button.orange.outlined {
  background-color: transparent;
  border: 2px solid var(--Laranja);
  box-shadow: 0px 0px 16px 0px #f08101, inset 0px 0px 16px 0px #f08101;
  color: var(--Laranja);
}

button.orange.outlined:hover {
  box-shadow: 0px 0px 16px 6px #f08101, inset 0px 0px 16px 6px #f080015b;
}

body {
  align-items: center;
  background-color: #1a006b;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  max-width: 100vw;
}

#light-hero {
  position: absolute;
  right: 0;
  z-index: 0;
}

header {
  align-items: center;
  background-color: #0f003f;
  box-sizing: border-box;
  color: #ffffff;
  display: flex;
  font-size: 20px;
  height: 80px;
  justify-content: space-between;
  user-select: none;
  width: 100%;
  padding: 0 40px;
  /* position: fixed; */
  z-index: 2;

  > .left {
    > img {
      height: 40px;
    }
  }

  > .right {
    align-items: center;
    display: flex;
    gap: 24px;

    > .menu-computer {
      display: flex;
      gap: 24px;

      > .item {
        border-bottom: 2px solid transparent;
        padding: 4px 8px;
        transition: 200ms;
      }

      > .item:hover {
        border-bottom: 2px solid #ffffff;
        cursor: default;
      }
    }

    > .hamburguer-menu {
      display: none;
    }
  }

  @media (max-width: 900px) {
    > .right {
      > .menu-computer {
        display: none;
      }

      > .hamburguer-menu {
        cursor: pointer;
        display: flex;
      }
    }
  }

  @media (max-width: 600px) {
    height: 72px;
    padding: 24px;

    > .left {
      > img {
        width: 120px;
      }
    }

    > .right {
      > .menu-computer {
        display: none;
      }

      > .login {
        /* display: none; */
      }

      > .hamburguer-menu {
        display: flex;
      }
    }
  }
}

.section-page {
  max-width: 100vw;
}

#mobile-menu-container {
  background-color: rgba(0, 0, 0, 0.339);
  display: none;
  height: 100dvh;
  width: 100vw;
  position: fixed;
  overflow-y: hidden;
  z-index: 2;
  right: 0;

  > .content {
    background-color: #1a006b;
    box-sizing: border-box;
    height: 100dvh;
    overflow-y: hidden;
    padding: 0 40px;
    position: absolute;
    right: 0;
    width: 80vw;
    > .header {
      box-sizing: border-box;
      text-align: end;
      padding: 16px 0;
      user-select: none;
      font-size: 32px;
      margin-bottom: 24px;
      width: 100%;
      > .close-menu {
        color: rgb(255, 144, 144);
      }
    }

    > .items {
      display: flex;
      flex-direction: column;
      gap: 16px;

      > div.show {
        margin-bottom: 24px;

        > .title > svg {
          rotate: 90deg;
        }
      }

      > div {
        display: flex;
        flex-direction: column;
        gap: 4px;
        > .item {
          display: none;
        }

        > .title {
          display: flex;
          justify-content: space-between;
          margin-bottom: 8px;

          > svg {
            rotate: 0deg;
            transition: 200ms;
            width: 12px;
          }
        }

        > p {
          > a {
            text-decoration: none;
          }
        }
      }

      > div.show {
        > .item {
          display: flex;
        }
      }
    }

    > .logotipo {
      position: absolute;
      bottom: 16px;
      > svg {
        width: 50vw;
      }
    }
  }
}