/* Logo on Modal Login Form*/
    :root {
      --dark-1: #0a0a0f;
      --dark-2: #121218;
      --dark-3: #1a1a24;
      --dark-4: #2a2a36;
      --primary: #6366f1;
      --primary-dark: #4f46e5;
      --primary-glow: #ffffff;
    }

    .login-logo {
      width: 70px;
      height: 70px;
      object-fit: contain;
      position: relative;
      z-index: 2;
      filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.5));
    }

    .logo-container {
      position: relative;
      display: inline-block;
    }



    /* Modal Animations */
    .login-modal .modal-dialog {
      animation: dark-modal-entrance 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .modal-content {
      border-radius: 16px;
      overflow: hidden;
      transform-origin: center;
      animation: content-float 0.8s ease-out;
      border: 1px solid rgba(255, 255, 255, 0.05);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    }

    /* Dark Gradients */
    .bg-dark-gradient {
      background: linear-gradient(135deg, var(--dark-1) 0%, var(--dark-2) 100%);
      position: relative;
    }

    .bg-dark-2 {
      background: var(--dark-2);
    }

    .bg-dark-3 {
      background: var(--dark-3);
    }

    .border-dark-4 {
      border-color: var(--dark-4) !important;
    }

    .text-light {
      color: black;
    }

    .text-light-2 {
      color: black;
    }

    /* Animated Background */
    .animated-bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background:
        radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.05) 0%, transparent 50%);
      animation: bg-float 20s infinite alternate ease-in-out;
    }
    /* Input Styles */
    .input-group-dark {
      background: var(--dark-3);
      border: 1px solid var(--dark-4);
      border-radius: 10px;
      transition: all 0.3s ease;
    }
    .input-group-dark:focus-within {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
      transform: translateY(-1px);
    }
    .input-group-text {
      background: transparent;
      border: none;
      color: black;
    }
    .form-control {
      background: transparent;
      border: 1px solid #dfe0e0;
      border-radius: 15px;
      color: #2a2a36;
    }
    .form-control:focus {
      background: transparent;
      box-shadow: none;
      color: #2a2a36;
    }
    .form-control::placeholder {
      color: #64748b;
    }
    /* Form Line Animation */
    .form-line-dark {
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--primary), transparent);
      width: 0;
      margin: 0 auto;
      margin-top: 4px;
      border-radius: 2px;
      transition: width 0.4s ease;
    }
    .form-group-animate:focus-within .form-line-dark {
      width: 100%;
    }
    /* Button Styles */
    .btn-dark-gradient {
      background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
      border: none;
      color: white;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .btn-dark-gradient::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: 0.6s;
    }

    .btn-dark-gradient:hover::before {
      left: 100%;
    }

    .btn-hover-glow-dark:hover {
      transform: translateY(-2px);
      box-shadow:
        0 10px 25px rgba(99, 102, 241, 0.3),
        0 0 0 1px rgba(99, 102, 241, 0.1);
    }

    .btn-outline-glow {
      border: 1px solid var(--primary);
      color: var(--primary-glow);
      background: transparent;
      transition: all 0.3s ease;
    }

    .btn-outline-glow:hover {
      background: rgba(99, 102, 241, 0.1);
      border-color: var(--primary-glow);
      box-shadow: 0 0 15px rgba(99, 102, 241, 0.3);
      transform: translateY(-1px);
    }

    /* Text Effects */
    .gradient-text {
      background: linear-gradient(135deg, var(--primary-glow) 0%, #a5b4fc 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .text-primary-glow {
      color: var(--primary-glow);
      text-shadow: 0 0 10px rgba(129, 140, 248, 0.5);
    }

    .hover-glow:hover {
      text-shadow: 0 0 8px rgba(129, 140, 248, 0.8);
      transform: translateX(2px);
      display: inline-block;
    }

    /* Button Close Animation */
    .btn-close-rotate {
      transition: all 0.3s ease;
    }

    .btn-close-rotate:hover {
      transform: rotate(90deg) scale(1.2);
    }

    /* Animations */
    @keyframes dark-modal-entrance {
      0% {
        opacity: 0;
        transform: perspective(1000px) rotateX(-15deg) translateY(30px) scale(0.95);
      }

      100% {
        opacity: 1;
        transform: perspective(1000px) rotateX(0) translateY(0) scale(1);
      }
    }

    @keyframes content-float {
      0% {
        opacity: 0;
        transform: translateY(20px);
      }

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

    @keyframes logo-glow {
      0%,
      100% {
        filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.5));
      }

      50% {
        filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.8));
      }
    }

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

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

    @keyframes bg-float {
      0% {
        transform: translate(0, 0) scale(1);
      }

      100% {
        transform: translate(10px, -10px) scale(1.05);
      }
    }

    /* Form Groups Animation */
    .form-group-animate {
      opacity: 0;
      transform: translateY(10px);
      animation: form-slide-up 0.6s ease forwards;
    }

    .form-group-animate:nth-child(1) {
      animation-delay: 0.1s;
    }

    .form-group-animate:nth-child(2) {
      animation-delay: 0.2s;
    }

    @keyframes form-slide-up {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Checkbox Custom */
    .form-check-input:checked {
      background-color: var(--primary);
      border-color: var(--primary);
    }

    .form-check-input:focus {
      border-color: var(--primary-glow);
      box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.25);
    }

    /* Responsive */
    @media (max-width: 576px) {
      .modal-body {
        padding: 1.5rem;
      }

      .login-logo {
        width: 60px;
        height: 60px;
      }

      .logo-ring {
        width: 75px;
        height: 75px;
      }
    }
    /* Loading Animation */
    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.5;
      }
    }

    .loading-pulse {
      animation: pulse 1.5s infinite;
    }

    /* Responsive adjustments */
    @media (max-width: 576px) {
      .modal-body {
        padding: 1.5rem;
      }

      .login-logo {
        width: 60px;
        height: 60px;
      }
    }