{% extends "layouts/landing.html" %}

{% load static %}

{% block content %} 
<main class="content bg-white" id="lqd-site-content">
    <div id="qd-contents-wrap">
        <!-- banner -->
        <section class="lqd-section banner pt-100" id="banner">
            <div
                class="background-overlay bg-no-repeat bg-cover opacity-100 transition-all"
                style="background-image: url('static/images/banners/banner-bg.png');"
            ></div>
            <div class="lqd-particles-bg-wrap lqd-overlay flex pointer-events-none"></div>
            <div class="ld-particles-container lqd-particles-as-bg lqd-overlay flex">
                <div
                    class="ld-particles-inner lqd-overlay flex pointer-events-none"
                    id="lqd-particle-banner"
                    data-particles="true"
                    data-particles-options='{"particles": {"number": {"value" : 4} , "color": {"value" : ["#FDA44C", "#604CFD", "#F85976", "#0FBBB4"]} , "shape": {"type" : ["circle"]} , "opacity": {"value" : 1} , "size": {"value" : 4}} , "interactivity" : [], "retina_detect": true}'
                ></div>
            </div>
            <div class="container">
                <div class="row">
                    <div
                        class="col col-12 col-xl-6 text-center xxl:text-start"
                        data-custom-animations="true"
                        data-ca-options='{"animationTarget": ".btn, h1, p", "ease": "power4.out", "initValues": {"y": "40px", "rotationY" : 53, "opacity" : 0} , "animations": {"y": "0px", "rotationY" : 0, "opacity" : 1}}'
                    >
                        <div class="spacer w-full">
                            <div class="h-30"></div>
                        </div>
                        <div class="ld-fancy-heading relative">
                            <h1 class="mb-25 ld-fh-element relative">
                                <span>Adtlas</span>
                                <br /> 
                            </h1>
                        </div>
                        <div class="ld-fancy-heading relative">
                            <p class="font-medium mb-25 pr-30percent ld-fh-element relative">
                                Our platform opens up the possibilities of the TV and digital worlds coming together.
                            </p>
                        </div>
                        <div class="flex flex-wrap justify-start lg:justify-center"> 
                            <a
                                href="#contact-modal"
                                class="btn btn-naked btn-icon-right btn-hover-swp ml-30 text-14 text-slate-400"
                                data-lity="#contact-modal"
                            >
                            <span class="btn-txt" data-text="Request a Demo">Request a Demo</span>
                            <span class="btn-icon">
                                <i aria-hidden="true" class="lqd-icn-ess icon-ion-ios-arrow-forward"></i> 
                            </span>
                            <span class="btn-icon">
                                <i aria-hidden="true" class="lqd-icn-ess icon-ion-ios-arrow-forward"></i>
                            </span>
                        </a>
                    </div>
                    </div>
                    <div class="col col-12 col-xl-6 sm:hidden">
                        <div class="relative flex w-full h-full transition-bg justify-start lg:justify-center module-img">
                            <div class="relative w-400 px-0">
                                <div class="lqd-imggrp-img-container inline-flex relative items-center justify-center transform-style-3d">
                                    <figure class="w-full relative" data-stacking-factor="1">
                                        <img width="795" height="1182" src="{% static 'images/banners/banner.png' %}" alt="banner papa"/>
                                    </figure>
                                </div>
                            </div> 
                            <div class="absolute w-auto top-15percent -right-80percent">
                                <div class="lqd-imggrp-single block relative" data-float="ease">
                                    <div class="lqd-imggrp-img-container inline-flex relative items-center justify-center">
                                        <figure class="w-full relative">
                                            <img width="467" height="467" src="{% static 'images/shapes/shape-Image-764.png' %}" alt="mgnatis papa" />
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- services -->
        <section 
            class="lqd-section features bg-white bg-no-repeat bg-cover bg-center text-start py-100"
            id="features" 
            data-custom-animations="true"
            data-ca-options='{"animationTarget": ".animation-element", "ease": "power4.out", "initValues": {"y": "35px", "opacity" : 0} , "animations": {"y": "0px", "opacity" : 1}}'
        >
            <div class="container">
                <div class="row">
                    <div class="col col-12 col-xl-6 animation-element">
                        <div class="flex flex-wrap flex-col mr-45percent ml-5percent">
                            <div class="lqd-imggrp-single block relative">
                                <div class="lqd-imggrp-img-container inline-flex relative items-center justify-center">
                                    <figure class="w-full relative">
                                        <img width="38" height="6" src="{% static 'images/shapes/shape-dash.svg' %}" alt="features" />
                                    </figure>
                                </div>
                            </div>
                            <div class="ld-fancy-heading relative">
                                <h2 class="text-50 ld-fh-element mb-0/5em inline-block relative" data-text-rotator="true">
                                    <span>With Adtlas,</span>
                                    <span class="txt-rotate-keywords">
                                        <span class="txt-rotate-keyword active">
                                            <span>digitalize your </span>
                                            </br>
                                            <span>advertising.</span>
                                        </span> 
                                    </span>
                                </h2>
                            </div>
                            <div
                                class="lqd-imggrp-single relative xs:hidden lg:hidden xxl:block"
                                data-parallax="true"
                                data-parallax-options='{"start": "top bottom", "end": "bottom+=0px top"}'
                                data-parallax-from='{"x": "200px", "y": "-100px", "rotationZ" : 0}'
                                data-parallax-to='{"x": "400px", "y": "0px", "rotationZ" : -90}'
                            >
                                <div class="lqd-imggrp-img-container inline-flex relative items-center justify-center">
                                    <figure class="w-full relative">
                                        <img
                                            width="95"
                                            height="95"
                                            src="{% static 'images/shapes/shape-Image-760.svg' %}"
                                            alt="clock shape"
                                        />
                                    </figure>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col col-12 col-xl-6 animation-element">
                        <div class="lqd-iconbox-scale rounded-10 p-20 mb-30 transition-all mr-25percent">
                            <div class="iconbox iconbox-side iconbox-heading-arrow-onhover flex flex-grow-1 relative">
                                <div class="iconbox-icon-wrap">
                                    <div class="text-60 iconbox-icon-container inline-flex">
                                        <svg xmlns="http://www.w3.org/2000/svg" id="Notes" width="59" height="59" viewbox="0 0 59 59">
                                            <circle id="Oval-1" cx="29.5" cy="29.5" r="29.5" fill="#b7eef5"></circle>
                                            <path
                                                id="Combined_Shape-25"
                                                data-name="Combined Shape"
                                                d="M0,22.054A2.323,2.323,0,0,0,2.322,24.38H20.9a2.326,2.326,0,0,0,2.322-2.327V2.327A2.323,2.323,0,0,0,20.9,0H2.322A2.326,2.326,0,0,0,0,2.327Z"
                                                transform="translate(14.225 20.166)"
                                                fill="#008aba"
                                            ></path>
                                            <path
                                                id="Combined_Shape-26"
                                                data-name="Combined Shape"
                                                d="M23.219,2.327A2.323,2.323,0,0,0,20.9,0H2.322A2.326,2.326,0,0,0,0,2.327V22.054A2.323,2.323,0,0,0,2.322,24.38H20.9a2.326,2.326,0,0,0,2.322-2.327Z"
                                                transform="translate(21.337 14.235)"
                                                fill="#6abbd7"
                                            ></path>
                                            <path
                                                id="Shape-12"
                                                d="M9.237,11.8H1.152a1.18,1.18,0,0,1,0-2.36H9.237a1.18,1.18,0,0,1,0,2.36Zm-.58-4.72h-7.5a1.18,1.18,0,0,1,0-2.36h7.5a1.18,1.18,0,0,1,0,2.36ZM12.12,2.36H1.155A1.169,1.169,0,0,1,0,1.18,1.169,1.169,0,0,1,1.155,0H12.12a1.169,1.169,0,0,1,1.155,1.18A1.169,1.169,0,0,1,12.12,2.36Z"
                                                transform="translate(26.236 18.73)"
                                                fill="#b7eef5"
                                            ></path>
                                        </svg>
                                    </div>
                                </div>
                                <div class="contents">
                                    <h3 class="lqd-iconbox-heading text-18 text-primary leading-1em">
                                        <span>Automatic Content Recognition</span>
                                        <svg
                                            class="inline-block"
                                            xmlns="http://www.w3.org/2000/svg"
                                            width="12"
                                            height="32"
                                            viewbox="0 0 12 32"
                                        >
                                            <path
                                                fill="currentColor"
                                                d="M8.375 16L.437 8.062C-.125 7.5-.125 6.5.438 5.938s1.563-.563 2.126 0l9 9c.562.562.624 1.5.062 2.062l-9.063 9.063c-.312.312-.687.437-1.062.437s-.75-.125-1.063-.438c-.562-.562-.562-1.562 0-2.125z"
                                            ></path>
                                        </svg>
                                    </h3>
                                    <p>
                                        We offer a powerful contextual targeting based on AI content 
                                        analyze in order to match your brand with the right emotion at the right time.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col col-12 col-xl-6 animation-element">
                        <div class="lqd-iconbox-scale rounded-10 p-20 mb-30 transition-all mr-25percent">
                            <div class="iconbox iconbox-side iconbox-heading-arrow-onhover flex flex-grow-1 relative">
                                <div class="iconbox-icon-wrap">
                                    <div class="text-60 iconbox-icon-container inline-flex">
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            width="58"
                                            height="58"
                                            viewbox="0 0 58 58"
                                        >
                                            <g id="Help" transform="translate(0 0)">
                                                <circle id="Oval-2" cx="29" cy="29" r="29" transform="translate(0 0)" fill="#ffe0ab"></circle>
                                                <path
                                                    id="Shape-3"
                                                    d="M18.422,36.975A18.517,18.517,0,0,1,11.2,35.527a18.373,18.373,0,0,1-9.766-9.715A17.854,17.854,0,0,1,0,18.79,18.9,18.9,0,0,1,5.346,5.453,18.155,18.155,0,0,1,18.422,0a16.92,16.92,0,0,1,6.883,1.458,17.805,17.805,0,0,1,5.673,4,18.742,18.742,0,0,1,3.852,5.966,19.55,19.55,0,0,1,1.42,7.371,18.013,18.013,0,0,1-1.42,7.021A18.456,18.456,0,0,1,30.978,31.6a18.06,18.06,0,0,1-5.673,3.929A17.07,17.07,0,0,1,18.422,36.975Zm-.3-27.153a8.358,8.358,0,0,0-6.008,2.538,8.789,8.789,0,0,0,0,12.255,8.379,8.379,0,0,0,12.015,0,8.789,8.789,0,0,0,0-12.255A8.357,8.357,0,0,0,18.125,9.822Z"
                                                    transform="translate(10.5 10.15)"
                                                    fill="#fbc774"
                                                ></path>
                                                <path
                                                    id="Shape-4"
                                                    data-name="Shape-4"
                                                    d="M18.642,37a19.338,19.338,0,0,1-6.092-1.026.672.672,0,0,1-.353-.646l1.042-9.375a.49.49,0,0,1,.249-.375,8.676,8.676,0,0,0,10.025,0,.48.48,0,0,1,.248.375L24.8,35.328a.683.683,0,0,1-.438.682A18.88,18.88,0,0,1,18.642,37ZM35.388,24.805a.539.539,0,0,1-.059,0l-9.375-1.041a.48.48,0,0,1-.375-.248,8.676,8.676,0,0,0,0-10.025.49.49,0,0,1,.375-.249L35.328,12.2a.561.561,0,0,1,.061,0,.684.684,0,0,1,.584.356A19.338,19.338,0,0,1,37,18.642a18.878,18.878,0,0,1-.99,5.722A.687.687,0,0,1,35.388,24.805Zm-33.775,0a.686.686,0,0,1-.622-.441A18.875,18.875,0,0,1,0,18.642a19.18,19.18,0,0,1,1.041-6.119.682.682,0,0,1,.57-.329.561.561,0,0,1,.061,0l9.374,1.042a.49.49,0,0,1,.376.25,8.677,8.677,0,0,0,0,10.023.478.478,0,0,1-.376.249L1.672,24.8A.54.54,0,0,1,1.612,24.805ZM13.489,11.422h0a.49.49,0,0,1-.249-.376L12.2,1.672a.68.68,0,0,1,.326-.631A19.18,19.18,0,0,1,18.642,0a18.873,18.873,0,0,1,5.722.99.682.682,0,0,1,.438.682l-1.041,9.374a.479.479,0,0,1-.249.376,8.677,8.677,0,0,0-10.022,0Z"
                                                    transform="translate(10 10)"
                                                    fill="#f5a623"
                                                ></path>
                                            </g>
                                        </svg>
                                    </div>
                                </div>
                                <div class="contents">
                                    <h3 class="lqd-iconbox-heading text-18 text-primary leading-1em">
                                    <span>CPM-Based TV </span>
                                    <svg
                                        class="inline-block"
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="12"
                                        height="32"
                                        viewbox="0 0 12 32"
                                    >
                                        <path
                                            fill="currentColor"
                                            d="M8.375 16L.437 8.062C-.125 7.5-.125 6.5.438 5.938s1.563-.563 2.126 0l9 9c.562.562.624 1.5.062 2.062l-9.063 9.063c-.312.312-.687.437-1.062.437s-.75-.125-1.063-.438c-.562-.562-.562-1.562 0-2.125z"
                                        ></path>
                                    </svg>
                                </h3>
                                <p> Purchase TV advertising on a CPM basis, leveraging analytics from linear TV.</p>
                            </div>
                        </div>
                    </div>
                    </div>
                    <div class="col col-12 col-xl-6 animation-element">
                        <div class="lqd-iconbox-scale rounded-10 p-20 mb-30 transition-all mr-25percent" >
                            <div class="iconbox iconbox-side iconbox-heading-arrow-onhover flex flex-grow-1 relative" >
                                <div class="iconbox-icon-wrap">
                                    <div class="text-60 iconbox-icon-container inline-flex">
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            width="55"
                                            height="55"
                                            viewbox="0 0 55 55"
                                        >
                                            <g id="Network" transform="translate(0 -0.101)">
                                                <circle
                                                    id="Oval-3"
                                                    cx="27.5"
                                                    cy="27.5"
                                                    r="27.5"
                                                    transform="translate(0 0.101)"
                                                    fill="#b6ccf9"
                                                ></circle>
                                                <path
                                                    id="Shape-5"
                                                    d="M16.792,37.125a3.325,3.325,0,1,1,3.25-3.324A3.291,3.291,0,0,1,16.792,37.125Zm14.625-5.541a4.389,4.389,0,0,1-4.333-4.433,4.54,4.54,0,0,1,.154-1.175l-10.382-5.31L7.473,26.774a4,4,0,0,1,.11.932,3.84,3.84,0,0,1-3.792,3.878,3.88,3.88,0,0,1,0-7.757,3.736,3.736,0,0,1,2.58,1.036l8.581-5.586L6.512,12.144a4.258,4.258,0,0,1-2.179.6A4.389,4.389,0,0,1,0,8.312,4.389,4.389,0,0,1,4.333,3.879,4.389,4.389,0,0,1,8.667,8.312a4.506,4.506,0,0,1-.608,2.265l8.291,7.006L22.344,7.123a4.173,4.173,0,0,1-1.219-2.968,4.064,4.064,0,1,1,8.125,0,4.115,4.115,0,0,1-4.062,4.156,3.977,3.977,0,0,1-.949-.114l-6.1,10.646L28.32,24.051a4.254,4.254,0,0,1,3.1-1.333,4.434,4.434,0,0,1,0,8.865Z"
                                                    transform="translate(10.694 9.038)"
                                                    fill="#79a0ee"
                                                ></path>
                                                <circle
                                                    id="Oval-4"
                                                    data-name="Oval-4"
                                                    cx="6.875"
                                                    cy="6.875"
                                                    r="6.875"
                                                    transform="translate(20.275 21.774)"
                                                    fill="#4577d8"
                                                ></circle>
                                            </g>
                                        </svg>
                                    </div>
                                </div>
                                <div class="contents">
                                    <h3 class="lqd-iconbox-heading text-18 text-primary leading-1em">
                                        <span>Audience Targeting </span>
                                        <svg
                                            class="inline-block"
                                            xmlns="http://www.w3.org/2000/svg"
                                            width="12"
                                            height="32"
                                            viewbox="0 0 12 32"
                                        >
                                            <path
                                                fill="currentColor"
                                                d="M8.375 16L.437 8.062C-.125 7.5-.125 6.5.438 5.938s1.563-.563 2.126 0l9 9c.562.562.624 1.5.062 2.062l-9.063 9.063c-.312.312-.687.437-1.062.437s-.75-.125-1.063-.438c-.562-.562-.562-1.562 0-2.125z"
                                            ></path>
                                        </svg>
                                    </h3>
                                    <p>Targeting based on content (Sport, News, ...) and on emotions detected.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--  -->
        <section class="lqd-section payments pt-100 pb-80" id="payments">
            <div class="container">
                <div class="row">
                    <div class="col col-12 col-xl-6 sm:hidden">
                        <div class="sticky top-130">
                            <div class="-mb-150 lqd-imggrp-single block relative" data-float="ease-in-out">
                                <div class="lqd-imggrp-img-container inline-flex relative items-center justify-center">
                                    <figure class="w-full relative">
                                        <img width="566" height="553" src="{% static 'images/payments/payment-bg.svg' %}" alt="background circle lines"/>
                                    </figure>
                                </div>
                            </div>
                            <div
                                class="absolute top-20 w-190 module-icon-1"
                                data-parallax="true"
                                data-parallax-options=' {"start": "top bottom", "end": "top center"}'
                                data-parallax-from='{"x": "305px", "y": "250px"}'
                                data-parallax-to='{"x": "0px", "y": "0px"}'
                            >
                                <div class="lqd-imggrp-single block relative perspective" data-hover3d="true" >
                                    <div class="lqd-imggrp-img-container inline-flex relative items-center justify-center transform-style-3d" >
                                        <figure class="w-full relative" data-stacking-factor="1">
                                            <img width="384" height="384" src="{% static 'images/brands/logo_ai.png' %}" alt="logo ai"/>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="absolute top-40 w-110 module-icon-2"
                                data-parallax="true"
                                data-parallax-options='{"start": "top bottom", "end": "bottom center"}'
                                data-parallax-from='{"y": "200px"}'
                                data-parallax-to='{"y": "0px"}'
                            >
                                <div class="lqd-imggrp-single block relative perspective" data-hover3d="true">
                                    <div class="lqd-imggrp-img-container inline-flex relative items-center justify-center transform-style-3d">
                                        <figure class="w-full relative" data-stacking-factor="1">
                                            <img width="232" height="216" src="{% static 'images/brands/logo_cast.png' %}" alt="logo cast" />
                                        </figure>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="absolute w-110 top-230 module-icon-3"
                                data-parallax="true"
                                data-parallax-options='{"start": "top bottom", "end": "top center"}'
                                data-parallax-from='{"x": "220px", "y": "-30px"}'
                                data-parallax-to='{"x": "0px", "y": "0px"}'
                            >
                                <div class="lqd-imggrp-single block relative perspective" data-hover3d="true">
                                    <div class="lqd-imggrp-img-container inline-flex relative items-center justify-center transform-style-3d" >
                                        <figure class="w-full relative" data-stacking-factor="1" >
                                            <img width="232" height="216" src="{% static 'images/brands/logo_automation.png' %}" alt="logo atlas" />
                                        </figure>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="absolute w-110 top-230 module-icon-4"
                                data-parallax="true"
                                data-parallax-options='{"start": "top bottom", "end": "top center"}'
                                data-parallax-from='{"x": "-194px", "y": "-30px"}'
                                data-parallax-to='{"x": "0px", "y": "0px"}'
                            >
                                <div class="lqd-imggrp-single block relative perspective" data-hover3d="true" >
                                    <div class="lqd-imggrp-img-container inline-flex relative items-center justify-center transform-style-3d" >
                                        <figure class="w-full relative" data-stacking-factor="1" >
                                            <img width="228" height="216" src="{% static 'images/brands/logo_reporting.png' %}" alt="logo reporting"/>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                            <div class="absolute w-190 top-180 z-4 module-icon-5">
                                <div class="lqd-imggrp-single block relative perspective" data-hover3d="true">
                                    <div class="lqd-imggrp-img-container inline-flex relative items-center justify-center transform-style-3d">
                                        <figure class="w-full relative" data-stacking-factor="1">
                                            <img width="470" height="470" src="{% static 'images/brands/logo_atlas.png' %}" alt="logo automation"/>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="absolute w-190 top-20 module-icon-6"
                                data-parallax="true"
                                data-parallax-options='{"start": "top bottom", "end": "top center"}'
                                data-parallax-from='{"x": "-270px", "y": "270px"}'
                                data-parallax-to='{"x": "0px", "y": "0px"}'
                            >
                                <div class="lqd-imggrp-single block relative perspective"data-hover3d="true">
                                    <div class="lqd-imggrp-img-container inline-flex relative items-center justify-center transform-style-3d">
                                        <figure class="w-full relative" data-stacking-factor="1">
                                            <img width="384" height="384" src="{% static 'images/brands/logo_data.png' %}" alt="data logo"/>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div
                        class="col col-12 col-xl-6 lg:order-first"
                        data-custom-animations="true"
                        data-ca-options='{"animationTarget": ".animation-element, .iconbox", "startDelay" : 300, "ease": "power4.out", "initValues": {"y": "40px", "opacity" : 0} , "animations": {"y": "0px", "opacity" : 1}}'
                    >
                        <div class="mr-40 ml-130 flex flex-col lg:m-0"> 
                            <div class="ld-fancy-heading relative animation-element">
                                <h2 class="ld-fh-element mb-0/5em inline-block relative"> Elevating TV commercials with Adtlas </h2>
                            </div>
                            <div class="ld-fancy-heading relative animation-element">
                                <p class="text-18 font-normal mr-2em mb-0/5em ld-fh-element relative">
                                    <span class="text-black">Maximize your revenue by enriching your linear TV ads with digital formats, optimized for online monetization.</span>
                                    <span>Our platform enables conversion of traditional TV ad breaks with digital-friendly formats, optimized for online advertising models like CPM.</span>
                                </p>
                            </div>
                            <div class="spacer w-full animation-element">
                                <div class="w-full h-60"></div>
                            </div>
                            <div class="iconbox flex flex-grow-1 relative z-2 iconbox-circle iconbox-icon-linked mb-45 text-start">
                                <div class="iconbox-icon-wrap relative mr-20">
                                    <div class="iconbox-icon-container relative z-1 text-15 w-50 h-50 text-blue-300 bg-blue-100 rounded-full shadow-lg">
                                        <i aria-hidden="true" class="lqd-icn-ess icon-num-1"></i>
                                    </div>
                                </div>
                                <div class="contents">
                                    <h3 class="text-20 mb-15 lqd-iconbox-heading">Monetize</h3>
                                    <p class="text-16 leading-1/6em text-text">Explore and monetize your inventory beyond your territory.</p>
                                </div>
                            </div>
                            <div class="iconbox flex flex-grow-1 relative z-2 iconbox-circle iconbox-icon-linked mb-45 text-start">
                                <div class="iconbox-icon-wrap relative mr-20">
                                    <div class="iconbox-icon-container relative z-1 text-15 w-50 h-50 text-blue-300 bg-blue-100 rounded-full shadow-lg">
                                        <i aria-hidden="true" class="lqd-icn-ess icon-num-2"></i>
                                    </div>
                                </div>
                                <div class="contents">
                                    <h3 class="text-20 mb-15 lqd-iconbox-heading">Digitize </h3>
                                    <p class="text-16 leading-1/6em text-text">Digitizing your inventory and meeting video demand.</p>
                                </div>
                            </div>
                            <div class="iconbox flex flex-grow-1 relative z-2 iconbox-circle iconbox-icon-linked mb-45 text-start">
                                <div class="iconbox-icon-wrap relative mr-20">
                                    <div class="iconbox-icon-container relative z-1 text-15 w-50 h-50 text-blue-300 bg-blue-100 rounded-full shadow-lg">
                                        <i aria-hidden="true" class="lqd-icn-ess icon-num-3"></i>
                                    </div>
                                </div>
                                <div class="contents">
                                    <h3 class="text-20 mb-15 lqd-iconbox-heading"> Build </h3>
                                    <p class="text-16 leading-1/6em text-text">
                                        Build asset Data on your content and streams. Optimize inventory marketing and program schedule management.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--  -->
        <section class="lqd-section carousel-text-lg bg-white transition-all">
            <div class="ld-particles-container w-full lqd-particles-as-bg lqd-overlay flex">
                <div 
                    class="ld-particles-inner lqd-overlay flex pointer-events-auto" 
                    data-particles="true" 
                    data-particles-options="{&quot;particles&quot;: {&quot;number&quot;: {&quot;value&quot; : 4} , &quot;color&quot;: {&quot;value&quot; : [&quot;#604CFD&quot;, &quot;#FDA44C&quot;, &quot;#0FBBB4&quot;, &quot;#F85976&quot;]} , &quot;shape&quot;: {&quot;type&quot; : [&quot;circle&quot;]} , &quot;opacity&quot;: {&quot;value&quot; : 1} , &quot;size&quot;: {&quot;value&quot; : 4, &quot;random&quot;: true} , &quot;move&quot;: {&quot;enable&quot;: true, &quot;direction&quot;: &quot;none&quot;, &quot;random&quot;: true, &quot;out_mode&quot;: &quot;out&quot;}} , &quot;interactivity&quot; : [], &quot;retina_detect&quot;: true}" 
                    id="lqd-particle-text-carousel"
                >
                    <canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;" width="1905" height="599"></canvas>
                </div>
			</div>
			<div class="container-fluid p-0">
				<div class="row m-0">
					<div class="col col-12 p-0">
						<div class="carousel-container relative carousel-nav-shaped" id="carousel-text">
							<div 
                                class="carousel-items relative -mr-30 -ml-30 flickity-enabled is-draggable lqd-carousel-ready" 
                                data-lqd-flickity="{&quot;percentPosition&quot;: false, &quot;columnsAutoWidth&quot;: true, &quot;marquee&quot;: true, &quot;pauseAutoPlayOnHover&quot;: false}" 
                                tabindex="0"
                            >
                                <div class="flickity-viewport pos-rel w-100 h-100 overflow-hidden" style="height: 299.516px; touch-action: pan-y;">
                                    <div class="flickity-slider d-flex w-100 h-100 pos-rel" style="transform: translateX(-831px); will-change: transform;">
                                        <div class="carousel-item flex flex-col justify-center px-30 has-one-child is-selected" style="width: auto; position: absolute; left: 0px; transform: translateX(0px);">
											<div class="carousel-item-inner relative w-full">
												<div class="carousel-item-content relative w-full font-bold leading-1/2em module-title-top">
													<h2 class="m-0 text-inherit leading-inherit pb-0/1em text-size-inherit"><strong>Maximize Your Reach -</strong></h2>
												</div>
											</div>
										</div>
                                        <div class="carousel-item flex flex-col justify-center px-30 has-one-child" style="width: auto; position: absolute; left: 0px; transform: translateX(2574px);" aria-hidden="true">
											<div class="carousel-item-inner relative w-full">
												<div class="carousel-item-content relative w-full font-bold leading-1/2em module-title-top">
													<h2 class="m-0 text-inherit leading-inherit pb-0/1em text-size-inherit"><strong>Maximize Your Reach -</strong></h2>
												</div>
											</div>
										</div>
                                    </div>
                                </div>
                            </div>
							<div class="carousel-dots carousel-dots-to-hide carousel-text">
                                <ol class="flickity-page-dots">
                                    <li class="dot is-selected" aria-label="Page dot 1" aria-current="step"></li>
                                    <li class="dot" aria-label="Page dot 2"></li>
                                </ol>
                            </div>
                        </div>
					</div>
                    <div class="col col-12 p-0">
                        <div class="carousel-container relative carousel-nav-shaped">
                            <div 
                                class="carousel-items relative -mr-30 -ml-30 flickity-enabled flickity-rtl is-draggable lqd-carousel-ready" 
                                data-lqd-flickity="{&quot;percentPosition&quot;: false, &quot;columnsAutoWidth&quot;: true, &quot;marquee&quot;: true, &quot;rightToLeft&quot;: true, &quot;pauseAutoPlayOnHover&quot;: false}" 
                                tabindex="0"
                            >
                                <div class="flickity-viewport pos-rel w-100 h-100 overflow-hidden" style="height: 299.516px; touch-action: pan-y;">
                                    <div class="flickity-slider d-flex w-100 h-100 pos-rel" style="transform: translateX(5079px); will-change: transform;">
                                        <div class="carousel-item flex flex-col justify-center px-30 has-one-child" style="width: auto; position: absolute; right: 0px; transform: translateX(0px);" aria-hidden="true">
											<div class="carousel-item-inner relative w-full">
												<div class="carousel-item-content relative w-full font-bold leading-1/2em module-title-bottom">
													<h2 class="m-0 leading-inherit pb-0/1em text-transparent text-size-inherit"><strong>Bridging Linear TV and Digital Insights -</strong></h2>
												</div>
											</div>
										</div>
                                        <div class="carousel-item flex flex-col justify-center px-30 has-one-child is-selected" style="width: auto; position: absolute; right: 0px; transform: translateX(-4496px);">
											<div class="carousel-item-inner relative w-full">
												<div class="carousel-item-content relative w-full font-bold leading-1/2em module-title-bottom">
													<h2 class="m-0 leading-inherit pb-0/1em text-transparent text-size-inherit"><strong>Bridging Linear TV and Digital Insights -</strong></h2>
												</div>
											</div>
										</div>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-dots carousel-dots-to-hide">
                                <ol class="flickity-page-dots">
                                    <li class="dot" aria-label="Page dot 1"></li>
                                    <li class="dot is-selected" aria-label="Page dot 2" aria-current="step"></li>
                                </ol>
                            </div>
                        </div>
					</div>
				</div>
			</div>
		</section>
        <!-- solutions section -->
        <section
            class="lqd-section solutions bg-white transition-all lqd-section-scroll-activated"
            id="solutions"
            data-lqd-section-scroll="true"
            data-section-scroll-options='{"itemsSelector":  ".lqd-section-scroll-inner"}'
        >
            <div class="container p-0">
                <div class="lqd-section-scroll-inner module-img-1">
                    <div class="container">
                        <div class="row min-h-100vh items-center">
                            <div class="col col-12 col-xl-6">
                                <div class="lqd-imggrp-single block relative perspective" data-hover3d="true">
                                    <div class="lqd-imggrp-img-container inline-flex relative items-center justify-center transform-style-3d" >
                                        <figure class="w-full relative" data-stacking-factor="1" data-reveal="true" data-reveal-options='{"direction": "tb"}'>
                                            <img width="1048" height="1006" src="{% static 'images/banners/DetailedImpression.png' %}" alt="Detailed Impression solutions"/>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="col col-12 col-xl-6 p-0"
                                data-custom-animations="true"
                                data-ca-options='{"animationTarget": ".animation-element", "ease": "power4.out", "initValues": {"y": "35px", "rotationY" : -35, "opacity" : 0} , "animations": {"y": "0px", "rotationY" : 0, "opacity" : 1}}'
                            >
                                <div class="flex flex-wrap py-10 pr-160 pl-80 module-col"> 
                                    <div class="ld-fancy-heading relative animation-element">
                                        <h2
                                            class="text-48 tracking-1 ld-fh-element mb-0/5em inline-block relative"
                                            data-inview="true"
                                            data-transition-delay="true"
                                            data-delay-options=' {"elements": ".lqd-highlight-inner", "delayType": "transition"}'
                                        >
                                            <mark class="lqd-highlight">
                                                <span class="lqd-highlight-txt">Detailed</span>
                                                <span class="bottom-0 left-0 lqd-highlight-inner bg-purple-200"></span> 
                                            </mark>
                                            Impression Reporting
                                        </h2>
                                    </div>
                                    <div class="ld-fancy-heading relative animation-element">
                                        <p class="text-16 tracking-0 ld-fh-element mb-0/5em inline-block relative">
                                            Our reports include precise airing times, total impression counts, and integrated EPG data, ...
                                        </p>
                                    </div>
                                    <div class="spacer w-full animation-element">
                                        <div class="w-full h-50"></div>
                                    </div> 
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lqd-section-scroll-inner module-img-2">
                    <div class="container">
                        <div class="row min-h-100vh items-center">
                            <div class="col col-12 col-xl-6">
                                <div class="lqd-imggrp-single block relative perspective" data-hover3d="true">
                                    <div class="lqd-imggrp-img-container inline-flex relative items-center justify-center transform-style-3d">
                                        <figure class="w-full relative" data-stacking-factor="1" data-reveal="true" data-reveal-options='{"direction": "tb"}'>
                                            <img width="1048" height="1006" src="{% static 'images/banners/vast.png' %}" alt="vast tv solution" />
                                        </figure>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="col col-12 col-xl-6 p-0"
                                data-custom-animations="true"
                                data-ca-options='{"animationTarget": ".animation-element", "ease": "power4.out", "initValues": {"y": "35px", "rotationY" : -35, "opacity" : 0} , "animations": {"y": "0px", "rotationY" : 0, "opacity" : 1}}'
                            >
                                <div class="flex flex-wrap py-10 pr-160 pl-80 module-col"> 
                                    <div class="ld-fancy-heading relative animation-element">
                                        <h2
                                            class="text-48 tracking-1 ld-fh-element mb-0/5em inline-block relative"
                                            data-inview="true"
                                            data-transition-delay="true"
                                            data-delay-options=' {"elements": ".lqd-highlight-inner", "delayType": "transition"}'
                                        >
                                            <mark class="lqd-highlight">
                                                <span class="lqd-highlight-txt">API and VAST</span>
                                                <span class="bottom-0 left-0 lqd-highlight-inner bg-blue-200"></span> 
                                            </mark>
                                            Integration
                                        </h2>
                                    </div>
                                    <div class="ld-fancy-heading relative animation-element">
                                        <p class="text-16 tracking-0 ld-fh-element mb-0/5em inline-block relative">
                                            Our platform simplifies programmatic ads, integrating seamlessly with APIs and VAST.
                                        </p>
                                    </div>
                                    <div class="spacer w-full animation-element">
                                        <div class="w-full h-50"></div>
                                    </div> 
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lqd-section-scroll-inner module-img-3">
                    <div class="container">
                        <div class="row min-h-100vh items-center">
                            <div class="col col-12 col-xl-6">
                                <div class="lqd-imggrp-single block relative perspective" data-hover3d="true" >
                                    <div class="lqd-imggrp-img-container inline-flex relative items-center justify-center transform-style-3d" >
                                        <figure class="w-full relative" data-stacking-factor="1" data-reveal="true" data-reveal-options='{"direction": "tb"}' >
                                            <img width="1048" height="1006" src="{% static 'images/banners/automation.png' %}" alt="automation solution" />
                                        </figure>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="col col-12 col-xl-6 p-0"
                                data-custom-animations="true"
                                data-ca-options='{"animationTarget": ".animation-element", "ease": "power4.out", "initValues": {"y": "35px", "rotationY" : -35, "opacity" : 0} , "animations": {"y": "0px", "rotationY" : 0, "opacity" : 1}}'
                            >
                                <div class="flex flex-wrap py-10 pr-160 pl-80 module-col"> 
                                    <div class="ld-fancy-heading relative animation-element">
                                        <h2 class="text-48 tracking-1 ld-fh-element mb-0/5em inline-block relative"
                                            data-inview="true"
                                            data-transition-delay="true"
                                            data-delay-options=' {"elements": ".lqd-highlight-inner", "delayType": "transition"}'
                                        >
                                            <mark class="lqd-highlight">
                                                <span class="lqd-highlight-txt">Automation</span>
                                                <span class="bottom-0 left-0 lqd-highlight-inner bg-red-200"></span> 
                                            </mark>
                                            in Advertising
                                        </h2>
                                    </div>
                                    <div class="ld-fancy-heading relative animation-element">
                                        <p class="text-16 tracking-0 ld-fh-element mb-0/5em inline-block relative">
                                            Experience precise targeting and streamlined broadcasting with Adtlas.
                                        </p>
                                    </div> 
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- contact us with text section -->
        <section class="lqd-section subscribe transition-all bg-transparent pb-120" style="background-image: linear-gradient(180deg, #dbe4fe 0%, #fff 100%);">
            <div class="lqd-shape lqd-shape-top" data-negative="false">
                <svg class="h-60" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1000 100" preserveaspectratio="none">
                    <path class="lqd-shape-fill" d="M738,99l262-93V0H0v5.6L738,99z" fill="#fff" ></path>
                </svg>
            </div>
            <div class="container">
                <div class="row">
                    <div
                        class="col col-12 p-0"
                        data-parallax="true"
                        data-parallax-options='{"start": "top bottom", "end": "bottom+=0px top"}'
                        data-parallax-from='{"y": "100px", "scaleX" : 1, "scaleY" : 1}'
                        data-parallax-to='{"y": "-100px", "scaleX" : 1.1, "scaleY" : 1.1}'
                    >
                        <div
                            class="py-40 px-70 flex flex-wrap transition-all box-shadow-bottom w-full bg-no-repeat bg-center bg-white bg-contain relative rounded-10 rounded-bottom-0 module-section"
                            style="background-image: url('static/images/shapes/shape-subscribe.svg');"
                        >
                            <div class="w-60percent relative flex p-10 sm:w-full">
                                <p class="text-18 text-accent ld-fh-element mb-0/5em inline-block relative">
                                    Transform TV advertising with Adtlas. Our platform offers detailed, minute-by-minute viewership data for smarter ad placements.
                                </p>
                            </div>
                            <div class="w-40percent relative flex justify-end items-center p-10 sm:w-full sm:justify-center">
                                <a
                                    href="#contact-modal"
                                    class="btn btn-solid btn-md btn-icon-right btn-hover-swp text-15 rounded-4 bg-primary text-white sm:w-full"
                                    data-lity="#contact-modal"
                                >
                                    <span class="btn-txt" data-text="Contact Us">Contact Us</span>
                                    <span class="btn-icon text-1em" >
                                        <i aria-hidden="true" class="lqd-icn-ess icon-md-arrow-forward"></i> 
                                    </span>
                                    <span class="btn-icon mr-10 text-1em">
                                        <i aria-hidden="true" class="lqd-icn-ess icon-md-arrow-forward"></i>
                                    </span>
                                </a>
                            </div>
                        </div>
                        <div class="w-full relative flex items-center mb-0 module-lines">
                            <div class="divider w-25percent py-15 relative">
                                <span class="divider-separator w-full flex m-0"></span>
                            </div>
                            <div class="divider w-45percent py-15 relative">
                                <span class="divider-separator w-full flex m-0"></span>
                            </div>
                            <div class="divider w-20percent py-15 relative">
                                <span class="divider-separator w-full flex m-0"></span>
                            </div>
                            <div class="divider w-10percent py-15 relative">
                                <span class="divider-separator w-full flex m-0"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- about us section -->
        <section
            id="about-us"
            data-custom-animations="true"
            class="lqd-section tab-box bg-white transition-all py-50 "
            data-ca-options='{"animationTarget": ".animation-element", "ease": "power4.out", "initValues": {"y": "35px", "opacity" : 0} , "animations": {"y": "0px", "opacity" : 1}}'
        >
            <div class="container animation-element">
                <div class="row justify-center">
                    <div class="col col-12 col-md-10 col-lg-12 text-center pb-50 pt-20" >
                        <div class="ld-fancy-heading relative">
                            <h2
                                class="ld-fh-element mb-0/5em inline-block relative ld-gradient-heading lqd-highlight-classic lqd-highlight-grow-left lqd-highlight-reset-onhover text-44 bg-transparent"
                                data-inview="true"
                                data-transition-delay="true"
                                data-delay-options=' {"elements": ".lqd-highlight-inner", "delayType": "transition"}'
                                style="background-image: linear-gradient(250deg, #4452f2 0%, #749fef 100%);"
                            >
                                <span>About</span>
                                <mark class="lqd-highlight">
                                    <span class="lqd-highlight-txt">Us.</span>
                                    <span class="lqd-highlight-inner h-20 -bottom-5 left-0 bg-slate-100"></span>
                                </mark>
                            </h2>
                        </div>
                        <div class="px-10percent ld-fancy-heading relative">
                            <p class="ld-fh-element mb-0/5em inline-block relative text-18">
                                Leverage our Tech to enhance viewer engagement and drive higher ad revenue through precision-targeted contextual advertising based on IAB Categories. Our AI-driven technology actively links products to the show's topic, aligning with relevant IAB Categories for a seamless and highly relevant advertising experience.
                            </p>
                        </div>
                    </div>
                    <div class="col col-12 py-0">
                        <div class="flex">
                            <div
                                class="lqd-tabs lqd-tabs-style-13 flex lqd-tabs-nav-items-not-expanded flex-row-reverse lqd-nav-underline-"
                                data-tabs-options='{"trigger": "click"}'
                            >
                                <nav class="lqd-tabs-nav-wrap">
                                    <ul class="reset-ul lqd-tabs-nav flex flex-col relative" role="tablist" >
                                        <li role="presentation" >
                                            <a
                                            class="bg-transparent rounded-12 block mb-0/5em active"
                                                href="#lqd-tab-box-one"
                                                aria-expanded="true"
                                                aria-controls="lqd-tab-box-one"
                                                role="tab"
                                                data-bs-toggle="tab" 
                                            >
                                                <span class="block lqd-tabs-nav-txt">Adtlas combines AI and data analytics</span>
                                                <span class="lqd-tabs-nav-ext">
                                                    To transform TV advertising. 
                                                    Experience unparalleled audience targeting 
                                                    and ad performance insights.
                                                </span>
                                            </a>
                                        </li>
                                        <li role="presentation">
                                            <a
                                                class="bg-transparent rounded-12 block mb-0/5em"
                                                href="#lqd-tab-box-two"
                                                aria-expanded="false"
                                                aria-controls="lqd-tab-box-two"
                                                role="tab"
                                                data-bs-toggle="tab"
                                            >
                                                <span class="block lqd-tabs-nav-txt">Transparent Data and Impressions</span>
                                                <span class="lqd-tabs-nav-ext">
                                                    Provides clear insights into ad reach and viewer engagement.
                                                </span>
                                            </a>
                                        </li>
                                        <li role="presentation">
                                            <a
                                                class="bg-transparent rounded-12 block mb-0/5em"
                                                href="#lqd-tab-box-three"
                                                aria-expanded="false"
                                                aria-controls="lqd-tab-box-three"
                                                role="tab"
                                                data-bs-toggle="tab"
                                            >
                                                <span class="block lqd-tabs-nav-txt">Adtlas automates your ad processes</span>
                                                <span class="lqd-tabs-nav-ext">
                                                    Making programmatic advertising seamless. 
                                                    Experience the ease of advanced ad tech solutions.
                                                </span>
                                            </a>
                                        </li> 
                                    </ul>
                                </nav>
                                <div class="lqd-tabs-content pr-2em relative">
                                    <div id="lqd-tab-box-one" role="tabpanel" class="lqd-tabs-pane fade active">
                                        <p><img src="{% static 'images/banners/dashboard.png' %}" alt="tab box" width="1773" height="1121"/></p>
                                    </div>
                                    <div id="lqd-tab-box-two" role="tabpanel" class="lqd-tabs-pane fade">
                                        <p><img src="{% static 'images/banners/dashboard.png' %}" alt="tab box" width="1773" height="1121"/></p>
                                    </div>
                                    <div id="lqd-tab-box-three" role="tabpanel" class="lqd-tabs-pane fade">
                                        <p><img src="{% static 'images/banners/dashboard.png' %}" alt="tab box" width="1773" height="1121"/></p>
                                    </div> 
                                </div>
                            </div>
                        </div>
                    </div> 
                </div>
            </div>
        </section>  
        <!-- frequently asked question section -->
        <section 
            class="lqd-section faq bg-white transition-all pt-50 pb-90" 
            id="faq"    
            style="background-image: linear-gradient(180deg, #ffeede 5%, #fff 100%);"
        >
            <div class="container">
                <div class="row">
                    <div class="col col-12 text-center">
                        <div class="mb-25 lqd-imggrp-single block relative">
                            <div class="lqd-imggrp-img-container inline-flex relative items-center justify-center">
                                <figure class="w-full relative">
                                    <img width="54" height="54" src="{% static 'images/shapes/shape-Message-1.svg' %}" alt="message icon" />
                                </figure>
                            </div>
                        </div>
                        <div class="ld-fancy-heading relative">
                            <h2 class="ld-fh-element mb-0/5em inline-block relative text-slate-600"> Frequently Asked Questions </h2>
                        </div> 
                    </div>
                    <div class="col col-12 p-0">
                        <section class="lqd-section mt-60">
                            <div class="container">
                                <div class="row">
                                    <div class="col col-12 col-md-6 p-30">
                                        <div
                                            class="accordion accordion-md accordion-side-spacing accordion-title-circle accordion-expander-lg accordion-active-has-shadow accordion-active-has-fill"
                                            id="accordion-question-parent-1"
                                            role="tablist"
                                            aria-multiselectable="true"
                                        >
                                            <div class="accordion-item panel mb-20 active">
                                                <div class="accordion-heading" role="tab" id="heading-tab-1">
                                                    <h4 class="accordion-title">
                                                        <a
                                                            class="collapsed text-16 leading-2em bg-gray-100"
                                                            role="button"
                                                            data-bs-toggle="collapse"
                                                            href="#collapse-question-tab-1"
                                                            aria-expanded="true"
                                                            aria-controls="collapse-question-tab-1"
                                                        >
                                                            <span class="accordion-title-txt">How does real-time data impact my advertising decisions ?</span>
                                                            <span class="text-22 text-brown-500 accordion-expander">
                                                                <i class="lqd-icn-ess icon-ion-ios-add"></i>
                                                                <i class="lqd-icn-ess icon-ion-ios-remove"></i>
                                                            </span>
                                                        </a>
                                                    </h4>
                                                </div>
                                                <div
                                                    id="collapse-question-tab-1"
                                                    class="accordion-collapse collapse show"
                                                    role="tabpanel"
                                                    aria-labelledby="heading-tab-1"
                                                    data-bs-parent="#accordion-question-parent-1"
                                                >
                                                    <div class="text-15 accordion-content">
                                                        Real-time data allows you to make swift, informed adjustments to your campaigns.
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="accordion-item panel mb-20">
                                                <div class="accordion-heading" role="tab" id="heading-tab-2">
                                                    <h4 class="accordion-title">
                                                        <a
                                                            class="collapsed text-16 leading-2em bg-gray-100"
                                                            role="button"
                                                            data-bs-toggle="collapse"
                                                            href="#collapse-question-tab-2"
                                                            aria-expanded="false"
                                                            aria-controls="collapse-question-tab-2"
                                                        >
                                                            <span class="accordion-title-txt">Can Adtlas integrate with other advertising platforms ?</span>
                                                            <span class="text-22 text-brown-500 accordion-expander">
                                                                <i class="lqd-icn-ess icon-ion-ios-add"></i>
                                                                <i class="lqd-icn-ess icon-ion-ios-remove"></i>
                                                            </span>
                                                        </a>
                                                    </h4>
                                                </div>
                                                <div
                                                    id="collapse-question-tab-2"
                                                    class="accordion-collapse collapse"
                                                    role="tabpanel"
                                                    aria-labelledby="heading-tab-2"
                                                    data-bs-parent="#accordion-question-parent-1"
                                                >
                                                    <div class="text-15 accordion-content">
                                                        Yes, Adtlas can seamlessly integrate with other platforms through APIs, 
                                                        enhancing your existing digital advertising workflow.
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="accordion-item panel mb-20">
                                                <div class="accordion-heading" role="tab" id="heading-tab-3">
                                                    <h4 class="accordion-title">
                                                        <a
                                                            class="collapsed text-16 leading-2em bg-gray-100"
                                                            role="button"
                                                            data-bs-toggle="collapse"
                                                            href="#collapse-question-tab-3"
                                                            aria-expanded="false"
                                                            aria-controls="collapse-question-tab-3"
                                                        >
                                                            <span class="accordion-title-txt">Is Adtlas compatible with VAST standards ?</span>
                                                            <span class="text-22 text-brown-500 accordion-expander">
                                                                <i class="lqd-icn-ess icon-ion-ios-add"></i>
                                                                <i class="lqd-icn-ess icon-ion-ios-remove"></i>
                                                            </span>
                                                        </a>
                                                    </h4>
                                                </div>
                                                <div
                                                    id="collapse-question-tab-3"
                                                    class="accordion-collapse collapse"
                                                    role="tabpanel"
                                                    aria-labelledby="heading-tab-3"
                                                    data-bs-parent="#accordion-question-parent-1"
                                                >
                                                    <div class="text-15 accordion-content">
                                                        Absolutely, Adtlas is fully compatible with VAST standards, ensuring smooth.
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="accordion-item panel">
                                                <div
                                                    class="accordion-heading"
                                                    role="tab"
                                                    id="heading-tab-4"
                                                >
                                                    <h4 class="accordion-title">
                                                        <a
                                                            class="collapsed text-16 leading-2em bg-gray-100"
                                                            role="button"
                                                            data-bs-toggle="collapse"
                                                            href="#collapse-question-tab-4"
                                                            aria-expanded="false"
                                                            aria-controls="collapse-question-tab-4"
                                                        >
                                                            <span class="accordion-title-txt">How detailed are the impression counts in Adtlas reports ?</span>
                                                            <span class="text-22 text-brown-500 accordion-expander">
                                                                <i class="lqd-icn-ess icon-ion-ios-add"></i>
                                                                <i class="lqd-icn-ess icon-ion-ios-remove"></i>
                                                            </span>
                                                        </a>
                                                    </h4>
                                                </div>
                                                <div
                                                    id="collapse-question-tab-4"
                                                    class="accordion-collapse collapse"
                                                    role="tabpanel"
                                                    aria-labelledby="heading-tab-4"
                                                    data-bs-parent="#accordion-question-parent-1"
                                                >
                                                    <div class="text-15 accordion-content">
														Adtlas provides very detailed impression counts, 
                                                        that goes down to minute per minute stats, 
                                                        offering deep insights into the reach and engagement of your ads.
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col col-12 col-md-6 p-30">
                                        <div
                                            class="accordion accordion-md accordion-side-spacing accordion-title-circle accordion-expander-lg accordion-active-has-shadow accordion-active-has-fill"
                                            id="accordion-question-parent-2"
                                            role="tablist"
                                            aria-multiselectable="true"
                                        >
                                            <div class="accordion-item panel mb-20">
                                                <div
                                                    class="accordion-heading"
                                                    role="tab"
                                                    id="heading-tab-5"
                                                >
                                                    <h4 class="accordion-title">
                                                        <a
                                                            class="collapsed text-16 leading-2em bg-gray-100"
                                                            role="button"
                                                            data-bs-toggle="collapse"
                                                            href="#collapse-question-tab-5"
                                                            aria-expanded="false"
                                                            aria-controls="collapse-question-tab-5"
                                                        >
                                                            <span class="accordion-title-txt">How user-friendly is the Adtlas interface for first-time users ?</span>
                                                            <span class="text-22 text-brown-500 accordion-expander">       
                                                                <i class="lqd-icn-ess icon-ion-ios-add"></i>
                                                                <i class="lqd-icn-ess icon-ion-ios-remove"></i>
                                                            </span>
                                                        </a>
                                                    </h4>
                                                </div>
                                                <div
                                                    id="collapse-question-tab-5"
                                                    class="accordion-collapse collapse"
                                                    role="tabpanel"
                                                    aria-labelledby="heading-tab-5"
                                                    data-bs-parent="#accordion-question-parent-2"
                                                >
                                                    <div class="text-15 accordion-content">
													    Adtlas's interface is designed with user experience in mind, 
                                                        offering intuitive navigation and clear guidance, 
                                                        making it accessible even for first-time users.
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="accordion-item panel mb-20">
                                                <div class="accordion-heading" role="tab" id="heading-tab-6">
                                                    <h4 class="accordion-title">
                                                        <a
                                                            class="collapsed text-16 leading-2em bg-gray-100"
                                                            role="button"
                                                            data-bs-toggle="collapse"
                                                            href="#collapse-question-tab-6"
                                                            aria-expanded="false"
                                                            aria-controls="collapse-question-tab-6"
                                                        >
                                                            <span class="accordion-title-txt">How does the Adtlas interface facilitate real-time data viewing ?</span>
                                                            <span class="text-22 text-brown-500 accordion-expander">
                                                                <i class="lqd-icn-ess icon-ion-ios-add"></i>
                                                                <i class="lqd-icn-ess icon-ion-ios-remove"></i>
                                                            </span>
                                                        </a>
                                                    </h4>
                                                </div>
                                                <div
                                                    id="collapse-question-tab-6"
                                                    class="accordion-collapse collapse"
                                                    role="tabpanel"
                                                    aria-labelledby="heading-tab-6"
                                                    data-bs-parent="#accordion-question-parent-2"
                                                >
                                                    <div class="text-15 accordion-content">
														The Adtlas interface is equipped with real-time data capabilities, 
                                                        displaying up-to-date analytics and insights for immediate campaign 
                                                        tracking and decision-making.
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="accordion-item panel">
                                                <div class="accordion-heading" role="tab" id="heading-tab-7">
                                                    <h4 class="accordion-title">
                                                        <a
                                                            class="collapsed text-16 leading-2em bg-gray-100"
                                                            role="button"
                                                            data-bs-toggle="collapse"
                                                            href="#collapse-question-tab-7"
                                                            aria-expanded="false"
                                                            aria-controls="collapse-question-tab-7"
                                                        >
                                                            <span class="accordion-title-txt">Can I integrate third-party tools with the Adtlas interface ?</span>
                                                            <span class="text-22 text-brown-500 accordion-expander">
                                                                <i class="lqd-icn-ess icon-ion-ios-add"></i>
                                                                <i class="lqd-icn-ess icon-ion-ios-remove"></i>
                                                            </span>
                                                        </a>
                                                    </h4>
                                                </div>
                                                <div
                                                    id="collapse-question-tab-7"
                                                    class="accordion-collapse collapse"
                                                    role="tabpanel"
                                                    aria-labelledby="heading-tab-7"
                                                    data-bs-parent="#accordion-question-parent-2"
                                                >
                                                    <div class="text-15 accordion-content">
                                                        Yes, Adtlas allows integration with various third-party tools, 
                                                        enhancing the functionality and flexibility of the platform.
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div> 
                </div>
            </div>
        </section> 
    </div>
</main> 
{% endblock %} 

{% block extra_content %} 
<div id="contact-modal" class="lity-modal lqd-modal lity-hide" data-modal-type="fullscreen" >
    <div class="lqd-modal-inner">
        <div class="lqd-modal-head"></div>
        <div class="lqd-modal-content link-black">
            <div class="container">
                <div class="row min-h-100vh items-center">
                    <div class="w-55percent p-10 sm:w-full">
                        <div class="flex flex-col w-full pr-90 lg:pr-0">
                            <div class="ld-fancy-heading relative">
                                <h2 class="ld-fh-element mb-0/5em inline-block relative text-120 font-medium leading-0/8em text-blue-600"> Send a message </h2>
                            </div>
                            <div class="ld-fancy-heading relative">
                                <p class="ld-fh-element mb-0/5em inline-block relative text-18"> We're here to answer any question you may have. </p>
                            </div>
                            <div class="w-full flex flex-wrap">
                                <div class="w-50percent flex flex-col p-10 sm:w-full"> 
                                    <div class="ld-fancy-heading relative">
                                        <p class="ld-fh-element mb-0/5em inline-block relative">
                                            <a href="mailto:contact@adtlas.tv" class="text-16 font-bold leading-1/2em">
                                                <span> contact@adtlas.tv </span>
                                            </a>
                                        </p>
                                    </div>
                                </div> 
                            </div>
                        </div>
                    </div>
                        <div class="w-45percent sm:w-full">
                            <div class="lqd-contact-form lqd-contact-form-inputs-underlined lqd-contact-form-button-block lqd-contact-form-button-lg lqd-contact-form-button-border-none">
                                <div role="form" lang="en-US">
                                    <div class="screen-reader-response">
                                        <p role="status" aria-live="polite" aria-atomic="true"></p>
                                    </div> 
                                    <form id="contact-form" action="{% url 'core:contact' %}" method="post" class="lqd-cf-form" novalidate="novalidate" data-status="init">
                                        {% csrf_token %}
                                        <div class="row">
                                            <div class="col col-12 col-sm-6 relative py-0">
                                                <i class="lqd-icn-ess icon-lqd-user"></i>
                                                <span class="lqd-form-control-wrap">
                                                    <input
                                                        class="text-13 text-black border-black-20"
                                                        type="text"
                                                        name="name"
                                                        value=""
                                                        size="40"
                                                        aria-required="true"
                                                        aria-invalid="false"
                                                        required
                                                        placeholder="What's your name?"
                                                    />
                                                </span>
                                            </div>
                                            <div class="col col-12 col-sm-6 relative py-0">
                                                <i class="lqd-icn-ess icon-lqd-envelope"></i>
                                                <span class="lqd-form-control-wrap">
                                                    <input
                                                        class="text-13 text-black border-black-20"
                                                        type="email"
                                                        name="email"
                                                        value=""
                                                        size="40"
                                                        aria-required="true"
                                                        aria-invalid="false"
                                                        required
                                                        placeholder="Email address"
                                                    />
                                                </span>
                                            </div>
                                            <div class="col col-12 relative py-0">
                                                <i class="lqd-icn-ess icon-speech-bubble"></i>
                                                <span class="lqd-form-control-wrap">
                                                    <input
                                                        class="text-13 text-black border-black-20"
                                                        type="text"
                                                        name="subject"
                                                        value=""
                                                        size="40"
                                                        aria-required="true"
                                                        aria-invalid="false"
                                                        required
                                                        placeholder="Subject"
                                                    />
                                                </span>
                                            </div> 
                                            <div class="col col-12 lqd-form-textarea relative py-0">
                                                <i class="lqd-icn-ess icon-lqd-pen-2"></i>
                                                <span class="lqd-form-control-wrap">
                                                    <textarea
                                                        class="text-13 text-black border-black-20"
                                                        name="message"
                                                        cols="10"
                                                        rows="6"
                                                        aria-required="true"
                                                        aria-invalid="false"
                                                        required
                                                        placeholder="A brief description about your project/request/consultation"
                                                    ></textarea>
                                                </span>
                                            </div>
                                            <div class="col col-12 text-center relative py-0">
                                                <input
                                                    class="bg-primary text-white text-17 font-medium leading-1/5em hover:bg-primary hover:text-white rounded-100"
                                                    type="submit"
                                                    value="— send message"
                                                /> 
                                            </div>
                                        </div>
                                    </form>
                                <div class="lqd-cf-response-output"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="lqd-modal-foot"></div>
    </div>
</div>


<!-- Enhanced Newsletter Form Handler -->
<script src="{% static 'js/newsletter-enhanced.js' %}"></script>

<!-- SweetAlert2 for better notifications -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<!-- Contact Form AJAX Handler -->
<script src="{% static 'js/contact-ajax.js' %}"></script>

{% endblock %}