#intro {
    position: relative;
    padding: 6rem 0;
    background-color: var(--bs-white);
    .title {
        margin-bottom: 3rem;
    }
    .buttons {
        justify-content: center;
        margin-top: 3rem;
        .btn:nth-child(2n) {
            --bs-btn-color: var(--bs-white);
            --bs-btn-bg: var(--bs-secondary);
            --bs-btn-border-color: var(--bs-secondary);
            --bs-btn-hover-color: var(--bs-white);
            --bs-btn-hover-bg: var(--bs-secondary);
            --bs-btn-hover-border-color: var(--bs-secondary);
            --bs-btn-focus-shadow-rgb: 49,132,253;
            --bs-btn-active-color: var(--bs-white);
            --bs-btn-active-bg: var(--bs-secondary);
            --bs-btn-active-border-color: var(--bs-secondary);
            --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
            --bs-btn-disabled-color: var(--bs-white);
            --bs-btn-disabled-bg: var(--bs-secondary);
            --bs-btn-disabled-border-color: var(--bs-secondary);
        }
    }
}

#features {
    --column-gap: 3rem;
    --row-items: 3;
    position: relative;
    padding: 6rem 0 14rem;
    background-color: var(--bs-light);
    .items {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--column-gap);
        .item {
            flex: 1 0 calc(100% / var(--row-items));
            max-width: calc((100% / var(--row-items)) - (var(--column-gap) / var(--row-items)) * (var(--row-items) - 1));
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: var(--bs-white);
            border-radius: var(--bs-border-radius-xl);
            /* overflow: hidden; */
            padding: 1.5rem 2rem;
            text-align: center;
            .button {
                margin-top: auto;
                margin-bottom: -3rem;
                .btn {
                    display: flex;
                    align-items: center;
                    &::after {
                        content: "";
                        display: inline-block;
                        width: 10px;
                        height: 14px;
                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M56.3 66.3c-4.9-3-11.1-3.1-16.2-.3s-8.2 8.2-8.2 14l0 352c0 5.8 3.1 11.1 8.2 14s11.2 2.7 16.2-.3l288-176c4.8-2.9 7.7-8.1 7.7-13.7s-2.9-10.7-7.7-13.7l-288-176zM24.5 38.1C39.7 29.6 58.2 30 73 39L361 215c14.3 8.7 23 24.2 23 41s-8.7 32.2-23 41L73 473c-14.8 9.1-33.4 9.4-48.5 .9S0 449.4 0 432L0 80C0 62.6 9.4 46.6 24.5 38.1z' fill='%23FFF'/%3E%3C/svg%3E");
                        background-position: center;
                        background-repeat: no-repeat;
                        background-size: contain;
                        margin-left: .5rem;
                    }
                }
            }
        }
    }
}

#cta-bar-1 {
    --column-gap: 1rem;
    --row-items: 2;
    position: relative;
    margin-top: -7rem;
    .content {
        .items {
            list-style: none;
            padding: 0;
            margin: 1.5rem 0;
            display: flex;
            flex-wrap: wrap;
            gap: var(--column-gap);
            .item {
                flex: 1 0 calc(100% / var(--row-items));
                max-width: calc((100% / var(--row-items)) - (var(--column-gap) / var(--row-items)) * (var(--row-items) - 1));
                display: flex;
                gap: .75rem;
                > svg {
                    transform: translateY(4px);
                }
                .title {
                    margin-bottom: 0;
                    color: #FFF;
                }
            }
        }
        .btn {
            --bs-btn-padding-x: 0;
            display: flex;
            align-items: center;
            text-decoration: none;
            color: #FFF;
            &::after {
                content: "→";
                display: inline-block;
                margin-left: .5rem;
            }
        }
    }
}

#accordion-1 {
    position: relative;
    padding: 6rem 0;
    background-color: var(--bs-white);
    .title {
        margin-bottom: 2rem;
    }
    .text {
        margin-bottom: 2rem;
    }
}

#cta-bar-2 {
    .content {
        .btn {
            --bs-btn-padding-x: 0;
            display: flex;
            align-items: center;
            text-decoration: none;
            color: #FFF;
            &::after {
                content: "→";
                display: inline-block;
                margin-left: .5rem;
            }
        }
    }
}

#accordion-2 {
    position: relative;
    padding: 6rem 0;
    background-color: var(--bs-white);
    .title {
        margin-bottom: 2rem;
    }
    .text {
        margin-bottom: 2rem;
    }
}