*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}
body{color:#fff;background:#012d45;overflow-x:hidden}

/* LANG TOGGLE */
.lang-toggle{position:fixed;top:10px;right:10px;z-index:99}
.lang-toggle button{padding:6px 10px;margin:0 2px;border:none;border-radius:4px;cursor:pointer;font-weight:bold}
.lang-toggle button.active{background:#00bfff;color:#fff}
.lang-toggle button:not(.active){background:#003366;color:#fff}

/* NAVBAR */
.navbar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;background:#003366;padding:14px;position:sticky;top:0;z-index:10}
.navbar a{color:#fff;margin:0 10px;text-decoration:none;font-weight:600;padding:6px 12px;border-radius:4px;transition:0.3s}
.navbar a:hover,.navbar a.active{background:#00bfff;color:#fff}
.navbar .logo img{height:40px;margin-right:12px}

/* HERO SLIDER */
.hero{position:relative;height:480px;overflow:hidden}
.hero-slider{position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden}
.hero-slider img{position:absolute;width:100%;height:100%;object-fit:cover;opacity:0;transition:1s ease-in-out;z-index:0}
.hero-slider img.active{opacity:1;transform:scale(1)}
.hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1}
.hero-text{position:absolute;left:40px;bottom:40px;background:rgba(0,0,0,0.45);color:#fff;padding:20px;max-width:520px;border-radius:6px;z-index:2}
.hero-text h1{font-size:32px;margin-bottom:10px}

/* ABOUT */
.about{padding:60px 20px;max-width:1100px;margin:auto}
.about h2{text-align:center;margin-bottom:20px;color:#00bfff}
.about p{text-align:center;margin-bottom:20px}
.about-slider{position:relative;height:320px;margin-top:20px;overflow:hidden;border-radius:8px}
.about-slider img{position:absolute;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.2) translateX(50px);transition:1s;border-radius:8px;filter:brightness(0.6)}
.about-slider img.active{opacity:1;transform:scale(1) translateX(0)}

/* SERVICES */
.services{padding:60px 20px;max-width:1100px;margin:auto}
.services h2{text-align:center;margin-bottom:30px;color:#00bfff}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.service-card{border:1px solid #00bfff;border-radius:8px;padding:20px;text-align:center;transition:0.3s;background:#fff;color:#012d45}
.service-card:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(0,0,0,0.35)}
.service-card h3{color:#003366;margin-bottom:10px}

/* PACKAGES */
.packages{padding:60px 20px;max-width:1100px;margin:auto}
.packages h2{text-align:center;margin-bottom:30px;color:#00bfff}
.package-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.package-card{border:1px solid #00bfff;border-radius:8px;padding:20px;text-align:center;transition:transform 0.3s ease, box-shadow 0.3s ease;background:#fff;color:#012d45;cursor:pointer}
.package-card:hover{transform:scale(1.1);box-shadow:0 6px 20px rgba(0,0,0,0.35)}
.package-card h3{color:#003366;margin-bottom:12px}
.package-card p{margin-bottom:10px}

/* COVERAGE */
.coverage{background:rgba(255,255,255,0.05);padding:60px 20px;border-radius:6px;text-align:center;color:#fff}

/* CONTACT */
.contact{padding:60px 20px;max-width:600px;margin:auto;text-align:center;color:#fff}
.contact form{margin-top:20px}
.contact input,.contact textarea,.contact button{width:100%;padding:10px;margin:8px 0;border-radius:4px;border:1px solid #ccc}
.contact button{background:#00bfff;color:#fff;border:none;font-weight:bold;cursor:pointer}
.contact button:hover{background:#003366}

/* WHATSAPP */
.whatsapp{position:fixed;right:20px;bottom:20px;background:#25d366;color:#fff;font-size:22px;padding:14px;border-radius:50%;text-decoration:none}

/* FOOTER */
footer{background:#003366;color:#fff;text-align:center;padding:14px}

/* ANIMATIONS */
.fade-up{opacity:0;transform:translateY(20px);transition:0.8s ease-out}
.fade-up.show{opacity:1;transform:translateY(0)}





/* ===== MOBILE NAVBAR FIX ===== */
.menu-toggle {
  display: none;
  font-size: 26px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}

.nav-links {
  display: flex;
  gap: 15px;
}

/* Mobile view */
@media (max-width: 768px) {

  .navbar {
    flex-wrap: wrap;
  }

  .menu-toggle {
    display: block;
    margin-left: auto;
  }

  .nav-links {
    width: 100%;
    display: none;
    flex-direction: column;
    background: #012d45;
    padding: 10px 0;
  }

  .nav-links a {
    padding: 12px;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.1);
  }

  .nav-links.show {
    display: flex;
  }

  .lang-toggle {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
  }
}