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

* {
    font-family: Roboto, sans-serif;
  }

.btn {
    @apply inline-block rounded-full bg-gradient-to-r from-cyan-500 to-blue-500 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)];
}

.title {
    @apply text-3xl md:text-5xl font-bold leading-snug;
}

.second-title {
    @apply font-semibold text-4xl mb-2 bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% bg-clip-text text-transparent;
}

.blob1 {
    @apply w-80 h-80 bg-color-secondary absolute top-0 -left-5 -z-10 blur-2xl opacity-30 overflow-hidden rounded-full;
}

.blob2 {
    @apply w-80 h-80 bg-color-blob absolute bottom-10 right-0 -z-10 blur-2xl opacity-30 overflow-hidden rounded-full;
}

.bg-white-gradient{
    @apply bg-gradient-to-r from-blue-200 to-cyan-200;
}