/*====================================
ONLINE ADMISSION FORM
====================================*/

.admission-box{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px 50px rgba(0,0,0,.08);
    border:1px solid #eee;
}

.admission-header{
    padding:45px;
    text-align:center;
    background:linear-gradient(135deg,#FF9933,#E46A18);
    color:#fff;
}

.admission-header h2{
    margin:0;
    font-size:34px;
    font-weight:700;
    letter-spacing:1px;
}

.admission-header p{
    margin-top:10px;
    font-size:18px;
    opacity:.9;
}

/*======================
Progress
======================*/

.progress-wrap{
    padding:30px 45px;
    background:#fffaf4;
    border-bottom:1px solid #eee;
}

.progress-bar{
    width:100%;
    height:10px;
    background:#ececec;
    border-radius:50px;
    overflow:hidden;
}

.progress-fill{
    width:20%;
    height:100%;
    background:linear-gradient(90deg,#ff9933,#ff6600);
    transition:.4s;
}

.step-text{
    text-align:right;
    margin-top:10px;
    font-size:14px;
    color:#777;
}

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

#admissionForm{
    padding:45px;
}

.form-step{
    display:none;
}

.form-step.active{
    display:block;
    animation:fade .35s;
}

@keyframes fade{

from{
opacity:0;
transform:translateY(20px);
}

to{
opacity:1;
transform:translateY(0);
}

}

.form-step h3{

font-size:28px;

margin-bottom:30px;

color:#E46A18;

border-left:5px solid #FF9933;

padding-left:15px;

}

/*======================*/

.grid-2{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:25px;

}

.full{

grid-column:1/-1;

}

/*======================*/

.form-group{

display:flex;

flex-direction:column;

}

.form-group label{

margin-bottom:8px;

font-weight:600;

font-size:15px;

color:#444;

}

.form-group input,

.form-group select,

.form-group textarea{

padding:15px 18px;

border:1px solid #ddd;

border-radius:10px;

font-size:15px;

transition:.3s;

font-family:inherit;

background:#fff;

}

.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus{

outline:none;

border-color:#FF9933;

box-shadow:0 0 0 4px rgba(255,153,51,.18);

}

/*======================
UPLOAD
======================*/

input[type=file]{

padding:14px;

background:#fafafa;

}

/*======================*/

.check{

display:flex;

align-items:flex-start;

gap:12px;

font-size:16px;

line-height:1.7;

margin-top:20px;

}

.check input{

margin-top:6px;

}

/*======================
BUTTONS
======================*/

.buttons{

display:flex;

justify-content:space-between;

margin-top:45px;

padding-top:25px;

border-top:1px solid #eee;

}

.buttons .btn{

min-width:170px;

}

/*======================
INPUT HOVER
======================*/

.form-group input:hover,

.form-group select:hover,

.form-group textarea:hover{

border-color:#FF9933;

}

/*======================
FILE BOX
======================*/

input[type=file]::file-selector-button{

background:#FF9933;

border:none;

padding:10px 18px;

color:#fff;

border-radius:6px;

cursor:pointer;

margin-right:15px;

transition:.3s;

}

input[type=file]::file-selector-button:hover{

background:#E46A18;

}

/*======================
Responsive
======================*/

@media(max-width:992px){

.grid-2{

grid-template-columns:1fr;

}

.admission-header{

padding:30px;

}

#admissionForm{

padding:30px;

}

.progress-wrap{

padding:25px;

}

}

@media(max-width:600px){

.buttons{

flex-direction:column;

gap:15px;

}

.buttons .btn{

width:100%;

}

.form-step h3{

font-size:22px;

}

.admission-header h2{

font-size:28px;

}

}