/* =====================================================
   SERVICES PAGE
===================================================== */

.services-page{
width:100%;
display:flex;
flex-direction:column;
}


/* =====================================================
   HERO
===================================================== */

.services-hero{

padding:90px 0 60px 0;
text-align:center;

}

.services-container{

width:100%;
max-width:1180px;

margin:0 auto;
padding:0 3rem;

box-sizing:border-box;

}

.services-title{

font-size:48px;
font-weight:700;

letter-spacing:-0.02em;

margin:0 0 14px 0;

}

.services-subtitle{

font-size:20px;
line-height:1.5;

color:#6e6e73;

max-width:720px;

margin:0 auto;

}


/* =====================================================
   SERVICES GRID
===================================================== */

.services-grid{

padding:40px 0 80px 0;

}

.services-grid .services-container{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:28px;

}

.service-card{

background:#ffffff;

border-radius:18px;

padding:28px;

box-shadow:
0 6px 20px rgba(0,0,0,.04);

transition:
transform .25s ease,
box-shadow .25s ease;

}

.service-card:hover{

transform:translateY(-4px);

box-shadow:
0 12px 32px rgba(0,0,0,.08);

}

.service-card h3{

font-size:20px;
font-weight:600;

margin:0 0 10px 0;

}

.service-card p{

font-size:15px;
line-height:1.6;

color:#6e6e73;

margin:0;

}


/* =====================================================
   PROCESS SECTION
===================================================== */

.services-process{

padding:80px 0;

background:#ffffff;

}

.services-section-title{

text-align:center;

font-size:34px;
font-weight:700;

letter-spacing:-0.02em;

margin:0 0 60px 0;

}

.process-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:40px;

}

.process-step{

text-align:center;

}

.process-number{

display:inline-block;

font-size:14px;
font-weight:600;

letter-spacing:.08em;

color:#6e6e73;

margin-bottom:10px;

}

.process-step h4{

font-size:20px;
font-weight:600;

margin:0 0 10px 0;

}

.process-step p{

font-size:15px;
color:#6e6e73;

line-height:1.6;

max-width:320px;

margin:0 auto;

}


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

.services-cta{

padding:100px 0 110px 0;

text-align:center;

}

.services-cta h2{

font-size:36px;
font-weight:700;

letter-spacing:-0.02em;

margin:0 0 12px 0;

}

.services-cta p{

font-size:18px;

color:#6e6e73;

margin:0 0 34px 0;

}

.cta-buttons{

display:flex;
justify-content:center;
gap:16px;

}


/* PRIMARY BUTTON */

.cta-primary{

display:inline-block;

background:#0071e3;
color:#fff;

padding:12px 26px;

border-radius:980px;

font-size:16px;
font-weight:500;

text-decoration:none;

transition:
background .2s ease,
transform .15s ease;

}

.cta-primary:hover{

background:#0077ed;
transform:translateY(-1px);

}


/* SECONDARY BUTTON */

.cta-secondary{

display:inline-block;

padding:11px 24px;

border-radius:980px;

border:1px solid #0071e3;

color:#0071e3;

font-size:16px;
font-weight:500;

text-decoration:none;

transition:
background .2s ease,
color .2s ease;

}

.cta-secondary:hover{

background:#0071e3;
color:#fff;

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width:1024px){

.services-grid .services-container{
grid-template-columns:repeat(2,1fr);
}

.process-grid{
grid-template-columns:1fr;
gap:30px;
}

}

@media (max-width:768px){

.services-title{
font-size:34px;
}

.services-subtitle{
font-size:18px;
}

.services-container{
padding:0 1.2rem;
}

.services-grid .services-container{
grid-template-columns:1fr;
}

}