/* ===== POPUP BACKDROP CONTAINER ===== */
    #popupContainer {
      display: none; /* Initially hidden */
      position: fixed; /* Fixed position over entire screen */
      top: 0;
      left: 0;
      width: 100vw; /* Full viewport width */
      height: 100vh; /* Full viewport height */
      background: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
      justify-content: center; /* Center horizontally */
      align-items: center; /* Center vertically */
      z-index: 9999; /* Keep on top of all elements */
    }

    /* ===== POPUP BOX STYLING ===== */
    .popup {
      width: 400px;
      background: #fff; /* White background */
      border: 2px solid #ccc;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); /* Drop shadow */
      position: relative; /* Enables absolutely positioned children */
    }

    /* ===== CLOSE BUTTON INSIDE POPUP ===== */
    .close-btn {
      position: absolute; /* Positioned relative to popup box */
      top: 8px;
      right: 12px;
      background: #eee;
      border: none;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      text-align: center;
      line-height: 20px;
    }

    /* ===== HEADING IN POPUP ===== */
    .popup h3 {
      text-align: center;
    }

    /* ===== CONTAINER FOR PIPELINE FEATURES ===== */
    .pipeline-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 40px 0 20px;
      position: relative;
    }

    /* ===== HORIZONTAL LINE BEHIND PIPELINE ===== */
    .pipeline-container::before {
      content: '';
      position: absolute;
      top: 14%; /* Controls vertical alignment */
      left: 5%;
      width: 90%;
      height: 2px;
      background: #aaa;
      z-index: 0;
      transform: translateY(-50%);
    }

    /* ===== INDIVIDUAL PIPELINE ITEMS ===== */
    .pipeline-item {
      display: flex;
      flex-direction: column; /* Arrange icon and label vertically */
      align-items: center;
      flex: 1; /* Distribute space evenly */
      position: relative;
      text-align: center;
      font-size: 0.85em;
      z-index: 1;
      transition: transform 0.3s, background-color 0.3s;
      cursor: pointer;
    }

    /* ===== HOVER EFFECTS ON PIPELINE ITEMS ===== */
    .pipeline-item:hover {
      transform: scale(1.05); /* Slight zoom on hover */
    }

    /* ===== OUTER CIRCLE FOR BULLET ===== */
    .pipeline-item::before {
      content: '';
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: transparent;
      border: 2px solid #555;
      display: inline-block;
      position: relative;
    }

    /* ===== HOVER EFFECT FOR BULLET ===== */
    .pipeline-item:hover::before {
      background-color: #ffb71b;
      border-color: #997e45;
    }

    /* ===== INNER DOT OF BULLET ===== */
    .pipeline-item::after {
      content: '';
      width: 4px;
      height: 4px;
      background-color: #555;
      border-radius: 50%;
      position: absolute;
      top: 14%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    /* ===== HOVER EFFECT FOR INNER DOT ===== */
    .pipeline-item:hover::after {
      background-color: #fff;
    }

    /* ===== LABEL UNDER BULLET ===== */
    .pipeline-label {
      margin-top: 5px;
    }

    /* ===== MESSAGE UNDER PIPELINE ===== */
    .message {
      text-align: center;
      margin-top: 80px;
      font-style: italic;
    }

    /* ===== ARTHLINGS WEBSITE LINK SECTION ===== */
    .link {
      text-align: center;
      margin: 10px 0;
    }

    /* ===== LINK STYLE ===== */
    .link a {
      color: #8cbe77;
      text-decoration: none;
      font-weight: bold;
    }

    /* ===== LINK HOVER EFFECT ===== */
    .link a:hover {
      color: #91ce77;
      text-shadow: 0 0 4px rgba(140,190,119, 0.5);
      text-decoration: underline;
    }

    /* ===== PRODUCTS IMAGE CONTAINER ===== */
    .products {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1px;
      flex-wrap: wrap;
      margin-top: 20px;
    }

    /* ===== INDIVIDUAL PRODUCT IMAGE STYLING ===== */
    .products img {
      height: 80px;
      object-fit: contain;
      margin: 1px;
      background: transparent;
    }

    /* ===== LINK WRAPPED AROUND PRODUCT IMAGE ===== */
    .products a img {
      transition: transform 0.3s, box-shadow 0.3s, border 0.3s;
      border: 2px solid transparent;
      border-radius: 8px;
      cursor: pointer;
    }

    /* ===== HOVER EFFECT ON PRODUCT IMAGE ===== */
    .products a:hover img {
      border: 2px solid #8cbe77;
      box-shadow: 0 4px 12px rgba(140,190,119, 0.5);
      transform: scale(1.05);
    }

    /* ===== MOBILE RESPONSIVE STYLING ===== */
    @media (max-width: 480px) {
      .popup {
        width: 90vw; /* Use most of screen width */
        padding: 16px;
      }

      .pipeline-container {
        flex-direction: column; /* Stack vertically */
        align-items: center;
        gap: 20px;
      }

      .pipeline-container::before {
        display: none; /* Remove horizontal line on small screens */
      }

      .pipeline-item::after {
        display: none; /* Remove inner dot */
      }

      .products {
        flex-direction: column;
        gap: 10px;
      }

      .products a img {
        height: 70px;
        width: auto;
      }

      .message {
        margin-top: 40px;
      }
    }