body {
  font-family: 'Segoe UI', sans-serif;
  margin: 5px;
padding: 15px;
background-color: rgba(0,0,0,0.2);
}header {

  background: #7f83df;
  color: #2c2e2d;
  padding: 1rem;
  text-align: center;
}

/* 🖼️ Image Section */
#images {
  background-color: #f0f8ff;
  padding: 30px;
  text-align: center;
}

#images img {
  max-width: 300px;
  margin: 10px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

#head{
vertical-align: auto;


}

nav ul {
  list-style: none;
  padding: 5px;
  display: flex;
  justify-content: center;
  gap: 25px;
}

nav a {
  color: #fff;
  text-decoration: none;
}


#singh {
  width: 150px;
  height: auto;
  background-color: aqua;
  text-align: center;
}



a {
  color: #fff;
  background-color: #222;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: box-shadow 0.9s ease;
}

a:hover {
  box-shadow: 0 0 10px #00f, 0 0 20px #00f;
}
    
 /* === CSS Variables for Light Theming & Easy Customization === */
    :root {
      --primary: #0077fa;
      --primary-dark: #0553a5;
      --primary-light: #e8f2fd;
      --danger: #d32f2f;
      --success: #388e3c;
      --background: #fff;
      --input-bg: #f8fafd;
      --input-border: #c8d0db;
      --input-focus: #0077fa;
      --input-radius: 6px;
      --form-shadow: 0 4px 24px rgba(60,80,100,0.07), 0 1.5px 4.5px rgba(0,0,0,0.03);
      --font-stack: 'Segoe UI', 'Roboto', 'Arial', sans-serif;
      --transition: 0.18s cubic-bezier(.45, .05, .55, .95);
      --error-bg: #fff4f4;
    }



   
 /* === Centered Responsive Form Container === */
    .signup-section {
      min-height: 100vh;
      align-items: center;
      justify-content: center;
      background: var(--primary-light);
    }
    .form-signup {
      background: var(--background);
      box-shadow: var(--form-shadow);
      border-radius: 12px;
      padding: 2.2rem 1.35rem 1.4rem 1.35rem;
      min-width: 0;
      width: 100%;
      max-width: 380px;
      margin: 1.2rem;

      flex-direction: column;
      gap: 1.15rem;
      /* Support for mobile-first form layout */
    }

      /* === Form Title Styling === */
    .form-signup__legend {
      font-size: 1.7rem;
      font-weight: 700;
      margin-bottom: 0.1em;
      letter-spacing: -.5px;
      color: var(--primary-dark);
      font-family: var(--font-stack);
      text-align: left;
    }
    .form-signup__subtitle {
      font-size: 1.02rem;
      color: #58607f;
      text-align: left;
      margin-bottom: 1.25rem;
      line-height: 1.45;
    }

 /* === Shared Field Styling === */
    .form-signup__field {
      display: flex;
      flex-direction: column;
      gap: 0.35em;
      /* Spacing between label and input */
    }
    .form-signup__label {
      font-size: 1rem;
      font-weight: 540;
      letter-spacing: -.13px;
      color: #232d3b;
      margin-bottom: 2px;
      /* Click label to focus input */
      cursor: pointer;
    }

     .form-signup__input {
      background: var(--input-bg);
      border: 1.5px solid var(--input-border);
      border-radius: var(--input-radius);
      padding: 0.7em 1em;
      font-size: 1rem;
      color: #232d3b;
      transition: border-color var(--transition), box-shadow var(--transition), background 0.13s;
      outline: none;
      margin-bottom: 0.12em;
    }
    .form-signup__input:focus {
      border-color: var(--input-focus);
      box-shadow: 0 0 0 2.5px rgba(0,119,250,0.11);
      background: #eaf5ff;
    }
    /* Display browser validation errors with red border */
    .form-signup__input:invalid:not(:focus):not(:placeholder-shown) {
      border-color: var(--danger);
      background: var(--error-bg);
    }

    .form-signup__input:disabled {
      background: #ededed;
      color: #a1a6b1;
      cursor: not-allowed;
      border-color: #e5e7ef;
    }
    /* Input placeholder styles */
    .form-signup__input::placeholder {
      color: #a5aac7;
      font-size: 0.96em;
      opacity: 1;
      letter-spacing: .01em;
    }
    /* Error message (for JS or backend validation) */
    .form-signup__error {
      color: var(--danger);
      font-size: 0.94em;
      margin-top: 2px;
      min-height: 1.2em;
    }

     /* === Submit Button Styles === */
    .form-signup__submit {
      background: var(--primary);
      color: #fff;
      font-weight: 600;
      font-size: 1.07rem;
      border: none;
      border-radius: 22px;
      padding: 0.78em 0;
      margin-top: 0.4em;
      margin-bottom: 0.12em;
      cursor: pointer;
      transition: background var(--transition), box-shadow var(--transition), transform 0.10s;
      box-shadow: 0 2px 10px rgba(0,119,250,0.06);
      width: 100%;
      letter-spacing: .04em;
    }
    .form-signup__submit:hover, .form-signup__submit:focus {
      background: var(--primary-dark);
      box-shadow: 0 4px 16px rgba(0,119,250,0.13);
      outline: none;
      /* Using both :hover and :focus for accessibility parity */
    }

     .form-signup__submit:disabled {
      background: #76b2ef;
      color: #e7ecf8;
      cursor: not-allowed;
      opacity: 0.8;
      box-shadow: none;
    }

    /* === Responsive Adjustments for Mobile Devices === */
    @media (max-width: 480px) {
      .form-signup {
        padding: 1.2rem .7rem 1.2rem .7rem;
        max-width: 99vw;
      }
      .form-signup__legend { font-size: 1.23rem;}
      .form-signup__submit { font-size: 1.01rem;}
    }
    /* Larger screens: add spacing */
    @media (min-width: 601px) {
      .form-signup {
        padding: 2.6rem 2.1rem 1.7rem 2.1rem;
      }
    }










footer {
  background: #c3c0e1;
  color: #fff;
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
}