@import "tailwindcss";

@theme {
  --color-blue: #2563eb;
  --color-blue-200: #bfdbfe;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #145aff;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #4b5563;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-slate-950: #020617;
  --color-black-900: #040a16;
  --color-black: #040e22;
}

@layer components {
  .btn-one {
    @apply bg-[#F3F4F6] text-[#0F172A] text-[15px] font-medium px-11 py-3 rounded-full inline-block text-center;
  }

  .btn-two {
    @apply bg-[#2563EB] text-[#fff] text-[15px] font-medium px-8 py-3 rounded-full inline-block text-center;
  }

  .btn-three {
    @apply bg-white text-slate-950 text-[14px] font-medium px-5 py-2 rounded border border-gray-200 inline-block duration-300;
    @apply hover:bg-blue hover:text-white transition-colors duration-300;
  }

  .s-feature-tabs {
    @apply bg-[#1B2437] px-6 py-3 inline-block rounded-full text-white text-base;
  }

  .price-btn {
    @apply inline-block w-full border border-blue-400 rounded-full py-4 text-blue-600 font-medium;
  }

  .plan-selected {
    @apply bg-linear-to-r from-[#145AFF] to-[#0C3699] text-gray-200;
  }

  .bg-gradient {
    @apply bg-linear-to-b from-[#F6F7FB] to-[#F4F3F2];
  }

  .shipping-card {
    @apply border-2 border-gray-100 p-8 rounded-lg;
  }

  .mega-menu-link {
    @apply bg-[#1D2330] py-2.5 px-4 text-gray-400 w-full flex items-center justify-between hover:bg-white hover:text-gray-900 hover:font-semibold duration-100;
  }

  .form-control {
    @apply  border border-gray-300 rounded h-14 text-gray-600 w-full pl-3 mt-2;
  }
}