/* Main Container for the Code Window */
    .code-window {
        background-color: #1e293b;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        position: relative;
      }
  
      /* Top Bar (window-like appearance) */
      .window-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 12px;
        background-color: var(--secondary-color);
        color: #fff;
        font-size: 14px;
      }
  
      .window-bar .title {
        display: flex;
        align-items: center;
      }
  
      .window-bar .title span {
        margin-left: 10px;
        font-weight: bold;
      }
  
      /* Window Icons */
      .window-buttons {
        display: flex;
        gap: 8px;
      }
  
      .window-icon {
        color: #cbd5e1;
        font-size: 14px;
        cursor: pointer;
      }
  
      .window-icon:hover {
        color: #fff;
      }
  
      /* Code Block */
      pre {
        margin: 0;
        padding: 16px;
        color: #cbd5e1;
        font-size: 14px;
        overflow-x: auto;
        white-space: normal;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
  
      /* Line Container */
      .line-container {
        display: flex;
        align-items: flex-start;
        gap: 8px;
      }
  
      /* Line Number Styling */
      .line-number {
        color: #64748b;
        text-align: right;
        min-width: 32px;
      }
  
      /* Line Text Styling */
      .line {
        opacity: 0;
        transition: opacity 0.2s ease-in;
      }
  
      /* Copy Button */
      .copy-btn {
      z-index: 999;
        position: absolute;
        top: 50px;
        background-color: transparent;
        right: 8px;
        color: #fff;
        border: none;
        border-radius: 4px;
        padding: 6px 6px;
        font-size: 14px;
        cursor: pointer;
        transition: background-color 0.3s;
        display: flex;
        align-items: center;
        gap: 6px;
      }
  
      .copy-btn i {
          color: var(--primary-color);
        font-size: 16px;
      }
  
      .copy-btn:hover {
        background-color: #fff;
      }
  
      /* Animation for the confirmation message */
      .copied {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: var(--primary-color);
        color: #fff;
        padding: 8px 16px;
        border-radius: 4px;
        font-size: 14px;
        display: none;
        z-index: 10;
      }
  
      .copied.show {
        display: block;
      }