/**
 * Parallax showcase card.
 *
 * Moved verbatim from WPCode snippet 1991 ("Parallax card"), which injected
 * this as raw <style> in the site-wide header on every page.
 *
 * Note the tight coupling to Divi internals (.et_pb_text_inner, .et_pb_button,
 * .et_pb_module_header): the effect requires ten exact class names typed onto
 * ten specific module types. That contract is preserved here unchanged, so
 * existing sections keep working. It is also the reason this should eventually
 * be a saved Divi Library layout, so editors insert it rather than retype it.
 *
 * Used on Home and About Us, plus Theme Builder body layouts 1720 and 2165.
 */

.showcase-section {
    background: linear-gradient(to bottom, #111116 0%, #1c1c24 5%, #b3b3b3 20%, #cccccc 100%);
    overflow: hidden;
    padding: 100px 0 120px 0;
    width: 100%;
    color: #222;
}

.js-marquee-text {
    overflow: hidden;
    white-space: nowrap;
    padding: 20px 0;
}
.js-marquee-text .et_pb_text_inner {
    display: inline-block;
    font-size: 15vw;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -2px;
    color: #0d06a7;
    will-change: transform;
    white-space: nowrap;
}

.middle-text .et_pb_text_inner {
    font-family: 'Arial', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 450px;
    color: #333;
    font-weight: 500;
}
.explore-btn.et_pb_button {
    background-color: #e65100 !important;
    color: #ffffff !important;
    border-radius: 2px !important;
    font-weight: bold !important;
}
.explore-btn.et_pb_button:hover {
    background-color: #bf4300 !important;
}

.js-image-card {
    width: 60vw;
    height: 65vh;
    overflow: hidden;
    border-radius: 24px;
    position: relative;
    cursor: crosshair;
    flex-shrink: 0;
    --x: 50%; --y: 50%; --r: 0px; --feather: 140px;
}

.js-image-card .js-card-image img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    pointer-events: none;
    display: block;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
}

.js-image-card .js-bw-layer {
    filter: grayscale(1) contrast(1.02) brightness(0.4) !important;
}
.js-image-card .js-card-image img {
    filter: brightness(0.5) !important;
    z-index: 2;
    -webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 0, #000 calc(var(--r) - var(--feather)), transparent var(--r));
    mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 0, #000 calc(var(--r) - var(--feather)), transparent var(--r));
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.js-image-card:hover .js-card-image img {
    transform: scale(1.03);
}

.js-image-card .js-card-title,
.js-image-card .js-card-desc,
.js-image-card .js-card-link {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 3;
    padding: 0 40px;
}
.js-image-card .js-card-title { bottom: 130px; }
.js-image-card .js-card-desc  { bottom: 60px; }
.js-image-card .js-card-link  { bottom: 30px; }

.js-image-card .js-card-title .et_pb_module_header {
    color: #fff !important;
    font-size: 2.2rem !important;
    font-weight: 900 !important;
    max-width: 80%;
}
.js-image-card .js-card-desc .et_pb_text_inner {
    color: #e0e0e0 !important;
    font-size: 1rem !important;
    max-width: 550px;
}
.js-image-card .js-card-link.et_pb_button {
    background: transparent !important;
    color: #fff !important;
    font-size: 0.85rem !important;
    letter-spacing: 1px;
    padding: 0 !important;
}