:root { --primary-color: #000000; --secondary-color: #2dbad8; --dark-color: #2d3436; --light-color: #f8f9fa; }
body { font-family: 'Roboto', Tahoma, Geneva, Verdana, sans-serif; color: var(--dark-color); }
.info-section { padding: 100px 0; background-color: var(--light-color); }
.section-title { font-size: 2.5rem; font-weight: 300; margin-bottom: 2rem; color: var(--secondary-color); text-align: center; }
.registration-section { padding: 100px 0; background-color: white; }
.form-container { background-color: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); padding: 40px; }
.form-title { font-size: 2rem; font-weight: 700; margin-bottom: 2rem; color: var(--secondary-color); text-align: center; }
.form-control, .form-select { padding: 12px 15px; border-radius: 8px; border: 1px solid #ddd; margin-bottom: 20px; }
.form-control:focus, .form-select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 0.25rem rgba(255, 107, 149, 0.25); }
.file-upload-container { margin-bottom: 20px; }
.file-upload-item { display: flex; align-items: center; margin-bottom: 10px; }
.file-upload-item input { flex-grow: 1; margin-right: 10px; }
.add-btn { background-color: var(--secondary-color); color: white; border: none; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; }
.add-btn:hover { background-color: #5a4bd4; transform: rotate(90deg); }
.remove-btn { background-color: #e74c3c; color: white; border: none; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; margin-left: 10px; }
.submit-btn { background-color: #2dbad8; color: #ffffff; border: none; padding: 15px 40px; font-size: 1.2rem; border-radius: 50px; width: 100%; margin-top: 20px; transition: all 0.3s ease; }
.submit-btn:hover { background-color: #ffffff;	 color: #2dbad8; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); }
@media (max-width: 768px)
{
    .header-content h1 { font-size: 2.5rem; }
    .header-content p { font-size: 1.2rem; }
    .form-container { padding: 20px; }
 }

.file-upload-section { text-align: center; }
.file-upload-btn { width: 300px; height: 300px; border: 3px dashed #2dbad8; border-radius: 15px; color: #2dbad8; background-color: #f8f9fa; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; margin: 0 auto; }
.file-upload-btn:hover { background-color: #2dbad8; border: 3px solid #2dbad8; color: #ffffff; transform: translateY(-2px); }
.file-upload-content { display: flex; flex-direction: column; align-items: center; justify-content: center; /*color: #2dbad8; */}
.file-upload-text { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
.file-count { font-size: 0.9rem; }
.file-list { max-height: 120px; overflow-y: auto; text-align: left; }
.file-item { display: flex; justify-content: space-between; align-items: center; padding: 5px 10px; margin-bottom: 5px; background-color: #f8f9fa; border-radius: 5px; font-size: 0.85rem; }
.file-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 10px; }
.file-remove { color: #e74c3c; cursor: pointer; background: none; border: none; font-size: 1rem; }
.file-remove:hover { color: #c0392b; }
.file-upload-btn.has-files { border-color: #00b894; background-color: #f0fff8; }
.file-upload-btn.has-files .file-upload-content { color: #00b894; }
@media (max-width: 768px)
{
    .file-upload-btn { width: 250px; height: 250px; }
    .file-upload-text { font-size: 1rem; }
}

.modal-content { border-radius: 15px; border: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); }
.loading-spinner { display: flex; justify-content: center; align-items: center; }
.spinner-ball { width: 50px; height: 50px; background: linear-gradient(45deg, #ff6b95, #6c5ce7); border-radius: 50%; animation: bounce 1s infinite alternate; }

@keyframes bounce
{
    0% { transform: translateY(0) scale(1); }
    100% {  transform: translateY(-20px) scale(1.1); }
}
.error-icon { font-size: 4rem; color: #e74c3c; }
.success-icon { font-size: 4rem; color: #00b894; }
.modal-title { font-weight: 700; color: #2d3436; }
.modal.fade .modal-dialog { transform: scale(0.8); transition: transform 0.3s ease-out; }
.modal.show .modal-dialog { transform: scale(1); }
.modal.fade .modal-content { transform: translateY(-50px); opacity: 0; transition: all 0.3s ease; }
.modal.show .modal-content { transform: translateY(0); opacity: 1; }
.error-icon, .success-icon { animation: scaleIn 0.5s ease-out; }
@keyframes scaleIn
{
 0% { transform: scale(0); opacity: 0; }
 70% { transform: scale(1.1); }
 100% { transform: scale(1); opacity: 1; }
}

.form-control:invalid:not(:focus) { border-color: #dee2e6 !important; background-image: none !important; }
.was-validated .form-control:invalid { border-color: #e74c3c !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23e74c3c'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 3.6.4.4.4-.4'/%3e%3cpath d='M6 7v4'/%3e%3c/svg%3e") !important; }
.was-validated .form-control:valid { border-color: #00b894 !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2300b894' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important; }
.form-control.is-valid { border-color: #00b894 !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2300b894' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); }
.form-control.is-invalid { border-color: #e74c3c !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23e74c3c'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 3.6.4.4.4-.4'/%3e%3cpath d='M6 7v4'/%3e%3c/svg%3e"); }
.form-control { border-color: #dee2e6; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.form-control:focus { border-color: #2dbad8; box-shadow: 0 0 0 0.25rem rgba(45, 186, 216, 0.25); }
.invalid-feedback { display: none; }
.was-validated .form-control:invalid ~ .invalid-feedback, .form-control.is-invalid ~ .invalid-feedback { display: block; }