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

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/* Remove scroll to top icon */
#return-to-top {
    display: none !important;
}

/* Add underline to links in mega menu */

.underline-hover:hover {
    text-decoration: underline !important;
    text-decoration-color: #242424 !important;
    text-underline-offset: 2px !important; /* Adjust the spacing above the underline */
    text-decoration-thickness: 1px !important; /* Adjust the thickness of the underline */
}
 }



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



/* XEN | StoryBrand Contact Page - Fix the height of meeting iframe to remove scroll bar */
#meeting-scheduler .meetings-iframe-container iframe {
    min-height: 710px !important; 
}


/* XEN Attribution page | Problem Section | Hide the line break before first image on screens smaller than 992px */
  @media (max-width: 767px) {
   #attribution-problem .break-992 {
      display: none;
    }
  }


/* XEN Recommended HubSpot Partners page | Flexi Cards | Fix Card stacking at 991px */
@media (max-width: 991px) {
  .recommended-partners-cards .row {
    flex-direction: column; /* Stack columns vertically */
    align-items: center; /* Center the cards horizontally */
  }

  .recommended-partners-cards .flex-col {
    width: 100%; /* Make each column fill the entire row */
    max-width: 600px; /* Set a maximum width for the cards */
  }
}

/* XEN Pricing - Center last odd card using new section */
@media (min-width: 991px) {
  .odd-card .portfolio-grid {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* XEN | Clients Page - Center image + CTA inside the Versa card module */
/* Client logo cards: fixed logo area + fixed CTA position */

/* ===================== DESKTOP (default) — unchanged, confirmed working ===================== */
#client-logo-cards .c-card {
  height: 321px !important;
}

#client-logo-cards .c-card-content {
  height: 100% !important;
  min-height: 321px !important;
  width: 100% !important;

  display: grid !important;
  grid-template-rows: 170px 50px !important;
  justify-content: center !important;
  align-content: start !important;
  justify-items: center !important;

  padding: 20px 0 0 0 !important;
}

#client-logo-cards .c-card-content > .hs_cos_wrapper_type_inline_rich_text {
  width: 100% !important;
  height: 175px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

#client-logo-cards .c-card-content > .hs_cos_wrapper_type_inline_rich_text p,
#client-logo-cards .c-card-content > .hs_cos_wrapper_type_inline_rich_text br {
  display: none !important;
}

/* Shrink-only sizing: never upscales, so never blurry.
   This exact rule is reused, unchanged, at every breakpoint below. */
#client-logo-cards .c-card-content img {
  display: block !important;
  margin: 0 auto !important;
  width: auto !important;
  height: auto !important;
  max-width: 200px !important;
  max-height: 120px !important;
  object-fit: contain !important;
}

#client-logo-cards .c-card-btn-con {
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

#client-logo-cards .c-card-btn-con .cta-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ===================== TABLET / MOBILE (<= 991px) ===================== */
/* Layout switches to absolute positioning here (card no longer uses
   CSS grid at this width), but the IMAGE SIZE RULE below is identical
   to desktop's — same max-width/max-height, same shrink-only behavior. */
@media (max-width: 991px) {
  #client-logo-cards .c-card {
    height: 321px !important;
    overflow: hidden !important;
  }

  #client-logo-cards .c-card-content {
    position: relative !important;
    display: block !important;
    height: 321px !important;
    min-height: 321px !important;
    padding: 0 !important;
  }

  /* Logo slot sized to comfortably fit the same 200x120 image box */
  #client-logo-cards .c-card-content > .hs_cos_wrapper_type_inline_rich_text {
    position: absolute !important;
    top: 60px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: min(220px, 84vw) !important;
    height: 130px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  #client-logo-cards .c-card-content > .hs_cos_wrapper_type_inline_rich_text p,
  #client-logo-cards .c-card-content > .hs_cos_wrapper_type_inline_rich_text br {
    display: none !important;
  }

  /* Identical to the desktop image rule - same caps, same shrink-only
     logic, so quality and proportions match desktop exactly. */
  #client-logo-cards .c-card-content img {
    display: block !important;
    margin: 0 auto !important;
    width: auto !important;
    height: auto !important;
    max-width: 200px !important;
    max-height: 120px !important;
    object-fit: contain !important;
  }

  #client-logo-cards .c-card-btn-con {
    position: absolute !important;
    top: 215px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #client-logo-cards .c-card-btn-con .cta-secondary {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    min-height: 48px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 16px !important;
    line-height: 1.2 !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
}

/* ===================== MOBILE ONLY (<= 767px) ===================== */
/* No image-size overrides here at all - the 991px rule above already
   matches desktop exactly, so phones inherit that same sizing.
   Only the logo slot position is nudged for the smaller card height. */
@media only screen and (max-width: 767px) {
  #client-logo-cards .c-card-content > .hs_cos_wrapper_type_inline_rich_text {
    top: 55px !important;
  }

  #client-logo-cards .c-card-btn-con {
    top: 210px !important;
  }
}