/* Main container for books */
.books-container {
    display: grid;
    gap: 20px; /* Space between books */
}

/* Grid setup for books */
.books-grid {
    display: grid;
    gap: 20px; /* Space between items */
}

/* Desktop view: four books in one row */
@media (min-width: 768px) {
    .books-grid {
        grid-template-columns: repeat(4, 1fr); /* Four columns */
    }
}

/* Mobile view: two books in one row */
@media (max-width: 767px) {
    .books-grid {
        grid-template-columns: repeat(2, 1fr); /* Two columns */
    }
}

/* Book image container */
.elementor-widget__width-initial {
    text-align: center; /* Center align content */
}

/* Image styling */
.elementor-widget__width-initial img {
    width: 100%; /* Full width of the container */
    height: auto; /* Maintain aspect ratio */
    max-width: 180px; /* Prevent oversized images */
    display: block;
    margin: 0 auto; /* Center the image */
    border-radius: 10px; /* Optional: rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow */
}

/* Button styling and positioning */
.elementor-widget-button {
    grid-column: span 4; /* Button spans all columns on desktop */
    text-align: center; /* Center the button */
    margin-top: 20px; /* Add some space above the button */
}

@media (max-width: 767px) {
    .elementor-widget-button {
        grid-column: span 2; /* Button spans two columns on mobile */
    }
}

/* Button style */
.elementor-button {
    padding: 10px 20px;
    background-color: #0073e6; /* Button color */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    display: inline-block;
}


/* Fix mobile layout to display images in pairs */
@media (max-width: 768px) {
    .elementor-element .elementor-widget-image {
        width: 100% !important; /* Ensures each image takes up half the width */			
        margin: 0 !important; /* Adds space between images */			
        display: inline-block !important; /* Forces side-by-side display */
        vertical-align: top !important; /* Aligns images to the top */
    }

    .elementor-widget-container {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important; /* Spreads images evenly */
        gap: 2% !important; /* Adds gap between images */
    }

    /* Additional styling to ensure correct centering */
    .elementor-element {
        text-align: center !important; /* Centers images */
    }
}


/* CSS to make the image larger on mobile view */
@media (max-width: 768px) {
    .elementor-element-31ecb59 .elementor-widget-container img {
        width: 100% !important; /* Make the image take the full width of its container */
        max-width: 100% !important; /* Prevent the image from exceeding the container size */
        height: auto !important; /* Maintain the aspect ratio */
        display: block !important; /* Ensures the image displays as a block */
        margin: 0 auto !important; /* Center the image horizontally */
    }

    .elementor-element-dcbd7ec {
        padding: 0 !important; /* Remove extra padding around the image */
        margin: 0 !important; /* Align the container properly */
    }

    .elementor-element-c5023c5 {
        padding: 10px !important; /* Add some padding for aesthetics */
    }

    .elementor-element-828209b .elementor-heading-title {
        font-size: 16px !important; /* Adjust heading size for better readability on mobile */
        text-align: center !important; /* Center-align text for a balanced layout */
    }
}
/* CSS to make the image larger on mobile view */
@media (max-width: 768px) {
    .elementor-element-31ecb59 .elementor-widget-container img {
        width: 100% !important; /* Make the image take the full width of its container */
        max-width: 100% !important; /* Prevent the image from exceeding the container size */
        height: auto !important; /* Maintain the aspect ratio */

    }

    .elementor-element-dcbd7ec {
        padding: 0 !important; /* Remove extra padding around the image */
        margin: 0 !important; /* Align the container properly */
    }

    .elementor-element-c5023c5 {
        padding: 10px !important; /* Add some padding for aesthetics */
    }

    .elementor-element-828209b .elementor-heading-title {
        font-size: 16px !important; /* Adjust heading size for better readability on mobile */
        text-align: center !important; /* Center-align text for a balanced layout */
    }
}

/* Flexbox Container for Images */
.e-con-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* Space between items */
}

/* Flex property for each child container */
.e-con-full.e-flex.e-con.e-child {
    flex: 1 1 300px; /* Flex-grow, flex-shrink, and minimum width */
}

/* Image Alignment */
.elementor-widget-image img {
    max-width: 100%; /* Ensure images don’t overflow their containers */
    height: auto; /* Maintain aspect ratio */
}

/* Set the parent container to display items in a row */
.elementor-container {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next line on smaller screens */
    justify-content: space-between; /* Space between items */
    gap: 20px; /* Adjust the gap between the containers */
    padding: 20px;
}

/* Styles for each individual image container */
.elementor-element-b1277eb,
.elementor-element-5064e54,
.elementor-element-5c80531,
.elementor-element-035d92d,
.elementor-element-31fbfb0,
.elementor-element-f92877f {
    display: flex;
    flex-direction: column; /* Stack image and button vertically */
    align-items: center; /* Center the content horizontally */
    justify-content: center; /* Center the content vertically */
    width: 220px; /* Set the width of each container */
    padding: 10px;
    border: 1px solid #ddd; /* Optional: border around each container */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: add shadow */
}

/* Ensure images are responsive */
.elementor-widget-image img {
    max-width: 100%; /* Make the images responsive */
    height: auto; /* Maintain the aspect ratio */
}

/* Style for the Buy Now button */
.elementor-widget-button a {
    display: inline-block;
    background-color: #007cba; /* Button background color */
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
    margin-top: 10px; /* Add space between image and button */
    transition: background-color 0.3s ease;
}

.elementor-widget-button a:hover {
    background-color: #005a9e; /* Darker background color on hover */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .elementor-container {
        flex-direction: column; /* Stack containers vertically on smaller screens */
        align-items: center;
    }

    .elementor-element-b1277eb,
    .elementor-element-5064e54,
    .elementor-element-5c80531,
    .elementor-element-035d92d,
    .elementor-element-31fbfb0,
    .elementor-element-f92877f {
        width: 100%; /* Make the containers full width on smaller screens */
        margin-bottom: 20px; /* Add space between items */
    }
}