body,
html {
    font-family: Montserrat, Arial, sans-serif;
    scroll-behavior: smooth;
}

.carousel img {
    width: 100%;
    height: auto;
}

.left-arrow {
    position: absolute;
    margin-top: -35%;
    left: 2%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    font-size: 40px;
    padding: 12px 18px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    background-color: transparent;
    color: white;
}

.right-arrow {
    position: absolute;
    margin-top: -35%;
    left: 98%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    font-size: 40px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    background-color: transparent;
    color: white;
}

.info-1 {
    position: absolute;
    margin-top: -36%;
    margin-left: 78%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    font-size: 20px;
    padding: 15px 20px;
    border: none;
    cursor: pointer;
    background-color: rgb(196, 14, 41);
    color: white;
    transition: 0.3s;
    text-decoration: none;
    max-width: 1200px;
}

.info-2 {
    position: absolute;
    margin-top: -16%;
    margin-left: 20%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    font-size: 20px;
    padding: 15px 20px;
    border: none;
    cursor: pointer;
    background-color: rgb(196, 14, 41);
    color: white;
    transition: 0.3s;
    text-decoration: none;
    max-width: 1200px;
}

.carousel a:hover {
    padding: 35px 45px;
}

@media screen and (max-width: 768px) {
    .info-1 {
        font-size: 5px;
        padding: 5px 10px;
    }

    .info-2 {
        font-size: 5px;
        padding: 5px 10px;
        margin-top: -15%;
    }

    .carousel a:hover {
        padding: 7px 18px;
    }

    .carousel-int .left-arrow-int,
    .carousel-int .right-arrow-int {
        font-size: 1.5rem;
        padding: 0.5rem 0.75rem;
    }

    .carousel-int .left-arrow-int {
        left: 0%;
    }

    .carousel-int .right-arrow-int {
        left: 97%;
    }
}

@media screen and (max-width: 480px) {
    .info-1 a {
        font-size: 2px;
    }

    .info-2 a {
        font-size: 5px;
    }
}

.carousel-int {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}

.carousel .mySlides,
.carousel-int .mySlides {
    transition: opacity 0.5s ease-in-out;
}

.carousel img {
    transition: 0.5s ease-in-out;
}


.carousel-int .left-arrow-int,
.carousel-int .right-arrow-int {
    position: absolute;
    bottom: 50%;
    /* Ajusta este valor según necesites */
    transform: translateY(50%);
    font-size: 1.875rem;
    /* 30px / 16px = 1.875rem */
    padding: 0.75rem 1.125rem;
    /* 12px 18px / 16px */
    border: none;
    cursor: pointer;
    border-radius: 5px;
    background-color: transparent;
    transition: 0.5s;
    color: white;
}

.carousel-int .left-arrow-int {
    left: -2%;
}

.carousel-int .right-arrow-int {
    left: 90%;
}