:root {
  --primary: #334E68;
  --secondary: #4E9F3D;
  --light-bg: #F7F9FB;
  --med-bg: #CCCCCC;
  --dark-text: #1A1A1A;

  /* Brand colors */
  --brand-copper: #CC7849;
  --brand-blue: #266798;
  --brand-green: #39999e;
}

/* Bootstrap overrides */
.bg-primary {
  background-color: var(--brand-blue) !important;
}

.text-primary {
  color: var(--brand-blue) !important;
}

.btn-success {
  background-color: var(--brand-copper);
  border-color: var(--brand-copper);
}
.btn-success:hover {
  background-color: var(--brand-copper);
  border-color: var(--brand-copper);
}

.no-shadow {
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

.accordion-button:not(.collapsed) {
  background-color: var(--med-bg);
  color: var(--dark-text);
  font-weight: bold;
}

/* Other */
.fade-section { opacity: 0; transform: translateY(20px); transition: all 0.8s ease; }
.fade-section.visible { opacity: 1; transform: translateY(0); }

.active-service {
  background-color: rgba(57, 153, 158, 0.1);
  border-color: var(--brand-green);
}

/* Smaller hero block for subpages */
.hero {
  padding: 3rem 1rem;
  font-size: 1.5rem;
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('/assets/images/business-consulting.jpg');
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
}
.subpage-hero {
  padding: 1rem;
  font-size: 1.5rem;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-green));
  color: #fff;
  text-align: center;
}

/* Hero heading smaller size */
.subpage-hero h1 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0;
}

.subpage-hero p.lead {
  font-size: 1rem;
  margin-top: 1rem;
  margin-bottom: 0;
}

/* Button styles with brand colors */
.btn-primary {
  background-color: var(--brand-copper);
  border-color: var(--brand-copper);
  color: #fff;
  transition: background-color 0.3s ease;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #d67a2a;
  border-color: #d67a2a;
  color: #fff;
}

.btn-outline-primary {
  color: var(--brand-copper);
  border-color: var(--brand-copper);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--brand-copper);
  color: #fff;
  border-color: var(--brand-copper);
}

/* Secondary buttons */
.btn-outline-secondary {
  color: var(--brand-copper);
  border-color: var(--brand-copper);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--brand-blue);
  color: #fff;
  border-color: var(--brand-blue);
}

/* Form inputs */
.form-control {
  border-radius: 0.25rem;
  border: 1px solid var(--brand-green);
  transition: border-color 0.3s ease;
}

.form-control:focus {
  border-color: var(--brand-copper);
  box-shadow: 0 0 5px var(--brand-copper);
  outline: none;
}

/* Reduce Bootstrap feel by adjusting spacing */
.container {
  max-width: 1140px;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Add subtle shadows to cards or sections */
.card, .fade-section {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
  background-color: #fff;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

/* Header logo styling */
.site-logo {
  max-height: 60px;
  width: auto;
  margin: 0 1rem;
  vertical-align: middle;
}

/* Navigation adjustments */
.navbar {
  background-color: #fff;
  border-bottom: 2px solid var(--brand-green);
  padding: 0.5rem 1rem;
}

.navbar-brand {
  background-color: #eee;
  position: relative;
  border-radius: 8px;
}

/* Typography */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
  line-height: 1.6;
}

/* Add images styling */
.content-image {
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

#services {
  background: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)), url('/assets/images/empty-meeting-room.jpg');
  background-size: cover;
  background-position: center;
}

#services .card {
  background-color: rgba(255,255,255,0.7);
}

#case-studies {
  background: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)), url('/assets/images/vans.png');
  background-size: cover;
  background-position: center;
}

#articles {
  background: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)), url('/assets/images/leaky-faucet.jpg');
  background-size: cover;
  background-position: center;
}

.articles-image {
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  object-position: center; 
  border-radius: 8px;
}

.article-image {
  width: 40%; 
  float: left; 
  border-radius: 8px;
  margin-right: 15px;
}

/* Background images for services cards */
.col-md-6 > .p-4.border.rounded.shadow-sm.h-100 {
  background-color: rgba(255, 255, 255, 0.85);
  position: relative;
  color: #000;

}

/* Overlay to ensure text readability */
.col-md-6 > .p-4.border.rounded.shadow-sm.h-100.services-card-operations::before,
.col-md-6 > .p-4.border.rounded.shadow-sm.h-100.services-card-leadership::before,
.col-md-6 > .p-4.border.rounded.shadow-sm.h-100.services-card-growth::before,
.col-md-6 > .p-4.border.rounded.shadow-sm.h-100.services-card-ai::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 0;
  border-radius: 0.25rem;
}

.col-md-6 > .p-4.border.rounded.shadow-sm.h-100.services-card-operations > *,
.col-md-6 > .p-4.border.rounded.shadow-sm.h-100.services-card-leadership > *,
.col-md-6 > .p-4.border.rounded.shadow-sm.h-100.services-card-growth > *,
.col-md-6 > .p-4.border.rounded.shadow-sm.h-100.services-card-ai > * {
  position: relative;
  z-index: 1;
}