:root{
  /* Dark-ocean palette */
  --primary:#0a3d62;      /* deep ocean blue */
  --secondary:#0e7490;    /* teal */
  --accent:#64c1ff;       /* bright sea blue */
  --background:#ffffff;
  --text:#00164b;         /* deep slate */
  --sand:#e0a96d;         /* refined sand/gold */

  --ink:var(--text);
  --card:#ffffff;
  --muted:#667085;
  --muted1:#d7d7d7;
  --radius:14px;
  --shadow:0 12px 36px rgba(3,20,35,.14);
  --shadow-sm:0 8px 20px rgba(3,20,35,.10);
  --shadow-lg:0 24px 60px rgba(3,20,35,.20);
  --container:1140px;
}

/* ------------ Base ------------ */
*{box-sizing:border-box}
html,body{margin:0;padding:0; overflow-x: hidden;}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,Arial,sans-serif;background:var(--background);color:var(--ink);line-height:1.65}
img{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{color:#08405f}
.container{width:min(100% - 2rem, var(--container));margin-inline:auto}

/* ------------ Type Scale ------------ */
.eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.12em;font-weight:600;font-size:.78rem;color:var(--secondary);background:rgba(14,116,144,.10);padding:.35rem .6rem;border-radius:999px}
.h1,h1{font-size:clamp(2.125rem,3vw+1rem,3.5rem);line-height:1.1;margin:.25rem 0 .6rem}
.h2,h2{font-size:clamp(1.6rem,2vw+.75rem,2.4rem);line-height:1.18;margin:.25rem 0 .6rem}
.h3,h3{font-size:clamp(1.2rem,1.2vw+.7rem,1.5rem);margin:.25rem 0 .5rem}
.lead{font-size:clamp(1.05rem,.6vw+1rem,1.2rem);color:#253046}
.muted{color:var(--muted)}
.no-underline::after{display:none !important}
.brand-name{background:linear-gradient(90deg,var(--primary),var(--sand));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}

/* ------------ Buttons ------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1rem 1.6rem;border-radius:12px;background:var(--primary);color:#fff;
  font-weight:600;font-size:1rem;line-height:1.3;min-width:160px;
  box-shadow:var(--shadow-sm);
  transition:transform .18s,box-shadow .18s,background .18s,opacity .18s;
  text-align:center;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow);background:var(--secondary)}
.btn.secondary{background:var(--secondary)}
/* Make ghost visible on light backgrounds */
.btn.ghost{background:transparent;border:1px solid rgba(8,64,95,.18);color:var(--ink)}
/* Hero override keeps ghost light-on-dark */
.hero .btn.ghost{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.38);color:#fff}
.btn.sand{background:var(--sand);color:#1b1206}
.btn.block{width:100%}
.actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:1.1rem}

/* ------------ Navbar ------------ */
.nav{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.82);backdrop-filter:blur(10px);border-bottom:1px solid rgba(8,64,95,.10)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:.85rem 0}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-weight:800;color:var(--primary)}
.brand .dot{width:12px;height:12px;border-radius:50%;background:var(--sand);box-shadow:0 0 0 8px rgba(224,169,109,.22)}
.links{display:flex;align-items:center;gap:1rem}
.links a{color:var(--ink);padding:.55rem .8rem;border-radius:10px}
.links a:hover{background:rgba(8,64,95,.06)}
.menu-toggle{display:none;background:none;border:none;font-size:1.9rem}
@media (max-width:840px){
  .menu-toggle{display:block}
  .links{
    position:fixed;inset:70px 0 auto 0;background:#fff;box-shadow:var(--shadow);
    border-bottom:1px solid rgba(8,64,95,.08);display:grid;gap:.5rem;padding:1rem;
    transform:translateY(-120%);transition:transform .25s;will-change:transform;
  }
  .links.open{transform:translateY(0)}
}

/* ------------ Sections ------------ */
section{padding:clamp(3rem,6vw,6rem) 0}

/* Centered underline only when inside a .section-head (prevents accidental center lines) */
.section-head h2{position:relative;padding-bottom:.4rem}
.section-head h2::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  bottom:-6px;width:82px;height:3px;border-radius:999px;
  background:linear-gradient(90deg,var(--secondary),var(--accent));
  box-shadow:0 6px 14px rgba(14,116,144,.25);
}

/* ------------ Hero ------------ */
.hero{
  position:relative;min-height:86vh;display:grid;place-items:center;text-align:center;color:#fff;overflow:hidden;
  --hero-img:url('https://images.unsplash.com/photo-1682308999971-208126ba75ec?q=80&w=1600&auto=format&fit=crop');
}
.hero::before{content:"";position:absolute;inset:0;background-image:var(--hero-img);background-size:cover;background-position:center;transform-origin:center;animation:heroZoom 20s ease-out forwards}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.06)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,18,30,.66),rgba(2,18,30,.5) 45%,rgba(2,18,30,.45));z-index:1}
.hero .content{position:relative;z-index:2;max-width:900px;padding:1.2rem 1.25rem;margin-inline:auto;background:rgba(2,18,30,.22);border:1px solid rgba(255,255,255,.18);border-radius:12px;backdrop-filter:blur(6px);box-shadow:0 12px 30px rgba(2,18,30,.25)}
.hero h1,.hero h2,.hero p{text-shadow:0 2px 10px rgba(0,0,0,.45)}
/* Hero typography */
.hero h1{
  font-family:'Playfair Display',serif;font-size:clamp(2.8rem,5vw + 1rem,4.2rem);
  font-weight:700;letter-spacing:-.5px;margin-bottom:.5rem;
  background:linear-gradient(90deg,var(--accent),var(--sand));
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;
}
.hero h1::after{
  content:"";display:block;margin:.6rem auto 0;width:70px;height:3px;border-radius:999px;
  background:linear-gradient(90deg,var(--secondary),var(--accent));
  box-shadow:0 6px 14px rgba(14,116,144,.25);
}
.hero h2{
  font-size:clamp(1.4rem,2.2vw + 1rem,2.2rem);font-weight:500;letter-spacing:.5px;
  margin-bottom:1rem;color:var(--muted1);text-transform:uppercase;
}
.hero p.lead{
  font-size:clamp(1rem,1.1vw + .9rem,1.2rem);font-weight:400;line-height:1.6;
  color:var(--muted1);max-width:640px;margin-inline:auto;
}

/* Scroll cue */
.scroll-cue{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;
  display:inline-flex;align-items:center;gap:.5rem;color:#fff;font-weight:600;
  text-decoration:none;padding:.5rem .8rem;border-radius:12px;background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(4px)
}
.scroll-cue:hover{background:rgba(0,0,0,.28)}
.scroll-cue .chev{width:18px;height:18px;display:inline-block;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:2px;animation:bounce .9s ease-in-out infinite alternate}
@keyframes bounce{from{transform:translateY(0) rotate(45deg)}to{transform:translateY(6px) rotate(45deg)}}

/* ------------ Cards & Grids ------------ */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.25rem}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;border:1px solid rgba(8,64,95,.08);transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
/* Only style the top/hero image of a card */
.card > img,
.card .img-wrap > img{
  aspect-ratio:16/10;
  object-fit:cover;
  width:100%;
  display:block;
  border-bottom:1px solid rgba(0,0,0,.06);
}

/* Nested images inside cards (avatars, logos, icons) keep natural size */
.card .card-body img,
.card .avatar img,
.card .content img,
.card .meta img{
  width:auto;
  height:auto;
  max-width:100%;
  aspect-ratio:auto;
  object-fit:contain; /* or cover if it's a round avatar that has its own size */
  border:0;
}

.card-body{padding:1.1rem}
.card-body>*+*{margin-top:.6rem}
.badge{display:inline-block;font-size:.78rem;background:rgba(10,61,98,.1);color:var(--primary);padding:.25rem .55rem;border-radius:999px;font-weight:700;letter-spacing:.02em}

/* ------------ Social List (single definition) ------------ */
.social-card{border:1px solid rgba(8,64,95,.10);box-shadow:0 12px 36px rgba(3,20,35,.10)}
.social-card .social-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
@media (max-width:560px){.social-card .social-head{flex-direction:column;align-items:flex-start}}
.social-list{list-style:none;padding:0;margin:.75rem 0 0;display:grid;gap:.65rem}
.social-item{
  display:flex;align-items:center;gap:.9rem;padding:.9rem .9rem;border-radius:12px;
  background:rgba(8,64,95,.04);border:1px solid rgba(8,64,95,.10);text-decoration:none;color:inherit;
  transition:transform .18s,box-shadow .18s,background .18s,border-color .18s;
}
.social-item:hover{background:rgba(8,64,95,.06);border-color:rgba(8,64,95,.18);box-shadow:0 10px 22px rgba(3,20,35,.12);transform:translateY(-2px)}
.social-item .icon{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:radial-gradient(120% 120% at 0% 0%,#feda75,#d62976 40%,#962fbf 70%,#4f5bd5);color:#fff;flex:0 0 auto}
.social-item .icon.ig i{font-size:1.1rem}
.social-item .meta{display:flex;flex-direction:column;line-height:1.25}
.social-item .meta b{font-weight:700}
.social-item .meta small{font-size:.85rem;color:var(--muted)}
.social-item .chev{margin-left:auto;color:var(--secondary);opacity:.95;transition:transform .18s}
.social-item:hover .chev{transform:translateX(2px)}
/* Instagram “logo only” text */
.social-item .icon-only{
  font-size:1.45rem;background:radial-gradient(120% 120% at 0% 0%,#feda75,#d62976 40%,#962fbf 70%,#4f5bd5);
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 6px rgba(214,41,118,.25));
}

/* ------------ Map Embed ------------ */
.map-container{overflow:hidden;border-radius:12px;box-shadow:var(--shadow-sm)}
.map-container iframe{border:0;width:100%;height:320px;transition:transform .3s}
.map-container:hover iframe{transform:scale(1.03)}

/* ------------ Testimonials ------------ */
.testimonial .head{display:flex;gap:.9rem;align-items:center;margin-bottom:.75rem}
.testimonial img{width:56px;height:56px;border-radius:50%;object-fit:cover;box-shadow:0 3px 8px rgba(0,0,0,.15)}
.testimonial .name{font-weight:700;color:var(--primary);font-size:1.05rem}
.testimonial .stars{display:flex;gap:.2rem;font-size:1rem;margin-top:.15rem}
.testimonial .stars .fa-star{color:var(--muted1)}
.testimonial .stars .fa-star.filled{color:#f4b400;text-shadow:0 1px 4px rgba(244,180,0,.4)}
.testimonial .quote{font-style:italic;color:var(--ink);line-height:1.6}

/* ------------ About Card ------------ */
#about .card{background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.05)}
#about h2{font-weight:700}
#about .actions{margin-top:1rem}
#about img{border:3px solid #fff;box-shadow:0 4px 18px rgba(0,0,0,.15)}

/* ------------ Package Card ------------ */
.package-card{display:flex;flex-direction:column;overflow:hidden}
.package-card .img-wrap{position:relative}
.package-card img{aspect-ratio:16/10;object-fit:cover;width:100%;border-bottom:1px solid rgba(0,0,0,.06)}
.package-card .badge{
  position:absolute;top:12px;left:12px;background:var(--sand);color:#1b1206;
  font-weight:600;padding:.35rem .7rem;border-radius:999px;font-size:.8rem;box-shadow:var(--shadow-sm)
}
.package-card .card-body{padding:1.25rem;display:flex;flex-direction:column;gap:.6rem}
.package-card .actions{margin-top:auto}

/* Highlights pills */
.highlights{list-style:none;padding:0;margin:.9rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
.highlights li{
  background:rgba(10,61,98,.06);color:var(--primary);font-weight:600;font-size:.9rem;
  padding:.35rem .7rem;border-radius:999px;box-shadow:var(--shadow-sm)
}
.highlights li:hover{background:rgba(10,61,98,.1);box-shadow:var(--shadow)}

/* Package price (if you use it in your PackageCard) */
.package-card .price{margin:.35rem 0 .4rem}
.package-card .price .amount{
  display:inline-block;font-weight:800;font-size:1.15rem;letter-spacing:.2px;color:var(--primary);
  background:rgba(10,61,98,.06);padding:.35rem .6rem;border-radius:10px;box-shadow:var(--shadow-sm)
}

/* ------------ Gallery index ------------ */

/* Center the eyebrow in the gallery intro on all screen sizes */
#gallery-preview .gallery-copy > .eyebrow{
  display: block;                 /* not inline-block */
  width: max-content;             /* shrink to its text */
  margin: 0 auto .5rem;           /* centers horizontally */
}

.gallery-intro{
  display:grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(1rem, 3.5vw, 2.25rem);
  align-items:center;
}

/* Left copy */
.gallery-copy .h2{
  text-align:left;
  padding-bottom:.5rem;
  position:relative;
}
.gallery-copy .h2::after{
  content:"";
  position:absolute;
  left:0;               /* left-aligned accent just for this section */
  transform:none;
  bottom:-8px;
  width:82px; height:3px; border-radius:999px;
  background: linear-gradient(90deg, var(--secondary), var(--accent));
  box-shadow: 0 6px 14px rgba(14,116,144,.25);
}

/* Right grid (2×2), with subtle card styling */
.mini-gallery{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:.75rem;
  padding:.75rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border:1px solid rgba(8,64,95,.08);
  background: var(--card);
}
.mini-gallery figure{ margin:0; overflow:hidden; border-radius:12px; }
.mini-gallery img{
  width:100%; height:100%;
  aspect-ratio: 4/3;          /* consistent preview shapes */
  object-fit: cover;
  display:block;
  transition: transform .25s, filter .25s;
}
.mini-gallery figure:hover img{ transform: scale(1.03); }

/* Stack on smaller screens */
@media (max-width: 980px){
  .gallery-intro{ grid-template-columns: 1fr; }
  .gallery-copy .h2{ text-align:center; }
  .gallery-copy .h2::after{ left:50%; transform:translateX(-50%); }
  .gallery-copy .actions{ justify-content:center!important; }
}

/* Optional: make first image a bit taller for subtle mosaic effect on large screens */
@media (min-width: 1100px){
  .mini-gallery figure:nth-child(1) img{ aspect-ratio: 5/4; }
}


/* ------------ Reveal on Scroll ------------ */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.in-view{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.delay-1{transition-delay:.08s}.delay-2{transition-delay:.18s}.delay-3{transition-delay:.28s}.delay-4{transition-delay:.38s}

/* ------------ Floating WhatsApp ------------ */
.float-wa{
  position:fixed;right:18px;bottom:18px;z-index:1200;width:56px;height:56px;border-radius:14px;
  background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:var(--shadow-lg);transition:transform .2s
}
.float-wa:hover{transform:scale(1.04)}

/* ------------ Reduced Motion ------------ */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto!important}
}
/*About*/
/* About card layout — large rectangular image */
.about-card{
  display:flex;
  align-items:stretch;              /* image matches text block height nicely */
  gap:1.5rem;
  padding:1.25rem;
  flex-wrap:wrap;                   /* stack on small screens */
}

/* BIG rectangular portrait (responsive) */
.about-card .avatar{
  flex:0 0 clamp(260px, 36vw, 440px); /* grows with viewport, capped */
  aspect-ratio: 4 / 3;                /* consistent shape */
  border-radius: var(--radius);       /* soft corners */
  overflow:hidden;
  background:#000;                    /* prevents white edge on slow loads */
  box-shadow: var(--shadow);
  padding:0;                          /* remove ring */
}

/* Image itself */
.about-card .avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  border:0;                           /* remove white border */
  border-radius:inherit;              /* same rounding as wrapper */
  aspect-ratio:auto;                  /* cancel any global image ratio */
  display:block;
}

.about-card .about-copy{
  flex:1 1 340px;                     /* take remaining space */
  min-width:0;
}

/* Role chips (unchanged; keep if you use them) */
.role-chips{
  display:flex; flex-wrap:wrap; gap:.5rem;
  list-style:none; padding:0; margin:.25rem 0 .25rem;
}
.role-chips li{
  padding:.35rem .65rem; border-radius:999px; font-weight:650; font-size:.86rem;
  color:var(--primary); background:rgba(10,61,98,.06);
  border:1px solid rgba(10,61,98,.10); box-shadow: var(--shadow-sm);
}

/* Mobile: stack image on top */
@media (max-width: 900px){
  .about-card{ align-items:center; }
  .about-card .avatar{
    flex-basis:100%;
    aspect-ratio: 16 / 9;            /* wider banner feel on phones */
  }
}


/* --- BEST section layout --- */
#best .best-grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;   /* lock 2 cols on desktop */
  gap: 2.25rem;
  align-items: center;
}

/* image card */
#best .best-img{
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(3,20,35,.20);
  background: #000;
}
#best .best-img img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio: 16/10;    /* keeps consistent height */
  object-fit: cover;
}

/* right column */
#best .best-text{ text-align:center; max-width: 620px; margin-inline:auto; }
#best .best-text .h2{ margin-top:.35rem; position:relative; padding-bottom:.6rem; }
#best .best-text .h2::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-8px; width:88px; height:3px; border-radius:999px;
  background: linear-gradient(90deg, var(--secondary), var(--accent));
  box-shadow: 0 6px 14px rgba(14,116,144,.25);
}

/* buttons tighter under copy */
#best .actions{ margin-top: 1.25rem; }

/* stack on tablet/mobile */
@media (max-width: 980px){
  #best .best-grid{ grid-template-columns: 1fr; }
  #best .best-text{ text-align:left; margin-inline:0; }
}

/* if you still have a global .card img rule, keep it from touching this */
#best .best-img img{ aspect-ratio: 16/10 !important; }


/* Simple Courses block */
.course-wrap{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items:center;
}
@media (min-width: 900px){
  .course-wrap{ grid-template-columns: 1.1fr .9fr; }
}

.course-photos{
  display:grid;
  grid-template-columns: 2fr 1fr;
  grid-auto-rows: 140px;
  gap: .75rem;
}
.course-photos figure{ margin:0; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.course-photos img{ width:100%; height:100%; object-fit:cover; display:block; }
.course-photos .tall{ grid-row: span 2; }

.checklist{
  list-style:none; padding:0; margin:.75rem 0 0;
  display:grid; gap:.35rem;
}
.checklist li{ color:var(--ink); }
.checklist li::before{
  content:"✓";
  color:var(--secondary);
  font-weight:800;
  margin-right:.5rem;
}


#courses .eyebrow{
  display:block;                 
  width:fit-content;             
  margin:0 auto .5rem;           
  text-align:center;             
}


#courses .eyebrow{
  justify-self:center;           
  align-self:center;             
}