is the
column header row (e.g. blank cell + "Residential" + "Commercial"),
and the first | of every other row is a row label (e.g. "Door Types").
This is a comparison-matrix layout, so both the top row and the left
column get header-style treatment.
========================================================================== */
.elementor-8285 .elementor-element.elementor-element-5d8a120 table {
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 !important;
font-family: 'Poppins', 'Open Sans', sans-serif !important;
font-size: 16px !important;
color: #1C1C1C !important;
background: #ffffff !important;
border-radius: 12px !important;
overflow: hidden !important;
box-shadow: 0 4px 18px rgba(15, 95, 174, 0.10) !important;
}
/* ---------- TOP HEADER ROW (first row of tbody) ---------- */
.elementor-8285 .elementor-element.elementor-element-5d8a120 table tbody tr:first-child {
background: linear-gradient(135deg, #0F5FAE 0%, #0B4882 100%) !important;
box-shadow: inset 0 -3px 0 #F9B233 !important;
}
.elementor-8285 .elementor-element.elementor-element-5d8a120 table tbody tr:first-child td,
.elementor-8285 .elementor-element.elementor-element-5d8a120 table tbody tr:first-child td * {
color: #ffffff !important;
font-weight: 600 !important;
font-size: 16px !important;
letter-spacing: 0.3px !important;
text-transform: uppercase !important;
padding: 16px 20px !important;
border: none !important;
border-bottom: none !important;
position: relative !important;
text-align: center !important;
background: transparent !important;
}
/* The blank top-left corner cell stays empty, no border divider needed */
.elementor-8285 .elementor-element.elementor-element-5d8a120 table tbody tr:first-child td:not(:last-child)::after {
content: '' !important;
position: absolute !important;
right: 0 !important;
top: 25% !important;
height: 50% !important;
width: 1px !important;
background: rgba(255, 255, 255, 0.20) !important;
}
.elementor-8285 .elementor-element.elementor-element-5d8a120 table tbody tr:first-child:hover {
background: linear-gradient(135deg, #0F5FAE 0%, #0B4882 100%) !important;
}
/* ---------- BODY ROWS (everything after the top header row) ---------- */
.elementor-8285 .elementor-element.elementor-element-5d8a120 table tbody tr:not(:first-child) td {
padding: 14px 20px !important;
border: none !important;
border-bottom: 1px solid #E2E8F0 !important;
vertical-align: middle !important;
text-align: center !important;
font-size: 16px !important;
}
/* Center any images inside cells */
.elementor-8285 .elementor-element.elementor-element-5d8a120 table tbody td img {
display: block !important;
margin: 0 auto !important;
max-width: 100% !important;
height: auto !important;
}
/* Zebra striping on body rows */
.elementor-8285 .elementor-element.elementor-element-5d8a120 table tbody tr:not(:first-child):nth-child(odd) {
background-color: #F4F7FB !important;
}
.elementor-8285 .elementor-element.elementor-element-5d8a120 table tbody tr:not(:first-child):nth-child(even) {
background-color: #ffffff !important;
}
.elementor-8285 .elementor-element.elementor-element-5d8a120 table tbody tr:last-child td {
border-bottom: none !important;
}
/* ---------- HOVER (body rows only) ---------- */
.elementor-8285 .elementor-element.elementor-element-5d8a120 table tbody tr:not(:first-child) {
transition: background-color 0.25s ease !important;
}
.elementor-8285 .elementor-element.elementor-element-5d8a120 table tbody tr:not(:first-child):hover {
background-color: #FFF4DC !important;
}
/* ---------- LEFT COLUMN HEADER (row labels, e.g. "Door Types") ---------- */
.elementor-8285 .elementor-element.elementor-element-5d8a120 table tbody tr:not(:first-child) td:first-child,
.elementor-8285 .elementor-element.elementor-element-5d8a120 table tbody tr:not(:first-child) td:first-child * {
font-weight: 700 !important;
color: #ffffff !important;
background: #0F5FAE !important;
text-align: left !important;
font-size: 16px !important;
}
/* Keep the left-column cell's own background on hover, distinct from body hover */
.elementor-8285 .elementor-element.elementor-element-5d8a120 table tbody tr:not(:first-child):hover td:first-child {
background: #0B4882 !important;
}
/* ---------- ROW HIGHLIGHT (add 'cod-highlight' class via the text editor) ---------- */
.elementor-8285 .elementor-element.elementor-element-5d8a120 table tbody tr.cod-highlight,
.elementor-8285 .elementor-element.elementor-element-5d8a120 table tbody tr:has(.cod-highlight) {
background-color: #FFF4DC !important;
box-shadow: inset 3px 0 0 #F9B233 !important;
}
/* ---------- RESPONSIVE ---------- */
@media (max-width: 767px) {
.elementor-8285 .elementor-element.elementor-element-5d8a120 table,
.elementor-8285 .elementor-element.elementor-element-5d8a120 table tbody tr:first-child td,
.elementor-8285 .elementor-element.elementor-element-5d8a120 table tbody tr:not(:first-child) td {
font-size: 16px !important;
}
.elementor-8285 .elementor-element.elementor-element-5d8a120 table tbody tr:first-child td,
.elementor-8285 .elementor-element.elementor-element-5d8a120 table tbody tr:not(:first-child) td {
padding: 10px 12px !important;
}
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-a0de8c4 */.elementor-8285 .elementor-element.elementor-element-a0de8c4 p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-214a8fd */.elementor-8285 .elementor-element.elementor-element-214a8fd p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-05e3f27 */.elementor-8285 .elementor-element.elementor-element-05e3f27 p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-4616b0f */.elementor-8285 .elementor-element.elementor-element-4616b0f p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-fa5a4ac */.elementor-8285 .elementor-element.elementor-element-fa5a4ac p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-2493ade */.elementor-8285 .elementor-element.elementor-element-2493ade p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-e391692 */.elementor-8285 .elementor-element.elementor-element-e391692 p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-214a8fd */.elementor-8285 .elementor-element.elementor-element-214a8fd p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-05e3f27 */.elementor-8285 .elementor-element.elementor-element-05e3f27 p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-4616b0f */.elementor-8285 .elementor-element.elementor-element-4616b0f p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-fa5a4ac */.elementor-8285 .elementor-element.elementor-element-fa5a4ac p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-2493ade */.elementor-8285 .elementor-element.elementor-element-2493ade p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-e391692 */.elementor-8285 .elementor-element.elementor-element-e391692 p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-214a8fd */.elementor-8285 .elementor-element.elementor-element-214a8fd p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-05e3f27 */.elementor-8285 .elementor-element.elementor-element-05e3f27 p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-4616b0f */.elementor-8285 .elementor-element.elementor-element-4616b0f p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-fa5a4ac */.elementor-8285 .elementor-element.elementor-element-fa5a4ac p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-2493ade */.elementor-8285 .elementor-element.elementor-element-2493ade p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-e391692 */.elementor-8285 .elementor-element.elementor-element-e391692 p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-214a8fd */.elementor-8285 .elementor-element.elementor-element-214a8fd p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-05e3f27 */.elementor-8285 .elementor-element.elementor-element-05e3f27 p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-4616b0f */.elementor-8285 .elementor-element.elementor-element-4616b0f p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-fa5a4ac */.elementor-8285 .elementor-element.elementor-element-fa5a4ac p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-2493ade */.elementor-8285 .elementor-element.elementor-element-2493ade p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-e391692 */.elementor-8285 .elementor-element.elementor-element-e391692 p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-214a8fd */.elementor-8285 .elementor-element.elementor-element-214a8fd p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-05e3f27 */.elementor-8285 .elementor-element.elementor-element-05e3f27 p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-4616b0f */.elementor-8285 .elementor-element.elementor-element-4616b0f p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-fa5a4ac */.elementor-8285 .elementor-element.elementor-element-fa5a4ac p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-2493ade */.elementor-8285 .elementor-element.elementor-element-2493ade p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-e391692 */.elementor-8285 .elementor-element.elementor-element-e391692 p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-214a8fd */.elementor-8285 .elementor-element.elementor-element-214a8fd p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-05e3f27 */.elementor-8285 .elementor-element.elementor-element-05e3f27 p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-4616b0f */.elementor-8285 .elementor-element.elementor-element-4616b0f p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-fa5a4ac */.elementor-8285 .elementor-element.elementor-element-fa5a4ac p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-2493ade */.elementor-8285 .elementor-element.elementor-element-2493ade p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-e391692 */.elementor-8285 .elementor-element.elementor-element-e391692 p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-214a8fd */.elementor-8285 .elementor-element.elementor-element-214a8fd p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-05e3f27 */.elementor-8285 .elementor-element.elementor-element-05e3f27 p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-4616b0f */.elementor-8285 .elementor-element.elementor-element-4616b0f p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-fa5a4ac */.elementor-8285 .elementor-element.elementor-element-fa5a4ac p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-2493ade */.elementor-8285 .elementor-element.elementor-element-2493ade p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-e391692 */.elementor-8285 .elementor-element.elementor-element-e391692 p:last-child {
margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-82e5ff7 */.elementor-8285 .elementor-element.elementor-element-82e5ff7 p:last-child {
margin-bottom: 0px;
}/* End custom CSS */ |