.custom-container {
  max-width: 1400px;
}
.navbar{
  background-color: #fff !important;
}
.nav-link,
.dropdown-item{
  font-weight: 600;
  color: #333 !important;
}
.nav-link:hover,
.nav-link:focus {
  color: #2f598c !important;
}
.dropdown:hover .dropdown-menu {
display: block;
  margin-top: 0;
}
.navbar-nav > li >.dropdown-menu > .dropdown-item:hover,
.navbar-nav > li >.dropdown-menu > .dropdown-item:focus {
  color: #2f598c !important;
  background-color: #fff;
}
.navbar-nav > li >.dropdown-menu > .active,
.navbar-nav > li >.dropdown-menu > .active:hover,
.navbar-nav > li >.dropdown-menu > .active:focus {
  color: #2f598c !important;
  background-color: #fff !important;
}
.navbar .navbar-nav > .active > a,
.navbar .navbar-nav > .active > a:hover,
.navbar .navbar-nav > .active > a:focus 
{
  color: #2f598c;
}
.navbar .navbar-nav .active a {
  color: #2f598c !important;
}
.custom-toggler .navbar-toggler {
  background-color: white;
}
.navbar .navbar-collapse,
.navbar .navbar-form {
  position: relative;
  border: none;
}
.custom-btn {
  background: #2f598c;
  border: none;
  color: white;
}
.hero-home-1 {
  background: #fff;
}
.experience .jumbotron {
  background: #2f598c;
  color: white;
  text-transform: uppercase;
}
.experience {
  background: #2f598c;
}
.main-footer {
  background: #333;
  color: white;
}
.contacto {
  background: #333;
  color: white;
}
.section-subtitle {
  text-transform: uppercase;
  color: #2f598c;
}
.grey-bg {
  background-color: #eee;
}
.custom-btn-block {
  background: #2f598c;
  border: none;
  color: white;
  font-size: 2vh;
}
.carousel-inner{
  width:100%;
  max-height: 800px !important;
}

.hero-comprar-1 {
  height: 40vh;
  padding-top: 10vh;
  padding-bottom: 10vh;
  color: white;
  background-image: linear-gradient(rgba(30,30,30,0.7),rgba(30,30,30,0.7)),url(../img/Hero/hero-prov.jpg);
  background-size: cover no-repeat center;
}
@media (min-width: 992px) {
  .hero-comprar-1 {
    background-color: grey;
  }
  
}
.area {
  color: #333;
}
.sucursal-title {
  color: #2f598c !important;
}
.comprar-1 {
  background: white;
}
.comprar-2 {
  background: #eee;
}

/* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

  /* Estilo del contenedor principal  de modelos de fibrocemento */
  .color-section {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 20px;
}
/* Título de la sección */
.color-title {
    font-weight: bold;
    color: #003366;
    font-size: 20px;
    margin-bottom: 15px;
}
/* Contenedor de la lista de colores */
.color-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centrar horizontalmente */
    gap: 30px;
    max-width: 600px; /* Limita el ancho máximo */
    margin: auto; /* Centra el bloque */
}
/* Elemento individual de color */
.color-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Círculo de color */
.color-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #333;
    display: inline-block;
}
/* Estilos para cada color */
.color-white { background-color: #ffffff; }
.color-apricot { background-color: #e6c48b; }
.color-blue { background-color: #2b6dad; }
.color-lightblue { background-color: #a4c5eb; }
.color-oldmelon { background-color: #c99a92; }
.color-newmelon { background-color: #b47c62; }
.color-mint { background-color: #63c5bd; }
.color-pink { background-color: #f4a3a5; }
/* Estilo del texto */
.color-text {
    font-size: 14px;
    color: #333;
}

/*Estilo del carousel*/
#carouselExampleControls {
  max-height: 600px; /* Mantiene altura máxima */
  overflow: hidden;
}

/* Asegura que las imágenes mantengan su tamaño adecuado */
.carousel-inner {
  display: flex; /* Asegura que las imágenes dentro del carousel se alineen bien */
}

/* Ajusta las imágenes para cubrir el espacio sin distorsión */
.carousel-inner img {
  width: 100%;
  height: 600px; /* Ajusta la altura al máximo definido */
  object-fit: cover; /* Evita distorsión */
}

/* Ajuste para pantallas pequeñas */
@media (max-width: 768px) {
  .carousel-inner img {
    height: 400px; /* Reduce la altura en móviles */
  }
}