h2 {
    font-size: 40px;
    line-height: 48px;
    font-weight: bold;
    margin-bottom: 24px;
}

.benefits-section ul, .synched-data-section ul {
    margin: 0;
    padding: 0;
    position: relative;
    list-style: none;
    margin-left: 28px;
}

    .benefits-section ul li::before, .synched-data-section ul li::before {
        content: " ";
        background-color: #006940;
        border-radius: 50%;
        display: inline-block;
        height: 4px;
        width: 4px;
        margin-right: 8px;
        margin-bottom: 5px;
        margin-left: -12px;
    }

.banner {
    padding: 90px 0px;
}

    .banner .page_subtitle_large {
        font-size: 40px;
        line-height: 48px;
        margin-bottom: 16px;
        font-weight: bold;
        color: #FFFFFF;
    }

    .banner .page_subtitle {
        font-size: 20px;
        line-height: 32px;
    }

.breadcrumb-container {
    margin-bottom: 48px;
}

.definition-section {
    text-align: center;
    margin-bottom: 136px;
}

    .definition-section .content {
        max-width: 970px;
        margin: 0px auto 44px auto;
    }

    .definition-section .video-container {
        max-width: 750px;
        margin: 0px auto;
    }

.compatible-systems-section {
    background: linear-gradient(309deg, #D1E7DD 0%, #FFFFFF 100%);
    box-shadow: 0px 3px 6px #00000029;
    padding: 108px 0px;
    text-align: center;
    margin-bottom: 108px;
}

    .compatible-systems-section .text-content {
        margin-bottom: 48px;
    }

    .compatible-systems-section .image-container {
        background-size: contain;
    }

        .compatible-systems-section .image-container.non-mobile {
            max-width: 1055px;
            margin: 0px auto;
            aspect-ratio: 1055 / 838;
        }

    .compatible-systems-section .list-container {
        background-color: #FFFFFF;
        border-radius: 8px;
        padding: 24px 27px 36px;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 112px;
        margin-top: -200px;
    }

        .compatible-systems-section .list-container .list-label {
            font-size: 18px;
            font-weight: bold;
            color: #005031;
            margin-bottom: 20px;
        }

    .compatible-systems-section .footer-content-container {
        background: linear-gradient(98deg, #1F6542 0%, #0B5D5D 100%);
        box-shadow: 0px 3px 8px #00000029;
        border: 1px solid #E5E5E5;
        border-radius: 8px;
        color: #FFFFFF;
        font-size: 18px;
        line-height: 28px;
        padding: 36px 124px;
    }

        .compatible-systems-section .footer-content-container a {
            color: #FFFFFF;
        }

.list-selector-placeholder {
    height: 40px;
    width: 365px;
}

.list-selector-container {
    width: 365px;
    height: 40px;
    font-size: 18px;
    line-height: 21px;
    padding: 10px 16px;
    background-color: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    margin: 0px 0px 0px auto;
    text-align: left;
    overflow: hidden;
    position: absolute;
    top: 0px;
    z-index: 20;
    transition: all .5s;
}

    .list-selector-container ul {
        list-style: none;
        padding-inline-start: 0px;
        margin: 0px;
    }

    .list-selector-container li:not(:last-of-type) {
        margin-bottom: 24px;
    }

    .list-selector-container .clickable {
        cursor: pointer;
    }

    .list-selector-container .arrow-container {
        display: block;
        width: 16px;
        height: 10px;
        position: absolute;
        top: 15px;
        right: 15px;
        background-image: url(/wp-content/themes/wp-bootstrap-starter-eri/inc/assets/images/grey-arrow-down-small.svg);
        transition: all .5s;
    }

    .list-selector-container .coming-soon {
        color: #9E9E9E;
    }

.benefits-section {
    box-shadow: 0px 3px 8px #00000029;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    text-align: left;
    padding: 108px 72px 124px;
    margin-bottom: 136px;
}

    .benefits-section li {
        margin-bottom: 16px;
    }

    .benefits-section .item-label {
        font-weight: bold;
    }

.comparison-section {
    padding: 120px 0px 136px;
    color: white;
    text-align: center
}

    .comparison-section h2 {
        color: #FFFFFF;
        margin-bottom: 68px;
    }

.synched-data-section {
    background: linear-gradient(299deg, #D1E7DD 0%, #FFFFFF 100%);
    padding: 180px 0px 294px;
}

    .synched-data-section .left-col {
        padding-right: 48px;
        display: grid;
        align-items: center;
    }

    .synched-data-section .fields-list-container {
        background-color: #FFFFFF;
        box-shadow: 0px 3px 8px #00000029;
        border: 1px solid #E5E5E5;
        border-radius: 8px;
        padding: 40px 72px 30px;
    }

    .synched-data-section .fields-list-label {
        font-size: 24px;
        line-height: 28px;
        color: #005031;
        font-weight: bold;
        padding-bottom: 8px;
        border-bottom: 4px solid #559D3F;
        margin-bottom: 24px;
    }

    .synched-data-section ul li {
        font-size: 18px;
        line-height: 32px;
        font-weight: bold;
    }

.popular-features-section {
    margin-bottom: 80px;
    text-align: center;
}

    .popular-features-section h2 {
        margin-bottom: 64px;
    }

    .popular-features-section .section-container {
        display: table;
        text-align: left;
        margin: 0 auto;
        max-width: 1100px;
    }

    .popular-features-section .image-container, .popular-features-section .content-container {
        display: table-cell;
        width: 50%;
        vertical-align: top;
    }

    .popular-features-section .content-container {
        padding-top: 64px;
    }

    .popular-features-section .image-container {
    }

    .popular-features-section .popularfeature-image:not(.active), .popular-features-section .item-container:not(.active) .content {
        display: none;
    }

    .popular-features-section .items-container {
        border-left: 1px solid #707070;
        padding-right: 32px;
        margin-bottom: 24px;
    }

    .popular-features-section .item-container {
        padding-left: 24px;
    }

        .popular-features-section .item-container:not(:last-of-type) {
            margin-bottom: 40px;
        }

        .popular-features-section .item-container.active {
            border-left: 4px solid #559D3F;
            transition: 0.2s;
        }

        .popular-features-section .item-container h3 {
            font-size: 24px;
            line-height: 28px;
            font-weight: bold;
            cursor: pointer;
            margin-bottom: 8px;
        }

        .popular-features-section .item-container .h3:hover, .popular-features-section .item-container.active h3 {
            color: #559D3F;
            transition: 0.2s;
        }

    .popular-features-section .button-container {
        margin-left: 24px;
    }

.cta-section {
    box-shadow: 0px 3px 8px #00000029;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    padding: 56px 64px;
    margin-bottom: 204px;
}

    .cta-section .right-col {
        display: grid;
        align-items: center;
    }

    .cta-section h3 {
        font-size: 24px;
        line-height: 28px;
        margin-bottom: 16px;
    }

    .cta-section .content {
        font-size: 16px;
        line-height: 22px;
    }

    .cta-section a.btn-light-blue {
        background-color: #C0E0FA;
        color: #005A9E;
        width: 295px;
        float: right;
    }

@media (max-width: 1199px) {
    .compatible-systems-section .list-container {
        margin-top: -180px;
    }

    .compatible-systems-section .footer-content-container {
        padding: 36px 60px;
    }

    .benefits-section {
        padding: 72px 48px;
    }
}

@media (max-width: 991px) {
    .compatible-systems-section .list-container {
        margin-top: -150px;
    }

    .compatible-systems-section .footer-content-container {
        padding: 32px 48px;
    }

    .comparison-section {
        padding: 72px 0px;
    }

    .benefits-section .content {
        margin-bottom: 36px;
    }

    .benefits-section img {
        width: 100%;
    }

    .synched-data-section .fields-list-container {
        padding: 32px 24px 24px;
    }

    .cta-section .image-container {
        margin-bottom: 42px;
    }
}

@media (min-width: 768px) {
    .cta-section .button-container a:first-of-type {
        padding: 11px;
        width: calc(50% - 12px);
    }

    .cta-section .button-container a:last-of-type {
        max-width: calc(50% - 12px);
    }
}

@media (max-width: 767px) {
    .banner {
        padding: 52px 0px 40px 0px;
    }

        .banner h1 {
            font-size: 40px;
            line-height: 47px;
            text-shadow: 0px 0px 8px #1C1C1C84;
            padding: 0px 0px 8px 0px;
        }

        .banner .page_subtitle_large {
            font-size: 24px;
            line-height: 32px;
        }

        .banner .page_subtitle {
            font-size: 16px;
            line-height: 24px;
            margin-bottom: 32px;
        }

    .compatible-systems-section .list-container {
        margin-top: 24px;
        margin-bottom: 42px;
    }

    .compatible-systems-section .footer-content-container {
        padding: 32px 36px;
    }

    .synched-data-section {
        padding: 72px 0px 96px;
    }

        .synched-data-section .left-col {
            margin-bottom: 21px;
        }

    .curve-up-buffer {
        height: 24px;
        margin-top: -24px;
    }

    .popular-features-section {
        padding-top: 72px;
    }

        .popular-features-section .content-container {
            padding-top: 0px;
        }

    .cta-section .button-container {
        text-align: center;
    }

        .cta-section .button-container a:last-of-type {
            margin-top: 20px;
            float: none;
        }
}

@media (max-width: 576px) {
    h2 {
        font-size: 32px;
        line-height: 38px;
        margin-bottom: 16px;
    }

    .definition-section {
        margin-bottom: 72px;
    }

        .definition-section .content {
            margin-bottom: 32px;
        }

    .compatible-systems-section {
        padding: 56px 0px 48px;
    }

        .compatible-systems-section .text-content {
            margin-bottom: 24px;
        }

        .compatible-systems-section .image-container.mobile {
            width: 100%;
            aspect-ratio: 340 / 270;
        }

        .compatible-systems-section .list-container {
            margin-left: 0px;
            margin-right: 0px;
            width: 100%;
        }

        .compatible-systems-section .footer-content-container {
            padding: 32px 24px;
        }

    .list-container
    .list-selector-container, .list-selector-placeholder {
        width: 100%;
    }

    .benefits-section {
        padding: 36px 24px 42px;
        margin-bottom: 72px;
    }

    .comparison-section h2 {
        margin-bottom: 27px;
    }

    .synched-data-section {
        padding: 72px 0px 56px;
    }

    .popular-features-section {
        padding-top: 72px;
        margin-bottom: 72px;
    }

    .cta-section {
        padding: 32px 24px 36px;
        margin-bottom: 124px;
    }

        .cta-section a.btn-light-blue {
            display: inline-block;
            width: 100%;
            margin-top: 20px;
        }
}