/* General Styles */
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.slider-container {
    position: relative;
    max-width: 100%;
    overflow: hidden;
}

.slider {
    display: flex;
    transition: transform 1s ease;
}

.slide {
    min-width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* Dots Navigation */
.dots-container {
    text-align: center;
    position: absolute;
    bottom: 20px;
    width: 100%;
    z-index: 10; /* Asegura que los dots estén visibles sobre las imágenes */
}

.dot {
    height: 15px;
    width: 15px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot.active {
    background-color: #A82121;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .content h2 {
        font-size: 1.5em;
    }

    .btn {
        padding: 10px 20px;
        font-size: 1em;
    }

    /* Move dots to below the banner for mobile devices */
    .dots-container {
        position: static; /* Remove absolute positioning */
        margin-top: 10px; /* Add space between the image and the dots */
    }

    /* Ocultar el <br> para pantallas pequeñas */
    .hide-on-mobile {
        display: none;
    }
}

@media (max-width: 480px) {
    .content h2 {
        font-size: 1.2em;
    }

    .btn {
        padding: 8px 15px;
        font-size: 0.9em;
    }

    /* Move dots to below the banner for mobile devices */
    .dots-container {
        position: static; /* Remove absolute positioning */
        margin-top: 10px; /* Add space between the image and the dots */
    }

    /* Ocultar el <br> para pantallas más pequeñas */
    .hide-on-mobile {
        display: none;
    }
}