/**
 * Afridex theme styles — mobile-first, layered on top of Bootstrap 5.3.
 * Brand tokens are exposed as CSS custom properties so colors can be
 * tweaked in one place without touching component rules below.
 */

/* -----------------------------------------------------------------------
 * Self-hosted webfonts available for Heading Font / Body Font in
 * Afridex Settings -> Global Settings -> Typography. All 10 are
 * declared here but a browser only ever fetches the 2 actually in
 * use (via --afridex-font-heading/--afridex-font-body below), so
 * having every option pre-bundled costs nothing at page load.
 * --------------------------------------------------------------------- */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/open-sans-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/josefin-sans-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/inter-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/montserrat-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/roboto-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/nunito-sans-var.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/dm-sans-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/work-sans-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/manrope-var.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-mono.woff2') format('woff2');
}

.font-mono {
  font-family: 'DM Mono', monospace;
}

:root {
  --afridex-black: #1a0f06;
  --afridex-black-soft: #261506;
  --afridex-gold: #c08c12;
  --afridex-gold-dark: #a97a10;
  --afridex-cream: #f3ede0;
  --afridex-white: #ffffff;
  --afridex-text-muted: #7a6a58;
  --afridex-border: rgba(28, 18, 8, 0.09);
  --afridex-radius: 0.375rem;
  --afridex-transition: 0.25s ease;
  --afridex-font-body: 'Plus Jakarta Sans', sans-serif;
  --afridex-font-heading: 'Josefin Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --afridex-font-mono: 'DM Mono', monospace;
}

/* -----------------------------------------------------------------------
 * Base / accessibility
 * --------------------------------------------------------------------- */

body {
  font-family: var(--afridex-font-body);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--afridex-black);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--afridex-font-heading);
  font-weight: 700;
}

p {
  margin-bottom: 1rem;
}

.lead {
  font-size: 1.05rem;
  font-weight: 400;
}

a {
  transition: color var(--afridex-transition);
  text-decoration: none;
}

img {
	max-width: 100%;
	height: auto;
}

.skip-link {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2000;
	padding: 0.75rem 1.25rem;
	background: var(--afridex-black);
	color: var(--afridex-white);
}

:focus-visible {
	outline: 3px solid var(--afridex-gold);
	outline-offset: 2px;
}

.text-accent {
	color: var(--afridex-gold);
}

.section-eyebrow,
.vmv-label {
  color: var(--afridex-gold);
  letter-spacing: 0.35em;
  font-size: 0.6875rem;
  font-weight: 600;
  font-family: var(--afridex-font-mono);
  text-transform: uppercase;
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.section-eyebrow::before,
.section-eyebrow::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 1px;
  background-color: currentColor;
}

/* Plain-text CTA link — a lighter-weight alternative to the two .btn-afridex-*
 * kinds, used where the design wants just gold arrow-text with no button box. */
.link-afridex-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--afridex-gold-dark);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
}

.link-afridex-arrow:hover,
.link-afridex-arrow:focus {
  color: var(--afridex-gold);
}

/* Compact, uppercase section titles — used via class="h1" throughout the
 * homepage sections instead of Bootstrap's larger default h1 sizing. */
.h1 {
  font-size: clamp(1.875rem, 1.6rem + 1.36vw, 2.625rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

/* A handful of sections cap their heading at the md (36px) size instead of
 * growing to 42px at the lg breakpoint like the rest. */
.commitment-section .h1,
.vmv-section .h1,
.contact-section .h1,
.industries-section .h1,
.equipment-content .h1,
.cta-section .h1,
.footer-cta-card .h1 {
  font-size: clamp(1.875rem, 1.6rem + 1.34vw, 2.25rem);
}

/* Shared, compact vertical rhythm for every homepage section — replaces
 * Bootstrap's flat, larger py-5 utility that used to sit in the markup.
 * .equipment-section is deliberately excluded — it's a flush, edge-to-edge
 * image+content split with its own padding scoped to .equipment-content. */
.about-section,
.business-divisions-section,
.why-choose-us-section,
.commitment-section,
.vmv-section,
.contact-section,
.industries-section,
.projects-section,
.testimonials-section,
.team-section,
.faq-section,
.cta-section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 992px) {
  .about-section,
  .business-divisions-section,
  .why-choose-us-section,
  .commitment-section,
  .vmv-section,
  .contact-section,
  .industries-section,
  .projects-section,
  .testimonials-section,
  .team-section,
  .faq-section,
  .cta-section {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}

.btn-arrow-icon {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  transition: transform var(--afridex-transition);
}

.btn .btn-arrow-icon {
  margin-left: 0.5rem;
}

.btn:hover .btn-arrow-icon,
.link-afridex-arrow:hover .btn-arrow-icon {
  transform: translateX(3px);
}

.btn-leading-icon {
  display: inline-flex;
  align-items: center;
  font-size: 1rem;
  margin-right: 0.4rem;
}
/* Two button "skins" shared across the whole site, so components don't fight
 * Bootstrap color variants (btn-primary/btn-dark/btn-outline-*) again —
 * add a scoped override below instead, the same way .cta-section and
 * .business-divisions-section do it.
 *
 * - .btn-afridex-primary   the one strong action in a section. Solid gold
 *   by default; sections whose own background is already gold flip it to
 *   solid dark via a scoped override so it never disappears.
 * - .btn-afridex-secondary any other action. Outlined, and always uses
 *   currentColor so it automatically matches the ambient text color of
 *   whatever section it's dropped into — no per-section color choice needed.
 */

.btn-afridex-primary,
.btn-afridex-secondary {
  font-weight: 700;
  line-height: 1.5;
  padding: 13px 30px;
  border-radius: var(--afridex-radius);
  font-family: var(--afridex-font-heading);
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  transition: background-color var(--afridex-transition), border-color var(--afridex-transition), color var(--afridex-transition);
}

.btn-afridex-primary {
  background-color: var(--afridex-gold);
  border-color: transparent;
  color: #ffffff;
}

.btn-afridex-primary:hover,
.btn-afridex-primary:focus {
  background-color: #a97a10;
  border-color: transparent;
  color: #ffffff;
}

.btn-afridex-secondary {
  background-color: transparent;
  border: 2px solid currentColor;
  color: currentColor;
}

.btn-afridex-secondary:hover,
.btn-afridex-secondary:focus {
  background-color: var(--afridex-gold);
  border-color: var(--afridex-gold);
  color: var(--afridex-black);
}

/* Sections whose background is already gold or already light: flip the
 * primary button to solid dark so it keeps standing out. */
.business-divisions-section .btn-afridex-primary {
  background-color: var(--afridex-black);
  border-color: var(--afridex-black);
  color: var(--afridex-white);
}

.business-divisions-section .btn-afridex-primary:hover,
.business-divisions-section .btn-afridex-primary:focus {
  background-color: var(--afridex-black-soft);
  border-color: var(--afridex-black-soft);
  color: var(--afridex-white);
}

/* Final CTA banner (gold background): both buttons are outlined/transparent
 * rather than solid — button 1 fills white on hover with gold text, button 2
 * (Call Now) just brightens its faint border. Matches the reference design. */
.cta-section {
  background-color: var(--afridex-gold);
  color: var(--afridex-white);
}

.cta-section .btn-afridex-primary {
  background-color: transparent;
  border: 2px solid var(--afridex-white);
  color: var(--afridex-white);
}

.cta-section .btn-afridex-primary:hover,
.cta-section .btn-afridex-primary:focus {
  background-color: var(--afridex-white);
  border-color: var(--afridex-white);
  color: var(--afridex-gold);
}

.cta-section .btn-afridex-secondary {
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: var(--afridex-white);
}

.cta-section .btn-afridex-secondary:hover,
.cta-section .btn-afridex-secondary:focus {
  background-color: transparent;
  border-color: var(--afridex-white);
  color: var(--afridex-white);
}

/* -----------------------------------------------------------------------
 * Header / navbar
 * --------------------------------------------------------------------- */

/* The navbar sticks to the viewport top (see .navbar below), so an
 * anchor jump (nav menu links, "Read More" etc.) would otherwise land
 * content right under it, hidden behind the bar. This offsets the
 * scroll target by the navbar's height. */
section[id] {
  scroll-margin-top: 120px;
}

/* Always solid/white — same look at the top of the page and while
 * scrolled, per the reference design. position: sticky keeps it in
 * normal document flow at all times, so it never needs a JS-measured
 * placeholder height to avoid a content jump; it simply pins itself to
 * the viewport top once scrolled to. .is-scrolled (toggled by main.js)
 * adds a subtle shadow. */

.site-header {
	position: sticky;
    top: 0;
    z-index: 1030;
    transition: box-shadow var(--fz-transition);
}
.navbar {

  background-color: var(--afridex-white);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  transition: box-shadow var(--afridex-transition), padding var(--afridex-transition);
}

.navbar.is-scrolled {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}


.navbar .nav-link {
  color: var(--afridex-black);
  font-weight: 500;
}

.navbar .navbar-nav .nav-item .nav-link {
	color: rgba(26, 15, 6, 0.7);
	font-family: var(--afridex-font-heading);
	font-weight: 600;
	text-transform: uppercase;
	padding: 8px 12px;
	font-size: 0.8125rem;    box-shadow: none;
}

.navbar .nav-item .nav-link:hover,
.navbar .nav-item.active > .nav-link {
  color: var(--afridex-gold);
}

/* "Services" (and any other parent with children): the label is a plain
 * link that always navigates to its own page; this caret is the only
 * thing that opens the dropdown, so the two never fight over one click. */
.navbar .nav-item.dropdown {
  display: flex;
  align-items: center;
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 4px 8px;
  margin-left: -4px;
  color: rgba(26, 15, 6, 0.7);
  font-size: 0.7rem;
  cursor: pointer;
}

.nav-dropdown-toggle:hover {
  color: var(--afridex-gold);
}

.nav-dropdown-toggle i {
  transition: transform var(--afridex-transition);
}

.nav-dropdown-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.navbar-nav .dropdown-menu {
    min-width: 240px;
    padding: 0px;
    border: 1px solid rgb(204 204 204 / 46%);
}
.navbar-nav .dropdown-menu .nav-item .nav-link {
    font-family: var(--afridex-font-body);
    text-transform: capitalize;
}

.navbar-nav .dropdown-menu .nav-item .nav-link:hover {
    background-color: #f3ede0;
}
.navbar-brand img {
  height: 90px;
  width: auto;
}

.navbar-brand .logo-default {
  display: none;
}

.navbar-brand .logo-sticky {
  display: inline-block;
}

.header-phone {
  color: var(--afridex-black);
  gap: 0.4rem;
  font-weight: 500;
}

.header-phone svg {
  color: var(--afridex-gold);
}

.header-phone i {
  font-size: 1rem;
  color: var(--afridex-gold);
}

/* -----------------------------------------------------------------------
 * Hero
 * --------------------------------------------------------------------- */

.hero-section {
  position: relative;
  /* min-height: 100vh; */
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--afridex-black);
  background-size: cover;
  background-position: center;
  color: var(--afridex-white);
}

.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--afridex-black) 40%, rgba(26, 15, 6, 0.6) 75%, transparent 100%);
}

.hero-content-wrap {
  z-index: 10;
  max-width: 1280px;
  margin-inline: auto;
  width: 100%;
  padding: 5rem 1.5rem 8rem;
}

.hero-text-col {
  max-width: 42rem;
}

.hero-heading {
  line-height: 1.05;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.025em;
  font-size: 3rem;
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .hero-heading {
    font-size: 3.25rem;
  }
}

@media (min-width: 992px) {
  .hero-heading {
    font-size: 3.5rem;
  }
}
@media (min-width: 1199px) {
  .hero-heading {
    font-size: 4.5rem;
  }
}
.hero-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.hero-subtitle::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 2px;
  background-color: var(--afridex-gold);
}

.hero-description {
  color: rgba(255, 255, 255, 0.65);
  font-weight: 300;
  line-height: 1.625;
  font-size: 1rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .hero-description {
    font-size: 1.125rem;
  }
}

.hero-btn-scale {
  transition: transform 0.15s ease;
}

.hero-btn-scale:hover {
  transform: scale(1.03);
}

.hero-btn-scale:active {
  transform: scale(0.98);
}

.hero-stats {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: rgba(26, 15, 6, 0.7);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
}

.hero-stats-row {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.hero-stat-item {
  padding: 1rem;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-stat-item:last-child {
  border-right: 0;
}

.hero-stat-value {
  font-size: 1.5rem;
  color: var(--afridex-gold);
  line-height: 1;
}

.hero-stat-label {
  font-size: 0.625rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--afridex-font-mono);
  margin-top: 0.125rem;
}

/* -----------------------------------------------------------------------
 * About
 * --------------------------------------------------------------------- */

.about-stat-item {
  border: 1px solid var(--afridex-border);
  border-radius: var(--afridex-radius);
  padding: 1.25rem;
  text-align: center;
  transition: border-color var(--afridex-transition);
}

.about-stat-item:hover {
  border-color: var(--afridex-gold);
}

/* About page's own Story image — a plain photo, no gold-frame/badge
 * overlay (that treatment is specific to the homepage's About section). */
.about-story-image {
  display: block;
  width: 100%;
  height: 288px;
  object-fit: cover;
}

/* The About page's Story section uses a fixed (non-scaling) py-20 rhythm,
 * unlike the homepage's own About section which grows on desktop. */
#about-story.about-section {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.about-stat-value {
  font-size: 1.5rem;
  color: var(--afridex-gold);
}

.about-stat-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--afridex-text-muted);
}

.about-description {
  color: var(--afridex-text-muted);
}

.business-divisions-section {
	background-color: var(--afridex-cream);
}

.about-image-wrap {
  position: relative;
  display: inline-block;
}

.about-image-wrap::before {
  content: "";
  position: absolute;
  top: -16px;
  right: -16px;
  bottom: 16px;
  left: 16px;
  border: 2px solid var(--afridex-gold);
  z-index: -1;
}

.about-image-badge {
  position: absolute;
  left: 20px;
  bottom: 20px;
  background-color: var(--afridex-gold);
  color: var(--afridex-white);
  padding: 0.75rem 1.25rem;
  max-width: 80%;
}

.about-image-badge-title {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  display: block;
}

.about-image-badge-subtitle {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block;
}

.about-image {
  border-radius: var(--afridex-radius);
}

#about-heading {
  font-size: clamp(1.75rem, 4vw + 1rem, 3.875rem);
  line-height: 1.15;
}

.division-card-title {
  transition: color var(--afridex-transition);
}

.division-card-link {
  opacity: 0;
  /* max-height: 0; */
  overflow: hidden;
  transition: opacity var(--afridex-transition);
  font-size: .75rem;
  font-family: var(--afridex-font-mono);
}

.division-card {
  background-color: var(--afridex-white);
  border: 1px solid var(--afridex-border);
  border-radius: var(--afridex-radius);
  transition: box-shadow var(--afridex-transition), border-color var(--afridex-transition);
}

.division-card:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  border-color: var(--afridex-gold);
}

.division-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  background-color: rgba(192, 140, 18, 0.18);
  border: 1px solid rgba(192, 140, 18, 0.4);
  color: var(--afridex-gold-dark);
  transition: background-color var(--afridex-transition), border-color var(--afridex-transition), color var(--afridex-transition);
  border-radius: var(--afridex-radius);
}

.division-icon-img,
.division-icon svg {
  width: 30px;
  height: 30px;
  object-fit: contain;
  transition: filter var(--afridex-transition);
}

.division-icon i {
  font-size: 30px;
}
/* -----------------------------------------------------------------------
 * Commitment
 * --------------------------------------------------------------------- */

.commitment-section {
  background-color: var(--afridex-white);
  color: var(--afridex-black);
}

.commitment-section .text-accent {
  color: var(--afridex-gold);
}

.division-card:hover .division-icon {
  background-color: var(--afridex-gold);
  border-color: var(--afridex-gold);
  color: var(--afridex-white);
}

.division-card:hover .division-icon-img {
  filter: brightness(0) invert(1);
}

.division-card:hover .division-card-title {
  color: var(--afridex-gold);
}

.division-card:hover .division-card-link {
  opacity: 1;
  /* max-height: 2rem; */
}

/* -----------------------------------------------------------------------
 * Vision / Mission / Values
 * --------------------------------------------------------------------- */

.vmv-section {
  /* background-color: var(--afridex-cream); */
}

.wcu-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: var(--afridex-gold);
  color: var(--afridex-black);
  font-size: 0.8rem;
  flex-shrink: 0;
}

.wcu-card {
  background-color: transparent;
  border: 1px solid var(--afridex-border);
  border-radius: var(--afridex-radius);
  padding: 1.25rem;
  transition: border-color var(--afridex-transition);
}

.wcu-card:hover {
  border-color: var(--afridex-gold);
}

.wcu-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: var(--afridex-radius);
  background-color: rgba(192, 140, 18, 0.18);
  border: 1px solid rgba(192, 140, 18, 0.4);
  color: var(--afridex-gold-dark);
}

.wcu-card-icon-img,
.wcu-card-icon svg {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

/* -----------------------------------------------------------------------
 * Commitment
 * --------------------------------------------------------------------- */

.contact-form-wrap .wpcf7-form-control {
  width: 100%;
  padding: 0.6rem 0.9rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--afridex-radius);
}

.contact-form-wrap .wpcf7-submit {
  background-color: var(--afridex-gold);
  color: var(--afridex-black);
  border: none;
  padding: 0.6rem 1.5rem;
  border-radius: var(--afridex-radius);
  font-weight: 600;
}

/* -----------------------------------------------------------------------
 * Vision / Mission / Values
 * --------------------------------------------------------------------- */

.vmv-card {
  background-color: var(--afridex-cream);
  padding: 1.75rem;
  border-top: 4px solid var(--afridex-gold);
  border-radius: var(--afridex-radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: box-shadow var(--afridex-transition);
}

.vmv-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.vmv-card-featured {
  background-color: var(--afridex-black);
  color: var(--afridex-white);
  border-top-color: var(--afridex-gold);
}

.vmv-card-featured .vmv-label {
  color: var(--afridex-gold);
}

/* -----------------------------------------------------------------------
 * Industries
 * --------------------------------------------------------------------- */

.industries-section {
  background-color: var(--afridex-black);
  color: var(--afridex-white);
}

.industry-icon-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.contact-card {
  border: 1px solid var(--afridex-border);
  border-radius: var(--afridex-radius);
  padding: 1.75rem !important;
  transition: border-color var(--afridex-transition), box-shadow var(--afridex-transition);
}

.contact-card:hover {
  border-color: var(--afridex-gold);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--afridex-radius);
  background-color: rgba(192, 140, 18, 0.18);
  border: 1px solid rgba(192, 140, 18, 0.4);
  color: var(--afridex-gold-dark);
  transition: background-color var(--afridex-transition), border-color var(--afridex-transition), color var(--afridex-transition);
}

.contact-card:hover .contact-icon {
  background-color: var(--afridex-gold);
  border-color: var(--afridex-gold);
  color: var(--afridex-white);
}

.contact-card-label {
  font-family: var(--afridex-font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--afridex-text-muted);
}

.contact-icon svg {
  width: 22px;
  height: 22px;
}

.contact-icon i {
  font-size: 22px;
}

.contact-card-value {
  display: block;
  font-weight: 700;
  color: var(--afridex-black);
  text-decoration: none;
}

a.contact-card-value:hover {
  color: var(--afridex-gold-dark);
}

.contact-card-caption {
  font-size: 0.8rem;
  color: var(--afridex-text-muted);
  margin-top: 0.35rem;
}

.contact-form-wrap {
  background-color: var(--afridex-cream);
  border-radius: var(--afridex-radius);
}

.contact-page-map {
  border-radius: var(--afridex-radius);
  overflow: hidden;
}

.contact-page-map-section {
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: var(--afridex-white);
}

@media (min-width: 992px) {
  .contact-page-map-section {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}

.contact-page-map-full {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.contact-whatsapp-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background-color: rgba(192, 140, 18, 0.08);
  border-left: 4px solid var(--afridex-gold);
  border-radius: var(--afridex-radius);
  padding: 1.25rem 1.5rem;
  margin-top: 1.5rem;
}

.contact-whatsapp-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #25d366;
  color: var(--afridex-white);
  font-size: 1.125rem;
}

.contact-whatsapp-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--afridex-black);
  margin-bottom: 0.35rem;
}

.contact-whatsapp-card-text {
  font-size: 0.875rem;
  color: var(--afridex-text-muted);
  margin-bottom: 0.85rem;
}

.industries-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (min-width: 576px) {
  .industries-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .industries-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.industry-item {
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: background-color var(--afridex-transition), border-color var(--afridex-transition);
}

.industry-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(192, 140, 18, 0.5);
}

.industry-star {
  display: block;
  margin: 0 auto 0.5rem;
  width: fit-content;
  color: var(--afridex-gold);
  opacity: 0.6;
  transition: opacity var(--afridex-transition);
}

.industry-item:hover .industry-star {
  opacity: 1;
}

.industry-name {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  font-weight: 500;
  transition: opacity var(--afridex-transition);
}

.industry-star svg {
  width: 20px;
  height: 20px;
}

.industry-star i {
  font-size: 20px;
}

/* -----------------------------------------------------------------------
 * Equipment
 * --------------------------------------------------------------------- */

.equipment-section {
  background-color: var(--afridex-black);
  color: var(--afridex-white);
  overflow: hidden;
}

.equipment-image {
  object-fit: cover;
  min-height: 320px;
}

.equipment-content {
  background-color: var(--afridex-black-soft);
  padding: 3.5rem 1.5rem;
  /* display: flex; */
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 768px) {
  .equipment-content {
    padding: 3.5rem 2.5rem;
  }
}
.footer-logo {max-height: 70px;height: auto;width: auto;margin-bottom: 1.5rem !important;}
.site-footer a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  display: inline-block;
  /* text-align: center; */
}

.site-footer a:hover {
  color: var(--afridex-gold);
  text-decoration: none;
}

.footer-menu li {
	margin-bottom: 0.5rem;
}

.social-icons {
	margin-top: 1rem;
}

.social-icons li {
    margin-right: .75rem !important;
}

.social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* width: 2.25rem; */
	/* height: 2.25rem; */
	/* border-radius: 50%; */
	/* background-color: rgba(255, 255, 255, 0.08); */
	/* font-size: 15px; */
}

.social-icon svg {
    width: 24px;
    height: 24px;
}

.social-icon i {
    font-size: 24px;
}

.social-icon:hover {
	/* background-color: var(--afridex-gold); */
	color: var(--afridex-gold);
}

.equipment-list li {
  padding: 0.2rem 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.equipment-list li::before {
  content: "\2713";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 1px solid var(--afridex-gold);
  color: var(--afridex-gold);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.accordion-item,
.accordion-item:not(:first-of-type) {
  background-color: var(--afridex-white);
  border: 1px solid var(--afridex-border);
}

.accordion-button:not(.collapsed) {
  background-color: var(--afridex-white);
  color: var(--afridex-black);
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(200, 152, 31, 0.35);
}

.accordion-button {
  justify-content: space-between;
}

.accordion-button::after {
  display: none;
}

.accordion-question {
  font-size: 0.9375rem;
  font-weight: 600;
}

/* Bordered plus/minus icon box instead of Bootstrap's default chevron,
 * matching the reference design's FAQ accordion. */
.accordion-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 0.75rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--afridex-radius);
  border: 1px solid #ccc;
  background-color: transparent;
  transition: background-color var(--afridex-transition), border-color var(--afridex-transition);
}

.accordion-icon-plus,
.accordion-icon-minus {
  display: inline-flex;
  font-size: 0.75rem;
  color: var(--afridex-text-muted);
}

.accordion-icon-minus {
  display: none;
}

.accordion-button:not(.collapsed) .accordion-icon-box {
  background-color: var(--afridex-gold);
  border-color: var(--afridex-gold);
}

.accordion-button:not(.collapsed) .accordion-icon-plus {
  display: none;
}

.accordion-button:not(.collapsed) .accordion-icon-minus {
  display: inline-flex;
  color: var(--afridex-white);
}

/* -----------------------------------------------------------------------
 * CTA
 * --------------------------------------------------------------------- */

.cta-section .lead {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
}

/* A handful of sections use a fixed (non-scaling) vertical rhythm instead
 * of the shared 3rem/4.5rem rhythm above. */
.commitment-section {
  padding-top: 5rem;
  padding-bottom: 5rem;
  background-color: var(--afridex-cream);
}

.vmv-section,
.contact-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
#about-vision-mission {
    background-color: var(--afridex-cream);
}
/* -----------------------------------------------------------------------
 * Footer
 * --------------------------------------------------------------------- */

.site-footer {
  background-color: var(--afridex-black);
  color: rgba(255, 255, 255, 0.75);
}

.footer-cta-wrap {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 992px) {
  .footer-cta-wrap {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}

/* 404 page: the error section right above already provides its own
 * bottom spacing, so this CTA doesn't need extra space on top of it. */
body.error404 .footer-cta-wrap {
  margin-top: 3rem;
}

/* Same look as the homepage's own final CTA (.cta-section): both buttons
 * outlined/transparent, button 1 fills white on hover with gold text. */
.footer-cta-card {
  background-color: var(--afridex-gold);
  border-radius: var(--afridex-radius);
  padding: 3rem 2rem;
  color: var(--afridex-white);
}

.footer-cta-card h2 {
  color: var(--afridex-white);
}

.footer-cta-card .lead {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  max-width: 620px;
  margin-inline: auto;
}

.footer-cta-card .btn-afridex-primary {
  background-color: transparent;
  border: 2px solid var(--afridex-white);
  color: var(--afridex-white);
}

.footer-cta-card .btn-afridex-primary:hover,
.footer-cta-card .btn-afridex-primary:focus {
  background-color: var(--afridex-white);
  border-color: var(--afridex-white);
  color: var(--afridex-gold);
}

.footer-cta-card .btn-afridex-secondary {
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: var(--afridex-white);
}

.footer-cta-card .btn-afridex-secondary:hover,
.footer-cta-card .btn-afridex-secondary:focus {
  background-color: transparent;
  border-color: var(--afridex-white);
  color: var(--afridex-white);
}

.footer-cta-card .btn-afridex-secondary::after {
  content: none;
}

/* -----------------------------------------------------------------------
 * Inner-page hero banner — reusable for About and any future inner page
 * (Services, Industries, Contact, ...). Same dark-overlay-on-photo pattern
 * as the homepage hero, just shorter and without the stats bar.
 * --------------------------------------------------------------------- */

.page-hero {
  position: relative;
  background-color: var(--afridex-black);
  background-size: cover;
  background-position: center;
  color: var(--afridex-white);
  padding-top: 7rem;
  padding-block: 3.5rem;
}

.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 8, 6, 0.85) 0%, rgba(10, 8, 6, 0.6) 100%);
}

.footer-description {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.875rem;
}

.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-contact i {
  font-size: 1rem;
}

.footer-contact p {
  margin-bottom: 0.5rem;
}

.footer-bottom {
  background-color: var(--afridex-black-soft);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 1051;
  position: relative;
}

.footer-legal-links {
  font-size: 0.8rem;
}

.footer-legal-link {
  color: rgba(255, 255, 255, 0.6);
}

/* -----------------------------------------------------------------------
 * Blog / archive / single / comments / breadcrumbs
 * --------------------------------------------------------------------- */
.page-hero-heading {
  position: relative;
  font-size: clamp(1.75rem, 3vw + 1rem, 2.75rem);
  text-transform: uppercase;
  margin-bottom: 0;
}

.page-hero-heading::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--afridex-gold);
  margin-top: 0.75rem;
}

.page-breadcrumb {
  position: relative;
}

.page-breadcrumb .breadcrumb-item,
.page-breadcrumb .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.7);
}

.page-breadcrumb .breadcrumb-item.active {
  color: var(--afridex-gold);
}

.page-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.5);
}

/* -----------------------------------------------------------------------
 * 404 — Page Not Found. Sits below the shared .page-hero banner.
 * --------------------------------------------------------------------- */
.error-404-section {
  padding: 5rem 0;
  background-color: var(--afridex-cream);
}

.error-404-inner {
  max-width: 560px;
}

.error-404-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background-color: var(--afridex-white);
  color: var(--afridex-gold);
  font-size: 2rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 12px 32px rgba(26, 15, 6, 0.1);
}

.error-404-code {
  font-family: var(--afridex-font-heading);
  font-weight: 700;
  font-size: clamp(3.5rem, 5vw + 2rem, 6rem);
  line-height: 1;
  color: var(--afridex-gold);
  margin-bottom: 1rem;
}

.error-404-text {
  color: var(--afridex-text-muted);
  margin-bottom: 2rem;
}

.error-404-section .search-form {
  max-width: 420px;
  margin: 0 auto 2rem;
}

.error-404-cta {
  margin-bottom: 0.5rem;
}

.error-404-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  color: var(--afridex-black);
  font-weight: 600;
}

.error-404-phone i {
  color: var(--afridex-gold);
}

/* -----------------------------------------------------------------------
 * About page — Core Values cards.
 * --------------------------------------------------------------------- */

.core-values-section {
  background-color: var(--afridex-white);
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 992px) {
  .core-values-section {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}

/* -----------------------------------------------------------------------
 * Vision & Mission gold card variant (dark variant already exists as
 * .vmv-card-featured) — used for the About page's Mission card and the
 * homepage's 3-card Vision/Mission/Values section alike.
 * --------------------------------------------------------------------- */

.vmv-card-gold {
  background-color: var(--afridex-gold);
  color: var(--afridex-white);
  border-top-color: var(--afridex-black);
}

.vmv-card-gold .vmv-label {
  color: var(--afridex-white);
  opacity: 0.85;
}

/* -----------------------------------------------------------------------
 * Reusable inner-page intro paragraph (centered, capped width) — used by
 * the Industries page, and any future inner page that needs one.
 * --------------------------------------------------------------------- */

.value-card {
  background-color: var(--afridex-white);
  padding: 1.5rem;
  border-bottom: 2px solid var(--afridex-gold);
  border-radius: var(--afridex-radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: box-shadow var(--afridex-transition);
}

.value-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.value-card-letter {
  display: block;
  font-family: var(--afridex-font-heading);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--afridex-gold);
  opacity: 0.1;
  line-height: 1;
  margin-bottom: 0.5rem;
}

/* -----------------------------------------------------------------------
 * Reusable inner-page intro paragraph (centered, capped width) — used by
 * the Industries page, and any future inner page that needs one.
 * --------------------------------------------------------------------- */

.page-intro-section {
  padding-top: 3rem;
  padding-bottom: 1rem;
}

@media (min-width: 992px) {
  .page-intro-section {
    padding-top: 4.5rem;
    padding-bottom: 1.5rem;
  }
}

.page-intro {
  max-width: 900px;
  color: var(--afridex-text-muted);
}

.industry-grid-section,
.service-grid-section {
  padding-top: 1rem;
  padding-bottom: 3rem;
}

@media (min-width: 992px) {
  .industry-grid-section,
  .service-grid-section {
    padding-top: 1.5rem;
    padding-bottom: 4.5rem;
  }
}

/* Industries page grid cards — plain thin border (no left accent, no
 * radius, no lift), hover switches border to gold and adds a shadow. */
.industries-card {
  height: 100%;
  background-color: var(--afridex-white);
  border: 1px solid var(--afridex-border);
  border-radius: var(--afridex-radius);
  transition: border-color var(--afridex-transition), box-shadow var(--afridex-transition);
  padding: 1.25rem;
}

.industries-card:hover {
  border-color: var(--afridex-gold);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.industries-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.industries-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: var(--afridex-radius);
  background-color: rgba(192, 140, 18, 0.18);
  border: 1px solid rgba(192, 140, 18, 0.4);
}

.industries-card-icon-img {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}

.industries-card-title {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: color var(--afridex-transition);
}

.industries-card:hover .industries-card-title {
  color: var(--afridex-gold);
}

.industries-card p {
  font-size: 0.75rem;
  color: var(--afridex-text-muted);
}

.industry-card {
  height: 100%;
  background-color: var(--afridex-white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-left: 4px solid var(--afridex-gold);
  border-radius: var(--afridex-radius);
  padding: 1.75rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
  transition: transform var(--afridex-transition), box-shadow var(--afridex-transition), border-color var(--afridex-transition);
}

.industry-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  border-color: var(--afridex-gold);
}

/* .industry-card doubles as a plain <div> (Industries/Why Us pages) and,
 * on the Services overview grid, as a whole-card <a> link — reset the
 * anchor's default blue/underline so it reads identically either way. */
a.industry-card {
  color: inherit;
  text-decoration: none;
}

.industry-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background-color: var(--afridex-cream);
  border-radius: var(--afridex-radius);
  margin-bottom: 1rem;
  transition: transform var(--afridex-transition);
}

.industry-card:hover .industry-card-icon {
  transform: scale(1.1);
}

.industry-card-icon-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.industry-card-title {
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
/* Fade-up reveal: .in-view is toggled by main.js via IntersectionObserver. */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease var(--fade-delay, 0s), transform 0.5s ease var(--fade-delay, 0s);
}

.fade-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* -----------------------------------------------------------------------
 * Why Us page.
 * --------------------------------------------------------------------- */

.why-us-features-section {
  padding-top: 1rem;
  padding-bottom: 3rem;
}

@media (min-width: 992px) {
  .why-us-features-section {
    padding-top: 1.5rem;
    padding-bottom: 4.5rem;
  }
}

.why-us-advantages-section {
  padding-bottom: 3rem;
}

@media (min-width: 992px) {
  .why-us-advantages-section {
    padding-bottom: 4.5rem;
  }
}

.advantages-box {
  background-color: var(--afridex-black);
  color: var(--afridex-white);
  border-radius: 6px;
  padding: 2.5rem 1.5rem;
}

@media (min-width: 992px) {
  .advantages-box {
    padding: 4rem;
  }
}

.advantages-list li {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: transform var(--afridex-transition);
}

.advantages-list li:hover {
  transform: translateX(5px);
}

.advantages-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--afridex-gold);
  flex-shrink: 0;
}

.advantages-icon svg {
  width: 18px;
  height: 18px;
}

.advantages-icon i {
  font-size: 18px;
}

/* Plain box, gold left accent only — resting shadow-sm that deepens on
 * hover, no border-radius and no lift (distinct from .industry-card). */
.whyus-feature-card {
  height: 100%;
  background-color: var(--afridex-white);
  border-left: 4px solid var(--afridex-gold);
  border-radius: var(--afridex-radius);
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: box-shadow var(--afridex-transition);
}

.whyus-feature-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.whyus-feature-title {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}

.advantages-heading {
  font-family: var(--afridex-font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--afridex-white);
}

.service-categories-section,
.service-extra-lists-section {
  padding-top: 1rem;
  padding-bottom: 2rem;
}

.service-features-section {
  padding-top: 1rem;
  padding-bottom: 3rem;
}

@media (min-width: 992px) {
  .service-categories-section,
  .service-extra-lists-section {
    padding-top: 1.5rem;
    padding-bottom: 3rem;
  }

  .service-features-section {
    padding-top: 1.5rem;
    padding-bottom: 4.5rem;
  }
}


.related-services-section {
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: var(--afridex-cream);
}

@media (min-width: 992px) {
  .related-services-section {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}

/* Sidebar Tabs layout (e.g. Construction Materials Supply) — one unified
 * bordered box split into a cream tab list + white content panel. */
.service-tabs-wrap {
  border: 1px solid var(--afridex-border);
}

.service-tab-nav {
  height: 100%;
  background-color: var(--afridex-cream);
}

@media (min-width: 992px) {
  .service-tab-nav {
    border-right: 1px solid var(--afridex-border);
  }
}

.service-tab-link {
  display: block;
  width: 100%;
  padding: 0.9rem 1.25rem;
  border: 0;
  border-bottom: 1px solid var(--afridex-border);
  border-radius: 0;
  background-color: transparent;
  color: var(--afridex-black);
  font-family: var(--afridex-font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: left;
  transition: background-color var(--afridex-transition), color var(--afridex-transition);
}

.service-tab-link:hover {
  background-color: rgba(192, 140, 18, 0.1);
}

.service-tab-link.active {
  background-color: var(--afridex-black);
  color: var(--afridex-white);
}

.service-tab-content {
  height: 100%;
  padding: 1.5rem;
}

.service-tab-heading {
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
}

.service-item-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
}

@media (min-width: 576px) {
  .service-item-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .service-item-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.service-item-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--afridex-black);
  transition: background-color var(--afridex-transition);
}

.service-item-row:hover {
  background-color: var(--afridex-cream);
}

.service-item-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--afridex-gold);
  flex-shrink: 0;
}

/* Category item bullet list — shared by both layouts. */
.service-item-list li {
  position: relative;
  padding: 0.3rem 0 0.3rem 1rem;
  font-size: 0.8125rem;
  color: var(--afridex-text-muted);
  break-inside: avoid;
}

.service-item-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75rem;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--afridex-gold);
}

.service-item-list-cols {
  column-count: 3;
  column-gap: 2rem;
}

@media (max-width: 767.98px) {
  .service-item-list-cols {
    column-count: 1;
  }
}

/* Card Grid layout (Heavy Equipment Rental, Small Equipment & Power Tools,
 * Transportation & Logistics, Manpower Supply). */
.service-category-card {
  background-color: var(--afridex-white);
  border: 1px solid var(--afridex-border);
  border-radius: var(--afridex-radius);
  padding: 1.25rem;
  transition: border-color var(--afridex-transition);
}

.service-category-card:hover {
  border-color: var(--afridex-gold);
}

.service-category-heading {
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--afridex-border);
}

.service-category-icon {
  height: 20px;
  object-fit: contain;
}

.service-category-title {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Extra lists (Rental Options pills / Optional Services checklist). */
.service-pills-box {
  background-color: var(--afridex-cream);
  border-radius: var(--afridex-radius);
  padding: 1.5rem;
}

.service-pills-title {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.service-pill {
  height: 100%;
  display: flex;
  align-items: center;
  background-color: var(--afridex-white);
  border-left: 2px solid var(--afridex-gold);
  border-radius: var(--afridex-radius);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Feature Checklist (Included features/services) and, when reused, as the
 * "Optional Services" stacked variant. */
.service-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--afridex-gold);
  color: var(--afridex-gold-dark);
  font-size: 0.75rem;
}

.service-feature-list li span:last-child {
  color: var(--afridex-text-muted);
}

.service-feature-list-stacked li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
}

.contact-page-section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 992px) {
  .contact-page-section {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}

.contact-info-list .contact-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--afridex-radius);
  background-color: rgba(192, 140, 18, 0.18);
  border: 1px solid rgba(192, 140, 18, 0.4);
  color: var(--afridex-gold-dark);
}

.contact-label {
  display: block;
  font-family: var(--afridex-font-mono);
  letter-spacing: 0.1em;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--afridex-text-muted);
  margin-bottom: 0.15rem;
}

/* Phone/email values render as standard hyperlinks (blue, underlined) to
 * match the Figma reference — distinct from the site's usual gold link treatment. */
.contact-info-list a,
.contact-info-list strong {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--afridex-black);
  text-decoration: none;
}

.contact-info-list a:hover,
.contact-info-list a:focus {
  color: var(--afridex-gold);
}

/* WhatsApp keeps its brand green — the one deliberate exception to the
 * site's gold/dark button palette, since it's a recognisable brand action. */
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background-color: #25d366;
  border: 2px solid #25d366;
  color: var(--afridex-white);
  font-weight: 700;
  text-transform: uppercase;
  padding: 12px 24px;
  border-radius: var(--afridex-radius);
  font-size: 0.875rem;
}

.btn-whatsapp:hover {
  background-color: #1ebe57;
  border-color: #1ebe57;
  color: var(--afridex-white);
}

.btn-whatsapp .btn-whatsapp-arrow {
  transition: transform var(--afridex-transition);
}

.btn-whatsapp:hover .btn-whatsapp-arrow {
  transform: translateX(3px);
}

.contact-success-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 320px;
  height: 100%;
  padding: 3rem 2rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--afridex-radius);
}

.contact-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background-color: var(--afridex-cream);
  color: var(--afridex-gold-dark);
}

.contact-success-title {
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.contact-success-text {
  min-height: 320px;
  height: 100%;
  padding: 3rem 2rem;
  border: 1px solid var(--afridex-border);
}

/* The reference design wants a solid dark submit button here specifically
 * (rather than the site's default gold primary) — scoped to this page only
 * so it doesn't affect the homepage's own .contact-section gold button. */
.contact-page-section .btn-afridex-primary {
  background-color: var(--afridex-black);
  border-color: var(--afridex-black);
  color: var(--afridex-white);
}

.contact-page-section .btn-afridex-primary:hover,
.contact-page-section .btn-afridex-primary:focus {
  background-color: var(--afridex-black-soft);
  border-color: var(--afridex-black-soft);
  color: var(--afridex-white);
}

.contact-form .form-label {
  font-family: var(--afridex-font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--afridex-text-muted);
}

.contact-form .form-control,
.contact-form .form-select {
  background-color: var(--afridex-cream);
  border: 1px solid var(--afridex-border);
  border-radius: var(--afridex-radius);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}

.contact-form .form-control:focus,
.contact-form .form-select:focus {
  background-color: var(--afridex-white);
  border-color: var(--afridex-gold);
  box-shadow: 0 0 0 0.2rem rgba(200, 152, 31, 0.2);
}

/* Honeypot — hidden from real visitors (and screen readers), but still
 * present in the markup/tab order for simple bots that auto-fill every field. */
.afridex-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* -----------------------------------------------------------------------
 * Site-wide floating action buttons (WhatsApp / Call / Email).
 * --------------------------------------------------------------------- */

.floating-actions {
  position: fixed;
  bottom: 20px;
  right: 16px;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.floating-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--afridex-white);
  font-size: 1.25rem;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transition: transform var(--afridex-transition);
}

.floating-action:hover,
.floating-action:focus {
  color: var(--afridex-white);
  transform: scale(1.1);
}

.floating-action-whatsapp {
  background-color: #25d366;
}

.floating-action-call {
  background-color: var(--afridex-gold);
}

.floating-action-email {
  background-color: var(--afridex-black);
}

/* WhatsApp chat popup: clicking the floating button opens this instead of
 * leaving the page straight away; only the panel's own "Start Chat" link
 * actually navigates to wa.me. */
.whatsapp-widget {
  position: relative;
}

.whatsapp-widget-toggle {
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.whatsapp-widget-panel {
  position: absolute;
  bottom: calc(100% + 14px);
  right: 0;
  width: 300px;
  max-width: calc(100vw - 32px);
  background-color: var(--afridex-white);
  border-radius: 12px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  z-index: 1060;
}

.whatsapp-widget-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background-color: #25d366;
  color: #fff;
  padding: 0.85rem 1rem;
}

.whatsapp-widget-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
}

.whatsapp-widget-header-icon svg {
  width: 18px;
  height: 18px;
}

.whatsapp-widget-header-icon i {
  font-size: 18px;
}

.whatsapp-widget-header-text {
  flex: 1;
  font-size: 0.95rem;
  margin: 0;
}

.whatsapp-widget-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  opacity: 0.85;
}

.whatsapp-widget-close:hover,
.whatsapp-widget-close:focus {
  opacity: 1;
}

.whatsapp-widget-body {
  padding: 1rem;
  background-color: #e5ddd5;
}

.whatsapp-widget-bubble {
  margin: 0;
  background-color: var(--afridex-white);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  font-size: 0.9rem;
  color: var(--afridex-black);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.whatsapp-widget-start-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: #25d366;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 0.75rem 1rem;
  transition: background-color var(--afridex-transition);
}

.whatsapp-widget-start-btn:hover,
.whatsapp-widget-start-btn:focus {
  background-color: #1ebe59;
  color: #fff;
}

.whatsapp-widget-start-btn svg {
  width: 18px;
  height: 18px;
}

.whatsapp-widget-start-btn i {
  font-size: 18px;
}

/* -----------------------------------------------------------------------
 * Featured Projects
 * --------------------------------------------------------------------- */

.projects-section {
  background-color: var(--afridex-cream);
}

.project-card {
  height: 100%;
  background-color: var(--afridex-white);
  border: 1px solid var(--afridex-border);
  border-radius: var(--afridex-radius);
  overflow: hidden;
  transition: border-color var(--afridex-transition), box-shadow var(--afridex-transition), transform var(--afridex-transition);
}

.project-card:hover {
  border-color: var(--afridex-gold);
  box-shadow: 0 16px 36px rgba(28, 18, 8, 0.12);
  transform: translateY(-6px);
}

.project-card-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.project-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.project-card:hover .project-card-img {
  transform: scale(1.05);
}

.project-card-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: rgba(192, 140, 18, 0.1);
  color: var(--afridex-gold-dark);
  font-size: 2.25rem;
}

.project-card-body {
  padding: 1.25rem;
  border-top: 3px solid var(--afridex-gold);
}

.project-card-title {
  font-size: 0.9375rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.35rem;
  transition: color var(--afridex-transition);
}

.project-card:hover .project-card-title {
  color: var(--afridex-gold-dark);
}

.project-card-category {
  font-family: var(--afridex-font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--afridex-gold-dark);
  margin-bottom: 0.5rem;
}

.project-card-description {
  font-size: 0.875rem;
  color: var(--afridex-text-muted);
}

/* -----------------------------------------------------------------------
 * Trusted By (client logos) + Testimonials
 * --------------------------------------------------------------------- */

.testimonials-section {
  background-color: var(--afridex-white);
}

.client-logos-slider-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.client-logos-slider {
  flex: 1 1 auto;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.client-logos-slider::-webkit-scrollbar {
  display: none;
}

.client-logo-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 1rem;
}

@media (min-width: 576px) {
  .client-logo-slide {
    flex: 0 0 50%;
  }
}

@media (min-width: 768px) {
  .client-logo-slide {
    flex: 0 0 33.3333%;
  }
}

@media (min-width: 992px) {
  .client-logo-slide {
    flex: 0 0 25%;
  }
}

.client-logos-nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--afridex-white);
  border: 1px solid var(--afridex-border);
  color: var(--afridex-black);
  transition: background-color var(--afridex-transition), color var(--afridex-transition), border-color var(--afridex-transition);
}

.client-logos-nav:hover {
  background-color: var(--afridex-gold);
  border-color: var(--afridex-gold);
  color: var(--afridex-white);
}

.client-logos-nav:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.client-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.client-logo-img {
  max-height: 80px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter var(--afridex-transition), opacity var(--afridex-transition);
}

.client-logo:hover .client-logo-img {
  filter: grayscale(0%);
  opacity: 1;
}

.client-logo-name {
  font-family: var(--afridex-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--afridex-text-muted);
  text-align: center;
}

/* -----------------------------------------------------------------------
 * Our Team
 * --------------------------------------------------------------------- */

.team-section {
  background-color: var(--afridex-cream);
}

.team-card {
  height: 100%;
  background-color: var(--afridex-white);
  border: 1px solid var(--afridex-border);
  border-radius: var(--afridex-radius);
  overflow: hidden;
  text-align: center;
  box-shadow: 0 4px 16px rgba(28, 18, 8, 0.05);
  transition: border-color var(--afridex-transition), box-shadow var(--afridex-transition), transform var(--afridex-transition);
}

.team-card:hover {
  border-color: var(--afridex-gold);
  box-shadow: 0 16px 36px rgba(28, 18, 8, 0.12);
  transform: translateY(-6px);
}

.team-avatar {
  aspect-ratio: 4 / 3.2;
  overflow: hidden;
  background: linear-gradient(135deg, var(--afridex-black) 0%, var(--afridex-gold-dark) 100%);
  border-bottom: 3px solid var(--afridex-gold);
}

.team-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--afridex-transition);
}

.team-card:hover .team-avatar-img {
  transform: scale(1.08);
}

.team-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--afridex-white);
  font-family: var(--afridex-font-heading);
  font-size: 3.5rem;
  font-weight: 700;
}

.team-card-body {
  padding: 1.5rem 1.25rem 1.75rem;
}

.team-card-name {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.team-card-role {
  display: inline-block;
  font-size: 0.6875rem;
  font-family: var(--afridex-font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--afridex-black);
  background-color: var(--afridex-cream);
  border-radius: 50rem;
  padding: 0.35rem 1rem;
}

.team-card-extra {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--afridex-border);
}

.team-card-contact {
  margin-bottom: 1rem;
}

.team-card-contact li {
  margin-bottom: 0.4rem;
}

.team-card-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--afridex-text-muted);
  transition: color var(--afridex-transition);
}

.team-card-contact a:hover {
  color: var(--afridex-gold);
}

.team-card-contact-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}

.team-card-socials {
  display: flex;
  gap: 0.5rem;
  margin: 0;
}

.team-card-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--afridex-cream);
  color: var(--afridex-black);
  font-size: 1rem;
  transition: background-color var(--afridex-transition), color var(--afridex-transition);
}

.team-card-socials a:hover {
  background-color: var(--afridex-gold);
  color: var(--afridex-white);
}
@media(max-width: 1199px) {
	.header-cta {
		padding-inline: 20px;
	}
	.btn-afridex-primary, .btn-afridex-secondary {
    padding: 12px 20px;
    font-size: 0.85rem;
    letter-spacing: 0.025em;
}
.page-hero-heading {
    font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem);
}
	.division-card-link {
    opacity: 1;
}
}
@media(max-width: 991px) {
    .container, .container-md, .container-sm {
        max-width: 100%;
    }
.h1 {
    font-size: clamp(1.75rem, 1.35rem + 1vw, 2.25rem);
}
	.navbar-brand img {
    height: 70px;
    width: auto;
}
	.header-cta .btn-arrow-icon { display:none}
	.btn-afridex-primary, .btn-afridex-secondary {
    padding: 10px 16px;
    font-size: 0.825rem;
    letter-spacing: 0.0125em;
}
	.commitment-section .h1, .vmv-section .h1, .contact-section .h1, .industries-section .h1, .equipment-content .h1, .cta-section .h1, .footer-cta-card .h1 {
    font-size: clamp(1.875rem, 1.6rem + 1.34vw, 2.25rem);
    font-size: clamp(1.75rem, 1.35rem + 1vw, 2.25rem);
}
	.page-hero-heading {
        /* font-size: clamp(1.75rem, 3vw + 0.5rem, 2.25rem); */
    }
	#about-story.about-section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}
	.navbar-nav .dropdown-menu {
   display:block !important; border:none; padding-left:20px
}
	.navbar-nav .dropdown-menu .nav-item .nav-link {
    font-family: var(--afridex-font-body);
    text-transform: uppercase;
}


.navbar .navbar-toggler {
    padding: 3px;
}
.navbar .navbar-toggler:focus {
    box-shadow: none;
}	.navbar .navbar-toggler[aria-expanded="true"]  { color:red; border-color:red}

	.navbar-toggler-icon {
    width: auto;
    height: auto;
    background:none;
    background-size: 100%;
    font-size: 34px;
    line-height: 1;
}

.navbar .navbar-toggler {
    padding: 3px;
}
.navbar .navbar-toggler:focus {
    box-shadow: none;
}	.navbar .navbar-toggler[aria-expanded="true"]  { color:red; border-color:red}

.navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
    content: "\f62a";
}
}
@media(max-width: 767px) {
    .container, .container-sm {
        max-width: 100%;
    }
	.header-cta .btn-arrow-icon { display:none}
.hero-content-wrap {
    max-width: 100%;
    padding: 2.5rem 1.5rem 8rem;
}
	
.hero-heading {
  letter-spacing: 0px;
  font-size: 2rem;
  font-size: calc(2rem + 1.5vw);
}
.hero-stat-label {
    font-size: calc(0.5rem + 0.5vw);
    letter-spacing: 0px;
    line-height: 1.75;
    display:block;
    margin-top: 0.25rem;
}	
.hero-stat-item {
    padding: 1rem 0.5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.hero-stat-value {
    font-size: 1.25rem;
}
	.hero-description {
	max-width:520px;
	margin-bottom: 1.25rem;
}	
	.footer-cta-card {
    padding: 2.5rem 1.5rem;
}
	.navbar .navbar-nav { padding-top:10px}
.navbar .navbar-nav .nav-item .nav-link {
    padding: 5px 12px;
}

}
@media(max-width: 575px) {
.hero-content-wrap {
    max-width: 100%;
    padding: 2.25rem 1.25rem 10rem;
}
.hero-heading {
    letter-spacing: 0px;
    font-size: calc(1.25rem + 2.5vw);
    margin-bottom: 1rem;
}
.hero-subtitle {
 margin-bottom: 1rem !important;
}
.hero-btn-scale span { display:none
}
.hero-stats .container { padding:0px }
.hero-stat-item {
    padding: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.lead {
    font-size: 1rem;
}
.division-card-link {
    opacity: 1;
}
.industry-item {
    padding:0.75rem 0.5rem;
}
	.commitment-section, .vmv-section, .contact-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
	.page-hero-heading {
         font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
    }
	.footer-cta-card .h1 {font-size: clamp(1.35rem, 1.3rem + 0.9vw, 2.25rem);}

}

/* Open mobile/tablet nav panel — matches Bootstrap's own navbar-expand-lg
 * collapse breakpoint so both phone and tablet get the same redesigned
 * card-style menu instead of the old bare list of links. */
@media (max-width: 991.98px) {
	.navbar .navbar-toggler[aria-expanded="true"] {
		color: var(--afridex-gold);
		border-color: var(--afridex-gold);
	}

	.navbar-collapse {
		background: var(--afridex-white);
		border: 1px solid var(--afridex-border);
		border-radius: var(--afridex-radius);
		box-shadow: 0 12px 32px rgba(26, 15, 6, 0.14);
		margin-top: 0.75rem;
		padding: 0.5rem;
	}

	.navbar-collapse .navbar-nav {
		margin: 0 !important;
	}

	.navbar-collapse .nav-item {
		border-bottom: 1px solid var(--afridex-border);
	}

	.navbar-collapse .nav-item:last-child {
		border-bottom: none;
	}

	.navbar-collapse .nav-item.dropdown {
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.navbar-collapse .nav-link {
		position: relative;
		flex: 1 1 auto;
		padding: 0.85rem 1rem 0.85rem 1.15rem;
	}

	.navbar-collapse .nav-item > .nav-link::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0.35rem;
		bottom: 0.35rem;
		width: 3px;
		border-radius: 2px;
		background: var(--afridex-gold);
		opacity: 0;
		transition: opacity var(--afridex-transition);
	}

	.navbar-collapse .nav-item.active > .nav-link::before,
	.navbar-collapse .nav-link:hover::before {
		opacity: 1;
	}

	.navbar-collapse .nav-link:hover,
	.navbar-collapse .nav-item.active > .nav-link {
		background: var(--afridex-cream);
	}

	.navbar-collapse .nav-dropdown-toggle {
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		margin-left: 0;
		font-size: 0.9rem;
	}

	.navbar-collapse .dropdown-menu {
		width: 100%;
		background: transparent;
		box-shadow: none;
		border: none;
		margin: 0 0 0.25rem;
		padding: 0;
	}

	.navbar-collapse .dropdown-menu .nav-link {
		padding-left: 2rem;
	}
}