<?php include_once('header.php'); ?>

<section class="blog-sec og-padd pd-flexed-aligned">

    <div class="og-abt-ball-1 pf-ball-9 og-ball" data-aos="fade-left" data-aos-duration="1500" data-aos-delay="600" id="imgPf1"></div>
    <div class="og-abt-ball-2 pf-ball-1 og-ball" data-aos="fade-left" data-aos-duration="1500" data-aos-delay="700" id="imgPf2"></div>
    <div class="og-abt-ball-3 pf-ball-2 og-ball" data-aos="fade-left" data-aos-duration="1500" data-aos-delay="800" id="imgPf3"></div>
    <!-- <div class="og-abt-ball-4 pf-ball-3 blog-bl-4 og-ball" data-aos="fade-right" data-aos-duration="1500" data-aos-delay="900" id="imgPf4"></div> -->
    <div class="og-abt-ball-5 pf-ball-4 og-ball" data-aos="fade-right" data-aos-duration="1500" data-aos-delay="1000" id="imgPf5"></div>
    <div class="og-abt-ball-6 pf-ball-5 og-ball" data-aos="fade-left" data-aos-duration="1500" data-aos-delay="1100" id="imgPf6"></div>
    <div class="og-abt-ball-7 pf-ball-6 og-ball" data-aos="fade-right" data-aos-duration="1500" data-aos-delay="1200" id="imgPf7"></div>
    <div class="og-abt-ball-8 pf-ball-7 og-ball" data-aos="fade-right" data-aos-duration="1500" data-aos-delay="1300" id="imgPf8"></div>
    <div class="og-abt-ball-9 pf-ball-9 og-ball" data-aos="fade-right" data-aos-duration="1500" data-aos-delay="1400" id="imgPf9"></div>


    <div class="container">
        <div class="row">

            <div class="col-12">
                <h3 class="og-main-header text-center" data-aos="fade-down" data-aos-duration="1500" data-aos-delay="400">News & Events</h3>
            </div>


            <div class="col-lg-4" data-aos="fade-right" data-aos-duration="1500" data-aos-delay="500">
                <a href="blog-single.php">
                    <div class="og-blog-card">
                        <div class="og-blog-crd-img">
                            <img src="assets/img/blogs/1.jpg" class="w-100">
                        </div>
                        <div class="og-blog-crd-content">

                            <h4>Ogilvy Media and Neo@Ogilvy win Bronze at Campaign Agency of the Year Awards 2018</h4>

                            <!-- <p class="og-blog-card-sub-description">Ogilvy Media, premier media agency, and Neo@Ogilvy, a leading digital agency in Sri Lanka, were awarded the ‘Rest of South Asia Media Agency of the Year – Bronze’ and the ‘Rest of…</p> -->


                            <!-- <a href="blog-single.php" class="og-blog-r-m">Read More</a> -->
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-lg-4" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="600">
                <a href="blog-single.php">
                    <div class="og-blog-card">
                        <div class="og-blog-crd-img">
                            <img src="assets/img/blogs/2.jpg" class="w-100">
                        </div>
                        <div class="og-blog-crd-content">

                            <h4>Ogilvy Media and Neo@Ogilvy win Bronze at Campaign Agency of the Year Awards 2018</h4>

                            <!-- <a href="blog-single.php" class="og-blog-r-m">Read More</a> -->
                        </div>
                    </div>
                </a>
            </div>


            <div class="col-lg-4" data-aos="fade-left" data-aos-duration="1500" data-aos-delay="700">
                <a href="blog-single.php">
                    <div class="og-blog-card">
                        <div class="og-blog-crd-img">
                            <img src="assets/img/blogs/3.png" class="w-100">
                        </div>
                        <div class="og-blog-crd-content">

                            <h4>Ogilvy Media and Neo@Ogilvy win Bronze at Campaign Agency of the Year Awards 2018</h4>

                            <!-- <a href="blog-single.php" class="og-blog-r-m">Read More</a> -->
                        </div>
                    </div>
                </a>
            </div>



            <div class="col-12 text-center" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="1000">
                <div class="og-pagination">
                    <a href=""><i class="fas fa-angle-double-left"></i></a>
                    <a href="" class="active">1</a>
                    <a href="">2</a>
                    <a href="">3</a>
                    <a href=""><i class="fas fa-angle-double-right"></i> </a>
                </div>
            </div>





        </div>
    </div>
</section>



<script>
    let image1 = document.getElementById("imgPf1");
    let image2 = document.getElementById("imgPf2");
    let image3 = document.getElementById("imgPf3");
    // let image4 = document.getElementById("imgPf4");
    let image5 = document.getElementById("imgPf5");
    let image6 = document.getElementById("imgPf6");
    let image7 = document.getElementById("imgPf7");
    let image8 = document.getElementById("imgPf8");
    let image9 = document.getElementById("imgPf9");




    window.addEventListener('mousemove', function(e) {

        let valueX = e.clientX;
        let valueY = e.clientY;


        image1.style.marginTop = valueY * 0.007 + 'px';
        image1.style.marginRight = valueX * 0.007 + 'px';

        image2.style.marginTop = valueY * 0.003 + 'px';
        image2.style.marginRight = valueX * 0.003 + 'px';

        image3.style.marginTop = valueY * 0.004 + 'px';
        image3.style.marginRight = valueX * 0.004 + 'px';

        // image4.style.marginTop = valueY * 0.006 + 'px';
        // image4.style.marginRight = valueX * 0.006 + 'px';

        image5.style.marginTop = valueY * 0.009 + 'px';
        image5.style.marginRight = valueX * 0.009 + 'px';

        image6.style.marginTop = valueY * 0.002 + 'px';
        image6.style.marginRight = valueX * 0.002 + 'px';

        image7.style.marginTop = valueY * 0.003 + 'px';
        image7.style.marginRight = valueX * 0.003 + 'px';

        image8.style.marginTop = valueY * 0.009 + 'px';
        image8.style.marginRight = valueX * 0.009 + 'px';

        image9.style.marginTop = valueY * 0.005 + 'px';
        image9.style.marginRight = valueX * 0.005 + 'px';
    })
</script>

<?php include_once('footer.php'); ?>