/* Default styles for all devices */
/* Add styles here that apply to all devices regardless of screen size */

/* Styles for desktop */

@media only screen and (max-width: 2400px) {
	/*---------------HOME:Hero-Part-One------------------------------------------------*/
	/* Add styles here for desktop screens (e.g., laptops, desktop monitors) */
	body {
		background-color: black;
		padding: 20px;
		overflow-x: hidden;
	}
	::-webkit-scrollbar {
		display: none; /* Hide scrollbar for WebKit (Chrome, Safari) */
	}
	.home-container {
		height: 100vh;
		overflow-y: scroll;

		max-width: 2400px;
		min-width: 1000px;
		margin: 0 auto;
	}
	.section-container {
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		position: absolute;
		opacity: 0;
		transition: opacity 2s ease;
	}
	.section-container-1 {
		opacity: 1; /* Set opacity to 1 for the first section container */
		/* Add any additional styling specific to the first section container */
	}

	.section-container.active {
		opacity: 1;
		z-index: 2; /* Ensure the active container is on top */
	}
	.section {
		height: 100%;
	}
	section#Hero-Part-One {
		position: relative; /* Ensure positioning context */

		margin-top: 30px;
	}

	video#Story-Animation {
		display: flex;
		align-items: center;
		align-content: center;
		justify-content: center;
		position: absolute; /* Position the video absolutely */
		top: 0;
		left: 0;
		width: 105%; /* Cover the entire width of the section */
		height: 100%; /* Cover the entire height of the section */
		object-fit: cover; /* Ensure the video covers the dimensions without stretching */
	}

	#Hero-Logo {
		position: relative;
		width: 100px;
		height: 75px;
		margin-right: 40px;
		float: right;
		z-index: 4; /* Ensure the logo is above the other elements */
	}
	.popup {
		display: flex; /* Use flexbox */
		flex-direction: column; /* Stack elements vertically */
		justify-content: center; /* Center content vertically */
		align-items: center; /* Center content horizontally */
		position: absolute;
		top: 45%;
		width: 245px;
		left: 50%;
		border: 4px solid darkgray;
		border-radius: 20px;
		transform: translate(-50%, -50%);
		padding: 25px 28px;
		background-color: black;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
		z-index: 900; /* Ensure the logo is above the other elements */
	}

	.popup img {
		scale: 0.75;
		margin-top: -6px;
		margin-right: -2px;
	}

	.close {
		position: absolute;
		top: 13px;
		right: 10px;
		cursor: pointer;
		z-index: 4; /* Ensure the logo is above the other elements */
	}

	.btn {
		margin-bottom: 6px;
		height: 35px;
		color: white;
		font-weight: 400;
	}
	.btn:hover {
		color: white;
		border: 0.5px solid white;
	}

	#Pop-Up-Logo {
		margin-left: 9px;
		padding-bottom: 10px;
		padding-top: 10px;
	}
	#pricing-btn {
		border-radius: 10px;
		background: linear-gradient(180deg, #57e733 0%, #1c4811 100%);
	}

	#email-btn {
		border-radius: 10px;
		background: linear-gradient(180deg, #8dc5ee 0%, #0771c8df 100%);
	}
	#resume-btn {
		border-radius: 10px;
		background: linear-gradient(180deg, #888787 0%, #2a2a2a 90%);
	}
	#share-btn {
		border-radius: 10px;
		background: linear-gradient(180deg, #888787 0%, #2a2a2a 90%);
	}
	#pricing-popup {
		/* Common styling for popups */
		display: none;
		min-width: 700px;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: white;

		border-radius: 10;
		background-color: black;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
		border-radius: 5px;
		padding: 20px;
		justify-content: space-between;
		z-index: 8009; /* Ensure popup appears above other content */
	}
	button#price-btn.btn {
		display: flex;
		position: relative;
		border-radius: 10px;
		background: linear-gradient(180deg, #57e733 0%, #1c4811 100%);
		margin: 0 auto;

		align-items: center;
		align-content: center;
		text-align: center;
		justify-content: center;
		max-width: 400px;
		bottom: 20px;
	}

	#pricing-popup-close {
		position: absolute;
		top: 10px;
		right: 10px;
		cursor: pointer;
		scale: 0.85;
	}

	#Pricing-Layout .row {
		margin: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
		text-align: center;
	}
	.popup-content .col {
		flex: 1;
		margin: 0 10px;
		border-radius: 10px;
		border: 3px solid #fff;
		box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
		background: #373636;
		padding-top: 20px;
		padding-left: 30px;
		padding-right: 30px;
	}
	#Icon-Row img {
		display: flex;
		max-width: 108.194px;
		max-height: 104px;
		scale: 0.6;
	}

	#Title-Row {
		color: #c8c5c5;
		display: flex;
		text-align: center;
		text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
		font-family: "Poppins", sans-serif;
		font-size: 16px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;

		padding-bottom: 20px;
		margin: 0 auto;
	}
	#Price-Row {
		border-radius: 10px;
		background: var(
			--Purple-Gradient,
			linear-gradient(0deg, #f770e1 7.71%, #cc53f6 35.34%, #3e2bb3 110.58%)
		);

		display: flex;
		text-align: center;
		justify-content: center;
		position: relative;
		margin: 0 auto;
	}
	.Price-Amount {
		display: flex;
		text-align: center;
		justify-content: center;
		font-size: 45px;
		font-family: "Poppins", sans-serif;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
		padding-top: 20px;
		margin-bottom: 0;
	}
	.Price-PerHour {
		display: flex;
		text-align: center;
		justify-content: center;
		font-family: "Poppins", sans-serif;
		font-size: 14px;
		font-weight: 700;
		padding-bottom: 20px;
	}
	#Contact-Price {
		font-size: 20px;
		font-family: "Poppins", sans-serif;
		font-style: normal;
		font-weight: 700;
		padding-top: 20px;
		padding-bottom: 15px;
		line-height: 1.2;
	}
	#pricing-email-btn {
		display: flex;
		position: relative;
		text-align: center;
		align-items: center;
		align-content: center;
		justify-content: center;
		font-family: "Poppins", sans-serif;
		font-size: 14px;
		box-shadow: 0px 2.69px 2.69px 0px rgba(0, 0, 0, 0.25);
		border-radius: 5px;
		width: 130px;
		height: 25px;
		background: linear-gradient(180deg, #8dc5ee 0%, #0771c8df 100%);
		margin-top: -15px;
		margin-bottom: -15px;
		padding-right: 15px;
	}
	#Pricing-Email-Icon {
		scale: 50%;
		margin-left: -5px;
	}

	#Price-Row-2 {
		border-radius: 10px;
		background: var(
			--Purple-Gradient,
			linear-gradient(0deg, #f770e1 7.71%, #cc53f6 35.34%, #3e2bb3 110.58%)
		);
		margin-top: -20px;
		margin-bottom: 20px;
	}
	.Sub-Price-Title {
		display: flex;
		text-align: center;
		justify-content: center;
		position: relative;
		font-family: "Poppins", sans-serif;
		font-size: 10px;
		border-radius: 5px;
		background: #000;
		width: 120px;
		font-weight: 600;
		padding: 3px;
		margin-top: -5px;
	}
	.Sub-Price-Amount {
		font-size: 30px;
		font-weight: 700;
		padding-top: 15px;
		margin-bottom: 0;
	}
	.Sub-Price-PerHour {
		display: flex;
		text-align: center;
		justify-content: center;
		font-family: "Poppins", sans-serif;
		font-size: 12px;
		font-weight: 700;
	}
	#Description-Row {
		display: flex;
		text-align: center;
		align-items: center;
		align-content: center;
		justify-content: center;
		position: relative;
		color: #c8c5c5;
		font-family: "Poppins", sans-serif;
		font-size: 14px;
		padding-top: 20px;
		text-align: left;
	}
	.Header {
		display: flex;
		align-items: center;
		align-content: center;
		justify-content: center;
		margin: 0 auto;
		max-width: 700px;

		text-align: center; /* Center-align text */
		z-index: 2; /* Ensure the logo is above the other elements */
	}

	h1#Hero-Heading {
		color: #fff;
		font-family: "Orbitron", sans-serif;
		font-size: 72px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
		margin: 0; /* Remove any default margin */
		margin-top: 50px;
		margin-right: -135px;
		display: flex;
		align-items: center;
		align-content: center;
		justify-content: center;
	}
	h3#Hero-Sub-Heading {
		color: #fff;
		text-align: center; /* Center-align text */
		font-family: "Orbitron", sans-serif;
		font-size: 12px;
		font-style: normal;
		font-optical-sizing: auto;
		font-weight: 200;
		line-height: normal;

		z-index: 2; /* Ensure the logo is above the other elements */
	}

	#Sub-Heading {
		color: #dd83df;
		font-family: "Orbitron", sans-serif;
		font-size: 12px;
		font-style: normal;
		font-weight: 200;
		line-height: normal;
	}
	.Logo-Image,
	.Header,
	.Sub-Header,
	#Contact-Me-Image {
		position: relative; /* Ensure these elements are positioned relative to the hero section */
		z-index: 3; /* Ensure these elements are layered above the video */
	}

	#navbar-home {
		position: fixed;
		top: 325px; /* Adjust as needed */
		right: 50px;
		z-index: 1000; /* Ensure the navbar is above other content */
		width: 100px; /* Set width of navbar */
		height: 276px; /* Set height of navbar */
		background-image: url("/src/Images/NavBar-Home.png"); /* Add your image path */
		background-size: cover; /* Cover the entire navbar */
	}
	#navbar-projects {
		position: fixed;
		top: 325px; /* Adjust as needed */
		right: 50px;
		z-index: 1000; /* Ensure the navbar is above other content */
		width: 100px; /* Set width of navbar */
		height: 276px; /* Set height of navbar */
		background-image: url("/src/Images/NavBar-Projects.png"); /* Add your image path */
		background-size: cover; /* Cover the entire navbar */
	}
	#navbar-workhistory {
		position: fixed;
		top: 335px; /* Adjust as needed */
		right: 50px;
		z-index: 1000; /* Ensure the navbar is above other content */
		width: 100px; /* Set width of navbar */
		height: 276px; /* Set height of navbar */
		background-image: url("/src/Images/NavBar-WorkHistory.png"); /* Add your image path */
		background-size: cover; /* Cover the entire navbar */
	}
	#navbar-list {
		list-style: none;
		text-align: center;
		padding: 0;
		margin: 0;
		margin-top: 65px;
	}

	#navbar-list li {
		margin-bottom: 30px; /* Adjust spacing between list items */
		margin-left: 5px;
	}

	#navbar-list li a {
		text-decoration: none;
		padding: 0;

		font-family: "Orbitron", sans-serif;
		color: white; /* White text color */
		font-size: 8px;
		font-weight: bold; /* Adjust font weight as needed */
		white-space: nowrap; /* Prevent wrapping of text */
	}
	#navbar-list li#work-history a {
		display: block; /* Change anchor tag to block element */
		padding: 5px 0px; /* Adjust padding as needed */
		white-space: nowrap; /* Prevent wrapping */
	}

	#navbar-list li#work-history a::after {
		content: ""; /* Add empty content */
		display: block; /* Change to block element */
		height: 5px; /* Adjust height as needed */
	}
	#home {
		position: relative;
		top: -8px; /* Adjust the value as needed */
		left: -1px;
	}
	#work-history {
		position: relative;
		padding-top: 4px;
	}
	#projects {
		position: relative;
		padding-top: 2px;
	}
	#Section-Logo {
		padding-bottom: 30px;
		position: relative;
		scale: 90%;
		padding-left: 20px;
		padding-top: 20px;
		opacity: 95%;
	}
	#Contact-Me-Image-Home {
		position: fixed;
		right: -85px;
		scale: 0.25;
		margin-top: 250px;

		filter: brightness(60%);
		z-index: 9999;
	}
	#Contact-Me-Image-Projects {
		position: fixed;
		right: -85px;
		scale: 0.25;
		margin-top: 440px;

		filter: brightness(60%);
		z-index: 9999;
	}
	#Contact-Me-Image-WorkHistory {
		position: fixed;
		right: -85px;
		scale: 0.25;
		margin-top: 440px;

		filter: brightness(60%);
		z-index: 9999;
	}
	#Contact-Me-Image-Home:hover {
		filter: brightness(100%);
	}
	#Contact-Me-Image-Projects:hover {
		filter: brightness(100%);
	}
	#Contact-Me-Image-WorkHistory:hover {
		filter: brightness(100%);
	}
	@media (max-width: 768px) {
		#navbar-workhistory {
			position: fixed;
			top: -45px; /* Adjust as needed */
			right: 150px;
			text-align: center;
			align-items: center;
			z-index: 1000; /* Ensure the navbar is above other content */
			width: 100px; /* Set width of navbar */
			height: 276px; /* Set height of navbar */
			background-image: url("/src/Images/NavBar-WorkHistory.png"); /* Add your image path */
			background-size: cover; /* Cover the entire navbar */
			transform: rotate(-90deg);
		}
		#navbar-projects {
			position: fixed;
			top: -45px; /* Adjust as needed */
			right: 150px;
			text-align: center;
			align-items: center;
			z-index: 1000; /* Ensure the navbar is above other content */
			width: 100px; /* Set width of navbar */
			height: 276px; /* Set height of navbar */
			background-image: url("/src/Images/NavBar-Projects.png"); /* Add your image path */
			background-size: cover; /* Cover the entire navbar */
			transform: rotate(-90deg);
		}

		#navbar-list {
			list-style: none;
			text-align: center;
			padding: 0;
			margin: 0;
			margin-top: 65px;
		}

		#navbar-list li {
			margin-bottom: 30px; /* Adjust spacing between list items */
			margin-left: 8px;
			transform: rotate(90deg);
		}

		#navbar-list li a {
			text-decoration: none;
			padding: 0;

			font-family: "Orbitron", sans-serif;
			color: white; /* White text color */
			font-size: 8px;
			font-weight: bold; /* Adjust font weight as needed */
			white-space: nowrap; /* Prevent wrapping of text */
		}
		#navbar-list li#work-history a {
			display: block; /* Change anchor tag to block element */
			padding: 5px 0px; /* Adjust padding as needed */
			white-space: nowrap; /* Prevent wrapping */
		}

		#navbar-list li#work-history a::after {
			content: ""; /* Add empty content */
			display: block; /* Change to block element */
			height: 5px; /* Adjust height as needed */
		}
		#home {
			position: relative;
			top: -8px; /* Adjust the value as needed */
			padding-left: 3px;
		}
		#work-history {
			position: relative;
			padding-top: 10px;
			padding-right: 8px;
		}
		#projects {
			position: relative;
			padding-top: 2px;
			padding-right: 6px;
		}
	}
	/*---------------HOME:Section(Hero-Part-Two)------------------------------------------------*/
	#Hero-Part-Two {
		display: flex;
		text-align: center;
		align-items: center;
		align-content: center;
		justify-content: center;
	}
	video#TvSignal {
		position: relative; /* Position the video absolutely */
		top: 0;
		left: 0;
		width: 100%; /* Cover the entire width of the section */
		height: 100%; /* Cover the entire height of the section */
		object-fit: contain; /* Ensure the video covers the dimensions without stretching */
	}
	/*---------------HOME:Section(About Me)------------------------------------------------*/
	#AboutMe {
		display: flex;
		text-align: center;
		align-items: center;
		align-content: center;
		justify-content: center;
		flex-direction: column;

		margin-top: -50px;
		margin-left: 20px;
		margin-right: 20px;
		text-align: center; /* Center-align text */
	}
	#AboutMe-Header {
		text-align: center;
		font-family: "Orbitron", sans-serif;
		font-size: 56px;
		font-weight: 700;
		line-height: normal;
		color: #000;
		text-shadow:
			-2px -2px 0 #f01e1f,
			2px -2px 0 #f01e1f,
			-2px 2px 0 #f01e1f,
			2px 2px 0 #f01e1f;
		padding: 0;
		margin-bottom: -14px;
	}
	.Section-AboutMe-Frame {
		border: 3px solid #f01e1f;
		border-radius: 10px;
		max-width: 1100px;
		width: fit-content;

		height: auto;
		padding: 40px 40px 80px 40px;
		margin-bottom: 20px;
	}
	.Section-AboutMe-Frame p {
		color: #7f7f7f;
		line-height: 1.2;
		text-align: center;
		font-family: "Poppins", sans-serif;
		font-size: 16px;
		font-style: normal;
		font-weight: 400;

		margin-bottom: 10px;
	}
	img.Home-Logo {
		transform: translateY(-130%);
		transition: transform 3s ease-in-out;
		padding-bottom: 40px;
		scale: 90%;
		padding-left: 20px;
		padding-top: 20px;
		z-index: 1000; /* Ensure the navbar is above other content */
	}
	img.Home-Logo.active {
		transform: translateY(0%);
		padding-bottom: 30px;
		z-index: 1000; /* Ensure the navbar is above other content */
		scale: 90%;
		padding-left: 20px;
		padding-top: 20px;
		opacity: 95%;
	}
	/* Add styles for the home-logo to stay in place */

	img.About-Image {
		position: relative;
		width: 225px;
		height: 225px;
		border: 4px solid #f01e1f;
		border-radius: 50%;
		transform: translateY(140%);
		transition: transform 2s ease-in-out;
		filter: brightness(0.8);
	}
	img.About-Image.active {
		transform: translateY(25%);
		position: relative;
		width: 225px;
		height: 225px;
		border: 4px solid #f01e1f;
		border-radius: 50%;
		margin-top: -150px;
	}
	/*---------------HOME: Section ( Inspirations )------------------------------------------------*/
	#Inspirations {
		display: flex;
		flex-direction: column;
		align-items: center; /* Center-align content horizontally */
		margin-top: 30px;
		text-align: center; /* Center-align text */
	}
	#Inspirations-Header {
		text-align: center;
		font-family: "Orbitron", sans-serif;
		font-size: 56px;
		font-weight: 700;
		line-height: normal;
		color: #000;
		text-shadow:
			-2px -2px 0 #ff8d07,
			2px -2px 0 #ff8d07,
			-2px 2px 0 #ff8d07,
			2px 2px 0 #ff8d07;
		padding: 0;
		margin-bottom: -14px;
		padding-bottom: 60px;
	}
	.Inspo-Brand-Frame {
		max-width: 950px;
		max-height: 100px;

		border: 3px solid #ff8d07;
		background-color: #000;
		border-radius: 10px;
		padding: 10px 45px 10px 10px;
		margin-bottom: 50px;
		position: relative;
		z-index: 1;
	}

	p.Inspo-Brand-Description {
		display: flex;
		color: #7f7f7f;
		opacity: 0;
		font-family: "Poppins", sans-serif;
		font-size: 16px;
		transition: opacity 3s ease; /* Adjust the timing as needed */
		margin: 0 auto;
		padding-bottom: 10px;
		line-height: 1.5;
		text-align: center;
	}
	p.Inspo-Brand-Description:hover {
		color: lightgray;
		transition: color 1s ease;
	}
	.Inspo-Brand-Logo {
		background-color: #000;
		border: 4px solid #ff8d07;
		border-radius: 100%;
		width: 130px;
		height: 130px;
		margin-left: 45px;
		margin-top: -5px;
		position: relative;
	}
	#Corning-Logo {
		width: 120px;
		height: 110px;
		z-index: 3;
		right: 900px;
		font-family: "Poppins", sans-serif;
		padding-top: 25px;
		font-size: 18px;
		color: white;
		font-weight: 600;
		text-align: center;
	}

	#Inspo-Middle-Frame {
		padding: 10px 10px 10px 45px;
		margin-right: 180px;
	}
	#Apple-Logo {
		width: 115px;
		height: 105px;
		z-index: 3;
		left: 900px;
		margin-right: 45px;
		font-size: 18px;
		padding-top: 22px;
		font-family: "Poppins", sans-serif;
		padding-left: 10px;
		color: white;
		font-weight: 600;
		text-align: center;
	}
	#Groot-Logo {
		width: 120px;
		height: 110px;
		z-index: 3;
		padding-top: 18px;
		right: 900px;
		font-size: 18px;
		font-family: "Poppins", sans-serif;
		color: white;
		font-weight: 600;
		text-align: center;
	}
	a.Inspo-Brand-Link {
		text-decoration: none;
	}

	/*---------------HOME: Section ( Skills )------------------------------------------------*/
	#Skills {
		display: flex;
		flex-direction: column;
		align-items: center; /* Center-align content horizontally */
		margin-top: 30px;
		text-align: center; /* Center-align text */
	}
	#Skills-Header {
		text-align: center;
		font-family: "Orbitron", sans-serif;
		font-size: 56px;
		font-weight: 700;
		line-height: normal;
		color: #000;
		text-shadow:
			-2px -2px 0 #e1c223,
			2px -2px 0 #e1c223,
			-2px 2px 0 #e1c223,
			2px 2px 0 #e1c223;
		padding: 0;
		margin-bottom: -14px;
	}
	.Skills-Frame {
		border: 3px solid #e1c223;
		border-radius: 10px;
		max-width: 1000px;
		width: 1400px;
		height: 510px;
	}
	.Skills-Frame .row {
		margin-top: 15px;
		margin-bottom: 20px;
	}
	.Skills-SubHeader {
		margin-top: 30px;
		margin-bottom: 30px;
		color: #7f7f7f;
		font-family: "Poppins", sans-serif;
		font-size: 16px;
	}
	.Status-Bar {
		display: inline-flex;
		margin-left: 5px;
		margin-top: 10px;
	}
	.Prog-Language {
		color: #7f7f7f;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
		margin-left: 15px;
	}

	.rotate {
		animation: rotation 8s infinite linear;
	}

	@keyframes rotation {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(359deg);
		}
	}
	.progress1 {
		border: 4px solid #ac9316;
		border-radius: 20px;
		width: 225px;
		margin-top: 5px;
		background: rgba(0, 0, 0, 0.25);
	}

	.progress-bar1 {
		height: 10px;

		border-radius: 20px;
		background-image: linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0.3),
			rgba(255, 255, 255, 0.05)
		);
		transition: 0.2s linear;
		transition-property: width, background-color;
	}

	.progress-moved .progress-bar1 {
		width: 75%;
		background-color: #e1c223;
		animation: progressAnimation 3s;
	}
	.progress2 {
		border: 4px solid #ac9316;
		border-radius: 20px;
		width: 225px;
		margin-top: 5px;
		background: rgba(0, 0, 0, 0.25);
	}

	.progress-bar2 {
		height: 10px;

		border-radius: 20px;
		background-image: linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0.3),
			rgba(255, 255, 255, 0.05)
		);
		transition: 0.2s linear;
		transition-property: width, background-color;
	}

	.progress-moved .progress-bar2 {
		width: 75%;
		background-color: #e1c223;
		animation: progressAnimation 3s;
	}
	.progress3 {
		border: 4px solid #ac9316;
		border-radius: 20px;
		width: 225px;
		margin-top: 5px;
		background: rgba(0, 0, 0, 0.25);
	}

	.progress-bar3 {
		height: 10px;

		border-radius: 20px;
		background-image: linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0.3),
			rgba(255, 255, 255, 0.05)
		);
		transition: 0.2s linear;
		transition-property: width, background-color;
	}

	.progress-moved .progress-bar3 {
		width: 25%;
		background-color: #e1c223;
		animation: progressAnimation 3s;
	}

	@keyframes progressAnimation {
		0% {
			width: 5%;
			background-color: #e1c223;
		}

		100% {
			width: 50%;
			background-color: #e1c223;
		}
	}

	/*---------------HOME: Section ( Certifications )------------------------------------------------*/
	#Certifications {
		display: flex;
		flex-direction: column;
		align-items: center; /* Center-align content horizontally */
		margin-top: 30px;
		text-align: center; /* Center-align text */
	}
	#Certifications-Header {
		text-align: center;
		font-family: "Orbitron", sans-serif;
		font-size: 56px;
		font-weight: 700;
		line-height: normal;
		color: #000;
		text-shadow:
			-2px -2px 0 #57e733,
			2px -2px 0 #57e733,
			-2px 2px 0 #57e733,
			2px 2px 0 #57e733;
		padding: 0;
		margin-bottom: -14px;
	}
	.Certifications-Frame {
		max-width: 1000px;
		width: 1600px;
		height: 510px;
		margin-top: 40px;
	}
	.Certifications-Frame .row {
		margin-top: 30px;
		margin-bottom: 60px;
	}

	/* Apply the pulse animation to the border of the Certification-Link on hover */
	.col:hover .Certification-Link {
		animation: pulseBorderAnimation 1.2s ease-out infinite; /* Apply the pulse animation */
		border-radius: 50%; /* Ensure the border is circular */
	}

	/* Define the pulse animation */
	@keyframes pulseBorderAnimation {
		0% {
			box-shadow: 0 0 0 0 rgba(0, 128, 0, 1); /* Start with no shadow */
		}
		25% {
			box-shadow: 0 0 0 5px rgba(0, 128, 0, 0.8); /* Grow the shadow to 15px */
		}
		50% {
			box-shadow: 0 0 0 10px rgba(0, 128, 0, 0.4); /* Grow the shadow to 20px */
		}
		75% {
			box-shadow: 0 0 0 20px rgba(0, 128, 0, 0.2); /* Grow the shadow to 25px */
		}
		100% {
			box-shadow: 0 0 0 30px rgba(0, 128, 0, 0); /* Grow the shadow to 30px and fade out */
		}
	}

	a.Certification-Link {
		text-decoration: none;
		background-color: black;
		width: 160px; /* Adjust the size of the circle as needed */
		height: 160px; /* Adjust the size of the circle as needed */
		border-radius: 50%;
		border: 6px solid green;
		overflow: hidden;
		margin: 0 auto 20px; /* Add margin between each certification */
		display: flex;
		justify-content: center; /* Center content horizontally */
		align-items: center; /* Center content vertically */
	}

	img.Certification-Image {
		width: 145%;
		display: block;
		opacity: 0.7;
		object-fit: cover; /* Ensure the image fills the entire container */
	}
	.col:hover .Certification-Image {
		opacity: 1; /* Brighten the image on hover */
	}

	.col a.Certifications-SubHeader-Link {
		color: #7f7f7f;
		text-align: center;
		text-decoration: none;
		font-family: "Poppins", sans-serif;
		font-size: 14px;
		max-width: 200px;
		padding-top: 10px;
	}
	#Certifications .col:hover .Certifications-SubHeader-Link {
		color: white; /* Change the color of the text on hover */
	}

	#Certification-Carousel-Indicators {
		position: absolute;
		margin-bottom: -20px;
	}
	#Certfications-Previous-Button {
		position: absolute;
		margin-left: -80px;
	}
	#Certfications-Next-Button {
		position: absolute;
		margin-right: -80px;
	}
}
/* ----------------------------------------------------------------------------------PROJECTS PAGE------------------------------------------------------------------------- */

#Project-Header {
	text-align: left;
	font-family: "Orbitron", sans-serif;
	color: #fff;
	font-size: 48px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin-left: 50px;
	padding-top: 85px;
}
#Projects-Logo {
	display: block;
	position: relative;
	width: 100px;
	height: 75px;
	margin-right: 20px;
	margin-top: 10px;
	float: right;
	z-index: 4; /* Ensure the logo is above the other elements */
}
#Project-SubHeader {
	text-align: center;
	font-family: "Poppins", sans-serif;
	color: #fff;
	font-size: 32px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin: 0 auto;
	margin-top: 135px;
	margin-bottom: 50px;
	filter: brightness(90%);
	letter-spacing: 4px;
}
.row {
	display: flex;
	flex-direction: row;
	column-gap: 10px;
	row-gap: 0px;
	margin: 0 auto;
	align-items: center;
	align-content: center;
	justify-content: center;
}
#Section-Project-Frame {
	display: inline-flexbox;
	flex-direction: row;
	text-align: center;
	align-items: center;
	align-content: center;
	justify-content: center;
	margin: 0 auto;
	column-gap: 10px;
	padding-bottom: 20px;
}

#Project-Row.row {
	display: flex;
	flex-wrap: wrap;
	row-gap: 20px;
	padding-bottom: 30px;
}
#Project-Col.col {
	flex: 1;
	max-width: fit-content;
}
.Card-Border {
	border-radius: 10px;
	background: rgba(20, 20, 21, 0.628);
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.5);
	width: 371px;
	height: 716px;
	flex-shrink: 0;
	z-index: 1;
	padding: 20px;
	opacity: 0.75;
}
.Project-Card {
	border-radius: 10px;
	position: relative;
	margin: 0 auto;
	width: 337px;
	height: 682px;
	flex-shrink: 0;
	background: #1e1f208a;
	filter: drop-shadow(0px 2.481px 2.481px rgba(0, 0, 0, 0.5));
	z-index: 6;
}
.Project-Link {
	text-decoration: none;
}
.Card-Border:hover {
	opacity: 1;
}
.Card-Image {
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	width: 337px;
	height: 279px;
	flex-shrink: 0;
	border-radius: 5px;
	background: var(
		--Purple-Gradient,
		linear-gradient(0deg, #f770e1 7.71%, #cc53f6 35.34%, #3e2bb3 110.58%)
	);
	box-shadow: 0px 3.356px 3.356px 0px rgba(0, 0, 0, 0.25);
}
.Card-Title {
	margin: 0 auto;
	align-content: center;
	color: #fff;
	filter: brightness(85%);
	text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	border-radius: 5px;
	background: #000;
	box-shadow: 0px 2.316px 2.316px 0px rgba(0, 0, 0, 0.25);
	width: 271px;
	height: 35px;
	flex-shrink: 0;
	z-index: 5;
	margin-top: -15px;
	margin-bottom: 30px;
}
.Card-Description {
	color: #c8c5c5;
	font-family: "Poppins", sans-serif;
	margin-bottom: 20px;
	margin-left: 20px;
	margin-right: 20px;
	filter: brightness(50%);
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 1.5;
	height: 220px;
}
#Tool-Section {
	position: absolute; /* Position the tool row */
	bottom: 0; /* Align the tool row to the bottom */
	left: 0; /* Adjust the left position if needed */
	right: 0; /* Adjust the right position if needed */
	margin: auto; /* Center the tool row horizontally */
}
#Tool-Row.row {
	position: relative;
	column-gap: 10px;
	margin: auto;
	max-width: 300px;

	align-content: center;
	justify-content: center;
}
#Tool-Row-Hidden {
	position: relative;
	column-gap: 10px;
	margin: auto;
	max-width: 300px;
	opacity: 0;
	padding-top: 30px;
	align-content: center;
	justify-content: center;
}
#Tool-Button-React {
	flex-shrink: 0;
	color: white;
	filter: brightness(90%);
	font-weight: 600;
	text-align: center;
	align-content: center;
	border-radius: 5px;
	background: linear-gradient(180deg, #5037ec 0%, #2e1f86 100%);
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	padding: 10px;
	margin-bottom: 10px;
}
#Tool-Button-Blender {
	flex-shrink: 0;
	color: white;
	filter: brightness(90%);
	font-weight: 600;
	text-align: center;
	align-content: center;
	border-radius: 5px;
	background: linear-gradient(180deg, #fb9700 0%, #955a00 100%);
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	padding: 10px;
	margin-bottom: 10px;
}
#Tool-Button-Figma {
	flex-shrink: 0;
	color: white;
	filter: brightness(90%);
	font-weight: 600;
	text-align: center;
	align-content: center;
	border-radius: 5px;
	background: linear-gradient(180deg, #dd7dff 0%, #854b99 100%);
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	padding: 10px;
	margin-bottom: 10px;
}
#Tool-Button-HTML {
	flex-shrink: 0;
	color: white;
	filter: brightness(90%);
	font-weight: 600;
	text-align: center;
	align-content: center;
	border-radius: 5px;
	background: linear-gradient(180deg, #e0e0e0 0%, #a0a0a0 100%);
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	padding: 10px;
	margin-bottom: 10px;
}
#Tool-Button-CSS {
	flex-shrink: 0;
	color: white;
	filter: brightness(90%);
	font-weight: 600;
	text-align: center;
	align-content: center;
	border-radius: 5px;
	background: linear-gradient(180deg, #46bce1 0%, #26667b 100%);
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	padding: 10px;
	margin-bottom: 10px;
}
#Tool-Button-JavaScript {
	flex-shrink: 0;
	color: white;
	filter: brightness(90%);
	font-weight: 600;
	text-align: center;
	align-content: center;
	border-radius: 5px;
	background: linear-gradient(180deg, #ffe066 0%, #ffc430 100%);
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	padding: 10px;
	margin-bottom: 10px;
}
#Tool-Button-Animaker {
	flex-shrink: 0;
	color: white;
	filter: brightness(90%);
	font-weight: 600;
	text-align: center;
	align-content: center;
	border-radius: 5px;
	background: linear-gradient(180deg, #8052cb 0%, #310c6e 100%);
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	padding: 10px;
	margin-bottom: 10px;
}
#Tool-Button-AI {
	flex-shrink: 0;
	color: white;
	filter: brightness(90%);
	font-weight: 600;
	text-align: center;
	align-content: center;
	border-radius: 5px;
	background: linear-gradient(180deg, #f379d0 0%, #ce23a3 100%);
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	padding: 10px;
	margin-bottom: 10px;
}
#Tool-Button-Shopify {
	flex-shrink: 0;
	color: white;
	filter: brightness(90%);
	font-weight: 600;
	text-align: center;
	align-content: center;
	border-radius: 5px;
	background: linear-gradient(180deg, #96bf48 0%, #4d7c21 100%);
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	padding: 10px;
	margin-bottom: 10px;
}
#Tool-Button-Wix {
	flex-shrink: 0;
	color: white;
	filter: brightness(90%);
	font-weight: 600;
	text-align: center;
	align-content: center;
	border-radius: 5px;
	background: linear-gradient(180deg, #8052cb 0%, #310c6e 100%);
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	padding: 10px;
	margin-bottom: 10px;
}
#Tool-Button-VSCode {
	flex-shrink: 0;
	color: white;
	filter: brightness(90%);
	font-weight: 600;
	text-align: center;
	align-content: center;
	border-radius: 5px;
	background: linear-gradient(180deg, #6ec1e4 0%, #2196f3 100%);
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	padding: 10px;
	margin-bottom: 10px;
}
#Tool-Button-Netlify {
	flex-shrink: 0;
	color: white;
	filter: brightness(90%);
	font-weight: 600;
	text-align: center;
	align-content: center;
	border-radius: 5px;
	background: linear-gradient(180deg, #2ac7c2 0%, #0b5d5b 100%);
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	padding: 10px;
	margin-bottom: 10px;
}
#Tool-Button-Canva {
	flex-shrink: 0;
	color: white;
	filter: brightness(90%);
	font-weight: 600;
	text-align: center;
	align-content: center;
	border-radius: 5px;
	background: linear-gradient(180deg, #ff9ce0 0%, #ff69c1 100%);
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	padding: 10px;
	margin-bottom: 10px;
}
#Tool-Button-ClickUp {
	flex-shrink: 0;
	color: white;
	filter: brightness(90%);
	font-weight: 600;
	text-align: center;
	align-content: center;
	border-radius: 5px;
	background: linear-gradient(180deg, #d3c4ff 0%, #a288ff 100%);
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	padding: 10px;
	margin-bottom: 10px;
}
@media (max-width: 768px) {
	.projects-container {
		margin: 0 auto;
		display: inline-block;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	#Section-Project-Frame {
		display: inline-flexbox;
		flex-direction: row;
		text-align: center;
		align-items: center;
		align-content: center;
		justify-content: center;
		margin: 0 auto;
		margin-left: -20px;
		max-width: fit-content;
		column-gap: 00px;
		padding-bottom: 20px;
	}
	#Project-Header {
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-family: "Orbitron", sans-serif;
		color: #fff;
		font-size: 38px;
		font-style: normal;
		font-weight: 700;
		line-height: 1.5;
		margin: 0px auto;
		padding-top: 45px;
	}
	#Projects-Logo {
		width: 100px;
		float: none;
		height: 75px;
		display: block;
		margin: 20px auto;
		left: 10px;
		align-items: center;
		justify-content: center;
		z-index: 4; /* Ensure the logo is above the other elements */
	}
	#Project-SubHeader {
		text-align: center;
		font-family: "Poppins", sans-serif;
		color: #fff;
		font-size: 24px;

		font-style: normal;
		font-weight: 700;
		line-height: normal;
		margin: 0 auto;
		margin-top: 80px;
		margin-bottom: 50px;
		filter: brightness(90%);
		letter-spacing: 4px;
	}
	.Card-Border {
		border-radius: 10px;
		background: rgba(20, 20, 21, 0.628);
		box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.5);
		width: 371px;
		height: 716px;
		flex-shrink: 0;
		z-index: 1;
		padding: 20px;
		opacity: 1;
	}
}
/* ----------------------------------------------------------------------------------WORK HISTORY PAGE------------------------------------------------------------------------- */

#WorkHistory-Logo {
	display: flex;
	margin: 0 auto;
	padding-left: 30px;
	scale: 95%;
}
.WorkHistory-Container {
	display: flex;
	margin: 0 auto;
	align-items: center;
	align-content: center;
	justify-content: center;
	text-align: center;
	margin-top: 50px;
	filter: brightness(80%);
	flex-direction: column;
}
#Event-Row {
	max-width: 1800px;
}
#Event-Row .col {
	width: 150px;
	height: 80px;
}
#Hidden-Col {
	opacity: 0;
	width: 170px;
}
.EventBox {
	border-radius: 4.151px;
	border: 3.321px solid #fff;
	z-index: 3;
	background: #000;
}
#EmptyBox {
	border-radius: 4.151px;
	border: 3px solid #464646;
	background: #464646;
}
#BannerLine {
	background-image: url("/src/Images/WorkHistory/Start-Background.png");
	margin-top: -10px;
}
#Banner-Text {
	border-radius: 4.151px;
	border: 3.321px solid #fff;
	width: 120.377px;
	height: 48.151px;
	background: #000;
	color: #fff;
	text-align: center;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin: 0 auto;
	text-align: center;
	align-items: center;
	align-content: center;
	justify-content: center;
	margin-top: 25px;
}
#Green-ColorBox {
	border-radius: 4.151px;
	border: 3.321px solid #32c945;
	background: linear-gradient(
		180deg,
		#5cfd70 -102.25%,
		#3ee853 -58.84%,
		#1bcf32 -7.36%,
		#139223 46.15%,
		#0b4a13 99.65%
	);
}
#Blue-ColorBox {
	border-radius: 4.151px;
	border: 3.321px solid #0d7fd1;
	background: linear-gradient(
		180deg,
		#93ccf5 -43.99%,
		#93ccf5 -21.18%,
		#6daedc 18.73%,
		#3783bb 74.12%,
		#0a5185 116.47%
	);
}
#Orange-ColorBox {
	border-radius: 4.151px;
	border: 1px solid #ff8d07;
	background: linear-gradient(
		180deg,
		#ff8d07 0%,
		#eb8206 19.5%,
		#d57605 41%,
		#b86605 69.5%,
		#995404 100%
	);
}
#Purple-ColorBox {
	border-radius: 4.151px;
	border: 3.321px solid #cc53f6;
	background: linear-gradient(
		180deg,
		#cc53f6 23%,
		#ab46cf 56.5%,
		#8938a5 79.5%,
		#773190 100%
	);
}
#Yellow-ColorBox {
	border-radius: 4.151px;
	border: 3.321px solid #c4bc06;
	background: linear-gradient(
		180deg,
		#faef00 0%,
		#d1cb03 31.5%,
		#a7a506 64%,
		#787b09 100%
	);
}
#Pink-ColorBox {
	border-radius: 4.151px;
	border: 1px solid #ef62c7;
	background: linear-gradient(
		180deg,
		#ef62c7 12.5%,
		#ca53a9 49%,
		#a8458c 74.5%,
		#893872 100%
	);
}
.Event-Text {
	color: #fff;
	text-align: center;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin: 0 auto;
	padding-top: 8px;
	padding-bottom: 8px;
}
.Event-Icon {
	margin: 0 auto;
	padding-top: 13px;
}
#eventModal {
	flex-direction: column;
	position: absolute;
	align-items: center;
	align-content: center;
	text-align: center;
	justify-content: center;
}
.modal-content {
	border-radius: 10px;
	border: 3px solid #fff;
	margin: 0 auto;
	width: 350px;
	align-items: center;
	align-content: center;
	text-align: center;
	justify-content: center;
	background-color: #464646;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* Adjust the values as needed */
}
#Event-Image {
	margin: 0 auto;
	align-items: center;
	align-content: center;
	justify-content: center;
	max-width: 250px;
	max-height: 170px;
	margin-top: 30px;
	flex-shrink: 0;
	border-radius: 5px;
	background-color: black;
	overflow: hidden;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
	z-index: 25;
	opacity:;
}
.carousel-control-prev-icon {
	margin-left: -80px;
}
.carousel-control-next-icon {
	margin-right: -80px;
}

.Event-Title {
	color: #fff;
	width: 200px;
	display: flex;
	position: relative;
	z-index: 15;
	padding: 5px;
	margin: 0 auto;
	flex-shrink: 0;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	border-radius: 5px;
	background: #000;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	align-items: center;
	align-content: center;
	text-align: center;
	justify-content: center;
	margin-top: -15px;
	margin-bottom: 10px;
}

.Event-Description {
	width: 250px;
	height: 200px;
	flex-shrink: 0;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-style: normal;
	padding: 10px;
	line-height: normal;
	border-radius: 5px;
	background-color: white;
	align-items: center;
	align-content: center;
	text-align: center;
	justify-content: center;
}
.Event-Year {
	color: #fff;
	position: relative;
	font-family: "Poppins", sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	margin-top: 15px;
	padding: 0;
}
@media (max-width: 768px) {
	#WorkHistory-Logo {
		display: flex;
		margin: 0 auto;
		padding-left: 30px;
		scale: 95%;
		margin-top: 20px;
	}
	.WorkHistory-Container {
		display: flex;
		margin: 0 auto;
		align-items: center;
		align-content: center;
		justify-content: center;
		text-align: center;
		margin-top: 50px;
		filter: brightness(80%);
		flex-direction: column;
	}
	#Event-Row {
		max-width: 1800px;
		max-height: 100px;
	}
	#Event-Row .col {
		width: 150px;
		height: 80px;
	}
	#Hidden-Col {
		opacity: 0;
		width: 170px;
		max-height: 5px;
	}
	.EventBox {
		border-radius: 4.151px;
		border: 3.321px solid #fff;
		z-index: 3;
		background: #000;
		max-width: 80px;
	}
	#EmptyBox {
		border-radius: 4.151px;
		border: 3px solid #464646;
		background: #464646;
		max-width: 20px;
	}
	#BannerLine {
		background-image: url("/src/Images/WorkHistory/Start-Background.png");
		margin-top: -10px;
	}
	#Banner-Text {
		border-radius: 4.151px;
		border: 3.321px solid #fff;
		width: 120.377px;
		height: 48.151px;
		background: #000;
		color: #fff;
		text-align: center;
		font-family: "Poppins", sans-serif;
		font-size: 16px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
		margin: 0 auto;
		text-align: center;
		align-items: center;
		align-content: center;
		justify-content: center;
		margin-top: 25px;
	}
	#EventBox-2 {
		opacity: 0;
	}
	#EventBox-3 {
		margin-top: -40px;
		margin-bottom: 5px;
	}
	#EventBox-10 {
		margin-bottom: 5px;
	}
	#Green-ColorBox {
		border-radius: 4.151px;
		border: 3.321px solid #32c945;
		background: linear-gradient(
			180deg,
			#5cfd70 -102.25%,
			#3ee853 -58.84%,
			#1bcf32 -7.36%,
			#139223 46.15%,
			#0b4a13 99.65%
		);
		max-width: 40px;
		opacity: 0;
	}
	#Blue-ColorBox {
		border-radius: 4.151px;
		border: 3.321px solid #0d7fd1;
		background: linear-gradient(
			180deg,
			#93ccf5 -43.99%,
			#93ccf5 -21.18%,
			#6daedc 18.73%,
			#3783bb 74.12%,
			#0a5185 116.47%
		);
	}
	#Orange-ColorBox {
		border-radius: 4.151px;
		border: 1px solid #ff8d07;
		background: linear-gradient(
			180deg,
			#ff8d07 0%,
			#eb8206 19.5%,
			#d57605 41%,
			#b86605 69.5%,
			#995404 100%
		);
		max-width: 40px;
	}
	#Purple-ColorBox {
		border-radius: 4.151px;
		border: 3.321px solid #cc53f6;
		background: linear-gradient(
			180deg,
			#cc53f6 23%,
			#ab46cf 56.5%,
			#8938a5 79.5%,
			#773190 100%
		);
	}
	#Yellow-ColorBox {
		border-radius: 4.151px;
		border: 3.321px solid #c4bc06;
		background: linear-gradient(
			180deg,
			#faef00 0%,
			#d1cb03 31.5%,
			#a7a506 64%,
			#787b09 100%
		);
	}
	#Pink-ColorBox {
		border-radius: 4.151px;
		border: 1px solid #ef62c7;
		background: linear-gradient(
			180deg,
			#ef62c7 12.5%,
			#ca53a9 49%,
			#a8458c 74.5%,
			#893872 100%
		);
		margin-top: 10px;
		margin-bottom: 30px;
		max-width: 40px;
	}
	.Event-Text {
		color: #fff;
		text-align: center;
		font-family: "Poppins", sans-serif;
		font-size: 14px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
		margin: 0 auto;
		padding-top: 8px;
		padding-bottom: 8px;
	}
	.Event-Icon {
		margin: 0 auto;
		padding-top: 13px;
	}
	#eventModal {
		flex-direction: column;
		position: absolute;
		align-items: center;
		align-content: center;
		text-align: center;
		justify-content: center;
	}
	.modal-content {
		border-radius: 10px;
		border: 3px solid #fff;
		margin: 0 auto;
		width: 350px;
		align-items: center;
		align-content: center;
		text-align: center;
		justify-content: center;
		background-color: #464646;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* Adjust the values as needed */
	}
	#Event-Image {
		margin: 0 auto;
		align-items: center;
		align-content: center;
		justify-content: center;
		max-width: 250px;
		max-height: 170px;
		margin-top: 30px;
		flex-shrink: 0;
		border-radius: 5px;
		background-color: black;
		overflow: hidden;
	}
	.carousel-control-prev-icon,
	.carousel-control-next-icon {
		z-index: 25;
		opacity:;
	}
	.carousel-control-prev-icon {
		margin-left: -80px;
	}
	.carousel-control-next-icon {
		margin-right: -80px;
	}

	.Event-Title {
		color: #fff;
		width: 200px;
		display: flex;
		position: relative;
		z-index: 15;
		padding: 5px;
		margin: 0 auto;
		flex-shrink: 0;
		font-family: "Poppins", sans-serif;
		font-size: 14px;
		font-style: normal;
		font-weight: 600;
		line-height: normal;
		border-radius: 5px;
		background: #000;
		box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
		align-items: center;
		align-content: center;
		text-align: center;
		justify-content: center;
		margin-top: -15px;
		margin-bottom: 10px;
	}

	.Event-Description {
		width: 250px;
		height: 200px;
		flex-shrink: 0;
		font-family: "Poppins", sans-serif;
		font-size: 14px;
		font-style: normal;
		padding: 10px;
		line-height: normal;
		border-radius: 5px;
		background-color: white;
		align-items: center;
		align-content: center;
		text-align: center;
		justify-content: center;
	}
	.Event-Year {
		color: #fff;
		position: relative;
		font-family: "Poppins", sans-serif;
		font-size: 20px;
		font-style: normal;
		font-weight: 600;
		line-height: normal;
		margin-top: 15px;
		padding: 0;
	}
}