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

@layer utilities {

    .from-red-500 {
        --tw-gradient-from: #013475 var(--tw-gradient-from-position) !important;
        --tw-gradient-to: rgb(1 52 117 / 0) var(--tw-gradient-to-position) !important;
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
    }

    .via-orange-500 {
        --tw-gradient-stops: var(--tw-gradient-from),
            #0098bd var(--tw-gradient-via-position),
            var(--tw-gradient-to) !important;
    }


    .from-red-600 {
        --tw-gradient-from: #013475 var(--tw-gradient-from-position) !important;
        --tw-gradient-to: rgb(1 52 117 / 0) var(--tw-gradient-to-position) !important;
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
    }

    .to-red-600 {
        --tw-gradient-to: #013475 var(--tw-gradient-to-position) !important;
    }

    /* RED → #013475 */

    .bg-red-600 {
        background-color: #013475 !important;
    }

    .bg-skyblue-600 {
        background-color: #00b0cc !important;
    }

    .text-red-600 {
        color: #013475 !important;
    }

    .border-red-600 {
        border-color: #013475 !important;
    }

    .hover\:bg-red-600:hover {
        background-color: #013475 !important;
        color: #fff !important;
    }

    .hover\:text-red-600:hover {
        color: #013475 !important;
    }

    .text-white {
        color: #fff !important;
    }

    /* ORANGE → #0098bd */

    .bg-orange-600 {
        background-color: #0098bd !important;
    }

    .text-orange-600 {
        color: #0098bd !important;
    }

    .border-orange-600 {
        border-color: #0098bd !important;
    }

    .hover\:bg-orange-600:hover {
        background-color: #0098bd !important;
    }

    .hover\:text-orange-600:hover {
        color: #0098bd !important;
    }

    .from-orange-700 {
        --tw-gradient-from: #0098bd var(--tw-gradient-from-position) !important;
        --tw-gradient-to: rgb(0 152 189 / 0) var(--tw-gradient-to-position) !important;
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
    }

    .via-orange-800 {
        --tw-gradient-stops: var(--tw-gradient-from),
            #013475 var(--tw-gradient-via-position),
            var(--tw-gradient-to) !important;
    }

}