@charset "utf-8";
/* Additional CSS */

@font-face {
  font-family: 'FoundersGrotesk'; 
  src: url('/assets/fonts/founders-grotesk-condensed-semibold.woff2') format('woff2');
    font-weight:normal;
   font-style:normal;
}
html{scroll-behavior:smooth; scroll-padding-top: 16rem;}
.bannertext {
    font-family: 'FoundersGrotesk';
    text-transform: uppercase;
    line-height: 80%
}

.link {color: #3c3c3b;
font-size: 1.125rem}
.link :hover {color: #3db5e6}
.active {border-bottom: 2px solid #3db5e6; padding-bottom: 8px}
.breadcrumb .active {border-bottom: none}
.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .navbar-light .navbar-nav :hover {color: rgb(61, 181, 230); border-bottom: none}

.btn {border-radius: 0}

@media (min-width: 768px) { 
    body {padding-top: 140px}}

h4 .small {font-size: 1rem}

.bg-img-1 {background-image: url(../img/home/carousel-1.jpg)}
.bg-img-2 {background-image: url(../img/home/carousel-2.jpg)}
.bg-img-3 {background-image: url(../img/home/carousel-3.jpg)}
.bg-img-4 {background-image: url(../img/home/carousel-4.jpg)}


.carousel-image {
    height: 60vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 80%;
}

@media (min-width: 768px) {
 .carousel-image {
    height: 80vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}   
}
@media screen and (max-device-width: 1024px) and (orientation: landscape)  {
    #twoguys {height: 70%}
    
}
@media (max-width: 767px) { 
    .bg-img-1 {background-position: 65% !important}
    .bg-img-2 {background-position: 55% -70px !important}
    .bg-img-3 {background-position: 55% !important}
}