.mix-right-left-content{
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.stepper-container-eventHub-design {
  margin-left: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  width: 100%;
}
.stepper-eventHub {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-top: 0;
}

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

}
 
.step {
  width: 35px;
  height: 35px;
  background-color: #00863c;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  z-index: 1;
  flex-shrink: 0;
}

.line {
  width: 3px;
  margin: 0.8rem auto;
}

.green-line {
  background-color: #00863c;
  height: 265px;
}

/* Red Dotted Lines with Different Heights */
.red-line-1 {
  border-left: 3px dotted #00863c;
  height: 126px;
}

.red-line-1-completed {
  background-color: #00863c;
  height: 126px;
}
.red-line-1-completed-booster {
  background-color: #00863c;
  height: 126px;
}

.red-line-2 {
  border-left: 3px dotted #00863c;
  height: 129px;
}

.red-line-2-completed {
  background-color: #00863c;
  height: 129px;
}

.red-line-3 {
  border-left: 3px dotted #00863c;
  height: 248px;
}

.red-line-3-completed {
  background-color: #00863c;
  height: 248px;
}

.red-line-4 {
  border-left: 3px dotted #00863c;
  height: 350px;
}

.red-line-4-completed {
  background-color: #00863c;
  height: 350px;
}

.red-line-5-with-url {
  border-left: 3px dotted #00863c;
  height: 194px;
}

.red-line-5-with-url-completed {
  background-color: #00863c;
  height: 194px;
}

/* Desktop - Large Screens (1200px+) */
@media (min-width: 1200px) {
 
  .postcode-input {
    width: 100%;
    font-size: 1rem;
  }

  .small-border {
    width: 100%;
  }
}

/* Medium-Large Screens (1024px - 1199px) */
@media (min-width: 1024px) and (max-width: 1199px) {
 

  .small-border {
    width: 100%;
    max-width: 600px;
  }

  .postcode-input {
    width: 80%;
    font-size: 0.95rem;
  }

  .postcode-input::placeholder {
    font-size: 0.9rem;
  }

  img[src="/right-arrow.png"] {
    right: 120px !important;
  }

  div.flex.items-center.gap-1.absolute {
    right: 120px !important;
  }

  .primary-para-eventhubcreation {
    font-size: 0.95rem;
  }

  .primary-heading {
    font-size: 1.8rem;
  }

  .secondary-heading {
    font-size: 1.5rem;
  }

  .tertiary-heading {
    font-size: 1.15rem;
  }

 
  .red-line-1,
  .red-line-1-completed {
    height: 120px;
  }

  .red-line-2,
  .red-line-2-completed {
    height: 125px;
  }

  .red-line-3,
  .red-line-3-completed {
    height: 240px;
  }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
 

  .postcode-input {
    width: 85%;
    font-size: 0.95rem;
  }

  .small-border {
    width: 100%;
    max-width: 500px;
  }

  img[src="/right-arrow.png"] {
    right: 115px !important;
    /* right: 80px !important; */
  }

  div.flex.items-center.gap-1.absolute {
    right: 82px !important;
  }

  .primary-heading {
    font-size: 1.7rem;
  }

  .secondary-heading {
    font-size: 1.4rem;
  }

  .tertiary-heading {
    font-size: 1.1rem;
  }

  .step {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }

 

  .green-line {
    height: 390px;
  }

  .red-line-1,
  .red-line-1-completed {
    height: 123px;
  }

  .red-line-2,
  .red-line-2-completed {
    height: 119px;
  }

  .red-line-3,
  .red-line-3-completed {
    height: 241px;
  }

  .red-line-4,
  .red-line-4-completed {
    height: 100px;
  }

  .red-line-5-with-url,
  .red-line-5-with-url-completed {
    height: 180px;
  }
 
}

/* Mobile Large (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
 

 

  .postcode-input {
    width: 100%;
    font-size: 0.9rem;
  }

  .small-border {
    width: 100%;
  }

  .step {
    width: 30px;
    height: 30px;
    font-size: 0.85rem;
  }

  
  .line {
    width: 3px;
    margin: 0.6rem auto;
  }

  .green-line {
    height: 265px;
  }

  .red-line-1,
  .red-line-1-completed {
    height: 100px;
  }

  .red-line-2,
  .red-line-2-completed {
    height: 105px;
  }

  

  .red-line-4,
  .red-line-4-completed {
    height: 600px;
  }

  .red-line-4-with-url,
  .red-line-4-with-url-completed {
    height: 600px;
  }

  .primary-heading {
    font-size: 1.4rem;
  }

  .secondary-heading {
    font-size: 1.2rem;
  }

  .tertiary-heading {
    font-size: 1rem;
  }

  img[src="/right-arrow.png"] {
    right: 8px !important;
  }

  div.flex.items-center.gap-1.absolute {
    right: 8px !important;
    top: 26px;
  }
}
@media (max-width: 768px) {
.stepper-container-eventHub-design{
  margin-left: 0rem;
}

}
@media (max-width: 626px) 
{
  .green-line {
height: 390px;
  }
  .postcode-input {
 
  margin-top: 1rem;

}
    img[src="/right-arrow.png"]{
     top: 26px;
    }

 
}
/* Mobile Small (up to 480px) */
@media (max-width: 480px) {
  
.mix-right-left-content{
  gap: 10px;
}


  .postcode-input {
    width: 100%;
    font-size: 0.85rem;
  }

  .step {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }

  

  .line {
    width: 2px;
    margin: 0.5rem auto;
    height: 440px;
  }

 

  .red-line-1,
  .red-line-1-completed {
    height: 90px;
  }
  .red-line-1-completed-booster {
  background-color: #00863c;
  height: 180px;
}
  .red-line-2,
  .red-line-2-completed {
    height: 95px;
  }

  .red-line-3,
  .red-line-3-completed {
    /* height: 180px; */
    height: 245px;
  }

  .red-line-4,
  .red-line-4-completed {
    height: 750px;
  }

  .red-line-5-with-url,
  .red-line-5-with-url-completed {
    height: 150px;
  }

  .primary-heading {
    font-size: 1.2rem;
  }

  .secondary-heading {
    font-size: 1rem;
  }

  .tertiary-heading {
    font-size: 0.95rem;
  }

  .imgBtn,
  .Step-2-Btn {
    padding: 0.5rem 1.5rem;
    font-size: 0.85rem;
  }

  img[src="/right-arrow.png"] {
    right: 8px !important;
  }

  div.flex.items-center.gap-1.absolute {
    right: 8px !important;
    top: 30px !important;
  }
}
/* @media (max-width : 402px) {
    .green-line{
       
        height: 570px;
    }
  } */
@media (max-width: 384px){
  .green-line{
    height: 570px;
  }
}

/* Extra Small Mobile (up to 360px) */
@media (max-width: 360px) {
  

  .step {
    width: 26px;
    height: 26px;
    font-size: 0.75rem;
  }

  

  
  .primary-heading {
    font-size: 1.1rem;
  }

  .secondary-heading {
    font-size: 0.95rem;
  }

  .tertiary-heading {
    font-size: 0.9rem;
  }
}
.step3-contentspace-top{
  padding-top: 15px;
}