body{
font-family: Arial, Helvetica, sans-serif;
margin:0;
background:#f8f9fb;
color:#333;
line-height:1.6;
}

html{
scroll-behavior:smooth;
}

a{
text-decoration:none;
color:inherit;
}

/* HERO */

.hero{
        padding: 50px 0 20px;
}

.services-hero{
background:#0f2740;
color:white;
text-align:center;
padding:80px 20px;
}

.services-hero h1{
font-size:40px;
margin-bottom:10px;
}

.services-hero p{
max-width:700px;
margin:auto;
opacity:.9;
}

/* SERVICE CARDS */

.service-cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
max-width:1100px;
margin:50px auto;
padding:0 20px;
}

.service-card{
background:white;
border-radius:8px;
box-shadow:0 6px 14px rgba(0,0,0,0.08);
overflow:hidden;
transition:0.3s;
}

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

.service-card img{
width:100%;
height:160px;
object-fit:cover;
}

.service-card h3{
padding:15px;
text-align:center;
color:#2f6fb3;
}

/* LAYOUT */
.services-layout{
display:flex;
max-width:1200px;
margin:auto;
gap:40px;
padding:40px 20px;
align-items: flex-start;
}

.services-sidebar{
min-width:220px;
background:white;
padding:20px;
border-radius:6px;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
align-self: flex-start;
position:sticky;
top:100px;
}

.services-sidebar a{
display:block;
padding:10px 0;
font-weight:600;
color:#2f6fb3;
border-bottom:1px solid #eee;
}

.services-content{
flex:1;
}

.service-section{
display:flex;
align-items:center;
justify-content:center;
gap:40px;
background:white;
padding:35px;
border-radius:8px;
box-shadow:0 4px 14px rgba(0,0,0,0.08);
margin-bottom:60px;
max-width:900px;
margin:60px auto;
scroll-margin-top: 120px;
}

.service-section img{
width:320px;
border-radius:8px;
object-fit:cover;
margin-left:40px;
}

.service-info{
flex:1;
}

.service-image{
    display: flex;
    justify-content: center;
    align-items: center;
}

.service-image img{
    width:300px;
    border-radius: 8px;
}

.service-info h2{
color:#2f6fb3;
margin-bottom:10px;
}

.service-features{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
margin-top:20px;
}

.feature-item{
background:#f3f7ff;
padding:10px 14px;
border-radius:6px;
font-size:14px;
display:flex;
align-items:center;
gap:8px;
}

.feature-item{
color:#333;
}

.feature-item::before{
content:"✔";
color:#2f6fb3;
margin-right:6px;
font-weight:bold;
}

@media(max-width:900px){

.services-layout{
flex-direction:column;
}

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

.service-section img{
width:100%;
max-width:400px;
}

.service-features{
grid-template-columns:1fr;
}

}

.btn-primary{
display:inline-block;
padding:12px 22px;
background:#2f6fe4;
color:white;
text-decoration:none;
border-radius:6px;
font-weight:500;
transition:0.3s;
}

.btn-primary:hover{
background:#1f54b8;
}


body.dark-mode .services-sidebar,
body.dark-mode .feature-item,
body.dark-mode .service-section {
background:#12163a ;
border:1px solid #1f2937;
color:#e5e7eb;

box-shadow:
0 10px 30px rgba(0,0,0,0.4);
}

@media (max-width: 768px){

.services-layout{
flex-direction: column;
}

.services-sidebar{
position: relative;
top: 0;
width: 100%;
min-width: 100%;
margin-bottom: 20px;
}

.services-content{
width: 100%;
}

}