/* Custom Styles for KP-Promotion Khelili */

/* Fonts setup via Google Fonts in HTML, but fallback definitions here */
:root {
    --font-montserrat: 'Montserrat', sans-serif;
    --font-cairo: 'Cairo', sans-serif;
    --color-gold: #D4AF37;
    --color-night: #0B1120;
}

/* Smooth transition for language switch (Font & Direction) */
html, body {
    transition-property: font-family, direction;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
:hover {
    background::-webkit-scrollbar-thumb: #D4AF37;
}

/* Animations */
.animate-fade-up {
    animation: fadeUp 1s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Reveal on Scroll Classes */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Specific styling for Arabic font override if needed */
body[lang="ar"] p, 
body[lang="ar"] h1, 
body[lang="ar"] h2, 
body[lang="ar"] h3, 
body[lang="ar"] h4, 
body[lang="ar"] span, 
body[lang="ar"] a, 
body[lang="ar"] li, 
body[lang="ar"] div {
    font-family: 'Cairo', sans-serif;
}

/* Specific styling for French to ensure Amiri for Serifs */
body[lang="fr"] h1, 
body[lang="fr"] h2, 
body[lang="fr"] h3, 
body[lang="fr"] .font-serif {
    font-family: 'Amiri', serif;
}
body[lang="fr"] body, 
body[lang="fr"] p, 
body[lang="fr"] a, 
body[lang="fr"] div {
    font-family: 'Montserrat', sans-serif;
}

/* Fix for Mobile Menu in RTL */
html[dir="rtl"] .mobile-menu {
    transform: translateX(-100%);
}
html[dir="rtl"] .mobile-menu.active {
    transform: translateX(0);
}