@model List<ResultServiceDto>

<section class="section novi-background bg-cover section-xl bg-white parallax-scene-js" id="scene">
    <div class="container">
        <div class="row row-50 align-items-center justify-content-md-between">
            <div class="col-md-4 col-lg-3">
                <div class="row row-40 row-md-60">
                    @if (Model != null && Model.Any())
                    {
                        int delay = 0;
                        foreach (var item in Model.Where(x => x.IsActive))
                        {
                            <div class="col-sm-4 col-md-12 col-xl-11 wow fadeInLeft" data-wow-delay="@($"{(delay * 0.05).ToString("0.00")}s")">
                                <article class="box-icon-classic">
                                    <div class="box-icon-classic-header">
                                        <div class="box-icon-classic-icon novi-icon linearicons-apartment"></div>
                                        <h6 class="box-icon-classic-title">
                                            <a href="#">@item.Title</a>
                                        </h6>
                                    </div>
                                    <div class="box-icon-classic-text">@item.SubTitle</div>
                                </article>
                            </div>
                            delay++;
                        }
                    }
                </div>
            </div>

            <!-- Sağ taraf (Form alanı) sabit kalabilir -->
            <div class="col-md-7 col-lg-6">
                <div class="inset-xl-left-35">
                    <h3 class="wow fadeInRight">Sizin için en uygun evi<br>birlikte bulalım</h3>
                    <h6 class="title-style-1 wow fadeInRight" data-wow-delay=".05s">İletişim formumuzu doldurun, en kısa sürede sizlere ulaşalım</h6>
                    <div class="form-style-1 context-dark wow blurIn">
                        <h6 class="title-style-1 wow fadeInRight" data-wow-delay=".05s">
                            <a href="#contacts" style="text-decoration: none; color: inherit;">
                                İletişim Formu
                            </a>
                        </h6>
                    </div>
                </div>
            </div> 
        </div>
    </div>

    <div class="layer-wrap layer-1">
        <div class="layer" data-depth="0.4">
            <img src="~/SeedData/Service_bg.png" alt="" width="694" height="539" />
        </div>
    </div>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        var scene = document.getElementById('scene');
        var parallaxInstance = new Parallax(scene);
    });
</script>