@font-face {
    font-family: "SpecialGothic";
    src: url("/fonts/SpecialGothic-VariableFont.woff2") format("woff2 supports variations"),
        url("/fonts/SpecialGothic-VariableFont.ttf");
    font-weight: 400 700;
    font-stretch: 75% 125%;
}

body {
    font-family: "SpecialGothic", "Segoe UI", sans-serif;
}

.service-img {
    width: 40%;
    aspect-ratio: 1 / 1 ;
    object-fit: cover;
}

.about-img {
    width: 100%;
    object-fit: cover;
}

#hero {
    background-image: linear-gradient(#FDD786, #3FE4E4), url(../../images/water.jpg);
    background-size: cover;
    background-blend-mode: hard-light;
    background-position: center;
    min-height: 600px;
    color: #171717
}

#hero img {
    width: 75%;
    min-width: 350px;

}

h2 {
    font-variation-settings:
        "wght" 600,
        "wdth" 90;
    text-transform: uppercase;
    font-size: 2rem;
    text-align: center;
}

h3 {
    font-variation-settings:
        "wght" 500;
}

.btn-primary {
    --bs-btn-color: #171717;
    --bs-btn-bg: #FDD786;
    --bs-btn-border-color: none;
    --bs-btn-hover-color: #171717;
    --bs-btn-hover-bg: #f0ba46;
    --bs-btn-hover-border-color: none;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #171717;
    --bs-btn-active-bg: #3FE4E4;
    --bs-btn-active-border-color: #3FE4E4;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
    --bs-btn-border-radius: 100px;
    --bs-btn-font-size: 1.4rem;
}

@media (min-width: 768px) {
    #hero {
        background-image: linear-gradient(#FDD786, #3FE4E4), url(../../images/water2.jpg);

    }
}

/* NAVBAR STYLES */
nav {
    height: 10vh;
    min-height: 60px;
}

nav img {
    height: 50px;
}

nav .navbar-text {
    text-decoration: none;

}

.navbar-collapse {
    
}