/** CSS RELATED TO LISTING PAGE GOES HERE */

@import url('variables.css'); /* Import variables.css */
@import url('global.css'); /* Import global.css */

/*******************************  Listing page css starts here*/

.nyc_header {
	background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/2b/NYC_Downtown_Manhattan_Skyline_seen_from_Paulus_Hook_2019-12-20_IMG_7347_FRD_%28cropped%29.jpg');
	background-size: cover;
	background-repeat: no-repeat;
}

.sub_heading {
	letter-spacing: 1px;
	text-shadow: 1px 1px var(--primary-shadow-color);
}

/* Main container css */
.main_container {
	background-color: var(--alt-background-color);
	padding: 5rem;
}
@media screen and (max-width: 990px) {
	.main_container {
		padding: 1rem;
	}
}
/* Main container css ends here */

/* * side nav css starts here*/

.side_nav_links_container {
	max-height: 500px;
	overflow: auto;
}

/* removing default styling from .nav-link.active */
.nav-pills .nav-link.active {
	background-color: inherit !important;
	color: var(--primary-color);
}

/* nav item number color css */
.side_nav_links_container .nav-link.active .hotel_num_side_nav {
	padding: 5px;
	min-width: 33px;
	max-height: 33px;
	background: var(--secondary-text-color);
	border-radius: 30px;
	text-align: center;
	margin-right: 5px;
	color: var(--tertiary-text-color);
}
.side_nav_links_container .nav-link.active .hotel_name_side_nav {
	color: var(--secondary-text-color);
}

.hotel_num_side_nav {
	padding: 5px;
	min-width: 33px;
	max-height: 33px;
	background: var(--secondary-background-color);
	border-radius: 30px;
	text-align: center;
	margin-right: 5px;
	color: var(--tertiary-text-color);
}

/** side nav css ends here*/

.author-card-with-sidebar {
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 10%;
	/* max-height: 400px; */
	/* overflow: auto; */
}
@media screen and (max-width: 990px) {
	#hotel_side_nav {
		display: none;
	}
}
/* side nav css ends here*/

/* Author image's css starts here */
.article-author-container {
	display: flex;
	justify-content: center;
}
.article-author {
	border-radius: 100px;
	border: 5px solid var(--light-background-color);
	position: relative;
}

.article-author-image-one {
	background-image: url('https://luxuryhotel.guru/temp/user/29.jpg?1=1');
	z-index: 1;
	background-size: cover;
	min-width: 90px;
	height: 90px;
}

/* for second author */
.article-author-image-two {
	right: 10%;
	background-image: url('https://luxuryhotel.guru/temp/user/9978.jpg?1=1');
	background-size: cover;
	min-width: 90px;
	height: 90px;
}
@media screen and (max-width: 990px) {
	.article-author-image-two {
		right: 2%;
	}
}

/* Author image's css ends */

/* ! ************************* HOTEL CARD CSS STARTS HERE  ************************  */
/* hotel number styling */
.hotel_num {
	padding: 5px;
	min-width: 33px;
	background: #111;
	display: inline-block;
	border-radius: 30px;
	text-align: center;
	margin-right: 5px;
	color: var(--tertiary-text-color);
}
/*  ************************* HOTEL IMAGE CSS STARTS HERE  ************************  */
.hotel_main_image_col {
	cursor: pointer;
}

.hotel_submain_image_col {
	cursor: pointer;
}

.hotel_main_image_col:hover {
	opacity: 0.9;
}

.hotel_submain_image_col:hover {
	opacity: 0.9;
}

/*  ************************* HOTEL IMAGE CSS ENDS HERE  ************************  */

/*  ************************* HOTEL DESCRIPTION CSS STARTS HERE  ************************  */

.hotel_description a {
	display: inline-block;
}

.hotel_description {
	position: relative;
}

.hotel_description_detailed {
	display: none;
}

/*  ************************* HOTEL DESCRIPTION CSS ENDS HERE  ************************  */

/*  */

/*  ************************* HOTEL STATS CSS STARTS HERE  ************************  */

.hotel_rating,
.hotel_rooms,
.hotel_stars,
.hotel_price {
	border-radius: 5px;
	text-align: center;
	/* font-size: 1.2rem; */
	background-color: var(--light-background-color);
	box-shadow: 0 0 5px var(--secondary-shadow-color);
}

/* hotel rating css */
.hotel_rating {
	color: var(--hotel-rating-text-color);
}

/* hotel rooms css */
.hotel_rooms {
	color: var(--hotel-rooms-text-color);
}

/* hotel stars css */
.hotel_stars {
	color: var(--hotel-stars-text-color);
}

/*  ************************* HOTEL STATS CSS ENDS HERE  ************************  */

/*?  ************************* HOTEL REVIEW CSS ENDS HERE  ************************  */

.hotel_review > cite {
	float: right;
}

.hotel_review_col {
	padding-right: 5rem;
	border-right: 4px solid var(--primary-border-color);
}

@media screen and (max-width: 400px) {
	.hotel_review_col {
		padding-right: 0;
		border-right: 0;
	}
}

blockquote {
	background-color: var(--secondary-background-color);
	border-radius: 20px;
	font-weight: 100;
	font-size: 1rem;
	/* max-width: 600px; */
	line-height: 1.4;
	position: relative;
	margin: 0;
	padding: 0.5rem;
}

blockquote:before,
blockquote:after {
	position: absolute;
	color: var(--secondary-text-color);
	font-size: 3rem;
	width: 1rem;
	height: 1rem;
}

blockquote:before {
	font-family: Georgia, 'Times New Roman', Times, serif;
	content: '\201C';
	left: -2rem;
	top: -1rem;
}

blockquote:after {
	font-family: Georgia, 'Times New Roman', Times, serif;
	content: '\201D';
	right: -2rem;
}

cite {
	line-height: 3;
	text-align: left;
}

/*  ************************* HOTEL REVIEW CSS ENDS HERE  ************************  */

/*?  ************************* HOTEL PRICE CTA CSS STARTS HERE  ************************  */
.booking_btn,
.tripadvisor_btn,
.agoda_btn {
	color: var(--light-text-color);
}
.booking_btn:hover,
.tripadvisor_btn:hover,
.agoda_btn:hover {
	color: var(--light-text-color);
}

.booking_btn {
	background-color: #4c7ec3;
}
.booking_btn:hover {
	background-color: #003580;
}
.booking_btn:focus {
	background-color: #003580;
}

.tripadvisor_btn {
	background-color: #34e0a1;
}
.tripadvisor_btn:hover {
	background-color: #299c72;
}
.tripadvisor_btn:focus {
	background-color: #299c72;
}

.agoda_btn {
	background-color: #ff567d;
}
.agoda_btn:hover {
	background-color: #ee363f;
}
.agoda_btn:focus {
	background-color: #ee363f;
}

/*?  ************************* HOTEL PRICE CTA CSS STARTS HERE  ************************  */

/* ! ************************* HOTEL CARD CSS ENDS HERE  ************************  */

/* ? ************************* BOOTSTRAP CSS OVERRIDES STARTS HERE  ************************* */
.card {
	border: 0 !important;
	border-radius: 0 !important;
}

.img-fluid {
	height: 100%;
}

.card-img-overlay {
	background: var(--primary-shadow-color);
	border-radius: 0 !important;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.btn-secondary {
	border-radius: 100px;
}

.nav-link {
	padding: 0;
	color: var(--primary-text-color);
}

.nav-link:hover {
	color: var(--secondary-text-color);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
	background-color: var(--tertiary-background-color);
}

/* ? ************************* BOOTSTRAP CSS OVERRIDES ENDS HERE  ************************* */