@media only screen and (min-width: 767px) {

.hero-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 550px;
    background-color: #f0f0f0;
    position: relative; /* Add position relative */
 }

.hero-content img {
    position: absolute; /* Add position absolute */
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    width: 100%; /* Set image width to cover the entire section */
    height: 100%; /* Set image height to cover the entire section */
    object-fit: cover; /* Ensure the image covers the entire space while maintaining aspect ratio */
    opacity: 0;
    transition: opacity 1s ease-in-out; /* Adjust timing and easing function as needed */
 }
 
 .hero-mobile {
     display: none;
 }
 
}

@media only screen and (max-width: 767px) {
    
    .hero-mobile {
         display: block !important;
    }
    
    .hero {
        display: none;
    }
    
    .hero-mobile-content {
        display: flex;
        justify-content: center;
        align-items: center;
        object-fit: cover;
        height: 350px; /* Set a maximum height for mobile devices */
        background-color: #f0f0f0;
        position: relative;
    }

    .hero-mobile-content img {
        position: absolute; /* Change position to relative */
        margin: 0;
        padding: 0;
        top: 0;
        left: 0;
        width: 100%; /* Reset image width */
        height: 350px; /* Reset image height */
        opacity: 0;
        transition: opacity 1s ease-in-out;
    }
 }