/* Preloader Styles */
    #preloader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4));
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      transition: opacity 0.5s ease, visibility 0.5s ease;
    }

    #preloader.hidden {
      opacity: 0;
      visibility: hidden;
    }

    .loader-container {
      position: relative;
      width: 150px;
      height: 150px;
    }

    .loader-image {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80px;
      height: 80px;
      border-radius: 50%;
      animation: pulse 1.5s ease-in-out infinite;
      z-index: 2;
    }

    /* Ripple Effects */
    .ripple {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80px;
      height: 80px;
      border-radius: 50%;
      border: 3px solid #4a90e2;
      opacity: 0;
    }

    .ripple:nth-child(1) {
      animation: ripple 2s ease-out infinite;
    }

    .ripple:nth-child(2) {
      animation: ripple 2s ease-out 0.5s infinite;
    }

    .ripple:nth-child(3) {
      animation: ripple 2s ease-out 1s infinite;
    }

    @keyframes pulse {
      0%, 100% {
        transform: translate(-50%, -50%) scale(1);
      }
      50% {
        transform: translate(-50%, -50%) scale(1.1);
      }
    }

    @keyframes ripple {
      0% {
        width: 80px;
        height: 80px;
        opacity: 1;
      }
      100% {
        width: 200px;
        height: 200px;
        opacity: 0;
      }
    }