/**********************************************/
                              /* DESKTOP */
                /**********************************************/
@media (834px < width) {

.content {
  position: absolute;
  max-width: 1600px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 8%;
  width: 90%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  align-items: center;
  animation: fadeIn 4s ease-in forwards;
}

/**********************************************/
              /* HERO SECTION */
/**********************************************/
              /* Hero Text Box */
/**********************************************/

.hero-text-box {
  display: grid;
  grid-template-rows: 1fr .5fr 3.25fr 5.5fr 2fr;
  row-gap: 0rem;
  height: 80%;
  align-content: center;
}

.hero-img-box {
  display: flex;
  align-items: center;
  position: relative;
  height: 90%; 
  animation-name: moveToLeft;
  /* -webkit-animation: moveToLeft 3s; */
  animation-duration: 4s;
}

.heading{
  text-align: center;
}

.heading-primary  {
  font-size: clamp(3.8rem, 0.65rem + 3.5vw, 7rem);
  font-weight: 700;
  color: transparent;  
  background-image: linear-gradient(
    to top,
    rgb(16, 139, 2) 0%,
    rgb(5, 204, 194) 100%
  );
  -webkit-background-clip: text; 
  text-decoration: none; 
  cursor: pointer; 
}

#weather-container {
  color: #777;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: auto; 
}

#weather-icon {
    width: 50px;
    height: 50px;
    margin-right: 20px;
    filter: drop-shadow(5px 5px 7px rgba(0, 0, 0, 0.6))
}

#weather-info { 
    font-size: clamp(1.8rem, 2vw + -.5rem, 2.5rem);
    font-weight: 500;
}

#temp-div {
    display:flex;
    justify-content: center;
    font-size: clamp(1.8rem, 2vw + -1rem, 2.5rem);
    margin-left: 20px;
}

.paragraphs{
  display: grid;
  place-items: center;
}

.paragraph-style {
  color: #777;
  font-family: 'Dosis', Tahoma, Geneva, Verdana, sans-serif;
  font-size: clamp(2rem, 1rem + 1.0vw, 5rem);
  line-height: clamp(2.4rem, 1.802vw + 0.897rem, 3.6rem);
  letter-spacing: normal;
  /* animation-name: fadeIn;
  animation-duration: 2s;
  animation-fill-mode: backwards;
  animation-delay: 4s; */
}

.links {
  align-content: center;
}

.link-format {
  display: flex;
  align-items: center;
}

.pineapple {
  position: relative;
  height: 5rem;
  width: 4rem;
  padding-right: 0rem;
  animation-name: fadeInSpin;
  animation-duration: 2s;
  animation-timing-function: ease;
}

.accomodations-btn:hover,
.accomodations-btn:active {
  padding-left: 1.75rem; 
}

.property-btn:hover,
.property-btn:active {
  padding-left: 1.5rem; 
}

.dining-btn:hover,
.dining-btn:active {
  padding-left: 1.25rem; 
}

.golf-btn:hover,
.golf-btn:active {
  padding-left: .75rem; 
}

.adventures-btn:hover,
.adventures-btn:active {
  padding-left: 1.5rem; 
}

.transportation-btn:hover,
.transportation-btn:active {
  padding-left: 1.75rem; 
}

.renters {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 1.6rem;
  justify-self: start;
  padding-top: 1rem;
  /* animation-name: fadeIn;
  animation-duration: 2s;
  animation-fill-mode: backwards;
  animation-delay: 4s; */
}

.renter-images {
  display: flex;
}

.renter-images img {
  height: 5rem;
  width: 5rem;
  border-radius: 50%;
  margin-right: -1.6rem;
  border: 3px solid #e8ddcb;
}

.renter-images img:last-child {
  margin-right: 0;
}


        /**********************************************/
                      /* Carousel Section */
        /**********************************************/

.carousel-container {
  position: absolute;
  width: 100%;
  margin-top: 10rem;
}

.carousel {
  align-content: center;
}

#accomodations-carousel {
  animation-name: fadeIn;
  animation-duration: 4s;
}

#property-carousel {
  animation-name: ;
  animation-duration: 4s;
}

#dining-carousel {
  animation-name: fadeIn;
  animation-duration: 4s;
}

#golf-carousel {
  animation-name: fadeIn;
  animation-duration: 4s;
}

#adventures-carousel {
  animation-name: fadeIn;
  animation-duration: 4s;
}

figure {
  padding-top: 1.5rem;
}

figure > img {
  box-shadow: 1px 3px 8px 8px rgba(0, 0, 0, 0.1);
}

figcaption {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  justify-content: center;
  align-items: center;
  font-family: 'Dosis', Helvetica, sans-serif;
  font-size: 2.8rem;
  padding-top: clamp(0.5rem, 2.252vw + -1.378rem, 2rem);
}

.img2 {
        box-shadow: 1px 2.5px 5px 5px rgba(0, 0, 0, 0.2);
    }

.btn-photo-map {
  border: none;
  background: none;
  cursor: pointer;
}

.map-description, .photo-description {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.icon-photo-map {
  height: 3rem;
  opacity: .5;
  margin-right: 0;
}

.map-text, 
.photo-text{
  display: flex;
  margin-left: 0;
  align-items: center;
  font-size: clamp(1.0rem, .75rem + .5vw, 1.8rem);
  line-height: .75;
  color: #777;
}

.description1, .description2, .description3 {
  display: flex;
  justify-content: center; 
  text-align: center; 
  color: #777;
  
}

.description2{
  font-size: clamp(2rem, 0.8562rem + 1.3vw, 2.5rem);
  font-weight: 500;
}

.description3{
  opacity: 0;
}


        /**********************************************/
                      /* Transportation Section */
        /**********************************************/

.transportation-container {
  display: flex;
  height: 80%;
  width: 100%;
  align-items: center;
  /* margin-top: 20%; */
  animation-name: moveToLeft;
  animation-duration: 2s;
}

.transportation-grid{
  display: grid;
  grid-template-columns: auto auto;
  gap: 2rem;
  height: 100%;
  width:100%;
}

.airlines,
.cars {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
}

.airlines > a,
.cars > a{
  text-decoration: none;
}

.transportation-container-content {
  display: grid;
  grid-template-columns: 1fr 2fr;
  height: 80%;
  width: 100%;
  justify-items: center; 
  align-items: center; 
  box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.4);
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 1rem 2rem 1rem 1rem;
  /* text-overflow: clip; */
}

.transportation-icon{
  max-width: 60%;  
}

.transportation-text {
  height: 60%;
}

.icons{
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  display: none;
}

.send-icon,
.car-icon {
  display: flex;
  /* justify-content: center; */
  margin-left: auto;
  width: 50%;
  float: right;
}

.rating{
  display: flex;
  align-items: center;
  float: right;
  width: 20%;  
  display: none;
 }

 .fa-star {
  color: #777;
}

.checked {
  color: rgb(255, 94, 1);
}


.CTA{
  /* position: absolute; */
  float: right;
  margin-top: 5rem;
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-fill-mode: backwards;  
}

        /**********************************************/
                      /* Reviews Section */
        /**********************************************/ 

.heading-secondary-reviews { 
  font-size: clamp(4rem, 2.0vw + 1.5rem, 5.6rem);
  font-weight: 700;
   background-image: linear-gradient(
    to top,
    rgb(16, 139, 2) 50%,
    rgb(5, 204, 194) 100%
    /* rgb(196, 115, 38) 100% */
      );
  
  /* text-shadow: 1px 2px 15px rgba(0, 0, 0, 0.15); */
  -webkit-background-clip: text;
  color: transparent;
  transition: all 0.2s;
  padding-bottom: 1rem;  
}

.renters-container {
  display: grid;
  grid-template-rows: 2fr 3fr 3fr 3fr;
  place-items: center;
  height: 90%;
  width: 100%;
  animation-name: moveToLeft;
  animation-duration: 2s;
  /* animation-delay: 3s; */
}

.renters-container-content { 
  max-width: 100%;
  /* margin: 1.6rem auto; */
  box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.4);
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  padding: 2rem 3rem 0.25rem 5rem;
  font-size: 1.6rem;
  transform: skewX(-12deg);
}

.renters-img-shape {
  width: 10rem;
  height: 10rem;
  padding-top: 0rem;
  float: left;
  -webkit-shape-outside: circle(50% at 50% 50%);
  shape-outside: circle(45% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
  transform: translateX(-3rem) skewX(12deg);
}

.renters-img-shape > img {

}

.story-text {
  transform: skewX(12deg);
  /* padding-bottom: 2rem; */
  padding-bottom: 1rem;
}

.heading-tertiary {
  font-family: Dosis, sans-serif;
  color: #8c8c8c;
  font-size: clamp(1.2rem, 1.5vw, 1.8rem);
  font-weight: 700;
  text-transform: uppercase;
}

.renters-paragraph-style {
  font-family: 'Dosis', Helvetica, sans-serif;
  font-size: clamp(1.2rem, 1.5vw, 1.8rem);
  margin-bottom: 1.0rem;
  font-weight: lighter;
  letter-spacing: clamp(1.1px, 1.2vw, 1.5px);
  line-height: clamp(1.2rem, 1.6vw + .21rem, 2rem);
  height: clamp(5rem, 5vw, 8rem);
  color: #333;
  overflow: auto;
}

/* .renters-paragraph-style::-webkit-scrollbar{
  display: none;
} */

.testimonial-name {
  font-family: Arial, Helvetica, sans-serif;
  color: #777;
  float: right;
  padding-right: clamp(2rem, 4vw, 6rem);
  margin-bottom: 1rem;
  font-size: clamp(1.25rem, 1.5vw, 2rem);
}


/**********************************************/
               /* POPUP */
/**********************************************/

.popup {
  height: 100vh;
  min-height: 100dvh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.9);
  overflow: hidden;
  z-index: 9999;
  display: none;
}

.popup-content {
  position: relative;
  width: 75%;
  height: 75%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  background-image: url(/img/BookingBackground.webp);
  background-size: cover;
  Set background-repeat: no-repeat;
  background-position: right;
  border-radius: 6px;
  overflow: hidden;
}


/**********************************************/
              /* POPUP RIGHT */
/**********************************************/

.popup-content-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 100%;
  clip-path: polygon(18% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.popup-content-right-inset {
  display: grid;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    -75deg,
    rgba(19, 121, 91, 0.9) 0%,
    rgba(19, 121, 91, 0.9) 100%,
    transparent 100%
  );
  justify-items: center;
  z-index: 1;
  /* display: hide; */
}

.popup-content-right-inset-content {
  font-size: clamp(1.3rem, 1.55vw, 2.2rem);
  color: #e8ddcb;
  display: grid;
  grid-template-rows: auto auto auto auto auto auto auto .5fr auto;
  justify-content: center;
  align-content: center;
  gap: clamp(0%, .5%, 1%);
  height: 100%;
  width: 70%;
  font-family: Arial, Helvetica, sans-serif;
}

.popup-content-right-inset-cost,
.popup-content-right-inset-administrative,
.popup-content-right-inset-cleaning,
.popup-content-right-inset-damage,
.popup-content-right-inset-services,
.popup-content-right-inset-tax,
.popup-content-right-inset-totalcost {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-gap: 2rem;
  padding-top: 1rem;
}

.cost-label,
.administrative-label,
.cleaning-label, 
.damage-label, 
.guest-label,
.tax-label,
.totalcost-label {
 width: 71%;
 text-align: right;
}

.totalcost-label {
 padding-top: 1rem;
}

#cost,
#administrative,
#cleaning,
#damage,
#services,
#tax {
  width: 28%;
  text-align: right; 
}

#totalcost {
  width: 25%;
  text-align: right;
  border-top: #e8ddcb solid 2px;
  padding-top: 1rem;
}

.disclosure {
  align-content: center;
  /* font-size: clamp(1rem, 1.5vw, 2rem); */
  line-height: clamp(1.6rem, 1.9vw, 2.8rem);
}


/**********************************************/
              /* POPUP LEFT */
/**********************************************/


.book-form {
  
  width: 90%;
  height: 100%;
  padding: 0% 0% 0% 12%;  
  align-content: center;
}

.book-form  .heading-secondary {
    font-size: clamp(3rem, 3.1vw, 6rem);
    background-image: linear-gradient(
    to top,
    rgb(16, 139, 2) 1%,
    rgb(5, 204, 194) 99%
    ); 
  -webkit-background-clip: text;
  color: transparent;
  transition: all 0.2s; 
}

#form {
  display: grid;
  height: 100%;
  width: 100%;
  grid-template-rows: 13% 12% 12% 6% 40% 6%;
  gap: 1%;
  align-items: center;
 
  /* align-items: start; */
  /* align-items: end; */
  /* justify-items: center; */
  /* justify-items: stretch; */
  /* justify-items: start; */
  /* justify-items: end; */
  /* justify-content: stretch; */
  /* justify-content: center; */
  /* justify-content: space-between; */
  /* align-content: center; */
  /* align-content: space-between; */
  /* align-content: start; */
  /* align-content: end; */
}


.form-group-radio{ 
        display: flex;
        gap: 10%;
        width:90%;      
        /* margin:  auto; */
        align-content: center;
}

.form-group-calendars {
  /* align-self: self-start; */
}

.form-group {
  font-family: Arial, Helvetica, sans-serif; 
  /* background-color: #e65c2e; */
}

.form-group:not(:last-child) {
  /* margin-bottom: 2rem; */
}

.form-group-nextStep-tablet {
  display: block;
}

.form-group-nextStep-mobile {
  display: none;
}

.form-input {
  font-size: 16px;
  color: inherit;
  padding: 1.6rem 2rem;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  border-bottom: 3px solid transparent;
  width: 93%;
  display: block;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s;
}

.form-label {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.2rem, 1.2vw, 1.4rem);
  font-weight: 500;
  margin-left: 2rem;
  margin-top: 0.7rem;
  display: block;
  transition: 0.3s;
  color: #777;
}

.form-input:placeholder-shown + .form-label {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4rem);
}

.form-input:focus {
  outline: none;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
  border-bottom: 3px solid #13795b;
}

.form-input:focus:invalid {
  border-bottom: 3px solid #e65c2e;
}

.form-radio-group {
  width: 49%;
  display: flex;
  align-content: center;
  /* display: inline-block; */
  /* margin-top: 8%; */
}

.form-radio-input {
  display: none;
}

.form-radio-label {  
  color: #777;
  font-size: clamp(1.4rem, 1.6vw, 1.8rem);
  cursor: pointer;
  position: relative;
  padding-left: clamp(2.5rem, 2.8vw, 4rem);
}

.form-radio-button {
  height: clamp(2rem, 2.5vw, 3rem);
  width: clamp(2rem, 2.5vw, 3rem);
  border: 5px solid #13795b;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  left: 0;
  top: -0.6rem;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.form-radio-button::after {
  content: "";
  display: block;
  height: 1.3rem;
  width: 1.3rem;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #13795b;
  opacity: 0;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  transition: opacity 0.2s;
}

.form-radio-input:checked ~ .form-radio-label .form-radio-button::after {
  opacity: 1;
}

.form-group-calendars {
  display: flex;
  width: 100%;
}

#datepicker{
  width: 100%;
  align-items: center;
}

.ui-datepicker { 
  font-size: clamp(1.4rem, 1.5vw, 1.6rem);
  
}

.dates{
  width: 100%;
  padding-top: 1rem;
  font-size: 1.4rem;
  color: #777;
  display: grid;
  grid-template-rows: 1fr 1fr;
}

.dateHeaders{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-left: 1rem;
}

.dateValues{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-left: 1rem;
}

.form-input-calendar {
  display: none;
}


/**********************************************/
              /* MAHALO */
/**********************************************/

.popup-content-left, .mahalo {
  position: absolute;
  top: 0;
  left: 0;
  width: 55%;
  height: 100%;
  background-image: linear-gradient(100deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.8) 95%,rgba(255, 255, 255, 0.2) 100%,
      transparent 70%);
  clip-path: polygon(0% 0%, 100% 0%, 82% 100%, 0% 100%); 
}

.mahalo {
  display: none;
}

.mahalo-content {
  display: grid;
  grid-template-rows: 1fr 3.5fr 1fr;
  gap: 1%;
  height: 100%;
  width: 80%;
  justify-content: center;
  align-items: center;
  padding: 0% 5% 0% 12%;  
}



.heading-mahalo {
  font-size: clamp(3.8rem, 4.55vw, 6.8rem);
  align-self: self-end;
  background-image: linear-gradient(
            to top,
            rgb(16, 139, 2) 50%,
            rgb(5, 204, 194) 100%
            /* rgb(196, 115, 38) 100% */
            );  
        -webkit-background-clip: text;
        color: transparent;
}

.mahalo-text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.4rem, 1.67vw, 2.4rem);
  color:#555;
  line-height: 1.4;
}

::-webkit-input-placeholder {
  color: #999;
}

}