/*
 * Sitewide mobile-responsiveness safety net.
 *
 * Root cause found across most pages: flex/grid children default to
 * min-width:auto, which uses their content's intrinsic size as a hard
 * floor instead of letting them shrink/wrap — so text and cards overflow
 * the viewport on narrow screens instead of wrapping. min-width:0 is the
 * standard fix; it's a no-op for anything that isn't a flex/grid item
 * (it's already the effective default there), so it's safe to apply broadly.
 *
 * This file targets Elementor's native (non-HTML-widget) pages — About,
 * Contact Us, and Home's native sections — which can't be edited via a
 * dumped HTML string the way the raw-HTML-widget pages can.
 */

body{
  overflow-x:hidden;
}

.elementor-widget-container,
.e-con,
.e-flexbox,
.elementor-element{
  min-width:0;
}

.elementor-heading-title,
.elementor-widget-e-paragraph,
.elementor-widget-e-paragraph p,
.elementor-icon-list-text{
  overflow-wrap:break-word;
  word-break:break-word;
}

@media (max-width:480px){
  .e-con,
  .e-flexbox{
    max-width:100%;
  }
}

/*
 * "Our Founders" grid (Home page, native e-grid element 43f10ec): its
 * atomic style definition sets grid-template-columns via a track-size
 * object Elementor's atomic CSS pipeline isn't compiling into any output
 * (verified: the class never appears in the generated post CSS or inline
 * styles), leaving the grid with its implicit single-column default. Direct
 * override here since it's more reliable than the atomic style pipeline.
 */
.e-43f10ec-aca65f6{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}
@media (max-width:767px){
  .e-43f10ec-aca65f6{
    grid-template-columns: 1fr !important;
  }
}

/*
 * Home page top-level section wrappers (one per stacked content block —
 * Captains, ECL Social Hub, Teams & Owners, Sponsors, etc.): same atomic
 * CSS compilation gap as the founders grid above. Each of these falls back
 * to the browser default of display:inline instead of the intended block
 * layout, and an inline box picks up extra line-height-driven space above
 * and below its content — that's the stray white gap between sections.
 * Forcing block (the correct, safe layout for a single stacked section)
 * removes it. Class list is tied to these specific elements' generated
 * atomic classes, not a general selector, so this can't affect unrelated
 * elements that already render correctly.
 */
.e-06f7769,
.e-e9857ba,
.e-60f05b8,
.e-02be6da,
.e-026403b,
.e-6a34f27{
  display: block !important;
}

/*
 * Captains, ECL Social Hub, Teams & Owners, and Contact/Enquiry sections
 * are each meant to be full-bleed (their own data explicitly sets
 * padding:0), but that override hits the same compilation gap as above and
 * falls back to Elementor's base container padding (~10px), insetting the
 * colored background from the screen edge. Restoring the intended 0.
 */
.e-06f7769,
.e-e9857ba,
.e-60f05b8,
.e-6a34f27{
  padding: 0 !important;
}

/*
 * "Our Founders" FOLLOW US buttons (classic Elementor button widget, IDs
 * cdc4d95 / 8894001 / 909eff4): their per-instance compiled CSS
 * (background #61CE7000 = transparent, black text, #E2DADA border,
 * 20px radius) is present and correctly specific in post-8.css, yet the
 * live page renders Elementor's plain generic .elementor-button default
 * instead (opaque green fill, white text/border, 3px radius) — editor
 * preview shows the correct transparent-pill look, confirming this is a
 * frontend cascade/output issue rather than a wrong setting. Restoring the
 * intended look directly.
 */
.elementor-element-cdc4d95 .elementor-button,
.elementor-element-8894001 .elementor-button,
.elementor-element-909eff4 .elementor-button{
  background-color: transparent !important;
  color: #000000 !important;
  border-color: #E2DADA !important;
  border-radius: 20px !important;
}
.elementor-element-cdc4d95 .elementor-button:hover,
.elementor-element-8894001 .elementor-button:hover,
.elementor-element-909eff4 .elementor-button:hover{
  background-color: #213F81 !important;
  color: #FFFFFF !important;
}