html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

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

h1,h2,h3,h4,h5,h6{
    font-family: Cormorant Garamond;
}

p{
    font-family: 'Montserrat Alternates';
    font-size: 19px;
}

.navbar li{
    margin: 0 6px;
}

.navbar li a{
    font-family: 'Martel';
    position: relative;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.navbar li a:hover,.navbar li a.active{
    border-bottom: 2px solid red;
}




.book-btn{
    background-color: rgb(196, 19, 19);
    border: 1px solid black;
    padding: 8px 25px;
    color: white;
    position: relative;
    z-index: 1;
}

.book-btn::after{
    content: '';
    top: 0;
    left: 0;
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 200ms ease-in;
}

.book-btn:hover::after{
    transform: scaleX(1);
    transform-origin: left;
    background-color: rgb(97, 8, 8);
    
}


.carousel-1{
    background: url('../photos/Photo (4).JPG')rgba(0, 0, 0, 0.35);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
    height: 760px;
}

.carousel-2{
    background: url('../photos/Photo (44).jpg')rgba(0, 0, 0, 0.35);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
    height: 760px;
}

.carousel-3{
    background: url('../photos/Photo (7).jpg')rgba(0, 0, 0, 0.35);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
    height: 760px;
}

.carousel-caption{
    bottom: 38%;
}

#about-home{
    padding: 120px 0;
    background: url('../img/pattern_2.png');
    background-size: 30%;
    background-position: top right;
    background-repeat: no-repeat;
}

.facility-box{
    border: 2px solid rgba(238, 226, 226, 0.849);
    padding-top:  20px;
    background-color: rgba(219, 219, 219, 0.075);
    
}
.facility-box:hover{
    box-shadow: 10px 15px rgba(255, 255, 255, 0.356);
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 10px, rgba(255, 255, 255, 0.82) 0px 15px 12px;    transition-duration: 0.4s;
}

.link-btn{
    border: 1px solid rgb(122, 36, 36);
    border-radius: 0;
    width: 150px;
    padding: 12px 20px;
}


.about-img-sm{
    margin-left: 60px;
    position: relative;
    z-index: 1;
    border-radius: 8%;
    border: 4px solid white;
}

.about-img-big{
    position: relative;
    z-index: 0;
    border-radius: 8%;
    border: 4px solid white;
}

@media only screen and (max-width: 687px) {

    .carousel-1,.carousel-2,.carousel-3{
        height: 600px;
    }

    .carousel-caption{
        bottom: 30%;
    }


    .about-img-sm,.about-img-big {
     margin: 0;
     width: 320px!important;
     padding: 15px 0;
    }
  }


  #home-banner{
    margin-top: 40px;
    background: url('../photos/Photo (23).JPG')rgba(0, 0, 0, 0.35);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    height: 460px;
  }

  .banner-content{
    margin-top: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
  }

#home-rooms{
    padding: 120px 0;
    background: url('../img/pattern_3.png');
    background-size: 40%;
    background-position: bottom left;
    background-repeat: no-repeat;

}

.card{
    border-radius: 0px!important;
}
  

#facilities{
    background: url('../photos/Photo (14).jpg')rgba(0, 0, 0, 0.55);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
   
    background-blend-mode: multiply;
}

.fa-star{
    color: rgb(126, 13, 13);
}


#footer{
    background-color: rgb(41, 41, 41);
}

#room-head{
    height: 300px;
    display: flex;
    align-items: center;
}

#rooms{
    margin-bottom: 100px;
}

.card{
    border: 1px solid rgba(0, 0, 0, 0.322);
}

.contact-box{
    border: 1px solid rgb(224, 224, 224);
    box-shadow: 10px 10px rgb(168, 168, 168);
 }