@use "../custom" as *;

.topHeader {
  background-color: #0caf60;
  width: 100%;

  &__content {
    display: flex;
    align-items: center;
    height: 2.5rem;
  }

  &__fav {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    span {
      font-family: $roobert;
      font-weight: 600;
      font-size: 0.88rem;
      color: #fff;
    }

    &:hover{
      opacity: 0.9;
    }
  }
}

.navbar {
  background-color: transparent;
  padding: 1.5625rem 0;
  height: 5.625rem;
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  z-index: 99;

  &-brand {
    max-width: 14.3125rem;
    height: 2.45rem;
    padding: 0;
    margin: 0;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    @include media-breakpoint-down(lg) {
      max-width: 10rem;
    }
  }

  &-toggler {
    color: $white;
    font-size: 1.5rem;
    padding: 0;
    width: 2.5rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
    box-shadow: none;
  }

  &-nav {
    gap: 1rem 2.8125rem;

    @include media-breakpoint-down(xl) {
      gap: 1rem 24px;
    }

    @include media-breakpoint-down(lg) {
      gap: 0rem;
    }
  }
}

.nav {
  &-item {
    display: flex;
    align-items: center;

    &.dropdown {
      .nav-link {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        color: $white;
        font-family: $roobert;
        font-size: 1rem;
        font-weight: 500;
        position: relative;
        z-index: 10;
        &::after {
          content: "";
          display: block;
          width: 0.4138rem;
          min-width: 0.4138rem;
          height: 0.4138rem;
          background: no-repeat url("../icons/bottom-arrow.svg");
          background-size: contain;
          transition: transform 200ms linear;
        }

        &.show::after {
          transform: rotate(180deg);
        }

        @include media-breakpoint-down(lg) {
          color: #7c8499;

          svg {
            &.stroke path {
              stroke: #7c8499;
            }
            &.fill path {
              fill: #7c8499;
            }
          }

          &::after {
            content: "";
            display: block;
            width: 0.4138rem;
            min-width: 0.4138rem;
            height: 0.4138rem;
            background: no-repeat url("../icons/bottom-arrow-gray.svg");
            background-size: contain;
            transition: transform 200ms linear;
          }

          height: 3.125rem;
          padding: 0 1rem;
          width: 100%;
          border-radius: 0.75rem;
          font-weight: 500;
          justify-content: space-between;

          &.show {
            background-color: #f4f7fd;
            color: #183b56;
            svg path {
              stroke: #183b56;
            }
          }
        }
      }
    }

    &:not(.dropdown) {
      .nav-link {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        color: $white;
        font-family: $roobert;
        font-size: 1rem;
        font-weight: 500;

        @include media-breakpoint-down(lg) {
          color: #7c8499;
          height: 3.125rem;
          padding: 0 1rem;
          width: 100%;
          border-radius: 0.75rem;
          font-weight: 500;

          svg {
            &.stroke path {
              stroke: #7c8499;
            }
            &.fill path {
              fill: #7c8499;
            }
          }
        }
      }
    }
  }

  &-link {
    padding: 0;
  }
}

.dropdownServices {
  position: static;

  @include media-breakpoint-down(lg) {
    flex-direction: column;
    align-items: start;
    justify-content: start;
  }

  @include media-breakpoint-up(lg) {
    &:hover {
      .nav-link::after {
        transform: rotate(190deg);
      }
      .megamenu {
        display: block;
        position: absolute;
        top: 100%;
      }
    }
  }

  .megamenu {
    max-width: 1631px;
    width: 100% !important;
    background-color: #fff !important;
    position: absolute;
    left: 50% !important;
    transform: translateX(-50%);
    border: none;
    padding: 0 !important;
    margin: 0 !important;
    top: 65px !important;
    overflow: hidden;

    @include media-breakpoint-down(lg) {
      position: relative;
      top: 0 !important;
      left: 0 !important;
      transform: none;
    }

    &__wrapper {
      display: flex;
      align-items: stretch;
      justify-content: space-between;
      gap: 1.5rem;
    }

    &__left {
      max-width: 1100px;
      width: 100%;
      padding: 2rem;

      @include media-breakpoint-down(lg) {
        padding: 0;
      }
    }

    &__title {
      font-weight: 400;
      font-size: 0.75rem;
      line-height: 150%;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #97a3b7;
      font-family: $inter;

      @include media-breakpoint-down(lg) {
        display: none;
      }
    }

    &__list {
      margin: 0;
      padding: 0;
      margin-top: 1rem;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
      gap: 1rem;

      @include media-breakpoint-down(lg) {
        grid-template-columns: repeat(1, 1fr);
        padding: 0 1rem;
        margin: 0.5rem 0;
      }
    }

    &__link {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      border-radius: 0.375rem;

      @include media-breakpoint-up(lg) {
        gap: 1rem;
        padding: 0.5rem;
        &:hover {
          background-color: #f4f7fd;
        }
      }

      &-icon {
        min-width: 2.875rem;
        width: 2.875rem;
        height: 2.875rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: $instagram;
        border-radius: 0.5rem;

        @include media-breakpoint-down(lg) {
          min-width: 1.5rem;
          width: 1.5rem;
          height: 1.5rem;
          border-radius: 0.5rem;
        }

        i,
        img {
          font-size: 1.375rem;
          width: 1.375rem;
          height: 1.375rem;
          object-fit: contain;
          text-align: center;
          color: $white;

          @include media-breakpoint-down(lg) {
            font-size: 1rem;
            height: 1rem;
            width: 1rem;
          }
        }

        &.instagram {
          background-color: $instagram;
        }
        &.tiktok {
          background-color: $tiktok;
        }
        &.twitter {
          background-color: $twitter;
        }
        &.youtube {
          background-color: $youtube;
        }
        &.facebook {
          background-color: $facebook;
        }
        &.spotify {
          background-color: $spotify;
        }
        &.telegram {
          background-color: $telegram;
        }
        &.linkedin {
          background-color: $linkedin;
        }
        &.threads {
          background-color: $threads;
        }
        &.google {
          background-color: $google;
        }
        &.appstore {
          background-color: $appstore;
        }
        &.seo {
          background-color: $seo;
        }
        &.twitch {
          background-color: $twitch;
        }
        &.trovo {
          background-color: $trovo;
        }

        &.dlive {
          background-color: $dlive;
        }
        &.nonolive {
          background-color: $nonolive;
        }
        &.clubhouse {
          background-color: $clubhouse;
        }
        &.tumblr {
          background-color: $tumblr;
        }
        &.soundcloud {
          background-color: $soundcloud;
        }
        &.reddit {
          background-color: $reddit;
        }
        &.pinterest {
          background-color: $pinterest;
        }
        &.likeapp {
          background-color: $likeapp;
        }
        &.kwai {
          background-color: $kwai;
        }
        &.vimeo {
          background-color: $vimeo;
        }
        &.onlyfans {
          background-color: $onlyfans;
        }
        &.quora {
          background-color: $quora;
        }
        &.opensea {
          background-color: $opensea;
        }
        &.dailymotion {
          background-color: $dailymotion;
        }
        &.netflix {
          background-color: $netflix;
        }
        &.discord {
          background-color: $discord;
        }
        &.snapchat {
          background-color: $snapchat;
        }
        &.periscope {
          background-color: $periscope;
        }
        &.tinder {
          background-color: $tinder;
        }
        &.pubg {
          background-color: $pubg;
        }
        &.shazam {
          background-color: $shazam;
        }
      }

      &-name {
        font-weight: 400;
        font-size: 1rem;
        line-height: 1.5;
        color: #293f4a;

        @include media-breakpoint-down(lg) {
          color: #7c8499;
        }
      }

      &-subtitle {
        font-weight: 400;
        font-size: 0.88rem;
        line-height: 1.5;
        color: #a1acd0;
        display: block;
        font-family: $inter;

        @include media-breakpoint-down(lg) {
          display: none;
        }
      }
    }

    &__right {
      background-color: $purple;
      max-width: 26rem;
      width: 100%;
      padding: 1.5rem;
      position: relative;
      overflow: hidden;

      @include media-breakpoint-down(lg) {
        display: none;
      }

      &-title {
        font-weight: 400;
        font-size: 0.75rem;
        line-height: 150%;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #fff;
        font-family: $inter;
        position: relative;
        display: block;
        width: max-content;

        &::after {
          content: "";
          position: absolute;
          right: -10px;
          top: -5px;
          width: 0.75rem;
          height: 0.75rem;
          background: no-repeat url("../icons/buyuyoruz.svg");
          background-position: center;
        }
      }

      ul {
        margin: 0;
        margin-top: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        padding: 0;

        li {
          font-weight: 500;
          font-size: 0.88rem;
          line-height: 150%;
          color: #fff;
          font-family: $white;
          display: flex;
          align-items: center;
          gap: 0.5rem;

          img {
            width: 1rem;
            height: 1rem;
            object-fit: contain;
            object-position: center;
          }
        }
      }

      &::after {
        content: "";
        width: 600px;
        height: 403px;
        position: absolute;
        right: -180px;
        bottom: -175px;
        background: no-repeat url("../images/navbar-character.webp");
        background-size: contain;
        background-position: center;
        z-index: 1;
      }
      &::before {
        content: "";
        width: 65.375rem;
        height: 65.375rem;
        border-radius: 100vh;
        background-color: #7233d1;
        position: absolute;
        right: -700px;
        bottom: -742px;
        z-index: 0;
      }
    }
  }
}

.offcanvas {
  @include media-breakpoint-down(lg) {
    max-width: 280px;
  }
}