.info-budge {
  background-color: var(--color-section-bg);
  border-radius: 9px;
  color: var(--color-warn);
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-align: center;
}

.default-title-section {
  margin: 0 auto 1rem;
  text-align: center;
}

.tier-info-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 2rem;
  margin: 2rem 0;
}

.tier-info-card {
  background: var(--color-section-bg);
  border-radius: var(--border-radius);
  padding: 2rem;
  text-align: center;
  transition: transform 0.3s ease;
  border: 1px solid var(--color-dark-opacity);
  width: 330px;
  height: 415px;
}

.tier-info-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-pink);
}

.tier-info-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: var(--color-pink);
}

.tier-info-title {
  color: var(--color-white);
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.tier-info-description {
  color: var(--color-light-gray);
  margin-bottom: 1.5rem;
  line-height: 1.6;
  height: 130px;
}

.guide-section {
  background: var(--color-section-bg);
  border-radius: var(--border-radius);
  padding: 2rem;
  margin: 2rem 0;
}

.guide-steps {
  display: flex;
  gap: 2rem;

  margin-top: 2rem;
}

.guide-step {
  display: flex;
  align-items: center;
  gap: 1rem;

  background: var(--color-section-bg);
  border-radius: var(--border-radius);
  padding: 2rem;
  text-align: center;
  border: 1px solid var(--color-dark-opacity);
  height: 300px;
}

.guide-step-number {
  /* background: var(--color-pink); */
  color: var(--color-light-gray);
  width: 50px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.9rem;
  margin: auto 0;
  border-right: 1px solid var(--color-dark-opacity);
}

.guide-step-content {
  flex: 1;
  /* margin-bottom: 1rem; */
}

.guide-step-content p {
  color: var(--color-secondary);
}

.section-desc {
  margin-top: -10px;
  color: var(--color-light-gray);
  text-align: center;
}


@media (max-width: 768px) {
  .tier-info-grid {
    font-size: var(--mobile-fs) !important;
  }

  .tier-info-grid i {
    font-size: 1.5rem;
  }
  
  .guide-steps {
    font-size: var(--mobile-fs) !important;
  }
  
  .guide-steps h4 {
    font-size: 1.1rem;
  }

  .guide-step {
    height: 230px;
  }
}

@media (max-width: 500px) {
  .guide-steps {
    flex-direction: column;
  }

  .guide-step {
    padding: 1.2rem;
    height: 150px;
  }

  .guide-section {
    padding: 1rem;
  }

  .tier-info-grid {
    flex-direction: column;
  }

  .tier-info-card {
    position: relative;
    display: flex;
    justify-content: center;
    height: 170px !important;
    padding: 1rem;
    gap: .5rem;
  }

  .tier-info-title, .tier-info-icon, .btn-outline {
    margin: 0;
    height: 55px;
  }

  .btn-outline {
    width: 160px;
  }

  .tier-info-icon, .tier-info-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .tier-info-description {
    position: absolute;
    top: 90px;
  }

  .tier-info-card h3 {
    font-size: 1.1rem;
  }
}