.elementor-26081 .elementor-element.elementor-element-3019596{--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;}.elementor-26081 .elementor-element.elementor-element-8fc083a .wd-text-block{line-height:35px;}.elementor-26081 .elementor-element.elementor-element-35a3459{--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;}.elementor-26081 .elementor-element.elementor-element-73ae8ce{--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;--margin-top:20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-26081 .elementor-element.elementor-element-1e5cad0e{--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;}@media(min-width:768px){.elementor-26081 .elementor-element.elementor-element-1e5cad0e{--content-width:800px;}}/* Start custom CSS for html, class: .elementor-element-67a31c0 *//* Container for the table to enable horizontal scrolling on small screens */
.spice-table-container {
    overflow-x: auto;
    width: 100%; /* Ensure it takes full width */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Shadow for the entire table container */
    border-radius: 12px; /* Rounded corners for the container */
    padding-bottom: 10px; /* Add some padding at the bottom for scrollbar */
    background-color: #fff; /* Ensures background for shadow */
}

.spice-production-table {
    width: 100%;
    border-collapse: collapse; /* Ensures borders collapse for a clean look */
    border-spacing: 0;
    margin: 0; /* Remove default margin */
    font-family: inherit; /* Uses the default font of the parent/template */
    color: #333; /* Default text color */
    min-width: 768px; /* Minimum width for the table to ensure horizontal scroll on smaller screens */
}

/* Rounded corners for the table itself */
.spice-production-table {
    border-radius: 12px;
    overflow: hidden; /* Important for applying border-radius to the table content */
}

.spice-production-table th,
.spice-production-table td {
    padding: 12px 18px; /* Comfortable padding */
    text-align: right; /* Align text to the right for Farsi */
    border-bottom: 1px solid #ddd; /* Light border between rows */
    white-space: normal; /* Allow text to wrap within cells */
}

/* Attractive blue background for the first row (header) */
.spice-production-table thead th {
    background-color: #007bff; /* A nice, attractive blue */
    color: #ffffff; /* White text for contrast */
    font-weight: bold;
    padding: 15px 18px; /* Slightly more padding for header */
}

/* Hover effect for each row */
.spice-production-table tbody tr {
    transition: all 0.3s ease-in-out; /* Smooth transition for hover effects */
}

.spice-production-table tbody tr:hover {
    background-color: #f5f5f5; /* Light background on hover */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
    transform: translateY(-3px); /* Lifts the row slightly */
    cursor: pointer; /* Indicates interactivity */
}

/* Styles for the last row's bottom border */
.spice-production-table tbody tr:last-child td {
    border-bottom: none;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .spice-production-table {
        min-width: 600px; /* Adjust min-width for very small screens if needed, still allows scroll */
    }
}/* End custom CSS */