/**
* Fuel Theme
* Version 6.0.6
**/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Hero
# Welcome
# CTA's
# Locations
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
@media (max-width: 68.49em) {
    #hero_section {
        min-height: unset !important;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .hero-content {
        padding: 3rem 0 2.2rem !important;
    }

    .hero-content a {
        font-size: 1.1rem !important;
    }

    .hero-content {
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .hero-tagline {
        max-width: 14rem;
    }

    .hero-content p:last-of-type {
        min-width: 15rem;
        margin-bottom: 0.8rem !important;
    }


    .hero-content *,
    .hero-content .wp-block-buttons {
        margin: auto !important;
        text-align: center !important;
    }
}

.hero-tagline {
    --time: 800ms;
    --easing: ease-out;
    --x: -2rem;
}

/*--------------------------------------------------------------
# Welcome
--------------------------------------------------------------*/
.welcome_section .accent-svg {
    width: 10rem;
    position: absolute;
    top: 0;
    left: calc(50% - 5rem);
    margin-top: 0;
}

.welcome_section h1 {
    position: relative;
    padding-bottom: 1.5rem;
    width: 84%;
}

.welcome_section h1::before {
    content: '';
    width: 8rem;
    height: 0.05rem;
    background-color: var(--accent-color);
    position: absolute;
    bottom: 0;
    left: calc(50% - 4rem);
}

@media (max-width: 68.49em) {
    .welcome_section {
        padding-top: 1rem !important;
        padding-bottom: 4.5rem !important;
    }

    .welcome_section h1 {
        font-size: 2rem !important;
    }
}

@media (min-width: 68.5em) {
    .welcome_section .accent-svg {
        width: 22rem;
        top: 5rem;
        left: 10%;
    }

    .welcome_section {
        position: relative;
    }

    .welcome_section::before {
        content: '';
        width: 0.05rem;
        height: calc(100% - 14rem);
        background-color: var(--accent-color);
        position: absolute;
        top: 7rem;
        right: calc(50% - clamp(24rem, 39.5vw, 38rem));
    }
}

.passion {
    padding: 0 1rem 1.5rem;
    position: relative;
    margin-bottom: 2rem;
    font-weight: 600;
}

.passion::before {
    content: '';
    width: 8rem;
    height: 0.05rem;
    background-color: var(--primary-color);
    position: absolute;
    bottom: 0;
    left: calc(50% - 4rem);
}

@media (max-width: 68.49em) {
    .passion {
        margin-bottom: 3.5rem !important;
        margin-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
}

/*--------------------------------------------------------------
# CTA's
--------------------------------------------------------------*/
#cta_section a {
    --y: 0;
    --time: 600ms;
    width: 100%;
    max-width: 32rem;
}

#cta_section .cta1 {
    --i: 0;
}

#cta_section .cta2 {
    --i: 3;
}

#cta_section .cta3 {
    --i: 6;
}

#cta_section .wp-block-image {
    overflow: hidden;
}

#cta_section img {
    width: 100%;
    max-height: 23rem;
    object-position: top;
    transition: transform 1s;
}

#cta_section p {
    position: relative;
    color: var(--white);
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    margin: 0;
    padding: clamp(0.8rem, 1.4vw, 1.2rem) clamp(1.5rem, 3.2vw, 3rem) clamp(0.8rem, 1.4vw, 1.6rem);
    z-index: 1;
    container-type: inline-size;
    container-name: cta;
}

#cta_section p::before {
    content: '';
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)) no-repeat right bottom / var(--cta-bg-width, 4rem) 100%;
    position: absolute;
    inset: 0 0 0 0;
    transition: background-size 350ms;
    z-index: -1;
}

#cta_section p::after {
    content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M18.2319 14.232C18.464 13.9998 18.7397 13.8156 19.043 13.6899C19.3464 13.5642 19.6715 13.4995 19.9999 13.4995C20.3282 13.4995 20.6534 13.5642 20.9568 13.6899C21.2601 13.8156 21.5357 13.9998 21.7679 14.232L31.5359 24L21.7679 33.768C21.299 34.2369 20.663 34.5003 19.9999 34.5003C19.3368 34.5003 18.7008 34.2369 18.2319 33.768C17.763 33.2991 17.4996 32.6631 17.4996 32C17.4996 31.3369 17.763 30.7009 18.2319 30.232L24.4639 24L18.2319 17.768C17.9997 17.5358 17.8155 17.2602 17.6898 16.9568C17.5641 16.6535 17.4994 16.3283 17.4994 16C17.4994 15.6716 17.5641 15.3465 17.6898 15.0431C17.8155 14.7398 17.9997 14.4641 18.2319 14.232Z' fill='black'/></svg>");
    height: 2rem;
    width: 2rem;
    position: absolute;
    inset: 0 1rem 0 auto;
    margin: auto;
    line-height: 1;
}

#cta_section a:is(:hover, :focus) img {
    transform: scale(1.1)
}

#cta_section a:is(:hover, :focus) p:before {
    background-size: 100% 100%;
}

@container cta (max-width: 17.5rem) {
    #cta_section p::before {
        --cta-bg-width: 2rem;
    }

    #cta_section p::after {
        width: 1rem;
    }
}

@media (max-width: 68.49em) {
    #cta_section {
        flex-direction: column;
        row-gap: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/*--------------------------------------------------------------
# Locations
--------------------------------------------------------------*/
.is-layout-flex>.flex-grow {
    flex-grow: 1;
}