body {
    --c-light: #fff;
    --c-brand: #0B8194;
    --c-sec: #F5DB07;
    --c-tert: #F50779;
    --c-dark: #1b1b22;
    --c-silver: #eefcff;
    --c-light--rgb: 255, 255, 255;
    --c-brand--rgb: 11, 129, 148;
    --c-sec--rgb: 245, 219, 7;
    --c-tert--rgb: 245, 7, 121;
    --c-dark--rgb: 27, 27, 34;
    --c-silver--rgb: 238, 252, 255;
    --vh100: calc(var(--vh, 1vh) * 100);
    --container-single-w: 844px;
    --post-thumb-height: 63.26%;
    --single-post-thumb-offset: 195px;
    --single-hero-right-w: 746px;
    --scrollbar-width: 8px;
    --mobileRevealTransitionDuration: .5;
    --mobileCollapseTransitionDuration: calc(var(--mobileRevealTransitionDuration) * 0.5s);
    --maxDelay: calc(var(--maxDuration));
    --container-w: 1280px;
    --font-serif: 'Lora', serif;
    --font-titles: 'Inter', sans-serif;
    --font-def: 'Inter', sans-serif
}

.pagination-wrap .previouspostslink,
.pagination-wrap .nextpostslink {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.footer {
    border-top: 6px solid var(--c-silver)
}

.footer__top .container,
.footer__btm .container {
    display: flex;
    justify-content: space-between
}

.footer__top .container {
    padding-top: 106px;
    padding-bottom: 62px
}

.footer__top__cell-1 {
    display: flex;
    align-items: flex-start;
    max-width: 520px
}

.footer__top__cell-1 .brand {
    display: block;
    flex-shrink: 0;
    width: 85px;
    margin-right: 24px
}

.footer__top__cell-1 .brand svg {
    max-width: 100%
}

.footer__top__cell-1 .brand .logo-symbol {
    display: block;
    width: 100%;
    height: auto
}

.footer__top__cell-1 .wrap {
    margin-top: -8px
}

.footer__top__cell-1 h6 {
    margin-bottom: 6px
}

.footer__top__cell-1 p {
    font-size: 16px
}

.footer__top__cell-2 {
    display: flex
}

.footer__top__cell-2>div {
    width: 194px
}

.footer__top__cell-2 ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.footer__top__cell-2 .menu-item:not(:last-of-type) {
    margin-bottom: 28px
}

.footer__top__cell-2 a {
    position: relative;
    text-decoration: none;
    color: var(--c-dark);
    font-weight: 600;
    display: inline-flex;
    padding-left: 8px;
    padding-right: 8px
}

.footer__top__cell-2 a:before {
    content: '';
    position: absolute;
    bottom: .36em;
    left: 0;
    height: 4px;
    width: 100%;
    opacity: .1;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 18 4' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.42,3.297C0.402,3.2 0.367,3.34 0.315,3.297C0.353,3.219 0.37,3.105 0.336,2.999C0.389,2.943 0.43,2.869 0.504,2.933C0.398,2.524 0.385,2.079 0.315,1.772C0.244,1.823 0.201,1.778 0.147,1.673C0.45,1.386 0.091,0.95 0.273,0.646C0.237,0.437 0.049,0.469 -0,0.281C0.036,0.077 0.13,-0.003 0.232,0C0.238,0 17.106,0.001 17.113,0.002C17.318,0.029 17.54,0.377 17.365,0.712C17.488,1.431 17.68,2.414 17.47,3.066C17.614,3.274 17.49,3.479 17.49,3.795C17.46,3.829 17.439,3.844 17.414,3.847C17.41,3.847 0.545,3.847 0.541,3.847C0.519,3.847 0.495,3.839 0.461,3.828C0.481,3.633 0.3,3.432 0.419,3.298L0.42,3.297Z' fill='%23ffa900'/%3E%3C/svg%3E%0A");
    background-size: 100%;
    transform-origin: left;
    transform: scaleX(0);
    transition: all .3s cubic-bezier(0.22, 0.61, 0.36, 1)
}

.footer__top__cell-2 a:hover:before,
.footer__top__cell-2 a[aria-current='page']:before,
.footer__top__cell-2 a:focus:before {
    transform: scaleX(1);
    opacity: .79
}

.footer__btm .container {
    align-items: center;
    position: relative;
    padding-top: 56px;
    padding-bottom: 72px
}

.footer__btm .container:before {
    content: '';
    position: absolute;
    top: 0;
    left: 15px;
    height: 1px;
    width: calc(100% - 30px);
    background: var(--c-silver)
}

.footer__btm__cell-1 .btn-wrap {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: auto;
    gap: 10px
}

.footer__btm__cell-1 .btn-wrap a {
    display: inline-flex;
    width: 136px;
    transition: opacity .2s ease-in-out
}

.footer__btm__cell-1 .btn-wrap a:hover {
    opacity: .8
}

.footer__btm__cell-1 .btn-wrap .product-hunt-badge a {
    width: auto;
    height: 40px
}

.footer__btm__cell-2 {
    display: flex;
    flex-direction: column
}

.footer__soc {
    display: flex;
    align-items: flex-start
}

.footer__soc .soc-btn {
    --size: 32px;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    text-decoration: none;
    width: var(--size);
    height: var(--size);
    transition: opacity .2s ease-in-out
}

.footer__soc .soc-btn:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px
}

.footer__soc .soc-btn--facebook {
    background: #3b5998
}

.footer__soc .soc-btn--twitter {
    background: #1da1f2
}

.footer__soc .soc-btn--instagram {
    background: #c32aa3
}

.footer__soc .soc-btn--linkedin {
    background: #0e76a8
}

.footer__soc .soc-btn--youtube {
    background: red
}

.footer__soc .soc-btn--youtube svg {
    transform: translateX(1px)
}

.footer__soc .soc-btn:hover {
    opacity: .9
}

.footer__soc .soc-btn:not(:last-of-type) {
    margin-right: 10px
}

.footer .copyright {
    text-align: right
}

.footer .copyright p {
    margin-bottom: 0;
    line-height: 1.2;
    font-size: 14px;
    opacity: .5
}

#blockColorblindContent {
    display: none !important
}

.ivtr {
    --offset: 30px;
    --delay: 0;
    --duration: .4s;
    opacity: 0;
    transition: transform var(--duration) ease-in-out calc(1s * var(--delay)), opacity var(--duration) ease-in-out calc(1s * var(--delay))
}

.ivtr.ivtr-custom {
    opacity: 1
}

.ivtr.ivtr-btm {
    transform: translateY(var(--offset))
}

.ivtr.ivtr-top {
    transform: translateY(calc(var(--offset) * -1))
}

.ivtr.ivtr-left {
    transform: translateX(calc(var(--offset) * -1))
}

.ivtr.ivtr-right {
    transform: translateX(var(--offset))
}

.ivtr.ivtr-center {
    transform: scale(0.7)
}

.ivtr.ivtr-btm.inView,
.ivtr.ivtr-top.inView {
    transform: translateY(0) !important;
    opacity: 1 !important
}

.ivtr.ivtr-left.inView,
.ivtr.ivtr-right.inView {
    transform: translateX(0) !important;
    opacity: 1 !important
}

.ivtr.ivtr-center.inView {
    transform: scale(1) !important;
    opacity: 1 !important
}

.tr-img-wrap-outer {
    position: relative;
    width: calc(var(--size-w-original) * 1px)
}

.tr-img-wrap-outer.jsLoading {
    background-color: #cecece;
    overflow: hidden
}

.tr-img-wrap-outer.jsLoading:before,
.tr-img-wrap-outer.jsLoading:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    transform: translateX(-200%) skewX(35deg);
    background: #d1f3ff;
    background: linear-gradient(90deg, transparent 0, #fff 50%, transparent 100%, #ffff 100%);
    -webkit-animation: image-preloader 2s ease-in-out infinite forwards;
    animation: image-preloader 2s ease-in-out infinite forwards
}

.tr-img-wrap-outer.jsLoading:after {
    -webkit-animation-delay: .4s;
    animation-delay: .4s
}

.tr-img-wrap {
    --image-ratio: calc(var(--size-h-original) / var(--size-w-original));
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: calc(var(--image-ratio) * 100%)
}

.tr-img-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

@-webkit-keyframes image-preloader {
    0% {
        opacity: 1
    }

    50% {
        transform: translateX(200%) skewX(35deg)
    }

    51%,
    100% {
        opacity: 0
    }
}

@keyframes image-preloader {
    0% {
        opacity: 1
    }

    50% {
        transform: translateX(200%) skewX(35deg)
    }

    51%,
    100% {
        opacity: 0
    }
}

.js-async-svg {
    width: 30px !important;
    height: 30px !important;
    background-size: 15px 15px !important
}

.wp-pagenavi {
    clear: both
}

.wp-pagenavi a,
.wp-pagenavi span {
    text-decoration: none;
    border: 1px solid #bfbfbf;
    padding: 3px 5px;
    margin: 2px
}

.wp-pagenavi a:hover,
.wp-pagenavi span.current {
    border-color: #000
}

.wp-pagenavi span.current {
    font-weight: bold
}

.pagination-wrap {
    display: flex;
    justify-content: center;
    margin-top: 40px
}

.pagination-wrap .wp-pagenavi {
    margin-top: 40px;
    display: flex;
    align-items: center
}

.pagination-wrap .pages {
    display: none
}

.pagination-wrap .page,
.pagination-wrap span,
.pagination-wrap .first,
.pagination-wrap .last {
    border: 0;
    display: inline-flex;
    align-items: center;
    color: #afbfc9;
    text-decoration: none;
    transition: all .2s ease-in-out
}

.pagination-wrap span.extend {
    padding-left: 0;
    padding-right: 0
}

.pagination-wrap .page:hover,
.pagination-wrap .current {
    color: var(--c-brand)
}

.pagination-wrap .previouspostslink,
.pagination-wrap .nextpostslink {
    position: relative;
    display: inline-flex;
    width: 24px;
    height: 24px;
    font-size: 0;
    background-size: 10px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='8px' height='12px' viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpolygon fill='%23553adb' transform='translate(4.000000, 6.000000) rotate(-90.000000) translate(-4.000000, -6.000000) ' points='0.437894737 2 4 5.84561404 7.56210526 2 9.14285714 4.45614035 4 10 -1.14285714 4.45614035'%3E%3C/polygon%3E%3C/svg%3E");
    opacity: .3;
    transition: all .2s ease-in-out
}

.pagination-wrap .previouspostslink:hover,
.pagination-wrap .nextpostslink:hover {
    opacity: 1
}

.pagination-wrap .previouspostslink {
    transform: scaleX(-1);
    order: -1
}

.pagination-wrap .nextpostslink {
    order: 100
}

.spinner-wrap {
    position: absolute;
    width: 100%;
    height: 100%
}

.lds-ripple {
    display: inline-block;
    position: absolute;
    width: 64px;
    height: 64px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.lds-ripple div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: var(--c-dark);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    -webkit-animation: lds-ripple 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    animation: lds-ripple 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    transform-origin: center
}

.lds-ripple div:nth-child(2) {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s
}

@-webkit-keyframes lds-ripple {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0)
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(4)
    }
}

@keyframes lds-ripple {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0)
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(4)
    }
}

.modal--custom {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 13;
    pointer-events: none
}

.modal--custom__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: all .3s cubic-bezier(0.65, 0.05, 0.36, 1)
}

.modal--custom__content {
    position: relative;
    width: 830px;
    max-width: calc(100vw - 70px);
    max-height: calc(100vh - 70px);
    height: auto;
    background: #fff;
    padding: 60px;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(-100%);
    transition: all .3s cubic-bezier(0.65, 0.05, 0.36, 1)
}

.modal--custom__content--wrap {
    height: 100%
}

.modal--custom__title {
    margin-bottom: 40px;
    color: var(--c-brand)
}

.modal--custom-close-x {
    position: absolute;
    display: inline-block;
    top: 30px;
    right: 30px;
    width: 18px;
    height: 18px;
    cursor: pointer
}

.modal--custom-close-x svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 1.2s ease-in-out
}

.modal--custom-close-x:hover svg {
    opacity: .8
}

.modal--custom.modal-is-open {
    pointer-events: all
}

.modal--custom.modal-is-open .modal--custom__backdrop {
    opacity: 1
}

.modal--custom.modal-is-open .modal--custom__content {
    opacity: 1;
    transform: translateY(0)
}

body.logged-in .modal--custom,
body.js-signed-in .modal--custom {
    display: none !important
}

body.modal-is-open {
    overflow: hidden
}

.modal--video .modal--custom__content {
    width: 1200px;
    height: 100%
}

.modal--video .video-wrapper {
    padding-bottom: 0;
    height: 100%
}

.tabs-wrap .nav-tab {
    display: flex;
    align-items: center;
    margin: 0 0 30px;
    padding: 0
}

.tabs-wrap .nav-tab button {
    position: relative;
    display: inline-flex;
    white-space: nowrap;
    cursor: pointer;
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    color: var(--c-brand);
    margin: 0 10px 0 0;
    padding: 10px 18px 8px;
    border-radius: 8px;
    background: transparent;
    border: 2px solid transparent;
    outline: none !important;
    transition: all .2s ease-in-out
}

.tabs-wrap .nav-tab button:hover,
.tabs-wrap .nav-tab button:focus {
    color: var(--c-brand)
}

.tabs-wrap .nav-tab button.activeTab {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: #fff
}

.tabs-wrap .tab-content {
    position: relative;
    overflow: hidden;
    transition: all .2s ease-in-out
}

.tabs-wrap .tab-panel {
    max-height: 0;
    opacity: 0;
    pointer-events: none
}

.tabs-wrap .tab-panel.activeTab {
    order: -1;
    transition: opacity .8s ease-in-out;
    max-height: 100%;
    opacity: 1;
    pointer-events: all
}

.tabs-outer-wrap .tab-content {
    position: relative;
    overflow: hidden;
    transition: all .2s ease-in-out
}

.tabs-outer-wrap .tab-panel {
    max-height: 0;
    opacity: 0;
    pointer-events: none
}

.tabs-outer-wrap .tab-panel.activeTab {
    order: -1;
    transition: opacity .8s ease-in-out;
    max-height: 100%;
    opacity: 1;
    pointer-events: all
}

.video-wrapper-width {
    width: 100%
}

.video-wrapper-width .video-wrapper {
    position: relative;
    height: 0;
    width: 100%;
    padding-bottom: 56.25%
}

.video-wrapper-width .video-wrapper iframe,
.video-wrapper-width .video-wrapper video {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.wp-block-embed-youtube,
.wp-block-embed-vimeo {
    width: 100%
}

.wp-block-embed-youtube .wp-block-embed__wrapper,
.wp-block-embed-vimeo .wp-block-embed__wrapper {
    position: relative;
    height: 0;
    width: 100%;
    padding-bottom: 56.25%
}

.wp-block-embed-youtube iframe,
.wp-block-embed-vimeo iframe {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

@-webkit-keyframes upDown {
    50% {
        transform: translateY(-12px) rotate(10deg)
    }
}

@keyframes upDown {
    50% {
        transform: translateY(-12px) rotate(10deg)
    }
}

.three-posts {
    --padd-ver: 112px;
    padding-top: var(--padd-ver);
    padding-bottom: var(--padd-ver)
}

.three-posts h2 {
    margin-bottom: 52px;
    margin-bottom: calc(var(--padd-ver) / 2.9)
}

.marquee-words {
    --padd: 170px;
    width: calc(100vw - var(--browser-scroll-width));
    padding-top: var(--padd);
    padding-bottom: var(--padd);
    overflow-x: hidden
}

.marquee-words .title-wrap,
.marquee-words h6 {
    display: flex;
    justify-content: center;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    max-width: 670px;
    padding-right: 15px;
    padding-left: 15px
}

.marquee-words h3 {
    display: inline-block;
    position: relative;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 24px
}

.marquee-words h3 svg {
    --offset: 30px;
    position: absolute;
    bottom: -3px;
    left: calc(var(--offset) * -1);
    width: calc(100% + var(--offset) * 2);
    height: 16px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .6s ease-in-out
}

.marquee-words h3.inView svg {
    transform: scaleX(1)
}

.marquee-words h6 {
    margin-bottom: 45px;
    line-height: 1.22
}

.marquee-words .marquee-wrap {
    display: flex
}

.marquee-words .marquee-wrap.touch .words-wrap {
    -webkit-animation-play-state: paused !important;
    animation-play-state: paused !important
}

.marquee-words .marquee-wrap--0 {
    --durationMultiplier: .4
}

.marquee-words .marquee-wrap--1 {
    --durationMultiplier: .3
}

.marquee-words .marquee-wrap--2 {
    --durationMultiplier: .48
}

.marquee-words .marquee-wrap:not(:last-of-type) {
    margin-bottom: 14px
}

.marquee-words .words-wrap {
    display: flex;
    -webkit-animation: marquee calc(var(--numberOfChars) * var(--durationMultiplier) * 1s) linear infinite;
    animation: marquee calc(var(--numberOfChars) * var(--durationMultiplier) * 1s) linear infinite
}

.marquee-words .word {
    display: inline-block;
    position: relative;
    font-family: var(--font-def);
    font-size: 120px;
    line-height: 1;
    padding-left: 5px;
    padding-right: 5px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden
}

.marquee-words .word h2 {
    text-transform: uppercase;
    font-weight: 800;
    line-height: 1;
    color: var(--c-silver);
    transition: color .3s ease-in-out .1s
}

.marquee-words .word .doubleview {
    --offset: 50px;
    position: absolute;
    top: 50%;
    left: var(--offset);
    width: calc(100% - var(--offset) * 2);
    height: 79px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, -50%, 0);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none
}

.marquee-words .word .doubleview rect {
    transition: transform .3s ease-in-out .1s;
    transform: scaleX(0)
}

.marquee-words .word .doubleview--top rect {
    transition-delay: .2s
}

.marquee-words .word .doubleview--btm rect {
    transform-origin: right
}

.marquee-words .word.touch h2 {
    color: var(--c-brand)
}

.marquee-words .word.touch .doubleview rect {
    transform: scaleX(1)
}

.marquee-word-modal {
    --word-modal-color: var(--c-brand);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    max-width: min(560px, calc(100vw - 24px));
    padding: 14px 18px;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, .08);
    background: #fff;
    color: var(--c-black);
    font-family: var(--font-def);
    font-size: 18px;
    line-height: 1.35;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .16);
    transform: translate3d(-50%, calc(-100% - 14px), 0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease
}

.marquee-word-modal.is-visible {
    opacity: 1;
    visibility: visible
}

.marquee-word-modal strong {
    color: var(--word-modal-color)
}

@-webkit-keyframes marquee {
    to {
        transform: translateX(-100%)
    }
}

@keyframes marquee {
    to {
        transform: translateX(-100%)
    }
}

.list-and-media {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding-top: 100px;
    padding-left: 15px
}

.list-and-media ul {
    text-align: left
}

.list-and-media h2 {
    line-height: 1;
    color: var(--c-brand);
    margin-bottom: 25px
}

.list-and-media h2,
.list-and-media h6 {
    max-width: 825px;
    margin-right: auto;
    margin-left: auto;
    text-align: center
}

.list-and-media h6 {
    line-height: 1.6;
    font-weight: 400;
    margin-bottom: 30px
}

.list-and-media h4 {
    line-height: 1.2;
    font-style: italic;
    margin-bottom: 24px
}

.list-and-media--wrap {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    overflow: hidden
}

.list-and-media .list-wrap,
.list-and-media .media-wrap {
    width: 40%
}

.list-and-media .list-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    max-width: 500px;
    padding-right: 76px
}

.list-and-media .media-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    position: relative;
    width: 54.583%
}

.list-and-media .media-wrap .svg-wrap {
    height: 571px
}

.list-and-media .media-wrap .svg-wrap .phone-svg {
    transform: translateY(70px);
    transition: all .5s ease-in-out .3s
}

.list-and-media .media-wrap .svg-wrap .phone-svg img {
    width: 100%
}

.list-and-media .media-wrap .svg-wrap .progressAnim {
    -webkit-animation: progressAnimH 6s ease-in-out infinite calc(var(--delay) * 1s);
    animation: progressAnimH 6s ease-in-out infinite calc(var(--delay) * 1s)
}

.list-and-media .media-wrap .svg-wrap .svg-icon {
    -webkit-animation: iconAnim 6s ease-in-out infinite calc(var(--delay) * 1s);
    animation: iconAnim 6s ease-in-out infinite calc(var(--delay) * 1s)
}

.list-and-media .media-wrap .svg-wrap circle {
    transform: translateY(70px);
    transition: all .5s ease-in-out
}

.list-and-media .media-wrap .svg-wrap .svg-wrap__icons-left {
    transform: translate(20px, 20px);
    transition: all .5s ease-in-out .2s
}

.list-and-media .media-wrap .svg-wrap .svg-wrap__icons-right {
    transform: translate(0, 70px);
    transition: all .5s ease-in-out .2s
}

.list-and-media .media-wrap .svg-wrap.inView circle,
.list-and-media .media-wrap .svg-wrap.inView .phone-svg,
.list-and-media .media-wrap .svg-wrap.inView .svg-wrap__icons-left,
.list-and-media .media-wrap .svg-wrap.inView .svg-wrap__icons-right {
    transform: translate(0, 0)
}

.list-and-media .svg-card {
    bottom: 0;
    left: 30px
}

@-webkit-keyframes progressAnimH {

    0%,
    100% {
        transform: scaleX(1)
    }

    50% {
        transform: scaleX(0);
        opacity: .2
    }
}

@keyframes progressAnimH {

    0%,
    100% {
        transform: scaleX(1)
    }

    50% {
        transform: scaleX(0);
        opacity: .2
    }
}

@-webkit-keyframes iconAnim {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-10px)
    }
}

@keyframes iconAnim {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-10px)
    }
}

.section-offset-cards {
    position: relative;
    --gap: 24px;
    --card-w: 520px;
    --card-h-modifier: 1.3;
    --card-h: calc(var(--card-w) * var(--card-h-modifier));
    --vert-offset: 118px;
    --padd-hor: 190px;
    --card-c--blue--light: #4068eb;
    --card-c--blue--dark: #0B8194;
    --card-c--green: #F50779;
    --card-c--orange: #F5DB07;
    --padd-vert: 150px;
    --contWidth: calc(var(--card-w) * 2 + var(--gap));
    position: relative;
    padding-top: var(--padd-vert);
    padding-bottom: calc(var(--padd-vert) + var(--vert-offset));
    padding-left: var(--padd-hor);
    padding-right: var(--padd-hor);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background: var(--c-silver)
}

.section-offset-cards .section-offset-cards__title {
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 24px;
    padding-right: 15px;
    padding-left: 15px
}

.section-offset-cards .section-offset-cards__title h3 {
    display: inline-block;
    position: relative;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0
}

.section-offset-cards .section-offset-cards__title h3 svg {
    --offset: 30px;
    position: absolute;
    bottom: -3px;
    left: calc(var(--offset) * -1);
    width: calc(100% + var(--offset) * 2);
    height: 16px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .6s ease-in-out
}

.section-offset-cards .section-offset-cards__title h3.inView svg {
    transform: scaleX(1)
}

.section-offset-cards:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 460px;
    background-image: none
}

.section-offset-cards .cards-wrap {
    display: flex;
    flex-wrap: wrap;
    width: var(--contWidth)
}

.section-offset-cards .section-wave {
    position: absolute;
    left: 0;
    min-width: 100%;
    height: auto
}

.section-offset-cards .section-wave:first-of-type {
    bottom: calc(100% - 2.5vw)
}

.section-offset-cards .section-wave:last-of-type {
    top: calc(100% - 2.5vw)
}

.section-offset-cards .shapes-wrap {
    --svg-l-width: 285px;
    --svg-l-height: calc(var(--svg-l-width) * 1.59);
    --svg-r-width: 350px;
    --svg-r-height: calc(var(--svg-r-width) * 1.3);
    --top-l: -80px;
    --top-r: auto;
    --degree: -30deg;
    position: absolute;
    top: var(--top-l);
    left: calc(var(--padd-hor) * -0.5);
    width: var(--svg-l-width);
    height: var(--svg-l-height);
    z-index: 1;
    overflow: hidden
}

.section-offset-cards .shapes-wrap svg {
    width: 100%;
    height: 100%
}

.section-offset-cards .shapes-wrap--right {
    top: var(--top-r);
    left: auto;
    right: 0;
    bottom: -5%;
    width: var(--svg-r-width);
    height: var(--svg-r-height)
}

.section-offset-cards .shapes-wrap--right .shapes-svg {
    --degree: 30deg;
    transition-delay: .3s
}

.section-offset-cards .shapes-wrap .shape {
    -webkit-animation: upDown 6s ease-in-out infinite var(--animDelay, 0s);
    animation: upDown 6s ease-in-out infinite var(--animDelay, 0s)
}

.section-offset-cards .shapes-wrap .shape--blur {
    filter: blur(var(--blur, 5px))
}

.section-offset-cards .shapes-wrap.inView .shapes-svg {
    opacity: 1;
    transform: scale(1) rotate(0)
}

.offset-card {
    position: relative;
    height: var(--card-h);
    width: var(--card-w);
    background: var(--c-light);
    border-radius: 16px;
    padding: 80px 50px 40px 36px;
    border: 3px solid transparent;
    overflow: hidden;
    z-index: 2
}

.offset-card:before {
    position: absolute;
    content: '';
    top: 30px;
    left: 37px;
    width: 30px;
    height: 30px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: all .5s ease-in-out;
    transform: scale(0)
}

.offset-card--green:before {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2713%27%20r%3D%277%27%20stroke%3D%27%23F50779%27%20stroke-width%3D%272%27%2F%3E%3Cpath%20d%3D%27M12%2013V9M12%2013L15%2015%27%20stroke%3D%27%23F50779%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M9%203H15M12%203V6%27%20stroke%3D%27%23F50779%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E")
}

.offset-card--blue--light:before {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M4%2018L7%207L10%2018M5.5%2014H8.5%27%20stroke%3D%27%234068EB%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M14%208H20L14%2018H20%27%20stroke%3D%27%234068EB%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E")
}

.offset-card--blue--dark:before {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M9%205H15V7H9V5Z%27%20stroke%3D%27%230B8194%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%277%27%20width%3D%278%27%20height%3D%2712%27%20rx%3D%272%27%20stroke%3D%27%230B8194%27%20stroke-width%3D%272%27%2F%3E%3Cpath%20d%3D%27M17%209L20%208M17%2012L20%2012M17%2015L20%2016%27%20stroke%3D%27%230B8194%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E")
}

.offset-card--orange:before {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M12%204C12%204%207%2010%207%2013C7%2015.7614%209.23858%2018%2012%2018C14.7614%2018%2017%2015.7614%2017%2013C17%2010%2012%204%2012%204Z%27%20stroke%3D%27%23E0B300%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M9.5%2013.5C9.5%2012.2%2010.3%2011.1%2011.4%2010.5%27%20stroke%3D%27%23E0B300%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E")
}

.offset-card:nth-of-type(1),
.offset-card:nth-of-type(2) {
    margin-bottom: var(--gap)
}

.offset-card:nth-of-type(even) {
    transform: translateY(var(--vert-offset));
    margin-left: var(--gap)
}

.offset-card .card-doubleview {
    transform: translate(-20%, 20%);
    transition: all 1.3s ease-in-out .3s
}

.offset-card.inView:before {
    transform: scale(1)
}

.offset-card.inView .card-doubleview {
    transform: translate(0, 0)
}

.offset-card h3,
.offset-card p {
    position: relative;
    z-index: 1
}

.offset-card h3 {
    font-weight: 700;
    line-height: 1.09
}

.offset-card p {
    line-height: 1.6;
    margin-top: 15px
}

.offset-card .main-svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    pointer-events: none
}

.offset-card .main-svg svg {
    width: 100%;
    height: 100%
}

.offset-card--blue--light {
    border-color: var(--card-c--blue--light)
}

.offset-card--blue--dark {
    border-color: var(--card-c--blue--dark)
}

.offset-card--green {
    border-color: var(--card-c--green)
}

.offset-card--orange {
    border-color: var(--card-c--orange)
}

.five-cards-and-list {
    --padd-vert: 150px;
    --card-span: 5;
    --card-h: 184px;
    --icons-gap: 40px;
    --cell1-cont: 1280px;
    --cell2-cont: 938px;
    --cell2-mt: 110px;
    --svg-wrap-size-modifier: 1;
    --icon-p-offset: 48px;
    --counter-fz: 120px;
    --list-offset-hor: 42px;
    --list-fz: 20px;
    --li-mt-modifier: .66;
    position: relative;
    background: var(--c-silver);
    padding-top: var(--padd-vert);
    padding-bottom: 0;
    z-index: 1
}

.five-cards-and-list:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 240px;
    background-image: none
}

.five-cards-and-list .section-wave {
    position: absolute;
    left: 0;
    min-width: 100%;
    height: auto
}

.five-cards-and-list .section-wave:first-of-type {
    bottom: calc(100% - 3vw)
}

.five-cards-and-list .section-wave:last-of-type {
    top: calc(100% - 2.5vw)
}

.five-cards-and-list h4 {
    font-style: italic;
    margin-bottom: -10px
}

.five-cards-and-list h2 {
    font-weight: 700;
    color: var(--c-brand);
    margin-bottom: 32px
}

.five-cards-and-list h3.h3-five-cards-and-list {
    font-weight: 600;
    font-size: 32px;
    line-height: 1.3;
    text-align: center;
    margin-bottom: 30px
}

.five-cards-and-list .cell-wrap {
    overflow: hidden;
    padding-bottom: var(--padd-vert)
}

.five-cards-and-list .cell-1 {
    max-width: calc(var(--cell1-cont) + 2 * 14px);
    padding-left: 14px;
    padding-right: 14px;
    margin-left: auto;
    margin-right: auto;
    text-align: center
}

.five-cards-and-list .cell-2 {
    position: relative;
    max-width: calc(var(--cell2-cont) + 28px);
    padding-left: 14px;
    padding-right: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: var(--cell2-mt);
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 50px
}

.five-cards-and-list .cell-2 h3,
.five-cards-and-list .cell-2 ol {
    z-index: 1
}

.five-cards-and-list .icon-mood {
    -webkit-animation: winkRotate 4s ease-in-out infinite;
    animation: winkRotate 4s ease-in-out infinite
}

.five-cards-and-list .icon-wink {
    -webkit-animation: wink 4s ease-in-out infinite;
    animation: wink 4s ease-in-out infinite
}

@-webkit-keyframes wink {

    0%,
    7%,
    33%,
    100% {
        transform: scaleY(1)
    }

    10%,
    30% {
        transform: scaleY(0.4)
    }
}

@keyframes wink {

    0%,
    7%,
    33%,
    100% {
        transform: scaleY(1)
    }

    10%,
    30% {
        transform: scaleY(0.4)
    }
}

@-webkit-keyframes winkRotate {

    0%,
    40%,
    100% {
        transform: rotate(0)
    }

    10%,
    30% {
        transform: rotate(2deg)
    }
}

@keyframes winkRotate {

    0%,
    40%,
    100% {
        transform: rotate(0)
    }

    10%,
    30% {
        transform: rotate(2deg)
    }
}

.five-cards-and-list .decoration {
    position: absolute
}

.five-cards-and-list .decoration--wave {
    --size: 171;
    --waveAngle: -4deg;
    top: -30px;
    left: calc((100vw - var(--cell2-cont)) * -0.5 - 40px);
    transform: translate(0, 0) rotate(calc(var(--waveAngle) * -1));
    -webkit-animation: decoHandWave 4s ease-in-out infinite;
    animation: decoHandWave 4s ease-in-out infinite;
    transform-origin: left
}

.five-cards-and-list .decoration--wave .tr-img-wrap-outer {
    --size-w-original: var(--size) !important;
    --size-h-original: calc(var(--size-w-original) * 1) !important
}

.five-cards-and-list .decoration--calendar {
    --size: 131;
    bottom: calc(var(--padd-vert) * -0.5);
    left: calc((100vw - var(--cell2-cont)) * -0.5 - 30px)
}

.five-cards-and-list .decoration--calendar .tr-img-wrap-outer {
    --size-w-original: var(--size) !important;
    --size-h-original: calc(var(--size-w-original) * 1.21374045802) !important
}

.five-cards-and-list .decoration--thumbsUp {
    --size: 166;
    --waveAngle: 3deg;
    top: 100%;
    right: calc((100vw - var(--cell2-cont)) * -0.5 - 40px);
    transform-origin: right;
    transform: translate(0, 0) rotate(calc(var(--waveAngle) * -1));
    -webkit-animation: decoHandWave 5s ease-in-out infinite -1.3s;
    animation: decoHandWave 5s ease-in-out infinite -1.3s
}

.five-cards-and-list .decoration--thumbsUp .tr-img-wrap-outer {
    --size-w-original: var(--size) !important;
    --size-h-original: calc(var(--size-w-original) * 0.8313253012) !important
}

@-webkit-keyframes decoHandWave {

    0%,
    100% {
        transform: translate(0, 0) rotate(calc(var(--waveAngle) * -1))
    }

    50% {
        transform: translate(0, 0) rotate(var(--waveAngle))
    }
}

@keyframes decoHandWave {

    0%,
    100% {
        transform: translate(0, 0) rotate(calc(var(--waveAngle) * -1))
    }

    50% {
        transform: translate(0, 0) rotate(var(--waveAngle))
    }
}

.five-cards-and-list .icons-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.five-cards-and-list .icon-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: calc((100% - ((var(--card-span) - 1) * var(--icons-gap))) / var(--card-span));
    height: var(--card-h);
    background: var(--c-light);
    padding: 0 15px;
    border-radius: 16px
}

.five-cards-and-list .icon-card:not(:last-of-type) {
    margin-right: var(--icons-gap)
}

.five-cards-and-list .icon-card .svg-wrap {
    margin-top: auto;
    margin-bottom: 15px
}

.five-cards-and-list .icon-card .svg-wrap svg {
    max-width: 100%;
    max-height: 100%;
    position: relative;
    transform-origin: bottom center;
    transform: scale(var(--svg-wrap-size-modifier))
}

.five-cards-and-list .icon-card p {
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: var(--icon-p-offset);
    line-height: 1
}

.five-cards-and-list ol {
    counter-reset: custom-counter;
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: calc(100% - var(--list-offset-hor) * 2)
}

.five-cards-and-list ol li {
    counter-increment: custom-counter;
    position: relative;
    margin-top: calc(var(--counter-fz) * var(--li-mt-modifier));
    font-size: var(--list-fz);
    line-height: 1.6
}

.five-cards-and-list ol li:before {
    content: "0" counter(custom-counter);
    position: absolute;
    bottom: calc(100% - 0.63em);
    left: 0;
    font-weight: 800;
    color: rgba(var(--c-light--rgb), 0.75);
    font-size: var(--counter-fz);
    z-index: 1
}

.five-cards-and-list ol li:nth-of-type(9)~li:before {
    content: counter(custom-counter)
}

.five-cards-and-list ol li span {
    position: relative;
    z-index: 1
}

.five-cards-and-list ol li:nth-of-type(1):after {
    content: '';
    position: absolute;
    left: calc((100vw - var(--cell2-cont) + 28px * 2) / -2);
    top: -10px;
    width: 100vw;
    height: 96px;
    background-image: none
}

.two-alternate-cards {
    padding: 250px clamp(80px, 5.52vw, 106px) 110px;
    overflow: hidden
}

.two-alternate-cards .cards-wrap {
    display: flex;
    flex-direction: column;
    max-width: 1660px;
    margin-left: auto;
    margin-right: auto
}

.two-alternate-cards .card {
    --cardTopMulti: 1;
    --cardBtmMulti: 1;
    position: relative;
    display: flex
}

.two-alternate-cards .card:before {
    position: absolute;
    content: '';
    top: 0;
    width: clamp(300px, 44.01vw, 845px);
    height: clamp(300px, 44.01vw, 845px);
    opacity: .1;
    pointer-events: none
}

.two-alternate-cards .card .text {
    width: clamp(518px, 35.94vw, 690px)
}

.two-alternate-cards .card .text h3 {
    color: var(--c-dark);
    line-height: 1.09;
    font-weight: 700;
    margin-bottom: 22px
}

.two-alternate-cards .card .text p {
    margin-bottom: 15px
}

.two-alternate-cards .card .media {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    align-items: flex-start
}

.two-alternate-cards .card .media .svg-wrap {
    position: relative;
    width: auto
}

.two-alternate-cards .card .media .svg-wrap>svg {
    --doubleviewScale: 0
}

.two-alternate-cards .card .media .svg-wrap>svg .onView-wrap {
    --delayC: var(--delay, 0);
    transition: transform .4s ease-in-out calc(var(--delay) * 1s)
}

.two-alternate-cards .card .media .svg-wrap>svg.inView {
    --doubleviewScale: 1
}

.two-alternate-cards .card .media .svg-wrap>svg.inView .onView-wrap {
    transform: translate(0, 0) !important
}

.two-alternate-cards .card .media svg:not(.doubleview) {
    height: auto;
    z-index: 1
}

.two-alternate-cards .card .media .doubleview rect {
    transition: transform .3s ease-in-out .6s;
    transform: scaleX(var(--doubleviewScale))
}

.two-alternate-cards .card .media .doubleview--top rect {
    transition-delay: .8s
}

.two-alternate-cards .card .media .doubleview--btm rect {
    transform-origin: right
}

.two-alternate-cards .card--0 {
    margin-bottom: 150px
}

.two-alternate-cards .card--0:before {
    right: -140px;
    background: radial-gradient(50% 50% at 50% 50%, #F50779 0, rgba(98, 191, 148, 0) 100%)
}

.two-alternate-cards .card--0 .svg-wrap>svg {
    margin-top: calc(-54px * var(--cardTopMulti))
}

.two-alternate-cards .card--0 .media svg:not(.doubleview) {
    width: calc(833px * var(--cardTopMulti))
}

.two-alternate-cards .card--0 .media .doubleview {
    transform: translate(75px, 0) rotate(-30deg)
}

.two-alternate-cards .card--1 {
    flex-direction: row-reverse
}

.two-alternate-cards .card--1:before {
    top: -300px;
    left: -210px;
    background: radial-gradient(50% 50% at 50% 50%, #F5DB07 0, rgba(255, 169, 0, 0) 100%)
}

.two-alternate-cards .card--1 .svg-wrap>svg {
    margin-top: calc(-27px * var(--cardBtmMulti))
}

.two-alternate-cards .card--1 .media {
    justify-content: flex-start
}

.two-alternate-cards .card--1 .media svg:not(.doubleview) {
    width: calc(900px * var(--cardBtmMulti))
}

.two-alternate-cards .card--1 .media .doubleview {
    transform: translate(15px, 370px) rotate(-150deg)
}

.main-cta-section {
    --cont-w: 1062px;
    padding-top: 118px;
    padding-bottom: 92px;
    background: linear-gradient(259.04deg, #5fa0aa 8.22%, #0B8194 90.02%);
    overflow: hidden
}

.main-cta-section .inner {
    padding-left: 14px;
    padding-right: 14px;
    max-width: calc(var(--cont-w) + 28px);
    margin-left: auto;
    margin-right: auto
}

.main-cta-section h5.main-cta-label {
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: rgba(var(--c-light--rgb), 0.5);
    margin-bottom: -4px;
    padding-left: .2em
}

.main-cta-section h2 {
    color: var(--c-light);
    line-height: 1.2
}

.main-cta-section .btn {
    margin-top: 18px
}

.main-cta-section .btns-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 18px
}

.main-cta-section a:not(.btn) {
    display: inline-block;
    width: fit-content;
    transition: opacity .2s ease-in-out
}

.main-cta-section a:not(.btn):hover {
    opacity: .8
}

.main-cta-section a:not(.btn)>svg {
    width: 224px;
    height: auto
}

.main-cta-section--image {
    position: relative
}

.main-cta-section--image .tr-img-wrap-outer {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    z-index: 0
}

.main-cta-section--image .tr-img-wrap {
    height: 100%;
    padding-bottom: 0
}

.main-cta-section--image .tr-img-wrap img {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: left center;
    object-position: left center
}

.main-cta-section--image:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(235.74deg, rgba(117, 103, 246, 0) 25.2%, #0B8194 77.49%);
    z-index: 1
}

.main-cta-section--image:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(to right, #7567f6 0, rgba(117, 103, 246, 0.738) 19%, rgba(117, 103, 246, 0.541) 34%, rgba(117, 103, 246, 0.382) 47%, rgba(117, 103, 246, 0.278) 56.5%, rgba(117, 103, 246, 0.194) 65%, rgba(117, 103, 246, 0.126) 73%, rgba(117, 103, 246, 0.075) 80.2%, rgba(117, 103, 246, 0.042) 86.1%, rgba(117, 103, 246, 0.021) 91%, rgba(117, 103, 246, 0.008) 95.2%, rgba(117, 103, 246, 0.002) 98.2%, rgba(117, 103, 246, 0) 100%)
}

.main-cta-section--image .inner {
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1
}

.business-center-card {
    --scale-factor: 1;
    position: relative;
    background-color: var(--c-silver)
}

.business-center-card__inner {
    overflow: hidden
}

.business-center-card .section-wave {
    position: absolute;
    left: 0;
    min-width: 100%;
    height: auto
}

.business-center-card .section-wave:first-of-type {
    bottom: calc(100% - 2.5vw)
}

.business-center-card .section-wave:last-of-type {
    top: calc(100% - 2.5vw)
}

.business-center-card:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 240px;
    background-image: none
}

.business-center-card .container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    max-width: 846px;
    padding: calc(90px * var(--scale-factor)) 15px calc(140px * var(--scale-factor))
}

.business-center-card .business-svg {
    --doubleviewScale: 0;
    display: block;
    margin-bottom: calc(70px * var(--scale-factor));
    margin-top: calc(48px * var(--scale-factor));
    z-index: 1
}

.business-center-card .business-svg.inView {
    --doubleviewScale: 1
}

.business-center-card .business-svg.inView .onView-wrap {
    transform: translate(0, 0) !important
}

.business-center-card .square-bgc {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1133px;
    height: auto;
    z-index: 0
}

.business-center-card .onView-wrap {
    --delayC: var(--delay, 0);
    transition: transform .4s ease-in-out calc(var(--delay) * 1s)
}

.business-center-card .doubleview rect {
    transition: transform .3s ease-in-out .6s;
    transform: scaleX(var(--doubleviewScale))
}

.business-center-card .doubleview--top rect {
    transition-delay: .8s
}

.business-center-card .doubleview--btm rect {
    transform-origin: right
}

.business-center-card p {
    margin-bottom: 0;
    margin-top: calc(24px * var(--scale-factor));
    line-height: 1.6;
    z-index: 1
}

.business-center-card h2 {
    line-height: 1.21;
    color: var(--c-brand);
    font-weight: 700;
    z-index: 1
}

.premium-gif-tabs {
    --offset-top: 75px;
    --padd-b: 180px;
    --tabs-w: 628px;
    --txt-w: 846px;
    --scale-factor: 1;
    --tabs-ctrls-h: 62px;
    --tab-border-h: calc(6px * var(--scale-factor));
    position: relative;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: calc(var(--padd-b) * var(--scale-factor))
}

.premium-gif-tabs .logo-symbol {
    position: absolute;
    top: var(--offset-top);
    left: 0;
    z-index: 0;
    width: 100%;
    height: calc(100% - var(--offset-top));
    opacity: .05
}

.premium-gif-tabs .logo-symbol path {
    fill: var(--c-light);
    transform-origin: center center;
    transform: scale(1.44)
}

.premium-gif-tabs .decorations {
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--tabs-w) * var(--scale-factor) * 1.5);
    height: auto
}

.premium-gif-tabs:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100% - var(--offset-top));
    background: linear-gradient(259.04deg, #7567f6 8.22%, #0B8194 90.02%)
}

.premium-gif-tabs .tabs-cont {
    max-width: calc(var(--tabs-w) * var(--scale-factor));
    background: var(--c-light);
    border-radius: 16px 16px 7px 7px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    margin-top: calc(var(--offset-top) * -1);
    margin-bottom: calc(34px * var(--scale-factor));
    overflow: hidden
}

.premium-gif-tabs .tabs-cont__inner {
    position: relative;
    height: 0;
    padding-bottom: 85.35%
}

.premium-gif-tabs .tabs-cont .tabs-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column
}

.premium-gif-tabs .tabs-cont .tab-content {
    height: 100%;
    background-color: var(--c-brand)
}

.premium-gif-tabs .tabs-cont .tab-panel,
.premium-gif-tabs .tabs-cont .tab-panel__content {
    height: 100%
}

.premium-gif-tabs .tabs-cont .tr-img-wrap-outer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.premium-gif-tabs .tabs-cont .tr-img-wrap {
    padding-bottom: 0;
    height: 100%
}

.premium-gif-tabs .tabs-cont img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.premium-gif-tabs .tabs-cont .nav-tab {
    height: calc((var(--tabs-ctrls-h) + var(--tab-border-h)) * var(--scale-factor));
    margin-bottom: 0
}

.premium-gif-tabs .tabs-cont .nav-tab button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: calc(100% / 3);
    height: 100%;
    border-radius: 0;
    margin-right: 0;
    text-transform: none;
    font-size: calc(20px * var(--scale-factor));
    background-color: var(--c-silver);
    color: rgba(var(--c-brand--rgb), 0.25);
    font-weight: 600;
    border: 0;
    border-bottom: var(--tab-border-h) solid var(--c-silver)
}

.premium-gif-tabs .tabs-cont .nav-tab button:hover {
    color: var(--c-brand)
}

.premium-gif-tabs .tabs-cont .nav-tab button.activeTab {
    background-color: var(--c-light);
    color: var(--c-brand);
    border-bottom-color: var(--active-tab-color) !important
}

.premium-gif-tabs .txt-cont {
    max-width: calc(var(--txt-w) * var(--scale-factor));
    text-align: center
}

.premium-gif-tabs .txt-cont p,
.premium-gif-tabs .txt-cont a {
    color: var(--c-light) !important
}

.premium-gif-tabs .txt-cont p {
    margin-bottom: 0
}

:where(.premium-gif-tabs) .tabs-cont,
.txt-cont {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1
}

.single-content {
    position: relative;
    padding-top: var(--single-padd-top);
    padding-bottom: var(--single-padd-btm)
}

.single-content .content {
    width: calc(var(--container-single-w) + 2 * var(--single-padd-hor));
    padding-left: var(--single-padd-hor);
    padding-right: var(--single-padd-hor);
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 0 0 calc(1px * var(--debug)) blue
}

.single-content .content .single-content-offset-box+p.has-drop-cap:first-letter {
    float: left;
    font-size: 3.1em;
    font-family: var(--font-serif);
    font-weight: 700;
    line-height: .68;
    text-transform: uppercase;
    font-style: normal;
    margin: .2em .1em 0 0
}

.single-content .content .single-content-offset-box+* {
    margin-top: 0
}

.single-content .content>*:last-child {
    margin-bottom: 0 !important
}

.single-content .single-content-offset-box {
    --offset-box-h: calc(var(--single-post-thumb-offset) - var(--single-padd-top));
    --main-vs-content-cont-diff: calc(var(--container-w) - var(--container-single-w));
    --offset-box-w: calc(var(--single-hero-right-w) - var(--main-vs-content-cont-diff) * 0.5 + 15px);
    height: var(--offset-box-h);
    width: var(--offset-box-w);
    margin-bottom: 2rem;
    margin-left: 1rem;
    background: transparent;
    float: right
}

.single-content .content {
    --heading-mb: 20;
    --margin-ver-media: 60px
}

.single-content .content h2,
.single-content .content h3,
.single-content .content h4,
.single-content .content h5,
.single-content .content h6 {
    line-height: 1.4;
    font-weight: 500;
    margin-top: calc(var(--heading-mb) * 0.6px);
    margin-bottom: calc(var(--heading-mb) * 0.4px)
}

.single-content .content h2 {
    font-size: 32px
}

.single-content .content h3 {
    font-size: 29px
}

.single-content .content h4 {
    font-size: 26px
}

.single-content .content h5 {
    font-size: 23px
}

.single-content .content h6 {
    font-size: 20px
}

.single-content .content p {
    margin-bottom: 1.4em
}

.single-content .content p a,
.single-content .content li a,
.single-content .content figcaption a {
    position: relative;
    display: inline-flex;
    text-decoration: underline
}

.single-content .content .wp-block-quote {
    position: relative;
    max-width: 79%;
    padding: 0 70px;
    margin: var(--margin-ver-media) auto var(--margin-ver-media) 34px;
    border-left: 4px solid var(--c-brand)
}

.single-content .content .wp-block-quote:before {
    content: '';
    position: absolute;
    right: 0;
    top: 8px;
    width: 48px;
    height: 34px;
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='34' viewBox='0 0 48 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M48 10.9721C48 5.55379 43.6779 0 38.2753 0C34.4935 0 32.0624 3.79283 32.0624 7.72111C32.0624 9.34661 33.1429 11.243 34.7637 11.6494C37.465 12.3267 40.3013 13.9522 40.3013 16.9323C40.3013 23.1633 34.4935 27.9044 28.0104 30.749C27.7403 32.239 28.5507 33.5936 29.7663 34C40.5714 29.3944 48 21.5379 48 10.9721ZM20.0416 10.9721C20.0416 5.55379 15.7196 0 10.317 0C6.53516 0 4.10399 3.79283 4.10399 7.72111C4.10399 9.34661 5.18451 11.243 6.80528 11.6494C9.50658 12.3267 12.3429 13.9522 12.3429 16.9323C12.3429 23.1633 6.53516 27.9044 0.052052 30.749C-0.218077 32.239 0.592311 33.5936 1.80789 34C12.6131 29.3944 20.0416 21.5379 20.0416 10.9721Z' fill='%23553ADB'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

.single-content .content .wp-block-quote p {
    font-family: var(--font-serif);
    font-size: 48px;
    font-style: italic;
    line-height: 1.17;
    margin-bottom: .4em
}

.single-content .content .wp-block-quote p:last-of-type {
    margin-bottom: 0
}

.single-content .content .wp-block-quote p a:before {
    height: 6px;
    bottom: .23em
}

.single-content .content .wp-block-quote cite {
    display: block;
    margin-top: 18px;
    text-transform: uppercase;
    font-size: 14px;
    font-style: normal
}

.single-content .content ol,
.single-content .content ul {
    list-style: none
}

.single-content .content ol li,
.single-content .content ul li {
    margin-top: .6em
}

.single-content .content li {
    padding-left: 22px
}

.single-content .content ol>li {
    padding-left: 26px
}

.single-content .content ul>li {
    position: relative
}

.single-content .content ul>li:before {
    content: '';
    position: absolute;
    left: 0;
    top: .5em;
    width: 11px;
    height: 13px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='11' height='13' viewBox='0 0 11 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.73661 0.902184C5.13606 0.430107 5.86394 0.430107 6.26339 0.902184L10.4534 5.85406C10.7689 6.2269 10.7689 6.7731 10.4534 7.14594L6.26339 12.0978C5.86394 12.5699 5.13606 12.5699 4.73661 12.0978L0.546567 7.14594C0.231082 6.7731 0.231082 6.2269 0.546567 5.85406L4.73661 0.902184Z' fill='%23553ADB'/%3E%3C/svg%3E%0A")
}

.single-content .content ul>li ul>li:before {
    background-image: url("data:image/svg+xml,%3Csvg width='11' height='13' viewBox='0 0 11 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 1.54813L9.69005 6.5L5.5 11.4519L1.30995 6.5L5.5 1.54813Z' stroke='%23553ADB' stroke-width='2'/%3E%3C/svg%3E%0A")
}

.single-content .content ol {
    counter-reset: olcounter
}

.single-content .content ol>li {
    position: relative
}

.single-content .content ol>li:before {
    content: counter(olcounter);
    position: absolute;
    line-height: 1;
    font-size: .9em;
    font-weight: 600;
    color: var(--c-brand);
    left: 0;
    top: .4em;
    counter-increment: olcounter 1
}

.single-content .content>ol,
.single-content .content>ul {
    padding-left: 0;
    margin-top: .4em;
    margin-bottom: 1.4em
}

.single-content .content>ol>li:first-of-type,
.single-content .content>ul>li:first-of-type {
    margin-top: 0
}

.single-content .content>ol ol,
.single-content .content>ol ul,
.single-content .content>ul ol,
.single-content .content>ul ul {
    padding-left: 0
}

.single-content .content>*:last-child {
    margin-bottom: 0
}

.single-content .content .wp-figure {
    margin-top: var(--margin-ver-media);
    margin-bottom: var(--margin-ver-media);
    width: calc(100% + 2 * var(--single-image-offset));
    position: relative;
    left: 50%;
    transform: translateX(-50%)
}

.single-content .content .wp-figure a {
    display: block;
    transition: all .2s ease-in-out
}

.single-content .content .wp-figure a:hover {
    opacity: .9
}

.single-content .content .wp-figure figcaption {
    width: 100%;
    font-size: 14px;
    text-align: center;
    padding-top: 6px;
    line-height: 1.3
}

.single-content .content .wp-figure--custom-img {
    --border-size: 20px;
    width: calc(100% + 2 * var(--single-image-offset) - 2 * var(--border-size));
    margin-top: calc(var(--margin-ver-media) + var(--border-size));
    margin-bottom: calc(var(--margin-ver-media) + var(--border-size))
}

.single-content .content .wp-figure--custom-img figcaption {
    padding-top: calc(var(--border-size) + 6px)
}

.single-content .content .wp-figure--custom-img .tr-img-wrap:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% + var(--border-size) * 2);
    height: calc(100% + var(--border-size) * 2);
    transform: translate(-50%, -50%);
    background-image: linear-gradient(to right bottom, var(--h-lg-start), var(--h-lg-end))
}

.single-content .content .wp-figure--custom-img .tr-img-wrap img {
    background-color: #cecece
}

.single-content .content .wp-figure .tr-img-wrap-outer {
    max-width: 100%
}

.single-content .content>.wp-block-embed {
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--margin-ver-media);
    margin-bottom: var(--margin-ver-media)
}

.single-content .content>.wp-block-embed:not(.is-type-video) {
    max-width: 100%
}

.single-content .content>.wp-block-embed.is-type-video {
    min-width: calc(100% + 2 * var(--single-image-offset));
    max-width: calc(100% + 2 * var(--single-image-offset));
    position: relative;
    left: 50%;
    transform: translateX(-50%)
}

.single-content .content>.wp-block-embed .wp-block-embed__wrapper {
    display: flex;
    justify-content: center
}

.single-content .content>.wp-block-embed figcaption {
    font-size: 14px;
    opacity: .9;
    text-align: center;
    padding-top: 6px;
    line-height: 1.3
}

.single-content .content>iframe {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    margin-top: var(--margin-ver-media) !important;
    margin-bottom: var(--margin-ver-media) !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%)
}

.single-content .content>iframe.instagram-media {
    min-width: 300px !important
}

.single-content-wrap-outer {
    position: relative
}

.single-content-wrap-inner {
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.single-content-wrap-inner__inner {
    position: relative;
    width: 100%;
    height: 100%
}

.single-post-siblings-posts-outer {
    position: absolute;
    top: 50vh;
    left: 0;
    width: 100vw;
    pointer-events: none;
    z-index: 2;
    height: calc(100% - 50vh - var(--single-padd-btm));
    box-shadow: inset 0 0 0 calc(5px * var(--debug)) black
}

.single-post-siblings-posts-inner {
    position: relative;
    height: 100%;
    box-shadow: inset 0 0 0 calc(5px * var(--debug)) magenta
}

.single-post-siblings-posts {
    --box-w: 358px;
    --box-h: 124px;
    --box-padd: 16px;
    --hover-chevron-offset: 0;
    --hover-chevron-h: 40px;
    position: sticky;
    top: calc(50vh - var(--box-h) * 0.5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    overflow: hidden;
    padding-bottom: 20px;
    padding-top: 20px
}

.sibling-post-card {
    position: relative;
    text-decoration: none;
    pointer-events: all;
    transition: all .2s ease-in-out
}

.sibling-post-card__inner {
    display: flex;
    align-items: center;
    background: var(--c-light);
    width: var(--box-w);
    height: var(--box-h);
    padding: var(--box-padd);
    pointer-events: none
}

.sibling-post-card .hover-chevron {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--hover-chevron-h);
    height: var(--box-h);
    flex-shrink: 0;
    top: 0;
    font-size: 18px;
    font-weight: 500;
    color: var(--c-dark);
    line-height: 1;
    box-shadow: 0 0 0 calc(1px * var(--debug)) green;
    transition: all .2s ease-in-out
}

.sibling-post-card .svg-wrap {
    flex-shrink: 0;
    order: -1
}

.sibling-post-card .post-thumb {
    width: 122px;
    flex-shrink: 0;
    margin-left: 16px;
    margin-right: 16px
}

.sibling-post-card h6 {
    --lh: 1.5;
    --max-lines: 3;
    line-height: var(--lh);
    color: var(--c-dark);
    box-shadow: 0 0 0 calc(1px * var(--debug)) blue;
    max-height: calc(var(--lh) * var(--max-lines) * 1em);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: var(--max-line);
    line-clamp: var(--max-line);
    -webkit-box-orient: vertical;
    transition: all .2s ease-in-out
}

.sibling-post-card h6:hover {
    color: var(--c-brand)
}

.sibling-post-card .sibling-post-card__inner {
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: all .2s ease-in-out
}

.sibling-post-card--left {
    margin-right: auto;
    transform: translateX(calc(-100% + 40px))
}

.sibling-post-card--left .sibling-post-card__inner {
    border-radius: 0 8px 8px 0
}

.sibling-post-card--left .hover-chevron {
    left: calc(100% - var(--hover-chevron-h))
}

.sibling-post-card--left .hover-chevron svg {
    transform-origin: center;
    transform: rotate(180deg)
}

.sibling-post-card--left .post-card {
    order: 2
}

.sibling-post-card--left h6 {
    order: 3
}

.sibling-post-card--right {
    margin-left: auto;
    transform: translateX(calc(100% - 40px - var(--browser-scroll-width)))
}

.sibling-post-card--right .sibling-post-card__inner {
    border-radius: 8px 0 0 8px
}

.sibling-post-card--right .hover-chevron {
    right: calc(100% - var(--hover-chevron-h))
}

.sibling-post-card--right .svg-wrap {
    order: 3;
    transform: scaleX(-1)
}

.sibling-post-card:hover {
    transform: translateX(0)
}

.sibling-post-card:hover .sibling-post-card__inner {
    opacity: 1;
    pointer-events: all
}

.sibling-post-card:hover .hover-chevron {
    opacity: 0
}

.sibling-post-card--right:hover {
    transform: translateX(calc(-1 * var(--browser-scroll-width)))
}

.single-post-below-content {
    position: relative;
    z-index: 2
}

.page-404-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
    flex: 1;
    justify-content: center;
    padding-top: 60px;
    padding-bottom: 50px
}

.page-404-wrap .emoji-wrap {
    margin-bottom: 28px
}

.page-404-wrap .img-wrap {
    margin-bottom: 34px;
    width: 619px
}

.page-404-wrap .img-wrap:before,
.page-404-wrap .img-wrap:after {
    position: absolute;
    content: '';
    height: 0;
    border-radius: 50%;
    opacity: .15;
    z-index: -1
}

.page-404-wrap .img-wrap:before {
    top: -30%;
    left: -40%;
    width: 130%;
    padding-bottom: 130%;
    background: radial-gradient(50% 50% at 50% 50%, #F5DB07 0, rgba(255, 169, 0, 0) 100%)
}

.page-404-wrap .img-wrap:after {
    top: -30%;
    left: 60%;
    width: 80%;
    height: 0;
    padding-bottom: 80%;
    background: radial-gradient(50% 50% at 50% 50%, #F50779 0, rgba(98, 191, 148, 0) 100%)
}

.page-404-wrap .img-wrap__inner {
    position: relative;
    height: 0;
    padding-bottom: 68.98%
}

.page-404-wrap .img-wrap .tr-img-wrap-outer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.page-404-wrap .img-wrap .tr-img-wrap-outer:nth-of-type(1) {
    -webkit-animation: umbrella-shadow-anim 6s ease-in-out infinite;
    animation: umbrella-shadow-anim 6s ease-in-out infinite
}

.page-404-wrap .img-wrap .tr-img-wrap-outer:nth-of-type(2) {
    transform-origin: 45.9% 89%;
    -webkit-animation: umbrella-anim 6s ease-in-out infinite;
    animation: umbrella-anim 6s ease-in-out infinite
}

.page-404-wrap .h1-404 {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: .25em
}

.page-404-wrap .h1-404 span {
    position: relative;
    text-decoration: none !important
}

.page-404-wrap .h1-404 span:before {
    position: absolute;
    content: '';
    bottom: -6px;
    left: 0;
    width: 100%;
    height: .3em;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg width='100%' height='6' viewBox='0 0 111 6' preserveAspectRatio='none' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.60128 5.60965C37.2135 1.74104 78.6124 1.66939 103.641 5.45202C109.389 6.3117 111.644 6.05379 110.844 4.62097C110.116 3.28846 96.0017 1.48314 78.3216 0.451507C54.4571 -0.938339 15.8228 1.09626 3.8178 3.61801C-1.49349 4.72128 -2.14816 6.88485 7.60128 5.60965Z' fill='%23FFA900'/%3E%3C/svg%3E%0A");
    z-index: -1
}

.page-404-wrap p {
    margin-bottom: 0;
    line-height: 1.4
}

.page-404-wrap .btn--back {
    margin-top: 32px
}

@-webkit-keyframes umbrella-anim {
    50% {
        transform: rotate(-2deg)
    }
}

@keyframes umbrella-anim {
    50% {
        transform: rotate(-2deg)
    }
}

@-webkit-keyframes umbrella-shadow-anim {
    50% {
        transform: translateX(10px)
    }
}

@keyframes umbrella-shadow-anim {
    50% {
        transform: translateX(10px)
    }
}

body.error404 .main-content {
    display: flex;
    flex-direction: column
}

body.error404 .footer {
    display: none
}

.app-react .main {
    background: red
}

@media(max-width:1640px) {
    .two-alternate-cards .card {
        --cardTopMulti: .9;
        --cardBtmMulti: .8
    }
}

@media(max-width:1500px) {
    .list-and-media .list-wrap {
        padding-right: 27px
    }

    .list-and-media .media-wrap {
        transform: translateX(30px)
    }
}

@media(max-width:1450px) {
    .section-offset-cards {
        --card-w: 420px
    }
}

@media(max-width:1440px) {
    .list-and-media .media-wrap .svg-wrap {
        height: auto
    }

    .section-offset-cards .shapes-wrap {
        --svg-l-width: 250px;
        --svg-r-width: 290px;
        --top-l: -60px
    }

    .two-alternate-cards .card {
        --cardTopMulti: .75;
        --cardBtmMulti: .75
    }
}

@media(max-width:1380px) {
    .two-alternate-cards .card {
        --cardTopMulti: .69;
        --cardBtmMulti: .65
    }
}

@media(max-width:1366px) {
    .modal--video .modal--custom__content {
        padding: 50px
    }

    .modal--video .modal--custom-close-x {
        top: 20px;
        right: 20px
    }

    .five-cards-and-list {
        --cell1-cont: 1000px;
        --cell2-cont: 818px;
        --card-h: 134px;
        --svg-wrap-size-modifier: .9;
        --icon-p-offset: 22px;
        --counter-fz: 100px;
        --cell2-mt: 90px
    }

    .five-cards-and-list h3.h3-five-cards-and-list {
        font-size: 30px
    }

    .two-alternate-cards {
        padding: 150px 40px 80px
    }
}

@media(max-width:1310px) {
    body {
        --container-w: 980px;
        --container-single-w: 774px;
        --single-hero-right-w: 580.64px
    }

    .marquee-words {
        --padd: 120px
    }

    .marquee-words h3 svg {
        bottom: -1px;
        height: 10px
    }

    .marquee-words .word .doubleview {
        height: 60px
    }

    .main-cta-section {
        --cont-w: 752px
    }

    .premium-gif-tabs {
        --scale-factor: .8
    }

    .premium-gif-tabs .decorations {
        top: -50px
    }

    .single-content .content {
        --margin-ver-media: 42px;
        --heading-mb: 18
    }

    .single-content .content {
        --margin-ver-media: 36px;
        --heading-mb: 16
    }

    .single-content .content .wp-block-quote {
        padding: 0 50px
    }

    .single-content .content .wp-block-quote p {
        font-size: 38px
    }

    .single-content .content .wp-block-quote p {
        font-size: 30px
    }

    .single-content .content .wp-block-quote cite {
        font-size: 13px
    }

    .page-404-wrap .emoji-wrap {
        margin-bottom: 18px
    }

    .page-404-wrap .img-wrap {
        margin-bottom: 28px;
        width: 569px
    }

    .page-404-wrap .btn--back {
        margin-top: 20px
    }
}

@media(max-width:1251px) {
    .section-offset-cards .shapes-wrap:not(.shapes-wrap--right) {
        left: -70px
    }
}

@media(max-width:1250px) {
    .section-offset-cards {
        --padd-hor: 14px
    }
}

@media(max-width:1199px) {
    .modal--custom__title span {
        margin: 0 auto;
        padding-left: 40px
    }

    .modal--custom__content {
        max-width: calc(100vw - 55px)
    }

    .section-offset-cards .shapes-wrap {
        --svg-l-width: 200px;
        --svg-r-width: 240px;
        --top-l: -50px
    }

    .two-alternate-cards .card {
        flex-direction: column-reverse
    }

    .two-alternate-cards .card .text {
        width: 100%
    }

    .two-alternate-cards .card .text h3 {
        margin-bottom: 15px
    }

    .two-alternate-cards .card .media {
        justify-content: center !important;
        margin-bottom: 20px
    }

    .two-alternate-cards .card--0 {
        margin-bottom: 110px
    }

    .two-alternate-cards .card--0:before {
        top: -30%
    }

    .business-center-card {
        --scale-factor: .8
    }

    .business-center-card .square-bgc {
        width: calc(100% + 100px)
    }
}

@media(max-width:1160px) {
    .five-cards-and-list {
        --cell1-cont: 100%;
        --cell2-cont: 100%;
        --list-offset-hor: 80px;
        --icons-gap: 20px;
        --cell2-mt: 70px
    }

    .five-cards-and-list h4 {
        font-size: 22px
    }

    .five-cards-and-list h3.h3-five-cards-and-list {
        font-size: 26px
    }

    .five-cards-and-list .decoration--wave {
        --size: 110;
        left: calc((100vw - var(--cell2-cont)) * -0.5 - 30px)
    }

    .five-cards-and-list .decoration--calendar {
        --size: 80;
        left: calc((100vw - var(--cell2-cont)) * -0.5 - 16px)
    }

    .five-cards-and-list .decoration--thumbsUp {
        --size: 100;
        right: calc((100vw - var(--cell2-cont)) * -0.5)
    }
}

@media(max-width:1150px) {
    .single-content .content .wp-figure--custom-img {
        --border-size: 10px;
        width: calc(100% - 20px)
    }
}

@media(max-width:1010px) {
    body {
        --container-w: 797px;
        --single-hero-right-w: 487.123px;
        --container-single-w: 684px;
        --single-post-thumb-offset: 125px
    }

    .footer__top .container {
        padding-top: 80px
    }

    .footer__top__cell-1 {
        max-width: 330px
    }

    .footer__top__cell-1 .brand {
        width: 54px;
        margin-right: 18px;
        margin-top: -14px
    }

    .footer__top__cell-2>div {
        width: 140px
    }

    .footer__top__cell-2 .menu-item:not(:last-of-type) {
        margin-bottom: 18px
    }

    .footer__btm .container {
        padding-bottom: 72px
    }

    .footer .copyright {
        width: 262px
    }

    .three-posts {
        --padd-ver: 80px
    }

    .marquee-words {
        --padd: 80px
    }

    .marquee-words h3 svg {
        --offset: 20px;
        bottom: -2px
    }

    .marquee-words .word .doubleview {
        height: 33px
    }

    .list-and-media h6 {
        font-size: 18px
    }

    .main-cta-section {
        --cont-w: 482px;
        padding-top: 110px;
        padding-bottom: 90px
    }

    .premium-gif-tabs {
        --scale-factor: .6
    }

    .premium-gif-tabs .decorations {
        top: -20px
    }

    .single-content .single-content-offset-box {
        margin-bottom: 1rem
    }

    .single-content .content .wp-block-quote {
        padding: 0 60px
    }

    .single-content .content .wp-block-quote cite {
        font-size: 12px
    }

    .page-404-wrap .img-wrap {
        margin-bottom: 22px;
        width: 469px;
        max-width: 100%
    }

    .page-404-wrap .h1-404 {
        font-size: 26px
    }
}

@media(max-width:999px) {
    .business-center-card .business-svg {
        width: calc(100% + 160px);
        height: auto
    }
}

@media(max-width:991px) {
    .pagination-wrap .wp-pagenavi {
        margin-top: 24px
    }

    .modal--custom {
        text-align: center
    }

    .modal--custom-close-x {
        top: 35px;
        right: 35px
    }

    .modal--custom__content--wrap {
        flex-direction: column;
        align-items: center;
        justify-content: center
    }

    .modal--video .modal--custom__content {
        padding: 30px
    }

    .modal--video .modal--custom-close-x {
        top: 8px;
        right: 8px
    }

    .list-and-media {
        padding-top: 80px
    }

    .list-and-media h6 {
        margin-bottom: 40px
    }

    .list-and-media .list-wrap {
        padding-right: 0
    }

    .five-cards-and-list {
        --list-offset-hor: 0;
        --list-fz: 18px;
        --counter-fz: 80px;
        --li-mt-modifier: 1;
        --card-span: 2;
        --card-h: 136px;
        --icon-p-offset: 34px;
        --svg-wrap-size-modifier: .755;
        --cell2-mt: 146px
    }

    .five-cards-and-list h3.h3-five-cards-and-list {
        max-width: calc(100% - 2px);
        margin-bottom: 0
    }

    .five-cards-and-list h3.h3-five-cards-and-list {
        font-size: 22px
    }

    .five-cards-and-list .cell-1 {
        width: 100%;
        max-width: calc(500px + 28px);
        margin-left: auto;
        margin-right: auto
    }

    .five-cards-and-list .cell-2 {
        width: 100%;
        max-width: calc(500px + 28px);
        margin-left: auto;
        margin-right: auto
    }

    .five-cards-and-list .decoration--wave {
        top: -120px;
        left: calc((100vw - var(--cell2-cont)) * -0.5 - 35px)
    }

    .five-cards-and-list .decoration--calendar {
        left: calc((100vw - var(--cell2-cont)) * -0.5 - 15px)
    }

    .five-cards-and-list .icons-wrap {
        margin-left: -14px;
        width: calc(100% + 28px)
    }

    .five-cards-and-list .icon-card {
        width: calc((100% - 28px - var(--icons-gap)) / 2)
    }

    .five-cards-and-list .icon-card:not(:last-of-type) {
        margin-right: 0;
        margin-bottom: var(--icons-gap)
    }

    .five-cards-and-list .icon-card:nth-of-type(1),
    .five-cards-and-list .icon-card:nth-of-type(3) {
        margin-right: var(--icons-gap)
    }

    .five-cards-and-list .icon-card .svg-wrap {
        margin-bottom: 10px
    }

    .five-cards-and-list .icon-card p {
        font-size: 16px
    }

    .five-cards-and-list ol li:nth-of-type(1):after {
        display: none
    }

    .two-alternate-cards {
        padding: 110px 20px 80px
    }

    .two-alternate-cards .card--0 {
        margin-bottom: 90px
    }

    .two-alternate-cards .card--0 .media svg:not(.doubleview) {
        width: 100%
    }

    .two-alternate-cards .card--1 .media svg:not(.doubleview) {
        width: 100%
    }

    .business-center-card {
        --scale-factor: .6
    }

    .single-post-siblings-posts-outer {
        display: none
    }
}

@media(max-width:900px) {
    .section-offset-cards {
        --card-w: 300px;
        --gap: 14px;
        --vert-offset: 70px;
        --card-h-modifier: 1.4
    }

    .offset-card {
        padding: 24px;
        padding-top: 60px
    }

    .offset-card:before {
        top: 20px;
        left: 27px;
        width: 25px;
        height: 25px
    }
}

@media(max-width:797px) {
    body {
        --container-w: 100%;
        --container-single-w: 100%;
        --single-post-thumb-offset: 100px;
        --single-hero-right-w: 100%;
        --scrollbar-width: 0
    }

    .footer p {
        font-size: 14px
    }

    .footer h6,
    .footer li {
        font-size: 18px
    }

    .footer__top .container {
        padding-top: 60px;
        padding-bottom: 60px;
        flex-direction: column;
        align-items: center
    }

    .footer__top__cell-1 {
        margin-bottom: 28px
    }

    .footer__top__cell-2 {
        width: 100%
    }

    .footer__top__cell-2>div {
        width: calc((100% - 18px) / 2);
        margin-left: auto;
        margin-right: auto
    }

    .footer__btm .container {
        padding-top: 40px;
        padding-bottom: 40px;
        flex-direction: column;
        align-items: center
    }

    .footer__btm__cell-1 .btn-wrap {
        margin-right: auto;
        margin-bottom: 8px
    }

    .footer__btm__cell-1 .btn-wrap a {
        width: 134px
    }

    .footer .copyright {
        width: 100%;
        max-width: 260px;
        text-align: center;
        margin-top: 2px
    }

    .pagination-wrap .page,
    .pagination-wrap span,
    .pagination-wrap .first,
    .pagination-wrap .last {
        font-size: 16px
    }

    .pagination-wrap .previouspostslink,
    .pagination-wrap .nextpostslink {
        background-size: 8px
    }

    .marquee-words {
        --padd: 70px
    }

    .list-and-media {
        padding-top: 60px;
        padding-right: 15px
    }

    .list-and-media--wrap {
        flex-direction: column
    }

    .list-and-media .list-wrap {
        width: 100%;
        max-width: none
    }

    .list-and-media .media-wrap {
        margin-right: auto;
        margin-left: auto;
        margin-top: 40px;
        transform: none;
        width: 600px
    }

    .main-cta-section {
        padding-top: 100px;
        padding-bottom: 80px
    }

    .main-cta-section h5.main-cta-label {
        font-size: 18px
    }

    .main-cta-section a:not(.btn) {
        width: 184px
    }

    .main-cta-section a:not(.btn)>svg {
        width: 184px
    }

    .main-cta-section--image .tr-img-wrap-outer {
        width: 100%
    }

    .main-cta-section--image:after {
        width: 500%
    }

    .main-cta-section--image .inner {
        min-height: 300px
    }

    .premium-gif-tabs .txt-cont p {
        font-size: 16px
    }

    .posts-cards-grid {
        --cols: 2
    }

    .single-content {
        padding-top: calc(var(--single-post-thumb-offset) + var(--single-padd-top))
    }

    .single-content .content {
        width: 100%
    }

    .single-content .single-content-offset-box {
        display: none
    }

    .single-content .content h2,
    .single-content .content h3,
    .single-content .content h4,
    .single-content .content h5,
    .single-content .content h6 {
        line-height: 1.3
    }

    .single-content .content .wp-block-quote {
        padding: 0 60px 0 20px;
        width: calc(100% - 30px);
        max-width: 460px;
        margin-left: auto;
        margin-right: auto
    }

    .single-content .content .wp-block-quote p {
        font-size: 24px;
        line-height: 1.4
    }

    .page-404-wrap .h1-404 {
        font-size: 22px
    }
}

@media(max-width:767px) {
    .offset-card .main-svg image.clay-mobile-hidden {
        display: none
    }

    .modal--custom__content {
        max-width: calc(100vw - 50px);
        padding: 60px 40px
    }

    .modal--custom__title {
        margin-bottom: 20px
    }

    .modal--video .modal--custom__content {
        padding: 30px 20px
    }

    .marquee-words .word .doubleview {
        --offset: 30px
    }

    .two-alternate-cards {
        padding: 80px 15px
    }

    .two-alternate-cards .card .text h3 {
        margin-bottom: 8px
    }

    .two-alternate-cards .card--0 {
        margin-bottom: 60px
    }

    .two-alternate-cards .card--0 .svg-wrap>svg {
        margin-top: -20px
    }

    .business-center-card {
        --scale-factor: .5
    }

    .business-center-card .business-svg {
        width: calc(100% + 60px)
    }

    .business-center-card p,
    .business-center-card span {
        font-size: 16px
    }

    .single-content .content h2 {
        font-size: 30px
    }

    .single-content .content h3 {
        font-size: 27px
    }

    .single-content .content h4 {
        font-size: 24px
    }

    .single-content .content h5 {
        font-size: 22px
    }

    .single-content .content h6 {
        font-size: 18px
    }
}

@media(max-width:660px) {
    .list-and-media .media-wrap {
        width: 100%
    }

    .section-offset-cards .shapes-wrap {
        --svg-l-width: 140px;
        --svg-r-width: 160px;
        --top-l: -30px
    }
}

@media(max-width:645px) {
    .section-offset-cards {
        flex-direction: column;
        align-items: center;
        --gap: 24px;
        --card-w: 100%;
        --card-h-modifier: 1;
        --card-h: calc((100vw - 28px) * var(--card-h-modifier));
        --vert-offset: 0;
        --padd-vert: 90px;
        padding-bottom: var(--padd-vert)
    }

    .section-offset-cards .cards-wrap {
        width: 100%
    }

    .offset-card:not(:nth-of-type(4)) {
        margin-bottom: var(--gap)
    }

    .offset-card:nth-of-type(even) {
        transform: translateY(0);
        margin-left: 0
    }

    .offset-card h3 {
        font-size: 24px
    }

    .offset-card p {
        font-size: 18px
    }

    .five-cards-and-list {
        --padd-vert: 90px
    }
}

@media(max-width:640px) {
    .premium-gif-tabs .decorations {
        width: 100%
    }
}

@media(max-width:575px) {
    .modal--custom__content {
        max-width: calc(100vw - 45px)
    }

    .modal--custom__content p {
        font-size: 16px
    }

    .modal--custom-close-x {
        top: 20px;
        right: 20px
    }
}

@media(max-width:500px) {
    .three-posts h2 {
        margin-bottom: calc(var(--padd-ver) / 3.5)
    }

    .section-offset-cards {
        --card-h-modifier: 1.2
    }

    .posts-cards-grid {
        --cols: 1;
        --mb: 70;
        width: 100%;
        margin-left: 0
    }

    .posts-cards-grid .col {
        margin-left: 0;
        margin-right: 0;
        width: 100%
    }

    .single-content .content p,
    .single-content .content li {
        font-size: 18px
    }
}

@media(max-width:480px) {
    .modal--custom__content {
        max-width: calc(100vw - 40px);
        padding: 38px 25px
    }

    .modal--custom__content p {
        font-size: 14px
    }

    .modal--custom-close-x {
        top: 10px;
        right: 15px;
        width: 20px;
        height: 20px
    }

    .modal--custom-close-x svg {
        width: 20px;
        height: 20px
    }
}

@media(max-width:408px) {
    .premium-gif-tabs .tabs-cont .nav-tab button {
        font-size: calc(17px * var(--scale-factor))
    }
}

@media(max-width:400px) {
    .marquee-words h3 {
        font-size: 24px
    }

    .marquee-words h3 svg {
        --offset: 10px
    }

    .marquee-words h6 {
        margin-bottom: 30px
    }

    .marquee-words .marquee-wrap:not(:last-of-type) {
        margin-bottom: 10px
    }

    .marquee-words .word .doubleview {
        --offset: 20px;
        height: 30px
    }

    .section-offset-cards {
        --card-h-modifier: 1.3
    }
}

@media(max-width:374px) {
    .three-posts {
        --padd-ver: 60px
    }

    .marquee-words .word h2 {
        font-size: 40px
    }

    .section-offset-cards {
        --padd-vert: 70px
    }

    .five-cards-and-list {
        --padd-vert: 70px;
        --icons-gap: 14px;
        --card-h: 106px;
        --icon-p-offset: 18px
    }

    .five-cards-and-list h3.h3-five-cards-and-list {
        font-size: 20px
    }
}

@media(max-width:372px) {
    .premium-gif-tabs .tabs-cont__inner {
        padding-bottom: 104.78%
    }

    .premium-gif-tabs .tabs-cont .nav-tab {
        flex-wrap: wrap;
        height: calc((var(--tabs-ctrls-h) + var(--tab-border-h)) * var(--scale-factor) * 3)
    }

    .premium-gif-tabs .tabs-cont .nav-tab button {
        width: 100%;
        font-size: calc(17px * var(--scale-factor));
        height: calc(100% / 3)
    }
}

@media(hover:hover) {
    .marquee-words .marquee-wrap:hover .words-wrap {
        -webkit-animation-play-state: paused;
        animation-play-state: paused
    }

    .marquee-words .word:hover h2 {
        color: var(--c-brand)
    }

    .marquee-words .word:hover .doubleview rect {
        transform: scaleX(1)
    }
}

/* Merged from critical.css (exact duplicate blocks removed) */

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

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

@-ms-viewport {
    width: device-width
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
    display: block
}

body {
    margin: 0
}

[tabindex='-1']:focus {
    outline: 0 !important
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0
}

p {
    margin-top: 0
}

abbr[title],
abbr[data-original-title] {
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    cursor: help;
    border-bottom: 0
}

address {
    margin-bottom: 1rem;
    font-style: normal;
    line-height: inherit
}

ol,
ul,
dl {
    margin-top: 0;
    margin-bottom: 1rem
}

ol ol,
ul ul,
ol ul,
ul ol {
    margin-bottom: 0
}

dt {
    font-weight: 700
}

dd {
    margin-bottom: .5rem;
    margin-left: 0
}

blockquote {
    margin: 0 0 1rem
}

dfn {
    font-style: italic
}

b,
strong {
    font-weight: bolder
}

small {
    font-size: 80%
}

sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline
}

sub {
    bottom: -0.25em
}

sup {
    top: -0.5em
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects
}

a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none
}

a:not([href]):not([tabindex]):focus {
    outline: 0
}

pre,
code,
kbd,
samp {
    font-family: monospace;
    font-size: 1em
}

pre {
    margin-top: 0;
    margin-bottom: 1rem;
    overflow: auto;
    -ms-overflow-style: scrollbar
}

figure {
    margin: 0 0 1rem
}

img {
    vertical-align: middle;
    border-style: none
}

svg {
    overflow: hidden;
    vertical-align: middle
}

table {
    border-collapse: collapse
}

th {
    text-align: inherit
}

label {
    display: inline-block
}

button {
    border-radius: 0
}

button:focus {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color
}

input,
button,
select,
optgroup,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
    appearance: button
}

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
    padding: 0;
    border-style: none
}

input[type='radio'],
input[type='checkbox'] {
    box-sizing: border-box;
    padding: 0
}

input[type='date'],
input[type='time'],
input[type='datetime-local'],
input[type='month'] {
    -webkit-appearance: listbox;
    appearance: listbox
}

textarea {
    overflow: auto;
    resize: vertical
}

fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0
}

legend {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin-bottom: .5rem;
    font-size: 1.5rem;
    line-height: inherit;
    color: inherit;
    white-space: normal
}

progress {
    vertical-align: baseline
}

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
    height: auto
}

[type='search'] {
    outline-offset: -2px;
    -webkit-appearance: none;
    appearance: none
}

[type='search']::-webkit-search-cancel-button,
[type='search']::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button
}

output {
    display: inline-block
}

summary {
    display: list-item;
    cursor: pointer
}

template {
    display: none
}

[hidden] {
    display: none !important
}

.h-bg-zoom__img {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

::-moz-selection {
    background-color: rgba(var(--c-brand--rgb), 1);
    color: #fff
}

::selection {
    background-color: rgba(var(--c-brand--rgb), 1);
    color: #fff
}

body::-webkit-scrollbar {
    width: var(--scrollbar-width);
    max-height: 189px
}

body::-webkit-scrollbar-track {
    background: rgba(206, 206, 206, 0.3)
}

body::-webkit-scrollbar-thumb {
    background: var(--c-brand);
    border-radius: 50px
}

body::-webkit-scrollbar-thumb:hover {
    background: var(--c-sec)
}

body {
    --text-fx: 20px;
    --header-height: 104px;
    font: 400 var(--text-fx)/1.6 var(--font-def);
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga', 'dlig';
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 100vw;
    overflow-x: hidden;
    overflow-anchor: auto;
    -ms-scroll-chaining: none;
    overscroll-behavior: none;
    background: var(--c-light);
    padding-top: var(--header-height)
}

.noise-wrap {
    position: relative
}

.noise-wrap .noise-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1
}

.site-wrap {
    display: flex;
    flex-direction: column;
    flex: 1
}

.main-content {
    flex: 1 1 auto
}

.backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease-in-out;
    z-index: 2
}

.page--inner__content {
    padding-top: 0;
    padding-bottom: 80px
}

.container {
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin: 0 auto
}

img {
    max-width: 100%
}

.container {
    width: var(--container-w)
}

.blurred {
    --delayC: var(--delay, 0);
    filter: blur(var(--blur));
    -webkit-animation: blurAnim calc(var(--delayC) * -1s + 6s) ease-in-out calc(var(--delayC) * 1s) infinite;
    animation: blurAnim calc(var(--delayC) * -1s + 6s) ease-in-out calc(var(--delayC) * 1s) infinite;
    -webkit-animation-play-state: var(--animationPlayState);
    animation-play-state: var(--animationPlayState)
}

@-webkit-keyframes blurAnim {

    0%,
    100% {
        filter: blur(var(--blur))
    }

    50% {
        filter: blur(0)
    }
}

@keyframes blurAnim {

    0%,
    100% {
        filter: blur(var(--blur))
    }

    50% {
        filter: blur(0)
    }
}

.svg-arrows {
    -webkit-animation: svgArrows 3s ease-in-out infinite calc(var(--delay) * 1s);
    animation: svgArrows 3s ease-in-out infinite calc(var(--delay) * 1s)
}

@-webkit-keyframes svgArrows {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-5px)
    }
}

@keyframes svgArrows {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-5px)
    }
}

.dashOffset {
    --delayC: var(--delay, 0);
    --durationC: var(--duration, 10s);
    --dashFromC: calc(1 - var(--dashFrom, 0));
    --dashToC: calc(1 - var(--dashTo, 1));
    --opStartC: var(--opStart, 0);
    --strokeTo: calc(var(--dash) * var(--dashToC) * 1px);
    stroke-dasharray: var(--dash);
    stroke-dashoffset: calc(var(--dash) * var(--dashFromC) * 1px);
    -webkit-animation: dashAnim var(--durationC) ease-in-out infinite calc(var(--delayC) * 1s);
    animation: dashAnim var(--durationC) ease-in-out infinite calc(var(--delayC) * 1s)
}

@-webkit-keyframes dashAnim {

    0%,
    100% {
        opacity: var(--opStartC)
    }

    50% {
        stroke-dashoffset: var(--strokeTo);
        opacity: 1
    }
}

@keyframes dashAnim {

    0%,
    100% {
        opacity: var(--opStartC)
    }

    50% {
        stroke-dashoffset: var(--strokeTo);
        opacity: 1
    }
}

.upDown {
    --delayC: var(--delay, 0);
    --durationC: var(--durationUpDown, 6s);
    --loopY: var(--y, 10px);
    --endOp: var(--op, 0.8);
    -webkit-animation: upDownAnim var(--durationC) ease-in-out infinite calc(var(--delayC) * 1s);
    animation: upDownAnim var(--durationC) ease-in-out infinite calc(var(--delayC) * 1s)
}

@-webkit-keyframes upDownAnim {

    0%,
    100% {
        opacity: var(--endOp)
    }

    40%,
    60% {
        transform: translateY(var(--loopY));
        opacity: 1
    }
}

@keyframes upDownAnim {

    0%,
    100% {
        opacity: var(--endOp)
    }

    40%,
    60% {
        transform: translateY(var(--loopY));
        opacity: 1
    }
}

.progressScale {
    --delayC: var(--delay, 0);
    --durationC: var(--duration, 6s);
    -webkit-animation: progressAnimScale var(--durationC) ease-in-out infinite calc(var(--delayC) * 1s);
    animation: progressAnimScale var(--durationC) ease-in-out infinite calc(var(--delayC) * 1s)
}

@-webkit-keyframes progressAnimScale {

    0%,
    100% {
        transform: scaleX(var(--from))
    }

    50% {
        transform: scaleX(var(--to))
    }
}

@keyframes progressAnimScale {

    0%,
    100% {
        transform: scaleX(var(--from))
    }

    50% {
        transform: scaleX(var(--to))
    }
}

.progressTranslate {
    --delayC: var(--delay, 0);
    --durationC: var(--duration, 6s);
    -webkit-animation: progressAnimTranslate var(--durationC) ease-in-out infinite calc(var(--delayC) * 1s);
    animation: progressAnimTranslate var(--durationC) ease-in-out infinite calc(var(--delayC) * 1s)
}

@-webkit-keyframes progressAnimTranslate {

    0%,
    100% {
        transform: translate(var(--fromX), var(--fromY))
    }

    50% {
        transform: translate(var(--toX), var(--toY))
    }
}

@keyframes progressAnimTranslate {

    0%,
    100% {
        transform: translate(var(--fromX), var(--fromY))
    }

    50% {
        transform: translate(var(--toX), var(--toY))
    }
}

.dasharrFillAnim {
    --fill: white;
    --fillEnd: transparent;
    --delay: 0;
    fill: transparent;
    stroke-dasharray: var(--dash);
    stroke-dashoffset: var(--dash);
    -webkit-animation: dasharrFill 10s ease-in-out infinite calc(var(--delay) * 1s);
    animation: dasharrFill 10s ease-in-out infinite calc(var(--delay) * 1s)
}

@-webkit-keyframes dasharrFill {

    0%,
    100% {
        fill: var(--fillEnd)
    }

    48%,
    52% {
        fill: var(--fill)
    }

    30%,
    70% {
        stroke-dashoffset: 0
    }
}

@keyframes dasharrFill {

    0%,
    100% {
        fill: var(--fillEnd)
    }

    48%,
    52% {
        fill: var(--fill)
    }

    30%,
    70% {
        stroke-dashoffset: 0
    }
}

.doubleview-underline {
    --delayStep: .4s;
    --delayStepOffset: .1s;
    position: relative;
    color: black !important;
    display: inline-block
}

.doubleview-underline:before {
    position: absolute;
    content: '';
    bottom: -1px;
    left: 0;
    width: 100%;
    height: .2em;
    background-color: var(--doubleview-color);
    -webkit-clip-path: url(#underlinedoubleviewID);
    clip-path: url(#underlinedoubleviewID);
    opacity: .25;
    z-index: -1;
    transform-origin: left;
    transform: scaleX(0);
    -webkit-animation: doubleviewWord .3s ease-in-out forwards;
    animation: doubleviewWord .3s ease-in-out forwards
}

.doubleview-underline:nth-child(1):before {
    -webkit-animation-delay: calc(var(--delayStep) * 1);
    animation-delay: calc(var(--delayStep) * 1)
}

.doubleview-underline:nth-child(2):before {
    -webkit-animation-delay: calc(var(--delayStep) * 2 - var(--delayStepOffset));
    animation-delay: calc(var(--delayStep) * 2 - var(--delayStepOffset))
}

.doubleview-underline:nth-child(3):before {
    -webkit-animation-delay: calc(var(--delayStep) * 3 - var(--delayStepOffset));
    animation-delay: calc(var(--delayStep) * 3 - var(--delayStepOffset))
}

.doubleview-underline:nth-child(4):before {
    -webkit-animation-delay: calc(var(--delayStep) * 4 - var(--delayStepOffset));
    animation-delay: calc(var(--delayStep) * 4 - var(--delayStepOffset))
}

.doubleview-underline:nth-child(5):before {
    -webkit-animation-delay: calc(var(--delayStep) * 5 - var(--delayStepOffset));
    animation-delay: calc(var(--delayStep) * 5 - var(--delayStepOffset))
}

.doubleview-underline:nth-child(6):before {
    -webkit-animation-delay: calc(var(--delayStep) * 6 - var(--delayStepOffset));
    animation-delay: calc(var(--delayStep) * 6 - var(--delayStepOffset))
}

.doubleview-underline:nth-child(7):before {
    -webkit-animation-delay: calc(var(--delayStep) * 7 - var(--delayStepOffset));
    animation-delay: calc(var(--delayStep) * 7 - var(--delayStepOffset))
}

.doubleview-underline:nth-child(8):before {
    -webkit-animation-delay: calc(var(--delayStep) * 8 - var(--delayStepOffset));
    animation-delay: calc(var(--delayStep) * 8 - var(--delayStepOffset))
}

.doubleview-underline:nth-child(9):before {
    -webkit-animation-delay: calc(var(--delayStep) * 9 - var(--delayStepOffset));
    animation-delay: calc(var(--delayStep) * 9 - var(--delayStepOffset))
}

.doubleview-underline:nth-child(10):before {
    -webkit-animation-delay: calc(var(--delayStep) * 10 - var(--delayStepOffset));
    animation-delay: calc(var(--delayStep) * 10 - var(--delayStepOffset))
}

@-webkit-keyframes doubleviewWord {
    to {
        transform: scaleX(1)
    }
}

@keyframes doubleviewWord {
    to {
        transform: scaleX(1)
    }
}

.mb0 {
    margin-bottom: 0
}

.mb40 {
    margin-bottom: 40px
}

.text-center {
    text-align: center
}

.bg-gray {
    background-color: #f4f6f9 !important
}

.c-brand {
    color: var(--c-brand) !important
}

.h-bg-zoom {
    position: relative;
    display: block;
    overflow: hidden
}

.h-bg-zoom__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all .2s ease-in-out
}

.h-bg-zoom:hover .h-bg-zoom__img {
    transform: scale(1.05)
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-titles);
    color: #111;
    font-weight: 600
}

p {
    color: var(--c-dark);
    margin-bottom: 1em
}

h1 {
    font-weight: 700;
    font-size: 48px
}

h2 {
    font-size: 80px;
    font-weight: 700
}

h2.h2--lg {
    font-size: 120px
}

h2.h2--label {
    text-transform: uppercase;
    font-size: 18px
}

h3 {
    font-size: 44px
}

h3.h3--lg {
    font-size: 48px
}

h4 {
    font-size: 26px;
    font-weight: 600
}

h5 {
    font-size: 24px;
    font-weight: 500
}

h6 {
    font-size: 20px
}

h6.h6--sm {
    font-size: 16px
}

.main-content p a:not(.btn),
.main-content li a:not(.btn),
.main-content blockquote a:not(.btn) {
    color: var(--c-brand);
    font-weight: 600;
    text-decoration: underline
}

ul.ul-checkmarks {
    list-style: none;
    padding-left: 0
}

ul.ul-checkmarks li {
    position: relative;
    padding-left: 33px;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
    color: var(--c-dark)
}

ul.ul-checkmarks li:before {
    position: absolute;
    content: '';
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 21px;
    height: 16px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='16' viewBox='0 0 21 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2.60156' y='5.98535' width='9.80942' height='3.67853' transform='rotate(45 2.60156 5.98535)' fill='%234068EB'/%3E%3Crect x='4.76855' y='13.3984' width='18.9489' height='3.67853' transform='rotate(-45 4.76855 13.3984)' fill='%2362BF94'/%3E%3C/svg%3E%0A")
}

ul.ul-checkmarks li:not(:last-of-type) {
    margin-bottom: 20px
}

ul.ul-checkmarks.ul-intersection li:before {
    position: absolute;
    content: '';
    top: 10px;
    left: 5px;
    transform: translateY(-50%) rotate(45deg) scaleY(0);
    width: 4px;
    height: 19px;
    background-color: #F50779;
    transition: all .3s ease-in-out .5s;
    transform-origin: bottom;
    background-image: none
}

ul.ul-checkmarks.ul-intersection li:after {
    position: absolute;
    content: '';
    top: 10px;
    left: 0;
    transform: translateY(30%) rotate(-45deg) scaleY(0);
    width: 4px;
    height: 10px;
    background-color: #0B8194;
    transition: all .3s ease-in-out .3s;
    transform-origin: top;
    background-image: none
}

ul.ul-checkmarks.ul-intersection li.inView:before {
    transform: translateY(-50%) rotate(45deg) scaleY(1)
}

ul.ul-checkmarks.ul-intersection li.inView:after {
    transform: translateY(30%) rotate(-45deg) scaleY(1)
}

.btn {
    --padd: 20px 40px;
    --fz: 20px;
    padding: var(--padd);
    font-size: var(--fz);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    font-weight: 600;
    border: 1px solid transparent;
    letter-spacing: .8px;
    text-transform: capitalize;
    text-decoration: none !important;
    border-radius: 6px;
    cursor: pointer;
    transition: all .2s ease-in-out
}

.btn--brand {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: #fff !important
}

.btn--brand:hover {
    background: rgba(var(--c-brand--rgb), 0.8);
    border-color: rgba(var(--c-brand--rgb), 0.8)
}

.btn--white {
    --padd: 22px 54px;
    --fz: 16px;
    font-weight: 600;
    background: var(--c-light);
    border-color: var(--c-light);
    color: var(--c-brand) !important
}

.btn--white:hover {
    opacity: .9
}

.btn--brand-outline {
    background: #fff;
    border-color: var(--c-brand);
    color: var(--c-brand)
}

.btn--brand-outline:hover {
    background: var(--c-brand);
    color: #fff !important
}

.btn--sec {
    background: var(--c-sec);
    border-color: var(--c-sec);
    color: #fff !important
}

.btn--sec:hover {
    background: rgba(var(--c-sec--rgb), 0.8);
    border-color: rgba(var(--c-sec--rgb), 0.8)
}

.btn--sec-outline {
    background: #fff;
    border-color: var(--c-sec);
    color: var(--c-sec)
}

.btn--sec-outline:hover {
    background: var(--c-sec);
    color: #fff !important
}

.btn--ghost {
    color: var(--c-dark)
}

.btn--ghost:hover {
    background-color: #fff;
    color: var(--c-brand)
}

.btn--ghost--brand {
    color: var(--c-brand)
}

.btn--ghost--brand:hover {
    background-color: var(--c-brand);
    border-color: var(--c-brand);
    color: #fff
}

.btn--ghost--sec {
    color: var(--c-sec)
}

.btn--ghost--sec:hover {
    background-color: var(--c-sec);
    border-color: var(--c-sec);
    color: #fff
}

.btn--back {
    font-size: 16px;
    font-weight: 600;
    color: var(--c-brand);
    padding: 2px 10px
}

.btn--back svg {
    margin-right: 4px;
    transition: all .4s ease-in-out
}

.btn--back:hover {
    opacity: .8
}

.btn--back:hover svg {
    transform: translateX(-4px)
}

.navbar-toggler {
    --bgc-color: var(--c-brand);
    --border-color: var(--c-brand);
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    outline: none !important;
    padding: 0;
    cursor: pointer;
    transition: all var(--mobileCollapseTransitionDuration) ease-in-out var(--maxDelay)
}

.navbar-toggler:disabled {
    opacity: .8
}

.navbar-toggler:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
    transition: all .2s ease-in-out;
    background-color: var(--bgc-color);
    border-radius: 50%;
    border: 2px solid var(--border-color)
}

.navbar-toggler:after {
    content: '';
    position: absolute;
    top: -18px;
    right: -16px;
    width: var(--header-height);
    height: var(--header-height);
    background: var(--c-silver);
    transform: translateY(-100%);
    opacity: 0;
    transition: opacity calc(var(--mobileCollapseTransitionDuration) * 2) ease-in-out calc(var(--maxDelay) + var(--mobileCollapseTransitionDuration)), transform calc(var(--mobileCollapseTransitionDuration) * 2) ease-in-out calc(var(--maxDelay) + var(--mobileCollapseTransitionDuration));
    z-index: -1
}

.navbar-toggler:focus {
    outline: none !important
}

.navbar-toggler svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    transition: all var(--mobileCollapseTransitionDuration) ease-in-out var(--maxDelay)
}

.navbar-toggler svg:last-of-type {
    transform: translate(-50%, -50%) scale(0) rotate(-180deg);
    opacity: 0
}

body.single-post .header {
    position: fixed;
    top: 0
}

body.single-post.jsOnScroll-header:not(.post-end) .header {
    box-shadow: none;
    transform: translateY(-100%)
}

body.single-post.jsOnScroll-header .navbar-toggler {
    --bgc-color: var(--c-brand);
    --border-color: var(--c-brand)
}

body.single-post.jsOnScroll-header .navbar-toggler:before {
    background-color: var(--bgc-color);
    border-color: var(--border-color)
}

body.single-post.jsOnScroll-header.js-mob-menu-open .navbar-toggler {
    --bgc-color: white;
    --border-color: var(--c-brand)
}

body.single-post:not(.jsOnScroll-header) .header {
    --link-color: var(--c-light);
    background: transparent
}

body.single-post:not(.jsOnScroll-header) .header .navbar-brand path {
    fill: var(--c-light)
}

body.single-post:not(.post-end) .header {
    border-color: transparent
}

body.single-post.post-end .header {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    background-color: #fff
}

body.single-post.post-end .header .navbar {
    padding: 14px 0
}

body.single-post.post-end .navbar-toggler:after {
    top: -18px
}

body.single-post.post-end .navbar-brand,
body.single-post.post-end .navbar-toggler {
    opacity: 1
}

body.single-post.post-end .navbar-brand path {
    fill: var(--c-brand)
}

body.single-post.js-mob-menu-open .header {
    background-color: #fff
}

body.single-post.js-mob-menu-open .header .navbar-brand path {
    fill: var(--c-brand)
}

.header {
    --link-color: var(--c-dark);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 4;
    background: var(--c-light);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transition: all .2s ease-in-out
}

.header__btn-wrap {
    --store-btn-pb: 0;
    display: inline-flex;
    padding-bottom: var(--store-btn-pb);
    box-shadow: 0 0;
    flex-shrink: 0
}

.header__btn,
.header .product-hunt-badge a {
    display: inline-flex;
    transition: opacity .2s ease-in-out
}

.header__btn:hover,
.header .product-hunt-badge a:hover {
    opacity: .9
}

.header__btn {
    width: auto
}

.header__btn>svg {
    width: 100%;
    height: auto
}

.download-btn {
    --download-btn-bg: #0B8194;
    --download-btn-fg: #fff;
    --download-btn-icon-bg: rgba(255, 255, 255, 0.18);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 7px 12px 7px 9px;
    border-radius: 999px;
    background: var(--download-btn-bg);
    color: var(--download-btn-fg);
    text-decoration: none;
    font-family: var(--font-def), sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    transition: transform .2s ease-in-out, box-shadow .2s ease-in-out, opacity .2s ease-in-out
}

.download-btn:hover {
    color: var(--download-btn-fg);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(11, 129, 148, 0.2)
}

.download-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px
}

.download-btn__icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--download-btn-icon-bg);
    flex-shrink: 0
}

.download-btn__icon svg {
    width: 20px;
    height: 20px
}

.download-btn__icon path {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.25
}

.download-btn__label {
    display: inline-flex;
    align-items: center;
    margin-left: 3px;
    line-height: 1;
    white-space: nowrap
}

.download-btn--light {
    --download-btn-bg: #fff;
    --download-btn-fg: #0B8194;
    --download-btn-icon-bg: rgba(11, 129, 148, 0.14)
}

.app-request-modal[hidden] {
    display: none
}

.app-request-modal {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 18px
}

.app-request-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 23, 38, 0.64);
    opacity: 0;
    transition: opacity .24s ease
}

.app-request-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 520px);
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(11, 129, 148, 0.15);
    box-shadow: 0 26px 70px rgba(7, 35, 58, 0.22);
    padding: 30px 30px 28px;
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    transition: opacity .24s ease, transform .24s ease
}

.app-request-modal.is-open .app-request-modal__backdrop {
    opacity: 1
}

.app-request-modal.is-open .app-request-modal__dialog {
    opacity: 1;
    transform: translateY(0) scale(1)
}

.app-request-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(11, 129, 148, 0.1);
    color: #0B8194;
    cursor: pointer;
    transition: background .2s ease, color .2s ease
}

.app-request-modal__close:hover {
    background: rgba(11, 129, 148, 0.2)
}

.app-request-modal__close:focus-visible {
    outline: 2px solid #0B8194;
    outline-offset: 2px
}

.app-request-modal__close svg {
    width: 16px;
    height: 16px
}

.app-request-modal__close path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round
}

.app-request-modal__title {
    margin: 0 34px 10px 0;
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.1;
    color: #052f35
}

.app-request-modal__subtitle {
    margin: 0 0 18px;
    color: rgba(5, 47, 53, 0.85)
}

.app-request-modal__form {
    display: grid;
    gap: 12px
}

.app-request-modal__label {
    padding: 0;
    font-size: 15px;
    font-weight: 700;
    color: #052f35
}

.app-request-modal__input {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid rgba(11, 129, 148, 0.28);
    border-radius: 14px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.3;
    color: #052f35;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease
}

.app-request-modal__input:focus {
    border-color: #0B8194;
    box-shadow: 0 0 0 3px rgba(11, 129, 148, 0.2);
    outline: none
}

.app-request-modal__submit {
    margin-top: 2px;
    min-height: 48px;
    border: 0;
    border-radius: 14px;
    background: #0B8194;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease
}

.app-request-modal__submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 9px 18px rgba(11, 129, 148, 0.25)
}

.app-request-modal__submit:focus-visible {
    outline: 2px solid #0B8194;
    outline-offset: 2px
}

.app-request-modal__submit[disabled] {
    opacity: .7;
    cursor: wait;
    transform: none;
    box-shadow: none
}

.app-request-modal__status {
    min-height: 1.3em;
    margin: 2px 0 0;
    font-size: 14px;
    line-height: 1.4
}

.app-request-modal__status.is-error {
    color: #b02231
}

.app-request-modal__status.is-success {
    color: #047857
}

body.app-request-modal-open {
    overflow: hidden
}

.store-badge-img {
    display: block;
    width: 250px;
    height: auto
}

@media (max-width: 575px) {
    .app-request-modal {
        padding: 12px
    }

    .app-request-modal__dialog {
        border-radius: 18px;
        padding: 24px 18px 20px
    }

    .app-request-modal__title {
        margin-right: 28px;
        font-size: 27px
    }
}

.hero-home .btns-wrap a.download-btn,
.main-cta-section a.download-btn {
    display: inline-flex;
    align-items: center
}

.header .product-hunt-badge a {
    height: 40px;
    display: inline-block
}

.header .product-hunt-badge a img {
    height: 100%
}

.header .navbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 36px 0 28px;
    transition: all .2s ease-in-out
}

.header a {
    text-decoration: none
}

.header .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    width: auto
}

.header .navbar-brand__logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    flex-shrink: 0
}

.header .navbar-brand__name {
    font-family: var(--font-def), sans-serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
    color: var(--link-color);
    white-space: nowrap
}

.header .navbar-brand svg,
.header .navbar-brand img {
    max-width: 100%;
    height: auto
}

.header .navbar-nav {
    display: flex;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none
}

.header .navbar-collapse {
    display: flex;
    align-items: center
}

.header .nav-link {
    position: relative;
    display: inline-flex;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--link-color) !important;
    text-decoration: none;
    transition: all .2s ease-in-out
}

.header .nav-link:before {
    content: '';
    position: absolute;
    bottom: .36em;
    left: 0;
    height: 4px;
    width: 100%;
    opacity: .1;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 18 4' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.42,3.297C0.402,3.2 0.367,3.34 0.315,3.297C0.353,3.219 0.37,3.105 0.336,2.999C0.389,2.943 0.43,2.869 0.504,2.933C0.398,2.524 0.385,2.079 0.315,1.772C0.244,1.823 0.201,1.778 0.147,1.673C0.45,1.386 0.091,0.95 0.273,0.646C0.237,0.437 0.049,0.469 -0,0.281C0.036,0.077 0.13,-0.003 0.232,0C0.238,0 17.106,0.001 17.113,0.002C17.318,0.029 17.54,0.377 17.365,0.712C17.488,1.431 17.68,2.414 17.47,3.066C17.614,3.274 17.49,3.479 17.49,3.795C17.46,3.829 17.439,3.844 17.414,3.847C17.41,3.847 0.545,3.847 0.541,3.847C0.519,3.847 0.495,3.839 0.461,3.828C0.481,3.633 0.3,3.432 0.419,3.298L0.42,3.297Z' fill='%23ffa900'/%3E%3C/svg%3E%0A");
    background-size: 100%;
    transform-origin: left;
    transform: scaleX(0);
    transition: all .3s cubic-bezier(0.22, 0.61, 0.36, 1)
}

.header .nav-link:hover:before,
.header .nav-link.active:before,
.header .nav-link:focus:before {
    transform: scaleX(1);
    opacity: .79
}

.single-post-sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 12px;
    padding-bottom: 12px;
    z-index: 5;
    border-bottom: 4px solid var(--c-silver);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-100%);
    transition: all .3s ease-in-out
}

.single-post-sticky-header:before {
    content: '';
    position: absolute;
    top: 100%;
    height: 4px;
    width: 100%;
    background: var(--c-tert);
    transform-origin: left;
    transform: scaleX(var(--scrollProgress, 0));
    transition: all .1s linear;
    z-index: 6
}

.single-post-sticky-header h2.h2--label {
    text-transform: none;
    font-weight: 500;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.single-post-sticky-header .navbar-brand {
    padding: 0;
    width: 117px;
    display: none
}

.single-post-sticky-header .navbar-brand svg,
.single-post-sticky-header .navbar-brand img {
    max-width: 100%;
    height: auto
}

.single-post-sticky-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 14px !important;
    padding-left: 14px !important
}

.single-post-sticky-header .cell-1 {
    margin-right: 20px;
    width: calc(100% - 330px)
}

.single-post-sticky-header .cell-2 {
    position: relative;
    display: flex;
    align-items: center
}

.single-post-sticky-header .cell-2 a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    border-radius: 50px;
    width: 32px;
    height: 32px;
    border: 1px solid var(--c-dark);
    transition: all .2s ease-in-out
}

.single-post-sticky-header .cell-2 a:not(:first-of-type) {
    margin-left: 12px
}

.single-post-sticky-header .cell-2 a path {
    transition: all .2s ease-in-out
}

.single-post-sticky-header .share-label {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 0;
    text-transform: uppercase;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    transform: translate(12px, -50%);
    opacity: 0;
    transition: all .2s ease-in-out
}

.single-post-sticky-header .cell-2:hover .share-label {
    transform: translate(0, -50%);
    opacity: 1
}

.single-post-sticky-header .navbar-toggler {
    margin-left: 12px;
    display: none;
    transition: all .2s ease-in-out .6s
}

body.single-post.jsOnScroll-header .single-post-sticky-header {
    background: var(--c-light);
    pointer-events: all;
    transform: translateY(0);
    opacity: 1
}

body.single-post.jsOnScroll-header.post-end .single-post-sticky-header {
    pointer-events: none;
    transform: translateY(-100%)
}

body.single-post.js-mob-menu-open .single-post-sticky-header .navbar-toggler {
    margin-left: 30px;
    transition: all .2s ease-in-out
}

body.single-post,
body.page-template-t-generic {
    padding-top: 0;
    --single-padd-top: 124px;
    --single-padd-btm: 104px;
    --single-padd-hor: 15px;
    --single-image-offset: 108px;
    --debug: 0
}

body.page-template-t-generic .single-content .content>h1:first-child {
    margin-top: 40px;
    margin-bottom: 30px
}

body.page-template-t-generic .single-content .content>h1:first-child+p.has-drop-cap:first-letter {
    float: left;
    font-size: 3.1em;
    font-family: var(--font-serif);
    font-weight: 700;
    line-height: .68;
    text-transform: uppercase;
    font-style: normal;
    margin: .2em .1em 0 0
}

.single-hero {
    --padd-t: 204px;
    --padd-b: 58px;
    padding-bottom: var(--padd-b);
    padding-top: var(--padd-t);
    background: linear-gradient(259.04deg, var(--h-lg-start) 8.22%, var(--h-lg-end) 90.02%)
}

.single-hero * {
    color: var(--c-light)
}

.single-hero .tr-img-wrap img {
    -o-object-fit: cover;
    object-fit: cover;
}

.single-hero .container {
    display: flex;
    flex-wrap: wrap;
    align-items: space-between
}

.single-hero .cell-1,
.single-hero .cell-2,
.single-hero .cell-3,
.single-hero .cell-4 {
    flex-shrink: 0
}

.single-hero .cell-1,
.single-hero .cell-3 {
    width: calc(100% - var(--single-hero-right-w));
    padding-right: 40px
}

.single-hero .cell-2 {
    margin-bottom: 54px;
    padding-top: 41px
}

.single-hero .cell-3 {
    display: flex;
    align-items: flex-end
}

.single-hero .cell-2,
.single-hero .cell-4 {
    width: var(--single-hero-right-w)
}

.single-hero h1 {
    line-height: 1.2;
    margin-bottom: 30px;
    word-break: break-word
}

.single-hero .author-wrap {
    margin-top: auto
}

.single-hero__excerpt {
    font-size: 26px;
    line-height: 1.31;
    margin-bottom: 0
}

.single-hero .h-bg-zoom {
    opacity: calc(var(--debug) * (0.5 - 1) + 1);
    margin-bottom: calc(-1 * var(--single-post-thumb-offset) - var(--padd-b))
}

.single-hero .h-bg-zoom .h-bg-zoom__img {
    transform: scale(1)
}

.f-row {
    --cols: var(--i-cols, 2);
    --gap: var(--i-gap, 0);
    --mb: var(--i-mb, var(--gap));
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: calc(100% + var(--gap) * 1px);
    margin-left: calc(var(--gap) * -0.5px);
    margin-bottom: calc(var(--mb) * -1px)
}

.f-row .col {
    width: calc((100% - (var(--gap) * var(--cols)) * 1px) / var(--cols));
    margin-bottom: calc(var(--mb) * 1px);
    margin-left: calc(var(--gap) * 0.5px);
    margin-right: calc(var(--gap) * 0.5px)
}

.f-row.two-cols-custom {
    --cols: 2;
    --first-col-w: var(--i-first-col-w, 50%)
}

.f-row.two-cols-custom .col:first-of-type {
    width: calc(var(--first-col-w) - var(--gap) * 1px)
}

.f-row.two-cols-custom .col:last-of-type {
    flex: 1
}

.hero-home {
    --main-svg-w: 950px;
    --main-svg-h: calc(var(--main-svg-w) * 0.6);
    --text-maw: 808px;
    --animationPlayState: running;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 44px;
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden
}

.hero-home:not(.inView) {
    --animationPlayState: paused
}

.hero-home canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none
}

.hero-home h1,
.hero-home h6 {
    max-width: var(--text-maw);
    text-align: center
}

.hero-home h1,
.hero-home h6,
.hero-home a {
    z-index: 1
}

.hero-home h1 {
    line-height: 1.208
}

.hero-home h6 {
    margin-top: 20px
}

.hero-home .btns-wrap {
    display: flex;
    gap: 16px;
    margin-top: 28px
}

.hero-home .btns-wrap a {
    display: inline-block;
    transition: opacity .2s ease-in-out
}

.hero-home .btns-wrap a:hover {
    opacity: .8
}

.hero-home .btns-wrap>*:not(.product-hunt-badge) {
    width: 183px
}

.hero-home .hero-media-main {
    --startAngle: 0;
    --startScale: .9;
    --loopY: 4px;
    margin-top: 20px;
    width: var(--main-svg-w);
    height: var(--main-svg-h);
    -webkit-animation: mainReveal .6s ease-in-out forwards, mainLoop 5s ease-in-out infinite 1s;
    animation: mainReveal .6s ease-in-out forwards, mainLoop 5s ease-in-out infinite 1s;
    -webkit-animation-play-state: var(--animationPlayState);
    animation-play-state: var(--animationPlayState)
}

.hero-home .hero-media-main__shapes {
    --startAngle: -20deg;
    transform: scale(0.5) rotate(var(--startAngle));
    opacity: 0;
    -webkit-animation: mainReveal .4s ease-in-out forwards .3s;
    animation: mainReveal .4s ease-in-out forwards .3s;
    -webkit-animation-play-state: var(--animationPlayState);
    animation-play-state: var(--animationPlayState)
}

.hero-home .hero-media-main__card {
    --startAngle: -20deg;
    transform: scale(0.5) rotate(var(--startAngle));
    opacity: 0
}

.hero-home .hero-media-main__card.hero-media-main__card--first {
    -webkit-animation: mainReveal .6s ease-in-out forwards calc(0.4s + var(--delay)), mainCardLoop 5s ease-in-out infinite .4s;
    animation: mainReveal .6s ease-in-out forwards calc(0.4s + var(--delay)), mainCardLoop 5s ease-in-out infinite .4s;
    -webkit-animation-play-state: var(--animationPlayState);
    animation-play-state: var(--animationPlayState)
}

.hero-home .hero-media-main__card:not(.hero-media-main__card--first) {
    -webkit-animation: mainReveal .6s ease-in-out forwards calc(0.4s + var(--delay)), cardLoop 5s ease-in-out infinite calc(0.4s + var(--delay));
    animation: mainReveal .6s ease-in-out forwards calc(0.4s + var(--delay)), cardLoop 5s ease-in-out infinite calc(0.4s + var(--delay));
    -webkit-animation-play-state: var(--animationPlayState);
    animation-play-state: var(--animationPlayState)
}

.hero-home .hero-media-main__card__progress {
    -webkit-animation: cardProgress 4s ease-in-out infinite calc(var(--delay) + 1s);
    animation: cardProgress 4s ease-in-out infinite calc(var(--delay) + 1s);
    -webkit-animation-play-state: var(--animationPlayState);
    animation-play-state: var(--animationPlayState)
}

.hero-home .hero-media-main__card__icon {
    -webkit-animation: cardIcon 4s ease-in-out infinite calc(var(--delay) + 1s);
    animation: cardIcon 4s ease-in-out infinite calc(var(--delay) + 1s);
    -webkit-animation-play-state: var(--animationPlayState);
    animation-play-state: var(--animationPlayState)
}

.hero-home .hero-media-main__card__text {
    -webkit-animation: cardText 4s ease-in-out infinite calc(var(--delay) + 1s);
    animation: cardText 4s ease-in-out infinite calc(var(--delay) + 1s);
    -webkit-animation-play-state: var(--animationPlayState);
    animation-play-state: var(--animationPlayState)
}

.hero-home .hero-media-main__logo path {
    --fill: white;
    --delay: var(--logoDelay);
    stroke: white;
    -webkit-animation-play-state: var(--animationPlayState);
    animation-play-state: var(--animationPlayState)
}

.hero-home .hero-media-main image {
    --waveAngle: 6deg;
    opacity: 0;
    transform: translate(-20px, 20px) rotate(calc(var(--waveAngle) * -1));
    -webkit-animation: handReveal .8s ease-in-out forwards .5s, handWave 3s ease-in-out infinite 1.3s;
    animation: handReveal .8s ease-in-out forwards .5s, handWave 3s ease-in-out infinite 1.3s;
    -webkit-animation-play-state: var(--animationPlayState);
    animation-play-state: var(--animationPlayState)
}

@-webkit-keyframes handReveal {
    to {
        transform: translate(0, 0) rotate(calc(var(--waveAngle) * -1));
        opacity: 1
    }
}

@keyframes handReveal {
    to {
        transform: translate(0, 0) rotate(calc(var(--waveAngle) * -1));
        opacity: 1
    }
}

@-webkit-keyframes mainCardLoop {

    0%,
    100% {
        transform: scale(1) rotate(0)
    }

    50% {
        transform: scale(1) translate(-4px, 6px) rotate(3deg)
    }
}

@keyframes mainCardLoop {

    0%,
    100% {
        transform: scale(1) rotate(0)
    }

    50% {
        transform: scale(1) translate(-4px, 6px) rotate(3deg)
    }
}

@-webkit-keyframes cardText {
    50% {
        transform: scale(0.8)
    }
}

@keyframes cardText {
    50% {
        transform: scale(0.8)
    }
}

@-webkit-keyframes cardProgress {
    50% {
        transform: scaleX(0.2);
        opacity: .1
    }
}

@keyframes cardProgress {
    50% {
        transform: scaleX(0.2);
        opacity: .1
    }
}

@-webkit-keyframes cardIcon {
    50% {
        transform: scale(1.2)
    }
}

@keyframes cardIcon {
    50% {
        transform: scale(1.2)
    }
}

@-webkit-keyframes cardLoop {

    0%,
    100% {
        transform: scale(1) rotate(0)
    }

    50% {
        transform: scale(0.9) rotate(6deg)
    }
}

@keyframes cardLoop {

    0%,
    100% {
        transform: scale(1) rotate(0)
    }

    50% {
        transform: scale(0.9) rotate(6deg)
    }
}

@-webkit-keyframes handWave {

    0%,
    100% {
        transform: translate(0, 0) rotate(calc(var(--waveAngle) * -1))
    }

    50% {
        transform: translate(0, 0) rotate(var(--waveAngle))
    }
}

@keyframes handWave {

    0%,
    100% {
        transform: translate(0, 0) rotate(calc(var(--waveAngle) * -1))
    }

    50% {
        transform: translate(0, 0) rotate(var(--waveAngle))
    }
}

.hero-home .hero-media-side {
    --startAngle: 20deg;
    --loopY: -4px;
    position: absolute;
    transform: scale(0.5) rotate(var(--startAngle));
    opacity: 0;
    -webkit-animation: mainReveal .6s ease-in-out forwards calc(0.8s + var(--delay));
    animation: mainReveal .6s ease-in-out forwards calc(0.8s + var(--delay))
}

.hero-home .hero-media-side--camera {
    --startAngle: -20deg;
    --delay: .2s;
    bottom: calc(var(--main-svg-h) * 0.3);
    left: 25px
}

.hero-home .hero-media-side--camera .tr-img-wrap-outer {
    --size-w-original: 100 !important;
    --size-h-original: 100 !important
}

.hero-home .hero-media-side--avatar {
    --startAngle: -20deg;
    --delay: .05s;
    width: calc(var(--main-svg-w) * 0.363);
    height: auto;
    bottom: calc(var(--main-svg-h) * 0.6)
}

.hero-home .hero-media-side--avatar:not(.hero-media-side--avatar-right) {
    left: 120px
}

.hero-home .hero-media-side--avatar-right {
    --startAngle: 20deg;
    left: auto;
    right: 120px;
    bottom: calc(var(--main-svg-h) * 0.8)
}

.hero-home .hero-media-side--right {
    --delay: .05s;
    width: calc(var(--main-svg-w) * 0.2136);
    height: auto;
    right: -10px;
    bottom: calc(var(--main-svg-h) * 0.9)
}

.hero-home .hero-media-side--calendar {
    --delay: .2s;
    bottom: calc(var(--main-svg-h) * 1.3);
    right: 20px
}

.hero-home .hero-media-side--calendar .tr-img-wrap-outer {
    --size-w-original: 100 !important;
    --size-h-original: 100 !important
}

@-webkit-keyframes mainReveal {
    from {
        transform: scale(var(--startScale, 0.5)) rotate(var(--startAngle));
        opacity: 0
    }

    to {
        transform: scale(1) rotate(0);
        opacity: 1
    }
}

@keyframes mainReveal {
    from {
        transform: scale(var(--startScale, 0.5)) rotate(var(--startAngle));
        opacity: 0
    }

    to {
        transform: scale(1) rotate(0);
        opacity: 1
    }
}

@-webkit-keyframes mainLoop {

    0%,
    100% {
        transform: scale(1) rotate(90) translateY(0)
    }

    50% {
        transform: scale(1) rotate(0) translateY(var(--loopY))
    }
}

@keyframes mainLoop {

    0%,
    100% {
        transform: scale(1) rotate(0) translateY(0)
    }

    50% {
        transform: scale(1) rotate(0) translateY(var(--loopY))
    }
}

.hero-features {
    --cont-w: 1060px;
    --padd-h: 20px;
    --sec-padd-btm: 250px;
    --feature-icon-w: 122px;
    --feature-icon-h: calc(var(--feature-icon-w) * 0.92622950819);
    --icon-innermost-w: calc(var(--feature-icon-w) * 0.405);
    --icon-innermost-h: calc(var(--feature-icon-h) * 0.4032);
    --icon-m-vert-normalized: calc((var(--feature-icon-h) - var(--icon-innermost-h)) * 0.5);
    --rotated-icon-offset: 18px;
    --icon-mb-base: 10px;
    --icon-mb: calc(var(--icon-mb-base) + var(--rotated-icon-offset));
    --icon-cell-w: 192px;
    --icon-cell-mb: 78px;
    --mob-top: 10px;
    --mob-img-h: 957px;
    --mob-img-w: 410px;
    --icons-wrap-h: calc(var(--icon-cell-w) * 2 + var(--icon-cell-mb));
    --sticky-top: 280px;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 80px;
    padding-bottom: var(--sec-padd-btm);
    overflow-y: clip
}

.hero-features+.main-cta-section {
    z-index: 2
}

.hero-features+.main-cta-section+.five-cards-and-list {
    z-index: 2
}

.hero-features__title,
.hero-features__subtitle {
    color: var(--c-dark);
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    padding-right: 20px;
    padding-left: 20px;
    z-index: 3;
    max-width: 630px;
    opacity: 0;
    transform: scale(0.6);
    -webkit-animation: revealText .4s ease-in-out calc(1s * var(--delay)) forwards;
    animation: revealText .4s ease-in-out calc(1s * var(--delay)) forwards
}

.hero-features__title {
    line-height: 1.28;
    margin-bottom: 20px
}

.hero-features__subtitle {
    line-height: 1.2;
    margin-bottom: 70px
}

.hero-features .feature-icon {
    --icon-anim-angle: -3deg;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    width: var(--icon-innermost-w);
    height: var(--icon-innermost-h);
    background-color: rgba(var(--base-c-rgb), 0.2);
    margin-left: auto;
    margin-right: auto;
    margin-top: calc(var(--icon-m-vert-normalized) + var(--rotated-icon-offset));
    margin-bottom: calc(var(--icon-m-vert-normalized) + var(--icon-mb));
    transform-origin: center;
    -webkit-animation: featured-icon-wrap-anim 3.6s ease-in-out infinite var(--anim-delay);
    animation: featured-icon-wrap-anim 3.6s ease-in-out infinite var(--anim-delay)
}

.hero-features .feature-icon:before,
.hero-features .feature-icon:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center
}

.hero-features .feature-icon:before {
    --icon-anim-scale: .9;
    --icon-anim-angle: 4deg;
    width: calc(var(--feature-icon-w) * 0.7);
    height: calc(var(--feature-icon-h) * 0.7);
    background-color: rgba(var(--base-c-rgb), 0.2);
    border-radius: 12px;
    -webkit-animation: featured-icon-anim 3.8s ease-in-out infinite var(--anim-delay);
    animation: featured-icon-anim 3.8s ease-in-out infinite var(--anim-delay)
}

.hero-features .feature-icon:after {
    --icon-anim-scale: .97;
    --icon-anim-angle: 2deg;
    width: var(--feature-icon-w);
    height: var(--feature-icon-h);
    border-radius: 24px;
    background-color: rgba(var(--base-c-rgb), 0.15);
    -webkit-animation: featured-icon-anim 4s ease-in-out infinite var(--anim-delay);
    animation: featured-icon-anim 4s ease-in-out infinite var(--anim-delay)
}

.hero-features .feature-icon svg {
    max-width: 42px;
    max-height: 42px
}

.hero-features .cross-bgc {
    position: absolute;
    top: -60px;
    left: -60px;
    width: calc(100% + 120px);
    height: var(--mob-img-h)
}

.hero-features .wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: calc(var(--cont-w) + 2 * var(--padd-h));
    padding-left: var(--padd-h);
    padding-right: var(--padd-h);
    margin-left: auto;
    margin-right: auto;
    position: relative
}

.hero-features .inner {
    position: sticky;
    top: var(--sticky-top);
    height: var(--icons-wrap-h);
    z-index: 2
}

.hero-features .inner:before {
    content: '';
    position: absolute;
    bottom: calc(var(--icons-wrap-h) - 30px);
    left: 50%;
    width: var(--mob-img-w);
    height: var(--sticky-top);
    background-color: var(--c-light);
    transform: translateX(-50%);
    z-index: 1
}

.hero-features .top,
.hero-features .btm {
    display: flex;
    justify-content: space-between
}

.hero-features .top {
    margin-bottom: var(--icon-cell-mb)
}

.hero-features .cell-main {
    position: absolute;
    top: var(--mob-top);
    left: 50%;
    width: var(--mob-img-w);
    z-index: 1;
    transform: translate(-50%, 300px);
    opacity: 0;
    -webkit-animation: phoneReveal .4s ease-in-out .6s forwards;
    animation: phoneReveal .4s ease-in-out .6s forwards
}

.hero-features .phone {
    position: relative;
    border-top: 16px solid #000;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15)
}

.hero-features .phone:before {
    content: '';
    content: '';
    border-radius: 16px 16px 0 0;
    top: -16px;
    left: 0;
    width: 100%;
    height: 100vh;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    position: absolute
}

.hero-features .phone__top,
.hero-features .phone__inner {
    border-left: 1px solid #f1eeff;
    border-right: 1px solid #f1eeff
}

.hero-features .phone__top {
    display: flex;
    align-items: center;
    padding-left: 22px;
    padding-right: 22px;
    padding: 16px 22px;
    background: var(--c-light)
}

.hero-features .phone__top span,
.hero-features .phone__top svg {
    display: inline-flex
}

.hero-features .phone__top span {
    font-size: 14px;
    font-family: arial;
    font-weight: 600
}

.hero-features .phone__top svg {
    margin-left: 8px
}

.hero-features .phone__top svg:first-of-type {
    margin-left: auto
}

.hero-features .phone__inner {
    transform: translate(0, 300px);
    width: var(--mob-img-w);
    margin-right: auto;
    margin-left: auto;
    margin-top: calc(var(--icons-wrap-h) * -1);
    margin-bottom: calc(var(--sec-padd-btm) * -1);
    opacity: 0;
    background-color: #f8f8f8;
    -webkit-animation: reveal .4s ease-in-out .8s forwards;
    animation: reveal .4s ease-in-out .8s forwards
}

.hero-features .phone__inner img {
    display: block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px
}

.hero-features .cell-sm {
    width: var(--icon-cell-w);
    height: var(--icon-cell-w);
    text-align: center;
    z-index: 1;
    opacity: 0;
    transform: translateY(50px);
    -webkit-animation: revealCard .4s ease-in-out calc(1s * var(--delay)) forwards;
    animation: revealCard .4s ease-in-out calc(1s * var(--delay)) forwards
}

.hero-features .cell-sm h5 {
    font-weight: 600;
    line-height: 1.208
}

.hero-features .phone-bat {
    -webkit-animation: batt 200s linear infinite;
    animation: batt 200s linear infinite
}

@-webkit-keyframes batt {
    50% {
        transform: scaleX(0.1)
    }
}

@keyframes batt {
    50% {
        transform: scaleX(0.1)
    }
}

@-webkit-keyframes reveal {
    to {
        transform: translate(0, 0);
        opacity: 1
    }
}

@keyframes reveal {
    to {
        transform: translate(0, 0);
        opacity: 1
    }
}

@-webkit-keyframes phoneReveal {
    to {
        transform: translate(-50%, 0);
        opacity: 1
    }
}

@keyframes phoneReveal {
    to {
        transform: translate(-50%, 0);
        opacity: 1
    }
}

@-webkit-keyframes revealCard {
    to {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes revealCard {
    to {
        transform: translateY(0);
        opacity: 1
    }
}

@-webkit-keyframes revealText {
    to {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes revealText {
    to {
        transform: scale(1);
        opacity: 1
    }
}

@-webkit-keyframes featured-icon-wrap-anim {

    0%,
    100% {
        transform: rotate(calc(var(--icon-anim-angle) + 15deg))
    }

    50% {
        transform: rotate(calc(var(--icon-anim-angle) * -1 + 15deg))
    }
}

@keyframes featured-icon-wrap-anim {

    0%,
    100% {
        transform: rotate(calc(var(--icon-anim-angle) + 15deg))
    }

    50% {
        transform: rotate(calc(var(--icon-anim-angle) * -1 + 15deg))
    }
}

@-webkit-keyframes featured-icon-anim {

    0%,
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(var(--icon-anim-scale)) rotate(var(--icon-anim-angle))
    }

    50% {
        opacity: .9;
        transform: translate(-50%, -50%) scale(1) rotate(calc(var(--icon-anim-angle) * -1))
    }
}

@keyframes featured-icon-anim {

    0%,
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(var(--icon-anim-scale)) rotate(var(--icon-anim-angle))
    }

    50% {
        opacity: .9;
        transform: translate(-50%, -50%) scale(1) rotate(calc(var(--icon-anim-angle) * -1))
    }
}

.hero-business .container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 900px;
    padding-right: 15px;
    padding-left: 15px;
    padding-top: 70px;
    padding-bottom: 50px;
    text-align: center
}

.hero-business__top .container {
    padding-bottom: 0 !important
}

.hero-business__btm .container {
    padding-top: 0 !important
}

.hero-business h1,
.hero-business h6,
.hero-business a {
    position: relative;
    z-index: 1
}

.hero-business h1 {
    line-height: 1.208
}

.hero-business h6 {
    font-weight: 400;
    margin-top: 16px
}

.hero-business a {
    display: inline-flex;
    width: 184px;
    margin-top: 27px;
    transition: opacity .3s ease-in-out
}

.hero-business a:hover {
    opacity: .8
}

.hero-business__hand {
    position: absolute
}

.hero-business__hand svg {
    width: 30px;
    height: 30px
}

.hero-business__hand--1 {
    top: 0;
    left: -30px
}

.hero-business__hand--2 {
    bottom: -25px;
    left: -60px
}

.hero-business__hand--3 {
    bottom: 90px;
    right: -100px
}

.hero-business__moon {
    position: absolute;
    width: 24px
}

.hero-business__moon--1 {
    top: 70px;
    right: -100px
}

.hero-business__moon--2 {
    bottom: -90px;
    right: 10%
}

.hero-business__arrows {
    position: absolute;
    width: 24px !important;
    top: 30%;
    left: -200px
}

.below-hero {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding-left: 15px
}

.below-hero h3 {
    line-height: 1.2;
    font-weight: 700;
    color: var(--c-brand);
    margin-bottom: 28px
}

.below-hero p {
    line-height: 1.6;
    margin-bottom: 0
}

.below-hero--wrap {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    overflow: hidden
}

.below-hero .text-wrap,
.below-hero .media-wrap {
    width: 40%
}

.below-hero .text-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    max-width: 500px;
    padding-right: 76px
}

.below-hero .media-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    position: relative;
    width: 54.583%
}

.below-hero .media-wrap .svg-wrap {
    height: 471px
}

.below-hero .media-wrap .svg-wrap .phone-svg {
    transform: translateY(70px);
    transition: all .5s ease-in-out .3s
}

.below-hero .media-wrap .svg-wrap .phone-svg img {
    width: 100%
}

.below-hero .media-wrap .svg-wrap circle {
    transform: translateY(70px);
    transition: all .5s ease-in-out
}

.below-hero .media-wrap .svg-wrap .svg-wrap__icons-left {
    transform: translate(20px, 20px);
    transition: all .5s ease-in-out .2s
}

.below-hero .media-wrap .svg-wrap .svg-wrap__icons-right {
    transform: translate(0, 70px);
    transition: all .5s ease-in-out .2s
}

.below-hero .media-wrap .svg-wrap.inView circle,
.below-hero .media-wrap .svg-wrap.inView .phone-svg,
.below-hero .media-wrap .svg-wrap.inView .svg-wrap__icons-left,
.below-hero .media-wrap .svg-wrap.inView .svg-wrap__icons-right {
    transform: translate(0, 0)
}

.hero-premium {
    --padd-t: 70px;
    --padd-b: 190px;
    --max-p-width: 286px
}

.hero-premium__cont {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    max-width: 1092px;
    padding-top: var(--padd-t);
    padding-bottom: var(--padd-b)
}

.hero-premium__cont>h6 {
    font-style: italic;
    text-align: center;
    color: var(--c-brand);
    padding-bottom: 1.2em
}

.hero-premium__cont>h6 strong {
    font-style: normal;
    color: var(--c-light);
    display: inline-flex;
    border-radius: 8px;
    line-height: 1;
    padding: 6px 8px;
    background: var(--c-brand);
    font-weight: 600;
    margin-left: 6px
}

.hero-premium__cont>h1 {
    text-align: center;
    line-height: 1.2
}

.hero-premium__cont>p {
    text-align: center;
    margin-top: .7em
}

.hero-premium .f-row {
    margin-top: 55px
}

.hero-premium__card {
    background: var(--c-light);
    border: 2px solid var(--c-silver);
    border-radius: 16px;
    padding: 24px;
    height: 100%
}

.hero-premium__card .svg-wrap {
    --card-color: 255, 0, 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    margin-bottom: 6px;
    border-radius: 6px;
    background: rgba(var(--card-color), 0.2)
}

.hero-premium__card .svg-wrap svg {
    max-width: 42px;
    max-height: 44px;
    width: auto;
    height: auto
}

.hero-premium__card p {
    margin-bottom: 0;
    line-height: 1.5
}

.post-thumb .tr-img-wrap-outer,
.post-thumb .tr-img-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-bottom: 0
}

.post-thumb__inner {
    padding-bottom: var(--post-thumb-height)
}

.post-thumb__img {
    -o-object-fit: cover;
    object-fit: cover
}

.post-meta {
    font-size: 14px;
    margin-bottom: 1.571em;
    color: var(--c-dark);
    text-transform: uppercase
}

.post-meta .separator {
    display: inline-flex;
    margin-left: 10px;
    margin-right: 10px
}

.author-wrap {
    --img-size: 48px;
    display: flex
}

.author-wrap .tr-img-wrap-outer {
    width: var(--img-size);
    height: var(--img-size);
    margin-right: 14px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden
}

.author-wrap .tr-img-wrap-outer .tr-img-wrap {
    height: 100%;
    padding-bottom: 0
}

.author-wrap img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover
}

.author-wrap i {
    display: inline-flex;
    margin-right: 10px;
    font-family: var(--font-serif);
    font-style: italic;
    line-height: 1;
    font-size: 16px;
    padding-top: 2px
}

.author-wrap p {
    font-size: 16px;
    margin-bottom: 0
}

.author-wrap p span {
    display: block
}

.author-wrap p span:first-of-type {
    font-weight: 600;
    margin-bottom: -0.1em
}

.author-wrap .right {
    display: flex
}

.blog-content {
    padding-top: 0;
    padding-bottom: 110px
}

.blog-content .container {
    position: relative;
    padding-top: 10px
}

.blog-content .post-card-featured-wrap {
    margin-bottom: 80px
}

.blog-content .post-card-featured-wrap .post-thumb {
    width: 59%;
    margin-bottom: 0
}

.blog-content .post-card-featured-wrap .post-meta {
    margin-bottom: 10px
}

.blog-content .post-card-featured-wrap h1 {
    font-weight: 500;
    line-height: 1.2
}

.blog-content .post-card-featured-wrap .post-card {
    flex-direction: row
}

.blog-content .post-card-featured-wrap .post-card__title {
    margin-bottom: 16px
}

.blog-content .post-card-featured-wrap .post-card__txt {
    padding-left: 46px
}

.blog-content .f-row .col .post-card {
    height: 100%
}

.post-card {
    display: flex;
    flex-direction: column
}

.post-card .post-thumb {
    margin-bottom: 21px
}

.post-card .post-thumb__img {
    -o-object-fit: cover;
    object-fit: cover
}

.post-card__txt {
    display: flex;
    flex-direction: column;
    flex: 1
}

.post-card__txt .txt-wrap {
    flex: 1
}

.post-card__title {
    line-height: 1.33;
    margin-bottom: .583em
}

.post-card__title a {
    text-decoration: none;
    color: var(--c-dark);
    transition: color .2s ease-in-out
}

.post-card__title a:hover {
    color: var(--c-brand)
}

.post-card__title+p {
    margin-bottom: 0
}

.post-card .author-wrap {
    margin-top: 24px
}

@media(min-width:1021px) {
    .navbar-toggler {
        display: none
    }

    .header .navbar-nav {
        align-items: center
    }

    .header .product-hunt-badge {
        margin-left: 12px
    }

    .header .nav-item {
        margin-right: 48px
    }

    body.jsOnScroll-header .header {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3)
    }

    body.jsOnScroll-header .header .navbar {
        padding: 14px 0
    }
}

@media(max-width:1920px) {
    .hero-features {
        --sticky-top: min(calc((100vh - var(--icons-wrap-h)) * 0.55), 280px)
    }
}

@media(max-width:1600px) {
    .hero-home {
        --main-svg-w: 700px
    }

    .hero-home .hero-media-side--calendar {
        bottom: calc(var(--main-svg-h) * 1.5)
    }
}

@media(max-width:1500px) {
    .hero-business__arrows {
        left: -100px
    }

    .below-hero .text-wrap {
        padding-right: 27px
    }

    .below-hero .media-wrap {
        transform: translateX(30px)
    }
}

@media(max-width:1440px) {
    .below-hero .media-wrap .svg-wrap {
        height: auto
    }
}

@media(max-width:1400px) {
    .hero-home .hero-media-side--avatar:not(.hero-media-side--avatar-right) {
        left: 50px
    }

    .hero-home .hero-media-side--avatar-right {
        right: 50px
    }

    .hero-features {
        --icon-cell-mb: 40px
    }
}

@media(max-width:1310px) {
    

    body {
        --text-fx: 18px;
        --header-height: 86px
    }

    h1 {
        font-size: 36px
    }

    h2 {
        font-size: 60px
    }

    h2.h2--lg {
        font-size: 90px
    }

    h3 {
        font-size: 34px
    }

    h3.h3--lg {
        font-size: 36px
    }

    h4 {
        font-size: 25px
    }

    h5 {
        font-size: 20px
    }

    body.single-post,
    body.page-template-t-generic {
        --single-image-offset: 70px
    }

    .single-hero {
        --padd-t: 164px
    }

    .single-hero .cell-2 {
        padding-top: 38px
    }

    .single-hero .cell-2 {
        padding-top: 35px
    }

    .single-hero__excerpt {
        font-size: 22px
    }

    .hero-home {
        --main-svg-w: 500px;
        --text-maw: 600px
    }

    .hero-premium {
        --padd-b: 150px
    }

    .post-meta {
        font-size: 13px
    }

    .author-wrap {
        --img-size: 46px
    }

    .author-wrap p {
        font-size: 14px
    }
}

@media(max-width:1199px) {
    .hero-business__hand--1 {
        left: 0
    }

    .hero-business__hand--2 {
        left: -15px
    }

    .hero-business__hand--3 {
        right: 0
    }

    .hero-business__moon--1 {
        top: 30px;
        right: -10px
    }

    .hero-business__arrows {
        left: -40px
    }
}

@media(max-width:1150px) {

    body.single-post,
    body.page-template-t-generic {
        --single-image-offset: 0
    }
}

@media(max-width:1092px) {
    .hero-premium {
        --max-p-width: 187.66px
    }

    .hero-premium__cont {
        max-width: 797px
    }

    .hero-premium .f-row {
        margin-top: 35px
    }
}

@media(max-width:1020px) {
    body {
        --header-height: 70px;
        --text-fx: 16px
    }

    body.single-post .navbar-toggler {
        --bgc-color: white;
        --border-color: white
    }

    body.single-post.post-end .header .navbar-collapse-wrap {
        top: calc(var(--header-height) - 2px)
    }

    body.single-post.jsOnScroll-header:not(.post-end) .header .navbar-collapse-wrap {
        top: calc(var(--header-height) - 18px)
    }

    .header {
        display: flex;
        align-items: center;
        height: 70px;
        border-bottom: 1px solid var(--c-silver);
        padding: 0 14px
    }

    .header .container {
        width: 100%
    }

    .header .navbar-collapse-wrap {
        --nav-padding: 48px 48px;
        position: absolute;
        top: calc(var(--header-height) - 18px);
        right: -14px;
        width: 100vw;
        height: calc(100vh - var(--header-height));
        overflow: hidden;
        pointer-events: none;
        background: transparent;
        transition: background .2s ease-in-out calc(var(--mobileCollapseTransitionDuration) * 1.5)
    }

    .header .navbar-collapse {
        position: relative;
        height: calc(var(--vh100, 100vh) - var(--header-height));
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        overflow-y: hidden;
        background-color: var(--c-silver);
        transform: translateY(50px);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--mobileCollapseTransitionDuration) ease-in-out calc(var(--maxDelay) + var(--mobileCollapseTransitionDuration)), transform var(--mobileCollapseTransitionDuration) ease-in-out calc(var(--maxDelay) + var(--mobileCollapseTransitionDuration))
    }

    .header .navbar-collapse .navbar-nav {
        padding: var(--nav-padding)
    }

    .header__btn-wrap {
        --store-btn-pb: 10px;
        padding-top: var(--store-btn-pb);
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 10px
    }

    .header__btn {
        width: auto;
        transition: all .3s ease-in-out
    }

    .download-btn {
        gap: 10px;
        padding: 7px 18px 7px 9px;
        font-size: 16px
    }

    .download-btn__icon {
        width: 34px;
        height: 34px
    }

    .download-btn__icon svg {
        width: 18px;
        height: 18px
    }

    .header .product-hunt-badge a {
        height: auto;
        width: 182px
    }

    .header .container {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .header .navbar-nav {
        flex-direction: column;
        flex: 1;
        overflow-y: auto;
        width: 100%;
        max-height: calc(100% - 100px)
    }

    .header .navbar {
        position: relative;
        padding: 0
    }

    .header .navbar-brand {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        width: auto;
        z-index: 2
    }

    .header .navbar-brand__logo {
        width: 30px;
        height: 30px
    }

    .header .navbar-brand__name {
        font-size: 18px
    }

    .header .menu-item {
        opacity: 0;
        transform: translateX(-50%);
        transition: all calc(var(--mobileRevealTransitionDuration) * 1s) ease-in-out var(--transitionDelay--reverse)
    }

    .header .menu-item:not(:last-of-type) {
        margin-bottom: 16px
    }

    .header .nav-link {
        display: inline-flex;
        padding: 0 10px;
        font-size: 28px
    }

    .backdrop {
        top: auto;
        bottom: -100px;
        height: 200px;
        background: var(--c-silver);
        transition: opacity var(--mobileCollapseTransitionDuration) ease-in-out calc(var(--maxDelay) + var(--mobileCollapseTransitionDuration))
    }

    body.js-mob-menu-open {
        -ms-scroll-chaining: none;
        overscroll-behavior: contain;
        overflow: hidden
    }

    body.js-mob-menu-open .navbar-toggler {
        --bgc-color: white;
        --border-color: var(--c-brand);
        background: transparent;
        transition: all var(--mobileCollapseTransitionDuration) ease-in-out
    }

    body.js-mob-menu-open .navbar-toggler:after {
        transform: translateY(0);
        opacity: 1;
        transition: opacity calc(var(--mobileCollapseTransitionDuration) * 2) ease-in-out, transform calc(var(--mobileCollapseTransitionDuration) * 2) ease-in-out
    }

    body.js-mob-menu-open .navbar-toggler svg {
        transition: all var(--mobileCollapseTransitionDuration) ease-in-out
    }

    body.js-mob-menu-open .navbar-toggler svg:first-of-type {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0)
    }

    body.js-mob-menu-open .navbar-toggler svg:last-of-type {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0)
    }

    body.js-mob-menu-open .backdrop {
        opacity: 1;
        transition: opacity var(--mobileCollapseTransitionDuration) ease-in-out
    }

    body.js-mob-menu-open .header .navbar-collapse-wrap {
        pointer-events: all
    }

    body.js-mob-menu-open .header .navbar-collapse {
        -ms-scroll-chaining: none;
        overscroll-behavior: contain;
        transform: translateY(0);
        pointer-events: all;
        opacity: 1;
        transition: opacity var(--mobileCollapseTransitionDuration) ease-in-out, transform calc(var(--mobileCollapseTransitionDuration) * 2) ease-in-out
    }

    body.js-mob-menu-open .header .menu-item {
        opacity: 1;
        transform: translateX(0);
        transition: all calc(var(--mobileRevealTransitionDuration) * 1s) ease-in-out var(--transitionDelay)
    }

    body.js-mob-menu-open .header__btn {
        opacity: 1;
        transform: translateY(0);
        transition: all calc(var(--mobileRevealTransitionDuration) * 1s) linear var(--transitionDelay)
    }

    .hero-home {
        --text-maw: 500px
    }

    .hero-home .btns-wrap {
        flex-direction: column
    }

    .hero-home .btns-wrap a {
        width: 183px
    }
}

@media(max-width:1020px) and (orientation:landscape) {
    .header .navbar-nav {
        max-height: calc(100% - 65px)
    }

    .header__btn-wrap {
        --store-btn-pb: 10px;
        max-height: 100%
    }
}

@media(max-width:1010px) {
    

    h1 {
        font-size: 30px
    }

    h2 {
        font-size: 50px
    }

    h2.h2--lg {
        font-size: 58px
    }

    h3 {
        font-size: 28px
    }

    h3.h3--lg {
        font-size: 32px
    }

    h4 {
        font-size: 24px
    }

    h5 {
        font-size: 18px
    }

    h6 {
        font-size: 16px
    }

    h6.h6--sm {
        font-size: 14px
    }

    ul.ul-checkmarks li {
        font-size: 18px
    }

    body.single-post,
    body.page-template-t-generic {
        --single-padd-top: 80px;
        --single-padd-btm: 80px
    }

    .single-hero {
        --padd-t: 144px;
        --padd-b: 48px
    }

    .single-hero .cell-1,
    .single-hero .cell-3 {
        padding-right: 20px
    }

    .single-hero__excerpt {
        font-size: 20px
    }

    .hero-premium {
        --padd-b: 120px
    }

    .post-meta {
        font-size: 12px
    }

    .author-wrap {
        --img-size: 40px
    }

    .author-wrap p {
        font-size: 12px
    }

    .blog-content {
        padding-bottom: 80px
    }
}

@media(max-width:991px) {
    .hero-business__hand--1 {
        top: 10px;
        left: 10px
    }

    .hero-business__hand--2 {
        left: 30px
    }

    .hero-business__hand--3 {
        bottom: 90px
    }

    .hero-business__moon--1 {
        top: 25px;
        right: 0
    }

    .hero-business__arrows {
        top: auto;
        bottom: 0;
        left: 0
    }

    .below-hero {
        padding-top: 40px
    }

    .below-hero h3 {
        margin-bottom: 20px
    }

    .below-hero .text-wrap {
        padding-right: 0
    }
}

@media(max-width:900px) {
    .hero-home .hero-media-side--avatar {
        width: calc(var(--main-svg-w) * 0.33)
    }

    .hero-home .hero-media-side--avatar:not(.hero-media-side--avatar-right) {
        bottom: calc(var(--main-svg-h) * 0.6)
    }

    .hero-features {
        --mob-img-h: 490px;
        --mob-img-w: 360px;
        --icon-cell-w: 180px;
        --icon-cell-mb: 60px;
        --mob-top: calc(var(--icons-wrap-h) + 100px);
        padding-bottom: 0;
        padding-top: 60px
    }

    .hero-features__subtitle {
        margin-bottom: 55px
    }

    .hero-features .cross-bgc {
        display: none
    }

    .hero-features .inner {
        position: relative;
        top: auto;
        padding-left: 100px;
        padding-right: 100px
    }

    .hero-features .inner:before {
        bottom: 270px
    }

    .hero-features .top,
    .hero-features .btm {
        justify-content: space-around
    }

    .hero-features .phone__inner {
        margin-bottom: 0;
        margin-top: 100px;
        height: 600px;
        overflow: hidden
    }
}

@media(max-width:797px) {
    

    body {
        --text-fx: 18px
    }

    .container {
        padding-left: 10px !important;
        padding-right: 10px !important
    }

    .container {
        max-width: 100%
    }

    h1 {
        font-size: 32px
    }

    h2 {
        font-size: 40px
    }

    h4 {
        font-size: 22px
    }

    .btn--white {
        --padd: 16px 34px
    }

    body.single-post:not(.js-mob-menu-open):not(.post-end) .header .navbar-brand path {
        fill: var(--c-light)
    }

    body.single-post:not(.js-mob-menu-open):not(.post-end) .header .navbar-toggler {
        background: var(--c-light);
        border-color: var(--c-light)
    }

    body.single-post:not(.js-mob-menu-open):not(.post-end) .header .navbar-toggler svg:first-of-type path {
        stroke: var(--c-brand)
    }

    body.single-post.jsOnScroll-header:not(.post-end) .header .navbar-collapse-wrap {
        padding-top: var(--header-height)
    }

    body.single-post:not(.jsOnScroll-header) .header {
        --link-color: var(--c-dark)
    }

    .single-post-sticky-header h2.h2--label {
        display: none
    }

    .single-post-sticky-header .navbar-brand {
        display: block
    }

    .single-post-sticky-header .container {
        padding-top: 2px
    }

    .single-post-sticky-header .cell-2 {
        margin-left: auto
    }

    .single-post-sticky-header .share-label {
        display: none
    }

    body.single-post .single-post-sticky-header .navbar-toggler {
        display: block
    }

    body.single-post.post-end .single-post-sticky-header {
        transform: translateY(-100%)
    }

    body.single-post,
    body.page-template-t-generic {
        --single-padd-hor: 14px;
        --single-padd-top: 40px;
        --single-padd-btm: 70px
    }

    body.page-template-t-generic .single-content .content>h1:first-child {
        margin-bottom: 20px
    }

    .single-hero {
        --padd-t: 112px
    }

    .single-hero .container {
        flex-direction: column
    }

    .single-hero .cell-1,
    .single-hero .cell-2,
    .single-hero .cell-3,
    .single-hero .cell-4 {
        width: 100%
    }

    .single-hero .cell-1,
    .single-hero .cell-3 {
        padding-right: 0
    }

    .single-hero .cell-2 {
        padding-top: 0;
        margin-bottom: 38px
    }

    .single-hero .cell-3 {
        margin-bottom: 56px
    }

    .single-hero h1 {
        margin-top: -0.1em;
        margin-bottom: 16px
    }

    .single-hero__excerpt {
        font-size: 18px;
        line-height: 1.44
    }

    .single-hero .post-meta {
        font-size: 14px;
        margin-bottom: .85712em
    }

    .hero-home {
        --main-svg-w: 400px
    }

    .hero-home .hero-media-main {
        margin-top: 60px
    }

    .hero-home .hero-media-side--avatar:not(.hero-media-side--avatar-right) {
        left: 40px
    }

    .hero-home .hero-media-side--avatar-right {
        right: 40px
    }

    .hero-home .hero-media-side--calendar {
        display: none
    }

    .hero-features {
        overflow-y: hidden;
        padding-top: 40px
    }

    .hero-features__title {
        margin-bottom: 10px
    }

    .hero-features__subtitle {
        margin-bottom: 45px
    }

    .hero-features .inner {
        padding-left: 50px;
        padding-right: 50px
    }

    .hero-business .container {
        padding-top: 40px;
        padding-bottom: 40px
    }

    .hero-business a {
        margin-top: 20px
    }

    .below-hero {
        padding-top: 60px;
        padding-right: 15px
    }

    .below-hero--wrap {
        flex-direction: column
    }

    .below-hero .text-wrap {
        width: 100%;
        max-width: none
    }

    .below-hero .media-wrap {
        margin-right: auto;
        margin-left: auto;
        margin-top: 30px;
        transform: none;
        width: 600px
    }

    .hero-premium__cont {
        --padd-t: 40px
    }

    .hero-premium .f-row {
        --cols: 2;
        --gap: 12
    }

    .hero-premium__card p br {
        display: none !important
    }

    .author-wrap p {
        font-size: 16px
    }

    .blog-content .post-card-featured-wrap .post-thumb {
        width: 100%;
        margin-bottom: 22px
    }

    .blog-content .post-card-featured-wrap .post-card {
        flex-direction: column
    }

    .blog-content .post-card-featured-wrap .post-card__txt {
        padding-left: 0
    }
}

@media(max-width:767px) {
    

    .hero-business__hand--3 {
        bottom: 130px
    }

    .hero-business__moon--2 {
        bottom: -30px
    }

    .hero-business__arrows {
        bottom: 30px
    }

    .below-hero p {
        font-size: 16px
    }
}

@media(max-width:660px) {
    .below-hero .media-wrap {
        width: 100%;
        margin-top: 20px
    }
}

@media(max-width:600px) {
    .hero-home .hero-media-side--camera {
        bottom: 0
    }

    .hero-home .hero-media-side--camera .tr-img-wrap-outer {
        --size-w-original: 70 !important;
        --size-h-original: 70 !important
    }

    .hero-home .hero-media-side--avatar:not(.hero-media-side--avatar-right) {
        left: -12%
    }

    .hero-home .hero-media-side--avatar-right {
        left: auto;
        right: calc(-1 * clamp(24px, 8vw, 48px))
    }

    .hero-features .inner {
        padding-left: 0;
        padding-right: 0
    }
}

@media(max-width:540px) {
    .hero-business__hand--3 {
        display: none
    }

    .hero-business__arrows {
        display: none
    }
}

@media(max-width:530px) {
    .hero-home {
        --text-maw: 100%
    }
}

@media(max-width:500px) {
    h5 {
        font-size: 20px
    }

    .hero-home .hero-media-side--camera {
        left: -20px
    }

    .hero-home .hero-media-side--camera .tr-img-wrap-outer {
        --size-w-original: 50 !important;
        --size-h-original: 50 !important
    }

    .hero-features {
        --icon-cell-w: 150px;
        --mob-img-w: 300px
    }

    .hero-features__subtitle {
        font-size: 18px
    }

    .hero-features .cell-sm h5 {
        font-size: 18px
    }

    .hero-premium .f-row {
        --cols: 1;
        margin-top: 28px
    }

    .post-meta {
        font-size: 14px
    }

    .blog-content .post-card-featured-wrap {
        margin-bottom: 50px
    }

    .blog-content .post-card-featured-wrap h1 {
        font-size: 20px
    }
}

@media(max-width:420px) {
    .hero-home {
        --main-svg-w: 320px
    }
}

@media(max-width:400px) {
    .single-post-sticky-header .cell-2 a:not(:first-of-type) {
        margin-left: 8px
    }

    body.single-post.js-mob-menu-open .single-post-sticky-header .navbar-toggler {
        margin-left: 26px
    }

    .hero-home .hero-media-side--camera {
        left: -15px
    }

    .hero-home .hero-media-side--camera .tr-img-wrap-outer {
        --size-w-original: 35 !important;
        --size-h-original: 35 !important
    }

    .hero-features {
        --mob-img-w: 100%;
        --icon-cell-mb: 40px;
        --feature-icon-w: 92px;
        --icon-cell-w: 140px;
        --padd-h: 15px
    }
}

@media(max-width:374px) {
    h2.h2--lg {
        font-size: 48px
    }

    .header .navbar-collapse {
        --nav-padding: 30px 20px
    }

    .header .navbar-nav {
        max-height: calc(100% - 65px)
    }

    .header__btn-wrap {
        max-height: 100%
    }

    .single-post-sticky-header .navbar-brand {
        width: 30px;
        height: 30px;
        overflow: hidden
    }

    .single-post-sticky-header .navbar-brand svg {
        width: 117px;
        max-width: none
    }

    .blog-content {
        padding-bottom: 50px
    }
}

@media(min-width:1021px) and (max-width:1310px) {
    .header .navbar {
        padding: 28px 0 18px
    }

    .header .nav-item {
        margin-right: 14px
    }
}

@media(min-width:1021px) and (max-width:1010px) {
    .header .navbar {
        padding: 22px 0 14px
    }

    .header .navbar-brand {
        width: 140px
    }
}

@media(hover:hover) {
    .single-post-sticky-header .cell-2 a:hover {
        background: var(--c-dark)
    }

    .single-post-sticky-header .cell-2 a:not([href^='mailto']):hover path {
        fill: var(--c-light)
    }

    .single-post-sticky-header .cell-2 a[href^='mailto']:hover path {
        stroke: var(--c-light)
    }
}