html, body { margin: 0; padding: 0; }
body { background-color: #ffffff; color: #3b495e; font-family: 'Vazir'; font-size: 15px; line-height: 1.5; padding: 0; }

.wrapper { max-width: 900px; margin: 0 auto; padding-top: 20px; } /* Added padding-top */
.wrapper h1, .wrapper h2, .wrapper h3, .wrapper h4, .wrapper h5, .wrapper h6, .wrapper p {
    margin: 0 0 15px;
}
.wrapper > h2 { text-align: center; margin-bottom: 40px; }

.sf-comparison-table {
  --sf-skill-title-color: #304050;
  --sf-skill-row-label: #172029;
  --sf-skill-row-bg: #fdfdfd;
  --sf-skill-row-hover-bg: #46a787;
  --sf-skill-row-hover-color: #fff;
  --sf-skill-row-subtitle: #46a787;
}

.sf-comparison-table { display: flex; flex-direction: column; width: 100%; max-width: 100%; margin: 0 auto; }
.sf-comparison-table * { box-sizing: border-box; }

.sf-comparison-table .product-image {
    width: 150px;
    height: auto;
    margin-bottom: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Added shadow */
    border-radius: 5px;
}

.sf-comparison-table .image-container {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.sf-comparison-table .product-title { font-size: 14px; font-weight: 500; color: var(--sf-skill-title-color); } /* Reduced font size */
.sf-comparison-table .small-text { font-size: 85%; opacity: .65; }

.sf-comparison-table .row-subtitle { color: var(--sf-skill-row-subtitle); margin: 0; padding: 20px; font-size: 18px; font-weight: 400; }
.sf-comparison-table ul.row { list-style: none; display: flex; flex: 1; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; width: 100%; min-height: 50px; padding: 5px 0; border-radius: 4px; }
.sf-comparison-table ul.row li { flex: 1; padding: 0 20px; line-height: 1.2; margin: 0; text-align: center; }
.sf-comparison-table ul.row li.row-label { color: var(--sf-skill-row-label); border: none; width: 200px; text-align: left; font-weight: 500; }
.sf-comparison-table ul.row:nth-child(odd):not(.row-header, .row-footer) { background-color: var(--sf-skill-row-bg); }
.sf-comparison-table ul.row:nth-child(even):not(.row-header, .row-footer) { background-color: #f1f1f1; } /* Add alternating gray color */
.sf-comparison-table ul.row:not(.row-header, .row-footer):hover { background-color: var(--sf-skill-row-hover-bg); color: var(--sf-skill-row-hover-color); }
.sf-comparison-table ul.row:not(.row-header, .row-footer):hover .row-label { color: var(--sf-skill-row-hover-color); }
.sf-comparison-table ul.row:first-of-type { align-items: flex-start; }
.sf-comparison-table ul.row:first-of-type li { padding: 0 10px; }
.sf-comparison-table ul.row:first-of-type li > *:last-child { margin-bottom: 0; }
.sf-comparison-table ul.row:last-of-type li { padding: 20px 10px 0; }

.sf-comparison-table .yes,
.sf-comparison-table .no { display: inline-flex; align-items: center; justify-content: center; color: #fff; width: 20px; height: 20px; border-radius: 100%; font-size: 10px; }
.sf-comparison-table .yes { background-color: #34b534; }
.sf-comparison-table .no { background-color: #ea4f4f; }

.sf-comparison-table .button { display: flex; justify-content: center; padding: 12px 15px; background: #46a787; color: #fff; border-radius: 8px; text-decoration: none; font-weight: 500; transition: all .3s ease-in-out; }
.sf-comparison-table a.button:hover, .sf-comparison-table .button:hover { background-color: #4eba96; }
.sf-comparison-table .button:focus { outline: none; } /* Remove focus outline */

.empty-message { text-align: center; font-size: 16px; font-weight: 500; color: #d9534f; margin-top: 20px; } /* Empty list message */
.add-second-product-message { text-align: center; font-size: 16px; font-weight: 500; color: #d9534f; margin-top: 20px; } /* Add second product message */

.clear-comparison-form { display: flex; justify-content: center; margin-top: 20px; } /* Center align and add margin-top */

@media only screen and (max-width: 767px) {
    .sf-comparison-table h6.row-subtitle { text-align: center; }
    .sf-comparison-table ul.row { flex-wrap: wrap; min-height: 50px; padding: 20px 0; }
    .sf-comparison-table ul.row li.row-label { width: 100%; text-align: center; margin-bottom: 10px; }
    .sf-comparison-table ul.row li { width: 33.3%; flex: auto; padding: 0 5px; }
    .sf-comparison-table ul.row:last-of-type li.row-label { display: none; }
}