/* ==================================================
 FORM CONTAINER
================================================== */


.form-container{


position:relative;


background:

rgba(255,255,255,.96);



border-radius:30px;



padding:45px;



width:100%;



max-width:1100px;



margin:40px auto 50px auto;



box-shadow:

0 25px 60px rgba(0,0,0,.45);



animation:

fadeInUp .8s ease;


}





@keyframes fadeInUp{


from{


opacity:0;


transform:

translateY(30px);


}


to{


opacity:1;


transform:

translateY(0);


}


}








/* ==================================================
 TITLE
================================================== */


.title{


text-align:center;


font-weight:900;


font-size:2.2rem;



color:#0d6efd;



margin-bottom:35px;



text-transform:uppercase;



letter-spacing:.5px;



}



.title i{


margin-right:12px;


animation:

pulse 2s infinite;


}





@keyframes pulse{


50%{


transform:scale(1.15);


}


}








/* ==================================================
 SECTION TITLE
================================================== */


.section-title{


margin-top:35px;



padding:

15px 22px;



border-radius:18px;



background:


linear-gradient(

135deg,

#0d6efd,

#0a3d91

);



color:white;



font-weight:800;



font-size:1.1rem;



box-shadow:


0 8px 20px rgba(13,110,253,.35);



}



.section-title i{


margin-right:10px;


}









/* ==================================================
 INPUTS
================================================== */


.form-label,
label{


font-weight:700;


color:#333;


}





.form-control,
.form-select{


border-radius:14px;



padding:12px 15px;



border:1px solid #ddd;



transition:.3s;


}





.form-control:focus,
.form-select:focus{


border-color:#0d6efd;



box-shadow:


0 0 0 .25rem rgba(13,110,253,.20);



}





.required{


color:red;


font-weight:bold;


}



.optional{


font-size:.85rem;


color:#888;


}









/* ==================================================
 ALERT
================================================== */


.alert{


border-radius:15px;


}








/* ==================================================
 PHOTO PREVIEW
================================================== */


.photo-preview{


width:200px;


height:200px;


object-fit:cover;



border-radius:20px;



display:none;



margin-top:15px;



box-shadow:


0 10px 30px rgba(0,0,0,.3);


}










/* ==================================================
 VALIDATION
================================================== */


.input-error{


border:2px solid #dc3545!important;


background:#fff5f5;


}



.input-success{


border:2px solid #198754!important;


}










/* ==================================================
 MOBILE
================================================== */


@media(max-width:768px){



.form-container{


padding:25px 18px;


}





.title{


font-size:1.5rem;


}



}






.form-container::before{


content:"";


position:absolute;



inset:0;



background:

url('../images/logo.png')

center/350px

no-repeat;



opacity:.05;



pointer-events:none;


}