/* ============================================ LANGUAGE SELECTOR STYLES Add these styles to your styles.css or create a new file called language-selector.css ============================================ */ /* Language Selector - Floating */ .language-selector { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 1001; } .nav.scrolled ~ .language-selector, .language-selector.scrolled { top: 1rem; } .lang-toggle { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(0, 43, 91, 0.1); border-radius: 50px; font-family: 'Poppins', sans-serif; font-size: 0.875rem; font-weight: 600; color: var(--marian-blue); cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 43, 91, 0.1); } .lang-toggle:hover { background: #fff; border-color: var(--celestial-turquoise); box-shadow: 0 6px 20px rgba(0, 198, 255, 0.2); } .lang-toggle svg { transition: transform 0.3s ease; } .lang-toggle.active svg { transform: rotate(180deg); } .current-lang { min-width: 24px; text-align: center; } /* Language Dropdown */ .lang-dropdown { position: absolute; top: calc(100% + 0.5rem); right: 0; background: #fff; border: 1px solid rgba(0, 43, 91, 0.1); border-radius: 15px; padding: 0.5rem; min-width: 160px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; box-shadow: 0 10px 40px rgba(0, 43, 91, 0.15); } .lang-dropdown.active { opacity: 1; visibility: visible; transform: translateY(0); } .lang-option { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.75rem 1rem; background: none; border: none; border-radius: 10px; font-family: 'Poppins', sans-serif; font-size: 0.9rem; color: var(--dark-text); cursor: pointer; transition: all 0.2s ease; text-align: left; } .lang-option:hover { background: linear-gradient(135deg, rgba(0, 198, 255, 0.1), rgba(255, 215, 0, 0.1)); color: var(--marian-blue); } .lang-option.active { background: var(--marian-blue); color: #fff; } .lang-option .flag { font-size: 1.25rem; line-height: 1; } /* Mobile adjustments */ @media (max-width: 768px) { .language-selector { top: 1rem; right: 4.5rem; /* Make room for mobile nav toggle */ } .lang-toggle { padding: 0.4rem 0.75rem; font-size: 0.8rem; } .lang-dropdown { right: -1rem; min-width: 140px; } } /* ============================================ LANGUAGE SELECTOR HTML Add this right after the opening tag ============================================

============================================ */