/* Color scheme */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400&display=swap');


/*-------- 3.1 Preloader --------*/
[data-loader="circle-side"] {
	position: absolute;
	width: 50px;
	height: 50px;
	top: 50%;
	left: 50%;
	margin-left: -25px;
	margin-top: -25px;
	-webkit-animation: circle infinite .95s linear;
	-moz-animation: circle infinite .95s linear;
	-o-animation: circle infinite .95s linear;
	animation: circle infinite .95s linear;
	border: 2px solid #cc0066;
	border-top-color: rgba(0, 0, 0, .2);
	border-right-color: rgba(0, 0, 0, .2);
	border-bottom-color: rgba(0, 0, 0, .2);
	border-radius: 100%;
}
/*-------- 1.2 Buttons --------*/
	a.button_intro_2,
	.button_intro_2 {
		background: #cc0066;
	}
	a.button_intro_2:hover,
	.button_intro_2:hover {
		color: #cc0066 !important;
	}
	a.btn_full,
	.btn_full {
		background: #cc0066;
	}
	a.btn_full:hover,
	.btn_full:hover {
		background: #333;
	}
	a.btn_1,
	.btn_1 {
		background: #cc0066;
	}
	a.btn_1:hover,
	.btn_1:hover {
		background: #333;
	}
	a.btn_1_outline,
	.btn_1_outline {
		color: #cc0066;
		border: 2px solid #cc0066;
	}
	a.btn_1_outline:hover,
	.btn_1_outline:hover {
		background: #333;
		border: 2px solid #333;
		color: #fff;
	}
	/*General links color*/
	a {
		color: #cc0066;
	}
	a:hover,
	a:focus {
		color: #333;
	}
/*============================================================================================*/
/* MENU */
/*============================================================================================*/

	ul#tools_top li a.search-overlay-menu-btn:hover {
		color: #cc0066;
	}
	/*First level styles */			
	.main-menu > ul > li:hover > a {background-color:#cc0066;}

@media only screen and (min-width: 992px) {
	
	/* Submenu style*/
	.main-menu ul ul li:hover > a {background-color:#f9f9f9;color:#cc0066;}
	/* Megamenu */
	.main-menu ul li.megamenu .menu-wrapper {border-top: 2px solid #cc0066;}
}

@media only screen and (max-width: 991px) {
	#header_menu{background:#cc0066 url(../img/pattern_3.png) repeat;}
	.main-menu ul li a:hover,
	a.show-submenu:hover,
	a.show-submenu:focus,
	a.show-submenu-mega:hover,
	a.show-submenu-mega:focus{color:#cc0066 !important;background-color:#f9f9f9;}	
}
/*============================================================================================*/
/* end MENU */
/*============================================================================================*/

	h2 span,
	h3 span,
	h4 span,
	h5 span,
	h6 span {
		color:#ff3366;
	}
	#top_line {
		background: #e01066 url(../img/pattern_3.png) repeat !important;
	}
	
	#tickets.table tr.total_row {
		color: #cc0066;
	}
	
	#tickets.table td input#total {
		color: #cc0066;
	}
	
	.indent_title_in i {
		color: #cc0066;
	}
	
	.bloglist ul li a:hover,
	.bloglist h4 a:hover {
		color: #cc0066;
	}
	.owl-theme .owl-dots .owl-dot.active span,
	.owl-theme .owl-dots .owl-dot:hover span {
		background: #cc0066;
	}
	.pagination > li > a:hover,
	.pagination > li > span:hover {
		background-color: #cc0066 !important;
		border-color: #cc0066 !important;
		color: #ffffff !important;
	}
	.list_tours ul li a .price_list {
	color: #ff3366;
	}
	.list_tours ul li a .price_list:hover {
		color: #ff3366;
	}
	.short_info strong {
		background-color: #ff3366;
	}
	.price_grid {
		background-color: #cc0066;
	}
	.banner {
		background: #cc0066 url(../img/pattern_3.png) repeat;
	}
	.panel-title a .indicator {
		color: #cc0066;
	}
	.box_style_2 h3{
		background-color:#cc0066;
	}
	.box_style_2 h3 span{
	color: #FF9;
}


/*============================================================================================*/
/* Your custom styles below */
/*============================================================================================*/

/* Hero Banner matching mockup */
.header-hero {
	position: relative;
	width: 100%;
	max-height: 520px;
	overflow: hidden;
}
.header-hero img.hero-img {
	width: 100%;
	height: 520px;
	object-fit: cover;
	object-position: center 35%;
}

/* Pink theme accent */
.btn_1, a.btn_1 {
	background: #e01066 !important;
	border-radius: 20px;
	padding: 10px 25px;
	font-weight: 500;
}
.btn_1:hover, a.btn_1:hover {
	background: #b50b50 !important;
}

/* Popular Tours Box container */
.popular-tours-wrapper {
	background: #ffffff;
	border-radius: 4px;
	padding: 30px;
	box-shadow: 0px 0px 15px rgba(0,0,0,0.05);
	margin-top: 25px;
	margin-bottom: 30px;
}

/* Testimonial full promo section */
.promo_full_bhutan {
	background: url(../img/bhutan_promo.jpg) no-repeat center center;
	background-size: cover;
	padding: 90px 0;
	position: relative;
}
.promo_full_bhutan::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0, 0, 0, 0.25);
}
.testimonial_card_single {
	position: relative;
	z-index: 2;
	background: rgba(30, 30, 30, 0.75);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border-radius: 6px;
	padding: 30px 40px;
	color: #ffffff;
	max-width: 650px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 20px;
}
.testimonial_card_single .avatar_circle {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #888888;
	flex-shrink: 0;
}
.testimonial_card_single .quote_text {
	font-style: italic;
	font-size: 15px;
	line-height: 1.6;
	color: #e0e0e0;
	margin: 0;
}

/*============================================================================================*/
/* Black Navigation Header Bar with White Text */
/*============================================================================================*/
header,
#header_1 header,
#header_2 header,
header.sticky,
#header_1 header.sticky,
#header_2 header.sticky {
	background-color: #000000 !important;
	border-bottom: 1px solid #222222 !important;
}

@media only screen and (min-width: 992px) {
	.main-menu > ul > li > a,
	.main-menu > ul > li.active > a,
	.main-menu > ul > li:hover > a {
		color: #ffffff !important;
		background-color: transparent !important;
	}
}

@media only screen and (max-width: 991px) {
	#header_menu {
		background-color: #cc0066 !important;
		background-image: url(../img/pattern_3.png) !important;
		padding: 25px 15px !important;
		text-align: center !important;
	}
	#header_menu img {
		width: 60px !important;
		height: 48px !important;
	}
	.main-menu ul li a {
		color: #555555 !important;
		background-color: transparent !important;
	}
	.main-menu ul li.submenu > a {
		color: #555555 !important;
		background: url(../img/arrow_down_menu.svg) no-repeat center right 15px !important;
	}
	.main-menu ul li.active > a {
		color: #cc0066 !important;
		font-weight: 500 !important;
	}
}

ul#tools_top li a.search-overlay-menu-btn {
	color: #ffffff !important;
}

ul#tools_top li a.search-overlay-menu-btn:hover {
	color: #cc0066 !important;
}

/* Mobile Toggle Menu Switch */
header .cmn-toggle-switch span,
header .cmn-toggle-switch span::before,
header .cmn-toggle-switch span::after {
	background-color: #ffffff !important;
}

/* =====================================================
   LOGO & COMPANY NAME — Oswald Light
   Logo bounding box: aspect-ratio 5/4 (W:H = 5:4)
   ===================================================== */

/* H1 wrapper: no extra spacing */
#logo_home h1 {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
}

/* Logo anchor = outer flex row (logo-box + brand name) */
#logo_home h1 a,
a.logo_link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 12px !important;
	text-indent: 0 !important;
	background-image: none !important;
	text-decoration: none !important;
	padding: 0 !important;
	height: auto !important;
	width: auto !important;
	transform: translateY(10px) !important;
}

/* ── Logo Text Group (wraps company_name + sub-lines) ── */
.logo_text_group {
	display: inline-flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: center !important;
}

/* Sub-lines hidden on desktop by default */
.logo_sub1,
.logo_sub2 {
	display: none !important;
}

/* ── Logo Bounding Box (aspect-ratio 5/4) ── */
#logo_home h1 a .logo_bbox {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	aspect-ratio: 5 / 4 !important;
	height: 48px !important;          /* desktop: chiều cao cố định */
	width: auto !important;           /* chiều rộng tự tính: 48×(5/4)=60px */
	overflow: hidden !important;
	padding: 0 !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
}

/* ── Logo <img> bên trong bounding box ── */
#logo_home h1 a .logo_bbox img,
#logo_home h1 a .logo_bbox .logo_img,
#logo_home h1 a .logo_bbox #logo {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: center !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
	display: block !important;
}

/* Fallback: img trực tiếp trong <a> (không có .logo_bbox) */
#logo_home h1 a > img:not(.logo_bbox img),
#logo_home h1 a > .logo_img:not(.logo_bbox .logo_img) {
	height: 48px !important;
	width: auto !important;
	aspect-ratio: 5 / 4 !important;
	object-fit: contain !important;
	object-position: center !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
	display: block !important;
}

/* ── Brand Name Typography ── */
#logo_home h1 a .company_name,
a.logo_link .company_name,
.logo_title {
	font-family: 'Oswald', sans-serif !important;
	font-weight: 300 !important;
	font-size: 20px !important;
	color: #ffffff !important;
	text-transform: uppercase !important;
	letter-spacing: 1.2px !important;
	white-space: nowrap !important;
	line-height: 1.2 !important;
	display: inline-block !important;
	vertical-align: middle !important;
}

/* =====================================================
   RESPONSIVE — MOBILE (< 768px)
   Header row = flexbox, icons pinned right
   Logo & Brand name GIỮ NGUYÊN kích thước desktop
   ===================================================== */
@media only screen and (max-width: 767px) {

	/* Header row: single-line flex, no wrap */
	header .container > .row {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		flex-wrap: nowrap !important;
	}

	/* Logo column: grows, min-width:0 để không overflow */
	header .container > .row > .col-xs-9 {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		padding-right: 0 !important;
	}

	/* Nav/icon column: cố định bên phải */
	header .container > .row > nav.col-xs-3 {
		flex: 0 0 auto !important;
		width: auto !important;
		padding-left: 8px !important;
	}

	/* Logo anchor: giữ gap gốc 12px */
	#logo_home h1 a {
		gap: 12px !important;
	}

	/* Logo bounding box: GIỮ NGUYÊN kích thước desktop */
	#logo_home h1 a .logo_bbox {
		height: 48px !important;
		aspect-ratio: 5 / 4 !important;
		width: auto !important;
	}

	/* Fallback img: GIỮ NGUYÊN kích thước desktop */
	#logo_home h1 a > img:not(.logo_bbox img),
	#logo_home h1 a > .logo_img:not(.logo_bbox .logo_img) {
		height: 48px !important;
		aspect-ratio: 5 / 4 !important;
		width: auto !important;
	}

	/* Brand name: GIỮ NGUYÊN kích thước desktop */
	#logo_home h1 a .company_name,
	a.logo_link .company_name,
	.logo_title {
		font-size: 20px !important;
		letter-spacing: 1.2px !important;
		white-space: nowrap !important;
		overflow: visible !important;
		text-overflow: clip !important;
	}
}

/* Header Desktop (>= 1200px): nav inline + search icon at far right */
@media only screen and (min-width: 1200px) {
	header .container > .row {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
	}
	header nav {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		gap: 15px !important;
	}
	.main-menu {
		order: 1 !important;
		float: none !important;
		display: inline-block !important;
	}
	.main-menu > ul {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	.main-menu > ul > li > a {
		padding: 20px 10px !important;
		white-space: nowrap !important;
	}
	ul#tools_top {
		order: 2 !important;
		float: none !important;
		margin: 0 !important;
		width: auto !important;
		display: flex !important;
		align-items: center !important;
	}
	ul#tools_top li a.search-overlay-menu-btn {
		position: static !important;
		top: 0 !important;
		left: 0 !important;
		margin: 0 !important;
	}
}

/* Topbar WhatsApp Link Styling */
ul#top_links {
	display: inline-flex !important;
	align-items: center !important;
	gap: 16px !important;
	float: right !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

ul#top_links li {
	display: inline-flex !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 0 !important;
}

a#whatsapp_link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	color: #ffffff !important;
	font-weight: 600 !important;
	font-size: 11px !important;
	text-decoration: none !important;
	transition: opacity 0.2s ease, color 0.2s ease !important;
}

a#whatsapp_link:hover {
	color: #25D366 !important;
	opacity: 0.9 !important;
}

a#whatsapp_link img.whatsapp_icon {
	width: 16px !important;
	height: 16px !important;
	display: inline-block !important;
	vertical-align: middle !important;
	border-radius: 3px !important;
}

@media only screen and (max-width: 767px) {
	#top_line .row {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
	}
	#top_line .hidden-xs {
		display: block !important;
	}
	#opening {
		display: none !important;
	}
}

@media only screen and (max-width: 400px) {
	a#whatsapp_link span.wa_text {
		display: none !important;
	}
}

@media only screen and (max-width: 524px) {
	#logo_home h1 a .company_name,
	a.logo_link .company_name,
	.logo_title {
		font-size: 12px !important;
		margin-top: 0 !important;
		align-self: flex-start !important;
		vertical-align: top !important;
		line-height: 1.6 !important;
	}
	.logo_sub1 {
		display: block !important;
		font-family: 'Josefin Sans', 'Trebuchet MS', sans-serif !important;
		font-weight: 500 !important;
		font-size: 10px !important;
		color: #ffffff !important;
		text-transform: none !important;
		letter-spacing: 0.3px !important;
		line-height: 1.4 !important;
		white-space: nowrap !important;
		margin-top: 1px !important;
	}
	.logo_sub2 {
		display: block !important;
		font-family: 'Josefin Sans', 'Trebuchet MS', sans-serif !important;
		font-weight: 300 !important;
		font-size: 10px !important;
		color: #ffffff !important;
		text-transform: none !important;
		letter-spacing: 0.3px !important;
		line-height: 1.4 !important;
		white-space: nowrap !important;
		margin-top: 1px !important;
	}
	#logo_home h1 a .logo_bbox,
	#header_menu img {
		transform: translateY(1px) !important;
	}
}

@media only screen and (min-width: 1200px) {
	#logo_home h1 a,
	a.logo_link {
		transform: translateY(5px) !important;
	}
}

/* =====================================================
   HIDE PRICES — all pages
   ===================================================== */
.price_grid,
.price_list {
	display: none !important;
}