.breadcrumb {
    position: sticky; /* Make it sticky */
    top: 0;          /* Stick to the top of the page */
    background-color: #f8f9fa; /* Match the background for better visibility */
    z-index: 1000;   /* Ensure it stays above other elements */
    padding: 10px;   /* Add some padding for better spacing */
    border-bottom: 1px solid #ddd; /* Optional: add a subtle border for separation */
    font-size: 14px; /* Adjust font size for readability */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle shadow to separate it */

    color: #7F00FF;
}
.breadcrumb a {
    color: #401d63;
    text-decoration: none;
}
.breadcrumb a:hover {
    text-decoration: underline;
}
body {
    font-family: 'Arial', sans-serif;
    background-color: #f7f3f0;
    color: #333;
    margin: 0;
    padding: 0;
    background: linear-gradient(to bottom, #f9f9f9, #e3e3e3);
}
.header {
    background-color: var(--black);
    color: #fff;
    height: 50vh;
    margin-top: -5px;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
    overflow: hidden;
}

.header_text {
    margin: 25vh 25vh 10px 25vh;
}
.header-image {
    opacity: .4;
    filter: blur(2px);
    object-fit: cover;
    object-position: 50% 50%;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}
.header h1 {
    color: #5d4b47;
    font-size: 1.5em;
    font-weight: bold;
    margin: 0;
}
.header p {
    color: #5d4b47;
    font-size: 1em;
    margin: 0;
}
.wrapper {
    display: flex;
    justify-content: space-between;
  }
  .main {
    width: 70%;
  }
  .sidebar {
    width: 25%;
    height: 15%;
    position: -webkit-sticky;
    position: sticky;
    top: 5em;
  }
  
  .sidebar h2{
      font-size: 1em;
  }
  
  .sidebar a{
      font-size: 14px;
      font-weight: 500;
      padding-right: 0px;
      padding-left: 0px;
      padding-bottom: 6px;
      padding-top: 6px;
  }
  
.main,
.sidebar,
.contents {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin: 20px;
}
.main p {
    color: black;
    font-size: 1em;
    text-align: justify;
    margin: 10px 0;
    line-height: 1.6;
}
.contents {
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}
.contents h2 {
    font-size: 1.8em;
    color: #5d4b47;
    margin-bottom: 10px;
}
.contents h3 {
    font-size: 1.1em;
    font-weight:bold;
    color: #ab5e5a;
    margin-bottom: 10px;
    margin-left: -10px;
}


.contents ul{
    display: block;
    list-style-type: disc;

    list-style-position: outside; /* Ensures bullets/numbers stay outside */
    margin: 10px 0px;
    padding-left: 10px; /* Adds space between the edge and the text */
    text-indent: -10px; /* Negative indent pulls the first line left */
}

.sidebar ul{
    list-style-type: none;
    list-style-position: outside; /* Ensures bullets/numbers stay outside */
    margin: 10px 0px;
    padding-left: 10px; /* Adds space between the edge and the text */
    text-indent: -10px; /* Negative indent pulls the first line left */
}

.contents li {
    margin: 0 0 10px 0; /* Add spacing between list items */
    padding-left: 10px; /* Aligns all lines of text */
    text-indent: 0; /* Resets text-indent inside the <li> */
}
.contents .question {
    font-size: 1.3em;
    font-weight: bold;
    color: rgb(145, 107, 107);
    margin: 10px 0;
}
.contents .subcontents {
    font-size: 0.9em;
    color: rgb(37, 36, 36);
}

.contents .outside_link{
    
    font-weight: bold;
    color:blue;
    font-style: italic;
}

footer {
    background-color: #e8dfd8;
    color: #5d4b47;
    padding: 10px;
    text-align: center;
    font-size: 0.9em;
    border-top: 3px solid #dbcac0;
}

a {
    color: #8c766e;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    color: #5d4b47;
}