:root {
    --color-purple: #231a26;
    --color-gray: #717479;
    --color-gold: #231a26;
    --color-black: #000000;
    --color-brown: #231a26;
}

.navbar {
    padding: 0;
}




.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.btn-secondary {
    background-color: var(--color-gold) !important;
    border:0;
}
.remove-border-radius{
    border-radius:5px;
    font-size: 18px;
    font-weight: bolder;  
    color: black;

}


.footer {
    background-color: var(--color-brown);
    color: white;
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan si es necesario */
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.footer-logo {
    flex: 0 0 auto;
    margin-bottom: 20px; /* Añade un margen inferior para cuando se apilen los elementos */
}

.footer-content {
    flex: 1 1 auto;
    text-align: right;
    padding: 20px;
    min-width: 250px; /* Añade un ancho mínimo para la sección de contenido */
}

.footer h2 {
    margin: 0 0 20px 0;
    font-size: 24px;
}

.footer a {
    color: white;
    text-decoration: none;
}

.footer p {
    margin: 5px 0;
}

/* Estilos para pantallas pequeñas */
@media (max-width: 768px) {

    .footer {
        text-align: center; /* Centra el texto en pantallas pequeñas */
    }
    .footer-logo,
    .footer-content {
        flex: 1 1 100%; /* Los elementos ocupan el 100% del ancho */
        text-align: center; /* Centra el contenido dentro de cada bloque */
    }
    .footer-content {
        padding: 10px 0; /* Ajusta el padding para pantallas pequeñas */
    }
    .footer h2 {
        font-size: 20px; /* Reduce el tamaño de la fuente en pantallas pequeñas */
    }
}


.navbar-transparent {
    padding: 0;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.9) !important;
    /* Fondo transparente */
    border-bottom: 10px;
    width: 100%;
}

.col-padding {
    padding: 5px;
}

.btn-search-sp {
    background-color: var(--color-brown);
    width: 100%;
    color: white;
}

.dropdownInput {
    background-color: rgba(255, 255, 255, 0.9) !important;
    /* Fondo transparente */
    color: black;
}

.splide__slide img {
    width: 100%;
    height: 80vh;
    object-fit: cover;
}

.background-image2 {
    width: 100%;
    height: auto;
    /* La altura se ajustará automáticamente al tamaño de la imagen */
    display: block;
    /* Asegura que la imagen se muestre como bloque */
    max-width: 100%;
    /* Asegura que la imagen no exceda el ancho del contenedor */
}

.background-image {
    /* Ajusta el tamaño del div según sea necesario */
    display: flex;
    width: 100%;
    height: 90vh;
    /* Altura de ejemplo */
    justify-content: center;
    align-items: center;
    /* Establece la imagen de fondo y ajusta la configuración */
    background-image: url('/src/resources/images/1.jpeg');
    background-size: cover;
    /* Ajusta la imagen para cubrir todo el div */
    background-position: center;
    /* Centra la imagen */
    background-repeat: no-repeat;
    /* Evita que se repita la imagen */
}
.lazy {
    opacity: 0;
    /* Inicialmente oculta la imagen */
    transition: opacity 0.3s ease-in-out;
    /* Transición suave al mostrar */
}

.lazy.loaded {
    opacity: 1;
    /* Muestra la imagen cuando se carga */
}

.input-group {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90vw;
    /* Permite que el ancho se ajuste según el contenido */
}

@media (max-width: 900px) {

    .moreInformation {
        display: none;
    }

    #descriptionSliderContainer {
        display: none;
    }

    #sliderDescription {
        display: none;
    }
}

#sliderDescription {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 901px) {
    .moreInformationMobile {
        display: none;
    }
    #descriptionSliderContainerMobile {
        display: none;
    }
}


.carrusel-container {
    padding: 0 10%
  }

  @media (max-width: 768px) {

.carrusel-container {
    padding: 0 
  }

    .splide__slide img {
        height: 70vw;

        object-fit: cover;
    }
}