@charset "utf-8";
/* CSS Document */

/*

TemplateMo 600 Prism Flux

https://templatemo.com/tm-600-prism-flux 
 
*/ 
 
* { 
	margin: 0; 
	padding: 0; 
	box-sizing: border-box; 
} 
 
:root { 
	--primary-black: #07111f; 
	--carbon-dark: #0b1726; 
	--carbon-medium: #102238; 
	--carbon-light: #1a3552; 
	--metal-dark: #2b4d6d; 
	--metal-light: #3d6387; 

	--accent-red: #4db8ff; 
	--accent-blue: #5ecbff; 
	--accent-green: #7ddcff; 
	--accent-purple: #6ac8ff; 
	--accent-cyan: #8de7ff; 
	--text-primary: #ffffff; 
	--text-secondary: #c4d9e8; 
	--text-dim: #8ca8bd; 
}
 
html { 
	scroll-behavior: smooth; 
	width: 100%; 
	max-width: 100%; 
	overflow-x: hidden; 
} 
 
body { 
	font-family: 'Orbitron', 'Rajdhani', sans-serif; 
	background: var(--primary-black); 
	color: var(--text-primary); 
	overflow-x: hidden; 
	position: relative; 
	width: 100%; 
	max-width: 100%; 
} 
 
/* Carbon Fiber Background Pattern */ 
body::before { 
	content: ''; 
	position: fixed; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
	background: 
		repeating-linear-gradient(0deg, 
			transparent, 
			transparent 2px, 
			rgba(255, 255, 255, 0.03) 2px, 
			rgba(255, 255, 255, 0.03) 4px), 
		repeating-linear-gradient(90deg, 
			transparent, 
			transparent 2px, 
			rgba(255, 255, 255, 0.03) 2px, 
			rgba(255, 255, 255, 0.03) 4px), 
		linear-gradient(135deg, 
			var(--primary-black) 0%, 
			var(--carbon-dark) 25%, 
			var(--carbon-medium) 50%, 
			var(--carbon-dark) 75%, 
			var(--primary-black) 100%); 
	z-index: -2; 
} 
 
/* Animated Grid Overlay */ 
body::after { 
	content: ''; 
	position: fixed; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
	background-image: 
		linear-gradient(rgba(255, 51, 51, 0.05) 2px, transparent 2px), 
		linear-gradient(90deg, rgba(255, 51, 51, 0.05) 2px, transparent 2px); 
	background-size: 150px 150px; 
	animation: gridMove 20s linear infinite; 
	z-index: -1; 
	opacity: 0.5; 
} 
 
@keyframes gridMove { 
	0% { 
		transform: translate(0, 0); 
	} 
 
	100% { 
		transform: translate(150px, 150px); 
	} 
} 
 
/* Loading Screen */ 
.loader { 
	position: fixed; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100vh; 
	background: var(--primary-black); 
	display: flex; 
	justify-content: center; 
	align-items: center; 
	z-index: 10000; 
	transition: opacity 0.5s, visibility 0.5s; 
} 
 
.loader.hidden { 
	opacity: 0; 
	visibility: hidden; 
} 
 
.loader-content { 
	text-align: center; 
} 
 
.loader-prism { 
	width: 100px; 
	height: 100px; 
	position: relative; 
	margin: 0 auto 30px; 
} 
 
.prism-face { 
	position: absolute; 
	width: 100%; 
	height: 100%; 
	border: 2px solid transparent; 
	transform-origin: center; 
	animation: prismRotate 3s linear infinite; 
} 
 
.prism-face:nth-child(1) { 
	border-image: linear-gradient(45deg, var(--accent-red), var(--accent-blue)) 1; 
	animation-delay: 0s; 
} 
 
.prism-face:nth-child(2) { 
	border-image: linear-gradient(45deg, var(--accent-blue), var(--accent-green)) 1; 
	transform: rotate(60deg); 
	animation-delay: 0.2s; 
} 
 
.prism-face:nth-child(3) { 
	border-image: linear-gradient(45deg, var(--accent-green), var(--accent-purple)) 1; 
	transform: rotate(120deg); 
	animation-delay: 0.4s; 
} 
 
@keyframes prismRotate { 
	0% { 
		transform: rotate(0deg) scale(1); 
	} 
 
	50% { 
		transform: rotate(180deg) scale(1.2); 
	} 
 
	100% { 
		transform: rotate(360deg) scale(1); 
	} 
} 
 
/* Navigation Header */ 
.header { 
	position: fixed; 
	top: 0; 
	width: 100%; 
	background: linear-gradient(180deg, 
			rgba(18, 18, 18, 0.98) 0%, 
			rgba(18, 18, 18, 0.9) 50%, 
			rgba(18, 18, 18, 0) 100%); 
	backdrop-filter: blur(20px); 
	border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
	z-index: 1000; 
	transition: all 0.3s ease; 
} 
 
.header.scrolled { 
	background: rgba(18, 18, 18, 0.98); 
	backdrop-filter: blur(30px); 
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8); 
} 
 
.nav-container { 
	max-width: 1400px; 
	margin: 0 auto; 
	display: flex; 
	justify-content: space-between; 
	align-items: center; 
	padding: 20px 30px; 
} 
 
.logo { 
	display: flex; 
	align-items: center; 
	text-decoration: none; 
	position: relative; 
} 
 
.logo-icon { 
	width: 45px; 
	height: 45px; 
	margin-right: 15px; 
	position: relative; 
} 
 
/* Prism-inspired logo */ 
.logo-prism { 
	width: 100%; 
	height: 100%; 
	position: relative; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
} 
 
.prism-shape { 
	width: 30px; 
	height: 30px; 
	position: relative; 
	transform: rotate(45deg); 
	background: linear-gradient(135deg, 
			var(--accent-red) 0%, 
			var(--accent-blue) 33%, 
			var(--accent-green) 66%, 
			var(--accent-purple) 100%); 
	animation: prismShine 3s ease-in-out infinite; 
} 
 
@keyframes prismShine { 
 
	0%, 
	100% { 
		filter: brightness(1) hue-rotate(0deg); 
		transform: rotate(45deg) scale(1); 
	} 
 
	50% { 
		filter: brightness(1.5) hue-rotate(10deg); 
		transform: rotate(45deg) scale(1.1); 
	} 
} 
 
.prism-shape::before, 
.prism-shape::after { 
	content: ''; 
	position: absolute; 
	width: 100%; 
	height: 100%; 
	background: inherit; 
	opacity: 0.5; 
} 
 
.prism-shape::before { 
	transform: rotate(60deg); 
} 
 
.prism-shape::after { 
	transform: rotate(-60deg); 
} 
 
.logo-text { 
	font-size: 24px; 
	font-weight: 900; 
	letter-spacing: 2px; 
	text-transform: uppercase; 
} 
 
.logo-text .prism { 
	background: linear-gradient(135deg, var(--text-primary), var(--accent-cyan)); 
	-webkit-background-clip: text; 
	-webkit-text-fill-color: transparent; 
	background-clip: text; 
} 
 
.logo-text .flux { 
	color: var(--text-secondary); 
	font-weight: 300; 
	margin-left: 5px; 
} 
 
.nav-menu { 
	display: flex; 
	list-style: none; 
	gap: 10px; 
	align-items: center; 
} 
 
.nav-menu a { 
	color: var(--text-secondary); 
	text-decoration: none; 
	padding: 12px 25px; 
	transition: all 0.3s ease; 
	position: relative; 
	text-transform: uppercase; 
	font-weight: 500; 
	letter-spacing: 1px; 
	font-size: 14px; 
} 
 
.nav-menu a::before { 
	content: ''; 
	position: absolute; 
	bottom: 0; 
	left: 50%; 
	transform: translateX(-50%); 
	width: 0; 
	height: 2px; 
	background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple)); 
	transition: width 0.3s ease; 
} 
 
.nav-menu a:hover { 
	color: var(--text-primary); 
} 
 
.nav-menu a:hover::before, 
.nav-menu a.active::before { 
	width: 80%; 
} 
 
.nav-menu a.active { 
	color: var(--accent-cyan); 
} 
 
.menu-toggle { 
	display: none; 
	flex-direction: column; 
	cursor: pointer; 
	padding: 5px; 
} 
 
.menu-toggle span { 
	width: 30px; 
	height: 3px; 
	background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple)); 
	margin: 3px 0; 
	transition: 0.3s; 
	border-radius: 2px; 
} 
 
.menu-toggle.active span:nth-child(1) { 
	transform: rotate(-45deg) translate(-5px, 6px); 
} 
 
.menu-toggle.active span:nth-child(2) { 
	opacity: 0; 
} 
 
.menu-toggle.active span:nth-child(3) { 
	transform: rotate(45deg) translate(-5px, -6px); 
} 
 
/* Hero Section with 3D Carousel */ 
.hero { 
	min-height: 100vh; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	position: relative; 
	padding: 120px 20px 80px; 
	background: radial-gradient(ellipse at center, 
			rgba(153, 69, 255, 0.1) 0%, 
			transparent 50%); 
} 
 
.carousel-container { 
	width: 100%; 
	max-width: 1600px; 
	height: 650px; 
	perspective: 1200px; 
	position: relative; 
	padding-top: 60px; 
} 
 
.carousel { 
	width: 100%; 
	height: 100%; 
	position: relative; 
	transform-style: preserve-3d; 
} 
 
.carousel-item { 
	position: absolute; 
	width: 400px; 
	height: 500px; 
	left: 50%; 
	top: 50%; 
	transform-style: preserve-3d; 
	transition: all 0.8s cubic-bezier(0.4, 0.0, 0.2, 1); 
	cursor: pointer; 
	transform-origin: center center; 
} 
 
.carousel-item .card { 
	width: 100%; 
	height: 100%; 
	background: linear-gradient(135deg, var(--carbon-medium), var(--carbon-dark)); 
	border: 2px solid var(--metal-dark); 
	border-radius: 20px; 
	padding: 30px; 
	position: relative; 
	overflow: hidden; 
	box-shadow: 
		0 20px 40px rgba(0, 0, 0, 0.8), 
		inset 0 1px 0 rgba(255, 255, 255, 0.1); 
} 
 
.carousel-item .card::before { 
	content: ''; 
	position: absolute; 
	top: 0; 
	left: 0; 
	right: 0; 
	height: 1px; 
	background: linear-gradient(90deg, 
			transparent, 
			rgba(255, 255, 255, 0.5), 
			transparent); 
	animation: scanline 3s linear infinite; 
} 
 
@keyframes scanline { 
	0% { 
		transform: translateY(0); 
	} 
 
	100% { 
		transform: translateY(500px); 
	} 
} 
 
.card-number { 
	position: absolute; 
	top: 20px; 
	right: 30px; 
	font-size: 72px; 
	font-weight: 900; 
	color: rgba(153, 69, 255, 0.1); 
	font-family: 'Orbitron', monospace; 
} 
 
.card-image { 
	width: 100%; 
	height: 200px; 
	background: var(--carbon-dark); 
	border-radius: 10px; 
	margin-bottom: 20px; 
	overflow: hidden; 
	position: relative; 
	border: 1px solid var(--metal-dark); 
} 
 
.card-image img { 
	width: 100%; 
	height: 100%; 
	object-fit: cover; 
	filter: grayscale(50%) contrast(1.2); 
	transition: all 0.5s ease; 
} 
 
.carousel-item:hover .card-image img { 
	filter: grayscale(0%) contrast(1.3); 
	transform: scale(1.1); 
} 
 
.card-title { 
	font-size: 24px; 
	font-weight: 700; 
	margin-bottom: 15px; 
	text-transform: uppercase; 
	letter-spacing: 2px; 
	background: linear-gradient(135deg, var(--text-primary), var(--accent-purple)); 
	-webkit-background-clip: text; 
	-webkit-text-fill-color: transparent; 
	background-clip: text; 
} 
 
.card-description { 
	color: var(--text-secondary); 
	line-height: 1.6; 
	margin-bottom: 20px; 
	font-size: 14px; 
} 
 
.card-tech { 
	display: flex; 
	flex-wrap: wrap; 
	gap: 8px; 
	margin-bottom: 20px; 
} 
 
.tech-badge { 
	padding: 5px 12px; 
	background: rgba(153, 69, 255, 0.1); 
	border: 1px solid var(--accent-purple); 
	border-radius: 20px; 
	font-size: 12px; 
	color: var(--accent-purple); 
	text-transform: uppercase; 
	letter-spacing: 1px; 
} 
 
.card-cta { 
	padding: 12px 30px; 
	background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue)); 
	border: none; 
	border-radius: 30px; 
	color: var(--text-primary); 
	font-weight: 700; 
	text-transform: uppercase; 
	letter-spacing: 2px; 
	cursor: pointer; 
	transition: all 0.3s ease; 
	box-shadow: 0 5px 15px rgba(153, 69, 255, 0.3); 
} 
 
.card-cta:hover { 
	transform: translateY(-2px); 
	box-shadow: 0 8px 25px rgba(153, 69, 255, 0.5); 
} 
 
/* Carousel Controls */ 
.carousel-controls { 
	position: absolute; 
	bottom: -70px; 
	left: 50%; 
	transform: translateX(-50%); 
	display: flex; 
	gap: 20px; 
	z-index: 100; 
} 
 
.carousel-btn { 
	width: 60px; 
	height: 60px; 
	background: linear-gradient(135deg, var(--carbon-medium), var(--carbon-dark)); 
	border: 2px solid var(--metal-dark); 
	border-radius: 50%; 
	color: var(--accent-purple); 
	font-size: 24px; 
	cursor: pointer; 
	transition: all 0.3s ease; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	box-shadow: 
		0 5px 15px rgba(0, 0, 0, 0.5), 
		inset 0 1px 0 rgba(255, 255, 255, 0.1); 
} 
 
.carousel-btn:hover { 
	border-color: var(--accent-purple); 
	box-shadow: 
		0 8px 25px rgba(153, 69, 255, 0.3), 
		inset 0 1px 0 rgba(255, 255, 255, 0.2); 
	transform: scale(1.1); 
} 
 
.carousel-indicators { 
	position: absolute; 
	top: 30px; 
	left: 50%; 
	transform: translateX(-50%); 
	display: flex; 
	gap: 15px; 
	z-index: 100; 
} 
 
.indicator { 
	width: 12px; 
	height: 12px; 
	background: var(--metal-dark); 
	border: 1px solid var(--metal-light); 
	border-radius: 50%; 
	cursor: pointer; 
	transition: all 0.3s ease; 
} 
 
.indicator.active { 
	background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue)); 
	box-shadow: 0 0 10px rgba(153, 69, 255, 0.5); 
	transform: scale(1.3); 
} 
 
/* NEW: Prism Philosophy Section */ 
.philosophy-section { 
	padding: 120px 30px; 
	background: linear-gradient(180deg, 
			var(--primary-black) 0%, 
			rgba(153, 69, 255, 0.02) 50%, 
			var(--primary-black) 100%); 
	position: relative; 
	overflow: hidden; 
} 
 
.philosophy-container { 
	max-width: 1200px; 
	margin: 0 auto; 
	text-align: center; 
} 
 
/* Animated Prism Line */ 
.prism-line { 
	width: 100%; 
	height: 2px; 
	margin: 0 auto 60px; 
	position: relative; 
	overflow: hidden; 
	background: var(--carbon-medium); 
} 
 
.prism-line::before { 
	content: ''; 
	position: absolute; 
	top: 0; 
	left: -100%; 
	width: 100%; 
	height: 100%; 
	background: linear-gradient(90deg, 
			transparent, 
			var(--accent-red) 20%, 
			var(--accent-blue) 40%, 
			var(--accent-green) 60%, 
			var(--accent-purple) 80%, 
			transparent); 
 
	animation: prismSweep 4s ease-in-out infinite; 
} 
 
@keyframes prismSweep { 
	0% { 
		left: -100%; 
	} 
 
	100% { 
		left: 100%; 
	} 
} 
 
.philosophy-headline { 
	font-size: 56px; 
	font-weight: 900; 
	text-transform: uppercase; 
	letter-spacing: 3px; 
	margin-bottom: 30px; 
	line-height: 1.2; 
	background: linear-gradient(135deg, 
			var(--accent-cyan) 0%, 
			var(--accent-purple) 25%, 
			var(--accent-blue) 50%, 
			var(--accent-green) 75%, 
			var(--accent-cyan) 100%); 
	-webkit-background-clip: text; 
	-webkit-text-fill-color: transparent; 
	background-clip: text; 
	background-size: 200% 200%; 
	animation: gradientFlow 5s ease infinite; 
} 
 
@keyframes gradientFlow { 
	0% { 
		background-position: 0% 50%; 
	} 
 
	50% { 
		background-position: 100% 50%; 
	} 
 
	100% { 
		background-position: 0% 50%; 
	} 
} 
 
.philosophy-subheading { 
	font-size: 20px; 
	color: var(--text-secondary); 
	max-width: 700px; 
	margin: 0 auto 80px; 
	line-height: 1.6; 
	font-weight: 300; 
} 
 
.philosophy-pillars { 
	display: grid; 
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
	gap: 50px; 
	margin-bottom: 60px; 
} 
 
.pillar { 
	position: relative; 
	padding: 40px 30px; 
	background: linear-gradient(135deg, 
			rgba(42, 42, 42, 0.2), 
			rgba(26, 26, 26, 0.3)); 
	border: 1px solid var(--metal-dark); 
	border-radius: 20px; 
	transition: all 0.4s ease; 
	overflow: hidden; 
} 
 
.pillar::before { 
	content: ''; 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 2px; 
	background: linear-gradient(90deg, 
			var(--accent-purple), 
			var(--accent-blue), 
			var(--accent-green)); 
	transform: scaleX(0); 
	transition: transform 0.4s ease; 
} 
 
.pillar:hover::before { 
	transform: scaleX(1); 
} 
 
.pillar:hover { 
	transform: translateY(-10px); 
	border-color: var(--accent-purple); 
	box-shadow: 0 20px 40px rgba(153, 69, 255, 0.2); 
	background: linear-gradient(135deg, 
			rgba(153, 69, 255, 0.05), 
			rgba(26, 26, 26, 0.3)); 
} 
 
.pillar-icon { 
	width: 80px; 
	height: 80px; 
	margin: 0 auto 25px; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	font-size: 40px; 
	position: relative; 
} 
 
.pillar-icon::before { 
	content: ''; 
	position: absolute; 
	width: 100%; 
	height: 100%; 
	background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue)); 
	border-radius: 50%; 
	opacity: 0.2; 
	animation: pulse 3s ease-in-out infinite; 
} 
 
@keyframes pulse { 
 
	0%, 
	100% { 
		transform: scale(1); 
		opacity: 0.2; 
	} 
 
	50% { 
		transform: scale(1.2); 
		opacity: 0.1; 
	} 
} 
 
.pillar-title { 
	font-size: 24px; 
	font-weight: 700; 
	text-transform: uppercase; 
	letter-spacing: 2px; 
	margin-bottom: 15px; 
	color: var(--text-primary); 
} 
 
.pillar-description { 
	font-size: 16px; 
	color: var(--text-secondary); 
	line-height: 1.6; 
} 
 
.pillar-description a { 
	color: var(--accent-cyan); 
	text-decoration: none; 
	transition: all 0.3s ease; 
	position: relative; 
} 
 
.pillar-description a::after { 
	content: ''; 
	position: absolute; 
	bottom: -2px; 
	left: 0; 
	width: 0; 
	height: 1px; 
	background: var(--accent-cyan); 
	transition: width 0.3s ease; 
} 
 
.pillar-description a:hover { 
	color: var(--accent-purple); 
} 
 
.pillar-description a:hover::after { 
	width: 100%; 
} 
 
/* Particle Effect Background */ 
.philosophy-particles { 
	position: absolute; 
	width: 100%; 
	height: 100%; 
	top: 0; 
	left: 0; 
	overflow: hidden; 
	pointer-events: none; 
} 
 
.particle { 
	position: absolute; 
	width: 4px; 
	height: 4px; 
	background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple)); 
	border-radius: 50%; 
	opacity: 0; 
	animation: float-particle 20s infinite linear; 
} 
 
@keyframes float-particle { 
	0% { 
		transform: translateY(0) rotate(0deg); 
		opacity: 0; 
	} 
 
	5% { 
		opacity: 1; 
	} 
 
	95% { 
		opacity: 1; 
	} 
 
	100% { 
		transform: translateY(-100vh) rotate(720deg); 
		opacity: 0; 
	} 
} 
 
/* Stats Section with Content */ 
.stats-section { 
	padding: 120px 30px; 
	background: linear-gradient(180deg, 
			var(--primary-black) 0%, 
			var(--carbon-dark) 50%, 
			var(--primary-black) 100%); 
	position: relative; 
} 
 
.stats-grid { 
	max-width: 1200px; 
	margin: 0 auto; 
	display: grid; 
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
	gap: 40px; 
} 
 
.stat-card { 
	background: linear-gradient(135deg, 
			rgba(42, 42, 42, 0.5), 
			rgba(26, 26, 26, 0.8)); 
	border: 1px solid var(--metal-dark); 
	border-radius: 15px; 
	padding: 40px 30px; 
	text-align: center; 
	position: relative; 
	overflow: hidden; 
	transition: all 0.3s ease; 
} 
 
.stat-card::before { 
	content: ''; 
	position: absolute; 
	top: 0; 
	left: -100%; 
	width: 100%; 
	height: 2px; 
	background: linear-gradient(90deg, 
			transparent, 
			var(--accent-purple), 
			transparent); 
	animation: none; 
} 
 
.stat-card:hover::before { 
	animation: slideRight 0.5s ease forwards; 
} 
 
@keyframes slideRight { 
	0% { 
		left: -100%; 
	} 
 
	100% { 
		left: 100%; 
	} 
} 
 
.stat-card:hover { 
	transform: translateY(-5px); 
	border-color: var(--accent-purple); 
	box-shadow: 0 15px 35px rgba(153, 69, 255, 0.2); 
} 
 
.stat-icon { 
	width: 80px; 
	height: 80px; 
	background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue)); 
	border-radius: 50%; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	margin: 0 auto 20px; 
	font-size: 36px; 
	color: var(--text-primary); 
	box-shadow: 0 10px 25px rgba(153, 69, 255, 0.3); 
} 
 
.stat-number { 
	font-size: 48px; 
	font-weight: 900; 
	color: var(--text-primary); 
	margin-bottom: 10px; 
	font-family: 'Orbitron', monospace; 
} 
 
.stat-label { 
	font-size: 14px; 
	color: var(--text-secondary); 
	text-transform: uppercase; 
	letter-spacing: 2px; 
	margin-bottom: 15px; 
} 
 
.stat-description { 
	font-size: 13px; 
	color: var(--text-dim); 
	line-height: 1.5; 
	padding: 0 10px; 
} 
 
/* Enhanced Skills Section - Technical Arsenal */ 
.skills-section { 
	padding: 120px 30px; 
	background: var(--carbon-dark); 
	position: relative; 
	overflow: hidden; 
} 
 
.skills-container { 
	max-width: 1200px; 
	margin: 0 auto; 
} 
 
.section-header { 
	text-align: center; 
	margin-bottom: 80px; 
} 
 
.section-title { 
	font-size: 48px; 
	font-weight: 900; 
	text-transform: uppercase; 
	letter-spacing: 3px; 
	margin-bottom: 20px; 
	background: linear-gradient(135deg, var(--text-primary), var(--accent-purple)); 
	-webkit-background-clip: text; 
	-webkit-text-fill-color: transparent; 
	background-clip: text; 
} 
 
.section-subtitle { 
	color: var(--text-secondary); 
	font-size: 18px; 
	max-width: 600px; 
	margin: 0 auto; 
} 
 
/* Hexagonal Skills Grid */ 
.skills-hexagon-grid { 
	display: flex; 
	flex-wrap: wrap; 
	justify-content: center; 
	gap: 20px; 
	margin-top: 60px; 
} 
 
.skill-hexagon { 
	width: 200px; 
	height: 230px; 
	position: relative; 
	margin: 30px 10px; 
	cursor: pointer; 
	transition: all 0.3s ease; 
} 
 
.skill-hexagon:hover { 
	transform: translateY(-10px); 
} 
 
.hexagon-inner { 
	width: 100%; 
	height: 100%; 
	position: relative; 
	transform: rotate(30deg); 
	overflow: hidden; 
	border-radius: 20px; 
	background: linear-gradient(135deg, var(--carbon-medium), var(--carbon-light)); 
	border: 2px solid var(--metal-dark); 
} 
 
.skill-hexagon:hover .hexagon-inner { 
	border-color: var(--accent-purple); 
	box-shadow: 0 0 30px rgba(153, 69, 255, 0.5); 
} 
 
.hexagon-content { 
	position: absolute; 
	width: 100%; 
	height: 100%; 
	top: 0; 
	left: 0; 
	transform: rotate(-30deg); 
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	justify-content: center; 
	padding: 20px; 
} 
 
.skill-icon-hex { 
	font-size: 48px; 
	margin-bottom: 15px; 
	color: var(--accent-purple); 
	animation: float 3s ease-in-out infinite; 
} 
 
@keyframes float { 
 
	0%, 
	100% { 
		transform: translateY(0); 
	} 
 
	50% { 
		transform: translateY(-10px); 
	} 
} 
 
.skill-name-hex { 
	font-size: 16px; 
	font-weight: 700; 
	text-transform: uppercase; 
	letter-spacing: 1px; 
	color: var(--text-primary); 
	margin-bottom: 10px; 
	text-align: center; 
} 
 
.skill-level { 
	width: 100%; 
	height: 4px; 
	background: var(--carbon-dark); 
	border-radius: 2px; 
	overflow: hidden; 
	position: relative; 
} 
 
.skill-level-fill { 
	height: 100%; 
	background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple)); 
	border-radius: 2px; 
	position: relative; 
	animation: fillLevel 2s ease-out; 
} 
 
@keyframes fillLevel { 
	0% { 
		width: 0; 
	} 
} 
 
.skill-percentage-hex { 
	font-size: 14px; 
	color: var(--text-secondary); 
	margin-top: 8px; 
	font-weight: 600; 
} 
 
/* Skill Categories Tabs */ 
.skill-categories { 
	display: flex; 
	justify-content: center; 
	gap: 20px; 
	margin-bottom: 40px; 
	flex-wrap: wrap; 
} 
 
.category-tab { 
	padding: 12px 30px; 
	background: var(--carbon-medium); 
	border: 1px solid var(--metal-dark); 
	border-radius: 30px; 
	color: var(--text-secondary); 
	cursor: pointer; 
	transition: all 0.3s ease; 
	text-transform: uppercase; 
	font-size: 14px; 
	letter-spacing: 1px; 
} 
 
.category-tab:hover { 
	background: rgba(153, 69, 255, 0.1); 
	border-color: var(--accent-purple); 
	color: var(--text-primary); 
} 
 
.category-tab.active { 
	background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue)); 
	border-color: var(--accent-purple); 
	color: var(--text-primary); 
	box-shadow: 0 5px 20px rgba(153, 69, 255, 0.3); 
} 
 
/* Contact Section */ 
.contact-section { 
	padding: 120px 30px; 
	background: linear-gradient(180deg, 
			var(--carbon-dark) 0%, 
			var(--primary-black) 100%); 
	position: relative; 
} 
 
.contact-container { 
	max-width: 1200px; 
	margin: 0 auto; 
	display: grid; 
	grid-template-columns: 1fr 1fr; 
	gap: 60px; 
	align-items: start; 
} 
 
.contact-info { 
	padding: 40px; 
	background: linear-gradient(135deg, 
			rgba(42, 42, 42, 0.3), 
			rgba(26, 26, 26, 0.5)); 
	border: 1px solid var(--metal-dark); 
	border-radius: 20px; 
} 
 
.info-item { 
	display: flex; 
	align-items: center; 
	margin-bottom: 30px; 
	padding: 20px; 
	background: var(--carbon-dark); 
	border-radius: 10px; 
	transition: all 0.3s ease; 
	text-decoration: none; 
	cursor: pointer; 
	position: relative; 
	overflow: hidden; 
} 
 
.info-item::before { 
	content: ''; 
	position: absolute; 
	top: 0; 
	left: -100%; 
	width: 100%; 
	height: 100%; 
	background: linear-gradient(90deg, 
			transparent, 
			rgba(153, 69, 255, 0.1), 
			transparent); 
	transition: left 0.5s ease; 
} 
 
.info-item:hover::before { 
	left: 100%; 
} 
 
.info-item:hover { 
	transform: translateX(10px); 
	background: rgba(153, 69, 255, 0.1); 
	box-shadow: 0 5px 20px rgba(153, 69, 255, 0.2); 
} 
 
a.info-item { 
	color: inherit; 
	text-decoration: none; 
} 
 
.info-icon { 
	width: 50px; 
	height: 50px; 
	background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue)); 
	border-radius: 50%; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	margin-right: 20px; 
	color: var(--text-primary); 
	font-size: 20px; 
	flex-shrink: 0; 
	transition: all 0.3s ease; 
} 
 
.info-item:hover .info-icon { 
	transform: scale(1.1) rotate(10deg); 
	box-shadow: 0 8px 25px rgba(153, 69, 255, 0.4); 
} 
 
.info-text h4 { 
	color: var(--text-primary); 
	margin-bottom: 5px; 
	font-size: 16px; 
	text-transform: uppercase; 
	letter-spacing: 1px; 
	transition: all 0.3s ease; 
} 
 
.info-item:hover .info-text h4 { 
	color: var(--accent-cyan); 
} 
 
.info-text p { 
	color: var(--text-secondary); 
	font-size: 14px; 
	transition: all 0.3s ease; 
} 
 
.info-item:hover .info-text p { 
	color: var(--text-primary); 
} 
 
/* Add external link indicator for clickable items */ 
.info-item[target="_blank"] .info-text p::after { 
	content: ' ↗'; 
	font-size: 12px; 
	opacity: 0; 
	transition: opacity 0.3s ease; 
} 
 
.info-item[target="_blank"]:hover .info-text p::after { 
	opacity: 1; 
} 
 
.contact-form { 
	padding: 40px; 
	background: linear-gradient(135deg, 
			rgba(42, 42, 42, 0.3), 
			rgba(26, 26, 26, 0.5)); 
	border: 1px solid var(--metal-dark); 
	border-radius: 20px; 
} 
 
.form-group { 
	margin-bottom: 25px; 
} 
 
.form-group label { 
	display: block; 
	color: var(--text-secondary); 
	margin-bottom: 10px; 
	text-transform: uppercase; 
	font-size: 12px; 
	letter-spacing: 1px; 
} 
 
.form-group input, 
.form-group textarea { 
	width: 100%; 
	padding: 15px; 
	background: var(--carbon-dark); 
	border: 1px solid var(--metal-dark); 
	border-radius: 8px; 
	color: var(--text-primary); 
	font-size: 14px; 
	transition: all 0.3s ease; 
} 
 
.form-group input:focus, 
.form-group textarea:focus { 
	outline: none; 
	border-color: var(--accent-purple); 
	box-shadow: 0 0 10px rgba(153, 69, 255, 0.2); 
} 
 
.form-group textarea { 
	resize: vertical; 
	min-height: 120px; 
} 
 
.submit-btn { 
	width: 100%; 
	padding: 15px; 
	background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue)); 
	border: none; 
	border-radius: 8px; 
	color: var(--text-primary); 
	font-size: 16px; 
	font-weight: 700; 
	text-transform: uppercase; 
	letter-spacing: 2px; 
	cursor: pointer; 
	transition: all 0.3s ease; 
	box-shadow: 0 5px 15px rgba(153, 69, 255, 0.3); 
} 
 
.submit-btn:hover { 
	transform: translateY(-3px); 
	box-shadow: 0 8px 25px rgba(153, 69, 255, 0.5); 
} 
 
/* Footer */ 
.footer { 
	padding: 60px 30px 30px; 
	background: var(--primary-black); 
	border-top: 1px solid var(--metal-dark); 
	position: relative; 
	width: 100%; 
	max-width: 100%; 
	overflow: hidden; 
} 
 
.footer-content { 
	max-width: 1200px; 
	width: 100%; 
	margin: 0 auto 40px; 
	display: grid; 
	grid-template-columns: 2fr 1fr 1fr 1fr; 
	gap: 40px; 
} 
 
.footer-brand { 
	display: flex; 
	flex-direction: column; 
	gap: 20px; 
} 
 
.footer-logo { 
	display: flex; 
	align-items: center; 
	margin-bottom: 15px; 
} 
 
.footer-description { 
	color: var(--text-secondary); 
	line-height: 1.6; 
	font-size: 14px; 
} 
 
.footer-social { 
	display: flex; 
	gap: 15px; 
} 
 
.social-icon { 
	width: 40px; 
	height: 40px; 
	background: var(--carbon-medium); 
	border: 1px solid var(--metal-dark); 
	border-radius: 50%; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	color: var(--text-secondary); 
	text-decoration: none; 
	transition: all 0.3s ease; 
} 
 
.social-icon:hover { 
	background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue)); 
	border-color: var(--accent-purple); 
	color: var(--text-primary); 
	transform: translateY(-3px); 
	box-shadow: 0 5px 15px rgba(153, 69, 255, 0.3); 
} 
 
.footer-section h4 { 
	color: var(--text-primary); 
	margin-bottom: 20px; 
	text-transform: uppercase; 
	letter-spacing: 1px; 
	font-size: 16px; 
} 
 
.footer-links { 
	display: flex; 
	flex-direction: column; 
	gap: 10px; 
} 
 
.footer-links a { 
	color: var(--text-secondary); 
	text-decoration: none; 
	transition: all 0.3s ease; 
	font-size: 14px; 
} 
 
.footer-links a:hover { 
	color: var(--accent-purple); 
	padding-left: 10px; 
} 
 
.footer-bottom { 
	padding-top: 30px; 
	border-top: 1px solid var(--metal-dark); 
	display: flex; 
	justify-content: center; 
	align-items: center; 
	max-width: 1200px; 
	width: 100%; 
	margin: 0 auto; 
} 
 
.copyright { 
	color: var(--text-dim); 
	font-size: 14px; 
	text-align: center; 
	width: 100%; 
} 
 
.footer-credits { 
	color: var(--text-dim); 
	font-size: 14px; 
} 
 
.footer-credits a { 
	color: var(--accent-purple); 
	text-decoration: none; 
} 
 
.footer-credits a:hover { 
	text-decoration: underline; 
} 
/* أزرار الاتصال والواتساب العائمة */

.floating-btn {
    position: fixed;
    bottom: 25px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    font-size: 22px;
    z-index: 9999;
}

.call-btn {
    right: 25px;
    background: #00a8ff;
}

.whatsapp-btn {
    left: 25px;
    background: #00ff88;
}

.floating-btn:hover {
    transform: scale(1.1);
}
 
/* Responsive Design */ 
@media (max-width: 1024px) { 
	.carousel-item { 
		width: 350px; 
		height: 480px; 
	} 
 
	.carousel-controls { 
		bottom: -60px; 
	} 
 
	.card-image { 
		height: 170px; 
	} 
 
	.card-title { 
		font-size: 22px; 
	} 
 
	.card-description { 
		font-size: 13px; 
	} 
 
	.philosophy-pillars { 
		grid-template-columns: 1fr; 
	} 
 
	.contact-container { 
		grid-template-columns: 1fr; 
	} 
 
	.footer-content { 
		grid-template-columns: repeat(2, 1fr); 
	} 
} 
 
@media (max-width: 768px) { 
	.menu-toggle { 
		display: flex; 
	} 
 
	.nav-menu { 
		position: fixed; 
		left: -100%; 
		top: 85px; 
		flex-direction: column; 
		background: rgba(18, 18, 18, 0.98); 
		width: 100%; 
		text-align: center; 
		transition: 0.3s; 
		padding: 40px 0; 
		border-bottom: 1px solid var(--metal-dark); 
		gap: 0; 
	} 
 
	.nav-menu li { 
		margin: 15px 0; 
	} 
 
	.nav-menu a { 
		display: block; 
		padding: 15px 30px; 
		font-size: 16px; 
	} 
 
	.nav-menu.active { 
		left: 0; 
	} 
 
	.carousel-item { 
		width: 300px; 
		height: 460px; 
	} 
 
	.carousel-item .card { 
		padding: 20px; 
	} 
 
	.card-image { 
		height: 150px; 
		margin-bottom: 15px; 
	} 
 
	.card-title { 
		font-size: 20px; 
		margin-bottom: 12px; 
	} 
 
	.card-description { 
		font-size: 13px; 
		margin-bottom: 15px; 
	} 
 
	.card-tech { 
		margin-bottom: 15px; 
		gap: 6px; 
	} 
 
	.tech-badge { 
		padding: 4px 10px; 
		font-size: 11px; 
	} 
 
	.card-number { 
		font-size: 50px; 
		top: 15px; 
		right: 20px; 
	} 
 
	.card-cta { 
		padding: 10px 25px; 
		font-size: 14px; 
	} 
 
	.carousel-controls { 
		bottom: -60px; 
		gap: 15px; 
	} 
 
	.carousel-btn { 
		width: 50px; 
		height: 50px; 
		font-size: 20px; 
	} 
 
	.carousel-indicators { 
		top: 20px; 
		gap: 12px; 
	} 
 
	.indicator { 
		width: 10px; 
		height: 10px; 
	} 
 
	.philosophy-headline { 
		font-size: 36px; 
	} 
 
	.section-title { 
		font-size: 32px; 
	} 
 
	.stats-grid { 
		grid-template-columns: 1fr; 
	} 
 
	.skill-hexagon { 
		width: 150px; 
		height: 170px; 
		margin: 20px 5px; 
	} 
 
	.skill-icon-hex { 
		font-size: 36px; 
	} 
 
	.skill-name-hex { 
		font-size: 14px; 
	} 
 
	.footer-content { 
		grid-template-columns: 1fr; 
		text-align: center; 
	} 
 
	.footer-bottom { 
		flex-direction: column; 
		gap: 20px; 
		text-align: center; 
	} 
}