.viewport {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    /* z-index: -1; */
}

.image-container {
    position: relative;
    width: 100%;
    height: 100%;
    /* z-index: -1; */
}

.panning-image {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    /* Start slightly zoomed in for the pan-out effect */
    transform: scale(1.1);
    filter: blur(1px);
}

.panning-image.active {
    opacity: 1;
    animation: pan-out 5s linear forwards;
}

@keyframes pan-out {
    0% {
        transform: scale(1) translate(0, 0);
    }

    100% {
        transform: scale(1.1) translate(0, 0);
    }
}

.image-content {
    position: absolute;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    top: 40vh;
    left: 150px;
    width: 1000px;
    color: white;
    font-size: 4rem;
    line-height: 4.5rem;
}

.image-content.active {
    opacity: 1;
}


/* *************mobile queries*************** */

@media (max-width: 768px) {
    .image-content {
        top: 12rem;
        left: 1rem;
        width: 300px;
        font-size: 2.5rem;
        line-height: 3rem;
    }
}