body{background-color: var(--c-cream);}
    strong{color: var(--c-charcoal);}
    /* body style end*/
    .progress{position: fixed; top: 68px; left: 0; height: 3px; background: linear-gradient(135deg, #E8972A, #f5b942); z-index: 99; transition: width 0.1s linear; width: 0%;}
    /*progress bar end  */
    .hero{background: linear-gradient(135deg, #F25C7A 0%, #E8972A 60%, #f5b040 100%); position: relative; overflow: hidden;}
    .hero .emogy {position: absolute; right: 0; top: 0; bottom: 0; width: 340px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; opacity: 0.18; pointer-events: none; font-size: 80px; line-height: 1;}
    .hero .emogy > :nth-child(2) {font-size: 60px;}
    .hero .overlay{position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none;}
    .hero  > :nth-child(2){width: 300px; height: 300px; background: rgba(255, 255, 255, 0.12); top: -80px; right: 80px;}
    .hero > :nth-child(3) {width: 200px; height: 200px; background: rgba(59, 191, 173, 0.2); bottom: -60px; right: 200px;}
    .hero  > :nth-child(4) {width: 160px; height: 160px; background: rgba(255, 255, 255, 0.08); top: 30px; left: 40%;}
    .hero .shape-wrap{position: absolute;inset: 0;overflow: hidden; pointer-events: none;}
    .hero .shape-wrap .inner-shape{animation: floating linear infinite;}
    .hero .shape-wrap > :first-child{background-color:rgba(255,255,255,0.6); height: 12px; width: 12px; position: absolute; border-radius:50%; top: 15%; left: 8%;animation-duration: 4s; animation-delay: 0s;}
    .hero .shape-wrap > :nth-child(2){background-color: rgba(255, 255, 255, 0.4); border-radius: 50%; height: 8px; width: 8px; top: 60%; left: 5%; animation-duration: 4.8s; animation-delay: 1.2s; position: absolute;}
    .hero .shape-wrap .d-shape{font-size: var(--fs-sm); color:var(--c-gold);}
    .hero .shape-wrap > :nth-child(3){position: absolute; font-size: 16px; color: rgba(255, 255, 255, 0.5); top: 25%; right: 15%; animation-delay: 0.5s; animation-duration: 4s;}
    .hero .shape-wrap > :nth-child(4){width: 10px; height: 4px; background: rgba(255, 255, 255, 0.5); border-radius: 2px; top: 70%; right: 10%; animation-delay: 1.5s; animation-duration: 4s; position:absolute;}
    .hero .shape-wrap > :nth-child(5){font-size: 14px; color: rgba(255, 255, 255, 0.4); bottom: 20%; left: 20%; animation-delay: 0.8s; animation-duration: 4s; position: absolute;}
    .hero .container .wrapper{display: flex; align-items: center; gap: 64px;width: 100%;padding-top: 80px; padding-bottom: 60px;}
    .hero .container .wrapper .left{position:relative;}
    .hero .container .wrapper .left > :first-child{display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.22); color: var(--c-white); border-radius: 999px; padding: 8px 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; backdrop-filter: blur(6px);}
    .hero .container .wrapper .left > :nth-child(2) {font-family: var(--ff-primary); font-size: clamp(28px, 3.8vw, 48px); font-weight: 700; color: var(--c-white); line-height: 1.2; padding-block: 18px;padding-right: 318px;}
    .hero .container .wrapper .left > :nth-child(2) span{font-style: italic; color: var(--c-gold);}
    .hero .container .wrapper .left .hero-btn > :first-child{ display: flex; align-items: center; gap: 20px; color:rgba(255,255,255,0.75); font-size: var(--fs-sm);}
    .hero .container .wrapper .left .hero-btn > :first-child > :first-child{padding-right: 10px;}
    .hero .container .wrapper .left .hero-btn > :first-child >*:not(:first-child){list-style: disc; padding-right: 10px;}
    /* sidebar-css */
    .article {display: grid; grid-template-columns: 1fr 300px; gap: 48px; max-width: 1200px; margin: 0 auto; padding: 48px 24px 80px; align-items: start;}
    .article  .sidebar{position: sticky; top: 100px; display: flex; flex-direction: column; align-items: center; gap: 10px; float: left; margin-left: -72px; margin-top: 8px; width: 48px;}
    .article  .sidebar .social > *:not(:nth-child(5)){width: 42px; padding-block: 12px; border-radius: 50%; border: 2px solid var(--c-border); background: var(--c-white); display: flex; align-items: center; justify-content: center; transition: all 0.2s; cursor: pointer; color: var(--c-text);}
    .article  .sidebar .social > *:not(:nth-child(5)):hover{border-color: var(--c-gold); color: var(--c-gold); transform: scale(1.1); background: var(--c-surface);}
    .sidebar > :first-child{font-size: 11px; font-weight: 600; color: var(--c-text); letter-spacing: 1.5px; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); margin-bottom: 4px;}
    .sidebar .social{display: flex; flex-direction: column; gap: 10px;}
     .sidebar .divider {width: 1px; padding-block: 10px; background: var(--c-border);}
     .sidebar .social > :first-child:hover{border-color: #1877f2 !important; color: #1877f2 !important;}
     .sidebar .social > :nth-child(2):hover{border-color: #000 !important; color: #000 !important;}
     .sidebar .social > :nth-child(3):hover{border-color: #25d366 !important; color: #25d366 !important;}
     .sidebar .social > :nth-child(4):hover{border-color: #e60023 !important; color: #e60023 !important;}
    /* toc-css */
    .toc{background: var(--c-surface); border: 1.5px solid #ecd9c8; border-left: 4px solid var(--c-gold); border-radius: 14px; padding: 24px 28px; margin-bottom: 40px;}
    .toc-header{display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
    .toc .toc-header >:first-child{font-family: var(--ff-primary); font-size: 17px; font-weight: 700; color: var(--c-charcoal); display: flex; align-items: center; gap: 8px;}
    .toc .toc-header >:last-child{background: none; border: none; color: var(--c-text); padding: 4px; transition: transform 0.25s;}
    .toc > :nth-child(2) {display: flex; flex-direction: column; gap: 6px; counter-reset: toc-counter; padding: 0; padding-top: 8px;}
    .toc > :nth-child(2) li a {font-size: 14px; font-weight: 500; color: var(--c-text); display: flex; align-items: center; gap: 8px; padding: 4px 0; transition: color 0.2s;}
   .toc > :nth-child(2) li a:hover {color: var(--c-gold);}     
    .toc > :nth-child(2) li a::before { counter-increment: toc-counter; content: counter(toc-counter, decimal-leading-zero); /* 01, 02, 03... */ font-size: 12px; font-weight: 600; color: var(--c-teal); background: rgba(59, 191, 173, 0.12); margin-right: 8px; border-radius: 4px; padding: 1px 7px; min-width: 28px; text-align: center; display: inline-flex; }
    /* toogle css */
    .toggle-toc.toc-hidden {max-height: 0; padding-top: 0;}
    .toggle-toc {  overflow: hidden; transition: max-height 0.3s ease; }
    .toc-header svg { transition: transform 0.3s ease; }
    /* content of artical */
    .article .wrapper >:nth-child(3){font-size: 17px; color: var(--c-text); line-height: 1.8; margin-bottom: 36px; padding-bottom: 36px; border-bottom: 1.5px solid var(--c-border);}
    .article .wrapper .wish-sec {display: flex; align-items: center; gap: 14px; margin-bottom: 28px;
scroll-margin-top: 120px !important;
    }
    .article .wrapper >:nth-child(4)>:first-child{    background: linear-gradient(135deg, #fde3ea, #ffc5d3);}
    .wrapper .wish-icon{width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0;}
    .article .wrapper .wish-sec >:nth-child(2){font-family: var(--ff-primary); font-size: clamp(20px, 2.5vw, 26px); font-weight: 700; color: var(--c-charcoal); line-height: 1.25;}
    .wish-sec > :nth-child(2) > * { color: var(--c-gold); }
    .wishing-text {font-size: 15px; color: var(--c-text); margin-bottom: 22px; line-height: 1.7; padding: 14px 18px; background: var(--c-white); border-radius: 10px; border-left: 3px solid var(--c-teal);}
    .article .wrapper .wishes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .article .wrapper .wish-card { border: 1.5px solid var(--c-border); border-radius: 16px; padding: 20px 20px 16px; position: relative; transition: box-shadow 0.25s, transform 0.25s, border-color 0.2s; }
    .listing-card ul {display: grid;}
    .listing-card ul:has(li.even) {grid-template-columns: repeat(2, 1fr);}

/*    .listing-card ul li:nth-child(odd) { grid-column: 1 / -1; background: linear-gradient(135deg, var(--c-charcoal), #3d3330); border-color: transparent;  border: 1.5px solid var(--border); border-radius: 16px; padding: 20px 20px 16px; position: relative; transition: box-shadow 0.25s, transform 0.25s, border-color 0.2s;}
    .listing-card ul li:nth-child(odd):hover , .listing-card ul li:nth-child(even) > div:hover{box-shadow: 0 8px 28px rgba(44, 37, 34, 0.1); transform: translateY(-3px);}
    .listing-card ul li p{font-family: var(--ff-primary); font-style: italic; font-size: 15px; line-height: 1.7; margin-bottom: 16px; padding-right: 32px;}
    .listing-card ul li:nth-child(odd) p{color: var(--c-white);}
    .card-number {position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 600; color: #c4b0a8; background: var(--c-cream); border-radius: 6px; padding: 2px 8px;}
    .listing-card ul li:nth-child(odd) > :last-child{display: flex; align-items: center; justify-content: space-between;}
    .listing-card ul li:nth-child(odd) > :last-child > :last-child{display: flex; align-items: center; gap: 5px; background: none; border: 1.5px solid var(--c-border); border-radius: 999px; padding: 5px 14px; font-size: 12px; font-weight: 600; color: var(--c-text); font-family: var(--ff-secondary); transition: all 0.2s;}
    .listing-card ul li:nth-child(odd) > :last-child > :last-child {border-color: rgba(255, 255, 255, 0.3) !important; color: rgba(255, 255, 255, 0.7) !important;}
    .card-copy {display: flex; align-items: center; gap: 5px; background: none; border: 1.5px solid var(--c-border); border-radius: 999px; padding: 5px 14px; font-size: 12px; font-weight: 600; color: var(--c-text); font-family: var(--ff-secondary); transition: all 0.2s;}
    .wish-tag {font-size: 11px; font-weight: 600; border-radius: 999px; padding: 3px 10px; background: #fde3ea;color: var(--c-rose);}
    .listing-card ul li:nth-child(even) {display: grid; grid-template-columns:repeat(2,1fr); gap: 16px; margin-block: 16px;}
    .listing-card ul li:nth-child(even) > * {background: var(--c-white); border: 1.5px solid var(--c-border); border-radius: 16px; padding: 20px 20px 16px; position: relative; transition: box-shadow 0.25s, transform 0.25s, border-color 0.2s; display: flex; flex-direction: column; justify-content: start;}
    .card-footer{display: flex; align-items: center; justify-content: space-between; margin-top: auto;}
    .listing-card ul li:nth-child(odd) > :nth-of-type(3) { background: var(--c-surface);}
    .article .wrapper .wish-text { font-family: var(--ff-primary); font-style: italic; font-size: 15px; line-height: 1.7; color: var(--c-charcoal); margin-bottom: 16px; padding-right: 32px; }
    */

        .listing-card ul li.odd { grid-column: 1 / -1; background: linear-gradient(135deg, var(--c-charcoal), #3d3330); border-color: transparent;  border: 1.5px solid var(--border); border-radius: 16px; padding: 20px 20px 16px; position: relative; transition: box-shadow 0.25s, transform 0.25s, border-color 0.2s;}
    .listing-card ul li.odd:hover , .listing-card ul li.even > div:hover{box-shadow: 0 8px 28px rgba(44, 37, 34, 0.1); transform: translateY(-3px);}
    .listing-card ul li p{font-family: var(--ff-primary); font-style: italic; font-size: 15px; line-height: 1.7; margin-bottom: 16px; padding-right: 32px;}
    .listing-card ul li.odd p{color: var(--c-white);}
    .card-number {position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 600; color: #c4b0a8; background: var(--c-cream); border-radius: 6px; padding: 2px 8px;}
    .listing-card ul li.odd > :last-child{ align-items: center; justify-content: space-between;}
    .listing-card ul li.odd > :last-child > :last-child{ align-items: center; gap: 5px; background: none; border: 1.5px solid var(--c-border); border-radius: 999px; padding: 5px 14px; font-size: 12px; font-weight: 600; color: var(--c-text); font-family: var(--ff-secondary); transition: all 0.2s;}
    .listing-card ul li.odd > :last-child > :last-child {border-color: rgba(255, 255, 255, 0.3) !important; color: rgba(255, 255, 255, 0.7) !important;width:100%}
    .card-copy {display: flex; align-items: center; gap: 5px; background: none; border: 1.5px solid var(--c-border); border-radius: 999px; padding: 5px 14px; font-size: 12px; font-weight: 600; color: var(--c-text); font-family: var(--ff-secondary); transition: all 0.2s;}
    .wish-tag {font-size: 11px; font-weight: 600; border-radius: 999px; padding: 3px 10px; background: #fde3ea;color: var(--c-rose);}
    .listing-card ul li.even {display: grid; grid-template-columns:repeat(1,1fr); gap: 16px; margin: 8px;}
    .listing-card ul li.even > * {background: var(--c-white); border: 1.5px solid var(--c-border); border-radius: 16px; padding: 20px 20px 16px; position: relative; transition: box-shadow 0.25s, transform 0.25s, border-color 0.2s; display: flex; flex-direction: column; justify-content: start;}
    .card-footer{display: flex; align-items: center; justify-content: space-between; margin-top: auto;}
    .listing-card ul li.odd > :nth-of-type(3) { background: var(--c-surface);}
    .article .wrapper .wish-text { font-family: var(--ff-primary); font-style: italic; font-size: 15px; line-height: 1.7; color: var(--c-charcoal); margin-bottom: 16px; padding-right: 32px; }
     .wishing-text ul li{list-style: unset;}

    .birthday-wishes-card >:first-child{display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-block: 16px;}
    .birthday-wishes-card >:first-child>li{display: flex; flex-direction: column; justify-content: start; background: var(--c-white); border: 1.5px solid var(--c-border); border-radius: 16px; padding: 20px 20px 16px; position: relative; transition: box-shadow 0.25s, transform 0.25s, border-color 0.2s;}
    .birthday-wishes-card >:first-child>*>:nth-child(2){font-family: var(--ff-primary); font-style: italic; font-size: 15px; line-height: 1.7; color: var(--c-charcoal); margin-bottom: 16px; padding-right: 32px;}
    .birthday-wishes-card .wish-tag{background: #dbeafe; color: #1d4ed8;}
    /* social-btn sec */
    .share-sec{background: var(--c-surface); border: 1.5px solid var(--c-border); border-radius: 14px; padding: 20px 24px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 40px 0;}
    .share-sec > :first-child{font-size: 14px; font-weight: 600; color: var(--c-charcoal); white-space: nowrap;}
    .social-btn{display:flex; flex-wrap: wrap; gap: 10px;}
    .social-btn > :first-child{background-color: #1877f2; color: #ffffff; }
    .social-btn > :nth-child(2){background-color: #000000; color: #ffffff;}
    .social-btn > :nth-child(3){background-color: #25d366; color: #ffffff;}
    .social-btn > :nth-child(4){background: var(--c-surface); color: var(--c-charcoal); border: 1.5px solid var(--c-border);}
    .social-btn > *{display: flex; align-items: center; gap: 7px; border-radius: 999px; padding: 7px 28px; font-size: 13px; font-weight: 600; border: none; transition: opacity 0.2s, transform 0.2s;}
     .social-btn > *:hover{opacity: 0.9; transform: translateY(-1px);}
    /* tips-sec */
    .wide-list {background: linear-gradient(135deg, #fef3dc, #fff6e8); border: 1.5px solid #f5d99a; border-radius: 14px; padding: 22px 24px; margin: 32px 0;}
    .wide-list > :first-child{font-family: var(--ff-primary); font-size: 16px; font-weight: 700; color: var(--c-charcoal); margin-bottom: 12px; display: flex; align-items: center; gap: 8px;} 
    .wide-list > :nth-child(2){display: flex; flex-direction: column; gap: 8px; padding-left: 0px;}
    .wide-list > :nth-child(2) > li::before{content: '✦'; color: var(--c-gold); flex-shrink: 0; font-size: 11px; margin-top: 4px;}
    .wide-list > :nth-child(2) > li{font-size: 14px; color: var(--c-charcoal); display: flex; gap: 8px; align-items: flex-start;}
    .Pinterest{background-color: #e60023 !important;}
    .whatsapp{background-color: #25d366 !important;}
    /* author sec */
    .author{background: var(--c-white); border: 1.5px solid var(--c-border); border-radius: 20px; padding: 32px; display: flex; gap: 24px; align-items: flex-start; margin-top: 56px;}
    .author > :first-child{width: 80px; height: 80px; flex-shrink: 0; border-radius: 50%; background: var(--c-gradient-rose); display: flex; align-items: center; justify-content: center; font-size: 34px; border: 3px solid var(--c-border);}
    .author-des{flex: 1;}
    .author-des >:first-child{font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--c-teal); margin-bottom: 4px; display: block;}
    .author-des >:nth-child(2){font-family: var(--ff-primary); font-size: 22px; font-weight: 700; color: var(--c-charcoal); margin-bottom: 6px;}
    .author-des >:nth-child(3){font-size: 13px; color: var(--c-gold); font-weight: 600; margin-bottom: 12px;}
    .author-des >:nth-child(4){font-size: 14px; color: var(--c-text); line-height: 1.7; margin-bottom: 16px;}
    .author-meta {display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--c-text);}
    .author-meta >:first-child{display: flex; gap: 5px; align-items: center;}
    .author-socials{display: flex; gap: 8px; margin-top: 14px;}
    .author-socials > * {display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid var(--c-border); color: var(--c-text); background: var(--c-cream); transition: all 0.2s;}
    /* related-blog-sec */
    .related-blogs {padding-top: 60px;}
    .related-header {display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px;}
    .related-header > :first-child > :first-child{font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--c-teal); display: block; margin-bottom: 6px;}
    .related-header > :first-child > :nth-child(2){font-family: var(--ff-primary); font-size: 28px; font-weight: 700; color: var(--c-charcoal);}
    .related-header > :nth-child(2) {font-size: var(--fs-sm); font-weight: 600; color: var(--c-gold); white-space: nowrap; display: flex; align-items: center; gap: 4px; transition: gap 0.2s;}
    .related-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;}
    .arical-sec{background: var(--c-white); border: 1.5px solid var(--c-border); border-radius: 16px; overflow: hidden; transition: transform 0.25s, box-shadow 0.25s;}
    .arical-sec:hover{transform: translateY(-5px); box-shadow: 0 12px 32px rgba(44, 37, 34, 0.1);}
    .related-grid .artical-banner {height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;}
    .related-grid > .arical-sec:nth-child(3n+1) > :first-child { background: linear-gradient(135deg, #3BBFAD, #2d7dd2);}
    .related-grid > .arical-sec:nth-child(3n+2) > :first-child { background: linear-gradient(135deg, #E8972A, #f5c07a)}
    .related-grid > .arical-sec:nth-child(3n+3) > :first-child { background: linear-gradient(135deg, #F25C7A, #a855f7)}
    .artical-emoji{font-size: 36px;}
    .wishes{ background: rgba(255, 255, 255, 0.22); color: var(--c-white); border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 600;}
    .artical-body{padding: 16px 18px 18px;}
    .artical-body > :first-child{font-size: 11px; font-weight: 600; background: #fde3ea; color: var(--c-rose); border-radius: 999px; padding: 3px 10px; margin-bottom: 8px; display: inline-block;}
    .artical-body > :nth-child(2){ font-family: var(--ff-primary); font-size: var(--fs-base); font-weight: 700; color: var(--c-charcoal); line-height: 1.35; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
    .related-body > :nth-child(3){display: flex; justify-content: space-between; align-items: center; font-size: 13px;}
    .related-body > :nth-child(3) > :first-child {color: #9e8c84;}
    .related-body > :nth-child(3) > :last-child {color: var(--c-gold); font-weight: 600; display: flex; gap: 3px; align-items: center;}
    .artical-body > :nth-child(3) {display: flex; justify-content: space-between; align-items: center; font-size: 13px;}
    .artical-body > :nth-child(3) > :first-child{color: #9e8c84;}
    .artical-body > :nth-child(3) > :last-child{color: var(--c-gold); font-weight: 600; display: flex; gap: 3px; align-items: center;}
    /* section-devider */
    .article .section-divider{display: flex; align-items: center; gap: 12px; margin: 48px 0 40px;}
    .article .section-divider >:first-child{    font-size: var(--fs-base); color: var(--c-gold); letter-spacing: 6px;}
    .article .section-divider::before{content: ''; flex: 1; height: 1px; background: var(--c-border);}
    .article .section-divider::after{content: ''; flex: 1; height: 1px; background: var(--c-border);}
    /* r-sidebar */
    .r-sidebar{position: sticky; top: 100px; display: flex; flex-direction: column; gap: 24px;}
    .r-sidebar > *{background: var(--c-white); border: 1.5px solid var(--c-border); border-radius: 16px;height: fit-content;  overflow: hidden;}
    .r-sidebar > *:not(:nth-child(3)) > :first-child {padding: 16px 20px; border-bottom: 1px solid var(--c-border); font-family: var(--ff-primary); font-size: var(--fs-base); font-weight: 700; color: var(--c-charcoal); display: flex; align-items: center; gap: 8px;}
    .r-sidebar > :first-child > :nth-child(2){display: flex; flex-direction: column; gap: 12px; padding: 16px 20px;}
    .r-sidebar > :first-child > :nth-child(2) > *{display: flex; justify-content: space-between; align-items: center; font-size: 13px;}
    .r-sidebar > :first-child > :nth-child(2) > * > :nth-child(2){font-weight: 600; color: var(--c-charcoal);}
    .r-sidebar > :first-child > :nth-child(2) > :nth-child(5){padding-top:4px; font-size: 12px;}
    .r-sidebar > :first-child > :nth-child(2) > :nth-child(5) > :last-child{color: var(--c-gold); font-weight: 600;}
    .r-sidebar > :first-child > :nth-child(2) > :nth-child(6) {background: var(--c-surface);}
    .r-sidebar > :first-child > :nth-child(2) > :nth-child(6) > :first-child{width: 96%; padding-block: 2.5px;  border-radius: 999px; background: var(--c-gradient-gold);}
    .r-sidebar > :nth-child(2) > :nth-child(2){display: flex; flex-direction: column; gap: 6px; counter-reset: toc-counter; padding: 10px 12px;}
    .r-sidebar > :nth-child(2) > :nth-child(2) > *:hover {background: var(--c-surface);}
    .r-sidebar > :nth-child(2) > :nth-child(2) > * > *:hover {color: var(--c-gold);}
    .r-sidebar > :nth-child(2) > :nth-child(2) li a {display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--c-charcoal); transition: background 0.2s, color 0.2s;}
    .r-sidebar > :nth-child(2) > :nth-child(2) li a::before {counter-increment: toc-counter; content: counter(toc-counter, decimal-leading-zero); color: var(--c-teal); padding: 1px 7px; text-align: center; min-width: 22px; height: 22px; background: var(--c-surface); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;}
    .r-sidebar > :nth-child(3) > :first-child{background: var(--c-gradient-rose); margin: -16px -20px 16px; padding: 20px; text-align: center;}
    .r-sidebar > :nth-child(3) > :first-child > :first-child{font-size: 36px;}
    .r-sidebar > :nth-child(3) > :first-child > :nth-child(2){font-family: var(--ff-primary); font-size: 17px; font-weight: 700; color: var(--c-white); margin-top: 8px; margin-bottom: 4px;}
    .r-sidebar > :nth-child(3) > :first-child > :nth-child(3){font-size: 13px; color: rgba(255, 255, 255, 0.8);}
    .r-sidebar > :nth-child(3) > :nth-child(2){padding: 16px 20px 20px;}
    .r-sidebar > :nth-child(3) > :nth-child(2) > :first-child > :first-child {width: 100%; padding: 11px 14px; border: 1.5px solid var(--c-border); border-radius: 10px; font-size: var(--fs-sm); font-family: var(--ff-secondary); background: var(--c-cream); color: var(--c-charcoal); outline: none; margin-bottom: 10px; transition: border-color 0.2s;}
    .r-sidebar > :nth-child(3) > :nth-child(2) > :first-child > :first-child:focus{border-color: var(--c-gold);}
    .r-sidebar > :nth-child(3) > :nth-child(2) > :first-child > :nth-child(2) {width: 100%; padding: 12px; background: var(--c-gradient-gold); color: var(--c-white); border: none; border-radius: 10px; font-size: var(--fs-sm); font-weight: 600; transition: opacity 0.2s, transform 0.2s;}
    .r-sidebar > :nth-child(3) > :nth-child(2) > :first-child > :nth-child(2):hover{opacity: 0.9; transform: translateY(-1px);}
    .r-sidebar > :nth-child(3) > :nth-child(2) > :first-child > :nth-child(3) {font-size: 12px; text-align: center; color: var(--c-text); margin-top: 10px;}
    .r-sidebar > :nth-child(4) > :nth-child(2){padding: 16px 20px; display: flex; flex-direction: column; gap: 8px;}
    .r-sidebar > :nth-child(4) > :nth-child(2) > * {font-size: 13px; padding: 8px 10px; border-radius: 8px; background: var(--c-cream); transition: background 0.2s;}
    .r-sidebar > :nth-child(4) > :nth-child(2) > *:hover{background: var(--c-surface);}
    .r-sidebar > :nth-child(4) > :nth-child(2) > * > :last-child {color: var(--c-teal); font-weight: 600; font-size: 12px; display: flex; justify-content: space-between;}
    .listing-card ul li:nth-child(odd) > :last-child > :last-child:hover ,.card-copy:hover ,.author-socials > *:hover {border-color: var(--c-gold) !important; color: var(--c-gold) !important; background: rgba(232, 151, 42, 0.15);}
    .listing-card ul {padding-left: 0;}
     @keyframes floating {
        0%{
            transform: translateY(0) rotate(0deg);
        }
    50%{
        transform:translateY(-18px) rotate(8deg);
    }
    }
    @media only screen and (max-width: 992px) {
        /* hero css */
        .hero .container .wrapper {flex-wrap: wrap; justify-content: center;}
        .hero .container .wrapper .left > :nth-child(2) {padding-right: 0;}
        /* toc */
        .toc {margin-bottom: 15px;}
        /* article */
        .article {grid-template-columns: 1fr; padding: 20px 20px 20px; gap: 20px;}
        .article .wrapper >:nth-child(3){margin-bottom: 20px; padding-bottom: 20px;}
        .article .section-divider {margin:0;}
        .article .wrapper .wish-sec {margin-bottom: 15px;}
        /* r-sidebar */
        .r-sidebar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;}
        /* related */
        .related-blogs {padding-top: 15px;}
        .related-header {margin-bottom: 5px;}
        /* birthday wishes */
        .birthday-wishes-card >:first-child{padding-left: 0;}
        /* whishing text */
        .wishing-text {margin-bottom: 15px;}
        /* wide */
        .wide-list {margin:15px 0;}
        /* share sec */
        .share-sec {margin: 15px 0;}
        /* author */
        .author {margin-top: 15px; padding: 15px}

    }
@media only screen and (max-width:768px){
    .related-grid {grid-template-columns: repeat(2, 1fr);}
}
/* mobile */
@media only screen and (max-width:576px){
    /* hero */
    .hero .container .wrapper {padding-top: 20px; padding-bottom: 20px;}
    .hero .container .wrapper .left .hero-btn > :first-child{ flex-wrap:wrap;}
    .listing-card ul li:nth-child(even){grid-template-columns: repeat(1,1fr);}
    .article .wrapper >:nth-child(3) {font-size: 14px;}
    .social-btn {justify-content: center;}
    .author {padding:10px; flex-direction: column;}
    .related-blogs{padding-block: 15px;}
    .related-header {align-items: start; flex-direction: column; margin-bottom: 0px;}
    .r-sidebar {grid-template-columns: repeat(1, 1fr);}
    /* artical */
    .article .section-divider {margin: 15px 0 15px;}
    /* wide-list */
    .wide-list {margin: 20px 0;}
    /* birthday-wishies */
    .birthday-wishes-card >:first-child {grid-template-columns: repeat(1, 1fr);}
    /* share-sec */
    .share-sec {margin: 0;}
    /* author */
    .author {margin-top: 20px;}g
    /* rsidebar */
    .r-sidebar {margin-top: 20px;}
    /* toc */
    .toc {padding: 15px 15px;}
}
@media only screen and (max-width:425px){
    .share-sec {padding: 15px 10px;}
    .share-sec > :first-child {white-space: normal;}
    .related-grid {grid-template-columns: repeat(1, 1fr);}
}