/* Responsividade */

@media (max-width: 768px) {

    .hamburger {

        display: block;

    }

    

    .nav-links {

        position: fixed;

        top: 70px;

        left: -100%;

        width: 100%;

        height: calc(100vh - 70px);

        background-color: var(--white);

        flex-direction: column;

        align-items: center;

        justify-content: flex-start;

        padding-top: 50px;

        transition: var(--transition);

    }

    

    .nav-links.active {

        left: 0;

    }

    

    .nav-links li {

        margin: 15px 0;

    }

    

    .hero h1 {

        font-size: 2.2rem;

    }

    

    .hero-buttons {

        flex-direction: column;

        align-items: center;

    }

    

    .btn {

        width: 100%;

        max-width: 300px;

    }

    

    .welcome-container {

        flex-direction: column;

    }

}