@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;
    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;
   }

   .contact-btn-2:hover{
    color: white!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;
    }
  }

 .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;
  }