html {
    scroll-behavior: smooth;
    }/* RESET CSS */:root
    {
        --color-white: #fff;
        --color-blue-dark: #00263c;
        --color-red: #be1e2d;
        --color-bg: #c4c4c4;
    }
    * {
        padding: 0;
        margin: 0;
        outline: none;
        border: 0;
        font-family: "Poppins", sans-serif;
        color: #414042;
    }
    p {
        line-height: 1.5;
    }
    .container {
        max-width: 1280px;
        margin: auto;
        display: flex;
        padding: 16px;
        flex-wrap: wrap;
    }
    section > span {
        position: relative;
        top: -80px;
    }
    /* Header */
    header {
        background-color: var(--color-red);
        position: fixed;
        z-index: 9999;
        width: 100%;
    }
    header .container {
        align-items: center;
        color: var(--color-white);
        justify-content: space-between;
        max-width: 960px;
    }
    header h1 {
        height: auto;
        display: flex;
        align-items: center;
        color: var(--color-white);
    }
    header h1 img {
        padding: 0;
        max-height: 26px;
        height: auto;
    }
    header nav ul {
        display: inline-flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }
    header nav ul li {
        list-style: none;
    }
    header nav ul li a {
        color: var(--color-white);
        text-decoration: none;
        padding: 8px 16px;
        font-size: 13px;
    }
    header nav ul li a.button {
        border: 2px solid var(--color-white);
        border-radius: 50px;
    }
    /* Hero */
    #hero {
        background-color: var(--color-red);
        color: var(--color-white);
        height: 284px;
        position: relative;
        display: flex;
        padding: 80px 0 32px;
        background-image: url('/assets/img/ilustration.png');
        background-position: bottom right;
        background-repeat: no-repeat;
        background-origin: border-box;
        background-position-x: 75%;
    }
    #hero .container {
        align-items: flex-start;
        justify-content: left;
        text-align: left;
        width: 100%;
        flex-direction: column;
        max-width: 960px;
        font-weight: 600;
    }
    #hero h2 {
        font-weight: bold;
        font-size: 32px;
        margin: 32px 0;
        color: var(--color-white);
    }
    #hero p {
        font-stretch: expanded;
        color: var(--color-white);
        max-width: 350px;
        font-weight: normal;
        font-size: 16px;
    }
    #hero .buttons {
        display: flex;
    }
    #hero a.button:nth-child(1) {
        background: #fff;
        color: #bd1e2c;
    }
    #hero a.button {
        margin: 32px 12px 16px 0;
        border: 2px solid var(--color-white);
        border-radius: 50px;
        padding: 8px 24px;
        color: var(--color-white);
        text-decoration: none;
        font-weight: 500;
    }
    #hero .title {
        font-size: 28px;
        color: #fff;
        font-weight: 500;
        padding: 12px 0;
        max-width: 350px;
        margin: 0;
    }
    .title b {
        color: #fff;
    }
    /* Carrossel */
    .arrow {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-top: 2px solid #414042;
        border-right: 2px solid #414042;
    }
    .arrow-left {
        transform: rotate(-135deg);
    }
    .arrow-right {
        transform: rotate(45deg);
    }
    .next-after:nth-child(1) {
        z-index: 1;
        margin: 16px;
        position: absolute;
        left: -100px;
    }
    .next-after {
        padding: 16px;
        background: #fff;
        border-radius: 25px;
        box-shadow: 0 4px 10px rgb(179 179 179 / 25%);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        height: 40px;
    }
    .next-after {
        padding: 16px;
        background: #fff;
        border-radius: 25px;
        box-shadow: 0 4px 10px rgb(179 179 179 / 25%);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    .next-after:nth-last-child(1) {
        z-index: 1;
        margin: 16px;
        position: absolute;
        right: -100px;
    }
    /* carrossel */
    #carrossel .container {
        margin: auto;
        display: flex;
        justify-content: center;
    }
    #carrossel .item {
        display: flex;
        width: 100%;
        max-width: 960px;
        align-items: center;
        position: relative;
        display: none;
        min-height: 420px;
    }
    #carrossel .item.active {
        display: flex;
    }
    #carrossel .image {
        background: #ffffff;
        min-width: 300px;
        width: 100%;
        border-radius: 16px;
        object-fit: contain;
        box-shadow: 0 4px 10px rgb(179 179 179 / 25%);
    }
    #carrossel .content {
        max-width: 300px;
        padding: 16px;
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .item .content h2 {
        font-size: 26px;
        padding: 16px 0;
    }
    .item .content p {
        font-size: 16px;
    }
    #carrossel > div > div.item div > h2 {
        font-size: 17px;
        color: #bd1e2c;
    }
    #carrossel {
        position: relative;
    }
    #carrossel .navigation {
        align-items: center;
        justify-content: center;
        display: flex;
    }
    #carrossel input[type=radio] {
        transform: scale(1.5);
        margin: 8px;
        border: 1px solid #bd1e2c;
        -webkit-appearance: none;
        padding: 3px;
        border-radius: 50px;
        cursor: pointer;
    }
    #carrossel input[type=radio]:checked {
        background-color: #bd1e2c;
    }
    #carrossel > div > div.navigatoion {
        position: absolute;
        bottom: 0;
    }
    #dashboard > div.container .dash:after {
        content: '';
        width: 100%;
        height: 50px;
        background: white;
        bottom: 0;
        position: absolute;
        display: flex;
    }


    #carrossel > div > div.item.style-1 > div {
        width: 100%;
        max-width: 100%;
    }

    #carrossel > div > div.item.style-1 ul {
        width: 100%;
        max-width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        text-align: center;
        list-style: none;
        font-weight: 600;
        flex-wrap: wrap;
    }

    #carrossel > div > div.item.style-1 ul li {
        flex-direction: column;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        max-width: 250px;
    }

    #carrossel > div > div.item.style-1 ul li img {
        max-width: 128px;
        margin: 16px;
    }

    #carrossel > div > div.item.style-2 ul {
        justify-content: space-evenly;
    }

    #carrossel .container .item:nth-child(3) .content ul {
        justify-content: space-evenly;
    }

    /* Dashborad */
    #dashboard {
        position: relative;
        overflow: hidden;
    }
    #dashboard .container {
        text-align: center;
        justify-content: center;
        flex-direction: column;
        margin: auto;
        align-items: center;
    }
    #dashboard h2 {
        font-size: 38px;
        padding: 16px;
        color: #231F20;
        font-weight: bolder;
        max-width: 960px;
    }
    #dashboard .dash {
        max-width: 900px;
        width: 100%;
        background: #ffffff;
        min-height: 508px;
        margin: 32px 0;
        border-radius: 16px;
        background-repeat: no-repeat;
        background-size: contain;
        position: relative;
    }
    #dashboard p {
        max-width: 830px;
    }
    #dashboard a.button {
        background: rgb(155, 187, 88);
        color: rgb(255, 255, 255);
        text-decoration: none;
        padding: 14px 32px;
        border-radius: 50px;
        font-size: 16px;
    }
    #dashboard .object {
        height: 600px;
        left: 0;
        right: 0;
        position: absolute;
        z-index: -1;
        overflow: hidden;
        top: 100px;
        background-image: url('../img/grafico.svg');
        background-repeat: no-repeat;
        background-size: cover;
        width: 200%;
    }
    #dashboard > .object {
        animation: animation 20s linear infinite;
        background-position: center;
        background-size: auto;
        background-repeat: no-repeat;
    }
    #dashboard iframe {
        width: 100%;
        height: auto;
        min-height: 600px;
    }

    @-webkit-keyframes animation {
        0% {
            transform: translate(-28%, 0vh)
        }
        50% {
            transform: translate(-26%, 0vh)
        }
        100% {
            transform: translate(-24%, 0vh)
        }
    }
    /* Its Work */
    #itsworks .container {
        text-align: center;
        justify-content: center;
        padding: 16px 0;
    }
    #itsworks h2 {
        font-size: 38px;
        padding: 16px;
        color: var(--color-red);
        font-weight: bolder;
        max-width: 960px;
    }
    #itsworks p {
        max-width: 830px;
    }
    #itsworks ul {
        display: flex;
        width: 100%;
        justify-content: space-evenly;
        padding: 64px 0;
        flex-wrap: wrap;
        max-width: 960px;
    }
    #itsworks ul li {
        flex-direction: column;
        justify-content: start;
        align-items: center;
        display: flex;
        max-width: 190px;
        text-align: center;
        color: var(--color-white);
    }
    /* Plans */
    #plans {
        position: relative;
        background: #eff1ee;
        z-index: 10;
        overflow: hidden;
    }
    #plans .container {
        max-width: 1280px;
        margin: auto;
        display: flex;
        padding: 64px 16px 0;
        flex-wrap: wrap;
        align-items: center;
        flex-direction: column;
    }
    #plans .option {
        display: flex;
        align-items: center;
        width: 200px;
        justify-content: space-between;
        margin: 16px 0 0;
    }
    #plans .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
    }
    #plans .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    #plans .plan-option {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        -webkit-transition: 0.4s;
        transition: 0.4s;
        background-color: #be1e2d;
    }
    #plans .plan-option:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: 0.4s;
        transition: 0.4s;
    }
    #plans input:checked + .plan-option {
        background-color: #be1e2d;
    }
    #plans input:checked + .plan-option-text {
        background-color: #be1e2d;
    }
    #plans input:focus + .plan-option {
        box-shadow: 0 0 1px #be1e2d;
    }
    #plans input:checked + .plan-option:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }
    #plans .plan-option.round {
        border-radius: 34px;
    }
    #plans .plan-option.round:before {
        border-radius: 50%;
    }
    .plans-wrap {
        display: flex;
        justify-content: center;
        align-items: start;
        width: 100%;
        padding: 32px 0;
        flex-wrap: wrap;
    }
    .plan {
        max-width: 316px;
        box-shadow: 0 4px 10px rgb(179 179 179 / 25%);
        padding: 32px;
        align-items: center;
        display: flex;
        border-radius: 8px;
        flex-direction: column;
        justify-content: flex-start;
        margin: 16px;
        border-radius: 8px;
        min-height: 350px;
        background: #fff;
        display: flex;
        justify-content: space-between;
    }
    .plan li {
        list-style: none;
        padding: 4px 0;
    }
    .plan ul li {
        list-style: none;
        padding: 6px 0;
        font-size: 16px;
        align-items: self-start;
        display: flex;
        color: #414042;
    }
    .plan li img {
        padding: 0 8px 0 0;
        width: 16px;
        height: 16px;
    }
    .plan h3 {
        font-size: 26px;
        font-weight: 600;
        color: var(--color-red);
        margin: 0 0 32px;
    }
    .plan > p {
        font-size: 12px;
        text-align: center;
        padding: 32px;
        min-height: 75px;
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .plan p span {
        display: flex;
        font-size: 26px;
        align-items: baseline;
        font-weight: 700;
    }
    .plan p small {
        font-size: 13px;
        font-weight: normal;
        padding: 0 4px;
    }
    .plan p span:nth-child(2) {
        font-size: 12px;
        color: #414042;
        font-weight: 400;
    }
    .plans-wrap > div:nth-child(1) > p > span > span {
        font-size: 12px;
        font-weight: 400;
    }
    a.view-category {
        list-style: none;
        margin: 32px 0;
        position: relative;
        display: flex;
        justify-content: center;
        color: var(--color-red);
    }
    .plan a.button.red {
        margin: 64px 0 0;
    }
    .plan:nth-child(1) {
        margin-right: 0;
        border-radius: 8px 0 0 8px;
        box-shadow: -6px 4px 10px rgb(179 179 179 / 25%);
        border-right: 2px solid #eef1ee;
    }
    .plan:nth-child(2) {
        margin-left: 0;
        border-radius: 0 8px 8px 0;
        box-shadow: 6px 4px 10px rgb(179 179 179 / 25%)
    }
    .plan > div:nth-child(1) {
        height: auto;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 220px;
    }
    .plan div:nth-child(2) {
        min-height: inherit;
        padding: 4px 0;
    }
    .plan > div p {
        min-height: 66px;
        justify-content: center;
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .plan a.button {
        background: #9BBB58;
        color: #fff;
        text-decoration: none;
        padding: 8px 24px;
        border-radius: 50px;
    }
    .plan > div > span b {
        display: flex;
        font-size: 26px;
        align-items: baseline;
        font-weight: 700;
        margin: 0 4px;
    }
    .plan > div > span {
        display: flex;
        align-items: center;
    }
    #plans > div > div > div:nth-child(2) > div:nth-child(1) > p {
        font-weight: 500;
    }
    /* Trust Us */
    #trust-us {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #EFF1EE;
        position: relative;
    }
    #trust-us .container {
        padding: 32px 0;
        text-align: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
    }
    #trust-us h3 {
        font-weight: 400;
        padding-bottom: 32px;
    }
    #trust-us ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: center;
    }
    #trust-us ul li {
        padding: 32px;
        list-style: none;
    }
    /* FAQ */
    #faq .container {
        max-width: 960px;
    }
    #faq .accordian {
        border: 2px solid #eef1ee;
        width: 100%;
    }
    #faq h2 {
        padding: 32px;
        width: 100%;
        text-align: center;
    }
    #faq > div > div > div > h3 > img {
        transform: rotate(-180deg);
        cursor: pointer;
    }
    .accordian-item h3 {
        font-size: 16px;
        font-weight: bolder;
        padding: 16px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .accordian-item p {
        line-height: 1.5;
        padding: 16px 0 0;
    }
    .accordian-item {
        border-bottom: 2px solid #eef1ee;
        padding: 0 39px;
    }
    .accordian-item:nth-last-child(1) {
        border-bottom: 0;
    }
    .accordian-item div {
        display: none;
        padding: 0 0 26px;
    }
    .accordian-item.active div {
        display: block;
    }
    #faq > div > div > div.accordian-item.active > h3 > img {
        transform: rotate(0deg);
        cursor: pointer;
    }
    /* Footer */
    footer {
        min-height: 350px;
        background: var(--color-red);
        margin-top: 62px;
    }
    footer h2 {
        font-size: 32px;
        padding: 16px 0;
    }
    footer:is(h2, p, a) {
        color: #fff;
        max-width: 350px;
    }
    footer .container {
        max-width: 960px;
        display: flex;
        justify-content: space-between;
    }
    footer > .container .col {
        width: 50%;
        padding: 16px 0;
    }
    footer form {
        display: flex;
        flex-direction: column;
    }
    footer form input {
        width: 50%;
        min-width: 70px;
    }
    footer form > div {
        display: flex;
        flex-direction: revert;
        flex-wrap: wrap;
    }
    footer form > div input {
        width: 100%;
        max-width: calc(230px - 8px);
        height: 40px;
        background: #bd1e2c;
        border: 1px solid #fff;
        padding: 0 6px;
        color: #FFF;
    }
    footer form div {
        display: flex;
        justify-content: space-between;
        padding: 8px 4px;
        width: 100%;
    }
    footer form:is(input, textarea)::placeholder {
        color: #FFF;
    }
    footer form textarea {
        width: calc(100% - 14px);
        margin: 0 4px;
        height: 126px;
        background: #bd1e2c;
        border: 1px solid #fff;
        padding: 6px;
        color: #fff;
    }
    footer form button {
        padding: 4px;
        width: 100%;
        margin: 8px 4px;
        height: 40px;
        align-items: center;
        background: #fff;
        color: #bd1e2c;
        font-weight: bold;
        cursor: pointer;
    }
    footer > div:nth-child(2) > img {
        width: 100px;
        height: 40px;
        object-fit: contain;
    }
    footer > div:nth-child(2) ul {
        display: flex;
        list-style: none;
        align-items: center;
        justify-content: space-between;
        color: #fff;
        padding: 12px;
    }
    footer > div:nth-child(2) ul li a {
        font-size: 14px;
        text-decoration: none;
        padding: 0 8px;
    }
    footer ul li img {
        width: 24px;
    }
    footer > div:nth-child(2) {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    footer div span {
        padding: 12px;
        color: #d0737a;
        font-size: 13px;
    }

    footer * {
        color: #fff;
    }

    textarea::placeholder,
    input::placeholder {
        color: #fff;
    }
    /* Modal */
    .modal-container {
        background-color: rgba(0, 0, 0, 0.5);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: calc(100 * 100);
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: auto;
        display: none;
    }
    .modal-container .modal-wrapper {
        max-height: 480px;
        max-width: 728px;
        margin: auto;
        background: #fff;
        overflow: auto;
        width: 100%;
        height: 100%;
        padding: 32px;
        border-radius: 6px;
        position: relative;
    }
    .modal-title {
        text-align: center;
        padding-bottom: 16px;
        font-size: 21px;
    }
    .modal-wrapper div ul {
        column-count: 3;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .modal-wrapper li {
        flex: 1 1 30%;
        display: flex;
        font-size: 14px;
        padding: 4px 2px;
        position: relative;
    }
    .modal-wrapper ul li {
        flex: 1 1 30%;
        display: flex;
        font-size: 14px;
        padding: 4px;
    }
    #modal-close {
        position: absolute;
        top: 0;
        right: 0;
        font-family: inherit;
        font-weight: bolder;
        padding: 0.03em 0.35em;
        border: 0;
        background-color: #fff;
        font-size: 1.4em;
        position: absolute;
        cursor: pointer;
        border-radius: 50%;
        transform: rotate(45deg);
        -webkit-user-select: none;
        user-select: none;
        font-size: 13px;
        margin: 16px;
    }
    #modal-close span {
        transform: rotate(136deg);
        display: flex;
        padding: 4px;
        font-size: 13px;
        font-weight: 600;
    }
    #modal-close:hover {
        background-color: gray;
    }
    #modal-close:hover span {
        color: #fff;
    }

    .menu-toogle {
        display: none;
    }
    @media(max-width: 790px) {

        header h1 img {
            padding: 0;
            max-height: 16px;
            height: auto;
        }


        header .container {
            justify-content: center;
            padding: 0;
        }
        nav {
            display: none;
            border-bottom: 3px solid #fff;
        }

        nav.active {
            display: block;
            width: 100%;
        }


        header nav ul {
            display: inline-flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 100%;
            padding-top: 20px;
            padding-bottom: 20px;
        }


        header nav ul li {
            list-style: none;
            width: 100%;
            display: flex;
        }

        header nav ul li a {
            color: var(--color-white);
            text-decoration: none;
            padding: 8px 16px;
            font-size: 13px;
            max-width: 80%;
            margin: auto;
            display: flex;
        }

        #hero {
            background-image: unset;

        }
        #carrossel .content {
            max-width: 90%;
            margin: auto;
        }

        #carrossel > div > div.item.style-1 ul {
            align-items: center;
            justify-content: center;
        }


        #carrossel .item.active {
            flex-wrap: wrap;
            width: calc(90% - 128px);
            padding-bottom: 50px;
        }

        img.image {
            display: none;
        }

        .menu-toogle {
            position: absolute;
            right: 15px;
            color: #fff;
            font-size: 13px;
            padding: 3px 8px;
            border-radius: 3px;
            display: block;
            cursor: pointer;
            top: 9px;
        }

        #hero .title {
            max-width: unset;
        }

        #hero p {
            max-width: unset;
        }

        .plan:nth-child(2) {
            margin-left: 16px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgb(179 179 179 / 25%);
        }
        .plan:nth-child(1) {
            margin-right: 16px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgb(179 179 179 / 25%);
            border-right: 2px solid #eef1ee;
        }

        #carrossel > div > div.item.style-1 ul {
            flex-direction: column;
        }
        #itsworks h2 {
            font-size: 24px;
        }
        footer .container {
            flex-direction: column;
        }
        footer > .container .col {
            width: 100%;
            padding: 16px 0;
        }
        footer form > div input {
            margin: 4px 0;
            width: 100%;
            max-width: 100%;
        }
        footer form div {
            padding: 0 4px;
        }
        footer > div:nth-child(2) ul:nth-child(2) {
            flex-direction: column;
        }

    }


    .success-contact {
        width: 100%;
        text-align: center;
        justify-content: center;
        display: flex;
        color: #fff;
        padding: 16px;
        background: #a8121f;
        border-radius: 12px;
    }