/* Váriaveis raíz */
:root {
    --banner-bg: #D7D4FF;
    --body-color: #F9F9F9;
    --btn-bg: #D7D4FF;
    --btn-bg2: #a7dcd4;
    --btn-border: #3d3d3d69;
    --btn-color: #292929;
    --cont-bg: #FFFFFD;
    --footer-bg: #a7dcd4;
    --link-color: #292929;
    --shadow: #00000020;
    --white: #FFFFFD;
}

/* Utilizando media queries para deixar o site responsivo*/
@media only screen and (max-width: 992px) {
    .container.d-flex.flex.align-items-center.justify-content-between.w-100.py-3 {
        flex-direction: column;
    }

    .container.text-center.d-flex.align-items-center.justify-content-center.mt-3 {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .container.text-center.d-flex.align-items-center.justify-content-center.mt-4 {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .parceiros-logo {
        height: 70px;
        width: 120px;
    }

    #meuCarrosel {
        width: 10%;
    }

    .row-cols-md-3>* {
        margin-left: 15px;
    }

}

@media (min-width: 766px) {
    .parceiros-logo {
        height: 51px;
        width: 51px;
    }

    #meuCarrosel {
        width: 30%;
    }
}

@media (max-width: 766px) {
    .row-cols-md-3>* {
        flex: 0 0 auto;
        width: 60%;
    }
}

@media (max-width: 766px) {
    .row.row-cols-1.row-cols-md-3.g-4.justify-content-center {
        width: 413.88px;
    }
}

@media (max-width: 766px) {
    .col {
        max-width: 457.88px;
    }
}


body {
    background-color: var(--body-color);
    overflow-x: hidden;
    /* Esconder o scroll lateral */
}

/* Estilizando o botão */
.btn {
    background-color: var(--btn-bg);
    border-color: var(--btn-color);
    color: var(--btn-color);
}

/* Estilizando o botão quando o mouse está emcima */
.btn:hover {
    background-color: var(--btn-bg2);
    border-color: var(--btn-color);
    color: var(--btn-color);
}

/* Estilizando a ancora do botão doar */
.doar-ancora {
    color: var(--link-color);
    text-decoration: none;
}

/* Estilizando a ancora quando o mouse está emcima do botão doar*/
.doar-ancora:hover {
    color: var(--link-color);
    text-decoration: none;
}

/* Colocando sombra na imagem */
.container.descricao {
    background-color: var(--cont-bg);
    box-shadow: 0 2px 10px 5px #00000020; 
}

/* Estilzando a ancora quando o mouse está emcima do botão doar*/
.inscreva-ancora {
    color: var(--link-color);
    text-decoration: none;
}

/* Estilizando a ancora quando o mouse está emcima do botão doar*/
.inscreva-ancora:hover {
    color: var(--link-color);
    text-decoration: none;
}

/* Definindo cor de fundo do banner*/
.banner {
    background-color: var(--banner-bg);
}

/* Fontes para títulos */
h3,
h4 {
    font-family: 'Merriweather', serif;
}

/* Fontes para os parágrafos */
p {
    font-family: 'Lato', sans-serif;
}

/* Fundo e espaçamento interno do rodapé */
.text-center.text-md-start {
    background-clip: border-box;
    background-color: var(--footer-bg);
}

/* Colocando cor de fundo para a DIV dos parceiros */
.parceiros {
    background-color: var(--banner-bg);
}

/* Definindo tamanho do carrousel */
#meuCarrosel {
    width: 30%;
}

/* Ajustando tamanho do logo dos parceiros */
.parceiros-logo {
    height: 90px;
    width: 180px;
}

/* Removendo detalhes de cores dos icones das redes sociais */
.icones {
    color: transparent;
}

/* Removendo detalhes de cores ao passar o mouse emcima dos icones das redes sociais */
.icones:hover {
    color: transparent;
}

/* Tamanho dos ícones das redes sociais */
.facebook,
.instagram,
.youtube {
    height: 32px;
    width: 32px;
}

/* Margem entre o "hr" e o footer */
.border-bottom.last {
    margin-bottom: 15px;
}