:root {
  --primary-color: #234252;
  --primary-color-rgb: 171, 137, 101;
 
}

:root {
  /* Your New Logo Colors */
  --btn-blue: #1fa8e1;
  --btn-hover: #0255bb;
  --bg-light: #d6f2f2;
  --bg-mid: #6facce;
  --bg-dark-slate: #1a3644;
}

/* --- CUSTOM BUTTON COLORS --- */
.btn-main, 
a.btn, 
input[type="button"].btn-main, 
button.btn-main {
    background: var(--btn-blue) !important;
    border-color: var(--btn-blue) !important;
    color: #ffffff !important;
}

.btn-main:hover, 
a.btn:hover {
    background: var(--btn-hover) !important;
    border-color: var(--btn-hover) !important;
}

/* --- CUSTOM DARK BACKGROUNDS --- */
footer, 
.footer-widget, 
section.dark-section { /* Replace .dark-section with the actual class/id of your amenities section */
    background: var(--bg-dark-slate) !important;
}

/* --- CUSTOM LIGHT BACKGROUNDS --- */
section.light-section, /* Replace with actual class/id */
.reservation-bar {     /* Replace with actual class/id */
    background: var(--bg-light) !important;
}

/* --- CUSTOM MID BACKGROUNDS --- */
section.history-section { /* Replace with actual class/id */
    background: var(--bg-mid) !important;
}

/* --- CUSTOM OVERLAYS --- */
.de-image-hover,
.overlay-v {
    /* Using the blue with 85% opacity */
    background: rgba(31, 168, 225, 0.85) !important; 
}

.bg-color, .bg-focus-color:focus, section.bg-color{
background-color:#d6f2f2!important;
}

.white-color{
color: #fff!important;
}

.id-color{
color: #6facce!important;
}