/*
Theme Name: Kartnic
Author: Niteen Maurya
Description: Kartnic is crafted to be a lightweight and fast WordPress theme, ensuring your site loads quickly and efficiently. A fresh install of Kartnic adds less than 10kb (gzipped) to your page size, making it an excellent choice for performance-conscious users. We fully leverage the block editor (Gutenberg), providing you with greater control over your content creation process. If you prefer using page builders, Kartnic is compatible with major ones like Beaver Builder and Elementor. Our commitment to WordPress coding standards ensures compatibility with well-coded plugins, including WooCommerce. Kartnic is fully responsive, uses valid HTML/CSS, and is translated into multiple languages by our community of users. Some of our features include customizable color controls, dynamic typography, multiple navigation locations, and widget areas.
Version: 3.0.4
Requires at least: 5.0
Tested up to: 6.2
Requires PHP: 7.0
License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kartnic
Tags: two-columns, three-columns, one-column, right-sidebar, left-sidebar, footer-widgets, blog, e-commerce, flexible-header, full-width-template, buddypress, custom-header, custom-background, custom-menu, custom-colors, sticky-post, threaded-comments, translation-ready, featured-images, theme-options
Copyright: © 2024 Niteen. All rights reserved.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Reset
# Elements
# Forms
# Links
# Alignments
# Accessibility
# Clearings
# Navigation
    # Mobile Menu
    # Navigation Search
    # Dropdown Menus
    # Sidebar Navigation
    # Navigation Layout
# Post Navigation
# Header
# Post Content
# Widgets
# Content Layout
# Footer
# Featured Images
# Top Bar
# Icons
# Compatibility
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Reset
--------------------------------------------------------------*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
	border: 0;
	margin: 0;
	padding: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
	display: block;
}

ol,
ul {
	list-style: none;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline; 
}

/* Underline links in posts, excerpts, comments, and text widgets */
.entry-content a,
.entry-summary a,
.comment-content a,
.widget_text a {
    text-decoration: underline;
}

a img {
	border: 0;
}

.widget { 
	background-color: rgb(255, 255, 255);
	padding: 10px;
	margin-bottom: var(--separating-space);
}

.widget ul li {
    list-style-type: none;
    position: relative;
    margin-bottom: .5em;
}

.comments-area,
#content-area,
.post-site-main article,
.post-navigation,
.mobile-drop-navigation,
.page-title,
.sub-menu,
.site-info,
.error-page,
#cont-site article,
#kartnic-comments,
.custom-footer-section {
	background-color: rgb(255, 255, 255);
}

.nav-links {
	margin-bottom: var(--separating-space);
	background-color: rgb(255, 255, 255);
}

.container {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--container-width, 1200px); /* Default to 1200px */
	padding-left: 0px;
	padding-right: 0px;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
body {
	background-color: rgb(240, 240, 244);
}

body,
button,
input,
select,
textarea {
	font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-weight: normal;
	text-transform: none;
	font-size: 17px;
	line-height: 1.5;
}

p {
	margin-bottom: 1.5em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: inherit;
	font-style: inherit;
	font-weight: inherit;
}

pre {
	background: rgba(0, 0, 0, 0.05);
	font-family: inherit;
	font-size: inherit;
	line-height: normal;
	margin-bottom: 1.5em;
	padding: 20px;
	overflow: auto;
	max-width: 100%;
}

blockquote {
	border-left: 5px solid rgba(0, 0, 0, 0.05);
	padding: 20px;
	font-size: 1.2em;
	font-style: italic;
	margin: 0 0 1.5em;
	position: relative;
}

blockquote p:last-child {
	margin: 0;
}

table,
th,
td {
	border: 1px solid rgba(0, 0, 0, 0.1);
}

table {
	border-collapse: separate;
	border-spacing: 0;
	border-width: 1px 0 0 1px;
	margin: 0 0 1.5em;
	width: 100%;
}

th,
td {
	padding: 8px;
}

th {
	border-width: 0 1px 1px 0;
}

td {
	border-width: 0 1px 1px 0;
}

hr {
	background-color: rgba(115, 255, 0, 0.1);
	border: 0;
	height: 1px;
	margin-bottom: 40px;
	margin-top: 40px;
}

.entry-title,
.main-entry-title,
.entry-content h1, 
.entry-content h2, 
.entry-content h3, 
.entry-content h4, 
.entry-content h5, 
.entry-content h6 {
	line-height: 1.4em;
	font-family: Arial;
    font-weight: 600;
	text-transform: none;
	margin-bottom: 20px;
}

.main-entry-title {
	font-size: 30px;
}

.entry-title {
	font-size: 28px;
}

.entry-content h1 {
	font-size: 28px;
}

.entry-content h2 {
	font-size: 24px;
}

.entry-content h3 {
	font-size: 22px;
}

.entry-content h4 {
	font-size: 20px;
}

.entry-content h5 {
font-size: 19px;
}

.entry-content h6 {
	font-size: 18px;
}

.entry-content p {
	font-size: 17px;
	line-height: 1.8em;
	color: #000000;
}

h1 {
	font-size: 30px;
	font-style: normal;
	margin-bottom: 20px;
	line-height: 1.2em;
    font-weight: 600;
	text-transform: none;
}

h2 {
	font-size: 23px;
	margin-bottom: 20px;
	line-height: 1.2em;
    font-weight: 500;
	text-transform: none;
}

h3 {
	font-size: 20px;
	margin-bottom: 20px;
	line-height: 1.2em;
	font-weight: 400;
	text-transform: none;
}

h4,
h5,
h6 {
	margin-bottom: 20px;
}

ul,
ol {
	text-decoration: none;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

figure {
	margin: 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

th {
	font-weight: bold;
}

img {
	height: auto;
	max-width: 100%;
}

.thread-even,
.post-categories,
.wp-block-archives li,
.wp-block-categories li {
	list-style: none;
}

.wp-caption {
    max-width: 100%;
    text-align: center;
    margin: 1.5em 0;
}

.wp-caption-text {
    margin-top: 0.5em;
    font-size: 0.9em;
    color: #6c757d;
}

.gallery-caption {
    margin-top: 0.5em;
    font-size: 0.9em;
    color: #6c757d;
}

 

.alignright {
    float: right;
    margin-left: 1.5em;
}


.alignleft {
    float: left;
    margin-right: 1.5em;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px); 
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important; 
}


.screen-reader-text:focus {
    background-color: #eee;
    clip: auto !important;
    clip-path: none;
    color: #444;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000; /* Above WP toolbar */
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input,
select,
textarea {
	font-size: 100%;
	margin: 0;
	vertical-align: baseline;
	vertical-align: middle;
}

button,
input[type="reset"],
input[type="submit"] {
	border: 1px solid rgb(0, 0, 0);
	background: #000000;
	cursor: pointer;
	-webkit-appearance: button;
	padding: 10px 20px;
	color: #ffffff;
}

input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

input[type="search"] {
	-webkit-appearance: textfield;
	box-sizing: content-box;
}

input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
	background: #FAFAFA;
	color: #666;
	border: 1px solid #ccc;
	border-radius: 0px;
	padding: 10px 15px;
	box-sizing: border-box;
	max-width: 100%;
}

textarea {
	overflow: auto;
	vertical-align: top;
	width: 100%;
}

input[type="file"] {
	max-width: 100%;
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Links
--------------------------------------------------------------*/
a:focus, button:focus {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
.menu-toggle {
	border: 0;
	padding: 0 10px;
	line-height: 60px;
	margin: 0;
	font-weight: 400;
	text-transform: none;
	font-size: 15px;
	cursor: pointer;
	background-color: transparent;
}

.main-navigation {
	z-index: 100;
	padding: 0;
	clear: both;
	display: block;
}

.sub-menu {
	background-color: #ffffff;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation a {
	display: block;
	text-decoration: none;
	font-weight: 400;
	text-transform: none;
	font-size: 15px;
}

.inside-navigation {
	position: relative;
}

.main-navigation li {
	float: left;
	position: relative;
}

.sf-menu > li.menu-item-float-right {
	float: right !important;
}

.nav-float-right .inside-header .main-navigation {
	float: right;
	clear: right;
}

.nav-float-left .inside-header .main-navigation {
	float: left;
	clear: left;
}

.nav-aligned-right .main-navigation:not(.toggled) .menu > li,
.nav-aligned-center .main-navigation:not(.toggled) .menu > li {
	float: none;
	display: inline-block;
}

.nav-aligned-right .main-navigation:not(.toggled) ul,
.nav-aligned-center .main-navigation:not(.toggled) ul {
	letter-spacing: -0.31em;
	font-size: 1em;
}

.nav-aligned-right .main-navigation:not(.toggled) ul li,
.nav-aligned-center .main-navigation:not(.toggled) ul li {
	letter-spacing: normal;
}

.nav-aligned-center .main-navigation {
	text-align: center;
}

.nav-aligned-right .main-navigation {
	text-align: right;
}

.main-navigation li.search-item {
	float: right;
}

.main-navigation .mobile-bar-items a {
	padding-left: 20px;
	padding-right: 20px;
	line-height: 60px;
}

.feather-search {
	height: 1em;
	width: 1em;
	position: relative;
}

/*--------------------------------------------------------------
## Dropdown Menus
--------------------------------------------------------------*/
/* Main Navigation */
.main-navigation {
    display: flex;
}

/* Hide sub-menus by default */
.mobile-drop-navigation .sub-menu {
    display: none;
}

/* Style for the toggle button */
.toggle-button {
    float: right;
    cursor: pointer;
    padding: 5px;
}

/* Submenu */
.main-navigation ul ul {
    display: none;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
    position: absolute;
    left: 0;
    top: 100%; /* Position submenu below the parent menu item */
    opacity: 0;
    z-index: 99999;
    padding: 10px; /* Padding */
    text-align: left;
    transition: opacity 200ms ease-in-out, height 200ms ease-in-out;
    pointer-events: none;
    height: 0;
    overflow: hidden;
}

/* Ensure submenu list items are displayed as block (vertical) */
.main-navigation ul ul li {
    display: block; /* Stack items vertically */
    width: 100%; /* Ensure they take full width of the parent submenu */
}

/* Make submenu visible when hovered or active */
.main-navigation ul li:hover > ul {
    display: block;
    opacity: 1;
    height: auto; /* Expand to fit content */
    pointer-events: auto;
}

/* Show submenu on hover and focus */
.main-navigation:not(.toggled) ul li:hover > ul,
.main-navigation:not(.toggled) ul li:focus-within > ul {
    display: block;
    left: 0;
    top: 100%;
    opacity: 1;
    pointer-events: auto;
    height: auto;
    overflow: visible; 
}

/* Nested submenu */
.main-navigation ul ul ul {
    top: 100%; /* Position nested submenu below the parent submenu */
    left: 0;
}

/* Add arrow icon for submenu */
.main-navigation li.menu-item-has-children > a::after {
    content: '▼'; /* Arrow pointing down */
    margin-left: 5px;
    font-size: 12px;
    color: #000; /* Change color as needed */
}

/* Adjust arrow for nested submenus */
.main-navigation li.menu-item-has-children ul li.menu-item-has-children > a::after {
    content: '▼'; /* Arrow pointing down for nested submenus */
    margin-left: 5px;
    font-size: 12px;
    color: #000; /* Change color as needed */
}

/*--------------------------------------------------------------
## Sidebar Navigation
--------------------------------------------------------------*/
.widget-area .main-navigation li {
	float: none;
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
}

.middle-right-bottom {
	margin-top: var(--separating-space);
	list-style: none;
}

@media (min-width: 768px) {
    .site-content {
        display: flex;
        gap: var(--separating-space);
        width: 100%;
    }

	.sidebar-left .middle-right-bottom {
		flex: 1 1 30%;
		max-width: 30%;
		order: 1; /* Sidebar pehle dikhane ke liye */
	}
	
	.sidebar-left .content-area  {
		flex: 1 1 70%;
		max-width: 70%;
		order: 2; /* Content area baad mein dikhane ke liye */
	}
	
	.sidebar-right .middle-right-bottom {
		flex: 1 1 30%;
		max-width: 30%;
		order: 2; /* Sidebar baad mein dikhane ke liye */
	}
	
	.sidebar-right .content-area  {
		flex: 1 1 70%;
		max-width: 70%;
		order: 1; /* Content area pehle dikhane ke liye */
	}
	
	.sidebar-no-sidebar .middle-right-bottom {
		display: none; /* Sidebar ko hide karne ke liye */
	}
	
	.sidebar-no-sidebar .content-area  {
		flex: 1 1 100%;
		max-width: 100%; /* Content area ko full width karne ke liye */
	}
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.main-navigation {
	display: flex;
}

#mobile-nav li a {
    display: block;
    text-align: left;
    padding: 0px 15px;
    text-decoration: none;
}

.search-up {
	display: none;
}

.inside-header {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0px 20px 0px 20px;
}

.site-branding .main-title {
	margin: 0;
    font-size: 20px;
    line-height: 1.2em;
    word-wrap: break-word;
    font-weight: 700;
    text-transform: none; 
}

.site-branding .site-description {
	margin: 0;
    line-height: 1.5;
    font-weight: 400;
    text-transform: none;
    font-size: 15px;
}

.site-header   {
	padding: 10px 0px 10px 0px;
	align-items: center;
	line-height: 40px;
}

/* Full-width header */
.site-header:not(.container) {
    width: 100%;
}

.site-logo {
	display: inline-block;
	max-width: 100%;
}

.site-header .header-image {
	vertical-align: middle;
}

.header-widget {
	float: right;
	overflow: hidden;
	max-width: 50%;
} 

.header-widget .widget {
	padding: 0 0 20px;
	margin-bottom: 0;
}

.header-widget .widget:last-child {
	padding-bottom: 0;
}

.header-widget .widget-title {
	margin-bottom: 15px;
}

.nav-float-right .header-widget {
	position: relative;
	top: -10px;
}

.nav-float-right .header-widget .widget {
	padding: 0 0 10px;
}

.nav-float-left .inside-header .site-branding,
.nav-float-left .inside-header .site-logo {
	float: right;
	clear: right;
}

.nav-float-left .inside-header:after {
	clear: both;
	content: '';
	display: table;
}

.nav-float-right .inside-header .site-branding {
	display: inline-block;
}

.site-branding-container {
	display: inline-flex;
    align-items: center;
    text-align: left;
    flex-shrink: 1;
}

.site-branding-container img {
	margin-right: 1em;
}

.header-aligned-center .inside-header {
	text-align: center;
}

.header-aligned-right .inside-header {
	text-align: right;
}

.header-aligned-right .site-branding-container {
	text-align: right;
}

.header-aligned-right .site-branding-container .site-logo {
	order: 10;
	margin-right: 0;
	margin-left: 1.5em;
}

/* When 'navigation_left' is chosen */
.navigation-left .main-navigation, 
.navigation-left .mobile-main-navigation {
    margin-right: auto !important;
    margin-left: 0;
}

/* When 'navigation_right' is chosen */
.navigation-right .main-navigation, 
.navigation-right .mobile-main-navigation {
    margin-left: auto !important;
    margin-right: 0;
}

/* Ensure the inside header uses space-between to distribute items properly */
.inside-header {
    display: flex;
	column-gap: 8px;
    justify-content: space-between;
}

/* Optional: Mobile menu button styles to adjust visibility and proper display */
.mobile-menu-toggle {
    display: inline-block;
}

/* Adjustments for the mobile sub-navigation */
.mobile-drop-navigation {
    display: none;
}

.menu-bar-items {
    gap: 6px;
}

/*--------------------------------------------------------------
# Content Layout
--------------------------------------------------------------*/
 
.read-btn {
    text-align: right; /* Aligns the button to the right */
    margin-top: 10px;
}

.read-btn input[type="button"] {
    font-size: 15px;
    border: 3px solid rgb(255, 255, 255);
    background: #38383a;
    cursor: pointer;
    padding: 10px 20px;
    color: #ffffff;
    border-radius: 0px;
}

.page-title {
	font-size: 26px;
	margin-bottom: 0px;
	padding: 20px;
}

.site-cont { 
	display: flex;
	display: grid;
	column-gap: var(--separating-space);
	grid-template-columns: repeat(1, minmax(200px, 1fr));
}

.site-content-area {
	word-wrap: break-word;
}

#cont-site article, .featured-post-container {
	padding-top: var(--padding-top);
	padding-right: var(--padding-right);
	padding-bottom: var(--padding-bottom);
	padding-left: var(--padding-left);
	margin-top: var(--separating-space);
}

@media (min-width: 768px) {
	.site-cont {
		margin-bottom: var(--separating-space);
		grid-template-columns: repeat(2, minmax(200px, 1fr));
	}
}

.post-categories a, .post-tags a {
    color: #0073aa;
    text-decoration: none;
}

.post-categories a:hover, .post-tags a:hover {
    text-decoration: underline;
}

.leave-comment-link {
    font-size: 14px;
    color: #0073aa;
    text-decoration: none;
    margin-top: 10px;
}

.leave-comment-link:hover {
    text-decoration: underline;
}

/*--------------------------------------------------------------
# Post Content
--------------------------------------------------------------*/
.sticky {
	display: block;
}

.inside-article {
	margin-top: var(--separating-space);
	margin-bottom: var(--separating-space);
	padding-top: var(--padding-top);
	padding-right: var(--padding-right);
	padding-bottom: var(--padding-bottom);
	padding-left: var(--padding-left);
}

.inside-article article {
	margin-bottom: 10px;
}

.page-content:not(:first-child),
.entry-content:not(:first-child),
.entry-summary:not(:first-child) {
	margin-top: var(--content-separator);
}

.entry-content ul{
	margin: 0 0 1.5em 3em;
}

.site-content,
.entry-header {
	word-wrap: break-word;
}

.entry-meta {
	font-size: 85%;
	margin-top: .5em;
	line-height: 1.5;
}

.post-meta {
	margin-top: var(--content-separator);
}

footer.entry-meta {
	margin-top: 2em;
}

#content-area {
	margin-top: var(--separating-space);
	margin-bottom: var(--separating-space);
	padding-top: var(--padding-top);
	padding-right: var(--padding-right);
	padding-bottom: var(--padding-bottom);
	padding-left: var(--padding-left);
}


/*--------------------------------------------------------------
# Comments
--------------------------------------------------------------*/
#kartnic-comments {
	padding: 10px;
	margin-bottom: var(--separating-space);
	text-decoration: none;
}

.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

.comment,
.comment-list {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
 
.comment-meta .avatar {
	float: left;
	margin-right: 10px;
	border-radius: 50%;
}
 
.comment-content {
	margin-top: 1.5em;
}
 

.comment-metadata .edit-link:before {
	display: none;
}

.comment-author .says {
    display: none;
}


.comment-body {
	padding: 30px 0;
}

.comment-content {
	padding: 30px;
	border: 1px solid rgba(0, 0, 0, 0.05);
}


.comment .children {
	padding-left: 10px;
	margin-top: -0px;
	border-left: 1px solid rgba(0, 0, 0, 0.05);
}

#cancel-comment-reply-link {
	padding-left: 10px;
	font-size: large;
}

#reply-title {
	font-size: large;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.custom-footer {
	padding: 10px;
}

.copyright-bar {
	text-align: center;
	font-size: 15px;
	padding: 20px 0px;
}

.mainn-nafvigation {
	display: none;
}

.custom-footer,
.footer-1 {
	padding: 0px;
}

@media (min-width: 768px) {
.inside-footer-widgets{
	gap: 15px;
	display: flex;
}

.inside-footer-widgets > div {
	flex: 1 1 0;
}

.inside-footer-widgets .widget{
    
    padding: 0px;
    margin-bottom: 0px;
}}

.inside-footer-widgets {
padding: 40px;	
}

@media (max-width: 768px) {
    .inside-footer-widgets {
        flex-direction: column;
    }
}
@media (max-width: 768px) {
    .site-footer .footer-widgets .footer-widgets-container .inside-footer-widgets {
        margin: 0;
    }
}

.sr-form {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.2);
	display: flex;
	justify-content: center;
	padding-top: 25vh;
	z-index: 10000;
	backdrop-filter: blur(3px);
	transition: opacity 500ms ease;
}

.search-form-search {
	position: fixed;
	z-index: 10000;
}

.main-navigation {
	display: flex;
}

.mmenu-dafr-container a {
	width: 100%;

}

@media (max-width: 768px) {

	.mobile-main-navigation {
		display: flex;
 
	}
	.mobile-drop-navigation {
		padding-left: 20px;
		padding-right: 20px;
		line-height: 60px;
	}
	
	.mobile-drop-navigation li {
		list-style: none;
	}
	.hide {
		display: block !important;
	}
}

.open {
	display: block;
}

.openn {
	display: none;
}

.mobile-drop-navigation {
	display: none;
}

.mobile-icon-search-bars {
	display: none;
}
.menu-bar-items {
	display: flex;
}

.menu-bar-items-2 {
	margin-top: 3.5px;
}

.back-to-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: none;
	background-color: #4b35d7;
	color: #fff;
	padding: 10px;
	border-radius: 5px;
	text-align: center;
	z-index: 1000;
	cursor: pointer;
	transition: opacity 0.3s ease;
}

.back-to-top:hover {
	opacity: 0.8;
}

/* Keep the search form hidden by default */
.search-form {
    display: none; /* Initially hidden */
    opacity: 0;
    transition: opacity 0.3s ease; /* Optional: smooth transition for opacity */
}

/* When open, show the search form */
.search-form.open {
    display: block; /* Make it visible when the .open class is applied */
    opacity: 1; /* Make the form visible */
}

#menu-bar-item-2, #menu-bar-item {
	cursor: pointer;
}

/* Default styling for post navigation */
.post-navigation {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--separating-space);
}

/* If there is no previous or next post, hide the post navigation */
.no-post-navigation .post-navigation {
    display: none;
}


.nav-previous, .nav-next {
    flex: 1;
    text-align: center;
}

.nav-previous a, .nav-next a {
    display: inline-block;
    padding: 10px 20px;
    color: #0073aa;
    text-decoration: none;
    font-size: 14px;
}

.nav-previous a, .nav-next a {
    background-color: transparent; 
    color: #0073aa;
}

.meta-nav {
    font-weight: bold;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px;
    z-index: 100;
}
.skip-link:focus {
    top: 0;
}

.nav-links {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 20px;
}

.pagination nav {
	padding: 0;
}

.pagination a {
    color: #007bff;
    padding: 0px 5px;
    text-decoration: none;
    margin: 0px;
    transition: background-color 0.3s, color 0.3s;
}

.pagination a:hover {
    color: #007bff;
}
 
button.mobile-menu-toggle {
    border: 0px;
	background: none;

}

.mobile-menu-toggle {
	padding: 0px;
}

.entry-meta {
    font-size: 14px;  
    color: #666; 
    display: flex;  
    align-items: center; 
}

.entry-meta .byline {
    display: flex;  
    align-items: center;  
    margin-right: 10px;  
}

.entry-meta .byline img {
    max-width: 32px; 
    height: auto;  
    border-radius: 50%; 
    margin-right: 5px; 
}

.post-image {
    text-align: center;
    margin-bottom: var(--content-separator);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* CSS for featured image when below title */
.kartnic-featured-image-below-title {
    margin-top: 2rem;
}

.post-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.author-posts {
    margin-bottom: 10px;
	padding: 10px;
	background-color: rgb(255, 255, 255);
}

.kartnic-author-card {
    background-color: #fff;
    padding: 20px;
    text-align: center;
	display: block;
}

.kartnic-author-card h2 {
    font-size: 24px;
	font-weight: 500;
    color: #333;
    margin-bottom: 15px;
}

.kartnic-author-avatar img {
    border-radius: 50%;
    margin-bottom: 10px;
    width: 60px;
    height: 60px; 
}

.kartnic-author-description p {
    color: #555;
	margin-bottom: 10px;
	padding: 0px 20px;
}


.mobile-icon-close-bars {
    display: none;
}






/* Featured Post Container */
.featured-post-container {
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
}
 

/* Featured Post Image */
.featured-post-image {
    text-align: center;
}

@media (min-width: 768px) {
	.featured-post-image {
		margin-right: 20px;    
		flex: 1;
    	min-width: 40%;
	}
}

.featured-post-image img {
    width: 100%;
    height: auto;
}

/* Featured Post Content */
.featured-post-content {
    flex: 2;
    min-width: 300px;
    width: 100%;
}

.featured-post-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

.featured-post-meta {
    font-size: 1rem;
    color: #777;
    margin-bottom: 15px;
}

.featured-post-meta .post-date {
    margin-right: 15px;
}

.featured-post-meta .post-author {
    font-weight: bold;
}

/* Featured Post Excerpt */
.featured-post-excerpt {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 20px;
}
 
.post-comment-count {
    color: #0073e6;
    text-decoration: none;
}

.post-comment-count:hover {
    text-decoration: underline;
}

/* Featured Post Read More Button */
.featured-post-read-more {
	margin-top: 20px;
    text-align: right;
}

.featured-post-read-more a {
    background-color: #0073e6;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.featured-post-read-more a:hover {
    background-color: #005bb5;
}

/* Footer container when Full option is selected */
.footer-container.full-width {
    width: 100%;
    max-width: none;  /* No max width, will take 100% of the container */
}
  
/* Content / Sidebar: Content left and Sidebar right */
.content_sidebar .main-area {
    flex: 1;	
	display: block;
    order: 1 !important; /* Content pehle dikhayenge */
}

.content_sidebar .middle-right-bottom {
    flex: 1;	
	display: block;
    order: 2 !important; /* Sidebar baad mein dikhayenge */
}

/* Sidebar / Content: Sidebar left and Content right */
.sidebar_content .main-area {
    flex: 1;	
	display: block;
    order: 2 !important; /* Content baad mein dikhayenge */
}

.sidebar_content .middle-right-bottom {
    flex: 1;	
	display: block;
    order: 1 !important; /* Sidebar pehle dikhayenge */
}

/* No Sidebar: Hide Sidebar and make content full width */
.no_sidebar .main-area {
    flex: 1 1 100%;
    max-width: 100%; /* Content ko full width milegi */
}

.no_sidebar .middle-right-bottom {
    display: none; /* Sidebar ko hide karenge */

}