@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap");

@import "tailwindcss";

@theme {
  --default-font-family: "Source Serif 4", serif;
  --color-primary: #181d25;
  --color-secondary: #11141a;
  --color-accent: #9f8c61;
  --color-dull: #6d6d6d;
}

.active-nav {
  background-color: #6d6d6d;
  color: white;
}

.owl-dots {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

.owl-dot span {
  background: white !important;
  height: 20px !important;
  width: 20px !important;
  border: 0px !important;
  border-radius: 0 !important;
}

@media (max-width: 480px) {
  .owl-dots {
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
  .owl-dot span {
    height: 12px !important;
    width: 12px !important;
  }
}

.owl-dot.active span {
  background: #9f8c61 !important;
}

.owl-nav {
  position: absolute;
  top: -9rem;
  right: 0;
}
@media (max-width: 480px) {
  .owl-nav {
    position: absolute;
    top: -7.8rem;
    right: 0;
  }
}

.owl-nav button:hover {
  background: transparent !important;
}

.stylists .owl-nav {
  z-index: -10;
  width: 100%;
  position: absolute;
  top: 35%;
  transform: translatey(-50%);
  display: flex;
  justify-content: space-between !important;
  padding: 0 20px !important;
}
@media (max-width: 480px) {
  .stylists .owl-nav {
    z-index: 30;
    width: 100%;
    position: absolute;
    top: 35%;
    transform: translatey(-50%);
    display: flex;
    justify-content: space-between !important;
    padding: 0 20px !important;
  }
}

.stylists .owl-nav button:hover {
  background: transparent !important;
}

/* Chrome, Edge, Safari */
input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

/* Firefox */
input[type="date"]::-moz-calendar-picker-indicator {
  display: none;
}

.active-service {
  background-color: black;
  color: white;
}
.map-container p {
  width: 100% !important;
  height: 100% !important;
}

.gallery-carousel .owl-item {
  display: flex; /* let child stretch */
  align-items: stretch; /* optional: match height */
  height: 70px;
  margin: 10px 0;
}
.gallery-carousel .owl-item.active a {
  height: 100% !important;
  width: 90% !important;
  margin: auto;
}
.gallery-carousel .owl-nav {
  position: absolute;
  top: -5rem;
  right: 1rem;
}
@media (max-width: 480px) {
  .gallery-carousel .owl-nav {
    position: absolute;
    top: -4rem;
    right: 1rem;
  }
}