html,
body {
  margin: 0;
  padding: 0;

  height: 100%;
}

body {
  overflow-x: hidden;
}

/* No need to touch this */
.bgcolor {
  background: linear-gradient(to bottom, #000000, #6E21A5);
  padding-bottom: 30px;
}

.spacefromtop {
  padding-top: 160px;
  max-width: 800px
}

.titleofblog {
  color: #EFEFEF;
}

.subheading {
  color: #EFEFEF;
}

.singletopimg {
  width: 100%;
  max-width: 800px;
  height: 450px;

}
.thumbnali-img
{
  object-fit: cover;
}

/* Main section styling */
.share-icon {
  font-size: 18px;
  color: #EFEFEF;
  letter-spacing: 1;
}

.exportimg {
  height: auto;
  width: 20px;
}

.container,
.row {
  overflow: visible !important;
}

.sidebar-fixed {
  position: sticky !important;
  top: 20px !important;
  align-self: flex-start !important;
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  height: fit-content;
}

.sidebar-content {
  padding-right: 20px;
}

.listofcontent {
  color: #EFEFEF;
}

.sidebar-list {
  list-style: none;
  padding: 0;
  color: white;
}

.sidebar-list li {
  font-size: 18px;
  font-weight:400;
  color: #EFEFEF;
  margin-bottom: 10px;

}
.toc-bullet {
  width: 25px;
  height: 25px;
  object-fit: contain;
  margin-top: 3px;
}
.toc-link {
  color: #EFEFEF;
  text-decoration: none;
  transition: color 0.3s ease;
}
.toc-link.active {
  font-weight: 700;


}
.toc-link:hover {
  color: #EFEFEF;
}

.share-icon {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.content-scroll {
  padding-left: 20px;
}

.content-inner {
  padding-right: 40px;
}

/* .autonumbered-list {
  counter-reset: item;
  list-style: none;
  padding-left: 20px;
}

.autonumbered-list li {
  color: #EFEFEF;
  counter-increment: item;
  margin-bottom: 10px;
  position: relative;
  padding-left: 30px;
} */

/* .autonumbered-list li::before {
  content: counter(item) ".";
  position: absolute;
  left: 0;
  color: #EFEFEF;
  font-weight: bold;
} */
.subtitle {
  color: #EFEFEF;
}

.contantofblogs,
.contantofblogs p {
  color: #fff;
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.contantofblogs ol li {
  margin-bottom: 10px;
}

/* cards  */
.headingtitle {
  color: #EFEFEF;
  position: relative;
  display: inline-block;
}

.headingtitle::after {
  content: "";
  display: block;
  height: 4px;
  margin-top: 10px;
  background: linear-gradient(to right, #E31A68, #662D8E);
  width: 100%;
}

.news-card {
  position: relative;
  overflow: hidden;
  height: 400px;
}

.image-container {
  width: 100%;
  position: relative;
  height: 100%;
}

.image-container img {
  object-fit: cover;
  height: 100%;
}

.image-container::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(239, 239, 239, 0) 0%, rgba(34, 2, 57, 0.96) 80%);
  z-index: 1;
}

.overlay-content {
  position: absolute;
  bottom: 5%;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 1.5rem;
}

.cardtitle {
  color: #EFEFEF;
}

a {
  text-decoration: none;
  color: white;
}

.reading {
  color: #EFEFEF;
}

.timeing {
  color: #EFEFEF;
}

.redamore {
  color: #EFEFEF;
  border-bottom: 1px solid #EFEFEF;
  padding-bottom: 2px;
}

.redamore:hover {
  color: #EFEFEF;
  border-bottom: 1px solid #EFEFEF;
  padding-bottom: 2px;
}

.fixed-img-height {
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
}

.zoom-wrapper {
  overflow: hidden;
  height: 500px;
  position: relative;
}

.zoom-hover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  display: block;
}

.zoom-wrapper:hover .zoom-hover-img {
  transform: scale(1.2);
  transform-origin: center center;
}


.share-icon {
  cursor: pointer;
  display: inline-block;
  position: relative;
}

.share-menu {
  min-width: 150px;
  z-index: 999;
}

.share-menu a {
  display: block;
  color: #333;
  padding: 4px 8px;
  text-decoration: none;
}

.share-menu a:hover {
  background-color: #f0f0f0;
}

.subheading {
  max-width: 800px !important;
  width: 100%;
  word-break: break-word;
  overflow-wrap: break-word;
}

.scroll-highlight {
  animation: highlightFade 2s ease-in-out;
  background-color: rgba(255, 255, 0, 0.2);
}

@keyframes highlightFade {
  0% {
    background-color: rgba(255, 255, 0, 0.5);
  }

  100% {
    background-color: transparent;
  }
}

.share-menu {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  display: flex;
}

.share-menu:not(.d-none) {
  opacity: 1;
  transform: translateY(0);
}


.share-menu a:hover {
  background-color: transparent !important;
}

.icons-image-socials {
  width: 30px !important;
  height: 30px !important;
  object-fit: contain;
}

.contantofblogs h4 {
  scroll-margin-top: 100px;
}
.related-blogs-layout
{

  width: 100%;
  height: 400px;
}
.related-blogs-img
{
  object-fit: cover;
}
@media (max-width: 991px) {
  .sidebar-fixed {
    position: static !important;
    top: auto !important;
  }
}