%PDF-
%PDF-
Mini Shell
Mini Shell
<?php
/* Template Name: HTML */
get_header();
?>
<?php // home page ?>
i4-3d-carousel
<section class="bg-[url('./img/bg-1.jpg')] bg-cover pt-12 md:pt-14 pb-8 md:pb-12 overflow-hidden">
<div class="container">
<div class="pb-8 md:pb-14">
<h1 class="text-center text-white text-4xl lg:text-[3.575rem] font-semibold leading-none mb-4 md:mb-0">The #1 Platform For Fleet Optimization</h1>
<h2 class="text-center text-white text-xl md:text-[1.425rem]">Integrated Information, Intelligent Insight</h2>
</div>
</div>
<div class="max-w-[1450px] mx-auto">
<div class="swiper zoom-carousel mb-40 md:mb-56 overflow-visible">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="relative">
<img class="relative z-0" src="<?php echo get_template_directory_uri(); ?>/img/ship-bg-1.png" />
<img class="z-10 absolute inset-0 md:inset-0 w-full h-full object-contain" src="<?php echo get_template_directory_uri(); ?>/img/ship-1.png" />
<div class="swiper-description duration-300 ease-in-out z-20 absolute inset-0 p-2 md:p-5 bg-white text-sm lg:text-md xl:text-lg text-center xl:leading-tight block md:flex flex-col justify-center opacity-0 overflow-auto">
<p>We support ship owners and charterers with monitoring, analyzing and reducing fuel consumption, through various vessel optimization & bunkering optimization strategies. Our market leading artificial intelligence technology provides both historic and predictive performance insights.</p><a href="#" class="text-i4-blue text-1xl font-semibold mt-2">Read more</a>
</div>
</div>
<p class="absolute w-full text-white text-center text-md md:text-2xl font-semibold leading-[1.1] mt-4 md:mt-8">Achieve <br>compliance and <br>minimize risk</p>
</div>
<div class="swiper-slide">
<div class="relative">
<img class="relative z-0" src="<?php echo get_template_directory_uri(); ?>/img/ship-bg-2.png" />
<img class="z-10 absolute inset-0 md:inset-0 w-full h-full object-contain" src="<?php echo get_template_directory_uri(); ?>/img/ship-2.png" />
<div class="swiper-description duration-300 ease-in-out z-20 absolute inset-0 p-2 md:p-5 bg-white text-sm lg:text-md xl:text-lg text-center xl:leading-tight block md:flex flex-col justify-center opacity-0 overflow-auto">
<p>We support ship owners and charterers with monitoring, analyzing and reducing fuel consumption, through various vessel optimization & bunkering optimization strategies. Our market leading artificial intelligence technology provides both historic and predictive performance insights.</p><a href="#" class="text-i4-blue text-1xl font-semibold mt-2">Read more</a>
</div>
</div>
<p class="absolute w-full text-white text-center text-md md:text-2xl font-semibold leading-[1.1] mt-4 md:mt-8">Improve <br>operational <br>efficiency </p>
</div>
<div class="swiper-slide">
<div class="relative">
<img class="relative z-0" src="<?php echo get_template_directory_uri(); ?>/img/ship-bg-3.png" />
<img class="z-10 absolute inset-0 md:inset-0 w-full h-full object-contain" src="<?php echo get_template_directory_uri(); ?>/img/ship-3.png" />
<div class="swiper-description duration-300 ease-in-out z-20 absolute inset-0 p-2 md:p-5 bg-white text-sm lg:text-md xl:text-lg text-center xl:leading-tight block md:flex flex-col justify-center opacity-0 overflow-auto">
<p>We support ship owners and charterers with monitoring, analyzing and reducing fuel consumption, through various vessel optimization & bunkering optimization strategies. Our market leading artificial intelligence technology provides both historic and predictive performance insights.</p><a href="#" class="text-i4-blue text-1xl font-semibold mt-2">Read more</a>
</div>
</div>
<p class="absolute w-full text-white text-center text-md md:text-2xl font-semibold leading-[1.1] mt-4 md:mt-8">Reduce fuel <br>consumption <br>and emissions</p>
</div>
<div class="swiper-slide">
<div class="relative">
<img class="relative z-0" src="<?php echo get_template_directory_uri(); ?>/img/ship-bg-4.png" />
<img class="z-10 absolute inset-0 md:inset-0 w-full h-full object-contain" src="<?php echo get_template_directory_uri(); ?>/img/ship-4.png" />
<div class="swiper-description duration-300 ease-in-out z-20 absolute inset-0 p-2 md:p-5 bg-white text-sm lg:text-md xl:text-lg text-center xl:leading-tight block md:flex flex-col justify-center opacity-0 overflow-auto">
<p>We support ship owners and charterers with monitoring, analyzing and reducing fuel consumption, through various vessel optimization & bunkering optimization strategies. Our market leading artificial intelligence technology provides both historic and predictive performance insights.</p><a href="#" class="text-i4-blue text-1xl font-semibold mt-2">Read more</a>
</div>
</div>
<p class="absolute w-full text-white text-center text-md md:text-2xl font-semibold leading-[1.1] mt-4 md:mt-8">Identify <br>revenue <br>opportunities</p>
</div>
<div class="swiper-slide">
<div class="relative">
<img class="relative z-0" src="<?php echo get_template_directory_uri(); ?>/img/ship-bg-5.png" />
<img class="z-10 absolute inset-0 md:inset-0 w-full h-full object-contain" src="<?php echo get_template_directory_uri(); ?>/img/ship-5.png" />
<div class="swiper-description duration-300 ease-in-out z-20 absolute inset-0 p-2 md:p-5 bg-white text-sm lg:text-md xl:text-lg text-center xl:leading-tight block md:flex flex-col justify-center opacity-0 overflow-auto">
<p>We support ship owners and charterers with monitoring, analyzing and reducing fuel consumption, through various vessel optimization & bunkering optimization strategies. Our market leading artificial intelligence technology provides both historic and predictive performance insights.</p><a href="#" class="text-i4-blue text-1xl font-semibold mt-2">Read more</a>
</div>
</div>
<p class="absolute w-full text-white text-center text-md md:text-2xl font-semibold leading-[1.1] mt-4 md:mt-8">Aid <br>environmental <br>monitoring</p>
</div>
</div>
<div class="swiper-pagination -mb-36 md:-mb-48"></div>
</div>
<div class="flex justify-center mt-7">
<span class="border-t-i4-pink border-r-transparent border-l-transparent border-b-transparent border-t-[20px] border-l-[20px] border-r-[20px] border-b-0 border-solid w-0 h-0"></span>
</div>
</div>
</section>
i4-paragraph
<section class="pt-12 pb-12 md:pt-[5.2rem] md:pb-[6.5rem] bg-i4-light-grey overflow-hidden">
<div class="container">
<div class="text-center leading-[1.3] md:leading-[1.15] px-4 md:px-14 mx-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Iaculis at erat pellentesque adipiscing commodo. Leo urna molestie at elementum eu facilisis. Eget duis at tellus at urna condimentum mattis pellentesque. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Vel pharetra vel turpis nunc eget lorem dolor. Purus sit amet volutpat consequat mauris nunc congue nisi vitae. Elementum pulvinar etiam non quam lacus. Ipsum dolor sit amet consectetur. Arcu bibendum at varius vel pharetra vel turpis. Laoreet sit amet cursus sit amet dictum sit amet justo. Elementum pulvinar etiam non quam lacus. Ipsum dolor sit amet consectetur. Arcu bibendum at varius vel pharetra vel turpis. Laoreet sit amet cursus sit amet dictum sit amet justo. </p>
</div>
</div>
</section>
i4-video
<section class="pt-12 pb-12 md:pt-[5.2rem] md:pb-[6rem] bg-tonal-dark-blue">
<div class="container">
<h1 class="text-center text-white text-4xl font-semibold leading-none mb-4 md:mb-9">Summary (Header 2)</h1>
<p class="text-center text-white text-xl mb:text-2xl leading-[1.3] md:leading-none mb-8 md:mb-16 px-4 md:px-14">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<div class="relative max-w-[90%] md:max-w-full mx-auto">
<iframe class="relative w-full aspect-video z-10" src="https://www.youtube.com/embed/r9jwGansp1E" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<img class="absolute -left-[48px] -bottom-[20px] w-[160px] md:-left-[350px] md:-bottom-[62px] md:w-[530px] z-0" src="<?php echo get_template_directory_uri(); ?>/img/dots-bg.svg" alt="Video">
</div>
</div>
</section>
i4-tile-multiple
<section class="pt-12 pb-12 md:pt-[6rem] md:pb-[5.5rem] overflow-hidden">
<div class="container">
<h1 class="text-center text-tonal-grey text-4xl font-semibold leading-none mb-9">Latest hub resources</h1>
<div class="grid grid-cols-1 mx-4 md:mx-0 md:grid-cols-3 gap-12 md:gap-4">
<div>
<div class="aspect-square bg-i4-light-grey mb-6">
</div>
<h2 class="text-i4-blue text-3xl font-semibold mb-3 md:mb-6">Header 3</h2>
<p class="leading-[1.3] md:leading-[1.15] mb-6 md:mb-14">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud. </p>
<a href="#" class="btn btn-md">CTA button</a>
</div>
<div>
<div class="aspect-square bg-i4-light-grey mb-6">
</div>
<h2 class="text-i4-blue text-3xl font-semibold mb-3 md:mb-6">Header 3</h2>
<p class="leading-[1.3] md:leading-[1.15] mb-6 md:mb-14">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud. </p>
<a href="#" class="btn btn-md">CTA button</a>
</div>
<div>
<div class="aspect-square bg-i4-light-grey mb-6">
</div>
<h2 class="text-i4-blue text-3xl font-semibold mb-3 md:mb-6">Header 3</h2>
<p class="leading-[1.3] md:leading-[1.15] mb-6 md:mb-14">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud. </p>
<a href="#" class="btn btn-md">CTA button</a>
</div>
</div>
</div>
</section>
i4-summary-overview
<section class="bg-[url('./img/bg-5.jpg')] bg-cover pt-12 pb-12 md:pt-24 md:pb-24 overflow-hidden">
<div class="container">
<div class="text-center">
<h1 class="text-white text-4xl font-semibold leading-none mb-4 md:mb-9">Summary (Header 2)</h1>
<div class="leading-[1.3] text-white text-xl px-4 md:px-20 mx-auto">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<a href="#" class="btn btn-md mt-6 md:mt-12 bg-white color text-tonal-grey">CTA button</a>
</div>
</div>
</section>
<div class="bg-i4-pink h-4"></div>
i4-hero-banner
<?php // services page ?>
<section class="bg-[url('./img/bg-2.jpg')] bg-cover pt-12 pb-12 overflow-hidden">
<div class="container">
<div class="flex items-center flex-col md:flex-row">
<div class="flex flex-col flex-1 text-center md:text-left">
<div class="pr-0 mb-0 md:pr-10 md:mb-10">
<h1 class="text-white text-4xl md:text-5xl lg:text-[4.1rem] font-semibold leading-none">Services</h1>
<div class="text-white mt-4 md:mt-24 max-w-[375px] text-xl leading-[1.3] md:leading-tight">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
<div class="mt-10 md:mt-0 min-w-[200px] md:min-w-0 flex-1">
<div class="aspect-square relative">
<img class="absolute h-full w-auto max-w-none translate-x-[-50%] translate-y-[-50%] left-1/2 top-1/2" src="<?php echo get_template_directory_uri(); ?>/img/service-hero.png" />
</div>
</div>
</div>
</div>
</section>
i4-summary-overview
<section class="pb-12 pt-12 md:pb-20 overflow-hidden">
<div class="container">
<div class="flex justify-center mb-8 md:mb-11">
<span class="border-t-i4-pink border-r-transparent border-l-transparent border-b-transparent border-t-[20px] border-l-[20px] border-r-[20px] border-b-0 border-solid w-0 h-0"></span>
</div>
<div class="text-center">
<h1 class="text-i4-blue text-4xl font-semibold leading-none mb-4 md:mb-9">Overview (Header 2)</h1>
<div class="leading-[1.3] md:leading-tight text-xl md:text-2xl px-4 md:px-12 mx-auto">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</section>
i4-services
<section class="pt-12 pb-12 md:pt-20 md:pb-24 bg-tonal-dark-blue overflow-hidden">
<div class="container">
<div class="text-center">
<h1 class="text-white text-4xl font-semibold leading-none mb-8 md:mb-16">Our services</h1>
<div class="grid grid-cols-2 px-4 md:px-0 gap-x-8 gap-y-8 md:gap-x-16 md:gap-y-16 lg:gap-y-28 lg:gap-x-0">
<div class="flex justify-center">
<div class="max-w-[350px] group">
<div class="relative mb-5 bottom-0 shadow-none group-hover:bottom-5 group-hover:shadow-3xl duration-300 ease-in-out ">
<img class="w-full" src="<?php echo get_template_directory_uri(); ?>/img/service-1.png" alt="">
<div class="absolute inset-0 p-12 bg-white flex flex-col items-center justify-center leading-tight opacity-0 group-hover:opacity-100 duration-300 ease-in-out">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="btn btn-md mt-8">CTA button</a>
</div>
</div>
<h2 class="text-white px-4 md:px-0 text-xl md:text-3xl">Vessel and voyage</h2>
</div>
</div>
<div class="flex justify-center">
<div class="max-w-[350px] group">
<div class="relative mb-5 bottom-0 shadow-none group-hover:bottom-5 group-hover:shadow-3xl duration-300 ease-in-out ">
<img class="w-full" src="<?php echo get_template_directory_uri(); ?>/img/service-2.png" alt="">
<div class="absolute inset-0 p-12 bg-white flex flex-col items-center justify-center leading-tight opacity-0 group-hover:opacity-100 duration-300 ease-in-out">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="btn btn-md mt-8">CTA button</a>
</div>
</div>
<h2 class="text-white px-4 md:px-0 text-xl md:text-3xl">Navigation services</h2>
</div>
</div>
<div class="flex justify-center">
<div class="max-w-[350px] group">
<div class="relative mb-5 bottom-0 shadow-none group-hover:bottom-5 group-hover:shadow-3xl duration-300 ease-in-out ">
<img class="w-full" src="<?php echo get_template_directory_uri(); ?>/img/service-3.png" alt="">
<div class="absolute inset-0 p-12 bg-white flex flex-col items-center justify-center leading-tight opacity-0 group-hover:opacity-100 duration-300 ease-in-out">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="btn btn-md mt-8">CTA button</a>
</div>
</div>
<h2 class="text-white px-4 md:px-0 text-xl md:text-3xl">Bunkering optimization</h2>
</div>
</div>
<div class="flex justify-center">
<div class="max-w-[350px] group">
<div class="relative mb-5 bottom-0 shadow-none group-hover:bottom-5 group-hover:shadow-3xl duration-300 ease-in-out ">
<img class="w-full" src="<?php echo get_template_directory_uri(); ?>/img/service-4.png" alt="">
<div class="absolute inset-0 p-12 bg-white flex flex-col items-center justify-center leading-tight opacity-0 group-hover:opacity-100 duration-300 ease-in-out">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="btn btn-md mt-8">CTA button</a>
</div>
</div>
<h2 class="text-white px-4 md:px-0 text-xl md:text-3xl">Bunkering optimization</h2>
</div>
</div>
</div>
</div>
</div>
</section>
i4-summary-overview
<section class="bg-[url('./img/bg-6.jpg')] bg-cover pt-12 pb-12 md:pt-20 md:pb-24 overflow-hidden">
<div class="container">
<div class="text-center">
<h1 class="text-white text-4xl font-semibold leading-none mb-4 md:mb-8">Want to find out more?</h1>
<div class="leading-[1.3] md:leading-normal text-white text-xl px-4 md:px-20 mx-auto">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<a href="#" class="btn btn-md mt-6 mb:mt-12 bg-white color text-tonal-grey">CTA button</a>
</div>
</div>
</section>
<div class="bg-i4-pink h-4"></div>
i4-hero-banner
<?php // product page ?>
<section class="bg-[url('./img/bg-3.jpg')] bg-cover pt-12 pb-12 overflow-hidden">
<div class="container">
<div class="flex flex-col md:flex-row items-center md:items-stretch">
<div class="flex flex-col flex-1">
<div class="flex flex-col h-full">
<ul class="flex flex-wrap mb-12 md:mb-5 lg:mb-0 justify-center md:justify-start">
<li>
<a href="#" class="text-white">Services</a>
</li>
<li class="before:content-['>'] before:text-white before:pl-2 before:pr-1">
<a href="#" class="text-white">Vessel and voyage optimization</a>
</li>
</ul>
<div class="pr-0 md:pr-10 mb-10 flex-1 flex flex-col justify-center text-center md:text-left">
<h1 class="text-white text-4xl md:text-5xl lg:text-[4.1rem] font-semibold leading-none">Vessel and voyage optimization</h1>
<div class="text-white mt-4 md:mt-6 mb-0 md:mb-6 max-w-[375px] text-xl leading-tight">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
</div>
<div class="flex-1">
<div class="aspect-square relative min-w-[200px]">
<img class="absolute w-full h-auto max-w-none translate-x-[-50%] translate-y-[-50%] left-1/2 top-1/2" src="<?php echo get_template_directory_uri(); ?>/img/vessel-hero.png" />
</div>
</div>
</div>
</div>
</section>
i4-paragraph
<section class="pt-12 pb-12 md:pb-20 overflow-hidden">
<div class="container">
<div class="flex justify-center mb-8 md:mb-16">
<span class="border-t-i4-pink border-r-transparent border-l-transparent border-b-transparent border-t-[20px] border-l-[20px] border-r-[20px] border-b-0 border-solid w-0 h-0"></span>
</div>
<div>
<div class="leading-[1.3] text-xl px-4 md:px-0 columns-1 md:columns-2 gap-0 md:gap-20">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Iaculis at erat pellentesque adipiscing commodo. Leo urna molestie at elementum eu facilisis. Eget duis at tellus at urna condimentum mattis pellentesque. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Vel pharetra vel turpis nunc eget lorem dolor. Purus sit amet volutpat consequat mauris nunc congue nisi vitae. Elementum pulvinar etiam non quam lacus. Ipsum dolor sit amet consectetur.</p>
<p>Arcu bibendum at varius vel pharetra vel turpis. Laoreet sit amet cursus sit amet dictum sit amet justo. Elementum pulvinar etiam non quam lacus. Ipsum dolor sit amet consectetur. Arcu bibendum at varius vel pharetra vel turpis. Laoreet sit amet cursus sit amet dictum sit amet justo. </p>
</div>
</div>
</div>
</section>
i4-video
<section class="relative bg-[url('./img/bg-5.jpg')] bg-cover pt-12 pb-12 md:pt-[6rem] md:pb-[3rem] after:block after:absolute after:h-24 after:w-full after:bg-i4-light-grey after:bottom-0 overflow-hidden">
<div class="container">
<h1 class="text-center text-white text-4xl font-semibold leading-none mb-4 md:mb-8">Summary (Header 2)</h1>
<p class="text-center text-white text-xl md:text-2xl leading-tight mb-8 px-4 md:mb-14 md:px-14">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<div class="relative max-w-[90%] md:max-w-full mx-auto">
<iframe class="relative w-full aspect-video z-10" src="https://www.youtube.com/embed/r9jwGansp1E" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</section>
i4-resources
<section class="pt-12 pb-12 bg-i4-light-grey overflow-hidden">
<div class="container">
<div class="flex flex-col md:flex-row items-center px-4 md:px-0">
<div class="flex-1 flex flex-col items-end relative after:block after:aspect-square after:w-[13%] after:max-w-[90px] after:absolute after:-bottom-[6.5%] after:-right-[4.5%] after:bg-tonal-dark-blue">
<h3 class="relative z-10 flex items-end pb-[10%] -mb-[25%] justify-center aspect-square w-[40%] bg-i4-pink mr-16 text-white text-2xl lg:text-4xl font-bold after:block after:aspect-square after:w-[25%] after:absolute after:-bottom-[11.5%] after:-left-[11.5%] after:border-4 after: border-white">Resources</h3>
<img class="relative z-0 w-full" src="<?php echo get_template_directory_uri(); ?>/img/resources-hero.jpg" alt="Resources">
</div>
<div class="max-w-full md:max-w-[265px] mt-4 md:mt-0 ml-0 md:ml-14 pt-4">
<p class="leading-[1.125]">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<a href="#" class="btn px-10 text-xl mt-6 md:mt-12">Visit hub</a>
</div>
</div>
<div class="mt-8 md:mt-32 max-w-[200px] md:max-w-full mx-auto relative">
<div class="swiper overflow-visible resources-carousel">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#" class="block group">
<span class="block relative">
<img class="relative z-0 w-full max-w-none" src="<?php echo get_template_directory_uri(); ?>/img/research-reports-frame.svg" />
<img class="z-10 absolute w-[30%] aspect-square top-1/2 left-1/2 -translate-y-2/4 -translate-x-2/4 object-contain group-hover:w-[36%] duration-300 ease-in-out" src="<?php echo get_template_directory_uri(); ?>/img/research-reports-icon.svg" />
</span></в>
<p class="text-center text-[1.35rem] font-bold leading-[1.1] mt-5">Research reports</p>
</a>
</div>
<div class="swiper-slide">
<a href="#" class="block group">
<span class="block relative">
<img class="relative z-0 w-full max-w-none" src="<?php echo get_template_directory_uri(); ?>/img/product-sheets-frame.svg" />
<img class="z-10 absolute w-[30%] aspect-square top-1/2 left-1/2 -translate-y-2/4 -translate-x-2/4 object-contain group-hover:w-[36%] duration-300 ease-in-out" src="<?php echo get_template_directory_uri(); ?>/img/product-sheets-icon.svg" />
</span></в>
<p class="text-center text-[1.35rem] font-bold leading-[1.1] mt-5">Product sheets</p>
</a>
</div>
<div class="swiper-slide">
<a href="#" class="block group">
<span class="block relative">
<img class="relative z-0 w-full max-w-none" src="<?php echo get_template_directory_uri(); ?>/img/whitepapers-frame.svg" />
<img class="z-10 absolute w-[30%] aspect-square top-1/2 left-1/2 -translate-y-2/4 -translate-x-2/4 object-contain group-hover:w-[36%] duration-300 ease-in-out" src="<?php echo get_template_directory_uri(); ?>/img/whitepapers-icon.svg" />
</span></в>
<p class="text-center text-[1.35rem] font-bold leading-[1.1] mt-5">Whitepapers</p>
</a>
</div>
<div class="swiper-slide">
<a href="#" class="block group">
<span class="block relative">
<img class="relative z-0 w-full max-w-none" src="<?php echo get_template_directory_uri(); ?>/img/case-studies-frame.svg" />
<img class="z-10 absolute w-[30%] aspect-square top-1/2 left-1/2 -translate-y-2/4 -translate-x-2/4 object-contain group-hover:w-[35%] duration-300 ease-in-out" src="<?php echo get_template_directory_uri(); ?>/img/case-studies-icon.svg" />
</span></в>
<p class="text-center text-[1.35rem] font-bold leading-[1.1] mt-5">Case studies</p>
</a>
</div>
</div>
</div>
<div class="swiper-button-next resources-carousel-next -mt-12 -right-12 xl:-right-24 text-i4-pink"></div>
<div class="swiper-button-prev resources-carousel-prev -mt-12 -left-12 xl:-left-24 text-i4-pink"></div>
</div>
</div>
</section>
i4-summary-overview
<section class="bg-[url('./img/bg-6.jpg')] bg-cover pt-12 pb-12 md:pt-20 md:pb-24 overflow-hidden">
<div class="container">
<div class="text-center">
<h1 class="text-white text-4xl font-semibold leading-none mb-4 md:mb-8">Want to find out more?</h1>
<div class="leading-[1.3] md:leading-normal text-white text-xl px-4 md:px-20 mx-auto">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<a href="#" class="btn btn-md mt-6 mb:mt-12 bg-white color text-tonal-grey">CTA button</a>
</div>
</div>
</section>
<div class="bg-i4-pink h-4"></div>
i4-hero-banner
<?php // resources hub ?>
<section class="bg-[url('./img/bg-4.jpg')] bg-cover pt-12 pb-12 md:pb-10 overflow-hidden">
<div class="container">
<div class="flex flex-col md:flex-row items-center md:items-stretch">
<div class="flex flex-col flex-1">
<div class="flex flex-col h-full">
<div class="pr-0 md:pr-10 mb-10 md:mb-40 flex-1 flex flex-col justify-center text-center md:text-left">
<h1 class="text-white text-4xl md:text-5xl lg:text-[4.1rem] font-semibold leading-none">i4 Knowledge <br>Hub</h1>
</div>
</div>
</div>
<div class="flex-1">
<div class="aspect-square relative min-w-[200px]">
<img class="absolute h-[117%] w-auto max-w-none -translate-x-[50%] -translate-y-[50%] md:-translate-x-[48%] md:-translate-y-[51%] left-1/2 top-1/2" src="<?php echo get_template_directory_uri(); ?>/img/hub-hero.png" />
</div>
</div>
</div>
</div>
</section>
i4-resources-filter
<section class="overflow-hidden">
<div class="container">
<ul class="flex flex-wrap md:flex-nowrap">
<li class="flex-1 mt-3 md:mt-0">
<a href="#" class="inline-block px-6 pt-3 md:pt-5 pb-3 whitespace-nowrap text-md lg:text-xl font-semibold relative text-tonal-grey before:block before:absolute before:left-0 before:top-0 before:bottom-0 before:w-2 before:bg-i4-blue before:duration-300 before:ease-in-out hover:before:w-full hover:before:bg-i4-pink hover:text-white"><span class="relative z-10">Events</span></a>
</li>
<li class="flex-1 mt-3 md:mt-0">
<a href="#" class="inline-block px-6 pt-3 md:pt-5 pb-3 whitespace-nowrap text-md lg:text-xl font-semibold relative text-tonal-grey before:block before:absolute before:left-0 before:top-0 before:bottom-0 before:w-2 before:bg-i4-blue before:duration-300 before:ease-in-out hover:before:w-full hover:before:bg-i4-pink hover:text-white"><span class="relative z-10">Product sheets</span></a>
</li>
<li class="flex-1 mt-3 md:mt-0">
<a href="#" class="inline-block px-6 pt-3 md:pt-5 pb-3 whitespace-nowrap text-md lg:text-xl font-semibold relative text-tonal-grey before:block before:absolute before:left-0 before:top-0 before:bottom-0 before:w-2 before:bg-i4-blue before:duration-300 before:ease-in-out hover:before:w-full hover:before:bg-i4-pink hover:text-white"><span class="relative z-10">Case studies</span></a>
</li>
<li class="flex-1 mt-3 md:mt-0">
<a href="#" class="inline-block px-6 pt-3 md:pt-5 pb-3 whitespace-nowrap text-md lg:text-xl font-semibold relative text-tonal-grey before:block before:absolute before:left-0 before:top-0 before:bottom-0 before:w-2 before:bg-i4-blue before:duration-300 before:ease-in-out hover:before:w-full hover:before:bg-i4-pink hover:text-white"><span class="relative z-10">Whitepapers</span></a>
</li>
<li class="flex-1 mt-3 md:mt-0">
<a href="#" class="inline-block px-6 pt-3 md:pt-5 pb-3 whitespace-nowrap text-md lg:text-xl font-semibold relative text-tonal-grey before:block before:absolute before:left-0 before:top-0 before:bottom-0 before:w-2 before:bg-i4-blue before:duration-300 before:ease-in-out hover:before:w-full hover:before:bg-i4-pink hover:text-white"><span class="relative z-10">Research reports</span></a>
</li>
</ul>
<div class="mt-8 md:mt-32 mb-4 md:mb-14 relative after:block after:aspect-square after:w-24 after:absolute after:-bottom-20 after:-left-80 after:border-8 after:border-[#2CD5C4] z-10">
<h3 class="text-xl md:text-3xl font-semibold text-i4-light-blue mb-4 md:mb-9">I’m looking for assistance with…</h3>
<div class="flex flex-col md:flex-row relative">
<div class="mb-4 md:mb-0 w-full md:w-80 relative mr-0 md:mr-14">
<button class="custom-select-trigger text-tonal-grey w-full pl-3 md:pl-7 pr-2 md:pr-3 pt-2 md:pt-5 pb-2 md:pb-2 text-xl md:text-2xl flex items-center bg-i4-light-grey" type="button"><span class="flex-1 text-left whitespace-nowrap min-w-0 text-ellipsis overflow-hidden">Select</span> <i class="fa-solid fa-chevron-down ml-2 mb-0 md:mb-2 w-6 md:w-10 text-center inline-block text-xl md:text-4xl"></i></button>
<div class="custom-select-list hidden z-10 w-full ">
<ul class="relative text-tonal-grey bg-i4-light-grey -top-3 pt-4 pb-8 w-full">
<li>
<button class="block text-lg px-7 py-[0.2rem] text-left w-full hover:text-i4-pink">Fuel consumption and emissions</button>
</li>
<li>
<button class="block text-lg px-7 py-[0.2rem] text-left w-full hover:text-i4-pink">Revenue opportunities</button>
</li>
<li>
<button class="block text-lg px-7 py-[0.2rem] text-left w-full hover:text-i4-pink">Environmental monitoring</button>
</li>
<li>
<button class="block text-lg px-7 py-[0.2rem] text-left w-full hover:text-i4-pink">Operational efficiency</button>
</li>
<li>
<button class="block text-lg px-7 py-[0.2rem] text-left w-full hover:text-i4-pink">Risk and compliance</button>
</li>
<li>
<button class="block text-lg px-7 py-[0.2rem] text-left w-full hover:text-i4-pink">Vessel optimization</button>
</li>
<li>
<button class="block text-lg px-7 py-[0.2rem] text-left w-full hover:text-i4-pink">Voyage optimization</button>
</li>
<li>
<button class="block text-lg px-7 py-[0.2rem] text-left w-full hover:text-i4-pink">Navigational optimization</button>
</li>
<li>
<button class="block text-lg px-7 py-[0.2rem] text-left w-full hover:text-i4-pink">Bunkering optimization</button>
</li>
<li>
<button class="block text-lg px-7 py-[0.2rem] text-left w-full hover:text-i4-pink">Chartering optimization</button>
</li>
</ul>
</div>
</div>
<div class="mb-4 md:mb-0 w-full md:w-80 relative mr-0 md:mr-14">
<button class="custom-select-trigger text-tonal-grey w-full pl-3 md:pl-7 pr-2 md:pr-3 pt-2 md:pt-5 pb-2 md:pb-2 text-xl md:text-2xl flex items-center bg-i4-light-grey" type="button"><span class="flex-1 text-left whitespace-nowrap min-w-0 text-ellipsis overflow-hidden">Resource type</span> <i class="fa-solid fa-chevron-down ml-2 mb-0 md:mb-2 w-6 md:w-10 text-center inline-block text-xl md:text-4xl"></i></button>
<div class="custom-select-list hidden z-10 w-full ">
<ul class="relative text-tonal-grey bg-i4-light-grey -top-3 pt-4 pb-8 w-full">
<li>
<button class="block text-lg px-7 py-[0.2rem] text-left w-full hover:text-i4-pink">Whitepapers</button>
</li>
<li>
<button class="block text-lg px-7 py-[0.2rem] text-left w-full hover:text-i4-pink">Case studies</button>
</li>
<li>
<button class="block text-lg px-7 py-[0.2rem] text-left w-full hover:text-i4-pink">Product sheets</button>
</li>
<li>
<button class="block text-lg px-7 py-[0.2rem] text-left w-full hover:text-i4-pink">Research papers</button>
</li>
</ul>
</div>
</div>
<img class="absolute -right-72 -top-8 w-[91px] z-0" src="<?php echo get_template_directory_uri(); ?>/img/half-square.svg" alt="Half-square">
</div>
</div>
<div class="relative mb-12 lg:mb-72 z-0">
<div id="search-results" class="grid grid-cols-1 lg:grid-cols-2 gap-3 bg-i4-light-grey p-3 relative z-10">
<div class="bg-white py-8 px-5 md:py-8 md:px-9 relative">
<h3 class="text-i4-blue font-semibold text-3xl">Event title</h3>
<div class="max-w-[80%]">
<p class="mb-[0.8rem]">Date and time</p>
<p class="leading-[1.12] mb-5">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud. </p>
<p class="leading-tight">Contact info</p>
<p class="leading-tight">Location</p>
</div>
</div>
<div class="bg-white py-8 px-5 md:py-8 md:px-9 relative">
<p class="absolute right-0 top-0 md:right-3 md:top-3 bg-i4-violet text-white px-3 py-1 leading-tight font-semibold">Press release</p>
<h3 class="text-i4-blue font-semibold text-3xl">Lorem ipsom resource</h3>
<div class="max-w-[80%] mt-1">
<p class="leading-[1.12] mb-5">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud. </p>
<a href="#" class="btn btn-md mt-6">Download</a>
</div>
</div>
<div class="bg-white py-8 px-5 md:py-8 md:px-9 relative">
<h3 class="text-i4-blue font-semibold text-3xl">Event title</h3>
<div class="max-w-[80%]">
<p class="mb-[0.8rem]">Date and time</p>
<p class="leading-[1.12] mb-5">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud. </p>
<p class="leading-tight">Contact info</p>
<p class="leading-tight">Location</p>
</div>
</div>
<div class="bg-white py-8 px-5 md:py-8 md:px-9 relative">
<p class="absolute right-0 top-0 md:right-3 md:top-3 bg-i4-violet text-white px-3 py-1 leading-tight font-semibold">Press release</p>
<h3 class="text-i4-blue font-semibold text-3xl">Lorem ipsom resource</h3>
<div class="max-w-[80%] mt-1">
<p class="leading-[1.12] mb-5">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud. </p>
<a href="#" class="btn btn-md mt-6">Download</a>
</div>
</div>
</div>
<img class="absolute -left-96 -bottom-72 w-[530px] z-0" src="<?php echo get_template_directory_uri(); ?>/img/dots-bg.svg" alt="Dots-bg">
</div>
</div>
</section>
i4-summary-overview
<section class="bg-[url('./img/bg-6.jpg')] bg-cover pt-12 pb-12 md:pt-20 md:pb-24 overflow-hidden">
<div class="container">
<div class="text-center">
<h1 class="text-white text-4xl font-semibold leading-none mb-4 md:mb-8">Want to find out more?</h1>
<div class="leading-[1.3] md:leading-normal text-white text-xl px-4 md:px-20 mx-auto">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<a href="#" class="btn btn-md mt-6 mb:mt-12 bg-white color text-tonal-grey">CTA button</a>
</div>
</div>
</section>
<div class="bg-i4-pink h-4"></div>
i4-hero-banner
<?php // flexible ?>
<section class="bg-[url('./img/bg-5.jpg')] bg-cover pt-12 pb-12 overflow-hidden">
<div class="container">
<div class="flex items-center flex-col md:flex-row">
<div class="flex flex-col flex-1">
<div class="flex flex-col h-full">
<div class="pr-0 mb-0 md:pr-10 md:mb-10 flex-1 flex flex-col justify-center">
<h1 class="text-white text-4xl md:text-5xl lg:text-[4.1rem] font-semibold leading-none">Flexible <br class="hidden md:inline">template</h1>
</div>
</div>
</div>
<div class="mt-10 md:mt-0 min-w-[200px] md:min-w-0 flex-1">
<div class="aspect-square relative">
<img class="absolute h-full w-auto max-w-none translate-x-[-50%] translate-y-[-50%] left-1/2 top-1/2" src="<?php echo get_template_directory_uri(); ?>/img/flex-hero.png" />
</div>
</div>
</div>
</div>
</section>
i4-tile-single
<section class="pt-12 pb-12 md:pt-24 md:pb-20 lg:pb-12 overflow-hidden">
<div class="container">
<div class="flex flex-col md:flex-row relative px-4 md:px-0">
<img class="absolute -right-0 md:-right-2 -bottom-12 md:-bottom-20 w-[50px] md:w-[91px] z-0" src="<?php echo get_template_directory_uri(); ?>/img/half-square-bottom-right.svg" alt="Half-square">
<div class="w-full md:w-1/3 relative mb-8 md:mb-0 z-10">
<div class="aspect-square w-full bg-i4-light-grey relative z-10"></div>
<img class="absolute -left-32 -bottom-6 md:-left-64 md:-bottom-20 w-[160px] md:w-[334px] z-0" src="<?php echo get_template_directory_uri(); ?>/img/dots-bg-2.svg" alt="Dots-bg">
</div>
<div class="flex-0 lg:flex-1 max-w-full md:max-w-[418px] ml-0 md:ml-12 lg:ml-24 z-10">
<h3 class="text-i4-blue text-4xl font-semibold mb-4">Asset name</h3>
<p class="leading-[1.4] text-[1.35rem]">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud. </p>
<a href="#" class="btn px-8 py-3 text-xl mt-6 md:mt-12">Download</a>
</div>
</div>
</div>
</section>
i4-tile-multiple
<section class="pt-12 pb-12 md:pt-40 md:pb-[5.5rem] overflow-hidden">
<div class="container">
<div class="grid px-4 md:px-0 grid-cols-1 md:grid-cols-3 gap-12 lg:gap-28">
<div class="text-center">
<div class="aspect-square bg-i4-light-grey mb-6 md:mb-9">
</div>
<h2 class="text-i4-blue text-3xl font-semibold mb-1">Asset name</h2>
<p class="leading-[1.15] mb-6 md:mb-10">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. </p>
<a href="#" class="btn btn-md">Download</a>
</div>
<div class="text-center">
<div class="aspect-square bg-i4-light-grey mb-6 md:mb-9">
</div>
<h2 class="text-i4-blue text-3xl font-semibold mb-1">Asset name</h2>
<p class="leading-[1.15] mb-6 md:mb-10">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. </p>
<a href="#" class="btn btn-md">Download</a>
</div>
<div class="text-center">
<div class="aspect-square bg-i4-light-grey mb-6 md:mb-9">
</div>
<h2 class="text-i4-blue text-3xl font-semibold mb-1">Asset name</h2>
<p class="leading-[1.15] mb-6 md:mb-10">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. </p>
<a href="#" class="btn btn-md">Download</a>
</div>
</div>
</div>
</section>
i4-tile-single
<section class="pt-12 pb-12 md:pt-24 md:pb-24 overflow-hidden">
<div class="container">
<div class="flex items-center relative flex-col-reverse md:flex-row mx-4 md:mx-0">
<div class="flex-1 mr-0 md:mr-12 lg:mr-24">
<div class="max-w-full md:max-w-[418px]">
<h3 class="text-i4-blue text-4xl font-semibold mb-4">Asset name</h3>
<p class="leading-[1.4] text-xl lg:text-[1.35rem]">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud. </p>
<a href="#" class="btn px-8 py-3 text-xl mt-6 md:mt-12">Download</a>
</div>
</div>
<div class="flex w-full md:w-1/2 relative mb-8 md:mb-0">
<div class="aspect-[9/6] w-full bg-i4-light-grey relative z-10"></div>
</div>
</div>
</div>
</section>
i4-tile-multiple
<section class="py-12 md:py-20 bg-i4-light-grey overflow-hidden">
<div class="container">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mx-4 md:mx-0">
<div>
<h2 class="text-i4-blue text-3xl font-semibold mb-6">Header 3</h2>
<p class="leading-[1.15]">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud. </p>
</div>
<div>
<h2 class="text-i4-blue text-3xl font-semibold mb-6">Header 3</h2>
<p class="leading-[1.15]">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud. </p>
</div>
<div>
<h2 class="text-i4-blue text-3xl font-semibold mb-6">Header 3</h2>
<p class="leading-[1.15]">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud. </p>
</div>
</div>
</div>
</section>
i4-tile-multiple
<section class="py-12 md:py-20 bg-i4-light-grey overflow-hidden">
<div class="container">
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 lg:gap-12 mx-4 md:mx-0">
<div>
<img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/sample-1.jpg" alt="Sample 1">
<h2 class="text-i4-blue text-xl md:text-2xl font-semibold mt-2 md:mt-4">Image title</h2>
</div>
<div>
<img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/sample-1.jpg" alt="Sample 1">
<h2 class="text-i4-blue text-xl md:text-2xl font-semibold mt-2 md:mt-4">Image title</h2>
</div>
<div>
<img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/sample-1.jpg" alt="Sample 1">
<h2 class="text-i4-blue text-xl md:text-2xl font-semibold mt-2 md:mt-4">Image title</h2>
</div>
<div>
<img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/sample-1.jpg" alt="Sample 1">
<h2 class="text-i4-blue text-xl md:text-2xl font-semibold mt-2 md:mt-4">Image title</h2>
</div>
</div>
</div>
</section>
i4-tile-multiple
<section class="pt-12 pb-12 md:pt-24 md:pb-20 bg-tonal-dark-blue text-white overflow-hidden">
<div class="container">
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-12 md:gap-y-16 lg:gap-y-24">
<div class="text-center px-4 lg:px-12">
<h2 class="text-3xl font-semibold mb-4 md:mb-8">Header 3</h2>
<p class="leading-normal md:leading-[1.2] text-xl md:text-[1.35rem]">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud. Lorem ipsum dolor.</p>
</div>
<div class="text-center px-4 lg:px-12">
<h2 class="text-3xl font-semibold mb-4 md:mb-8">Header 3</h2>
<p class="leading-normal md:leading-[1.2] text-xl md:text-[1.35rem]">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud. Lorem ipsum dolor.</p>
</div>
<div class="text-center px-4 lg:px-12">
<h2 class="text-3xl font-semibold mb-4 md:mb-8">Header 3</h2>
<p class="leading-normal md:leading-[1.2] text-xl md:text-[1.35rem]">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud. Lorem ipsum dolor.</p>
</div>
<div class="text-center px-4 lg:px-12">
<h2 class="text-3xl font-semibold mb-4 md:mb-8">Header 3</h2>
<p class="leading-normal md:leading-[1.2] text-xl md:text-[1.35rem]">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud. Lorem ipsum dolor.</p>
</div>
</div>
</div>
</section>
i4-summary-overview
i4-image-carousel
<section class="pt-12 pb-12 md:pt-20 md:pb-20 overflow-hidden">
<div class="container">
<div class="text-center">
<h1 class="text-i4-blue text-4xl font-semibold leading-none mb-4 md:mb-9">Overview (Header 2)</h1>
<div class="leading-normal md:leading-tight text-xl md:text-2xl px-4 md:px-12 mx-auto">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="swiper overflow-visible md:overflow-hidden image-carousel mt-8 md:mt-24 mx-4 mx:px-0">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/sample-1.jpg" alt="Sample 1">
</div>
<div class="swiper-slide">
<img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/sample-2.jpg" alt="Sample 1">
</div>
<div class="swiper-slide">
<img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/sample-3.jpg" alt="Sample 1">
</div>
<div class="swiper-slide">
<img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/sample-4.jpg" alt="Sample 1">
</div>
<div class="swiper-slide">
<img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/sample-1.jpg" alt="Sample 1">
</div>
<div class="swiper-slide">
<img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/sample-2.jpg" alt="Sample 1">
</div>
<div class="swiper-slide">
<img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/sample-3.jpg" alt="Sample 1">
</div>
<div class="swiper-slide">
<img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/sample-4.jpg" alt="Sample 1">
</div>
</div>
</div>
</div>
</section>
i4-tile-multiple
<section class="pt-12 pb-12 md:pt-24 md:pb-24 overflow-hidden">
<div class="container">
<h1 class="text-center text-tonal-grey text-4xl font-semibold leading-none mb-9">Related Case Studies</h1>
<div class="grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-4 px-4 md:px-0">
<div>
<div class="aspect-square bg-i4-light-grey mb-6">
</div>
<h2 class="text-i4-blue text-3xl font-semibold mb-4 md:mb-6">Header 3</h2>
<p class="leading-normal md:leading-[1.15] mb-4 md:mb-14">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud. </p>
<a href="#" class="btn btn-md">CTA button</a>
</div>
<div>
<div class="aspect-square bg-i4-light-grey mb-6">
</div>
<h2 class="text-i4-blue text-3xl font-semibold mb-4 md:mb-6">Header 3</h2>
<p class="leading-normal md:leading-[1.15] mb-4 md:mb-14">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud. </p>
<a href="#" class="btn btn-md">CTA button</a>
</div>
<div>
<div class="aspect-square bg-i4-light-grey mb-6">
</div>
<h2 class="text-i4-blue text-3xl font-semibold mb-4 md:mb-6">Header 3</h2>
<p class="leading-normal md:leading-[1.15] mb-4 md:mb-14">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud. </p>
<a href="#" class="btn btn-md">CTA button</a>
</div>
</div>
</div>
</section>
i4-list
<section class="pt-12 pb-10 md:pt-24 md:pb-20 bg-tonal-dark-blue text-white overflow-hidden">
<div class="container">
<div class="grid grid-cols-1 md:grid-cols-2 gap-0 md:gap-8 px-4 md:px-0">
<div>
<ul>
<li class="flex items-center text-lg md:text-[1.35rem] mb-2 md:mb-4"><i class="fa-solid fa-check text-i4-pink mr-4 md:mr-8 text-2xl md:text-4xl"></i>Lorem ipsum dolor sit amet. </li>
<li class="flex items-center text-lg md:text-[1.35rem] mb-2 md:mb-4"><i class="fa-solid fa-check text-i4-pink mr-4 md:mr-8 text-2xl md:text-4xl"></i>Sed diam nonummy nibh euismod </li>
<li class="flex items-center text-lg md:text-[1.35rem] mb-2 md:mb-4"><i class="fa-solid fa-check text-i4-pink mr-4 md:mr-8 text-2xl md:text-4xl"></i>Ut wisi enim ad minim veniam. </li>
</ul>
</div>
<div>
<ul>
<li class="flex items-center text-lg md:text-[1.35rem] mb-2 md:mb-4"><i class="fa-solid fa-check text-i4-pink mr-4 md:mr-8 text-2xl md:text-4xl"></i>Lorem ipsum dolor sit amet. </li>
<li class="flex items-center text-lg md:text-[1.35rem] mb-2 md:mb-4"><i class="fa-solid fa-check text-i4-pink mr-4 md:mr-8 text-2xl md:text-4xl"></i>Sed diam nonummy nibh euismod </li>
<li class="flex items-center text-lg md:text-[1.35rem] mb-2 md:mb-4"><i class="fa-solid fa-check text-i4-pink mr-4 md:mr-8 text-2xl md:text-4xl"></i>Ut wisi enim ad minim veniam. </li>
</ul>
</div>
</div>
</div>
</section>
i4-events
<section class="pt-28 pb-12 md:pt-36 lg:pt-56 md:pb-24 overflow-hidden">
<div class="container">
<div class="flex flex-col md:flex-row">
<div class="w-full md:w-7/12 pr-0 md:pr-16 lg:pr-20 flex flex-col items-end relative">
<h3 class="absolute z-10 flex items-center pb-12 -mt-[22%] justify-center aspect-square w-[37%] bg-i4-light-blue mr-[8%] md:-mr-[8%] text-white text-2xl lg:text-4xl font-bold after:block after:aspect-square after:w-[46%] after:absolute after:-bottom-[23%] after:-left-[23%] after:border-4 lg:after:border-8 after: border-white">Events</h3>
<img class="relative z-0 w-full" src="<?php echo get_template_directory_uri(); ?>/img/events-form.jpg" alt="Events">
<div class="mt-4 md:mt-8">
<h4 class="text-[1.4rem] font-semibold leading-tight">Event name, date and time</h4>
<p class="leading-[1.2]">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud. </p>
</div>
<img class="absolute -left-48 -bottom-0 -ml-4 w-[91px] z-0" src="<?php echo get_template_directory_uri(); ?>/img/half-square-bottom-left.svg" alt="Half-square">
</div>
<div class="w-full md:w-5/12 pl-0 md:pl-2 mt-8 md:mt-0">
<div class="bg-tonal-dark-blue px-6 pt-6 pb-6 lg:px-9 lg:pt-10 lg:pb-14">
<h3 class="text-i4-light-blue text-2xl lg:text-3xl font-semibold mb-4">Register for the event</h3>
<form data-dashlane-rid="f8a7f32d7695142d" data-form-type="register">
<div class="relative z-0 mb-3 w-full group bg-white">
<input type="text" name="floating_email" id="floating_email" class="block pt-2.5 pb-1.5 px-4 w-full text-md text-gray-900 border-1 border-white appearance-none focus:outline-none focus:ring-0 focus:border-i4-pink peer bg-transparent" placeholder=" " required="" data-dashlane-rid="4d7f8fd34d749d45" data-form-type="email">
<label for="floating_email" class="
pl-4
pr-2
absolute
text-md
text-gray-400
duration-300
whitespace-nowrap
-z-10
transform
-translate-y-3
translate-x-0
scale-75
top-2.5
right-0
origin-right
peer-focus:transform
peer-focus:-translate-y-3
peer-focus:translate-x-0
peer-focus:scale-75
peer-focus:top-2.5
peer-focus:right-0
peer-focus:origin-right
peer-focus:text-i4-pink
peer-placeholder-shown:scale-100
peer-placeholder-shown:translate-y-0
peer-placeholder-shown:translate-x-full
peer-placeholder-shown:right-full
peer-placeholder-shown:text-gray-500
">First name</label>
</div>
<div class="relative z-0 mb-3 w-full group bg-white">
<input type="text" name="floating_email" id="floating_email" class="block pt-2.5 pb-1.5 px-4 w-full text-md text-gray-900 border-1 border-white appearance-none focus:outline-none focus:ring-0 focus:border-i4-pink peer bg-transparent" placeholder=" " required="" data-dashlane-rid="4d7f8fd34d749d45" data-form-type="email">
<label for="floating_email" class="
pl-4
pr-2
absolute
text-md
text-gray-400
duration-300
whitespace-nowrap
-z-10
transform
-translate-y-3
translate-x-0
scale-75
top-2.5
right-0
origin-right
peer-focus:transform
peer-focus:-translate-y-3
peer-focus:translate-x-0
peer-focus:scale-75
peer-focus:top-2.5
peer-focus:right-0
peer-focus:origin-right
peer-focus:text-i4-pink
peer-placeholder-shown:scale-100
peer-placeholder-shown:translate-y-0
peer-placeholder-shown:translate-x-full
peer-placeholder-shown:right-full
peer-placeholder-shown:text-gray-500
">Surname</label>
</div>
<div class="relative z-0 mb-3 w-full group bg-white">
<input type="email" name="floating_email" id="floating_email" class="block pt-2.5 pb-1.5 px-4 w-full text-md text-gray-900 border-1 border-white appearance-none focus:outline-none focus:ring-0 focus:border-i4-pink peer bg-transparent" placeholder=" " required="" data-dashlane-rid="4d7f8fd34d749d45" data-form-type="email">
<label for="floating_email" class="
pl-4
pr-2
absolute
text-md
text-gray-400
duration-300
whitespace-nowrap
-z-10
transform
-translate-y-3
translate-x-0
scale-75
top-2.5
right-0
origin-right
peer-focus:transform
peer-focus:-translate-y-3
peer-focus:translate-x-0
peer-focus:scale-75
peer-focus:top-2.5
peer-focus:right-0
peer-focus:origin-right
peer-focus:text-i4-pink
peer-placeholder-shown:scale-100
peer-placeholder-shown:translate-y-0
peer-placeholder-shown:translate-x-full
peer-placeholder-shown:right-full
peer-placeholder-shown:text-gray-500
">Email adress</label>
</div>
<div class="relative z-0 mb-3 w-full group bg-white">
<input type="text" name="floating_email" id="floating_email" class="block pt-2.5 pb-1.5 px-4 w-full text-md text-gray-900 border-1 border-white appearance-none focus:outline-none focus:ring-0 focus:border-i4-pink peer bg-transparent" placeholder=" " required="" data-dashlane-rid="4d7f8fd34d749d45" data-form-type="email">
<label for="floating_email" class="
pl-4
pr-2
absolute
text-md
text-gray-400
duration-300
whitespace-nowrap
-z-10
transform
-translate-y-3
translate-x-0
scale-75
top-2.5
right-0
origin-right
peer-focus:transform
peer-focus:-translate-y-3
peer-focus:translate-x-0
peer-focus:scale-75
peer-focus:top-2.5
peer-focus:right-0
peer-focus:origin-right
peer-focus:text-i4-pink
peer-placeholder-shown:scale-100
peer-placeholder-shown:translate-y-0
peer-placeholder-shown:translate-x-full
peer-placeholder-shown:right-full
peer-placeholder-shown:text-gray-500
">Company</label>
</div>
<div class="relative z-0 mb-3 w-full group bg-white">
<input type="text" name="floating_email" id="floating_email" class="block pt-2.5 pb-1.5 px-4 w-full text-md text-gray-900 border-1 border-white appearance-none focus:outline-none focus:ring-0 focus:border-i4-pink peer bg-transparent" placeholder=" " required="" data-dashlane-rid="4d7f8fd34d749d45" data-form-type="email">
<label for="floating_email" class="
pl-4
pr-2
absolute
text-md
text-gray-400
duration-300
whitespace-nowrap
-z-10
transform
-translate-y-3
translate-x-0
scale-75
top-2.5
right-0
origin-right
peer-focus:transform
peer-focus:-translate-y-3
peer-focus:translate-x-0
peer-focus:scale-75
peer-focus:top-2.5
peer-focus:right-0
peer-focus:origin-right
peer-focus:text-i4-pink
peer-placeholder-shown:scale-100
peer-placeholder-shown:translate-y-0
peer-placeholder-shown:translate-x-full
peer-placeholder-shown:right-full
peer-placeholder-shown:text-gray-500
">Job title</label>
</div>
<button type="submit" class="btn btn-md mt-4 min-w-36" data-dashlane-label="true" data-dashlane-rid="331904900266dfe6" data-form-type="action,register">Submit</button>
</form>
</div>
</div>
</div>
</div>
</section>
i4-contact-us
<section class="pt-12 pb-12 md:pt-16 md:pb-16 lg:pt-24 lg:pb-20 bg-i4-light-grey overflow-hidden">
<div class="container">
<h2 class="text-center text-4xl md:text-5xl font-bold mb-2 md:mb-6 text-i4-blue">Contact us</h2>
<p class="text-center text-xl mb-8 md:mb-12 lg:mb-20">We’re here to help.</p>
<div class="px-4 md:px-0">
<div class="grid grid-cols-1 md:grid-cols-2 gap-0 md:gap-12 lg:gap-24 ">
<div>
<div class="relative z-0 mb-7 w-full group bg-white">
<input type="text" name="floating_email" id="floating_email" class="block pt-3.5 pb-3.5 px-6 w-full text-md text-gray-900 border-1 border-white appearance-none focus:outline-none focus:ring-0 focus:border-i4-pink peer bg-transparent" placeholder=" " required="" data-dashlane-rid="4d7f8fd34d749d45" data-form-type="email">
<label for="floating_email" class="
pr-2
absolute
text-md
text-gray-400
duration-300
whitespace-nowrap
-z-10
transform
-translate-y-8
scale-75
top-2.5
left-0
origin-left
peer-focus:transform
peer-focus:-translate-y-8
peer-focus:scale-75
peer-focus:top-2.5
peer-focus:left-0
peer-focus:origin-left
peer-focus:text-i4-pink
peer-placeholder-shown:scale-100
peer-placeholder-shown:translate-y-0
peer-placeholder-shown:left-6
peer-placeholder-shown:top-3.5
peer-placeholder-shown:text-gray-500
">Name</label>
</div>
<div class="relative z-0 mb-7 w-full group bg-white">
<input type="tel" name="floating_email" id="floating_email" class="block pt-3.5 pb-3.5 px-6 w-full text-md text-gray-900 border-1 border-white appearance-none focus:outline-none focus:ring-0 focus:border-i4-pink peer bg-transparent" placeholder=" " required="" data-dashlane-rid="4d7f8fd34d749d45" data-form-type="email">
<label for="floating_email" class="
pr-2
absolute
text-md
text-gray-400
duration-300
whitespace-nowrap
-z-10
transform
-translate-y-8
scale-75
top-2.5
left-0
origin-left
peer-focus:transform
peer-focus:-translate-y-8
peer-focus:scale-75
peer-focus:top-2.5
peer-focus:left-0
peer-focus:origin-left
peer-focus:text-i4-pink
peer-placeholder-shown:scale-100
peer-placeholder-shown:translate-y-0
peer-placeholder-shown:left-6
peer-placeholder-shown:top-3.5
peer-placeholder-shown:text-gray-500
">Phone</label>
</div>
</div>
<div>
<div class="relative z-0 mb-7 w-full group bg-white">
<input type="text" name="floating_email" id="floating_email" class="block pt-3.5 pb-3.5 px-6 w-full text-md text-gray-900 border-1 border-white appearance-none focus:outline-none focus:ring-0 focus:border-i4-pink peer bg-transparent" placeholder=" " required="" data-dashlane-rid="4d7f8fd34d749d45" data-form-type="email">
<label for="floating_email" class="
pr-2
absolute
text-md
text-gray-400
duration-300
whitespace-nowrap
-z-10
transform
-translate-y-8
scale-75
top-2.5
left-0
origin-left
peer-focus:transform
peer-focus:-translate-y-8
peer-focus:scale-75
peer-focus:top-2.5
peer-focus:left-0
peer-focus:origin-left
peer-focus:text-i4-pink
peer-placeholder-shown:scale-100
peer-placeholder-shown:translate-y-0
peer-placeholder-shown:left-6
peer-placeholder-shown:top-3.5
peer-placeholder-shown:text-gray-500
">Organization</label>
</div>
<div class="relative z-0 mb-7 w-full group bg-white">
<input type="email" name="floating_email" id="floating_email" class="block pt-3.5 pb-3.5 px-6 w-full text-md text-gray-900 border-1 border-white appearance-none focus:outline-none focus:ring-0 focus:border-i4-pink peer bg-transparent" placeholder=" " required="" data-dashlane-rid="4d7f8fd34d749d45" data-form-type="email">
<label for="floating_email" class="
pr-2
absolute
text-md
text-gray-400
duration-300
whitespace-nowrap
-z-10
transform
-translate-y-8
scale-75
top-2.5
left-0
origin-left
peer-focus:transform
peer-focus:-translate-y-8
peer-focus:scale-75
peer-focus:top-2.5
peer-focus:left-0
peer-focus:origin-left
peer-focus:text-i4-pink
peer-placeholder-shown:scale-100
peer-placeholder-shown:translate-y-0
peer-placeholder-shown:left-6
peer-placeholder-shown:top-3.5
peer-placeholder-shown:text-gray-500
">Email</label>
</div>
</div>
</div>
<div class="relative z-0 mb-7 w-full group bg-white">
<textarea name="floating_email" id="floating_email" rows="5" class="block pt-3.5 pb-3.5 px-6 w-full text-md text-gray-900 border-1 border-white appearance-none focus:outline-none focus:ring-0 focus:border-i4-pink peer bg-transparent resize-none" placeholder=" " required="" data-dashlane-rid="4d7f8fd34d749d45" data-form-type="email"></textarea>
<label for="floating_email" class="
pr-2
absolute
text-md
text-gray-400
duration-300
whitespace-nowrap
-z-10
transform
-translate-y-8
scale-75
top-2.5
left-0
origin-left
peer-focus:transform
peer-focus:-translate-y-8
peer-focus:scale-75
peer-focus:top-2.5
peer-focus:left-0
peer-focus:origin-left
peer-focus:text-i4-pink
peer-placeholder-shown:scale-100
peer-placeholder-shown:translate-y-0
peer-placeholder-shown:left-6
peer-placeholder-shown:top-3.5
peer-placeholder-shown:text-gray-500
">Message</label>
</div>
<button type="submit" class="btn btn-md mt-0 md:mt-1" data-dashlane-label="true" data-dashlane-rid="331904900266dfe6" data-form-type="action,register">Get in touch</button>
</div>
</div>
</section>
i4-summary-overview
<section class="bg-[url('./img/bg-6.jpg')] bg-cover pt-12 pb-12 md:pt-20 md:pb-24 overflow-hidden">
<div class="container">
<div class="text-center">
<h1 class="text-white text-4xl font-semibold leading-none mb-4 md:mb-8">Want to find out more?</h1>
<div class="leading-[1.3] md:leading-normal text-white text-xl px-4 md:px-20 mx-auto">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<a href="#" class="btn btn-md mt-6 mb:mt-12 bg-white color text-tonal-grey">CTA button</a>
</div>
</div>
</section>
<div class="bg-i4-pink h-4"></div>
i4-hero-banner
<section class="bg-[url('./img/bg-2.jpg')] bg-cover pt-12 pb-10 overflow-hidden">
<div class="container">
<div class="flex items-center flex-col md:flex-row">
<div class="flex flex-col flex-1">
<div class="flex flex-col h-full">
<div class="pr-0 md:pr-10 mb-0 md:mb-40 flex-1 flex flex-col justify-center">
<h1 class="text-white text-4xl md:text-5xl lg:text-[4.1rem] font-semibold leading-none">Header banner</h1>
</div>
</div>
</div>
<div class="mt-10 md:mt-0 min-w-[200px] md:min-w-0 flex-1">
<div class="aspect-square relative">
<img class="absolute h-[117%] w-auto max-w-none -translate-x-[50%] -translate-y-[50%] md:-translate-x-[49%] md:-translate-y-[51%] left-1/2 top-1/2" src="<?php echo get_template_directory_uri(); ?>/img/graphics-hero.png" />
</div>
</div>
</div>
</div>
</section>
i4-map
<section class="pt-12 pb-12 md:pt-24 md:pb-24">
<div class="md:container">
<div class="relative max-w-full overflow-auto px-4 md:px-0">
<div class="relative w-[200%] md:w-full">
<img class="relative z-0 w-full" src="<?php echo get_template_directory_uri(); ?>/img/map.png" alt="Map">
<div id="marker-1" class="absolute top-[30%] left-[46%] w-[3.3%]">
<button id="marker-trigger-1" data-dropdown-toggle="marker-list-1" type="button" data-dropdown-placement="right-start" class="w-full hover:scale-150 duration-300 ease-in-out">
<img class="w-full" src="<?php echo get_template_directory_uri(); ?>/img/marker-office.svg" />
</button>
<div id="marker-list-1" class="hidden z-10 w-64 px-5 py-4 bg-white/90 font-semibold text-[1.15rem] leading-tight">
<div class="mb-10">
<h4 class="text-i4-pink text-[1.4rem] mb-4">London, UK</h4>
<p>71 Fenchurch Street,<br>London, EC3M 4BS<br>United Kingdom</p>
<p> </p>
<p>Phone: +44 20 7709 9166</p>
</div>
<div>
<h4 class="text-i4-pink text-[1.4rem] mb-4">Southampton, UK</h4>
<p>Lloyd’s Register Global Technology Centre, University of Southampton Boldrewood, Burgess Rd, Southampton, SO16 7QF United Kingdom</p>
<p> </p>
<p>Phone: 0330 414 1000</p>
</div>
</div>
</div>
<div id="marker-2" class="absolute top-[24%] left-[47.5%] w-[3.3%]">
<button id="marker-trigger-2" data-dropdown-toggle="marker-list-2" type="button" data-dropdown-placement="right-start" class="w-full hover:scale-150 duration-300 ease-in-out">
<img class="w-full" src="<?php echo get_template_directory_uri(); ?>/img/marker-office.svg" />
</button>
<div id="marker-list-2" class="hidden z-10 w-64 px-5 py-4 bg-white/90 font-semibold text-[1.15rem] leading-tight">
<div>
<h4 class="text-i4-pink text-[1.4rem] mb-4">Egersund, Norway</h4>
<p>Elganeveien 1<br>N-4374 Egersund, <br>Norway </p>
</div>
</div>
</div>
<div id="marker-3" class="absolute top-[27%] left-[49.3%] w-[3.3%]">
<button id="marker-trigger-3" data-dropdown-toggle="marker-list-3" type="button" data-dropdown-placement="right-start" class="w-full hover:scale-150 duration-300 ease-in-out">
<img class="w-full" src="<?php echo get_template_directory_uri(); ?>/img/marker-office.svg" />
</button>
<div id="marker-list-3" class="hidden z-10 w-64 px-5 py-4 bg-white/90 font-semibold text-[1.15rem] leading-tight">
<div>
<h4 class="text-i4-pink text-[1.4rem] mb-4">Hellerup, Denmark</h4>
<p>Lloyd’s Register EMEA, <br>Strandvejen 104A,2., <br>DK-2900 Hellerup, Denmark </p>
</div>
</div>
</div>
<div id="marker-4" class="absolute top-[29.5%] left-[51.3%] w-[3.3%]">
<button id="marker-trigger-4" data-dropdown-toggle="marker-list-4" type="button" data-dropdown-placement="right-start" class="w-full hover:scale-150 duration-300 ease-in-out">
<img class="w-full" src="<?php echo get_template_directory_uri(); ?>/img/marker-office.svg" />
</button>
<div id="marker-list-4" class="hidden z-10 w-64 px-5 py-4 bg-white/90 font-semibold text-[1.15rem] leading-tight">
<div>
<h4 class="text-i4-pink text-[1.4rem] mb-4">Warsaw, Poland</h4>
<p>ul. Jasna 14/16a<br>00-041 Warsaw<br>Poland</p>
</div>
</div>
</div>
<div id="marker-5" class="absolute top-[24%] left-[54.3%] w-[3.3%]">
<button id="marker-trigger-5" data-dropdown-toggle="marker-list-5" type="button" data-dropdown-placement="right-start" class="w-full hover:scale-150 duration-300 ease-in-out">
<img class="w-full" src="<?php echo get_template_directory_uri(); ?>/img/marker-office.svg" />
</button>
<div id="marker-list-5" class="hidden z-10 w-64 px-5 py-4 bg-white/90 font-semibold text-[1.15rem] leading-tight">
<div>
<h4 class="text-i4-pink text-[1.4rem] mb-4">St. Petersburg, Russia </h4>
<p>Lloyd’s Register Rus LLC<br>8, 21 Linia, 199106</p>
<p> </p>
<p>Phone: +7 812 327-98-94</p>
</div>
</div>
</div>
<div id="marker-6" class="absolute top-[39.5%] left-[52.3%] w-[3.3%]">
<button id="marker-trigger-6" data-dropdown-toggle="marker-list-6" type="button" data-dropdown-placement="right-start" class="w-full hover:scale-150 duration-300 ease-in-out">
<img class="w-full" src="<?php echo get_template_directory_uri(); ?>/img/marker-office.svg" />
</button>
<div id="marker-list-6" class="hidden z-10 w-64 px-5 py-4 bg-white/90 font-semibold text-[1.15rem] leading-tight">
<div>
<h4 class="text-i4-pink text-[1.4rem] mb-4">Athens, Greece </h4>
<p>Hellenic Lloyd’s S.A.<br>348 Syggrou Avenue, <br>17674, Kallithea, Athens</p>
<p> </p>
<p>infoGR@i4-insight.com</p>
</div>
</div>
</div>
<div id="marker-7" class="absolute top-[39.2%] left-[16.9%] w-[3.3%]">
<button id="marker-trigger-7" data-dropdown-toggle="marker-list-7" type="button" data-dropdown-placement="right-start" class="w-full hover:scale-150 duration-300 ease-in-out">
<img class="w-full" src="<?php echo get_template_directory_uri(); ?>/img/marker-office.svg" />
</button>
<div id="marker-list-7" class="hidden z-10 w-64 px-5 py-4 bg-white/90 font-semibold text-[1.15rem] leading-tight">
<div>
<h4 class="text-i4-pink text-[1.4rem] mb-4">Denver, USA </h4>
<p>Global Headquarters: <br>6041 S. Syracuse Way<br>Suite 350<br>Greenwood Village, <br>CO 80111</p>
<p> </p>
<p>Phone: +1 (720) 805-0174<br>Marketing@i4-insight.com</p>
</div>
</div>
</div>
<div id="marker-8" class="absolute top-[60.2%] left-[74.9%] w-[3.3%]">
<button id="marker-trigger-8" data-dropdown-toggle="marker-list-8" type="button" data-dropdown-placement="right-start" class="w-full hover:scale-150 duration-300 ease-in-out">
<img class="w-full" src="<?php echo get_template_directory_uri(); ?>/img/marker-office.svg" />
</button>
<div id="marker-list-8" class="hidden z-10 w-64 px-5 py-4 bg-white/90 font-semibold text-[1.15rem] leading-tight">
<div>
<h4 class="text-i4-pink text-[1.4rem] mb-4">Singapore</h4>
<p>Lloyd’s Register Singapore Pte. Ltd.<br>2 Science Park Drive, #02-05/06 Ascent<br>Singapore Science Park 1<br>Singapore 118222</p>
</div>
</div>
</div>
<div id="marker-9" class="absolute top-[52%] left-[66.4%] w-[3.3%]">
<button id="marker-trigger-9" data-dropdown-toggle="marker-list-9" type="button" data-dropdown-placement="right-start" class="w-full hover:scale-150 duration-300 ease-in-out">
<img class="w-full" src="<?php echo get_template_directory_uri(); ?>/img/marker-office.svg" />
</button>
<div id="marker-list-9" class="hidden z-10 w-64 px-5 py-4 bg-white/90 font-semibold text-[1.15rem] leading-tight">
<div>
<h4 class="text-i4-pink text-[1.4rem] mb-4">Maharashtra, India</h4>
<p>3rd Floor, Ayaan Chandrika, 1315/701 <br>Bhamburda, Dadasaheb Torne Path, Pune -411005<br>Maharashtra, India</p>
</div>
</div>
</div>
<div id="marker-10" class="absolute top-[31%] left-[11.4%] w-[3.3%]">
<div id="marker-trigger-10" class="w-full">
<img class="w-full" src="<?php echo get_template_directory_uri(); ?>/img/marker-remote.svg" />
</div>
</div>
<div id="marker-11" class="absolute top-[34.2%] left-[12.6%] w-[3.3%]">
<div id="marker-trigger-11" class="w-full">
<img class="w-full" src="<?php echo get_template_directory_uri(); ?>/img/marker-remote.svg" />
</div>
</div>
<div id="marker-12" class="absolute top-[41%] left-[13%] w-[3.3%]">
<div id="marker-trigger-12" class="w-full">
<img class="w-full" src="<?php echo get_template_directory_uri(); ?>/img/marker-remote.svg" />
</div>
</div>
<div id="marker-13" class="absolute top-[37%] left-[26%] w-[3.3%]">
<div id="marker-trigger-13" class="w-full">
<img class="w-full" src="<?php echo get_template_directory_uri(); ?>/img/marker-remote.svg" />
</div>
</div>
<div id="marker-14" class="absolute top-[46%] left-[23.5%] w-[3.3%]">
<div id="marker-trigger-14" class="w-full">
<img class="w-full" src="<?php echo get_template_directory_uri(); ?>/img/marker-remote.svg" />
</div>
</div>
<div id="marker-14" class="absolute top-[38.5%] left-[45%] w-[3.3%]">
<div id="marker-trigger-14" class="w-full">
<img class="w-full" src="<?php echo get_template_directory_uri(); ?>/img/marker-remote.svg" />
</div>
</div>
<div id="marker-15" class="absolute top-[36.5%] left-[49.5%] w-[3.3%]">
<div id="marker-trigger-15" class="w-full">
<img class="w-full" src="<?php echo get_template_directory_uri(); ?>/img/marker-remote.svg" />
</div>
</div>
<div id="marker-15" class="absolute top-[40.5%] left-[84.3%] w-[3.3%]">
<div id="marker-trigger-15" class="w-full">
<img class="w-full" src="<?php echo get_template_directory_uri(); ?>/img/marker-remote.svg" />
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-8 mt-4 md:mt-16 px-4 md:px-0">
<div>
<div id="marker-office" class="relative">
<button type="button" class="map-markers-trigger w-full group duration-300 ease-in-out flex items-center">
<img class="w-16 lg:w-24 duration-300 ease-in-out group-hover:scale-100 md:group-hover:scale-150 rotate-[30deg]" src="<?php echo get_template_directory_uri(); ?>/img/marker-office.svg" />
<span class="ml-5 leading-tight lg:ml-10 text-2xl lg:text-[1.65rem] text-i4-pink font-semibold">Office locations</span>
</button>
<div class="w-full map-markers-list hidden z-10 text-xl leading-tight pl-12 md:pl-24">
<ul class="bg-white/90 ml-4 -mt-6 pl-6 pb-3 pt-3 w-60">
<li class="mb-2"><a href="#marker-trigger-6">Athens, Greece</a></li>
<li class="mb-2"><a href="#marker-trigger-7">Denver, USA</a></li>
<li class="mb-2"><a href="#marker-trigger-2">Egersund, Norway</a></li>
<li class="mb-2"><a href="#marker-trigger-9">Maharashtra, India</a></li>
<li class="mb-2"><a href="#marker-trigger-8">Singapore, Singapore</a></li>
<li class="mb-2"><a href="#marker-trigger-1">Southampton, UK</a></li>
<li class="mb-2"><a href="#marker-trigger-5">St. Peterburg, Russia</a></li>
<li class="mb-2"><a href="#marker-trigger-4">Warsaw, Poland</a></li>
</ul>
</div>
</div>
</div>
<div>
<div id="marker-remote" class="relative">
<div class="map-markers-trigger w-full group duration-300 ease-in-out flex items-center">
<img class="w-16 lg:w-24 duration-300 ease-in-out" src="<?php echo get_template_directory_uri(); ?>/img/marker-remote.svg" />
<span class="ml-5 leading-tight lg:ml-10 text-2xl lg:text-[1.65rem] text-black font-semibold">Remote working locations</span>
</div>
</div>
</div>
</div>
</div>
</section>
i4-blink-logos
<section class="py-12 md:py-20 overflow-hidden">
<div class="container">
<h2 class="text-center text-4xl font-bold mb-4 md:mb-6 text-i4-blue">Partner Alliances</h2>
<div class="mt-8 md:mt-20">
<div id="partners" data-blink-count="15">
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/partners/globavista.jpg" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/partners/Hensoldt.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/partners/MadeSmartGroup.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/partners/ClearWaterTracking.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/partners/Fugro.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/partners/Clearwater.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/partners/Carmenta.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/partners/CLS.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/partners/DHI.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/partners/e-marine.jpg" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/partners/GlobalNavSol.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/partners/FOBAS.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/partners/Navarino.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/partners/PrismaEle.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/partners/SperryMarine.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/partners/BunkerEx.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/partners/Orbcomm.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/partners/Stratumfive.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/partners/Hanseaticsoft.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/partners/JapanRadioCo..png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/partners/FNT.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/partners/PoleStar.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/partners/Furuno.png" />
<div class="blink-result grid grid-cols-3 lg:grid-cols-5 gap-x-8 md:gap-x-16 md:gap-y-16 px-4 md:px-0">
</div>
</div>
</div>
</div>
</section>
i4-blink-logos
<section class="py-12 md:py-20 overflow-hidden">
<div class="container">
<h2 class="text-center text-4xl font-bold mb-4 md:mb-6 text-i4-blue">Our customers</h2>
<div class="mt-8 md:mt-20">
<div id="customers" data-blink-count="10">
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/Times_Navigation.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/TOTE_Maritime_logo.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/LydiaMar.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/BPlogo.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/Sonangol_Logo.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/ScorpioBulkersInc.jpg" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/Shell_Logo.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/LaviniaBulk.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/SunEnterprises.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/NYK.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/EuroNavlogo.jpg" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/matson-logo.jpg" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/TradeFortune.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/AnbrosMaritime.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/MinervaMarine.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/MarinerShipping_logo.jpg" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/Sonangol_Logo.jpg" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/TMS_Tankers.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/Vikenlogo_001.jpg" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/Tsakos_Group.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/Laskaridis.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/Pantheon_Tankers.jpg" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/Pleiades_logo.jpg" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/Cargill.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/V.Ships.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/Seaspire_Maritime.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/Gaslog_logo.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/MTM.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/D'Amico.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/Eurotank_Maritime_M.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/Arcadia_Shipping.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/SS.jpg" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/Maran_Tankers_Management2.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/Navios-Maritime.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/chandrishellas_logo.jpg" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/dht_tankers.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/Valles_Steamship_Ltd_Logo.jpg" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/DFDS.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/tms-cardiff.jpg" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/MDM.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/Bunge.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/AV.jpg" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/Oldendorff.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/AET_logo.jpg" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/Luois_Dreyfus_Company_logo.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/Cool_Carriers.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/Totalenergies-logo.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/Nereus_Shipping_S.A.jpg" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/Ambros_Maritime.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/Alison_Management.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/Tideline.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/Seanergy_logo.jpg" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/Unifeeder logo.png" />
<img class="hidden" src="<?php echo get_template_directory_uri(); ?>/img/customers/Chevron_Logo.png" />
<div class="blink-result grid grid-cols-3 lg:grid-cols-5 gap-x-8 gap-y-4 md:gap-x-16 md:gap-y-16 px-4 md:px-0">
</div>
</div>
</div>
</div>
</section>
i4-team
<section class="py-12 md:py-20 overflow-hidden">
<div class="container">
<h2 class="text-center text-4xl font-bold mb-6 text-i4-blue">Our team</h2>
<div class="mt-8 md:mt-20">
<div class="swiper my-4 overflow-visible team-carousel">
<div class="swiper-wrapper">
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Detar_James_8x10_061821.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Alley_Brad_8x10_061821.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Andrey_Klimovskiy.png" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Athina_Perdikari.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Dimitrios_Tagkalis.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Dmitry_Tarasov.png" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Elli_Psilopoulou.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Hannah_Cook.png" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Irina_Veselova.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Jeff_Mattick.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/John_Boers.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/John_Horner.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/John_Psychas.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Julia_Koslova.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Keen.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Mark_Fordice.png" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Meltzner_Joel_8x10_061821.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/MizuhoMera.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Natalia_Nikitina.png" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Oksana_Alekseeva.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Pasquali.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Sandeep_Kumar.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Sujit_Padhye.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/valerie.krumholz.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Vineet.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Vitaly_Vasyunin.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Weston_Seniw.jpg" alt=""></div>
</div>
</div>
<div class="swiper my-4 overflow-visible team-carousel">
<div class="swiper-wrapper">
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Detar_James_8x10_061821.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Alley_Brad_8x10_061821.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Andrey_Klimovskiy.png" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Athina_Perdikari.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Dimitrios_Tagkalis.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Dmitry_Tarasov.png" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Elli_Psilopoulou.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Hannah_Cook.png" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Irina_Veselova.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Jeff_Mattick.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/John_Boers.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/John_Horner.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/John_Psychas.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Julia_Koslova.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Keen.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Mark_Fordice.png" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Meltzner_Joel_8x10_061821.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/MizuhoMera.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Natalia_Nikitina.png" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Oksana_Alekseeva.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Pasquali.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Sandeep_Kumar.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Sujit_Padhye.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/valerie.krumholz.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Vineet.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Vitaly_Vasyunin.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Weston_Seniw.jpg" alt=""></div>
</div>
</div>
<div class="swiper my-4 overflow-visible team-carousel">
<div class="swiper-wrapper">
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Detar_James_8x10_061821.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Alley_Brad_8x10_061821.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Andrey_Klimovskiy.png" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Athina_Perdikari.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Dimitrios_Tagkalis.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Dmitry_Tarasov.png" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Elli_Psilopoulou.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Hannah_Cook.png" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Irina_Veselova.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Jeff_Mattick.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/John_Boers.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/John_Horner.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/John_Psychas.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Julia_Koslova.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Keen.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Mark_Fordice.png" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Meltzner_Joel_8x10_061821.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/MizuhoMera.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Natalia_Nikitina.png" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Oksana_Alekseeva.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Pasquali.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Sandeep_Kumar.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Sujit_Padhye.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/valerie.krumholz.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Vineet.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Vitaly_Vasyunin.jpg" alt=""></div>
<div class="swiper-slide"><img class="w-full aspect-square object-cover" src="<?php echo get_template_directory_uri(); ?>/img/team/Weston_Seniw.jpg" alt=""></div>
</div>
</div>
</div>
</div>
</section>
<?php
get_footer();
Zerion Mini Shell 1.0