.navbar {
    margin: 0;
    padding: 0;
}

.navbar-brand {
    margin: 0;
    padding: 0;
}

.navbar-nav {
    margin: 0;
    padding: 0;
}

.promotion-banner {
    margin:0;
    padding: 0;
}


/* Estilo para centrar la marca en el contenedor de la barra de navegación */
.navbar {
    position: relative; /* Posicionar el elemento de manera relativa */
}
.navbar-brand {
    position: absolute; /* Posicionar el elemento de manera absoluta */
    left: 50%; /* Mover el elemento hacia el centro horizontal */
    transform: translateX(-50%); /* Ajustar el centro para la correcta alineación */
    top: 50%; /* Mover el elemento hacia el centro vertical */
    transform: translate(-50%, -50%); /* Ajustar el centro para la correcta alineación vertical */
}
.navbar-collapse {
    display: flex;
    flex-direction: row;
    justify-content: flex-end; /* Alinear los elementos a la derecha */
    align-items: center;
    width: 100%; /* Asegurar que ocupe todo el ancho del contenedor */
}


/* Estilo para el contenedor del toggler y los iconos */
.navbar-toggler {
    position: absolute; /* Posicionar el toggler de manera absoluta */
    left: 0; /* Alinear a la izquierda */
}
.navbar-nav {
    display: flex;
    flex-direction: row;
    gap: 3rem; /* Espacio uniforme entre los ítems */
}

/* Estilo para los botones de iconos */
.icon-buttons {
    display: flex;
    gap: 1rem; /* Espacio uniforme entre los íconos */
    align-items: center; /* Alinear los íconos verticalmente */
}
.icon-buttons .btn,
.search-button {
    border: none; /* Quitar el borde del botón */
    background: none; /* Quitar el fondo del botón */
    padding: 0; /* Quitar el padding para solo mostrar el ícono */
    box-shadow: none; /* Quitar la sombra del botón */
    border-radius: 50%; /* Hacer el botón circular */
    width: 40px; /* Ancho del botón */
    display: flex; /* Usar flexbox para centrar el ícono */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
    transition: background-color 0.3s, color 0.3s; /* Transición suave para el fondo y el color */
}
.search-form .form-control{
    margin: 8px 0;
}
.icon-buttons .btn:hover,
.search-button:hover {
    background-color: red; /* Fondo al hacer hover */
    color: #fff; /* Color del ícono al hacer hover */
    border-radius: 50%; /* Cambiar el borde del botón a circular */
    height: 40px;
}
.search-button {
    margin-right: 1rem; /* Espacio a la derecha del botón de búsqueda */
}

/* Estilo para el div de promociones */
.promotion-banner {
    background-color: #f8f9fa; /* Color de fondo claro */
    padding: 10px 0; /* Espaciado vertical */
    text-align: center; /* Centrar el texto */
    width: 100%; /* Asegurar que ocupe todo el ancho del contenedor */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para mejorar la visibilidad */
}

/* Ajustes para el comportamiento del contenedor de la barra de navegación en pantallas pequeñas */
@media (max-width: 992px) { /* Ajustar según el tamaño del breakpoint de Bootstrap */
    .navbar-brand {
        position: static; /* Cambiar el posicionamiento para el colapso */
        transform: none; /* Remover la transformación */
        margin: 0 auto; /* Centrarse horizontalmente */
    }
    .navbar-toggler {
        position: static; /* Cambiar el posicionamiento del toggler */
    }
    .navbar-collapse {
        flex-direction: column; /* Cambiar a columna en pantallas pequeñas */
        align-items: center; /* Centrar los ítems verticalmente */
        background-color: #fff; /* Fondo blanco para el menú colapsado */
        position: absolute; /* Posicionar absolutamente para que se superponga sobre el contenido */
        top: 100%; /* Colocar el menú justo debajo de la barra de navegación */
        left: 0;
        width: 100%; /* Asegurar que el menú ocupe todo el ancho del contenedor */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para mejorar la visibilidad */
        z-index: 1000; /* Asegurar que el menú esté sobre otros elementos */
    }
    .navbar-nav {
        display: flex;
        flex-direction: column; /* Alinear los elementos del menú en columna */
        align-items: center; /* Centrar los enlaces horizontalmente */
        width: 100%; /* Ocupa todo el ancho del contenedor del menú */
        padding: 0; /* Quitar el padding por defecto */
    }
    .nav-item {
        margin: 0; /* Quitar el margen por defecto de los ítems */
    }
    .nav-link {
        padding: 10px 20px; /* Espaciado interno para los enlaces */
        text-align: center; /* Centrar el texto en los enlaces */
        width: 100%; /* Asegurar que los enlaces ocupen todo el ancho del menú */
        border-bottom: 1px solid #ddd; /* Separador entre los enlaces */
    }
    .nav-link:last-child {
        border-bottom: none; /* Eliminar el separador del último enlace */
    }

    /* Ocultar el campo de búsqueda en pantallas pequeñas */
    .search-form {
        display: none; /* Ocultar el formulario de búsqueda cuando el navbar está colapsado */
    }

    .promotion-banner {
        display: none; /* Ocultar el banner de promoción en pantallas pequeñas */
    }

    /* Mostrar solo el ícono de búsqueda en pantallas pequeñas */
    .icon-buttons {
        display: flex;
        gap: 1rem; /* Espacio uniforme entre los íconos */
        align-items: center; /* Alinear los íconos verticalmente */
    }
}


.carousel {
    position: relative;
    top: 20%;
    height: 480px;
    overflow: hidden; /*Ocultar contenido de desborde*/
}


.carousel-control-prev,
.carousel-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background-color: #73261F;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    color: #fff;
}

.carousel-control-prev {
    left: 10px;
}

.carousel-control-next {
    right: 10px;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background-color: #73261F;
}