/* 
 * MK5 Agency - Custom Styles
 * Colores personalizados para la marca
 */

/* Color Primario Principal: #3c588e */
:root {
  --bs-primary: #3c588e;
  --bs-primary-rgb: 60, 88, 142;
  --mk5-light-blue: #e8f0f7;
}

/* Backgrounds */
.bg-primary,
.badge.bg-primary {
  background-color: #3c588e !important;
}

.bg-primary-dark {
  background-color: #2a3f66 !important;
}

.bg-soft-primary {
  background-color: #e8f0f7 !important;
}

/* Hero Section con fondo azul claro */
.hero-bg-light {
  background-color: #f0f5fa;
}

/* Text Colors */
.text-primary {
  color: #3c588e !important;
}

.text-primary-light {
  color: #5a7bb8 !important;
}

/* Buttons */
.btn-primary {
  background-color: #3c588e;
  border-color: #3c588e;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #2a3f66;
  border-color: #2a3f66;
}

.btn-primary:active {
  background-color: #1e2d4a;
  border-color: #1e2d4a;
}

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

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: #3c588e;
  border-color: #3c588e;
  color: #fff;
}

/* Links */
.link,
a.link {
  color: #3c588e;
}

.link:hover,
a.link:hover {
  color: #2a3f66;
}

/* Borders */
.border-primary {
  border-color: #3c588e !important;
}

/* SVG Icons */
.svg-icon.text-primary svg path,
.svg-icon.text-primary svg rect {
  fill: #3c588e;
}

/* Nav Links Active */
.nav-link.active {
  color: #3c588e !important;
}

/* Badges */
.badge.bg-primary {
  background-color: #3c588e !important;
}

/* Forms */
.form-control:focus {
  border-color: #3c588e;
  box-shadow: 0 0 0 0.25rem rgba(60, 88, 142, 0.25);
}

/* Specific Overrides */
h5.text-primary,
.navbar-dropdown-menu-media-title .badge.bg-primary {
  color: #3c588e !important;
}

/* Dropdown Headers */
.dropdown-header {
  color: #3c588e;
}

/* Forzar fondo blanco en sección de servicios */
#servicios {
  background-color: #ffffff !important;
}

#servicios .banner-start {
  background-color: transparent !important;
}

/* Forzar fondo blanco en sección de nosotros */
#nosotros {
  background-color: #ffffff !important;
}

#nosotros .banner-end {
  background-color: transparent !important;
}

/* Banner Half End - Estilo para la imagen del hero */
.banner-half-end {
  position: relative;
}

.banner-half-end::before {
  content: "";
  position: absolute;
  top: 0;
  right: -50vw;
  bottom: 0;
  width: 50vw;
  background-color: #e8f0f7;
  z-index: -1;
}

@media (max-width: 767.98px) {
  .banner-half-end::before {
    display: none;
  }
}