@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lexend:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Shadows+Into+Light&family=Syne:wght@400..800&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	user-select: none;
	overflow-wrap: break-word;
}

body {
	font-family: font3;
	font-optical-sizing: auto;
	overflow-x: hidden;
	background-color: #010101;
}

.loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #030140;
	z-index: 5;
	transform-origin: bottom;
	transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition-delay: 0.5s;
}

.loading.loaded {
	transform: scaleY(0);
	pointer-events: none;
}

.loading > * {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: var(--transition-2);
}

.loading.loaded > * {
	opacity: 0;
}

.loading .circle {
	animation: rotate360 1.5s linear infinite;
}

@keyframes rotate360 {
	0% {
		transform: translate(-50%, -50%) rotate(0);
	}

	100% {
		transform: translate(-50%, -50%) rotate(1turn);
	}
}

.backvid {
	/* rotate: 180deg; */
	height: 100vh;
	overflow: hidden;
	position: relative;
}

.backvid::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.291) 60%, rgba(0, 0, 0, 0.6) 50%, rgb(0, 0, 0) 100%);
	z-index: 1;
}

.backvid video {
	width: 100%;
	object-fit: cover;
	height: 100vh;
}

.mesdomain {
	color: #b3bde1;
	position: absolute;
	bottom: 40%;
	left: 0;
	width: 100%;
	z-index: 10000;
	padding: 1rem;
}

.domain {
	text-transform: uppercase;
	font-family: 'Lato', sans-serif;

	display: flex;
	justify-content: space-between;
	width: 100%;
	gap: 2rem;
}

.left-domain,
.right-domain {
	display: flex;
	flex-direction: column;
	gap: 5rem;
	width: 45%;
}

.left-domain {
	align-items: flex-start;
}

.right-domain {
	align-items: flex-end;
}

.title {
	font-family: font3;
	letter-spacing: 0.2rem;
	color: #b6b4f1;
	font-size: 1rem;
	font-weight: 600;
}

.domain2 {
	display: flex;
	border-radius: 0.3rem;
	gap: 1rem;
	padding: 0.5rem;
	background: linear-gradient(transparent, #eeeeee1a);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	border: 1px solid #eeeeee62;
	transition: transform 0.3s ease, box-shadow 0.3s ease;

	backdrop-filter: blur(2na0px);
	transition: 1s all;
	aspect-ratio: 4;
	overflow: hidden;
	max-width: 400px;
}

.domain2 > div:first-child {
	display: flex;
	justify-content: center;
	align-items: center;
}

.domain2 > div:last-child {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.domain img {
	padding: 0.5rem;
	width: 3rem;
	height: 3rem;
	object-fit: cover;
	border-radius: 50%;
}
.filter {
	filter: invert(1);
}
.para {
	padding-top: 0.3rem;
	font-size: 0.7rem;
	font-family: 'Lato', sans-serif;
	text-transform: uppercase;
	line-height: 1.4;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	color: rgba(255, 255, 255, 0.854);
}

.backvid2 {
	/* height: 100vh; */
	overflow: hidden;
	position: absolute;
	top: -50%;
	z-index: 10;
	/* background-color: rebeccapurple; */
	mix-blend-mode: screen;
}

& video {
	overflow-x: hidden;
	width: 100vw;
	/* object-fit: cover; */
	/* height: 100vh; */
}

.content {
	padding: 100px 20px;
	/* Add padding to avoid content being hidden behind the navbar */
}

.headwelcome {
	display: inline-block;
	font-size: 1.4rem;
	font-family: font3;
}

.headtop {
	border: 1px solid #b3bde1;
	display: inline-block;
	font-size: 0.7rem;
	font-family: font3;
	padding: 0.2rem 1rem;
	border-radius: 1rem;
	letter-spacing: 0.4rem;
}

.vid1 {
	rotate: 180deg;
}

.heading {
	/* position: relative; */
	/* border: 2px solid #19C3DF; */

	z-index: 100;
	top: 60%;
	left: 50%;
	width: 100%;
	transform: translate(-50%, -50%);
	position: absolute;
	color: #e2eff7;
	text-align: center;
	font-size: 3rem;
	font-weight: 400;
	letter-spacing: 0.2rem;
	font-family: Aerospace;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	/* background-color: #0000007d; */
	animation: glow 2s ease-in-out infinite alternate;
	/* padding: 2rem; */
}

.heading h2 {
	background-image: url('Animated-Portfolio-main/members/982dc556-3317-4aac-87b2-3ef9f23f912f.avif');
	/* Replace with your image URL */
	background-size: cover;
	/* Cover the entire text */
	-webkit-background-clip: text;
	/* For Safari */
	-webkit-text-fill-color: transparent;
	/* For Safari */
	background-clip: text;
	/* For other browsers */
	text-fill-color: transparent;
	/* For other browsers */
	font-family: font4;
}

/* .heading::before {
	content: "Mechanical Engenerring";

	margin-bottom: 4rem;
	margin-inline: auto;
	text-align: center;
	text-align: center;
	font-size: 3rem;

	font-weight: 400;
	font-weight: 400;
	letter-spacing: 0.2rem;
	font-family: font3;
	text-shadow: 0 0 10px rgba(226, 239, 247, 0.5), 0 0 20px rgba(226, 239, 247, 0.3), 0 0 30px rgba(226, 239, 247, 0.2);
	animation: glow 2s all infinite alternate;
} */
@media (max-width: 1300px) {
	.domain2img {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.mesdomain {
		color: #b3bde1;
		position: absolute;
		bottom: 0%;
		left: 0;

		z-index: 10000;
		padding: 1rem;
	}

	.heading {
		top: 63%;
	}

	.headwelcome {
		display: inline-block;
		font-size: 1.4rem;
		margin-top: 6rem;
		font-family: font3;
	}
}

@font-face {
	font-family: 'Aerospace';
	src: url('Animated-Portfolio-main/Aerospace.otf') format('otf'), url('Animated-Portfolio-main/Aerospace.ttf') format('truetype'), url('Animated-Portfolio-main/AnkhSanctuary-PVK0B.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'font7';
	src: url('Animated-Portfolio-main/DamingaMedium.otf') format('otf');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'font4';
	src: url('Animated-Portfolio-main/GeographWeb-Medium.44477467.woff2') format('woff2');
}

@font-face {
	font-family: 'font2';
	src: url('Animated-Portfolio-main/AnkhSanctuary-PVK0B.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'font6';
	src: url('Animated-Portfolio-main/underwave.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'font8';
	src: url('Animated-Portfolio-main/Montserrat-Regular.2cf917c2.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'font9';
	src: url('Animated-Portfolio-main/Montserrat-SemiBold.a62d229e.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'font4';
	src: url('Animated-Portfolio-main/Solaris.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'font5';
	src: url('Animated-Portfolio-main/Glaser\ Stencil\ W01.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'font3';
	src: url('./Animated-Portfolio-main/Infusive.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'font0';
	src: url('./Animated-Portfolio-main/AquireBold-8Ma60.f61ae48e.otf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

.card-cont {
	display: flex;
	justify-content: center;
}

.card1 {
	color: white;
	height: 200px;
	width: 200px;
	border: 1px solid orange;
}

.page2 {
	/* width: 100vw; */
	/* height: 100vh; */
	min-height: 80vh;

	/*
* Created with https://www.css-gradient.com
* Gradient link: https://www.css-gradient.com/?c1=030140&c2=010101&gt=l&gd=dbl
*/

	/* padding: 1rem; */
	/* position: relative; */
	/* border: 2px solid #19C3DF; */
}

.page2 h2 {
	/* margin: 4rem 0;
	text-align: center;
	padding-inline: 0.2rem;
	border-radius: 0.3rem;
	font-family: font0;
	z-index: 1000;
	color: #e0cbff;
	-webkit-text-stroke: 0.1rem #d5dde4;
	color: rgba(0, 0, 0, 0);
	text-transform: uppercase;

	background: linear-gradient(15deg, #ffee0170, #fffffffe);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;

	font-size: 3rem;
	letter-spacing: 0.3rem;
	text-shadow: 0 0 10px rgba(179, 189, 225, 0.5), 0 0 20px rgba(179, 189, 225, 0.3), 0 0 30px rgba(179, 189, 225, 0.2);
	animation: glow 2s ease-in-out infinite alternate; */
	padding: 2rem;
	font-size: 3rem;
	font-family: font0;
	background: linear-gradient(#fff, #b6b4f1);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	text-transform: uppercase;
	text-align: center;
	margin: 0.5rem 0;
}

.aboutmes {
	/* height: 100%; */
	display: flex;
	align-items: center;
	justify-content: center;
}

.mesbox {
	/* position: absolute; */
	top: 20%;
	padding: 0.8rem;
	border: 2px solid #4f415c;
	display: flex;
	gap: 2rem;
	justify-content: center;
	align-items: center;
	max-width: 80vw;
	z-index: 100;
	color: white;
	/* align-items: center; */
	width: 100%;
	/*
  * Created with https://www.css-gradient.com
/*
* Created with https://www.css-gradient.com
* Gradient link: https://www.css-gradient.com/?c1=030140&c2=010101&gt=l&gd=dbb
*/
	background: #030140;
	background: linear-gradient(210deg, #030140, #010101);
	border-radius: 0.2rem;
	/* Rounded corners */
	backdrop-filter: blur(20px);
	/* Blur effect */
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	/* Shadow for depth */
	color: white;
	/* Text color */
	text-align: center;
	/* Center text */
	transition: 1s all;
}

.mesbox::before {
	position: absolute;
	content: ' ';
	display: block;

	background: linear-gradient(90deg, transparent, #ff9966, #ff9966, #ff9966, #ff9966, transparent);
	animation: rotation_481 5000ms infinite linear;
}

.boximg {
	width: 50vw;
	/* border: 2px solid #19C3DF; */
}

.boximg img {
	width: 100%;
	border-radius: 0.4rem;
	aspect-ratio: 16 / 9;
}

@media (max-width: 900px) {
	.boximg img {
		/* width: 60%; */
		border-radius: 0.4rem;
	}

	.mesbox {
		flex-direction: column;
	}
}

.boxtext {
	font-family: font8;
	text-align: justify;

	font-weight: 300;
	width: 50vw;
	/* font-family: "Outfit", sans-serif; */
}

.page3 {
	min-height: 50vh;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	position: relative;
	/*
* Created with https://www.css-gradient.com
* Gradient link: https://www.css-gradient.com/?c1=030140&c2=010101&gt=l&gd=dbb
*/
	background: #030140;
	background: linear-gradient(0deg, #030140, #010101);
}

.page4 {
	min-height: 80vh;

	background: #030140;
	background: linear-gradient(0deg, #030140, #010101);
}

.page42 {
	min-height: 80vh;

	background: #030140;
	background: linear-gradient(180deg, #030140, #030140);
}

.page4 h2,
.page42 h2 {
	/* padding: 2rem;
	text-align: center;
	letter-spacing: 0.3rem;
	color: #e0cbff;
	top: 5%;
	font-family: font0;
	-webkit-text-stroke: 0.1rem #d5dde4;
	color: rgba(0, 0, 0, 0);
	text-transform: uppercase;

	background: linear-gradient(15deg, #ffee0170, #fffffffe);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;

	font-size: 3rem;
	letter-spacing: 0.3rem;
	text-shadow: 0 0 10px rgba(179, 189, 225, 0.5), 0 0 20px rgba(179, 189, 225, 0.3), 0 0 30px rgba(179, 189, 225, 0.2);
	text-transform: uppercase;
	animation: glow 2s ease-in-out infinite alternate; */

	padding: 2rem;
	font-size: 3rem;
	font-family: font0;
	background: linear-gradient(#fff, #b6b4f1);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	text-transform: uppercase;
	text-align: center;
}

/* Add this keyframe animation for the glow effect */
@keyframes glow {
	from {
		text-shadow: 0 0 10px rgba(226, 239, 247, 0.5), 0 0 20px rgba(226, 239, 247, 0.3), 0 0 30px rgba(226, 239, 247, 0.2);
	}

	to {
		text-shadow: 0 0 20px rgba(89, 97, 101, 0.6), 0 0 30px rgba(226, 239, 247, 0.4), 0 0 40px rgba(226, 239, 247, 0.3), 0 0 50px rgba(226, 239, 247, 0.2);
	}
}

.offer {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	padding: 2rem;
	max-width: 80vw;
	margin: 0 auto;
	transition: 1s all;
}

.offer-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* background: linear-gradient(5deg, #4e4e4e44, #010101); */
	text-align: center;
	border-radius: 0.3rem;
	padding: 1.5rem;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	border: 1px solid rgba(174, 174, 174, 0.509);
	backdrop-filter: blur(10px);
	transition: 1s all;
}

.offer-icon {
	font-size: 3rem;
	color: #b3bde1;
	margin-bottom: 15px;
	display: inline-block;
	transition: transform 0.3s ease, color 0.3s ease;
}

.offer-box:hover .offer-icon {
	transform: scale(1.2);
	color: #e2eff7;
}

.offer-box:hover {
	background-color: #4b4b4b38;
	scale: 0.98;
	box-shadow: 0 0 20px rgba(179, 189, 225, 0.2);
	transition: 1s all;
}

.offer-box h3 {
	color: #b3bde1;
	font-family: font9;
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
	text-align: center;
	letter-spacing: 0.1rem;
	text-shadow: 0 0 10px rgba(179, 189, 225, 0.3);
}

.box-content {
	display: grid;
	gap: 1rem;
}

.box-section {
	padding-top: 2rem;
	font-family: font8;
	color: #fff;
	text-transform: uppercase;
	/* letter-spacing: 0.2rem; */
	text-align: justify;
	padding: 0.8rem;
	/* background: rgba(179, 189, 225, 0.05); */
	border-radius: 0.5rem;
	/* text-align: center; */
	transition: 1s ease;
}

.box-section:hover {
	background: rgba(179, 189, 225, 0.1);
	transition: 1s all;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
	.offer {
		grid-template-columns: repeat(2, 1fr);
		justify-content: space-around;
	}
}

@media (max-width: 768px) {
	.para {
		font-size: 0.5rem;
	}
	.title {
		font-size: 0.7rem;
	}
	.offer {
		max-width: 100vw;
		grid-template-columns: repeat(1, 1fr);
		padding: 1rem;
	}

	.offer-box {
		padding: 1rem;
	}

	.offer-box h3 {
		font-size: 1.2rem;
	}
}

@media (max-width: 430px) {
	.offer {
		grid-template-columns: repeat(1, 1fr);
		padding: 1rem;
	}

	.offer-box {
		padding: 1rem;
	}

	.offer-box h3 {
		font-size: 1.2rem;
	}
}

.page5 {
	min-height: 100vh;
	text-align: center;
	background: #030140;
	background: linear-gradient(180deg, #030140, #010101);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.page5 h1 {
	/* text-align: center;
	font-family: font0;
	-webkit-text-stroke: 0.1rem #ffffff;
	color: rgba(0, 0, 0, 0);
	text-transform: uppercase;
	font-size: 3rem;
	letter-spacing: 0.7rem;
	-webkit-text-stroke: 0.1rem #b6b4f1;
	color: rgba(0, 0, 0, 0);
	text-transform: uppercase;

	background: linear-gradient(15deg, #ffffff70, #000000);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;

	letter-spacing: 0.3rem;
	text-shadow: 0 0 10px rgba(179, 189, 225, 0.5), 0 0 20px rgba(179, 189, 225, 0.3), 0 0 30px rgba(179, 189, 225, 0.2); */

	padding: 2rem;
	font-size: 3rem;
	font-family: font0;
	background: linear-gradient(#fff, #b6b4f1);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	text-transform: uppercase;
	text-align: center;
	margin: 0.5rem 0;
}

.yantrikaimg {
	margin: auto;
}

.yantrikaimg img {
	width: 80vw;
	aspect-ratio: 16/9;
	margin: 2rem;
}

.yantrika {
	font-family: font8;
	max-width: 80vw;
	padding-top: 2rem;
	letter-spacing: 0.2rem;
	margin: auto;
	text-align: center;
	color: #e2eff7;
	/* border: 2px solid #19C3DF; */
}

#btn {
	background-color: #030140;
	color: white;
	border: none;
	padding: 12px 28px;
	font-family: aerospace;
	font-size: 1rem;
	border-radius: 0.4rem;
	cursor: pointer;
	letter-spacing: 1px;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	margin-top: 2rem;
	box-shadow: 0 0 15px rgba(35, 1, 64, 0.5);
}

.yantlink a {
	color: #4f415c;
}

.page6 {
	color: #b3bde1;

	text-align: center;
	background: #030140;
	background: linear-gradient(0deg, #030140, #010101);
}

.page6 h2 {
	padding: 2rem;
	font-size: 3rem;
	font-family: font0;
	background: linear-gradient(#fff, #b6b4f1);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	text-transform: uppercase;
	text-align: center;
}

.page6event {
	padding: 1rem;
	max-width: 80vw;
	/* border: 2px solid #19C3DF; */
	margin: auto;
}

.smallcard {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	justify-content: space-evenly;
}

.cards {
	perspective: -500px;
}

.card {
	width: 250px;
	height: 250px;
	background: #16161d;
	border: 2px solid #4f415c;
	padding: 0.2rem;
	border-radius: 4px;
	position: relative;
	transform-style: preserve-3d;
	will-change: transform;
	transition: transform 0.5s;

	& img {
		width: 100%;
		height: 100%;
		aspect-ratio: 1;
		object-fit: cover;
	}
}

.card:hover {
	transform: translateZ(10px) rotateX(20deg) rotateY(20deg);
}

.card_title {
	text-align: center;
	font-family: font8;
	color: #fff;
	position: absolute;
	/* top: 50%; */
	bottom: 5%;
	/* right: 20px; */
	transform: translateY(-50%);
	transition: transform 0.5s;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	display: none;
	transition: 01s all;
}

.card:hover .card_title {
	transform: translateZ(50px);
	display: block;
	transition: 0.2s all;
}

/* Additional Mobile Responsiveness */
@media (max-width: 768px) {
	.logo {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
	}

	.logo img {
		margin: 0 5px;
	}

	.heading {
		top: 33%;
		font-size: 3rem;
	}

	.offer {
		flex-direction: column;
	}

	.offer-box {
		width: 90%;
		margin: 10px auto;
	}
}

@media (max-width: 480px) {
	.logo {
		scale: 0.9;
	}

	.heading {
		font-size: 2rem;
	}

	.headwelcome {
		display: inline-block;
		font-size: 1.4rem;
		/* margin-top: 0.1rem; */
		font-family: font3;
	}
	.page2 h2 {
		font-size: 2.5rem;
	}
	.page5 h1 {
		font-size: 3rem;
	}
	.page6 h2 {
		font-size: 1.5rem;
	}
	.page4 h2,
	.page42 h2 {
		font-size: 2.5rem;
	}
}

.highlight-text {
	margin: 3rem 0;
	color: #e1d7b3;
	font-weight: 400;
	font-family: font8;
	text-shadow: 0 0 10px rgba(179, 189, 225, 0.3), 0 0 20px rgba(179, 189, 225, 0.2);
	line-height: 1.6;
	display: block;
	position: relative;
	/* padding: 10px; */
	border-left: 3px solid #030140;
	animation: text-glow 6s all infinite alternate;
}

@keyframes text-glow {
	0% {
		text-shadow: 0 0 5px rgba(179, 189, 225, 0.3);
	}

	100% {
		text-shadow: 0 0 15px rgba(179, 189, 225, 0.7), 0 0 25px rgba(226, 239, 247, 0.5);
	}
}

/* Page 7 Styles */
.page7 {
	min-height: 100vh;
	padding: 6rem 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.page7 h2 {
	/* margin-bottom: 3rem;
	text-align: center;
	font-family: font6;
	-webkit-text-stroke: 0.1rem #d5dde4;
	color: rgba(0, 0, 0, 0);
	text-transform: uppercase;

	background: linear-gradient(15deg, #ffee0170, #fffffffe);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;

	font-size: 3rem;
	letter-spacing: 0.3rem;
	text-shadow: 0 0 10px rgba(179, 189, 225, 0.5), 0 0 20px rgba(179, 189, 225, 0.3), 0 0 30px rgba(179, 189, 225, 0.2); */
	/* animation: glow 2s ease-in-out infinite alternate; */
	padding: 2rem;
	font-size: 3rem;
	font-family: font0;
	background: linear-gradient(#fff, #b6b4f1);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	text-transform: uppercase;
	text-align: center;
}

.future-content {
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
}

.future-icons {
	display: flex;
	justify-content: center;
	gap: 4rem;
	margin: 4rem 0;
	flex-wrap: wrap;
}

.future-icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #e2eff7;
	transition: transform 0.3s ease;
}

.future-icon:hover {
	transform: translateY(-10px);
}

.future-icon i {
	font-size: 3rem;
	margin-bottom: 1rem;
	text-shadow: 0 0 10px rgba(226, 239, 247, 0.5), 0 0 20px rgba(226, 239, 247, 0.3);
}

.future-icon span {
	font-family: font3;
	font-size: 1.2rem;
}

.future-btn {
	background-color: #030140;
	color: white;
	border: none;
	padding: 12px 28px;
	font-family: font3;
	font-size: 1rem;
	border-radius: 0.4rem;
	cursor: pointer;
	letter-spacing: 1px;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	margin-top: 2rem;
	box-shadow: 0 0 15px rgba(35, 1, 64, 0.5);
}

.future-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: 0.5s;
}

.future-btn:hover {
	transform: scale(1.05);
	box-shadow: 0 0 20px rgba(35, 1, 64, 0.7);
}

.future-btn:hover::before {
	left: 100%;
}

@media (max-width: 768px) {
	.future-icons {
		gap: 2rem;
	}

	.future-icon i {
		font-size: 2.5rem;
	}

	.future-icon span {
		font-size: 1rem;
	}

	.page7 {
		padding: 4rem 1rem;
	}

	.page7 h2 {
		font-size: 1.7rem;
		/* font-family: font3; */
	}
}

@media (max-width: 480px) {
	.future-icons {
		flex-direction: column;
		gap: 3rem;
	}

	.highlight-text {
		font-size: 0.9rem;
	}
}

@media (max-width: 992px) {
	.domain {
		display: none;
	}

	.left-domain,
	.right-domain {
		width: 100%;
		align-items: center;
		display: flex;
	}
}

@media (max-width: 330px) {
	.domain2 {
		padding: 0.1rem;
		aspect-ratio: 4;
		/* max-width: 100%; */
		max-width: 250px;
	}

	.heading {
		top: 33%;
	}

	.headtop {
		font-size: 0.5rem;
	}

	.typing-text {
		font-size: 0.7rem;
	}

	.bigtext {
		font-size: 2rem;
	}

	html {
		scroll-behavior: smooth;
		font-size: 50%;
	}
}

@media (max-width: 768px) {
	.mesdomain {
		display: block;
		/* position: relative;
		margin-top: 2rem; */
		opacity: 0.9;

		&:hover {
			opacity: 1;
		}
	}

	.domain2 {
		opacity: 0.65;

		&:hover {
			opacity: 1;
		}
	}

	.headwelcome {
		margin-top: 0;
	}

	.left-domain,
	.right-domain {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		width: 100%;
	}

	.domain {
		display: grid;
		gap: 1rem;
		grid-template-columns: 1fr;
	}

	.domain2 {
		padding: 0.1rem;
		aspect-ratio: 4;
		max-width: 100%;
		max-width: 300px;
	}
}

.typing-text {
	border-right: 2px solid #fff;
	animation: blink 0.7s infinite;
}

@keyframes blink {
	0%,
	100% {
		border-color: transparent;
	}

	50% {
		border-color: #fff;
	}
}

.yantrikaslider {
	width: 100%;
	padding: 20px 0;
	margin: 20px 0;
	position: relative;
}

.swiper {
	height: 70vh;
	width: 80%;
	padding: 20px 0;
	overflow: visible;
}

.swiper-slide {
	height: 100%;
	transition: all 0.3s ease;
	transform: scale(0.8);
	opacity: 0.5;
	filter: blur(5px);
}

.swiper-slide-active {
	transform: scale(1);
	opacity: 1;
	filter: blur(0);
	z-index: 1;
}

.swiper-slide-active + .swiper-slide,
.swiper-slide-active + .swiper-slide + .swiper-slide {
	transform: scale(0.8);
	opacity: 0.5;
	filter: blur(5px);
}

.swiper-slide-prev,
.swiper-slide-next {
	transform: scale(0.8);
	opacity: 0.5;
	filter: blur(5px);
}

.event-card {
	aspect-ratio: 1;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 15px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	transition: all 0.3s ease;
	height: 100%;
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(255, 255, 255, 0);
	position: relative;
}

.event-card:hover {
	transform: scale(1.02);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.event-logo {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

.event-logo img {
	aspect-ratio: 4;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transform: scale(0.9);
	transition: transform 0.3s ease;
}

.event-card:hover .event-logo img {
	transform: scale(1.1);
}

.event-content {
	font-family: font8;
	padding: 20px;
	height: 100%;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.3) 100%);
	position: relative;
	z-index: 2;
}

.event-content h3 {
	margin: 0 0 15px 0;
	color: #b6b4f1;
	font-size: 1.2rem;
	text-transform: uppercase;
	font-family: 'font0', sans-serif;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
	font-weight: bold;
}

.event-content p {
	margin: 0;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.6;
	font-size: 0.9rem;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Swiper Navigation */
.swiper-button-next,
.swiper-button-prev {
	top: 40%;
	color: #fff !important;
	background: rgba(255, 255, 255, 0.1);
	width: 30px !important;
	height: 30px !important;

	backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: all 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
	background: rgba(255, 255, 255, 0.2);
}

.swiper-button-next:after,
.swiper-button-prev:after {
	top: 40%;
	font-size: 1rem !important;
}

.swiper-pagination-bullet {
	background: #fff !important;
	opacity: 0.5;
	width: 10px;
	height: 10px;
	transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
	opacity: 1;
	width: 20px;
	border-radius: 5px;
}

/* Responsive Styles */
@media (max-width: 768px) {
	.boxtext {
		/* font-family: font4; */
		text-align: justify;

		font-weight: 300;
		width: 100%;
		/* font-family: "Outfit", sans-serif; */
	}
	.boximg {
		aspect-ratio: 4;
		width: 100%;
		/* border: 2px solid #19C3DF; */
	}
	.event-logo {
		height: 250px;
	}

	.event-content h3 {
		font-size: 1rem;
	}

	.event-content p {
		font-size: 0.8rem;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 20;
	}

	.swiper-button-next,
	.swiper-button-prev {
		top: 40%;
		width: 30px !important;
		height: 30px !important;
	}
}

/* .bigtext {
	font-size: 3rem;
	font-weight: 400;
	letter-spacing: 0.2rem;
	font-family: Aerospace;
	background: linear-gradient(90deg, #e2eff7, #b3bde1, #7489c6, #b3bde1, #e2eff7);
	background-size: 200% auto;
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	animation: gradient 8s linear infinite;
	text-shadow: none;
}

@keyframes gradient {
	0% {
		background-position: 0% center;
	}

	100% {
		background-position: 200% center;
	}
} */

.bigtext {
	-webkit-text-stroke: 0.1rem rgba(232, 230, 239, 0.48);
	color: rgba(0, 0, 0, 0);
	animation: glitch 8s steps(20) infinite;

	/* color: #cfcfcf; */
	/* font-size: 3.4rem; */
	/* background: linear-gradient(#fff, #ffe29d);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	font-family: afr; */
	text-align: center;
	text-transform: uppercase;
	/* text-shadow: 10px 10px 20px solid #19c3df; */
}

@keyframes glitch {
	0% {
		text-shadow: 3px 0 0 #19c3df, -3px 0 0 #506881;
		filter: blur(0);
	}

	1% {
		text-shadow: 3px 0 0 #19c3df, -3px 0 0 #506881;
		filter: blur(0);
	}

	2% {
		text-shadow: 3px 0 0 #19c3df, -3px 0 0 #506881;
		filter: blur(0);
	}

	3% {
		text-shadow: 3px 0 0 #19c3df, -3px 0 0 #506881;
		filter: blur(0);
	}

	4% {
		text-shadow: 3px 0 0 #19c3df, -3px 0 0 #506881;
		filter: blur(0);
	}

	12% {
		text-shadow: 1px 0 0 #19c3df, -1px 0 0 #fcffff;
		filter: blur(0.5px);
	}

	13% {
		text-shadow: 1px 0 0 #19c3df, -1px 0 0 #fcffff;
		filter: blur(0.5px);
	}

	14% {
		text-shadow: 1px 0 0 #19c3df, -1px 0 0 #fcffff;
		filter: blur(0);
	}

	15% {
		text-shadow: 1px 0 0 #19c3df, -1px 0 0 #fcffff;
		filter: blur(0);
	}

	16% {
		text-shadow: -3px 0 0 #19c3df, 3px 0 0 #fcffff;
		filter: blur(0);
	}

	17% {
		text-shadow: -3px 0 0 #19c3df, 3px 0 0 #fcffff;
		filter: blur(0);
	}

	18% {
		text-shadow: -3px 0 0 #19c3df, 3px 0 0 #fcffff;
		filter: blur(0);
	}

	19% {
		text-shadow: -3px 0 0 #19c3df, 3px 0 0 #fcffff;
		filter: blur(0);
	}

	20% {
		text-shadow: -3px 0 0 #19c3df, 3px 0 0 #fcffff;
		filter: blur(0);
	}

	21% {
		text-shadow: 0.8px 0 0 #506881, -0.8px 0 0 #fcffff;
		filter: blur(0);
	}

	22% {
		text-shadow: 0.8px 0 0 #506881, -0.8px 0 0 #fcffff;
		filter: blur(0);
	}

	23% {
		text-shadow: 0.8px 0 0 #506881, -0.8px 0 0 #fcffff;
		filter: blur(0);
	}

	34% {
		text-shadow: -3px 0 0 #506881, 3px 0 0 #fcffff;
		filter: blur(0);
	}

	35% {
		text-shadow: -3px 0 0 #506881, 3px 0 0 #fcffff;
		filter: blur(0.5px);
	}

	36% {
		text-shadow: -3px 0 0 #506881, 3px 0 0 #fcffff;
		filter: blur(0.5px);
	}

	37% {
		text-shadow: -3px 0 0 #506881, 3px 0 0 #fcffff;
		filter: blur(0.5px);
	}

	38% {
		text-shadow: -3px 0 0 #506881, 3px 0 0 #fcffff;
		filter: blur(0);
	}

	39% {
		text-shadow: -3px 0 0 #506881, 3px 0 0 #fcffff;
		filter: blur(0);
	}

	40% {
		text-shadow: -3px 0 0 #506881, 3px 0 0 #fcffff;
		filter: blur(0);
	}

	41% {
		text-shadow: 25px 0 0 #506881, -45px 0 0 #fcffff;
		filter: blur(0);
	}

	42% {
		text-shadow: 0 0 0 #506881, 0 0 0 #fcffff;
		filter: blur(0);
	}

	43% {
		text-shadow: 1px 0 0 #19c3df, -1px 0 0 #fcffff;
		filter: blur(0);
	}

	44% {
		text-shadow: 1px 0 0 #19c3df, -1px 0 0 #fcffff;
		filter: blur(0);
	}

	45% {
		text-shadow: 1px 0 0 #19c3df, -1px 0 0 #fcffff;
		filter: blur(0);
	}

	54% {
		text-shadow: 3px 0 0 #19c3df, -3px 0 0 #506881;
		filter: blur(0);
	}

	55% {
		text-shadow: 3px 0 0 #19c3df, -3px 0 0 #506881;
		filter: blur(0.5px);
	}

	56% {
		text-shadow: -3px 0 0 #19c3df, 3px 0 0 #506881;
		filter: blur(0.5px);
	}

	57% {
		text-shadow: -3px 0 0 #19c3df, 3px 0 0 #506881;
		filter: blur(0.5px);
	}

	58% {
		text-shadow: -3px 0 0 #19c3df, 3px 0 0 #506881;
		filter: blur(0);
	}

	59% {
		text-shadow: -3px 0 0 #19c3df, 3px 0 0 #506881;
		filter: blur(0);
	}

	60% {
		text-shadow: -3px 0 0 #19c3df, 3px 0 0 #506881;
		filter: blur(0);
	}

	61% {
		text-shadow: 20px 0 0 #19c3df, -30px 0 0 #fcffff;
		filter: blur(0);
	}

	62% {
		text-shadow: 0 0 0 #19c3df, 0 0 0 #fcffff;
		filter: blur(0);
	}

	63% {
		text-shadow: 1px 0 0 #19c3df, -1px 0 0 #506881;
		filter: blur(0);
	}

	64% {
		text-shadow: 1px 0 0 #19c3df, -1px 0 0 #506881;
		filter: blur(0);
	}

	65% {
		text-shadow: 1px 0 0 #19c3df, -1px 0 0 #506881;
		filter: blur(0);
	}

	66% {
		text-shadow: 1px 0 0 #19c3df, -1px 0 0 #506881;
		filter: blur(0.5px);
	}

	76% {
		text-shadow: 3px 0 0 #19c3df, -3px 0 0 #506881;
		filter: blur(0);
	}

	77% {
		text-shadow: -3px 0 0 #19c3df, 3px 0 0 #506881;
		filter: blur(0);
	}

	78% {
		text-shadow: -3px 0 0 #19c3df, 3px 0 0 #506881;
		filter: blur(0);
	}

	79% {
		text-shadow: -3px 0 0 #19c3df, 3px 0 0 #506881;
		filter: blur(0);
	}

	80% {
		text-shadow: -3px 0 0 #19c3df, 3px 0 0 #506881;
		filter: blur(0);
	}

	81% {
		text-shadow: 1px 0 0 #19c3df, -1px 0 0 #fcffff;
		filter: blur(0);
	}

	82% {
		text-shadow: 1px 0 0 #19c3df, -1px 0 0 #fcffff;
		filter: blur(0);
	}

	83% {
		text-shadow: 1px 0 0 #19c3df, -1px 0 0 #fcffff;
		filter: blur(0.5px);
	}

	84% {
		text-shadow: 1px 0 0 #19c3df, -1px 0 0 #fcffff;
		filter: blur(0.5px);
	}

	85% {
		text-shadow: 1px 0 0 #19c3df, -1px 0 0 #fcffff;
		filter: blur(0.5px);
	}

	86% {
		text-shadow: -3px 0 0 #19c3df, 3px 0 0 #fcffff;
		filter: blur(0.5px);
	}

	87% {
		text-shadow: -3px 0 0 #19c3df, 3px 0 0 #fcffff;
		filter: blur(0.5px);
	}

	88% {
		text-shadow: -3px 0 0 #19c3df, 3px 0 0 #fcffff;
		filter: blur(0);
	}

	89% {
		text-shadow: -3px 0 0 #19c3df, 3px 0 0 #fcffff;
		filter: blur(0);
	}

	90% {
		text-shadow: -3px 0 0 #19c3df, 3px 0 0 #fcffff;
		filter: blur(0);
	}

	91% {
		text-shadow: 20px 0 0 #fcffff, -60px 0 0 #506881;
		filter: blur(0);
	}

	92% {
		text-shadow: 0 0 0 #fcffff, 0 0 0 #506881;
		filter: blur(0);
	}

	92% {
		text-shadow: 0.8px 0 0 #506881, -0.8px 0 0 #fcffff;
		filter: blur(0);
	}

	93% {
		text-shadow: 0.8px 0 0 #506881, -0.8px 0 0 #fcffff;
		filter: blur(0);
	}

	94% {
		text-shadow: 0.8px 0 0 #506881, -0.8px 0 0 #fcffff;
		filter: blur(0);
	}

	95% {
		text-shadow: 0.8px 0 0 #506881, -0.8px 0 0 #fcffff;
		filter: blur(0);
	}

	96% {
		text-shadow: -3px 0 0 #506881, 3px 0 0 #fcffff;
		filter: blur(0);
	}

	97% {
		text-shadow: -3px 0 0 #506881, 3px 0 0 #fcffff;
		filter: blur(0);
	}

	98% {
		text-shadow: -3px 0 0 #506881, 3px 0 0 #fcffff;
		filter: blur(0);
	}

	99% {
		text-shadow: -3px 0 0 #506881, 3px 0 0 #fcffff;
		filter: blur(0);
	}

	100% {
		text-shadow: -3px 0 0 #506881, 3px 0 0 #fcffff;
		filter: blur(0);
	}
}

/* .bigtext {
  position: relative;
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 2em;
  letter-spacing: 4px;
  overflow: hidden;
  background: linear-gradient(90deg, #000, #fff, #000);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 3s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
} */

.mesimg1 {
	border-radius: 1rem;
	position: relative;
	width: 100%;
	aspect-ratio: 2/1;
	/* height: 50vh; */
	overflow: hidden;
}

.mesimg-scroll1 {
	position: relative;
	/* width: 80%; */
	height: 80%;
	margin: 0 auto;
}

.mesimg-track1 {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.mesimg-track1 img {
	top: 2rem;
	border-radius: 1rem;
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	/* transform: scale(1.2); */
	animation: fadeInOut 10s infinite;
}

.mesimg-track1 img.loaded {
	filter: blur(0);
	transform: scale(1);
}

.mesimg-track1 img:nth-child(1) {
	animation-delay: 0s;
}

.mesimg-track1 img:nth-child(2) {
	animation-delay: 2s;
}

.mesimg-track1 img:nth-child(3) {
	animation-delay: 4s;
}

.mesimg-track1 img:nth-child(4) {
	animation-delay: 6s;
}

.mesimg-track1 img:nth-child(5) {
	animation-delay: 8s;
}

@keyframes fadeInOut {
	0% {
		opacity: 0;
	}

	10% {
		opacity: 1;
	}

	20% {
		opacity: 1;
	}

	30% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

.bgblue {
	display: grid;
	max-width: 80vw;
	margin-inline: auto;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 2rem;
	padding: 1rem;
}

.card {
	background: linear-gradient(transparent, #eeeeee1a);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	border: 1px solid #eeeeee62;
	padding: 0 1rem;
	backdrop-filter: blur(20px);
	position: relative;
	/* background: linear-gradient(135deg, #93a1d5 0%, #3a4b8a 43%, #0d1120 100%); */
	padding: 0.4rem;
	border-radius: 1.2rem;
	aspect-ratio: 1;
	overflow: hidden;
	transition: transform 0.3s ease;
}

.card:hover {
	transform: translateY(-10px);
}

.card img {
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: contain;
	border-radius: 1rem;
	transition: all 0.3s ease;
}

.card p {
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	padding: 1rem;
	background: rgba(13, 17, 32, 0.95);
	color: white;
	transition: left 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: 1rem;
	backdrop-filter: blur(5px);
}

.card:hover p {
	left: 0;
	background-color: #48484837;
}

.card:hover img {
	transform: scale(1.1);
	filter: brightness(0.5);
}

@media (max-width: 768px) {
	.bgblue {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 3rem;
	}
}
.cgpa{
max-width: 80vw;
margin: auto;
font-family: font8;
}
.overlay {
	text-align: center;
	padding: 1rem;
	color: white;
	background-color: #030140;
}
.overlay h2{
	    /* animation: glow 2s ease-in-out infinite alternate; */
    padding: 2rem;
    font-size: 3rem;
    font-family: font0;
    background: linear-gradient(#fff, #b6b4f1);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    text-transform: uppercase;
    text-align: center;
}
@media (max-width: 768px) {
    .overlay h2 {
        font-size: 1.7rem;
        /* font-family: font3; */
    }
}
select,
input,
button {
	padding: 10px;
	margin: 8px;
	font-size: 1em;
}

table {
	width: 90%;
	max-width: 600px;
	margin: 20px auto;
	border-collapse: collapse;
}

th,
td {
	padding: 0;
	border: 1px solid #ddd;
	text-align: center;
}

input[type='number'] {
	padding: 0.3rem;
	outline: none;
	text-align: center;
	background-color: #b6b4f191;
	color: white;
	border: none;
}

.result,
.thank-you {
	text-align: center;
	margin-top: 20px;
}

.thank-you {
	color: lightgreen;
}

.footer {
	text-align: center;
	color: #ccc;
}

@media only screen and (max-width: 600px) {
	table,
	th,
	td {
		font-size: 0.9em;
	}

	input[type='number'] {
		width: 50px;
	}

	.logo img {
		height: 80px;
	}
}
.calcbtn{
		background-color: rgba(0, 123, 255, 0.1);
	color: white;
	border: none;
	padding: 12px 28px;
	font-family: font3;
	font-size: 0.8rem;
	border-radius: 0.4rem;
	cursor: pointer;
	letter-spacing: 1px;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	margin-top: 2rem;
	box-shadow: 0 0 15px rgba(35, 1, 64, 0.5);



}
.calcbtn:hover{

		background-color: rgba(0, 123, 255, 0.15)

}
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 50%;
  background-color: #030140;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: none; /* hidden by default */
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 999;
}

.back-to-top.show {
  display: flex;
  opacity: 1;
  transform: scale(0.8);
}

.back-to-top:hover {
	border: 1px solid black;
	 transform: scale(1);
  background-color: #0301409f;
}