/* ====== Layout ====== */
    .page-wrapper {
      background-color: #f6f7fb;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px 20px;
    }

    /* ====== Verification Box ====== */
/* ====== BOX ====== */
.verification-container {
  background: white;
  width: 100%;
  max-width: 820px;
  padding: 30px;
  border-radius: 14px;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.12);
}

/* Form Labels */
.verification-label {
  display: block;
  margin-top: 15px;
  font-size: 17px;
  color: #555;
  font-weight: 600;
}

.verification-label.required::after {
  content: " *";
  color: red;
}

/* Inputs */
.verification-select {
  width: 100%;
  padding: 11px;
  border: 1px solid #ccc;
  border-radius: 8px;
  outline: none;
  font-size: 15px;
  margin-top: 7px;
}

.verification-select:focus {
  border-color: #1e90ff;
}

/* INVALID RED BORDER */
.invalid {
  border-color: red !important;
}

/* Upload Area */
.verification-upload-area {
  padding: 25px;
  border: 2px dashed #aaa;
  border-radius: 10px;
  background: #fafafa;
  cursor: pointer;
  text-align: center;
  margin-top: 10px;
}

.verification-upload-area.dragover {
  background: #e7f3ff;
  border-color: #1e90ff;
}

.verification-preview {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.verification-preview-item {
  border: 1px solid #ddd;
  padding: 5px;
  background: #fff;
  border-radius: 8px;
  position: relative;
}

.verification-preview-item img {
  width: 100%;
  max-height: 140px;
  object-fit: contain;
}

.verification-remove-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  border: none;
  background: rgb(243, 50, 39);
  color: white;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  cursor: pointer;
}

/* Messages */
.verification-error,
.verification-warning {
  color: red;
  margin-top: 8px;
  font-size: 14px;
}

.verification-result {
  margin-top: 20px;
  font-weight: 600;
  font-size: 17px;
}

.verification-success {
  color: #28a745 !important;
}

/* Submit Button */
.verification-button {
  width: 100%;
  padding: 14px;
  border: none;
  background: #1e90ff;
  color: white;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  margin-top: 25px;
}

.verification-button:disabled {
  background: #a8c9f3;
  cursor: not-allowed;
}
    /* ====== Support Section ====== */
    .support-section {
      width: 100%;
      max-width: 1150px;
      background: transparent;
    }

    .faq-box {
      background: #fff;
      border-radius: 12px;
      padding: 20px 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }
.faq-box p {
  font-size: 0.95rem;
  color: #444;
  line-height: 1.6;
}

.faq-box p strong {
  display: inline-block;
  margin-bottom: 4px; /* 👈 Adds small gap after <strong> */
  font-size: 1rem;
  color: #000;
}

    .faq-btn {
      background: rgba(92, 92, 246, 0.1);
      color: #221fda;
      border: none;
      padding: 10px 18px;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 500;
      transition: 0.3s ease;
      font-size: 14px;
       font-weight: 600;
    }
    .faq-btn a{
      text-decoration: none;
    }


    .support-cards {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .support-card {
      flex: 1;
      min-width: 250px;
      background: #fff;
      border-radius: 12px;
      padding: 25px;
      text-align: left;
      box-shadow:0 4px 25px rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: flex-start;
      gap: 15px;
    }

    .support-icon {
      font-size: 24px;
      color: #6a4ff6;
      background: rgba(102, 92, 246, 0.1);
      padding: 10px;
      border-radius: 8px;
    }

    .support-card h3 {
      font-size: 1rem;
      margin-bottom: 5px;
      color: #222;
    }

    .support-card p {
      color: #555;
      font-size: 0.9rem;
    }
    .support-card p a {
      text-decoration: none;
      cursor: pointer;
    }

    @media (max-width: 800px) {
      .support-cards {
        flex-direction: column;
      }
      .faq-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }
      .verification-container h2{
        font-size: 1.4rem;
      }
      .verification-label{
        font-size: 16px;
      }
        .verification-success {
      font-size: 15px;
    }

    }

     /* ✅ Main Section Container */
    .verification-section {
      background: #f3f6fa;
      width: 100%;
      max-width: 1200px;
      padding: 40px 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Desktop Grid Layout */
    .verification-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 25px;
      width: 100%;
      max-width: 1200px;
    }

    .verification-card {
      background: #fff;
      border-radius: 18px;
      padding: 30px 25px;
      text-align: left;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
      transition: all 0.35s ease;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-width: 260px;
      scroll-snap-align: start;
    }

    .verification-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(120deg, #1e90ff, #0077cc);
      transition: 0.4s ease;
      z-index: 0;
    }

    .verification-card:hover::before {
      left: 0;
    }

    .verification-card:hover {
      transform: translateY(-6px);
      color: #fff;
    }

    .verification-content {
      position: relative;
      z-index: 1;
      flex: 1;
    }

    .verification-content i {
      font-size: 2.2rem;
      color: #1e90ff;
      margin-bottom: 10px;
      transition: color 0.4s;
      display: block;
    }

    .verification-card:hover .verification-content i {
      color: #fff;
    }

    .verification-content h3 {
      font-size: 1.3rem;
      margin-bottom: 6px;
      transition: color 0.4s;
    }

    .verification-content p {
      font-size: 0.95rem;
      color: #555;
      transition: color 0.4s;
    }

    .verification-card:hover .verification-content p {
      color: #f1f1f1;
    }

    /* ➡️ Arrow Icon */
    .verification-arrow {
      position: relative;
      font-size: 1.5rem;
      color: #1e90ff;
      margin-left: 15px;
      transition: all 0.4s ease;
      z-index: 1;
    }

    .verification-card:hover .verification-arrow {
      color: #fff;
      transform: translateX(8px);
    }

    /* ✅ Tablet */
    @media (max-width: 768px) {
      .verification-card {
        padding: 25px 20px;
      }

      .verification-content i {
        font-size: 2rem;
      }
    }

    /* ✅ Mobile Horizontal Scroll Layout */
    @media (max-width: 900px) {
      .verification-section {
        padding: 30px 10px;
      }

      .verification-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 15px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
      }

      .verification-grid::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
      }

      .verification-card {
        flex: 0 0 85%; /* Card width on mobile */
        flex-direction: column;
        align-items: flex-start;
      }

      .verification-arrow {
        margin-top: 10px;
        align-self: flex-end;
      }
    }


    .verification-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 15px;
}