/* ======================================================
   ATLANTIC TRAVEL — SHARED STYLESHEET
   Used by: index.html, package.html
   Edit styles here once; both pages pick up the change.
====================================================== */

/* ==================== Local (downloaded) Google Fonts ========== */

/*=== Nunito === */

/* nunito-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/nunito/nunito-v32-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/nunito/nunito-v32-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/nunito/nunito-v32-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/nunito/nunito-v32-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/nunito/nunito-v32-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/nunito/nunito-v32-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/*======== Poppins ============== */

/* poppins-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/poppins/poppins-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/poppins/poppins-v24-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/poppins/poppins-v24-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/poppins/poppins-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/poppins/poppins-v24-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ==================== END OF FONTS ================================ */

:root{
  --ocean:#0e5e8f;          /* deep Atlantic blue */
  --ocean-dark:#0a405f;
  --sun:#f7a823;            /* sunny accent */
  --sun-dark:#e08e00;
  --coral:#ef6c4d;
  --sand:#fdf8f0;
  --ink:#1d2b36;
  --mist:#5f7383;
  --card-shadow:0 6px 24px rgba(14,94,143,.12);
  --radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Nunito',sans-serif;color:var(--ink);background:#fff;line-height:1.6}
h1,h2,h3,h4{font-family:'Poppins',sans-serif;line-height:1.25}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}

/* ---------- Views (SPA) ---------- */
.view{display:none}
.view.active{display:block}

/* ---------- Top bar ---------- */
.topbar{background:var(--ocean-dark);color:#dbeaf5;font-size:.83rem;padding:.45rem 1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem}
.topbar span b{color:#fff}
.topbar .right{display:flex;gap:1.2rem;flex-wrap:wrap}
.topbar a:hover{color:var(--sun)}

/* ---------- Header / nav ---------- */
header{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.08)}
.nav{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:.7rem 1.5rem;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;cursor:pointer}
.brand .mark{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--ocean),#1a86c9);display:grid;place-items:center;color:#fff;font-size:1.35rem}
.brand .name{font-family:'Poppins',sans-serif;font-weight:800;font-size:1.15rem;color:var(--ocean)}
.brand .name small{display:block;font-weight:600;font-size:.62rem;letter-spacing:.22em;color:var(--sun-dark);text-transform:uppercase}
nav ul{display:flex;list-style:none;gap:1.4rem;align-items:center;font-weight:700;font-size:.93rem}
nav ul a{padding:.35rem 0;border-bottom:3px solid transparent;transition:.2s}
nav ul a:hover{color:var(--ocean);border-color:var(--sun)}
nav ul a.current{color:var(--ocean);border-color:var(--sun)}
.btn{display:inline-block;font-family:'Poppins',sans-serif;font-weight:600;border-radius:999px;padding:.6rem 1.4rem;font-size:.9rem;transition:.2s;cursor:pointer;border:none}
.btn-sun{background:var(--sun);color:#3a2800}
.btn-sun:hover{background:var(--sun-dark);color:#fff;transform:translateY(-2px)}
.btn-ocean{background:var(--ocean);color:#fff}
.btn-ocean:hover{background:var(--ocean-dark);transform:translateY(-2px)}
nav ul a.btn-ocean{border-bottom:none;color:#fff}
nav ul a.btn-ocean:hover{color:#fff}
.menu-toggle{display:none;background:none;border:none;font-size:1.6rem;color:var(--ocean);cursor:pointer}

/* ---------- Hero slider (Home) ---------- */
.hero{position:relative;height:520px;overflow:hidden;color:#fff}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease}
.slide.active{opacity:1}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,45,68,.82) 0%,rgba(8,45,68,.45) 55%,rgba(8,45,68,.15) 100%)}
.slide .inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 1.5rem}
.slide .eyebrow{font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:.8rem;color:var(--sun);margin-bottom:.6rem}
.slide h1{font-size:clamp(1.7rem,4vw,3rem);font-weight:800;max-width:640px;margin-bottom:.7rem;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.slide p{max-width:520px;font-size:1.05rem;margin-bottom:1.4rem;color:#eaf3fa}
.hero .dots{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:.55rem;z-index:3}
.hero .dots button{width:11px;height:11px;border-radius:50%;border:none;background:rgba(255,255,255,.45);cursor:pointer;transition:.2s}
.hero .dots button.on{background:var(--sun);transform:scale(1.25)}

/* ---------- Page hero (About) ---------- */
.page-hero{position:relative;height:320px;background:url('images/pkgs/packages/florian-wehde-uFGi0_YciE0-unsplash-scaled.jpg') center/cover;display:flex;align-items:center;color:#fff}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,45,68,.85),rgba(8,45,68,.35))}
.page-hero .inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;width:100%;padding:0 1.5rem}
.page-hero .eyebrow{font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:.8rem;color:var(--sun);margin-bottom:.5rem}
.page-hero h1{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:800;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.page-hero p{max-width:560px;margin-top:.5rem;color:#eaf3fa}

/* ---------- Section scaffolding ---------- */
section{padding:3.6rem 1.5rem}
.wrap{max-width:1200px;margin:0 auto}
.sec-head{text-align:center;margin-bottom:2.4rem}
.sec-head .kicker{display:inline-block;font-weight:700;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sun-dark);background:#fff4dd;border-radius:999px;padding:.3rem 1rem;margin-bottom:.7rem}
.sec-head h2{font-size:clamp(1.5rem,3vw,2.2rem);color:var(--ocean-dark);font-weight:800}
.sec-head p{color:var(--mist);max-width:680px;margin:.5rem auto 0}
.band{background:var(--sand)}
.band-ocean{background:linear-gradient(135deg,var(--ocean-dark),var(--ocean));color:#fff}
.band-ocean .sec-head h2{color:#fff}
.band-ocean .sec-head p{color:#cfe4f2}
.band-ocean .sec-head .kicker{background:rgba(255,255,255,.14);color:var(--sun)}

/* ---------- Cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:1.6rem}
#tours .grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-content:center;gap:1.8rem}
#hotels .grid, #flights .grid, #packages .grid, .spec.grid, #activities .grid{max-width:1020px;margin:0 auto;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));justify-content:center;gap:1.8rem}
.card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--card-shadow);display:flex;flex-direction:column;transition:.25s}
.card:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(14,94,143,.2)}
.card .ph{position:relative;height:350px;overflow:hidden}
#activities .card .ph, .spec .card .ph{height:210px}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:.5s}
.card:hover .ph img{transform:scale(1.07)}
.card .tag{position:absolute;top:12px;left:12px;background:var(--sun);color:#3a2800;font-family:'Poppins',sans-serif;font-weight:600;font-size:.72rem;padding:.28rem .75rem;border-radius:999px}
.card .body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
#activities .card, #tours .card, #hotels .card, #flights .card, #packages .card, .spec .card{min-height:380px}
.card h3{font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:.45rem}
.card .meta{font-size:.9rem;color:var(--mist);margin-bottom:1rem;line-height:1.6}
.card .foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:.8rem;flex-wrap:wrap}
.price small{display:block;font-size:.72rem;color:var(--mist);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.price b{font-family:'Poppins',sans-serif;font-size:1.25rem;color:var(--ocean);font-weight:800}
.price em{font-style:normal;font-size:.72rem;color:var(--mist)}
.card .btn{padding:.55rem 1rem;font-size:.85rem}

/* ---------- Dynamic card grid: skeletons & error state ---------- */

.skel{background:linear-gradient(90deg,#e8eef4 25%,#f4f8fb 45%,#e8eef4 65%);background-size:300% 100%;animation:skel-sweep 1.2s ease-in-out infinite}
@keyframes skel-sweep{from{background-position:100% 0}to{background-position:-100% 0}}
.card-skel .ph{height:190px}
.skel-line{height:14px;border-radius:6px;margin-bottom:.7rem}
.skel-line.w70{width:70%}
.skel-line.w90{width:90%}
.skel-line.w40{width:40%}
.grid-error{display:none;text-align:center;padding:2.5rem 1rem;color:var(--mist)}
.grid-error p{font-size:1.05rem;margin-bottom:1rem}
#tours-grid img { max-width: 100%;
  height: auto; 
  object-fit: contain; gap:1.5rem}
#tours-grid .card {max-height:560px; min-width:300px}  .ph{position:relative;height:500px; overflow:hidden}

@media (prefers-reduced-motion: reduce){.skel{animation:none}}


@media (max-width: 840px) {
  #tours .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
  #hotels .grid, #flights .grid, #packages .grid, .spec.grid, #activities .grid{grid-template-columns:1fr;gap:1.4rem}
  #tours .card, #hotels .card, #flights .card, #packages .card, .spec .card, #activities .card{min-height:auto}
  #tours .card .body, #hotels .card .body, #flights .card .body, #packages .card .body, .spec .card .body, #activities .card .body{padding:1.2rem 1.2rem 1.3rem}
  .card .foot{justify-content:space-between;align-items:flex-end}
  .card .foot .price{flex:1 1 auto}
  .card .foot .btn{min-width:120px;text-align:center}
  .card h3{font-size:1rem}
  .card .meta{font-size:.9rem}
}

@media (max-width: 560px) {
  #tours .grid{grid-template-columns:1fr}
}

/* ---------- Why us (Home) ---------- */
.why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;margin:0 auto;gap:1.8rem}
.why .item{width:100%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);padding:2rem 1.7rem;display:flex;flex-direction:column;align-items:center;justify-content:space-between;min-height:265px}
.why .ico{font-size:2.2rem;width:62px;height:62px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.18);margin-bottom:0}
.why h3{font-size:1.05rem;margin:.75rem 0 .45rem;color:var(--sun)}
.why p{font-size:.95rem;color:#dcebf5;line-height:1.7;max-width:280px}

@media (max-width: 720px) {
  .why{grid-template-columns:1fr;gap:1.4rem}
  .why .item{padding:1.6rem 1.4rem;min-height:auto}
  .why .ico{width:56px;height:56px;font-size:2rem}
  .why h3{font-size:1rem}
  .why p{max-width:100%;font-size:.94rem}
}

/* ---------- Specialties (Home) ---------- */
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.6rem}
.spec .card .ph{height:210px}
.spec .card p{font-size:.9rem;color:var(--mist);margin-bottom:1rem}

/* ---------- About intro ---------- */
.about-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:3rem;align-items:center}
.about-grid .txt p{margin-bottom:1rem;color:#33454f}
.about-grid .txt p b{color:var(--ocean)}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.stat{background:#fff;border-radius:var(--radius);box-shadow:var(--card-shadow);padding:1.6rem 1.3rem;text-align:center}
.stat b{display:block;font-family:'Poppins',sans-serif;font-size:1.9rem;font-weight:800;color:var(--ocean)}
.stat span{font-size:.85rem;color:var(--mist);font-weight:700}

/* ---------- Location cards (About) ---------- */
.loc{background:#fff;border-radius:var(--radius);box-shadow:var(--card-shadow);overflow:hidden;transition:.25s}
.loc:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(14,94,143,.2)}
.loc .top{background:linear-gradient(135deg,var(--ocean),#1a86c9);color:#fff;padding:1rem 1.3rem;display:flex;align-items:center;gap:.7rem}
.loc .top .pin{font-size:1.4rem}
.loc .top h3{font-size:1.02rem}
.loc .top small{display:block;font-size:.72rem;color:#bfe0f4;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.loc .body{padding:1.2rem 1.3rem;font-size:.9rem;color:#33454f}
.loc .body p{margin-bottom:.5rem}
.loc .body b{color:var(--ocean)}

#locations .grid{justify-content:center;grid-template-columns:repeat(auto-fit,minmax(320px,360px));}

/* ---------- History (About) ---------- */
.hist{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));grid-auto-rows:1fr;gap:1.4rem;justify-content:center;align-items:stretch}
.hist .item{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);padding:1.6rem;display:flex;flex-direction:column;gap:1rem}
.hist .ico{font-size:2rem;margin-bottom:.8rem}
.hist h3{font-size:1.05rem;color:var(--sun);margin-bottom:.5rem}
.hist p{font-size:.88rem;color:#eef3fb;line-height:1.7;flex:1}
.history-copy{max-width:980px;margin:2rem auto 0;padding:1.8rem 1.5rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);color:#fff}
.history-copy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem;justify-items:stretch;margin-top:2rem}
.history-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);padding:1.5rem;min-height:220px;display:flex;flex-direction:column;gap:.9rem}
.history-card p{margin:0;line-height:1.75;font-size:1rem;color:#eef3fb}
.history-card strong{display:block;margin-bottom:.7rem;color:#fff;font-size:1.02rem}
.history-copy p{margin-bottom:1.2rem;line-height:1.8;font-size:1rem;color:#eef3fb}
.history-copy p:last-child{margin-bottom:0}

/* ---------- Team (About) ---------- */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.8rem;max-width:900px;margin:0 auto}
.member{background:#fff;border-radius:var(--radius);box-shadow:var(--card-shadow);overflow:hidden;text-align:center;transition:.25s}
.member:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(14,94,143,.2)}
.member .ph{height:280px;overflow:hidden;background:#e6eef4}
.member .ph img{width:100%;height:100%;object-fit:cover;object-position:top;transition:.5s}
.member:hover .ph img{transform:scale(1.05)}
.member .ph .placeholder{width:100%;height:100%;display:grid;place-items:center;font-size:4rem;color:#9db4c4}
.member .body{padding:1.2rem}
.member h3{font-size:1.05rem;color:var(--ink)}
.member span{display:inline-block;margin-top:.3rem;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sun-dark);background:#fff4dd;border-radius:999px;padding:.25rem .85rem}

/* ---------- Partners (About) ---------- */
.partners{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1.2rem;max-width:1200px;margin:0 auto;align-items:stretch}
.partners .logo{background:#fff;border-radius:var(--radius);box-shadow:var(--card-shadow);padding:1.2rem;display:flex;align-items:center;justify-content:center;min-height:110px;transition:.25s}
.partners .logo:hover{transform:translateY(-4px)}
.partners img{display:block;max-height:58px;width:100%;max-width:140px;height:auto;object-fit:contain;filter:saturate(.9);margin:0 auto}

@media (max-width: 980px){
  .partners{grid-template-columns:repeat(4,minmax(0,1fr))}
}

#view-contactus .grid{max-width:1100px;margin:0 auto;grid-template-columns:repeat(3,minmax(0,1fr));justify-content:center;gap:1.8rem}

@media (max-width: 980px){
  #view-contactus .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width: 560px){
  .partners{grid-template-columns:repeat(2,minmax(0,1fr))}
  #view-contactus .grid{grid-template-columns:1fr}
}

/* ---------- Travel tips tabs (About) ---------- */
.tips{max-width:960px;margin:0 auto}
.tabs{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.8rem}
.tabs button{font-family:'Poppins',sans-serif;font-weight:600;font-size:.88rem;border:2px solid var(--ocean);background:#fff;color:var(--ocean);border-radius:999px;padding:.55rem 1.4rem;cursor:pointer;transition:.2s}
.tabs button.on,.tabs button:hover{background:var(--ocean);color:#fff}
.tip-panel{display:none;background:#fff;border-radius:var(--radius);box-shadow:var(--card-shadow);padding:1.8rem;grid-template-columns:280px 1fr;gap:1.8rem;align-items:center}
.tip-panel.on{display:grid}
.tip-panel img{border-radius:10px;width:100%;height:190px;object-fit:cover}
.tip-panel h3{color:var(--ocean-dark);margin-bottom:.5rem}
.tip-panel p{font-size:.95rem;color:#33454f;margin-bottom:1rem}
.tip-note{max-width:960px;margin:1.6rem auto 0;text-align:center;font-size:.9rem;color:var(--mist);font-style:italic}

/* ---------- Resource cards (Tips & Info) ---------- */
.res{background:#fff;border-radius:var(--radius);box-shadow:var(--card-shadow);padding:1.7rem 1.5rem;display:flex;flex-direction:column;transition:.25s}
.res:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(14,94,143,.2)}
.res .ico{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--ocean),#1a86c9);display:grid;place-items:center;font-size:1.6rem;margin-bottom:1rem}
.res h3{font-size:1.05rem;color:var(--ocean-dark);margin-bottom:.15rem}
.res .q{font-size:.82rem;font-weight:700;color:var(--sun-dark);margin-bottom:.6rem;font-style:italic}
.res p{font-size:.9rem;color:#33454f;margin-bottom:1rem}
.res .btn{margin-top:auto;align-self:flex-start;padding:.5rem 1.1rem;font-size:.8rem}
.faq-card{background:#fff;border-radius:var(--radius);box-shadow:var(--card-shadow);max-width:960px;margin:0 auto;overflow:hidden}
.faq-card details{border-bottom:1px solid #e8eef3}
.faq-card details:last-child{border-bottom:none}
.faq-card summary{cursor:pointer;list-style:none;padding:1.2rem 1.5rem;font-family:'Poppins',sans-serif;font-weight:600;color:var(--ocean-dark);display:flex;justify-content:space-between;align-items:center;gap:1rem;transition:.2s}
.faq-card summary:hover{background:var(--sand)}
.faq-card summary::after{content:"+";font-size:1.3rem;color:var(--sun-dark);font-weight:700}
.faq-card details[open] summary::after{content:"–"}
.faq-card .ans{padding:0 1.5rem 1.3rem;font-size:.92rem;color:#33454f}

/* ---------- Contact view ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:3rem;align-items:start; margin-top:-0.5rem}
.contact-grid .info h3{color:var(--ocean-dark);font-size:1.15rem;margin-bottom:.6rem}
.contact-grid .info p{color:#33454f;margin-bottom:1rem;font-size:.95rem}
.contact-lines{list-style:none;margin-bottom:1.4rem; margin-top:-0.5rem}
.contact-lines li{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.7rem;font-size:.93rem;color:#33454f}
.contact-lines li b{color:var(--ocean)}
.cform{background:#fff;border-radius:var(--radius);box-shadow:var(--card-shadow);padding:1.8rem}
.cform h3{color:var(--ocean-dark);margin-bottom:1.1rem}
.cform .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.cform label{display:block;font-size:.8rem;font-weight:700;color:var(--mist);margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.05em}
.cform input,.cform textarea{width:100%;font-family:'Nunito',sans-serif;font-size:.95rem;color:var(--ink);border:2px solid #dfe8ef;border-radius:10px;padding:.65rem .9rem;margin-bottom:1rem;transition:.2s;background:#fbfdfe}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--ocean);background:#fff}
.cform textarea{min-height:120px;resize:vertical}
.cform .note{font-size:.8rem;color:var(--mist);margin-top:.8rem}
.cform .req{color:var(--coral);font-weight:800}
.cform .err{display:none;font-size:.78rem;font-weight:700;color:#c0392b;margin:-.6rem 0 .9rem}
.cform .invalid{border-color:#c0392b !important;background:#fdf3f2 !important}
.cform .invalid + .err{display:block}
.err { display: none; color: #d64545; font-size: .8rem; margin: 4px 0 0; }
.err.show { display: block; }
.badge-wa{display:inline-flex;align-items:center;gap:.4rem;background:#e8f8ee;color:#1d7a45;font-weight:700;border-radius:999px;padding:.3rem .9rem;font-size:.85rem}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}.cform .row{grid-template-columns:1fr}}

/* ============================================================
     NEW: 1) Button sending animation + disabled state
     ============================================================ */
  .btn { position: relative; transition: background-color .2s ease, opacity .2s ease; }

  .btn:disabled {
    opacity: .65;
    cursor: not-allowed;
  }

  /* Inline spinner that appears inside the button while sending */
  .btn .spinner {
    display: none;
    width: 1em;
    height: 1em;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    vertical-align: -2px;
    margin-right: 8px;
    animation: cf-spin .7s linear infinite;
  }
  .btn.is-sending .spinner { display: inline-block; }

  @keyframes cf-spin { to { transform: rotate(360deg); } }

   /* NEW: error state — button turns red when sending failed */
  .btn.is-error {
    background: #d64545;
    color: #fff;
    animation: cf-shake .4s ease;
  }
  .btn.is-error:hover:not(:disabled) { background: #c03a3a; }

  /* ============================================================
     NEW: 2) Success graphic that replaces the form
     ============================================================ */
  .cform-success {
    display: none;
    text-align: center;
    padding: 36px 20px;
  }
  .cform-success.show { display: block; }

  .cform-success .check-circle {
    width: 96px;
    height: 96px;
    margin: 0 auto 18px;
  }
  /* Circle draws itself, then the checkmark strokes in */
  .check-circle circle {
    fill: none;
    stroke: #2e9e6b;
    stroke-width: 4;
    stroke-dasharray: 302;
    stroke-dashoffset: 302;
    animation: cf-draw .6s ease-out forwards;
  }
  .check-circle path {
    fill: none;
    stroke: #2e9e6b;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: cf-draw .35s ease-out .45s forwards;
  }
  @keyframes cf-draw { to { stroke-dashoffset: 0; } }

  .cform-success h3 { color: #0b3954; margin: 0 0 6px; }
  .cform-success p { color: #55707d; margin: 0; }

  /* Gentle pop-in of the whole success panel */
  .cform-success.show { animation: cf-pop .35s ease-out; }
  @keyframes cf-pop {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
  }

  /* Respect users who prefer reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .btn .spinner { animation-duration: 1.4s; }
    .check-circle circle, .check-circle path { animation: none; stroke-dashoffset: 0; }
    .cform-success.show { animation: none; }
  }


/* ---------- CTA strip ---------- */
.cta-strip{background:linear-gradient(100deg,var(--sun),var(--coral));color:#fff;text-align:center;padding:3rem 1.5rem}
.cta-strip h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:800;margin-bottom:.6rem}
.cta-strip p{max-width:620px;margin:0 auto 1.4rem;font-weight:600}
.cta-strip .btn{background:#fff;color:var(--coral)}
.cta-strip .btn:hover{background:var(--ocean-dark);color:#fff}

/* ---------- Footer ---------- */
footer{background:var(--ocean-dark);color:#c8dcea;padding:3.4rem 1.5rem 1.5rem}
.foot-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2.2rem}
footer h4{color:#fff;font-size:1rem;margin-bottom:1rem}
footer ul{list-style:none}
footer li{margin-bottom:.55rem;font-size:.9rem}
footer a:hover{color:var(--sun)}
.foot-brand p{font-size:.9rem;margin-top:.8rem}
.socials{display:flex;gap:.7rem;margin-top:1rem}
.socials a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;font-size:1.05rem;transition:.2s}
.socials a:hover{background:var(--sun);color:#3a2800}
.copy{max-width:1200px;margin:2.4rem auto 0;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.14);text-align:center;font-size:.82rem;color:#8fb0c6}
.btn-terms{background:transparent;color:#c8dcea;border:2px solid rgba(255,255,255,.35);padding:.45rem 1.2rem;font-size:.8rem}
.btn-terms:hover{background:var(--sun);border-color:var(--sun);color:#3a2800;transform:translateY(-2px)}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .about-grid{grid-template-columns:1fr}
  .tip-panel{grid-template-columns:1fr}
}
@media(max-width:860px){
  nav ul{position:fixed;inset:0 0 0 35%;background:#fff;flex-direction:column;justify-content:center;gap:1.8rem;transform:translateX(100%);transition:.3s;box-shadow:-8px 0 30px rgba(0,0,0,.15)}
  nav ul.open{transform:translateX(0)}
  .menu-toggle{display:block;z-index:60}
  .hero{height:440px}
}

/* ---------- Package detail components (used by package.html) ---------- */
.pkg-hero{position:relative;height:300px;background:#e6eef4}
.pkg-hero img{width:100%;height:100%;object-fit:cover}

.pkg-hero img:hover {
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -10%);
  width: auto;
  height: 800px;
  object-fit: contain;
  z-index: 1000;
}
.pkg-hero .pkg-tag{position:absolute;top:16px;left:16px;background:var(--sun);color:#3a2800;font-family:'Poppins',sans-serif;font-weight:600;font-size:.75rem;padding:.3rem .9rem;border-radius:999px;z-index:2}
.pkg-thumbs{display:flex;gap:.5rem;padding:.7rem 1.8rem 0}
.pkg-thumbs img{width:72px;height:52px;object-fit:cover;border-radius:8px;cursor:pointer;opacity:.65;border:2px solid transparent;transition:.2s}
.pkg-thumbs img.on,.pkg-thumbs img:hover{opacity:1;border-color:var(--sun)}
.pkg-body{padding:1.4rem 1.8rem 2rem}
.pkg-body h2{font-size:1.55rem;color:var(--ocean-dark);font-weight:800}
.pkg-body .pkg-sub{color:var(--mist);font-weight:700;margin:.2rem 0 1.2rem}
.pkg-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem;margin-bottom:1.4rem}
.pkg-facts .f{background:var(--sand);border-radius:10px;padding:.8rem 1rem}
.pkg-facts .f small{display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--sun-dark)}
.pkg-facts .f b{font-family:'Poppins',sans-serif;font-size:.92rem;color:var(--ocean-dark)}
.pkg-desc{font-size:.95rem;color:#33454f;margin-bottom:1.3rem}
.pkg-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-bottom:1.5rem}
.pkg-cols h3{font-size:1rem;color:var(--ocean-dark);margin-bottom:.6rem}
.pkg-cols ul{list-style:none}
.pkg-cols li{font-size:.9rem;color:#33454f;margin-bottom:.45rem;padding-left:1.4rem;position:relative}
.pkg-cols li::before{content:"\2713";position:absolute;left:0;color:var(--sun-dark);font-weight:800}
.pkg-price-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:linear-gradient(135deg,var(--ocean-dark),var(--ocean));border-radius:12px;padding:1.1rem 1.4rem;color:#fff}
.pkg-price-bar .price small{color:#bfe0f4}
.pkg-price-bar .price b{color:#fff;font-size:1.6rem}
.pkg-price-bar .price em{color:#bfe0f4}
.pkg-price-bar .actions{display:flex;gap:.7rem;flex-wrap:wrap}
/* ----- added for date list ---- */
#pkg-dates {list-style:none !important;}
#pkg-dates  {font-weight: 700 !important;}
@media(max-width:700px){.pkg-cols{grid-template-columns:1fr}.pkg-hero{height:220px}}
 

/* ======================================================
   PACKAGE PAGE — additional styles for the standalone view
====================================================== */

/*.pkg-page{max-width:920px;width:100%;margin:2.5rem auto 3.5rem;padding:0 1.5rem}
/*.pkg-page{ position:fixed;inset:0;background:rgba(8,45,68,.72);z-index:100;display:none;align-items:flex-start;justify-content:center;padding:2.5rem 1rem;overflow-y:auto;backdrop-filter:blur(3px)}
*/
.pkg-article{background:#fff;border-radius:var(--radius);box-shadow:var(--card-shadow);overflow:hidden}
.pkg-article .pkg-hero{min-width:800px;height:360px}
.back-link{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--ocean);margin-bottom:1.2rem;font-size:.92rem}
.back-link:hover{color:var(--sun-dark)}
/* Loading spinner */
.pkg-loading{text-align:center;padding:5rem 1rem;color:var(--mist)}
.spinner{width:46px;height:46px;border:5px solid #dfe8ef;border-top-color:var(--ocean);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Error state */
.pkg-error{display:none;text-align:center;padding:4.5rem 1.5rem}
.pkg-error .ico{font-size:3rem;margin-bottom:.8rem}
.pkg-error h2{color:var(--ocean-dark);margin-bottom:.5rem}
.pkg-error p{color:var(--mist);max-width:440px;margin:0 auto 1.4rem}
@media(max-width:700px){.pkg-article .pkg-hero{height:230px}}


/* =================== Dialog for opening packages =================== */
.pkg-overlay{position:fixed;inset:0;background:rgba(8,45,68,.72);z-index:100;display:none;align-items:flex-start;justify-content:center;padding:2.5rem 1rem;overflow-y:auto;backdrop-filter:blur(3px);}
.pkg-overlay.open{display:flex}
.pkg-modal{position: relative; background:#fff;border-radius:var(--radius);max-width:860px;width:100%;box-shadow:0 24px 70px rgba(0,0,0,.35);animation:pkgIn .25s ease;  }
@keyframes pkgIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
body.pkg-lock{overflow:hidden}
.pkg-close{ position:absolute; top: 15px; right:15px; width:40px;height:40px;border-radius:50%;border:none;background:rgba(8,45,68,.65);color:#fff;font-size:1.2rem;cursor:pointer;transition:.2s;z-index:2}
.pkg-close:hover{background:var(--coral)}
@media (max-width: 768px) {
  .pkg-close {
    position: fixed;  top: 6%; right: 20px; 
  }
}
/* popup for packages */
/*dialog {
  Ensure browser defaults aren't being overwritten 
  position: fixed;
  inset: 0;
  margin: auto;
  width:90%; max-width: 800px;
  height:80%;
  background: transparent;
  border: none;
  padding: 0;
  
  box-shadow: none;
}*/

dialog::backdrop {
 /* background-color: rgba(255, 255, 255, 0.25); /* Semi-transparent white */
 background: transparent;
}

/* ---------- Travel enquiry form  ---------- */

#enq-form-package-title{   
  font-size: 32px;
  font-weight: bold;
  color:#e08e00;
  letter-spacing: 1px;  /* More space between letters */
/*border-bottom: 4px solid #ff6b35;  /* Bold accent color */
  /*padding-bottom: 10px;
  display: inline-block;*/
}
.enq{margin-top:1rem}
.enq .cform{padding:1rem 1.8rem}
.fgroup{margin-bottom:0.2rem}
.fgroup-legend{font-family:'Poppins',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sun-dark);background:#fff4dd;display:inline-block;border-radius:999px;padding:.3rem 1rem;margin-bottom:1rem}
.field-desc{font-size:.8rem;color:var(--mist);font-style:italic;margin:-.15rem 0 .45rem}
/* Selects match the text-input styling */
.cform select{width:100%;font-family:'Nunito',sans-serif;font-size:.95rem;color:var(--ink);border:2px solid #dfe8ef;border-radius:10px;padding:.65rem .9rem;margin-bottom:1rem;transition:.2s;background:#fbfdfe;appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230e5e8f' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center}
.cform select:focus{outline:none;border-color:var(--ocean);background-color:#fff}
.cform select.invalid + .err{display:block}
/* Read-only fields look intentionally locked */
.cform input[readonly]{background:var(--sand);border-style:dashed;color:var(--ocean-dark);font-weight:700;cursor:not-allowed}
.fbottom {  display: flex;  justify-content: space-between;}
/* Fixes button size and animation not being aligned */
 #enq-back {min-width:150px; } 
#enq-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width:150px;
}

.form-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  margin-left: 8px;
  vertical-align: middle;
 
  
}
.enq-left {
  display:flex;
  
 justify-content:flex-start;
vertical-align: middle;
  gap: 8px; /* space between checkbox and label */
  
}
#enq-flexible,
#enq-newsletter {
  vertical-align: middle;
  margin-right: 8px;

  cursor: pointer;
}

label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.form-checkbox:checked {
  accent-color: var(--ocean-color); /* or whatever your primary color is */
}

/* Honeypot: visually removed, still in the DOM for bots */
.hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}