:root {
  --color-deep-navy: #1F2A44;
  --color-dusty-rose: #C88FA3;
  /* --color-cool-taupe: #D9D0C7; */
  --color-cool-taupe: #937c66;
  --color-mist-white: #F7F7F7;
  --color-gold-foil: #C9A96B;
  --color-deep-navy-hover: #23335c;      /* Slightly darker */
  --color-dusty-rose-hover: #b06f8a;     /* Slightly darker */
  --color-cool-taupe-hover: #7a6652;     /* Slightly darker */
  --color-mist-white-hover: #ececec;     /* Slightly darker */
  --color-gold-foil-hover: #b08a4c;      /* Slightly darker */
}

.bg-deep-navy { background-color: var(--color-deep-navy) !important; }
.bg-dusty-rose { background-color: var(--color-dusty-rose) !important; }
.bg-cool-taupe { background-color: var(--color-cool-taupe) !important; }
.bg-mist-white { background-color: var(--color-mist-white) !important; }
.bg-gold-foil { background-color: var(--color-gold-foil) !important; }

.text-deep-navy { color: var(--color-deep-navy) !important; }
.text-dusty-rose { color: var(--color-dusty-rose) !important; }
.text-cool-taupe { color: var(--color-cool-taupe) !important; }
.text-mist-white { color: var(--color-mist-white) !important; }
.text-gold-foil { color: var(--color-gold-foil) !important; }

/* Example usage for buttons and accents */
.btn-primary, .btn-deep-navy {
  background-color: var(--color-deep-navy) !important;
  color: var(--color-mist-white) !important;
  border: none;
}
.btn-accent, .btn-dusty-rose {
  background-color: var(--color-dusty-rose) !important;
  color: var(--color-mist-white) !important;
  border: none;
}
.btn-gold-foil {
  background-color: var(--color-gold-foil) !important;
  color: var(--color-deep-navy) !important;
  border: none;
}

.navbar, .navbar.bg-light {
  background-color: var(--color-deep-navy) !important;
}
.navbar .nav-link, .navbar-brand {
  color: var(--color-mist-white) !important;
}
.navbar .nav-link.active, .navbar .nav-link:focus, .navbar .nav-link:hover {
  color: var(--color-gold-foil) !important;
}

.section-padding, .timeline-content.bg-white, .booking-form, .site-footer {
  /* background-color: var(--color-mist-white) !important; */
  background-color: white !important;
}

.heroText, .timeline-content {
  background-color: var(--color-cool-taupe) !important;
}

/* Accent for hover */
.btn-accent:hover, .btn-dusty-rose:hover, .btn-gold-foil:hover {
  box-shadow: 0 0 0 0.1rem var(--color-gold-foil);
  background-color: var(--color-gold-foil) !important;
  color: var(--color-deep-navy) !important;
}

.btn-primary:hover, .btn-deep-navy:hover {
  box-shadow: 0 0 0 0.1rem var(--color-deep-navy-hover);
  background-color: var(--color-deep-navy-hover) !important;
  color: var(--color-mist-white-hover) !important;
}

/* Add more utility classes as needed for borders, etc. */

/* Timeline card list improvements */
.timeline-content ul {
  padding-left: 1.5rem;
  margin-bottom: 0;
  list-style: none;
}
.timeline-content ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 1.1rem;
  font-size: 1.08rem;
  color: var(--color-deep-navy);
  background: none;
}
.timeline-content ul li:last-child {
  margin-bottom: 0;
}
.timeline-content ul li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  top: 0.1em;
  color: var(--color-dusty-rose);
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1;
}
.timeline-content ul li strong {
  color: var(--color-deep-navy);
  font-weight: 600;
}
.timeline-content ul li span.text-cool-taupe {
  display: block;
  font-size: 0.98em;
  color: var(--color-cool-taupe);
  margin-top: 0.1em;
  margin-left: 0.1em;
}
/* Card background and border for emphasis */
.timeline-content.bg-white {
  border-left: 4px solid var(--color-dusty-rose);
  border-radius: 0.75rem;
  box-shadow: 0 2px 16px 0 rgba(31,42,68,0.07);
  padding: 2rem 2rem 1.5rem 2rem;
}
.timeline-content h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 1.1rem;
  color: var(--color-dusty-rose);
  letter-spacing: 0.01em;
}


.timeline ul {
    padding-left: 0;
}
.timeline ul li {
    font-size: 1rem !important;
}

