.elementor-widget-faq-widget {
    margin-top: 100px;
    margin-bottom: 100px !important;

    .faq-accordion {
        padding-left: 64px;
        padding-right: 64px;
        display: grid;
        gap: 2rem;

        @media screen and (min-width: 1024px) {
            grid-template-columns: 1fr 1fr;
        }

        & .text-column {
            width: clamp(320px, 75%, 500px);
            display: flex;
            flex-direction: column;

            .content-block {
                margin-top: auto;
            }

            & .map-vertical-text {
                height: 420px;
                text-align: right;
            }

            &.vertical-above {
                flex-direction: column;
            }

            &.vertical-side {
                flex-direction: row;
                width: 100%;
                max-width: unset;
                column-gap: 20%;

                & .content-block {
                    margin-top: unset;
                    width: 310px;
                }
            }
        }

        & .faq-column {
            display: flex;
            flex-direction: column;
            gap: 12px;

            & .faq-item {
                border-radius: var(--map-rd-corner);
                background: var(--Neutral-80);

                & button.faq-trigger {
                    appearance: none;
                    width: 100%;
                    text-align: left;
                    background: transparent;
                    border: 0;
                    padding: 1rem 20px;
                    display: grid;
                    grid-template-columns: 1fr auto;
                    align-items: center;
                    gap: 0.5rem;
                    font: inherit;
                    color: inherit;
                    cursor: pointer;

                    & .faq-arrow {
                        transition: transform 200ms ease;
                    }

                    &[aria-expanded="true"] {
                        & .faq-trigger-text,
                        & .faq-panel-inner {
                            color: var(--Neutral-8) !important;
                        }
                    }

                    &[aria-expanded="true"] .faq-arrow {
                        transform: rotate(180deg);
                    }
                }

                & .faq-panel {
                    display: grid;
                    grid-template-rows: 0fr;
                    overflow: hidden;
                    transition: grid-template-rows 250ms ease-in-out;

                    & .faq-panel-inner {
                        padding: 0 20px;
                        margin-bottom: 0;
                        min-height: 0;
                        transition: visibility 250ms ease-in-out, padding 250ms ease-in-out;
                        visibility: hidden;
                        color: var(--Neutral-8) !important;

                        & .project-tags {
                            display: flex;
                            gap: 10px;
                            flex-wrap: wrap-reverse;
                            margin-top: 80px;

                            div {
                                border: 1px solid var(--Neutral-32);
                                padding: 4px 12px;
                                border-radius: 30px;
                            }
                        }
                    }
                }

                /*the panel-inner open animation*/
                & .faq-panel.extended {
                    grid-template-rows: 1fr;

                    & .faq-panel-inner {
                        visibility: visible;
                        padding: 1rem 20px;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 768px) {
    .elementor-widget-faq-widget {
        margin-top: 64px;
        margin-bottom: 64px;

        & .faq-accordion {
            /*grid-template-columns: 1fr;*/
            padding-left: 10px;
            padding-right: 10px;
            display: flex;
            gap: 2rem;
            flex-direction: column;

            & .text-column {
                width: auto;

                & .map-vertical-text {
                    display: flex;
                    align-items: end;
                    justify-content: end;
                }
            }
        }
    }
}