/* Blog - General */

.blog {
  margin-bottom: 56px;
}

.blog h1 {
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  margin-bottom: 0;
}

.blog h2 {
  font-weight: 600;
  font-size: 21px;
  line-height: 31px;
  margin-bottom: 0;
}

.blog h3 {
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
}

.blog .heading {
  display: flex;
  gap: 0 8px;
  border-bottom: 1px solid #d3e0e5;
  padding-bottom: 16px;
  margin-bottom: 28px;
  align-items: center;
}

.blog .blog-results p {
  color: #546e78;
  font-size: 14px;
  line-height: 21px;
}

.blog .blog-results h2 {
  margin-bottom: 6px;
}

.blog .blog-content ul {
  list-style-type: none !important; /* Override for editor list style type attributes until all are removed */
}

.blog .blog-content ul li {
  margin-bottom: 8px;
  display: flex;
}

.blog .blog-content ul li:last-of-type {
  margin-bottom: 0;
}

.blog .blog-content ul li:before {
  left: 0;
  top: 6px;
  display: inline-block;
  width: 8px;
  height: 8px;
  min-width: 8px;
  min-height: 8px;
  background-color: #2abfc9;
  border-radius: 50%;
  margin-right: 12px;
  margin-top: 6px;
  content: "";
}

.blog .banner_element_1,
.blog .banner_element_2 {
  position: absolute;
  z-index: 2;
}

.blog .banner_element_1 {
  bottom: -35px;
  left: -15px;
  font-size: 55px;
}

.blog .banner_element_2 {
  bottom: -38px;
  right: -12px;
  font-size: 50px;
}

/* Blog - Sidebar */

.blog .category-navbar {
  padding: 0;
}

.blog .category-navbar .navbar-toggler {
  padding: 14px 24px;
  text-align: left;
  width: 100%;
  margin-bottom: 24px;
  background: #fff;
  border: 1px solid #d3e0e5;
  display: flex;
  gap: 0 16px;
  border-radius: 10px;
  align-items: center;
  font-size: 16px;
  color: #333;
}

.blog .category-navbar .navbar-toggler:hover,
.blog .category-navbar .navbar-toggler:focus {
  box-shadow: inset 0 0 0 0.125rem #2abfc9;
}

.blog .category-navbar .offcanvas {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  height: 90vh;
}

.blog .category-navbar .offcanvas-header {
  position: relative;
  justify-content: center;
  padding: 24px 16px 0 16px;
}

.blog .category-navbar .offcanvas-body {
  padding: 24px 16px 8px 16px;
}

.blog .category-navbar .offcanvas-title {
  border-bottom: 1px solid #ecf3f6;
  width: 100%;
  text-align: center;
  padding-bottom: 16px;
}

.blog .category-navbar .offcanvas-close {
  border: 0;
  background: none;
  position: absolute;
  right: 6px;
  margin-top: -14px;
}

.blog .category-navbar .nav-item {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ecf3f6;
}

.blog .category-navbar .nav-item:last-of-type {
  border-bottom: 0;
}

.blog .category-navbar .nav-item .nav-link {
  padding-top: 10px;
  padding-bottom: 10px;
  position: relative;
  color: #333;
}

.blog .category-navbar .nav-item .nav-link:hover{
  color: #2abfc9;
}

.blog .category-navbar .nav-item.active .nav-link {
  color: #2abfc9;
  font-weight: 500;
}

.blog .category-navbar .nav-item.active .nav-link:before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  width: 3px;
  border-radius: 10px;
  background: #2abfc9;
}

.blog .category-navbar .categories {
  margin-top: 16px;
}

.blog .category-navbar .category-search {
  position: relative;
}

.blog .category-navbar .category-search input {
  width: 100%;
  background-color: #fff;
  font-size: 16px;
  color: #333;
  border-radius: 10px;
  padding: 14px 60px 14px 20px;
  border: 1px solid #2abfc9;
}

.blog .category-navbar .category-search input::placeholder {
  color: #546e78;
}

.blog .category-navbar .category-search .offcanvas-search {
  border: 0;
  padding: 0;
  background: none;
}

.blog .category-navbar .category-search .offcanvas-search {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: block;
  cursor: pointer;
}

/* Blog - Blog list */

.blog .embla_blog_list .embla__progress {
  left: 0;
  right: 0;
}

.blog .embla_blog_list .embla__container.blog-list {
  flex-wrap: nowrap;
}

.blog .blog-list {
  gap: 16px 0;
  --bs-gutter-x: 16px;
}

.blog .blog-list .blog-post .blog-post-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 16px;
}

.blog .blog-list .blog-post .blog-post-content {
  padding: 16px 16px 24px 16px;
}

.blog .blog-list .blog-post .button-wrapper {
  padding-left: 16px;
  padding-right: 16px;
}

.blog .blog-list .blog-post .blog-post-image {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
}

.blog .blog-list .blog-post .blog-post-image img {
  object-fit: cover;
  width: 100%;
  aspect-ratio: 2 / 1;
}

.blog .blog-list .blog-post .blog-post-content .blog-post-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 21px;
  color: #546e78;
}

/* Blog - Blog home */

.blog.blog-home #slider-mobile {
  margin-bottom: 32px;
}

.blog.blog-home .embla_blog_home .embla__progress {
  left: 0;
  right: 0;
}

.blog.blog-home .embla_blog_home .embla__container.blog-home-slider {
  flex-wrap: nowrap;
}

.blog.blog-home .blog-home-slider {
  --bs-gutter-x: 16px;
}

.blog.blog-home .popular-blogs {
  margin-top: 8px;
}

.blog.blog-home .latest-blogs {
  margin-top: 40px;
}

.blog.blog-home .blog-home-slider .blog-slide-wrapper {
  position: relative;
  display: grid;
}

.blog.blog-home .blog-home-slider .blog-slide-wrapper picture,
.blog.blog-home .blog-home-slider .blog-slide-wrapper .blog-slide-content {
  grid-column: 1;
  grid-row: 1;
}

.blog.blog-home .blog-home-slider .blog-slide-wrapper picture {
  position: relative;
}

.blog.blog-home .blog-home-slider .blog-slide-wrapper:hover picture {
  -webkit-filter: brightness(90%);
}


.blog.blog-home .blog-home-slider .blog-slide-wrapper picture:before {
  content: "";
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(51, 51, 51, 0.8) 86.98%
  );
  background-blend-mode: multiply;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 10px;
}

.blog.blog-home .blog-home-slider .blog-slide-wrapper picture img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  aspect-ratio: 1.23 / 1;
}

.blog.blog-home .blog-home-slider .blog-slide-wrapper .blog-slide-content {
  padding: 16px;
  z-index: 1;
  max-width: 550px;
}

.blog.blog-home .blog-home-slider .blog-slide-wrapper .blog-slide-title {
  color: #fff;
  font-size: 18px;
  line-height: 22px;
  font-weight: 500;
}

.blog.blog-home .blog-home-slider .blog-slide-wrapper .blog-slide-desc {
  margin-top: 10px;
  color: #fff;
  font-size: 14px;
  line-height: 21px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Blog - Blog category */

.blog.blog-category .category-description {
  position: relative;
  display: grid;
  margin-bottom: 56px;
}

.blog.blog-category .category-description picture,
.blog.blog-category .category-description .category-description-title {
  grid-column: 1;
  grid-row: 1;
}

.blog.blog-category .category-description picture {
  position: relative;
}

.blog.blog-category .category-description picture:before {
  content: "";
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 51.58%,
    rgba(51, 51, 51, 0.8) 86.55%
  );
  background-blend-mode: multiply;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 10px;
}

.blog.blog-category .category-description picture img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  aspect-ratio: 1.6 / 1;
}

.blog.blog-category .category-description .category-description-title {
  z-index: 1;
  padding: 24px;
}

.blog.blog-category .category-description .category-description-title h2 {
  font-weight: 500;
  font-size: 22px;
  line-height: 27px;
  color: #fff;
}

.blog.blog-category .category-description .category-description-content h2 {
  font-weight: 500;
  font-size: 28px;
  line-height: 35px;
  color: #fff;
}

.blog.blog-category .category-description .category-description-content {
  border-radius: 10px;
  background: #fff;
  padding: 20px 16px;
  margin-top: 8px;
}

.blog.blog-category .category-description .category-description-content p {
  text-align: left !important; /* Override for editor text center style attributes until all are removed */
}

.blog.blog-category
  .category-description
  .category-description-content
  p:last-of-type {
  margin-bottom: 0;
}

/* Blog - Blog post */

.blog.blog-single .blog-description {
  position: relative;
  display: grid;
  margin-bottom: 56px;
}

.blog.blog-single .blog-description picture,
.blog.blog-single .blog-description .blog-description-title {
  grid-column: 1;
  grid-row: 1;
}

.blog.blog-single .blog-description picture img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  aspect-ratio: 1.6 / 1;
}

.blog.blog-single .blog-description picture {
  position: relative;
}

.blog.blog-single .blog-description picture:before {
  content: "";
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 51.58%,
    rgba(51, 51, 51, 0.8) 86.55%
  );
  background-blend-mode: multiply;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 10px;
}

.blog.blog-single .blog-description .blog-description-title {
  z-index: 1;
  padding: 24px;
}

.blog.blog-single .blog-description .blog-description-title h2 {
  font-weight: 500;
  font-size: 22px;
  line-height: 27px;
  color: #fff;
}

.blog.blog-single .blog-description .blog-description-content h2 {
  font-weight: 500;
  font-size: 24px;
  line-height: 30px;
  color: #515151;
}

.blog.blog-single .blog-description .blog-description-content {
  border-radius: 10px;
  background: #fff;
  padding: 20px 16px;
  margin-top: 8px;
}

.blog.blog-single .blog-description .blog-description-content p {
  text-align: left !important; /* Override for editor text center style attributes until all are removed */
}

.blog.blog-single .blog-description .blog-description-content p:last-of-type {
  margin-bottom: 0;
}

.blog.blog-single .blog-content {
  padding: 20px 16px;
}

.blog.blog-single .related-blogs {
  margin-top: 40px;
}

.blog-content-title {
  font-size: 21px;
  line-height: 31px;
  font-weight: 600;
}

/* Blog - Blog search */

.blog.blog-search .blog-results {
  display: flex;
  flex-direction: column;
}

.blog.blog-search .no-results {
  padding: 20px 16px;
  margin-bottom: 40px;
}

.blog.blog-search .no-results .no-results-title {
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
}

.blog.blog-search .no-results .no-results-title span {
  color: #546e78;
}

/* Bootstrap sm - Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}

/* Bootstrap md - Medium devices (tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .blog.blog-category .category-description picture:before,
  .blog.blog-single .blog-description picture:before {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 43.8%,
      rgba(51, 51, 51, 0.8) 92.68%
    );
  }

  .blog.blog-home .popular-blogs {
    margin-top: 16px;
  }

  .blog.blog-home .latest-blogs {
    margin-top: 48px;
  }

  .blog .heading {
    margin-bottom: 40px;
    gap: 0 16px;
  }

  .blog.blog-category .category-description picture img,
  .blog.blog-single .blog-description picture img {
    aspect-ratio: 2.88 / 1;
  }

  .blog .blog-list .blog-post .blog-post-image img {
    aspect-ratio: 1.76 / 1;
  }

  .blog .category-navbar .nav-item.active .nav-link:before {
    left: -24px;
  }

  .blog.blog-home #slider-mobile {
    margin-bottom: 40px;
  }

  .blog .category-navbar .offcanvas-header {
    position: relative;
    justify-content: center;
    padding: 24px 24px 0 24px;
  }

  .blog .category-navbar .offcanvas-body {
    padding: 24px;
  }

  .blog.blog-single .related-blogs {
    margin-top: 48px;
  }

  .blog.blog-search .no-results {
    margin-bottom: 48px;
  }

  .blog.blog-home .blog-home-slider .blog-slide-wrapper .blog-slide-desc {
    font-size: 16px;
    line-height: 24px;
    -webkit-line-clamp: 3;
  }

  .blog.blog-home .blog-home-slider .blog-slide-wrapper .blog-slide-content {
    padding: 24px;
  }

  .blog.blog-home .blog-home-slider .blog-slide-wrapper picture img {
    aspect-ratio: 2.01 / 1;
  }
}

/* Bootstrap lg - Large devices (desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .blog.blog-category .category-description picture:before {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0,
      rgba(51, 51, 51, 0.8) 81.51%
    );
  }

  .blog.blog-single .blog-description picture:before {
    background: none;
  }

  .blog.blog-home .popular-blogs {
    margin-top: 56px;
  }

  .blog.blog-home .embla_blog_home .embla__prev,
  .blog.blog-home .embla_blog_home .embla__next {
    width: 40px;
    height: 40px;
    background-color: #fff;
  }

  .blog.blog-home .embla_blog_home .embla__prev:after {
    background: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.3839 23.3839C18.872 22.8957 18.872 22.1043 18.3839 21.6161L11.7678 15L18.3839 8.38388C18.872 7.89573 18.872 7.10427 18.3839 6.61612C17.8957 6.12796 17.1043 6.12796 16.6161 6.61612L9.20451 14.0277C8.66753 14.5647 8.66754 15.4353 9.20451 15.9723L16.6161 23.3839C17.1043 23.872 17.8957 23.872 18.3839 23.3839Z' fill='%2334444B'/%3E%3C/svg%3E%0A") no-repeat center center / cover;
  }

  .blog.blog-home .embla_blog_home .embla__next:after {
    background: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.6161 23.3839C11.128 22.8957 11.128 22.1043 11.6161 21.6161L18.2322 15L11.6161 8.38388C11.128 7.89573 11.128 7.10427 11.6161 6.61612C12.1043 6.12796 12.8957 6.12796 13.3839 6.61612L20.7955 14.0277C21.3325 14.5647 21.3325 15.4353 20.7955 15.9723L13.3839 23.3839C12.8957 23.872 12.1043 23.872 11.6161 23.3839Z' fill='%2334444B'/%3E%3C/svg%3E%0A") no-repeat center center / cover;
  }

  .blog.blog-home .embla_blog_home .embla__prev {
    left: 9px;
  }

  .blog.blog-home .embla_blog_home .embla__prev:after,
  .blog.blog-home .embla_blog_home .embla__next:after {
    color: #34444b;
    font-size: 26px;
  }

  /* .blog.blog-home .embla_blog_home .embla__prev:before,
  .blog.blog-home .embla_blog_home .embla__next:before {
    content: "";
    height: 100%;
    width: 50px;
    position: absolute;
  } */


  .blog.blog-home .embla_blog_home .embla__next {
    right: 9px;
  }

  .blog.blog-home .blog-home-slider .blog-slide-wrapper .blog-slide-content {
    padding: 32px 40px;
  }

  .blog.blog-home .blog-home-slider .blog-slide-wrapper picture img {
    aspect-ratio: 2.05 / 1;
  }

  .blog .blog-home-slider {
    transform: translate3d(7.5%, 0, 0);
  }

  .blog.blog-home .blog-home-slide {
    width: 85%;
  }

  .blog .embla_blog_home {
    border-radius: 8px;
  }

  .blog.blog-home .blog-home-slider .blog-slide-wrapper .blog-slide-title {
    font-size: 20px;
    line-height: 25px;
  }
  .blog {
    margin-bottom: 80px;
  }

  .blog .heading {
    padding-bottom: 20px;
  }

  .blog .navbar-expand-lg .offcanvas .offcanvas-body {
    display: block;
  }

  .blog .category-navbar .offcanvas-body {
    padding: 0;
  }

  .blog h1 {
    font-size: 32px;
    line-height: 48px;
  }

  .blog h2 {
    font-size: 28px;
    line-height: 42px;
  }

  .blog.blog-category .category-description picture img {
    aspect-ratio: 2.39 / 1;
  }

  .blog.blog-single .blog-description picture img {
    aspect-ratio: 2.42 / 1;
    max-width: 85%;
  }

  .blog .blog-list .blog-post .blog-post-image img {
    aspect-ratio: 1.56 / 1;
  }

  .blog.blog-single .blog-list .blog-post .blog-post-image img {
    aspect-ratio: 2.4 / 1;
  }

  .blog.blog-category .category-description .category-description-content {
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
    background: none;
    margin-top: 0;
    padding: 48px;
    max-width: 750px;
  }

  .blog.blog-single .blog-description .blog-description-content {
    border-radius: 10px;
    background: #fff;
    padding: 24px;
    margin-top: 0;
    position: absolute;
    max-width: 400px;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }

  .blog.blog-single .blog-content {
    padding: 32px;
  }

  .blog.blog-single .blog-description {
    margin-bottom: 24px;
  }

  .blog.blog-single .blog-description .blog-description-content p {
    color: #515151;
  }

  .blog.blog-category .category-description .category-description-content p {
    color: #fff;
  }

  .blog .blog-list {
    gap: 24px 0;
    --bs-gutter-x: 1.5rem;
  }

  .blog .blog-results {
    text-align: right;
  }

  .blog .blog-results p {
    font-size: 16px;
    line-height: 24px;
  }

  .blog .blog-list .blog-post .blog-post-wrapper {
    padding-bottom: 24px;
  }

  .blog .blog-list .blog-post .blog-post-content {
    padding: 24px;
  }

  .blog .blog-list .blog-post .button-wrapper {
    padding-left: 24px;
    padding-right: 24px;
  }

  .blog .category-navbar .categories {
    background: #fff;
    padding-left: 24px;
    padding-right: 24px;
    border-radius: 10px;
    margin-top: 24px;
  }

  /* .blog .category-navbar {
    top: 120px;
    position: sticky;
  } */

  .blog.blog-search .blog-results {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: -8px;
  }

  .blog .blog-results h2 {
    margin-bottom: 0;
  }

  .blog.blog-search .no-results {
    padding: 24px;
  }
}

/* Bootstrap lg - Applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
  .blog .embla_blog_list,
  .blog .embla_blog_home {
    margin-left: -24px;
    margin-right: -24px;
  }
  .blog .embla_blog_list .blog-post {
    width: 47%;
  }
  .blog .blog-home-slide {
    width: 94%;
  }
}

/* Bootstrap md - Applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
  .blog .embla_blog_list,
  .blog .embla_blog_home {
    margin-left: -12px;
    margin-right: -12px;
  }

  .blog .embla_blog_list .blog-post,
  .blog .blog-home-slide {
    width: 90%;
  }
}

/* Media query za Apple */
@supports (-webkit-touch-callout: none) {
  .blog h1,
  .blog h2,
  .blog-content-title {
    font-weight: 500;
  }
}