@import url('https://fonts.cdnfonts.com/css/gendy');
@import url('https://fonts.cdnfonts.com/css/gebuk');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700&display=swap');

:root {
  --bg: #0D0D0D;
  /* Deep Charcoal */
  --bg-secondary: #1A1A1A;
  /* Lighter Charcoal */
  --primary: #FF6B35;
  /* Vibrant Coral */
  --primary-light: #F7931E;
  /* Warm Amber */
  --secondary: #00D9A3;
  /* Bright Emerald */
  --secondary-dark: #00B4A3;
  /* Deep Teal */
  --accent: #FF8C42;
  /* Warm Coral */
  --text: #FFF8F0;
  /* Warm White */
  --text-muted: #A8A8A8;
  /* Soft Gray */
  --glass: rgba(255, 255, 255, 0.02);
  --glass-border: rgba(255, 107, 53, 0.2);
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Outfit', sans-serif;
  --font-accent: 'Space Grotesk', sans-serif;
  --font-logo: 'Gebuk', sans-serif;
}

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

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: #2A2A2A;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* Text Selection */
::selection {
  background: rgba(255, 107, 53, 0.3);
  color: #fff;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  padding-top: 20px;
  overflow-x: hidden;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

body.loaded {
  opacity: 1;
}

#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.6;
  /* Slight dim to let grid show */
}

h1,
h2,
h3,
h4,
h5,
h6,
.logo,
.resume-btn,
.nav-links a {
  font-family: var(--font-heading);
}

/* Custom Cursor */

/* Scroll progress */
/* #progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  width: 0%;
  z-index: 100;
} */


nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 20px;
  width: 90%;
  max-width: 1000px;
  z-index: 1000;
  background: rgba(13, 13, 13, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  justify-content: space-between;
  padding: 16px 32px;
  border-radius: 100px;
  border: 1px solid rgba(255, 107, 53, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease;
}

nav:hover {
  border-color: rgba(255, 107, 53, 0.4);
  box-shadow: 0 12px 40px rgba(255, 107, 53, 0.2);
}

.logo {
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: 1.3rem;
  background: linear-gradient(to right, var(--primary), var(--secondary));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo span {
  color: var(--primary);
}

.nav-links a {
  margin-left: 40px;
  /* Tighter spacing */
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  color: #94a3b8;
  position: relative;
  transition: color 0.3s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: #fff;
}

/* Glowing dot under active link */
/* Soft pill behind active link instead of dot */
.nav-links a.active {
  color: #fff;
  background: transparent;
  border-radius: 0;
}

.nav-links a.active::after {
  display: none;
}

.nav-links a {
  padding: 8px 16px;
  margin-left: 5px;
  transition: all 0.3s ease;
  border-radius: 20px;
}

.nav-links a:hover {
  background: transparent;
  color: #fff;
}

/* Gradient Text Utility */
.gradient-text {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section {
  max-width: 85%;
  margin: 40px auto;
  padding: 0 20px;
  opacity: 0;
  transform: translateY(40px);
  scroll-margin-top: 90px;
  /* ensure anchored sections are visible below fixed navbar */
}

.section-title {
  margin-bottom: 10px;
  background: linear-gradient(to right, var(--primary), var(--secondary), var(--primary-light));
  /* Coral -> Emerald -> Amber */
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* Left-align About & Contact section titles */
#about .section-title,
#contact .section-title {
  margin-left: 0;
  margin-right: auto;
  text-align: left;

}

.section.visible {
  opacity: 1;
  transform: translateY(0);
  transition: 0.8s ease;
}

/* ===== Hero Section: 3D Purple Design ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 40px;
  text-align: center;
  overflow: hidden;
  background: var(--bg);
  margin-bottom: -100px;
}

.hero-container.split-layout {
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 900px;
  position: relative;
  z-index: 2;
}

.hero-content {
  flex: 1;
  max-width: 800px;
  text-align: center;
  position: relative;
  z-index: 10;
}

.hero-name {
  font-size: 3rem;
  text-transform: none;
  letter-spacing: -1px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 20px;
  display: block;
}

.hero-identity {
  font-size: 4rem;
  line-height: 1.2;
  color: #fff;
  font-weight: 900;
  margin-bottom: 24px;
  letter-spacing: -2px;
}

.highlight-text {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
}

.hero-desc {
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  border: none;
  padding: 0;
}

.hero-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

/* Premium Buttons (Purple Gradient Style) */
.primary-btn,
.secondary-btn {
  padding: 14px 32px;
  border-radius: 50px;
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.primary-btn {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
  border: none;
  box-shadow: 0 4px 20px rgba(255, 107, 53, 0.4);
}

.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(255, 107, 53, 0.6);
}

.secondary-btn {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.secondary-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 107, 53, 0.5);
}

.text-link {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.text-link:hover {
  color: var(--primary);
  gap: 12px;
}

/* Scroll Indicator */
.scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 0.9rem;
  opacity: 0.6;
  animation: bounce 2s infinite;
}

@keyframes bounce {

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

  40% {
    transform: translateY(-5px);
  }

  60% {
    transform: translateY(-3px);
  }
}


/* Responsive Hero */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.1rem;
  }

  .hero-identity {
    font-size: 2.1rem !important;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
    max-width: 300px;
  }

  .primary-btn,
  .secondary-btn {
    width: 100%;
    justify-content: center;
    display: flex;
  }

  /* Adjust availability badge for mobile */
  .availability-badge {
    font-size: 0.75rem;
    padding: 6px 12px;
  }

  /* Adjust specialization tags for mobile */
  .hero-specializations {
    gap: 8px;
    margin: 20px 0;
  }

  .spec-tag {
    font-size: 0.75rem;
    padding: 6px 12px;
  }

  .spec-tag i {
    font-size: 0.8rem;
  }

  /* Reduce particle count on mobile for performance */
  .particle:nth-child(n+5) {
    display: none;
  }
}

/* ===== 3D Sphere Visual ===== */
.hero-visual {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}

/* Anime Bot Visual */
.bot-container {
  position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bot-body {
  position: relative;
  animation: float-bot 6s ease-in-out infinite;
}

.bot-head {
  width: 160px;
  height: 140px;
  background: #E0E0E0;
  border-radius: 40px;
  position: relative;
  box-shadow:
    inset 0 -10px 20px rgba(0, 0, 0, 0.1),
    0 20px 40px rgba(0, 0, 0, 0.3);
  z-index: 2;
  border: 4px solid var(--text);
}

.bot-face {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 36px;
  background: #1a1a1a;
  /* Dark screen */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0 0 20px rgba(0, 217, 163, 0.1);
  border: 8px solid #E0E0E0;
}

.bot-eye {
  width: 30px;
  height: 45px;
  background: var(--primary);
  /* Coral Eyes */
  border-radius: 50%;
  margin: 0 15px;
  box-shadow: 0 0 20px var(--primary);
  animation: blink 4s infinite;
}

.bot-cheek {
  position: absolute;
  bottom: 25px;
  width: 20px;
  height: 10px;
  background: rgba(255, 105, 180, 0.4);
  border-radius: 50%;
  filter: blur(4px);
}

.bot-cheek.left {
  left: 25px;
}

.bot-cheek.right {
  right: 25px;
}

.bot-antenna {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 30px;
  background: var(--text);
  z-index: 1;
}

.bot-bulb {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  background: var(--secondary);
  border-radius: 50%;
  box-shadow: 0 0 15px var(--secondary);
  animation: pulse-bulb 2s infinite;
}

.bot-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(70deg);
  width: 220px;
  height: 220px;
  border: 4px solid var(--secondary);
  border-radius: 50%;
  opacity: 0.6;
  z-index: 1;
  animation: spin-ring 10s linear infinite;
}

/* Animations */
@keyframes float-bot {

  0%,
  100% {
    transform: translateY(0) rotate(2deg);
  }

  50% {
    transform: translateY(-20px) rotate(-2deg);
  }
}

@keyframes blink {

  0%,
  45%,
  55%,
  100% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(0.1);
  }
}

@keyframes pulse-bulb {

  0%,
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }

  50% {
    opacity: 0.5;
    transform: translateX(-50%) scale(0.8);
  }
}

@keyframes spin-ring {
  0% {
    transform: translate(-50%, -50%) rotateX(75deg) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotateX(75deg) rotate(360deg);
  }
}

/* Purple Glow Effects */
.glow-left {
  position: absolute;
  top: 20%;
  left: -100px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 107, 53, 0.3), transparent);
  filter: blur(80px);
  animation: pulse 4s ease-in-out infinite;
}

.glow-right {
  position: absolute;
  bottom: 20%;
  right: -100px;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(0, 217, 163, 0.25), transparent);
  filter: blur(90px);
  animation: pulse 4s ease-in-out infinite 2s;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }

  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}

/* ===== Animated Particles ===== */
.particles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--primary);
  border-radius: 50%;
  opacity: 0;
  animation: float-particle 15s infinite ease-in-out;
  box-shadow: 0 0 10px var(--primary);
}

.particle:nth-child(1) {
  left: 10%;
  animation-delay: 0s;
  animation-duration: 12s;
}

.particle:nth-child(2) {
  left: 20%;
  animation-delay: 2s;
  animation-duration: 15s;
}

.particle:nth-child(3) {
  left: 30%;
  animation-delay: 4s;
  animation-duration: 18s;
}

.particle:nth-child(4) {
  left: 50%;
  animation-delay: 1s;
  animation-duration: 14s;
}

.particle:nth-child(5) {
  left: 60%;
  animation-delay: 3s;
  animation-duration: 16s;
}

.particle:nth-child(6) {
  left: 75%;
  animation-delay: 5s;
  animation-duration: 13s;
}

.particle:nth-child(7) {
  left: 85%;
  animation-delay: 2.5s;
  animation-duration: 17s;
}

.particle:nth-child(8) {
  left: 95%;
  animation-delay: 4.5s;
  animation-duration: 15s;
}

@keyframes float-particle {
  0% {
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }

  10% {
    opacity: 0.6;
  }

  90% {
    opacity: 0.6;
  }

  100% {
    transform: translateY(-100vh) scale(1);
    opacity: 0;
  }
}

/* ===== Availability Badge ===== */
.availability-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(0, 217, 163, 0.1);
  border: 1px solid rgba(0, 217, 163, 0.3);
  border-radius: 30px;
  color: var(--secondary);
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 20px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.status-dot {
  width: 8px;
  height: 8px;
  background: var(--secondary);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
  box-shadow: 0 0 10px var(--secondary);
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.6;
    transform: scale(1.2);
  }
}

/* ===== Hero Specializations ===== */
.hero-specializations {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin: 25px 0;
  flex-wrap: wrap;
}

.spec-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 107, 53, 0.2);
  border-radius: 20px;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.spec-tag:hover {
  background: rgba(255, 107, 53, 0.1);
  border-color: rgba(255, 107, 53, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.2);
}

.spec-tag i {
  color: var(--primary);
  font-size: 0.9rem;
}

/* ===== Hero Stats (keeping for compatibility) ===== */
.hero-stats {
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
  margin: 30px 0;
  flex-wrap: wrap;
}

.hero-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 15px 25px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 107, 53, 0.2);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.hero-stat-item:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 107, 53, 0.5);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 8px 20px rgba(255, 107, 53, 0.2);
}

.stat-number {
  font-size: 1.8rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-heading);
}

.stat-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
}



.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 10px;
}

.card {
  background: rgba(17, 25, 40, 0.6);
  /* Darker glass */
  padding: 26px;
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.card.active {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

.skills span {
  display: inline-block;
  margin: 10px 12px 0 0;
  padding: 10px 18px;
  border-radius: 20px;
  background: #000104;
  color: #0c0c0c;
  cursor: pointer;
  transition: background 0.3s ease;
}

.skills span.active {
  background: var(--secondary);
}

.contact-item {
  cursor: pointer;
}

.contact {
  margin-top: 40px;
  /* reduced top spacing */
  margin-bottom: 12px;
}

#contact {
  margin-bottom: 10px;
  /* bring footer closer */
}

.contact-form {
  max-width: 600px;
  width: 100%;
  margin-top: 20px;
  align-self: start;
  background: linear-gradient(180deg, rgba(29, 39, 60, 0.72), rgba(6, 10, 18, 0.62));
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  /* More subtle */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  /* Deeper shadow */
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-form input,
.contact-form textarea {
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  color: #e5e7eb;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border 0.3s ease, box-shadow 0.3s ease, background 0.2s ease;
}

.contact-form textarea {
  min-height: 160px;
  resize: vertical;
}

/* Input Focus Effects */
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--secondary);
  background: rgba(0, 217, 163, 0.05);
  /* Slight emerald tint on focus */
  box-shadow: 0 0 0 4px rgba(0, 217, 163, 0.1);
}

.contact-wrapper {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 60px;
  align-items: start;
}

/* Responsive: stack on narrow screens */
@media (max-width: 800px) {
  .contact-wrapper {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  /* Mobile Nav adjustment */
  nav {
    width: 95%;
    padding: 12px 20px;
    top: 15px;
  }

  .nav-links a {
    margin-left: 15px;
    font-size: 0.8em;
  }
}

.contact-form button {
  margin-top: 10px;
  padding: 16px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  /* Coral to Emerald Gradient */
  color: #fff;
  font-weight: 700;
  font-family: var(--font-accent);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(255, 107, 53, 0.3);
}

.contact-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(0, 217, 163, 0.5);
  /* Intense emerald glow */
}

/* Footer */
footer {
  margin-top: 10px;
  padding: 60px 20px;
  text-align: center;
  background: linear-gradient(135deg, rgba(13, 13, 13, 0.95), rgba(26, 26, 26, 0.95));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 2px solid;
  border-image: linear-gradient(90deg, transparent, var(--primary), var(--secondary), transparent) 1;
  position: relative;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.5), rgba(0, 217, 163, 0.5), transparent);
}

.socials {
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.socials a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 10px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

.socials a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: 0 0 15px rgba(255, 107, 53, 0.3);
}

.line {
  max-width: 200px;
  height: 2px;
  margin: 0 auto 20px auto;
  background: linear-gradient(90deg, transparent, var(--secondary), transparent);
  opacity: 0.5;
}

footer p {
  color: var(--muted);
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

.line {
  background: linear-gradient(to right,
      transparent,
      var(--primary),
      var(--secondary),
      transparent);
}

footer span,
.footer-copy {
  color: #e5e7eb;
}

.socials a {
  margin: 0 10px;
  margin-bottom: 10px;

  text-decoration: none;
  color: #efeded;
}

.socials a:hover {
  color: var(--primary);
  text-decoration: underline var(--primary);
}

/* Scroll Animation */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: 0.8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* THEME BUTTON
#themeToggle {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
} */




nav {
  background: rgba(15, 23, 42, 0.75);
}

.skills span {
  color: #0c0c0c;
}

.card,
.contact-form input,
.contact-form textarea {
  background: rgba(15, 23, 42, 0.4);
  /* More transparent */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.05);
  /* Base border */
  position: relative;
  /* Needed for pseudo-element positioning */
  z-index: 1;
}

/* Gradient Border Effect */
.card::before {
  content: "";
  position: absolute;
  inset: -1px;
  /* Hugs the card */
  border-radius: 14px;
  /* Matches card radius */
  padding: 1px;
  /* Border thickness */
  background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}

.card:hover::before {
  opacity: 1;
  /* Show gradient border on hover */
}

.card:hover {
  border-color: transparent;
  /* Hide base border */
  box-shadow: 0 0 40px rgba(255, 107, 53, 0.2);
  /* Richer glow */
}

footer {
  background: #020617;
}

/* Responsive adjustments for fixed navbar */
@media (max-width: 700px) {
  body {
    padding-top: 70px;
  }

  nav {
    padding: 12px 20px;
  }

  .section {
    scroll-margin-top: 70px;
  }
}

.orb-container {
  position: relative;
  width: 300px;
  height: 300px;
  margin: auto;
}

.orb {
  width: 220px;
  height: 140px;
  /* switched to a rounded rectangle */
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border-radius: 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: float 4s ease-in-out infinite;
  box-shadow: 0 18px 36px rgba(255, 107, 53, 0.25);
}

@keyframes float {
  0% {
    transform: translate(-50%, -50%) translateY(0);
  }

  50% {
    transform: translate(-50%, -50%) translateY(-15px);
  }

  100% {
    transform: translate(-50%, -50%) translateY(0);
  }
}

.skill {
  position: absolute;
  padding: 8px 14px;
  background: white;
  border-radius: 20px;
  font-size: 14px;
  animation: orbit 12s linear infinite;
}

/* Positions */
.s1 {
  top: 0;
  left: 50%;
  animation-delay: 0s;
}

.s2 {
  top: 50%;
  right: 0;
  animation-delay: -2s;
}

.s3 {
  bottom: 0;
  left: 50%;
  animation-delay: -4s;
}

.s4 {
  top: 50%;
  left: 0;
  animation-delay: -6s;
}

.s5 {
  top: 15%;
  left: 15%;
  animation-delay: -8s;
}

@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(120px) rotate(0deg);
  }

  to {
    transform: rotate(360deg) translateX(120px) rotate(-360deg);
  }
}

.skill {
  background: #020617;
  color: #e5e7eb;
}

.section {
  padding: 0px;
  margin-top: 70px;
}

/* About section */
.about-container {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: center;
}

.about-text h2 {
  font-size: 32px;
  margin-bottom: 10px;
}

.about-intro {
  font-size: 18px;
  margin-bottom: 10px;
  color: #334155;
}

.about-text p {
  line-height: 1.3;
  color: #bfc0c1;
  margin-bottom: 14px;
}

.about-text p,
.about-intro {
  color: #cbd5f5;
}

.about-card {
  /* background: rgb(19, 18, 18); */
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

.about-card ul {
  list-style: none;
}

.about-card li {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 15px;
  border-bottom: 1px solid #e5e7eb;
}

.about-card li span {
  color: var(--primary);
  font-weight: 500;
}

.about-card li:last-child {
  border-bottom: none;
}

.about-card {
  background: #020617;
  border: 1px solid #1e293b;
}

.about-card {
  transition: transform 0.3s ease;
}

.about-card:hover {
  transform: translateY(-6px);
}

/* project section */

.projects-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.6rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 12px;
}

.project-row {
  margin-top: 0.6rem;
}

.project-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  align-items: start;
  padding: 0.8rem;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.005));
  border: 1px solid rgba(255, 255, 255, 0.02);
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.18);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  position: relative;
  overflow: hidden;
}

/* two-column layout only on wider screens if desired inside each card */
@media (min-width: 1100px) {
  .project-row {
    grid-template-columns: 1fr;
  }
}

.project-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, rgba(255, 107, 53, 0.9), rgba(0, 217, 163, 0.9));
  transform: translateX(-6px);
  transition: transform 0.28s ease;
}

.project-row:hover::before {
  transform: translateX(0);
}

.project-row:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(2, 6, 23, 0.2);
}

.project-info {
  padding: 0.2rem 0.6rem;
  position: relative;
  z-index: 2;
}

.project-index {
  font-size: 2rem;
  font-weight: 800;
  color: rgba(100, 116, 139, 0.06);
  position: absolute;
  top: -6px;
  left: 8px;
}

.project-info h3 {
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}

.project-info p {
  max-width: 520px;
  line-height: 1.5;
  color: #94a3b8;
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
}

.project-tech {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin: 0.35rem 0 0.7rem;
}

.project-tech span {
  font-size: 0.64rem;
  padding: 0.32rem 0.56rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(232, 110, 110, 0.01), rgba(218, 135, 135, 0.005));
  color: #c7d2fe;
  border: 1px solid rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 -4px 8px rgba(2, 6, 23, 0.02);
}

/* tech-specific badges */
.project-tech .tech-badge.html {
  background: linear-gradient(90deg, #fff4e6, #ffd6a5);
  color: #7a3b14;
  border-color: rgba(255, 165, 0, 0.06);
}

.project-tech .tech-badge.css {
  background: linear-gradient(90deg, #dbeafe, #bfdbfe);
  color: #0f3b6b;
  border-color: rgba(96, 165, 250, 0.06);
}

.project-tech .tech-badge.js {
  background: linear-gradient(90deg, #fff8d6, #ffecb3);
  color: #5d3b00;
  border-color: rgba(255, 206, 84, 0.06);
}

.project-links {
  margin-top: 0.45rem;
}

.project-links a {
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
  padding: 0.38rem 0.38rem 0.5rem 0.09rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(85, 26, 26, 0.01), rgba(177, 79, 79, 0.005));
  border: 1px solid rgba(244, 240, 240, 0.02);
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.99rem;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  margin-right: 0.45rem;
}

.project-links a i {
  opacity: 1;
}

.project-links a:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.18);
  background: linear-gradient(90deg, rgba(255, 107, 53, 0.06), rgba(0, 217, 163, 0.04));
  color: #fff;
}

.project-visual {
  height: 160px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(0, 217, 163, 0.01), rgba(255, 107, 53, 0.005));
}

.project-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.45s cubic-bezier(.22, .9, .32, 1);
}

/* Disable hover 'swim' on project images */
.project-row:hover .project-visual img {
  transform: none;
}

/* small overlay label */
.project-visual::after {
  content: "";
  position: absolute;
  inset: 6px 6px auto auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 6px 20px rgba(2, 6, 23, 0.15);
  opacity: 0.12;
}

/* keep reveal animation */
.project-row {
  opacity: 0;
  transform: translateY(18px);
  transition: all 0.45s ease;
}

.project-row.show {
  opacity: 1;
  transform: translateY(0);
}

/* responsive */
@media (max-width: 900px) {
  .projects-wrapper {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .project-row {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .project-visual {
    height: 140px;
  }

  .project-info {
    padding: 0.4rem;
  }
}

@media (max-width: 520px) {
  .project-tech span {
    font-size: 0.62rem;
    padding: 0.3rem 0.48rem;
  }

  .project-links a {
    padding: 0.34rem 0.56rem;
    font-size: 0.9rem;
  }
}

/* skills section */
#skills {
  margin-top: 60px;
}

.section-header,
.section-header1 {
  text-align: center;
  margin-bottom: 10px;
}

.section-header p,
.section-header1 p {
  color: var(--muted);
  max-width: 600px;
  margin: 0 auto;
}

.skill-lab {
  background: rgba(30, 43, 73, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  border-radius: 15px;
}

.lab-wrapper {
  position: relative;
  width: 600px;
  height: 400px;
  margin: 4rem auto;
}

.lab-info {
  margin: 10px;
  text-align: center;
}

.lab-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #030c21;
  color: rgb(190, 171, 171);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  z-index: 3;
}

.lab-node {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgb(249, 246, 246);
  border: 1px solid #b0b6d3;
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 3;
  animation: floatNode 6s ease-in-out infinite;
}

@keyframes floatNode {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

/* 3D Tilt & Spotlight Support (disabled for project visuals & contact form) */
.about-card {
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out;
  /* Fast transition for movement */
  position: relative;
  overflow: hidden;
}

/* Dynamic Spotlight via pseudo-element (kept only for about-card) */
.about-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
}

.about-card:hover::after {
  opacity: 1;
}



/* Specific Glows for Skills */
.lab-node.html:hover {
  box-shadow: 0 0 30px #e34c26 !important;
  border-color: #e34c26 !important;
}

.lab-node.css:hover {
  box-shadow: 0 0 30px #264de4 !important;
  border-color: #264de4 !important;
}

.lab-node.js:hover {
  box-shadow: 0 0 30px #f0db4f !important;
  border-color: #f0db4f !important;
}

.lab-node.react:hover {
  box-shadow: 0 0 30px #61dbfb !important;
  border-color: #61dbfb !important;
}

.lab-node.java:hover {
  box-shadow: 0 0 30px #f89820 !important;
  border-color: #f89820 !important;
}

.lab-node.bootstrap-5:hover {
  box-shadow: 0 0 30px #7952b3 !important;
  border-color: #7952b3 !important;
}

/* Positions */
.html {
  top: 60px;
  left: 90px;
  background-image: url('https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg');
}

.css {
  top: 60px;
  right: 90px;
  background-image: url('https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg');
}

.js {
  top: 200px;
  right: 40px;
  background-image: url('https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg');
}

.react {
  bottom: 0;
  left: calc(50% - 26px);
  background-image: url('https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg');
}

.java {
  bottom: 120px;
  left: 40px;
  background-image: url('https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg');
}

.bootstrap-5 {
  top: 0px;
  right: 220px;
  background-image: url('https://cdn.jsdelivr.net/gh/devicons/devicon/icons/bootstrap/bootstrap-original.svg');
}

/* SVG lines */
.lab-lines line {
  stroke: #eeeef2;
  stroke-width: 2;
  opacity: 0.2;
  transition: opacity 0.3s ease;
}

/* certificate section */
.certificates {
  padding: 6rem 8vw;
  position: relative;
  color: #fff;
  background: transparent;
  /* removed decorative background */
}

/* ensure content sits above decoration (kept for safety) */
.certificates .section-title,
.certificates .cert-track,
.certificates .cert {
  position: relative;
  z-index: 1;
}

.section-title {
  font-size: 2.5rem;
  margin-bottom: 3rem;
  text-align: left;
  color: #fff;
  position: relative;
}

.section-title::after {
  content: "";
  display: block;
  width: 140px;
  height: 4px;
  margin: 18px auto 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

.cert-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.6rem;
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
  padding: 1rem;
}

/* hide timeline look */
.cert-track::before {
  display: none;
}

.cert {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  border-radius: 12px;
  padding: 1.25rem;
  color: inherit;
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.6);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cert .cert-content {
  width: 100%;
  display: flex;
  gap: 1rem;
  flex-direction: column;
  align-items: center;
}

.cert-img-box {
  width: 120px;
  height: 120px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.cert-link {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.cert img {
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 8px;
  display: block;
  filter: none;
}

.cert-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(8px);
  background: rgba(2, 6, 23, 0.85);
  color: #fff;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
  border-radius: 999px;
  /* pill by default */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, background 0.22s ease, border 0.22s ease;
  border: 0 solid transparent;
}

/* variants */
.cert-btn.pill {
  border-radius: 999px;
  padding: 0.5rem 1rem;
}

.cert-btn.outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: inherit;
}

.cert-btn.accent {
  background: rgba(2, 6, 23, 0.95);
  color: #fff;
}

/* per-card accent colors */
.html-cert .cert-btn {
  background: linear-gradient(90deg, #ff8a65, #ffb26b);
  color: #fff;
}

.css-cert .cert-btn {
  background: linear-gradient(90deg, var(--secondary), var(--secondary-dark));
  color: #042c2e;
}

.bs-cert .cert-btn {
  background: linear-gradient(90deg, var(--secondary), #60ebc2);
  color: #042c2e;
}

.js-cert .cert-btn {
  background: linear-gradient(90deg, #ffd166, #ffb457);
  color: #241b00;
}

/* focus and accessibility */
.cert-link:focus .cert-btn,
.cert-btn:focus {
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.4);
  outline: 3px solid rgba(255, 107, 53, 0.18);
}

/* show on hover */
.cert:hover .cert-btn,
.cert .cert-link:focus .cert-btn,
.cert .cert-link:active .cert-btn {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
  pointer-events: auto;
}

/* mobile: show button below image */
@media (max-width: 480px) {
  .cert-btn {
    position: static;
    transform: none;
    opacity: 1;
    margin-top: 0.6rem;
    display: inline-block;
    background: rgba(2, 6, 23, 0.9);
    border-radius: 12px;
  }
}

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s cubic-bezier(.22, .9, .32, 1), transform 0.6s cubic-bezier(.22, .9, .32, 1);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* optional small stagger using nth-child */
.cert-track .cert:nth-child(1) .reveal {
  transition-delay: 0.04s;
}

.cert-track .cert:nth-child(2) .reveal {
  transition-delay: 0.08s;
}

.cert-track .cert:nth-child(3) .reveal {
  transition-delay: 0.12s;
}

.cert-track .cert:nth-child(4) .reveal {
  transition-delay: 0.16s;
}

.cert-details h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.cert-details p {
  margin: 6px 0 0;
  font-size: 0.95rem;
  opacity: 0.9;
}

/* Accent color themes per certificate */
.html-cert {
  background: linear-gradient(135deg, #fff1e6, #ffd6a5);
  color: #111827;
}

.css-cert {
  background: linear-gradient(135deg, #d1fae5, #ccfbf1);
  color: #042f2e;
}

.bs-cert {
  background: linear-gradient(135deg, #ccfbf1, #a7f3d0);
  color: #064e3b;
}

.js-cert {
  background: linear-gradient(135deg, #fff7cc, #ffd98a);
  color: #241b00;
}

.deloitte {
  background: linear-gradient(135deg, #e8fdf4, #c8f7e6);
  color: #083428;
}

/* Deloitte button accent */
.deloitte .cert-btn {
  background: linear-gradient(90deg, #00b37a, #007a5c);
  color: #fff;
}

/* Hover effect */
.cert:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 50px rgba(2, 6, 23, 0.65);
}

.cert:hover .cert-img-box {
  transform: translateY(-6px) rotate(-3deg);
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.45);
}

/* Responsive tweaks */
@media (max-width: 700px) {
  .section-title {
    font-size: 1.9rem;
  }

  .cert-img-box {
    width: 100px;
    height: 100px;
  }
}

/* ===== New Skills Grid Design ===== */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.skill-category-card {
  background: rgba(17, 25, 40, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 30px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.skill-category-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  opacity: 0.6;
}

.skill-category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.15);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.card-header i {
  font-size: 1.8rem;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.card-header h3 {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0;
  color: #fff;
  letter-spacing: 0.5px;
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.skill-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  font-size: 0.95rem;
  color: var(--muted);
  cursor: default;
  transition: all 0.3s ease;
}

.skill-tag i {
  font-size: 1.2rem;
  transition: color 0.3s ease;
}

.skill-tag:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Dynamic Hover Colors based on data-color */
/* We can't use attr() for color in CSS directly for most properties comfortably yet without custom props logic in JS,
   but we can style generically or assumes JS sets manual colors.
   Actually, let's keep it simple with CSS classes or generic hover.
   But for the "Attractive" requirement, let's add a generic glow.
*/

.skill-tag:hover i {
  color: #fff;
  /* Icons turn white or specific brand color if we had classes */
}

.cert-img-box {
  width: 100px;
  height: 100px;
}