@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Quicksand:wght@300..700&family=Rasa:ital,wght@0,300..700;1,300..700&display=swap');

/*Animations*/
.fadeinleft {
  opacity: 0;
  transform: translateX(200px);
  transition: all 1.3s ease-out;
}

.fadeinright {
  opacity: 0;
  transform: translateX(-200px);
  transition: all 0.8s ease-out;
}

.fadeindown {
  opacity: 0;
  transform: translateY(-100px);
  transition: all 1.2s ease-out;
}

.fade-in {
  opacity: 0;
  transition: all 1.3s ease-in;
}

.active-left,
.active,
.active-right,
.active-down {
  opacity: 1;
  transform: translateX(0);
  transform: translateY(0);
}

.fadein {
  opacity: 0;
}

/* End Animations*/
html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
  background-color: #11161C !important;
  color: white !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Cormorant Infant';
  color: white !important;

}

p {
  font-family: 'Quicksand';
  color: rgb(255, 255, 255) !important;

}

.side-lines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

.line-left,
.line-right {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom,
      transparent 0%,
      #ffffff 20%,
      #ffffff 80%,
      transparent 100%);
}

.line-left {
  left: 2%;
}

.line-right {
  right: 2%;
}

/* Responsive */
@media (max-width: 768px) {
  .line-left {
    left: 3%;
  }

  .line-right {
    right: 3%;
  }
}

.navbar {
  /* From https://css.glass */
  /* From https://css.glass */
  background: rgba(44, 44, 44, 0.164) !important;
  margin-bottom: -12vh;
  z-index: 10;
  box-shadow: none !important;
  backdrop-filter: blur(15px);
}

.navbar li {
  margin: 0em 1em;
  padding: 1em 0em;
}

.navbar li a {
  color: white;
  font-family: 'Cormorant Infant';
  font-size: 18px;
  font-weight: 200;
  text-transform: uppercase;
}

.navbar li a.active {
  color: #e9ccb1 !important;
}

.navbar li a:hover {
  color: #e9ccb1;
}

footer {
  padding-top: 100px;
  padding-bottom: 0px;
  background: #11161C;
}

.line-text {
  display: flex;
  align-items: center;
  gap: 20px;
}

.line {
  flex-grow: 1;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.547);
}

span {
  white-space: nowrap;
}

.footer-links {
  display: flex;
  font-family: 'Jost', sans-serif;
  font-size: 18px;
}

.copyright {
  text-align: end;
}

/* From Uiverse.io by ernestnash */
.contact-btn {
  display: inline-block;
  padding: 0.5rem 1.8rem;
  font-size: 18px;
  font-weight: 700;
  color: white;
  border: 1px solid rgb(218, 218, 218);
  cursor: pointer;
  position: relative;
  background-color: transparent;
  text-decoration: none;
  overflow: hidden;
  z-index: 1;
  font-family: 'Cormorant Infant';
  text-transform: capitalize !important;
  box-shadow: none;
}

.contact-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #e9ccb1;
  transform: translateX(-100%);
  transition: all .3s;
  z-index: -1;
  color: white !important;

  text-transform: capitalize !important;

}

.contact-btn:hover::before {
  transform: translateX(0);
  color: white !important;
}

.contact-btn:hover {
  color: rgb(27, 27, 27);
}



.contact-btn-2 {
  display: inline-block;
  padding: 0.5rem 1.8rem;
  font-size: 18px;
  font-weight: 700;
  /* color: black!important; */
  color: white !important;
  border: 1px solid rgb(218, 218, 218);
  cursor: pointer;
  position: relative;
  background-color: transparent;
  text-decoration: none;
  overflow: hidden;
  z-index: 1;
  font-family: 'Cormorant Infant';
  text-transform: capitalize !important;
  box-shadow: none;
}

.contact-btn-2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #f0aa72;
  transform: translateX(-100%);
  transition: all .3s;
  z-index: -1;
  color: white !important;

  text-transform: capitalize !important;

}

.contact-btn-2:hover::before {
  transform: translateX(0);
  /* color: white!important; */
  color: black !important;
}

.contact-btn-2:hover {
  color: black !important;
}

.room-32 .container-fluid {
  max-width: 1810px;
}

.room-32 {
  padding-top: 100px;
  padding-bottom: 70px;
  background-color: #181818;
}

.para-rooms {
  background-color: white;
  width: 98%;
  height: 410px;
  border-radius: 20px;
}


.carousel-1 {
  background: url('../image/SuitewithBalcony-6.jpg')rgba(0, 0, 0, 0.4);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  display: flex;
  height: 100vh;


}


.carousel-2 {
  background: url('../image/SuitewithBalcony-3.jpg')rgba(0, 0, 0, 0.4);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  display: flex;
  height: 100vh;


}


.carousel-3 {
  background: url('../image/DeluxeDoubleRoomwithBalcony-2.jpg')rgba(0, 0, 0, 0.4);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  display: flex;
  height: 100vh;


}

.carousel-caption {
  bottom: 40%;
}

.main-btn i {
  transition-duration: 0.3s;

}

.main-btn:hover i {

  color: #36302A !important;
  transition-duration: 0.3s;

}

.main-btn:hover {
  background-color: #c9a161;
  color: #36302A;
  transition-duration: 0.3s;
}

/* Minimal custom CSS */
.room-card {
  margin: 15px;
}

.room-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.btn-primary-1 {
  background-color: #36302A;
  color: #f2f2ec;
}

.cta {
  border: none;
  background: none;
  cursor: pointer;
}

.cta span {
  padding-bottom: 7px;
  letter-spacing: 4px;
  font-size: 14px;
  padding-right: 15px;
  text-transform: uppercase;
  font-family: 'Quicksand';
}

.cta svg {
  transform: translateX(-8px);
  transition: all 0.3s ease;
}

.cta:hover svg {
  transform: translateX(0);
}

.cta:active svg {
  transform: scale(0.9);
}

.hover-underline-animation {
  position: relative;
  color: black;
  padding-bottom: 20px;
}

.hover-underline-animation:after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #153d4b;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.cta:hover .hover-underline-animation:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.card1 {
  background-color: transparent;
  box-shadow: none;
  border: 1px solid #ffffff;
  color: #14241e;
}

.card1:hover {
  background-color: #836d6d;
  box-shadow: none;
  border: 1px solid #00000037;
  color: white !important;
}

.active1 {
  background-color: #ffffff;
  box-shadow: none;
  color: #000000 !important;
}

.text-tutu {
  color: #000000 !important;
}

.active1 .card-text-0 {
  color: #000000 !important;
}

/* Try making it more specific */
.active1 .card.card-text-0:hover {
  color: #ffffff !important;
}

.card-title-1 {
  color: #ffffff !important;
}

.image-hover-wrapper {
  position: relative;
  height: 100px;
  padding: 10px;
  width: fit-content;
}

.image-hover-wrapper img {
  position: absolute;
  margin-left: 50px;
  height: 80px;
  width: auto;
}

.hover-img {
  opacity: 0;
}

.default-img {
  opacity: 1;
}

.card:hover .image-hover-wrapper .hover-img {
  opacity: 1;
}

.card:hover .image-hover-wrapper .default-img {
  opacity: 0;
}

#booknow {
  background: url("/assets/new_Photos/9.jpeg") rgba(0, 0, 0, 0.3);
  background-size: cover;
  background-blend-mode: multiply;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-origin: border-box;
  height: 700px;
  display: flex;
  align-items: center;
  position: relative;
  color: white;
}


#beach-banner {
  background: url('../image/SuitewithBalcony-3.jpg'), rgb(255, 255, 255) linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(32, 32, 32, 1) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-blend-mode: multiply;
  height: 60vh;
}

.score-box {
  width: 100%;
  display: flex;
  text-align: center;
  justify-content: center;
  border-radius: 6px;
  padding: 2em;
  height: 30vh;
}

.score-box-content {

  width: 100%;
}

.apos-circle {
  color: white;
  height: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: fit-content;
  border-radius: 50%;
  padding: 1.5em 2em;
  margin-top: -3.3em;
  margin-left: -4.5em;
  position: relative;
  z-index: 109;
  border: 12px solid #f2f2ec;
}

.reviews {
  margin-left: -6em;
  position: relative;
  z-index: 100;
  background: #e0e3e47a;
  border-radius: 5px;

  backdrop-filter: blur(20.3px);
  -webkit-backdrop-filter: blur(11.3px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  height: 30vh;
  padding: 2em;
}

.card-title-1-0 {
  color: #000000 !important;
}

.conference-room {
  background: url('../image/DeluxeDoubleRoomwithBalcony.jpg'), rgb(255, 255, 255) linear-gradient(180deg, rgba(255, 255, 255, 0) 38%, rgba(9, 27, 32, 1) 78%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  height: 50vh;
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  display: flex;
  align-items: end;
}


.sec-btn {
  font-family: 'Quicksand';
  color: white;
  border-bottom: 2px solid white;
  border-radius: 0px;
  margin: 0;
  margin-bottom: 1em;
  padding: 0;
}

.sec-btn:hover {
  border-bottom: 2px solid white;
  padding: 0em 0.5em;
  transition-duration: 0.4s;
}


.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

@media only screen and (max-width: 965px) {
  .navbar {
    background-color: #153d4b !important;
  }

  .item {
    margin: 1em;
  }

  .bar-rest {
    padding-top: 0em !important;
  }

  .img-resize {
    margin: 0em !important;
  }

  .apos-circle {
    margin: 0em;
    margin-left: 7em;
    margin-top: -3em;
    margin-bottom: -3em;
  }

  .reviews {
    margin-left: 0em;
    height: 40vh;

    padding-top: 4em;
  }

  .powered-by {
    display: flex;
    justify-content: start !important;
  }

  .beach-banner {

    background-attachment: scroll;
  }

  .navbar-nav .dropdown-menu {
    position: relative;
  }
}

.section-bg1 {
  background: url('../image/DeluxeDoubleRoomwithBalcony-4.jpg'), rgba(0, 0, 0, 0.348);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-blend-mode: multiply;
  padding-top: 150px;
  padding-bottom: 150px;
  text-align: center;
  color: white;
}

#gallery-head {
  background: url('../image/SuitewithBalcony-5.jpg')rgba(0, 0, 0, 0.45);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  height: 60vh;
  display: flex;
  align-items: center;
}

.photos img {
  border-radius: 5px;
}

#about-head {
  background: url('../img/suite2.jpg')rgba(0, 0, 0, 0.45);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  height: 60vh;
  display: flex;
  align-items: center;
}


#contact-head {
  background: url('../image/JuniorSuitewithBalcony-5.jpg')rgba(0, 0, 0, 0.45);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  height: 60vh;
  display: flex;
  align-items: center;
}

.contact-grid {
  background-color: white;
  height:
    25vh;
  padding: 3em;
  border-radius: 10px;
}