body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    text-align: center;
    margin: 20px;
}

ol > li,
ol > li > ol > li {
  font-weight: bold;
}

ol > li > ol > li * {
  font-weight: normal;
}

ol {
    list-style-type: none; /* Remove default numbering */
    counter-reset: section; /* Initialize numbering counter */
  }
  
  ol > li {
    counter-increment: section; /* Increment section for top-level items */
  }
  
  ol > li::before {
    content: counters(section, ".") ". "; /* Format as 1. 2. */
    font-weight: bold;
  }
  
  ol > li > ol {
    counter-reset: subsection; /* Reset subsection numbering */
  }
  
  ol > li > ol > li {
    counter-increment: subsection; /* Increment subsection for second-level items */
  }
  
  ol > li > ol > li::before {
    content: counters(section, ".") "." counter(subsection) ". "; /* Format as 1.1. */
    font-weight: bold;
  }
  
  ol > li > ol > li > ol {
    counter-reset: subsubsection; /* Reset subsubsection numbering */
  }
  
  ol > li > ol > li > ol > li {
    counter-increment: subsubsection; /* Increment subsubsection for third-level items */
  }
  
  ol > li > ol > li > ol > li::before {
    content: counters(section, ".") "." counter(subsection) "." counter(subsubsection) ". "; /* Format as 1.1.1. */
    font-weight: bold;
  }
  

img {
    max-width: 100%;
    height: auto;
}
p
{
    text-align: left;
}
section {
    margin: 50px;
    text-align: left;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #f9f9f9;
}

h2 {
    text-align: left;
    color: #333;
}

/* Smooth scroll for anchor links */
html {
    scroll-behavior: smooth;
}

/* Back to top link */
.back-to-top {
    display: inline-block;
    text-align: left;
    margin-top: 20px;
    font-size: 14px;
    color: white;
    text-decoration: none;
}
a
{
    text-align: left;
}
.back-to-top:hover {
    text-decoration: underline;
}
/* Sections styling */
section {
    margin-bottom: 30px;
    padding: 20px;
    background-color: lightgrey;
    border-radius: 10px;
    border: 2px solid black;
}
/* Add custom styling for the links to reveal sections */
.section-link {
    display: block;
    margin: 15px;
    color: #3498db;
    text-decoration: none;
    font-weight: bold;
}

.section-link:hover {
    text-decoration: underline;
}
.flashing-banner {
background-color: gray; /* Red background */
color: #fff; /* White text */
text-align: center;
padding:0px;
margin-left: 30px;
font-size: 24px;
font-weight: bold;
animation: flash 2s infinite; /* Animation applied */
}

/* Keyframes for flashing effect */
@keyframes flash {
    0%, 100% {
        opacity: 1; /* Fully visible */
    }
    50% {
        opacity: 0; /* Invisible */
    }
}
/* Reset margin and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Ensure the body takes full height */
body, html {
    height: 100%;
}

/* Main content styles */
.content {
    text-align: center;
    padding: 20px;
    min-height: 80vh;  /* Give space to content before the footer */
}

/* Full-Width Footer */
.footer {
    background-color: #333;   /* Dark background */
    color: white;             /* White text */
    text-align: center;       /* Center content */
    padding: 20px 0;          /* Vertical padding */
    width: 100%;              /* Full width of the viewport */
    position: absolute;       /* Position at the bottom */
    bottom: 0;                /* Stick to the bottom of the page */
}

/* Optional: Adding hover effect on footer text */
.footer p:hover {
    color: #007bff;           /* Change text color on hover */
}

/* The Modal (background) */
.popup-modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.7); /* Black with opacity */
}

/* Modal Content */
.popup-content {
    background-color: #fefefe;
    margin: 10% auto; /* 10% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 70%; /* Adjust to fit the content */
    box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
    border-radius: 8px;
}

/* Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}