:root{
  --dark-blue:#0b2340;
  --accent-1:#ff7a00; /* orange */
  --accent-2:#ffd100; /* yellow */
  --white:#ffffff;
  --muted:#6b7280;
  --card-bg: rgba(255,255,255,0.06);
  --glass: rgba(255,255,255,0.06);
  --whatsapp:#25d366;
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:#111;background:linear-gradient(180deg,#05254b 0%, #0b2340 60%);}

.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{background:var(--dark-blue); color:var(--white); position:sticky; top:0; z-index:80; box-shadow:0 5px 18px rgba(0,0,0,0.35)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{height:54px;width:54px;object-fit:contain;border-radius:12px;background:transparent;border:0}
.brand-text{line-height:1}
.brand-name{font-weight:900;color:var(--white);font-size:1.15rem;letter-spacing:0.6px}
.brand-slogan{font-size:0.85rem;color:var(--accent-2);font-weight:700}

/* Nav */
.nav-links{display:flex;gap:16px;list-style:none}
.nav-links a{color:var(--white);text-decoration:none;font-weight:700;padding:8px;border-radius:8px}
.nav-links a:hover{background:rgba(255,255,255,0.04)}

/* Menu button for mobile */
.menu-btn{display:none;background:transparent;border:0;color:var(--white);font-size:22px;cursor:pointer}

/* Hero */
.hero{
  min-height:86vh;
  display:flex;align-items:center;justify-content:center;color:var(--white);
  background-image: url('images/hero.jpg');
  background-size:cover;background-position:center center;position:relative;
}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(3,37,69,0.45), rgba(3,37,69,0.45));}
.hero-inner{position:relative;text-align:center;padding:40px 20px;z-index:2;max-width:900px}
.hero-title{font-size:48px;letter-spacing:1px;margin-bottom:6px;font-weight:900;color:var(--white);text-shadow:0 6px 24px rgba(0,0,0,0.45)}
.hero-sub{font-size:22px;margin-bottom:10px;color:var(--accent-2);font-weight:800}
.hero-rotating{color:var(--white);margin-bottom:18px;font-size:16px;opacity:0.95}
.hero-cta .btn{margin:6px}

/* Buttons */
.btn{display:inline-block;padding:10px 18px;border-radius:10px;font-weight:700;text-decoration:none;border:0;cursor:pointer}
.btn.primary{background:var(--accent-1);color:var(--white);box-shadow:0 6px 18px rgba(255,122,0,0.18)}
.btn.ghost{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,0.08)}
.btn.accent{background:linear-gradient(90deg,var(--accent-1),var(--accent-2));color:var(--dark-blue)}
.btn.primary:hover, .btn.accent:hover{transform:translateY(-3px);transition:all .18s ease}

/* Sections */
.section{padding:48px 0}
.section-title{font-size:22px;color:var(--white);margin-bottom:16px;font-weight:800}

/* grid */
.grid{display:grid;gap:18px}
.services-grid{grid-template-columns:repeat(3,1fr);align-items:stretch;gap:18px}
@media(max-width:1100px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.services-grid{grid-template-columns:1fr}}

/* Cards */
.card{background:rgba(255,255,255,0.03);padding:18px;border-radius:12px;color:var(--white);box-shadow:0 6px 18px rgba(0,0,0,0.25)}
.service-card{font-weight:800;min-height:90px;display:flex;align-items:center;justify-content:center;padding:22px}
.sky{background:linear-gradient(135deg,#3b82f6,#60a5fa);color:#fff}
.gold{background:linear-gradient(135deg,#ff7a00,#ffb74d);color:#fff}
.navy{background:linear-gradient(135deg,#0f172a,#1e3a8a);color:#fff}
.gray{background:linear-gradient(135deg,#6b7280,#9ca3af);color:#fff}
.orange{background:linear-gradient(135deg,#ff8a50,#ffb76b);color:#fff}
.purple{background:linear-gradient(135deg,#7c3aed,#b794f4);color:#fff}

/* Booking */
.booking-grid{display:grid;grid-template-columns:1fr 360px;gap:18px;align-items:start}
@media(max-width:900px){.booking-grid{grid-template-columns:1fr}}
.form label{display:block;margin-bottom:12px;font-size:0.95rem;color:var(--white)}
.form input,.form textarea{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.08);background:transparent;color:var(--white)}
.form textarea{resize:vertical}
.form .btn{width:100%;margin-top:8px}

/* Payment */
.payment-card{max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.payment-card input{padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--white)}

/* FAQs */
.faq-list{display:grid;gap:20px}
.faq-item h4{color:var(--accent-1);margin-bottom:8px;font-weight:800}
.faq-item p{color:#fff;line-height:1.6}

/* Testimonials */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:900px){.testimonials-grid{grid-template-columns:1fr}}
.quote{font-size:1rem;color:#fff;line-height:1.6}
.who{font-weight:800;color:var(--accent-2)}

/* CEO */
.ceo-card p{color:#fff;line-height:1.6}
.ceo-sign{margin-top:12px;color:var(--white);font-weight:900; font-size:1rem}

/* Footer */
.site-footer{background:var(--dark-blue);color:var(--white);padding:18px 0;margin-top:18px}
.footer-grid{display:flex;justify-content:space-between;align-items:center}
@media(max-width:700px){.footer-grid{flex-direction:column;gap:12px;text-align:center}}

/* Floating whatsapp (left) and make space to avoid covering contact */
.whatsapp-fab{position:fixed;left:18px;bottom:20px;background:transparent;border-radius:50%;z-index:1000;box-shadow:0 6px 20px rgba(0,0,0,0.25);display:flex;align-items:center;justify-content:center;animation:whPulse 2.6s infinite}
.whatsapp-fab img{height:56px;width:56px;display:block;border-radius:50%}

/* small response text */
.form-response{margin-top:10px;color:var(--accent-2);font-weight:700}

/* Colored backgrounds for sections */
.colored-bg{background:linear-gradient(135deg, rgba(255,122,0,0.06), rgba(255,209,56,0.03));padding:28px;border-radius:12px}
.colored-bg-2{background:linear-gradient(135deg, rgba(9,74,142,0.06), rgba(255,122,0,0.03));padding:28px;border-radius:12px}
.colored-bg-3{background:linear-gradient(135deg, rgba(3,37,69,0.06), rgba(255,209,56,0.02));padding:28px;border-radius:12px}
.colored-bg-4{background:linear-gradient(135deg, rgba(255,122,0,0.04), rgba(3,37,69,0.02));padding:28px;border-radius:12px}

/* Responsive adjustments */
@media(max-width:900px){
  .nav-links{display:none;position:absolute;top:66px;right:20px;background:var(--dark-blue);padding:12px;border-radius:10px;flex-direction:column;gap:8px}
  .menu-btn{display:block}
  .brand-name{font-size:1rem}
  .hero-title{font-size:34px}
  .hero-sub{font-size:18px}
  .services-grid{grid-template-columns:1fr}
  .testimonials-grid{grid-template-columns:1fr}
}

/* Remove white lines that might appear around logo image in some browsers */
.brand-logo{background:transparent;border:0;outline:0}

/* subtle whatsapp pulse animation */
@keyframes whPulse{
  0%{ transform:scale(1); box-shadow:0 6px 18px rgba(37,211,102,0.12)}
  50%{ transform:scale(1.06); box-shadow:0 12px 30px rgba(37,211,102,0.18)}
  100%{ transform:scale(1); box-shadow:0 6px 18px rgba(37,211,102,0.12)}
}

/* ensure contact information not covered by whatsapp icon on small screens */
@media(max-width:420px){
  .footer-grid{padding-bottom:80px}
}