:root {
      --royal-blue: #1E3A8A;
      --emerald-green: #22C55E;
    }
body {
    background-color: #fff;
    color: #3e4957;
    transition-timing-function: linear;
    transition-delay: 0s;
}
.link-stack {
    background-color: #fff;
    margin-top: 5px;
    padding-top: 5px;
    margin-bottom: 50px;
    padding-bottom: 50px;
}
h1, h2, h3, h4, h5, h6{
	color:#1E3A8A;
}
.footer-bg{
	background:#F3F4F6;
}
 
 p.text-center.lead {
    font-size: 16px;
    font-weight: 400;
}
.hvr-sweep-to-top:before {
    background: #1E3A8A;
}

/* Container style */
.qta {
  display: flex;
  align-items: center;
  justify-content: left;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.15); /* semi-transparent */
  border-radius: 1rem; /* iOS-style rounded corners */
  backdrop-filter: blur(10px) saturate(180%); /* glass blur effect */
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.25); /* subtle border */
  text-decoration: none;
  color: #111827; /* dark text for readability */
  font-weight: 300;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

/* Icon */
.qta i {
  font-size: 1.25rem;
  color: #1E3A8A; /* Navy primary */
  transition: color 0.3s ease;
}

/* Text */
.qta span {
  font-size: 1rem;
  color: #111827;
}

/* Hover effect */
.qta:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  background: rgba(255, 255, 255, 0.25);
  text-decoration: none;
}

.qta:hover i {
  color: #22C55E; /* Green accent on hover */
}

/* Form Container */
form {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 1.25rem; /* iOS-style rounded corners */
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 2rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

/* Headline */
form h1,
.text-center h1 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  color: #1E3A8A; /* Navy trust color */
  margin-bottom: 1.5rem;
}

/* Input fields */
.qri.form-control,
.qri.form-select {
  border-radius: 0.75rem;
  border: 1px solid rgba(30, 58, 138, 0.3); /* soft navy */
  background: rgba(255, 255, 255, 0.7);
  color: #111827; /* dark text */
  padding: 0.75rem 1rem;
  font-size: 1rem;
  transition: all 0.3s ease-in-out;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}

.qri.form-control:focus,
.qri.form-select:focus {
  border-color: #22C55E; /* Emerald accent */
  box-shadow: 0 0 0 0.25rem rgba(34, 197, 94, 0.25);
  background: rgba(255, 255, 255, 0.9);
  outline: none;
}

/* Placeholder text */
.qri::placeholder {
  color: #6B7280; /* muted Mercury gray */
  font-size: 0.95rem;
}

/* Dropdown (select) */
.qri.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23111827' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
  padding-right: 2.5rem;
}

/* Submit Button */
.btn-qr-dwn {
    width: 60%;
    height: 50px;
}
.btn-qr, .btn-qr-dwn {
  background-color: #E11D48; /* Mars red-orange */
  border: none;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 0.75rem 2rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.25);
  height: auto;
}

.btn-qr:hover, .btn-qr-dwn:hover {
  background-color: #B91C40; /* darker Mars red */
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(225, 29, 72, 0.4);
}

/* Help blocks (errors, validation) */
.help-block.with-errors {
  font-size: 0.85rem;
  color: #DC2626; /* red error */
  margin-top: 0.25rem;
}
.main {
    background-color: #fff;
    margin-top: 20px;
    padding-top: 30px;
    margin-bottom: 50px;
    padding-bottom: 50px;
}
.qta span {
  font-size: clamp(0.875rem, 2vw, 1rem);
  color: #111827;
}
.btn{
    border-radius:20px;
}
.btn-login{
    background:#22C55E;
}
 .qr-steps {
      padding: 80px 20px;
      text-align: center;
      max-width: 1200px;
      margin: 0 auto;
    }
    .qr-steps h2 {
      font-size: 40px;
      color: var(--royal-blue);
      margin-bottom: 60px;
    }
    .steps-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 40px;
    }
    .step-card {
      background: #FFFFFF;
      border-radius: 20px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.05);
      padding: 60px 30px 40px;
      width: 300px;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .step-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 12px 32px rgba(0,0,0,0.08);
    }
    .step-circle {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      color: #fff ;
      font-weight: 700;
      font-size: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: -30px;
      left: 50%;
      transform: translateX(-50%);
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    .step1 .step-circle { background: var(--emerald-green); }
    .step2 .step-circle { background: var(--royal-blue); }
    .step3 .step-circle { background: var(--emerald-green); }
    .step-card img {
      width: 120px;
      height: 120px;
      margin-top: 20px;
    }
    .step-card h3 {
      margin-top: 30px;
      font-size: 22px;
      color: var(--royal-blue);
      font-weight: 700;
    }
    .step-card p {
      margin-top: 10px;
      font-size: 16px;
      color: #4B5563;
      line-height: 1.4;
    }
    @media (max-width: 768px) {
      .step-card {
        width: 100%;
        padding: 60px 20px 40px;
      }