/*==============================
APPOINTMENT SECTION
==============================*/

.appointment-section{
    padding: 120px 0;
    background:#f7fbfc;
}

.appointment-header{
    text-align:center;
    margin-bottom:45px;
}

.appointment-header h2{
    font-size: 38px;
    font-weight:800;
    color:#073847;
    margin-bottom:12px;
}

.appointment-header p{
    max-width:560px;
    margin:auto;
    font-size:15px;
    color:#66727d;
    line-height:1.8;
}

/*==============================
CARD
==============================*/

.appointment-box{
    max-width:600px;
    margin:auto;
    background:#fff;
    border-radius:16px;
    padding:28px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

/*==============================
STEPS
==============================*/

.steps{
    display:flex;
    justify-content:center;
    margin-bottom:35px;
    border-bottom:1px solid #ececec;
}

.step{
    flex:1;
    text-align:center;
    padding:15px;
    color:#888;
    font-weight:600;
    cursor:pointer;
    border-bottom:3px solid transparent;
    transition:.3s;
}

.step.active{
    color:#073847;
    border-color:#073847;
}

/*==============================
STEP CONTENT
==============================*/

.step-content{
    display:none;
}

.step-content.active{
    display:block;
}

.step-content h3{
    font-size:32px;
    font-weight:700;
    color:#073847;
    margin-bottom:25px;
}

/*==============================
CALENDAR
==============================*/

.calendar{
    border:1px solid #edf2f5;
    border-radius:14px;
    padding:25px;
}

.calendar-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

.calendar-header h4{
    font-size:22px;
    font-weight:700;
    color:#073847;
    margin:0;
}

.month-btn{
    width:40px;
    height:40px;
    border:none;
    border-radius:50%;
    background:#eef8fa;
    color:#00a7b5;
    transition:.3s;
}

.month-btn:hover{
    background:#00a7b5;
    color:#fff;
}

.weekdays,
.days{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:10px;
}

.weekdays{
    margin-bottom:18px;
}

.weekdays span{
    text-align:center;
    font-weight:700;
    color:#666;
}

.days span{
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    cursor:pointer;
    transition:.3s;
    font-weight:600;
}

.days span:hover{
    background:#e9fbfd;
}

.active-day{
    background:#073847;
    color:#fff;
}

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

.form-group{
    margin-bottom:22px;
}

.form-group label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
    color:#073847;
}

.form-group span{
    color:red;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    height:50px;
    border:1px solid #dce5ea;
    border-radius:10px;
    padding:0 15px;
    outline:none;
    transition:.3s;
    background:#fff;
}

.form-group textarea{
    height:140px;
    padding:15px;
    resize:none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:#00a7b5;
    box-shadow:0 0 0 3px rgba(0,167,181,.12);
}

.selected-date{
    background:#eefbfd;
    border-left:4px solid #00a7b5;
    padding:14px 18px;
    margin-bottom:25px;
    border-radius:8px;
    font-weight:600;
    color:#073847;
}

.selected-date i{
    color:#00a7b5;
    margin-right:8px;
}

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

.wizard-buttons{
    display:flex;
    justify-content:space-between;
    margin-top:35px;
}

.btn-next,
.btn-submit{
    background:#073847;
    color:#fff;
    border:none;
    padding:13px 28px;
    border-radius:8px;
    font-weight:600;
    transition:.3s;
}

.btn-next:hover,
.btn-submit:hover{
    background:#00a7b5;
}

.btn-back{
    background:#fff;
    border:2px solid #d9e5ea;
    padding:13px 28px;
    border-radius:8px;
    font-weight:600;
    color:#073847;
    transition:.3s;
}

.btn-back:hover{
    border-color:#073847;
}

/*==============================
RESPONSIVE
==============================*/

@media(max-width:768px){

.appointment-section{
    padding:60px 0;
}

.appointment-header h2{
    font-size:36px;
}

.appointment-box{
    padding:25px;
}

.step-content h3{
    font-size:26px;
}

.calendar{
    padding:18px;
}

.days span{
    height:42px;
}

.wizard-buttons{
    flex-direction:column;
    gap:15px;
}

.btn-next,
.btn-back,
.btn-submit{
    width:100%;
}

}