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

/* Base resets and font */
:root {
  --bg:#f6f5f0;
  --surface:#ffffff;
  --radius:12px;
  --shadow:0 20px 40px -10px rgba(0,0,0,0.08);
  --brand:#2f4f4f;
  --text:#1f2d33;
  --transition:.35s cubic-bezier(.25,.8,.5,1);
  --gap:1.25rem;
  font-family: "Inter", system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color: var(--text);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 1rem;
}

/* Header */
.site-header{
  position:relative;
  overflow:hidden;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 0;
  gap:1rem;
}
.logo{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-weight:600;
  font-size:1rem;
  color: var(--brand);
}
.brand-name{
  letter-spacing: .5px;
}
.main-nav{
  display:flex;
  gap:1.25rem;
  flex-wrap:wrap;
  align-items:center;
  font-size:0.9rem;
}
.main-nav a{
  text-decoration:none;
  color: var(--text);
  position:relative;
  padding:.25rem .4rem;
  font-weight:500;
}
.main-nav a.lang{
  font-weight:600;
}
.cta .btn{
  padding:.65rem 1.2rem;
  border:none;
  cursor:pointer;
  font-weight:600;
  border-radius:8px;
  background: var(--brand);
  color:#fff;
  font-size:.9rem;
  transition: var(--transition);
  margin-right: 3px;
}
.cta .btn:hover{
  filter:brightness(1.05);
}

/* Hero */
.hero{
  position:relative;
  margin-top:0;
  min-height:360px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  border-radius:0 0 20px 20px;
  margin-bottom:2rem;
}
.hero-img{
  position:absolute;
  inset:0;
  object-fit:cover;
  width:100%;
  height:100%;
  display:block;
  filter:brightness(1);
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(40,40,40,0.5) 0%, rgba(0,0,0,0.05) 60%);
}
.hero-content{
  position:relative;
  padding:1.5rem 1rem 2rem;
  color:#fff;
  max-width:720px;
}
.hero-content h1{
  margin:0 0 .5rem;
  font-size:2.4rem;
  line-height:1.1;
}
.hero-content p{
  margin:0;
  font-size:1.05rem;
  opacity:.95;
  
}
/* 
.hero-content.container {
margin: 0;
} */

.hero-content.container {
  text-align: center;
}

.hero-content.container h1,
.hero-content.container p {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 3px;
  color: var(--text);
  display: inline-block;
  text-align: center;

  padding: 4px 12px;
}

/* .hero-content.container h1,
.hero-content.container p {
  display: inline-block;
  background-color: rgba(47, 79, 79, 0.75);
  border-radius: 3px;
  padding: 4px 12px;
} */




/* Filters */
.activity-filters{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-bottom:1rem;
}
.filter-group{
  display:flex;
  flex-direction:column;
  gap:.3rem;
  flex:1;
  min-width:200px;
}
.filter-group label{
  font-weight:600;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:1px;
}
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.chip{
  padding:.5rem 1rem;
  border:1px solid rgba(47,79,79,.25);
  background:#fff;
  border-radius:999px;
  font-size:.85rem;
  cursor:pointer;
  transition: var(--transition);
}
.chip.active, .chip:hover{
  background: var(--brand);
  color:#fff;
  border-color: var(--brand);
}

/* Activities */
.section-title{
  font-size:1.75rem;
  margin:0 0 .75rem;
  font-weight:700;
}
.activities-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1rem;
  margin-bottom:2rem;
}
.activity-card{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  background:#fff;
  box-shadow: var(--shadow);
  transition: var(--transition);
}
.activity-card:hover .overlay{
  background: linear-gradient(to top,rgba(0,0,0,0.4),rgba(0,0,0,0.04));
}
.image-wrapper{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  display:block;
  overflow:hidden;
}
.image-wrapper img{
  object-fit:cover;
  width:100%;
  height:100%;
  display:block;
}
.overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,0.5), transparent 60%);
  transition: var(--transition);
}
.label{
  position:absolute;
  bottom:0px;
  left:0px;
  display:flex;
  align-items:center;
  gap:0px;
}
.label .icon{
  width:80px;
  height:80px;
  flex-shrink:0;
  object-fit:contain;
}
.label .title{
  font-size:1.125rem;
  font-weight:700;
  color:#fff;
  text-shadow:0 8px 20px rgba(0,0,0,0.35);
}
.card-body{
  padding:1rem 1rem 1.25rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.card-body p{
  margin:0;
  font-size:.95rem;
  color: rgba(31,45,51,.9);
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  border:1px solid transparent;
  padding:.55rem 1rem;
  transition: var(--transition);
  font-size:.85rem;
}
.btn.primary{
  background: var(--brand);
  color:#fff;
  border:none;
}
.btn.primary:hover{
  filter:brightness(1.1);
}
.btn.secondary{
  background:#fff;
  color: var(--brand);
  border:1px solid var(--brand);
}
.btn.secondary:hover{
  background:rgba(47,79,79,.05);
}

/* Extra info cards */
.extra-info{
  margin:2rem 0 4rem;
}
.cards-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
}
.info-card{
  background: var(--surface);
  padding:1.25rem 1rem;
  border-radius:14px;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.info-card h3{
  margin:0;
  font-size:1.1rem;
}
.info-card p{
  margin:0;
  font-size:.9rem;
  line-height:1.3;
  color: rgba(31,45,51,.85);
}

/* Footer */
.site-footer{
  background:#fff;
  padding:2rem 0 1.5rem;
  border-top:1px solid rgba(0,0,0,0.04);
}
.site-footer .container{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(140px,1fr)) 1fr;
  gap:1.5rem;
  align-items:start;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-weight:600;
  font-size:1rem;
}
.footer-brand img{
  display:block;
  border-radius:6px;
}
.footer-links{
  display:flex;
  gap:2rem;
  flex-wrap:wrap;
}
.footer-links div{
  display:flex;
  flex-direction:column;
  gap:.25rem;
}
.footer-links h4{
  margin:0 0 .4rem;
  font-size:.75rem;
  letter-spacing:1px;
  text-transform:uppercase;
}
.footer-links a{
  text-decoration:none;
  color: var(--text);
  font-size:.9rem;
  margin:2px 0;
}
footer .copyright{
  grid-column:1/-1;
  font-size:.7rem;
  margin-top:1rem;
  color:rgba(31,45,51,.6);
}

/* Responsive tweaks */
@media (min-width: 900px){
  .hero-content h1{
    font-size:3rem;
  }
  .hero-content p{
    font-size:1.1rem;
  }
  .header-inner{
    padding:1rem 0 0;
  }
}

@media (max-width:768px){ 
.main-nav {
  display: none;
}
}