@charset "UTF-8";

@media only screen and (max-width: 600px) {
    nav ul {
        flex-direction: column;
        display: none;
        background-color: #ffffff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
    }

    .nav-toggle {
        display: block;
        cursor: pointer;
        margin: 15px auto 0;
    }

    .nav-toggle img {
        width: 35px;
    }

    .about-image {
        float: none;
        width: 100%;
        max-width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
    }

    header.hero-banner {
        background-size: cover;
        background-position: bottom right;
    }

    .about-section {
        flex-direction: column;
        text-align: center;
    }
}