asan-service/sass/components/header.scss

.site--header {
  background: $theme;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;

  @media (min-width: 1200px) {
    .d-sw-block {
      display: block !important;
    }
    .d-sw-flex {
      display: flex !important;
    }
    .d-sw-none {
      display: none !important;
    }
    .col-sw-2 {
      flex: 0 0 auto;
      width: 16.6666666667%;
    }
  }

  a {
    color: #fff;
    display: inline-block;
    @extend %defaultTransition;

    span {
      color: #fff;
    }
  }

  .logo {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    a {
      display: block;
      width: 100%;
      max-width: 150px;

      svg {
        display: block;
        width: 100%;
      }
    }
  }

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

    li {
      margin: 0 10px;

      @extend %defaultTransition;

      a {
        padding: 20px;
        white-space: nowrap;
        @media (max-width: 1420px) {
          font-size: 14px;
          padding: 21px 8px;
        }

        @media (max-width: 1120px) {
          font-size: 14px;
          padding: 21px 4px;
        }
      }

      &.active {
        border-bottom: 2px solid #fff;
      }
    }
  }

  .account {
    // display: flex;
    justify-content: flex-end;
    align-items: center;

    a {
      padding: 20px 0;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      span {
        margin-left: 5px;
      }
    }
  }

  .menu {
    i {
      display: inline-block;
      padding: 20px 0;
      font-size: 20px;
      color: #fff;
      cursor: pointer;
      @extend %userSelect;
    }
  }

  .dropDown-container {
    position: relative;
    cursor: pointer;

    i {
      display: inline-block;
      @extend %defaultTransition;
    }

    &.d-active {
      i {
        @include transform(rotate(180deg));
      }

      .drop-down {
        height: 113px;
        border-top: 1px solid rgba(#fff, 0.1);
      }

      &.agents {
        .drop-down {
          height: 169px;
        }
      }
      &.gps{
        .drop-down {
          height: 169px;
        }
      }
      &.contactus {
        .drop-down {
          height: 290px;
        }
      }
    }

    .drop-down {
      position: absolute;
      top: 65px;
      right: -5px;
      background: $theme;
      min-width: 160px;
      border-bottom-left-radius: 15px;
      border-bottom-right-radius: 15px;
      overflow: hidden;
      height: 0;
      @extend %defaultTransition;

      a {
        display: block;
        padding: 15px 20px;

        &:hover {
          background: rgba(#fff, 0.05);
        }

        &.active {
          background: rgba(#fff, 0.1);
        }
      }
    }
  }
}