.single-main {
  position: relative;
  background-color: #121212; 
  margin-top: -40px;
}

/* Overlay image */
/* .single-main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('https://scalex-static-assets.s3.us-east-1.amazonaws.com/img/gradient-top-hero.webp'); 
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top!important;
  opacity: 1; 
} */

/* Ensures text is on top of the overlay */
.single-main > * {
  position: relative;
 
}

/* .pattern-blog-conatiner {
  background-image: url(http://scalextech.com/wp-content/uploads/2025/03/left-gradient-right-pattern-new-scaled.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
} */

.scalex-breadcrumb {
        display: flex;
        align-items: center;
        gap: 4px;
        justify-content: flex-start;
      }
      /* .scalex-breadcrumb .page-name {
        color: #f8f8f8;
        font-family: Source Sans Pro;
        font-size: 16px;
        font-weight: 400;
        line-height: 20.11px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        padding: 8px 16px;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(200px);
        border: 1px solid #f8f8f833;
        border-radius: 8px;
      }
      .scalex-breadcrumb .title {
        color: #f8f8f8;
        font-family: "Inter", sans-serif;
        font-optical-sizing: auto;
        font-size: 16px;
        font-weight: 400;
        line-height: 20.11px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      } */
      .main-container-single {
        max-width: 1920px;
        width: 100%;
        margin: 0 auto;
        padding: 124px 64px 0px 120px;
      }
     
      .single-header {
          width: 1000px;
          margin: 0 auto;
        }

        .single-header,
        .single-contents-left,
        .single-container {
          width: 1000px;
          margin: 0 auto;
        }

        /* For screen width 1300px and below - make width 100% */
        @media (max-width: 1300px) {
          .single-header,
          .single-contents-left,
          .single-container {
            width: 100%;
          }
        }

        /* For screen width 1920px and above - max-width 1200px */
        @media (min-width: 1920px) {
          .single-header,
          .single-contents-left,
          .single-container {
            max-width: 1200px;
            width: 100%;
          }
        }


      .single-header .single-title {
        margin: 0;
        padding: 0;
        color: rgba(248, 248, 248, 0.8);
        font-family: Lato;
        font-size: 39.06px;
        font-weight: 700;
        line-height: 48px;
        letter-spacing: -0.005em;
        text-align: left;

      }

      
      .single-header .single-category-name p {
        margin: 0!important;
        padding: 0;
      }

      .single-header .single-category-name a {
        margin: 0;
        padding: 0;
        color: #f8f8f8;
        font-family: Source Sans Pro;
        font-size: 20px;
        font-weight: 400;
        line-height: 25.14px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
      }
      .single-header .date-read-time {
        margin: 0;
        padding: 0;
        color: rgba(242, 242, 242, 0.7); 
        font-family: "Inter", sans-serif;
        font-optical-sizing: auto;
        font-size: 14px;
        font-weight: 400;
        line-height: 20.11px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
      }
      .title-date-time {
        width:100%;
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 44px 0;
      }
      .single-container {
        /* display: flex;
        gap: 64px;
        width: 100%;
        align-items: flex-start;
        justify-content: space-between; */
        padding: 64px 0;
      }
      .single-contents-left {
        display: flex;
        flex-direction: column;
        gap: 32px;
      }
      .blog-single-container img{
        display: block;
        max-width: 85%;
        margin: 0 auto;
        border-radius: 12px;
      }
      .blog-single-container p{
        padding: 0;
        color: rgba(242, 242, 242, 0.7);
        font-family: "Inter", sans-serif;
        font-optical-sizing: auto;
        font-size: 18px;
        font-weight: 400;
        line-height: 26px;
        text-align: left;
        /* hyphens: auto; */
        margin-bottom: 24px;
      }
      .blog-single-container p:last-child{
        margin-bottom: 0;
      }
      /* .blog-single-container p:has(strong) {
        margin-bottom: 16px;
      } */
      .blog-single-container .mb-12{
          margin-bottom: 16px;
      }
      .blog-single-container .st{
        font-family: Inter;
        font-weight: 600;
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 16px;
      }
      .single-contents-right {
        width: 30%;
       
      }
      .single-contents-left p {
        padding: 0;
        color: rgba(242, 242, 242, 0.7);
        font-family: "Inter", sans-serif;
        font-optical-sizing: auto;
        font-size: 18px;
        font-weight: 400;
        line-height: 26px;
        text-align: left;
      }
      .single-contents-left p strong {
          margin-bottom: -16px !important;
          /* display: block; */
      }

    .single-contents-left a {
      position: relative;
      color: rgba(242, 242, 242, .7);
      font-weight: 600;
      text-decoration: underline; 
      transition: color 0.5s ease-in-out;
    }

    .single-contents-left a::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0; /* adjust based on font size */
      width: 0;
      height: 2px;
      background-color: #0092FF;
      transition: .5s ease-in-out;
    }
      .single-contents-left a:hover {
        color: #0092FF;
        }
        /* Remove hover effect if <a> contains an <img> */
.single-contents-left a:has(img):hover {
  color: inherit;
}

.single-contents-left a:has(img):hover::after {
  width: 0;
  background: transparent;
}


    .single-contents-left a:hover::after {
      width: 100%;
    }

      .single-contents-left ul:last-child {
        margin-bottom: 0;
      }
      .single-contents-left ul {
        margin-bottom: 24px;
      }
      .single-contents-left li {
        padding: 0;
        color: rgba(242, 242, 242, 0.7);
        font-family: "Inter", sans-serif;
        font-optical-sizing: auto;
        font-size: 18px;
        font-weight: 400;
        line-height: 26px;
        text-align: left!important;
        /* hyphens: auto; */
        margin-bottom: 12px;
      }
      .single-contents-left li:last-child {
        margin-bottom: 0;
      }
      /* .ol.wp-block-list {
        margin-left: 21px!important;
      } */
      /* .single-contents-left strong {
       font-weight: 600!important;
      } */
       .single-contents-left h3 {
        padding: 0;
        color: rgba(242, 242, 242, 0.7); 
        font-family: Lato;
        font-size: 25px;
        font-weight: 700;
        line-height: 30px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        margin-bottom: 24px;

       }
       .single-contents-left h4 {
        padding: 0;
        color: #f8f8f8;
        font-family: Lato;
        font-size: 20px;
        font-weight: 700;
        line-height: 26px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        margin-bottom: 24px;

       }
      .popular {
        display: flex;
        flex-direction: column;
        gap: 16px;
        flex-wrap: wrap;
        width: 100%;
      }
      .popular h2 {
        margin: 0;
        padding: 0;
        color: #f8f8f8;
        font-family: Lato;
        font-size: 25px;
        font-weight: 600;
        line-height: 30px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
      }
  
      .popular a, p {
        margin: 0;
        padding: 0;
        color: #f8f8f8;
        font-family: Source Sans Pro;
        font-size: 20px;
        font-weight: 400;
        line-height: 25.14px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
      }
       .popular a:hover {
         color: #3185FF;
       }
      .popular .date-read-time {
        margin-top: -6px;
        padding: 0;
        color: #f8f8f8;
        font-family: Source Sans Pro;
        font-size: 14px;
        font-weight: 400;
        line-height: 17.6px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
      }
      .seperator {
        display: block;
        width: 100%;
        height: 1px;
        background-color: #383838;
      }
      @media only screen and (max-width: 1024px) {
        .main-container-single {
          padding: 124px 32px 0px 32px;
        }
        .single-container {
          flex-direction: column;
          gap: 32px;
        }
        .single-contents-left {
          width: 100%;
        }
        .single-contents-right {
          width: 100%;
          display: flex;
          gap: 32px;
          align-items: center;
        }
        .popular{
          width: 65%;
        }
        .title-date-time {
          width:100%!important;
          padding: 32px 0;
        }
      }
      @media only screen and (max-width: 600px) {
        .main-container-single {
          padding: 100px 24px 0px 24px;
        }
        .scalex-breadcrumb .title{
          width: 220px;
        }
        .single-container {
          gap: 32px;
          flex-direction: column;
          padding: 32px 0;
        }
        .single-contents-left {
          width: 100%;
         
        }
        .cta-container{
          margin-top: 0!important;
        }
        .single-contents-right {
          width: 100%;
           flex-direction: column-reverse;
           align-items: flex-start;
        }
        .title-date-time {
          padding: 32px 0;
        }
        .single-header .single-title {
          font-size: 31px;
          line-height: 36px;
        }
        .popular{
          width: 100%;
        }
        .popular h2 {
          font-size: 21px;
          line-height: 26px;
        }
        .cta-container{
          margin-top: 0!important;
          min-width: 100%!important;
        }
      .blog-single-container img{
        max-width: 100%;

      }
      }

.cta-container{
  background-color: #3185FF;
  background-image:url('https://scalex-static-assets.s3.us-east-1.amazonaws.com/img/bg-blue.svg');
  background-repeat:no-repeat;
  background-size:cover;
  background-position: center;
  width: 100%;
  min-height:200px;
  margin: 64px 0 64px 0;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 56px;
  gap: 32px;

}
.cta-container button:hover{
background-color: transparent;
color: #f8f8f8;
}

.cta-container h2{
color:#F2F2F2;
font-family: Lato;
font-size: 31.25px;
font-weight: 600;
line-height: 37.5px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
}
.cta-container p{
color:#F2F2F2;
font-family: Source Sans Pro;
font-size: 16px;
font-weight: 400;
line-height: 20.11px;
text-align: center;
text-underline-position: from-font;
text-decoration-skip-ink: none;
transition: .5S ease-in-out;
}
.cta-container button{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width:160px;
  max-height: 44px;
  background:#f8f8f8;
  border:2px solid #F8F8F8;
  padding:12px 16px;
  border-radius:1000px;
  color:#3185FF;
  font-family: Source Sans Pro;
  font-size: 16px;
  font-weight: 600;
  line-height: 20.11px;
  text-align: center;
  transition: .5s ease-in-out;

}

 @media only screen and (max-width: 768px) {
.cta-container{
  flex-direction: column;
  padding: 24px;
  margin-bottom: 32px !important;
}
.cta-container h2{
  font-size: 25px;
  text-align: center;
  line-height: normal;
}
 }

/* #sticky_right_top70 {
    position: sticky!important;
    position: -webkit-sticky!important;;
    top: 95px!important;;
} */

.similar-blog-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 64px;
}

.similar-blog-heading {
  color: #F2F2F2;
  font-family: Lato;
  font-weight: 700;
  font-size: 31.25px;
  line-height: 100%;
}

.similar-blog-cards {
  display: flex;
  gap: 56px;
  justify-content: space-between;

}
.similar-blog-card .image-wrapper img{
    overflow: hidden;
    border-radius: 8px;
    transition: all .4s ease;
}

.similar-blog-card:hover .image-wrapper img{
    transform: scale(1.05) rotate(2deg);
    opacity: 0.8;
    display: block;
}

.similar-blog-card:hover p{
 color: #3185FF;
}



.similar-blog-card {
  flex: 1 1 30%;
  /* max-width: 365px; */
}

.similar-blog-card a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  text-decoration: none;
}

.image-wrapper {
  width: 100%;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: 8px;
}

.similar-blog-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.similar-blog-card p {
  color: #F2F2F2;
  font-family: Lato;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  transition: .5s ease-in-out;
}

.similar-blog-card button {
  color: #F2F2F2;
  font-family: Source Sans Pro;
  font-weight: 600;
  font-size: 14px;
  line-height: 100%;
  background: transparent;
  border: none;
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: .5s ease-in-out;
}
.similar-blog-card .underline-text {
   transition: .5s ease-in-out;
}
.similar-blog-card i{
   transition: .5s ease-in-out;
}
.similar-blog-card:hover .underline-text {
  color: #3185FF;
  text-decoration: underline;
}

.similar-blog-card:hover i {
  color: #3185FF;
}


@media (max-width: 768px) {
  .similar-blog-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    justify-content: center;
  }

  .similar-blog-card:nth-last-child(1):nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
  }

  .similar-blog-card {
    max-width: 365px;
  }
}

@media (max-width: 600px) {
  .similar-blog-cards {
    grid-template-columns: 1fr;
    justify-content: center;
  }

  .similar-blog-card {
    justify-self: center;
    max-width: 100%;
  }

  .similar-blog-container {
    padding-top: 32px;
    gap: 24px;
  }

  .similar-blog-heading {
    font-size: 25px;
    line-height: 30px;
  }
}

.cta-similar-blog-container{
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 120px 64px;
}


@media (max-width: 1024px) {
.cta-similar-blog-container{
  max-width: 1920px;
  margin: 0 auto;
  padding: 32px 32px 64px 32px;
}
.cta-container{
  margin: 32px 0 32px 0;
}

}

/* If LESS than 3 cards — center them and remove width constraints */
.similar-blog-cards:not(:has(.similar-blog-card:nth-child(3))) {
  justify-content: flex-start;
}

.similar-blog-cards:not(:has(.similar-blog-card:nth-child(3))) .similar-blog-card {
  flex: 0 1 365px;
  max-width: 100%;
}

/* For 3 cards, allow flexible growth without hard limiting width */
.similar-blog-card {
  flex: 1;
  max-width: none;
}