.black-font{
	color: #000000 !important;
}

.white-font{
	color: #ffffff !important;
}

.green-font{
	color: #7132b2 !important;
}

.blue-light-font{
	color: #ffeb4c !important;
}

.all-text-grey{
	color: #868e96;
}

.nav-tab{
	background: #f6f6f6;
}

.gradient{
	background: linear-gradient(to right, #f7f7f7, #f5ffea) !important;
	background-attachment: fixed !important;
}

.logo-header {
	width: 60%;
}


/* Reduce header padding */
.navbar-top {
	padding: 0.1rem 0 !important;
}

.navbar {
	padding: 0 0.5rem !important;
}

/* Menu font color - white */
.navbar-light .navbar-nav .nav-link {
	color: #7131b3 !important;
	text-transform: uppercase;
	font-weight: bold;
}

.menu-selected{
	text-decoration: underline;
	text-underline-offset: 8px;
}

.nav-link-selected{
	text-decoration: underline !important;
	text-underline-offset: 8px !important;
	color: #7132b2 !important;
}

/* Menu hover color */
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
	color: #a86fe1 !important;
}

/* Dropdown menu items - black when not hovered */
.dropdown-item {
	color: #000000 !important;
}

/* Dropdown menu selected/hover background color */
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
	background-color: #7132b2 !important;
	color: #ffffff !important;
}

/* Remove shadow from header */
header.header-static,
header.navbar-sticky-on {
	box-shadow: none !important;
}

/* Make header always fixed at top with white-to-sky-blue gradient */
header.header-static {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 9999 !important;
	background: linear-gradient(to right, #ffffff, #ffea4b) !important;
	overflow: visible !important;
}

/* Keep header fixed on top when scrolling with white-to-sky-blue gradient */
header.navbar-sticky-on {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 9999 !important;
	background: linear-gradient(to right, #87ceeb, #0274ff) !important;
	overflow: visible !important;
}

.carousel-control-next, .carousel-control-prev {
	top: 100px !important;
}

/* Add padding to body to prevent content from going under fixed header */
body {
	/*padding-top: 80px !important;*/
}

/* Prevent horizontal scroll on mobile */
html, body {
	overflow-x: hidden !important;
	max-width: 100vw !important;
}

/* Mobile Navigation Styles */
@media (max-width: 991px) {
	/* Prevent horizontal overflow */
	.d-lg-none {
		overflow: visible !important;
		max-width: 100% !important;
		position: relative !important;
		z-index: 10000 !important;
		height: auto !important;
		max-height: none !important;
	}

	.d-lg-none .container {
		max-width: 100% !important;
		padding-left: 15px !important;
		padding-right: 15px !important;
		margin: 0 auto !important;
	}

	/* Mobile logo */
	.logo-header-mobile {
		width: 80px !important;
		height: auto;
		max-width: 80px !important;
	}

	/* Hamburger menu button styling */
	.navbar-toggler {
		border: 2px solid #ffffff !important;
		padding: 0.5rem 0.75rem !important;
		border-radius: 4px !important;
		z-index: 10001 !important;
		position: relative !important;
	}

	.navbar-toggler:focus {
		outline: none !important;
		box-shadow: none !important;
	}

	.navbar-toggler-icon {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
		width: 1.5rem !important;
		height: 1.5rem !important;
	}

	/* Mobile navbar positioning */
	.d-lg-none .navbar {
		padding: 0.5rem 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		z-index: 10000 !important;
		position: relative !important;
		overflow: visible !important;
		height: auto !important;
		max-height: none !important;
	}

	.d-lg-none .container {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		width: 100% !important;
		box-sizing: border-box !important;
		position: relative !important;
		overflow: visible !important;
	}

	/* Mobile menu dropdown */
	.d-lg-none .navbar-collapse {
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		background-color: #ffffff !important;
		box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3) !important;
		padding: 1rem 0 !important;
		z-index: 10002 !important;
		margin: 0 !important;
		box-sizing: border-box !important;
		max-height: 80vh !important;
		overflow-y: auto !important;
	}

	/* Ensure collapsed state is hidden */
	.d-lg-none .navbar-collapse.collapse:not(.show) {
		display: none !important;
	}

	/* Ensure expanded state is visible */
	.d-lg-none .navbar-collapse.collapse.show {
		display: block !important;
	}

	/* Mobile nav links */
	.d-lg-none .navbar-nav {
		width: 100% !important;
		margin: 0 !important;
		display: block !important;
		flex-direction: column !important;
	}

	.d-lg-none .nav-item {
		padding: 0 !important;
		width: 100% !important;
		display: block !important;
	}

	.d-lg-none .nav-link {
		display: block !important;
		padding: 0.75rem 1.5rem !important;
		color: #000000 !important;
		font-size: 18px !important;
		line-height: normal !important;
		text-transform: uppercase;
		font-weight: 900 !important;
		white-space: normal !important;
		word-wrap: break-word !important;
		background-color: #f5f5f5 !important;
		border-bottom: 1px solid #ddd !important;
		text-decoration: none !important;
	}

	.d-lg-none .nav-link:hover {
		color: #7132b2 !important;
		background-color: #f8f9fa !important;
	}

	/* Mobile menu selected state */
	.d-lg-none .nav-link-selected {
		text-decoration: underline !important;
		text-underline-offset: 8px !important;
		color: #7132b2 !important;
	}

	/* Mobile dropdown menu */
	.d-lg-none .dropdown-menu {
		position: static !important;
		float: none !important;
		border: none !important;
		box-shadow: none !important;
		background-color: #f8f9fa !important;
		padding-left: 1rem !important;
		width: 100% !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}

	.d-lg-none .dropdown-item {
		padding: 0.5rem 1.5rem !important;
		color: #000000 !important;
		font-size: 14px !important;
		white-space: normal !important;
		word-wrap: break-word !important;
	}

	.d-lg-none .dropdown-item:hover {
		background-color: #7132b2 !important;
		color: #ffffff !important;
	}

	/* Adjust body padding for mobile */
	body {
		/*
		padding-top: 70px !important;
		*/
	}

	/* Ensure header doesn't overflow */
	header.header-static,
	header.navbar-sticky-on {
		width: 100% !important;
		max-width: 100vw !important;
		overflow: visible !important;
		height: auto !important;
		max-height: none !important;
	}
}

/* Center align destination header */
#destination-header {
	text-align: center !important;
	position: relative;
	z-index: 2;
}

#destination-header p,
#destination-header h1,
#destination-header a {
	text-align: center !important;
}

/* Background text 'DESTINATION' behind destination-header */
.destination-bg-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 60px;
	font-weight: 700;
	color: #ecebeb;
	opacity: 0.5;
	z-index: 1;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}

/* Destination title (nama_destinasi) styling */
.destination-title {
	font-family: 'Noto Serif', serif !important;
	padding-top: 10px !important;
}

/* ListroBox border radius */
.listroBox {
	border-radius: 15px !important;
	overflow: hidden;
}

.listroBox figure {
	border-radius: 15px 15px 0 0 !important;
	overflow: hidden;
}

/* Tour name link styling */
.tour-name-link {
	font-family: 'Noto Serif', serif !important;
	font-size: 1.3rem !important;
}

.tour-name-link:hover {
	color: #7132b2 !important;
}

.wa-icon-style{
	height: 70px !important;
}

/* Diamond shapes decoration */
.diamond-decoration {
	position: absolute;
	bottom: -50px;
	left: 50px;
	z-index: 100;
	pointer-events: none;
}

.diamond {
	position: absolute;
	transform: rotate(45deg);
}

.diamond-green {
	width: 120px;
	height: 120px;
	background-color: #ffeb4c;
	bottom: 0;
	left: 0;
	z-index: 101;
}

.diamond-blue {
	width: 80px;
	height: 80px;
	background-color: #fe5b2e;
	bottom: 70px;
	left: 80px;
	z-index: 102;
}

.diamond-decoration-right {
	position: absolute;
	bottom: -50px;
	right: 50px;
	z-index: 100;
	pointer-events: none;
}

.diamond-decoration-right2 {
	position: absolute;
	bottom: -90px;
	right: 50px;
	z-index: 100;
	pointer-events: none;
}

.diamond-light-green {
	width: 120px;
	height: 120px;
	background-color: #d7d7d7e3;
	bottom: 0;
	left: 0;
	z-index: 101;
}

.diamond-light-blue {
	width: 80px;
	height: 80px;
	background-color: #cbb8e0;
	bottom: 70px;
	left: 80px;
	z-index: 102;
}

/* Make carousel section position relative for absolute positioning */
section:first-of-type {
	position: relative;
	z-index: 1;
}


/* About Page Customizations */
/* About image container with decorative borders */
.about-image {
	/* position: relative !important;*/
	z-index: 2 !important;
}

.about-image img {
	position: relative !important;
	z-index: 2 !important;
	display: block !important;
	width: 100% !important;
}

/* Dark blue square border - back/behind, top left */
.about-image:before {
	content: "" !important;
	position: absolute !important;
	top: -20px !important;
	left: -10px !important;
	width: 90% !important;
	height: 90% !important;
	/* border: 6px solid #0274ff !important; */
	z-index: 1 !important;
}

/* Light blue square border - front, bottom right */
.about-image:after {
	content: "" !important;
	position: absolute !important;
	bottom: 0px !important;
	right: 45px !important;
	width: 90% !important;
	height: 100% !important;
	border: 6px solid #a985cd !important;
	transform: rotate(7deg);
	z-index: 3 !important;
}

/* Make feature icons bigger and centered */
.feature .icon {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	margin: 0 auto 20px auto !important;
	font-size: 60px !important;
	width: 100px !important;
	height: 100px !important;
}

.feature .icon i {
	font-size: 60px !important;
}

/* Center align title text with bigger size and blue color */
.feature .title {
	text-align: center !important;
	font-size: 2rem !important;
	color: #7132b2 !important;
}

/* Change bullet points to checkmarks in feature content */
.feature .content ul {
	list-style: none !important;
	padding-left: 0 !important;
}

.feature .content ul li {
	position: relative !important;
	padding-left: 30px !important;
	margin-bottom: 10px !important;
}

.feature .content ul li:before {
	content: "\f00c" !important;
	font-family: "Font Awesome 5 Free" !important;
	font-weight: 900 !important;
	position: absolute !important;
	left: 0 !important;
	color: #7132b2 !important;
	font-size: 16px !important;
}

@media (max-width: 768px) {
	.diamond-decoration {
		left: 20px;
		bottom: -30px;
	}

	.diamond-green {
		width: 80px;
		height: 80px;
	}

	.diamond-blue {
		width: 50px;
		height: 50px;
		bottom: 30px;
		left: 40px;
	}

	.diamond-decoration-right {
		right: 130px;
	}

	.diamond-light-green {
		width: 60px;
		height: 60px;
		bottom: 0px;
		left: 0px;
	}
	
	.diamond-light-blue {
		width: 40px;
		height: 40px;
		bottom: 40px;
		left: 40px;
	}

	.about-image:after {
		right: 25px !important;
	}
}

/* Feature Box Custom Layout */
.featureBox {
	display: flex !important;
	gap: 20px;
}

.feature-box-icon-custom {
	min-width: 50px;
	width: 50px;
	height: 50px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.feature-box-icon-custom i {
	font-size: 25px;
	color: #ffffff;
}

.feature-box-content {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.feature-box-title {
	margin-bottom: 10px;
	font-weight: 600;
}

.feature-box-desc {
	margin: 0;
	line-height: 1.6;
}

/* Feature Icon Colors */
.feature-icon-orange {
	background-color: #f1a501 !important;
}

.feature-icon-red {
	background-color: #df6951 !important;
}

.feature-icon-blue {
	background-color: #006380 !important;
}

.feature-icon-green {
	background-color: #2d5016 !important;
}

@media (max-width: 768px) {
	.feature-box-icon-custom {
		min-width: 60px;
		width: 60px;
		height: 60px;
	}

	.feature-box-icon-custom i {
		font-size: 28px;
	}
}

/* Innerpage Banner - Fixed Background */
.innerpage-banner {
	background-attachment: fixed !important;
	position: relative;
	z-index: 1;
	height: 350px;
	padding-top: 180px !important;
	/*
	padding-top: calc(3rem + 50px) !important;
	padding-bottom: calc(3rem + 50px) !important;
	*/
}

/* Make sections after banner overlay it as you scroll */
.innerpage-banner ~ section,
.innerpage-banner ~ .Categories {
	position: relative;
	z-index: 2;
	background: linear-gradient(to right, #f7f7f7, #f5ffea);
}

/* Remove gradient background for specific pages */
.no-gradient-bg {
	background: transparent !important;
}

.container-slider {
	max-width: 100%;
	max-height: 600px;
	position: relative;
	overflow: hidden;
}

.slide-banner {
	display: block;
	width: 100%;
	/*max-height: 530px !important;*/
}

.card-days {
	font-size: 16px;
	position: absolute;
	bottom: 15px;
	z-index: 1;
	background-color: rgba(255, 91, 46, 0.831);
	padding: 9px 10px;
	display: inline-block;
	color: #fff;
	line-height: 1;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	border-radius: 3px;
}

@media (max-width: 991px) {
	.innerpage-banner {
		background-attachment: fixed !important;
		height: 300px;
		padding-top: 150px !important;
	}

	.container-slider {
		max-width: 100%;
		max-height: 450px;
		position: relative;
		overflow: hidden;
		padding-top: 100px;
	}

	.navbar-light .navbar-nav .nav-link {
		color: #000000 !important;
		text-transform: uppercase;
		font-weight: bold;
	}
}

.padding-content-small{
	padding-top: 40px;
	padding-bottom: 40px;
}

.title-padding-none{
	padding: 0px !important;
}

.listroBox ul {
	padding: 5px 15px 5px 20px !important;
}

.listroBoxmain {
	padding: 10px 15px 5px 20px !important;
}

.feature-box .feature-box-icon {
	padding: 0px 0px !important;
	line-height: 0px !important;
}

.margin-bottom-field
{
	margin-bottom: 1rem;
}

.text-transform-none{
	text-transform: none !important;
}

div.whatsapp {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index:99;
}

.TravelGo-category-footer {
	padding: 0px !important;
	border-top: none !important;
}

@media (max-width: 768px){
	.slide-banner {
		height: 100% !important ;
	}

	.listingDetails .nav-tabs .nav-item .nav-link {
		color: #343a40;
		padding: 12px 12px;
		font-size: 12px;
	}
}

@media (max-width: 450px){
	.logo-header {
		width: 55px;
	}

	a.navbar-brand > strong {
		font-size: 17px;
		font-weight: bold;
	}

	.listingDetails .nav-tabs .nav-item .nav-link {
		color: #343a40;
		padding: 12px 12px;
		font-size: 12px;
	}

	.about-image:after {
		right: 15px !important;
	}
}