/* =================================================================
   HOMEPAGE SPECIFIC STYLES
   Unique styles for index.html - shared styles in shared.css
   ================================================================= */

/* ===== Base Typography (Homepage-specific) ===== */
body {
  margin: 0;
  text-align: center;
  font-family: "Merienda", cursive;
  font-size: 17px;
  font-weight: 400;
  background-color: #fbfdfd;
  color: #3d4a49;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.5s ease, color 0.5s ease;
  overflow-x: hidden;
}

h1 {
  margin: 0;
  font-family: "Sacramento", cursive;
  font-size: clamp(4.5rem, 12vw, 8.625rem);
  color: #66bfbf;
  transition: all 0.4s ease;
  filter: drop-shadow(0 0 30px rgba(102, 191, 191, 0.5));
}

.subtitle {
  font-family: "Merienda", cursive;
  font-size: clamp(1.2rem, 3vw, 2rem);
  color: #66bfbf;
  font-weight: 400;
  margin-top: -10px;
}

/* "Pro" badge styling */
.pro {
  font-weight: 700;
  padding: 2px 2px;
  border-radius: 5px;
  background-color: #4c29bd;
  color: #ffffff;
  font-size: 0.98em;
  vertical-align: middle;
  text-shadow: none;
  transition: all 0.3s ease;
}

h3 {
  font-weight: 700;
  font-size: 2.2rem;
  color: #11999e;
  transition: color 0.4s ease;
}

h4 {
  font-weight: 700;
  font-size: 1.5rem;
  color: #11999e;
  margin: 0;
  transition: color 0.4s ease;
}

p {
  line-height: 1.8;
}

hr {
  border: none;
  height: 3px;
  width: 60px;
  margin: 80px auto;
  background: linear-gradient(90deg, transparent, #11999e, transparent);
  border-radius: 3px;
  transition: background 0.4s ease;
}

a {
  color: #11999e;
  text-decoration: none;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

a:hover {
  color: #30e3cb;
  text-shadow: 0 0 10px rgba(48, 227, 203, 0.5);
}

/* ===== Hero Section ===== */
.top-container {
  background: linear-gradient(135deg, #d1f8f1 0%, #c9eff6 100%);
  height: 100vh;
  min-height: 600px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title-text {
  position: relative;
  z-index: 2;
  margin-bottom: 25vh;
  animation: float 6s ease-in-out infinite;
}

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

@keyframes float-2 {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

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

@keyframes float-4 {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

.top-cloud,
.top-cloud-2,
.bottom-cloud,
.bottom-cloud-2 {
  position: absolute;
  z-index: 1;
  opacity: 0.8;
}

.top-cloud {
  top: 8%;
  right: 10%;
  width: 14vw;
  animation: float-2 8s ease-in-out infinite;
}

.top-cloud-2 {
  top: 12%;
  left: 8%;
  width: 12vw;
  animation: float-4 8s ease-in-out infinite 0.5s;
}

.bottom-cloud {
  bottom: 22%;
  left: 10%;
  width: 14vw;
  animation: float-3 7s ease-in-out infinite;
}

.bottom-cloud-2 {
  bottom: 30%;
  right: 18%;
  width: 12vw;
  animation: float-2 8s ease-in-out infinite 1s;
}

.mountain {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 950px;
  height: auto;
  z-index: 0;
  transition: filter 0.5s ease;
}

/* ===== Middle Content Section ===== */
.middle-container {
  padding: 80px 20px;
  position: relative;
}

.profile,
.skills,
.contact-me {
  max-width: 700px;
  margin: 50px auto;
  z-index: 1;
  position: relative;
}

.pimg {
  width: 200px;
  height: 250px;
  border-radius: 15px;
  object-fit: cover;
  transition: all 0.5s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.pimg:hover {
  transform: scale(1.05) rotateZ(2deg);
}

.intro {
  max-width: 600px;
  margin: 20px auto;
}

.skill-row {
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 100px auto;
  text-align: left;
  padding: 30px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  border: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  will-change: transform, box-shadow;
}

.skill-row:hover {
  transform: translateY(-15px);
  box-shadow: 0 25px 50px rgba(17, 153, 158, 0.4);
}

.skill-icon {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
  transition: transform 0.4s ease;
  will-change: transform;
}

.skill-row:hover .skill-icon {
  transform: scale(1.15) rotateZ(10deg);
}

.skill-row-reverse {
  flex-direction: row-reverse;
}

.skill-row-reverse .skill-description {
  text-align: right;
}

.explore-developer {
  margin: 80px auto;
  max-width: 600px;
  padding: 50px;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(17, 153, 158, 0.3);
  position: relative;
  overflow: hidden;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  will-change: transform, box-shadow;
}

.explore-developer:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 25px 50px rgba(17, 153, 158, 0.4);
}

.funny-line {
  color: #11999e;
  font-size: 18px;
  margin-bottom: 20px;
  transition: color 0.4s ease;
  font-style: italic;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
  background: linear-gradient(135deg, #11999e 0%, #30e3cb 50%, #11999e 100%);
  background-size: 200% 100%;
  border: none;
  border-radius: 60px;
  font-family: "Merienda", cursive;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  padding: 22px 50px;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 10px 30px rgba(17, 153, 158, 0.4),
    0 5px 15px rgba(48, 227, 203, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation: buttonPulse 3s ease-in-out infinite;
  backdrop-filter: blur(10px);
  letter-spacing: 0.5px;
}

/* Pulsing glow animation */
@keyframes buttonPulse {
  0%, 100% {
    background-position: 0% 50%;
    box-shadow: 
      0 10px 30px rgba(17, 153, 158, 0.4),
      0 5px 15px rgba(48, 227, 203, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
  50% {
    background-position: 100% 50%;
    box-shadow: 
      0 10px 40px rgba(17, 153, 158, 0.6),
      0 5px 20px rgba(48, 227, 203, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
}

/* Shimmer effect overlay */
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s ease;
}

.btn:hover::before {
  left: 100%;
}

/* Hover state */
.btn:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 
    0 20px 50px rgba(17, 153, 158, 0.6),
    0 10px 30px rgba(48, 227, 203, 0.5),
    inset 0 2px 0 rgba(255, 255, 255, 0.4);
  animation: buttonPulse 1.5s ease-in-out infinite;
}

/* Active/pressed state */
.btn:active {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 
    0 10px 25px rgba(17, 153, 158, 0.5),
    0 5px 15px rgba(48, 227, 203, 0.4);
}

/* ========================================================
   CONTACT FORM STYLES
   ======================================================== */
.contact-form {
  margin-top: 40px;
  text-align: left;
}

.form-row {
  display: flex;
  gap: 20px;
}

.form-group {
  position: relative;
  margin-bottom: 25px;
  flex: 1;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 18px 18px 18px 50px;
  border-radius: 10px;
  border: 2px solid #dce5e4;
  background-color: #f4f8f9;
  font-family: "Merienda", cursive;
  font-size: 1rem;
  color: #3d4a49;
  box-sizing: border-box;
  transition: all 0.3s ease;
  -webkit-appearance: none;
}

.form-group textarea {
  padding: 18px;
  resize: vertical;
}

.form-icon {
  position: absolute;
  left: 18px;
  top: 19px;
  font-size: 1.5rem;
  color: #a1b0af;
  pointer-events: none;
  transition: color 0.3s ease;
}

.form-group label {
  position: absolute;
  left: 50px;
  top: 19px;
  color: #8892b0;
  pointer-events: none;
  transition: all 0.3s ease;
}

.form-group textarea ~ label {
  left: 18px;
}

/* Floating Label Effect */
.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label {
  top: -10px;
  left: 15px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #11999e;
  background-color: #fbfdfd;
  padding: 0 5px;
}

/* Focus State */
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #66bfbf;
  box-shadow: 0 0 10px rgba(102, 191, 191, 0.5);
}

.form-group input:focus ~ .form-icon,
.form-group input:not(:placeholder-shown) ~ .form-icon,
.form-group textarea:focus ~ .form-icon,
.form-group textarea:not(:placeholder-shown) ~ .form-icon {
  color: #11999e;
}

/* Error Message Styles */
.error-message {
  display: none;
  color: #ff5252;
  font-size: 0.85rem;
  margin-top: 5px;
  font-weight: 600;
  position: absolute;
  bottom: -22px;
  left: 0;
}

.form-group.error .error-message {
  display: block;
}

.form-group.error input,
.form-group.error textarea {
  border-color: #ff5252;
  animation: shake 0.5s;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Button with Spinner */
.contact-form .btn {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.contact-form .btn:disabled {
  cursor: not-allowed;
  background: #a1b0af;
  transform: none;
}

.btn-spinner {
  display: inline-flex;
  align-items: center;
}

.spinner {
  width: 20px;
  height: 20px;
  animation: rotate 2s linear infinite;
}

.spinner .path {
  stroke: #ffffff;
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
}

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

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

/* Form Status Messages */
#form-status {
  text-align: center;
  margin-bottom: 15px;
  padding: 12px;
  border-radius: 8px;
  display: none;
  font-weight: 700;
}

#form-status.success {
  display: block;
  background-color: #e4f9f5;
  color: #11999e;
}

#form-status.error {
  display: block;
  background-color: #f8d7da;
  color: #721c24;
}

/* ===== Footer (Homepage-specific) ===== */
.bottom-container {
  background: linear-gradient(135deg, #66bfbf 0%, #40a4c8 100%);
  padding: 60px 20px;
  position: relative;
  overflow: hidden;
}

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

.footer-links a {
  color: #ffffff;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 12px 25px;
  border-radius: 25px;
  transition: transform 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  will-change: transform;
}

.footer-links a:hover {
  transform: translateY(-8px) scale(1.15);
}

.footer-links a.linkedin:hover {
  background: #0a66c2;
  box-shadow: 0 8px 30px rgba(10, 102, 194, 0.4);
}

.footer-links a.github:hover {
  background: #171515;
  box-shadow: 0 8px 30px rgba(23, 21, 21, 0.4);
}

.footer-links a.medium:hover {
  background: #12100e;
  box-shadow: 0 8px 30px rgba(18, 16, 14, 0.4);
}

.footer-links a.kaggle:hover {
  background: #20beff;
  box-shadow: 0 8px 30px rgba(32, 190, 255, 0.4);
}

.copyright {
  font-size: 0.9rem;
  color: #3d4a49;
  padding-top: 20px;
}

/* =================================================================
   DARK MODE OVERRIDES (Homepage-specific)
   ================================================================= */

body:not(.light-mode) {
  background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #2d1b69 100%);
  color: #e0e6ed;
}

body:not(.light-mode) .top-container {
  background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #2d1b69 100%);
}

body:not(.light-mode) .top-container::before,
body:not(.light-mode) .middle-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
      circle at 20% 30%,
      rgba(0, 255, 255, 0.15) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(255, 0, 255, 0.15) 0%,
      transparent 50%
    );
  pointer-events: none;
}

body:not(.light-mode) h1 {
  color: #66ccff;
  text-shadow: 0 0 2px #00ccff, 0 0 6px #00ccff, 0 0 14px #00aaff,
    0 0 28px #0088ff, 0 0 55px #0066ff, 0 0 90px #0044ff;
  animation: neonCycle 6s infinite;
}

@keyframes neonCycle {
  0% {
    opacity: 0.9;
    filter: brightness(1.2);
    text-shadow: 0 0 2px #00ccff, 0 0 6px #00ccff, 0 0 20px #00aaff,
      0 0 40px #0088ff;
  }
  5% {
    opacity: 0.5;
    filter: brightness(0.6);
    text-shadow: 0 0 1px #00aaff, 0 0 4px #00ccff, 0 0 12px #0066ff;
  }
  12% {
    opacity: 1;
    filter: brightness(2.2);
    text-shadow: 0 0 3px #00ccff, 0 0 9px #00ccff, 0 0 25px #00aaff,
      0 0 60px #0088ff;
  }
  18% {
    opacity: 0.6;
    filter: brightness(0.8);
    text-shadow: 0 0 2px #00aaff, 0 0 5px #00ccff, 0 0 15px #0088ff;
  }
  25% {
    opacity: 1;
    filter: brightness(2.5);
    text-shadow: 0 0 4px #00ccff, 0 0 12px #00aaff, 0 0 30px #0088ff,
      0 0 70px #0066ff;
  }
  40% {
    opacity: 1;
    filter: brightness(2);
    text-shadow: 0 0 3px #00ccff, 0 0 10px #00aaff, 0 0 25px #0088ff,
      0 0 60px #0066ff;
  }
  55% {
    opacity: 0.95;
    filter: brightness(1.7);
    text-shadow: 0 0 2px #00aaff, 0 0 9px #00ccff, 0 0 22px #0088ff,
      0 0 55px #0066ff;
  }
  65% {
    opacity: 1;
    filter: brightness(2.1);
    text-shadow: 0 0 3px #00ccff, 0 0 11px #00aaff, 0 0 27px #0088ff,
      0 0 65px #0044ff;
  }
  75% {
    opacity: 0.7;
    filter: brightness(1);
    text-shadow: 0 0 2px #00aaff, 0 0 6px #00ccff, 0 0 18px #0088ff;
  }
  85% {
    opacity: 0.4;
    filter: brightness(0.5);
    text-shadow: 0 0 1px #0088ff, 0 0 4px #00ccff, 0 0 12px #0066ff;
  }
  100% {
    opacity: 0.95;
    filter: brightness(1.9);
    text-shadow: 0 0 3px #00ccff, 0 0 10px #00aaff, 0 0 25px #0088ff,
      0 0 60px #0044ff;
  }
}

body:not(.light-mode) .subtitle {
  color: #ff00ff;
  text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff;
}

body:not(.light-mode) .pro {
  background: linear-gradient(135deg, #ffdd00, #f8b12e, #ffdd00);
  color: #000000;
  box-shadow: 0 0 12px rgba(255, 221, 0, 0.9), 0 0 20px rgba(255, 49, 49, 0.8),
    0 0 28px rgba(255, 0, 153, 0.7), 0 0 40px rgba(255, 49, 49, 0.6);
}

body:not(.light-mode) h3,
body:not(.light-mode) h4 {
  background: linear-gradient(45deg, #00ffff, #ff00ff, #00ff88);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px rgba(0, 255, 255, 0.7));
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

body:not(.light-mode) hr {
  background: linear-gradient(
    90deg,
    transparent,
    #00ffff,
    #ff00ff,
    #00ff88,
    #00ffff,
    transparent
  );
  height: 4px;
  width: 300px;
  box-shadow: 0 0 20px #00ffff, 0 0 40px #ff00ff;
  animation: neonLine 4s linear infinite;
}

@keyframes neonLine {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

body:not(.light-mode) .middle-container {
  background: #0a0e27;
}

body:not(.light-mode) .pimg {
  border: 3px solid transparent;
  background: linear-gradient(#0a0e27, #0a0e27) padding-box,
    linear-gradient(45deg, #00ffff, #ff00ff) border-box;
  box-shadow: 0 0 40px rgba(0, 255, 255, 0.6);
}

body:not(.light-mode) .skill-row {
  background: rgba(26, 31, 58, 0.8);
  border: none;
  box-shadow: 0 0 40px rgba(0, 255, 255, 0.3);
}

body:not(.light-mode) .skill-row:hover {
  box-shadow: 0 0 60px rgba(0, 255, 255, 0.8);
}

body:not(.light-mode) .skill-icon {
  filter: drop-shadow(0 0 30px rgba(0, 255, 255, 0.8));
}

body:not(.light-mode) .explore-developer {
  background: rgba(26, 31, 58, 0.9);
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 40px rgba(0, 255, 255, 0.3);
}

body:not(.light-mode) .explore-developer::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 25px;
  background: linear-gradient(45deg, #00ffff, #ff00ff);
  z-index: -1;
  animation: borderAnimation 5s linear infinite;
}

@keyframes borderAnimation {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

body:not(.light-mode) .explore-developer:hover {
  box-shadow: 0 0 60px rgba(0, 255, 255, 0.8);
}

body:not(.light-mode) .funny-line {
  color: #64ffda;
  text-shadow: 0 0 15px rgba(100, 255, 218, 0.6);
}

body:not(.light-mode) .btn {
  background: linear-gradient(135deg, #00d9ff 0%, #00ffff 25%, #ff00ff 50%, #00ffff 75%, #00d9ff 100%);
  background-size: 300% 100%;
  color: #0a0e27;
  font-weight: 900;
  box-shadow: 
    0 10px 40px rgba(0, 217, 255, 0.6),
    0 5px 20px rgba(255, 0, 255, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    0 0 30px rgba(0, 255, 255, 0.3);
  animation: neonButtonPulse 3s ease-in-out infinite;
}

@keyframes neonButtonPulse {
  0%, 100% {
    background-position: 0% 50%;
    box-shadow: 
      0 10px 40px rgba(0, 217, 255, 0.6),
      0 5px 20px rgba(255, 0, 255, 0.4),
      inset 0 2px 0 rgba(255, 255, 255, 0.4),
      0 0 30px rgba(0, 255, 255, 0.3);
  }
  33% {
    background-position: 50% 50%;
    box-shadow: 
      0 10px 45px rgba(255, 0, 255, 0.7),
      0 5px 25px rgba(0, 255, 255, 0.5),
      inset 0 2px 0 rgba(255, 255, 255, 0.5),
      0 0 40px rgba(255, 0, 255, 0.4);
  }
  66% {
    background-position: 100% 50%;
    box-shadow: 
      0 10px 50px rgba(0, 255, 255, 0.8),
      0 5px 30px rgba(0, 217, 255, 0.6),
      inset 0 2px 0 rgba(255, 255, 255, 0.6),
      0 0 50px rgba(0, 255, 255, 0.5);
  }
}

body:not(.light-mode) .btn::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  );
}

body:not(.light-mode) .btn:hover {
  transform: translateY(-10px) scale(1.08);
  box-shadow: 
    0 20px 60px rgba(0, 217, 255, 0.8),
    0 10px 40px rgba(255, 0, 255, 0.6),
    inset 0 3px 0 rgba(255, 255, 255, 0.6),
    0 0 60px rgba(0, 255, 255, 0.6);
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
  animation: neonButtonPulse 1.5s ease-in-out infinite;
}

body:not(.light-mode) .btn:active {
  transform: translateY(-6px) scale(1.05);
}

/* Dark Mode: Contact Form */
body:not(.light-mode) .form-group input,
body:not(.light-mode) .form-group textarea {
  background-color: #0b1a30;
  border: 2px solid rgba(100, 255, 218, 0.2);
  color: #e0e6ed;
}

body:not(.light-mode) .form-icon {
  color: #4a6382;
}

body:not(.light-mode) .form-group input:focus + label,
body:not(.light-mode) .form-group input:not(:placeholder-shown) + label,
body:not(.light-mode) .form-group textarea:focus + label,
body:not(.light-mode) .form-group textarea:not(:placeholder-shown) + label {
  color: #64ffda;
  background-color: #0a0e27;
}

body:not(.light-mode) .form-group input:focus ~ .form-icon,
body:not(.light-mode) .form-group input:not(:placeholder-shown) ~ .form-icon,
body:not(.light-mode) .form-group textarea:focus ~ .form-icon,
body:not(.light-mode)
  .form-group
  textarea:not(:placeholder-shown)
  ~ .form-icon {
  color: #64ffda;
}

body:not(.light-mode) .form-group input:focus,
body:not(.light-mode) .form-group textarea:focus {
  border-color: #64ffda;
  box-shadow: 0 0 15px rgba(100, 255, 218, 0.3);
}

body:not(.light-mode) .form-group.error input,
body:not(.light-mode) .form-group.error textarea {
  border-color: #ff5252;
  box-shadow: 0 0 10px rgba(255, 82, 82, 0.3);
}

body:not(.light-mode) .error-message {
  color: #ff5252;
  text-shadow: 0 0 10px rgba(255, 82, 82, 0.5);
}

body:not(.light-mode) .contact-form .btn:disabled {
  background: linear-gradient(45deg, #2c3e50, #34495e);
  color: #8892b0;
  box-shadow: none;
}

body:not(.light-mode) .spinner .path {
  stroke: #0a0e27;
}

body:not(.light-mode) #form-status.success {
  background-color: rgba(100, 255, 218, 0.1);
  color: #64ffda;
}

body:not(.light-mode) #form-status.error {
  background-color: rgba(255, 82, 82, 0.1);
  color: #ff5252;
}

/* Dark Mode: Footer */
body:not(.light-mode) .bottom-container {
  background: #0a0e27;
}

body:not(.light-mode) .footer-links a {
  background: rgba(26, 31, 58, 0.6);
  border: 2px solid rgba(0, 255, 255, 0.3);
}

body:not(.light-mode) .footer-links a:hover {
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.8);
  border-color: #00ffff;
}

body:not(.light-mode) .copyright {
  color: #64ffda;
  text-shadow: 0 0 15px rgba(100, 255, 218, 0.5);
}

/* =================================================================
   RESPONSIVE STYLES
   ================================================================= */
@media (max-width: 767px) {
  .skill-row,
  .skill-row-reverse {
    flex-direction: column;
    text-align: center;
  }
  
  .skill-row .skill-description,
  .skill-row-reverse .skill-description {
    text-align: center;
  }
  
  .footer-links {
    gap: 15px;
  }
  
  .footer-links a {
    padding: 10px 20px;
    font-size: 1rem;
  }
  
  .form-row {
    flex-direction: column;
    gap: 0;
  }
}