دیہی علاقوں کی ترقی کے لیے آسان اور جدید زرعی حل

/* Services Carousel [START] */
.services-carousel .splide__slide {
    filter: drop-shadow(3px 5px 24px rgba(0, 0, 0, 0.08));
}

/* Services Carousel [END] */

/* Success Story [START] */
#brxe-cpybfe .splide__slide * {
    transition: all 0.4s ease-in-out;
}

#brxe-cpybfe.brxe-slider-nested .splide__slide {justify-content: flex-start !important;}

#brxe-cpybfe .splide__slide.is-active:not(.splide__slide--clone) {
    z-index: 99999;
    filter: drop-shadow(0px 41px 54px rgba(0, 0, 0, 0.25));
}

#brxe-cpybfe .splide__slide.is-active:not(.splide__slide--clone) .brxe-image {
    transform: scale(1.4);
}

#brxe-cpybfe .splide__slide.is-active:not(.splide__slide--clone) .brxe-video {
    transform: scale(1.6);
}

#brxe-cpybfe .splide__slide.is-active:not(.splide__slide--clone) .brxe-audio {
    bottom: -19px;
}

#brxe-cpybfe .splide__slide .success-story-content {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0s, opacity 0s linear;
    margin-top: 85px;
    display: none;
}

#brxe-cpybfe .splide__slide.is-active:not(.splide__slide--clone) .success-story-content {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.5s linear;
    display: flex;
}

#brxe-cpybfe .splide__track {
    padding: 110px 0 0;
}

.brxe-audio {
    padding: 2px 12px;
}

.brxe-audio .mejs-container .mejs-controls .mejs-button.mejs-play button {
    background-color: #000;
    filter: brightness(100) !important;
    border-radius: 100%;
    background-size: 18px !important;
    background-position: 70%;
}

.success-story-carousel .splide__arrow {top: 230px !important}

.success-story-carousel .splide__slide {pointer-events: none;}
.success-story-carousel .splide__slide.is-active {pointer-events: auto;}

.splide__slide .brxe-video .bricks-video-overlay-icon {
  display: none;
}

.splide__slide.is-active .brxe-video .bricks-video-overlay-icon {
    display: block;
}

/* Success Story [END] */


@media (max-width: 766px) {
  #brxe-cpybfe .splide__slide.is-active:not(.splide__slide--clone) .brxe-image, 
  #brxe-cpybfe .splide__slide.is-active:not(.splide__slide--clone) .brxe-video {
      transform: scale(1.1);
  }
  .services-carousel .splide__arrow--prev {left: 0 !important;}
  .services-carousel .splide__arrow--next {right: 0 !important;}
}

// document.addEventListener("DOMContentLoaded", function () {
//   let players = [];
//   let youtubeAPILoaded = false;

//   // Function to load the YouTube API dynamically
//   function loadYouTubeAPI(callback) {
//     if (!youtubeAPILoaded) {
//       let tag = document.createElement("script");
//       tag.src = "https://www.youtube.com/iframe_api";
//       document.head.appendChild(tag);

//       // Ensure YouTube API is loaded before executing callback
//       window.onYouTubeIframeAPIReady = function () {
//         youtubeAPILoaded = true;
//         if (callback) callback();
//       };
//     } else {
//       if (callback) callback();
//     }
//   }

//   // Function to initialize YouTube players
//   function initializeYouTubePlayers() {
//     players = []; // Reset players array

//     document.querySelectorAll("iframe").forEach((iframe) => {
//       if (iframe.src.includes("youtube.com/embed")) {
//         let player = new YT.Player(iframe, {
//           events: {
//             onReady: function (event) {
//               players.push(event.target);
//             },
//           },
//         });
//       }
//     });
//   }

//   // Event listener for clicking .brxe-video
//   document.querySelectorAll(".brxe-video").forEach((videoButton) => {
//     videoButton.addEventListener("click", function () {
//       loadYouTubeAPI(initializeYouTubePlayers);
//     });
//   });

//   // Initialize Splide carousel after page load
//   setTimeout(() => {
//     document.querySelectorAll(".success-story-carousel").forEach((slider) => {
//       let splideInstance = new Splide(slider);
//       splideInstance.mount();
//       splideInstance.go(1);
//       splideInstance.refresh();
//     });

//     // Add event listener to Splide arrows to pause videos
//     document.querySelectorAll(".splide__arrow").forEach((arrow) => {
//       arrow.addEventListener("click", () => {
//         players.forEach((player) => player.pauseVideo()); // Pause all videos
//       });
//     });
//   }, 100);
// });