:root{
  --primaryColor: #80B8DA;
}

/* sunset */
.nav {
  background: #E6E4DE;
  padding: 40px 0;
  text-align: center;
}
.logo img {
  height: 30px;
}
.sunset-header {
  background: url('../img/sunset/house5.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;  
}
.house {
  min-height: 90vh;
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.house::before {
  content: '';
  position: absolute;
  /* background: url('../img/sunset/house3.jpeg'); */
  opacity: 0.5;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 100% 30%;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
.house .container{
  margin-top: 90px;
}
.header-info h1 {
  color: #363A36;
  font-size: 45px;
  font-style: italic;
  font-weight: 400;
  text-transform: uppercase;
  text-wrap: balance;
  margin-bottom: 30px;
}
.header-info h5 {
  color: #363A36;
  font-size: 30px;
  font-weight: 500;
}
.price-sunset {
  width: 100%;
  height: 120px;
  background: #80B8DA;
  margin: 40px 0 0 0;
  color: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.price-txt {
  text-align: center;
  width: 40%;
  margin: 0 auto 0 0;
}
.price-txt p {
  margin: 0;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
}
.price-txt h6 {
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  margin: 0;
}
/* Form */
.sunset-form {
  border-radius: 10px;
  background: rgba(54, 58, 54, 0.70) !important;
  color: #fff !important;
  position: relative;
  z-index: 99;
}
.sunset-header .message-box {
  position: relative;
  z-index: 99;
  background: rgba(54, 58, 54, 0.70) !important;
  color: #fff !important;
}
.sunset-header .message-box img {
  filter: brightness(0) invert(100%);
}
.sunset-form #form-group input, .sunset-form #form-group select, .sunset-form #comentario {
  color: #fff !important;
  border-bottom: 1px solid #fff !important;
}
.sunset-form h3, .sunset-form #politica-link {
  color: #fff !important;
}
.sunset-form #politica-link:hover {
  color: #80B8DA !important;
}
.sunset-form .checkmark {
  border: 1px solid #fff;
  color: #fff;
}
.sunset-form #form-group input::placeholder, .sunset-form #comentario::placeholder {
  color: #fff !important;
  text-transform: uppercase;
}
.sunset-form .iti__arrow {
  border-top: var(--iti-arrow-height) solid #fff;
}
.sunset-form .iti__dial-code, .sunset-form .iti__country-name {
  color: #393B39; 
}
.sunset-form .phone_box .iti__search-input {
  display: none;
}
.sunset-header .timer-box {
  background: #363A36;
}
.sunset-header .timer-box h4 {
  color: #fff;
}
.sunset-header .wheel__shadow-top {
  border-bottom: 0.5px solid #fff;
  background: linear-gradient(180deg,rgba(57, 59, 57, 1) 30%, rgba(57, 59, 57, 0) 100%);;
}
.sunset-header .wheel__shadow-bottom {
  border-top: 0.5px solid #fff;
  background: linear-gradient(0deg,rgba(57, 59, 57, 1) 30%, rgba(57, 59, 57, 0) 100%);;
}
.sunset-header .wheel__inner {
  filter: brightness(0) invert(1);
} 

.iti{
  width: 100%;
}
#contactform .iti__country-container{
  bottom: -7px;
}
.section8{
    padding-top: 0;
    margin-top: -50px;
    padding-bottom: 80px;
}
.flower1, .flower2{
  z-index: 100000;
}
/* Header */
.header-txt img{
  margin-bottom: 100px;
}
.header-txt h1{
  margin: 0;
}
.header h4{
  margin-top: 60px;
  margin-bottom: 20px;
}
.header h6{
  margin-bottom: 80px;
}
/*New card (sunset)*/
#sunset-card-img {
  background-image: url(../img/sunset.jpg);
    background-size: cover !important;
    background-position: bottom !important;
}

/* amenites sunset slider */
.sunset-slider-txt h3 {
  font-size: 50px;
}
.sunset-slider-txt p {
  max-width: 100%;
  font-size: 20px;
  width: 600px;
}
.amenites-icon-row {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}
.amenites-icon {
  width: 15%;
}
.amenites-icon img {
  width: 60px;
  aspect-ratio: 1;
  margin-bottom: 10px;
}
.amenites-icon p {
  font-size: 20px;
  font-weight: 500;
  line-height: 0.9;
  text-wrap: balance;
}
.amenites-icon p span {
  font-size: 12px;
}
/* Section amenities */
.amenities {
  background: #E6E4DE;
  padding: 70px 0;
}
.amenities h1{
  font-size: 50px;
}
.amenities p{
  margin-bottom: 50px;
  font-size: 20px;
  line-height: 1.15;
  max-width: 525px;
}
.card-info h5 span{
  color: var(--primaryColor); 
}
.amenities_icons_sliders{
  row-gap: 45px;
}
.slick-dots {
  text-align: center;
  margin-top: 30px;
}
 .slick-dots {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
}
 .slick-dots li {
  margin: 0 5px;
}
 .slick-dots li button {
  background-color: #E6E4DE; 
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: none;
  display: block;
  padding: 0;
  cursor: pointer;
  font-size: 0;
}
.sunset  .slick-dots li button {
  background: rgba(54, 58, 54, 0.3);
}
 .slick-dots li.slick-active button {
  background-color: #00AF9B;
}
.amenity{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.amenity img{
  margin-bottom: 15px;
  max-width: 50px;
  width: 100%;
}
.amenity h5{ 
  margin-bottom: auto;
  font-size: 16px;
}

/* Prices section */
.prices{
  padding: 80px 0 60px;
}
.prices .innerBox{ 
  max-width: 360px; 
  background-color: #E6E4DE;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
}
.innerBox h1{
  font-size: 35px;
  margin-bottom: 30px;
}
.innerBox img{
  max-width: 300px;
  width: 100%;
  margin-bottom: 30px;
}
.innerBox .desc{
  display: flex;
  margin: 0 0 20px 0;
}
.innerBox .desc img{
  max-width: 40px;
  margin: 0 10px 0 0;
}
.desc h5{
  font-size: 16px;
  margin-bottom: 5px;
}
.desc p{
  font-size: 12px;
  margin-bottom: 0;
}
.innerBox button{
  width: 100%;
  margin-top: 20px;
  max-width: 240px;
  background-image: url(../img/arrowLeft.svg);
  background-repeat: no-repeat;
  background-position: 90% 50%;
  background-size: 15px;
  background-color: var(--primaryColor);
  color: #fff;
  border: none;
  outline: none;
  font-size: 20px;
  font-weight: 500;
  text-align: left;
  padding: 15px 60px 15px 25px;
  line-height: 1.15;
}
.innerBox button span{ 
  font-size: 33px;
}
.innerBox button img{
  width: 15px;
  margin: auto;
}
@media(max-width: 1550px){
  .house::before {
    background-position: 50% 50%;
  }
}
@media(max-width: 1400px){
  .header-info h1 {
    font-size: 40px;
  }
  .sunset-slider-txt h3 {
    max-width: 80%;
    text-wrap: balance;
    margin: 0 auto 10px auto;
  }
  .house::before {
    background-size: 110%;
    background-position: 0% 0%;
  }
  .amenites-icon p {
    max-width: 80%;
    margin: 0 auto;
  }
  .price-sunset {
    width: 180%;
  }
}
@media(max-width: 1200px){
  .amenities h1{
    text-align: center;
    font-size: 42px;
  }
  .amenities p{
    margin: 10px auto 25px;
    text-align: center;
  }
  .amenities_icons_sliders{
    margin-bottom: 40px;
  }
  .prices .innerBox{ 
    margin: auto;
  }
  .house {
    min-height: 80vh;
  }
  .house::before {
    background-size: 130%;
    background-position: 0% 0%;
  }
  .header-info h1 {
    font-size: 33px;
  }
  .header-info h5 {
    font-size: 22px;
  }
  .price-txt {
    width: 55%;
  }
  .price-sunset {
    width: 160%;
  }
}
@media(max-width: 1080px){
  .house::before {
    background-size: 135%;
  }
}
@media(max-width: 1030px){
  .house::before {
    background-size: 145%;
    background-position: 0% 0%;
  }
  .price-sunset {
    width: 200%;
  }
}
@media(max-width: 991px){
  .header-info h1 {
    font-size: 27px;
  }
  .header-info h5 {
    font-size: 20px;
  }
  .price-txt {
    width: 55%;
  }
  .price-txt p {
    font-size: 25px;
  }
  .price-txt h6 {
    fot-size: 30px;
  }
  .house::before {
    background-size: 155%;
    background-position: 0% -10%;
  }
  .sunset-slider-txt h3 {
    font-size: 40px;
  }
  .amenites-icon-row {
    flex-wrap: wrap;
  }
  .amenites-icon {
    width: 30%;
  }
  .amenites-icon:nth-child(1), .amenites-icon:nth-child(2), .amenites-icon:nth-child(3) {
    margin-bottom: 30px;
  }
}
@media(max-width: 900px){
  .house::before {
    background-size: 155%;
    background-position: 0% 0%;
  }
  .price-txt, .price-sunset {
    width: 100%;
  }
}
@media(max-width: 880px){
  .house::before {
    background-size: 185%;
    background-position: 10% -20%;
  }
}
@media(max-width:767px){
  .header-txt img{
    margin-bottom: 30px;
  }
  .header h4{
    margin: 30px auto 10px;
  }
  .header h6{
    margin-bottom: 40px;
  }
    .flower1 img,
    .flower2 img{
      display: none;
    }
  .section2{
    padding-bottom: 0;
  }
  .amenity{
    display: flex !important;
    margin-bottom: 0;
  }
  .sunset-header {
    text-align: center;
  }
  .price-sunset {
    width: 300px;
    margin: 30px auto 40px auto;
  }
  .price-txt {
    margin: 0 auto;
  }
  .header-info h1 {
    font-size: 32px;
  }
  .house .container {
    margin-top: 40px;
    margin-bottom: 40px;
  }
  .amenites-icon-row {
    margin: -20px 0 50px 0;
  }
  .price-txt {
    width: 100%;
  }
  .house::before {
    background-size: 155%;
    background-position: 10% 100%;
  }
}
@media(max-width: 600px){
  .sunset-slider-txt h3 {
    font-size: 36px;
  }
  .amenities p, .sunset-slider-txt p {
    font-size: 16px;
    max-width: 90%;
    text-wrap: balance;
  }
}
@media(max-width: 550px){
  .section2{
    padding-top: 160px;
  }
  .amenities{
    padding-left: 20px;
    padding-right: 20px;
    text-wrap: balance;
  }
  .header-txt h1{
      font-size: 40px;
    text-wrap: balance;
  }
  .header-content{
      padding-top: 20px;
      padding-bottom: 40px;
  }
  .sunset-slider-txt h3 {
    font-size: 32px;
  }
}
@media(max-width: 525px){
  .header-info h1 {
    font-size: 28px;
  } 
}
@media(max-width: 475px){
  .header-info h1 {
    font-size: 25px;
  } 
  .sunset-slider-txt h3 {
    font-size: 26px;
  }
  .amenites-icon p {
    font-size: 16px;
  }
}
@media(max-width: 414px){
  .header-info h1 {
    font-size: 24px;
  } 
}
@media(max-width: 390px){
  .header-info h1 {
    font-size: 26px;
  } 
}
@media(max-width: 375px){
  .price-sunset {
    width: 100%;
  }
  .amenites-icon {
    width: 45%;
  }
}
@media(max-width: 335px){
  .header-info h1 {
    font-size: 25px;
  } 
  .header-info h5 {
    font-size: 18px;
  }
}