:root{
  --bg:#F3F4F6; 
  --text:#1F2937; 
  --muted:#4B5563; 
  --accent:#8B5CF6; 
  --white:#fff;
  --max:1100px; 
  --radius:18px;
}
*{box-sizing:border-box}
html,body {
    margin:0;
    padding:0
}

body {
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); background:var(--bg); line-height:1.6;
}
h1,h2,h3 {
    font-family:Merriweather,Georgia,serif; 
    margin:0 0 .4rem }
a {
    color:var(--accent); 
    text-decoration:none
}
a:hover {
    text-decoration:underline
}

/*navi bar*/

.site-header {
  max-width:var(--max); 
  margin:0 auto; 
  padding:18px 20px;
  display:flex; 
  align-items:center; 
  justify-content:space-between;
}
.logo {font-weight:700; 
    font-size:1.3rem; 
    color:var(--text)
}

nav a {
    margin-left:16px; 
    padding:8px 10px; 
    border-radius:10px; 
    color:var(--text)
}
nav a.active, nav a:hover {
    background:var(--white)
}


.hero{
  max-width:var(--max); 
  margin:12px auto; 
  padding:24px; 
  background:var(--white);
  border-radius:var(--radius); 
  display:grid; gap:24px; 
  grid-template-columns:1.1fr .9fr;
  align-items:center; 
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.hero-img {
    width:100%; 
    border-radius:14px; 
    object-fit:cover
}
.hero-inner h1 {
    font-size:2.2rem }
.btn {
  display:inline-block; 
  background:var(--accent); 
  color:var(--white);
  padding:12px 18px; 
  border-radius:12px; 
  font-weight:600; 
  margin-top:10px;
}
.btn:hover {
    filter:brightness(1.05); 
    text-decoration:none
}
.highlights{
  max-width:var(--max); 
  margin:18px auto 40px; 
  padding:0 24px;
  display:grid; 
  gap:18px; 
  grid-template-columns:repeat(3,1fr);
}
.highlights article{
  background:var(--white); border-radius:var(--radius); padding:18px;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}
.highlights h3 {
    margin-bottom:.3rem
}


.grid{
  max-width:var(--max); 
  margin:20px auto 60px; 
  padding:0 24px;
  display:grid; 
  gap:18px; 
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.card{
  background:var(--white); 
  border-radius:var(--radius); 
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}
.card img{width:100%; height:180px; object-fit:cover}
.card .p {
    padding:14px
}

.badge {
    display:inline-block; 
    font-size:.8rem; 
    padding:4px 8px; 
    background:#ede9fe; 
    border-radius:999px
}

.locations {
    max-width:var(--max); 
    margin:20px auto 60px; 
    padding:0 24px}
.loc-item {
    background:var(--white); 
    border-radius:var(--radius); 
    padding:16px; 
    margin-bottom:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}

/* Footer */
.site-footer{padding:26px 20px; text-align:center; color:var(--muted)}


@media (max-width:900px){
  .hero{grid-template-columns:1fr}
}