@import url('https://fonts.googleapis.com/css2?family=Libertinus+Mono&family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amaranth:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wdth,wght@102.8,300..700&display=swap');
* {
    padding: 0;
    margin: 0;
    font-family: "Lora", serif;
    box-sizing: border-box;
    color: rgb(2, 2, 2);
}

body {
    background-color: rgb(255, 255, 255);
    /* background: url(assets/azulado.jpg) no-repeat top center/cover; */
}

header {
  background-color: #C00000;
  display: flex;
  
}

.logotipo-1 {
    width: 90px;
    padding: 8px;
    cursor: pointer;
}

.titulo-logotipo {
    display: flex;
    align-items: center;
    margin: 0 auto 0;
    font-size: 40px;
    color: white;
    font-weight: 900px;
    transition: 0.5s;
    cursor: pointer;
    font-family: "Dancing Script", cursive;
    border-radius: 10px;
    
}

.voltar    {
    display: flex;
    align-items: center;
    margin-right: 20px;
    margin-left: 10px;
    margin-top: 10px;
}

.voltar a {
    text-decoration: none;
    color: rgb(24, 23, 23);
    font-size: 20px;
    font-weight: 500;
    border-radius: 10px;
    padding: 10px;
    transition: all 1.0s;
}

.voltar a:hover {
    background-color: rgba(27, 27, 27, 0.1);
}

.container {
    width: 100%;
    max-width: 630px;
    margin: 112px auto 0px;
    height: auto;
    /* impede que o conteudo saia do container */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    padding-left: 18px;
    padding-right: 18px;
}

.titulos {
    text-align: center;
    padding-top: 15px;
    
    
    
}

h1 {
    font-family: "Dancing Script", cursive;
}

 h2 {
    color:rgb(185, 40, 40);
    font-size: 29px;
    font-family: "Dancing Script", cursive;
 }

 h3 {
    font-family: "Dancing Script", cursive;
    font-size: 32px;
 }

.recital {
    width: 240px;
    margin-top: 26px;
    border-radius: 39px;
    
}

.conhecaCursos {
    text-align: center;
    font-family: "Amaranth", sans-serif;
    font-size: 30px;
}

ul {
    display: flex;
    flex-direction: row;
    /* “Se os itens não couberem em uma linha, mande o que sobrar para a próxima linha.” */
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    /* elimina o pontinho do li */
    list-style-type: none;

}

ul li {
    cursor: pointer;
}



ul li:hover {
    background-color: rgba(120, 59, 180, 0.172);
    border-radius: 19px;
    padding: 8px;
    transition: all 0.6s;
}

.inforCursosC {
    background-color: rgb(242, 244, 250);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: auto;
    border-radius: 8px;
    
    

}

.tituloCurso {
    text-align: center;
    padding-top: 8px;
    
}

.sobreCurso  {
    color: #000514;
    padding: 8px;
    font-size: 17px;
    font-weight: 300;
     font-family: "Lora", serif;
    

}

.frasesInspiradoras {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.frasesInspiradoras h2 {
    color: rgb(185, 40, 40);
    text-align: center;
}
button {
    background-color: rgb(185, 40, 40);;
    border: none;
    border-radius: 10px;
    padding: 8px;
    cursor: pointer;
    width: 10rem;
    color: white;
     font-family: "Amaranth", sans-serif;
     transition: all 0.6s;
    
}

button:hover {
    color: #000000;
}

p {
    text-align: center;
}

.caixa-curso {
  background-color: rgba(0, 0, 0, 0.7); /* cor de fundo escura com transparência */
  padding: 16px;
  margin-top: 20px;
  border-radius: 12px;
  text-align: center;
  font-size: 16px;
  display: none; /* começa invisível */
  color: white;
  font-family: "Lora", serif;
}


.fotosAlunos {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 18px;
    /* margin-left: 67px;
    margin-right: 67px; */
    
}

.alunos {
    width: 164px;
    border-radius: 28px;
}


.localidade {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.visitar {
    color: rgb(187, 20, 20);
    font-family: "Amaranth", sans-serif;
    font-size: 20px;
}


/* footer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    
} */
    .redesSociais {
        display: flex;
        gap: 45px;
        font-size: 22px;
       justify-content: center;
       padding: 8px;
       
       
    }

    .redesSociais a {
        padding: 10px;
        border-radius: 50%;
        transition:  0.9s; 

        
    }



.redesSociais a:hover {
    background-color: rgba(154, 59, 192, 0.178);
  

}

 
    /* celuares */
    @media (max-width: 474px) {

        .rua {
            text-align: center;
        }

    }