:root {
          --bg-color: #020617;
          --primary: #00d4ff;
          --primary-light: #72f74d;
          --white: #ffffff;
          --text-color: #f1f5f9;
          --glass-bg: rgba(255, 255, 255, 0.05);
          --glass-border: rgba(255, 255, 255, 0.1);
}

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

body {
          background-color: var(--bg-color);
          color: var(--text-color);
          overflow-x: hidden;
          scroll-behavior: smooth;
}

/* Background Animation */
.background-animation {
          position: fixed;
          top: 0;
          left: 0;
          width: 100vw;
          height: 100vh;
          z-index: -1;
          overflow: hidden;
}

/* The tech words that drift down behind the page (made by script.js) */
.falling-word {
          position: absolute;
          top: -3rem;
          font-weight: 700;
          color: var(--primary);
          white-space: nowrap;
          pointer-events: none;
          animation-name: fall;
          animation-timing-function: linear;
          animation-fill-mode: forwards;
}

@keyframes fall {
          to {
                    transform: translateY(calc(100vh + 6rem));
          }
}

@media (prefers-reduced-motion: reduce) {
          .falling-word {
                    display: none;
          }
}

.glow-orb {
          position: absolute;
          border-radius: 50%;
          filter: blur(100px);
          opacity: 0.5;
          animation: float 10s infinite alternate ease-in-out;
}

.cyan-orb {
          width: 400px;
          height: 400px;
          background-color: var(--primary);
          top: -100px;
          left: -100px;
}

.green-orb {
          width: 300px;
          height: 300px;
          background-color: rgba(114, 247, 77, 0.4);
          bottom: -50px;
          right: -50px;
          animation-delay: -5s;
}

@keyframes float {
          0% {
                    transform: translate(0, 0) scale(1);
          }

          100% {
                    transform: translate(50px, 50px) scale(1.2);
          }
}

/* Nav */
header {
          position: fixed;
          top: 0;
          width: 100%;
          padding: 20px 50px;
          z-index: 1000;
          background: rgba(13, 4, 21, 0.5);
          backdrop-filter: blur(10px);
          border-bottom: 1px solid var(--glass-border);
}

nav ul {
          list-style: none;
          display: flex;
          justify-content: center;
          gap: 40px;
}

nav a {
          color: var(--white);
          text-decoration: none;
          font-size: 1.1rem;
          font-weight: 600;
          transition: color 0.3s ease;
}

nav a:hover {
          color: var(--primary-light);
          text-shadow: 0 0 10px var(--primary-light);
}

/* Layout */
main {
          max-width: 1200px;
          margin: 0 auto;
          padding: 100px 20px 0;
}

section {
          min-height: 60vh;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 80px 0;
          position: relative;
}

.highlight {
          color: var(--white);
          text-shadow: 0 0 15px var(--primary), 0 0 30px var(--primary-light);
}

h2 {
          font-size: 3rem;
          margin-bottom: 40px;
          color: var(--primary-light);
}

/* Hero */
.hero-content {
          display: flex;
          align-items: center;
          gap: 60px;
          flex-wrap: wrap;
          justify-content: center;
}

.image-container {
          position: relative;
}

.image-container::before {
          content: '';
          position: absolute;
          inset: -10px;
          border-radius: 50%;
          background: linear-gradient(45deg, var(--primary), var(--white));
          z-index: -1;
          animation: spin 4s linear infinite;
}

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

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

.profile-img {
          width: 300px;
          height: 300px;
          border-radius: 50%;
          object-fit: cover;
          border: 5px solid var(--bg-color);
}

.text-container h1 {
          font-size: 4.5rem;
          line-height: 1.2;
}

.subtitle {
          font-size: 1.5rem;
          margin-top: 10px;
          color: var(--primary-light);
}

.scroll-indicator {
          position: absolute;
          bottom: 30px;
          left: 50%;
          transform: translateX(-50%);
          font-size: 2rem;
          color: var(--white);
          animation: bounce 2s infinite;
}

@keyframes bounce {

          0%,
          20%,
          50%,
          80%,
          100% {
                    transform: translateY(0) translateX(-50%);
          }

          40% {
                    transform: translateY(-20px) translateX(-50%);
          }

          60% {
                    transform: translateY(-10px) translateX(-50%);
          }
}

/* Glass Card */
.glass-card {
          background: var(--glass-bg);
          border: 1px solid var(--glass-border);
          backdrop-filter: blur(10px);
          border-radius: 20px;
          padding: 40px;
          max-width: 800px;
          text-align: center;
          font-size: 1.2rem;
          line-height: 1.6;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
          transition: transform 0.3s ease;
}

.glass-card:hover {
          transform: translateY(-10px);
          box-shadow: 0 15px 40px rgba(0, 212, 255, 0.3);
}

/* Grid Container */
.grid-container {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 30px;
          width: 100%;
}

.achievement-card {
          background: var(--glass-bg);
          border: 1px solid var(--glass-border);
          backdrop-filter: blur(10px);
          border-radius: 20px;
          padding: 30px;
          text-align: center;
          transition: all 0.3s ease;
          cursor: default;
}

.achievement-card:hover {
          transform: translateY(-15px) scale(1.05);
          background: rgba(255, 255, 255, 0.1);
          box-shadow: 0 0 20px var(--primary-light);
}

.achievement-card .icon {
          font-size: 3rem;
          color: var(--white);
          margin-bottom: 20px;
          text-shadow: 0 0 15px var(--primary);
}

.achievement-card h3 {
          font-size: 1.8rem;
          margin-bottom: 10px;
          color: var(--primary-light);
}

/* Socials */
.social-links {
          display: flex;
          gap: 20px;
          flex-wrap: wrap;
          justify-content: center;
}

.social-btn {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 15px 30px;
          border-radius: 50px;
          background: linear-gradient(45deg, var(--primary), #005f73);
          color: var(--white);
          text-decoration: none;
          font-size: 1.2rem;
          font-weight: 600;
          transition: all 0.3s ease;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.social-btn:hover {
          transform: scale(1.1);
          box-shadow: 0 0 20px var(--white);
          background: linear-gradient(45deg, var(--primary-light), var(--primary));
}

/* Footer */
footer {
          text-align: center;
          padding: 20px;
          background: rgba(13, 4, 21, 0.8);
          border-top: 1px solid var(--glass-border);
}

/* Animations */
.fade-in {
          opacity: 0;
          transform: translateY(50px);
          transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.visible {
          opacity: 1;
          transform: translateY(0);
}

@media (max-width: 768px) {
          .text-container h1 {
                    font-size: 3rem;
          }

          nav ul {
                    gap: 15px;
          }

          nav a {
                    font-size: 0.9rem;
          }
}