@font-face {
  font-family: "Italianno";
  src: url("../fonts/Italianno/Italianno-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins/Poppins-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins/Poppins-Medium.ttf");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins/Poppins-SemiBold.ttf");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins/Poppins-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins/Poppins-Italic.ttf");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Quando";
  src: url("../fonts/Quando/Quando-Regular.ttf");
}
:root {
  --color-sorbet-stem: #c2dc80;
  --color-sorbet-stem-rgb: 194, 220, 128;

  --color-petal-glaze: #ea9caf;
  --color-petal-glaze-rgb: 234, 156, 175;

  --color-dusty-orchid: #d56c89;
  --color-dusty-orchid-rgb: 213, 108, 137;

  --color-powdered-lilac-grey: #f3eef1;
  --color-powdered-lilac-grey-rgb: 243, 238, 241;
  --font-primary: "Poppins", sans-serif;
  --font-heading: "Italianno", cursive;
  --font-alt: "Quando", serif;
}
.bg-sorbet-stem {
  background-color: var(--color-sorbet-stem) !important;
}

.bg-petal-glaze {
  background-color: var(--color-petal-glaze) !important;
}

.bg-dusty-orchid {
  background-color: var(--color-dusty-orchid) !important;
}

.bg-powdered-lilac-grey {
  background-color: var(--color-powdered-lilac-grey) !important;
}
.text-sorbet-stem {
  color: var(--color-sorbet-stem) !important;
}

.text-petal-glaze {
  color: var(--color-petal-glaze) !important;
}

.text-dusty-orchid {
  color: var(--color-dusty-orchid) !important;
}

.text-powdered-lilac-grey {
  color: var(--color-powdered-lilac-grey) !important;
}
.btn-sorbet-stem {
  background-color: var(--color-sorbet-stem);
  color: #000;
}

.btn-petal-glaze {
  background-color: var(--color-petal-glaze);
  color: #fff;
}

.btn-dusty-orchid {
  background-color: var(--color-dusty-orchid);
  color: #fff;
}

.btn-powdered-lilac-grey {
  background-color: var(--color-powdered-lilac-grey);
  color: #000;
}

.btn-sorbet-stem:hover,
.btn-petal-glaze:hover,
.btn-dusty-orchid:hover,
.btn-powdered-lilac-grey:hover {
  filter: brightness(0.9);
}

.font-primary {
  font-family: var(--font-primary) !important;
}

.font-heading {
  font-family: var(--font-heading) !important;
}

.font-alt {
  font-family: var(--font-alt) !important;
}
.fw-regular {
  font-weight: 400 !important;
}

.fw-medium {
  font-weight: 500 !important;
}

.fw-semibold {
  font-weight: 600 !important;
}

.fw-bold {
  font-weight: 700 !important;
}
.fs-italic {
  font-style: italic !important;
}

.fs-normal {
  font-style: normal !important;
}
.fs-xs {
  font-size: 0.75rem !important;
}
.fs-sm {
  font-size: 0.875rem !important;
}
.fs-md {
  font-size: 1rem !important;
}
.fs-lg {
  font-size: 1.25rem !important;
}
.fs-xl {
  font-size: 1.75rem !important;
}
.fs-xxl {
  font-size: 2.5rem !important;
}
body {
  font-family: var(--font-primary);
}
header {
  position: relative;
  z-index: 1000;
}

.navbar {
  z-index: 1050;
}

.dropdown-menu {
  z-index: 1100;
}

.circle-bg {
  position: absolute;
  width: 500px;
  height: 500px;
  background-color: var(--color-sorbet-stem);
  border-radius: 50%;
  top: 50%;
  left: -200px;
  transform: translateY(-50%);
  z-index: 0;
}
.hero-banner {
  background-image: url("../images/banner-florist.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/banner-florist.png");
}
.card-menu:hover {
  transform: scale(1.05);
  transition: 0.3s;
  cursor: pointer;
}
.bg-gradient-primary {
  background: linear-gradient(45deg, #4e73df, #224abe);
}