.referral-section { width: 100%; background-image: url(https://cdn.rocketx.exchange/pd135zq/website/ui/bg.webp); position: relative; background-position: left bottom; background-repeat: no-repeat; background-color: #000000 }

.referral-outer { width: 100%; position: relative; z-index: 3; overflow: hidden; padding-bottom: 40px; padding-top: 0; }

.referral { position: relative; z-index: 10; width: var(--app-width); margin: auto }

.referral .headline { position: relative; width: 100%; margin-top: 250px }

.referral .main-headline { color: #fff; font-size: 120px; width: 100%; text-align: left; letter-spacing: -.05em; z-index: 2; position: relative; line-height: 100px; margin-top: 40px }

.referral .backup-headline { color: #FFF; font-size: 100px; text-align: left; letter-spacing: -.05em; line-height: 120px; width: 100%; position: absolute; left: 0; top: -60px; background: -webkit-linear-gradient(bottom, transparent 25%, #ff4faa 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; z-index: 1; }

.referral .headline:hover .backup-headline { transform: translateY(-10px); padding-bottom: 20px }

.referral .headline p { font-size: 24px; color: #7D8CA3; letter-spacing: .03em; padding-top: 50px; line-height: 42px; text-align: left; z-index: 9; position: relative; width: 50% }

.referral-line { width: 2000px; height: 1px; border-top: 1px dashed rgba(255, 255, 255, .15); position: absolute; left: 600px; top: 50%; margin-top: -96px }

.referral-shape-1 { width: 40px; height: 40px; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .15); position: absolute; left: -42px; top: -22px; }

.referral-shape-1-inner { width: 14px; height: 14px; border-radius: 50%; position: absolute; left: 13px; top: 13px; animation: rotateClockwise 2s infinite linear }

.referral-shape-1-inner:after { content: ""; width: 6px; height: 6px; background: rgba(255, 255, 255, .2); position: absolute; left: 0; top: 0; border-radius: 50% }

.referral-shape-2 { width: 40px; height: 40px; border: 1px dashed rgba(255, 255, 255, .15); position: absolute; left: 300px; top: -52px; transform-origin: bottom right; animation: dice 5s infinite ease-in-out }

.referral-shape-3 { width: 60px; height: 20px; border: 1px dashed rgba(255, 255, 255, .15); position: absolute; left: 600px; top: 12px; transform-origin: top right; animation: stretching 2s infinite ease-in-out }

.referral-shape-3-inner { width: 20px; height: 20px; border: 1px dashed rgba(255, 255, 255, .15); position: absolute; right: -30px; top: -1px; transform-origin: top right }

.shape-referral { width: 650px; height: 650px; background-image: url(https://cdn.rocketx.exchange/pd135zq/website/ui/shape-12.webp); background-size: 100%; background-repeat: no-repeat; position: absolute; left: -380px; top: 180px; animation: flicker 2s infinite linear; transform: rotate(0deg); z-index: 11; }

.referral-list { position: relative; width: 100%; color: #FFF; list-style-type: none; padding-top: 150px; }

.referral-list li { width: 33.33333333333%; position: relative; float: left; }

.referral-list li h4 { font-size: 21px; color: #FFF; padding-bottom: 30px; position: relative; display: inline-block; }

.referral-list p { padding: 10px 50px 10px 0; line-height: 34px; font-size: 15px; color: #7D8CA3; background-position: left 15px; background-repeat: no-repeat; background-size: 16px; font-size: 16px }

.referral-list p a:visited { color: #7D8CA3 }

.referral-list .referral-item.not-completed { color: #7D8CA3; background-image: none }

.referral-button-wrapper { display: block; width: 100% }

.referral-button { background-color: #405FFF; border-radius: 4px; padding: 14px 20px; color: #FFF; display: inline-block; margin-top: 50px; font-size: 13px; position: relative; cursor: pointer }

.referral-button:hover { opacity: .8 }

.view-ref-url { width: 100%; height: 100%; position: absolute; border-radius: 4px; right: 0; top: 0; background: #405FFF; background: -webkit-linear-gradient(to left, #405FFF 50%, transparent 100%); background: linear-gradient(to left, #405FFF 20%, transparent 100%) }

.view-ref-url-icon { width: 24px; height: 100%; background-image: url(https://cdn.rocketx.exchange/pd135zq/website/ui/eye.webp); background-size: 24px; background-position: center; background-repeat: no-repeat; position: absolute; right: 15px; top: 0; }

.note-referral { color: #FFF; line-height: 32px; font-size: 13px; color: #7D8CA3; padding-top: 100px; }