/* CUSTOM COLOR PALETTE */
:root,
[data-bs-theme="light"] {
  --bs-primary: #f278a0;
  --bs-primary-rgb: 242, 120, 160;
  --bs-secondary: #6ab5ec;
  --bs-secondary-rgb: 106, 181, 236;
  --bs-success: #ff4e64;
  --bs-success-rgb: 255, 78, 100;
  --bs-info: #afe6fa;
  --bs-info-rgb: 175, 230, 250;
  --bs-warning: #fffae0;
  --bs-warning-rgb: 255, 250, 224;
  --bs-danger: #ffd8e9;
  --bs-danger-rgb: 255, 216, 233;
  --bs-light: #f8fafc;
  --bs-light-rgb: 248, 250, 252;
  --bs-dark: #0f172a;
  --bs-dark-rgb: 15, 23, 42;
}
/* SOLID PRIMARY */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 90%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 80%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 80%, black);
  --bs-btn-active-border-color: color-mix(
    in srgb,
    var(--bs-primary) 75%,
    black
  );
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
/* OUTLINE PRIMARY */
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 85%, black);
  --bs-btn-active-border-color: color-mix(
    in srgb,
    var(--bs-primary) 80%,
    black
  );
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

/* --- CUSTOM STYLES --- */

html,
body {
  overflow-x: clip;
}

.navbar-brand img {
  max-width: 160px;
  height: auto;
}

@media (max-width: 576px) {
  .navbar-brand img {
    max-width: 120px;
  }
}

/* HERO */
.hero__image {
  background-size: cover;
  background-position: center;
  min-height: 50vh;
  background-image: url("../assets/banner-2.png");
}

/* SPECIFIC HERO IMAGES */
.hero--about .hero__image {
  background-image: url("../assets/banner-4.png");
}

.hero--services .hero__image {
  background-image: url("../assets/banner-1.png");
}

.hero--dogtraining .hero__image {
  background-image: url("../assets/banner-2.png");
}

.hero--reserve .hero__image {
  background-image: url("../assets/banner-3.png");
}

.hero__title,
.hero__subtitle {
  text-shadow: 2px 2px 20px rgba(0, 0, 0, 1);
}

/* OUR SERVICES */
.our-services__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.our-services__media .our-services__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 576px) {
  .our-services__media {
    aspect-ratio: 4 / 3;
  }
}