body {
   font-family: "Cairo", Sans-serif;
   background: #FFFAEF;
   padding-top: 80px;
}
body.admin-bar {
   padding-top: 112px;
}
header > .she-header-yes {
   background-color: rgb(0, 0, 0) !important;
   position: fixed !important;
   top: 0;
   width: 100%;
}
body.admin-bar header > .she-header-yes {
   top: 32px;
}


[class*=__container] {
   padding-left: 16px;
   padding-right: 16px;
   margin: 0 auto;
}
@media (min-width: 768px) {
   [class*=__container] {
      padding-left: 32px;
      padding-right: 32px;
   }
}
@media (min-width: 1025px) {
   [class*=__container] {
      max-width: 1528px;
      padding-left: 64px;
      padding-right: 64px;
   }
}



.blog-page {
   color: #1F2124;
}
.blog-page h1,
.blog-page h2,
.blog-page h3 {
   font-family: "PP Editorial Old", Sans-serif;
   color: #0C0C0C;
   font-weight: 400;
}
.post-hero,
.blog-hero {
   padding: 16px;
   position: relative;
}
.post-hero-background,
.video-background {
   /*aspect-ratio: 20/6;*/
   height: 560px;
   width: 100%;
   border-radius: 32px;
   overflow: hidden;
}
.post-hero-background img,
.video-background video {
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.hero-breadcrumbs {
   color: #8D8D8D;
   font-weight: 700;
}
.hero-breadcrumbs span > span {
   display: inline-block;
   padding: 8px;
}
.hero-breadcrumbs a {
   color: #1F2124;
   font-weight: 700;
}
.post-hero .breadcrumb_last {
   display: none;
}
.hero-overlay {
   border-radius: 32px;
   background: #FFFAEF;
   margin-top: -15%;
   margin-left: auto;
   margin-right: auto;
   max-width: 720px;
   padding: 32px;
   position: relative;
   text-align: center;
   z-index: 2;
}
.hero-overlay:after {
   content: '';
}
.hero-overlay:before {
   content: '';
}
.hero-description {
   margin-top: 16px;
}
.hero-description p {
   margin: 0;
}
.hero-description p + p {
   margin-top: 16px;
}
.hero-button {
   margin-top: 64px;
}

.btn {
   border-radius: 24px;
   background: #0C0C0C;
   border: 2px solid #0C0C0C;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   color: #CBAC56;
   line-height: 1;
   font-weight: 700;
   padding: 14px 20px;
}
.btn:hover {
   background: transparent;
   color: #0C0C0C;
}


.blog-page h1 {
   font-size: 96px;
   margin: 16px 0 0;
}

.blog-categories-nav {
   padding-top: 64px;
}
.blog-categories-nav .categories-list {
   display: flex;
   justify-content: center;
   gap: 32px;
   list-style: none;
   padding: 0;
   border-bottom: 1px solid #EFE5C9;
}
.categories-list a {
   display: block;
   border-bottom: 4px solid transparent;
   color: #8D8D8D;
   font-weight: 700;
   text-transform: capitalize;
   padding: 12px 0;
   margin-bottom: -1px;
   white-space: nowrap;
}
.categories-list a:hover,
.categories-list a.active {
   color: #0C0C0C;
   border-color: #CBAC56;
}

.blog__row {
   display: flex;
   gap: 64px;
   padding-top: 64px;
   padding-bottom: 128px;
}
.blog-sidebar {
   max-width: 480px;
   width: 35%;
}
.blog-sidebar .sidebar-widget {
   padding: 24px;
   margin-bottom: 16px;
}
.blog-sidebar .sidebar-widget.widget-filters {
   border-radius: 32px;
   background: #FFF;
   padding: 8px;
}
.blog-sidebar .widget-title {
   font-family: "PP Editorial Old", Sans-serif;
   font-size: 32px;
   font-weight: 500;
   color: #0C0C0C;
   margin: 0;
}
.blog-sidebar .widget-filters .widget-title {
   padding: 16px;
   border-bottom: 1px solid #EFE5C9;
}
.widget-filters-list {
   padding: 16px;
}
.widget-filters-list .filter-item {
   padding: 12px 0;
}
.widget-filters-list .filter-item label {
   display: flex;
   align-items: center;
   cursor: pointer;
   font-weight: 600;
   gap: 8px;
}
.widget-latest .latest-post-item {
   margin-top: 48px;
}
.latest-post-title a {
   color: #0C0C0C;
}
.latest-post-title {
   font-size: 20px;
   margin-top: 16px;
   margin-bottom: 8px;
   padding-bottom: 8px;
   border-bottom: 1px solid #EFE5C9;
}
.latest-post-item:hover .latest-post-title {
   border-color: #CBAC56;
}


.blog-content-area {
   width: 70%;
}
.posts-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
}
.post-card {
   flex: 0 0 calc(50% - 8px);
}
.post-card-image {
   aspect-ratio: 424/318;
   
   position: relative;
   display: flex;
}
.post-card-image a {
   border: 1px solid transparent;
   display: block;
   border-radius: 20px;
   overflow: hidden;
   width: 100%;
}
.post-card-image a:hover {
   border-color: #CBAC56;
}
.post-card-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.post-read-time {
   font-size: 12px;
   color: #8D8D8D;
   line-height: 1;
   display: flex;
   align-items: center;
   gap: 2px;
}
.post-card-image .post-read-time {
   border-radius: 16px;
   background: #FFF;
   color: #1F2124;
   padding: 8px;
   position: absolute;
   top: 8px;
   left: 8px;
}
.post-card-content {
   padding: 16px;
}
.post-card-title {
   font-size: 20px;
   font-weight: 600;
   color: #0C0C0C;
   margin: 0;
}
.post-card-title a {
   color: #0C0C0C;
}
.post-card-excerpt {
   margin-top: 8px;
}

.blog-pagination .pagination {
   justify-content: center;
}
.blog-pagination .nav-links {
   display: flex;
   gap: 16px;
}
.blog-pagination .page-numbers {
   color: #1F2124;
   font-weight: 700;
   padding: 4px;
}
.blog-pagination .page-numbers.current {
   color: #CBAC56;
}


.post-hero .hero-overlay {
   max-width: 1400px;
   margin: 0 64px;
   text-align: left;
   position: absolute;
   left: 0;
   right: 0;
   bottom: 32px;
}
.post-hero .post-title {
   font-size: 56px;
   margin-bottom: 16px;
}
.post-hero .post-meta {
   display: flex;
   gap: 4px;
}
.post-hero .post-meta-item {
   display: flex;
   align-items: center;
   gap: 4px;
   border-radius: 16px;
   background: #FFF;
   font-size: 12px;
   padding: 8px;
}
.post-meta-date span {
   color: #8D8D8D;  
}

.sidebar-button {
   margin-top: 16px;
}

.post-content-area h1,
.post-content-area h2,
.post-content-area h3 {
   margin-top: 0;
   scroll-margin-top: 100px;
}
.post-content-area p + h2,
.post-content-area p + h3 {
   margin-top: 64px;
}
.post-content-area .wp-block-image {
   align-self: stretch;
   aspect-ratio: 4/3;
   border-radius: 32px;
   overflow: hidden;
   margin: 64px 0;
}
.post-content-area .wp-block-image img {
   object-fit: cover;
   height: 100%;
   width: 100%;
}
.post-content-area ul,
.post-content-area ol {
   padding-left: 28px;
}

.toc-list {
   list-style: none;
   padding: 16px 16px 0;
}
.toc-item {
   padding: 12px 0;
}
.toc-item a {
   color: #1F2124;
   font-weight: 700;
}

@media (min-width: 768px) {
   .mobile-bottom-sidebar {
      display: none;
   }
}


.related-articles-section {
   margin-top: 64px;
}
.posts-grid.related-posts-grid {
   flex-wrap: nowrap;
   overflow-y: auto;
}
.post-card.related-post-card {
   flex: 0 0 320px;
}


@media (max-width: 1240px) {
   .blog__row,
   .blog-categories-nav {
      padding-top: 32px;
      gap: 32px;
   }
   .blog-categories-nav .categories-list {
      justify-content: flex-start;
      overflow-x: auto;
   }
   .post-card {
      flex: 0 0 100%;
   }
}
@media (max-width: 1024px) {
   .blog-hero {
      padding: 8px;
   }
   .hero-overlay {
      max-width: 480px;
      margin-top: -35%;
   }
   .blog-page h1 {
      font-size: 56px;
   }

   .post-hero .hero-overlay {
      margin: 0 32px;
   }
}
@media (max-width: 767px) {

   .hero-overlay {
      margin-top: -45%;
   }
   .blog__row {
      flex-direction: column;
   }
   .blog-sidebar {
      max-width: 100%;
      width: 100%;
   }
   .blog-sidebar:not(.mobile-bottom-sidebar) .widget-latest {
      display: none;
   }
   .blog-content-area {
      width: 100%;
   }

   .post-hero .post-title {
      font-size: 40px;
   }
}

@media (max-width: 520px) {
   body {
      padding-top: 54px;
   }
   body.admin-bar {
      padding-top: 54px;
   }
   .post-hero,
   .blog-hero {
      padding: 0;
   }
   .post-hero-background,
   .video-background {
      border-radius: 0;
   }

   .hero-overlay {
      max-width: 320px;
      padding: 32px 16px;
      margin-top: -80%;
   }

   .post-hero .hero-overlay {
      margin: 0 8px;
      bottom: 8px;
   }

   .posts-grid.related-posts-grid {
      margin: 0 -16px;
      padding: 0 16px;
   }

}