/* styles.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    /*background: #003087; /* Deep blue background */
    margin: 0;
}

.neal-wrapper {
    position: relative;
}

.slider-container {
    width: 1200px;
    height: 450px;
    mask-image: url('images/neal-mask-3.png');
    -webkit-mask-image: url('images/neal-mask-3.png');
    mask-size: cover;
    -webkit-mask-size: cover;
}

.slider-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images fill the container */
    opacity: 0;
    transition: opacity 1s ease-in-out; /* Smooth fade effect */
}

.slider-container img.active {
    opacity: 1; /* Only the active image is visible */
}