.elementor-6198 .elementor-element.elementor-element-a196fff{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}.elementor-6198 .elementor-element.elementor-element-cfc94b0{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;overflow:visible;}.elementor-6198 .elementor-element.elementor-element-cfc94b0:not(.elementor-motion-effects-element-type-background), .elementor-6198 .elementor-element.elementor-element-cfc94b0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#122956;}.elementor-6198 .elementor-element.elementor-element-49983cd{--display:flex;overflow:visible;}.elementor-6198 .elementor-element.elementor-element-1aa85b2{--display:flex;overflow:visible;}.elementor-6198 .elementor-element.elementor-element-863ea56{--display:flex;--min-height:100vh;--justify-content:center;overflow:visible;}.elementor-6198 .elementor-element.elementor-element-0e138d0 .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-5dda75d );}.elementor-6198 .elementor-element.elementor-element-fa998ba{color:var( --e-global-color-beb7233 );}.elementor-6198 .elementor-element.elementor-element-30ce51b{--display:flex;--min-height:100vh;--justify-content:center;overflow:visible;}.elementor-6198 .elementor-element.elementor-element-07475fc .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-5dda75d );}.elementor-6198 .elementor-element.elementor-element-0b42547{color:var( --e-global-color-beb7233 );}.elementor-6198 .elementor-element.elementor-element-174eac5{--display:flex;overflow:visible;}.elementor-6198 .elementor-element.elementor-element-832d7f0{--display:flex;overflow:visible;}.elementor-6198 .elementor-element.elementor-element-ec8a8af{--display:flex;--min-height:100vh;--justify-content:center;overflow:visible;}.elementor-6198 .elementor-element.elementor-element-6791a24{--display:flex;--min-height:600px;--border-radius:40px 40px 40px 40px;overflow:visible;}.elementor-6198 .elementor-element.elementor-element-6791a24:not(.elementor-motion-effects-element-type-background), .elementor-6198 .elementor-element.elementor-element-6791a24 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://zenjidigital.in/wp-content/uploads/2025/03/Image-1.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-6198 .elementor-element.elementor-element-e3f3a1b{--display:flex;--min-height:600px;--border-radius:40px 40px 40px 40px;overflow:visible;}.elementor-6198 .elementor-element.elementor-element-e3f3a1b:not(.elementor-motion-effects-element-type-background), .elementor-6198 .elementor-element.elementor-element-e3f3a1b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://zenjidigital.in/wp-content/uploads/2025/03/Image-2.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-6198 .elementor-element.elementor-element-a1d4b34{--display:flex;overflow:visible;}@media(min-width:768px){.elementor-6198 .elementor-element.elementor-element-cfc94b0{--content-width:1200px;}.elementor-6198 .elementor-element.elementor-element-49983cd{--width:50%;}.elementor-6198 .elementor-element.elementor-element-174eac5{--width:50%;}}/* Start custom CSS for html, class: .elementor-element-73c766f */<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/ScrollTrigger.min.js"></script>

<script>
let mediaAnimation = gsap.matchMedia();
ScrollTrigger.defaults({
  markers: false
});

const colors = ["#2E4D71", "#856546", "#05625C", "#5A483E", "#886648"];

mediaAnimation.add("(min-width: 666px)", () => {
  // Desktop animations
  const details = gsap.utils.toArray(".desktopContentSection:not(:first-child)");
  const photos = gsap.utils.toArray(".desktopPhoto:not(:first-child)");

  gsap.set(photos, { clipPath: 'inset(100% 0% 0% 0%)', autoAlpha: 1 });

  const allPhotos = gsap.utils.toArray(".desktopPhoto");

  details.forEach((section, i) => {
      let bgColor = colors[i + 1];
      ScrollTrigger.create({
          trigger: section,
          start: "200 bottom",
          end: "+=100%",

          onToggle: self => {
              if (self.isActive) {
                  gsap.to(".gallery", { backgroundColor: bgColor });
              } else if ((i === 0 && self.direction < 0) || (i === details.length - 1 && self.direction > 0)) {
                  gsap.to(".gallery", { backgroundColor: "#2E4D71" });
              }
          }
      });
  });

  details.forEach((detail, index) => {
      let headline = detail.querySelector(".reveal");
      let animation = gsap.timeline()
          .to(photos[index], { clipPath: 'inset(0% 0% 0% 0%)', autoAlpha: 1, duration: 1.5 })
          .set(allPhotos[index], { autoAlpha: 1, duration: 1.5 });

      ScrollTrigger.create({
          trigger: headline,
          start: "top 120%",
          end: "top 60%",
          animation: animation,
          scrub: true,
          markers: false
      });
  });
});

mediaAnimation.add("(max-width: 665px)", () => {
  // Mobile animations
  const details = gsap.utils.toArray(".desktopContentSection:not(:first-child)");

  details.forEach((section, i) => {
      let bgColor = colors[i + 1];
      ScrollTrigger.create({
          trigger: section,
          start: "200 bottom",
          end: "+=100%",

          onToggle: self => {
              if (self.isActive) {
                  gsap.to(".gallery", { backgroundColor: bgColor });
              } else if ((i === 0 && self.direction < 0) || (i === details.length - 1 && self.direction > 0)) {
                  gsap.to(".gallery", { backgroundColor: "#2E4D71" });
              }
          }
      });
  });
});
</script>/* End custom CSS */