/*----------------------------------------*/
/*  Button CSS START
/*----------------------------------------*/

.cus-btn-2 {
  padding: clamp(5px, 0.417vw, 16px);
  padding-right: clamp(12px, 0.833vw, 32px);
  border-radius: $br-20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: $gap-8;
  background: $accent-1;
  box-shadow: 0px 0px 14px 0px rgba(138, 134, 134, 0.25);
  position: relative;
  .icon {
    width: clamp(34px, 2.344vw, 68px);
    height: clamp(32px, 2.083vw, 64px);
    border-radius: $br-12;
    background: $white;
    box-shadow: 0px 0px 13px 0px rgba(131, 131, 131, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    svg {
      width: clamp(12px, 0.833vw, 32px);
      height: clamp(12px, 0.833vw, 32px);
      z-index: 3;
      transition: $transition;
    }
    &::before {
      content: "";
      position: absolute;
      left: 0.417vw;
      top: 0.417vw;
      width: clamp(34px, 2.344vw, 68px);
      height: clamp(32px, 2.083vw, 64px);
      border-radius: $br-12;
      background: $white;
      transition: $transition;
    }
  }

  .text {
    font-family: $font-primary;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    color: $white;
    font-size: clamp(14px, 0.833vw, 32px);
    transition: $transition;
    z-index: 3;
  }
  &:hover {
    .icon {
      box-shadow: none;
      svg {
        transform: rotate(45deg);
      }
      &::before {
        box-shadow: 0px 0px 13px 0px rgba(131, 131, 131, 0.4);
        width: calc(100% - 0.833vw);
      }
    }
    .text {
      color: $accent-1;
    }
  }
}
.cus-btn {
  padding: clamp(5px, 0.417vw, 16px);
  padding-right: clamp(14px, 0.833vw, 32px);
  border-radius: $br-20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: $gap-8;
  background: $accent-2;
  box-shadow: 0px 0px 14px 0px rgba(138, 134, 134, 0.25);
  position: relative;
  .icon {
    width: clamp(34px, 2.344vw, 68px);
    height: clamp(32px, 2.083vw, 64px);
    border-radius: $br-12;
    background: $white;
    box-shadow: 0px 0px 13px 0px rgba(131, 131, 131, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    svg {
      width: clamp(12px, 0.833vw, 32px);
      height: clamp(12px, 0.833vw, 32px);
      z-index: 3;
      transition: $transition;
    }
    &::before {
      content: "";
      position: absolute;
      left: 0.417vw;
      top: 0.417vw;
      width: clamp(34px, 2.344vw, 68px);
      height: clamp(32px, 2.083vw, 64px);
      border-radius: $br-12;
      background: $white;
      transition: $transition;
      @include media-query(821px) {
        top: 0.617vw;
      }
      @include media-query(520px) {
        left: 0.917vw;
        top: 1.2vw;
      }
      @include media-query(376px) {
        left: 5px;
        top: 5px;
      }
    }
  }
  .text {
    font-family: $font-sec;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
    color: $white;
    font-size: clamp(19px, 1.094vw, 40px);
    /* 21px */
    transition: $transition;
    z-index: 3;
  }
  &.white-bg {
    background: $white;
    .icon {
      background-color: $accent-1;
      &::before {
        background-color: $accent-1;
      }
    }
    .text {
      color: $accent-1 !important;
    }
  }
  &:hover {
    .icon {
      box-shadow: none;
      svg {
        transform: rotate(45deg);
      }
      &::before {
        box-shadow: 0px 0px 13px 0px rgba(131, 131, 131, 0.4);
        width: calc(100% - 0.833vw);
        @include media-query(520px) {
        width: calc(100% - 15px);
      }
      }
    }
    .text {
      color: $accent-2;
    }
  }
  &.white-bg {
    &:hover {
      .text {
        color: $white !important;
      }
    }
  }
}

/*----------------------------------------*/
/* scroll to top
/*----------------------------------------*/
.scrollToTopBtn {
  background-color: $accent-1;
  border-radius: $br-8;
  border: none;
  color: $white;
  cursor: pointer;
  font-size: clamp(18px, 1.25vw, 48px);
  line-height: 48px;
  display: grid;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 2.5vw, 94px);
  height: clamp(40px, 2.5vw, 94px);
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 100;
  opacity: 0;
  transform: translateY(100px);
  transition: all 0.5s ease;

  &:hover {
    border: 1px solid $dark-gray;
    background: $dark-gray;
    color: $white;
    transition: $transition;
    transform: scale(0.99);
  }
}

.showBtn {
  opacity: 1;
  transform: translateY(0);
}

// ===================  PAGINATIONS =================== //
.pagination {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  overflow: hidden;
  display: flex;

  #border-pagination {
    display: flex;
    gap: $gap-12;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    .arrow {
      svg {
        width: clamp(28px, 1.667vw, 64px);
        height: clamp(28px, 1.667vw, 64px);
      }
    }
    .l-arrow {
      margin-right: clamp(18px, 1.25vw, 48px);
    }

    .r-arrow {
      margin-left: clamp(18px, 1.25vw, 48px);
    }

    li {
      display: inline;

      span {
        color: $accent-1;
        transition: $transition;
      }

      a {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        background-color: transparent;
        color: $dark-gray;
        float: left;
        transition: $transition;
        font-size: clamp(16px, 0.938vw, 36px);
        font-weight: 500;
        line-height: 150%;
        border-bottom: 1px solid transparent;

        &:hover,
        &.active {
          color: $accent-2;
          border-color: $accent-2;
        }
      }
    }
  }
}
