.blog.index {
  background: #fff linear-gradient(180deg, rgba(169, 209, 224, 0.63) 0%, rgba(245, 254, 255, 0.63) 36%, rgba(221, 246, 252, 0.63) 68%, rgba(237, 247, 253, 0.93) 90%, rgb(255, 255, 255) 100%) 0% 0%;
}

.breadcrumb ol li:nth-child(-n+2):after {
  content: " / ";
  padding: 0 0.5em;
  display: inline-block;
}

@media screen and (min-width: 768px) {
  .breadcrumb ol li:nth-child(-n+3):after {
    content: " / ";
    padding: 0 0.5em;
    display: inline-block;
  }
}


/** Detail Content Begin */
.blog.detail .content h2 {
  text-align: unset;
  margin: 1em 0;
  font-size: 1.2em;
}

.blog.detail .content p>img {
  display: block;
  margin: 1.5em auto;
  max-width: 800px;
  width: 100%;
  height: auto;
}

.blog.detail .content a {
  color: #3fa7b8;
}

.blog.detail .content>ul>li,
.blog.detail .content>ol>li {
  margin-bottom: .8em;
}

.blog.detail .content p {
  margin-bottom: .5em;
}

.blog.detail .relate .blogs li:not(:last-child) {
  border-bottom: 1px solid #8F999A;
}

/** Detail Content End */

/* Search Begin */
.filter .search-input {
  width: 100%;
  border-radius: 3em;
  padding: 1em 3.5em 1em 2em;
  border: 0;
  font-size: 1em;
  outline: none;
  position: relative;
  z-index: 2;
  transition: 0.3s;
  background-color: #fafafa;
}

.filter .search-form.active .search-input {
  box-shadow: 0px 3px 15px #989A9B
}

.filter .search-input::placeholder {
  color: rgba(137, 136, 136, .63);
}

.filter .icon-search {
  position: absolute;
  top: 0;
  right: 2em;
  bottom: 0;
  background: transparent;
  z-index: 2;
  line-height: 4em;
}

.filter .fa-magnifying-glass {
  font-size: 1.7em;
  color: rgba(137, 136, 136, .63);
}

.filter .btn-search {
  min-width: 15em;
  color: #fafafa;
  border-radius: 1.5em;
  display: inline-block;
  text-align: center;
  margin: 0 auto;
  padding: 0.78em 0.2em;
  font-weight: 400;
  transition: 0.3s;
  background: linear-gradient(180deg, #3EA8B8 0%, #1D72A5 100%);
}

.filter .btn-search:active,
.filter .btn-search:hover {
  color: #fafafa;
}

/* Search End */


/** BTN Begin */
.btn-more {
  border: 1px solid var(--softblue);
  border-radius: 2rem;
  background-color: rgba(255, 255, 255, 0.3);
  color: var(--softblue);
  padding: 0.3rem 0.8rem;
  display: inline-flex;
  align-items: center;
}

.btn-more::after {
  content: "";
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNi45OTkgMTIuNjE5Ij4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTIxLjUwOSAtMi41MjUpIj4KICAgIDxwYXRoIGQ9Ik0wLDBIMjUuOTk0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjIuMDA5IDguOTIpIiBmaWxsPSJub25lIiBzdHJva2U9IiMzZWE4YjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxIi8+CiAgICA8cGF0aCBkPSJNLTMxNjcuNTQ3LDQyOTguNzVsNi42OTEsNS43LTYuNjkxLDUuNTA2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMzA4Ljg2NSAtNDI5NS41MikiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzNlYThiOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEiLz4KICA8L2c+Cjwvc3ZnPg==) no-repeat 0 0 / contain;
  display: inline-block;
  width: 1.5rem;
  height: 0.8rem;
  margin-left: 0.5rem;
  transition: transform 0.2s;
  font-size: .8em;
}

.btn-more:hover {
  background-color: var(--softblue);
  color: #fff;
}

.btn-more:hover::after {
  filter: grayscale(1) invert(1) brightness(3);
  transform: translate(0.4em, 0);
}

/** BTN End */

#blog-type .active {
  background: var(--softblue);
  color: #fff;
}

.blog.detail .project-related-content ul {
  padding: 0;
}

.blog.detail .project-related-content ul li:first-child {
  display: block;
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"%3E%3Cg%3E%3Cpath d="M0,0H16.5V16.5H0Z" fill="rgba(0,0,0,0)"/%3E%3Cpath d="M19.125,15.4a2.063,2.063,0,1,1-2.063-2.063A2.063,2.063,0,0,1,19.125,15.4Z" transform="translate(-8.812 -7.833)" fill="rgba(0,0,0,0)" stroke="%239b9b9b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/%3E%3Cpath d="M16.057,14.391,13.14,17.308a1.375,1.375,0,0,1-1.944,0L8.278,14.391a5.5,5.5,0,1,1,7.779,0Z" transform="translate(-3.916 -2.938)" fill="rgba(0,0,0,0)" stroke="%239b9b9b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/%3E%3C/g%3E%3C/svg%3E') no-repeat left top / auto 1.5em;
  padding-left: 1.8em;
}

.blog.detail .project-related-content .price {
  margin-top: 1em;
  color: var(--softblue);
}

.blog.detail .project-related-content .fa-arrow-right {
  transform: rotate(45deg);
}

.blog.detail .project-related {
  max-height: 220px;
  overflow-y: hidden;
}

@media (min-width: 991.98px) {
  .blog.detail .relate {
    position: sticky;
    top: -110px;
    height: fit-content;
    z-index: 2;
  }
}