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

 .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, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  }

/*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.6s 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: "Cinzel";
}

p{
    font-family: 'Martel';
    font-size: 18px;
}

.navbar{
    padding: 10px 0;
    box-shadow: none;
    background-color: rgba(0, 0, 0, 0.863);
}

.navbar li a{
    font-family: "Cormorant Garamond";
    font-size: 19px;
    margin: 0 10px;
    color: #ab6034;
    font-weight: 700;
}

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

.navbar li a:hover{
    color: white;
}

.book-btn{
    background-color: #ab6034;
    border-radius: 0;
    padding: 15px 60px;
    color: white;
    border: 2px solid #ab6034;
    font-family: Syne;
    font-size: 15px;
}


.book-btn:hover{
    background-color: transparent;
    border: 2px solid #ab6034;
    color: white;
}


.book-btn-2{
    background-color: #ab6034;
    border-radius: 0;
    padding: 15px 60px;
    color: white;
    border: 2px solid #ab6034;
    font-family: Syne;
    font-size: 15px;
}


.book-btn-2:hover{
    background-color: transparent;
    border: 2px solid #ab6034;
    color: black;
}



#background-video {
    
    width: 100vw;
    height: 85vh;
    object-fit: cover;
    position: relative;
   
    z-index: -1;
    
  }

.video-row{
   margin-top: -50vh;
}

.home-row{
    background-color: #1d1b1a;
    color: white;
    text-align: center;
    padding: 10px 0;
    
}

.facility-box{
    background-color: white;
    text-align: center;
    margin: 0px 20px;
    padding: 20px 15px;
}

.facility-box:hover{
    background-color: #1d1b1a;
    transition-duration: 0.4s;
}

.facility-box:hover .facility-name{
    color: white;
    transition-duration: 0.4s;
}

.about-center-img{
    border-radius: 50%;
    height: 400px;
    border: 10px solid white ;
    transition-duration: 0.5s;

    
}

.about-center-img:hover{
    position: relative;

    transform: translateY(-20px);
    transition-duration: 0.5s;
    border: 10px solid white;
    
}

.about-left-img{
   width: 300px;
   border: 2px solid transparent;
   transition-duration: 0.5s;
 
}



.about-right-img{
    width: 300px;
  margin-left: -100px;
  border: 5px solid white;
  position: relative;
  z-index: 200;
}


.about-btn{
    margin-top: 8vh;
    
    background: linear-gradient(24deg, rgba(171,96,52,1) 30%, rgba(255,255,255,1) 37%);
    color: white;
    padding:  14vh 20vh 2vh 2vh;
    text-align: center;
    border-radius: none;
    box-shadow: none;
    font-family: Cormorant Garamond;
    font-size: 16px;
}

.about-btn:hover{
    box-shadow: none!important;
    
    background: linear-gradient(24deg, rgba(171,96,52,1) 40%, rgba(255,255,255,1) 100%);
    transition-duration: 0.5s;
    color: white;
    
}

.bordered-text{
    border-left: 2px solid #ab6034;
    padding-left: 20px;
    margin: 30px 0;
}


#rooms{
    background: url('../img/rooms-bg.png');
    background-size: cover;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
  }

.room-row:hover hr{
    border-top: 1px solid #000000;
}

.room-row:hover .room-title{
    color: #ab6034;
    text-decoration: underline;
}

.room-row:hover .fa-arrow-right-from-bracket{
    color: #ab6034!important;
}

a{
    color: black;
}

.room-box{
    width: 450px;
    background-color: #ab6034;
    color: white;
    padding: 25px;
    margin-top: -100px;
    position: relative;
    z-index: 200;
}

#gallery{
    background: url('../img/gallery-bg.jpg')rgba(0, 0, 0, 0.663);
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    padding: 120px 0;
}

.gallery-box{
    background-color: #ab6034;
    height: 520px;
    margin-right: -100px;
    padding-right: 120px;
    padding-left: 25px;
}

.gallery-slide{
    border: 3px solid white;
    padding: 0;
}

#services{
    background: url('../img/testimonials.svg');

    padding: 120px;
}


.card{
    border-radius: 0px!important;
    box-shadow: 10px 12px #724a3656;
}

.btn-services{
    background-color: #ab6034;
    width: 100%;
    border-radius: 0;
    padding: 15px 0;
    color: white;
}

.service-card{
    transition-duration: 0.6s;
}

.service-card:hover{
    box-shadow: 0px 0px;
    transform: translateX(12px);
    transform: translateY(10px);
    transition-duration: 0.6s;
}

#testimonials{
    background-size: cover;
background-color: #ffffff;
padding-bottom: 100px;
}

.review-box{
    background-color: #e9e5e5ec;
    color: #000000;
    padding: 25px;
    transition-duration: 0.5s;

}

.review-box:hover{
    background-color: #ffffff;
    transition-duration: 0.5s;
}

#footerbanner{
    background: url('../img/footerbanner.jpg')rgba(0, 0, 0, 0.463);
    background-size: cover;
    background-blend-mode: multiply;

    background-attachment: fixed;
    background-position: 0% 70%;
    height: 600px;
    display: flex;
    align-items: center;
}


#footer{
    background: url('../img/testimonials.svg');
    background-color: #1d1b1a;
}

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

    .about-left-img{
        margin: 0px;
        width: 100%;
    }

    .about-btn{
        background-color: #ab6034!important;
        width: 100%;
        height: 40px;
        margin: 20px 0;
        background: none;
        padding:  1vh 0vh 1vh 0vh;
    }
    .about-center-img{
        display: none;
    }
    .about-right-img{
        margin: 0;
        width: 100%;
        margin-bottom: 20px;
    }

    .room-box{

        margin: 0;
        width: 100%;
    }

    .gallery-box{
        padding: 20px;
        height: 100%;
    }
    #services{
        padding: 20px;
    }
    .card{
        margin: 20px 0px;
    }
    .review-box{
        margin: 3vh 0vh;
    }
    
  }


  .room-card:hover{
    background-color: #ab6034d2;
  }


  .room-card:hover h3,.room-card:hover p{
    color: white;
    
  }
  .room-card:hover .btn{
    background-color: white;
  }


  #rooms-banner{
    background: url('../img/room-banner.jpg')rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    height: 500px;
  }

  #rooms{
    padding: 60px 0;
  }

  #gallery-banner{
    background: url('../img/gallery-banner.jpg')rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    height: 500px;
  }

  #about-banner{
    background: url('../img/about-banner.jpg')rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    height: 500px;
  }

  #contact-banner{
    background: url('../img/footerbanner.jpg')rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    height: 500px;
  }