/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Raleway:wght@500;600;700&display=swap");

/*=============== VARIABLES CSS ===============*/

:root {
    --header-height: 3rem;
  
    /*========== Colors ==========*/
    /* Change favorite color to match images */
    /*Green dark 190 - Green 171 - Green Blue 200*/
    /*RGB 0, 170, 255*/
    --hue-color: 200; 
  
    /* HSL color mode */
    --first-color: hsl(var(--hue-color), 80%, 30%); /*RGB 15,97,128*/ /*#0F618A*/
    --first-color-second: hsl(var(--hue-color), 80%, 30%);
    --first-color-alt: hsl(var(--hue-color), 70%, 25%);
    --title-color: hsl(var(--hue-color), 100%, 30%);
    --text-color: hsl(var(--hue-color), 24%, 35%);
    --text-color-light: hsl(var(--hue-color), 8%, 60%);
    --input-color: hsl(var(--hue-color), 24%, 97%);
    --body-color: hsl(var(--hue-color), 100%, 99%);
    --white-color: #FFF;
    --scroll-bar-color: hsl(var(--hue-color), 12%, 90%);
    --scroll-thumb-color: hsl(var(--hue-color), 12%, 75%);
    --orange-color-logo: rgb(245,148,33);
    --grey-color-soft: #E0E0E0;
    --gold: #ffb338;
    --light-shadow: #77571d;
    --dark-shadow: #3e2904;

     /*========== Font and typography ==========*/
    --body-font: 'Open Sans', sans-serif;
    --title-font: 'Raleway', sans-serif;
    --thanks-font-size: 8rem;
    --biggest-font-size: 2.5rem;
    --h1-font-size: 1.5rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1rem;
    --normal-font-size: .938rem;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem;

    /*========== Font weight ==========*/
    --font-medium: 500;
    --font-semi-bold: 600;

    /*========== Margenes Bottom ==========*/
    --mb-0-25: .25rem;
    --mb-0-5: .5rem;
    --mb-0-75: .75rem;
    --mb-1: 1rem;
    --mb-1-25: 1.25rem;
    --mb-1-5: 1.5rem;
    --mb-2: 2rem;
    --mb-2-5: 2.5rem;

    /*========== z index ==========*/
    --z-tooltip: 10;
    --z-fixed: 100;

    /*========== Hover overlay ==========*/
    --img-transition: .3s;
    --img-hidden: hidden;
    --img-scale: scale(1.1);
}

/*=============== BASE ===============*/
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    /*margin: var(--header-height) 0 0 0;*/
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
    color: var(--text-color);
  }
  
  h1, h2, h3 {
    color: var(--title-color);
    font-weight: var(--font-semi-bold);
    font-family: var(--title-font);
  }
  
  ul {
    list-style: none;
  }
  
  a {
    text-decoration: none;
  }
  
 img,
video {
    max-width: 100%;
    height: auto;
}

button,
input {
    border: none;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
}

button {
    cursor: pointer;
}

.button {
  display: inline-block;
  background-color: var(--first-color);
  color: var(--white-color);
  padding: 1rem 2rem;
  font-weight: var(--font-semi-bold);
  transition: .3s;
}

.button--flex {
  display: flex;
  align-items: center;
  column-gap: .25rem;
}

input {
    outline: none;
}

.main {
    overflow-x: hidden;
}

.alertify .ajs-header{
  background: red;
  color: white;
  font-weight: bold;
}

.alertify .ajs-footer .ajs-buttons.ajs-primary .ajs-button{
  background: var(--orange-color-logo);
  border-radius: var(--mb-0-5);
}

::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

/*=============== REUSABLE CSS CLASSES ===============*/
.section {
  padding: 4.5rem 0 2.5rem;
}
  
.section__title {
  font-size: var(--h2-font-size);
  color: var(--title-color);
  text-align: center;
  text-transform: capitalize;
  margin-bottom: var(--mb-2);
}

.container {
  max-width: 100%;
  margin-left: var(--mb-1);
  margin-right: var(--mb-1);
}

.grid {
  display: grid;
  gap: 1.5rem;
}

/* Media Query for Large screens */
@media (min-width: 1281px) {
  .footer__container {
      margin-left: auto;
      margin-right: auto;
      max-width: 1024px;
    }
}

/*=============== CHECK BOX ===============*/

input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: #fff;
  /* Not removed via appearance */
  margin: 0;
}

input[type="checkbox"] {
  appearance: none;
  background-color: #fff;
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid currentColor;
  border-radius: 0.15em;
  transform: translateY(-0.075em);
}

input[type="checkbox"] {
  display: grid;
  place-content: center;
}

input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--orange-color-logo);
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

input[type="checkbox"]::before {
  /* ...existing styles */

  transform-origin: bottom left;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

input[type="checkbox"]:disabled {
  --form-control-color: var(--grey-color);

  color: var(--grey-color);
  cursor: not-allowed;
}

/*=============== HEADER ===============*/
.header {
    width: 100%;
    min-height: 100vh;
    position: relative;
    background-image: url(../img/home.jpg);
    background-position: center;
    background-size: cover;
    padding-left: 3rem;
}

.header-withoutimage{
    width: 100%;
    max-height: 80px;
    position: relative;
    padding-left: 5rem;
    background: var(--orange-color-logo);
}

.header img,
.header-withoutimage img{
    width: 120px;
    padding-top: 1.7rem;
}

.header-withoutimage img{
    padding-top: 2.3rem;
}

.logo__container{
    height: 155px;
}

/*=============== HOME ===============*/
.home__filters{
  background: var(--first-color);
  border-radius: var(--mb-0-25);
  position: absolute;   
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: var(--mb-1);
}
.home__filters h3{
  color: var(--white-color);
}

.btn__pesquisaHoteis{
  position: relative;
  border-radius: 5px;
  box-shadow: 0 5px 20px rgba(14,15,18,.2);
  margin-top: var(--mb-1);
  background-color: var(--orange-color-logo);
}
  
.home__filters__form .button{
  padding: var(--mb-1);
}

.home__filters__form{
  margin-top: var(--mb-1-5);
  gap: var(--mb-1);
  /*grid-template-columns: 18% 18% 22% 22% 10%;*/
  display: flex;
  justify-content: center;
  align-items: center;
}

.home__filters__form label{
    color: var(--white-color);
    display: flex;
    align-items: center;
    gap: var(--mb-0-25);
}

.form-control{
    width: 100%;
    margin: var(--mb-0-5) 0;
    max-width: 500px;
    border: 2px solid var(--white-color);
    border-radius: var(--mb-0-25);
    padding: var(--mb-0-75);
    font-size: var(--mb-1);
    color: white;
    background-color: transparent;
    cursor: pointer;
}
  
.form-control:hover{
    border: 2px var(--orange-color-logo) solid;
}

.select__pesquisa{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.caret{
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--white-color);
    transition: 0.3s;
}
  
.caret__rotate{
    transform: rotate(180deg);
}

.list__pesquisa{
    list-style: none;
    padding: var(--mb-0-25) var(--mb-0-5);
    background: var(--white-color);
    border: 1px #363a43 solid;
    box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.2);
    border-radius: var(--mb-0-5);
    color: var(--text-color);
    position: absolute;
    width: 200px;
    opacity: 0;
    display: none;
    transition: 0.2s;
    z-index: 1;
    max-height: 165px;
    overflow-y: auto;
}

.list__pesquisa::-webkit-scrollbar,
.autocom-box::-webkit-scrollbar{
    width: 5px;
    /*background: #0d141f;
    border-radius: 0 var(--mb-0-75) var(--mb-0-75) 0;*/
}

.list__pesquisa::-webkit-scrollbar-thumb,
.autocom-box::-webkit-scrollbar-thumb{
    background: var(--first-color);
    border-radius: 0 var(--mb-0-5) var(--mb-0-5) 0;
}

.list__pesquisa li{
    padding: var(--mb-0-5);
    margin: var(--mb-0-25) 0;
    border-radius: var(--mb-0-5);
    cursor: pointer;
}

.list__pesquisa li:hover{
    background: var(--orange-color-logo);
}

.list__pesquisa__active{
    background: #23242a;
}

.list__pesquisa__open{
    display: block;
    opacity: 1;
}

.list__pesquisa__children{
    width: 100px;
}

.filter__ages{
    display: flex;
    gap: var(--mb-1-5);
}
.width15{
  width: 15%;
}

.text {
  display: flex;
  justify-content: center;
  margin-top: var(--mb-2-5);
  /*transform: translateY(-50%);*/
  /* margin: 250px auto;*/
  text-align: center;
  /* border: 1px solid #000;*/
  transition: transform .3s ease-in-out;
  font-size: 40px;
}
.text:hover{
  transform: rotateX(35deg), translateY(-50%); 
}
.text:hover span{
  color: #ccc;
}
.text:hover span:nth-child(odd){
  transform: skewY(15deg); 
}
.text:hover span:nth-child(even){
  transform: skewY(-15deg);      
  background-color: #f9f9f9;
  color: #a6a6a6;
}
.text span{
  display: block;
  width: 120px;
  height: 120px;
  line-height: 120px;
  transition: transform .3s ease-in-out, color .3s ease-in-out, background-color .3s ease-in-out;
  box-shadow: 0 40px 50px rgba(0,0,0,0.1);
  background-color: var(--first-color-alt);
  color: var(--body-color);
}
/*.text span:nth-child(odd){
  background-color: var(--first-color-alt);
  color: var(--body-color);
}*/
.text span:first-child{
  border-radius: 5px 0 0 5px;
}
.text span:last-child{
  border-radius: 0px 5px 5px 0px;
}
::selection{
  color: #fff;
  background: #664AFF;
}
.zona:before {
  font-family: "Font Awesome 5 Free";
  content: "\f59f";
  display: inline-block;
  padding-right: 3px;
  vertical-align: middle;
  font-weight:900;
  color: rgb(245,148,33);
  margin-right: 0.25rem;
}
.hotel:before {
  font-family: "Font Awesome 5 Free";
  content: "\f594";
  display: inline-block;
  padding-right: 3px;
  vertical-align: middle;
  font-weight:900;
  color: #0F618A;
  margin-right: 0.25rem;
}
.cidade:before {
  font-family: "Font Awesome 5 Free";
  content: "\f3c5";
  display: inline-block;
  padding-right: 3px;
  vertical-align: middle;
  font-weight:900;
  color: var(--light-shadow);
  margin-right: 0.25rem;
}
.wrapper{
  max-width: 450px;
  width: 25%;
}
.wrapper .search-input{
  /*background: #fff;*/
  width: 100%;
  border-radius: 5px;
  position: relative;
  /*box-shadow: 0px 1px 5px 3px rgba(0,0,0,0.12);*/
}
/*.search-input input{
  height: 55px;
  width: 100%;
  outline: none;
  border: none;
  border-radius: 5px;
  padding: 0 60px 0 20px;
  font-size: 18px;
  box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
}*/
.search-input.active input{
  border-radius: 5px 5px 0 0;
}
.search-input .autocom-box{
  padding: 0;
  opacity: 0;
  pointer-events: none;
  max-height: 280px;
  overflow-y: auto;
}
.search-input.active .autocom-box{
  padding: 10px 8px;
  opacity: 1;
  pointer-events: auto;
  background-color: var(--white-color);
  display: block;
  position: absolute;
  border-radius: var(--mb-0-5);
}
.autocom-box li{
  list-style: none;
  padding: 8px 12px;
  display: none;
  width: 100%;
  cursor: default;
  border-radius: 3px;
}
.search-input.active .autocom-box li{
  display: block;
}
.autocom-box li:hover{
  background: #efefef;
}
.search-input .icon{
  position: absolute;
  right: 0px;
  top: 0px;
  height: 55px;
  width: 60px;
  text-align: center;
  line-height: 60px;
  font-size: 20px;
  color: var(--white-color);
  cursor: pointer;
}

.btn__loading span{
  visibility: hidden;
  opacity: 0;
}
.btn__loading::after{
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 4px solid transparent;
  border-top-color: var(--white-color);
  border-radius: 50%;
  animation: btn-loading-spinner 1s linear infinite;
}
@keyframes btn-loading-spinner {
  from{
    transform: rotate(0turn);
  }
  to{
    transform: rotate(1turn);
  }
}

/*=============== HOTELS ===============*/
#btn__Reservar{
  display: none;
}
.hotel__page__title{
  text-align: center;
  font-size: 2em;
}
.hotels__container{
  text-align: -webkit-center;
  margin-top: 5rem;
  max-width: 100% !important;
}
.hotel__container{
  width: 90%;
  display: flex;
  padding: 1rem;
  border-radius: 0 0 var(--mb-0-5);
  border: 3px solid var(--first-color);
  position: relative;
}
.hotel__title{
  position: absolute;
  top: -40px;
  /*left: -2px;*/
  right: -2px;
  left: 150px;
  height: 40px;
  padding: .5rem;
  background: var(--first-color);
  line-height: 25px;
  border-radius: var(--mb-0-5) var(--mb-0-5) 0 0;
}
.hotel__stars{
  position: absolute;
    top: -40px;
    left: -2px;
    /*left: 40%;*/
    /*right: -2px;*/
    height: 40px;
    padding: 0.5rem;
    background: var(--first-color);
    line-height: 20px;
    color: white;
    border-radius: var(--mb-0-5) var(--mb-0-5) 0 0;
}
.hotel__title h2{
  color: var(--white-color);
}

.hotel__container img{
  width: 25%;
  border-radius: var(--mb-0-5);
  height: 100%;
}
.table__quartos{
  width: -webkit-fill-available;
}
.table__quartos td, 
.table__quartos th {
  padding: var(--mb-0-75);
  text-align: center;
}
.table__quartos th{
  border-bottom: 1px solid var(--orange-color-logo);
}
.table__quartos td{
  border-bottom: 1px solid var(--grey-color-soft);
}
.table__quartos {
  border-collapse: collapse;
}
.btn__reservarHotel{
  background: var(--orange-color-logo);
  padding: var(--mb-0-5);
  border-radius: var(--mb-0-5);
  color: var(--white-color);
  border: 1px solid;
}
.btn__reservarHotel:hover{
  color: var(--orange-color-logo);
  background: var(--white-color);
  border: 1px solid var(--orange-color-logo);
}
.icon__disponivel{
  color: green;
}
.icon__Notdisponivel{
  color: red;
}
.hotel__info{
  margin-left: var(--mb-2);
  flex: 1;
}
.container__btnMoreRooms,
.container__btnLessRooms{
  margin-top: var(--mb-1);
}
.container__btnLessRooms{
  display: none;
}
.btn__moreRooms{
  background: var(--white-color);
  padding: var(--mb-0-5);
  border-radius: var(--mb-0-5);
  color: var(--first-color);
  border: 1px solid var(--first-color);
  font-weight: 600;
  -webkit-transition: box-shadow 400ms ease-in-out, color 400ms ease-in-out;
  transition: box-shadow 400ms ease-in-out, color 400ms ease-in-out;
}
.btn__moreRooms:hover{
  box-shadow: 0 0 40px 40px var(--first-color) inset;
  color: var(--white-color);
}
.container__btnSeeRooms{
  display: none;
}
.hotels__layout{ 
  margin: 0px;
  display: flex;
}
.hotels__filters{
  flex: 0 0 15%;
  padding: var(--mb-2);
  background-color: var(--grey-color-soft);
  height: max-content;
}
.hotels__results,
.hotels__results__dynamic{
  flex-grow: 1;
}
.input-div{
  position: relative;
  padding-top: var(--mb-1);
}
.input-div .input-content{
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: var(--mb-0-5);
}
.input-div .input-content label{
  margin-left: var(--mb-0-5);
}
.regime{
  padding-top: var(--mb-2);
}
.icon__filters,
.icon__close{
  display: none;
}
.hotels__pagination{
  margin-top:100;
  display:flex;
  justify-content:center;
  gap:2rem;
}
.hotels__pagination button{
  border:none;
  padding:0.4rem 1.2rem;
  background-color:purple;
  color:white;
  border-radius:5px;
  cursor:pointer;
}
#page-number{
  border:none;
  text-align:center;
  width:3rem;
  border-radius:5px;
}
#page-number:focus{
  outline:none;
}




/*=============== DESTAQUES HOMEPAGE ===============*/
.destaques__container{
  max-width: 100% !important;
}
.swiper{
  max-width: 90%;
  width: 100%;
  padding: var(--mb-2) !important;
}
.swiper__content{
  margin: 0 var(--mb-0-75);
  overflow: hidden;
}
.destaques__notFirst{
  margin-top: var(--mb-2-5);
}

.card__image{
  width: 140px;
  height: 140px;
  border-radius: 50%;
}

.card__image img{ 
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--white-color);
}

.card{
  position: relative;
  border: 3px solid var(--first-color-alt);
  border-radius: var(--mb-0-5);
  width: 280px;
}

.card::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--first-color-alt);
  clip-path: circle(50% at 0 0);
}

.card__content{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--mb-0-5);
  height: 310px;
  cursor: pointer;
}

.card__stars{
  position: absolute;
  top: 10px;
  left: 15px;
  display: flex;
  flex-direction: column;
  font-size: 20px;
}

.card__stars i{
  color: var(--gold);
}

.card__info{
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: var(--mb-1);
}

.card__info h3{
  text-align: center;
}

.card__detail{
  padding: var(--mb-1);
  display: flex;
  gap: var(--mb-1);
  flex-flow: wrap;
  justify-content: center;
}
.card__detail span{
  display: flex;
  align-items: center;
  gap: 5px;
}
.card__detail i{
  color: var(--first-color-alt);
}

.swiper-navBtn{
  color: var(--first-color) !important;
}
.swiper-button-next{
  right: 0 !important;
}
.swiper-button-prev{
  left: 0 !important;
}
.swiper-pagination-bullet{
  background-color: var(--first-color) !important;
}
/*.swiper-pagination-bullet-active{
  background-color: var(--first-color);
}*/
.destaque__title {
  margin-bottom: var(--mb-2);
}
.destaque__wrapper{
  /*background: radial-gradient(#272727, #1b1b1b);*/
  display: grid;
  grid-template-areas: 'overlap';
  place-content: center;
  text-transform: uppercase;
  /*height: 100vh;*/
}
.destaque__wrapper div {
  background-clip: text;  
  -webkit-background-clip: text;
  color: #363833;
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  font-size: clamp( 3em, 18vw, 4rem);
  grid-area: overlap;
  letter-spacing: 1px;
  -webkit-text-stroke: 4px transparent;
}
.destaque__wrapper div.bg{
  background-image: repeating-linear-gradient( 105deg, 
    var(--gold) 0% , 
    var(--dark-shadow) 5%,
    var(--gold) 12%);
  color: transparent;
  filter: drop-shadow(5px 15px 15px black);
  transform: scaleY(1.05);
  transform-origin: top;
}
.destaque__wrapper div.fg{
  background-image: repeating-linear-gradient( 5deg,  
    var(--gold) 0% , 
    var(--light-shadow) 23%, 
    var(--gold) 31%);
  color: #1e2127;
  transform: scale(1);
}

/**SUBSCRIBE**/

.subscribe__bg{
  background-color: var(--orange-color-logo);
  padding: var(--mb-2) 0;
}

.subscribe__description{
  text-align: center;
  margin-bottom: var(--mb-2);
}

.subscribe__form{
  background-color: var(--input-color);
  padding: var(--mb-1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--mb-0-25);
}

.subscribe__form .input__container{
  width: 35%;
  margin-bottom: 0;
}

.btn__subscribe{
  height: 38px;
  border-radius: 5px;
}

#subscribe__feedback {
  /* (A) POSITION */
  position: fixed; 
  z-index: 99;
  top: 5px;
  right: 50%;
  transform: translateX(50%);
 
  /* (B) DIMENSION */
  width: 300px;
  padding: var(--mb-1);
  text-align: center;
 
  /* (C) COLORS */
  background: green;
  color: white;
  border-radius: var(--mb-0-5);
 
  /* (D) HIDDEN BY DEFAULT */
  display: none;
}
.orcamento__form,
.orcamento__total{
  margin-top: var(--mb-2);
}

.orcamento__form .orcamento__resumo__title{
  margin-bottom: var(--mb-1);
}

.orcamento__form .input__container,
.orcamento__form .btn__container{
  position: relative;
  margin-bottom: var(--mb-0-75);
}

.orcamento__form .input__container label i{
  position: absolute;
  top: 10px;
  right: 20px;
  /*background-color: transparent;*/
  color: var(--first-color);
  font-size: 20px;
}

.orcamento__form .input__container .form__input{
  border: 1px solid var(--first-color);
  background-color: rgba(255, 255, 255, 0.1);
  padding: 10px 40px 10px 15px;
  color: black;
  font-weight: 400;
  border-radius: 5px;
  font-size: 15px;
  box-shadow: none;
  height: 38px;
  width: 100%;
}



/** ORÇAMENTO **/
.orcamento__container{
  display: flex;
  flex-direction: row;
  margin-top: var(--mb-1-5);
}
.orcamento__left{
  width: 60%;
}
.orcamento__right{
  width: 40%;
  margin-left: 2rem;
}
.orcamento__form{
  text-align: start;
  margin-bottom: var(--mb-2-5);
}
.orcamento_btn{
  display: none;
}
.form__title{
  margin-bottom: var(--mb-1);
}
.form__person h4{
  margin-bottom: var(--mb-0-5);
}
.form__person{
  margin-bottom: var(--mb-0-75);
}
.form__person__fields{
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 1rem;
  align-items: center;
}
.input__field{
  position: relative;
}
.input__field input{
  width: 100%;
  padding: var(--mb-0-5);
  border: 1px solid black;
  border-radius: 5px;
  outline: none;
  font-size: 1em;
  transition: 0.5s;
}
.input__field span{
  position: absolute;
  left: 0;
  padding: var(--mb-0-5);
  pointer-events: none;
  font-size: 1em;
  text-transform: uppercase;
  transition: 0.5s;
}
.input__field input:valid ~ span,
.input__field input:focus ~ span{
  transform: translateX(10px) translateY(-7px);
  font-size: 0.75em;
  padding: 0 10px;
  background: var(--first-color);
  color: var(--white-color);
  border-radius: 2px;
  border-left: 1px solid var(--first-color);
  border-right: 1px solid var(--first-color);
  letter-spacing: 0.1em;
}
.input__field input:valid,
.input__field input:focus{
  border: 1px solid var(--first-color);
  padding: var(--mb-0-75);
}
.orcamento__total{
  border-radius: var(--mb-0-5);
  padding: var(--mb-2);
  background-color: var(--first-color);
  margin-bottom: var(--mb-2);
  color: var(--white-color);
}
.orcamento__total h2{
  margin-bottom: var(--mb-1);
  color: var(--orange-color-logo);
  border-bottom: 2px solid var(--orange-color-logo);
}
.orcamento__total h3{
  color: white;
  border-top: 2px solid var(--orange-color-logo);
}
.orcamento__total h3 p{
  margin-top: var(--mb-0-5);
  display: flex;
  justify-content: space-between;
}
.orcamento__total li{
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--mb-0-75);
}
.orcamento__table,
.orcamento__table th,
.orcamento__table td{
  padding: var(--mb-1);
  border-collapse: collapse;
}
.orcamento__table{
  border-radius: var(--mb-0-5);
}
.orcamento__table thead th{
  background: var(--first-color);
}
.orcamento__table tbody td i.status__ok{
  color: green;
}
.orcamento__table tbody td i.status__notok{
  color: red;
}
.orcamento__table tbody tr {
  border-bottom: 1px solid #dddddd;
  text-align: center;
}

.orcamento__table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

.orcamento__table tbody tr:last-of-type {
  border-bottom: 3px solid var(--first-color);
}
.orcamento__table tbody tr td:first-child{
  text-align: start;
}
.orcamento__btn__reservar,
.orcamento__title{
  text-align: center;
}
.orcamento__title h1{
  margin-bottom: var(--mb-0-5);
}
.orcamento__title i{
  color: var(--first-color);
  padding: 0 var(--mb-0-5);
}


.orcamento__detail{
  display: flex;
  flex-direction: row;
  gap: var(--mb-2);
  margin-bottom: var(--mb-2);
}
.orcamento__detail__card{
  border: 2px solid var(--first-color);
  border-radius: var(--mb-0-5);
  padding: var(--mb-0-75);
  text-align: center;
}
.orcamento__detail__card span{
  font-size: 1.5em;
  font-weight: 600;
  margin-left: var(--mb-0-5);
}
.orcamento__detail__card .icon__backcolor{
  display: inline-block;
  width: 35px;
  height: 35px;
  background: var(--first-color);
  color: var(--white-color);
  font-size: 25px;
  border-radius: 50%;
  text-align: center;
  line-height: 35px;
}
.card__detail__icon__flight{
  position: relative;
  height: 50px;
  width: 100px;
  top: 12px;
  border-radius: 100% 100% 0 0 / 180% 180% 0 0;
  border: 2px dashed transparent;
  border-top-color: var(--first-color-soft);
}
.card__detail__icon__flight::before{
  content: '';
  position: absolute;
  height: 6px;
  width: 6px;
  top: 14px;
  left: 7px;
  background-color: var(--first-color);
  border-radius: 50%;
  box-shadow: 72px 0 0 var(--first-color);
}
.icon__flight{
  position: relative;
  top: -11px;
  color: var(--first-color);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(90deg);
  display: inline-block;
  font-weight: 600;
  font-size: 1.32rem;
}
.columns__flight{
  display: flex;
  gap: 25px;
  text-align: center;
}
.card__detail p:first-child{
  font-weight: 600;
}
.columns__hotel{
  grid-template-columns: 35% 35% 30%;
  display: grid;
  text-align: center;
}
.columns__servicos,
.columns__hotel,
.columns__flight{
  margin-top: var(--mb-1);
}
.columns__servicos ul li{
  text-align: start;
  margin-bottom: var(--mb-0-5);
}

.orcamento__btn__reservar a{
  color: var(--text-color);
}
.orcamento__btn__reservar a:hover{
  text-decoration: underline;
}
.orcamento__hotel__title{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: var(--mb-0-5);
}

.orcamento__carousell{
  position: relative;
  width: 650px;
  height: 450px;
  margin: 20px;
  margin-left: 45px;
}
.orcamento__carousell .slide{
  /*position: relative;*/
  width: 100%;
  overflow: hidden;
}
.orcamento__carousell .slide img{
  height: 100%;
  width: 100%;
  border-radius: var(--mb-0-25);
  position: absolute;
  object-fit: cover;
}
.orcamento__carousell .slide img:not(.active){
  top: 0;
  left: -110%;
}
.orcamento__carousell .btn__carousell__div span.next,
.orcamento__carousell .btn__carousell__div span.prev{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 14px;
  font-size: 30px;
  transition: 0.5s;
  cursor: pointer;
  z-index: 1;
  color: var(--orange-color-logo);
}
.orcamento__carousell .btn__carousell__div span.next{
  right: -7%;
}
.orcamento__carousell .btn__carousell__div span.prev{
  left: -7%;
}


@keyframes next1{
  from{
    left: 0%;
  }
  to{
    left: -110%;
  }
}
@keyframes next2{
  from{
    right: 110%;
  }
  to{
    left: 0%;
  }
}

@keyframes prev1{
  from{
    left: 0%;
  }
  to{
    right: 110%;
  }
}
@keyframes prev2{
  from{
    left: -110%;
  }
  to{
    left: 0%;
  }
}

.text__thanks{
  width: 60%;
  margin: 1rem auto;
  padding: 2rem;
  text-align: justify;
  transition: all 0.3s;
}

.text__thanks p{
  line-height: 1.5;
  letter-spacing: 0.3px;
  word-spacing: 2px;
}

.noData__section{
  text-align: center;
}
.noData__section i{
  font-size: 10rem;
}
.noData__section .text__thanks{
  text-align: center;
}



/*=============== FOOTER ===============*/
.footer{
  background: var(--first-color-alt);
  color: var(--white-color);
}
.footer__container{
    row-gap: 5rem;
  }
  
.footer__content{
    grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
    row-gap: 2rem;
    gap: var(--mb-1);
}
  
  .footer__title,
  .footer__subtitle{
    font-size: var(--h3-font-size);
    margin-bottom: var(--mb-1);
    color: var(--orange-color-logo);
  }

  .footer__social{
    font-size: 1.25rem;
    color: var(--orange-color-logo);
    margin-right: var(--mb-1-25);
  }

  .footer__social:hover{
    color: var(--white-color);
  }
  
  .footer__item{
    margin-bottom:var(--mb-0-75);
  }

.footer__container .info span:nth-child(1) {
   margin-right: 0.75rem;
}
  
  .footer__link{
    color: var(--white-color);
  }
  
  .footer__link:hover{
    color: var(--orange-color-logo);
  }
  
  .footer__rights{
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
    text-align: center;
  }
  
  .footer__copy,
  .footer__terms-link{
    font-size: var(--small-font-size);
    color: var(--text-color-light);
  }
  
  .footer__terms{
    display: flex;
    column-gap: 1.5rem;
    justify-content: center;
  }
  
  .footer__terms-link:hover{
    color: var(--text-color);
  }
  .footer__apavt{
    margin-top: var(--mb-1);
    display: flex;
    flex-direction: row;
    gap: var(--mb-1-25);
  }
  .footer__apavt img{
    width: 50px;
  }




/*=============== MEDIA QUERIES ===============*/

@media  (max-width: 420px){
  .card__content{
    height: 370px;
  }
  .card__image img{
    border-radius: var(--mb-1);
  }
}

@media  (max-width: 600px) {
  .hotel__container{
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .hotel__container img{
    width: 70%;
  }
  .hotel__title{
    left: -2px;
  }
  .hotel__title h2{
    font-size: var(--mb-1);
  }
  .hotel__stars{
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--mb-0-5) 0;
    top: 0;
    height: 110px;    
    line-height: 17px;
  }
  .hotel__info{
    margin-left: 0;
    width: 95%;
    margin-top: var(--mb-1);
  }
  .btn__reservarHotel{
    padding: var(--mb-0-25) var(--mb-0-5);
  }
  table {
    border: 0;
  }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  table td:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 670px){
  .subscribe__form .input__container {
    width: 100%;
}
  .subscribe__form {
      flex-direction: column;
      gap: var(--mb-1);
  }
}

@media  (max-width: 480px){
  .section{
    padding: 2rem 0 2rem;
  }
  .header,
  .header-withoutimage{
    padding-left: var(--mb-1);
  }
  .header-withoutimage{
    max-height: 35px;
  }
  .header img,
  .header-withoutimage img{
    width: 80px;
    padding-top: 0.4rem;
    height: 80px;
  }
  .orcamento__form .input__container .form__input {
    height: 30px;
    padding: 10px 10px 10px 10px;
}
  .orcamento__detail li, .orcamento__form .input__container .form__input {
    font-size: 0.8em;
  }
  .orcamento__form .input__container label i {
    font-size: 13px;
    right: 10px;
  }
  .home__filters{
    top: 370px;
    width: 90%;
  }
  .home__filters__form{
    flex-direction: column;
  }
  .home__filters__form .button{
    padding: var(--mb-0-75);
    width: 100%;
    justify-content: center;
  }
  .wrapper{
    width: 100%;
  }
  .width15{
    width: 100%;
  }
  .destaque__wrapper{
    text-align: center;
  }
  .destaque__wrapper div{
    font-size: clamp(3em, 15vw, 3rem);
  }
  .card__stars{
    left: 5px;
  }
  .card::before{
    clip-path: circle(40% at 0 0);
  }
  .text{
    font-size: 35px;
  }
  .text span{
    height: 60px;
    line-height: 60px;
  }
  .location{
    position: absolute;
    top: var(--mb-2);
    color: var(--text-color);
    align-items: center;
    background: var(--body-color);
    padding: var(--mb-0-25);
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: var(--mb-0-5);
    font-size: 0.8em;
    height: 25px;
    line-height: 15px;
  }
  .orcamento__container{
      flex-direction: column-reverse;
  }
  .orcamento__detail{
    flex-direction: column;
  }
  .orcamento__left, 
  .orcamento__right,
  .input__field{
      width: 100%;
  }
  .orcamento__left{
    margin-top: var(--mb-2);
  }
  .orcamento__right{
      margin-left: 0;
  }
  .orcamento__form, .orcamento__total{
    margin-top: 0;
  }
  .orcamento__total{
    padding: var(--mb-1);
  }
  .form__person__fields{
    grid-template-columns: auto;
  }
  .hotel__page__title{
    font-size: var(--mb-1-5);
    position: relative;
  }
  .hotels__container{
    margin-top: 3rem;
  }
  .hotel__container img{
    width: 50%;
  }
  .hotel__container{
    padding: var(--mb-0-5);
  }
  .hotel__title{
    height: 35px;
    line-height: 35px;
    top: -36px;
    left: -3px !important;
    right: -2.5px;
    padding: 0.1em;
  }
  .hotel__title h2{
    font-size: 0.9em;
  }
  .table__quartos tbody{
    display: none;
  }
  .container__btnMoreRooms, 
  .container__btnLessRooms{
    margin: 0;
    display: none;
  }
  .container__btnSeeRooms{
    display: block;
  }
  .btn__seeRooms{
    background: var(--white-color);
    padding: var(--mb-0-25);
    border-radius: var(--mb-0-5);
    color: var(--first-color);
    border: 1px solid var(--first-color);
    font-weight: 600;
    -webkit-transition: box-shadow 400ms ease-in-out, color 400ms ease-in-out;
    transition: box-shadow 400ms ease-in-out, color 400ms ease-in-out;
  }
  table td{
    font-size: 0.7em;
  }
  .table__quartos td, .table__quartos th{
    padding: 0.3rem;
  }
  .btn__reservarHotel{
    padding: 0.25rem;
    font-size: 1.2em;
  }
  .hotel__stars{
    height: 90px;
    line-height: 15px;
  }
  .card__detail{
    gap: var(--mb-0-5);
  }
  .form-control input{
    height: 50px;
  }
  .td_btnReservar{
    position: relative;
    height: 35px;
  }
  .div_btnReservar{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .btn__moreRooms{
    padding: var(--mb-0-25);
  }
  .orcamento__total h2{
    font-size: 1.2em;
  }
  .input__field input{
    min-width: 100%;
    max-width: 100%;
  }
  .hotels__section{
    position: relative;
  }
  .hotels__filters{
    display: none;
  }
  .icon__filters{
    display: block;
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 20px;
  }
  .hotels__filters{
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    transition: 0.3s;
    width: 250px;
    height: 100%;
  }
  .icon__close{
    margin-bottom: var(--mb-1);
    font-size: var(--mb-1-25);
  }
  .orcamento__carousell{
    margin: 0;
    width: 90%;
    height: 200px;
    margin-top: 20px;
    margin-left: 12px;
  }
  .orcamento__carousell .btn__carousell__div span.next, .orcamento__carousell .btn__carousell__div span.prev{
    font-size: 20px;
  }
  .orcamento__carousell .btn__carousell__div span.next{
    right: -15%;
  }
  .orcamento__carousell .btn__carousell__div span.prev{
    left: -15%;
  }
  .btn__container .btn__reservar{
    display: none;
  }
  .orcamento_btn{
    display: block;
    margin-top: var(--mb-1);
    display: flex;
    justify-content: center;
  }
  .orcamento__hotel__title{
    margin-top: var(--mb-1-25);
  }
}