.elementor-4475 .elementor-element.elementor-element-24ad5ebd{--display:flex;--min-height:320px;--justify-content:center;--gap:32px 32px;--row-gap:32px;--column-gap:32px;--overflow:hidden;--overlay-opacity:0.72;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4475 .elementor-element.elementor-element-24ad5ebd:not(.elementor-motion-effects-element-type-background), .elementor-4475 .elementor-element.elementor-element-24ad5ebd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://msconstructions.in/wp-content/uploads/2025/11/Image-N55TUZN.jpg");background-position:center center;background-size:cover;}.elementor-4475 .elementor-element.elementor-element-24ad5ebd::before, .elementor-4475 .elementor-element.elementor-element-24ad5ebd > .elementor-background-video-container::before, .elementor-4475 .elementor-element.elementor-element-24ad5ebd > .e-con-inner > .elementor-background-video-container::before, .elementor-4475 .elementor-element.elementor-element-24ad5ebd > .elementor-background-slideshow::before, .elementor-4475 .elementor-element.elementor-element-24ad5ebd > .e-con-inner > .elementor-background-slideshow::before, .elementor-4475 .elementor-element.elementor-element-24ad5ebd > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(180deg, var( --e-global-color-primary ) 0%, var( --e-global-color-bf890a9 ) 100%);}.elementor-4475 .elementor-element.elementor-element-536cb422{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4475 .elementor-element.elementor-element-b2783ae{text-align:center;}.elementor-4475 .elementor-element.elementor-element-b2783ae .elementor-heading-title{color:#FB7928;}.elementor-4475 .elementor-element.elementor-element-c146d7f{--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-4475 .elementor-element.elementor-element-f18bc97{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(6, 1fr);--grid-auto-flow:row;}.elementor-4475 .elementor-element.elementor-element-2ab6b24 img{height:467px;}.elementor-4475 .elementor-element.elementor-element-73e66a0{text-align:right;}.elementor-4475 .elementor-element.elementor-element-73e66a0 img{width:100%;max-width:100%;height:467px;}.elementor-4475 .elementor-element.elementor-element-4036757 img{height:467px;}.elementor-4475 .elementor-element.elementor-element-c152a48 img{height:467px;}.elementor-4475 .elementor-element.elementor-element-ce32154 img{height:467px;}.elementor-4475 .elementor-element.elementor-element-03f3821 img{height:466px;}.elementor-4475 .elementor-element.elementor-element-20fd895 img{height:466px;}.elementor-4475 .elementor-element.elementor-element-e59671b img{height:466px;}.elementor-4475 .elementor-element.elementor-element-a48adc4 img{max-width:99%;height:466px;}.elementor-4475 .elementor-element.elementor-element-6b37ede img{height:466px;}.elementor-4475 .elementor-element.elementor-element-a52fab9 img{height:466px;}.elementor-4475 .elementor-element.elementor-element-2e8d21e img{height:466px;}.elementor-4475 .elementor-element.elementor-element-8566127 img{height:466px;}.elementor-4475 .elementor-element.elementor-element-284c049 img{height:466px;}.elementor-4475 .elementor-element.elementor-element-6ac4c70 img{height:466px;}@media(max-width:1024px){.elementor-4475 .elementor-element.elementor-element-24ad5ebd{--min-height:320px;--gap:32px 32px;--row-gap:32px;--column-gap:32px;--padding-top:0px;--padding-bottom:0px;--padding-left:32px;--padding-right:32px;}.elementor-4475 .elementor-element.elementor-element-f18bc97{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-4475 .elementor-element.elementor-element-24ad5ebd{--min-height:320px;--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-4475 .elementor-element.elementor-element-f18bc97{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for container, class: .elementor-element-c146d7f *//* ---------------- Extra Animations (paste after existing styles) ---------------- */

/* 1) Animated gradient text for headline */
.headline {
  background: linear-gradient(90deg, var(--accent), #ffb07a 35%, #ffd6be 65%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  animation: headlineGradient 6s linear infinite;
}
@keyframes headlineGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 2) Sheen / light sweep on hover for feature cards and KPI cards */
.feature-anim, .kpi {
  position: relative;
  overflow: hidden;
}
.feature-anim::before, .kpi::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -40%;
  width: 40%;
  height: 180%;
  transform: rotate(20deg) translateX(-120%);
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.28), rgba(255,255,255,0.06));
  transition: transform 0.9s cubic-bezier(.2,.9,.2,1), opacity .6s ease;
  opacity: 0;
  pointer-events: none;
}
.feature-anim:hover::before, .kpi:hover::before {
  transform: rotate(20deg) translateX(30%);
  opacity: 1;
}

/* 3) Pulsing glow behind shapes / subtle halo */
.shape::after {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: inherit;
  filter: blur(40px);
  opacity: 0.06;
  background: radial-gradient(circle at 30% 30%, rgba(255,106,0,0.16), transparent 25%);
  animation: haloPulse 4.8s ease-in-out infinite;
}
@keyframes haloPulse {
  0% { opacity: 0.04; transform: scale(0.98); }
  50% { opacity: 0.09; transform: scale(1.06); }
  100% { opacity: 0.04; transform: scale(0.98); }
}

/* 4) Parallax tilt for background shapes on scroll (simple transform based on scroll) */
@supports (position: sticky) {
  .s1 { will-change: transform; }
  .s2 { will-change: transform; }
  .s3 { will-change: transform; }
}
/* small JS-free parallax using perspective + translateZ illusion (works on modern browsers) */
.bg-anim { transform-style: preserve-3d; }
.bg-anim .s1 { transform: translateZ(-20px) scale(1.06); }
.bg-anim .s2 { transform: translateZ(-8px) scale(1.03); }
.bg-anim .s3 { transform: translateZ(-2px) scale(1.01); }

/* 5) Staggered CSS-only reveal fallback (for users with JS disabled) */
[data-animate].nojs { opacity: 0; transform: translateY(18px); animation: staggerIn 0.8s forwards; }
[data-animate].nojs:nth-child(1){ animation-delay: 0.08s; }
[data-animate].nojs:nth-child(2){ animation-delay: 0.16s; }
[data-animate].nojs:nth-child(3){ animation-delay: 0.24s; }
[data-animate].nojs:nth-child(4){ animation-delay: 0.32s; }
@keyframes staggerIn {
  to { opacity: 1; transform: translateY(0); }
}

/* 6) KPI number gentle bounce when finished counting */
.kpi-value {
  display: inline-block;
  transform-origin: center;
  transition: transform .36s cubic-bezier(.2,.9,.2,1);
}
.kpi-value.bounce {
  animation: kpBounce 800ms cubic-bezier(.2,.9,.2,1);
}
@keyframes kpBounce {
  0% { transform: scale(0.88); }
  40% { transform: scale(1.12); }
  70% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

/* 7) Drifting diagonal stripe overlay for feature cards (subtle movement) */
.feature-anim::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 6px, rgba(255,255,255,0) 6px 24px);
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
  transform: translateY(0);
  animation: stripeShift 10s linear infinite;
}
@keyframes stripeShift { 0% { transform: translateY(0); } 50% { transform: translateY(-18%); } 100% { transform: translateY(0); } }

/* 8) Slight zoom + vignette on container when hovered (desktop) */
.container:hover { transition: transform .6s cubic-bezier(.2,.9,.2,1); transform: translateZ(0) scale(1.0015); }
.container::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(600px 200px at 50% 20%, rgba(255,235,225,0.04), transparent 30%);
  z-index: 1;
  opacity: 1;
  transition: opacity .6s ease;
}

/* 9) Hover glow for headline underline (extra emphasis) */
.headline::after {
  box-shadow: 0 10px 24px rgba(255,106,0,0.14);
  transition: transform .36s cubic-bezier(.2,.9,.2,1), box-shadow .36s ease;
}

/* 10) Accessibility: disable intense animations for reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .headline { animation: none !important; background-clip: initial; color: var(--accent); }
  .feature-anim::before, .kpi::before, .shape::after, .feature-anim::after { animation: none !important; opacity: 0 !important; }
  .bg-anim .s1, .bg-anim .s2, .bg-anim .s3 { transform: none !important; }
  .kpi-value.bounce, .headlineGradient, .stripeShift { animation: none !important; }
}

/* ---------------- End Extra Animations ---------------- *//* End custom CSS */