/* Light & clean theme v2 */
:root{
  --primary:#0d6efd; --accent:#0ea5ff; --muted:#6b7280; --bg:#f8fbff; --card:#ffffff;
  --radius:10px;
}
*{box-sizing:border-box} body{font-family:Inter, system-ui, Arial, sans-serif; margin:0; background:var(--bg); color:#222; -webkit-font-smoothing:antialiased;}
.container{max-width:1100px;margin:0 auto;padding:0 16px;}
.site-header{background:linear-gradient(135deg,var(--primary),var(--accent));color:white;}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;}
.logo{width:200px;height:auto;border-radius:8px;background:#fff;padding:4px;}
.brand-text h1{margin:0;font-size:18px;} .tag{margin:0;font-size:13px;opacity:0.95;}
.brand-text {display:none;}
.nav-toggle{display:none;background:transparent;border:0;color:#fff;font-size:20px}

/* header CTAs */
.header-ctas .btn{display:inline-block;padding:8px 12px;border-radius:8px;background:#0d6efd;color:white;font-weight:600;margin-left:6px;text-decoration:none}
.header-ctas .btn.wa{background:#25D366;color:white}

/* nav */
.main-nav{background:#ffffff;box-shadow:0 6px 18px rgba(13,110,253,0.06);position:sticky;top:0;z-index:60;}
.nav-inner{display:flex;gap:12px;align-items:center;justify-content:center;padding:10px;}
.nav-link{padding:8px 12px;color:var(--muted);text-decoration:none;}

/* hero slider */
.hero{margin:18px auto;}
.slider{position:relative;overflow:hidden;border-radius:var(--radius);box-shadow:0 10px 30px rgba(2,6,23,0.08);}
.slides{position:relative;height:420px;}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;display:flex;align-items:center;justify-content:flex-start}
.slide img{width:100%;height:420px;object-fit:cover;display:block;filter:contrast(0.95)}
.slide-caption{position:absolute;left:20px;bottom:28px;background:rgba(255,255,255,0.95);padding:14px 18px;border-radius:8px;box-shadow:0 8px 24px rgba(2,6,23,0.08);max-width:60%}
.slide-caption h2{margin:0;color:var(--primary);font-size:20px}
.prev,.next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.45);color:white;border:0;width:44px;height:44px;border-radius:50%;cursor:pointer}
.prev{left:12px}.next{right:12px}
.dots{position:absolute;right:18px;bottom:14px;display:flex;gap:8px}
.dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.7);border:none}
.dot.active{background:var(--primary)}

/* sections */
.card{background:var(--card);border-radius:var(--radius);padding:18px;margin:18px 0;box-shadow:0 8px 20px rgba(2,6,23,0.04)}
h2{color:var(--primary)}
.service-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.service-list li{background:#f0fbff;padding:8px 12px;border-radius:8px;font-weight:600;color:#044e8c}

/* buttons */
.btn{display:inline-block;background:var(--primary);color:white;padding:9px 14px;border-radius:8px;text-decoration:none;font-weight:600}
.btn.outline{background:transparent;color:var(--primary);border:2px solid rgba(13,110,253,0.08)}

/* gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.gallery-grid img{width:100%;height:160px;object-fit:cover;border-radius:8px;box-shadow:0 8px 18px rgba(2,6,23,0.06);transition:transform .25s}
.gallery-grid img:hover{transform:scale(1.03)}

/* reviews */
.review{padding:12px;border-radius:8px;background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:0 6px 16px rgba(2,6,23,0.04);margin-bottom:12px}
.stars{color:#f6c400;font-size:18px}

/* contact */
.map-container iframe{width:100%;height:320px;border-radius:8px;border:0;margin-top:10px}

/* booking form */
.booking-form{display:flex;flex-direction:column;gap:10px}
.booking-form input, .booking-form select, .booking-form textarea{padding:10px;border-radius:8px;border:1px solid #e6eefb;background:#fbfeff;font-size:15px}

/* footer */
.site-footer { background: #004466; color: white; text-align: center; padding: 10px;margin-top:20px }

/* floating whatsapp */
.whatsapp-floating{position:fixed;right:18px;bottom:18px;background:#25D366;color:#fff;padding:14px;border-radius:50%;font-size:20px;text-decoration:none;box-shadow:0 8px 30px rgba(2,6,23,0.12)}

/* responsive */
@media (max-width:880px){
  .header-inner{flex-direction:row;align-items:center}
  .slides{height:280px}.slide img{height:280px}
  .slide-caption{max-width:80%;left:12px;right:12px}
  .nav-toggle{display:block}
  .nav-inner{flex-wrap:wrap;gap:6px}
}
@media (max-width:480px){
  .slides{height:220px}.slide img{height:220px}
  .brand-text h1{font-size:16px}.tag{font-size:12px}
  .slide-caption h2{font-size:16px}
  .header-ctas{display:none}
  .nav-inner{flex-direction:column}
  .nav-link{padding:10px;width:100%;text-align:center}
}
/* ---------- HEADER & NAV ---------- */
.site-header {
  background: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
}
.logo {
  height: 48px;
  margin-right: 8px;
}
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #002b5b;
}
.brand-text h1 {
  font-size: 1.3rem;
  margin: 0;
}
.brand-text .tag {
  font-size: 0.8rem;
  color: #555;
  margin: 0;
}

/* Desktop CTA buttons */
.header-ctas a {
  background: #0078ff;
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  margin-left: 6px;
  text-decoration: none;
  font-size: 0.9rem;
}

.header-ctas .wa {
  background: #25D366;
}

.footer-list li{
	line-height:2rem;
	text-align: left;
	margin-left: 5rem;
	}
	
.footer-list li a{
	text-decoration: none;
    font-weight:600px;
	color: white;
	}
/* ---------- NAV MENU ---------- */
.main-nav {
  display: flex;
  justify-content: center;
  background: #002b5b;
}
.main-nav a {
  color: #fff;
  text-decoration: none;
  padding: 12px 20px;
  display: block;
}
.main-nav a:hover {
  background: #77bfff;
}

/* ---------- MOBILE STYLES ---------- */
.nav-toggle {
  background: none;
  border: none;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 3px;
  width: 100%;
  background: #002b5b;
  border-radius: 3px;
  transition: all 0.3s;
}
 .accordion{
  display:flex;
  flex-direction:column;
  gap:.5rem
}
  .accordion .accordion-item{
	  border:2px solid #0d6efd;
	  border-radius:.5rem;
	  transition:.2s linear
}
.accordion button{
	position:relative;
	display:flex;
	align-items:center;
	text-align:left;
	gap:.75rem;
	width:100%;
	padding:1rem!important;
	font-size:1.15rem;
	font-weight:400;
	border:none;
	background:#f5f5f5;
	outline:0;
	border-radius:.5rem
}
.accordion button .accordion-plus{
	height:1.5rem;
	width:1.5rem;
	transform:rotate(0);
	filter:invert(44%) sepia(95%) saturate(681%) hue-rotate(169deg) brightness(86%) contrast(91%);
	transition:.2s linear
}
.accordion button:focus,
.accordion button:focus *,
.accordion button:hover,
.accordion button:hover *{cursor:pointer
}
.accordion button[aria-expanded=true]{
	border-bottom:1px solid gray;
	border-radius:.5rem .5rem 0 0
	}
.accordion button .accordion-title{
	margin-right:auto
}
.accordion button[aria-expanded=true] .accordion-plus{
	transform:rotate(45deg);
	filter:invert(28%) sepia(94%) saturate(2791%) hue-rotate(343deg) brightness(96%) contrast(121%);
	transition:transform .2s linear
}
.accordion .accordion-content{
	opacity:0;max-height:0;overflow:hidden;transition:.2s linear
}
.accordion button[aria-expanded=true]+.accordion-content{
	opacity:1;
	max-height:20rem;
	transition:.2s linear
}
.accordion .accordion-content p{
	padding:1rem;
	font-size:1rem
}
@media (max-width:450px){*{font-size:1rem}.container h3{font-size:1.2rem}.accordion .accordion-content p{font-size:.9rem}}


@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .main-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 70%;
    height: 100vh;
    background: #002b5b;
    flex-direction: column;
    align-items: start;
    padding: 60px 20px;
    transition: right 0.3s ease-in-out;
  }
  .main-nav.open {
    right: 0;
  }
  .main-nav a {
    padding: 14px 0;
    font-size: 1.1rem;
  }

  .mobile-ctas {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .mobile-ctas .btn {
    width: 100%;
    text-align: center;
    padding: 10px 0;
    font-size: 1rem;
  }

  /* Animate hamburger */
  .nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translateY(8px);
  }
  .nav-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translateY(-8px);
  }
  
}