/* ============================================================
Polytechnic Training Equipments — Bootstrap 5 Stylesheet
Modern redesign. Theme is fully controlled via CSS variables.
============================================================ */
/* ===== 1. THEME VARIABLES ===== */
/* Change these and the whole site re-themes. */
:root {
/* Brand colors — InsurancePress slate navy + cyan accent */
--pte-primary: #34495E;
--pte-primary-700: #2C3E50;
--pte-primary-300: #56708A;
--pte-secondary: #22B7D2;
--pte-secondary-700: #1A93A8;
--pte-secondary-300: #5BCFE3;
/* Tertiary accent — orange CTA highlight */
--pte-accent: #FF7A30;
--pte-accent-700: #E55F12;
--pte-accent-300: #FFA571;
/* Neutral system */
--pte-ink: #34495E;
--pte-body: #7A8896;
--pte-muted: #8B9BA9;
--pte-line: #E0E5EA;
--pte-surface: #ffffff;
--pte-soft: #F0F3F5;
--pte-soft-2: #E5EBF0;
/* Typography */
--pte-font: 'Open Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
/* Radii */
--pte-r-sm: 6px;
--pte-r-md: 12px;
--pte-r-lg: 18px;
--pte-r-pill: 999px;
/* Shadows — softer, neutral */
--pte-sh-1: 0 1px 3px rgba(52,73,94,.06), 0 1px 2px rgba(52,73,94,.04);
--pte-sh-2: 0 6px 18px rgba(52,73,94,.08), 0 2px 6px rgba(52,73,94,.05);
--pte-sh-3: 0 18px 40px rgba(52,73,94,.14);
}
/* === Alternate themes (uncomment any one in HTML === */
.theme-orange { --pte-primary:#0a3d62; --pte-primary-700:#072e4a; --pte-primary-300:#2a6491; --pte-secondary:#e67e22; --pte-secondary-700:#b85d10; --pte-secondary-300:#f0a45f; }
.theme-forest { --pte-primary:#1b5e20; --pte-primary-700:#0d3f12; --pte-primary-300:#4c8c50; --pte-secondary:#ff9800; --pte-secondary-700:#cc7a00; --pte-secondary-300:#ffb74d; }
.theme-maroon { --pte-primary:#7a0026; --pte-primary-700:#52001a; --pte-primary-300:#a64158; --pte-secondary:#f5b400; --pte-secondary-700:#c79100; --pte-secondary-300:#ffd54f; }
/* ===== 2. BASE ===== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: var(--pte-font);
color: var(--pte-body);
background: var(--pte-surface);
font-size: 16px;
line-height: 1.65;
margin: 0;
overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
font-family: var(--pte-font);
color: var(--pte-ink);
font-weight: 300;
line-height: 1.3;
margin-top: 0;
}
h1, .h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: -.3px; }
h2, .h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); letter-spacing: -.2px; }
h3, .h3 { font-size: 1.35rem; }
p { color: var(--pte-body); margin-bottom: 1rem; }
a { color: var(--pte-secondary); text-decoration: none; transition: color .2s; }
a:hover { color: var(--pte-secondary-700); }
img { max-width: 100%; height: auto; display: block; }
/* ===== 3. SECTION SCAFFOLDING ===== */
.pte-section { padding: 90px 0; }
.pte-section--sm { padding: 60px 0; }
.pte-section--soft { background: var(--pte-soft); }
.pte-section--dark { background: var(--pte-primary); color: #fff; }
.pte-section--dark p { color: rgba(255,255,255,.85); }
.pte-section--dark h1,.pte-section--dark h2,.pte-section--dark h3 { color: #fff; }
@media (max-width: 768px) { .pte-section { padding: 56px 0; } }
.pte-eyebrow {
display: inline-block;
font-size: 11px;
letter-spacing: 4px;
font-weight: 600;
text-transform: uppercase;
color: var(--pte-secondary);
margin-bottom: 14px;
}
.pte-heading {
font-size: clamp(1.8rem, 2.8vw, 2.4rem);
font-weight: 300;
color: var(--pte-ink);
margin-bottom: 14px;
letter-spacing: -.3px;
}
.pte-subhead {
max-width: 720px;
color: var(--pte-body);
margin: 0 auto;
font-size: 14px;
line-height: 1.8;
}
.pte-section--dark .pte-heading { color: #fff; }
.pte-section--dark .pte-subhead { color: rgba(255,255,255,.75); }
.pte-section--dark .pte-eyebrow { color: var(--pte-secondary-300); }
/* InsurancePress tab marker — cyan rounded-bottom tab in front of headings */
.pte-tab-heading {
display: flex;
align-items: flex-start;
gap: 18px;
margin-bottom: 20px;
}
.pte-tab-heading__tab {
background: var(--pte-secondary);
color: #fff;
width: 54px;
min-height: 70px;
border-radius: 0 0 14px 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 22px;
margin-top: -1px;
}
.pte-tab-heading__title {
font-weight: 300;
font-size: clamp(1.4rem, 2.4vw, 1.9rem);
color: var(--pte-ink);
margin: 18px 0 0;
line-height: 1.3;
}
/* ===== 4. HEADER (InsurancePress: single slate-navy block) ===== */
/* Thin top utility row — sits in normal flow, NOT fixed, so it scrolls away */
.topbar {
background: var(--pte-primary-700);
color: rgba(255,255,255,.65);
font-size: 13px;
padding: 9px 0;
position: relative;
z-index: 1031;
}
.topbar .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.topbar__left {
display: flex;
gap: 24px;
flex-wrap: wrap;
}
.topbar__item {
display: inline-flex;
align-items: center;
}
.topbar__item i {
color: rgba(255,255,255,.45);
margin-right: 8px;
}
.topbar__item--email a {
color: rgba(255,255,255,.65);
text-decoration: none;
}
.topbar__item--email a:hover {
color: var(--pte-secondary);
}
.topbar__right {
display: flex;
gap: 6px;
}
.topbar__right a {
color: rgba(255,255,255,.55);
font-size: 13px;
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: color .2s, background .2s;
}
.topbar__right a:hover {
color: #fff;
background: rgba(255,255,255,.08);
}
/* (heighthead spacer removed - sticky positioning makes it unnecessary) */
.headersec {
position: sticky;
top: 0;
left: 0; right: 0;
z-index: 1030;
background: var(--pte-primary);
box-shadow: 0 1px 0 rgba(255,255,255,.05);
transition: padding .25s, box-shadow .25s;
}
.headersec .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
padding-top: 14px;
padding-bottom: 14px;
}
.headersec.header_scroll {
box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.headersec.header_scroll .container {
padding-top: 10px;
padding-bottom: 10px;
}
.headersec .logo {
display: inline-block;
}
.headersec .logo img {
max-height: 50px;
width: auto;
transition: max-height .25s;
}
.headersec.header_scroll .logo img {
max-height: 42px;
}
/* Call us block — sits next to logo, divided */
.header-callus {
display: flex;
flex-direction: column;
padding-left: 22px;
border-left: 1px solid rgba(255,255,255,.15);
margin-right: auto;
}
.header-callus__label {
font-size: 12px;
color: rgba(255,255,255,.55);
line-height: 1.3;
margin-bottom: 2px;
}
.header-callus__phone a {
font-size: 16px;
color: #fff;
font-weight: 400;
text-decoration: none;
letter-spacing: .3px;
}
.header-callus__phone a:hover {
color: var(--pte-secondary);
}
.topmenu {
display: flex;
align-items: center;
gap: 18px;
}
.topmenu > ul {
list-style: none;
display: flex;
align-items: center;
gap: 6px;
margin: 0;
padding: 0;
}
.topmenu > ul > li { position: relative; }
.topmenu > ul > li > a {
display: block;
padding: 10px 18px;
color: rgba(255,255,255,.82);
font-weight: 400;
font-size: 15.5px;
text-transform: none;
letter-spacing: .2px;
transition: color .2s;
}
.topmenu > ul > li.active > a,
.topmenu > ul > li > a:hover {
color: #fff;
}
/* Pill CTA — large cyan rounded pill */
.header-cta {
display: inline-flex;
align-items: center;
background: var(--pte-secondary);
color: #fff !important;
padding: 14px 32px;
border-radius: var(--pte-r-pill);
font-size: 12px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
margin-left: 4px;
text-decoration: none;
transition: background .25s;
}
.header-cta:hover {
background: var(--pte-secondary-700);
color: #fff !important;
}
/* Dropdown submenu (Equipment) - dark themed */
.topmenu .sub_items {
list-style: none;
margin: 0;
padding: 8px 0;
position: absolute;
top: calc(100% + 4px);
left: 0;
min-width: 240px;
background: #fff;
box-shadow: var(--pte-sh-2);
border-radius: var(--pte-r-md);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: all .2s;
z-index: 100;
}
.topmenu .drop_menu:hover .sub_items {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.topmenu .sub_items li a {
display: block;
padding: 9px 20px;
color: var(--pte-body);
font-weight: 400;
font-size: 13px;
text-transform: none;
letter-spacing: 0;
}
.topmenu .sub_items li a:hover {
background: var(--pte-soft);
color: var(--pte-secondary);
}
/* Mobile nav toggler */
.navicon {
display: none;
width: 36px;
height: 36px;
cursor: pointer;
align-items: center;
justify-content: center;
position: relative;
}
.navicon span,
.navicon span::before,
.navicon span::after {
content: '';
position: absolute;
width: 24px;
height: 2px;
background: #fff;
transition: transform .3s, top .3s;
}
.navicon span::before { top: -7px; left: 0; }
.navicon span::after { top: 7px; left: 0; }
.navicon.active span { background: transparent; }
.navicon.active span::before { top: 0; transform: rotate(45deg); }
.navicon.active span::after { top: 0; transform: rotate(-45deg); }
@media (max-width: 1199px) {
.header-callus { display: none; }
}
@media (max-width: 991px) {
.topbar { display: none; }
.navicon { display: flex; }
.header-cta { display: none; }
.topmenu {
position: fixed;
top: 74px;
right: -100%;
bottom: 0;
width: 80%;
max-width: 340px;
background: var(--pte-primary);
overflow-y: auto;
transition: right .3s;
padding: 20px;
flex-direction: column;
align-items: stretch;
}
.topmenu.showmenu { right: 0; }
.topmenu > ul {
flex-direction: column;
align-items: stretch;
gap: 0;
width: 100%;
}
.topmenu > ul > li {
border-bottom: 1px solid rgba(255,255,255,.08);
}
.topmenu > ul > li > a {
padding: 14px 8px;
}
.topmenu .sub_items {
position: static;
box-shadow: none;
opacity: 1;
visibility: visible;
transform: none;
display: none;
padding-left: 14px;
background: transparent;
}
.topmenu .sub_items li a {
color: rgba(255,255,255,.7);
padding: 8px 12px;
}
.topmenu .sub_items li a:hover {
background: rgba(255,255,255,.06);
color: #fff;
}
.topmenu .ddclick {
position: absolute;
right: 10px;
top: 12px;
width: 26px;
height: 26px;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 16px;
transition: transform .25s;
}
.topmenu .ddclick.active { transform: rotate(180deg); }
}
/* ===== 4b. HERO BANNER (Owl Carousel + circle overlay) ===== */
.hero-banner {
position: relative;
}
.hero-banner .homebanner .bitem {
position: relative;
overflow: hidden;
}
.hero-banner .hero-bg-img {
width: 100%;
height: auto;
min-height: 384px;
max-height: 512px;
object-fit: cover;
display: block;
}
.hero-banner .hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(95deg, rgba(44,62,80,.88) 0%, rgba(52,73,94,.65) 45%, rgba(52,73,94,.3) 75%, rgba(52,73,94,.15) 100%);
display: flex;
align-items: center;
}
.hero-banner .hero-overlay .container {
position: relative;
height: 100%;
display: flex;
align-items: center;
}
/* Hero card — left-aligned editorial content card on top of banner image */
.hero-card {
position: relative;
z-index: 2;
max-width: 580px;
color: #fff;
padding: 8px 0;
}
.hero-card__rule {
display: inline-flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
}
.hero-card__rule::before {
content: '';
width: 50px;
height: 2px;
background: var(--pte-secondary);
flex-shrink: 0;
}
.hero-card__eyebrow {
color: var(--pte-secondary);
font-size: 12px;
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 600;
}
.hero-card__title {
color: #fff;
font-size: clamp(2rem, 3.6vw, 3rem);
font-weight: 300;
line-height: 1.15;
margin: 0 0 20px;
letter-spacing: -.5px;
}
.hero-card__title strong {
color: var(--pte-secondary);
font-weight: 600;
}
.hero-card__brief {
color: rgba(255,255,255,.9);
font-size: 15px;
font-weight: 300;
line-height: 1.7;
margin: 0 0 28px;
max-width: 520px;
}
.hero-card__ctas {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.hero-card__btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 30px;
border-radius: var(--pte-r-pill);
font-size: 12px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.hero-card__btn--primary {
background: var(--pte-accent);
color: #fff !important;
}
.hero-card__btn--primary:hover {
background: var(--pte-accent-700);
color: #fff !important;
transform: translateY(-2px);
}
.hero-card__btn--secondary {
background: transparent;
color: #fff !important;
border: 1px solid rgba(255,255,255,.45);
}
.hero-card__btn--secondary:hover {
background: #fff;
color: var(--pte-primary) !important;
border-color: #fff;
}
/* Quote tab bottom-right */
.hero-quote-tab {
position: absolute;
right: 6%;
bottom: 0;
background: var(--pte-secondary);
color: #fff !important;
padding: 16px 36px;
border-radius: 0;
font-size: 16px;
font-weight: 400;
letter-spacing: .3px;
text-decoration: none;
z-index: 5;
box-shadow: 0 -6px 20px rgba(34,183,210,.25);
transition: background .25s, transform .25s;
}
.hero-quote-tab:hover {
background: var(--pte-secondary-700);
color: #fff !important;
transform: translateY(-3px);
}
.hero-quote-tab i {
margin-right: 10px;
}
/* Owl carousel custom arrow buttons */
.hero-banner .owl-nav {
position: absolute;
inset: 0;
pointer-events: none;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.hero-banner .owl-nav button.owl-prev,
.hero-banner .owl-nav button.owl-next {
pointer-events: auto;
background: transparent !important;
color: rgba(255,255,255,.75) !important;
font-size: 48px !important;
line-height: 1 !important;
width: 48px;
height: 48px;
display: flex !important;
align-items: center;
justify-content: center;
transition: color .25s, transform .25s;
}
.hero-banner .owl-nav button.owl-prev:hover,
.hero-banner .owl-nav button.owl-next:hover {
color: #fff !important;
transform: scale(1.15);
background: transparent !important;
}
.hero-banner .owl-nav button span {
font-size: 48px;
line-height: 1;
}
@media (max-width: 991px) {
.hero-card { max-width: 90%; }
.hero-card__title { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.hero-card__brief { font-size: 14px; }
.hero-banner .hero-bg-img { min-height: 360px; }
}
@media (max-width: 640px) {
.hero-banner .hero-overlay {
background: linear-gradient(180deg, rgba(44,62,80,.55) 0%, rgba(52,73,94,.85) 100%);
}
.hero-card { max-width: 100%; padding: 8px 4px; }
.hero-card__rule { margin-bottom: 12px; }
.hero-card__rule::before { width: 36px; }
.hero-card__eyebrow { font-size: 11px; letter-spacing: 2px; }
.hero-card__title { font-size: 1.5rem; margin-bottom: 14px; }
.hero-card__brief { font-size: 13px; line-height: 1.6; margin-bottom: 20px; }
.hero-card__btn { padding: 12px 22px; font-size: 11px; letter-spacing: 1.5px; }
.hero-quote-tab {
right: 50%;
transform: translateX(50%);
font-size: 13px;
padding: 10px 22px;
}
.hero-quote-tab:hover {
transform: translateX(50%) translateY(-3px);
}
}
/* ===== 5. BUTTONS (InsurancePress: big cyan pills, letter-spaced) ===== */
.btn-pte,
.morebtn,
.site-btn,
.viewbtn,
.submit-btn,
.save_form {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 36px;
border-radius: var(--pte-r-pill);
background: var(--pte-secondary);
color: #fff !important;
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
border: none;
cursor: pointer;
text-decoration: none;
transition: background .25s;
}
.btn-pte:hover,
.morebtn:hover,
.site-btn:hover,
.viewbtn:hover,
.submit-btn:hover,
.save_form:hover {
background: var(--pte-secondary-700);
color: #fff !important;
}
.btn-pte-outline {
background: transparent;
border: 1px solid #fff;
color: #fff !important;
}
.btn-pte-outline:hover { background: #fff; color: var(--pte-primary) !important; }
.btn-pte-ghost {
background: transparent;
color: var(--pte-secondary) !important;
border: 1px solid var(--pte-secondary);
}
.btn-pte-ghost:hover {
background: var(--pte-secondary);
color: #fff !important;
}
/* ===== 6. HOME BANNER (Owl Carousel - structure untouched) ===== */
.homebanner { position: relative; }
.homebanner .bitem img {
width: 100%;
height: auto;
display: block;
}
/* ===== 7. ABOUT (HOME) ===== */
.aboutsec { padding: 80px 0; }
.aboutsec.mainsec { padding: 90px 0; }
.aboutsec.mainsec .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.aboutcont {
position: relative;
min-height: 420px;
}
.aboutcont .img1 {
width: 80%;
border-radius: var(--pte-r-md);
overflow: hidden;
box-shadow: var(--pte-sh-2);
}
.aboutcont .img1 img { width: 100%; height: auto; }
.aboutcont .img2 {
position: absolute;
bottom: -20px;
right: 0;
width: 55%;
border-radius: var(--pte-r-md);
overflow: hidden;
border: 6px solid #fff;
box-shadow: var(--pte-sh-3);
}
.aboutcont .img2 img { width: 100%; height: auto; }
.aboutcontents h1, .aboutcontents h2 { margin-bottom: 16px; }
.aboutcontents .morebtn { margin-top: 18px; }
@media (max-width: 991px) {
.aboutsec.mainsec .container {
grid-template-columns: 1fr;
gap: 30px;
}
.aboutcont { min-height: auto; }
.aboutcont .img1 { width: 100%; }
.aboutcont .img2 { display: none; }
}
/* ===== 8. STATS BAR ===== */
.pte-stats {
background: linear-gradient(135deg, var(--pte-primary) 0%, var(--pte-primary-700) 100%);
padding: 50px 0;
color: #fff;
position: relative;
overflow: hidden;
}
.pte-stats::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 400px;
height: 400px;
background: rgba(255,255,255,.04);
border-radius: 50%;
}
.pte-stat { text-align: center; padding: 12px; position: relative; z-index: 2; }
.pte-stat__num {
font-size: clamp(1.8rem, 4vw, 2.6rem);
font-weight: 800;
color: var(--pte-secondary-300);
line-height: 1;
}
.pte-stat__label {
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 12px;
color: rgba(255,255,255,.85);
margin-top: 8px;
}
/* ===== 9. FEATURED PRODUCTS (preserves .homeprolist) ===== */
.heading2 {
font-size: clamp(1.8rem, 2.8vw, 2.4rem);
font-weight: 300;
color: var(--pte-ink);
text-align: center;
margin-bottom: 50px;
letter-spacing: -.3px;
}
.homeprolist ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.homeprolist .productbox {
display: flex;
flex-direction: column;
background: #fff;
border-radius: var(--pte-r-lg);
overflow: hidden;
box-shadow: none;
border: 1px solid var(--pte-line);
transition: transform .3s, box-shadow .3s, border-color .3s;
height: 100%;
text-decoration: none;
}
.homeprolist .productbox:hover {
transform: translateY(-6px);
box-shadow: var(--pte-sh-2);
border-color: var(--pte-secondary-300);
}
.homeprolist .productimg {
background: var(--pte-soft);
overflow: hidden;
aspect-ratio: 4 / 3;
}
.homeprolist .productimg img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .5s;
}
.homeprolist .productbox:hover .productimg img { transform: scale(1.04); }
.homeprolist .procont {
padding: 22px 24px 24px;
display: flex;
flex-direction: column;
flex: 1;
}
.homeprolist .producttitle {
font-size: 1.2rem;
font-weight: 700;
color: var(--pte-ink);
margin: 0 0 8px;
line-height: 1.3;
letter-spacing: -.2px;
}
.homeprolist .productbox:hover .producttitle { color: var(--pte-secondary); }
.homeprolist .productbrief {
color: var(--pte-body);
font-size: 14px;
line-height: 1.6;
margin: 0 0 16px;
flex: 1;
}
.homeprolist .productreadmore {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--pte-secondary);
font-size: 12px;
font-weight: 700;
letter-spacing: 1.8px;
text-transform: uppercase;
text-decoration: none;
margin-top: auto;
transition: gap .2s, color .2s;
align-self: flex-start;
}
.homeprolist .productbox:hover .productreadmore {
gap: 14px;
color: var(--pte-secondary-700);
}
.homeprolist .productpill {
display: inline-block;
background: var(--pte-secondary);
color: #fff;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 600;
padding: 7px 18px;
border-radius: var(--pte-r-pill);
margin-bottom: 16px;
align-self: flex-start;
}
@media (max-width: 991px) {
.homeprolist ul { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.homeprolist ul { grid-template-columns: 1fr; gap: 14px; }
}
/* ===== 10. TENDER / PROCUREMENT / SUPPLY CARD SECTIONS ===== */
.pte-cap-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
@media (max-width: 991px) { .pte-cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .pte-cap-grid { grid-template-columns: 1fr; } }
.pte-cap {
background: #fff;
padding: 32px 24px;
border-radius: var(--pte-r-md);
box-shadow: var(--pte-sh-1);
border: 1px solid var(--pte-line);
text-align: center;
transition: transform .3s, box-shadow .3s;
position: relative;
overflow: hidden;
}
.pte-cap::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 4px;
background: var(--pte-secondary);
transform: scaleX(0);
transform-origin: left;
transition: transform .3s;
}
.pte-cap:hover { transform: translateY(-8px); box-shadow: var(--pte-sh-2); }
.pte-cap:hover::before { transform: scaleX(1); }
.pte-cap__icon {
width: 72px; height: 72px;
margin: 0 auto 18px;
border-radius: 50%;
background: linear-gradient(135deg, var(--pte-primary), var(--pte-primary-300));
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 28px;
transition: background .3s, transform .5s;
}
.pte-cap:hover .pte-cap__icon {
background: linear-gradient(135deg, var(--pte-secondary), var(--pte-secondary-300));
transform: rotateY(180deg);
}
.pte-cap h3 {
font-size: 1.15rem;
font-weight: 400;
color: var(--pte-ink);
margin-bottom: 10px;
}
.pte-cap p {
font-size: .9rem;
color: var(--pte-body);
margin: 0;
}
/* Procurement steps */
.pte-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
position: relative;
}
@media (max-width: 991px) { .pte-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .pte-steps { grid-template-columns: 1fr; } }
.pte-step {
text-align: center;
padding: 24px 18px;
color: #fff;
position: relative;
}
.pte-step__num {
width: 64px; height: 64px;
margin: 0 auto 16px;
border-radius: 50%;
background: var(--pte-secondary);
color: #fff;
font-size: 26px;
font-weight: 800;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 22px rgba(34,183,210,.35);
}
.pte-step h3 { color: #fff; font-size: 1.15rem; font-weight: 400; margin-bottom: 8px; }
.pte-step p { color: rgba(255,255,255,.8); font-size: .9rem; margin: 0; }
/* Supply category cards */
.pte-supply {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
@media (max-width: 991px) { .pte-supply { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .pte-supply { grid-template-columns: 1fr; } }
.pte-supply__card {
background: #fff;
border-radius: var(--pte-r-md);
overflow: hidden;
box-shadow: var(--pte-sh-1);
border-left: 4px solid var(--pte-secondary);
transition: transform .3s, box-shadow .3s, border-color .3s;
height: 100%;
}
.pte-supply__card:hover {
transform: translateY(-6px);
box-shadow: var(--pte-sh-2);
border-left-color: var(--pte-primary);
}
.pte-supply__img {
height: 180px;
overflow: hidden;
background: var(--pte-soft);
}
.pte-supply__img img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .5s;
}
.pte-supply__card:hover .pte-supply__img img { transform: scale(1.06); }
.pte-supply__body { padding: 22px; }
.pte-supply__body h3 {
font-size: 1.15rem;
font-weight: 400;
color: var(--pte-ink);
margin-bottom: 10px;
}
.pte-supply__body p {
font-size: .88rem;
color: var(--pte-body);
margin: 0;
}
/* Trust card (Why Choose) */
.pte-trust {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
@media (max-width: 991px) { .pte-trust { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .pte-trust { grid-template-columns: 1fr; } }
.pte-trust__card {
background: #fff;
padding: 28px 22px;
border-radius: var(--pte-r-md);
box-shadow: var(--pte-sh-1);
border-bottom: 4px solid transparent;
transition: transform .3s, box-shadow .3s, border-color .3s;
height: 100%;
}
.pte-trust__card:hover {
transform: translateY(-6px);
box-shadow: var(--pte-sh-2);
border-bottom-color: var(--pte-secondary);
}
.pte-trust__icon {
width: 56px; height: 56px;
border-radius: var(--pte-r-md);
background: rgba(34,183,210,.10);
color: var(--pte-secondary);
display: flex; align-items: center; justify-content: center;
font-size: 24px;
margin-bottom: 16px;
}
.pte-trust__card h3 {
font-size: 1.15rem;
font-weight: 400;
color: var(--pte-ink);
margin-bottom: 10px;
}
.pte-trust__card p { font-size: .9rem; color: var(--pte-body); margin: 0; line-height: 1.7; }
/* Industry chips */
.pte-chips {
display: flex; flex-wrap: wrap; gap: 10px;
justify-content: center;
margin-top: 40px;
}
.pte-chip {
display: inline-block;
padding: 9px 22px;
border-radius: var(--pte-r-pill);
background: #fff;
color: var(--pte-ink);
font-weight: 400;
font-size: 13px;
border: 1px solid var(--pte-line);
transition: background .25s, color .25s, border-color .25s;
}
.pte-chip:hover {
background: var(--pte-secondary);
color: #fff;
border-color: var(--pte-secondary);
}
/* Category list with counts (used in blog sidebar / SEO sections) */
.pte-catlist {
list-style: none;
padding: 0;
margin: 14px 0 0;
}
.pte-catlist li {
padding: 12px 0;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--pte-line);
font-size: 14px;
}
.pte-catlist li:last-child { border-bottom: 0; }
.pte-catlist li a {
color: var(--pte-ink);
text-decoration: none;
transition: color .2s;
flex: 1;
}
.pte-catlist li a::before {
content: '\25B6';
color: var(--pte-secondary);
font-size: 9px;
margin-right: 12px;
vertical-align: 2px;
}
.pte-catlist li a:hover { color: var(--pte-secondary); }
.pte-catlist li .cnt {
color: var(--pte-secondary);
font-size: 13px;
}
/* Sidebar widget heading + search */
.pte-widget { margin-bottom: 32px; }
.pte-widget h3 {
font-weight: 300;
font-size: 22px;
color: var(--pte-ink);
margin: 0 0 16px;
letter-spacing: -.2px;
}
.pte-searchbar {
display: flex;
width: 100%;
}
.pte-searchbar input {
flex: 1;
background: var(--pte-soft);
border: 0;
padding: 13px 18px;
font-size: 13px;
border-radius: 24px 0 0 24px;
font-family: inherit;
color: var(--pte-ink);
outline: none;
}
.pte-searchbar input:focus {
background: var(--pte-soft-2);
}
.pte-searchbar input::placeholder { color: var(--pte-muted); }
.pte-searchbar button {
background: var(--pte-secondary);
border: 0;
color: #fff;
padding: 0 22px;
border-radius: 0 24px 24px 0;
cursor: pointer;
font-size: 14px;
transition: background .25s;
}
.pte-searchbar button:hover { background: var(--pte-secondary-700); }
/* FAQ accordion (Bootstrap 5 base) */
.faq-accordion .accordion-item {
border: 1px solid var(--pte-line) !important;
border-radius: var(--pte-r-md) !important;
margin-bottom: 12px;
overflow: hidden;
box-shadow: var(--pte-sh-1);
}
.faq-accordion .accordion-button {
background: #fff;
color: var(--pte-ink);
font-weight: 700;
padding: 18px 22px;
box-shadow: none !important;
}
.faq-accordion .accordion-button:not(.collapsed) {
background: var(--pte-primary);
color: #fff;
}
.faq-accordion .accordion-button:not(.collapsed)::after {
filter: brightness(0) invert(1);
}
.faq-accordion .accordion-body {
padding: 18px 22px;
background: var(--pte-soft);
color: var(--pte-body);
}
/* ===== 11. CONTACT FORM SECTION (preserves .formssec) ===== */
.formssec {
padding: 80px 0;
background: linear-gradient(135deg, var(--pte-primary) 0%, var(--pte-primary-700) 100%);
position: relative;
overflow: hidden;
}
.formssec::before {
content: '';
position: absolute;
top: -30%;
right: -10%;
width: 500px;
height: 500px;
background: rgba(255,255,255,.03);
border-radius: 50%;
}
.formssec .formsec {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
position: relative;
z-index: 2;
}
.homeform {
background: rgba(255,255,255,.08);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.12);
border-radius: var(--pte-r-md);
padding: 32px;
}
.homeform .title { color: #fff; font-weight: 800; }
.homeform .sheading { margin-bottom: 20px; }
.homeform .form-floating > .form-control,
.homeform .form-control {
background: rgba(255,255,255,.95);
border: 1px solid rgba(255,255,255,.3);
border-radius: var(--pte-r-sm);
padding: 14px 16px;
color: var(--pte-ink);
font-size: .95rem;
}
.homeform .form-control:focus {
background: #fff;
border-color: var(--pte-secondary);
box-shadow: 0 0 0 3px rgba(34,183,210,.18);
}
/* Feature icons next to form */
.iconsec2 .hdata > ul {
list-style: none; padding: 0; margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.iconsec2 .hdata > ul > li {
background: rgba(255,255,255,.08);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.12);
border-radius: var(--pte-r-md);
padding: 22px;
display: flex;
gap: 14px;
align-items: flex-start;
transition: transform .25s, background .25s;
}
.iconsec2 .hdata > ul > li:hover {
transform: translateY(-3px);
background: rgba(255,255,255,.12);
}
.iconsec2 .hdata-img .himg {
width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
}
.iconsec2 .hdata-img img { max-width: 48px; max-height: 48px; }
.iconsec2 .hdata .title {
color: #fff;
font-weight: 700;
font-size: 1rem;
margin-bottom: 4px;
}
.iconsec2 .hdata p {
color: rgba(255,255,255,.78);
font-size: .85rem;
margin: 0;
}
@media (max-width: 991px) {
.formssec .formsec { grid-template-columns: 1fr; }
.iconsec2 .hdata > ul { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
.iconsec2 .hdata > ul { grid-template-columns: 1fr; }
}
/* ===== 12. NEWS / BLOG SECTION ===== */
.newssec { padding: 80px 0; background: var(--pte-soft); }
.blogslide .blogitem { padding: 0 6px; }
.newsbox {
display: block;
background: #fff;
border-radius: var(--pte-r-md);
overflow: hidden;
border: 1px solid var(--pte-line);
box-shadow: var(--pte-sh-1);
transition: transform .3s, box-shadow .3s;
height: 100%;
}
.newsbox:hover {
transform: translateY(-6px);
box-shadow: var(--pte-sh-2);
}
.newsbox .newsimg {
height: 200px;
overflow: hidden;
background: var(--pte-soft);
}
.newsbox .newsimg img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .5s;
}
.newsbox:hover .newsimg img { transform: scale(1.05); }
.newscontent { padding: 20px; }
.newsbtn p {
display: inline-block;
background: var(--pte-secondary);
color: #fff;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
padding: 4px 12px;
border-radius: var(--pte-r-pill);
margin: 0 0 10px;
}
.blogtitle {
font-weight: 700;
color: var(--pte-ink);
margin-bottom: 10px;
line-height: 1.35;
}
.blogbrief {
color: var(--pte-body);
font-size: .9rem;
margin-bottom: 14px;
}
.morebtn {
/* Used both as a btn AND a small "read more" inside cards. Default = button look. */
}
.newscontent .morebtn {
background: transparent;
padding: 0;
color: var(--pte-secondary) !important;
text-transform: uppercase;
font-size: 12px;
font-weight: 700;
letter-spacing: .5px;
}
.newscontent .morebtn:hover {
background: transparent;
color: var(--pte-secondary-700) !important;
transform: none;
box-shadow: none;
}
/* ===== 13. INNER PAGE BANNER (light gray, InsurancePress style) ===== */
.innerbanner {
background: var(--pte-soft);
color: var(--pte-ink);
padding: 60px 0 50px;
margin-top: 0;
position: relative;
overflow: hidden;
}
.innerbanner .container { position: relative; z-index: 2; }
.innerbanner h1, .innerbanner .h1 {
color: var(--pte-ink);
font-size: clamp(1.8rem, 3.4vw, 2.4rem);
font-weight: 300;
margin: 0 0 8px;
letter-spacing: -.3px;
}
/* Breadcrumb — Home > Page (cyan link, gray current) */
.innerbanner .breadcrumb {
margin-top: 8px;
margin-bottom: 0;
padding: 0;
background: transparent;
font-size: 13px;
}
.innerbanner .breadcrumb-item {
color: var(--pte-muted);
}
.innerbanner .breadcrumb-item a {
color: var(--pte-secondary);
text-decoration: none;
}
.innerbanner .breadcrumb-item a:hover { color: var(--pte-secondary-700); }
.innerbanner .breadcrumb-item.active { color: var(--pte-muted); }
.innerbanner .breadcrumb-item + .breadcrumb-item::before {
content: ">";
color: var(--pte-muted);
padding: 0 .5rem;
}
@media (max-width: 991px) {
.innerbanner { margin-top: 0; padding: 40px 0 32px; }
}
/* ===== 14. INNER PAGES CONTENT ===== */
.innerpages { padding: 70px 0; }
.innerpages h1, .innerpages h2 { color: var(--pte-ink); margin-bottom: 16px; }
.aboutinner .aboutimg {
border-radius: var(--pte-r-md);
overflow: hidden;
box-shadow: var(--pte-sh-2);
margin-bottom: 25px;
}
/* Contacts page form */
.formbox {
background: #fff;
border-radius: var(--pte-r-md);
padding: 32px;
box-shadow: var(--pte-sh-1);
border: 1px solid var(--pte-line);
}
.formbox .subtext {
color: var(--pte-muted);
margin-bottom: 18px;
}
.formbox ul { list-style: none; padding: 0; margin: 0; }
.formbox ul li { margin-bottom: 14px; }
.formbox .form-control {
width: 100%;
border: 1px solid var(--pte-line);
border-radius: var(--pte-r-sm);
padding: 12px 16px;
font-size: .95rem;
transition: border-color .2s, box-shadow .2s;
}
.formbox .form-control:focus {
border-color: var(--pte-secondary);
box-shadow: 0 0 0 3px rgba(34,183,210,.15);
outline: none;
}
.captcha {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.captcha .ctext {
background: var(--pte-soft);
padding: 10px 16px;
border-radius: var(--pte-r-sm);
font-weight: 700;
color: var(--pte-primary);
font-size: 1rem;
}
/* ===== 14b. PRODUCTS PAGES (listing + detail) ===== */
/* Sub-category card on products listing page (reference: cyan pill + Read More link) */
.productpage .productsb,
.search .productsb,
.productsb {
background: #fff;
border-radius: var(--pte-r-lg);
overflow: hidden;
box-shadow: none;
border: 1px solid var(--pte-line);
margin-bottom: 0;
transition: transform .25s, box-shadow .25s, border-color .25s;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
}
.productsb:hover {
transform: translateY(-4px);
box-shadow: var(--pte-sh-2);
border-color: var(--pte-secondary-300);
}
.productsb .productimage {
display: block;
overflow: hidden;
background: var(--pte-soft);
aspect-ratio: 4 / 3;
position: relative;
}
.productsb .productimage img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s;
}
.productsb:hover .productimage img { transform: scale(1.04); }
.productsb .product_name {
padding: 22px 24px 24px;
text-align: left;
display: flex;
flex-direction: column;
flex: 1;
}
.productsb .product_name a {
color: var(--pte-ink);
text-decoration: none;
}
.productsb .product_name a h3,
.productsb .product_name a span {
font-size: 1.25rem;
margin: 0 0 8px;
font-weight: 700;
color: var(--pte-ink);
line-height: 1.3;
letter-spacing: -.2px;
}
.productsb .product_name a:hover h3,
.productsb .product_name a:hover span { color: var(--pte-secondary); }
/* Eyebrow becomes a cyan filled pill (matches reference) */
.productsb__eyebrow {
display: inline-block;
background: var(--pte-secondary);
color: #fff;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 600;
padding: 7px 18px;
border-radius: var(--pte-r-pill);
margin-bottom: 16px;
align-self: flex-start;
}
/* Brief description under title */
.productsb__brief {
color: var(--pte-body);
font-size: 15px;
line-height: 1.6;
margin: 0 0 18px;
flex: 1;
}
/* READ MORE link at bottom of card */
.productsb__readmore {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--pte-secondary);
font-size: 12px;
font-weight: 700;
letter-spacing: 1.8px;
text-transform: uppercase;
text-decoration: none;
margin-top: auto;
transition: gap .2s, color .2s;
align-self: flex-start;
}
.productsb__readmore:hover {
gap: 14px;
color: var(--pte-secondary-700);
}
.productsb__readmore i {
font-size: 14px;
}
/* Hover overlay with View / Enquire buttons */
.productsb__cta {
position: absolute;
inset: 0;
background: rgba(52,73,94,.92);
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
opacity: 0;
transition: opacity .25s;
pointer-events: none;
}
.productsb:hover .productsb__cta {
opacity: 1;
pointer-events: auto;
}
.productsb__cta-btn {
display: inline-flex;
align-items: center;
background: var(--pte-secondary);
color: #fff !important;
padding: 10px 22px;
border-radius: var(--pte-r-pill);
font-size: 11px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
text-decoration: none;
transition: background .25s;
}
.productsb__cta-btn:hover {
background: var(--pte-secondary-700);
color: #fff !important;
}
.productsb__cta-btn--ghost {
background: transparent;
border: 1px solid #fff;
}
.productsb__cta-btn--ghost:hover {
background: #fff;
color: var(--pte-primary) !important;
}
/* "Featured" badge */
.productsb__badge {
position: absolute;
top: 14px;
left: 14px;
background: var(--pte-secondary);
color: #fff;
padding: 5px 12px;
font-size: 10px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
border-radius: 4px;
z-index: 2;
box-shadow: 0 4px 12px rgba(34,183,210,.3);
}
/* Featured card - horizontal layout spanning 2 columns */
.productsb--featured {
flex-direction: row;
background: linear-gradient(90deg, var(--pte-soft) 0%, #fff 50%);
}
.productsb--featured .productimage {
width: 45%;
aspect-ratio: auto;
min-height: 280px;
flex-shrink: 0;
}
.productsb--featured .product_name {
width: 55%;
padding: 32px;
text-align: left;
display: flex;
flex-direction: column;
justify-content: center;
}
.productsb--featured .product_name h3 {
font-size: 1.4rem;
font-weight: 300;
color: var(--pte-ink);
margin: 4px 0 12px;
letter-spacing: -.2px;
}
.productsb--featured .product_name h3 a {
color: var(--pte-ink) !important;
font-size: inherit !important;
font-weight: 300 !important;
}
.productsb--featured .product_name h3 a:hover {
color: var(--pte-secondary) !important;
}
.productsb__brief {
color: var(--pte-body);
font-size: 13px;
line-height: 1.7;
margin: 0 0 18px;
}
@media (max-width: 768px) {
.productsb--featured { flex-direction: column; background: #fff; }
.productsb--featured .productimage,
.productsb--featured .product_name {
width: 100%;
}
.productsb--featured .productimage {
aspect-ratio: 1 / 1;
min-height: 0;
}
.productsb--featured .product_name {
padding: 20px;
text-align: center;
}
.productsb--featured .product_name h3 { font-size: 1.15rem; }
}
/* Product detail row card */
.details.bg-color {
background: #fff;
border-radius: var(--pte-r-md);
padding: 22px;
margin-bottom: 22px;
box-shadow: var(--pte-sh-1);
border: 1px solid var(--pte-line);
transition: transform .25s, box-shadow .25s;
}
.details.bg-color:hover {
transform: translateY(-3px);
box-shadow: var(--pte-sh-2);
}
.details.bg-color .img-thumbnail {
border-radius: var(--pte-r-sm);
border: 1px solid var(--pte-line);
padding: 6px;
background: var(--pte-soft);
}
.details_name h3 {
font-size: 1.15rem;
margin-bottom: 8px;
}
.details_name h3 a {
color: var(--pte-primary);
font-weight: 700;
}
.details_name h3 a:hover { color: var(--pte-secondary); }
.details_name .disc1 {
color: var(--pte-body);
font-size: .92rem;
line-height: 1.55;
}
.details_name .btn-primary {
background: var(--pte-primary);
border-color: var(--pte-primary);
border-radius: var(--pte-r-pill);
padding: 8px 22px;
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: .5px;
}
.details_name .btn-primary:hover {
background: var(--pte-primary-700);
border-color: var(--pte-primary-700);
}
.details_name .btn-danger {
background: var(--pte-secondary);
border-color: var(--pte-secondary);
border-radius: var(--pte-r-pill);
padding: 8px 22px;
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: .5px;
}
.details_name .btn-danger:hover {
background: var(--pte-secondary-700);
border-color: var(--pte-secondary-700);
}
/* Product detail page - related products list */
ul.shop {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 991px) { ul.shop { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { ul.shop { grid-template-columns: repeat(2, 1fr); } }
ul.shop li { margin-bottom: 0; }
/* Loading bar */
.loading_bar {
position: fixed;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--pte-secondary);
z-index: 9999;
display: none;
}
.loading_page {
text-align: center;
padding: 20px;
color: var(--pte-muted);
font-size: .9rem;
}
/* ===== 15. LEFT CATEGORY PANEL (InsurancePress: light gray panel) ===== */
.left_section {
background: var(--pte-soft);
border-radius: 0;
padding: 28px 24px;
box-shadow: none;
border: none;
}
.left_section::before {
content: 'Categories';
display: block;
font-size: 22px;
font-weight: 300;
color: var(--pte-ink);
margin-bottom: 18px;
letter-spacing: -.2px;
}
#cssmenu > ul {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu > ul > li {
position: relative;
border-bottom: 1px solid var(--pte-line);
}
#cssmenu > ul > li:last-child { border-bottom: 0; }
#cssmenu > ul > li > a {
display: block;
padding: 14px 36px 14px 18px;
color: var(--pte-ink);
font-weight: 400;
font-size: 14px;
line-height: 1.4;
transition: color .2s, background .2s, padding-left .2s;
text-decoration: none;
position: relative;
}
#cssmenu > ul > li > a::before {
content: '\25B6';
color: var(--pte-secondary);
font-size: 8px;
margin-right: 10px;
vertical-align: 2px;
}
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a {
color: var(--pte-secondary);
background: var(--pte-soft-2);
}
#cssmenu .submenu {
list-style: none;
padding: 0 0 12px 26px;
margin: 0;
display: none;
}
#cssmenu .submenu li a {
display: block;
padding: 6px 10px;
font-size: 13px;
color: var(--pte-body);
text-decoration: none;
}
#cssmenu .submenu li a::before {
content: '\25B8';
color: var(--pte-muted);
font-size: 8px;
margin-right: 8px;
vertical-align: 2px;
}
#cssmenu .submenu li a:hover { color: var(--pte-secondary); }
#cssmenu .submenu li a:hover::before { color: var(--pte-secondary); }
#cssmenu .submenu-toogle {
position: absolute;
right: 8px;
top: 14px;
width: 24px;
height: 24px;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 14px;
transition: transform .25s;
border-radius: 50%;
}
#cssmenu .submenu-toogle:hover { background-color: var(--pte-soft-2); }
#cssmenu .submenu-toogle.active { transform: rotate(180deg); }
/* ===== 16. FOOTER (InsurancePress: dark slate, wordmark headings, 2 cols) ===== */
.footersec {
background: var(--pte-primary);
color: rgba(255,255,255,.65);
padding: 64px 0 0;
margin-top: 80px;
font-size: 14px;
line-height: 1.85;
}
.footersec .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
padding-bottom: 36px;
border-bottom: 1px solid rgba(255,255,255,.1);
}
@media (max-width: 768px) {
.footersec .container { grid-template-columns: 1fr; gap: 40px; }
}
/* Wordmark heading */
.footersec .footertitle {
color: #fff;
font-weight: 300;
font-size: 26px;
margin: 0 0 20px;
letter-spacing: -.2px;
}
.footersec .footertitle b {
font-weight: 600;
}
.footersec .footertitle span {
color: var(--pte-secondary);
font-weight: 300;
}
/* Two-column address/contact inside each footer column */
.footersec .fcol-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 26px;
}
@media (max-width: 540px) {
.footersec .fcol-grid { grid-template-columns: 1fr; gap: 16px; }
}
.footersec .fadd p {
color: rgba(255,255,255,.65);
font-size: 14px;
margin: 0 0 4px;
}
.footersec ul {
list-style: none;
padding: 0;
margin: 0;
}
.footersec ul li {
margin-bottom: 6px;
}
.footersec ul li a,
.footersec ul li {
color: rgba(255,255,255,.65);
font-size: 14px;
text-decoration: none;
transition: color .2s;
}
.footersec ul li a:hover {
color: var(--pte-secondary);
}
.footersec ul li i {
color: rgba(255,255,255,.4);
margin-right: 8px;
width: 16px;
text-align: center;
}
/* Footer CTA pill */
.footer-cta {
display: inline-flex;
align-items: center;
background: var(--pte-secondary);
color: #fff !important;
padding: 13px 34px;
border-radius: var(--pte-r-pill);
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
margin-top: 8px;
transition: background .25s;
}
.footer-cta:hover {
background: var(--pte-secondary-700);
color: #fff !important;
}
/* Footer bottom strip: links + copyright + socials */
.pte-footer-bottom {
padding: 22px 0;
color: rgba(255,255,255,.45);
font-size: 13px;
}
.pte-footer-bottom .container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
padding: 0 15px;
border: 0;
}
.pte-footer-bottom .ft-links {
display: flex;
gap: 28px;
flex-wrap: wrap;
}
.pte-footer-bottom .ft-links a {
color: rgba(255,255,255,.55);
text-decoration: none;
font-size: 13px;
transition: color .2s;
}
.pte-footer-bottom .ft-links a:hover {
color: var(--pte-secondary);
}
.pte-footer-bottom .ft-social {
display: flex;
gap: 14px;
color: rgba(255,255,255,.5);
font-size: 14px;
}
.pte-footer-bottom .ft-social a {
color: rgba(255,255,255,.5);
transition: color .2s;
}
.pte-footer-bottom .ft-social a:hover {
color: var(--pte-secondary);
}
/* SEO keyword strip — very bottom */
.pte-seo-strip {
background: var(--pte-primary-700);
padding: 14px 0;
text-align: center;
font-size: 12px;
color: rgba(255,255,255,.4);
line-height: 1.8;
}
.pte-seo-strip a {
color: rgba(255,255,255,.55);
margin: 0 6px;
text-decoration: none;
}
.pte-seo-strip a:hover { color: var(--pte-secondary); }
/* ===== 17. SUPPORT FAB ===== */
.support {
position: fixed;
bottom: 20px; right: 20px;
width: 52px; height: 52px;
border-radius: 50%;
background: var(--pte-secondary);
color: #fff;
display: flex; align-items: center; justify-content: center;
box-shadow: var(--pte-sh-2);
cursor: pointer;
z-index: 998;
transition: background .25s, transform .25s;
}
.support:hover { background: var(--pte-secondary-700); transform: scale(1.08); }
.support img { width: 22px; height: 22px; }
.inner-fabs {
position: fixed;
bottom: 85px; right: 22px;
display: none;
flex-direction: column;
gap: 10px;
z-index: 997;
}
.inner-fabs.show { display: flex; }
.inner-fabs a {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--pte-primary);
color: #fff;
display: flex; align-items: center; justify-content: center;
box-shadow: var(--pte-sh-2);
font-size: 18px;
transition: background .25s, transform .25s;
}
.inner-fabs a:hover { background: var(--pte-secondary); transform: scale(1.08); }
/* ===== 18. UTILITIES & FIXES ===== */
.fullwidth { width: 100%; }
.text-pte-primary { color: var(--pte-primary) !important; }
.text-pte-secondary { color: var(--pte-secondary) !important; }
.bg-pte-primary { background: var(--pte-primary) !important; color: #fff; }
.bg-pte-secondary { background: var(--pte-secondary) !important; color: #fff; }
.bg-pte-soft { background: var(--pte-soft) !important; }
/* Bootstrap container override to keep things consistent */
@media (min-width: 1200px) {
.container { max-width: 1180px; }
}
/* Mobile bottom safe space when FAB is visible */
@media (max-width: 540px) {
body { padding-bottom: 70px; }
}
/* ===== 19. PRODUCT DETAIL (Didactic-style hero card) ===== */
.pdc {
background: #fff;
padding: 40px 0 30px;
}
.pdc__row {
display: grid;
grid-template-columns: 360px 1fr;
gap: 36px;
align-items: start;
}
@media (max-width: 768px) {
.pdc__row { grid-template-columns: 1fr; gap: 24px; }
}
/* Left product image */
.pdc__imgbox {
background: var(--pte-soft);
border: 1px solid var(--pte-line);
border-radius: var(--pte-r-md);
padding: 28px;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
}
.pdc__imgbox img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
/* Right info column */
.pdc__info { padding-top: 6px; }
/* CODE - SKU pill (orange) */
.pdc__sku {
display: inline-block;
background: rgba(255,122,48,.12);
color: var(--pte-accent);
padding: 6px 18px;
border-radius: var(--pte-r-pill);
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 16px;
}
/* Product title */
.pdc__title {
font-size: clamp(1.5rem, 2.4vw, 2rem);
font-weight: 400;
color: var(--pte-ink);
margin: 0 0 14px;
letter-spacing: -.3px;
line-height: 1.25;
}
/* Brief description with cyan vertical bar */
.pdc__brief {
border-left: 3px solid var(--pte-secondary);
padding-left: 14px;
color: var(--pte-body);
font-size: 14px;
line-height: 1.6;
margin: 0 0 12px;
}
.pdc__subtitle {
color: var(--pte-body);
font-size: 14px;
margin: 0 0 20px;
}
/* Action buttons row */
.pdc__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
.pdc__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: var(--pte-r-pill);
font-size: 13px;
font-weight: 600;
text-decoration: none;
border: none;
cursor: pointer;
transition: background .25s;
}
.pdc__btn--orange {
background: var(--pte-accent);
color: #fff !important;
}
.pdc__btn--orange:hover {
background: var(--pte-accent-700);
color: #fff !important;
}
.pdc__btn--cyan {
background: var(--pte-secondary);
color: #fff !important;
}
.pdc__btn--cyan:hover {
background: var(--pte-secondary-700);
color: #fff !important;
}
.pdc__btn--outline {
background: #fff;
color: var(--pte-ink) !important;
border: 1px solid var(--pte-line);
}
.pdc__btn--outline:hover {
background: var(--pte-soft);
border-color: var(--pte-secondary);
color: var(--pte-secondary) !important;
}
/* Print button (smaller, separate row) */
.pdc__print {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 18px;
border-radius: var(--pte-r-pill);
background: #fff;
color: var(--pte-body) !important;
border: 1px solid var(--pte-line);
font-size: 12px;
font-weight: 500;
text-decoration: none;
margin-bottom: 22px;
transition: background .2s, color .2s;
}
.pdc__print:hover {
background: var(--pte-soft);
color: var(--pte-ink) !important;
}
/* Categories line */
.pdc__meta {
color: var(--pte-body);
font-size: 14px;
margin: 0;
}
.pdc__meta strong {
color: var(--pte-ink);
font-weight: 600;
margin-right: 6px;
}
.pdc__meta a {
color: var(--pte-secondary);
text-decoration: none;
}
.pdc__meta a:hover { color: var(--pte-secondary-700); }
/* Datasheet & specifications block */
.pdc-datasheet {
background: #fff;
border: 1px solid var(--pte-line);
border-radius: var(--pte-r-md);
padding: 28px 32px;
margin-top: 36px;
}
.pdc-datasheet__eyebrow {
display: block;
color: var(--pte-secondary);
font-size: 12px;
letter-spacing: 2.2px;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 10px;
}
.pdc-datasheet__title {
font-size: 1.5rem;
font-weight: 400;
color: var(--pte-ink);
margin: 0 0 18px;
letter-spacing: -.2px;
}
.pdc-datasheet__body {
color: var(--pte-body);
font-size: 15.5px;
line-height: 1.9;
margin: 0;
}
.pdc-datasheet__body p { margin: 0 0 10px; }
/* ===== 20. BLOG / ARTICLES ===== */
/* Blog grid card */
.blog-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--pte-line);
border-radius: var(--pte-r-md);
overflow: hidden;
height: 100%;
text-decoration: none;
transition: transform .25s, box-shadow .25s, border-color .25s;
}
.blog-card:hover {
transform: translateY(-4px);
box-shadow: var(--pte-sh-2);
border-color: var(--pte-secondary);
}
.blog-card__img {
aspect-ratio: 16 / 10;
background: var(--pte-soft);
overflow: hidden;
}
.blog-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s;
}
.blog-card:hover .blog-card__img img { transform: scale(1.05); }
.blog-card__body {
padding: 22px 22px 24px;
display: flex;
flex-direction: column;
flex: 1;
}
.blog-card__eyebrow {
display: block;
color: var(--pte-secondary);
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 8px;
}
.blog-card__date {
color: var(--pte-muted);
font-size: 12px;
margin-bottom: 8px;
}
.blog-card__date i {
margin-right: 6px;
color: var(--pte-secondary);
}
.blog-card__title {
font-size: 1.15rem;
font-weight: 500;
color: var(--pte-ink);
margin: 0 0 12px;
line-height: 1.4;
}
.blog-card__brief {
color: var(--pte-body);
font-size: 14px;
line-height: 1.7;
margin: 0 0 16px;
flex: 1;
}
.blog-card__more {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--pte-secondary);
font-size: 13px;
font-weight: 600;
transition: gap .2s;
}
.blog-card:hover .blog-card__more { gap: 10px; color: var(--pte-secondary-700); }
.blog-card:hover .blog-card__title { color: var(--pte-secondary); }
/* Empty state when no articles published */
.pte-empty-state {
text-align: center;
padding: 80px 20px;
background: var(--pte-soft);
border-radius: var(--pte-r-md);
}
/* ===== Article detail body ===== */
.article-body {
background: #fff;
}
.article-body__hero {
border-radius: var(--pte-r-md);
overflow: hidden;
margin-bottom: 28px;
background: var(--pte-soft);
}
.article-body__hero img {
width: 100%;
height: auto;
display: block;
}
.article-body__meta {
display: flex;
flex-wrap: wrap;
gap: 18px;
margin-bottom: 16px;
color: var(--pte-muted);
font-size: 13px;
}
.article-body__date,
.article-body__cat {
display: inline-flex;
align-items: center;
gap: 6px;
}
.article-body__date i,
.article-body__cat i {
color: var(--pte-secondary);
}
.article-body__title {
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 300;
color: var(--pte-ink);
margin: 0 0 24px;
line-height: 1.25;
letter-spacing: -.3px;
}
.article-body__content {
color: var(--pte-body);
font-size: 16px;
line-height: 1.85;
}
.article-body__content p { margin-bottom: 18px; }
.article-body__content h2 {
font-weight: 400;
color: var(--pte-ink);
font-size: 1.5rem;
margin: 32px 0 14px;
}
.article-body__content h3 {
font-weight: 500;
color: var(--pte-ink);
font-size: 1.2rem;
margin: 24px 0 10px;
}
.article-body__content ul,
.article-body__content ol { margin: 0 0 18px 22px; }
.article-body__content li { margin-bottom: 6px; }
.article-body__content blockquote {
border-left: 3px solid var(--pte-secondary);
padding: 4px 18px;
margin: 24px 0;
color: var(--pte-ink);
font-style: italic;
background: var(--pte-soft);
}
.article-body__content a { color: var(--pte-secondary); }
.article-body__content a:hover { color: var(--pte-secondary-700); }
.article-body__content img {
max-width: 100%;
height: auto;
border-radius: var(--pte-r-sm);
margin: 12px 0;
}
/* Share row */
.article-body__share {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 36px;
padding-top: 24px;
border-top: 1px solid var(--pte-line);
}
.article-body__share-label {
color: var(--pte-body);
font-size: 13px;
font-weight: 500;
margin-right: 4px;
}
.article-body__share a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--pte-soft);
color: var(--pte-body);
font-size: 14px;
transition: background .2s, color .2s;
}
.article-body__share a:hover {
background: var(--pte-secondary);
color: #fff;
}
/* Related blog list (sidebar) */
.related-blog-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.related-blog-item {
display: flex;
gap: 12px;
text-decoration: none;
padding: 10px;
border-radius: var(--pte-r-sm);
transition: background .2s;
}
.related-blog-item:hover {
background: var(--pte-soft);
}
.related-blog-item__img {
flex-shrink: 0;
width: 80px;
height: 80px;
border-radius: var(--pte-r-sm);
overflow: hidden;
background: var(--pte-soft-2);
}
.related-blog-item__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.related-blog-item__body { flex: 1; min-width: 0; }
.related-blog-item__date {
display: block;
color: var(--pte-muted);
font-size: 11px;
letter-spacing: .5px;
margin-bottom: 4px;
}
.related-blog-item__body h4 {
font-size: 14px;
font-weight: 500;
color: var(--pte-ink);
margin: 0;
line-height: 1.4;
transition: color .2s;
}
.related-blog-item:hover h4 { color: var(--pte-secondary); }
/* Sidebar tender CTA widget */
.pte-widget--cta {
background: var(--pte-secondary);
padding: 26px 24px;
border-radius: var(--pte-r-md);
color: #fff;
}
.pte-widget--cta h3 {
color: #fff !important;
font-size: 1.15rem !important;
font-weight: 500 !important;
margin: 0 0 10px !important;
letter-spacing: 0 !important;
}
.pte-widget--cta p {
color: rgba(255,255,255,.92);
font-size: 13px;
line-height: 1.6;
margin: 0 0 16px;
}
/* ===== 21. TENDER SUPPLY 5-CARD GRID (blog SEO section 4) ===== */
/* 5 cards: 3 on top row, 2 centered on bottom row (desktop)
2x2 + 1 on tablet; 1 col on mobile */
.pte-tender-cards {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.pte-tender-card {
background: #fff;
border: 1px solid var(--pte-line);
border-radius: var(--pte-r-md);
padding: 28px 24px;
text-align: center;
transition: transform .25s, box-shadow .25s, border-color .25s;
flex: 0 0 calc(33.333% - 14px);
max-width: calc(33.333% - 14px);
}
@media (max-width: 991px) {
.pte-tender-card { flex: 0 0 calc(50% - 10px); max-width: calc(50% - 10px); }
}
@media (max-width: 540px) {
.pte-tender-card { flex: 0 0 100%; max-width: 100%; }
}
.pte-tender-card:hover {
transform: translateY(-4px);
box-shadow: var(--pte-sh-2);
border-color: var(--pte-secondary);
}
.pte-tender-card__icon {
width: 60px;
height: 60px;
border-radius: 50%;
background: rgba(34,183,210,.12);
color: var(--pte-secondary);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin: 0 auto 18px;
transition: background .25s, color .25s;
}
.pte-tender-card:hover .pte-tender-card__icon {
background: var(--pte-secondary);
color: #fff;
}
.pte-tender-card h3 {
font-size: 1.1rem;
font-weight: 500;
color: var(--pte-ink);
margin: 0 0 12px;
letter-spacing: -.1px;
}
.pte-tender-card p {
color: var(--pte-body);
font-size: 14px;
line-height: 1.7;
margin: 0;
}