.h1-custom {
    border: 2px #eee solid;
    color: #008CBA;
    text-align: center;
    padding: 10px;
}

label {
    font-family: Arial, Helvetica, sans-serif;
}

input {
    border: solid #008CBA;
    padding: 10px;
    font-family: Arial, Helvetica, sans-serif;
}

a:link {
  text-decoration: none;
  color: black;
}

a {
  color: black;
}

a[href^="mailto:"] 
{ 
  color: #008CBA;
  text-decoration-color: #008CBA;
}

.button {
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
  }
  
  .button1 {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50;
  }
  
  .button1:hover {
    background-color: #4CAF50;
    color: white;
  }
  
  .button2 {
    background-color: white;
    color: black;
    border: 2px solid #008CBA;
  }
  
  .button2:hover {
    background-color: #008CBA;
    color: white;
  }

.div-home {
  margin-right: 10px;
  margin-left: 10px;
}

  body {
    margin-top: 0;
  }


  .img-index {
    max-width: 100%;
    max-height: "600px";
  }


  html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
  }
  #hideMe {
      -moz-animation: cssAnimation 0s ease-in 3s forwards;
      /* Firefox */
      -webkit-animation: cssAnimation 0s ease-in 3s forwards;
      /* Safari and Chrome */
      -o-animation: cssAnimation 0s ease-in 3s forwards;
      /* Opera */
      animation: cssAnimation 0s ease-in 3s forwards;
      -webkit-animation-fill-mode: forwards;
      animation-fill-mode: forwards;
  }
  @keyframes cssAnimation {
      to {
          width:0;
          height:0;
          overflow:hidden;
      }
  }
  @-webkit-keyframes cssAnimation {
      to {
          width:0;
          height:0;
          visibility:hidden;
      }
  }



/* 🔥 Apply Progress Bar Styling ONLY Inside General Tab */
#pills-general .progress {
  background-color: #E0E0E0 !important;
  border-radius: 8px !important;
  height: 15px !important;
  overflow: hidden !important;
}

#pills-general .progress-bar {
  background-color: #055772 !important;
  transition: width 0.5s ease-in-out !important;
  border-radius: 8px !important;
}

/* ==========================
   ✅ Bootstrap Progress Bar Override
   ========================== */
.progress {
    background-color: #E0E0E0 !important;  /* Light gray background */
    border-radius: 8px !important;
    height: 30px !important;
    overflow: hidden !important;
}

/* Active Progress Segment */
.progress-bar {
    background-color: #055772 !important;  /* Deep Teal */
    transition: width 0.5s ease-in-out !important;
    border-radius: 8px !important;
}

/* Remove Bootstrap's default gradient effect */
.progress-bar-striped {
    background-image: none !important;
}

/* ==========================
   ✅ Step Label Styling
   ========================== */

/* Completed Steps */
.badge-success, .step-label.completed {
    background-color: #0FA3B1 !important;  /* Soft Blue */
    color: white !important;
    font-weight: bold !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    border: 1px solid #0C8B96 !important;
}

/* 🔥 Uncompleted Steps - Matches Tab Color (`#055772`) with Black Text */
.badge-secondary, .step-label.inactive {
    background-color: #FFFFFF  !important;  /* Matches tab background */
    color: black !important;  /* Black text */
    padding: 8px 12px !important;
    border-radius: 10px !important;
    border: 1px solid #0C8B96 !important; /* Darker shade for contrast */
}

/* ==========================
   ✅ Ensuring Progress Bar Stays Horizontal
   ========================== */
.progress-container {
    display: inline-block !important;  /* Prevents full-width stretching */
    text-align: center !important;  /* Ensures contents stay centered */
    margin: 0 auto !important;  /* Centers container */
    white-space: nowrap !important;  /* Prevents line breaks */
    width: auto !important;
}

/* Row-based layout for the progress bar */
.custom-progress-bar {
    display: flex !important;  /* Ensures horizontal alignment */
    flex-direction: row !important;  /* Prevents vertical stacking */
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
    flex-wrap: nowrap !important;  /* Prevents unintended line breaks */
}

/* Ensuring each progress step + label stays grouped */
.progress-step-container {
    display: flex !important;
    flex-direction: column !important;  /* Stacks step + label */
    align-items: center !important;  /* Centers everything */
    justify-content: center !important;
    width: auto;
    text-align: center;
}

/* Step Labels */
.step-label {
    display: inline-block !important;  /* Forces horizontal alignment */
    text-align: center !important;
    white-space: nowrap !important;  /* Prevents labels from wrapping */
    margin-top: 5px !important;  /* Adds spacing below the dot */
    width: max-content !important;
}

/* ==========================
   ✅ Bootstrap Fix to Prevent Overriding Colors
   ========================== */
/* Prevent Bootstrap from forcing `bg-success` and `bg-secondary` */
.bg-success:not(.progress-bar) {
    background-color: #0FA3B1 !important;
}

.bg-secondary:not(.progress-bar) {
    background-color: #055772 !important;
    color: black !important;
}

/* 🔥 Ensure Progress Bar is Striped */
.progress-bar-striped {
  background-image: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.25) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.25) 50%,
      rgba(255, 255, 255, 0.25) 75%,
      transparent 75%,
      transparent
  ) !important;
  background-size: 40px 40px !important;
}


/* 🔥 Slow Down the Animation */
.progress-bar-animated {
  animation: progress-bar-stripes 15s linear infinite !important; /* Adjusted speed */
}

/* 🔥 Custom Striped Animation with Slower Movement */
@keyframes progress-bar-stripes {
  from { background-position: 80px 0; } /* Increased distance */
  to { background-position: 0 0; }
}


/* Dynamic Search Box */

/* ✅ Ensure search results dropdown appears below the search bar */
#search-results {
  position: absolute;
  top: 100%; /* ✅ Positions below the input field */
  left: 0;
  width: 250px; /* ✅ Set width */
  background-color: #f8f9fa; /* ✅ Light background */
  border: 2px solid #055772; /* ✅ Deep blue border */
  border-radius: 4px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* ✅ Slight shadow */
  max-height: 250px; /* ✅ Prevents too large results */
  overflow-y: auto; /* ✅ Enables scrolling */
  z-index: 1000; /* ✅ Ensures visibility */
  display: none; /* ✅ Hidden by default */
}

/* ✅ Style for each search result item */
#search-results .dropdown-item {
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  color: #055772; /* ✅ Deep blue text */
  background-color: #ffffff; /* ✅ White background */
  border-bottom: 1px solid #dddddd; /* ✅ Separator */
}

/* ✅ Highlight effect for keyboard navigation */
#search-results .dropdown-item.active {
  background-color: #055772 !important; /* ✅ Deep blue background */
  color: #ffffff !important; /* ✅ White text */
  font-weight: bold;
}


/* ✅ Hover effect */
#search-results .dropdown-item:hover {
  background-color: #055772; /* ✅ Deep blue background */
  color: #ffffff; /* ✅ White text for contrast */
  font-weight: bold;
}