:root {
    --laranja: #f08116;
    --amarelo: #f1cc21;
    --amarelo-2: #ffedb5;
    --gold: #dda63a;
    --blue: #00689d;
    --darkblue: #024d73;
    --brightorange: #ff3a21;
    --red: #e5243b;
    --purple: #a21942;
    --violet: #5b2dbf;
    --dark-violet: #38216a;
    --pink: #ff9d9d;
    --grey: #b5b5b5;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css");

body { background: url('./img/textura-bg.webp'); color: rgba(51,51,51,1); }


/* Padrões de Títulos e Parágrafos */
h1, h2, h3, h4 { font-family: 'Roboto' sans-serif; font-weight: 900; }
h1 { font-size: 3.5rem; letter-spacing: -.1rem; text-align: center; text-transform: uppercase; filter: drop-shadow(5px 0px 25px rgba(0,0,0,.8)); }
h2 { font-size: 2.7rem; margin: 1rem 0 2.5rem 0; text-transform: uppercase; text-align: center; }
h3 { font-size: 1.4rem; margin: .8rem 0 1.5rem 0; text-transform: uppercase; }
h4 { font-size: 1.2rem; margin: .5rem 0 1rem 0; }
p { font-family: 'Roboto', sans-serif; font-size: 1.1rem;  line-height:1.7rem; margin: 0 0 1rem 0; }


/* Header */
.header{
    height: 100vh;
}

/* Navbar */
.navbar { padding: .3rem 0; }
.navbar li { list-style: none; margin-right: 8px; font-size: 0.9rem; font-weight: 600; text-transform: uppercase; }
.nav-item a:hover { color: var(--brightorange); }


/* Outros Elementos e Classes */
ul { padding: 1rem; }
li { list-style: "+ "; font-family: 'Roboto', sans-serif; font-size: 1.1rem; font-weight: 500; color: #0d6efd; }
mark { background: var(--amarelo); font-weight:500; }
section { padding: 80px 0; }
.strong { font-weight: bold; }
.padding-extra { padding: 50px 0 0 0; }
.invisible { display: none; }
.drop-shadow { filter: drop-shadow(0px 0px 5px rgba(0,0,0,.3)); }
.linha-pontilhada { padding: 1rem 0; margin-bottom: 1rem; border-bottom: 1px dotted #000; }
.linha-pontilhada-branca { padding: 1rem 0; margin-bottom: .5rem; border-bottom: 1px dotted #fff; }
.link-neutro, a a:link a:active a:visited {
    text-decoration: none;
}


/* Classes de Cor */
.lightyellow { background: var(--amarelo-2); }
.grey { background: var(--grey); }
.gold { background: var(--gold); }
.blue { background: var(--blue); color: #fff; }
.violet { background: var(--violet); color: #fff; }
.darkviolet { background: var(--dark-violet); color: #fff; }
.darkblue { background: var(--darkblue); color: #fff; }
.pink { background: var(--pink); }
.white { background: #fff; }
.blue p, .violet p { color: #fff; }


/* Banner Principal */
.banner-principal { height: 95vh; background: url('img/banner-principal.webp');  background-position: center; background-size: cover; color: #fff; }
.tagline { color: #fff; font-size: 1.7rem; text-align: center; line-height: 2.2rem; filter: drop-shadow(5px 0px 20px rgba(0,0,0,.9)); }


/* Conheça a Causa */
.causa-cards { padding: 20px 20px; color: var(--brightorange); border-radius: 5px; border: solid 1px var(--brightorange); display: flex; flex-direction: column; justify-content: center; align-items: center; }
.causa-cards p { color: var(--brightorange); font-size: 1rem; font-weight: 700; line-height: 120%; text-align: center; margin-top: 0; }
.causa-cards, i { font-size: 2rem; }
.causa-cards:hover { transform: scale(1.05); }
.icones-ods:hover { transform: scale(1.05); transition: 100ms; }

/* Equipe */
.equipe {
    background: url('./img/equipe.webp') fixed center center no-repeat;
    background-size: cover;
    height: 700px;
}


/* Depoimentos */
.container-depoimentos { display: flex; flex-direction: row; }
.card-depoimento { background: rgba(255,255,255,.8); padding: 20px; border-radius: 10px; flex-grow: 1; text-align: center; box-shadow: 0px 5px 30px rgba(0,0,0,.2); }
.card-depoimento h3 {  color: var(--blue); font-size:1.2rem; }
.card-depoimento p { font-size: .9rem; line-height: 1.3rem; }
.card-depoimento:hover { transform: scale(1.05); transition: 100ms; }
.stars i { font-size: 1rem; color: var(--amarelo); }


/* Ajude a Causa */
.card-dados-bancarios { padding: 30px; margin:25px; background: rgba(255,255,255, .8); border-radius: 10px; box-shadow: 0px 5px 30px rgba(0,0,0,.15); }
.card-dados-bancarios:hover { transform: scale(1.1); transition: 100ms; box-shadow: 0px 5px 60px rgba(0,0,0,.10); }


/* Contato */
.contato { padding: 30px 0; }
.contato p { color: #fff; margin: 0 25px; font-size: 1.1rem; font-weight: 500; }
.contato i { font-size: 1.2rem; }


/*  Footer */
footer { padding: .5rem 0; background: #242424; }
footer p { font-size: .9rem; margin-bottom: 0 !important; padding: 0; color: #fff; text-align: center; }
footer i { font-size: 32px; }
.link-gold, a a:active a:visited a:link { color: var(--gold); text-decoration: none;}
.whatsapp { position: fixed; left: 30px; bottom: 35px; }
.topo, a a:active a:visited { color: var(--gold); }


/* Social Media */
.socialmedia {  padding: 80px 0 30px 0; text-align: center; }
.socialmedia i { margin: 0; }
.socialmediaicon { color: #fff; display: flex; justify-content: center; align-items: center; width: 80px; height: 80px; background: var(--violet); border-radius: 80px; }


@media (max-width:450px) {

    .banner-principal { height: 90vh; }
    .tagline { font-size: 1.4rem; line-height: 1.7rem; font-weight: 400;}

    h1 { font-size: 1.7rem; font-weight: 800; letter-spacing: normal; margin-top: 2rem;}
    h2 { font-size: 2rem; }
    h3 { font-size: 1.7rem; }
    h4 { font-size: 1.2rem; }

    h2, h3, h4, p { text-align: center;}

    section { padding: 50px 0; }

    .equipe {
        background: url('./img/equipe.webp') center bottom no-repeat;
        background-size: cover;
        height: 300px;
    }

    .causa-cards:hover { transform: none; }
    .container-depoimentos { display: flex; flex-direction: column; }
    .card-depoimento:hover { transform: none; }
    .card-dados-bancarios:hover { transform: none; }


}