/*Import the fonts used*/
@font-face {
    font-family: Gotham-Font;
    src:local("C:\Users\ryana\OneDrive\Desktop\Cloned Repository\Hotel-Website\Gotham-Font");
}
@import url('https://fonts.googleapis.com/css?family=Courgette|Open+Sans:400,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@300&family=Open+Sans+Condensed:wght@300&display=swap');
/*Basic reset*/
*,
*::before ,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*Custom properties*/
:root {
     --darkblue:rgba(32, 64, 81);
    --transparent-darkblue:rgba(32, 64, 81,0.9);
    --dark-color:#393e46;
}
/*Styling */
/*Global Styles*/
html{
    font-size: 10px;
}
body{
    font-family: "Open Sans", sans serif;
    font-size: 1.7rem;
    color: var(--dark-color);
}
.dot {
  height: 9px;
  width: 9px;
  background-color:var(--darkblue);
  border-radius: 50%;
  display: inline-block;
}

.hvr-grow {
    display: inline-block;
    vertical-align: middle;
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: transform;
}

.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
    transform: scale(1.1);
}
a{
    text-decoration: none;
    color: inherit;
}
ul{
    list-style: none;
}
section{
    padding: 5rem;
}
/*Reusable styles*/
.container{
    height: auto!important;
    width: 100%;
    max-width: 120rem;
    padding: 0 1.5rem;
    margin: 0 auto;
}


/*Header styling*/
.header{
    width: 100%;
    height: 6rem;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    background:var(--darkblue);
    z-index: 999;
    transition: all 0.75s;
}
.header a{
    padding: 16px;
}
.header.active{
    background-color:var(--transparent-darkblue);
}
/* Navigation styles-nav*/
.nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo img {
max-width: 120px;
height: 40px;
margin-left: 0;
margin-right: 2px;
transform: translate(-100rem);
animation: slidein 1s forwards;
}
.hamburger-menu{
    font-size: 2.7rem;
    color: #fff;
    cursor: pointer;
    position: relative;
    z-index: 1500;
}
}
.hamburger-menu .fa-times{
    display: none;
}
.menu-open .hamburger-menu .fa-times{
display: block;
}
.menu-open .hamburger-menu .fa-bars{

display: none;
}

.nav-list{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    z-index: 1400;
    opacity: 0;
    transform: scale(0);
    transition: opacity .5s; 
}
.menu-open .nav-list{  
    opacity: 1;
    transform: scale(1);
}
@keyframes slidein{
	from{

	}
	to{
		transform: translate(0);
	}
}
.nav-item:not(last-child){

    margin-bottom: .5rem;
}
.nav-link{
    display: block;
    color: #fff;
    font-weight: bold;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 1rem;
      transform: translate(+100rem);
      animation: slidein 1s forwards;
}




/*Hero Section */
.heading{
    color: #cca42f;
    line-height: 1;
    text-shadow: 1px 1px rgba(0,0,0,0.5);
    margin-bottom: 2.5rem;  
    font-size: 4.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Gotham';
}
.subtitle{
    color: #cca42f;
    font-size: 3.8rem;
    font-weight: 300;
    font-family: 'Gotham' ,cursive;
}

/*Booking section styles*/
.container-booking{
	max-height: 3rem;
    max-width: 120rem;
    padding: 0 1.5rem;
    margin: 0 auto;
}

.booking{
	background-color:var(--transparent-darkblue);
}

.input-group{
	margin-top: 0;
	margin-bottom: 1.5rem;
}

.input-label{
	display: block;
	font-size: 1.2rem;
	text-transform: uppercase;
	color: #fff;
	font-weight: bold;
	margin-bottom: 1rem;
}

.input, .options{
outline: none;
border: none;
width: 100%;
min-height: 4rem;
padding:1rem;
font-weight: bold;
letter-spacing: 2px;
font-family: "open sans",sans-serif;
}

.form-white{
 		background:#394989;
        color:#fff;
        border-radius:25rem;
        border:solid 1px #b7b7b7;
        overflow:hidden;
        font-size:1.4375rem;
        font-weight:400;
        padding:0.75rem 2rem 0.75rem 2rem;
        display: inline-block;
        vertical-align: middle;box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        transition:all 0.4s ease 0s;
        text-transform:uppercase;
        letter-spacing:2px;
        text-align:left;
        position:relative;
    }
    .form-white:hover
    {
        background:#726a95;
        color:#fff;
        border:solid 1px ;


    }



/*About Section of index */

#hotel-introduction
{
    padding:5rem 0;
    text-align:left;
    background:#f4f4df;
    margin-bottom:1px;
}

    #hotel-introduction .hotel-introduction-inner{
        padding-right:16%;
        display:flex;
        flex-direction:column;
        justify-content:center;
        height:67rem;
    }
    #hotel-introduction .hotel-introduction-inner .hotel-logo
    {
        margin-bottom:1rem;
        width:20rem;
    }
    #hotel-introduction .hotel-introduction-inner h1
    {
        font-size:2.25rem;
        text-transform:uppercase;
        color:#000;
    }
    #hotel-introduction .hotel-introduction-inner h1 span
    {
        display:block;
        font-size:1.4375rem;
        color:#606d23;
    }
    #hotel-introduction .hotel-introduction-inner h2
    {
    font-family: 'Raleway', sans-serif;
    font-size:3rem;
    margin-bottom:3rem;
    }
    
    #hotel-introduction .hotel-introduction-inner .description
    {
        margin-bottom:2rem;
    }
    
    #hotel-introduction .intro-image .img-holder
    {
        height:60rem;
        overflow:hidden;
    }
    #hotel-introduction .intro-image .img-holder img{
        width:100%;
        height: 100vh;
    }
    
    @media (max-width: 1201px){
        #hotel-introduction .hotel-introduction-inner{padding:0 10%;}
    }

    @media (max-width: 992px){
        #hotel-introduction .hotel-introduction-inner{text-align:center;padding:0 10% 5rem;}
    }
    
    @media (max-width: 768px){
        #hotel-introduction .hotel-introduction-inner
        {
            height:auto!important;
        }
        
        #hotel-introduction .intro-image .img-holder{height:auto;overflow:hidden;}
        #hotel-introduction .intro-image .img-holder img
        {
            position:relative!important;
            width:100%!important;
            height:auto;
        }
    }

/*Hotel Accomadation*/
    #hotel-accommodation{
    	margin-top: 2rem;
    	margin-bottom:2rem;}
    #hotel-accommodation .hotel-accommodation-inner{position:relative;}
    #hotel-accommodation .hotel-accommodation-inner .img-holder{overflow:hidden;} 
    #hotel-accommodation .hotel-accommodation-inner .img-holder img{width:100%; height:350px}
    
    #hotel-accommodation .hotel-accommodation-inner .details
    {
        position:absolute;
        left:5rem;
        bottom:3rem;}
    #hotel-accommodation .hotel-accommodation-inner .details h2
    {   font-size:3rem;
        color:#fff;
        font-weight: bold;
        text-transform:uppercase;
        font-family: 'Gotham';
        margin:0 0 2rem 0;
    }
    #hotel-accommodation .hotel-accommodation-inner .details h2 span
    {
        display:block;
    }
    
    @media (max-width: 768px) {
        #hotel-accommodation .hotel-accommodation-inner .details{left:2rem;right:2rem;text-align:center;}
        #hotel-accommodation .hotel-accommodation-inner .details h2{}
    }
    .btn-white
    {
        background:#fff;
        color:#000;
        border-radius:0;
        border:solid 1px #b7b7b7;
        overflow:hidden;
        font-size:1.4375rem;
        font-weight:400;
        padding:0.75rem 2rem 0.75rem 2rem;
        display: inline-block;
        vertical-align: middle;box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        transition:all 0.4s ease 0s;
        text-transform:uppercase;
        letter-spacing:2px;
        text-align:left;
        position:relative;
    }
    .btn-white:hover
    {
        background:#c1b73a;color:#fff;border:solid 1px ;
    }


/*Hotel Facilities*/
    #hotel-facilities
    { 
        margin-top:10rem;
        margin-bottom:5rem;
    }
    #hotel-facilities .hotel-facilities-images .img-holder{
        height:50rem;
        overflow:hidden;
    }
    #hotel-facilities .hotel-facilities-images .img-holder img{width:100%; }
    
    #hotel-facilities .hotel-facilities-details{
        height:50.5625rem;
        background:#f4f4df;
        display:flex;
        flex-direction:column;
        justify-content:center;
        padding:2rem 10%;
    }
    #hotel-facilities .hotel-facilities-details h2{
        margin:0 0 2rem 0;
        font-family: 'Old Standard TT', serif;
        font-size:2rem;
        text-transform:uppercase;
    }
    #hotel-facilities .hotel-facilities-details .description{
        margin-bottom:2rem;
    }

    #hotel-facilities .hotel-facilities-details .btn-holder{ margin-top: 1rem ;}
    
    @media (max-width: 992px) {
        #hotel-facilities .hotel-facilities-details{text-align:center;}
        
    }
    
    @media (max-width: 768px) {
        #hotel-facilities .hotel-facilities-images .img-holder{margin-bottom:8px;height:35rem;}
    }
    
/*Rooms Offers section styling*/
section-head{
    text-align: center;
    margin-bottom: 5rem;
}
.heading-rooms{
    display: block;
    font-size: 3rem;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
}

.sub-heading{
    color: ;
     display: block;
    font-size: 2.4rem;
    text-transform: uppercase;
    display: flex;
    justify-content: center;

}
.grid{
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
}
.grid-item{
display: flex;
flex-direction:column;
justify-content: center;
align-items: center;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;

}
.grid-item:hover{
     opacity:0.7;
}
.rating{
    color: orange;
}
.paragraph{
    color: #b0a06c;
    margin-bottom: 2.5rem;
}
.roooms{
    background-color: #f2f6f9;
}

/*.image-wrap{
    position: relative;
    height: 30rem;
}
.image-wrap::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
}*/
.main{
    margin-bottom: 3rem;
}



.room-image{
 width: 100%;
 height:100%;   
 object-fit:cover;
}
.room-name{
    color:#12171E;
    font-size: 22px;
    font-weight: bold;
    font-family: 'Gotham';

}
.room-price{
    display: block;
    font-size: 1.6rem;
    font-weight: bold;
    font-family: 'Courgette';
}
.per-night{
    font-size: 1.7rem;
}

/*Footer Styling*/

.footer {
    color: #fff;
    background:  #303036;
    padding: 4em 0;
    display: grid;
    grid-template-columns: 7vw 1fr 7vw;
    grid-template-rows: auto auto;
}
.footer-container {
    grid-column: 2 / 3;
    grid-column: 2 / 3;
    display: grid;
    grid-template-columns: 2fr 2fr 2fr 3fr;
    grid-template-rows: auto auto;
    grid-template-areas: "logo navigation secondary social" "contact contact . newsletter";
}
a{
     text-decoration: none;
}
.footer-logo {
    grid-area: .logo;
}
.footer-nav {
    grid-area: navigation;
    justify-self: center;
}
.footer-nav  a:hover{
      color:#05f7ff;
    margin-left: 15px;
    transition all:.4s; 
}
.footer-secondary-nav {
    grid-area: secondary;
    justify-self: center;
}
.footer-secondary-nav a:hover{
    color:#05f7ff;
    margin-left: 15px;
    transition all:.4s; 
}

.social-networks {
    grid-area: social;
}
.contact-block {
    grid-area: contact;
}
.newsletter {
    grid-area: newsletter;
}
.social-networks {
    grid-area: social;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    justify-items: center;
}
.social-networks h3 {
    grid-column: 1 / -1;
}
.facebook {
    justify-self: right;
}
.instagram {
    justify-self: left;
}
.contact-block,
.newsletter {
    align-self: end;
}
.bottom-line {
    display: grid;
}
.bottom-line p {
    grid-column: 2;
}

.newsletter-text,
.text-input {
    text-align: center;
}
.btn-submit{
	background-color: #FF8C00;
	color: #fff;
}
.btn-submit:hover{
color: black;
background-color: #ffeb99;
transition: .4s;
}
.text-input input {
    border-radius: 0;
}
.text-input input:first-child {
    height: 2rem;
}
.text-input input:last-child {
    height: 2.25rem;
    color: #fff;
    border: none;
    background-color: #f99639;
    width: 5rem;
    font-weight: bold;
}

.fas,
.fab {
    font-size: 1.5rem;
}
.newsletter-text icon,
.newsletter-text p {
    margin: 0 0 1.1rem;
}

.newsletter-text p {
    line-height: 2rem;
}

.footer a {
    color: #fff;
}
.contact-block a {
    display: block;
    border: 2px solid #fff;
    padding: 0.5rem;
    margin: 10px 0 0;
    text-align: center;
    width: auto;
}

.contact-block a:hover {
    border: 2px solid #f99639;
    color: #f99639;
}
.social-networks {
    border-bottom: 3px solid #f99639;
}

.bottom-line {
    background-color: #444554;
}
.bottom-line,
.bottom-line a {
    color: #fff;
}

@media screen and (max-width:780px){
	.heading{
		font-size: 23px;
		 color: #cca42f;
	}
	.subtitle{
		font-size: 13px;
		 color: #cca42f;
	}
	
    .header{
        height:6rem;

    }
    .header .active{
        height: 6rem;
    }
    /*Hero section styling*/
    .title{
        font-size: 8rem;   
    }
   
    .heading{
    font-size: 4rem;
}
.subtitle{
    font-size: 3rem
    }
    table{
visibility: hidden;
}

.color{
	height: 0px;
	width: 0px;
	color: white;
}
/*booking styles*/
.booking .input-label{
	display: block;
	font-size: .9rem;
}
.book-form{
	display: flex;
	justify-content: space-between;
	}

.book-form .input-group{
	margin-bottom: 0;
}
.book-form .input-group{
	flex: 0 0 20%;
}
.input, .options{
	max-width: 7rem; 
	max-height: 10px;
}
.form-white{
	white-space: pre-line;
 		background:#394989;
        color:#fff;
      	max-width: 9rem;
        max-height: 5rem;
        border-radius:4rem;
        border:solid 1px #b7b7b7;
        overflow:hidden;
        font-size:.9rem;
        font-weight:200;
        padding:0.75rem .7rem 0.7rem 1rem;
        display: inline-block;
        vertical-align: middle;box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        transition:all 0.4s ease 0s;
        text-transform:uppercase;
        letter-spacing:2px;
        text-align:left;
        position:relative;
    }
    .form-white:hover
    {
        background:#726a95;
        color:#fff;
        border:solid 1px ;


    }

}
   /*Making Website responsive*/

@media screen and (min-width:1080px){
	section:not(.booking){
		padding: 10rem 0;
	}
 .heading{

		 font-size: 4.8rem;
		 color: #cca42f;
	}
	.subtitle{
	 font-size: 3.8rem;
		 color: #cca42f;
	}
 /*header style*/
.hamburger-menu{
    display: none;
}
.nav-list{
    position: initial;
    width: initial;
    height: initial;
    background-color: transparent;
    flex-direction: row;
    justify-content: initial;
    opacity: 1;
    transform:scale(1);
}
.nav-item:not(last-child)
{
    margin-bottom: 0;
}
.nav-link{
    font-size: 1.3rem;
    font-size: normal;
}
.heading{
    font-size: 12rem;
}
.subtitle{
    font-size: 5rem
}
/*Booking styles*/
 
.book-form{
	display: flex;
	justify-content: space-between;
	}

.book-form .input-group{
	margin-bottom: 0;
}
.book-form .input-group{
	flex: 0 0 20%;
}
.input, .options{
	max-width: 19rem; 
	max-height: 2rem;
}
.form-white{
 		background:#394989;
        color:#fff;
        max-height: 10rem;
        border-radius:10rem;
        border:solid 1px #b7b7b7;
        overflow:hidden;
        font-size:2rem;
        font-weight:200;
        padding:0.75rem .7rem 0.7rem 1rem;
        display: inline-block;
        vertical-align: middle;box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        transition:all 0.4s ease 0s;
        text-transform:uppercase;
        letter-spacing:2px;
        text-align:left;
        position:relative;
    }
    .form-white:hover
    {
        background:#726a95;
        color:#fff;
        border:solid 1px ;


    }
}

/*Footer medias*/
@media screen and (min-width: 960px) {
    .footer {
        height: auto;
    }
}

@media screen and (max-width: 960px) {
    .footer-nav,
    .footer-secondary-nav {
        display: none;
    }
    .footer-container {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 20vh 25vh;
        grid-template-areas: "logo social" "contact newsletter";
    }
    .bottom-line {
        display: grid;
    }
    .bottom-line p {
        justify-self: center;
    }
}
@media screen and (max-width: 760px) {
    .footer-container {
        grid-template-columns: 1fr;
        grid-template-areas: "logo" "social" "newsletter" "contact";
    }
    .footer-logo,
    .contact-block {
        justify-self: center;
        align-self: center;
    }
    .social-networks,
    .newsletter {
        padding: 3rem 0;
    }
    .contact-block a,
    .contact-block p {
        margin: 0 auto;
    }
    .contact-block h3,
    .social-networks h3 {
        line-height: 2rem;
    }
}