.blog-page-container {
   padding-bottom: 128px;
}

.blog-individual-header {
   padding: 56px;
   background: var(--bs-background-one);
   border-radius: 12px;
   margin: 80px 0 80px 0;
}

.single-blog-header-image img {
   border-radius: 8px;
   height: 100%;
   object-fit: cover;
}

.header-excerpt {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   -o-text-overflow: ellipsis;
   text-overflow: ellipsis;
}

.blog {
   padding: 8px 12px;
   gap: 12px;
   width: 55px;
   height: 35px;
   background: #b7e5ff;
   border-radius: 4px;
}

.author-image {
   width: 43px;
   height: 42px;
   border-radius: 43px;
   background: lightgray 50% cover no-repeat;
}

.social-container {
   gap: 14px;
}

.social-icon-parent {
   width: fit-content;
}

.social-icon-parent image {
   width: 24px;
   height: 24px;
   fill: #999;
}

.social-link {
   width: 34px;
   height: 34px;
   border: 1px solid rgba(0, 0, 0, 0.5);
   border-radius: 100%;
   padding: 15%;
}

.single-cpt-container h1,
.single-cpt-container h2,
.single-cpt-container h3,
.single-cpt-container h4,
.single-cpt-container h5,
.single-cpt-container h6 {
   scroll-margin-top: 4rem;
}

.content-table .menu-link.active {
   color: var(--bs-accent-one) !important;
   transition: color 0.2s ease;
}

.content-list {
   list-style: decimal-leading-zero;
   color: var(--dd-greys-400, #c3c7cd);
}

.menu-link {
   color: var(--bs-primary) !important;
   text-decoration: none !important;
}

.content-list li {
   margin-top: 1.5rem;
   font-weight: 600;
}

.content-list li::marker {
   font-weight: 800;
}

.blog-content h5 {
   color: var(--bs-primary);
}

.blog-content p,
.blog-content ul{
   color: var(--bs-secondary);
}

section.you-may-like {
   margin: 80px 0 0 0;
   padding: 56px 0px 104px;
   border-top: 0.5px solid #a6acb5;
}

.you-may-like .card {
   height: 100%;
   box-shadow: 2px 8px 20px 2px rgba(40, 40, 40, 0.15);
   border-radius: 8px 32px 8px 8px !important;
}

.you-may-like .card-title {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   -o-text-overflow: ellipsis;
   text-overflow: ellipsis;
}

.you-may-like .card-text {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   -o-text-overflow: ellipsis;
   text-overflow: ellipsis;
}

.you-may-like-img {
   /* background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.2) 0%,
      rgba(0, 0, 0, 0.2) 100%
    ),
    lightgray -175.275px 0px / 172.496% 100% no-repeat; */
   border-radius: 0 0px 8px 8px;
   height: 162px;
}

.you-may-like-img img {
   object-fit: cover;
   height: 162px;
   border-radius: 0 0px 8px 8px;
   background: linear-gradient(0deg, #000 0%, #000 100%),
      lightgray -175.275px 0px / 172.496% 100% no-repeat;
}

.hover-card {
   position: relative;
   background-repeat: no-repeat;
   background-size: cover;
   transition: background-image 0.3s ease;
}

.hover-card:hover {
   border-radius: 8px 32px 8px 8px;
   opacity: 0.93;
   background-color: #fff;
   backdrop-filter: blur(7.5px);
}

.hover-card .image-overlay {
   position: absolute;
   top: 65%;
   width: 100%;
   left: 195px;
   transform: translate(-50%, -50%);
   padding: 20px;
   opacity: 0;
   transition: opacity 0.3s ease;
   color: var(--dd-global-500-brand-body, #4f5b6b);
}

.hover-card .image-overlay-2 {
   position: absolute;
   top: 88%;
   width: 100%;
   left: 195px;
   transform: translate(-50%, -50%);
   padding: 20px;
   opacity: 0;
   transition: opacity 0.3s ease;
}

.hover-card:hover .image-overlay {
   opacity: 0.93;
}

.hover-card:hover .image-overlay-2 {
   opacity: 0.93;
}

.hover-card:hover .card-image img {
   opacity: 0;
}

.copy-link-btn {
   position: relative;
   border-radius: 20px;
}

.copy-link-btn::after {
   content: "Link copied!";
   padding: 0.25rem 0.75rem 0.75rem 0;
   position: absolute;
   left: -0.75rem;
   bottom: -2.45rem;
   min-width: 200px;
   border-radius: 2px;
   opacity: 0;
   transition: all 2200ms ease;
}

html[dir="rtl"] .copy-link-btn::after {
   left: unset;
   right: -2.75rem;
}

.copy-link-btn.active::after {
   opacity: 1;
}

.copy-link-btn {
   transition: all 100ms ease-out;
}

.copy-link-btn:active {
   transform: scale(0.95);
   box-shadow: none;
}

@media (max-width: 600px) {
   .blog-individual-header {
      padding: 24px;
      margin: 40px 0 50px 0;
   }

   section.you-may-like {
      margin: 64px 0 0 0;
      padding: 56px 0px 0;
   }
}

@media (min-width: 905px) {
   .sticky-container {
      position: sticky;
      top: 100px;
      height: fit-content;
   }
}