.swiper-slide.active {
	background-color: #0093dd;
	color: #fff;
}

.category-menu {
	display: flex;
	overflow: hidden;
}

.menu-item {
	flex: 0 0 auto;
	padding: 10px 20px;
	cursor: pointer;
	color: #555;
	text-align: center;
	transition: all 0.3s ease;
}

.menu-item.active {
	border-radius: 5px;
}

.slick-slide {
	outline: none;
}

@media (max-width: 768px) {
	.category-menu {
		display: block;
		text-align: center;
	}

	.menu-item {
		display: inline-block;
		margin: 5px 10px;
		padding: 10px;
	}
	.category-menu-wrapper {
		position: sticky;
		top: 0;
		z-index: 1000;
	}
	.combo_card {padding:0px !important;}
}

.item-description
{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
/* Header Styles */
/* --- CSS VARIABLES --- */
:root {
    --primary-green: #644222;
    --secondary-green: #010f1c;
    --accent-orange: #2d5f3f;
    --text-dark: #333;
    --text-grey: #666;
    --light-bg: #f8f9fa;
}

/* --- BASIC NAVBAR STYLES --- */
.navbar-cabana {
    background-color: #2d5f3f;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.navbar-cabana .nav-link {
    color: white !important;
    font-weight: 600;
    padding: 15px 20px;
    font-size: 15px;
    transition: background-color 0.3s;
}

.navbar-cabana .nav-link:hover {
    background-color: rgb(100 66 34); /* Darker brown on hover */
}

/* Sticky Positioning */
.sticky-top {
    z-index: 1020; 
    width: 100%;
    top: 0; /* Adjusted to 0 assuming no top-banner */
}

/* --- MEGA MENU LOGIC --- */

/* 1. Make the parent list item static so the child can be full width */
.has-megamenu {
    position: static;
}

/* 2. Style the dropdown menu to be 100% width of the screen */
.megamenu {
    left: 0;
    right: 0;
    width: 100%;
    margin-top: 0;
    border: none;
    border-top: 1px solid #ddd;
    border-radius: 0;
    padding: 30px 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    background: #fff;
    position: relative;
    max-height: 70vh; /* Limits height to 70% of the viewport height */
    overflow-y: auto; /* Adds vertical scrollbar if content is too long */
    overflow-x: hidden; /* Prevents horizontal scrolling */
    -webkit-overflow-scrolling: touch;
}

/* 3. Dropdown Animation */
.animate {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
}

@keyframes slideIn {
    0% { transform: translateY(1rem); opacity: 0; }
    100% { transform: translateY(0rem); opacity: 1; }
}
.slideIn {
    animation-name: slideIn;
}

/* --- MEGA MENU CONTENT STYLING --- */
.menu-col h6 {
    color: var(--text-dark);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-bottom: 15px;
    margin-top: 10px;
}

.menu-col ul {
    padding-left: 0;
    list-style: none;
}

.menu-col ul li a {
    color: var(--text-grey);
    text-decoration: none;
    display: block;
    padding: 5px 0;
    font-size: 0.95rem;
    transition: color 0.2s;
}

.menu-col ul li a:hover {
    color: var(--primary-green);
    padding-left: 5px; /* Subtle hover animation */
}

/* Dropdown Arrow styling */
.dropdown-toggle::after {
    content: "▼";
    border: none;
    font-family: 'Font Awesome 6 Pro';
    vertical-align: middle;
    font-weight: 400;
    margin-left: 6px;
}

/* --- BADGES --- */
.badge-new {
    background-color: #644222;
    color: #fff;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    margin-right: 5px;
    vertical-align: middle;
}

/* --- RESPONSIVE STYLES (Mobile/Tablet) --- */
@media (max-width: 991px) {
    .navbar-cabana .nav-link {
        padding: 10px 15px;
    }
    
    /* Reset Mega Menu for mobile to act like a normal accordion */
    .megamenu {
        width: 100%;
        margin-top: 0;
        box-shadow: none;
        padding: 10px;
        position: relative; /* Not full width on mobile */
        margin-left: 195px;
    }
    
    .megamenu .container {
        padding: 0;
    }
    
    .menu-col {
        margin-bottom: 20px;
    }
}

@media(max-width: 767.98px){
    .navbar-cabana {
        padding: 10px 0; /* Adjusted padding */
    }
    /* Fix for sticky top on mobile */
    .sticky-top {
        top: 0; 
    }
    .fe--bar {
	  display: inline-block;
	  width: 24px;
	  height: 24px;
	  background-repeat: no-repeat;
	  background-size: 100% 100%;
	  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M3 16h18v2H3zm0-5h18v2H3zm0-5h18v2H3z'/%3E%3C/svg%3E");
	}
}
.brand-list {
column-count: 5;          /* number of columns */
column-gap: 30px;
list-style: none;
padding: 0;
margin: 0;
}

.brand-list li {
break-inside: avoid;
padding: 5px 0;
}

.brand-list li a {
text-decoration: none;
color: #000;
}
