#viewBookingTable td {
     white-space: nowrap;
 }

 #createBookingBannerTableContainers {
    max-height: 200px !important;
 }
.bg-theme-primary {
    background: #9f2816;
}

.card-footer-padding {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
}

.padding-7-pre {
    padding: 7%;
}

@media only screen and (max-width: 450px) {
    .padding-7-pre {
        padding-top: 17% !important;
    }
}

/* @media only screen and (min-width: 450px) {
    .padding-7-pre {
        padding-top: 2rem;
    }
} */



.sidebar-logo {
    width: 5vw !important;
}

.site-logo-div {
    width: 10vw;
}

.site-logo-width {
    width: 100%;
    height: auto;
}

.display-banner-image {
    height: 20vh;
    width: 8vw;
    object-fit: contain;
}

.custom-swal-toas {
    z-index: 20000;
}

.post-img {
    display: flex !important;
    /* Flexbox for alignment */
    justify-content: center !important;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    width: 100%;
    /* Full width of the container */
    height: auto;
    /* Auto height to maintain aspect ratio */
    overflow: hidden;
    /* Hide overflow */
}

recent-posts .title {
    font-size: 20px;
    font-weight: 700;
    padding: 0;
    /* margin: 0 0 20px 0; */
}

.image-fit {
    object-fit: contain !important;
    /* This will ensure the entire image is visible within the container */
}

.active .page-link {
    background: #008374 !important;
}

.custom-card-width {
    width: 80% !important;
    height: hidden;
    /* Adjust the percentage to reduce or increase the width */
    margin: 0 auto;
    /* Center the card within its column */
}

.single-banner-image-individual {
    width: 80% !important;
    height: hidden;
}

.iamge-cover {
    object-fit: cover
}

/* .single-banner-image {
    width: 100% !important;
    height: 450px !important;
} */

.custome-hove-underline :hover {
    text-decoration: underline;
}

.single-banner-image {
    width: 100% !important;
    height: 450px !important;
    /* Default height for larger screens */
    object-fit: cover !important;
    /* Maintain aspect ratio */
}

/* For large screens (desktops and laptops) */
@media (min-width: 1200px) {
    .single-banner-image {
        height: 400px !important;
        /* Slightly smaller height for larger screens */
    }
}

/* For medium screens (tablets and small laptops) */
@media (min-width: 768px) and (max-width: 1199px) {
    .single-banner-image {
        height: 350px !important;
        /* Smaller height for tablets */
    }
}

/* For small screens (phones) */
@media (max-width: 767px) {
    .single-banner-image {
        height: 250px !important;
        /* Small height for mobile phones */
    }
}