/*==================================
        BOOKING MODAL
==================================*/

#bookingModal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);

    backdrop-filter:blur(14px);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.4s ease;

    z-index:99999;

    padding:40px;

}

#bookingModal.active{

    opacity:1;

    visibility:visible;

}

.booking-card{

    width:min(1200px,100%);

    height:750px;

    background:#101010;

    border-radius:30px;

    overflow:hidden;

    display:grid;

    grid-template-columns:45% 55%;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:
        0 30px 80px rgba(0,0,0,.55),
        0 0 50px rgba(255,45,45,.08);

    transform:translateY(50px) scale(.95);

    transition:.45s ease;

}

#bookingModal.active .booking-card{

    transform:translateY(0) scale(1);

}

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

.booking-left{

    position:relative;

    overflow:hidden;

    background:url("../assests/images/1.jpg") center/cover;

}

.booking-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        180deg,
        rgba(0,0,0,.35),
        rgba(0,0,0,.85)
    );

}

.booking-brand{

    position:absolute;

    inset:0;

    z-index:2;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:60px;

}

.booking-brand img{

    width:90px;

    margin-bottom:30px;

}

.booking-tag{

    color:var(--gold);

    letter-spacing:3px;

    font-size:13px;

    margin-bottom:18px;

}

.booking-brand h2{

    font-size:64px;

    line-height:.92;

    margin-bottom:25px;

}

.booking-brand h2 span{

    color:var(--red);

}

.booking-brand p{

    color:#d5d5d5;

    line-height:1.9;

    max-width:350px;

}

/*==================================
        RIGHT PANEL
==================================*/

.booking-right{

    position:relative;

    padding:60px;

    overflow-y:auto;

}

.close-modal{

    position:absolute;

    top:25px;

    right:25px;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#1b1b1b;

    color:#fff;

    font-size:24px;

    cursor:pointer;

    transition:.35s;

}

.close-modal:hover{

    background:var(--red);

}

.form-tag{

    display:inline-block;

    color:var(--gold);

    letter-spacing:3px;

    font-size:13px;

    margin-bottom:18px;

}

.booking-right h3{

    font-family:"Bebas Neue";

    font-size:48px;

    letter-spacing:2px;

    margin-bottom:15px;

}

.booking-right>p{

    color:var(--text);

    line-height:1.8;

    margin-bottom:40px;

}

.form-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    margin-bottom:20px;

}

.input-group{

    display:flex;

    flex-direction:column;

}

.input-group label{

    margin-bottom:10px;

    font-size:14px;

    color:#cfcfcf;

}

.input-group input,
.input-group select,
.input-group textarea{

    width:100%;

    background:#171717;

    border:1px solid rgba(255,255,255,.08);

    border-radius:14px;

    padding:15px 18px;

    color:#fff;

    font-size:15px;

    font-family:Poppins,sans-serif;

    transition:.35s;

}

.input-group textarea{

    resize:none;

    min-height:140px;

}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus{

    outline:none;

    border-color:var(--red);

    box-shadow:0 0 18px rgba(255,45,45,.18);

}

.booking-submit{

    width:100%;

    margin-top:30px;

    padding:18px;

    font-size:17px;

}

/*==================================================
                BOOKING MODAL
===================================================*/

/*====================================
        TABLETS
====================================*/

@media (max-width:1024px){

#bookingModal{

    padding:25px;

}

.booking-card{

    width:100%;

    max-width:960px;

    height:90vh;

    grid-template-columns:40% 60%;

}

.booking-brand{

    padding:40px;

}

.booking-brand img{

    width:75px;

}

.booking-brand h2{

    font-size:52px;

}

.booking-brand p{

    font-size:15px;

    line-height:1.8;

}

.booking-right{

    padding:40px;

}

.booking-right h3{

    font-size:42px;

}

.form-grid{

    gap:16px;

}

}


/*====================================
        MOBILE
====================================*/

@media (max-width:768px){

#bookingModal{

    padding:15px;

    align-items:flex-start;

    overflow-y:auto;

}

.booking-card{

    width:100%;

    height:auto;

    min-height:auto;

    display:flex;

    flex-direction:column;

    border-radius:22px;

}

.booking-left{

    height:420px;

}

.booking-brand{

    padding:35px;

}

.booking-brand img{

    width:70px;

    margin-bottom:20px;

}

.booking-tag{

    font-size:11px;

    letter-spacing:3px;

}

.booking-brand h2{

    font-size:54px;

    line-height:.9;

}

.booking-brand p{

    max-width:100%;

    font-size:16px;

    line-height:1.8;

}

.booking-right{

    padding:35px 25px;

    overflow:visible;

}

.booking-right h3{

    font-size:42px;

}

.booking-right>p{

    margin-bottom:25px;

}

.form-grid{

    grid-template-columns:1fr;

    gap:18px;

}

.input-group input,
.input-group select,
.input-group textarea{

    padding:16px;

    font-size:16px;

}

.input-group textarea{

    min-height:120px;

}

.booking-submit{

    margin-top:20px;

}

.close-modal{

    top:15px;

    right:15px;

}

}


/*====================================
        SMALL PHONES
====================================*/

@media (max-width:480px){

.booking-left{

    height:360px;

}

.booking-brand{

    padding:28px;

}

.booking-brand img{

    width:60px;

}

.booking-brand h2{

    font-size:46px;

}

.booking-brand p{

    font-size:15px;

}

.booking-right{

    padding:28px 20px;

}

.booking-right h3{

    font-size:36px;

}

.form-grid{

    gap:15px;

}

.input-group label{

    font-size:13px;

}

.input-group input,
.input-group select,
.input-group textarea{

    font-size:15px;

    padding:14px;

}

.booking-submit{

    padding:16px;

    font-size:16px;

}

}