/********************************************************************* GERAL ***********************************************************************/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", Arial, serif;
}

:root{
    --primary-color: #780C28;
    --secondary-color: #5CB338;
    --tertiary-color: #CAE0BC;
    --black-color: #151515;
    --white-color: #F7F7F7;

    font-family: "Montserrat", Arial, serif;
    font-size: 16px;
    color: var(--black-color);
}

html {
  scroll-behavior: smooth;
}

body{
    background-color: var(--white-color);
    text-align: center;
}

a{
    text-decoration: none;
}

li{
    list-style: none;
}

h2{
    font-size: 2.5rem; /*40px*/
    
    margin: 60px 0 10px;
}

.grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    justify-items: center;
    align-items: stretch;
    gap: 30px;
}

/********************************************************************* HEADER ***********************************************************************/
header{
    /*Navbar fixa*/
    position: sticky;
    top: 0;
    z-index: 1000;

    background-color: var(--primary-color);
    color: var(--white-color);

    padding: 20px 40px;
}

header a{
    color: var(--white-color);
    font-weight: 500;
}

.logo{
    width: 60px;
}

.navbar-desktop,
.navbar-mobile{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-desktop{
    display: none;
}

.navbar-items{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.navbar-items:first-child a:hover{
    scale: 1.01;
    transition: 0.3s;
    font-weight: 700;
    text-decoration: underline;
}

.btn{
    border: 1px solid var(--white-color);
    border-radius: 10px;
    padding: 10px 15px;
}

.btn:hover{
    border: 1px solid var(--secondary-color);

    background-color: var(--secondary-color);
    color: var(--white-color);
    transition: 0.3s;
}

/*Navbar mobile*/
.navbar-mobile{
    display: flex;
}

.navbar-mobile .navbar-items a{
    color: var(--white-color);
    text-decoration: none;
}

.navbar-mobile .navbar-items a:hover{
    text-decoration: none;
    font-weight: 700;
}

.logo-mobile{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    font-family: "Great Vibes", serif;
    font-size: 1.25rem;
}

#menu{
    color: var(--white-color);
    font-size: 1.375rem;
}

/********************************************************************* MAIN ***********************************************************************/
#produtos, #marcas, #depoimentos, #sobre-nos, #doacao{
    padding: 0 30px;
}

h1, h2, h3, h4, h5, h6{
    color: var(--primary-color);
    font-family: "Great Vibes", serif;
}

/*Hero*/
h1{
    font-size: 3.125rem;
    color: var(--white-color);
}

#hero{
    height: 500px;
    width: 100%;

    background-image: url(../Imgs/pessoas-elegantes.png);
    background-repeat: repeat;
    background-size: cover;
    background-position-x: center;
    background-position-y: top;

    display: flex;
    justify-content: center;
    align-items: center;
}

.texts{
    color: var(--white-color) !important;
    background-color: var(--primary-color );

    padding: 20px 30px;
}

/*Produtos*/
.subtitle{
    font-weight: 700;
    font-size: 1rem;
    
    margin: 0 0 30px;
}

.cards{
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    justify-content: center;

    margin: 0 0 40px;
}

.card{
    width: 210px;
    padding: 15px;
    border-radius: 8px;
    
    color: var(--white-color);
    background-color: var(--primary-color);
}

.imagem-produto{
    width: 180px;
    height: 250px;
    border-radius: 8px;

    object-fit: cover;
}

.card p{
    margin: 15px 0 5px;
    
    font-weight: 700;
}

.categoria{
    padding: 2px 6px;
    border: 1px solid var(--white-color);
    border-radius: 10px;
   
    font-size: 0.625rem;
}

.preco{
    font-size: 1.3rem;
    color: var(--tertiary-color);
}

.btn-card-produto{
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    color: var(--white-color);
    font-weight: 600;
    background-color: var(--secondary-color);
   
    margin: 15px 0 0;
    padding: 10px 0;
    border-radius: 8px;
}

.btn-ver-mais{
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: underline;
}

/*Marcas*/
#cards-marcas{
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.card-vantagem{
    width: 230px;
    padding: 15px;
    border-radius: 10px;

    background-color: var(--primary-color);
    color: var(--white-color);
    line-height: 22px;
    font-size: 0.875rem;
}

.card-vantagem i{
    font-size: 1.375rem;
}

.card-vantagem h3{
    font-family: "Montserrat", Arial, serif;
    color: var(--white-color);
    font-size: 1rem;

    margin: 10px auto;
}
  
/*Depoimentos*/
.depoimentos{    
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

    margin: 0 0 40px;
}

.depoimento{
    background-color: var(--tertiary-color);
    
    padding: 20px;
    width: 350px;
    border-radius: 10px;
    border: 1px solid var(--tertiary-color);
    
    font-size: 1rem;
    line-height: 24px;
    
    transition: 0.3s;
}

.depoimento:hover {
    transform: translate3d(0, -10px, 0) scale(1.01);
    
    border: 1px solid var(--primary-color);
}

.bi-chat-quote{
    color: var(--primary-color);
    font-size: 1.875rem;
}

.feedback{
    margin: 15px auto;
}

.nome-pessoa{
    font-weight: 700;
    color: var(--primary-color);
}

.classificacao{
    color: var(--primary-color);
    
    margin: 10px 0 0;
}

/*Sobre nós*/
.cards-sobre-nos{
    display: block;
}

.card-sobre-nos{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0px;

    margin-bottom: 30px;
}

.image-sobre-nos img{
    width: 100%;
}

.texto-sobre-nos{
    width: 600px;
}

.texto-sobre-nos h3{
    font-size: 1.75rem; /*28px*/
}

.texto-sobre-nos p{
    margin: 15px auto;
    
    line-height: 24px;
    text-align: center;
}

.bi-stars{
    color: var(--primary-color);
    font-size: 1.5rem;
}

/*Doacao*/
#form-doacao{
    margin: 20px auto 40px;
    width: 380px;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--primary-color);

    box-shadow: 0 0 8px 3px var(--primary-color);
}

#form-doacao label{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    
    font-weight: 700;
    
    margin-bottom: 20px;
}

/*
O Chrome usa a pseudo-classe :-webkit-autofill para aplicar estilos aos campos preenchidos automaticamente. Você pode usar essa pseudo-classe para redefinir os estilos padrão.

transition: background-color 5000s ease-in-out 0s;: Esta linha é crucial. Ela força o Chrome a aplicar a cor de fundo desejada, mesmo que o preenchimento automático tente substituí-la. O valor 5000s é um tempo de transição longo o suficiente para garantir que a cor de fundo seja aplicada.

-webkit-background-clip: text;: Essa propriedade garante que a cor de fundo seja aplicada apenas ao texto dentro do campo, em vez de preencher todo o campo.

-webkit-text-fill-color: #333;: Define a cor do texto para um valor específico (no exemplo, #333). Substitua #333 pela cor desejada.
*/
input:-webkit-autofill{
    transition: background-color 5000s ease-in-out 0s;
    -webkit-background-clip: text; /*Fundo*/
    -webkit-text-fill-color: var(--primary-color); /*Texto*/
}

input, textarea{
    outline: none;
    
    padding: 5px;
    min-width: 100%;
    border-radius: 4px;
    border: 1px solid var(--secondary-color);
    
    color: var(--primary-color);
    font-family: "Montserrat", Arial, serif;
}

input:focus, textarea:focus{
    border: 1px solid var(--primary-color);
}

textarea{
    min-height: 150px;
    max-width: 100%;
}

#btn-submit{
    color: var(--white-color);
    font-size: 1.125rem;
    font-weight: 700;
    background-color: var(--primary-color);
    
    border: none;
    border-radius: 8px;
    padding: 10px 30px;
}

.icons-contact{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    
    margin: 20px auto 60px;
}

.icon-contact{
    color: var(--primary-color);
    font-size: 35px;
}

.icon-contact:hover{
    color: var(--secondary-color);
    transition: 0.3s;
}

/********************************************************************* FOOTER ***********************************************************************/
footer{
    padding: 40px;

    background-color: var(--primary-color);
    text-align: center;
    color: var(--white-color);
}

footer h2{
    margin: 20px auto 30px;
}

footer h2,
footer .icon-contact{
    color: var(--white-color);
}

footer p{
    line-height: 150%;
}

footer .section-links-uteis{
    margin-bottom: 30px;
}

footer .links-uteis{
    color: var(--white-color);
    line-height: 160%;
    display: block;
}

.links-uteis:hover{
    color: var(--secondary-color);
    font-weight: 700;
    text-decoration: underline;

    transition: 0.3s;
}

/********************************************************************* RESPONSIVIDADE ***********************************************************************/
@media only screen and (min-width: 1200px){
    /*Navbar mobile*/
    .navbar-mobile{
        display: none;
    }

    .navbar-desktop{
        display: flex;
    }

    .card-sobre-nos {
        gap: 30px;
    }

    #fundacao-objetivo .image-sobre-nos,
    #missao-visao-valores .image-sobre-nos{
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;

        width: 340px;
        height: 340px;
    }

    #fundacao-objetivo .image-sobre-nos{
        background-image: url(../Imgs/section-about-1.png);
        
    }

    #missao-visao-valores .image-sobre-nos{
        background-image: url(../Imgs/section-about-2.png);
        
    }

    .texto-sobre-nos p{
        text-align: left;
    }
    
}

@media only screen and (max-width: 420px){
    #form-doacao{
        width: 90%;
    }
}