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

body{
background:#f4f7fb;
overflow-x:hidden;
}

.top-header{
background:linear-gradient(135deg,#003b5c,#0b5d6f);
color:white;
padding:8px 0;
}

.logo{
width:45px;
height:45px;
margin:4px;
object-fit:contain;
background:#fff;
border-radius:50%;
padding:4px;
}

.main-logo{
width:55px;
height:55px;
object-fit:contain;
background:#fff;
border-radius:50%;
padding:4px;
margin-bottom:5px;
}

.top-header h1{
font-size:2rem;
font-weight:700;
margin-bottom:2px;
}

.top-header h5{
color:#dbeafe;
font-size:1rem;
}

.login-btn{
font-weight:700 !important;
}

.navbar{
box-shadow:0 2px 10px rgba(0,0,0,.1);
min-height:45px;
}

.navbar-nav .nav-link{
color:white !important;
font-weight:600;
padding:10px 16px !important;
font-size:0.95rem;
}

.navbar-nav .nav-link:hover{
color:#ffd54f !important;
}

.hero-section{
height:38vh;
min-height:260px;
background:
linear-gradient(rgba(0,0,0,.60),rgba(0,0,0,.60)),
url("/static/images/jansunwai_cm_bg.jpg");
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
}

.hero-content{
color:white;
max-width:900px;
padding:15px;
}

.hero-content h2{
font-size:2.5rem;
font-weight:700;
color:#38bdf8;
}

.hero-content h3{
font-size:1.3rem;
color:#facc15;
margin:12px 0;
}

.hero-content p{
font-size:1rem;
line-height:1.7;
}

.quick-services{
max-width:1300px;
margin:-30px auto 25px;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
padding:0 20px;
position:relative;
z-index:100;
}

.service-card{
color:white;
text-align:center;
padding:20px 15px;
border:none;
border-radius:15px;
transition:.3s;
box-shadow:0 6px 15px rgba(0,0,0,.15);
}

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

.service-card i{
font-size:32px;
margin-bottom:12px;
}

.service-card h4{
font-size:1rem;
font-weight:600;
}

.red{background:#d62828;}
.orange{background:#c07c15;}
.green{background:#0f766e;}
.bg-primary{background:#1565c0 !important;}

.features{
padding:15px 20px 35px;
background:#f4f7fb;
}

.features h2{
margin-bottom:25px !important;
font-size:1.7rem;
font-weight:700;
}

.feature-box{
background:white;
color:#111827;
padding:22px;
border-radius:12px;
text-align:center;
font-size:0.95rem;
font-weight:700;
box-shadow:0 4px 10px rgba(0,0,0,.08);
transition:.3s;
}

.feature-box:hover{
transform:translateY(-4px);
}

footer{
background:linear-gradient(135deg,#003b5c,#0b5d6f) !important;
color:#ffffff !important;
text-align:center;
padding:18px 20px;
margin-top:0;
border-top:4px solid #f59e0b;
}

footer h5{
color:#ffffff !important;
font-size:1rem;
font-weight:700;
margin-bottom:6px;
}

footer p{
color:#e0f2fe !important;
margin-bottom:4px;
font-size:0.85rem;
}

@media(max-width:992px){
.quick-services{
grid-template-columns:repeat(2,1fr);
}

```
.top-header h1{
    font-size:1.5rem;
}

.hero-content h2{
    font-size:2rem;
}

.hero-content h3{
    font-size:1.1rem;
}
```

}

@media(max-width:768px){
.hero-section{
min-height:280px;
}

```
.quick-services{
    grid-template-columns:1fr;
    margin-top:20px;
}

.hero-content h2{
    font-size:1.7rem;
}

.hero-content h3{
    font-size:1rem;
}

.hero-content p{
    font-size:0.9rem;
}

.top-header{
    text-align:center;
}

.top-header h1{
    font-size:1.3rem;
}

.logo{
    width:40px;
    height:40px;
}

.main-logo{
    width:50px;
    height:50px;
}
```

}