body {
    font-size: 16px;
    margin: 0;
    padding: 60px 0 0;
    font-family: 'Raleway', sans-serif, monospace;
    background-color: #ffffff;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: rgba(51, 51, 51, 0.8); /* Sets background color with transparency */
    color: #ffffff;
    border-radius: 10px;
    margin: 10px auto;
    width: 95%;
    max-width: 1440px;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000; 
}

.mySlides {
    display: none;
}


img[alt="slide1"]{
 vertical-align: middle;
 border-radius: 10px;

}
img[alt="slide2"]{
    vertical-align: middle;
    border-radius: 10px;

   }
img[alt="slide3"]{
    vertical-align: middle;
    border-radius: 10px;

   }

.slideshow-container {
    max-width: 97.7%;
    position: relative;
    margin: auto;
    margin-top: 40px; /* Espacio debajo del header */
    margin-bottom: 0px; /* Reduce la distancia con el siguiente contenedor */
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 10px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 44px;
    transition: 0.5s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

.text{
    color:#ff0000;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 8px;
}

.numbertext{
    color:#CC0000;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;

}

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

.active, .dot:hover{
    background-color: #CC0000;
    transition: background-color 0.5s ease;


}

 /* .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: .8s;
    animation-name: fade;
    animation-duration: .8s;
}

@-webkit-keyframes fade{
    from {opacity: .8}
    to {opacity: 1}
}
@keyframes fade{
    from {opacity: .8}
    to {opacity: 1}
} */


.branding {
    display: flex;
    align-items: center; /* Align items vertically centered */
}

.branding img {
    margin-right: 10px; /* Adds space between the logo and h1 */
    width: 60px; /* Adjust the width as needed */
    height: auto; /* Maintain the aspect ratio */
}

.branding h1 {
    margin: 0;
    color: #ffffff;
    font-weight: 680;
    position: relative;
    padding-left: 20px; /* Add padding to the left for the line */
}

h4 {
    font-size: 35px;
    font-family: 'Oswald', sans-serif;
    margin: 0;
    color: #666666;
    font-weight: 400;
    position: relative;
    padding-left: 46%;
    padding-bottom: 20px;
}

.branding h1::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px; /* Adjust the width of the line */
    height: 90%; /* Make sure the line height covers the entire h1 */
    background-color: #ffffff; /* White line color */
    transform: translateY(10px); /* Move the line down by 10px */
}

.branding p {
    margin: 0;
    font-size: 14px; /* Adjust the font size if needed */
    color: #ffffff;
    padding-left: 20px; /* Aligns with h1 padding */
}

.navbar {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
    border-radius: 10px;
}

.navbar li {
    position: relative; /* Necesario para el posicionamiento absoluto del dropdown */
    padding: 10px 10px; /* Aumentar el padding superior e inferior */
    border-radius: 10px;
    font-weight: 500;
    
}

.navbar a {
    text-decoration: none;
    color: #ffffff;
    display: block;
    border-radius: 10px;
}

.navbar a:hover {
    color: #CC0000;
    transition: 0.4s;

    
}

.navbar li:hover {
   /* background-color: rgba(0, 0, 0, 0.2); */
    cursor: pointer;
    color: #CC0000;
    
}

.navbar li a[href="contact.html"] {
    background-color: #CC0000;
    padding: 10px 20px; 
    margin: -10px -20px;
    font-weight: 600;
}

.navbar li a[href="contact.html"]:hover {
    color: #020d16; 
    transition: 0.4s;
}

address {
    font-family: Raleway;
    font-style: normal;
    margin-left: 40px;
}

a {
    text-decoration: none;
    color: inherit;
}

img[alt="Agencia Autosol"] {
    display: block;
    margin: 20px auto;  /* Centers the image horizontally with margin */
    width: 100%;  /* Adjust the width to match the header's width */
    max-width: 1440px;  /* Ensure it doesn't exceed the max-width of the header */
    height: auto;
    border-radius: 10px;  /* Adds rounded corners to the image */
}
img[alt="header-civic-hybrid"] {
    display: block;
    margin: 20px auto;  /* Centers the image horizontally with margin */
    width: 100%;  /* Adjust the width to match the header's width */
    max-width: 1440px;  /* Ensure it doesn't exceed the max-width of the header */
    height: auto;
    border-radius: 10px;  /* Adds rounded corners to the image */
    
}
img[alt="header-cr-v-hybrid"] {
    display: block;
    margin: 20px auto;  /* Centers the image horizontally with margin */
    width: 100%;  /* Adjust the width to match the header's width */
    max-width: 1440px;  /* Ensure it doesn't exceed the max-width of the header */
    height: auto;
    border-radius: 10px;  /* Adds rounded corners to the image */
}

img[alt="header-cr-v"] {
    display: block;
    margin: 20px auto;  /* Centers the image horizontally with margin */
    width: 100%;  /* Adjust the width to match the header's width */
    max-width: 1440px;  /* Ensure it doesn't exceed the max-width of the header */
    height: auto;
    border-radius: 10px;  /* Adds rounded corners to the image */
}
img[alt="header-hr-v"] {
    display: block;
    margin: 20px auto;  /* Centers the image horizontally with margin */
    width: 100%;  /* Adjust the width to match the header's width */
    max-width: 1440px;  /* Ensure it doesn't exceed the max-width of the header */
    height: auto;
    border-radius: 10px;  /* Adds rounded corners to the image */
}
img[alt="header-zr-v"] {
    display: block;
    margin: 20px auto;  /* Centers the image horizontally with margin */
    width: 100%;  /* Adjust the width to match the header's width */
    max-width: 1440px;  /* Ensure it doesn't exceed the max-width of the header */
    height: auto;
    border-radius: 10px;  /* Adds rounded corners to the image */
}
img[alt="header-accord-hybrid"] {
    display: block;
    margin: 20px auto;  /* Centers the image horizontally with margin */
    width: 100%;  /* Adjust the width to match the header's width */
    max-width: 1440px;  /* Ensure it doesn't exceed the max-width of the header */
    height: auto;
    border-radius: 10px;  /* Adds rounded corners to the image */
}

/* img[alt="header-postventa"] {
    display: block;
    margin: 20px auto 20px 0; /* Margen superior e inferior, centrado automático a la derecha 
    width: 40%; /* Ajusta el ancho según tu diseño 
    max-width: 1440px; /* Máximo ancho que puede ocupar 
    height: auto; /* Mantén las proporciones 
    border-radius: 10px; /* Esquinas redondeadas 
    position: relative; /* Necesario para ajustes adicionales 
    left: 10%; /* Ajusta este valor para mantener alineación con header y footer */

img[alt="new-hr-v-1"]{
    display: block;
    margin: 20px auto;  /* Centers the image horizontally with margin */
    width: 100%;  /* Adjust the width to match the header's width */
    max-width: 1440px;  /* Ensure it doesn't exceed the max-width of the header */
    height: auto;
    border-radius: 10px;  /* Adds rounded corners to the image */
}

img[alt="new-cr-v-1"]{
    display: block;
    margin: 20px auto;  /* Centers the image horizontally with margin */
    width: 100%;  /* Adjust the width to match the header's width */
    max-width: 1440px;  /* Ensure it doesn't exceed the max-width of the header */
    height: auto;
    border-radius: 10px;  /* Adds rounded corners to the image */
}
img[alt="zr-v-1"]{
    display: block;
    margin: 20px auto;  /* Centers the image horizontally with margin */
    width: 100%;  /* Adjust the width to match the header's width */
    max-width: 1440px;  /* Ensure it doesn't exceed the max-width of the header */
    height: auto;
    border-radius: 10px;  /* Adds rounded corners to the image */
}

img[alt="civic-hybrid-1"]{
    display: block;
    margin: 20px auto;  /* Centers the image horizontally with margin */
    width: 100%;  /* Adjust the width to match the header's width */
    max-width: 1440px;  /* Ensure it doesn't exceed the max-width of the header */
    height: auto;
    border-radius: 10px;  /* Adds rounded corners to the image */
}

img[alt="cr-v-hybrid-1"]{
    display: block;
    margin: 20px auto;  /* Centers the image horizontally with margin */
    width: 100%;  /* Adjust the width to match the header's width */
    max-width: 1440px;  /* Ensure it doesn't exceed the max-width of the header */
    height: auto;
    border-radius: 10px;  /* Adds rounded corners to the image */
}
img[alt="accord-hybrid-1"]{
    display: block;
    margin: 20px auto;  /* Centers the image horizontally with margin */
    width: 100%;  /* Adjust the width to match the header's width */
    max-width: 1440px;  /* Ensure it doesn't exceed the max-width of the header */
    height: auto;
    border-radius: 10px;  /* Adds rounded corners to the image */
}

img[alt="Honda Logo"] {
    margin-right: 20px; /* Adds space between the logo and h1 */
    display: inline; /* Ensures it is aligned with the text */
}

/* Otros estilos permanecen igual */

.navbar .dropdown {
    display: none; /* Mantenerlo oculto por defecto */
    position: absolute;
    left: 0;
    top: calc(100% + 1px); /* Posicionar debajo del li */
    background-color: rgba(51, 51, 51, 0.8);
    border-radius: 10px;
    padding: 15px 0;  /* Mayor padding en la parte superior e inferior para más espacio */
    z-index: 999; /* Asegurarse de que esté por encima de otros elementos */
    margin-left: 0; /* Ajustar según sea necesario */
    width: 250px; /* Establecer un ancho mayor para evitar que las palabras se superpongan */
    min-width: 250px;  /* Asegurarse de que no se haga más pequeño */
    list-style-type: none;
    text-align: left; /* Justificar a la izquierda */
}

.navbar li:hover .dropdown {
    display: block; /* Mostrar el dropdown */
}

.dropdown li {
    padding: 12px 20px;  /* Mayor padding para las opciones */
    display: flex;
    flex-direction: column; /* Alinear el contenido en columna */
    align-items: flex-start; /* Alinear a la izquierda */
}

.dropdown img {
    margin-top: 5px; /* Alinear la imagen debajo del texto */
    max-width: 100px;  /* Ajusta según el tamaño de tus miniaturas */
    height: auto;
    display: block;
}

.dropdown a {
    color: #ffffff;
    text-decoration: none;
    border-radius: 10px;
    width: 100%; /* Asegurar que el enlace ocupe todo el ancho del contenedor */
    display: inline-block;
}

.dropdown a:hover {
    color: #CC0000;
}


.footer {
    display: flex;
    justify-content: space-around; /* Reduce el espacio horizontal entre los elementos */
    align-items: flex-start; /* Asegura que los elementos queden alineados arriba */
    flex-wrap: wrap; /* Permite que los elementos se acomoden si hay poco espacio horizontal */
    padding: 20px; /* Margen interno uniforme */
    background-color: rgba(51, 51, 51, 0.8);
    color: #ffffff;
    border-radius: 10px;
    margin: 10px auto; /* Centrado automático en toda la página */
    width: 95%; /* Alinea el footer con los demás elementos de la página */
    max-width: 1440px; /* Limita el ancho máximo */
    position: relative;
    z-index: 900;
    font-size: 16px;
    gap: 20px; /* Reduce la separación horizontal entre elementos */
    font-weight: 500;
}

/* Estilo para los h5 */
.footer h5 {
    margin: 0; /* Elimina márgenes por defecto */
    padding: 0; /* Elimina cualquier padding extra */
    text-align: left; /* Asegura que el texto esté alineado a la izquierda */
    font-weight: 700;
    font-size: 16px;
}

/* Agrupación vertical de elementos en el footer */
.footer div {
    display: flex;
    flex-direction: column; /* Organiza los elementos en una columna */
    align-items: flex-start; /* Alinea los elementos al inicio */
    gap: 5px; /* Controla la separación entre los elementos */
    padding: 0 10px; /* Añade un pequeño margen interno lateral para centrar mejor el contenido */
}

/* Estilo para address */
.footer address {
    font-style: normal; /* Normaliza el estilo de fuente */
    margin: 0;
    padding: 0;
    font-size: 12px; /* Ajusta el tamaño de la fuente si es necesario */
}

/* Estilo para h6 */
.footer h6 {
    margin: 0;
    padding: 0;
    font-size: 12px; /* Ajusta el tamaño */
    font-weight: normal; /* Opcional: cambiar el grosor de la fuente */
}

/* Estilo para enlaces dentro del footer */
.footer a {
    color: #ffffff;
    text-decoration: none;
    font-size: 12px; /* Ajusta el tamaño de la fuente */
}

.footer a:hover {
    color: #CC0000; /* Color en hover */
    transition: 0.4s;

}

/* Espaciado interno del footer para mantener proporción */
.footer div:last-child {
    margin-bottom: 0; /* Asegúrate de no agregar espaciado adicional al último elemento */
}


h7 {
    display: flex;
    text-align: left;
    margin: 20px;
    font-size: 10px;
}

.wrapper{
    position:fixed;
    right: 20px;
    bottom: 20px;
    padding: 1px;
z-index: 1000;
}
.button{
    color: white;
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: #CC0000;
    border-radius: 30px;
    line-height: 30px;
    text-align: center;
    box-shadow: 0px 10px 10px rgba(0,0,0,0.1) ;
    transition: 0.7s;
}

.wrapper .button .icon {
    font-size: 20px;
}
.wrapper .button:hover{
    width: 100px;
    transition: 0.7s;
}

.landpicture-services {
    display: flex; /* Alinea los hijos en fila */
    align-items: flex-start; /* Alinea verticalmente al inicio */
    justify-content: flex-start; /* Alinea horizontalmente al inicio */
    gap: 20px; /* Espaciado entre la imagen y el texto */
    flex-wrap: nowrap; /* Asegura que los elementos no se apilen */
    width: 100%; /* Ocupa todo el ancho del contenedor padre */
    max-width: 1440px; /* Ancho máximo */
    margin: 120px auto 60px auto; /* Añade margen superior e inferior */
    overflow: hidden; /* Evita desbordamientos */
    padding: 0 20px; /* Espaciado lateral consistente con el diseño */
}

.landpicture-services img {
    flex-shrink: 0; /* Previene que la imagen se reduzca */
    width: 40%; /* La imagen ocupa el 40% del ancho del contenedor */
    max-width: 600px; /* Ancho máximo de la imagen */
    height: auto; /* Mantiene las proporciones */
    border-radius: 10px; /* Bordes redondeados */
    object-fit: cover; /* Asegura que la imagen no se deforme */
}

.landpicture-services .text-content {
    flex: 1; /* El texto ocupa el resto del espacio disponible */
    min-width: 0; /* Previene desbordamientos */
}

.landpicture-services h8 {
    font-size: 24px; /* Tamaño del título */
    font-weight: bold; /* Título en negrita */
    color: #CC0000; /* Color del texto */
    margin-bottom: 10px; /* Espaciado con el párrafo */
    text-align: left; /* Alineación a la izquierda */
}

.landpicture-services p {
    font-size: 16px; /* Tamaño del texto */
    line-height: 1.6; /* Espaciado entre líneas */
    color: #555; /* Color del texto */
    margin: 0; /* Sin márgenes extra */
    text-align: left; /* Alineación a la izquierda */
    word-wrap: break-word; /* Asegura que las palabras largas se dividan */
}

.landpicture-parts {
    display: flex; /* Alinea los hijos en fila */
    align-items: flex-start; /* Alinea verticalmente al inicio */
    justify-content: flex-start; /* Alinea horizontalmente al inicio */
    gap: 20px; /* Espaciado entre la imagen y el texto */
    flex-wrap: nowrap; /* Asegura que los elementos no se apilen */
    width: 100%; /* Ocupa todo el ancho del contenedor padre */
    max-width: 1440px; /* Ancho máximo */
    margin: 120px auto 60px auto; /* Añade margen superior e inferior */
    overflow: hidden; /* Evita desbordamientos */
    padding: 0 20px; /* Espaciado lateral consistente con el diseño */
}

.landpicture-parts img {
    flex-shrink: 0; /* Previene que la imagen se reduzca */
    width: 40%; /* La imagen ocupa el 40% del ancho del contenedor */
    max-width: 600px; /* Ancho máximo de la imagen */
    height: auto; /* Mantiene las proporciones */
    border-radius: 10px; /* Bordes redondeados */
    object-fit: cover; /* Asegura que la imagen no se deforme */
}

.landpicture-parts .text-content {
    flex: 1; /* El texto ocupa el resto del espacio disponible */
    min-width: 0; /* Previene desbordamientos */
}

.landpicture-parts h8 {
    font-size: 24px; /* Tamaño del título */
    font-weight: bold; /* Título en negrita */
    color: #CC0000; /* Color del texto */
    margin-bottom: 10px; /* Espaciado con el párrafo */
    text-align: left; /* Alineación a la izquierda */
}

.landpicture-parts p {
    font-size: 16px; /* Tamaño del texto */
    line-height: 1.6; /* Espaciado entre líneas */
    color: #555; /* Color del texto */
    margin: 0; /* Sin márgenes extra */
    text-align: left; /* Alineación a la izquierda */
    word-wrap: break-word; /* Asegura que las palabras largas se dividan */
}

.landpicture-about {
    display: flex; /* Alinea los hijos en fila */
    align-items: flex-start; /* Alinea verticalmente al inicio */
    justify-content: flex-start; /* Alinea horizontalmente al inicio */
    gap: 20px; /* Espaciado entre la imagen y el texto */
    flex-wrap: nowrap; /* Asegura que los elementos no se apilen */
    width: 100%; /* Ocupa todo el ancho del contenedor padre */
    max-width: 1440px; /* Ancho máximo */
    margin: 120px auto 60px auto; /* Añade margen superior e inferior */
    overflow: hidden; /* Evita desbordamientos */
    padding: 0 20px; /* Espaciado lateral consistente con el diseño */
}

.landpicture-about img {
    flex-shrink: 0; /* Previene que la imagen se reduzca */
    width: 40%; /* La imagen ocupa el 40% del ancho del contenedor */
    max-width: 600px; /* Ancho máximo de la imagen */
    height: auto; /* Mantiene las proporciones */
    border-radius: 10px; /* Bordes redondeados */
    object-fit: cover; /* Asegura que la imagen no se deforme */
}

.landpicture-about .text-content {
    flex: 1; /* El texto ocupa el resto del espacio disponible */
    min-width: 0; /* Previene desbordamientos */
}

.landpicture-about h8 {
    font-size: 24px; /* Tamaño del título */
    font-weight: bold; /* Título en negrita */
    color: #CC0000; /* Color del texto */
    margin-bottom: 10px; /* Espaciado con el párrafo */
    text-align: left; /* Alineación a la izquierda */
}

.landpicture-about p {
    font-size: 16px; /* Tamaño del texto */
    line-height: 1.6; /* Espaciado entre líneas */
    color: #555; /* Color del texto */
    margin: 0; /* Sin márgenes extra */
    text-align: left; /* Alineación a la izquierda */
    word-wrap: break-word; /* Asegura que las palabras largas se dividan */
}

.contact-section {
    display: flex;
    justify-content: space-between;
    margin: 20px auto;
    max-width: 1200px; /* Ajusta este valor según el ancho deseado */
    padding: 0 20px; /* Ajusta los márgenes interiores */
}

.contact-box, .address-box, .hours-box {
    flex: 1;
    margin: 0 10px; /* Margen horizontal entre los cuadros */
    padding: 20px;
    border: 1px solid #ddd;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 10px;
}

.contact-box h3, .address-box h3, .hours-box h3 {
    margin-top: 0;
    color: #CC0000;
}

.address-box a {
    font-weight: bold;
    color: #333;
    text-decoration: none; /* Si no quieres que el enlace tenga subrayado */
}

.address-box a:hover {
    color: #CC0000;
}
.contact-box a {
    color: #333;
    text-decoration: none; /* Si no quieres que el enlace tenga subrayado */
}

.contact-box a:hover {
    color: #CC0000;
}
.map-container {
    display: flex;
    justify-content: center; /* Centra el mapa horizontalmente */
    margin: 20px auto;
    border: 1px solid #ddd; /* Agrega un borde */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Agrega sombra para consistencia */
    border-radius: 10px; /* Borde con radio de 10px */
    overflow: hidden; /* Asegura que el contenido del iframe respete el radio del borde */
    width: fit-content; /* Ajusta el ancho al contenido del iframe */
}

.map-container iframe {
    border: 0; /* Elimina el borde interno del iframe */
}




/* Asegura que los elementos ocupen bien el espacio disponible */
@media (max-width: 768px) {
    .footer {
        flex-direction: column; /* En pantallas pequeñas, los elementos se apilan */
        align-items: center; /* Centra los elementos */
        padding: 20px; /* Reduce el padding lateral para pantallas pequeñas */
    }

    .footer div {
        align-items: center; /* Cambia la alineación a centro en pantallas pequeñas */
        padding: 0; /* Elimina padding adicional en pantallas pequeñas */
    }
}
.slideshow-containerx {
    max-width: 97.7%;
    position: relative;
    margin: auto;
    margin-top: 40px; /* Espacio debajo del header */
    margin-bottom: 0px; /* Reduce la distancia con el siguiente contenedor */
}

.mySlidesx {
    display: none;
    position: relative;
}

img[alt^="slide"] {
    vertical-align: middle;
    border-radius: 10px;
    width: 100%;
}

.textx {
    color: #020d16;
    font-size: 20px;
    position: absolute;
    right: 20px; /* Posiciona el texto a la derecha del contenedor */
    bottom: 10px; /* Posiciona el texto en la parte inferior derecha del contenedor */
    text-align: right; /* Alinea el texto a la derecha */
    max-width: 45%; /* Limita el ancho del texto al 50% del contenedor */
    white-space: normal; /* Permite que el texto se divida en varias líneas */
    overflow-wrap: break-word; /* Permite que las palabras se dividan si son demasiado largas */
}

.prevx, .nextx {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 10px;
    margin-top: -22px;
    color: #CC0000;
    font-weight: bold;
    font-size: 44px;
    transition: 0.5s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.nextx {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prevx:hover, .nextx:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

.numbertextx {
    color: #CC0000;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

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

.activex, .dotx:hover {
    background-color: #CC0000;
    transition: background-color 0.5s ease;
}




.slideshow-containery {
    max-width: 97.7%;
    position: relative;
    margin: auto;
    margin-top: 40px; /* Espacio debajo del header */
    margin-bottom: 0px; /* Reduce la distancia con el siguiente contenedor */
}

.mySlidesy {
    display: none;
    position: relative;
}

img[alt^="slide"] {
    vertical-align: middle;
    border-radius: 10px;
    width: 100%;
}

.texty {
    color: #020d16;
    font-size: 20px;
    position: absolute;
    right: 20px; /* Posiciona el texto a la derecha del contenedor */
    bottom: 10px; /* Posiciona el texto en la parte inferior derecha del contenedor */
    text-align: right; /* Alinea el texto a la derecha */
    max-width: 45%; /* Limita el ancho del texto al 50% del contenedor */
    white-space: normal; /* Permite que el texto se divida en varias líneas */
    overflow-wrap: break-word; /* Permite que las palabras se dividan si son demasiado largas */
}

.prevy, .nexty {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 10px;
    margin-top: -22px;
    color: #CC0000;
    font-weight: bold;
    font-size: 44px;
    transition: 0.5s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.nexty {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prevy:hover, .nexty:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

.numbertexty {
    color: #CC0000;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

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

.activey, .doty:hover {
    background-color: #CC0000;
    transition: background-color 0.5s ease;
}





.slideshow-containerz {
    max-width: 97.7%;
    position: relative;
    margin: auto;
    margin-top: 40px; /* Espacio debajo del header */
    margin-bottom: 0px; /* Reduce la distancia con el siguiente contenedor */
}

.mySlidesz {
    display: none;
    position: relative;
}

img[alt^="slide"] {
    vertical-align: middle;
    border-radius: 10px;
    width: 100%;
}

.textz {
    color: #020d16;
    font-size: 20px;
    position: absolute;
    right: 20px; /* Posiciona el texto a la derecha del contenedor */
    bottom: 10px; /* Posiciona el texto en la parte inferior derecha del contenedor */
    text-align: right; /* Alinea el texto a la derecha */
    max-width: 45%; /* Limita el ancho del texto al 50% del contenedor */
    white-space: normal; /* Permite que el texto se divida en varias líneas */
    overflow-wrap: break-word; /* Permite que las palabras se dividan si son demasiado largas */
}

.prevz, .nextz {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 10px;
    margin-top: -22px;
    color: #CC0000;
    font-weight: bold;
    font-size: 44px;
    transition: 0.5s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.nextz {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prevz:hover, .nextz:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

.numbertextz {
    color: #CC0000;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

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

.activez, .dotz:hover {
    background-color: #CC0000;
    transition: background-color 0.5s ease;
}



.slideshow-containera {
    max-width: 97.7%;
    position: relative;
    margin: auto;
    margin-top: 40px; /* Espacio debajo del header */
    margin-bottom: 0px; /* Reduce la distancia con el siguiente contenedor */
}

.mySlidesa {
    display: none;
    position: relative;
}

img[alt^="slide"] {
    vertical-align: middle;
    border-radius: 10px;
    width: 100%;
}

.texta {
    color: #020d16;
    font-size: 20px;
    position: absolute;
    right: 20px; /* Posiciona el texto a la derecha del contenedor */
    bottom: 10px; /* Posiciona el texto en la parte inferior derecha del contenedor */
    text-align: right; /* Alinea el texto a la derecha */
    max-width: 45%; /* Limita el ancho del texto al 50% del contenedor */
    white-space: normal; /* Permite que el texto se divida en varias líneas */
    overflow-wrap: break-word; /* Permite que las palabras se dividan si son demasiado largas */
}

.preva, .nexta {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 10px;
    margin-top: -22px;
    color: #CC0000;
    font-weight: bold;
    font-size: 44px;
    transition: 0.5s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.nexta {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.preva:hover, .nexta:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

.numbertexta {
    color: #CC0000;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

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

.activea, .dota:hover {
    background-color: #CC0000;
    transition: background-color 0.5s ease;
}


.slideshow-containerb {
    max-width: 97.7%;
    position: relative;
    margin: auto;
    margin-top: 40px; /* Espacio debajo del header */
    margin-bottom: 0px; /* Reduce la distancia con el siguiente contenedor */
}

.mySlidesb {
    display: none;
    position: relative;
}

img[alt^="slide"] {
    vertical-align: middle;
    border-radius: 10px;
    width: 100%;
}

.textb {
    color: #020d16;
    font-size: 20px;
    position: absolute;
    right: 20px; /* Posiciona el texto a la derecha del contenedor */
    bottom: 10px; /* Posiciona el texto en la parte inferior derecha del contenedor */
    text-align: right; /* Alinea el texto a la derecha */
    max-width: 45%; /* Limita el ancho del texto al 50% del contenedor */
    white-space: normal; /* Permite que el texto se divida en varias líneas */
    overflow-wrap: break-word; /* Permite que las palabras se dividan si son demasiado largas */
}

.prevb, .nextb {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 10px;
    margin-top: -22px;
    color: #CC0000;
    font-weight: bold;
    font-size: 44px;
    transition: 0.5s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.nextb {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prevb:hover, .nextb:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

.numbertextb {
    color: #CC0000;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

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

.activeb, .dotb:hover {
    background-color: #CC0000;
    transition: background-color 0.5s ease;
}



.slideshow-containerc {
    max-width: 97.7%;
    position: relative;
    margin: auto;
    margin-top: 40px; /* Espacio debajo del header */
    margin-bottom: 0px; /* Reduce la distancia con el siguiente contenedor */
}

.mySlidesc {
    display: none;
    position: relative;
}

img[alt^="slide"] {
    vertical-align: middle;
    border-radius: 10px;
    width: 100%;
}

.textc {
    color: #020d16;
    font-size: 20px;
    position: absolute;
    right: 20px; /* Posiciona el texto a la derecha del contenedor */
    bottom: 10px; /* Posiciona el texto en la parte inferior derecha del contenedor */
    text-align: right; /* Alinea el texto a la derecha */
    max-width: 45%; /* Limita el ancho del texto al 50% del contenedor */
    white-space: normal; /* Permite que el texto se divida en varias líneas */
    overflow-wrap: break-word; /* Permite que las palabras se dividan si son demasiado largas */
}

.prevc, .nextc {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 10px;
    margin-top: -22px;
    color: #CC0000;
    font-weight: bold;
    font-size: 44px;
    transition: 0.5s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.nextc {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prevc:hover, .nextc:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

.numbertextc {
    color: #CC0000;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

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

.activec, .dotc:hover {
    background-color: #CC0000;
    transition: background-color 0.5s ease;
}



.slideshow-containerd {
    max-width: 97.7%;
    position: relative;
    margin: auto;
    margin-top: 40px; /* Espacio debajo del header */
    margin-bottom: 0px; /* Reduce la distancia con el siguiente contenedor */
}

.mySlidesd {
    display: block;
    position: relative;
}

img[alt^="slide"] {
    vertical-align: middle;
    border-radius: 10px;
    width: 100%;
    
}
video[alt^="slide"] {
    vertical-align: middle;
    border-radius: 10px;
    width: 100%;
}

.textd {
    z-index: 10; /* Asegura que el texto esté arriba */
    position: absolute;
    right: 20px;
    bottom: 10px;
    color: #020d16;
    font-size: 20px;
    text-align: right;
    max-width: 45%;
    white-space: normal;
    overflow-wrap: break-word;
}

.prevd, .nextd {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 10px;
    margin-top: -22px;
    color: #CC0000;
    font-weight: bold;
    font-size: 44px;
    transition: 0.5s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.nextd {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prevd:hover, .nextd:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

.numbertextd {
    color: #CC0000;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

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

.actived, .dotd:hover {
    background-color: #CC0000;
    transition: background-color 0.5s ease;
}


.slideshow-containere {
    max-width: 97.7%;
    margin: auto;
    margin-top: 40px; /* Espacio debajo del header */
    margin-bottom: 0px; /* Reduce la distancia con el siguiente contenedor */
}
.texte {
    z-index: 10; /* Asegura que el texto esté arriba */
    position: flex;
    right: 20px;
    bottom: 10px;
    color: #020d16;
    font-size: 24px;
    text-decoration-line: underline;
    box-shadow: 0px 10px 10px rgba(0,0,0,0.1) ;


}

.texte:hover{

    background-color: #CC0000;
    border-radius: 4px;
    transition: background-color 0.5s ease;
}