.services-hero{

padding:80px 8%;

text-align:center;

background:
linear-gradient(
135deg,
#0d47a1,
#1f65d6
);

color:white;

}


.services-hero h1{

font-size:50px;

margin-bottom:15px;

}


.services-hero p{

opacity:.9;

font-size:18px;

}



.service-search{

padding:40px 8%;

text-align:center;

background:white;

}


.service-search input{

width:50%;

padding:16px;

border-radius:12px;

border:1px solid #ddd;

outline:none;

font-size:16px;

box-shadow:
0 3px 15px rgba(0,0,0,.05);

}



.service-categories{

display:flex;

justify-content:center;

gap:15px;

padding:22px 8%;

flex-wrap:wrap;

background:#f8fafc;

}


.service-categories a{

padding:12px 20px;

border:1px solid #e3e8f2;

border-radius:30px;

background:white;

cursor:pointer;

font-weight:600;

text-decoration:none;

color:#222;

box-shadow:
0 3px 10px rgba(0,0,0,.08);

transition:.25s;

}


.service-categories a:hover,
.service-categories .active{

background:#0d47a1;

color:white;

border-color:#0d47a1;

}



.services-container{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(min(100%,320px),1fr));

gap:30px;

padding:80px 8%;

}



.service-card{

background:white;

border-radius:25px;

overflow:hidden;

box-shadow:
0 8px 30px rgba(0,0,0,.07);

transition:.4s;

}


.service-card:hover{

transform:translateY(-10px);

}


.service-image{

height:220px;

overflow:hidden;

}


.service-image img{

width:100%;

height:100%;

object-fit:cover;

}


.service-info{

padding:25px;

}


.tag{

background:#edf3ff;

color:#0d47a1;

padding:6px 14px;

border-radius:30px;

font-size:12px;

font-weight:700;

}


.service-info h2{

margin-top:15px;

font-size:28px;

}


.service-info p{

margin:15px 0;

line-height:1.6;

color:#666;

}


.service-info h3{

color:#0d47a1;

margin-bottom:20px;

}


.service-info a{

display:inline-block;

background:#0d47a1;

color:white;

padding:12px 20px;

border-radius:10px;

text-decoration:none;

}

.empty{

grid-column:1 / -1;

background:white;

padding:30px;

border-radius:16px;

text-align:center;

color:#666;

box-shadow:
0 8px 30px rgba(0,0,0,.07);

}

@media(max-width:900px){

.services-hero h1{

font-size:40px;

}

.service-search input{

width:100%;

}

.service-categories{

justify-content:flex-start;

overflow-x:auto;

flex-wrap:nowrap;

padding:18px 6%;

scrollbar-width:none;

}

.service-categories::-webkit-scrollbar{

display:none;

}

.service-categories a{

flex:0 0 auto;

white-space:nowrap;

}

.services-container{

grid-template-columns:1fr;

padding:50px 6%;

}

}

@media(max-width:520px){

.services-hero{

padding:64px 6%;

}

.services-hero h1{

font-size:34px;

}

.service-search{

padding:28px 6%;

}

.service-info h2{

font-size:24px;

}

}