/* ===================================
   DETAILS PAGE
=================================== */


.details-container{

    padding:40px 8% 80px;

}



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


.details-title{

    margin-bottom:30px;

}


.details-title h1{

    font-size:38px;

    margin-bottom:12px;

}


.details-title p{

    color:#666;

    font-size:16px;

}




/* ===================================
   IMAGE GALLERY
=================================== */


.gallery{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:15px;

    height:500px;

    margin-bottom:50px;

}



.main-image{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:20px;

}



.small-images{

    display:grid;

    grid-template-columns:1fr;

    gap:15px;

}



.small-images img{

    width:100%;

    height:156px;

    object-fit:cover;

    border-radius:20px;

    cursor:pointer;

    transition:.3s;

}


.small-images img:hover{

    transform:scale(1.03);

}





/* ===================================
   CONTENT AREA
=================================== */


.details-content{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:50px;

}




.description h2{

    font-size:26px;

    margin-bottom:20px;

}


.description p{

    color:#666;

    line-height:1.8;

    font-size:16px;

}





/* ===================================
   FEATURES
=================================== */


.features{

    display:flex;

    gap:30px;

    margin-top:30px;

    flex-wrap:wrap;

}


.features div{

    display:flex;

    align-items:center;

    gap:10px;

    padding:15px 20px;

    border:1px solid #eee;

    border-radius:15px;

}


.features i{

    color:var(--primary);

    font-size:20px;

}





/* ===================================
   BOOKING CARD
=================================== */


/*.booking-card{

    padding:30px;

    border-radius:20px;

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

    height:max-content;

}



.booking-card h2{

    font-size:28px;

    margin-bottom:25px;

}



.booking-card small{

    font-size:15px;

    color:#777;

    font-weight:400;

}



.booking-card label{

    display:block;

    margin:15px 0 8px;

    font-weight:600;

}



.booking-card input{

    width:100%;

    padding:15px;

    border:1px solid #ddd;

    border-radius:10px;

    outline:none;

}



.booking-card button{

    width:100%;

    margin-top:25px;

    padding:16px;

    border:none;

    background:var(--primary);

    color:white;

    border-radius:12px;

    font-size:16px;

    cursor:pointer;

    transition:.3s;

}



.booking-card button:hover{

    background:var(--primary-dark);

} */




/* ==========================================
   APNA SUITES - BOOKING FORM OVERRIDE
========================================== */

#bookingForm {
    width: 100% !important;
    max-width: 100% !important;
    padding: 30px !important;
    margin: 0 !important;
    background: #1d1d1d !important;
    border: 1px solid #3a3a3a !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 35px rgba(0,0,0,0.18) !important;
    box-sizing: border-box !important;
}

/* Row */
#bookingForm .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-right: -10px !important;
    margin-left: -10px !important;
}

/* Columns */
#bookingForm .col-md-6,
#bookingForm .col-md-12 {
    position: relative !important;
    width: 100% !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
    box-sizing: border-box !important;
}

@media (min-width: 768px) {

    #bookingForm .col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    #bookingForm .col-md-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Labels */
#bookingForm label {
    display: block !important;
    width: 100% !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

/* Inputs + Select + Textarea */
#bookingForm input.form-control,
#bookingForm select.form-control,
#bookingForm textarea.form-control {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px 15px !important;

    background: #ffffff !important;
    background-color: #ffffff !important;

    border: 1px solid #dddddd !important;
    border-radius: 5px !important;

    color: #222222 !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;

    outline: none !important;
    box-shadow: none !important;

    box-sizing: border-box !important;
}

/* Input height */
#bookingForm input.form-control,
#bookingForm select.form-control {
    height: 50px !important;
}

/* Textarea */
#bookingForm textarea.form-control {
    height: 110px !important;
    min-height: 110px !important;
    resize: vertical !important;
}

/* Placeholder */
#bookingForm input.form-control::placeholder,
#bookingForm textarea.form-control::placeholder {
    color: #999999 !important;
    opacity: 1 !important;
}

/* Focus */
#bookingForm input.form-control:focus,
#bookingForm select.form-control:focus,
#bookingForm textarea.form-control:focus {
    border-color: #c6a15b !important;
    background: #ffffff !important;
    color: #222222 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(198,161,91,0.20) !important;
}

/* Select */
#bookingForm select.form-control {
    cursor: pointer !important;
}

/* Submit Button */
#bookingForm button[type="submit"] {
    display: block !important;
    width: 100% !important;
    height: 52px !important;

    margin: 0 !important;
    padding: 0 20px !important;

    background: #c6a15b !important;
    background-color: #c6a15b !important;

    border: 0 !important;
    border-radius: 5px !important;

    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 600 !important;

    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

/* Button Hover */
#bookingForm button[type="submit"]:hover {
    background: #a98442 !important;
    background-color: #a98442 !important;
    color: #ffffff !important;
}

/* Spacing */
#bookingForm .mb-3 {
    margin-bottom: 20px !important;
}

/* Mobile */
@media (max-width: 767px) {

    #bookingForm {
        padding: 20px 15px !important;
    }

    #bookingForm .col-md-6,
    #bookingForm .col-md-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    #bookingForm input.form-control,
    #bookingForm select.form-control {
        height: 48px !important;
    }

    #bookingForm button[type="submit"] {
        height: 50px !important;
    }
}



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


@media(max-width:900px){


    .gallery{

        height:auto;

        grid-template-columns:1fr;

    }


    .main-image{

        height:350px;

    }


    .small-images{

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

    }


    .small-images img{

        height:120px;

    }


    .details-content{

        grid-template-columns:1fr;

    }


}




@media(max-width:500px){


    .details-container{

        padding:30px 5%;

    }


    .details-title h1{

        font-size:28px;

    }


    .small-images{

        grid-template-columns:1fr;

    }


    .features{

        flex-direction:column;

    }


}