.elementor-791 .elementor-element.elementor-element-3d6d377{--display:flex;--background-transition:0.3s;}.elementor-791 .elementor-element.elementor-element-e3a6da7{text-align:center;}.elementor-791 .elementor-element.elementor-element-718dbae{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;}.elementor-791 .elementor-element.elementor-element-f744e3d{--display:flex;--background-transition:0.3s;}.elementor-791 .elementor-element.elementor-element-bbd758c{--iteration-count:infinite;--dynamic-text-color:var( --e-global-color-text );}.elementor-791 .elementor-element.elementor-element-bbd758c .elementor-headline{text-align:center;}:root{--page-title-display:none;}body.elementor-page-791:not(.elementor-motion-effects-element-type-background), body.elementor-page-791 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-accent );}/* Start custom CSS for html, class: .elementor-element-592305c */#products {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns on larger screens */
    grid-gap: 20px; /* Gap between items */
    justify-content: center; /* Center the grid */
}

.product {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}

.product img {
    width: 315px; /* Adjust this width as needed */
    height: 315px; /* Maintain aspect ratio */
    max-width: 100%;
    transition: transform 0.3s ease; /* Smooth transition for hover effect */
}

.product img:hover {
    transform: scale(0.9); /* Shrink image to 90% of its original size */
}

#total, .order-button-wrapper, #address-wrapper {
    margin: 20px 0;
    text-align: center;
}

.order-button-wrapper button {
    display: inline-block;
}

#address-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#address-form {
    width: 300px; /* Adjust this width as needed */
    max-width: 100%;
}

#address-form input, #address-form select {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    box-sizing: border-box;
}

/* Add to Cart Button Styles */
.product button {
    background-color: #333333; /* Initial background color */
    color: white; /* White text */
    border: none; /* Remove borders */
    padding: 10px 20px; /* Add some padding */
    text-align: center; /* Center the text */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Get the block to fit the content */
    font-size: 16px; /* Increase font size */
    margin: 4px 2px; /* Some margin */
    cursor: pointer; /* Pointer/hand icon on hover */
    border-radius: 12px; /* Rounded corners */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions for hover and click */
}

.product button:hover {
    background-color: #e6c068; /* Color on hover */
    color: black;
    transform: scale(0.9);
}

.product button:focus {
    outline: none; /* Remove the outline on focus */
}

.product button:avtive {
    background-color: #e6c068; /* Background color when active */
}

.product button:visited {
    background-color: #e6c069; /* Background color after being clicked */
}

/* Place Order Button Styles */
.order-button-wrapper button {
    background-color: #008CBA; /* Blue background */
    color: white; /* White text */
    border: none; /* Remove borders */
    padding: 10px 20px; /* Add some padding */
    text-align: center; /* Center the text */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Get the block to fit the content */
    font-size: 16px; /* Increase font size */
    margin: 4px 2px; /* Some margin */
    cursor: pointer; /* Pointer/hand icon on hover */
    border-radius: 12px; /* Rounded corners */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition for hover */
}

.order-button-wrapper button:hover {
    background-color: #00008B; /* Darker blue on hover */
    transform: scale(0.9);
}

.order-button-wrapper button:focus {
    outline: none; /* Remove the outline on focus */
}

/* Responsive Design */
@media (max-width: 1024px) {
    #products {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    }
}

@media (max-width: 767px) {
    #products {
        grid-template-columns: 1fr; /* 1 column on mobile devices */
    }
}/* End custom CSS */