.ib_broker_container::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/hero_mobile_bg.png"); 
  background-size: cover;          
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.1;  
  z-index: 1;
}
.ib_broker_container{
    background: none;
    position: relative;
  width: 100%;
  height: 80vh;
  overflow: visible;
}

.ib_broker_form{
  border: 1px solid rgba(69, 39, 1, 1);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border-radius: 15px;
}

.form-label{
  margin-bottom:3px!important
}


.start_journey_text{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    font-family: 'Geist', sans-serif;
    font-weight: 900;
    font-size: 224px;
    /* line-height: 100%; */
    letter-spacing: -0.5px;
    text-align: center;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.05); 
    white-space: wrap; 
    pointer-events: none; 
}

.ib_card_img{
  position: absolute;
  width: 30%;
 
  z-index:-1;
}

.acc-card:first-child .ib_card_img {
  top: 0;
  right: 0;
}

.acc-card:not(:first-child) .ib_card_img {
  top: 10px;
  right: 10px;
}

.start_journey_elipse_center {
  position: absolute;
  top: -3%;
  left: 50%;
  background: rgba(211, 174, 55, 1);
  filter: blur(200px);
  width:200px;
  height:200px;
    z-index:5
}
.start_journey_elipse_right {
position: absolute;
  top: 10%;
  right: 10%;
  z-index:5;
  background: rgba(211, 174, 55, 1);
  filter: blur(100px);
  width:100px;
  height:100px;
}
.start_journey_elipse_bottom {
  position: absolute;
  bottom: 20%;
  left: 15%;
    transform: translateY(-50%);
    z-index:5;
    background: rgba(211, 174, 55, 1);
filter: blur(100px);
width:100px;
height:100px;

}


.ib_join_container{
 background: linear-gradient(180deg, #100D08 0%, #040302 24.53%, #020101 50.42%, #0D0902 73.82%, #130E02 83.62%, #191303 100%);
    z-index: 1;

  border-radius: 30px;
  cursor: pointer;
  position: relative;
  overflow: hidden;     
  
    z-index: -1;
}

.ib_join_container::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px; 
    border-radius: inherit;

    background: linear-gradient(
        360deg,
        #D3AE37 0%,
        #E8E8E8 100%
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;

}

@media(max-width:1199px){
  .start_journey_text{
    display: none;
  }

  .start_journey_elipse_center{
    top:5%;

  }

  .ib_broker_container{
    height: 100vh!important;
}   
}

/* how it works  */
.how-it-works {
   padding: 40px 0px 140px;
   position: relative;
   overflow: hidden;
}

.how-it-works-wrapper {
   position: relative;
}

.how-it-works__inner {

   position: relative;
     width: 100%;
  padding-left: 20px;   
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .how-it-works__inner {
    padding-left: 50px;
    padding-right: 50px;
  }


}

@media (min-width: 1024px) {
  .how-it-works__inner {
    padding-left: 60px;
    padding-right: 60px;
  }

  
}

@media (min-width: 1440px) {
  .how-it-works__inner {
    max-width: calc(100vw - 326px); 
    padding-left: 0;
    padding-right: 0;
  }

   
}

.how-it-works__eyebrow {
   font-size: 54px;
   letter-spacing:-0.5px;
   color: #FFFFFF;
   margin-bottom: 40px;
   font-weight: 500;
   text-transform: uppercase;
}

.how-it-works__layout {
   display: grid;
   grid-template-columns: 380px 1fr;
   gap: 40px;
   align-items: center;
   position: relative;
   z-index: 2;
}

.steps {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.step-card {
   background: '#140D04';
   border-radius: 14px;
   padding: 18px 20px;
   box-shadow: 0 4px 20px rgba(208, 170, 80, 0.05);
   backdrop-filter: blur(2px);
   border: 1px solid rgba(208, 170, 80, 0.2);
   transition: border-color 0.4s, background 0.4s, box-shadow 0.4s;
}

.step-card:hover {
   border-color: rgba(208, 170, 80, 0.4);
   cursor: pointer;
}

.step-card__label {
   display: block;
   color: #d6b15b;
   font-size: 12px;
   letter-spacing: 1px;
   margin-bottom: 8px;
}

 textarea.form-control{
      border-radius: 20px!important;
   }

.step-card__title {
   font-size: 18px;
   margin-bottom: 8px;
}

.step-card__copy {
   color: rgba(247, 242, 231, 0.75);
   font-size: 13px;
   line-height: 1.2;
}

.flow {
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   padding-left: 20%;
}

.flow__node {
   width: 140px;
   height: 140px;
   border-radius: 24px;
   background: linear-gradient(180deg, #140D04 0%, #362809 100%);

   border: 1px solid #755A37;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   z-index: 3;
   box-shadow: 0px 4px 100px 0px #D4AF374D;

}

.flow__check {
   width: 64px;
   height: 64px;
   border-radius: 50%;
   background: #ffffff;
   color: #2b200b;
   font-size: 32px;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.4s;
}

.flow__check.check-shade-1 {
   background: #f0e2b8;
}

.flow__check.check-shade-2 {
   background: #e3cb8e;
}

.flow__check.check-shade-3 {
   background: #d6b15b;
}

.flow__check.check-shade-4 {
   background: #c9a23a;
}

.actions {
   display: none;
}

.action-icon {
   width: 45px;
   height: 45px;
   border-radius: 12px;
   background: #1a1208;
   border: 1px solid rgba(210, 176, 86, 0.5);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   box-shadow: 0 12px 22px rgba(0, 0, 0, 0.4);
   position: absolute;
   z-index: 4;
   transition: border-color 0.3s, box-shadow 0.3s;
}

.action-icon svg {
   stroke: #ffffff;
   transition: stroke 0.3s;
}

.action-icon.active {
   border-color: rgba(214, 177, 91, 0.9);
   box-shadow: 0 0 20px rgba(214, 177, 91, 0.4);
}

.action-icon svg {
   fill: #ffffff;
   width: 26px;
   height: 26px;
}

.action-icon.active svg {
   stroke: #d6b15b;
   fill: #d6b15b;
}

.flow-lines {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
   pointer-events: none;
   overflow: visible;
}

.step-card.step-active {
   border-color: rgba(214, 177, 91, 0.6);
   background: linear-gradient(135deg, rgba(70, 52, 14, 0.85), rgba(23, 18, 8, 0.8));
}

.step-card.step-done {
   border-color: rgba(214, 177, 91, 0.4);
   background: linear-gradient(135deg, rgba(70, 52, 14, 0.5), rgba(23, 18, 8, 0.6));
}

.slider-dots {
   display: none;
   justify-content: center;
   align-items: center;
   gap: 10px;
   margin-top: 24px;
}

.slider-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   border: 1px solid rgba(214, 177, 91, 0.4);
   background: transparent;
   cursor: pointer;
   padding: 0;
   transition: all 0.3s ease;
}

.slider-dot.active {
   background: #d6b15b;
   border-color: #d6b15b;
   transform: scale(1.3);
}

@media (max-width: 1040px) {
   .action-icon {
      width: 30px;
      height: 30px;
      border-radius: 8px;
   }

   .action-icon svg {
      width: 16px;
      height: 16px;
   }
}

@media (max-width: 767px) {

   .submit_btn{
      font-size:11.77px;
      line-height: 8.82px;
      letter-spacing: -0.25px;
      padding:9.8px 35px;
   }

  

   .start_journey_elipse_center{
      width: 100px;
      height: 100px;
      filter: blur(100px);
      left: 70%;
   }

   .start_journey_elipse_right{
      filter: blur(70px);
    width: 80px;
    height: 80px;
   }

   .start_journey_elipse_bottom{
       filter: blur(70px);
    width: 80px;
    height: 80px;
   }
   
   .how-it-works {
      padding: 40px 0 60px;
   }

   .how-it-works__header {
      padding: 0 20px;
   }

   .how-it-works__layout {
      grid-template-columns: 1fr;
      gap: 0;
   }

   .steps {
      display: flex;
      flex-direction: row;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      gap: 16px;
      padding: 0 20px 16px;
      scrollbar-width: none;
   }

   .steps::-webkit-scrollbar {
      display: none;
   }

   .step-card {
      min-width: calc(100% - 20px);
      /* flex-shrink: 0; */
      scroll-snap-align: start;
   }

   .flow {
      padding-left: 0;
      justify-content: center;
      min-height: 220px;
      margin-top: 24px;
   }

   .flow__node {
      width: 100px;
      height: 100px;
      border-radius: 18px;
   }

   .flow__check {
      width: 46px;
      height: 46px;
      font-size: 24px;
   }

   .action-icon {
      width: 32px;
      height: 32px;
      border-radius: 9px;
   }

   .action-icon svg {
      width: 18px;
      height: 18px;
   }

   .slider-dots {
      display: flex;
      margin-top: 16px;
      padding: 0 20px;
   }
   .how-it-works__eyebrow {
    font-size: 28px;
   }
}