:root {
    --font-main: "ClashGrotesk-Variable", sans-serif;

    --color-black: #000;
    --color-white: #fff;
    --color-main: #2B2B2B;

    --color-neutral-10: #F2F2F2;
    --color-neutral-100: #E7E7E7;
    --color-neutral-150: #D9D9D9;
    --color-neutral-200: #CCCCCC;
    --color-neutral-300: #B3B3B3;
    --color-neutral-400: #999999;
    --color-neutral-500: #808080;
    --color-neutral-600: #575757;
    --color-neutral-700: #3B3B3B;
    --color-neutral-800: #2B2B2B;
    --color-neutral-900: #1C1C1C;

    --color-purple-10: #EFE7FD;
    --color-purple-50: #E4D8FD;
    --color-purple-100: #D6C4FC;
    --color-purple-200: #BFA3FB;
    --color-purple-300: #9C71F9;
    --color-purple-400: #7A40F7;
    --color-purple-500: #5F19F5;
    --color-purple-600: #4709CD;
    --color-purple-700: #3807A1;
    --color-purple-800: #25056C;
    --color-purple-900: #130236;

    --color-orange-10: #FFF6F0;
    --color-orange-50: #FFF0E5;
    --color-orange-100: #FFE7D6;
    --color-orange-200: #FFCAA3;
    --color-orange-300: #FFAD70;
    --color-orange-400: #FF8F3D;
    --color-orange-500: #FF6C00;
    --color-orange-600: #CC5600;
    --color-orange-700: #994100;
    --color-orange-800: #662B00;
    --color-orange-900: #331600;

    --color-brown-10: #FBF8F4;
    --color-brown-50: #EEEBE7;
    --color-brown-100: #E8E1D9;
    --color-brown-200: #DCD3C6;
    --color-brown-300: #C9BAA6;
    --color-brown-400: #B5A387;
    --color-brown-500: #A28A67;
    --color-brown-600: #857051;
    --color-brown-700: #65563E;
    --color-brown-800: #453A2B;
    --color-brown-900: #262017;


    --color-green-10: #F3FCFB;
    --color-green-50: #E2F8F5;
    --color-green-100: #CFF1EE;
    --color-green-200: #A7E6DF;
    --color-green-300: #80DBD1;
    --color-green-400: #58D0C2;
    --color-green-500: #30C5B4;
    --color-green-600: #1CA595;
    --color-green-700: #157A6E;
    --color-green-800: #0D4E47;
    --color-green-900: #06231F;

    --color-pink-10:  #FFF0FF;
    --color-pink-50:  #FFE5FF;
    --color-pink-100: #FFD6FE;
    --color-pink-200: #FFABFE;
    --color-pink-300: #FF7AFD;
    --color-pink-400: #FF47FC;
    --color-pink-500: #FF14FB;
    --color-pink-600: #E000DD;
    --color-pink-700: #AD00AA;
    --color-pink-800: #7A0078;
    --color-pink-900: #470046;

    --color-error-10:  #F5E7E7;
    --color-error-500:  #CA8686;
    --color-error-700: #B65656;
    --color-error-1000: #960D0D;

    --base-transition: all .2s ease-in-out;
    --base-transition-2: all .3s ease-in-out;
    --base-transition-3: all .5s ease-in-out;
    --menu-transition: opacity 0.3s ease, visibility 0.3s ease;
    --menu-transition-alt: opacity 0.3s ease, visibility 0.3s ease, height 0.4s ease, width 0.4s ease;
}

body {
    font-family: var(--font-main);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-main);
}
a:hover{
    color: inherit;
}
img {max-width: 100%;}
.pos-relative {position: relative;}

.pt-24{padding-top: 24px}

.mrb-4 {margin-bottom: 4px}
.mb-8 {margin-bottom: 8px}
.mb-12 {margin-bottom: 12px}
.mb-16 {margin-bottom: 16px}
.mb-20 {margin-bottom: 20px}
.mb-24 {margin-bottom: 24px}
.mb-28 {margin-bottom: 28px}
.mb-32 {margin-bottom: 32px}
.mb-40 {margin-bottom: 40px}
.mb-48 {margin-bottom: 48px}

.mt-40 {margin-top: 40px}
.mt-auto{margin-top: auto}
.mb-32-40,.mb-32-56,.mb-32-56 {margin-bottom: 32px}
.mb-24-40{margin-bottom: 24px}
.mt-32-40 {margin-top: 32px}
.gap-4{gap: 4px}
.gap-8{gap: 8px}
.gap-12{gap: 12px}
.gap-16{gap: 16px}
.gap-24{gap: 24px}
.gap-32{gap: 32px}


.column-24{column-gap: 24px}
.column-16{column-gap: 16px}
.column-12{column-gap: 12px}
.column-8{column-gap: 8px}
.column-4{column-gap: 4px}

.row-4{row-gap: 4px}
.row-8{row-gap: 8px}
.row-12{row-gap: 12px}
.row-16{row-gap: 16px}
.row-24{row-gap: 24px}
.row-32{row-gap: 32px}
.row-40{row-gap: 40px}
.row-40-24{row-gap: 24px}

.w-100{width: 100%}
.btn {
    font-family: var(--font-main-600);
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-white);
    padding: 10px 16px;
    border-radius: 8px;
    transition: var(--base-transition);
    text-decoration: none;
    box-shadow: none;
    outline: none;
    text-align: center;
    letter-spacing: 0;
    display: inline-flex;
    justify-content: center;
}

.btn.btn-grey {
    border: 1px solid var(--color-neutral-700);
    background: var(--color-neutral-800);
}

.btn.btn-purple {
    border: 1px solid var(--color-purple-600);
    background: var(--color-purple-500);
}

.btn.btn-grey:hover {
    background: var(--color-neutral-700);
    border-color: var(--color-neutral-700);
    color: var(--color-white);
    border-radius: 50px;
}

.btn.btn-purple:hover {
    background: var(--color-purple-600);
    border-color: var(--color-purple-600);
    color: var(--color-white);
    border-radius: 50px;
}

.section-b-t {
    border-top: 1px solid var(--color-neutral-200);
}

.section-b-b {
    border-bottom: 1px solid var(--color-neutral-200);
}

.btn.btn-light {
    padding: 10px;
    background: var(--color-purple-50);
    border: 1px solid var(--color-purple-200);
    color: var(--color-purple-500);
}
.btn.btn-light:hover{
    background: var(--color-purple-100);
    border-radius: 50px;
}
.btn.btn-l{
    padding: 12px 32px;
}
.btn.btn-m{
    padding: 12px 16px;
}
.btn.btn-s{
    padding: 8px 16px;
}
.btn.btn-xs{
    padding: 6px 16px;
}
.btn.btn-white {
    background: var(--color-white);
    border: 1px solid var(--color-white);
    color: var(--color-purple-500);
}
.btn.btn-white:hover{
    border-radius: 50px;
    background: var(--color-purple-10);
    border-color: var(--color-purple-10);
}
.btn-arrow{
    display: inline-flex;
    align-items: center;
    column-gap: 8px;
    text-decoration: none;

}
.btn-arrow span{
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-white);
}
.btn-arrow i[class*='pm-'],
.btn-arrow i{
    width: 40px;
    height: 40px;
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: var(--base-transition);
}
.btn-arrow.btn-arrow-l i[class*='pm-'],
.btn-arrow.btn-arrow-l i{
    width: 50px;
    height: 50px;
}


.btn-arrow i:before{
    color: var(--color-purple-500);
}

.ml-auto{
    margin-left: auto;
}
.text-center{
    text-align: center;
}
.btn-arrow:hover i{
    border-radius: 50px;
    background: var(--color-purple-10);
}
.btn-arrow.btn-arrow-purple span{
    color: var(--color-purple-500);
}
.btn-arrow.btn-arrow-purple i[class*='pm-'], .btn-arrow i{
    color: var(--color-purple-500);
    background: var(--color-purple-50);
    border: 1px solid var(--color-purple-200);
}
.btn-arrow.btn-arrow-purple:hover i[class*='pm-'], .btn-arrow i{
    background: var(--color-purple-100);
}

.btn-arrow.btn-arrow-neutral span{
    color: var(--color-black);
}
.btn-arrow.btn-arrow-neutral i[class*='pm-']{
    color: var(--color-black);
}
.btn-arrow.btn-arrow-neutral i[class*='pm-']{
    border: 1px solid var(--color-neutral-200);
    background:  var(--color-neutral-10);

}
.btn-arrow.btn-arrow-neutral:hover i[class*='pm-']{
    background: var(--color-neutral-100);
}

.btn-arrow.btn-arrow-brown span{
    color: var(--color-brown-800);
}
.btn-arrow.btn-arrow-brown i[class*='pm-']:before{
    color: var(--color-brown-800);
}
.btn-arrow.btn-arrow-brown i[class*='pm-']{
    border: 1px solid var(--color-brown-300);
    background:  var(--color-brown-200);

}
.btn-arrow.btn-arrow-brown:hover i[class*='pm-']{
    background: var(--color-brown-300);
}






.btn-square{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-neutral-200);
    background:  var(--color-neutral-10);
    border-radius: 8px;
    transition: var(--base-transition);
    flex-shrink: 0;
}
.btn-square i:before{
    font-size: 16px;
    line-height: 16px;
    color: var(--color-black);
}
.btn-square.btn-square-l{
    width: 48px;
    height: 48px;
}
.btn-square.btn-square-s{
    width: 36px;
    height: 36px;
}
.btn-square.btn-square-icon-l i:before{
    font-size: 24px;
    line-height: 24px;
}
.btn-square:hover{
    background: var(--color-neutral-100);
}
.btn-square.btn-square-purple{
    border-color: var(--color-purple-200);
    background: var(--color-purple-50);
}
.btn-square.btn-square-purple i:before{
    color: var(--color-purple-500);
}
.btn-square.btn-square-purple:hover{
    background: var(--color-purple-100);
}


.btn-square.btn-square-brown{
    border-color: var(--color-brown-300);
    background: var(--color-brown-200)
}
.btn-square.btn-square-brown i:before{
    color: var(--color-brown-800);
}
.btn-square.btn-square-brown:hover{
    background: var(--color-brown-300);
}

.btn-circle{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-neutral-200);
    background:  var(--color-neutral-10);
    border-radius: 50px;
    transition: var(--base-transition);
    flex-shrink: 0;
}
.btn-circle:hover{
    background: var(--color-neutral-100);
    cursor: pointer;
}
.tag-link{
    padding: 8px 16px;
    border-radius: 4px;
    background: var(--color-neutral-10);
    border: 1px solid var(--color-neutral-200);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-main);
    transition: var(--base-transition);
    text-decoration: none;
}
.tag-link:hover{
    border-color: var(--color-green-300);
    background: var(--color-green-50);
    color: var(--color-green-800);
    border-radius: 50px;
}

.tag-link-dot{
    padding: 8px 32px 8px 12px;
    border-radius: 50px;
    background: var(--color-white);
    position: relative;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-black);
    text-decoration: none;
}
.tag-link-dot:after{
    width: 4px;
    height: 4px;
    border-radius: .5px;
    background: var(--color-purple-500);
    content: "";
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: calc(50% - 2px);
    transition: var(--base-transition);
    z-index: 15;
    font-size: 0px;
    line-height: 0px;
    right: 16px;
}
.tag-link-dot:hover{
    color: var(--color-purple-500);
}
.tag-link-dot:hover:after{
    content: '\0057';
    font-family: 'plusonemoving';
    font-size: 8px;
    line-height: 8px;
    color: var(--color-purple-500);
    background: none;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6{
    color: var(--color-black);
    font-weight: 500;
}
h6, .h6{
    font-weight: 400;
}
h1, .h1{
    font-size: 48px;
    line-height: 48px;
}
h2, .h2{
    font-size: 40px;
    line-height: 40px;
}
h3, .h3{
    font-size: 36px;
    line-height: 36px;
}
h4, .h4{
    font-size: 24px;
    line-height: 32px;
}
h5, .h5, h6, .h6{
    font-size: 20px;
    line-height: 26px;
}

.text-l-m, .text-l, .text-m-m, .text-m, .text-s-m, .text-s, .text-xs-m, .text-xs{
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    color: var(--color-main);
    display: inline-block;
}
.text-l, .text-m, .text-s, .text-xs{
    font-weight: 400;
}
.text-l-m, .text-l{
    font-size: 18px;
    line-height: 24px;
}
.text-m-m, .text-m{
    font-size: 16px;
    line-height: 24px;
}
.text-s-m, .text-s{
    font-size: 14px;
    line-height: 20px;
}
.text-xs-m, .text-xs{
    font-size: 12px;
    line-height: 18px;
}
.text-cta, .text-cta-m{
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-black);
}
.text-cta{
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
}
.caption{
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    color: var(--color-black);
    text-transform: uppercase;
}
.text-uppercase{
    text-transform: uppercase;
}
.section-mb{
    margin-bottom: 48px;
}
.section-pt{
    padding-top: 48px;
}
.section-pb{
    padding-bottom: 48px;
}

.border-v.border-neutral:after,
.border-v.border-neutral:before {
    background: var(--color-neutral-200);
}
.border-v.border-brown:after,
.border-v.border-brown:before {
    background: var(--color-brown-300);
}
.border-v.border-purple:after,
.border-v.border-purple:before {
    background: var(--color-purple-200);
}
.border-v.border-pink:after,
.border-v.border-pink:before {
    background: var(--color-pink-200);
}
.border-v.border-green:after,
.border-v.border-green:before {
    background: var(--color-green-300);
}
.border-v.border-orange:after,
.border-v.border-orange:before {
    background: var(--color-orange-200);
}
.dot-arrow{
    position: relative;
}
.dot-arrow:after{
    width: 4px;
    height: 4px;
    border-radius: .5px;
    background: var(--color-purple-500);
    content: "";
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: calc(50% - 2px);
    transition: var(--base-transition);
    z-index: 15;
    font-size: 0px;
    line-height: 0px;
}
.dot-arrow:hover:after{
    content:'\0057';
    font-family: 'plusonemoving';
    font-size: 6px;
    line-height: 6px;
    color:var(--color-purple-500);
    background: none;
}

.check-icon{
    width: 24px;
    height: 24px;
    border-radius: 50px;
    background: var(--color-purple-50);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-purple-500);

}
.check-icon i:before{
    font-size: 12px;
}
.check-icon.check-brown{
    background: var(--color-brown-200);
    color: var(--color-brown-800);
}
.list-check ul{
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style: none;
    row-gap: 16px;
}
.list-check ul li{
    display: flex;
    column-gap: 8px;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-main);
}

.list-check ul li:before{
    content:'\0044';
    font-family: 'plusonemoving';
    font-size: 12px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    flex-shrink: 0;
    color: var(--color-purple-500);
    background: var(--color-purple-50);
}

.list-check.no-bg ul li:before{
    background: none;
}
p {
    margin-bottom: 8px;
}
.last-p p:last-of-type{
    margin: 0;
}
.text-custom .h3{
    margin-bottom: 8px;
}
.text-custom.list-check ul{
    margin: 24px 0;
    row-gap: 8px;
}
.text-custom > *:last-child{
    margin-bottom: 0 !important;
}
.text-custom.list-check ul li{
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}
.text-custom strong{
    font-weight: 500 !important;
}
.text-custom q:before,
.text-custom q:after{
    display: none;
}
.text-custom q{
    border-left: 1px solid var(--color-purple-500);
    padding: 16px 0 16px 16px;
    display: block;
}
.img-200{
    width: 200px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.img-200 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.text-lpd{
    padding-left: 48px;
}
.item-badge{
    padding: 4px 12px;
    border-radius: 25px;
}
.item-badge.badge-pink{
    background: var(--color-pink-200);
    border: 1px solid var(--color-pink-300);
}
.list-ordered ol{
    padding-left: 0;
    list-style: none;
    counter-reset: ordered-list-counter;
}
.list-ordered ol li{
    border-bottom: 1px solid var(--color-neutral-200);
    padding: 8px 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    counter-increment: ordered-list-counter;
    display: flex;
    column-gap: 8px;
}
.list-ordered ol li::before{
    content: "0" counter(ordered-list-counter) ".";
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    text-transform: uppercase;
    color: var(--color-purple-500);
    display: block;
    width: 32px;
    flex-shrink: 0;
}
.list-ordered ol li:first-of-type{
    border-top: 1px solid var(--color-neutral-200);
}
a,
.text-custom a{
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-purple-500);
    text-decoration: none;
}
.text-custom.list-border  ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    row-gap: 8px;
}
.text-custom.list-border  ul li{
    border-left: 1px solid var(--color-neutral-200);
    padding-left: 12px;
}

.list-ordered-column.list-ordered ol li{
    flex-direction: column;
    gap: 8px;
}

.blog-text.text-custom > *:not(:last-child){
    margin-bottom: 16px;
}
.blog-text.text-custom a{
    font-size: 18px;
}
.blog-text.text-custom q{
    padding: 16px;
    display: flex;
    width: 100%;
    flex-direction: column;
    row-gap: 16px;
    border-radius: 12px;
    background: var(--color-pink-50);
    border: 1px solid var(--color-pink-200);
}
.blog-text.text-custom q *{
    color: var(--color-pink-700);
}

.blog-text.text-custom q.orange-quote{
    background: var(--color-orange-50);
    border: 1px solid var(--color-orange-200);
}
.blog-text.text-custom q.orange-quote *{
    color: var(--color-orange-700);
}
.blog-text.text-custom q.quote-bordered{
    background: none;
    border-radius: 0;
    border: none;
    border-left: 2px solid var(--color-purple-500);
}
.blog-text.text-custom q.quote-bordered *{
    color: var(--color-black);
}


.blog-text.text-custom img{
    border-radius: 8px;
    width: 100%;
    height: auto;
}

.blog-text.text-custom ul{
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    padding-left: 32px;
    list-style-type: square;
    row-gap: 16px;
}
.blog-text.text-custom ul li::marker {
    color: var(--color-purple-500);
}
.blog-text.text-custom *.mb-40{
    margin-bottom: 32px;
}

.blog-text.text-custom ol{
    padding: 0;
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    counter-reset: ordered-list-counter-blog;
}
.blog-text.text-custom ol li{
    display: flex;
    counter-increment: ordered-list-counter-blog;
}
.blog-text.text-custom.ordered-list-v ol li{
    display: flex;
    counter-increment: ordered-list-counter-blog;
    flex-direction: column;
}
.blog-text.text-custom ol li::before{
    content: "0" counter(ordered-list-counter-blog) '.';
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    text-transform: uppercase;
    color: var(--color-purple-500);
    display: block;
    width: 32px;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .btn {
        padding: 12px 0;
    }
    h1, .h1{
        font-size: 72px;
        line-height: 72px;
    }
    h2, .h2{
        font-size: 64px;
        line-height: 64px;
    }
    h3, .h3{
        font-size: 48px;
        line-height: 56px;
    }
    h4, .h4{
        font-size: 32px;
        line-height: 40px;
    }
    h5, .h5, h6, .h6{
        font-size: 24px;
        line-height: 32px;
    }
    .mb-32-48 {margin-bottom: 48px}
    .mb-32-56 {margin-bottom: 56px}
    .mb-32-40 {margin-bottom: 40px}
    .mb-24-40 {margin-bottom: 40px}
    .mt-32-40 {margin-top: 40px}
    .text-lpd{
        padding-left: 224px;
    }
    .row-40-24{row-gap: 40px}
    .blog-text.text-custom *.mb-40{
        margin-bottom: 40px;
    }
}
@media (min-width: 1200px) {
    .btn-square:hover{
        border-radius: 50px;
    }
    .section-mb{
        margin-bottom: 64px;
    }
    .section-pt{
        padding-top: 64px;
    }
    .section-pb{
        padding-bottom: 64px;
    }
    .h-100{
        height: 100%;
    }
}

@keyframes growWidth {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}
@keyframes growHeight {
    from {
        height: 0;
    }
    to {
        height: 100%;
    }
}
@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}