/* Fonts and base styles moved from inline <style> */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');

* {
    font-family: 'Tajawal', sans-serif;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Small helpers retained here if needed later */
.hidden-by-js {
    display: none;
}

/* Theme variables and overrides for a more professional light/dark look */
:root {
    --bg: #F8FAFC;
    /* light - Tailwind gray-50 */
    --text: #0F1724;
    /* light - nearly black */
    --muted: #6B7280;
    --card: #FFFFFF;
    --header: #FFFFFF;
    --footer: #0B1220;
    --gold: #D4AF37;
}

.dark {
    --bg: #071026;
    /* deep blue black */
    --text: #E6EEF8;
    /* light text */
    --muted: #9CA3AF;
    --card: #0F1724;
    /* dark card */
    --header: #071026;
    --footer: #000000;
    --gold: #D4AF37;
}

/* Apply to common utility classes to keep Tailwind markup but use nicer variables */
.bg-gray-50 {
    background-color: var(--bg) !important;
}

.bg-white {
    background-color: var(--card) !important;
}

.bg-gray-900 {
    background-color: var(--card) !important;
}

.text-gray-900 {
    color: var(--text) !important;
}

.text-gray-100 {
    color: var(--text) !important;
}

.text-gray-700 {
    color: var(--muted) !important;
}

.border-gray-200 {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Header & footer tweaks */
header {
    background-color: var(--header) !important;
}

footer {
    background-color: var(--footer) !important;
    color: var(--text) !important;
}

/* Buttons using gold color keep the same accent */
.bg-gold {
    background-color: var(--gold) !important;
}