.feature-product .swiper-wrapper {
  padding-top: 1rem;
  padding-bottom: 1rem
}

.feature-product a {
  text-decoration: none;
  color: inherit;
  transition: 500ms ease-out;
  border-radius: var(--radius-lg);
  padding: 1rem 0 0
}

.feature-product a:hover {
  background: var(--bs-white);
  box-shadow: -10px 10px 20px rgba(10, 52, 86, .05)
}

.swiper-button-next::after {
  display: none
}

.swiper-button-prev::after {
  display: none
}

.btn-produklist {
  border-radius: 50%;
  height: 36px;
  width: 36px;
  line-height: 10px;
  background-color: #076FC2;
  color: #fff
}

.swiper-button-prev:hover .btn-arrow {
  border-radius: 50%;
  height: 36px;
  width: 36px;
  line-height: 10px;
  background-color: #076FC2;
  color: #fff
}

.btn-produklist:focus {
  border-radius: 50%;
  height: 36px;
  width: 36px;
  line-height: 10px;
  color: #fff;
  background-color: #076FC2
}

.swiper-button-next #active {
  border-radius: 50%;
  height: 36px;
  width: 36px;
  line-height: 10px;
  background-color: #076FC2;
  color: #fff
}

.btn-arrow {
  border-radius: 50%;
  height: 36px;
  width: 36px;
  line-height: 10px;
  position: absolute;
  top: 178px
}

.btn-arrow:hover {
  border-radius: 50%;
  height: 36px;
  width: 36px;
  line-height: 10px;
  background-color: #1F92C9;
  color: #fff
}

.swiper-button-prev {
  left: 10%
}

.feature-product .swiper-button-prev {
  left: 0%
}

.feature-product .swiper-button-next {
  right: 0%
}

.swiper-button-prev .btn-arrow {
  background-color: #fff;
  color: #000;
  left: 10%;
  top: 178px
}

.swiper-button-next {
  position: absolute;
  right: 10%
}

.swiper-button-next .btn-arrow {
  position: absolute;
  right: 200px;
  top: 178px;
  background-color: #1F92C9;
  color: whitesmoke
}

.counter2 {
  position: absolute;
  left: 25%;
  bottom: 21%;
  z-index: 1
}

.counter strong {
  position: absolute;
  font-family: "Nunito Sans", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  text-transform: uppercase;
  color: #4F4F4F;
  z-index: 100
}

.border-banner {
  position: absolute;
  height: 2px;
  width: 60px;
  border: 1px solid #424242;
  bottom: 1px;
  left: 25px;
  z-index: 100
}

#product-service-carousel {
  width: auto
}

#product-service-prev .swiper-button-prev {
  left: 0
}

.w-modal {
  max-width: 490px
}

.p-custom {
  padding-right: 1rem;
  padding-left: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem
}

.width-acara-container {
  width: 50%
}

.width-article {
  width: 50%
}

.width-main-acara {
  width: 50%
}

@media(max-width:991px) {
  .width-main-acara {
    width: 100%
  }
}

@media (max-width:1024px) {
  .width-acara-container {
    width: 100%
  }
}

@media(max-width:575px) {
  .width-article {
    width: 100%
  }
}

@media (min-width:320px) {
  .btn-cta {
    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    padding: 0;
    min-width: 200px
  }
}

@media (min-width:768px) {
  .p-custom {
    padding-right: 106px;
    padding-left: 106px;
    padding-top: 61px;
    padding-bottom: 61px
  }
}

@media (min-width:480px) {
  .swiper-button-prev {
    left: 8%
  }

  .feature-product .swiper-button-prev {
    left: 0%
  }

  .swiper-button-next {
    right: 80%
  }

  .feature-product .swiper-button-next {
    right: 0%
  }

  .swiper-button-next .btn-arrow {
    right: 10%
  }
}

@media (min-width:1400px) {
  .swiper-button-prev {
    left: 10%
  }

  .feature-product .swiper-button-prev {
    left: -1%
  }
}

@media (max-width:480px) {
  .counter2 {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: auto
  }

  .btn-arrow {
    top: 226px
  }

  .swiper-button-next .btn-arrow {
    top: 226px;
    right: 0
  }
}

@media (max-width:576px) {
  .btn-cta {
    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    padding: 0;
    min-width: 200px
  }

  .w-modal {
    max-width: 300px
  }
}

@media (max-width:767px) {
  .btn-cta {
    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    padding: 0;
    min-width: 200px
  }

  #myModal #handphone {
    width: 200px
  }

  .w-modal {
    max-width: 500px
  }

  .counter2 strong {
    color: #000
  }

  .counter2 hr {
    color: whitesmoke;
    opacity: 1
  }

  .btn-arrow {
    color: whitesmoke
  }
}

/* Feature product */

section.feature-product *>.swiper.product-swiper *>.card-hm {
  min-height: 155px;
}

section.feature-product *>.swiper.product-swiper {
  padding: 10px;
}

@media (min-width: 425px) {
  section.feature-product *>.swiper.product-swiper *>.card-hm {
    min-height: auto;
  }
}

@media (min-width: 768px) {
  section.feature-product *>.swiper.product-swiper *>.card-hm {
    min-height: 169px;
  }
}

@media (min-width: 1024px) {
  section.feature-product *>.swiper.product-swiper *>.card-hm {
    min-height: auto;
  }
}

.card-hm {
  background-color: #f4f4f4;
  box-shadow: 0 5px 8px rgb(0 0 0 / 8%) !important;
  border: 1px solid transparent;
}

.feature-product a:hover {
  box-shadow: 0 10px 25px rgb(0 0 0 / 10%) !important;
  border-bottom: 1px solid #fafafa;
}

/* Popup Banner */
@media screen and (min-width: 325px) and (max-width: 475px) {
  #modal-popup-5 .modal-body.bg-image {
    background-image: url("/theme/default/assets/img/shadow.png");
    background-position-x: right;
    background-position-y: top;
    background-size: 260px;
    background-repeat: no-repeat;
  }

  .img-fluid-popup {
    width: 250px !important;
    height: auto;
  }
}

@media screen and (min-width: 476px) and (max-width: 766px) {
  #modal-popup-5 .modal-body.bg-image {
    background-image: url("/theme/default/assets/img/shadow.png");
    background-position-x: top;
    background-position-y: center;
    background-size: 200px;
    background: no-repeat;
  }

  .img-fluid-popup {
    width: 250px !important;
    height: auto;
  }
}

@media screen and (min-width: 768px) {
  #modal-popup-5 .modal-body.bg-image {
    background-image: url("/theme/default/assets/img/shadow.png");
    background-size: 300px;
    background-position-x: left;
    background-position-y: center;
    background-repeat: no-repeat;
  }

  .img-fluid-popup {
    width: 270px !important;
    height: auto;
  }
}