:root {
    --bg: #F9F9F5;
    --text: #2C2C2C;
    --primary: #D4AF37; /* Gold */
    --secondary: #1A2E35; /* Navy */
    --card: #FFFFFF;
    --border: #E0E0E0;
    --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

[data-theme="dark"] {
    --bg: #121212;
    --text: #E0E0E0;
    --primary: #F0C448;
    --secondary: #2C3E50;
    --card: #1E1E1E;
    --border: #333;
}

body { font-family: var(--font-main); background: var(--bg); color: var(--text); margin: 0; line-height: 1.6; transition: background 0.3s, color 0.3s; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
a { color: inherit; text-decoration: none; }

/* Nav */
.navbar { background: var(--card); border-bottom: 1px solid var(--border); padding: 1rem 0; position: sticky; top: 0; z-index: 100; }
.nav-flex { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.brand { font-size: 1.5rem; font-weight: bold; color: var(--primary); }
.nav-links a { margin-left: 20px; font-weight: 500; }
.btn-nav { background: var(--primary); color: #fff; padding: 0.5rem 1rem; border-radius: 4px; }
.lang-switcher a { margin: 0 5px; font-size: 0.9rem; opacity: 0.6; }
.lang-switcher a.active { opacity: 1; font-weight: bold; border-bottom: 2px solid var(--primary); }
.theme-toggle button { background: none; border: 1px solid var(--border); color: var(--text); cursor: pointer; padding: 2px 6px; border-radius: 4px; margin-left: 2px; }

/* Hero */
.hero { background: var(--secondary); color: white; padding: 4rem 0; text-align: center; }
.hero h1 { font-size: 2.5rem; margin-bottom: 1rem; }
.btn-primary { background: var(--primary); color: white; padding: 10px 20px; border-radius: 4px; display: inline-block; font-weight: bold; margin-top: 1rem; }

/* Cards & Grids */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 2rem 0; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin: 2rem 0; }
.card { background: var(--card); border: 1px solid var(--border); padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }

/* Forms */
input, textarea, select { width: 100%; padding: 10px; margin-top: 5px; margin-bottom: 15px; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 4px; box-sizing: border-box; }
button[type="submit"] { background: var(--secondary); color: white; padding: 12px 24px; border: none; cursor: pointer; font-size: 1rem; border-radius: 4px; }

/* Carousel (Simple) */
.carousel { position: relative; overflow: hidden; border-radius: 8px; margin-bottom: 2rem; }
.carousel-track { display: flex; transition: transform 0.5s ease; }
.carousel-slide { min-width: 100%; height: 400px; background-color: #ddd; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.carousel-nav { position: absolute; bottom: 10px; width: 100%; text-align: center; }
.carousel-btn { background: rgba(0,0,0,0.5); color: white; border: none; padding: 10px; cursor: pointer; border-radius: 50%; }

/* Mobile */
@media (max-width: 768px) {
    .grid-2 { grid-template-columns: 1fr; }
    .nav-flex { flex-direction: column; }
    .nav-links { margin-top: 10px; }
}

.brand--logo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.brand-logo{
  height: 8rem;        /* controls how big it looks in navbar */
  width: auto;
  display:block;
}

.brand-text{
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--text);
  line-height: 1;
}

/* Optional: hide text on small screens */
@media (max-width: 520px){
  .brand-text{ display:none; }
  .brand-logo{ height: 32px; }
}