* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: "Unbounded", sans-serif;
  overflow-x: clip;
}

html {
  scroll-behavior: smooth;
  background: #f0f0f0;
  color: #282828;
}

.hidden {
  display: none;
}

.highlighted {
  color: #33D469;
}

.scroll-top {
  display: none;
  position: fixed;
  bottom: 2vh;
  right: 2vw;
  width: min(5vw, 160px);
  cursor: pointer;
  border: 0;
  outline: none;
  border-radius: 50%;
  background-color: #cceddb;
  max-width: 8vw;
  aspect-ratio: 1 / 1;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #33D469;
  box-shadow: 0 0.02vw 0.05vw 0 rgba(0, 0, 0, 0.1), 0 0.09vw 0.09vw 0 rgba(0, 0, 0, 0.09), 0 3vw 1vw 0 rgba(0, 0, 0, 0.01), 0 5vw 1vw 0 rgba(0, 0, 0, 0);
}

.scroll-top.show {
  display: flex;
}

.container {
  max-width: 87.5vw;
  margin: 0 auto;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3vw 0;

    .header-logo {
      max-width: 10vw;
    }

    .header-list {
      display: flex;
      align-items: center;
      gap: 50px;
      list-style: none;

      .header-item {
        display: flex;
        align-items: center;

        .header-link {
          text-decoration: none;
          color: #282828;
          font-size: 1vw;
          transition: all 0.6s;

          &:hover {
            font-weight: bold;
            color: #33D469;
          }
        }
      }
    }
  }

  .banner {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .banner-wrapper {
      max-width: 32vw;

      h1 {
        font-weight: bold;
        font-size: 5vw;
      }

      p {
        padding: 2vw 0 4vw;
        font-size: 1vw;
      }

      .banner-btn {
        display: block;
        border: 0;
        outline: none;
        border-radius: 0.7vw;
        max-width: 23vw;
        padding: 1vw 3vw;
        background-color: transparent;
        text-decoration: none;
        text-align: center;
        font-size: 1vw;
        color: #282828;
        background-color: #60e78d;
        box-shadow: 0 0.8vw #429f63;

        &:active {
          box-shadow: 0 0.5vw #429f63;
          transform: translateY(4px);
        }
      }
    }

    .banner-img {
      max-width: 38vw;
    }
  }

  .accord-base {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4vw;

    .accord-aside {
      display: flex;
      flex-direction: column;
      gap: 2vw;

      .accord-btn {
        display: block;
        width: min(8vw, 160px);
        cursor: pointer;
        border: 0;
        outline: none;
        border-radius: 50%;
        background-color: #cceddb;
        max-width: 8vw;
        aspect-ratio: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0.02vw 0.05vw 0 rgba(0, 0, 0, 0.1), 0 0.09vw 0.09vw 0 rgba(0, 0, 0, 0.09), 0 3vw 1vw 0 rgba(0, 0, 0, 0.01), 0 5vw 1vw 0 rgba(0, 0, 0, 0);

        svg {
          overflow: visible;
          width: 55%;
          height: 55%;
        }
      }

      .accord-btn.active {
        border: 4px solid #33D469;
      }
    }

    .accord-content {
      flex: 0 0 100%;
      position: relative;
      overflow: hidden;

      .panel {
        display: flex;
        position: absolute;
        inset: 0;
        opacity: 0;
        transform: translateX(-24px);
        transition:
          opacity 0.75s ease,
          transform 0.75s ease;
        pointer-events: none;
        justify-content: space-between;
        align-items: center;
        gap: 4vw;
        max-width: 75vw;

        img {
          max-width: 20vw;
        }

        .accord-panel-wrapper {
          max-width: 50vw;
          background-color: #fff;
          padding: 2vw;
          border-radius: 3vw;
          height: fit-content;

          h3 {
            font-size: 1.8vw;
            margin-bottom: 2vw;
          }

          ul {
            padding-left: 1.6vw;

            li {
              font-size: 1.5vw;
            }
          }
        }
      }

      .panel.active {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
        position: relative;
      }

      .accord-content .panel.exit {
        opacity: 0;
        transform: translateX(24px);
      }
    }
  }

  .premium {
    margin: 4vw 0;
    padding: 3vw;
    background-color: #fff;
    border-radius: 3vw;

    h2 {
      font-size: 3vw;
      text-align: end;
    }

    .premium-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 2vw;

      .premium-left {
        max-width: 58%;

        h3 {
          font-size: 2vw;
        }

        ul {
          margin-top: 2vw;
          padding-left: 1.5vw;

          li {
            font-size: 1.4vw;
          }
        }
      }

      img {
        max-width: 22vw;
      }
    }
  }

  .install {
    h2 {
      font-size: 3vw;
      margin: 5vw 0;
    }

    .install-panel-wrapper {
      .install-inline {
        display: block;
        border: 0;
        outline: none;
        border-radius: 0.7vw;
        max-width: 23vw;
        padding: 1vw 3vw;
        background-color: transparent;
        text-decoration: none;
        text-align: center;
        font-size: 1vw;
        color: #282828;
        margin: 1vw auto;
        background-color: #60e78d;
        box-shadow: 0 0.8vw #429f63;

        &:active {
          box-shadow: 0 0.5vw #429f63;
          transform: translateY(4px);
        }
      }
    }
  }
}

.announce,
.footer {
  padding: 0 6.25vw;
  background-color: #fff;

}

.announce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1vw;
  padding: 1vh 0;
  margin-bottom: 5vw;

  h2 {
    font-size: 3vw;
  }

  img {
    max-width: 26vw;
  }
}

.footer {
  margin-top: 5vw;
  border-radius: 5vw 5vw 0 0;
  padding-top: 4vh;
  padding-bottom: 4vh;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  .reserved {
    display: flex;
    flex-direction: column;
    gap: 1vh;

    p {
      font-size: 1vw;
    }
  }

  .socials {
    .socials-list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 30vw;
      list-style: none;

      .socials-item {
        a {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-decoration: none;
          gap: 1vh;
          font-size: 1vw;
          color: #282828;

          img {
            max-width: 3vw;
          }
        }
      }
    }
  }

  .add-links {
    ul {
      display: flex;
      flex-direction: column;
      align-items: end;
      justify-content: end;
      gap: 1vh;
      list-style: none;

      li {
        height: fit-content;

        a {
          display: block;
          text-decoration: none;
          color: #282828;
          font-size: 1vw;
          transition: all 0.6s;

          &:hover {
            font-weight: bold;
            color: #33D469;
          }
        }
      }
    }
  }
}


@media (max-width: 1024px) {
  .container {
    .header {
      .header-logo {
        max-width: 20vw;
      }

      .header-list {
        gap: 2vw;

        .header-item {
          .header-link {
            font-size: 1.5vw;
          }
        }
      }
    }

    .banner {
      .banner-wrapper {
        max-width: 50vw;

        h1 {
          font-size: 7vw;
        }

        p {
          font-size: 2vw;
          padding: 4vw 0 2vw;
        }

        .banner-btn {
          max-width: 32vw;
          font-size: 1.8vw;
        }
      }
    }

    .accord-base {
      .accord-content {
        .panel {
          .accord-panel-wrapper {
            h3 {
              font-size: 2.2vw;
            }

            ul {
              padding-left: 2.2vw;

              li {
                font-size: 1.8vw;
              }
            }
          }
        }
      }
    }
  }

  .premium {
    h2 {
      font-size: 4vw;

      .premium-wrapper {
        .premium-left {
          h3 {
            font-size: 4vw;
          }

          ul {
            li {
              font-size: 1.6vw;
            }
          }
        }
      }
    }
  }
}


@media (max-width: 768px) {
  .container {
    .header {
      flex-wrap: wrap;

      nav {
        padding-top: 3vw;
        flex: 0 0 100%;
      }
    }

    .accord-base {
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;

      .accord-aside {
        flex-direction: row;

      }

      .accord-content {
        flex: 0 0 100%;

        .panel {
          margin: 0 auto;
        }
      }
    }
  }
}

.announce-link {
  text-decoration: none;
  color: #282828;
  font-size: 3vw;
  font-weight: 800;
  transition: opacity .2s ease, transform .2s ease;
}

.announce-link:hover {
  opacity: .85;
  transform: translateY(-1px);
}