/* body {
    min-height: max-content;
}

main {
    min-height: 100vh;
    flex-direction: column;
}

#main-img {
    width: 100%;
}

.slider-controls {
    left: calc(100% - 73px);
}

.slide {}

#main-content {
    width: 100%;
}

header {
    display: none;
}

footer {
    flex-direction: column;
}

.footer-img,
.footer-content {
    width: 100%;
} */

/* Mobile Styles for max-width: 425px */
@media (max-width: 425px) {

    /* Adjust body to accommodate vertical layout */
    body {
        height: auto;
        flex-direction: column;
    }

    /* Header adjusments */
    header {
        width: 100%;
        flex-direction: row-reverse;
    }

    header nav {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
    }


    header .logo {
        width: 50%;

    }

    .menu {
        display: none;
        background-color: black;
        position: absolute;
        top: 0;
        right: 0;
        padding-left: 3em;
        z-index: 10;
        flex-direction: column;
        width: 100vh;
        height: 100vh;
        justify-content: flex-start;
        align-items: flex-end;
        gap: 2em;
        padding: 3em;
    }

    .nav-icon {
        display: inline-block !important;
        width: 50%;
        height: 100%;
        position: fixed;
        z-index: 12;
        top: 47px;
        left: 50px;
    }

    .nav-icon span {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-icon span i {
        color: white;
    }

    #icon-cross {
        display: none;
    }

    /* Header adjusments */



    /* Main image adjustments */
    main {
        flex-direction: column;
        height: 100vh;
    }

    #main-img {
        width: 100%;
        height: 55%;
        /* height: auto; */
        /* Space below the header */
    }

    .slider {
        /* Adjust slider height for mobile */
        height: 100%;
    }

    .slide {
        height: 100%;
    }

    .slide-3 {
        background: url('../images/mobile-image-hero-3.jpg') no-repeat center center/cover;
    }

    .slide-2 {
        background: url('../images/mobile-image-hero-2.jpg') no-repeat center center/cover;
    }

    .slide-1 {
        background: url('../images/mobile-image-hero-1.jpg') no-repeat center center/cover;
    }

    .slider-controls {
        bottom: 0px;
        left: 90%;
        transform: translateX(-50%);
        display: flex;
    }

    .slider-controls span {
        padding: 0.5em 1em;
    }

    /* Main content adjustments */
    #main-content {
        width: 100%;
        height: 45%;
    }

    .content {
        min-height: max-content;
        width: 100%;
    }

    .content h3 {
        font-size: 1.5rem;
        text-align: center;
    }

    .content p {
        font-size: 0.9rem;
        text-align: center;
    }


    /* Footer adjustments */
    footer {
        flex-direction: column;
        height: auto;
        padding: 2em;
    }

    .footer-img {
        width: 100%;
        background: none;
    }

    .footer-img img {
        display: inline-block;
    }

    .footer-content {
        width: 100%;
        padding: 1em 0;
        text-align: center;
    }

    .footer-content h6 {
        font-size: 1.2rem;
    }

    .footer-content p {
        font-size: 0.8rem;
        padding: 0 1em;
    }

}