header.header-container {
  position: fixed;
  inset-inline: 0;
  z-index: 10;
  transition: backdrop-filter, background-color 0.5s ease;

  .header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);

    .logo-wrapper {
      display: flex;
      width: 10.375rem;

      img {
        width: 100%;
      } /* .logo-wrapper img */
    } /* .logo-wrapper */

    .navigation-container {
      .navigation-wrapper {
        display: flex;
        align-items: center;
        column-gap: 3rem;

        .navigation {
          transition: font-weight 0.5s ease;

          &:hover {
            font-weight: 700;
          } /* .navigation:hover */

          &.active {
            position: relative;
            color: rgba(209, 166, 23, 1);

            &::after {
              content: "";
              position: absolute;
              bottom: -0.5rem;
              left: 1rem;
              right: 1rem;
              height: 0.25rem;
              border-radius: 0.5625rem;
              background-color: rgba(255, 255, 255, 1);
            } /* .navigation.active::after */
          } /* .navigation.active */
        } /* .navigation */
      } /* .navigation-wrapper */
    } /* .navigation-container */

    .hamburger-container {
      display: none;

      .hamburger-icon {
        height: 3.2rem;
        width: 3.2rem;
        user-select: none;

        svg {
          height: 100%;
          width: 100%;
        } /* .hamburger-icon svg */
      } /* .hamburger-icon */

      .hamburger-menu-container {
        position: fixed;
        top: 6.4rem;
        left: 0;
        right: 0;
        display: none;
        max-width: 20rem;
        margin-left: auto;
        margin-right: 2rem;
        border-radius: 2rem;

        .hamburger-menu-wrapper {
          display: flex;
          flex-direction: column;
          row-gap: 2.5rem;
          padding: 2rem;

          .navigation-wrapper {
            display: flex;
            flex-direction: column;
            row-gap: 1.5rem;

            .navigation {
              font-size: 1.3rem;
              transition: font-weight 0.5s ease;

              &:hover {
                font-weight: 700;
              } /* .navigation:hover */

              &.active {
                position: relative;
                color: rgba(209, 166, 23, 1);

                &::after {
                  content: "";
                  position: absolute;
                  bottom: -0.5rem;
                  left: 1rem;
                  right: 1rem;
                  height: 0.25rem;
                  border-radius: 0.5625rem;
                  background-color: rgba(255, 255, 255, 1);
                } /* .navigation.active::after */
              } /* .navigation.active */
            } /* .navigation */
          } /* .navigation-wrapper */

          .cta-wrapper {
            .primary-button {
              justify-content: center;
            } /* .primary-button */
          } /* .cta-wrapper */
        } /* .hamburger-menu-wrapper */
      } /* .hamburger-menu-container */
    } /* .hamburger-container */
  } /* .header-wrapper */
} /* header.header-container */

footer.footer-container {
  background-image: url("../assets/images/gradient-bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  .footer-wrapper {
    .navigation-container {
      display: flex;
      justify-content: space-between;
      column-gap: 1.25rem;
      row-gap: 4rem;
      padding-bottom: 3.75rem;
      padding-top: 6.25rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);

      .navigation-wrapper {
        max-width: 19rem;
        width: fit-content;

        .footer-links-title {
          color: rgba(209, 166, 23, 1);
        } /* .footer-links-title */

        .footer-links-wrapper {
          display: flex;
          flex-direction: column;
          row-gap: 1.375rem;
          margin-top: 2rem;

          .footer-link {
            display: flex;
            align-items: center;
            color: rgba(255, 255, 255, 0.4);
            transition: color, font-weight 0.5s ease;

            &:hover {
              font-weight: 700;
              color: rgba(255, 255, 255, 1);
            } /* .footer-link:hover */

            .footer-link-icon {
              display: contents;

              img {
                margin-right: 0.75rem;
              } /* .footer-link-icon img */
            } /* .footer-link-icon */
          } /* .footer-link */
        } /* .footer-links-wrapper */
      } /* .navigation-wrapper */

      .navigation-wrapper.logo-container {
        p {
          margin-top: 2.5rem;
          font-size: 1rem;
          font-weight: 500;
          line-height: 1.625rem;
          white-space: nowrap;
          color: rgba(255, 255, 255, 0.4);
        } /* .navigation-wrapper.logo-container p */

        a.social-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 2.5rem;
          width: 2.5rem;
          margin-top: 2.5rem;
          border-radius: 6.1875rem;
          background-color: rgba(255, 255, 255, 0.2);
          transition: scale 0.5s ease;

          &:hover {
            scale: 1.1;
          } /* a.social-icon:hover */

          img {
            height: 1.25rem;
            width: 1.25rem;
          } /* a.social-icon img */
        } /* a.social-icon */
      } /* .navigation-wrapper.logo-container */
    } /* .navigation-container */

    .copyright-container {
      padding-bottom: 1.875rem;
      padding-top: 1.875rem;

      .copyright-wrapper {
        display: flex;
        justify-content: center;
        column-gap: 0.25rem;

        small {
          color: rgba(255, 255, 255, 0.4);
        } /* .copyright-wrapper small */
      } /* .copyright-wrapper */
    } /* .copyright-container */
  } /* .footer-wrapper */
} /* footer.footer-container */

/* tablet breakpoint */
@media (max-width: 1024px) {
  header.header-container {
    .header-wrapper {
      margin-left: 20px;
      margin-right: 20px;
      padding-left: 0;
      padding-right: 0;

      .navigation-container {
        display: none;

        .navigation-wrapper {
          .navigation {
            &:hover {
            } /* .navigation:hover */

            &.active {
              &::after {
              } /* .navigation.active::after */
            } /* .navigation.active */
          } /* .navigation */
        } /* .navigation-wrapper */
      } /* .navigation-container */

      .cta-container {
        display: none;
      } /* .cta-container */

      .hamburger-container {
        display: block;
      } /* .hamburger-container */
    } /* .header-wrapper */
  } /* header.header-container */

  footer.footer-container {
    .footer-wrapper {
      .navigation-container {
        flex-wrap: wrap;

        .navigation-wrapper {
          .footer-links-title {
          } /* .footer-links-title */

          .footer-links-wrapper {
            .footer-link {
              &:hover {
              } /* .footer-link:hover */

              .footer-link-icon {
                img {
                } /* .footer-link-icon img */
              } /* .footer-link-icon */
            } /* .footer-link */
          } /* .footer-links-wrapper */
        } /* .navigation-wrapper */

        .navigation-wrapper.logo-container {
          max-width: none;

          p {
            font-size: 1.4rem;
            white-space: normal;
          } /* .navigation-wrapper.logo-container p */

          a.social-icon {
            &:hover {
            } /* a.social-icon:hover */
          } /* span.social-icon */
        } /* .navigation-wrapper.logo-container */
      } /* .navigation-container */

      .copyright-container {
        .copyright-wrapper {
          small {
            font-size: 1.4rem;
          } /* .copyright-wrapper small */
        } /* .copyright-wrapper */
      } /* .copyright-container */
    } /* .footer-wrapper */
  } /* footer.footer-container */
}

/* mobile breakpoint */
@media (max-width: 640px) {
  header.header-container {
    .header-wrapper {
      .navigation-container {
        display: none;

        .navigation-wrapper {
          .navigation {
            &:hover {
            } /* .navigation:hover */

            &.active {
              &::after {
              } /* .navigation.active::after */
            } /* .navigation.active */
          } /* .navigation */
        } /* .navigation-wrapper */
      } /* .navigation-container */

      .cta-container {
        display: none;
      } /* .cta-container */

      .hamburger-container {
        .hamburger-icon {
          svg {
          } /* .hamburger-icon svg */
        } /* .hamburger-icon */

        .hamburger-menu-container {
          max-width: unset;
          margin-left: 2rem;

          .hamburger-menu-wrapper {
            .navigation-wrapper {
              .navigation {
                font-size: 1.8rem;
                transition: font-weight 0.5s ease;

                &:hover {
                  font-weight: 700;
                } /* .navigation:hover */

                &.active {
                  &::after {
                  } /* .navigation.active::after */
                } /* .navigation.active */
              } /* .navigation */
            } /* .navigation-wrapper */
          } /* .hamburger-menu-wrapper */
        } /* .hamburger-menu-container */
      } /* .hamburger-container */
    } /* .header-wrapper */
  } /* header.header-container */

  footer.footer-container {
    .footer-wrapper {
      .navigation-container {
        flex-wrap: wrap;

        .navigation-wrapper {
          .footer-links-title {
          } /* .footer-links-title */

          .footer-links-wrapper {
            .footer-link {
              &:hover {
              } /* .footer-link:hover */

              .footer-link-icon {
                img {
                } /* .footer-link-icon img */
              } /* .footer-link-icon */
            } /* .footer-link */
          } /* .footer-links-wrapper */
        } /* .navigation-wrapper */

        .navigation-wrapper.logo-container {
          max-width: none;

          p {
            font-size: 1.4rem;
          } /* .navigation-wrapper.logo-container p */

          a.social-icon {
            &:hover {
            } /* a.social-icon:hover */
          } /* span.social-icon */
        } /* .navigation-wrapper.logo-container */
      } /* .navigation-container */

      .copyright-container {
        .copyright-wrapper {
          small {
            font-size: 1.4rem;
          } /* .copyright-wrapper small */
        } /* .copyright-wrapper */
      } /* .copyright-container */
    } /* .footer-wrapper */
  } /* footer.footer-container */
}