.post-navigation-cta {
  border-radius: 29px;
  border: 1px solid #ebe8e5;
  position: relative;
  display: inline-flex;
  overflow: hidden;
  background-color: #ffffff;
}
.post-navigation-cta.next-arrow {
  padding: 5px 6px 5px 30px;
}
.post-navigation-cta.prev-arrow {
  padding: 5px 30px 5px 6px;
}
.post-navigation-cta .cta-text-container {
  display: flex;
  align-items: center;
  gap: 20px;
}
.post-navigation-cta .cta-text {
  color: #1d1e1c;
  text-align: center;
  font-weight: 400;
  line-height: normal;
  transition: color 0.3s;
  transition-timing-function: ease-in-out;
  -webkit-transition: color 0.3s;
  -webkit-transition-timing-function: ease-in-out;
  z-index: 2;
}
.post-navigation-cta .cta-icon {
  width: 40px;
  height: 40px;
  display: flex;
}
.post-navigation-cta .cta-icon:before {
  content: "";
  width: 40px;
  height: 40px;
  position: absolute;
  background-color: #ebe8e5;
  z-index: 1;
  transition: transform 0.05s ease-in-out, width 0.25s ease-in-out 0.05s; /* Delay width transition on hover out */
  transform: scale(1);
  -webkit-transition: transform 0.05s ease-in-out, width 0.25s ease-in-out 0.05s; /* Delay width transition on hover out */
  -webkit-transform: scale(1);
  border-radius: 27.5px;
}
.post-navigation-cta.next-arrow .cta-icon:before {
  right: 6px;
}
.post-navigation-cta.prev-arrow .cta-icon:before {
  left: 6px;
}
.post-navigation-cta .cta-icon svg {
  z-index: 2;
  position: absolute;
  width: 40px;
  height: 40px;
  transition: 0.3s;
  transition-timing-function: ease-in-out;
}
.post-navigation-cta.next-arrow .cta-icon-state {
  transform: translateX(-30px);
  opacity: 0;
}
.post-navigation-cta.prev-arrow .cta-icon-state {
  transform: translateX(30px);
  opacity: 0;
}
.post-navigation-cta .cta-icon-initial {
  transform: translateX(0px);
  opacity: 1;
}
.post-navigation-cta:hover .cta-icon-state {
  transform: translateX(0px);
  opacity: 1;
}
.post-navigation-cta.next-arrow:hover .cta-icon-initial {
  transform: translateX(30px);
  opacity: 0;
}
.post-navigation-cta.prev-arrow:hover .cta-icon-initial {
  transform: translateX(-30px);
  opacity: 0;
}
.post-navigation-cta:hover .cta-text {
  color: #1d1e1c;
}
.post-navigation-cta:hover .cta-icon:before {
  width: calc(100% - 12px); /* Expand width on hover */
  transform: scale(1.5); /* Scale up after width transition */
  transition: width 0.25s ease-in-out, transform 0.05s ease-in-out 0.05s;
}

.post-navigation-cta .cta-text {
  font-family: "Anth", Sans-serif;
  font-size: 18px;
}
.post-navigation-cta .cta-icon > span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 2;
  position: absolute;
  width: 40px;
  height: 40px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  -webkit-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}

.elementor-post-navigation__link__prev {
  display: block;
}
.elementor-post-navigation__link__next {
  display: block;
}
/* NEXT */
.post-navigation-cta.next-arrow span.cta-icon-state:after {
  content: "";
  display: block;
  width: 13px;
  height: 10px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12.4 9.6'%3E%3Cpath d='M12.2,5.2a.7.7,0,0,0,0-.9L8,.2a.6.6,0,0,0-.9,0,.6.6,0,0,0,0,.9l3.7,3.7L7.1,8.5a.6.6,0,0,0,0,.9.7.7,0,0,0,.9,0ZM0,5.4H11.7V4.1H0Z' fill='%23fff'/%3E%3C/svg%3E%0A");
}
.post-navigation-cta.next-arrow span.cta-icon-initial:after {
  content: "";
  display: block;
  width: 13px;
  height: 10px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12.4 9.6'%3E%3Cpath d='M12.2,5.2a.7.7,0,0,0,0-.9L8,.2a.6.6,0,0,0-.9,0,.6.6,0,0,0,0,.9l3.7,3.7L7.1,8.5a.6.6,0,0,0,0,.9.7.7,0,0,0,.9,0ZM0,5.4H11.7V4.1H0Z' fill='%23fff'/%3E%3C/svg%3E%0A");
}

/* PREV */
.post-navigation-cta.prev-arrow span.cta-icon-state:after {
  content: "";
  display: block;
  width: 13px;
  height: 10px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41' height='32' viewBox='0 0 41 32' fill='none'%3E%3Cpath d='M1.39354 14.3002C0.583663 15.11 0.583663 16.4382 1.39354 17.2481L14.8052 30.6597C15.615 31.502 16.9433 31.502 17.7855 30.6597C18.5954 29.8499 18.5954 28.5217 17.7855 27.6794L5.86408 15.7579L17.7855 3.86889C18.5954 3.05901 18.5954 1.69841 17.7855 0.888531C16.9432 0.0786508 15.615 0.0786509 14.8052 0.888532L1.39354 14.3002ZM40.7861 13.6522L21.8349 13.6522L2.88372 13.6522L2.88372 17.8636L21.8349 17.8636L40.7861 17.8636L40.7861 13.6522Z' fill='%23fff'/%3E%3C/svg%3E");
}
.post-navigation-cta.prev-arrow span.cta-icon-initial:after {
  content: "";
  display: block;
  width: 13px;
  height: 10px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41' height='32' viewBox='0 0 41 32' fill='none'%3E%3Cpath d='M1.39354 14.3002C0.583663 15.11 0.583663 16.4382 1.39354 17.2481L14.8052 30.6597C15.615 31.502 16.9433 31.502 17.7855 30.6597C18.5954 29.8499 18.5954 28.5217 17.7855 27.6794L5.86408 15.7579L17.7855 3.86889C18.5954 3.05901 18.5954 1.69841 17.7855 0.888531C16.9432 0.0786508 15.615 0.0786509 14.8052 0.888532L1.39354 14.3002ZM40.7861 13.6522L21.8349 13.6522L2.88372 13.6522L2.88372 17.8636L21.8349 17.8636L40.7861 17.8636L40.7861 13.6522Z' fill='%23fff'/%3E%3C/svg%3E");
}

.post-navigation-cta.next-arrow .cta-icon svg.cta-icon-state {
  transform: translate(0px, -17px) rotate(90deg);
}
.post-navigation-cta.prev-arrow:hover .cta-icon svg.cta-icon-state {
  transform: translate(0px, 0px) rotate(90deg);
}

.post-navigation-cta.next-arrow .cta-icon svg.cta-icon-initial {
  transform: translate(0px, 0px) rotate(90deg);
}
.post-navigation-cta.prev-arrow:hover .cta-icon svg.cta-icon-initial {
  transform: translate(0px, 17px) rotate(90deg);
}

@media (max-width: 767px) {
  .post-navigation-cta .cta-text {
    font-family: "Anth", Sans-serif;
    font-size: 16px;
  }
  .post-navigation-cta .cta-text-container {
    gap: 10px;
  }
  .post-navigation-cta.prev-arrow {
    padding: 5px 20px 5px 6px;
  }
  .post-navigation-cta.next-arrow {
    padding: 5px 6px 5px 20px;
  }
}