/* ===========================================================
   ECOSMART — SaaS SECTION CSS (free Elementor compatible)
   Powers: scroll-in animation, hover, image zoom, responsive
   Loaded site-wide via mu-plugin. Hooks onto CSS classes set
   on the native Elementor containers/widgets.
   =========================================================== */

/* ---------- SCROLL-IN ANIMATIONS ---------- */
.eco-fade-up{opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .7s ease;}
.eco-fade-up.eco-visible{opacity:1;transform:translateY(0);}
.eco-fade-in{opacity:0;transition:opacity .8s ease;}
.eco-fade-in.eco-visible{opacity:1;}
.eco-scale-in{opacity:0;transform:scale(.93);transition:opacity .6s ease,transform .6s ease;}
.eco-scale-in.eco-visible{opacity:1;transform:scale(1);}
.eco-slide-left{opacity:0;transform:translateX(-50px);transition:opacity .7s ease,transform .7s ease;}
.eco-slide-left.eco-visible{opacity:1;transform:translateX(0);}
.eco-slide-right{opacity:0;transform:translateX(50px);transition:opacity .7s ease,transform .7s ease;}
.eco-slide-right.eco-visible{opacity:1;transform:translateX(0);}

/* stagger delays */
.eco-delay-1{transition-delay:.1s!important;}
.eco-delay-2{transition-delay:.2s!important;}
.eco-delay-3{transition-delay:.3s!important;}
.eco-delay-4{transition-delay:.4s!important;}
.eco-delay-5{transition-delay:.5s!important;}

/* ---------- INDUSTRY CARDS: IMAGE ZOOM + HOVER ---------- */
.eco-ind-card{position:relative;overflow:hidden;transition:transform .4s ease,box-shadow .4s ease;}
.eco-ind-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(15,30,58,.22);}

/* the image layer that zooms (separate from text so text stays sharp) */
.eco-ind-zoom{transform:scale(1);transition:transform .7s cubic-bezier(.2,.6,.2,1);will-change:transform;}
.eco-ind-card:hover .eco-ind-zoom{transform:scale(1.12);}

/* overlay tint shift on hover (Elementor draws overlay via ::before) */
.eco-ind-card::before{transition:opacity .4s ease;}
.eco-ind-card:hover{}

/* learn-more arrow nudge */
.eco-learn-more a,.eco-learn-more .elementor-button{transition:gap .25s ease,color .25s ease,letter-spacing .25s ease!important;}
.eco-ind-card:hover .eco-learn-more a,.eco-ind-card:hover .eco-learn-more .elementor-button{letter-spacing:.5px;color:#7DFF3A!important;}

/* ---------- LEFT-COLUMN BUTTONS ---------- */
.eco-hover-btn .elementor-button{transition:transform .2s ease,box-shadow .2s ease,background .2s ease!important;}
.eco-hover-btn .elementor-button:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(22,163,74,.32)!important;}
.eco-hover-btn-outline .elementor-button{transition:all .2s ease!important;}
.eco-hover-btn-outline .elementor-button:hover{background:#0F1E3A!important;color:#fff!important;border-color:#0F1E3A!important;}

/* ---------- MINI-FEATURE ICON TILES ---------- */
.eco-feat-icon .elementor-icon{transition:transform .3s ease,background .3s ease!important;}
.eco-feat-icon:hover .elementor-icon{transform:translateY(-4px);}

/* ---------- BUTTON PULSE (add class eco-pulse) ---------- */
@keyframes ecoPulse{0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.4);}50%{box-shadow:0 0 0 12px rgba(22,163,74,0);}}
.eco-pulse .elementor-button{animation:ecoPulse 2.5s infinite;}

/* ---------- PHONE FLOAT (add class eco-phone-float) ---------- */
@keyframes ecoFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
.eco-phone-float img{animation:ecoFloat 3s ease-in-out infinite;}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1024px){
  .eco-industries-section{flex-direction:column!important;}
  .eco-industries-section > .e-con-inner > .e-con,
  .eco-industries-section > .e-con{width:100%!important;}
}
@media(max-width:767px){
  .eco-ind-card{min-height:210px!important;}
  .eco-hover-btn .elementor-button,
  .eco-hover-btn-outline .elementor-button{width:100%;justify-content:center;}
}

/* reduced motion accessibility */
@media(prefers-reduced-motion:reduce){
  .eco-fade-up,.eco-fade-in,.eco-scale-in,.eco-slide-left,.eco-slide-right{opacity:1!important;transform:none!important;transition:none!important;}
  .eco-ind-zoom,.eco-phone-float img{animation:none!important;transition:none!important;}
}


/* ===========================================================
   INSIGHT + PAYGO CARDS (Section 2)
   =========================================================== */

/* Equal-height cards, hover lift */
.eco-insight-paygo-section .eco-solution-card{transition:transform .35s ease,box-shadow .35s ease;}
.eco-insight-paygo-section .eco-solution-card:hover{transform:translateY(-8px);box-shadow:0 28px 60px rgba(8,18,35,.22);}

/* White card button hover */
.eco-card-btn .elementor-button{transition:transform .2s ease,box-shadow .2s ease,background .2s ease!important;}
.eco-card-btn .elementor-button:hover{transform:translateX(4px);box-shadow:0 8px 22px rgba(0,0,0,.18)!important;background:#f2f2f2!important;}

/* Feature icon-box: tighten spacing, align */
.eco-solution-card .elementor-icon-box-wrapper{display:flex;align-items:center;text-align:left;}
.eco-solution-card .elementor-icon-box-icon{margin-bottom:0!important;margin-right:10px!important;}
.eco-solution-card .elementor-icon-box-title{margin:0!important;}
.eco-solution-card .elementor-icon-box-icon .elementor-icon{display:inline-flex;align-items:center;justify-content:center;}

/* Dashboard / phone images */
.eco-insight-dash img{border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.28);}
.eco-paygo-phone img{filter:drop-shadow(0 18px 30px rgba(0,0,0,.3));}

/* RESPONSIVE: stack text over image on mobile (image below) */
@media(max-width:767px){
  .eco-insight-paygo-section .eco-solution-card{min-height:0!important;}
  .eco-insight-paygo-section .eco-card-btn .elementor-button{width:100%;justify-content:center;}
}


/* ===========================================================
   INSIGHT PAGE INTERACTIVE EFFECTS (scroll-zoom, hover-reveal, sticky scroll)
   =========================================================== */

/* Scroll zoom: image starts slightly larger, settles to normal as it enters view */
.eco-scroll-zoom{overflow:hidden;}
.eco-scroll-zoom img{transform:scale(1.18);transition:transform 1.2s cubic-bezier(.16,.7,.2,1);will-change:transform;}
.eco-scroll-zoom.eco-visible img{transform:scale(1);}

/* Hover reveal: hidden detail fades/slides up when parent card hovered */
.eco-reveal-parent{position:relative;overflow:hidden;}
.eco-reveal{opacity:0;max-height:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease,max-height .4s ease;}
.eco-reveal-parent:hover .eco-reveal{opacity:1;max-height:200px;transform:translateY(0);}

/* Hover lift for feature rows */
.eco-feature-row{transition:transform .3s ease,background .3s ease,box-shadow .3s ease;border-radius:14px;}
.eco-feature-row:hover{transform:translateY(-4px);background:#F4FBF6;box-shadow:0 14px 30px rgba(22,163,74,.10);}

/* Sticky media column (image stays while text scrolls) */
@media(min-width:1025px){
  .eco-sticky-media{position:sticky;top:90px;align-self:flex-start;}
}

/* Image hover zoom (general) */
.eco-img-zoom{overflow:hidden;border-radius:16px;}
.eco-img-zoom img{transition:transform .6s cubic-bezier(.2,.6,.2,1);}
.eco-img-zoom:hover img{transform:scale(1.08);}

/* Number/stat pop on view */
.eco-stat-pop{opacity:0;transform:scale(.8);transition:opacity .5s ease,transform .5s cubic-bezier(.34,1.56,.64,1);}
.eco-stat-pop.eco-visible{opacity:1;transform:scale(1);}

/* Gradient text shimmer for headings (optional, add eco-shimmer) */
@keyframes ecoShimmer{0%{background-position:0% 50%;}100%{background-position:200% 50%;}}
.eco-shimmer{background:linear-gradient(90deg,#16A34A,#0E3373,#16A34A);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:ecoShimmer 4s linear infinite;}

/* numbered step circles */
.eco-step-num{background:#16A34A!important;color:#fff!important;width:34px;height:34px;min-width:34px;border-radius:50%;display:flex!important;align-items:center;justify-content:center;text-align:center;line-height:34px;}
.eco-step-num .elementor-heading-title{color:#fff!important;}


/* ===========================================================
   STICKY MEDIA FIX (class sits on the image widget; pin its
   parent container on desktop so image stays while text scrolls)
   =========================================================== */
@media(min-width:1025px){
  /* The Elementor container that directly holds the sticky image */
  .elementor-element:has(> .elementor-widget-wrap > .eco-sticky-media),
  .e-con:has(> .e-con-inner > .eco-sticky-media),
  .e-con-inner:has(> .eco-sticky-media){
    position:sticky;
    top:90px;
    align-self:flex-start;
  }
  /* Fallback: pin the image widget itself */
  .eco-sticky-media{position:sticky;top:90px;}
}


/* ===========================================================
   PRICING CARD HOVER (container classes don't render in this
   Elementor build, so target the pricing card containers via
   their border-radius + flex structure on the pricing page)
   =========================================================== */
.elementor-element.e-con > .e-con-inner > .elementor-widget-button,
.eco-card{transition:transform .35s ease,box-shadow .35s ease;}
/* Generic: any boxed container with rounded corners lifts on hover when it has the card look */
.e-con.eco-liftable:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(15,30,58,.12);}


/* ===========================================================
   WHY CHOOSE SECTION (floating stat cards over building image)
   =========================================================== */
.eco-whychoose-media{position:relative!important;}
.eco-float-card{z-index:3;}
.eco-float-card:nth-of-type(1){animation:ecoFloat 4s ease-in-out infinite;}
.eco-float-card:nth-of-type(2){animation:ecoFloat 4s ease-in-out infinite .6s;}
.eco-float-card:nth-of-type(3){animation:ecoFloat 4s ease-in-out infinite 1.2s;}
/* feature row hover */
.eco-whychoose-section .eco-feature-row{border-radius:14px;transition:background .3s ease,transform .3s ease;}
.eco-whychoose-section .eco-feature-row:hover{background:#F4FBF6;transform:translateY(-3px);}
/* on mobile, stack stat cards normally instead of absolute */
@media(max-width:767px){
  .eco-whychoose-media{min-height:300px!important;}
  .eco-float-card{position:relative!important;left:auto!important;top:auto!important;transform:none!important;margin-bottom:12px;width:auto!important;}
}


/* WHY CHOOSE - explicit float card positions */
.eco-whychoose-media{position:relative!important;overflow:visible!important;}
.eco-whychoose-media .eco-float-card{position:absolute!important;z-index:3;}
.eco-whychoose-media .eco-fc-1{left:-14px;top:70px;width:212px;}
.eco-whychoose-media .eco-fc-2{left:-14px;top:250px;width:212px;}
.eco-whychoose-media .eco-fc-3{left:34px;top:430px;width:244px;}
@media(max-width:1024px){
  .eco-whychoose-media .eco-fc-1{left:0;top:40px;width:178px;}
  .eco-whychoose-media .eco-fc-2{left:0;top:200px;width:178px;}
  .eco-whychoose-media .eco-fc-3{left:16px;top:360px;width:200px;}
}
@media(max-width:767px){
  .eco-whychoose-media{min-height:auto!important;display:flex;flex-direction:column;padding:16px;background-blend-mode:overlay;}
  .eco-whychoose-media .eco-float-card{position:relative!important;left:auto!important;top:auto!important;width:100%!important;margin-bottom:12px;}
}


/* WHYCHOOSE MEDIA HEIGHT - ensure image tall enough for the 3 stacked cards */
@media(min-width:768px){.eco-whychoose-media{min-height:600px!important;}}
@media(min-width:1025px){.eco-whychoose-media{min-height:600px!important;}}


/* ===========================================================
   WHYCHOOSE BY ELEMENT ID (front page 3245 - target the media
   container + 3 float cards by Elementor element id, since custom
   container classes don't render in this build)
   =========================================================== */
.elementor-element-a467429{position:relative!important;overflow:visible!important;min-height:600px!important;}
.elementor-element-a467429 .elementor-element-14ef348,
.elementor-element-a467429 .elementor-element-3c8bb32,
.elementor-element-a467429 .elementor-element-a319c14{position:absolute!important;z-index:3;background:#fff;border-radius:14px;box-shadow:0 12px 34px rgba(14,51,115,0.16);}
.elementor-element-a467429 .elementor-element-14ef348{left:-14px;top:70px;width:212px;animation:ecoFloat 4s ease-in-out infinite;}
.elementor-element-a467429 .elementor-element-3c8bb32{left:-14px;top:250px;width:212px;animation:ecoFloat 4s ease-in-out infinite .6s;}
.elementor-element-a467429 .elementor-element-a319c14{left:34px;top:430px;width:244px;animation:ecoFloat 4s ease-in-out infinite 1.2s;}
@media(max-width:767px){
  .elementor-element-a467429{min-height:auto!important;}
  .elementor-element-a467429 .elementor-element-14ef348,
  .elementor-element-a467429 .elementor-element-3c8bb32,
  .elementor-element-a467429 .elementor-element-a319c14{position:relative!important;left:auto!important;top:auto!important;width:100%!important;margin-bottom:12px;animation:none!important;}
}