@media (min-width: 48em) { .head-block { position: relative; overflow: hidden; padding: 5rem 0px; background: #08111b; } .head-block::before { content: ""; position: absolute; z-index: 1; bottom: -30%; left: -10%; width: 496px; height: 526.57px; border-radius: 526.57px; background: #d63799; -webkit-filter: blur(250px); filter: blur(250px); } .head-block::after { content: ""; position: absolute; z-index: 1; right: -10%; bottom: -30%; width: 320px; height: 500px; -webkit-transform: rotate(27.321deg); -ms-transform: rotate(27.321deg); transform: rotate(27.321deg); border-radius: 500px; background: #ff777e; -webkit-filter: blur(100px); filter: blur(100px); } .head-block__body { position: relative; z-index: 3; display: grid; justify-items: center; } .head-block__title { margin: 0px 0px 3rem 0px; max-width: 59.375rem; text-align: center; } .head-block__text { margin: 0px 0px 3.75rem 0px; font-size: 1.25rem; max-width: 62.5rem; text-align: center; } .head-block__actions { display: grid; gap: 1rem; min-width: 30.3125rem; } .head-block__actions-bottom { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .head-block__coin { position: absolute; z-index: 2; } .head-block__coin_1 { top: 0%; left: 10%; width: unset; } .head-block__coin_2 { bottom: 0%; left: 5%; top: unset; width: unset; } .head-block__coin_3 { bottom: 5%; right: 5%; top: unset; left: unset; width: unset; } } @media (min-width: 48em) { .features-section { position: relative; padding: 5rem 0px; } .features-section__title { margin: 0px 0px 3rem 0px; } .features-section__body { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 2rem; margin: 0px 0px 3.75rem 0px; } .features-section__footer { background: linear-gradient(271deg, #ff894c -2.08%, #ff7d85 43.88%, #d63799 89.84%); border-radius: 1rem; padding: 2rem; display: grid; grid-template-columns: 1fr auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem 2rem; } .features-section-item { display: grid; grid-template-columns: 4rem 1fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem; } .features-section__sub-title { text-align: left; } } @media (min-width: 480px) { .market-chart-section { padding: 40px 0; } .market-chart-section__title { margin-bottom: 22px; } .market-chart__coins, .market-chart__periods { gap: 10px; } .market-chart__coins { margin-bottom: 14px; } .market-chart__coin-tab { font-size: 18px; } .market-chart__period-tab { font-size: 14px; padding: 8px 12px; } .market-chart__graph-wrap { padding-right: 62px; } .market-chart__svg { height: 260px; } .market-chart__right-scale { width: 56px; height: 260px; } .market-chart__right-item { font-size: 11px; } .market-chart__bottom-scale { padding-right: 62px; gap: 8px; } .market-chart__bottom-item { font-size: 11px; } } @media (min-width: 768px) { .market-chart-section { padding: 48px 0; } .market-chart__head { margin-bottom: 22px; } .market-chart__coins { gap: 18px; margin-bottom: 18px; } .market-chart__periods { gap: 12px; } .market-chart__coin-tab { font-size: 22px; } .market-chart__period-tab { font-size: 16px; padding: 9px 14px; border-radius: 10px; } .market-chart__graph-wrap { padding-right: 78px; } .market-chart__svg { height: 320px; } .market-chart__right-scale { width: 68px; height: 320px; } .market-chart__right-item { font-size: 13px; } .market-chart__bottom-scale { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; padding-right: 78px; } .market-chart__bottom-item { font-size: 13px; white-space: nowrap; text-align: left; } } @media (min-width: 1024px) { .market-chart__coin-tab { font-size: 28px; } .market-chart__period-tab { font-size: 22px; padding: 10px 16px; } .market-chart__graph-wrap { padding-right: 100px; } .market-chart__svg { height: 420px; } .market-chart__right-scale { width: 84px; height: 420px; } .market-chart__right-item { font-size: 18px; } .market-chart__bottom-scale { padding-right: 100px; gap: 16px; margin-top: 14px; } .market-chart__bottom-item { font-size: 18px; } } @media (min-width: 48em) { .highlights-section { margin: 5rem 0rem } .highlights-section__title { margin: 0px 0px 3.75rem 0px; } .highlights-section__body { margin: 0px 0px 3.75rem 0px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .highlights-section__footer { background: linear-gradient(271deg, #ff894c -2.08%, #ff7d85 43.88%, #d63799 89.84%); border-radius: 1rem; padding: 2rem; display: grid; grid-template-columns: 1fr auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem 2rem; } .highlights-section-item { display: grid; grid-template-columns: 8.25rem 1fr; gap: 1.5rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .highlights-section__sub-title { text-align: left; } .highlights-section-item__right { display: grid; } } @media (min-width: 48em) { .form-block { padding: 5rem 0px } .form-block__body { padding: 0px 1.875rem; justify-items: stretch } .form-block__text-bg { display: none; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; } .form-block input:nth-of-type(6), .form-block input:nth-of-type(7) { width: 49%; } .text_under_form { font-size: 1rem } .form-block__title { text-align: left; } .form-block-2 { position: relative; overflow: hidden; background: #08111b; padding: 5rem 0px; } .form-block-2::before { content: ""; position: absolute; z-index: 1; top: -10%; left: 0%; width: 186.512px; height: 408px; -webkit-transform: rotate(-29.878deg); -ms-transform: rotate(-29.878deg); transform: rotate(-29.878deg); border-radius: 408px; background: #ff777e; -webkit-filter: blur(100px); filter: blur(100px); } .form-block-2::after { content: ""; position: absolute; z-index: 1; right: 0%; bottom: -10%; width: 445px; height: 257px; -webkit-transform: rotate(-69.045deg); -ms-transform: rotate(-69.045deg); transform: rotate(-69.045deg); border-radius: 445px; background: rgba(214, 56, 153, .3); -webkit-filter: blur(50px); filter: blur(50px); } .form-block-2 .form-block__body { position: relative; z-index: 2; display: grid; gap: 3rem; max-width: 38rem; margin: 0 auto; grid-template-columns: none; } .form-block-2 .form-block__head { display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1.5rem; } .form-block-2 .form-block__title { margin: 0px; } .form-block-2 .form-block__text { font-size: 1.25rem; } .form-block-3 { position: relative; overflow: hidden; padding: 5rem 0px; background: #FFFFFF; } .form-block-3::before { content: ""; position: absolute; z-index: -1; bottom: -10%; right: -10%; width: 445px; height: 257px; -webkit-transform: rotate(-69.045deg); -ms-transform: rotate(-69.045deg); transform: rotate(-69.045deg); border-radius: 445px; background: rgba(214, 56, 153, .3); -webkit-filter: blur(100px); filter: blur(100px); } .form-block-3 .form-block__body { position: relative; z-index: 2; display: grid; gap: 3rem; max-width: unset; margin: 0 auto; grid-template-columns: none; padding: 0; } .form-block-3 .form-block__body:not(:has(.form-block__left)) { max-width: 38rem; } .form-block-3 .form-block__head { gap: 1.5rem } .form-block-3 .form-block__title { margin: 0px; } .form-block-4 .form-block__text { text-align: left; } .form-block-3 .form-block__label { font-size: 1.25rem } .form-block-3:has(.form-block__left) .form-block__title { text-align: left; } } @media (min-width: 75.0625em) { .form-block__body { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .form-block__left { gap: 2rem; } .form-block-4 .form-block__body { padding: 0px; grid-template-columns: repeat(2, 1fr) } }