:root{
--ink:#111111;
--sand:#c99a46;
--sand-light:#efe4cf;
--sand-soft:#faf0e4;
--sea:#0e7f8c;
--white:#ffffff;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;}

html{scroll-behavior:smooth;}
body{background:var(--sand-soft);color:var(--ink);}

/* HEADER */
header{
position:fixed;
top:0;
width:100%;
z-index:1000;
background:#faf0e4;
backdrop-filter:blur(12px);
box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.navbar{
max-width:1200px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
gap:18px;
padding:10px 20px;
}

.brand{
display:flex;
align-items:center;
gap:12px;
text-decoration:none;
flex:0 0 auto;
min-width:0;
}

.brand-mark{
height:66px;
width:66px;
object-fit:cover;
object-position:center;
display:block;
border-radius:12px;
box-shadow:0 6px 18px rgba(0,0,0,.10);
}

.brand-wordmark-img{
height:48px;
width:auto;
max-width:245px;
object-fit:contain;
display:block;
}

.nav-menu{
display:flex;
align-items:center;
gap:16px;
}

.nav-links{
display:flex;
list-style:none;
align-items:center;
gap:14px;
}

.nav-links li a{
color:var(--ink);
text-decoration:none;
font-weight:700;
font-size:14px;
}

.nav-links li a:hover{color:var(--sand);}

/* LANGUAGE */
.lang{
display:flex;
align-items:center;
gap:6px;
padding:4px;
background:rgba(255,255,255,.65);
border:1px solid rgba(17,17,17,.12);
border-radius:999px;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}

.lang button{
background:transparent;
border:0;
cursor:pointer;
font-size:12px;
font-weight:800;
letter-spacing:.3px;
padding:7px 10px;
border-radius:999px;
color:var(--ink);
line-height:1;
min-width:36px;
}

.lang button:hover,
.lang button.active{
background:var(--sand);
color:var(--white);
}

/* HERO */
.hero{
min-height:72vh;
background:
linear-gradient(rgba(17,17,17,.56),rgba(17,17,17,.56)),
url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=2000&q=80');
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:var(--white);
padding:120px 20px 70px;
}

.hero-content{max-width:900px;}
.hero h1{font-size:3rem;margin-bottom:15px;text-shadow:0 4px 18px rgba(0,0,0,.35);}
.hero p{font-size:1.1rem;margin-bottom:20px;}

.btn{
display:inline-block;
padding:14px 30px;
background:var(--sand);
color:var(--white);
text-decoration:none;
border-radius:50px;
font-weight:800;
box-shadow:0 10px 24px rgba(0,0,0,.20);
}

.btn:hover{filter:brightness(.95);}

/* SECTIONS */
section{padding:80px 20px;}
.container{max-width:1200px;margin:auto;}

.section-title{text-align:center;margin-bottom:30px;}
.section-title h2{font-size:2.4rem;}
.section-title h2::after{
content:"";
display:block;
width:64px;
height:4px;
background:var(--sand);
border-radius:999px;
margin:12px auto 0;
}

/* TOURS */
.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:30px;
}

.card{
background:var(--white);
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.08);
border:1px solid rgba(17,17,17,.06);
}

.card img{width:100%;height:240px;object-fit:cover;display:block;}
.card-content{padding:25px;}
.card-content h3{font-size:1.35rem;}

.price{
font-size:1.5rem;
color:var(--sand);
font-weight:800;
margin:10px 0;
}

/* INFO BOXES */
.info-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;
margin-top:35px;
}

.info-box{
background:var(--white);
padding:18px;
border-radius:12px;
text-align:center;
font-weight:700;
box-shadow:0 8px 18px rgba(0,0,0,0.06);
border:1px solid rgba(201,154,70,.20);
}

/* INCLUDED */
.includes{background:#fffaf2;}

.include-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:15px;
}

.include-card{
background:var(--white);
padding:18px;
border-radius:12px;
box-shadow:0 10px 20px rgba(0,0,0,.08);
border-left:4px solid var(--sand);
font-weight:600;
}

/* MOBILE */
@media(max-width:900px){
.info-grid{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:700px){
.navbar{
flex-direction:column;
justify-content:center;
align-items:center;
gap:10px;
padding:9px 14px 12px;
}

.brand{
width:100%;
justify-content:center;
gap:10px;
}

.brand-mark{
height:50px;
width:50px;
border-radius:10px;
}

.brand-wordmark-img{
height:34px;
max-width:190px;
}

.nav-menu{
width:100%;
justify-content:center;
align-items:center;
gap:12px;
flex-wrap:wrap;
}

.nav-links{gap:18px;}
.nav-links li a{font-size:13px;}

.lang{gap:4px;padding:3px;}
.lang button{font-size:11px;padding:7px 9px;min-width:32px;}

.hero{min-height:76vh;padding-top:150px;}
.hero h1{font-size:2.2rem;}
.hero p{font-size:1rem;}
}

@media(max-width:500px){
section{padding:65px 16px;}

.cards{grid-template-columns:1fr;}
.info-grid{grid-template-columns:1fr;}
.section-title h2{font-size:2rem;}
.price{font-size:1.25rem;}

.brand-mark{height:44px;width:44px;}
.brand-wordmark-img{height:30px;max-width:160px;}
}

@media(max-width:370px){
.brand{gap:7px;}
.brand-mark{height:40px;width:40px;}
.brand-wordmark-img{height:27px;max-width:145px;}
.nav-menu{flex-direction:column;}
.hero{padding-top:185px;}
}

/* FOOTER */
footer{
background:var(--ink);
color:var(--sand-light);
text-align:center;
padding:25px;
}

.whatsapp-float{
position:fixed;
right:20px;
bottom:20px;
width:60px;
height:60px;
background:#25D366;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:26px;
color:white;
text-decoration:none;
box-shadow:0 8px 22px rgba(0,0,0,.22);
z-index:999;
}


/* Mobile uses combined logo */
@media(max-width:700px){
.brand{
position:relative;
}
.brand-mark{
display:none;
}
.brand-wordmark-img{
display:none;
}
.brand{
background:url('../images/full-logo.jpeg') center/contain no-repeat;
width:220px;
height:95px;
}
}


.menu-toggle{display:none;background:none;border:none;font-size:32px;font-weight:700;color:var(--ink);cursor:pointer;}

@media(max-width:700px){
.navbar{
flex-direction:row;
justify-content:space-between;
align-items:center;
padding:10px 16px;
}
.brand{
width:auto;
justify-content:flex-start;
}
.brand-mark{
height:78px;
width:78px;
border-radius:0;
box-shadow:none;
}
.brand-wordmark-img{
display:none;
}
.menu-toggle{display:block;}
.nav-menu{
display:none;
position:absolute;
top:100%;
left:0;
right:0;
background:#faf0e4;
padding:16px;
box-shadow:0 8px 20px rgba(0,0,0,.08);
flex-direction:column;
}
.nav-menu.open{display:flex;}
.nav-links{flex-direction:column;gap:12px;}
.hero{padding-top:130px;}
}

/* FINAL MOBILE HEADER FIX */
@media (max-width: 700px){
  header{
    background:#faf0e4 !important;
  }

  .navbar{
    max-width:100% !important;
    min-height:96px !important;
    padding:8px 16px !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
  }

  .brand{
    display:block !important;
    flex:0 0 124px !important;
    width:124px !important;
    height:82px !important;
    min-width:124px !important;
    background:url('../images/full-logo.jpeg') left center / contain no-repeat !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .brand img,
  .brand-mark,
  .brand-wordmark-img{
    display:none !important;
  }

  .menu-toggle{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:52px !important;
    height:52px !important;
    border:0 !important;
    background:transparent !important;
    color:var(--ink) !important;
    font-size:38px !important;
    line-height:1 !important;
    padding:0 !important;
    cursor:pointer !important;
  }

  .nav-menu{
    display:none !important;
    position:absolute !important;
    top:100% !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    background:#faf0e4 !important;
    padding:18px 16px 20px !important;
    box-shadow:0 12px 22px rgba(0,0,0,.10) !important;
    border-top:1px solid rgba(17,17,17,.08) !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:16px !important;
    z-index:1001 !important;
  }

  .nav-menu.open{
    display:flex !important;
  }

  .nav-links{
    flex-direction:column !important;
    gap:14px !important;
  }

  .nav-links li a{
    font-size:17px !important;
  }

  .lang{
    margin-top:2px !important;
  }

  .hero{
    padding-top:112px !important;
  }
}

@media (max-width: 390px){
  .brand{
    flex-basis:112px !important;
    width:112px !important;
    min-width:112px !important;
    height:76px !important;
  }

  .navbar{
    min-height:90px !important;
    padding:7px 14px !important;
  }

  .menu-toggle{
    width:48px !important;
    height:48px !important;
    font-size:35px !important;
  }

  .hero{
    padding-top:106px !important;
  }
}