/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/



	.header-button a {
    color: #FFFFFF !important; /* Cor do texto do botão */
}

.header-button a:hover {
    color: #ffffff !important; /* Cor do texto ao passar o mouse */
}



.formulario-item-50 {
  float: left;
  width: 50%;
  margin-bottom: 20px;
}
//Estilizando os campos que vão receber o conteúdo (inputs)
.formulario-item-50 input {
  width: 100%;
  float: left;
}
//Estilizando a classe item-esquerda para dar um espaço na direita entre os campos
.formulario-item-50.item-esquerda {
  padding-right: 15px;
}
//Configurando o comportamento dos campos no mobile
@media only screen and (max-width: 767px) {
  .formulario-item-50 {
    width: 100%
  }
  //Retirando o espaçamento da direita no mobile para alinhar os campos
  .formulario-item-50.item-esquerda {
    padding-right: 5;
  }
}
.formulario-item-100 {
  width: 100%;
  margin-bottom: 20px;
}
.formulario-item-100 input {
  width: 100%;
}
.formulario-item-100 textarea {
  width: 100%;
}

.button-rosa-claro {
    background-color: #FF80BF; /* Cor do fundo quando ativo */
    color: #191919; /* Mantém a cor do texto quando ativo */
}

.button-rosa-claro {
background-color: #FF80BF; 
color: #191919; 
}
	
.button-rosa-pink {
background-color: #FF007F; 
color: #ffffff; 
}
	
.button-roxo-escuro {
background-color: #3A0539; 
color: #ffffff; 
}
	
.button-amarelo {
background-color: #F4FF00; 
color: #3A0539; 
}

.text-color-roxo {
color: #3A0539; 
}

.font-accordion {
font-family: 'Funnel Display', sans-serif; 
font-size: 24px; 
	}

.divider-top {
  background: #F8F8F4;  /* cor de fundo principal */
  position: relative;
  overflow: hidden;     /* evita que o pseudo-elemento ultrapasse */
}

/* Criando o retângulo arredondado laranja */
.divider-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 120px; /* altura do retângulo laranja */
  background: #FF5900;
  border-top-left-radius: 50px;  /* arredondamento */
  border-top-right-radius: 50px;
}


.divider-top-roxo {
  background: #ffffff; 
  position: relative;
  overflow: hidden;    
}

.divider-top-roxo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 120px; 
  background: #3A0539;
  border-top-left-radius: 50px;  
  border-top-right-radius: 50px;
}

.meu-botao-amarelo {
    background-color: #fbfb00; /* Cor de fundo amarela */
    color: #000000;           /* Texto preto */
    border: none;             /* Remove borda padrão */
    padding: 10px 20px;       /* Espaçamento interno */
    font-size: 16px;          /* Tamanho da fonte */
    font-weight: bold;        /* Texto em negrito */
    border-radius: 5px;       /* Cantos levemente arredondados */
    cursor: pointer;          /* Cursor tipo mãozinha */
    transition: background 0.3s ease;
}

.blog-post .box {
  border-radius: 12px; /* Ajuste o valor conforme desejado */
  overflow: hidden;    /* Garante que a imagem siga o arredondamento da caixa */
  border: 1px solid #e0e0e0; /* Opcional: define uma borda */
}



/* Ícones sociais - Roxo e Branco*/
.follow-icons a,
.social-icons a {
    background-color: #3A0539 !important; /* Fundo roxo */
    color: #FFFFFF !important; /* Ícone branco */
    border-radius: 50%; /* Circular */
    transform: scale(0.9); /* Diminui em 10% */
}

/* Para ícones SVG */
.follow-icons a svg,
.social-icons a svg {
    fill: #FFFFFF !important; /* Ícone branco */
}

/* Remove qualquer efeito hover */
.social-icons a:hover,
.follow-icons a:hover,
.header-social-icons a:hover {
  background-color: #3A0539 !important;
  color: #ffffff !important;
  border-color: #3A0539 !important;
  opacity: 1 !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}




/* Ícones sociais - Amarelo e Roxo */
.follow-icons-amarelo a,
.social-icons-amarelo a {
    background-color: #FFFF00 !important; /* Fundo amarelo */
    color: #3A0539 !important; /* Ícone roxo */
    border-radius: 50%; /* Formato circular */
}


/* Ícones sociais - Roxo e rosa*/
.follow-icons-rosa a,
.social-icons-rosa a {
    background-color: #FFBFDF !important; /* Fundo roxo */
    color: #020028 !important; /* Ícone branco */
    border-radius: 50%; /* Circular */
    transform: scale(0.9); /* Diminui em 10% */
}

/* Para ícones SVG */
.follow-icons-rosa a svg,
.social-icons-rosa a svg {
    fill: #020028 !important; /* Ícone branco */
}


.divider-top-azul {
  background: #F8F8F4;  /* cor de fundo principal */
  position: relative;
  overflow: hidden;     /* evita que o pseudo-elemento ultrapasse */
}

/* Criando o retângulo arredondado laranja */
.divider-top-azul::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 120px; /* altura do retângulo laranja */
  background: #020028;
  border-top-left-radius: 50px;  /* arredondamento */
  border-top-right-radius: 50px;
}



/* Tabs Flatsome - Rosa #FF007F */
.tabbed-content-fazemos .nav > li > a {
  position: relative;
  color: #fff !important;           /* letras sempre brancas */
  border: 2px solid #FF007F;        /* borda rosa */
  background: transparent;          /* inativas transparentes */
  border-radius: 9999px;            /* formato pílula */
  padding: .55em 1.2em .55em 1.9em;
  line-height: 1.2;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

/* Bolinha rosa nas inativas */
.tabbed-content-fazemos .nav > li > a::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF007F;
}

/* Aba ativa preenchida */
.tabbed-content-fazemos .nav > li.active > a,
.tabbed-content-fazemos .nav > li > a.is-active,
.tabbed-content-fazemos .nav > li > a[aria-selected="true"],
.tabbed-content .nav > li.current > a {
  background: #FF007F;               /* preenchida */
  border-color: #FF007F;
  color: #fff !important;            /* letras brancas */
}

/* Bolinha branca quando ativa */
.tabbed-content-fazemos .nav > li.active > a::before,
.tabbed-content-fazemos .nav > li > a.is-active::before,
.tabbed-content-fazemos .nav > li > a[aria-selected="true"]::before,
.tabbed-content-fazemos .nav > li.current > a::before {
  background: #fff;
}

/* Espaçamento entre tabs */
.tabbed-content-fazemos .nav > li {
  margin: 0 12px 12px 0; /* espaço lateral e vertical */
}

/* Tabs Flatsome - Somos */
.tabbed-content-somos .nav a {
 color: #7F7D7D; /* cinza igual às linhas */
  font-weight: 400; /* peso normal */
  text-decoration: none;
  transition: all 0.3s ease;
}


/* Hover nas tabs */
.tabbed-content-somos .nav a:hover {
color: #3A0539;      /* texto roxo */
  font-weight: 700;    /* negrito */
  border-bottom: 0.3px solid #5A005A; /* linha roxa */
}

/* Botão Load More arredondado */
.ux-load-more a,
.ux-load-more button {
  border-radius: 9999px; /* arredondado total */
  padding: 10px 25px;    /* ajusta tamanho interno */
  font-weight: 600;      /* opcional: deixa o texto em destaque */
}

/* Efeito hover (opcional) */
.ux-load-more a:hover,
.ux-load-more button:hover {
  opacity: 0.9;
  transform: scale(1.03); /* leve zoom */
  transition: all 0.2s ease-in-out;
	
	
}
input[type="submit"],
input[type="button"],
button {
  text-transform: capitalize;
}

	
	
	
/* Título do post (H1) */
.single-post .entry-title {
  color: #3A0539;
  font-size: 4em; /* Ajuste o valor conforme sua preferência */
}
	
.single-post #comments {
  display: none !important;
}
	
	
	
	.slider-nav,
.slider-nav li a,
.slider-arrow,
.flickity-prev-next-button {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}