html{
    overflow-x: hidden;
}

.bg-section{
    background-image: url(/static/img/bg-voluntarios.webp);
    background-position: top center;
    background-size: cover;
}

.banner .logo{
    width: 100%; 
    height: auto; 
    max-width: 300px;
}

.banner h3{
    font-family: 'Nexa';
    font-size: 18px;
    color: #dcb555;
    line-height: 0.9em;
    text-align: center;
}

.banner h2{
    font-family: 'Nexa';
    font-size: 50px;
    color: #dcb555;
    text-align: center;
}

.banner h4{
    font-family: 'Nexa';
    font-size: 18px;
    color: #fff;
    text-align: center;
}

.banner p{
    color: #efa43b;
    line-height: 1.2em;
    text-align: center;
    font-size: 16px;
}
#registre p{
    font-family: 'Nexa';
    font-size: 18px;
    color: #4d4d4d;
    text-align: center;
}

.btn{
    font-family: 'Nexa-Heavy';
    border-width: 1px;
    border-radius: 20px;
    font-size: 18px;
    padding-top: 12px;
    padding-right: 45px;
    padding-left: 45px;
}

.btn-registre, .btn-update{
    width: 100%;
    max-width: 250px;
    font-size: 16px;
    padding: 15px 10px 10px 10px;
}

.btn-registre{
    color: #dcb555;
    border-color: #872783;
    background-color: #872783;
}

.btn-update{
    color: #ffffff;
    border-color: #299fd6;
    background-color: #299fd6;
}

.areas{
    font-family: 'Nexa';
    border-radius: 15px; 
    height: 120px; 
    font-size: 18px;
    line-height: 1em;
}

.btn-registre:hover, .btn-registre:active, .btn-registre:focus, .btn-registre:focus-visible, .btn-registre:focus-within, .btn-registre:target {
    color: #872783 !important;
    border-color: #872783 !important;
    background-color: #dcb555 !important;
}

.btn-update:hover, .btn-update:active, .btn-update:focus, .btn-update:focus-visible, .btn-update:focus-within, .btn-update:target{
    color: #299fd6 !important;
    border-color: #299fd6 !important;
    background-color: #ffffff !important;
}

footer{
    background-color: #000;
    padding-bottom: 10px;
}

footer h6{
    font-family: 'Montserrat-Black';
    font-size: 18px;
    color: #f5bb04;
}

footer .title{
    font-family: 'Montserrat-Bold';
    font-size: 16px;
    color: #fff;
}

footer .title span{
    color: #dcb555;
}

footer .address{
    font-family: 'Montserrat-Light';
    font-size: 16px;
    color: #fff;
}

footer .row-3{
    max-width: 950px;
    margin: 0px auto;
}

footer .row-2{
    max-width: 700px;
    margin: 0px auto;
}

footer .contact{
    border-top: 1px solid #ffc107;
}

footer .row-contact{
    max-width: 700px;
    margin: 0px auto;
}

.jesus-form{
    background-image: url(/static/img/bg-patron.png); 
    background-position: center; 
    background-size: cover;
}

.jesus-form > .banner{
    width: 100%; 
    height: 40dvh; 
    background-image: url(/static/img/bg_jesus.png); 
    background-position: center; 
    background-size: cover;
}

.jesus-form label{
    font-family: 'Montserrat';
    color: #000 !important;
    font-size: 16px;
}

.btn-form{
    font-family: 'Montserrat-Bold';
    font-size: 16px;
    color: #000;
    background-color: #fff;
    padding: 10px 40px 11px 40px;
}

.testimonio{
    background-image: url(/static/img/bg-cuentanos-dios-en-tu-vida.jpg); 
    background-position: left; 
    background-size: cover;
}


.jesus-form form{
    max-width: 900px;
    margin: 0px auto;
}

.btn-donations{
    color: #000;
    background-color: #dcb555;
    padding: 5px 0px 5px 0px;
    border-radius: 10px;
    font-size: 16px;
    margin-top: 22px;
}

#btn-add-donation{
    margin-top: 30px;
}

#btn-remove-Diezmo{
    font-family: 'Nexa-Heavy';
    border-width: 1px;
    border-radius: 20px;
    font-size: 18px;
    padding-top: 0px;
    padding-right: 10px;
    padding-left: 10px;
    line-height: 0px;
}

/* sm: ≥ 576px */
@media (min-width: 576px) { 
    
}

/* md: ≥ 768px */
@media (min-width: 768px) { 
    .jesus-form > .banner{
        height: 80dvh; 
    }
}

/* lg: ≥ 992px */
@media (min-width: 992px) { 
    footer .address {
        font-size: 14px;
    }

    footer .title {
        font-size: 14px;
    }

    .testimonio{
        background-position: center; 
    }
}

/* xl: ≥ 1200px */
@media (min-width: 1200px) { 

}

/* xxl: ≥ 1400px */
@media (min-width: 1400px) { 

}