.resources-internal-links {
    list-style: none; /* Remove default bullets */
    padding-left: 0; /* Remove left padding */
    position: relative; /* Set relative positioning for the line */
    margin-top: 50px;
  }
  
  .resources-internal-links li {
    position: relative; /* For positioning the line */
    padding-left: 40px; /* Space for the circle icon */
    margin-bottom: 20px; /* Space between list items */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
  }
  
  .resources-internal-links li::before {
    content: '\f02e'; /* Unicode for the Font Awesome bookmark icon */
    font-family: 'Font Awesome 6 Free'; /* Font Awesome 6 Free font */
    font-weight: 400; /* Regular weight for the icon */
    position: absolute; /* Positioning relative to the li */
    left: 0; /* Align to the left of the li */
    top: 50%; /* Vertically center the icon */
    transform: translateY(-50%); /* Adjust to perfect center */
    width: 30px; /* Width of the circle */
    height: 30px; /* Height of the circle */
    line-height: 30px; /* Vertically center the icon */
    text-align: center;
    background-color: #90c2e7; /* Blue background */
    color: white; /* White icon */
    border-radius: 50%; /* Make it a circle */
    font-size: 16px; /* Size of the icon */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    cursor: pointer;
  }
  
  .resources-internal-links li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 15px; /* Adjust this to position the line correctly */
    top: 50%;
    width: 1px; /* Line thickness */
    height: 100%; /* Full height of the list */
    background-color: #90c2e7; /* Color of the line */
    transform: translateY(50%); /* Center line vertically */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
  }
  
  /* Style for the links */
  .resources-internal-links li a {
    text-decoration: none; /* Remove underline from links */
    color: #333; /* Default link color */
    transition: color 0.3s ease; /* Smooth transition for color change */
  }
  
  /* Hover effect for links */
  .resources-internal-links li a:hover {
    font-weight: 600;
    color: #88a0a8; /* Change color on hover */
  }
  
  /* Hover effect */
  .resources-internal-links li:hover::before,
  .resources-internal-links li.active::before {
    background-color: #88a0a8; /* Darken the background of the circle */
  }
  
  .resources-internal-links li:hover::after,
  .resources-internal-links li.active::after {
    background-color: #88a0a8; /* Darken the connecting line */
  }
  
  /* Active link style */
  .resources-internal-links li.active a {
    font-weight: 600; /* Makes the active link bold */
    color: #88a0a8; /* Changes the color of the active link */
  }
  
  html {
    scroll-behavior: smooth;
  }