@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

:root{
  --bg: #fbf0e2;
  --card: rgba(255,255,255,.82);
  --text: #0f172a;
  --muted: #475569;
  --brand1: rgb(42, 125, 126);
  --brand2: rgb(71, 107, 118);
  --gold: rgb(176, 155, 64);
  --border: rgba(15, 23, 42, .10);
  --shadow: 0 14px 40px rgba(2, 8, 23, .10);
  --radius: 18px;
  --radius2: 26px;
  --max: 1120px;
}

/* ========== Reset ========== */
*{ box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }

body{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(circle, rgb(244, 242, 240), #f7e7c9);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.5;
}

/* optional subtle motion */
@keyframes waveAnimation{
  0%{ background-size:100% 100%; }
  50%{ background-size:110% 110%; }
  100%{ background-size:100% 100%; }
}
body{ animation: waveAnimation 8s linear infinite; }

/* Scrollbar */
::-webkit-scrollbar{ width: 8px; }
::-webkit-scrollbar-track{ background: rgba(0,0,0,.08); }
::-webkit-scrollbar-thumb{ background: rgba(15,23,42,.55); border-radius: 99px; }



 
    /* ===== Top bar ===== */
    .topbar{
      background: rgba(15,23,42,.92);
      color: rgba(255,255,255,.92);
      font-size: 13px;
    }
    .topbar-inner{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 0;
      flex-wrap: wrap;
    }
    .topbar a{ color: rgba(255,255,255,.92); font-weight: 700; }
    .wa{
      display:flex; align-items:center; gap: 10px;
    }
    .wa img{ width: 18px; height: 18px; }
    .toplinks{
      display:flex;
      gap: 14px;
      flex-wrap: wrap;
      opacity: .95;
    }
    .toplinks a:hover{ text-decoration: underline; }




 /* ========== Main header ========== */
    .header{
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border);
    }
    .header-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 10px 0;
      gap: 18px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap: 10px;
    }
    .brand img{
      width: 64px;
      height: 64px;
      object-fit: contain;
    }

    .nav{
      display:flex;
      align-items:center;
      gap: 14px;
    }
    .nav > a,
    .nav .dropbtn{
      font-size: 14px;
      font-weight: 600;
      color: var(--muted);
      padding: 10px 10px;
      border-radius: 12px;
      transition: .2s ease;
      cursor: pointer;
      white-space: nowrap;
    }
    .nav > a:hover,
    .nav .dropbtn:hover{ background: rgba(15,23,42,.06); color: var(--text); }

    .btn{
      background: linear-gradient(135deg, var(--brand1), var(--brand2));
      color: #fff !important;
      padding: 10px 14px !important;
      border-radius: 14px;
      box-shadow: 0 10px 20px rgba(42,125,126,.25);
    }
    .btn:hover{ transform: translateY(-1px); }

    /* dropdown */
    .dropdown{ position: relative; }
    .dropdown-content{
      position:absolute;
      top: calc(100% + 10px);
      left: 0;
      background: #fff;
      border:1px solid var(--border);
      box-shadow: var(--shadow);
      border-radius: 16px;
      min-width: 180px;
      padding: 8px;
      display:none;
    }
    .dropdown-content a{
      display:block;
      padding:10px 10px;
      border-radius: 12px;
      color: var(--muted);
      font-weight:600;
      font-size: 14px;
    }
    .dropdown-content a:hover{ background: rgba(15,23,42,.06); color: var(--text); }
    .dropdown:hover .dropdown-content{ display:block; }

    /* mobile menu */
    .menu-toggle{
      display:none;
      width:44px; height:44px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background:#fff;
      cursor:pointer;
      font-size: 18px;
    }
    @media (max-width: 900px){
      .menu-toggle{ display:inline-flex; align-items:center; justify-content:center; }
      .nav-wrap{ display:none; }
      .nav-wrap.open{ display:block; }
      .nav{
        flex-direction:column;
        align-items:stretch;
        gap: 6px;
        padding: 10px 0 14px;
      }
      .dropdown-content{
        position: static;
        display:block;
        box-shadow: none;
        border: none;
        padding: 0 0 0 10px;
      }
    }



/* HERO */
    .page-hero{
      position: relative;
      width: 100%;
      height: clamp(220px, 38vw, 420px);
      overflow: hidden;
    }
    .page-hero img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .page-hero::after{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.45));
    }
    .hero-text{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      z-index:2;
      text-align:center;
      padding: 0 16px;
    }
    .hero-text h1{
      color:#fff;
      font-weight: 800;
      letter-spacing: -0.5px;
      font-size: clamp(28px, 5vw, 56px);
      margin:0;
    }


    /* Mobile menu panel */
    .mobile-panel{
      position: fixed;
      top: 0; right: -100%;
      width: min(360px, 92vw);
      height: 100%;
      background: #fff;
      box-shadow: -12px 0 30px rgba(0,0,0,0.18);
      z-index: 99999;
      transition: right .25s ease;
      padding: 18px;
      overflow-y: auto;
    }
    .mobile-panel.open{ right: 0; }
    .backdrop{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.45);
      z-index: 99990;
      opacity: 0;
      visibility: hidden;
      transition: all .2s ease;
    }
    .backdrop.show{ opacity: 1; visibility: visible; }

    .mobile-link{
      display:block;
      padding: 12px 10px;
      border-radius: 10px;
      font-weight: 700;
      color:#0f172a;
      text-decoration:none;
    }
    .mobile-link:hover{ background:#f3f4f6; }
    details.mobile-dd{
      border: 1px solid rgba(0,0,0,0.08);
      border-radius: 12px;
      padding: 6px 8px;
      margin: 10px 0;
    }
    details.mobile-dd summary{
      cursor: pointer;
      font-weight: 800;
      padding: 10px;
      list-style: none;
    }
    details.mobile-dd summary::-webkit-details-marker{ display:none; }
    .mobile-sub a{
      display:block;
      padding: 10px 10px;
      margin: 2px 0;
      border-radius: 10px;
      text-decoration:none;
      color:#374151;
      font-weight: 600;
      font-size: 14px;
    }
    .mobile-sub a:hover{ background:#fff1f2; color: var(--red); }






 /* Footer */
    footer{
      margin-top: 30px;
      background: #0b1220;
      color: rgba(255,255,255,.85);
      border-top: 1px solid rgba(255,255,255,.08);
    }
    .footer-container{
      width:min(var(--max), 92%);
      margin: 0 auto;
      padding: 34px 0 20px;
      display:grid;
      grid-template-columns: 1.2fr 1fr 1fr 1fr;
      gap: 18px;
    }
    .footer-container h3{
      margin:0 0 10px;
      font-size: 14px;
      letter-spacing: .04em;
      text-transform: uppercase;
      color:#fff;
    }
    .footer-container a{ color: rgba(255,255,255,.85); }
    .footer-container a:hover{ color: #fff; }
    .social-icons{
      display:flex;
      gap: 10px;
      margin-top: 10px;
    }
    .social-icons img{ width: 34px; height: 34px; }
    .footer-container ul{ margin:0; padding-left: 18px; }
    .footer-container li{ margin: 8px 0; }
    .footer-bottom{
      border-top: 1px solid rgba(255,255,255,.10);
      padding: 16px 0;
      width:min(var(--max), 92%);
      margin: 0 auto;
      display:flex;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      color: rgba(255,255,255,.70);
      font-size: 14px;
    }
    @media (max-width: 980px){
      .footer-container{ grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 560px){
      .footer-container{ grid-template-columns: 1fr; }
    }






     /* Tours grid */
    .tours{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-top: 12px;
    }
    @media (max-width: 1100px){ .tours{ grid-template-columns: repeat(2,1fr);} }
    @media (max-width: 560px){ .tours{ grid-template-columns: 1fr;} }

    .tour{
      background: rgba(255,255,255,.80);
      border: 1px solid rgba(15,23,42,.12);
      border-radius: 18px;
      overflow:hidden;
      box-shadow: var(--shadow2);
      transition: transform .16s ease, box-shadow .16s ease;
      display:grid;
    }
    .tour:hover{
      transform: translateY(-3px);
      box-shadow: 0 18px 40px rgba(2,8,23,.12);
    }
    .tour .img{
      height: 190px;
      background-size: cover;
      background-position: center;
    }
    .tour-body{
      padding: 12px;
      display:grid;
      gap: 6px;
    }
    .tour-badge{
      display:inline-flex;
      width: fit-content;
      padding: 6px 10px;
      border-radius: 999px;
      font-weight: 900;
      font-size: 12px;
      background: rgba(42,125,126,.12);
      color: rgb(25, 94, 95);
      border: 1px solid rgba(42,125,126,.18);
    }
    .tour h3{
      margin:0;
      font-size: 15px;
      font-weight: 950;
      letter-spacing: -.01em;
    }
    .tour .cta{
      margin-top: 6px;
      display:inline-flex;
      align-items:center;
      gap: 8px;
      font-weight: 950;
      font-size: 13px;
    }
    .tour .cta span{
      width: 30px;
      height: 30px;
      border-radius: 10px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      background: linear-gradient(135deg, var(--brand1), var(--brand2));
      box-shadow: 0 12px 25px rgba(42,125,126,.18);
    }