:root {
      --c-primary: #f43f5e;
      --c-secondary: #fb7185;
      --c-primary-text: #ffffff;
      scroll-behavior: smooth
    }

    body {
      font-family: sans-serif
    }

    .bg-primary {
      background-color: var(--c-primary)
    }

    .text-primary {
      color: var(--c-primary)
    }

    .text-primary-text {
      color: var(--c-primary-text)
    }

    .hover\:bg-secondary:hover {
      background-color: var(--c-secondary)
    }

    .ring-primary {
      --tw-ring-color: var(--c-primary)
    }

    @keyframes f {
      from {
        opacity: 0;
        transform: translateY(20px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    .a-fade {
      animation: f .6s ease-out forwards
    }

    .shadow-soft {
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
    }

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

    body {
      font-family: 'Inter', sans-serif;
    }

    body {
      --hero-bg-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRnLbj9Ki5VBKRoGBl0ti839LAP9xZ6iQMjng&s');
      --hero-overlay-color: rgba(0, 0, 0, 1);
      --hero-overlay-opacity: 0.8;
    }

    #hero {
      background-image: var(--hero-bg-image);
    }