.booking-section{



    padding:120px 0;

    

    background:#f8fbff;

    

    }

    

    .booking-grid{

    

    display:grid;

    

    grid-template-columns:1fr 1fr;

    

    gap:60px;

    

    align-items:center;

    

    }

    

    .booking-info span{

    

    color:#39B54A;

    

    font-weight:600;

    

    }

    

    .booking-info h2{

    

    font-size:48px;

    

    margin:20px 0;

    

    color:#0A2B67;

    

    }

    

    .booking-info p{

    

    line-height:1.9;

    

    color:#666;

    

    margin-bottom:30px;

    

    }

    

    .booking-features div{

    

    margin-bottom:20px;

    

    font-size:18px;

    

    }

    

    .booking-features i{

    

    color:#39B54A;

    

    margin-right:10px;

    

    }

    

    .booking-form{

    

    background:#fff;

    

    padding:45px;

    

    border-radius:20px;

    

    box-shadow:0 20px 60px rgba(0,0,0,.08);

    

    }

    

    .form-group{

    

    margin-bottom:20px;

    

    }

    

    .form-group input,

    .form-group select,

    .form-group textarea{

    

    width:100%;

    

    padding:16px;

    

    border:1px solid #ddd;

    

    border-radius:10px;

    

    font-size:16px;

    

    outline:none;

    

    }

    

    .book-btn{

    

    width:100%;

    

    padding:18px;

    

    border:none;

    

    border-radius:10px;

    

    background:#0A2B67;

    

    color:#fff;

    

    font-size:18px;

    

    cursor:pointer;

    

    transition:.35s;

    

    }

    

    .book-btn:hover{

    

    background:#39B54A;

    

    }



































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

        PAGE BANNER

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



.page-banner{



    padding:180px 0 100px;



    background:linear-gradient(rgba(10,43,103,.85),rgba(10,43,103,.85)),

    url("../images/banner/booking-banner.jpg") center/cover no-repeat;



    text-align:center;



    color:#fff;



}



.page-banner h1{



    font-size:58px;



    margin-bottom:20px;



    font-weight:700;



}



.page-banner p{



    max-width:700px;



    margin:auto;



    font-size:18px;



    line-height:1.8;



    color:#eee;



}





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

        BOOKING SECTION

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



.booking-section{



    padding:120px 0;



    background:#f8fbff;



}



.booking-grid{



    display:grid;



    grid-template-columns:1fr 1fr;



    gap:60px;



    align-items:flex-start;



}





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

        LEFT SIDE

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



.booking-info span{



    display:inline-block;



    color:#39B54A;



    font-size:15px;



    font-weight:600;



    background:#eaf8ec;



    padding:8px 18px;



    border-radius:30px;



    margin-bottom:20px;



}



.booking-info h2{



    font-size:48px;



    color:#0A2B67;



    margin-bottom:25px;



    line-height:1.3;



}



.booking-info p{



    color:#666;



    font-size:17px;



    line-height:1.8;



    margin-bottom:35px;



}



.booking-features{



    display:grid;



    gap:20px;



}



.booking-features div{



    display:flex;



    align-items:center;



    gap:15px;



    font-size:18px;



    font-weight:500;



    color:#333;



}



.booking-features i{



    color:#39B54A;



    font-size:22px;



}





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

        FORM

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



.booking-form{



    background:#fff;



    padding:45px;



    border-radius:20px;



    box-shadow:0 20px 60px rgba(0,0,0,.08);



}



.form-group{



    margin-bottom:22px;



}



.form-group input,

.form-group select,

.form-group textarea{



    width:100%;



    padding:16px 18px;



    border:1px solid #ddd;



    border-radius:10px;



    outline:none;



    font-size:16px;



    transition:.3s;



    font-family:inherit;



    background:#fff;



}



.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus{



    border-color:#39B54A;



    box-shadow:0 0 0 4px rgba(57,181,74,.15);



}



.form-group textarea{



    resize:vertical;



}



input[type=file]{



    padding:12px;



}





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

        BUTTON

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



.book-btn{



    width:100%;



    border:none;



    background:linear-gradient(135deg,#39B54A,#0A2B67);



    color:#fff;



    padding:18px;



    border-radius:10px;



    font-size:18px;



    font-weight:600;



    cursor:pointer;



    transition:.35s;



}



.book-btn:hover{



    transform:translateY(-4px);



    box-shadow:0 15px 35px rgba(10,43,103,.25);



}





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

        RESPONSIVE

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



@media(max-width:992px){



.booking-grid{



    grid-template-columns:1fr;



}



.booking-info{



    text-align:center;



}



.booking-features{



    justify-content:center;



}



}



@media(max-width:768px){



.page-banner{



    padding:140px 20px 80px;



}



.page-banner h1{



    font-size:40px;



}



.booking-info h2{



    font-size:34px;



}



.booking-form{



    padding:30px 20px;



}



}

/*=========================================
        PAGE TITLE
=========================================*/

.page-title{

    margin-bottom:35px;

}

.page-title h1{

    font-size:38px;

    color:#0A2B67;

    margin-bottom:10px;

}

.page-title p{

    color:#666;

    font-size:17px;

}


/*=========================================
        SEARCH BAR
=========================================*/

.booking-search{

    display:flex;

    gap:15px;

    margin-bottom:35px;

}

.booking-search input{

    flex:1;

    padding:16px 20px;

    border:1px solid #ddd;

    border-radius:10px;

    font-size:16px;

    outline:none;

}

.booking-search input:focus{

    border-color:#39B54A;

}

.booking-search button{

    padding:16px 30px;

    border:none;

    border-radius:10px;

    background:#0A2B67;

    color:#fff;

    cursor:pointer;

    transition:.3s;

}

.booking-search button:hover{

    background:#39B54A;

}


/*=========================================
        STATUS CARDS
=========================================*/

.booking-status{

    display:grid;

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

    gap:25px;

    margin-bottom:40px;

}

.status-card{

    background:#fff;

    border-radius:18px;

    padding:30px;

    text-align:center;

    box-shadow:0 10px 35px rgba(0,0,0,.06);

    transition:.35s;

}

.status-card:hover{

    transform:translateY(-8px);

}

.status-card h2{

    font-size:42px;

    margin-bottom:10px;

}

.status-card p{

    font-size:17px;

    color:#666;

}

.status-card.active h2{

    color:#0A2B67;

}

.status-card.completed h2{

    color:#39B54A;

}

.status-card.pending h2{

    color:#f39c12;

}

.status-card.cancelled h2{

    color:#e74c3c;

}


/*=========================================
        TABLE
=========================================*/

.booking-table{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 10px 35px rgba(0,0,0,.06);

    margin-bottom:40px;

}

.booking-table table{

    width:100%;

    border-collapse:collapse;

}

.booking-table th{

    background:#0A2B67;

    color:#fff;

    padding:18px;

    text-align:left;

}

.booking-table td{

    padding:18px;

    border-bottom:1px solid #eee;

}

.booking-table tr:hover{

    background:#f8fbff;

}


/*=========================================
        STATUS
=========================================*/

.status{

    display:inline-block;

    padding:8px 16px;

    border-radius:50px;

    color:#fff;

    font-size:14px;

    font-weight:600;

}

.status.active{

    background:#3498db;

}

.status.completed{

    background:#39B54A;

}

.status.pending{

    background:#f39c12;

}

.status.cancelled{

    background:#e74c3c;

}


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

.booking-table a{

    display:inline-block;

    padding:10px 18px;

    background:#39B54A;

    color:#fff;

    text-decoration:none;

    border-radius:8px;

    transition:.3s;

}

.booking-table a:hover{

    background:#0A2B67;

}


/*=========================================
        QUICK ACTIONS
=========================================*/

.quick-actions{

    display:grid;

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

    gap:20px;

}

.quick-actions a{

    background:#0A2B67;

    color:#fff;

    text-decoration:none;

    padding:22px;

    text-align:center;

    border-radius:15px;

    transition:.35s;

    font-size:17px;

    font-weight:600;

}

.quick-actions a i{

    display:block;

    font-size:28px;

    margin-bottom:12px;

}

.quick-actions a:hover{

    background:#39B54A;

    transform:translateY(-8px);

}


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

@media(max-width:992px){

.booking-status{

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

}

.quick-actions{

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

}

}

@media(max-width:768px){

.booking-search{

flex-direction:column;

}

.booking-status{

grid-template-columns:1fr;

}

.quick-actions{

grid-template-columns:1fr;

}

.booking-table{

overflow-x:auto;

}

.booking-table table{

min-width:900px;

}

}