/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/***********************************************/

/*****************************************/
/* CUSTOM FONT - USING CSS */
/*****************************************/
/* Light */
@font-face {
  font-family: 'CentraNo2';
  src: url('https://8339855.fs1.hubspotusercontent-na1.net/hubfs/8339855/assets/fonts/centra-no2-light.woff2') format('woff2'),
       url('https://8339855.fs1.hubspotusercontent-na1.net/hubfs/8339855/assets/fonts/centra-no2-light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Light Italic */
@font-face {
  font-family: 'CentraNo2';
  src: url('https://8339855.fs1.hubspotusercontent-na1.net/hubfs/8339855/assets/fonts/centra-no2-light-italic.woff2') format('woff2'),
       url('https://8339855.fs1.hubspotusercontent-na1.net/hubfs/8339855/assets/fonts/centra-no2-light-italic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Regular (Book) */
@font-face {
  font-family: 'CentraNo2';
  src: url('https://8339855.fs1.hubspotusercontent-na1.net/hubfs/8339855/assets/fonts/centra-no2-book.woff2') format('woff2'),
       url('https://8339855.fs1.hubspotusercontent-na1.net/hubfs/8339855/assets/fonts/centra-no2-book.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Regular Italic */
@font-face {
  font-family: 'CentraNo2';
  src: url('https://8339855.fs1.hubspotusercontent-na1.net/hubfs/8339855/assets/fonts/centra-no2-italic.woff2') format('woff2'),
       url('https://8339855.fs1.hubspotusercontent-na1.net/hubfs/8339855/assets/fonts/centra-no2-italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Bold */
@font-face {
  font-family: 'CentraNo2';
  src: url('https://8339855.fs1.hubspotusercontent-na1.net/hubfs/8339855/assets/fonts/centra-no2-bold.woff2') format('woff2'),
       url('https://8339855.fs1.hubspotusercontent-na1.net/hubfs/8339855/assets/fonts/centra-no2-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Bold Italic */
@font-face {
  font-family: 'CentraNo2';
  src: url('https://8339855.fs1.hubspotusercontent-na1.net/hubfs/8339855/assets/fonts/centra-no2-bold-italic.woff2') format('woff2'),
       url('https://8339855.fs1.hubspotusercontent-na1.net/hubfs/8339855/assets/fonts/centra-no2-bold-italic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Headings h1–h4: Light */
h1, h2, h3, h4 {
  font-family: 'CentraNo2', sans-serif;
  font-weight: 300;
  font-style: normal;
}

/* h5–h6, paragraphs, and other text elements: Book (400) */
p, h5, h6, li, a, blockquote, label, input, textarea, button {
  font-family: 'CentraNo2', sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Italics */
h1 em, h2 em, h3 em, h4 em {
  font-weight: 300;
  font-style: italic;  /* Light Italic */
}
p em, h5 em, h6 em, li em, a em, blockquote em {
  font-weight: 400;
  font-style: italic;  /* Book Italic */
}

/* Bold */
strong {
  font-family: 'CentraNo2', sans-serif;
  font-weight: 700;
}

/* Bold Italic */
strong em, em strong {
  font-family: 'CentraNo2', sans-serif;
  font-weight: 700;
  font-style: italic;
}

/* Tabs (default Book / Regular) */
.c-tabs .c-tab {
  font-family: 'CentraNo2', sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Make form controls use CentraNo2 everywhere */
select, option, optgroup {
  font-family: 'CentraNo2', sans-serif !important;
  font-weight: 400;
}

/* BLOGS - Make blog details, summaries, and all blog content use CentraNo2 font */
.blog-index__post-author,
.blog-index__post-author span,
.blog-index__post-author .pub-date,
.blog-index__post-title,
.blog-index__post-meta,
.hhs-post-summary,
[aria-label="Post summary"],
.post__category-selector,
.post__category-selector option,
.blog-index__post-content,
.blog-index__post-content *,
.blog-index__post-content p {
  font-family: 'CentraNo2', sans-serif !important;
  font-weight: 400 !important; /* Book weight for metadata and summary */
  font-style: normal !important;
}


/* BLOGS - Blog post titles - Light weight (300) */
.blog-post__title,
.blog-post__title span,
h1.blog-post__title,
.blog-index__post-content .card_post_title,
.blog-index__post-content .card_post_title a {
  font-family: 'CentraNo2', sans-serif !important;
  font-weight: 300 !important; /* Light weight for titles */
  font-style: normal !important;
}


/* Force blog audio player to use CentraNo2 */
#hs_cos_wrapper_blog_post_audio,
#hs_cos_wrapper_blog_post_audio * {
  font-family: 'CentraNo2', sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* Very small devices: shrink headings */
@media (max-width: 300px) {
  h1 { font-size: 32px !important; line-height: 1.2 !important; }
  h2 { font-size: 26px !important; line-height: 1.3 !important; }
  h3 { font-size: 22px !important; line-height: 1.3 !important; }
  h4 { font-size: 18px !important; line-height: 1.3 !important; }
}

/* Adjust block quote margin */
blockquote {
  margin-left: 15px;
}


/*****************************************/
/* ALL PAGES */
/*****************************************/
/* Hide the line break on screens smaller than 992px */
@media (max-width: 991px) {
  .break-992 { display: none; }
}

/* Add Margin Around the Buttons */
.c-content-con .c-cta-con {
  margin: 4px !important;  /* !important belongs inside the value */
}


/* Footer - Align the headings to the center on screen sizes 568px and smaller */
@media (max-width: 568px) {
  .hhs-foot-nav-col h5 {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  .hhs-foot-nav-col h5 span {
    display: inline-block;
    text-align: center;
    width: 100%;
  }
}

/*****************************************/
/* HOMEPAGE */
/*****************************************/
/* Hero Section – 2 CTAs side by side (>=400px) */
@media (min-width: 400px) {
  .cta-wrapper {
    display: flex;
    gap: 15px;        /* space between CTAs */
    flex-wrap: wrap;  /* prevent overflow */
  }
}

/* Screens smaller than 400px: stacked with spacing */
@media (max-width: 399px) {
  .cta-wrapper > div:first-child {
    margin-bottom: 15px;
  }
}

/* Video Section – Remove padding/margin from the video card */
.full-video-section .c-video-card,
.full-video-section .c-video-card-outer,
.full-video-section .c-video-card .hs-video-container {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* FLEXI TAB Module – space tabs */
.c-tabs .c-tab {
  margin: 0 16px;
}

/* VERSA CARD MODULE - Add gray border */
.outlined-card .c-card {
  border: 1px solid #D9D9D9;
}

/*****************************************/
/* OUR PLATFORM */
/*****************************************/
/* Inline module: stack image above text on phones */
@media (max-width: 554px) {
  /* 1) Force vertical stacking */
  .portfolio-grid .inline-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* keep everything left */
    gap: 16px !important;
  }

  /* 2) Image + text full width */
  .portfolio-grid .inline-card > .c-card-img-con,
  .portfolio-grid .inline-card > .c-card-content {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }

  /* 3) Image container: left align */
  .portfolio-grid .inline-card > .c-card-img-con {
    margin: 0 0 12px 0 !important;
    text-align: left !important;
  }

  /* 4) Kill auto-centering on images */
  .portfolio-grid .inline-card img.c-m-auto {
    margin-left: 0 !important;
    margin-right: auto !important; /* push to left */
    display: block !important;
  }
}


/*****************************************/
/* SUBSCRIPTION PAGES */
/*****************************************/
/* Remove hero dark overlay */
.sub-pre-header .head-overlay {
  display: none !important;
}

/* Add top margin to the content inside the sub-pre-header only */
.sub-pre-header .container-slim {
  margin-top: 80px; /* adjust as needed */
  
}

/*****************************************/
/* Hero Images*/
/*****************************************/
/* Target only the full-width image module */
.full-width-image .row.no-gutters,
.full-width-image .row.no-gutters .col-sm-12 {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Make the image completely fill the row */
.full-width-image .hhs-img-con img {
  display: block;
  width: 100% !important;      /* Full width */
  height: auto !important;     /* Maintain aspect ratio */
  max-width: none !important;  /* Override inline limits */
  max-height: none !important;
  object-fit: cover;           /* Ensures image covers area */
}


/*****************************************/
/* Blog Pages*/
/*****************************************/
@media (min-width: 992px) {
  /* Vertically center content in the left column */
  .blog-header__inner .col-lg-7 {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertical alignment */
  }

  /* Ensure the row has enough height for proper centering */
  .blog-header__inner.row {
    min-height: 100%; /* Adjust or set fixed height if needed */
  }
}

/* Add top spacing for mobile/tablet */
@media (max-width: 991px) {
  .blog-header__inner {
    margin-top: 25px !important;
  }
}


/* Make blog post generated audio white */
.hs-audio-player {
  --primary: #ffffff !important; 


/*****************************************/
/*Landing Pages*/
/*****************************************/
/* Desktop: vertically center the two columns inside this row */
@media (min-width: 992px) {
  /* 1) Make the row a flexbox and center its children vertically */
  .hero-center-aligned-columns .clean-base .container .row {
    display: flex;
    align-items: center;   /* <-- vertical centering */
  }

  /* 2) Make wrappers stretch so the inner flex can center its content */
  .hero-center-aligned-columns .clean-base .c-col,
  .clean-base .c-col-inner {
    height: 100%;
  }

  /* 3) Center the content inside the left column */
  .hero-center-aligned-columns .clean-base .c-col .c-col-inner {
    display: flex;
    flex-direction: column;
    justify-content: center; /* <-- centers the text block vertically */
  }

  /* 4) Your span wrapper is inline; make sure it can take height */
  .hero-center-aligned-columns .clean-base .c-rel { display: block; }
}