/* ==========================
   GERAL
========================== */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family: "Poppins", serif;
    background:#f7f6f5;
    color:#222;
    line-height:1.6;
}

header {
    background-color: #10101000;
    padding: 15px 0px;
    position: fixed;
    width: 100%;
    z-index: 999999;

}

header.rolagem{
    background-color: var(--lightBlue);
    transition: 0.5s;
}
header nav ul{
    list-style: none;
    text-align: center;

}

header nav ul li {
    display: inline;
}

/* ==========================
   HERO
========================== */

.hero{

    max-width:1100px;
    margin:50px auto;
    text-align:center;
    padding:20px;

}

.hero-icone{

    width:90px;
    height:90px;

    margin:auto;

    background:#2e5b98;

    color:white;

    font-size:55px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:20px;

}

.hero h1{

    font-size:3rem;

    margin-bottom:20px;

    font-style:italic;

    color:#222;

}

.hero p{

    max-width:700px;

    margin:auto;

    font-size:1.2rem;

}

/* ==========================
   PIX
========================== */

.pix{

    max-width:1100px;

    margin:auto;

    text-align:center;

    padding:40px 20px;

}

.pix h2{

    margin-bottom:35px;

    font-size:2rem;

    border-top:2px solid #444;

    border-bottom:2px solid #444;

    display:inline-block;

    padding:12px 35px;

}

.pix-container{

    display:flex;

    justify-content:center;

    align-items:stretch;

    gap:30px;

    flex-wrap:wrap;

}

.pix-card{

    width:340px;

    background:white;

    border-radius:12px;

    padding:30px;

    box-shadow:0 5px 20px rgba(0,0,0,.15);

}

.pix-card h3{

    display:inline-block;

    background:#ffe600;

    padding:8px 18px;

    border-radius:20px;

    margin-bottom:20px;

    font-size:16px;

}

.pix-card img{

    width:220px;

    display:block;

    margin:auto;

}

.pix-card p{

    margin-top:12px;

    font-size:17px;

}

.pix-card strong{

    font-size:24px;

}

.texto-pix{

    margin-top:30px;

    font-size:20px;

    font-weight:bold;

}

/* ==========================
   CARDS
========================== */

.formas-ajudar{

    max-width:1200px;

    margin:70px auto;

    padding:20px;

    text-align:center;

}

.formas-ajudar h2{

    font-size:2rem;

    margin-bottom:40px;

}

.cards{

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

}

.card{

    width:280px;

    padding:35px 25px;

    border-radius:12px;

    box-shadow:0 8px 25px rgba(0,0,0,.15);

    transition:.3s;

}

.card:hover{

    transform:translateY(-8px);

}

.card .icone{

    font-size:55px;

    margin-bottom:18px;

}

.card h3{

    margin-bottom:15px;

    font-size:22px;

}

.card p{

    font-size:18px;

}

.amarelo{

    background:#ffe32b;

}

.azul{

    background:#39b7e3;

    color:white;

}

.verde{

    background:#0fb56d;

    color:white;

}


/* ==========================
   RODAPÉ
========================== */

footer{

    margin-top:80px;

    background:#2e5b98;

    color:white;

    text-align:center;

    padding:40px 20px;

}

footer img{

    width:120px;

    margin:20px 0;

}

footer p{

    margin:8px 0;

}

/* ==========================
   RESPONSIVO
========================== */

@media(max-width:900px){

.hero h1{

    font-size:2.2rem;

}

.pix-container{

    flex-direction:column;

    align-items:center;

}

.pix-card{

    width:95%;

}

.card{

    width:90%;

}

.contato{

    width:95%;

    padding:25px;

}

}

@media(max-width:500px){

.hero-icone{

    width:70px;
    height:70px;
    font-size:40px;

}

.hero h1{

    font-size:1.8rem;

}

.pix h2{

    font-size:1.3rem;

    padding:10px;

}

.pix-card img{

    width:180px;

}

.pix-card strong{

    font-size:18px;

}

.card h3{

    font-size:20px;

}

.card p{

    font-size:16px;

}

button{

    font-size:18px;

}

}