/*
File: base.css
This contains site-wide styles that don't belong anywhere else
*/

html,
#rf-body {
    overflow-x: hidden;
}

/*
SECTIONS
*/

/* Making transparent background to override default white on WooCommerce shop and elsewhere */
#rf-body #main-content {
    background: transparent;
}

.rf-border-bottom {
    border-bottom: 1px solid var(--color-ui-1);
}

/* Adding extra padding between bordered sections for interior pages */
#rf-body .rf-expanded-padding {
    padding-bottom: 145px;
    margin-bottom: 115px;
}

/*
CONTACT CHIPS
*/

.rf-contact-chip {
    font-weight: bold;
    margin-bottom: var(--size-medium);
    display: flex;
}

.rf-contact-chip::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: var(--size-medium);
    margin-right: var(--size-small);
}

.rf-contact-chip:last-child {
    margin-bottom: 0;
}

#rf-body .rf-contact-chip.phone::before {
    content: "\f879";
}

#rf-body .rf-contact-chip.email::before {
    content: "\f0e0";
}

#rf-body .rf-contact-chip.address::before {
    content: "\f1ad";
}

/*
TRIANGLES BACKGROUND
*/

.rf-triangles-bg::before,
.rf-triangles-bg::after {
    content: "";
    background-image: url(https://www.thebrushguys.com/wp-content/uploads/2020/06/rounded-triangle-product-background.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    display: block;
    width: 700px;
    height: 700px;
    z-index: -1;
}

.rf-triangles-bg::before {
    filter: brightness(0) saturate(100%) invert(72%) sepia(62%) saturate(394%) hue-rotate(9deg) brightness(101%) contrast(91%);
    transform: rotate(-170deg);
    bottom: -3rem;
    right: -4.5rem;
}

.rf-triangles-bg::after {
    bottom: -4rem;
    right: -4.5rem;
}