@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800;900&family=Poppins:wght@300;400;600;700&display=swap');

html { scroll-behavior: smooth; }
body { font-family: 'Cairo', sans-serif; }

/* Animation Keyframes */
@keyframes slowZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}
.animate-slow-zoom {
    animation: slowZoom 20s infinite alternate linear;
}

@keyframes pulseSlow {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
}
.animate-pulse-slow {
    animation: pulseSlow 2s infinite;
}

/* Brands Ticker Animation */
.brands-wrapper {
    display: flex;
    white-space: nowrap;
    animation: ticker 30s linear infinite;
}
@keyframes ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(50%); } /* RTL adjusted */
}
/* For English/LTR support adjustment via JS or specific media query might be needed, 
   but for visual simplicity, centered scrolling or seamless loop works fine. */

/* Navigation */
.nav-link { position: relative; color: #333; transition: color 0.3s; }
.nav-link::after {
    content: ''; position: absolute; bottom: -5px; left: 0; width: 0%; height: 2px; background-color: #b91c1c; transition: width 0.3s ease;
}
.nav-link:hover { color: #b91c1c; }
.nav-link:hover::after { width: 100%; }

/* Buttons */
.main-btn {
    background: #b91c1c; color: white; transition: all 0.4s ease; border: 2px solid #b91c1c;
    display: inline-flex; justify-content: center; align-items: center;
}
.main-btn:hover { background: transparent; color: white; border-color: white; box-shadow: 0 0 15px rgba(185,28,28,0.5); }

.glass-btn {
    background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3);
    color: white; transition: all 0.3s ease; display: inline-flex; justify-content: center; align-items: center;
}
.glass-btn:hover { background: white; color: #b91c1c; }

/* Utilities */
.hover-scale:hover { transform: scale(1.05); }
.dir-ltr { direction: ltr; }

/* Mobile Menu */
#mobile-menu { animation: slideDown 0.3s ease-in-out forwards; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* Responsive Text Fixes */
@media (max-width: 640px) {
    h1 { font-size: 2.5rem !important; }
    h2 { font-size: 2rem !important; }
}