/* Betheme per-page CSS for the homepage (mfn-dnmc-page-css of page 108),
   self-hosted so the design survives without the builder. */

/* =========================================================================
   Awards & nominations — CSS equal-height (replaces the legacy JS height
   equalizer in the footer bundle, which set stale pixel heights on load and
   broke once the parent scripts were dropped). Flexbox stretches every column
   in a row to the tallest; `height:auto !important` neutralizes any inline
   height the old JS still sets (a stylesheet !important beats inline). Only 2+
   columns per row need this; on mobile the columns stack (block) and no
   equalizing is required.
   ========================================================================= */
.awards-nominations-row1 .mcb-wrap-inner,
.awards-nominations-row2 .mcb-wrap-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

/* Neutralize the legacy JS inline heights. */
.awards-nominations-row1 .mcb-wrap-inner > .mcb-column .column_attr,
.awards-nominations-row2 .mcb-wrap-inner > .mcb-column .column_attr,
.awards-nominations-row1 .icon_box,
.awards-nominations-row2 .icon_box,
.awards-under-image .desc_wrapper,
.awards-under-image2 .desc_wrapper,
.top-right-award {
    height: auto !important;
}

/* Each column becomes a flex-column so its inner block fills the stretched
   height — backgrounds/photos reach the row's bottom edge with no gap. */
.awards-nominations-row1 .mcb-wrap-inner > .mcb-column,
.awards-nominations-row2 .mcb-wrap-inner > .mcb-column {
    display: flex;
    flex-direction: column;
}
.awards-nominations-row1 .mcb-wrap-inner > .mcb-column > .column_attr,
.awards-nominations-row2 .mcb-wrap-inner > .mcb-column > .column_attr,
.awards-nominations-row2 .mcb-wrap-inner > .mcb-column > .icon_box {
    flex: 1 1 auto;
}

/* Row-2 photo columns: photo fills the leftover height (cover), caption pinned
   at the bottom, so they match the tall middle text column. */
.awards-under-image .icon_box,
.awards-under-image2 .icon_box {
    display: flex;
    flex-direction: column;
}
.awards-under-image .icon_box .image_wrapper,
.awards-under-image2 .icon_box .image_wrapper {
    flex: 1 1 auto;
    overflow: hidden;
}
.awards-under-image .icon_box .image_wrapper img,
.awards-under-image2 .icon_box .image_wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.awards-under-image .icon_box .desc_wrapper,
.awards-under-image2 .icon_box .desc_wrapper {
    flex: 0 0 auto;
}

/* On mobile everything stacks; drop the flex so nothing is forced to stretch. */
@media (max-width: 767px) {
    .awards-nominations-row1 .mcb-wrap-inner,
    .awards-nominations-row2 .mcb-wrap-inner {
        display: block;
    }
    .awards-nominations-row1 .mcb-wrap-inner > .mcb-column,
    .awards-nominations-row2 .mcb-wrap-inner > .mcb-column {
        display: block;
    }
    /* eq-col3 is a background-image-only column (no content). As a stretched
       flex item it had height; once stacked it would collapse to 0 and the
       photo would vanish. Give it a height so the photo shows — matches
       production's ~234px at this width. */
    .awards-nominations-row1 .eq-col3 {
        min-height: 234px;
    }
}

.five-btns {
    margin-top:20px;
}
.six-btns, .five-btns {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.six-btn, .five-btn {
    display: flex;
    align-items: center;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 18px;
}
.six-btn img, .five-btn img {
    width: 30px;
    margin-right: 8px;
}
span.six-btn-txt, span.five-btn-txt {
    font-size: 20px;
    font-weight: bold;
    color:#0073b2;
}
@media (max-width:991px) {
     .six-btn, .five-btn {
            padding: 0 20px;
      }
}
@media (max-width:768px) {
  .six-btns, .five-btns {  
    flex-wrap: wrap;
    line-height: 45px; 
  }
}
.accredited-cols {
    box-shadow: 0px 0px 60px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0px 0px 60px rgba(0,0,0,0.1);
}
.business-clients-row1 {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.business-clients-row1 img {
    max-height: 45px;
}
.business-clients-row2 {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 15px;
}
.business-clients-row2 img {
    max-height: 100px;
}
@media (max-width:991px) {
    .business-clients-row1, .business-clients-row2 {
    flex-flow: column;
}
}
@media(max-width:480px) {
.verified-logos-slideri {
   flex-flow: column;
 }
}
@media (min-width:768px) {
 .benefits-home .mcb-wrap-inner {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.benefits-home img {
   width:320px;
}
.same-day-cta-box {
    background: #f66282c7;
    padding: 20px;
}
.same-day-cta-text {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding-top: 14px;
}
.place-order-btn {
    color: #f16483;
    font-weight: bold;
}
.place-order-btn span {
     color: #f16483;
}
.place-order-btn a {
     border-radius: 2px;
}
.place-order-btn:hover {
    opacity:0.8;
}

/* =========================================================================
   Hero slider — plugin-free replica of the original LayerSlider #1.
   3 slides, 5s each, crossfade, slide-up text reveal. Backgrounds span the
   full width; the 1140x550 layer stage inside each slide is centered and
   scaled proportionally by the inline JS in home-preview-page.php, matching
   the original slider's fullwidth behavior (shrinks, never grows).
   ========================================================================= */
#eko4-hero-slider {
    position: relative;
    width: 100%;
    height: 550px;
    overflow: hidden;
}
.eko4-hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transition: opacity .9s ease;
}
.eko4-hero-slide.active {
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
}
.eko4-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}
.eko4-hero-slide-1 .eko4-hero-bg { object-position: 50% 0%; }
.eko4-hero-slide-2 .eko4-hero-bg,
.eko4-hero-slide-3 .eko4-hero-bg { object-position: 50% 100%; }

/* Layer stage: the 1140x550 content box the text layers are positioned in,
   centered over the fullwidth background; the JS scales it down on narrower
   screens. */
.eko4-hero-stage {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1140px;
    height: 550px;
    margin-left: -570px;
    transform-origin: top center;
}

/* Layer positioning — same math as the original slider: a percentage places
   the layer at that fraction of the REMAINING space, which top:X% combined
   with translateY(-X%) reproduces exactly. width:max-content stops absolute
   centering from shrink-wrapping the text early; the wrapper also clips the
   slide-up reveal. */
.eko4-hero-pos {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    /* No width cap: the title box sizes to its text and centres over the
       viewport, matching the original slider. A cap here clipped the longer
       Spanish title (its line is wider than the 1140 stage); the stage scaling
       still shrinks it proportionally on narrow screens. overflow:hidden is
       kept only to mask the vertical slide-up reveal. */
    max-width: none;
    overflow: hidden;
}
.eko4-hero-pos-title1 { top: 40%; transform: translate(-50%, -40%); }
.eko4-hero-pos-title2 { top: 120px; }
.eko4-hero-pos-title3 { top: 30%; transform: translate(-50%, -30%); }
.eko4-hero-pos-btn1   { top: 310px; }

#eko4-hero-slider .eko4-hero-title {
    margin: 0;
    text-transform: none; /* slides 2-3 are h2 (single-H1 page); keep h1/h2 identical */
    letter-spacing: 1.6px;
    background-color: rgba(0, 0, 0, 0.41);
    font-size: 38px;
    line-height: normal;   /* production-measured: 96px content for 2 lines */
    white-space: nowrap;   /* lines break only at the explicit <br>, like the original */
    color: #ffffff;
    text-align: center;
    font-weight: 700;
    font-family: Oxygen, sans-serif;
    padding: 20px;
}
#eko4-hero-slider .eko4-hero-btn {
    display: inline-block;
    font-weight: 700;
    padding: 15px 60px;
    font-family: Oxygen, sans-serif;
    font-size: 14px;
    background: #f66282;
    color: #fff;
    border-radius: 1px;
    text-decoration: none;
}

/* Layer entrance: rise from below the clip line (900ms after a 100ms delay),
   replayed every time a slide becomes active — like the original
   offsetyin:100% / durationin:900 / delayin:100. */
.eko4-hero-slide .eko4-hero-title,
.eko4-hero-slide .eko4-hero-btn {
    transform: translateY(110%);
}
.eko4-hero-slide.active .eko4-hero-title,
.eko4-hero-slide.active .eko4-hero-btn {
    animation: eko4HeroLayerIn .9s ease .1s both;
}
@keyframes eko4HeroLayerIn {
    from { transform: translateY(110%); }
    to   { transform: translateY(0); }
}

/* Counters — fully our own (markup in the content file, cloned onto the
   slider bottom by the inline JS). Values measured from the production page:
   1200px band, rgba(101,182,165,.85) teal, Open Sans, 34px digits with a
   50x2 pink underline, 16px bold two-line labels beside them, columns spread
   space-evenly. Desktop only, like the original. */
.eko4-counters-src { display: none; }

.eko4-counters-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 5;
}
.eko4-counters-band {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
    background-color: rgba(101, 182, 165, 0.85);
}
/* Internals measured from production: number and label are baseline-aligned
   inline-blocks (34px digits on a 50px line, 16px/16px bold labels), a 50x2
   pink line under the digits, and 15px above / 5px below the row folded into
   the padding (35/25) — 118px bar total. */
.eko4-counter {
    margin: 0 12px;
    padding: 35px 10px 25px;
    font-family: "Open Sans", Arial, Tahoma, sans-serif;
    color: #ffffff;
    text-align: center;
    line-height: 50px; /* the wrapper strut that makes the row 58px like production */
}
.eko4-counter-number {
    display: inline-block;
    font-size: 34px;
    line-height: 50px;
    white-space: nowrap;
}
.eko4-counter-line {
    display: block;
    width: 50px;
    height: 2px;
    margin: 0 auto;
    background-color: #f36384;
}
.eko4-counter-label {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    text-align: left;
    margin-left: 10px;
}
.eko4-counter-label span { display: block; }
@media (max-width: 991px) {
    .eko4-counters-bar { display: none; }
}

/* Original site tweak (was wp-custom-css targeting #layerslider_1). */
@media (max-width: 768px) {
    #eko4-hero-slider { margin-top: 65px !important; }
}