/* ==========================================================================
   style-update.css — custom overrides moved out of index.html
   Hero section (elementor-element-25a8273)
   ========================================================================== */

.elementor-element-25a8273{position:relative;height:100vh;height:100dvh;overflow:hidden;}

.elementor-element-25a8273 .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;z-index:0;}

.elementor-element-25a8273 .hero-emblem{position:absolute;left:50%;top:41%;transform:translate(-50%,-50%);height:clamp(200px,42vh,440px);width:auto;z-index:1;filter:brightness(0) invert(1) sepia(.5) saturate(2.6) hue-rotate(324deg) brightness(1.05) drop-shadow(0 0 35px rgba(255,170,70,.6));}

.elementor-element-25a8273 .hero-title{position:absolute;left:3.5%;bottom:5%;width:clamp(300px,56vw,1060px);height:auto;z-index:2;}

.elementor-element-25a8273 .hero-brand{position:absolute;right:4%;bottom:6.5%;z-index:2;text-align:right;}

.elementor-element-25a8273 .hero-masks{display:flex;gap:clamp(12px,1.6vw,26px);justify-content:flex-end;align-items:flex-end;}
.elementor-element-25a8273 .hero-masks img{height:clamp(48px,6vw,88px);width:auto;}

.elementor-element-25a8273 .hero-tag{width:auto;max-width:34vw;height:auto;margin-top:24px;margin-bottom:24px;display:inline-block;}

@media (max-width:767px){
	.elementor-element-25a8273 .hero-emblem{top:31% !important;height:clamp(150px,30vh,260px) !important;}
	.elementor-element-25a8273 .hero-title{left:50% !important;right:auto !important;transform:translateX(-50%) !important;width:90% !important;bottom:20% !important;}
	.elementor-element-25a8273 .hero-brand{left:50% !important;right:auto !important;transform:translateX(-50%) !important;bottom:4.5% !important;text-align:center !important;width:92%;}
	.elementor-element-25a8273 .hero-masks{justify-content:center !important;gap:16px !important;}
	.elementor-element-25a8273 .hero-masks img{height:clamp(38px,11vw,56px) !important;}
	.elementor-element-25a8273 .hero-tag{width:min(74%,300px) !important;margin-top:10px !important;}
}

/* ==========================================================================
   Hero load reveal animation
   emblem fades in -> title from left -> 3 masks stagger up -> ARTmeet from bottom
   Uses individual transform props (translate/scale) so it never fights the
   centering `transform` on .hero-emblem / mobile .hero-title/.hero-brand.
   ========================================================================== */
.elementor-element-25a8273 .hero-emblem{animation:heroEmblemIn 1.1s cubic-bezier(.22,.7,.25,1) .15s both;}
.elementor-element-25a8273 .hero-title{animation:heroFromLeft 1s cubic-bezier(.22,.7,.25,1) .55s both;}
.elementor-element-25a8273 .hero-masks img{animation:heroFromBottom .7s cubic-bezier(.22,.7,.25,1) both;}
.elementor-element-25a8273 .hero-masks img:nth-child(1){animation-delay:.95s;}
.elementor-element-25a8273 .hero-masks img:nth-child(2){animation-delay:1.15s;}
.elementor-element-25a8273 .hero-masks img:nth-child(3){animation-delay:1.35s;}
.elementor-element-25a8273 .hero-tag{animation:heroFromBottom .8s cubic-bezier(.22,.7,.25,1) 1.6s both;}

@keyframes heroEmblemIn{from{opacity:0;scale:.9;}to{opacity:1;scale:1;}}
@keyframes heroFromLeft{from{opacity:0;translate:-90px 0;}to{opacity:1;translate:0 0;}}
@keyframes heroFromBottom{from{opacity:0;translate:0 36px;}to{opacity:1;translate:0 0;}}

@media (prefers-reduced-motion:reduce){
	.elementor-element-25a8273 .hero-emblem,
	.elementor-element-25a8273 .hero-title,
	.elementor-element-25a8273 .hero-masks img,
	.elementor-element-25a8273 .hero-tag{animation:none;}
}

/* ==========================================================================
   what-we-do.html — "Services / What We Do" heading
   The heading sits in a full-width (content-no) section so its text was
   flush against the left edge. Box just the heading to the 1400px content
   grid (centered) so it lines up with the counters below, while the section
   background stays full-width.
   ========================================================================== */
.elementor-element-5e8a798 > .elementor-widget-container{max-width:1400px;margin-left:auto;margin-right:auto;}
/* keep the heading off the edge on screens narrower than the grid */
@media (max-width:1399px){
	.elementor-element-5e8a798 > .elementor-widget-container{padding-left:clamp(15px,2.4vw,40px);padding-right:clamp(15px,2.4vw,40px);}
}

/* what-we-do "Services" band: keep the dancer banner, but lay a full-width
   black transparent overlay on top of it (gradient layer above the image,
   still behind the heading/counters) so the text reads clearly. */
.elementor-element-f42eeea > .elementor-widget-wrap.elementor-element-populated{
	background-image:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)), url("../img/Taj_img3.png") !important;
	background-position:center center, center center !important;
	background-size:cover, cover !important;
	background-repeat:no-repeat, no-repeat !important;
}

/* what-we-do counters: remove the thin top border/line above the counter row
   (all four columns that form the line, incl. 928a784). */
.elementor-1433 .elementor-element.elementor-element-fc3a093 > .elementor-element-populated,
.elementor-1433 .elementor-element.elementor-element-928a784 > .elementor-element-populated,
.elementor-1433 .elementor-element.elementor-element-ac92b93 > .elementor-element-populated,
.elementor-1433 .elementor-element.elementor-element-6a8b97f > .elementor-element-populated{
	border:0 !important;
}

/* what-we-do counters on mobile: each counter is a full-width flex row with
   justify-content:center, so the number+label block was centered and staggered
   per label length. Align them to the start so all numbers line up. */
@media (max-width:767px){
	.elementor-element-4fdaa47 .qodef-counter{justify-content:flex-start !important;}
}