/* General Section Styling */
.signup-section {
  padding: 40px 20px;
  background-color: #f4f7f6; /* Light background */
  font-family: 'Segoe UI', sans-serif;
}

/* Container for the Signup Form */
.signup-container {
  max-width: 500px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 30px;
  text-align: center;
}

/* Title of the Section */
.signup-container h2 {
  font-size: 2rem;
  color: #064635;
  margin-bottom: 20px;
  font-weight: bold;
}



    .container { max-width: 400px; margin: 50px auto; padding: 20px; background: #fff; border-radius: 10px; box-shadow: 0 0 15px #ddd; }
    .error { color: red; }
    .success { color: green; }
    .form-group { margin-bottom: 15px; }
    input, button { width: 100%; padding: 10px; margin-top: 5px;  }
    .feedback-icon { display: inline-block; margin-left: 5px; font-weight: bold; }
    .password-container { position: relative; }
    .password-container .toggle-password { position: absolute; right: 10px; top: 50%; cursor: pointer; }
    .remember-me label {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        }
        .logout-message {
            background-color: #d4edda;
            color: #155724;
            padding: 12px 16px;
            border: 1px solid #c3e6cb;
            border-radius: 6px;
            margin-bottom: 20px;
            font-size: 16px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .auth-section {
          display: flex;
          justify-content: center;
          align-items: center;
          min-height: 90vh;
          background: linear-gradient(to right, #f5f5f5, #e0e7ff);
          padding: 20px;
        }

        .auth-container {
          background-color: white;
          padding: 30px 40px;
          border-radius: 12px;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
          max-width: 400px;
          width: 100%;
        }

        .auth-container h2 {
          margin-bottom: 20px;
          text-align: center;
          font-size: 24px;
          color: #2c3e50;
        }

        .auth-container label {
          display: block;
          margin-bottom: 8px;
          font-weight: 600;
          color: #333;
        }

        .auth-container input[type="email"],
        .auth-container input[type="password"] {
          width: 100%;
          padding: 10px;
          margin-bottom: 15px;
          border-radius: 8px;
          border: 1px solid #ccc;
          font-size: 16px;
        }

        .auth-container button {
          width: 100%;
          padding: 12px;
          background-color: #1e40af;
          color: white;
          font-size: 16px;
          border: none;
          border-radius: 8px;
          cursor: pointer;
          transition: background 0.3s ease;
        }

        .auth-container button:hover {
          background-color: #1c3faa;
        }


        .input-group {
          position: relative;
          margin-bottom: 15px;
        }

        .input-icon {
          position: absolute;
          left: 12px;
          top: 50%;
          transform: translateY(-50%);
          font-size: 18px;
          color: #777;
        }

        .input-group input {
          width: 100%;
          padding: 10px 10px 10px 40px; /* space for icon */
          border-radius: 8px;
          border: 1px solid #ccc;
          font-size: 16px;
        }