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

html {
  scroll-behavior: smooth;
}

.debug {
  @apply border border-blue-500;
}

.header-link {
  @apply inline-block w-full border-b-2 border-gray-300 px-2 py-3 text-center text-base font-bold uppercase text-black transition duration-500 hover:border-custom-red hover:text-custom-red sm:text-sm md:text-base lg:text-xl xl:text-2xl;
}

.title-main {
  @apply text-xl font-semibold sm:text-2xl md:text-3xl xl:text-4xl;
}

.title-secondary {
  @apply text-sm font-semibold sm:text-base;
}

.title-section {
  @apply ml-[30px] h-[30px] w-[180px] -skew-x-[30deg] bg-custom-red md:ml-[45px] md:h-[45px] md:w-[270px] xl:ml-[60px] xl:h-[60px] xl:w-[360px];
}

.button-main {
  @apply mb-2 inline-flex h-[45px] w-[180px] items-center justify-center rounded-md bg-custom-red pb-1 text-base font-bold text-gray-200 transition-all duration-500 hover:text-white hover:shadow-2xl hover:shadow-black hover:transition-all hover:duration-500 md:h-[60px] md:w-[240px] md:text-xl;
}

.section {
  @apply mt-[30px] flex-col md:mt-[45px] xl:mt-[60px];
}

.footer-button path[fill] {
  @apply transition-all duration-500;
}

.footer-button:hover path[fill] {
  @apply fill-custom-red transition-all duration-500;
}

.footer-button path:not([fill]) {
  @apply transition-all duration-500;
}

.footer-button:hover path:not([fill]) {
  @apply stroke-custom-red transition-all duration-500;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */