.search-container {
      position: relative;
    }

    .search-input {
      height: 50px;
      border-radius: 30px;
      padding-left: 45px;
      border: none;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .search-icon {
      position: absolute;
      top: 50%;
      left: 15px;
      transform: translateY(-50%);
      color: #888;
    }

    .list-group-item.list-group-item-action {
      border-radius: 30px;
    }

    .search-wrapper {
      padding: 1rem;
      transition: transform 0.8s ease-in-out;

    }

    /* Initial fly animation */
    .search-wrapper.fly-top {
      transform: translateY(-50vh);
      /* adjust this value */
    }

    /* After animation, pin it at top */
    .search-wrapper.pinned {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      width: 50%;
      z-index: 1000;
      transition: none;
      /* prevent extra jump */
    }


    .left-borded-card {
      border-left-width: 8px !important;
    }

    .border-purple {
      border-color: #af7fe3 !important;
    }

    .text-purple {
      color: #af7fe3 !important;
    }


    html,
    body {
      height: 100%;
      margin: 0;
    }

    #root {
      min-height: 100%;
      display: flex;
      flex-direction: column;
    }

    #root>.row {
      flex: 1;
      /* pushes footer down */
    }

    footer {
      margin-top: auto;
      /* footer sticks to bottom */
    }

    .custom-gradient {
      background: linear-gradient(to bottom right, #eef2ff, #eff6ff);
    }

    /* space-y-4 → vertical spacing (1rem) */
    .custom-space-y-4>*+* {
      margin-top: 1rem;
    }

    /* space-x-3 → horizontal spacing (0.75rem) */
    .custom-space-x-3>*+* {
      margin-left: 0.75rem;
    }

    /* h-6 w-6 → 24px icon */
    .custom-icon {
      width: 1.5rem;
      height: 1.5rem;
    }

    /* Tailwind text-gray-700 (~#374151) */
    .text-secondary {
      color: #374151 !important;
    }

    /* Tailwind text-blue-600 (~#2563eb) */
    .text-primary {
      color: #2563eb !important;
    }

    .custom-space-y-4 {
      margin-top: 1.5rem;
      /* 16px */
    }
  
    /* Section spacing (py-20 px-10 in Tailwind) */
    /* section {
      padding: 5rem 2.5rem !important;
    } */

    /* Title (text-4xl, text-gray-900) */
    .section-title {
      font-size: 2.25rem;
      /* ~text-4xl */
      color: #111827;
      /* Tailwind gray-900 */
    }

    /* Card styling */
    .custom-card {
      background: #fff;
      color: #111827;
      border-radius: 1rem;
      /* rounded-2xl */
      border: 1px solid #e5e7eb;
      /* gray-200 */
      padding: 2rem;
      /* p-8 */
      text-align: left;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
      /* shadow-xl */
      transition: transform 0.3s ease;
    }

    .custom-card:hover {
      transform: scale(1.05);
    }

    /* Icon circle */
    .icon-circle {
      width: 3.5rem;
      /* h-14 */
      height: 3.5rem;
      /* w-14 */
      border-radius: 50%;
      margin-bottom: 1.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .custom-icon {
      width: 2rem;
      /* h-8 */
      height: 2rem;
      /* w-8 */
    }

    /* Custom text colors */
    .text-indigo {
      color: #4f46e5 !important;
      /* Tailwind indigo-600 */
    }

    /* Links */
    .custom-link {
      color: #2563eb;
      /* Tailwind blue-600 */
      font-weight: 600;
      text-decoration: none;
    }

    .custom-link:hover {
      text-decoration: underline;
    }

    .min-h-screen {
      min-height: 100vh;
    }

    .p-10 {
      padding: calc(var(--spacing) * 10);
    }

    .py-20 {
      padding-block: calc(var(--spacing) * 20);
    }

    .px-10 {
      padding-inline: calc(var(--spacing) * 10);
    }

    .masked-input-bg {
      background: #eff6ff !important;
      color: #212529;
    }

    .masked-input-bg:hover{
      color: #6c757d
    }

    .text-violet-900 {
      color:#4d179a
    }

    .custom-card {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 1rem;
      /* rounded-2xl */
      padding: 2rem;
      text-align: left;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
    }

    .custom-card:hover {
      transform: scale(1.05);
    }

    .custom-card-icon {
      height: 3.5rem;
      width: 3.5rem;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.5rem;
    }

    .custom-card .icon {
      height: 2rem;
      width: 2rem;
    }

    .custom-btn {
      border-radius: 0.75rem;
      padding: 0.75rem;
      font-weight: 600;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }

    .custom-btn:hover {
      background-color: #2563eb !important;
      /* Tailwind blue-700 */
    }

    .custom-list li {
      display: flex;
      align-items: center;
      color: #4b5563;
      /* text-gray-600 */
      margin-bottom: 0.5rem;
    }
  
    .custom-card {
      border: 1px solid #e5e7eb;
      border-radius: 1rem;
      padding: 2rem;
      box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
    }

    .custom-btn {
      border-radius: .75rem;
      padding: .75rem;
      font-weight: 600;
      box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
    }

    .custom-list li {
      display: flex;
      align-items: center;
      color: #4b5563;
      margin-bottom: .5rem;
    }

    /* Drop-in animation for the collapsing content */
    .collapse-drop .drop-inner {
      transform: translateY(-10px);
      opacity: 0;
      transition: transform .35s ease, opacity .35s ease;
    }

    /* We add .drop-in via JS on show, remove on hide */
    .collapse-drop .drop-inner.drop-in {
      transform: translateY(0);
      opacity: 1;
    }
  
    /* Smooth collapse animation */
    .collapse.collapse-drop {
      transition: height 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
      opacity: 0;
      transform: translateY(0px);
    }

    .collapse.collapse-drop.show {
      opacity: 1;
      transform: translateY(0);
    }

    .about-section {
      background-color: #f9fafb;
      /* Tailwind bg-gray-50 */
      padding-top: 5rem;
      /* py-20 */
      padding-bottom: 5rem;
      padding-left: 2.5rem;
      /* px-10 */
      padding-right: 2.5rem;
    }

    .about-container {
      max-width: 768px;
      /* Tailwind max-w-3xl */
      margin: 0 auto;
    }

    .about-title {
      font-size: 2.25rem;
      /* Tailwind text-4xl */
      font-weight: 700;
      /* font-bold */
      color: #111827;
      /* Tailwind text-gray-900 */
    }

    .about-text {
      font-size: 1.125rem;
      /* Tailwind text-lg */
      line-height: 1.75rem;
      /* leading-relaxed */
      color: #374151;
      /* Tailwind text-gray-700 */
    }