/* ========================================
   CSS VARIABLES & ROOT SETTINGS
   ======================================== */
:root {
	--content-color: #231f20;
	--primary-color: #02AA9F;
	--primary-color-hover: #028a80;
	--title-font: 'Montserrat', sans-serif;
	--base-text-font: 'Open Sans', sans-serif;
	--title-font-weight: '700';
}

/* ========================================
   BASE & RESET STYLES
   ======================================== */
body {
	margin: 0;
	padding: 0;
	font-family: var(--content-font-family, Arial, sans-serif);
	font-weight: lighter;
	font-size: 16px;
	color: var(--content-color);
	background-color: #F4F4F4;
	overflow-x: hidden;
}

button:focus {
	outline: none !important;
}

/* ========================================
   FONTS
   ======================================== */
.title-font {
	font-family: var(--title-font);
}

.base-font {
	font-family: var(--base-text-font);
}


/* ========================================
   FORM ELEMENTS
   ======================================== */
/* Input styling */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type=number] {
	-moz-appearance: textfield;
}

input:focus,
textarea:focus,
select:focus {
	outline: none !important;
	box-shadow: none !important;
	border-color: var(--primary-color) !important;
}

input:focus+.input-group-text {
	outline: none !important;
	box-shadow: none !important;
	border-color: var(--primary-color) !important;
}

.form-check-input:checked {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.text-one-color {
	color: var(--primary-color);
}

.background-one-color {
	background-color: var(--primary-color);
}

/* ========================================
   BUTTON STYLES
   ======================================== */
.btn-one-color {
	color: white;
	border-color: var(--primary-color);
	background-color: var(--primary-color);
}

.btn-one-color:hover {
	color: var(--primary-color);
	background-color: white;
	border-color: var(--primary-color);
}

.btn-one-color-inverse {
	color: var(--primary-color);
	border-color: white;
	background-color: white;
}

.btn-one-color-inverse:hover {
	color: white;
	background-color: var(--primary-color);
	border-color: white;
}

.btn-outline-one-color {
	background: transparent;
	color: var(--primary-color);
	border-color: var(--primary-color);
}

.btn-outline-one-color:hover,
.btn-outline-one-color:active,
.btn-outline-one-color:focus,
.btn-outline-one-color.active {
	color: white;
	border-color: var(--primary-color);
	background-color: var(--primary-color);
}

/* ========================================
   LINK STYLES
   ======================================== */
a {
	color: var(--primary-color);
	text-decoration: none;
}

a:hover {
	color: var(--primary-color-hover);
	text-decoration: none !important;
}

/* ========================================
   HEADER & NAVIGATION
   ======================================== */
.header-container {
	width: 100%;
}

.main-header {
	padding-left: 12vw;
	padding-right: 12vw;
	box-sizing: border-box;
	justify-content: center;
}

/* Main Navigation Styles */
.main-nav-wrapper {
	display: block;
}

.main-navbar {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 0;
}

.main-navbar-expand-lg {
	flex-wrap: nowrap;
	justify-content: flex-start;
}

.main-navbar-nav {
	display: flex;
	flex-direction: column;
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
}

.main-navbar-nav .main-nav-link {
	padding: 0.5rem 1rem;
	color: white;
	text-decoration: none;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
	border-radius: 15px;
	margin: 2px;
}

.main-navbar-nav .main-nav-link:hover,
.main-navbar-nav .main-nav-link:focus {
	color: white !important;
	background-color: var(--primary-color) !important;
}

.main-navbar-nav .main-nav-link.main-active {
	color: white !important;
	background-color: var(--primary-color) !important;
}

.main-navbar-nav .main-nav-item {
	position: relative;
}

/* Secondary Navigation Styles */
.secondary-navbar {
	position: relative;
	z-index: 1000;
}

.secondary-navbar .nav-link {
	color: white !important;
	font-weight: 500;
	padding: 12px 20px;
	transition: all 0.3s ease;
	border-radius: 0;
	font-style: var(--title-font);
}

.secondary-navbar .nav-link:hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: white !important;
}

.secondary-navbar .nav-link.active {
	background-color: rgba(255, 255, 255, 0.2);
	color: white !important;
}

/* Navigation General Styles */
.nav {
	display: block;
}

.nav-link {
	color: white;
	transition: all 0.3s ease;
	padding: 8px 16px;
	margin: 2px;
	border-radius: 15px;
	text-decoration: none;
	text-transform: uppercase;
	font-style: var(--title-font);

}

.nav-link:hover,
.nav-link:focus {
	background: var(--primary-color) !important;
	color: white !important;
}

.nav-link.active {
	color: white !important;
	background: var(--primary-color) !important;
}

.nav-link.dropdown-toggle:hover,
.nav-link.dropdown-toggle:focus {
	background: var(--primary-color) !important;
	color: white !important;
}

/* Remove Bootstrap's default arrow from dropdown toggles */
.dropdown-toggle::after {
	display: none !important;
}

/* FontAwesome chevron styling for custom arrow */
.custom-arrow {
	margin-right: 15px;
	transition: transform 0.3s ease;
	font-size: 0.8em;
	vertical-align: middle;
	display: inline-block;
	float: right;
}

/* Rotate arrow when dropdown is open - more specific selectors */
.dropdown-toggle[aria-expanded="true"] .custom-arrow {
	transform: rotate(180deg);
}

/* For nested dropdowns */
.dropdown-menu .nav-item.dropdown.show .custom-toggle .custom-arrow {
	transform: rotate(180deg);
}

/* Make all dropdown items not bold */
.dropdown-menu .dropdown-item {
	font-weight: 400 !important;
}

/* Ensure proper alignment for dropdown toggles */
.dropdown-toggle.custom-toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

/* DROPDOWN ITEM HOVER AND ACTIVE STATES - Primary Color #02AA9F */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
	background-color: #02AA9F !important;
	color: white !important;
}

/* Active state for dropdown items */
.dropdown-menu .dropdown-item:active {
	background-color: #02AA9F !important;
	color: white !important;
}

/* SUB-DROPDOWN TOGGLE HOVER AND ACTIVE STATES */
.dropdown-menu .nav-link.dropdown-toggle:hover,
.dropdown-menu .nav-link.dropdown-toggle:focus {
	background-color: #02AA9F !important;
	color: white !important;
}

/* Active state for sub-dropdown toggles */
.dropdown-menu .nav-link.dropdown-toggle[aria-expanded="true"] {
	background-color: #02AA9F !important;
	color: white !important;
}

/* Override Bootstrap's default blue focus states */
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .nav-link:focus {
	background-color: #02AA9F !important;
	color: white !important;
	box-shadow: none !important;
	outline: none !important;
}

/* Remove any blue backgrounds */
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
	background-color: #02AA9F !important;
	color: white !important;
}

/* Ensure arrow color changes with background */
.dropdown-menu .nav-link.dropdown-toggle:hover .custom-arrow,
.dropdown-menu .nav-link.dropdown-toggle:focus .custom-arrow,
.dropdown-menu .nav-link.dropdown-toggle[aria-expanded="true"] .custom-arrow {
	color: white !important;
}

/* Mobile-specific styles */
@media (max-width: 991.98px) {
	.dropdown-menu {
		position: static !important;
		display: none;
		width: 100%;
		padding: 0 !important;
		margin: 0 !important;
		border: none !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		background-color: transparent !important;
		transform: none !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
	}

	.dropdown-menu.show {
		display: block !important;
	}

	.dropdown-menu .dropdown-menu {
		position: static !important;
		left: auto !important;
		margin: 0 !important;
		padding-left: 1rem !important;
		background-color: transparent !important;
	}

	.dropdown-menu .nav-link.dropdown-toggle {
		font-weight: 400 !important;
	}

	.dropdown-menu {
		right: 0 !important;
		left: auto !important;
	}

	#topMainMenuMobile {
		overflow: visible !important;
	}

	.main-nav-wrapper {
		overflow: visible !important;
	}

	.header .dropdown-menu {
		position: absolute !important;
		background-color: white !important;
		border: 1px solid #ddd !important;
		border-radius: 0.375rem !important;
		box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
		width: auto;
	}

	#topMainMenuMobile .dropdown-menu {
		width: 100%;
	}

	#topMainMenuMobile .dropdown-menu .nav-item.dropdown .dropdown-menu .dropdown-item {
		padding-left: 2.3rem !important;
	}
}

/* ========================================
   DROPDOWN MENUS
   ======================================== */
.main-navbar-nav .main-dropdown-toggle::after {
	display: inline-block;
	margin-left: 0.255em;
	vertical-align: 0.255em;
	content: "";
	border-top: 0.3em solid;
	border-right: 0.3em solid transparent;
	border-bottom: 0;
	border-left: 0.3em solid transparent;
}

.main-navbar-nav .main-dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	display: none;
	float: left;
	min-width: 10rem;
	padding: 0.5rem 0;
	margin: 0.125rem 0 0;
	font-size: 1rem;
	color: #212529;
	text-align: left;
	list-style: none;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 0.375rem;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
}

.main-navbar-nav .main-dropdown-menu.main-show {
	display: block;
}

.main-navbar-nav .main-dropdown-item {
	display: block;
	width: 100%;
	padding: 0.25rem 1rem;
	clear: both;
	font-weight: 400;
	color: #212529;
	text-align: inherit;
	text-decoration: none;
	white-space: nowrap;
	background-color: transparent;
	border: 0;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.main-navbar-nav .main-dropdown-item:hover,
.main-navbar-nav .main-dropdown-item:focus {
	color: white !important;
	background-color: var(--primary-color) !important;
	border-radius: 15px;
}

.main-navbar-nav .main-dropdown-item.main-active {
	color: white;
	background-color: var(--primary-color);
	border-radius: 15px;
}

.dropdown-item:hover {
	background: var(--primary-color) !important;
	color: white !important;
}

.secondary-navbar .dropdown-toggle::after {
	margin-left: 8px;
	vertical-align: middle;
}

/* ========================================
   MEGAMENU
   ======================================== */
.megamenu-wrapper {
	min-width: 100vw;
	left: 0 !important;
	transform: none !important;
	margin-top: 0 !important;
	border-radius: 0 0 8px 8px;
	min-height: 300px;
}

.megamenu-wrapper h5 {
	color: var(--primary-color, #02AA9F);
	font-weight: 600;
	margin-bottom: 15px;
	font-size: 1.1rem;
}

.megamenu-wrapper .link-hover {
	color: #333;
	transition: all 0.3s ease;
	display: block;
	padding: 5px 0;
	text-decoration: none;
	font-size: 0.95rem;
}

.megamenu-wrapper .link-hover:hover {
	color: var(--primary-color, #02AA9F);
	padding-left: 5px;
	text-decoration: none;
}

.megamenu-wrapper .text-one-color {
	color: var(--primary-color) !important;
}

/* ========================================
   MOBILE NAVIGATION
   ======================================== */
.navbar-toggler-icon-custom {
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	vertical-align: middle;
	position: relative;
}

.navbar-toggler-icon-custom span {
	display: block;
	height: 2px;
	width: 100%;
	background: white;
	margin: 3px 0;
	transition: 0.3s;
	border-radius: 1px;
}

.hamburger-btn[aria-expanded="true"] .navbar-toggler-icon-custom span:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-btn[aria-expanded="true"] .navbar-toggler-icon-custom span:nth-child(2) {
	opacity: 0;
}

.hamburger-btn[aria-expanded="true"] .navbar-toggler-icon-custom span:nth-child(3) {
	transform: rotate(-45deg) translate(7px, -6px);
}

.mobile-close-button {
	position: absolute;
	top: 10px;
	right: 15px;
	z-index: 1001;
	color: white !important;
	font-size: 1.2rem;
}

.mobile-close-button:hover {
	color: var(--primary-color) !important;
}

.mobile-menu-container {
	max-height: 70vh;
	overflow-y: auto;
}

.mobile-menu-link {
	transition: all 0.3s ease;
}

.mobile-menu-link:hover {
	background-color: #f8f9fa !important;
	color: var(--primary-color, #02AA9F) !important;
}

.mobile-menu-link.active {
	background-color: var(--primary-color, #02AA9F) !important;
	color: white !important;
}

.mobile-menu-item:last-child .mobile-menu-link {
	border-bottom: none;
}

.mobile-menu-link[aria-expanded="true"] i {
	transform: rotate(180deg);
}

.mobile-menu-link i {
	transition: transform 0.3s ease;
}

.main-mobile-menu-container {
	max-height: 70vh;
	overflow-y: auto;
}

.main-mobile-menu-link {
	transition: all 0.3s ease;
	color: white !important;
	padding: 10px 15px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	font-weight: 500;
}

.main-mobile-menu-link:hover {
	background-color: rgba(255, 255, 255, 0.1) !important;
	color: var(--primary-color, #02AA9F) !important;
}

.main-mobile-menu-link.main-active {
	background-color: var(--primary-color, #02AA9F) !important;
	color: white !important;
}

.main-mobile-menu-item:last-child .main-mobile-menu-link {
	border-bottom: none;
}

.main-mobile-menu-link[aria-expanded="true"] i {
	transform: rotate(180deg);
}

.main-mobile-menu-link i {
	transition: transform 0.3s ease;
}

.mobile-main-nav .navbar-nav {
	flex-direction: column;
	width: 100%;
}

.mobile-main-nav .nav-link {
	color: #333 !important;
	padding: 10px 15px;
	border-bottom: 1px solid #eee;
	font-weight: 500;
}

.mobile-main-nav .nav-link:hover {
	background-color: #f8f9fa;
	color: var(--primary-color, #02AA9F) !important;
}

/* ========================================
   FOOTER
   ======================================== */
#Footer {
 background-color: #303031;
}

#FooterMain,
#FooterMain a,
#FooterMain p,
#FooterMain li,
#FooterMain h5,
#FooterMain span {
	color: #ffffff;
	text-transform: uppercase;
}

#FooterMain,
#FooterMain a,
#FooterMain p,
#FooterMain li,
#FooterMain span {
	font-size: .9rem;
}

#Footer a:hover {
	color: var(--primary-color);
}

#FooterNewsletter {
	background-image: url('/files/uploads/premiumdrinks2025/menu/Rectangle 6463.webp');
	background-size: cover;
	background-position: center;
	padding: 4rem 20px;
	text-align: center;
	margin-bottom: 0;
	position: relative;
}

/* ========================================
   FILTER COMPONENTS
   ======================================== */
.filter-container .accordion-button {
	color: var(--primary-color);
	font-weight: 600;
	box-shadow: none !important;
}

.filter-container .accordion-button:not(.collapsed) {
	background-color: rgba(var(--bs-primary-rgb), 0.05);
}

.filter-container .accordion-button::after {
	filter: invert(35%) sepia(90%) saturate(1500%) hue-rotate(180deg);
}

.filter-container .categories-navigation .nav-link {
	color: #333;
	transition: color 0.2s;
}

.filter-container .categories-navigation .nav-link:hover,
.filter-container .categories-navigation .nav-link.active {
	color: var(--primary-color) !important;
	font-weight: 500;
}

/* ========================================
   BREADCRUMB
   ======================================== */
.breadcrumb-wrapper {
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 14px;
	color: #909090;
	line-height: 1.4;
}

.breadcrumb-text {
	font-weight: 500;
	color: #909090;
	margin-right: 5px;
}

.breadcrumb-path {
	font-weight: 400;
	color: #909090;
}

.breadcrumb-path a {
	color: #909090;
	text-decoration: none;
	transition: color 0.3s ease;
}

.breadcrumb-path a:hover {
	color: var(--primary-color, #02AA9F);
	text-decoration: underline;
}

.breadcrumb-path .current-page {
	color: #909090;
	font-weight: 500;
}

/* ========================================
   PRELOADER
   ======================================== */
.preloader {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	z-index: 6001;
	display: flex;
	background: linear-gradient(318deg, rgba(0, 0, 0, 1), rgba(255, 255, 255, 1));
	background-size: 200% 300%;
	-webkit-animation: preLoaderAnimation 5s ease infinite;
	-moz-animation: preLoaderAnimation 5s ease infinite;
	animation: preLoaderAnimation 5s ease infinite;
}

.preloader:after {
	content: "";
	height: 100%;
	display: inline-block;
	vertical-align: middle;
}

.preloader .spinner-border {
	color: var(--primary-color) !important;
}

@-webkit-keyframes preLoaderAnimation {
	0% {
		background-position: 57% 0%
	}

	50% {
		background-position: 44% 100%
	}

	100% {
		background-position: 57% 0%
	}
}

@-moz-keyframes preLoaderAnimation {
	0% {
		background-position: 57% 0%
	}

	50% {
		background-position: 44% 100%
	}

	100% {
		background-position: 57% 0%
	}
}

@keyframes preLoaderAnimation {
	0% {
		background-position: 57% 0%
	}

	50% {
		background-position: 44% 100%
	}

	100% {
		background-position: 57% 0%
	}
}

/* ========================================
   SLIDERS & CAROUSELS
   ======================================== */
.swiper-button-prev,
.swiper-button-next {
	background-image: none;
}

.swiper-slide {
	height: auto;
}

/* Product Slider */
.product-slider-slick .qs-product-item {
	height: 100%;
}

.product-slider-slick .card {
	height: 100% !important;
	border-radius: 14px;
}

.product-slider-slick .slick-track {
	display: flex !important;
}

.product-slider-slick .slick-slide {
	height: auto !important;
}

.product-slider-slick .slick-slide>div {
	height: 100%;
}

/* Manufacturers Slider */
.manufacturers-slider .card {
	height: 100% !important;
}

.manufacturers-slider .slick-track {
	display: flex !important;
}

.manufacturers-slider .slick-slide {
	height: inherit !important;
	display: flex !important;
}

.manufacturers-slider .slick-slide>div {
	height: 100%;
}

/* Team Slider */

.team-slider-slick .slick-track {
	display: flex !important;
}

.team-slider-slick .slick-slide {
	height: inherit !important;
	display: flex !important;
}

.team-slider-slick .slick-slide>div {
	height: 100%;
}

/* ========================================
GENERAL SLIDER
======================================== */

/* General Slider */
.general-slider-slick .slick-dots {
	bottom: 30px;
	text-align: center;
	z-index: 10;
}

.general-slider-slick .slick-dots li button:before {
	color: white;
	font-size: 12px;
	opacity: 1;
}

.general-slider-slick .slick-dots li.slick-active button:before {
	color: #02AA9F;
	opacity: 1;
}

.general-slider-slick .slick-prev,
.general-slider-slick .slick-next {
	z-index: 10;
}

.general-slider-slick .slick-prev {
	left: 30px;
}

.general-slider-slick .slick-next {
	right: 30px;
}

/* ========================================
   TEXT BOX IMAGE COMPONENTS
   ======================================== */
.qs-text-box-img-left-unique {
	margin: 0;
	min-height: 400px;
}

.qs-text-box-img-left-image-col {
	position: relative;
	padding: 15px;
}

.qs-text-box-img-left-image {
	width: 100%;
	background-repeat: no-repeat;
	border-radius: 20px;
	overflow: hidden;
}

.qs-text-box-img-left-text-col {
	background: transparent;
	text-align: left !important;
}

.qs-text-box-img-left-content {
	width: 100%;
	text-align: left !important;
	background-color: white;
	border-radius: 24px;
}

.qs-text-box-img-left-title-wrapper {
	text-align: left !important;
}

.qs-text-box-img-left-title {
	font-size: 33px;
	letter-spacing: 0;
	text-transform: none;
	color: #333;
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
	text-align: left !important;
}

.qs-text-box-img-left-content-wrapper {
	text-align: left !important;
}

.qs-text-box-img-left-text {
	font-size: 17px;
	color: #666;
	line-height: 1.6;
	text-align: left !important;
}

.qs-text-box-img-left-text p {
	text-align: left !important;
	margin-bottom: 1rem;
}

.qs-text-box-img-left-buttons-wrapper {
	text-align: left !important;
}

.qs-text-box-img-left-buttons {
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left !important;
}

.qs-text-box-img-left-btn {
	font-size: 16px;
	padding: 12px 24px;
	border-radius: 8px;
	transition: all 0.3s ease;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

.qs-text-box-img-left-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.qs-text-box-img-left-contact-btn {
	background: #02AA9F !important;
	color: white !important;
	border: none;
	font-size: 16px;
	border-radius: 20px;
	padding: 6px 78px;
	font-weight: 500;
	transition: all 0.3s ease;
	text-decoration: none;
	margin: 0 auto;
	display: block;
	width: fit-content;
	text-align: center !important;
}

.qs-text-box-img-left-contact-btn:hover {
	background: #028a80 !important;
	color: white !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(2, 170, 159, 0.3);
}

.qs-text-box-img-left-unique * {
	text-align: inherit;
}

.qs-text-box-img-left-text-col * {
	text-align: left !important;
}

/* ========================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ======================================== */

/* Mobile Styles (up to 575px) */
@media (max-width: 575.98px) {
	.d-flex.align-items-center.gap-2 {
		gap: 0.5rem !important;
	}

	.btn-circle {
		padding: 8px !important;
		font-size: 14px !important;
	}
}

/* Small Mobile Styles (up to 767px) */
@media (max-width: 767.98px) {
	.main-header {
		padding: 15px 15px !important;
	}

	.mobile-logo {
		max-width: 120px;
	}

	.breadcrumb-wrapper {
		font-size: 13px;
	}

	.breadcrumb-text,
	.breadcrumb-path {
		display: block;
		margin-bottom: 2px;
	}

	.qs-text-box-img-left-unique {
		min-height: auto;
	}

	.qs-text-box-img-left-image {
		min-height: 300px;
		border-radius: 12px;
	}

	.qs-text-box-img-left-image-col {
		padding: 8px;
	}

	.qs-text-box-img-left-content {
		padding: 1rem !important;
		text-align: left !important;
	}

	.qs-text-box-img-left-title {
		font-size: 24px;
		margin-bottom: 1rem;
		text-align: left !important;
	}

	.qs-text-box-img-left-text {
		font-size: 15px;
		text-align: left !important;
	}

	.qs-text-box-img-left-buttons {
		flex-direction: column;
		align-items: flex-start;
	}

	.qs-text-box-img-left-btn {
		width: 100%;
		text-align: center;
		justify-content: center;
		margin-bottom: 10px;
	}

	.qs-text-box-img-left-contact-btn {
		width: fit-content;
		margin: 10px auto 0 auto;
	}
}

/* Tablet Styles (up to 768px) */
@media (max-width: 768px) {

}

/* Large Tablet Styles (up to 991px) */
@media (max-width: 991.98px) {
	.secondary-navbar {
		padding: 15px;
	}

	.mobile-menu-container {
		margin-top: 10px;
	}

	.qs-text-box-img-left-content {
		padding: 1.5rem !important;
		text-align: left !important;
	}

	.qs-text-box-img-left-title {
		font-size: 26px;
		text-align: left !important;
	}

	.qs-text-box-img-left-text {
		font-size: 16px;
		text-align: left !important;
	}

	.qs-text-box-img-left-buttons {
		justify-content: flex-start;
	}

	.qs-text-box-img-left-contact-btn {
		margin: 10px auto 0 auto;
	}
}

/* Desktop Styles (up to 1199px) */
@media (max-width: 1199.98px) {
	.navbar-expand-lg {
		flex-wrap: nowrap;
		justify-content: flex-start;
	}

	.navbar-expand-lg .navbar-nav {
		flex-direction: column;
	}

	.navbar-expand-lg .navbar-collapse {
		display: none !important;
	}

	.navbar-expand-lg .navbar-collapse.show {
		display: block !important;
	}

	.navbar-expand-lg .navbar-toggler {
		display: block !important;
	}

	.secondary-navbar .navbar-collapse {
		background: var(--primary-color);
		margin-top: 10px;
		border-radius: 10px;
		padding: 15px;
	}

	.secondary-navbar .dropdown-menu {
		position: static !important;
		width: 100% !important;
		margin: 10px 0 !important;
		transform: none !important;
		background: #f8f9fa;
		border-radius: 8px;
	}

	.secondary-navbar .dropdown-menu.show {
		display: block !important;
	}

	.megamenu-wrapper .row {
		flex-direction: column;
	}

	.megamenu-wrapper .col-md-2 {
		margin-bottom: 20px;
	}

	.qs-text-box-img-left-content {
		padding: 2rem !important;
		text-align: left !important;
	}

	.qs-text-box-img-left-title {
		font-size: 28px;
	}

	.qs-text-box-img-left-image-col {
		padding: 10px;
	}

	.qs-text-box-img-left-image {
		border-radius: 15px;
	}
}

/* Large Desktop Styles (1200px and up) */
@media (min-width: 992px) {
	.secondary-navbar .navbar-collapse {
		justify-content: center;
	}

	.navbar-expand-lg .navbar-collapse {
		display: flex !important;
	}

	.navbar-expand-lg .navbar-toggler {
		display: none !important;
	}

	.navbar-expand-lg .navbar-nav {
		flex-direction: row;
	}

	.main-navbar-expand-lg .main-navbar-collapse {
		display: flex !important;
	}

	.main-navbar-expand-lg .main-navbar-toggler {
		display: none !important;
	}

	.main-navbar-expand-lg .main-navbar-nav {
		flex-direction: row;
	}
}

@media (min-width: 1200px) {
	.desktop-sticky-filter {
		position: sticky;
		top: 100px;
		height: calc(100vh - 120px);
		display: flex;
		flex-direction: column;
	}

	.desktop-sticky-filter .filter-scroll-area {
		flex-grow: 1;
		overflow-y: auto;
		padding-right: 15px;
	}
}

@media (min-width: 1201px) {
	.navbar-expand-lg .navbar-collapse {
		display: flex !important;
	}

	.navbar-expand-lg .navbar-toggler {
		display: none;
	}

	.navbar-expand-lg .navbar-nav {
		flex-direction: row;
	}
}

/* Main Navigation Collapse Styles */
.main-collapse {
	flex-basis: 100%;
	flex-grow: 1;
	align-items: center;
}

.main-navbar-collapse {
	flex-basis: 100%;
	flex-grow: 1;
	align-items: center;
}

/* Responsive Styles for Main Navigation */
@media (max-width: 991.98px) {
	.main-navbar-expand-lg .main-navbar-nav {
		flex-direction: column;
	}

	.main-navbar-expand-lg .main-navbar-collapse {
		display: none !important;
	}

	.main-navbar-expand-lg .main-navbar-collapse.show {
		display: block !important;
	}

	.main-navbar-expand-lg .main-navbar-toggler {
		display: block !important;
	}

	.main-nav-wrapper .main-navbar-collapse {
		background: #ffffff;
		margin-top: 10px;
	}

	.main-nav-wrapper .main-dropdown-menu {
		position: static !important;
		width: 100% !important;
		margin: 10px 0 !important;
		transform: none !important;
		background: #f8f9fa;
	}

	.main-nav-wrapper .main-dropdown-menu.main-show {
		display: block !important;
	}

	.nav-link {
		padding-top: 5px;
		padding-bottom: 10px;
		padding-left: 10px;
		padding-right: 0px;
		margin: 0px;
		border-radius: 0px;
		font-weight: 700;
		color: black;
		font-style: var(--title-font);

	}
}

.cookie_notice_bar-wrapper {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 100000;
}

.age-prompt-page {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #303031;
	color: #fff;
	z-index: 100000000;
}



/* #region Responsive code */

@media (max-width: 1400px) {
	/* xxl - Extra Extra Large */

}

@media (max-width: 1200px) {
	/* xl - Extra Large */

}

@media (min-width: 992px) {

	/* lg - Large */
	#topMainMenu li.nav-item.dropdown ul.dropdown-menu {
		top: 15px !important;
	}
}

@media (max-width: 992px) {

	/* lg - Large */
	#topMainMenu li.nav-item.dropdown ul.dropdown-menu {
		width: 100%;
	}
}

@media (max-width: 768px) {
	/* md - Medium */

}

@media (max-width: 600px) {
	/* sm - Small */

}

@media (max-width: 576px) {
	/* Extra small */

}

.pd-item-btn {
	background-color: #02AA9F;
	color: #fff;
	border: 1px solid #02AA9F;
	border-radius: 20px;
	transition: background 0.2s, color 0.2s, border 0.2s;
}

.pd-item-btn:hover,
.pd-item-btn:focus {
	background-color: #fff;
	color: #02AA9F;
	border: 1px solid #02AA9F;
}


.pd-item-btn-inverse {
	border: 1px solid #02AA9F;
	color: #000000;
	background-color: transparent;
	transition: background 0.2s, color 0.2s;
	border-radius: 20px;
}

.pd-item-btn-inverse:hover,
.pd-item-btn-inverse:focus {
	background-color: #02AA9F;
	color: #fff;
}

/* ========================================
	PAGINATION
   ======================================== */
.pagination .page-link {
	background-color: white !important;
	color: black !important;
	/* makes text white for contrast */
	border-color: white !important;
	/*for border consistency */
}

/* On hover/focus, keep the same background color */
.pagination .page-link:hover,
.pagination .page-link:focus {
	background-color: #029388 !important;
	/* Slightly darker for hover effect */
	color: #fff !important;
	border-color: white !important;
}

/* Active page */
.pagination .page-item.active .page-link {
	background-color: #029388 !important;
	border-color: white !important;
	color: #fff !important;
}

/* Disabled state */
.pagination .page-item.disabled .page-link {
	background-color: #cccccc !important;
	color: #fff !important;
	border-color: white !important;
}


/* ========================================
	PROFILE PAGE
   ======================================== */
.pd-custom-profile-page .accordion .accordion-item .accordion-button:not(.collapsed) {
	background-color: #fff !important;
	color: inherit;
}

.pd-custom-profile-page .accordion .accordion-item .accordion-button {
	border-color: transparent !important;
	box-shadow: none !important;
}

.pd-custom-profile-page .accordion .accordion-item .accordion-button {
	font-weight: 600;
	font-size: 16px;
}

.pd-custom-profile-page .accordion .accordion-item .accordion-button i {
	padding-right: 0.5rem;
	color: #02AA9F;
}

/* First accordion item: top corners */
.pd-custom-profile-page .accordion .accordion-item:first-child {
	border-top-left-radius: 18px;
	border-top-right-radius: 18px;
}

/* Last accordion item: bottom corners */
.pd-custom-profile-page .accordion .accordion-item:last-child {
	border-bottom-left-radius: 18px;
	border-bottom-right-radius: 18px;
}

/* Last accordion item: bottom corners */
.pd-custom-profile-page .accordion .accordion-item .btn-success {
	background-color: #02AA9F !important;

}

#addShippingModal .modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#addShippingModal .modal-header .modal-title {
	margin: 0;
	font-size: 1.5rem;
	/* Optional: adjust as needed */
}

#addShippingModal .modal-header .close {
	background: none;
	border: none;
	font-size: 1.5rem;
	/* Adjust icon size as needed */
	color: #000;
	/* Adjust color as needed */
	padding: 0;
	margin-left: 1rem;
	line-height: 1;
	opacity: 1;
	box-shadow: none;
}



/* #endregion */

.simple-image-hover p {
	margin-bottom: 0 !important;
}

.simple-image-hover img,
.qs-product-item .card img,
.custom-category-item .card img {
	transition: all 0.3s ease;
}

.simple-image-hover:hover img,
.qs-product-item .card img:hover,
.custom-category-item .card img:hover {
	transform: scale(1.05);
}

.logo-section .logo  {
	display: block;
}

.logo-section .logo img {
	max-height: 100px;
	min-width: 95px;
}

header .menu_highlighted a {
	background-color: var(--primary-color) !important;
	color: white !important;
	padding: 8px 16px !important;
}



/* ========================================
	SHOP LIST ITEM
   ======================================== */
/* Shop List Item Card */
.shop-list-item-card {
	cursor: pointer;
	border-radius: 14px;
	overflow: hidden;
}

/* Discount Badge */
.shop-list-item-discount-badge {
	background: #02AA9F;
	color: #fff;
	border-radius: 12px;
	padding: 6px 6px;
	font-weight: bold;
	font-size: 1rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Stock Status */
.shop-list-item-stock-in {
	background-color: #02AA9F;
}

/* Image Container */
.shop-list-item-image-container {
	background-image: url('/files/uploads/premiumdrinks2025/menu/shop_cat_item_background.webp');
	background-size: cover;
	background-position: center;
	min-height: 250px;
}

/* Product Image */
.shop-list-item-image {
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}

/* Product Name */
.shop-list-item-name {
	font-size: 1.15rem;
}

/* Price */
.shop-list-item-price {
	font-size: 1.25rem;
}

.shop-list-item-price-discount {
	font-size: 1.25rem;
}

/* Responsive Design */
@media (max-width: 576px) {
	.shop-list-item-card {
		min-width: 180px;
	}

	.shop-list-item-image-container {
		min-height: 200px;
	}

	.shop-list-item-name {
		font-size: 1rem;
	}

	.shop-list-item-price,
	.shop-list-item-price-discount {
		font-size: 1.1rem;
	}
}

@media (max-width: 768px) {
	.shop-list-item-image-container {
		min-height: 220px;
	}
}

/* Hover Effects */
.shop-list-item-card:hover {
	transform: translateY(-2px);
	transition: transform 0.2s ease-in-out;
}

.shop-list-item-card:hover .shop-list-item-image {
	transform: scale(1.05);
	transition: transform 0.3s ease-in-out;
}

/* Button Styling */
.shop-list-item-btn-cart:hover {
	background-color: #028a7f;
	border-color: #028a7f;
}

.shop-list-item-btn-details:hover {
	background-color: #f8f9fa;
	border-color: #02AA9F;
	color: #02AA9F;
}

/* ========================================
CATEGORIES CARDS
======================================== */
.categories-cards-prev-btn {
	left: 0;
}

.categories-cards-next-btn {
	right: 0;
}

.categories-cards-arrow-left {
	transform: rotate(180deg);
}


.categories-cards-title {
	font-weight: 700;
	font-style: var(--title-font);
}

/* Card Styling */
.categories-cards-card {
	cursor: pointer;
	border-radius: 14px;
	overflow: hidden;
}

.categories-cards-image-container {
	height: 60vh;
	background-image: url('/files/uploads/premiumdrinks2025/menu/shop_cart_item_background.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 14px;
}

.categories-cards-image {
	max-width: 70%;
	max-height: 70%;
	object-fit: contain;
	z-index: 2;
}

.categories-cards-overlay {
	z-index: 3;
}

.categories-cards-name {
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
	font-size: 1.5rem;
}

/* Show All Button Styles */
.categories-cards-btn-inverse {
	background-color: white;
	color: #02AA9F;
	border-radius: 20px;
	font-size: 18px;
	padding: 8px 22px;
}

.categories-cards-btn {
	background-color: #02AA9F;
	border-radius: 20px;
	font-size: 18px;
	padding: 8px 22px;
}

.categories-cards-btn-icon {
	height: 25px;
	width: 25px;
	margin-left: 15px;
}

.categories-cards-btn-icon-white {
	height: 25px;
	width: 25px;
	margin-left: 15px;
	filter: brightness(0) invert(1);
}

/* Responsive Design */
@media (max-width: 768px) {
	.categories-cards-image-container {
		height: 40vh;
		/* Smaller height on mobile */
	}

	.categories-cards-name {
		font-size: 1.2rem;
	}

	.categories-cards-btn,
	.categories-cards-btn-inverse {
		font-size: 16px;
		padding: 6px 18px;
	}

	.categories-cards-btn-icon,
	.categories-cards-btn-icon-white {
		height: 20px;
		width: 20px;
		margin-left: 10px;
	}
}

@media (max-width: 576px) {
	.categories-cards-image-container {
		height: 35vh;
		/* Even smaller on very small screens */
	}

	.categories-cards-name {
		font-size: 1rem;
	}
}

/* Hover Effects */
.categories-cards-card:hover {
	transform: translateY(-3px);
	transition: transform 0.3s ease-in-out;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.categories-cards-card:hover .categories-cards-image {
	transform: scale(1.05);
	transition: transform 0.3s ease-in-out;
}

.categories-cards-btn:hover,
.categories-cards-btn-inverse:hover {
	transform: translateY(-2px);
	transition: transform 0.2s ease-in-out;
}

.categories-cards-btn-inverse:hover {
	background-color: #f8f9fa;
	border: 1px solid #02AA9F;
}

.categories-cards-btn:hover {
	background-color: #028a7f;
}

/* ========================================
   GAME FORM
   ======================================== */

/* Typography */
.game-form-title {
	color: #303031;
	font-family: 'Montserrat', sans-serif;
}

.game-form-subtitle {
	color: #02AA9F;
	font-family: 'Open Sans', sans-serif;
}

/* Contact Information */
.game-form-contact-item {
	width: 100%;
}

.game-form-icon {
	height: 44px;
	width: 44px;
}

.game-form-contact-text {
	font-size: 20px;
}

.game-form-contact-link {
	color: #212529;
	font-size: 20px;
}

.game-form-contact-link:hover {
	color: #02AA9F;
	transition: color 0.3s ease;
}

.game-form-input,
.game-form-textarea {
	border: 2px solid #e9ecef;
	border-radius: 8px;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.game-form-input:focus,
.game-form-textarea:focus {
	border-color: #02AA9F;
	box-shadow: 0 0 0 0.2rem rgba(2, 170, 159, 0.25);
}

.game-form-textarea {
	resize: vertical;
	min-height: 120px;
}

/* Checkbox Styling */
.game-form-checkbox {
	border: 2px solid #dee2e6;
	border-radius: 4px;
}

.game-form-checkbox:checked {
	background-color: #02AA9F;
	border-color: #02AA9F;
}

.game-form-checkbox:focus {
	box-shadow: 0 0 0 0.2rem rgba(2, 170, 159, 0.25);
}

.game-form-checkbox-label {
	font-size: 14px;
	line-height: 1.4;
}

/* Submit Button */
.game-form-submit-btn {
	background-color: #02AA9F;
	border: none;
	border-radius: 20px;
	font-weight: 700;
	font-size: 20px;
	padding: 12px 24px;
	transition: all 0.3s ease;
}

.game-form-submit-btn:hover {
	background-color: #028a7f;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(2, 170, 159, 0.3);
}

.game-form-submit-btn:active {
	transform: translateY(0);
}

.game-form-submit-icon {
	height: 25px;
	width: 25px;
	margin-left: 15px;
	filter: brightness(0) invert(1);
	transition: transform 0.3s ease;
}

.game-form-submit-btn:hover .game-form-submit-icon {
	transform: translateX(3px);
}

/* Map Section */
.game-form-map-container {
	height: 600px;
}


/* Responsive Design */
@media (max-width: 768px) {
	.game-form-title {
		font-size: 1.75rem;
	}

	.game-form-subtitle {
		font-size: 1.25rem;
	}

	.game-form-contact-item {
		max-width: 100%;
	}

	.game-form-icon {
		height: 35px;
		width: 35px;
		margin-right: 8px;
	}

	.game-form-contact-text,
	.game-form-contact-link {
		font-size: 14px;
	}

	.game-form-submit-btn {
		font-size: 18px;
		padding: 10px 20px;
	}

	.game-form-submit-icon {
		height: 20px;
		width: 20px;
		margin-left: 10px;
	}

	.game-form-map-container {
		height: 400px;
	}
}

@media (max-width: 576px) {
	.game-form-title {
		font-size: 1.5rem;
	}

	.game-form-subtitle {
		font-size: 1.1rem;
	}

	.game-form-submit-btn {
		font-size: 16px;
		padding: 8px 16px;
	}

	.game-form-map-container {
		height: 300px;
	}
}

/* Form Validation States */
.game-form-input.is-invalid,
.game-form-textarea.is-invalid {
	border-color: #dc3545;
}

.game-form-input.is-valid,
.game-form-textarea.is-valid {
	border-color: #28a745;
}

/* Loading State */
.game-form-submit-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.game-form-submit-btn:disabled:hover {
	transform: none;
	background-color: #02AA9F;
}

/* ========================================
   TEAM BLOCK
   ======================================== */

/* Main Team Slider Container */
.qs-team-slider {
	background-color: var(--primary-color);
	padding: 60px 0;
}

/* Header Section */
.qs-team-slider-header {
	container: true;
	text-align: center;
	color: white;
	margin-bottom: 3rem;
}

.qs-team-slider-title {
	margin-bottom: 1rem;
	text-align: center;
	text-transform: uppercase;
	font-weight: 700;
}

.qs-team-slider-subtitle-container {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.qs-team-slider-subtitle {
	margin-bottom: 0;
	text-align: center;
	text-transform: uppercase;
	font-weight: 700;
}

.qs-team-slider-spacer {
	width: 1px;
}

/* Navigation Buttons */
.qs-team-slider-prev,
.qs-team-slider-next {
	background: transparent;
	border: none;
	padding: 0;
	position: absolute;
	cursor: pointer;
	transition: opacity 0.3s ease;
}

.qs-team-slider-prev {
	left: 0;
}

.qs-team-slider-next {
	right: 0;
}

.qs-team-slider-prev:hover,
.qs-team-slider-next:hover {
	opacity: 0.7;
}

.qs-team-slider-arrow-left {
	transform: rotate(180deg);
}

/* Slider Slide */
.qs-team-slider-slide {
	padding: 0 0.5rem;
}

/* Team Member Card */
.qs-team-member-card {
	background-color: white;
	border-radius: 10px;
	overflow: hidden;
	text-align: left;
	width: 100%;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.qs-team-member-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Team Member Info */
.qs-team-member-name {
	color: var(--primary-color);
	font-family: var(--title-font);
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 6px;
	line-height: 1.2;
	text-align: center;
}

.qs-team-member-job-title {
	font-size: 18px;
	margin-bottom: 4px;
	text-align: center;
}

.qs-team-member-description {
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	text-align: center;
}

/* Contact Information */
.qs-team-member-contact {
	text-align: center;
	margin-top: auto;
}

.qs-team-member-contact-item {
	margin-bottom: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.qs-team-member-contact-item:last-child {
	margin-bottom: 0;
}

.qs-team-member-contact-icon {
	color: var(--primary-color);
	margin-right: 4px;
	font-size: 10px;
}

.qs-team-member-contact-link {
	color: black;
	word-break: break-all;
	font-size: 13px;
	transition: color 0.3s ease;
}

.qs-team-member-contact-link:hover {
	color: var(--primary-color);
}



.dropify-wrapper .dropify-message p {
  font-size: 1.3rem;
}

.qs-form-input-wrapper .dropify-wrapper:hover,
.qs-form-input-wrapper .dropify-wrapper:focus,
.qs-form-input-wrapper .dropify-wrapper.has-preview {
  border-color: var(--primary-color);
  box-shadow: none;
  outline: none;
}

.btn-slim-rounded {
	padding: .3rem 2rem;
	border-radius: 1rem;
}

.qs-border-one-color{
	border: 1px solid var(--primary-color);
}

.btn img.btn-arrow {
	height: 1rem;
	width: 1rem;
	margin-left: .5rem;
}

.qs-invert {
	filter: invert(1);
}

.btn-normal-rounded {
	padding: .6rem 2rem;
	border-radius: 0.75rem;
}

.home-slider-wrapper {
	height: calc(100vh - 200px); 
	overflow: hidden;
}

.qs-form-input-wrapper {
  margin-bottom: 0.8em;
}

.qs-form-input-wrapper:not(.form-check) label {
  padding: 0.4rem 0rem 0.4rem 0rem;
}

.qs-form-input-wrapper input:focus,
.qs-form-input-wrapper input:active,
.qs-form-input-wrapper textarea:focus,
.qs-form-input-wrapper textarea:active {
  border-color: var(--primary-color);
  box-shadow: none;
  outline: none;
}

.qs-form-input-wrapper.form-switch {
  padding-left: 3.5em;
  margin-top: 0.5em;
}

#filterAccordion .category-filter.active {
	color: var(--primary-color);
}

.content-card {
	background:#fff; 
	border-radius:14px;
}

.qs-form-input-wrapper .select2-container {
  padding: 0 !important;
  border: 0 none !important;
}

.qs-form-input-wrapper .select2-container .select2-selection {
  height: auto;
  box-shadow: none !important;
}

.select2-search__field {
  height: auto;
  box-shadow: none !important;
  outline: none !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected, .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
  background-color: var(--primary-color) !important;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection, .select2-container--bootstrap-5.select2-container--open .select2-selection,
.select2-container--bootstrap-5 .select2-dropdown {
  border-color: var(--primary-color) !important;
}

.bg-secondary-color {
	background-color: var(--secondary-color);
}

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

@media (max-width: 1400px) { /* xxl - Extra Extra Large */
	
}

@media (max-width: 1200px) { /* xl - Extra Large */
	.home-slider-wrapper {
		height: calc(100vh - 180px); 
	}
}

@media (max-width: 992px) { /* lg - Large */
	.home-slider-wrapper {
		height: calc(100vh - 72px); 
	}
}

@media (max-width: 768px) { /* md - Medium */

}

@media (max-width: 600px) { /* sm - Small */ 
	
}

@media (max-width: 576px) { /* Extra small */
	
}