
//page scroll bar add
::-webkit-scrollbar {
	width: 6px;
	height: 4px;
}
/* Track */
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px $theme-color; 
	border-radius: 5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
	background: $theme-color;
	border-radius: 10px;
}
//page scroll bar add

//Basic Code Start
.fix {
  overflow: hidden;
}

.ralt{
 position: relative;
}

//Basic Code End

//Video Css Start
.ripple {
  position: relative;

  &::before,&::after {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 100px;
      height: 100px;
      -webkit-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      border-radius: 50%;
      box-shadow: 0 0 0 0  rgba(255, 255, 255,.9);
      animation: rippleOne 3s infinite;
  }

  &::before {
      -webkit-animation-delay: 0.9s;
      animation-delay: 0.9s;
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
  }

  &::after {
      -webkit-animation-delay: 0.6s;
      animation-delay: 0.6s;
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
  }
}
//Video Css End

.swiper-dot {

  .swiper-pagination-bullet {
      width: 7px;
      height: 7px;
      transition: 0.6s;
      background: $theme-color;
      opacity: 1;
      border-radius: 7px;
      &:not(:last-child){
      margin-right: 15px;
      }
  }
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
      
      transition: 0.6s;
      position: relative;

      &::before{
        position: absolute;
        width: 22px;
        height: 22px;
        line-height: 22px;
        // top: -6px;
        // left: -6px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        border-radius: 50%;
        background-color: transparent;
        border: 1px solid $theme-color;
        content: "";
      }
  }
}

.array-button {
  @include flex;
  gap: 18px;

    .array-prev,.array-next {
      width: 60px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      border-radius: 50%;
      background-color: $white;
      @include transition;

      &:hover {
          background-color: $theme-color;
          color: $white;
      }
    }

    &.style-2 {
        .array-prev {
          border: 1px solid $border-color;
        }

        .array-next {
          border: 1px solid $theme-color;
          background-color: $theme-color;
          color: $white;

          &:hover {
            background-color: $header-color;
          }
        }
    }
}

.array-button-2 {
  @include flex;
  gap: 18px;

    .array-prev {
      width: 60px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      border-radius: 50%;
      background-color: $white;
      color: $theme-color;
      @include transition;
      z-index: 999;

      &:hover {
          background-color: $theme-color;
          color: $white;
      }
    }

    .array-next {
      width: 60px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      border-radius: 50%;
      background-color: $theme-color;
      color: $white;
      @include transition;
      z-index: 999;

      &:hover {
          background-color: $white;
          color: $header-color;
      }
    }

    &.style-2 {
      .array-prev {
        box-shadow: 14px 18px 84px 82px rgba(6, 3, 48, 0.04)
      }
    }
}
//pagination default



br {
  @include breakpoint(max-sm){
    display: none;
  }
}


/* background */
.bg-cover {
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  background-position: center;
}

.sticky-style {
  position: sticky !important;
  top: 100px;
}


.slide-transtion {
	-webkit-transition-timing-function: linear;
	transition-timing-function: linear;
}
.brand-slide-element {
	width: auto;
	display: inline-block;
}

.footer-info-container {
  max-width: 1436px;
}

.lg-center {
    @include breakpoint (max-lg){
      justify-content: center;
      text-align: center;
    }
}

.p-reative {
  position: relative !important;
}