/* ## Hero Banner
--------------------------------------------- */
.single-post .hero-banner-single-post,
.single-post .post-content,
.single-post .post-related-articles {
  background-color: #05070f;
}

.single-post .hero-banner-single-post {
  padding: 150px 0 60px;
  border-bottom: 1px solid #22242b;
}

.single-post .hero-banner-single-post .container,
.single-post .post-content .container,
.single-post .post-related-articles .container {
  max-width: 1220px;
}

.single-post .hero-banner-single-post .hero-banner-single-post-thumbnail {
  max-width: 100%;
  height: 495px;
}

.single-post .hero-banner-single-post .hero-banner-single-post-thumbnail img {
  border-radius: 16px;
  border: 1px solid #1b1f2f;
}

/* ## Main Content
--------------------------------------------- */
.single-post .post-content h1 {
  font-size: 55px;
  line-height: 1.2;
}

.single-post .post-content .post-content-category {
  background: linear-gradient(91deg, #fc935a -9.54%, #1c69fd 137.68%);
  font-size: 9px;
  padding: 3px 14px;
}

.single-post .post-content p:not(.row p) {
  font-size: 15px;
}

.single-post .post-content .col {
  flex: 0 0 auto;
}

.single-post .post-content .post-content-main {
  width: 72.54%;
}

.single-post .post-content .post-content-sidebar {
  width: 27.46%;
}

.single-post .post-content .post-content-main hr {
  opacity: 1;
  margin: 0 0 12px;
  width: 64px;
  border-top: 4px solid #d9d9d9;
}

.single-post .post-content .post-content-main img {
  border-radius: 16px;
}

.single-post .post-content .post-content-main p,
.single-post .post-content .post-content-main ul {
  margin-bottom: 10px;
}

.single-post .post-content .post-content-main ul {
  padding-left: 20px;
}

.single-post .post-content .post-content-main p strong {
  color: #ffffff;
}

.single-post .post-content .post-content-main h2,
.single-post .post-content .post-content-main h3,
.single-post .post-content .post-content-main h4,
.single-post .post-content .post-content-main h5,
.single-post .post-content .post-content-main h6 {
  padding: 10px 0;
  color: #ffffff;
  margin-bottom: 0;
}

.single-post .post-content .post-content-main table {
  border-radius: 10px 10px 0 0;
  margin-bottom: 15px;
}

.single-post .post-content .post-content-main table tr:not(:first-child) {
  border-bottom: 1px solid #ffffff26;
}

.single-post .post-content .post-content-main table tr td {
  padding: 11px 22px;
}

.single-post .post-content .post-content-main table tr:first-child td {
  color: #ffffff;
  background-color: #10121ba1;
  border-bottom: 0;
}

.single-post
  .post-content
  .post-content-main
  table
  tr:first-child
  td:first-child {
  border-radius: 10px 0 0 0;
}

.single-post
  .post-content
  .post-content-main
  table
  tr:first-child
  td:last-child {
  border-radius: 0 10px 0 0;
}

.single-post .post-content .post-content-main table tr:not(:first-child) td {
  font-size: 15px;
  color: #c4c4c4;
  background-color: #05070f;
}

.single-post .post-content .post-content-sidebar .post-content-sidebar-toc {
  position: sticky;
  top: 120px;
}

.single-post .post-content .post-content-sidebar .post-content-toc p {
  font-size: 22px;
}

.single-post .post-content .post-content-sidebar .post-content-toc ul {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0;
}

.single-post
  .post-content
  .post-content-sidebar
  .post-content-toc
  ul
  li:not(:last-child) {
  margin-bottom: 10px;
}

.single-post .post-content .post-content-sidebar .post-content-toc ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: #6a6a6a;
  font-size: 14px;
}

.single-post
  .post-content
  .post-content-sidebar
  .post-content-toc
  ul
  li
  a:focus,
.single-post
  .post-content
  .post-content-sidebar
  .post-content-toc
  ul
  li
  a:hover {
  color: #ffffff;
  font-weight: 500;
}

/* ## Related Articles
--------------------------------------------- */
.single-post .post-related-articles .post-related-articles-item img {
  border-radius: 16px;
  border: 1px solid #1b1f2f;
}

.single-post
  .post-related-articles
  .post-related-articles-item
  .articles-item-category {
  padding: 3px 14px;
  font-size: 9px;
  background: linear-gradient(91deg, #fc935a -9.54%, #1c69fd 137.68%);
}

.single-post .post-related-articles .post-related-articles-item h3 {
  font-size: 23px;
}

.single-post .post-related-articles .post-related-articles-item p {
  margin-bottom: 0;
  font-size: 15px;
}

.single-post .post-related-articles .post-related-articles-item a {
  font-size: 15px;
  color: #ffffff;
}

.single-post .post-related-articles .post-related-articles-item a:focus,
.single-post .post-related-articles .post-related-articles-item a:hover {
  color: #fc9c4b;
}

@media only screen and (max-width: 1024px) {
  /* Hero Banner */
  .single-post .hero-banner-single-post {
    padding: 135px 0 45px;
  }

  .single-post .hero-banner-single-post .hero-banner-single-post-thumbnail {
    height: 375px;
  }

  /* Main Content */
  .single-post .post-content h1 {
    font-size: 43px;
  }

  .single-post .post-content p:not(.row p) {
    font-size: 14px;
  }

  .single-post .post-content .post-content-main,
  .single-post .post-content .post-content-sidebar {
    width: 100%;
  }

  .single-post .post-content .post-content-main p,
  .single-post .post-content .post-content-main ul,
  .single-post .post-content .post-content-main table tr:first-child td {
    font-size: 17px;
  }

  .single-post .post-content .post-content-main table tr td {
    padding: 10px 20px;
  }

  .single-post .post-content .post-content-main table tr:not(:first-child) td {
    font-size: 14px;
  }

  .single-post .post-content .post-content-sidebar .post-content-sidebar-toc {
    position: static;
  }

  .single-post .post-content .post-content-sidebar .post-content-toc p {
    font-size: 21px;
  }

  .single-post .post-content .post-content-sidebar .post-content-toc ul li a {
    font-size: 13px;
  }

  /* Related Articles */
  .single-post .post-related-articles .post-related-articles-item h3 {
    font-size: 22px;
  }

  .single-post .post-related-articles .post-related-articles-item p,
  .single-post .post-related-articles .post-related-articles-item a {
    font-size: 14px;
  }
}

@media only screen and (max-width: 767px) {
  /* Hero Banner */
  .single-post .hero-banner-single-post {
    padding: 120px 0 30px;
  }

  .single-post .hero-banner-single-post .hero-banner-single-post-thumbnail {
    height: 255px;
  }

  /* Main Content */
  .single-post .post-content h1 {
    font-size: 31px;
  }

  .single-post .post-content p:not(.row p) {
    font-size: 13px;
  }

  .single-post .post-content .post-content-main p,
  .single-post .post-content .post-content-main ul,
  .single-post .post-content .post-content-main table tr:first-child td {
    font-size: 16px;
  }

  .single-post .post-content .post-content-main table tr td {
    padding: 9px 18px;
  }

  .single-post .post-content .post-content-main table tr:not(:first-child) td {
    font-size: 13px;
  }

  .single-post .post-content .post-content-sidebar .post-content-toc p {
    font-size: 20px;
  }

  .single-post .post-content .post-content-sidebar .post-content-toc ul li a {
    font-size: 12px;
  }

  /* Related Articles */
  .single-post .post-related-articles .post-related-articles-item {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }

  .single-post .post-related-articles .post-related-articles-item h3 {
    font-size: 21px;
  }

  .single-post .post-related-articles .post-related-articles-item p,
  .single-post .post-related-articles .post-related-articles-item a {
    font-size: 13px;
  }
}

@media only screen and (max-width: 575px) {
  .single-post .hero-banner-single-post .hero-banner-single-post-thumbnail {
    height: 195px;
  }
}
