/* @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 */
/* Logos are individually resizable via the HubSpot editor (W/H fields).
   CSS no longer forces a fixed image size - it only keeps the card,
   logo slot, and CTA structure consistent and centered. A soft,
   non-!important max-width safety cap prevents an oversized logo from
   breaking the card layout, without overriding your manual sizing. */

/* ===================== DESKTOP (default) ===================== */
#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;
}

/* Logo slot - fixed size, centers whatever image is inside it */
#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;
}

/* Soft safety cap only - no forced width/height, so each logo's
   manual size (set in the editor) is respected. Prevents overflow
   only if a logo is resized larger than its slot. */
#client-logo-cards .c-card-content img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  object-fit: contain;
}

/* CTA fixed row */
#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) ===================== */
@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;
  }

  #client-logo-cards .c-card-content > .hs_cos_wrapper_type_inline_rich_text {
    position: absolute !important;
    top: 65px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: min(220px, 70vw) !important;
    height: 125px !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;
  }

  /* Same soft cap as desktop - your manual sizing carries through
     to tablet, this just stops overflow if resized too large. */
  #client-logo-cards .c-card-content img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  #client-logo-cards .c-card-btn-con {
    position: absolute !important;
    top: 205px !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) ===================== */
@media only screen and (max-width: 767px) {
  #client-logo-cards .c-card-content > .hs_cos_wrapper_type_inline_rich_text {
    width: min(190px, 68vw) !important;
    height: 105px !important;
    top: 68px !important;
  }

  #client-logo-cards .c-card-content img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

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