/******************************************************************
  Template Name: Hiroto
  Description:  Hiroto Hotel HTML Template
  Author: Colorlib
  Author URI: https://colorlib.com
  Version: 1.0
  Created: Colorlib
******************************************************************/

/*------------------------------------------------------------------
[Table of contents]

1.  Template default CSS
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Helper Css
3.  Header Section
4.  Hero Section
5.  Service Section
6.  Home Room Section
7.  Testimonial Section
9.  Contact
10.  Footer Style
-------------------------------------------------------------------*/

/*----------------------------------------*/

/* Template default CSS
/*----------------------------------------*/

@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap");

html,
body {
	height: 100%;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: #111111;
	font-weight: 600;
}

h1 {
	font-size: 70px;
}

h2 {
	font-size: 36px;
}

h3 {
	font-size: 30px;
}

h4 {
	font-size: 24px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

p {
	font-size: 16px;
	color: #777C81;
	font-weight: 400;
	line-height: 26px;
	margin: 0 0 15px 0;
}

img {
	max-width: 100%;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
	outline: none;
}

a:hover,
a:focus {
	text-decoration: none;
	outline: none;
	color: #ffffff;
}

ul,
ol {
	padding: 0;
	margin: 0;
}

/*---------------------
  Helper CSS
-----------------------*/

.section-title {
	margin-bottom: 55px;
	text-align: center;
}

.section-title h5 {
	color: #E9AD28;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 20px;
}

.section-title h2 {
	font-size: 44px;
	color: #19191A;
}

.set-bg {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
}

.spad {
	padding-top: 100px;
	padding-bottom: 100px;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
	color: #fff;
}

/* buttons */

.primary-btn {
	display: inline-block;
	font-size: 16px;
	padding: 14px 20px 12px;
	color: #ffffff;
	background: #E9AD28;
	letter-spacing: 2px;
}

/* Preloder */

#preloder {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 999999;
	background: #ffffff;
}

.loader {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -13px;
	margin-left: -13px;
	border-radius: 60px;
	animation: loader 0.8s linear infinite;
	-webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}

	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}

@-webkit-keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}

	50% {
		-webkit-transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}

	100% {
		-webkit-transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}


/* -------------------------------------------------------------------------------------- */

.offcanvas-menu-wrapper {
	display: none;
}

/*--------------------------------- Responsive Media Quaries -----------------------------*/

@media only screen and (min-width: 1200px) and (max-width: 1749px) {
	.room__details__pic__slider.owl-carousel .owl-nav button {
		left: 10px;
	}

	.room__details__pic__slider.owl-carousel .owl-nav button.owl-next {
		right: 10px;
	}
}

@media only screen and (min-width: 1200px) {
	.container {
		max-width: 1200px;
	}
}

/* Medium Device = 1200px */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.header__menu ul li {
		margin-right: 35px;
	}
}

/* Tablet Device = 768px */

@media only screen and (min-width: 768px) and (max-width: 991px) {

	.home__explore h3 {
		margin-bottom: 25px;
		font-size: 22px !important;
	}





	/* ==========================================================================
       Offcanvas Menu & Modal - Slide from Left to Center (#c28e2c & Black Theme)
       ========================================================================== */


	.offcanvas-menu-overlay {
		position: fixed;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, 0.85);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		z-index: 9998;
		visibility: hidden;
		opacity: 0;
		transition: all 0.4s ease;
	}

	.offcanvas-menu-overlay.active {
		visibility: visible;
		opacity: 1;
	}

	.offcanvas-menu-wrapper {
		position: fixed;
		top: 50%;
		left: 0;
		/* Initial hidden state off-screen to the left */
		transform: translate(-100%, -50%);
		/* Centers vertically & hides off-screen left */

		width: 440px;
		max-width: calc(100% - 30px);
		max-height: 90vh;
		overflow-y: auto;
		display: block;
		background: #0e0e0e;
		border: 1px solid rgba(194, 142, 44, 0.3);
		border-radius: 16px;
		padding: 40px 30px;
		z-index: 9999;
		box-shadow: 0 25px 50px rgba(0, 0, 0, 0.9);

		visibility: hidden;
		opacity: 0;
		transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
	}

	/* Active State: Slides from Left to Absolute Center of the Screen */
	.offcanvas-menu-wrapper.active {
		left: 50%;
		transform: translate(-50%, -50%);
		/* Perfectly centers horizontally & vertically */
		visibility: visible;
		opacity: 1;
	}

	/* Custom Gold Scrollbar */
	.offcanvas-menu-wrapper::-webkit-scrollbar {
		width: 4px;
	}

	.offcanvas-menu-wrapper::-webkit-scrollbar-thumb {
		background: #c28e2c;
		border-radius: 10px;
	}

	.offcanvas__menu {
		display: none;
	}

	.slicknav_btn {
		display: none;
	}

	.slicknav_menu {
		background: transparent;
		padding: 0;
		margin-bottom: 20px;
	}

	.slicknav_nav ul {
		margin: 0;
	}

	.slicknav_nav .slicknav_row,
	.slicknav_nav a {
		padding: 8px 0;
		margin: 0;
		color: #ffffff;
		font-weight: 500;
		font-size: 16px;
		transition: color 0.3s ease;
	}

	.slicknav_nav .slicknav_row:hover,
	.slicknav_nav a:hover {
		border-radius: 0;
		background: transparent;
		color: #c28e2c !important;
	}

	.slicknav_nav {
		display: block !important;
	}

	/* Dual Logo Container Styling inside Offcanvas */
	.offcanvas__logo {
		margin-bottom: 25px;
		padding-bottom: 20px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		text-align: center;
	}

	.offcanvas__logo .dual-logo,
	.offcanvas__logo a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		text-decoration: none;
	}

	.offcanvas__logo .logo-icon {
		max-height: 38px;
		width: auto;
	}

	.offcanvas__logo .logo-text {
		max-height: 24px;
		width: auto;
	}


	.offcanvas__widget {
		margin-bottom: 25px;
		padding-top: 20px;
		border-top: 1px solid rgba(255, 255, 255, 0.08);
		text-align: center;
	}

	.offcanvas__widget ul li {
		font-size: 13px;
		color: #a0a0a0;
		list-style: none;
		line-height: 30px;
	}

	.offcanvas__widget ul li span {
		color: #c28e2c;
		margin-right: 6px;
	}

	.offcanvas__language {
		display: block;
		text-align: center;
		padding: 10px 0;
		position: relative;
		cursor: pointer;
		margin-bottom: 20px;
	}

	.offcanvas__language:hover ul {
		opacity: 1;
		top: 38px;
		visibility: visible;
	}

	.offcanvas__language img {
		display: inline-block;
		margin-right: 6px;
		width: 18px;
	}

	.offcanvas__language span {
		display: inline-block;
		font-size: 13px;
		color: #ffffff;
	}

	.offcanvas__language i {
		display: inline-block;
		font-size: 12px;
		color: #c28e2c;
		font-weight: 500;
		margin-left: 4px;
	}

	.offcanvas__language ul {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 50px;
		width: 100px;
		background: #181818;
		border: 1px solid rgba(194, 142, 44, 0.3);
		border-radius: 4px;
		text-align: left;
		z-index: 9;
		opacity: 0;
		visibility: hidden;
		padding: 5px 0;
		transition: all 0.3s ease;
	}

	.offcanvas__language ul li {
		font-size: 13px;
		color: #e0e0e0;
		padding: 6px 15px;
		list-style: none;
		cursor: pointer;
		transition: background 0.2s ease, color 0.2s ease;
	}

	.offcanvas__language ul li:hover {
		background: #c28e2c;
		color: #0e0e0e;
	}

	.offcanvas__auth {
		text-align: center;
	}

	.offcanvas__auth ul li {
		display: inline-block;
		list-style: none;
		margin: 0 12px;
		position: relative;
	}

	.offcanvas__auth ul li::after {
		position: absolute;
		right: -14px;
		top: 50%;
		transform: translateY(-50%);
		width: 1px;
		height: 12px;
		background: rgba(255, 255, 255, 0.2);
		content: "";
	}

	.offcanvas__auth ul li:last-child::after {
		display: none;
	}

	.offcanvas__auth ul li a {
		font-size: 13px;
		color: #c28e2c;
		font-weight: 500;
		text-decoration: none;
		transition: color 0.3s ease;
	}

	.offcanvas__auth ul li a:hover {
		color: #ffffff;
	}

	.header__top {
		display: none;
	}

	.header__nav {
		display: none;
	}

	.header .container {
		position: relative;
	}
}

/* Wide Mobile = 480px */

@media only screen and (max-width: 767px) {

	.home__explore h3{
		margin-bottom: 30px;
		font-size: 22px !important;

	}



	.canvas__open {
		display: block;
		font-size: 22px;
		color: #ffffff;
		height: 35px;
		width: 35px;
		line-height: 35px;
		text-align: center;
		border: 1px solid #323232;
		border-radius: 2px;
		cursor: pointer;
		position: absolute;
		right: 15px;
		top: 15px;
	}

	.header__logo {
		width: 175px;
	}


	.offcanvas-menu-overlay {
		position: fixed;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, 0.7);
		content: "";
		z-index: 98;
		-webkit-transition: all, 0.5s;
		-o-transition: all, 0.5s;
		transition: all, 0.5s;
		visibility: hidden;
	}

	.offcanvas-menu-overlay.active {
		visibility: visible;
	}

	.offcanvas-menu-wrapper {
		position: fixed;
		left: -270px;
		width: 270px;
		height: 100%;
		background: #1d1c1c;
		padding: 50px 20px 30px 30px;
		display: block;
		z-index: 9999;
		overflow-y: auto;
		-webkit-transition: all, 0.5s;
		-o-transition: all, 0.5s;
		transition: all, 0.5s;
		opacity: 0;
	}

	.offcanvas-menu-wrapper.active {
		opacity: 1;
		left: 0;
	}

	.offcanvas__menu {
		display: none;
	}

	.slicknav_btn {
		display: none;
	}

	.slicknav_menu {
		background: transparent;
		padding: 0;
		margin-bottom: 20px;
	}

	.slicknav_nav ul {
		margin: 0;
	}

	.slicknav_nav .slicknav_row,
	.slicknav_nav a {
		padding: 7px 0;
		margin: 0;
		color: #ffffff;
		font-weight: 600;
	}

	.slicknav_nav .slicknav_row:hover {
		border-radius: 0;
		background: transparent;
		color: #ffffff;
	}

	.slicknav_nav a:hover {
		border-radius: 0;
		background: transparent;
		color: #ffffff;
	}

	.slicknav_nav {
		display: block !important;
	}

	.offcanvas__logo {
		margin-bottom: 30px;
	}


	.offcanvas__widget {
		margin-bottom: 30px;
	}

	.offcanvas__widget ul li {
		font-size: 15px;
		color: #ffffff;
		list-style: none;
		line-height: 35px;
	}

	.offcanvas__widget ul li:last-child {
		margin-right: 0;
	}

	.offcanvas__widget ul li span {
		color: #E9AD28;
		margin-right: 5px;
	}

	.offcanvas__language {
		display: inline-block;
		padding: 12px 0 12px;
		position: relative;
		cursor: pointer;
		margin-bottom: 30px;
	}

	.offcanvas__language:hover ul {
		opacity: 1;
		top: 45px;
		visibility: visible;
	}

	.offcanvas__language img {
		display: inline-block;
		margin-right: 6px;
	}

	.offcanvas__language span {
		display: inline-block;
		font-size: 15px;
		color: #ffffff;
	}

	.offcanvas__language i {
		display: inline-block;
		font-size: 15px;
		color: #ffffff;
		font-weight: 500;
	}

	.offcanvas__language ul {
		position: absolute;
		left: 13px;
		top: 65px;
		width: 80px;
		background: #ffffff;
		text-align: left;
		z-index: 9;
		opacity: 0;
		visibility: hidden;
		-webkit-transition: all, 0.3s;
		-o-transition: all, 0.3s;
		transition: all, 0.3s;
	}

	.offcanvas__language ul li {
		font-size: 15px;
		color: #19191A;
		padding: 5px 10px;
		list-style: none;
		cursor: pointer;
	}

	.offcanvas__auth ul li {
		display: inline-block;
		list-style: none;
		margin-right: 25px;
		position: relative;
	}

	.offcanvas__auth ul li:last-child {
		margin-right: 0;
	}

	.offcanvas__auth ul li:last-child::after {
		display: none;
	}

	.offcanvas__auth ul li::after {
		position: absolute;
		right: -16px;
		top: 0;
		width: 1px;
		height: 20px;
		background: #e5e5e5;
		content: "";
	}

	.offcanvas__auth ul li a {
		font-size: 15px;
		color: #ffffff;
	}

	.header__top {
		display: none;
	}

	.header__nav {
		display: none;
	}

	.header .container {
		position: relative;
	}

}

/* Small Device */

@media only screen and (max-width: 479px) {


	/* .hero__text h2 {
		font-size: 54px;
		line-height: 72px;
	} */

	.home__explore h3 {
		margin-bottom: 25px;
		font-size: 22px !important;
	}



}

.breadcrumb-option {
	padding: 120px 0px;
	background-size: cover;
	background-position: center;
}

.breadcrumb-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(14, 14, 14, 0.4) 0%, rgba(14, 14, 14, 0.9) 100%);
}

.gold-subtitle {
	color: #c28e2c;
	letter-spacing: 3px;
	font-weight: 700;
	font-size: 0.85rem;
}

.title-gold-line {
	width: 60px;
	height: 3px;
	background: #c28e2c;
	border-radius: 2px;
}

.breadcrumb__text h1 {
	font-size: 40px;
}

@media (max-width:768px) {
	.breadcrumb__text h1 {
		font-size: 28px;
	}
}