* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Protest Riot", sans-serif;
}

@font-face {
    font-family: 'Protest Riot';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/protestriot/v2/d6lPkaOxWMKm7TdezXFmpkr8vvhhvmQ.woff2) format('woff2');
    unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8B1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA88, U+1FA90-1FABD, U+1FABF-1FAC5, U+1FACE-1FADB, U+1FAE0-1FAE8, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}

body {
    /* background: #001489; */
    display: block;
    justify-content: center;
    align-items: center;
}

.container {
    margin: 0%;
    min-height: 100vh;
    max-height: 900px;
    display: flex;
    background: url(./img/banner2.png);
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
    /*  border-radius: 20px; */
    flex-direction: column;

}

.navbar {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    color: transparent;
}

.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}


.banners {
    width: 50%;
    justify-content: center;
    margin: 10px;
    font-size: 30px;
    padding: 0px;
    align-items: column;
    flex-wrap: wrap;
    height: 100vh;
    background-size: cover;
    background-position: center top;
    color: white;
    position: relative;


}

.banners p {
    animation: appear 2s;
    line-height: 50px;
    box-shadow: 20px 10px 10px #0d8dad;
    border-radius: 0px 20px 20px 0px;
    margin-left: 20px;
    text-align: center;
    padding: 2%;
}

.banners p:nth-child(2) {
    animation: appear 3s;
    line-height: 60px;
    box-shadow: 20px 20px 50px #0d8dad;

}

.banners p:nth-child(3) {
    animation: appear 4s;
    line-height: 60px;
    box-shadow: 20px 20px 50px #0d8dad;

}

.banners p:nth-child(4) {
    animation: appear 5s;
    line-height: 60px;
    box-shadow: 20px 20px 50px #0d8dad;

}

.banners p:nth-child(5) {
    animation: appear 6s;
    line-height: 60px;
    box-shadow: 20px 20px 50px #0d8dad;

}

.banners p:nth-child(6) {
    animation: appear 7s;
    line-height: 60px;
    box-shadow: 20px 20px 50px #0d8dad;
}

.banners p:nth-child(7) {
    animation: appear 8s;
    line-height: 60px;
    box-shadow: 20px 20px 50px #0d8dad;
}



.Logotipo {
    width: 150px;
    margin: 30px;
    align-items: self-start;

}

nav {
    width: 100%;
    text-align: right;
    background-color: transparent;
}

li {
    list-style: none;
    display: inline-block;
    margin-right: 30px;
}

.nav-link {
    text-decoration: none;
    cursor: pointer;
    color: #fff;
    font-size: 14px;
    box-shadow: inset 0 0 0 0 #8093FF;
    color: #54b3d6;
    padding: 0 .25rem;
    margin: 0 -.25rem;
    transition: color .5s ease-in-out, box-shadow .3s ease-in-out;
}

.nav-li {
    display: none;


}

.icone-menu {
    width: 30px;
    margin-right: 15px;
    display: none;

}

.close-btn {
    display: none;
    position: absolute;
    width: 40px;
    right: 15px;
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    z-index: 20;
    /* Certificar-se de que o botão fique na frente de outros elementos */
}



.mobile-menu {
    display: none;

}

.nav-item {
    display: none;

}

.nav-link:hover {
    color: #0d8dad;
    box-shadow: inset 200px 0 0 0 #f5f5f7;

}

/* Config */
$color-bg: #1e1e1e;
$color-particle: #fff;
$spacing: 2560px;
$time-1: 60s;
$time-2: 120s;
$time-3: 180s;
$time-4: 200s;

/* mixins */
@function particles($max) {
    $val: 0px 0px $color-particle;

    @for $i from 1 through $max {
        $val: #{$val}, random($spacing)+px random($spacing)+px $color-particle;
    }

    @return $val;
}

@mixin particles($max) {
    box-shadow: particles($max);
    border-radius: 50%;
}


.page-bg,
.animation-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
}

.page-bg {
    background: $color-bg;
    background-blend-mode: screen;
    background-size: cover;
    filter: grayscale(100%);
    z-index: -1;
}

.particle,
.particle:after {
    background: transparent;
}

.particle:after {
    position: absolute;
    content: "";
    top: $spacing;
}

.particle-1 {
    animation: animParticle $time-1 linear infinite;
    @include particles(1000);
    height: 2px;
    width: 2px;
}

.particle-1:after {
    @include particles(900);
    height: 2px;
    width: 2px;
}

.particle-2 {
    animation: animParticle $time-2 linear infinite;
    @include particles(800);
    height: 2px;
    width: 2px;
}

.particle-2:after {
    @include particles(500);
    height: 3px;
    width: 3px;
}

.particle-3:after {
    @include particles(1100);
    height: 3px;
    width: 3px;
    border-radius: 50%;
}

.particle-4 {
    animation: animParticle $time-4 linear infinite;
    @include particles(1200);
    height: 1px;
    width: 1px;
}

.particle-4:after {
    @include particles(700);
    height: 1px;
    width: 1px;
}

@keyframes animParticle {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY($spacing * -1);
    }
}

.page-wrapper {
    margin: 40px;
    text-align: center;
    color: #001489;
    z-index: 2;
}

h4 {
    color: #fff;
    width: 100px;
    right: 300px;
    font-family: Tussilago Heavy;
    -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
    -moz-animation: neon1 1.5s ease-in-out infinite alternate;
    animation: neon1 1.5s ease-in-out infinite alternate;
}

h4:hover {
    color: #fff;
    -webkit-animation: none;
    -moz-animation: none;
    animation: none;
}

/*glow for webkit*/

@-webkit-keyframes neon1 {
    from {
        text-shadow: 0 0 10px #fff,
            0 0 20px #fff,
            0 0 30px #fff,
            0 0 40px #101C5F,
            0 0 70px #121735,
            0 0 80px #8093FF,
            0 0 100px #AAB7FF,
            0 0 150px #001489;
    }

    to {
        text-shadow: 0 0 5px #fff,
            0 0 10px #fff,
            0 0 15px #fff,
            0 0 20px #101C5F,
            0 0 35px #121735,
            0 0 40px #8093FF,
            0 0 50px #AAB7FF,
            0 0 75px #001489;
    }
}

/*glow for mozilla*/

@-moz-keyframes neon1 {
    from {
        text-shadow: 0 0 10px #fff,
            0 0 20px #fff,
            0 0 30px #fff,
            0 0 40px #101C5F,
            0 0 70px #121735,
            0 0 80px #8093FF,
            0 0 100px #AAB7FF,
            0 0 150px #001489;
    }

    to {
        text-shadow: 0 0 5px #fff,
            0 0 10px #fff,
            0 0 15px #fff,
            0 0 20px #101C5F,
            0 0 35px #121735,
            0 0 40px #8093FF,
            0 0 50px #AAB7FF,
            0 0 75px #001489;
    }
}

/*glow*/

@keyframes neon1 {
    from {
        text-shadow: 0 0 10px #fff,
            0 0 20px #fff,
            0 0 30px #fff,
            0 0 40px #101C5F,
            0 0 70px #121735,
            0 0 80px #8093FF,
            0 0 100px #AAB7FF,
            0 0 150px #001489;
    }

    to {
        text-shadow: 0 0 5px #fff,
            0 0 10px #fff,
            0 0 15px #fff,
            0 0 20px 101C5F,
            0 0 35px #121735,
            0 0 40px #8093FF,
            0 0 50px #AAB7FF,
            0 0 75px #001489;
    }
}

/*.background-container {
    width: 95%;
    height: 350%;
    display: flex;
    justify-content: right;

  } */
.background-animation {
    width: 50%;
    height: 100%;
    position: absolute;
    right: 0;
    background: none;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAMAAAD8CC+4AAACE1BMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8Jf43gAAAAsXRSTlMAAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaGxwdHh8gISIjJCUmJygpKissLS4vMDEyMzQ1Njc4OTo7PD0+QEFCQ0RFRkdISUpLTE1OT1BRUlRVVldYWVpbXF1eX2BhYmNkZWZnaGlqa2xtbnBxcnR1dnd4eXp7fH1+f4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrOQelO5AAALPElEQVR4XuzAMQEAAADCIPuntsYOWBAAAAAAAHD27vipiTOP4/jwbDabJRGQEIMIKmIpokixlFLRAipXDushRU9F5CrUK6ViLaVYVSwqSlGlKgf0FEFABELI7p94ZyVZZ+5+w8ww+32//4VXnp3Mfp6ZTfm/6Ybf79NVyjqJko+uNuRX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"), url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAABwlBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////V5VU7AAAAlnRSTlMAAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaGxwdHh8gISIjJCUmJygpKissLS4vMDEyMzQ1Njc4OTo7PD0+P0BBQkNERkdISUpLTE1OT1BRUlNVVldYWVpbXF1eX2BhYmNkZWZnaGlqa21ub3Bxc3R1dnd4eXp7fH1+f4CCg4SFhoeIiYqLjI2Oj5CRkpOUlZaXmJmAsba+AAAI4klEQVR4Xu3da1cUVxaA4ck+VdXVXU03Xd3NVVuQFsJNEECIGJQIGFEk8R5vA4GRgKgSzSQS1YigCAFR+vzfmcxn/IRr3LXyvn/hWafq7E2x+h97iIiI6Iu/UyJfqO7vBiJGkwggxk+mU3FHANGRm647fPRIQ+gJIBoyqabR2z9NnW3PuoAoSGL7R+6tbr5ZHC8mRAEAIEHL9Vcla99Md6eNAhFAkp0zG9barYVjISAKkqD1xqq19u2/utNGBwDvkIXVzTc/jxfjAoiCTKpx5NadybG20GEOUZGT2t/Wdbgu4zEYKsnEkqmkbwQQNYlh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"), url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAMAAABOo35HAAABBVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////85QWmiAAAAV3RSTlMAAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaGxwdHh8gISIjJCUnKCkqKywtMDEyMzQ2ODk7PD0/QEFCQ0RFRkdJS01OUFJVVldYWVtcXV9hYmpscXwejIx6AAADsUlEQVR4XuzZiVKbVRjHYXnP+ZYESNISKMRggS4spbaIC7agrcWtLq3r/V+KF+A486rTjLHP7xKeOfmfM1/e+ftpZTFFqbGynC0eq93eGwasXDe/+nW/wMo1+vSbWcDKVccbnc16I8GCBUuwYMGCBQuWoun7msNS3Tw9npQUlrqTVy/3mhSW6vTkcJw+WTare6s2y20ICxasaPsKK1l3+2yjwMo1fvH7wxZWrv7wcqfCylX69SZg/T+DBQsWLFiCBQsWLFiwBAsWLFiwYAkWrKiDvsLKVacPH9wosFK1Rz9+d7eFlapuHB1NnKxcUfvOZv1VbkNYsKId9sk9hdUenN3tcwCw1p/8fDVKAjhZ8+PdLgcAK5quiTcM4DaEBUuwSpMdW1hltDsfBqxUze2ri1sVVqrmvacfb8HKVdZm24OAlStqfWsG3tMBFizBggULFixYggULFixYsAQLFixYsGAJFixYsGDBEixYsGDBgiVYsGDBggVLsKJfGwSsXP2983s9rFyrZ9cfrC4rVmmaWCRWt//ooFtSrDI+2FtbpFZ0g25ZN6vZ++zJTnUbpmrmFx9twcoVw63NPmDlilpiBZYXPCzBggULFixYggULFqxSC6xcZTibjwusTDE8ur6+38LKVLa//O31cQMrU4xOL8+mAStVGYyG1cAvY7BgwYIFS7BgwYIFC5ZgwYIFCxYswYJVmhKwcpXJ/qTCytWfvDzqYeXqT1+dwEpWp8fTCitZ6Qz8vwoWLFiwYMGCBQsWLFjRDvuSA4BVZ49ORjktWP37r79+t6YAYNWto7urkQKAFbVrE1awUsESLFiwYMGCJViwYMGCBUuwYMGCBQuWom1LEkv93uFa5LA0vvp2p+SwNLq4vpXEUrs1H0QOS1GbMPCeDrBgwYIlWLBgwYIF67/1HS4XrMHBnQGsZBsvrqewkt18/sUGrGTdfLeHlSyaJmC9oWDBggULlmDBggULFizBggULFixYggULFixYsAQrVb05HwasXOtPf7nfJrFgffLTnWbhWKWpsYRYdbzdx6Kx6nR/pzPwufqT5+ejgJWqO7w6W4eVq4xn08bPMFmpNWD902DBEixYsGDBgiVYsGDBggUrViJyALCimc5v1BwArPHlDx8OcwCw1h4/e9DnAGxWWZ38+S9suQ1hwYIFC5ZgwYIFCxYswYIFC1ZdmwwCVqoYnT877GClKhuff/94ACtVtJuzcYGVLEqsLF1/tAPHBAAAAAiD7J/aGjtgAQAAcExSazJsIKj4AAAAAElFTkSuQmCC");
    -webkit-animation: snowy 9s linear infinite;
    -moz-animation: snowy 9s linear infinite;
    -o-animation: snowy 9s linear infinite;
    -ms-animation: snowy 9s linear infinite;
    animation: snowy 9s linear infinite;
}

/* DIV container Bem- vindos */

.container-welcome {
    display: flex;
    position: relative;
    justify-content: space-between;
    min-height: 100vh;
    min-width: 100wh;
    background-color: #010101;
    /*	box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.2);
  border-radius: 20px; */

}

.icon {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    flex-direction: column;


}

.icon svg {

    justify-content: Auto;
    text-align: center;
    position: relative;

}

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false
}

@keyframes rotate {
    to {
        --angle: 0deg
    }

    from {
        --angle: 360deg
    }
}

.box-text:before {
    --angle: 80deg;
    border-width: 2px
}

.box-text {
    width: 5%;
    margin: 50px;
    text-align: justify;
    padding: 30px;
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    background-color: #112b46;
    color: white;
    flex-wrap: wrap;
}

.box-text {
    border-radius: 70px;
    background: rgba(0, 0, 0, .4);
    display: flex;
    flex-direction: column;
    flex: 1;
    box-sizing: border-box;
    padding: 75px 35px 55px;
    max-width: 40%;
    position: relative;
    text-align: center;
    margin: 30px auto
}


.box-text::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    border: 2px solid transparent;
    background: linear-gradient(45deg, purple, orange) border-box;
    background-image: linear-gradient(135deg, #2af598, #009efd 50%, #2af598);
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
    background-image: linear-gradient(var(--angle), rgba(255, 255, 255, .28), #00fbfd 50%, rgba(255, 255, 255, .28));
    background-image: conic-gradient(from var(--angle) at 50% 50%, rgba(255, 255, 255, .2) 39%, #00fbfd 50%, rgba(255, 255, 255, .2) 61%);
    animation: 5s rotate linear infinite var(--playState)
}

.box-text h3 {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 200;
    text-align: justify;


}

.container-welcome .icon path {
    fill=transparent;
    stroke-width=10px;
    stroke: #00fbfd;

}

.container-welcome .icon path {
    stroke-dasharray: 1560;
    stroke-dashoffset: 0;
    animation: animate-path 7s;
    transition: fill-opacity 1200ms linear 0s, stroke-opacity 1200ms 0s;
    animation-iteration-count: infinite;

}

@keyframes animate-path {
    0% {
        stroke-dashoffset: 0;
        fill: transparent;
    }

    40% {
        stroke-dashoffset: 1560;

    }

    80% {
        stroke-dashoffset: 3120;
        fill: transparent;
    }

    100% {
        stroke-dashoffset: 3120;
        fill: #00fbfd;

    }

}

/* FIM da DIV container Bem-vindos */

/* Inicio Container Serviços */

.container-servicos {
    display: flow-root;
    color: #fff;
    margin: 0;
    text-align: center;
    min-height: 100vh;
    min-width: 100px;
    background: #000000;
    background-size: cover;
    /*  max-height: 100vw; */


}

.frequency {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 200;
}


#a.buy-button {
    text-decoration: none
}

.section h2 {
    font-size: 38px
}


.buy-button {
    border: 1px solid transparent;
    border-radius: 32px;
    padding: 15px 23px;
    background: rgba(255, 255, 255, .1);
    vertical-align: middle;
    min-height: 35px;
    min-width: 45px;
    cursor: pointer;
    box-sizing: border-box;
    color: #fff;
    transition: .1s ease-in-out, opacity .2s ease-in-out, filter .2s ease-in-out;
    will-change: opacity, text-shadow, box-shadow, background-image;
    margin: 0 0 0 10px;
    text-shadow: rgb(0 0 0 / 5%) 1px 1px 4px;
    text-align: center;
    flex: 1;
    box-shadow: rgb(0 0 0 / 10%) 0 0 0 1px inset, rgb(255 255 255 / 20%) .5px .5px 0 0 inset, rgb(255 255 255 / 18%) 0 0 0 1px inset, rgb(255 255 255 / 6%) 1px 1px 0 0 inset
}

.buy-button {
    line-height: 1;
    padding: 10px 20px;
    min-height: auto;
    margin-left: 1em;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, .1)
}

.buy-button:hover {
    background-color: rgba(255, 255, 255, .15)
}

.buy-button:hover {
    background: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .6);
    box-shadow: none
}

.pricing-options {
    margin: 4em auto 0;
    width: 90%
}

.pricing-options.lifetime {
    margin: 30px auto 4em;
    max-width: 360px
}

.pricing-options .option {
    border-radius: 20px;
    background: rgba(0, 0, 0, .4);
    display: flex;
    flex-direction: column;
    flex: 1;
    box-sizing: border-box;
    padding: 75px 35px 55px;
    max-width: 360px;
    position: relative;
    text-align: center;
    margin: 30px auto
}

.pricing-options.lifetime .option {
    padding-top: 55px;
    padding-bottom: 55px;
    max-width: initial;
    flex-direction: column;
    justify-content: space-between
}

.pricing-options.lifetime ul.features {
    flex: initial
}

.pricing-options.lifetime .buy-button {
    min-width: 170px
}

.pricing-options .option.highlight {
    box-shadow: rgba(28, 205, 219, .09) 0 0 20px
}

.pricing input.decrease,
.pricing input.increase,
.pricing input.quantity,
.pricing-options .option .sell-helper {
    box-shadow: rgba(0, 0, 0, .1) 0 0 0 1px inset, rgba(255, 255, 255, .2) .5px .5px 0 0 inset, rgba(255, 255, 255, .1) 0 0 0 1px inset, rgba(0, 0, 0, .1) 0 2px 4px 0, rgba(255, 255, 255, .05) 0 0 0 1px inset, rgba(0, 0, 0, .07) 0 1px 2px, rgba(0, 0, 0, .07) 0 2px 4px, rgba(0, 0, 0, .07) 0 4px 8px, rgba(0, 0, 0, .07) 0 8px 16px, rgba(0, 0, 0, .07) 0 16px 32px, rgba(0, 0, 0, .07) 0 32px 64px, rgba(255, 255, 255, .05) 0 0 0 1px inset, rgba(255, 255, 255, .06) 1px 1px 0 0 inset, rgba(255, 255, 255, .04) 0 0 0 1px inset
}

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false
}

@keyframes rotate {
    to {
        --angle: 360deg
    }
}

.doesntSupportHoudini .pricing-options .option.highlight:before {
    --angle: 200deg;
    border-width: 2px
}

.pricing-options .option.highlight:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    border: 2px solid transparent;
    background: linear-gradient(45deg, purple, orange) border-box;
    background-image: linear-gradient(135deg, #2af598, #009efd 50%, #2af598);
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
    background-image: linear-gradient(var(--angle), rgba(255, 255, 255, .28), #00fbfd 50%, rgba(255, 255, 255, .28));
    background-image: conic-gradient(from var(--angle) at 50% 50%, rgba(255, 255, 255, .2) 39%, #00fbfd 50%, rgba(255, 255, 255, .2) 61%);
    animation: 5s rotate linear infinite var(--playState)
}


.pricing-options .option.monthly:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    border: 2px solid transparent;
    background: linear-gradient(45deg, purple, orange) border-box;
    background-image: linear-gradient(135deg, #2af598, #009efd 50%, #2af598);
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
    background-image: linear-gradient(var(--angle), rgba(255, 255, 255, .28), #00fbfd 50%, rgba(255, 255, 255, .28));
    background-image: conic-gradient(from var(--angle) at 50% 50%, rgba(255, 255, 255, .2) 39%, #00fbfd 50%, rgba(255, 255, 255, .2) 61%);
    animation: 5s rotate linear infinite var(--playState)
}

.pricing-options .option .features {
    text-align: left;
    line-height: 2;
    margin: 2em 0 2.5em;
    flex: 1;
    font-size: .9em;
    opacity: .8;
    align-self: center
}

.pricing-options .option p.option-name,
.pricing-options .option p.price {
    font-size: 20px;
    max-width: initial
}

.pricing-options .option p.option-name {
    opacity: .9;
    margin: 0
}

.pricing-options .option p.price {
    -webkit-background-clip: text;
    background-image: linear-gradient(#fff 30%, #09b9bb 85%);
    color: transparent
}

.pricing-options .option p.price>span {
    font-size: 41px
}

.frequency {
    text-align: justify;

}

.pricing-options .buy-button {
    flex: initial;
    text-decoration: none;
    margin: 0;
    -webkit-background-clip: text;
    background-image: linear-gradient(#fff 30%, #09b9bb 85%);
    color: transparent
}

.pricing-options .option .sell-helper {
    position: absolute;
    top: 17px;
    left: 0;
    right: 0;
    width: 160px;
    margin: auto;
    text-align: center;
    display: inline-block;
    background: rgba(255, 255, 255, .2);
    padding: 3px 10px;
    border-radius: 200px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    background-color: rgba(65, 149, 156, .1);
    box-shadow: rgba(255, 255, 255, .1) 0 0 0 1px inset;
    color: rgba(65, 255, 255, .8);
    font-size: .7em;
    background-image: radial-gradient(50% 340% at 50% 309%, #40939a 0, hsla(184.64, 41.17%, 43.33%, .972) 11.87%, hsla(184.69, 41.15%, 43.31%, .896) 22.5%, hsla(184.77, 41.12%, 43.29%, .784) 32.18%, hsla(184.86, 41.08%, 43.26%, .648) 41.25%, hsla(184.97, 41.04%, 43.24%, .5) 50%, hsla(185.08, 41%, 43.21%, .352) 58.75%, hsla(185.18, 40.97%, 43.18%, .216) 67.82%, hsla(185.26, 40.94%, 43.16%, .104) 77.5%, hsla(185.31, 40.92%, 43.14%, .028) 88.13%, hsla(185.33, 40.91%, 43.14%, 0) 100%)
}


.gradient-icon svg path {
    fill: #00fff8
}

.pricing-options .option .features {
    color: #001489
}


.pricing .quantity-control {
    display: flex;
    gap: 1em
}

.pricing input.decrease,
.pricing input.increase,
.pricing input.quantity {
    background: rgba(0, 0, 0, .4);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    border: none;
    color: #fff;
    line-height: 24px;
    font-family: SF Mono, Source Code Pro, Consolas, Menlo, monospace;
    font-size: 16px;
    outline: 0;
    box-sizing: border-box;
    transition: .1s;
    touch-action: manipulation;
    -webkit-appearance: none;
    -moz-appearance: textfield
}

.pricing input.decrease:hover,
.pricing input.increase:hover {
    border: 1px solid rgba(255, 255, 255, .5);
    background: rgba(0, 0, 0, .3)
}

.pricing input.decrease,
.pricing input.increase {
    flex: 0 0 35px;
    height: 35px;
    padding: 0;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    transition: background .1s
}

.pricing input.decrease:active,
.pricing input.increase:active {
    background: 0 0
}

.pricing input.quantity::-webkit-inner-spin-button,
.pricing input.quantity::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.pricing input.quantity {
    padding: 9px 16px;
    width: 100px;
    text-align: right;
    -webkit-appearance: none
}



@keyframes placeHolderShimmer {
    0% {
        background-position: -468px 0
    }

    100% {
        background-position: 468px 0
    }
}

.animated-background-loading {
    animation-duration: 1.25s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: rgb(0, 0, 0);
    background: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(0, 20, 137, 1) 100%);
    background-size: 936px 104px
}

.animated-background-loading:after {
    position: absolute;
    content: 'Loading...'
}

.browser-address.animated-background-loading:after {
    content: none
}

.pop {
    animation: .5s forwards pop
}

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

    50% {
        transform: scale(1.15)
    }
}

.sub-explainer {
    display: flex;
    border-top: 1px solid rgba(255, 255, 255, .15);
    margin: 0 auto 5em;
    width: 80%;
    gap: 35px;
    flex-direction: column
}

section.explainer .sub-explainer>p {
    flex: 1;
    margin: 0;
    border-top: 0;
    padding-top: 20px;
    font-size: 20px;
    text-align: left;
    font-family: CerebriSans;
    font-weight: 600;
    line-height: 1.5
}

.sub-explainer i,
.sub-explainer svg {
    transform: scale(.9);
    margin-right: 3px
}

section.explainer.export-elements .big-video {
    margin-bottom: 3em
}

.css-pro-color-eyedropper-popup-for-mobile {
    display: flex;
    align-items: center;
    min-width: 133px !important;
    padding: 6px 18px 6px 6px !important;
    flex-direction: row;
    margin-top: 15px !important;
    height: 47px
}

.css-pro-color-eyedropper-colorshow {
    width: 33px;
    height: 33px;
    border-radius: 40px;
    display: inline-block
}

.css-pro-color-eyedropper-colorname {
    display: inline-block;
    margin: 0 0 0 10px !important;
    line-height: initial !important;
    color: #fff;
    font-size: 15px;
    font-weight: 500
}

.css-pro-color-eyedropper-popup-for-mobile {
    color: #fff;
    text-align: center;
    white-space: nowrap;
    font-size: 13px;
    line-height: 25px;
    direction: ltr;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    border-radius: 32px !important;
    box-shadow: rgba(0, 0, 0, .1) 0 0 0 1px inset, rgba(255, 255, 255, .2) .5px .5px 0 0 inset, rgba(255, 255, 255, .1) 0 0 0 1px inset, rgba(0, 0, 0, .1) 0 2px 4px 0, rgba(255, 255, 255, .05) 0 0 0 1px inset !important
}

.card.color-eyedropper .css-pro-color-eyedropper-popup-for-mobile img.cursor {
    position: absolute;
    width: 30px;
    top: -27px;
    left: -28px
}

div.loading-demo {
    bottom: 2vh;
    left: 0;
    right: 0;
    margin: auto;
    position: fixed;
    display: none;
    z-index: 2147483647;
    -webkit-font-smoothing: antialiased;
    font-weight: 400;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    width: 300px;
    text-shadow: none !important;
    border-radius: 32px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .1);
    font-size: 14px;
    height: initial;
    line-height: 24px;
    box-shadow: rgba(0, 0, 0, .15) .15em .15em .2em;
    transition: .1s ease-in;
    vertical-align: middle;
    text-transform: initial;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    outline: 0 !important;
    background: rgba(25, 25, 29, .95)
}

.styled-inputs label {
    display: block;
    margin-top: 2em;
    margin-bottom: .5em
}

.styled-inputs input[type=email],
.styled-inputs input[type=text],
.styled-inputs textarea {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 8px;
    font-size: 1em;
    color: #fff;
    line-height: 1;
    padding: 10px 15px;
    min-width: min(90%, 350px);
    box-sizing: border-box;
    transition: .1s ease-in-out;
    outline: 0;
    font-family: CerebriSans, -apple-system, BlinkMacSystemFont, Roboto, sans-serif
}

.styled-inputs input[type=email]:hover,
.styled-inputs input[type=text]:hover,
.styled-inputs textarea:hover {
    background: rgba(255, 255, 255, .15) !important
}

.styled-inputs input[type=email]:focus,
.styled-inputs input[type=text]:focus,
.styled-inputs textarea:focus {
    background: rgba(255, 255, 255, .2) !important;
    border-color: rgba(255, 255, 255, .4) !important;
    box-shadow: 0 0 0 1px #2af598
}

.styled-inputs textarea {
    resize: none;
    height: 180px;
    padding: 15px
}

.button-with-that-box-shadow,
.styled-inputs input[type=submit] {
    font-family: CerebriSans, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    background: rgba(255, 255, 255, .2) !important;
    border: 1px solid transparent !important;
    border-radius: 33px;
    box-shadow: rgba(0, 0, 0, .06) 0 1px 3px 0;
    color: #fff !important;
    display: inline-block;
    cursor: pointer;
    padding: 12px 20px;
    text-decoration: none;
    transition: 250ms cubic-bezier(.25, .46, .45, .94);
    font-size: 16px;
    line-height: normal;
    box-shadow: rgb(0 0 0 / 10%) 0 0 0 1px inset, rgb(255 255 255 / 20%) .5px .5px 0 0 inset, rgb(255 255 255 / 18%) 0 0 0 1px inset, rgb(255 255 255 / 6%) 1px 1px 0 0 inset !important;
    margin-top: 25px;
    margin-bottom: 15px;
    min-width: 180px
}

.styled-inputs input[type=submit] {
    -webkit-appearance: none;
    font-weight: initial
}

.button-with-that-box-shadow:hover,
.styled-inputs input[type=submit]:hover {
    box-shadow: none !important;
    background-color: rgba(255, 255, 255, .25) !important;
    border-color: rgba(255, 255, 255, .6) !important
}

input#license-input {
    padding: 12px 15px;
    font-size: 16px;
    width: min(90%, 420px);
    letter-spacing: 1px;
    text-align: center;
    color: #b3ffdc;
    background: 0 0
}

p.success {
    margin-top: 3em !important
}

body.blue-background {
    background-color: #252528;
    background-image: linear-gradient(180deg, rgba(0, 119, 255, .22) 0, transparent 58.5%);
    background-image: radial-gradient(200% 100% at 50% -17%, rgba(0, 169, 255, .22) 0, transparent 58.5%)
}

.download,
.faq {
    max-width: min(90%, 750px);
    margin: 3em auto 0
}

.download,
.welcome>p {
    max-width: min(90%, 600px)
}

.welcome {
    max-width: min(90%, 800px)
}

.download .card,
.faq .card {
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    margin: 15px 0
}

.download .card {
    border-radius: 50px
}

.download .card p,
.faq .card p {
    margin: 1em 0
}

.faq .card p.question {
    opacity: 1;
    color: #fff;
    font-family: CerebriSans, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    font-weight: 600;
    font-size: 1.25em;
    margin-top: 0
}

.faq .card p.answer {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 20px;
    line-height: 1.8
}

.download p {
    line-height: 1.8
}

.download .card p {
    font-size: 18px !important
}

.browser-part {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2em
}

.browser-part h2 {
    margin-bottom: .3em
}

img.browser-logo {
    width: 70px
}

.download span.license {
    background: rgb(255, 255, 255, .15);
    padding: 10px 26px;
    border-radius: 40px;
    margin-top: 1em;
    font-size: 16px;
    border: 1px solid rgba(255, 255, 255, .1);
    transition: .2s;
    color: #fff;
    display: inline-flex;
    align-items: center;
    font-weight: initial;
    vertical-align: middle
}

.download span.license.filled {
    cursor: default
}

.download span.license:not(.copied),
input#license-input {
    font-family: SF Mono, Source Code Pro, Consolas, Menlo, monospace
}

.download span.license:hover {
    border-color: rgba(255, 255, 255, .2)
}

.download span.license.copied {
    border-color: #34dfb1
}

.download span.license.copied,
.green {
    color: #34dfb1
}

.download span.license svg {
    height: 20px;
    margin-right: 12px
}

.hero.with-margin-top {
    margin-top: 165px
}

.sub-links-rounded {
    color: #ccc;
    font-size: 13px;
    margin: 10px 0 10px 5px;
    display: inline-block;
    text-decoration: none;
    background: rgba(255, 255, 255, .05);
    padding: 8px 16px;
    border-radius: 33px;
    vertical-align: bottom;
    transition: .1s ease-in-out;
    box-sizing: border-box;
    line-height: normal !important
}

.my-license {
    min-height: 55vh
}

.button-with-that-box-shadow.without-background {
    background: 0 0 !important;
    min-width: initial
}

.activations-list {
    max-width: min(90%, 750px);
    margin: auto
}

.activations-list .card {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 15px 0;
    border-radius: 20px;
    background: rgba(0, 0, 0, .2);
    padding: 25px 35px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.activations-list .card .button-cta.deactivate {
    margin-top: 0;
    font-size: 16px
}

.activations-list .card .button-cta.deactivate:hover {
    background: rgba(255, 62, 62, .56)
}

.activations-list .card .deactivate-icon {
    margin-left: 5px;
    transform: translateY(2px)
}

h3.license-key {
    font-size: 1.5em;
    margin: 1em .5em
}

.need-more-activations {
    margin: 2em 0
}

.browsers-download {
    margin-top: 5em;
    margin-bottom: 2.5em
}

.browsers-download img {
    width: 35px;
    height: auto;
    margin: 0 20px
}

.play-button {
    width: 80px;
    height: 80px;
    font-size: 1.8rem;
    background: rgba(0, 0, 0, .7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 6px 100px 4px #000;
    opacity: 1;
    transition: .25s;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    transition: background-position .5s, transform .5s;
    background-color: rgba(25, 25, 29, .95);
    background-image: repeating-linear-gradient(119deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 7.1%, rgba(255, 255, 255, .1) 25.3%, transparent 45.3%);
    box-shadow: 0 6px 100px 4px rgba(0, 0, 0, .5), rgb(0 0 0 / 10%) 0 0 0 1px inset, rgb(255 255 255 / 20%) .5px .5px 0 0 inset, rgb(255 255 255 / 10%) 0 0 0 1px inset, rgb(0 0 0 / 10%) 0 2px 4px 0, rgb(255 255 255 / 5%) 0 0 0 1px inset, rgb(0 0 0 / 7%) 0 1px 2px, rgb(0 0 0 / 7%) 0 2px 4px, rgb(0 0 0 / 7%) 0 4px 8px, rgb(0 0 0 / 7%) 0 8px 16px, rgb(0 0 0 / 7%) 0 16px 32px, rgb(0 0 0 / 7%) 0 32px 64px, rgb(255 255 255 / 5%) 0 0 0 1px inset, rgb(255 255 255 / 6%) 1px 1px 0 0 inset, rgb(255 255 255 / 4%) 0 0 0 1px inset;
    background-size: 250%
}

.promo-img:hover .play-button {
    transform: scale(1.2);
    background-position: 100% center
}

img.pin-the-extension-helper-arrow {
    position: absolute;
    right: max(7.8vw, 113px);
    top: 10px;
    width: 40px;
    display: none
}

.pin-the-extension-helper {
    position: absolute;
    right: 30px;
    top: 70px;
    text-align: center;
    border-radius: 20px;
    display: none;
    max-width: 370px;
    padding: 20px;
    background: radial-gradient(100% 107% at 72% -5%, #fffFFF33 0, #00000038 99.6%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px)
}

.pin-the-extension-helper img {
    margin: 0 3px
}

body.limited-to-100vh {
    max-height: 100vh;
    overflow: hidden
}

@media screen and (min-width: 375px) {
    h1 {
        font-size: 44px
    }

    h2 {
        font-size: 41px
    }

    p.big-p.even-bigger {
        font-size: 26px
    }

    .card-illustration.gradients-example .gradient-example {
        width: 80px;
        height: 80px
    }

    .card-illustration.images-and-noise .noise-example {
        width: 80px
    }

    .card-illustration.images-and-noise .image-example img {
        width: 130px
    }

    .card-illustration.convert-units {
        zoom: 0.89
    }

    .ease-gradients-demo-gradient-1,
    .ease-gradients-demo-gradient-2 {
        width: 100px;
        height: 100px
    }

    .supported-browsers img {
        --logo-height: 60px
    }

    .supported-browsers li {
        animation-name: spinAround
    }

    section.explainer .sub-explainer>p {
        font-size: 22px
    }

    .card-illustration.infinite-layers {
        zoom: 0.9
    }

    section.explainer.next-level-backgrounds {
        --conic-y-position: 14.5%
    }
}

@media screen and (min-width: 425px) {
    h2 {
        font-size: 44px
    }

    .card-illustration.convert-units,
    .card-illustration.infinite-layers {
        zoom: 1
    }

    .color-palette-demo li:nth-child(16),
    .color-palette-demo li:nth-child(17),
    .color-palette-demo li:nth-child(18),
    .color-palette-demo li:nth-child(19),
    .color-palette-demo li:nth-child(20),
    .color-palette-demo li:nth-child(21),
    .color-palette-demo li:nth-child(22),
    .color-palette-demo li:nth-child(23),
    .color-palette-demo li:nth-child(24) {
        display: inline-block
    }

    .color-palette-demo {
        margin: 9px 0 0
    }

    .card-illustration.direct-control {
        width: 300px;
        background-image: linear-gradient(103deg, #b6d0f7 .9%, #eef4e1 21.12%, #e2c1f9 39.05%, #bfd1f9 52.2%, #fafcfe 62.83%, #bae4e2 71.67%, #8c6be3 89.14%)
    }

    .css-demo-pro-gradient-controls-overlay {
        width: 328.054px;
        height: 215.641px;
        transform: translate(-14px, -33px) rotate(13deg)
    }

    section.explainer.next-level-backgrounds {
        --conic-y-position: 19%
    }
}

@media screen and (min-width: 735px) {
    h1.two-lines {
        background-image: linear-gradient(180deg, #fff 30%, #2d82a4 100%)
    }

    .color-palette-demo li:nth-child(13),
    .color-palette-demo li:nth-child(14),
    .color-palette-demo li:nth-child(15),
    .color-palette-demo li:nth-child(16),
    .color-palette-demo li:nth-child(17),
    .color-palette-demo li:nth-child(18),
    .color-palette-demo li:nth-child(19),
    .color-palette-demo li:nth-child(20),
    .color-palette-demo li:nth-child(21),
    .color-palette-demo li:nth-child(22),
    .color-palette-demo li:nth-child(23),
    .color-palette-demo li:nth-child(24),
    .hide-on-tablet-and-up {
        display: none
    }

    .hero-buttons,
    .hide-on-mobile,
    nav ul li:not(:last-child) {
        display: initial
    }

    .hero .promo-img {
        width: 80%;
        min-height: 300px;
        margin-top: 150px;
        margin-bottom: 80px
    }

    .play-button {
        width: 130px;
        height: 130px;
        font-size: 2.2rem
    }

    section.next-level-backgrounds .big-video {
        margin-bottom: 100px
    }

    p.big-p.even-bigger {
        font-size: 28px
    }

    .hero {
        margin-top: 165px
    }

    .hero-buttons {
        max-width: initial
    }

    .hero-buttons .getitbutton,
    .hero-buttons .hero-button {
        margin: 0 0 0 10px
    }

    h1 {
        font-size: 65px;
        line-height: 1.35
    }

    h2 {
        font-size: 35px
    }

    .card-title,
    h1,
    h2,
    p.price span,
    section.explainer .sub-explainer strong {
        letter-spacing: -.01em
    }

    .hero p {
        font-size: 22px
    }

    .card {
        padding: 50px
    }

    .card-illustration.color-picker {
        flex-direction: row;
        gap: 50px
    }

    .card.color-eyedropper .card-illustration .art-wrapper,
    .card.color-eyedropper .card-illustration .art-wrapper:not(:first-child) {
        display: flex
    }

    .card.color-eyedropper .card-illustration .art-wrapper:first-child {
        margin-left: 47px
    }

    .card.color-eyedropper .card-illustration .art-wrapper:nth-child(3) {
        transform: translate(-40px, 30px)
    }

    .card.color-eyedropper .card-illustration .art-wrapper:nth-child(4) {
        transform: translate(-50px, -23px)
    }

    .sub-explainer {
        margin: 0 auto 7em;
        width: 80%
    }

    .card.color-eyedropper {
        width: 80%
    }

    section.explainer .sub-explainer>p {
        font-size: 26px
    }

    section.explainer.become-a-css-pro,
    section.explainer.changes,
    section.explainer.next-level-backgrounds,
    section.explainer:not(.ruler-explainer) {
        padding-left: 5%;
        padding-right: 5%
    }

    section.explainer.become-a-css-pro {
        margin-bottom: 0
    }

    section.explainer.become-a-css-pro,
    section.explainer.next-level-backgrounds {
        overflow: initial
    }

    section.explainer.next-level-backgrounds {
        margin-bottom: 0;
        --conic-y-position: 20%
    }

    .cards-row,
    .cards-row.with-3-cards,
    .cards-row.with-cards-taking-half {
        max-width: 80%
    }

    .card .card-illustration,
    .card.small {
        width: 300px
    }

    .card-illustration.devtools {
        width: 100%
    }


    .card.horizontal {
        flex-direction: row
    }

    .card.horizontal .card-text {
        margin-left: 60px
    }

    section.export-elements .card.small {
        width: initial
    }

    .scan-magic .card.mask-div {
        width: 400px
    }

    p.big-p {
        font-size: 24px
    }

    .card-illustration.color-picker video {
        border-color: rgba(255, 255, 255, .15)
    }

    .cool-circle {
        -webkit-mask-image: linear-gradient(0deg, black, transparent)
    }

    .browser-address {
        max-width: 70%
    }

    .changes-demo.browser .cursor {
        top: 55px
    }

    .changes-demo.browser .cursor,
    .changes-demo.browser .cursor.before {
        margin-left: -10px;
        margin-top: 3px
    }

    .changes-demo.browser .cursor.after {
        margin-left: 40px;
        margin-top: 0
    }

    section.explainer {
        margin-top: 8em;
        margin-bottom: 8em
    }

    section.explainer.less-margin-bottom {
        margin-bottom: 6em
    }

    section.explainer.export-elements .big-video {
        margin-bottom: -6em
    }

    footer {
        padding: 35px 60px
    }

    footer .bottom {
        gap: initial;
        flex-direction: row
    }

    .pricing-options .option {
        padding: 80px 55px;
        margin: 30px auto
    }

    .pricing-options.lifetime {
        margin: 0 auto 4em;
        max-width: calc(360px * 2 + 50px)
    }

    .pricing-options.lifetime .option {
        max-width: 360px
    }

    section.pricing {
        padding-top: 8px
    }

    .ruler-wrapper-to-set-margin {
        margin: 0 5em
    }

    footer .link-list {
        flex-direction: row;
        flex-wrap: wrap
    }

    section.explainer h2,
    section.explainer p.big-p,
    section.pricing h2,
    section.pricing p.big-p,
    section.pricing p.small-p {
        margin-left: 10%;
        margin-right: 10%
    }

    .changes-demo,
    .changes-images-wrapper,
    .changes-main-image-wrapper {
        width: 90%
    }

    .crazy-gradient {
        max-height: 600px
    }

    .activations-list .card {
        flex-direction: row;
        align-items: center
    }
}

@media screen and (min-width: 1024px) {
    h1 {
        margin-left: 15%;
        margin-right: 15%
    }

    .non-demoable-only {
        display: none
    }

    .crazy-gradient-wrapper {
        flex-direction: row;
        margin-top: 0
    }

    .cards-row,
    .sub-explainer {
        flex-direction: row
    }

    .crazy-gradient {
        height: calc(50vw - calc(var(--scrollbar-width)/ 2));
        max-height: initial
    }

    .crazy-gradient:first-child {
        transform: rotate(90deg)
    }

    .crazy-gradient:nth-child(2) {
        transform: rotate(270deg)
    }

    footer .limited-width {
        padding: 0 2em
    }

    .big-video,
    .card.color-eyedropper,
    .changes-images-wrapper,
    .hero-css-pro {
        width: 100%
    }

    .color-palette-demo li:nth-child(13),
    .color-palette-demo li:nth-child(14),
    .color-palette-demo li:nth-child(15),
    .color-palette-demo li:nth-child(16),
    .color-palette-demo li:nth-child(17),
    .color-palette-demo li:nth-child(18),
    .color-palette-demo li:nth-child(19),
    .color-palette-demo li:nth-child(20),
    .color-palette-demo li:nth-child(21),
    .pin-the-extension-helper {
        display: inline-block
    }

    .hero p {
        margin: 0 auto 48px
    }

    section.explainer h2,
    section.explainer p.big-p,
    section.pricing h2,
    section.pricing p.big-p,
    section.pricing p.small-p {
        margin-left: auto;
        margin-right: auto
    }

    .card.transparent {
        padding: 50px
    }

    .cards-row.with-cards-taking-half .card {
        margin: 15px
    }

    .cards-row,
    .cards-row.with-3-cards,
    .cards-row.with-cards-taking-half {
        max-width: 100%
    }

    section.export-elements .cards-row {
        max-width: 80%
    }

    .pricing-options {
        display: flex;
        justify-content: center;
        gap: 30px;
        margin: 4em 0;
        width: initial;
        gap: initial
    }

    .pricing-options .option {
        margin: 0
    }

    .pricing-options .option:not(:last-child) {
        margin-right: 50px
    }

    .sub-explainer {
        gap: 75px;
        width: 100%
    }

    .sub-explainer.with-margin-top {
        margin-top: 110px
    }

    .cards-column .card,
    .cards-row>.card:last-child {
        margin-right: 0
    }

    .cards-row>.card:first-child {
        margin-left: 0
    }

    .cards-column .card,
    .cards-row>.card {
        margin-left: 15px;
        margin-right: 15px
    }

    .pricing-options.lifetime .option {
        max-width: initial;
        margin: 0;
        flex-direction: row;
        align-items: center
    }

    .pricing-options.lifetime {
        margin: 4em auto;
        max-width: calc(360px * 2 + 50px)
    }

    .pricing-options.lifetime .option p.frequency,
    section.explainer.zero-margin-bottom {
        margin-bottom: 0
    }

    .card-illustration.fonts {
        height: 302px
    }

    .card-illustration.gradients-example {
        min-height: 110px
    }

    section.export-elements .card.small {
        width: 300px
    }

    section.explainer.zero-margin-top {
        margin-top: 0
    }

    section.explainer:not(.ruler-explainer) {
        padding: 0 10%
    }

    section.explainer.become-a-css-pro,
    section.explainer.changes,
    section.explainer.next-level-backgrounds {
        padding: 5% 10%
    }

    .demo-button,
    .hide-on-mobile-and-tablet {
        display: initial
    }

    .ruler-wrapper-to-set-margin {
        margin: 0 9%
    }

    section.explainer.next-level-backgrounds {
        --conic-y-position: 28%
    }

    img.pin-the-extension-helper-arrow {
        display: block
    }
}

@media screen and (min-width: 1150px) {
    .hide-on-desktop {
        display: none
    }

    .card.color-eyedropper .card-illustration .art-wrapper {
        backdrop-filter: none;
        -webkit-backdrop-filter: none
    }

    .color-palette-demo li:nth-child(22),
    .color-palette-demo li:nth-child(23),
    .color-palette-demo li:nth-child(24) {
        display: inline-block
    }

    .sub-explainer {
        gap: 75px;
        width: 90%
    }
}

@media screen and (min-width: 1200px) {

    section.explainer,
    section.explainer.become-a-css-pro,
    section.explainer.changes,
    section.explainer.next-level-backgrounds {
        margin-top: 10em;
        margin-bottom: 10em
    }

    section.explainer.become-a-css-pro,
    section.explainer.zero-margin-top {
        margin-top: 0
    }

    section.explainer.zero-margin-bottom {
        margin-bottom: 0
    }

    section.explainer.become-a-css-pro,
    section.explainer.changes,
    section.explainer.next-level-backgrounds {
        padding: 10%
    }

    .hero .promo-img {
        min-height: 500px
    }

    .changes-demo,
    .changes-images-wrapper,
    .changes-main-image-wrapper {
        width: 80%
    }

    .changes-demo.browser .cursor {
        top: 60px
    }

    .changes-demo.browser .cursor,
    .changes-demo.browser .cursor.before {
        margin-left: -20px
    }

    .changes-demo.browser .cursor.after {
        margin-left: 50px
    }

    .big-video,
    .hero-css-pro {
        width: 90%
    }

    section.explainer.next-level-backgrounds {
        --conic-y-position: 32%
    }
}

@media screen and (min-width: 1300px) {

    .card.color-eyedropper,
    .sub-explainer {
        width: 80%
    }

    .ruler-wrapper-to-set-margin {
        margin: 0 5em
    }

    section.explainer,
    section.explainer:not(.ruler-explainer) {
        padding: 0
    }

    section.explainer.become-a-css-pro,
    section.explainer.changes,
    section.explainer.next-level-backgrounds {
        padding: 5% 10%
    }

    .cards-row,
    .cards-row.with-3-cards,
    .cards-row.with-cards-taking-half {
        max-width: 80%
    }

    .light-blob.bottom-right {
        right: -50px
    }
}

@media screen and (max-width: 375px) {
    .hide-on-under-375 {
        display: none
    }
}

@media screen and (max-width: 768px) {
    .no-mask-on-mobile video {
        -webkit-mask-image: none !important
    }
}

.welcome h1 {
    margin: .6em 6%
}

.css-pro-modal-title {
    margin-left: 0
}

/* Fim dos serviços */

/* Inicio Container Contato */

.container-contato {
    display: flow-root;
    color: #fff;
    margin: 0;
    text-align: center;
    min-height: 100vh;
    min-width: 100px;
    background: #000000;
    background-size: cover;


}

.form {
    text-align: center;
    background: #000;
    box-shadow: 1px 0px 1.2px 0px #040000;
    border-radius: 3px;
    max-width: 100%;
    margin: auto;
    padding: 5%;
}


.titulo-form {
    width: 100%;
    float: left;
    color: #ffffff;
    margin-bottom: 20px;
    border-bottom: 1px #00000008 solid;
    padding-bottom: 10px;
}

.input-group {
    position: relative;
    margin-bottom: 20px;
}

.input {
    border: 1px solid #ffffff;
    background: none;
    width: 90%;
    height: 40px;
    padding: 1%;
    resize: none;
    font-size: 1em;
    color: #ffffff;
}

.textarea {
    border: 1px solid #ffffff;
    background: none;
    resize: none;
    width: 90%;
    height: 200px;
    padding: 1%;
    font-size: 1em;
    color: #ffffff;
}

.user-label {
    position: absolute;
    left: 7%;
    color: #ffffff;
    pointer-events: none;
    transform: translateY(1rem);
    transition: 350ms;
}

.custom-control-custom-checkbox {
    color: #ffffff;
    left: 16%;
    text-align: -webkit-center;
    height: 50px;
    color: black;
    align-content: space-between;
}

.input:focus,
input:valid {
    outline: none;
    --angle: 0deg;
    border-bottom: 3px solid;
    border-image: conic-gradient(from var(--angle), black, aqua) 1;
    animation: 5s rotate9234 linear;
}

.textarea:focus,
textarea:valid {
    outline: none;
    --angle: 0deg;
    border-bottom: 3px solid;
    border-image: conic-gradient(from var(--angle), black, aqua) 1;
    animation: 5s rotate9234 linear infinite;
}

@keyframes rotate9234 {
    to {
        --angle: 360deg;
    }
}

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.input:focus~label,
input:valid~label {
    transform: translateY(-50%) scale(1);
    background-color: #000000;
    padding: 0 .4em;
    color: #ffffff;
}

.textarea:focus~label,
textarea:valid~label {
    transform: translateY(-50%) scale(1);
    background-color: #000000;
    padding: 0 .4em;
    color: #ffffff;
}

.btn-gradient {
    width: auto;
    font-size: 1em;
    padding: 12px 25px;
    border: none;
    outline: none;
    background: transparent;
    color: #fff;
    text-decoration: none;
    position: relative;
    z-index: 0;
    cursor: pointer;
}

.btn-gradient::before {

    position: absolute;
    content: "";
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    left: -3px;
    top: -3px;
    background: linear-gradient(124deg, black, aqua);
    background-size: 400%;
    z-index: -1;
    filter: blur(0px);
    animation: move 20s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.btn-gradient:hover::before {
    opacity: 1;
}

.btn-gradient::after {
    z-index: -1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #3f3f3f;
    ;
    left: 0;
    top: 0;
}

@keyframes move {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 400% 0;
    }

    100% {
        background-position: 0 0;
    }
}

/* Fim Container Contato */

/* Agradecimento */

.container-agradecimento {
    background: #000000;
    color: aqua;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    text-align: center;
}

.btn-agradecimento {
    width: auto;
    font-size: 1em;
    margin: 15px;
    padding: 12px 25px;
    border: none;
    outline: none;
    background: transparent;
    color: aqua;
    text-decoration: none;
    position: relative;
    z-index: 0;
    cursor: pointer;
}

.btn-agradecimento::before {

    position: absolute;
    content: "";
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    left: -3px;
    top: -3px;
    background: linear-gradient(124deg, black, aqua);
    background-size: 400%;
    z-index: -1;
    filter: blur(0px);
    animation: move 20s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.btn-agradecimento:hover::before {
    opacity: 1;
}

.btn-agradecimento::after {
    z-index: -1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #091c18;
    left: 0;
    top: 0;
}



/* Inicio Container Clientes */

.container-clientes {
    background: #010101;
    display: contents;
    min-height: 50vh;
    max-height: 450px;
    color: white;
    justify-content: center;
    background-size: cover;
}




@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-250px * 7));
    }
}

.slider {
    background: white;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
    height: 100px;
    margin: auto;
    overflow: hidden;
    position: relative;
}

.slider::before,
.slider::after {
    background: linear-gradient(to right, rgb(0, 0, 0) 0%, rgba(255, 255, 255, 0) 100%);
    content: "";
    height: 100px;
    position: absolute;
    width: 200px;
    z-index: 2;
}

.slider::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}

.slider::before {
    left: 0;
    top: 0;
}

.slider .slide-track {
    animation: scroll 40s linear infinite;
    display: flex;
    width: calc(250px * 14);
}

.slider .slide {
    height: 100px;
    width: 250px;
}

/* fim container clientes */

/* Botão para retornar ao topo da pagina */

#backToTopBtn {
    position: fixed;
    bottom: 5%;
    left: 15px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: none;
    /* Inicialmente escondido */
    scroll-behavior: smooth;
}

#backToTopBtn img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

#backToTopBtn:hover img {
    filter: brightness(85%);
}

/* fim do botão top */

/* Botão WhatsApp */

.whatsapp-button {
    position: fixed;
    bottom: 5%;
    right: 15px;
    width: 50px;
    height: 50px;
    padding: 2px;
    cursor: pointer;
}

/* Fim do Botão WhatsApp */


/* Container depoimento */

.container-depoimentos {

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: black;

}

.container-depoimentos h2 {
   
    text-align: center;
    background-color: black;
    color: white;
    width: 100%;
    padding: 50px;
}


@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);

figure.snip1157 {
    font-family: 'Roboto';
    font-style: normal;
    position: relative;
    overflow: hidden;
    margin: 50px;
    min-width: 220px;
    max-width: 310px;
    width: 100%;
    color: #333;
    text-align: left;
    box-shadow: none !important;
}

figure.snip1157 * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
    transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}

figure.snip1157 img {
    max-width: 100%;
    vertical-align: middle;
    height: 90px;
    width: 90px;
    border-radius: 50%;
    margin: 40px 0 0 10px;
}

figure.snip1157 blockquote {
    display: block;
    font-family: 'Roboto';
    font-style: normal;
    border-radius: 8px;
    position: relative;
    background-color: #fafafa;
    padding: 25px 50px 30px 50px;
    font-size: 0.8em;
    font-weight: 500;
    margin: 0;
    line-height: 1.6em;
}

figure.snip1157 blockquote:before,
figure.snip1157 blockquote:after {
    /* font-family: 'FontAwesome'; */
    content: "\201C";
    position: absolute;
    font-size: 50px;
    opacity: 0.3;
    font-style: normal;
}

figure.snip1157 blockquote:before {
    top: 25px;
    left: 20px;
}

figure.snip1157 blockquote:after {
    content: "\201D";
    right: 20px;
    bottom: 0;
}

figure.snip1157 .arrow {
    top: 100%;
    width: 0;
    height: 0;
    border-left: 0 solid transparent;
    border-right: 25px solid transparent;
    border-top: 25px solid #fafafa;
    margin: 0;
    position: absolute;
}

figure.snip1157 .author {
    position: absolute;
    bottom: 45px;
    padding: 0 10px 0 120px;
    margin: 0;
    text-transform: uppercase;
    color: #ffffff;
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
}

figure.snip1157 .author h5 {
    opacity: 0.8;
    margin: 0;
    font-weight: 800;
}

figure.snip1157 .author h5 span {
    font-weight: 400;
    text-transform: none;
    padding-left: 5px;
}



/* Fim Container depoimento */





/* Inicio rodapé */

footer {
    background-color: #000;
    color: #fff;
    padding: 50px 0;
    text-align: center;
}

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

.footer-links,
.footer-social,
.footer-contact {
    margin: 10px 0;
}

.footer-links a,
.footer-contact a {
    color: #fff;
    text-decoration: none;
    margin: 0 10px;
}

.footer-links a:hover,
.footer-contact a:hover {
    text-decoration: underline;
}

.footer-social a {
    margin: 0;
    display: inline-flex;
    padding: 5px;
}

.footer-social img {
    width: 30px;
    height: 30px;
}

.footer-contact p {
    margin: 5px 0;
    justify: center;
}

.footer-bottom {
    margin-top: 20px;
}

@media (min-width: 600px) {
    .footer-container {
        flex-direction: row;
        justify-content: space-around;
    }
}

/* Fim rodapé */

@-moz-keyframes snowy {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px;
    }

    75% {
        background-position: 325px 750px, 275px 600px, -5px 150px;
    }

    100% {
        background-position: 500px 1000px, 400px 800px, 0px 300px;
    }
}

@-webkit-keyframes snowy {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px;
    }

    75% {
        background-position: 325px 750px, 275px 600px, -5px 150px;
    }

    100% {
        background-position: 500px 1000px, 400px 800px, 0px 300px;
    }
}

@-o-keyframes snowy {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px;
    }

    75% {
        background-position: 325px 750px, 275px 600px, -5px 150px;
    }

    100% {
        background-position: 500px 1000px, 400px 800px, 0px 300px;
    }
}

@keyframes snowy {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px;
    }

    75% {
        background-position: 325px 750px, 275px 600px, -5px 150px;
    }

    100% {
        background-position: 500px 1000px, 400px 800px, 0px 300px;
    }
}

@keyframes appear {
    from {
        opacity: 0;
        translate: 100vw 0;
    }

    to {
        opacity: 1;
        translate: 0, 0;
    }
}


/*MEDIA QUERY*/

@media (max-width: 720px) {
    nav ul.nav-list {
        display: none;
    }

    body.menu-active {
        overflow: hidden;
    }

    nav ul.nav-list.active {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(0 0 0);
        z-index: 10;
    }

    .nav-link {
        text-decoration: none;
        cursor: pointer;
        color: #fff;
        font-size: 25px;
        box-shadow: inset 0 0 0 0 #8093FF;
        color: #54b3d6;
        padding: 0 .25rem;
        margin: 0 -.25rem;
        transition: color .5s ease-in-out, box-shadow .3s ease-in-out;
    }

    nav ul.nav-list.active li {
        margin: 20px 0;
        /* Espaçamento entre os itens */
    }

    .icone-menu {
        display: block;
        /* Mostrar o ícone do menu */
    }

    nav ul.nav-list.active+.close-btn {
        display: block;
        /* Mostrar o botão de fechar */
    }


    .container {
        margin: 0%;
        min-height: 100vh;
        display: flex;
        background: url(./img/banner2-mobile.png);
        background-repeat: no-repeat;
        background-size: cover;
        flex-direction: column;
    }

    .banners p {
        animation: appear 2s;
        inline-size: max-content;
        box-shadow: 10px 5px 5px #0d8dad;
        border-radius: 0px 20px 20px 0px;
        margin-left: 10px;
        text-align: center;
        position: relative;
    }

    .banners {
        width: 50%;
        margin: 30px;
        font-size: 20px;
        padding: 10px;
        flex-wrap: wrap;
        min-height: 100vh;
        background-size: cover;
        background-position: center top;
        color: white;

    }

    .container-welcome {
        flex-direction: column-reverse;
        background-color: #010101;
        overflow: hidden;

    }

    .icon {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px;

    }

    .box-text {
        width: auto;
        margin: 20px auto;
        text-align: justify;
        padding: 30px;
        box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
        border-radius: 20px;
        max-width: 360px;
        background-color: #010101;
        color: white;
        flex-wrap: wrap;
    }


    .slider {
        background: white;
        box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
        height: 100px;
        margin: auto;
        overflow: hidden;
        position: relative;
    }

    .slider::before,
    .slider::after {
        background: linear-gradient(to right, rgb(0, 0, 0) 0%, rgba(255, 255, 255, 0) 10%);
        content: "";
        height: 100px;
        position: absolute;
        width: 200px;
        z-index: 2;
    }


    .slider::after {
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
    }

    .slider::before {
        left: 0;
        top: 0;
    }

    .slider .slide-track {
        animation: scroll 40s linear infinite;
        display: flex;
        width: calc(250px * 54);
    }

    .slider .slide {
        height: 100px;
        width: 250px;
    }

}

@media (min-width: 721px) {
    .close-btn {
        display: none;
        /* Esconder o botão de fechar quando a largura for maior que 720px */
    }
}