.header {
  width: 100%;
  color: $white;
  background-color: $white;
  border-bottom: 1px solid $lightest-gray;
  z-index: 2;

  .main-menu {
    width: 100%;
    padding: clamp(16px, 1.042vw, 40px) 0;
    z-index: 99;

    @include media-query(580px) {
      border: none;
      padding: 16px 0;
    }

    .navigation {
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left-side {
        display: flex;
        align-items: center;
        gap: clamp(23px, 1.25vw, 68px);
        .header-logo {
          width: clamp(150px, 9.324vw, 432px);

          @include media-query(1024px) {
            width: 89%;
            height: auto;
          }
        }

        .menu-button-right {
          text-transform: capitalize;

          @include media-query(1399px) {
            margin-left: 0;
          }

          .main-menu__nav {
            margin-left: auto;
            margin-right: auto;

            .main-menu__list,
            .main-menu__list ul,
            .stricky-header .main-menu__list,
            .stricky-header .main-menu__list ul {
              margin: 0;
              padding: 0;
              list-style-type: none;
              align-items: center;
              display: none;
              text-transform: capitalize;

              @include widther(1200px) {
                display: flex;
                gap: $gap-32;
              }
            }

            .main-menu__list,
            .stricky-header .main-menu__list {
              > li {
                position: relative;

                > a {
                  font-size: clamp(16px, 0.938vw, 36px);
                  font-family: $font-primary;
                  text-transform: capitalize;
                  font-weight: 400;
                  line-height: 150%;
                  color: $black;
                  display: flex;
                  align-items: center;
                  gap: 4px;
                  position: relative;
                  transition: all $transition;

                  &::after {
                    content: "";
                    width: 100%;
                    height: 2px;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    background: $accent-1;
                    transition: 0.5s transform ease;
                    transform: scale3d(0, 1, 1);
                    transform-origin: 100% 50%;
                  }

                  i {
                    transition: $transition;
                  }

                  &.active {
                    color: $accent-1;
                    transition: 0.5s transform ease;
                    font-weight: 500;

                    &::after {
                      transform: scale3d(1, 1, 1);
                      transform-origin: 0 50%;
                    }
                  }

                  &:hover {
                    color: $accent-1;
                    transition: 0.5s transform ease;

                    i {
                      transform: rotate(-180deg);
                    }

                    &::after {
                      transform: scale3d(1, 1, 1);
                      transform-origin: 0 50%;
                    }
                  }
                }

                .header-arrow {
                  font-weight: 300;
                  margin-left: -16px;
                }

                &:first-child {
                  a {
                    &::before {
                      display: none;
                    }
                  }
                }

                &.current,
                &:hover {
                  color: $accent-1;
                }
              }

              li {
                ul {
                  overflow: hidden;
                  border-radius: 10px;
                  text-transform: uppercase;
                  position: absolute;
                  top: 100%;
                  left: 0;
                  min-width: clamp(200px, 10.938vw, 616px);
                  flex-direction: column;
                  justify-content: flex-start;
                  align-items: flex-start;
                  opacity: 0;
                  visibility: hidden;
                  transform-origin: top center;
                  transform: scaleY(0) translateZ(100px);
                  backface-visibility: hidden;
                  transition:
                    opacity $transition,
                    visibility $transition,
                    transform 700ms ease;
                  z-index: 99;
                  background: rgba(33, 172, 148, 0.8);
                  padding: 0;
                  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
                  border: 1px solid $accent-1;
                  li {
                    margin-bottom: 2px;
                    flex: 1 1 100%;
                    width: 100%;
                    position: relative;

                    > a {
                      font-size: clamp(14px, 0.833vw, 32px);
                      line-height: 27px;
                      color: $white;
                      font-weight: 400;
                      font-family: $font-primary;
                      padding: clamp(4px, 0.417vw, 46px) clamp(16px, 1.042vw, 80px);
                      transition: 400ms;
                      border-radius: 6px;
                      text-transform: capitalize;
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                      width: 100%;

                      &::after {
                        content: "\f061";
                        font-weight: 900;
                        font-family: $font-awesome;
                        -webkit-transform: translateX(-20px);
                        -ms-transform: translateX(-20px);
                        transform: translateX(-20px);
                        -webkit-transition: all 0.3s;
                        -o-transition: all 0.3s;
                        transition: all 0.3s;
                        opacity: 0;
                        color: $accent-1;
                      }
                    }

                    &.current,
                    &:hover {
                      > a {
                        background-color: $white;
                        color: $accent-1;

                        &::after {
                          -webkit-transform: translateX(0px);
                          -ms-transform: translateX(0px);
                          transform: translateX(0px);
                          opacity: 1;
                        }
                      }
                    }

                    > ul {
                      top: 0;
                      left: calc(100% + 20px);

                      &.right-align {
                        top: 0;
                        left: auto;
                        right: 100%;
                      }

                      ul {
                        display: flex;
                      }
                    }
                  }
                }

                &:hover {
                  > ul {
                    padding: 6px;
                    opacity: 1;
                    visibility: visible;
                    gap: 0;
                    transform: scaleY(1) translateZ(0px);
                    transition: $transition;
                  }
                }

                &:nth-last-child(1),
                &:nth-last-child(2) {
                  ul {
                    li {
                      > ul {
                        @include short-query(1200px, 1399px) {
                          left: auto;
                          right: calc(100% + 20px);
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

      .main-menu__right {
        display: flex;
        align-items: center;
        gap: $gap-24;

        .right-side {
          display: flex;
          align-items: center;
          gap: $gap-24;
          .socialicons {
            display: flex;
            align-items: center;
            gap: clamp(14px, 0.938vw, 36px);
            .icon {
              svg {
                width: clamp(20px, 1.166vw, 46px);
                height: clamp(20px, 1.166vw, 46px);
                path {
                  transition: $transition;
                }
              }
              &:hover {
                svg {
                  path {
                    fill: $accent-2;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  &.stricky-fixed {
    transform: translateY(0);
  }

  .sticky-header__content {
    width: 100%;
    padding: 0 0;
    background: $white;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }
}

.stricky-header {
  position: fixed;
  z-index: 991;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateY(-120%);
  transition: transform 500ms ease;

  @include media-query(1199px) {
    display: none;
  }

  &.main-menu {
    padding: 0 !important;
  }

  &.stricky-fixed {
    transform: translateY(0);
  }

  .sticky-header__content {
    width: 100%;
    padding: 0;
    background: $white;
    backdrop-filter: blur(9px);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: clamp(12px, 0.833vw, 32px);
    .navigation {
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left-side {
        display: flex;
        align-items: center;
        gap: clamp(23px, 1.25vw, 68px);
        .header-logo {
          width: clamp(150px, 9.324vw, 432px);

          @include media-query(1024px) {
            width: 89%;
            height: auto;
          }
        }

        .menu-button-right {
          text-transform: capitalize;

          @include media-query(1399px) {
            margin-left: 0;
          }

          .main-menu__nav {
            margin-left: auto;
            margin-right: auto;

            .main-menu__list,
            .main-menu__list ul,
            .stricky-header .main-menu__list,
            .stricky-header .main-menu__list ul {
              margin: 0;
              padding: 0;
              list-style-type: none;
              align-items: center;
              display: none;
              text-transform: capitalize;

              @include widther(1200px) {
                display: flex;
                gap: $gap-32;
              }
            }

            .main-menu__list,
            .stricky-header .main-menu__list {
              > li {
                position: relative;

                > a {
                  font-size: clamp(16px, 0.938vw, 36px);
                  font-family: $font-primary;
                  text-transform: capitalize;
                  font-weight: 400;
                  line-height: 150%;
                  color: $black;
                  display: flex;
                  align-items: center;
                  gap: 4px;
                  position: relative;
                  transition: all $transition;

                  &::after {
                    content: "";
                    width: 100%;
                    height: 2px;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    background: $accent-1;
                    transition: 0.5s transform ease;
                    transform: scale3d(0, 1, 1);
                    transform-origin: 100% 50%;
                  }

                  i {
                    transition: $transition;
                  }

                  &.active {
                    color: $accent-1;
                    transition: 0.5s transform ease;
                    font-weight: 500;

                    &::after {
                      transform: scale3d(1, 1, 1);
                      transform-origin: 0 50%;
                    }
                  }

                  &:hover {
                    color: $accent-1;
                    transition: 0.5s transform ease;

                    i {
                      transform: rotate(-180deg);
                    }

                    &::after {
                      transform: scale3d(1, 1, 1);
                      transform-origin: 0 50%;
                    }
                  }
                }

                .header-arrow {
                  font-weight: 300;
                  margin-left: -16px;
                }

                &:first-child {
                  a {
                    &::before {
                      display: none;
                    }
                  }
                }

                &.current,
                &:hover {
                  color: $accent-1;
                }
              }

              li {
                ul {
                  overflow: hidden;
                  border-radius: 10px;
                  text-transform: uppercase;
                  position: absolute;
                  top: 100%;
                  left: 0;
                  min-width: clamp(200px, 10.938vw, 616px);
                  flex-direction: column;
                  justify-content: flex-start;
                  align-items: flex-start;
                  opacity: 0;
                  visibility: hidden;
                  transform-origin: top center;
                  transform: scaleY(0) translateZ(100px);
                  backface-visibility: hidden;
                  transition:
                    opacity $transition,
                    visibility $transition,
                    transform 700ms ease;
                  z-index: 99;
                  background: rgba(33, 172, 148, 0.9);
                  backdrop-filter: blur(10px);
                  -webkit-backdrop-filter: blur(10px);
                  padding: 0;
                  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
                  border: 1px solid $accent-1;
                  li {
                    margin-bottom: 2px;
                    flex: 1 1 100%;
                    width: 100%;
                    position: relative;

                    > a {
                      font-size: clamp(14px, 0.833vw, 32px);
                      line-height: 27px;
                      color: $white;
                      font-weight: 400;
                      font-family: $font-primary;
                      padding: clamp(4px, 0.417vw, 46px) clamp(16px, 1.042vw, 80px);
                      transition: 400ms;
                      border-radius: 6px;
                      text-transform: capitalize;
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                      width: 100%;

                      &::after {
                        content: "\f061";
                        font-weight: 900;
                        font-family: $font-awesome;
                        -webkit-transform: translateX(-20px);
                        -ms-transform: translateX(-20px);
                        transform: translateX(-20px);
                        -webkit-transition: all 0.3s;
                        -o-transition: all 0.3s;
                        transition: all 0.3s;
                        opacity: 0;
                        color: $accent-1;
                      }
                    }

                    &.current,
                    &:hover {
                      > a {
                        background-color: $white;
                        color: $accent-1;

                        &::after {
                          -webkit-transform: translateX(0px);
                          -ms-transform: translateX(0px);
                          transform: translateX(0px);
                          opacity: 1;
                        }
                      }
                    }

                    > ul {
                      top: 0;
                      left: calc(100% + 20px);

                      &.right-align {
                        top: 0;
                        left: auto;
                        right: 100%;
                      }

                      ul {
                        display: flex;
                      }
                    }
                  }
                }

                &:hover {
                  > ul {
                    padding: 6px;
                    opacity: 1;
                    visibility: visible;
                    gap: 0;
                    transform: scaleY(1) translateZ(0px);
                    transition: $transition;
                  }
                }

                &:nth-last-child(1),
                &:nth-last-child(2) {
                  ul {
                    li {
                      > ul {
                        @include short-query(1200px, 1399px) {
                          left: auto;
                          right: calc(100% + 20px);
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

      .main-menu__right {
        display: flex;
        align-items: center;
        gap: $gap-24;

        .right-side {
          display: flex;
          align-items: center;
          gap: $gap-24;
          .socialicons {
            display: flex;
            align-items: center;
            gap: clamp(14px, 0.938vw, 36px);
            .icon {
              svg {
                width: clamp(20px, 1.166vw, 46px);
                height: clamp(20px, 1.166vw, 46px);
                path {
                  transition: $transition;
                }
              }
              &:hover {
                svg {
                  path {
                    fill: $accent-2;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.mobile-nav__toggler {
  font-size: 24px;
  font-weight: 200;
  color: $dark-gray;
  cursor: pointer;
  transition: 500ms;
  display: none;

  @include media-query(1099px) {
    display: flex;
  }

  &:hover {
    color: $accent-1;
  }
}

/*--------------------------------------------------------------
# Mobile Nav
--------------------------------------------------------------*/
.mobile-nav__wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  transform: translateX(-100%);
  transform-origin: left center;
  transition:
    transform 500ms ease 500ms,
    visibility 500ms ease 500ms;
  visibility: hidden;
  position: fixed;

  .container {
    padding-left: 0;
    padding-right: 0;
  }

  &.expanded {
    opacity: 1;
    transform: translateX(0%);
    visibility: visible;
    transition:
      transform 500ms ease 0ms,
      visibility 500ms ease 0ms;

    .mobile-nav__content {
      border-radius: $br-24;
      margin: 12px;
      opacity: 1;
      visibility: visible;
      transform: translateX(0);
      transition:
        opacity 500ms ease 500ms,
        visibility 500ms ease 500ms,
        transform 500ms ease 500ms;
    }
  }

  .mobile-nav__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: $light-black;
    opacity: 0.3;
  }

  .mobile-nav__content {
    width: 300px;
    background: $white;
    z-index: 10;
    position: relative;
    height: calc(100% - 24px);
    overflow-y: auto;
    padding: 30px 15px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-100%);
    transition:
      opacity 500ms ease 0ms,
      visibility 500ms ease 0ms,
      transform 500ms ease 0ms;

    @include media-query(490px) {
      width: clamp(250px, 55.102vw, 450px);
    }

    .main-menu__nav {
      display: block;
      padding: 0;
    }

    .logo-box {
      margin-top: 14px;
      margin-bottom: 40px;
      display: flex;

      img {
        width: clamp(160px, 15.625vw, 320px);
      }
    }

    .main-menu__list,
    .main-menu__list ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }

    .main-menu__list {
      ul {
        display: none;
        border-top: 0px solid transparent;

        li {
          > a {
            padding-left: 1em;
          }

          &:not(:last-child) {
            border-bottom: 0px solid transparent;
          }
        }
      }

      li {
        &:not(:last-child) {
          border-bottom: 0px solid transparent;
        }

        a {
          display: flex;
          justify-content: space-between;
          line-height: 30px;
          color: $black;
          font-size: 18px;
          font-family: $font-primary;
          text-transform: capitalize;
          font-weight: 400;
          height: 46px;
          letter-spacing: 0.8px;
          align-items: center;
          transition: 500ms;

          .fa-solid {
            display: none;
          }

          &.expanded {
            color: $accent-1;
          }

          button {
            width: 30px;
            height: 30px;
            background-color: $accent-1;
            border: none;
            outline: none;
            color: $white;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            transform: rotate(-90deg);
            border-radius: 4px;
            transition: transform 500ms ease;

            &.expanded {
              transform: rotate(0deg);
              background-color: $accent-2;
              color: $white;
            }
          }
        }
      }
    }
  }

  .mobile-nav__close {
    position: absolute;
    top: 20px;
    right: 15px;
    font-size: 18px;
    color: $accent-1;
    cursor: pointer;
  }
}

.mobile-nav__social {
  display: flex;
  align-items: center;

  a {
    font-size: 16px;
    color: $black;
    transition: 500ms;

    + a {
      margin-left: 20px;
    }

    &:hover {
      color: $accent-1;
    }
  }
}

.mobile-nav__contact {
  margin-bottom: 0;
  margin-top: 20px;
  margin-bottom: 20px;

  li {
    color: $black;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    display: flex;
    align-items: center;

    + li {
      margin-top: 15px;
    }

    a {
      color: inherit;
      transition: 500ms;

      &:hover {
        color: $accent-1;
      }
    }

    i {
      flex-shrink: 0;
      width: 30px;
      height: 30px;
      border-radius: 4px;
      background-color: $accent-1;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      font-size: 14px;
      margin-right: 10px;
      color: $white;
    }
  }
}

.mobile-nav__container .main-menu__logo,
.mobile-nav__container .main-menu__right {
  display: none;
}

.nav-bar {
  .nav-link {
    li {
      position: relative;
      display: flex;
      align-items: center;
      gap: 16px;

      &::before {
        width: clamp(4px, 0.417vw, 16px);
        height: clamp(4px, 0.417vw, 16px);
        border: 1px solid $accent-3;
        border-radius: clamp(4px, 0.417vw, 16px);
      }

      &.active {
        &::before {
          display: none;
        }
      }
    }
  }
}
