header {
    padding: 2rem 0;
    border-bottom: 0.1rem solid rgba(255, 255, 255, 0.4);
}

header .container {
    display: flex;
    align-items: center;
}

figure img {
width: 100%;
max-width: 14rem;
}

header .figure1 {
    border-right: .1rem solid #fff;
    margin-right: 1.5rem;
}

.s-hero {
    color: #fff;
    padding: 6rem 0 3rem;
}

.usuario {
    display: flex;
    align-items: center;
}

.usuario img {
    width: 100%;
    max-width: 5rem;
    margin-right: 1rem;
}

.usuario p {
    font-size: 1.8rem;
}

.usuario p strong {
    font-size: 1.8rem;
    display: block;
    font-weight: bold;
}

.desafio {
    display: flex;
    align-items: center;
}

.desafio img {
    margin-right: 2.5rem;
    align-items: center;
}

.desafio img:last-child {
    margin-right: 0;
}

.s-hero .container .desafio2{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.desafio2 {
    border-bottom: .1rem solid rgba(0, 0, 0, 0.15);
    padding:  3rem 0;
    margin-bottom: 4rem;
}

.picpay {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4rem;
}

.picpay .picpay2 p {
    font-size: 1.8rem;
    line-height: 2.2rem;
}

.picpay .picpay2 p span{
    font-size: 1.8rem;
    display: block;
    font-weight: bold;
 }

 .picpay .picpay2 img {
    margin-left: 9px;
    max-width: 32px;
 }

 .picpay button {
     background-color: #fff;
    padding: 10px 70px; 
    border-radius: 1rem;
    font-size: 1.8rem;
    font-weight: bold;
    transition: All .5s;
 }

 .picpay button:hover {
     background-color: #1F6F54;
    transform: scale(1.05);
    color: #fff;
 }

 .ul-s-hero {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.ul-s-hero .li-geral {
    width: 17.7rem;
    height: 17rem;
    background-color: #1F6F54;
    border-radius: 1rem;
    padding: 4rem 2rem;
    transition: background-color 1s;
    cursor: pointer;
}

.li-geral:hover {
    background-color: #fff;
    color: #228664;
}

.li-geral figure {
    background-repeat: no-repeat ;
    background-size: cover;
    display: block;
    height: 5rem;
    width: 5rem;
}

.liqrcode figure {
    background-image: url(../image/qrcode.png);
}

.lipix figure {
    background-image: url(../image/pix.png);
}

.liboleto figure {
    background-image: url(../image/codigo.png);
    display: block;
    width: 100%;
    max-width: 47%;
}

.licobrar figure {
    background-image: url(../image/cobrar-icon.png);
    display: block;
    width: 100%;
    max-width: 45%;
}

.liqrcode:hover figure {
    background-image: url(../image/qrcode-verde.png);
}

.lipix:hover figure {
    background-image: url(../image/pix-verde.png);
}

.liboleto:hover figure {
    background-image: url(../image/boleto-verde.png);
    display: block;
    width: 100%;
    max-width: 47%;
}

.licobrar:hover figure {
    background-image: url(../image/cobrar-verde.png);
    display: block;
    width: 100%;
    max-width: 45%;
}

.li-geral figure img {
    opacity: 0;
}

.ul-s-hero li p {
    width: 100%;
    max-width: 60%;
    font-weight: bold;
    margin-top: 10px;
    font-size: 1.8rem;
}

.s-hero-secondy {
    height: 50rem;
    padding: 3rem;
    border-radius: 2rem 2rem 0 0;
    background-color: #fff;
    border-bottom: 15px solid #f4f4f4;
}

.s-hero-secondy .container div {
    display: none;
}

.s-hero-secondy .container div.mostrar {
    display: flex;
}

.pagamento {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pagamento p {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 1rem;
    margin-bottom: 3rem;
    box-shadow: 2px 2px 4px rgb(0 0 0 / 15%);
    height: 12.4rem;
    width: 100%;
    border: 1px solid rgb(0 0 0 / 15%);
    font-size: 2.5rem;
}

.pagamento img {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
   margin-bottom: 4rem;
}

.qrcode {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.qrcode p {
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    margin: 2rem 0 3rem 0;
}

.qrcode button {
    width: 40rem;
    height: 4rem;
    line-height: 4rem;
    background-color: #1F6F54;
    border-radius: 1rem;
    color: #fff;
    font-weight: bold;
    font-size: 1.5rem;
    margin-bottom: 3rem;
    transition: transform .5s;
}

.qrcode button:hover {
    transform: scale(1.05);
}

.qrcode a {
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    color: #000;
    text-decoration: underline;
}

.pix-container {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pix-container .image-pix {
    width: 100%;
    max-width: 15rem;
}

.pix-container .pix  {
    width: 100%;
    max-width: 43rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid rgb(0 0 0 / 15%);
    box-shadow: 2px 2px 4px rgb(0 0 0 / 15%);
    padding: 1rem;
    border-radius: 10px;
    margin-bottom: 2rem;
}

.pix-container .pix-pai .pix img {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0 1rem 0 0;

}

.pix-container .pix-pai .pix p {
    align-items: center;
    font-size: 1.6rem;
}

.boleto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.boleto img {
    width: 100%;
    max-width: 8rem;
}

.boleto h2 {
    font-size: 2rem;
    font-weight: bold;
}

.boleto p {
    font-size: 1.8rem;
    max-width: 43rem;
    margin: 2rem 0px 3rem 0px;
}

.boleto input {
width: 100%;
height: 5rem;
background-color: #f4f4f4;
padding: 1.2rem 4rem;
font-size: 1.6rem;
color: #000;
border-radius: 1rem;
border: 1px solid #d2d2d2;
margin-bottom: 3rem;
}

.cobrar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cobrar img {
    width: 100%;
    max-width: 8rem;
}

.cobrar h2 {
    font-size: 2rem;
    font-weight: bold;
}

.cobrar p {
    font-size: 1.8rem;
    max-width: 43rem;
    margin: 2rem 0;
}

.cobrar .icon-picpay{
    width: 100%;
    max-width: 59rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid rgb(0 0 0 / 15%);
    box-shadow: 2px 2px 4px rgb(0 0 0 / 15%);
    padding: 2rem 0 2rem 4rem;
    border-radius: 10px;
    margin-bottom: 2rem;
}

.cobrar .icon-picpay img {
width: 100%;
max-width: 8rem;
margin-right: 4rem;
}

.cobrar .icon-picpay h3 {
font-size: 2rem;
}

.cobrar .icon-picpay p {
    font-size: 1.8rem;
    margin: 0;
}

footer {
    background-color: #fff;
}

.ul-secondy {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.ul-secondy li {
    align-items: center;
    text-align: center;
}

.ul-secondy li a img {
    width: 100%;
    max-width: 4rem;
}

.ul-secondy li a p {
    font-size: 1.8rem;
    color: #908f8f;
    margin-top: 2rem;
}

.ul-secondy li a .pagar1 {
    transform: translateY(-3.5rem);
    max-width: 14rem;
}

.ul-secondy li a .pagamento1 {
    transform: translateY(-3.5rem);
}