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

h1,h2,h3,h4,h5,h6{
    font-family: 'Cormorant Infant';
}
p{
    font-family: 'Quicksand';
}

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

/* 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;
   }


.carousel-1{
    background: url('../img/hero-horizont-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-2{
    background: url('../img/hero-horizont-1.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('../img/hero-horizont.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%;
}


.room-box-slider-1{
    background: url('../img/sdr-2.jpg'),rgb(255,255,255) linear-gradient(180deg, rgba(255,255,255,0) 38%, rgb(14, 44, 54) 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    height: 65vh;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
  
}

.room-box-slider-1:hover{
    background: url('../img/sdr-2.jpg'),rgb(255,255,255) linear-gradient(180deg, rgba(255,255,255,0) 38%, rgb(14, 44, 54)90%) ;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
  
    
}

.room-box-slider-2{
    background: url('../img/suite1.jpg'),rgb(255,255,255) linear-gradient(180deg, rgba(255,255,255,0) 38%, rgb(14, 44, 54) 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    height: 65vh;
    border-radius: 10px;
  
}


.room-box-slider-2:hover{
    background: url('../img/suite1.jpg'),rgb(255,255,255) linear-gradient(180deg, rgba(255,255,255,0) 38%, rgb(14, 44, 54)90%) ;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
  
    
}

.room-box-slider-3{
    background: url('../img/double-1.jpg'),rgb(255,255,255) linear-gradient(180deg, rgba(255,255,255,0) 38%, rgb(14, 44, 54) 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    height: 65vh;
    border-radius: 10px;
  
}

.room-box-slider-3:hover{
    background: url('../img/double-1.jpg'),rgb(255,255,255) linear-gradient(180deg, rgba(255,255,255,0) 38%, rgb(14, 44, 54)90%) ;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
  
    
}

.room-box-slider-4{
    background: url('../img/junior-1.jpg'),rgb(255,255,255) linear-gradient(180deg, rgba(255,255,255,0) 38%, rgb(14, 44, 54) 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    height: 65vh;
    border-radius: 10px;
  
}

.room-box-slider-4:hover{
    background: url('../img/junior-1.jpg'),rgb(255,255,255) linear-gradient(180deg, rgba(255,255,255,0) 38%, rgb(14, 44, 54)90%) ;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
  
    
}


.room-desc{
    color: white;
    position: absolute;
    bottom: 2%;
    padding: 0em;
}


.room-spec:hover{
    transform: rotateX(360deg);
    transition-duration: 0.8s;
    
}

.book-icon{
    border: 4px solid  transparent;
    transition-duration: 0.2s;
}
.room-spec:hover .book-icon{
   border: 4px solid #f0aa72;
   transition-duration: 0.2s;
}


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

  #beach-banner{
    background: url('../img/sunset.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;
    background-color: white;
    border-radius: 6px;
    padding: 2em;
    height: 30vh;
  }

  .score-box-content{
   
    width: 100%;
  }

  .apos-circle{
    background-color: #e49951;
    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;
  }

  .conference-room{
    background: url('../img/conference.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;
    }
  }

  #room-head{
    background: url('../img/suite3.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;
  }


  .room-specs-1,.room-specs-2,.room-specs-3,.room-specs-4{
    border: 1px solid #cccccc8f;
    padding: 2em;
    border-radius: 10px;
    height: 55vh;
    position: relative;
    transition-duration: 0.3s;
  }

  .room-btn{
    background-color: #f0aa72;
    color: white;
    font-family: 'Quicksand';
    display: block;
   width: fit-content;
    right: 0;
  }

  .room-btn:hover{
    background-color: #e49951;
    color: white;
  }

  .room-row-1:hover .room-specs-1,.room-row-2:hover .room-specs-2,.room-row-3:hover .room-specs-3,.room-row-4:hover .room-specs-4{
    background-color: white;
    
    transition-duration: 0.3s;
  }

 

  .room-img-1{
    background: url('../img/room-1.jpg');
    height: 100%;
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    border-radius: 10px;
  }

  
  .room-img-2{
    background: url('../img/room-2.jpg');
    height: 100%;
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    border-radius: 10px;
  }

  .room-img-3{
    background: url('../img/room-3.jpg');
    height: 100%;
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    border-radius: 10px;
  }

  .room-img-4{
    background: url('../img/room-4.jpg');
    height: 100%;
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    border-radius: 10px;
  }

  #gallery-head{
    background: url('../img/bar-restaurant.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('../img/hero-horizont-3.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;
  }