body {margin:0;font-family:Arial;background:#0a1a3c;color:#f5e6b3;}
header {background:#07132b;padding:20px;display:flex;align-items:center;gap:15px;}
header img {width:120px;}
nav a {color:#d9b560;margin-left:15px;text-decoration:none;font-weight:bold;}
.container {max-width:1000px;margin:auto;padding:20px;}
h1{color:#d9b560;}
.card{background:#0e244d;padding:20px;margin:20px 0;border-left:4px solid #d9b560;}
.gallery img{width:30%;margin:1%;background:#d9b560;height:180px;object-fit:cover;}

footer {
  background:#07132b;
  color:#d9b560;
  text-align:center;
  padding:20px;
  margin-top:40px;
  border-top:2px solid #d9b560;
}
.footer-container p { margin:6px 0; }

.divider {
  width: 120px;
  height: 3px;
  background: #d9b560;
  margin: 40px auto 25px auto;
  border-radius: 2px;
}

.hero {
  width:100%;
  padding:120px 20px;
  background: linear-gradient(rgba(10,26,60,0.6), rgba(10,26,60,0.6)),
              url('hero-placeholder.jpg');
  background-size:cover;
  background-position:center;
  text-align:center;
  color:#f5e6b3;
  font-size:42px;
  font-weight:bold;
  letter-spacing:1px;
  margin-bottom:40px;
  border-bottom:2px solid #d9b560;
}
.ornament {
  text-align:center;
  margin:20px 0;
}



/* ===== Mobile-friendly additions (no color changes) ===== */

/* Make layout fluid */
* { box-sizing: border-box; }

img, .hero img, .gallery img, .footer img { max-width: 100%; height: auto; display: block; }

.container { padding-left: 16px; padding-right: 16px; max-width: 980px; margin: 0 auto; }

/* Nav - stack on small screens and increase tap targets */
nav {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px 0;
}

nav a {
  padding: 10px 12px;
  text-decoration: none;
  display: inline-block;
  line-height: 1.2;
  font-size: 16px;
  border-radius: 6px;
}

/* Hero adjustments */
.hero {
  padding: 32px 18px;
  font-size: 28px;
  text-align: center;
  line-height: 1.1;
}

/* Cards and layout */
.card { padding: 16px; margin-bottom: 14px; }

/* Footer spacing */
footer .footer-container { padding: 20px 16px; }

/* Responsive breakpoints */
@media (max-width: 900px) {
  .hero { font-size: 24px; padding: 28px 14px; }
  nav a { font-size: 15px; padding: 10px 10px; }
  .container h1 { font-size: 26px; }
}

@media (max-width: 600px) {
  /* Make nav links larger and stacked for easy tapping */
  nav {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
  nav a { 
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px;
  }
  header img { width: 72px; height: auto; margin: 8px auto; display:block; }
  .hero { font-size: 20px; padding: 20px 12px; }
  .container { padding-left: 12px; padding-right: 12px; }
  .card { padding: 12px; }
  .divider { margin: 12px 0; }

  /* Make iframe maps responsive and touch-friendly */
  .map-wrapper { width: 100%; height: 320px; overflow: hidden; border-radius: 8px; }
  .map-wrapper iframe { width: 100%; height: 100%; border: 0; }

/*
.gallery img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px; // optional – remove if you don’t want it 
}
*/




  footer .footer-container { font-size: 15px; padding: 18px 12px; }
}

@media (max-width: 400px) {
  .hero { font-size: 18px; padding: 16px 10px; }
  .container h1 { font-size: 22px; }
  nav a { font-size: 15px; padding: 10px; }
  .map-wrapper { height: 260px; }
  .gallery { grid-template-columns: 1fr; }
}

/* Accessibility: increase hit area for links on touch devices */
@media (hover: none) {
  nav a { padding: 12px; font-size: 16px; }
}



/* Hamburger Menu */
.hamburger {
  display:none;
  font-size:28px;
  color:#d9b560;
  cursor:pointer;
}
@media (max-width:768px) {
  nav {
    display:none;
    flex-direction:column;
    background:#07132b;
    width:100%;
    padding:10px 0;
  }
  nav a {
    padding:12px;
    font-size:18px;
  }
  .hamburger {
    display:block;
  }
}



/* Clean 3-line hamburger */
.hamburger {
  display:none;
  cursor:pointer;
}
.bar {
  width:28px;
  height:3px;
  background:#d9b560;
  margin:6px 0;
  border-radius:2px;
}
@media (max-width:768px) {
  .hamburger { display:block; }
  nav { display:none; flex-direction:column; background:#07132b; width:100%; }
  nav a { padding:14px; font-size:18px; }
}


/* Fix header scaling */
header {flex-wrap:wrap; justify-content:space-between;}
header img {max-width:100%; height:auto;}

/* Hero image scaling */
.hero img, .hero {width:100%; height:auto; display:block;}

/* Mobile gallery fix 
@media (max-width:768px){
  .gallery img {width:100%; margin:10px 0; height:auto;}
  .container {padding:10px;}
}
*/


.gallery-slider {
  position: relative;
  max-width: 900px;
  margin: 60px auto;
  overflow: hidden;
}

.slides {
  position: relative;
}

.slide {
  width: 100%;
  display: none;
  border-radius: 12px;
}

.slide.active {
  display: block;
}

.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.4);
  color: #fff;
  border: none;
  font-size: 30px;
  padding: 10px 16px;
  cursor: pointer;
  z-index: 10;
}

.nav.prev { left: 10px; }
.nav.next { right: 10px; }

.nav:hover {
  background: rgba(0,0,0,0.7);
}