.collapsible_content_section {
    width: 100%;
    background: var(--white);

    & .container {
        padding-top: 100px;
        padding-bottom: 100px;

        @media (max-width: 991px) {
            padding-top: 50px;
            padding-bottom: 50px;
        }
    
        & .section_inner {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: space-between;
            flex-wrap: wrap;

            & .text_area {
                @media (min-width: 992px) {
                    flex-basis: 38%;
                }

                @media (max-width: 991px) {
                    width: 100%;
                    margin-bottom: 3rem;
                }

                & span.h2 {
                    font-size: 5rem;
                    font-family: "Aboreto";
                    font-weight: 400;
                    margin: 0 0 5rem;

                    @media (max-width: 991px) {
                        font-size: 3rem;
                        margin: 0;
                    }
                }

                & a {
                    color: var(--primary);
                    font-weight: 700;
                }
            }
            
            & .accordion {
                @media (min-width: 992px) {
                    flex-grow: 1;
                    flex-basis: 58%;
                }

                @media (max-width: 991px) {
                    width: 100%;
                }

                & details[open] summary::after {
                    content: "-";
                }

                & details {
                    & summary {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        align-items: center;
                        cursor: pointer;
                        transition: all .5s ease;
                        border-bottom: 1px solid #BBBBBB;
                        padding: 2rem 0;

                        &:after {
                            content: "+";
                            font-size: 3rem;
                            font-weight: 300;
                            color: var(--text);
                        }

                        & svg {
                            @media (max-width: 991px) {
                                width: 5.5rem;
                            }
                        }

                        & .question {
                            font-size: 2.4rem;
                            font-weight: 400;
                            color: var(--primary);

                            @media (max-width: 991px) {
                                width: 50rem;
                                max-width: 100%;
                                font-size: 1.8rem;
                            }
                        }
                    }
        
                    & .answer {
                        padding: 2rem 0;

                        & p {
                            font-size: 1.8rem;
                            margin: 0 0 1rem;
                            padding: 0;
                            
                            &:last-child {
                                margin-bottom: 0;
                            }

                            & a {
                                font-size: 1.8rem;
                            }
                        }

                        & ul {
                            margin: 0 0 1rem;
                            
                            & li {
                                font-size: 1.8rem;
                                margin: 0;
                            }
                        }
                        
                        & .call_to_action_buttons {
                            margin: 3rem 0 0;
                        }
                    }
                }
            }
        }
    }
}