/* Home Page Specific Styles */

/* Carousel Styles */
.carousel-slide {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.carousel-slide.active {
    display: block;
    opacity: 1;
}

.carousel-dot.active {
    background-color: white !important;
    transform: scale(1.2);
}

/* Animation Keyframes */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

@keyframes float-delay {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-float-delay {
    animation: float-delay 8s ease-in-out infinite 2s;
}

/* Counter Animation */
.counter {
    transition: all 0.3s ease;
}

/* Video Background */
video {
    object-fit: cover;
    filter: brightness(0.7);
}

/* Gradient Overlays */
.bg-gradient-overlay {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.8) 0%, rgba(20, 184, 166, 0.7) 50%, rgba(249, 115, 22, 0.8) 100%);
}

/* Hero Section Height - Reduced for better proportions */
.h-screen {
    height: 75vh;
    min-height: 500px;
    max-height: 700px;
}

/* RTL styles moved to rtl.css for consistency - see static/css/rtl.css */

/* Statistics Animation */
.counter-animate {
    animation: countUp 2s ease-out forwards;
}

@keyframes countUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Feature Cards Hover Effect */
.feature-card:hover {
    transform: translateY(-5px);
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .h-screen {
        height: 85vh;
        min-height: 550px;
        max-height: 750px;
    }

    .text-5xl {
        font-size: 2.5rem;
    }

    .text-7xl {
        font-size: 3.5rem;
    }

    /* Statistics section mobile adjustments */
    .grid.grid-cols-2.md\:grid-cols-4 {
        gap: 1rem;
    }

    .grid.grid-cols-2.md\:grid-cols-4 .text-center {
        padding: 1rem 0.5rem;
    }

    .grid.grid-cols-2.md\:grid-cols-4 h3 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .grid.grid-cols-2.md\:grid-cols-4 p {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
}

@media (max-width: 640px) {
    .h-screen {
        height: 90vh;
        min-height: 600px;
        max-height: 800px;
    }

    /* Fix carousel dots positioning without !important */
    .carousel-dots-container {
        bottom: 2rem;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 20;
    }

    /* Add more padding to carousel content to prevent overlap */
    .carousel-slide .animate-fade-in {
        padding-bottom: 5rem;
    }

    /* Ensure proper spacing for button containers */
    .carousel-slide .flex.flex-col.sm\:flex-row {
        margin-bottom: 4rem;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .carousel-slide {
        background-color: rgba(0, 0, 0, 0.8);
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .animate-float,
    .animate-float-delay,
    .animate-fade-in,
    .counter-animate {
        animation: none;
    }

    .transition-all,
    .transition-colors,
    .transition-transform {
        transition: none;
    }
}