@if(isset($data) && is_array($data) && !empty($data))
<section id="technology" class="background-position-center-top position-relative"
    style="background: url('{{ asset(env('THEME_FOLDER') . '/assets/images/vertical-line-bg-medium-gray.svg') }}'), #232323">
    <div id="particles-02" data-particle="true"
        data-particle-options='{"particles": {"number": {"value": 3,"density": {"enable": true,"value_area": 1000}},"color":{"value":["#ff5b74", "#820f89"]},"shape": {"type": "circle","stroke":{"width":0,"color":"#000000"}},"opacity": {"value": 0.7,"random": false,"anim": {"enable": false,"speed": 2,"sync": false}},"size": {"value": 7,"random": true,"anim": {"enable": false,"sync": true}},"move": {"enable": true,"speed":2,"direction": "right","random": false,"straight": false}},"interactivity": {"detect_on": "canvas","events": {"onhover": {"enable": false,"mode": "repulse"},"onclick": {"enable": false,"mode": "push"},"resize": true}},"retina_detect": false}'
        class="position-absolute top-0px left-0px w-100 z-index-minus-1"></div>
    <div class="container overlap-gap-section">
        <div class="row">

            <!-- start sticky column -->
            <div class="col-lg-6 text-center canvas-trigger">
                <svg id="Layer_1" class="scroll-svg" xmlns="http://www.w3.org/2000/svg" version="1.1"
                    viewBox="0 0 61.7 61.4">
                    <!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192)  -->
                    <defs>
                        <style>
                            .st0 {
                                fill: none;
                                stroke: #545454;
                                stroke-miterlimit: 10;
                                stroke-width: .2px;
                            }
                        </style>
                    </defs>
                    <g id="Amblem">
                        <polygon class="st0 svgpath"
                            points="30.9 50.8 41.1 60.9 61.2 60.9 61.2 40.6 51.2 30.7 30.9 50.8 30.9 50.8" />
                    </g>
                    <polygon class="st0 svgpath"
                        points="51.2 30.7 61.2 20.7 61.2 .5 41.1 .5 30.9 10.6 51.2 30.7 51.2 30.7" />
                    <polygon class="st0 svgpath" points=".5 20.6 10.7 30.7 30.9 10.6 20.7 .5 .5 .5 .5 20.6 .5 20.6" />
                    <polygon class="st0 svgpath"
                        points="20.7 60.9 30.9 50.8 10.7 30.7 .5 40.8 .5 60.9 20.7 60.9 20.7 60.9" />
                </svg>
                <div
                    class="outside-box-left-25 lg-outside-box-left-20 md-outside-box-left-30 position-sticky top-110px">
                    <div class="model-canvas"></div>
                    <span
                        class="fs-300 xxl-fs-300 lg-fs-200 md-fs-275 xs-fs-200 text-gradient-dark-purple-watermelon fw-700 ls-minus-20px position-absolute top-100px d-block z-index-minus-1 text-stroke-white"
                        data-bottom-top="transform:scale(1, 1) translate3d(0px, 0px, 0px);"
                        data-top-bottom="transform:scale(1, 1) translate3d(-300px, 0px, 0px);">Gasell</span>
                </div>
            </div>
            <!-- end sticky column -->
            <div class="col-lg-5 offset-lg-1 text-center text-lg-start"
                data-anime='{ "translateY": [0, 0], "opacity": [0,1], "duration": 1200, "delay": 50, "staggervalue": 150, "easing": "easeOutQuad" }'>
                @foreach($data['content_items'] as $item)
                <div class="mb-15 mt-25 md-mb-5 md-mt-10 svg-trigger">
                    <i class="align-middle icon-double-large mb-25px opacity-6"></i>
                    @if(isset($item['title']) && !empty($item['title']))
                    <span
                        class="fs-90 lg-fs-80 xs-fs-60 fw-800 text-white ls-minus-4px xs-ls-minus-2px d-block mb-25px">{{ $item['title'] }}</span>
                    @endif
                    @if(isset($item['description']) && !empty($item['description']))
                    <div class="w-80 xl-w-90 lg-w-100 mb-35px text-white ">{!! $item['description'] !!}</div>
                    @endif
                </div>
                <div class="d-flex"></div>
                @endforeach
            </div>
        </div>
    </div>

</section>
@endif