/* General */

div.backdrop {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;

    z-index: 8;

    background: var(--color-dark-24);

    opacity: 0;
    visibility: hidden;

    transition: 0.2s;
}

button.whatsapp {
    position: fixed;
    right: 2rem;
    bottom: 2rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 4rem;
    height: 4rem;

    border-radius: 4rem;

    background: var(--color-whatsapp);
    color: var(--color-white);

    font-size: 2rem;

    z-index: 8;

    box-shadow: 0 0 0 0 hsla(var(--color-pulse-hsl-whatsapp), 1);
    transform: scale(1);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 hsla(var(--color-pulse-hsl-whatsapp), 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 1.5rem hsla(var(--color-pulse-hsl-whatsapp), 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 hsla(var(--color-pulse-hsl-whatsapp), 0);
    }
}

header {
    position: fixed;
    top: 0;
    left: 0;

    z-index: 8888;

    width: 100%;

    transition: 0.2s;
}

header[scrolled="true"] {
    background: var(--color-white);

    box-shadow: 0 0.125rem 1rem 0 var(--color-dark-08);
}

header > div.container {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 1rem 1.5rem;
}

header > div.container button.mobile {
    display: none;
}

header > div.container > a.logo > img {
    height: 2.5rem;
}

header > div.container nav {
    display: flex;
    align-items: center;
    gap: 1rem;

    z-index: 88;
}

header > div.container nav > a.link {
    display: inline-flex;

    padding: 0.5rem 1rem;
}

header > div.container nav > a.link.primary {
    color: var(--color-primary);
}

header > div.container nav .btn {
    font-size: 1rem;

    padding: 0.75rem 1.5rem;
}

@media (max-width: 991px) {
    header.show {
        opacity: 1;
        visibility: visible;
    }
    header {
        position: absolute;
    }
    header > div.container {
        padding: 2rem 1.5rem;

        transition: 0.2s;
    }
    header[scrolled="true"] {
        background: transparent;

        box-shadow: none;
    }
    header[scrolled="true"] > div.container {
        padding: 1.5rem;
    }
    header > div.container nav {
        position: fixed;
        top: 0;
        left: -100vw;

        background: var(--color-white);

        width: 100%;
        max-width: 60vw;
        min-height: 100vh;

        display: flex;
        align-items: flex-start;
        flex-direction: column;

        box-shadow: 0 0 1.5rem var(--color-dark-16);

        padding: 2rem 1rem;

        transition: 0.2s;
    }
    header.show > div.container nav {
        left: 0;
    }
    header > div.container nav > a.link,
    header > div.container nav > a.link.primary {
        display: flex;

        width: 100%;

        display: inline-flex;

        padding: 0.5rem 1rem;

        background: transparent;
        border: 0;
        color: var(--color-dark);
    }
    header > div.container nav > a.btn {
        padding: 0.5rem 1rem;

        background: transparent;
        border: 0;
        color: var(--color-primary);
    }
    header > div.container button.mobile {
        display: inline-flex;
        align-items: center;

        font-size: 2rem;

        min-width: 2rem;
        min-height: 2rem;
    }
    header.show div.backdrop {
        visibility: visible;
        opacity: 1;
    }
}

/* Options */

section.options {
    padding-top: 4rem;
}

section.options div.container-options {
    overflow-x: clip;

    position: relative;
}

section.options div.container-options .options-slider {
    display: flex;
    align-items: center;
    gap: 3rem;

    position: absolute;
    top: 50%;
    left: 0;

    transform: translateY(-50%);

    transition: 40s;
    transition-timing-function: linear;
}

section.options div.container-options .options-slider span {
    font-weight: 500;
    font-size: 1.125rem;
    white-space: nowrap;

    display: flex;

    color: var(--color-dark-56);
}

/* Contact */

section.contact {
    background: var(--color-primary) url("../images/eo9N3NREe9MX.png") no-repeat center/cover;

    padding: 4rem 0;
}

section.contact form {
    border-radius: 1rem;
}

section.contact form span.spotlight {
    display: flex;
    justify-content: center;

    text-align: center;
    font-size: 0.85rem;
}

section.contact h2.text {
    font-size: 4rem;
    font-weight: 700;

    margin-bottom: 2rem;

    color: #114308;
}

section.contact p.subtext {
    font-size: 1.25rem;

    color: rgb(0 0 0 / 72%);

    margin-top: 1rem;
}

@media (max-width: 991px) {
    section.contact h2.text {
        font-size: 3rem;
    }
    section.contact h2.text br {
        display: none !important;
    }
    section.contact p.subtext br {
        display: none;
    }
}

/* Prices */

    section.prices {
    padding: 6rem 0;
}

section.prices > div.container > div.header {
    text-align: center;

    margin-bottom: 5rem;
}

section.prices > div.container > div.header h2 {
    font-weight: 600;
    font-size: 4rem;

    margin-bottom: 1rem;
    top: 1rem;
}

section.prices > div.container > div.header span.tag {
    padding: 0.5rem 1rem;

    border: 1px solid var(--color-dark);
    color: var(--color-dark);

    border-radius: 2rem;

    font-weight: 600;

    display: inline-flex;
}

section.prices div.item-plan {
    padding: 2rem 2.5rem;

    border-radius: 1rem;

    background: var(--color-white);
    border: 1px solid var(--color-dark-16);

    text-align: center;

    position: relative;
}

section.prices div.item-plan.bg {
    background: url("../images/eo9N3NREe9MX.png") no-repeat center/cover;
}

section.prices div.item-plan:not(.active) {
    opacity: 1;

    height: 100%;
}

section.prices div.item-plan span.tag {
    padding: 0.3rem 1rem;

    border: 1px solid var(--color-dark-16);
    background: var(--color-white-24);
    color: var(--color-dark-56);

    border-radius: 2rem;

    font-weight: 600;
    font-size: 0.85rem;

    position: absolute;
    top: -1rem;
    left: 50%;

    transform: translateX(-50%);
}

section.prices div.item-plan h4 {
    font-weight: 600;
    font-size: 2rem;

    color: var(--color-dark-88);

    margin-bottom: 1rem;
}

section.prices div.item-plan p {
    font-size: 1rem;

    color: var(--color-dark-56);

    margin-bottom: 2rem;
}

section.prices div.item-plan ul {
    display: flex;
    flex-direction: column;

    text-align: left;

    gap: 1.5rem;

    margin: 2rem 0;
}

section.prices div.item-plan ul li {
    display: flex;

    font-size: 0.85rem;
}

section.prices div.item-plan ul li i {
    margin-right: 0.75rem;
    margin-top: 0.35rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 1rem;
    min-width: 1rem;
    height: 1rem;
}

section.prices div.item-plan ul li i[class*="check"] {
    /*section.prices div.item-plan:not(.active) ul li i[class*='check'] {*/
    color: var(--color-green);
}

section.prices div.item-plan ul li i[class*="cross"] {
    color: var(--color-white-24);

    font-size: 0.75rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 0.75rem;
    height: 0.75rem;

    position: relative;
    top: 1px;
}

section.prices div.item-plan:not(.active) ul li i[class*="cross"] {
    color: var(--color-red);
}

section.prices div.item-plan ul li > span > span:first-child {
    display: flex;

    font-size: 1.125rem;
}

section.prices div.item-plan ul li > span > span:last-child {
    color: var(--color-dark-64);

    font-style: italic;
    font-size: 0.85rem;
}

section.prices div.item-plan span.price {
    display: flex;
    justify-content: center;

    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1;

    color: var(--color-dark-88);
}

section.prices div.item-plan span.price > span:nth-child(1) {
    font-size: 1.75rem;

    display: inline-flex;

    margin-top: 0.75rem;
}

section.prices div.item-plan span.price > span:nth-child(2) {
    display: inline-flex;

    margin: 0 0.5rem;
}

section.prices div.item-plan span.price > span:nth-child(3) {
    font-size: 1.75rem;

    display: inline-flex;
    align-self: self-end;

    margin-bottom: 0.5rem;
}

section.prices div.item-plan span.price-desc {
    color: var(--color-dark-56);

    font-size: 0.85rem;

    display: flex;
    justify-content: center;

    margin-bottom: 2rem;
}

section.prices div.item-plan.active {
    background: radial-gradient(var(--color-primary-32) 0%, transparent 55%) no-repeat -18rem -18rem / 40rem 40rem, radial-gradient(var(--color-white-08) 0%, transparent 55%) no-repeat -6rem 4rem / 40rem 40rem, linear-gradient(0deg, var(--color-dark), var(--color-dark));
    /* background: var(--color-primary) url("assets/../images/eo9N3NREe9MX.png") no-repeat center/cover; */
    /* background: url("assets/../images/img-4.png") no-repeat center/cover, radial-gradient(var(--color-primary-32) 0%, transparent 55%) no-repeat -18rem -18rem / 40rem 40rem, radial-gradient(var(--color-white-08) 0%, transparent 55%) no-repeat -6rem 4rem / 40rem 40rem, linear-gradient(0deg, var(--color-dark), var(--color-dark)); */
    color: var(--color-white);
}

section.prices div.item-plan.active span.tag {
    background: var(--color-red) linear-gradient(0deg, var(--color-white-08), var(--color-white-08));
    border: 0;
    color: var(--color-white);
}

section.prices div.item-plan.active p,
section.prices div.item-plan.active span.price-desc {
    color: var(--color-white-72);
}

section.prices div.item-plan.active span.price {
    color: var(--color-white);
}

section.prices div.item-plan.active h4 {
    color: var(--color-white);
}

section.prices div.item-plan.active h4 > span {
    color: var(--color-primary);
}

section.prices div.item-plan.active ul li > span > span:last-child {
    color: var(--color-white-64);

    font-style: italic;
    font-size: 0.85rem;
}

section.prices div.comparasion {
    padding: 1.5rem 1.5rem 1.5rem 3rem;
    margin-left: -0.5rem;

    width: calc(100% + 1.5rem);

    background: var(--color-dark-04);
    border: 2px dashed var(--color-dark-24);

    border-radius: 1.5rem;

    position: relative;
}

section.prices div.comparasion > i {
    position: absolute;

    top: 50%;
    left: 51.7%;

    transform: translate(-50%, -50%);

    z-index: 8;

    font-size: 3rem;

    min-width: 6rem;
    height: 6rem;

    display: flex;
    align-items: center;

    /*    color: var(--color-primary);*/
}

section.prices h4.comparasion-title {
    font-weight: 600;
    font-size: 1.5rem;
    text-transform: uppercase;
    text-align: center;

    margin-bottom: 1rem;
}

section.prices span.cta-container {
    padding: 0.5rem 0.85rem;
    margin-top: 1rem;
    margin-left: 2rem;

    background: var(--color-green-08);
    color: var(--color-dark-88);

    border-radius: 0.75rem;

    font-size: 1rem;

    display: inline-block;
}

section.prices div.item-plan span.cta {
    padding: 0.75rem 1rem;
    margin-top: 1rem;

    background: var(--color-white-16);
    color: var(--color-white-88);

    border-radius: 0.5rem;

    font-size: 0.85rem;

    display: block;
}

section.prices div.contact {
    display: flex;
    justify-content: center;

    padding-top: 2rem;
}

section.prices div.contact > span {
    display: inline-block;

    padding: 1rem 1.5rem;
    margin: auto;

    border-radius: 0.75rem;

    background: var(--color-primary-08);
    color: var(--color-dark);

    font-weight: 500;
    font-size: 1.125rem;
}

section.prices div.contact > span > a {
    color: var(--color-primary);

    text-decoration: underline;
}

/* section.price-comparasion */

section.price-comparasion div.table_ {
    position: relative;

    padding-bottom: 4rem;
}

section.price-comparasion div.table_ div.item.sticky {
    position: sticky;
    top: 5rem;

    padding-top: 1.25rem;
}

section.price-comparasion div.table_ div.item {
    padding: 1rem 0;

    border-bottom: 1px solid var(--color-dark-16);
    background: var(--color-white);
}

section.price-comparasion div.table_ div.item:last-child {
    border-bottom: 0;
}

section.price-comparasion div.table_ div.item span.title {
    font-size: 2rem;
    font-weight: 600;
}

section.price-comparasion div.table_ div.item div.price {
    display: flex;
    align-items: center;
    flex-direction: column;
}

section.price-comparasion div.table_ div.item div.price img {
    height: 2.5rem;
}

section.price-comparasion div.table_ div.item div.price > span.label {
    font-size: 1.5rem;
    font-weight: 600;

    display: flex;
    margin-bottom: 1rem;

    text-align: center;
}

section.price-comparasion div.table_ div.item div.price > span.label > img {
    max-width: 70%;

    display: block;

    margin: 0.75rem auto;
}

section.price-comparasion div.table_ div.item div.price > span.price {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

section.price-comparasion div.table_ div.item div.price > span.price > span:nth-child(1) {
    font-size: 0.85rem;
    font-weight: 600;
}

section.price-comparasion div.table_ div.item div.price > span.price > span:nth-child(2) {
    font-size: 1.85rem;
    font-weight: 600;
}

section.price-comparasion div.table_ div.item div.price > span.price > span:nth-child(3) {
    font-size: 0.75rem;

    display: flex;
    flex-direction: column;
}

section.price-comparasion div.table_ div.item span.icon {
    color: var(--color-dark-48);
}

section.price-comparasion div.table_ div.item span.icon.primary {
    color: var(--color-primary);
    background: var(--color-primary-08);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2rem;
    height: 2rem;

    border-radius: 2rem;
}

section.price-comparasion div.table_ div.item span.icon.danger {
    color: var(--color-red);
    background: var(--color-red-08);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2rem;
    height: 2rem;

    border-radius: 2rem;
}

section.price-comparasion div.table_ div.item span.name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

section.price-comparasion div.table_ div.item span.name > span.tag {
    background: var(--color-green-08);
    color: var(--color-dark);

    border-radius: 1rem;

    display: inline-flex;

    padding: 0.25rem 0.5rem;

    font-size: 0.35rem;
    font-weight: 600;
    text-transform: uppercase;
}

@media (max-width: 991px) {
    section.prices div.comparasion {
        width: 100%;

        margin-left: 0;
        padding: 1.5rem;
    }
    section.prices h4.comparasion-title {
        margin-top: 2rem;
    }
    section.prices div.comparasion > i {
        left: 50%;
    }
    section.price-comparasion {
        display: none;
    }
    section.prices > div.container > div.header h2 {
        font-size: 3rem;
    }
    section.prices div.contact {
        padding-top: 0;
    }
}

/* comparasion mobile */

section.price-comparasion-mobile {
    display: none;

    padding: 0 0 4rem;
}

@media (max-width: 991px) {
    section.price-comparasion-mobile {
        display: block;
    }
}

section.price-comparasion-mobile div.list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

section.price-comparasion-mobile div.list div.card {
    display: flex;
    flex-direction: column;

    border: 1px solid var(--color-dark-08);

    border-radius: 1rem;
}

section.price-comparasion-mobile div.list div.card div.header {
    background: var(--color-dark-04);

    font-size: 1.25rem;
    font-weight: 600;

    padding: 1rem 1.25rem;

    border-radius: 1rem 1rem 0 0;
}

section.price-comparasion-mobile div.list div.card div.body div.items {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
}

section.price-comparasion-mobile div.list div.card div.body div.items div.item {
    padding: 1.5rem 1.25rem 1.25rem;

    background: var(--color-primary-04);

    border-radius: 0.75rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;

    text-align: center;

    width: 100%;
}

section.price-comparasion-mobile div.list div.card div.body div.items div.item:has(> i[class*="cross"]) {
    background: var(--color-dark-02);
}

section.price-comparasion-mobile div.list div.card div.body div.items div.item > i {
    width: 3rem;
    height: 3rem;

    font-size: 1.5rem;

    border-radius: 3rem;

    color: var(--color-primary);
    background: var(--color-primary-08);
}

section.price-comparasion-mobile div.list div.card div.body div.items div.item > i[class*="cross"] {
    background: transparent;
    color: var(--color-dark-56);
}

section.price-comparasion-mobile div.list div.card div.body div.items div.item > span.name {
    font-size: 0.85rem;
    font-weight: 500;

    color: var(--color-dark-72);
}

/* FAQ */

section.faq {
    padding: 4rem 0;

    background: linear-gradient(90deg, transparent, var(--color-primary-16)), url("../images/V552Nl14XOdI.png") no-repeat center/cover;
}

section.faq div.accordion {
    display: flex;
    flex-direction: column;
}

section.faq div.accordion > div.item {
    display: flex;
    flex-direction: column;

    border-bottom: 1px solid var(--color-dark-16);
}

section.faq div.accordion > div.item:last-child {
    border-bottom: 0;
}

section.faq div.accordion > div.item > div.header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 1.5rem 0;

    cursor: pointer;
}

section.faq div.accordion > div.item > div.header > span {
    font-size: 1.25rem;
    font-weight: 600;
}

section.faq div.accordion > div.item > div.header:hover > span {
    color: var(--color-primary);
}

section.faq div.accordion > div.item > div.header > i {
    min-width: 2.5rem;
    min-height: 2.5rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 2.5rem;

    font-size: 1.5rem;

    padding-top: 0.25rem;

    background: var(--color-dark-04);

    transition: 0.2s;
}

section.faq div.accordion > div.item.open > div.header > i {
    transform: rotate(180deg);
}

section.faq div.accordion > div.item > div.body {
    padding: 0;

    display: flex;
    flex-direction: column;
    gap: 1.25rem;

    overflow: hidden;
    max-height: 0;
}

section.faq div.accordion > div.item.open > div.body {
    padding: 1rem 0 2rem;

    max-height: 200vh;
}

section.faq div.accordion > div.item > div.body > p {
    font-size: 1.25rem;

    color: var(--color-dark-56);
}

section.faq div.accordion > div.item > div.body > ul {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

section.faq div.accordion > div.item > div.body > ul > li {
    font-size: 1.25rem;

    color: var(--color-dark-56);
}

/* Footer */

footer {
    padding: 5rem 0 0;

    background: var(--color-dark);
}

footer p {
    color: var(--color-white);

    margin: 0;
}

footer h6 {
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;

    margin-bottom: 2rem;

    color: var(--color-white);
}

footer h5 {
    font-weight: 700;
    font-size: 1.25rem;
    text-transform: uppercase;

    margin-top: 3rem;
    margin-bottom: 1rem;

    color: var(--color-white);
}

footer ul.social {
    display: flex;
}

footer ul.social li {
    margin-right: 1.5rem;
}

footer ul.social li a,
footer ul.social li a:link {
    font-size: 2.5rem;

    width: 2.5rem;
    height: 2.5rem;

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

footer ul li {
    margin-bottom: 1rem;

    list-style: 1.8;

    color: var(--color-white);
}

footer ul li:has(> a) {
    margin-bottom: 1.5rem;
}

footer ul li:has(> a) i {
    min-width: 1.71rem;
}

footer ul li:has(> a) p {
    font-size: 0.85rem;
    opacity: 0.8;

    margin-left: 1.85rem;
}

footer ul li a > span {
    font-weight: 700;
}

footer ul li a,
footer ul li a:link {
    color: var(--color-white) !important;
}

footer ul li a:hover {
    color: var(--color-white);

    opacity: 0.9;
}

footer a.logo {
    display: block;

    margin-bottom: 2rem;
}

footer a.logo img {
    height: 2.5rem;
}

footer div.copyright {
    background: var(--color-white-08);

    margin-top: 3rem;
}

footer div.copyright div.content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 1rem 0;

    color: var(--color-white);
}

footer div.copyright div.content a {
    color: var(--color-white);

    transition: 0.2s;
}

footer div.copyright div.content a:hover {
    opacity: 0.8;
}

@media (max-width: 991px) {
    footer div.copyright div.content {
        flex-direction: column;
        gap: 1rem;
    }
}