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

@import "tailwindcss";

@layer base {
  :root {
    --color: 255 255 255;
    --hero-backgroun: rgba(207, 240, 220, 1);
    --card-backgroun: rgba(240, 253, 244, 1);
    --background-primary: rgba(240, 253, 244, 1);
  }
}

@layer utilities {
  .inter-font {
    font-family: "Inter", sans-serif;
  }

  .containers {
    max-width: 1200px;
    margin: 0 auto;
  }

  .containers1 {
    max-width: 1400px;
    margin: 0 auto;
  }

  /* .b-hero {
    background-image:
      url(../assets/hero-leaf1.png), url(../assets/hero-leaf2.png);
    background-repeat: no-repeat;
    background-size: contain, contain;
    background-position:
      left bottom,
      right bottom;
  } */
  .b-hero-mobile {
    background-image: url(../assets/hero-leaf1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom;
  }

  /* md and up */
  @media (min-width: 770px) {
    #b-hero {
      background:
        url("../assets/hero-leaf1.png"), url("../assets/hero-leaf2.png");
      background-position:
        left center,
        right center;
      background-size:
        left contain,
        left contain;
      background-repeat: no-repeat, no-repeat;
      background-color: var(--hero-backgroun);
    }
  }
}