/* horizontal*/

    .horizontal-list {
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      padding: 0;
    }
    .horizontal-list li {
      margin: 10px;
      padding-bottom: 5px;
      flex: 1 0 100%; /* Take full width on small screens */
      border-bottom: 2px solid #007bff; /* Blue underline */
	  background-color:#fff;
	  padding:10px;
    }
    .horizontal-list a {
      text-decoration: none;
      color: #007bff; /* Link color */
      display: block;
      text-align: left;
    }
    .horizontal-list a:hover {
      color: #0056b3; /* Darker blue on hover */
    }
    @media (min-width: 576px) {
      .horizontal-list li {
        flex: 1 0 48%; /* Take about half the width on medium screens */
        margin-right: 1%;
      }
    }
    @media (min-width: 768px) {
      .horizontal-list li {
        flex: 1 0 21%; /* Take about a quarter of the width on larger screens */
      }
    }

/* vertical-list */    

.vertical-list {
      list-style: none;
      padding: 0;
    }
    .vertical-list li {
      margin: 10px 0;
      padding-bottom: 5px;
      border-bottom: 2px solid #007bff; /* Blue underline */
    }
    .vertical-list a {
      text-decoration: none;
      color: #007bff; /* Link color */
      display: block;
      text-align: left;
    }
    .vertical-list a:hover {
      color: #0056b3; /* Darker blue on hover */
    }
    @media (min-width: 768px) {
      .vertical-list li {
        margin: 5px 0; /* Adjust margin for larger screens */
      }
    }
	
/* horizontal-list-box */

    .horizontal-list-box {
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .horizontal-list-box li {
      margin: 10px;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
      background-color: #f8f9fa;
      width: 100%; /* Full width on small screens */
    }
    .horizontal-list-box a {
      text-decoration: none;
      color: #007bff; /* Link color */
      display: block;
      text-align: center;
    }
    .horizontal-list-box a:hover {
      color: #0056b3; /* Darker blue on hover */
    }
    @media (min-width: 576px) {
      .horizontal-list-box li {
        flex: 1 0 48%; /* Take about half the width on medium screens */
        margin-right: 1%;
        width: auto; /* Reset width for larger screens */
      }
    }
    @media (min-width: 768px) {
      .horizontal-list-box li {
        flex: 1 0 21%; /* Take about a quarter of the width on larger screens */
      }
    }