/*
============= Custom Scroll Bar CSS ================
*/
body::-webkit-scrollbar {
  width: 0.3em;
}

body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba($color-white, 0.5);
  box-shadow: inset 0 0 6px rgba($color-white, 0.5);
}

body::-webkit-scrollbar-thumb {
  background-color: $color-4;
  // outline: 1px solid $color-4;
  border-radius: 10px;
}

/*
============= Custom Scroll Bar CSS End ================
*/

/* Custom Cursor */
.cursor {
  pointer-events: none;
  @extend %p-fixed;
  height: 10px;
  width: 10px;
  background-color: $color-white;
  border-radius: 50%;
  mix-blend-mode: exclusion;
  transition: transform 0.3s ease, opacity 0.4s ease;
  z-index: 99999;
  @include transform(translate(-50%, -50%) scale(1));
}

.cursor-active {
  @include transform(translate(-50%, -50%) scale(4));
  opacity: 0.1;
  cursor: pointer;
}

/* Custom Cursor End */

/*
============= odometer CSS START ================
*/
.odometer-inside {
  line-height: inherit;
  .odometer-inside {
    line-height: inherit;
  }
}

/*
============= odometer CSS END ================
*/

/*
============= Section Header START ================
*/
.section-header {
  p {
    margin-top: 18px;

    @include breakpoint(max-md) {
      margin-top: 10px;
    }
  }
  .agx-btn {
    margin-top: 55px;
    @include breakpoint(max-md) {
      margin-top: 30px;
    }
  }
}
.section-sub-title {
  @extend %d-inline-block;
  line-height: 155.556%;
  margin-bottom: 10px;
  position: relative;
  padding-left: 18px;
  color: $color-primary;

  &:not(h1, h2, h3, h4, h5, h6) {
    font-size: 18px;
  }

  @include breakpoint(max-md) {
    margin-bottom: 5px;
    padding-left: 13px;
  }
  @include breakpoint(max-sm) {
    font-size: 15px;
  }

  &::before {
    @extend %p-absolute;
    @include transform(translateY(-50%));
    left: 0px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: $color-primary;

    @include breakpoint(max-sm) {
      width: 6px;
      height: 6px;
    }
  }

  i,
  svg {
    font-size: 10px;
    color: inherit;
  }
  &.double-icon {
    padding-right: 18px;

    @include breakpoint(max-md) {
      padding-right: 13px;
    }

    &::after {
      @extend %p-absolute;
      @include transform(translateY(-50%));
      right: 0px;
      top: 50%;
      width: 8px;
      height: 8px;
      border-radius: 100%;
      background-color: $color-primary;

      @include breakpoint(max-sm) {
        width: 6px;
        height: 6px;
      }
    }
  }
  &.no-icon {
    padding-left: 0;
    padding-right: 0;
    &::before,
    &::after {
      content: none;
      width: 0;
    }
  }

  &.white-version {
    @extend %d-inline-block;
    color: $color-white;

    &::before {
      background-color: $color-white;
    }
    &.double-icon {
      &::after {
        background-color: $color-white;
      }
    }
  }
}
.section-title {
  line-height: 118.333%;
}
.about-us3-mask {
  position: absolute;
  z-index: -99999;
  opacity: 0;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}
/*
============= Section Header END ================
*/
/*
============= Stars css START ================
*/
.stars {
  ul {
    @extend %d-flex, %item-center;
    gap: 15px;
  }
}
/*
============= Stars css END ================
*/
