/*
Theme Name: Redleaf
Theme URI: https://redleafthemes.in/
Author: Prasadh Baapaat
Author URI: https://cmswebdev.in/
Description: Redleaf is a Minimalistic, Barebones, Easy Starter Theme with Cutomizer options for WordPress
Version: 2.2.5
Requires at least: 5.0
Tested up to: 6.7
Requires PHP: 7.2 
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: redleaf
Tags: blog, custom-logo, custom-colors, custom-menu, theme-options, featured-images, right-sidebar
*/
/*------------------------------------------------------
# CSS Variables
------------------------------------------------------ */
:root {
	--body-font-size: 15px;

	--primary: #D10000;
	--secondary: #242424;

	--site-background: #ffffff;
	--text: #363636;
	--heading: #272727;

	--bgheader: #ffffff;

	--smoke: #F5F5F5;
	--dark-smoke: #cecece;
	--border: #eee;
	--dark-border: #b9b9b9;
	--grey: #dddddd;
	--dark-grey: #a3a3a3;

	--bodyfont: Helvetica, sans-serif;
	--headingfont: Trebuchet, sans-serif;

	--mainmenu-bg: #242424;
	--mainmenu-text: #fff;
	--mainmenu-bghover: #fff;
	--mainmenu-texthover: #fff;
	--mainmenu-textactive: #D10000;

	--submenu-bg: #666666;
	--submenu-text: #fff;
	--submenu-bghover: #242424;
	--submenu-texthover: #fff;

	/* Sidebar */
	--sidebar-bg: #f5f5f5;
	--sidebar-textcolor: #363636;
	--sidebar-bgheading: #242424;
	--sidebar-bgheading-color: #ffffff;
	--sidebar-bgli: #e9e9e9;
	--sidebar-bglihover: #cecece;
	--sidebar-li-a: #363636;
	--sidebar-li-borderbottom: #b9b9b9;
	--sidebar-li-borderbottom-hover: #D10000;

	/* Footer */
  --prefooter-bg: #666;
  --prefooter-color: #eee;
	--prefooter-headings: #fff;

  --mainfooter-bg: #242424;
  --mainfooter-color: #eee;
  --mainfooter-linkhover: #fff;

	/* For White and Black we use the name or hex values directly instead of variables. */
}

/*------------------------------------------------------
# WordPress Core
------------------------------------------------------ */
.alignnone {
	margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
	display: block;
	margin: 5px auto 5px auto;
}

.alignright {
	float: right;
	margin: 5px 0 20px 20px;
}

.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}

a img.alignright {
	float: right;
	margin: 5px 0 20px 20px;
}

a img.alignnone {
	margin: 5px 20px 20px 0;
}

a img.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}

a img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	background: #fff;
	border: 1px solid #f0f0f0;
	max-width: 96%;
	/* Image does not overflow the content area */
	padding: 5px 3px 10px;
	text-align: center;
}

.wp-caption.alignnone {
	margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
	margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
	margin: 5px 0 20px 20px;
}

.wp-caption img {
	border: 0 none;
	height: auto;
	margin: 0;
	max-width: 98.5%;
	padding: 0;
	width: auto;
}

.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	margin: 0;
	padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.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. */
}

/* Do not show the outline on the skip link target. */
#maincontent[tabindex="-1"]:focus {
	outline: 0;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*------------------------------------------------------
# Custom CSS
------------------------------------------------------ */
/* bootstrap changes - Optional */
@media (min-width: 1400px) {

	.container,
	.container-sm,
	.container-md,
	.container-lg,
	.container-xl,
	.container-xxl {
		max-width: 1320px;
	}
}

@media (min-width: 1600px) {

	.container,
	.container-sm,
	.container-md,
	.container-lg,
	.container-xl,
	.container-xxl {
		max-width: 1440px;
	}
}

.container-small {
	max-width: 540px;
	margin: 0 auto;
}

.container-medium {
	max-width: 720px;
	margin: 0 auto;
}

.container-large {
	max-width: 960px;
	margin: 0 auto;
}

.container-xlarge {
	max-width: 1140px;
	margin: 0 auto;
}

.container-xxlarge {
	max-width: 1320px;
	margin: 0 auto;
}

.container-fluid {
	width: 100%;
	padding: 0 15px !important;
}

.container-full {
	width: 100%;
	padding: 0;
}

/*------------------------------------------------------
# Body General CSS
------------------------------------------------------ */
html {
	overflow-x: hidden
}

body {
	font-family: var(--bodyfont);
	font-weight: 400;
	font-size: var(--body-font-size);
	line-height: 1.6;
	width: 100%;
	height: 100%;
	color: var(--text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	background-color: var(--site-background);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--heading);
	font-family: var(--headingfont);
	font-weight: 600;
	line-height: 1.6;
}

h1 {
	font-size: 2rem;
}

h2 {
	font-size: 1.75rem;
}

h3 {
	font-size: 1.5rem;
}

legend {
	color: var(--heading);
	font-family: var(--headingfont);
	padding: 7px 0;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--border);
}

.sticky {
	display: block;
}

a {
	color: var(--primary);
	text-decoration: none;
}

a:hover {
	color: var(--text);
	text-decoration: underline;
}

.primary {
	color: var(--primary);
}

.secondary {
	color: var(--secondary);
}

.bggrey {
	background-color: var(--smoke);
}

.bgdarkgrey {
	background-color: var(--dark-grey);
}

.thumbnail img,
.attachment-post-thumbnail {
	padding: 0.25rem;
	background-color: #fff;
	border: 1px solid #dee2e6;
	border-radius: 0.25rem;
	max-width: 100%;
	height: auto;
}

/* Uncomment if needed
.thumbnail img:hover,
.attachment-post-thumbnail {
  opacity: .9;
} */

.attachment-post-thumbnail {
	margin-bottom: 20px;
}

/* Remove link Underline for some elements */
.nav-links a,
.site-title a,
.sidebar a,
.entry-content .btn {
	text-decoration: none;
}

/*------------------------------------------------------
/* Buttons
------------------------------------------------------ */
.btn {
	padding: .375rem 1rem;
	font-size: var(--body-font-size);
}

.btn-group-lg>.btn,
.btn-lg {
	padding: .75rem 2rem;
	font-size: var(--body-font-size);
}

.btn-primary {
	color: white;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: var(--primary);
	border-color: var(--primary) var(--primary) var(--primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
	background-color: var(--primary);
	border-color: var(--primary) var(--primary) var(--primary);
	box-shadow: 0 0 4px var(--primary);
}

.btn-secondary {
	color: white;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: var(--secondary);
	border-color: var(--secondary) var(--secondary) var(--secondary);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active,
.btn-secondary.disabled,
.btn-secondary[disabled] {
	background-color: var(--secondary);
	border-color: var(--secondary) var(--secondary) var(--secondary);
	box-shadow: 0 0 4px var(--secondary);
}

/*------------------------------------------------------
# Header
------------------------------------------------------ */
.bgheader {
	background-color: var(--bgheader);
	padding: 10px 0;
	filter: drop-shadow(0 0.1rem 0.15rem rgba(0, 0, 0, 0.2));
}

/*--------------------------------------------------------------
# Mainmenu
--------------------------------------------------------------*/
.mainmenu {
	background-color: var(--mainmenu-bg);
	position: relative;
}

/* Default Menu Styles */
.menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: flex-start;
}

.menu a {
	color: var(--mainmenu-text);
	text-decoration: none;
	display: block;
	padding: 12px 20px;
}

.menu li {
	position: relative;
}

.menu li:hover {
	background-color: var(--mainmenu-bghover);
}

.menu li:hover a {
	color: var(--mainmenu-texthover);
}

.menu li:hover .sub-menu {
	display: block;
}

.menu-item-has-children::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 5px;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid white;
	/* Or any color you prefer */
}
.current-menu-item a,
.current-page-item a {
	color: var(--mainmenu-textactive);
}
/* Sub-menu */
.sub-menu {
	list-style: none;
	position: absolute;
	top: 100%;
	left: 0;
	display: none;
	width: 200px;
	padding-left: 0;
}

.sub-menu li {
	display: block;
	background-color: var(--submenu-bg);
}

.sub-menu li:hover {
	background-color: var(--submenu-bghover);
}

.sub-menu li a {
	color: var(--submenu-text);
	border-bottom: 1px dashed var(--primary);
}

/* Second Level Menu */
.menu .sub-menu li .sub-menu {
	display: none;
}

.sub-menu li:hover .sub-menu {
	display: block;
}

.sub-menu li .sub-menu {
	list-style: none;
	position: absolute;
	top: 0;
	left: 100%;
	display: none;
	width: 200px;
	padding-left: 0;
}

/* Third Level Menu */
.menu .sub-menu li .sub-menu li .sub-menu {
	display: none;
}

.sub-menu li .sub-menu li:hover .sub-menu {
	display: block;
}

.sub-menu li .sub-menu li .sub-menu {
	list-style: none;
	position: absolute;
	top: 0;
	left: 100%;
	display: none;
	width: 200px;
	padding-left: 0;
}

#navigation {
	position: relative;
	min-height: 36px;

}

.menu-toggle-text {
	position: relative;
	color: white;
	top: 6px;
	display: none;
}

.menu-toggle {
	position: absolute;
	right: 0;
	top: 18px;
	transform: translateY(-50%);
	display: none;
	background: none;
	border: none;
	padding: 10px;
	cursor: pointer;
	z-index: 100;
}

.menu-toggle-icon,
.menu-toggle-icon::before,
.menu-toggle-icon::after {
	display: block;
	width: 25px;
	height: 3px;
	background-color: white;
	position: relative;
	transition: all 0.3s;
}

.menu-toggle-icon::before,
.menu-toggle-icon::after {
	content: '';
	position: absolute;
}

.menu-toggle-icon::before {
	top: -8px;
}

.menu-toggle-icon::after {
	bottom: -8px;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-icon,
.menu-toggle[aria-expanded="true"] .menu-toggle-icon::before,
.menu-toggle[aria-expanded="true"] .menu-toggle-icon::after {
	background-color: var(--primary);
}

/* Change Carat direction from 2nd level onwards  */
.menu-item-has-children:nth-of-type(2)::after {
	/* Rotate Carat */
	transform: rotate(-90deg);
	/* Rotate the pseudo-element by 45 degrees */
}

.menu a:focus {
	outline: 1px solid var(--dark-grey);
	outline-offset: -2px;
}

.menu-item-has-children>a:focus+.sub-menu,
.menu-item-has-children>a:focus-within+.sub-menu,
.sub-menu:focus-within {
	display: block;
}

.sub-menu a:focus {
	background-color: var(--dark-smoke);
}

.menu li:hover>.sub-menu,
.menu li:focus-within>.sub-menu,
.sub-menu li:hover>.sub-menu,
.sub-menu li:focus-within>.sub-menu,
.sub-menu li .sub-menu li:hover>.sub-menu,
.sub-menu li .sub-menu li:focus-within>.sub-menu,
.sub-menu li .sub-menu li .sub-menu li:hover>.sub-menu,
.sub-menu li .sub-menu li .sub-menu li:focus-within>.sub-menu {
	display: block;
} 

@media (max-width: 786px) {
	.menu-toggle,
	.menu-toggle-text {
		display: block;
	}

	#primary {
		margin-top: 10px;
    border-top: 1px solid #555;
	}

	.menu-short-container {
		margin-top: 10px;
		border-top: 1px solid #454545;
	}

	.menu {
		display: none;
		flex-direction: column;
		width: 100%;
	}

	.menu.active {
		display: flex;
		z-index: 9999;
		position: relative;
	}

	.menu li {
		width: 100%;
	}

	.sub-menu,
	.sub-menu li .sub-menu,
	.sub-menu li .sub-menu li .sub-menu {
		position: static;
		width: 100%;
		padding-left: 10px;
	}

	.menu-item-has-children .sub-menu li .sub-menu {
		background-color: #242424;
	}

	.menu-item-has-children::after {
		top: 10px;
	}

	.menu li:hover .sub-menu {
		display: none;
	}

	.menu li.show-submenu .sub-menu,
	.menu li.show-submenu .sub-menu li .sub-menu {
		display: block;
	}

}

/*--------------------------------------------------------------
# Home page
--------------------------------------------------------------*/
#maincontent {
	padding: 20px 0;
}

/*--------------------------------------------------------------
# Inside Page
--------------------------------------------------------------*/
.entry-content a {
	text-decoration: underline;
}

/*--------------------------------------------------------------
# Sidebar
--------------------------------------------------------------*/
.sidebar {
	background-color: var(--sidebar-bg);
}
.navigation .nav-links {
	display: flex;
	justify-content: space-between;
	padding: 6px 5px;
	background-color: var(--sidebar-bgli);
	border: 1px solid var(--sidebar-li-borderbottom);
}

.sidebar {
	padding: 10px;
}

.widget .wp-block-heading {
	background-color: var(--sidebar-bgheading);
	padding: 7px;
	color: var(--sidebar-bgheading-color);
	font-size: 21px;
}

.widget h2 {
	margin-bottom: 0;
	color: var(--sidebar-bgheading-color);
}

.widget ul,
.widget ol {
	background-color: var(--sidebar-bg);
	list-style: none;
	padding: 7px;
}

.widget ul li,
.widget ol li {
	padding: 7px 5px;
	background-color: var(--sidebar-bgli);
	border-bottom: 1px dashed var(--sidebar-li-borderbottom);
}

.widget ul li a,
.widget ol li a {
	color: var(--sidebar-textcolor);
}

.widget ul li:hover,
.widget ol li:hover {
	background-color: var(--sidebar-bglihover);
	border-bottom: 1px dashed var(--sidebar-li-borderbottom-hover);
}

/* Search */
.widget_search {
	margin-bottom: 15px;
}

.wp-block-search__label {
	width: 100%;
	font-size: 21px;
	font-weight: 600;
}
/*--------------------------------------------------------------
# Posts
--------------------------------------------------------------*/
.comments-area a {
	text-decoration: underline;
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.prefooter {
  background: var(--prefooter-bg);
  padding: 42px;
  color: var(--prefooter-color);
}

.prefooter h3,
.prefooter h4,
.prefooter h5 {
	color: var(--prefooter-headings);
}
.mainfooter {
	padding: 10px 0px;
	font-size: 10px;
	font-family: Verdana, Geneva, sans-serif;
	color: var(--mainfooter-color);
	background: var(--mainfooter-bg);
}
.mainfooter a {
	color: var(--mainfooter-color);
	text-decoration: none;
}
.mainfooter a:hover {
	color: var(--mainfooter-linkhover);
	text-decoration: underline;
}
.footertext
{
  text-align: center;
}
.copyright {
	color: var(--mainfooter-color);
}

.designby {
	text-align: right;
}

.copyright p,
.designby p {
	margin: 0;
}
/*--------------------------------------------------------------
# Go to Top Button
--------------------------------------------------------------*/

a.gototop {
	font-size: 19px;
	text-align: center;
	position: fixed;
	bottom: 36px;
	right: 30px;
	display: none;
	background-color: var(--secondary);
	border-radius: 50%;
	color: white;
	padding: 0 6px;
}

a.gototop:hover {
	color: var(--primary);
}
/*--------------------------------------------------------------
# Mobile Specefic
--------------------------------------------------------------*/
@media (max-width: 786px) {
	.logo,
	.headerrightwidget,
	.copyright,
	.designby,
	.footertext {
		text-align: center;
		justify-content: center;
	}
}
/*--------------------------------------------------------------*/