@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Inter', sans-serif;
}

body {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
	padding: 20px;
	position: relative;
	overflow-x: hidden;
}

/* Utility Classes */
.position-relative { position: relative; }
.d-flex { display: flex; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.align-items-center { align-items: center; }
.w100 { width: 100px; }
.w120 { width: 120px; }
.w150 { width: 150px; }
.w200 { width: 200px; }
.w100p { width: 100%; }
.w75p { width: 75%; }
.w50p { width: 50%; }
.w25p { width: 25%; }
.gap4 { gap: 10px; }
.gap5 { gap: 20px; }
.m0 { margin: 0 !important; }
.mb2 { margin-bottom: 5px; }
.mb3 { margin-bottom: 10px; }
.mb4 { margin-bottom: 20px; }
.mt4 { margin-top: 20px; }
.mt5 { margin-top: 30px; }
.mt6 { margin-top: 45px; }
.pt-3 { padding-top: 15px; }
.text-center { text-align: center; }
.opacity7 { opacity: .7; }

/* Animated Background */
.background-code {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: 
		radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.15) 0%, transparent 50%),
		radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.15) 0%, transparent 50%),
		radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.1) 0%, transparent 50%);
	z-index: -1;
	pointer-events: none;
}

/* Floating Particles */
#stars, #stars2, #stars3 {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
}

#stars {
	width: 1px;
	height: 1px;
	background: transparent;
	box-shadow: 
		1487px 822px rgba(255, 255, 255, 0.2),
		702px 619px rgba(255, 255, 255, 0.2),
		579px 76px rgba(255, 255, 255, 0.2),
		881px 14px rgba(255, 255, 255, 0.2),
		1903px 741px rgba(255, 255, 255, 0.2),
		1401px 1791px rgba(255, 255, 255, 0.2),
		1316px 857px rgba(255, 255, 255, 0.2),
		1628px 1376px rgba(255, 255, 255, 0.2),
		1641px 781px rgba(255, 255, 255, 0.2),
		1421px 25px rgba(255, 255, 255, 0.2);
	animation: animStar 50s linear infinite;
}

#stars2 {
	width: 2px;
	height: 2px;
	background: transparent;
	box-shadow: 
		592px 134px rgba(255, 255, 255, 0.15),
		346px 741px rgba(255, 255, 255, 0.15),
		1000px 1781px rgba(255, 255, 255, 0.15),
		996px 728px rgba(255, 255, 255, 0.15),
		1085px 1462px rgba(255, 255, 255, 0.15),
		526px 1128px rgba(255, 255, 255, 0.15),
		1951px 557px rgba(255, 255, 255, 0.15),
		673px 92px rgba(255, 255, 255, 0.15),
		415px 776px rgba(255, 255, 255, 0.15),
		1570px 643px rgba(255, 255, 255, 0.15);
	animation: animStar 100s linear infinite;
}

#stars3 {
	width: 3px;
	height: 3px;
	background: transparent;
	box-shadow: 
		222px 946px rgba(255, 255, 255, 0.1),
		408px 926px rgba(255, 255, 255, 0.1),
		1608px 1741px rgba(255, 255, 255, 0.1),
		1977px 1436px rgba(255, 255, 255, 0.1),
		713px 1152px rgba(255, 255, 255, 0.1),
		139px 39px rgba(255, 255, 255, 0.1),
		497px 1590px rgba(255, 255, 255, 0.1),
		1808px 1652px rgba(255, 255, 255, 0.1),
		598px 667px rgba(255, 255, 255, 0.1),
		1962px 75px rgba(255, 255, 255, 0.1);
	animation: animStar 150s linear infinite;
}

@keyframes animStar {
	from { transform: translateY(0px); }
	to { transform: translateY(-2000px); }
}

/* Main Card Container */
.vcard {
	width: 1200px;
	max-width: 100%;
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(20px);
	border-radius: 24px;
	box-shadow: 
		0 25px 50px rgba(0, 0, 0, 0.25),
		0 0 0 1px rgba(255, 255, 255, 0.1);
	overflow: hidden;
	color: white;
	display: flex;
	position: relative;
	animation: slideUp 0.8s ease-out;
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.leftside {
	width: 35%;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
	border-right: 1px solid rgba(255, 255, 255, 0.1);
	position: relative;
}

.rightside {
	width: 65%;
	background: rgba(255, 255, 255, 0.02);
}

/* Header Section */
.vcard-header {
	padding: 40px 30px;
	text-align: center;
	position: relative;
}

.profile-pic {
	width: 163px;
	height: 160px;
	border-radius: 50%;
	margin: 0 auto 25px;
	overflow: visible;
	position: relative;
	border: 4px solid #1a8095;
	box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
	animation: profileGlow 3s ease-in-out infinite alternate;
	opacity: .9;
}

@keyframes profileGlow {
	0% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.3); }
	100% { box-shadow: 0 0 30px rgba(0, 212, 255, 0.6); }
}

.profile-pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
	background-color: #f0f0f0;
	position: relative;
	z-index: 1;
	transform: scale(.94);
}

.vcard-header h2 {
	font-size: 1.8rem;
	font-weight: 700;
	margin-bottom: 8px;
	background: linear-gradient(45deg, #00d4ff, #0099cc);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.vcard-header h3 {
	font-size: 1.1rem;
	font-weight: 500;
	color: #a0a0a0;
	margin-bottom: 25px;
	font-family: 'Fira Code', monospace;
}

/* Contact Info */
.contact-info {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 30px;
}

.contact-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: all 0.3s ease;
	cursor: pointer;
	width: 100%;
}

.contact-item:hover {
	background: rgba(0, 212, 255, 0.1);
	border-color: rgba(0, 212, 255, 0.3);
	transform: translateX(5px);
}

.contact-item i {
	font-size: 16px;
	color: #00d4ff;
	width: 20px;
}

.contact-item span {
	font-size: 0.9rem;
	color: #e0e0e0;
}

/* About Section */
.about {
	margin-top: 30px;
	text-align: left;
}

.about h3 {
	margin: 20px 0 15px;
	font-size: 1.3rem;
	color: #00d4ff;
	font-weight: 600;
}

.about p {
	font-size: 0.95rem;
	color: #b0b0b0;
	line-height: 1.6;
	margin-bottom: 20px;
}

.languages {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}

.languages img {
	width: 120px;
	opacity: 0.8;
	transition: opacity 0.3s ease;
}

.languages img:hover {
	opacity: 1;
}

/* Right Side Content */
.vcard-body {
	padding: 40px;
}

.section {
	margin-bottom: 40px;
}

.section-title {
	font-size: 1.6rem;
	margin-bottom: 25px;
	color: #00d4ff;
	position: relative;
	padding-left: 30px;
	font-weight: 600;
}

.section-title::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 12px;
	background: linear-gradient(45deg, #00d4ff, #0099cc);
	border-radius: 50%;
	box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

/* Experience Section */
.experience-item {
	margin-bottom: 25px;
	padding: 20px;
	background: rgba(255, 255, 255, 0.03);
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	transform: translateX(-30px);
	opacity: 0;
	animation: slideIn 0.6s forwards;
}

@keyframes slideIn {
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.experience-item:nth-child(2) { animation-delay: 0.1s; }
.experience-item:nth-child(3) { animation-delay: 0.2s; }

.position {
	font-size: 1.2rem;
	font-weight: 600;
	color: #00d4ff;
	margin-bottom: 8px;
}

.date {
	font-size: 0.9rem;
	color: #888;
	font-family: 'Fira Code', monospace;
}

/* Skills Section */
.skills-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 25px;
}

.skill-item {
	margin-bottom: 20px;
	padding: 15px;
	background: rgba(255, 255, 255, 0.03);
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: all 0.3s ease;
}

.skill-item:hover {
	background: rgba(0, 212, 255, 0.05);
	border-color: rgba(0, 212, 255, 0.2);
	transform: translateY(-2px);
}

.skill-name {
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
	font-weight: 500;
	color: #e0e0e0;
}

.skill-name span:last-child {
	color: #00d4ff;
	font-family: 'Fira Code', monospace;
	font-size: 0.9rem;
}

.skill-bar {
	height: 8px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 4px;
	overflow: hidden;
	position: relative;
}

.skill-progress {
	height: 100%;
	background: linear-gradient(90deg, #00d4ff, #0099cc);
	border-radius: 4px;
	width: 0;
	transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
}

.skill-progress::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	animation: shimmer 2s infinite;
}

@keyframes shimmer {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

/* Experience List */
.experience-list {
	list-style-type: none;
	margin-top: 20px;
}

.experience-list li {
	position: relative;
	padding-left: 25px;
	margin-bottom: 10px;
	line-height: 1.6;
	color: #b0b0b0;
	font-size: 0.95rem;
}

.experience-list li::before {
	content: '▹';
	position: absolute;
	left: 0;
	color: #00d4ff;
	font-weight: bold;
}

/* Portfolio Section */
.swiper {
	width: 100%;
	padding: 20px 15px;
	/* height: 340px; */
	border-radius: 16px;
	/* overflow: hidden; */
}
.swiper-wrapper {
	height: inherit !important;
}

.swiper-slide {
	text-align: center;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 16px;
	overflow: hidden;
	transition: all 0.3s ease;
	border: 1px solid rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	display: block;
	border-radius: 16px;
}

.swiper-slide:hover {
	transform: translateY(-8px);
	box-shadow: 0 15px 40px rgba(0, 212, 255, 0.3);
	border-color: rgba(0, 212, 255, 0.4);
}

/* Project Card Styles */
.project-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: rgba(255, 255, 255, 0.03);
	border-radius: 16px;
	overflow: hidden;
	position: relative;
	border-radius: 16px;
}

.project-image {
	/* height: 265px; */
	overflow: hidden;
	position: relative;
	background: rgba(255, 255, 255, 0.02);
	border-radius: 16px;
}

.project-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.project-card:hover .project-image img {
	transform: scale(1.1);
}

.project-card:hover .project-info {
	transform: translateY(0);
}

.project-info {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20px;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(10px);
	display: flex;
	flex-direction: column;
	gap: 8px;
	transform: translateY(100%);
	transition: transform 0.3s ease;
	border-radius: 0 0 16px 16px;
}

.project-title {
	font-size: 1.1rem;
	font-weight: 600;
	color: #00d4ff;
	margin: 0;
	text-align: center;
}

.project-category {
	font-size: 0.85rem;
	color: #e0e0e0;
	margin: 0 0 10px 0;
	text-align: center;
	font-family: 'Fira Code', monospace;
}

.project-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 16px;
	background: linear-gradient(45deg, #00d4ff, #0099cc);
	color: white;
	text-decoration: none;
	border-radius: 20px;
	font-size: 0.8rem;
	font-weight: 500;
	transition: all 0.3s ease;
	border: none;
	cursor: pointer;
	text-align: center;
	margin: 0 auto;
}

.project-link:hover {
	background: linear-gradient(45deg, #0099cc, #00d4ff);
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4);
	color: white;
	text-decoration: none;
}

.project-link i {
	font-size: 0.8rem;
}

.swiper-pagination {
	margin-top: 20px;
}

.swiper-pagination-bullet {
	background: rgba(255, 255, 255, 0.3);
	opacity: 1;
}

.swiper-pagination-bullet-active {
	background: #00d4ff;
}

/* Responsive Design */
@media (max-width: 1024px) {
	.vcard {
		width: 95%;
		flex-direction: column;
	}
	
	.leftside, .rightside {
		width: 100%;
	}
	
	.leftside {
		border-right: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}
	
	.skills-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	body {
		padding: 10px;
	}
	
	.vcard-header {
		padding: 30px 20px;
	}
	
	.vcard-body {
		padding: 30px 20px;
	}
	
	.profile-pic {
		width: 140px;
		height: 140px;
	}
	
	.vcard-header h2 {
		font-size: 1.5rem;
	}
	
	.section-title {
		font-size: 1.4rem;
	}
	
	.contact-info {
		flex-direction: column;
		align-items: center;
	}
	
	.languages {
		justify-content: center;
	}
	
	.languages, .langh3 {
		display: none;
	}
	
	/* Portfolio responsive */
	.swiper {
		height: 300px;
	}
	
	/* .project-image {
		height: 180px;
	}
	 */
	.project-info {
		padding: 15px;
		transform: translateY(0);
	}
	
	.project-title {
		font-size: 1rem;
	}
	
	.project-category {
		font-size: 0.8rem;
	}
	
	.project-link {
		padding: 6px 12px;
		font-size: 0.75rem;
	}
	
	.swiper-slide {
		background: none;
		border: 1px solid transparent;
	}
	.project-card {
		height: auto !important;
		background: none !important;
	}

	
	
	
}

/* Custom Scrollbar */
* {
	scrollbar-width: thin;
	scrollbar-color: #00d4ff #1a1a2e;
}

*::-webkit-scrollbar {
	width: 8px;
}

*::-webkit-scrollbar-track {
	background: #1a1a2e;
}

*::-webkit-scrollbar-thumb {
	background: linear-gradient(45deg, #00d4ff, #0099cc);
	border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(45deg, #0099cc, #00d4ff);
}

/* Enhanced hover effects */
.contact-item:hover {
	background: rgba(0, 212, 255, 0.15);
	border-color: rgba(0, 212, 255, 0.4);
	transform: translateX(8px) scale(1.02);
	box-shadow: 0 8px 25px rgba(0, 212, 255, 0.2);
}

.skill-item:hover {
	background: rgba(0, 212, 255, 0.08);
	border-color: rgba(0, 212, 255, 0.3);
	transform: translateY(-3px);
	box-shadow: 0 10px 30px rgba(0, 212, 255, 0.15);
}

/* Enhanced profile picture */
.profile-pic::before {
	content: '';
	position: absolute;
	top: -4px;
	left: -4px;
	right: -4px;
	bottom: -4px;
	background: linear-gradient(45deg, #00d4ff, #0099cc, #00d4ff);
	border-radius: 50%;
	z-index: -1;
	animation: rotate 3s linear infinite;
	opacity: 0.8;
}

@keyframes rotate {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Enhanced section titles */
.section-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -8px;
	width: 40px;
	height: 2px;
	background: linear-gradient(90deg, #00d4ff, transparent);
	border-radius: 1px;
}

/* Enhanced skill bars */
.skill-bar {
	position: relative;
	overflow: hidden;
}

.skill-bar::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
	transform: translateX(-100%);
	animation: shimmer 2s infinite;
}

/* Enhanced portfolio slides with overlay effect */
.project-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(45deg, rgba(0, 212, 255, 0.1), transparent);
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 1;
	pointer-events: none;
	border-radius: 16px;
}

.project-card:hover::before {
	opacity: 1;
}

/* Enhanced responsive design */
@media (max-width: 480px) {
	.vcard {
		margin: 10px;
		border-radius: 16px;
	}
	
	.vcard-header {
		padding: 25px 20px;
	}
	
	.vcard-body {
		padding: 25px 20px;
	}
	
	.profile-pic {
		width: 120px;
		height: 120px;
	}
	
	.vcard-header h2 {
		font-size: 1.4rem;
	}
	
	.section-title {
		font-size: 1.3rem;
	}
	
	.skills-grid {
		grid-template-columns: 1fr;
		gap: 15px;
	}
	
	/* Portfolio responsive for small screens */
	.swiper {
		height: 280px;
	}
	
	/* .project-image {
		height: 160px;
	} */
	
	.project-info {
		padding: 12px;
		transform: translateY(0);
	}
	
	.project-title {
		font-size: 0.9rem;
		margin-bottom: 6px;
	}
	
	.project-category {
		font-size: 0.75rem;
		margin-bottom: 12px;
	}
	
	.project-link {
		padding: 5px 10px;
		font-size: 0.7rem;
	}
		.swiper-slide {
		background: none;
		border: 1px solid transparent;
	}
	.project-card {
		height: auto !important;
		background: none !important;
	}
}

/* Loading Animation */
body:not(.loaded) {
	overflow: hidden;
}

body:not(.loaded)::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
}

body:not(.loaded)::after {
	content: '';
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50px;
	height: 50px;
	border: 3px solid rgba(0, 212, 255, 0.3);
	border-top: 3px solid #00d4ff;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	z-index: 10000;
}

@keyframes spin {
	0% { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Background Toggle Button */
.bg-toggle-btn {
	position: fixed;
	top: 20px;
	right: 20px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: rgba(0, 212, 255, 0.2);
	border: 2px solid rgba(0, 212, 255, 0.3);
	color: #00d4ff;
	font-size: 18px;
	cursor: pointer;
	transition: all 0.3s ease;
	z-index: 1000;
	backdrop-filter: blur(10px);
	display:none;
}

.bg-toggle-btn:hover {
	background: rgba(0, 212, 255, 0.3);
	border-color: rgba(0, 212, 255, 0.5);
	transform: scale(1.1);
	box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}

.bg-toggle-btn.active {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.3);
	color: #fff;
}

/* Background States */
.background-code.disabled {
	opacity: 0;
	pointer-events: none;
}

.background-code.disabled #stars,
.background-code.disabled #stars2,
.background-code.disabled #stars3 {
	animation-play-state: paused;
}

/* Print styles */
@media print {
	.background-code,
	#stars,
	#stars2,
	#stars3,
	.bg-toggle-btn {
		display: none;
	}
	
	.vcard {
		box-shadow: none;
		border: 1px solid #ccc;
	}
	
	body {
		background: white;
		color: black;
	}
	
	.vcard-header h2,
	.section-title {
		color: #333;
	}
}