body,
 html {
 	height: 100%;
 	margin: 0;
 	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 	background: url('/assets/images/bg_image10.png') center center / cover no-repeat fixed;
 }

 .navbar {
 	background-color: #ffffff;
 	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }

 #mainNavbar .logo-wrapper {
 	height: 50px;
 	/* Keep navbar height consistent */
 	overflow: visible;
 	/* Allow image to grow horizontally */
 	display: flex;
 	align-items: center;
 }

 #mainNavbar .logo-img {
 	height: 60px;
 	/* Slightly larger than wrapper */
 	max-width: 220%;
 	/* Wider look */
 	border-radius: 10px;
 	object-fit: contain;
 }

 #mainNavbar .nav-link {
 	color: rgb(255, 141, 28);
 	font-weight: 900;
 	margin-right: 20px;
 }

 .profile-container {
 	display: flex;
 	align-items: center;
 	gap: 12px;
 }

 .navbar .profile-circle {
 	width: 40px;
 	height: 40px;
 	border-radius: 50%;
 	background: #fff;
 	color: #ff6f00;
 	font-weight: bold;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	font-size: 18px;
 	box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
 	position: relative;
 	cursor: pointer;
 }

 .custom-login-btn {
 	background-color: rgb(255, 70, 70);
 	border: 1px solid black;
 	color: white;
 }

 .logout-btn {
 	background: rgb(255, 70, 70);
 	padding: 8px 16px;
 	border: none;
 	border-radius: 4px;
 	color: white;
 	font-weight: 600;
 	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 }

 .logout-btn:hover {
 	background: rgb(255, 70, 70);
 }

 .about-section {
 	background-color: rgba(255, 255, 255, 0.95);
 	backdrop-filter: blur(10px);
 	-webkit-backdrop-filter: blur(10px);
 	box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
 	border-radius: 1rem;
 	padding: 2rem;
 	color: rgb(0, 0, 0);
 }

 .about-section h2 {
 	font-weight: bold;
 	font-size: 2.2rem;
 	margin-bottom: 1.2rem;
 }

 .about-section p,
 .about-section li {
 	font-size: 1rem;
 	line-height: 1.6;
 }

 .about-section ul {
 	list-style: none;
 	padding-left: 0;
 	margin-top: 1rem;
 }

 .about-section ul li::before {
 	content: "✔️ ";
 	color: #ffd54f;
 	margin-right: 10px;
 }

 footer {
 	background-color: rgba(0, 0, 0, 0.85);
 }

 @media (max-width: 768px) {
 	.about-section {
 		padding: 1.5rem 1rem;
 	}

 	.about-section h2 {
 		font-size: 1.8rem;
 	}

 	.about-section p,
 	.about-section li {
 		font-size: 0.95rem;
 	}
 }

 /* ======= Mobile Sidebar (Visible only on small devices) ======= */
 @media (max-width: 768px) {
 	.mobile-sidebar {
 		position: fixed;
 		top: 10px;
 		right: 10px;
 		z-index: 1050;
 		display: flex;
 		flex-direction: column;
 		align-items: flex-end;
 	}

 	.sidebar-toggle {
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
 		width: 28px;
 		height: 20px;
 		cursor: pointer;
 		background: none;
 		border: none;
 		padding: 0;
 		z-index: 1060;
 	}

 	.sidebar-toggle .bar {
 		height: 3px;
 		width: 100%;
 		background-color: rgb(0, 0, 0);
 		border-radius: 2px;
 	}

 	.sidebar-content {
 		display: none;
 		margin-top: 10px;
 		background: #ffffff;
 		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 		border-radius: 10px;
 		padding: 10px;
 		width: 160px;
 		text-align: right;
 	}

 	.sidebar-content .sidebar-link {
 		display: block;
 		padding: 10px;
 		color: #000;
 		font-weight: 600;
 		text-decoration: none;
 		border-radius: 6px;
 		transition: background 0.2s;
 	}

 	.sidebar-content .sidebar-link:hover {
 		background: #ffe0cc;
 	}

 	.sidebar-content .logout-link {
 		width: 100%;
 		text-align: right;
 		background: none;
 		border: none;
 		color: #ff3e3e;
 		cursor: pointer;
 		font-weight: 600;
 		padding: 10px;
 	}
 }

 /* Hide mobile sidebar wrapper on screens wider than 991px */
 @media (min-width: 992px) {
 	.mobile-only {
 		display: none !important;
 	}
 }