.step-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white; }

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative; }

.circle {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: #878787;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: white; }

.step.done .circle {
  background-color: #98c23e; }

.step.current .circle {
  background-color: #363636;
  border: 6px solid #878787;
  width: 43px;
  height: 43px; }

.label {
  margin-top: 8px;
  font-size: 18px; }

.bar {
  width: 60px;
  height: 6px;
  margin-top: -26px;
  background-color: #878787;
  margin-left: -7px;
  margin-right: -1px; }

.bar.done {
  background-color: #98c23e; }

/* === Tick Mark Animation === */
.step .check-icon {
  display: none; }

.step.done .check-icon {
  display: block;
  animation: popIn 0.2s ease-out; }

@keyframes popIn {
  from {
    transform: scale(0.6);
    opacity: 0; }
  to {
    transform: scale(1);
    opacity: 1; } }
/* === Step Transition Animation === */
.step.transition-in {
  animation: stepFadeIn 0.3s ease-out; }

@keyframes stepFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9); }
  to {
    opacity: 1;
    transform: scale(1); } }
/* === Initial Slide-In Animation (for input + progress bar) === */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px); }
  to {
    opacity: 1;
    transform: translateX(0); } }
.slide-in-right {
  opacity: 0;
  animation: slideInRight 0.15s ease-out forwards; }

.gp-input-group-pb-name .material-input,
.gp-input-group-pb-email .material-input {
  border-left: 0; }

.gp-input-group-pb-name .material-input label,
.gp-input-group-pb-email .material-input label {
  text-align: left !important; }

@media only screen and (max-width: 767px) {
  .gp-input-group-pb-name .material-input label,
  .gp-input-group-pb-email .material-input label {
    text-align: center !important; } }
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px); }
  to {
    opacity: 1;
    transform: translateX(0); } }
.slide-in-left {
  opacity: 0;
  animation: slideInLeft 0.15s ease-out forwards; }