/* General Reset */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Segoe UI', sans-serif; line-height:1.6; color:#fff; background:#0B1D3A; }

/* Navigation */
.navbar {display: flex;justify-content: space-between;align-items: center;padding: 0.1rem 3rem;background: #0B1D3A;}
.logo img {height: 100px;width: auto;z-index:10;position: relative;}
.navbar .nav-links {list-style: none;display: flex;gap: 1.5rem;}
.navbar .nav-links a {color: #00AEEF;text-decoration: none;transition: 0.3s;}
.navbar .nav-links a:hover {color: #fff;}

/* Hero */
.hero { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:6rem 2rem; position:relative; }
.hero h1 { font-size:3rem; margin-bottom:1rem; }
.hero p { font-size:1.2rem; margin-bottom:2rem; }
.cta-button { background:#00AEEF; color:#fff; padding:1rem 2rem; border:none; border-radius:5px; cursor:pointer; text-decoration:none; transition:0.3s; }
.cta-button:hover { background:#0082b3; }
.hero-content h1 ,p {position: relative;z-index: 10;}

/* Hero shapes */
.shape { position:absolute; width:120px; height:120px; border-radius:50%; background:#00AEEF; opacity:0.5; }
.shape1 { top:10%; left:20%; }
.shape2 { top:40%; right:15%; }
.shape3 { bottom:15%; left:25%;width: 100px;height: 100px; }
/* .shape4 { top:-27.2%; left:2.8% ; z-index:5;width: 60px;height: 60px;position: absolute; } */

/* Services */
.services-overview { padding:4rem 2rem; background:#0B1D3A; text-align:center; }
.services-overview h2 { font-size:2.5rem; margin-bottom:2rem; }
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem; }
.service-card { background:#112B50; padding:1.5rem; border-radius:10px; transition:0.3s; }
.service-card:hover { transform:translateY(-10px); background:#0D234A; }
.service-card img { width:60px; height:60px; margin-bottom:1rem; }
.service-card:hover {transform: translateY(-10px);background: #0D234A;box-shadow: 0 10px 30px rgba(0, 174, 239, 0.3);}

/* Value Prop */
.value-prop { padding:4rem 2rem; text-align:center; background:#0D234A; }
.value-prop h2 { font-size:2rem; margin-bottom:1rem; }

/* Footer */
footer { background:#0B1D3A; padding:2rem; text-align:center; }
footer .social-icons { display:flex; justify-content:center; gap:1rem; margin:1rem 0; }
footer .social-icons img { width:30px; height:30px; }
footer .footer-logo img {width: 90px; height: auto;}
/* Animations */
.scroll-animate { opacity:0; transform: translateY(20px); transition: all 0.8s ease-in-out; }
.scroll-animate.active { opacity:1; transform: translateY(0); }