/**
* Fuel Theme
* Version 6.0.6
**/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Hero
# Welcome
# CTA's
# Locations
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
#hero {
    background: linear-gradient(0deg, rgba(233, 148, 76, 0) 0%, rgba(233, 148, 76, 0.1) 100%);
    position: relative;
    padding-top: clamp(2.6rem, 8vw, 6rem);
    padding-bottom: 2.6rem;
    overflow: hidden;
}

#hero::before {
    content: '';
    width: 100%;
    aspect-ratio: 360/200;
    max-height: 30rem;
    display: block;
    margin-top: -2em;
    /* display: block; */
    position: relative;
    z-index: -1;
}

#hero h1 {
    margin-top: 0;
}

#hero figure {
    position: absolute;
    width: 100%;
    top: 0;
    right: -3em;
    z-index: 0;
}

#hero a svg,
#testimonial a svg {
    width: 0.7em;
}

#hero .wp-block-button {
    margin: auto;
}

@media (max-width: 68.49em) {
    #hero {
        min-height: unset !important;
    }
}

.hero-tagline {
    font-family: var(--title-font);
    font-size: clamp(1.7rem, 7vw, 3.6rem);
    --time: 400ms;
    --easing: ease-out;
    --x: -2rem;
}

@media (min-width: 68.5em) {
    #hero {
        aspect-ratio: 1920/667;
        min-height: 26em;
        /* margin-top: -3.7em; */
        padding-top: 7rem;
        overflow: hidden;
    }

    #hero::before {
        display: none;
    }

    #hero figure {
        width: 58%;
        right: 0;
        mix-blend-mode: multiply;
    }

    #hero .wp-block-button {
        margin: unset;
    }
}

/*--------------------------------------------------------------
# Welcome
--------------------------------------------------------------*/
#welcome {
    margin-top: 0;
    padding-top: 1em;
    position: relative;
}

#welcome .wp-block-cover__inner-container {
    padding: 0 var(--contain-padding);
}

.home .wp-block-cover__inner-container .wp-block-button {
    margin: auto;
}

#welcome h2::before {
    background: var(--white);
}

#welcome .wp-block-cover__inner-container>* {
    max-width: 37rem;
}
figure.top-doc-front-page::before,
#bio-details figure.top-doc-front-page::before {
    background: none;
}
figure.top-doc-front-page::before {
    width: auto; 
}

@media (min-width: 68.5em) {
    #welcome .wp-block-cover {
        padding: 7rem 1rem;
    }

    .wp-block-media-text .wp-block-media-text__content {
        padding-right: 0;
    }

    .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
        padding-right: 8%;
        padding-left: 0;
    }

    .home .wp-block-cover__inner-container .wp-block-button {
        margin: unset;
    }

    #welcome p:first-of-type {
        margin-top: 2em;
    }

    #welcome p:last-of-type {
        margin-bottom: 1.6em;
    }

    #welcome::before {
        content: '';
        width: 24%;
        aspect-ratio: 466/335;
        background-image: url('../images/welcome-circles.svg');
        background-size: cover;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 1;
    }
}

/*--------------------------------------------------------------
# Front Buttons
--------------------------------------------------------------*/
#front-buttons {
    position: relative;
    overflow: hidden;
    padding-bottom: 3em;
    z-index: 2;
    background: var(--white);
    margin-top: 0;
    padding-top: 1rem;
}

#front-buttons .wp-block-buttons::before {
    content: '';
    height: 100%;
    aspect-ratio: 380 / 160;
    background: url('../images/swoop-mobile.svg');
    background-size: cover;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
}

#front-buttons .wp-block-button__link::before,
#front-buttons .wp-block-buttons .wp-element-button::after,
#front-buttons .wp-block-buttons .wp-block-button__link.wp-block-button__link::after {
    display: none;
}

#front-buttons .wp-block-buttons {
    position: relative;
    padding: 2em 0;
    background: linear-gradient(270deg, rgba(11, 56, 81, 0.8) 0%, #0B3851 100%);
}

#front-buttons .wp-block-buttons>.wp-block-button {
    margin: auto;
}

#front-buttons .wp-block-button__link {
    background: transparent;
    border: none;
    font-size: 0.9em;
    letter-spacing: 0.2em;
}

#front-buttons .wp-block-button svg {
    margin-left: 0.5em;
    margin-bottom: 0.2em;
    color: var(--white);
}

/* #front-buttons .wp-block-button:first-of-type svg {
    color: var(--puget-green)
} */

@media (min-width: 68.5em) {
    #front-buttons::before {
        content: '';
        width: calc(100% - 53.5em);
        height: 0.05em;
        background: linear-gradient(270deg, #E9944C 0%, #438A8E 97.75%);
        position: absolute;
        top: 3rem;
        right: 0;
        z-index: 0;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 400ms 1600ms;
    }

    #front-buttons.js-intersected::before {
        transform: scaleX(1);
    }

    #front-buttons .wp-block-button__link {
        /* font-size: 1.1rem; */
        padding: 0;
    }

    #front-buttons .wp-block-buttons>.wp-block-button {
        margin: unset;
        padding: 0;
    }

    #front-buttons .wp-block-buttons {
        justify-content: flex-end;
        padding: 1.5em;
        padding-right: 4em;
        border-top-right-radius: 100px;
        border-bottom-right-radius: 100px;
        gap: 2em;
        width: 53.5em;
        --delay: 1200ms;
        --time: 400ms;
    }

    #front-buttons a svg {
        transition: transform 300ms;

    }

    #front-buttons a:hover svg {
        transform: translateX(0.3rem);
    }

    #front-buttons .wp-block-buttons::before {
        background-image: url('../images/swoop-desktop.svg');
        aspect-ratio: 462/80;
        right: unset;
        left: 0;
    }
}

/*--------------------------------------------------------------
# CTA's
--------------------------------------------------------------*/
#ctas {
    padding-top: 2rem;
    background: var(--white);
    margin-top: 0rem;
    position: relative;
}

#ctas .wp-block-media-text {
    margin-bottom: 3rem;
}

#ctas .wp-block-media-text:last-of-type {
    margin-bottom: 0;
}

h2.featured {
    font-family: var(--content-font);
    font-size: 1rem;
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.4rem;
}

h2.featured::before {
    content: '';
    background-color: var(--accent-color);
    width: 50%;
    height: 0.05rem;
    top: -1rem;
    right: 0;
    left: unset;
    transform-origin: left;
    transform: scale(0);
    transition: transform 600ms;
}

h2.featured::after {
    content: '';
    background-color: var(--puget-green);
    position: absolute;
    width: 50%;
    height: 0.05rem;
    bottom: -1rem;
    left: 0;
    transform-origin: right;
    transform: scale(0);
    transition: transform 600ms;
}

h2.featured.js-intersected::after,
h2.featured.js-intersected::before {
    transform: scale(1);
}

.cta-button a::before {
    display: none;
}

#main .cta-button a:hover {
    background: unset;
    color: unset;
}

#main .cta-button a {
    padding-left: 0;
    position: relative;
    color: var(--primary-color);
}

#main .cta-button a::after {
    content: '';
    width: 4em;
    height: 0.05em;
    background: var(--puget-green);
    position: absolute;
    bottom: -0.4em;
    left: calc(100% - 4.3rem);
    z-index: -1;
    transition: all 300ms;
    top: unset;
    opacity: 1;
}

.cta-button a .cta-svg {
    position: absolute;
    bottom: -1em;
    right: -1em;
    transition: right 300ms;
}

.cta-button a:hover .cta-svg {
    right: -1.5em;
}

#main .cta-button a:hover::after {
    width: 4.5em;
}

.cta-circle {
    color: transparent;
}

.cta-button a .cta-circle {
    transition: color 300ms;
    color: white;
}

.cta-button a .cta-arrow {
    transition: color 300ms;
    color: var(--accent-color);
}

.cta-button a:hover .cta-arrow {
    color: white;
}

.cta-button a:hover .cta-circle {
    right: 3em;
    color: transparent;
}

.cta-button a .cta-svg::before {
    content: '';
    width: 1.4rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: linear-gradient(270deg, #E9944C 0%, #438A8E 97.75%);
    position: absolute;
    bottom: 0px;
    right: 0;
    z-index: -1;
}

@media (min-width: 68.5em) {
    #ctas {
        padding-bottom: 6rem;
    }

    #ctas h2.featured {
        margin: 5rem auto 6.5rem;
    }
}



/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/

#testimonial {
    padding-top: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 0;
}

#testimonial .wp-block-media-text {
    margin-top: 4em;
}

#testimonial .wp-block-quote {
    margin-left: auto !important;
    margin-right: auto !important;
}

#testimonial .wp-block-media-text {
    padding: 0;
}

@media (min-width: 68.5em) {
    #testimonial {
        padding-top: 3rem;
    }

    #testimonial .wp-block-media-text br {
        display: none;
    }
}

@media (min-width: 88.5em) {
    #testimonial .wp-block-columns {
        padding: unset;
    }

    .wp-block-quote::before,
    .wp-block-quote::after {
        top: 0;
        left: 0;
    }
}