one.css

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Poppins:wght@400;500;600;700&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
/* User Information Section */
.user-info {
  background: var(--light);
  padding: 20px;
  border-radius: 8px;
  margin-top: 20px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  max-height: 300px; /* Set the maximum height for the scrollable area */
  overflow-y: auto; /* Add a vertical scrollbar when content exceeds the height */
}

.user-details {
  padding: 10px;
}

.user-details h2 {
  font-size: 28px;
  margin-bottom: 10px;
  color: var(--dark);
}

.user-details p {
  margin: 8px 0;
  font-size: 16px;
  color: var(--dark);
}

/* Add some additional styling for a clean and modern look */
.user-info::-webkit-scrollbar {
  width: 12px;
}

.user-info::-webkit-scrollbar-thumb {
  background: var(--blue);
  border-radius: 10px;
}

.user-info::-webkit-scrollbar-thumb:hover {
  background: var(--dark-blue);
}

.user-info::-webkit-scrollbar-track {
  background: var(--light);
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
}

a {
	text-decoration: none;
}

li {
	list-style: none;
}

:root {
	--poppins: 'Poppins', sans-serif;
	--lato: 'Lato', sans-serif;

	--light: #F9F9F9;
	--blue: #3C91E6;
	--light-blue: #CFE8FF;
	--grey: #eee;
	--dark-grey: #AAAAAA;
	--dark: #342E37;
	--red: #DB504A;
	--yellow: #FFCE26;
	--light-yellow: #FFF2C6;
	--orange: #FD7238;
	--light-orange: #FFE0D3;
	--green : #AAFF00;
	--brightgreen : #00A36C;
}

html {
	overflow-x: hidden;
}

body.dark {
	--light: #0C0C1E;
	--grey: #060714;
	--dark: #FBFBFB;
}

body {
	background: var(--grey);
	overflow-x: hidden;
}
/* SIDEBAR */
#sidebar {
	position: fixed;
	top: 0;
	left: 0;
	width: 280px;
	height: 100%;
	background: var(--light);
	z-index: 2000;
	font-family: var(--lato);
	transition: .3s ease;
	overflow-x: hidden;
	scrollbar-width: none;
}
#sidebar::--webkit-scrollbar {
	display: none;
}
#sidebar.hide {
	width: 60px;
}
#sidebar .brand {
	font-size: 24px;
	font-weight: 700;
	height: 56px;
	display: flex;
	align-items: center;
	color: var(--blue);
	position: sticky;
	top: 0;
	left: 0;
	background: var(--light);
	z-index: 500;
	padding-bottom: 20px;
	box-sizing: content-box;
}
#sidebar .brand .bx {
	min-width: 60px;
	display: flex;
	justify-content: center;
}
#sidebar .side-menu {
	width: 100%;
	margin-top: 48px;
}
#sidebar .side-menu li {
	height: 48px;
	background: transparent;
	margin-left: 6px;
	border-radius: 48px 0 0 48px;
	padding: 4px;
}
#sidebar .side-menu li.active {
	background: var(--grey);
	position: relative;
}
#sidebar .side-menu li.active::before {
	content: '';
	position: absolute;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	top: -40px;
	right: 0;
	box-shadow: 20px 20px 0 var(--grey);
	z-index: -1;
}
#sidebar .side-menu li.active::after {
	content: '';
	position: absolute;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	bottom: -40px;
	right: 0;
	box-shadow: 20px -20px 0 var(--grey);
	z-index: -1;
}
#sidebar .side-menu li a {
	width: 100%;
	height: 100%;
	background: var(--light);
	display: flex;
	align-items: center;
	border-radius: 48px;
	font-size: 16px;
	color: var(--dark);
	white-space: nowrap;
	overflow-x: hidden;
}
#sidebar .side-menu.top li.active a {
	color: var(--blue);
}
#sidebar.hide .side-menu li a {
	width: calc(48px - (4px * 2));
	transition: width .3s ease;
}
#sidebar .side-menu li a.logout {
	color: var(--red);
}
#sidebar .side-menu.top li a:hover {
	color: var(--blue);
}
#sidebar .side-menu li a .bx {
	min-width: calc(60px  - ((4px + 6px) * 2));
	display: flex;
	justify-content: center;
}
/* SIDEBAR */





/* CONTENT */
#content {
	position: relative;
	width: calc(100% - 280px);
	left: 280px;
	transition: .3s ease;
}
#sidebar.hide ~ #content {
	width: calc(100% - 60px);
	left: 60px;
}
/* NAVBAR */
#content nav {
	height: 56px;
	background: var(--light);
	padding: 0 24px;
	display: flex;
	align-items: center;
	grid-gap: 24px;
	font-family: var(--lato);
	position: sticky;
	top: 0;
	left: 0;
	z-index: 1000;
}
#content nav::before {
	content: '';
	position: absolute;
	width: 40px;
	height: 40px;
	bottom: -40px;
	left: 0;
	border-radius: 50%;
	box-shadow: -20px -20px 0 var(--light);
}
#content nav a {
	color: var(--dark);
}
#content nav .bx.bx-menu {
	cursor: pointer;
	color: var(--dark);
}
#content nav .nav-link {
	font-size: 16px;
	transition: .3s ease;
}
#content nav .nav-link:hover {
	color: var(--blue);
}
#content nav form {
	max-width: 400px;
	width: 100%;
	margin-right: auto;
}
#content nav form .form-input {
	display: flex;
	align-items: center;
	height: 36px;
}
#content nav form .form-input input {
	flex-grow: 1;
	padding: 0 16px;
	height: 100%;
	border: none;
	background: var(--grey);
	border-radius: 36px 0 0 36px;
	outline: none;
	width: 100%;
	color: var(--dark);
}
#content nav form .form-input button {
	width: 36px;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--blue);
	color: var(--light);
	font-size: 18px;
	border: none;
	outline: none;
	border-radius: 0 36px 36px 0;
	cursor: pointer;
}
#content nav .notification {
	font-size: 20px;
	position: relative;
}
#content nav .notification .num {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid var(--light);
	background: var(--red);
	color: var(--light);
	font-weight: 700;
	font-size: 12px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#content nav .profile img {
	width: 36px;
	height: 36px;
	object-fit: cover;
	border-radius: 50%;
}
#content nav .switch-mode {
	display: block;
	min-width: 50px;
	height: 25px;
	border-radius: 25px;
	background: var(--grey);
	cursor: pointer;
	position: relative;
}
#content nav .switch-mode::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	bottom: 2px;
	width: calc(25px - 4px);
	background: var(--blue);
	border-radius: 50%;
	transition: all .3s ease;
}
#content nav #switch-mode:checked + .switch-mode::before {
	left: calc(100% - (25px - 4px) - 2px);
}
/* NAVBAR */



.section-heading {
    font-size: 36px;
    font-weight: bold;
    color: var(--dark);
    text-align: center;
    margin-top: 30px;
}

/* Adjust the styling of the services section to match the page */
#services {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 20px;
}

/* Apply different background gradients to each service item */
.service {
    background: linear-gradient(135deg, #3399FF, #00CC99);
    border: 1px solid #138808; /* Green border color */
    margin: 10px; /* Reduced margin */
    padding: 20px; /* Reduced padding */
    text-align: center;
    width: calc(33.33% - 20px); /* Approximately 3 items per row with spacing */
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s, box-shadow 0.2s,background 0.2s;
    color: #fff; /* White text color */
}
/* .service.service1 {
    background: linear-gradient(135deg, #FF9900, #FF6633);
}
.service.service2 {
    background: linear-gradient(135deg, #3399FF, #00CC99);
}
.service.service3 {
}
.service.service4 {
    background: linear-gradient(135deg, #66CC33, #33CC33);
}*/
.service:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #66CC33, #33CC33);
}
	/* Style the 'service' h2 and p */
	/* Style for the "Our Services" heading */
.section-heading {
    font-size: 36px;
    font-weight: bold;
    color: #fff; /* White text color */
    text-align: center;
    margin-top: 30px;
	background-color: #118ab2;
	background-image: linear-gradient(319deg, #118ab2 0%, #06d6a0 37%, #ffd166 100%);    padding: 20px; /* Add padding to the heading */
    border-radius: 16px; /* Rounded corners for the background */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    transition: background 0.2s; /* Add transition for background color change */
}

/* Hover effect for the "Our Services" heading */
.section-heading:hover {
	background-color: #007ea7;
	background-image: linear-gradient(315deg, #007ea7 0%, #80ced7 74%);}

	.service p {
		color: #ccc; /* Light gray text for service descriptions */
	}

	/* Style the 'other-service' h2 and p */
	.other-service h2 {
		font-size: 24px;
		color: #fff; /* White heading text */
		margin-bottom: 10px;
	}
	.other-service p {
		color: #ccc; /* Light gray text for service descriptions */
	}

	#content {
		max-width:100rem; /* Adjust the max-width as needed */
	}
	
	.employees-section {
		text-align: center;
		margin-top: 20px;
	}
	
	.employee-table {
		width: 100%;
		border-collapse: collapse;
		margin-top: 10px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		background: linear-gradient(to right, #f2f2f2, #e0e0e0);
	}
	
	.employee-table th, .employee-table td {
		padding: 15px;
		border: 1px solid #ddd;
	}
	
	.employee-table th {
		background-image: linear-gradient(319deg, rgb(17, 138, 178) 0%,
		 rgb(6, 214, 160) 37%, rgb(255, 209, 102) 100%);
		font-weight: bold;
	}

	
	.employee-table tr:nth-child(even) {
		background-color: #f6f6f6;
		background: linear-gradient(135deg, #3399FF, #00CC99);
		
	}
	.employee-table tr:nth-child(odd) {
		background-color: #f6f6f6;
		background: linear-gradient(135deg, #3399FF, #00CC99);
		
	}
	
	.employee-table tr:hover {
		background-color: #e8e8e8;
	}
  
	.employee-table td{
    color: white;
    font-size: 1.25rem;
	}

	.employee-table th{
		font-size: 1.5rem;
	}