:root {
    --verde: #33820D;
    --amarelo: #ffbe00;
    --vinho: #8e1d58;
    --azul: #008295;
    --cinza: #f2f2f2;
    --branco: #ffffff;
    --vermelho: #e63946;
    --preto:#000000;
}

.navbar-custom {
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 2px 2px var(--verde);
    transition: all 0.5s ease 0s;
    background-color: rgba(0, 0, 0, 0.27);
}
#menu.sticky-top{
    background-color: var(--branco);
    transition: all 0.5s ease 0s;
    box-shadow: 0 0 2px 2px var(--verde);
}
.navbar-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem; /* Espaçamento entre os itens do menu */
}
.navbar-toggler{
    margin-right: 1rem;
    color: var(--branco);
    border:2px solid var(--verde);
    font-size: 1.5rem;
}
#menu.sticky-top .navbar-toggler{
    color: var(--verde);
}
.navbar-logo {
    height: 35px;
    width: 180px; /* Ajuste o tamanho da logo conforme necessário */
}
.navbar-content ul a{
    color: var(--branco);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
}
#menu.sticky-top ul a{
    color: var(--verde);
}

.navbar-content ul a:hover{
    color: var(--azul);
    text-decoration: none;
}
#menu.sticky-top ul a:hover{
    color: var(--azul);
}
.sidebar {
    position: fixed;
    top: 0;
    left: -100%;
    width: 300px;
    height: 100%;
    background-color: var(--branco);
    transition: all 0.3s;
    z-index: 1050;
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 0 10px 0 var(--verde);
}
.sidebar ul li{
    border-bottom: 1px solid var(--azul);
    text-align: center;
    padding: 1rem;
}
.sidebar ul li a{
    color: var(--verde);
    font-weight: 600;
}
.sidebar ul li a:hover{
    color: var(--azul);
}

.sidebar.active {
    left: 0;
}
.close-btn {
    position: absolute;
    top: 0;
    right: 1rem;
    font-size: 2rem;
    cursor: pointer;
    color: var(--vermelho);
}
.btn-associe-se, .associe-se-btn {
    width: 100%;
    background-color: var(--azul);
    color: var(--branco);
    text-align: center;
    font-weight: bold;
    letter-spacing: 2px;
    border:none;
    text-decoration: none;
}
.btn-associe-se:hover, .associe-se-btn:hover{
    background-color: var(--vinho);
    color: var(--branco);
}
@media (max-width: 992px) {
    #associe-se-btn{
        padding: 1rem;
    }
    .navbar-logo {
        padding-left: 1rem;
    }
}
.mobile-navbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}


/* Estilização para o container de botões no mobile */
.mobile-buttons {
    position: absolute;
    bottom: 20px;
    width: 90%; /* Ajuste conforme necessário */
    left: 50%;
    transform: translateX(-50%);
}



.bs-icon {
    --bs-icon-size: .75rem;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-size: var(--bs-icon-size);
    width: 48px;
    height: 40px;
    color: var(--bs-primary);
}

.bs-icon-xs {
    --bs-icon-size: 1rem;
    width: calc(var(--bs-icon-size) * 1.5);
    height: calc(var(--bs-icon-size) * 1.5);
}

.bs-icon-sm {
    --bs-icon-size: 1rem;
}

.bs-icon-md {
    --bs-icon-size: 1.5rem;
}

.bs-icon-lg {
    --bs-icon-size: 2rem;
}

.bs-icon-xl {
    --bs-icon-size: 2.5rem;
}

.bs-icon.bs-icon-primary {
    color: var(--bs-white);
    background: var(--bs-primary);
}

.bs-icon.bs-icon-primary-light {
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), .2);
}

.bs-icon.bs-icon-semi-white {
    color: var(--bs-primary);
    background: rgba(255, 255, 255, .5);
}

.bs-icon.bs-icon-rounded {
    border-radius: .5rem;
}

.bs-icon.bs-icon-circle {
    border-radius: 50%;
}