html,
body {
    scroll-behavior: smooth;
    scroll-margin-top: 175px;
    box-sizing: border-box;
}

.navbar-toggler {

    &[aria-expanded='true'] {

        & .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='white' stroke='white' d='M183.1 137.4C170.6 124.9 150.3 124.9 137.8 137.4C125.3 149.9 125.3 170.2 137.8 182.7L275.2 320L137.9 457.4C125.4 469.9 125.4 490.2 137.9 502.7C150.4 515.2 170.7 515.2 183.2 502.7L320.5 365.3L457.9 502.6C470.4 515.1 490.7 515.1 503.2 502.6C515.7 490.1 515.7 469.8 503.2 457.3L365.8 320L503.1 182.6C515.6 170.1 515.6 149.8 503.1 137.3C490.6 124.8 470.3 124.8 457.8 137.3L320.5 274.7L183.1 137.4z'/%3E%3C/svg%3E");
        }
    }
}

.navbar-collapse {
    /*background-color: #17b4d1 !important;*/


    & a {
        /*color: #FFF !important;*/
        font-size: 20px;
    }

    &.show {
    }
}

.navbar__items {
    justify-content: flex-end;

    & .navbar-nav {
        justify-content: flex-end;

        .btn {
            @media (min-width: 768px) {
                margin-left: 20px;
            }
        }
    }

    & .nav-item {

        &.dropdown {
            text-align: center;

            &.show {
                @media (max-width: 767.98px) {
                    background-color: #F0F0F0 !important;
                }

                & a {
                    @media (max-width: 767.98px) {
                        color: rgba(0,0,0,.9) !important;
                        text-align: center !important;
                    }
                }
            }
        }

        & .dropdown-menu {
            @media (max-width: 767.98px) {
                margin-top: 0;
                background-color: #F0F0F0 !important;
            }
        }
    }
}

.home-intro {
    position: relative;
    width: 100%;
    height: 500px;
    background-size: cover;
    background-position: center;
    scroll-margin-top: 175px;


    & .container {
        position: relative;
        height: 100%;
    }

    &::before {
        position: absolute;
        inset: auto 0 0;
        height:  150px;
        background-color: #17b4d1;
        content: '';

        @media (max-width: 767.98px) {
            height:  235px;
        }
    }

    &::after {
        position: absolute;
        inset: auto 0 0;
        height: 125px;
        background-color: #90b03e;
        content: '';

        @media (max-width: 767.98px) {
            height: 210px;
        }
    }

    @media (min-width: 992px) {
        height: 750px;
    }
}

.home-intro__content {
    position: absolute;
    inset: auto 0 0;
    padding: 0 0 20px;
    z-index: 3;
    color: white;

    & h1 {
        position: relative;
        font-weight: 700;
        z-index: 2;
        font-size: 30px;
        line-height: 40px;

        &::after {
            position: absolute;
            inset: -10px 10px -10px -10px;
            transform-origin: center center;
            transform: rotate(-2deg);
            background-color: #e7ad23;
            z-index: -1;
            content: '';

            @media (max-width: 767.98px) {
                inset: -10px 0 -10px -10px;
            }
        }

        @media (min-width: 768px) {
            font-size: 40px;
            line-height: 50px;
        }
        @media (min-width: 1200px) {
            font-size: 55px;
            line-height: 65px;
        }
    }

    & p {
        font-size: 22px;
        line-height: 30px;
        text-wrap: pretty;
        font-family: 'Amaranth', Arial, serif;

        @media (min-width: 768px) {
            font-size: 28px;
            line-height: 35px;
        }
        @media (min-width: 1200px) {
            font-size: 35px;
            line-height: 42px;
        }
    }

    @media (max-width: 767.98px) {
        padding: 0 30px 80px;
    }
}

.home-intro__button {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    inset: auto 16px -24px auto;
    border-radius: 100px;
    width: 100px;
    height: 100px;
    font-size: 18px;
    line-height: 24px;
    color: #17b4d1;
    background-color: white;
    text-align: center;
    font-family: 'Amaranth', Arial, serif;
    font-weight: 700;
    transform: rotate(10deg);
    z-index: 3;
}
@media(min-width: 768px) {
    .home-intro__button {
        width: 150px;
        height: 150px;
        font-size: 25px;
        line-height: 30px;
        border-radius: 150px;
        inset: auto 0 60px auto;
    }
}

.home-intro__down {
    position: absolute;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    inset: 0 0 16px 0;
    margin: auto;

    @media (min-width: 768px) {
        transform: translateX(150px);
        margin-bottom: 25px;
    }
    @media (min-width: 992px) {
        transform: translateX(200px);
        margin-bottom: 25px;
    }

    & a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        width: 40px;
        /*padding: 20px;*/
        border-radius: 50px;
        background-color: #17b4d1;
        animation: scrollbounce 2s infinite ease-in-out;

        & svg {
            height: 25px;

            & path {
                fill: #fff;
            }
        }
    }
}

#newsletter {

    & input[type='text'] {
        border: 1px solid #dc790e;
        border-radius: 20px 0 0 20px;
    }
}

.intro-quote {
    font-size: 1.5rem;
    font-family: 'Amaranth', Arial, serif;
    text-wrap: pretty;
    color: #17b4d1;
    margin-top: 1.5rem;
}

.navbar {
    display: block;
    align-items: initial;
    justify-content: initial;
    padding-block: 0;
}
.navbar-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1420px;
    margin-inline: auto;
}
a.navbar-brand {
    margin-top: 0;
    margin-bottom: -100px;

    @media (max-width: 767.98px) {
        margin-bottom: -20px;
    }
}
.navbar-collapse {
    width: 100%;
}

@media (min-width: 1200px) {
    .navbar-brandwrapper {
        width: auto !important;
    }
}

section#hero .image {
    background-position: top;
}


@media (max-width: 991.98px) {
    section#hero {
        max-height: 300px;
    }
}
@media (max-width: 991.98px) {
    section#hero .image {
        height: 300px;
    }
    #jarallax-container-0 div {
        background-position: 63% 50% !important;
    }
}

@media (min-width: 992px) {
    section#hero .image {
        height: 400px;
    }
}
@media (min-width: 992px) {
    section#hero {
        max-height: 400px;
    }
}

@keyframes scrollbounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.home-intro__image {
    height: 60%;
    object-fit: cover;
    width: 100%;
    position: absolute;
    z-index: -1;
}
@media (min-width: 768px) {
    .home-intro__image {
        height: 80%;
    }
}

.navbar-toggler {
    background-color: #17b4d1;
    border-color: #17b4d1 !important;
}
.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

.intro__copyright {
    position: absolute;
    bottom: 24px;
    text-shadow: 0 0 2px #00000080;
    font-size: 14px;
    right: 24px;
    font-family: 'Amaranth', Arial, serif;
    color: #fff;
    font-weight: 500;
    z-index: 50;
}
.home-intro__copyright {
    bottom: 250px;
}
@media (min-width: 768px) {
    .home-intro__copyright {
        right: unset;
        left: 24px;
        bottom: 175px;
    }
}
@media (min-width: 1200px) {
    .home-intro__copyright {
        right: 24px;
        left: unset;
        bottom: 215px;
    }
}
@media (min-width: 1500px) {
    .home-intro__copyright {
        bottom: 175px;
        font-size: 16px;
    }
}