.dist-carousel-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    
}

.dist-carousel-wrapper h2 {
    margin-top: 40px;
    color: #0070B2;
    text-align: center;
    font-family: Helvetica;
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: 46px;
}

.dist-carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 500px;
    user-select: none;
}



.dist-carousel-item {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    flex: 0 0 auto;
    width: 270px;
    height: 432px;
    box-sizing: border-box;
    padding: 30px 34px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 73px 74px 29px 0px rgba(0, 0, 0, 0),
        46px 47px 27px 0px rgba(0, 0, 0, 0.01),
        26px 27px 22px 0px rgba(0, 0, 0, 0.05),
        12px 12px 17px 0px rgba(0, 0, 0, 0.09),
        3px 3px 9px 0px rgba(0, 0, 0, 0.1);
    
    
}

.dist-carousel-icon img {
    width: 58px;
    height: 58px;
    
    
}

.dist-carousel-wrapper h3 {
    
    font-family: Helvetica;
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    margin: 0;
    background: linear-gradient(180deg, #0070b2 0%, #00a6bd 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dist-carousel-icon {
    display: flex;
    gap: 20px;
    
    flex-direction: column;
}
.dist-carousel-icon p {
    color: #1d1d1f;
    font-family: Helvetica;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    
    flex-grow: 1;
}

.dist-carousel-button {
    display: flex;
    background: linear-gradient(90deg, #0070b2 0%, #00a6bd 100%);
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.3s ease;
    width: 201px;
    height: 39px;
    padding: 7px 14px;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.dist-carousel-button:hover {
    opacity: 0.8;
}


@media only screen and (max-width: 768px) {
    .dist-carousel {
        justify-content:  flex-start;
       
    }

    .dist-carousel-item {
        flex: 0 0 auto; /* Asegura que los items no se estiren */
        width: 280px;
        height: 440px;
        padding: 20px 20px;
        border-radius: 21.663px;
        padding: 33.577px 36.827px;
       
        justify-content: space-around;
    }

    .dist-carousel-icon img {
        width: 56.314px;
height: 56.323px;
    }

    .dist-carousel-wrapper h2 {
        font-size: 20px;
        line-height: 30px;
    }

    .dist-carousel-wrapper h3 {
        font-size: 27.079px;
        line-height: 25px;
        margin-bottom: 10px;
        margin-top: 0;
    }

    .dist-carousel-icon p {
        font-size: 16px;
        line-height: 21.663px;
        
    }

    .dist-carousel-button {
        width: 100%;
        height: 30px;
        padding: 7px 14px;
    }
}

@media only screen and (max-width: 1350px) {
    .dist-carousel {
        justify-content:  flex-start;
        overflow-x: scroll; /* Permite el desplazamiento horizontal */
        scroll-snap-type: x mandatory; /* Añade un desplazamiento suave */
        scrollbar-width: none;
        padding-left: 20px;
    }
}