/* banner header */
.curva-banner {
    fill: var(--bg-web-light);
    stroke: var(--bg-web-light);
    stroke-miterlimit: 10;
}

#curva-banner {
    position: absolute;
    bottom: 0;
    margin-bottom: -2px;
}
.header-web-checkout{
    height: 250px;
    background: linear-gradient(180deg, #E40044 50%, #19184A 154.13%);
}
/* seccion 1 */
.section1{
    padding: 50px 0;
}
.container-info-section1{
    margin-top: 50px;
    max-width: 70%;
    margin-left: auto;
    margin-right: 50px;
}
.container-info{
    margin-top: 50px;
    max-width: 70%;
    margin-left: auto;
    margin-right: 50px;
}



/* pagos seguros */
.secure-payments-section .container-info{
    max-width: 60%;
    margin-right: 0px;
}
.secure-payments-section .iocn-secured{
    width: 45px;
}
.bg-secured-pyments{
    background-image: url("./../img/qr/seccion2.png");
    min-height: 450px;
    background-position: center;
    background-repeat: no-repeat; 
    background-size: cover; 
}
.bg-secured-pyments-blue{
    background-color: var(--bg-web-light-blue);
    padding: 100px 50px; 
}
#curve-01-blue{
    position: absolute;
    left: -2px;
    top: 0px;
    bottom: -10px;
    height: 100%;
}
.curve-01-blue{
    fill: var(--bg-web-light-blue);
    stroke: var(--bg-web-light-blue);
    stroke-miterlimit: 10;
}

.line-01-section2{
    position: absolute;
    right: -83px;
    top: -50px;
    z-index: 0;
}
/* cta */
.cta-section{
    min-height: 320px;
}
.curve-red{
    fill: var(--bg-web-red);
    stroke: var(--red-color);
    stroke-miterlimit: 10;
}
#curve-red{
    position: absolute;
    top: 0;
    left: -180px;
    bottom: 0;
    max-height: 320px;
    min-height: 320px;
}
.Logo-ePagos-cta{
    position: absolute;
    left: 480px;
    bottom: 0;
    top: 0;
    margin: auto;
}
.line-01-cta{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 2;
}

@media (max-width:1335px){
    #curve-red {
        left: -470px;
    }
    .line-01-cta {
        left: -150px;
    }
    .cta-section .container-info{
        padding-left: 0%;
        margin-top: 0;
    }  
    .Logo-ePagos-cta {
        left: 190px;
    }
}

@media (max-width:992px){
    #curve-red {
        left: -470px;
    }
    .line-01-cta {
        left: -150px;
    }
    .cta-section .container-info{
        padding-left: 15%;
        margin-top: 0;
    }  
    .Logo-ePagos-cta {
        left: 190px;
    }
    .container-info-section1{
        margin: 50px 30px !important;
    }
    .container-info-cta{
        padding-left: 40%;
        margin-top: 0;
    }
    .container-info{
        max-width: 100% !important;
    }

}
@media (max-width:800px){
    #curve-red {
        left: -585px;
    }
    .line-01-cta {
        left: -230px;
    }
    .cta-section .container-info{
        padding-left: 15%;
        margin-top: 0;
    }  
    .Logo-ePagos-cta {
        left: 80px;
    }
}
@media (max-width:577px){
    .header-web-checkout h1{
        font-size: 36px !important;
    }
   #curve-red, .line-01-cta{
    display: none;
   }
   .cta-section .container-info {
        max-width: 100% !important;
            margin-top: 0;
            max-width: 100% !important;
            margin: auto;
            padding: 0;
            text-align: center;
    }
    .cta-section{
        padding-top: 100px;
        padding-bottom: 0;
        min-height: 400px;
    }
    .Logo-ePagos-cta {
        left: 0;
        right: 0;
        top: -240px;
        width: 90px;
    }

    .curve-red-movil{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
    }
    .cta-section h2{
        font-size: 24px;
    }
    .curve-01-blue{
        display: none;
    }
    .info-section2{
        display: none !important;
    }
    .container-info-cta{
        padding-left: 0%;
        margin-top: 0;
        text-align: center;
    }
    .container-info-section1{
        max-width: 100%;
    }
}