/* Arc Reactor Container */
.arc-reactor {
  position: relative;
  margin: 2rem auto 0;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: pulse 2s infinite;
}

/* Core */
.arc-reactor .core {
  width: 50px;
  height: 50px;
  background: radial-gradient(circle, #66fcf1 0%, #1f2833 80%);
  border: 4px solid #45a29e;
  border-radius: 50%;
  box-shadow: 0 0 20px #45a29e, 0 0 40px #45a29e, 0 0 60px #45a29e;
}

/* Rings */
.arc-reactor .rings {
  position: absolute;
  width: 100%;
  height: 100%;
}

.arc-reactor .ring {
  position: absolute;
  border: 2px solid #45a29e;
  border-radius: 50%;
  animation: spin 4s linear infinite;
}

.arc-reactor .ring:nth-child(1) {
  width: 160px;
  height: 160px;
  animation-duration: 4s;
}

.arc-reactor .ring:nth-child(2) {
  width: 120px;
  height: 120px;
  animation-duration: 3s;
}

.arc-reactor .ring:nth-child(3) {
  width: 80px;
  height: 80px;
  animation-duration: 2s;
}


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

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #0b0c10;
  color: #c5c6c7;
  scroll-behavior: smooth;
}

/* Header */
header {
  position: fixed;
  top: 0;
  width: 100%;
  background: #1f2833;
  color: #66fcf1;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.nav-links li a {
  text-decoration: none;
  color: #66fcf1;
  transition: color 0.3s;
}

.nav-links li a:hover {
  color: #45a29e;
}

/* Hero Section */
#hero {
  height: 100vh;
  background: radial-gradient(circle at center, #1f2833, #0b0c10);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #66fcf1;
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero-content span {
  color: #45a29e;
}

.hero-content .button {
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  border: 2px solid #45a29e;
  color: #45a29e;
  text-decoration: none;
  border-radius: 5px;
  transition: background 0.3s, color 0.3s;
}

.hero-content .glow-button {
  background: #45a29e;
  color: #0b0c10;
  text-shadow: 0 0 10px #45a29e, 0 0 20px #45a29e;
}

.hero-content .glow-button:hover {
  background: #66fcf1;
  color: #1f2833;
  text-shadow: none;
}

/* Sections */
section {
  padding: 4rem 2rem;
  text-align: center;
}

.project-card {
  margin: 1rem auto;
  padding: 1rem;
  border: 1px solid #c5c6c7;
  background: #1f2833;
  border-radius: 5px;
  max-width: 400px;
}

/* Project Links */
.project-links {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

/* Demo Button Styling */
.demo-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #45a29e 0%, #66fcf1 100%);
  color: #0b0c10;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid transparent;
  box-shadow: 0 4px 15px rgba(69, 162, 158, 0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

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

.demo-button:hover::before {
  left: 100%;
}

.demo-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 25px rgba(102, 252, 241, 0.5);
  border-color: #66fcf1;
}

.demo-button:active {
  transform: translateY(-1px);
  box-shadow: 0 3px 15px rgba(69, 162, 158, 0.4);
}

.button-icon {
  font-size: 1.2rem;
  animation: rocketFloat 2s ease-in-out infinite;
}

.button-text {
  letter-spacing: 0.5px;
}

@keyframes rocketFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

.skills-list li {
  margin: 0.5rem 0;
  color: #45a29e;
}

.skills-list .glow {
  text-shadow: 0 0 5px #45a29e, 0 0 10px #45a29e;
}

/* Footer */
footer {
  text-align: center;
  padding: 1rem;
  background: #1f2833;
  color: #c5c6c7;
}

/* Animations */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 1s forwards;
}

.fade-in-delay {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 1s 0.5s forwards;
}

/* Hero Image Section */
.hero-image {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-top: 2rem;
}

/* Profile Picture */
.profile-pic {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2), 0 0 30px rgba(255, 255, 255, 0.4);
  animation: glowPulse 2s infinite;
}

.profile-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Social Links Section */
#social-links {
  text-align: center;
  margin-top: 2rem;
  padding: 2rem;
}

#social-links h2 {
  font-size: 2rem;
  color: #66fcf1;
  margin-bottom: 1rem;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.social-icons a {
  text-decoration: none;
  color: #66fcf1;
  font-size: 1.2rem;
  padding: 0.5rem 1rem;
  border: 2px solid #45a29e;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.3s, color 0.3s, transform 0.3s;
}

.social-icons a:hover {
  background: #45a29e;
  color: #0b0c10;
  transform: scale(1.1);
}

.social-icons .icon i {
  font-size: 1.5rem;
}

/* Email Button Style (inherits from social-icons) */
.social-icons .email {
  color: #f1c40f; /* Golden yellow for email */
  border-color: #f1c40f;
}

.social-icons .email:hover {
  background: #f1c40f;
  color: #0b0c10;
  box-shadow: 0 0 10px #f1c40f, 0 0 20px #f1c40f;
}



/* Glow Pulse Animation */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 10px #66fcf1, 0 0 20px #66fcf1;
  }
  50% {
    box-shadow: 0 0 20px #45a29e, 0 0 40px #45a29e;
  }
}




@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Keyframe Animations */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 20px #45a29e, 0 0 40px #45a29e;
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 30px #66fcf1, 0 0 60px #66fcf1;
  }
}