@import url('https://rsms.me/inter/inter.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

html {
    font-family: 'Inter', sans-serif;
}

@supports (font-variation-settings: normal) {
    html {
        font-family: 'Inter var', sans-serif;
    }
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

a {
    text-decoration: none !important;
}

p {
    margin: 0;
}

/*ALL*/

:root {
    --colorPrimary: #E4002B;
    --colorPrimaryEffect: #FF5F7D;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #dadada;
}

::-webkit-scrollbar-thumb:hover {
    background: #cacaca;
}

.noselect * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.center-abs {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.center-abs-hor {
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
}

.full-width {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw !important;
    max-width: none;
    height: auto;
}

/*Button*/

.button-cdp {
    display: flex;
    background: #E4002B;
    height: 40px;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    border-radius: 12px;
    box-shadow: 0px 2px 2px -1.5px rgba(0, 0, 0, 0.614);
    overflow: hidden;
    cursor: pointer;
}

.button-cdp:hover {
    transform: scale(1.005);
    box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.50);
    transition: transform 0.5s ease-in-out, box-shadow 0.2s ease-in;
    -webkit-transition: -webkit-transform 0.5s ease-in-out, box-shadow 0.2s ease-in;
}

.button-cdp:hover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: saturate(102%) brightness(102%);
    -webkit-backdrop-filter: saturate(102%) brightness(102%);
    z-index: 99;
}

.button-cdp:not(:hover) {
    transform: scale(1);
    box-shadow: 0px 2px 2px -1.5px rgba(0, 0, 0, 0.614);
    transition: transform 0.5s ease-in-out, box-shadow 0.2s ease-out;
    -webkit-transition: -webkit-transform 0.5s ease-in-out, box-shadow 0.2s ease-out;
}

.button-cdp:active,
.button-cdp:focus {
    transform: scale(0.995);
    box-shadow: 0px 2px 2px -1.5px rgba(0, 0, 0, 0.8);
    transition: transform 0.012s ease-in-out, box-shadow 0.012s ease-in;
    -webkit-transition: -webkit-transform 0.012s ease-in-out, box-shadow 0.012s ease-in;
}

.button-cdp:active::after,
.button-cdp:focus::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: brightness(95%);
    -webkit-backdrop-filter: brightness(95%);
    z-index: 3;
}

.button-cdp .button-inner {
    display: flex;
    padding: 12px 8px;
    justify-content: center;
    align-items: center;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 12px;
    border: 2px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0px 0px 1px 2px rgba(255, 255, 255, 0.10) inset;
    position: relative;
    overflow: hidden;
    background: #E4002B;
    user-select: none;
    -webkit-user-select: none;
    color: #FFF;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    letter-spacing: 0.5px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    z-index: 2;
}

.button-cdp .button-inner svg {
    height: 17px;
    width: 0;
    transition: 0.2s;
}

.button-cdp:hover .button-inner svg.arrow {
    width: 16px;
    margin-left: 4px;
}

.button-cdp .button-inner::before {
    content: "";
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    width: 15%;
    height: 100%;
    transform: skew(-30deg, 0deg);
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.03) 1%,
            rgba(255, 255, 255, 0.6) 30%,
            rgba(255, 255, 255, 0.85) 40%,
            rgba(255, 255, 255, 0.85) 60%,
            rgba(255, 255, 255, 0.85) 61%,
            rgba(255, 255, 255, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff',
            endColorstr='#00ffffff',
            GradientType=1);
    animation: button-move 3s;
    animation-iteration-count: infinite;
    animation-delay: 1.5s;
}

.button-cdp.loading {
    pointer-events: none;
    opacity: 0.75;
}

.button-cdp.loading .button-inner svg.arrow {
    display: none;
}

.button-cdp.loading .button-inner svg.spin {
    width: 16px;
    margin-left: 8px;
}

@keyframes button-move {
    0% {
        left: 0;
        opacity: 0;
    }

    5% {
        opacity: 0.0;
    }

    30% {
        opacity: 0.2;
    }

    60% {
        opacity: 0.0;
    }

    100% {
        left: 100%;
    }
}

/*Header*/

header {
    min-height: 80px;
    background: rgba(246, 246, 246, 0.504);
    border-bottom: 0.2px solid rgba(0, 0, 0, 0.05);
    align-items: center;
    -webkit-backdrop-filter: saturate(120%) blur(10px) brightness(102%);
    backdrop-filter: saturate(120%) blur(10px) brightness(102%);
    justify-content: center;
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 100;
    width: 100%;
    padding: 0 24px;
}

header .main {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1089px;
    position: relative;
}

header .logo {
    content: url("https://d34gyq4l8no8gs.cloudfront.net/arquivos/cardapio.ai/img/inicio/logo.svg");
    margin-right: 32px;
    cursor: pointer;
}

header .main>a:not(.image) {
    /* height: 44px; */
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 200%;
    color: #1D1D1F;
    margin-right: 8px;
    border-radius: 16px;
    padding: 8px 16px 8px 16px;
    border: 0.18px solid #aaaaaa00;
    text-decoration: none;
    transition: 0.25;
}

header .main a:not(.image):not(.buttons a):hover {
    color: #171717 !important;
    cursor: pointer;
    background-color: rgba(135, 135, 135, 0.1);
    -webkit-backdrop-filter: blur(6px) brightness(115%);
    backdrop-filter: blur(6px) brightness(115%);
    border: 0.18px solid #aaaaaa50;
    padding: 8px 16px 8px 16px;
    border-radius: 16px;
    transition: 0.2s;
}

header .buttons {
    position: absolute;
    right: 0;
    display: flex;
}

header .login-button {
    display: flex;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    color: #E4002B;
    cursor: pointer;
    margin-right: 24px;
}

header .button-cdp {
    width: 168px;
}

/*Menu Sections*/

.menu-sections {
    display: none;
}

/*Main Area*/

.initial-area {
    display: flex;
    justify-content: center;
    padding: 0 16px;
}

.initial-main {
    padding: 144px 0 64px 0;
    display: grid;
    justify-content: center;
    justify-items: center;
}

.initial-main .button-cdp {
    width: 400px;
}

.initial-img {
    margin-bottom: 8px;
    max-width: 1128px;
    width: 100%;
}

.initial-pill {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    /* past: 600*/
    line-height: 150%;
    text-align: center;
    color: #0962BA;
    background: #EBF5FF;
    border: 0.5px solid #0962BA;
    border-radius: 32px;
    padding: 0 12px;
    margin-bottom: 4px;
}

.initial-pill::after {
    content: "Sistema usado por mais de 3.000 lojas em todo o Brasil";
}

.initial-title {
    margin-bottom: 12px;
}

.initial-title p,
.initial-title label {
    font-family: 'Inter', sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 134%;
    letter-spacing: -1px;
    text-align: center;
    color: #393939;
}

.initial-title p:last-child {
    display: flex;
    align-items: center;
    max-width: max-content;
    margin: 0 auto;
}

.initial-title label {
    color: #E4002B;
    margin-left: 10px;
}

.initial-title span {
    background: #E4002B;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: caret infinite;
    animation-duration: 1s;
    animation-timing-function: steps(1, end);
}

@keyframes caret {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

.initial-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 133.33%;
    text-align: center;
    color: #4D4D4D;
    margin-bottom: 12px;
    max-width: 662.32px;
}

.initial-button {
    border: 1px solid #00000033;
    box-shadow: 0px 0px 2px 0px #00000033;
    border-radius: 8px;
    overflow: hidden;
    width: 278px;
}

.initial-info {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 133%;
    margin-top: 8px;
    color: #4D4D4D;
    text-align: center;
}

/*Functions Area*/

.functions-area {
    background: #F5F5F5;
    display: flex;
    justify-content: center;
    padding: 0 16px;
}

.functions-main {
    padding: 52px 0 72px 0;
    max-width: 1072px;
    width: 100%;
    position: relative;
}

.functions-title {
    font-family: 'Inter', sans-serif;
    font-size: 32px;
    font-weight: 500;
    /* past: 600*/
    line-height: 175%;
    letter-spacing: -1px;
    text-align: left;
    margin-bottom: 24px;
    text-align: center;
}

.functions-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    place-content: center;
}

.carousel-cdp-title {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    margin-bottom: 24px;
}

.carousel-cdp-title p {
    font-family: 'Inter', sans-serif;
    font-size: 32px;
    font-weight: 500;
    /* past: 600*/
    line-height: 175%;
    letter-spacing: -1px;
    text-align: left;
}

.carousel-cdp-buttons {
    position: absolute;
    right: 0;
    gap: 8px;
    user-select: none;
}

.carousel-cdp-buttons>svg {
    cursor: pointer;
}

.carousel-cdp-buttons.min svg:nth-child(1) path {
    fill: #DDDDDD;
}

.carousel-cdp-buttons.max svg:nth-child(2) path {
    fill: #DDDDDD;
}

.carousel-cdp {
    position: absolute;
    display: flex;
    left: 0;
    transform: unset;
    width: unset !important;
    max-width: none;
    height: auto;
}

.functions-main .carousel-cdp {
    gap: 32px;
}

.function-item {
    width: 248px;
}

.function-item>img {
    width: 100%;
    margin-bottom: 8px;
}

.function-item>p:nth-child(2) {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
    text-align: left;
    color: #1D1D1F;
}

.function-item>p:nth-child(3) {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    /* past: 600*/
    line-height: 130%;
    text-align: left;
    color: #676767;
}

.function-item>p:nth-child(3)>span {
    font-weight: 700;
    color: #1D1D1F;
}

/*Robot Area*/

.robot-area {
    background-color: #9fffc6;
    background-image: url('https://d34gyq4l8no8gs.cloudfront.net/arquivos/cardapio.ai/img/inicio/robot-background.png');
    background-repeat: no-repeat;
    background-position: center;
    padding: 128px 0;
    display: flex;
    justify-content: center;
    position: relative;
}

.robot-main {
    width: 1072px;
    height: 770px;
    border-radius: 40px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-items: center;
    position: relative;
}

.robot-info {
    width: 456px;
    position: absolute;
    left: 96px;
    /* top: 200px; */
    /* height: 361.78px; */
    /* Retirando parametros para centralizar bloco de texto no container */
}

.robot-info.effect {
    position: fixed;
    top: 50% !important;
    left: calc(50% - 224px);
    transform: translate(-50%, -50%);
}

.robot-info h1 {
    font-family: 'Inter', sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 128.33%;
    margin-bottom: 24px;
    color: #1D1D1F;
}

.robot-info div p {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 500;
    /* past: 600*/
    line-height: 128%;
    text-align: left;
    color: #6E6E73;
}

.robot-info div p:not(:first-child) {
    margin-top: 24px;
}

#parallaxContainer {
    width: 382px;
    height: 100%;
    top: 0;
    position: relative;
    margin: 0 56px 0 auto;
}

#parallaxContainer .layer1 {
    height: 100%;
    text-align: center;
    background-image: url("/cardapio.ai/img/inicio/robot-preview.webp");
    background-size: cover;
    padding: 40px 0;
}

/*Benefits Area*/

.benefits-area {
    background: #FAFAFA;
    padding: 112px 0;
    display: flex;
    justify-content: center;
}

.benefits-main {
    display: grid;
    justify-content: center;
    justify-items: center;
}

.benefits-title {
    font-family: 'Inter', sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 133.33%;
    letter-spacing: -1px;
    text-align: center;
    color: #1D1D1F;
    width: 780px;
}

.benefits-img {
    content: url(https://d34gyq4l8no8gs.cloudfront.net/arquivos/cardapio.ai/img/inicio/benefits-main.webp);
    margin-bottom: 48px;
    width: 1330.53px;
}

.benefits-main .benefits-grid:last-child .grid-item {
    width: 524px;
}

.benefits-main .benefits-grid:last-child .grid-item>p {
    padding: 19px 13px 34px;
}

.benefits-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 500;
    /* past: 600*/
    line-height: 128%;
    max-width: 1072px;
    color: #6E6E73;
    margin-bottom: 48px;
}

.benefits-subtitle br {
    display: none;
}

.benefits-grid {
    display: flex;
    max-width: 1072px;
    width: 100%;
    place-content: space-between;
    margin-bottom: 48px;
}

.orders-main .benefits-grid>.grid-vertical>.grid-item:nth-child(1)>p {
    padding: 24px;
}

.orders-main .benefits-grid>.grid-vertical>.grid-item:nth-child(2)>p {
    padding: 16px 36px 16px 24px;
}

.orders-main .benefits-grid>.grid-item:nth-child(2)>p {
    padding: 35px 78.8px 21px 48px;
}

.orders-main .benefits-grid>.grid-item:nth-child(2)>img {
    justify-self: end;
}

.orders-main .benefits-grid>.grid-vertical {
    width: 524px;
}

.orders-main .benefits-grid>.grid-vertical>.grid-item {
    width: 524px;
}

.orders-main .benefits-grid>.grid-item {
    width: 524px;
}

.grid-item {
    width: 516px;
    border-radius: 24px;
    box-shadow: 0px 0px 16px -8px #1D1D1F40;
    overflow: hidden;
    background: #FFFFFF;
    display: grid;
    align-content: baseline;
    justify-items: center;
}

.grid-vertical {
    place-content: space-between;
    display: grid;
    width: fit-content;
    gap: 24px;
}

.grid-vertical>.grid-item {
    width: 532px;
}

.grid-item>img {
    object-fit: cover;
}

.grid-item>p {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 500;
    /* past: 600*/
    line-height: 128%;
    text-align: left;
    color: #6E6E73;
    padding: 19px 26px 24px 16px;
}

.grid-item>div {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 8px;
    margin: -16px 0 16px;
}

.grid-item>.grid-img-1 {
    margin: -24px 0 0 !important;
}

.grid-item>.download-button {
    margin: -4px 0 16px 8px;
}

.grid-item>p>span {
    color: #1D1D1F;
    font-weight: 700;
}

.versatile-grid {
    max-width: 1072px;
    width: 100%;
    height: 184px;
    padding: 24px;
    border-radius: 24px;
    background: #1F87ED;
    box-shadow: 0px 0px 16px -8px #1D1D1F40;
    display: flex;
    align-items: center;
    margin-bottom: 48px;
}

.versatile-grid-info {
    min-width: 222px;
    max-width: 222px;
    margin-right: 16px;
}

.versatile-grid-info p:nth-child(1) {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 500;
    /* past: 600*/
    line-height: 133.33%;
    letter-spacing: -1px;
    color: #FFFFFF;
    margin-bottom: 8px;
}

.versatile-grid-info p:nth-child(2) {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    /* past: 600*/
    line-height: 128%;
    color: #FFFFFF;
}

.versatile-grid-items {
    display: flex;
    align-items: center;
    place-content: space-between;
    width: 100%;
}

.versatile-grid-items>a {
    width: 121px;
    height: 135.05px;
    padding: 12px;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 15px 0px #00000008;
    text-align: center;
    position: relative;
}

.versatile-grid-items>a p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    /* past: 600*/
    line-height: 143%;
    color: #1D1D1F;
    margin-top: 16px;
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translate(-50%, 0%);
    white-space: nowrap;
}

.versatile-grid-items>a button {
    border: none;
    background: none;
    padding: 0;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 133.33%;
    text-align: center;
    color: #E4002B;
    cursor: pointer;
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translate(-50%, 0%);
    white-space: nowrap;
}

.migration-area {
    max-width: 1072px;
    width: 100%;
    height: 184px;
    padding: 40px 32px;
    border-radius: 24px;
    position: relative;
    background: #FFF0F3;
    margin-bottom: 48px;
    box-shadow: 0px 0px 16px -8px #1D1D1F40;
}

.migration-area>img {
    position: absolute;
    right: 0;
    top: 0;
}

.migration-area-info p {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 500;
    /* past: 600*/
    line-height: 133.33%;
    letter-spacing: -1px;
    margin-bottom: 32px;
    color: #E4002B;
}

.migration-area-info .button-cdp {
    width: 225px;
}

/*Plans Area*/

.plans-area {
    display: flex;
    justify-content: center;
    padding: 96px 0;
}

.plans-main {
    display: grid;
    justify-items: center;
}

.plans-main .carousel-cdp-title {
    display: none;
}

.plans-list-area {
    margin-bottom: 48px;
}

.plans-list-area .carousel-cdp {
    position: unset;
    gap: 24px;
}

.plans-title {
    width: 783px;
    font-family: 'Inter', sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 133.33%;
    letter-spacing: -1px;
    text-align: center;
    color: #1D1D1F;
    margin-bottom: 8px;
}

.plans-carousel-buttons {
    position: absolute;
    right: 0;
    gap: 8px;
    user-select: none;
}

.plans-carousel-buttons>svg {
    cursor: pointer;
}

.plans-carousel-buttons.min svg:nth-child(1) path {
    fill: #DDDDDD;
}

.plans-carousel-buttons.max svg:nth-child(2) path {
    fill: #DDDDDD;
}

.plans-subtitle {
    width: 783px;
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 500;
    /* past: 600*/
    line-height: 128%;
    text-align: center;
    color: #6E6E73;
    margin-bottom: 48px;
}

.plan-item {
    width: 312px;
    padding: 24px 24px 36px 24px;
    border-radius: 24px;
    border: 1px solid #DDDDDD;
    transition: transform 0.2s ease-in-out, box-shadow 0.1s ease-in;
    -webkit-transition: -webkit-transform 0.2s ease-in-out, box-shadow 0.1s ease-in;
}

.plan-item:hover {
    box-shadow: 0px 4px 18px -4px rgba(0, 0, 0, 0.1);
    transform: scale(1.003);
}

.plan-item>h3 {
    font-family: 'Inter', sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 137.5%;
    letter-spacing: -0.01em;
    color: #1D1D1F;
    margin-bottom: 4px;
}

.plan-item>p {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    color: #1D1D1F;
    margin-bottom: 16px;
}

.plan-price {
    font-family: 'Inter', sans-serif;
    font-size: 40px;
    font-weight: 500;
    line-height: 40px;
    color: #1D1D1F;
    display: flex;
    gap: 2px;
    letter-spacing: -2%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 16px;


}

.plan-price div {
    font-size: 18px;
    letter-spacing: -1px;
    line-height: 20px;

}

.plan-price p {
    font-size: 12px;
    line-height: 130%;
    margin-right: 4px;
}

.plan-free {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 500;
    /* past: 600*/
    line-height: 160%;
    text-align: left;
    color: #25A65B;
    background: #E1F5E9;
    border-radius: 8px;
    height: 40px;
    width: 104px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plan-benefits p {
    display: flex;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 114.29%;
    color: #1D1D1F;
}

.plan-benefits p.disabled {
    color: #B00020;
    text-decoration: line-through;
}

.plan-benefits p:not(:last-child) {
    margin-bottom: 8px;
}

.plan-benefits p svg {
    margin-right: 4px;
}

.plans-info {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    text-align: center;
    color: #4D4D4D;
    margin-top: 16px;
}

.plans-main .button-cdp {
    width: 648px;
}

/*Orders Area*/

.orders-area {
    padding: 80px 0 48px;
    display: flex;
    justify-content: center;
    background: #F5F5F7;
}

.orders-main {
    max-width: 1072px;
    width: 100%;
    display: grid;
    justify-content: center;
    justify-items: center;
}

.orders-title {
    font-family: 'Inter', sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 133.33%;
    letter-spacing: -1px;
    text-align: center;
    color: #1D1D1F;
}

.orders-img {
    margin-bottom: 48px;
}

.orders-subtitle {
    width: 1072px;
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 500;
    /* past: 600*/
    line-height: 128%;
    text-align: center;
    color: #6E6E73;
    margin-bottom: 48px;
}

/*Billing Area*/

.billing-area {
    padding: 16px 0 0;
    display: flex;
    justify-content: center;
    background: #F5F5F7;
}

.billing-main {
    max-width: 1072px;
    width: 100%;
    display: grid;
    justify-content: center;
    justify-items: center;
}

.billing-title {
    width: 100%;
    margin-bottom: 40px;
}

.billing-title p:nth-child(1) {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 500;
    /* past: 600*/
    line-height: 120%;
    letter-spacing: -1px;
    color: #1D1D1F;
}

.billing-title p:nth-child(2) {
    font-family: 'Inter', sans-serif;
    font-size: 32px;
    font-weight: 500;
    /* past: 600*/
    line-height: 175%;
    letter-spacing: -1px;
    text-align: left;
    color: #1D1D1F;
}

.billing-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 500;
    /* past: 600*/
    line-height: 128%;
    text-align: left;
    color: #6E6E73;
    margin-top: 40px;
}

/*Register Area*/

.register-area {
    padding: 48px 0 80px;
    display: flex;
    justify-content: center;
    background: #F5F5F7;
}

.register-main {
    max-width: 1072px;
    width: 100%;
    display: grid;
    justify-items: center;
}

.register-info {
    max-width: 1072px;
    width: 100%;
    height: 364px;
    border-radius: 24px;
    background: url('https://d34gyq4l8no8gs.cloudfront.net/arquivos/cardapio.ai/img/inicio/register-info.png');
    background-size: cover;
    position: relative;
    overflow: hidden;
    padding: 40px 40px;
    margin-bottom: 48px;
}

.register-info>div>div {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}

.register-info>div>div>p:nth-child(1) {
    font-family: 'Inter', sans-serif;
    font-size: 72px;
    font-weight: 500;
    /* past: 600*/
    line-height: 130%;
    letter-spacing: -1px;
    color: #FFFFFF;
    margin-right: 14px;
}

.register-info>div>div>p:nth-child(2) {
    max-width: 170px;
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 500;
    /* past: 600*/
    line-height: 110%;
    text-align: left;
    color: #FFFFFF;
}

.register-info>img {
    position: absolute;
    right: 0;
    bottom: 0;
}

.register-form {
    display: flex;
    width: 100%;
    padding: 24px 0 24px 48px;
    align-items: center;
    border-radius: 24px;
    background: #FCFCFC;
    place-content: space-between;
}

.register-form-info {
    width: 432px;
}

.register-form-info h1 {
    font-family: 'Inter', sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 133.33%;
    letter-spacing: -1px;
    color: #1B1B1F;
    margin-bottom: 8px;
}

.register-form-info p {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 500;
    /* past: 600*/
    line-height: 120%;
    color: #6E6E73;
}

.register-form-fields {
    padding: 32px;
    width: 552px;
}

.register-form-pill {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    color: #0962BA;
    padding: 4px 11.5px;
    background: #EBF5FF;
    border-radius: 24px;
    margin-bottom: 40px;
    text-align: center;
}

.register-form-title {
    color: #4D4D4D;
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 160%;
    margin-bottom: 16px;
}

.register-form-alert-error {
    align-items: center;
    padding: 16px;
    position: relative;
    width: 100%;
    height: 56px;
    background: #FFF0F2;
    border: 2px solid #B00020;
    box-sizing: border-box;
    border-radius: 8px;
    display: none;
    margin: 8px 0 32px 0;
}

.register-form-alert-error svg {
    margin-right: 12px;
}

.register-form-alert-error p {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    color: #4D4D4D;
    margin-bottom: 0;
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.register-form-alert-error p form {
    position: absolute;
    right: 0;
}

.register-form-alert-error p button {
    color: #0d6efd !important;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    cursor: pointer;
    border: none;
    background: none;
    border-radius: 4px;
}

.register-form-alert-error p button::after {
    content: "Redefinir a senha";
}

.one-field {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    margin-bottom: 32px;
    position: relative;
}

.register-form-title-form {
    color: #4D4D4D;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    margin-bottom: 4px;
}

.register-form-form-input {
    height: 32px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid #DDD;
    background: #FCFCFC;
    width: inherit;
    color: #4D4D4D;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}

.register-form-form-input:focus {
    outline: none;
    border: 1px solid #4D4D4D;
}

.form-error {
    position: absolute;
    top: 64px;
    display: flex;
    align-items: center;
}

.form-error span {
    min-width: 120px;
    height: 16px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 133.33%;
    color: #B00020;
}

.two-fields {
    display: flex;
    align-self: stretch;
    margin-bottom: 40px;
    position: relative;
}

.two-fields div {
    width: 100%;
}

.two-fields div:nth-child(1) {
    margin-right: 24px;
}

.type-area-title {
    align-self: stretch;
    color: #4D4D4D;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    margin-bottom: 4px;
}

.type-area-title.segment.alerted {
    color: #B00020;
}

.two-fields .type-group {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    background: #FFF0F3;
    border-radius: 8px;
    margin-top: 4px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    color: #E4002B;
    width: 100%;
    transition: 0.2s;
    text-align: left;
    padding: 1px 7px 0 7px;
}

.password-field {
    position: relative;
    width: 256px;
}

.password-field svg {
    position: absolute;
    right: 8px;
    top: 36px;
    cursor: pointer;
}

.password-field svg.opened path {
    d: path('M10.5 8C10.5 8.66304 10.2366 9.29893 9.76777 9.76777C9.29893 10.2366 8.66304 10.5 8 10.5C7.33696 10.5 6.70107 10.2366 6.23223 9.76777C5.76339 9.29893 5.5 8.66304 5.5 8C5.5 7.33696 5.76339 6.70107 6.23223 6.23223C6.70107 5.76339 7.33696 5.5 8 5.5C8.66304 5.5 9.29893 5.76339 9.76777 6.23223C10.2366 6.70107 10.5 7.33696 10.5 8Z M0 8C0 8 3 2.5 8 2.5C13 2.5 16 8 16 8C16 8 13 13.5 8 13.5C3 13.5 0 8 0 8ZM8 11.5C8.92826 11.5 9.8185 11.1313 10.4749 10.4749C11.1313 9.8185 11.5 8.92826 11.5 8C11.5 7.07174 11.1313 6.1815 10.4749 5.52513C9.8185 4.86875 8.92826 4.5 8 4.5C7.07174 4.5 6.1815 4.86875 5.52513 5.52513C4.86875 6.1815 4.5 7.07174 4.5 8C4.5 8.92826 4.86875 9.8185 5.52513 10.4749C6.1815 11.1313 7.07174 11.5 8 11.5Z');
}

.register-form-title-extra {
    color: #4D4D4D;
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 160%;
    margin-bottom: 16px;
}

.register-form-subtitle-form {
    align-self: stretch;
    color: #999;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 133.33%;
    margin-top: 4px;
}

.error~.register-form-subtitle-form {
    color: #B00020;
}

.register-form-button-area {
    display: flex;
    align-items: center;
    place-content: space-between;
}

.register-form-button-area .button-cdp {
    width: 294px;
}

.register-form-footer-info {
    width: 170px;
    color: #4D4D4D;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 133.33%;
}

.register-form-footer-info a {
    text-decoration: underline !important;
    color: #4D4D4D;
}

.register-form-footer-info-mobile {
    display: none;
    color: #4D4D4D;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 133.33%;
}

.form-button {
    display: flex;
    height: 40px;
    flex: 1 0 0;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.20);
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.20);
    background: #E4002B;
    color: #FFF;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    justify-content: center;
    align-items: center;
}

/*Customers Area*/

.customers-area {
    padding: 72px 0 41px;
    display: flex;
    justify-content: center;
    background: #F9F9F9;
}

.customers-main {
    max-width: 1072px;
    width: 100%;
    position: relative;
}

.customers-title {
    text-align: center;
    margin-bottom: 24px;
    white-space: nowrap;
}

.customers-title p:nth-child(1) {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 500;
    /* past: 600*/
    line-height: 120%;
    letter-spacing: -1px;
    color: #1D1D1F;
}

.customers-title p:nth-child(2) {
    font-family: 'Inter', sans-serif;
    font-size: 32px;
    font-weight: 500;
    /* past: 600*/
    line-height: 110%;
    letter-spacing: -1px;
    color: #1D1D1F;
}

.customers-carousel {
    overflow: hidden;
    position: relative;
    z-index: 1;
    height: 300px;
}

.customers-carousel * {
    box-sizing: border-box;
}

.customers-itens {
    counter-reset: count;
    display: flex;
    position: absolute;
    z-index: 1;
    height: 100%;
    top: 40px;
    left: 0;
    width: 100%;
    cursor: pointer;
}

.customers-item {
    counter-increment: count;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 312px;
    margin-right: 32px;
    height: 224px;
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: 0px 8px 12px -4px #0000001A;
}

.customers-item img {
    user-select: none;
    pointer-events: none;
}

.customers-item>img {
    width: 100%;
    height: 88px;
    object-fit: cover;
}

.customers-item-body {
    display: flex;
    padding: 16px 16px 24px;
}

.customers-item-body>img {
    width: 96px;
    height: 96px;
    border: 0.5px solid #DDDDDD;
    border-radius: 112px;
    object-fit: cover;
    margin-right: 12px;
}

.customers-item-body>div>p {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 160%;
    color: #4D4D4D;
    margin-bottom: 0;
    width: 184px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customers-item-body>div>div {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.customers-item-body>div>div svg {
    margin-top: -3px;
}

.customers-item-body>div>div p {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 166.67%;
    /* letter-spacing: 0.4px; */
    color: #4D4D4D;
    margin-bottom: 0;
    margin-left: 4px;
}

.customers-item-body>div>a>button {
    width: 176px;
    height: 40px;
    background: rgba(233, 77, 0, 0.15);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 133.33%;
    color: #E94D00;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.15s;
}

.customers-item-body>div>a>button svg:nth-child(1) {
    margin-bottom: 2px;
    margin-right: 4px;
}

.customers-item-body>div>a>button svg:nth-child(2) {
    margin-left: 4px;
    opacity: 0;
    transition: 0.2s;
}

.customers-item:hover {
    box-shadow: 0px 16px 20px -4px rgba(0, 0, 0, 0.3);
    margin-top: -2px;
}

.customers-item:hover .customers-item-body>div>a>button svg:nth-child(2) {
    opacity: 1;
}

/*How Area*/

.how-area {
    padding: 0 0 196px;
    display: flex;
    justify-content: center;
    background: #F9F9F9;
}

.how-main {
    max-width: 1072px;
    width: 100%;
    display: grid;
    justify-content: center;
    justify-items: center;
}

.how-increase {
    max-width: 1072px;
    width: 100%;
    height: 364px;
    border-radius: 24px;
    background: url('https://d34gyq4l8no8gs.cloudfront.net/arquivos/cardapio.ai/img/inicio/how-increase.png');
    position: relative;
    overflow: hidden;
    padding: 40px;
    display: flex;
    margin-bottom: 64px;
}

.how-increase>a {
    min-width: 248px;
    position: absolute;
    left: 40px;
    bottom: 44.5px;
    z-index: 1;
}

.how-increase-info {
    width: 375px;
    z-index: 1;
    position: relative;
}

.how-increase-info p:nth-child(1) {
    font-family: 'Inter', sans-serif;
    font-size: 40px;
    font-weight: 500;
    line-height: 130%;
    color: #FFFFFF;
    margin-bottom: 8px;
}

.how-increase-info p:nth-child(2) {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    color: #FFFFFF;
}

.how-increase {
    place-content: space-between;
}

.how-increase img:nth-child(4) {
    position: absolute;
    left: 0;
    top: 0;
}

.how-increase img:last-child {
    position: absolute;
    right: 0;
    bottom: 0;
}

.how-increase-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    position: relative;
    z-index: 1;
    width: 588px;
}

.how-increase-grid>div {
    width: 288px;
    padding: 12px;
    border-radius: 16px;
    border: 0.5px solid #DDDDDD;
    background: #FCFCFC;
}

.how-increase-grid>div p:nth-child(1) {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 200%;
    color: #363636;
    margin-bottom: 8px;
}

.how-increase-grid>div p:nth-child(2) {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    color: #363636;
}

.how-use {
    max-width: 1072px;
    width: 100%;
    height: 344px;
    padding: 24px;
    border-radius: 24px;
    border: 0.5px solid #DDDDDD;
    background: #FCFCFC;
}

.how-use-title {
    font-family: 'Inter', sans-serif;
    font-size: 32px;
    font-weight: 500;
    /* past: 600*/
    line-height: 175%;
    letter-spacing: -0.01em;
    margin-bottom: 32px;
    text-align: center;
}

.how-use-grid {
    display: flex;
    align-items: center;
    gap: 16px;
}

.how-use-grid>div {
    height: 208px;
    padding: 16px;
    border-radius: 16px;
    border: 0.5px solid #EBF5FF;
    background: #F5F5F7;
}

.how-use-grid>div p:nth-child(2) {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 160%;
    color: #1D1D1F;
    margin: 8px 0;
}

.how-use-grid>div p:nth-child(3) {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    color: #1D1D1F;
}

.faq {
    width: 100%;
    padding: 48px;
    border-radius: 24px;
    background: #F5F5F7;
    margin: 64px 0;
}

.faq-title {
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 131.25%;
    text-align: center;
    color: #1D1D1F;
    margin-bottom: 32px;
}

.faq-item {
    width: 100%;
    border-bottom: 1px solid #DDDDDD;
}

.faq-item-title {
    min-width: 100%;
    min-height: 56px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.faq-item-title p {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    /* past: 600*/
    line-height: 128%;
    text-align: left;
    color: #1D1D1F;
    width: 100%;
    padding: 16px 0;
}

.faq-item-title svg {
    min-width: 24px;
    margin-left: 16px;
    transition: 0.2s;
}

.faq-item-content {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    /* past: 600*/
    line-height: 150%;
    font-weight: 400;
    text-align: left;
    color: #1D1D1F;
    width: 100%;
    height: 0;
    overflow: hidden;
    transition: 0.2s;
}

.faq-item.open .faq-item-title svg {
    transform: rotate(-180deg);
}

.faq-item.open .faq-item-content {
    height: auto;
    padding: 4px 0 16px;
}

.faq-button {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    /* past: 600*/
    text-align: left;
    color: #0962BA;
    border: none;
    padding: 0;
    background: none;
    width: 100%;
    border-bottom: 1px solid #DDDDDD;
    padding: 16px 0;
}

.how-video {
    width: 100%;
    padding-bottom: 56px;
}

.how-video-title {
    font-family: 'Inter', sans-serif;
    font-size: 32px;
    font-weight: 500;
    /* past: 600*/
    line-height: 175%;
    letter-spacing: -1px;
    color: #1D1D1F;
    margin-bottom: 24px;
    text-align: center;
}

.how-video-youtube {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin-bottom: 24px;
}

.how-video-youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
}

/*Footer*/

footer {
    background: #1D1D1F;
    padding: 104px 0;
    display: flex;
    justify-content: center;
}

.footer-content {
    width: 1096px;
    height: 424px;
    position: relative;
    display: flex;
    align-items: center;
}

.footer-info {
    width: 429px;
    position: absolute;
    bottom: 0;
}

.footer-info img {
    content: url('https://d34gyq4l8no8gs.cloudfront.net/arquivos/cardapio.ai/img/inicio/logo_white.svg');
    margin-bottom: 16px;
}

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

.footer-info p,
.footer-info>div:last-child a {
    margin-top: 16px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    text-align: left;
    color: #FFFFFF;
}

.footer-info>div:last-child a {
    cursor: pointer;
}

.footer-info>div:last-child a:hover {
    color: #FFFFFF;
}

.footer-info>div:last-child {
    display: grid;
}

.footer-rigth-contact {
    width: 352px;
    background: #FCFCFC;
    border-radius: 16px;
    padding: 24px;
    position: absolute;
    right: 0;
    bottom: 0;
}

.footer-rigth-contact-title {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 130%;
    letter-spacing: -0.01em;
    color: #4D4D4D;
    margin-bottom: 8px;
}

.footer-rigth-contact-subtitle {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #4D4D4D;
    margin-bottom: 32px;
}

.footer-rigth-contact-form p {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    color: #4D4D4D;
    margin-bottom: 4px;
}

.footer-rigth-contact-form {
    margin-bottom: 16px;
}

.footer-rigth-contact-form input[type="text"] {
    background: #FCFCFC;
    border: 1px solid #DDDDDD;
    border-radius: 8px;
    width: 100%;
    padding: 8px;
    height: 32px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    color: #4D4D4D;
}

.footer-rigth-contact-button {
    width: 100%;
    height: 40px;
    background: #E4002B;
    border-radius: 8px;
    border: none;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    color: #FCFCFC;
    cursor: pointer;
}

.footer-rigth-contact-button[disabled] {
    background: #BFBFBF;
}

.footer-rigth-contact-button::after {
    content: "Solicitar contato";
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    color: #FCFCFC;
}

.footer-rigth-contact-button.success {
    background: #35a800;
}

.footer-rigth-contact-button.success::after {
    content: "Solicitação enviada!";
}

.footer-rigth-contact-button:not([disabled]):hover {
    box-shadow: 0px 0px 2px 5px #E4002B50;
    transition: 0.2s;
}

/*Whatsapp Button*/

.whatsapp-button {
    position: fixed;
    width: 48px;
    height: 48px;
    right: 32px;
    bottom: 32px;
    background: #25D366;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.075);
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: 0.5s;
}

.whatsapp-button:hover {
    transform: scale(102%);
    box-shadow: 0px 4px 10px -4px rgba(0, 0, 0, 0.5);
    filter: brightness(105%);
    transition: transform 0.5s ease-in-out, box-shadow 0.2s ease-in;
    -webkit-transition: -webkit-transform 0.5s ease-in-out, box-shadow 0.2s ease-in;
    /* transform: scale(1.005); */
}

.menu-floating {
    display: none;
}

.menu-floating-close {
    display: none;
}

.modal-open {
    overflow: hidden !important;
}

@media screen and (max-height: 1000px) {
    .initial-main {
        padding: 98px 0 48px 0;
    }
}

@media screen and (max-width: 1020px) {
    header .main>a:not(.image) {
        margin-right: 0;
    }
}

@media screen and (max-width: 960px) {
    header .logo {
        margin-right: 0;
    }
}

@media screen and (max-width: 850px) {
    header {
        padding: 0 16px;
    }

    header .logo {
        content: url("https://d34gyq4l8no8gs.cloudfront.net/arquivos/cardapio.ai/img/inicio/logo-min.svg");
    }

    header .main>a:not(.image),
    header .login-button {
        display: none;
    }

    .menu-sections::-webkit-scrollbar {
        width: 0;
    }

    .menu-sections.opened {
        display: block;
    }

    .menu-sections.opened~header .logo {
        content: url("https://d34gyq4l8no8gs.cloudfront.net/arquivos/cardapio.ai/img/inicio/logo-min.svg")
    }

    .menu-sections.opened~div,
    .menu-sections.opened~footer {
        display: none;
    }

    .menu-sections-list {
        width: 100%;
        margin: 0 auto;
        margin-bottom: 40px;
    }

    .menu-sections-list a p {
        display: flex;
        align-items: center;
        justify-content: left;
        height: 56px;
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        color: #E4002B;
        width: 100%;
        border-bottom: 0.5px solid #DDDDDD;
    }

    .menu-sections-title {
        font-family: 'Inter', sans-serif;
        font-size: 20px;
        font-weight: 600;
        line-height: 32px;
        text-align: left;
        color: #1D1D1F;
    }

    .menu-sections-button {
        display: flex;
        align-items: center;
        justify-content: left;
        height: 56px;
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        color: #1D1D1F;
        width: 100%;
        background: none;
        border: none;
        border-bottom: 0.5px solid #DDDDDD;
        padding: 0;
        place-content: space-between;
        width: 100%;
    }

    .menu-sections [href="formulario-cadastro"] .button-cdp {
        margin: 16px 0 8px;
    }

    .menu-sections-subtitle {
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 500;
        line-height: 16px;
        text-align: center;
        color: #1D1D1F;
    }

    .menu-sections-info {
        width: 466px;
        font-family: 'Inter', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 150%;
        color: #4D4D4D;
        text-align: center;
        margin: 0 auto;
    }

    .menu-sections-info {
        font-size: 12px;
        width: 344px;
    }

    .menu-sections {
        background: #FCFCFC;
        width: 100%;
        top: 72px;
        left: 0;
        position: fixed;
        overflow-y: scroll;
        overflow-x: hidden;
        padding: 48px 0;
        z-index: 1000;
        height: calc(100% - 72px);
        padding: 16px 40px 40px;
        border-top: 0.5px solid #DDDDDD;
    }

    .initial-main {
        padding: 117.69px 0 47.86px 0;
    }

    .initial-main .button-cdp {
        width: 278px;
    }

    .initial-img {
        margin-bottom: 24px;
    }

    .initial-pill {
        padding: 4px 12px;
        font-size: 12px;
        font-weight: 500;
        line-height: 133%;
    }

    .initial-pill::after {
        content: "Sistema usado por +3.000 lojas em todo o Brasil";
    }

    .initial-title {
        width: 296px;
        margin-bottom: 16px;
    }

    .initial-title p,
    .initial-title label {
        font-size: 32px;
        line-height: 110%;
    }

    .initial-subtitle {
        width: 286.78px;
        font-size: 16px;
        line-height: 130%;
        margin-bottom: 16px;
    }

    .initial-info {
        width: 194.45px;
    }

    .functions-main {
        padding: 32px 0;
    }

    .functions-title {
        width: 100%;
        font-size: 20px;
        line-height: 175%;
    }

    .functions-grid {
        gap: 32px;
    }

    .function-item {
        width: 100%;
        max-width: 352px;
    }

    .carousel-cdp-title p {
        font-size: 20px;
        line-height: 175%;
    }

    .robot-area {
        padding: 24px 0;
    }

    .robot-main {
        border-radius: 16px;
        display: grid;
        width: unset;
        padding: 32px 24px;
        place-content: baseline;
        height: unset;
    }

    .robot-area>div[data-scrollmagic-pin-spacer] {
        padding: 0 !important;
        min-height: 1648px;
    }

    .robot-info {
        position: unset;
        width: 315px;
        height: fit-content;
    }

    .robot-info h1 {
        font-size: 28px;
        line-height: 110%;

    }

    .robot-info div p {
        font-size: 16px;
        line-height: 130%;
    }

    #parallaxContainer {
        margin: unset;
        width: 300px;
        height: 1194px;
        margin-top: 8px;
    }

    #parallaxContainer .layer1 {
        background-image: url("/cardapio.ai/img/inicio/robot-preview.webp");
        background-size: contain;
        background-repeat: no-repeat;
    }

    .benefits-area {
        padding: 40px 16px;
    }

    .benefits-title {
        width: 298.33px;
        font-size: 28px;
        line-height: 110%;
        margin-bottom: 24px;
    }

    .benefits-img {
        content: url(https://d34gyq4l8no8gs.cloudfront.net/arquivos/cardapio.ai/img/inicio/benefits-main-min.webp);
        width: 366.27px;
        object-fit: cover;
    }

    .benefits-subtitle {
        width: 336px;
        margin-bottom: 40px;
    }

    .benefits-subtitle br {
        display: block;
    }

    .benefits-grid {
        display: grid;
        width: 368px;
        gap: 26px;
        margin-bottom: 0;
    }

    .grid-item {
        width: 368px !important;
    }

    .grid-item>img {
        object-fit: cover;
        width: 100%;
    }

    .grid-item>p {
        padding: 16px;
        font-size: 16px;
    }

    .orders-main .benefits-grid>.grid-vertical>.grid-item:nth-child(1)>p {
        padding: 20px;
    }

    .orders-main .benefits-grid>.grid-item:nth-child(2)>p {
        padding: 20px;
    }

    .orders-main .benefits-grid>.grid-vertical>.grid-item:nth-child(2)>p {
        padding: 16px;
    }

    .orders-main .benefits-grid>.grid-item:nth-child(2)>img {
        margin-right: -28px;
        width: 370px;
    }

    .grid-item>.download-button {
        margin: -4px 0 24px;
    }

    .grid-item>div {
        margin-bottom: 16px;
    }

    .grid-item>.grid-img-1 {
        margin-bottom: 16px !important;
    }

    .versatile-grid {
        height: unset;
        display: grid;
        width: 368px;
        margin: 40px 0;
    }

    .versatile-grid-items {
        flex-wrap: wrap;
        margin-top: 16px;
        gap: 12px;
    }

    .versatile-grid-info {
        margin-right: 0;
    }

    .versatile-grid-info p:nth-child(2) {
        font-size: 16px;
        line-height: 130%;
    }

    .versatile-grid-items>a {
        width: calc(50% - 6px);
        height: 135.05px;
    }

    .migration-area {
        width: 368px;
        height: 273.09px;
        position: relative;
        padding: 24px 46.5px;
        margin-top: 40px;
    }

    .migration-area-info {
        width: 100%;
        height: 100%;
        text-align: center;
        position: relative;
        display: grid;
        justify-items: center;
        z-index: 1;
    }

    .migration-area-info .button-cdp {
        position: absolute;
        bottom: 0;
    }

    .migration-area>img {
        content: url(https://d34gyq4l8no8gs.cloudfront.net/arquivos/cardapio.ai/img/inicio/migration-area-min.png);
        position: absolute;
        top: 0;
        left: 0;
    }

    .plans-area {
        padding: 32px;
    }

    .plans-main .carousel-cdp-title {
        display: flex;
        width: 336px;
    }

    .plans-main {
        width: 100%;
        justify-content: center;
    }

    .plans-list-area {
        width: 336px;
        height: 768px;
        /* altura nao funciona em localhost */
        min-height: 656px !important;
        position: relative;
        margin-bottom: 24px;
    }

    .plans-list-area .carousel-cdp {
        position: absolute;
    }

    .plans-title {
        width: 298.33px;
        font-size: 28px;
        line-height: 110%;
        margin-bottom: 16px;
    }

    .plans-subtitle {
        width: 336px;
        font-size: 16px;
        line-height: 130%;
        margin-bottom: 24px;
    }

    .plan-item {
        min-width: 280px;
    }

    .plan-item>h3 {
        font-weight: 500;
        /* past: 600*/
        line-height: 140%;
    }

    .plan-item>p {
        font-size: 16px;
        font-weight: 500;
        line-height: 120%;
        min-height: 24px;
    }

    .plans-main .button-cdp {
        width: 336px;
    }

    .orders-title {
        width: 336px;
        font-size: 28px;
        line-height: 110%;
        margin-bottom: 24px;
    }

    .orders-area {
        padding: 40px 0;
    }

    .orders-img {
        width: 368px;
        margin-bottom: 24px;
    }

    .orders-subtitle {
        width: 336px;
        font-size: 16px;
        line-height: 130%;
        text-align: left;
        margin-bottom: 18px;
    }

    .billing-title {
        width: 368px;
        margin: 0 auto 12px auto;
    }

    .billing-main>img {
        width: 349.8px;
    }

    .billing-subtitle {
        width: 368px;
        font-size: 16px;
        line-height: 128%;
        margin-top: 12px;
    }

    .register-area {
        padding: 24px 0 18px;
    }

    .register-main {
        justify-content: center;
    }

    .register-info {
        width: 368px;
        height: 124.96px;
        padding: 16px 16px;
        margin-bottom: 42px;
        border-radius: 16px;
    }

    .register-info>div {
        position: relative;
        z-index: 1;
    }

    .register-info>div>div>p:nth-child(1) {
        font-size: 24px;
        line-height: 129.63%;
        margin-right: 4px;
    }

    .register-info>div>div>p:nth-child(2) {
        font-size: 14px;
        line-height: 110.00%;
    }

    .register-info>img {
        width: 146px;
    }

    .register-form-info h1 {
        font-size: 32px;
        font-weight: 500;
        /* past: 600*/
        line-height: 175%;
        margin-bottom: 0;
    }

    .register-form-info p {
        font-size: 16px;
        font-weight: 500;
        /* past: 600*/
        line-height: 128%;
        color: #1D1D1F;
    }

    .two-fields {
        display: block;
        margin-bottom: 24px;
    }

    .one-field:not(:last-child),
    .two-fields>div:not(:last-child) {
        margin-bottom: 24px;
    }

    .register-form-pill {
        display: none;
    }

    .register-form {
        display: grid;
        justify-items: center;
        padding: 48px 32px;
    }

    .register-form-info {
        width: 336px;
    }

    .register-form-fields {
        padding: 0;
        width: 336px;
        margin-top: 24px;
    }

    .register-form-footer-info {
        display: none;
    }

    .register-form .button-cdp {
        width: 100%;
    }

    .dropdown-cdp-content {
        width: 100%;
    }

    .customers-area {
        padding: 42px 0 83px;
    }

    .customers-title {
        width: 366px;
        white-space: wrap;
        margin: 0 auto;
    }

    .how-increase {
        width: 368px;
        height: unset;
        background-color: #1F87ED;
        display: grid;
        place-content: unset;
        padding: 24px 16px;
        margin-bottom: 18px;
    }

    .how-increase-info {
        width: 336px;
    }

    .how-increase-grid {
        display: grid;
        gap: 12px;
        margin-top: 24px;
        width: unset;
    }

    .how-increase-grid>div {
        width: 100%;
    }

    .how-use {
        width: 368px;
        height: unset;
    }

    .how-use-grid {
        display: grid;
    }

    .how-use-title {
        font-size: 32px;
        line-height: 125%;
        margin-bottom: 16px;
    }

    .how-increase {
        background-image: unset;
    }

    .how-increase img:nth-child(4) {
        position: absolute;
        left: 0px;
        top: -92px;
        transform: rotate(90deg);
    }

    .how-increase img:last-child {
        bottom: -158px;
        left: 16px;
    }

    .how-increase-info p:nth-child(1) {
        width: 336px;
        font-size: 32px;
        line-height: 125%;
    }

    .how-increase>a {
        width: 100%;
        position: unset;
        left: unset;
        bottom: unset;
        margin-top: 12px;
    }

    .faq {
        padding: 24px;
        margin: 32px 0;
    }

    .how-video {
        width: 336px;
        padding-bottom: 0;
    }

    .how-area {
        padding: 0 0 80px;
    }

    .how-video-youtube iframe {
        border-radius: 12px;
    }

    footer {
        padding: 72px 0;
    }

    .footer-content {
        width: unset;
        height: unset;
        display: grid;
    }

    .footer-rigth-contact {
        position: unset;
        order: 1;
        margin: 0 auto;
    }

    .footer-info {
        width: 100%;
        padding: 0 16px;
        position: unset;
        order: 2;
        margin-top: 40px;
        text-align: center;
    }

    .footer-social {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .footer-info p,
    .footer-info a {
        text-align: center;
    }

    .whatsapp-button {
        right: 16px;
        bottom: 16px;
    }

    .price-box {
        display: flex !important;
        width: 94px !important;
        height: auto !important;
        min-height: 40px !important;
        padding: 5px 8px 3px 8px !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 2px !important;
        border-radius: 8px !important;
        background: #EBF5FF !important;
        overflow: hidden !important;
        letter-spacing: -0.56px !important;
        margin-left: 2px !important;
    }

    .small-text {
        font-family: 'Inter', sans-serif !important;
        font-size: 10px !important;
        font-weight: 500 !important;
        color: #0052cc !important;
        position: relative;
        left: 0px !important;
    }

    .big-text {
        font-family: 'Inter', sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #0052cc !important;
    }

    .menu-floating {
        display: flex;
        height: 0;
        overflow: hidden;
        align-items: center;
        width: 100%;
        transition: 0.2s;
    }

    .menu-floating-close {
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        text-align: left;
        color: #E4002B;
        padding: 8px 0 8px 16px;
        cursor: pointer;
    }

    .menu-sections.opened~header.menu .menu-floating-close {
        display: block;
    }

    .menu-sections.opened~header.menu [href="formulario-cadastro"] {
        display: none;
    }

    header.menu {
        padding-top: 12px;
    }

    header.menu .menu-floating {
        margin-top: 11px;
        height: 32px;
    }

    .menu-floating a,
    .menu-floating button {
        width: 100%;
        height: 32px;
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
        text-align: center;
        color: #E4002B;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: none;
    }

    .menu-sections.opened~header {
        background: #FCFCFC;
        border-bottom: unset;
        -webkit-backdrop-filter: unset;
        backdrop-filter: unset;
    }
}

@media screen and (max-width: 340px) { 
    .initial-pill {
        padding: 4px 6px;
        font-size: 12px;
        font-weight: 500;
        line-height: 133%;
    }
}