.header {
  z-index: 99999;
  position: sticky;
  top: 0;

  .header-wrapper {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    padding: 8px 24px;
    align-items: center;

    @media screen and (max-width: 720px) {
      padding: 8px 16px;
    }

    .mini-navigation {
      display: none;

      @media screen and (max-width: 720px) {
        display: flex;
      }

      .container-fluid {
        .navbar-toggler {
          svg {
            height: 32px;
            width: 32px;
            fill: #000000;
          }
        }
      }
    }

    .navigation-wrapper {
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;

      @media screen and (max-width: 720px) {
        display: none;
      }

      .navigation {
        display: flex;
        gap: 32px;

        @media screen and (max-width: 1200px) {
          gap: 24px;
        }

        @media screen and (max-width: 1000px) {
          gap: 16px;
        }

        & > a {
          font-size: 14px;
          font-weight: 500;
          text-transform: uppercase;
          cursor: pointer;
          color: var(--primary-custom-color);
          font-family: 'Inter Regular';
          white-space: nowrap;

          &:hover {
            color: var(--primary-custom-color);
          }
        }
      }
    }

    .brand-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;

      .brand {
        display: grid;

        & > span {
          font-size: 20px;
          font-weight: 400;
          letter-spacing: 2px;
          text-transform: uppercase;
          cursor: pointer;
          color: var(--primary-custom-color);
          font-family: 'Anticva Regular';
          text-align: center;
          line-height: 1;
  
          @media screen and (max-width: 1200px) {
            font-size: 18px;
          }

          @media screen and (max-width: 1000px) {
            font-size: 16px;
          }

          @media screen and (max-width: 840px) {
            font-size: 14px;
          }
  
          &:hover {
            color: var(--primary-custom-color);
          }
        }
      }
    }

    .socials-wrapper {
      display: flex;
      justify-content: end;
      align-items: center;
      gap: 24px;

      @media screen and (max-width: 1200px) {
        gap: 20px;
      }

      @media screen and (max-width: 1000px) {
        gap: 16px;
      }

      @media screen and (max-width: 720px) {
        display: none;
      }
      
      .telegram, .pinterest, .mail {
        cursor: pointer;

        svg {
          height: 32px;
          width: 32px;
          fill: var(--primary-custom-color);

          @media screen and (max-width: 1000px) {
            height: 24px;
            width: 24px;
          }
        }

        &:hover {
          svg {
            fill: var(--primary-custom-color);
          }
        }
      }
    }
  }
}

.bg {
  position: absolute;
  height: 100%;
  width: 100%;
  backdrop-filter: blur(4px);
  
  .bg-inner {
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.5);
  }
}