#bannerhome {
        margin-top: 80px;
    }
    /* General container styles */
    .banner {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    /* Banner items container */
    .banner-items {
        display: flex;
        width: 100%;
        transition: transform 0.5s ease;
    }

    /* Each banner-item as a slide */
    .banner-item {
        display: flex;
        width: 100%;
/*        height: 400px; /* Adjust this height as needed */
        align-items: center;
         flex: 0 0 100%;
         justify-content: center;
         background-repeat: no-repeat;
        background-size: cover;
        background: var(--blue);
    }

    /* Two-column layout (50% each) */
    .binfo {
        width: 40%;
        padding: 20px;
        box-sizing: border-box;
    }

    .bimage {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px 0px 0px;
    }

    .bimage img {
        max-width: max-content;
        height: auto;
    }

  

    #bannerhome .banner-item img {
        margin-top: 0;
        position: absolute;
        bottom: 0;
        height: 105%;
    }


    .binfo h3 {
    font-weight: 200;
    margin: 20px 0 10px;
    color: #FFF;
    font-size: 20px;
    }
    /*.binfo h3 span{
        background: #FFF;
        color: var(--blue);
    }*/

.binfo span.bviewmore {
    background: var(--green);
    padding: 8px 30px;
    display: inline-block;
    margin-top: 14px;
    border-radius: 25px;
    color: var(--white2);
    text-decoration: none;
    font-weight: 600;
    font-size: 20px;;
}

.binfo span.bviewmore:hover {
    background: var(--orange); 
    color: var(--white);   
}

.binfo h2 {
/*    font-size: 2.6rem;*/
font-size: 1.5rem;
    margin: 14px 0px;
    line-height: 1.2;
    font-weight: 600;
    color: #fff;
}

.binfo h2 span {
    background: var(--blue);
    color: var(--white);
    display: inline; 
    line-height: 1.5;
    padding: 0; 
    margin-right: 0.3rem; 
    border-radius: 5px; 
/*    font-size: 3.5rem;*/
    font-size: 2.6rem;
}


 .banner-items {
        margin-bottom: 17px;
        height: 500px;
    }
#bannerhome .banner-item {
        background-image: url('/static/images/fondo_bannerprin.webp') !important;
    }

@media (max-width: 767px) {

      #bannerhome .banner-item {
        background-image: url('/static/images/bgmobilebanner.webp') !important;
    }

    .binfo h2 span::after {
  content: "";
  display: block;
  margin-top: -30px;
}


    .dots-container {
        bottom: 4% !important;
    }

    .binfo h2 span {
        line-height: 1.7em;
        font-size: 2.4rem;
    }

    #bannerhome {
        margin-top: 60px;
    }

    #bannerhome img {
        max-height: 210px;
        width: auto;
        object-fit: initial !important;
        position: initial !important;
    }
    
    
    .banner-item, .banner-item a {
        flex-direction: column;
    }
    .banner-item a {
        justify-content: flex-end !important;
    }

    .binfo {
        width: 95%;
/*        order: 2;*/
        text-align: center;
    }

    .bimage {
        width: 80%;     
        /*padding: 0px 0px 50px;*/
/*        order: 1;*/
        align-items:flex-end;

        height: auto !important;
            
    }

    .binfo h2 {
        font-size: 1.4em;
        margin: 5px 0px;
    }

    .bimage img {
        margin: 0!important;
    }
    /*.dots-container {
        bottom: -11px;
        top: initial;
        left: 0;
        right: 0;
        flex-direction: row;
        justify-content: center;
        gap: 8px;
    }*/

    .banner-items {
        margin-bottom: 17px;   
        height: auto;     
    }
    .binfo h3 {
        font-size: 15px;
        line-height: 22px;
        margin: 20px 0 5px;
    }

    .binfo span.bviewmore {
        font-size: 20px;
    }
}

.dots-container {
    display: flex; /* Usa flexbox para alinear los dots */
    justify-content: center; /* Centra horizontalmente los dots */
    position: absolute; /* Posiciona los dots en relación al contenedor */
    bottom: 6%; /* Ajusta la posición desde la parte inferior según sea necesario */
    padding: 10px;
    left: 50%; /* Centro horizontalmente */
    transform: translateX(-50%); /* Ajusta para centrar exactamente */
    z-index: 1; /* Asegúrate de que los dots estén por encima de otros elementos */
}

.dot {
    width: 13px; /* Ancho del dot */
    height: 13px; /* Altura del dot */
    background-color: rgba(255, 255, 255, 0.5); /* Color de fondo (blanco semi-transparente) */
    border-radius: 50%; /* Hace que los dots sean circulares */
    margin: 0 5px; /* Espaciado horizontal entre los dots */
    cursor: pointer; /* Cambia el cursor al pasar sobre los dots */
    transition: background-color 0.3s ease; /* Transición suave para el hover */
}

.dot.active {
    background-color: #7bcc35;
}

.dot:hover {
    background-color: rgba(255, 255, 255, 0.8); /* Color en hover para los dots */
}