/* Container for the slider */
.slider {
    position: relative;
    width: 100%;
    height: 700px; /* Fixed height for the slider */
    margin-top: 02px; /* Push the slider below the navbar */
    overflow: hidden; /* Hide overflow content */
}

    /* Use flexbox to line up the images horizontally */
    .slider .slides {
        display: flex;
        transition: transform 0.5s ease-in-out; /* Smooth transition for sliding effect */
      
    }

/* Individual slide styles */
.slide {
    flex: 0 0 100%; /* Each slide takes up 100% of the container width */
    position: relative; /* Text overlay will be relative to this */
    display: flex; /* Use flexbox to position the text properly */
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    box-sizing: border-box;
    overflow: hidden;
}

.slider img {
    width: 100%; /* Make images responsive */
    height: 700px;
    object-fit: cover;
}
/* Mobile responsiveness */
@media screen and (max-width: 768px) {
    .slider {
        width: 100%; /* Make images responsive */
        height: 300px;
    }

        .slider img {
            width: 100%; /* Make images responsive */
            height: 300px;
            object-fit: cover; /* Maintain the cover property for mobile images */
        }
}


/* Keyframes for text animation */
@keyframes fadeInUp {
    from {
        opacity: 0; /* Start invisible */
        transform: translateY(20px); /* Start slightly below */
    }

    to {
        opacity: 1; /* Fully visible */
        transform: translateY(0); /* Final position */
    }
}




/* Text overlay */
.text-overlay {
    position: absolute;
    top: 70%; /* Center vertically */
    left: 0%; /* Center horizontally */
    transform: translate(-50%, -0%);
    text-align: left;
    color: white; /* White text for contrast */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Add shadow for readability */
    opacity: 0; /* Initially hidden */
    animation: fadeInUp 1s ease-in-out forwards; /* Trigger animation */
    z-index: 2;
}

.big-text {
    font-size: 36px;
    font-weight: bold;
    margin: 0;
}

.small-text {
    font-size: 18px;
    margin: 5px 0 0;
}

/* Trigger animation dynamically */
.text-overlay.animate {
    animation: fadeInUp 1s ease-in-out forwards; /* Trigger animation */
}



@media screen and (max-width: 768px) {
    .big-text {
        font-size: 24px;
    }

    .small-text {
        font-size: 14px;
    }
}