.about-section {
    padding: var(--space-2xl) var(--space-m);
    max-width: var(--container);
    margin: auto;

    .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-l);
        padding: 0px;

        &.no-faqs {
            grid-template-columns: 1fr;
        }

        @media(max-width: 768px) {
            grid-template-columns: 1fr;
            gap: var(--space-l);
        }

        .about {
            display: flex;
            flex-direction: column;
            gap: var(--space-l);

            @media(max-width: 768px) {
                order: 2;
            }

            h2 {
                font-size: var(--fs-xl);
                color: var(--color-light-dark);
            }

            p {
                color: var(--color-secondary);
            }

            nav {
                ul {
                    list-style: none;
                    margin: 0px;
                    padding: 0px;
                    display: flex;
                    flex-direction: column;
                    gap: var(--space-m);

                    li {
                        display: flex;
                        gap: var(--space-s);
                        align-items: center;

                        ul {
                            display: none;
                        }

                        a {
                            color: var(--color-light);
                            transition: all 0.3s;
                            position: relative;

                            &:after {
                                content: " ";
                                position: absolute;
                                left: 0px;
                                right: 100%;
                                bottom: -5px;
                                height: 2px;
                                background-color: var(--color-primary);
                                transition: all 0.3s;
                            }

                            &:hover {
                                &:after {
                                    left: 0px;
                                    right: 0px;
                                }
                            }
                        }
                    }
                }
            }

        }

        .faqs {
            display: flex;
            flex-direction: column;
            background-color: var(--color-secondary);
            position: relative;
            padding: var(--space-l);

            &:after {
                content: "";
                position: absolute;
                left: -10px;
                top: -10px;
                right: 10px;
                bottom: 10px;
                border: 1px solid var(--color-primary);
                z-index: -1;

                @media(max-width: 768px) {
                    left: 10px;
                }
            }
        }
    }
}