@import "bootstrap/scss/mixins";
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";

.pdh-footer-background {
    position: relative;
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #222222;
        background-image: url("../../images/pdh_pattern.svg");
        background-size: 35%;
        background-repeat: repeat-y;
        background-position: top 0 right 5rem;
        filter: grayscale(100%);
        z-index: -1;
        @include media-breakpoint-up(xl) {
            background-size: 420px;
        }
    }
}

.footer-container {
    .footer-columns {
        h4 {
            font-size: 20px;
            text-transform: uppercase;
        }
    }
    .footer-more {
        img {
            width: 100%;
            max-width: 240px;
            height: auto;
        }
    }
    .footer-divider {
        height: 1px;
        background-color: transparent;
    }
    .footer-copyright {
        font-size: 10px;
    }
    .footer-spacer {
        flex: 1;
        height: 1px;
    }
    a.nav-link:hover {
        color: var(--bs-orange);
    }
}