@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

/* Reset default browser styles */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: inital;
    padding: intial;
    border: inital;
    font-size: inital;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box; /* Include padding and border in total width */
}


/* Your custom styles go here */
/* Custom styles */
body {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
}

/* Container and columns */
.container {
    width: 100%;
    max-width: 1900px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: row; /* Default: row layout */
}



.left-column,
.right-column {
    flex: 1;
    font-size: 12px;
    padding: 10px; /* Ensure consistent padding */
    border: 1px solid #ccc; /* Add border to all sides */
    border-radius: 5px; /* Optional: Add border radius */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add shadow */
    margin: 0; /* Reset margin */
}

.middle-column {
    flex: 2;
    font-size: 12px; /* Adjust font size as needed */
    padding: 10px; /* Ensure consistent padding */
    border: 1px solid #ccc; /* Add border to all sides */
    border-radius: 5px; /* Optional: Add border radius */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add shadow */
    margin: 0; /* Reset margin */
}



/* Add gutters between columns */
.container > * + * {
    margin-left: 20px; /* Add margin between columns */
}


/* Module headings */
.module h3 {
    background-color: #f5f5f5; /* Background color for headings */
    color: #333; /* Text color for headings */
    padding: 10px; /* Padding for headings */
    border-bottom: 1px solid #ccc; /* Border bottom for headings */
    margin: 0; /* Reset margin */
}

/* Additional styles for module headings */
.module {
    margin-bottom: 20px; /* Add bottom margin for spacing between modules */
}

.module:first-child h3 {
    border-radius: 5px 5px 0 0; /* Round top corners for first module heading */
}

.module:last-child h3 {
    border-radius: 0 0 5px 5px; /* Round bottom corners for last module heading */
}

        /* Style breadcrumbs */




/* Breadcrumbs Container */
/*
.breadcrumbs {
  background: rgba(255, 255, 255, 0.3); /* Adjust transparency as needed */
  /*padding: 10px;
  border-radius: 20px;
  backdrop-filter: blur(10px); /* Applies blur effect */
  /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow effect */
  /*display: inline-block;
   list-style: none;
}
*/


/* Reset Breadcrumbs */
.breadcrumbs {
  background: none; /* Reset background */
  padding: 0; /* Reset padding */
  border-radius: 0; /* Reset border-radius */
  box-shadow: none; /* Reset box-shadow */
}

/* Reset Breadcrumb Items */
.breadcrumb-item {
  display: inline; /* Reset display */
  margin-right: 5; /* Reset margin-right */
  font-size: initial; /* Reset font-size */
  font-weight: normal; /* Reset font-weight */
}

/* Reset Separator */
.separator {
  display: none; /* Reset display */
  margin: 0; /* Reset margin */
  color: initial; /* Reset color */
}




/* Table of Contents Styles */
.toc {
    background-color: #f8f9fa; /* Light background color */
    border: 1px solid #e9ecef; /* Border color */
    border-radius: 5px; /* Rounded corners */
    padding: 20px;
    margin-bottom: 30px;
}

.toc-title {
    font-size: 24px; /* Larger font size */
    font-weight: bold;
    color: #007bff; /* Blue color for title */
    margin-bottom: 15px;
}

.toc-list {
    list-style-type: none;
    padding-left: 0;
}

.toc-item {
    margin-bottom: 10px; /* Spacing between items */
}

.toc-link {
    text-decoration: none;
    color: #343a40; /* Dark text color */
    transition: color 0.3s ease;
    display: block; /* Make link fill the width */
}

.toc-link:hover {
    color: #0069d9; /* Darker blue color on hover */
}

.toc-link:before {
    content: "\2022"; /* Bullet point as a marker */
    margin-right: 5px;
    color: #0069d9; /* Marker color */
    font-weight: bold; /* Make marker bold */
}

.toc-link.active {
    font-weight: bold; /* Highlight active link */
}


   /* CSS for header, menu, and footer */
        header {
            background-color: #ccc;
            color: #333;
            padding: 10px;
            text-align: center;
	
        }
			
			   

        /* Style subtitle */
        subtitle {
            color: #999;
            font-style: italic;
        }

			
			

        
        footer {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
        }










/* Style all content headings */
h1, h2, h3, h4, h5, h6 {
    color: #333; /* Text color for headings */
    font-weight: bold; /* Bold font weight for headings */
}

/* Style subheadings */
h2 {
    font-size: 24px; /* Adjust font size for h2 */
    margin-bottom: 10px; /* Add bottom margin for spacing */
}

h3 {
    font-size: 20px; /* Adjust font size for h3 */
    margin-bottom: 8px; /* Add bottom margin for spacing */
}

/* Style page links */
a {
    color: #007bff; /* Link color */
    text-decoration: underline; /* Underline link text */
}

a:hover {
    color: #0056b3; /* Link color on hover */
    text-decoration: none; /* Remove underline on hover */
}



/* Center breadcrumbs and menu block horizontally */
.breadcrumbs-container,
.menu-container {
  text-align: center; /* Center align content */
  margin: 0 auto; /* Center horizontally */
}


/* Make menu items display horizontally */



.nav-item {
  display: inline-block; /* Display menu items horizontally */
}

.nav-item:not(:last-child) {
  margin-right: 10px; /* Add spacing between menu items */
}





/* Make breadcrumb items display horizontally */
.breadcrumb {
  list-style: none; /* Remove list numbering */
  padding: 0; /* Remove default padding */
  display: inline; /* Display breadcrumb items inline */
}

.breadcrumb-item {
  display: inline; /* Display breadcrumb items inline */
}

.breadcrumb-item:not(:last-child):after {
  content: '/'; /* Add separator */
  margin: 0 5px; /* Adjust spacing around separator */
}

/* Style horizontal menu */
        .nav {
list-style: none; /* Remove list numbering */
  padding: 0; /* Remove default padding */
        }


        /* Style content headings */
        h1, h2, h3, h4, h5, h6 {
            color: #333;
            font-weight: bold;
        }

        h2 {
            font-size: 24px;
            margin-bottom: 10px;
        }

        h3 {
            font-size: 20px;
            margin-bottom: 8px;
        }

        /* Style page links */
        a {
            color: #007bff;
            text-decoration: underline;
        }

        a:hover {
            color: #0056b3;
            text-decoration: none;
        }