@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+KR:wght@100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* 
    FONTES 
font-family: "Noto Sans KR" sans-serif;   links e depoimento de pessoas
font-family: "Noto Sans JP", sans-serif; textos títulos
font-family: "Open Sans", sans-serif;
font-family: "Montserrat", sans-serif;
font-family: "DM Sans", sans-serif;

    CORES
    
    Azul =  #132748
    Amarelo = #d99000
    Branco = #f3f3f3
*/
:root {
    --azul :  #132748;
    --amarelo : #d99000;
    --branco : #f3f3f3;
    --branco-a : #fff;

}

iframe {
    width: 100%;
}

body {
    font-family: "Montserrat", sans-serif;
}

h2,
h3,
h4,
h5,
h6,
a {
    font-family: "Noto Sans KR", sans-serif;
}

.site {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

a {
    text-decoration: none;
    font-weight: 700;
    color: var(--branco-a);
}

a:visited {
    color: var(--branco-a);
}

a:hover {
    color: var(--amarelo);
}

.sobre h2 {
    text-align: justify;
    margin-top: 100px;
}

main {
    width: 80%;
    margin: 20px auto;
}

h2 {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 25px;
}

p {
    font-size: 17px;
    margin-top: 10px;
    font-family: "Noto Sans KR", sans-serif;
}

.sobre,
.vantagens,
.grade {
    line-height: 1.3;
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.vantagens ul {
    font-size: 17px;
    font-family: "Noto Sans JP", sans-serif;
    list-style-type: square;
    padding-left: 20px;
    line-height: 1.3;
}

.periodos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.periodo {
    background-color: var(--branco);
    padding: 15px;
    border-radius: 5px;
}

h3 {
    font-family: "Noto Sans JP", sans-serif;
    color: var(--azul);
}

.laboratorio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.container-imagens {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    justify-items: center;
}

.imagem-labs {
    width: 550px;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
}

@media (max-width:1024px) {
    main {
        .laboratorio {
            .container-imagens {
                img {
                    width: 450px;
                }
            }
        }
    }
}

@media (max-width:768px) {
    main {
        .laboratorio {
            .container-imagens {
                img {
                    width: 350px;
                }
            }
        }
    }
}

@media (max-width:480px) {
    main {
        .laboratorio {


            .container-imagens {
                display: flex;
                flex-direction: column;

                img {
                    width: 290px;
                }
            }
        }

        .vantagens ul {
            margin-top: 10px;
        }


        .grade {
            .periodos {
                display: flex;
                flex-direction: column;
            }
        }
    }
}