function custom_image_box_shortcode() {
    ob_start();
    ?>
    <style>
        /* Custom Image Box Styles */
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
        }
        #search-bar {
            text-align: center;
            margin-bottom: 20px;
			background-color:#fff;
			width:230px;
			margin:auto;
			display: flex;
        justify-content: space-between;
			border-radius: 25px;
			border:1px solid #ccc;
			box-sizing:border-box;
			padding:2px;
        }
        #search {
            border-radius: 15px;
            padding: 8px;
            transition: width 0.5s ease-in-out;
           width:230px;
			border:none;
        }
        #search-icon {
			padding:2px;
            padding-top: 8px;
       
           font-size:20px;
            cursor: pointer;
        }
      
        #image-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between; /* Adjust the alignment */
        }
        .image-box {
            width: calc(33.333% - 20px); /* 33.333% for three columns, adjust margin */
            margin: 10px;
            text-align: center;
            opacity: 1; /* Set default opacity to 1 */
            transition: opacity 0.5s ease-in-out;
        }
        .image-box img {
            max-width: 100%;
			width:100%;
            max-height: 280px;
            object-fit: cover;
        }
        
		.image-box a{
			color:#000;
			text-decoration:none!important;
		}
		
		/* Responsive Styles */
        @media only screen and (max-width: 768px) {
            .image-box {
                width: calc(50% - 20px); /* 50% for two columns, adjust margin */
            }
        }
        @media only screen and (max-width: 480px) {
            .image-box {
                width: calc(100% - 20px); /* Full width for one column */
            }
        }
       
    </style>

    <?php
    $post_counter = 0;
    $args = array(
        'post_type' => 'post', // You can change this to your custom post type if needed
        'posts_per_page' => -1,
    );

    $query = new WP_Query($args);
    ?>

    <div id="search-bar">
        
        <input type="text" id="search" oninput="filterImages()">
        <span id="search-icon" onclick="filterImages()">&#128269;</span>     
    </div>
      <div class="postcountarea">
		  <p>Showing <?php echo esc_html($query->post_count); ?> AI Tools</p>
      </div>

    <div id="image-container">
        <?php
        if ($query->have_posts()) {
            while ($query->have_posts()) {
                $query->the_post();
                $post_counter++;
                $image_url = get_the_post_thumbnail_url(get_the_ID(), 'thumbnail'); // Change 'thumbnail' to the desired image size
                $category = get_the_category()[0]->name;
                ?>
                <div class="image-box" data-name="<?php echo esc_attr(get_the_title()); ?>" data-category="<?php echo esc_attr($category); ?>">
                    <a href="<?php the_permalink(); ?>">
                        <img decoding="async" src="<?php echo esc_url($image_url); ?>" alt="<?php echo esc_attr(get_the_title()); ?>">
                        <p><?php echo esc_html(get_the_title()); ?> - <?php echo esc_html($category); ?></p>
                    </a>
                </div>
                <?php
            }
            wp_reset_postdata();
        } else {
            echo '<p>No posts found</p>';
        }
        ?>
    </div>

    <script>
        function filterImages() {
            var searchInput = document.getElementById('search').value.toLowerCase();
            var imageBoxes = document.getElementsByClassName('image-box');

            for (var i = 0; i < imageBoxes.length; i++) {
                var imageName = imageBoxes[i].getAttribute('data-name').toLowerCase();
                var category = imageBoxes[i].getAttribute('data-category').toLowerCase();
                var displayStyle = (searchInput === '' || imageName.includes(searchInput) || category.includes(searchInput)) ? 'block' : 'none';
                imageBoxes[i].style.display = displayStyle;
            }

            // Adding fade-in animation
            setTimeout(function() {
                for (var i = 0; i < imageBoxes.length; i++) {
                    imageBoxes[i].style.opacity = 1;
                }
            }, 100);
        }

        function toggleBackground() {
            var body = document.body;
            body.classList.toggle('dark-background');

            // Toggle text color for post count
            var postCount = document.querySelector('#search-bar p');
            if (body.classList.contains('dark-background')) {
                postCount.style.color = '#fff';
            } else {
                postCount.style.color = ''; // Reset to default color
            }
        }
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('custom_image_box', 'custom_image_box_shortcode');