﻿
/* blog */
.blog-nav {
background-color: #fff;
}

.blog-nav > .container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.blog-nav .blog-nav-bg {
    background: linear-gradient(126.33deg, #00FF87 8.34%, #00E895 36.04%, #00D2A3 64.62%, #00BBB1 91.45%);
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    z-index: 0;
}

@media (max-width: 767.98px) {
.blog-nav li {
    margin-top: 0.625rem;
}
}

.blog-nav li:not(:last-child) {
margin-right: 0.5rem;
}

@media (max-width: 575.98px) {
.blog-nav li:not(:last-child) {
    margin-right: 0.25rem;
}
}

.blog-nav .blog-nav-link {
position: relative;
display: inline-block;
font-size: 0.875rem;
font-weight: 600;
padding: 0.5rem 0.75rem;
white-space: nowrap;
}

.blog-nav .blog-nav-link:before {
    content: "";
    height: 2px;
    width: 0;
    background-color: #00847E;
    position: absolute;
    left: 0;
    bottom: -8px;
    transition: width 0.3s ease-in-out;
}

@media (max-width: 575.98px) {
.blog-nav .blog-nav-link:before {
    display: none;
}
}

.blog-nav .blog-nav-link:hover:before, .blog-nav .blog-nav-link.active:before {
width: 100%;
}

@media (max-width: 575.98px) {
.blog-nav .blog-nav-link.active {
    color: #00847E;
}
}

@media (min-width: 1200px) {
.blog-nav .blog-nav__search {
    min-width: 296px;
}
}

@media (max-width: 991.98px) {
.blog-nav .blog-nav__search {
    width: 100%;
    margin-top: 0.5rem;
}
}

.blog-nav .blog-nav__search .form-control {
border-color: #fff;
height: 38px;
min-height: 38px;
padding: 0.5rem 0.75rem 0.5rem 2.25rem;
}

.blog-nav .blog-search-icon {
left: 0.75rem;
}

.blog-post-card img {
transition: transform 0.3s ease-out;
will-change: transform;
}

.blog-post-card:hover img {
transform: scale(1.05);
}

.blog-post-item:hover .blog-post-item__heading h2, .blog-post-item:hover .blog-post-item__heading .h2, .blog-post-item:hover .blog-post-item__heading h3, .blog-post-item:hover .blog-post-item__heading .h3 {
text-decoration: underline;
}

.blog-post-item:hover .blog-post-item__img img {
transform: scale(1.05);
}

.blog-post-item__heading h2, .blog-post-item__heading .h2, .blog-post-item__heading h3, .blog-post-item__heading .h3 {
line-height: 1.5;
}

.blog-post-item__img {
border-radius: 0.625rem;
overflow: hidden;
background-color: #DCE0E0;
}

.blog-post-item__img img {
    transition: transform 0.3s ease-out;
    object-fit: cover;
    will-change: transform;
}

.blog-post-item--hr .blog-post-item__img {
width: 140px;
}

.blog-post-item .blog-post-item__meta {
font-size: 0.75rem;
}

@media (max-width: 767.98px) {
.blog-post-item .blog-post-item__meta {
    font-size: 0.6875rem;
}
}

.blog-post-item .blog-post-item__meta span:first-child:after {
content: "";
display: inline-block;
background-color: #00847E;
width: 4px;
height: 4px;
border-radius: 100%;
margin: 0.375rem;
vertical-align: middle;
}

.blog-page-heading-link > span {
border-bottom: 1px solid #1B2020;
}

.blog-page-heading-link i {
transition: transform 0.3s ease-in-out;
}

.blog-page-heading-link:hover i {
transform: translateX(4px);
}

.blog-post-meta span + span:before {
content: "";
display: inline-block;
background-color: #00847E;
width: 4px;
height: 4px;
border-radius: 100%;
margin: 0.375rem;
vertical-align: middle;
}

.blog-posts-top {
position: relative;
}

@media (max-width: 991.98px) {
.blog-posts-top .owl-stage {
    left: -50px;
}
}

.blog-posts-top .owl-nav button.owl-next, .blog-posts-top .owl-nav button.owl-prev {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 2.5rem;
height: 2.5rem;
font-size: 1.5rem;
border-radius: 100%;
background-color: rgba(27, 25, 43, 0.45);
color: #fff;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease-in-out;
}

.blog-posts-top .owl-nav button.owl-next:hover, .blog-posts-top .owl-nav button.owl-prev:hover {
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    background-color: rgb(27, 25, 43);
}

.blog-posts-top .owl-nav button.owl-next.disabled, .blog-posts-top .owl-nav button.owl-prev.disabled {
    display: none;
}

.blog-posts-top .owl-nav button.owl-next {
right: -10px;
}

.blog-posts-top .owl-nav button.owl-prev {
left: -10px;
}

.blog-posts-top:hover .owl-nav button.owl-next, .blog-posts-top:hover .owl-nav button.owl-prev {
opacity: 1;
visibility: visible;
}

.blog-posts-top:hover .owl-nav button.owl-next {
right: -20px;
}

.blog-posts-top:hover .owl-nav button.owl-prev {
left: -20px;
}

.blog-post-wrapper + .blog-post-wrapper {
margin-top: 1.5rem;
}

.blog-post-wrapper p {
font-size: 1rem;
line-height: 1.6;
margin-bottom: 0;
}

.blog-post-wrapper p + p {
    margin-top: 1.5rem;
}

.blog-post-wrapper a {
color: #00847E;
text-decoration: underline;
}

.blog-post-wrapper a:hover {
    text-decoration: none;
}

.blog-post-wrapper ol > li + li, .blog-post-wrapper ul > li + li {
margin-top: 0.5rem;
}

.blog-post-blockquote {
border-left: 2px solid #00847E;
padding-left: 1rem;
}

.blog-post-blockquote blockquote {
    font-size: 1.25rem;
    font-weight: 600;
    font-style: italic;
}

    .blog-post-blockquote blockquote + figcaption {
        font-size: 0.875rem;
        color: #5D6464;
    }

.blog-post-title {
padding-top: 1.5rem;
}

.blog-post-inner-img figure {
margin: 0;
}

.blog-post-inner-img figcaption {
font-size: 0.875rem;
color: #5D6464;
margin-top: 0.5rem;
}

.blog-post-cta-form .form-control {
height: 3.25rem;
}

.blog-post-cta-form label {
color: #464C4C;
font-size: 0.875rem;
line-height: 1.5;
}

.blog-post-cta-form .btn {
width: 100%;
padding: 0.8125rem 1rem;
}

.social-shares {
border-top: 1px solid #C5CDCD;
padding-top: 2rem;
margin: 2rem 0;
}

.social-shares__list {
display: flex;
align-items: center;
gap: 1rem;
}

/*rtl:begin:ignore*/
.blog-ltr {
text-align: left;
}

.blog-ltr .breadcrumb .breadcrumb-item + .breadcrumb-item {
    padding-left: var(--bs-breadcrumb-item-padding-x);
    padding-right: 0;
}

.blog-ltr .breadcrumb .breadcrumb-item + .breadcrumb-item:before {
        float: left;
        padding-right: var(--bs-breadcrumb-item-padding-x);
        padding-left: 0;
}

/* breadcrumb */
.breadcrumb {
    color: #2F3535;
}
.breadcrumb {
    --bs-breadcrumb-padding-x: 0;
    --bs-breadcrumb-padding-y: 0;
    --bs-breadcrumb-margin-bottom: 1rem;
    --bs-breadcrumb-font-size: 0.875rem;
    --bs-breadcrumb-border-radius:;
    --bs-breadcrumb-divider-color: #2F3535;
    --bs-breadcrumb-item-padding-x: 0.5rem;
    --bs-breadcrumb-item-active-color: #2F3535;
    display: flex;
    flex-wrap: wrap;
    padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);
    margin-bottom: var(--bs-breadcrumb-margin-bottom);
    font-size: var(--bs-breadcrumb-font-size);
    list-style: none;
    /*  background-color: var(--bs-breadcrumb-bg);*/
    border-radius: var(--bs-breadcrumb-border-radius);
}

.breadcrumb-item + .breadcrumb-item {
    padding-left: var(--bs-breadcrumb-item-padding-x);
}

    .breadcrumb-item + .breadcrumb-item::before {
        float: left;
        padding-right: var(--bs-breadcrumb-item-padding-x);
        color: var(--bs-breadcrumb-divider-color);
        /*content: var(--bs-breadcrumb-divider, "/")*/ /* rtl: var(--bs-breadcrumb-divider, "/") */ /*;*/
    }

.breadcrumb-item.active {
    color: var(--bs-breadcrumb-item-active-color);
}
.breadcrumb-item + .breadcrumb-item:before {
    content: "\f285";
    font-family: bootstrap-icons !important;
    font-size: 1rem;
}

.breadcrumb-item a:hover {
    text-decoration: underline;
}

.breadcrumb-item.active {
    font-weight: 700;
}

.blog-ltr .social-shares__list {
    padding-left: 0;
    padding-right: 0;
}

.blog-ltr .blog-nav-menu > ul {
    padding-left: 0;
    padding-right: 0;
}

    .blog-ltr .blog-nav-menu > ul li:not(:last-child) {
        margin-right: 0.5rem;
        margin-left: 0;
    }

.blog-ltr .form-floating > .form-control:focus ~ label, .blog-ltr .form-floating > .form-control:not(:placeholder-shown) ~ label, .blog-ltr .form-floating > .form-control-plaintext ~ label, .blog-ltr .form-floating > .form-select ~ label {
    transform: scale(0.8) translateY(-0.5rem) translateX(0.15rem) !important;
}

.blog-ltr .form-floating > label {
    left: 0;
    right: unset;
    transform-origin: 0 0 !important;
}
