.elementor-234 .elementor-element.elementor-element-3d59c58{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-234 .elementor-element.elementor-element-3d59c58{--content-width:1600px;}}/* Start custom CSS for html, class: .elementor-element-8de2664 */.container{
max-width:1200px;
margin:auto;
padding:0 20px;
font-family:Poppins,sans-serif;
}

/* HERO */
/* ===============================
HERO SECTION BACKGROUND IMAGE
Use this for all inner page hero sections
Just change the image URL for each page
=============================== */

.services-hero-premium{

position:relative;
padding:170px 20px;

/* HERO IMAGE */
background-image:url("https://jashwithaconsultancyservices.com/wp-content/uploads/2026/03/ChatGPT-Image-Mar-11-2026-01_25_54-AM.png");

/* make image cover entire hero */
background-size:cover;
background-position:center;
background-repeat:no-repeat;

color:white;
overflow:hidden;

}

/* DARK OVERLAY FOR TEXT READABILITY */

.services-hero-premium::before{

content:"";

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

/* overlay darkness */
background:rgba(0,0,0,0.45);

z-index:1;

}

/* ensure content appears above overlay */

.services-hero-premium .container,
.services-hero-premium .hero-layout{

position:relative;
z-index:2;

}
.hero-mesh{
position:absolute;
top:-50%;
left:-50%;
width:200%;
height:200%;
background:
radial-gradient(circle at 20% 30%,rgba(255,255,255,.15),transparent 40%),
radial-gradient(circle at 80% 60%,rgba(255,255,255,.15),transparent 40%);
animation:meshMove 12s ease-in-out infinite alternate;
}

.badge{
background:rgba(255,255,255,.2);
padding:6px 16px;
border-radius:20px;
display:inline-block;
margin-bottom:18px;
}

.highlight{
background:linear-gradient(90deg,#60A5FA,#22D3EE);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* floating blobs */

.hero-blob{

position:absolute;
width:350px;
height:350px;
border-radius:50%;
filter:blur(80px);
opacity:.4;

}

.blob1{
background:#22d3ee;
top:-120px;
left:-120px;
}

.blob2{
background:#6366f1;
bottom:-140px;
right:-140px;
}

/* HERO PANEL */

.panel-card{

background:rgba(255,255,255,.12);
padding:24px;
border-radius:14px;
margin-bottom:18px;
backdrop-filter:blur(10px);

}


/* SERVICE PILLARS */

.service-pillars{
padding:120px 0;
background:#f8fafc;
}

.section-title{
text-align:center;
font-size:40px;
margin-bottom:60px;
}

.pillar-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.pillar-card{
background:white;
padding:30px;
border-radius:14px;
border:1px solid #e5e7eb;
transition:.3s;
}

.pillar-card:hover{
transform:translateY(-10px);
box-shadow:0 30px 60px rgba(0,0,0,.08);
}

/* DETAIL */

.service-detail{
padding:120px 0;
background:white;
}

.detail-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
}

.detail-visual{
height:420px;
border-radius:20px;
background:linear-gradient(135deg,#6366f1,#22d3ee);
}
.detail-visual{

height:420px;
border-radius:20px;
overflow:hidden;
position:relative;

}

.detail-visual img{

width:100%;
height:100%;
object-fit:cover;

transition:transform .5s ease;

}

.detail-visual:hover img{

transform:scale(1.05);

}
.detail-visual{
height:420px;
border-radius:20px;
overflow:hidden;
position:relative;
}

.detail-visual img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .6s ease, filter .6s ease;
}

.detail-visual:hover img{
transform:scale(1.08);
filter:brightness(1.1);
}

/* TECH ROLES */

.tech-roles{
padding:120px 0;
background:#f8fafc;
}

.tech-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}

.tech-card{
background:white;
padding:18px;
border-radius:30px;
text-align:center;
border:1px solid #e5e7eb;
transition:.3s;
}

.tech-card:hover{
background:#4f46e5;
color:white;
}

/* INDUSTRIES */

.industries-premium{
padding:120px 0;
background:white;
}

.industry-layout{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:20px;
}

.industry{
background:#f1f5f9;
padding:20px;
border-radius:14px;
text-align:center;
}



/* ENGAGEMENT MODEL */

.engagement-model{
padding:120px 0;
background:#f8fafc;
}

.engage-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:20px;
}

.engage-card{
background:white;
padding:24px;
border-radius:14px;
border:1px solid #e5e7eb;
text-align:center;
}

/* CTA */

.services-cta-band{
padding:120px 20px;
background:linear-gradient(135deg,#4f46e5,#2563eb);
color:white;
text-align:center;
}

.cta-btn{
display:inline-block;
margin-top:20px;
padding:14px 30px;
background:white;
color:#4f46e5;
border-radius:8px;
font-weight:600;
position:relative;
overflow:hidden;
}

.cta-btn:before{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(120deg,transparent,rgba(255,255,255,.6),transparent);
transition:.5s;
}

.cta-btn:hover:before{
left:100%;
}
/* responsive */

@media(max-width:900px){

.hero-layout,
.detail-grid{
grid-template-columns:1fr;
}

.pillar-grid,
.tech-grid{
grid-template-columns:1fr;
}

.industry-layout{
grid-template-columns:1fr 1fr;
}

.engage-grid{
grid-template-columns:1fr;
}

}
@media(max-width:900px){

/* HERO */

.hero-layout{

grid-template-columns:1fr;
gap:40px;

text-align:center;

}

.hero-panel{

max-width:380px;
margin:auto;

}

/* SERVICE PILLARS */

.pillar-grid{

grid-template-columns:1fr;

}

/* DETAIL SECTION */

.detail-grid{

grid-template-columns:1fr;

gap:40px;

}

.detail-visual{

height:260px;

}

/* TECH ROLES */

.tech-grid{

grid-template-columns:1fr 1fr;

gap:12px;

}

.tech-card{

font-size:14px;
padding:14px;

}

/* INDUSTRIES */

.industry-layout{

grid-template-columns:1fr 1fr;

gap:12px;

}

/* ENGAGEMENT MODEL */

.engage-grid{

grid-template-columns:1fr;

}

/* SECTION SPACING */

.services-hero-premium{

padding:120px 20px;

}

.service-pillars,
.service-detail,
.tech-roles,
.industries-premium,
.engagement-model{

padding:80px 20px;

}

.section-title{

font-size:30px;

}

}
.pillar-card{
background:white;
padding:30px;
border-radius:14px;
border:1px solid #e5e7eb;
position:relative;
transition:.35s;
overflow:hidden;
}

.pillar-card:before{
content:"";
position:absolute;
top:-2px;
left:-2px;
width:calc(100% + 4px);
height:calc(100% + 4px);
background:linear-gradient(120deg,#4f46e5,#22d3ee,#6366f1);
opacity:0;
transition:.4s;
z-index:-1;
border-radius:14px;
}

.pillar-card:hover{
transform:translateY(-12px);
box-shadow:0 30px 60px rgba(0,0,0,.08);
}

.pillar-card:hover:before{
opacity:.15;
}
.tech-card{
background:white;
padding:18px;
border-radius:30px;
text-align:center;
border:1px solid #e5e7eb;
transition:.3s;
animation:floatCard 6s ease-in-out infinite;
}

.tech-card:nth-child(2){animation-delay:1s;}
.tech-card:nth-child(3){animation-delay:2s;}

@keyframes floatCard{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-8px);}
}
.section-divider{
height:120px;
background:
linear-gradient(135deg,#4f46e5 50%,transparent 50%);
opacity:.08;
}
/* ==========================
SPARKLE PARTICLE EFFECT
========================== */

.hero-sparkles{

position:absolute;
top:0;
left:0;
width:100%;
height:100%;

pointer-events:none;
z-index:1;

background-image:
radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.9), transparent),
radial-gradient(2px 2px at 70% 40%, rgba(255,255,255,0.8), transparent),
radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,255,0.7), transparent),
radial-gradient(2px 2px at 90% 20%, rgba(255,255,255,0.9), transparent),
radial-gradient(1.5px 1.5px at 60% 80%, rgba(255,255,255,0.8), transparent);

background-repeat:no-repeat;

animation:sparkleMove 8s linear infinite;

}

/* sparkle floating animation */

@keyframes sparkleMove{

0%{
transform:translateY(0px);
opacity:.7;
}

50%{
transform:translateY(-300px);
opacity:1;
}

100%{
transform:translateY(0px);
opacity:.7px;
}

}/* End custom CSS */