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

@font-face {
    font-family: 'Product Sans Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Product Sans Regular'), url('../../assets/fonts/ProductSans-Regular.woff') format('woff');
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    outline: none;
}

body {
    font-family: "Product Sans Regular", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    overscroll-behavior: none;
    background-color: #060606 !important;
    color: #fff;
    overflow-y: scroll;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}


.horizontal-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.horizontal-scroll::-webkit-scrollbar {
    display: none;
}

.gradient-text {
    background-image: conic-gradient(from 133.51deg at 47.31% 49.87%, #FDF2DC 0deg, #6B9BE3 200.79deg, #F2F2F2 339.65deg, #FDF2DC 360deg);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.diamond-gradient {
    background-image: radial-gradient(89.8% 89.8% at 10.2% 21.65%, #F2F2F2 0%, #6B9BE3 45.64%, #FDF2DC 80.05%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.angular-gradient {
    background-image: conic-gradient(from 90deg at 50% 50%, #6B9BE3 -151.8deg, #FDF2DC 41.35deg, #F2F2F2 44.08deg, #6B9BE3 208.2deg, #FDF2DC 401.35deg);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

@layer components {
    .wrapper {
        @apply max-w-[1280px] w-full mx-auto px-5;
    }

    .white_border-btn {
        @apply inline-flex h-12 w-fit flex-row items-center justify-between gap-3 self-center rounded-[50px] border border-[#fff] bg-black px-7 text-base font-medium capitalize text-white
    }

    .black_border-btn {
        @apply inline-flex h-12 w-fit flex-row items-center justify-between gap-3 self-center rounded-[50px] border border-[#000] bg-transparent px-7 text-base font-medium capitalize text-black
    }

    .blue-btn {
        @apply inline-flex h-12 w-fit flex-row items-center justify-between gap-3 self-center rounded-[50px] bg-[#0053d6] px-7 text-sm font-medium uppercase text-white tracking-[2px]
    }

    .attach-btn {
        @apply inline-flex items-center rounded-[48px] border border-[#1a73e8] bg-white px-6 py-3 text-center text-sm font-medium text-[#1a73e8] hover:bg-[#f6f9fe] hover:border-[#1a73e8] hover:text-[#174ea6]
    }

    .maually-btn {
        @apply inline-flex items-center rounded-[48px] bg-transparent p-3 text-center text-sm font-medium text-[#1a73e8] hover:bg-[#1a73e80a] hover:text-[#174ea6]
    }

    .asterisk {
        @apply text-xs -ml-[2px] align-text-bottom text-[#DB2A3A]
    }

    .job-input {
        @apply mb-2 w-full rounded border border-transparent placeholder:text-gray-400 text-[#123693] px-5 py-4 text-sm font-normal
    }

    .job-select {
        @apply mt-2 w-full rounded border border-transparent placeholder:text-gray-400 text-[#123693] px-5 py-4 text-sm font-normal
    }

    .job-textArea {
        @apply mt-2 w-full resize-none rounded border border-transparent px-5 py-4 text-sm font-normal text-[#123693] placeholder:text-gray-400
    }

    .label {
        @apply text-left text-xs uppercase tracking-[2px] text-[#123693]
    }
}