/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


/* =========================
   HORIZONTAL
   ========================= */

.eff-px-default {
    --padding-left: 2rem;
    --padding-right: 2rem;
}

.eff-px-0 {
    --padding-left: 0rem;
    --padding-right: 0rem;
}


/* =========================
   VERTICAL
   ========================= */

.eff-py-default {
    --padding-top: 6rem;
    --padding-bottom: 6rem;
}

.eff-py-md {
    --padding-top: 3rem;
    --padding-bottom: 3rem;
}

.eff-py-0 {
    --padding-top: 0rem;
    --padding-bottom: 0rem;
}


/* =========================
   TOP
   ========================= */

.eff-pt-default {
    --padding-top: 6rem;
}

.eff-pt-md {
    --padding-top: 3rem;
}

.eff-pt-0 {
    --padding-top: 0rem;
}


/* =========================
   BOTTOM
   ========================= */

.eff-pb-default {
    --padding-bottom: 6rem;
}

.eff-pb-md {
    --padding-bottom: 3rem;
}

.eff-pb-0 {
    --padding-bottom: 0rem;
}


/* =========================
   TABLET
   ========================= */

@media (max-width: 1024px) {

    .eff-px-default {
        --padding-left: 1.5rem;
        --padding-right: 1.5rem;
    }

    .eff-px-0 {
        --padding-left: 0rem;
        --padding-right: 0rem;
    }

    .eff-py-default {
        --padding-top: 4rem;
        --padding-bottom: 4rem;
    }

    .eff-py-md {
        --padding-top: 2.5rem;
        --padding-bottom: 2.5rem;
    }

    .eff-py-0 {
        --padding-top: 0rem;
        --padding-bottom: 0rem;
    }

    .eff-pt-default {
        --padding-top: 4rem;
    }

    .eff-pt-md {
        --padding-top: 2.5rem;
    }

    .eff-pt-0 {
        --padding-top: 0rem;
    }

    .eff-pb-default {
        --padding-bottom: 4rem;
    }

    .eff-pb-md {
        --padding-bottom: 2.5rem;
    }

    .eff-pb-0 {
        --padding-bottom: 0rem;
    }
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 767px) {

    .eff-px-default {
        --padding-left: 1rem;
        --padding-right: 1rem;
    }

    .eff-px-0 {
        --padding-left: 0rem;
        --padding-right: 0rem;
    }

    .eff-py-default {
        --padding-top: 3rem;
        --padding-bottom: 3rem;
    }

    .eff-py-md {
        --padding-top: 2rem;
        --padding-bottom: 2rem;
    }

    .eff-py-0 {
        --padding-top: 0rem;
        --padding-bottom: 0rem;
    }

    .eff-pt-default {
        --padding-top: 3rem;
    }

    .eff-pt-md {
        --padding-top: 2rem;
    }

    .eff-pt-0 {
        --padding-top: 0rem;
    }

    .eff-pb-default {
        --padding-bottom: 3rem;
    }

    .eff-pb-md {
        --padding-bottom: 2rem;
    }

    .eff-pb-0 {
        --padding-bottom: 0rem;
    }
}

/* =========================
   DEFAULT BUTTON (ELEMENTOR)
   medium + accent + solid
   ========================= */

.elementor-button {
    background: transparent;
}

.elementor-button .elementor-button-link,
.elementor-button.elementor-button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.7em 1.7rem;
    border-radius: 1rem;
    font-size: 1.05rem;
    line-height: 1;
    font-weight: 600;

    background-color: var(--e-global-color-accent);
    border: 2px solid var(--e-global-color-accent);
    color: var(--e-global-color-text);

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        opacity 0.3s ease;
}

.elementor-button .elementor-button-content-wrapper {
	gap: 1rem;
}

.elementor-button .elementor-button-link:hover {
    background-color: color-mix(in srgb, var(--e-global-color-accent) 85%, transparent);
    border-color: color-mix(in srgb, var(--e-global-color-accent) 85%, transparent);
}


/* =========================
   ICON COLOUR
   ========================= */

.elementor-button-icon,
.elementor-button-icon svg {
    color: currentColor;
    fill: currentColor;
}


/* =========================
   BUTTON SIZES
   ========================= */

.btn-large .elementor-button-link {
    padding: 0.9em 2rem;
    border-radius: 1.25rem;
    font-size: 1.2rem;
}

.btn-medium .elementor-button-link {
    padding: 0.7em 1.7rem;
    border-radius: 1rem;
    font-size: 1.05rem;
}

.btn-small .elementor-button-link {
    padding: 0.55em 1.35rem;
    border-radius: 0.75rem;
    font-size: 0.925rem;
}


/* =========================
   SOLID BUTTONS
   ========================= */

.btn-primary.btn-solid .elementor-button-link {
    background-color: var(--e-global-color-primary);
    border-color: var(--e-global-color-primary);
    color: var(--e-global-color-f465653);
}

.btn-primary.btn-solid .elementor-button-link:hover {
    background-color: color-mix(in srgb, var(--e-global-color-primary) 85%, transparent);
    border-color: color-mix(in srgb, var(--e-global-color-primary) 85%, transparent);
}

.btn-secondary.btn-solid .elementor-button-link {
    background-color: var(--e-global-color-secondary);
    border-color: var(--e-global-color-secondary);
    color: var(--e-global-color-text);
}

.btn-secondary.btn-solid .elementor-button-link:hover {
    background-color: color-mix(in srgb, var(--e-global-color-secondary) 85%, transparent);
    border-color: color-mix(in srgb, var(--e-global-color-secondary) 85%, transparent);
}

.btn-accent.btn-solid .elementor-button-link {
    background-color: var(--e-global-color-accent);
    border-color: var(--e-global-color-accent);
    color: var(--e-global-color-text);
}

.btn-accent.btn-solid .elementor-button-link:hover {
    background-color: color-mix(in srgb, var(--e-global-color-accent) 85%, transparent);
    border-color: color-mix(in srgb, var(--e-global-color-accent) 85%, transparent);
}

.btn-accent-2.btn-solid .elementor-button-link {
    background-color: var(--e-global-color-c724fe0);
    border-color: var(--e-global-color-c724fe0);
    color: var(--e-global-color-text);
}

.btn-accent-2.btn-solid .elementor-button-link:hover {
    background-color: color-mix(in srgb, var(--e-global-color-c724fe0) 85%, transparent);
    border-color: color-mix(in srgb, var(--e-global-color-c724fe0) 85%, transparent);
}


/* =========================
   BORDER BUTTONS
   ========================= */

.btn-primary.btn-border .elementor-button-link {
    background: transparent;
    border-color: var(--e-global-color-primary);
    color: var(--e-global-color-primary);
}

.btn-primary.btn-border .elementor-button-link:hover {
    background-color: var(--e-global-color-primary);
    color: var(--e-global-color-f465653);
}

.btn-secondary.btn-border .elementor-button-link {
    background: transparent;
    border-color: var(--e-global-color-secondary);
    color: var(--e-global-color-secondary);
}

.btn-secondary.btn-border .elementor-button-link:hover {
    background-color: var(--e-global-color-secondary);
    color: var(--e-global-color-text);
}

.btn-accent.btn-border .elementor-button-link {
    background: transparent;
    border-color: var(--e-global-color-accent);
    color: var(--e-global-color-accent);
}

.btn-accent.btn-border .elementor-button-link:hover {
    background-color: var(--e-global-color-accent);
    color: var(--e-global-color-text);
}

.btn-accent-2.btn-border .elementor-button-link {
    background: transparent;
    border-color: var(--e-global-color-c724fe0);
    color: var(--e-global-color-c724fe0);
}

.btn-accent-2.btn-border .elementor-button-link:hover {
    background-color: var(--e-global-color-c724fe0);
    color: var(--e-global-color-text);
}


/* =========================
   TEXT BUTTONS
   ========================= */

.btn-text .elementor-button-link {
    background: none !important;
    border: none;
    border-radius: 0;
    padding: 0;
}

.btn-primary.btn-text .elementor-button-link {
    color: var(--e-global-color-primary);
}

.btn-secondary.btn-text .elementor-button-link {
    color: var(--e-global-color-secondary);
}

.btn-accent.btn-text .elementor-button-link {
    color: var(--e-global-color-accent);
}

.btn-accent-2.btn-text .elementor-button-link {
    color: var(--e-global-color-c724fe0);
}

.btn-text .elementor-button-link:hover {
    opacity: 0.85;
}




/* ========================================
   REUSABLE IMAGE SCROLLER
   Structure:
   .img-scroll
     .scroll-container
       img / widgets / child elements
   ======================================== */

/* Optional fade masks */
.img-scroll.is-horizontal {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 15%,
        #000 85%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 15%,
        #000 85%,
        transparent 100%
    );
}

.img-scroll.is-vertical {
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        #000 15%,
        #000 85%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        #000 15%,
        #000 85%,
        transparent 100%
    );
}

/* Track */
.img-scroll .scroll-container {
    display: flex;
    width: max-content;
    will-change: transform;
}

/* Horizontal */
.img-scroll.is-horizontal .scroll-container {
    flex-direction: row;
    gap: var(--scroll-gap, 1rem);
}

/* Vertical */
.img-scroll.is-vertical .scroll-container {
    flex-direction: column;
    gap: var(--scroll-gap, 1rem);
}

/* Children */
.img-scroll .scroll-container > * {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}

/* Images */
.img-scroll .scroll-container img {
    display: block;
    width: var(--scroll-item-width, auto);
    height: var(--scroll-item-height, auto);
    object-fit: cover;
}

/* Directions */
.img-scroll.dir-left .scroll-container {
    animation: eff-scroll-left var(--scroll-duration, 15s) linear infinite alternate;
}

.img-scroll.dir-right .scroll-container {
    animation: eff-scroll-right var(--scroll-duration, 15s) linear infinite alternate;
}

.img-scroll.dir-up .scroll-container {
    animation: eff-scroll-up var(--scroll-duration, 15s) linear infinite alternate;
}

.img-scroll.dir-down .scroll-container {
    animation: eff-scroll-down var(--scroll-duration, 15s) linear infinite alternate;
}

/* Keyframes */
@keyframes eff-scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(
            -1 * (
                (var(--scroll-item-width) * var(--scroll-items)) +
                (var(--scroll-gap) * (var(--scroll-items) - 1)) -
                var(--scroll-viewport)
            )
        ));
    }
}

@keyframes eff-scroll-right {
    0% {
        transform: translateX(calc(
            -1 * (
                (var(--scroll-item-width) * var(--scroll-items)) +
                (var(--scroll-gap) * (var(--scroll-items) - 1)) -
                var(--scroll-viewport)
            )
        ));
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes eff-scroll-up {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(calc(
            -1 * (
                (var(--scroll-item-height) * var(--scroll-items)) +
                (var(--scroll-gap) * (var(--scroll-items) - 1)) -
                var(--scroll-viewport)
            )
        ));
    }
}

@keyframes eff-scroll-down {
    0% {
        transform: translateY(calc(
            -1 * (
                (var(--scroll-item-height) * var(--scroll-items)) +
                (var(--scroll-gap) * (var(--scroll-items) - 1)) -
                var(--scroll-viewport)
            )
        ));
    }
    100% {
        transform: translateY(0);
    }
}


.js-ticker {
    overflow: hidden;
    position: relative;

    --ticker-gap: 2rem;
    --ticker-item-height: 100px;

    /* px per second */
    --ticker-base-speed: 42;
    --ticker-max-boost: 2200;

    /* more = stronger response to scroll */
    --ticker-scroll-influence: 1.8;

    /* more = catches target speed faster */
    --ticker-smoothing: 20;

    /* ms before easing back to base speed */
    --ticker-idle-delay: 140;
}

.js-ticker-track {
    position: relative;
    width: 100%;
    min-height: 1px;
}

.js-ticker-set {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--ticker-gap);
    width: max-content;
    will-change: transform;
}

.js-ticker-set > * {
    flex: 0 0 auto;
    margin: 0 !important;
}

.js-ticker-set img {
    display: block;
    width: auto;
    height: var(--ticker-item-height);
    object-fit: contain;
}