/**
 * Theme Name:     Hello Elementor Child
 * Author:         Elementor Team
 * Template:       hello-elementor
 * Text Domain:	   hello-elementor-child
 * Description:    Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
 */
 :root {
    --primaryColor: #056cf2;
 }
 html body {
    background: #f6f6f6 !important;
}
 .custom-logo-link img {
    max-width: 170px;
}
.header-wrapper {
    background: var(--primaryColor);
}
.site-header {
    background: var(--primaryColor);
}
.site-header .header-inner{
    padding: 0 15px;
}
.blog-posts-container {
    max-width: 1140px;
    margin: 100px auto 0;
    padding: 0 15px;
}
.site-navigation ul.menu li a {
    display: block;
    padding: 8px 15px;
    color: #fff;
    font-size: 18px;
}
/* blog style */
.blog-post {
    display: flex;
    gap: 2rem;
    padding: 50px 30px 50px 0;
    position: relative;
    margin-bottom: 50px;
    align-items: center;
}
.blog-post:nth-child(odd) {
    flex-direction: row-reverse;
    padding-left: 30px;
    padding-right: 0;
}
.blog-post-thumbnail {
    width: 40%;
    box-shadow: 6px 6px 14px -7px black;
}

.post-content {
    width: 60%;
}
.blog-post:after {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    width: calc(100% - 219px);
    height: 100%;
    background: #fff;
    z-index: -1;
    box-shadow: 6px 6px 14px -7px black;
}
.hfe-search-button-wrapper input[type=search]:focus{
    background: #fff !important;
}
.blog-post:nth-child(odd):after {
    right: auto;
    left: 0;
}

.blog-post-thumbnail img {
    max-height: 350px;
    height: 100%;
    object-fit: cover;
    display: block
}
.read-more {
    text-align: right;
    margin-top: 15px;
}
.read-more {
    text-align: right;
    margin-top: 15px;
}

h2.blog-post-title a {
    font-size: 26px;
    color: #000;
}
h2.blog-post-title a:hover {
    color: var(--primaryColor)
}
h2.blog-post-title {
    line-height: 1em;
}
ul.post-tag-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

ul.post-tag-list li a {
    display: inline-block;
    background: #e2e2e2;
    color: #000;
    padding: 6px 12px;
    border: 0;
    font-size: 14px;
    border-radius: 0px;
}
ul.post-tag-list li a:hover {
    background: #056cf2;
    color: #fff;
}
.post-attr {
    display: flex;
    justify-content: space-between;
    color: #000;
    align-items: center;
}
.post-attr.justify-end {
    justify-content: flex-end;
}
.comment-count {
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: center;
    align-items: center;
}

.comment-count svg {
    width: 25px;
}
.read-more a {
    color: #000;
    font-weight: 400;
    font-style: italic;
    text-decoration-thickness: 2px;
    text-decoration-style: dotted;
    text-decoration-color: #696969;
    text-decoration-line: underline;
    text-underline-offset: 5px;
}
.pagination_area {
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 80px;
}

.pagination_area .prev, .pagination_area .next {
    display: none !important;
}

.pagination_area .page-numbers {
    color: #000;
    font-size: 18px;
    border: 1px solid #000;
    width: 45px;
    height: 45px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    padding: 8px 0;
}

.pagination_area .page-numbers.current, .pagination_area .page-numbers:hover {
    background: var(--primaryColor);
    border-color: var(--primaryColor);
    color: #fff;
}
/* single post page style */
.single-post-hero {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-attachment: fixed !important;
    height: calc((100vw / 4)* 1);
    position: relative;
}
.single-post-hero:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}
.single-post-wrapper {
    margin-top: 0;
}
.single-post-wrapper h1.blog-post-title {
    margin-top: 0;
}
.post-title-sty {
    align-items: flex-start;
    gap: 20px
}
.single-post-wrapper .blog-post {
    flex-direction: column;
    gap: 0;
    padding-top: 0;
}
.single-post-wrapper .blog-post:nth-child(odd) {
    padding-left: 0;
    padding-right: 0;
}
.single-post-wrapper .post-content, .single-post-wrapper .blog-post-thumbnail {
    width: 100%;
}
.single-post-wrapper .blog-post {
    margin-bottom: 0;
}
.single-post-wrapper .blog-post:after {
    display: none;
}
.single-post-wrapper .blog-post-thumbnail {
    position: relative;
    z-index: 1;
}
.single-post-wrapper .blog-post-thumbnail img {
    max-height: 100%;
    width: 100%;
    padding: 0 30px;
}
.single-post-wrapper  .post-content {
    background: #fff;
    padding: 30px 30px 30px;
    margin-top: -10rem;
}
.single-post-wrapper ul.post-tag-list {
    margin: 30px 0;
}
.single-post-wrapper h2.blog-post-title {
    font-size: 26px;
    margin-top: 15px;
}

.related-posts h3, h2#reply-title, h2.title-comments {
    font-size: 20px;
    font-weight: 700;
    color: #000;
    margin-bottom: 30px;
}

.related-posts ul {
    display: flex;
    gap: 30px;
    text-decoration: none;
    list-style: none;
    padding: 0;
    margin: 0;
}

.related-posts ul li {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.related-posts ul li img {
    max-height: 230px;
    width: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: .4s;
}
.related-posts ul li:hover img {
    transform: scale(1.15);
}
.related-posts ul li h4 {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3em;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: left;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    height: 100%;
    width: 100%;
    color: #fff;
    background: linear-gradient(360deg, black, transparent);
    margin: 0;
    padding: 15px;
}
.form-group {
    display: flex;
    width: 100%;
    gap: 30px;
}

.form-group p {
    width: 50%;
}

.form-group p input {
    width: 100%;
    height: 44px;
    border-radius: 0;
    border: 1px solid #ddd;
    padding: 0 15px
}
.form-group p input:focus-visible, textarea#comment:focus-visible{
    outline: none;
}
.comment-box {
    margin: 5rem 0 8rem;
}
textarea#comment {
    height: 150px;
    border: 1px solid #ddd;
}
p.form-submit .submit {
    background: var(--primaryColor);
    border: 0;
    color: #fff;
    border-radius: 0;
    padding: 10px 25px;
}
h2.title-comments {
    margin-top: 50px;
}
p.comment-form-cookies-consent {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 15px 0 30px;
}
#comments .comment .comment-body, #comments .pingback .comment-body {
    padding-inline-start: 130px !important;
    border-block-end: 0 !important;
    margin-bottom: 30px;
    position: relative;
    padding-inline-end: 30px !important;
}
.comment span.says {
    display: none;
}
.comments-area article:after {
    position: absolute;
    right: 0;
    content: "";
    width: calc(100% - 100px);
    height: 100%;
    top: 0;
    background: #fff;
    z-index: -1;
}
.comments-area article:before {
    position: absolute;
    content: "";
    left: 85px;
    top: 40px;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 20px solid #fff;
    z-index: 1;
    transform: rotate(-15deg);
}
.comment-metadata a {
    color: #000;
    text-decoration: none;
    font-weight: 500;
}

a.comment-reply-link {
    color: var(--primaryColor);
}
.comment-wrapper a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #000;
    text-decoration: none;
}
.share-button-wrapper {
    position: relative;
}
.share-button, .share-button:focus {
    background: var(--primaryColor);
    border-radius: 4px;
    padding: 8px 20px;
    color: #fff;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    position: relative;
    border: 0;
}
.share-button:hover {
    filter: brightness(1.2);
    background: var(--primaryColor);
}
.share-drop-down {
    position: absolute;
    right: 87px;
    top: 0;
    min-width: 156px;
    padding: 2px 15px;
    background: #fff;
    display: none;
}

.heateor_sss_sharing_ul {
    display: flex;
    gap: 10px;
}
.heateor_sss_sharing_ul a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    overflow: hidden;
}

.heateor_sss_sharing_ul a span {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* footer style */

.input-group.my-4 {
    position: relative;
    display: flex;
}

button.submit-newslatter {
    border: 0;
    background: var(--primaryColor);
    border-radius: 0 4px 4px 0;
    padding: 0;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 20px;
}
button.submit-newslatter:hover {
    background: var(--primaryColor);
    filter: brightness(1.3);
}

.newsletter-form .input-group input {
    height: 48px !important;
    border-radius: 4px 0 0 4px !important;
    background: rgba(255,255,255,.2) !important;
    border: 0 !important;
    color: #fff;
}
input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 600000s 0s, color 600000s 0s;
}
input[data-autocompleted] {
    background-color: transparent !important;
}
.input-group input:focus {
    outline: none;
    box-shadow: none;
}
div#newslatter-message {
    color: #fff;
    margin-top: 8px;
}
/* Hero section style */
.home span.br-separator, .home span.current-link {
    display: none;
}
.site-hero {
    background-size: cover !important;
    height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px 0px;
    position: relative;
    z-index: 1;
    background-position: center bottom !important;
}
.site-hero:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: -1;
}
.site-container {
    max-width: 1140px;
    margin: 0 auto;
    width: 100%;
    padding: 0 15px;
}

.site-container h1,.site-container p {
    color: #fff;
    max-width: 600px;
    line-height: 1.2em;
}

.site-container h1 {
    font-size: 28px;
}
.site-breadcrumb{
    position: absolute;
    bottom: 30px
}
.site-breadcrumb a, nav.breadcrumbs {
    color: #fff;
    text-transform: uppercase;
    font-size: 13px;
}
/* search page style */
.search-form-wrapper {
    margin-bottom: 15px;
    background: #fff;
    padding: 0;
    border: 1px solid #eee;
    outline: none;
}
.search-form .search-field {
    width: 100%;
    max-width: 100%;
    outline: none !important;
    border-radius: 4px 0 0 4px;
    height: 50px;
    border: 0;
    background: #fff;
}

.search-form {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0px;
}
.search-page-content article.post {
    border-bottom: 1px solid #DBDBDB;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.search-form label {
    width: calc(100% - 105px);
}
.search-form .search-submit {
    background: var(--primaryColor);
    border: 0;
    color: #fff;
    padding: 10px 32px;
    border-radius: 0;
    height: 50px;
}
.search-form .search-submit:hover{
    background: var(--primaryColor);
    filter: brightness(1.2);
}
.search-page-content {
    padding: 0px;
    margin-bottom: 70px;
}
.search-page-content h2.entry-title {
    margin-bottom: 6px;
}

.search-page-content h2 a {
    font-size: 20px;
    color:var(--primaryColor);
    font-weight: 600;
}
.search-page-header h1{
    font-size: 22px;
}
.search-page-header {
    margin-top: 2.68rem;
}
.search-page-header h1 span {
    font-style: italic;
}
.search-page-wrapper nav.pagination {
    margin-bottom: 4.23rem;
}
.search-page-wrapper nav.pagination a {
    color: var(--primaryColor);
}
.sticky-menu {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}
.home nav.breadcrumbs {
    display: none;
}
header .active-menu-item a.hfe-menu-item, header .menu-item a.hfe-menu-item:hover {
    color: #ff9900 !important;
}
.single-post-wrapper .blog-post-excerpt p, .single-post-wrapper .blog-post-excerpt ul {
    margin-bottom: 30px;
}
.single-post-wrapper .blog-post-excerpt ol li{
    line-height: 1em;
}
.single-post-wrapper .blog-post-excerpt ul li{
    line-height: 2em;
}
.single-post .blog-post-excerpt ol li img
 {
    margin-top: 15px;
}

.single-post .blog-post-excerpt ol li {
    line-height: 1.7em;
}
.button-wrapper button.active-theme {
   background: #ddd !important;
   border-color: var(--e-global-color-primary);
}

@media(max-width: 767px){
    .blog-post-thumbnail img {
        width: 100%;
    }
    ul.post-tag-list {
        flex-wrap: wrap;
    }
    .blog-posts-container {
        margin: 50px auto 0;
        padding: 0;
    }
    .blog-post {
        margin-bottom: 50px;
    }
    .blog-post:after{
        width: 100%;
    }
    .blog-post, .blog-post:nth-child(odd) {
        flex-direction: column;
        background: #fff;
    }
   .home .blog-post, .home .blog-post:nth-child(odd) {
        padding: 25px;
    }
    .blog-post-thumbnail, .post-content{
        width: 100%;
    }
    .pagination_area {
        margin-bottom: 60px;
    }
    .single-post-wrapper .post-content {
        margin-top:-50px;
        padding: 30px 20px;
        box-shadow: 0 0px 6px -2px #ddd;
    }
    .related-post-area {
        margin-top: 50px;
        padding: 0 20px;
    }
    .related-posts ul {
        flex-direction: column;
    }
    
    #comments .comment .avatar {
        position: absolute !important;
    }
    .comment-box {
        padding: 0 20px;
    }
    .comment-metadata time {
        display: none;
    }
    .blog-posts-container .blog-post {
        padding: 0px !important;
        background: transparent;
    }
   
    .post-content {
        padding: 0 20px 20px;
    }
    .single-post-hero {
        height: calc((100vw / 4)* 2);
    }
    .single-post-hero:after{
        background: transparent;
    }
    .single-post-hero {
        background-attachment: scroll !important;
    }
    .post-title-sty {
        flex-direction: column;
        gap: 0;
    }
    .single-post-wrapper h1.blog-post-title {
        margin: 0;
        font-size: 1.7rem;
    }
    .comment-count {
        position: absolute;
        bottom: calc(100% + 60px);
        right: 12px;
    }
    .search-page-wrapper {
        padding: 0 20px !important;
        background: transparent;
    }
    .search-page-content h2.entry-title {
        line-height: 1.4rem;
    }
    .popup-bg {
        padding: 20px 20px 40px;
    }
    .button-wrapper {
        gap: 15px;
    }
    .button-wrapper button {
        padding: 15px 20px !important;
        max-width: 96px;
    }
    .dark-theme .hfe-nav-menu__breakpoint-tablet .hfe-active-menu.hfe-active-menu-full-width + .hfe-nav-menu__layout-horizontal, 
    .elementor-250 .elementor-element.elementor-element-6f36668 nav.hfe-dropdown .menu-item a.hfe-menu-item {
        background: var(--backgroundColor);
    }
    .share-drop-down {
        background: transparent;
    }
    body.dark-theme .share-drop-down{
        background: transparent !important;
    }
}

.dark-theme {
    --backgroundColor:  #1b1b1b;
    --textDarkColor: #cdc9c9;
    --expandBackground: #222;
    --primaryColor: #0049a9;
}

body.dark-theme  {
    background: var(--backgroundColor) !important;
    color: var(--textDarkColor);
}

.dark-theme header .elementor-element.e-lazyloaded {
    background: #323232 !important;
}

.dark-theme .single-post-wrapper .post-content,
.dark-theme .form-group p input, 
.dark-theme .comments-area article:after,
.dark-theme .comments-area article:before,
.dark-theme textarea#comment,
.dark-theme .share-drop-down,
.dark-theme header .hfe-input-focus .hfe-search-form__input:focus {
    background: var(--expandBackground) !important;
    border-color: var(--expandBackground);
    color: var(--textDarkColor) !important;
}

.dark-theme h2.blog-post-title a,
.dark-theme .post-attr,
.dark-theme .read-more a,
.dark-theme .pagination_area .page-numbers,
.dark-theme .site-container h1,
.dark-theme .site-container p,
.dark-theme .menu-item a.hfe-menu-item,
.dark-theme footer .elementor-heading-title,
.dark-theme footer .menu-item a.hfe-menu-item,
.dark-theme .related-posts h3,
.dark-theme h2#reply-title,
.dark-theme h2.title-comments,
.dark-theme .comment-metadata a,
.dark-theme .comment-wrapper a,
.dark-theme header .hfe-search-icon-toggle i {
    color: var(--textDarkColor) !important;
}

.dark-theme .pagination_area .page-numbers {
    border-color: #383838;
}

.dark-theme .comment-count svg,
.dark-theme footer .elementor-social-icon svg {
    fill: var(--textDarkColor) !important;
}

.dark-theme .blog-post:after {
    background: var(--expandBackground);
}

.dark-theme .site-hero:after {
    background: rgba(0, 0, 0, 0.7);
}

.dark-theme .search-form-wrapper,
.dark-theme .search-form .search-field {
    background: #5b5b5b;
    border-color: #5b5b5b;
    color: #fff;
}

.dark-theme .search-page-content article.post {
    border-bottom: 1px solid #2d2d2d;
}

.dark-theme .hfe-nav-menu__layout-horizontal .hfe-nav-menu .sub-menu {
    background: #222 !important;
}

.dark-theme .elementor-widget-navigation-menu .sub-menu a.hfe-sub-menu-item, .dark-theme .button-wrapper button, #theme-popup button svg {
    color: var(--textDarkColor) !important;
}

.dark-theme .hfe-input-focus input.hfe-search-form__input:focus + i {
    color: var(--textDarkColor) !important;
}
.dark-theme .popup-bg {
    background: #444;
}
.dark-theme .button-wrapper button {
    border-color: #777;
    background: #555;
}
.dark-theme button.close-button {
    background: #777;
}
.dark-theme button.close-button svg {
    color: #ccc !important;
}
.dark-theme ul.post-tag-list li a {
    background: #2a2a2a;
    color: var(--textDarkColor)
}
.dark-theme .button-wrapper button.active-theme {
    background: #555 !important;
    border-color: #fff;
}