@push('styles')
<style>
#scroll-container {
  overflow: hidden;
  max-width: 100%;
  margin: auto;
  position: relative;
  min-height: 300px;
}
.wrap-container {
  position: relative;
  max-height: 400px;
  width: 100%;
  max-width: 100%;
  margin: auto;
  /* background: #eee; */
  overflow: auto;
  padding-right: 20px;
  mask: url(#masking);
  /* -webkit-mask-image: -webkit-gradient(linear,top left,bottom right,color-stop(0.5, black), color-stop(1, transparent)); */
  background-color: linear-gradient(red, orange, yellow, green, blue);
  scrollbar-width: none;
  perspective: 50px;
}

.wrap-container::-webkit-scrollbar {
  display: none;
}
.wrap-container ul {
  list-style: none;
  position: relative;
  transition: transform .3s;
  top: 150px;
}
.wrap-container ul, .wrap-container ul li {
  margin: 0;
  padding: 0;
  text-align: center;
}
.wrap-container ul li {
  height: 50px;
  line-height: 40px;
  transition: transform .3s;
  overflow: hidden;
  color: white;
}
.wrap-container ul li:last-child {
    margin-bottom:250px;
}
.wrap-container ul li:last-of-type { padding-bottom: 50px; }
.wrap-container ul li.active .item { transform: scale(2.3); color: var(--main-color);}
.wrap-container ul li .item {
  position: relative;
  transition: transform 200ms;
  display: inline-block;
}
@media only screen and (max-width: 600px) {
    .wrap-container ul li {
    height: 80px;
    line-height: 25px;
    transition: transform .3s;
    overflow: hidden;
    color: white;
    }
    .wrap-container ul li .item {
        font-size: 1em;
    }
    .wrap-container ul li.active .item {
        width:250px; transform: scale(1.5); color: var(--main-color); word-wrap: break-word; overflow-wrap: break-word;
        margin-bottom: 40px;
        margin-top: 10px
    }
}
</style>
@endpush
<div class="section_inner" id="whatweoffer">
    <div class="container-fluid" >
        <div class="row">
            <div class="col-12 d-flex justify-content-center">
                <div class="vl">
                    <h1 class="name super-h1">
                        WHAT WE OFFER?
                    </h1>
                </div>
            </div>
        </div>
        <div class="row">

        </div>
        <div id="scroll-container">
            <div class="wrap-container" id="wrap-scroll">
                <svg>
                    <defs>
                      <linearGradient id="gradient" x1="0" y1="0%" x2 ="0" y2="50%">
                        <stop stop-color="black" offset="0"/>
                        <stop stop-color="white" offset="1"/>
                      </linearGradient>
                      <mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
                        <rect y="0" width="1" height="1" fill="url(#gradient)" />
                      </mask>
                    </defs>
                </svg>
              <ul id="ul-scroll">
                <li class="active"><span class="item">Website / Web application</span></li>
                <li><span class="item">Mobile application Development</span></li>
                <li><span class="item">Game Design and Development</span></li>
                <li><span class="item">UX/UI Design and Development</span></li>
                <li><span class="item">AR/VR/MR Application</span></li>
                <li><span class="item">Metaverse Platform Development</span></li>
                <li><span class="item">Graphic Design / NFT Marketing</span></li>
                <li><span class="item">Interactive Product design</span></li>
                <li><span class="item">Animation 2D/3D development</span></li>
                <li><span class="item">Game Assets Design and Development</span></li>
                <li><span class="item">Video Content Creator</span></li>
                <li><span class="item">Visual Effect Development</span></li>
                <li><span class="item">IT/Digital Solution</span></li>
                <li><span class="item">Training Services</span></li>
              </ul>
            </div>
        </div>

    </div>
</div>

@push('scripts')
<script>
    var scrollW = document.getElementById('wrap-scroll');
var scrollUl = document.getElementById('ul-scroll');
var itemsScrolled, itemsMax, cloned = false;
var listOpts = {
    itemCount: null,
    itemHeight: null,
    items: []
};
function scrollWrap() {
    itemsScrolled = Math.ceil((this.scrollTop + listOpts.itemHeight / 2) / listOpts.itemHeight);
    if (this.scrollTop < 1) {
        itemsScrolled = 0;
    }
    listOpts.items.forEach(function (ele) {
        ele.classList.remove('active');
    });
    if (itemsScrolled < listOpts.items.length) {
        listOpts.items[itemsScrolled].classList.add('active');
    }
    if (itemsScrolled > listOpts.items.length - 3) {
        for (_x = 0; _x <= itemsMax - 1; _x++) {
            if (window.CP.shouldStopExecution(1)) {
                break;
            }
            var node = listOpts.items[_x];
            if (!cloned) {
                node = listOpts.items[_x].cloneNode(true);
            }
            scrollUl.appendChild(node);
        }
        initItems(cloned);
        cloned = true;
        itemsScrolled = 0;

        window.CP.exitedLoop(1);
    }
}
function initItems(scrollSmooth) {
    listOpts.items = [].slice.call(scrollUl.querySelectorAll('li'));
    listOpts.itemHeight = listOpts.items[0].clientHeight;
    listOpts.itemCount = listOpts.items.length;
    if (!itemsMax) {
        itemsMax = listOpts.itemCount;
    }
    if (scrollSmooth) {
        var seamLessScrollPoint = (itemsMax - 3) * listOpts.itemHeight;
        scrollW.scrollTop = seamLessScrollPoint;
    }
}
document.addEventListener('DOMContentLoaded', function (event) {
    initItems();
    scrollW.onscroll = scrollWrap;
});
</script>
@endpush