.service-hero{

padding:180px 0 100px;
text-align:center;

}


.service-hero h1{

font-size:65px;
line-height:1.1;
max-width:1000px;
margin:auto;
font-weight:900;

}


.service-hero p{

max-width:800px;
margin:30px auto;
font-size:18px;
line-height:1.7;
color:#666;

}



.service-list{

padding:100px 0;

}



.section-title{

text-align:center;
max-width:850px;
margin:auto auto 60px;

}



.section-title h2{

font-size:50px;

}



.section-title p{

color:#666;
line-height:1.8;

}



.services-box-grid{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;

}



.service-box{

padding:45px;
border-radius:25px;
background:#fff;
box-shadow:0 10px 40px rgba(0,0,0,.08);

}



.service-box h3{

font-size:30px;
margin-bottom:15px;

}



.service-box h4{

font-size:20px;
margin-bottom:20px;

}



.service-box p{

color:#666;
line-height:1.7;

}



.service-box ul{

margin:25px 0;
padding-left:20px;

}



.service-box li{

margin-bottom:10px;

}



.service-box a{

font-weight:600;
color:#111;

}

/* WHY */

.service-why{

padding:100px 0;

}


.why-service-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;

}



.why-service-card{

padding:35px;
background:#050505;
color:white;
border-radius:20px;

}


.why-service-card h3{

color:#b6ff00;
font-size:40px;

}


.why-service-card h4{

margin:20px 0;

}


.why-service-card p{

color:#aaa;
line-height:1.7;

}





/* PROCESS */


.service-process{

padding:100px 0;
background:#fafafa;

}


.process-service-grid{

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

}


.process-service-card{

background:#fff;
padding:30px 20px;
border-radius:20px;
text-align:center;

}


.process-service-card div{

height:60px;
width:60px;
background:#b6ff00;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin:auto;
font-weight:800;

}





/* WHO */


.who-work{

padding:100px 0;

}


.who-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;

}


.who-card{

padding:35px;
border-radius:20px;
background:#fff;
box-shadow:0 10px 30px rgba(0,0,0,.08);

}


.who-card p{

color:#666;
line-height:1.7;

}




/* FAQ */

.service-faq{

padding:100px 0;
background:#fafafa;

}


@media(max-width:900px){

.services-box-grid{

grid-template-columns:1fr;

}


.service-hero h1{

font-size:40px;

}

.why-service-grid,
.who-grid{

grid-template-columns:1fr;

}


.process-service-grid{

grid-template-columns:1fr;

}

}

/* =================================
   PROJECT CTA
================================= */


.project-cta{

position:relative;

overflow:hidden;

background:#050505;

color:#fff;

padding:120px 0;

text-align:center;

min-height:520px;

display:flex;

align-items:center;

}



.project-content{

position:relative;

z-index:5;

max-width:850px;

margin:auto;

}



.project-content h2{

font-size:80px;

line-height:1;

font-weight:900;

text-transform:uppercase;

}



.project-content h2 span{

background:#b6ff00;

color:#111;

padding:5px 15px;

}



.project-content p{

max-width:600px;

margin:30px auto;

color:#ccc;

font-size:17px;

line-height:1.7;

}



/* LEFT IMAGE */

.cta-shape-left{

position:absolute;

left:-80px;

top:-50px;

width:300px;

z-index:1;

}



/* GREEN GLOW */

.cta-green-glow{

position:absolute;

left:80px;

bottom:80px;

width:120px;

filter:blur(1px);

animation:ctaFloat 5s infinite alternate;

}



/* BLACK GLOW CENTER */

.cta-black-glow{

position:absolute;

top:-80px;

left:45%;

width:200px;

opacity:.7;

}



/* RIGHT SHAPE */

.cta-right-shape{

position:absolute;

right:-20px;

bottom:-20px;

width:350px;

}





@keyframes ctaFloat{


from{

transform:translateY(0);

}


to{

transform:translateY(-20px);

}


}



@media(max-width:900px){


.project-content h2{

font-size:45px;

}


.cta-shape-left{

width:180px;

}


.cta-right-shape{

width:200px;

}


}