	<!-- Component Styles -->
	  .publication-process-wrapper * {
	    box-sizing: border-box;
	    margin: 0;
	    padding: 0;
	    font-family: Arial, Helvetica, sans-serif;
	  }

	  /* Outer Container */
	  .publication-process-wrapper {
	    width: 100%;
	    max-width: 1200px;
	    margin: 0 auto;
	    padding: 40px 20px;
	  }

	  /* Main Section Heading - Centered */
	  .publication-heading {
	    text-align: center;
	    color: #0d1e38;
	    font-size: 28px;
	    font-weight: 700;
	    margin-bottom: 40px;
	    letter-spacing: -0.5px;
	  }

	  /* Main Process Layout: Default HORIZONTAL for Desktop */
	  .process-container {
	    position: relative;
	    display: flex;
	    flex-direction: row;
	    justify-content: space-between;
	    align-items: center;
	    width: 100%;
	    padding: 20px 0;
	  }

	  /* Horizontal Line for Desktop */
	  .process-container::before {
	    content: '';
	    position: absolute;
	    top: 50%;
	    left: 60px;
	    right: 60px;
	    height: 2px;
	    background-color: #f1bfb5; /* Light orange/peach line */
	    z-index: 1;
	    transform: translateY(-50%);
	  }

	  /* Individual Circle Node */
	  .step-item {
	    position: relative;
	    z-index: 2;
	    width: 140px;
	    height: 140px;
	    border-radius: 50%;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	    text-align: center;
	    padding: 12px;
	    box-shadow: 0 0 0 10px #f0f4f9; /* Outer faint halo ring */
	    flex-shrink: 0;
	  }

	  /* Active Step State (First Circle) */
	  .step-item.active {
	    background-color: #ffffff;
	    border: 3px solid #0f223d;
	    color: #0f223d;
	  }

	  /* Standard Dark Step State */
	  .step-item.dark {
	    background-color: #0d1e38;
	    color: #ffffff;
	  }

	  /* Icons Styling */
	  .step-icon {
	    font-size: 20px;
	    margin-bottom: 6px;
	  }

	  .active .step-icon {
	    color: #bfb2d6; /* Light purple file icon */
	  }

	  .icon-badge-blue {
	    background-color: #3b82f6;
	    color: #ffffff;
	    width: 28px;
	    height: 28px;
	    border-radius: 4px;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    font-size: 13px;
	  }

	  .icon-badge-clipboard {
	    color: #e28743; /* Clipboard orange */
	    font-size: 24px;
	  }

	  .icon-badge-cloud {
	    color: #d1d5db; /* Light grey cloud */
	    font-size: 22px;
	  }

	  .icon-badge-book {
	    color: #60a5fa; /* Light blue book */
	    font-size: 22px;
	  }

	  /* Typography inside Circles */
	  .step-title {
	    font-size: 12px;
	    font-weight: bold;
	    line-height: 1.25;
	  }

	  /* Bottom Action Area & Button */
  .action-container {
    text-align: center;
    margin-top: 50px;
  }

  .submit-btn {
    display: inline-block;
    background-color: #0d1e38;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    padding: 14px 32px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(13, 30, 56, 0.2);
    transition: all 0.3s ease;
  }

  .submit-btn:hover {
    background-color: #1a365d;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(13, 30, 56, 0.3);
  }

	  /* ===================================================
	     RESPONSIVE BREAKPOINT (TABLET & MOBILE VERTICAL VIEW)
	     =================================================== */
	  @media (max-width: 992px) {
	    .publication-heading {
	      font-size: 22px;
	      margin-bottom: 30px;
	    }

	    .process-container {
	      flex-direction: column;
	      gap: 40px; /* Vertical gap between steps */
	    }

	    /* Convert Connecting Line to Vertical Axis */
	    .process-container::before {
	      top: 60px;
	      bottom: 60px;
	      left: 50%;
	      right: auto;
	      width: 2px;
	      height: auto;
	      transform: translateX(-50%);
	    }

	    .step-item {
	      width: 150px;
	      height: 150px;
	    }

	    .step-title {
	      font-size: 13px;
	    }
	.action-container {
         margin-top: 40px;
	    }
	  }