<?php
if ($viewDetails) {
    $content = $viewDetails->content;

    // Remove the leading and trailing paragraph tags and split the content into paragraphs
    $paragraphs = preg_split('/<\/p>\s*<p>/', trim($content, "<p></p>"));

    // Define an array to hold paragraphs dynamically
    $dynamicParagraphs = [];

    // Loop through the paragraphs array and assign dynamically
    foreach ($paragraphs as $index => $paragraph) {
        $dynamicParagraphs["paragraph" . ($index + 1)] = $paragraph;
    }
}
?>


<div class='container-fluid'>

    <div class='row'>
        <div class="col-xs-12 col-sm-12 col-md-6 col-xl-6 col-xxl-6 text_gaps">
            <h2><?= $viewDetails->name ?></h2>
            <hr class="mb-2 d-inline-block hr-1"/>
            <br />
            <p class="pe-5"><?= $dynamicParagraphs['paragraph1'] ?></p>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-6 col-xl-6 col-xxl-6 gx-md-0">
            <di<img src="<?= $this->Url->build(
                !empty($viewDetails->content_images) && isset($viewDetails->content_images[1]->image_path) && $viewDetails->content_images[1]->image_path
                ? $viewDetails->content_images[1]->image_path
                : 'img/noimage.png'
            ) ?>" class="img-fluid" alt="<?= h($viewDetails->title) ?>">

        </div>
    </div>

</div>


<div class='row' style="background-color:#e2eefd;">
    <div class="col-xs-12 col-sm-12 col-md-6 col-xl-6 col-xxl-6 now text_gaps">
        <h2><?= $dynamicParagraphs['paragraph2'] ?></h2>
        <p><?= $dynamicParagraphs['paragraph3'] ?></p>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-6 col-xl-6 col-xxl-6 gx-md-0">
        <div class="aspect-banner-1">
            <img src="<?= $this->Url->build(
                !empty($viewDetails->content_images) && isset($viewDetails->content_images[1]->image_path) && $viewDetails->content_images[1]->image_path
                ? $viewDetails->content_images[1]->image_path
                : 'img/noimage.png'
            ) ?>" class="img-fluid" alt="<?= h($viewDetails->title) ?>">

        </div>
    </div>

</div>

</div>



<div class='container-fluid hts_bg'>
    <div class='container'>
        <div class="text-center pt-2">
            <h2 class="sm-title-text">How to get started</h2>
            <hr class="mb-2 d-inline-block"
                style="width: 70px; padding:1px 0px; z-index:9; margin-top:-20px!important; background-color:#fff;" />
        </div>

        <div class="text-center st-space-top ms-5" style="">Its very easy to open an account with us. Just follow these
            simple steps.</div>


        <div class="row mt-4">



            <div class="col-xs-12 col-sm-12 col-md-3 col-xl-3 col-xxl-3">
                <div class="la_card service-card card-inverse border border-dark pt-3">
                    <div class="text-center">
                        <span class="bi bi-pc-display-horizontal display-4"></span>
                        <p class="mt-3">1. Locate a branch near you</p>
                    </div>
                </div>
            </div>

            <div class="col-xs-12 col-sm-12 col-md-3 col-xl-3 col-xxl-3">
                <div class="la_card service-card card-inverse border border-dark pt-3">
                    <div class="text-center">
                        <span class="bi bi-file-ruled display-4"></span>
                        <p class="mt-3">2. Fill the form</p>
                    </div>
                </div>
            </div>


            <div class="col-xs-12 col-sm-12 col-md-3 col-xl-3 col-xxl-3">
                <div class="service-card card-inverse border border-dark pt-3">
                    <div class="text-center">
                        <span class="bi bi-cash-stack display-4"></span>
                        <p class="mt-3">3. Make an initial deposit</p>
                    </div>
                </div>
            </div>


            <div class="col-xs-12 col-sm-12 col-md-3 col-xl-3 col-xxl-3">
                <div class="la_card service-card card-inverse border-dark border pt-3">
                    <div class="text-center">
                        <span class="bi bi-sunrise display-4"></span>
                        <p class="mt-3">4. Enjoy youur benefits</p>
                    </div>
                </div>
            </div>

        </div>

    </div>

</div>