/* Liquid wobble animation */
    @keyframes liquidWobble {
      0% {
        transform: perspective(600px) translateZ(10px) scale(1) translateX(0) translateY(0) skew(0deg);
      }
      15% {
        transform: perspective(600px) translateZ(15px) scale(1.15) translateX(-3px) translateY(2px) skew(4deg);
      }
      30% {
        transform: perspective(600px) translateZ(15px) scale(0.95) translateX(3px) translateY(-2px) skew(-4deg);
      }
      45% {
        transform: perspective(600px) translateZ(14px) scale(1.1) translateX(-2px) translateY(1px) skew(3deg);
      }
      60% {
        transform: perspective(600px) translateZ(13px) scale(0.98) translateX(2px) translateY(-1px) skew(-2deg);
      }
      75% {
        transform: perspective(600px) translateZ(14px) scale(1.05) translateX(-1px) translateY(0.5px) skew(1deg);
      }
      90% {
        transform: perspective(600px) translateZ(12px) scale(1.02) translateX(0.5px) translateY(-0.5px) skew(-0.5deg);
      }
      100% {
        transform: perspective(600px) translateZ(10px) scale(1) translateX(0) translateY(0) skew(0deg);
      }
    }

    /* Ripple animation for splash effect */
    @keyframes ripple {
      0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.8;
      }
      100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
      }
    }

    /* Dark Mode */
    .dark-mode {
      background-color: #2b2b2b;
      color: #edf2f7;
    }
    .dark-mode h2 { 
      color: #edf2f7;
    }
    .dark-mode h3 { 
      color: #edf2f7;
    }
    /* Dark mode for the card */
.dark-mode .bg-white {
  background-color: #2d3748; /* Tailwind bg-gray-800 */
}
.dark-mode .shadow {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.dark-mode .bg-white h3,
.dark-mode .bg-white p {
  color: #edf2f7; /* Matches body text in dark mode */
}

    header a:hover {
  color: #E83828 !important; /* Orange-500 */
}
.dark-mode header a:hover {
  color: #E83828 !important; /* Orange-400 */
}

    /* Circular 3D Button with Orange Color */
    .dark-mode-btn {
      border-radius: 50%;
      background: linear-gradient(145deg, #f97316, #e55d15);
      color: white;
      width: 60px;
      height: 60px;
      font-size: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), inset 0 -6px 12px rgba(0, 0, 0, 0.3), inset 0 6px 12px rgba(255, 255, 255, 0.5);
      cursor: pointer;
      transition: all 0.3s ease-in-out;
      position: relative;
      overflow: hidden;
      transform: perspective(600px) translateZ(10px);
    }

    /* Hover effect */
    .dark-mode-btn:hover {
      background: linear-gradient(145deg, #fb923c, #f97316);
      transform: perspective(600px) translateZ(25px) scale(1.15);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), inset 0 -6px 12px rgba(0, 0, 0, 0.3), inset 0 6px 12px rgba(255, 255, 255, 0.5);
    }

    /* Click effect with liquid wobble */
    .dark-mode-btn:active {
      animation: liquidWobble 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      transform: perspective(600px) translateZ(5px) scale(0.9);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), inset 0 -4px 8px rgba(0, 0, 0, 0.3), inset 0 4px 8px rgba(255, 255, 255, 0.5);
    }

    /* Primary ripple effect */
    .dark-mode-btn::before {
      content: "";
      position: absolute;
      background: rgba(255, 255, 255, 0.6);
      border-radius: 50%;
      width: 180%;
      height: 180%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      transition: none;
      opacity: 0;
    }

    /* Secondary ripple effect */
    .dark-mode-btn::after {
      content: "";
      position: absolute;
      background: rgba(255, 255, 255, 0.4);
      border-radius: 50%;
      width: 140%;
      height: 140%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      transition: none;
      opacity: 0;
    }

    /* Tertiary ripple effect for extra fluidity */
    .dark-mode-btn::first {
      content: "";
      position: absolute;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      width: 100%;
      height: 100%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      transition: none;
      opacity: 0;
    }

    .dark-mode-btn:active::before {
      animation: ripple 0.7s ease-out;
    }

    .dark-mode-btn:active::after {
      animation: ripple 0.9s ease-out 0.1s;
    }

    .dark-mode-btn:active::first {
      animation: ripple 1.1s ease-out 0.2s;
    }
    /* Responsive adjustments for dark mode button */
@media (max-width: 640px) { /* Targets small screens, e.g., mobile */
  .dark-mode-btn {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) { /* Targets very small screens */
  .dark-mode-btn {
    width: 30px;
    height: 30px;
    font-size: 1.2rem;
  }
}