/* ── FontAwesome Kit Font Display Swap Overrides ── */
@font-face {
font-family: 'Font Awesome 5 Pro';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("https://kit-pro.fontawesome.com/releases/v5.15.4/webfonts/pro-fa-solid-900-5.0.0.woff2") format("woff2");
}
@font-face {
font-family: 'Font Awesome 5 Pro';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("https://kit-pro.fontawesome.com/releases/v5.15.4/webfonts/pro-fa-solid-900-5.0.11.woff2") format("woff2");
}
@font-face {
font-family: 'Font Awesome 5 Pro';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("https://kit-pro.fontawesome.com/releases/v5.15.4/webfonts/pro-fa-light-300-5.0.0.woff2") format("woff2");
}
@font-face {
font-family: 'Font Awesome 5 Pro';
font-style: normal;
font-weight: 100;
font-display: swap;
src: url("https://kit-pro.fontawesome.com/releases/v5.15.4/webfonts/pro-fa-regular-100-5.10.2.woff2") format("woff2");
}
@font-face {
font-family: 'Font Awesome 5 Brands';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://kit-pro.fontawesome.com/releases/v5.15.4/webfonts/pro-fa-brands-400-5.0.0.woff2") format("woff2");
}
@font-face {
font-family: 'Font Awesome 5 Brands';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://kit-pro.fontawesome.com/releases/v5.15.4/webfonts/pro-fa-brands-400-5.8.2.woff2") format("woff2");
}
/* Prevent horizontal overflow and right-swipe blank space on mobile. */
html,
body {
overflow-x: hidden;
}
/* ── All-Categories page ──────────────────────────────────────────────── */
/* 5-column grid utility (Bootstrap doesn't ship 20% columns) */
@media (min-width: 992px) {
.col-lg-2half {
flex: 0 0 auto;
width: 20%;
}
}
/* Page header + search bar row */
.all-cat-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 24px;
}
.all-cat-search-wrap {
position: relative;
flex: 0 0 260px;
}
.all-cat-search-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #888;
font-size: 15px;
pointer-events: none;
}
.all-cat-search {
width: 100%;
padding: 8px 12px 8px 32px;
border: 1px solid #dde1e7;
border-radius: 6px;
font-size: 13px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
background: #fff;
}
.all-cat-search:focus {
border-color: var(--color-primary, #1f4e79);
box-shadow: 0 0 0 3px rgba(31, 78, 121, 0.12);
}
/* Category card */
.cat-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
text-decoration: none;
background: #fff;
border: 1px solid #e8eaed;
border-radius: 10px;
padding: 16px 10px 12px;
height: 100%;
color: #1a2535;
transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}
.cat-card:hover,
.cat-card:focus-visible {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
transform: translateY(-3px);
border-color: var(--color-primary, #1f4e79);
color: var(--color-primary, #1f4e79);
}
.cat-card__img-wrap {
width: 80px;
height: 80px;
background: #f4f6f9;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin-bottom: 10px;
flex-shrink: 0;
transition: background 0.22s ease;
}
.cat-card:hover .cat-card__img-wrap {
background: #e8f0fb;
}
.cat-card__img-wrap img {
width: 100%;
height: 100%;
object-fit: contain;
}
.cat-card__body {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.cat-card__name {
font-size: 12px;
font-weight: 600;
line-height: 1.35;
word-break: break-word;
color: inherit;
display: block;
}
.cat-card__meta {
display: flex;
gap: 4px;
flex-wrap: wrap;
justify-content: center;
}
.cat-badge {
font-size: 10px;
font-weight: 500;
padding: 2px 7px;
border-radius: 20px;
line-height: 1.5;
}
.cat-badge--sub {
background: rgba(31, 78, 121, 0.08);
color: var(--color-primary, #1f4e79);
}
.cat-badge--item {
background: rgba(46, 204, 113, 0.10);
color: #1a8a4a;
}
/* Responsive tweak: tighten padding on small screens */
@media (max-width: 575px) {
.cat-card {
padding: 12px 8px 10px;
}
.cat-card__img-wrap {
width: 60px;
height: 60px;
}
.all-cat-search-wrap {
flex: 1 1 100%;
}
}
/* ── /All-Categories page ─────────────────────────────────────────────── */
/* Remove li::marker bullets from social icon lists and repeat--item lists */
.social-icons,
.social-icons li,
.repeat--item ul,
.repeat--item ul li {
list-style: none !important;
padding-left: 0;
margin-left: 0;
}
@supports (overflow: clip) {
html,
body {
overflow-x: clip;
}
}
@media (max-width: 767px) {
html,
body {
overscroll-behavior-x: none;
}
.whatsapp-float {
right: 12px !important;
max-width: calc(100vw - 12px) !important;
}
.whatsapp-float__label {
display: none !important;
}
}
/* ── Font-display: swap override for FontAwesome Pro CDN ────────────────
* The kit-pro.fontawesome.com stylesheet doesn't set font-display.
* Re-declaring the @font-face with font-display:swap ensures text
* remains visible while the icon font loads, preventing CLS.
* The src descriptors don't need to match exactly — the display
* hint is applied to the already-registered font family name.
* ─────────────────────────────────────────────────────────────────────── */
@font-face {
font-family: "Font Awesome 5 Pro";
font-display: swap;
src: local("Font Awesome 5 Pro");
}
@font-face {
font-family: "Font Awesome 5 Free";
font-display: swap;
src: local("Font Awesome 5 Free");
}
@font-face {
font-family: "Font Awesome 5 Brands";
font-display: swap;
src: local("Font Awesome 5 Brands");
}
/* brand-item-name replaces