.icon {
      display: inline-block;
      width: 30px;
      height: 30px;
      color: #ffffff;
      border-radius: 50%;
      position: relative;
      cursor: pointer;
    }

    .icon.back::before,
    .icon.forward::before {
      content: "";
      position: absolute;
      width: 10px;
      height: 10px;
      border-top: 2px solid rgb(255, 255, 255);
      border-right: 2px solid rgb(255, 255, 255);
      top: 50%;
      transform: translateY(-50%);
    }

    .icon.back::before {
      left: 8px;
      transform: translateY(-50%) rotate(-135deg);
    }

    .icon.forward::before {
      right: 8px;
      transform: translateY(-50%) rotate(45deg);
    }
  

       /* Smooth scroll behavior */
       html:has(body.tp-blog-detail-page) {
           scroll-behavior: smooth;
       }
       
       /* Add offset for fixed headers */
       .tp-blog-detail-page h2[id] {
           scroll-margin-top: 100px;
       }