* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    scroll-behavior: smooth;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    color: #222;
}

img {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}

/* ---- */
.two_columns {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.two_columns.reversed {
    flex-direction: row-reverse;
}

.two_columns > * {
    width: 50%;
}

.two_columns > div:first-child {
    padding-left: 32px;
    padding-right: 32px;
}

.two_columns.reversed > div:first-child {
    padding-left: 32px;
    padding-right: 32px;
}

ul {
    list-style-type: none;
}

p {
    margin-bottom: 16px;
}

li .icon {
    margin-right: 10px;
}

li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}



p:last-child,
li:last-child {
    margin-bottom: 0;
}

section.color .icon {
    border: 1px solid black;
}

/* ---- */

.topbar {
    padding: 10px;
    left: 0;
    width: 100%;

    position: fixed;
    top: 0;
    z-index: 99;
    transition: all 0.6s cubic-bezier(0.65, 0, 0.35, 1);


}

.topbar .color {
    fill: white;
}

.topbar .type {
    fill: white;
}

.scroll .type {
    fill: #222;
}

.scroll .color {
    fill: #7763EF;
}

.bg_blur {
    height: 100px;
    left: 0;
    width: 100%;
    pointer-events: none;
    position: absolute;
    top: 0;
    z-index: 2;
    position: relative;
    border-radius: 0px;
    position: absolute;
}

#header_blur {
    height: 512px;
    z-index: 1;
    display: none;
}

.topbar.scroll .content {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 99px;
    box-shadow: 0 4px 16px rgba(1, 1, 1, 0.05), inset 0 -1px 32px 2px rgba(255, 255, 255, 0.2);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}


.topbar .content {
    position: relative;
    z-index: 3;


    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    transition: all 0.6s cubic-bezier(0.65, 0, 0.35, 1);
    border-radius: 99px;
    padding-left: 16px;

}

.topbar a {
    text-decoration: none;
    color: #222;
}

.topbar a.button {
    color: white;
}

.topbar a:hover {
    text-decoration: underline;
}

.scroll a {
    text-decoration: none;
    color: #222;
}

.scroll a.button {
    color: white;
}

.button {
    color: white;
    text-decoration: none;
    border-radius: 99px;
    padding: 10px 40px;
    font-size: 14px;
    cursor: pointer;
    position: relative;
    z-index: 1;

}

.button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 99px;
    background: #111;
    z-index: -1;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.topbar .button:hover,
.button:hover {
    text-decoration: none;
}


.button:hover::before {
    transform: scale(1.1);
}


.topbar .menu {
    display: flex;
    align-items: center;
}

.topbar .menu > * {
    margin-right: 32px;

}

.topbar .menu > *:last-child {
    margin-right: 0;
}

h1,
h3 {
    font-family: "DM Sans", sans-serif;
}

header {
    padding-top: 90px;
    padding-bottom: 40px;
    background-color: #7763EF;
    background-image: url(src/header_shape5.png);
    background-size: 2600px 1000px;
    background-repeat: no-repeat;
    background-position: top center;

    position: relative;

}

header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64px;
    background: url(src/cutout2.svg);
    background-size: auto;
    background-size: 100% 100%;
    z-index: 2;
}

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


header h1 {
    font-size: 97px;
    line-height: 0.8;
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 30px;

}

header h1,
header h3,
header h2 {
    width: 900px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    color: white;
    text-align: center;
}

header h2 {
    font-size: 16px;
    line-height: 1;
    font-weight: 400;
    width: auto;
}

#lifetime_deal {
    background: white;
    border-radius: 99px;

    color: #222;
    display: inline-block;
    padding: 4px 12px;
    max-width: 75vw;
}

header h3 {
    font-size: 29px;
    line-height: 1;
    font-weight: 300;
}

.content {
    width: 1160px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 16px;
}


#video_container {
    width: 800px;
    height: 450px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 32px;
    border-radius: 8px;
}

#video_container iframe {
    width: 100%;
    height: 100%;
}


/* ---- countdown ---- */


#countdown_container {
    background: white;
    padding: 64px;
    color: #222;
    text-align: center;
}

#countdown_container:hover .content::before {
    transform: scale(1.1);
}

#countdown_container .content {
    font-weight: 500;
    width: 1148px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

#countdown_container .content > * {
    margin-bottom: 32px;
}

#countdown_container .content > *:last-child {
    margin-bottom: 0;
}


#countdown {
    display: flex;
    align-items: center;
    justify-content: center;

}

#countdown > div {
    margin-right: 24px;
}

#countdown > div:last-child {
    margin-right: 0;
}




#countdown .num {
    border-radius: 6px;
    background: #7763EF;


    color: white;
    text-align: center;
    font-family: Inter;
    font-size: 38px;
    font-weight: 700;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 62px;
}

#countdown .two_nums {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

#countdown .two_nums > .num:first-child {
    margin-right: 12px;
}


#countdown .block_name {
    color: #595959;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
}

/* ---- ---- */

/* ----- */


.inline_countdown {
    display: flex;
    align-items: center;
    justify-content: center;


}

.inline_countdown .sep {
    opacity: 0.65;
    margin: 0;
}

.inline_countdown .block_name {
    display: none;
}

.inline_countdown > div {
    margin-right: 12px;
    margin-left: 12px;
}

.inline_countdown > div:last-child {
    margin-right: 0;
}




.inline_countdown .num {
    border-radius: 4px;
    background: #B686FF;



    color: white;
    text-align: center;
    font-family: Inter;
    font-size: 14px;
    font-weight: 700;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 26px;
}

.inline_countdown .two_nums {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}

.inline_countdown .two_nums > .num:first-child {
    margin-right: 8px;

}

/* ---- */

/* ---- */
#payment_options {
    display: flex;
    align-items: center;
    width: 620px;
    max-width: 100%;
    margin-top: 32px;
    padding: 16px;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    border: 1px solid #eee;
    margin-left: auto;
    margin-right: auto;
}

#payment_options > * {
    margin-right: 32px;
}

#payment_options > *:last-child {
    margin-right: 0
}

/* -------- */


/* ---- */


.lifetime_button {

    text-decoration: none;
    font-weight: 700;
    color: white;
    font-size: 18px;
    display: inline-block;
    margin-top: 32px;

    transition: all .3s ease-out;

    display: inline-flex;
    align-items: center;
    position: relative;
    justify-content: center;
}


.lifetime_button::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    border-radius: 99px;

    background: black;
    opacity: 1;
    z-index: 2;

}

.lifetime_button:hover::after {

    opacity: 0;
}

.lifetime_button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 99px;

    background: #7763EF;
    z-index: 2;
    transition: all .3s ease-out;

    opacity: 0;
}

.lifetime_button:hover::before {
    background: black;
    transform: scale(1.1);
    opacity: 1;
}

.lifetime_button.white:hover {
    color: #222;
    fill: #222;
}



.lifetime_button.white:hover::before {
    background: white;
}

.lifetime_button.white:hover path {
    stroke: #222;
}



.lifetime_button svg {
    margin-right: 8px;

}

.lifetime_button > div {
    z-index: 3;
    display: flex;
    align-content: center;
    justify-content: center;

}

.lifetime_button path {
    stroke: white;
    stroke-width: 2;
}

.lifetime_button .animated {
    stroke-dasharray: 79.7;
    stroke-dashoffset: -4px;
}

.lifetime_button .fade {
    opacity: 0;
    transition: all .3s ease-out;
}

.lifetime_button:hover .animated {
    animation: dash 30s linear infinite;
}

.lifetime_button:hover .fade {
    opacity: 0.3;
}

@keyframes dash {
    to {
        stroke-dashoffset: 1000;
    }
}

/* ---- */
.lifetime_button {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    display: block;

    text-align: center;
    font-size: 18px;
    margin-top: 30px;
    height: 72px;
    width: 420px;
    display: flex;
    align-items: center;
    justify-content: center;


}

.lifetime_button video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: 99px;
    overflow: hidden;
    transition: all .3s ease-out;
}

.lifetime_button:hover video {
    transform: scale(1.1);
    opacity: 1;
}



#watch_the_video {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 0;
    color: white;
}


section .content {
    position: relative;
}

.narrow {
    width: 600px;
    max-width: 100%:
}

section h1 {
    font-size: 70px;
    line-height: 85%;

    padding-bottom: 30px;
    transition: all 0.6s cubic-bezier(0.65, 0, 0.35, 1);

    color: #222;

}

section h1 b {
    color: #eee;
    font-weight: bold;
}

section.scroll h1 b {
    background: url(src/twirl_shape.png);
    background-size: cover;
    background-position: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

section p {
    font-size: 20px;
    line-height: 1.4;
}

.columns {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.columns.reversed {
    flex-direction: row-reverse;
}

.columns > * {
    width: calc(50% - 24px);
}

#screenshot_leads {
    width: 560px;
    position: relative;
    height: 560px;
}

#screenshot_leads .screenshot {
    width: 462px;
    height: 330px;

    background: url(src/screenshot.png);
    background-size: cover;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(22, 93, 57, 0.1);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

#screenshot_leads .screenshot_bg {
    width: 512px;
    height: 512px;

    background: url(src/screenshot_bg.png);
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    animation: 8s spin_animation linear infinite;
}

@keyframes spin_animation {
    from {
        transform: translate(-50%, -50%) rotate(0);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}


#screenshot_leads .chart {
    background: url(src/chart.png);
    background-size: cover;
    width: 560px;
    height: 420px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

#communi_and_ai {
    width: 560px;
    height: 560px;
    position: relative;

}

#communi_and_ai .cutout {
    background: url(src/communi_cutout.svg);
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    z-index: 2;
}

#communi_and_ai video {
    /*
            width: 250px;
            height: 250px;
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1;
*/


    width: 100%;
    height: 100;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;

}

#all_in_one {
    width: 560px;
}

/* -------- */
#features_dots {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;

    overflow: hidden;
    bottom: -45px;
    left: 50%;
    transform: translateX(-50%) scale(0.5);
    transition: all .4s ease-in-out;
    height: 40px;
    padding-left: 16px;
    padding-right: 16px;
    z-index: 99;

    background: rgba(255, 255, 255, 0.7);
    border-radius: 99px;
    box-shadow: 0 4px 16px rgba(1, 1, 1, 0.05), inset 0 -1px 32px 2px rgba(255, 255, 255, 0.2);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

#features_dots.active {

    bottom: 32px;
    transform: translateX(-50%) scale(1);
    width: auto;
}

#features_dots > * {
    width: 8px;
    height: 8px;
    border: 1px solid #222;
    border-radius: 99px;
    margin-right: 16px;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;

}

#features_dots > *:last-child {
    margin-right: 0;
}



#active_dot {
    background: #222;
    transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
    position: absolute;
    top: 16px;
    left: 16px;
    width: 8px;
    height: 8px;

}

#features_dots > *.active {
    animation: activeDotAnimation .5s ease-in;
}

@keyframes activeDotAnimation {
    0% {
        transform: scale(1);
    }

    80% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}

/* -------- */

/*
        section.feature .content {
        padding-left: 40px;
        padding-right: 40px;
        }

        .color .content {
        border-radius: 16px;

        }

        .color-a .content {
        background: #EE0290;

        }
*/

.feature_image {
    width: 560px;
    height: 560px;
    position: relative;

}

.feature_image img {
    width: 100%;
    z-index: 2;

}

.feature_image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 560px;
    height: 560px;
    background-image: url(src/shape_pink.svg);
    z-index: -1;
    transform: scale(0.9);
    transition: all 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.feature_image.orange::before {
    background-image: url(src/shape_orange.svg);
}

.feature_image.blue::before {
    background-image: url(src/shape_blue.svg);
}

.feature_image.violet::before {
    background-image: url(src/shape_violet.svg);
}

.feature_image.green::before {
    background-image: url(src/shape_green.svg);
}

.active .feature_image::before {
    transform: scale(1);
}

/* -------- */
#lifetime {
    background: #111;

    padding-top: 80px;
    padding-bottom: 80px;
    color: white;
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#lifetime::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64px;
    background: url(src/cutout2.svg);
    background-size: auto;
    background-size: 100% 100%;
    z-index: 2;
}

#lifetime .content {
    padding: 40px;
}

#features_end {
    margin-top: 80px;
}

#lifetime h1 {
    color: white;
    margin-top: 30px;
    text-align: center;
}


#lifetime h2 {
    font-size: 24px;
    line-height: 1;
    font-weight: 400;
    width: auto;
    text-align: center;
}

#refund_guarantee {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 600px;
    max-width: 100%;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
}

#refund_guarantee h3 {
    margin-bottom: 7px;
}

#refund_guarantee p {
    font-size: 16px;
    opacity: 0.7;
}

#refund_guarantee img {
    margin-right: 20px;
}

#refund_guarantee a {
    color: white;
}

/* -------- */


#features_grid {
    padding-top: 60px;
}


#features_grid .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    justify-content: center;
}

#features_grid .feature_icon {
    width: calc(25% - 22.5px);
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 30px;

    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    margin: 4px;


}

#features_grid .feature_icon {
    width: auto;
    display: inline-flex;
    padding: 16px;
    border-radius: 99px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: 80vw;


}

#features_grid .feature_icon:nth-child(4n + 0) {
    transform: rotate(2deg);
}

#features_grid .feature_icon:nth-child(4n + 1) {
    transform: rotate(3deg);
}

#features_grid .feature_icon:nth-child(4n + 2) {
    transform: rotate(-2deg);
}

#features_grid .feature_icon:nth-child(4n + 3) {
    transform: rotate(1deg);
}



#features_grid .feature_icon .icon {
    width: 48px;
    height: 48px;
    margin-bottom: 10px;

    display: none;
    /* TODO */
}

/*
        #features_grid .gray .icon {
            background: url(src/gray.svg);
        }

        #features_grid .violet .icon {
            background: url(src/violet.svg);
        }

        #features_grid .green .icon {
            background: url(src/green.svg);
        }

        #features_grid .blue .icon {
            background: url(src/blue.svg);
        }

        #features_grid .orange .icon {
            background: url(src/orange.svg);
        }

        #features_grid .pink .icon {
            background: url(src/pink.svg);
        }
*/
#features_grid .feature_icon {
    border-radius: 16px;
    padding: 24px;
}

#features_grid .gray {
    background: linear-gradient(15deg, #D7D7D7, white);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#features_grid .violet {
    background: linear-gradient(15deg, #DFCCFC, white);
    box-shadow: 0 2px 4px rgba(96, 2, 238, 0.1);
}

#features_grid .green {
    background: linear-gradient(15deg, #EFFDD9, white);
    box-shadow: 0 2px 4px rgba(144, 238, 2, 0.1);
}

#features_grid .blue {
    background: linear-gradient(15deg, #E6F4FF, #CDE4FF);
    box-shadow: 0 2px 4px rgba(130, 200, 255, 0.1);
}

#features_grid .orange {
    background: linear-gradient(15deg, #FEF3EB, #FFDEB7);
    box-shadow: 0 2px 4px rgba(238, 96, 2, 0.1);
}

#features_grid .pink {
    background: linear-gradient(15deg, #FCCCE9, #FFDAF0);
    box-shadow: 0 2px 4px rgba(238, 2, 144, 0.1);
}

/* -------- */
#integrated {
    margin-top: 40px;
    text-align: center;
}

#integrated .content {
    padding-bottom: 0;
}

.grid {

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.grid > * {
    width: calc(25% - 22.5px);
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
}


#integrated h1 {
    margin-bottom: 20px;
    font-size: 24px;
}

#integrated .lg {
    background-image: url(src/logos.png);
    background-size: 720px 360px;
    background-repeat: no-repeat;
    width: 180px;
    height: 90px;

    transition: all .3s ease-out;
    filter: grayscale(1);

}

#integrated .lg-container:hover .lg {
    filter: grayscale(0);

}

#integrated .lg-container:hover {

    background-color: #eee;
}


#integrated .label {
    display: none;
}

.lg-container {

    background-color: #FFFFFF;
    border: 1px solid #eee;
    width: 100%;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-bottom: 16px;

}

#lg_0 {
    background-position: 0px 0px
}

#lg_1 {
    background-position: -180px 0px
}

#lg_2 {
    background-position: -360px 0px
}

#lg_3 {
    background-position: -540px 0px
}

#lg_4 {
    background-position: 0px -90px
}

#lg_5 {
    background-position: -180px -90px
}

#lg_6 {
    background-position: -360px -90px
}

#lg_7 {
    background-position: -540px -90px
}

#lg_8 {
    background-position: 0px -180px
}

#lg_9 {
    background-position: -180px -180px
}

#lg_10 {
    background-position: -360px -180px
}

#lg_11 {
    background-position: -540px -180px
}

#lg_12 {
    background-position: 0px -270px
}

#lg_13 {
    background-position: -180px -270px
}

#lg_14 {
    background-position: -360px -270px
}

#lg_15 {
    background-position: -540px -270px
}

/* -------- */

#get_lifetime_license {
    padding-top: 76px;
    margin-bottom: 60px;
}


#get_lifetime_license h1 {
    text-align: center;
}

#get_lifetime_license h1 b {
    background: url(src/twirl_shape.png);
    background-size: cover;
    background-position: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

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

#offer {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

    border-radius: 16px;

    width: 600px;
    max-width: 100%;

    overflow: hidden;
}

#offer .offer_content {
    padding: 24px;

    display: flex;
    flex-direction: column;
    align-items: center;
}

#offer ul {
    margin-bottom: 24px;
    margin-top: 24px;
}

#offer ul li {
    min-height: 24px;
    background: url(src/checkmark.svg);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 34px;
}

.old_price {
    text-decoration: line-through;
    font-size: 16px;
}

.current_price {
    font-weight: 700;
    font-size: 60px;
}

.guarantee_small {
    display: flex;
    align-items: center;
    margin-top: 16px;
}

.guarantee_small img {
    margin-right: 8px;
}

#offer_logo {
    width: 360px;
    max-width: 100%;
}

.offer_header {
    background: #6002EE;
    color: white;
    text-align: center;
    padding: 24px;
}

#offer_countdown {
    margin-top: 10px;
}

/* -------- */

#save_money a {
    color: #222;
}

/* ------------ */

footer {
    background: #111;
    color: white;
    font-size: 15px;
    margin-top: 60px;
}


footer .logo {}

footer .col:first-child {
    color: #7d848e
}

footer .col h3 {
    margin-bottom: 20px
}

footer .col a {
    display: block;
    margin-bottom: 16px;
    color: #6D6D6D;
    text-decoration: none
}

footer .col a:hover {
    color: var(--almost-black);
    text-decoration: underline
}

footer .col a:last-child {
    margin-bottom: 0
}

footer .content__ {

    width: 80vw;
    padding-top: 80px;
    padding-bottom: 80px;
    margin-left: auto;
    margin-right: auto;
}

footer .content {
    width: 1000px;
    max-width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

}

footer .products a {
    display: flex;
    align-items: center;
}

footer .products a svg {
    fill: rgba(255, 255, 255, 0.6);
    margin-right: 6px;
}

footer .products svg .darker {
    fill: rgba(255, 255, 255, 0.3);
}

footer .content__ {
    border-radius: 8px 8px 0 0;
}


/* ---- */






@media(max-width: 1100px) {

    .feature_image {
        width: calc(50vw - 20px);
        height: calc(50vw - 20px);


    }


    .feature_image::before {
        width: calc(50vw - 20px);
        height: calc(50vw - 20px);
        background-size: cover;

    }

    section h1 {
        font-size: 6.28vw;
    }

    header h1 {
        font-size: 9vw;
    }



}

@media(max-width: 800px) {

    #video_container {
        width: 100vw;
        height: 56.25vw;
    }

    header .content {
        padding: 0;
    }

    header h1,
    header h2,
    header h3,
    #watch_the_video {
        padding-left: 24px;
        padding-right: 24px;
    }

    .two_columns {
        flex-direction: column;
    }

    .two_columns.reversed {
        flex-direction: column;
    }


    .two_columns > * {
        width: 100%;
    }

    .two_columns > *:first-child {
        margin-bottom: 20px;
    }

    .feature_image {
        width: calc(100vw - 48px);
        height: calc(100vw - 48px);


    }


    .feature_image::before {
        width: calc(100vw - 48px);
        height: calc(100vw - 48px);
        background-size: cover;

    }


    #features_grid .content {
        flex-direction: column;
    }

    #features_grid .feature_icon {
        width: 100%;
    }

    #features_dots {
        display: none;
    }

    #communi_and_ai {
        width: 75vw;
        height: 75vw;

    }
}


@media(max-width: 550px) {
    #countdown_container {
        padding: 16px;
    }

    footer {
        margin-top: 32px;
    }

    #get_lifetime_license {
        padding-top: 32px;
        margin-bottom: 32px;
    }

    #features_grid .feature_icon {
        width: auto;
        display: inline-flex;
        margin-left: auto;
        margin-right: auto;
        padding: 8px;
        margin-bottom: -4px;
        border-radius: 99px;
        max-width: 80vw;


    }

    #features_grid .feature_icon:nth-child(4n + 0) {
        transform: rotate(2deg);
    }

    #features_grid .feature_icon:nth-child(4n + 1) {
        transform: rotate(3deg);
    }

    #features_grid .feature_icon:nth-child(4n + 2) {
        transform: rotate(-2deg);
    }

    #features_grid .feature_icon:nth-child(4n + 3) {
        transform: rotate(1deg);
    }

    #lifetime {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    #features_grid {
        padding-top: 32px;
    }

    #integrated {
        margin-top: 24px;
    }

    .lifetime_button .animated {
        animation: dash 30s linear infinite;
    }

    .lifetime_button .fade {
        opacity: 0.5;
    }

    .lifetime_button > div {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .lifetime_button video {
        width: auto;
    }

    .lifetime_button svg {
        margin-right: 0;
        margin-bottom: 4px;
    }

    .lifetime_button {
        height: auto;
        overflow: hidden;
    }

    .two_columns > div:first-child {
        padding-left: 16px;
        padding-right: 16px;
    }

    .two_columns.reversed > div:first-child {
        padding-left: 16px;
        padding-right: 16px;
    }

    h1 br {
        display: none;
    }

    footer .content__ {
        padding-top: 24px;
        padding-bottom: 24px;
        width: 100%;
        border-radius: 0;
    }

    footer .content {
        flex-direction: column;
        padding: 24px;
    }

    footer .content {

        flex-direction: column
    }

    footer .col {
        width: 100%;
        margin-bottom: 48px;
    }

    footer .col:last-child {

        margin-bottom: 0;
    }

    .topbar {
        padding: 0;
    }

    .topbar.scroll .content {
        border-radius: 0;
    }

    #countdown_container .content {
        padding: 16px;
    }

    #countdown .num {
        width: 6vw;
        height: 7vw;
        font-size: 4vw;
    }

    #countdown .two_nums > .num:first-child {
        margin-right: 4px;
    }


    header::after,
    #lifetime::after {
        display: none;
    }



    header h3 {
        font-size: 20px;
    }

    header .lifetime_button {
        width: calc(100% - 24px);
    }

    .lifetime_button {
        width: 100%;
    }


    #topbar .support {
        display: none;
    }





    .grid > * {
        width: 50%;
    }

    #integrated .lg-container {
        width: 20vw;
        height: 10vw;
    }

    #integrated .lg {
        width: 20vw;
        height: 10vw;
        background-size: 80vw 40vw;
    }

    #integrated .grid > * {
        width: 20vw;
        margin-bottom: 8px;
    }

    #lg_0 {
        background-position: 0vw 0vw
    }

    #lg_1 {
        background-position: -20vw 0vw
    }

    #lg_2 {
        background-position: -40vw 0vw
    }

    #lg_3 {
        background-position: -60vw 0vw
    }

    #lg_4 {
        background-position: 0vw -10vw
    }

    #lg_5 {
        background-position: -20vw -10vw
    }

    #lg_6 {
        background-position: -40vw -10vw
    }

    #lg_7 {
        background-position: -60vw -10vw
    }

    #lg_8 {
        background-position: 0vw -20vw
    }

    #lg_9 {
        background-position: -20vw -20vw
    }

    #lg_10 {
        background-position: -40vw -20vw
    }

    #lg_11 {
        background-position: -60vw -20vw
    }

    #lg_12 {
        background-position: 0vw -30vw
    }

    #lg_13 {
        background-position: -20vw -30vw
    }

    #lg_14 {
        background-position: -40vw -30vw
    }

    #lg_15 {
        background-position: -60vw -30vw
    }

}