/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", system-ui, sans-serif;
}

/* Navbar container */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;
  gap: 2.5rem;

  padding: 1rem 2rem;

  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* Nav links */
.navbar a {
  position: relative;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  color: #ffffffcc;

  padding: 0.4rem 0.2rem;
  transition: color 0.3s ease;
}

/* Hover text glow */
.navbar a:hover {
  color: #00f5ff;
}

/* Animated underline */
.navbar a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;

  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #00f5ff, #7cffcb);

  transition: all 0.35s ease;
  transform: translateX(-50%);
  border-radius: 50px;
}

.navbar a:hover::after {
  width: 100%;
}

/* Active link (add class via JS for SPA) */
.navbar a.active {
  color: #7cffcb;
}

.navbar a.active::after {
  width: 100%;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
  .navbar {
    gap: 1.4rem;
    padding: 0.8rem 1rem;
  }

  .navbar a {
    font-size: 0.95rem;
  }
}

/* Page background example (optional but recommended) */
body {
  min-height: 100vh;
  background: radial-gradient(circle at top, #0f2027, #000);
}

/* Hero Section */
.hero {
  min-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;

  text-align: center;
  padding: 2rem 1.5rem;

  color: #ffffff;
}

/* Main Heading */
.hero h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: -1px;

  background: linear-gradient(90deg, #00f5ff, #7cffcb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: fadeUp 0.9s ease forwards;
}

/* Subtitle */
.hero .subtitle {
  margin-top: 1rem;
  max-width: 620px;

  font-size: 1.1rem;
  line-height: 1.7;
  color: #ffffffb3;

  animation: fadeUp 1.2s ease forwards;
}

/* Feature line */
.hero .features {
  margin-top: 1.6rem;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.5px;

  color: #7cffcb;

  display: flex;
  align-items: center;
  gap: 0.6rem;

  animation: fadeUp 1.5s ease forwards;
}

.hero .features span {
  color: #ffffff55;
}

/* Soft glow accent behind text */
.hero::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(0,245,255,0.25), transparent 60%);
  filter: blur(90px);
  z-index: -1;
}

/* Animations */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile tweaks */
@media (max-width: 600px) {
  .hero .features {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Shared page section */
.page-section {
  max-width: 900px;
  margin: 4rem auto;
  padding: 3rem 2rem;

  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);

  color: #ffffff;
  text-align: center;

  animation: fadeUp 0.8s ease forwards;
}

/* Page headings */
.page-section h1 {
  font-size: clamp(2.2rem, 4vw, 3rem);
  margin-bottom: 1.5rem;
  font-weight: 700;

  background: linear-gradient(90deg, #00f5ff, #7cffcb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Paragraphs */
.page-section p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #ffffffb3;
  margin-bottom: 0.8rem;
}

/* Highlight values (email / phone) */
.page-section p span {
  color: #7cffcb;
  font-weight: 500;
}

/* Contact section tweak */
.page-section.contact p {
  font-size: 1.1rem;
}

/* Hover glow effect */
.page-section:hover {
  box-shadow: 0 0 60px rgba(0, 245, 255, 0.15);
  transition: box-shadow 0.4s ease;
}

/* Mobile optimization */
@media (max-width: 600px) {
  .page-section {
    margin: 2.5rem 1rem;
    padding: 2rem 1.4rem;
  }
}

/* Fade in animation */
.fade-in {
  animation: fadeIn 0.5s ease forwards;
}

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

/* Fade out animation */
.fade-out {
  animation: fadeOut 0.4s ease forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Optional: Slide animation */
.slide-in {
  animation: slideIn 0.5s ease forwards;
}

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

.slide-out {
  animation: slideOut 0.4s ease forwards;
}

@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50px);
  }
}