/* Fix for img-box7 - separate product image from decorative circle */
.img-box7 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

/* White circle behind the image */
.img-box7 .circle {
  border-radius: 50%;
  width: 542px;
  height: 542px;
  background-color: #ffffff;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

/* Main product image - NOT in the circle */
.img-box7 .img1 {
  position: relative !important;
  border-radius: 50% !important;
  max-width: 542px !important;
  width: 100% !important;
  height: auto !important;
  z-index: 1 !important;
  margin: 0 auto !important;
  object-fit: cover !important;
  left: 40px !important;
}

/* Decorative dashed circle - positioned to the right */
.img-box7::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 584px !important;
  height: 584px !important;
  border: 3px dashed #f4a261 !important;
  border-radius: 50% !important;
  z-index: 0 !important;
}

/* Play button - on the product image */
.img-box7 .play-btn {
  position: absolute !important;
  top: 50% !important;
  left: 167px !important;
  transform: translate(-50%, -50%) !important;
  z-index: 3 !important;
}

/* Hide the original border */
.img-box7 {
  border: none !important;
  padding: 0 !important;
}

/* Small decorative images */
.img-box7 .img4 {
  width: 335px !important;
  height: 414px !important;
  max-width: 335px !important;
  left: -50px !important;
  bottom: -80px !important;
  z-index: 2 !important;
}

.img-box7 .img2 {
  max-width: 150px !important;
  height: auto !important;
  left: 120px !important;
  top: -120px !important;
  z-index: 3 !important;
}

.img-box7 .img3 {
  max-width: 150px !important;
  height: auto !important;
  left: 10px !important;
  top: 35% !important;
  transform: translateY(-50%);
  z-index: 3 !important;
}

@media (max-width: 991px) {
  .img-box7 {
    min-height: 300px;
    padding: 20px 0;
    overflow: hidden;
  }
  
  .img-box7 .circle {
    width: 300px !important;
    height: 300px !important;
    left: 50% !important;
  }
  
  .img-box7 .img1 {
    max-width: 280px !important;
    left: 0 !important;
  }
  
  .img-box7::after {
    width: 320px !important;
    height: 320px !important;
    right: 50% !important;
    transform: translate(50%, -50%) !important;
  }
  
  .img-box7 .play-btn {
    left: 50% !important;
  }
  
  .img-box7 .img2,
  .img-box7 .img3,
  .img-box7 .img4 {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .img-box7 {
    min-height: 250px;
    overflow: hidden;
  }
  
  .img-box7 .circle {
    width: 240px !important;
    height: 240px !important;
  }
  
  .img-box7 .img1 {
    max-width: 240px !important;
  }
  
  .img-box7::after {
    width: 270px !important;
    height: 270px !important;
  }
}

@media (max-width: 575px) {
  .img-box7 {
    min-height: 200px;
    overflow: hidden;
  }
  
  .img-box7 .circle {
    width: 200px !important;
    height: 200px !important;
  }
  
  .img-box7 .img1 {
    max-width: 200px !important;
  }
  
  .img-box7::after {
    width: 230px !important;
    height: 230px !important;
  }
}