.navbar .dropdown-menu::after {
	content: '';
	border: 6px solid transparent;
	width: 0;
	height: 0;
	border-bottom-color: #5f5c5c;
	position: absolute;
	top: -12px;
	left: 30px;
}

.navbar .nav-item:hover>a {
	color: #f68b1e;
}

.navbar .nav-item .dropdown-menu li>a {
	padding: 10px 14px;
	font-size: 13px;
	color: #fff;
	text-shadow: 0 -1px 1px #111;
	-webkit-transition: color 0.25s ease-out;
	-moz-transition: color 0.25s ease-out;
	-ms-transition: color 0.25s ease-out;
	-o-transition: color 0.25s ease-out;
	transition: color 0.25s ease-out;

}

.navbar .nav-item .dropdown-menu li:hover>a {
	text-shadow: 0 -1px 1px #111;
	color: #eee;
	background: #706f6f;

}

@media only screen and (min-width: 1200px) {

	.navbar .navbar-nav>li>a {
		font-size: 1.2em;
		padding: 12px 12px;
		color: #5f5c5c;
		text-shadow: 0 -1px 1px #fff;
		-webkit-transition: color 0.25s ease-out;
		-moz-transition: color 0.25s ease-out;
		-ms-transition: color 0.25s ease-out;
		-o-transition: color 0.25s ease-out;
		transition: color 0.25s ease-out;
	}

	/* DropDwn hover */
	.navbar .dropdown:hover .dropdown-menu {
		display: block;
		-webkit-transition: color 0.25s ease-out;
		-moz-transition: color 0.25s ease-out;
		-ms-transition: color 0.25s ease-out;
		-o-transition: color 0.25s ease-out;
		transition: color 0.25s ease-out;
	}

	.navbar.menu-fixed-color .navbar-nav>li>a {
		text-shadow: 0 -1px 1px #e8831d;
		color: #fff;
	}

	.navbar.menu-fixed-color .navbar-nav>li:hover>a {
		color: #5f5c5c;
	}


}




.dropdown-menu {
	padding: 0;
	background: #5f5c5c;
	background-color: #5f5c5c !important;
	-webkit-transition: opacity .3s ease, top .25s ease;
	-moz-transition: opacity .3s ease, top .25s ease;
	-ms-transition: opacity .3s ease, top .25s ease;
	-o-transition: opacity .3s ease, top .25s ease;
	transition: opacity .3s ease, top .25s ease;

}

/* @media only screen and (min-width: 1180px) {
	
/* } */



.navbar .container .navbar-collapse {
	flex-grow: 0;
}


.menu-fixed-color {
	padding-top: 0.2rem !important;
	padding-bottom: 0.2rem !important;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
	border-bottom: solid 1px #d27618;
	box-shadow: 0px 12px 25px rgba(50, 50, 50, .30);
	background-color: #f68b1e !important;

}



/* css TOP BAR */

/* mobile  */
@media (max-width: 767px) {

	.navbar .nav-item>a {
		color: #333;
	}

	.navbar .navbar-nav .nav-link.show {
		color: #f68b1e;
	}

	.navbar .container {
		/* padding: 0rem !important; */
	}

	.navbar .dropdown-menu::after {
		content: none !important;

	}

	.dropdown-menu {
		background-color: #676767 !important;
		color: #eee !important;
		overflow-y: auto;
		/* max-height: 400px; */
		animation: move-down 0.5s;
	}


}



.scroll-indicator {
	position: absolute;
	top: 50%;
	right: 20%;
	transform: translateY(-50%);
	font-size: 24px;
	color: #fffcfc;
	opacity: 0.7;
	animation: move-down 1.5s infinite;
}

@keyframes move-down {
	from {
		opacity: 0;
		transform: translateY(-10%);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.button-search {
	font-weight: 600;
	padding: 12px 12px;
	color: #5f5c5c;
	text-shadow: 0 -1px 1px #fff;
}

@media(max-width:1199px) {

	.dropdown-menu {
		background-color: #676767 !important;
		color: #eee !important;
		overflow-y: auto;
		animation: move-down 0.5s;
	}

	.navbar .nav-item>a {
		color: #333;
	}

	.navbar .navbar-nav .nav-link.show {
		color: #f68b1e;
	}

	.navbar .container {
		/* padding: 0rem !important; */
	}

	.navbar .dropdown-menu::after {
		content: none !important;

	}

	.offcanvas-body {
		width: 100%;
	}

	.nav-link {
		display: flex !important;
		align-items: center !important;
		padding: 16px 24px !important;
		border-bottom: 1px solid #e0e0e0 !important;
	}

	.button-search {
		background-color: rgba(0, 0, 0, 0);
		color: rgba(33, 37, 41, 0.75);
		border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
	}

	.button-search:hover {
		border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
	}

	.button-search i::before {
		font-weight: 500;
	}

	.button-search:focus {
		box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width);
	}

	.navbar.menu-fixed-color .button-search {
		text-shadow: 0 -1px 1px #e8831d;
	}
}

@media(min-width: 1200px) {
	.navbar.menu-fixed-color .button-search {
		text-shadow: 0 -1px 1px #e8831d;
		color: #fff;
	}

	.button-search:focus {
		box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width);
	}

	.button-search:hover i::before {
		color: #5f5c5c;
	}

}

@media(max-width:576px) {
	.logo-nav {
		width: 150px !important;
	}
}

/* .search-results {
	min-height: 350px;
	max-height: 350px;
	overflow-y: auto;
}
 */


/* CSS FOR SEARCH MODAL */
.search-results {
	background: #fcfcfc;
	scrollbar-width: thin;
}

.search-results::-webkit-scrollbar {
	width: 1px;
}

.search-result-item {
	min-width: 250px;
	transition: transform 0.2s ease;
}

.search-result-item:hover {
	transform: translateY(-2px);
}

.search-result-img {
	width: 60px;
	height: 45px;
	object-fit: cover;
}

#recentSearchesList {
	white-space: nowrap;
	overflow-x: auto;
	padding: 10px 5px;
	scrollbar-width: thin;

}

#recentSearchesList::-webkit-scrollbar {
	height: 6px;
}

#recentSearchesList::-webkit-scrollbar-track {
	background: #f1f1f1;
}

#recentSearchesList::-webkit-scrollbar-thumb {
	background: #888;
	border: none;
}

.recent-search-item {
	background-color: #f8f9fa;
	border-radius: 20px;
	padding: 5px 12px;
	margin: 2px;
	display: inline-block;
	font-size: 0.9em;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

#mainSearchBtn{
	min-width: 40px !important;
}

.recent-search-item:hover {
	background-color: #e9ecef;
}

.recent-search-item .btn-remove {
	background: none;
	border: none;
	color: #6c757d;
	font-size: 0.8em;
	padding: 0;
	margin-left: 5px;
}

.recent-search-item .btn-remove:hover {
	color: #dc3545;
}

.loading-spinner {
	display: none;
	text-align: center;
	padding: 20px;
}

.highlight {
	background-color: #fff3cd;
	padding: 1px 0px !important;
	border-radius: 5px;
}

.loading-spinner.show {
	display: block !important;
}

.loading-spinner.hide {
	display: none !important;
}

@media (max-width: 767px) {
	.modal-search {
		height: 100vh !important;
	}
}

.modal.modal-slide .modal-dialog {
  transform: translateX(-100%);
  transition: transform .3s ease-out;
}

.modal.fade.modal-slide.show .modal-dialog {
  transform: translateX(0);
}

.modal.fade.modal-slide .modal-backdrop {
  opacity: .5;
  transition: opacity .3s ease-out;
}