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

:root {
  --primary-color: #ff5f6d;
  --secondary-color: #ffc371;
  --text-color: #1a1a1a;
  --text-light: #4b0000;
  --heading-color: #750000;
  --accent-color: #cc0000;
  --bg-card: rgba(255, 255, 255, 0.7);
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;
}

/* Smooth scrolling with no visible scrollbar effect */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  color: var(--text-color);
  transition: var(--transition);
  overflow-x: hidden;
  min-height: 100vh;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Hide scrollbar but keep functionality */
body::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.container {
  max-width: 1200px;
  margin: auto;
  padding: 0 2rem;
}

/* ---------- NAVIGATION BAR ---------- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 1000;
  transition: var(--transition);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* Enhanced Portfolio Logo */
.name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--heading-color);
  transition: var(--transition);
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;

  /* Add gradient text effect */
  background: linear-gradient(45deg, var(--accent-color), var(--primary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  /* Add subtle text shadow for depth */
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));
}

/* Add hover effect */
.name:hover {
  transform: scale(1.05);
  filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.15));
}


/* Alternative icon option - uncomment if you prefer */
.name::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--accent-color);
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.8rem;
  box-shadow: 0 0 10px var(--accent-color);
  animation: glow-dot 2s ease-in-out infinite;
}

/* Add underline effect on hover */
.name::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(45deg, var(--accent-color), var(--primary-color));
  transition: width 0.3s ease;
}

.name:hover::after {
  width: 100%;
}

/* Brand badge (emoji-like) */
.brand-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: 0.6rem;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15), inset 0 -6px 12px rgba(255, 255, 255, 0.06);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.brand-badge:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

body.dark .brand-badge {
  background: linear-gradient(135deg, #ff7a7a, #ffd08a);
}

/* Animations */
@keyframes pulse-icon {

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

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

@keyframes glow-dot {

  0%,
  100% {
    box-shadow: 0 0 5px var(--accent-color);
    opacity: 0.8;
  }

  50% {
    box-shadow: 0 0 15px var(--accent-color), 0 0 25px var(--accent-color);
    opacity: 1;
  }
}

/* Dark mode adjustments */
body.dark .name {
  background: linear-gradient(45deg, #ff5f6d, #ffc371);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(2px 2px 4px rgba(255, 255, 255, 0.1));
}

body.dark .name:hover {
  filter: drop-shadow(3px 3px 6px rgba(255, 255, 255, 0.2));
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .name {
    font-size: 1.2rem;
  }

  .name::before {
    font-size: 1em;
    margin-right: 0.3rem;
  }

  .brand-badge {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
  }
}

.navbar.scrolled {
  height: 60px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Global "Sexy" Selection */
::selection {
  background: var(--accent-color);
  color: white;
}

/* Button & Link Glow Effects */
.btn:hover,
.view-all-btn:hover,
.github-btn:hover,
.video-btn:hover,
.cert-link-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 5px 20px rgba(255, 95, 109, 0.4);
  /* Glow matching primary color */
}

/* Button Click Micro-interaction */
.btn:active,
.view-all-btn:active,
.github-btn:active,
.video-btn:active,
.cert-link-btn:active {
  transform: scale(0.98);
}

/* Hero Title Shimmer Animation */
.hero-title {
  font-size: 4rem;
  font-weight: 800;
  margin-bottom: 1rem;
  background: linear-gradient(to right, #750000, #ff5f6d, #750000);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 5s linear infinite;
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

.hero-subtitle {
  font-size: 1.5rem;
  color: var(--text-color);
  margin-bottom: 2rem;
  background: rgba(255, 255, 255, 0.4);
  padding: 0.5rem 1.5rem;
  border-radius: 50px;
  display: inline-block;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.nav-name {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--heading-color);
  transition: var(--transition);
  white-space: nowrap;
  text-align: center;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-logo {
  display: flex;
  align-items: center;
}

.logo-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--heading-color);
  transition: var(--transition);
}

.nav-name {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--heading-color);
  transition: var(--transition);
}

/* Centered transparent nav in navbar */
.nav-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.nav-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
  pointer-events: auto;
}

.nav-center-list {
  list-style: none;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding: 0;
  margin: 0;
}

.nav-center-list li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-center-list li::before,
.nav-center-list li::after {
  content: none;
}

.nav-center-list a {
  color: var(--text-light);
  text-decoration: none;
  padding: 0.35rem 0.7rem;
  border-radius: 8px;
  font-weight: 500;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
  display: inline-block;
}

.nav-center-list a:hover {
  background: rgba(204, 0, 0, 0.07);
  color: var(--heading-color);
  transform: translateY(-2px);
}

.nav-center-list a.active {
  background: linear-gradient(135deg, rgba(204, 0, 0, 0.12), rgba(255, 95, 109, 0.06));
  color: var(--heading-color);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 rgba(204, 0, 0, 0.12);
}

/* ---------- HAMBURGER MENU ---------- */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 1002;
}

.hamburger-line {
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--heading-color);
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}

.hamburger.active .hamburger-line:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.hamburger.active .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger.active .hamburger-line:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* Hide center nav on small screens, show as mobile overlay */
@media (max-width: 900px) {
  .hamburger {
    display: flex;
  }

  .nav-center {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 1001;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  body.dark .nav-center {
    background: rgba(18, 18, 18, 0.97);
  }

  .nav-center.open {
    display: flex;
  }

  .nav-center-list {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }

  .nav-center-list a {
    font-size: 1.3rem;
    padding: 0.75rem 2rem;
  }

  .navbar {
    padding: 0 1.2rem;
  }
}

/* ---------- THEME TOGGLE BUTTON ---------- */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.theme-toggle:hover {
  transform: scale(1.1);
}

/* Resume button in navbar */
.nav-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  position: relative;
}

.resume-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.9rem;
  background: linear-gradient(45deg, var(--accent-color), var(--primary-color));
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(204, 0, 0, 0.15);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.resume-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(204, 0, 0, 0.2);
}

@media (max-width: 768px) {
  .resume-btn {
    padding: 0.35rem 0.6rem;
    font-size: 0.9rem;
  }
}

.theme-toggle i {
  position: absolute;
  font-size: 1.2rem;
  transition: var(--transition);
}

.moon-icon {
  opacity: 0;
  transform: translateY(20px);
}

.sun-icon {
  opacity: 1;
  color: #ff8800;
}

.fluids-icon {
  opacity: 0;
  transform: translateY(20px);
  color: #00e5ff;
}

/* ---------- HERO SECTION ---------- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 80px;
  position: relative;
  overflow: hidden;
}

.hero>.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  position: relative;
  z-index: 2;
}

/* Particles and hero floating shapes (ported from ru theme, adapted) */
.particles-container {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-background {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.12;
  animation: float 6s ease-in-out infinite;
}

.shape-1 {
  width: 420px;
  height: 420px;
  background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
  top: 12%;
  left: 4%;
  animation-delay: 0s;
}

.shape-2 {
  width: 320px;
  height: 320px;
  background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
  bottom: 12%;
  right: 6%;
  animation-delay: 2s;
}

.shape-3 {
  width: 220px;
  height: 220px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  top: 58%;
  left: 58%;
  animation-delay: 4s;
}

@keyframes float {

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

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

.hero-subtitle {
  font-size: 1.25rem;
  color: var(--text-light);
  margin: 0.75rem 0;
  min-height: 1.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 460px;
  opacity: 0;
  transform: translateY(15px);
  animation: heroFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.6s;
}

.cursor {
  animation: blink 1s infinite;
  color: var(--accent-color);
}


.hero-content {
  z-index: 2;
  position: relative;
  text-align: left;
  flex: 1 1 50%;
  min-width: 280px;
}

.hero-greeting {
  font-size: clamp(2rem, 3vw, 4rem);
  font-weight: 700;
  color: var(--heading-color);
  line-height: 1.2;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  animation: heroFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.2s;
  margin-bottom: 0.5rem;
  overflow: visible;
  white-space: normal;
}

.hero h1 {
  font-size: clamp(1.8rem, 2.8vw, 4rem);
  font-weight: 700;
  color: var(--heading-color);
  line-height: 1.2;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  animation: heroFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.4s;
  overflow: visible;
  white-space: normal;
}

@keyframes heroFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }

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

/* Tablet: stack hero vertically */
@media (max-width: 1023px) {

  .hero-greeting,
  .hero h1 {
    white-space: normal;
  }

  .hero>.container {
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }

  .hero-content {
    text-align: center;
    max-width: 100%;
    min-width: 0;
  }

  .hero-graphic {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 100vw;
    height: auto;
    opacity: 1;
    display: flex;
    justify-content: center;
    overflow: hidden;
  }

  .sliding-clock-container {
    margin-top: 0;
    transform: scale(0.85);
    padding: 25px 35px;
  }

  .hero-social-links {
    justify-content: center;
  }
}

/* Mobile: smaller fonts and smaller clock */
@media (max-width: 780px) {
  .hero-greeting {
    font-size: clamp(2rem, 6vw, 3rem);
  }

  .hero h1 {
    font-size: clamp(1.8rem, 5.5vw, 2.8rem);
  }

  .sliding-clock-container {
    transform: scale(0.6);
    transform-origin: center center;
    margin: -40px -30px;
    padding: 15px 20px;
  }
}

/* Small mobile: even smaller clock */
@media (max-width: 420px) {
  .sliding-clock-container {
    transform: scale(0.5);
    margin: -60px -50px;
    padding: 10px 15px;
  }
}

.hero p {
  font-size: 1.5rem;
  color: var(--text-light);
  margin: 1.5rem 0;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s forwards 0.6s;
}

.hero-cta {
  margin-top: 2rem;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s forwards 0.9s;
}

.cta-button {
  display: inline-block;
  padding: 1rem 2rem;
  background: linear-gradient(45deg, var(--accent-color), #ff4b4b);
  color: white;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 1px;
  transition: var(--transition);
  box-shadow: 0 10px 20px rgba(204, 0, 0, 0.2);
}

.cta-button:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 25px rgba(204, 0, 0, 0.3);
}

.hero-graphic {
  position: relative;
  right: auto;
  top: auto;
  transform: none;
  width: auto;
  height: auto;
  opacity: 1;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Scale clock down on standard laptops to prevent hero overlap */
@media (min-width: 1024px) and (max-width: 1440px) {
  .sliding-clock-container {
    transform: scale(0.7) perspective(1000px);
    transform-origin: right center;
    margin-right: -15%;
  }
}

/* ---------- SLIDING TAPE CLOCK ---------- */
.sliding-clock-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: rgba(255, 255, 255, 0.15);
  padding: 30px 50px;
  border-radius: 20px;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: var(--shadow);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transform: perspective(1000px);
  transition: transform 0.1s ease-out;
  margin-top: 0;
}

.tape-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.tape-column {
  position: relative;
  width: 70px;
  height: 180px;
  /* Visible height showing ~3 numbers (prev, current, next) */
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  /* Darker background for contrast */
  border-radius: 40px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Add blur masks using radial gradient to surround the circle */
.tape-column::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  /* Create a hole in the center matching the highlight */
  background: radial-gradient(circle at center, transparent 28px, rgba(0, 0, 0, 0.4) 30px);
  /* Mask the backdrop filter so the center is NOT blurred */
  mask-image: radial-gradient(circle at center, transparent 28px, black 30px);
  -webkit-mask-image: radial-gradient(circle at center, transparent 28px, black 30px);
}

.tape-strip {
  display: flex;
  flex-direction: column;
  color: rgba(255, 255, 255, 0.95);
  /* High contrast */
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 60px;
  /* Height of each number */
  text-align: center;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Smooth easing */
  padding-top: 60px;
  /* Initial offset to center '0' if transform is 0 */
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* Format the strip content from string to vertical block */
/* NOTE: The HTML content is minimal ("0 1 2..."), we rely on JS to split/format or we use simple layout */
/* Actually, for better control, JS should populate the strip with <div>digit</div>. 
   If HTML is static text, we can use a monospaced font width or flex column.
   Let's assume the HTML text is just numbers separated by spaces for now, but better is to structure it.
   We will style assuming the JS will replace text with block elements OR we style this text node.
   For simplicity with current HTML text content "0 1 ...", let's make it behave like a vertical column 
   by limiting width and allowing wrap? No, that's flaky.
   BETTER: Let's assume the JS part will wrap each digit in a <div>. 
   I will add a rule for the children.
*/

.tape-strip div {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tape-highlight {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
  pointer-events: none;
  z-index: 10;
  /* Remove blur from center to keep it sharp */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.tape-separator {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-color);
  margin: 0 5px;
  animation: blink 2s infinite;
  text-shadow: 0 0 10px var(--accent-color);
}

.clock-info-section {
  text-align: center;
  margin-top: 10px;
}

.clock-date-display {
  font-family: 'Orbitron', monospace;
  font-size: 1.1rem;
  color: #fff;
  letter-spacing: 2px;
  margin-bottom: 5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  font-weight: 600;
}

.clock-label-display {
  font-family: 'Orbitron', monospace;
  font-size: 0.8rem;
  color: var(--accent-color);
  letter-spacing: 3px;
  text-shadow: 0 0 5px rgba(255, 95, 109, 0.5);
  animation: blink 3s infinite;
}

/* Current number style change? 
   Hard to do with pure CSS transform offset, 
   but the highlight bubble provides the visual focus.
*/

/* Dark Mode Adjustments */
body.dark .sliding-clock-container {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.15);
}

body.dark .tape-column {
  background: rgba(30, 30, 30, 0.6);
  border-color: rgba(255, 255, 255, 0.05);
}

body.dark .tape-strip {
  color: #fff;
}

body.dark .tape-highlight {
  background: rgba(255, 95, 109, 0.2);
  border-color: var(--accent-color);
  box-shadow: 0 0 15px var(--accent-color);
}


/* ---------- MAIN CONTENT ---------- */
main {
  display: grid;
  gap: 4rem;
  margin-bottom: 4rem;
  padding-top: 2rem;
}

.card {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  /* Safari support */
  padding: 3rem;
  border-radius: 24px;
  box-shadow: var(--shadow);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  display: flex;
  border: 2px solid rgba(204, 0, 0, 0.2);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(204, 0, 0, 0.1);
}

#technical-skills.card {
  overflow: visible;
  position: relative;
}

/* Separate line clipper element - only clips the line, doesn't affect popups */
#technical-skills.card .line-clipper {
  position: absolute;
  top: 5px;
  left: 0;
  width: 10px;
  height: calc(100% - 10px);
  overflow: hidden;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
  z-index: 1;
  pointer-events: none;
}

#technical-skills.card .line-clipper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
  transition: var(--transition);
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}

#technical-skills.card:hover .line-clipper::before {
  width: 10px;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}

/* Hide the default card line for technical skills */
#technical-skills.card::before {
  display: none;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15), 0 0 0 2px rgba(204, 0, 0, 0.3);
  border-color: rgba(204, 0, 0, 0.4);
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
  transition: var(--transition);
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}

.card:hover::before {
  width: 10px;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}

#technical-skills.card:hover::before {
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}

.section-icon {
  font-size: 2rem;
  margin-right: 2rem;
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: rgba(204, 0, 0, 0.1);
  border-radius: 50%;
  flex-shrink: 0;
}

.section-content {
  flex-grow: 1;
}

#technical-skills .section-content {
  padding: 0;
}

/* ---------- TEXT STYLES ---------- */
h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: var(--heading-color);
  position: relative;
  display: inline-block;
}

h2::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 50px;
  height: 3px;
  background: linear-gradient(to right, var(--accent-color), transparent);
}

h3 {
  color: #cc3300;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

p {
  line-height: 1.7;
  margin-bottom: 1rem;
}

ul {
  list-style-type: none;
  margin-left: 0;
}

ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

ul li::before {
  /* Use a proper Unicode bullet to avoid mojibake/encoding issues */
  content: '\2022';
  position: absolute;
  left: 0;
  color: var(--accent-color);
  font-size: 0.8rem;
}

a {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 500;
  transition: var(--transition);
}

a:hover {
  color: #ff4b4b;
}

/* ---------- CONTACT SECTION ---------- */
.contact-section {
  scroll-margin-top: 100px;
  /* Ensures the section is visible when scrolled to */
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  transition: var(--transition);
  word-break: break-word;
  overflow-wrap: break-word;
}

.contact-item:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: translateY(-5px);
}

.contact-item i {
  margin-right: 1rem;
  font-size: 1.2rem;
  color: var(--accent-color);
}

/* ---------- EDUCATION SECTION ---------- */
.education-details {
  border-left: 2px solid var(--accent-color);
  padding-left: 1.5rem;
  position: relative;
}

.education-details::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-color);
  left: -11px;
  top: 5px;
}

.education-stat {
  display: flex;
  align-items: center;
  margin-top: 1rem;
}

.edu-date {
  position: relative;
  right: auto;
  top: auto;
  color: var(--accent-color);
  font-weight: normal;
  display: inline-block;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}

.progress-bar {
  flex-grow: 1;
  height: 8px;
  background: rgba(0, 0, 0, 0.1);
  margin: 0 1rem;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.progress {
  position: absolute;
  height: 100%;
  background: linear-gradient(to right, var(--accent-color), #ff8c8c);
  border-radius: 4px;
  width: 0;
  transition: width 1.5s ease;
}

/* ---------- SKILLS SECTION ---------- */
.skills-container {
  position: relative;
  overflow: visible;
  min-height: 150px;
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.visible-skills-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.skills-folder {
  position: relative;
  width: 200px;
  transition: all 0.3s ease;
  overflow: visible;
  flex-shrink: 0;
  z-index: 100;
}

#technical-skills.card .skills-folder {
  position: relative;
  z-index: 100;
}

.folder-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(204, 0, 0, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.folder-header:hover {
  background: rgba(204, 0, 0, 0.15);
  border-color: rgba(204, 0, 0, 0.3);
}

.folder-icon {
  font-size: 1.2rem;
  color: var(--accent-color);
  transition: transform 0.3s ease;
}

.folder-header:hover .folder-icon {
  transform: scale(1.1);
}

.folder-name {
  font-weight: 600;
  color: var(--heading-color);
  font-size: 0.95rem;
}

.folder-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  border: none;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
  z-index: 1000;
  overflow: visible;
  pointer-events: none;
}

#technical-skills.card .folder-content {
  z-index: 1000;
  overflow: visible;
}

/* Corner positioned skill categories - diagonal placement */
.skill-corner {
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(204, 0, 0, 0.15);
  min-width: 200px;
  max-width: 220px;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1001;
  pointer-events: auto;
}

#technical-skills.card .skill-corner {
  position: absolute;
  z-index: 1001;
}

/* Fix for Dark Mode Skills Visibility */
body.dark .skill-corner {
  background: rgba(30, 30, 30, 0.95);
  border-color: rgba(255, 95, 109, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

body.dark .skill-corner h3 {
  color: #fff;
}

body.dark .skill-corner .skill-tag {
  background: rgba(255, 255, 255, 0.1);
  color: #ff8c8c;
}

body.dark .skill-corner .skill-tag:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.folder-header:hover~.folder-content .skill-corner {
  opacity: 1;
  transform: scale(1);
}

/* Top-left diagonal - Communication Protocols */
.skill-top-left {
  top: -140px;
  left: -200px;
  transform: scale(0.8) translateY(10px);
}

.folder-header:hover~.folder-content .skill-top-left {
  transform: scale(1) translateY(0);
  transition-delay: 0.1s;
}

/* Bottom-left diagonal - Software & Frameworks */
.skill-bottom-left {
  top: 60px;
  left: -200px;
  transform: scale(0.8) translateY(-10px);
}

.folder-header:hover~.folder-content .skill-bottom-left {
  transform: scale(1) translateY(0);
  transition-delay: 0.2s;
}

/* Top-right diagonal - Microcontrollers & Hardware */
.skill-top-right {
  top: -140px;
  right: -200px;
  transform: scale(0.8) translateY(10px);
}

.folder-header:hover~.folder-content .skill-top-right {
  transform: scale(1) translateY(0);
  transition-delay: 0.3s;
}

/* Bottom-right diagonal - Technologies */
.skill-bottom-right {
  top: 60px;
  right: -200px;
  transform: scale(0.8) translateY(-10px);
}

.folder-header:hover~.folder-content .skill-bottom-right {
  transform: scale(1) translateY(0);
  transition-delay: 0.4s;
}

.skill-corner h3 {
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
  color: var(--heading-color);
}

.skill-corner .skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.skill-corner .skill-tag {
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  margin: 0;
}

.folder-content .skills-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.visible-category {
  min-width: 300px;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

@media (max-width: 768px) {
  .skills-container {
    display: flex;
    flex-direction: column;
  }

  .visible-category {
    margin-right: 0;
    margin-bottom: 1rem;
    min-width: 0;
    width: 100%;
  }

  .skills-folder {
    position: relative;
    width: 100%;
  }

  .folder-content {
    position: relative;
    min-width: 100%;
    margin-top: 0.5rem;
  }

  .skill-corner {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    opacity: 0;
    max-width: 100%;
    min-width: 0;
    width: 100%;
    margin-bottom: 0.75rem;
  }

  .folder-header:hover~.folder-content .skill-corner {
    opacity: 1;
    transform: none !important;
  }
}

.skill-item {
  margin-bottom: 1rem;
}

.skill-progress {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  margin-top: 0.5rem;
  overflow: hidden;
}

.skill-level {
  height: 100%;
  background: linear-gradient(to right, var(--accent-color), #ff8c8c);
  border-radius: 3px;
  width: 0;
  transition: width 1s ease;
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.skill-tag {
  padding: 0.5rem 1rem;
  background: rgba(204, 0, 0, 0.1);
  color: var(--accent-color);
  border-radius: 50px;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  transition: var(--transition);
}

.skill-tag:hover {
  background: rgba(204, 0, 0, 0.2);
  transform: translateY(-2px);
}

/* ---------- EDUCATION SECTION ---------- */
.education-details {
  margin-bottom: 1.5rem;
}

.education-details:last-child {
  margin-bottom: 0;
}

.education-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ---------- PROJECT SECTION ---------- */
.project-card {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  padding: 1.5rem;
  transition: var(--transition);
}

.project-card:hover {
  background: rgba(255, 255, 255, 0.7);
  transform: translateY(-5px);
}

.project-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.project-tag {
  padding: 0.3rem 1rem;
  background: rgba(204, 0, 0, 0.1);
  color: var(--accent-color);
  border-radius: 50px;
  font-size: 0.9rem;
}

.project-tools {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.tool-tag {
  padding: 0.3rem 0.8rem;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 50px;
  font-size: 0.8rem;
  margin-left: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Projects header, view-all button and list spacing */
.projects-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.view-all-btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: linear-gradient(45deg, var(--accent-color), #ff4b4b);
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(204, 0, 0, 0.15);
  transition: var(--transition);
}

.view-all-btn:hover {
  transform: translateY(-3px);
}

.projects-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  /* creates vertical gap between project cards */
}

/* ---------- PROJECT FOOTER & GITHUB BUTTON ---------- */
.project-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.github-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #333;
  color: white;
  border-radius: 50%;
  text-decoration: none;
  font-size: 1.2rem;
  transition: var(--transition);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.github-btn:hover {
  background: #24292e;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  color: white;
}

/* Video button - matches project footer styling but with accent color */
.video-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--accent-color);
  color: white;
  border-radius: 50%;
  text-decoration: none;
  font-size: 1rem;
  transition: var(--transition);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.video-btn:hover {
  background: #b30000;
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

/* Dark mode styling for GitHub button */
body.dark .project-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark .github-btn {
  background: #555;
}

body.dark .github-btn:hover {
  background: #666;
  color: white;
}

/* ---------- CERTIFICATIONS SECTION ---------- */
.cert-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.cert-item {
  display: flex;
  align-items: center;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  transition: var(--transition);
  justify-content: space-between;
}

.cert-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--accent-color);
  color: white;
  border-radius: 50%;
  text-decoration: none;
  font-size: 1rem;
  transition: var(--transition);
  box-shadow: 0 2px 10px rgba(204, 0, 0, 0.2);
  flex-shrink: 0;
  margin-left: 1rem;
}

.cert-link-btn:hover {
  background: #ff4b4b;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(204, 0, 0, 0.3);
  color: white;
}

/* Dark mode styling for certificate link button */
body.dark .cert-link-btn {
  background: #ff5f6d;
}

body.dark .cert-link-btn:hover {
  background: #ff8c8c;
  color: white;
}

.cert-item:hover {
  background: rgba(255, 255, 255, 0.7);
  transform: translateY(-5px);
}

.cert-icon {
  font-size: 2rem;
  margin-right: 1.5rem;
  color: #4285F9;
}

.cert-info {
  flex: 1;
}

.cert-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.cert-date {
  color: var(--accent-color);
  /* Match project date font weight/style */
  font-weight: normal;
}

/* ---------- EXTRACURRICULARS SECTION ---------- */
.extra-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.extra-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  transition: var(--transition);
  text-align: center;
}

.extra-item:hover {
  background: rgba(255, 255, 255, 0.7);
  transform: translateY(-5px);
}

.extra-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--accent-color);
}

/* Fix for badminton icon */
.fa-badminton::before {
  content: "\f434";
  /* Using table tennis icon as a replacement */
}

/* ---------- FOOTER ---------- */
footer {
  background: rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* Safari support */
  padding: 2rem 0;
  text-align: center;
  color: var(--text-light);
}

/* ---------- ANIMATIONS ---------- */
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }

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

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

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

@keyframes pulse {

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

  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.3;
  }
}

/* ---------- DARK MODE ---------- */
body.dark {
  --primary-color: #121212;
  --secondary-color: #2a2a2a;
  --text-color: #eaeaea;
  --text-light: #b3b3b3;
  --heading-color: #ffffff;
  --accent-color: #ff5f6d;
  --bg-card: rgba(30, 30, 30, 0.7);
  --shadow: 0 8px 30px rgba(255, 255, 255, 0.05);
}

body.dark .moon-icon {
  opacity: 1;
  transform: translateY(0);
  color: #f5f3ce;
}

body.dark .sun-icon {
  opacity: 0;
  transform: translateY(-20px);
}

body.dark .card {
  border: 1px solid rgba(255, 255, 255, 0.05);
}

body.dark .contact-item,
body.dark .project-card,
body.dark .cert-item,
body.dark .extra-item {
  background: rgba(255, 255, 255, 0.05);
}

body.dark .contact-item:hover,
body.dark .project-card:hover,
body.dark .cert-item:hover,
body.dark .extra-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

body.dark a {
  color: #ff8c8c;
}

body.dark a:hover {
  color: #ffa5a5;
}

/* ---------- RESPONSIVE STYLES ---------- */
@media (max-width: 1024px) {
  .navbar {
    padding: 0 2rem;
  }
}

@media (max-width: 768px) {
  .card {
    flex-direction: column;
    padding: 1.5rem;
  }

  .section-icon {
    margin-right: 0;
    margin-bottom: 1rem;
  }

  .hero h1 {
    font-size: clamp(1.8rem, 5.5vw, 2.5rem);
    white-space: normal;
    overflow: visible;
  }

  .navbar {
    padding: 0 1rem;
  }

  .nav-name {
    display: none;
  }

  .hero-content {
    text-align: center;
    align-items: center;
  }

  h2 {
    font-size: 1.5rem;
  }

  .education-details {
    padding-left: 1rem;
  }

  .cert-item {
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem;
  }

  .cert-icon {
    margin-right: 0.75rem;
    font-size: 1.5rem;
  }

  .extra-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .contact-container {
    flex-direction: column;
    gap: 2rem;
  }

  .contact-left,
  .contact-right {
    width: 100%;
  }

  .projects-header {
    flex-wrap: wrap;
  }
}

.hero-name {
  display: inline-block;
  position: relative;
  text-align: center;
}

.nav-name.active {
  opacity: 1;
  visibility: visible;
}

/* Hero Social Icons */
.hero-social-links {
  display: flex;
  gap: 1.2rem;
  margin-top: 1.2rem;
  width: 100%;
  max-width: 460px;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.8s;
  position: relative;
  z-index: 5;
}

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--accent-color);
  /* Theme accent color */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-color);
  font-size: 1.1rem;
  text-decoration: none;
  transition: all 0.3s ease;
  background: transparent;
  box-shadow: 0 0 5px rgba(204, 0, 0, 0.2);
}

.social-icon:hover {
  background: var(--accent-color);
  color: #fff;
  box-shadow: 0 0 15px rgba(204, 0, 0, 0.5);
  transform: translateY(-3px);
  border-color: var(--accent-color);
}

/* Specific icons adjustment if needed */
.social-icon i {
  transition: transform 0.3s ease;
}

.social-icon:hover i {
  transform: scale(1.1);
}

/* Responsive adjustment */
@media (max-width: 780px) {
  .hero-social-links {
    justify-content: center;
  }
}

/* Combined Contact Section Split Layout */
.contact-container {
  display: flex;
  flex-direction: row;
  gap: 4rem;
  align-items: flex-start;
  margin-top: 2rem;
}

.contact-left,
.contact-right {
  flex: 1;
  width: 50%;
}

.contact-intro {
  font-size: 1.1rem;
  color: var(--text-light);
  margin-bottom: 2rem;
  line-height: 1.6;
}

/* Ensure contact grid in left column flows nicely */
.contact-grid {
  display: flex;
  flex-direction: column;
  /* Stack icons vertically on standard view if preferred, or keep grid */
  gap: 1.5rem;
}

/* Responsive: stack column on mobile */
@media (max-width: 900px) {
  .contact-container {
    flex-direction: column;
    gap: 3rem;
  }

  .contact-left,
  .contact-right {
    width: 100%;
  }

  .contact-grid {
    flex-direction: row;
    /* Horizontal icons on mobile stack */
    flex-wrap: wrap;
    justify-content: center;
  }

  .contact-intro {
    text-align: center;
  }
}

/* Contact Form Styles */
.contact-form {
  margin-top: 0;
  /* Remove top margin as container handles gap */
}

#form-status {
  width: 100%;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  border-radius: 8px;
  padding: 0;
  transition: all 0.3s ease;
  text-align: center;
}

.status-success {
  padding: 10px !important;
  background-color: rgba(46, 204, 113, 0.2);
  border: 1px solid #2ecc71;
  color: #2ecc71;
}

.status-error {
  padding: 10px !important;
  background-color: rgba(231, 76, 60, 0.2);
  border: 1px solid #e74c3c;
  color: #e74c3c;
}

.form-group {
  margin-bottom: 1.25rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  color: var(--text-color);
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent-color);
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 10px rgba(204, 0, 0, 0.1);
}

/* Dark mode inputs */
body.dark .contact-form input,
body.dark .contact-form textarea {
  background: rgba(255, 255, 255, 0.1);
  /* Increased visibility */
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  /* Force bright white text */
}

body.dark .contact-form input::placeholder,
body.dark .contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

/* Fix Card Accent Line Visibility in Dark Mode */
body.dark .card::before {
  /* Use vibrant accent colors instead of dark mode variables */
  background: linear-gradient(to bottom, #ff5f6d, #ffc371);
}

body.dark .contact-form input:focus,
body.dark .contact-form textarea:focus {
  background: rgba(0, 0, 0, 0.5);
  border-color: var(--accent-color);
}

.submit-btn {
  background: linear-gradient(45deg, var(--accent-color), var(--primary-color));
  color: #fff;
  border: none;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 5px 15px rgba(204, 0, 0, 0.2);
}

.submit-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(204, 0, 0, 0.3);
}

/* Back to Top Button */
#back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: var(--accent-color);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

#back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#back-to-top:hover {
  background: var(--primary-color);
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(204, 0, 0, 0.3);
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
    /* Prevent header text cutoff */
    word-break: break-word;
  }

  .hero-subtitle {
    font-size: 1.1rem;
    padding: 0.5rem 1rem;
  }

  .container {
    padding: 0 1.5rem;
    /* Ensure safe padding on mobile */
  }

  .projects-list .project-card,
  .projects-carousel .project-card {
    min-width: 100%;
    /* Force full width on mobile */
    max-width: 100%;
  }

  .nav-links {
    backdrop-filter: blur(15px);
    /* Stronger blur for mobile menu */
    -webkit-backdrop-filter: blur(15px);
  }

  #back-to-top {
    bottom: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
  }
}

/* Projects Grid Layout (for projects.html) */
/* Projects List Layout (Back to List) */
.projects-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1rem 0;
}

.projects-list .project-card,
.projects-carousel .project-card {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  /* Ensure content stays within border radius */
  /* Visual Enhancement */
  border-left: 5px solid var(--accent-color);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(240, 240, 240, 0.5) 100%);
}

/* Dark mode adjustment for card background */
body.dark .projects-list .project-card h3 i,
body.dark .projects-carousel .project-card h3 i {
  color: var(--accent-color);
  /* Match theme accent (Red/Pink) instead of Yellow */
}

/* Fix Technical Skills Accent Line in Dark Mode */
body.dark #technical-skills.card .line-clipper::before {
  background: linear-gradient(to bottom, #ff5f6d, #ffc371);
}

/* Fix Submit Button Gradient in Dark Mode to remain vibrant */
body.dark .submit-btn {
  background: linear-gradient(45deg, #ff5f6d, #ffc371);
}

body.dark .projects-list .project-card,
body.dark .projects-carousel .project-card {
  background: linear-gradient(135deg, #503535 0%, #3e2828 100%);
  /* Lighter warm tint */
}

.projects-list .project-card,
.projects-carousel .project-card {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  /* Ensure content stays within border radius */
  /* Visual Enhancement */
  border-left: 5px solid var(--accent-color);
  /* Warm Sunset Fade: Light Pink to Soft Peach */
  background: linear-gradient(135deg, #fff5f5 0%, #ffe0d5 100%);
}

.projects-list .project-card h3 i,
.projects-carousel .project-card h3 i {
  margin-right: 0.5rem;
  color: var(--accent-color);
  width: 25px;
  text-align: center;
}

/* Hide details (description AND links) by default */
.projects-list .project-card .project-details,
.projects-carousel .project-card .project-details {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.5s ease;
  margin-top: 0;
}


/* Reveal details on hover */
.projects-list .project-card:hover .project-details,
.projects-carousel .project-card:hover .project-details {
  max-height: 500px;
  /* Expand to fit content */
  opacity: 1;
  margin-top: 1rem;
}

/* Hover effects for card itself */
.projects-list .project-card:hover,
.projects-carousel .project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.read-more-btn {
  display: none;
}

/* Projects Carousel styles removed as per request */

/* Fluids Theme Additions */
body.fluids .fluids-icon {
  opacity: 1;
  transform: translateY(0);
  color: #ff5f6d;
}

body.fluids .moon-icon {
  opacity: 0;
  transform: translateY(20px);
}

body.fluids .sun-icon {
  opacity: 0;
  transform: translateY(-20px);
}

#fluid-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  display: none;
}

body.fluids #fluid-canvas {
  display: block;
}

.nav-right {
  position: relative;
}

/* Theme Settings Button */
.theme-settings-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: var(--text-color);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: var(--transition);
}

.theme-settings-btn:hover {
  transform: scale(1.1);
}

body.dark .theme-settings-btn {
  color: #fff;
}

/* Theme Settings Prompt */
.theme-selection-prompt {
  position: absolute;
  top: 70px;
  right: 0;
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 1.5rem;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(204, 0, 0, 0.2);
  z-index: 1005;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

/* Toggled via JS */
.theme-selection-prompt.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

body.dark .theme-selection-prompt {
  background: rgba(30, 30, 30, 0.85);
  border-color: rgba(255, 255, 255, 0.1);
}

.prompt-arrow {
  position: absolute;
  top: -8px;
  right: 20px;
  width: 16px;
  height: 16px;
  background: var(--bg-card);
  transform: rotate(45deg);
  border-left: 1px solid rgba(204, 0, 0, 0.2);
  border-top: 1px solid rgba(204, 0, 0, 0.2);
}

body.dark .prompt-arrow {
  background: rgba(30, 30, 30, 0.85);
  border-color: rgba(255, 255, 255, 0.1);
}

.theme-selection-prompt h3 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(204, 0, 0, 0.2);
  color: var(--heading-color);
  text-align: center;
  font-weight: 700;
}

body.dark .theme-selection-prompt h3 {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.theme-settings-desc {
  display: none;
}

.theme-category-title {
  font-size: 0.8rem;
  color: var(--heading-color);
  margin-top: 0.4rem;
  margin-bottom: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: rgba(0, 0, 0, 0.04);
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  display: block;
  text-align: center;
}

body.dark .theme-category-title {
  background: rgba(255, 255, 255, 0.08);
}

.theme-options-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.theme-checkbox-lbl {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0.7rem 1rem;
  border-radius: 10px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: var(--transition);
  color: var(--text-color);
}

.theme-checkbox-lbl:hover {
  background: rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.theme-check {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  min-width: 18px;
  height: 18px;
  border: 2px solid rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  background: transparent;
  transition: all 0.2s ease;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.theme-check:checked {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

.theme-check:checked::after {
  content: '';
  width: 10px;
  height: 10px;
  background-color: white;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

body.dark .theme-check {
  border-color: rgba(255, 255, 255, 0.6);
}

body.dark .theme-check:checked {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

body.dark .theme-opt-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.theme-opt-btn:hover {
  background: linear-gradient(45deg, var(--accent-color), var(--primary-color));
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
}

/* End of theme selection prompt styling */