@charset "UTF-8";
/* CSS Document */
@import url("https://fonts.googleapis.com/css? family=Raleway:900&display=swap");


*{
	padding:0; 
	margin: 0; 
	box-sizing: border-box}

body, html{ 
	
	background-color:#0F172A;
}
 
@keyframes fadeIn{ 
	from{opacity: 0; 
	}to{ 
	opacity:1; 
	}
}

.intro { 
	text-align: center; 
	transform: translate(0%,  35vh);
	font-size: 84px; 
	word-spacing: -10px;
	color:dimgrey;
	font-family:"Raleway";
	font-weight: bold;
	text-shadow: 0px 5px 2px #000000, 0px -5px 1px #010101 ;
	animation: fadeIn 1s ease-in; 
}
.intro span{
	animation:flippin 4s ; 
	animation-delay: calc(0.1s* var(--i));
	position: relative; 
	display: inline-block; 
	z-index: -2;
}

@keyframes flippin{ 
	0%, 80%{ 
	transform: rotateY(270deg);
		
	}
	0%, 75%{ 
	transform: rotateX(270deg);
	}
}

.navbar{ 
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 18px;
	text-decoration: none;
	text-transform: uppercase;
	background-color:transparent;
	backdrop-filter:blur(5px);
	width: 40%; 
	height: 30px;
	transform:translateX(75%);
	border-radius: 10px;
	display: inline;
	position: fixed; 
	bottom:0; 
	z-index: 2;
	
}/* simple navigation to begin this design*/ 

.navbar input[text=text] {
	float:right; 
	padding: 1px; 
	border: none; 
	font-size:17px;
	background-color: black;
	
	/*to stitch : hide and display the navbar after ckicking the icon*/ 
}

a{ 
	text-align:center;
	word-spacing: 10px;
	text-decoration:none; 
	color:antiquewhite;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; 
	display: inline;
	
	
}
a:hover{ 
	background-color:#393838;
	border-radius:15px; 
	filter:drop-shadow(0px 0px 10px black);
	backdrop-filter:blur(15px);
	
}

.parallax{ 
	background-image: url("download-2026-04-26T11_48_41.jpg");
	opacity: 0.8; 
	min-height:100vh;
	font-size: 24px;
	color: antiquewhite;
	padding: 10px 20px; 
	background-attachment:fixed; 
	top: 0; 
	left: 0;
	background-repeat: no-repeat; 
	background-size: cover;
	width: 100%;
	height: 100%; 

}

.card{ 
	 
	background: rgba(255, 255, 255, 0.05); 
	backdrop-filter: blur(45px); 
	padding: 80px; 
	border-radius: 24px; 
	border: 1px solid rgba(255, 255, 255, 0.1); 
	max-width: 1000px;
	max-heignt: 1000px;
	position: sticky;
	font-size: 36px; 
	font-family: "Raleway";
	color:antiquewhite;
	right: 900px;
	animation: show linear; 
	animation-timeline: view(); 
	animation-range: entry 0% cover 30%; 
	 

}
@keyframes show{ 
	from { 
	opacity: 0; 
	transform: translateY(90px) scale(0.8); 
	filter: blur(10px); 
	}to{ 
	opacity: 1; 
	transform: translateY(0) scale(1); 
	filter: blur(0); 
	}
}


.card-2{ 
	background: rgba(255, 255, 255, 0.05); 
	backdrop-filter: blur(45px); 
	padding: 100px; 
	border-radius: 24px; 
	left: 900px;
	border: 1px solid rgba(255, 255, 255, 0.1); 
	max-width: 900px;
	max-heignt: 750px;
	font-size: 36px; 
	font-family: "Raleway";
	color:antiquewhite;
	z-index: -1; 
	position:sticky;
	animation: showMore linear; 
	animation-timeline: view(); 
	animation-range: entry 0% cover 50%; 

}

@keyframes showMore{ 
	from { 
	opacity: 0; 
	transform: translateY(350px) scale(0.8); 
	filter: blur(10px); 
	}to{ 
	opacity: 1; 
	transform: translateY(0) scale(1); 
	filter: blur(0); 
	}
}

.card-3{ 
	background: rgba(255, 255, 255, 0.05); 
	backdrop-filter: blur(45px); 
	padding: 100px; 
	border-radius: 24px; 
	left: 250px;
	border: 1px solid rgba(255, 255, 255, 0.1); 
	max-width: 900px;
	max-heignt: 750px;
	font-size: 36px; 
	font-family: "Raleway";
	color:antiquewhite;
	z-index: -1; 
	position:sticky;
	animation: showSomeMore linear; 
	animation-timeline: view(); 
	animation-range: entry 0% cover 50%; 

}

@keyframes showSomeMore{ 
	from { 
	opacity: 0; 
	transform: translateY(350px) scale(0.8); 
	filter: blur(10px); 
	}to{ 
	opacity: 1; 
	transform: translateY(0) scale(1); 
	filter: blur(0); 
	}
}