body {
	background-color: #f8f9fa; /* Light gray background color */
}

.logo-container {
	text-align: center;
	margin-bottom: 20px; /* Add some margin below the logo */
}

.product-container {
	background-color: #ffffff; /* White background for the product showcase */
	padding: 20px;
	border-radius: 8px; /* Rounded corners for the product showcase */
}

.product-card {
	cursor: pointer;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle box shadow for the product cards */
	transition: box-shadow 0.3s ease; /* Smooth transition on hover */
}

.product-card:hover {
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Increase box shadow on hover */
}

.content-top{
	background:#FFF;padding:2%;box-shadow:#ececec 6px 3px 10px
}

.sidebar.home{
	display: none;
}

.product-card .card-body{
    min-height: 100px;
    padding: 1.25rem 1.25rem 0.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.product-card .card-body .card-title{
    font-size:14px;
}

/* BODY CONTENT PROFIL */
/*******************************************************************************************************************************************************/
	.container-page {
		background: #fff;
		border-radius: 8px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		margin: 100px auto; /* Space from sticky header */
		max-width: 1200px; /* Center the page content */
		overflow: hidden;
	}
	.sidebar {
		background-color: #D53E3A;
		color: #fff;
		min-height: 100%; /* Ensure full height */
	}
	.sidebar .nav-link {
		color: #fff;
	}
	.sidebar .nav-link:hover {
		background-color: #57423f;
		color: #fff;
	}

	.sidebar .nav-link.active {
		background-color: #57423f;
	}

	.sidebar .nav-item{
		border-bottom: #FFF 1px solid;
	}

	/* .sidebar .nav-item:nth-child(1) {
		border-top: #FFF 1px solid;
	} */
	.content {
		padding: 30px;
	}
	/* Burger button visibility */
	.burger-button {
		display: none;
	}
  /* Close Button Styling */
	.btn-close {
		position: absolute;
		top: 10px;
		right: 10px;
		background: none;
		border: none;
		font-size: 1.5rem;
		line-height: 1;
		color: #FFF;
		cursor: pointer;
	}
	
	.btn-close:hover {
		/* color: #dc3545; */
	}
	/* Mobile Adjustments */
	#openSidebar {
		position: fixed;
		top: 10px;
		left: 10px;
		z-index: 1100;
	}
	#burgerButton{
		background:#D53E3A;
		border:none;
	}
	#closeSidebar{
		display:none;
	}
		@media (max-width: 768px) {
			#closeSidebar{
				display:block;
			}
			.container-page {
				margin-top:0;
			}
			.burger-button {
				display: block;
				margin: 10px;
			}
			.sidebar {
				position: absolute;
				top: 0;
				left: -250px; /* Hidden by default */
				width: 250px;
				height: 100vh;
				transition: all 0.3s ease-in-out;
				z-index: 1050; /* Above content */
			}
			.sidebar.show {
				left: 0; /* Slide in */
			}
			.content {
				padding: 20px;
			}

			#sidebar ul{
				margin-top:50px;
			}
		} /* end media max-width: 768px
/*******************************************************************************************************************************************************/
/* END BODY CONTENT */

/* START TOAST STYLING */
/*******************************************************************************************************************************************************/
	.toast-message {
		position: fixed;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		background: #28a745;
		color: #fff;
		padding: 10px 20px;
		border-radius: 5px;
		font-size: 14px;
		z-index: 9999;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
		animation: slideIn 0.5s ease, fadeOut 1s ease 3s forwards;
	}
	
	.toast-message.error {
		background: #dc3545;
	}
	
	@keyframes slideIn {
		from {
		bottom: 0;
		opacity: 0;
		}
		to {
		bottom: 20px;
		opacity: 1;
		}
	}
	
	@keyframes fadeOut {
		to {
		opacity: 0;
		}
	}
	
/*******************************************************************************************************************************************************/
/* END TOAST STYLING */

/* START CART STYLING */
/*******************************************************************************************************************************************************/
button > i, button svg {
    pointer-events: none;
} 
.apricart-table {
    font-size: 14px;
    width: 100%;
    border-collapse: collapse;
}
.apricart-table-bordered {
    border: 1px solid #dee2e6;
}
.apricart-table th, .apricart-table td {
    padding: 8px;
    text-align: center;
    border: 1px solid #dee2e6;
}
.apricart-form-control {
    text-align: center;
    font-size: 14px;
}
.apricart-quantity-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.apricart-quantity-decrease,
.apricart-quantity-increase,
.apricart-remove-from-cart {
    font-size: 12px;
    padding: 5px 10px;
    cursor: pointer;
}
.apricart-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.apricart-btn-secondary {
    background-color: #6c757d;
    color: #fff;
}
.apricart-btn-secondary:hover {
    background-color: #5a6268;
}
.apricart-btn-danger {
    background-color: #dc3545;
    color: #fff;
}
.apricart-btn-danger:hover {
    background-color: #c82333;
}
.apricart-btn-primary {
    background-color: #007bff;
    color: #fff;
}
.apricart-btn-primary:hover {
    background-color: #0056b3;
}
.apricart-card {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 20px;
    background-color: #fff;
}
.apricart-card-body {
    padding: 15px;
}
.cart-icon{
	position:relative;
}
.badge-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    border: 2px solid white; /* Optional: Adds a white border around the dot */
}

/* Mobile-Specific Adjustments */
@media (max-width: 576px) {
	.sidebar.home{
		display: unset;
	}
	
	.mobile-cart-1{
		padding: 0px 50px !important;
	}
	/* .mobile-cart-2{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-grow: 1;
		height: 100%;
		border: none;
	} */
    .apricart-table {
        font-size: 12px;
    }
    .apricart-form-control {
        font-size: 12px;
        width: 50px;
    }
    .apricart-quantity-decrease,
    .apricart-quantity-increase {
        padding: 3px 8px;
        font-size: 10px;
    }
    .apricart-remove-from-cart {
        padding: 3px 8px;
        font-size: 10px;
    }
    .apricart-btn {
        font-size: 14px;
    }
}
/*******************************************************************************************************************************************************/
/* END CART STYLING */
@media(max-width:500px){
	h1{
		font-size:20px;
	}
	p{
		font-size:14px;
	}

	p.card-text{
		font-size:20px;
	}

	.content-top{
		padding:5%;
		border-radius:0;
	}
}