: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);
                       text-align: center;
                       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: 1000px;
                       border-radius: 0.5rem;
                       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                   }
                   
                   .simulation-canvas {
                       aspect-ratio: 20/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 */
                   }
                    .instruction-section2 {
                       position: absolute;
                       width: 200px;
                       top: 420px;
                       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;
                   }
                   
                   @media (max-width: 768px) {
                       .simulation-grid {
                           grid-template-columns: 1fr;
                       }
                   }

                   /* this is the changed code */
                       #fixedDiv {
      position: absolute;   /* stays fixed on screen */
      top: 100px;        /* Y position */
      left: 560px;       /* X position */
      background: white;
      color: black;
      height: 400px;
      width: 400px;
      font-weight: bolder; font-style: italic;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
      display: none;   
        /* hidden until button click */
    }
    .model{
       height: 650px;
       width: 650px;
     margin-left: 0%;
    }





/* Main container */
#myContainer {
  display: none; /* Hidden initially */
  width: 700px;
  height: 550px;
  padding: 20px;
  background: #f0f0f0;
  border: 2px solid #333;
  border-radius: 8px;
  margin: 20px auto; /* Center horizontally */
  text-align: center;
  box-sizing: border-box; /* keep padding inside the fixed size */
  overflow: hidden; /* or 'auto' if you want scrollbars */
}

/* Image inside container */
#sliderImage {
  width: 100%;       /* always stretch to container width */
  height: 300px;     /* fixed image area */
  object-fit: contain; /* maintain aspect ratio */
  border-radius: 8px;
}

/* Description box under image */
.desc-box {
  margin-top: 10px;
  height: 120px;          /* fixed height for text area */
  overflow-y: auto;       /* scroll inside if text is too long */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: left;
  background: #fff;
}

/* Button container */
.btn-container {
  margin-top: 20px;
}

/* Buttons for switching images */
.img-btn {
  padding: 10px 20px;
  border: none;
  background: #333;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  margin: 0 5px;
  transition: 0.3s;
}

.img-btn:hover {
  background: #555;
}

.img-btn.active {
  background: #ff6600;
}

/* Output container (if you use it separately) */
#outputContainer {
  display: none;    /* hidden by default */
  margin-top: 20px;
  width: 100%;
  height: 300px;    /* fixed height for image area */
  overflow: hidden;
}

#outputContainer img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* keep aspect ratio inside fixed area */
}


#elementName {
color: white;
height: auto;
margin-top: 0;
text-align: center;
width: 250px;
font-size: larger;
background-color: #333;
}