{{-- Solar Benefits Start --}}

<section id="rooftop-solar-benefits">
    <div class="content-wrap-md">
        <div class="container clearfix">
            <div class="container row align-items-stretch clearfix" style="height: fit-content;">
                <!-- Left Column with Title and Benefits -->
                <div class="col-lg-6 nopadding">
                    <div class="new_pages">
                        <p class="mid" style="font-size: 35px; font-weight: 700; color: black;">ROOFTOP SOLAR</p>
                        <p class="last" style="font-size: 55px; font-weight: 950; color: rgb(0, 0, 0);">Benefits</p>
                    </div>
                    <div class="row">
                        <!-- Benefit 1 -->
                        <div class="col-sm-6 mb-2 mb-sm-2">
                            <div class="benefits_card new_pages">
                                <div class="card-body-benefits">
                                    <img src="/assets/front/img/homepage_banners/affordable.png" class="i-alt noborder" style="max-width: 25%" />
                                    <p style="color: rgb(54, 23, 113); margin: 10px;">Affordable Interest Rates</p>
                                    <p>Get competitive interest rates to make solar financing budget-friendly.</p>
                                </div>
                            </div>
                        </div>
                        <!-- Benefit 2 -->
                        <div class="col-sm-6 mb-2 mb-sm-2">
                            <div class="benefits_card new_pages">
                                <div class="card-body-benefits">
                                    <img src="/assets/front/img/homepage_banners/flexible_tenure.png" class="i-alt noborder" style="max-width: 25%" />
                                    <p style="color: rgb(54, 23, 113); margin: 10px;">Flexible Repayment Tenures</p>
                                    <p>Choose repayment tenures that suit your financial flexibility.</p>
                                </div>
                            </div>
                        </div>
                        <!-- Benefit 3 -->
                        <div class="col-sm-6 mb-2 mb-sm-2">
                            <div class="benefits_card new_pages">
                                <div class="card-body-benefits">
                                    <img src="/assets/front/img/homepage_banners/quick_loan_approval.png" class="i-alt noborder" style="max-width: 25%" />
                                    <p style="color: rgb(54, 23, 113); margin: 10px;">Quick Loan Approvals</p>
                                    <p>Enjoy hassle-free and quick approvals to get started with your solar journey.</p>
                                </div>
                            </div>
                        </div>
                        <!-- Benefit 4 -->
                        <div class="col-sm-6 mb-2 mb-sm-2">
                            <div class="benefits_card new_pages">
                                <div class="card-body-benefits">
                                    <img src="/assets/front/img/homepage_banners/no_hidden_charges.png" class="i-alt noborder" style="max-width: 25%" />
                                    <p style="color: rgb(54, 23, 113); margin: 10px;">No Hidden Charges</p>
                                    <p>Transparent financing with no hidden charges ensures peace of mind.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Right Column with Image -->
                <div class="col-lg-6" style="align-content: center;">
                    <img src="/assets/front/img/homepage_banners/benefits_side.png" style="max-width:135%"/>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Solar Benefits End --}}