/* Main CSS file */

.ugc-videos-container {
    display: flex;
    margin-top: 20px;
    justify-content: center;
	clear:both;
}

.ugc-video-item {
    width: 100%;
    max-width: 600px;
    text-align: center;
    position: relative;
    padding: 10px;
    border-radius: 8px;
}

.ugc-video-link {
    display: block;
    position: relative;
	transition: transform 0.3s ease;
}

.ugc-videos-container .ugc-video-item .ugc-video-link video{
    width: 100%;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    background: #f9f9f9;
    transition: transform 0.3s ease;
	border: 4px solid #fff;
}

.ugc-video-item:hover .ugc-video-link{
    transform: scale(1.05);
}

.ugc-video-item .ugc-video-text{
    font-size:14px;
    color:#000;
    font-weight:500;
    margin-top:5px;
}

.slick-prev, .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
}

.ugc-videos-container.slick-slider .slick-arrow{
    border:none;
}
.ugc-videos-container.slick-slider .slick-arrow:hover, .ugc-videos-container.slick-slider .slick-arrow:focus{
    background:#cdcdcd;
}
.ugc-videos-container .slick-arrow:before{
  display:none;
}
.ugc-videos-container .slick-arrow{
  background:#cdcdcd;
  width:35px;
  height:35px;
  line-height:30px;
  border-radius:50px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}
.ugc-videos-container .slick-arrow.slick-prev {
    left: -6px;
}
.ugc-videos-container .slick-arrow.slick-next{
    right: -6px;
}
.ugc-videos-container.slick-slider .slick-arrow img{
    padding:4px;
}
.ugc-videos-container.slick-slider .slick-arrow:hover{
    background-color:hsla(240,7%,62%,1);
    box-shadow: 0 2px 6px rgb(0 0 0 / 35%);
}
.fancybox-container .fancybox-button div:hover, .fancybox-container .fancybox-button div:focus{
	background:#fff;
}
.fancybox-container .fancybox-button:hover, .fancybox-container .fancybox-button:focus{
	background:unset;
}
.fancybox-container .fancybox-button div:hover svg path, .fancybox-container .fancybox-button div:focus svg path{
	fill:rgb(32 29 29);
}

@media (max-width: 767px){
    .ugc-videos-container.slick-slider .slick-prev {
    left: -3px;
}
.ugc-videos-container.slick-slider .slick-next {
    right: -3px;
}
	.ugc-videos-container.ugc-one-video .ugc-video-item{
    width:45vw;
}
}

@media (min-width: 1025px) {
   .ugc-videos-container.ugc-two-videos .ugc-video-item, .ugc-videos-container.ugc-one-video .ugc-video-item{
    width:10vw;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
   .ugc-videos-container.ugc-two-videos .ugc-video-item, .ugc-videos-container.ugc-one-video .ugc-video-item{
    width:15vw;
}
}
@media (max-width: 576px) {
    .fancybox-container.fancybox-show-thumbs .fancybox-inner {
        right: 0px;
    }
}

/* Adjust Fancybox layout for mobile/tablet */
.fancybox-mobile .fancybox-thumbs {
    position: absolute;
    bottom: 0;
    top: auto;
    left: 0;
    right: 0;
    width: 100%;
    height: 100px; /* Adjust height as needed */
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.7); /* Optional: add a translucent background */
    padding: 10px;
    box-sizing: border-box;
}

.fancybox-mobile .fancybox-inner {
    padding-bottom: 120px; /* Add bottom padding so the video doesn’t overlap the thumbs */
}

@media (max-width: 1024px) {
  .fancybox-thumbs {
      position: absolute;
      bottom: 0;
      top: auto;
      left: 0;
      right: 0;
      width: 100%;
      height: 100px;
      transform: none;
      background: rgba(0,0,0,0.7);
      padding: 10px;
      box-sizing: border-box;
  }

  .fancybox-inner {
      padding-bottom: 120px;
  }
	.fancybox-container.fancybox-show-thumbs .fancybox-inner {
        right: 20px;
    }
}

.fancybox-container.fancybox-show-thumbs .fancybox-thumbs__list a{
  height:150px;
}