/* @group Secondary Hero
------------------------------------ */

.secondary-hero-splide .splide__arrows {
    display: none;
}
.secondary-hero-splide .splide__track {
    pointer-events: none;
}

.secondary-hero__container {
    position: relative;
    background-color: var(--lightblue);
}

.secondary-hero-box h1 {
    color: var(--nav-green);
}

.secondary-hero-box p {
    color: var(--main-black);
    font-weight: 700;
}

.secondary-hero-box p a {
    position: relative;
    text-decoration: underline;
}

/* .secondary-hero-box p a::before {
    content: '';
    height: .2rem;
    width: 100%;
    background-color: var(--main-black);
    position: absolute;
    bottom: -.2rem;
} */

.secondary-hero-box p a:hover {
    color: var(--nav-green);
}

.secondary-hero-box .splide .splide__arrow {
    transform: translateY(-50%);
    margin: 0 1.5rem;
}

@media only screen
and (min-width : 961px) {
    .secondary-hero__container {
        padding-top: 5.3rem;
        padding-bottom: 8.6rem;
    }
    .secondary-hero__container::before {
        content: '';
        width: 17.2rem;
        height: 19.7rem;
        background-image: url('../../imgs/layout/patterns/leaves.png');
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        pointer-events: none;
    }
    .secondary-hero__container::after {
        content: '';
        width: 17.2rem;
        height: 19.7rem;
        background-image: url('../../imgs/layout/patterns/leaves.png');
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 1;
        pointer-events: none;
        transform: scaleX(-1) scaleY(-1);
    }
    .secondary-hero-box .article-with-image {
        display: flex;
        justify-content: space-between;
    }
    .secondary-hero-box .article-with-image article {
        flex: 0 1 40%;
    }
    .secondary-hero-box .article-with-image .secondary-hero-splide {
        flex: 0 1 55%;
    }
    .secondary-hero-box p {
        font-size: 3.2em;
        line-height: 1.375em;
    }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .secondary-hero__container {
        padding-top: 3rem;
    }
    .secondary-hero__container .col-36-34 {
        padding: 0;
    }
    .secondary-hero__container .secondary-hero-box h1 {
        padding: 0 3.5rem;
        margin-bottom: 4rem;
    }
    .secondary-hero-box .article-with-image article {
        margin-bottom: 1rem;
        padding: 0 3.5rem;
    }
    .secondary-hero-box .article-with-image figure img {
        filter: grayscale(10%);
    }
    .secondary-hero-box .article-with-image .secondary-hero-splide::before {
        content: '';
        height: 100%;
        width: 100%;
        z-index: 2;
        position: absolute;
        top: 0;
        left: 0;
        background: linear-gradient(180deg, rgba(194,234,254,1) 13%, rgba(194,234,254,0.37608546836703427) 100%);
        pointer-events: none;
    }
    .secondary-hero-box .splide .splide__arrow {
        z-index: 4;
    }
    .secondary-hero-box p {
        font-size: 2.4em;
        line-height: 1.5em;
    }
}

/* @end */


/* Animations */

.secondary-hero__container::before,
.secondary-hero__container::after,
.secondary-hero__container h1,
.secondary-hero__container article,
.secondary-hero__container .splide {opacity: 0;}

.secondary-hero__container.animateActive::before,
.secondary-hero__container.animateActive::after,
.secondary-hero__container.animateActive h1,
.secondary-hero__container.animateActive article,
.secondary-hero__container.animateActive .splide {animation: fade 1.6s forwards;}

.secondary-hero__container.animateActive h1 {animation-delay:1s;}     
.secondary-hero__container.animateActive article {animation-delay:1.2s;}     
.secondary-hero__container.animateActive .splide {animation-delay:1.4s;} 
.secondary-hero__container.animateActive::before,
.secondary-hero__container.animateActive::after {animation-delay:1.6s;}  

@media only screen and (min-width: 961px) and (max-width: 1500px) {
    .secondary-hero__container::before, .secondary-hero__container::after {
    width: 12.6rem;
    height: 14.3rem;
}
}

@media only screen and (min-width: 961px) {
    .secondary-hero__container {
    padding-top: 8.5rem;
    padding-bottom: 8.6rem;
}
}

@media only screen and (min-width: 961px) and (max-width: 1500px) {
    .secondary-hero__container::before, .secondary-hero__container::after {
    width: 12.6rem;
    height: 14.3rem;
}
}