/* earnedit sec-1 */
.earn-banner {position: relative; width: 100%; height: 100%;}
.earn-banner .earn-banner-bg {position: relative; width: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; min-height: 600px;}
.earn-banner .earn-banner-bg img {width: 100%; height: 100%;}
.earn-banner .earn-banner-bg .earn-banner-content {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%;}
.earn-content {display: flex; flex-direction: column; align-items: center; text-align: center;}
.earn-scrub {margin-bottom: 24px;}
.earn-scrub ul {display: flex; margin: 0; padding: 0; list-style: none; justify-content: center; align-items: center; gap: 36px;}
.earn-scrub ul li {position: relative; display: block; margin: 0; padding: 0;}
.earn-scrub ul li:not(:first-child)::before {position: absolute; content: ''; top: 50%; left: -18px; background-image: url(../images/rightarrow.svg); width: 4px; height: 8px; background-repeat: no-repeat; background-position: center; background-size: cover; transform: translateY(-50%);}
.earn-scrub ul li i {display: inline-flex; min-width: 20px; width: 20px;}
.earn-scrub ul li i img {width: 100%; height: auto;}
.earn-scrub ul li span {color: #fff; font-family: 'Inter'; font-weight: 400; font-size: 16px; line-height: 20px; letter-spacing: 0%;}
.earn-title {position: relative; width: 100%;text-align: center;}
.earn-title h1 {font-family: 'Inter'; font-weight: 600; font-size: 54px; line-height: 78px; margin-bottom: 24px; color: #fff;}
.earn-title p {font-family: 'Inter'; font-weight: 400; font-size: 20px; line-height: 32px; color: #A1A1AB;}
/* earnedit sec-1 */

/* earnedit blog-detail */
.blog-detail-wrap {background-color: #0F0F0F;}
.bolg-detail-inner {padding: 124px 0 64px;}
.bolg-detail-inner .earn-scrub ul {justify-content: flex-start;}
.bolg-detail-inner .earn-scrub ul li:last-child span {color: #3CB64A; font-weight: 600px;}
.blog-inner-title {margin-bottom: 24px;}
.blog-inner-title h1 {font-family: 'Inter'; font-weight: 600; font-size: 54px; line-height: 78px; color: #FFF;}
.blog-inner-bottom {position: relative; width: 100%;}
.blog-inner-bottom ul {display: flex; justify-content: flex-start; align-items: center; margin: 0; padding: 0; gap: 48px;}
.blog-inner-bottom ul li {display: flex; margin: 0; padding: 0; align-items: center; margin: 0; padding: 0; gap: 10px; position: relative;}
.blog-inner-bottom ul li:not(:first-child)::before {position: absolute; content: ''; left: -20%; top: 50%; width: 1px; height: 10px; background: #FFF; transform: translate(-50%, -50%);}
.blog-inner-bottom ul li:first-child span {display: block; padding: 10px 16px; font-family: 'Inter'; font-weight: 600;
font-size: 14px; line-height: 16px; color: #3CB64A; background: rgba(60, 182, 74, 0.1); border-radius: 60px;}
.blog-inner-bottom ul li i {display: inline-flex; min-width: 24px; height: 24px; width: 24px; border-radius: 100px; overflow: hidden; }
.blog-inner-bottom ul li i img {width: 100%; height: auto;}
.blog-inner-bottom ul li:last-child i {border: 1px solid #3CB64A;}
.blog-inner-bottom ul li span {font-family: 'Inter'; font-weight: 400; font-size: 16px; line-height: 24px; color: #FFF;}
.blog-detail-content {position: relative; padding-bottom: 64px;} 
.blog-detail-content .conten-grp {display: flex; align-items: flex-start; justify-content: flex-start; width: 100%; gap: 44px;}
.blog-detail-content .conten-grp .content-left-list {width: 30%; min-width: 328px; width: 328px;}
.blog-detail-content .conten-grp .content-left-list .left-content {background: #0F0F0F; box-shadow: 0px 4.22px 18.98px 0px #FFFFFF33 inset; box-shadow: 0px 103.35px 105.45px -50.62px #FFFFFF1A inset; border-radius: 10px; padding: 16px; margin-bottom: 24px; background: #0F0F0F; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0px 4.22px 18.98px 0px #FFFFFF33 inset, 0px 103.35px 105.45px -50.62px #FFFFFF1A inset, 0px -86.47px 71.71px -67.49px #FFFFFF1A inset;}

/* Make the left TOC sticky and constrain its height to viewport */
.blog-detail-content .conten-grp { position: relative; }
.blog-detail-content .conten-grp .content-left-list {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
}
.blog-detail-content .conten-grp .content-left-list .left-content h6 {font-family: 'Inter'; font-weight: 600; font-size: 18px; line-height: 100%; color: #FFF; margin-bottom: 16px;}
.blog-detail-content .conten-grp .content-left-list .left-content ul {display: block; margin: 0; padding: 0; list-style: none; max-height: 205px; overflow: hidden; scroll-behavior: smooth; overflow-y: auto;}
.blog-detail-content .conten-grp .content-left-list .left-content ul::-webkit-scrollbar{ width: 4px; height: 10px; border-radius: 30px; padding: 3px 0;}
.blog-detail-content .conten-grp .content-left-list .left-content ul::-webkit-scrollbar-track{ background: rgba(255, 255, 255, 0.1); border-radius: 30px; padding: 3px 0;}
.blog-detail-content .conten-grp .content-left-list .left-content ul::-webkit-scrollbar-thumb{ background: #FFF; border-radius: 10px; border: 2px solid transparent; width: 6px; padding: 3px 0;}
.blog-detail-content .conten-grp .content-left-list .left-content ul li {display: block; margin: 0; padding: 0; list-style: none;}
.blog-detail-content .conten-grp .content-left-list .left-content ul li:not(:last-child) {margin-bottom: 10px;}
.blog-detail-content .conten-grp .content-left-list .left-content ul li a {display: flex; align-items: center; justify-content: flex-start;}
.blog-detail-content .conten-grp .content-left-list .left-content ul li a.active i svg path {fill: #FFF;} 
.blog-detail-content .conten-grp .content-left-list .left-content ul li a.active span {color: #FFF;}
.blog-detail-content .conten-grp .content-left-list .left-content ul li a i {display: inline-flex; min-width: 26px; width: 26px; height: 26px; padding: 8px;}
.blog-detail-content .conten-grp .content-left-list .left-content ul li a span {font-family: 'Inter'; font-weight: 400; font-size: 16px; line-height: 26px; color: #A1A1AB; display: block;}
/* Stronger rule to ensure active TOC link text and icon are white */
.blog-detail-content .conten-grp .content-left-list .left-content ul li a.active,
.blog-detail-content .conten-grp .content-left-list .left-content ul li a.active span,
.blog-detail-content .conten-grp .content-left-list .left-content ul li a.active i svg path {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}
.viral-project {border-top: 1px solid rgba(255, 255, 255, 0.2);}
.viral-project-box { padding: 20px; border-radius: 10px; margin-top: 24px; position: relative; margin-bottom: 24px; width: 32.8rem; background: url(../images/blog-detail-sidebar.webp) no-repeat center center; background-size: 100% 100%; border-radius: 1.5rem;
position: relative;}


/* .viral-project-box::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(140px 140px at 18% 18%,
      rgba(255,255,255,.06) 0%,
      rgba(255,255,255,0) 60%
    ),
    radial-gradient(120% 140% at 50% 50%,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.40) 70%,
      rgba(0,0,0,.62) 100%
    );
  opacity: .9;
} */

.viral-project-box h6 {font-family: 'Inter'; font-weight: 600; font-size: 18px; line-height: 100%; color: #FFF; margin-bottom: 10px;}
.viral-project-box p {font-family: 'Inter'; font-weight: 400; font-size: 14px; line-height: 20px; color: #A1A1AB;} 
.viral-project-box .btnbox {margin-top: 24px; display: flex; width: 100%; justify-content: center;}
.viral-project-box .btnbox a {display: flex; justify-content: center; align-items: center; background: linear-gradient(90deg, #3CB64A 0%, #2E9E3F 100%); padding: 10px; font-family: 'Inter'; font-weight: 600; font-size: 14px; line-height: 18px; width: 100%; border-radius: 60px; color: #FFF;}
.share-link-grp.desktop {border-top: 1px solid rgba(255, 255, 255, 0.2); display: block;}
.share-link-grp .share-link {padding-top: 24px;}
.share-link-grp .share-link h6 {color: #FFF; font-family: 'Inter'; font-weight: 600; font-size: 18px; line-height: 100%; margin-bottom: 16px; gap: 16px;}
.btngrp {display: flex; justify-content: flex-start; align-items: center; gap: 16px;}
.btngrp .cbtn {display: flex;}
.btngrp .cbtn a {display: flex; align-items: center; justify-content: center; gap: 4px; font-family: 'Inter'; font-weight: 500; font-size: 14px; line-height: 20px;
color: #FFF; border: 1px solid #FFF; border-radius: 60px; padding: 8px 16px;}
.btngrp .cbtn a i {display: inline-flex; min-width: 20px; width: 20px; height: 20px;}
.btngrp .cbtn a i img {width: 100%; height: auto;}
.social-link {display: block;}
.social-link ul {display: flex; align-items: center; gap: 16px; margin: 0; padding: 0; list-style: none;}
.social-link ul li {display: block; margin: 0; padding: 0; list-style: none;}
.social-link ul li a {display: flex; border: 1px solid #FFF; border-radius: 60px; width: 36px; height: 36px; align-items: center; justify-content: center;}
.social-link ul li a i {display: inline-flex; justify-content: center; align-items: center; min-width: 18px; width: 18px; height: 18px;}
.social-link ul li a i img {width: 100; height: auto;}
.content-right-list {width: 70%; min-width: 1100px; width: 1100px;}
.content-right-list .content-detail {width: 100%; position: relative;}
.content-right-list .content-detail + .content-detail {margin-top: 32px;}
.content-right-list .content-detail .content-img {display: block; position: relative; width: 100%;}
.content-right-list .content-detail .content-img::after {content: ''; display: block; padding-top: 54.546%;;}
.content-right-list .content-detail .content-img img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; border-radius: 16px; object-fit: cover;}
.content-right-list .content-detail .content-text {margin-top: 24px;}
.content-right-list .content-detail .content-text p {font-family: 'Inter'; font-weight: 400; font-size: 18px; line-height: 32px; color: #A1A1AB; padding: 0;}
.content-right-list .content-detail h3 {font-family: 'Inter'; font-weight: 600; font-size: 32px; line-height: 100%; color: #FFF; margin-bottom: 24px;} 
.content-right-list .content-detail .content-text span {display: block; font-family: 'Inter'; font-weight: 400; font-size: 18px; line-height: 32px; color: #A1A1AB; margin-top: 24px;}
.content-right-list .content-detail .content-text ul {display: block; margin: 0; padding: 0; list-style: none;}
.content-right-list .content-detail .content-text ul li {display: block; margin: 0; padding: 0; list-style: none; display: block; font-family: 'Inter'; font-weight: 400; font-size: 18px; line-height: 32px; color: #A1A1AB; position: relative; padding-left: 30px;}
.content-right-list .content-detail .content-text ul li::before {position: absolute; left: 10px; content: ''; top: 14px; width: 6px; height: 6px; border-radius: 100%; background: #A1A1AB;}
.content-right-list .content-detail .content-text ul li strong {font-weight: 700;}
.content-other {position: relative; display: flex; flex-direction: column; padding-left: 20px;}
.content-other + .content-other {margin-top: 24px;}
.content-other::before {position: absolute; left: 0; top: 0; height: 100%; width: 1px; background-color: #3CB64A; content: '';}
.content-other h6 {font-family: 'Inter'; font-weight: 600; font-size: 20px; line-height: 32px; color: #FFF; margin-bottom: 10px;}
.content-other p {font-family: 'Inter'; font-weight: 400; font-size: 18px; line-height: 32px; color: #A1A1AB;}
.authore-dtl {display: flex; align-items: flex-start; gap: 12px; background: rgba(255, 255, 255, 0.05); padding: 20px; border-radius: 16px; margin-top: 32px;}
.authore-dtl .authore-image {display: flex;}
.authore-dtl .authore-image i {display: inline-flex; width: 46px; min-width: 46px; height: 46px; border: 1px solid #3CB64A; border-radius: 100px; overflow: hidden;}
.authore-dtl .authore-image i img {width: 100%; height: auto;}
.authore-dtl .authore-grp {position: relative;}
.authore-dtl .authore-grp .authore-name {margin-bottom: 16px;}
.authore-dtl .authore-grp .authore-name span {display: block; font-family: 'Inter'; font-weight: 600; font-size: 16px;
line-height: 100%; color: #FFF; margin-bottom: 10px;}
.authore-dtl .authore-grp .authore-name p {font-family: 'Inter'; font-weight: 400; font-size: 14px; line-height: 100%;
color: #A1A1AB; }
.authore-dtl .authore-grp .authore-discri {position: relative; margin-top: 16px;}
.authore-dtl .authore-grp .authore-discri p {font-family: 'Inter'; font-weight: 400; font-size: 14px; line-height: 22px;
color: #A1A1AB;}

.content-right-list .content-detail .content-text p a {display: inline-flex; color: #FFF; text-decoration: underline; text-underline-offset: 2px;}

.content-left-list .left-content .toc-toggle {display: none;}
.earn-scrub a {display: none;}
.share-link-grp.mobile {display: none;}


@media (max-width: 1699px){ 
  
  .blog-inner-title h1 {font-size: 48px;}
  .blog-inner-bottom ul li:first-child span {width: 100%;}
  .content-right-list {width: 80%;  min-width: 560px;}
  .blog-detail-content .conten-grp .content-left-list {width: 20%;}
}

@media (max-width: 1399px){ 
  .bolg-detail-inner {padding-bottom: 16px;}
  .blog-inner-title h1 {font-size: 44px;}
  .blog-inner-title {margin-bottom: 16px;}
  .blog-inner-bottom ul li:first-child span {width: 100%;}
  .blog-detail-content .conten-grp .content-left-list .left-content {order: 2;}
  .content-right-list .content-detail .content-text {margin-top: 12px;}
  .content-right-list .content-detail .content-text p,
  .content-right-list .content-detail .content-text span,
  .content-right-list .content-detail .content-text ul li,
  .content-other p {font-size: 18px; line-height: 28px;}
  .content-right-list .content-detail h3 {font-size: 28px; margin-bottom: 12px; line-height: 1.3;}
  .content-right-list .content-detail + .content-detail {margin-top: 24px;}
  .content-other h6 {font-size: 22px;}
  .content-right-list {width: 80%;  min-width: 560px;}
  .blog-detail-content .conten-grp .content-left-list {width: 20%;}
  .content-right-list .plan-cta-block {flex-direction: column-reverse; align-items: center; justify-content: center; padding: 2.4rem;}
  .content-right-list .plan-cta-block .plan-cta-left {flex-direction: column; margin: 0; align-items: center; justify-content: center; gap: 3rem;}
  .content-right-list .plan-cta-right {padding: 0 0 3rem; text-align: center;}
}

@media (max-width: 1199px){ 
  .bolg-detail-inner {padding-bottom: 16px;}
  .blog-inner-title h1 {font-size: 40px;}
  .blog-inner-title {margin-bottom: 16px;}
  .blog-inner-bottom ul li:first-child span {width: 100%;}
  .blog-detail-content .conten-grp .content-left-list .left-content {order: 2;}
  .content-right-list .content-detail .content-text {margin-top: 12px;}
  .content-right-list .content-detail .content-text p,
  .content-right-list .content-detail .content-text span,
  .content-right-list .content-detail .content-text ul li,
  .content-other p {font-size: 16px; line-height: 28px;}
  .content-right-list .content-detail h3 {font-size: 24px; margin-bottom: 12px; line-height: 1.3;}
  .content-right-list .content-detail + .content-detail {margin-top: 24px;}
  .content-other h6 {font-size: 18px;}
  .content-right-list {width: 80%;  min-width: 560px;}
  .blog-detail-content .conten-grp .content-left-list {width: 20%;}

  .content-right-list .plan-cta-block {flex-direction: column-reverse; align-items: center; justify-content: center; padding: 2.4rem;}
  .content-right-list .plan-cta-block .plan-cta-left {flex-direction: column; margin: 0; align-items: center; justify-content: center; gap: 3rem;}
  .content-right-list .plan-cta-right {padding: 0 0 3rem; text-align: center;}
}

@media (max-width: 991px){
  .bolg-detail-inner {padding-bottom: 16px;}
  .blog-detail-content .conten-grp {flex-direction: column; gap: 24px;}
  .blog-detail-content .conten-grp .content-left-list { width: 100%; min-width: 100%; display: flex; flex-direction: column; gap: 16px;}
  .content-right-list {width: 100%; min-width: 100%; }
  .blog-inner-title h1 {font-size: 36px; line-height: 44px;}
  .blog-inner-title {margin-bottom: 16px;}
  .blog-inner-bottom ul li:first-child span {width: 100%;}
  .viral-project {display: none;}
  .share-link-grp {order: 1; border: none;}
  .blog-detail-content .conten-grp .content-left-list .left-content {order: 2; box-shadow: none;}
  .content-right-list .content-detail .content-text {margin-top: 12px;}
  .content-right-list .content-detail .content-text p,
  .content-right-list .content-detail .content-text span,
  .content-right-list .content-detail .content-text ul li,
  .content-other p {font-size: 16px; line-height: 28px;}
  .content-right-list .content-detail h3 {font-size: 24px; margin-bottom: 12px; line-height: 1.3;}
  .content-right-list .content-detail + .content-detail {margin-top: 24px;}
  .content-other h6 {font-size: 18px;}
  .content-left-list .left-content { position: relative; }
  .content-left-list .left-content .toc-toggle {
    width: 100%;
    text-align: left;
    background: #3CB64A;
    border: 1px solid #3CB64A;
    padding: 10px 12px;
    font-size: 16px;
    border-radius: 6px;
    color: #222;
    cursor: pointer;
    color: #FFF;
    font-family: 'Inter';
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .content-left-list .left-content ul#toc-list {
    display: none;
    margin-top: 8px;
    padding: 0;
    list-style: none;
  }
  .content-left-list .left-content.open ul#toc-list {
    display: block;
    background: #fff;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #E2E2E2;
    max-height: 135px;
  }
  .content-left-list .left-content .toc-caret { float: right; transition: transform .2s ease; transform: rotate(180deg);}
  .content-left-list .left-content.open .toc-caret { transform: rotate(0deg); }
  .content-left-list .left-content ul#toc-list li a { display: flex; align-items: center; padding: 8px; border-bottom: 1px solid #f1f1f1; color: #A2A2A2; padding: 0;}
  .content-left-list .left-content ul#toc-list li a:last-child { border-bottom: none; }
  /* .content-left-list .left-content ul#toc-list li a { padding: 0; } */
  .blog-detail-content .conten-grp .content-left-list .left-content ul li a.active i svg path {color: #3CB64A !important; fill: #3CB64A !important;}
  .blog-detail-content .conten-grp .content-left-list .left-content ul li a span {color: #A2A2A2; font-size: 14px;}
  .blog-detail-content .conten-grp .content-left-list .left-content ul li a.active span {color: #222222 !important;}
  .blog-detail-content .conten-grp .content-left-list .left-content h6 {display: none;}
  .blog-detail-content .conten-grp .content-left-list {background-color: #0F0F0F;  z-index: 6;top: 0;}
  .bolg-detail-inner {background-color: #0F0F0F; z-index: 1; position: relative;}
  .blog-detail-content .conten-grp .content-left-list .left-content ul li:not(:last-child) {margin-bottom: 6px;}

  .bolg-detail-inner .earn-scrub a {display: flex; align-items: center; justify-content: flex-start; font-weight: 400; font-size: 13px; line-height: 100%; letter-spacing: 0%; color: #FFF; position: relative; gap: 8px;}
  .bolg-detail-inner .earn-scrub a i {display: inline-flex; width: 6px; min-width: 6px; height: 6px; transform: rotate(180deg);}
  .bolg-detail-inner .earn-scrub ul {display: none;}
  .share-link-grp.desktop {display: none;}
  .share-link-grp.mobile {display: block;}
  .blog-detail-content .conten-grp .content-left-list .left-content {padding-left: 0; padding-right: 0;}
  .blog-detail-content .conten-grp .content-left-list .left-content {margin-bottom: 0;}
}

@media (max-width: 767px){
  .bolg-detail-inner {padding-bottom: 16px; padding-top: 80px;}
  .blog-detail-content .conten-grp {flex-direction: column; gap: 24px;}
  .blog-detail-content .conten-grp .content-left-list {width: 100%; min-width: 100%; display: flex; flex-direction: column; gap: 16px;}
  .content-right-list {width: 100%; min-width: 100%; }
  .blog-inner-title h1 {font-size: 32px; line-height: 44px;}
  .blog-inner-title {margin-bottom: 16px;}
  .blog-inner-bottom ul {gap: 16px; flex-wrap: wrap; max-width: 260px;}
  .blog-inner-bottom ul li:last-child::before {left: -10%;}
  .blog-inner-bottom ul li:first-child span {width: 100%;}
  .viral-project {display: none;}
  .share-link-grp {order: 1; border: none;}
  .blog-detail-content .conten-grp .content-left-list .left-content {order: 2;}
  .content-right-list .content-detail .content-text {margin-top: 12px;}
  .content-right-list .content-detail .content-text p,
  .content-right-list .content-detail .content-text span,
  .content-right-list .content-detail .content-text ul li,
  .content-other p {font-size: 16px; line-height: 28px;}
  .content-right-list .content-detail h3 {font-size: 24px; margin-bottom: 12px; line-height: 1.3;}
  .content-right-list .content-detail + .content-detail {margin-top: 24px;}
  .content-other h6 {font-size: 18px;}
  
}



.continue-learning {position: relative; padding: 64px 0;}
.continue-learning .learning-title {text-align: center; width: 100%; margin-bottom: 54px;}
.continue-learning .learning-title h3 {font-family: 'Inter'; font-weight: 500; font-size: 36px; line-height: 100%; text-align: center; color: #FFF; margin-bottom: 24px;}
.continue-learning .learning-title p {font-family: 'Inter'; font-weight: 400; font-size: 20px; line-height: 28px; letter-spacing: 0%; text-align: center; color: #A1A1AB;}
/* .continue-learning  .filter-box-grp .filter-box .filter-inner {background: transparent;} */