                                           :root {
                                              --primary: #1e40af;
                                              --primary-hover: #1e3a8a;
                                              --background: #f9fafb;
                                              --text: #111827;
                                              --text-light: #6b7280;
                                              --border: #e5e7eb;
                                          }
                                          
                                          * {
                                              margin: 0;
                                              padding: 0;
                                              box-sizing: border-box;
                                          }
                                          
                                          body {
                                              font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
                                              line-height: 1.5;
                                              color: var(--text);
                                              background-color: var(--background);
                                          }
                                          
                                          .container {
                                              max-width: 1280px;
                                              margin: 0 auto;
                                              padding: 0 1rem;
                                          }
                                          
                                          .btn {
                                              display: inline-flex;
                                              align-items: center;
                                              padding: 0.75rem 1.5rem;
                                              border-radius: 0.375rem;
                                              font-weight: 500;
                                              cursor: pointer;
                                              transition: all 0.2s;
                                              border: none;
                                          }
                                          
                                          .btn-primary {
                                              background-color: var(--primary);
                                              color: white;
                                          }
                                          
                                          .btn-primary:hover {
                                              background-color: var(--primary-hover);
                                          }
                                          
                                          .btn-secondary {
                                              background-color: white;
                                              color: var(--text);
                                              border: 1px solid var(--border);
                                          }
                                          
                                          .btn-secondary:hover {
                                              background-color: var(--background);
                                          }
                                          
                                          section {
                                              padding: 4rem 0;
                                          }
                                          
                                          .hero {
                                              height: 100vh;
                                              background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1581093458791-9f3c3900df4b?auto=format&fit=crop&q=80');
                                              background-size: cover;
                                              background-position: center;
                                              color: white;
                                              display: flex;
                                              align-items: center;
                                          }
                                          
                                          .hero-content {
                                              max-width: 600px;
                                          }
                                          
                                          .hero-title {
                                              font-size: 3.5rem;
                                              font-weight: 700;
                                              margin-bottom: 1.5rem;
                                              line-height: 1.2;
                                          }
                                          
                                          .hero-description {
                                              font-size: 1.25rem;
                                              margin-bottom: 2rem;
                                              opacity: 0.9;
                                          }
                                          
                                          .hero-buttons {
                                              display: flex;
                                              gap: 1rem;
                                          }
                                          
                                          @media (max-width: 768px) {
                                              .hero-title {
                                                  font-size: 2.5rem;
                                              }
                                          }
                                          
                                          .navbar {
                                              position: fixed;
                                              top: 0;
                                              left: 0;
                                              right: 0;
                                              background: white;
                                              box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                                              z-index: 1000;
                                          }
                                          
                                          .navbar-container {
                                              display: flex;
                                              justify-content: space-between;
                                              align-items: center;
                                              height: 4rem;
                                          }
                                          
                                          .navbar-brand {
                                              display: flex;
                                              align-items: center;
                                              font-size: 1.25rem;
                                              font-weight: 600;
                                              color: var(--text);
                                              text-decoration: none;
                                          }
                                          
                                          .navbar-brand svg {
                                              margin-right: 0.5rem;
                                          }
                                          
                                          .navbar-menu {
                                              display: flex;
                                              gap: 2rem;
                                              list-style: none;
                                          }
                                          
                                          .navbar-link {
                                              color: var(--text-light);
                                              text-decoration: none;
                                              font-weight: 500;
                                              transition: color 0.2s;
                                          }
                                          
                                          .navbar-link:hover {
                                              color: var(--primary);
                                          }
                                          
                                          .navbar-toggle {
                                              display: none;
                                              background: none;
                                              border: none;
                                              cursor: pointer;
                                          }
                                          
                                          @media (max-width: 768px) {
                                              .navbar-menu {
                                                  display: none;
                                              }
                                              .navbar-menu.active {
                                                  display: flex;
                                                  flex-direction: column;
                                                  position: absolute;
                                                  top: 4rem;
                                                  left: 0;
                                                  right: 0;
                                                  background: white;
                                                  padding: 1rem;
                                                  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                                              }
                                              .navbar-toggle {
                                                  display: block;
                                              }
                                          }
                                          
                                          .simulation-grid {
                                              display: grid;
                                              grid-template-columns: 1fr 1fr;
                                              gap: 2rem;
                                              margin-top: 2rem;
                                          }
                                          
                                          .simulation-controls {
                                              background: white;
                                              padding: 1.5rem;
                                              border-radius: 0.5rem;
                                              box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                                          }
                                          
                                          .test-type-buttons {
                                              display: grid;
                                              grid-template-columns: 1fr 1fr;
                                              gap: 1rem;
                                              margin-bottom: 1.5rem;
                                          }
                                          
                                          .parameter-controls {
                                              display: flex;
                                              flex-direction: column;
                                              gap: 1.5rem;
                                              margin-bottom: 1.5rem;
                                          }
                                          
                                          .parameter-control {
                                              display: flex;
                                              flex-direction: column;
                                              gap: 0.5rem;
                                          }
                                          
                                          .parameter-slider {
                                              width: 100%;
                                              height: 0.5rem;
                                              background: var(--background);
                                              border-radius: 0.25rem;
                                              appearance: none;
                                          }
                                          
                                          .parameter-slider::-webkit-slider-thumb {
                                              appearance: none;
                                              width: 1rem;
                                              height: 1rem;
                                              background: var(--primary);
                                              border-radius: 50%;
                                              cursor: pointer;
                                          }
                                          
                                          .parameter-value {
                                              text-align: right;
                                              color: var(--text-light);
                                          }
                                          
                                          .simulation-buttons {
                                              display: flex;
                                              flex-direction: column;
                                              gap: 1rem;
                                          }
                                          
                                          .simulation-preview {
                                              background: white;
                                              padding: 1.5rem;
                                              width: 850px;
                                              border-radius: 0.5rem;
                                              box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                                          }
                                          
                                          .simulation-canvas {
                                              aspect-ratio: 16/12;
                                              background: var(--background);
                                              border-radius: 0.5rem;
                                              position: relative;
                                              overflow: hidden;
                                          }
                                          
                                          .simulation-progress {
                                              position: absolute;
                                              top: 50%;
                                              left: 0;
                                              height: 0.25rem;
                                              background: var(--primary);
                                              transition: width 1s linear;
                                          }
                                          
                                          .simulation-label {
                                              position: absolute;
                                              bottom: 1rem;
                                              left: 0;
                                              right: 0;
                                              text-align: center;
                                              color: var(--text-light);
                                          }
                                          
                                          .simulation-canvas {
                                              position: relative;
                                              /* Ensure the canvas is a positioning context */
                                          }
                                          
                                          .procedure-dropdown {
                                              position: absolute;
                                              /* Position the button absolutely within the canvas */
                                              top: 10px;
                                              /* Adjust the top spacing */
                                              right: 10px;
                                              /* Adjust the right spacing */
                                              z-index: 10;
                                              /* Ensure the button is above the SVG content */
                                          }
                                          
                                          .dropdown-content {
                                              display: none;
                                              position: absolute;
                                              background-color: rgba(255, 255, 255, 0.9);
                                              /* Semi-transparent background */
                                              min-width: 250px;
                                              box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
                                              padding: 20px;
                                              z-index: 1;
                                              border-radius: 5px;
                                              top: 40px;
                                              /* Position the dropdown below the button */
                                              right: 0;
                                          }
                                          /* Style for the instruction section */
                                          
                                          .instruction-section {
                                              position: absolute;
                                              top: 10px;
                                              left: 10px;
                                              background-color: rgba(255, 255, 255, 0.9);
                                              /* Semi-transparent background */
                                              padding: 10px;
                                              border-radius: 5px;
                                              box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
                                              z-index: 10;
                                              /* Ensure it appears above the SVG */
                                          }
                                          /* Style for the highlighted button */
                                          
                                          .highlighted-button {
                                              background-color: #ffcc00;
                                              /* Highlight color */
                                              border: 2px solid #ff9900;
                                              /* Border color */
                                              font-weight: bold;
                                          }
                                          /* Results Section */
                                          
                                          .results-section {
                                              display: none;
                                              /* Hidden by default */
                                              margin-top: 20px;
                                              padding: 20px;
                                              background-color: #f9f9f9;
                                              border-top: 2px solid #ccc;
                                              text-align: center;
                                          }
                                          /* Slider Container */
                                          
                                          .slider-container {
                                              position: relative;
                                              overflow: hidden;
                                              width: 100%;
                                          }
                                          
                                          .image-container {
                                              display: flex;
                                              transition: transform 0.5s ease-in-out;
                                          }
                                          
                                          .slide {
                                              min-width: 100%;
                                              box-sizing: border-box;
                                          }
                                          
                                          .slide img {
                                              width: 100%;
                                              height: auto;
                                          }
                                          
                                          .arrow-button {
                                              position: absolute;
                                              top: 50%;
                                              transform: translateY(-50%);
                                              background-color: rgba(0, 0, 0, 0.5);
                                              color: white;
                                              border: none;
                                              padding: 10px;
                                              cursor: pointer;
                                          }
                                          
                                          #scrollLeft {
                                              left: 10px;
                                          }
                                          
                                          #scrollRight {
                                              right: 10px;
                                          }
                                          
                                          .slide-container {
                                              width: 100%;
                                              text-align: center;
                                              margin-top: 20px;
                                              /* Adjust as needed */
                                          }
                                          
                                          #slider {
                                              width: 80%;
                                              margin: 20px auto;
                                          }
                                          /* Ensure the stand image maintains its size and fixed Y-position */
                                          .circle{
                                            position: absolute; /* Or fixed */
                                            top: 50px;
                                            left: 10px;
                                            
                                          }
                                          @media (max-width: 768px) {
                                              .simulation-grid {
                                                  grid-template-columns: 1fr;
                                              }
                                          }





                                          