/* TYPOGRAPHY */
body {
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    background-color: #202020;
}

h1 {
    font-family: 'Outfit';


}



.hero {
    background-image: url('../images/banner-overlay1.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

}

.hero-sales {
    background-image: url('../images/sales-1.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.hero-finance {
    background-image: url('../images/finance-1.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.hero-l {
    background-image: url('../images/card-5.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.hero-j {
    background-image: url('../images/joint.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.underlay {
    background-image: url('../images/hibru.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

h2 {
    font-family: 'Roboto';

}

.text-yellow {
    color: #A56A0A;
}

.bg-grey {
    background-color: #202020;
}

.bg-brown {
    background-color: #40321A;
}

.bg-lightbrown {
    background-color: #B68940;
}


/* Set the border color */

.custom-toggler.navbar-toggler {
    border-color: #A56A0A;
}

/* Setting the stroke to green using rgb values (0, 128, 0) */


.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(165, 106, 10, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.square {
    height: 101px;
    width: 73px;
}

.footer-color {
    color: #dda74f;
}

.logo-margin {
    margin: 0.6rem 0 0.6rem 0.5rem;
}

.slope {
    transform: skewY(-11deg)
}

.slope2 {
    transform: skewY(11deg)
}

.ftr {
    display: flex;
    flex-direction: column;

}



@media(min-width: 800px) {
    .ftr {

        flex-direction: row;
    }
}

/* @media(max-width: 365px) {}

@media(min-width: 245px) {
    .ftr {
        display: flex;
        flex-direction: column;

    }
} */



@media(min-width:1200px) {
    .square {
        height: 148px;
        width: 153px;
    }

    .logo-margin {
        margin: 1.6rem 0 0rem 5.3rem;
    }

    .slope {
        transform: skewY(0deg)
    }

    .slope2 {
        transform: skewY(0deg)
    }


    .hero h1 {
        margin: 3rem 0 3rem 0;

    }

    .logo-size {
        width: 123px;
        height: 97px;
    }
}