/* ====== CTA KS PRIMARY ====== */
:root {
  --cta-primary: #2b3339;
  --cta-secondary: #4d9fe8;
}

.cta-ks-primary {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--cta-primary);
  font-weight: bold;
  font-size: 1rem;
  gap: 8px;
}

.cta-icon.fa-stack,
.cta-icon.fa-stack * {
  text-align: center!important;
  transition: all 300ms ease;
}

.cta-icon.fa-stack{
  display: flex;
  height: 2.25rem;
  align-items: center;
  line-height: 2rem;
  position: relative;
  vertical-align: middle;
  width: 2.5rem;
}

.cta-icon i.fa-stack-2x {
  
  font-size: 2rem;
}

.cta-icon .cta-solid-circle {
  visibility: hidden;
  opacity: 0;
}

.cta-ks-primary:hover {
  color: var(--cta-primary);
}

.cta-ks-primary:hover i.cta-solid-circle {
  visibility: visible;
  opacity: 1;
}

.cta-ks-primary:hover i.cta-chevron {
  color: white;
}

.button-label {
  display: inline-flex;
  position: relative; 
}

.button-label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform-origin: 50% 50%;
  transform: scaleX(0);
  opacity: 0;
  transition: all 0.3s ease; 
  pointer-events: none;
}

.cta-ks-primary:hover .button-label::after,
.cta-ks-primary:focus-visible .button-label::after {
  transform: scaleX(1);
  opacity: 1;
}
:root {
    --theme-h1-size: 55px;
    --theme-h1-mobile-size: 34px;
}

h1:not(.home-page-heading h1),
main .ks-post-page h1.blog-post__title {
  font-size: clamp(
    48px,
    -0.694rem + 4.167vw,
    var(--theme-h1-size)
  );
}

/*****************************************/
/* Start your style declarations here    */
/*****************************************/
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 2rem;
}
.cta-tertiary {
    background: radial-gradient(circle at center, #f80 0%, #f80 100%);
}
.ks-programs-hero p,
#hs_cos_wrapper_module_17691837861883_ > p {
    font-size: 24px;
    color: #ffffff;
}

.cta-tertiary:hover {
    background: radial-gradient(circle at center, #f80 65%, #d67609 100%);
}

#contact-form .row {
    overflow: hidden;
}

#ceo-section {
    background-color: white;
    background-blend-mode: difference;
}

#ceo-section .row {
    align-items: center;
}

#ceo-section img.c-img-1 {
    aspect-ratio: 1;
    border-radius: 50% 50% 0% 50%;
    object-fit: cover;
    object-position: center;
}

#serve-section .row {
    justify-content: flex-end;
}

#serve-section .c-col.c-1 {
    max-width: 600px;
}

#about-us-beliefs .c-card img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.blog-index__post:hover,
#home-blog-cards .hhs-blog-post-card:hover {
    transform: none;
}

.blog-index__post a.cta-ks-primary {
  padding-left: 20px;
}

.hhs-blog-card-inner .blog-index__post-content {
    margin-bottom: auto;
}
.blog-index__post img {
  aspect-ratio: 16 / 9;
}

.hhs-blog-card-inner,
#home-blog-cards .hhs-blog-post-card {
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #f2f2f2;
}

.event-callout-banner.clean-base {
    box-shadow: 0px 2px 14px -4px rgba(0, 0, 0, 0.3);
}

.ks-versa-resources .c-card,
.ks-versa-card .c-card {
    border: #bcbec0 3px solid;
    border-radius: 17px !important;
    background: white !important;
}

.ks-versa-resources .c-card-content p,
.ks-versa-card .c-card-content p {
    margin-bottom: 0;
    color: black;
}

/* ks-versa-resources only: file icon left of the text, arrow below it.
   Icons are drawn with ::before / ::after (Font Awesome Pro Light, from the site's FA kit)
   so other instances are unaffected.
   The arrow is only added to cards that link somewhere. The file icon is swapped for a link
   icon on cards that link to a web page instead of a document (see .c-card--web-link below). */
.ks-versa-resources .c-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto;
    column-gap: 20px;
    padding: 24px 27px 18px !important;
    align-items: center;
}

.ks-versa-resources .c-card::before,
.ks-versa-resources a.flexi-card-outer .c-card::after {
    font: var(--fa-font-light, normal 300 1em/1 "Font Awesome 7 Pro");
    -webkit-font-smoothing: antialiased;
}

.ks-versa-resources .c-card::before {
    content: "\f15c"; /* fa-file-lines */
    content: "\f15c" / "";
    grid-column: 1;
    grid-row: 1;
    font-size: clamp(2.111rem, 1.371rem + 1.193vw, 2.444rem);
    color: #4d9fe8;
}

/* cards that link to a web page rather than a document (class added by the module) get the link icon */
.ks-versa-resources .c-card--web-link::before {
    content: "\f0c1"; /* fa-link */
    content: "\f0c1" / "";
    /* the link glyph is wider than file-lines: keep the icon column the same width so card text lines up */
    display: flex;
    justify-content: center;
    width: 0.75em;
}

.ks-versa-resources a.flexi-card-outer .c-card::after {
    content: "\f061"; /* fa-arrow-right */
    content: "\f061" / "";
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: end;
    font-size: 22px;
    color: #ff8800;
}

.ks-versa-resources .c-card-content {
    grid-column: 2;
    grid-row: 1;
    justify-content: center;
    padding: 0 !important;
}

/* overriding rich text paragraphs' inline text-align: center and wrap rules */
.ks-versa-resources .c-card-content p {
    text-align: left !important;
    text-wrap: pretty;
    font-size: 17px;
}

@media screen and (max-width: 992px) {
    .order-1-tablet {order: 1 !important;}
    .order-2-tablet {order: 2 !important;}
    .order-3-tablet {order: 3 !important;}
    .order-4-tablet {order: 4 !important;}
    .order-5-tablet {order: 5 !important;}
    .order-6-tablet {order: 6 !important;}

    #serve-section .c-col.c-1 {
        max-width: 400px;
    }

    #culture-video .col-md-6 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    #culture-video .order-1-mobile {
        order: 1 !important;
    }

    #culture-video .order-2-mobile {
        order: 2 !important;
    }
}

/**********NEW HERO SECTION
.row-number-1 .s-overlay {
    background: linear-gradient(to right, #fff 37%, rgba(255, 255, 255, 0.81) 62%, rgba(255, 255, 255, 0) 89%) !important;
    max-width: 79% !important;
}

.row-number-1 .hs_cos_wrapper_type_inline_rich_text h1 {
  color: #1A74C3 !important;
  font-weight: 600 !important;
  max-width: 20ch;
}

.row-number-1 .hs_cos_wrapper_type_inline_rich_text p,
.row-number-1 .hs_cos_wrapper_type_inline_rich_text p > span {
  color: #222 !important;
  font-weight: 600 !important;
  max-width: 740px;
}
**********/
.cta-four, 
.cta-four:active,
.hhs-alt-nav .hhs-header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li .mega-menu a.cta-four,
.hhs-header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li .mega-menu a.cta-four,
.hhs-top-bar .hs-menu-wrapper.hs-menu-flow-horizontal>ul li .mega-menu a.cta-four,
.cta-primary, 
.cta-primary:active,
.hhs-alt-nav .hhs-header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li .mega-menu a.cta-primary,
.hhs-header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li .mega-menu a.cta-primary,
.hhs-top-bar .hs-menu-wrapper.hs-menu-flow-horizontal>ul li .mega-menu a.cta-primary{
  background-color: #1A74C3;
  border-radius: 17px !important;
  border: #1A74C3 3px solid;
  padding: 17px 22px;
  color: white !important;
}

/**********NEW DOCUMENTS SECTION**********/
.row-fluid-wrapper.row-depth-1:has(.ks-programs-document-table) {
  background-color: #f1f2f2;
}

/**********NEW CONTACT SECTION**********/
.row-fluid-wrapper.row-depth-1:has(#contact) {
  padding-block: 50px !important;
}

#contact.clean-base {
background-color: white !important;
}

#contact.clean-base .container-slim .row {
  margin-top: 0;
  margin-bottom: 0;
  background-color: #e1effb;
  -webkit-box-shadow: none;
  box-shadow: none;
  padding: 50px;
}

/* @media (min-width: 1200px) {
  #contact.new-contact .container-slim {
    max-width: 1440px !important;
  }
} */

#contact.clean-base .container-slim {
  max-width: 1440px !important;
  padding-inline: 30px;
}

#contact.clean-base .container-slim .row .c-col-inner {
  display: flex;
}

#contact.clean-base .container-slim .c-1 {
  margin-bottom: 0px;
}

#contact.clean-base .container-slim .row .c-in-1 {
  display: flex !important;
  gap: 50px;
  margin-bottom: 0;
}

#contact.clean-base .container-slim .row .c-in-1::before {
  content: "\f086"; /* fa-comments */
  content: "\f086" / "";
  justify-content: center;
  font: var(--fa-font-light, normal 300 1em/1 "Font Awesome 7 Pro");
  -webkit-font-smoothing: antialiased;
  font-size: 5.25rem;
  color: #4d9fe8;
  align-content: center;
}

#contact.clean-base .container-slim .row .c-in-1 .hs_cos_wrapper_type_inline_rich_text * {
  text-align: left !important;
}

#contact.clean-base .container-slim .row .c-in-1 .hs_cos_wrapper_type_inline_rich_text h2 {
  margin-bottom: 1rem;
}

#contact.clean-base .container-slim .row .c-in-2 {
  justify-content: flex-end;
}

#contact.clean-base .container-slim .row .c-in-2 .c-cta-con {
    flex-direction: column;
    justify-content: center;
  
/* Stack: icon + text on top, full-width button below.
   Selectors match the specificity of the desktop rules above so they win without extra !important
   (the wrapper's padding-block is the one exception: the desktop rule uses !important). */
@media screen and (max-width: 767px) {
  .row-fluid-wrapper.row-depth-1.dnd_area-row-3-padding:has(#contact) {
    padding-block: 30px !important;
  }

  #contact.new-contact .container-slim {
    padding-inline: 20px;
  }

  #contact.clean-base .container-slim .row {
    padding: 30px 25px;
  }

  /* the column's own 15px gutter would eat into the already-narrow content width, and the module adds
     a 15px margin-bottom to .c-1 at <=992px that would make the bottom padding uneven */
  #contact.clean-base .container-slim .row .c-col {
    padding-inline: 0;
    margin-bottom: 0;
  }

  #contact.clean-base .container-slim .row .c-col-inner {
    flex-direction: column;
    gap: 25px;
  }

  #contact.clean-base .container-slim .row .c-in-1 {
    gap: 20px;
    justify-content: center;
  }
  #contact.clean-base .container-slim .row .c-in-1::before {
    font-size: 3.25rem;
  }

  #contact.clean-base .container-slim .row .c-in-1 .hs_cos_wrapper_type_inline_rich_text h2 {
    margin-bottom: 0.5rem;
  }

  /* button spans the full width: flex column so the link stretches to the container */
  #contact.clean-base .container-slim .row .c-in-2 {
    justify-content: center;
  }
  #contact.clean-base .container-slim .row .c-in-2 .c-cta-con {
    margin: 0;
  }
}

/* very narrow phones: no room for the icon beside "Questions?", so drop it */
@media screen and (max-width: 400px) {
  #contact.clean-base .container-slim .row .c-in-1::before {
    display: none;
  }
}