@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

@import url(/styles/header.css);
@import url(/styles/footer.css);
@import url(/styles/produtos.css);
@import url(/styles/contato.css);
@import url(/styles/beneficios.css);
@import url(/styles/principal.css);
@import url(/styles/mapa.css);


.vacinacao {
    width:50px;
    height: 50px;
}

.banho{
    width:50px;
    height: 50px;
}

.check{
    width:50px;
    height: 50px;
    }
    
#logo {
    width: 50px;
    height: 50px;
}

:root {
   --cor-principal:#845EC2;
   --cor-escura:#47136c ;
   --cor-secundaria:#e3d3e6;}

   body{
  background-color:#cfb4cc;}
div{
  border: 2px solid #d6a7d6;}
 
/* SELETORES AVANÇADOS PARA SEREM USADOS

main p {
    background: purple;
}

main > p {
    background: purple; 
}

img + p { 
    background: pink;
}

img ~ p {
    background: purple
} 

.principal p:not(#missao) {
    background: pink;
}

.form-center {
    max-width: 600px;
    margin: 40px auto;
    padding: 30px;
    width: 100%;
}

.form-center label,
.form-center legend {
    display: block;
    font-size: 16px;
    margin: 0 0 10px;
}

.form-center input {
    display: inline-block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: auto;
}

.form-center .input-padrao {
    display: inline-block;
    margin: 0 0 20px;
    padding: 10px 25px; 
    width: 100%;
}
@media screen and (max-width: 480px) {
    .caixa, .principal, .conteudo-beneficios, .mapa-conteudo, .video {
        width: auto;
    }

    h1 {
        text-align: center;
    }

    nav {
        position: static;
    }

    .lista-beneficios, .imagem-beneficios {
        width: 100%;
    }

}