body{
margin:0;

font-family:Segoe UI,Arial,sans-serif;

background:#65637E;
color:#c2410c;

line-height:1.6;
}

/* ---------------- */
/* NAVBAR */
/* ---------------- */

.navbar{

position:fixed;

top:0;
left:0;
right:0;

height:60px;

display:flex;

align-items:center;

background:white;

box-shadow:0 2px 8px rgba(0,0,0,.08);

z-index:1000;

padding:0 20px;

box-sizing:border-box;
}

.logo{

font-size:24px;

font-weight:bold;

color:#c2410c;

flex-shrink:0;
}

.nav-links{

margin-left:auto;

display:flex;

gap:14px;
}

.nav-links a{

text-decoration:none;

font-size:15px;

font-weight:600;

color:#c2410c;
}

/* ---------------- */
/* HERO */
/* ---------------- */

.hero{

height:170px;

margin-top:60px;

background-image:url("/assets/images/hero.jpg");

background-size:cover;

background-position:center center;

position:relative;

display:flex;

justify-content:center;

align-items:center;

text-align:center;
}

.overlay{

position:absolute;

inset:0;

background:rgba(0,0,0,.20);
}

.hero-content{

position:relative;

color:white;

padding:10px;
}

.hero h1{

font-size:30px;

margin:0;
}

.hero p{

font-size:15px;

margin-top:8px;
}

/* ---------------- */
/* CONTENT */
/* ---------------- */

.card{

max-width:900px;

margin:50px auto;

padding:35px;

background:white;

border-radius:14px;

box-shadow:0 2px 10px rgba(0,0,0,.06);
}

.center{

text-align:center;
}

/* ---------------- */
/* EVENTS */
/* ---------------- */

.event-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));

gap:22px;

padding:20px;

max-width:1400px;

margin:auto;
}

.event-card{

background:white;

padding:24px;

border-radius:14px;

text-decoration:none;

color:inherit;

box-shadow:0 2px 10px rgba(0,0,0,.06);

transition:.2s;
}

.event-card:hover{

transform:translateY(-3px);

box-shadow:0 6px 18px rgba(0,0,0,.10);
}

/* ---------------- */
/* FOOTER */
/* ---------------- */

footer{

padding:20px;

margin-top:40px;

text-align:center;

background:#c2410c;

color:white;
}

/* ---------------- */
/* MOBILE */
/* ---------------- */

@media (max-width:768px){

.navbar{

padding:0 12px;
}

.logo{

font-size:20px;
}

.nav-links{

gap:10px;
}

.nav-links a{

font-size:13px;
}

.hero{

height:120px;
}

.hero h1{

font-size:24px;
}

.card{

margin:20px 12px;

padding:24px;
}

.event-grid{

grid-template-columns:1fr;
}
}