@import url("./root.css");


/* NAV */

@media screen and (width <=768px) {
    nav {
        padding: 30px;
    }

    nav ul{
        gap: 20px;
    }

    nav img {
        width: 60px;
    }

    nav ul li a {
        font-size: 1.4rem;
    }
}

@media screen and (width <=500px) {
  

    nav ul li a {
        font-size: 1.3rem;
    }
}



/* TESTIMONIAL */

@media screen and (width <=900px) {
    .testimonial-section {
        grid-template-columns: minmax(250px, 400px);
    }

}

/* CARD SECTION */
@media screen and (width <=815px) {
    .card-section {
        display: flex;
        flex-direction: column;
        margin: auto;
        min-width: 300px;
        max-width: 600px;
    }
}


/* PRODUCTIVE SECTION */

@media screen and (width <=900px) {

    .productive-section {
        grid-template-columns: 1fr;
    }
}



/* EMAIL FORM */

@media screen and (width <=800px) {

    .form-section {
        padding: 30px;
        margin-left: 30px;
        margin-right: 30px;
    }

    form input,
    form button {
        display: block;
        width: 100%;
    }

    form .button {
        width: 100%;
        margin-top: 20px;

    }

}

/* FOOTER */

@media screen and (width <=1328px) {



    .footer-grid-container {
        display: grid;
        grid-template-columns: 1fr;
        margin: 60px auto;
        max-width: 800px;
        /* text-align: center; */
    }


    .links {
        flex-direction: column;
    }

    .networks ul {
        justify-content: center;
    }
}

@media screen and (width <=768px) {

    footer {
        padding-left: 30px;
        padding-right: 30px;
    }
}