:root {
  --white: #ffffff !important;
  --brown: #b38b6d !important;
  --black-blue: #121820 !important;
  --divider-color: #e0e0e0 !important;
  --dark-divider-color: #2a2f36 !important;
}

/* Fondo de la página */
body {
  background-color: var(--off-white) !important;
  color: var(--black-blue) !important;
  margin: 1rem !important; /* Aseguramos que el margen se mantenga */
}

/* Header */
.header-wrapper {
  background-color: var(--dark-divider-color) !important;
}

/* Logo */
.logo-circle {
  background-color: var(--off-white) !important;
}

/* Botones de acción */
.btn-icon,
.btn-text {
  background-color: var(--off-white-light) !important;
  border-color: var(--divider-color) !important;
  color: var(--brown) !important;
}

.btn-text:hover {
  background-color: var(--brown) !important;
  color: var(--off-white) !important;
}

/* Menú de navegación móvil */
.nav-menu-overlay {
  background-color: var(--blue-charcoal) !important;
}

.nav-menu-link {
  color: var(--white) !important;
}

.nav-menu-link:hover {
  color: var(--off-white) !important;
}

/* Overlay del header de página */
.page-header-overlay {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Sección de contacto */
.page-contact-start {
  background-color: var(--off-white-light) !important;
}

.contact-form {
  background-color: var(--off-white) !important;
}

/* Footer */
.footer-container {
  background-color: var(--black-blue) !important;
}

.footer-contact-description,
.footer-social-description,
.footer-address p,
.footer-bottom {
  color: var(--text-color) !important;
}

/* Iconos y otros elementos */
.icon-box {
  background-color: var(--off-white-light) !important;
}

.form-control {
  background-color: var(--off-white-light) !important;
  color: var(--black-blue) !important;
}

.form-control:focus {
  border-color: var(--brown) !important;
}

.btn-submit {
  background-color: var(--brown) !important;
  color: var(--off-white) !important;
}

.btn-submit:hover {
  background-color: var(--text-color) !important;
}

/* Selección de texto */
::selection {
  background-color: var(--brown) !important;
  color: var(--off-white) !important;
}

::-moz-selection {
  background-color: var(--brown) !important;
  color: var(--off-white) !important;
}