.button-container {
        display: flex;
        justify-content: center;
        align-items: stretch; /* This ensures equal height */
        gap: 40px; /* Increased space between buttons */
        padding: 40px 20px; /* Added vertical and horizontal padding to container */
        margin: 20px 0; /* Added margin to container */
    }

    .button-container a {
        text-decoration: none;
        color: #009ACE;
        display: flex; /* Added to ensure proper alignment */
        height: 100%; /* Ensure anchor takes full height */
    }

    .button-container > div {
        display: flex; /* Add flex to container div */
        align-items: stretch; /* Ensure stretching */
    }

    .button-container button {
        background-color: white;
        border: 2px solid #009ACE;
        padding: 30px 40px; /* Increased padding */
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        cursor: pointer;
        font-size: 16px;
        font-family: 'Poppins', sans-serif; /* Add Poppins font */
        color: #009ACE;
        width: 300px; /* Increased width */
        height: 100%; /* Ensures equal height */
        border-radius: 5px; /* Changed from 25px to 8px for more subtle rounding */
        min-height: 200px; /* Set minimum height to ensure consistency */
        margin: 0; /* Remove any margin that might affect alignment */
        flex: 1; /* Allow button to fill space */
    }

    .button-container button img {
        border-radius: 50%;
        margin-bottom: 10px;
        width: 100px; /* Adjust the width as needed */
        height: 100px; /* Adjust the height as needed */
        object-fit: cover; /* Ensure the image fits within the container */
    }

    .button-container button:hover {
        background-color: #009ACE;
        color: white;
    }

    .button-container button:hover img {
        border-radius: 50%;
    }
  
    .form-container {
           max-width: auto;
           margin: auto;
           padding: 20px;
           border: 1px solid #ddd;
           border-radius: 10px;
           box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
       }
       .form-title {
           text-align: center;
           margin-bottom: 20px;
       }
       .btn-previous {
           background-color: transparent;
           border: 1px solid #007bff;
           color: #007bff;
       }
       .btn-previous:hover {
           background-color: #007bff;
           color: #fff;
       }
       
       .step {
           display: none;
           padding: 20px;
           margin: 0;
           width: auto;
           max-width: none;
       }
       .step.active {
           display: block;
       }
       .step-indicator {
           cursor: pointer;
           width: 40px;
           height: 40px;
           border-radius: 50%;
           background-color: #B7D3F0;
           display: flex;
           align-items: center;
           justify-content: center;
           margin: 0 10px;
           font-weight: bold;
           color: #2969AC;
           transition: background-color 0.3s, color 0.3s;
           position: relative;
           z-index: 2;
           font-family: 'Poppins', sans-serif; /* Add this line for Poppins font */
       }
       .step-indicator.active {
           background-color: #2969AC;
           color: white;
       }
       .steps-container {
           display: flex;
           justify-content: center;
           align-items: center;
           margin-bottom: 20px;
           position: relative;
       }
       .steps-container::before {
           content: '';
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           width: calc(100% - 100px);
           height: 2px;
           background-color: #B7D3F0;
           z-index: 1;
       }
       .step-line {
           flex: 1;
           height: 2px;
           background-color: #B7D3F0;
           margin: 0 -5px; /* Adjust as needed */
       }

   /* Style for form checks */
   .form-check {
       background-color: white;
       border: 2px solid #DADADA;
       border-radius: 5px;
       padding: 15px;
       margin-bottom: 10px;
       cursor: pointer;
       transition: all 0.3s ease;
       width: 100%; /* Make form checks full width */
       box-sizing: border-box;
       margin-left: 0;
       margin-right: 0;
       max-width: 400px;
   }

   /* Style for checked form checks */
   .form-check:has(input:checked) {
       border-color: #2969AC;
   }

   /* Previous button styling */
   #prevBtn {
       color: #2969AC;
       background-color: white;
       border: 2px solid #2969AC;
       padding: 8px 20px;
       border-radius: 5px;
       transition: all 0.3s ease;
   }

   #prevBtn:hover {
       background-color: #2969AC;
       color: white;
   }

   /* Next button styling to match */
   #nextBtn {
       background-color: #2969AC;
       border: 2px solid #2969AC;
       padding: 8px 20px;
       border-radius: 5px;
       transition: all 0.3s ease;
   }

   /* Custom checkbox styling */
   .form-check-input {
       border-color: #DADADA;
   }

   .form-check-input:checked {
       background-color: #2969AC;
       border-color: #2969AC;
   }

   /* Question styling */
   h4 {
       font-family: 'Poppins', sans-serif;
       margin-bottom: 20px;
       width: auto;
       padding: 0 15px;
   }

   /* Form check styling */
   .form-check {
       background-color: white;
       border: 2px solid #DADADA;
       border-radius: 5px;
       padding: 15px;
       margin-bottom: 10px;
       cursor: pointer;
       transition: all 0.3s ease;
       font-family: 'Poppins', sans-serif;
       width: auto;
   }

   .form-check-input {
       display: none; /* Hide the checkbox */
   }

   .form-check-label {
       cursor: pointer;
       display: block;
       width: 100%;
       margin: 0;
   }

   /* Style for checked form checks */
   .form-check:has(input:checked) {
       border-color: #2969AC;
   }

   /* Navigation buttons styling */
   #prevBtn, #nextBtn {
       font-family: 'Poppins', sans-serif;
       padding: 8px 20px;
       border-radius: 5px;
       transition: all 0.3s ease;
   }

   #prevBtn {
       color: #2969AC;
       background-color: white;
       border: 2px solid #2969AC;
   }

   #nextBtn {
       color: white;
       background-color: #2969AC;
       border: 2px solid #2969AC;
   }

   #prevBtn:hover {
       background-color: #2969AC;
       color: white;
   }

   /* Container for the form checks */
   .step > div:not(:first-child) {
       width: 100%;
   }

   /* Form check container styling */
   .form-check-container {
      /* padding: 0 15px;*/
       width: auto;
   }

   /* Remove any fixed widths from parent containers */
   .container.mt-5 {
      
       padding: 0 30px;
   }

   /* Additional CSS from patient.html that's not in smile.html */
   h3 {
     margin-top: 10px;
   }

   .badges {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-top: 20px;
   }

   .badges img {
     width: 100px;
     height: auto;
   }

   .header-row {
     display: flex;
     align-items: center;
     justify-content: center;
   }

   .header-row h2 {
     margin: 0 15px 0 0;
   }

   .section .row {
     margin-bottom: 20px;
   }

   .section img {
     max-width: 100px;
   }

   .partner-logos {
     background-color: #264D59;
     padding: 10px;
   }

   .partner-logos img {
     margin: 0 10px;
     max-width: 100px;
   }

  

   .text2 {
     font-family: "Poppins", "Arial Black", "Impact", sans-serif !important;
     font-weight: bold !important;
     color: black !important;
     font-size: 30px !important;
   }

   .text4 {
     font-family: "Poppins", "Arial Black", "Impact", sans-serif !important;
     font-weight: bold !important;
     color: rgb(255, 255, 255) !important;
     font-size: 25px !important;
   }

   .text3 {
     font-family: "Poppins", "Arial Black", "Impact", sans-serif !important;
     color: black !important;
     font-size: 18px !important;
   }

   .text6 {
     font-family: "Poppins", "Arial Black", "Impact", sans-serif !important;
     color: rgb(255, 255, 255) !important;
     font-size: 16px !important;
     max-width: 50%;
   }

   .btn-sourir {
     background: linear-gradient(to left, #05B4B2, #2969AC);
     border-color: #007bff;
     color: #fff;
     padding: 8px 15px;
     text-decoration: none;
     font-size: 14px;
     border-radius: 10px;
   }

   .imgpatient {
     width: 330px;
     height: 153px;
     object-fit: cover;
     border-radius: 10px;
   }

   .trouvpatient1 {
     background-color: #2969AC;
     font-family: "Poppins", "Arial Black", "Impact", sans-serif !important;
     color: white;
     font-size: 13px;
     margin-top: 51px;
     border-radius: 9px;
     padding: 9px 24px;
   }

   .trouvpatient2 {
     background-color: #05B4B2;
     font-family: "Poppins", "Arial Black", "Impact", sans-serif !important;
     color: white;
     font-size: 13px;
     margin-top: 51px;
     border-radius: 9px;
     padding: 9px 24px;
   }


.btn-sec {
 color: #000;
 font-weight: 900;
 font-size: 16px;
 padding: 10px;
 margin-right:100px;
 border: #000 2px solid;
 border-radius: 10px;
 font-family: "Poppins", "Arial Black", "Impact", sans-serif;
}

/* Ajoutez ce CSS dans votre fichier de style */
.btn-container {
 position: relative;
 display: inline-block;
}

.btn-container::before {
 content: '';
 position: absolute;
 left: -44px;
 top: -8px;
 height: 169%;
 width: 3px;
 background-color: #05B4B2;
}