@import url("https://fonts.googleapis.com/css2?family=Mona+Sans:wght@400;500;600;700&family=Urbanist:wght@500;600;700;800;900&display=swap");

      * {
        box-sizing: border-box;
      }
      html,
      body {
        height: 100vh !important;
        width: 100vw !important;
        max-height: 100vh !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #f8faf7 !important;
        font-family:
          "Mona Sans",
          "Urbanist",
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          Roboto,
          sans-serif !important;
        color: #1f1f1f !important;
      }
      .navbar,
      nav,
      .section.footer,
      footer {
        display: none !important;
      }
      .auth-split-container {
        display: flex !important;
        width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
      }
      .auth-left-panel {
        width: 45% !important;
        height: 100vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 2.5rem !important;
        background: #f5f0e8 !important;
        position: relative !important;
        z-index: 2 !important;
      }
      .auth-right-panel {
        width: 55% !important;
        height: 100vh !important;
        position: relative !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: flex-start !important;
        padding: 3.5rem !important;
        background: linear-gradient(
          135deg,
          #091e3a 0%,
          #2597d0 50%,
          #1a508b 100%
        ) !important;
      }
      .auth-right-img {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) scale(1.02) !important;
        width: 90% !important;
        height: 90% !important;
        object-fit: contain !important;
        z-index: 1 !important;
        filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.35)) !important;
        animation: floatShowcase 8s ease-in-out infinite alternate !important;
      }
      @keyframes floatShowcase {
        0% {
          transform: translate(-50%, -50%) scale(1.02) translateY(0px)
            rotate(0deg);
        }
        50% {
          transform: translate(-50%, -52%) scale(1.04) translateY(-10px)
            rotate(0.5deg);
        }
        100% {
          transform: translate(-50%, -48%) scale(1.02) translateY(8px)
            rotate(-0.5deg);
        }
      }
      .auth-right-overlay-glow {
        position: absolute !important;
        width: 400px !important;
        height: 400px !important;
        border-radius: 50% !important;
        background: radial-gradient(
          circle,
          rgba(37, 151, 208, 0.4) 0%,
          rgba(0, 0, 0, 0) 70%
        ) !important;
        top: 20% !important;
        right: 10% !important;
        z-index: 0 !important;
        pointer-events: none !important;
        animation: pulseGlow 6s ease-in-out infinite alternate !important;
      }
      @keyframes pulseGlow {
        0% {
          opacity: 0.4;
          transform: scale(1);
        }
        100% {
          opacity: 0.8;
          transform: scale(1.2);
        }
      }
      .auth-right-content {
        position: relative !important;
        z-index: 3 !important;
        color: #ffffff !important;
        max-width: 460px !important;
        background: rgba(7, 7, 9, 0.6) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        padding: 1.75rem 2.25rem !important;
        border-radius: 24px !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important;
        animation: floatContent 6s ease-in-out infinite alternate !important;
      }
      @keyframes floatContent {
        0% {
          transform: translateY(0px);
        }
        100% {
          transform: translateY(-8px);
        }
      }
      .auth-right-badge {
        display: inline-block !important;
        font-family: "Urbanist", sans-serif !important;
        font-size: 0.75rem !important;
        font-weight: 800 !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase !important;
        color: #2597d0 !important;
        background: rgba(37, 151, 208, 0.18) !important;
        padding: 0.35rem 0.85rem !important;
        border-radius: 50px !important;
        margin-bottom: 0.75rem !important;
        border: 1px solid rgba(37, 151, 208, 0.3) !important;
      }
      .auth-right-title {
        font-family: "Urbanist", sans-serif !important;
        font-size: 1.85rem !important;
        font-weight: 800 !important;
        margin-bottom: 0.5rem !important;
        color: #ffffff !important;
        letter-spacing: -0.5px !important;
        line-height: 1.2 !important;
      }
      .auth-right-sub {
        font-family: "Mona Sans", sans-serif !important;
        font-size: 0.9rem !important;
        color: rgba(255, 255, 255, 0.85) !important;
        margin: 0 !important;
        line-height: 1.55 !important;
      }

      .authentication-card {
        max-width: 400px !important;
        width: 100% !important;
        padding: 2.25rem 2.5rem !important;
        border-radius: 24px !important;
        background: #ffffff !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06) !important;
        border: 1px solid rgba(0, 0, 0, 0.04) !important;
      }
      .authentication-logo-wrap {
        margin-bottom: 1.25rem !important;
        display: block !important;
        text-align: center !important;
        text-decoration: none !important;
      }
      .authentication-logo {
        height: 38px !important;
        width: auto !important;
        margin: 0 auto !important;
        display: block !important;
      }
      .authentication-title {
        font-family: "Urbanist", sans-serif !important;
        font-size: 1.75rem !important;
        font-weight: 800 !important;
        margin-bottom: 0.35rem !important;
        text-align: center !important;
        color: #1f1f1f !important;
        letter-spacing: -0.5px !important;
      }
      .authentication-details {
        font-family: "Mona Sans", sans-serif !important;
        font-size: 0.88rem !important;
        margin-bottom: 1.5rem !important;
        text-align: center !important;
        color: #707070 !important;
      }
      .form-group {
        margin-bottom: 1rem !important;
      }
      .form-label,
      .input-label {
        font-family: "Urbanist", sans-serif !important;
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        margin-bottom: 0.35rem !important;
        display: block !important;
        color: #1f1f1f !important;
      }
      .input-field,
      .sign-in-input-field,
      input[type="email"],
      input[type="password"],
      input[type="text"] {
        height: 2.85rem !important;
        font-family: "Mona Sans", sans-serif !important;
        font-size: 0.9rem !important;
        margin-bottom: 0 !important;
        padding: 0 1rem !important;
        border-radius: 12px !important;
        border: 1.5px solid #e2e8f0 !important;
        width: 100% !important;
        background: #f8fafc !important;
        color: #0f172a !important;
        transition: all 0.2s ease !important;
      }
      .input-field:focus,
      input:focus {
        outline: none !important;
        border-color: #2597d0 !important;
        background: #ffffff !important;
        box-shadow: 0 0 0 4px rgba(37, 151, 208, 0.12) !important;
      }
      .primary-button {
        height: 3rem !important;
        line-height: 3rem !important;
        font-family: "Urbanist", sans-serif !important;
        font-size: 0.95rem !important;
        border-radius: 12px !important;
        margin-top: 0.5rem !important;
        width: 100% !important;
        background: #2597d0 !important;
        color: #ffffff !important;
        border: none !important;
        cursor: pointer !important;
        font-weight: 800 !important;
        letter-spacing: 0.5px !important;
        text-align: center !important;
        display: block !important;
        box-shadow: 0 8px 20px rgba(37, 151, 208, 0.3) !important;
        transition: all 0.2s ease !important;
      }
      .primary-button:hover {
        background: #1b7eb2 !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 12px 25px rgba(37, 151, 208, 0.4) !important;
      }
      .forgot-link,
      .sign-up-link {
        font-family: "Urbanist", sans-serif !important;
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        color: #2597d0 !important;
        text-decoration: none !important;
        transition: color 0.2s ease !important;
      }
      .forgot-link:hover,
      .sign-up-link:hover {
        color: #1b7eb2 !important;
        text-decoration: underline !important;
      }

      @media (max-width: 991px) {
        .auth-right-panel {
          display: none !important;
        }
        .auth-left-panel {
          width: 100% !important;
        }
      }