*, :before, :after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-family: 'PT Sans', sans-serif;
    font-size: 16px;
    background: #FFFFFF;
    webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.container {
    max-width: 1290px;
    width: 100%;
    margin: 0 auto;
    padding: 0 30px;
}

h1 {
    font-family: PT Sans, sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 120%;
    letter-spacing: 0;
    text-align: center;
    color: #F3F4F5;
    max-width: 950px;
}

h2 {
    font-family: PT Sans, sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: center;
    color: #2B2B38;
}

h2.white {
    color: #F3F4F5;
}

h3 {
    font-family: Rubik, sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 140%;
    letter-spacing: 0;
    text-align: center;
    color: #F0F0F0;
}

.subtitle {
    font-family: PT Sans, sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 120%;
    letter-spacing: 0;
    text-align: center;
    color: #F3F4F5;
}

.text {
    font-family: PT Sans, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0;
    text-align: center;
    color: #2B2B38;
}

.text.gray {
    color: #F3F4F5;
}

.text.big {
    font-size: 18px;
}

.text.small {
    font-size: 12px;
    line-height: 120%;
    color: #7B7B80;
}

.btn {
    background: #FCE88D;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 24px;
    border-radius: 20px;
    width: 100%;

    font-family: Inter, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0;
    text-align: center;
    color: #2B2B38;
    border: none;
    transition: .1s all linear;
    cursor: pointer;
}

.btn:hover {
    transform: scale(1.005);
}

.btn.black {
    background: #403E41;
    color: #FDE47F;
}

section.first-screen {
    background: url("../img/first-screen-bg.png") center center/cover no-repeat;
    padding: 90px 0 110px 0;
}

section.first-screen .first-screen-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

section.first-screen .content-wrapper {
    margin-top: 12px;
    display: flex;
    gap: 64px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

section.first-screen .content-wrapper .content-item {
    max-width: 366px;
    width: 100%;
}

section.first-screen .content-wrapper .content-item.gift-item {
    background: #12121C;
    border-radius: 40px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

section.first-screen .content-wrapper .content-item.gift-item .text {
    color: #7B7B80;
}

section.first-screen .content-wrapper .content-item.details-item {
    background: #2B2B38;
    border: 5px solid #12121C;
    border-radius: 32px;
    height: 305px;
    padding: 20px;
}

section.first-screen .content-wrapper .content-item.details-item .card {
    max-width: 326px;
    width: 100%;
    border-radius: 30px;
    margin: 0 auto;
}

section.first-screen .content-wrapper .content-item.details-item .card .card-header-content {
    background: linear-gradient(265.33deg, #F8B37A 3.3%, #F8F2B6 119.25%);
    border-radius: 30px 30px 0 0;
    padding: 20px 20px 8px 20px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: flex-start;
}

section.first-screen .content-wrapper .content-item.details-item .card .card-header-content .balance-text {
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 13.37px;
    line-height: 120%;
    letter-spacing: 0;
    color: #7B7B80;
    margin-bottom: 8px;
}

section.first-screen .content-wrapper .content-item.details-item .card .card-header-content .balance-amount {
    font-family: Rubik, sans-serif;
    font-weight: 700;
    font-size: 30.57px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: center;
    color: #3B3B4A;
}

section.first-screen .content-wrapper .content-item.details-item .card .card-header-content .card-header-buttons {
    display: flex;
    gap: 8px;
}

section.first-screen .content-wrapper .content-item.details-item .card .card-header-content .card-header-buttons button {
    background: transparent;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 30px;
}

section.first-screen .content-wrapper .content-item.details-item .card .card-footer-content {
    background: #3B3B4A;
    border-radius: 0 0 30px 30px;
    padding: 20px;
}

section.first-screen .content-wrapper .content-item.details-item .card .card-footer-content .text {
    text-align: left;
}

section.first-screen .content-wrapper .content-item.details-item .card .card-footer-content .wrapper {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

section.first-screen .content-wrapper .content-item.details-item .card .card-footer-content .wrapper .crypto-address {
    user-select: text;
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 13.37px;
    line-height: 120%;
    letter-spacing: 0;
    overflow-wrap: break-word;
    max-width: 240px;
    width: 100%;
    color: #FCE88D;
}

section.first-screen .content-wrapper .content-item.details-item .card .card-footer-content .wrapper button {
    background: transparent;
    border: none;
    cursor: pointer;
    width: 22px;
    height: 22px;
    margin-top: -5px;
}

section.first-screen .content-wrapper .content-item.details-item .buttons-wrapper {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

section.first-screen .content-wrapper .content-item.details-item .buttons-wrapper button {
    max-width: 155px;
    height: 59px;
    font-size: 15px;
    padding: 11px;
}

section.first-screen .content-wrapper .content-item.calc-item {
    background: #12121C;
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 440px;
}

section.first-screen .content-wrapper .content-item.calc-item .tariff-name {
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 13.21px;
    line-height: 120%;
    letter-spacing: 0;
    text-align: center;
    color: #7B7B80;
    margin-bottom: 16px;
}

section.first-screen .content-wrapper .content-item.calc-item .inputs-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 16px;
}

input[type=text] {
    background: transparent;
    font-family: Rubik, sans-serif;
    font-weight: 500;
    font-size: 30.18px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: center;
    width: 100%;
    margin-bottom: 12px;
    color: #FCE88D;
    outline: none;
    border: none;
}

input[type=text]::placeholder {
    font-family: Rubik, sans-serif;
    font-weight: 500;
    font-size: 30.18px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: center;
    color: #FCE88D;
}

/* Base reset for all range inputs */
input[type=range] {
    width: 100%;
    border-radius: 15px;
    height: 30px;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    margin: 0;
    padding: 0;
}

/* Webkit browsers (Chrome, Safari, Edge) */
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 30px;
    background: linear-gradient(to right, #FDE47F 0% var(--progress, 50%),
    transparent var(--progress, 50%) 100%),
    url("../img/input-range-bg.svg") center/cover;
    border-radius: 15px;
    border: none;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 5px;
    height: 36px;
    bottom: 3px;
    position: relative;
    background: #C69F00;
    border-radius: 7px;
    cursor: pointer;
}

/* Firefox */
input[type=range]::-moz-range-track {
    width: 100%;
    height: 30px;
    background: linear-gradient(to right, #FDE47F 0% var(--progress, 50%),
    transparent var(--progress, 50%) 100%),
    url("../img/input-range-bg.svg") center/cover;
    border-radius: 15px;
    border: none;
}

input[type=range]::-moz-range-thumb {
    width: 5px;
    height: 35px;
    background: #C69F00;
    bottom: 3px;
    position: relative;
    border-radius: 7px;
    cursor: pointer;
}

/* IE */
input[type=range]::-ms-track {
    width: 100%;
    height: 30px;
    background: linear-gradient(to right, #FDE47F 0% var(--progress, 50%),
    transparent var(--progress, 50%) 100%),
    url("../img/input-range-bg.svg") center/cover;
    border-color: transparent;
    color: transparent;
}

input[type=range]::-ms-fill-lower {
    background: linear-gradient(265.33deg, #FDE47F 3.3%, #F8F2B6 119.25%);
    border-radius: 15px;
    border: none;
}

input[type=range]::-ms-fill-upper {
    background: gray;
    border-radius: 15px;
    border: none;
}

input[type=range]::-ms-thumb {
    width: 5px;
    height: 35px;
    background: #C69F00;
    bottom: 3px;
    position: relative;
    border-radius: 7px;
    cursor: pointer;
}

section.first-screen .content-wrapper .content-item.calc-item .tariff-name span {
    color: #FCE88D;
}

section.first-screen .content-wrapper .content-item.calc-item .calculator {
    background: #2B2B38;
    padding: 24px;
    border-radius: 36px;
}

section.first-screen .content-wrapper .content-item.calc-item .calculator-details {
    background: #2B2B38;
    padding: 24px;
    border-radius: 36px;
}

section.first-screen .content-wrapper .content-item.calc-item .calculator-details ul {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

section.first-screen .content-wrapper .content-item.calc-item .calculator-details ul li {
    display: flex;
    justify-content: space-between;
}

section.first-screen .content-wrapper .content-item.calc-item .calculator-details ul li .name {
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 15.09px;
    line-height: 120%;
    letter-spacing: 0;
    color: #63636B;
}

section.first-screen .content-wrapper .content-item.calc-item .calculator-details ul li .value {
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 15.09px;
    line-height: 120%;
    letter-spacing: 0;
    color: #F0F0F0;
}

section.safety {
    background: #F3F4F5;
    padding: 110px 0;
}

section.safety .safety-wrapper {
    max-width: 950px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

section.what-you-can-do {
    background: #12121C;
    padding: 110px 0;
}

section.what-you-can-do .what-you-can-do-wrapper {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 64px;
    align-items: center;
}

section.what-you-can-do .what-you-can-do-wrapper ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 80px;
}

section.what-you-can-do .what-you-can-do-wrapper ul li {
    max-width: 182px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}

section.what-you-can-do .what-you-can-do-wrapper ul li .text {
    color: #F3F4F5;
    text-align: left;
    opacity: .9;
}


section.what-you-can-do .btn {
    background: linear-gradient(265.33deg, #F8B37A 3.3%, #F8F2B6 119.25%);
    height: 48px;
    max-width: 262px;
    gap: 14px;
}

section.safety {
    padding-top: 120px;
}

section.support {
    padding-top: 120px;
}

section.support .support-wrapper {
    display: flex;
    gap: 80px;
}

section.support .support-wrapper .support-contacts {
    max-width: 395px;
    width: 100%;
    background: url("../img/support-phone-bg.png");
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

section.support .tel {
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0;
    color: #F0F0F0;
}

section.support .support-wrapper .support-contacts .contact-item-wrapper {
    width: 100%;
    border: 1px dashed #3B3B4A;
    border-radius: 20px;
    padding: 14px;
    display: flex;
    gap: 12px;
    align-items: center;
    cursor: pointer;
}

section.support h2 {
    margin-bottom: 16px;
}

section.support .safety {
    margin-top: 80px;
    display: flex;
    gap: 16px;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
}

section.support .safety .text {
    display: flex;
    text-align: left;
    font-size: 18px;
    color: #2B2B38;
    font-weight: 700;
    align-items: center;
    gap: 16px;
}

section.support .support-wrapper .support-contacts .contact-item-wrapper .contact-name {
    font-family: Rubik, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0;
    color: #F0F0F0;
}

section.support .support-wrapper .support-contacts .contact-item-wrapper .wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

section.support .support-wrapper .support-contacts h3 {
    text-align: left;
    margin-bottom: 16px;
}

section.support .support-wrapper .btn {
    margin-top: 16px;
}

footer {
    background: #12121C;
    padding: 62px 0 80px 0;
}

footer .footer-wrapper {
    display: flex;
    width: 254px;
    justify-content: center;
    margin: 0 auto;
    gap: 32px;
}

footer .footer-wrapper .wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #F3F4F5;
    font-family: PT Sans, sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 27px;
    letter-spacing: 0;
}

footer .footer-wrapper .wrapper .tel {
    font-family: PT Sans, sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0;
    color: #F3F4F5;
}

footer .all-rights-reserved {
    font-family: PT Sans, sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 120%;
    letter-spacing: 0;
    text-align: center;
    vertical-align: middle;
    color: #8399AE;
    margin-top: 64px;
}

section.support .support-wrapper .support-contacts .contact-item-wrapper .wrapper .text {
    text-align: left;
}