/* Reduce vertical space in the Healthcare Insights section by 40% */
#healthcare-insights {
  /* Reduce padding by 40% (from 4rem to 2.4rem) */
  padding-top: 2.4rem !important;
  padding-bottom: 2.4rem !important;
}

/* Reduce the triangular separator after the Healthcare Insights section */
#healthcare-insights + .post-after {
  /* Reduce border size by 40% (from 50px to 30px) */
  border-top-width: 30px !important;
  /* Reduce horizontal size by 40% (from 60px to 36px) */
  border-left-width: 36px !important;
  border-right-width: 36px !important;
  /* Adjust bottom position to account for smaller size */
  bottom: -30px !important;
}

/* Also reduce padding on the next section (Contact) to maintain visual balance */
#contact {
  /* Reduce padding by 40% (from 4rem to 2.4rem) */
  padding-top: 2.4rem !important;
  padding-bottom: 2.4rem !important;
}

/* Make sure the entire page has a consistent background */
body {
  background-color: #f2efe8 !important;
}

main.content {
  background-color: #f2efe8 !important;
}

/* Additional fix for the Healthcare Insights section */
article#healthcare-insights {
  padding-top: 2.4rem !important;
  padding-bottom: 2.4rem !important;
}

/* Reduce padding on the section content */
article#healthcare-insights .post-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Remove the horizontal line on the services page */
body > div.post-holder > article.post.first > section.post-content > hr {
  display: none !important;
}

/* Alternative selector for the services page */
.page-template .post-content hr,
.post-content hr {
  display: none !important;
}

/* =============================== */
/* MOBILE HEADER / LOGO OVERLAP FIX */
/* =============================== */

@media (max-width: 768px) {

  /* Push hero content down so it doesn't sit under navbar/logo */
  header, .header, .intro-header, .hero {
    padding-top: 90px !important;
  }

  /* Ensure logo/nav does not overlap content */
  .navbar, .navbar-brand, .logo {
    z-index: 1000 !important;
  }

  /* Optional: reduce logo size on mobile */
  .navbar-brand img, .logo img {
    max-height: 40px !important;
    width: auto !important;
  }

  /* Optional: give nav bar breathing room */
  .navbar {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}


/* =============================== */
/* BLOG PAGE LOGO */
/* =============================== */

.logo-container {
  text-align: center;
  margin-bottom: 1.5rem;
}

.logo-container a {
  text-decoration: none !important;
  border-bottom: none !important;
}

.page-logo {
  max-width: 220px;
  height: auto;
  display: inline-block;
  transition: opacity 0.2s ease;
}

.page-logo:hover {
  opacity: 0.85;
}

/* Mobile sizing */
@media (max-width: 768px) {
  .page-logo {
    max-width: 160px;
  }
}


/* =============================== */
/* HOMEPAGE BUTTON FOR BLOG */
/* =============================== */


/* ONLY applies to the blog CTA button */
.cta-wrapper {
  text-align: center;
  margin-top: 2.5rem;
}

.cta-wrapper a {
  display: inline-block;
  padding: 18px 32px;
  background-color: #ffcc00;
  color: #000000 !important;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 10px;
  border: 2px solid #000000;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: all 0.2s ease;
}

.cta-wrapper a:hover {
  background-color: #ffd633;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.2);
}