: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 > div {max-width:500px;}
.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; color:#666; display:flex; flex-direction:column;}
.contactContainer .text .foot {margin-top:auto;}

.emailContainer {margin-top:30px;}
.emailLink, .responseTime {color:#666; display:flex; align-items: center; gap:20px; padding:10px 0;}
.emailLink b, .responseTime b {color:#222; display:block; font-weight:600;}
.emailLink [data-icon], .responseTime [data-icon] {background:#f6faf9; border-radius:50%; width:48px; height:48px; justify-content: center;}
.emailLink [data-icon]:before, .responseTime [data-icon]:before {width:32px; height:32px; flex:0 0 32px;}


.foot {background:#f6faf9; padding:20px; border-radius:10px;}
.foot .title {color:#222; font-weight:600; margin-bottom:0;}
.foot a {font-weight:600;}
.foot[data-icon]:before {display:none;}



.auth {max-width: none; margin:0;}
.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;} 

@media(max-width:1024px) {
    .heroText {background:#f6faf9;}
    .contactContainer > div {grid-template-columns: 1fr;}
    .emailContainer {display:grid; grid-template-columns: 1fr 1fr; margin-top:0; margin-top:10px; margin-bottom:20px;}
    .foot[data-icon] {gap:20px;}
    .foot[data-icon]:before {display:block; width:32px; height:32px; flex:0 0 32px;}

}

@media(max-width:600px) {
    .heroText, .contactContainer .text {padding:20px;} 
    .heroText h1 {font-size:30px;}
    .emailContainer {grid-template-columns:auto;}
    .formRow {grid-template-columns: 1fr; gap:0;}
}