.faq-page {

    .faq-category-nav {

        margin: 100px 220px 50px;

        .cat-nav-items {
            margin: 25px 0px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            row-gap: 20px;
            column-gap: 50px;

            .faq-btn-scroll-to {
                background-color: transparent;
                border: none;
                cursor: pointer;
            }

            .cat-item {
                color: var(--couleur-6);
                padding: 15px 0px;
                font-size: 16px;
                font-family: var(--font-gotham);
                background-color: transparent;
                border: none;

                &.selected {
                    color: var(--couleur-4);
                    border: 1px solid var(--couleur-4);
                    font-weight: 700;
                    padding: 15px 25px;
                }

                + .cat-item {
                    /*margin-left: 50px;*/
                }
            }
        }

    }

    .faq-category-content {
        margin: 0px 222px 75px;

        .faq-category-title {
            font-size: 50px;
            font-weight: 700;
            margin-bottom: 15px;
        }

        .faq-category-description {
            font-family: "Gotham";
            line-height: 20px;
            margin-bottom: 30px;
        }

        .faq-question-list {
            display: flex;
            flex-wrap: wrap;
            column-gap: 50px;

            .faq-col {
                display: flex;
                flex-direction: column;
                flex: 0 1 calc(50% - 25px);
                row-gap: 20px;

            }

            .faq-question {
                border: 1px solid var(--couleur-5);
                padding: 25px 30px;

                .faq-question-title {
                    color: var(--couleur-4);
                    line-height: 20px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .thetitle {
                        color: var(--couleur-4);
                        font-family: Gotham;
                        font-size: 16px;
                    }

                    .faq-question-togle {
                        cursor: pointer;
                    }

                }

                .faq-question-answer {
                    color: var(--couleur-6);
                    a {
                        font-size: inherit;
                        text-decoration: underline;
                    }
                }

            }

        }

    }

    .middle-separator {
        height: 2px;
        background-color: #F4EFE8;
    }

}

@media screen and (max-width: 1200px) {
    .faq-page {

        .faq-category-nav {
            margin: 100px 140px 50px;
            .cat-nav-items {
                row-gap: 15px;
                column-gap: 30px;
            }
        }
        .faq-category-content {
            margin: 0px 140px 75px;
        }
    }
}

@media screen and (max-width: 768px) {
    .faq-page {

        .faq-category-nav {
            margin: 50px 20px 35px;
            .the-title {
                text-align: center;
            }
            .cat-nav-items {
                margin-bottom: 35px;
            }
        }

        .faq-category-content {
            margin: 0px 20px 35px;

            .faq-category-title {
                text-align: center;
                margin-bottom: 20px;
            }

            .faq-category-description {
                text-align: center;
                margin-bottom: 20px;
            }

            .faq-question-list {
                gap: 20px;

                .faq-question {
                    flex-basis: 100%;
                    padding: 20px;
                }
            }
        }
    }
}