:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-bba172a *//* ==========================================
   BASTI NIKAH - PREMIUM TIMELINE
========================================== */

.bn-how-section {
  position: relative;
  padding: 100px 20px;
  background:
    radial-gradient(circle at 10% 10%, rgba(212,175,55,.10), transparent 30%),
    radial-gradient(circle at 90% 80%, rgba(11,61,145,.08), transparent 30%),
    #f8fafc;
}

.bn-how-container {
  max-width: 1200px;
  margin: auto;
}


/* Heading */

.bn-how-heading {
  text-align: center;
  margin-bottom: 55px;
}

.bn-how-heading span {
  color: #c79f2b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 4px;
}

.bn-how-heading h2 {
  margin: 8px 0;
  color: #0b3d91;
  font-size: 46px;
  font-weight: 800;
}

.bn-how-heading p {
  margin: 0;
  color: #6b7280;
  font-size: 18px;
}


/* ==========================================
   TOP FLOW
========================================== */

.bn-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;

  padding: 20px 25px;
  margin-bottom: 85px;

  background: #ffffff;
  border-radius: 100px;

  box-shadow:
    0 15px 40px rgba(11,61,145,.08);

  border: 1px solid rgba(212,175,55,.25);
}

.bn-flow-step {
  display: flex;
  align-items: center;
  gap: 7px;

  color: #0b3d91;
  font-size: 12px;
  font-weight: 700;
}

.bn-flow-step b {
  width: 30px;
  height: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #0b3d91;
  color: #ffffff;

  font-size: 10px;
}

.bn-flow i {
  font-style: normal;
  color: #d4af37;
  font-size: 20px;
  font-weight: bold;
}


/* ==========================================
   TIMELINE
========================================== */

.bn-timeline {
  position: relative;
  max-width: 1000px;
  margin: auto;
}

.bn-timeline::before {
  content: "";
  position: absolute;

  left: 50%;
  top: 0;
  bottom: 0;

  width: 3px;

  transform: translateX(-50%);

  background: linear-gradient(
    to bottom,
    #d4af37,
    #0b3d91,
    #d4af37
  );
}


/* Timeline Item */

.bn-timeline-item {
  position: relative;

  width: 50%;

  padding: 0 55px 70px 0;

  display: flex;
  justify-content: flex-end;
}

.bn-timeline-item.bn-right {
  margin-left: 50%;
  padding: 0 0 70px 55px;

  justify-content: flex-start;
}


/* Number */

.bn-number {
  position: absolute;

  top: 0;
  right: -27px;

  width: 54px;
  height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #0b3d91;
  color: #ffffff;

  font-size: 15px;
  font-weight: 800;

  border: 5px solid #f8fafc;

  box-shadow:
    0 0 0 2px #d4af37,
    0 8px 20px rgba(11,61,145,.20);

  z-index: 2;
}

.bn-right .bn-number {
  left: -27px;
  right: auto;
}


/* Content Card */

.bn-info {
  width: 100%;
  max-width: 430px;

  padding: 30px;

  background: #ffffff;

  border-radius: 18px;

  border-top: 3px solid #d4af37;

  box-shadow:
    0 12px 35px rgba(11,61,145,.08);

  transition: .35s ease;
}

.bn-info:hover {
  transform: translateY(-6px);

  box-shadow:
    0 20px 45px rgba(11,61,145,.14);
}

.bn-info small {
  color: #c49a28;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
}

.bn-info h3 {
  margin: 8px 0 10px;

  color: #0b3d91;

  font-size: 21px;
  line-height: 1.35;
}

.bn-info p {
  margin: 0;

  color: #626b78;

  font-size: 15px;
  line-height: 1.75;
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {

  .bn-how-section {
    padding: 65px 15px;
  }

  .bn-how-heading h2 {
    font-size: 34px;
  }

  .bn-how-heading p {
    font-size: 16px;
  }


  /* Flow */

  .bn-flow {
    border-radius: 18px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 14px;

    margin-bottom: 55px;
  }

  .bn-flow i {
    display: none;
  }


  /* Timeline */

  .bn-timeline::before {
    left: 25px;
    transform: none;
  }

  .bn-timeline-item,
  .bn-timeline-item.bn-right {
    width: 100%;

    margin-left: 0;

    padding:
      0
      0
      40px
      65px;

    justify-content: flex-start;
  }


  /* Number */

  .bn-number,
  .bn-right .bn-number {
    left: 0;
    right: auto;

    width: 50px;
    height: 50px;

    border-width: 4px;
  }


  /* Card */

  .bn-info {
    max-width: 100%;
    padding: 24px 20px;
  }

  .bn-info h3 {
    font-size: 18px;
  }

  .bn-info p {
    font-size: 14px;
  }

}/* End custom CSS */