.banner-container {
    position: relative;
    width: 100%;
    height: 50rem;
    overflow: hidden;
    top: 7.5rem;
}

.banner-container .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: opacity 1s ease;
}

.text-content {
    position: absolute;
    top: 30%;
    left: 10%;
    transform: translateY(-50%);
    color: white;
    text-shadow: 0.125rem 0.125rem 0.5rem rgba(0, 0, 0, 0.7);
    z-index: 5; /* Sobre la imagen y el overlay */
}

.text-content h1 {
    font-size: 7rem; /* 70px a rem */
    margin-bottom: 1.9375rem; /* 15px a rem */
    line-height: 1; /* Ajusta según la separación deseada */
}

.textP {
    color: #fff;
}

.textP p {
    font-size: 1.825rem;
    line-height: 3rem;
    margin-bottom: 1.25rem; /* 20px a rem */

    position: relative;
    top: 23rem;
    left: 14rem;
}

.button-bt {
    padding: 0.625rem 1.25rem; /* 10px 20px a rem */
    background-color: #AC331A;
    color: white;
    text-decoration: none;
    border-radius: 0.3125rem; /* 5px a rem */
    font-size: 1.8rem; /* 16px a rem */
    position: absolute;
    top: 41rem; /* 450px a rem */
    left: 14rem; /* No necesita conversión */
}

.arrow {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.075);
    border: 0.1875rem solid #AC331A; /* 3px a rem */
    color: #AC331A;
    font-size: 1.5rem; /* 24px a rem */
    width: 5.525rem; /* 50px a rem */
    height: 5.525rem; /* 50px a rem */
    border-radius: 50%; /* Hace el botón redondo */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;

    margin: 50px;
}

.arrow-left {
    left: 0.425rem; /* 10px a rem */

}

.arrow-right {
    right: 0.425rem; /* 10px a rem */
}


@media (max-width: 2560px){
    .banner-container {
        position: relative;
        width: 100%;
        height: 70rem;
        overflow: hidden;
        top: -0.5rem;
    }
    
    .banner-container .slide {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        transition: opacity 1s ease;
    }
    
    .text-content {
        position: absolute;
        top: 30%;
        left: 10%;
        transform: translateY(-50%);
        color: white;
        text-shadow: 0.125rem 0.125rem 0.5rem rgba(0, 0, 0, 0.7);
        z-index: 5; /* Sobre la imagen y el overlay */
    }
    
    .text-content h1 {
        position: relative;
        font-size: 10rem; /* 70px a rem */
        left: -11.5rem;
        margin-bottom: 0.9375rem; /* 15px a rem */
        line-height: 1; /* Ajusta según la separación deseada */
    }
    
    .textP {
        color: #fff;
    }
    
    .textP p {
        font-size: 2.5rem;
        line-height: 3rem;
        margin-bottom: 1.05rem; /* 20px a rem */
    
        position: relative;
        top: 35rem;
        left: 14rem;
    }
    
    .button-bt {
        padding: 0.625rem 1.25rem; /* 10px 20px a rem */
        background-color: #AC331A;
        color: white;
        text-decoration: none;
        border-radius: 0.3125rem; /* 5px a rem */
        font-size: 2.5rem; /* 16px a rem */
        position: absolute;
        top: 55rem; /* 450px a rem */
        left: 14rem; /* No necesita conversión */
    }
    
    .arrow {
        position: absolute;
        top: 45%;
        transform: translateY(-50%);
        background-color: rgba(255, 255, 255, 0.075);
        border: 0.1875rem solid #AC331A; /* 3px a rem */
        color: #AC331A;
        font-size: 3rem; /* 24px a rem */
        width: 5.525rem; /* 50px a rem */
        height: 5.525rem; /* 50px a rem */
        border-radius: 50%; /* Hace el botón redondo */
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 3;
    
        margin: 50px;
    }
    
    .arrow-left {
        left: 0.425rem; /* 10px a rem */
    
    }
    
    .arrow-right {
        right: 0.425rem; /* 10px a rem */
    }

}
@media (max-width: 1920px){
    .banner-container {
        position: relative;
        width: 100%;
        height: 60rem;
        overflow: hidden;
        top: -0.5rem;
    }
    
    .banner-container .slide {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        transition: opacity 1s ease;
    }
    
    .text-content {
        position: absolute;
        top: 30%;
        left: 10%;
        transform: translateY(-50%);
        color: white;
        text-shadow: 0.125rem 0.125rem 0.5rem rgba(0, 0, 0, 0.7);
        z-index: 5; /* Sobre la imagen y el overlay */
    }
    
    .text-content h1 {
        position: relative;
        left: -5rem;
        font-size: 7rem; /* 70px a rem */
        margin-bottom: 1.9375rem; /* 15px a rem */
        line-height: 1; /* Ajusta según la separación deseada */
    }
    
    .textP {
        color: #fff;
    }
    
    .textP p {
        font-size: 1.825rem;
        line-height: 3rem;
        margin-bottom: 1.25rem; /* 20px a rem */
    
        position: relative;
        top: 28rem;
        left: 14rem;
    }
    
    .button-bt {
        padding: 0.625rem 1.25rem; /* 10px 20px a rem */
        background-color: #AC331A;
        color: white;
        text-decoration: none;
        border-radius: 0.3125rem; /* 5px a rem */
        font-size: 2.2rem; /* 16px a rem */
        position: absolute;
        top: 47rem; /* 450px a rem */
        left: 14rem; /* No necesita conversión */
    }
    
    .arrow {
        position: absolute;
        top: 45%;
        transform: translateY(-50%);
        background-color: rgba(255, 255, 255, 0.075);
        border: 0.1875rem solid #AC331A; /* 3px a rem */
        color: #AC331A;
        font-size: 1.5rem; /* 24px a rem */
        width: 5.525rem; /* 50px a rem */
        height: 5.525rem; /* 50px a rem */
        border-radius: 50%; /* Hace el botón redondo */
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 3;
    
        margin: 50px;
    }
    
    .arrow-left {
        left: 0.425rem; /* 10px a rem */
    
    }
    
    .arrow-right {
        right: 0.425rem; /* 10px a rem */
    }

}
@media (max-width: 1366px){
    .banner-container {
        position: relative;
        width: 100%;
        height: 50rem;
        overflow: hidden;
        top: 7.5rem;
    }
    
    .banner-container .slide {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        transition: opacity 1s ease;
    }
    
    .text-content {
        position: absolute;
        top: 30%;
        left: 10%;
        transform: translateY(-50%);
        color: white;
        text-shadow: 0.125rem 0.125rem 0.5rem rgba(0, 0, 0, 0.7);
        z-index: 5; /* Sobre la imagen y el overlay */
    }
    
    .text-content h1 {
        position: relative;
        left: 1rem;
        font-size: 7rem; /* 70px a rem */
        margin-bottom: 1.9375rem; /* 15px a rem */
        line-height: 1; /* Ajusta según la separación deseada */
    }
    
    .textP {
        color: #fff;
    }
    
    .textP p {
        font-size: 1.825rem;
        line-height: 3rem;
        margin-bottom: 1.25rem; /* 20px a rem */
    
        position: relative;
        top: 23rem;
        left: 14rem;
    }
    
    .button-bt {
        padding: 0.625rem 1.25rem; /* 10px 20px a rem */
        background-color: #AC331A;
        color: white;
        text-decoration: none;
        border-radius: 0.3125rem; /* 5px a rem */
        font-size: 1.8rem; /* 16px a rem */
        position: absolute;
        top: 41rem; /* 450px a rem */
        left: 14rem; /* No necesita conversión */
    }
    
    .arrow {
        position: absolute;
        top: 45%;
        transform: translateY(-50%);
        background-color: rgba(255, 255, 255, 0.075);
        border: 0.1875rem solid #AC331A; /* 3px a rem */
        color: #AC331A;
        font-size: 1.5rem; /* 24px a rem */
        width: 5.525rem; /* 50px a rem */
        height: 5.525rem; /* 50px a rem */
        border-radius: 50%; /* Hace el botón redondo */
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 3;
    
        margin: 50px;
    }
    
    .arrow-left {
        left: 0.425rem; /* 10px a rem */
    
    }
    
    .arrow-right {
        right: 0.425rem; /* 10px a rem */
    }

}




@media (max-width: 480px){
    .banner-container {
        position: relative;
        width: 99.9%;
        height: 50rem;
        overflow: hidden;
        top: 7.6rem;
    }
    
    .banner-container .slide {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        transition: opacity 1s ease;
    }
    
    .text-content {
        position: absolute;
        top: 25%;
        left: 10%;
        transform: translateY(-50%);
        color: white;
        text-shadow: 0.125rem 0.125rem 0.5rem rgba(0, 0, 0, 0.7);
        z-index: 5; /* Sobre la imagen y el overlay */
    }
    
    .text-content h1 {
        position: relative;
        left: 1rem;
        font-size: 4.5rem; /* 70px a rem */
        margin-bottom: 2rem; /* 15px a rem */
        line-height: 1; /* Ajusta según la separación deseada */
    }
    
    .textP {
        color: #fff;
    }
    
    .textP p {
        font-size: 1.3rem;
        line-height: 2rem;
        margin-bottom: 1.25rem; /* 20px a rem */
    
        position: relative;
        top: 23rem;
        left: 2rem;
        text-shadow: #000000 5px 5px 10px;
    }
    
    .button-bt {
        padding: 0.625rem 1.25rem; /* 10px 20px a rem */
        background-color: #AC331A;
        color: white;
        text-decoration: none;
        border-radius: 0.3125rem; /* 5px a rem */
        font-size: 1.8rem; /* 16px a rem */
        position: absolute;
        top: 41rem; /* 450px a rem */
        left: 23rem; /* No necesita conversión */
    }
    
    .arrow {
        position: absolute;
        top: 45%;
        transform: translateY(-50%);
        background-color: rgba(255, 255, 255, 0.075);
        border: 0.1875rem solid #AC331A; /* 3px a rem */
        color: #AC331A;
        font-size: 1.5rem; /* 24px a rem */
        width: 5.525rem; /* 50px a rem */
        height: 5.525rem; /* 50px a rem */
        border-radius: 50%; /* Hace el botón redondo */
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 3;
    
        margin: 50px;
    }
    
    .arrow-left {
        position: relative;
        top: 40rem;
        left: -2rem; /* 10px a rem */
    
    }
    
    .arrow-right {
        position: relative;
        top: 29.4rem;
        left: 35rem; /* 10px a rem */
    }

}
@media (max-width: 430px){
    .banner-container {
        position: relative;
        width: 100%;
        height: 50rem;
        overflow: hidden;
        top: 7.6rem;
    }
    
    .banner-container .slide {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        transition: opacity 1s ease;
    }
    
    .text-content {
        position: absolute;
        top: 25%;
        left: 10%;
        transform: translateY(-50%);
        color: white;
        text-shadow: 0.125rem 0.125rem 0.5rem rgba(0, 0, 0, 0.7);
        z-index: 5; /* Sobre la imagen y el overlay */
    }
    
    .text-content h1 {
        position: relative;
        left: 1rem;
        font-size: 4.5rem; /* 70px a rem */
        margin-bottom: 2rem; /* 15px a rem */
        line-height: 1; /* Ajusta según la separación deseada */
    }
    
    .textP {
        color: #fff;
    }
    
    .textP p {
        font-size: 1.3rem;
        line-height: 2rem;
        margin-bottom: 1.25rem; /* 20px a rem */
    
        position: relative;
        top: 23rem;
        left: 2rem;
        text-shadow: #000000 5px 5px 10px;
    }
    
    .button-bt {
        padding: 0.625rem 1.25rem; /* 10px 20px a rem */
        background-color: #AC331A;
        color: white;
        text-decoration: none;
        border-radius: 0.3125rem; /* 5px a rem */
        font-size: 1.8rem; /* 16px a rem */
        position: absolute;
        top: 41rem; /* 450px a rem */
        left: 21rem; /* No necesita conversión */
    }
    
    .arrow {
        position: absolute;
        top: 45%;
        transform: translateY(-50%);
        background-color: rgba(255, 255, 255, 0.075);
        border: 0.1875rem solid #AC331A; /* 3px a rem */
        color: #AC331A;
        font-size: 1.5rem; /* 24px a rem */
        width: 5.525rem; /* 50px a rem */
        height: 5.525rem; /* 50px a rem */
        border-radius: 50%; /* Hace el botón redondo */
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 3;
    
        margin: 50px;
    }
    
    .arrow-left {
        position: relative;
        top: 40rem;
        left: -2rem; /* 10px a rem */
    
    }
    
    .arrow-right {
        position: relative;
        top: 29.4rem;
        left: 30rem; /* 10px a rem */
    }

}
@media (max-width: 428px){
    .banner-container {
        position: relative;
        width: 100%;
        height: 50rem;
        overflow: hidden;
        top: 7.6rem;
    }
    
    .banner-container .slide {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        transition: opacity 1s ease;
    }
    
    .text-content {
        position: absolute;
        top: 25%;
        left: 10%;
        transform: translateY(-50%);
        color: white;
        text-shadow: 0.125rem 0.125rem 0.5rem rgba(0, 0, 0, 0.7);
        z-index: 5; /* Sobre la imagen y el overlay */
    }
    
    .text-content h1 {
        position: relative;
        left: 1rem;
        font-size: 4.5rem; /* 70px a rem */
        margin-bottom: 2rem; /* 15px a rem */
        line-height: 1; /* Ajusta según la separación deseada */
    }
    
    .textP {
        color: #fff;
    }
    
    .textP p {
        font-size: 1.3rem;
        line-height: 2rem;
        margin-bottom: 1.25rem; /* 20px a rem */
    
        position: relative;
        top: 23rem;
        left: 2rem;
        text-shadow: #000000 5px 5px 10px;
    }
    
    .button-bt {
        padding: 0.625rem 1.25rem; /* 10px 20px a rem */
        background-color: #AC331A;
        color: white;
        text-decoration: none;
        border-radius: 0.3125rem; /* 5px a rem */
        font-size: 1.8rem; /* 16px a rem */
        position: absolute;
        top: 41rem; /* 450px a rem */
        left: 21rem; /* No necesita conversión */
    }
    
    .arrow {
        position: absolute;
        top: 45%;
        transform: translateY(-50%);
        background-color: rgba(255, 255, 255, 0.075);
        border: 0.1875rem solid #AC331A; /* 3px a rem */
        color: #AC331A;
        font-size: 1.5rem; /* 24px a rem */
        width: 5.525rem; /* 50px a rem */
        height: 5.525rem; /* 50px a rem */
        border-radius: 50%; /* Hace el botón redondo */
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 3;
    
        margin: 50px;
    }
    
    .arrow-left {
        position: relative;
        top: 40rem;
        left: -2rem; /* 10px a rem */
    
    }
    
    .arrow-right {
        position: relative;
        top: 29.4rem;
        left: 28rem; /* 10px a rem */
    }

}
@media (max-width: 412px){
    .banner-container {
        position: relative;
        width: 99.9%;
        height: 50rem;
        overflow: hidden;
        top: 7.6rem;
    }
    
    .banner-container .slide {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        transition: opacity 1s ease;
    }
    
    .text-content {
        position: absolute;
        top: 25%;
        left: 10%;
        transform: translateY(-50%);
        color: white;
        text-shadow: 0.125rem 0.125rem 0.5rem rgba(0, 0, 0, 0.7);
        z-index: 5; /* Sobre la imagen y el overlay */
    }
    
    .text-content h1 {
        position: relative;
        left: 1rem;
        font-size: 4.5rem; /* 70px a rem */
        margin-bottom: 2rem; /* 15px a rem */
        line-height: 1; /* Ajusta según la separación deseada */
    }
    
    .textP {
        color: #fff;
    }
    
    .textP p {
        font-size: 1.3rem;
        line-height: 2rem;
        margin-bottom: 1.25rem; /* 20px a rem */
    
        position: relative;
        top: 23rem;
        left: 2rem;
        text-shadow: #000000 5px 5px 10px;
    }
    
    .button-bt {
        padding: 0.625rem 1.25rem; /* 10px 20px a rem */
        background-color: #AC331A;
        color: white;
        text-decoration: none;
        border-radius: 0.3125rem; /* 5px a rem */
        font-size: 1.8rem; /* 16px a rem */
        position: absolute;
        top: 41rem; /* 450px a rem */
        left: 16rem; /* No necesita conversión */
    }
    
    .arrow {
        position: absolute;
        top: 45%;
        transform: translateY(-50%);
        background-color: rgba(255, 255, 255, 0.075);
        border: 0.1875rem solid #AC331A; /* 3px a rem */
        color: #AC331A;
        font-size: 1.5rem; /* 24px a rem */
        width: 5.525rem; /* 50px a rem */
        height: 5.525rem; /* 50px a rem */
        border-radius: 50%; /* Hace el botón redondo */
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 3;
    
        margin: 50px;
    }
    
    .arrow-left {
        position: relative;
        top: 40rem;
        left: -2rem; /* 10px a rem */
    
    }
    
    .arrow-right {
        position: relative;
        top: 29.4rem;
        left: 29rem; /* 10px a rem */
    }

}
@media (max-width: 393px){
    .banner-container {
        position: relative;
        width: 99.9%;
        height: 50rem;
        overflow: hidden;
        top: 7.6rem;
    }
    
    .banner-container .slide {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        transition: opacity 1s ease;
    }
    
    .text-content {
        position: absolute;
        top: 25%;
        left: 10%;
        transform: translateY(-50%);
        color: white;
        text-shadow: 0.125rem 0.125rem 0.5rem rgba(0, 0, 0, 0.7);
        z-index: 5; /* Sobre la imagen y el overlay */
    }
    
    .text-content h1 {
        position: relative;
        left: 0.6rem;
        font-size: 4.5rem; /* 70px a rem */
        margin-bottom: 2rem; /* 15px a rem */
        line-height: 1; /* Ajusta según la separación deseada */
    }
    
    .textP {
        color: #fff;
    }
    
    .textP p {
        font-size: 1.3rem;
        line-height: 2rem;
        margin-bottom: 1.25rem; /* 20px a rem */
    
        position: relative;
        top: 23rem;
        left: 2rem;
        text-shadow: #000000 5px 5px 10px;
    }
    
    .button-bt {
        padding: 0.625rem 1.25rem; /* 10px 20px a rem */
        background-color: #AC331A;
        color: white;
        text-decoration: none;
        border-radius: 0.3125rem; /* 5px a rem */
        font-size: 1.8rem; /* 16px a rem */
        position: absolute;
        top: 41rem; /* 450px a rem */
        left: 16rem; /* No necesita conversión */
    }
    
    .arrow {
        position: absolute;
        top: 45%;
        transform: translateY(-50%);
        background-color: rgba(255, 255, 255, 0.075);
        border: 0.1875rem solid #AC331A; /* 3px a rem */
        color: #AC331A;
        font-size: 1.5rem; /* 24px a rem */
        width: 5.525rem; /* 50px a rem */
        height: 5.525rem; /* 50px a rem */
        border-radius: 50%; /* Hace el botón redondo */
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 3;
    
        margin: 50px;
    }
    
    .arrow-left {
        position: relative;
        top: 40rem;
        left: -2rem; /* 10px a rem */
    
    }
    
    .arrow-right {
        position: relative;
        top: 29.4rem;
        left: 25rem; /* 10px a rem */
    }

}
@media (max-width: 379px){
    .banner-container {
        position: relative;
        width: 99.9%;
        height: 50rem;
        overflow: hidden;
        top: 7.6rem;
    }
    
    .banner-container .slide {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        transition: opacity 1s ease;
    }
    
    .text-content {
        position: absolute;
        top: 25%;
        left: 10%;
        transform: translateY(-50%);
        color: white;
        text-shadow: 0.125rem 0.125rem 0.5rem rgba(0, 0, 0, 0.7);
        z-index: 5; /* Sobre la imagen y el overlay */
    }
    
    .text-content h1 {
        position: relative;
        left: 0.6rem;
        font-size: 2.8em; /* 70px a rem */
        margin-bottom: 2rem; /* 15px a rem */
        line-height: 1; /* Ajusta según la separación deseada */
    }
    
    .textP {
        color: #fff;
    }
    
    .textP p {
        font-size: 1.2rem;
        line-height: 2rem;
        margin-bottom: 1.25rem; /* 20px a rem */
    
        position: relative;
        top: 23rem;
        left: 2rem;
        text-shadow: #000000 5px 5px 10px;
    }
    
    .button-bt {
        padding: 0.625rem 1.25rem; /* 10px 20px a rem */
        background-color: #AC331A;
        color: white;
        text-decoration: none;
        border-radius: 0.3125rem; /* 5px a rem */
        font-size: 1.8rem; /* 16px a rem */
        position: absolute;
        top: 41rem; /* 450px a rem */
        left: 16rem; /* No necesita conversión */
    }
    
    .arrow {
        position: absolute;
        top: 45%;
        transform: translateY(-50%);
        background-color: rgba(255, 255, 255, 0.075);
        border: 0.1875rem solid #AC331A; /* 3px a rem */
        color: #AC331A;
        font-size: 1.5rem; /* 24px a rem */
        width: 5.525rem; /* 50px a rem */
        height: 5.525rem; /* 50px a rem */
        border-radius: 50%; /* Hace el botón redondo */
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 3;
    
        margin: 50px;
    }
    
    .arrow-left {
        position: relative;
        top: 40rem;
        left: -2rem; /* 10px a rem */
    
    }
    
    .arrow-right {
        position: relative;
        top: 29.4rem;
        left: 24rem; /* 10px a rem */
    }

}
@media (max-width: 375px){
    .banner-container {
        position: relative;
        width: 99.9%;
        height: 50rem;
        overflow: hidden;
        top: 7.6rem;
    }
    
    .banner-container .slide {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        transition: opacity 1s ease;
    }
    
    .text-content {
        position: absolute;
        top: 25%;
        left: 10%;
        transform: translateY(-50%);
        color: white;
        text-shadow: 0.125rem 0.125rem 0.5rem rgba(0, 0, 0, 0.7);
        z-index: 5; /* Sobre la imagen y el overlay */
    }
    
    .text-content h1 {
        position: relative;
        left: 0.6rem;
        font-size: 3.5rem; /* 70px a rem */
        margin-bottom: 2rem; /* 15px a rem */
        line-height: 1; /* Ajusta según la separación deseada */
    }
    
    .textP {
        color: #fff;
    }
    
    .textP p {
        font-size: 1.2rem;
        line-height: 2rem;
        margin-bottom: 1.25rem; /* 20px a rem */
    
        position: relative;
        top: 23rem;
        left: 2rem;
        text-shadow: #000000 5px 5px 10px;
    }
    
    .button-bt {
        padding: 0.625rem 1.25rem; /* 10px 20px a rem */
        background-color: #AC331A;
        color: white;
        text-decoration: none;
        border-radius: 0.3125rem; /* 5px a rem */
        font-size: 1.8rem; /* 16px a rem */
        position: absolute;
        top: 41rem; /* 450px a rem */
        left: 16rem; /* No necesita conversión */
    }
    
    .arrow {
        position: absolute;
        top: 45%;
        transform: translateY(-50%);
        background-color: rgba(255, 255, 255, 0.075);
        border: 0.1875rem solid #AC331A; /* 3px a rem */
        color: #AC331A;
        font-size: 1.5rem; /* 24px a rem */
        width: 5.525rem; /* 50px a rem */
        height: 5.525rem; /* 50px a rem */
        border-radius: 50%; /* Hace el botón redondo */
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 3;
    
        margin: 50px;
    }
    
    .arrow-left {
        position: relative;
        top: 40rem;
        left: -2rem; /* 10px a rem */
    
    }
    
    .arrow-right {
        position: relative;
        top: 29.4rem;
        left: 23.5rem; /* 10px a rem */
    }

}
@media (max-width: 360px){
    .banner-container {
        position: relative;
        width: 99.9%;
        height: 50rem;
        overflow: hidden;
        top: 7.6rem;
    }
    
    .banner-container .slide {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        transition: opacity 1s ease;
    }
    
    .text-content {
        position: absolute;
        top: 25%;
        left: 10%;
        transform: translateY(-50%);
        color: white;
        text-shadow: 0.125rem 0.125rem 0.5rem rgba(0, 0, 0, 0.7);
        z-index: 5; /* Sobre la imagen y el overlay */
    }
    
    .text-content h1 {
        position: relative;
        left: 1rem;
        font-size: 3.8rem; /* 70px a rem */
        margin-bottom: 2rem; /* 15px a rem */
        line-height: 1; /* Ajusta según la separación deseada */
    }
    
    .textP {
        color: #fff;
    }
    
    .textP p {
        font-size: 1.1rem;
        line-height: 2rem;
        margin-bottom: 1.25rem; /* 20px a rem */
    
        position: relative;
        top: 23rem;
        left: 2rem;
        text-shadow: #000000 5px 5px 10px;
    }
    
    .button-bt {
        padding: 0.625rem 1.25rem; /* 10px 20px a rem */
        background-color: #AC331A;
        color: white;
        text-decoration: none;
        border-radius: 0.3125rem; /* 5px a rem */
        font-size: 1.8rem; /* 16px a rem */
        position: absolute;
        top: 41rem; /* 450px a rem */
        left: 16rem; /* No necesita conversión */
    }
    
    .arrow {
        position: absolute;
        top: 45%;
        transform: translateY(-50%);
        background-color: rgba(255, 255, 255, 0.075);
        border: 0.1875rem solid #AC331A; /* 3px a rem */
        color: #AC331A;
        font-size: 1.5rem; /* 24px a rem */
        width: 5.525rem; /* 50px a rem */
        height: 5.525rem; /* 50px a rem */
        border-radius: 50%; /* Hace el botón redondo */
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 3;
    
        margin: 50px;
    }
    
    .arrow-left {
        position: relative;
        top: 40rem;
        left: -2rem; /* 10px a rem */
    
    }
    
    .arrow-right {
        position: relative;
        top: 29.4rem;
        left: 22rem; /* 10px a rem */
    }

}