/* Custom CSS for slider - overriding some Tailwind defaults for specific animations */
body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

.hero-section {
    min-height: 100vh; /* Make hero section cover full viewport height */
    display: flex;
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
    position: relative; /* Needed for absolute children */
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out, visibility 0s 1s; /* Add visibility transition on hide */
    visibility: hidden; /* Start hidden using visibility */
}

.slide.active {
    opacity: 1;
    transition: opacity 1s ease-in-out, visibility 0s 0s; /* No delay on show */
    visibility: visible; /* Make active slide visible */
}

.slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure images cover the area without distortion */
    filter: brightness(0.6); /* Slightly darken images for text contrast */
}

.text-content {
    position: absolute;
    inset: 0; /* Cover the entire slide */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    z-index: 10; /* Ensure text is above image */
    /* Initial state for 'dropping' animation */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    transition-delay: 1.5s;

    /* --- ADDED: Reduce font size for all text within .text-content --- */
    font-size: 10px; /* Adjust this value as needed. 1rem is typically 16px */
    line-height: 1.5; /* Adjust line-height for readability if font-size changes */
}

/* If you have specific headings within .text-content, you'd target them like this: */
.text-content h1 {
    font-size: 2.5rem; /* Example: large heading */
    /* Add !important if Tailwind is aggressively overriding */
}
.text-content p {
    font-size: 1rem; /* Example: paragraph text */
}


.slide.active .text-content {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive height for slide container, ensures aspect ratio on smaller screens */
.slide-container {
    width: 100%;
    height: 100vh; /* Default to full viewport height */
    max-height: 800px; /* Max height for larger screens */
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-2xl */
}

/* Adjust height for smaller screens to prevent image cutting off important content */
@media (max-width: 768px) {
    .slide-container {
        height: 70vh; /* Shorter height on smaller screens */
    }
    /* You might want to adjust text size further for smaller screens */
    .text-content {
        font-size: 0.875rem; /* Example: even smaller on mobile (equivalent to text-sm) */
    }
    .text-content h1 {
        font-size: 1.8rem; /* Example: smaller heading on mobile */
    }
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio (9 / 16 = 0.5625) */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000; /* Optional: background for loading state */
    border-radius: 1rem; /* Matches your rounded-2xl if desired */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Optional: matches shadow-lg */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; /* Remove default iframe border */
}
/* Custom CSS for News Flash Banner */
@keyframes gradientPulse {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animate-gradient-pulse {
    background-size: 200% 200%;
    animation: gradientPulse 3s ease infinite;
}