@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Poppins:wght@300;400;500;600&display=swap');

:root{
  --primary-bg:#1B3A2F;
  --secondary-bg:#3A5A40;
  --accent:#6B8E23;
  --hover:#A3B18A;

  --page-bg:#F4F6F3;
  --card-bg:#FAF9F6;
  --border:#DAD7CD;

  --text-main:#2E2E2E;
  --text-heading:#1A1A1A;
  --muted:#6C757D;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Poppins,sans-serif;background:var(--page-bg);color:var(--text-main)}
h1,h2,h3{font-family:"Playfair Display",serif;color:var(--text-heading)}
.container{max-width:1100px;margin:0 auto;padding:28px}
.card{background:var(--card-bg);border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:0 8px 20px rgba(0,0,0,.05)}
.navbar{background:var(--primary-bg);padding:16px}
.navbar a{color:#fff;margin-right:18px;text-decoration:none;font-weight:500}
.navbar a:hover{color:var(--hover)}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:10px 18px;border-radius:30px;text-decoration:none;border:0;cursor:pointer}
.btn:hover{background:var(--hover);color:var(--primary-bg)}
.footer{margin-top:50px;background:var(--secondary-bg);color:#fff;text-align:center;padding:18px}
input,select,textarea{width:100%;padding:10px;border:1px solid var(--border);border-radius:10px;margin-top:6px}
label{display:block;margin-top:12px;font-weight:500}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid var(--border);text-align:left}
.badge{padding:4px 10px;border-radius:14px;font-size:12px;background:var(--hover);color:var(--primary-bg)}

/* -------- Modern Navbar UX -------- */
.navbar-modern {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(27, 58, 47, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.navbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

.brand-logo {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.22);
  background: linear-gradient(135deg, var(--secondary-bg), var(--hover));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-text strong {
  font-family: "Playfair Display", serif;
  font-size: 16px;
  letter-spacing: 0.2px;
}

.brand-text span {
  font-size: 12px;
  opacity: 0.85;
  font-weight: 500;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.nav-links a {
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 500;
  transition: 0.2s ease;
}

.nav-links a:hover {
  background: rgba(255,255,255,0.10);
  color: #fff;
}

.nav-links a.active {
  background: rgba(255,255,255,0.14);
  color: #fff;
}

.nav-cta {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
}

.nav-cta:hover {
  background: var(--hover) !important;
  color: var(--primary-bg) !important;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hamburger {
  display: none;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
}

.mobile-panel {
  display: none;
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.mobile-panel a {
  display: block;
  padding: 12px 12px;
  border-radius: 12px;
  margin-top: 8px;
  background: rgba(255,255,255,0.07);
  color: #fff;
  text-decoration: none;
}

.mobile-panel a:hover {
  background: rgba(255,255,255,0.12);
}

/* Responsive */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .hamburger { display: inline-flex; }
  .mobile-panel.show { display: block; }
}

/* ---------- Carousel ---------- */
.carousel {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
}

.carousel-track {
  display: flex;
  transition: transform 450ms ease;
  will-change: transform;
}

.carousel-slide {
  min-width: 100%;
  position: relative;
}

.carousel-slide img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
  filter: saturate(1.05);
}

@media (max-width: 700px) {
  .carousel-slide img { height: 220px; }
}

.carousel-overlay {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(27,58,47,0.78);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(8px);
  color: #fff;
  max-width: 720px;
}

.carousel-overlay h2 {
  color: #fff;
  margin-bottom: 6px;
  font-size: 20px;
}

.carousel-overlay p {
  margin: 0;
  opacity: 0.92;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(0,0,0,0.35);
  color: #fff;
  padding: 10px 12px;
  border-radius: 14px;
  cursor: pointer;
  user-select: none;
}

.carousel-btn:hover { background: rgba(0,0,0,0.55); }
.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }

.carousel-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  gap: 8px;
  justify-content: center;
}

.carousel-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.15);
  cursor: pointer;
}

.carousel-dot.active {
  background: var(--hover);
}