/* Basic reset */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Segoe UI,Roboto,Arial,sans-serif;line-height:1.5;color:#222}
.container{max-width:1000px;margin:0 auto;padding:1rem}

/* Header / Nav */
.site-header{
  background: linear-gradient(135deg, #0a3d62 0%, #16213e 100%);
  box-shadow: 0 4px 12px rgba(10, 61, 98, 0.15);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 3px solid #4fc3f7;
}
.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  max-width: 1400px;
  margin: 0 auto;
}
.brand{
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: all 0.3s ease;
}
.brand:hover{
  color: #4fc3f7;
  transform: translateY(-2px);
}
.brand img{
  height: 40px;
  width: auto;
  display: inline-block;
  filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.1));
}
.nav-links{
  list-style: none;
  display: flex;
  gap: 2rem;
}
.nav-links a{
  color: #e0f2f1;
  text-decoration: none;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
}
.nav-links a::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: #4fc3f7;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.nav-links a:hover{
  color: #fff;
  background: rgba(79, 195, 247, 0.1);
}
.nav-links a:hover::after{
  width: 100%;
}
.nav-toggle{
  display: none;
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  color: #fff;
  cursor: pointer;
  transition: color 0.3s ease;
}

/* Hero - full-viewport background image while keeping content constrained to container */
.hero{position:relative;padding:0;height:100vh;min-height:520px;display:block}
.hero-inner{position:relative;display:flex;align-items:center;height:100%;max-width:1000px;margin:0 auto;padding:1.25rem}
.hero-bg{position:absolute;inset:0;left:50%;transform:translateX(-50%);width:100vw;height:100vh;overflow:hidden;border-radius:0;z-index:1}
.hero-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}
.hero-overlay{position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(180deg,rgba(10,61,98,0.12) 0%, rgba(6,15,30,0.6) 72%);pointer-events:none;border-radius:0;z-index:2}
.hero-content{position:relative;z-index:5;color:#fff;padding:1rem;max-width:580px}
.hero-content h1{font-size:2.8rem;margin-bottom:0.25rem;line-height:1.05}
.hero-content p{max-width:44rem;font-size:1.05rem}

.hero-content h1, .hero-content p{ text-shadow: 0 3px 18px rgba(0,0,0,0.6); }

.hero-cta{position:relative;z-index:6;margin-top:12px}
.hero-cta{position:absolute;left:32px;bottom:32px;z-index:6}
.hero-cta .hero-cta-card{
  background: rgba(6,15,30,0.68); /* slightly darker for full-bleed backgrounds */
  backdrop-filter: blur(6px);
  padding: 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 10px 30px rgba(6,15,30,0.45);
}
.hero-cta .cta-buttons{display:flex;gap:0.75rem;align-items:center}
.hero-cta .btn{padding:14px 22px;font-size:1.06rem;border-radius:8px}

/* Entrance animation: slide up + fade */
@keyframes slideFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-cta{animation:slideFadeUp 480ms cubic-bezier(.16,.84,.3,1) 180ms both}
@media (prefers-reduced-motion: reduce){
  .hero-cta{animation:none}
}
@media (max-width:800px){
  /* Mobile / tablet adjustments for hero and CTA */
  .hero-inner{display:block;padding:1rem}
  .hero{height:70vh;min-height:360px}
  .hero-bg{height:70vh}
  .hero-bg img{height:100%}
  .hero-content{position:relative;left:auto;top:auto;padding:1rem;margin-top:-80px;background:linear-gradient(180deg,rgba(10,61,98,0.65),rgba(10,61,98,0.18));border-radius:8px;z-index:5}

  .hero-cta{position:relative;left:auto;bottom:auto;margin-top:12px;display:flex;justify-content:center}
  .hero-cta .hero-cta-card{width:100%;padding:10px}
  .hero-cta .cta-buttons{flex-direction:column;width:100%}
  .hero-cta .btn{width:100%}
}

/* Mobile: pin CTA as a bottom floating card so buttons are visible immediately */
@media (max-width:600px){
  .cta-section{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 32px);
    max-width: 720px;
    padding: 12px;
    margin: 0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(6,15,30,0.16);
    background: linear-gradient(135deg, #ffffff, #f7fbff);
    z-index: 140;
  }
  /* Make room so fixed CTA doesn't overlay content */
  body{padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));}
}

/* Target modern large phones (example: Galaxy S24 Ultra width ~412-430 CSS px) */
@media (max-width: 430px){
  /* Reduce hero height a bit to account for mobile browser chrome and keep CTA visible */
  /* On modern phones show the full hero image (no cropping) */
  .hero{height:auto;min-height:0;padding-bottom:0}
  .hero-bg{position:relative;height:auto}
  .hero-bg img{object-fit:contain;height:auto;max-height:62vh;width:100%;object-position:center top}

  /* Make hero content readable as a compact card that overlaps the image slightly */
  .hero-inner{padding:0.75rem}
  .hero-content{
    position:relative;
    z-index:6;
    margin:0 auto;
    transform:none;
    background:linear-gradient(180deg, rgba(6,15,30,0.75), rgba(6,15,30,0.18));
    padding:0.9rem 1rem;
    border-radius:10px;
    width:calc(100% - 1.5rem);
    box-shadow:0 6px 18px rgba(0,0,0,0.3);
  }
  .hero-content h1{font-size:1.6rem}
  .hero-content p{font-size:0.98rem}

  /* Place CTA under the content card but still overlapping slightly so it's prominent */
  .hero-cta{position:relative;z-index:6;transform:translateY(-8%);margin:0 auto;display:flex;justify-content:center}
  .hero-cta .hero-cta-card{width:100%;padding:12px;display:flex;flex-direction:column;gap:0.5rem}
  .hero-cta .btn{width:100%;padding:14px 16px;font-size:1rem}

  /* Improve hit targets and spacing for icons/buttons */
  .icon, .icon-phone, .icon-location, .icon-whatsapp-label, .icon-map{width:28px;height:28px}

  /* Slightly smaller carousel images so page length feels balanced on tall phones */
  .carousel-slide img{height:200px;object-fit:cover}
}

/* Very small phones: make hero compact and carousel images smaller so images start showing on load */
@media (max-width:360px){
  .hero{height:46vh;min-height:220px}
  .hero-bg{height:46vh}
  .carousel-slide img{height:160px;object-fit:cover}
  /* Pull carousel slightly up to show the top of images on very small viewports */
  .carousel{margin-top:-8px}
}
@media (max-width:430px){
  /* When hero expands to contain the full image, ensure carousel sits below it with breathing room */
  .carousel{margin-top:12px}
}

/* Tablet tweaks (between 431px and 800px) */
@media (min-width:431px) and (max-width:800px){
  .hero{height:68vh;min-height:340px}
  .hero-bg{height:68vh}
  .hero-bg img{object-position:center 20%}
  .hero-content h1{font-size:1.9rem}
}
/* Intro / sections */
.intro h2{margin-top:1rem;color:#0a3d62}
.intro p, blockquote{margin-top:0.5rem}
blockquote{border-left:4px solid #0a3d62;padding:0.5rem 1rem;background:#f9fbff}

/* CTA Section */
.cta-section{
  margin-top: 2.5rem;
  padding: 2rem;
  background: linear-gradient(135deg, #f0f8ff 0%, #e6f4ff 100%);
  border-radius: 8px;
  text-align: center;
  border-left: 5px solid #0a3d62;
}
.cta-section h2{
  margin-top: 0;
  color: #0a3d62;
  font-size: 1.75rem;
}
.cta-section p{
  color: #555;
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
}
.cta-buttons{
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  font-size: 1rem;
}
.btn-primary{
  background: #0a3d62;
  color: #fff;
}
.btn-primary:hover{
  background: #052a47;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(10, 61, 98, 0.3);
}
.btn-whatsapp{
  background: #25D366;
  color: #fff;
}
.btn-whatsapp:hover{
  background: #20BA58;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(37, 211, 102, 0.3);
}
.icon-btn{
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Responsive CTA buttons and small-screen hero adjustments */
@media (max-width: 480px){
  .hero{height:60vh;min-height:260px}
  .hero-bg{height:60vh}
  .hero-content{margin-top:-70px;padding:0.75rem}
  .hero-content h1{font-size:1.35rem}
}

@media (max-width: 600px){
  .cta-section{
    padding: 1.5rem 1rem;
    margin-top: 2rem;
  }
  .cta-section h2{
    font-size: 1.4rem;
  }
  .cta-section p{
    font-size: 0.95rem;
  }
  .cta-buttons{
    flex-direction: column;
    gap: 0.75rem;
  }
  .btn{
    width: 100%;
    justify-content: center;
    padding: 10px 16px;
    font-size: 0.95rem;
  }
}

/* Ensure CTA card and buttons display correctly when CTA is moved out of .hero */
.cta-section .hero-cta-card{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  background: rgba(6,15,30,0.06);
}
.cta-section .cta-buttons{display:flex;gap:0.75rem;align-items:center;justify-content:center}
.cta-section .btn{padding:12px 18px;font-size:1rem;border-radius:8px}

@media (max-width:600px){
  .cta-section .hero-cta-card{flex-direction:column;padding:12px}
  .cta-section .cta-buttons{flex-direction:column;width:100%}
  .cta-section .btn{width:100%;display:inline-block}
  .cta-section .btn + .btn{margin-top:0.5rem}
}

/* Carousel */
.carousel{position:relative;margin-top:1.5rem;padding:0;overflow:hidden;border-radius:8px;}
.carousel-track{display:flex;width:100%;transition:transform 0.5s ease-in-out;}
.carousel-slide{min-width:100%;flex-shrink:0;position:relative;}
.carousel-slide img{display:block;width:100%;height:320px;object-fit:cover;}
.carousel-caption{position:absolute;left:16px;bottom:20px;color:#fff;background:linear-gradient(180deg,rgba(10,61,98,0.6),rgba(10,61,98,0.4));padding:12px;border-radius:8px;max-width:70%;}
.carousel-caption h3{margin:0 0 6px 0;font-size:1.1rem}
.carousel-caption p{margin:0;font-size:0.95rem;opacity:0.95}

@media (max-width:600px){
  .carousel-caption{left:10px;right:10px;max-width:calc(100% - 20px);padding:10px}
  .carousel-caption h3{font-size:1rem}
  .carousel-caption p{font-size:0.9rem}
}
.carousel-control{position:absolute;top:50%;transform:translateY(-50%);background:rgba(10,61,98,0.7);color:#fff;border:0;padding:0.5rem 0.8rem;border-radius:6px;cursor:pointer}
.carousel-control.prev{left:8px}
.carousel-control.next{right:8px}
.carousel-indicators{display:flex;gap:0.5rem;position:absolute;left:50%;transform:translateX(-50%);bottom:12px}
.carousel-indicators button{width:10px;height:10px;border-radius:50%;border:0;background:rgba(255,255,255,0.6);cursor:pointer}
.carousel-indicators button.active{background:#fff}

/* Form */
.form{margin-top:1rem;display:grid;gap:0.75rem}
.form-row{display:flex;flex-direction:column}
label{font-size:0.95rem;margin-bottom:0.25rem}
input,textarea{padding:0.5rem;border:1px solid #cfcfcf;border-radius:6px;font-size:1rem}
.btn{background:#0a3d62;color:#fff;border:0;padding:0.6rem 1rem;border-radius:6px;cursor:pointer}
.btn:disabled{opacity:0.6;cursor:not-allowed}
.form-status{margin-top:0.5rem}

/* contact icons */
.icon{
  vertical-align: middle;
  margin-right: 12px;
  width: 28px;
  height: 28px;
  display: inline-block;
}
.map-link{
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
}
.icon-phone{
  width: 28px;
  height: 28px;
}
.icon-location{
  width: 28px;
  height: 28px;
}
.icon-map{
  width: 28px;
  height: 28px;
}
.icon-whatsapp-label{
  width: 28px;
  height: 28px;
  vertical-align: middle;
  margin-right: 12px;
  display: inline-block;
}
.whatsapp-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 6px;
  background: #25D366;
  color: #fff;
  font-weight: 500;
  transition: all 0.3s ease;
  transform: scale(1);
}
.whatsapp-link:hover{
  background: #20BA58;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
}
.whatsapp-link .icon-whatsapp-btn{
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* Responsive WhatsApp icons */
@media (max-width: 600px){
  .icon{
    width: 24px;
    height: 24px;
    margin-right: 10px;
  }
  .icon-phone,
  .icon-location,
  .icon-map{
    width: 24px;
    height: 24px;
  }
  .icon-whatsapp-label{
    width: 24px;
    height: 24px;
    margin-right: 10px;
  }
  .whatsapp-link{
    padding: 8px 12px;
    gap: 8px;
    font-size: 0.95rem;
  }
  .whatsapp-link .icon-whatsapp-btn{
    width: 24px;
    height: 24px;
  }
}

/* responsive map embed */
.map-embed{margin-top:1rem}
/* Responsive map container: prefers aspect-ratio; fallback uses padding-top technique */
.map-responsive{
  width:100%;
  border-radius:8px;
  overflow:hidden;
  /* modern browsers */
  aspect-ratio: 16 / 9;
  position: relative;
}
.map-responsive iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Fallback for browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 16/9){
  .map-responsive{height:0;padding-top:56.25% /* 9/16 */}
  .map-responsive iframe{position:absolute;left:0;top:0;height:100%;width:100%}
}

/* Footer */
.site-footer{border-top:1px solid #e6e6e6;padding:1rem;margin-top:2rem;text-align:center}

/* Responsive */
@media (max-width:800px){
  .nav-links{
    position: fixed;
    right: 0;
    top: 70px;
    background: linear-gradient(135deg, #0a3d62 0%, #16213e 100%);
    flex-direction: column;
    padding: 1.5rem 1rem;
    border-left: 3px solid #4fc3f7;
    width: 250px;
    height: calc(100% - 70px);
    transform: translateX(100%);
    transition: transform 0.25s;
    box-shadow: -4px 0 12px rgba(10, 61, 98, 0.2);
  }
  .nav-links.open{
    transform: translateX(0);
  }
  .nav-links a{
    color: #e0f2f1;
    padding: 1rem 0.75rem;
    border-left: 3px solid transparent;
    padding-left: 1rem;
  }
  .nav-links a:hover{
    background: rgba(79, 195, 247, 0.15);
    border-left-color: #4fc3f7;
  }
  .nav-toggle{
    display: block;
  }
  .nav-toggle:hover{
    color: #4fc3f7;
  }
  .hero{height:40vh}
}

/* Accessibility focus */
a:focus,input:focus,button:focus,textarea:focus{outline:3px solid #bcdfff;outline-offset:2px}