html, body {
  font-family: "Nunito", sans-serif;
  color: var(--arsenic);
}
.nunito-<uniquifier> {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.nunito-sans-<uniquifier> {
  font-family: "Nunito Sans", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
}
/* Base style for all buttons */
.btn-default,
.btn-default-outline,
.btn-auxiliary,
.btn-auxiliary-outline {
  font-weight: 500;
  border-width: 1px;
  border-style: solid;
  transition: all 0.2s ease-in-out;
}

/* Solid btn-default (May Green) */
.btn-default {
  background-color: var(--may-green);
  color: #fff;
  border-color: var(--may-green);
}

.btn-default:hover,
.btn-default:focus {
  background-color: #38802C;
  border-color: #38802C;
  color: #fff;
}

.btn-default:active {
  background-color: #2F6D25;
  border-color: #2F6D25;
  color: #fff;
}

.btn-default:disabled {
  background-color: #9fc99a;
  border-color: #9fc99a;
  color: #fff;
}

/* Outline btn-default */
.btn-default-outline {
  background-color: transparent;
  color: var(--may-green);
  border-color: var(--may-green);
}

.btn-default-outline:hover,
.btn-default-outline:focus {
  background-color: var(--may-green);
  color: #fff;
  border-color: var(--may-green);
}

.btn-default-outline:active {
  background-color: #2F6D25;
  color: #fff;
  border-color: #2F6D25;
}

.btn-default-outline:disabled {
  color: #9fc99a;
  border-color: #9fc99a;
}

/* Solid btn-auxiliary (Arsenic) */
.btn-auxiliary {
  background-color: var(--arsenic);
  color: #fff;
  border-color: var(--arsenic);
}

.btn-auxiliary:hover,
.btn-auxiliary:focus {
  background-color: #2C353B;
  border-color: #2C353B;
  color: #fff;
}

.btn-auxiliary:active {
  background-color: #22292E;
  border-color: #22292E;
  color: #fff;
}

.btn-auxiliary:disabled {
  background-color: #8a959c;
  border-color: #8a959c;
  color: #fff;
}

/* Outline btn-auxiliary */
.btn-auxiliary-outline {
  background-color: transparent;
  color: var(--arsenic);
  border-color: var(--arsenic);
}

.btn-auxiliary-outline:hover,
.btn-auxiliary-outline:focus {
  background-color: var(--arsenic);
  color: #fff;
  border-color: var(--arsenic);
}

.btn-auxiliary-outline:active {
  background-color: #22292E;
  color: #fff;
  border-color: #22292E;
}

.btn-auxiliary-outline:disabled {
  color: #8a959c;
  border-color: #8a959c;
}
.custom-logo {
    max-height: 50px !important;
    width: auto !important;
}
.nav-link,
.btn {
    border-radius: 50px !important;
}
input-group .btn {
    border-radius: 0 50px 50px 0 !important;
}
.menu-top {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  top: 0;
}
/* Estilo base para os nav-pills */
.menu-top .navbar-nav > .nav-link {
    color: #444; /* Cor do texto padrão */
    border: 2px solid transparent; /* Sem borda inicial */
    transition: color 0.3s ease, background-color 0.3s ease;
}

.menu-top .navbar-nav > .nav-link:hover {
    border-color: var(--lust); /* Cor da borda ao passar o mouse */
    color: var(--lust) !important; /* Cor do texto ao passar o mouse */
}

/* Estilo para o item active com efeito de outline */
.menu-top .navbar-nav > .nav-link.active {
    color: var(--lust) !important; /* Cor do texto */
    background-color: #FFF; /* Fundo transparente */
    border: 2px solid var(--lust); /* Cor da borda para o ativo */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Leve brilho no contorno */
    transition: all 0.3s ease; /* Suavidade na mudança de estado */
    font-weight: 700;
}

/* Efeito de hover suave no active */
.menu-top .navbar-nav > .nav-link.active:hover {
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.7); /* Amplia o brilho no hover */
}

.btn-primary {
    background-color: var(--may-green) !important;
    border-color: var(--may-green) !important;
    color: var(--bs-btn-color) !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: #3a8330;
    border-color: #3a8330;
}

/* Estilos para btn-primary-outline */
.btn-outline-primary {
    color: var(--may-green) !important;
    border-color: var(--may-green) !important;
    background-color: transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--may-green) !important;
    color: var(--bs-btn-color) !important;
    border-color: var(--may-green) !important;
}

/* Estilos para btn-secondary */
.btn-secondary {
    background-color: var(--lust) !important;
    border-color: var(--lust) !important;
    color: var(--bs-btn-color) !important;
}
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #c31414;
    border-color: #c31414;
}

/* Estilos para btn-secondary-outline */
.btn-outline-secondary {
    color: var(--lust) !important;
    border-color: var(--lust) !important;
    background-color: transparent;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--lust) !important;
    color: #FFF !important;
    border-color: var(--lust) !important;
}
#sobre .box-content {
	background-color: var(--may-green);
	border-radius: 50px;
}
#beneficios .box-content {
	background-color: var(--lust);
	border-radius: 50px;
}
#sobre, #beneficios {
    position: relative;
}

/* Estilos aplicados somente em telas MD e maiores */
@media (min-width: 768px) {
    #sobre::before {
        content: "";
        position: absolute;
        width: 50%;
        height: 100%;
        border-radius: 0 50px 50px 0;
        background-color: var(--may-green);
        z-index: -1;
        top: 0;
        left:0;
    }

    #beneficios::before {
        content: "";
        position: absolute;
        width: 50%;
        height: 100%;
        border-radius: 50px 0 0 50px;
        background-color: var(--lust);
        z-index: -1;
        top: 0;
        right: 0;
    }
}
.card-title .bi {
    color: var(--bs-white) !important;
}
#bottom, #bottom .nav-link {
	background-color: var(--arsenic);
	color: var(--bs-white) !important;
}
.feature-icon-small img {
    max-height: 75px !important;
    fill: var(--may-green);
        filter: brightness(100%) invert(1);

}

/* Estilização dos botões WordPress com hover personalizado */
a.wp-block-button__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    transform: scale(1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Efeito hover */
a.wp-block-button__link:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Seta do Bootstrap Icons - inicialmente escondida */
a.wp-block-button__link::after {
    content: "";
    font-family: "Bootstrap Icons";
    content: "\f119"; /* Código do ícone arrow-down-circle */
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    font-size: 1.1em;
}

/* Exibir a seta no hover */
a.wp-block-button__link:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* ---- PRELOADER ---- */
.preloader{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--arsenic);
    z-index: 9999;
    transition: opacity .6s ease, transform .6s ease;
}

/* Estado final (zoom out) */
.preloader.hide {
    opacity: 0;
    transform: scale(1.2);
    pointer-events: none;
}

/* ---- Loader ---- */
.loader {
    width: 140px;
    height: 26px;
    border-radius: 40px;
    color: var(--may-green); /* COR PRINCIPAL DO HUBEM */
    border: 3px solid currentColor;
    position: relative;
}

.loader::before {
    content: "";
    position: absolute;
    margin: 3px;
    width: 25%;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    background: var(--lust); /* BARRA INTERNA vermelha */
    animation: l3 1s infinite linear;
}

.features-figures img {
    border-radius: 2rem;
}

@keyframes l3 {
    50% { left:100%; transform: translateX(calc(-100% - 6px)); }
}