@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&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;
}   

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

/* End Animations*/

.navbar{
    background-color: white!important;
    box-shadow: none!important;
}

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

h1,h2,h3,h4,h5,h6{
    font-family: 'Fairplay Display';
}

p{
    font-family: 'Roboto';
}

.navbar li a{
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 14px;
    text-transform: uppercase;
    color: black;
    letter-spacing: 4px;
}

.navbar li a.active{
    color: #39afcf!important;
}
#hero{
    background: url('/img/hero-2.jpg')rgba(0, 0, 0, 0.021);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    height: 85vh;
    display: flex;
    align-items: center;
}
.book-btn{
    background-color: #39afcf;
    font-family: 'Roboto';
    color: white;
    border-radius: 0px;
    width: 80%;
    padding: 1em 1em;
    font-size: 20px;
    border: 2px solid #39afcf;
}

.book-btn:hover{
    color: #39afcf;
    border: 2px solid #39afcf;
}

.checkin-row{
    background-color: white;
    margin-top: -5em;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.first-btn{
    background-color: white;
    border-radius: 40px;
    padding: 0.7em 3em;
    border: 1px solid black;
    font-size: 16px;
}

.first-btn:hover{
    background-color: white;
    border-radius: 40px;
    padding: 0.7em 3em;
    border: 1px solid black;
    font-size: 16px;
}

.stat-box{
    background-color: #39afcf;
    padding: 1em 2em;
    width: 150%;
    text-align: center;
    margin-left: -5em;
}

.room-box{
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    color: rgb(216, 216, 216);
}

.room-box-2{
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.sec-btn{
    background-color: #62c2cc;
    border-radius: 40px;
    padding: 0.7em 3em;
    border: 1px solid transparent;
    font-size: 14px;
    color: white;
    font-family: 'Roboto';
}

.sec-btn:hover{
    background-color: white;
    border-radius: 40px;
    padding: 0.7em 3em;
    border: 1px solid #62c2cc;
    font-size: 14px;
    color: #62c2cc;
}

.banner{
    background: url('../newimg/Double room with sofa bed only for children.jpg')rgba(0, 0, 0, 0.541);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    height:50vh;
    display: flex;
    align-items: center;
    margin: 5em 0em;
}

.pre-footer{
    background: url('../newimg/Double room with sofa bed only for children1.jpg'),linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(79,143,167,0) 100%);
   
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    height: 60vh;
    display: flex;
    align-items: center;
}

footer p{
    color: rgb(153, 153, 153);
}

footer a{
    color: rgb(224, 224, 224);
}

/* facilities in home */


.facilities-section{
  background: url('../img/fac-back.jpg') rgba(20, 19, 19, 0.768);
  background-attachment: fixed;
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  padding-top: 100px;
  padding-bottom: 100px;
  text-align: center;

}
.facility-box{
  background: rgba(202, 202, 202, 0.795);
  padding: 30px;
  border: #b7893200 1px solid;
}
.facility-box:hover{
  background: #208c9baf;
  color: rgb(255, 255, 255);
  border: #3291b7 1px solid;
  transition: 0.3s ease-in-out;


}

.Testimonials{
    background: url('../img/bunner.jpg') rgba(0, 0, 0, 0) ;
    background-position: center 70%;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
    padding-top: 100px;
    padding-bottom: 100px;
}
.review-boxes{
    background-color: #39AFCF;
    color: #ffffff;
    padding: 0 25px;
    padding-top: 60px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    
    transition-duration: 0.5s;
    height: 400px;

}

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

.Testimonials h6{
    color: #00000094;
}
#rooms-head{
    background: url('../newimg/679624342.jpg')rgba(0, 0, 0, 0.473);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    height: 60vh;
    display: flex;
    align-items: center;
}


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

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

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


@media only screen and (max-width: 900px) {
    .check-col{
        padding: 10px!important;
    }
    .about-col{
        padding: 2em 1.4em!important;
    }
    .img-move{
        margin:1em 0em!important;
        width: 100%!important;
        
    }
    section{
        padding: 2em 0em!important;
    }
    .stat-box{
        display: none!important;
    }
    .room-box,.room-box-2{
        margin: 1em 0em;
    }
  }