/*=========================================
BOOKING PAGE
=========================================*/

.booking-section{
    padding:80px 0;
    background:#f5f7f9;
}

.booking-wrapper{
    background:#fff;
    border-radius:20px;
    padding:40px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
}

.booking-wrapper h2{
    font-size:42px;
    color:#17314b;
    margin-bottom:40px;
    text-align:center;
}

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

.booking-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:40px;
}

/*=========================================
LEFT
=========================================*/

.booking-left{

    display:flex;
    flex-direction:column;
    gap:18px;

}

.booking-left h3{

    margin-top:15px;
    color:#17314b;
    font-size:24px;
    padding-bottom:10px;
    border-bottom:2px solid #f0f0f0;

}

.booking-left label{

    font-weight:600;
    color:#17314b;
    margin-top:5px;

}

.booking-left input,
.booking-left textarea,
.booking-left select{

    width:100%;
    padding:15px;
    border:1px solid #ddd;
    border-radius:10px;
    font-size:16px;
    transition:.3s;
    background:#fff;

}

.booking-left input:focus,
.booking-left textarea:focus,
.booking-left select:focus{

    outline:none;
    border-color:#0d5c3b;
    box-shadow:0 0 0 3px rgba(13,92,59,.15);

}

.booking-left textarea{

    resize:vertical;
    min-height:120px;

}

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

.booking-summary{

    background:#17314b;
    color:#fff;
    border-radius:18px;
    padding:35px;
    position:sticky;
    top:120px;

}

.booking-summary h3{

    text-align:center;
    margin-bottom:30px;
    font-size:28px;

}

.booking-summary table{

    width:100%;
    border-collapse:collapse;

}

.booking-summary td,
.booking-summary th{

    padding:15px 0;
    border-bottom:1px solid rgba(255,255,255,.15);

}

.booking-summary td:last-child,
.booking-summary th:last-child{

    text-align:right;

}

.booking-summary th{

    font-size:20px;
    color:#fff;

}

.booking-summary hr{

    border:none;
    height:1px;
    background:rgba(255,255,255,.15);
    margin:25px 0;

}

/*=========================================
BUTTON
=========================================*/

.booking-btn{

    width:100%;
    margin-top:35px;
    padding:18px;
    border:none;
    border-radius:50px;
    background:#c58a16;
    color:#fff;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;

}

.booking-btn:hover{

    background:#b07910;

}

/*=========================================
READ ONLY
=========================================*/

.booking-left input[readonly]{

    background:#f5f5f5;
    color:#666;

}

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

@media(max-width:992px){

.booking-grid{

grid-template-columns:1fr;

}

.booking-summary{

position:relative;
top:0;

}

}

@media(max-width:768px){

.booking-wrapper{

padding:25px;

}

.booking-wrapper h2{

font-size:32px;

}

.booking-left h3{

font-size:22px;

}

.booking-summary{

padding:25px;

}

.booking-summary h3{

font-size:24px;

}

.booking-btn{

font-size:17px;

}

}

@media(max-width:480px){

.booking-wrapper h2{

font-size:28px;

}

.booking-left input,
.booking-left textarea,
.booking-left select{

padding:13px;

}

.booking-summary{

padding:20px;

}

}