/* Sets the background color and border color for the default navbar */
.navbar-default {
    background-color: #1e2b38 !important; /* Dark blue-gray background */
    border-color: #121212 !important; /* Dark border color */
}

/* Styles the brand/logo section of the navbar */
.navbar-brand {
    padding: 10px 10px; /* Adds padding inside the brand area */
    height: 60px; /* Sets a fixed height for consistency */
}

/* Styles each navbar list item */
.navbar-nav>li {
    height: 60px; /* Ensures uniform height for each item */
    display: flex; /* Uses flexbox for alignment */
    align-items: center; /* Vertically centers content */
    justify-content: center; /* Horizontally centers content */
}

/* Styles the anchor tags inside navbar items */
.navbar-nav>li>a {
    height: 60px; /* Makes links take the full height */
    display: flex; /* Uses flexbox for alignment */
    align-items: center; /* Vertically centers text */
    font-size: 16px; /* Increases font size for better readability */
}

/* Styles navbar links in the default navbar */
.navbar-default .navbar-nav>li>a {
    color: #ffffff; /* White text color */
    width: 160px; /* Sets a fixed width for each menu item */
    justify-content: center; /* Centers the text */
}

/* Styles active and hovered navbar links */
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus, 
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus, 
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
    color: #142966; /* Changes text color to blue when active/hovered */
    background-color: transparent; /* Keeps the background transparent */
    transition: .2s; /* Smooth transition effect */
}

/* Styles the dropdown menu */
.dropdown-menu {
    background-color: #f9f9f9; /* Light background for contrast */
    border-radius: 4px; /* Adds rounded corners for a softer look */
}

/* Positions the dropdown menu centrally under its parent item */
.navbar .dropdown-menu {
    position: absolute; /* Allows precise positioning */
    left: 50%; /* Moves it to the center of the parent width */
    width: 250px; /* Sets a fixed width */
    transform: translateX(-50%); /* Centers it by shifting left by half its width */
    top: 100%; /* Ensures it appears just below the parent */
}

/* Styles dropdown menu items */
.navbar .dropdown-menu .dropdown-item {
    text-align: center; /* Centers text inside dropdown */
    white-space: normal; /* Allows text to wrap within the menu */
}

/* Styles individual links inside dropdown menu */
.dropdown-menu>li>a {
    color: #fff; /* White text for contrast */
    text-align: center; /* Centers text */
    display: block; /* Makes the links take the full width */
    width: 250px; /* Ensures all dropdown items are the same width */
    padding: 10px 20px; /* Adds space inside each item */
    white-space: normal; /* Allows long text to wrap */
    overflow: hidden; /* Prevents text from overflowing */
    text-overflow: ellipsis; /* Adds ellipsis (…) if text is too long */
}

/* Styles dropdown links on hover/focus */
.dropdown-menu>li>a:hover, 
.dropdown-menu>li>a:focus {
    color: #142966; /* Changes text color on hover */
    background-color: transparent; /* Keeps background transparent */
    text-decoration: none; /* Removes underlines */
    transition: .2s; /* Smooth transition */
}

/* Styles the toggle button in mobile view */
.navbar-toggle {
    margin-top: 0px;
    margin-bottom: 0px;
    height: 60px; /* Ensures toggle button matches navbar height */
}

/* Styles open dropdown menu inside the navbar */
.navbar-default .navbar-nav .open .dropdown-menu {
    position: absolute; /* Keeps dropdown positioned freely */
    left: 50%; /* Moves it to the center of the parent */
    transform: translateX(-50%); /* Centers it */
    background-color: #233240; /* Dark background for dropdown */
    top: 100%; /* Ensures it appears below the navbar */
}

/* Styles dropdown links inside open dropdown menus */
.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover, 
.navbar-nav .open .dropdown-menu>li>a:focus {
    color: #142966; /* Changes text color on hover */
    background-color: transparent; /* Keeps background transparent */
    transition: .2s; /* Adds smooth effect */
}

/* Adjusts padding for dropdown menu items */
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
    padding: 5px 15px 5px 15px; /* Reduces padding for better spacing */
}

/* Basic switch styling */
.switch {
  position: absolute;
  top: 70px;
  right: 10px;
  z-index: 1000;
  display: inline-block;
  width: 60px; /* Adjusted for clear visibility of emojis */
  height: 25px;
}

/* Hide the default checkbox */
.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

/* Slider styling */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent; /* No background color */
  border: 2px solid #ccc; /* Grey edge */    
  transition: .2s;
  border-radius: 34px;
}

.slider::before, .slider::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px; /* Adjust size as needed */
}

/* Moon emoji */
.slider::before {
  content: '🌜';
  left: 0px; /* Adjust as needed */
  height: 25px;
  opacity: 0; /* Hide initially */
}

/* Sun emoji */
.slider::after {
  content: '🌞';
  right: 0px; /* Adjust as needed */
  height: 25px;
  opacity: 1; /* Show initially */
}

/* Toggle circle styling */
.slider span {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: #ccc; /* No background color */
  transition: .2s;
  border-radius: 50%;
}

/* Adjust emoji visibility on toggle */
input:checked + .slider::before {
  opacity: 1; /* Show moon emoji */
}

input:checked + .slider::after {
  opacity: 0; /* Hide sun emoji */
}

input:checked + .slider span {
  transform: translateX(26px); /* Move toggle circle */
}

h1.title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 36px;
  font-weight: 700;
}

h1 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 30px;
  font-weight: 700;
}

h2 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 26px;
  font-weight: 500;
}

h3 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 22px;
  font-weight: 500;
}

h4 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 20px;
  font-weight: 500;
}

h5 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
}

p {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
}

ul {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
}

ol {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
}

summary {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
}

/* Styling for code blocks */
pre, code {
    border-radius: 5px; /* Optional: rounded corners for aesthetic */
}

pre {
    padding: 10px;
    overflow-x: auto; /* Makes code blocks scrollable horizontally if needed */
}

/* Styling for inline code */
p code {
    padding: 2px 4px;
    border-radius: 5px;
}

.tocify .list-group-item {
  background-color: transparent !important;
}

.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
  background-color: #2780e3 !important;
}

.note-box {
  border: 1px solid #2780e3;
  padding: 10px;
  margin: 20px 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  background-color: #f0f9ff;
  border-radius: 5px;
}

.note-box p {
  margin-bottom: 0px; /* Adjusts the bottom margin of paragraphs */
}

.note-box strong, .note-box b {
  color: #2780e3; /* Gold color for bold text */
}

.flex-container {
    display: flex;
    justify-content: space-around; /* Adjusts the spacing between the buttons */
    align-items: center; /* Aligns the buttons vertically in the center, if they have different heights */
}

.button {
    display: inline-block;
    background-color: #007bff; /* Button background color */
    color: white; /* Button text color */
    padding: 10px 20px; /* Padding inside the button */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    text-align: center;
    text-decoration: none; /* Removes underline from the link */
    border-radius: 5px; /* Rounded corners for the button */
    margin: 0 5px; /* Optional: Adds space between the buttons */
}

.inline_button {
    display: inline-block;
    background-color: #007bff; /* Button background color */
    color: white; /* Button text color */
    padding: 10px 20px; /* Padding inside the button */
    text-align: center;
    text-decoration: none; /* Removes underline from the link */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    border-radius: 5px; /* Rounded corners for the button */
    margin: 0 5px; /* Optional: Adds space between the buttons */
}

.inline_button {
    display: inline-block;
    background-color: #007bff;
    color: white;
    padding: 1px 10px;
    margin: 1px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
}

.shallow-break {
    height: 5px; /* Adjust this value to control the spacing */
}

.caption {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 0px;
    color: black;
}

.caption-bold {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 5px;
    color: black;
}

.caption-centre {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-weight: 400;
    font-style: italic;
    margin-top: 5px;
    margin-bottom: 0px;
    text-align: center;
}

.logo-img {
  margin-top: 0px;
}

.centered-container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    flex-wrap: wrap; 
}

.rounded-image-container {
    background-color: white;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px; /* Adjust padding as needed */
}

.rounded-image-container img {
    width: 100%; /* Make the image responsive */
    display: block; /* Remove bottom space under the image */
}

.subhead_1 {
    display: inline-block;
    background-color: black; /* Button background color */
    color: white; /* Button text color */
    padding: 10px 20px; /* Padding inside the button */
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-size: 26px;
    font-weight: 500;
    text-align: center;
    text-decoration: none; /* Removes underline from the link */
    border-radius: 5px; /* Rounded corners for the button */
    margin: 0 5px; /* Optional: Adds space between the buttons */
}

.subhead_2 {
    display: inline-block;
    background-color: #142966; /* Button background color */
    color: white; /* Button text color */
    padding: 10px 20px; /* Padding inside the button */
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    text-decoration: none; /* Removes underline from the link */
    border-radius: 5px; /* Rounded corners for the button */
    margin: 0 5px; /* Optional: Adds space between the buttons */
}

.subhead_3 {
    display: inline-block;
    background-color: #142966; /* Button background color */
    color: white; /* Button text color */
    padding: 5px 10px; /* Padding inside the button */
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    text-decoration: none; /* Removes underline from the link */
    border-radius: 5px; /* Rounded corners for the button */
}

h1.title-black {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: black;
}

h1-black {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: black;
}

h2-black {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 22px;
  font-weight: 500;
  color: black;
}

h3-black {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: black;
}

h4-black {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: black;
}

h5-black {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: black;
}

p-black {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 300;
  color: black;
}

/* Apply all styles within .coming-soon-container */
.coming-soon-container {
  font-family: "Courier New", Courier, monospace;
  text-align: center;
  border-radius: 10px;
  padding: 30px;
}

.coming-soon-container h1 {
  font-size: 48px;
  font-weight: 800;
}

.coming-soon-container p {
  font-size: 18px;
  font-weight: 500;
}

.coming-soon-container hr {
  margin-top: 15px;
  margin-bottom: 15px;
  width: 80%;
}

.circle {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius: 50%;
}

.name {
  height: 45vh;
  display: flex;
  align-items: center;
}

.name-container {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.name-image {
  flex: 0 0 auto;
  text-align: center;
  align-self: flex-start;
  margin-top: 25px;
  margin-bottom: 10px;
}

.name-content {
  max-width: 600px;
  flex: 1 1 60%;
}


.name-content h1 {
  font-size: 60px;
  font-weight: 500;
  color: #142966;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.name-content h3 {
  font-size: 32px;
  font-weight: 300;
  color: #142966;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.name-content p {
  font-size: 18px;
  color: black;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  text-align: justify;
}

.home-sci {
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-sci a {
  display: inline-flex;
  width: 30px;
  height: 30px;
  background: transparent;
  align-items: center;
  justify-content: center;
  margin-top: 15px;   /* Top margin */
  margin-bottom: 5px; /* Bottom margin */
  margin-left: 20px;   /* Left margin */
  margin-right: 20px;  /* Right margin */
}

.name-content-expand {
  flex: 1 1 60%;
}

.name-content-expand h3 {
  font-size: 32px;
  font-weight: 300;
  color: #142966;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.name-content-expand h4 {
  font-size: 24px;
  font-weight: 300;
  color: #142966;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}


.name-content-expand p {
  font-size: 18px;
  color: black;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  text-align: justify;
}