@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  /* General Button Styles */
  .btn-transition {
    transition: all 0.9s ease;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
  }

  /* First Button: Gradient Background with Hover Effect */
  .first-btn {
    background: linear-gradient(to right, #2c96a9, #22c55e);
    border-radius: 0.75rem;
  }

  .first-btn:hover {
    background: linear-gradient(to right, #278596, #1eb154); /* Slightly darker gradient */
  }

  .second-btn {
    display: inline-flex;
    align-items: center;
    gap: 0px;
    color: white;
    font-size: 0rem;
    font-weight: bold;
    text-decoration: none;
    position: relative;
    transition: font-size 0.3s ease;
  }

  .second-btn::after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #2c96a9, #22c55e);
    border-radius: 1.5rem;
  }

  .second-btn span {
    display: inline-block;
    transition: 0.1s ease-in;
  }

  .second-btn:hover span {
    transform: translateX(20%);
  }

  .btn-primary {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }

  .card {
    @apply bg-black rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow duration-300;
  }

  .form-input {
    @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
  }
}