li {
  font-family: Arial, sans-serif;
}

/* 📍 CONTENEDOR PRINCIPAL */
.carousel-container {
    display: flex;
    width: 340px;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* 📍 CADA COLUMNA */
.carousel-column {
    width: 200px;
    position: relative;
    overflow: hidden;
}

/* 🖼 IMÁGENES */
.carousel-wrapper {
    display: flex;
    flex-direction: column;
    position: absolute;
    will-change: transform;
}

.carousel-item {
    width: 150px;
    height: 150px;
    background-color: #060504;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    margin: 10px;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 🔹 ANIMACIÓN: IZQUIERDA SUBE, DERECHA BAJA */
@keyframes scrollUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

@keyframes scrollDown {
    0% { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}

#carousel-left {
    animation: scrollUp 30s linear infinite;
}

#carousel-right {
    animation: scrollDown 30s linear infinite;
}

/* 📱 AJUSTES PARA MÓVILES */
@media (max-width: 768px) {
    .carousel-container {
        flex-direction: row;
        width: 100%;
        height: 200px;
    }

    /* Ocultar las columnas de escritorio en móviles */
    .hide-mobile {
        display: none !important;
    }

    /* Mostrar solo la columna móvil */
    .show-mobile {
        display: block !important;
        width: 100%;
    }

    .carousel-wrapper {
        flex-direction: row;
        animation: scrollHorizontal 30s linear infinite;
    }

    /* 🔄 ANIMACIÓN HORIZONTAL */
    @keyframes scrollHorizontal {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
}

/* 🚀 Ocultar la columna móvil en escritorio */
@media (min-width: 769px) {
    .show-mobile {
        display: none !important;
    }
}

.carousel-item {
    position: relative;
  
}

.vehicle-name {
    position: absolute;
    bottom: 3px;
    left: 5px;
    color: #FBD232;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 4px 8px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
}

.vehicle-weight {
    position: absolute;
    top: 3px;
    right: 5px;
    color: white;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 0px 3px;
    font-size: 13px;
    border-radius: 5px;
}


/*==============================================Hover-Box=====*/

/* Contenedor Principal */
.hover-box {
    position: relative !important;
    width: 100% !important;
    height: 250px !important; /* Ajusta según necesidad */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background-size: cover !important;
    background-position: center !important;
    overflow: hidden !important;
    padding: 5px !important; /* Deja ver la imagen de fondo */
}

/* Capa de fondo negro */
.hover-box::before {
    content: "" !important;
    position: absolute !important;
    top: 5px !important;
    left: 5px !important;
    width: calc(100% - 10px) !important;
    height: calc(100% - 10px) !important;
    background: rgba(0, 0, 0, 0.4) !important; /* Fondo negro con opacidad */
    transition: background 0.3s ease !important;
}

/* Capa del borde blanco */
.hover-box::after {
    content: "" !important;
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    width: calc(100% - 20px) !important;
    height: calc(100% - 20px) !important;
    border: 2px solid white !important; /* Borde blanco dentro del fondo negro */
    transition: border-color 0.3s ease !important;
}

/* Hover - Cambio de fondo y borde */
.hover-box:hover::before {
    background: rgba(250, 210, 50, 0.8) !important;
}

.hover-box:hover::after {
    border-color: black !important;
}

/* Contenedor del contenido */
.hover-content {
    position: absolute !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    transition: transform 0.3s ease !important;
}

/* Título (centrado sin hover) */
.hover-title {
    color: #fad232 !important;
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, color 0.3s ease;
}



/* Texto oculto */
.hover-text {
    color: black !important;
    opacity: 0 !important;
    transform: translateY(20px) !important; /* Inicia más abajo */
    transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* Hover - El título sube */
.hover-box:hover .hover-title {
    transform: translate(-50%, -190%);
    color: black; /* Cambia a negro */
}

.hover-box:hover .hover-title {
    color: black !important; /* Cambio a color negro */
}

.hover-box:hover .hover-text {
    opacity: 1 !important;
    transform: translateY(5px) !important; /* Texto sube un poco */
}


/*=========================================Testimonials==========*/


.custom-carousel-2 {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.carousel-track-2 {
    display: flex;
    gap: 5vw;
    width: max-content;
}

.carousel-item-2 {
    width: 16%; /* Cada item ocupa 1/4 del ancho */
    display: flex;
    align-items: center;
    justify-content: center;
   
}

/* En móvil, solo mostrar 1 a la vez */
@media (max-width: 768px) {
    .carousel-item-2 {
        width: 90vw;
    }
}

/*==========================================MENU*/
.elementor-widget-eael-simple-menu.eael-hamburger--mobile.eael-hamburger--responsive .eael-simple-menu-container.preset-1 .eael-simple-menu.eael-simple-menu-horizontal,.elementor-widget-eael-simple-menu.eael-hamburger--mobile.eael-hamburger--responsive .eael-simple-menu-container.preset-1 .eael-simple-menu.eael-simple-menu-vertical,.elementor-widget-eael-simple-menu.eael-hamburger--mobile_extra.eael-hamburger--responsive .eael-simple-menu-container.preset-1 .eael-simple-menu.eael-simple-menu-horizontal,.elementor-widget-eael-simple-menu.eael-hamburger--mobile_extra.eael-hamburger--responsive .eael-simple-menu-container.preset-1 .eael-simple-menu.eael-simple-menu-vertical,.elementor-widget-eael-simple-menu.eael-hamburger--tablet.eael-hamburger--responsive .eael-simple-menu-container.preset-1 .eael-simple-menu.eael-simple-menu-horizontal,.elementor-widget-eael-simple-menu.eael-hamburger--tablet.eael-hamburger--responsive .eael-simple-menu-container.preset-1 .eael-simple-menu.eael-simple-menu-vertical,.elementor-widget-eael-simple-menu.eael-hamburger--tablet_extra.eael-hamburger--responsive .eael-simple-menu-container.preset-1 .eael-simple-menu.eael-simple-menu-horizontal,.elementor-widget-eael-simple-menu.eael-hamburger--tablet_extra.eael-hamburger--responsive .eael-simple-menu-container.preset-1 .eael-simple-menu.eael-simple-menu-vertical,.elementor-widget-eael-simple-menu.eael-hamburger--laptop.eael-hamburger--responsive .eael-simple-menu-container.preset-1 .eael-simple-menu.eael-simple-menu-horizontal,.elementor-widget-eael-simple-menu.eael-hamburger--laptop.eael-hamburger--responsive .eael-simple-menu-container.preset-1 .eael-simple-menu.eael-simple-menu-vertical,.elementor-widget-eael-simple-menu.eael-hamburger--desktop.eael-hamburger--responsive .eael-simple-menu-container.preset-1 .eael-simple-menu.eael-simple-menu-horizontal,.elementor-widget-eael-simple-menu.eael-hamburger--desktop.eael-hamburger--responsive .eael-simple-menu-container.preset-1 .eael-simple-menu.eael-simple-menu-vertical,.elementor-widget-eael-simple-menu.eael-hamburger--widescreen.eael-hamburger--responsive .eael-simple-menu-container.preset-1 .eael-simple-menu.eael-simple-menu-horizontal,.elementor-widget-eael-simple-menu.eael-hamburger--widescreen.eael-hamburger--responsive .eael-simple-menu-container.preset-1 .eael-simple-menu.eael-simple-menu-vertical {
    background-color: #fff
}
.eael-simple-menu-container.preset-1 .eael-simple-menu li.current-menu-ancestor>a.eael-item-active,.eael-simple-menu-container.preset-1 .eael-simple-menu li:hover>a,.eael-simple-menu-container.preset-1 .eael-simple-menu li.current-menu-item>a.eael-item-active {
    background-color: #fff
}

.eael-simple-menu-container.preset-1 .eael-simple-menu li ul {
    background-color: #fff
}
eael-simple-menu-indicator { 
	color: #000!important }

/*Contact form confirmation message*/

.wpcf7-response-output {
    border:1px solid yellow;
    background-color:#00000000;
    font-size:15px;
    color:white;
    border-radius:5px;
    -webkit-border-radius: 5px;
    padding: 20px !important;
}

.wpf7-mail-sent-ok {border:none !important}