.elementor-22 .elementor-element.elementor-element-b04e794{--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;}.elementor-22 .elementor-element.elementor-element-2428539{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;--lottie-container-width:50%;--lottie-container-max-width:50%;}.elementor-22 .elementor-element.elementor-element-2428539 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-22 .elementor-element.elementor-element-687c724 > .elementor-widget-container{padding:20px 0px 0px 0px;}.elementor-22 .elementor-element.elementor-element-687c724{text-align:center;font-family:"Cormorant Garamond", Sans-serif;font-size:3rem;font-weight:700;color:#1C1C1CB8;}.elementor-22 .elementor-element.elementor-element-4f0d3212{--display:flex;}.elementor-22 .elementor-element.elementor-element-13e2a13{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:flex-start;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--flex-wrap:nowrap;--overflow:hidden;}.elementor-22 .elementor-element.elementor-element-ad0577f{--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;--flex-wrap:wrap;--overlay-opacity:0.5;--border-radius:12px 12px 12px 12px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:30px;--padding-bottom:30px;--padding-left:20px;--padding-right:0px;--z-index:99;}.elementor-22 .elementor-element.elementor-element-ad0577f:not(.elementor-motion-effects-element-type-background), .elementor-22 .elementor-element.elementor-element-ad0577f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-22 .elementor-element.elementor-element-ad0577f::before, .elementor-22 .elementor-element.elementor-element-ad0577f > .elementor-background-video-container::before, .elementor-22 .elementor-element.elementor-element-ad0577f > .e-con-inner > .elementor-background-video-container::before, .elementor-22 .elementor-element.elementor-element-ad0577f > .elementor-background-slideshow::before, .elementor-22 .elementor-element.elementor-element-ad0577f > .e-con-inner > .elementor-background-slideshow::before, .elementor-22 .elementor-element.elementor-element-ad0577f > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-22 .elementor-element.elementor-element-ad0577f.e-con{--align-self:center;}.elementor-22 .elementor-element.elementor-element-59de7ba > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-22 .elementor-element.elementor-element-59de7ba{font-family:"Helvetica", Sans-serif;font-size:1.3rem;font-weight:600;text-transform:none;font-style:normal;text-decoration:none;color:#1C1C1CD6;}.elementor-22 .elementor-element.elementor-element-aec925f{--e-filter-direction:row;--e-filter-white-space:nowrap;--e-filter-justify-content:flex-start;--e-filter-item-width:initial;--e-filter-item-flex-grow:0;--e-filter-wrap:nowrap;--e-filter-overflow-x:scroll;width:100%;max-width:100%;--e-filter-space-between:9px;--e-filter-normal-text-color:var( --e-global-color-c4a7441 );--e-filter-hover-text-color:var( --e-global-color-primary );--e-filter-active-text-color:var( --e-global-color-primary );--e-filter-item-border-radius:30px 30px 30px 30px;}.elementor-22 .elementor-element.elementor-element-aec925f .e-filter-item:not( [aria-pressed=true] ):not( :hover ){background-color:var( --e-global-color-primary );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-c4a7441 );}.elementor-22 .elementor-element.elementor-element-aec925f .e-filter-item:hover:not( [aria-pressed=true] ){background-color:var( --e-global-color-c4a7441 );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-c4a7441 );}.elementor-22 .elementor-element.elementor-element-aec925f .e-filter-item[aria-pressed="true"]{background-color:var( --e-global-color-c4a7441 );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-c4a7441 );}.elementor-22 .elementor-element.elementor-element-aec925f > .elementor-widget-container{margin:-5px 0px 15px 0px;padding:0px 0px 4px 0px;}.elementor-22 .elementor-element.elementor-element-aec925f.elementor-element{--align-self:center;}.elementor-22 .elementor-element.elementor-element-aec925f .e-filter-item{font-family:"Helvetica", Sans-serif;font-size:0.8rem;font-weight:400;text-transform:none;font-style:normal;text-decoration:none;padding:10px 11px 10px 11px;}.elementor-22 .elementor-element.elementor-element-c5a489e{--divider-border-style:solid;--divider-color:#8A8C8C7A;--divider-border-width:1px;}.elementor-22 .elementor-element.elementor-element-c5a489e .elementor-divider-separator{width:100%;}.elementor-22 .elementor-element.elementor-element-c5a489e .elementor-divider{padding-block-start:2px;padding-block-end:2px;}.elementor-22 .elementor-element.elementor-element-a5a4409{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-22 .elementor-element.elementor-element-4501475{--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;}.elementor-22 .elementor-element.elementor-element-ddd78ca{--grid-columns:3;width:100%;max-width:100%;}.elementor-22 .elementor-element.elementor-element-ddd78ca .elementor-loop-container{grid-auto-rows:1fr;}.elementor-22 .elementor-element.elementor-element-ddd78ca .e-loop-item > .elementor-section, .elementor-22 .elementor-element.elementor-element-ddd78ca .e-loop-item > .elementor-section > .elementor-container, .elementor-22 .elementor-element.elementor-element-ddd78ca .e-loop-item > .e-con, .elementor-22 .elementor-element.elementor-element-ddd78ca .e-loop-item .elementor-section-wrap  > .e-con{height:100%;}.elementor-22 .elementor-element.elementor-element-912d030{--display:flex;}.elementor-22 .elementor-element.elementor-element-9c65d21{--display:flex;}body.elementor-page-22:not(.elementor-motion-effects-element-type-background), body.elementor-page-22 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-22 .elementor-element.elementor-element-aec925f{--e-filter-direction:row;--e-filter-white-space:nowrap;}.elementor-22 .elementor-element.elementor-element-ddd78ca{--grid-columns:2;}}@media(max-width:767px){.elementor-22 .elementor-element.elementor-element-b04e794{--margin-top:0px;--margin-bottom:0px;--margin-left:50px;--margin-right:0px;}.elementor-22 .elementor-element.elementor-element-2428539 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-22 .elementor-element.elementor-element-2428539{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;--lottie-container-width:100%;--lottie-container-max-width:100%;}.elementor-22 .elementor-element.elementor-element-2428539.elementor-element{--align-self:center;}.elementor-22 .elementor-element.elementor-element-687c724{text-align:start;font-size:1rem;}.elementor-22 .elementor-element.elementor-element-ad0577f{--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;}.elementor-22 .elementor-element.elementor-element-aec925f{--e-filter-direction:column;--e-filter-white-space:initial;width:initial;max-width:initial;--e-filter-align-items:center;--e-filter-item-width:100%;--e-filter-item-max-width:100%;--e-filter-item-flex-grow:1;--e-filter-item-box-sizing:border-box;--e-filter-item-align-text:center;}.elementor-22 .elementor-element.elementor-element-aec925f > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-22 .elementor-element.elementor-element-aec925f.elementor-element{--align-self:center;}.elementor-22 .elementor-element.elementor-element-aec925f .e-filter-item{font-size:0.6rem;}.elementor-22 .elementor-element.elementor-element-ddd78ca{--grid-columns:1;}}/* Start custom CSS for container, class: .elementor-element-13e2a13 */.elementor-22 .elementor-element.elementor-element-13e2a13 {
  display: flex;
  overflow: hidden;
  position: relative;
  width: 100%;
  cursor: grab;
  gap: 24px;
  padding-bottom: 10px;
}

.elementor-22 .elementor-element.elementor-element-13e2a13:active {
  cursor: grabbing;
}

.elementor-22 .elementor-element.elementor-element-13e2a13 {
  scroll-snap-stop: always;
}

.elementor-22 .elementor-element.elementor-element-13e2a13::-webkit-scrollbar { display: none; }/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-ddd78ca */.elementor-22 .elementor-element.elementor-element-ddd78ca {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  gap: 24px;
  transition: transform 0.4s ease-in-out;
  align-items: stretch !important;
}

/* Each card */
.elementor-22 .elementor-element.elementor-element-ddd78ca .elementor-loop-item {
  flex: 0 0 350px;
  scroll-snap-align: start;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.elementor-22 .elementor-element.elementor-element-ddd78ca .elementor-loop-item:hover {
  transform: translateY(-5px);
}

/* Clamp titles and excerpts to prevent width expansion */
.elementor-22 .elementor-element.elementor-element-ddd78ca .elementor-heading-title,
.elementor-22 .elementor-element.elementor-element-ddd78ca .elementor-widget-text-editor {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Responsive widths */
@media (max-width: 1024px) {
  .elementor-22 .elementor-element.elementor-element-ddd78ca .elementor-loop-item { flex: 0 0 300px; }
}
@media (max-width: 768px) {
  .elementor-22 .elementor-element.elementor-element-ddd78ca .elementor-loop-item { flex: 0 0 260px; }
}/* End custom CSS */
/* Start custom CSS */<script> document.addEventListener("DOMContentLoaded", () => { const container = document.querySelector(".projects-scroll-container"); if (!container) return; // Mouse wheel scrolls sideways container.addEventListener("wheel", e => { if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) { container.scrollLeft += e.deltaY; e.preventDefault(); } }); // Drag-to-scroll let isDown = false, startX, scrollLeft; container.addEventListener("mousedown", e => { isDown = true; startX = e.pageX - container.offsetLeft; scrollLeft = container.scrollLeft; container.style.cursor = "grabbing"; }); container.addEventListener("mouseleave", () => { isDown = false; container.style.cursor = "grab"; }); container.addEventListener("mouseup", () => { isDown = false; container.style.cursor = "grab"; }); container.addEventListener("mousemove", e => { if (!isDown) return; e.preventDefault(); const x = e.pageX - container.offsetLeft; const walk = (x - startX) * 1.2; container.scrollLeft = scrollLeft - walk; }); }); </script>

/* ==========================
   Animated Gradient
   ========================== */

.projects-section {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.projects-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(100% 100% at var(--4-x-position) var(--4-y-position), #0cb1f2 0%, transparent),
              radial-gradient(100% 100% at var(--5-x-position) var(--5-y-position), #8a8c8c 0%, transparent),
              radial-gradient(100% 100% at var(--6-x-position) var(--6-y-position), #f2f2f2 0%, transparent),
              #ffffff;
  animation: lavaLamp 2s ease-in-out infinite; 
  background-size: cover;
  opacity: 0.5;
  filter: blur(60px);
  pointer-events: none;
}

/* --- Motion variables --- */
@property --4-x-position { syntax: '<percentage>'; inherits: false; initial-value: 80%; }
@property --4-y-position { syntax: '<percentage>'; inherits: false; initial-value: 20%; }
@property --5-x-position { syntax: '<percentage>'; inherits: false; initial-value: 80%; }
@property --5-y-position { syntax: '<percentage>'; inherits: false; initial-value: 80%; }
@property --6-x-position { syntax: '<percentage>'; inherits: false; initial-value: 80%; }
@property --6-y-position { syntax: '<percentage>'; inherits: false; initial-value: 80%; }

:root {
  --4-x-position: 80%;
  --4-y-position: 20%;
  --5-x-position: 80%;
  --5-y-position: 80%;
  --6-x-position: 80%;
  --6-y-position: 80%;
}

/* --- “Lava lamp” motion --- */
@keyframes lavaLamp {
  0% {
    --4-x-position: 75%; --4-y-position: 25%;
    --5-x-position: 85%; --5-y-position: 80%;
    --6-x-position: 45%; --6-y-position: 40%;
  }
  25% {
    --4-x-position: 90%; --4-y-position: 70%;
    --5-x-position: 55%; --5-y-position: 30%;
    --6-x-position: 25%; --6-y-position: 60%;
  }
  50% {
    --4-x-position: 30%; --4-y-position: 80%;
    --5-x-position: 65%; --5-y-position: 20%;
    --6-x-position: 80%; --6-y-position: 40%;
  }
  75% {
    --4-x-position: 70%; --4-y-position: 50%;
    --5-x-position: 40%; --5-y-position: 70%;
    --6-x-position: 20%; --6-y-position: 30%;
  }
  100% {
    --4-x-position: 75%; --4-y-position: 25%;
    --5-x-position: 85%; --5-y-position: 80%;
    --6-x-position: 45%; --6-y-position: 40%;
  }
}

<script>
document.addEventListener("scroll", () => {
  const cards = document.querySelectorAll(".project-card");
  cards.forEach(card => {
    const rect = card.getBoundingClientRect();
    const visibleRatio = 1 - Math.abs(rect.top / window.innerHeight);

    // When card is about 2/3 visible, make it solid
    if (visibleRatio > 0.68) {
      card.classList.add("is-active");
    } else {
      card.classList.remove("is-active");
    }
  });
});
</script>








































*/* End custom CSS */