/* font import */
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&display=swap');

/* CSS Geral */
:root{
    --corLaranja: #f58636;
    --corRoxa: #404493;
    --corAzul: #3870a8;
}

td{
    vertical-align: middle;
}

.bg-principal{
    background-color: #3870a8;
}

.banner, .banner1, .banner2{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 70px;
    width: 100%;
    height:300px;
    margin-bottom:25px;
    background-position: top;     

}

.banner{
    background: url('../image/banner/banner.png');
    background-size: cover;
}

.banner1{
    background: url('../image/banner/banner1.jpg'); 
    background-size: cover;  
}

.banner2{
    background: url('../image/banner/banner2.png');  
    background-size: cover;
    padding: 0;
    align-items: center;
}

.banner1 img, .banner2 img{
    width: 50%; 
    min-width: 300px;
    max-width: 400px;
}

.banner img{
    width: 50%; 
    min-width: 300px;
    max-width: 400px;
}
.banner-texto{
    color:#4d5099;
    font-weight: 800;

}.banner-texto1{
    color:#4d5099;
    font-weight: 800;
    -webkit-text-stroke-width: 1px; /* largura da borda */
    -webkit-text-stroke-color: #fff; /* cor da borda */
}

.content{
    width: 100%;
    max-width: 1366px;
    margin: 0 auto;
    position: relative;
    /* background: #e4e4e4; */
    background: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.card-borderless-top{
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
}

.card-borderless{
    border-radius: 0 !important;
}

.btn-principal{
    background-color: var(--corLaranja);
    color: white;
    border-radius: 5px;
}

.btn-principal:hover{
    background-color: #cf6f37;
    cursor: pointer;
    color: white;
}

.linkStyle{
    font-size: 17px;
    text-decoration: none;
    font-weight: 500;
}

.btn-zoom {
    display:block;  
    transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.20), background-position 800ms cubic-bezier(0.68, -0.55, 0.265, 1.20), box-shadow 500ms linear;
    background-position: -250px center;
    background-repeat: no-repeat;
}

.btn-zoom:hover {
    transform: scale(1.02);
    background-position: -60px;
    cursor: pointer;
}

.span-zoom {
    display:block;  
    transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55), background-position 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55), box-shadow 500ms linear;
    background-position: -250px center;
    background-repeat: no-repeat;
}

.span-zoom:hover {
    transform: scale(1.1);
    background-position: -60px;
    cursor: pointer;
}

.title-center{
    vertical-align: middle;
    align-items: center;
    text-align: center;
}

p{
    text-align: justify;
}

.box{
    max-width: 1000px;
    margin: 50px auto;
}

.close{
    background-color: transparent;
    border: none;
}

/* Menu */
#menu li{
    margin: 5px;
    font-weight: bold;
    transition: 0.5s;
}

.nav-link{
    transition: 0.7s;
    border-radius: 5px;
    color: #ffffffbe;
}

#menu .nav-link:hover {
    background-color: #fff;
    color: var(--corAzul)!important;
    border-radius: 10px;
}

.titleNav{
    font-weight: bolder;
    font-size: 30px;
    font-style: italic;
    font-family: sans-serif;
}

.btnLogin{
    background-color: var(--corLaranja);
    color: white;
    border: none; 
    transition: 1s;
}

.btnLogin:hover{
    background-color: white;
    color: var(--corLaranja); 
}

.btnLogin:focus{
    background-color: var(--corLaranja);
    color: white; 
    border: 1px solid var(--corLaranja);
    box-shadow: 0 0 0 0.0rem rgba(250, 250, 250, 0.192);
}

.btnUser{
    border-radius: 10px!important;
}

.btnUser:hover{
    background-color: #ac5e26;
    color:  white;
}

.btn-check:checked+.btn, 
.btn.active, 
.btn.show, 
.btn:first-child:active, 
:not(.btn-check)+.btn:active{
    background-color: var(--corLaranja)!important;
    color: white!important; 
    border: none!important;
    box-shadow: none!important;
}

.btnUser:focus{
    background-color: var(--corLaranja);
    color: white; 
    border: none;
    box-shadow: none;
}

.labelLogin{
    font-weight: 500;
    color: #414141;
    font-size: 17px;
}

#modalLogin .input-group-text{
    background-color: #fff;
    border-left: none;
}

#modalLogin .input-group > .form-control{
    border-right: none;
}

#modalLogin .input-group .bi{
    color: var(--corLaranja);
}

#senha .bi-key-fill{
    transform: rotate(90deg);
}

#modalLogin .modal-header{
    font-weight: bolder;
}

.navbar .btn-group .d-flex{
    width: 100%;
    justify-content: end;
}
/* FIM Menu */

/* Cotacao */
.cta{
    font-family: 'Source Sans 3', sans-serif;
    background: #eb8d00;
    color: #fff;
    font-size: 1em;
    padding: 10px 20px;
    width: fit-content;
    transition: ease-in-out .3s;
    font-weight: 600;
    border: 2px solid #eb8d00;
    border-radius: 10px;
    text-decoration: none;
}

.cta:hover {
    color: #eb8d00;
    background: transparent;
    border: 2px solid #eb8d00;
}
.cta2{
    font-family: 'Source Sans 3', sans-serif;
    background: #5e17eb;
    color: #fff;
    font-size: 1em;
    padding: 10px 20px;
    width: fit-content;
    transition: ease-in-out .3s;
    font-weight: 600;
    border: 2px solid #5e17eb;
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
}

.cta2:hover {
    color: #5e17eb;
    background: transparent;
    border: 2px solid #5e17eb;
}

.campo-customizado {
    border: solid 1px #0000002a;
    padding: 13px;
    border-radius: 5px;
}

.imagem-capa {
    height: 350px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.formulario-cotacao{
    margin-top:-140px;
}

.formulario-cotacao .calendar-span {
    float: right;
    margin-right: 10px;
    margin-top: -30px;
    position: relative;
    z-index: 2;       
    cursor: pointer; 
}

.formulario-cotacao .comparativo-opcoes p {
    font-size: 14px !important;
}

.formulario-cotacao #cambio-label {
    font-size: 17px !important;
}
.formulario-cotacao .btn-orange {
    color: #ffffff;
    background-color: #ff832c;
}

.formulario-cotacao .btn {
    border-radius: 0%;
}

.formulario-cotacao .datepicker th {
    /* back do topo*/
    background: #292d3c;
    color: white;
    padding: 10px;
}

.formulario-cotacao .datepicker td {
    padding: 10px 15px;
}

.formulario-cotacao .form-control, .formulario-cotacao .custom-select {
    cursor: pointer;
}

.formulario-cotacao .custom-control label {
    font-size: 0.9rem;
}      

#comparativo-box #comparativo-title {
    -webkit-transition: all .3s ease; /* Safari and Chrome */
    -moz-transition: all .3s ease; /* Firefox */
    -o-transition: all .3s ease; /* IE 9 */
    -ms-transition: all .3s ease; /* Opera */
    transition: all .3s ease;
    position:relative;
}

#comparativo-box:hover #comparativo-title {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform:translateZ(0) scale(1.20); /* Safari and Chrome */
    -moz-transform:scale(1.20); /* Firefox */
    -ms-transform:scale(1.20); /* IE 9 */
    -o-transform:translatZ(0) scale(1.20); /* Opera */
    transform:translatZ(0) scale(1.20);        
}

@media (max-width: 1200px) {
    #switchrow {
        max-width: 70%;
    }
}

.formulario-cotacao .col-md-3 {
    position: relative;
}

.formulario-cotacao .col-md-4 {
    position: relative;
}

.formulario-cotacao .input-container {
    position: relative;
}

.formulario-cotacao .recomendado {
    background: var(--corAzul);
    border-radius: 8px;
    display: flex;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 0.8em;
    padding: 0 15px;
    width: fit-content;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
}

.formulario-cotacao .options{
    display: flex;
}

.formulario-cotacao .options{
    display: none;
    position: absolute;
    top: 55px;
    left: 0;
    border: 1px solid #00213D;
    border-radius: 18px;
    background: #fff;
    height: 100px;
    z-index: 100;
}

/* FIM Cotacao */

/* Conteudo */

.conteudoHome{
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    overflow: hidden;
}

.pontoTuristico{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}

.animacao{
    overflow: hidden;
    opacity: 0;
    transition: .5s;
}

.anime-esquerda{
    transform: translate3d(-200px, 0, 0);
}

.anime-direita{
    transform: translate3d(200px, 0, 0);
}

.bg-laranja{
    background-color: var(--corLaranja);
    color: white;
}

.bg-roxo{
    background-color: var(--corRoxa);
    color: white;
}

.bg-white{
    background: white;
}

.img-appering{
	opacity: 0;
	transform : translateY(3em) rotateZ(-4deg);
	transition : tranform 2s .25s cubic-bezier(0,1,.3,1),
				opacity .2s .25s ease-out;
	will-change: transform,opacity;
}

.img-appering.is-visible {
	opacity: 1;
	transform: rotateZ(-2deg);
}

#estatuaLiberdade{
    height: 300px;
    width: 500px;
    transform: rotate(45deg);
    display: flex;
    justify-content: end;
    align-items: baseline;
	
}

#estatuaLiberdade img{
    width: 400px;
    transform: rotate(315deg);
}

.textoAuxiliar{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 40px;
    font-size: 150%;
    flex: 1;
    font-style: italic;
    z-index: 100;
    min-width: 300px;
    padding: 10px;
}

#japao{
    height: 300px;
    width: 500px;
    transform: rotate(353deg);
    display: flex;
    justify-content: center;
    align-items: center;
}

#japao img{
    width: 400px;
    transform: rotate(6deg);
}

#torre{
    height: 300px;
    width: 500px;
    transform: rotate(112deg);
    display: flex;
    justify-content: center;
    align-items: center;
}

#torre img{
    width: 400px;
    transform: rotate(248deg);
}

.anime{
    opacity: 1;
    transform: translate3d(0, 0, 0) !important;
}

.cardHover{
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
      transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
  padding: 14px 80px 18px 36px;
  cursor: pointer;
}

.cardHover:hover{
     transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}

.tituloCard{
    font-size: 25px;
    font-weight: bold;
    border: none;
    border-radius: 0px;
    border-top: 3px solid;
    border-color: var(--corLaranja);
    background-color: white;
}

.cardStyle{
    border: none;
    border-radius: 0px;
}

/* Conteudo */

/*----------| PlanComparative |----------*/
       
.botao-sem-decoracao {
    display: inline-block;
    padding: 0;
    background-color: transparent;
    color: #000;
    text-decoration: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
}
.botao-sem-decoracao:hover {
    color: #5e17eb;
}

.nome-plano {
    font-weight: 800;
    color:#5e17eb;
}

#valor-original {
    text-decoration: line-through;
    color: #999;
    font-size: 18px;
}

.preco-plano {
    font-weight: 800;
    font-size: 25px;
    color: #008e1a;
}

.preco-por-pessoa{
    color: #5e17eb;
}
.progresso-texto{
    /* font-family: 'Montserrat', sans-serif; */
    color: #eb8d00;
    font-weight: 800;
}

.btn-link:hover, a, a:hover, a:focus, a:active {
    border: none;
    outline-style: none;
    text-decoration: none;
  }
.progressbar {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 100;
    counter-reset: step;
  }
  .progressbar li {
    list-style-type: none;
    width: 30%;
    float: left;
    font-size: 14px;
    position: relative;
    text-align: center;
    color: #000;
  }
  
  .progressbar li:after {
    width: 100%;
    height: 2px;
    content: "";
    position: absolute;
    background-color: #999;
    top: 12px;
    left: -50%;
    z-index: -1;
  }
  .progressbar li:first-child:after {
    content: none;
  }
  
  .progressbar li.active:before {
    background-color: #eb8d00;
  }
  .progressbar li.active + li:after {
    background-color: #eb8d00;
  }
  
  .progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 30px;
    height: 30px;
    line-height : 30px;
    border: 1px solid #ddd;
    border-radius: 100%;
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    background-color: #fff;
  }
  li:before {
    content: "";
  }
  
  a.social {
    background: white;
    margin: 3px;
    padding: 2px 8px 0px 6px;
    text-align: center;
    font-size: 20px;
    display: inline-block;
    border-radius: 9px;
    color: #ad0000;
    width: 32px;
}
.hoverzin:hover td {
    background: #99a3e0;
  
}
td{
    -webkit-transition: background-color 1s ease-out;
    -moz-transition: background-color 1s ease-out;
    -o-transition: background-color 1s ease-out;
    transition: background-color 1s ease-out;
}


/*----------| FIM PlanComparative |----------*/

/*----------| ProductForm |----------*/
.passTipoTitulo-1 {
    font-weight: 800;
    color:#5e17eb;
}

.passTipoTitulo-2 {
    font-weight: 800;
    color:#eb8d00;
}

.passTipoTitulo-3 {
    font-weight: 800;
    color:#3870a8;
}

.passTipoTitulo-4 {
    font-weight: 800;
    color:#292d3c;
}

/*----------| FIM ProductForm |----------*/

/*----------| FATURAMENTO |----------*/
.container-fatura{
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.header-fatura{
    display:flex;
    align-items: center;
    background-color: #3870a8 !important;
    color:#fff !important;
    height: 167px;
    padding: 8px;
    justify-content: space-between;
    width: 100%;
}
.text-header-fatura{
    color: #FFF;
    font-family: Roboto;
    font-size: 16.469px;
    font-style: normal;
    font-weight: 400;
    line-height: 25.5px; /* 154.839% */
}

.table-fatura{
  
    width: 100px!important;
    overflow:auto;
 }


/*----------| FIM FATURAMENTO |----------*/

/*----------| RODAPE |----------*/

.text-rodape{
    text-decoration:none;
    color:#eb8d00; 
    font-weight: bold;
}

footer{
    padding: 10px;
}

/*----------| FIM RODAPÉ |----------*/

/*----------| PARCEIROS |----------*/



/*----------| FIM PARCEIROS |----------*/

/*----------| SOBRE |----------*/

.card-sobre{
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
}

/*----------| FIM SOBRE |----------*/

/*----------| PRODUTOS |----------*/

#popupAvisos {
    display:"";
    position:absolute;
    top:160px;
    left:350px;
    margin:12px;
    z-index:100;
}

.destaquePlano {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    font-weight: bold;
    color: #000549;
}

.detPlano {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #666;
}

.tcb {
    color:#FFF;
    background-color:#C74801
}

#tablePlano{
    width: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.td-planos{
    font-weight: bold;
    color: #406491 !important;
    vertical-align: middle;
    width: 50%;
}

.thead-planos{
    text-align:center;
    background-color: #3870a8 !important;
    color:#fff !important;
    /* border-radius: 5px 5px 0 0; */
}.thead-planos2{
    background-color: #3870a8 !important;
    color:#fff !important;
    text-align:center;
}.thead-planos3{
    background-color: #3870a8 !important;
    color:#fff !important;
    
}




/*----------| PRODUTOS DETALHES |----------*/

#divServicosCoberturaPlano{
    width: 70%;
}

#divTarifasPlano{
    margin-left: 10px;
    width: 30%;
}

.span-cobertura{
    font-size:12px;
}

.table-body{
    height: 500px;
}

.scroll-tbody-y{
    display: block;
    overflow-y: auto;
    width:100%;
}

.thead-scroll{
    width: 100%;
    display: inline-table;
}

.tabela-com-scroll {
    max-height: 500px; /* Altura máxima da tabela */
    overflow-y: auto; /* Ativar rolagem vertical quando a tabela exceder a altura máxima */
  }
/* Estilo para o cabeçalho da tabela */
.tabela-com-scroll thead th {
background-color: #f2f2f2; /* Cor de fundo para o cabeçalho */
position: sticky;
top: 0; /* Fixar no topo da tabela */
}



/*----------| CONTATO |----------*/
.label-contato{
    margin-left: 10px;
    color: #406491;
    font-weight: bold;
    font-size: 16px;
}

.input-contato{
    border:solid 1px #406491
}

.btn-contato{
    vertical-align: middle;
    align-items: center;
    display: flex;
    justify-content: center ;
    background-color: #406491 !important;
}

/* --------| DUVIDAS |----------- */
#listaDuvidas{
    max-width: 1000px;
    margin: auto;
}

#listaDuvidas strong{
    font-size: 20px;
    color: var(--corRoxa);
}

#listaDuvidas li{
    padding: 30px;
    margin: auto;
    transform: translate3d(150px, 0, 0);;
}


/* --------| RELATORIOS |----------- */
.label-form-relatorios{
    font-weight: bold;
}


.td-nacionalidade{
    background: #3870a8 !important;
    color: #fff !important;
    font-weight: bold !important;
}



.btn-pesquisar-relatorio{
    background-color: #3870a8;
    color: #fff;
    width: 150;
}

.btn-pesquisar-relatorio:hover{
    background-color: #24598f;
    color: #fff;
}

.linha-cabecalho > th{
    background: #3870a8 !important;
    color: #fff !important;
    font-weight: bold !important;
}

.linha-relatorio > td{
    max-width: 300px;
    font-size: 12px;
}


/* --------| DECLARAÇÃO |----------- */
#nomeDeclaracao{
    max-width: 300px;
    border: none;
    border-bottom: 1px solid #000;
    border-radius: 0px;
}

#nomeDeclaracao:focus{
    border-color: #000000;
    outline: 0;
    box-shadow: 0 0 0 0;
}

#cardDeclaracao .card-header{
    background-color: var(--corLaranja);
    color: white;
    font-size: 20px;
    font-weight: bold;
}

#printDeclaracao{
    background-color: #fff;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 100;
}

#printDeclaracao .card{
    margin: auto;
    max-width: 700px;
    transform: translate(0,50%);
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar {
    width: 8px;
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar-track {
    background: rgb(255, 255, 255);
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.788);    
    border-radius: 20px;       
    border: 5px solid rgba(80, 80, 80, 0.788);  
}