*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#f7f8fc;
}

.container{
width:90%;
max-width:1300px;
margin:auto;
}

/* HERO */

.service-hero{

background:
linear-gradient(
135deg,
#04092b,
#08114b,
#02081f
);

padding:140px 0 100px;
overflow:hidden;
}

.service-hero .container{

display:flex;
align-items:center;
justify-content:space-between;
gap:50px;
}

.service-hero-content{
flex:1;
}

.service-hero-content span{

color:#8b5cf6;
font-weight:600;
letter-spacing:1px;
}

.service-hero-content h1{

font-size:70px;
color:#fff;
margin:15px 0;
}

.service-hero-content h1 span{
color:#8b5cf6;
}

.service-hero-content p{

color:#d5d5d5;
font-size:18px;
line-height:1.8;
max-width:550px;
}

.breadcrumb{
margin-top:25px;
color:#fff;
}

.breadcrumb a{
color:#8b5cf6;
text-decoration:none;
}

.service-hero-image{
flex:1;
}

.service-hero-image img{
width:100%;
max-width:650px;
}

/* SERVICES */

.all-services{
padding:100px 0;
}

.section-heading{
text-align:center;
margin-bottom:60px;
}

.section-heading span{
color:#8b5cf6;
font-weight:600;
}

.section-heading h2{

font-size:50px;
margin:15px 0;
color:#111827;
}

.section-heading p{
color:#666;
}

.services-grid{

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

gap:25px;
}

.service-card{

background:#fff;
padding:35px;
border-radius:20px;

box-shadow:
0 10px 30px rgba(0,0,0,.05);

transition:.3s;
}

.service-card:hover{
transform:translateY(-8px);
}

.service-card i{

width:70px;
height:70px;

display:flex;
align-items:center;
justify-content:center;

background:
linear-gradient(
135deg,
#8b5cf6,
#6f3ff5
);

color:#fff;

font-size:28px;

border-radius:18px;

margin-bottom:20px;
}

.service-card h3{

font-size:22px;
margin-bottom:10px;
}

.service-card p{

color:#666;
line-height:1.8;
}

/* RESPONSIVE */

@media(max-width:992px){

.service-hero .container{
flex-direction:column;
text-align:center;
}

.service-hero-content h1{
font-size:50px;
}

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

}

@media(max-width:576px){

.service-hero{
padding:120px 0 70px;
}

.service-hero-content h1{
font-size:38px;
}

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

.section-heading h2{
font-size:32px;
}

}