@import url("css/bootstrap_slider.css");



#headerTop img.img-fluid {
    max-width: 6rem;
}


#footer img.img-fluid {
    max-width: 6rem;
}







@import url("css/bootstrap_slider.css");
:root {
    --bs-gray: #302E2E;
    --bs-primary:#111111;
    --bs-secondary: #8dd9bf;
    --bs-light: #F0F1F2;
    --bs-dark: #111;
    --bs-primary-rgb: 78, 112, 105;
    --bs-secondary-rgb: 141, 217, 191;
    --bs-light-rgb: 234, 235, 232;
    --bs-dark-rgb: 51, 59, 49;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-body-rgb: 129, 129, 129;
    --bs-font-sans-serif: "Poppins", sans-serif;
    --bs-gradient: linear-gradient(180deg, rgba(32, 32, 32, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 500;
    --bs-body-line-height: 1.5;
    --bs-body-color: #333B31;
    --bs-body-bg: #fff;
  
    --byf-header-font: 'Noto Sans', sans-serif;
  }


  /*=====================
  TYPOGRAPHY
  ======================*/
  h1, h2, h3, h4, h5 {
      font-family: var(--byf-header-font);
      font-weight: 600;
  }


h1 {
 padding-bottom: 0.7rem;
}

#main p, #footer p {
    font-weight: 400;
}

 a {
      color: var(--bs-primary);
  }


label {
    display: inline-block;
    font-family: 'Poppins';
}


.hasBgImg .overlay {
    opacity: 0.8;
}

h1 {
font-family: "Noto Sans", sans-serif;
}

h2 {
font-family: "Noto Sans", sans-serif;
}

h3 {
font-family: "Noto Sans", sans-serif;
}

.text-primary {
    color: var(--bs-primary) !important;
}

.btn-light {
      background-color: var(--bs-secondary);
      border-color: var(--bs-secondary);
      color: var(--bs-light);
  }

.btn-lg {
padding: 1rem;
}


#cta .btn-light{
color: #111;
display: block;
max-width: fit-content;
margin-left: auto;
margin-right: auto;
}

#cta .btn-light:hover{
color: #fff;
}



.btn-dark {
    color: #222;
    background-color: transparent;
    border-color: #262626;
    border-width: 0.15rem;
transition: color 0.3s ease, background-color 0.4s ease-in-out;
}


.btn-dark:hover, .btn-dark:focus {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}



.btn-light:hover, .btn-light:focus {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}



.btn-primary {
    color: #000;
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}

.bg-primary {
    background-color: var(--bs-primary) !important;
}

.btn-primary:hover {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.fw-bold {
    font-weight: 600 !important;
}

body {
    background-color: var(--bs-light);
}

  /*=====================
  HEADER
  ======================*/
#headerTop a {
    color: #333b31;
    text-decoration: none;
    font-family: 'Poppins';
    font-size: 1rem;
}

#header img.img-fluid {
    width: 50% !important;
}


#auxMenu .nav-link {
    padding: 0 1rem 0 0;
    color: #262626;
    font-family: 'Noto Sans', sans-serif;
}



#auxMenu .nav-link:hover, #auxMenu .nav-link:focus {
    color: var(--bs-secondary) !important;
    opacity: 1;
}

#auxMenu .icon {
    text-align: center;
    color: var(--bs-dark) !important;
    margin-right: 0.5rem;
    font-size: calc(1.26rem + 0.12vw);
}


#header .navbar .nav-link:hover, #header .navbar .nav-link:focus {
    background-color: transparent !important;
    color: var(--bs-secondary) !important;
}

#header .navbar .nav-link {
    padding-left: 1rem;
    padding-right: 1rem;
    transition: all 0.5s ease;
    font-weight: 300;
}

.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: var(--bs-primary) !important;
}

#header {
    background: #fff !important;
z-index: 99999 !important;
}

#headerTop {
    padding-top: 0.7rem !important;
    padding-bottom: 0.7rem !important;
}





#header .navbar {
    background-color: var(--bs-dark) !important;
    z-index: 99999;
}



#header .navbar .nav-link:not(.active):not(:active) {
    color: var(--bs-light);
}


#staffCards a.card:hover {
    background-color: var(--bs-dark);
    color: #fff;
}

#homepageReviews {
    display: none;
}

#homepageStaff img.card-img-top {
max-height: none !important;
}

#homepageStaff h3 {
    color: var(--bs-dark);
font-family: 'noto sans', sans-serif;
}

#homepageStaff strong.fs-4.d-block {
    font-family: 'Noto Sans', sans-serif;
}

#staffCards {
    background-color: #d9d9d9 !important;
}

#staffCards a.card {
    transition: all 0.5s ease-in-out;
    color: #333b31;
box-shadow: 1px 2px 5px rgb(57 54 54 / 43%);
border: none;
}

#staffCards p {
    padding: 0rem 1.5rem 0.5rem 1.5rem;
}

#splashImage .teaserText {
    max-width: 50rem !important;
}

#splashImage h1.text-uppercase.display-5.fw-bold {
    color: #e4dda0 !important;
    line-height: 3.3rem !important;
    margin-bottom: 0rem;
}

#splashImage .boxes .btn {
position: relative;
display: block;
width: 50%;
margin: auto;
}

  /*=====================
  CAROUSEL
  ======================*/
.boxes {
    margin-top: -7rem !important;
    z-index: 500;
    position: relative;
box-shadow: 1px 2px 5px rgb(57 54 54 / 43%);
}

.boxes h2 {
font-size: 1.3rem !important;
padding-bottom: 0.5rem;
}


.carousel-caption.d-none.d-md-block {
    bottom: auto;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: left;
    transform: translateY(-50%);
    margin-left: 5.7rem;
}

.carousel {
    position: relative;
    max-height: 550px;
}

.carousel-caption h2 span {
 color: #8DD9BF !important;
    line-height: 3.3rem !important;
font-size: 2.9rem;
    text-transform: uppercase;
font-weight: 500;
background: #3333339c;
max-width: fit-content;
}

.carousel-caption h2 {
    color: #F7F7F7 !important;
    line-height: 3.3rem !important;
    font-size: 2.9rem;
    text-transform: uppercase;
    font-weight: 600;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
}




  /*=====================
  BOXES
  ======================*/

 #splashImage .boxes .record {
      border-right: 1px solid #444;
  }

 #splashImage .boxes .record:hover .overlay {
      background: #444 !important;
      transition: all 0.35s ease-in-out;
  }

  .overlay.bg-primary::before {
     display: none;
  }

 #splashImage .boxes .record  .bg-primary {
    background-color: #222!important;
}

 .boxes .record a {
      text-decoration: none;
color: #fff;
  }

#splashImage .boxes .btn {
    position: relative;
    display: block;
    width: 50%;
    margin: auto;
    border-color: #fff;
    color: #fff;
    background-color: transparent;
}


  /*=====================
  HOMEPAGE CONTENT
  ======================*/
#homepageContent h1 {
    color: var(--bs-primary) !important;
    font-weight: 600 !important;
}

#homepageContent h2 {
    color: var(--bs-primary) !important;
    font-weight: 400;
}

#pageContent h1 {
    color: var(--bs-primary) !important;
margin-bottom: 1.5rem;
padding-top: 1rem;
}

#homepageContent {
    background-color: var(--bs-light)!important;
}

#homepageContent a {
    color: var(--bs-primary);
    text-decoration: underline;
}


#homepageContent p strong {
    color: #333b31;
}



  /*=====================
  HOMEPAGE REVIEWS
  ======================*/

#homepageReviews .col-lg-4.pt-lg-4.p-3 {
    margin: auto;
}



#pageContent {
    padding-left: 2rem;
    padding-right: 2rem;
    width: 100% !important;
}

#cta::after {
    position: absolute;
    top: 0;
    content: "";
    --triangleSize: 32px;
    z-index: 2;
    width: 0;
    height: 0;
    border-left: var(--triangleSize) solid transparent;
    border-right: var(--triangleSize) solid transparent;
    border-top: calc(var(--triangleSize)*1.15) solid var(--bs-light);
}

#cta {
background-attachment: fixed;
}


#homepageCta p {
    color: #fff;
}

#cta h3 {
    font-family: 'Noto Sans';
    font-weight: 600;
    font-size: 2rem !important;
    color: var(--bs-light);
    margin-bottom: 1rem;
}





  /*=====================
  SERVICES
  ======================*/

.card.transformer .icon {
      background: var(--bs-primary);
      border-radius: 40px;
      width: 80px;
      height: 80px;
      padding: 21px;
      display: flex;
      align-items: center;
      justify-content: center;
  }






  /*=====================
  FOOTER
  ======================*/

#footer .flex-fill.p-3.mb-3.mb-md-0.mx-lg-4.flex-column {
    padding-bottom: 3rem !important;
    padding-left: 0rem !important;
    padding-top: 0rem !important;
}


#footer .logo.mb-4.d-flex.justify-content-center.justify-content-lg-start.d-lg-block {
    display: none !important;
}

#footer a {
    color: #8DD9BF !important;
}

#footer p {
    line-height: 1.8;
    color: var(--bs-light) !important;
}

#footer form {
    margin-top: 2rem;
}


#footer a.btn.btn-light {
    color: #111 !important;
}

#footer a.btn.btn-light:hover {
    color: var(--bs-secondary) !important;
}

  /*=====================
  PAGE CONTENT
  ======================*/
#pageContent > h1, #pageContent > .h1, #pageContent > h2, #pageContent > .h2, #pageContent > h3, #pageContent > .h3 {
    margin-bottom: 1rem;
    color: var(--bs-primary) !important;
}



#pageContent a {
    color: var(--bs-primary);
    text-decoration: underline;
}


#sidePanel h5 {
    font-family: 'Noto Sans', sans-serif;
    color: var(--bs-primary) !important;
}

#sidePanel a.btn.btn-light {
    color: #333;
}

#sidePanel a.btn.btn-light:hover {
    color: #fff;
}





#contactaddress p strong {
    color: var(--bs-primary) !important;
}

#pageContent .meet-the-team .bio {
    display: inline-block;
    margin: 0 2rem 2.5rem 0;
}

#pageContent .meet-the-team p:first-of-type {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 10px 0 0;
}





  /*=====================
  MEDIA (MAX-WIDTH 768px)
  ======================*/

@media (max-width: 768px) {
  #headerTop a {
    color: #333b31;
    text-decoration: none;
    font-family: 'Poppins';
    font-size: 1rem;
    justify-content: center !important;
    display: flex;
    padding-bottom: 1.5rem;
}
}

@media (max-width: 768px) {
 #auxMenu .nav-link {
    padding: 0.5rem;
    color: #262626;
    font-family: 'Noto Sans', sans-serif;
}


@media (max-width: 768px) {
 .fs-6.text-primary.text-uppercase.fw-bold.mb-2 {
    font-size: 0.7rem !important;
}


  /*=====================
  MEDIA (MAX-WIDTH 576px)
  ======================*/


@media (max-width: 768px) {
 #pageContent p {
  margin-top: 1rem;
}



  /*=====================
  MEDIA (MIN-WIDTH 768px)
  ======================*/

@media (min-width: 768px) {
#gmapwide p {
    margin-left: 3rem;
}