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

/* @layer base {
    ul, ol {
      list-style: revert;
    }
  } */


@layer components {
    .section-heading {
        @apply px-2 sm:px-4 lg:px-6 mx-auto max-w-7xl
    }

    .bg-image-card {
        @apply bg-blend-overlay bg-gray-600 w-full h-full bg-cover flex items-end p-8
    }

    .orange-tab-selected {
        @apply bg-orange-600 text-white rounded-full px-3 py-2 text-sm font-medium
    }

    .orange-tab-unselected {
        @apply bg-orange-300 text-white rounded-full px-3 py-2 text-sm font-thin dark:hover:border-b-orange-600 dark:hover:text-orange-600 hover:border-b-2 hover:border-b-orange-600 hover:text-black
    }

    .orange-linetab-selected {
        @apply py-4 text-left text-4xl text-amber-500 border-b border-amber-500 dark:border-amber-400 dark:text-amber-400
    }

    .orange-linetab-unselected {
        @apply py-4 text-slate-300 border-b border-slate-700 font-light text-4xl hover:border-b-amber-600 hover:text-amber-600 hover:border-b-2 text-left
    }

    .pill {
        @apply bg-sky-500 text-white text-sm font-semibold py-1 px-4 rounded-full
    }

    .pill-description {
        @apply font-semibold text-4xl text-slate-700 uppercase py-2
    }

    .list-desc {
        @apply marker:text-sky-500 list-disc list-outside font-medium text-lg
    }

    .mobile-orange-linetab-selected {
        @apply py-2 text-left text-amber-500 border rounded-full border-amber-500
    }

    .mobile-orange-linetab-unselected {
        @apply py-2 text-left text-slate-300 rounded-full hover:border-b-amber-600 hover:text-amber-600
    }

    .carousel {
        display: flex;
        width: 100%;
        overflow: hidden;
        position: relative;
    }
    
    .carousel-item {
        min-width: 100%;
        transition: transform 0.5s ease-in-out;
    }
    
}