.featured-header-block {
  width: 100%;
  background-color: #f9efe0;
  padding: 88px 20px 58px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}


.featured-header-block--effect::after {
  content: '';
  width: 100%;
  height: 30px;
  background-color: #f9efe0;
  position: absolute;
  bottom: -30px;
}

.featured-header-block__content {
  max-width: 876px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

.featured-header-block__content > * {
  flex: 1;
}

.featured-header__left,
.featured-header__right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.featured-header__left {
  text-align: center;
}

.fh-sub-title {
  color: #e3af64;
  font-family: var(--mono-font);
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 153.846% */
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.fh-title {
  color: #0f1a3a;
  font-family: var(--secondary-font);
  font-size: 39px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 54.6px */
}

.fh-description {
  text-align: center;
  overflow: hidden;
  color: #0f1a3a;
  text-overflow: ellipsis;
  font-family: var(--primary-font);
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 160%;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

.fh-read-more {
  margin: 0 auto;
  display: flex;
  gap: 8px;
  align-items: center;
  transition: all 0.3s ease;
}

.fh-read-more span {
  color: #0f1a3a;
  font-family: var(--primary-font);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  transition: all 0.3s ease;
}
.fh-read-more svg {
  transition: all 0.3s ease;
}

.fh-read-more svg path {
  transition: all 0.3s ease;
}

.fh-read-more:hover span {
  color: #1a365d;
  text-decoration-thickness: 1px;
  text-decoration-color: #e3af64;
}

.fh-read-more svg {
  transform-origin: center;
  transition: transform 0.3s ease;
}

.fh-read-more svg path {
  transition: all 0.3s ease;
}

.fh-read-more:hover {
  cursor: pointer;
}

.fh-read-more:hover span {
  color: #1a365d;
  text-decoration-thickness: 1px;
  text-decoration-color: #e3af64;
}

.fh-read-more:hover svg path {
  fill: #e3af64;
}

/* Updated hover animations that preserve rotation */
.fh-read-more:not(.expanded):hover svg {
  animation: icon-bounce-normal 0.6s ease;
}

.fh-read-more.expanded:hover svg {
  animation: icon-bounce-rotated 0.6s ease;
}
/* Add these styles to your existing CSS */

.fh-description.expanded {
  -webkit-line-clamp: unset !important;
  display: block !important;
}

.fh-read-more {
  /* Hide by default, will be shown by JavaScript if needed */
  display: none;
}

.fh-read-more.visible {
  display: flex;
}

/* Smooth rotation for the arrow */
.fh-read-more svg {
  transform-origin: center;
  transition: transform 0.3s ease;
}

/* Optional: Add a smooth height transition for better UX */
.fh-description {
  transition: all 0.3s ease;
}

@keyframes icon-bounce-normal {
  0%,
  100% {
    transform: rotate(0deg) translateY(0);
  }
  50% {
    transform: rotate(0deg) translateY(-3px);
  }
}

/* Rotated bounce animation (180 degrees) */
@keyframes icon-bounce-rotated {
  0%,
  100% {
    transform: rotate(180deg) translateY(0);
  }
  50% {
    transform: rotate(180deg) translateY(3px);
  }
}

.fh-read-more:hover {
  cursor: pointer;
}

@media (min-width: 1024px) {
  .featured-header-block--effect::after {
    display: none;
  }

  .featured-header-block {
    padding: 88px 20px;
    height: 460px;
    margin-bottom: 64px;
  }

  .featured-header-block__content {
    flex-direction: row;
  }
  .featured-header__left {
    text-align: left !important;
  }
  .fh-description {
    text-align: left;
    -webkit-line-clamp: 6;
  }
  .fh-read-more {
    margin: unset;
  }
}

.featured-header-breadcrumbs {
  color: #a4a39a;
  font-family: var(--primary-font);
  font-size: 13px;
  font-style: normal;
  font-weight: 300;
  line-height: 20px;
}