--root {
    --bs-gutter-x: rem(15)
}

.hayswoodworking-hero-block {
    border-bottom: .0625rem solid #cbcbcb;
    overflow: hidden;
    position: relative
}

.hayswoodworking-hero-block .image-container {
    display: flex;
    height: auto;
    max-height: 100vh;
    min-height: 50vh;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 100%
}

@media(max-width:767.98px) {
    .hayswoodworking-hero-block .image-container {
        align-items: flex-end;
        flex-direction: column;
        height: 100svh
    }

    @supports(height:100svh) {
        .hayswoodworking-hero-block .image-container {
            height: 100svh
        }
    }
}

.hayswoodworking-hero-block .image-container .mobile-line {
    border-right: .0625rem solid #cbcbcb;
    display: none;
    flex-grow: 1;
    margin-right: auto;
    position: relative
}

@media(max-width:767.98px) {
    .hayswoodworking-hero-block .image-container .mobile-line {
        display: block
    }
}

.hayswoodworking-hero-block .image-container picture {
    animation: zoomOutImage .75s ease forwards;
    width: 100%
}

@media(max-width:767.98px) {
    .hayswoodworking-hero-block .image-container picture {
        height: 100svh;
        position: absolute
    }

    @supports(height:100svh) {
        .hayswoodworking-hero-block .image-container picture {
            height: 100svh
        }
    }
}

.hayswoodworking-hero-block .image-container picture img {
    height: auto;
    max-height: 100vh;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    width: 100%
}

@media(max-width:991.98px) {
    .hayswoodworking-hero-block .image-container picture img {
        min-height: 100%
    }
}

@media(max-width:767.98px) {
    .hayswoodworking-hero-block .image-container picture img {
        height: 100%;
        min-width: 100%
    }
}

@media(max-width:575.98px) {
    .hayswoodworking-hero-block .image-container picture img {
        left: 50%;
        position: absolute;
        top: 0;
        transform: translateX(-50%)
    }
}

.hayswoodworking-hero-block .image-container picture:after {
    background: linear-gradient(180deg, transparent 44.68%, rgba(0, 0, 0, .5) 83.41%), linear-gradient(0deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .08)), linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .01) 27.47%);
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%
}

.hayswoodworking-hero-block .image-container .mobile-hero-text {
    border-top: .0625rem solid #cbcbcb;
    display: none;
    padding: 2rem .75rem;
    width: 100%;
    z-index: 5
}

@media(max-width:767.98px) {
    .hayswoodworking-hero-block .image-container .mobile-hero-text {
        display: block
    }
}

.hayswoodworking-hero-block .image-container .mobile-hero-text .heading.mobile {
    color: #ffffff;
    max-width: 65%
}

@media(max-width:767.98px) {
    .hayswoodworking-hero-block .image-container .mobile-hero-text .heading.mobile {
        max-width: 100%
    }
}

.hayswoodworking-hero-block .image-container .mobile-hero-text a {
    display: none
}

.hayswoodworking-hero-block .content-container {
    align-items: flex-end;
    bottom: 0;
    display: flex;
    padding-bottom: 2rem;
    padding-top: clamp(3rem, 5.5vw, 8.125rem);
    position: absolute;
    width: 100%
}

@media(max-width:767.98px) {
    .hayswoodworking-hero-block .content-container {
        flex-direction: column;
        justify-content: flex-end;
        position: relative
    }
}

.hayswoodworking-hero-block .content-container .heading {
    color: #ffffff;
    margin-bottom: 0
}

@media screen and (min-width:123.75rem) {
    .hayswoodworking-hero-block .content-container .heading {
        max-width: 68.75rem
    }
}

@media(max-width:991.98px) {
    .hayswoodworking-hero-block .content-container .heading {
        max-width: 65%
    }
}

@media(max-width:767.98px) {
    .hayswoodworking-hero-block .content-container .heading.desktop {
        display: none
    }
}

.hayswoodworking-hero-block .content-container .text-container {
    align-items: center;
    display: flex;
    margin-left: auto
}

.hayswoodworking-hero-block .content-container .text-container p {
    color: #fefefe;
    margin-right: 1.25rem
}

@media(max-width:991.98px) {
    .hayswoodworking-hero-block .content-container .text-container p {
        margin-top: .625rem;
        max-width: 65%
    }
}

@media(max-width:767.98px) {
    .hayswoodworking-hero-block .content-container .text-container p {
        color: #1a1617;
        margin-top: 0;
        max-width: 80%
    }
}

.hayswoodworking-hero-block .content-container .text-container.contact-details p {
    max-width: 100%
}

.hayswoodworking-hero-block .content-container .text-container.contact-details a {
    border-bottom: .0625rem solid transparent;
    color: #fefefe;
    text-decoration: none;
    transition: border-bottom-color .5s ease;
    transition-delay: 0s
}

@media(hover:hover)and (pointer:fine) {
    .hayswoodworking-hero-block .content-container .text-container.contact-details a:hover {
        border-bottom-color: #fefefe;
        color: #fefefe
    }
}

@media(max-width:767.98px) {
    .hayswoodworking-hero-block .content-container .text-container.contact-details a {
        color: #1a1617
    }
}

@media(max-width:767.98px)and (hover:hover)and (pointer:fine) {
    .hayswoodworking-hero-block .content-container .text-container.contact-details a:hover {
        border-bottom-color: #1a1617;
        color: #1a1617
    }
}

.home.intro-animation .hayswoodworking-hero-block .image-container picture {
    animation: zoomOutImage 2.5s ease forwards;
    animation-delay: 1s
}

@keyframes zoomOutImage {
    0% {
        transform: scale(1.2)
    }

    to {
        transform: scale(1)
    }
}