@charset "UTF-8";

html, body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
  height: 100vh;
}

body {
  height: 100vh;
  font-size: 1.125rem;
  background: url("../images/mohair-the-barber-interior.webp");
  background-repeat: no-repeat;
  background-position: left center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
}

/* off-canvas styles */
.offcanvas-collapse {
  position: fixed;
  top: 0; /* Height of navbar */
  bottom: 0;
  right: 100%;
  width: 100%;
  padding: 6rem 1rem 1rem;
  overflow-y: auto;
  visibility: hidden;
  background-color: #708196;
  transition: transform .3s ease-in-out, visibility .3s ease-in-out;
  text-align: center;
  z-index: -1;
}

.offcanvas-collapse.open {
  visibility: visible;
  transform: translateX(100%);
}

.nav-item {
  font-size: 2rem;
}

.nav-logo {
  width: 200px;
  height: auto;
}

.nav-logo-main {
  width: 964px;
  height: auto;
}

.bg-dark {
  background-color: rgba(112, 129, 150, 0.9) !important;
  transition: background-color 500ms linear;
}


.logo-holder {
  height: 100vh;
}

/* toggle styles */
.navbar-toggler .icon-bar {
  transform: rotate(0deg) translate(0px, 0px);
  transition: ease all .2s;
}

.navbar-toggler .icon-bar {
  display: block;
  width: 38px;
  height: 3px;
  border-radius: 0;
}

.navbar-toggler .icon-bar+.icon-bar {
  margin-top: 8px;
}

.navbar-toggler:hover>.icon-bar:nth-child(2) {
  width: 38px;
  transition: ease all .2s;
}

.navbar-toggler:active>.icon-bar:nth-child(2) {
  width: 38px;
  transition: ease all .2s;
}

.navbar-toggler:not(.bend) .icon-bar:nth-child(1) {
  transform: rotate(45deg) translate(6px, 9px);
  transition: ease all .2s;
}

.navbar-toggler:not(.bend) .icon-bar:nth-child(2) {
  opacity: 0;
  transition: ease all .2s;
}

.navbar-toggler:not(.bend) .icon-bar:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -9px);
  transition: ease all .2s;
}

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

.navbar-toggler .icon-bar {
  background-color: #fff;
}

/* Content Styles */
.bucket-left {
  text-align: center;
  background-color: rgba(0, 0, 0, 0.9);
}

.bucket-mid {
  background-color: rgba(112, 129, 150, 0.9);
  text-align: center;
}

address {
  margin: 0 auto;
  font-size: 1.3rem;
}

table.price-table, table.times-table {
  font-size: 1.3rem;
}

table.times-table {
  width: 350px;
  margin: 0 auto;
}

.find-us {
  margin: 1rem auto;
}

.list-group-item {
  background-color: transparent !important;
  border: none;
}

.apple-maps, .google-maps, .phone-link {
  margin-bottom: 0.75em;
}

.google-maps a, .apple-maps a, .phone-link a {
  border-radius: 100px !important;
  padding: 0.4em 1.5em 0.6em;
  text-decoration: none;
}

.apple-maps a {
  color: #fff;
  padding: 0.4em 1.9em 0.6em;
}

.google-maps a {
  color: #000;
}

.apple-maps a {
  background-color: #1c1f23;
  border-color: #1a1e21;
}

.google-maps a {
  background-color: #f9fafb;
  border-color: #f9fafb;

}
.phone-link a {
  background-color:rgba(112, 129, 150, 1);
  border-color: rgba(112, 129, 150, 1);
  color: #fff;
}
.table-striped > tbody > tr:nth-of-type(2n+1) {
  --bs-table-accent-bg: rgba(112, 129, 150, 0.2);
  color: white;
}
.image-holder{
min-height: 400px;
}
.image-filler {
  background-image: url("../images/mohair-the-barber-seating.webp");
  background-repeat: no-repeat;
  background-position: left center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.image-filler-bottom {
  background-image: url("../images/mohair-the-barber-clipper-mat.webp");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


@media (max-width: 640px) {
address,
table.price-table,
table.times-table  {
  font-size: 1.125rem;
}

.image-filler {
 background-image: none;

}
.image-filler-bottom {
 background-image: none;
}

}