.dropdown-menu {
    min-width: 80px;
}
.dropdown-menu-end[data-bs-popper] {
    right: auto;
}

/* Article */

.article {
    padding: 20px;
  }
    @media only screen and (max-width: 600px) {
  .article {
    padding: 0;
  }
}

.active a {
  text-decoration: underline;
  text-decoration-color: #DF6951;
  text-decoration-thickness: 4px; 
}

.translate-right {
   width:70px;text-align:right;
}
  @media only screen and (max-width: 600px) {
  .translate-right {
    width:100%;
  }
}

/* 5 Stars */

:root {
  --star-size: 30px;
  --star-color: #ddd;
  --star-background: #fc0;
}

.Stars {
  --percent: calc(var(--rating) / 5 * 100%);
  
  display: inline-block;
  font-size: var(--star-size);
  font-family: Times; // make sure ★ appears correctly
  line-height: 1;
  float:left;
  
  &::before {
    content: '★★★★★';
    letter-spacing: 3px;
    background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* Title */

.title-underline {
    font-size: 2rem;
    font-weight: bold;
    text-align: center; /* Center the text */
    padding-bottom: 20px; /* Space for the underline */
    position: relative; /* Required for the ::after positioning */
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.title-underline::after {
    content: "";
    position: absolute;
    left: 50%; /* Start from the center of the parent */
    bottom: 0; /* Position at the bottom of the text */
    transform: translateX(-50%); /* Adjust for exact horizontal centering */
    width: 60%; /* Set the underline width as a percentage of the text container */
    height: 15px; /* Adjust to match your design */
    background-image: url('/assets/img/hero/shape.svg'); /* Replace with your underline image path */
    background-repeat: no-repeat;
    background-size: contain; /* Scale the image proportionally */
    background-position: center; /* Ensure the image stays centered */
    z-index: -1; /* Keep it behind the text */
}

@media only screen and (min-width: 600px) {
.align-right-desktop {
  text-align:right;
  }
}

.underline {
    font-weight: bold;
    text-decoration: underline;
    text-decoration-color: #DF6951;
    text-underline-position: under;
    padding-bottom: 3px;
}

.new-row {
  margin-right: 30px;
  display: inline-block; /* This ensures links stay in a row on larger screens */
}

/* Mobile-specific styles */
@media (max-width: 768px) {
  .new-row {
    display: block; /* Stack links in separate rows on smaller screens */
    margin-right: 0; /* Remove right margin to avoid excessive space between stacked items */
    margin-bottom: 10px; /* Optional: add some space between links */
  }
  .fs-7 {
  font-size: 1.5807rem !important;
}
}