:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
    all: unset;
    display: revert
}

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

ol,
ul {
    list-style: none
}

table {
    border-collapse: collapse
}

textarea {
    white-space: revert
}

html {
    box-sizing: border-box;
    font-size: 100%
}

body {
    font-family: var(--default-font-style);
    font-size: var(--default-font-size);
    margin: 0;
    overflow-x: hidden;
    padding: 0
}

:root {
    --default-font-style: "Poppins", sans-serif;
    --default-font-size: 18px;
    --cyan: #2acfcf;
    --white: #fff;
    --dark-violet: #3b3054;
    --light-gray: #eff0f5;
    --red: #f46262;
    --gray: #bfbfbf;
    --grayish-violet: #9e9aa7;
    --very-dark-blue: #35323e;
    --vary-dark-violet: #232127
}

.footer__wrapper {
    background-color: var(--vary-dark-violet);
    padding: 3.5rem 0
}

.footer__content {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center
}

@media (min-width:48em) {
    .footer__content {
        align-items: start;
        flex-direction: row;
        justify-content: space-between;
        text-align: left
    }

    .footer__content.--second {
        max-width: 750px;
        width: 100%
    }
}

.footer__logo {
    margin-bottom: 2rem
}

.footer__nav {
    font-size: 16px;
    line-height: 2
}

@media (min-width:48em) {
    .footer__nav {
        display: flex;
        justify-content: space-between;
        margin: 0 2rem;
        width: 65%
    }
}

@media (min-width:80em) {
    .footer__nav {
        margin: 0
    }
}

.footer__heading>h4 {
    color: var(--white);
    font-weight: 900;
    margin-bottom: 1rem
}

.footer__unordered {
    color: var(--grayish-violet);
    margin-bottom: 2rem
}

.footer__social {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    width: 180px
}

@media (min-width:48em) {
    .footer__social {
        margin-top: 0
    }

    .header__container {
        display: flex
    }
}

.header__wrapper {
    background-color: var(--white);
    position: relative
}

.header__item {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 2rem 0
}

@media (min-width:48em) {
    .header__item-image {
        margin-right: .5rem
    }
}

@media (min-width:80em) {
    .header__item-image {
        margin-right: 2rem
    }
}

.header__item-image>a {
    display: flex
}

.header__item-button {
    cursor: pointer
}

@media (min-width:48em) {
    .header__item-button {
        display: none
    }
}

.header__item-button .bar {
    background-color: var(--grayish-violet);
    display: block;
    height: 3px;
    margin: 5px auto;
    transition: all .3s linear;
    width: 25px
}

.header__item-button.is_active>.bar:nth-child(2) {
    opacity: 0
}

.header__item-button.is_active>.bar:first-child {
    transform: translateY(8px) rotate(45deg)
}

.header__item-button.is_active>.bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg)
}

.header__nav {
    background-color: var(--dark-violet);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    left: 0;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    position: absolute;
    right: 0;
    text-align: center;
    transform: translateY(-150%);
    transition: transform .3s ease-in-out
}

@media (min-width:48em) {
    .header__nav {
        background: none;
        position: relative;
        text-align: left;
        transform: none;
        width: 100%
    }
}

.header__nav-menu {
    padding: 2rem 0;
    width: 80%
}

@media (min-width:48em) {
    .header__nav-menu {
        width: 100%
    }

    .header__nav-unordered {
        display: flex;
        justify-content: space-between
    }
}

.header__nav-section {
    line-height: 3
}

@media (min-width:48em) {
    .header__nav-section {
        display: flex;
        justify-content: space-between;
        max-width: 300px;
        width: 100%
    }
}

.header__nav-list:nth-child(3) {
    padding-bottom: 1rem
}

@media (min-width:48em) {
    .header__nav-list:nth-child(3) {
        padding-bottom: 0
    }
}

.header__nav-register {
    border-top: 1px solid hsla(258, 7%, 63%, .2);
    line-height: 3
}

@media (min-width:48em) {
    .header__nav-register {
        border: none;
        display: flex;
        justify-content: space-between;
        max-width: 180px;
        padding-bottom: 0;
        width: 100%
    }
}

@media (min-width:80em) {
    .header__nav-register {
        max-width: 230px
    }
}

.header__nav-register>.header__nav-list:last-child {
    background-color: var(--cyan);
    border-radius: 50px;
    cursor: pointer;
    margin: .5rem 0
}

@media (min-width:48em) {
    .header__nav-register>.header__nav-list:last-child {
        color: var(--white);
        margin: 0;
        padding: 0 1.5rem
    }
}

@media (min-width:80em) {
    .header__nav-register>.header__nav-list:last-child {
        padding: 0 1.875rem
    }
}

@media (min-width:48em) {
    .header__nav-register>.header__nav-list:last-child>.header__nav-anchor {
        color: var(--white)
    }
}

.header__nav-list>.header__nav-anchor {
    color: var(--white);
    cursor: pointer;
    font-size: var(--default-font-size);
    font-weight: 700
}

@media (min-width:48em) {
    .header__nav-list>.header__nav-anchor {
        color: var(--grayish-violet)
    }
}

.header__nav.is_active {
    transform: translateY(0);
    transition: transform .3s ease-in-out
}

.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.35rem;
    padding-right: 1.35rem;
    width: min(80rem, 100%)
}

@media (min-width:48em) {
    .container {
        padding-left: 2.5rem;
        padding-right: 2.5rem
    }
}

.card__wrapper {
    background-color: var(--light-gray);
    padding: 5rem 0
}

.card__title {
    margin-bottom: 1rem;
    text-align: center
}

.card__title>h2 {
    color: var(--very-dark-blue);
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 900;
    letter-spacing: -1px
}

.card__paragraph {
    margin-bottom: 5rem;
    text-align: center
}

.card__paragraph>p {
    color: var(--grayish-violet);
    font-size: 16px;
    line-height: 1.75;
    text-align: center
}

.card__content {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center
}

@media (min-width:48em) {
    .card__content {
        align-items: baseline;
        flex-direction: row;
        justify-content: space-between
    }
}

.card__item {
    align-items: center;
    background-color: var(--white);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    margin-bottom: 5rem;
    padding: 2rem 1.5rem;
    position: relative;
    text-align: center
}

@media (min-width:48em) {
    .card__item {
        align-items: baseline;
        padding: 2rem;
        text-align: left;
        width: 32%
    }
}

.card__item-icon {
    height: 50px;
    padding: .25rem;
    width: 50px
}

.card__item-icon.--wrapper {
    align-items: center;
    background-color: var(--dark-violet);
    border-radius: 50%;
    display: flex;
    height: 80px;
    justify-content: center;
    position: absolute;
    top: -40px;
    width: 80px
}

.card__item-title {
    color: var(--very-dark-blue);
    font-size: clamp(16px, 2vw, 28px);
    font-weight: 900;
    margin-bottom: 1rem;
    margin-top: 3rem
}

.card__item-paragraph {
    color: var(--grayish-violet);
    font-size: 16px;
    line-height: 1.75
}

@media (min-width:48em) {
    .card__item:nth-child(2) {
        transform: translateY(50px)
    }
}

.card__item:last-child {
    margin-bottom: 3.5rem
}

@media (min-width:48em) {
    .card__item:last-child {
        transform: translateY(100px)
    }
}

.card__item:after {
    background-color: var(--cyan);
    bottom: -80px;
    content: "";
    height: 80px;
    position: absolute;
    width: 8px
}

@media (min-width:48em) {
    .card__item:after {
        height: 8px;
        right: -80px;
        top: 50%;
        width: 80px
    }
}

.card__item:last-child:after {
    display: none
}

.cta__wrapper {
    background: url("../assets/images/desktop/bg-boost-desktop.svg"), var(--dark-violet);
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 5rem 0
}

.cta__title {
    text-align: center
}

.cta__title>h2 {
    color: var(--white);
    font-size: clamp(28px, 4vw, 56px);
    font-weight: 900
}

.cta__button {
    display: flex;
    justify-content: center;
    margin-top: 1rem
}

.cta__button>button {
    background-color: var(--cyan);
    border-radius: 50px;
    color: var(--white);
    font-weight: 700;
    padding: .875rem 2.25rem
}

.banner__wrapper {
    padding-bottom: 5rem
}

@media (min-width:48em) {
    .banner__container {
        align-items: center;
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        margin-top: 1.5rem
    }
}

.banner__image {
    margin-bottom: 2.5rem;
    position: relative;
    width: 100%;
    z-index: -1
}

@media (min-width:48em) {
    .banner__image {
        left: 100px;
        margin-bottom: 0
    }
}

.banner__image>img {
    height: 100%;
    width: 450px
}

@media (min-width:30em) {
    .banner__image>img {
        width: 100%
    }
}

.banner__content {
    text-align: center
}

@media (min-width:48em) {
    .banner__content {
        text-align: left
    }
}

.banner__title {
    margin-bottom: 1rem
}

.banner__title>h1 {
    color: var(--very-dark-blue);
    font-size: clamp(40px, 5vw, 72px);
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1.2
}

.banner__paragraph {
    margin-bottom: 2rem
}

.banner__paragraph>p {
    color: var(--grayish-violet);
    line-height: 1.75
}

.banner__cta {
    display: flex;
    justify-content: center
}

@media (min-width:48em) {
    .banner__cta {
        justify-content: start
    }
}

.banner__cta>button {
    background-color: var(--cyan);
    border-radius: 50px;
    color: var(--white);
    font-weight: 700;
    padding: .875rem 2.25rem
}

.shorten {
    position: relative;
    width: 100%
}

.shorten__wrapper {
    background: linear-gradient(1turn, var(--light-gray) 57%, var(--white) 50%)
}

.shorten__container {
    position: relative;
    background: url("../assets/images/mobile/bg-shorten-mobile.svg") right 0, var(--dark-violet);
    background-repeat: no-repeat;
    border-radius: 10px;
    padding: 1.5rem
}

@media (min-width:48em) {
    .shorten__container {
        background: url("../assets/images/desktop/bg-shorten-desktop.svg") right 0, var(--dark-violet);
        background-size: cover
    }

    .shorten__form {
        align-items: center;
        display: flex;
        justify-content: space-between;
        padding: 1.5rem .5rem;
    }
}

.shorten__form>input {
    background-color: var(--white);
    border-radius: 10px;
    font-size: var(--default-font-size);
    margin-bottom: 1rem;
    padding: .875rem 1rem;
    width: 100%
}

.shorten-form__input {
  border: 1px transparent solid;
}

.shorten-form__input.is_null {
  border: 1px var(--red) solid;
}

@media (min-width:48em) {
    .shorten__form>input {
        margin-bottom: 0;
        padding: 1.5rem 1rem;
        width: 78%
    }
}

.shorten__btn {
    background-color: var(--cyan);
    border-radius: 10px;
    cursor: pointer;
    padding: .875rem 0;
    text-align: center
}

@media (min-width:48em) {
    .shorten__btn {
        padding: 1.5rem 0;
        width: 20%
    }
}

.shorten__btn>button {
    color: var(--white);
    font-weight: 900
}

.shorten__error {
    color: var(--red);
    display: none;
    font-style: italic
}

@media (min-width:48em) {
  .shorten__error.is_null {
    display: block;
    position: absolute;
    bottom: 15px;
  }
}

.copied {
    transition: all .3s linear;
    background-color: var(--light-gray);
    padding-top: 1rem
}

.copied__content:first-child {
    margin-top: 0
}

.copied__content {
    transition: all .3s linear;
    background-color: var(--white);
    border-radius: 10px;
    margin-top: 1rem;
    padding: 1.5rem;
    text-align: center
}

.copied__link.--original {
    border-bottom: 1px solid var(--light-gray);
    color: var(--dark-violet);
    padding-bottom: 1rem
}

.copied__link.--shorten {
    color: var(--cyan);
    padding: 1rem 0
}

.copied__btn {
    background-color: var(--cyan);
    border-radius: 10px;
    color: var(--white);
    cursor: pointer;
    padding: .75rem 1rem;
    text-align: center;
    width: 100%
}