.navigation {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin:0 auto;
    padding-top:1.5%;
  }
  
    /* Desktop layout */
    @media screen and (min-width: 768px) {
      .navigation {
        flex-direction: row;
      }
    
      .left-column {
        flex: 3;
      }
    
      .main-content {
        flex: 10;
        margin-left: 2rem;
        margin-right: 3rem;
      }
  
      .right-column {
          flex:7;
      }
    }
  

/* Mobile layout */
@media screen and (max-width: 767px) {
  .navigation {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin:0 auto;
    padding-top:1.5%;
  }

  .main-content {
    flex: 10;
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .right-column {
    margin-left: 2rem;
}

}




.navigation a[href^=".."],
.navigation a[href^="/"] {
    /* Add any specific styles for internal links here */
    color: #0982D9; /* Dark blue */
    font-weight: bold;
    text-decoration: underline;
}

/* Styling for visited links (optional) */
.navigation a[href^=".."]:visited,
.navigation a[href^="/"]:visited {
    color: #000000; /* black - a darker shade for visited links */
}


/* Specific styling for hover state for internal links (if needed) */
.navigation a[href^=".."]:hover,
.navigation a[href^="/"]:hover {
    /* Add any specific styles here */
    color: #0000CD; /* Medium blue - slightly lighter for hover effect */

}

/* Specific styling for external links (if needed) */

    /* Add any specific styles for external links here */