/*
    Custom styles for Bootstrap 5.2.3 CDN setup
*/

/* =========================
   Fonts
========================= */

@font-face {
  font-family: 'Montserrat';
  src: url("/fonts/Montserrat-Regular.ttf");
}

/* =========================
   Global
========================= */

body {
  box-sizing: border-box;

  background-color: #f8f8f8;
  background: linear-gradient(
    180deg,
    rgba(248,248,248,1) 0%,
    rgba(251,240,221,1) 100%
  );

  margin: 0;
  padding: 0;
  min-height: 100vh;

  font-family:
    "Montserrat",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    "Noto Sans",
    "Liberation Sans",
    Arial,
    sans-serif;

  font-size: 1.05rem;
}

/* =========================
   Typography
========================= */

h1 {
  margin-top: 30px;
  margin-bottom: 40px;
}

h2 {
  margin-bottom: 40px;
}

h4 {
  margin-top: 30px;
}

/* =========================
   Bootstrap Color Overrides
========================= */

a {
  color: #3a598c;
}

a:hover,
a:focus {
  color: #2f4b77;
}

.text-primary {
  color: #3a598c !important;
}

.bg-primary {
  background-color: #3a598c !important;
}

.border-primary {
  border-color: #3a598c !important;
}

/* Buttons */

.btn-primary {
  background-color: #3a598c;
  border-color: #3a598c;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #2f4b77 !important;
  border-color: #2f4b77 !important;
}

/* Navigation */

.nav .nav-link {
  color: #3a598c;
}

.nav .nav-link:hover,
.nav .nav-link:focus {
  color: #2f4b77;
}

.navbar-brand {
  color: #3a598c;
}

/* =========================
   Custom Buttons
========================= */

.round-btn-xl {
  width: 80px;
  height: 80px;
  border-radius: 40px;
}

/* =========================
   Spacer Utilities
========================= */

.spacer-sm {
  height: 16px;
}

.spacer-md {
  height: 24px;
}

.spacer-lg {
  height: 32px;
}

.spacer-xl {
  height: 40px;
}

.spacer-xxl {
  height: 48px;
}

/* =========================
   Main Image
========================= */

.desktop-main-image {
  width: 99%;
  height: auto;

  z-index: -1;
  position: absolute;
  top: -10px;
}

@media only screen and (min-width: 1130px) {
  .desktop-main-image {
    top: -30px;
  }
}

@media only screen and (min-width: 1700px) {
  .desktop-main-image {
    top: -100px;
  }
}

/* =========================
   Header Overrides
========================= */

.custom-margin-header h4 {
  margin-top: 50px;
  text-decoration: underline;
}

/* =========================
   Carousel
========================= */

.apartment-carousel-image {
  height: 500px;
  object-fit: contain;
}

.carousel-indicators [data-bs-target] {
  width: 20px;
  height: 20px;
  background-color: #3a598c;
}

/* =========================
   Back To Top Button
========================= */

.back-to-top-btn {
  position: fixed;

  bottom: 40px;
  right: 40px;

  z-index: 5;

  height: 48px;
  width: 48px;

  border-radius: 24px;
}

/* =========================
   Lists
========================= */

#content .container ol li {
  margin-top: 10px;
}

.btn-outline-primary {
  color: #3a598c;
  border-color: #3a598c;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: #3a598c !important;
  border-color: #3a598c !important;
  color: #fff !important;
}

.btn-outline-primary:focus {
  box-shadow: 0 0 0 0.25rem rgba(58, 89, 140, 0.25);
}