{% set device = pimcore_device('desktop') %}
<div class="content-row ourServices">
<div class="container row_padding_top content-max-width container">
<div class="one_half">
{% if editmode %}
{{pimcore_input('headingOne',{
"placeholder":"Enter heading"
})}}
{{pimcore_input('headingTwo',{
"placeholder":"Enter heading second"
})}}
</br></br></br>
{{pimcore_link('readMoreLink')}}
{% else %}
<h2 class="has-mask-fill no-margins our-product-N">{{pimcore_input('headingOne')}}</h2>
<h2 class="has-mask-fill our-product-N">{{pimcore_input('headingTwo')}}</h2>
{% endif %}
<hr/>
<p class="has-animation" data-delay="0">
{{pimcore_wysiwyg('serviceDescription',{
"placeholder":"Enter Service Description"
})|raw}}
</p>
<br/>
<div class="button-wrap right button-link large-btn has-animation">
<div class="icon-wrap parallax-wrap">
<div class="button-icon parallax-element">
<i class="fa-solid fa-arrow-right"></i>
</div>
</div>
{% if not editmode %}
{% set link = pimcore_link('readMoreLink') %}
<a class="ajax-link" href="{{link.getHref()}}" data-type="page-transition">
<div class="button-text sticky right">
<span data-hover="Read More">{{link.getText()}}</span>
</div>
</a>
{% endif %}
</div>
</div>
<hr/>
</div>
<hr/>
<hr/>
<!-- Row -->
{# <div class="content-row full change-header-color" data-bgcolor="#fff">
<div class="panels news-panel">
<div class="panels-container">
{% for service in services %}
<div class="panel" data-color="#000" data-firstline="Read" data-secondline="Story">
<div class="panel-content-wrapper">
{% if service.backgroundImage %}
<div class="panel-image">
<a class="ajax-link" href="/service/{{service.url}}" data-type="page-transition">{{service.backgroundImage.thumbnail('641x641').getHtml({imgAttributes: {class: '',alt:service.backgroundImageAltTag}})|raw}}</a>
</div>
{% endif %}
<div class="panel-content">
<div class="entry-meta entry-categories">
<ul class="post-categories">
<li class="link">
<a href="/service/{{service.url}}">
<span data-hover="{{service.tagLine}}">{{service.tagLine}}</span>
</a>
</li>
</ul>
</div>
<div class="news-panel-title">
<span>{{service.name}}</span>
<p class="news-panel-desc" class="has-animation" data-delay="0">
{{service.shortDescription}}
</p>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div> #}
<!--/Row -->
{% if not device.isPhone() %}
<div class="container new-full-container mb-5">
<div class="row">
{% for service in services %}
<div class="col-lg-3" >
<div class="swiperNewImages" onclick="location.href='/service/{{service.url}}';" style="cursor: pointer;">
{% if service.backgroundImage %}
{# <img src="./assets/images/04hero.png" alt="" class="img-fluid"> #}
{{service.backgroundImage.thumbnail('641x641').getHtml({imgAttributes: {class: 'img-fluid',alt:service.backgroundImageAltTag}})|raw}}
{% endif %}
<div class="outerNew">
<div class="img-subtitle">
<span data-hover="{{service.tagLine}}">{{service.tagLine}}</span>
</div>
<div class="img-title">
<span>{{service.name}}</span>
</div>
<div class="img-Desc">
<p>{{service.shortDescription}}
</p>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% if device.isPhone() %}
<!-- Showcase Slider Holder -->
<div id="home-new-carousel" class="full-carousel-holder mobileOnlySlider mobileOnlySliderArrows">
<div id="itemsWrapperLinks">
<div id="showcase-carousel" class="swiper-container homepage-slider-New">
<div id="itemsWrapper" class="swiper-wrapper webgl-fitthumbs fx-one homepage-new-carousel">
{% for service in services %}
<div class="swiper-slide trigger-item" onclick="location.href='/service/{{service.url}}';" style="cursor: pointer;">
<div class="img-mask">
<div class="section-image">
{# <img src="/products/listing%20images/960/image-thumb__960__641x641/safaintranet.jpg" class="item-image grid__item-img" alt=""> #}
{% if service.backgroundImage %}
{{service.backgroundImage.thumbnail('').getHtml({imgAttributes: {class: 'item-image grid__item-img',alt:service.backgroundImageAltTag}})|raw}}
{% endif %}
</div>
</div>
<div class="outer">
<div class="inner">
<div class="slide-subtitle">
<span data-hover="{{service.tagLine}}">{{service.tagLine}}</span>
</div>
<div class="slide-title-wrapper">
<div class="slide-title trigger-item-link" data-color="#95121e" data-firstline="View" data-secondline="Project">
<span>{{service.name}}</span>
<p class="homeSliderDesc-2">
{{service.shortDescription}}
</p>
</div>
<a class="slide-link" data-type="page-transition" href="#"></a>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="showcase-pagination-wrap"></div>
<div class="showcase-pagination"></div>
<!-- Showcase Slider Holder -->
<!-- Footer -->
<footer class="hidden footer-centered-class-icon mobileOnlySlider">
<div
id="footer-container"
class="showcase-absolute-footer"
>
<div class="button-wrap left disable-drag swiper-prev">
<div class="icon-wrap parallax-wrap">
<div class="button-icon parallax-element newArrows">
<i class="fas fa-chevron-circle-left" style="color: #ffffff;"></i>
</div>
</div>
</div>
<div class="button-wrap right disable-drag swiper-next">
<div class="icon-wrap parallax-wrap">
<div class="button-icon parallax-element newArrows">
<i class="fas fa-chevron-circle-right" style="color: #ffffff;"></i>
</div>
</div>
</div>
</div>
</footer>
{% endif %}
<!--/Footer -->
</div>