@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {
  --color-primary: #5ec576;
  --color-secondary: #ffcb03;
  --color-tertiary: #ff585f;
  --color-primary-darker: #4bbb7d;
  --color-secondary-darker: #ffbb00;
  --color-tertiary-darker: #fd424b;
  --color-primary-opacity: #5ec5763a;
  --color-secondary-opacity: #ffcd0331;
  --color-tertiary-opacity: #ff58602d;
  --gradient-primary: linear-gradient(to top left, #39b385, #9be15d);
  --gradient-secondary: linear-gradient(to top left, #ffb003, #ffcb03);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
  transition: all 0.3s ease-in-out;
}
body {
  position: relative;
  z-index: 0;
  background-color: #000000;
  margin: 0;
  color: #f39e00;
  padding: 0;

  /* line-height: 1.9; */
}

.loader {
  position: fixed;

  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #000000f1;

  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 300;
}
.loader .spinner {
  position: fixed;

  width: 10rem;
  height: 10rem;
  border: 2rem solid rgba(0, 0, 0, 0.678);
  border-top: 2rem solid rebeccapurple;
  border-radius: 50%;
  /* z-index: 301; */
  animation: spin 0.69s linear infinite;
}
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

.section {
  border-bottom: 0.1rem solid #ddd;
  transition: transform 1s, opacity 1s;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}
.fixed {
  position: fixed;
}

/* about us */
#section--2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  max-height: 150rem;
  overflow: hidden;
  font-size: 1.5rem;
  flex-wrap: wrap;
  position: relative;
  background-color:#02A9EA;
  padding-top: 10rem;
}
#section--2 p{
color: white;
}
.section2_imgfloat {
  position: relative;
  width: 100rem;

  padding: 2rem;
}
.booking-float {
  position: relative;

  transform: translateY(6rem);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-height: 25rem;
  z-index: 100;
}
form {
  background-color: rgba(3, 49, 47, 0.308);
  border-radius: 0.3rem;
  position: absolute;
  display: flex;

  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  padding: 3rem;
  flex-wrap: wrap;
}
.form-inp {
  flex: 1 1 calc(33.333% - 10px); 
  border-radius: 0.4rem;
  border: solid gray 0.1rem;
  border-color: rgb(87, 87, 87);
  height: 3rem;
  max-width: 20rem;
  margin: 1rem;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  font-size: 1rem;
  background: rgb(186, 233, 241);
}
form #submitBtn {
  background: #1e96fc;
    flex: 1 1 calc(33.333% - 10px); 
  border-radius: 0.4rem;
  border: solid gray 0.1rem;
  border-color: rgb(87, 87, 87);
  height: 3rem;
  max-width: 20rem;
  margin: 1rem;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  font-size: 1rem;
  border: none;
  border: solid white 0.1rem;
  transition: all ease-in-out 0.3s;
}

form #submitBtn:hover {
  background: rgb(0, 0, 0);
  color: rgb(209, 206, 221);
}



@media screen and (max-width: 678px) {
  .booking-float {
    transform: translateY(13rem);
  }

  form {
    background-color: rgba(3, 49, 47, 0.308);
    border-radius: 0.3rem;
    position: absolute;
    display: flex;

    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    padding: 3rem;
    flex-wrap: wrap;
    width: 26rem;
  }
}
.date-input {
  border: 2px solid #007bff !important;
  background-color: #f0f0f0 !important;
  color: #333 !important;
  padding: 10px !important;
  font-size: 16px !important;
  border-radius: 5px !important;
}

.section2_imgfloat img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  border-radius: 0.69rem;
}
.section__title2 {
  padding: 1rem;
  padding-left: 3rem;
  width: 40rem;
}
.section__title2 p {
  padding-top: 5rem;
  line-height: 3rem;
}
.section--2_float {
  position: absolute;
  max-width: 25rem;
  height: 25rem;
  right: -5%;
  bottom: 6%;
  line-height: 3rem;
  background-color: #333;
  border-radius: 2%;
  padding: 1rem;
  text-shadow: 0 5px 10px rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5);
}

@media screen and (max-width: 1536px) {
  #section--2 {
    font-size: 1.2rem;
  }
  #section--2 p {
    font-size: 1.3rem;
  }
  .section2_imgfloat {
    position: relative;
    min-width: none;
    padding: 1.5rem;
  }

  .section2_imgfloat img {
    min-width: none;
    width: 32rem;
    object-fit: cover;
    border-radius: 0.69rem;
  }
  .section--2_float {
    max-width: 16rem;
    height: 20rem;
    right: 0;
    left: 30%;
    bottom: 8%;
    margin: 1rem;
    line-height: 2rem;
  }
}

@media screen and (max-width: 678px) {
  #section--2 {
    font-size: 1.2rem;
  }
  #section--2 p {
    font-size: 1.3rem;
  }
  .section2_imgfloat {
    position: relative;
    min-width: none;
    padding: 1.5rem;
  }

  .section2_imgfloat img {
    min-width: none;
    width: 32rem;
    object-fit: cover;
    border-radius: 0.69rem;
  }
  .section--2_float {
    max-width: 16rem;
    height: 20rem;
    right: 0;
    left: 50%;
    bottom: 8%;
    margin: 1rem;
    line-height: 2rem;
  }
}
/* perks */
#section--4 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding: 2rem;
  background: linear-gradient(225deg, #fffeffff, #02a9eaff, #02a9eaff, #faff00ff);

  overflow: hidden;
}
.perks {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap: wrap;

  align-items: center;
  gap: 5rem;
  max-width: 128rem;
}
.perk {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 38rem;
  height: 28rem;
  background-color: transparent;
  border: 0.2rem solid rgb(223, 223, 223);
  transition: all 0.25s;
  position: relative;
}

.perk img {
  width: 6.9rem;
  mix-blend-mode: color-burn;
  object-fit: contain;
  transition: transform 0.25s ease;
  filter: brightness(0);
}

.perk:hover {
  background-color: #faff00ff;
}
.perk:hover img {
  animation: flippa 1s linear 1;
}
@keyframes flippa {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

.perk-cont {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;

  text-shadow: 0 3px 10px rgb(0, 0, 0);
  color: white;
}

.serv-num {
  position: absolute;
  top: -2.1rem;
  right: 10%;
  width: 4rem;
  height: 4rem;
  overflow: hidden;
  border: 0.2rem solid rgb(223, 223, 223);
  background-color: white;
  transform: rotate(45deg);
  border-radius: 10%;
  font-size: 2.3rem;
}
.serv-num p {
  position: absolute;
  text-align: center;
  padding-top: 0.8rem;
  padding-left: 0.55rem;
  transform: rotate(-45deg);
}

@media screen and (max-width: 678px) {
  .perk {
    width: 35rem;
    height: 25rem;
  }
  .serv-num p {
    font-size: 2rem;
  }
  #section--4 .section__title {
    padding: 0;
    padding-top: 1rem;
  }
  #section--4 .section__header {
    font-size: 2.9rem;
  }
}

/* nearby places */
#section--6 {
  background-color: #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 3rem;
  flex-direction: column;
  justify-content: space-evenly;
  padding-bottom: 3rem;
}
#section--6 h3 {
  text-shadow: none;
}
.nearby {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  max-width: 128rem;
  gap: 5rem;
  flex-wrap: wrap;
}
.place {
  max-height: 47rem;
  width: 34rem;
  background-color: white;
  overflow: hidden;
}
.img-cont_nearby {
  overflow: hidden;
  max-height: 25rem;
  max-width: 34rem;
}

.img-cont_nearby img {
  height: 25rem;
  width: 34rem;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.place img:hover {
  transform: scale(1.3);
}
.text-cont_nearby {
  padding: 1rem;
}
.text-cont_nearby h2 {
  font-size: 1.3rem;
  line-height: 2rem;
}
.read-more {
  padding: 1.5rem;
  border: none;
  background-color: white;
  transition: all 0.5s ease;
}

.read-more:hover {
  color: orange;
}

/* gallary */
#section--7 {
  padding-top: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;

  background: linear-gradient(
    to top left,
    #39e4d6fa,
    #0eafcc,
    #1e71d1,
    #0d2bd6
  );
}
#section--7 .section__header {
  font-size: 2.8rem;
}
.gallary {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  gap: 4rem;
  max-width: 125rem;

  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pic {
  width: 34rem;
  height: 34rem;
  overflow: hidden;
}
.pic img {
  width: 34rem;
  height: 34rem;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.pic img:hover {
  transform: scale(1.2);
}
.view-more {
  min-width: 13rem;
  min-height: 5rem;
  border-radius: 2.5rem;
  padding: 0.5rem;
  background: transparent;
  border-style: solid;
  border-width: 0.1rem;
  border-color: #000000;
  margin: 3rem;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.view-more::before {
  content: "";
  height: 5rem;
  border-radius: 2.5rem;
  width: 0;
  position: absolute;
  top: 0;
  left: 0;

  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(251, 255, 2, 0.507) 100%
  );
  transition: 0.5s ease;
  display: block;
  z-index: 0;
}
.view-more:hover::before {
  width: 13rem;
}
.view-more:active::before {
  width: 13rem;

  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.514) 0%,
    rgba(12, 26, 231, 0.5) 100%
  );
}
.view-more:hover {
  color: white;
  border-color: white;
}

.section--hidden {
  opacity: 0;
  transform: translateY(8rem);
}

.section__title {
  max-width: 80rem;
  margin: 0 auto 8rem auto;
}

.section__description {
  font-size: 1.7rem;
  font-weight: 600;
  text-transform: uppercase;
  color: white;
  margin-bottom: 1rem;
  text-shadow: 0 5px 10px rgb(0, 0, 0);
}

.section__header {
  font-size: 3rem;
  line-height: 1.3;
  font-weight: 500;
  text-shadow: 0 5px 10px rgb(0, 0, 0);
}
.btn {
  display: inline-block;
  background-color: var(--color-primary);
  font-size: 1.5rem;
  font-family: inherit;
  font-weight: 500;
  border: none;
  padding: 1.25rem 4.5rem;
  border-radius: 10rem;
  cursor: pointer;
  transition: all 0.3s;
}

.btn:hover {
  background-color: var(--color-primary-darker);
}

.btn--text {
  display: inline-block;
  background: none;
  font-size: 1.6rem;
  font-family: inherit;
  font-weight: 500;
  color: var(--color-primary);
  border: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  cursor: pointer;
  transition: all 0.3s;
}

/* OPERATIONS */

#section--3 {
  padding-top: 3rem;
  padding-bottom: 3rem;
  padding-left: 2rem;
  padding-right: 2rem;
  max-height: 75rem;
  min-height: 75rem;
  background-color: #02A9EA;
  overflow: hidden;
}
.operations {
  max-width: 100rem;
  margin: 12rem auto 0 auto;
  position: relative;
}


.operations__tab-container {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  background: rgba(92, 92, 92, 0.5);
}

.operations__tab {
  margin-right: 2.5rem;
  transform: translateY(-50%);
}

.operations__tab span {
  margin-right: 1rem;
  font-weight: 600;
  display: inline-block;
}

.operations__tab--1 {
  background-color: #000300;
  color: #fffeff;
}

.operations__tab--1:hover {
  background-color:  #faff00;

    color:  #000300;
}

.operations__tab--2 {
  background-color:  #000300;
    color: #fffeff;
}

.operations__tab--2:hover {
  background-color:  #faff00;
  color:  #000300;
}


.operations__tab--3 {
  background-color:  #000300;
    color: #fffeff;
  margin: 0;
}

.operations__tab--3:hover {
  background-color:  #faff00;
  color:  #000300;
}

.operations__tab--active {
  transform: translateY(-66%);
    background-color:  #02A9EA;

      color: #000300;
}

.operations__tab--active:hover {

    background-color:   #faff00;

   
}

.operations__content {
  display: none;
  position: relative;
  /* JUST PRESENTATIONAL */
  font-size: 2rem;
  padding: 1rem 5rem 4.5rem 5rem;
}

.operations__content--active {
  display: grid;
  grid-template-columns: 7rem 1fr;
  column-gap: 3rem;
  row-gap: 0.5rem;

}

.operations__header {
  font-size: 2.5rem;
  font-weight: 500;
  align-self: center;
  color: rgb(0, 0, 0);
  text-shadow: 0px 5px 10px black;
}


.operations__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  height: 7rem;
  width: 7rem;
  border-radius: 50%;
  z-index: 1;
}

.operations__icon img {
  height: 7rem;
  width: 7rem;

  border-radius: 50%;
}
.operations__content h5 {
  z-index: 1;
}
.operations__content p {
  z-index: 1;
  grid-column: 2;
  color: white;
  text-shadow: 0 5px 10px black;
}
.serv_back-img {
  z-index: 0;
  position: absolute;
  max-width: 100rem;
  height: 38rem;
  width: 100%;
  margin: 12rem auto 0 auto;
  object-fit: cover;
  top: -12rem;
  opacity: 1;
}
.operations__icon--1 {
  background-color: var(--color-secondary-opacity);
}
.operations__icon--2 {
  background-color: var(--color-primary-opacity);
}
.operations__icon--3 {
  background-color: var(--color-tertiary-opacity);
}
.operations__icon--1 svg {
  fill: var(--color-secondary-darker);
}
.operations__icon--2 svg {
  fill: var(--color-primary);
}
.operations__icon--3 svg {
  fill: var(--color-tertiary);
}



.roomPerk{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

color: rgb(0, 0, 0);
width: 18rem;
height: 18rem;
z-index: 100;
padding: 1rem;
margin: 2rem;
border-radius: .2rem;
  border: solid .1rem rgb(255, 255, 255);
background: #02a8ea9f;
font-weight: 600;
transition: all .25s ease-in-out;
}

.roomPerk:hover{

background: #fbff0093;
border: solid .1rem #fbff0093;

}
.roomPerk .price{
  border: solid .1rem rgb(255, 255, 255);
margin-top: 1rem;
background-color: #00000094;
padding: .2rem .5rem;
color: rgb(255, 255, 255);
transition: all .5s ease-in-out;
      }
.roomPerk .price:hover{
background-color:  #02a8ea9f;
color: #000300;
 border: solid .1rem #02a8ea9f;
      }


.roomDes{
      
      background-color: #0000006c;
      padding: .5rem;
font-size: 1.5rem;

}


@media screen and (max-width: 650px) {
  /* .operations {
    display: none !important;
  } */

  .btn {
    display: inline-block;

    font-size: 0.9rem;

    padding: 0.69rem 1.5rem;
    border-radius: 2rem;
  }

  .btn--text {
    display: inline-block;
    background: none;
    font-size: 0.69rem;

    color: #faff00;
  }
  .operations__header {
    font-size: 1.2rem;
      color: #faff00;

  }
  p {
    font-size: 1rem;
  }


.roomPerk{

width: 10rem;
height: 10rem;
padding: .2rem;
margin-top: 3rem;
  border: solid .1rem rgb(255, 255, 255);
font-size: 1rem;
font-weight: 500;
}
.roomPerk .price{

margin-top: .5rem;

padding: .25rem .169rem;
font-size: 1rem;

      }


.roomDes{
    
      background-color: #0000006c;
      padding: .25rem;
font-size: 1rem;

}




}













/* SLIDER */
#section--5 {
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: #02a8ea;
}

.slider {
  max-width: 100rem;
  height: 60rem;
  margin: 0 auto;
  position: relative;

  /* IN THE END */
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  width: 100%;
  height: 50rem;
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
border: solid .1rem rgb(255, 255, 255);
  /* THIS creates the animation! */
  transition: transform 1s;
}

.slide > img {
  /* Only for images that have different size than slide */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider__btn {
  position: absolute;
  top: 50%;
  z-index: 10;
  transition: all 0.5s ease;
  border: none;
  background: rgba(214, 214, 214, 0.5);
  font-family: inherit;
  color: #333;
  border-radius: 50%;
  height: 5.5rem;
  width: 5.5rem;
  font-size: 3.25rem;
  cursor: pointer;
}

.slider__btn--left {
  left: 6%;
  transform: translate(-210%, -210%);
  opacity: 0;
  transition: transform 0.69s, opacity 0.69s;
}

.slider__btn--right {
  right: 6%;
  transform: translate(210%, -210%);
  opacity: 0;
  transition: transform 0.69s, opacity 0.69s;
}
#section--5:hover .slider__btn--left {
  transform: translate(-50%, -50%);
  opacity: 1;
}
#section--5:hover .slider__btn--right {
  transform: translate(50%, -50%);
  opacity: 1;
}
.dots {
  position: absolute;

  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.dots__dot {
  border: none;
  background-color: #5c5c5c;
  opacity: 0.7;
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
  margin-right: 1.75rem;
  cursor: pointer;
  transition: all 0.5s;

  /* Only necessary when overlying images */
  /* box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.7); */
}

.dots__dot:last-child {
  margin: 0;
}

.dots__dot--active {
  /* background-color: #fff; */
  background-color: #ffffff;
  opacity: 1;
}

/* TESTIMONIALS */
.testimonial {
  width: 65%;
  position: relative;
}

.testimonial__header {
  font-size: 2.25rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.testimonial__text {
  font-size: 1.7rem;
  margin-bottom: 3.5rem;
  color: #666;
}

.testimonial__author {
  margin-left: 3rem;
  font-style: normal;

  display: grid;
  grid-template-columns: 6.5rem 1fr;
  column-gap: 2rem;
}

.testimonial__photo {
  grid-row: 1 / span 2;
  width: 6.5rem;
  border-radius: 50%;
}

.testimonial__name {
  font-size: 1.7rem;
  font-weight: 500;
  align-self: end;
  margin: 0;
}

.testimonial__location {
  font-size: 1.5rem;
}

.section__title--testimonials {
  margin-bottom: 4rem;
}

@media screen and (max-width: 650px) {
  .slider {
    max-width: 100rem;
    height: 59rem;
    margin: 0 auto;
    position: relative;

    /* IN THE END */
    overflow: hidden;
  }

  .slide {
    position: absolute;
    top: 0;
    width: 100%;
    height: 52rem;
    background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* THIS creates the animation! */
    transition: transform 1s;
  }
  .slider__btn {
    display: none;
  }
  .slider__btn--left {
    left: 8%;
  }

  .slider__btn--right {
    right: 8%;
  }
  .testimonial__header {
    font-size: 2rem;
  }
  .testimonial__text {
    font-size: 1.5rem;
  }

  .testimonial__name {
    font-size: 1.3rem;
  }

  .testimonial__location {
    font-size: 1.1rem;
  }
}