@media screen and (min-width: 100px) and (max-width: 950px) {
    .box-1 p {
        margin-bottom: 2em;
    }
    .content-1 {
        margin: auto;
        display: block;
        padding: 1em;
    }
    .describe {
        max-width: 100%;
        margin: auto;
        width: 800px;
        margin-bottom: 2em;
    }
    .describe h2 {
        text-align: center;
    }
    .describe p {
        max-width: 100%;
    }
    .describe button {
        margin: auto;
    }
    .describe img {
        margin: auto;
    }
    /*Section 2*/
    /*Section 3*/
    .content-3 img {
        max-width: 500px;
    }
    .content-3 {
        width: 100%;
        padding: 0;
    }
    .card-content {
        margin: auto;
        width: 100%;
    }
    .card-text {
        max-width: 100%;
        margin: 0;
    }
    .content-4 {
        justify-content: center;
        max-width: 100%;
    }
    .newsletter {
        width: 90%;
        margin: 1em 1em;
        height: fit-content;
        justify-content: center;
    }
    .newsletter input {
        width: 300px;
    }
    .newsletter button {
        height: 40px;
        padding: 0;
    }
}
@media screen and (max-width:579px) {
    
    .contain-1 h1 {
        font-size: 2rem;
    }

    .content-1 img {
        width: 100%;
    }

    .content-2 {
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: center;
    }

    .content-2 .fade {
        background-size: 90%;
        margin: auto;
    }

    .newsletter input {
        width: 12rem;
    }

    footer {
        flex-direction: column;
    }

    .text-footer {
        width: 100%;
        text-align: justify;
        margin: 0;
        margin-bottom: 2rem;
    }
    
    .central-links {
        display: flex;
        width: 100%;
    }

    .fade {
        text-align: center;
    }

    .fade:hover::before {
        width: 90%;
        height: 95%;
    }
}