/*smooth scroll, whole html*/
html {
  scroll-behavior: smooth;
}

/* General Body Styles */
body {
    font-family: 'Inter', sans-serif;
}


/* Hero Section Background */
.hero-bg {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://placehold.co/1600x900/e2e8f0/a0aec0?text=Kenyan+Landscape');
    background-size: cover;
    background-position: center;
}

/* Interactive Element Transitions & Animations */
.cta-button {
    transition: all 0.3s ease;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.program-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.program-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(92, 166, 219, 0.2);
}

.stat-item {
    transition: transform 0.3s ease;
}

.stat-item:hover {
    transform: scale(1.05);
}

/* Fade-in Animation for Sections */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.fade-in-section {
    animation: fadeIn 1s ease-out forwards;
}

/* Horizontal Scroll Animation */
@keyframes scroll-horizontal {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.animate-scroll-horizontal {
    display: flex;
    animation: scroll-horizontal 40s linear infinite;
}

/* Slower animation on mobile screens */
@media (max-width: 768px) {
    .animate-scroll-horizontal {
        animation-duration: 80s;
    }
}

/* Pause scroll on hover for desktop */
@media (hover: hover) {
    .programs-carousel:hover .animate-scroll-horizontal {
        animation-play-state: paused;
    }
}

/* Hide scrollbar for a cleaner look */
#programs-carousel::-webkit-scrollbar {
    display: none;
}

#programs-carousel {
    -ms-overflow-style: none;
    scrollbar-width: none;
}