/* ---------------------------bg menu transparente ----------------------------------------------- */

.bg-transparent-scroll {
    background-color: rgba(49, 90, 37, 0.651);
    transition: background-color 0.3s ease;
}

/* Estilos personalizados aquí */
.header-bg {
    background-size: cover;
    background-position: center;
    height: 1000px;
    background-image: url('/image/foler-1/DJI_0057.jpg');
}
/* Estilos para el slider de logos */
.slider-container-logo {
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    margin-bottom: 20px;
}
.slider {
    display: inline-block;
    white-space: nowrap;
    animation-duration: 60s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.slider img, .slider-left img {
    width: 150px;
    height: auto;
    display: inline-block;
    margin-right: 20px;
}
@keyframes slideToLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
.slider-left {
    display: inline-block;
    white-space: nowrap;
    animation: slideFromLeft 140s linear infinite;
}
@keyframes slideFromLeft {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}


/* -------------------------------------fondo----------------------------------- */

.slider-cont-fondo {
    overflow: hidden;
    position: relative;
    height: 100%;
}
.slider-fondo {
    display: flex;
    transition: transform 0.0s ease-in-out;
    height: 100%;
}
.slide-fondo {
    min-width: 100%;
}

/* ----------------------------------Sombra del texto del fondo-----------------------  */

.text-shadow-lg {
    text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}


/* -------------------------------------Animaciones------------------------------------- */

@keyframes slideIn {
from {
    opacity: 0;
    transform: translateY(3rem);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* --------------------------Slider------------------------------- */

.slider-container {
    overflow: hidden;
    position: relative;
    height: 100%;
}
.slider-2 {
    display: flex;
    transition: transform 0.5s ease-in-out;
    height: 100%;
}
.slide {
    min-width: 100%;
    height: 100%;
}

/* ---------------------------------------------- Acordion ---------------------------------------------- */
.accordion {
    max-width: 800px;
}

.accordion .contentbx {
    position: relative;
    /* margin: 10px 20px; */
    transition: height 0.3s ease, padding 0.3s ease;
}

.accordion .contentbx .label {
    position: relative;
    padding: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    cursor: pointer;
}

.accordion .contentbx .label::before {
    content: '+';
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    font-size: 1.5rem;
}

.accordion .contentbx.active .label::before{
    content: '-';    
}

.accordion .contentbx .content {
    position: relative;
    background: #fff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.accordion .contentbx.active .content{
    max-height: 500px;
}

/*-------------------------- Zoom en la imagen ------------------------------------- */
#zoomimage {
    overflow: hidden; /* Esconde cualquier parte de la imagen que se salga del contenedor */
    position: relative; /* Necesario para el posicionamiento absoluto del zoom */
}

#zoomimg {
    transition: transform 0.5s ease; /* Suaviza la transición del zoom */
    width: 100%; /* Asegúrate de que la imagen sea responsive */
}

#zoomimage:hover #zoomimg {
    transform: scale(3); /* Cambia el valor según el nivel de zoom que desees */
}

.content {
    position: absolute;
    z-index: 100; /* Asegúrate de que este valor sea mayor que otros elementos */
    transition: opacity 0.3s ease;
}

#zoomimage {
    position: relative; /* Para que el z-index tenga efecto */
    z-index: 10; /* Valor menor que el de .content */
}