shreshtha.css

/*import the fonts used*/
@import url('http://fonts.googleapis.com/css?family=Courgette|Open+Sans:400,800&display=sawp');
/*basics reset*/
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
/*custom properties*/
:root {
	--dark-color: #2d2c2c;
	--pink-solid: rgba(0, 131, 255, 0.8);
	--pink-transparent: rgba(5, 79, 255, 0.3);
	--blue-transparent: rgba(220, 247, 246, .5);
	--pink-light: #FF69B4;
	--yellow-solid: #fa9e2c;
	--gray-solid: rgb(140, 140, 140);
	--blue-light: rgb(72, 48, 255);
	--gradient-color: linear-gradient(to right, var(--gray-solid), var(--blue-light));
	--gradient-color: linear-gradient(to right, var(--blue-light), var(--gray-solid));
	}
/*global styles*/
html{
	font-size: 10px;
}

body{
	font-family: 'Open Sans', sans-serif;
	font-size:1.6rem;
	color: var(--dark-color);
	
}

a{
	text-decoration: none;
	color: inherit;
}

ul{
	list-style: none;
}

section{
	padding: 5rem 0;
}
/*reusable style*/
.btn{
	color: #fff;
	font-size: 1.3rem;
	font-weight: bold;
	text-transform: uppercase;
	padding: .5rem 3.5rem;
	border: none;
	border-radius: 10rem;
	display: inline-flex;
	align-items: center;
}

.container{
	width: 100%;
	max-width: 120rem;
	padding: 0 1.5rem;
	margin: 0 auto;
}

.form-btn{
	margin-top: 2.5rem;
	cursor: pointer;
}

.btn-gradient{
	background-image: var(--gradient-color);
	
}

.btn-gradient:hover{
	background-image: var(--gradient-color-alt);
}

.btn-purple{
	background-color: var(--pink-solid);
}

.btn-purple:hover{
	background-color: #56247f;
}

.dots{
	font-size: 2.4rem;
	margin-left: .5rem;
	opacity: .75;
}

/* header styles*/
.header{
	width: 100%;
	height: 6rem;
	display: flex;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	background-color: var(--pink-transparent);
	z-index: 999;
	transition: background-color .5s, height .5s;
}
.header.active{
	background-color: var(--pink-solid);
}


/*header style - nav*/
.nav{
	display: flex;
	align-items: center;
	justify-content: space-between;
}


.logo imp{
	max-width: 80%;
}

.hamburger-menu{
	font-size: 2.6rem;
	color: #fff;
	cursor: pointer;
	position: relative;
	z-index: 1500;
}

.hamburger-menu .fa-times{
	display: none;
}

.menu-open .hamburger .fa-times{
	display: block;
}

.menu-open .hamburger .fa-bars{
	display: none;
}

.nav-list{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 13vh;
	background-color: var(--pink-solid);
	display: flex;
	flex-direction: coloumn;
	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);
}

.nav-item:not(:last-child){
	margin-bottom: .5rem;
}
.nav-link{
	display: block;
	color: #fff;
	font-size: 3rem;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 1rem;
}
/*hero section styles*/
.hero{
	width: 100%;
	height: 100vh;
	background: url("Background.jpg")center no-repeat;
	background-size: cover;
	display: flex;
	align-items: center;
	text-align: center;
	position: relative;
	
}

.hero::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: inherit;
	height: inherit;
	background-color: var(--blue-transparent);
	z-index: -1;
}

.main-heading{
	color: #fff;
	line-height: 1;
	text-shadow: 1px 1px 1rem rgba(0,0,0,.5);
	margin-bottom: 2.5rem;
}

.title{
	font-size: 4.8rem;
	text-transform: uppercase;
	letter-spacing: 3px;
}

.subtitle{
	font-size: 3.6rem;
	font-weight: 300;
	font-family: 'Courgette', cursive;
}


/*booking section styles*/
.booking{
	background-image: var(--gradient-color);
	
}

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

.input-lable{
	display: block;
	font-size: 1.3rem;
	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;
	color: #a5a5a5;
	letter-spacing: 2px;
	font-family: "Open Sans", sans-serif;
	resize: none;
}

::placeholder {
	color: inherit;
	
}

/*featured hotels section styles*/
.section-head{
	text-align: center;
	margin-bottom: 5rem;
}

.heading{
	display: block;
	font-size: 4rem;
	text-transform: uppercase;
}

.sub-heading{
	font-size:1.7rem;
	font-family: 'courgette',cursive;
	font-weight: 300;
	color: #a5a5a5;
}

.grid{
	display: grid;
	grid-template-coloumns: repeat(auto-fit, minmax(30rem, 1fr));
	grid-gap: 2.5rem;
}

.grid-item{
	display: flex;
	flex-direction: coloumn;
	align-items: center;
	justify-content: center;
}

.featured-hotels{
	height: 35rem;
	color: #fff;
	padding: 1rem;
	position: relative;
	z-index: 0;
}

.featured-hotels::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--blue-transparent);
	z-index: -1;
}

.hotel-image{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -2;
}

.hotel-name{
	font-size: 2.6rem;
}

.hotel-price{
	font-size: 1.8rem;
}

.hotel-rating{
	margin: 1rem 0 2.5rem;
}

.rating{
	color: var(--yellow-solid);
}

/*Sepcial section styles*/
.offer{
	background: linear-gradient(to right, rgba(250,158,44, .8), rgba(143,80,251, .8)),
	            url("C:\Users\SHRESHTHA\Desktop\Background.jpg") bottom center no-repeat;
	background-size: cover;
}

.offer-content{
	background-color: #fff;
	text-align: center;
	padding: 5rem 1rem;
	position: relative;
	overflow: hidden;
}

.discount{
	background-color: var(--yellow-solid);
	position: absolute;
	top: 0;
	left: 0;
	padding: 1rem;
	font-weight: bold;
	text-transform: uppercase;
	outline: 2px solid var(--yellow-solid);
	outline-offset: .5rem;
	
}

.paragraph{
	color: #a5a5a5;
	margin-bottom: 2.5rem;
}
/*rooms section styles*/
.rooms{
	background-color: #f2f6f9;
	
}
.image-wrap{
	position: relative;
	height: 25rem;
}
.image-wrap::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--blue-transparent);
}
.room-image{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.room-name{
	font-size: 2.6rem;
	background-color: var(--yellow-solid);
	color: #fff;
	padding: .5rem 2rem;
	position: absolute;
	left: 0;
	bottom: 2.5rem;
	z-index: 10;
	
}
.room-price{
	display: block;
	font-size: bold;
	font-weight: bold;
	color: var(--yellow-solid);
	
}
.per-night{
	color: var(--dark-color);
	font-size: 1.4rem;
	font-weight: 100;
}
.rooms-btn{
	color: var(--dark-color);
	padding: 0;
	transition: color .5s;
}
.rooms-btn:hover{
	color: var(--yellow-solid);
}
/*contact section style*/
.contain-content{
	display: flex;
	justify-content: center;
}
.traveler-wrap{
	display: none;
	
}
.contact-form{
	width: 100%;
	background-image: var(--gradient-color);
	padding: 2.5rem;
	
}
.contact-form: .input{
	display: block;
	background-color: transparent;
	color: #fff;
	font-weight: normal;
	border-bottom: 2px solid #fff;
	padding-left: 0;
	
}
.bar{
	display: block;
	position: relative;
	
}
.bar::after{
	content: '';
	position: relative;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background-color: var(--pink-light);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .5s;
}
.contact-form .input:focus + .bar::after{
	transform: scaleX(1);
}
/* footer section styles*/
.footer{
	padding: 5rem 0;
	background-color: var(--pink-solid);
	color: #fff;
}
.footer-content-brand{
	margin-bottom: 5rem;
	
}
.footer .paragraph{
	color: inherit;
	
}
.footer-heading{
	text-transform: uppercase;
	margin-bottom: 2.5rem;
}
.social-media{
	display: flex;
	
}
.sm-link{
	width: 4rem;
	height: 4rem;
	font-size: 2rem;
	border: 2px solid var(--yellow-solid);
	display: flex;
	margin-right: 1rem;
	transition: background-color .5s;
	
}
.sm-link:hover{
	background-color: var(--yellow-solid);
	color: var(--dark-color);
}
.sm-link i{
	margin: auto;
}

/*media queries*/
@media screen and (min-width: 768px){
	/*header section styles*/
	.header{
		height: 10rem;
	}
	.header.active{
		height: 6rem;
	}
	/hero section styles/
	.title{
		font-size: 8rem;
	}
	/*contact section style*/
	.contact-content{
		justify-content: space-between;
	}
	.traveler-wrap{
		display: block;
		flex: 0 0 45%;
	}
	.traveler-wrap img{
		width: 100%;
		
	}
	.contact-form{
		flex: 0 0 50%;
		align-self: flex-start;
	}
	.input-group-wrap{
		display: flex;
	}
	.input-group-wrap .input-group{
		width: 50%;
		margin-right: 2rem;
		
	}
	.input-group-wrap .input-group:last-child{
		margin-right: 0rem;
	}
	/*footer section style*/
	.footer{
		overflow-x: hidden;
	}
	.footer-content{
		display: flex;
	
	}
	.footer-content-brand{
		margin-bottom: 0;
		flex: 0 0 60%;
	}
	.footer .paragraph{
		margin-top: 2.5rem;
	}
	.footer-heading{
		margin-bottom: 5rem;
	}
	.social-media-wrap{
		flex: 0 0 40%;
		/*margin-left: 2.5rem;*/
	}
}

@media screen and (min-width: 1000px){
	section:not(.booking){
		padding: 10rem 0;
	}
	/*header section 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-right: 3rem;
		margin-bottom: 0;
	}
	.nav-link{
		font-size: 1.3rem;
		font-weight: normal;
		transition: color .5s;
	}
	.nav-link:hover{
		color; var(--yellow-solid);
		
	}
	/*hero section styles*/
	.title{
		font-size: 12rem;
		
	}
	.sub-title{
		font-size: 4.6rem;
	}
	/*booking section styles*/
	.book-form{
		display: flex;
		justify-content: space-between;
		
	}
	.book-form .input-group{
		margin-bottom: 0;
	}
	.book-form .input-group:first-child{
		flex: 0 0 20%;
	}
	.input,
	.options{
		min-width: 10rem;
	}
	/*rooms section styles*/
	.room-grid{
		grid-template-coloumns: repeat(auto-fit, minmax(40rem, 1fr));
		grid-gap: 8rem;
		
	}
	.featured-rooms{
		flex-direction: row;
		align-items: flex-start;
	}
	.room-info-wrap{
		margin-left: 1.5rem;
		
	}
}
@media screen and (min-width: 1200px){
	.book-form .input-group:first-child{
		flex: 0 0 30%;
	}
}