:root{
  --ocean:#1fb6ff;
  --turquoise:#2ed3c8;
  --sun:#ffb703;
  --coral:#ff6b6b;
  --leaf:#1faa5c;
  --ink:#0b1d26;
  --sand:#fff6e5;
  --white:#ffffff;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#13313a;
  background:url('../images/bg_colou.jpg') center/cover no-repeat fixed;
}

/* Header */
header{position:sticky;top:0;z-index:50;backdrop-filter:blur(8px);background:rgba(255,255,255,.65);border-bottom:1px solid rgba(0,0,0,.06)}
.nav{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand .logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--ocean),var(--turquoise));display:grid;place-items:center;color:white;font-weight:700}
.brand .name{font-weight:800;color:var(--ink);letter-spacing:.5px}
nav a{margin-left:18px;text-decoration:none;color:#0e3a47;font-weight:600}
nav a:hover,nav a.active{color:var(--leaf)}

/* Hero */
.hero{position:relative;min-height:72vh;display:grid;place-items:center;overflow:hidden;color:var(--white);text-align:center}
.hero::before{content:"";position:absolute;inset:0;background:url('../images/hero-zanzibar.jpg') center/cover no-repeat;filter:contrast(1.05) saturate(1.1)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.55))}
.hero-inner{position:relative;z-index:1;padding:0 16px}
.hero h1{font-family:"Playfair Display",serif;font-size:44px;line-height:1.15;margin:16px 0}
.hero p{max-width:760px;margin:0 auto 22px;font-size:18px}

/* Buttons */
.btn{display:inline-block;padding:12px 18px;border-radius:12px;font-weight:700;text-decoration:none;transition:.2s}
.btn.primary{background:linear-gradient(90deg,var(--turquoise),var(--ocean));color:white}
.btn.outline{border:2px solid rgba(255,255,255,.8);color:white}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.15)}

/* Sections */
.section{max-width:1200px;margin:56px auto;padding:0 20px}
.sec-title{display:flex;align-items:baseline;gap:12px;margin-bottom:20px}
.sec-title h2{font-family:"Playfair Display",serif;font-size:34px;margin:0;color:#0d2f38}
.sec-title .line{flex:1;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--sun),transparent)}

/* Grid & Cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}

.card{background:white;border-radius:20px;overflow:hidden;border:1px solid rgba(0,0,0,.06);box-shadow:0 10px 30px rgba(13,47,56,.06);display:flex;flex-direction:column}
.card .img{height:180px;background-size:cover;background-position:center}
.card .content{padding:16px}
.card h3{margin:10px 0 8px}
.card p{margin:0 0 14px}

/* Banner CTA */
.banner{position:relative;margin:64px auto;max-width:1100px;border-radius:24px;overflow:hidden;color:white}
.banner::before{content:"";position:absolute;inset:0;background:url('../images/sunset-boat.jpg') center/cover no-repeat}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.25))}
.banner-inner{position:relative;z-index:1;padding:28px}
.banner h3{margin:0 0 6px;font-family:"Playfair Display",serif;font-size:28px}

/* Footer */
footer{background:linear-gradient(180deg,#e8fff7,#fff);border-top:1px solid rgba(0,0,0,.06);margin-top:64px}
.foot{max-width:1200px;margin:0 auto;padding:24px 20px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.foot h4{margin:0 0 10px}
.foot a{color:#0e3a47;text-decoration:none}
.foot a:hover{color:var(--leaf)}
.copy{border-top:1px solid rgba(0,0,0,.06);padding:14px 20px;text-align:center;color:#3a5961}
@media (max-width:820px){.foot{grid-template-columns:1fr}}

/* Logo Overrides */
.logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
}

.logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Instagram Link */
.insta-link {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-weight: 600;
  color: #e1306c;
}
.insta-link:hover {
  color: #b02050;
}