.elementor-84 .elementor-element.elementor-element-7cadf721{--display:flex;}:root{--page-title-display:none;}body.elementor-page-84:not(.elementor-motion-effects-element-type-background), body.elementor-page-84 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}/* Start custom CSS for html, class: .elementor-element-acef7c0 *//* This is the main container for the image section and description */
.RentMyProductDetilsImg {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next line */
    align-items: flex-start; /* Aligns thumbnails and main image to the top */
}

/* 1. Style the thumbnail list container */
.RentMyProductDetailsImgList {
    flex: 0 0 100px; /* Sets a fixed width of 100px for the thumbnails */
    margin-right: 20px; /* Adds space between thumbnails and the main image */
}

/* 2. Style the main image container */
.RentMyProductDetailsImgShow {
    flex: 1; /* Allows the main image to take up the remaining space */
}

/* Makes sure the image inside the main container is responsive */
.RentMyProductDetailsImgShow img {
    max-width: 100%;
    height: auto;
}

/* 3. Force the description to a new line */
.RentMyProductDescription {
    flex-basis: 100%; /* Takes up the full width, moving it down */
    margin-top: 30px; /* Adds space above the description text */
}

/* --- Mobile Layout for Product Details Page --- */
@media (max-width: 767px) {

    /* 1. Make the main row a vertical flex container */
    .RentMyProductDetailsRow {
        display: flex;
        flex-direction: column;
    }

    /* 2. "Unwrap" the image container so we can reorder ALL elements */
    .RentMyProductDetilsImg {
        display: contents;
    }

    /* 3. Re-order all elements for the complete mobile view */

    /* Main Image appears FIRST */
    .RentMyProductDetailsImgShow {
        order: 1;
    }

    /* Image Thumbnails appear SECOND */
    .RentMyProductDetailsImgList {
        order: 2;
        width: 100%;
        margin: 15px 0 0 0; /* Add top margin, remove others */
    }
    
    /* Optional: Style the thumbnails to be in a centered row */
    .RentMyProductDetailsImgList ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding-left: 0;
    }
    .RentMyProductDetailsImgList li {
        list-style-type: none; /* Removes bullet points */
    }

    /* Info/Calendar/Actions appear THIRD */
    .RentMyProductDetilsInfo {
        order: 3;
        margin-top: 20px;
    }

    /* Product Description appears LAST */
    .RentMyProductDescription {
        order: 4;
    }
}/* End custom CSS */