*{box-sizing:border-box}
body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:url('assets/bg.jpg') center/cover fixed no-repeat;color:#222}
.header{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;background:linear-gradient(135deg,#8b0000,#a0522d);color:#fff}
.header .left img,.header .right img{height:90px;border-radius:8px;border:3px solid rgba(255,255,255,0.6)}
.header .center{text-align:center;flex:1}
.header h1{margin:0;font-size:44px;letter-spacing:1px}
.header h2{margin:0;font-size:58px;font-weight:400;opacity:0.9}
nav{background:#4b2e05}
nav ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;flex-wrap:wrap}
nav li{position:relative}
nav a{display:block;padding:12px 18px;color:#fff;text-decoration:none;font-weight:600}
nav a:hover,nav a.active{background:rgba(255,255,255,0.08)}
nav ul ul{display:none;position:absolute;top:100%;left:0;background:#6b2f1f;min-width:220px;flex-direction:column;z-index:99}
nav li:hover>ul{display:flex}
nav ul ul ul{left:100%;top:0}
.container{max-width:1100px;margin:20px auto;padding:18px;background:rgba(255,255,255,0.96);border-radius:8px}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.gallery-grid img{width:100%;height:110px;object-fit:cover;border-radius:6px}
footer{background:#4b2e05;color:#fff;padding:18px;text-align:center;margin-top:20px}
.social-icons a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0 6px;border-radius:50%;color:#fff;text-decoration:none;font-weight:700}
.social-icons .facebook{background:#1877f2}
.social-icons .twitter{background:#1da1f2}
.social-icons .whatsapp{background:#25d366}
.social-icons .instagram{background:linear-gradient(45deg,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
@media(max-width:800px){.header{flex-direction:column;gap:10px}.header .left img,.header .right img{height:70px}nav ul{flex-wrap:wrap}}
/* ===== HEADER ===== */
.site-header {
  background-color: #8B0000;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  flex-wrap: wrap;
}

.site-header img {
  width: 100px;
  height: auto;
  border-radius: 8px;
}

.header-center {
  text-align: center;
  flex: 1;
}

.header-center h1 {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
}

.header-center h2 {
  margin: 0;
  font-size: 18px;
}

/* ===== NAVBAR ===== */
.navbar {
  background-color: #3e2600;
  text-align: center;
  position: relative;
}

.navbar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.navbar li {
  margin: 0;
}

.navbar a {
  display: block;
  padding: 12px 20px;
  color: white;
  text-decoration: none;
  font-weight: 500;
}

.navbar a:hover,
.navbar a.active {
  background-color: #a0522d;
}

/* ===== MENU TOGGLE (MOBILE) ===== */
.menu-toggle {
  display: none;
  color: white;
  font-size: 28px;
  cursor: pointer;
  padding: 10px;
  position: absolute;
  top: 0;
  right: 15px;
}

@media (max-width: 768px) {
  .navbar ul {
    display: none;
    flex-direction: column;
    width: 100%;
  }

  .navbar ul.active {
    display: flex;
  }

  .menu-toggle {
    display: block;
  }

  .site-header {
    flex-direction: column;
  }

  .site-header img {
    width: 80px;
  }

  .header-center h1 {
    font-size: 20px;
  }

  .header-center h2 {
    font-size: 16px;
  }
}