* {
  font-family: 'Unbounded', Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

.container {
  padding: 0 8vw;
  overflow-x: hidden;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-transform: uppercase;
    width: 100vw;
    border-bottom: 1px solid #EBEBEB;
    top: 0;
    left: 0;
    padding: 20px 8vw;
    position: fixed;
    z-index: 100;
    background: #FFF;

    .header-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 4;

      &.open {
        display: block;
      }
    }

    .header-logo {
      z-index: 6;
      font-size: 1.3vw;
      font-weight: 700;
      line-height: 160%;
      color: #1A1A1A;
      text-decoration: none;
    }

    .header-nav {
      .header-list {
        display: flex;
        align-items: center;
        gap: 2vw;
        list-style: none;

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

          .header-link {
            font-size: 0.9vw;
            font-weight: 700;
            line-height: 160%;
            color: #666666;
            text-decoration: none;
            transition: color 0.5s;

            &:hover {
              color: #33D469;
            }
          }

          .header-link.active {
            border-bottom: 2px solid #34D07B;
          }
        }
      }
    }

    .header-button {
      cursor: pointer;
      font-size: 0.9vw;
      padding: 0.6vw 1.2vw;
      background: #34D07B;
      border: none;
      outline: none;
      color: #1A1A1A;
      font-weight: 700;
      text-transform: uppercase;
      border-radius: 100px;
      transition: background 0.5s, color 0.5s;
      text-decoration: none;

      &:hover {
        background: #1A1A1A;
        color: #34D07B;
      }
    }

    .header-button--mobile-only {
      display: none;
    }

    .header-burger {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;

      span {
        display: block;
        width: 24px;
        height: 2px;
        background: #1A1A1A;
        transition: transform 0.3s, opacity 0.3s;
      }

      &.open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
      }

      &.open span:nth-child(2) {
        opacity: 0;
      }

      &.open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
      }
    }
  }

  main {
    padding-top: 8vh;
  }

  .footer {
    background: #1A1A1A;
    margin: 0 -8vw;
    padding: 4.2vw 8vw;

    .footer-main {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      padding-bottom: 3.4vw;
      border-bottom: 1px solid #323232;

      .footer-brand {
        .footer-logo {
          font-size: 1.6vw;
          line-height: 133%;
          color: #FFFFFF;
          font-weight: 700;
          text-transform: uppercase;
          text-decoration: none;
        }

        .footer-desc {
          margin-top: 0.8vw;
          font-size: 0.9vw;
          max-width: 75%;
          line-height: 145%;
          color: #999999;
        }
      }

      .footer-nav {
        .footer-heading {
          font-size: 0.9vw;
          text-transform: uppercase;
          color: #FFFFFF;
          margin-bottom: 0.8vw;
        }

        .footer-nav-list {
          list-style: none;
          display: flex;
          flex-direction: column;
          gap: 0.8vw;

          li {
            a {
              display: block;
              text-decoration: none;
              color: #999999;
              font-size: 0.9vw;
              transition: color 1s;

              &:hover {
                color: #FFFFFF;
              }
            }
          }
        }
      }

      .footer-contacts {
        .footer-heading {
          font-size: 0.9vw;
          text-transform: uppercase;
          font-style: normal;
          color: #FFFFFF;
          margin-bottom: 0.8vw;
        }

        .footer-contacts-link {
          color: #999999;
          font-size: 0.9vw;
          text-decoration: none;
          font-style: normal;
          transition: color 1s;

          &:hover {
            color: #FFFFFF;
          }
        }

        .footer-socials {
          margin-top: 1.1vw;
          display: flex;
          gap: 0.8vw;

          a {
            width: fit-content;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.69vw;
            padding: 0.7vw;
            background: #323232;
            transition: background 1s;

            &:hover {
              background: #202020;
            }
          }
        }
      }
    }

    .footer-bottom {
      padding-top: 1.3vw;
      display: grid;
      grid-template-columns: 1fr 2fr;
      color: #666666;
      font-size: 0.9vw;

      ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
        list-style: none;

        li {
          a {
            text-decoration: none;
            color: #666666;
            font-size: 0.8vw;
            transition: color 1s;

            &:hover {
              color: #FFFFFF;
            }
          }
        }
      }
    }
  }

  .cookies-tooltip {
    position: relative;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 4vw;
    position: fixed;
    bottom: 4vh;
    width: fit-content;
    left: 50%;
    transform: translateX(-50%);
    padding: 1.6vw;
    background: #FFFFFF;
    border-radius: 1.3vw;
    -webkit-box-shadow: 0px 0px 29px 0px rgba(34, 60, 80, 0.2);
    -moz-box-shadow: 0px 0px 29px 0px rgba(34, 60, 80, 0.2);
    box-shadow: 0px 0px 29px 0px rgba(34, 60, 80, 0.2);
    cursor: pointer;


    button {
      cursor: pointer;
      width: fit-content;
      display: block;
      border-radius: 100px;
      font-size: 0.9vw;
      color: #34D07B;
      font-weight: 500;
      text-transform: uppercase;
      text-decoration: none;
      padding: 1.1vw 2.2vw;
      background: #34D07B26;
      transition: background 1s, color 1s;
      border: none;
      outline: none;

      &:hover {
        background: #1A1A1A;
        color: #34D07B;
      }
    }
  }

  .cookies-tooltip:not([hidden]) {
    animation: slideUpTooltip 1s ease-in;
  }

  .cookies-tooltip[hidden] {
    display: none;
    opacity: 0;
  }
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #00000080;
  z-index: 10;
}

.modal-dialog {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 11;
  background-color: #fff;
  padding: 2.7vw 5.4vw;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.6vw;

  .modal-close-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #666;
    cursor: pointer;
    background: #f0f0f0;
    padding: 1.25vw;
    border-radius: 10px;
    outline: none;
    border: none;
  }

  .modal-title {
    font-size: 1.6vw;
    text-transform: uppercase;
  }

  .modal-subtitle {
    font-size: 0.9vw;
  }

  .modal-desc {
    display: flex;
    align-items: center;
    font-size: 0.9vw;
    color: #666;
  }
}

.modal-dialog[hidden] {
  display: none;
}

@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  .container {
    padding: 0 5.3vw;

    .header {
      width: 100vw;
      padding: 5.3vw;
      background: #FFF;

      .header-logo {
        font-size: 4.8vw;
      }

      .header-burger {
        display: flex;
      }

      .header-nav {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: #fff;
        z-index: 5;
        padding: 14.5vw 5.3vw 5.3vw;

        &.open {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }

        .header-list {
          flex-direction: column;
          align-items: flex-start;
          gap: 0;

          .header-item {
            width: 100%;
            border-bottom: 1px solid #EBEBEB;

            .header-link {
              display: block;
              width: 100%;
              font-size: 4.2vw;
              color: #1A1A1A;
              padding: 4.2vw 0;

              &.active {
                border-bottom: none !important;
              }
            }
          }
        }
      }

      .header-button {
        font-size: 3.7vw;
        text-transform: uppercase;
        color: #000;
        text-align: center;
        line-height: 100%;
        font-weight: 500;
        margin-top: 5.3vw;
        padding: 4.2vw 0;
      }

      .header-button--desktop-only {
        display: none;
      }

      .header-button--mobile-only {
        display: block;
      }

      .header-burger {
        position: relative;
        z-index: 10;
      }
    }

    .footer {
      .footer-main {
        grid-template-columns: 1fr;
        gap: 8.5vw;

        .footer-brand {
          .footer-logo {
            font-size: 5.3vw;
          }

          .footer-desc {
            font-size: 3.2vw;
          }
        }

        .footer-nav {
          .footer-heading {
            font-size: 3.2vw;
          }

          .footer-nav-list {
            gap: 2.6vw;

            li {
              a {
                font-size: 3.2vw;
              }
            }
          }
        }

        .footer-contacts {
          .footer-heading {
            font-size: 3.2vw;
          }

          .footer-contacts-link {
            font-size: 3.2vw;
          }

          .footer-socials {
            a {
              border-radius: 2.1vw;
            }
          }
        }
      }

      .footer-bottom {
        grid-template-columns: 1fr;

        p {
          font-size: 3.2vw;
        }

        ul {
          margin-top: 3.2vw;
          align-items: flex-start;
          flex-direction: column;
          gap: 3.2vw;

          li {
            a {
              font-size: 2.9vw;
            }
          }
        }
      }
    }

    .cookies-tooltip {
      flex-direction: column;
      width: 90%;
      text-align: center;

      .cookies-tooltip-text {
        font-size: 3.7vw;
      }

      .cookies-tooltip-btn {
        font-size: 3.7vw;
        padding: 3.8vw 4.8vw;
        width: 70%;
      }
    }
  }
}

@keyframes slideUpTooltip {
  0% {
    transform: translateY(100%) translateX(-50%);
    opacity: 0;
  }

  100% {
    transform: translateY(0) translateX(-50%);
    opacity: 1;
  }
}