/************** MENU **************//************** MENU **************//************** MENU **************//************** MENU **************/
/************** MENU **************//************** MENU **************//************** MENU **************//************** MENU **************/
/************** MENU **************//************** MENU **************//************** MENU **************//************** MENU **************/
/************** MENU **************//************** MENU **************//************** MENU **************//************** MENU **************/
/************** MENU **************//************** MENU **************//************** MENU **************//************** MENU **************/
/************** MENU **************//************** MENU **************//************** MENU **************//************** MENU **************/
/************** MENU **************//************** MENU **************//************** MENU **************//************** MENU **************/
/************** MENU **************//************** MENU **************//************** MENU **************//************** MENU **************/
/************** MENU **************//************** MENU **************//************** MENU **************//************** MENU **************/
/************** MENU **************//************** MENU **************//************** MENU **************//************** MENU **************/
/* Estilos para o Menu */
.navbar .navbar-brand img {
width: 85px; /* aumenta a largura do logo */
}
.h1-menu {
font-size: 2.7rem; /* Ajuste o valor conforme necessário */
font-family: inherit; /* Isso garantirá que ele use a mesma fonte que outros elementos Bootstrap */
font-weight: 700; /* Peso da fonte padrão para h1 no Bootstrap. Ajuste conforme necessário */
letter-spacing: 0.1rem;
color: #7F7F7F;
}
.navbar .nav-link {
font-size: 1.1rem; /* aumenta o tamanho da fonte para os itens do menu */
font-weight: 600;
color: rgb(145, 145, 145);
}
.navbar .dropdown-item {
font-size: 1rem; /* aumenta o tamanho da fonte para os itens do menu */
padding: 0.2rem 0.8rem;
color: rgb(145, 145, 145);
font-weight: 500;
}
.navbar .list-group-item {
border: 0;
}
.navbar .menu-zap {
font-size: 1.9rem;
font-weight: 600;
}
.navbar .menu-phone {
font-size: 1.9rem;
}
/* Media query para resoluções maiores que 275px */
@media (min-width: 275px) {
.navbar .menu-zap {
font-size: 1.9rem;
font-weight: 600;
color:rgb(183, 183, 183);
}
.navbar .menu-phone {
font-size: 1.9rem;
color:rgb(183, 183, 183);
}
}
/* Media query para resoluções maiores que 375px */
@media (min-width: 375px) {
.navbar .menu-zap {
font-size: 2.8rem;
font-weight: 600;
}
.navbar .menu-phone {
font-size: 2.1rem;
}
}
/* Media query para resoluções maiores que 480px */
@media (min-width: 480px) {
.navbar .menu-zap {
font-size: 2.8rem;
font-weight: 600;
}
.navbar .menu-phone {
font-size: 2.1rem;
}
}
/* Media query para resoluções maiores que 576px */
@media (min-width: 576px) {
.navbar .menu-zap {
font-size: 2.8rem;
font-weight: 600;
}
.navbar .menu-phone {
font-size: 2.1rem;
}
}
/* Media query para resoluções maiores que 768px */
@media (min-width: 768px) {
.navbar .menu-zap {
font-size: 2.8rem;
font-weight: 600;
}
.navbar .menu-phone {
font-size: 2.1rem;
}
}
/* Media query para resoluções maiores que 992px */
@media (min-width: 992px) {
.navbar .navbar-brand img {
width: 85px; /* aumenta a largura do logo */
}
.h1-menu {
font-size: 2.3rem; /* Ajuste o valor conforme necessário */
margin-left: 1.2rem;
margin-bottom: 0.2rem;
}
.navbar .nav-link {
font-size: 1.1rem; /* aumenta o tamanho da fonte para os itens do menu */
font-weight: 600;
color: rgb(145, 145, 145);
}
.navbar .dropdown-item {
font-size: 1rem; /* aumenta o tamanho da fonte para os itens do menu */
padding: 0.5rem 2rem;
color: rgb(145, 145, 145);
}
.navbar .menu-zap {
font-size: 2.8rem;
font-weight: 600;
}
.navbar .menu-phone {
font-size: 2.1rem;
}
}
/* Media query para resoluções maiores que 2100px */
@media (min-width: 1200px) {
.navbar .navbar-brand img {
width: 100px; /* aumenta a largura do logo */
}
.h1-menu {
font-size: 2.8rem; /* Ajuste o valor conforme necessário */
margin-left: 1.2rem;
margin-bottom: 0.25rem;
}
.navbar .nav-link {
font-size: 1.4rem; /* aumenta o tamanho da fonte para os itens do menu */
font-weight: 600;
color: rgb(145, 145, 145);
}
.navbar .dropdown-item {
font-size: 1.2rem; /* aumenta o tamanho da fonte para os itens do menu */
padding: 0.5rem 2rem;
color: rgb(145, 145, 145);
}
.navbar .menu-zap {
font-size: 2.8rem;
font-weight: 600;
}
.navbar .menu-phone {
font-size: 1.9rem;
}
}
/* Media query para resoluções maiores que 2100px */
@media (min-width: 1700px) {
.navbar .navbar-brand img {
width: 120px; /* aumenta a largura do logo */
}
.h1-menu {
font-size: 3.2rem; /* Ajuste o valor conforme necessário */
margin-left: 1.2rem;
margin-bottom: 0.3rem;
}
.navbar .nav-link {
font-size: 1.5rem; /* aumenta o tamanho da fonte para os itens do menu */
font-weight: 600;
color: rgb(145, 145, 145);
}
.navbar .dropdown-item {
font-size: 1.3rem; /* aumenta o tamanho da fonte para os itens do menu */
padding: 0.5rem 2rem;
color: rgb(145, 145, 145);
}
}
/* Media query para resoluções maiores que 2100px */
@media (min-width: 2100px) {
.navbar .navbar-brand img {
width: 150px; /* aumenta a largura do logo */
}
.h1-menu {
font-size: 4.2rem; /* Ajuste o valor conforme necessário */
margin-left: 1.3rem;
}
.navbar .nav-link {
font-size: 1.9rem; /* aumenta o tamanho da fonte para os itens do menu */
font-weight: 600;
color: rgb(145, 145, 145);
}
.navbar .dropdown-item {
font-size: 1.7rem; /* aumenta o tamanho da fonte para os itens do menu */
padding: 0.5rem 2rem;
color: rgb(145, 145, 145);
}
}
/************** HEADER **************//************** HEADER **************//************** HEADER **************//************** HEADER **************/
/************** HEADER **************//************** HEADER **************//************** HEADER **************//************** HEADER **************/
/************** HEADER **************//************** HEADER **************//************** HEADER **************//************** HEADER **************/
/************** HEADER **************//************** HEADER **************//************** HEADER **************//************** HEADER **************/
/************** HEADER **************//************** HEADER **************//************** HEADER **************//************** HEADER **************/
/************** HEADER **************//************** HEADER **************//************** HEADER **************//************** HEADER **************/
/* Estilos para o Header */
#header-img-mobile {
width: 60%;
}
@media (min-width: 300px) {
#header-img-mobile {
width: 60%;
}
}
@media (min-width: 400px) {
#header-img-mobile {
width: 70%;
}
}
@media (min-width: 576px) {
#header-img-mobile {
width: 75%;
}
}
@media (min-width: 768px) {
#header-img-mobile {
width: 75%;
}
}
@media (min-width: 992px) {
#header-img-mobile {
width: 75%;
}
}
#header-img-monitor {
width: 70%;
}
@media (min-width: 992px) {
#header-img-monitor {
width: 75%;
}
#header-monitor {
width: 95%;
}
}
@media (min-width: 1025px) {
#header-img-monitor {
width: 60%;
}
#header-monitor {
width: 95%;
}
}
@media (min-width: 1100px) {
#header-img-monitor {
width: 65%;
}
#header-monitor {
width: 90%;
}
}
@media (min-width: 1200px) {
#header-img-monitor {
width: 75%;
}
#header-monitor {
width: 90%;
}
}
@media (min-width: 1400px) {
#header-img-monitor {
width: 65%;
}
#header-monitor {
width: 90%;
}
}
@media (min-width: 1700px) {
#header-img-monitor {
width: 60%;
}
#header-monitor {
width: 85%;
}
}
@media (min-width: 1920px) {
#header-img-monitor {
width: 60%;
}
#header-monitor {
width: 85%;
}
}
@media (min-width: 2200px) {
#header-img-monitor {
width: 90%;
}
#header-monitor {
width: 80%;
}
}
#header .quadro img {
object-fit: cover;
width: 100%;
height: 100%;
}
#header .anuncio {
padding-right: 50px;
}
.sombra-cima {
box-shadow: inset 0 10px 15px -10px rgba(0, 0, 0, 0.5), inset 0 -10px 15px -10px rgba(0, 0, 0, 0.34);
}
/* TÃtulo Principal *//* TÃtulo Principal *//* TÃtulo Principal */
/* TÃtulo Principal *//* TÃtulo Principal *//* TÃtulo Principal */
.h0 {
font-size: 2.5rem; /* Ajuste o valor conforme necessário */
font-family: inherit;
font-weight: 500; /* Peso da fonte padrão para h1 no Bootstrap. Ajuste conforme necessário */
text-align: center;
line-height: 1.1;
}
/** 300px e Monitores um pouco Maiores */
@media (min-width: 300px) {
.h0 {
font-size: 2.3rem; /* Ajuste o valor conforme necessário */
line-height: 1;
margin-top: 0 !important;
margin-bottom: 5px !important;
}
.st1 {
font-size: 1.2rem;
margin-bottom: 0 !important;
}
}
/** 400px e Monitores um pouco Maiores */
@media (min-width: 400px) {
.h0 {
font-size: 2.5rem; /* Ajuste o valor conforme necessário */
font-family: inherit;
font-weight: 500; /* Peso da fonte padrão para h1 no Bootstrap. Ajuste conforme necessário */
text-align: center;
line-height: 1.1;
}
}
/** 576px e Monitores um pouco Maiores */
@media (min-width: 576px) {
.h0 {
font-size: 3.1rem; /* Ajuste o valor conforme necessário */
font-weight: 500; /* Peso da fonte padrão para h1 no Bootstrap. Ajuste conforme necessário */
}
}
/** 768px e Monitores um pouco Maiores */
@media (min-width: 768px) {
.h0 {
font-size: 3.5rem; /* Ajuste o valor conforme necessário */
font-weight: 500; /* Peso da fonte padrão para h1 no Bootstrap. Ajuste conforme necessário */
}
}
/** 992px e Monitores um pouco Maiores */
@media (min-width: 992px) {
.h0 {
font-size: 3.4rem; /* Ajuste o valor conforme necessário */
font-weight: 500; /* Peso da fonte padrão para h1 no Bootstrap. Ajuste conforme necessário */
text-align: left;
}
}
/** 1200px e Monitores um pouco Maiores */
@media (min-width: 1200px) {
.h0 {
font-size: 3.9rem; /* Ajuste o valor conforme necessário */
font-weight: 500; /* Peso da fonte padrão para h1 no Bootstrap. Ajuste conforme necessário */
text-align: left;
}
}
/** 1400px e Monitores um pouco Maiores */
@media (min-width: 1400px) {
.h0 {
font-size: 4.6rem; /* Ajuste o valor conforme necessário */
font-weight: 500; /* Peso da fonte padrão para h1 no Bootstrap. Ajuste conforme necessário */
text-align: left;
}
}
/** 1700px e Monitores um pouco Maiores */
@media (min-width: 1700px) {
.h0 {
font-size: 5.5rem; /* Ajuste o valor conforme necessário */
font-weight: 500; /* Peso da fonte padrão para h1 no Bootstrap. Ajuste conforme necessário */
text-align: left;
}
}
/** Header Auto FullHD e Monitores um pouco Maiores */
@media (min-width: 1920px) {
.h0 {
font-size: 6rem; /* Ajuste o valor conforme necessário */
font-weight: 500; /* Peso da fonte padrão para h1 no Bootstrap. Ajuste conforme necessário */
text-align: left;
}
}
/** Header Auto Monitores Com Mais de 2200px*/
@media (min-width: 2200px) {
.h0 {
font-size: 7.5rem; /* Ajuste o valor conforme necessário */
font-weight: 500; /* Peso da fonte padrão para h1 no Bootstrap. Ajuste conforme necessário */
text-align: left;
}
}
/* SubtÃtulo (frase) *//* SubtÃtulo (frase) *//* SubtÃtulo (frase) */
/* SubtÃtulo (frase) *//* SubtÃtulo (frase) *//* SubtÃtulo (frase) */
/* SubtÃtulo (frase) *//* SubtÃtulo (frase) *//* SubtÃtulo (frase) */
.st1 {
font-size: 1.5rem; /* Ajuste o valor conforme necessário */
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-weight: 400; /* Peso da fonte padrão para h1 no Bootstrap. Ajuste conforme necessário */
color: rgb(69,69,69);
line-height: 1.3;
text-align: center;
}
/** 768px e Monitores um pouco Maiores */
@media (max-width: 376px) {
.st1 {
font-size: 1.3rem; /* Ajuste o valor conforme necessário */
font-weight: 500; /* Peso da fonte padrão para h1 no Bootstrap. Ajuste conforme necessário */
}
#header h0 {
font-size: 2.2rem;
}
}
/** 768px e Monitores um pouco Maiores */
@media (min-width: 576px) {
.st1 {
font-size: 1.9rem; /* Ajuste o valor conforme necessário */
font-weight: 500; /* Peso da fonte padrão para h1 no Bootstrap. Ajuste conforme necessário */
}
}
/** 768px e Monitores um pouco Maiores */
@media (min-width: 768px) {
.st1 {
font-size: 2.1rem; /* Ajuste o valor conforme necessário */
font-weight: 500; /* Peso da fonte padrão para h1 no Bootstrap. Ajuste conforme necessário */
}
}
/** 992px e Monitores um pouco Maiores */
@media (min-width: 992px) {
.st1 {
font-size: 1.5rem; /* Ajuste o valor conforme necessário */
font-weight: 500; /* Peso da fonte padrão para h1 no Bootstrap. Ajuste conforme necessário */
text-align: left;
}
}
/** 1200px e Monitores um pouco Maiores */
@media (min-width: 1200px) {
.st1 {
font-size: 1.7rem; /* Ajuste o valor conforme necessário */
font-weight: 500; /* Peso da fonte padrão para h1 no Bootstrap. Ajuste conforme necessário */
text-align: left;
}
}
/** 1400px e Monitores um pouco Maiores */
@media (min-width: 1400px) {
.st1 {
font-size: 2rem; /* Ajuste o valor conforme necessário */
font-weight: 500; /* Peso da fonte padrão para h1 no Bootstrap. Ajuste conforme necessário */
text-align: left;
}
}
/** 1700px e Monitores um pouco Maiores */
@media (min-width: 1700px) {
.st1 {
font-size: 1.9rem; /* Ajuste o valor conforme necessário */
font-weight: 500; /* Peso da fonte padrão para h1 no Bootstrap. Ajuste conforme necessário */
text-align: left;
}
}
/** Header Auto FullHD e Monitores um pouco Maiores */
@media (min-width: 1920px) {
.st1 {
font-size: 2rem; /* Ajuste o valor conforme necessário */
font-weight: 500; /* Peso da fonte padrão para h1 no Bootstrap. Ajuste conforme necessário */
text-align: left;
}
}
/** Header Auto Monitores Indo pro 4K */
@media (min-width: 2200px) {
.st1 {
font-size: 3rem; /* Ajuste o valor conforme necessário */
font-weight: 500; /* Peso da fonte padrão para h1 no Bootstrap. Ajuste conforme necessário */
text-align: left;
}
}
/* Botão do Header *//* Botão do Header *//* Botão do Header */
/* Botão do Header *//* Botão do Header *//* Botão do Header */
/* Botão do Header *//* Botão do Header *//* Botão do Header */
.btn-header {
font-size: 1.2rem; /* Aumenta o tamanho da fonte */
padding: 0.55rem 1rem; /* Aumenta o padding para tornar o botão maior */
margin-top: 0rem;
margin-left: 0rem;
background-color: #FF4400;
color: white;
}
.btn-header:hover {
background-color: #00ffd5;
color: #000;
}
/* Media query para resoluções maiores que 768px */
@media (min-width: 576px) {
.btn-header {
font-size: 1.3rem; /* Aumenta o tamanho da fonte */
padding: 0.60rem 1.1rem; /* Aumenta o padding para tornar o botão maior */
}
}
/* Media query para resoluções maiores que 768px */
@media (min-width: 768px) {
.btn-header {
font-size: 1.4rem; /* Aumenta o tamanho da fonte */
padding: 0.65rem 1.1rem; /* Aumenta o padding para tornar o botão maior */
}
}
/* Media query para resoluções maiores que 992px */
@media (min-width: 992px) {
.btn-header {
font-size: 1.3rem; /* Aumenta o tamanho da fonte */
padding: 0.55rem 1rem; /* Aumenta o padding para tornar o botão maior */
margin-top: 0.9rem;
margin-left: 16rem;
}
}
/* Media query para resoluções maiores que 1920px */
@media (min-width: 1200px) {
.btn-header {
font-size: 1.4rem; /* Aumenta o tamanho da fonte */
padding: 0.65rem 1.2rem; /* Aumenta o padding para tornar o botão maior */
margin-top: 1.9rem;
margin-left: 20rem;
}
}
/* Media query para resoluções maiores que 1920px */
@media (min-width: 1400px) {
.btn-header {
font-size: 1.5rem; /* Aumenta o tamanho da fonte */
padding: 0.75rem 1.5rem; /* Aumenta o padding para tornar o botão maior */
margin-top: 2.1rem;
margin-left: 25rem;
}
}
/* Media query para resoluções maiores que 1920px */
@media (min-width: 1700px) {
.btn-header {
font-size: 1.6rem; /* Aumenta o tamanho da fonte */
padding: 0.75rem 1.5rem; /* Aumenta o padding para tornar o botão maior */
margin-top: 2.4rem;
margin-left: 33rem;
}
}
/* Media query para resoluções maiores que 1920px */
@media (min-width: 1920px) {
.btn-header {
font-size: 1.7rem; /* Aumenta o tamanho da fonte */
padding: 1rem 2rem; /* Aumenta o padding para tornar o botão maior */
margin-top: 3rem;
margin-left: 33rem;
}
}
/* Media query para resoluções maiores que 2200px */
@media (min-width: 2200px) {
.btn-header {
font-size: 1.8rem; /* Ainda maior */
padding: 1.25rem 2.5rem; /* Aumenta ainda mais o padding */
margin-top: 3rem;
margin-left: 33rem;
}
}
/* Media query para resoluções maiores que 2500px */
@media (min-width: 2380px) {
.btn-header {
font-size: 2.1rem; /* Aumenta mais a fonte */
padding: 1.5rem 3rem; /* Aumenta o padding proporcionalmente */
margin-top: 4rem;
margin-left: 40rem;
}
}
/* Fim do Header *//* Fim do Header *//* Fim do Header */
/* Fim do Header *//* Fim do Header *//* Fim do Header */
/* Fim do Header *//* Fim do Header *//* Fim do Header */
/* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES */
/* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES */
/* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES */
/* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES */
/* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES */
/* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES */
/* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES */
/* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES */
/* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES */
/* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES *//* SEÇÕES */
/* Cabeçalhos das Seções *//* Cabeçalhos das Seções *//* Cabeçalhos das Seções */
/* Cabeçalhos das Seções *//* Cabeçalhos das Seções *//* Cabeçalhos das Seções */
/* Cabeçalhos das Seções *//* Cabeçalhos das Seções *//* Cabeçalhos das Seções */
.h0-secoes {
font-size: 1.4rem; /* Ajuste o valor conforme necessário */
font-family: inherit;
font-weight: 500; /* Peso da fonte padrão para h1 no Bootstrap. Ajuste conforme necessário */
}
/* Media query para resoluções maiores que 300px */
@media (min-width: 300px) {
.h0-secoes {
font-size: 1.55rem; /* Aumenta o tamanho da fonte */
}
}
/* Media query para resoluções maiores que 350px */
@media (min-width: 350px) {
.h0-secoes {
font-size: 1.85rem; /* Aumenta o tamanho da fonte */
}
}
/* Media query para resoluções maiores que 400px */
@media (min-width: 400px) {
.h0-secoes {
font-size: 2rem; /* Aumenta o tamanho da fonte */
}
}
/* Media query para resoluções maiores que 500px */
@media (min-width: 500px) {
.h0-secoes {
font-size: 2.2rem; /* Aumenta o tamanho da fonte */
}
}
/* Media query para resoluções maiores que 576px */
@media (min-width: 576px) {
.h0-secoes {
font-size: 3rem; /* Aumenta o tamanho da fonte */
}
}
/* Media query para resoluções maiores que 768px */
@media (min-width: 768px) {
.h0-secoes {
font-size: 3.5rem; /* Aumenta o tamanho da fonte */
}
}
/* Media query para resoluções maiores que 992px */
@media (min-width: 992px) {
.h0-secoes {
font-size: 3.4rem; /* Aumenta o tamanho da fonte */
}
}
/* Media query para resoluções maiores que 1920px */
@media (min-width: 1200px) {
.h0-secoes {
font-size: 3.4rem; /* Aumenta o tamanho da fonte */
}
}
/* Media query para resoluções maiores que 1920px */
@media (min-width: 1400px) {
.h0-secoes {
font-size: 4rem; /* Aumenta o tamanho da fonte */
}
}
/* Media query para resoluções maiores que 1920px */
@media (min-width: 1700px) {
.h0-secoes {
font-size: 4.5rem; /* Aumenta o tamanho da fonte */
}
}
/* Media query para resoluções maiores que 1920px */
@media (min-width: 1920px) {
.h0-secoes {
font-size: 5rem; /* Aumenta o tamanho da fonte */
}
}
/* Media query para resoluções maiores que 2200px */
@media (min-width: 2200px) {
.h0-secoes {
font-size: 7.5rem; /* Ainda maior */
}
}
/* Fim dos Cabeçalhos da Seções *//* Fim dos Cabeçalhos da Seções */
/* Fim dos Cabeçalhos da Seções *//* Fim dos Cabeçalhos da Seções */
/* Botões de ação das Seções *//* Botões de ação das Seções */
/* Botões de ação das Seções *//* Botões de ação das Seções */
/* Botões de ação das Seções *//* Botões de ação das Seções */
.btn-secoes {
font-size: 1.2rem; /* Aumenta o tamanho da fonte */
padding: 0.55rem 1rem; /* Aumenta o padding para tornar o botão maior */
margin-top: 0rem;
margin-left: 0rem;
background-color: #FF4400;
color: white;
}
.btn-secoes:hover {
background-color: #00ffd5;
color: #000;
}
/* PARCERIAS - SINDEPAR */
.btn-secoes-parcerias {
font-size: 1.25rem; /* Aumenta o tamanho da fonte */
font-weight: 600;
padding: 0.75rem 1.2rem; /* Aumenta o padding para tornar o botão maior */
background-color: #ff7d32;
color: #ffffff;
/*text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5); */
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}
.btn-secoes-parcerias:hover {
background-color: #00d9ff;
color: #000;
}
.btn-submit {
font-size: 1.25rem; /* Aumenta o tamanho da fonte */
font-weight: 600;
padding: 0.75rem 1.2rem; /* Aumenta o padding para tornar o botão maior */
background-color: #ff7d32;
color: #ffffff;
/*text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5); */
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
/*text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5);/*
/*box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3); */
}
.btn-submit:hover {
background-color: #b96fff;
color: #000;
}
.btn-whatsapp {
font-size: 1.3rem; /* Aumenta o tamanho da fonte */
font-weight: 700;
padding: 0.55rem 1rem; /* Aumenta o padding para tornar o botão maior */
margin-top: 0rem;
margin-left: 0rem;
background-color: #3cff00;
color: white;
}
.btn-whatsapp:hover {
background-color: #00ffd5;
color: #000;
}
/* Media query para resoluções maiores que 768px */
@media (min-width: 576px) {
.btn-secoes {
font-size: 1.3rem; /* Aumenta o tamanho da fonte */
padding: 0.60rem 1.1rem; /* Aumenta o padding para tornar o botão maior */
}
}
/* Media query para resoluções maiores que 768px */
@media (min-width: 768px) {
.btn-secoes {
font-size: 1.4rem; /* Aumenta o tamanho da fonte */
padding: 0.65rem 1.1rem; /* Aumenta o padding para tornar o botão maior */
}
}
/* Media query para resoluções maiores que 992px */
@media (min-width: 992px) {
.btn-secoes {
font-size: 1.3rem; /* Aumenta o tamanho da fonte */
padding: 0.55rem 1rem; /* Aumenta o padding para tornar o botão maior */
}
}
/* Media query para resoluções maiores que 1920px */
@media (min-width: 1200px) {
.btn-secoes {
font-size: 1.4rem; /* Aumenta o tamanho da fonte */
padding: 0.65rem 1.2rem; /* Aumenta o padding para tornar o botão maior */
}
}
/* Media query para resoluções maiores que 1920px */
@media (min-width: 1400px) {
.btn-secoes {
font-size: 1.5rem; /* Aumenta o tamanho da fonte */
padding: 0.75rem 1.5rem; /* Aumenta o padding para tornar o botão maior */
}
}
/* Media query para resoluções maiores que 1920px */
@media (min-width: 1700px) {
.btn-secoes {
font-size: 1.6rem; /* Aumenta o tamanho da fonte */
padding: 0.75rem 1.5rem; /* Aumenta o padding para tornar o botão maior */
}
}
/* Media query para resoluções maiores que 1920px */
@media (min-width: 1920px) {
.btn-secoes {
font-size: 1.7rem; /* Aumenta o tamanho da fonte */
padding: 1rem 2rem; /* Aumenta o padding para tornar o botão maior */
}
}
/* Media query para resoluções maiores que 2200px */
@media (min-width: 2200px) {
.btn-secoes {
font-size: 1.8rem; /* Ainda maior */
padding: 1.25rem 2.5rem; /* Aumenta ainda mais o padding */
}
}
/* Media query para resoluções maiores que 2500px */
@media (min-width: 2500px) {
.btn-secoes {
font-size: 2.1rem; /* Aumenta mais a fonte */
padding: 1.5rem 3rem; /* Aumenta o padding proporcionalmente */
}
}
/* Fim dos Botões de Ação das Seções *//* Fim dos Botões de Ação das Seções */
/* Fim dos Botões de Ação das Seções *//* Fim dos Botões de Ação das Seções */
/************** PRODUTOS **************/
/************** PRODUTOS **************/
/************** PRODUTOS **************/
/* Estilos para o Button Group dos Produtos (Para Você/Para Empresas */
.produtos .btn-group .btn {
color: white;
border: 1px solid black;
border-radius: 5px;
}
.produtos .btn-group .btn:hover {
background-color: #FF4400;
color: white;
}
.produtos .btn-group .active {
border: 2px solid #000000;
color: white;
background-color: #FF4400;
}
.produtos .btn-group .active:hover {
border: 2px solid #000000;
}
/* Estilos para os Cards */
.produtos .card {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil para dar profundidade */
}
.produtos .card:hover {
border-color: #00D9FF;
}
.produtos .card .btn {
background-color: #00D9FF;
color: white;
}
.produtos .card .btn:hover {
background-color: #FF4400;
}
/************** SERVE PARA VOCÊ **************//************** SERVE PARA VOCÊ **************//************** SERVE PARA VOCÊ **************/
/************** SERVE PARA VOCÊ **************//************** SERVE PARA VOCÊ **************//************** SERVE PARA VOCÊ **************/
/************** SERVE PARA VOCÊ **************//************** SERVE PARA VOCÊ **************//************** SERVE PARA VOCÊ **************/
/************** SERVE PARA VOCÊ **************//************** SERVE PARA VOCÊ **************//************** SERVE PARA VOCÊ **************/
/************** SERVE PARA VOCÊ **************//************** SERVE PARA VOCÊ **************//************** SERVE PARA VOCÊ **************/
/************** SERVE PARA VOCÊ **************//************** SERVE PARA VOCÊ **************//************** SERVE PARA VOCÊ **************/
/************** SERVE PARA VOCÊ **************//************** SERVE PARA VOCÊ **************//************** SERVE PARA VOCÊ **************/
/************** SERVE PARA VOCÊ **************//************** SERVE PARA VOCÊ **************//************** SERVE PARA VOCÊ **************/
/************** SERVE PARA VOCÊ **************//************** SERVE PARA VOCÊ **************//************** SERVE PARA VOCÊ **************/
/************** SERVE PARA VOCÊ **************//************** SERVE PARA VOCÊ **************//************** SERVE PARA VOCÊ **************/
/* Ocultar o span inicialmente */
.oculta {
display: none;
}
/* Cards */
.serve-para-voce .card {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil para dar profundidade */
width: 100%;
cursor: pointer;
}
.icones-segmentos,
.icones-segmentos path,
.icones-segmentos polygon,
.icones-segmentos line,
.icones-segmentos rect {
fill: #FFFFFF;
stroke: #FFFFFF;
text-align:center;
width: 60px;
height: 60px;
}
/* Header (Ãcones à esquerda) */
.serve-para-voce .header {
background-image: linear-gradient(rgba(0, 217, 255, 1), rgba(0, 217, 255, 1));
flex: 0 0 20%; /* fixa a largura em 10%, e não permite que a div cresça ou encolha */
width: 20%;
}
.serve-para-voce .card:hover .header {
background-image: linear-gradient(rgba(0, 217, 255, 0.8), rgba(0, 217, 255, 1));
}
.serve-para-voce .texto2 {
flex: 0 0 80%; /* fixa a largura em 90%, e não permite que a div cresça ou encolha */
width: 80%;
}
/* Fontes */
.serve-para-voce .titulo{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 600;
font-size: 1.5rem;
}
.serve-para-voce .sub-titulo {
color:rgb(145, 145, 145);
font-weight: 700;
}
.serve-para-voce .sub-texto {
font-weight: 600;
color: #d3d3d3;
}
.serve-para-voce .texto {
font-weight: 400;
color: #000;
}
.serve-para-voce strong {
color: #595959;
font-weight:600;
}
.serve-para-voce .ver-mais-coberturas {
color:rgb(145, 145, 145);
text-decoration: none;
cursor: pointer;
font-size: 0.85rem;
}
.serve-para-voce .ver-mais-coberturas:hover {
color:#FF4400;
text-decoration: underline;
}
/* Media Queries */
@media (min-width: 1200px) {
.serve-para-voce .titulo{
font-size: 1.7rem;
}
.serve-para-voce .sub-titulo {
font-size: 1rem;
font-weight: 600;
}
.serve-para-voce .sub-texto {
font-size: 0.85rem;
font-weight: 600;
color: #d3d3d3;
}
.serve-para-voce .texto {
font-size: 1rem;
font-weight: 400;
color: #000;
line-height: 1.7rem;
}
.serve-para-voce .ver-mais-coberturas {
font-size: 0.90rem;
}
}
@media (min-width: 1400px) {
.serve-para-voce .titulo{
font-size: 1.7rem;
}
.serve-para-voce .sub-titulo {
font-size: 1rem;
font-weight: 600;
}
.serve-para-voce .sub-texto {
font-size: 0.85rem;
font-weight: 600;
color: #d3d3d3;
}
.serve-para-voce .texto {
font-size: 1rem;
font-weight: 400;
color: #000;
line-height: 1.7rem;
}
.serve-para-voce .ver-mais-coberturas {
font-size: 0.90rem;
}
}
@media (min-width: 1700px) {
.serve-para-voce .titulo{
font-size: 1.8rem;
}
.serve-para-voce .sub-titulo {
font-size: 1rem;
font-weight: 600;
}
.serve-para-voce .sub-texto {
font-size: 0.85rem;
font-weight: 600;
color: #d3d3d3;
}
.serve-para-voce .texto {
font-size: 1rem;
font-weight: 400;
color: #000;
line-height: 1.7rem;
}
.serve-para-voce .ver-mais-coberturas {
font-size: 0.90rem;
}
}
@media (min-width: 1920px) {
.serve-para-voce .titulo{
font-size: 1.9rem;
}
.serve-para-voce .sub-titulo {
font-size: 1.05rem;
font-weight: 600;
}
.serve-para-voce .sub-texto {
font-size: 0.9rem;
font-weight: 600;
color: #d3d3d3;
}
.serve-para-voce .texto {
font-size: 1rem;
font-weight: 400;
color: #000;
line-height: 1.7rem;
}
.serve-para-voce .ver-mais-coberturas {
font-size: 0.95rem;
}
}
@media (min-width: 2200px) {
.serve-para-voce .titulo{
font-size: 2.5rem;
}
.serve-para-voce .sub-titulo {
font-size: 1.5rem;
}
.serve-para-voce .ver-mais-coberturas {
font-size: 1.3rem;
}
}
/* Lista de Sub-Opções */
.serve-para-voce ul {
display: flex;
flex-direction: row;
gap: 10px; /* Espaçamento entre os itens */
list-style: none; /* Remove marcadores de lista */
padding-left: 0; /* Remove o padding esquerdo padrão da lista */
}
.serve-para-voce ul li {
white-space: nowrap; /* Impede que o texto dentro de <li> quebre para a próxima linha */
}
/* Quadradinho antes de cada subopção */
.serve-para-voce .card .pre {
width: 1.3rem;
fill: #00ffd5;
stroke-linecap: round;
stroke-linejoin: round;
margin-right: 0.4rem;
}
.serve-para-voce .card:hover .pre {
fill: #00ffd5;
stroke-width: 1;
stroke: #00d9ff;
}
.serve-para-voce .card.active .pre {
fill: #00ffd5;
stroke-width: 1;
stroke: #00d9ff;
}
.serve-para-voce .card.active {
border: 2px solid #00D9FF;
}
/* Botões de Ação Internos ao Serve pra Você */
.btn-reduzido {
font-size: 1.2rem; /* Aumenta o tamanho da fonte */
padding: 0.55rem 1rem; /* Aumenta o padding para tornar o botão maior */
margin-top: 0rem;
margin-left: 0rem;
background-color: #FF4400;
color: white;
}
.btn-reduzido:hover {
background-color: #00ffd5;
color: #000;
}
/* Media query para resoluções maiores que 768px */
@media (min-width: 576px) {
.btn-reduzido {
font-size: 1.1rem; /* Aumenta o tamanho da fonte */
padding: 0.60rem 1.1rem; /* Aumenta o padding para tornar o botão maior */
}
}
/* Media query para resoluções maiores que 768px */
@media (min-width: 768px) {
.btn-reduzido {
font-size: 1.1rem; /* Aumenta o tamanho da fonte */
padding: 0.65rem 1.1rem; /* Aumenta o padding para tornar o botão maior */
}
}
/* Media query para resoluções maiores que 992px */
@media (min-width: 992px) {
.btn-reduzido {
font-size: 1.1rem; /* Aumenta o tamanho da fonte */
padding: 0.55rem 1rem; /* Aumenta o padding para tornar o botão maior */
}
}
/* Media query para resoluções maiores que 1920px */
@media (min-width: 1400px) {
.btn-reduzido {
font-size: 1.2rem; /* Aumenta o tamanho da fonte */
padding: 0.65rem 1.2rem; /* Aumenta o padding para tornar o botão maior */
}
}
/* Media query para resoluções maiores que 1920px */
@media (min-width: 1700px) {
.btn-reduzido {
font-size: 1.3rem; /* Aumenta o tamanho da fonte */
padding: 0.75rem 1.5rem; /* Aumenta o padding para tornar o botão maior */
}
}
/* Media query para resoluções maiores que 1920px */
@media (min-width: 1920px) {
.btn-reduzido {
font-size: 1.3rem; /* Aumenta o tamanho da fonte */
padding: 0.75rem 1.5rem; /* Aumenta o padding para tornar o botão maior */
}
}
/* Media query para resoluções maiores que 1920px */
@media (min-width: 2500px) {
.btn-reduzido {
font-size: 1.5rem; /* Aumenta o tamanho da fonte */
padding: 1rem 2rem; /* Aumenta o padding para tornar o botão maior */
}
}
/* Fim dos Botões de Ação Internos ao Serve pra Você */
/* Fim dos Botões de Ação Internos ao Serve pra Você */
/* Testemunhos *//* Testemunhos *//* Testemunhos *//* Testemunhos *//* Testemunhos */
/* Testemunhos *//* Testemunhos *//* Testemunhos *//* Testemunhos *//* Testemunhos */
/* Testemunhos *//* Testemunhos *//* Testemunhos *//* Testemunhos *//* Testemunhos */
/* Testemunhos *//* Testemunhos *//* Testemunhos *//* Testemunhos *//* Testemunhos */
/* Testemunhos *//* Testemunhos *//* Testemunhos *//* Testemunhos *//* Testemunhos */
/* Testemunhos *//* Testemunhos *//* Testemunhos *//* Testemunhos *//* Testemunhos */
.grid-tiles {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(9, 1fr);
gap: 5px;
width: 100%;
transition: min-height 0.250s ease-in-out; /* Ajusta a duração e o easing conforme necessário */
}
/* Atribuições de Espaço para Cada Tile e Configuração de suas Imagens*/
#tile1 {
grid-area: 1 / 1 / 4 / 4; /* Ocupa os espaços 1 e 2 */
background-image: url('/img/testemunhos/neiva-2.jpg');
background-position: 40% 30%;
}
#tile2 {
grid-area: 1 / 4 / 3 / 7; /* Ocupa os espaços 3 e 6 */
background-image: url('/img/testemunhos/assist24h-3.jpg');
background-position: 50% 80%;
}
#tile3 {
grid-area: 3 / 4 / 6 / 7; /* Ocupa o espaço 4 */
background-image: url('/img/testemunhos/japa-biblio-3.jpg');
background-position: 50% 30%;
}
#tile4 {
grid-area: 4 / 1 / 6 / 4; /* Ocupa os espaços 7, 8 e 9 */
border: 4px solid #00d9ff;
background-color: #FFF;
}
#tile5 {
grid-area: 6 / 1 / 10 / 4; /* Ocupa os espaços 7, 8 e 9 */
background-image: url('/img/testemunhos/tile-7.jpg');
background-position: 50% 40%;
}
#tile6 {
grid-area: 6 / 4 / 10 / 7; /* Ocupa os espaços 7, 8 e 9 */
background-image: url('/img/testemunhos/handshake.jpg');
background-position: 30% 70%;
}
.tiles {
border: 1px solid rgb(163,186,198);
border-radius: 6px;
background-size: cover;
background-color: #FF440088;
background-position: 50% 50%;
background-repeat: no-repeat;
padding: 20px;
transition: opacity 0.5s ease, transform 0.5s ease;
display: flex;
cursor: pointer;
}
.tile-expanded {
/* Exemplo para aumentar a visibilidade durante a transição */
opacity: 1; /* Garante que o tile expandido seja totalmente opaco */
}
.tile-contracted {
/* Reduz a visibilidade para criar uma transição suave */
opacity: 0;
pointer-events: none; /* Evita interação enquanto está em transição */
}
/* FONTS *//* FONTS *//* FONTS *//* FONTS *//* FONTS */
.tiles .title {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 600;
font-size: 1.4rem;
color: #FFF;
text-shadow: 4px 4px 8px rgba(0, 0, 0, 1);
}
.tiles .nome {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 600;
font-size: 1rem;
color: #FFF;
text-shadow: 4px 4px 8px rgba(0, 0, 0, 1);
}
.tiles .avaliacao {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 600;
font-size: 1rem;
color: #6b6b6b;
}
.tiles .estrelas {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 600;
font-size: 3rem;
color: #00ffd5;
}
.tiles .nota {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 600;
font-size: 4.3rem;
color: #3a3a3a;
}
.tiles .estrelas2 {
font-size: 4rem;
color: #00ffd5;
}
.tiles .nota2 {
font-size: 5rem;
font-weight: 500;
margin-right: 20px;
line-height: 1;
}
.tiles .avaliacao2 {
font-size: 1.2rem;
}
.tiles .card-testemunho {
background-color:rgba(0, 0, 0, 0.1);
border: 2px solid white;
border-radius: 5px;
padding: 5px 20px;
width:100%;
}
.nome-xp {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 700;
font-size: 1.8rem;
color: #FFF;
text-shadow: 6px 6px 12px rgba(0, 0, 0, 1);
}
.stars-xp {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 500;
font-size: 1.2rem;
color: #FFF;
text-shadow: 6px 6px 12px rgba(0, 0, 0, 1);
}
.disclaimer {
font-size: 0.6rem;
color: #FFF;
}
.card-testemunho .title {
font-size: 1.7rem;
}
.avaliacoes-texto {
font-size: 1.6rem;
font-weight: 500;
}
.avaliacoes-estrelas {
font-size: 2rem;
color: #00ffd5;
}
.testemunho-avaliacao {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.separador-avaliacoes {
height: 2px;
background-color: #e4e4e4;
width: 50%;
border-radius: 3px;
margin: 15px 0;
}
.separador-avaliacoes1 {
background-color: #00ffd58f;
}
.tiles .card-testemunho-zap {
background-color:rgba(0, 0, 0, 0.25);
border: 3px solid white;
border-radius: 5px;
padding: 5px;
width: 100%;
}
.tiles .info {
color:#b7b7b7;
margin: 0px 10px;
}
.icon-user-circle {
width: 30px;
height: 30px;
}
/* Responsividade Fontes *//* Responsividade Fontes *//* Responsividade Fontes */
/* Responsividade Fontes *//* Responsividade Fontes *//* Responsividade Fontes */
@media (max-width: 1920px) {
.tiles .title {
font-size: 1.3rem;
}
.tiles .nome {
font-size: 0.9rem;
}
.tiles .nota {
font-size: 3.7rem;
}
.tiles .estrelas {
font-size: 2.3rem;
}
.tiles .avaliacao {
font-size: 0.9rem;
}
.tiles .estrelas2 {
font-size: 4rem;
}
.tiles .nota2 {
font-size: 5rem;
font-weight: 500;
margin-right: 10px !important;
}
.tiles .avaliacao2 {
font-size: 1.2rem;
}
.testemunho-avaliacao {
flex-direction: row;
}
}
@media (max-width: 1700px) {
.tiles .title {
font-size: 1.3rem;
}
.tiles .nome {
font-size: 0.8rem;
}
.tiles .nota {
font-size: 3.6rem;
}
.tiles .estrelas {
font-size: 2.2rem;
}
.tiles .avaliacao {
font-size: 0.8rem;
}
.tiles .estrelas2 {
font-size: 4rem;
}
.tiles .nota2 {
font-size: 5rem;
font-weight: 500;
margin-right: 10px !important;
}
.tiles .avaliacao2 {
font-size: 1.2rem;
}
.testemunho-avaliacao {
flex-direction: row;
}
}
@media (max-width: 1400px) {
.tiles .title {
font-size: 1.2rem;
}
.tiles .nome {
font-size: 0.8rem;
}
.tiles .nota {
font-size: 4rem;
}
.tiles .estrelas {
font-size: 2.2rem;
}
.tiles .avaliacao {
font-size: 1rem;
}
.tiles .estrelas2 {
font-size: 3.1rem !important;
}
.tiles .nota2 {
font-size: 5rem;
font-weight: 500;
margin-right: 10px !important;
}
.tiles .avaliacao2 {
font-size: 1.2rem;
}
.avaliacoes-texto {
font-size: 1.4rem;
}
.avaliacoes-estrelas {
font-size: 1.7rem;
}
.separador-avaliacoes {
margin: 10px 0 !important;
}
.testemunho-position {
margin-top: auto;
justify-content: center !important;
align-items: end !important;
}
#testemunho-leonardo {
margin-top: auto;
justify-content: center !important;
align-items: end !important;
}
#testemunho-carlos {
margin-top: auto;
justify-content: center !important;
align-items: end !important;
}
#testemunho-joel {
margin-bottom: auto;
margin-top: auto;
}
#testemunho-daniela {
margin-top: auto;
justify-content: center !important;
align-items: end !important;
}
.testemunho-avaliacao {
flex-direction: row;
}
.tiles .card-testemunho {
width:80%;
}
.tiles .card-testemunho-zap {
width:80%;
}
}
@media (max-width: 1300px) {
.tiles .title {
font-size: 1.2rem;
}
.tiles .nome {
font-size: 0.7rem;
}
.tiles .nota {
font-size: 3.8rem;
}
.tiles .nome-xp {
font-size: 1.2rem;
}
.tiles .estrelas {
font-size: 2.5rem;
}
.tiles .avaliacao {
font-size: 0.7rem;
}
.tiles .estrelas2 {
font-size: 2.6rem !important;
}
.tiles .nota2 {
font-size: 3.7rem !important;
font-weight: 500;
margin-right: 10px !important;
}
.avaliacoes-texto {
font-size: 1.2rem;
}
.tiles .avaliacao2 {
font-size: 0.8rem;
}
.testemunho-avaliacao {
flex-direction: row;
}
.separador-avaliacoes {
margin: 10px 0;
}
.tiles .card-testemunho {
width:80%;
}
.tiles .card-testemunho-zap {
width:80%;
}
}
@media (max-width: 1100px) {
.tiles .title {
font-size: 1rem;
}
.tiles .nome {
font-size: 0.8rem;
}
.tiles .nota {
font-size: 3.2rem;
}
.tiles .nome-xp {
font-size: 1.2rem;
}
.tiles .icon-user-circle {
width: 25px;
height: 25px;
}
.tiles .estrelas {
font-size: 2rem;
}
.tiles .avaliacao {
font-size: 0.7rem;
}
.tiles .estrelas2 {
font-size: 2.3rem !important;
}
.tiles .nota2 {
font-size: 4rem !important;
font-weight: 500;
margin-right: 10px !important;
}
.avaliacoes-texto {
font-size: 1rem;
}
.tiles .avaliacao2 {
font-size: 0.8rem;
}
.avaliacoes-estrelas {
font-size: 1.1rem;
}
.testemunho-avaliacao {
flex-direction: row !important;
}
.separador-avaliacoes {
margin: 10px 0 !important;
}
.separador-avaliacoes1 {
margin: 15px 0 !important;
}
.tiles .card-testemunho {
width:60%;
}
.tiles .card-testemunho-zap {
width:60%;
}
}
.testemunho-avaliacao {
flex-direction: row;
}
@media (max-width: 992px) {
.tiles .title {
font-size: 1.1rem;
}
.tiles .nome {
font-size: 0.8rem;
}
.tiles .nota {
font-size: 3.7rem;
}
.tiles .estrelas {
font-size: 2rem;
}
.tiles .avaliacao {
font-size: 0.8rem;
}
.tiles .estrelas2 {
font-size: 2.6rem !important;
}
.tiles .nota2 {
font-size: 4.3rem !important;
margin-right: 0px !important;
}
.avaliacoes-texto {
font-size: 1.7rem;
}
.tiles .avaliacao2 {
font-size: 1.2rem;
}
.avaliacoes-estrelas {
font-size: 2rem;
}
.testemunho-avaliacao {
flex-direction: column !important;
}
.separador-avaliacoes {
margin: 15px 0 !important;
}
.tiles .card-testemunho {
width:95%;
}
.tiles .card-testemunho-zap {
width:95%;
}
}
@media (max-width: 768px) {
.tiles .title {
font-size: 1.4rem;
}
.tiles .nome {
font-size: 0.8rem;
}
.tiles .nota {
font-size: 4.5rem;
}
.tiles .estrelas {
font-size: 2.5rem;
}
.tiles .avaliacao {
font-size: 0.8rem;
}
.tiles .estrelas2 {
font-size: 2.2rem !important;
}
.tiles .nota2 {
font-size: 3.7rem !important;
}
.avaliacoes-texto {
font-size: 1.3rem;
}
.tiles .avaliacao2 {
font-size: 1rem;
}
.avaliacoes-estrelas {
font-size: 1.7rem;
}
.testemunho-avaliacao {
flex-direction: column !important;
}
.separador-avaliacoes {
margin: 10px 0 !important;
}
.testemunho-avaliacao {
flex-direction: column;
}
}
@media (max-width: 576px) {
.tiles .title {
font-size: 1.1rem;
}
.tiles .nome {
font-size: 0.9rem;
}
.tiles .nota {
font-size: 4.3rem;
}
.tiles .estrelas {
font-size: 2.1rem;
}
.testemunho-avaliacao {
flex-direction: column;
}
.tiles .estrelas2 {
font-size: 2rem !important;
}
.tiles .nota2 {
font-size: 3rem !important;
}
.avaliacoes-texto {
font-size: 1rem;
}
.tiles .avaliacao2 {
font-size: 0.75rem;
}
.avaliacoes-estrelas {
font-size: 1.2rem;
}
.testemunho-avaliacao {
flex-direction: column !important;
}
.separador-avaliacoes {
margin: 5px 0 !important;
}
.testemunho-avaliacao {
flex-direction: column;
}
.avaliacoes-texto-grande {
max-width: 70%;
}
.separador-avaliacoes1 {
margin: 15px 0 !important;
}
}
@media (max-width: 500px) {
.nome-xp {
font-size: 0.9rem;
}
.tiles .title {
font-size: 1.1rem;
}
.tiles .nome {
font-size: 0.9rem;
}
.tiles .nota {
font-size: 4rem;
}
.tiles .estrelas {
font-size: 1.9rem;
}
.testemunho-avaliacao {
flex-direction: column;
}
.tiles .estrelas2 {
font-size: 1.3rem !important;
}
.tiles .nota2 {
font-size: 2rem !important;
}
.avaliacoes-texto {
font-size: 1rem;
}
.tiles .avaliacao2 {
font-size: 0.75rem;
}
.avaliacoes-estrelas {
font-size: 1rem;
}
.testemunho-avaliacao {
flex-direction: column !important;
}
.separador-avaliacoes {
margin: 2px 0 !important;
}
.testemunho-avaliacao {
flex-direction: column;
}
.avaliacoes-texto-grande {
max-width: 70%;
}
.separador-avaliacoes1 {
margin: 5px 0 !important;
}
}
@media (max-width: 450px) {
.nome-xp {
font-size: 1rem;
}
.tiles .title {
font-size: 0.85rem;
}
.tiles .nome {
font-size: 0.7rem;
}
.tiles .nota {
font-size: 4rem;
}
.tiles .estrelas {
font-size: 2.1rem;
}
.testemunho-avaliacao {
flex-direction: column;
}
.tiles .estrelas2 {
font-size: 2rem !important;
}
.tiles .nota2 {
font-size: 3.5rem !important;
}
.avaliacoes-texto {
font-size: 1.2rem;
}
.tiles .avaliacao2 {
font-size: 0.8rem;
}
.avaliacoes-estrelas {
font-size: 1.2rem;
}
.testemunho-avaliacao {
flex-direction: column !important;
}
.separador-avaliacoes {
margin: 7px 0 !important;
}
.testemunho-avaliacao {
flex-direction: column;
}
.avaliacoes-texto-grande {
max-width: 70%;
}
.separador-avaliacoes1 {
margin: 10px 0 !important;
}
}
@media (max-width: 415px) {
.tiles .title {
font-size: 0.9rem;
}
.tiles .nome {
font-size: 0.8rem;
}
.tiles .nota {
font-size: 4rem;
}
.tiles .estrelas {
font-size: 1.8rem;
}
.tiles .avaliacao {
font-size: 0.8rem;
}
.nome-xp {
font-size: 1.3rem;
}
.testemunho-avaliacao {
flex-direction: column;
}
.tiles .estrelas2 {
font-size: 1.7rem !important;
}
.tiles .nota2 {
font-size: 3.2rem !important;
}
.avaliacoes-texto {
font-size: 1.1rem;
}
.tiles .avaliacao2 {
font-size: 0.8rem;
}
.avaliacoes-estrelas {
font-size: 1.2rem;
}
.testemunho-avaliacao {
flex-direction: column !important;
}
.separador-avaliacoes {
margin: 4px 0 !important;
}
.testemunho-avaliacao {
flex-direction: column;
}
.avaliacoes-texto-grande {
max-width: 70%;
}
.separador-avaliacoes1 {
margin: 7px 0 !important;
}
}
@media (max-width: 375px) {
.tiles .title {
font-size: 0.9rem;
}
.tiles .nome {
font-size: 0.8rem;
}
.tiles .nota {
font-size: 4rem;
}
.tiles .estrelas {
font-size: 1.8rem;
}
.tiles .avaliacao {
font-size: 0.8rem;
}
.nome-xp {
font-size: 1.3rem;
}
.testemunho-avaliacao {
flex-direction: column;
}
.tiles .estrelas2 {
font-size: 1.7rem !important;
line-height: 1.3;
}
.tiles .nota2 {
font-size: 2.5rem !important;
}
.avaliacoes-texto {
font-size: 0.9rem;
}
.tiles .avaliacao2 {
font-size: 0.65rem;
}
.avaliacoes-estrelas {
font-size: 0.9rem;
}
.testemunho-avaliacao {
flex-direction: column !important;
}
.separador-avaliacoes {
margin: 3px 0 !important;
}
.testemunho-avaliacao {
flex-direction: column;
}
.avaliacoes-texto-grande {
max-width: 70%;
}
.separador-avaliacoes1 {
margin: 5px 0 !important;
}
}
@media (max-width: 340px) {
.tiles .title {
font-size: 0.8rem;
}
.tiles .nome {
font-size: 0.6rem;
}
.tiles .nota {
font-size: 3.7rem;
}
.tiles .estrelas {
font-size: 1.5rem;
}
.tiles .avaliacao {
font-size: 0.6rem;
}
.nome-xp {
font-size: 1.2rem;
}
.testemunho-avaliacao {
flex-direction: column;
}
}
@media (max-width: 300px) {
.tiles .title {
font-size: 0.8rem;
}
.tiles .nome {
font-size: 0.6rem;
}
.tiles .nota {
font-size: 3.5rem;
}
.tiles .estrelas {
font-size: 1rem;
}
.tiles .avaliacao {
font-size: 0.4rem;
}
.testemunho-avaliacao {
flex-direction: column;
}
}
/* Responsividade Grid *//* Responsividade Grid *//* Responsividade Grid */
/* Responsividade Grid *//* Responsividade Grid *//* Responsividade Grid */
/* Tablets */
/* Reduz o GAP e a Altura dos dois Últimos Tiles */
@media (max-width: 992px) {
.grid-tiles {
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(8, 1fr);
gap: 10px;
}
#tile5 {
grid-area: 6 / 1 / 9 / 4;
}
#tile6 {
grid-area: 6 / 4 / 9 / 7;
}
}
/* Smartphones */
@media (max-width: 768px) {
.grid-tiles {
grid-template-columns: 1fr;
grid-template-rows: repeat(6, 1fr);
gap: 10px; /* Espaçamento reduzido para telas menores */
}
/* Todos os tiles ocupam a largura total e são dispostos um sobre o outro */
#tile1, #tile2, #tile3, #tile4, #tile5, #tile6 {
grid-column: 1;
grid-row: auto; /* Deixa o posicionamento de linhas automático */
}
/* Ajustando a ordem dos tiles e a posição das imagens */
#tile1 { order: 2; background-position: 50% 20%;} /* Tile com a Avaliação Média Primeiro) */
#tile2 { order: 3; background-position: 50% 10%;}
#tile3 { order: 5; }
#tile4 { order: 1; }
#tile5 { order: 4; }
#tile6 { order: 6; background-position: 50% 80%;}
}
/* Responsividade Posição Testemunho Tile Expandido */
/* Responsividade Posição Testemunho Tile Expandido */
/* Responsividade Posição Testemunho Tile Expandido */
/************** COBERTURAS **************//************** COBERTURAS **************/
/************** COBERTURAS **************//************** COBERTURAS **************/
/************** COBERTURAS **************//************** COBERTURAS **************/
/************** COBERTURAS **************//************** COBERTURAS **************/
/************** COBERTURAS **************//************** COBERTURAS **************/
/************** COBERTURAS **************//************** COBERTURAS **************/
#coberturas .owl-theme .owl-dots {
position: relative;
top: 25px; /* Ajuste este valor conforme necessário para mover para cima */
left: 50%;
transform: translateX(-50%);
}
#coberturas .owl-theme .owl-nav {
/* position: relative;
bottom: -17px;
left: 50%;
transform: translateX(-50%);
width: 100%;*/
display: none;
}
/* Owl Dots (tamanho das bolinhas de navegação) */
@media (max-width: 767px) {
#coberturas .owl-theme .owl-dots .owl-dot span{
width: 6px !important;
height: 6px !important;
}
}
/*** Cards ***/
/*** É o card todo neste caso ***/
.cards-coberturas,
.cards-beneficios {
cursor: pointer;
border: 2px solid #e4e4e4;
}
.cards-coberturas .card-header,
.cards-beneficios .card-header {
height: 150px;
width: 175px;
}
/*** Ãcones dos Cards ***/
.cards-coberturas .icones-coberturas,
.cards-beneficios .icones-beneficios {
text-align:center;
width: 60px;
height: 60px;
}
/* TÃtulo dos Cards */
.cards-coberturas .card-title,
.cards-beneficios .card-title {
font-size: 1.1rem;
font-weight: 600;
line-height: 1.2;
}
/* TÃtulo dos Cards */
#detalhes-coberturas .titulo,
#detalhes-beneficios .titulo {
font-size: 1.5rem;
font-weight: 600;
}
#detalhes-coberturas .texto,
#detalhes-beneficios .texto {
font-size: 1.2rem;
font-weight: 500;
line-height: 1.7;
}
@media (min-width: 1200px) {
.cards-coberturas .card-header,
.cards-beneficios .card-header {
height: 110px;
width: 140px;
}
/*** Ãcones dos Cards ***/
.cards-coberturas .icones-coberturas,
.cards-beneficios .icones-beneficios {
width: 45px;
height: 45px;
}
/* TÃtulo dos Cards */
.cards-coberturas .card-title,
.cards-beneficios .card-title {
font-size: 0.8rem;
font-weight: 600;
}
/* TÃtulo dos Cards */
#detalhes-coberturas .titulo,
#detalhes-beneficios .titulo {
font-size: 1.6rem;
}
#detalhes-coberturas .texto,
#detalhes-beneficios .texto {
font-size: 0.9rem;
}
}
@media (min-width: 1400px) {
.cards-coberturas .card-header,
.cards-beneficios .card-header {
height: 130px;
width: 150px;
}
/*** Ãcones dos Cards ***/
.cards-coberturas .icones-coberturas,
.cards-beneficios .icones-beneficios {
width: 50px;
height: 50px;
}
/* TÃtulo dos Cards */
.cards-coberturas .card-title,
.cards-beneficios .card-title {
font-size: 0.9rem;
font-weight: 600;
}
/* TÃtulo dos Cards */
#detalhes-coberturas .titulo,
#detalhes-beneficios .titulo {
font-size: 1.7rem;
}
#detalhes-coberturas .texto,
#detalhes-beneficios .texto {
font-size: 1rem;
}
}
@media (min-width: 1700px) {
.cards-coberturas .card-header,
.cards-beneficios .card-header {
height: 140px;
width: 163px;
}
/*** Ãcones dos Cards ***/
.cards-coberturas .icones-coberturas,
.cards-beneficios .icones-beneficios {
width: 55px;
height: 55px;
}
/* TÃtulo dos Cards */
.cards-coberturas .card-title,
.cards-beneficios .card-title {
font-size: 1rem;
font-weight: 600;
}
/* TÃtulo dos Cards */
#detalhes-coberturas .titulo,
#detalhes-beneficios .titulo {
font-size: 1.8rem;
}
#detalhes-coberturas .texto,
#detalhes-beneficios .texto {
font-size: 1.1rem;
}
}
@media (min-width: 1920px) {
.cards-coberturas .card-header,
.cards-beneficios .card-header {
height: 150px;
width: 175px;
}
/*** Ãcones dos Cards ***/
.cards-coberturas .icones-coberturas,
.cards-beneficios .icones-beneficios {
width: 60px;
height: 60px;
}
/* TÃtulo dos Cards */
.cards-coberturas .card-title,
.cards-beneficios .card-title {
font-size: 1.1rem;
font-weight: 600;
}
/* TÃtulo dos Cards */
#detalhes-coberturas .titulo,
#detalhes-beneficios .titulo {
font-size: 1.9rem;
}
#detalhes-coberturas .texto,
#detalhes-beneficios .texto {
font-size: 1.2rem;
}
}
@media (min-width: 2200px) {
.cards-coberturas .card-header,
.cards-beneficios .card-header {
height: 165px;
width: 185px;
}
/*** Ãcones dos Cards ***/
.cards-coberturas .icones-coberturas,
.cards-beneficios .icones-beneficios {
width: 70px;
height: 70px;
}
/* TÃtulo dos Cards */
.cards-coberturas .card-title,
.cards-beneficios .card-title {
font-size: 1.2rem;
font-weight: 600;
}
/* TÃtulo do Detalhamento */
#detalhes-coberturas .titulo,
#detalhes-beneficios .titulo {
font-size: 2.3rem;
}
#detalhes-coberturas .texto,
#detalhes-beneficios .texto {
font-size: 1.5rem;
}
}
.icones-coberturas path,
.icones-coberturas polygon,
.icones-coberturas line,
.icones-coberturas rect {
fill: #00D9FF;
stroke: #00D9FF;
}
.cards-coberturas:hover .icones-coberturas path,
.cards-coberturas:hover .icones-coberturas polygon,
.cards-coberturas:hover .icones-coberturas rect,
.cards-coberturas:hover .icones-coberturas line {
fill: #00ffd5;
stroke: #00ffd5;
}
.cards-coberturas:hover {
border: 2px solid #00d9ff;
}
/*** Ãcones/Figuras do Detalhamento ***/
/************** Para Telas Grandes **************/
.figuras-coberturas,
.figuras-coberturas path,
.figuras-coberturas polygon,
.figuras-coberturas line,
.figuras-coberturas rect {
text-align:center;
width: 200px;
height: 200px;
fill: #00ffd5;
stroke: #00ffd5;
opacity: 0.5;
}
@media (min-width: 1200px) and (max-width: 1400px) {
.figuras-coberturas,
.figuras-coberturas path,
.figuras-coberturas polygon,
.figuras-coberturas line,
.figuras-coberturas rect {
width: 150px;
height: 150px;
}
}
@media (min-width: 2200px) {
.figuras-coberturas,
.figuras-coberturas path,
.figuras-coberturas polygon,
.figuras-coberturas line,
.figuras-coberturas rect {
width: 300px;
height: 300px;
}
}
/************** Para Telas Pequenas **************/
.figuras-coberturas2,
.figuras-coberturas2 path,
.figuras-coberturas2 polygon,
.figuras-coberturas2 line,
.figuras-coberturas2 rect {
text-align:center;
width: 50px;
height: 50px;
fill: #00ffd5;
stroke: #00ffd5;
}
/****** Conheça a Parceria **********/
/****** Ãcones para telas grandes **********/
.figuras-coberturas3g,
.figuras-coberturas3g path,
.figuras-coberturas3g polygon,
.figuras-coberturas3g line,
.figuras-coberturas3g rect {
fill: #00d9ff;
stroke: #00d9ff;
}
/****** Ãcones para telas pequenas **********/
.figuras-coberturas3,
.figuras-coberturas3 path,
.figuras-coberturas3 polygon,
.figuras-coberturas3 line,
.figuras-coberturas3 rect {
text-align:center;
width: 100px;
height: 100px;
fill: #00d9ff;
stroke: #00d9ff;
}
/****** Ãcones para telas grandes **********/
.figuras-coberturas4g,
.figuras-coberturas4g path,
.figuras-coberturas4g polygon,
.figuras-coberturas4g line,
.figuras-coberturas4g rect {
fill: #FFF;
stroke: #EFEFEF;
opacity: 0.9;
}
/****** Ãcones para telas pequenas **********/
.figuras-coberturas4,
.figuras-coberturas4 path,
.figuras-coberturas4 polygon,
.figuras-coberturas4 line,
.figuras-coberturas4 rect {
text-align:center;
width: 100px;
height: 100px;
fill: #FFF;
stroke: #EFEFEF;
opacity: 0.9;
}
/************** BENEFÃCIOS **************/
/************** BENEFÃCIOS **************/
/************** BENEFÃCIOS **************/
/* Owl Carousel */
/* Posicionamento Dots vs Nav */
#beneficios .owl-theme .owl-dots {
position: relative;
top: 25px; /* Ajuste este valor conforme necessário para mover para cima */
left: 50%;
transform: translateX(-50%);
}
#beneficios .owl-theme .owl-nav {
/* position: relative;
bottom: -17px;
left: 50%;
transform: translateX(-50%);
width: 100%;*/
display: none;
}
/* Owl Dots menores para dispositivos com tela menor que 768px */
@media (max-width: 767px) {
#beneficios .owl-theme .owl-dots .owl-dot span{
width: 12px !important;
height: 12px !important;
}
}
.icones-beneficios path,
.icones-beneficios polygon,
.icones-beneficios line,
.icones-beneficios rect {
fill: #00D9FF;
stroke: #00D9FF;
}
.cards-beneficios:hover .icones-beneficios path,
.cards-beneficios:hover .icones-beneficios polygon,
.cards-beneficios:hover .icones-beneficios rect,
.cards-beneficios:hover .icones-beneficios line {
fill: #00ffd5;
stroke: #00ffd5;
}
.cards-beneficios:hover {
border: 2px solid #00d9ff;
}
/*** Ãcones/Figuras do Detalhamento ***/
/************** Para Telas Grandes **************/
.figuras-beneficios,
.figuras-beneficios path,
.figuras-beneficios polygon,
.figuras-beneficios line,
.figuras-beneficios rect {
text-align:center;
width: 200px;
height: 200px;
fill: #00ffd5;
stroke: #00ffd5;
opacity: 0.55;
}
@media (min-width: 1200px) and (max-width: 1400px) {
.figuras-beneficios,
.figuras-beneficios path,
.figuras-beneficios polygon,
.figuras-beneficios line,
.figuras-beneficios rect {
width: 150px;
height: 150px;
}
}
@media (min-width: 2200px) {
.figuras-beneficios,
.figuras-beneficios path,
.figuras-beneficios polygon,
.figuras-beneficios line,
.figuras-beneficios rect {
width: 300px;
height: 300px;
}
}
/************** Para Telas Pequenas **************/
.figuras-beneficios2,
.figuras-beneficios2 path,
.figuras-beneficios2 polygon,
.figuras-beneficios2 line,
.figuras-beneficios2 rect {
text-align:center;
width: 50px;
height: 50px;
fill: #00ffd5;
stroke: #00ffd5;
}
/************** ONLINE E PRESENTE **************//************** ONLINE E PRESENTE **************/
/************** ONLINE E PRESENTE **************//************** ONLINE E PRESENTE **************/
/************** ONLINE E PRESENTE **************//************** ONLINE E PRESENTE **************/
/************** ONLINE E PRESENTE **************//************** ONLINE E PRESENTE **************/
#como-funciona .div-icon {
padding: 0 15px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 992px) {
#como-funciona .sm-hide {
display:none;
}
}
#como-funciona .icons {
height: 3rem;
width: 3rem;
fill: #444;
}
#como-funciona .carde {
border: 1px solid #cecece;
border-radius: 0.5rem;
background-color:#f3f3f3;
margin-bottom: 20px;
}
#como-funciona .flex {
flex: 0 1 auto; /* Isso define que o item pode encolher, mas não necessariamente crescer, mantendo seu tamanho automático baseado em seu conteúdo */
}
#como-funciona .number {
font-size: 3rem;
font-weight: 500;
color: #FFF;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Adiciona sombra: horizontal, vertical, desfoque, cor */
padding: 0 15px;
background-color: #00ffd5;
/*box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
border: 2px solid #b3b3b3;*/
border-radius: 0.5rem;
height: 100%;
min-width: 90px;
display: flex;
align-items: center;
justify-content: center;
}
#como-funciona .number.item-direita {
background-color: #00d9ff;
}
#como-funciona .item-direita {
border-left: 2px solid #b3b3b3;
}
#como-funciona .item-esquerda {
border-right: 2px solid #b3b3b3;
}
#como-funciona .texto {
font-size: 1.2rem;
font-weight: 400;
color: #000;
margin: 15px;
line-height: 2;
}
#como-funciona .carde-container1 {
max-width: 75%;
}
#como-funciona .carde-container2 {
margin-left: auto;
max-width: 75%;
}
#como-funciona #as-is-posvenda .carde-container2 {
margin-right: auto;
margin-left: 10%;
max-width: 95%;
}
#como-funciona .carde-container2 .carde{
background-color: #f3f3f3;
}
#como-funciona .carde-container3 {
margin: 15px auto;
max-width: 80%;
}
#como-funciona .carde3 {
background-color:#f3f3f3;
border: 2px solid #c0c0c0;
box-shadow: 0px 0px 2px 3px rgba(0, 0, 0, 0.1);
margin: 0 auto;
}
#como-funciona .texto3 {
padding: 15px;
line-height: 2;
font-weight: 500;
color: #303030;
font-size: 1.1rem;
}
#como-funciona .div-icon3 {
background-color: #ffa200;
border-radius: 0.5rem;
border: 1px solid #ffbc78;
}
#como-funciona .div-icon6 {
background-color: #8258b3;
border-radius: 0.5rem;
border: 1px solid #8258b3;
}
#como-funciona .div-icon6 .icons {
height: 5rem;
width: 5rem;
fill: #FFF;
}
#como-funciona .carde-container4 {
margin-left: auto;
max-width: 90%;
}
#como-funciona .carde-container4 .carde {
cursor: pointer;
}
#como-funciona .texto4 {
padding: 0px 15px;
margin: 0px;
font-weight: 500;
font-size: 1rem;
color:#3a3a3a;
}
#como-funciona .div-icon4 .icons2 {
height: 1.5rem;
width: 1.5rem;
fill: #FFF;
}
#como-funciona .div-icon4 {
background-color: #c9c9c9;
border-radius: 0.5rem;
}
#como-funciona .carde-container4 .carde:hover .div-icon4 {
background-color: #00d9ff;
}
/* Despachantes */
#como-funciona .div-icon7 {
background-color: #00d9ff;
border-radius: 0.5rem;
}
#como-funciona .carde-container4 .carde:hover .div-icon7 {
background-color: #00ffd5;
}
#como-funciona .carde-container5 .carde:hover .div-icon7 {
background-color: #00ffd5;
}
#como-funciona .div-icon7 .icons2 {
height: 1.5rem;
width: 1.5rem;
fill: #FFF;
}
#como-funciona .carde-container5 {
margin-left: auto;
max-width: 90%;
}
#como-funciona .carde-container5 .carde {
cursor: pointer;
}
#como-funciona .carde-container7 {
margin-right: auto;
max-width: 90%;
}
#como-funciona .carde-container7 .carde {
cursor: pointer;
}
#como-funciona .carde-container7 .carde:hover .div-icon7 {
background-color: #00ffd5;
}
/* FIM DOS DESPACHANTES */
#como-funciona .div-icon5 {
background-color: #c9c9c9;
border-radius: 0.5rem;
}
#como-funciona .carde-container5 .carde:hover .div-icon5 {
background-color: #00d9ff;
}
#como-funciona .div-icon5 .icons2 {
height: 1.5rem;
width: 1.5rem;
fill: #FFF;
}
#como-funciona .texto5 {
padding: 0px 15px;
margin: 0px;
font-weight: 500;
font-size: 1rem;
color:#3a3a3a;
}
#como-funciona .item-esquerda.a1 {
background-color: #00ffd5;
border-radius: 0.5rem;
}
#como-funciona .item-esquerda.a2 {
background-color: #00ffd5;
border-radius: 0.5rem;
}
#como-funciona .item-esquerda.a3 {
background-color: #00ffd5;
border-radius: 0.5rem;
}
#como-funciona .item-esquerda.a4 {
background-color: #00ffd5;
border-radius: 0.5rem;
}
#como-funciona .item-esquerda.a5 {
background-color: #00ffd5;
border-radius: 0.5rem;
}
@media (max-width: 992px) {
#como-funciona .carde-container1 {
max-width: 95%;
}
#como-funciona .carde-container2 {
margin-left: auto;
max-width: 95%;
}
#como-funciona .carde-container3 {
max-width: 100%;
}
#como-funciona .texto {
line-height: 1.5;
}
#como-funciona .texto3 {
line-height: 1.5;
}
#como-funciona #as-is-posvenda .carde-container2 {
margin-left: 10px;
}
}
/************** PERGUNTAS E RESPOSTAS **************//************** PERGUNTAS E RESPOSTAS **************/
/************** PERGUNTAS E RESPOSTAS **************//************** PERGUNTAS E RESPOSTAS **************/
/************** PERGUNTAS E RESPOSTAS **************//************** PERGUNTAS E RESPOSTAS **************/
/************** PERGUNTAS E RESPOSTAS **************//************** PERGUNTAS E RESPOSTAS **************/
/************** PERGUNTAS E RESPOSTAS **************//************** PERGUNTAS E RESPOSTAS **************/
/************** PERGUNTAS E RESPOSTAS **************//************** PERGUNTAS E RESPOSTAS **************/
.custom-badge {
background-color: #00D9FF;
color: white;
width: 24px;
height: 24px;
display: inline-flex; /* Mudança para inline-flex aqui */
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 1rem;
vertical-align: middle; /* Alinhamento vertical para alinhar com o texto ao lado */
}
.badge-plus::before, .badge-minus::before {
content: '+';
transform: translateY(-10%);
display: inline-block;
}
.badge-minus::before {
content: '-';
transform: translateY(-10%);
display: inline-block;
}
#faq {
background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #00D9FF 100%);
}
#faq .card-header {
background-color: #e2f1f1;
}
#faq .resposta {
background-color: #e2f1f178;
}
/* Fontes */
#faq .question {
font-size: 1.2rem;
font-weight: 600;
}
#faq .answer {
font-size: 1rem;
font-weight: 500;
}
@media (min-width: 992px) {
#faq .question {
font-size: 1.5rem;
}
#faq .answer {
font-size: 1.3rem;
}
}
@media (min-width: 2200px) {
#faq .question {
font-size: 2rem;
}
#faq .answer {
font-size: 1.5rem;
}
}
/************* SEGURADORAS ****************/
.img-seguradoras {
height: 120px;
width: auto;
filter: grayscale(100%);
opacity: 0.4;
object-fit: contain;
}
.img-seguradoras:hover {
opacity: 0.5;
filter: grayscale(0%);
}
.owl-seguradoras .owl-carousel .owl-item {
transition: transform 1s ease;
}
/******************* FORMULÃRIO PARCERIA ******************//******************* FORMULÃRIO PARCERIA ******************/
/******************* FORMULÃRIO PARCERIA ******************//******************* FORMULÃRIO PARCERIA ******************/
/******************* FORMULÃRIO PARCERIA ******************//******************* FORMULÃRIO PARCERIA ******************/
/******************* FORMULÃRIO PARCERIA ******************//******************* FORMULÃRIO PARCERIA ******************/
#formParceria {
background-color: #00d9ff;
}
.form-label {
font-weight: 700;
}
#formParceria .texto {
font-size: 1.4rem;
}
/******************* FORMULÃRIOS ******************//******************* FORMULÃRIOS ******************/
/******************* FORMULÃRIOS ******************//******************* FORMULÃRIOS ******************/
/******************* FORMULÃRIOS ******************//******************* FORMULÃRIOS ******************/
/******************* FORMULÃRIOS ******************//******************* FORMULÃRIOS ******************/
/******************* FORMULÃRIOS ******************//******************* FORMULÃRIOS ******************/
.separador-form {
height: 3px; /* Define a altura do separador */
background-color: #81fff0; /* Cor cinza claro */
width: 70%; /* Faz a largura ser ajustável ao contêiner pai */
border-radius: 3px; /* Adiciona bordas arredondadas */
}
.form-borda-interna-branca {
border: 0px;
margin: 0px 0px 0px 0px;
padding: 1% 0px 1% 0px;
}
@media (min-width: 576px) {
.form-borda-interna-branca {
border: 1px solid white;
border-radius: 10px;
}
}
.margem-interna-borda {
margin: 0px;
padding: 0px;
width: 90%;
}
.form-cotacao {
background-color: #00D9FF;
}
.form-input {
background-color: #ff9771;
color: white;
}
.form-obg {
background-color: #ff9771;
color: white;
}
.form-obg-ok {
background-color: #00ffd5;
color: black;
}
.span-cep {
font-size: 0.7rem;
color: white;
text-decoration: none;
}
.spanCNPJ {
font-size: 0.7rem;
color: white;
text-decoration: none;
}
.btn-cep {
background-color: #00D9FF;
color: white;
border: 1px solid white;
}
.btn-cep:hover {
background-color: white;;
color: black;
border: 1px solid white;
}
.a-cep {
font-size: 0.9rem;
color: white;
text-decoration: none;
}
.a-cep:hover {
color: white;
text-decoration: underline;
}
.a-cep:visited {
color: white;
text-decoration: none;
}
.cep-text {
font-size: 0.75rem;
color: white;
}
.btn-form-next {
background-color: black;
color: white;
}
.btn-form-next:hover {
background-color: rgb(213, 252, 241);
background-color: white;
color: black;
}
.btn-form-prev {
background-color: #00D9FF;
color: white;
border: 1px solid white;
}
.btn-form-next:prev {
background-color: rgb(213, 252, 241);
color: black;
}
.btn-form-cotar {
background-color: #ff9771;
color: white;
}
.btn-form-cotar:hover {
background-color: #00ffd5;
color: black;
}
.visibility-hidden {
visibility: hidden;
}
@media (max-width: 767px) {
.form-long-text {
overflow: hidden !important;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* Seleção do Tipo de Cobertura */
.coverage-options {
text-align: center;
}
.coverage-btn {
color: #FFF;
border: 1px solid white;
}
.coverage-btn:hover {
color: #000;
background-color: #fff;
border: 1px solid white;
}
/* Estilos adicionais para o botão ativo */
.coverage-btn.active {
color: #000;
background-color: #fff;
font-weight: 600;
border: 1px solid white;
}
/* Ãcones Coberturas Adicionais */
.icones-cotacao-coberturas,
.icones-cotacao-coberturas path,
.icones-cotacao-coberturas polygon,
.icones-cotacao-coberturas line,
.icones-cotacao-coberturas rect {
fill: black;
stroke: black;
text-align:center;
width: 25px;
height: 25px;
}
/* Barra de Pogresso */
#progressBarContainer {
width: 100%; /* Ocupa a largura total do contêiner pai */
display: flex;
justify-content: center; /* Centraliza o "medidor" */
align-items: center;
}
.progressBarMeter {
width: 40%; /* O "medidor" ocupa 50% da largura do contêiner */
border: 1px solid white; /* Bordas brancas */
background-color: transparent; /* Fundo transparente */
display: flex;
align-items: center; /* Centraliza a barra de progresso verticalmente */
border-radius: 10px; /* Bordas arredondadas para o "medidor" */
}
.progressBar {
height: 15px; /* Altura da barra de progresso */
background-color: white; /* Cor da barra de progresso */
transition: width 0.4s ease; /* Animação suave da largura */
border-radius: 8px; /* Bordas arredondadas para a barra de progresso */
}
.icons-progress-start {
font-size: 1.5rem;
color: #FFF;
}
@keyframes balancoBandeira {
0%, 100% {
transform: rotate(0deg);
}
25% {
transform: rotate(-10deg);
}
50% {
transform: rotate(10deg);
}
75% {
transform: rotate(-10deg);
}
}
.icons-progress-end {
font-size: 1.4rem;
color: #000;
}
.icons-progress-end-end {
font-size: 1.4rem;
color: #000;
display: inline-block;
animation: balancoBandeira 2s infinite linear;
}
/* OLD */
.progress-container {
display: flex;
align-items: center;
}
.progress-circle {
width: 1.3rem;
height: 1.3rem;
font-size: 0.8rem;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
color: #00D9FF;
display: flex;
align-items: center;
justify-content: center;
}
.progress-line {
height: 5px;
width: 50px;
background-color: rgba(255, 255, 255, 0.5);
}
/* Fim do Old */
.form-prog-active {
background-color: white;
color:#000000;
}
.form-prog-done {
background-color: white;
}
.form-icons {
color: rgba(88, 88, 88, 0.6);
}
.form-icons-coberturas-bg {
background-color: #ff4b0a93
}
.form-icons-coberturas,
.form-icons-coberturas path,
.form-icons-coberturas polygon,
.form-icons-coberturas line,
.form-icons-coberturas rect {
fill: white;
stroke: white;
text-align:center;
width: 2.8rem;
height: 2.8rem;
}
.form-title {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 1.1rem;
font-weight: 600;
text-align: center;
}
.coverage-btn {
font-size: 0.9rem;
padding: 0.5rem 0.5rem;
}
/* Media query para resoluções maiores que 768px */
@media (min-width: 375px) {
.form-title {
font-size: 1.2rem;
}
.coverage-btn {
font-size: 1rem;
padding: 0.5rem 0.65rem;
}
}
/* Media query para resoluções maiores que 768px */
@media (min-width: 576px) {
.form-title {
font-size: 1.2rem;
}
.coverage-btn {
font-size: 1rem;
padding: 0.5rem 1.5rem;
}
}
/* Media query para resoluções maiores que 768px */
@media (min-width: 768px) {
.form-title {
font-size: 1.2rem;
}
.coverage-btn {
font-size: 1rem;
padding: 0.5rem 1.5rem;
}
}
/* Media query para resoluções maiores que 992px */
@media (min-width: 992px) {
.form-title {
font-size: 1.2rem;
}
.coverage-btn {
font-size: 1.1rem;
padding: 0.5rem 1.5rem;
}
}
/* Media query para resoluções maiores que 1400px */
@media (min-width: 1400px) {
.form-title {
font-size: 1.2rem;
}
.coverage-btn {
font-size: 1.1rem;
padding: 0.5rem 1.5rem;
}
}
/* Media query para resoluções maiores que 1700px */
@media (min-width: 1700px) {
.form-title {
font-size: 1.3rem;
}
.coverage-btn {
font-size: 1.1rem;
padding: 0.5rem 1.5rem;
}
}
/* Media query para resoluções maiores que 1920px */
@media (min-width: 1920px) {
.form-title {
font-size: 1.3rem;
}
.coverage-btn {
font-size: 1.1rem;
padding: 0.5rem 1.5rem;
}
}
/* Media query para resoluções maiores que 1920px */
@media (min-width: 2500px) {
.form-title {
font-size: 1.4rem;
}
.coverage-btn {
font-size: 1.1rem;
padding: 0.5rem 1.5rem;
}
}
.form-moeda {
color: black;
font-size: 1rem;
font-weight: 500;
}
.form-moeda2 {
background: #000;
color: white;
font-size: 1rem;
font-weight: 500;
border: 0px;
}
.form-coberturas-i {
color: white;
font-size: 1rem;
font-weight: 300;
}
.fundo-fume {
background-color: rgba(0, 0, 0, 0.07);
}
/* Estiliza a barrinha do slider */
.noUi-target {
background: #FFF; /* Cor de fundo da barra */
height: 10px;
border: 1px solid #000; /* Borda da alça */
border-radius: 12px; /* Define o arredondamento das bordas da barra */
z-index: 1;
}
.noUi-handle {
width: 5px; /* Largura da alça menos as bordas */
height: 5px; /* Altura da alça menos as bordas */
border: 1px solid #000; /* Borda da alça */
background: black; /* Cor de fundo da alça */
border-radius: 50%; /* Define o arredondamento das bordas da alça para torná-la circular */
top: 50%; /* posiciona a parte de cima da alça a 50% da altura do seu container */
transform: translateY(-18%);
box-shadow: none !important;
z-index: 2;
}
.noUi-handle:before {
background: transparent; /* Cor de fundo da alça */
content: "$";
position: absolute;
height: 6px;
width: 6px;
left: 12px;
top: 0px;
color: white;
}
#slider-percentual-fipe .noUi-handle:before {
background: transparent; /* Cor de fundo da alça */
content: "%";
position: absolute;
height: 6px;
width: 6px;
left: 10px;
top: 0px;
color: white;
}
.noUi-handle:after {
display:none;
background: transparent; /* Cor de fundo da alça */
}
.cotacao-helper {
background-color: white;
height: 65px;
}
.helper-1-txt {
color: black;
font-size: 1.1rem;
transition: opacity 1s ease-in;
}
/* Texto do Helper para dispositivos com tela menor que 768px */
@media (max-width: 767px) {
.helper-1-txt {
font-size: .9rem;
}
}
/* Ver mais Coberturas */
#toggle-cotacao-coberturas {
font-size: small;
font-weight: 500;
padding: 4px;
cursor: pointer;
color: black;
text-decoration: underline;
}
#toggle-cotacao-coberturas:hover {
color: white;
}
.hr-cotacao {
height: 3px;
color: white;
width: 65%;
}
/* Info Coberturas */
.info-coberturas {
color:white;
font-size: small;
cursor: pointer;
}
/* Menu do Tipo de Coberturas (Zerado, Básico, Completo, Premium...) */
/* Itens do Formulário */
/* Para dispositivos com largura até 767px (como iPhones e dispositivos móveis pequenos) */
@media (max-width: 767px) {
.form-item {
width: 90%;
}
}
/* Para dispositivos com largura acima de 767px (dispositivos maiores) */
@media (min-width: 768px) {
.form-item {
width: 85%;
}
}
/* Para dispositivos com largura acima de 767px (dispositivos maiores) */
@media (min-width: 992px) {
.form-item {
width: 80%;
}
}
@media (min-width: 1400px) {
.form-item {
width: 65%;
}
}
@media (min-width: 1700px) {
.form-item {
width: 60%;
}
}
@media (min-width: 1920px) {
.form-item {
width: 50%;
}
}
@media (min-width: 2200px) {
.form-item {
width: 40%;
}
}
/* Divs dos Dados da FIPE do VeÃculo e da Placa */
@media (max-width: 767px) {
#dadosVeiculoDiv,
#placaVeiculoDiv {
width: 90%;
}
}
/* Para dispositivos com largura acima de 767px (dispositivos maiores) */
@media (min-width: 768px) {
#dadosVeiculoDiv,
#placaVeiculoDiv {
width: 85%;
}
}
/* Para dispositivos com largura acima de 767px (dispositivos maiores) */
@media (min-width: 992px) {
#dadosVeiculoDiv,
#placaVeiculoDiv {
width: 80%;
}
}
@media (min-width: 1200px) {
#dadosVeiculoDiv,
#placaVeiculoDiv {
width: 70%;
}
}
@media (min-width: 1400px) {
#dadosVeiculoDiv,
#placaVeiculoDiv {
width: 60%;
}
}
@media (min-width: 1700px) {
#dadosVeiculoDiv,
#placaVeiculoDiv {
width: 50%;
}
}
@media (min-width: 1920px) {
#dadosVeiculoDiv,
#placaVeiculoDiv {
width: 40%;
}
}
/* Botões Seleção VeÃculo Placa-FIPE */
.fipe-placa_btn {
color: #FFF;
padding: 0;
margin: 5px;
border: 2px solid #FFF;
background-color: transparent;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
border-radius: 5px;
}
.fipe-placa_btn:hover {
color: #FFF;
border: 2px solid #FFF;
cursor: pointer;
}
.fipe-placa_btn:hover .placa-fipe_topo {
background-color: #5f9fff;
}
.ativo {
opacity: 1;
}
.inativo {
opacity: 0.6;
}
.ativo .fipe-placa_btn{
border: 2px solid #FFF;
}
.ativo .placa-fipe_topo {
background-color: #5f9fff;
border: 1px solid #5f5fff;
}
.placa-fipe_modelo {
font-weight: 500;
padding: 2px 15px;
color: #000;
margin: 0 auto;
}
.placa-fipe_anomodelo,
.placa-fipe_combustivel {
font-weight: 500;
margin-left: 10px;
margin-right: 15px;
}
#placa-fipe_titulo {
font-weight: 500;
color: #000;
margin-top: 5px;
}
#container-resultado-placa-fipe {
margin-top: 20px;
margin-bottom: 10px;
}
.placa-fipe_topo {
border-radius: 5px;
background-color: #00ffd5;
}
.placa-fipe_dados {
padding: 0 20px;
}
.placa-fipe_dados1 {
padding: 0 20px;
}
.placa-fipe_dados1.inativo:hover {
opacity: 0.85;
}
#fipe-placa_naoencontrado.inativo:hover {
opacity: 0.85;
}
/* Esta é a div */
#placa-fipe_naoencontrado {
align-items: center;
justify-content: center;
}
/* Este é o Botão */
#fipe-placa_naoencontrado {
color: #000;
padding: 5px 15px;
margin: 5px auto;
border: 2px solid #FFF;
background-color: #FFF;
cursor: pointer;
border-radius: 5px;
font-weight: 500;
}
#fipe-placa_naoencontrado:hover {
border: 2px solid #000;
}
#fipe-placa_naoencontrado.ativo {
border: 2px solid #000;
}
.load-hide {
display: none;
}
#placa-fipe_falha {
max-width: 85%;
display: none;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 15px auto 0 auto;
}
#placa-fipe_falha .text1{
font-weight: 400;
font-size: small;
}
#placa-fipe_falha .text2{
font-weight: 600;
margin-top: 10px;
}
#placa-fipe_falha .text2:hover{
text-decoration: underline;
cursor: pointer;
}
/* Botões de Seleção do Formulário */
.option-button {
color: #FFF;
padding: 7px 13px;
margin: 5px;
border: 1px solid #FFF;
background-color: transparent;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
border-radius: 5px;
}
.option-button:hover {
color: #000;
background-color: #FFF;
}
.option-button.active {
color: #000;
background-color: #FFF;
}
/* Mensagens do Menu de Seleção do Tipo de Cobertura/Assistência (Zerado, Básico, Completo, Premium...) */
.coverage-options-message {
color: white;
font-size: 0.75rem;
margin-top: 3px;
font-weight: 600;
}
/* Torna os botões da Cobertura auto inacessÃveis */
.inacessivel {
pointer-events: none; /* Desativa eventos de mouse */
opacity: 0.5; /* Opção para tornar visualmente óbvio que a div está inacessÃvel */
}
/* Div as Input */
/* Estilização do grupo de input */
.input-group {
position: relative;
margin: 5px;
}
/* Estilização do campo de input */
.styled-input {
color: #000;
background-color: #f7f7f7;
padding: 5px 10px;
margin: 0; /* Remova a margem para alinhar corretamente com os botões */
border: 1px solid #FFF;
cursor: text;
transition: border-color 0.3s, box-shadow 0.3s;
border-radius: 5px;
box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25); /* Sombra para destacar o input */
}
.styled-input::placeholder {
color: #575757;
font-family: Arial, sans-serif;
font-size: 0.9rem;
text-align:center;
}
.styled-input:focus {
background-color: #FFF;
}
/*Tamanhos dos Campos de Input */
.formRCF.styled-input {
width: 6rem;
}
.formCoberturas.styled-input {
width: 6rem;
}
#veiculo_placa {
width: 8rem;
}
#fipe_valorCarro {
width: 7rem;
}
#coberturas_percentual_fipe {
width: 3rem;
}
.formLocalizacao.styled-input {
width: 7rem;
}
#dados_cliente_celular {
width: 9rem;
}
#dados_cliente_email {
width: 12rem;
}
#dados_cliente_cpf_cnpj {
width: 12rem;
}
#dados_cliente_nome {
width: 15rem;
}
#dados_cliente_razao_social {
width: 15rem;
}
#condutor_principal_cpf {
width: 15rem;
}
#condutor_principal_nome {
width: 15rem;
}
#condutor_principal_data_nascimento {
width: 12rem;
}
#tipo_seguro_data_final_apolice {
width: 12rem;
}
@media (max-width: 375px) {
#dados_cliente_email {
width: 10rem;
}
#dados_cliente_cpf_cnpj {
width: 10rem;
}
#dados_cliente_nome {
width: 10rem;
}
#dados_cliente_razao_social {
width: 10rem;
}
#condutor_principal_cpf {
width: 10rem;
}
#condutor_principal_nome {
width: 10rem;
}
#condutor_principal_data_nascimento {
width: 10rem;
}
#tipo_seguro_data_final_apolice {
width: 10rem;
}
}
/* Estilização do campo select */
.styled-select {
position: relative;
color: #000;
background-color: #f7f7f7;
padding: 5px 10px;
padding-right: 30px;
border: 1px solid #FFF;
border-radius: 5px;
width: 100%;
box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25);
-webkit-appearance: none; /* Remove a aparência nativa do select no Chrome e Safari */
-moz-appearance: none; /* Remove a aparência nativa do select no Firefox */
appearance: none; /* Remove a aparência nativa do select */
cursor: pointer;
transition: background-color 0.3s, box-shadow 0.3s;
}
.select-group {
position: relative;
}
/* Estilo para o Ãcone de seta para baixo do select, se necessário */
.select-icon {
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
/* Select2 */
/* Tamanho do Select2 */
.select2-container {
width: 100% !important; /* Ajusta para ocupar 100% da largura do contêiner pai */
max-width: 400px; /* Limita a largura máxima */
}
@media (max-width: 480px) {
.select2-container {
max-width: 380px; /* Limita a largura máxima */
}
}
@media (max-width: 400px) {
.select2-container {
max-width: 200px; /* Limita a largura máxima */
}
}
@media (max-width: 350px) {
.select2-container {
max-width: 150px; /* Limita a largura máxima */
}
}
@media (max-width: 320px) {
.select2-container {
max-width: 100px; /* Limita a largura máxima */
}
}
/* Ajuste a posição do Ãcone do Select2 */
.select2-container--default .select2-selection--single .select2-selection__arrow {
top: 50%;
transform: translateY(-50%);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
color: #575757;
}
/* Ajuste o padding do select para evitar sobreposição de texto */
.select2-container .select2-selection--single {
padding: 4px 15px; /* Aumente se o Ãcone ainda estiver sobrepondo o texto */
border: 1px solid #FFF;
box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25);
height: auto;
font-family: Arial, sans-serif;
font-size: 0.9rem;
}
.select2-dropdown {
z-index: 2;
}
/* Remover o Ãcone padrão do Select2 */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
display: none;
}
/* Triângulo Personalizado */
.select2-container--default .select2-selection--single .select2-selection__arrow:after {
content: 'â–¼'; /* ou o caractere do Ãcone que você deseja usar */
font-size: 12px; /* Ajuste o tamanho conforme necessário */
color: #2d2d2d; /* Ajuste a cor conforme necessário */
pointer-events: none; /* Isso garante que cliques no Ãcone não interfiram com a funcionalidade do Select2 */
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
/* Texto não sei a placa */
.nao-sei-placa {
color: white;
font-size: 1rem;
cursor: pointer;
font-weight: 600;
border: 2px solid #FFF;
border-radius: 12px;
margin-top: 15px;
}
.nao-sei-placa:hover {
color: #000;
background-color: #FFF;
}
.nao-sei-placa.fipe-informar {
max-width: 300px;
padding: 0 10px;
}
/* Esconde itens de telas menores */
@media (max-width: 320px) {
.small-hide {
display: none !important;
}
}
/* Car Card */
.vehicle-details-card {
display: flex;
justify-content: center; /* Centraliza o .card-body horizontalmente */
background-color: #00d9ff;
border: 0px;
}
.vehicle-details-card .card-body {
padding: 10px;
background-color: #000;
}
.vehicle-detail {
display: flex;
justify-content: space-between;
font-size: 0.9rem;
}
.detail-value {
color: #FFF;
font-weight: 500;
}
#form-vehicle-model, #form-vehicle-model2 {
font-weight: 700;
}
#form-vehicle-price, #form-vehicle-price2 {
padding: 0;
}
/* Botão Cidade Circulação/Pernoite */
.circulacao_pernoite {
color: #000;
padding: 7px 13px;
margin: 15px 0 0 0;
border: 2px solid #000;
background-color: transparent;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
border-radius: 5px;
}
/* Tool Tips*/
.info-coberturas .tooltiptext {
visibility: hidden;
font-family: Verdana, Geneva, Tahoma, sans-serif;
line-height: 1.5;
background-color: black;
color: white;
text-align: center;
border-radius: 6px;
padding: 8px;
position: absolute;
z-index: 9;
opacity: 0;
transition: opacity 0.3s;
font-size: larger;
right: 8%;
width: 75%;
transform: translateY(12px); /* Isso move a tooltip 12 pixels para baixo */
}
@media (min-width: 480px) {
.info-coberturas .tooltiptext {
width: 70%;
right: 10%;
}
}
@media (min-width: 768px) {
.info-coberturas .tooltiptext {
width: 70%;
right: 10%;
}
}
@media (min-width: 992px) {
.info-coberturas .tooltiptext {
width: 65%;
right: 15%;
}
}
@media (min-width: 1100px) {
.info-coberturas:hover .tooltiptext {
visibility: visible;
z-index: 999;
opacity: 1;
}
}
@media (min-width: 1200px) {
.info-coberturas .tooltiptext {
width: 40%;
right: 20%;
}
}
@media (min-width: 1700px) {
.info-coberturas .tooltiptext {
width: 30%;
right: 30%;
}
}
.info-coberturas .tooltiptext-clicked {
visibility: visible;
opacity: 1;
z-index: 9;
}
.tooltiptext2 {
color: black !important;
background-color: white !important;
border: 3px solid #00d9ff !important;
border-radius: 5px !important;
text-align: left !important;
font-size: 0.8rem !important;
}
.tooltiptext2 ul {
margin: 5px 0;
}
.tooltiptext2 .destaque {
font-weight: 600;
}
.tooltiptext2 .pergunta {
font-size: 0.7rem;
color: #858585;
}
/* Error Messages do jQuery Validator */
input.campoInvalido, select.campoInvalido, textarea.campoInvalido{
border: 3px solid red;
/* outros estilos */
}
.select2-container.campoInvalido .select2-selection {
border: 3px solid red !important;
}
label.campoInvalido {
color: black;
font-size: 0.9rem;
font-weight: 500;
margin-top: 5px;
text-align: center;
}
/* FORMULÃRIO ENVIADO */
/* Loading */
#renovacao-interna-loading {
position: relative;
}
.loading-overlay {
position: absolute; /* Sobreposição em relação ao parent com position:relative */
top: 0;
left: 0;
right: 0; /* Estende até as bordas direita e esquerda */
bottom: 0; /* Estende até a borda inferior */
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparente */
z-index: 10; /* Garante que fique sobre os outros elementos dentro da div */
display: flex;
justify-content: center; /* Centraliza horizontalmente */
align-items: center; /* Centraliza verticalmente */
color: white; /* Cor do texto/spinner, ajustável conforme seu design */
border-radius: 10px;
}
.loading-icon-end {
font-size: 3rem; /* Tamanho do Ãcone, ajustável conforme necessário */
}
/* Fim do Loading */
#form-enviado {
background-size: cover;
background-position: 50% 50%;
}
#form-enviado .card {
background-color: #81fff0cb;
padding: 10px 20px;
}
#form-enviado .card .obrigado {
color: #000;
font-weight: 700;
font-size: 1.8rem;
text-align: center;
}
#form-enviado .card .mensagem {
color: #000;
font-weight: 500;
font-size: 1.2rem;
text-align: center;
}
#form-enviado .card .mensagem2 {
color: #000;
font-weight: 700;
font-size: 1.2rem;
text-align: center;
}
#form-enviado .card .mensagem3 {
color: #000;
font-weight: 500;
font-size: 0.9rem;
text-align: center;
}
#form-error {
background-color: #00d9ff;
padding: 30px 0;
}
#form-error span {
font-weight: 600;
}
@keyframes moveUpDown {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
#form-error-icon {
width: 75px;
height: 75px;
fill: #FFF;
margin: 15px auto;
animation: moveUpDown 1s ease-in-out infinite;
}
#form-error-sad-icon {
width: 150px;
height: 150px;
fill: #81fff0;
margin: 15px auto;
}
/* Responsividade */
@media (max-width: 500px) {
#form-enviado .card .obrigado {
font-weight: 700;
font-size: 1.2rem;
}
#form-enviado .card .mensagem {
font-weight: 500;
font-size: 0.9rem;
}
#form-enviado .card .mensagem2 {
font-weight: 700;
font-size: 1rem;
}
#form-enviado .card .mensagem3 {
font-size: 0.8rem;
text-align: center;
}
}
@media (max-width: 576px) {
#form-enviado .card .obrigado {
font-weight: 700;
font-size: 1.25rem;
}
#form-enviado .card .mensagem {
font-weight: 500;
font-size: 0.9rem;
}
#form-enviado .card .mensagem2 {
font-weight: 700;
font-size: 1rem;
}
#form-enviado .card .mensagem3 {
font-size: 0.8rem;
text-align: center;
}
}
/******************* CONTATO ******************//******************* CONTATO ******************/
/******************* CONTATO ******************//******************* CONTATO ******************/
/******************* CONTATO ******************//******************* CONTATO ******************/
#contato {
background-color: #00d9ff;
}
#contato .logo {
height: 300px;
width: 300px;
margin-bottom: 20px;
}
#contato ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
#contato li {
margin: 10px;
border-radius: 10px;
background-color: #FFFFFF;
display: flex;
width: 80%;
height: 80px;
align-items: center; /* alinha o conteúdo verticalmente */
justify-content: center;
}
#contato li:hover {
background-color: #d4d4d4;
cursor: pointer;
}
#contato li:hover .zap {
color: #46c461;
}
#contato li:hover .insta {
color: #d400ff;
}
#contato li:hover .home {
color: #00ffd5;
}
#contato li:hover .tel {
color: #c22f2f;
}
#contato .icones {
margin: auto 15px auto 0px;
}
#contato .icones2 {
width: 2.7rem;
margin: auto 15px auto 0px;
}
#contato a {
text-decoration: none;
color: #000;
font-size: 2.5rem;
font-weight: 600;
}
/* Responsividade *//* Responsividade *//* Responsividade */
/* Responsividade *//* Responsividade *//* Responsividade */
@media (max-width: 299px) {
#contato .logo {
height: 150px;
width: 150px;
margin-bottom: 15px;
}
#contato a {
font-size: 0.8rem;
font-weight: 600;
}
#contato .icones {
font-size: 1rem;
font-weight: 600;
}
#contato .icones2 {
width: 1rem;
}
#contato li {
width: 98%;
}
}
@media (min-width: 300px) {
#contato .logo {
height: 200px;
width: 200px;
margin-bottom: 20px;
}
#contato a {
font-size: 1.2rem;
font-weight: 600;
}
#contato .icones {
font-size: 1.2rem;
font-weight: 600;
}
#contato .icones2 {
width: 1.2rem;
}
#contato li {
width: 98%;
}
}
@media (min-width: 400px) {
#contato .logo {
height: 300px;
width: 300px;
margin-bottom: 20px;
}
#contato a {
font-size: 1.2rem;
font-weight: 600;
}
#contato .icones {
font-size: 1.3rem;
font-weight: 600;
}
#contato .icones2 {
width: 1.3rem;
}
#contato li {
width: 95%;
}
}
@media (min-width: 500px) {
#contato .logo {
height: 300px;
width: 300px;
margin-bottom: 20px;
}
#contato a {
font-size: 1.3rem;
font-weight: 600;
}
#contato .icones {
font-size: 1.5rem;
font-weight: 600;
}
#contato .icones2 {
width: 1.5rem;
}
#contato li {
width: 92%;
}
}
@media (min-width: 575px) {
#contato .logo {
height: 300px;
width: 300px;
margin-bottom: 20px;
}
#contato a {
font-size: 1.5rem;
font-weight: 600;
}
#contato .icones {
font-size: 1.7rem;
font-weight: 600;
}
#contato .icones2 {
width: 1.7rem;
}
#contato li {
width: 90%;
}
}
@media (min-width: 768px) {
#contato .logo {
height: 300px;
width: 300px;
margin-bottom: 20px;
}
#contato a {
font-size: 1.7rem;
font-weight: 600;
}
#contato .icones {
font-size: 1.9rem;
font-weight: 600;
}
#contato .icones2 {
width: 1.9rem;
}
#contato li {
width: 80%;
}
}
@media (min-width: 992px) {
#contato .logo {
height: 300px;
width: 300px;
margin-bottom: 20px;
}
#contato a {
font-size: 1.9rem;
font-weight: 600;
}
#contato .icones {
font-size: 2.1rem;
font-weight: 600;
}
#contato .icones2 {
width: 2.1rem;
}
}
@media (min-width: 1200px) {
#contato .logo {
height: 300px;
width: 300px;
margin-bottom: 20px;
}
#contato a {
font-size: 2.1rem;
font-weight: 600;
}
#contato .icones {
font-size: 2.3rem;
font-weight: 600;
}
#contato .icones2 {
width: 2.3rem;
}
}
@media (min-width: 1400px) {
#contato .logo {
height: 300px;
width: 300px;
margin-bottom: 20px;
}
#contato a {
font-size: 2.3rem;
font-weight: 600;
}
#contato .icones {
font-size: 2.5rem;
font-weight: 600;
}
#contato .icones2 {
width: 2.5rem;
}
}
/******************* FOOTER ******************//******************* FOOTER ******************/
/******************* FOOTER ******************//******************* FOOTER ******************/
/******************* FOOTER ******************//******************* FOOTER ******************/
#footer {
background-color: #00d9ff;
}
#footer .separador-footer {
height: 3px; /* Define a altura do separador */
background-color: #81fff0; /* Cor cinza claro */
width: 35%; /* Faz a largura ser ajustável ao contêiner pai */
margin: 75px 0 40px 0; /* Adiciona um pouco de espaço acima e abaixo para separação */
border-radius: 3px; /* Adiciona bordas arredondadas */
}
#footer span {
margin: 5px auto;
}
#footer .marca {
font-size: 1.2rem;
font-weight: 600;
color: #FFF;
}
#footer .dados {
font-size: 1rem;
font-weight: 500;
color: #FFF;
}
#footer .versao {
font-size: 1rem;
font-weight: 600;
color: #81fff0;
}
/* Responsividade */
@media (max-width: 1400px) {
#footer .separador-footer {
width: 40%; /* Faz a largura ser ajustável ao contêiner pai */
margin: 75px 0 40px 0; /* Adiciona um pouco de espaço acima e abaixo para separação */
}
}
@media (max-width: 1200px) {
#footer .separador-footer {
width: 42%; /* Faz a largura ser ajustável ao contêiner pai */
margin: 75px 0 40px 0; /* Adiciona um pouco de espaço acima e abaixo para separação */
}
}
@media (max-width: 992px) {
#footer .separador-footer {
width: 50%; /* Faz a largura ser ajustável ao contêiner pai */
margin: 75px 0 40px 0; /* Adiciona um pouco de espaço acima e abaixo para separação */
}
}
@media (max-width: 768px) {
#footer .separador-footer {
width: 55%; /* Faz a largura ser ajustável ao contêiner pai */
margin: 75px 0 40px 0; /* Adiciona um pouco de espaço acima e abaixo para separação */
}
}
@media (max-width: 575px) {
#footer .separador-footer {
width: 60%; /* Faz a largura ser ajustável ao contêiner pai */
margin: 75px 0 40px 0; /* Adiciona um pouco de espaço acima e abaixo para separação */
}
}
/******************* Aviso sobre Cookies *****************/
/* Estilo para o aviso de cookies */
.cookie-consent-alert {
position: fixed;
bottom: 0;
width: 100%;
margin-bottom: 0 !important; /* Remover a margem padrão do Bootstrap */
z-index: 1000; /* Garantir que fique acima de outros elementos */
}