.attestation-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 2.5rem;
}

.attestation-steps .step {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 20px;
  width: 160px;
  position: relative;
  flex: 1 1 auto;
  max-width: 170px;
  text-align: center;
  margin-bottom: 15px;
}

.attestation-steps .step .icon {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: #DC0A37;
  color: white;
  border-radius: 50%;
  width: clamp(1.75rem, 1.6429rem + 0.5357vw, 2.125rem);
  height: clamp(1.75rem, 1.6429rem + 0.5357vw, 2.125rem);
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px #f9f9f9;
}

.attestation-steps .step svg {
  width: clamp(3.125rem, 2.9464rem + 0.8929vw, 3.75rem);
  height: clamp(3.125rem, 2.9464rem + 0.8929vw, 3.75rem);
  margin: clamp(1.25rem, 1.0714rem + 0.8929vw, 1.875rem) 0 10px;
}

.attestation-steps .step p {
  font-size: clamp(0.875rem, 0.8393rem + 0.1786vw, 1rem);
  font-weight: 500;
  line-height: 1.4;
  color: #1D1616;
}

/* Responsive Design */
@media (max-width: 768px) {
  .attestation-steps {
    justify-content: space-around;
  }
}

@media (max-width: 480px) {
  .attestation-steps .step {
    width: 100%;
    max-width: 100%;
  }
}

.dropdown-menu.select-attestation {

  div[data-value] {
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    margin-bottom: 0px !important;
    transition: background-color 0.2s;
  }

  div[data-value]:is(:hover, :focus-within) {
    background-color: #ffe3e3;
    color: #dc1a3f;
  }

  div[data-value].selected {
    background-color: #ffe3e3;
    color: #dc1a3f;
  }

}

.visa-fee-summary.attestatioon-fee {
  box-shadow: 0px 0px 28px 0px #DC0A3729;
  border: 1px solid #DC0A37;
}