/* ==========================================================================
   Namoye premium visual theme — shared across landing & category pages.
   Retheme pass over the existing Bootstrap-based component classes
   (feature-box, featured-box, small-title, h2-title, btn-success, etc.)
   rather than rebuilding markup. Scoped to override inline legacy colors
   and backgrounds without touching the ~60 page/category templates.
   ========================================================================== */

:root {
  --nm-ink: #23281F;
  --nm-muted: #59543F;
  --nm-muted-2: #8A836B;
  --nm-line: #EBE1CC;
  --nm-cream: #FBF6EC;
  --nm-panel: #FFFEFB;
  --nm-green: #1E6B4E;
  --nm-green-dark: #163F2F;
  --nm-dark: #1E2A22;
  --nm-terracotta: #D2662F;
  --nm-terracotta-dark: #B3552A;
}

body {
  font-family: 'Work Sans', sans-serif;
}

h1, h2, h3, h4, h5,
.cattitle, .h2-title, .small-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 480;
}

/* Inline legacy accent colors scattered across templates */
[style*="4772d9"],
[style*="3ac162"],
[style*="3bc162"] {
  color: var(--nm-green) !important;
}

/* ============ HERO SECTIONS ============ */
#hero {
  background: var(--nm-dark) !important;
}

#hero .cattitle,
#hero .SliderSubheading h2,
#hero .SliderSubheading h3 {
  font-family: 'Fraunces', Georgia, serif;
}

/* ============ SECTION HEADINGS ============ */
.small-title {
  display: inline-block;
  font-family: 'Work Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  background: #E3EFE6;
  color: var(--nm-green);
}

.h2-title {
  color: var(--nm-ink);
}

.title-line,
.title-line-left {
  background: var(--nm-terracotta);
}

/* ============ FEATURE / SERVICE CARDS ============ */
.feature-box,
.box.grid-inner {
  background: var(--nm-panel) !important;
  border: 1px solid var(--nm-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

.feature-box .fbox-icon i,
.feature-box .fbox-img i,
.box.grid-inner i,
.benifit h4 {
  color: var(--nm-green) !important;
}

.fbox-content h3,
.fbox-content h4 {
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
  color: var(--nm-ink);
}

/* ============ WHY-US / BENEFIT BLOCKS ============ */
.featured-box .featured-icon i {
  color: var(--nm-green) !important;
}

.featured-content h3,
.featured-content h4 {
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
}

/* ============ CTA / PROMO BANDS ============ */
.promo,
blockquote.quote {
  background: var(--nm-cream);
  border-radius: 16px;
}

.punch-line {
  background: #E3EFE6;
  border-radius: 14px;
  padding: 18px 20px !important;
  color: var(--nm-green-dark);
}

.punch-line h5 {
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  margin: 0;
}

/* ============ BUTTONS ============ */
.btn-success,
a.btn-success,
.customfrmsubmit {
  background: var(--nm-terracotta) !important;
  border-color: var(--nm-terracotta) !important;
  border-radius: 999px !important;
  color: #FFF7EE !important;
}

.btn-success:hover,
a.btn-success:hover {
  background: var(--nm-terracotta-dark) !important;
  border-color: var(--nm-terracotta-dark) !important;
}

/* ============ FORMS ============ */
.form-control {
  border: 1.5px solid #E3D9C6 !important;
  border-radius: 9px !important;
}

.form-control:focus {
  border-color: var(--nm-green) !important;
  box-shadow: 0 0 0 3px rgba(30, 107, 78, 0.12) !important;
}

/* ============ CATEGORY GRID (cat-grids.php) ============ */
.cat-grids .feature-box,
.child-cat-grids .feature-box {
  transition: border-color 0.15s;
}

.cat-grids .feature-box:hover,
.child-cat-grids .feature-box:hover {
  border-color: var(--nm-green) !important;
}

/* ============ TESTIMONIALS ============ */
#namoye-testimonials,
#namoye-testimonials.flip-pad {
  background: var(--nm-cream);
}

#namoye-testimonials .testimonial {
  background: var(--nm-panel);
  border: 1px solid var(--nm-line);
  border-radius: 14px;
}

/* ==========================================================================
   PREMIUM POLISH PASS
   Fixes the "templated Bootstrap" tells: shouty all-caps headings, bare
   floating icons with no containment, flat textureless hero, no depth
   on cards/buttons, and paragraphs stretching the full container width.
   ========================================================================== */

/* Kill the forced uppercase on every section heading — this was the
   single biggest "generic template" signal. Let serif weight/size do
   the hierarchy work instead of shouting. */
.heading-block h1,
.heading-block h2,
.heading-block h3,
.heading-block h4,
.fbox-content h3,
.fbox-content h4,
.featured-content h3,
.featured-content h4,
#hero h2.cattitle,
.cattitle {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.heading-block p,
.heading-block h5 {
  max-width: 640px;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1.6;
}

/* Section rhythm: more breathing room than the default Bootstrap 70px */
section {
  padding: 88px 40px;
}

/* ============ ICON CONTAINMENT ============
   Bare <i> icon glyphs floating with no background read as an unfinished
   icon-font demo. Give every icon a sized, colored badge to sit in. */
.fbox-icon,
.feature-box .fbox-icon,
.featured-icon,
.box.grid-inner > i,
.box.grid-inner > i.fa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #E3EFE6;
  margin: 0 auto 16px !important;
}

.fbox-icon i,
.featured-icon i {
  font-size: 22px;
  margin: 0;
}

.box.grid-inner > i.fa {
  font-size: 22px !important;
}

.featured-col {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

/* ============ HERO TEXTURE ============
   A flat color swap still reads as "just changed the background color".
   Add the same subtle diagonal-line texture used on the rest of the
   premium concept so the dark hero has depth, not just a tint change. */
#hero {
  position: relative;
  overflow: hidden;
  background-image: repeating-linear-gradient(120deg, rgba(251, 246, 236, 0.05) 0px, rgba(251, 246, 236, 0.05) 1px, transparent 1px, transparent 64px) !important;
}

#hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -140px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  border: 1px solid rgba(251, 246, 236, 0.12);
  pointer-events: none;
}

/* ============ CARD DEPTH ============ */
.feature-box,
.box.grid-inner {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.feature-box:hover,
.box.grid-inner:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -24px rgba(30, 42, 34, 0.25) !important;
  border-color: var(--nm-green) !important;
}

/* ============ BUTTON WEIGHT ============ */
.btn-success,
a.btn-success,
.customfrmsubmit {
  padding: 14px 32px !important;
  font-weight: 600 !important;
  box-shadow: 0 14px 30px -12px rgba(210, 102, 47, 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-success:hover,
a.btn-success:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px -12px rgba(210, 102, 47, 0.5);
}