/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 17 2026 | 16:20:03 */
/* ================================
   BUTTON EFFECT LINE – PREMIUM FIX
   - Ícone vai p/ direita
   - Texto “vai p/ esquerda”
   - SEM encavalar (reserva o espaço do ícone trocando o padding)
   - SEM mexer no HTML
================================ */

.button_efect_line{
  --btnH: 48px;
  --iconSize: 28px;
  --inset: 1px;
  --padX: 14px;   /* padding lateral “real” do botão */
  --gap: 6px;     /* respiro entre texto e área do ícone */
  --dur: .9s;
  --ease: cubic-bezier(.22,1,.36,1);

  height: var(--btnH);
  min-height: var(--btnH);
  max-height: var(--btnH);

  padding: 0 !important;
  overflow: hidden;
}

/* Wrapper interno */
.button_efect_line .elementor-button-content-wrapper{
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 100%;
}

/* ÍCONE (absoluto, desliza de lado) */
.button_efect_line .elementor-button-icon{
  position: absolute;
  left: var(--inset);
  top: 50%;
  transform: translateY(-50%);
  width: var(--iconSize);
  height: var(--btnH);

  display: grid;
  place-items: center;

  margin: 0 !important;
  padding: 0 !important;

  transition: left var(--dur) var(--ease);
  will-change: left;
  z-index: 2; /* garante que o ícone fica acima */
}

.button_efect_line .elementor-button-icon svg{
  width: 28px;
  height: 28px;
  display: block;
}


/* TEXTO
   - ocupa largura toda
   - reserva espaço do ícone com padding (e troca no hover)
   - não encavala nunca */
.button_efect_line .elementor-button-text{
  display: block;
  width: 100%;

  font-size: 14px;
  line-height: 1;
  white-space: nowrap;

  /* estado normal: espaço pro ícone à esquerda */
  padding-left: calc(var(--iconSize) + var(--inset) + var(--gap));
  padding-right: var(--padX);

  /* centraliza o texto dentro do espaço útil */
  text-align: center;

  transition:
    padding-left var(--dur) var(--ease),
    padding-right var(--dur) var(--ease),
    transform var(--dur) var(--ease);
  will-change: padding-left, padding-right, transform;
}

/* HOVER: ícone vai p/ direita */
.button_efect_line:hover .elementor-button-icon{
  left: calc(100% - var(--iconSize) - var(--inset));
}

/* HOVER: “negativa” o cálculo trocando a reserva:
   tira o espaço da esquerda e passa a reservar na direita
   -> texto vai “pro lado oposto” e não encavala */
.button_efect_line:hover .elementor-button-text{
  padding-left: var(--padX);
  padding-right: calc(var(--iconSize) + var(--inset) + var(--gap));

  /* micro ajuste suave (pode deixar 0 se quiser) */
  transform: translateX(-4px);
}

/* Opcional: melhora clique/hover sem afetar layout */
.button_efect_line .elementor-button-icon,
.button_efect_line .elementor-button-text{
  pointer-events: none; /* clique continua no <a> do botão */
}


/* Setinha do menu com submenu – SOMENTE navbar_menu_header */
.navbar_menu_header li.menu-item-has-children > a .sub-arrow svg{
  fill: #008A9A !important;
}

.navbar_menu_header li.menu-item-has-children > a .sub-arrow svg path{
  fill: #008A9A !important;
}


/* =====================================
   MOBILE – CENTRALIZA ÍCONE + TEXTO
   Escopo: .header_button_mobile
===================================== */
@media (max-width: 767px){
 /* padding do botão */
  .header_button_mobile .elementor-button{
    padding: 10px 12px !important;
  }
  .header_button_mobile .elementor-button-content-wrapper{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

.button_efect_line .elementor-button-icon svg{
  width: 22px;
  height: 22px;
  display: block;
}

  .header_button_mobile .elementor-button-icon{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .header_button_mobile .elementor-button-icon svg{
    width: 28px !important;
    height: 28px !important;
    display: block !important;
  }

  .header_button_mobile .elementor-button-text{
    display: flex !important;
    align-items: center !important;
    line-height: 1 !important;
  }
/* Setinha do menu com submenu – SOMENTE navbar_menu_header */
.navbar_menu_header li.menu-item-has-children > a .sub-arrow svg{
  fill: white !important;
}

.navbar_menu_header li.menu-item-has-children > a .sub-arrow svg path{
  fill: white !important;
}


}













/* ==============================
   OVERLAY FUNDO DO MENU
   Cor: #008A9A | z-index: 2
============================== */

#ctm-menu-overlay{
  position: fixed;
  inset: 0;
  background: #008A9A;
  z-index: 2;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity .25s ease, visibility .25s ease;
}

/* Quando menu abre */
body.ctm-menu-open #ctm-menu-overlay{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Seu painel do menu acima do overlay */
body.ctm-menu-open .box_open_menu_display{
  z-index: 3 !important;
  position: fixed; /* garante que fica acima e firme */
}

/* (opcional) se seu header precisar ficar acima também */
.navbar_menu_header{
  position: relative;
  z-index: 4;
}




/* ==============================
   MOSTRAR BLOCO AO ABRIR O MENU
   Menu wrapper: .navbar_menu_header
   Bloco: .box_open_menu_display
============================== */

/* estado inicial: escondido */
.box_open_menu_display{
  display: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
  transform: translateY(-6px);
}

/* quando o menu estiver aberto */
body.ctm-menu-open .box_open_menu_display{
  display: flex !important;        /* ou block, se preferir */
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}


/* ==============================
   MENU MOBILE – FUNDO AZUL
   Fundo: #008A9A
   Texto: branco
============================== */
@media (max-width: 767px){


  /* Itens principais */
  .elementor-nav-menu > li > a.elementor-item{
    color: #fff !important;
  }

  /* Hover / ativo */
  .elementor-nav-menu > li > a.elementor-item:hover,
  .elementor-nav-menu > li > a.elementor-item:focus{
    color: #fff !important;
    opacity: .85;
  }

  /* Submenu */
  .elementor-nav-menu .sub-menu{
    background: #008A9A !important;
  }

  /* Itens do submenu */
  .elementor-nav-menu .sub-menu a.elementor-sub-item{
    color: #fff !important;
  }

  .elementor-nav-menu .sub-menu a.elementor-sub-item:hover{
    opacity: .85;
  }

  /* Setinhas (SVG) */
  .elementor-nav-menu .sub-arrow svg{
    fill: #fff !important;
  }

  /* Remove qualquer fundo branco automático */
  .elementor-nav-menu--dropdown,
  .elementor-nav-menu__container{
    background: transparent !important;
  }
}





/* ==============================
   SEARCH OVERLAY
============================== */

/* começa escondido */
.box_open_menu_display_search{
  display: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: 
    opacity .25s ease,
    visibility .25s ease,
    transform .25s ease;

  transform: translateY(-6px);
  z-index: 5; /* acima do overlay azul */
}

/* quando aberto */
body.ctm-search-open .box_open_menu_display_search{
  display: flex !important;   /* ou block */
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}


.box_open_menu_display_search{
  background: rgba(0, 138, 154, 0.5) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari */


	body {
overflow-x: hidden;
}/* Quando a classe .is-search-open estiver no Menu Toggle: */

