/*=============================
Table of CSS Content Start Here
===============================
    01. Preloader CSS Area
    02. Header Top CSS Area
    03. Header Site Branding CSS Area
    04. Header Menu CSS Area
    05. Breadcrumbs CSS Area
    06. Blog Item CSS Area
    07. Blog Single Item CSS
    08. Pagination CSS Area
    09. Comment Template CSS Area
    10. Error Page CSS Area
    11. Footer Widget Area
    12. Footer CSS Area
    13. Scroll To Top CSS Area

/*=========================================== 
===== 01. Preloader CSS Area Start Here =====
===========================================*/
#preloader {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999999;
    background-color: var(--white-color);
}

#status {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    /* centers the loading animation horizontally one the screen */
    top: 50%;
    margin: -100px 0 0 -100px;
    /* is width and height divided by two */
}

.spinner {
    margin: 100px auto;
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 10px;
}

.spinner > div {
    background-color: var(--primary-color);
    height: 100%;
    width: 6px;
    display: inline-block;
    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
    0%,
    40%,
    100% {
        -webkit-transform: scaleY(0.4)
    }
    20% {
        -webkit-transform: scaleY(1.0)
    }
}

@keyframes sk-stretchdelay {
    0%,
    40%,
    100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }
    20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}
/*========================================= 
===== 01. Preloader CSS Area End Here =====
=========================================*/

/*============================================ 
===== 02. Header Top CSS Area Start Here =====
============================================*/
.header-top-area {
    width: 100%;
    height: 100%;
    padding: 5px 0;
    color: var(--white-color);
    background-color: var(--primary-color);
    font-size: 14px;
}

.header-top-area i {
    margin-right: 10px;
}
/*========================================== 
===== 02. Header Top CSS Area End Here =====
==========================================*/

/*====================================================== 
===== 03. Header Site Branding CSS Area Start Here =====
======================================================*/
.header-site-branding {
    width: 100%;
    height: 100%;
    min-height: 130px;
    padding: 25px 0;
    background-color: var(--white-color);
}

.site-branding-area {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-logo,
.site-title-and-tagline {
    display: inline-block;
}

.header-logo {
    margin-right: 20px;
}

.custom-logo-link {
    display: block;
}

.header-logo img {
    width: auto;
    height: 80px;
}

.header-site-title {
	font-size: var(--h1-font-size);
	text-align: center;
    margin: 0 0 5px 0;
}

.header-site-title a {
    color: var(--primary-color);
    text-decoration: none;
}

.header-site-title a:hover,
.header-site-title a:focus {
    background-color: transparent;
    text-decoration: underline;    
}

.header-site-tagline {
    font-size: 20px;
    text-align: center;
    margin: 0;
}
/*==================================================== 
===== 03. Header Site Branding CSS Area End Here =====
====================================================*/

/*============================================= 
===== 04. Header Menu CSS Area Start Here =====
=============================================*/
.header-transparent-area {
    position: absolute;
    width: 100%;
    z-index: 999;
}

.header-menu-area.header-fixed {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 10px;
    z-index: 9999;
}

.admin-bar .header-menu-area.header-fixed {
    top: 32px;
}

.header-menu-area {
    background-color: var(--primary-color);
}

.header-menu-area .dropdown-toggle::after {
    display: none;
}

.header-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-menu li {
    float: left;
    position: relative;
}

.header-menu a {
    display: block;
    text-decoration: none;
    font-size: 16px;
    color: var(--white-color);
    background-color: var(--primary-color);
    padding: 10px 20px;
}

.header-menu a:hover,
.header-menu a:focus,
.header-menu .current-menu-item a {
    color: var(--primary-color);
    background-color: var(--white-color);
}

.header-menu .menu-item-has-children > a,
.header-menu .menu-item-has-children > a.submenu-item-link {
    position: relative;
}

.header-menu .menu-item-has-children > a::after {
    content: '\f107';   
    font-family: "FontAwesome";
    position: absolute;
    margin-left: 5px;
    transition: var(--transition);
}

.header-menu .menu-item-has-children > a:hover::after,
.header-menu .menu-item-has-children > a:focus::after {
    content: '\f106'; 
}

.header-menu .menu-item-has-children > a.submenu-item-link::after {
    content: '\f105'; 
}

.header-menu .menu-item-has-children > a.submenu-item-link:hover::after,
.header-menu .menu-item-has-children > a.submenu-item-link:focus::after {
    content: '\f104'; 
}

.submenu {
    position: absolute;
    top: 100%;
    left: -999999px;
    min-width: 250px;
    z-index: 999999;
    padding: 0;
    background-color: var(--primary-color);
}

.header-menu li:hover > .submenu,
.header-menu li:focus-within > .submenu {
    left: 0;
}

.submenu li {
    position: relative;
    float: none;
    list-style: none;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.submenu li:hover > .submenu,
.submenu li:focus-within > .submenu {
    top: 0;
    left: 100%;
}

.submenu li:last-child {
    border-bottom: none;
}

.submenu li a {
    padding: 10px 20px;
}

.submenu .submenu {
    position: absolute;
    top: -99999px;
}

.submenu .submenu li {
    border-left: 1px solid rgba(255,255,255,0.2);
}
/*=========================================== 
===== 04. Header Menu CSS Area End Here =====
===========================================*/

/*============================================= 
===== 05. Breadcrumbs CSS Area Start Here =====
=============================================*/
.breadcrumbs-area {
    position: relative;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
    padding: 120px 0;    
    background-color: var(--light-grey);
}

.breadcrumbs-area::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.85);
	z-index: 1;
}

.breadcrumbs-content {
	position: relative;
	color: var(--white-color);
	z-index: 2;
	word-break: break-all;
}

.breadcrumbs-right-area {
    color: var(--grey-text);
}

.breadcrumbs-nav ul {
	padding: 0;
}

.breadcrumbs-nav a {
    color: var(--primary-color);
    text-decoration: none;
}

.breadcrumbs-nav a:hover,
.breadcrumbs-nav a:focus {
    text-decoration: underline;
    background-color: transparent;
}

h2.breadcrumbs-title {
    text-align: center;
    color: var(--white-color);
    text-transform: capitalize;
    margin-bottom: 50px;
}
/*=========================================== 
===== 05. Breadcrumbs CSS Area End Here =====
===========================================*/

.site-content {
    margin-top: 20px;
}

.site-main div {
	clear: both;
}

/*===========================================
===== 06. Blog Item CSS Area Start Here =====
===========================================*/
.single-post-item {
	margin: 20px 0;
	padding: 15px;
	background-color: var(--light-grey);    
	word-break: break-all;
}

.single-post-item:first-child {
    margin-top: 0;
}

.single-post-item.sticky {
    border: 5px solid var(--primary-color);
    padding: 30px 20px;
}

.entry-meta {
    color: var(--dark-grey);
}

.entry-meta i {
    color: var(--dark-grey);
    margin-right: 5px;
}

.entry-meta a {
    color: var(--primary-color);
    text-decoration: none;
}

.entry-meta a:hover,
.entry-meta a:focus {
    color: var(--primary-color);
    background-color: transparent;
    text-decoration: underline; 
}

.entry-cat-meta i {
    margin-right: 5px;
}

.entry-cat-meta a:hover,
.entry-cat-meta a:focus {
    text-decoration: underline;
    background-color: transparent;
}

.entry-cat-meta a {
    color: var(--primary-color);
    text-decoration: none;
}

.entry-author-meta,
.entry-date-meta,
.entry-cat-meta,
.entry-comments-meta,
.entry-meta-edit {
    display: inline-block;
    margin: 10px 20px 0 0;
}

.entry-title a {
    color: var(--black-color);
    background-color: transparent;
    text-decoration: none;    
}

.entry-title a:hover,
.entry-title a:focus {
    color: var(--primary-color);
    text-decoration: underline;
}

.entry-meta-footer {
    margin-top: 10px;
    padding: 25px;
    background-color: var(--light-grey);
}

.entry-tag-meta i {
    color: var(--dark-grey);
}

.entry-tag-meta a {
    color: var(--primary-color);
    text-decoration: none;
}

.entry-tag-meta a:hover,
.entry-tag-meta a:focus {
    background-color: transparent;
    text-decoration: underline;
}

.link-post {
    display: block;
    padding: 10px 20px;
    border: 1px solid var(--primary-color);
    border-radius: 20px;
    text-decoration: none;
    margin-bottom: 20px;
}

.quote-author {
    position: relative;
    float: right;
    text-decoration: none;
    transition: var(--transition);
}

.quote-author:hover,
.quote-author:focus {
    text-decoration: underline;
}

.quote-author::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -60px;
    width: 50px;
    height: 2px;
    background-color: var(--primary-color);
}

.post-img-gallery {
    width: 100%;
    height: 500px;
}

.post-img-gallery img {
    width: 100%;
    height: 500px;
}

.entry-content {
    margin-top: 15px;
}

.no-results {
    padding: 15px;
}

.page-title-span {
    color: var(--primary-color);
}

.page-content input[type="text"],
.page-content input[type="submit"] {
    padding: 10px;
}
/*========================================= 
===== 06. Blog Item CSS Area End Here =====
=========================================*/

/*==================================================
===== 07. Blog Single Item CSS Area Start Here =====
==================================================*/
.post-password-form input[type="password"] {
    width: 100%;
	padding: 10px;
    border: 1px solid var(--border-color);
    background-color: transparent;
}

.post-password-form input[type="password"]:hover,
.post-password-form input[type="password"]:focus {
    border: 1px solid var(--primary-color);
}

.post-password-form input[type="submit"] {
    display: inline-block;
	text-decoration: none;
    padding: 11px 30px;
	color: var(--primary-color);
    border: 1px solid var(--primary-color);
	background-color: transparent;
}

.post-password-form input[type="submit"]:hover,
.post-password-form input[type="submit"]:focus {
    color: var(--white-color);
	background-color: var(--primary-color);
}
/*================================================
===== 07. Blog Single Item CSS Area End Here =====
================================================*/

/*============================================ 
===== 08. Pagination CSS Area Start Here =====
============================================*/
.navigation.pagination {
    margin-top: 30px;
}

.navigation.pagination .screen-reader-text {
    display: none;
}

.post-page-numbers,
.page-numbers {
    max-width: 100%;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    background-color: transparent;
    text-align: center;
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
    margin: 0 10px 10px 0;
    transition: var(--transition);
}

.page-numbers.current,
.page-numbers:hover,
.page-numbers:focus,
.post-page-numbers.current,
.post-page-numbers:hover,
.post-page-numbers:focus {
    color: var(--white-color);
    background-color: var(--primary-color);
}
/*========================================== 
===== 08. Pagination CSS Area End Here =====
==========================================*/

/*==================================================
===== 09. Comment Template CSS Area Start Here =====
==================================================*/
/** 01. Total Comments */
.total-comments {
    margin-top: 20px;
	padding: 25px;
	background-color: var(--light-grey);
}

.total-comments .comment-title,
.total-comments .comment-count {
	color: var(--primary-color);
}

/** 02. Comments Form */
.comment-respond {
	margin-top: 20px;
    padding: 25px;
	background-color: var(--light-grey);
}

.comments-form input#author,
.comments-form input#email,
.comments-form input#url {
    display: block;
    width: 100%;
    border: 1px solid var(--border-color);
}

.comments-form input#author,
.comments-form input#email,
.comments-form input#url,
.comments-form textarea {
    padding: 10px;
}

.comments-form textarea {
    background-color: transparent;
}

.comments-form textarea,
.comment-form-comment textarea {
    display: block;
    width: 100%;
    height: 180px;
    resize: none;
    border: 1px solid var(--border-color);
}

.comments-form input#author:hover,
.comments-form input#author:focus,
.comments-form input#email:hover,
.comments-form input#email:focus,
.comments-form input#url:hover,
.comments-form input#url:focus,
.comments-form textarea:hover,
.comments-form textarea:focus,
.comment-form-comment textarea:hover,
.comment-form-comment textarea:focus {
    border: 1px solid var(--primary-color);
}

.form-submit input[type="submit"] {
    display: inline-block;
	text-decoration: none;
    padding: 15px 30px;
	color: var(--primary-color);
    border: 1px solid var(--primary-color);
	background-color: transparent;
}

.form-submit input[type="submit"]:hover,
.form-submit input[type="submit"]:focus {
    color: var(--white-color);
	background-color: var(--primary-color);
}

/** 03. Comments List */
.comments-list li {
    list-style: none;
}

.comments-box {
    list-style: none;
	margin-top: 20px;
    padding: 25px;
	background-color: var(--light-grey);
}

.comments-avatar {
    float: left;
    margin-right: 15px;
    border: 1px solid var(--primary-color);
}

.avatar-name a {
    text-decoration: none;
    color: var(--black-color);
}

.avatar-name:hover a,
.avatar-name:focus a {
    text-decoration: underline;
    color: var(--primary-color);
    background-color: transparent;
}

.comments-meta {
    padding: 10px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 10px;
}

.comments-meta-icon {
    color: var(--primary-color);
}

.comments-text {
	overflow: hidden;
	clear: none;
}

.comment-reply-link,
#cancel-comment-reply-link {
    display: inline-block;
	text-decoration: none;
    padding: 10px 30px;
	color: var(--primary-color);
	background-color: transparent;
    border: 1px solid var(--primary-color);
}

#cancel-comment-reply-link {
    margin: 10px;
    font-size: 16px;
}

.comment-reply-link:hover,
.comment-reply-link:focus,
#cancel-comment-reply-link:hover,
#cancel-comment-reply-link:focus {
	color: var(--white-color);
	background-color: var(--primary-color);
}

/** 04. Comments List */
.comments-pagination {
    margin-top: 30px;
}
/*================================================
===== 09. Comment Template CSS Area End Here =====
================================================*/

/*============================================ 
===== 10. Error Page CSS Area Start Here =====
============================================*/
.error-page {
    padding: 15px;
    background-color: var(--light-grey);
}

.error-page .page-header-title {
    font-size: 200px;
    margin: 0;
}
/*========================================== 
===== 10. Error Page CSS Area End Here =====
==========================================*/

/*=========================================== 
===== 11. Footer Widget Area Start Here =====
===========================================*/
.footer-widget-area {
    padding: 70px 0;
    background-color: #ddd;
}

.footer-widget-list {
    display: flex;
    gap: 30px;
    justify-content: space-between;
}

.footer-widget-col-1 .footer-single-widget {
    width: 100%;
}

.footer-widget-col-2 .footer-single-widget {
    width: 50%;
}

.footer-widget-col-3 .footer-single-widget {
    width: 33.33%;
}

.footer-widget-col-4 .footer-single-widget {
    width: 25%;
}

.footer-widget-col-5 .footer-single-widget {
    width: 20%;
}
/*=========================================
===== 11. Footer Widget Area End Here =====
=========================================*/

/*======================================== 
===== 12. Footer CSS Area Start Here =====
========================================*/
.site-footer {
    background-color: var(--primary-color);
    color: var(--white-color);
    min-height: 50px;
}

.site-footer a {
    text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
    color: var(--primary-color);
    background-color: transparent;
    text-decoration: underline;
}

.site-footer p {
    margin-bottom: 0;
    line-height: 50px;
}

.site-footer a,
.site-footer a:hover,
.site-footer a:focus {
    color: var(--white-color);
    font-weight: 700;
}

.copyright-text {
    text-align: left;
}

.powered-by-text {
    text-align: right;
}
/*====================================== 
===== 12. Footer CSS Area End Here =====
======================================*/

/*=============================================== 
===== 13. Scroll To Top CSS Area Start Here =====
===============================================*/
.scroll-to-top {
    position: absolute;
	bottom: 70px;
	right: 70px;
	width: 40px;
	height: 40px;
	background-color: var(--white-color);
	color: var(--primary-color);
	border: 1px solid var(--primary-color);
    border-radius: 5px;
    box-shadow: -3px -3px 10px rgba(0,0,0,0.3);
}

.scroll-to-top:hover,
.scroll-to-top:focus {
    color: var(--white-color);
    background-color: var(--primary-color);
}

.scroll-to-top i {
    transform: rotate(-45deg);
    line-height: 40px;    
}
/*============================================= 
===== 13. Scroll To Top CSS Area End Here =====
=============================================*/