@import url('https://fonts.googleapis.com/css?family=Exo:100');

        .slider-container {
            position: relative;
            width: 100%;
            height: 100vh;
            background: #000;
        }

        .slide {
            position: absolute;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            opacity: 0;
            z-index: 0;
            transition: opacity 0.8s ease-in-out;
            background-color: #000;
            /* fallback in case image not loaded */
        }

        .slide span {
            position: absolute;
            bottom: 40px;
            left: 40px;
            background: rgba(0, 0, 0, 0.5);
            color: white;
            font-size: 3rem;
            padding: 20px 20px;
            border-radius: 10px;
        }

        .active {
            opacity: 1;
            z-index: 1;
        }

        /* Slide animation classes */
        .animate-up {
            animation: slideUp 1s ease;
        }

        .animate-down {
            animation: slideDown 1s ease;
        }

        .animate-left {
            animation: slideLeft 1s ease;
        }

        .animate-right {
            animation: slideRight 1s ease;
        }

        .animate-fade {
            animation: fade 1s ease;
        }

        @keyframes slideUp {
            from {
                transform: translateY(100%);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @keyframes slideDown {
            from {
                transform: translateY(-100%);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @keyframes slideLeft {
            from {
                transform: translateX(100%);
                opacity: 0;
            }

            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes slideRight {
            from {
                transform: translateX(-100%);
                opacity: 0;
            }

            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes fade {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }
@media (max-width: 768px) {
    .slider-container {
        height: 60vh; /* reduce slider height on mobile */
    }

    .slide span {
        font-size: 1.5rem;
        left: 20px;
        bottom: 20px;
        padding: 8px 16px;
    }
}