:root{
    --accent:#01a385;
}



.heroText {background:#f6faf9; padding:40px; border-radius:20px; margin-top:20px;background: url(/assets/images/website/topupcontainer.webp) #f6faf9 no-repeat bottom right; background-size: auto 100%;}
.heroText h1 {}
.heroText h1 span {display:block; color:var(--accent)}
.heroText .strap {color: #666; font-size:16px; font-weight: 600; margin-bottom:20px; max-width:600px;}

.contactContainer {margin-top:30px;}

.contactContainer > div {display:grid; grid-template-columns: 320px 1fr; gap:30px; align-items:stretch;}

.contactContainer .text {padding: 40px; background: #f6faf9; border-radius:12px; color:#666; display:flex; flex-direction:column;}
.contactContainer .text .foot {margin-top:auto;}
.contactContainer .text [data-icon] {color:#666; gap:20px; padding:10px 0; margin-top:30px;}
.contactContainer .text [data-icon] b {color:#222; display:block;}
.contactContainer .text [data-icon]:before {width:48px; height:48px; flex:0 0 48px;}



.auth {max-width: none;}
.auth h2 {text-align:unset; margin-bottom:20px;}
.formRow {display: grid; grid-template-columns: 1fr 1fr; gap:20px;}
.hpField {position:absolute; left:-9999px;}

.contactSuccess {text-align:center; font-size:18px;}
.contactSuccess .icon {background: #e7faf6; padding:10px; border-radius:50%; display:inline-flex; margin-bottom:20px;} 
.contactSuccess .icon [data-icon]:before {width:48px; height:48px; flex:0 0 48px;}