/*  1)related-post.php */
        /* CSS for Related Posts Grid Layout */
        .cenote-related-post-container {
            margin-top: 40px; /* Adjust top margin for spacing */
        }

        .cenote-related-post-container .grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* 4 columns for large screens */
            gap: 20px; /* Space between items */
            margin-top: 20px;
        }

        .cenote-related-post-container .grid-container .post-item {
            background-color: #fff;
            border: 1px solid #ddd;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .cenote-related-post-container .grid-container .post-item:hover {
            border-color: #0073e6;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        .cenote-related-post-container .grid-container .post-thumbnail {
            height: 120px;  /* Adjusted height for images */
            overflow: hidden;
            margin-bottom: 10px;
        }

        .cenote-related-post-container .grid-container .post-thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .cenote-related-post-container .grid-container .post-item h2 {
            font-size: 1.25rem;
            margin: 10px 0;
        }

        .cenote-related-post-container .grid-container .post-item h2 a {
            color: #333;
            text-decoration: none;
        }

        .cenote-related-post-container .grid-container .post-item h2 a:hover {
            color: #0073e6;
        }

        .cenote-related-post-container .grid-container .post-meta {
            font-size: 0.85rem;
            color: #777;
            margin-bottom: 10px;
        }

        .cenote-related-post-container .grid-container .post-excerpt {
            font-size: 0.9rem;
            color: #555;
            margin-bottom: 15px;
        }

        /* Make related posts stack on smaller screens */
        @media (max-width: 768px) {
            .cenote-related-post-container .grid-container {
                grid-template-columns: repeat(2, 1fr); /* 2 columns on smaller screens */
            }
        }

        @media (max-width: 480px) {
            .cenote-related-post-container .grid-container {
                grid-template-columns: 1fr; /* 1 column on mobile screens */
            }
        }
       
/*  2)single.php */
        /* Single Post Page Styles */
        .single-post-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        /* Post Title */
        .single-post-container .single-post-title {
            font-size: 2rem;
            margin: 20px 0;
            color: #333;
        }

        /* Post Meta */
        .single-post-container .post-meta {
            font-size: 0.9rem;
            color: #777;
            margin-bottom: 20px;
        }

        /* Post Content */
        .single-post-container .single-post-content {
            font-size: 1.1rem;
            color: #555;
            line-height: 1.6;
            margin-bottom: 30px;
        }

        /* Post Thumbnail */
        .single-post-container .single-post-thumbnail {
            margin-bottom: 20px;
        }

        .single-post-container .single-post-thumbnail img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }

        /* Comments Section */
        .single-post-container .comments-section {
            margin-top: 50px;
            border-top: 1px solid #ddd;
            padding-top: 30px;
        }

        .single-post-container .comment-item {
            margin-bottom: 20px;
            border-bottom: 1px solid #eee;
            padding-bottom: 20px;
        }

        .single-post-container .comment-author {
            font-weight: bold;
            color: #333;
        }

        .single-post-container .comment-content {
            font-size: 1rem;
            color: #555;
        }

        /* Pagination Links */
        .single-post-container .pagination {
            display: flex;
            justify-content: center;
            margin-top: 40px;
        }

        .single-post-container .page-numbers {
            background-color: #f4f4f4;
            color: #333;
            border-radius: 5px;
            padding: 10px 20px;
            margin: 0 5px;
            text-decoration: none;
        }

        .single-post-container .page-numbers.current {
            background-color: #16181a;
            color: white;
        }

        .single-post-container .page-numbers:hover {
            background-color: #0073e6;
            color: white;
        }

        /* No posts message */
        .single-post-container .no-posts-message {
            font-size: 2rem;
            color: #ff0000;
            text-align: center;
            margin-top: 50px;
        }

/*  3)page-blog 2.php  4) category.php 5) tag.php */
        #blog-page {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        #blog-search {
            margin-bottom: 30px;
            text-align: center;
        }

        #blog-search input[type="search"] {
            padding: 10px;
            font-size: 16px;
            width: 80%;
            max-width: 600px;
        }

        .blog-posts, .tag-posts {
            margin-top: 20px;
        }

        /* Grid Layout for Blog Posts */
        .blog-posts .grid-container, .tag-posts .grid-container{
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 3 posts per row */
            gap: 20px; /* Space between posts */
        }

        .blog-posts .post-item, .tag-posts .post-item{
            background-color: #fff;
            border: 1px solid #ddd; /* Simple border around each post */
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .blog-posts .post-item:hover, .tag-posts .post-item:hover{
            border-color: #0073e6; /* Change border color on hover */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        /* Post Thumbnail Container */
        .blog-posts .post-thumbnail, .tag-posts .post-thumbnail{
            height: 200px; 
            overflow: hidden; 
        }

        .blog-posts .post-thumbnail img, .tag-posts .post-thumbnail img{
            width: 100%; 
            height: 100%; 
            object-fit: cover; 
        }
        /* Post Title */
        .blog-posts .post-item h2, .tag-posts .post-item h2{
            font-size: 1.5rem;
            margin: 15px 0;
        }

        .blog-posts .post-item h2 a, .tag-posts .post-item h2 a{
            color: #333;
            text-decoration: none;
        }

        .blog-posts .post-item h2 a:hover, .tag-posts .post-item h2 a:hover {
            color: #0073e6;
        }

        /* Post Meta */
        .blog-posts .post-meta, .tag-posts .post-meta{
            font-size: 0.9rem;
            color: #777;
            margin-bottom: 10px;
        }

        /* Excerpt Styling */
        .blog-posts .post-excerpt, .tag-posts .post-excerpt {
            font-size: 1rem;
            color: #555;
        }

        /* Pagination Container */
        .blog-posts .pagination, .tag-posts .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 40px; /* Space between posts and pagination */
            padding: 20px 0;  /* Padding on top and bottom of pagination */
            clear: both; /* Clear floats if any */
        }

        /* Individual Pagination Links */
        .blog-posts .page-numbers, .tag-posts .page-numbers {
            background-color: #f4f4f4;
            color: #333;
            border-radius: 5px;
            padding: 10px 20px;
            margin: 0 5px;
            text-decoration: none;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        /* Active Page */
        .blog-posts .page-numbers.current, .tag-posts .page-numbers.current {
            background-color: #16181a;
            color: white;
            font-weight: bold;
            pointer-events: none; /* Disable clicks on active page */
        }

        /* Hover Effect on Pagination Links */
        .blog-posts .page-numbers:hover, .tag-posts .page-numbers:hover {
            background-color: #16181a;
            color: white;
            transform: translateY(-2px); /* Slight lift effect */
        }

        /* Previous and Next Page Styling */
        .blog-posts .page-numbers.prev, 
        .blog-posts .page-numbers.next,  
        .tag-posts .page-numbers.prev, 
        .tag-posts .page-numbers.prev{
            font-weight: bold;
        }

        /* Disabled Pagination Links (when no previous/next pages) */
        .blog-posts .page-numbers.disabled, .tag-posts .page-numbers.disabled {
            background-color: #e6e6e6;
            color: #ccc;
            cursor: not-allowed;
        }

        /* First and Last Pages */
        .blog-posts .page-numbers:first-child, .tag-posts .page-numbers:first-child {
            border-radius: 5px 0 0 5px;
        }

        .blog-posts .page-numbers:last-child, .tag-posts .page-numbers:last-child {
            border-radius: 0 5px 5px 0;
        }

        /* Adjust the "Previous" and "Next" buttons */
        .blog-posts .page-numbers.prev,
        .blog-posts .page-numbers.next,
        .tag-posts .page-numbers.prev,
        .tag-posts .page-numbers.next
        {
            font-weight: bold;
        }

        /* No posts message */
        .blog-posts .no-posts-message, .tag-posts .no-posts-message {
            font-size: 2rem;
            color: #ff0000;
            text-align: center;
            margin-top: 50px;
        }  

/*  6) 404.php  */
	.container.py-5 {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	/* Video Styling */
	.container.py-5 video {
		max-width: 100%;
		width: 1280px; /* adjust if needed */
		height: auto;
		margin-bottom: 30px;
		border-radius: 10px;
	}

	/* Button Wrapper */
	.container .btnWrap {
		margin-top: 20px;
	}

	/* Button Design */
	.container .commonBtn {
		display: inline-block;
		padding: 12px 30px;
		background-color: #000;
		color: #fff;
		text-decoration: none;
		font-size: 16px;
		font-weight: 600;
		border: 2px solid #000;
		transition: all 0.3s ease;
		border-radius: 30px;
	}

	/* Hover Effect */
	.container .commonBtn:hover {
		background-color: #fff;
		color: #000;
		border-color: #000;
	}