:root{
  --primary:#00c4cc;
  --secondary:#8a2be2;
  --text:#e0f7fa;
  --light-text:#a0d6e8;
  --dark-bg:rgba(1,2,2,0.74);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Roboto,Arial,sans-serif;
  color:var(--text);
  background:url('images/whale303.jpg') center/cover no-repeat fixed;
}
.header, header{display:flex;justify-content:space-between;align-items:center;padding:15px 5%;position:fixed;top:0;width:100%;z-index:100;background:transparent;backdrop-filter:blur(4px)}
.logo a{color:var(--primary);text-decoration:none;font-weight:600;display:flex;gap:8px;align-items:center}
.nav-menu{display:flex;gap:14px}
.nav-menu a{color:var(--light-text);text-decoration:none}
.main-content, main{padding:100px 5% 50px}
.hero{padding:20px 0;text-align:center}
.contact-card{background:var(--dark-bg);padding:12px;border-radius:10px;display:flex;flex-direction:column;gap:6px;align-items:center}
.btn{padding:10px 20px;border-radius:20px;text-decoration:none}
.blog-button{color:var(--primary);border:2px solid var(--primary)}
.book-now{background:linear-gradient(45deg,var(--primary),var(--secondary));color:#fff}
.tour-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;margin-top:20px;padding:25px;max-width:1200px;margin-left:auto;margin-right:auto}
.card{background:var(--dark-bg);padding:15px;border-radius:10px}
footer{background:var(--dark-bg);padding:20px;margin-top:20px;text-align:center}
.social-media{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:12px;z-index:1000}
.social-media a{width:44px;height:44px;background:var(--dark-bg);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:transform 0.18s ease, background 0.18s ease;box-shadow:0 3px 10px rgba(0,0,0,0.35);padding:6px}
.social-media a:hover{transform:translateY(-3px) scale(1.04);background:rgba(0,196,204,0.12)}
.social-media img,.social-media svg{width:22px;height:22px;display:block;object-fit:contain}
@media(max-width:768px){
  .nav-menu{display:none}
  .nav-menu.active{display:flex;flex-direction:column;position:fixed;top:60px;left:0;width:100%;background:rgba(0,0,0,0.95);padding:12px 0}
  /* keep header transparent on mobile as requested */
  .header, header{background:transparent}
}

@media(max-width:768px){
  .social-media{flex-direction:row;bottom:10px;right:10px}
  .social-media a{width:38px;height:38px;padding:5px}
  .social-media img,.social-media svg{width:18px;height:18px}
}

/* Accessibility focus styles */
a:focus,button:focus{outline:3px solid rgba(0,196,204,0.6);outline-offset:2px}