.elementor-270 .elementor-element.elementor-element-18f615e{--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-270 .elementor-element.elementor-element-667abe0{--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;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-270 .elementor-element.elementor-element-18f615e{--content-width:1600px;}.elementor-270 .elementor-element.elementor-element-667abe0{--content-width:1600px;}}/* Start custom CSS for html, class: .elementor-element-6604c0f */.container{
max-width:1200px;
margin:auto;
padding:0 20px;
font-family:Poppins,sans-serif;
}

/* HERO */
/* ===================================== */
/* ABOUT HERO BACKGROUND IMAGE */
/* Change image URL for each page */
/* ===================================== */

.contact-hero{

position:relative;
padding:180px 20px;
overflow:hidden;

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

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

color:white;

}
/* particles */

.hero-particles{
position:absolute;
width:100%;
height:100%;
background-image:radial-gradient(rgba(255,255,255,.15) 5px, transparent 5px);
background-size:60px 60px;
animation:particles 30s linear infinite;
}

@keyframes particles{
0%{background-position:0 0;}
100%{background-position:200px 200px;}
}
/* HERO DARK OVERLAY */

.contact-hero::before{

content:"";

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

width:100%;
height:100%;

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

z-index:1;

}

/* ensure content stays above overlay */

.contact-hero .container,
.contact-hero .hero-grid{

position:relative;
z-index:2;

}
/* animated mesh */

.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 infinite alternate ease-in-out;
}

@keyframes meshMove{
0%{transform:translate(0,0);}
100%{transform:translate(-80px,-60px);}
}



/* floating blobs */

.hero-blob{
position:absolute;
width:300px;
height:300px;
border-radius:50%;
filter:blur(90px);
opacity:.5;
}

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

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

/* hero layout */

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

/* badge */

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

/* gradient text */

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

/* FORM */

.hero-form{
background:rgba(255,255,255,.1);
padding:30px;
border-radius:14px;
backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,.25);
}

/* TITLE UNDERLINE */

.title-underline{
position:relative;
display:inline-block;
}

.title-underline:after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:60px;
height:3px;
background:#4f46e5;
}

/* CONTACT INFO */

.contact-info{
padding:120px 0;
background:#f8fafc;
}

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

.contact-card{
background:white;
padding:30px;
border-radius:12px;
border:1px solid #e5e7eb;
transition:.35s;
}

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

/* BENEFITS */

.contact-benefits{
padding:120px 0;
background:white;
}

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

.benefit-card{
background:#f8fafc;
padding:24px;
border-radius:10px;
border:1px solid #e5e7eb;
transition:.3s;
}

.benefit-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 40px rgba(0,0,0,.06);
}

/* FAQ */

.contact-faq{
padding:120px 0;
background:#f8fafc;
}

.faq details{
background:white;
padding:18px;
border-radius:10px;
margin-bottom:10px;
border:1px solid #e5e7eb;
}

.faq summary{
cursor:pointer;
font-weight:600;
}

/* CTA */

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

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

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

.cta-button:hover:before{
left:100%;
}

/* subtle motion sections */

.section-motion{
background:
radial-gradient(circle at 30% 40%,rgba(79,70,229,.05),transparent 40%),
radial-gradient(circle at 70% 60%,rgba(34,211,238,.05),transparent 40%);
}

/* MOBILE */

@media(max-width:900px){

.hero-grid{
grid-template-columns:1fr;
gap:40px;
text-align:center;
}

.hero-form{
max-width:420px;
margin:auto;
}

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

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

}

@media(max-width:480px){

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

.section-title{
font-size:28px;
}

.cta-button{
width:100%;
}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-54ba15b */.contact-section{

position:relative;

padding:160px 20px;

background:linear-gradient(180deg,#ffffff,#f1f5f9);

overflow:hidden;

}

/* floating shapes */

.contact-bg span{

position:absolute;

border-radius:50%;

filter:blur(80px);

opacity:.4;

animation:floatBlob 12s infinite ease-in-out;

}

.contact-bg span:nth-child(1){

width:280px;
height:280px;

background:#a5b4fc;

top:-80px;
left:-80px;

}

.contact-bg span:nth-child(2){

width:260px;
height:260px;

background:#38bdf8;

bottom:-100px;
right:-80px;

animation-delay:4s;

}

@keyframes floatBlob{

0%{transform:translateY(0)}
50%{transform:translateY(-30px)}
100%{transform:translateY(0)}

}

/* container */

.contact-container{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

position:relative;

z-index:2;

}

/* left side */

.contact-left h2{

font-family:Poppins;

font-size:44px;

margin-bottom:14px;

}

.contact-left p{

color:#64748b;

margin-bottom:30px;

max-width:420px;

}

.detail{

margin-bottom:24px;

}

.detail h4{

font-family:Poppins;

margin-bottom:6px;

}

/* form card */

.contact-form-card{

background:rgba(255,255,255,0.75);

backdrop-filter:blur(12px);

padding:40px;

border-radius:18px;

border:1px solid rgba(255,255,255,0.4);

box-shadow:0 30px 60px rgba(0,0,0,0.08);

transition:.4s;

}

.contact-form-card:hover{

transform:translateY(-8px);

box-shadow:0 40px 80px rgba(0,0,0,0.12);

}

/* logo */

.form-logo{

width:150px;

display:block;

margin:auto;

margin-bottom:20px;

}

/* form fields */

.contact-form-card input,
.contact-form-card textarea{

width:100%;

padding:14px;

border-radius:8px;

border:1px solid #e5e7eb;

margin-bottom:14px;

}

/* button */

.contact-form-card button{

background:linear-gradient(135deg,#4f46e5,#2563eb);

color:white;

padding:14px;

border:none;

border-radius:8px;

font-weight:600;

width:100%;

cursor:pointer;

transition:.3s;

}

.contact-form-card button:hover{

transform:translateY(-2px);

box-shadow:0 20px 40px rgba(0,0,0,0.15);

}

/* responsive */

@media(max-width:900px){

.contact-container{

grid-template-columns:1fr;

gap:50px;

}

}/* End custom CSS */