/**
 * Main CSS File - SEO Optimized & Fast
 */

/* Font Family */
.font-cairo {
    font-family: 'Cairo', sans-serif;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Line Clamp Utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Carousel Styles */
.carousel-slide {
    transition: opacity 0.6s ease-in-out;
}

.carousel-slide.active {
    opacity: 1;
    z-index: 10;
}

.carousel-slide:not(.active) {
    opacity: 0;
    z-index: 1;
}

/* FAQ Accordion */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

.faq-question.active + .faq-answer {
    max-height: 1000px;
    padding-top: 1rem;
}

.faq-question.active i {
    transform: rotate(180deg);
}

/* Performance Optimizations */
img {
    loading: lazy;
    decoding: async;
}

/* Mobile Menu Animation */
#mobile-menu {
    transition: all 0.3s ease-in-out;
}

/* Hover Effects */
.hover\:shadow-xl:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Loading States */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Print Styles */
@media print {
    header, footer, nav {
        display: none;
    }
}

/* Accessibility */
:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* RTL Support */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

/* Performance: Reduce Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}