.position-relative {
  position: relative;
}

.custom-next,
.custom-prev {
  position: absolute;
  top: 50%;
  transform: translateY(0);
  color: #1C1B1F;
  --swiper-navigation-size: 30px;
}

.custom-next {
  right: -40px;
}

.custom-prev {
  left: -40px;
}

.circular-img {
  border-radius: 50%;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.img-happiness {
  margin-top: -18%;
}

.bg-video-box {
  background: url('../../images/v2/video bg pc.png') no-repeat center center;
  background-size: 100% 100%;
}

#videoModal {
  z-index: 999999;
}

#videoModal .modal-dialog {
  width: 80%;
  height: 80%;
  max-width: none;
  max-height: none;
}

@media (max-width: 992px) {

  .custom-next,
  .custom-prev {
    /* position: absolute;
    top: 50%;
    transform: translateY(0);
    color: #1C1B1F;
    --swiper-navigation-size: 30px; */
  }

  .custom-next {
    right: -40px;
  }

  .custom-prev {
    left: -40px;
  }

  .img-happiness {
    margin-top: -5%;
    z-index: -9999;
    position: relative;
  }
  
  .bg-video-box {
    background: url('../../images/v2/video bg mobile.png') no-repeat center center;
    background-size: 100% 100%;
  }

  #videoModal .modal-dialog {
    width: 90%;
    height: 90%;
    max-width: none;
    max-height: none;
  }

}

@media (min-width: 601px) and (max-width: 1000px) {
  .circular-img {
    max-width: 150px;
  }
}

/* Responsive breakpoints */
@media (max-width: 600px) {
  .circular-img {
    max-width: 120px;
  }

  .img-happiness {
      /* margin-top: -50%; */
  }

  #videoModal .modal-dialog {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
  }
}