/* General Styles */
:root {
    --white: #f4ede0;
    --blue: #0052d5;
    --dark-blue: #003471;
    --purple: #5c43a9;
    --green: #01e7b8;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: "Helvetica", sans-serif;
}

@media (max-width: 768px) {
    body {
        width: 100vw;
    }
    /* navabar */

    .navbar {
        height: 8vh;
        padding: 1rem 0;
    }

    .logo a img {
        height: 6vh;
        /* border-radius: 50%; */
    }

    .hamburger-menu {
        display: inline-block;
        font-weight: 900;
        background-color: transparent;
        border: none;
        font-size: 5vh;
        color: var(--white);
        margin-right: 1.5rem;
    }

    .nav-links {
        /* width: 0; */
        /* display: none; */
        width: 100vw;
        height: 92vh;
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(42, 42, 44, 0.8);
        text-align: center;
        font-size: 5rem;
        backdrop-filter: blur(7px);
    }

    .nav-links li a {
        width: 100vw;
    }

    .closebtn {
        color: white;
        text-decoration: none;
        position: absolute;
        top: 0.5rem;
        right: 1rem;
        font-size: 2.75rem;
        margin: 0;
        padding: 0 1rem;
    }

    /* hero-section */

    .hero {
        height: 92vh;
    }

    .hero-content {
        width: 100%;
    }

    .hero-illustration {
        display: none;
    }

    .feature {
        height: 85vh;
        display: block;
        display: grid;
        /* grid-template-columns: 1fr;
        grid-template-rows: 1fr 3fr; */
    }

    .feature-illustration {
        margin-top: 2.5rem;
        /* grid-column: 1/3; */
        width: 100%;
    }
    .feature-illustration img {
        width: 90%;
        margin-top: 1rem;
        height: 70vw;
        margin-bottom: 3rem;
    }

    .feature-content h2, .feature-content p {
        width: 90vw;
    }    
    .feature-content h2{
        width: 90vw;
        margin-bottom: 2rem;
    }

    .footer {
        height: 70vh;
        padding-bottom: 0;
    }

    .footer-content {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
    }

    .footer-info h3,
    .footer-contact h3,
    .footer-social h3 {
        font-size: 1.5rem;
    }

    .footer-bottom {
        margin: 0;
        text-align: center;
        padding-bottom: 0;
    }
}