body {
        font-family: "roboto",sans-serif;
        background-color: #f1f1f1;
        }
	/*CSS DO HEADER*/
	header {
	    background-color: #0f2476;
	    color: white;
	    padding: 10px 20px;
	    display: flex;
	    flex-direction: column; /* Organiza os itens verticalmente */
	    align-items: center;
	    justify-content: center;
	    text-align: center;
	}
	header .navbar-top {
	    width: 100%;
	    display: flex;
	    align-items: center;
	    justify-content: space-between; /* Logo à esquerda e botões à direita */
	}
	header img {
	    width: 80px; /* Tamanho da logo */
	    height: auto;
	}
	.header-content{
	    text-align: center;
	    margin-left: 6.25rem;
	}
	.header-content h1{
	    display: block;
	    font-size: 2.1em;
	    font-weight: 800;
	    margin-top: 5px;
        margin-right: -2em;

	}
	.header-content h3{
	    font-size: 1.2em;
	    font-weight: 400;
	    margin-top: -8px;
        margin-right: -4em;
	}
    	header .nav-buttons {
            top: 20px;
	    display: flex;
	    justify-content: flex-end; /* Alinha os botões à direita */
    	}
    	header .nav-buttons button {
            background-color: white;
            color: #0f2476;
            border: none;
            margin-left: 10px;
            padding: 5px 10px;
            cursor: pointer;
            font-weight: Arial, sans-serif;
            border-radius: 5px;
	}
	header .nav-buttons button:hover {
	    background-color: #87CEFA; /* Cor de fundo ao passar o mouse */
	    color: white !important; /* Cor do texto ao passar o mouse */
	}
    	.btn-primary {
            background-color: #0f2476;
            border-color: #0f2476;
	    margin-right: 10px
    	}
    	.btn-primary:hover {
            background-color: #87CEFA;
            border-color: #87CEFA;
  	}

    	/*menu hamburguer para tela pequena*/
	.menu-hamburger {
	    display: none;
	    background-color: transparent;
	    border: none;
	    cursor: pointer;
	    padding: 10px;
	    z-index: 1000;
	}
	.menu-hamburger div {
	    width: 25px;
	    height: 3px;
	    background-color: white;
	    margin: 5px 0;
	    transition: 0.4s;
	}
	.menu-hamburger.open .bar1 {
	    transform: rotate(-45deg) translate(-5px, 6px);
	}
	.menu-hamburger.open .bar2 {
	    opacity: 0;
	}
	.menu-hamburger.open .bar3 {
	    transform: rotate(45deg) translate(-5px, -6px);
	}

    	/* Estilo do menu que será exibido em telas pequenas */
	.mobile-nav {
	    display: flex;
	    flex-direction: column;
	    background-color: #f2f2f2;
	    position: absolute;
	    top: 95px;
	    left: 0;
	    width: 100%;
	    text-align: center;
	    transition: max-height 0.4s ease, opacity 0.4s ease;
	    overflow: hidden;
	    max-height: 0;
	    opacity: 0;
	    border-top: 1px solid white;
	    z-index: 999;
	    pointer-events: none; /* Impede clique enquanto fechado */
	}
	.mobile-nav.active {
	    max-height: 300px; /* altura suficiente para os botões */
	    opacity: 1;
	    pointer-events: all; /* Ativa clique quando aberto */
	}
	.mobile-nav button {
	  background: none;
	  color: #0f2476;
	  border: none;
	  padding: 15px 0;
	  border-top: 1px solid rgba(0,0,0,0.1);
	  cursor: pointer;
	  font-size: 1.1em;
	  transition: background 0.3s, color 0.3s;
	}
	.mobile-nav button:hover {
	  background-color: rgba(0,0,0,0.05);
	  color: #0f2476;
	}
    	/* Media query para telas menores */
    	@media (max-width: 899px) {
            header .nav-buttons {
            	display: none;
            }
             .menu-hamburger {
            	display: block;
            }
	    .header-content h1,h3 {
		margin-left: -6.25rem;
    	    }
	}
	@media (max-width:559px){
	    .header-content h1,h3{
	    	display: none;
	    }
	}
/* Rodapé */
footer {
    background: #0f2476;
    color: white;
    padding: 20px;
    text-align: center;
}

footer p,a{
    margin-right: -1.2em;
}

.social-icons a {
    color: white;
    margin: 0 15px;
    font-size: 1.8rem;
}
.whatsapp-button {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    animation: shake-cycle 3s infinite;
}

@keyframes shake-cycle {
    0% { transform: translate(0, 0); }
    1% { transform: translate(-2px, 2px); }
    2% { transform: translate(2px, -2px); }
    3% { transform: translate(-2px, 2px); }
    4% { transform: translate(2px, -2px); }
    5% { transform: translate(0, 0); }
    100% { transform: translate(0, 0); }
}

.whatsapp-button img {
    width: 100px;
    height: 100px;
    cursor: pointer;
}

@media (max-width: 450px) {
    
    .whatsapp-button{
        bottom: 15px;
        left: 15px;
    }
    
    .whatsapp-button img{
        width: 70px;
        height: 70px;
    }
    
}