* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Nunito", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}

.full_width {
	width: 100%;
}

.content_width {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
}

/* ******************************************************************************* */

/* Header 1 Part Starts Here  */
.header1 {
	background-color: #091d3e;
}

.header1 .container {
	height: 55px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header1 .container p {
	color: #fff;
	font-weight: 600;
	font-size: 16px;
}

.header1 .container span {
	color: antiquewhite;
	font-weight: 600;
}

.header1 .header_social a {
	text-decoration: none;
}

.header1 .header_social i {
	font-size: 22px;
	margin: 0 10px;
}

/* Header 1 Part Ends Here  */

/* ******************************************************************************* */

/* Header 2 Part Starts Here  */
.header2 .container {
	display: flex;
	height: 80px;
	align-items: center;
	margin: 0 auto;
	gap: 30px;
	flex-wrap: wrap;
	justify-content: space-between;
}

.header2 .container .bl_logo {
	width: 220px;
}

.header2 .container .tat_logo {
	width: 60px;
}

.header2 .menu {
	display: flex;
	justify-content: center;
	align-items: center;
}

.header2 .nav ul {
	list-style: none;
	display: flex;
	align-items: center;
}

.header2 .nav ul li a, button {
	text-decoration: none;
	color: #232323;
	font-size: 16px;
	margin: 0 12px;
	text-transform: uppercase;
	font-weight: 700;
	opacity: 0.9;
	transition: all 0.4s ease;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-ms-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	border: none;
	cursor: pointer;
}

.header2 .nav ul li a:hover {
	color: blue;
}

.mob_menu {
	display: none;
}

.header2 .mob_menu i {
	font-size: 25px;
	color: black;
	margin-right: 20px;
}

.nav-btn {
	display: inline-block;
	padding: 8px 16px;
	background-color: #007bff; /* Bootstrap blue */
	color: white !important;
	border-radius: 5px;
	font-weight: 600;
	transition: background-color 0.3s ease;
	text-decoration: none;
}

.nav-btn:hover {
	background-color: #0056b3;
	color: white;
}

/* Header 2 Part Ends Here  */

/* ******************************************************************************* */

/* Main Section Starts Here */
.main {
	background-color: #091d3e;
	border: 5px solid #61ce70;
}

.main .main_section {
	display: flex;
	gap: 100px;
	flex-wrap: wrap;
	padding: 20px;
}

.main .main_content {
	flex: 1;
}

.main .main_logo {
	flex: 1;
}

.main .main_section .box2 {
	height: auto;
	margin: 50px auto;
	box-sizing: border-box;
}

.main .main_section .main_content h2 {
	color: #61ce70;
	font-size: 38px;
	margin-bottom: 10px;
}

.main .main_section .main_content h4 {
	color: #fff;
	font-size: 30px;
	margin-bottom: 20px;
}

.main .main_section .main_content p {
	color: #fff;
	font-size: 18px;
	text-align: justify;
	margin-bottom: 35px;
	font-weight:600;
}

.main .main_section .main_content  .rbtn {
	text-decoration: none;
	color: #000000;
	background-color: #fff;
	margin: 0 auto;
	padding: 8px 25px;
	border-radius: 14px;
	-webkit-border-radius: 14px;
	-moz-border-radius: 14px;
	-ms-border-radius: 14px;
	-o-border-radius: 14px;
	font-weight: 600;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	display: inline-block;
}

.main .main_section .main_content .rbtn:hover {
	background-color: #45c94b;
	color: #fff;
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
}

.main .main_section .main_logo {
	display: flex;
	justify-content: center;
	align-items: center;
}

.main .main_section .main_logo img {
	border: 15px solid #ffffff;
	border-radius: 50%;
	display: block;
	max-width: 100%;
}

.main .main_content .main_social i {
	font-size: 25px;
	margin-bottom: 35px;
	margin-right: 15px;
	transition: transform 0.3s ease, color 0.4s ease;
}

.main .main_content .main_social a {
	text-decoration: none;
}

.main .main_content .main_social i:hover {
	transform: scale(1.4);
	-webkit-transform: scale(1.4);
	-moz-transform: scale(1.4);
	-ms-transform: scale(1.4);
	-o-transform: scale(1.4);
}

/* Main Section Ends Here */

/* ******************************************************************************* */

/* About Us Section Starts Here  */
.mission .mission_container {
	display: flex;
	gap: 100px;
	flex-wrap: wrap;
	padding: 20px;
}

.mission .mission_container .box3 {
	flex: 1;
	height: auto;
	padding: 20px;
	margin: 50px auto;
	box-sizing: border-box;
	max-width: 600px;
}

.mission .mission_container .mission_img {
	display: flex;
	justify-content: center;
	align-items: center;
}

.mission .mission_container .mission_img img {
	border: 10px solid #a4b6e6;
	border-radius: 50%;
	max-width: 100%;
}

.mission .mission_container .mission_desc h3 {
	font-size: 30px;
	color: rgb(45, 97, 240);
}

.mission .mission_container .mission_desc h4 {
	font-size: 22px;
	margin-top: 10px;
}

.mission .mission_container .mission_desc .list .line {
	display: flex;
	margin-top: 25px;
}

.mission .mission_container .mission_desc .list .line i {
	font-size: 28px;
}

.mission .mission_container .mission_desc .list .line p {
	font-size: 17px;
	margin-left: 15px;
}

.mission .mission_container .mission_desc a {
	text-decoration: none;
	padding: 8px 25px;
	display: inline-block;
	margin-top: 25px;
	color: #ffffff;
	border-radius: 14px;
	-webkit-border-radius: 14px;
	-moz-border-radius: 14px;
	-ms-border-radius: 14px;
	-o-border-radius: 14px;
	background-color: #5e2fe9;
	font-weight: 500;
}

.mission .mission_container .mission_desc a:hover {
	background-color: #61ce70;
}

/* About Us Section Ends Here  */

/* ******************************************************************************* */

/* Event Section starts Here  */
/* Search Bar for Event Section */
.event-search-container {
	width: 100%;
	display: flex;
	justify-content: left;
	align-items: center;
	margin-bottom: 30px;
	margin-top: -10px;
}

.event-search-form {
	display: flex;
	gap: 10px;
}

.event-search-input {
	border: none;
	outline: none;
	padding: 10px 15px;
	font-size: 16px;
	border-radius: 15px;
	background-color: #f9f9f9;
	width: 250px;
	color: #333;
}

.event-search-btn {
	padding: 10px 20px;
	background-color: #61ce70;
	color: white;
	font-size: 16px;
	border: none;
	border-radius: 15px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.event-search-btn:hover {
	background-color: #4bbd5f;
}

@media ( max-width : 768px) {
	.event-search-container {
		justify-content: center;
	}
	.event-search-input {
		padding: 8px 14px;
		font-size: 13px;
		width: 220px;
	}
	.event-search-btn {
		padding: 8px 14px;
		font-size: 13px;
	}
}

.event {
	background-color: #163465;
	border: 5px solid #61ce70;
}

.event .event_container {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	padding: 40px;
}

.event .heading1 {
	color: #77bdef;
	text-align: center;
	font-size: 35px;
	padding: 35px 0 15px 0;
}

.event .heading2 {
	color: #fff;
	text-align: center;
	font-size: 40px;
	padding: 0 0 10px 0;
}

.event .event_container .event_box:nth-child(2n) {
	background-color: #104CBA;
}

.event .event_container .event_box:nth-child(2n-1) {
	background-color: #102a54;
}

.event .box4 {
	flex: 1;
	min-width: 250px;
	max-width: 400px;
	height: auto;
	display: inline-block;
	border-radius: 10px;
	margin: 0 auto;
	border: 3px solid var(--color3);
	background-color: #fff;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
	padding: 35px 20px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
}

.event .event_box img {
	width: 100%;
}

.event .event_box h3 {
	color: #fff;
	margin-top: 20px;
}

.event .event_box p {
	color: #bcb5b5;
	margin-top: 20px;
	text-align: justify;
	font-weight: 400;
}

.event  a {
	text-decoration: none;
	font-size: 20px;
	color: #000000;
	font-weight: 500;
	padding: 8px 25px;
	background-color: #fff;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	-o-border-radius: 20px;
	display: inline-block;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}

.event a:hover {
	background-color: #1ae435;
	color: #fff;
	transform: scale(0.95);
	-webkit-transform: scale(0.95);
	-moz-transform: scale(0.95);
	-ms-transform: scale(0.95);
	-o-transform: scale(0.95);
}

.event .eventBtn {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 30px 0 50px 0;
}

.event .view-details-btn {
	display: inline-block;
	margin: 15px auto 0;
	padding: 6px 12px;
	background-color: #28a745; /* a pleasant green */
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	font-size: 14px;
	transition: background-color 0.3s ease;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	text-align: center;
}

.
.event .view-details-btn:hover {
	background-color: #218838; 
	color: #e6e6e6;
}

/* Event Pagination Styles */
.home-event-pagination-container {
	text-align: center;
	margin: 30px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
}

.home-event-pagination-container .event-pagination-btn {
	background-color: #e2e8f0;
	color: #1e293b;
	padding: 8px 18px;
	border-radius: 16px;
	text-decoration: none;
	font-weight: 500;
	font-size: 20px;
	transition: background-color 0.3s ease;
}

.home-event-pagination-container .event-pagination-btn:hover {
	background-color: #cbd5e1;
}

.home-event-pagination-container .event-pagination-active {
	background-color: #2563eb !important;
	color: white !important;
}

/* Responsive Pagination Button Layout */
@media ( max-width : 600px) {
	.home-event-pagination-container	.event-pagination-btn {
		padding: 6px 10px;
		font-size: 14px;
	}
}

/* View Event Section Starts Here */
/* --- Hero Section --- */
.view-event-hero-section {
	position: relative;
	height: 75vh; /* Slightly taller hero */
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: #fff;
	text-align: center;
	padding: 20px;
	box-sizing: border-box;
	background-color: #2c3e50; /* Fallback color */
}

.view-event-hero-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	filter: brightness(0.5) sepia(10%) contrast(110%);
	transition: filter 0.5s ease-in-out;
}

.view-event-hero-section:hover .view-event-hero-image {
	filter: brightness(0.6) sepia(0%) contrast(100%);
}

.view-event-hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to top, rgba(39, 174, 96, 0.8) 0%,
		rgba(52, 73, 94, 0.5) 100%); /* Vibrant green to dark blue */
	z-index: 2;
}

.view-event-hero-content {
	position: relative;
	z-index: 3;
	max-width: 900px;
	padding: 0 20px;
}

.view-event-hero-title {
	font-family: 'Playfair Display', serif;
	font-size: 3rem; /* Even larger */
	margin-bottom: 20px;
	text-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
	line-height: 1.1;
	font-weight: 700;
	color: #f39c12; 
	animation: fadeInDown 1s ease-out forwards;
	opacity: 0;
}

.view-event-hero-small-description {
	font-size: 1.4rem;
	font-weight: 300;
	opacity: 0.9;
	margin-bottom: 30px;
	color: #ecf0f1; 
	animation: fadeInUp 1s ease-out forwards;
	animation-delay: 0.3s;
	opacity: 0;
	text-align: justify;
}

@keyframes fadeInDown {from { opacity:0;
	transform: translateY(-50px);
}

to {
	opacity: 1;
	transform: translateY(0);
}

}
@keyframes fadeInUp {from { opacity:0;
	transform: translateY(50px);
}

to {
	opacity: 1;
	transform: translateY(0);
}

}

/* --- Main Content Wrapper --- */
.view-event-content-wrapper {
	max-width: 1200px;
	margin: -90px auto 60px auto;
	background-color: #fff;
	border-radius: 20px;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.18);
	padding: 50px 70px;
	position: relative;
	z-index: 4;
	border-top: 5px solid #3498db; 
}

/* --- Event Meta Details Section --- */
.view-event-details-meta-section {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: 35px;
	padding: 35px;
	background: linear-gradient(45deg, #e0f2f7, #dff0ff);
	border-radius: 15px;
	margin-bottom: 60px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.view-event-meta-item {
	display: flex;
	align-items: center;
	gap: 18px;
	font-size: 1.15rem;
	color: #34495e; 
	flex: 1 1 auto;
	min-width: 280px;
}

.view-event-icon {
	font-size: 2rem;
	color: #e67e22; 
	width: 40px;
	text-align: center;
}

.view-event-icon-calendar::before {
	content: '\f073';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	color: #c0392b; 
}

.view-event-icon-time::before {
	content: '\f017';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	color: #2980b9; 
}

.view-event-icon-venue::before {
	content: '\f3c5';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	color: #27ae60; 
}

.view-event-meta-label {
	font-weight: 700;
	color: #2c3e50;
}

/* --- Section Headings (Re-usable) --- */
.view-event-section-heading {
	font-family: 'Playfair Display', serif;
	font-size: 2.8rem;
	color: #d35400; 
	text-align: center;
	margin-bottom: 50px;
	padding-bottom: 18px;
	position: relative;
}

.view-event-section-heading::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 100px;
	height: 5px;
	background: linear-gradient(to right, #f39c12, #e67e22);
	border-radius: 3px;
}

/* --- Event Description Section --- */
.view-event-description-section {
	margin-bottom: 70px;
}

.view-event-large-description {
	font-size: 1.15rem;
	color: #444;
	line-height: 1.9;
	max-width: 950px;
	margin: 0 auto;
	text-align: justify;
	border-left: 5px solid #f1c40f; 
	padding-left: 20px;
}

/* --- Event Gallery Section --- */
.view-event-gallery-section {
	margin-bottom: 50px;
}

.view-event-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	padding: 0 20px;
}

.view-event-gallery-item {
	display: block;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
	transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.view-event-gallery-item:hover {
	transform: translateY(-10px);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
}

.view-event-gallery-image {
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease-out, filter 0.4s ease-out;
}

.view-event-gallery-item:hover .view-event-gallery-image {
	transform: scale(1.1);
	filter: brightness(110%);
}

.view-event-no-images {
	text-align: center;
	font-size: 1.3rem;
	color: #666;
	padding: 50px 30px;
	background-color: #f9f9f9;
	border-radius: 15px;
	margin-top: 40px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	border: 1px dashed #ccc;
}

.view-event-no-images-tip {
	font-size: 1rem;
	color: #888;
	margin-top: 15px;
}

/* --- Responsive Adjustments --- */
@media ( max-width : 992px) {
	.view-event-hero-title {
		font-size: 4rem;
	}
	.view-event-hero-small-description {
		font-size: 1.2rem;
	}
	.view-event-content-wrapper {
		padding: 40px 50px;
		margin: -70px auto 50px auto;
	}
	.view-event-details-meta-section {
		gap: 25px;
		padding: 25px;
	}
	.view-event-meta-item {
		font-size: 1.1rem;
		min-width: 220px;
	}
	.view-event-section-heading {
		font-size: 2.3rem;
		margin-bottom: 40px;
	}
	.view-event-large-description {
		font-size: 1.05rem;
		border-left-width: 4px;
		padding-left: 15px;
	}
	.view-event-gallery-grid {
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: 20px;
	}
	.view-event-gallery-image {
		height: 200px;
	}
}

@media ( max-width : 768px) {
	.view-event-hero-section {
		height: 60vh;
	}
	.view-event-hero-title {
		font-size: 3rem;
		margin-bottom: 15px;
	}
	.view-event-hero-small-description {
		font-size: 1.1rem;
	}
	.view-event-content-wrapper {
		padding: 25px 30px;
		margin: -50px auto 40px auto;
		border-radius: 15px;
	}
	.view-event-details-meta-section {
		flex-direction: column;
		align-items: flex-start;
		padding: 20px;
		gap: 15px;
		margin-bottom: 50px;
	}
	.view-event-meta-item {
		font-size: 1rem;
		min-width: unset;
	}
	.view-event-section-heading {
		font-size: 2rem;
		margin-bottom: 30px;
	}
	.view-event-large-description {
		font-size: 1rem;
		border-left-width: 3px;
		padding-left: 10px;
	}
	.view-event-gallery-grid {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 15px;
	}
	.view-event-gallery-image {
		height: 180px;
	}
}

@media ( max-width : 480px) {
	.view-event-hero-title {
		font-size: 2.4rem;
	}
	.view-event-hero-small-description {
		font-size: 0.95rem;
	}
	.view-event-content-wrapper {
		padding: 15px 20px;
		margin: -40px auto 30px auto;
	}
	.view-event-details-meta-section {
		padding: 15px;
	}
	.view-event-section-heading {
		font-size: 1.7rem;
		margin-bottom: 25px;
	}
	.view-event-large-description {
		font-size: 0.95rem;
	}
	.view-event-gallery-grid {
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		gap: 10px;
	}
	.view-event-gallery-image {
		height: 150px;
	}
}

.er-registration-section {
	background-color: #fafbfd;
	padding: 30px;
	border-radius: 16px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.07);
	margin-top: 40px;
}

.er-register-heading {
	font-size: 26px;
	font-weight: 700;
	margin-bottom: 20px;
	color: #2a2a2a;
	text-align: center;
}

.er-registration-form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}

.er-input, .er-select {
	padding: 12px 16px;
	font-size: 15px;
	border: 1px solid #ccc;
	border-radius: 8px;
	width: 100%;
	box-sizing: border-box;
	background-color: #fff;
}

.er-submit-button {
	grid-column: 1/-1;
	padding: 14px 24px;
	background-color: #2979ff;
	color: white;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	cursor: pointer;
	transition: 0.3s ease;
}

.er-submit-button:hover {
	background-color: #1a5fd4;
}

.er-registered-user-actions {
	margin-top: 30px;
	text-align: center;
}

.er-registered-user-button {
	padding: 12px 24px;
	font-size: 16px;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	margin: 5px;
	transition: background-color 0.3s ease;
}

.er-register-button {
	background-color: #28a745;
	color: white;
}

.er-register-button:hover {
	background-color: #218838;
}

.er-withdraw-button {
	background-color: #dc3545;
	color: white;
}

.er-withdraw-button:hover {
	background-color: #c82333;
}

.er-registration-box {
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(12px);
	padding: 30px;
	border-radius: 18px;
	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
	max-width: 600px;
	margin: 60px auto 30px auto;
	text-align: center;
	border-top: 4px solid #3498db;
}

.er-register-heading {
	font-size: 28px;
	font-weight: 700;
	margin-bottom: 25px;
	color: #2c3e50;
}

.er-registration-guest-buttons {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}

.er-register-button, .er-join-button {
	padding: 14px 24px;
	font-size: 16px;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: 0.3s ease;
	text-decoration: none;
	display: inline-block;
}

.er-register-button {
	background-color: #28a745;
	color: white;
}

.er-register-button:hover {
	background-color: #218838;
}

.er-join-button {
	background-color: #17a2b8;
	color: white;
}

.er-join-button:hover {
	background-color: #138496;
}

.er-registration-member-actions form {
	display: flex;
	justify-content: center;
}

.er-registration-member-actions button {
	padding: 14px 28px;
	font-size: 16px;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: 0.3s ease;
	color: #fff;
}

.er-withdraw-button {
	background-color: #dc3545;
}

.er-withdraw-button:hover {
	background-color: #c82333;
}

.er-register-button:not(.er-withdraw-button) {
	background-color: #28a745;
}

.er-register-button:not(.er-withdraw-button):hover {
	background-color: #218838;
}

/* View Event Section Ends  Here */

/* Guest Event Registration Styles */
.erg-full-width {
	width: 100%;
	background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
	padding: 40px 0;
}

.erg-content-width {
	max-width: 1000px;
	margin: auto;
	padding: 20px;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.erg-form-title {
	text-align: center;
	font-size: 28px;
	font-weight: bold;
	color: #2c3e50;
	margin-bottom: 25px;
}

.erg-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.erg-row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.erg-group {
	flex: 1 1 48%;
	display: flex;
	flex-direction: column;
}

.erg-group label {
	font-weight: 600;
	margin-bottom: 6px;
	color: #34495e;
}

.erg-group input, .erg-group select {
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 8px;
	font-size: 15px;
}

.erg-submit-wrapper {
	text-align: center;
	margin-top: 10px;
}

.erg-submit-btn {
	background-color: #2980b9;
	color: white;
	padding: 12px 30px;
	border: none;
	border-radius: 10px;
	font-size: 16px;
	cursor: pointer;
	transition: 0.3s ease;
}

.erg-submit-btn:hover {
	background-color: #1c5980;
}

@media ( max-width : 768px) {
	.erg-row {
		flex-direction: column;
	}
	.erg-group {
		flex: 1 1 100%;
	}
}

/* Event Section Ends Here  */

/* ******************************************************************************* */

/* Team section starts Here  */
.team .team_container {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	padding: 40px;
}

.team .box5 {
	flex: 1;
	min-width: 250px;
	max-width: 400px;
	height: auto;
	display: inline-block;
	margin: 0 auto;
	background-color: #e7e7e7;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
	padding: 30px 20px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
}

.team .team_member img {
	width: 100%;
	border-radius: 10px;
}

.team .heading1 {
	color: rgb(45, 97, 240);
	text-align: center;
	font-size: 35px;
	padding: 35px 0 15px 0;
}

.team .heading2 {
	color: #181aae;
	text-align: center;
	font-size: 40px;
	padding: 0 0 10px 0;
}

.team .team_member h3 {
	font-size: 22px;
	margin-top: 15px;
	color: #181aae;
}

.team .team_member h5 {
	font-size: 15px;
	margin-top: 5px;
}

.team .team_member .team_social i {
	font-size: 28px;
	margin-top: 15px;
	margin-right: 15px;
	transition: transform 0.3s ease, color 0.4s ease;
}

.team .team_member .team_social i:hover {
	transform: scale(1.3);
	-webkit-transform: scale(1.3);
	-moz-transform: scale(1.3);
	-ms-transform: scale(1.3);
	-o-transform: scale(1.3);
}

.team .team_member .team_social a {
	text-decoration: none;
}

/* Team section ends Here  */

/* ******************************************************************************* */

/* ******************************************************************************* */

/* Alumni Spotlight Section Starts Here  */
.alumni {
	display: flex;
	background-color: #c0c0f1;
	border-top: 5px solid #61ce70;
}

.alumni .alumni_section {
	margin: 30px auto 50px auto;
}

.alumni h3 {
	color: #01060e;
	text-align: center;
	font-size: 40px;
	margin: 10px 0 45px 0;
}

.slide-container {
	max-width: 1400px;
	width: 100%;
	padding: 40px 0;
}

.slide-content {
	height: 550px;
	margin: 0 40px;
	overflow: hidden;
	border-radius: 25px;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	-ms-border-radius: 25px;
	-o-border-radius: 25px;
}

@media ( max-width :950px) {
	.slide-content {
		height: 600px;
	}
	.alumni h3 {
		color: #01060e;
		text-align: center;
		font-size: 32px;
		margin: 0 0 30px 0;
	}
}

.card {
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
	border-radius: 25px;
	background-color: #ffffff;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	-ms-border-radius: 25px;
	-o-border-radius: 25px;
}

.card-content {
	margin: 0 15px;
}

@media ( max-width :950px) {
	.card-content {
		margin: 0 2px;
	}
}

.card-content h2 {
	color: #000;
	font-weight: 700;
}

.card-content h4 {
	color: #000;
	font-weight: 600;
	margin: 10px 0;
	text-align: center;
}

.card-content p {
	text-align: justify;
}

.image-content, .card-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10px 14px;
}

.image-content {
	row-gap: 5px;
	position: relative;
	padding: 25px 0;
}

.overlay {
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	background-color: #4070f4;
	border-radius: 25px 25px 0 25px;
	-webkit-border-radius: 25px 25px 0 25px;
	-moz-border-radius: 25px 25px 0 25px;
	-ms-border-radius: 25px 25px 0 25px;
	-o-border-radius: 25px 25px 0 25px;
}

.overlay::after, .overlay::before {
	content: '';
	position: absolute;
	right: 0;
	bottom: -40px;
	height: 40px;
	width: 40px;
	background-color: #4070f4;
}

.overlay::after {
	border-radius: 0 25px 0 0;
	background-color: #fff;
	-webkit-border-radius: 0 25px 0 0;
	-moz-border-radius: 0 25px 0 0;
	-ms-border-radius: 0 25px 0 0;
	-o-border-radius: 0 25px 0 0;
}

.card-image {
	position: relative;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	padding: 3px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	background-color: #fff;
}

.card-image .card-img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	border-radius: 50%;
	border: 4px solid #4070f4;
}

.name {
	font-size: 18px;
	font-weight: 500;
	color: #333;
}

.description {
	font-size: 14px;
	color: #707070;
	text-align: center;
}

.slide-content .swiper-navBtn {
	color: #639cf7;
	transition: color 0.3s ease;
	-webkit-transition: color 0.3s ease;
	-moz-transition: color 0.3s ease;
	-ms-transition: color 0.3s ease;
	-o-transition: color 0.3s ease;
}

.slide-content .swiper-navBtn:hover {
	color: #4070f4;
}

.slide-content .swiper-navBtn::before, .slide-content .swiper-navBtn::after
	{
	font-size: 40px;
}

.slide-content .swiper-button-next {
	right: 0;
}

.slide-content .swiper-button-prev {
	left: 0;
}

.swiper-pagination-bullet {
	background-color: #639cf7;
	opacity: 1;
}

.swiper-pagination-bullet-active {
	background-color: #4070f4;
	opacity: 1;
}

/* Alumni Spotlight Section Ends Here */

/* ******************************************************************************* */

/* Contact Us Home Starts Here  */
.contact {
	background-color: #ffffff;
}

.contact .contact_container {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	padding: 40px;
}

.contact .contact_container .box7 {
	flex: 1;
	width: 100%;
	height: auto;
	display: inline-block;
	border-radius: 10px;
	margin: 0 auto;
	background-color: #e7e7e7;
	box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.4);
	padding: 45px 20px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	text-align: center;
}

.contact .contact_container .ci {
	font-size: 38px;
}

.contact .contact_container h4 {
	font-size: 24px;
	margin: 20px 0;
}

.contact .contact_container .main_social i {
	font-size: 35px;
	margin: 15px 0 0 15px;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}

.contact .contact_container .main_social a {
	text-decoration: none;
}

.contact .contact_container .main_social i:hover {
	transform: scale(1.3);
	-webkit-transform: scale(1.3);
	-moz-transform: scale(1.3);
	-ms-transform: scale(1.3);
	-o-transform: scale(1.3);
}

.contact .con_info h5 {
	font-size: 16px;
	margin-bottom: 20px;
}

.contact .con_info a h6 {
	font-size: 18px;
	color: #2670e8;
}

.contact .con_info a {
	text-decoration: none;
}

/* *************************************** */
.mapform {
	background-color: #102a54;
	border: 5px solid #61ce70;
}

.mapform h3 {
	color: #ffffff;
	text-align: center;
	font-size: 40px;
	padding: 30px 0 0 0;
}

.mapform .mapform_container {
	margin: 0 auto;
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	padding: 80px 40px;
}

.mapform .box8 {
	flex: 1;
	border-radius: 10px;
	margin: 0 0;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
}

.mapform .map {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mapform .map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 10px;
}

.mapform .mapform_container .form {
	width: 90%;
	margin: 20px 50px;
	background-color: #3972ed;
}

.mapform .mapform_container form {
	margin: 20px 50px;
}

.mapform .form h2 {
	color: #ffffff;
}

.mapform .form input {
	border: none;
	outline: none;
	width: 100%;
	padding: 10px 20px;
	margin-top: 25px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
}

.mapform .form textarea {
	border: none;
	outline: none;
	width: 100%;
	padding: 10px 20px;
	resize: none;
	margin-top: 25px;
	border-radius: 10px;
}

.mapform .form .formBtnMsg {
	display: flex;
	gap: 15px;
}

.mapform .form button {
	flex: 1;
	cursor: pointer;
	padding: 8px 25px;
	border-radius: 8px;
	border: none;
	outline: none;
	font-size: 16px;
	margin-top: 10px;
}

.mapform .form button:hover {
	background-color: skyblue;
}

/* Loading Overlay Styles */
#loadingOverlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 9999;
	justify-content: center;
	align-items: center;
}

.loading-spinner {
	border: 5px solid #f3f3f3;
	border-top: 5px solid #3498db;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {transform: rotate(0deg);}

100%{
transform:rotate(360deg);
}
}

/* Form Submission Popup Styles */
#formSubmissionPopup {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 9999;
	justify-content: center;
	align-items: center;
}

.popup-content {
	background-color: white;
	padding: 30px;
	border-radius: 10px;
	text-align: center;
	max-width: 400px;
	width: 90%;
}

#popupMessageText {
	font-size: 18px;
	margin-bottom: 20px;
}

#popupCloseButton {
	padding: 8px 20px;
	background-color: #3972ed;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
}

#popupCloseButton:hover {
	background-color: #2a5bd6;
}

/* Contact Us Home Ends Here  */

/* ******************************************************************************* */

/* CTA section starts Here  */
.cta {
	background: linear-gradient(135deg, rgba(24, 41, 46, 1) 20%,
		rgba(87, 98, 124, 1) 50%, rgba(31, 57, 61, 1) 80%);
}

.cta_container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 70px 100px;
	justify-content: center;
}

.cta .cta_container .info h3 {
	font-size: 22px;
	color: #fff;
}

.cta .cta_container .info img {
	width: 150px;
}

.cta_container .box11 {
	flex: 1;
	text-align: center;
	padding: 20px;
}

.cta .cta_container .button_join a {
	text-decoration: none;
	font-size: 18px;
	color: #000000;
	font-weight: 700;
	padding: 12px 75px;
	background-color: #fff;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
	transition: all 0.4s ease;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-ms-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
}

.cta .cta_container .button_join a:hover {
	padding: 10px 65px;
	background-color: skyblue;
}

/* CTA section Ends Here  */

/* ******************************************************************************* */

/* Footer Starts Here  */
.footer {
	border: 5px solid #b9b9f8;
}

.footer .footer_container {
	display: flex;
	gap: 100px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.footer .footer_container .logo img {
	width: 350px;
}

.footer .footer_container .box9 {
	flex: 1;
	height: auto;
	padding: 20px;
	margin: 20px auto;
	box-sizing: border-box;
}

.footer .footer_container .text {
	text-align: center;
}

.footer .footer_container .main_social i {
	font-size: 30px;
	margin-right: 15px;
	transition: transform 0.3s ease, color 0.4s ease;
}

.footer .footer_container .main_social a {
	text-decoration: none;
}

.footer .footer_container .main_social i:hover {
	transform: scale(1.4);
	-webkit-transform: scale(1.4);
	-moz-transform: scale(1.4);
	-ms-transform: scale(1.4);
	-o-transform: scale(1.4);
}

/* Footer Ends Here  */

/* ******************************************************************************* */

/* Footer1 Section Starts Here  */
.footer1 {
	background-color: #091d3e;
}

.footer1 .footer_container1 {
	height: 75px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 60px;
}

.footer1 .footer_container1 h3 {
	color: #fff;
	font-weight: 600;
	font-size: 16px;
}

.footer1 .footer_container1 h3 a {
	color: #c3ff00;
	font-weight: 600;
	text-decoration: none;
}

/* Footer1 Section Ends Here  */

/* ******************************************************************************* */

/* Responsive Design Part 950px Starts Here  */
@media ( max-width :950px) {
	/* Header Part Starts Here  */
	.header1 {
		display: none;
	}
	.mob_menu {
		display: inline;
	}
	.header2 {
		position: relative;
		z-index: 9999;
	}
	.header2 .container {
		position: sticky;
		background-color: hsl(0, 18%, 93%);
	}
	.header2 .menu nav ul {
		position: absolute;
		top: 80px;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		background-color: rgb(255, 255, 255);
		overflow: hidden;
		border-top: 2px solid green;
		border-bottom: 2px solid green;
		padding: 0;
		margin: 0;
	}
	.header2 .container .tat_logo {
		display: none;
	}
	.header2 nav ul li {
		margin: 0;
		padding: 15px 15px;
		text-align: center;
		border-bottom: 1px solid rgb(223, 226, 223);
		width: 100%;
	}
	#menulist {
		transition: all 0.5s;
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		-ms-transition: all 0.5s;
		-o-transition: all 0.5s;
	}
	.logo img {
		width: 180px;
		height: auto;
	}

	/* Header Part Ends Here  */

	/* Slider part is removed here  */
	.slider {
		display: none;
	}

	/* Contact Us Starts Here  */
	.contact .contact_container {
		flex-direction: column;
		gap: 15px;
		align-items: center;
		margin: 0 auto;
		padding: 5px;
	}
	.mapform .mapform_container {
		flex-direction: column;
		gap: 15px;
		align-items: center;
		margin: 0 auto;
		padding: 40px 10px;
	}
	.mapform .mapform_container .form {
		margin: 20px 15px;
	}
	.mapform .mapform_container form {
		margin: 20px 22px;
	}
	.mapform .map iframe {
		height: 400px;
	}

	/* Contact Us Ends Here  */

	/* Footer Section Starts Here  */
	.footer .footer_container {
		flex-direction: column;
		gap: 10px;
	}
	.footer .footer_container .box9 {
		margin: 2px auto;
		width: 100%;
	}
	.footer .footer_container .logo {
		text-align: center;
	}
	.footer .footer_container .logo img {
		width: 300px;
	}
	.footer .footer_container .main_social {
		text-align: center;
	}
	.footer .footer_container .box9 {
		padding: 5px;
	}

	/* Footer Section Ends Here  */

	/* Footer1 Section Starts Here  */
	.footer1 .footer_container1 {
		flex-direction: column;
		padding: 20px;
	}
	/* Footer1 Section Ends Here  */

	/* CTA section Starts Here  */
	.cta {
		padding: 5px 0;
	}
	.cta_container {
		flex-direction: column;
		padding: 10px 10px;
	}
	/* CTA section Ends Here  */
}

/* Responsive Design Part 950px Ends Here  */

/* Responsive Design Part 760px Starts Here  */
@media ( max-width :760px) {
	/* Main Part Starts Here  */
	.main .main_section {
		flex-direction: column;
		gap: 5px;
		align-items: center;
		margin: 0 auto;
		padding: 5px;
	}
	.main .main_section .box2 {
		min-width: 100%;
		margin: 0 0;
		padding: 10px;
	}
	.main .main_section .main_content h2 {
		font-size: 29px;
	}
	.main .main_section .main_content h4 {
		font-size: 21px;
	}

	/* Main Part Ends Here  */

	/* Mission Section Starts Here */
	.mission .mission_container {
		flex-direction: column-reverse;
		gap: 5px;
		align-items: center;
		margin: 0 auto;
		padding: 5px;
	}
	.mission .mission_container .box3 {
		min-width: 100%;
		margin: 0 0;
	}

	/* Mission Section Ends Here */

	/* Event Section Starts Here  */
	.event .event_container {
		flex-direction: column;
		padding: 20px;
	}
	/* Event Section Ends Here  */

	/* Team Section Starts Here  */
	.team .team_container {
		flex-direction: column;
		margin: 0 auto;
		padding: 10px;
	}
	/* Team Section Ends Here  */

	/* Home Slider Starts Here  */
	.slide-content {
		margin: 0 10px;
	}
	.slide-content .swiper-navBtn {
		display: none;
	}

	/* Home Slider Ends Here  */

	/* footer1 starts Here  */
	.footer1 .footer_container1 h3 {
		color: #fff;
		font-weight: 600;
		font-size: 14px;
	}

	/* footer1 Ends Here  */
}

/* Responsive Design Part 760px Ends Here  */

/* CSS FOR CONTACT US PAGE  Starts Here*/
.cimage {
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
		url('/images/contact.png');
	width: 100%;
	height: 40vh;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cimage_container {
	text-align: center;
}

.cimage h1 {
	color: #ffffff;
	font-size: 2.5em;
	margin: 0;
}

/* CSS FOR CONTACT US PAGE Ends Here */

/* CSS for about Us Page starts Here  */
.yt {
	background-color: #163465;
}

.yt h3 {
	text-align: center;
	padding-top: 35px;
	color: #fff;
	font-size: 32px;
}

.yt .yt_container {
	padding: 50px 50px;
}

.yt_video_wrapper {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.yt_video_wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
	left: 0;
}

@media ( max-width :950px) {
	.yt .yt_container {
		padding: 10px;
	}
}

/* CSS for about Us Page Ends Here  */

/* Css Code for Gallery Page Starts Here*/
.gallery_g {
	background-color: #091d3e;
}

.gallery_g h3 {
	text-align: center;
	color: #ffffff;
	font-size: 38px;
	padding-top: 35px;
}

.gallery_container .container {
	width: 100%;
	min-height: 100vh;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	padding: 50px 8px;
}

.gallery_container .gallery1 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 30px;
}

.gallery_container .gallery1 img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 16/9;
	border-radius: 14px;
	border: 5px double green;
	-webkit-border-radius: 14px;
	-moz-border-radius: 14px;
	-ms-border-radius: 14px;
	-o-border-radius: 14px;
}

@media ( max-width : 950px) {
	.gallery_container .gallery1 {
		grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
	}
	.gallery_g h3 {
		font-size: 32px;
	}
}

/* Gallery Pagination Styling */
.home-gallery-pagination-container {
	text-align: center;
	margin-top: 30px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
}

.home-gallery-pagination-container .gallery-pagination-btn {
	background-color: #e2e8f0;
	color: #1e293b;
	padding: 8px 14px;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 500;
	font-size: 15px;
	transition: background-color 0.3s ease;
}

.home-gallery-pagination-container .gallery-pagination-btn:hover {
	background-color: #cbd5e1;
}

.home-gallery-pagination-container .gallery-pagination-active {
	background-color: #2563eb !important;
	color: white !important;
}

/* Responsive Buttons */
@media ( max-width : 600px) {
	.home-gallery-pagination-container	.gallery-pagination-btn {
		padding: 6px 10px;
		font-size: 14px;
	}
}

/* Css Code for Gallery Page Ends Here */

/* Css code for Reg Form Starts Here  */
.Reg_form {
	background: linear-gradient(135deg, rgba(16, 42, 84, 1) 0%,
		rgba(212, 212, 255, 1) 52%, rgba(93, 68, 235, 1) 100%);
}

.Reg_form .Reg_Form_Container {
	display: flex;
	flex-wrap: wrap;
	padding: 0px;
}

.Reg_form .Reg_Form_Container .box12 {
	flex: 1;
	height: auto;
	padding: 20px;
	margin: 50px auto;
	box-sizing: border-box;
	max-width: 900px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.Reg_form .Reg_Form_Container .RF {
	background-color: rgba(57, 114, 237, 0.7);
	border-radius: 14px;
	-webkit-border-radius: 14px;
	-moz-border-radius: 14px;
	-ms-border-radius: 14px;
	-o-border-radius: 14px;
}

.Reg_form .Reg_Form_Container .RF form {
	color: #fff;
	display: flex;
	flex-direction: column;
	margin: 20px 40px;
}

.Reg_form .Reg_Form_Container .RF form img {
	width: 100%;
	border-radius: 14px;
	margin-bottom: 25px;
	-webkit-border-radius: 14px;
	-moz-border-radius: 14px;
	-ms-border-radius: 14px;
	-o-border-radius: 14px;
}

.Reg_form .Reg_Form_Container .RF form .head_details {
	margin-bottom: 15px;
}

.Reg_form .Reg_Form_Container .RF form .head_details h1 {
	font-size: 34px;
	font-weight: 600;
}

.Reg_form .Reg_Form_Container .RF form label {
	font-size: 20px;
	margin-bottom: 5px;
	font-family: "Lexend", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
}

form label .star {
	color: rgb(140, 255, 0);
}

.Reg_form .Reg_Form_Container .RF form input, .Reg_form .Reg_Form_Container .RF form select
	{
	border: none;
	outline: none;
	font-size: 16px;
	padding: 12px 20px;
	margin-bottom: 20px;
	border-radius: 7px;
}

.Reg_form .Reg_Form_Container .RF form .input-file {
	border: none;
	outline: none;
	font-size: 16px;
	padding: 5px 10px;
	margin-bottom: 20px;
	border-radius: 7px;
	background-color: #fff;
	width: 100%;
	cursor: pointer;
	color: #1a1a1a;
	appearance: none;
	-webkit-appearance: none;
}

.Reg_form .Reg_Form_Container .RF form .input-file::file-selector-button
	{
	border: none;
	background-color: #0080c0;
	color: white;
	padding: 10px 20px;
	margin-right: 10px;
	border-radius: 7px;
	cursor: pointer;
	font-weight: 500;
	font-size: 16px;
}

.Reg_form .Reg_Form_Container .RF form .input-file::file-selector-button:hover
	{
	background-color: #0056b3;
}

.styled-select option {
	padding: 10px;
}

.Reg_form .Reg_Form_Container .RF form .so {
	border: none;
	outline: none;
	font-size: 16px;
	padding: 10px 20px;
	margin-bottom: 20px;
	margin-top: 10px;
	border-radius: 14px;
	-webkit-border-radius: 7px;
}

.Reg_form .Reg_Form_Container .RF form textarea {
	border: none;
	outline: none;
	font-size: 16px;
	padding: 10px 20px;
	margin-bottom: 20px;
	border-radius: 7px;
	resize: none;
}

.Reg_form .Reg_Form_Container .RF form input[type="submit"], .Reg_form .Reg_Form_Container .RF form input[type="reset"]
	{
	padding: 10px 20px;
	font-size: 20px;
	border-radius: 7px;
	background: linear-gradient(90deg, rgba(240, 240, 240, 1) 0%,
		rgba(168, 168, 255, 1) 35%, rgba(200, 240, 247, 1) 100%);
	color: #7d6608;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.3s ease, color 0.3s ease;
}

.Reg_form .Reg_Form_Container .RF form input[type="submit"]:hover,
	.Reg_form .Reg_Form_Container .RF form input[type="reset"]:hover {
	background: #007bff;
	color: #ffffff;
}

.popup {
	position: fixed;
	top: 20%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	display: none;
	background-color: rgba(255, 248, 220, 0.95);
	/* antique white background */
	border: 2px solid #8B4513; /* saddle brown border */
	border-radius: 12px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
	width: 400px;
	max-width: 90%;
	font-family: 'Georgia', serif;
	animation: fadeInPopup 0.5s ease-in-out;
}

/* Popup Content */
.popup-content {
	padding: 25px 30px;
	text-align: center;
}

.popup h2 {
	font-size: 20px;
	margin-bottom: 15px;
	color: #4B2E17; /* deep brown text */
}

.popup-success h2 {
	color: #155724;
}

.popup-error h2 {
	color: #721c24;
}

.popup-button {
	margin-top: 10px;
	background-color: #8B4513;
	color: white;
	padding: 8px 20px;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	font-family: 'Georgia', serif;
	transition: background-color 0.3s ease;
}

.popup-button:hover {
	background-color: #A0522D;
}

.verify-container {
	max-width: 600px;
	margin: 50px auto;
	padding: 30px;
	border-radius: 16px;
	background: linear-gradient(to right, #f8fafc, #e0f7fa);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
	font-family: 'Segoe UI', sans-serif;
	text-align: center;
}

.verify-container h1 {
	font-size: 28px;
	color: #2563eb;
	margin-bottom: 16px;
}

.verify-container p {
	font-size: 16px;
	color: #334155;
	margin-bottom: 24px;
}

.verify-container .icon {
	font-size: 64px;
	margin-bottom: 20px;
}

.verify-container .success {
	color: #22c55e;
}

.verify-container .error {
	color: #ef4444;
}

.verify-container a {
	text-decoration: none;
	background-color: #2563eb;
	color: white;
	padding: 10px 20px;
	border-radius: 8px;
	font-weight: 600;
	display: inline-block;
	transition: background-color 0.3s ease;
}

.verify-container a:hover {
	background-color: #1e40af;
}

@media screen and (max-width: 600px) {
	.verify-container {
		margin: 20px;
		padding: 20px;
	}
}

/* Animation */
@keyframes fadeInPopup {from { opacity:0;
	transform: translate(-50%, -20%);
}

to {
	opacity: 1;
	transform: translate(-50%, 0%);
}

}
@media ( max-width :950px) {
	.Reg_form .Reg_Form_Container .RF form {
		margin: 20px 0px;
	}
	.Reg_form .Reg_Form_Container {
		padding: 10px;
	}
	.Reg_form .Reg_Form_Container .box12 {
		padding: 10px;
	}
}

@media ( max-width :450px) {
	.Reg_form .Reg_Form_Container .box12 {
		padding: 20px;
		margin: 10px auto;
	}
	.Reg_form .Reg_Form_Container .RF form .head_details {
		margin-bottom: 15px;
	}
	.Reg_form .Reg_Form_Container .RF form label {
		font-size: 17px;
		margin-bottom: 5px;
	}
	.Reg_form .Reg_Form_Container .RF form input, .Reg_form .Reg_Form_Container .RF form select
		{
		border: none;
		outline: none;
		font-size: 14px;
		padding: 11px 10px;
		margin-bottom: 20px;
	}
	.Reg_form .Reg_Form_Container .RF form .so {
		border: none;
		outline: none;
		font-size: 14px;
		padding: 11px 10px;
		margin-bottom: 20px;
		margin-top: 10px;
		border-radius: 14px;
		-webkit-border-radius: 14px;
		-moz-border-radius: 14px;
		-ms-border-radius: 14px;
		-o-border-radius: 14px;
	}
	.Reg_form .Reg_Form_Container .RF form textarea {
		border: none;
		outline: none;
		font-size: 14px;
		padding: 11px 10px;
		margin-bottom: 20px;
		border-radius: 14px;
		-webkit-border-radius: 14px;
		-moz-border-radius: 14px;
		-ms-border-radius: 14px;
		-o-border-radius: 14px;
	}
	.Reg_form .Reg_Form_Container .RF form input[type="submit"], .Reg_form .Reg_Form_Container .RF form input[type="reset"]
		{
		font-size: 15px;
	}
	.wp_link h3 {
		padding: 25px 5px;
	}
	.wp_link .wp_link_container {
		flex-direction: column;
		gap: 5px;
	}
	.wp_link .wp_link_container .box13 {
		width: 90%;
		margin: 5px;
	}
}

/* Css code for Reg Form Ends Here  */

/* CSS for Registration Page Starts Here  */
.regform {
	background-color: #e0e0e0;
}

.regform .regform_container {
	margin: 0 auto;
	display: flex;
	gap: 60px;
	flex-wrap: wrap;
	padding: 30px 40px;
}

.regform .box8 {
	flex: 1;
	max-width: 450px;
	height: fit-content;
	border-radius: 10px;
	margin: 0 auto;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
}

.regform .regform_container .r_form {
	width: 90%;
	margin: 20px auto;
	background-color: #ffffff;
}

.regform .regform_container .r_logo img {
	width: 100%;
}

.regform .regform_container .r_form .ll {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 15px auto;
}

.regform .regform_container .r_form img {
	width: 90px;
}

.regform .regform_container form {
	margin: 50px 50px;
}

.regform .r_form input {
	border: none;
	outline: none;
	width: 100%;
	padding: 10px 20px;
	margin-top: 10px;
	margin-bottom: 20px;
	border-radius: 5px;
	background-color: #e0e0e0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
}

.regform .r_form button {
	padding: 10px 25px;
	background-color: #6c5ce7;
	color: #ffffff;
	border-radius: 20px;
	font-weight: 600;
	border: none;
	outline: none;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	-o-border-radius: 20px;
	font-size: 16px;
	margin-top: 20px;
	margin-right: 15px;
}

.regform .r_form .naccount {
	margin-top: 20px;
}

/* Responsive design  */
@media ( max-width :760px) {
	.lbox h1 {
		font-size: 1.9em;
	}
	.regform .regform_container {
		gap: 10px;
		flex-direction: column-reverse;
		padding: 0;
	}
	.regform .regform_container .r_form {
		margin: 20px auto;
	}
	.regform .regform_container form {
		margin: 50px 30px;
	}
}

/* CSS for Registration Page Ends Here */

/* CSS for Login Page  */
.lbox {
	background: #19485f;
	border: 3px solid #61ce70;
	width: 100%;
	height: 75px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lbox_container {
	text-align: center;
}

.lbox h1 {
	color: #ffffff;
	font-size: 2.0em;
	margin: 0;
}

.lboxr {
	background: #19485f;
	border: 3px solid grey;
	width: 100%;
	height: 75px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lboxr h1 {
	color: #ffffff;
	font-size: 2.0em;
	margin: 0;
}

@media ( max-width :760px) {
	.lbox {
		border: none;
		height: 55px;
	}
	.lboxr {
		border: none;
		height: 55px;
	}
	.lboxr h1 {
		color: #ffffff;
		font-size: 1.8em;
		margin: 0;
	}
}

.logform {
	background: linear-gradient(172deg, rgba(16, 42, 84, 1) 0%,
		rgba(212, 212, 255, 1) 47%, rgba(93, 68, 235, 1) 100%);
}

.logform .logform_container {
	margin: 0 auto;
	display: flex;
	gap: 60px;
	flex-wrap: wrap;
	padding: 10px 40px;
}

.logform .box8 {
	flex: 1;
	max-width: 430px;
	height: fit-content;
	border-radius: 10px;
	margin: 0 auto;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
}

.logform .logform_container .l_form {
	width: 90%;
	margin: 20px auto;
	background-color: #ffffff;
}

.logform .logform_container .l_form .ll {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 15px;
}

.logform .logform_container .l_form img {
	width: 90px;
}

.logform .logform_container form {
	margin: 30px 50px;
}

.logform .l_form label {
	font-size: 20px;
}

.logform .l_form input {
	font-size: 15px;
	border: none;
	outline: none;
	width: 100%;
	padding: 13px 20px;
	margin-top: 10px;
	margin-bottom: 20px;
	border-radius: 5px;
	background-color: #e0e0e0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
}

.logform .l_form .btn {
	display: flex;
}

.logform .l_form button {
	flex: 1;
	padding: 10px 25px;
	background-color: #6c5ce7;
	color: #ffffff;
	border-radius: 7px;
	font-weight: 600;
	border: none;
	outline: none;
	font-size: 16px;
	margin-top: 20px;
	margin-right: 15px;
}

.logform .l_form button:hover {
	background-color: #6c9ce9;
	color: #ffffff;
	cursor: pointer;
}

.logform .l_form a {
	text-decoration: none;
}

.logform .l_form .naccount {
	margin-top: 20px;
}

.invEP {
	text-align: center;
	font-size: 18px;
	color: red;
	font-weight: 700;
	margin: 15px 60px;
	padding: 10px;
	display: block;
}

.logoutS {
	text-align: center;
	font-size: 22px;
	color: green;
	font-weight: 700;
	margin: 15px 60px;
	padding: 10px;
	display: block;
}

@media ( max-width :760px) {
	.invEP {
		font-size: 18px;
	}
	.logoutS {
		font-size: 18px;
	}
}

/* Responsive design  */
@media ( max-width :760px) {
	.lbox h1 {
		font-size: 1.9em;
	}
	.logform .logform_container {
		gap: 10px;
		flex-direction: column-reverse;
		padding: 0;
	}
	.logform .logform_container .l_form {
		margin: 20px auto;
	}
	.logform .logform_container form {
		margin: 30px 30px;
	}
	.logform .logform_container form h3 {
		font-size: 16px;
	}
	.logform .l_form label {
		font-size: 17px;
	}
	.logform .l_form input {
		font-size: 12px;
		padding: 11px 15px;
	}
	.logform .l_form .btn {
		display: flex;
	}
	.logform .l_form button {
		flex: 1;
		padding: 10px 25px;
		background-color: #6c5ce7;
		color: #ffffff;
		border-radius: 7px;
		font-weight: 600;
		border: none;
		outline: none;
		font-size: 16px;
		margin-top: 20px;
		margin-right: 15px;
	}
}

/* CSS for Login Page Ends Here */

/* ******************************************************************************* */
/* ******************************************************************************* */
/* **************ADMIN PART********************ADMIN PART*******************ADMIN PART*************ADMIN PART************* */

/* Admin Dashboard Starts Here*/
.dashboard-flex {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	margin: 50px auto;
}

.admin-sidebar {
	width: 100%;
	max-width: 300px;
	background-color: #f2f2f2;
	border-radius: 20px;
	padding: 30px 20px;
	text-align: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.admin-avatar {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 15px;
	border: 3px solid #007bff;
}

.admin-sidebar h2 {
	font-size: 22px;
	margin-bottom: 10px;
}

.admin-quote {
	font-style: italic;
	color: #555;
	font-size: 15px;
	line-height: 1.4;
}

.admin-profile-btn {
	padding: 8px 14px;
	display: block;
	margin: 15px;
	background-color: #007bff;
	transition: all 0.4s ease;
	color: white;
	border-radius: 5px;
	cursor: pointer;
	font-weight: 600;
	text-decoration: none;
}

.admin-profile-btn:hover {
	background-color: blue;
	color: white;
}

/* Grid layout reused from your style */
.admin-dash-grid {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 30px;
}

.admin-dash-card {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background-color: #fff;
	border-radius: 15px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	padding: 30px 20px;
	text-align: center;
	text-decoration: none;
	color: #222;
	transition: 0.8s;
}

.admin-dash-card i {
	font-size: 42px;
	color: #007bff;
	margin-bottom: 10px;
}

.admin-dash-card h3 {
	font-size: 20px;
	margin-bottom: 8px;
}

.admin-dash-card hr {
	width: 60px;
	border: 2px solid #007bff;
	margin: 0 auto;
}

.admin-dash-card:hover {
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
	background: linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%)
}

/* Responsive adjustment */
@media ( max-width : 768px) {
	.dashboard-flex {
		flex-direction: column;
		align-items: center;
		margin: 20px auto;
	}
	.admin-sidebar {
		width: 100%;
		max-width: none;
	}
	.admin-dash-grid {
		width: 100%;
		padding: 0 25px;
	}
}

/* Admin Dashboard Ends Here*/

/* Admin Students Manage Starts Here */
.student-table-section {
	padding: 40px 0;
	background: linear-gradient(to right, #eef2f3, #8e9eab);
}

.table-title {
	text-align: center;
	font-size: 30px;
	margin-bottom: 10px;
	background: skyblue;
	padding: 10px;
	border-radius: 10px;
}

.student-search-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	text-align: right;
	margin-bottom: 20px;
}

@media ( max-width : 768px) {
	.student-search-bar {
		flex-direction: column;
	}
}

.student-search-form {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}

.student-search-input {
	padding: 8px 14px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 15px;
	width: 250px;
}

.student-search-btn {
	background-color: #007bff;
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 6px;
	cursor: pointer;
	font-weight: bold;
	transition: background-color 0.3s ease;
}

.student-search-btn a {
	color: white;
	text-decoration: none;
}

.student-search-btn:hover {
	background-color: #0056b3;
}

.table-responsive {
	overflow-x: auto;
	background: #fdfdfd;
	padding: 15px;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.student-table {
	width: 100%;
	border-collapse: collapse;
	font-family: 'Nunito', sans-serif;
}

.student-table thead {
	background-color: #007bff;
	color: #fff;
}

.student-table th, .student-table td {
	padding: 12px 16px;
	text-align: center;
	border-bottom: 1px solid #ddd;
	font-size: 14px;
}

.student-img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.status-active {
	color: green;
	font-weight: bold;
}

.status-disabled {
	color: red;
	font-weight: bold;
}

.btn-edit, .btn-delete {
	display: inline-block;
	padding: 6px 12px;
	margin: 2px;
	font-size: 13px;
	border-radius: 5px;
	text-decoration: none;
	transition: 0.3s;
	width: 100%;
}

.btn-edit {
	background-color: #28a745;
	color: #fff;
}

.btn-edit:hover {
	background-color: #218838;
}

.btn-delete {
	background-color: #dc3545;
	color: #fff;
}

.btn-delete:hover {
	background-color: #c82333;
}

@media ( max-width : 768px) {
	.table-title {
		font-size: 24px;
	}
	.student-table th, .student-table td {
		font-size: 12px;
		padding: 10px;
	}
	.student-img {
		width: 35px;
		height: 35px;
	}
}

/* Pagination Container */
.student-pagination-controls-wrapper {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.student-pagination-controls {
	background-color: #ffffff;
	padding: 15px 30px;
	border-radius: 12px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

/* Pagination Buttons */
.student-pagination-btn {
	padding: 10px 18px;
	background-color: #e2e8f0;
	color: #1e293b;
	text-decoration: none;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
	transition: all 0.3s ease;
}

.student-pagination-btn:hover {
	background-color: #cbd5e1;
}

/* Active Page Style */
.student-pagination-active {
	background-color: #1e40af !important;
	color: white !important;
}

/* Responsive */
@media ( max-width : 768px) {
	.student-pagination-controls {
		padding: 10px 15px;
		justify-content: center;
	}
	.student-pagination-btn {
		padding: 8px 14px;
		font-size: 13px;
	}
}

/* Admin Students Manage Ends Here */

/* Admin Edit Student Starts Here */

/* Edit Student Section Styling */
#edit-student-section {
	background: linear-gradient(to right, #eef2f3, #8e9eab);
	padding: 50px 20px;
	min-height: 100vh;
}

.edit-student-container {
	background: #80ffff;
	padding: 40px;
	border-radius: 15px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
	max-width: 800px;
	margin: auto;
}

.edit-student-container h1 {
	text-align: center;
	margin-bottom: 30px;
	color: #2c3e50;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 1px;
}

/* Form Fields */
.edit-student-field {
	margin-bottom: 25px;
}

.edit-student-field label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
	color: #34495e;
}

.edit-student-field input[type="text"], .edit-student-field input[type="email"],
	.edit-student-field input[type="password"], .edit-student-field input[type="file"],
	.edit-student-field select, .edit-student-field textarea {
	width: 100%;
	padding: 12px 15px;
	border: 2px solid #dcdfe6;
	border-radius: 8px;
	font-size: 15px;
	outline: none;
	background-color: #f9f9f9;
	transition: all 0.3s ease;
}

.edit-student-field input:focus, .edit-student-field select:focus,
	.edit-student-field textarea:focus {
	border-color: #3498db;
	background-color: #fff;
	box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
}

.edit-student-field textarea {
	resize: vertical;
	min-height: 80px;
}

/* Profile Image Preview */
.edit-student-img-preview {
	margin-top: 10px;
}

.edit-student-img-preview img {
	border-radius: 10px;
	max-width: 100px;
	height: auto;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* Form Actions */
.edit-student-actions {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 30px;
}

.edit-student-submit, .edit-student-cancel {
	padding: 12px 25px;
	font-size: 16px;
	font-weight: 600;
	border: none;
	border-radius: 30px;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.3s ease, transform 0.2s;
}

.edit-student-submit {
	background-color: #27ae60;
	color: white;
}

.edit-student-submit:hover {
	background-color: #219150;
	transform: translateY(-2px);
}

.edit-student-cancel {
	background-color: #e74c3c;
	color: white;
}

.edit-student-cancel:hover {
	background-color: #c0392b;
	transform: translateY(-2px);
}

/* Responsive Design */
@media ( max-width : 768px) {
	.edit-student-container {
		padding: 25px;
	}
	.edit-student-actions {
		flex-direction: column;
		gap: 15px;
	}
	.edit-student-submit, .edit-student-cancel {
		width: 100%;
	}
}

/* Admin Edit Student Ends Here */

/* Admin Manage Event Starts Here */
/* Overall Layout */
#event-management-section {
	padding: 50px 0;
	background: linear-gradient(to right, #eef2f3, #8e9eab);
	min-height: 100vh;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Container */
.event-management-container {
	width: 95%;
	max-width: 1400px;
	margin: 0 auto;
}

/* Grid Layout */
.event-management-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
}

@media ( max-width : 992px) {
	.event-management-grid {
		grid-template-columns: 1fr;
	}
}

/* Left Side: Event Form */
.event-form-wrapper {
	background: rgba(255, 255, 255, 0.8);
	border-radius: 18px;
	padding: 40px 30px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(12px);
}

.event-form-wrapper h2 {
	font-size: 26px;
	color: #1e2a38;
	margin-bottom: 25px;
	border-bottom: 2px solid #007bff;
	display: inline-block;
	padding-bottom: 8px;
}

/* Form Group */
.event-form .form-group {
	margin-bottom: 20px;
}

.event-form .form-group label {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
	color: #333;
}

.event-form .form-group input, .event-form .form-group textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid #ccc;
	border-radius: 10px;
	font-size: 15px;
	background-color: #f9f9f9;
	transition: all 0.3s ease;
	resize: none;
}

.event-form .form-group input:focus, .event-form .form-group textarea:focus
	{
	border-color: #007bff;
	background-color: #ffffff;
	outline: none;
}

/* Submit Button */
.event-submit-btn {
	width: 100%;
	background-color: #007bff;
	color: #ffffff;
	border: none;
	padding: 14px 0;
	font-size: 16px;
	border-radius: 10px;
	margin-top: 20px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.event-submit-btn:hover {
	background-color: #0056b3;
}

/* Right Side: Event Table */
.event-list-wrapper {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 18px;
	padding: 40px 30px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10px);
}

.event-list-wrapper h2 {
	font-size: 26px;
	color: #1e2a38;
	margin-bottom: 20px;
	border-bottom: 2px solid #007bff;
	display: inline-block;
	padding-bottom: 8px;
}

/* Table Styles */
.event-list-table {
	width: 100%;
	border-collapse: collapse;
	background-color: #fff;
	border-radius: 10px;
	overflow: hidden;
}

.event-list-table th, .event-list-table td {
	padding: 14px 18px;
	text-align: left;
	border-bottom: 1px solid #e0e0e0;
}

.event-list-table th {
	background-color: #f1f5f9;
	color: #333;
	font-weight: 600;
}

.event-list-table td {
	color: #555;
}

.event-list-table tr:hover {
	background-color: #f9f9f9;
}

/* Buttons */
.event-edit-btn, .event-delete-btn {
	padding: 8px 14px;
	font-size: 14px;
	border-radius: 6px;
	text-decoration: none;
	color: #fff;
	transition: background-color 0.3s ease;
	margin: 8px;
	display: flex;
}

.event-edit-btn {
	background-color: #28a745;
}

.event-edit-btn:hover {
	background-color: #218838;
}

.event-delete-btn {
	background-color: #dc3545;
}

/* Event Pagination Styles */
.event-pagination-controls {
	text-align: center;
	margin-top: 30px;
}

.event-pagination-btn {
	margin: 0 5px;
	padding: 8px 14px;
	background-color: #dce7f9;
	color: #1e3a8a;
	text-decoration: none;
	border-radius: 6px;
	font-weight: 600;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.event-pagination-btn:hover {
	background-color: #b8d4f5;
}

.event-pagination-active {
	background-color: #1e3a8a !important;
	color: white !important;
}

.event-delete-btn:hover {
	background-color: #c82333;
}

.edit-event-section {
	padding: 50px 20px;
}

.edit-event-container {
	display: flex;
	justify-content: center;
	align-items: center;
}

.edit-event-section {
	background: linear-gradient(to right, #eef2f3, #8e9eab);
}

.edit-event-wrapper {
	width: 100%;
	max-width: 800px;
	background-color: #ffffff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
	border-radius: 12px;
	padding: 40px 30px;
}

.edit-event-formbox h2 {
	font-size: 28px;
	color: #222;
	border-bottom: 3px solid #007bff;
	margin-bottom: 30px;
	padding: 10px;
	background: #d0f3f2;
	text-align: center;
	border-radius: 8px 8px 0 0;
}

@media ( max-width : 768px) {
	.edit-event-formbox h2 {
		font-size: 20px;
	}
}

.status-toggle-group {
	display: flex;
	gap: 20px;
	margin-top: 10px;
}

/* Hide default radio buttons */
.status-toggle-group input[type="radio"] {
	display: none;
}

.status-toggle {
	padding: 10px 20px;
	border-radius: 25px;
	border: 2px solid #007bff;
	color: #007bff;
	cursor: pointer;
	font-weight: 500;
	transition: all 0.3s ease;
	user-select: none;
}

/* Active when checked */
.status-toggle-group input[type="radio"]:checked+.status-toggle {
	background-color: #007bff;
	color: white;
}

/* Different color for inactive state */
.status-toggle.inactive {
	border-color: #dc3545;
	color: #dc3545;
}

.status-toggle-group input[type="radio"]:checked+.status-toggle.inactive
	{
	background-color: #dc3545;
	color: white;
}
/* Mark Attendance Starts Here*/
.ea-attendance-btn {
	display: inline-block;
	padding: 10px 20px;
	background-color: #007bff;
	color: #fff;
	text-decoration: none;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 500;
	transition: background-color 0.3s ease;
}

.ea-attendance-btn:hover {
	background-color: #0056b3;
}

.ea-attendance-status {
	font-weight: 500;
	margin-bottom: 6px;
	color: #444;
	font-size: 14px;
}

.ea-bg {
	background-color: #f0f8ff;
	padding: 30px 0;
}

.ea-title {
	font-size: 28px;
	margin-bottom: 20px;
	color: #333;
}

.ea-table-wrapper {
	overflow-x: auto;
}

.ea-table {
	width: 100%;
	border-collapse: collapse;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	background: #fff;
}

.ea-table th, .ea-table td {
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid #ddd;
}

.ea-table th {
	background-color: #007bff;
	color: white;
}

.ea-btn {
	border: none;
	padding: 6px 12px;
	cursor: pointer;
	border-radius: 4px;
	font-size: 16px;
	margin-right: 5px;
}

.ea-present {
	background-color: #28a745;
	color: white;
}

.ea-absent {
	background-color: #dc3545;
	color: white;
}

@media ( max-width : 768px) {
	.ea-title {
		font-size: 20px;
	}
	.ea-table th, .ea-table td {
		padding: 8px 10px;
		font-size: 14px;
	}
	.ea-btn {
		font-size: 14px;
		padding: 4px 8px;
	}
}

/* Mark Attendance Ends Here*/

/* Admin Manage Event Ends Here */

/* Admin Manage Gallery Starts Here */
.gallery-section {
	background: linear-gradient(to right, #eef2f3, #8e9eab);
	min-height: 100vh;
	padding: 40px 0;
	font-family: 'Nunito', sans-serif;
}

.gallery-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Upload Form */
.upload-section {
	background-color: #ffffff;
	padding: 30px;
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	margin-bottom: 40px;
	text-align: center;
}

.upload-section form input {
	border: 1px solid blue;
	border-radius: 7px;
	padding: 10px;
	background: linear-gradient(to right, #eef2f3, #8e9eab);
}

.upload-section h2 {
	margin-bottom: 20px;
	color: #2d2d2d;
}

.upload-form .input-file::file-selector-button {
	border: none;
	background-color: grey;
	color: white;
	padding: 10px 20px;
	margin-right: 10px;
	border-radius: 7px;
	cursor: pointer;
	font-weight: 500;
	font-size: 16px;
}

.upload-form .input-file::file-selector-button:hover {
	background-color: #0056b3;
}

.upload-form button {
	margin-left: 15px;
	padding: 10px 20px;
	background-color: #007bff;
	border: none;
	border-radius: 6px;
	color: white;
	font-size: 16px;
	cursor: pointer;
}

.upload-form button:hover {
	background-color: #0056b3;
}

/* Gallery */
.gallery-view-section h2 {
	text-align: center;
	margin-bottom: 20px;
	color: #2d2d2d;
}

.gallery-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
}

.gallery-item {
	position: relative;
	width: 350px;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	background-color: #fff;
}

.gallery-item img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.delete-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	background: rgba(255, 0, 0, 0.8);
	border: none;
	color: white;
	padding: 6px 10px;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.3s ease;
}

.delete-btn:hover {
	background: rgba(200, 0, 0, 0.95);
}

@media ( max-width : 768px) {
	.gallery-item {
		width: 90%;
	}
	.upload-form input[type="file"], .upload-form button {
		width: 100%;
		margin: 10px 0;
	}
	.upload-form {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}

/* Gallery Pagination Styles */
.gallery-pagination-controls {
	margin-top: 30px;
	text-align: center;
	background-color: #fff;
	padding: 20px;
	border-radius: 12px;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}

.gallery-pagination-btn {
	margin: 0 6px;
	padding: 8px 14px;
	background-color: #e2e8f0;
	color: #1e293b;
	text-decoration: none;
	border-radius: 6px;
	font-weight: 500;
	display: inline-block;
	transition: 0.3s;
}

.gallery-pagination-btn:hover {
	background-color: #cbd5e1;
	color: #000;
}

.gallery-pagination-active {
	background-color: #2563eb !important;
	color: white !important;
}

/* Admin Manage Gallery Ends Here */

/* Admin Manage Team Starts Here */
.team-management-section {
	background: linear-gradient(to right, #eef2f3, #8e9eab);
	padding: 40px 20px;
	font-family: 'Nunito', sans-serif;
}

/* Main container holds form and list side by side */
.team-management-container {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	justify-content: space-between;
}

/* Left: Form panel */
.team-form-panel {
	flex: 1 1 48%;
	background-color: #ffffff;
	padding: 30px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.team-form-panel h2 {
	text-align: center;
	margin-bottom: 25px;
	color: #333;
}

.team-form-group {
	margin-bottom: 15px;
}

.team-form-group label {
	display: block;
	font-weight: bold;
	margin-bottom: 6px;
	color: #333;
}

.team-form-group input {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 14px;
}

.input-file::file-selector-button {
	border: none;
	background-color: #007bff;
	color: white;
	padding: 6px 20px;
	margin-right: 10px;
	border-radius: 7px;
	cursor: pointer;
	font-weight: 500;
	font-size: 14px;
}

.input-file::file-selector-button:hover {
	background-color: #0056b3;
}

.team-submit-btn {
	width: 100%;
	background-color: #28a745;
	color: white;
	padding: 12px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-weight: bold;
	font-size: 15px;
}

.team-submit-btn:hover {
	background-color: #218838;
}

/* Right: Team List */
.team-list-panel-2 {
	flex: 1 1 48%;
	background-color: #ffffff;
	padding: 30px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.team-list-panel-2 h2 {
	text-align: center;
	margin-bottom: 20px;
	color: #333;
}

.team-member-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Individual Team Card */
.team-card-2 {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 15px;
	background-color: #f0f8ff;
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
}

.team-img-2 img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 50%;
	border: 2px solid #007bff;
}

.team-details-2 {
	flex: 1;
}

.team-name-2 {
	font-size: 1.1rem;
	font-weight: 600;
	color: #333;
	margin: 0 0 6px;
}

.team-card-actions-2 {
	display: flex;
	gap: 10px;
}

.team-edit-btn-2, .team-delete-btn-2 {
	padding: 6px 12px;
	border-radius: 6px;
	text-decoration: none;
	color: white;
	font-size: 14px;
	font-weight: 500;
	transition: background-color 0.3s ease;
}

.team-edit-btn-2 {
	background-color: #ffc107;
}

.team-edit-btn-2:hover {
	background-color: #e0a800;
}

.team-delete-btn-2 {
	background-color: #dc3545;
}

.team-delete-btn-2:hover {
	background-color: #c82333;
}

/* Responsive adjustments */
@media ( max-width : 768px) {
	.team-management-container {
		flex-direction: column;
	}
	.team-form-panel, .team-list-panel-2 {
		flex: 1 1 100%;
	}
	.team-card-2 {
		flex-direction: column;
		text-align: center;
	}
	.team-card-actions-2 {
		justify-content: center;
	}
}
/* Alumni Pagination */
.alumni-pagination-controls {
	margin-top: 30px;
	text-align: center;
}

.alumni-pagination-btn {
	margin: 0 5px;
	padding: 8px 16px;
	background-color: #dee7f0;
	color: #1e293b;
	text-decoration: none;
	border-radius: 6px;
	font-weight: 500;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	display: inline-block;
}

.alumni-pagination-btn:hover {
	background-color: #c6d4e1;
}

.alumni-pagination-btn-active {
	background-color: #2563eb !important;
	color: #ffffff !important;
}

/* Admin Manage Team Ends Here */

/* Admin Manage Alumni Starts Here */
.alumni-management-section {
	background: linear-gradient(to right, #eef2f3, #8e9eab);
	padding: 40px 20px;
}

.alumni-management-container {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	justify-content: space-between;
}

.alumni-edit-formbox {
	max-width: 700px;
	width: 100%;
	margin: 10px auto;
	padding: 30px;
	background-color: #ffffff;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.alumni-edit-formbox h2 {
	text-align: center;
	margin-bottom: 25px;
	color: #333;
}

.alumni-form-panel, .alumni-list-panel {
	flex: 1 1 48%;
	background-color: #ffffff;
	padding: 30px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.alumni-form-panel h2, .alumni-list-panel h2 {
	text-align: center;
	margin-bottom: 25px;
	color: #333;
}

.alumni-form-group {
	margin-bottom: 15px;
}

.alumni-form-group label {
	display: block;
	font-weight: bold;
	margin-bottom: 5px;
}

.alumni-form-group input, .alumni-form-group textarea {
	width: 100%;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 14px;
}

.input-file::file-selector-button {
	border: none;
	background-color: #007bff;
	color: white;
	padding: 6px 14px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
}

.input-file::file-selector-button:hover {
	background-color: #0056b3;
}

.alumni-submit-btn {
	width: 100%;
	background-color: #007bff;
	color: white;
	padding: 10px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-weight: bold;
}

.alumni-submit-btn:hover {
	background-color: #0056b3;
}

.alumni-card-container {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.alumni-card {
	display: flex;
	gap: 20px;
	background-color: #f1f8ff;
	padding: 15px;
	border-radius: 10px;
	align-items: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.alumni-image img {
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: 10px;
}

.alumni-info {
	flex: 1;
}

.alumni-info h3 {
	margin: 0 0 10px 0;
	color: #2a2a2a;
}

.alumni-actions {
	display: flex;
	gap: 10px;
}

.alumni-edit-btn, .alumni-delete-btn {
	text-decoration: none;
	font-size: 14px;
	padding: 6px 12px;
	border-radius: 6px;
	color: #fff;
}

.alumni-edit-btn {
	background-color: #ffc107;
}

.alumni-edit-btn:hover {
	background-color: #e0a800;
}

.alumni-delete-btn {
	background-color: #dc3545;
	border: none;
}

.alumni-delete-btn:hover {
	background-color: #c82333;
}

@media ( max-width : 768px) {
	.alumni-management-container {
		flex-direction: column;
	}
	.alumni-form-panel, .alumni-list-panel {
		flex: 1 1 100%;
	}
	.alumni-card {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.alumni-image img {
		width: 80px;
		height: 80px;
	}
}

/* Admin Manage Alumni Ends Here */

/* Admin Manage AcademicYear Starts Here */
.academic-year-section {
	background: linear-gradient(to right, #eef2f3, #8e9eab);
	padding: 40px 20px;
}

.academic-year-container {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	justify-content: space-between;
}

.academic-year-form-panel, .academic-year-list-panel {
	flex: 1 1 48%;
	background-color: #ffffff;
	padding: 30px;
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.academic-year-form-panel h2, .academic-year-list-panel h2 {
	text-align: center;
	color: #2d2d2d;
	margin-bottom: 20px;
}

.academic-year-form-group {
	margin-bottom: 20px;
}

.academic-year-form-group label {
	display: block;
	font-weight: bold;
	margin-bottom: 6px;
}

.academic-year-form-group input[type="text"] {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 15px;
}

.radio-group {
	display: flex;
	gap: 20px;
	margin-top: 6px;
}

.radio-group label {
	font-weight: normal;
}

.academic-year-submit-btn {
	width: 100%;
	background-color: #007bff;
	color: white;
	padding: 10px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-weight: bold;
	font-size: 15px;
}

.academic-year-submit-btn:hover {
	background-color: #0056b3;
}

.academic-year-table {
	width: 100%;
	border-collapse: collapse;
}

.academic-year-table th, .academic-year-table td {
	padding: 12px 10px;
	text-align: center;
	border-bottom: 1px solid #ddd;
}

.active-label {
	color: green;
	font-weight: bold;
}

.inactive-label {
	color: red;
	font-weight: bold;
}

.status-toggle-btn {
	padding: 6px 12px;
	background-color: #17a2b8;
	color: white;
	text-decoration: none;
	border-radius: 5px;
	font-size: 14px;
}

.status-toggle-btn:hover {
	background-color: #117a8b;
}

@media ( max-width : 768px) {
	.academic-year-container {
		flex-direction: column;
	}
	.academic-year-form-panel, .academic-year-list-panel {
		flex: 1 1 100%;
	}
	.academic-year-table th, .academic-year-table td {
		font-size: 14px;
	}
}

/* Panel design like the first two */
.academic-year-update-panel {
	background-color: #ffffff;
	padding: 30px;
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	margin-top: 40px;
	width: 100%;
}

/* Heading style */
.academic-year-update-panel h2 {
	text-align: center;
	color: #2d2d2d;
	margin-bottom: 25px;
}

/* Flex layout for left-right select dropdowns */
.update-current-year-form {
	display: flex;
	gap: 20px;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

/* Form group box styling */
.update-current-year-form .form-group {
	flex: 1 1 48%;
}

/* Select dropdowns styling */
.update-current-year-form .form-group select {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 15px;
	background-color: #f9f9f9;
	color: #333;
}

/* Responsive layout */
@media ( max-width : 768px) {
	.update-current-year-form {
		flex-direction: column;
	}
	.update-current-year-form .form-group {
		flex: 1 1 100%;
	}
}

.academic-msg-center {
	width: 100%;
	display: flex;
	justify-content: center;
}

.academic-msg-center .logoutS, .academic-msg-center .invEP {
	width: auto;
}

/* Academic Year Pagination Styles */
.academic-pagination-controls {
	text-align: center;
	margin-top: 30px;
}

.academic-pagination-link {
	margin: 0 6px;
	padding: 8px 14px;
	background-color: #dce3f1;
	color: #1e293b;
	text-decoration: none;
	border-radius: 6px;
	font-weight: 500;
	border: 1px solid #c3d0e8;
}

.academic-pagination-link:hover {
	background-color: #c3d0e8;
}

.academic-pagination-link-active {
	background-color: #1d4ed8 !important;
	color: white !important;
	font-weight: bold;
}

/* Admin Manage AcademicYear Ends Here */

/* Admin Profile Starts Here */

/* Admin Profile Section */
.admin-profile-section {
	background: linear-gradient(to right, #eef2f3, #8e9eab);
	padding: 50px 20px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.admin-profile-container {
	display: flex;
	gap: 40px;
	justify-content: space-between;
	flex-wrap: wrap;
}

/* Panel Styles */
.profile-form-panel, .password-form-panel {
	flex: 1 1 48%;
	background-color: #ffffff;
	padding: 30px;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Headings */
.profile-form-panel h2, .password-form-panel h2 {
	text-align: center;
	color: #1e293b;
	margin-bottom: 25px;
	border-bottom: 2px solid #007bff;
	padding-bottom: 10px;
}

/* Form Groups */
.admin-profile-image-edit {
	text-align: center;
}

.form-group {
	margin-bottom: 20px;
}

.form-group label {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
	color: #333;
}

.form-group input[type="text"], .form-group input[type="password"],
	.form-group textarea, .form-group input[type="file"] {
	width: 100%;
	padding: 10px 14px;
	border: 1.5px solid #ccc;
	border-radius: 8px;
	font-size: 15px;
	background-color: #f9f9f9;
	transition: 0.3s;
	resize: none;
}

.form-group input:focus, .form-group textarea:focus {
	border-color: #007bff;
	background-color: #ffffff;
	outline: none;
}

/* File input */
.input-file::file-selector-button {
	background-color: #007bff;
	color: white;
	padding: 8px 16px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
}

.input-file::file-selector-button:hover {
	background-color: #0056b3;
}

/* Submit Button */
.submit-btn {
	width: 100%;
	background-color: #007bff;
	color: white;
	padding: 12px 0;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.submit-btn:hover {
	background-color: #0056b3;
}

/* Responsive */
@media ( max-width : 768px) {
	.admin-profile-container {
		flex-direction: column;
	}
	.profile-form-panel, .password-form-panel {
		flex: 1 1 100%;
	}
}

/* Admin Profile Ends Here */

/* Admin Download List Starts Here */
.download-list-section {
	padding: 40px 20px;
	background: linear-gradient(to right, #f2f2f2, #d9e2ec);
	font-family: 'Segoe UI', sans-serif;
}

.download-title {
	text-align: center;
	font-size: 28px;
	color: #2c3e50;
	margin-bottom: 30px;
}

.download-list-container {
	background-color: #fff;
	border-radius: 10px;
	padding: 30px;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.download-form {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.download-filter-row, .download-sort-row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.download-form-group {
	flex: 1 1 220px;
	display: flex;
	flex-direction: column;
}

.download-form-group label {
	font-weight: 600;
	margin-bottom: 6px;
}

.download-form-group select, .download-form-group input[type="date"] {
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 15px;
	background-color: #f9f9f9;
}

.field-selection-box h4 {
	margin-bottom: 10px;
	color: #2c3e50;
	font-size: 18px;
}

.field-checkboxes {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.field-checkboxes label {
	flex: 1 1 180px;
}

.download-submit-btns {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 20px;
}

.download-submit-btns button {
	padding: 10px 25px;
	border: none;
	border-radius: 6px;
	background-color: #007bff;
	color: #fff;
	font-size: 15px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.download-submit-btns button:hover {
	background-color: #0056b3;
}

@media ( max-width : 768px) {
	.download-filter-row, .download-sort-row {
		flex-direction: column;
	}
}

/* Admin Download List Ends Here */

/* ******************************************************************************* */
/* ******************************************************************************* */
/* **************STUDENT PART********************STUDENT PART*******************STUDENT PART*************STUDENT PART************* */


/* Admin CodingExam Section Starts Here */
.cex-heading {
	text-align: center;
	color: #0d47a1;
	margin-bottom: 30px;
	font-size: 2em;
}

.cex-form-box, .cex-table-box {
	background: #ffffff;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	margin-bottom: 30px;
}

.cex-form-group {
	margin-bottom: 15px;
}

.cex-form-group label {
	display: block;
	margin-bottom: 5px;
	font-weight: 600;
}

.cex-form-group input, .cex-form-group select {
	width: 100%;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid #ccc;
}

.cex-btn {
	background: #1976d2;
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
}

.cex-btn:hover {
	background: #1565c0;
}

.cex-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
}

.cex-table th, .cex-table td {
	border: 1px solid #ddd;
	padding: 10px;
	text-align: center;
}

.cex-table th {
	background-color: #1565c0;
	color: white;
}

.cex-table tbody tr:nth-child(odd) {
	background-color: #e3f2fd;
}

@media ( max-width : 768px) {
	.cex-table, .cex-table thead, .cex-table tbody, .cex-table th,
		.cex-table td, .cex-table tr {
		display: block;
	}
	.cex-table td {
		text-align: right;
		padding-left: 50%;
		position: relative;
	}
	.cex-table td::before {
		content: attr(data-label);
		position: absolute;
		left: 10px;
		width: 45%;
		padding-right: 10px;
		font-weight: bold;
		text-align: left;
	}
}

.exam-add-question-btn {
	background-color: #0066cc;
	color: white;
	padding: 6px 12px;
	text-decoration: none;
	border-radius: 4px;
	font-weight: bold;
	transition: background-color 0.2s ease;
}

.exam-add-question-btn:hover {
	background-color: #004d99;
}

/* In your style.css file */
.cex-action-group {
	display: flex;
	flex-wrap: wrap; /* Allows buttons to wrap on smaller screens */
	gap: 8px; /* Space between buttons */
	justify-content: flex-start;
	align-items: center;
}

.cex-action-btn {
	padding: 6px 12px;
	border: none;
	border-radius: 4px;
	color: white;
	font-size: 14px;
	text-decoration: none;
	cursor: pointer;
	text-align: center;
	transition: background-color 0.2s ease;
}

.cex-action-btn.add-q {
	background-color: #007bff; /* Blue */
}

.cex-action-btn.add-q:hover {
	background-color: #0056b3;
}

.cex-action-btn.edit {
	background-color: #ffc107; /* Yellow */
	color: #212529;
}

.cex-action-btn.edit:hover {
	background-color: #e0a800;
}

.cex-action-btn.delete {
	background-color: #dc3545; /* Red */
}

.cex-action-btn.delete:hover {
	background-color: #c82333;
}

.cex-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
}
.cex-pagination a, .cex-pagination span {
    color: #333;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
    margin: 0 4px;
    border-radius: 4px;
}
.cex-pagination a.active {
    background-color: #0575E6;
    color: white;
    border: 1px solid #0575E6;
}
.cex-pagination a:hover:not(.active) {
    background-color: #ddd;
}
.cex-pagination .disabled {
    color: #ccc;
    cursor: not-allowed;
    pointer-events: none;
}

/* =================================== */
/* == Coding Question Page Styles == */
/* =================================== */
.cq-back-link {
	display: inline-block;
	margin-bottom: 20px;
	color: #007bff;
	text-decoration: none;
	font-weight: bold;
}

.cq-back-link:hover {
	text-decoration: underline;
}

.cq-heading {
	color: #333;
	margin-bottom: 20px;
	border-bottom: 2px solid #eee;
	padding-bottom: 10px;
}

/* Form Styles */
.cq-form-container {
	background: #f9f9f9;
	padding: 25px;
	border-radius: 8px;
	margin-bottom: 40px;
	border: 1px solid #ddd;
}

.cq-form-container h3 {
	margin-top: 0;
	margin-bottom: 20px;
}

.cq-form-group {
	margin-bottom: 15px;
}

.cq-form-label {
	display: block;
	margin-bottom: 5px;
	font-weight: 600;
	color: #555;
}

.cq-form-input, .cq-form-textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 16px;
	box-sizing: border-box; /* Important */
}

.cq-grid-2-col, .cq-grid-3-col {
	display: grid;
	gap: 20px;
}

.cq-grid-2-col {
	grid-template-columns: 1fr 1fr;
}

.cq-grid-3-col {
	grid-template-columns: 1fr 1fr 1fr;
}

.cq-btn {
	background-color: #28a745;
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	display: inline-block;
}

.cq-btn:hover {
	background-color: #218838;
}

/* Question List (Card) Styles */
.cq-list-container {
	margin-top: 40px;
}

.cq-list-heading {
	border-bottom: 2px solid #eee;
	padding-bottom: 10px;
}

.cq-no-questions {
	text-align: center;
	padding: 30px;
	background: #f9f9f9;
	border-radius: 8px;
	color: #777;
}

.cq-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
}

.cq-card {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: column;
}

.cq-card-header {
	padding: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #eee;
}

.cq-card-header h4 {
	margin: 0;
	font-size: 18px;
}

.cq-card-actions {
	display: flex;
	gap: 8px;
}

.cq-action-btn {
	padding: 5px 10px;
	border-radius: 4px;
	color: white;
	text-decoration: none;
	border: none;
	font-size: 12px;
	cursor: pointer;
}

.cq-action-btn.edit {
	background-color: #ffc107;
	color: #212529;
}

.cq-action-btn.delete {
	background-color: #dc3545;
}

.cq-card-body {
	padding: 15px;
	flex-grow: 1; /* Makes the body take up available space */
}

.cq-card-body p {
	margin: 0;
	color: #666;
}

.cq-card-footer {
	padding: 15px;
	background-color: #f9f9f9;
	border-top: 1px solid #eee;
}

.cq-btn.manage-tc {
	background-color: #17a2b8;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
}

.cq-btn.manage-tc:hover {
	background-color: #138496;
}

/* Responsive adjustments */
@media ( max-width : 768px) {
	.cq-grid-2-col, .cq-grid-3-col {
		grid-template-columns: 1fr;
	}
}

/* =================================== */
/* == Starter Code Tab Styles       == */
/* =================================== */

/* Admin CodingExam Section Ends Here */

/* Student CodingExam Section Starts Here */
/* ================================================== */
/* == Final Vibrant Dark Mode Student Exam List    == */
/* ================================================== */

/* --- Page Scope, Variables, and Background --- */
.student-exam-list-page {
	--primary-color-start: #00F260; 
	--primary-color-end: #0575E6; 
	--text-primary-light: #f1f5f9; 
	--text-secondary-light: #94a3b8; 
	--bg-dark-1: #0f172a; 
	--bg-dark-2: #1e293b; 
	--border-dark: #334155;
	background-color: var(--bg-dark-1);
	background-image: radial-gradient(at top, hsla(215, 39%, 15%, 1) 0px,
		transparent 50%), radial-gradient(at bottom, hsla(215, 39%, 15%, 1)
		0px, transparent 50%);
	padding: 2rem 0;
}

/* --- Heading --- */
.student-exam-list-page .exam-list-heading {
	text-align: center;
	font-size: 2.8rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	color: var(--text-primary-light);
}

.student-exam-list-page .exam-list-subheading {
	text-align: center;
	font-size: 1.15rem;
	color: var(--text-secondary-light);
	margin-bottom: 3.5rem;
}

/* --- Card Grid --- */
.student-exam-list-page .exam-card-grid {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	margin: 0 auto;
	max-width: 800px;
}

/* --- Card Design --- */
.student-exam-list-page .exam-card {
	background-color: var(--bg-dark-2);
	box-shadow: 0 0 0 1px var(--border-dark), 0 10px 30px -5px
		rgba(0, 0, 0, 0.5);
	border-radius: 12px;
	padding: 2rem;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.student-exam-list-page .exam-card::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 12px;
	padding: 2px; 
	background: linear-gradient(120deg, var(--primary-color-start),
		var(--primary-color-end));
	-webkit-mask: linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0; 
	transition: opacity 0.4s ease;
}

.student-exam-list-page .exam-card.open-exam:hover::before {
	opacity: 1; 
}

.student-exam-list-page .exam-card-title {
	color: var(--text-primary-light);
	font-size: 1.6rem;
	font-weight: 600;
	margin: 0 0 0.75rem 0;
}

.student-exam-list-page .exam-card-description {
	color: var(--text-secondary-light);
	font-size: 1rem;
	line-height: 1.7;
	margin: 0 0 1.5rem 0;
}

.student-exam-list-page .exam-card-footer {
	padding-top: 1.5rem;
	margin-top: auto;
	border-top: 1px solid var(--border-dark);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* --- Status Text & Action Button --- */
.student-exam-list-page .exam-status-open, .student-exam-list-page .exam-status-closed
	{
	font-weight: 700;
	font-size: 0.9rem;
	padding: 0.5rem 1rem;
	border-radius: 50px;
	text-transform: uppercase;
}

.student-exam-list-page .exam-status-open {
	color: #c8ffde;
	background-color: rgba(46, 204, 113, 0.1);
}

.student-exam-list-page .exam-status-closed {
	color: var(--text-secondary-light);
	background-color: rgba(148, 163, 184, 0.1);
}

.student-exam-list-page .exam-action-btn {
	background-image: linear-gradient(to right, var(--primary-color-start),
		var(--primary-color-end));
	color: var(--bg-dark-1);
	padding: 0.8rem 2.2rem;
	border: none;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.95rem;
	display: inline-block;
	transition: all 0.3s ease;
	box-shadow: 0 0 20px rgba(5, 117, 230, 0.5);
}

.student-exam-list-page .exam-action-btn:hover {
	transform: scale(1.05) translateY(-2px);
	box-shadow: 0 0 30px rgba(0, 242, 96, 0.6);
}

.see-details-btn {
	background-color: #6c757d; 
	color: white;
	padding: 12px 25px;
	border-radius: 50px;
	text-decoration: none;
	font-weight: bold;
	display: inline-block;
	transition: background-color 0.2s ease;
}

.see-details-btn:hover {
	background-color: #5a6268;
}

/* --- Pagination --- */
.student-exam-list-page .pagination-nav {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 4rem;
}

.student-exam-list-page .pagination {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.student-exam-list-page .page-item .page-link {
	display: block;
	color: var(--text-secondary-light);
	background-color: var(--bg-dark-2);
	padding: 0.75rem 1rem;
	text-decoration: none;
	border-radius: 8px;
	transition: all 0.2s ease-in-out;
	font-weight: 600;
	min-width: 44px;
	text-align: center;
	border: 1px solid var(--border-dark);
}

.student-exam-list-page .page-item .page-link:hover {
	color: var(--text-primary-light);
	border-color: var(--primary-color-end);
}

.student-exam-list-page .page-item.active .page-link {
	background-image: linear-gradient(to right, var(--primary-color-start),
		var(--primary-color-end));
	color: #ffffff;
	border-color: transparent;
	box-shadow: 0 4px 15px rgba(5, 117, 230, 0.4);
	font-weight: 700;
}

.student-exam-list-page .page-item.disabled .page-link {
	color: #475569;
	background-color: transparent;
	border-color: transparent;
	pointer-events: none;
}

/* --- Message for No Exams --- */
.student-exam-list-page .no-exams-message {
	text-align: center;
	padding: 40px;
	background-color: var(--bg-dark-2);
	border-radius: 8px;
	color: var(--text-secondary-light);
	border: 1px dashed var(--border-dark);
	max-width: 800px;
	margin: 0 auto;
}

.student-exam-list-page .exam-card-title, .student-exam-list-page .exam-card-description,
	.student-exam-list-page .exam-card-footer {
	position: relative;
	z-index: 2;
}

.see-details-btn {
	background-color: #6c757d; 
	color: white;
	padding: 0.8rem 2.2rem;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	display: inline-block;
	transition: background-color 0.2s ease;
}

.see-details-btn:hover {
	background-color: #5a6268;
}

.see-details-btn {
	background-color: #6c757d;
	color: white;
	padding: 0.8rem 2.2rem;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	display: inline-block;
	transition: background-color 0.2s ease;
}

.see-details-btn:hover {
	background-color: #5a6268;
}

/* ************************************************** */
/* ======================================= */
/* == Exam Instructions Page Styles     == */
/* ======================================= */
.exam-instructions-page {
	
	--primary-color-start: #00F260;
	--primary-color-end: #0575E6;
	--text-primary-light: #f1f5f9;
	--text-secondary-light: #94a3b8;
	--bg-dark-1: #0f172a;
	--bg-dark-2: #1e293b;
	--border-dark: #334155;
	background-color: var(--bg-dark-1);
	padding: 3rem 0;
	min-height: 100vh; 
}

.instruction-card {
	background-color: var(--bg-dark-2);
	border: 1px solid var(--border-dark);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
	border-radius: 16px;
	max-width: 900px;
	margin: 0 auto;
	overflow: hidden;
}

.instruction-header {
	padding: 2.5rem;
	text-align: center;
	background-image: linear-gradient(120deg, var(--primary-color-start),
		var(--primary-color-end));
}

.exam-subtitle {
	margin: 0 0 0.5rem 0;
	color: rgba(255, 255, 255, 0.8);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 0.9rem;
}

.exam-title {
	margin: 0;
	color: #ffffff;
	font-size: 2.5rem;
	font-weight: 700;
}

.instruction-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
	padding: 2.5rem;
}

.section-title {
	color: var(--text-primary-light);
	font-size: 1.4rem;
	font-weight: 600;
	border-bottom: 2px solid var(--primary-color-end);
	padding-bottom: 0.5rem;
	margin-top: 0;
	margin-bottom: 1.5rem;
}

.details-list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem 0;
}

.details-list li {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 1rem;
	color: var(--text-secondary-light);
	margin-bottom: 1rem;
}

.details-list li i {
	color: var(--primary-color-end);
	font-size: 1.2rem;
	width: 20px;
	text-align: center;
}

.details-list li strong {
	color: var(--text-primary-light);
}

.rules-text {
	color: var(--text-secondary-light);
	line-height: 1.7;
}

.question-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.question-list li {
	display: flex;
	align-items: center;
	gap: 1rem;
	background-color: var(--bg-dark-1);
	padding: 1rem;
	border-radius: 8px;
	margin-bottom: 0.75rem;
	color: var(--text-primary-light);
	font-weight: 500;
}

.question-list li i {
	color: var(--primary-color-start);
}

.instruction-footer {
	background-color: var(--bg-dark-1);
	padding: 2rem;
	text-align: center;
}

.instruction-footer p {
	color: var(--text-secondary-light);
	margin: 0 0 1rem 0;
}

.start-exam-btn {
	background-image: linear-gradient(to right, #D31027, #EA384D);
	color: white;
	padding: 1rem 3rem;
	border-radius: 50px;
	text-decoration: none;
	font-weight: 700;
	font-size: 1.2rem;
	text-transform: uppercase;
	display: inline-block;
	transition: all 0.3s ease;
	box-shadow: 0 5px 20px rgba(234, 56, 77, 0.4);
}

.start-exam-btn:hover {
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 8px 25px rgba(234, 56, 77, 0.6);
}

/* Responsive adjustment */
@media ( max-width : 768px) {
	.instruction-body {
		grid-template-columns: 1fr;
	}
}

/* Add this to your main style.css file */
.language-selection-wrapper {
	margin-bottom: 1.5rem;
	text-align: center;
}

.language-selection-wrapper label {
	display: block;
	font-weight: 500;
	color: var(--text-secondary-light);
	margin-bottom: 0.75rem;
}

.language-selection-wrapper select {
	padding: 0.75rem 1.5rem;
	border-radius: 8px;
	border: 1px solid var(--border-dark);
	background-color: var(--bg-dark-1);
	color: var(--text-primary-light);
	font-size: 1.1rem;
	font-weight: 600;
}

/* Add this to your main style.css file */
.question-list .question-meta {
	display: block;
	font-size: 0.85rem;
	color: var(--text-secondary-light);
	margin-top: 4px;
}

/* Styles for the "Important Rules" section on the instructions page */
.rules-section {
	padding: 1.5rem 2.5rem;
	background-color: rgba(0, 0, 0, 0.1);
	/* A slightly darker background to stand out */
	border-top: 1px solid var(--border-dark);
	border-bottom: 1px solid var(--border-dark);
}

.rules-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.rules-list li {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	color: var(--text-secondary);
	margin-bottom: 1rem;
	line-height: 1.6;
	color: #FFFFFF;
	font-weight: 500;
}

.rules-list li i {
	margin-top: 5px;
	color: #f39c12; 
}

.final-message {
	text-align: center;
	font-weight: 600;
	color: var(--text-primary);
	margin-top: 2rem;
	margin-bottom: 0;
	color: green;
	font-weight: 800;
}

/* ********************************************************** */
.blc-coding-page-wrapper {
	--bg-dark-1: #0f172a;
	--bg-dark-2: #1e293b;
	--border-dark: #334155;
	--text-primary: #f1f5f9;
	--text-secondary: #94a3b8;
	--accent-green: #2ecc71;
	--accent-blue: #0575E6;
	--accent-red: #ff4757;
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: var(--bg-dark-1);
	color: var(--text-primary);
	overflow: hidden;
}

.blc-coding-header {
	flex-shrink: 0;
	height: 60px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 2rem;
	background-color: var(--bg-dark-2);
	border-bottom: 1px solid var(--border-dark);
}
/* Style for the new Save & Exit button */
.blc-exit-btn {
	background-color: #c0392b; /* A distinct red color */
	color: white;
}

.blc-exit-btn:hover {
	background-color: #e74c3c;
}

.blc-coding-header h2 {
	margin: 0;
	font-size: 1.4rem;
}

.blc-header-right {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.blc-question-nav {
	display: flex;
	gap: 0.5rem;
}

.blc-question-nav a {
	padding: 0.5rem 1rem;
	text-decoration: none;
	border-radius: 6px;
	font-weight: 500;
	color: var(--text-secondary);
	transition: all 0.2s ease;
}

.blc-question-nav a:hover {
	background-color: var(--border-dark);
}

.blc-question-nav a.active {
	background-image: linear-gradient(to right, var(--accent-green),
		var(--accent-blue));
	color: #fff;
}

.blc-timer {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 1.1rem;
}

.blc-panels-container {
	flex-grow: 1;
	display: flex;
	overflow: hidden;
}

.blc-panel-problem {
	flex: 0 0 45%;
	padding: 1.5rem 2rem;
	overflow-y: auto;
}

.blc-problem-title {
	font-size: 1.8rem;
	margin-top: 0;
}

.blc-panel-problem h4 {
	color: var(--accent-green);
	border-bottom: 1px solid var(--border-dark);
	padding-bottom: 0.5rem;
	margin-top: 2rem;
}

.blc-panel-problem p {
	color: var(--text-secondary);
	line-height: 1.7;
}

.blc-constraints-box, .blc-sample-box {
	background-color: var(--bg-dark-2);
	border: 1px solid var(--border-dark);
	padding: 1rem;
	border-radius: 8px;
	white-space: pre-wrap;
}

.blc-splitter {
	flex: 0 0 6px;
	background-color: var(--border-dark);
	cursor: col-resize;
}

.blc-panel-editor {
	flex: 1 1 55%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

#blc-code-form {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.blc-editor-controls {
	flex-shrink: 0;
	padding: 0.75rem 1.5rem;
	background-color: var(--bg-dark-1);
	border-bottom: 1px solid var(--border-dark);
}

.blc-editor-container {
	flex-grow: 1;
	position: relative;
}

.CodeMirror {
	position: absolute !important;
	height: 100% !important;
	width: 100% !important;
	font-size: 16px;
}

.blc-editor-footer {
	flex-shrink: 0;
	padding: 0.75rem 1.5rem;
	background-color: var(--bg-dark-1);
	border-top: 1px solid var(--border-dark);
	text-align: right;
}

.blc-action-btn {
	border: none;
	border-radius: 6px;
	padding: 0.7rem 1.5rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	color: var(--text-primary);
}

.blc-run-btn {
	background-color: #334155;
}

.blc-run-btn:hover {
	background: skyblue;
	color: black;
	transform: scale(1.05);
}
.blc-run-btn:disabled {
    cursor: not-allowed;
    opacity: 0.7; /* Optional: Makes the button look faded */
}

.blc-results-wrapper {
		flex-shrink: 0;
		padding: 0 1.5rem 1rem;
		background-color: #282a36; /* Dracula background color */
		overflow-y: auto; /* Use auto for vertical scroll only when needed */
		max-height: 280px; /* Set a max height to enable scrolling */
	}
/* Results Panel - Maintain original colors */
.blc-results-panel {
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1rem;
}

.blc-results-panel.error {
    background-color: rgba(255, 71, 87, 0.1);
    border-left: 5px solid var(--accent-red);
    color: #ff94a1;
}

.blc-results-panel.success {
    background-color: rgba(46, 204, 113, 0.1);
    border-left: 5px solid var(--accent-green);
    color: #a3e9a4;
}

.blc-results-panel h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
}

/* Test Case Results */
.test-case-result {
    margin-bottom: 1rem;
    padding: 0.5rem;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.test-case-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.test-case-status.passed {
    color: #a3e9a4;
}

.test-case-status.failed {
    color: #ff94a1;
}

.io-box {
    margin-top: 0.5rem;
}

.io-row {
    display: flex;
    margin-bottom: 0.25rem;
}

.io-label {
    min-width: 80px;
    font-weight: bold;
}

pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    flex-grow: 1;
}

.wrong-output {
    color: #ff94a1;
    font-weight: bold;
}

.error-message {
    margin-top: 0.5rem;
}

.test-summary {
    margin-bottom: 1rem;
    font-weight: bold;
}
/* Student CodingExam Section Ends Here */
 /* ======================================= */
        /* == Exam Details Page Styles          == */
        /* ======================================= */
        .exam-details-page {
            --bg-dark-1: #0f172a;
            --bg-dark-2: #1e293b;
            --border-dark: #334155;
            --text-primary: #f1f5f9;
            --text-secondary: #94a3b8;
            --accent-green: #2ecc71;
            --accent-blue: #0575E6;
        
            background-color: var(--bg-dark-1);
            color: var(--text-primary);
            padding: 2rem 0 4rem 0;
            font-family: 'Segoe UI', sans-serif;
        }
        
        .details-back-link{color:var(--accent-blue);text-decoration:none;font-weight:600;display:inline-block;margin-bottom:2rem}.details-main-title{font-size:2.8rem;margin:0 0 .5rem}.details-sub-title{font-size:1.2rem;color:var(--text-secondary);margin:0 0 2.5rem}.summary-card{background-color:var(--bg-dark-2);border-radius:12px;padding:2rem;display:flex;justify-content:space-around;text-align:center;margin-bottom:3rem;border:1px solid var(--border-dark)}.summary-label{display:block;color:var(--text-secondary);font-size:1rem;margin-bottom:.5rem}.summary-value{display:block;font-size:2rem;font-weight:700}.summary-value.score{color:var(--accent-green)}.submissions-heading{border-bottom:1px solid var(--border-dark);padding-bottom:1rem;margin-bottom:2rem}
        
        .submissions-grid{
            display: flex;
            flex-direction: column;
            gap:2rem
        }
        
        .submission-card{background-color:var(--bg-dark-2);border-radius:12px;border:1px solid var(--border-dark);overflow:hidden}.submission-card-header{padding:1.5rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-dark)}.submission-card-header h3{margin:0;font-size:1.5rem}.submission-status{background-color:var(--accent-green);color:#fff;padding:.4rem .8rem;border-radius:50px;font-weight:600;font-size:.9rem}.submission-card-stats{padding:1rem 1.5rem;display:flex;gap:2rem;background-color:var(--bg-dark-1);color:var(--text-secondary)}.submission-card-stats strong{color:var(--text-primary)}
        
        .submission-card-code {
            padding: 1.5rem;
        }

        .submission-card-code h4 {
            margin: 0 0 1rem 0;
        }

        /* --- ENHANCED STYLES for the custom code viewer --- */
        .blc-code-viewer {
            background-color: #1e1e1e;
            color: #d4d4d4;
            font-family: "Consolas", "Fira Code", monospace;
            font-size: 14px;
            line-height: 1.6;
            padding: 1rem;
            border: 1px solid #3c3c3c;
            border-radius: 8px;
            width: 100%;
            max-height: 450px; 
            resize: none;
              overflow: auto;
            white-space: pre;
            word-wrap: normal;
            box-sizing: border-box;
            transition: border-color 0.2s ease;
        }

        .blc-code-viewer:focus {
            outline: none;
            border-color: #007acc;
        }

        .blc-code-viewer::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        .blc-code-viewer::-webkit-scrollbar-track {
            background: #2a2d2e;
        }

        .blc-code-viewer::-webkit-scrollbar-thumb {
            background: #555;
            border-radius: 5px;
        }

        .blc-code-viewer::-webkit-scrollbar-thumb:hover {
            background: #777;
        }  
        .leaderboard-card {
            background-color: #1e293b; 
            border: 1px solid #334155; 
            border-radius: 12px;
            padding: 2rem;
            margin-top: 2.5rem;
        }
        .leaderboard-heading {
            font-size: 1.5rem;
            font-weight: 600;
            color: #f1f5f9; 
            margin-top: 0;
            margin-bottom: 1.5rem;
            border-bottom: 1px solid #334155; 
            padding-bottom: 1rem;
        }
        .leaderboard-table {
            width: 100%;
            border-collapse: collapse;
        }
        .leaderboard-table th, .leaderboard-table td {
            padding: 1rem;
            text-align: left;
            border-bottom: 1px solid #334155; 
        }
        .leaderboard-table th {
            color: #94a3b8; 
            font-weight: 500;
        }
        .leaderboard-table tr:last-child td {
            border-bottom: none;
        }
        .leaderboard-rank {
            font-weight: 700;
            font-size: 1.1rem;
            width: 40px;
            text-align: center;
        }
        .leaderboard-score {
            font-weight: 700;
            color: #2ecc71; 
        }
/* ======================================= */
/* == Exam Completed Page Styles        == */
/* ======================================= */
.blc-exam-completed-page {
	--bg-dark-1: #0f172a;
	--bg-dark-2: #1e293b;
	--border-dark: #334155;
	--text-primary: #f1f5f9;
	--text-secondary: #94a3b8;
	--accent-green: #2ecc71;
	background-color: var(--bg-dark-1);
	color: var(--text-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 2rem;
}

.completed-card {
	background-color: var(--bg-dark-2);
	border: 1px solid var(--border-dark);
	border-radius: 16px;
	padding: 3rem 4rem;
	max-width: 600px;
	text-align: center;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.completed-icon {
	font-size: 5rem;
	color: var(--accent-green);
	margin-bottom: 1.5rem;
}

.completed-title {
	font-size: 2.5rem;
	font-weight: 700;
	margin: 0 0 1rem 0;
}

.completed-text {
	color: var(--text-secondary);
	font-size: 1.1rem;
	line-height: 1.7;
	margin: 0 0 2.5rem 0;
}

.completed-btn {
	background-color: var(--accent-green);
	color: #fff;
	padding: 0.8rem 2.5rem;
	border-radius: 50px;
	text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
	display: inline-block;
	transition: all 0.3s ease;
	box-shadow: 0 5px 20px rgba(46, 204, 113, 0.3);
}

.completed-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 25px rgba(46, 204, 113, 0.5);
}

.submission-card-code h4 {
	margin: 0 0 1rem 0;
}

/*  Css For the Lost Page   */
/* ======================================= */
/* == "Lost in BrainLogic" Page Styles  == */
/* ======================================= */

/* --- Keyframe Animations --- */
@keyframes floatAnimation { 0%, 100% {
	transform: translateY(0);
}

50%{transform:translateY(-20px);
}
}
@keyframes fadeInUp {from { opacity:0;
	transform: translateY(30px);
}

to {
	opacity: 1;
	transform: translateY(0);
}

}
.blc-lost-page-wrapper {
	--primary-color: #4a90e2;
	--secondary-color: #50e3c2;
	--text-dark: #2c3e50;
	--text-light: #5a7184;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 90vh;
	background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
	padding: 2rem;
	font-family: 'Segoe UI', sans-serif;
	overflow: hidden;
}

.blc-lost-container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4rem;
	max-width: 1100px;
	width: 100%;
	background: rgba(255, 255, 255, 0.25);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	padding: 3rem 4rem;
	box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

.blc-lost-text-content {
	flex: 1 1 50%;
	max-width: 500px;
	animation: fadeInUp 0.8s ease-out forwards;
}

.blc-lost-title {
	font-size: 3.5rem;
	font-weight: 800;
	color: var(--text-dark);
	margin-bottom: 1.5rem;
	line-height: 1.2;
}

.blc-lost-message {
	font-size: 1.1rem;
	color: var(--text-light);
	line-height: 1.7;
	margin-bottom: 2.5rem;
}

.blc-lost-button {
	background-image: linear-gradient(to right, var(--primary-color) 0%,
		var(--secondary-color) 50%, var(--primary-color) 100%);
	background-size: 200% auto;
	color: white;
	padding: 1rem 3rem;
	border: none;
	border-radius: 50px;
	text-decoration: none;
	font-weight: 700;
	display: inline-block;
	transition: all 0.4s ease;
	box-shadow: 0 5px 20px rgba(74, 144, 226, 0.4);
}

.blc-lost-button:hover {
	background-position: right center; 
	transform: translateY(-5px) scale(1.05);
	box-shadow: 0 10px 25px rgba(80, 227, 194, 0.5);
}

.blc-lost-image-content {
	flex: 1 1 50%;
}

.blc-lost-image-content img {
	max-width: 100%;
	height: auto;
	animation: floatAnimation 6s ease-in-out infinite;
}

/* Responsive styles for smaller screens */
@media ( max-width : 768px) {
	.blc-lost-container {
		flex-direction: column-reverse; 
		text-align: center;
		padding: 2rem;
	}
	.blc-lost-title {
		font-size: 2.5rem;
	}
}


/* CSS FOR MCQ EXAM STARTS HERE */
/* CSS FOR MCQ EXAM STARTS HERE */
/* CSS FOR MCQ EXAM STARTS HERE */

/* Manage MCQ EXAM Admin Page Starts Here*/

        .mcq-admin-container {
            padding: 2rem;
            background-color: #161a25;
            color: #f0f0f0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .mcq-form-card, .mcq-list-card {
            background-color: #212534;
            border-radius: 12px;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            border: 1px solid #3a3f51;
        }
        .mcq-card-header {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            color: #ffffff;
            border-bottom: 1px solid #3a3f51;
            padding-bottom: 1rem;
        }
        .mcq-form-group {
            margin-bottom: 1.5rem;
        }
        .mcq-form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: #a0a8c4;
        }
        .mcq-form-input, .mcq-form-textarea {
            width: 100%;
            background-color: #161a25;
            border: 1px solid #3a3f51;
            border-radius: 8px;
            padding: 0.75rem 1rem;
            color: #f0f0f0;
            font-size: 1rem;
            transition: border-color 0.3s, box-shadow 0.3s;
        }
        .mcq-form-input:focus, .mcq-form-textarea:focus {
            outline: none;
            border-color: #4a69bd;
            box-shadow: 0 0 0 3px rgba(74, 105, 189, 0.3);
        }
        .mcq-submit-btn {
            background-color: #4a69bd;
            color: #ffffff;
            border: none;
            border-radius: 8px;
            padding: 0.75rem 2rem;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .mcq-submit-btn:hover {
            background-color: #5d82d1;
        }
        
        .mcq-table-wrapper {
            overflow-x: auto;
        }

        .mcq-exam-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1rem;
            min-width: 600px; /* Ensures table has a minimum width before scrolling */
        }
        .mcq-exam-table th, .mcq-exam-table td {
            padding: 1rem;
            text-align: left;
            border-bottom: 1px solid #3a3f51;
            white-space: nowrap; 
        }
        .mcq-exam-table th {
            color: #a0a8c4;
            font-weight: 600;
        }
        .mcq-action-buttons {
            display: flex;
            flex-wrap: wrap; 
            gap: 0.5rem;
        }
        .mcq-action-btn {
            padding: 0.4rem 0.8rem;
            border: none;
            border-radius: 6px;
            color: #ffffff;
            cursor: pointer;
            font-weight: 500;
            text-decoration: none;
            display: inline-block;
        }
        .mcq-btn-add { background-color: #27ae60; }
        .mcq-btn-edit { background-color: #f39c12; }
        .mcq-btn-delete { background-color: #c0392b; }
        
        .mcq-pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 2rem;
        }
        .mcq-pagination a, .mcq-pagination span {
            color: #a0a8c4;
            padding: 0.5rem 1rem;
            margin: 0 0.25rem;
            border-radius: 6px;
            text-decoration: none;
            transition: background-color 0.3s, color 0.3s;
        }
        .mcq-pagination a:hover {
            background-color: #3a3f51;
            color: #ffffff;
        }
        .mcq-pagination .active {
            background-color: #4a69bd;
            color: #ffffff;
            font-weight: 600;
        }
        .mcq-pagination .disabled {
            color: #5a6178;
            cursor: not-allowed;
        }

        
        @media (max-width: 768px) {
            .mcq-admin-container {
                padding: 1rem;
            }
            .mcq-form-card, .mcq-list-card {
                padding: 1.5rem;
            }
            .mcq-card-header {
                font-size: 1.25rem;
            }
            .mcq-pagination a, .mcq-pagination span {
                padding: 0.4rem 0.8rem;
            }
        }
/* Manage MCQ EXAM Admin Page Ends Here*/


/* ADD MCQ Questions Admin Page Starts Here*/
 .mcq-admin-container { padding: 2rem; background-color: #161a25; color: #f0f0f0; font-family: 'Segoe UI', sans-serif; }
        .mcq-form-card, .mcq-list-card { background-color: #212534; border-radius: 12px; padding: 2rem; margin-bottom: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.2); border: 1px solid #3a3f51; }
        .mcq-card-header { font-size: 1.5rem; font-weight: 600; margin-bottom: 1.5rem; color: #fff; border-bottom: 1px solid #3a3f51; padding-bottom: 1rem; }
        .mcq-card-subheader { font-size: 1.1rem; color: #a0a8c4; margin-bottom: 1.5rem; }
        .mcq-form-group { margin-bottom: 1.5rem; }
        .mcq-form-label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: #a0a8c4; }
        .mcq-form-input, .mcq-form-textarea { width: 100%; background-color: #161a25; border: 1px solid #3a3f51; border-radius: 8px; padding: 0.75rem 1rem; color: #f0f0f0; font-size: 1rem; transition: all 0.3s; }
        .mcq-form-input:focus, .mcq-form-textarea:focus { outline: none; border-color: #4a69bd; box-shadow: 0 0 0 3px rgba(74,105,189,0.3); }
        .mcq-submit-btn { background-color: #4a69bd; color: #fff; border: none; border-radius: 8px; padding: 0.75rem 2rem; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background-color 0.3s; }
        .mcq-submit-btn:hover { background-color: #5d82d1; }
        .mcq-table-wrapper { overflow-x: auto; }
        .mcq-exam-table { width: 100%; border-collapse: collapse; margin-top: 1rem; min-width: 700px; }
        .mcq-exam-table th, .mcq-exam-table td { padding: 1rem; text-align: left; border-bottom: 1px solid #3a3f51; }
        .mcq-exam-table th { color: #a0a8c4; font-weight: 600; }
        .mcq-action-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
        .mcq-action-btn { padding: 0.4rem 0.8rem; border: none; border-radius: 6px; color: #fff; cursor: pointer; font-weight: 500; text-decoration: none; display: inline-block; }
        .mcq-btn-edit { background-color: #f39c12; }
        .mcq-btn-delete { background-color: #c0392b; }
        .mcq-pagination { display: flex; justify-content: center; align-items: center; margin-top: 2rem; }
        .mcq-pagination a, .mcq-pagination span { color: #a0a8c4; padding: 0.5rem 1rem; margin: 0 0.25rem; border-radius: 6px; text-decoration: none; transition: all 0.3s; }
        .mcq-pagination a:hover { background-color: #3a3f51; color: #fff; }
        .mcq-pagination .active { background-color: #4a69bd; color: #fff; font-weight: 600; }
        .mcq-pagination .disabled { color: #5a6178; cursor: not-allowed; }
        @media (max-width: 768px) {
            .mcq-admin-container { padding: 1rem; }
            .mcq-form-card, .mcq-list-card { padding: 1.5rem; }
            .mcq-card-header { font-size: 1.25rem; }
            .mcq-pagination a, .mcq-pagination span { padding: 0.4rem 0.8rem; }
        }
/* ADD MCQ Questions Admin Page Ends Here*/

/*  MCQ Student Page Starts Here*/

/*  MCQ List Page Starts Here*/
.mcq-student-container {
            padding: 2rem;
            background-color: #161a25;
            color: #f0f0f0;
            font-family: 'Segoe UI', sans-serif;
            min-height: 100vh;
        }
        .mcq-student-header {
            text-align: center;
            margin-bottom: 2.5rem;
        }
        .mcq-student-header h1 {
            font-size: 2.5rem;
            font-weight: 700;
            color: #fff;
        }
        .mcq-student-header p {
            font-size: 1.1rem;
            color: #a0a8c4;
            max-width: 600px;
            margin: 0.5rem auto 0;
        }
        
        .mcq-exam-grid {
            display: grid;
            grid-template-columns: 1fr; 
            gap: 1.5rem;
            max-width: 800px; 
            margin: 0 auto; 
        }
        .mcq-exam-card {
            background-color: #212534;
            border-radius: 12px;
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            border: 1px solid #3a3f51;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .mcq-exam-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.3);
        }
        .mcq-card-title {
            font-size: 1.3rem;
            font-weight: 600;
            color: #fff;
            margin-bottom: 0.5rem;
        }
        .mcq-card-description {
            color: #a0a8c4;
            font-size: 0.95rem;
            line-height: 1.6;
            flex-grow: 1;
            margin-bottom: 1.5rem;
        }
        .mcq-card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .mcq-card-duration {
            font-size: 0.9rem;
            font-weight: 500;
            color: #a0a8c4;
        }
        .mcq-start-btn {
            background-color: #27ae60;
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 0.6rem 1.5rem;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            transition: background-color 0.3s;
        }
        .mcq-start-btn:hover {
            background-color: #2ecc71;
        }
        .mcq-start-btn.inactive {
            background-color: #5a6178;
            cursor: not-allowed;
        }
        .mcq-pagination { display: flex; justify-content: center; align-items: center; margin-top: 3rem; }
        .mcq-pagination a, .mcq-pagination span { color: #a0a8c4; padding: 0.5rem 1rem; margin: 0 0.25rem; border-radius: 6px; text-decoration: none; transition: all 0.3s; }
        .mcq-pagination a:hover { background-color: #3a3f51; color: #fff; }
        .mcq-pagination .active { background-color: #4a69bd; color: #fff; font-weight: 600; }
        .mcq-pagination .disabled { color: #5a6178; cursor: not-allowed; }

        @media (max-width: 768px) {
            .mcq-student-container { padding: 1rem; }
            .mcq-student-header h1 { font-size: 2rem; }
        }
/* MCQ List Page Ends Here*/



/* MCQ Instruction Page Starts Here*/
 .mcq-instructions-page {
            --mcq-primary-color-start: #4a69bd;
            --mcq-primary-color-end: #6a89cc;
            --mcq-text-primary: #f0f0f0;
            --mcq-text-secondary: #a0a8c4;
            --mcq-bg-dark-1: #161a25;
            --mcq-bg-dark-2: #212534;
            --mcq-border-dark: #3a3f51;
            --mcq-accent-orange: #f39c12;

            background-color: var(--mcq-bg-dark-1);
            color: var(--mcq-text-primary);
            font-family: 'Segoe UI', sans-serif;
            padding: 2rem 1rem;
            min-height: 100vh;
        }
        .mcq-instruction-card {
            max-width: 800px;
            margin: 0 auto;
            background-color: var(--mcq-bg-dark-2);
            border-radius: 16px;
            border: 1px solid var(--mcq-border-dark);
            box-shadow: 0 10px 40px rgba(0,0,0,0.4);
            overflow: hidden;
        }
        .mcq-instruction-header {
            padding: 2.5rem;
            text-align: center;
            background-image: linear-gradient(120deg, var(--mcq-primary-color-start), var(--mcq-primary-color-end));
        }
        .mcq-exam-subtitle {
            color: rgba(255, 255, 255, 0.8);
            font-size: 1rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .mcq-exam-title {
            color: #fff;
            font-size: 2.5rem;
            font-weight: 700;
            margin-top: 0.5rem;
        }
        .mcq-instruction-body {
            padding: 2.5rem;
        }
        .mcq-section-title {
            font-size: 1.4rem;
            font-weight: 600;
            color: var(--mcq-text-primary);
            border-bottom: 2px solid var(--mcq-primary-color-end);
            padding-bottom: 0.5rem;
            margin-top: 0;
            margin-bottom: 1.5rem;
        }
        .mcq-details-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .mcq-details-list li {
            display: flex;
            align-items: center;
            gap: 1rem;
            font-size: 1rem;
            color: var(--mcq-text-secondary);
            margin-bottom: 1rem;
        }
        .mcq-details-list li i {
            color: var(--mcq-primary-color-end);
            font-size: 1.2rem;
            width: 20px;
            text-align: center;
        }
        .mcq-details-list li strong {
            color: var(--mcq-text-primary);
        }
        .mcq-rules-section {
            margin-top: 2.5rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--mcq-border-dark);
        }
        .mcq-rules-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .mcq-rules-list li {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            color: var(--mcq-text-secondary);
            margin-bottom: 1rem;
            line-height: 1.6;
        }
        .mcq-rules-list li i {
            color: var(--mcq-accent-orange);
            margin-top: 5px;
        }
        .mcq-final-message {
            text-align: center;
            font-weight: 600;
            color: #27ae60; /* A positive green color */
            margin-top: 2rem;
            margin-bottom: 0;
        }
        .mcq-instruction-footer {
            background-color: var(--mcq-bg-dark-1);
            padding: 2rem;
            text-align: center;
        }
        .mcq-footer-text {
            color: var(--mcq-text-secondary);
            margin: 0 0 1.5rem 0;
        }
        .mcq-start-exam-btn {
            background-image: linear-gradient(to right, #D31027, #EA384D);
            color: white;
            padding: 1rem 3rem;
            border: none;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 700;
            font-size: 1.2rem;
            text-transform: uppercase;
            display: inline-block;
            transition: all 0.3s ease;
            box-shadow: 0 5px 20px rgba(234, 56, 77, 0.4);
        }
        .mcq-start-exam-btn:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 8px 25px rgba(234, 56, 77, 0.6);
        }
        .mcq-start-exam-btn i {
            margin-right: 0.75rem;
        }

        @media (max-width: 768px) {
            .mcq-instruction-card { padding: 1.5rem; }
            .mcq-instruction-body { padding: 1.5rem 0 0 0; }
            .mcq-exam-title { font-size: 1.8rem; }
        }
/* MCQ Instruction Page Ends Here*/


/* MCQ Exam Page Starts Here*/
 .mcq-exam-page {
            --mcq-bg-dark-1: #0f172a;
            --mcq-bg-dark-2: #1e293b;
            --mcq-border-dark: #334155;
            --mcq-text-primary: #f1f5f9;
            --mcq-text-secondary: #94a3b8;
            --mcq-accent-blue: #0575E6;
            --mcq-accent-green: #2ecc71;
            --mcq-accent-red: #c0392b;
            --mcq-accent-orange: #f39c12;

            background-color: var(--mcq-bg-dark-1);
            color: var(--mcq-text-primary);
            font-family: 'Segoe UI', sans-serif;
            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow: hidden;
        }
        .mcq-exam-header {
            padding: 1rem 2rem;
            background-color: var(--mcq-bg-dark-2);
            border-bottom: 1px solid var(--mcq-border-dark);
            flex-shrink: 0;
        }
        .mcq-header-top { display: flex; justify-content: space-between; align-items: center; }
        .mcq-exam-title { font-size: 1.25rem; font-weight: 600; }
        .mcq-header-info { display: flex; gap: 1.5rem; }
        .mcq-exam-timer, .mcq-exam-score { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 500; }
        .mcq-exam-timer i { color: var(--mcq-accent-orange); }
        .mcq-exam-score i { color: var(--mcq-accent-green); }

        /* --- Main Body Layout --- */
        .mcq-exam-body {
            flex-grow: 1;
            overflow: hidden; 
            display: flex;
        }
        
        /* --- Left Panel (Question/Code) --- */
        .mcq-question-panel {
            flex: 0 0 55%; 
            min-width: 0;
            border-right: 1px solid var(--mcq-border-dark);
            display: flex;
            flex-direction: column;
        }
        
        
        .mcq-editor-container {
            flex-grow: 1;
            position: relative; 
        }
        .mcq-editor-container .CodeMirror {
            position: absolute; 
            height: 100%;
            width: 100%;
            border: none;
            font-size: 1rem;
        }
        
        /* --- Right Panel (Options) --- */
        .mcq-options-panel {
            flex: 0 0 45%;
            padding: 2rem;
            overflow-y: auto; 
        }
        .mcq-options-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
        .mcq-option-label {
            display: flex;
            align-items: center;
            gap: 1rem;
            background-color: var(--mcq-bg-dark-2);
            padding: 1rem;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.2s, border-color 0.2s;
            border: 2px solid var(--mcq-border-dark);
        }
        .mcq-option-label:hover { border-color: var(--mcq-accent-blue); }
        .mcq-option-input { display: none; }
        .mcq-option-input:checked + .mcq-option-label {
            background-color: rgba(5, 117, 230, 0.15);
            border-color: var(--mcq-accent-blue);
            font-weight: 600;
        }
        .mcq-option-indicator { width: 24px; height: 24px; border: 2px solid var(--mcq-border-dark); border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; transition: all 0.2s; }
        .mcq-option-input:checked + .mcq-option-label .mcq-option-indicator { border-color: var(--mcq-accent-blue); background-color: var(--mcq-accent-blue); }
        .mcq-option-indicator::after { content: ''; width: 10px; height: 10px; background-color: white; border-radius: 50%; transform: scale(0); transition: transform 0.2s; }
        .mcq-option-input:checked + .mcq-option-label .mcq-option-indicator::after { transform: scale(1); }

        /* --- Footer --- */
        .mcq-exam-footer {
            padding: 1rem 2rem;
            background-color: var(--mcq-bg-dark-2);
            border-top: 1px solid var(--mcq-border-dark);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
        }
        .mcq-action-btn { color: #fff; border: none; border-radius: 8px; padding: 0.75rem 2rem; font-size: 1rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: all 0.3s; }
        .mcq-exit-btn { background-color: var(--mcq-accent-red); }
        .mcq-next-btn { background-color: var(--mcq-accent-green); }
        
        /* --- Responsive --- */
        @media (max-width: 900px) {
            .mcq-exam-body { flex-direction: column; overflow-y: auto; }
            .mcq-question-panel, .mcq-options-panel { width: 100%; flex-basis: auto; border: none; }
            .mcq-question-panel { height: 50vh; border-bottom: 1px solid var(--mcq-border-dark); }
        }
/* MCQ Exam Page Ends Here*/


/* MCQ Exam Completed Page Starts Here*/

 .mcq-completed-page {
            --mcq-bg-main: #161a25;
            --mcq-bg-card: #212534;
            --mcq-border-color: #3a3f51;
            --mcq-text-primary: #f0f0f0;
            --mcq-text-secondary: #a0a8c4;
            --mcq-accent-success: #34d399;

            background-color: var(--mcq-bg-main);
            color: var(--mcq-text-primary);
            font-family: 'Segoe UI', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            min-height: 80vh;
            padding: 2rem;
        }
        .mcq-completed-card {
            background-color: var(--mcq-bg-card);
            border-radius: 16px;
            padding: 3rem;
            width: 100%;
            max-width: 600px;
            border: 1px solid var(--mcq-border-color);
            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
        }
        .mcq-completed-icon {
            font-size: 4rem;
            color: var(--mcq-accent-success);
            margin-bottom: 1.5rem;
        }
        .mcq-completed-title {
            font-size: 2.2rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }
        .mcq-completed-text {
            font-size: 1.1rem;
            color: var(--mcq-text-secondary);
            margin-bottom: 2.5rem;
        }
        .mcq-return-btn {
            background-color: var(--mcq-accent-success);
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 0.8rem 2.5rem;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            transition: background-color 0.3s, transform 0.3s;
        }
        .mcq-return-btn:hover {
            background-color: #4ade80;
            transform: translateY(-3px);
        }

/* MCQ Exam Completed Page Ends Here*/


/* MCQ Exam Attended List Page Starts Here*/

 .mcq-student-container {
            padding: 2rem;
            background-color: #161a25;
            color: #f0f0f0;
            font-family: 'Segoe UI', sans-serif;
            min-height: 100vh;
        }
        .mcq-student-header {
            text-align: center;
            margin-bottom: 2.5rem;
        }
        .mcq-student-header h1 {
            font-size: 2.5rem;
            font-weight: 700;
            color: #fff;
        }
        .mcq-student-header p {
            font-size: 1.1rem;
            color: #a0a8c4;
            max-width: 600px;
            margin: 0.5rem auto 0;
        }
        .mcq-exam-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
            max-width: 800px;
            margin: 0 auto;
        }
        .mcq-exam-card {
            background-color: #212534;
            border-radius: 12px;
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            border: 1px solid #3a3f51;
        }
        .mcq-card-title {
            font-size: 1.3rem;
            font-weight: 600;
            color: #fff;
            margin-bottom: 0.5rem;
        }
        .mcq-card-score {
            color: #a0a8c4;
            font-size: 1rem;
            margin-bottom: 1.5rem;
        }
        .mcq-card-score strong {
            color: #34d399; /* Green for score */
            font-weight: 700;
        }
        .mcq-card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .mcq-card-date {
            font-size: 0.9rem;
            font-weight: 500;
            color: #a0a8c4;
        }
        .mcq-details-btn {
            background-color: #4a69bd;
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 0.6rem 1.5rem;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            transition: background-color 0.3s;
        }
        .mcq-details-btn:hover {
            background-color: #5d82d1;
        }
        .mcq-pagination { display: flex; justify-content: center; align-items: center; margin-top: 3rem; }
        .mcq-pagination a, .mcq-pagination span { color: #a0a8c4; padding: 0.5rem 1rem; margin: 0 0.25rem; border-radius: 6px; text-decoration: none; transition: all 0.3s; }
        .mcq-pagination a:hover { background-color: #3a3f51; color: #fff; }
        .mcq-pagination .active { background-color: #4a69bd; color: #fff; font-weight: 600; }
        .mcq-pagination .disabled { color: #5a6178; cursor: not-allowed; }

        @media (max-width: 768px) {
            .mcq-student-container { padding: 1rem; }
            .mcq-student-header h1 { font-size: 2rem; }
        }

/* MCQ Exam Attended List Page Ends Here*/


/* MCQ Exam Result List Page Starts Here*/
 .mcq-results-container {
            padding: 2rem;
            background-color: #161a25;
            color: #f0f0f0;
            font-family: 'Segoe UI', sans-serif;
            min-height: 100vh;
        }
        .mcq-results-header {
            text-align: center;
            margin-bottom: 2.5rem;
        }
        .mcq-results-header h1 {
            font-size: 2.5rem;
            font-weight: 700;
            color: #fff;
        }
        .mcq-results-header p {
            font-size: 1.1rem;
            color: #a0a8c4;
            max-width: 600px;
            margin: 0.5rem auto 0;
        }
        .mcq-results-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem;
            max-width: 900px;
            margin: 0 auto 2.5rem;
        }
        .mcq-score-card {
            background-color: #212534;
            border-radius: 12px;
            padding: 2rem;
            text-align: center;
            border: 1px solid #3a3f51;
        }
        .mcq-score-card-label {
            font-size: 1.1rem;
            color: #a0a8c4;
            margin-bottom: 0.5rem;
        }
        .mcq-score-card-value {
            font-size: 3rem;
            font-weight: 700;
            line-height: 1;
        }
        .mcq-your-score { color: #34d399; } 
        .mcq-top-score { color: #f39c12; } 

        .mcq-leaderboard-card {
            background-color: #212534;
            border-radius: 12px;
            padding: 2rem;
            max-width: 900px;
            margin: 0 auto;
            border: 1px solid #3a3f51;
        }
        .mcq-leaderboard-header {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            color: #ffffff;
            border-bottom: 1px solid #3a3f51;
            padding-bottom: 1rem;
        }
        .mcq-leaderboard-table {
            width: 100%;
            border-collapse: collapse;
        }
        .mcq-leaderboard-table th, .mcq-leaderboard-table td {
            padding: 1rem;
            text-align: left;
            border-bottom: 1px solid #3a3f51;
        }
        .mcq-leaderboard-table th {
            color: #a0a8c4;
            font-weight: 600;
        }
        .mcq-leaderboard-table tr:last-child td {
            border-bottom: none;
        }
        .mcq-rank-badge {
            display: inline-block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            border-radius: 50%;
            background-color: #3a3f51;
            color: #fff;
            text-align: center;
            font-weight: 600;
        }
        .mcq-rank-1 { background-color: #f1c40f; } /* Gold */
        .mcq-rank-2 { background-color: #bdc3c7; } /* Silver */
        .mcq-rank-3 { background-color: #cd7f32; } /* Bronze */

        .mcq-back-button-container {
            text-align: center;
            margin-top: 2.5rem;
        }
        .mcq-back-btn {
            background-color: #4a69bd;
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 0.8rem 2.5rem;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            transition: background-color 0.3s;
        }
        .mcq-back-btn:hover {
            background-color: #5d82d1;
        }

        @media (max-width: 768px) {
            .mcq-results-container { padding: 1rem; }
            .mcq-results-header h1 { font-size: 2rem; }
            .mcq-results-grid { grid-template-columns: 1fr; }
        }
/* MCQ Exam Result List Page Ends Here*/

/* MCQ Student Page Ends Here*/