<?php

    include 'header.php';
    
    // Themes API
        $themesApi = file_get_contents('https://eclara.in/ticket_bck/tt_wht_themes_api.php');
        $allthemes = json_decode($themesApi);
    // Themes API
?>
<!-- Themes SECTION -->

<title>Themes</title>
<meta name="robots" content="index, follow">
<meta name="description" content="Graposs Connect is a group of professionals who have come together to reach out to the millions across the length and breadth of India. In the last 10 years, The Graposs Connect Team have worked in multiple ecosystems.">
<section class="aboutus-page">
    <div class="page-header">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <h1>Themes</h1>
                    <p>Home / <span>Themes</span></p>
                </div>
            </div>
        </div>
    </div>
    <style>
        /* ***************************************** PERFECTDEMOS SECTION CSS */

        .PERFECTDEMOS-page-section {
            padding: 4em 0;
            /* background-color: #fff9ef; */
        }

        .PERFECTDEMOS-page-section h4 {
            text-align: right;
            margin: 0;
            font-size: 12px;
            font-weight: 900;
            padding: 0 20px;
        }

        .PERFECTDEMOS-page-section h4 a:hover {
            text-decoration: underline;
        }

        .PERFECTDEMOS-page-section h6 {
            margin: 0;
            text-align: center;
            color: #bf8f10;
            font-size: 16px;
            font-weight: 900;
        }

        .PERFECTDEMOS-page-section img {
            width: 4%;
            margin: 0 auto;
            display: block;
        }

        .PERFECTDEMOS-page-section .PERFECTDEMOS-box {
            margin: 0 10px 20px;
            display: inline-block;
            text-align: center;
            width: 31%;
            background: #fff;
            padding: 10px;
            border: 2px solid #ededed;
        }

        .PERFECTDEMOS-page-section .PERFECTDEMOS-box img {
            width: 100%;
            border-radius: 10px;
            transform: translateY(0);
            transition-duration: 0.3s;
            /* height: 230px; */
        }

        .PERFECTDEMOS-page-section .PERFECTDEMOS-box img:hover {
            transform: translateY(-8px);
        }

        .PERFECTDEMOS-page-section .PERFECTDEMOS-box h4 {
            margin: 0;
            background: #ffd597;
            color: #000;
            font-weight: 800;
            text-align: center;
            font-size: 14px;
            padding: 12px 0;
            margin-top: 10px;
            border: 2px solid #f1c27c;
        }
        @media all and (max-width: 768px) {
            .PERFECTDEMOS-page-section .PERFECTDEMOS-box{
                width: 42%;
            }
        }    
    </style>
    <section class="PERFECTDEMOS-page-section">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12 wow fadeInLeft">
                    <?php
                        foreach ($allthemes as $th) {
                            $themeCode = base64_encode($th->theme_id);
                    ?>
                        <a href="/themeImages?x=<?php echo $themeCode; ?>">
                            <div class="PERFECTDEMOS-box wow fadeInRight">
                                <img src="<?php echo $th->image; ?>" alt="">
                                <h4><?php echo $th->theme_name; ?></h4>
                            </div>
                        </a>
                    <?php } ?>
                </div>
            </div>
        </div>
    </section>
</section>

<!-- END ABOUT US SECTION -->

<?php include 'footer.php'; ?>

<script src="/wp-content/themes/meriwebsite/js/wow.min.js"></script>
<script>
    wow = new WOW({
        boxClass: 'wow', // default
        animateClass: 'animated', // change this if you are not using animate.css
        offset: 0, // default
        mobile: true, // keep it on mobile
        live: true // track if element updates
    })
    wow.init();
</script>