@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Saira+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap');

body {
    background-color: rgb(234 234 234);
}


html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.oswald {
    font-family: "Oswald", sans-serif;
}

.bg-azul-escuro{
    background-color:rgb(0, 77, 148); 
}

.bg-azul-medio {
    background-color: rgb(1, 143, 198);
}

.bg-azul-claro {
    background-color: rgb(146, 188, 214);
}

.fonte-azul-escuro {
    color: rgb(0, 77, 148);
}

.fonte-azul-medio {
    color: rgb(1, 143, 198);
}

.fonte-azul-claro {
    color: rgb(146, 188, 214);
}

.marcasTopo{
    background-color: white;
    border-radius: 15px;
}
.botaoAzulEscuro {
    background-color: rgb(0, 77, 148);
    color: white;
    transition: 0.2s;
}
    .botaoAzulEscuro:hover {
        background-color: rgb(146, 188, 214);
        color: white;
    }

.cardPainel {
    background-color: rgb(0, 77, 148);
    border-radius: 10px;
    color: white;
    border: 4px solid rgb(1, 143, 198);
    transition: background-color 0.3s ease;
}
    .cardPainel:hover {
        background-color: rgb(1, 143, 198);
        border-radius: 10px;
        color: white;
    }
.active .cardPainel{
    background-color: rgb(1, 143, 198);
}
@media (min-width: 768px) {
    .cardPainel {
        aspect-ratio: 1 / 1;
    }
    .cardPainel5 {
        aspect-ratio: 1 / 1;
    }
}
.iconesRedesSociais {
    color: rgb(0, 77, 148);
    transition: background-color 0.3s ease;
}
    .iconesRedesSociais:hover {
        color: rgb(146, 188, 214);
    }

.navbar-toggler {
    background-color: rgb(0, 77, 148);
    border-color: rgb(1, 143, 198);
}

.navbar-toggler-icon {
    background-image: url('data:image/svg+xml;charset=UTF8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path stroke="white" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg>');
}

/*layout 2*/

.marcasTopo2 {
    background-color: white;
}
.botoesNav {
    position: relative;
    background-color: rgb(0, 77, 148);
    color: white;  
    transition: transform 0.3s ease, z-index 0s;
}

    .botoesNav:hover {
        background-color: rgb(1, 143, 198);
        color: white;
        z-index: 10;
        transform: scale(1.05);
    }

/*layout 3*/

.botoesNav3 {
    position: relative;
    background-color: rgb(1, 143, 198);
    color: white;
    width: 100%;
    transition: transform 0.3s ease, z-index 0s;
}

    .botoesNav3:hover {
        background-color: rgb(0, 77, 148);
        color: white;
        width: 100%;
        z-index: 10;
        transform: scale(1.05);
    }

    /*layout 5*/

.cardPainel5 {
    background-color: rgb(0, 77, 148);
    color: white;
    transition: background-color 0.3s ease;
}

    .cardPainel5:hover {
        background-color: rgb(1, 143, 198);
        color: white;
    }
.corNav {
    background: rgb(146,188,214);
    background: linear-gradient(90deg, rgba(146,188,214,1) 0%, rgba(255,255,255,1) 16%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 84%, rgba(146,188,214,1) 100%);
}