:root {
  --primary-500: #4A897E;
  --primary-700: #34615A;
  --primary-900: #1A312D;

  --secondary-500: #DCE3F5;

  --neutral-0: #ffffff;
  --neutral-100: #EEF4F3;
  --neutral-500: #B1BDBB;
  --neutral-600: #778A87;
  --neutral-700: #434F4D;
}


html {
  margin-right: calc(-1*(100vw - 100%));
    overflow-x: hidden;
}

.wrapper {
  min-height: calc(100vh - 415px);
  margin-top: 64px;
  margin-bottom: 100px;
}

.home.wrapper {
  margin-bottom: 0px;
}

* {
  font-family: Inter, sans-serif;
}

a {
  text-decoration: none;
}


/* Design System */
.text-primary-500{
  color: var(--primary-500);
} 
.text-primary-700{
  color: var(--primary-700);
} 
.text-primary-900{
  color: var(--primary-900);
} 

.text-secondary-500{
  color: var(--secondary-500);
} 

.text-neutral-0{
  color: var(--neutral-0);
} 
.text-neutral-100{
  color: var(--neutral-100);
} 
.text-neutral-500{
  color: var(--neutral-500);
} 
.text-neutral-600{
  color: var(--neutral-600);
} 
.text-neutral-700{
  color: var(--neutral-700);
}


.bg-primary-500{
  background-color: var(--primary-500) !important;
} 
.bg-primary-700{
  background-color: var(--primary-700);
} 
.bg-primary-900{
  background-color: var(--primary-900);
} 

.bg-secondary-500{
  background-color: var(--secondary-500);
} 

.bg-neutral-0{
  background-color: var(--neutral-0);
} 
.bg-neutral-100{
  background-color: var(--neutral-100);
} 
.bg-neutral-500{
  background-color: var(--neutral-500);
} 
.bg-neutral-600{
  background-color: var(--neutral-600);
} 
.bg-neutral-700{
  background-color: var(--neutral-700);
}

html {
  font-size: 16px;
}

h1, .h1-bold {
  font-weight: 700;
  font-size: 48px;
}

h1, .h1-semibold {
  font-weight: 600;
  font-size: 48px;
}

h1, .h1-medium {
  font-weight: 500;
  font-size: 48px;
}

h2, .h2-bold {
  font-weight: 700;
  font-size: 36px;
}

h2, .h2-semibold {
  font-weight: 600;
  font-size: 36px;
}

h2, .h2-medium {
  font-weight: 500;
  font-size: 36px;
}

h3, .h3-bold {
  font-weight: 700;
  font-size: 28px;
}

h3, .h3-semibold {
  font-weight: 600;
  font-size: 28px;
}

h3, .h3-medium {
  font-weight: 500;
  font-size: 28px;
}

h3, .h3-regular {
  font-weight: 400;
  font-size: 28px;
}

.h4-bold {
 font-weight: 700;
  font-size: 24px;
}

.h4-semibold {
 font-weight: 600;
  font-size: 24px;
}

.h4-medium {
 font-weight: 500;
  font-size: 24px;
}

.h4-regular {
 font-weight: 400;
  font-size: 24px;
}

.h5-bold {
 font-weight: 700;
  font-size: 20px;
}

.h5-semibold {
 font-weight: 600;
  font-size: 20px;
}

.h5-medium {
 font-weight: 500;
  font-size: 20px;
}

.h5-regular {
 font-weight: 400;
  font-size: 20px;
}

.h-100 {
  height: 100%;
}

.w-100 {
  width: 100%;
}


.btn.btn-primary.threeb-btn.btn-lg{
  background-color: var(--primary-500);
  color: var(--neutral-0);
  font-size: 18px;
  font-weight: 500;
  padding-left: 32px;
  padding-right: 32px;
  border: var(--primary-500);
}

.btn.btn-secondary.threeb-btn.btn-lg{
  background-color: var(--neutral-100);
  color: var(--primary-500);
  font-size: 18px;
  font-weight: 600;
  padding-left: 32px;
  padding-right: 32px;
  border: var(--neutral-100);
      height: 48px;
}


/* drawer */
.nav-drawer,
.filter-drawer {
    top: 85px;
    position: fixed;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    left: -105%;
    margin: 0;
    width: 100%;
    z-index: 998;
    overflow: hidden;
    height: calc(100vh - 85px);
    background: var(--neutral-100);
}

.nav-drawer.drawer.show,
.filter-drawer.drawer.show {
  left: 0%;
}


.eqiupment-detail__prices {
  display: flex;
}

.equipment-detail__price {
  display: flex;
  align-items: center;
  margin-right: 1.5rem;
}

.equipment-detail__prices .equipment-detail__price:last-child(){
  margin-right: 0px;
}

 #logo.expand,
 #logo {
    max-width: 125px;
  }

  .navbar-toggler {
    font-size: 42px;
    border: 0px;
    color: white;
    font-weight: bold;
    padding: 4px 12px;
    margin-right: -12px;
  }

  button.navbar-toggler:focus {
    box-shadow: none;
  }

.navbar {
  height: 85px;
}

.masthead {
      height: calc(100vh - 240px);
}

.home__search {
  background-color: var(--secondary-500);
}

.home__search > div {
    width: fit-content;
    border-radius: 16px;
    padding: 24px;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

    .threeb-search{
    display: flex;
  }

  .threeb-search .form-control {
    height: 48px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border: 1px solid var(--neutral-500);
    z-index: 100;
  }

  .threeb-search .btn {
    background-color: var(--neutral-100);
    border: 1px solid var(--neutral-500);
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    margin-left: -1px;
  }

  .home .testimonials {
    background-color: var(--neutral-100);
  }


  
  .threeb-card--eqiupment {
    width: 320px;
  }

  .threeb-card--wide {
    width: 15rem
  }

  .threeb-card .card-img,
  .threeb-card--wide .card-img {
    height: 200px; background-position: center; background-size: cover;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }

  .threeb-card a,
  .threeb-card--wide a {
    text-decoration: none;
  }

  .contact__map-iframe {
    margin-top: 30px;border:1px solid black; border-radius: 8px;
    height: 300px;
  }


@media only screen and (min-width: 576px) {
/* CSS rules for extra large devices */
}

@media only screen and (min-width: 768px) {
/* CSS rules for extra large devices */

#logo.expand,
#logo {
    max-width: 140px;
  }

   .masthead {
    height: 500px;
  }

  .home__search {
    margin-top: -45px;
    position: relative;
    background-color: transparent;
  }

  .home__search > div {
    width: fit-content;
    border-radius: 16px;
    height: 96px;
    padding: 24px;
    flex-direction: row;
  }

  .home .testimonials {
    background-color: transparent;
  }

}

@media only screen and (min-width: 992px) {
/* CSS rules for extra large devices */
.navbar {
  height: 100px;
}


 #logo.expand {
    max-width: 350px;
    margin-top: 60px;
  }

  #logo.expand.slideUp{
   max-height: 60px;
   margin-top: 0px;
   width: auto;
  }
  
  .masthead {
    height: 550px;
  }

    .threeb-card--wide {
    width: 23rem
  }

  .threeb-card .card-img,
  .threeb-card--wide .card-img {
    height: 275px; 
  }

  .contact__map-iframe {
    margin-top: 80px;
     height: 400px;
  }

  
}

@media only screen and (min-width: 1200px) {
/* CSS rules for extra large devices */
}

@media only screen and (min-width: 1400px) {
 
  
}