/* ========== Scuba Vida – Starter Styles ========== */

:root{
  --ocean:#0077B6;
  --aqua:#00B4D8;
  --coral:#FF6F61;
  --dark:#333333;
  --light:#F5F5F5;
  --white:#FFFFFF;

  --radius:12px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--dark);
  font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
  background:var(--white);
}

/* Typography */
h1,h2,h3{
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.25;
  margin:0 0 .6rem;
}
h1{font-size:2.25rem}         /* 36px desktop */
h2{font-size:1.75rem}         /* 28px desktop */
h3{font-size:1.25rem}         /* 20px desktop */
p,li{font-size:1rem}          /* 16px */
.sub{opacity:.95}

@media (max-width: 768px){
  h1{font-size:1.6rem}        /* 25-26px mobile */
  h2{font-size:1.35rem}
  h3{font-size:1.125rem}
  p,li{font-size:0.95rem}
}

/* Layout helpers */
.container{width:min(1100px,92%); margin-inline:auto}
.section{padding:64px 0}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:32px}
@media (max-width: 900px){ .grid-2{grid-template-columns:1fr} }

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--white); border-bottom:1px solid #e9e9e9;
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.logo img{height:36px}
.nav-toggle{display:none; background:none; border:none; font-size:1.5rem}
.nav-menu{display:flex; gap:22px; align-items:center; list-style:none; margin:0; padding:0}
.nav-menu a{color:var(--dark); text-decoration:none; font-weight:600}
@media (max-width: 900px){
  .nav-toggle{display:block}
  .nav-menu{position:absolute; right:4%; top:64px; flex-direction:column; background:var(--white); border:1px solid #e9e9e9; padding:16px; border-radius:10px; display:none}
  .nav-menu.open{display:flex}
}

/* Hero */
.hero{
  background:linear-gradient(180deg, var(--ocean) 0%, #0a87c9 100%);
  color:var(--white);
  position:relative;
  padding-top:24px;
}
.hero-inner{
  display:grid; gap:28px; grid-template-columns:1.2fr .8fr; align-items:center; padding:40px 0 80px;
}
.hero-media{border-radius:var(--radius); background:rgba(255,255,255,.08); min-height:220px; display:flex; align-items:center; justify-content:center}
.media-placeholder{opacity:.9; padding:24px; border:1px dashed rgba(255,255,255,.7); border-radius:10px; text-align:center}
.hero-ctas{display:flex; gap:12px; margin-top:14px}
@media (max-width: 900px){ .hero-inner{grid-template-columns:1fr} }

.trust-bar{background:var(--aqua)}
.trust-inner{display:flex; align-items:center; gap:10px; justify-content:center; padding:10px 0}
.stars{font-weight:700}
.trust-text{font-weight:700; color:#073b4c}

/* Buttons */
.btn{display:inline-block; padding:.9rem 1.2rem; border-radius:10px; text-decoration:none; font-weight:700; transition:.2s}
.btn-primary{background:var(--ocean); color:var(--white)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-accent{background:var(--coral); color:var(--white)}
.btn-accent:hover{filter:brightness(1.05)}
.btn-outline{border:2px solid var(--white); color:var(--white)}
.hero .btn-outline{border-color:var(--white); color:var(--white)}
.section .btn-outline{border-color:var(--ocean); color:var(--ocean)}
.section .btn-outline:hover{background:var(--ocean); color:var(--white)}

/* About */
.about .img-frame{border-radius:var(--radius); background:var(--light); min-height:220px; display:flex; align-items:center; justify-content:center}
.about .media-placeholder{border-color:#cdd6da; color:#6b7a80}

/* Services */
.services{background:var(--light)}
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:18px}
.card{background:var(--white); border:1px solid #e5e5e5; border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:10px}
.card-media{border-radius:8px; background:var(--light); min-height:60px; display:flex; align-items:center; justify-content:center}
.card .btn{align-self:flex-start}
@media (max-width: 1000px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 560px){ .cards{grid-template-columns:1fr} }

/* Why Choose Us */
.why ul{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; list-style:none; margin:18px 0 0; padding:0}
.why li{border:1px solid #e5e5e5; border-radius:12px; padding:14px}
.why .icon{width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:var(--aqua); margin-bottom:8px}
@media (max-width: 1000px){ .why ul{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 560px){ .why ul{grid-template-columns:1fr} }

/* Reviews */
.reviews{background:var(--aqua)}
.quotes{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin:18px 0}
blockquote{background:var(--white); border:1px solid #e5e5e5; border-radius:12px; padding:14px; margin:0}
cite{display:block; margin-top:8px; color:#666}
@media (max-width: 900px){ .quotes{grid-template-columns:1fr} }

/* Gallery */
.grid-photos{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px}
.photo{background:var(--white); border:1px solid #e5e5e5; border-radius:8px; min-height:80px; display:flex; align-items:center; justify-content:center}
@media (max-width: 900px){ .grid-photos{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 560px){ .grid-photos{grid-template-columns:1fr} }

/* CTA */
.cta{background:var(--coral); color:var(--white); text-align:center}
.cta .btn-accent{background:var(--ocean)}

/* Footer */
.site-footer{background:var(--dark); color:var(--white)}
.footer-inner{display:grid; grid-template-columns:2fr 1fr 1fr; gap:20px; padding:30px 0}
.footer-inner a{color:var(--white); text-decoration:none}
.footer-inner ul{list-style:none; padding:0; margin:8px 0 0}
.socials{display:grid; gap:6px}
.copyright{border-top:1px solid rgba(255,255,255,.14); padding:14px 0 24px; font-size:.95rem}
@media (max-width: 900px){ .footer-inner{grid-template-columns:1fr} }

/* Language toggle styles */
.lang-toggle {
  margin-left: 10px;
  font-weight: bold;
  color: var(--coral);
}
.lang-toggle:hover {
  color: var(--ocean);
}

/* Flag toggle styles */
.lang-toggle a {
  font-size: 1.2rem;
  margin-left: 10px;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.lang-toggle a:hover {
  transform: scale(1.2);
  opacity: 0.8;
}


/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}


/* Map container styling */
.map-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto 20px auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}


/* Google Maps button styling */
.map-button {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 18px;
  background: #0077cc;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  transition: background 0.3s ease;
}

.map-button:hover {
  background: #005fa3;
}


/* Ensure spacing for buttons */
.btn {
  margin-top: 10px;
}


/* Back to Top button styling */


/* Back to Top button positioning */


/* Hide Back to Top text on small screens */
@media (max-width: 600px) {
}

/* Back to Top button with fade in/out */
#backToTop {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* When active, fade in */
#backToTop.show {
  opacity: 1;
  visibility: visible;
}


/* Blog styles */
.blog-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px;
}

.blog-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  padding: 15px;
  text-align: center;
}

.blog-card img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 10px;
}

.blog-post {
  max-width: 800px;
  margin: auto;
  padding: 20px;
}

.blog-post .featured-image {
  width: 100%;
  border-radius: 8px;
  margin: 20px 0;
}

.blog-post .meta {
  color: #777;
  font-size: 0.9em;
  margin-bottom: 10px;
}


/* Latest Blog section */
.latest-blog {
  padding: 40px 20px;
  text-align: center;
}
.latest-blog h2 {
  margin-bottom: 20px;
}
.latest-blog .blog-card {
  max-width: 600px;
  margin: 0 auto 20px;
}


/* Latest Blog section styled */
.latest-blog {
  padding: 50px 20px;
  text-align: center;
  background: #e6f7ff; /* light ocean blue */
}

.latest-blog h2 {
  margin-bottom: 20px;
  color: #004466; /* darker blue for contrast */
}

.latest-blog .blog-card {
  max-width: 600px;
  margin: 0 auto 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}