/* Estado Aberto do Dropdown Desktop */
.js-dropdown-menu.is-active {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    -moz-transform: translateY(0) scale(1) !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
}

.js-dropdown-container.is-open .js-dropdown-icon {
    transform: rotate(180deg);
}

/* Estado Aberto do Menu Mobile */
#mobile-menu-container {
    pointer-events: auto !important;
    right: -100%;
    display: none;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}
#mobile-menu-container.is-open {
    right: 0;
    display: block;
    pointer-events: auto !important;
}

#mobile-menu-container.is-open #mobile-overlay {
    opacity: 1 !important;
}

#mobile-menu-container.is-open #mobile-drawer {
    transform: translateX(0) !important;
}

/*HOMEPAGE*/
.intro_home{
    .labels{
        ul{
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            li{
                padding: 5px 15px;
                border-radius: 24px;
                &:nth-child(odd){
                    color: hsl(var(--primary));
                    background-color: color-mix(in oklab, hsl(var(--primary)) 10%, transparent);
                }
                &:nth-child(even){
                    color: var(--color-slate-700);
                    background-color: var(--color-slate-200);
                }
            }
        }
    }
}

.logos_parceiros{
    img{
        max-width: 100px;
        max-height: 75px;
        object-fit: contain;
    }
}
.lista_produtos_home{
    .icon_svg{
        img{
            max-width: 28px;
            height: 28px;
            object-fit: contain;
        }
    }
    a.group.block:hover{
        .icon_svg{
            svg{
                rect, line, path{
                    color: #fff;
                }
            }
        }
    }
}
.suporte_remoto_home{
    ul{
        margin-top: 20px;
        li{
            font-size: 15px;
            display: flex;
            gap: 10px;
            padding: 5px 0;
            align-items: center;
        }
    }
}

#sobre-nos{
    .confianca{
        table{
            tr{
                display: flex;
                flex-wrap: wrap;
                gap: 20px;
                td{
                    display: flex;
                    flex-wrap: wrap;
                    gap: 10px;
                }
            }
        }
    }
}

#contactos{
    .contactos_diretos{
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        img{
            max-width: 20px;
            max-height: 20px;
            object-fit: contain;
        }
        a{
            --tw-font-weight: var(--font-weight-bold);
            font-weight: var(--font-weight-bold);
            font-size: var(--text-lg);
            line-height: var(--tw-leading, var(--text-lg--line-height));
        }
    }
}

/*alertas*/
.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    font-size: 14px;
    &.alert-warning {
        color: #856404;
        background-color: #fff3cd;
        border-color: #ffeeba;
    }
    &.alert-info {
        color: #0c5460;
        background-color: #d1ecf1;
        border-color: #bee5eb;
    }
    &.alert-success {
        color: #155724;
        background-color: #d4edda;
        border-color: #c3e6cb;
    }
    &.alert-danger {
        color: #721c24;
        background-color: #f8d7da;
        border-color: #f5c6cb;
    }
}

#solucao_servicos{

    h2{
        color: var(--color-slate-900);
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold);
        font-size: var(--text-3xl);
        line-height: var(--tw-leading, var(--text-3xl--line-height));
        margin-bottom: calc(var(--spacing) * 6);
    }
    h3{
        color: var(--color-slate-900);
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold);
        font-size: var(--text-xl);
        line-height: var(--tw-leading, var(--text-xl--line-height));
        margin-bottom: calc(var(--spacing) * 3);
    }
    .para_que_serve_servico{
    }
    .cta_solucoes {
        h2 {
            color: #fff;
            font-size: var(--text-4xl);
            line-height: var(--tw-leading, var(--text-4xl--line-height));
        }
    }
    .intro_solucao{
        h4{
            --tw-font-weight: var(--font-weight-semibold);
            font-weight: var(--font-weight-semibold);
            color: hsl(var(--primary));
            font-size: var(--text-xl);
            line-height: var(--tw-leading, var(--text-xl--line-height));
            margin-bottom: calc(var(--spacing) * 6);
        }
    }
    .numeros_solucao {
        h2 {
            color: #fff;
            font-size: var(--text-3xl);
            line-height: var(--tw-leading, var(--text-3xl--line-height));
            margin-bottom: calc(var(--spacing) * 1);
        }
        table{
            margin: 0 auto;
            display: block;
            width: 100%;
            tbody{
                width: 100%;
                display: block;
            }
            tr{
                display: flex;
                flex-wrap: wrap !important;
                gap: 20px;
                justify-content: center;
                td{
                    width: Calc(100% / 4 - 20px);
                    text-align: center;

                    @media screen and (max-width: 992px) {
                        &{
                            width: Calc(100% / 2 - 20px);
                        }
                    }

                }
            }
        }
    }
    .implementacao_solucao {
        h2 {
            text-align: center;
        }
        ul{
            list-style: none;
            counter-reset: meu-contador;
            padding-left: 0;
            li{
                counter-increment: meu-contador;
                position: relative;
                margin-bottom: calc(var(--spacing) * 6);
                padding-left: 75px;
                &::after {
                    content: '';
                    position: absolute;
                    width: 1px;
                    height: 100%;
                    background-color: var(--color-slate-200);
                    left: 23px;
                    top: 30px;
                    z-index: 0;
                }
                &:last-child{
                    &::after{
                        display: none;
                    }
                }
                &::before {
                    content: counter(meu-contador);
                    position: absolute;
                    left: 0;
                    top: 0;
                    color: #fff;
                    width: 48px;
                    height: 48px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: var(--text-xl);
                    line-height: var(--tw-leading, var(--text-xl--line-height));
                    --tw-font-weight: var(--font-weight-bold);
                    font-weight: var(--font-weight-bold);
                    --tw-shadow-color:
                            color-mix(in oklab,
                            color-mix(in oklab, hsl(var(--primary)) 20%, transparent) var(--tw-shadow-alpha), transparent);
                    background-color: hsl(var(--primary));
                    z-index: 1;
                }
            }
        }
    }
    .zona_cards{
        text-align: center;
        h2{
            text-align: center;
        }

        table{
            margin: 0 auto;
            display: block;
            width: 100%;
            max-width: 1090px;
            tbody{
                width: 100%;
                display: block;
            }
            tr{
                display: flex;
                gap: 20px;
                justify-content: center;
                padding: 10px 0;
                td{
                    width: Calc((100% / 3) - 14px);
                    max-width: 100%;
                    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
                    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
                    padding: calc(var(--spacing) * 8);
                    background: #fff;
                    border-style: var(--tw-border-style);
                    border-width: 1px;
                    border-color: var(--color-slate-100);
                    border-radius: var(--radius-2xl);
                    text-align: left;
                    svg, img{
                        max-width: 40px;
                        max-height: 40px;
                        object-fit: contain;
                    }

                    @media screen and (max-width: 1300px) {
                        &{
                            width: Calc(100% / 2 - 20px);
                        }
                    }
                    @media screen and (max-width: 767px) {
                        &{
                            width: 100%;
                        }
                    }

                }
                @media screen and (max-width: 992px) {
                    &{
                        flex-wrap: wrap;
                    }
                }
            }
        }
    }

    .incluido_solucao{
        h2{
            margin-left: auto;
            margin-right: auto;
            max-width: var(--container-6xl);
        }
        table{
            margin: 0 auto;
            display: block;
            width: 100%;
            max-width: var(--container-6xl);
            tbody{
                width: 100%;
                display: block;
            }
            tr {
                display: flex;
                flex-wrap: wrap !important;
                justify-content: center;
                align-items: start;

                td {
                    &:first-child{
                        width: Calc(50% + 40px);
                        padding-right: calc(var(--spacing) * 8);
                        ul{
                            margin-top: calc(var(--spacing) * 8);
                            li{
                                display: flex;
                                --tw-space-y-reverse: 0;
                                margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
                                margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
                                --tw-font-weight: var(--font-weight-medium);
                                font-weight: var(--font-weight-medium);
                                color: var(--color-slate-700);
                                --tw-leading: var(--leading-relaxed);
                                line-height: var(--leading-relaxed);
                                position: relative;

                                &::before{
                                    content: '';
                                    position: absolute;
                                    left: -3px;
                                    top: 50%;
                                    transform: translateY(-50%);
                                    height: calc(var(--spacing) * 5);
                                    border-radius: 50%;
                                    width: calc(var(--spacing) * 5);
                                    background-color:
                                            color-mix(in oklab, hsl(var(--primary)) 10%, transparent);
                                }
                                svg, img{
                                    max-width: 16px;
                                    max-height: 16px;
                                    object-fit: contain;
                                    margin-right: 10px;
                                    position: relative;
                                    top: 6px;

                                }
                            }
                        }
                    }
                    &:last-child{
                        width: Calc(50% - 40px);
                        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
                        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
                        padding: calc(var(--spacing) * 8);
                        background-color: var(--color-white);
                        border-color: var(--color-slate-100);
                        border-style: var(--tw-border-style);
                        border-width: 1px;
                        border-radius: var(--radius-2xl);

                        ul{
                            li{
                                display: flex;
                                --tw-space-y-reverse: 0;
                                margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
                                margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
                                font-size: var(--text-sm);
                                line-height: var(--tw-leading, var(--text-sm--line-height));
                                color: var(--color-slate-700);
                                svg, img{
                                    max-width: 16px;
                                    max-height: 16px;
                                    object-fit: contain;
                                    margin-right: 10px;
                                    position: relative;
                                    top: 2px;
                                }
                            }
                        }
                    }
                    table{
                        margin: 0 auto;
                        display: block;
                        width: 100%;
                        margin-bottom: calc(var(--spacing) * 6);
                        tbody{
                            width: 100%;
                            display: block;
                        }
                        tr {
                            display: flex;
                            flex-wrap: nowrap !important;
                            gap: 20px;
                            td {
                                font-size: var(--text-sm);
                                line-height: var(--tw-leading, var(--text-sm--line-height));
                                color: var(--color-slate-500);

                                &:first-child{
                                    width: calc(var(--spacing) * 10);
                                    height: calc(var(--spacing) * 10);
                                    background: #ecf0ee;
                                    border-radius: 50%;
                                    display: inline-flex;
                                    justify-content: center;
                                    align-items: center;
                                    padding: 0;
                                    svg, img{
                                        width: calc(var(--spacing) * 5) !important;
                                        height: calc(var(--spacing) * 5) !important;
                                        object-fit: contain;
                                    }
                                }
                                &:last-child{
                                    width: calc(100% - (var(--spacing) * 10));
                                    padding: 0;
                                    background: transparent;
                                    box-shadow: none;
                                    --tw-shadow: none;
                                    border: none;
                                }
                                h3{
                                    margin-bottom: 0;
                                }
                            }
                        }
                    }
                }
            }
        }

        @media screen and (max-width: 1023px) {
            &{
                table {
                    tr {
                        td {
                            &:first-child {
                                width: 100%;
                                padding-right: 0;
                            }
                            &:last-child {
                                margin-top: 40px;
                                width: 100%;
                                padding-right: 0;
                            }
                            table{
                                tr{
                                    td{
                                        &:last-child{
                                            margin-top: 0;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .metodologia_como_funciona_solucao{
        ul{
            list-style: none;
            counter-reset: meu-contador;
            padding-left: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
            li{
                counter-increment: meu-contador;
                position: relative;
                margin-bottom: calc(var(--spacing) * 6);
                width: 280px;
                &::before {
                    /* Aqui é onde a mágica acontece */
                    content: counter(meu-contador);
                    position: relative;
                    background-color: color-mix(in oklab, hsl(var(--primary)) 10%, transparent);
                    color: hsl(var(--primary));
                    width: calc(var(--spacing) * 16);
                    height: calc(var(--spacing) * 16);
                    border-radius: var(--radius-2xl);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin: 0 auto;
                    font-size: var(--text-2xl);
                    line-height: var(--tw-leading, var(--text-2xl--line-height));
                    --tw-font-weight: var(--font-weight-bold);
                    font-weight: var(--font-weight-bold);
                    margin-bottom: calc(var(--spacing) * 6);
                }
            }
        }
    }
}
.faqs{
    h3{
        margin: 0 !important;
        button{
            cursor: pointer;
        }
    }
}

.seguranca_controlo_remoto{
    img, svg{
        width: 24px;
        height: 24px;
        object-fit: contain;
    }
}