.hero-gradient {
            background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #60a5fa 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            backdrop-filter: blur(5px);
        }
        .modal.show {
            display: flex;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.3s ease;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .slide-in {
            animation: slideIn 0.5s ease;
        }
        @keyframes slideIn {
            from { transform: translateX(-100%); }
            to { transform: translateX(0); }
        }
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1001;
            transform: translateX(400px);
            transition: transform 0.3s ease;
        }
        .notification.show {
            transform: translateX(0);
        }
        .live-indicator {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        .form-step {
            display: none;
        }
        .form-step.active {
            display: block;
            animation: slideIn 0.3s ease;
        }
        .progress-bar {
            transition: width 0.3s ease;
        }
        .file-upload {
            border: 2px dashed #d1d5db;
            transition: all 0.3s ease;
        }
        .file-upload:hover {
            border-color: #3b82f6;
            background-color: #f8fafc;
        }
        .file-upload.dragover {
            border-color: #3b82f6;
            background-color: #eff6ff;
        }
        .otp-input {
            width: 50px;
            height: 50px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
        }
        .loading-spinner {
            border: 3px solid #f3f4f6;
            border-top: 3px solid #3b82f6;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
.container{ background-color: white; border-radius: 5px; width: 400px; max-width: 100%; overflow: hidden; }
.header{background-color: #f7f7f7; padding: 20px 40px; border-bottom: 5px solid #f0f0f0; text-align: center;}
.header h2 {margin: 0;}
.form { padding: 30px 40px;       }
.field{margin-bottom: 10px; padding-bottom: 20px; position: relative;}
.field label{display: inline-block; margin-bottom: 5px;}
.field input:not(.terms){display: block;border-radius: 4px;border: 2px solid #f0f0f0; font-size: 14px;width: 100%;padding: 10px;}
.field small{position: absolute;bottom: 0px;left: 0;visibility: hidden;}
.form .button{background-color: rgb(201, 202, 209);  border-radius: 10px; border: 2px solid maroon; color: rgb(8, 8, 8); padding: 10px;display: block;width: 100%;font-size: 16px;}
.field.success input{border-color: green;}
.field.error input{border-color: red;}
.field.error small{visibility: visible; color: #e74c3c;}


.field small {
  color: red;
  font-size: 12px;
}

.modal-content {
  background: #fff;
  width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 12px;
  padding: 20px 30px;
  box-shadow: 0px 6px 18px rgba(0,0,0,0.3);
}

/* Modal header */
.modal-content h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.checkbox-group {
  display: flex;
  gap: 20px;           /* spacing between checkboxes */
  flex-wrap: wrap;     /* move to next line if screen small */
  margin: 10px 0;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 6px;            /* space between box and text */
  font-weight: 500;
  color: #333;
}

/* Modal box */
.modal-content {
  background: #fff;
  width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 12px;
  padding: 25px 35px;
  box-shadow: 0px 8px 20px rgba(0,0,0,0.3);
}

/* Header */
.modal-content h2 {
  text-align: center;
  margin-bottom: 25px;
  color: #222;
  border-bottom: 2px solid #007bff;
  padding-bottom: 10px;
}

/* Section headings */
.section-title {
  margin: 20px 0 10px;
  font-size: 18px;
  font-weight: bold;
  color: #007bff;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
}

/* Fields */
.field {
  margin-bottom: 15px;
}

.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
  color: #444;
}

.field input, 
.field select {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  outline: none;
  transition: all 0.3s ease;
}

.field input:focus, 
.field select:focus {
  border-color: #007bff;
  box-shadow: 0 0 4px rgba(0,123,255,0.4);
}

/* Validation colors */
.field input.error, .field select.error {
  border-color: red;
}

.field input.success, .field select.success {
  border-color: green;
}

/* File previews */
#photoPreview1, #photoPreview2 {
  margin-top: 10px;
  border-radius: 6px;
  border: 1px solid #ddd;
  display: none;
  max-width: 150px;
}

/* Submit button */
.button {
  background: #007bff;
  color: #fff;
  padding: 12px;
  border: none;
  border-radius: 6px;
  width: 100%;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.button:hover {
  background: #0056b3;
}