/* ==========================================================================
   Brand palette (derived from Krafted DynaMix Solutions letterhead)
   --------------------------------------------------------------------------
   Primary:   #F79646  (orange – main brand colour, used for navbar, buttons)
   Accent:    #9BBB59  (green – tagline, highlights, subtle accents)
   Neutrals:  Dark text / backgrounds handled via Bootstrap defaults
   ========================================================================== */

:root {
  --kds-primary: #f79646;      /* main brand orange */
  --kds-primary-dark: #c26d22; /* darker orange for hover/focus */
  --kds-accent: #9bbb59;       /* green accent */
}

/* Override Bootstrap primary with brand orange */
.bg-primary {
  background-color: var(--kds-primary) !important;
}

.btn-primary {
  background-color: var(--kds-primary) !important;
  border-color: var(--kds-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--kds-primary-dark) !important;
  border-color: var(--kds-primary-dark) !important;
}

/* Secondary accent usage – for small badges, links, etc. */
.text-accent {
  color: var(--kds-accent) !important;
}

.bg-accent {
  background-color: var(--kds-accent) !important;
}

/* ==========================================================================
   HERO SECTION (Home)
   ========================================================================== */

.hero-section {
  position: relative;
  min-height: 80vh;
  padding-top: 80px; /* space for fixed navbar */
  background-image: url("../img/hero-consulting.jpg");
  background-size: cover;
  background-position: center;
  color: #fff;
}

/* Overlay uses a mix of dark neutral and brand orange */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(20, 24, 33, 0.9),    /* deep neutral for contrast */
    rgba(247, 150, 70, 0.75)  /* brand orange */
  );
}

.hero-section .container {
  position: relative;
  z-index: 1;
}

/* Hero info card on the right */
.hero-card {
  border-radius: 1.5rem;
  background-color: #ffffff;
  color: #333333; /* FIX: ensure text is dark on white background */
}

/* Expertise list inside hero card */
.hero-expertise-list li {
  margin-bottom: 0.2rem;
  color: #555555; /* FIX: explicitly set dark text so it’s visible */
}

/* Optional: tagline accent */
.hero-tagline {
  color: var(--kds-accent);
}

/* ==========================================================================
   SUBPAGE HERO (used on Services, About, Solutions, Engagement, Contact)
   ========================================================================== */

.page-hero {
  padding-top: 90px; /* for fixed navbar */
  padding-bottom: 40px;
  background: linear-gradient(
    135deg,
    #fffaf6,
    #fefefe
  ); /* subtle warm tint that complements orange */
  border-bottom: 1px solid #f0e2d5;
}

.page-hero h1 {
  font-weight: 700;
  color: #333333;
}

.page-hero p {
  max-width: 700px;
  color: #666666;
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */

.navbar-brand {
  font-size: 1.1rem;
  letter-spacing: 0.03em;
}

/* FIX: Make the "Contact" button in navbar actually look like a light button,
   not fully orange, and keep it readable */
.navbar .btn-light.text-primary {
  background-color: #ffffff;
  color: var(--kds-primary) !important;
  border-color: #ffffff;
}

.navbar .btn-light.text-primary:hover,
.navbar .btn-light.text-primary:focus {
  background-color: #fff3e0;            /* very light orange tint */
  color: var(--kds-primary-dark) !important;
  border-color: #fff3e0;
}

/* ==========================================================================
   GENERIC SPACING & ELEMENTS
   ========================================================================== */

section {
  scroll-margin-top: 80px;
}

/* Cards (home/solutions) */
.card img {
  height: 190px;
  object-fit: cover;
}

/* Icon-like bullet badges (home 'Why us') */
.badge {
  border-radius: 999px;
  background-color: var(--kds-primary);
  color: #ffffff;
}

/* ==========================================================================
   SERVICES PAGE
   ========================================================================== */

.service-section {
  /* wrapper if you want additional background tweaks later */
}

.service-block {
  margin-bottom: 1rem;
}

/* Vertically center the image column for each service row (desktop and up) */
.service-block .col-lg-6:nth-child(2) {
  display: flex;
  align-items: center;      /* vertical centering */
  justify-content: center;  /* horizontal centering */
}

.service-list li {
  margin-bottom: 0.4rem;
  line-height: 1.55;
}

.service-image {
  max-height: 320px;
  width: 100%;
  object-fit: cover;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer {
  font-size: 0.85rem;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 767.98px) {
  .hero-section {
    text-align: center;
  }

  .page-hero {
    text-align: center;
  }

  /* On small screens, let normal stacking handle layout, not flex centering */
  .service-block .col-lg-6:nth-child(2) {
    display: block;
  }
}