.booking-card{
    
    background:#fff;
    border:1px solid #ececec;
    border-radius:16px;
    padding:28px;
    box-shadow:0 4px 15px rgba(0,0,0,.05);
    font-family: 'IBM Plex Sans';
}

.booking-card h2{
    margin:0 0 30px;
    color:#122b72;
    font-size: 22px;
    font-weight:500;
    text-align:center;
    font-family: 'IBM Plex Sans';
}

.booking-step{
    display:flex;
    align-items:flex-start;
    gap:16px;
    position:relative;
}

.booking-step:not(:last-child){
    margin-bottom:22px;
}

.step-left{
    display:flex;
    flex-direction:column;
    align-items:center;
    flex-shrink:0;
}

.step-number{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#12398f;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:18px;
}

.step-line{
    width:2px;
    flex:1;
    min-height:55px;
    margin-top:8px;
    border-left:2px dashed #12398f;
}

.step-icon{
    width:54px;
    height:54px;
    border:2px solid #dfe5f5;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#12398f;
    flex-shrink:0;
}

.step-icon svg{
    width:28px;
    height:28px;
}

.step-content{
    flex:1;
    padding-top:4px;
}

.step-content h3{
    margin:0 0 8px;
    color:#122b72;
    font-size:22px;
    font-weight:700;
}

.step-content p{
    margin:0;
    color:#555;
    font-size:14px;
    line-height:1.6;
}

@media (max-width:768px){

    .booking-card{
        padding:22px;
    }

    .booking-card h2{
        font-size:26px;
    }

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

    .step-content p{
        font-size:15px;
    }

    .step-number{
        width:38px;
        height:38px;
        font-size:16px;
    }

    .step-icon{
        width:46px;
        height:46px;
    }

    .step-icon svg{
        width:22px;
        height:22px;
    }

}