media.css

/*Media query para telas de tablets*/
@media screen and (min-width: 480px) and (max-width: 768px) {
    
}

/*Media query para telas de tablets2*/
@media screen and (min-width: 480px) and (max-width: 630px) {

    .cabecalho {
        display: flex;
    }

    .logo {
        width: 25%;
    }

    .desc {
        width: 85%;
        margin: -23px 10% 30px 11%;
        font-size: smaller;
        color: var(--cor2);
    }

    .sred1 {
        width: 85%;
        margin: 15% 5% 30px 8%;
        background-color: var(--cor1);
        box-shadow: 0 0 10px black;
        border-radius: 20px;
        display: block;
    }

    .sred1 img {
        width: 100%;
    }

    .sred {
        width: 85%;
        margin: 0 5% 30px 8%;
        background-color: var(--cor1);
        border-radius: 20px;
        box-shadow: 0 0 10px black;
        display: block;
    }

    .sred img {
        width: 100%;
    }

    .paragrafo {
        padding: 10px;
        margin: 10px;
        font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) );
        color: var(--cor2);
        line-height: 1.5;
        font-weight: 600;
    }

    .paragrafo h1 {
        font-size: x-large;
        margin: 0 0 5px 4px;
    }

    .espaco {
        width: 75%;
        margin: 0 10% 30px 11%;
        box-shadow: 0 0 10px black;
        border-radius: 20px;
        display: flex;
        background-color: #777777;
    }

    .paragrafo2 {
        width: 100%;
        padding: 10px;
        margin: 0 10% 0 6%;
        font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) );
        color: var(--cor2);
        line-height: 1.5;
        font-weight: 600;
    }
    
    .paragrafo2 h1 {
        width: 100%;
        margin: 0 0 5px 2%;
        font-size: x-large;
    }

    .boxs {
        display: block;
    }

    .box1, .box2, .box3 {
        width: 60%;
        margin: 0 0 4% 17%;
        text-align: center;
        border-radius: 10px;
    }

    .certificado {
        width: 80%;
        margin: -10px 0 2% 10%;
        border-radius: 10px;
        box-shadow: 0 0 10px black;
    }

    .logoft {
        width: 20%;
    }

}

/*Media query para telas de smartphones*/
@media screen and (max-width: 480px) {
    .cabecalho {
        display: block;
    }

    .logo {
        width: 30%;
        margin: 3% 0 -3% 34%;
    }

    nav ul {
        text-align: center;
        margin: 2% 0 2% 0;
        font-size: small;
        line-height: 1.5;
    }

    .desc {
        width: 80%;
        margin: -23px 10% 30px 11%;
        font-size: smaller;
        color: var(--cor2);
    }
    
    .sred1 {
        width: 85%;
        margin: 30% 5% 30px 8%;
        background-color: var(--cor1);
        box-shadow: 0 0 10px black;
        border-radius: 20px;
        display: block;
    }

    .sred1 img {
        width: 100%;
    }

    .sred {
        width: 85%;
        margin: 0 5% 30px 8%;
        background-color: var(--cor1);
        border-radius: 20px;
        box-shadow: 0 0 10px black;
        display: block;
    }

    .sred img {
        width: 100%;
    }

    .paragrafo {
        padding: 10px;
        margin: 10px;
        font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) );
        color: var(--cor2);
        line-height: 1.5;
        font-weight: 600;
    }

    .paragrafo h1 {
        font-size: x-large;
        margin: 0 0 5px 4px;
    }

    .espaco {
        width: 75%;
        margin: 0 10% 30px 13%;
        box-shadow: 0 0 10px black;
        border-radius: 20px;
        display: flex;
        background-color: #777777;
    }

    .paragrafo2 {
        width: 100%;
        padding: 10px;
        margin: 0 10% 0 6%;
        font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) );
        color: var(--cor2);
        line-height: 1.5;
        font-weight: 600;
    }
    
    .paragrafo2 h1 {
        width: 100%;
        margin: 0 0 5px 2%;
        font-size: x-large;
    }

    .boxs {
        display: block;
    }

    .box1, .box2, .box3 {
        width: 60%;
        margin: 0 0 4% 17%;
        text-align: center;
        border-radius: 10px;
    }

    .certificado {
        width: 80%;
        margin: -10px 0 2% 10%;
        border-radius: 10px;
        box-shadow: 0 0 10px black;
    }

    .logoft {
        width: 20%;
    }
}