* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden; /* Prevent scrolling */
}

.hero {
    height: 100vh; /* Full viewport height */
    width: 100vw; /* Full viewport width */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.hero img {
    height: 100%; /* Set height to 100% */
    width: auto;  /* Width is auto to maintain aspect ratio */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the image */
}

/* Media Queries for Smaller Devices */
@media (max-width: 1024px) { /* iPads and smaller tablets */
    .hero img {
        height: auto; /* Maintain aspect ratio */
        width: 100%;  /* Width is 100% to fill the screen */
    }
}

@media (max-width: 768px) { /* Mobile devices */
    .hero img {
        height: auto; /* Maintain aspect ratio */
        width: 100%;  /* Width is 100% to fill the screen */
    }
}

@media (max-width: 480px) { /* Very small mobile devices */
    .hero img {
        height: auto; /* Maintain aspect ratio */
        width: 100%;  /* Width is 100% to fill the screen */
    }
}