body {
    background-color: #f8f9fa;

}

.title {
    margin-bottom: 20px;
    text-align: center;
}
#header {
    position: relative; /* Ensure the header can position its children absolutely */
    overflow: hidden; /* Prevent overflow issues */
}

#header .container-fluid {
    padding: 0; /* Remove padding to ensure full width */
}

.landing-container {
    position: relative; /* Allow absolute positioning for overlay */
    width: 100vw; /* Full viewport width */
    height: auto; /* Adjust height to content */
    left: 50%; /* Center the container */
    right: 50%; /* Center the container */
    margin-left: -50vw; /* Shift back to left by half of viewport width */
    margin-right: -50vw; /* Shift back to right by half of viewport width */
    z-index: 0; /* Set a stacking context */
    background: linear-gradient(135deg, #f9a71d 0%,  #0d4e8d  75%);
    color: white;
}

.landing-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../../img/patternn.png'); /* Replace with your image path */
    background-size: cover; /* Make the background image cover the entire area */
    background-position: center; /* Center the background image */
    opacity: 0.5; /* Adjust the opacity as needed */
    z-index: 1; /* Place this behind the text */
}

.landing-container .overlay {
    position: relative; /* Create a stacking context */
    z-index: 2; /* Keep the text above the overlay */
    background-color: linear-gradient(100deg, #0d4e8d 0%, #f9a71d 50%);  
      padding: 40px; /* Adjust padding as needed */
    border-radius: 10px; /* Optional: Add rounded corners */
    text-align: center; /* Center text */
}
.landing-container .overlay h3 {
    color: white; /* Ensure text is white */
    font-weight: bold; /* Make text bold */
}
.step {
    margin-bottom: 20px;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.progress-bar li.complete i {
    color: green;
    /* Couleur pour les étapes complètes */
}

.progress-bar li.inactive i {
    color: red;
    /* Couleur pour les étapes invalides */
}

button {
    margin-top: 10px;
}

/* Progress Bar Styles */
.progress-bar {
    display: flex;
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
    justify-content: space-between;
}

.progress-bar li {
    position: relative;
    flex: 1;
    text-align: center;
    color: darkblue;
    font-size: 30px;
}

.progress-bar li.active {
    color: green;
}

.progress-bar li.complete {
    color: green;
}

.progress-bar li.inactive {
    color: red;
}

.progress-bar li::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 5px;
    background: #007bff;
    top: 20px;
    left: 0;
    z-index: -1;
}

.progress-bar li:first-child::before {
    display: none;
}

.is-invalid {
    border: 1px solid red;
}
.shadow-nav {
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1);
  }