/*=================================================
GOOGLE FONT
=================================================*/
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

/*=================================================
ROOT
=================================================*/
:root{

    --primary:#3f6b4d;
    --primary-dark:#31553d;
    --secondary:#f9f5eb;
    --border:#e6d9bd;
    --text:#26322d;
    --gray:#6c756d;
    --white:#ffffff;
    --shadow:0 10px 30px rgba(0,0,0,.08);

}

/*=================================================
RESET
=================================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{

    font-family:'Outfit',sans-serif;
    background:#f7f1e5;
    color:var(--text);

}

a{

    text-decoration:none;

}

button{

    outline:none;
    border:none;

}

input,
textarea{

    outline:none;

}

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

.appointment-section{

    padding:60px 0;

}

.booking-wrapper{

    background:#fff;
    border-radius:35px;
    padding:45px;
    box-shadow:var(--shadow);

}

/*=================================================
PROGRESS BAR
=================================================*/

.progress-steps{

    display:flex;
    align-items:center;
    margin-bottom:50px;

}

.progress-steps .line{

    flex:1;
    height:1px;
    background:#ddd6c9;
    margin:0 18px;

}

.step{

    display:flex;
    align-items:center;
    gap:14px;
    white-space:nowrap;

}

.step .circle{

    width:52px;
    height:52px;
    border-radius:50%;
    border:3px solid var(--primary);
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:22px;
    font-weight:600;
    color:var(--primary);
    background:#fff;
    transition:.35s;

}

.step span{

    font-size:18px;
    font-weight:500;

}

.step.completed .circle{

    background:var(--primary);
    color:#fff;

}

.step.completed .circle::before{

    content:"✓";
    font-size:22px;

}

.step.completed .circle{

    font-size:0;

}

.step.active .circle{

    border:3px solid var(--primary);

}

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

.step-content{

    display:none;

}

.step-content.active{

    display:block;

}

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

.section-title{

    font-size:28px;
    font-weight:600;
    margin-bottom:15px;

}

.heading{

    margin-bottom:20px;
    font-size:16px;
    color:#657067;
    letter-spacing:1px;
    text-transform:uppercase;

}

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

.service-card{

    background:#fcfaf2;
    border:2px solid var(--border);
    border-radius:28px;
    min-height:86px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:0 26px;

    cursor:pointer;

    transition:.30s;

    position:relative;

}

.service-card:hover{

    border-color:var(--primary);

}

.service-card.active{

    border-color:var(--primary);
    background:#f9fbf8;

}

.service-card span{

    font-size:20px;
    font-weight:500;

}

.service-card input{

    display:none;

}

.service-card i{

    font-size:24px;
    color:var(--primary);
    display:none;

}

.service-card.active i{

    display:block;

}

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

.wizard-btn{

    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:45px;

}

.btn-next{

    background:var(--primary);
    color:#fff;

    padding:16px 34px;

    border-radius:40px;

    font-size:20px;

    font-weight:500;

    transition:.30s;

}

.btn-next:hover{

    background:var(--primary-dark);

}

.btn-next i{

    margin-left:10px;

}

.btn-back{

    background:#fff;
    color:#444;

    border:1px solid #ddd;

    padding:14px 30px;

    border-radius:40px;

    font-size:18px;

    transition:.30s;

}

.btn-back:hover{

    background:#fafafa;

}

.btn-back i{

    margin-right:8px;

}

/*=================================================
DATE GRID
=================================================*/

.date-grid{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
}

.date-card{
    width:110px;
    height:115px;
    border:1px solid var(--border);
    background:#fcfaf2;
    border-radius:24px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    transition:.3s;
}

.date-card:hover{
    border-color:var(--primary);
    transform:translateY(-3px);
}

.date-card.active{
    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
}

.date-card .day{
    font-size:15px;
    font-weight:500;
    text-transform:uppercase;
    margin-bottom:6px;
}

.date-card .date{
    font-size:42px;
    font-weight:700;
    line-height:1;
}

.date-card .month{
    font-size:15px;
    margin-top:6px;
}

/*=================================================
TIME SLOT
=================================================*/

.time-grid{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
}

.time-slot{
    width:180px;
    height:56px;
    border-radius:40px;
    border:1px solid var(--border);
    background:#fcfaf2;
    cursor:pointer;
    transition:.3s;
    font-size:22px;
    font-weight:500;
    color:#364038;
}

.time-slot:hover{
    border-color:var(--primary);
}

.time-slot.active{
    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
}

.time-slot i{
    margin-right:10px;
}

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

label{
    display:block;
    font-size:18px;
    font-weight:500;
    margin-bottom:10px;
}

.form-control{
    height:60px;
    border-radius:40px;
    border:1px solid #dedede;
    box-shadow:0 3px 8px rgba(0,0,0,.05);
    padding:15px 22px;
    font-size:18px;
}

.form-control:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 .2rem rgba(63,107,77,.15);
}

textarea.form-control{
    min-height:140px;
    border-radius:25px;
    resize:none;
}

/*=================================================
SUMMARY
=================================================*/

.booking-summary{
    background:#fcf8ed;
    border:1px solid var(--border);
    border-radius:40px;
    padding:20px 30px;
}

.booking-summary strong{
    display:block;
    font-size:22px;
    margin-bottom:8px;
}

.booking-summary p{
    margin:0;
    font-size:20px;
    color:#5d655d;
}

/*=================================================
ANIMATION
=================================================*/

.step-content{
    animation:fadeIn .4s ease;
}

@keyframes fadeIn{

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

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

}

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

@media(max-width:992px){

.booking-wrapper{

padding:30px;

}

.progress-steps{

flex-wrap:wrap;
gap:15px;

}

.progress-steps .line{

display:none;

}

.service-card{

min-height:75px;

}

.service-card span{

font-size:18px;

}

.date-grid{

justify-content:center;

}

.time-grid{

justify-content:center;

}

.time-slot{

width:160px;
font-size:18px;

}

.wizard-btn{

flex-direction:column-reverse;
gap:15px;

}

.btn-next,
.btn-back{

width:100%;

}

}

@media(max-width:576px){

.booking-wrapper{

padding:20px;
border-radius:20px;

}

.section-title{

font-size:24px;

}

.step{

gap:8px;

}

.step span{

font-size:15px;

}

.step .circle{

width:42px;
height:42px;
font-size:18px;

}

.service-card{

padding:18px;

}

.service-card span{

font-size:17px;

}

.date-card{

width:90px;
height:95px;

}

.date-card .date{

font-size:34px;

}

.time-slot{

width:100%;

}

.form-control{

height:55px;
font-size:16px;

}

textarea.form-control{

height:120px;

}

.booking-summary{

padding:18px;

}

.booking-summary strong{

font-size:18px;

}

.booking-summary p{

font-size:17px;

}

}