html { scroll-behavior: smooth; }
/* Page load progress bar */
#ie-progress-bar {
position: fixed; top: 0; left: 0; width: 0; height: 3px;
background: linear-gradient(90deg, #fc733a, #335882);
z-index: 999999; transition: width 0.3s ease;
}
#ie-progress-bar.done { opacity: 0; transition: opacity 0.4s ease 0.2s; }
/* Hide old loader */
#loading-area, .loader1 { display: none !important; }
/* Hide top bar on mobile */
@media (max-width: 991px) {
.top-bar { display: none !important; }
}
/* ═══════════════════════════════════════════════════
Font System: Outfit (headings) + DM Sans (body)
Overrides ALL inline styles including CKEditor
═══════════════════════════════════════════════════ */
/* NUCLEAR OVERRIDE: Kill any inline font-family from CKEditor */
[style*="font-family"]:not([class*="fa"]):not(i),
[style*="font-family"] *:not([class*="fa"]):not(i),
[style*="Font-family"]:not([class*="fa"]):not(i),
[style*="FONT-FAMILY"]:not([class*="fa"]):not(i) {
font-family: "DM Sans", sans-serif !important;
}
/* Base body font - excludes all icon elements */
body {
font-family: "DM Sans", sans-serif !important;
}
/* Headings - Outfit */
h1, h2, h3, h4, h5, h6,
h1 *, h2 *, h3 *, h4 *, h5 *, h6 *,
h1 span, h2 span, h3 span, h4 span,
h1[style], h2[style], h3[style],
.dlab-tilte,
.testimonial-name,
.section-head h2,
.section-head h2 span,
.page-header,
.nav-link,
.navbar-nav > li > a,
.site-button,
.site-button span,
.btn,
.btn span,
.stat-card h3,
.counter,
.modal-title,
.panel-title,
.marquee__group span {
font-family: "Outfit", sans-serif !important;
}
/* Body text - DM Sans (excludes icon elements) */
body, p, a:not([class*="fa"]), li, td, th,
span:not([class*="fa"]):not([class*="ti-"]):not([class*="revicon"]),
div, label, input, textarea, select,
button:not([class*="fa"]):not(.scroltop),
.form-control,
.testimonial-text p,
.testimonial-text p span,
.dlab-post-text p,
.dlab-post-text p span,
.dlab-post-text span,
.footer-bottom,
.footer-bottom *:not([class*="fa"]):not(i):not([class*="ti-"]),
footer p, footer li, footer a, footer span,
.widget_services li a,
.service-text p,
.service-text p span,
.service-text span,
.sub-sec p,
.sub-sec p span,
blockquote, blockquote *:not([class*="fa"]):not(i) {
font-family: "DM Sans", sans-serif !important;
}
/* CKEditor content areas - force DM Sans on everything inside */
.service-text *:not([class*="fa"]):not(i):not([class*="ti-"]),
.dlab-post-text *:not([class*="fa"]):not(i):not([class*="ti-"]),
.dlab-post-info *,
.about-home-section *:not(h1):not(h2):not(h3),
.page-content p[style]:not([class*="fa"]),
.page-content span[style]:not([class*="fa"]),
.page-content div[style]:not([class*="fa"]) {
font-family: "DM Sans", sans-serif !important;
}
/* Keep headings Outfit even inside CKEditor content */
.service-text h1, .service-text h2, .service-text h3,
.service-text h4, .service-text h5, .service-text h6,
.dlab-post-text h1, .dlab-post-text h2, .dlab-post-text h3 {
font-family: "Outfit", sans-serif !important;
}
/* Preserve ALL icon fonts - explicit family, never inherit */
.fa, .fas, .far, .fal, .fad,
i.fa, i.fas, i.far, i.fal, i.fad,
span.fa, span.fas, span.far,
a.fa, button.fa,
[class*="fa-"]:not(.fab),
i[class*="fa-"]:not(.fab),
span[class*="fa-"]:not(.fab),
.fa::before, .fas::before, .far::before, .fal::before, .fad::before,
.fa::after {
font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
}
/* FA Brands - separate declaration */
.fab, i.fab, span.fab,
.fab::before, .fab::after {
font-family: "Font Awesome 5 Brands" !important;
font-weight: 400 !important;
}
i[class*="ti-"],
span[class*="ti-"],
[class*="ti-"]::before {
font-family: "themify" !important;
}
[class*="revicon"],
[class*="revicon"]::before {
font-family: "revicons" !important;
}
/* Fix ALL pseudo-element icons (::before / ::after) site-wide */
.widget_services ul li:before,
.widget_services ul li::before,
.breadcrumb-row ul li:after,
.breadcrumb-row ul li::after,
.list-inline li::after,
.quote-left::before,
.quote-right::after,
.acod-head a::after,
.accordion label::after,
[class*="quote-"]::before,
[class*="quote-"]::after {
font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
font-weight: 900 !important;
}
/* Social media icons in footer/header */
.dlab-social-icon li a i,
.social-bx li a i,
footer i[class*="fa-"],
.top-bar i[class*="fa-"] {
font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
}
/* Back to top button (uses .fa on button element) */
.scroltop,
.scroltop::before {
font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
}
/* WhatsApp floating button icon */
.call_me i,
.call_me i::before {
font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
}
/* Navigation */
.navbar-nav > li > a {
font-weight: 600 !important;
letter-spacing: 0.02em;
}
/* Section headings */
.section-head h2,
h2.text-uppercase {
font-weight: 700 !important;
letter-spacing: -0.01em;
}
/* ═══════════════════════════════════════════════════
Button System: Consistent branded buttons
═══════════════════════════════════════════════════ */
/* Solid buttons (.site-button) - primary brand blue */
.site-button,
a.site-button,
button.site-button {
font-family: "Outfit", sans-serif !important;
background: #335882 !important;
color: #fff !important;
border: none !important;
border-radius: 8px !important;
padding: 12px 28px !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0.02em;
display: inline-block;
text-decoration: none !important;
transition: all 0.25s ease !important;
cursor: pointer;
line-height: 1.5 !important;
}
.site-button:hover,
a.site-button:hover,
button.site-button:hover {
background: #1d3a5c !important;
color: #fff !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(51,88,130,0.3);
}
.site-button span {
color: #fff !important;
font-family: "Outfit", sans-serif !important;
}
/* Text link buttons (.site-button-link) - arrow style */
.site-button-link,
a.site-button-link {
font-family: "Outfit", sans-serif !important;
color: #335882 !important;
font-size: 14px !important;
font-weight: 600 !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
transition: all 0.2s ease !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
}
.site-button-link:hover,
a.site-button-link:hover {
color: #fc733a !important;
gap: 10px !important;
}
.site-button-link i,
a.site-button-link i {
font-size: 12px;
transition: transform 0.2s ease;
}
.site-button-link:hover i,
a.site-button-link:hover i {
transform: translateX(3px);
}
/* Homepage about section "Read More" link */
.about-home-section a[href*="about-us"] {
font-family: "Outfit", sans-serif !important;
color: #335882 !important;
font-size: 14px !important;
font-weight: 600 !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
transition: all 0.2s ease !important;
}
.about-home-section a[href*="about-us"]:hover {
color: #fc733a !important;
}
/* Solutions cards button (homepage orange pill) */
a.site-button-link[style*="background"] {
font-family: "Outfit", sans-serif !important;
border-radius: 8px !important;
font-weight: 600 !important;
transition: all 0.25s ease !important;
}
a.site-button-link[style*="background"]:hover {
opacity: 0.9;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(252,115,58,0.3);
}
/* Enquiry form submit buttons (dark gradient forms) */
.form-inner button[type="submit"],
.form-inner button[name="submit"] {
font-family: "Outfit", sans-serif !important;
border-radius: 8px !important;
font-weight: 600 !important;
letter-spacing: 0.02em;
transition: all 0.25s ease !important;
}
.form-inner button[type="submit"]:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
/* Footer submit button */
footer .site-button,
footer button.site-button {
width: 100% !important;
background: #fc733a !important;
border-radius: 8px !important;
}
footer .site-button:hover,
footer button.site-button:hover {
background: #e86530 !important;
}
/* Blog share buttons */
a[style*="background:#0077B5"],
a[style*="background:#25D366"] {
font-family: "Outfit", sans-serif !important;
border-radius: 6px !important;
font-weight: 500 !important;
transition: all 0.2s ease !important;
}
a[style*="background:#0077B5"]:hover,
a[style*="background:#25D366"]:hover {
opacity: 0.9;
transform: translateY(-1px);
}
/* Testimonial "Read More" */
.readmore-btn {
font-family: "Outfit", sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #335882 !important;
}
.readmore-btn:hover {
color: #fc733a !important;
}
/* ═══════════════════════════════════════════════════
Sidebar Menu: Modern accordion for machines/solutions
═══════════════════════════════════════════════════ */
/* Sidebar wrapper */
.border.p-3 {
border: none !important;
padding: 0 !important;
}
/* Accordion container */
.widget_services.style-2 .accordion {
font-family: "Outfit", sans-serif !important;
max-width: 100% !important;
background: #f8f9fb;
border-radius: 10px;
overflow: hidden;
border: 1px solid #e9ecf0;
}
/* Category headers (labels) */
.accordion label {
font-family: "Outfit", sans-serif !important;
font-size: 13.5px !important;
font-weight: 600 !important;
text-transform: none !important;
padding: 14px 18px !important;
padding-right: 42px !important;
margin: 0 !important;
border-bottom: 1px solid #e9ecf0 !important;
color: #1a1a1a !important;
background: #fff !important;
display: flex !important;
align-items: center !important;
transition: all 0.2s ease !important;
position: relative;
letter-spacing: 0;
}
.accordion label:hover {
color: #335882 !important;
background: #f0f4f8 !important;
}
.accordion label a {
font-family: "Outfit", sans-serif !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-weight: inherit !important;
text-transform: none !important;
display: block;
width: 100%;
}
/* Active/checked category header */
.accordion input:checked ~ label {
color: #335882 !important;
background: #eef3f9 !important;
border-left: 3px solid #335882 !important;
padding-left: 15px !important;
}
/* Plus/minus icon */
.accordion label::after {
font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
content: "\f105" !important;
font-weight: 900 !important;
font-size: 14px !important;
color: #999 !important;
position: absolute !important;
right: 16px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: auto !important;
height: auto !important;
line-height: 1 !important;
transition: transform 0.3s ease !important;
}
.accordion input:checked ~ label::after {
transform: translateY(-50%) rotate(90deg) !important;
color: #335882 !important;
}
/* Subcategory links container */
.accordion-tab-content {
background: #fff !important;
padding: 0 !important;
border-bottom: 1px solid #e9ecf0;
}
.accordion input:checked ~ .accordion-tab-content {
margin-bottom: 0 !important;
}
/* Subcategory links */
.accordion-tab-content a {
font-family: "DM Sans", sans-serif !important;
font-size: 13px !important;
color: #555 !important;
padding: 10px 18px 10px 28px !important;
margin: 0 !important;
border-bottom: 1px solid #f2f3f5 !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
text-transform: none !important;
transition: all 0.2s ease !important;
text-decoration: none !important;
}
.accordion-tab-content a::before {
content: "" !important;
width: 5px;
height: 5px;
border-radius: 50%;
background: #ccc;
flex-shrink: 0;
transition: all 0.2s ease;
display: block !important;
}
.accordion-tab-content a:hover {
color: #335882 !important;
background: #f8f9fb !important;
padding-left: 32px !important;
}
.accordion-tab-content a:hover::before {
background: #335882;
}
/* Active subcategory link */
.accordion-tab-content a[style*="color: #fc733a"],
.accordion-tab-content a[style*="color:#fc733a"],
.accordion-tab-content a.active {
color: #fc733a !important;
font-weight: 600 !important;
background: #fff8f4 !important;
}
.accordion-tab-content a[style*="color: #fc733a"]::before,
.accordion-tab-content a[style*="color:#fc733a"]::before,
.accordion-tab-content a.active::before {
background: #fc733a !important;
width: 6px;
height: 6px;
}
/* Last items cleanup */
.accordion-tab:last-child label {
border-bottom: none !important;
}
.accordion-tab-content a:last-child {
border-bottom: none !important;
}
/* ═══════════════════════════════════════════════════
Header Dropdowns: Modern clean navigation
═══════════════════════════════════════════════════ */
.top-bar .social-bx li a i {
margin-right: 5px;
}
to { opacity: 1; transform: translateY(0); }
}
/* ═══════════════════════════════════════════════════
HEADER - Complete Rebuild (Desktop + Tablet + Mobile)
═══════════════════════════════════════════════════ */
/* ─── Top Bar ─── */
.top-bar.no-skew {
background: #1d3a5c !important;
padding: 6px 0 !important;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.top-bar .row { align-items: center; }
.top-bar .social-bx { margin: 0; padding: 0; }
.top-bar .social-bx li { display: inline-block; }
.top-bar .social-bx li a {
font-family: "DM Sans", sans-serif !important;
font-size: 12px !important;
color: rgba(255,255,255,0.7) !important;
transition: color 0.2s;
text-decoration: none;
}
.top-bar .social-bx li a:hover { color: #fff !important; }
.top-bar .fa {
background: none !important; border: none !important;
width: auto !important; height: auto !important;
padding: 0 !important; margin-right: 5px !important;
font-family: "Font Awesome 5 Pro","Font Awesome 5 Free","FontAwesome" !important;
font-size: 11px !important; opacity: 0.7;
}
/* ─── Main Bar ─── */
.main-bar {
background: #fff !important;
border-bottom: 1px solid #eef0f2 !important;
box-shadow: none !important;
}
.is-fixed .main-bar {
box-shadow: 0 2px 24px rgba(0,0,0,0.06) !important;
border-bottom-color: transparent !important;
}
/* ─── Logo ─── */
.logo-header {
height: 84px !important;
width: 230px !important;
display: flex !important;
align-items: center !important;
padding: 0 !important;
margin: 0 !important;
float: left !important;
}
.logo-header > a {
display: flex !important;
align-items: center !important;
}
.logo-header img {
max-height: 70px !important;
width: auto !important;
height: auto !important;
}
.is-fixed .logo-header {
height: 66px !important;
width: 195px !important;
}
.is-fixed .logo-header img {
max-height: 52px !important;
}
/* ─── Desktop Nav Links ─── */
.header-nav .nav { float: right !important; }
.header-nav .nav > li { margin: 0 !important; position: relative; }
.header-nav .nav > li > a {
font-family: "Outfit", sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
color: #2a2a2a !important;
padding: 28px 14px !important;
cursor: pointer;
display: inline-block !important;
transition: color 0.2s ease !important;
position: relative;
background: transparent !important;
border: none !important;
}
.header-nav .nav > li > a:hover,
.header-nav .nav > li:hover > a {
color: #335882 !important;
background: transparent !important;
}
.header-nav .nav > li.active > a {
color: #fc733a !important;
}
/* Active underline */
.header-nav .nav > li.active > a::after {
content: "";
position: absolute;
bottom: 22px;
left: 14px;
right: 14px;
height: 2.5px;
background: #fc733a;
border-radius: 2px;
}
/* Sticky adjustments */
.is-fixed .header-nav .nav > li > a {
padding: 22px 13px !important;
}
.is-fixed .header-nav .nav > li.active > a::after {
bottom: 16px;
}
/* ─── Hamburger / Mobile Toggle ─── */
.navbar-toggler {
margin: 22px 0 22px 12px !important;
padding: 8px !important;
border: none !important;
background: transparent !important;
outline: none !important;
z-index: 100;
}
.navbar-toggler span {
background: #335882 !important;
height: 2.5px !important;
width: 26px !important;
display: block !important;
margin: 5px 0 !important;
border-radius: 2px;
transition: all 0.25s ease;
}
.is-fixed .navbar-toggler {
margin: 16px 0 16px 12px !important;
}
/* ─── Search Icon ─── */
.nav-search-li { display: flex; align-items: center; }
.nav-search-li > a {
color: #555 !important;
padding: 28px 6px 28px 10px !important;
transition: color 0.2s ease !important;
display: inline-flex !important;
align-items: center !important;
}
.nav-search-li > a:hover { color: #335882 !important; }
.nav-search-li > a::after { display: none !important; }
.is-fixed .nav-search-li > a { padding: 22px 6px 22px 10px !important; }
/* ═══════════════════════════════════════════════════
DESKTOP DROPDOWNS (min-width: 992px)
═══════════════════════════════════════════════════ */
@media (min-width: 992px) {
/* ── Level 1 Dropdown ── */
.header-nav .nav > li > .sub-menu,
.header-nav .nav > li > .sub-menu.my-menu {
background: #fff !important;
border: none !important;
border-radius: 10px !important;
box-shadow: 0 10px 40px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.04) !important;
padding: 6px 0 !important;
min-width: 260px !important;
margin-top: 0 !important;
animation: ieDropFade 0.25s ease !important;
overflow: visible !important;
}
@keyframes ieDropFade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Right-align dropdowns for right-side nav items */
.header-nav .nav > li:nth-last-child(-n+4) > .sub-menu {
left: auto !important;
right: 0 !important;
}
/* Level 1 items */
.header-nav .nav > li .sub-menu li {
border-bottom: none !important;
position: relative !important;
}
.header-nav .nav > li .sub-menu li a {
font-family: "DM Sans", sans-serif !important;
font-size: 13.5px !important;
font-weight: 500 !important;
color: #444 !important;
padding: 10px 20px !important;
text-transform: none !important;
transition: all 0.15s ease !important;
border-left: 3px solid transparent !important;
display: block !important;
line-height: 1.4;
}
.header-nav .nav > li .sub-menu li a:hover,
.header-nav .nav > li .sub-menu li:hover > a {
color: #335882 !important;
background: #f4f7fa !important;
border-left-color: #335882 !important;
}
/* Category group separator */
.header-nav .nav > li > .sub-menu > li:not(:last-child) {
border-bottom: 1px solid #f2f3f5 !important;
}
/* ── Level 2 Flyout ── */
.header-nav .nav > li .sub-menu li > .sub-menu,
.header-nav .nav > li .sub-menu li > .sub-menu.my-menu,
.header-nav .nav > li .sub-menu li > .sub-menu.my-menu.h-100vh {
background: #fff !important;
border: none !important;
border-radius: 10px !important;
box-shadow: 0 10px 40px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.04) !important;
padding: 6px 0 !important;
min-width: 270px !important;
top: 0 !important;
overflow: visible !important;
}
/* Flyout LEFT for Solutions/Machines (nav items 3+) */
.header-nav .nav > li:nth-child(n+3) .sub-menu li > .sub-menu {
left: auto !important;
right: 100% !important;
margin-right: 4px !important;
margin-left: 0 !important;
}
/* Flyout RIGHT for first items */
.header-nav .nav > li:nth-child(-n+2) .sub-menu li > .sub-menu {
left: 100% !important;
right: auto !important;
margin-left: 4px !important;
margin-right: 0 !important;
}
/* Level 2 item styling */
.header-nav .nav > li .sub-menu li > .sub-menu li a {
font-size: 13px !important;
font-weight: 400 !important;
padding: 9px 18px !important;
border-left: 3px solid transparent !important;
}
.header-nav .nav > li .sub-menu li > .sub-menu li a:hover {
color: #fc733a !important;
background: #fff8f4 !important;
border-left-color: #fc733a !important;
}
/* Hide .fa chevron on desktop */
.header-nav .nav > li .sub-menu li .fa {
display: none !important;
}
/* ── Flyout show/hide ── */
.header-nav .nav > li .sub-menu {
opacity: 0 !important;
visibility: hidden !important;
display: block !important;
position: absolute !important;
transition: opacity 0.2s ease, visibility 0.2s ease, margin 0.2s ease !important;
}
.header-nav .nav > li .sub-menu li > .sub-menu {
opacity: 0 !important;
visibility: hidden !important;
display: block !important;
position: absolute !important;
transition: opacity 0.2s ease, visibility 0.2s ease !important;
}
/* Show L1 on hover */
.header-nav .nav > li:hover > .sub-menu {
opacity: 1 !important;
visibility: visible !important;
margin-top: 0 !important;
}
/* Show L2 on hover */
.header-nav .nav > li .sub-menu li:hover > .sub-menu,
.header-nav .nav > li .sub-menu.my-menu li:hover > .sub-menu,
.header-nav .nav > li .sub-menu li:hover > .sub-menu.my-menu,
.header-nav .nav > li .sub-menu li:hover > .sub-menu.my-menu.h-100vh {
opacity: 1 !important;
visibility: visible !important;
top: 0 !important;
}
/* Flyout margins on hover */
.header-nav .nav > li:nth-child(n+3) .sub-menu li:hover > .sub-menu {
margin-right: 4px !important;
}
.header-nav .nav > li:nth-child(-n+2) .sub-menu li:hover > .sub-menu {
margin-left: 4px !important;
}
/* my-menu position fix */
.my-menu li,
.sub-menu.my-menu li,
.sub-menu.my-menu.h-100vh li,
.header-nav .nav > li .sub-menu.my-menu li,
.header-nav .nav > li .sub-menu li {
position: relative !important;
}
/* h-100vh fix */
.sub-menu.h-100vh {
height: auto !important;
max-height: 80vh !important;
overflow-y: auto !important;
}
} /* end @media min-width: 992px */
/* ═══════════════════════════════════════════════════
MOBILE NAV (max-width: 991px)
═══════════════════════════════════════════════════ */
@media only screen and (max-width: 991px) {
/* Nav links */
.header-nav .nav > li > a {
padding: 13px 15px !important;
font-size: 14px !important;
color: #1a1a1a !important;
border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}
.header-nav .nav > li.active > a {
color: #fc733a !important;
}
.header-nav .nav > li.active > a::after {
display: none !important;
}
/* Reset ALL desktop dropdown styles */
.header-nav .nav > li > .sub-menu,
.header-nav .nav > li .sub-menu li > .sub-menu,
.header-nav .nav > li .sub-menu.my-menu,
.header-nav .nav > li .sub-menu.my-menu.h-100vh,
.header-nav .nav > li .sub-menu li > .sub-menu.my-menu,
.header-nav .nav > li .sub-menu li > .sub-menu.my-menu.h-100vh {
position: static !important;
box-shadow: none !important;
border-radius: 0 !important;
animation: none !important;
min-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
left: auto !important;
right: auto !important;
top: auto !important;
transform: none !important;
opacity: 1 !important;
visibility: visible !important;
max-height: none !important;
overflow: visible !important;
}
/* Hidden by default - JS toggles .open class */
.header-nav .nav > li > .sub-menu,
.header-nav .nav > li .sub-menu li > .sub-menu,
.header-nav .nav > li .sub-menu.my-menu,
.header-nav .nav > li .sub-menu li > .sub-menu.my-menu,
.header-nav .nav > li .sub-menu li > .sub-menu.my-menu.h-100vh {
display: none !important;
}
/* Show when .open toggled */
.header-nav .nav > li.open > .sub-menu,
.header-nav .nav > li.open > .sub-menu.my-menu {
display: block !important;
}
.header-nav .nav > li.open > .sub-menu li.open > .sub-menu,
.header-nav .nav > li.open > .sub-menu li.open > .sub-menu.my-menu,
.header-nav .nav > li.open > .sub-menu li.open > .sub-menu.my-menu.h-100vh,
.header-nav .nav > li .sub-menu li.open > .sub-menu {
display: block !important;
}
/* L1 sub-menu styling */
.header-nav .nav > li .sub-menu {
background: #f7f8fa !important;
}
.header-nav .nav > li .sub-menu li {
border-bottom: none !important;
position: relative !important;
}
.header-nav .nav > li .sub-menu li a {
font-family: "DM Sans", sans-serif !important;
font-size: 13.5px !important;
font-weight: 500 !important;
color: #333 !important;
padding: 12px 15px 12px 30px !important;
border-bottom: 1px solid rgba(0,0,0,0.03) !important;
border-left: none !important;
background: transparent !important;
display: block !important;
}
.header-nav .nav > li .sub-menu li.open > a {
color: #335882 !important;
font-weight: 600 !important;
background: #eef3f9 !important;
}
/* L2 sub-sub items */
.header-nav .nav > li .sub-menu li > .sub-menu {
background: #eef1f5 !important;
}
.header-nav .nav > li .sub-menu li > .sub-menu li a {
padding: 11px 15px 11px 46px !important;
font-size: 13px !important;
color: #555 !important;
}
.header-nav .nav > li .sub-menu li > .sub-menu li a::before {
content: "-";
position: absolute;
left: 30px;
color: #bbb;
font-family: "DM Sans", sans-serif !important;
}
/* Chevron arrows for expandable items */
.header-nav .nav > li .sub-menu li .fa {
display: block !important;
position: absolute !important;
right: 15px !important;
top: 50% !important;
transform: translateY(-50%) !important;
font-family: "Font Awesome 5 Pro","Font Awesome 5 Free","FontAwesome" !important;
font-size: 13px !important;
color: #aaa !important;
transition: all 0.2s ease !important;
pointer-events: none;
}
.header-nav .nav > li .sub-menu li.open > .fa,
.header-nav .nav > li .sub-menu li.open .fa {
transform: translateY(-50%) rotate(90deg) !important;
color: #335882 !important;
}
/* Logo */
.logo-header {
height: 58px !important;
width: 140px !important;
}
.logo-header img {
max-height: 42px !important;
}
.is-fixed .logo-header {
height: 52px !important;
width: 130px !important;
}
.is-fixed .logo-header img {
max-height: 38px !important;
}
/* Hamburger */
.navbar-toggler {
margin: 14px 0 14px 10px !important;
}
.is-fixed .navbar-toggler {
margin: 10px 0 10px 10px !important;
}
/* Search icon position */
.nav-search-li {
position: absolute !important;
right: 60px;
top: 12px;
}
.nav-search-li > a {
padding: 10px !important;
font-size: 16px !important;
}
/* Top bar compact */
.top-bar.no-skew {
padding: 4px 0 !important;
}
.top-bar .social-bx li a {
font-size: 11px !important;
}
}
/* ═══════════════════════════════════════════════════
TABLET (768px - 991px) adjustments
═══════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 991px) {
.logo-header {
height: 60px !important;
width: 160px !important;
}
.logo-header img {
max-height: 46px !important;
}
.nav-search-li {
right: 65px;
top: 14px;
}
}
/* ═══════════════════════════════════════════════════
Search Overlay
═══════════════════════════════════════════════════ */
#ieSearchOverlay input::placeholder { color: #bbb; }
#ieSearchOverlay input::-webkit-input-placeholder { color: #bbb; }
#ieSearchOverlay a {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 10px 20px !important;
text-decoration: none !important;
transition: background 0.15s ease !important;
border-bottom: 1px solid #f5f5f5 !important;
}
#ieSearchOverlay a:hover {
background: #f4f7fa !important;
}
#ieSearchOverlay a img {
width: 44px !important;
height: 44px !important;
object-fit: cover !important;
border-radius: 8px !important;
flex-shrink: 0 !important;
}
@media (max-width: 768px) {
#ieSearchOverlay > div {
margin-top: 20px !important;
padding: 0 12px !important;
}
}
/* ═══════════════════════════════════════════════════
Footer Social Icons + WhatsApp Floating Button
═══════════════════════════════════════════════════ */
.dlab-social-icon li {
display: inline-block !important;
margin: 0 3px !important;
}
.dlab-social-icon li a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
background: rgba(255,255,255,0.1) !important;
color: #fff !important;
font-size: 15px !important;
padding: 0 !important;
transition: all 0.25s ease !important;
}
.dlab-social-icon li a:hover {
background: #fc733a !important;
transform: translateY(-2px);
}
.dlab-social-icon li a i,
.dlab-social-icon li a i::before {
font-family: "Font Awesome 5 Pro","Font Awesome 5 Free","Font Awesome 5 Brands","FontAwesome" !important;
font-weight: 400 !important;
color: #fff !important;
font-size: 15px !important;
line-height: 1 !important;
}
/* WhatsApp floating button */
.call_me {
width: 56px !important;
height: 56px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
background: #25D366 !important;
box-shadow: 0 4px 16px rgba(37,211,102,0.35) !important;
z-index: 99999 !important;
transition: all 0.3s ease !important;
}
.call_me::before { display: none !important; }
.call_me:hover {
transform: scale(1.08) !important;
box-shadow: 0 6px 24px rgba(37,211,102,0.45) !important;
}
.call_me i,
.call_me i::before {
font-family: "Font Awesome 5 Pro","Font Awesome 5 Free","Font Awesome 5 Brands","FontAwesome" !important;
font-weight: 400 !important;
color: #fff !important;
font-size: 28px !important;
line-height: 1 !important;
}
@media (max-width: 768px) {
.call_me {
width: 48px !important;
height: 48px !important;
bottom: 16px !important;
left: 16px !important;
}
.call_me i { font-size: 24px !important; }
.dlab-social-icon li a {
width: 32px !important;
height: 32px !important;
font-size: 13px !important;
}
}
/* ═══════════════════════════════════════════════════
Product Cards: Consistent styling site-wide
═══════════════════════════════════════════════════ */
/* Card container */
.ow-carousel-entry {
border-radius: 10px !important;
overflow: hidden !important;
background: #fff !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
border: 1px solid #eef0f2 !important;
transition: all 0.3s ease !important;
height: 100%;
display: flex;
flex-direction: column;
}
.ow-carousel-entry:hover {
box-shadow: 0 8px 28px rgba(0,0,0,0.1) !important;
transform: translateY(-4px);
border-color: #dce3ea !important;
}
/* Card image area - default (natural ratio) */
.ow-carousel-entry .ow-entry-media {
overflow: hidden !important;
position: relative;
background: #f5f7fa;
}
.ow-carousel-entry .ow-entry-media img {
width: 100% !important;
height: auto !important;
object-fit: cover !important;
transition: transform 0.4s ease !important;
display: block !important;
}
.ow-carousel-entry:hover .ow-entry-media img {
transform: scale(1.06) !important;
}
/* PRODUCT CARDS ONLY - square images */
/* Machine/Solution submenu pages use .image wrapper */
.image .ow-carousel-entry .ow-entry-media {
aspect-ratio: 1 / 1 !important;
}
.image .ow-carousel-entry .ow-entry-media img {
height: 100% !important;
position: absolute !important;
top: 0;
left: 0;
}
/* Card info area */
.ow-carousel-entry .dlab-post-info {
padding: 16px 18px 14px !important;
display: flex !important;
flex-direction: column !important;
flex-grow: 1 !important;
background: #fff !important;
text-align: left !important;
}
/* Card title */
.ow-carousel-entry .dlab-post-title h3 {
font-family: "Outfit", sans-serif !important;
font-size: 16px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
margin: 0 0 8px !important;
}
.ow-carousel-entry .dlab-post-title h3 a {
font-family: "Outfit", sans-serif !important;
color: #1a1a1a !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
.ow-carousel-entry .dlab-post-title h3 a:hover {
color: #335882 !important;
}
/* Card description text */
.ow-carousel-entry .dlab-post-text {
font-family: "DM Sans", sans-serif !important;
font-size: 13.5px !important;
line-height: 1.6 !important;
color: #666 !important;
margin-bottom: 12px !important;
flex-grow: 1;
}
.ow-carousel-entry .dlab-post-text p {
font-family: "DM Sans", sans-serif !important;
font-size: 13.5px !important;
color: #666 !important;
margin: 0 !important;
}
/* Card "Read More" link */
.ow-carousel-entry .dlab-post-readmore {
margin-top: auto !important;
padding-top: 12px !important;
border-top: 1px solid #f2f3f5 !important;
}
.ow-carousel-entry .dlab-post-readmore .site-button-link {
font-family: "Outfit", sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #335882 !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
}
.ow-carousel-entry .dlab-post-readmore .site-button-link:hover {
color: #fc733a !important;
gap: 10px !important;
}
.ow-carousel-entry .dlab-post-readmore .site-button-link i {
font-size: 11px !important;
transition: transform 0.2s ease !important;
}
.ow-carousel-entry .dlab-post-readmore .site-button-link:hover i {
transform: translateX(3px) !important;
}
/* ── Blog card extras ── */
.ow-carousel-entry .Category {
font-family: "Outfit", sans-serif !important;
font-size: 11px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
color: #fc733a !important;
letter-spacing: 0.04em;
margin-bottom: 6px;
display: inline-block;
}
.ow-carousel-entry .date {
font-family: "DM Sans", sans-serif !important;
font-size: 12px !important;
color: #999 !important;
}
/* ── Homepage machine tab cards ── */
/* Homepage machine tab cards */
/* Machine tab cards */
.machine-img,
.img-wrapper.machine-img {
border-radius: 10px !important;
overflow: hidden !important;
background: #fff !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
border: 1px solid #eef0f2 !important;
transition: all 0.3s ease !important;
display: flex !important;
flex-direction: column !important;
}
.machine-img:hover {
box-shadow: 0 6px 20px rgba(0,0,0,0.1) !important;
transform: translateY(-3px);
border-color: #dce3ea !important;
}
.machine-img img {
width: 100% !important;
aspect-ratio: 1 / 1 !important;
height: auto !important;
object-fit: cover !important;
display: block !important;
transition: transform 0.4s ease !important;
background: #f8f9fb;
}
.machine-img:hover img {
transform: scale(1.05) !important;
}
/* Industries & other img-wrappers - keep natural */
.img-wrapper:not(.machine-img) {
border-radius: 10px !important;
overflow: hidden !important;
}
.img-wrapper:not(.machine-img) img {
width: 100% !important;
height: auto !important;
object-fit: cover !important;
display: block !important;
}
/* Product name label */
.p-ind,
.text-center.p-ind {
font-family: "Outfit", sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #1a1a1a !important;
padding: 10px 8px !important;
background: #fff !important;
margin: 0 !important;
text-align: center !important;
border-top: 1px solid #f0f0f0;
}
/* Grid columns */
.image.col-lg-3.col-md-4.col-sm-6 {
padding: 0 8px !important;
margin-bottom: 16px !important;
}
/* Tab content spacing */
.m-tabs .tab-content {
margin-top: 10px !important;
}
.m-tabs .tab-pane .row {
margin-left: -8px !important;
margin-right: -8px !important;
}
/* ── Homepage machine tabs ── */
.m-tabs .nav-tabs {
border-bottom: 2px solid #eef0f2 !important;
flex-wrap: wrap;
justify-content: center;
gap: 4px;
}
.m-tabs .nav-tabs .nav-link {
font-family: "Outfit", sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #666 !important;
background: transparent !important;
border: none !important;
border-bottom: 2px solid transparent !important;
padding: 10px 16px !important;
margin-bottom: -2px;
transition: all 0.2s ease !important;
border-radius: 0 !important;
white-space: nowrap;
}
.m-tabs .nav-tabs .nav-link:hover {
color: #335882 !important;
border-bottom-color: #335882 !important;
}
.m-tabs .nav-tabs .nav-link.active {
color: #335882 !important;
border-bottom-color: #335882 !important;
background: transparent !important;
}
/* ── Homepage solutions card with orange button ── */
.dlab-post-readmore a[style*="background: #fc733a"],
.dlab-post-readmore a[style*="background:#fc733a"] {
font-family: "Outfit", sans-serif !important;
border-radius: 8px !important;
font-weight: 600 !important;
font-size: 13px !important;
padding: 10px 20px !important;
transition: all 0.25s ease !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
}
.dlab-post-readmore a[style*="background: #fc733a"]:hover,
.dlab-post-readmore a[style*="background:#fc733a"]:hover {
opacity: 0.9;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(252,115,58,0.3);
}
/* ── Related products cards (subsubmenu) - square ── */
.related-products .ow-carousel-entry .ow-entry-media {
aspect-ratio: 1 / 1 !important;
}
.related-products .ow-carousel-entry .ow-entry-media img {
height: 100% !important;
position: absolute !important;
top: 0;
left: 0;
}
.related-products .dlab-post-title h3 {
font-size: 14px !important;
}
/* ── Card grid spacing ── */
.image.col-lg-6 {
margin-bottom: 24px !important;
}
/* ── Responsive cards ── */
@media (max-width: 768px) {
.m-tabs .nav-tabs .nav-link {
font-size: 12px !important;
padding: 8px 12px !important;
}
}
/* ═══════════════════════════════════════════════════
Testimonial Cards
═══════════════════════════════════════════════════ */
/* Card container */
.testimonial-6 {
padding: 0 8px;
}
.testimonial-6 .testimonial-text {
background: #fff !important;
border-radius: 10px !important;
padding: 28px 24px 20px !important;
min-height: auto !important;
box-shadow: 0 2px 16px rgba(0,0,0,0.06) !important;
border: 1px solid #eef0f2 !important;
position: relative;
transition: all 0.3s ease !important;
display: flex;
flex-direction: column;
}
.testimonial-6:hover .testimonial-text {
box-shadow: 0 6px 24px rgba(0,0,0,0.1) !important;
transform: translateY(-3px);
}
/* Quote icon - fix FontAwesome 4→5 and style */
.testimonial-6 .quote-left:before {
font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
font-weight: 900 !important;
content: "\f10d" !important;
font-size: 28px !important;
color: #eef3f9 !important;
top: 20px !important;
left: 20px !important;
z-index: 0 !important;
opacity: 0.6;
}
.testimonial-6 .quote-right:after {
content: none !important;
}
/* Avatar / initials circle */
.testimonial-6 .testimonial-pic.radius {
width: 64px !important;
height: 64px !important;
font-size: 24px !important;
margin: 0 auto 16px !important;
border: 3px solid #fff !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
flex-shrink: 0;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.testimonial-6 .testimonial-pic.radius img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 50% !important;
}
/* Name & profession bar */
.testimonial-6 .testimonial-detail {
background: linear-gradient(135deg, #335882 0%, #1d3a5c 100%) !important;
border-radius: 10px !important;
padding: 12px 16px !important;
margin-bottom: 14px !important;
text-align: center;
}
.testimonial-6 .testimonial-name {
font-family: "Outfit", sans-serif !important;
font-size: 15px !important;
font-weight: 600 !important;
color: #fff !important;
margin: 0 0 2px !important;
display: block;
}
.testimonial-6 .testimonial-position {
font-family: "DM Sans", sans-serif !important;
font-size: 12px !important;
font-style: normal !important;
color: rgba(255,255,255,0.7) !important;
margin: 0 !important;
display: block;
}
/* Testimonial text */
.testimonial-6 p {
font-family: "DM Sans", sans-serif !important;
font-size: 14px !important;
line-height: 1.7 !important;
color: #555 !important;
min-height: auto !important;
margin: 0 0 12px !important;
position: relative;
z-index: 1;
flex-grow: 1;
}
/* Read more link */
.testimonial-6 .readmore-btn {
font-family: "Outfit", sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #335882 !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
text-decoration: none !important;
padding-top: 10px !important;
border-top: 1px solid #f2f3f5;
margin-top: auto;
}
.testimonial-6 .readmore-btn:hover {
color: #fc733a !important;
}
.testimonial-6 .readmore-btn i {
font-size: 11px !important;
transition: transform 0.2s ease !important;
}
.testimonial-6 .readmore-btn:hover i {
transform: translateX(3px) !important;
}
/* Empty readmore div cleanup */
.testimonial-6 .dlab-post-readmore:empty {
display: none;
}
/* ── Owl Carousel Arrows ── */
.testimonial-five.owl-btn-3 .owl-nav .owl-prev,
.testimonial-five.owl-btn-3 .owl-nav .owl-next,
.testimonial-five .owl-prev,
.testimonial-five .owl-next {
background: #335882 !important;
color: #fff !important;
width: 40px !important;
height: 40px !important;
line-height: 40px !important;
border-radius: 50% !important;
font-size: 16px !important;
opacity: 0.8;
transition: all 0.2s ease !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.testimonial-five .owl-prev:hover,
.testimonial-five .owl-next:hover {
opacity: 1;
background: #1d3a5c !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* ── Section heading ── */
.testimonial-five + .section-head h2,
.section-content > .testimonial-five {
margin-bottom: 10px;
}
/* ── Responsive ── */
@media (max-width: 768px) {
.testimonial-6 .testimonial-text {
padding: 22px 18px 16px !important;
}
.testimonial-6 .testimonial-pic.radius {
width: 54px !important;
height: 54px !important;
font-size: 20px !important;
}
.testimonial-five .owl-prev,
.testimonial-five .owl-next {
display: none !important;
}
}
/* ═══════════════════════════════════════════════════
Industry Usage Carousel (solutions/machines submenu)
═══════════════════════════════════════════════════ */
.items-responsive.owl-carousel .itemss {
background: #fff !important;
border-radius: 10px !important;
border: 1px solid #eef0f2 !important;
overflow: hidden !important;
text-align: center !important;
transition: all 0.3s ease !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}
.items-responsive.owl-carousel .itemss:hover {
box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important;
transform: translateY(-3px);
}
.items-responsive.owl-carousel .itemss img {
border-radius: 10px 10px 0 0 !important;
}
.items-responsive .owl-nav {
text-align: center !important;
margin-top: 16px !important;
}
.items-responsive .owl-nav .owl-prev,
.items-responsive .owl-nav .owl-next {
background: #335882 !important;
color: #fff !important;
width: 36px !important;
height: 36px !important;
line-height: 36px !important;
border-radius: 50% !important;
font-size: 14px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 6px !important;
transition: all 0.2s ease !important;
opacity: 0.85;
}
.items-responsive .owl-nav .owl-prev:hover,
.items-responsive .owl-nav .owl-next:hover {
background: #1d3a5c !important;
opacity: 1;
}
/* ═══════════════════════════════════════════════════
Blog Pages
═══════════════════════════════════════════════════ */
/* Blog sidebar title */
.blog-sidebar-title,
.cinkes_sidebar_title {
font-family: "Outfit", sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
color: #1a1a1a !important;
padding-bottom: 10px !important;
margin-bottom: 14px !important;
border-bottom: 2px solid #335882 !important;
display: inline-block;
}
/* Blog category sidebar */
.blog-category-list,
.blog-category-list ul,
.col-lg-3 > .widget_services.style-2 {
list-style: none !important;
padding: 0 !important;
background: #f8f9fb;
border-radius: 10px;
overflow: hidden;
border: 1px solid #e9ecf0;
}
.blog-category-list ul,
.col-lg-3 > .widget_services.style-2 ul {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.blog-category-list ul li,
.col-lg-3 > .widget_services.style-2 ul li {
border-bottom: 1px solid #e9ecf0 !important;
padding: 0 !important;
margin: 0 !important;
}
.blog-category-list ul li:last-child {
border-bottom: none !important;
}
.blog-category-list ul li a,
.col-lg-3 > .widget_services.style-2 ul li a {
font-family: "DM Sans", sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
color: #444 !important;
padding: 12px 18px !important;
display: block !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
border-left: 3px solid transparent !important;
}
.blog-category-list ul li a:hover {
color: #335882 !important;
background: #f0f4f8 !important;
border-left-color: #335882 !important;
padding-left: 22px !important;
}
.blog-category-list ul li.active a {
color: #335882 !important;
background: #eef3f9 !important;
border-left-color: #335882 !important;
font-weight: 600 !important;
}
.blog-category-list ul li::before,
.blog-category-list ul li:before {
display: none !important;
}
/* Blog card column spacing */
.blog-card-col {
margin-bottom: 24px !important;
}
/* Blog card date + category row */
.blog-date {
font-family: "DM Sans", sans-serif !important;
font-size: 12px !important;
color: #999 !important;
margin-right: 12px;
}
.blog-date i {
margin-right: 4px;
}
/* Blog card "Read More" fix */
.blog-card-col .dlab-post-readmore .site-button-link {
font-size: 13px !important;
}
/* ── Blog detail page ── */
/* Blog hero banner */
/* ═══ Freeflow Breadcrumb - No Image Required ═══ */
.dlab-bnr-inr {
min-height: auto !important;
display: block !important;
background-image: none !important;
background: linear-gradient(135deg, #1d3a5c 0%, #335882 50%, #3d6a9e 100%) !important;
position: relative !important;
overflow: hidden !important;
padding: 22px 0 18px !important;
}
/* Kill theme overlay pseudo-elements on breadcrumb */
.dlab-bnr-inr::before,
.dlab-bnr-inr::after,
.dlab-bnr-inr.overlay-black-middle::after,
.dlab-bnr-inr.overlay-black-middle::before {
content: none !important;
display: none !important;
}
.dlab-bnr-inr .dlab-bnr-inr-entry {
position: relative;
z-index: 2;
}
.dlab-bnr-inr .dlab-bnr-inr-entry h1 {
font-family: "Outfit", sans-serif !important;
font-size: 30px !important;
font-weight: 700 !important;
margin-bottom: 6px !important;
line-height: 1.3 !important;
color: #fff !important;
margin-bottom: 4px !important;
}
.dlab-bnr-inr .dlab-separator {
width: 40px;
height: 2px;
background: #fc733a !important;
margin-bottom: 8px;
border-radius: 2px;
}
/* Breadcrumb trail */
.breadcrumb-row { border: none !important; padding: 0 !important; }
.breadcrumb-row ul {
margin: 0 !important; padding: 0 !important; list-style: none !important;
display: flex !important; flex-wrap: wrap; align-items: center;
}
.breadcrumb-row ul li a {
color: rgba(255,255,255,0.6) !important; text-decoration: none !important;
font-size: 13px !important; font-family: "DM Sans", sans-serif !important;
transition: color 0.2s;
}
.breadcrumb-row ul li a:hover { color: #fff !important; }
.breadcrumb-row ul li:last-child {
color: rgba(255,255,255,0.85) !important;
font-size: 13px !important; font-family: "DM Sans", sans-serif !important;
}
.breadcrumb-row ul li:after,
.breadcrumb-row ul li::after {
content: "›" !important;
display: inline-block !important;
margin: 0 8px !important;
color: rgba(255,255,255,0.35) !important;
font-size: 14px !important;
background: none !important;
width: auto !important;
height: auto !important;
position: static !important;
opacity: 1 !important;
}
.breadcrumb-row ul li:last-child:after,
.breadcrumb-row ul li:last-child::after {
display: none !important;
}
/* Blog content area */
.section-full.content-inner .service-text {
font-family: "DM Sans", sans-serif !important;
font-size: 15px !important;
line-height: 1.8 !important;
color: #333 !important;
padding-top: 20px !important;
}
.section-full.content-inner .service-text p {
margin-bottom: 16px !important;
}
.section-full.content-inner .service-text h2,
.section-full.content-inner .service-text h3 {
font-family: "Outfit", sans-serif !important;
color: #1a1a1a !important;
margin: 28px 0 12px !important;
}
.section-full.content-inner .service-text img {
border-radius: 10px !important;
margin: 16px 0 !important;
}
.section-full.content-inner .service-text ul,
.section-full.content-inner .service-text ol {
margin-left: 20px !important;
margin-bottom: 16px !important;
}
.section-full.content-inner .service-text li {
margin-bottom: 6px !important;
}
/* Share buttons row */
.col-sm-12.mt-4.mb-2 {
padding-top: 20px !important;
border-top: 1px solid #eee !important;
margin-top: 24px !important;
}
.col-sm-12.mt-4.mb-2 p {
font-family: "Outfit", sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
color: #1a1a1a !important;
}
/* Sidebar latest posts */
.cinkes_blog_sidebar {
background: #f8f9fb !important;
border-radius: 10px !important;
border: 1px solid #e9ecf0 !important;
padding: 18px !important;
}
.cinkes_blog_sidebar .blog-sidebar-title {
margin-bottom: 16px !important;
padding-bottom: 10px !important;
}
.recent-post-title {
font-family: "Outfit", sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
margin: 0 !important;
}
.recent-post-title a {
color: #1a1a1a !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
.recent-post-title a:hover {
color: #335882 !important;
}
/* Breadcrumb */
.breadcrumb-row ul {
font-family: "DM Sans", sans-serif !important;
font-size: 13px !important;
}
.breadcrumb-row ul li a {
color: rgba(255,255,255,0.7) !important;
}
.breadcrumb-row ul li a:hover {
color: #fff !important;
}
/* Pagination */
.pagination ul {
justify-content: center !important;
gap: 6px !important;
flex-wrap: wrap;
}
.pagination ul li {
list-style: none !important;
}
.pagination .page-numbers {
font-family: "Outfit", sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 38px !important;
height: 38px !important;
border-radius: 8px !important;
background: #fff !important;
color: #444 !important;
border: 1px solid #ddd !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
}
.pagination .page-numbers:hover {
background: #f0f4f8 !important;
border-color: #335882 !important;
color: #335882 !important;
}
.pagination .page-numbers.current {
background: #335882 !important;
color: #fff !important;
border-color: #335882 !important;
}
.pagination .next.page-numbers {
width: auto !important;
padding: 0 14px !important;
}
/* Blog detail responsive */
@media (max-width: 768px) {
.dlab-bnr-inr {
padding: 18px 0 14px !important;
}
.dlab-bnr-inr .dlab-bnr-inr-entry h1 {
font-size: 22px !important;
}
.cinkes_blog_sidebar {
margin-top: 24px;
}
}
/* ═══════════════════════════════════════════════════
Product Detail Pages (machines & solutions)
═══════════════════════════════════════════════════ */
/* Product hero - image + info side by side */
.product-hero {
display: flex;
gap: 28px;
margin-bottom: 32px;
align-items: flex-start;
}
.product-hero-img {
flex: 0 0 45%;
max-width: 45%;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.product-hero-img img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 4/3;
object-fit: cover;
}
.product-hero-info {
flex: 1;
padding-top: 4px;
}
.product-hero-info h2 {
font-family: "Outfit", sans-serif !important;
font-size: 26px !important;
font-weight: 700 !important;
color: #1a1a1a !important;
margin: 0 0 14px !important;
line-height: 1.3;
}
.product-short-desc {
font-family: "DM Sans", sans-serif !important;
font-size: 15px !important;
line-height: 1.7 !important;
color: #555 !important;
}
.product-short-desc p {
margin-bottom: 10px !important;
}
/* Product description */
.product-description {
padding: 28px 0;
border-top: 1px solid #eef0f2;
margin-bottom: 8px;
}
.product-description p {
font-family: "DM Sans", sans-serif !important;
font-size: 15px !important;
line-height: 1.8 !important;
color: #444 !important;
margin-bottom: 14px !important;
}
.product-description h2,
.product-description h3,
.product-description h4 {
font-family: "Outfit", sans-serif !important;
color: #1a1a1a !important;
margin: 24px 0 12px !important;
}
.product-description ul,
.product-description ol {
margin-left: 20px !important;
margin-bottom: 16px !important;
font-family: "DM Sans", sans-serif !important;
}
.product-description li {
margin-bottom: 8px !important;
line-height: 1.6 !important;
color: #444 !important;
}
.product-description img {
border-radius: 10px !important;
margin: 12px 0 !important;
max-width: 100%;
height: auto;
}
.product-description table {
width: 100% !important;
border-collapse: collapse !important;
margin: 16px 0 !important;
font-size: 14px !important;
}
.product-description table td,
.product-description table th {
padding: 10px 14px !important;
border: 1px solid #e9ecf0 !important;
font-family: "DM Sans", sans-serif !important;
}
.product-description table th {
background: #f4f7fa !important;
font-family: "Outfit", sans-serif !important;
font-weight: 600 !important;
color: #335882 !important;
}
/* Additional sections (alternating image + text) */
.product-section {
padding: 28px 0;
border-top: 1px solid #eef0f2;
}
.product-section-img {
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.product-section-img img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 4/3;
object-fit: cover;
transition: transform 0.4s ease;
}
.product-section:hover .product-section-img img {
transform: scale(1.03);
}
.product-section-text {
padding: 8px 0;
}
.product-section-text h3 {
font-family: "Outfit", sans-serif !important;
font-size: 20px !important;
font-weight: 600 !important;
color: #1a1a1a !important;
margin: 0 0 12px !important;
line-height: 1.35;
}
.product-section-text p {
font-family: "DM Sans", sans-serif !important;
font-size: 14.5px !important;
line-height: 1.7 !important;
color: #555 !important;
}
/* Alternating bg for additional sections */
.product-section-alt {
background: #f8f9fb;
margin-left: -15px;
margin-right: -15px;
padding-left: 15px;
padding-right: 15px;
border-radius: 10px;
}
/* ── Related Products ── */
.related-products-section {
padding-top: 40px !important;
padding-bottom: 50px !important;
border-top: 1px solid #eef0f2;
}
.related-heading {
font-family: "Outfit", sans-serif !important;
font-size: 20px !important;
font-weight: 700 !important;
color: #1a1a1a !important;
margin-bottom: 24px !important;
text-transform: none !important;
}
.related-card-link {
text-decoration: none !important;
color: inherit !important;
display: block;
}
.related-card {
border-radius: 10px !important;
overflow: hidden !important;
border: 1px solid #eef0f2 !important;
background: #fff !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.04) !important;
transition: all 0.3s ease !important;
}
.related-card:hover {
box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
transform: translateY(-3px);
border-color: #dce3ea !important;
}
.related-card-img {
width: 100% !important;
aspect-ratio: 1/1 !important;
object-fit: cover !important;
display: block !important;
transition: transform 0.4s ease !important;
}
.related-card:hover .related-card-img {
transform: scale(1.05) !important;
}
.related-card-info {
padding: 14px 16px !important;
}
.related-card-name {
font-family: "Outfit", sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
color: #1a1a1a !important;
margin: 0 !important;
line-height: 1.4;
}
/* ── Mobile Responsive ── */
@media (max-width: 768px) {
.product-hero {
flex-direction: column;
gap: 18px;
}
.product-hero-img {
flex: none;
max-width: 100%;
}
.product-hero-info h2 {
font-size: 22px !important;
}
.product-section .row {
gap: 16px;
}
.product-section-alt {
margin-left: 0;
margin-right: 0;
}
.product-section .order-md-1,
.product-section .order-md-2 {
order: unset !important;
}
}
/* Blog detail sidebar - latest posts */
.cinkes_sidebar-latestnewt {
display: flex !important;
flex-wrap: nowrap !important;
align-items: flex-start !important;
gap: 12px !important;
margin-bottom: 14px !important;
padding-bottom: 14px !important;
border-bottom: 1px solid #e9ecf0 !important;
}
.cinkes_sidebar-latestnewt:last-child {
border-bottom: none !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.cinkes_sidebar-latestnews-img {
flex: 0 0 72px !important;
width: 72px !important;
max-width: 72px !important;
padding: 0 !important;
}
.cinkes_sidebar-latestnews-img a {
display: block;
}
.cinkes_sidebar-latestnews-img img {
width: 72px !important;
height: 54px !important;
object-fit: cover !important;
border-radius: 6px !important;
display: block !important;
}
.cinkes_sidebar-latestnews-text {
flex: 1 !important;
min-width: 0 !important;
padding: 0 !important;
}
/* ═══════════════════════════════════════════════════
Comprehensive Mobile Responsive
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* Typography */
.section-head h2 {
font-size: 22px !important;
line-height: 1.3 !important;
}
.section-head h2 .text-primary {
display: inline !important;
}
/* Container padding */
.content-inner,
.content-inner-1 {
padding: 30px 0 !important;
}
/* Product hero stacks */
.product-hero {
flex-direction: column !important;
gap: 18px !important;
}
.product-hero-img {
max-width: 100% !important;
flex: none !important;
}
.product-hero-info h2 {
font-size: 22px !important;
}
/* Product cards */
.ow-carousel-entry .dlab-post-info {
padding: 14px 14px 12px !important;
}
.ow-carousel-entry .dlab-post-title h3 {
font-size: 15px !important;
}
/* Product sections */
.product-section .col-md-5,
.product-section .col-md-7 {
flex: 0 0 100% !important;
max-width: 100% !important;
order: unset !important;
}
.product-section-img {
margin-bottom: 16px;
}
.product-section-alt {
margin-left: 0 !important;
margin-right: 0 !important;
padding: 20px 15px !important;
}
/* Blog cards - single column */
.blog-card-col,
.col-lg-6.col-md-6 {
flex: 0 0 100% !important;
max-width: 100% !important;
}
/* Sidebar on mobile */
.col-lg-3.col-md-4 {
margin-top: 30px !important;
}
.hidesm {
display: none !important;
}
/* Testimonials */
.testimonial-6 .testimonial-text {
padding: 20px 16px 14px !important;
}
.testimonial-6 .testimonial-pic.radius {
width: 50px !important;
height: 50px !important;
font-size: 18px !important;
}
/* Homepage sections */
.ow-carousel-entry .ow-entry-media img {
height: auto !important;
}
.image .ow-carousel-entry .ow-entry-media {
aspect-ratio: 1/1 !important;
}
/* Machine tabs - horizontal scroll */
.m-tabs .nav-tabs {
display: flex !important;
overflow-x: auto !important;
flex-wrap: nowrap !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
border-bottom: 2px solid #eef0f2 !important;
gap: 0 !important;
padding-bottom: 0 !important;
}
.m-tabs .nav-tabs::-webkit-scrollbar {
display: none;
}
.m-tabs .nav-tabs .nav-item {
flex-shrink: 0 !important;
}
.m-tabs .nav-tabs .nav-link {
font-size: 12px !important;
padding: 10px 14px !important;
white-space: nowrap !important;
border-bottom: 2px solid transparent !important;
margin-bottom: -2px !important;
}
.m-tabs .nav-tabs .nav-link.active {
border-bottom-color: #335882 !important;
}
/* Machine grid on mobile - 2 columns, tight cards */
.machine-img,
.img-wrapper.machine-img {
border-radius: 8px !important;
}
.machine-img img {
aspect-ratio: 1/1 !important;
object-fit: cover !important;
}
.p-ind,
.text-center.p-ind {
font-size: 11.5px !important;
padding: 8px 6px !important;
line-height: 1.3 !important;
}
.image.col-lg-3,
.image.col-lg-3.col-md-4.col-sm-6 {
flex: 0 0 50% !important;
max-width: 50% !important;
padding: 0 5px !important;
margin-bottom: 10px !important;
}
.m-tabs .tab-pane .row {
margin-left: -5px !important;
margin-right: -5px !important;
}
.m-tabs .tab-content {
margin-top: 6px !important;
}
.m-tabs .section-head {
margin-bottom: 10px !important;
}
.m-tabs .section-head h2 {
margin-bottom: 10px !important;
}
/* Remove the row gap above cards */
.tab-pane .row {
margin-left: -6px !important;
margin-right: -6px !important;
}
.tab-content {
margin-top: 16px !important;
}
/* Footer */
footer .col-lg-3,
footer .col-md-3 {
margin-bottom: 24px !important;
}
.dlab-social-icon li a {
width: 34px !important;
height: 34px !important;
}
/* Breadcrumb */
.dlab-bnr-inr {
min-height: auto !important;
}
.dlab-bnr-inr .dlab-bnr-inr-entry h1 {
font-size: 22px !important;
}
.breadcrumb-row {
padding: 6px 0 0 !important;
}
.breadcrumb-row ul li {
font-size: 13px !important;
}
/* Related products - 2 columns */
.related-products-section .col-lg-3 {
flex: 0 0 50% !important;
max-width: 50% !important;
}
/* Forms */
.form-inner {
padding: 20px !important;
}
/* Share buttons */
.col-sm-12.mt-4.mb-2 a {
font-size: 12px !important;
padding: 6px 12px !important;
margin-bottom: 8px !important;
display: inline-flex !important;
}
/* Pagination */
.pagination .page-numbers {
width: 34px !important;
height: 34px !important;
font-size: 13px !important;
}
/* Search overlay */
#ieSearchOverlay > div {
margin-top: 20px !important;
}
/* WhatsApp button */
.call_me {
width: 50px !important;
height: 50px !important;
bottom: 20px !important;
left: 20px !important;
}
.call_me i {
font-size: 24px !important;
}
}
/* Small phones */
@media (max-width: 480px) {
.product-hero-info h2 {
font-size: 20px !important;
}
.section-head h2 {
font-size: 20px !important;
}
.dlab-bnr-inr .dlab-bnr-inr-entry h1 {
font-size: 18px !important;
}
.related-products-section .col-lg-3 {
flex: 0 0 100% !important;
max-width: 100% !important;
}
.m-tabs .nav-tabs .nav-link {
font-size: 11px !important;
padding: 6px 10px !important;
}
}
/* ═══ Product Tabs ═══ */
.ie-product-tabs { margin-top: 32px; border: 1px solid #eee; border-radius: 10px; overflow: hidden; background: #fff; }
.ie-tab-nav {
display: flex; gap: 0; border-bottom: 2px solid #eee;
margin-bottom: 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.ie-tab-nav::-webkit-scrollbar { display: none; }
.ie-tab-btn {
font-family: "Outfit", sans-serif; font-size: 14px; font-weight: 600;
padding: 14px 28px; background: #f9fafb; border: none; border-bottom: 3px solid transparent;
color: #888; cursor: pointer; white-space: nowrap; transition: all 0.25s ease;
margin-bottom: -2px;
}
.ie-tab-btn:hover { color: #335882; }
.ie-tab-btn.active { color: #335882; border-bottom-color: #fc733a; background: #fff; }
.ie-tab-panel { display: none; padding: 24px; }
.ie-tab-panel.active { display: block; }
/* Specs Content - styles any table created via CMS editor */
.ie-specs-content { overflow-x: auto; }
.ie-specs-content table {
width: 100%; border-collapse: collapse; font-size: 14px;
font-family: "DM Sans", sans-serif; margin-bottom: 16px;
}
.ie-specs-content table th {
background: #335882; color: #fff; padding: 12px 16px;
font-family: "Outfit", sans-serif; font-weight: 600; font-size: 13px;
text-transform: uppercase; letter-spacing: 0.03em;
border: 1px solid #2a4a70;
}
.ie-specs-content table td {
padding: 11px 16px; border: 1px solid #eee; color: #444;
}
.ie-specs-content table tr:nth-child(even) { background: #f9fafb; }
.ie-specs-content table tr:hover { background: #f0f4f8; }
.ie-specs-content table td:first-child { font-weight: 600; color: #1a1a1a; }
.ie-specs-content h3, .ie-specs-content h4 {
font-family: "Outfit", sans-serif; margin: 20px 0 10px; color: #1a1a1a;
}
.ie-specs-content p { font-size: 14px; line-height: 1.7; color: #555; }
.ie-specs-content ul, .ie-specs-content ol { padding-left: 20px; margin-bottom: 12px; }
.ie-specs-content li { font-size: 14px; line-height: 1.7; color: #555; margin-bottom: 4px; }
.ie-specs-note {
font-size: 11.5px; color: #999; margin-top: 14px; font-style: italic; line-height: 1.5;
}
/* FAQ Accordion */
.ie-faq-list { display: flex; flex-direction: column; gap: 8px; }
.ie-faq-item {
border: 1px solid #eee; border-radius: 10px; overflow: hidden;
transition: box-shadow 0.25s ease;
}
.ie-faq-item:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.04); }
.ie-faq-question {
display: flex; align-items: center; justify-content: space-between;
width: 100%; padding: 14px 18px; background: #f9fafb; border: none;
cursor: pointer; text-align: left;
font-family: "Outfit", sans-serif; font-size: 14.5px; font-weight: 600;
color: #1a1a1a; transition: background 0.2s;
}
.ie-faq-question:hover { background: #f0f4f8; }
.ie-faq-icon {
font-size: 12px; color: #999; transition: transform 0.3s ease; flex-shrink: 0; margin-left: 12px;
}
.ie-faq-item.open .ie-faq-icon { transform: rotate(180deg); color: #fc733a; }
.ie-faq-answer {
max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease;
padding: 0 18px;
}
.ie-faq-item.open .ie-faq-answer {
max-height: 600px; padding: 14px 18px;
}
.ie-faq-answer p {
font-size: 14px; color: #555; line-height: 1.7; margin: 0;
font-family: "DM Sans", sans-serif;
}
/* FAQ Schema */
@media (max-width: 768px) {
.ie-tab-btn { padding: 12px 18px; font-size: 13px; }
.ie-spec-label, .ie-spec-value { padding: 9px 12px; font-size: 13px; }
.ie-faq-question { padding: 12px 14px; font-size: 13.5px; }
}
/* ═══ Mobile Responsive Fixes ═══ */
@media (max-width: 768px) {
/* Product tabs */
.ie-tab-nav { gap: 0; }
.ie-tab-btn { padding: 10px 14px !important; font-size: 12px !important; }
.ie-tab-panel { padding: 16px 12px !important; }
/* Product hero */
.product-hero { flex-direction: column !important; }
.product-hero-img { width: 100% !important; max-width: 100% !important; margin-bottom: 16px; }
.product-hero-info { width: 100% !important; }
/* Specs table */
.ie-specs-content table { font-size: 12px !important; }
.ie-specs-content table th,
.ie-specs-content table td { padding: 8px 10px !important; }
/* FAQ */
.ie-faq-question { padding: 12px 14px !important; font-size: 13px !important; }
.ie-faq-answer p { font-size: 13px !important; }
/* Footer */
.site-footer .text-right { text-align: left !important; margin-top: 4px; }
/* Blog related posts */
.col-md-4.col-sm-6 { flex: 0 0 100%; max-width: 100%; }
}
@media (max-width: 480px) {
.ie-tab-btn { padding: 8px 10px !important; font-size: 11px !important; }
.ie-tab-panel { padding: 14px 10px !important; }
.product-hero-info h2 { font-size: 20px !important; }
}
/* 8. Product image zoom */
.product-hero-img img {
cursor: zoom-in;
transition: transform 0.3s ease;
}
.product-hero-img img:hover {
transform: scale(1.02);
}
/* 9. Sticky enquiry CTA bar on product pages */
.ie-sticky-cta {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-top: 1px solid #eee;
box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
padding: 10px 0;
z-index: 9990;
display: none;
animation: slideUpCTA 0.3s ease;
}
@keyframes slideUpCTA {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.ie-sticky-cta-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.ie-sticky-cta-info {
font-family: 'Outfit', sans-serif;
font-size: 15px;
font-weight: 600;
color: #1a1a1a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ie-sticky-cta-info span {
font-size: 12px;
color: #888;
font-weight: 400;
display: block;
font-family: 'DM Sans', sans-serif;
}
.ie-sticky-cta-btns {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.ie-sticky-cta-btn {
padding: 10px 20px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
font-family: 'Outfit', sans-serif;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.2s;
border: none;
cursor: pointer;
}
.ie-sticky-cta-btn-primary {
background: #fc733a;
color: #fff !important;
}
.ie-sticky-cta-btn-primary:hover {
background: #e86530;
}
.ie-sticky-cta-btn-secondary {
background: #f0f4f8;
color: #335882 !important;
}
.ie-sticky-cta-btn-secondary:hover {
background: #e0e8f0;
}
@media (max-width: 768px) {
.ie-sticky-cta-info { display: none; }
.ie-sticky-cta-btns { width: 100%; }
.ie-sticky-cta-btn { flex: 1; justify-content: center; }
.ie-sticky-cta { padding: 8px 0; }
}
/* Sticky CTA: prevent overlap with footer */
.ie-sticky-cta ~ .site-footer,
.ie-sticky-cta ~ footer {
padding-bottom: 60px;
}
body { padding-bottom: 0; }
/* Back to top button above sticky CTA */
.scroltop {
z-index: 9995 !important;
bottom: 70px !important;
}
/* ═══ Blog Cards - Redesigned ═══ */
.ie-blog-card {
display: flex;
flex-direction: column;
height: 100%;
background: #fff;
border-radius: 10px;
overflow: hidden;
border: 1px solid #eef0f2;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
transition: all 0.3s ease;
text-decoration: none !important;
color: #1a1a1a !important;
}
.ie-blog-card:hover {
box-shadow: 0 8px 28px rgba(0,0,0,0.1);
transform: translateY(-4px);
border-color: #dce3ea;
}
.ie-blog-card-img {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 10;
background: #f5f7fa;
}
.ie-blog-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
display: block;
}
.ie-blog-card:hover .ie-blog-card-img img {
transform: scale(1.06);
}
.ie-blog-card-cat {
position: absolute;
bottom: 10px;
right: 10px;
background: #fc733a;
color: #fff !important;
font-family: 'Outfit', sans-serif;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 4px 10px;
border-radius: 4px;
}
.ie-blog-card-body {
padding: 16px 18px 18px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.ie-blog-card-meta {
display: flex;
gap: 14px;
margin-bottom: 10px;
font-family: 'DM Sans', sans-serif;
font-size: 12px;
color: #999;
}
.ie-blog-card-meta i {
margin-right: 4px;
color: #bbb;
}
.ie-blog-card-title {
font-family: 'Outfit', sans-serif !important;
font-size: 17px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
margin: 0 0 8px !important;
color: #1a1a1a !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ie-blog-card:hover .ie-blog-card-title {
color: #335882 !important;
}
.ie-blog-card-excerpt {
font-family: 'DM Sans', sans-serif !important;
font-size: 13.5px !important;
color: #666 !important;
line-height: 1.6 !important;
margin: 0 0 12px !important;
flex-grow: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ie-blog-card-link {
font-family: 'Outfit', sans-serif;
font-size: 13px;
font-weight: 600;
color: #fc733a !important;
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap 0.2s ease;
}
.ie-blog-card:hover .ie-blog-card-link {
gap: 10px;
}
.ie-blog-card-link i {
font-size: 11px;
transition: transform 0.2s ease;
}
.ie-blog-card:hover .ie-blog-card-link i {
transform: translateX(2px);
}
/* Mobile */
@media (max-width: 576px) {
.ie-blog-card-title { font-size: 15px !important; }
.ie-blog-card-body { padding: 14px 14px 16px; }
.ie-blog-card-excerpt { -webkit-line-clamp: 2; font-size: 13px !important; }
}
/* ═══ Blog Carousel Nav & Dots ═══ */
.latest-blogs1 .owl-nav {
position: absolute;
top: -60px;
right: 0;
margin: 0 !important;
display: flex;
gap: 8px;
}
.latest-blogs1 .owl-nav .owl-prev,
.latest-blogs1 .owl-nav .owl-next {
position: static !important;
transform: none !important;
width: 38px !important;
height: 38px !important;
line-height: 38px !important;
border-radius: 50% !important;
background: #f0f4f8 !important;
color: #335882 !important;
font-size: 16px !important;
margin: 0 !important;
display: flex !important;
align-items: center;
justify-content: center;
transition: all 0.2s !important;
border: 1px solid #e0e3e8 !important;
}
.latest-blogs1 .owl-nav .owl-prev:hover,
.latest-blogs1 .owl-nav .owl-next:hover {
background: #335882 !important;
color: #fff !important;
border-color: #335882 !important;
}
.latest-blogs1 .owl-dots {
display: none !important;
}
.latest-blogs1 .owl-dots .owl-dot span {
width: 8px !important;
height: 8px !important;
background: #d0d5dc !important;
border-radius: 50% !important;
margin: 0 4px !important;
transition: all 0.3s !important;
}
.latest-blogs1 .owl-dots .owl-dot.active span {
background: #335882 !important;
width: 24px !important;
border-radius: 4px !important;
}
/* Blog section title row - for nav positioning */
.latest-blogs1 {
position: relative;
}
@media (max-width: 768px) {
.latest-blogs1 .owl-nav {
position: static;
justify-content: center;
margin-top: 16px !important;
}
}
/* reCAPTCHA v3 badge - hidden (notice shown under submit buttons instead) */
.grecaptcha-badge {
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.recaptcha-notice {
font-size: 11px;
color: #999;
line-height: 1.5;
margin-top: 10px;
text-align: center;
}
.recaptcha-notice a {
color: #335882;
text-decoration: none;
}
.recaptcha-notice a:hover {
text-decoration: underline;
}
/* Captcha notice on dark form backgrounds - visible white text */
.form-inner .recaptcha-notice,
[style*="linear-gradient(135deg,#335882"] .recaptcha-notice,
[style*="linear-gradient(135deg, #335882"] .recaptcha-notice,
.ie-footer-form-wrap .recaptcha-notice {
color: rgba(255,255,255,0.65) !important;
}
.form-inner .recaptcha-notice a,
[style*="linear-gradient(135deg,#335882"] .recaptcha-notice a,
[style*="linear-gradient(135deg, #335882"] .recaptcha-notice a,
.ie-footer-form-wrap .recaptcha-notice a {
color: rgba(255,255,255,0.85) !important;
text-decoration: underline;
}
.form-inner .recaptcha-notice a:hover,
[style*="linear-gradient(135deg,#335882"] .recaptcha-notice a:hover,
[style*="linear-gradient(135deg, #335882"] .recaptcha-notice a:hover,
.ie-footer-form-wrap .recaptcha-notice a:hover {
color: #fff !important;
}
/* ═══ Detail Page Title (full-width row) ═══ */
.ie-detail-title {
margin-bottom: 24px;
}
.ie-detail-title h1,
.ie-detail-title h2 {
font-family: 'Outfit', sans-serif !important;
color: #1a1a1a !important;
margin: 0 0 4px 0 !important;
line-height: 1.15 !important;
}
.ie-detail-title h1 {
font-size: 36px !important;
font-weight: 700 !important;
}
.ie-detail-title h2 {
font-size: 26px !important;
font-weight: 600 !important;
color: #335882 !important;
margin-bottom: 14px !important;
}
.ie-detail-title h3, .ie-detail-title h4 {
font-family: 'Outfit', sans-serif !important;
font-size: 20px !important;
font-weight: 600 !important;
color: #335882 !important;
margin: 12px 0 6px !important;
}
.ie-detail-title p {
font-family: 'DM Sans', sans-serif;
font-size: 15px;
color: #555;
line-height: 1.7;
margin-bottom: 0;
}
.ie-detail-image {
margin-bottom: 22px;
}
.ie-detail-image img {
width: 100%;
height: auto;
border-radius: 10px;
object-fit: cover;
max-height: 420px;
}
/* Sub-sub menu (product detail) - H1 above product hero */
.product-hero-title {
margin-bottom: 18px;
}
.ie-detail-h1 {
font-family: 'Outfit', sans-serif !important;
font-size: 32px !important;
font-weight: 700 !important;
color: #1a1a1a !important;
line-height: 1.2 !important;
margin: 0 !important;
}
@media (max-width: 768px) {
.ie-detail-title h1 { font-size: 26px !important; }
.ie-detail-title h2 { font-size: 19px !important; }
.ie-detail-h1 { font-size: 24px !important; }
.ie-detail-image img { max-height: 280px; }
}
/* ═══ Testimonial Modal ═══ */
.modal.fade.show { background: rgba(0,0,0,0.55) !important; }
.modal-backdrop { background-color: #000 !important; }
.modal-backdrop.show { opacity: 0.6 !important; background: #000 !important; }
.ie-testi-modal { padding: 0 !important; z-index: 99999 !important; }
.ie-testi-modal .modal-dialog { max-width: 720px; margin: 2rem auto; padding: 0 16px; }
.ie-testi-modal-content {
background: #fff !important;
border: none !important;
border-radius: 14px !important;
box-shadow: 0 24px 64px rgba(0,0,0,0.3) !important;
overflow: hidden;
position: relative;
}
.ie-testi-modal-header {
background: linear-gradient(135deg, #1d3a5c 0%, #335882 100%);
padding: 24px 56px 24px 24px;
display: flex;
align-items: center;
gap: 16px;
color: #fff;
position: relative;
}
.ie-testi-modal-pic {
width: 60px; height: 60px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-family: 'Outfit', sans-serif;
font-size: 24px;
font-weight: 700;
border: 2px solid rgba(255,255,255,0.2);
}
.ie-testi-modal-pic img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.ie-testi-modal-meta { flex: 1; min-width: 0; }
.ie-testi-modal-name {
font-family: 'Outfit', sans-serif !important;
font-size: 18px !important;
font-weight: 700 !important;
color: #fff !important;
margin: 0 0 2px 0 !important;
line-height: 1.3 !important;
}
.ie-testi-modal-pos {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: rgba(255,255,255,0.75);
display: block;
}
.ie-testi-modal-close {
position: absolute;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.15);
color: #fff;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.ie-testi-modal-close:hover { background: rgba(255,255,255,0.3); }
.ie-testi-modal-body {
padding: 28px 28px 32px;
position: relative;
}
.ie-testi-quote {
color: #fc733a;
font-size: 24px;
opacity: 0.6;
margin-bottom: 8px;
display: inline-block;
}
.ie-testi-modal-body p {
font-family: 'DM Sans', sans-serif;
font-size: 15px;
color: #444;
line-height: 1.75;
margin: 0;
}
@media (max-width: 576px) {
.ie-testi-modal .modal-dialog { padding: 0 12px; margin: 1rem auto; }
.ie-testi-modal-header { padding: 18px 50px 18px 18px; gap: 12px; }
.ie-testi-modal-pic { width: 48px; height: 48px; font-size: 20px; }
.ie-testi-modal-name { font-size: 16px !important; }
.ie-testi-modal-pos { font-size: 12px; }
.ie-testi-modal-body { padding: 22px 22px 26px; }
.ie-testi-modal-body p { font-size: 14px; }
}
/* ═══ Testimonial Modal - Custom (no Bootstrap dependency) ═══ */
.ie-modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.7);
z-index: 99999;
overflow-y: auto;
padding: 40px 20px;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
cursor: pointer;
}
.ie-modal-overlay.active {
display: flex;
align-items: flex-start;
justify-content: center;
animation: ieFadeIn 0.2s ease;
}
@keyframes ieFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.ie-modal-box {
background: #fff;
border-radius: 14px;
box-shadow: 0 24px 64px rgba(0,0,0,0.4);
width: 100%;
max-width: 720px;
margin: auto;
overflow: hidden;
cursor: default;
animation: ieSlideUp 0.3s ease;
position: relative;
}
@keyframes ieSlideUp {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.ie-modal-header {
background: linear-gradient(135deg, #1d3a5c 0%, #335882 100%);
padding: 24px 60px 24px 24px;
display: flex;
align-items: center;
gap: 16px;
color: #fff;
position: relative;
}
.ie-modal-pic {
width: 60px; height: 60px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-family: 'Outfit', sans-serif;
font-size: 24px;
font-weight: 700;
border: 2px solid rgba(255,255,255,0.2);
}
.ie-modal-pic img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.ie-modal-meta { flex: 1; min-width: 0; }
.ie-modal-name {
font-family: 'Outfit', sans-serif;
font-size: 18px;
font-weight: 700;
color: #fff;
margin: 0 0 2px 0;
line-height: 1.3;
}
.ie-modal-pos {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: rgba(255,255,255,0.75);
display: block;
}
.ie-modal-close {
position: absolute;
top: 14px;
right: 14px;
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.15);
color: #fff;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
z-index: 2;
}
.ie-modal-close:hover { background: rgba(255,255,255,0.3); }
.ie-modal-body {
padding: 28px 28px 32px;
}
.ie-modal-quote {
color: #fc733a;
font-size: 26px;
opacity: 0.6;
margin-bottom: 10px;
display: inline-block;
}
.ie-modal-body p {
font-family: 'DM Sans', sans-serif;
font-size: 15px;
color: #444;
line-height: 1.75;
margin: 0;
}
body.ie-modal-open { overflow: hidden; }
@media (max-width: 576px) {
.ie-modal-overlay { padding: 20px 14px; }
.ie-modal-header { padding: 18px 50px 18px 16px; gap: 12px; }
.ie-modal-pic { width: 48px; height: 48px; font-size: 20px; }
.ie-modal-name { font-size: 16px; }
.ie-modal-pos { font-size: 12px; }
.ie-modal-body { padding: 22px 20px 26px; }
.ie-modal-body p { font-size: 14px; }
}
/* Allow blog card shadows to show outside the carousel */
.latest-blogs1 .owl-stage-outer {
overflow: visible !important;
padding-bottom: 16px !important;
}
.latest-blogs1 .owl-stage {
overflow: visible !important;
}
.latest-blogs1 .item {
padding: 4px 4px 12px !important;
}
.latest-blogs1 {
overflow: hidden;
padding-bottom: 4px;
}