.elementor-245 .elementor-element.elementor-element-63c66c23{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:stretch;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--overflow:hidden;--overlay-opacity:0.4;--padding-top:100px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-245 .elementor-element.elementor-element-63c66c23:not(.elementor-motion-effects-element-type-background), .elementor-245 .elementor-element.elementor-element-63c66c23 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://eway.com.pk/wp-content/uploads/2025/07/lubricant-2.jpeg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-245 .elementor-element.elementor-element-63c66c23::before, .elementor-245 .elementor-element.elementor-element-63c66c23 > .elementor-background-video-container::before, .elementor-245 .elementor-element.elementor-element-63c66c23 > .e-con-inner > .elementor-background-video-container::before, .elementor-245 .elementor-element.elementor-element-63c66c23 > .elementor-background-slideshow::before, .elementor-245 .elementor-element.elementor-element-63c66c23 > .e-con-inner > .elementor-background-slideshow::before, .elementor-245 .elementor-element.elementor-element-63c66c23 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-bac5279 );--background-overlay:'';}.elementor-245 .elementor-element.elementor-element-37f4b621{--display:flex;--margin-top:5em;--margin-bottom:7em;--margin-left:0em;--margin-right:0em;--padding-top:1em;--padding-bottom:1em;--padding-left:1em;--padding-right:1em;}.elementor-245 .elementor-element.elementor-element-3ecf1e8d{width:auto;max-width:auto;text-align:center;}.elementor-245 .elementor-element.elementor-element-3ecf1e8d .elementor-heading-title{font-family:var( --e-global-typography-583e54c-font-family ), Sans-serif;font-size:var( --e-global-typography-583e54c-font-size );font-weight:var( --e-global-typography-583e54c-font-weight );text-transform:var( --e-global-typography-583e54c-text-transform );line-height:var( --e-global-typography-583e54c-line-height );letter-spacing:var( --e-global-typography-583e54c-letter-spacing );color:var( --e-global-color-accent );}.elementor-245 .elementor-element.elementor-element-1044a159{padding:0px 0px 0px 14px;border-style:solid;border-width:0px 0px 0px 3px;border-color:var( --e-global-color-876e5ba );}.elementor-245 .elementor-element.elementor-element-1044a159 .elementor-heading-title{color:var( --e-global-color-accent );}.elementor-245 .elementor-element.elementor-element-f9e27f0{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:80px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-245 .elementor-element.elementor-element-f9e27f0.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-245 .elementor-element.elementor-element-4af6eb8{--display:flex;}.elementor-245 .elementor-element.elementor-element-81cb65f{--display:flex;}.elementor-245 .elementor-element.elementor-element-9fc21cf{--display:flex;}.elementor-245 .elementor-element.elementor-element-40c3dbc{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:80px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-245 .elementor-element.elementor-element-d027518 .htmega-table-style thead tr th{background-color:transparent;background-image:linear-gradient(180deg, #02010100 0%, #F2295B00 100%);}.elementor-245 .elementor-element.elementor-element-d027518{width:var( --container-widget-width, 101.455% );max-width:101.455%;--container-widget-width:101.455%;--container-widget-flex-grow:0;}.elementor-245 .elementor-element.elementor-element-d027518.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-245 .elementor-element.elementor-element-d027518 .htb-table tbody tr:nth-child(even){background-color:#02010100;}.elementor-245 .elementor-element.elementor-element-3aebd12{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-245 .elementor-element.elementor-element-3aebd12.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-245 .elementor-element.elementor-element-1186045{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:80px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-245 .elementor-element.elementor-element-1186045.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-245 .elementor-element.elementor-element-a4e6c36{--display:flex;}.elementor-245 .elementor-element.elementor-element-fb036cb{--display:flex;}.elementor-245 .elementor-element.elementor-element-9c7e82e{--display:flex;}.elementor-245 .elementor-element.elementor-element-16d3ffa{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:80px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-245 .elementor-element.elementor-element-a62069e{--display:flex;}.elementor-245 .elementor-element.elementor-element-dc3b255{--display:flex;}.elementor-245 .elementor-element.elementor-element-519350a{--display:flex;}.elementor-245 .elementor-element.elementor-element-a508025{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--margin-top:80px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-245 .elementor-element.elementor-element-a508025.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-245 .elementor-element.elementor-element-8960668 .htmega-table-style thead tr th{background-color:transparent;background-image:linear-gradient(180deg, #02010100 0%, #F2295B00 100%);}.elementor-245 .elementor-element.elementor-element-8960668{width:var( --container-widget-width, 101.455% );max-width:101.455%;--container-widget-width:101.455%;--container-widget-flex-grow:0;}.elementor-245 .elementor-element.elementor-element-8960668.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-245 .elementor-element.elementor-element-8960668 .htb-table tbody tr:nth-child(even){background-color:#02010100;}.elementor-245 .elementor-element.elementor-element-97f1862{--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-245 .elementor-element.elementor-element-97f1862.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-245 .elementor-element.elementor-element-4a8ebe9{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:80px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-245 .elementor-element.elementor-element-50807a0{--display:flex;}.elementor-245 .elementor-element.elementor-element-efad8e2{--display:flex;}.elementor-245 .elementor-element.elementor-element-8dbd755{--display:flex;}.elementor-245 .elementor-element.elementor-element-2ebd273{--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-245 .elementor-element.elementor-element-41f8da3 .htmega-table-style thead tr th{background-color:transparent;background-image:linear-gradient(180deg, #02010100 0%, #F2295B00 100%);}.elementor-245 .elementor-element.elementor-element-41f8da3{width:var( --container-widget-width, 101.455% );max-width:101.455%;--container-widget-width:101.455%;--container-widget-flex-grow:0;}.elementor-245 .elementor-element.elementor-element-41f8da3.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-245 .elementor-element.elementor-element-41f8da3 .htb-table tbody tr:nth-child(even){background-color:#02010100;}.elementor-245 .elementor-element.elementor-element-654a91b{--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-245 .elementor-element.elementor-element-81bde98{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-245 .elementor-element.elementor-element-1c624f7{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:80px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-245 .elementor-element.elementor-element-79078bc{--display:flex;}.elementor-245 .elementor-element.elementor-element-98d78bc{--display:flex;}.elementor-245 .elementor-element.elementor-element-6615c12{--display:flex;}.elementor-245 .elementor-element.elementor-element-f910d1e{--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-245 .elementor-element.elementor-element-9aa0247 .htmega-table-style .elementor-repeater-item-7fd2dcb{text-align:left;}.elementor-245 .elementor-element.elementor-element-9aa0247 .htmega-table-style thead tr th{background-color:transparent;background-image:linear-gradient(180deg, #02010100 0%, #F2295B00 100%);}.elementor-245 .elementor-element.elementor-element-9aa0247{width:var( --container-widget-width, 101.455% );max-width:101.455%;--container-widget-width:101.455%;--container-widget-flex-grow:0;}.elementor-245 .elementor-element.elementor-element-9aa0247.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-245 .elementor-element.elementor-element-9aa0247 .htb-table tbody tr:nth-child(even){background-color:#02010100;}.elementor-245 .elementor-element.elementor-element-c8784f3{--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-245 .elementor-element.elementor-element-1ceaccd{--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-245 .elementor-element.elementor-element-b6b7b82{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-245 .elementor-element.elementor-element-b88f742{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:80px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-245 .elementor-element.elementor-element-c5a3b79{--display:flex;}.elementor-245 .elementor-element.elementor-element-b07645e{--display:flex;}.elementor-245 .elementor-element.elementor-element-4ccdd59{--display:flex;}.elementor-245 .elementor-element.elementor-element-55407e1{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-245 .elementor-element.elementor-element-47a4a85 .htmega-table-style .elementor-repeater-item-7fd2dcb{text-align:left;}.elementor-245 .elementor-element.elementor-element-47a4a85 .htmega-table-style thead tr th{background-color:transparent;background-image:linear-gradient(180deg, #02010100 0%, #F2295B00 100%);}.elementor-245 .elementor-element.elementor-element-47a4a85{width:var( --container-widget-width, 101.455% );max-width:101.455%;--container-widget-width:101.455%;--container-widget-flex-grow:0;}.elementor-245 .elementor-element.elementor-element-47a4a85.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-245 .elementor-element.elementor-element-47a4a85 .htb-table tbody tr:nth-child(even){background-color:#02010100;}@media(max-width:1024px){.elementor-245 .elementor-element.elementor-element-63c66c23:not(.elementor-motion-effects-element-type-background), .elementor-245 .elementor-element.elementor-element-63c66c23 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:80% 50%;}.elementor-245 .elementor-element.elementor-element-63c66c23{--padding-top:95px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-245 .elementor-element.elementor-element-37f4b621{--margin-top:3em;--margin-bottom:5em;--margin-left:0em;--margin-right:0em;--padding-top:2em;--padding-bottom:2em;--padding-left:2em;--padding-right:2em;}.elementor-245 .elementor-element.elementor-element-3ecf1e8d .elementor-heading-title{font-size:var( --e-global-typography-583e54c-font-size );line-height:var( --e-global-typography-583e54c-line-height );letter-spacing:var( --e-global-typography-583e54c-letter-spacing );}}@media(max-width:767px){.elementor-245 .elementor-element.elementor-element-63c66c23:not(.elementor-motion-effects-element-type-background), .elementor-245 .elementor-element.elementor-element-63c66c23 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:80% 50%;}.elementor-245 .elementor-element.elementor-element-63c66c23{--padding-top:60px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-245 .elementor-element.elementor-element-37f4b621{--margin-top:1em;--margin-bottom:3em;--margin-left:0em;--margin-right:0em;--padding-top:1em;--padding-bottom:1em;--padding-left:1em;--padding-right:1em;}.elementor-245 .elementor-element.elementor-element-3ecf1e8d .elementor-heading-title{font-size:var( --e-global-typography-583e54c-font-size );line-height:var( --e-global-typography-583e54c-line-height );letter-spacing:var( --e-global-typography-583e54c-letter-spacing );}.elementor-245 .elementor-element.elementor-element-f9e27f0{--width:403.667px;}.elementor-245 .elementor-element.elementor-element-3aebd12{--width:542.667px;}.elementor-245 .elementor-element.elementor-element-1186045{--width:307.667px;}.elementor-245 .elementor-element.elementor-element-a508025{--width:338.667px;}.elementor-245 .elementor-element.elementor-element-97f1862{--width:487.667px;}}@media(min-width:768px){.elementor-245 .elementor-element.elementor-element-37f4b621{--width:50%;}.elementor-245 .elementor-element.elementor-element-40c3dbc{--content-width:1280px;}}@media(max-width:1024px) and (min-width:768px){.elementor-245 .elementor-element.elementor-element-37f4b621{--width:60%;}}/* Start custom CSS for htmega-datatable-addons, class: .elementor-element-8960668 *//* For desktop and larger screens, keep the table as it is */
.htb-table {
width: 100% !important;
table-layout: auto !important;
border-collapse: collapse;
}
.htb-table th,
.htb-table td {
white-space: normal !important;
word-break: break-word !important;
padding: 8px;
text-align: left;
}
/* For mobile screens (up to 767px) */
@media (max-width: 767px) {
/* Hide the original table headers on mobile */
.htb-table thead {
display: none;
}
/* Make each table row a block to stack them */
.htb-table tr {
display: block;
margin-bottom: 12px;
border: 1px solid #ddd;
border-radius: 6px;
padding: 6px;
}
/* Style the table cells (td) to look like separate items */
.htb-table td {
display: block;
width: 100% !important;
font-size: 14px;
padding: 8px 12px;
}
/* Add a pseudo-element to each td to show the heading as a label */
.htb-table td:before {
content: attr(data-label);
font-weight: bold;
display: block;
background-color: #6b7280;
color: #fff;
padding: 8px 12px;
margin: -8px -12px 8px -12px; /* Adjusting for padding */
}
/* Specific labels for each column based on your content */
/* Aapko apne HTML mein har | mein data-label attribute add karna hoga */
.htb-table td:nth-of-type(1):before {
content: "PRODUCT & THICKNERS";
}
.htb-table td:nth-of-type(2):before {
content: "CONSISTENCIES";
}
.htb-table td:nth-of-type(3):before {
content: "PROPERTIES";
}
.htb-table td:nth-of-type(4):before {
content: "APPLICATIONS";
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a508025 */body {
overflow-x: hidden;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4a8ebe9 */@media (max-width: 767px) {
.elementor-element-f9e27f0 .e-con-inner {
display: flex !important;
flex-direction: row !important;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.elementor-element-f9e27f0 .e-con-inner .e-child {
flex: 0 0 30%; /* each image takes ~30% instead of tiny shrink */
text-align: center;
}
.elementor-element-f9e27f0 .e-con-inner img {
width: 100% !important; /* scale image to container */
height: auto !important;
}
}/* End custom CSS */
/* Start custom CSS for htmega-datatable-addons, class: .elementor-element-41f8da3 *//* For desktop and larger screens, keep the table as it is */
.htb-table {
width: 100% !important;
table-layout: auto !important;
border-collapse: collapse;
}
.htb-table th,
.htb-table td {
white-space: normal !important;
word-break: break-word !important;
padding: 8px;
text-align: left;
}
/* For mobile screens (up to 767px) */
@media (max-width: 767px) {
/* Hide the original table headers on mobile */
.htb-table thead {
display: none;
}
/* Make each table row a block to stack them */
.htb-table tr {
display: block;
margin-bottom: 12px;
border: 1px solid #ddd;
border-radius: 6px;
padding: 6px;
}
/* Style the table cells (td) to look like separate items */
.htb-table td {
display: block;
width: 100% !important;
font-size: 14px;
padding: 8px 12px;
}
/* Add a pseudo-element to each td to show the heading as a label */
.htb-table td:before {
content: attr(data-label);
font-weight: bold;
display: block;
background-color: #6b7280;
color: #fff;
padding: 8px 12px;
margin: -8px -12px 8px -12px; /* Adjusting for padding */
}
/* Specific labels for each column based on your content */
/* Aapko apne HTML mein har | mein data-label attribute add karna hoga */
.htb-table td:nth-of-type(1):before {
content: "PRODUCT & THICKNERS";
}
.htb-table td:nth-of-type(2):before {
content: "CONSISTENCIES";
}
.htb-table td:nth-of-type(3):before {
content: "PROPERTIES";
}
.htb-table td:nth-of-type(4):before {
content: "APPLICATIONS";
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-81bde98 */@media (max-width: 767px) {
.elementor-element-f9e27f0 .e-con-inner {
display: flex !important;
flex-direction: row !important;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.elementor-element-f9e27f0 .e-con-inner .e-child {
flex: 0 0 30%; /* each image takes ~30% instead of tiny shrink */
text-align: center;
}
.elementor-element-f9e27f0 .e-con-inner img {
width: 100% !important; /* scale image to container */
height: auto !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-654a91b *//*
Target the container that holds the product elements.
Based on your HTML, this is 'elementor-element-1186045'.
*/
@media (max-width: 767px) {
.elementor-element-1186045 {
/*
Set the main flex direction to row.
This makes the immediate child elements (your product containers) line up horizontally.
*/
flex-direction: row !important;
/*
Ensure the children don't wrap to the next line.
*/
flex-wrap: nowrap !important;
/*
If the items are overflowing, you might want to enable horizontal scrolling.
*/
overflow-x: auto !important;
/*
Optional: A bit of padding for visual spacing on the sides.
*/
padding: 0 10px;
}
/*
Target the individual product containers (the children).
This ensures they are all the same size and don't take up the full width.
You may need to adjust the 'width' percentage.
*/
.elementor-element-1186045 > .e-con-child {
width: 33.33% !important; /* Example: for 3 products. Adjust if you have more or less. */
min-width: 150px; /* Ensures a minimum readable width for each product */
flex-shrink: 0; /* Prevents them from shrinking when space is tight */
}
}/* End custom CSS */
/* Start custom CSS for htmega-datatable-addons, class: .elementor-element-9aa0247 *//* For desktop and larger screens, keep the table as it is */
.htb-table {
width: 100% !important;
table-layout: auto !important;
border-collapse: collapse;
}
.htb-table th,
.htb-table td {
white-space: normal !important;
word-break: break-word !important;
padding: 8px;
text-align: left;
}
/* For mobile screens (up to 767px) */
@media (max-width: 767px) {
/* Hide the original table headers on mobile */
.htb-table thead {
display: none;
}
/* Make each table row a block to stack them */
.htb-table tr {
display: block;
margin-bottom: 12px;
border: 1px solid #ddd;
border-radius: 6px;
padding: 6px;
}
/* Style the table cells (td) to look like separate items */
.htb-table td {
display: block;
width: 100% !important;
font-size: 14px;
padding: 8px 12px;
}
/* Add a pseudo-element to each td to show the heading as a label */
.htb-table td:before {
content: attr(data-label);
font-weight: bold;
display: block;
background-color: #6b7280;
color: #fff;
padding: 8px 12px;
margin: -8px -12px 8px -12px; /* Adjusting for padding */
}
/* Specific labels for each column based on your content */
/* Aapko apne HTML mein har | mein data-label attribute add karna hoga */
.htb-table td:nth-of-type(1):before {
content: "PRODUCT & THICKNERS";
}
.htb-table td:nth-of-type(2):before {
content: "CONSISTENCIES";
}
.htb-table td:nth-of-type(3):before {
content: "PROPERTIES";
}
.htb-table td:nth-of-type(4):before {
content: "APPLICATIONS";
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b6b7b82 */@media (max-width: 767px) {
.elementor-element-f9e27f0 .e-con-inner {
display: flex !important;
flex-direction: row !important;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.elementor-element-f9e27f0 .e-con-inner .e-child {
flex: 0 0 30%; /* each image takes ~30% instead of tiny shrink */
text-align: center;
}
.elementor-element-f9e27f0 .e-con-inner img {
width: 100% !important; /* scale image to container */
height: auto !important;
}
}/* End custom CSS */
/* Start custom CSS for htmega-datatable-addons, class: .elementor-element-47a4a85 *//* For desktop and larger screens, keep the table as it is */
.htb-table {
width: 100% !important;
table-layout: auto !important;
border-collapse: collapse;
}
.htb-table th,
.htb-table td {
white-space: normal !important;
word-break: break-word !important;
padding: 8px;
text-align: left;
}
/* For mobile screens (up to 767px) */
@media (max-width: 767px) {
/* Hide the original table headers on mobile */
.htb-table thead {
display: none;
}
/* Make each table row a block to stack them */
.htb-table tr {
display: block;
margin-bottom: 12px;
border: 1px solid #ddd;
border-radius: 6px;
padding: 6px;
}
/* Style the table cells (td) to look like separate items */
.htb-table td {
display: block;
width: 100% !important;
font-size: 14px;
padding: 8px 12px;
}
/* Add a pseudo-element to each td to show the heading as a label */
.htb-table td:before {
content: attr(data-label);
font-weight: bold;
display: block;
background-color: #6b7280;
color: #fff;
padding: 8px 12px;
margin: -8px -12px 8px -12px; /* Adjusting for padding */
}
/* Specific labels for each column based on your content */
/* Aapko apne HTML mein har | mein data-label attribute add karna hoga */
.htb-table td:nth-of-type(1):before {
content: "PRODUCT & THICKNERS";
}
.htb-table td:nth-of-type(2):before {
content: "CONSISTENCIES";
}
.htb-table td:nth-of-type(3):before {
content: "PROPERTIES";
}
.htb-table td:nth-of-type(4):before {
content: "APPLICATIONS";
}
}/* End custom CSS */ |