:root {
    --gold: #FFD700;
    --dark: #1a1a2e;
    --darker: #0f0f1a;
    --light-bg: #f9f6f0;
    --text-muted: #666;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Lato', sans-serif; background-color: var(--light-bg); }

.site-header { background: var(--darker); padding: 14px 24px; border-bottom: 2px solid var(--gold); }
.logo-icon { font-size: 2rem; }
.brand-name { font-family: 'Playfair Display', serif; color: var(--gold); font-size: 1.6rem; }
.visitor-badge { background: rgba(255,215,0,0.15); color: var(--gold); border: 1px solid var(--gold); padding: 6px 14px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; }

#mainNav { background: var(--dark) !important; border-bottom: 1px solid rgba(255,215,0,0.2); }
.nav-logo { color: var(--gold) !important; font-family: 'Playfair Display', serif; }
.nav-hover { color: #ccc !important; font-weight: 500; transition: color 0.3s; border-bottom: 2px solid transparent; padding-bottom: 4px !important; }
.nav-hover:hover, .nav-hover.active { color: var(--gold) !important; border-bottom: 2px solid var(--gold); }

.hero-section { min-height: 500px; background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460); position: relative; overflow: hidden; }
.hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.3); }
.hero-content { position: relative; z-index: 2; animation: fadeInUp 1s ease; }
.hero-title { font-family: 'Playfair Display', serif; font-size: 3.5rem; color: var(--gold); margin-bottom: 16px; }
.hero-subtitle { color: #ddd; font-size: 1.2rem; margin-bottom: 30px; }
.btn-hero { background: var(--gold); color: var(--darker); font-weight: 700; padding: 12px 32px; border-radius: 30px; border: none; transition: transform 0.3s, box-shadow 0.3s; }
.btn-hero:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(255,215,0,0.4); color: var(--darker); }

.section-title { font-family: 'Playfair Display', serif; font-size: 2.2rem; color: var(--dark); position: relative; padding-bottom: 10px; }
.section-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: var(--gold); border-radius: 2px; }

.filter-select { border: 2px solid var(--gold); border-radius: 8px; font-weight: 500; padding: 10px; }
.filter-select:focus { box-shadow: 0 0 0 3px rgba(255,215,0,0.3); border-color: var(--gold); outline: none; }

.card { border: none; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: transform 0.3s, box-shadow 0.3s; cursor: pointer; }
.card:hover { transform: translateY(-8px); box-shadow: 0 12px 35px rgba(0,0,0,0.15); }
.card-img-top { height: 220px; object-fit: cover; }
.card-body h5 { font-family: 'Playfair Display', serif; color: var(--dark); }
.card-body p { color: var(--text-muted); font-size: 0.9rem; }
.festival-tag { display: inline-block; background: rgba(255,215,0,0.15); color: #a07800; border-radius: 20px; padding: 3px 10px; font-size: 0.75rem; font-weight: 700; margin-top: 8px; }

.gallery-section { background: var(--dark); }
.gallery-section .section-title { color: var(--gold); }
.gallery-item { position: relative; overflow: hidden; border-radius: 12px; cursor: pointer; }
.gallery-img { width: 100%; height: 220px; object-fit: cover; transition: transform 0.4s; display: block; }
.gallery-item:hover .gallery-img { transform: scale(1.08); }
.gallery-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: flex-end; padding: 16px; opacity: 0; transition: opacity 0.3s; }
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-overlay span { color: var(--gold); font-family: 'Playfair Display', serif; font-size: 1.1rem; }

.about-section { background: white; }
.about-text { font-size: 1.05rem; line-height: 1.8; color: var(--text-muted); margin-bottom: 16px; }

.faq-section { background: var(--light-bg); }
.faq-item { border: 1px solid rgba(255,215,0,0.3); border-radius: 10px !important; margin-bottom: 10px; overflow: hidden; }
.faq-btn { background: white !important; color: var(--dark) !important; font-weight: 600; box-shadow: none !important; }
.faq-btn:not(.collapsed) { background: rgba(255,215,0,0.1) !important; }

.contact-section { background: var(--dark); }
.contact-section .section-title { color: var(--gold); }
.contact-section h4 { color: var(--gold); }
.contact-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,215,0,0.2); border-radius: 16px; padding: 24px; color: #ccc; transition: transform 0.3s; }
.contact-card:hover { transform: translateY(-5px); border-color: var(--gold); }
.contact-icon { font-size: 2rem; margin-bottom: 10px; }

.feedback-form .form-control { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,215,0,0.3); color: white; border-radius: 10px; padding: 12px; }
.feedback-form .form-control::placeholder { color: #888; }
.feedback-form .form-control:focus { background: rgba(255,255,255,0.12); border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,215,0,0.2); color: white; outline: none; }
.btn-submit { background: var(--gold); color: var(--darker); font-weight: 700; border-radius: 10px; padding: 12px; border: none; transition: transform 0.3s, box-shadow 0.3s; }
.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,215,0,0.4); color: var(--darker); }

.sitemap-section { background: var(--darker); color: #aaa; }
.sitemap-link { color: #aaa; text-decoration: none; font-size: 0.9rem; transition: color 0.3s; }
.sitemap-link:hover { color: var(--gold); }

.site-footer { background: #000; color: #aaa; text-align: center; padding: 14px; border-top: 2px solid var(--gold); }
.ticker-text { color: var(--gold); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.5px; }

.festival-modal { border-radius: 16px; overflow: hidden; border: none; }
.modal-head { background: var(--darker); border-bottom: 1px solid rgba(255,215,0,0.3); }
.modal-title { font-family: 'Playfair Display', serif; color: var(--gold); font-size: 1.4rem; }
.modal-img { border-radius: 10px; max-height: 300px; object-fit: cover; }
.modal-desc { color: var(--text-muted); font-size: 1rem; line-height: 1.7; }
.btn-download { background: var(--dark); color: var(--gold); border: 1px solid var(--gold); font-weight: 700; border-radius: 10px; padding: 12px; transition: all 0.3s; }
.btn-download:hover { background: var(--gold); color: var(--darker); }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 768px) {
    .hero-title { font-size: 2.2rem; }
    .brand-name { font-size: 1.2rem; }
    .card-img-top { height: 180px; }
}