.hero-images {
            position: relative;
            width: 100%;
            height: 100%; /* Adjust the height as needed */
            overflow: hidden;
        }

        .hero-image {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            animation: fade 12s infinite;
        }

        .hero-image:nth-child(1) {
            animation-delay: 0s;
        }

        .hero-image:nth-child(2) {
            animation-delay: 4s;
        }

        .hero-image:nth-child(3) {
            animation-delay: 8s;
        }

        @keyframes fade {
            0% {
                opacity: 0;
            }
            33.33% {
                opacity: 1;
            }
            66.66% {
                opacity: 0;
            }
            100% {
                opacity: 0;
            }
        }