body{
    /* padding: 0 !important;
    margin: 0 !important; */
}

#link-detail{
    text-decoration: none !important;
    color: black;
}
.img-div{
    padding: 20px;
    height: 40vh !important;
    border-radius: 10px;
    background-color: #ccc !important;
    width: 100% !important;
}
  /**************************************************************************************
***************************************************************************************
MORE INFO IMAGE DETAILS STYLING
**************************************************************************************
*************************************************************************************/
.img-div1 img{
    padding: 20px;
    width: 100% !important; 
}
#viewbtn{
    display: none;
}
@media screen and (max-width: 768px) {
    #viewbtn{
        display: block;
    }
    .scroll {
        height: 50vh !important;
        overflow: hidden !important;
        transition: height 0.5s ease-in-out !important;
    }
    .scroll1 {
        height: 100vh !important;
        overflow: auto !important;
        transition: height 0.5s ease-in-out !important;
    }

    /* Hide smaller images initially */
    .hidden-images {
        display: none;
    }
    /* Show smaller images when expanded */
    .show-images .hidden-images {
        display: block;
    }
    #setCheckinCheckoutModal{
        width: 110% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .addReservationServicesModal, .addUserModal{
        width: 110% !important;
        margin-left: auto !important;
        margin-right: auto !important; 
    }
} 
.img-div2 img{
    padding: 20px;
    width: 100% !important; 
}
.img-div3 img{
    padding: 20px;
    width: 100% !important; 
}
.img-div4 img{
    padding: 20px;
    width: 100% !important; 
}
/*********reserve button*********/
.reserve{
    padding: 10px !important;
    color: white !important;
    width: 28% !important;
}