@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap");

:root {
	--clr-bg: hsl(323 21% 16%);
	--clr-purple: hsl(317 100% 54%);
}


.nunito {
	font-family: "Nunito", "Nunito" !important;
}

* {
	margin: 0px;
	padding: 0px;
	position: initial;
}

:root {
	--pcolor: #7510f7;
	--gcolor: #1c1c1c;
	--gcolor2: #ffffff;
}

/* .dark { */
/* background-color: #1c1c1c00 !important;
} */

body,
.dark {
	background-attachment: fixed;
	background-repeat: no-repeat, no-repeat;
	background-size: cover, cover;
	margin: 0;
	font-family: "eurostile", "Nunito";
	background-image:
		url("../images/bg.svg"),
		/* radial-gradient(circle at center,
			#6a1bbf 0%,
			#46086d 10%,
			#3b0a5a 30%,
			#3b0a5a 40%,
			#3b0a5a 50%,
			#140321 75%,
			#000000 100%); */
		linear-gradient(135deg, #0b0318 0%,
			#1a0633 40%,
			#2a0a4a 65%,
			#da8d00 110%,
			#d12d0f 100%);
	/* background: linear-gradient(
    135deg,
    #0b0318 0%,
    #1a0633 40%,
    #2a0a4a 65%,
    #5a1f14 100%
  ); */

	z-index: 0;

}

footer {
	content: "";
	/* position: fixed; */
	inset: 0;
	background: rgba(0, 0, 0, 0.226);
}

/* .dark {
	margin: 0;
	font-family: "eurostile", "Nunito";
	background-attachment: fixed;
	background-repeat: no-repeat, no-repeat;
	background-size: cover, cover;
	background-image:
		url("../images/bg.svg"),
		radial-gradient(circle at center,
			#6a1bbf 0%,
			#46086d 10%,
			#3b0a5a 30%,
			#3b0a5a 40%,
			#3b0a5a 50%,
			#140321 75%,
			#000000 100%);
	
} */

body::before,
.dark:before {
	/* content: "";
	position: fixed;
	inset: 0;

	background:
		radial-gradient(circle at 70% 40%, rgba(255, 120, 24, 0.15), transparent 40%),
		radial-gradient(circle at 20% 60%, rgba(114, 9, 183, 0.18), transparent 45%);

	pointer-events: none; */
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.226);
	pointer-events: none;
	z-index: -1;
	/* z-index: -1; */
}

.space-particles {
	position: fixed;
	inset: 0;
	overflow: hidden;
	z-index: -1;
}

.particle {
	position: absolute;
	width: 3px;
	height: 3px;
	background: white;
	border-radius: 50%;
	opacity: 0.6;

	animation: floatParticle linear infinite;
}

@keyframes floatParticle {
	from {
		transform: translateY(0px);
	}

	to {
		transform: translateY(-120vh);
	}
}

.particle {
	animation:
		floatParticle linear infinite,
		twinkle 3s ease-in-out infinite;
}

@keyframes twinkle {

	0%,
	100% {
		opacity: 0.3
	}

	50% {
		opacity: 1
	}
}

/* scroll bar */
/* width */
::-webkit-scrollbar {
	width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px rgb(99, 98, 98);
	border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: #b10000;
	border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: rgb(150, 145, 145);
}

#loading {
	position: fixed;
	margin: 0px;
	padding: 0px;
	width: 100vw;
	height: 100vh;
	background: #070707 url("https://img.freepik.com/free-vector/technology-web-banner-with-blue-red-lights-streak_1017-34380.jpg?w=1060&t=st=1670677117~exp=1670677717~hmac=8d648d2b692ed861731febc9a312f5ec63362f85ba574b1bf643fac940fe3676") no-repeat center center;
	background-size: cover;
	z-index: 99999;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}

.euro {
	font-family: "eurostile", "Nunito";
}

.glow-style {
	font-family: "eurostile", "Nunito" !important;
	z-index: -1;

	text-shadow: 0 0 10px #00d8ff,
		0 0 16px #03bcf4;
	animation: animateText 2s ease-in-out infinite alternate-reverse;
}

.glow-red {
	transition: all 0.3s ease-in-out;
}

.glow-red:hover {
	/* font-family: "eurostile", "Nunito" !important; */
	/* z-index: -1; */
	text-shadow: 0 0 10px #ff0800,
		0 0 16px #ff5623d7;
	animation: animateRedText 2s ease-in-out infinite alternate-reverse;
}

@keyframes animateRedText {
	from {
		text-shadow: 0 0 10px #ff0000,
			0 0 15px #ff0000,
			0 0 16px #ff0000;

	}

	to {
		.glow-red {
			text-shadow: 0 0 10px #f40303,
				0 0 15px #f40303,
				0 0 16px #f40303;
		}

	}
}

@keyframes animateText {
	from {
		text-shadow: 0 0 10px #00d8ff,
			0 0 15px #00d8ff,
			0 0 16px #00d8ff;

	}

	to {
		.glow-effect {
			text-shadow: 0 0 10px #03bcf4,
				0 0 15px #03bcf4,
				0 0 16px #03bcf4;
		}

	}
}

.back {
	background-color: #7510f7;
	flex: none;
	width: 60%;
}

.purple-text {
	color: #7510f7 !important;
}

.bg {
	background-color: #7510f7;
	height: fit-content;
	z-index: 2;
}

.ls {
	letter-spacing: 1px;
	font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "eurostile", "Nunito" !important;
}

.hero-para {

	font-family: "eurostile", "Nunito" !important;
	max-width: 60vw;
	padding: 0 10px;
}

.skills {
	margin-top: -8rem;
}

.column1,
.column2,
.column {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	padding: 50px 30px;
	height: 500px;
	-webkit-box-flex: 1;

	padding: 0.75rem;
	z-index: 3;
}

.column1,
.column2 {
	border-right: 2px solid rgb(189, 158, 204);
}

.br {
	margin: 50px 30px;
	border: 2px solid #fff;
	border-radius: 5px;
	height: auto;
}

.typewriter h2 {
	color: #fff;
	font-family: monospace;
	overflow: hidden;
	/* Ensures the content is not revealed until the animation */
	border-right: 0.15em solid rgb(26, 2, 48);
	/* The typwriter cursor */
	white-space: nowrap;
	/* Keeps the content on a single line */
	margin: 0 auto;
	/* Gives that scrolling effect as the typing happens */
	letter-spacing: 0.15em;
	/* Adjust as needed */
	animation: typing 4.5s steps(30, end) infinite alternate,
		blink-caret 0.7s step-end infinite;
}

/* The typing effect */
@keyframes typing {
	from {
		width: 0;
	}

	to {
		width: 100%;
	}
}

/* The typewriter cursor effect */
@keyframes blink-caret {

	from,
	to {
		border-color: transparent;
	}

	50% {
		border-color: rgb(33, 32, 34);
	}
}

.fa-react {
	font-size: 49px;
	color: #7410f763;
	animation: rotate 2s infinite;
}

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

	to {
		transform: rotate(360deg);
	}
}

.skills .card-group {
	width: 70vw;
}

.purple {
	color: #7410f711;
}

.card {
	text-align: center;
}

.card-body {
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	text-align: justify;
}

.card-body>div {
	height: max-content;
}

.border {
	border: 1px solid #0b77cf38 !important;
	border-radius: 20px;
	color: #2968bb;
	transition: all 0.35s ease;
}

.border:hover {
	/* background-color: #752dd3; */
	color: #00f7ff;
	border: 1px solid #262c0c27 !important;

	box-shadow: 2px 2px 15px rgba(0, 198, 233, 0.171);
	border-radius: 20px;
}

.border:hover>i {
	color: #00f7ff !important;
}

.footer {
	/* background-color: #5d12c0; */
	padding: 3rem 1.5rem 2rem;
}

.footer>* {
	font-family: "Nunito";
}

.handles {
	font-size: 25px;
	transition: all 0.3s ease-in-out;
}

.handles:hover {
	color: #00f7ff !important;
	/* border: 1px solid rgba(48, 46, 46, 0); */
	box-shadow: 2px 0px 25px rgba(53, 50, 50, 0.979);
	border-radius: 25px;
	padding: 12px;
	font-size: 30px;

	-webkit-font-smoothing: antialiased;

	transition-duration: 0.5s;
	cursor: pointer;
}

.created {
	background-color: rgba(44, 44, 44, 0);
	/* text-shadow: 2px 0px 10px rgba(95, 94, 94, 0.281); */
}

.lds-ripple {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
}

.lds-ripple div {
	position: absolute;
	border: 4px solid #fff;
	opacity: 1;
	border-radius: 50%;
	animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.lds-ripple div:nth-child(2) {
	animation-delay: -0.5s;
}

@keyframes lds-ripple {
	0% {
		top: 36px;
		left: 36px;
		width: 0;
		height: 0;
		opacity: 1;
	}

	100% {
		top: 0px;
		left: 0px;
		width: 72px;
		height: 72px;
		opacity: 0;
	}
}

.load {
	display: block;
	animation: load 0.5s alternate infinite;
}

@keyframes load {
	from {
		opacity: 0.2;
	}

	to {
		opacity: 0.9;
	}
}

/* counter */

.counter-up {
	background: url("https://images.unsplash.com/photo-1593062096033-9a26b09da705?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80") no-repeat;
	min-height: 50vh;
	background-size: cover;
	background-attachment: fixed;
	padding: 0 50px;
	position: relative;
	display: flex;
	align-items: center;
}

.counter-up::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(37, 37, 37, 0.8);
}

.counter-up .content {
	z-index: 1;
	position: relative;
	display: flex;
	width: 100%;
	height: 100%;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.counter-up .content .box {
	border: 1px dashed rgba(255, 255, 255, 0.6);
	width: calc(25% - 30px);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	flex-direction: column;
	padding: 20px;
}

.content .box .icon {
	font-size: 48px;
	color: #e6e6e6;
}

.content .box .counter {
	font-size: 50px;
	font-weight: 500;
	color: #f2f2f2;
	font-family: sans-serif;
}

.content .box .text {
	font-weight: 400;
	color: #ccc;
}

@media screen and (max-width: 1036px) {
	.counter-up {
		padding: 50px 50px 0 50px;
	}

	.counter-up .content .box {
		width: calc(50% - 30px);
		margin-bottom: 50px;
	}
}

@media screen and (max-width: 580px) {
	.counter-up .content .box {
		width: 100%;
	}
}

@media screen and (max-width: 500px) {
	.wrapper {
		padding: 20px;
	}

	.counter-up {
		padding: 30px 20px 0 20px;
	}
}

.download {
	border: 1px solid var(--pcolor);
	border-radius: 5px;
	color: var(--pcolor);
}

.animie {
	animation: rotatePlayer 3s linear infinite;
}

@keyframes rotatePlayer {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

/*Custom Alert Code */

.alert {
	/* float: right; */
	/* background: hsla(236, 100%, 8%, 1); */

	/* background: linear-gradient(90deg, hsla(236, 100%, 8%, 1) 0%, hsla(211, 100%, 28%, 1) 100%);

	background: -moz-linear-gradient(90deg, hsla(236, 100%, 8%, 1) 0%, hsla(211, 100%, 28%, 1) 100%);

	background: -webkit-linear-gradient(90deg, hsla(236, 100%, 8%, 1) 0%, hsla(211, 100%, 28%, 1) 100%); */

	align-items: flex-start;
	padding: 20px 40px;
	padding-right: 50px !important;
	min-width: 10rem;
	max-width: fit-content;
	position: sticky;
	right: 5;
	left: 90vw;
	top: 10px;
	border-radius: 4px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	z-index: 9 !important;

	box-shadow:
		0 0 35px #ffffffc4,
		0 0 40px #7510f7,
		0 0 60px #7510f7,
		0 0 80px #7510f7,
		0 0 400px rgba(138, 109, 175, 0.445);
}

.alert.showAlert {
	opacity: 1;
	pointer-events: auto;
}

.alert.show {
	animation: show_slide 0.5s ease-in-out forwards;
}

@keyframes show_slide {
	0% {
		/* transform: translateX(100%); */
		opacity: 0.2;
	}

	40% {
		/* transform: translateX(-10%); */
		opacity: 0.4;
	}

	80% {
		/* transform: translateX(0%); */
		opacity: 0.8;
	}

	100% {
		opacity: 1;
		/* transform: translateX(-10px); */
	}
}

.alert.hide {
	animation: hide_slide 0.5s ease-in-out forwards;
}

@keyframes hide_slide {
	0% {
		opacity: 0.9;
		/* transform:  translateX(-10px); */
	}

	40% {
		opacity: 0.5;
		/*transform:  translateX(0%); */
	}

	80% {
		opacity: 0.3;
		/*transform:  translateX(-10%); */
	}

	100% {
		opacity: 0;
		/*transform:  translateX(100%); */
	}
}

.alert #musicStat {
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	color: white;
	font-size: 30px;
}

.alert .msg {
	padding: 0 20px;
	font-size: 18px;
	color: white;
}

.alert .close-btn {
	position: absolute;
	right: 0px;
	top: 50%;
	transform: translateY(-50%);
	background: var(--pcolor);
	padding: 20px 18px;
	cursor: pointer;
}

#musicStat,
#music_name {

	/* color: var(--pcolor) !important; */
	text-shadow:
		0 0 10px var(--pcolor),
		0 0 15px rgb(30, 1, 58),
		0 0 15px var(--pcolor),
		0 0 15px whitesmoke,
		0 0 10px var(--pcolor);
}

.alert .close-btn:hover {
	background: #bcc3e2;
}

.alert .close-btn .fas {
	color: #fefefe;
	font-size: 22px;
	line-height: 40px;
}

.btn-state {
	color: white;
	font-size: xx-large;
	padding: 0;
	/* background-color: #5d12c0; */

}

/* Gallery */

.container img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #03000007;

}

@media (max-width: 768px) {
  .glightbox-container .gslide-media img {
    max-width: 95vw !important;
    max-height: 80vh !important;
  }
}

.gallery-title {
	font-size: 36px;
	color: var(--pcolor);
	text-align: center;
	font-weight: 500;
	margin-bottom: 70px;
}

.gallery-title:after {
	content: "";
	position: absolute;
	width: 7.5%;
	left: 46.5%;
	height: 45px;
	border-bottom: 1px solid #5e5e5e;
}

.filter-button {
	font-size: 18px;
	border: 1px solid var(--pcolor);
	border-radius: 5px;
	text-align: center;
	color: var(--pcolor);
	margin-bottom: 30px;
}

.filter-button:hover {
	font-size: 18px;
	border: 1px solid var(--pcolor);
	border-radius: 5px;
	text-align: center;
	color: #ffffff;
	background-color: var(--pcolor);
}

.filter-button.active {
	background-color: var(--pcolor);
	color: white;
}

.port-image {
	width: 100%;
}

.gallery_product {
	margin-bottom: 30px;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	/* max-height: 50vh; */
}

.block {
	opacity: 0;
}

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

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

	100% {
		opacity: 1;
	}
}

.fadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}

#toggle_btn_acc {
	font-size: 2rem !important;
	text-align: center !important;
	color: var(--pcolor);
}

@media (min-width: 62em) {
	.glightbox-clean .gclose {
		right: 20px;
	}
}

@media screen and (max-height: 480px) {
	.gslide-video .gvideo-wrapper {
		padding-top: 0;
		height: 100vh;
	}
}

@media screen and (max-height: 420px) {
	.goverlay {
		background: #000;
	}
}

.glow-back {
	box-shadow: 0 0 5px rgba(0, 255, 255, 0.445), 0 0 25px rgba(0, 255, 255, 0.493);
	transition: box-shadow 0.6s ease-in-out;
	position: relative;
	color: white;
	border: none;
	padding: 12px;
	padding-left: 0px;
	font-family: "Rubik", sans-serif;
	border-top-right-radius: 35%;
	border-bottom-right-radius: 35%;
	animation: glow-back-animation 2s ease-in-out infinite alternate;
	-webkit-box-reflect: below 5px linear-gradient(transparent, rgba(213, 2, 255, 0.082));
}

@keyframes glow-back-animation {
	from {
		box-shadow: 0 0 5px rgba(0, 255, 255, 0.445), 0 0 25px rgba(0, 255, 255, 0.493);
		-webkit-box-reflect: below 5px linear-gradient(transparent, rgba(213, 2, 255, 0.062));
	}

	to {
		box-shadow: 0 0 15px cyan, 0 0 35px cyan;
		-webkit-box-reflect: below 5px linear-gradient(transparent, rgba(213, 2, 255, 0.075));
		/* Increase blur radius */
	}
}

.glow-back:hover {
	animation-play-state: paused;
	;
}

.music-btn {
	transition: 0.4s ease-in-out;
	animation-duration: 2s;
}

.music-btn:hover {
	/* box-shadow: 0 0 5px cyan, 0 0 25px cyan, 0 0 50px cyan, 0 0 100px cyan,
	0 0 200px cyan; */
	cursor: pointer;
	font-size: 30px !important;
	border-radius: 100%;
	text-shadow: 0 0 5px cyan, 0 0 25px cyan, 0 0 50px cyan, 0 0 100px cyan,
		0 0 200px cyan;
	/* padding: ; */
}

.avatar {
	filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
	/* Glow effect */
	animation: glow-animation 2s ease-in-out infinite alternate;
	/* Animation for the glow effect */

}

@keyframes glow-animation {
	from {
		filter: drop-shadow(0 0 9px #7510f7);
		/* Initial glow effect */
	}

	to {
		filter: drop-shadow(0 0 10px #a15afd);
		/* Increased glow effect */
	}
}

.w3-display-left {
	position: absolute;
	top: 50%;
	left: 0%;
	transform: translate(0%, -50%);
	-ms-transform: translate(-0%, -50%);
}

.w3-display-left {
	position: absolute;
	top: 50%;
	left: 0%;
	transform: translate(0%, -45%) !important;
	-ms-transform: translate(-0%, -50%);
}

@media (min-width: 666px) {
	.w3-display-left {
		position: absolute;
		top: 50%;
		left: 0%;
		transform: translate(0%, -100%) !important;
		-ms-transform: translate(-0%, -50%);
	}

}

.nav-link:hover {
	transition: 0.4s ease-in-out;
	color: white;
	font-size: 15px;
	/* text-shadow: 0 0 5px #c191ff, 0 0 25px #a465f7, 0 0 50px #8e41f3, 0 0 50px #8e41f3; */
	filter: drop-shadow(0 0 5px #c191ff8f)
		/* First shadow */
		drop-shadow(0 0 10px #2a164698)
		/* Second shadow */
		drop-shadow(0 0 12px #8e41f38a)
		/* Third shadow */
		drop-shadow(0 0 100px #5221918a);
	/* Fourth shadow */
}

.tooltip-container {
	position: relative;
	display: inline-block;
}

.tooltip-text {
	position: absolute;
	bottom: 120%;
	left: 0;
	background: black;
	color: white;
	padding: 5px 8px;
	font-size: 12px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
}

/* Desktop hover */
.tooltip-container:hover .tooltip-text {
	opacity: 1;
}

/* Show on mobile (via JS class) */
.tooltip-container.active .tooltip-text {
	opacity: 1;
}



/* image {
	height: min-content;
} */