body {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
}
div.theme-atomik div.ccm-block-feature-link div.ccm-block-feature-link-text p {
    color: rgb(33, 37, 41);
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.ccm-page h1, 
.ccm-page h2, 
.ccm-page h3 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    text-transform: none;
}

/* Display / Hero text */
.hero-title,
.hero-heading,
.display-1,
.display-2,
.display-3,
.display-4,
.ccm-block-hero-image h1 {
    font-family: 'Open Sans', sans-serif;
    text-transform: none;
}
div.theme-atomik div.ccm-block-hero-image div.ccm-block-hero-image-text h1, div.theme-atomik div.ccm-block-hero-image div.ccm-block-hero-image-text .h1 {
  font-family: "Open Sans", sans-serif;
}

/* Hero Image Offset Title – override Oswald set color */
div.theme-atomik div.ccm-block-hero-image-offset-title 
div.ccm-block-hero-image-text h1,
div.theme-atomik div.ccm-block-hero-image-offset-title 
div.ccm-block-hero-image-text .h1 {
    font-family: 'Open Sans', sans-serif;
}
div.theme-atomik div.ccm-block-hero-image-offset-title div.ccm-block-hero-image-text p {
    color: rgb(33, 37, 41);
}

/* Kill Oswald everywhere */
div.theme-atomik [style*="Oswald"],
div.theme-atomik .display-1,
div.theme-atomik .display-2,
div.theme-atomik .display-3,
div.theme-atomik .h1,
div.theme-atomik .h2,
div.theme-atomik .h3 {
    font-family: 'Open Sans', sans-serif;
    text-transform: none;
}

/* Feature Link – unify typography */
div.theme-atomik div.ccm-block-feature-link h3,
div.theme-atomik div.ccm-block-feature-link h4,
div.theme-atomik div.ccm-block-feature-link .h3,
div.theme-atomik div.ccm-block-feature-link .h4 {
    font-family: 'Open Sans', sans-serif;
    text-transform: none;
}

/* changes default height of the logo in the nav bar from 30 to 50 */
div.ccm-page div.ccm-block-top-navigation-bar .navbar-brand img {
    max-height: 50px;
}

/* added margin-bottom to the testimonial so when they stack on mobile there is a space */
.ccm-block-testimonial-hero {
    margin-bottom:5px;
}

/* START - Make the custom layout wrap on mobile for the nutrition counseling journey */
#ccm-layout-column-wrapper-55 {
     display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

#ccm-layout-column-wrapper-55 div.ccm-layout-column {
    flex: 1 1 18%; /* 4 items per row on larger screens */
}

/* Mobile styles */
@media (max-width: 768px) {
    #ccm-layout-column-wrapper-55 div.ccm-layout-column {
        flex: 1 1 100%; /* 1 item per row on mobile */
    }
}

@media (max-width: 480px) {
    #ccm-layout-column-wrapper-55 div.ccm-layout-column {
        flex: 1 1 100%; /* 1 item per row on very small screens */
    }
}
/* END of make the custom layout wrap on mobile for the nutrition counseling journey */

/* makes text white in an orange button */
.btn-accent {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
}

/* removes the hero image color overlay 
div.ContactHeader div.ccm-block-hero-image div.ccm-block-hero-image-cover {
    background-color: rgba(0, 0, 0, 0);
}*/

/* removes bottom space after the h tags line when in a grey section */
.theme-atomik div.stripe.one-column div.stripe-title h1, 
.theme-atomik div.stripe.one-column div.stripe-title h2, 
.theme-atomik div.stripe.one-column div.stripe-title h3, 
.theme-atomik div.stripe.one-column div.stripe-title h4, 
.theme-atomik div.stripe.one-column div.stripe-title h5 {
    margin-bottom: .5rem;
}

/* left justify the text of an offset hero image block, leave title centered */
div.theme-atomik div.ccm-block-hero-image-offset-title div.ccm-block-hero-image-text p {
    text-align: left;
}

/* fix color of social icons in the footer and add space between logo */
div.theme-atomik footer .ccm-block-social-links a {
    color: #447485;
    line-height: 3;
}

/* underline links */
div.ccm-block-content a {
    text-decoration: underline;
}
div.theme-atomik footer a {
    text-decoration: underline;
    color: #447485;
}

/* center the social links in the footer
.ccm-block-social-links ul.list-inline {
    justify-content: center;
} */

/* nav bar link color and hover color (there was a weird light blue) */
div.ccm-page div.ccm-block-top-navigation-bar .navbar .nav-link:hover {
   color: #000;
   text-decoration: underline;
}
div.ccm-page div.ccm-block-top-navigation-bar .navbar .nav-link {
   color: rgb(33, 37, 41); 
}
div.ccm-page div.ccm-block-top-navigation-bar.transparency-enabled:not(.transparency-temporarily-disabled) .navbar .nav-item a.nav-link:hover {
  color: #fff;
  text-decoration: underline;
}