*{
    margin:0px;
    padding:0px;
    box-sizing:border-box;
}

body{
    font-size:16px;
    overflow-x:hidden;
}

::selection{
    color:whitesmoke;
    background-color:grey;
}

/*NAV BAR*/

nav{
    display:flex;
    justify-content:space-around;
    align-items:center;
    height:8vh;
    background-color:rgb(96, 0, 0);
    font-family:'Poppins', sans-serif;
    letter-spacing:2px;
    text-transform:uppercase;
    font-size:14px;
}

.logo{
    display:flex;
    flex-direction:row;
    color:whitesmoke;
    align-items:center;
    cursor:pointer;
}

.logo img{
    height:7vh;
    width:auto;
}

.nav_links{
    display:flex;
    justify-content:space-around;
    width:50%;
}

.nav_links li{
    list-style:none;
}

.nav_links a{
    color:rgb(233, 233, 233);
    text-decoration:none;
    padding: 4px 4px 4px 4px;
    border-radius:3px;
    transition:0.5s;
}

.nav_links a:hover{
    background-color:rgb(253, 240, 219);
    color:rgb(96, 0, 0);
    transition:ease-in 0.5s;
}

.burger{
    display:none;
    cursor:pointer;
  
}

.burger_line{
    width:25px;
    height:2px;
    margin:7px;
    background-color:whitesmoke;
}

/*-----------ABOUT-------------*/

.large_object{
    height:90vh;
    width:100vw;
}

#about{
    display:flex;
    flex-direction:row;
}

#about h1{
    font-family:'Poppins', sans-serif;
    font-size:40px;
}

.about_left{
    background:linear-gradient(to bottom right, rgb(34, 34, 34), rgb(79, 79, 79));
    height:100%;
    width:50%;

    display:flex;
    justify-content:center;
    align-items:center;
}

#about_txt{
    color:whitesmoke;
    font-family:'Lora', serif;
    letter-spacing:2px;
    padding-left:5vw;
    padding-right:5vw;
}

#about_txt p{
    line-height:1.6;
}

.about_pics{
    width:50vw;
    height:90vh;
}

/* Hide the images by default */
.mySlides {
    display: none;
  }
  .mySlides img {
    width:50vw;
    height:90vh;
    display: block;
    object-fit:cover;
    object-position:center;
  }

  
  /* Next & previous buttons */
  .prev,
  .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    width: auto;
    padding: 20px;
    color: whitesmoke;
    font-weight: bold;
    font-size: 24px;
    border-radius: 0 8px 8px 0;
    background: rgba(96,0,0, 0.5);
    user-select: none;
  }
  .next {
    right: 0;
    border-radius: 8px 0 0 8px;
  }
  .prev:hover,
  .next:hover {
    background-color: rgba(96,0,0, 0.7);
  }
  
  .dots-container {
   position:absolute;
    bottom: 30px;
    left: 78%;
    transform: translate(-78%);
  }
  
  /* The dots/bullets/indicators */
  .dots {
    cursor: pointer;
    height: 20px;
    width: 20px;
    margin: 0 4px;
    background-color: rgba(96,0,0, 0.2);
    backdrop-filter: blur(2px);
    border-radius: 50%;
    border:rgba(233,233,233,0.3) 1px solid;
    display: inline-block;
    transition: background-color 0.3s ease;
  }
  .active,
  .dots:hover {
    background-color: rgba(96,0,0, 0.8);
  }
/*----------------about end -------------*/

/*---------ROOMS--------------*/
#rooms_page{
    width:100vw;
    height:120vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

#rooms_page h1{
    background-color:rgb(96,0,0);
    color:whitesmoke;
    font-family:'Poppins', sans-serif;
    text-transform:uppercase;
    letter-spacing:3px;
    margin-bottom:2vh;
    padding: 3px 6px 3px 6px;
    font-weight:lighter;
}

.rooms_grid{
    width:100%;
    height:auto;
    display:grid;
    grid-template-columns:repeat(4,25%);
}

.room{
    /*
    display:flex;
    flex-direction:column;
    */
    display:grid;
    grid-template-rows:30% 10% 53% 7%;
    justify-content:center;
    border:rgba(0,0,0,0.2) solid 1px;
    border-radius:5px;
    margin: 20px 20px 20px 20px;
}

.room img {
    /*height:25vh;*/
    height:100%;
    width:21vw;
    object-fit:cover;
    object-position:center;
    transition:1s;
}

.room img:hover{
    opacity:0.8;
    transition:1s;
}
.roomhead{
    display:flex;
    flex-direction:column;
    align-items:center;
    color: rgb(96,0,0);
    margin-top:2vh;
    

}

.roomhead h2 /*Room name*/{
    font-family: 'Poppins', sans-serif;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:18px;
    text-align:center;
    
   
}

.roomhead h3 /*Pricing information*/{
    font-size:14px;
    font-family:'Poppins',sans-serif;
}

.roominfo {
    display:flex;
    align-items:center;
    font-family:'Lora',serif;
    font-size:18px;
    padding-left:4vw;
    padding-right:4vw;
    padding-top: 3vh;
    padding-bottom:3vh;

}

.roominfo li{
    margin-top: 1vh;
}

.room button{
    width:100%;
    height: 5vh;
    background-color:rgb(96,0,0);
    color:rgb(255, 242, 222);
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 3px;
    border:none;
    cursor:pointer;
    transition:0.7s;
}

.room button:hover{
    background-color:rgb(254, 248, 238);
    color:rgb(96,0,0);
    transition:0.7s;
}
/*----------------------ROOMS END-------------------------*/

#facilities{
    height:60vh;
    background: linear-gradient(rgb(96,0,0), rgb(61,0,0));
    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
    align-items:center;
    color:whitesmoke;

}

#facilities h1{
    font-family:'Poppins',sans-serif;
    text-transform:uppercase;
    letter-spacing:3px;
    font-weight:lighter;
    
}

.fcts_lists{
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
    width: 50%;
    font-family: 'Lora', serif;
    font-size:18px;
    padding-bottom:3vh;
}

.fcts_lists li{
    margin-top:1vh;
    list-style:none;
}

/*------------CONTACT------------*/
#contact{
    width:100vw;
    height:60vh;
    background-image:url("images/ktm3.jpg");

    background-size:cover;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content: space-evenly;
}

#contact h1{
    background-color:rgb(96,0,0);
    color:whitesmoke;
    font-family:'Poppins', sans-serif;
    text-transform:uppercase;
    letter-spacing:3px;
    font-weight:lighter;
    padding: 3px 6px 3px 6px;
    
}

#contact li{
    list-style:none;
    color:rgb(34, 34, 34);
    background-color:rgba(245,245,245,0.8);
    padding-left:3px;
    padding-right:3px;
    font-family:'Lora', serif;
    font-size:23px;
    margin-bottom:1vh;
    text-align:center;
    letter-spacing:2px;
  
}

/*-----------FOOTER---------*/
footer{
    height:10vh;
    background-color: rgb(96,0,0);
    color:whitesmoke;
    padding-top:1vh;
    padding-bottom:1vh;
    font-size: 12px;
    font-family:'Lora',serif;
    letter-spacing:2px;
    text-transform:uppercase;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

/*-------------------------------------MOBILE STYLING-----------------------------------*/
@media screen and (max-width:768px){
    body{
        overflow-x:hidden;
    }
    /*-----------NAVBAR-----------*/

    .nav_links{
        display: flex;
        flex-direction:column;
        position:absolute;
        right:0px;
        width:40vw;
        height:0vh;
        top:8vh;
        background-color:rgb(96,0,0);
        align-items:center;
        transition:1s;
    }

    .nav_links li{
        display:none;
    }
    .burger{
        display:block;
    }
    /*------------NAVBAR END----------*/

    /*-------ABOUT-----------*/
    #about{
        flex-direction:column;
    }

    .about_left{
        height:45vh;
        width:100%;
    }

    #about_txt{
        padding-left:10vw;
        padding-right:10vw;
    }
    
    #about_txt h1{
        font-size:25px;
    }

    #about_txt p{
        font-size:13px;
    }

    .about_pics{
        height:45vh;
        width:100%;
    }

    .mySlides img {
        width:100%;
        height:45vh;
    }

    .prev, .next{
        top:78%;
        transform: translate(0, -78%);
    }

    .dots-container{
        left:50%;
        transform:translate(-50%);
        bottom: 40px;
    }
    /*---------ABOUT END--------*/
    /*-------ROOMS-------*/
    #rooms_page{
        height:auto;
        padding-top:5vh;
    }

    .rooms_grid{
        grid-template-columns: repeat(1, 100%);
        grid-template-rows: repeat(4,auto);
    }

    .room img{
        width:90vw;
    }
    .roomhead h2{
        font-size:24px;
    }

    .roominfo{
        justify-content:center;
        font-size:22px;
    }

    /*--------ROOMS END-----------*/
    /*-------FACILITIES-------*/
    .fcts_lists{
        width:90%;
        font-size:14px;
    }
    /*-------contact----------*/
    #contact li{
        font-size:14px;
    }
}

@media screen and (max-width:400px){
    #about_txt p{
        font-size:11px;
    }
}

/*--------MOBILE STYLE END ---------*/
.nav_active{
    height:30vh;
    transition: 1s;
}

.nav_active li{
    display:initial;
}