:root {
--primary: #e60023;
--primary-dark: #bf001d;
--text: #262626;
--muted: #666;
--border: #e8e8e8;
--soft: #fafafa;
}
* {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: #fff;
color: var(--text);
}
img {
max-width: 100%;
}
a {
text-decoration: none;
}
button,
input,
textarea,
select {
font: inherit;
}
.category2026Page {
padding: 16px 0 60px;
}
.categoryHeader {
margin-bottom: 18px;
}
.categoryHeaderTitle {
margin: 0 0 8px;
font-size: 24px;
line-height: 1.3;
font-weight: 700;
}
.categoryHeader p {
margin: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.6;
}
/* =========================================================
CATEGORY CHIPS
========================================================= */
.categoryWrapper {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 4px;
scrollbar-width: none;
}
.categoryWrapper::-webkit-scrollbar {
display: none;
}
.categoryWrapper a {
flex: 0 0 auto;
padding: 8px 13px;
border: 1px solid var(--border);
border-radius: 50px;
background: #fff;
color: #444;
font-size: 12px;
font-weight: 600;
}
.categoryWrapper a.active,
.categoryWrapper a:hover {
border-color: var(--primary);
color: var(--primary);
background: #fff5f6;
}
/* =========================================================
PRODUCT ITEM
========================================================= */
.categoryItem2026 {
padding: 20px 0;
border-bottom: 1px solid #e9e9e9;
scroll-margin-top: 10px;
}
.categoryItem2026:last-child {
border-bottom: 0;
}
/* =========================================================
GALLERY - MOBILE FIRST
========================================================= */
.categoryMedia {
width: 100%;
}
.mediaBox {
width: 100%;
height: 300px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 12px;
}
.mediaLink {
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
cursor: zoom-in;
}
.mediaLink.video-active {
cursor: pointer;
}
.mainCatImage {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
.mediaHidden {
display: none !important;
}
.mediaVideoPlay {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: var(--primary);
color: #fff;
box-shadow: 0 5px 18px rgba(0, 0, 0, .25);
pointer-events: none;
z-index: 5;
}
.mediaVideoPlay svg {
width: 28px;
height: 28px;
}
/* =========================================================
GALLERY CTA
========================================================= */
.mediaQuoteWrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.mediaQuoteBtn,
.mediaBrochureLink {
min-height: 40px;
padding: 0 14px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid var(--primary);
border-radius: 6px;
background: #fff;
color: var(--primary);
font-size: 14px;
font-weight: 600;
}
.mediaQuoteBtn:active,
.mediaBrochureLink:active {
background: var(--primary);
color: #fff;
}
.mediaQuoteBtn {
background: var(--text);
border-color: var(--text);
color: var(--soft);
}
/* =========================================================
THUMB SLIDER
========================================================= */
.mediaThumbWrapper {
--thumb-width: 60px;
--thumb-height: 54px;
--thumb-gap: 7px;
--visible-thumbs: 4;
position: relative;
width: calc((var(--thumb-width) * var(--visible-thumbs)) + (var(--thumb-gap) * (var(--visible-thumbs) - 1)));
max-width: calc(100% - 44px);
margin: 14px auto 0;
}
.mediaThumbGallery {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--thumb-gap);
overflow: hidden;
scrollbar-width: none;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}
.mediaThumbGallery::-webkit-scrollbar {
display: none;
}
.mediaThumb {
width: var(--thumb-width);
height: var(--thumb-height);
flex: 0 0 var(--thumb-width);
position: relative;
padding: 3px;
overflow: hidden;
border: 1px solid #d8d8d8;
border-radius: 6px;
background: #fff;
cursor: pointer;
scroll-snap-align: start;
}
.mediaThumb.active {
border-color: var(--primary);
}
.mediaThumb img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
border-radius: 3px;
}
.mediaVideoThumb::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 26px;
height: 20px;
border-radius: 5px;
background:
var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393'/%3E%3C/svg%3E") center / 14px no-repeat;
pointer-events: none;
}
.mediaThumbArrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
background: transparent;
color: #222;
cursor: pointer;
z-index: 10;
}
.mediaThumbArrow svg {
width: 18px;
height: 18px;
}
.mediaThumbPrev {
left: -25px;
}
.mediaThumbNext {
right: -25px;
}
.mediaThumbArrow:disabled {
opacity: .25;
cursor: default;
}
.mediaThumbArrow.is-hidden {
display: none !important;
}
.mediaThumbGallery.is-static {
justify-content: center;
}
/* =========================================================
PRODUCT CONTENT
========================================================= */
.categoryContent {
margin-top: 20px;
}
.subcategoryHeaderTitle,
.categoryName {
margin: 0 0 14px;
font-size: 21px;
line-height: 1.35;
font-weight: 700;
}
.quickSpecifications {
width: 100%;
max-width: 100%;
margin-bottom: 14px;
}
.categoryTable {
width: 100%;
margin: 0;
border-collapse: collapse;
border: 1px solid var(--border);
}
.categoryTable th,
.categoryTable td {
padding: 7px 8px;
border-bottom: 1px solid var(--border);
font-size: 14px;
line-height: 1.45;
text-align: left;
vertical-align: top;
}
.categoryTable th {
width: 115px;
color: #454545;
font-weight: 600;
background: var(--soft);
}
.categoryTable td {
color: #565656;
font-weight: 400;
word-break: break-word;
}
.categoryTable tr:last-child th,
.categoryTable tr:last-child td {
border-bottom: 0;
}
.minimumOrder {
margin-bottom: 12px;
font-size: 14px;
font-weight: 500;
}
.categoryDescription {
width: 100%;
max-width: 720px;
margin-top: 12px;
color: #444;
font-size: 14px;
line-height: 1.65;
}
.categoryDescription p {
margin: 0 0 8px;
}
.categoryDescription ul {
margin: 8px 0 12px;
padding: 0;
}
.categoryDescription li {
margin-bottom: 4px;
font-size: 14px;
font-weight: 400;
position: relative;
padding-left: 20px;
list-style: none;
}
.categoryDescription li:before {
content: url('data:image/svg+xml;charset=utf-8,');
text-align: center;
position: absolute;
left: 0;
top: 3px;
}
.btnWrapper {
margin-top: 15px;
display: flex;
align-items: center;
gap: 12px;
}
.interestBtn {
width: max-content;
min-height: 44px;
padding: 0 15px;
border: 0;
border-radius: 6px;
background: var(--primary);
color: #fff;
font-size: 14px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 5px;
justify-content: center;
}
.interestBtn:active {
background: var(--primary-dark);
}
.viewDetailsBtn {
width: max-content;
min-height: 44px;
padding: 0 15px;
border: 1px solid var(--primary);
border-radius: 6px;
background: transparent;
color: var(--primary);
font-size: 14px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 5px;
justify-content: center;
}
.viewDetailsBtn:hover,
.viewDetailsBtn:focus {
background: var(--primary);
color: #fff;
}
/* =========================================================
MODAL
========================================================= */
#quoteModal .modal-dialog {
margin: 12px auto;
}
#quoteModal .modal-content {
border: 0;
border-radius: 12px;
}
.quote-product-image {
width: 100%;
aspect-ratio: 1/1;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (min-width: 375px) {
.mediaBox {
height: 330px;
}
.mediaThumbWrapper {
--thumb-width: 66px;
--thumb-height: 58px;
--thumb-gap: 8px;
}
}
@media (min-width: 576px) {
.category2026Page {
padding: 24px 0 70px;
}
.categoryHeaderTitle {
font-size: 28px;
}
.categoryHeader p {
font-size: 14px;
}
.mediaBox {
height: 390px;
}
.mediaThumbWrapper {
--thumb-width: 72px;
--thumb-height: 62px;
--thumb-gap: 10px;
max-width: none;
}
.mediaThumbPrev {
left: -28px;
}
.mediaThumbNext {
right: -28px;
}
.subcategoryHeaderTitle,
.categoryName {
font-size: 24px;
}
.categoryTable th,
.categoryTable td {
padding: 8px 10px;
font-size: 14px;
}
.categoryTable th {
width: 145px;
}
.interestBtn,
.viewDetailsBtn {
width: auto;
min-width: 220px;
}
}
@media (min-width: 768px) {
.mediaBox {
height: 420px;
}
.mediaThumbWrapper {
--thumb-width: 82px;
--thumb-height: 70px;
--thumb-gap: 12px;
}
}
@media (min-width: 992px) {
.category2026Page {
padding: 28px 0 80px;
}
.categoryHeaderTitle {
font-size: 32px;
}
.categoryItem2026 {
padding: 30px 0;
}
.categoryMedia {
position: sticky;
top: 20px;
}
.mediaBox {
height: 430px;
}
.mediaThumbWrapper {
--thumb-width: 95px;
--thumb-height: 82px;
--thumb-gap: 15px;
}
.mediaThumbPrev {
left: -34px;
}
.mediaThumbNext {
right: -34px;
}
.categoryContent {
margin-top: 0;
padding-left: 20px;
}
.categoryName {
font-size: 26px;
}
.subcategoryHeaderTitle {
position: sticky;
z-index: 20;
top: 0;
margin: 0 0 14px;
background: #fff;
font-size: 24px;
}
.categoryTable th,
.categoryTable td {
font-size: 15px;
}
.categoryTable th {
width: 155px;
}
.categoryDescription {
font-size: 15px;
}
.minimumOrder {
font-size: 16px;
}
.mediaThumb:hover {
border-color: var(--primary);
}
.mediaQuoteBtn:hover,
.mediaBrochureLink:hover {
background: var(--primary);
color: #fff;
}
.mediaQuoteBtn:hover,
.mediaBrochureLink:hover {
background: var(--primary);
border-color: var(--primary-dark);
color: #fff;
}
.interestBtn:hover {
background: var(--primary-dark);
}
}
/* =========================================================
PRODUCT PREVIEW MODAL - MOBILE FIRST
========================================================= */
.product-preview-modal .modal-dialog {
margin: 0;
max-width: 100%;
}
.product-preview-modal .modal-content {
min-height: 100vh;
border: 0;
border-radius: 0;
background: #fff;
overflow: hidden;
}
.product-preview-modal .modal-body {
padding: 0;
}
.preview-modal-close {
position: absolute;
top: 10px;
right: 10px;
z-index: 50;
width: 34px;
height: 34px;
padding: 0;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 3px 12px rgba(0, 0, 0, .12);
}
/* =========================================================
LEFT GALLERY
========================================================= */
.popup-gallery {
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px;
background: #fafafa;
}
/* =========================================================
LARGE IMAGE
========================================================= */
.popup-main-media {
position: relative;
width: 100%;
height: 330px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border: 1px solid #e5e5e5;
border-radius: 10px;
background: #fff;
}
.popup-image-zoom {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
cursor: zoom-in;
}
.popup-main-image {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
transform-origin: center center;
transition: transform .25s ease;
}
.popup-image-zoom.is-zoomed {
cursor: zoom-out;
}
.popup-image-zoom.is-zoomed .popup-main-image {
transform: scale(2);
}
/* =========================================================
ZOOM BUTTON
========================================================= */
.popup-zoom-btn {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 5;
min-height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 0 10px;
border: 1px solid #ddd;
border-radius: 6px;
background: rgba(255, 255, 255, .95);
color: #333;
font-size: 12px;
font-weight: 600;
box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
/* =========================================================
THUMBNAILS - MOBILE HORIZONTAL
========================================================= */
.popup-thumbs-wrap {
width: 100%;
display: flex;
align-items: center;
gap: 6px;
}
.popup-thumbs {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 7px;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scrollbar-width: none;
}
.popup-thumbs::-webkit-scrollbar {
display: none;
}
.popup-thumb {
width: 60px;
height: 60px;
flex: 0 0 60px;
position: relative;
padding: 3px;
overflow: hidden;
border: 1px solid #ddd;
border-radius: 7px;
background: #fff;
cursor: pointer;
}
.popup-thumb.active {
border-color: var(--primary);
box-shadow: inset 0 0 0 1px var(--primary);
}
.popup-thumb img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
border-radius: 4px;
}
.popup-thumb.video::after {
content: "▶";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 27px;
height: 21px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
background: var(--primary);
color: #fff;
font-size: 10px;
pointer-events: none;
}
/* mobile ma arrows hide */
.popup-mediaThumbArrow {
display: none;
}
/* =========================================================
ENQUIRY FORM
========================================================= */
.popup-enquiry {
padding: 20px 15px 28px;
background: #fff;
}
.popup-enquiry-head {
padding-right: 30px;
margin-bottom: 10px;
line-height: normal;
}
.popup-small-title {
display: block;
margin-bottom: 5px;
color: var(--primary);
font-size: 11px;
line-height: 1.3;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
}
.popup-categoryName {
margin: 0 0 7px;
color: #222;
font-size: 20px;
line-height: 1.35;
font-weight: 700;
}
.popup-enquiry-head p {
margin: 0;
color: #777;
font-size: 12px;
line-height: 1.55;
}
/* =========================================================
FORM
========================================================= */
.popup-enquiry .form-group {
margin-bottom: 15px;
}
.popup-enquiry .form-label {
margin-bottom: 3px;
color: #333;
font-size: 13px;
font-weight: 600;
}
.popup-enquiry .form-control,
.popup-enquiry .form-select {
min-height: 42px;
border: 1px solid #ddd;
border-radius: 6px;
background-color: #fff;
color: #333;
font-size: 13px;
box-shadow: none;
}
.popup-enquiry .form-control:focus,
.popup-enquiry .form-select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(230, 0, 35, .07);
}
.popup-enquiry textarea.form-control {
min-height: 80px;
resize: vertical;
}
/* =========================================================
QUANTITY
========================================================= */
.quantity-field {
display: flex;
}
.quantity-field .form-control {
min-width: 0;
border-radius: 6px 0 0 6px;
}
.quantity-field .form-select {
width: 100px;
flex: 0 0 100px;
border-left: 0;
border-radius: 0 6px 6px 0;
}
/* =========================================================
SUBMIT
========================================================= */
.popup-submit-btn {
width: 100%;
min-height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 0 15px;
border: 0;
border-radius: 7px;
background: var(--primary);
color: #fff;
font-size: 14px;
font-weight: 700;
}
/* =========================================================
576+
========================================================= */
@media (min-width: 576px) {
.product-preview-modal .modal-dialog {
margin: 20px auto;
max-width: calc(100% - 30px);
}
.product-preview-modal .modal-content {
min-height: auto;
border-radius: 14px;
}
.popup-gallery {
padding: 18px;
}
.popup-main-media {
height: 420px;
}
.popup-thumb {
width: 68px;
height: 68px;
flex-basis: 68px;
}
.popup-enquiry {
padding: 25px 22px 30px;
}
.popup-categoryName {
font-size: 23px;
}
}
/* =========================================================
768+
========================================================= */
@media (min-width: 768px) {
.popup-main-media {
height: 500px;
}
.popup-gallery {
gap: 14px;
}
.popup-thumb {
width: 74px;
height: 74px;
flex-basis: 74px;
}
.popup-enquiry {
padding: 28px;
}
}
/* =========================================================
992+ DESKTOP
========================================================= */
@media (min-width: 992px) {
.product-preview-modal .modal-dialog {
max-width: 1140px;
margin: 25px auto;
}
.product-preview-modal .modal-content {
max-height: calc(100vh - 50px);
}
.product-preview-modal .modal-body {
overflow: hidden;
}
/* gallery left */
.popup-gallery {
height: 650px;
flex-direction: row;
gap: 14px;
padding: 22px;
}
/* thumbnails vertical */
.popup-thumbs-wrap {
width: 76px;
flex: 0 0 76px;
flex-direction: column;
gap: 7px;
}
.popup-thumbs {
width: 100%;
max-height: 555px;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
}
.popup-thumb {
width: 72px;
height: 72px;
flex: 0 0 72px;
}
/* arrows */
.popup-mediaThumbArrow {
width: 32px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
padding: 0;
border: 0;
background: transparent;
color: #333;
font-size: 18px;
cursor: pointer;
}
/* main image */
.popup-main-media {
height: 100%;
flex: 1;
min-width: 0;
}
/* enquiry */
.popup-enquiry {
height: 580px;
padding: 25px;
overflow-y: auto;
}
.popup-categoryName {
font-size: 20px;
}
}
/* =========================================================
1200+
========================================================= */
@media (min-width: 1200px) {
.product-preview-modal .modal-dialog {
max-width: 1140px;
}
.popup-gallery,
.popup-enquiry {
height: 575px;
}
}
.popup-video-wrap {
width: 100%;
height: 100%;
}
.popup-video-frame {
width: 100%;
height: 100%;
display: block;
border: 0;
}
.popup-video-wrap.mediaHidden,
.popup-image-zoom.mediaHidden,
.popup-zoom-btn.mediaHidden {
display: none !important;
}
.productListingPage {
padding: 16px 0 30px;
}
.productHeader {
margin-bottom: 18px;
display: flow-root;
width: 100%;
}
.productHeaderTitle {
margin: 0 0 8px;
font-size: 24px;
line-height: 1.3;
font-weight: 700;
}
.productHeader p {
margin: 0;
color: var(--text);
font-size: 14px;
line-height: 1.6;
}
.productHeader .productMedia {
float: right;
max-width: 420px;
margin: 0 0 15px 15px;
position: relative;
z-index: 9;
}
.productHeader ul {
margin: 12px 0 12px;
padding: 0;
}
.productHeader li {
margin-bottom: 4px;
font-size: 14px;
font-weight: 400;
position: relative;
padding-left: 20px;
list-style: none;
}
.productHeader li:before {
content: url('data:image/svg+xml;charset=utf-8,');
text-align: center;
position: absolute;
left: 0;
top: 3px;
}
/* =========================================================
PRODUCTS CHIPS
========================================================= */
.productTabWrapper {
display: flex;
flex-wrap: wrap;
gap: 8px;
overflow-x: auto;
padding-bottom: 4px;
scrollbar-width: none;
}
.productTabWrapper::-webkit-scrollbar {
display: none;
}
.productTabWrapper a {
flex: 0 0 auto;
padding: 8px 13px;
border: 1px solid var(--border);
border-radius: 50px;
background: #fff;
color: #444;
font-size: 12px;
font-weight: 600;
}
.productTabWrapper a.active,
.productTabWrapper a:hover {
border-color: var(--primary);
color: var(--primary);
background: #fff5f6;
}
/* =========================================================
PRODUCT ITEM
========================================================= */
.productItem2026 {
padding: 20px 0;
border-bottom: 1px solid #e9e9e9;
scroll-margin-top: 10px;
}
.productItem2026:last-child {
border-bottom: 0;
}
/* =========================================================
GALLERY - MOBILE FIRST
========================================================= */
.productMedia {
width: 100%;
}
.productMediaBox {
width: 100%;
height: 300px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 12px;
}
.productMediaLink {
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
cursor: zoom-in;
}
.productMediaLink.video-active {
cursor: pointer;
}
.mainProductImg {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
.memediaHidden {
display: none !important;
}
.mediaVideoPlay {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: var(--primary);
color: #fff;
box-shadow: 0 5px 18px rgba(0, 0, 0, .25);
pointer-events: none;
z-index: 5;
}
.mediaVideoPlay svg {
width: 28px;
height: 28px;
}
/* =========================================================
GALLERY CTA
========================================================= */
.mediaQuoteWrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.mediaQuoteBtn,
.mediaBrochureLink {
min-height: 40px;
padding: 0 14px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid var(--primary);
border-radius: 6px;
background: #fff;
color: var(--primary);
font-size: 14px;
font-weight: 600;
}
.mediaQuoteBtn:active,
.mediaBrochureLink:active {
background: var(--primary);
color: #fff;
}
/* =========================================================
THUMB SLIDER
========================================================= */
.mediaThumbWrapper {
--thumb-width: 60px;
--thumb-height: 54px;
--thumb-gap: 7px;
--visible-thumbs: 4;
position: relative;
width: calc((var(--thumb-width) * var(--visible-thumbs)) + (var(--thumb-gap) * (var(--visible-thumbs) - 1)));
max-width: calc(100% - 44px);
margin: 14px auto 0;
}
.mediaThumbGallery {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--thumb-gap);
overflow: hidden;
scrollbar-width: none;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}
.mediaThumbGallery::-webkit-scrollbar {
display: none;
}
.mediaThumb {
width: var(--thumb-width);
height: var(--thumb-height);
flex: 0 0 var(--thumb-width);
position: relative;
padding: 3px;
overflow: hidden;
border: 1px solid #d8d8d8;
border-radius: 6px;
background: #fff;
cursor: pointer;
scroll-snap-align: start;
}
.mediaThumb.active {
border-color: var(--primary);
}
.mediaThumb img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
border-radius: 3px;
}
.video-thumb::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 26px;
height: 20px;
border-radius: 5px;
background:
var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393'/%3E%3C/svg%3E") center / 14px no-repeat;
pointer-events: none;
}
.mediaThumbArrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
background: transparent;
color: #222;
cursor: pointer;
z-index: 10;
}
.mediaThumbArrow svg {
width: 18px;
height: 18px;
}
.mediaThumbPrev {
left: -25px;
}
.mediaThumbNext {
right: -25px;
}
.mediaThumbArrow:disabled {
opacity: .25;
cursor: default;
}
.mediaThumbArrow.is-hidden {
display: none !important;
}
.mediaThumbGallery.is-static {
justify-content: center;
}
/* =========================================================
PRODUCT CONTENT
========================================================= */
.productContent {
margin-top: 20px;
}
.productItemTitle,
.productName {
margin: 0 0 14px;
font-size: 21px;
line-height: 1.35;
font-weight: 700;
}
.quickSpecifications {
width: 100%;
max-width: 100%;
margin-bottom: 14px;
}
.productTable {
width: 100%;
margin: 0;
border-collapse: collapse;
border: 1px solid var(--border);
}
.productTable th,
.productTable td {
padding: 7px 8px;
border-bottom: 1px solid var(--border);
font-size: 14px;
line-height: 1.45;
text-align: left;
vertical-align: top;
}
.productTable th {
width: 115px;
color: #454545;
font-weight: 600;
background: var(--soft);
}
.productTable td {
color: #565656;
font-weight: 400;
word-break: break-word;
}
.productTable tr:last-child th,
.productTable tr:last-child td {
border-bottom: 0;
}
.companyProLink {
display: flex;
flex-direction: column;
gap: 0 15px;
}
.quickLinks {
margin-bottom: 15px;
}
.quickLinks a {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 4px;
background: #fff;
color: #454545;
font-size: 13px;
line-height: normal;
font-weight: 600;
white-space: nowrap;
transition: .2s ease;
}
.quickLinks a:hover,
.quickLinks a:focus {
border-color: var(--primary);
color: var(--primary);
}
.quickLinks a.active {
border-color: var(--primary);
background: var(--primary);
color: #fff;
}
#packaging-delivery,
#company-profile,
#company-infrastructure,
#product-faq {
scroll-margin-top: 75px;
}
.minimumOrder {
font-size: 16px;
font-weight: 500;
}
.productDescription {
width: 100%;
max-width: 720px;
margin-top: 12px;
color: #444;
font-size: 14px;
line-height: 1.65;
}
.productDescription p {
margin: 0 0 8px;
}
.productDescription ul {
margin: 8px 0 12px;
padding: 0;
}
.productDescription li {
margin-bottom: 4px;
font-size: 14px;
font-weight: 400;
position: relative;
padding-left: 20px;
list-style: none;
}
.productDescription li:before {
content: url('data:image/svg+xml;charset=utf-8,');
text-align: center;
position: absolute;
left: 0;
top: 3px;
}
.btnWrapper {
margin-top: 15px;
display: flex;
align-items: center;
gap: 12px;
}
.interestBtn {
width: max-content;
min-height: 44px;
padding: 0 15px;
border: 0;
border-radius: 6px;
background: var(--primary);
color: #fff;
font-size: 14px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 5px;
justify-content: center;
}
.interestBtn:active {
background: var(--primary-dark);
}
.viewDetailsBtn {
width: max-content;
min-height: 44px;
padding: 0 15px;
border: 1px solid var(--primary);
border-radius: 6px;
background: transparent;
color: var(--primary);
font-size: 14px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 5px;
justify-content: center;
}
.viewDetailsBtn:hover,
.viewDetailsBtn:focus {
background: var(--primary);
color: #fff;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (min-width: 375px) {
.productMediaBox {
height: 330px;
}
.mediaThumbWrapper {
--thumb-width: 66px;
--thumb-height: 58px;
--thumb-gap: 8px;
}
}
@media (min-width: 576px) {
.productListingPage {
padding: 24px 0 70px;
}
.productHeaderTitle {
font-size: 28px;
}
.productHeader p {
font-size: 14px;
}
.productMediaBox {
height: 390px;
}
.mediaThumbWrapper {
--thumb-width: 72px;
--thumb-height: 62px;
--thumb-gap: 10px;
max-width: none;
}
.mediaThumbPrev {
left: -28px;
}
.mediaThumbNext {
right: -28px;
}
.productItemTitle,
.productName {
font-size: 24px;
}
.productTable th,
.productTable td {
padding: 8px 10px;
font-size: 14px;
}
.productTable th {
width: 145px;
}
.interestBtn,
.viewDetailsBtn {
width: auto;
min-width: 220px;
}
}
@media (min-width: 768px) {
.productMediaBox {
height: 390px;
}
.mediaThumbWrapper {
--thumb-width: 82px;
--thumb-height: 70px;
--thumb-gap: 12px;
}
}
@media (min-width: 992px) {
.productListingPage {
padding: 28px 0 20px;
}
.productHeaderTitle {
font-size: 32px;
}
.productItem2026 {
position: relative;
--sticky-top: 0px;
--sticky-title-height: 30px;
padding: 30px 0;
}
.productItemTitle {
position: sticky;
top: var(--sticky-top);
z-index: 20;
margin: 0 0 14px;
background: #fff;
font-size: 24px;
}
.productMedia {
position: sticky;
top: calc(var(--sticky-top) + var(--sticky-title-height) + 14px);
align-self: flex-start;
}
.productMediaBox {
height: 420px;
}
.mediaThumbWrapper {
--thumb-width: 95px;
--thumb-height: 82px;
--thumb-gap: 15px;
}
.mediaThumbPrev {
left: -34px;
}
.mediaThumbNext {
right: -34px;
}
.productContent {
margin-top: 0;
padding-left: 20px;
}
.productTable th,
.productTable td {
font-size: 15px;
}
.productTable th {
width: 155px;
}
.productDescription {
font-size: 15px;
}
.minimumOrder {
font-size: 16px;
}
.companyProLink {
flex-direction: row;
align-items: center;
}
.quickLinks {
margin-left: auto;
}
.mediaThumb:hover {
border-color: var(--primary);
}
.mediaQuoteBtn:hover,
.mediaBrochureLink:hover {
background: var(--primary);
color: #fff;
}
.interestBtn:hover {
background: var(--primary-dark);
}
#packaging-delivery,
#company-profile,
#company-infrastructure,
#product-faq {
scroll-margin-top: 110px;
}
}
/* =========================================================
PRODUCT PREVIEW MODAL - MOBILE FIRST
========================================================= */
.product-preview-modal .modal-dialog {
margin: 0;
max-width: 100%;
}
.product-preview-modal .modal-content {
min-height: 100vh;
border: 0;
border-radius: 0;
background: #fff;
overflow: hidden;
}
.product-preview-modal .modal-body {
padding: 0;
}
.preview-modal-close {
position: absolute;
top: 10px;
right: 10px;
z-index: 50;
width: 34px;
height: 34px;
padding: 0;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 3px 12px rgba(0, 0, 0, .12);
}
/* =========================================================
LEFT GALLERY
========================================================= */
.popup-gallery {
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px;
background: #fafafa;
}
/* =========================================================
LARGE IMAGE
========================================================= */
.popup-main-media {
position: relative;
width: 100%;
height: 330px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border: 1px solid #e5e5e5;
border-radius: 10px;
background: #fff;
}
.popup-image-zoom {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
cursor: zoom-in;
}
.popup-main-image {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
transform-origin: center center;
transition: transform .25s ease;
}
.popup-image-zoom.is-zoomed {
cursor: zoom-out;
}
.popup-image-zoom.is-zoomed .popup-main-image {
transform: scale(2);
}
/* =========================================================
ZOOM BUTTON
========================================================= */
.popup-zoom-btn {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 5;
min-height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 0 10px;
border: 1px solid #ddd;
border-radius: 6px;
background: rgba(255, 255, 255, .95);
color: #333;
font-size: 12px;
font-weight: 600;
box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
/* =========================================================
THUMBNAILS - MOBILE HORIZONTAL
========================================================= */
.popup-thumbs-wrap {
width: 100%;
display: flex;
align-items: center;
gap: 6px;
}
.popup-thumbs {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 7px;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scrollbar-width: none;
}
.popup-thumbs::-webkit-scrollbar {
display: none;
}
.popup-thumb {
width: 60px;
height: 60px;
flex: 0 0 60px;
position: relative;
padding: 3px;
overflow: hidden;
border: 1px solid #ddd;
border-radius: 7px;
background: #fff;
cursor: pointer;
}
.popup-thumb.active {
border-color: var(--primary);
box-shadow: inset 0 0 0 1px var(--primary);
}
.popup-thumb img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
border-radius: 4px;
}
.popup-thumb.video::after {
content: "▶";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 27px;
height: 21px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
background: var(--primary);
color: #fff;
font-size: 10px;
pointer-events: none;
}
/* mobile ma arrows hide */
.popup-mediaThumbArrow {
display: none;
}
/* =========================================================
ENQUIRY FORM
========================================================= */
.popup-enquiry {
padding: 20px 15px 28px;
background: #fff;
}
.popup-enquiry-head {
padding-right: 30px;
margin-bottom: 10px;
line-height: normal;
}
.popup-small-title {
display: block;
margin-bottom: 5px;
color: var(--primary);
font-size: 11px;
line-height: 1.3;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
}
.popup-productName {
margin: 0 0 7px;
color: #222;
font-size: 20px;
line-height: 1.35;
font-weight: 700;
}
.popup-enquiry-head p {
margin: 0;
color: #777;
font-size: 13px;
line-height: 1.55;
}
/* =========================================================
FORM
========================================================= */
.popup-enquiry .form-group {
margin-bottom: 15px;
}
.popup-enquiry .form-label {
margin-bottom: 3px;
color: #333;
font-size: 13px;
font-weight: 600;
}
.popup-enquiry .form-control,
.popup-enquiry .form-select {
min-height: 42px;
border: 1px solid #ddd;
border-radius: 6px;
background-color: #fff;
color: #333;
font-size: 13px;
box-shadow: none;
}
.popup-enquiry .form-control:focus,
.popup-enquiry .form-select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(230, 0, 35, .07);
}
.popup-enquiry textarea.form-control {
min-height: 80px;
resize: vertical;
}
/* =========================================================
QUANTITY
========================================================= */
.quantity-field {
display: flex;
}
.quantity-field .form-control {
min-width: 0;
border-radius: 6px 0 0 6px;
}
.quantity-field .form-select {
width: 100px;
flex: 0 0 100px;
border-left: 0;
border-radius: 0 6px 6px 0;
}
/* =========================================================
SUBMIT
========================================================= */
.popup-submit-btn {
width: 100%;
min-height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 0 15px;
border: 0;
border-radius: 7px;
background: var(--primary);
color: #fff;
font-size: 14px;
font-weight: 700;
}
/* =========================================================
576+
========================================================= */
@media (min-width: 576px) {
.product-preview-modal .modal-dialog {
margin: 20px auto;
max-width: calc(100% - 30px);
}
.product-preview-modal .modal-content {
min-height: auto;
border-radius: 14px;
}
.popup-gallery {
padding: 18px;
}
.popup-main-media {
height: 420px;
}
.popup-thumb {
width: 68px;
height: 68px;
flex-basis: 68px;
}
.popup-enquiry {
padding: 25px 22px 30px;
}
.popup-productName {
font-size: 20px;
}
}
/* =========================================================
768+
========================================================= */
@media (min-width: 768px) {
.popup-main-media {
height: 500px;
}
.popup-gallery {
gap: 14px;
}
.popup-thumb {
width: 74px;
height: 74px;
flex-basis: 74px;
}
.popup-enquiry {
padding: 28px;
}
}
/* =========================================================
992+ DESKTOP
========================================================= */
@media (min-width: 992px) {
.product-preview-modal .modal-dialog {
max-width: 1140px;
margin: 25px auto;
}
.product-preview-modal .modal-content {
max-height: calc(100vh - 50px);
}
.product-preview-modal .modal-body {
overflow: hidden;
}
/* gallery left */
.popup-gallery {
height: 650px;
flex-direction: row;
gap: 14px;
padding: 22px;
}
/* thumbnails vertical */
.popup-thumbs-wrap {
width: 76px;
flex: 0 0 76px;
flex-direction: column;
gap: 7px;
}
.popup-thumbs {
width: 100%;
max-height: 555px;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
}
.popup-thumb {
width: 72px;
height: 72px;
flex: 0 0 72px;
}
/* arrows */
.popup-mediaThumbArrow {
width: 32px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
padding: 0;
border: 0;
background: transparent;
color: #333;
font-size: 18px;
cursor: pointer;
}
/* main image */
.popup-main-media {
height: 100%;
flex: 1;
min-width: 0;
}
/* enquiry */
.popup-enquiry {
height: 580px;
padding: 25px;
overflow-y: auto;
}
.popup-productName {
font-size: 20px;
}
}
/* =========================================================
1200+
========================================================= */
@media (min-width: 1200px) {
.product-preview-modal .modal-dialog {
max-width: 1140px;
}
.popup-gallery,
.popup-enquiry {
height: 575px;
}
}
.popup-video-wrap {
width: 100%;
height: 100%;
}
.popup-video-frame {
width: 100%;
height: 100%;
display: block;
border: 0;
}
.popup-video-wrap.memediaHidden,
.popup-image-zoom.memediaHidden,
.popup-zoom-btn.memediaHidden {
display: none !important;
}
/* =========================================================
PACKAGING & DELIVERY - MOBILE FIRST
========================================================= */
.packagingDeliverySection {
padding: 24px 0 45px;
border-top: 1px solid var(--border);
background: #eee;
}
.packagingDeliveryHeader {
margin-bottom: 15px;
}
.packagingDeliveryTitle {
margin: 0 0 6px;
color: var(--text);
font-size: 22px;
line-height: 1.3;
font-weight: 700;
}
.packagingDeliveryHeader p {
margin: 0;
max-width: 800px;
color: var(--muted);
font-size: 13px;
line-height: 1.6;
}
/* =========================================================
TABLE
========================================================= */
.packagingDeliveryTable {
width: 100%;
margin: 0;
border: 1px solid var(--border);
border-collapse: collapse;
background: #fff;
}
.packagingDeliveryTable th,
.packagingDeliveryTable td {
padding: 9px 10px;
border-bottom: 1px solid var(--border);
font-size: 13px;
line-height: 1.5;
text-align: left;
vertical-align: top;
}
.packagingDeliveryTable th {
width: 45%;
background: var(--soft);
color: #444;
font-weight: 600;
}
.packagingDeliveryTable td {
color: #565656;
font-weight: 400;
}
.packagingDeliveryTable tr:last-child th,
.packagingDeliveryTable tr:last-child td {
border-bottom: 0;
}
/* =========================================================
PHOTO GALLERY
========================================================= */
.packagingPhotoGallery {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-top: 15px;
}
.packagingPhotoItem {
position: relative;
height: 200px;
display: block;
overflow: hidden;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--soft);
}
.packagingPhotoItem img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform .35s ease;
}
.packagingPhotoItem::after {
content: "";
position: absolute;
inset: 40% 0 0;
z-index: 1;
background: linear-gradient(to bottom,
transparent,
rgba(0, 0, 0, .72));
pointer-events: none;
}
.packagingPhotoItem span {
position: absolute;
left: 12px;
right: 12px;
bottom: 10px;
z-index: 2;
color: #fff;
font-size: 13px;
line-height: 1.4;
font-weight: 600;
}
/* =========================================================
QUICK INFO
========================================================= */
.packagingQuickInfo {
display: grid;
grid-template-columns: 1fr;
margin-top: 15px;
overflow: hidden;
border: 1px solid var(--border);
border-radius: 10px;
background: #fff;
}
.packagingQuickItem {
position: relative;
padding: 14px 16px 14px 24px;
}
.packagingQuickItem:not(:last-child) {
border-bottom: 1px solid var(--border);
}
.packagingQuickItem::before {
content: "";
position: absolute;
left: 12px;
top: 14px;
bottom: 14px;
width: 3px;
border-radius: 3px;
background: var(--primary);
}
.packagingQuickItem span {
display: block;
margin-bottom: 4px;
color: var(--muted);
font-size: 12px;
line-height: 1.4;
}
.packagingQuickItem strong {
display: block;
color: var(--text);
font-size: 15px;
line-height: 1.4;
font-weight: 700;
}
/* =========================================================
576+
========================================================= */
@media (min-width: 576px) {
.packagingDeliverySection {
padding: 28px 0 55px;
}
.packagingDeliveryTitle {
font-size: 24px;
}
.packagingDeliveryHeader p {
font-size: 14px;
}
.packagingDeliveryTable th,
.packagingDeliveryTable td {
padding: 10px 12px;
font-size: 14px;
}
.packagingDeliveryTable th {
width: 220px;
}
.packagingPhotoGallery {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-top: 18px;
}
.packagingPhotoItem {
height: 190px;
}
.packagingPhotoItem:last-child {
grid-column: 1 / -1;
}
.packagingQuickItem strong {
font-size: 16px;
}
}
/* =========================================================
768+
========================================================= */
@media (min-width: 768px) {
.packagingDeliverySection {
padding: 32px 0 60px;
}
.packagingPhotoItem {
height: 210px;
}
.packagingQuickInfo {
grid-template-columns: repeat(3, 1fr);
margin-top: 18px;
}
.packagingQuickItem:not(:last-child) {
border-bottom: 0;
border-right: 1px solid var(--border);
}
}
/* =========================================================
992+
========================================================= */
@media (min-width: 992px) {
.packagingDeliverySection {
padding: 35px 0 70px;
}
.packagingDeliveryTitle {
font-size: 26px;
}
.packagingPhotoGallery {
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 20px;
}
.packagingPhotoItem,
.packagingPhotoItem:last-child {
height: 220px;
grid-column: auto;
}
.packagingPhotoItem:hover img {
transform: scale(1.04);
}
.packagingQuickInfo {
margin-top: 20px;
}
.packagingQuickItem {
padding: 17px 20px 17px 24px;
}
.packagingQuickItem::before {
top: 17px;
bottom: 17px;
}
}
/* =========================================================
COMPANY PROFILE - MOBILE FIRST
========================================================= */
.companyProfileSection {
padding: 25px 0 50px;
border-top: 1px solid var(--border);
background: #fff;
}
.companyProfileHeader {
margin-bottom: 18px;
}
.companyProfileTitle {
margin: 0 0 6px;
color: var(--text);
font-size: 22px;
line-height: 1.3;
font-weight: 700;
}
.companyProfileHeader p {
max-width: 820px;
margin: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.6;
}
/* =========================================================
COMPANY IMAGE
========================================================= */
.companyProfileMedia {
position: relative;
}
.companyProfileImage {
height: 280px;
display: block;
overflow: hidden;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--soft);
}
.companyProfileImage img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform .35s ease;
}
.companyProfileImageInfo {
position: relative;
z-index: 2;
margin: -28px 14px 0;
padding: 13px 15px;
border: 1px solid var(--border);
border-radius: 8px;
background: #fff;
box-shadow: 0 6px 20px rgba(0, 0, 0, .07);
}
.companyProfileImageInfo strong {
display: block;
margin-bottom: 2px;
color: var(--text);
font-size: 15px;
line-height: 1.4;
font-weight: 700;
}
.companyProfileImageInfo span {
display: block;
color: var(--muted);
font-size: 12px;
line-height: 1.4;
}
/* =========================================================
FEATURES
========================================================= */
.companyProfileFeatures {
margin: 18px 0 0;
padding: 0;
}
.companyProfileFeatures li {
position: relative;
margin-bottom: 8px;
padding-left: 24px;
color: #444;
font-size: 15px;
line-height: 1.5;
list-style: none;
}
.companyProfileFeatures li::before {
content: "✓";
position: absolute;
left: 0;
top: 1px;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #fff5f6;
color: var(--primary);
font-size: 10px;
font-weight: 700;
}
/* =========================================================
COMPANY INFO CARDS
========================================================= */
.companyInfoGrid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.companyInfoCard {
min-width: 0;
display: flex;
align-items: center;
gap: 11px;
padding: 12px 13px;
border: 1px solid var(--border);
border-radius: 9px;
background: #fff;
transition: border-color .2s ease, box-shadow .2s ease;
}
/* ICON */
.companyInfoIcon {
width: 40px;
height: 40px;
flex: 0 0 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: #fff5f6;
color: var(--primary);
transition: background .2s ease, color .2s ease;
}
.companyInfoIcon svg {
width: 21px;
height: 21px;
display: block;
}
/* CONTENT */
.companyInfoContent {
flex: 1;
min-width: 0;
}
.companyInfoContent span {
display: block;
margin-bottom: 3px;
color: var(--muted);
font-size: 14px;
line-height: 1.3;
}
.companyInfoContent strong {
display: block;
color: var(--text);
font-size: 15px;
line-height: 1.4;
font-weight: 700;
word-break: break-word;
}
/* GST */
.companyInfoContent .companyVerified {
color: #198754;
}
/* =========================================================
DESCRIPTION
========================================================= */
.companyProfileDescription {
margin-top: 18px;
}
.companyProfileDescription h3 {
margin: 0 0 7px;
color: var(--text);
font-size: 18px;
line-height: 1.4;
font-weight: 700;
}
.companyProfileDescription p {
margin: 0 0 10px;
color: #555;
font-size: 15px;
line-height: 1.7;
}
.companyProfileDescription p:last-child {
margin-bottom: 0;
}
/* =========================================================
BUTTON
========================================================= */
.companyProfileAction {
margin-top: 17px;
}
.companyProfileBtn {
min-height: 43px;
padding: 0 15px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
border: 1px solid var(--primary);
border-radius: 6px;
background: var(--primary);
color: #fff;
font-size: 14px;
line-height: 1;
font-weight: 600;
transition: .2s ease;
}
.companyProfileBtn svg {
width: 15px;
height: 15px;
transition: transform .2s ease;
}
.companyProfileBtn:hover {
border-color: var(--primary-dark);
background: var(--primary-dark);
color: #fff;
}
.companyProfileBtn:hover svg {
transform: translateX(3px);
}
/* =========================================================
576+
========================================================= */
@media (min-width: 576px) {
.companyProfileSection {
padding: 30px 0 55px;
}
.companyProfileTitle {
font-size: 24px;
}
.companyProfileHeader p {
font-size: 14px;
}
.companyProfileImage {
height: 340px;
}
.companyInfoGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.companyInfoCard {
min-height: 74px;
padding: 13px;
}
.companyInfoIcon {
width: 42px;
height: 42px;
flex-basis: 42px;
}
.companyInfoIcon svg {
width: 22px;
height: 22px;
}
.companyInfoContent strong {
font-size: 16px;
}
.companyProfileDescription h3 {
font-size: 19px;
}
}
/* =========================================================
768+
========================================================= */
@media (min-width: 768px) {
.companyProfileSection {
padding: 35px 0 60px;
}
.companyProfileImage {
height: 390px;
}
}
/* =========================================================
DESKTOP 992+
========================================================= */
@media (min-width: 992px) {
.companyProfileSection {
padding: 40px 0 70px;
}
.companyProfileHeader {
margin-bottom: 20px;
}
.companyProfileTitle {
font-size: 26px;
}
.companyProfileImage {
height: 380px;
}
.companyProfileContent {
padding-left: 10px;
}
.companyProfileImage:hover img {
transform: scale(1.035);
}
.companyInfoCard {
min-height: 76px;
}
.companyInfoCard:hover {
border-color: #ddd;
box-shadow: 0 5px 16px rgba(0, 0, 0, .04);
}
.companyInfoCard:hover .companyInfoIcon {
background: var(--primary);
color: #fff;
}
.companyProfileDescription {
margin-top: 20px;
}
.companyProfileDescription h3 {
font-size: 20px;
}
}
/* =========================================================
COMPANY INFRASTRUCTURE
========================================================= */
.infraShowcaseHeader {
margin-bottom: 20px;
}
.infraShowcaseTitle {
margin: 0;
color: var(--text);
font-size: 22px;
line-height: 1.3;
font-weight: 700;
}
.infraShowcaseHeader p {
max-width: 760px;
margin: 8px 0 0;
color: var(--muted);
font-size: 13px;
line-height: 1.65;
}
/* =========================================================
4 IMAGE GRID
========================================================= */
.infraGalleryGrid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.infraGalleryItem {
position: relative;
height: 250px;
display: block;
overflow: hidden;
border-radius: 12px;
background: #e9ecef;
}
.infraGalleryItem img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform .4s ease;
}
.infraGalleryItem::after {
content: "";
position: absolute;
inset: 45% 0 0;
background: linear-gradient(
180deg,
transparent 0%,
rgba(0, 0, 0, .18) 25%,
rgba(0, 0, 0, .82) 100%
);
}
.infraGalleryInfo {
position: absolute;
left: 16px;
right: 16px;
bottom: 15px;
z-index: 2;
display: flex;
align-items: center;
gap: 10px;
}
.infraGalleryInfo span {
width: 30px;
height: 30px;
flex: 0 0 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--primary);
color: #fff;
font-size: 11px;
line-height: 1;
font-weight: 700;
}
.infraGalleryInfo strong {
color: #fff;
font-size: 14px;
line-height: 1.4;
font-weight: 600;
}
/* =========================================================
576+
========================================================= */
@media (min-width: 576px) {
.infraShowcaseTitle {
font-size: 24px;
}
.infraShowcaseHeader p {
font-size: 14px;
}
.infraGalleryGrid {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.infraGalleryItem {
height: 260px;
}
}
/* =========================================================
768+
========================================================= */
@media (min-width: 768px) {
.infraGalleryItem {
height: 290px;
}
}
/* =========================================================
992+
========================================================= */
@media (min-width: 992px) {
.infraShowcaseHeader {
display: flex;
align-items: end;
justify-content: space-between;
gap: 40px;
margin-bottom: 24px;
}
.infraShowcaseHeader p {
width: 48%;
margin: 0;
}
.infraShowcaseTitle {
font-size: 24px;
}
.infraGalleryGrid {
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.infraGalleryItem {
height: 300px;
}
.infraGalleryItem:hover img {
transform: scale(1.05);
}
}
/* =========================================================
PRODUCT FAQ - MOBILE FIRST
========================================================= */
.productFaqSection {
padding: 30px 0 55px;
border-top: 1px solid var(--border);
background: #fff;
}
/* =========================================================
LEFT INTRO
========================================================= */
.faqIntro {
position: relative;
}
.faqEyebrow {
display: block;
margin-bottom: 6px;
color: var(--primary);
font-size: 11px;
line-height: 1.3;
font-weight: 700;
letter-spacing: .7px;
text-transform: uppercase;
}
.faqTitle {
margin: 0 0 10px;
color: var(--text);
font-size: 22px;
line-height: 1.3;
font-weight: 700;
}
.faqIntro>p {
margin: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.65;
}
/* HELP CARD */
.faqHelpCard {
display: flex;
align-items: center;
gap: 11px;
margin-top: 18px;
padding: 13px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--soft);
}
.faqHelpIcon {
width: 40px;
height: 40px;
flex: 0 0 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9px;
background: #fff;
color: var(--primary);
}
.faqHelpCard span {
display: block;
margin-bottom: 2px;
color: var(--muted);
font-size: 13px;
}
.faqHelpCard strong {
display: block;
color: var(--text);
font-size: 14px;
line-height: 1.4;
}
/* CTA */
.faqEnquiryBtn {
width: 100%;
min-height: 44px;
margin-top: 12px;
padding: 0 15px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
border: 0;
border-radius: 7px;
background: var(--primary);
color: #fff;
font-size: 13px;
font-weight: 600;
}
.faqEnquiryBtn svg {
width: 15px;
height: 15px;
}
/* =========================================================
ACCORDION
========================================================= */
.productFaqAccordion {
display: flex;
flex-direction: column;
gap: 9px;
}
.productFaqAccordion .accordion-item {
overflow: hidden;
border: 1px solid var(--border);
border-radius: 10px;
background: #fff;
}
.productFaqAccordion .accordion-button {
min-height: 60px;
padding: 12px 42px 12px 12px;
gap: 10px;
background: #fff;
color: var(--text);
font-size: 14px;
line-height: 1.45;
font-weight: 600;
box-shadow: none;
}
.productFaqAccordion .accordion-button:not(.collapsed) {
background: #fff7f8;
color: var(--text);
box-shadow: none;
}
.productFaqAccordion .accordion-button:focus {
border: 0;
box-shadow: none;
}
/* NUMBER */
.faqNumber {
width: 30px;
height: 30px;
flex: 0 0 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 7px;
background: var(--soft);
color: var(--muted);
font-size: 10px;
font-weight: 700;
}
.productFaqAccordion .accordion-button:not(.collapsed) .faqNumber {
background: var(--primary);
color: #fff;
}
/* BOOTSTRAP ARROW */
.productFaqAccordion .accordion-button::after {
position: absolute;
right: 14px;
width: 15px;
height: 15px;
background-size: 15px;
}
/* BODY */
.productFaqAccordion .accordion-body {
padding: 0 14px 15px 52px;
color: #555;
font-size: 13px;
line-height: 1.65;
}
/* =========================================================
576+
========================================================= */
@media (min-width: 576px) {
.productFaqSection {
padding: 35px 0 60px;
}
.faqTitle {
font-size: 24px;
}
.faqIntro>p {
font-size: 14px;
}
.productFaqAccordion .accordion-button {
min-height: 64px;
padding: 14px 48px 14px 14px;
font-size: 15px;
}
.productFaqAccordion .accordion-body {
padding: 0 16px 17px 56px;
font-size: 14px;
}
.faqNumber {
width: 32px;
height: 32px;
flex-basis: 32px;
}
}
/* =========================================================
992+ DESKTOP
========================================================= */
@media (min-width: 992px) {
.productFaqSection {
padding: 45px 0 75px;
}
.faqIntro {
position: sticky;
top: 25px;
padding-right: 15px;
}
.faqTitle {
font-size: 28px;
}
.faqHelpCard {
margin-top: 22px;
}
.productFaqAccordion {
gap: 10px;
}
.productFaqAccordion .accordion-item {
transition: border-color .2s ease, box-shadow .2s ease;
}
.productFaqAccordion .accordion-item:hover {
border-color: #ddd;
box-shadow: 0 5px 18px rgba(0, 0, 0, .035);
}
.faqEnquiryBtn {
width: auto;
padding: 0 18px;
}
.faqEnquiryBtn:hover {
background: var(--primary-dark);
}
}