.elementor-89665 .elementor-element.elementor-element-6dcef7db{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:-8px;--margin-left:0px;--margin-right:0px;--padding-top:00px;--padding-bottom:00px;--padding-left:00px;--padding-right:00px;}.elementor-89665 .elementor-element.elementor-element-6dcef7db:not(.elementor-motion-effects-element-type-background), .elementor-89665 .elementor-element.elementor-element-6dcef7db > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF00;}.elementor-89665 .elementor-element.elementor-element-69a30bbf{--display:flex;--min-height:120px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-89665 .elementor-element.elementor-element-30f684ee{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-89665 .elementor-element.elementor-element-30f684ee:not(.elementor-motion-effects-element-type-background), .elementor-89665 .elementor-element.elementor-element-30f684ee > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#333333;}.elementor-89665 .elementor-element.elementor-element-30f684ee.e-con{--align-self:flex-start;}.elementor-89665 .elementor-element.elementor-element-f3dabfd{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--gap:24px 24px;--row-gap:24px;--column-gap:24px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-89665 .elementor-element.elementor-element-f3dabfd.e-con{--align-self:center;}.elementor-89665 .elementor-element.elementor-element-32afe89e{width:var( --container-widget-width, 198px );max-width:198px;--container-widget-width:198px;--container-widget-flex-grow:0;}.elementor-89665 .elementor-element.elementor-element-32afe89e > .elementor-widget-container{margin:0px 0px 0px 20px;padding:0px 0px 0px 0px;}.elementor-89665 .elementor-element.elementor-element-309ac26.elementor-element{--align-self:center;}.elementor-89665 .elementor-element.elementor-element-5531ee51.elementor-element{--align-self:center;}.elementor-89665 .elementor-element.elementor-element-16519c7c.elementor-element{--align-self:center;}.elementor-89665 .elementor-element.elementor-element-3845c328 .elementor-icon-wrapper{text-align:center;}.elementor-89665 .elementor-element.elementor-element-3845c328.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-89665 .elementor-element.elementor-element-3845c328.elementor-view-framed .elementor-icon, .elementor-89665 .elementor-element.elementor-element-3845c328.elementor-view-default .elementor-icon{color:#FFFFFF;border-color:#FFFFFF;}.elementor-89665 .elementor-element.elementor-element-3845c328.elementor-view-framed .elementor-icon, .elementor-89665 .elementor-element.elementor-element-3845c328.elementor-view-default .elementor-icon svg{fill:#FFFFFF;}.elementor-89665 .elementor-element.elementor-element-3845c328 .elementor-icon{font-size:16px;}.elementor-89665 .elementor-element.elementor-element-3845c328 .elementor-icon svg{height:16px;}.elementor-89665 .elementor-element.elementor-element-aaae09c > .elementor-widget-container{margin:0px -11px 0px 0px;padding:0px 0px 0px 0px;}.elementor-89665 .elementor-element.elementor-element-aaae09c.elementor-element{--align-self:center;}.elementor-89665 .elementor-element.elementor-element-6fdb166{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.25);--padding-top:8px;--padding-bottom:8px;--padding-left:8px;--padding-right:8px;}.elementor-89665 .elementor-element.elementor-element-6fdb166:not(.elementor-motion-effects-element-type-background), .elementor-89665 .elementor-element.elementor-element-6fdb166 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #FDFDFDFA 95%, #FFFFFF00 99%);}.elementor-89665 .elementor-element.elementor-element-6fdb166.e-con{--align-self:flex-start;}.elementor-89665 .elementor-element.elementor-element-1afcff98{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;}.elementor-89665 .elementor-element.elementor-element-1afcff98.e-con{--align-self:stretch;}.elementor-widget-image .widget-image-caption{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-89665 .elementor-element.elementor-element-45cf0483 img{width:100px;height:40px;}.elementor-89665 .elementor-element.elementor-element-41ce57a4 .elementor-icon-wrapper{text-align:center;}.elementor-89665 .elementor-element.elementor-element-41ce57a4.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-text );}.elementor-89665 .elementor-element.elementor-element-41ce57a4.elementor-view-framed .elementor-icon, .elementor-89665 .elementor-element.elementor-element-41ce57a4.elementor-view-default .elementor-icon{color:var( --e-global-color-text );border-color:var( --e-global-color-text );}.elementor-89665 .elementor-element.elementor-element-41ce57a4.elementor-view-framed .elementor-icon, .elementor-89665 .elementor-element.elementor-element-41ce57a4.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-text );}.elementor-89665 .elementor-element.elementor-element-41ce57a4 .elementor-icon{font-size:20px;}.elementor-89665 .elementor-element.elementor-element-41ce57a4 .elementor-icon svg{height:20px;}.elementor-89665 .elementor-element.elementor-element-183e9ff3{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--gap:18px 18px;--row-gap:18px;--column-gap:18px;--flex-wrap:nowrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-89665 .elementor-element.elementor-element-291b23e{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--gap:0px 32px;--row-gap:0px;--column-gap:32px;}.elementor-89665 .elementor-element.elementor-element-3c3ac4eb{width:var( --container-widget-width, 170px );max-width:170px;--container-widget-width:170px;--container-widget-flex-grow:0;}.elementor-89665 .elementor-element.elementor-element-3c3ac4eb.elementor-element{--align-self:center;}.elementor-89665 .elementor-element.elementor-element-32053279{width:var( --container-widget-width, 74px );max-width:74px;--container-widget-width:74px;--container-widget-flex-grow:0;}.elementor-89665 .elementor-element.elementor-element-32053279.elementor-element{--align-self:center;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-89665 .elementor-element.elementor-element-7b3a8eb4{width:auto;max-width:auto;}.elementor-89665 .elementor-element.elementor-element-7b3a8eb4 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-89665 .elementor-element.elementor-element-7b3a8eb4.elementor-element{--align-self:center;}.elementor-89665 .elementor-element.elementor-element-7b3a8eb4 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:14px;font-weight:500;text-transform:uppercase;}.elementor-89665 .elementor-element.elementor-element-75d77376{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--gap:16px 16px;--row-gap:16px;--column-gap:16px;--flex-wrap:nowrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-89665 .elementor-element.elementor-element-d57ade6.elementor-element{--align-self:center;}.elementor-89665 .elementor-element.elementor-element-62dd5c05{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;}.elementor-89665:not(.elementor-motion-effects-element-type-background), .elementor-89665 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:radial-gradient(at center center, #FFFFFF 90%, #F4F4F4 100%);}.elementor-89665{padding:0px 0px 0px 0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-89665 .elementor-element.elementor-element-f3dabfd{--flex-wrap:nowrap;}.elementor-89665 .elementor-element.elementor-element-1afcff98{--justify-content:space-between;--flex-wrap:nowrap;}.elementor-89665 .elementor-element.elementor-element-45cf0483{text-align:left;}.elementor-89665 .elementor-element.elementor-element-45cf0483 img{width:101px;}.elementor-89665 .elementor-element.elementor-element-41ce57a4.elementor-element{--align-self:center;}}@media(max-width:750px){.elementor-89665 .elementor-element.elementor-element-69a30bbf{--min-height:40px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-89665 .elementor-element.elementor-element-1afcff98{--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:stretch;}.elementor-89665 .elementor-element.elementor-element-45cf0483 img{width:100px;}.elementor-89665 .elementor-element.elementor-element-62dd5c05{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(min-width:751px){.elementor-89665 .elementor-element.elementor-element-6fdb166{--content-width:1140px;}.elementor-89665 .elementor-element.elementor-element-1afcff98{--width:200px;}.elementor-89665 .elementor-element.elementor-element-183e9ff3{--width:100%;}.elementor-89665 .elementor-element.elementor-element-291b23e{--width:67%;}.elementor-89665 .elementor-element.elementor-element-75d77376{--width:132px;}}@media(max-width:1024px) and (min-width:751px){.elementor-89665 .elementor-element.elementor-element-1afcff98{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-32afe89e *//* 1. ESTADO PADRÃO DO CONTAINER DESKTOP */
  .desktop-search-bar {
    position: relative;
    display: flex;
    align-items: center;
    background-color:#303030;/*#f0f2f5*/
    border-radius: 4px; /* Mais arredondado para um visual moderno */
    border: 2px solid transparent;
    
    /* ANIMAÇÃO: Agora incluindo a LARGURA (width) */
    width: 180px; /* Largura inicial, mais compacta */
    transition: width 0.4s ease-in-out, 
                border-color 0.3s ease-in-out, 
                box-shadow 0.3s ease-in-out;
  }

  /* 2. ESTADO DE FOCO NO DESKTOP */
  .desktop-search-bar:focus-within {
    width:180px; /* A barra expande ao ser focada */
    border-color: transparent;
    box-shadow: 0 0 0 3px rgba(0, 86, 167, 0.15);
    background-color: #1C1C1C;
    color:#5C5C5C;
    border-radius:24px;
  }

  /* 3. ESTILOS DO INPUT DESKTOP */
  .desktop-search-bar input {
    width: 100%;
    height: 38px; /* Um pouco menor que a mobile */
    border: none;
    background: transparent;
    outline: none;
    font-size: 15px;
    padding-left: 45px;
    padding-right: 20px;
    color: #85A88B;
  }

  /* 4. BOTÃO E ÍCONE DESKTOP */
  .desktop-search-bar .search-button {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
  }

  .desktop-search-bar .search-button svg {
    width: 18px; /* Ícone um pouco mais delicado */
    height: 18px;
    color: #888;
    transition: color 0.3s ease-in-out;
  }

  .desktop-search-bar:focus-within .search-button svg {
    color: #005612;
  }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-69a30bbf *//* ==================================== */
/* 3. CSS RESET & REGRAS GENÉRICAS */
/* ==================================== */
.custom-menu-wrapper * {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    text-decoration: none; 
    border: none;
    background: transparent;
}



/* REGRA GENÉRICA DE BOTÃO (Exclui nosso menu para manter o estilo) */
[type=button]:not(.menu-toggler-button):focus, 
[type=button]:not(.menu-toggler-button):hover, 
[type=submit]:focus, 
[type=submit]:hover, 
button:not(.menu-toggler-button):focus, 
button:not(.menu-toggler-button):hover {
    background-color: white;
  color: black;
    text-decoration: none;
}



/* ==================================== */
/* 4. CSS DE ESTILIZAÇÃO DO MENU */
/* ==================================== */

/* Container Principal */
.custom-menu-wrapper {
    position: relative;
    display: inline-block; 
}

/* Estilo do Botão "CONTATOS" */
.menu-toggler-button {
    font-size: 14px; /* Ajustado para o tamanho menor */
    font-weight: 500; /* Ajustado para o peso da fonte */
    text-transform: uppercase;
    color: #000000;
    padding: 10px 0;
    display: inline-block; 
    cursor: pointer;
    outline: none; 
    position: relative; 
    transition: all 0.3s ease; 
    background-color: #fff; 
    padding-right: 20px; 
}


/* NOVO ESTILO: BOTÃO VERDE ESCURO (INSCREVA-SE) */
.menu-toggler-button.green-button {
    color: #ffffff; 
    background-color: #003F01; /* Verde Escuro */
    padding-right: 15px; /* Ajusta o padding do lado direito do texto */
    padding-left: 15px; /* Adiciona padding na esquerda do texto */
    border-radius: 4px;
}



/* Linha verde embaixo do título */
.menu-toggler-button::after {
    content: '';
    position: absolute;
    bottom: -3px; 
    left: 0;
    width: 0; 
    height: 3px; 
    background-color: #00c900; 
    transition: width 0.3s ease-out; 
    
}





/* Estado Aberto - Linha verde aparece */
.menu-toggler-button.is-menu-open::after {
    width: 100%; 
}

/* Estilo do Ícone da Seta (SVG) */
.arrow-icon {
    display: inline-block;
    vertical-align: middle;
    width: 12px; 
    height: 12px; 
    margin-left: 5px;
    line-height: 1;
    color: #000; 
    transition: transform 0.3s ease-out; 
}
.arrow-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Estado Aberto - Gira o SVG 180 graus (seta para cima) */
.menu-toggler-button.is-menu-open .arrow-icon {
    transform: rotate(180deg);
}

/* Estilo da Lista de Opções (Dropdown) */
.menu-dropdown-list {
    position: absolute;
    z-index: 999; 
    background-color: #333; /* Fundo Cinza Escuro */
    width: 300px; 
    top: 100%; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
    white-space: nowrap; 
    color:white;
}

/* Estilo do item de menu individual */
.menu-item {
    display: block; 
    padding: 15px 20px;
    color: #fff; 
    text-transform: uppercase;
    font-weight: 500; /* Ajustado para o peso da fonte */
    font-size: 14px; /* Ajustado para o tamanho menor */
    border-bottom: 1px solid #4a4a4a; 
    position: relative; 
    overflow: hidden; 
    transition: background-color 0.2s ease;
}

/* Linha verde inferior para os itens de menu (Hover e Clicado) */
.menu-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0; 
    height: 3px; 
    background-color: #00c900; 
    transition: width 0.3s ease-out; 
     color: #fff; 
}

/* Efeito Hover: Linha verde (Fade in da esquerda) e Fundo */
.menu-item:hover {
    background-color: #4a4a4a; 
     color: #fff; 
}
.menu-item:hover::after {
    width: 100%; 
     color: #fff; 
}


/* ESTADO ATIVO/CLICADO */
.menu-item.is-active-item {
    background-color: #4a4a4a; 
     color: #fff; 
}
.menu-item.is-active-item::after {
    width: 100%; 
}


/* ======================================= */
/* Seta Lateral (→) no HOVER (CORREÇÃO FINAL) */
/* ======================================= */

/* A seta lateral é um pseudo-elemento ::before */
.menu-item::before {
    content: '→'; /* Conteúdo da seta */
    position: absolute;
    right: 20px;
    top: 50%;
    /* Posição inicial: 5px para a direita (fora de cena para o movimento X) */
    transform: translateY(-50%) translateX(5px); 
    color: #fff;
    font-size: 24px;
    line-height: 1;
    opacity: 0; /* Invisível por padrão */
    /* Transição para o movimento e opacidade */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out; 
    z-index: 1; 
}

/* 1. Efeito Hover: Seta aparece (Fade In) e desliza para a posição 0 (Movimento X) */
.menu-item:hover::before {
    opacity: 1;
    transform: translateY(-50%) translateX(0); 
}

/* 2. Efeito Clicado/Ativo: Seta fica fixa na posição final */
.menu-item.is-active-item::before {
    opacity: 1;
    transform: translateY(-50%) translateX(0); 
}

/* Classes para controlar a visibilidade */
.is-hidden {
    display: none !important;
}

[type=button]:focus, [type=button]:hover, [type=submit]:focus, [type=submit]:hover, button:focus, button:hover {
    background-color: white;
    color: black;
    text-decoration: none;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7e8b791f *//* ==================================== */
/* 1. CONTAINER GLOBAL (Pop-up de Tela Cheia) */
/* ==================================== */
#mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: auto;
    background-color: #fff; /* Fundo branco, conforme a imagem */
    z-index: 9999;
    overflow-y: auto;
    
    overflow-x: auto;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Simulação Material Design */
    /* Garante que o menu comece 'escondido' fora da tela */
    transform: translateX(100%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
    text-transform: uppercase;
}

#mobile-menu-overlay.menu-hidden {
    display: block; /* Mantém o display para a animação funcionar */
    transform: translateX(100%);
}

#mobile-menu-overlay.menu-open {
    transform: translateX(0);
}

/* ==================================== */
/* 2. CABEÇALHO E FECHAR */
/* ==================================== */
.mobile-menu-content {
    min-height: calc(100vh - 80px); /* Garante que o footer fique embaixo */
    padding-bottom: 80px; /* Espaço para o footer fixo */
    text-transform: uppercase;
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
    text-transform: uppercase;
}

#close-mobile-menu {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #000;
}
#close-mobile-menu svg {
    width: 24px;
    height: 24px;
}

.mobile-logo {
    /* Ajuste o tamanho conforme necessário */
    height: 30px; 
    width: auto;
}

/* ==================================== */
/* 3. BARRA DE PESQUISA */
/* ==================================== */

/* 1. ESTADO PADRÃO DO CONTAINER */
.mobile-search-bar {
  position: relative;
  display: flex;
  align-items: center;
  margin: 20px;
  background-color: #f0f2f5;
  border-radius: 8px;

  /* Preparamos a borda para a animação. Começa transparente. */
  border: 2px solid transparent;

  /* A MÁGICA DA ANIMAÇÃO: Define a suavidade da transição */
  transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* 2. ESTADO DE FOCO (QUANDO O USUÁRIO CLICA/TOCA) */
.mobile-search-bar:focus-within {
  /* A borda ganha a cor de destaque da sua marca */
  border-color: #0056A7; /* Tom de azul da Uniavan */

  /* Adiciona um "brilho" sutil ao redor, típico do Material UI */
  box-shadow: 0 0 0 3px rgba(0, 86, 167, 0.15); 
}

/* 3. ESTILOS DO INPUT (permanecem os mesmos) */
.mobile-search-bar input {
  width: 100%;
  height: 48px;
  border: none;
  background: transparent;
  outline: none;
  font-size: 16px;
  padding-left: 50px;
  padding-right: 15px;
  color: #333; /* Cor do texto digitado */
}

/* 4. BOTÃO E ÍCONE (com animação de cor) */
.mobile-search-bar .search-button {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex; /* Adicionado para garantir alinhamento do SVG */
  align-items: center;
}

.mobile-search-bar .search-button svg {
  width: 20px;
  height: 20px;
  color: #888; /* Cor padrão do ícone */
  
  /* Adiciona transição suave para a mudança de cor */
  transition: color 0.3s ease-in-out;
}

/* O ícone também muda de cor quando a barra está em foco */
.mobile-search-bar:focus-within .search-button svg {
  color: #0056A7; /* Cor de destaque */
}
/* ==================================== */
/* 4. ITENS DO MENU (Sanfona e Links Diretos) */
/* ==================================== */
.mobile-menu-nav {
    padding: 0 0 20px 0;
}

.mobile-menu-item, .mobile-link-item {
    border-bottom: 1px solid #f0f0f0;
}

/* Botões Acordeão (Eu sou Uniavan, Contatos, etc.) */
.mobile-accordion-toggle {
    width: 100%;
    text-align: left;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 500;
    color: #000;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
     text-transform: uppercase;
}

/* Link Direto (Torn-se Parceiro, Bolsas) */
.mobile-link-item {
    display: block;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 500;
    color: #000;
    text-decoration: none;
}

/* Animação da Seta do Acordeão */
.mobile-arrow-icon {
    font-size: 20px;
    transition: transform 0.3s ease;
    transform: rotate(0deg);
}

.mobile-accordion-toggle[aria-expanded="true"] .mobile-arrow-icon {
    transform: rotate(90deg); /* Vira 90 graus para indicar abertura */
}

/* Conteúdo do Acordeão (Lista de Sub-Itens) */
.mobile-accordion-content {
    /* Inicialmente escondido via JS, mas com altura 0 para animação */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background-color: #f9f9f9;
}

.mobile-sub-item {
    display: block;
    padding: 10px 20px 10px 30px; /* Recuo para sub-item */
    font-size: 14px;
    color: #444;
    text-decoration: none;
    border-top: 1px solid #eee;
}
.mobile-sub-item:first-child {
    border-top: none;
    padding-top: 15px; /* Espaço extra no topo */
}
.mobile-sub-item:last-child {
    padding-bottom: 15px; /* Espaço extra embaixo */
}

/* ==================================== */
/* 5. FOOTER FIXO (Botões Inferiores) */
/* ==================================== */
.mobile-menu-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    padding: 10px 20px;
    background-color: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

/* Botão INSCREVA-SE */
.mobile-subscribe-button {
    flex-grow: 1;
    background-color: #006400; /* Verde Escuro */
    color: #fff;
    text-decoration: none;
    text-align: center;
    padding: 15px 10px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border:none !important;
}
.mobile-subscribe-button .arrow-icon {
    font-size: 20px;
    margin-left: 5px;
}

/* Botão WHATSAPP (Apenas Ícone) */
.mobile-whatsapp-button {
    width: 60px;
    height: 60px;
    background-color: #25D366; /* Verde WhatsApp */
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.mobile-whatsapp-button svg {
    width: 30px;
    height: 30px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-74aa57b7 *//* ==================================== */
/* 6. ESTILOS DO POP-UP DE INSCRIÇÃO */
/* ==================================== */

.mobile-subscribe-button button{
    border: none;
}

/* O container principal, inicialmente escondido */
.subscribe-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000; /* Mais alto que o menu mobile (9999) */
    display: none; /* Começa escondido */
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* Classe que torna o pop-up visível */
.subscribe-popup.is-open {
    display: flex;
}

/* Fundo escuro semi-transparente */
.popup-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    cursor: pointer; /* Permite fechar clicando fora */
    opacity: 0;
    transition: opacity 0.3s ease;
}
.subscribe-popup.is-open .popup-backdrop {
    opacity: 1;
}

/* A caixa de conteúdo do pop-up */
.popup-content {
    position: relative;
    background-color: #fff;
    border-radius: 8px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    overflow: hidden;

    /* Animação de "zoom in" */
    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.subscribe-popup.is-open .popup-content {
    transform: scale(1);
    opacity: 1;
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}

.popup-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.popup-close-btn {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    font-weight: 300;
    color: #888;
    cursor: pointer;
}

/* Estilo da lista de links */
.popup-link-list a.popup-menu-item {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}
.popup-link-list a.popup-menu-item:last-child {
    border-bottom: none;
}
.popup-link-list a.popup-menu-item:hover {
    background-color: #f9f9f9;
}/* End custom CSS */
/* Start custom CSS *//* --- INÍCIO DO CSS DARK MODE --- */

/* Adicione !important para vencer o Elementor */
    body.dark-mode .mobile-menu-content {
        background-color: #121212 !important; 
        color: #ffffff !important;
    }

    body.dark-mode .mobile-menu-header {
        border-bottom: 1px solid #333 !important;
    }

    body.dark-mode .mobile-accordion-toggle {
        color: #ffffff !important;
    }

    body.dark-mode .mobile-sub-item, 
    body.dark-mode .mobile-link-item {
        color: #d1d1d1 !important; 
    }

    /* Garante que ícones fiquem brancos */
    body.dark-mode svg {
        fill: #ffffff !important; 
        stroke: #ffffff !important;
    }
    
    /* Exceção para o botão de fechar se ele usar stroke específico */
    body.dark-mode #close-mobile-menu svg path {
        stroke: #ffffff !important;
    }

/* --- FIM DO CSS DARK MODE --- */



.custom-menu-wrapper button{
    background-color: transparent;
    color:white;
}

.btnnav{
background-color:#2C2C2C; 
color:white;
    
}


.oppacit{
    opacity: 0.2;
}

.card-info{
    cursor:pointer;
    flex-shrink: 0 !important; /* Não encolher! */
    width: 220px;
    margin: 0 0 0 0;
}


/* --- A SOLUÇÃO --- */

.section-cards {
  display: flex;
  overflow-y:auto;
   overflow-x: hidden;
  gap: 16px;
  padding: 10px 0 20px 8px; /* Espaço para a barra de rolagem não colar */
}

/* Esconde a barra de rolagem visualmente mas mantém a funcionalidade (opcional) */
.section-cards::-webkit-scrollbar {
  height: 8px;
}
.section-cards::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}
.section-cards::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.news{
    cursor:pointer;
    flex-shrink: 0 !important; /* Não encolher! */
    width: 360px;
    margin: 0 0 0 0;
}
/**/



/* ==================================== */
/* 1. DEFINIÇÃO DA ANIMAÇÃO KEYFRAMES */
/* ==================================== */

@keyframes subtleRubberBand {
    0% { transform: scale(1, 1); }
    30% { transform: scale(1.02, 0.98) translateY(2px); } /* Estica levemente e desce */
    60% { transform: scale(0.98, 1.02) translateY(-2px); } /* Comprime levemente e sobe */
    100% { transform: scale(1, 1); }
}

/* ==================================== */
/* 2. APLICAÇÃO DA ANIMAÇÃO NO HOVER */
/* ==================================== */

/* APLICAÇÃO GERAL NO CARD CONTAINER */
.card-itens-promo {
    /* (Opcional) Adicione uma transição para a caixa inteira para suavidade */
    transition: box-shadow 0.3s ease, transform 0.3s ease; 
}

/* EFEITO DE HOVER: Aplica a animação aos ELEMENTOS INTERNOS */
.card-itens-promo:hover .elementor-heading-title, 
.card-itens-promo:hover .elementor-icon,
.card-itens-promo:hover .elementor-image,
.card-itens-promo:hover p {
    /* Define a animação para os filhos do card-itens-promo no hover */
    animation: subtleRubberBand 0.8s ease-in-out; 
    /* Garante que o estado final (100%) seja mantido */
    animation-fill-mode: forwards; 
}

/* Efeito adicional no container (Opcional: Sombra no hover para destaque) */
.card-itens-promo:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* Sombra suave para levantar o card */
    transform: translateY(-2px); /* Eleva o card levemente */
}


/***/

.meu-item {
  /* Estilos iniciais do item */
  opacity: 1;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
} 
.esconder {
  /* Classe que será adicionada via JavaScript */
  display: none;
  transform: translateY(-50px); /* Move levemente para cima enquanto some */
  pointer-events: none;         /* Impede cliques quando invisível */
}/* End custom CSS */