html {
    scroll-behavior: smooth;
}
body {
    overflow-x: hidden;
}


header {
    background: #272727;
    padding: 2rem;

}

nav {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 4rem;
}
h1 {
/*     font-family: "roboto-slab", serif; */
	font-family: "Play", "Gotham", "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    color: #230204;
    font-size: 3.5rem;
    line-height: 1.4;
}

.heading-highlight {
    color: #fff;
    background: #230204;
}

.large-xl-text {
    font-size: 5rem;
    display: inline-block;
    line-height: 0.8;
}

h2 {
/*     font-family: "roboto-slab", serif; */
	font-family: "Play", "Gotham", "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    color: #230204;
    font-size: 2.25rem;
}

.red-text {
    color: #EF3E42;
}
h3 {
/*     font-family: "roboto-slab", serif; */
	font-family: "Play", "Gotham", "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    color: #230204;
    font-size: 1rem;
}

p {
/*     font-family: "figtree", sans-serif; */
	font-family: "Gotham", "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: 1rem;
}

ul {
/*     font-family: "figtree", sans-serif; */
	font-family: "Gotham", "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: 1rem;
    list-style-type: disc;
}

/* Dropdown Styling */
.nav-links {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 4rem;
}

.nav-links li {
    position: relative;
}

/*FORM START*/
form {
    background-color: #334d6700;
    padding: 0;
}

legend {
/*     font-family: "roboto-slab", serif; */
    font-size: 1.125rem;
    font-weight: 600;
}

label {
/*     font-family: "roboto-slab", serif; */
	font-family: "Play", "Gotham", "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    text-transform: uppercase;
    font-size: 1.125rem;
    font-weight: 600;
}

.form-wrapper {
    display: flex;
    flex-direction: column;
}

[type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
    color: #000;
}

.gform_button {
/*     font-family: "roboto-slab", serif; */
	    font-family: "Play", "Gotham", "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: 2rem;
    text-align: center;
    color: #EF3E42;
    font-weight: 600;
    background: #fff;
    padding: 1rem 1.250rem;
    border-radius: 10px;
    box-shadow: 6px 6px 0px #231F20;
}

.gform_footer {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

.gfield_required {
    color: #fff;
    padding-left: 2px;
}

.gfield_error {
    padding: 1.5em;
    border: 1px solid #eee;
    /* border-left-width: 5px; */
    /* border-left-color: #d9534f; */
}

.gfield_error > label, .gfield_error .validation_message {
    color: #fff;
}
/*FORM END*/


/* Hide dropdown by default */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 0;
    min-width: 180px;
    z-index: 1000;
}

/* Dropdown items */
.dropdown-menu li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.dropdown-menu li:last-child {
    border-bottom: none;
}

.dropdown-menu li a {
    text-decoration: none;
    color: black;
    display: block;
    padding: 10px;
}

.dropdown-menu li a:hover {
    background: #ef3e42;
    color: white;
}
.hero-img {
    position: absolute;
    max-width: 600px;
    z-index: 2;
}



@media (min-width: 768px) {
    .dropdown:hover .dropdown-menu {
        display: block;
    }
}

/* Ensure proper positioning */
.dropdown-toggle {
    font-size: 1.25rem;
    cursor: pointer;
    color: #fff;
}


.nav-phone-btn {
/*     font-family: "roboto-slab", serif; */
	    font-family: "Play", "Gotham", "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: 1.25rem;
    color: #fff;
    text-align: center;
}
.red-btn {
/*     font-family: "roboto-slab", serif; */
	    font-family: "Play", "Gotham", "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: 2rem;
    text-align: center;
    color: #fff;
    background: #EF3E42;
    padding: 1rem 1.250rem;
    border-radius: 10px;
    box-shadow: 6px 6px 0px #231F20;
    transition: box-shadow 0.2s ease-in-out, background 0.2s ease-in-out, transform 0.2s ease-in-out;

}
.red-btn:hover {

    color: #fff;
    background: #c53436;
    padding: 1rem 1.250rem;
    border-radius: 10px;
    box-shadow: 6px 6px 0px #231F20;
}

.red-btn-v2 {
/*     font-family: "roboto-slab", serif; */
	    font-family: "Play", "Gotham", "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: 1.25rem;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    background: #EF3E42;
    padding: 0.75rem 1.75rem;
    border-radius: 10px;
    transition: box-shadow 0.2s ease-in-out, background 0.2s ease-in-out, transform 0.2s ease-in-out;

}
.white-btn {
/*     font-family: "roboto-slab", serif; */
	    font-family: "Play", "Gotham", "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: 2rem;
    text-align: center;
    color: #EF3E42;
    font-weight: 600;
    text-wrap: nowrap;
    background: #fff;
    padding: 1rem 1.250rem;
    border-radius: 10px;
    box-shadow: 6px 6px 0px #231F20;
    transition: box-shadow 0.2sease -in-out, background 0.2sease -in-out, transform 0.2sease -in-out;

}
section {
    padding: 4rem;
    position: relative;
    background: url('/wp-content/themes/brehob2017/css/images/white-bg-texture 1.png');
}

.landing-page-footer {
    padding: 4rem;
    position: relative;
}
.red-bg {
    background: url('/wp-content/themes/brehob2017/css/images/red-bg-texture-3.png');
    color: #fff;
}

.gray-bg {
    background: url('/wp-content/themes/brehob2017/css/images/black-bg-texture-2.png');
    color: #fff;
}

.m-auto {
    margin: auto;
}
.pb-0 {
    padding-bottom: 0;
}

.pt-2 {
    padding-top: 2rem;
}
.red-heading {
    font-size: 2.25rem;
    color: #EF3E42;
}

.small-text {
    font-size: 1.5rem;
}

.large-text {
    font-size: 5rem;
}

.white-text {
    color: #fff;
}
.hero-section {
    padding: 4rem;
    background: url('/wp-content/themes/brehob2017/css/images/red-bg-texture%201.png');
}



.product-section {
    background:
            url('/wp-content/themes/brehob2017/css/images/oil-free.png') no-repeat 50% 32%  / 60%,
            url('/wp-content/themes/brehob2017/css/images/white-bg-texture_2.png') no-repeat center / cover;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}
.flex-products-container {
    display: flex;
    gap: 12rem;
    padding-top: 7rem;
}

.flex-product-item {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

.product-img {
    height: 225px;
    object-fit: contain;
    margin: 0 auto;
}

.product-title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
}
.flex-container-4060 {
    display: flex;
    gap: 4rem;
}
.flex-item-40 {
    width: 40%;
}
.flex-item-60 {
    width: 60%;
}

.reverse {
    flex-direction: row-reverse;
}

.flex-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.testimonial-section {
    padding: 0;
    overflow: visible;
    /*height: 76%;*/
    /*min-height: 444px;*/
    height: auto;
    max-height: 500px;
}

.testimonial-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*margin-top: -2rem;*/
}

.testimonial-img {
    height: 100%;
    /*bottom: 10%;*/
    bottom: 0;
    position: relative;
}

.testimonial-text {
    font-family: "roboto-slab", serif;
    font-size: 2rem;
    padding-bottom: 1.25rem;
}

.testimonial-name {
    font-family: "roboto-slab", serif;
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1;
}
.testimonial-title {
    font-family: "roboto-slab", serif;
    font-size: 1.125rem;
    line-height: 1;
}
.testimonial-org {
    font-family: "roboto-slab", serif;
    font-size: 1.125rem;
    line-height: 1;
}


.flex-container-6535 {
    display: flex;
}

.flex-item-35 {
    width: 35%;
}

.flex-item-65 {
    width: 65%;
}

.flex-container-3070 {
    display: flex;
    gap: 4rem;
}
.flex-item-30 {
    width: 30%;
}

.flex-item-70 {
    width: 70%;
    display: flex;
}

.flex-direction-column {
    flex-direction: column;
}
.flex-container-5050 {
    display: flex;
    gap: 4rem;
}

.flex-item-50 {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.flex-stretch {
    align-items: stretch;
}

.align-center {
    align-items: center;
}

.location-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.location-grid .colorless-link {
    color: #231F20;
}
.location-grid .colorless-link:hover {
    color: #EF3E42;
}

/*.colorless-link:hover .location--title,*/
/*.colorless-link:hover ~ p.location--info,*/
/*.colorless-link:hover ~ p.location--info a {*/
/*    color: #EF3E42;*/
/*}*/

.location--info{
/*     font-family: "figtree", sans-serif; */
	font-family: "Gotham", "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.vertical-divider {
    width: 1px;
    background: black;
    margin: 0 auto;
}

.white-divider {
    background: #fff;
}

@media (max-width: 991px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {

    }

    .large-xl-text {
        font-size: 3.5rem;
        line-height: 1;
    }

    .large-text {
        font-size: 4rem;
    }

    section {
        padding: 2rem 4rem;
    }
    .hero-section {
        padding: 2rem 4rem;
    }


    .testimonial-section {
        max-height: none;
        padding: 2rem 2rem 0rem 2rem;
    }

    .flex-container-6535 {
        flex-direction: column;
    }

    .flex-item-65 {
        width: 100%;
    }

    .flex-item-35 {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .flex-container-5050 {
        flex-direction: column;
        gap: 1rem;
    }

    .flex-item-50 {
        width: 100%;
    }

    .flex-container-4060 {
        flex-direction: column;
        gap: 0;
    }

    .flex-item-60 {
        width: 100%;
    }
    .flex-item-40 {
        width: 100%;
        display: flex;
        justify-content: center;

    }
    .flex-container-3070 {
        flex-direction: column;
        gap:0;
    }
    .flex-item-30 {
        width: 100%;
    }
    .flex-item-70 {
        width: 100%;
    }

    .mobile-reverse {
        flex-direction: column-reverse;
    }
    .hero-img {
        position: relative;
        max-width: 400px;
        z-index: 2;
    }
    .testimonial-img {
        height: 225px;
    }
    .testimonial-text {
        font-size: 1.5rem;
    }
    .red-heading {
        font-size: 1.8rem;
    }
    .reverse {
        flex-direction: column-reverse;
    }

    .flex-products-container {
        flex-direction: column;
        gap: 2rem;
    }

    .white-btn {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
     nav {
         flex-direction: column;
     }
    .nav-links {
        padding-top: 2rem;
        gap: 2rem;
        flex-direction: column;
    }
    .hero-section {
        padding: 1rem 2rem;
    }
    section {
        padding: 1rem 2rem;
    }

    .hero-img {
        position: relative;
        max-width: 225px;
    }

    .flex-products-container {
        padding-top: 2rem;
    }

    .pb-2 {
        padding-bottom: 2rem;
    }

    .location-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}