.dd-item {
    padding: 12px 16px 12px 34px;
    color: #111;
    font-weight: 400;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, border-radius 150ms ease, font-weight 150ms ease;
  }

  .dd-item.is-hover {
    background: #909090;
    color: #fff;
    font-weight: 700;
    border-radius: 11px;
  }
  .hidden {
    display: none;
  }

  .internal-gradient {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 60%,
    rgba(0, 0, 0, 1) 100%
  );
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.internal-page header,
.internal-page header a {
  text-shadow: none !important;
  color: white !important;
  
}

.internal-page #main-nav .nav-item {
  color: #FFFFFF !important; 
  font-weight: 400 !important;
  position: relative; 
  padding-bottom: 2px;
}

.internal-page #main-nav .nav-item.is-active {
  color: #FFFFFF !important; 
  font-weight: 900 !important;
}

.internal-page #main-nav .nav-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0); 
  transform-origin: left;
  transition: transform 0.25s ease;
}

.internal-page #main-nav .nav-item.is-active::after {
  transform: scaleX(1);
}



.btn-tag{
  padding: 10px 24px;
  background-color: #5AC8B4;
  color: black;
  font-size: 20px;
  font-weight: 500; /* = font-medium */
  line-height: 1.2;   /* = leading-none */
  border-radius: 8px; /* = rounded-lg */
}

@media (max-width: 768px) {
  .btn-tag{
  padding: 10px 24px;
  background-color: #5AC8B4;
  color: black;
  font-size: 15px;
  font-weight: 500; /* = font-medium */
  line-height: 1;   /* = leading-none */
  border-radius: 8px; /* = rounded-lg */
}
}

/* Mobile: justify paragraphs on internal pages */
@media (max-width: 1023px) {
  .internal-page #body1,
  .internal-page #body2,
  .internal-page #body4,
  .internal-page #body1 p,
  .internal-page #body2 p,
  .internal-page #body4 p {
    text-align: justify !important;
    -webkit-text-align-last: left;
    text-align-last: left;
  }
}

@media (max-width: 480px) {
  .internal-page #body1,
  .internal-page #body2,
  .internal-page #body4,
  .internal-page #body1 p,
  .internal-page #body2 p,
  .internal-page #body4 p {
    text-align: justify !important;
    -webkit-text-align-last: left;
    text-align-last: left;
  }
}

/* Paragraph spacing for body4 to match body2 */
#body4 p,
#body4 > p,
[id="body4"] p,
[id="body4"] > p {
  margin-bottom: 1.25em !important;
  margin-top: 0 !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

#body4 p:last-child,
#body4 > p:last-child,
[id="body4"] p:last-child,
[id="body4"] > p:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#body4 p:first-child,
#body4 > p:first-child,
[id="body4"] p:first-child,
[id="body4"] > p:first-child {
  padding-top: 0 !important;
}

/* H2 styling in body4 - match body1 H2 styling */
#body4 h2,
#body4 > h2,
[id="body4"] h2,
[id="body4"] > h2 {
  font-size: 4rem !important; /* Match .rl-group h2 */
  font-weight: 700 !important; /* Match .rl-group h2 */
  line-height: 75% !important; /* leading-[75%] */
  margin-top: 1em !important;
  margin-bottom: 0.5em !important;
  text-align: left !important;

  margin-left: -1.75rem !important; /* Counteract px-7 (28px) on mobile */

  text-transform: uppercase;
}

/* H3 styling in body4 - similar to H2 but smaller, aligned to browser edge like H1 */
#body4 h3,
#body4 > h3,
[id="body4"] h3,
[id="body4"] > h3 {
  font-size: 2.5rem !important; /* 40px - smaller than H2's 57px */
  font-weight: 900 !important; /* font-black */
  line-height: 75% !important; /* leading-[75%] */
  letter-spacing: -0.025em !important; /* tracking-tight */
  color: white !important;
  text-transform: uppercase !important;
  text-align: left !important;
  max-width: 1227px !important;
  margin-left: -1.75rem !important; /* Counteract px-7 (28px) on mobile */
  margin-top: 1.5em !important;
  margin-bottom: 0.5em !important;
}

@media (min-width: 1024px) {
  #body4 h3,
  #body4 > h3,
  [id="body4"] h3,
  [id="body4"] > h3 {
    font-size: 4rem !important; /* 64px - smaller than H2's 100px */
    margin-left: -215px !important; /* Counteract lg:pl-[122px] + lg:ml-[93px] = 215px to align with browser edge */
  }
}