body {
          background: linear-gradient(135deg, #f15a24 0%, #c4451e 100%);
          height: 100vh;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }

      .login-card {
          background: white;
          border-radius: 20px;
          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
          width: 100%;
          max-width: 400px;
          padding: 40px;
          animation: slideIn 0.5s ease;
      }

      @keyframes slideIn {
          from {
              transform: translateY(-50px);
              opacity: 0;
          }

          to {
              transform: translateY(0);
              opacity: 1;
          }
      }

      .logo {
          text-align: center;
          margin-bottom: 30px;
      }

      .logo img {
          max-width: 200px;
      }

      .logo h2 {
          color: #333;
          margin-top: 15px;
          font-size: 24px;
      }

      .form-control {
          border-radius: 10px;
          padding: 12px 15px;
          border: 2px solid #eee;
          transition: all 0.3s;
          /* margin-bottom: 20px; */
      }

      .form-control:focus {
          border-color: #f15a24;
          box-shadow: 0 0 0 0.2rem rgba(241, 90, 36, 0.25);
      }

      .input-group-text {
          background: #f8f9fa;
          border: 2px solid #eee;
          border-right: none;
          border-radius: 10px 0 0 10px;
      }

      .btn-login {
          background: #f15a24;
          border: none;
          border-radius: 10px;
          padding: 12px;
          font-size: 18px;
          font-weight: 600;
          color: white;
          width: 100%;
          cursor: pointer;
          transition: all 0.3s;
          margin-top: 10px;
      }

      .btn-login:hover {
          background: #c4451e;
          transform: translateY(-2px);
          box-shadow: 0 5px 15px rgba(241, 90, 36, 0.3);
      }

      .btn-login:active {
          transform: translateY(0);
      }

      .alert {
          border-radius: 10px;
          margin-bottom: 20px;
          display: none;
      }

      .footer-text {
          text-align: center;
          margin-top: 20px;
          color: #666;
          font-size: 14px;
      }

      /*  styles for the home button */
      .home-button {
          margin-top: 15px;
          text-align: center;
      }

      .btn-home {
          background-color: transparent;
          color: #6c757d;
          padding: 8px 20px;
          border-radius: 5px;
          font-size: 14px;
          font-weight: 500;
          text-decoration: none;
          display: inline-block;
          transition: all 0.8s ease;
      }

      .btn-home:hover {
          background-color: #6c757d;
          color: white;
          text-decoration: none;
      }

      .btn-home i {
          margin-right: 8px;
      }

      /* Divider line */
      .divider {
          display: flex;
          align-items: center;
          text-align: center;
          margin: 15px 0 10px;
          color: #aaa;
      }

      .divider::before,
      .divider::after {
          content: "";
          flex: 1;
          border-bottom: 1px solid #ddd;
      }

      .divider::before {
          margin-right: 10px;
      }

      .divider::after {
          margin-left: 10px;
      }

      .divider span {
          font-size: 12px;
      }