:root{
--primary:#0B1E2D;
--secondary:#133B5C;
--accent:#1B9AAA;
--light:#F8FAFC;
}

body{
font-family:'Cairo',sans-serif;
background:#0B1E2D;
color:#fff;
margin:0;
overflow-x:hidden;
}

.navbar{
background:rgba(11,30,45,0.8);
backdrop-filter:blur(10px);
box-shadow:0 5px 20px rgba(0,0,0,.3);
}

.nav-btn{
background:linear-gradient(135deg,var(--accent),#138A99);
color:#fff;
padding:8px 18px;
border-radius:30px;
text-decoration:none;
margin-left:10px;
font-size:14px;
transition:.3s;
}

.nav-btn:hover{
transform:translateY(-3px);
color:#fff;
}

.hero{
min-height:100vh;
display:flex;
align-items:center;
background:
linear-gradient(rgba(5,15,25,.85), rgba(5,15,25,.9)),
url('../../images/hero-bg.jpg') center/cover no-repeat;
padding-top:120px;
}

.hero-title{
font-size:54px;
font-weight:800;
}

.highlight{
color:var(--accent);
}

.section{
padding:80px 0;
}

.section-title{
font-size:36px;
font-weight:700;
margin-bottom:40px;
text-align:center;
}

.service-card{
background:#11293d;
border-radius:20px;
overflow:hidden;
transition:.4s;
box-shadow:0 15px 40px rgba(0,0,0,.4);
height:100%;
}

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

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

.service-content{
padding:20px;
}

footer{
background:#07141F;
color:#aaa;
text-align:center;
padding:25px;
}