@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
  --color-primary: #e80059;
  --color-primary-rgb: 232, 0, 89;
  --color-primary-contrast: white;
  --color-secondary: #28beb4;
  --color-secondary-contrast: white;
  --color-text: #252B37;
  --color-heading: #252B37;
  --color-dark: #231942;
  --color-dark-contrast: white;
  --color-light: white;
  --color-light-contrast: #231942;
  --font-body: "Inter", sans-serif;
  --font-heading: "Inter", sans-serif;
  --font-size: 16px;
  /* H1 */
  --h1-size: clamp(4.5rem, 4vw, 30px);
  /* --h1-size: clamp(2.5rem, 5vw, 3.75rem); */

  /* H2 */
  --h2-size: clamp(3rem, 3vw, 25px);
  /* --h2-size: clamp(2rem, 4vw, 3rem); */

  /* H3 */
  --h3-size: clamp(1.875rem, 2.5vw, 20px);
  /* --h3-size: clamp(1.5rem, 3vw, 1.875rem); */

  /* H4 */
  /* --h4-size: clamp(1.25rem, 2.5vw, 1.5625rem); */
  --h4-size: clamp(1.25rem, 2vw, 18px);

  /* H5 */
  --h5-size: clamp(1rem, 1.5vw, 16px);
  /* --h5-size: clamp(1rem, 2vw, 1.25rem); */

  /* H6 */
  --h6-size: clamp(0.875rem, 1.2vw, 16px);
  /* --h6-size: clamp(0.875rem, 1.5vw, 1rem); */
}



.bg-hero {
  background: url("/images/bg-1.webp") no-repeat;
  background-position: center;
  background-size: cover;
}