@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300;400;500;600;700&family=Mulish:wght@200;300;400;500;600;700;800;900&family=Outfit:wght@100;200;300;400;500;600;700;800&family=Poppins:wght@100;200;300;400;500;600;700;800&family=Quicksand:wght@300;400;500;600;700&display=swap');
:root {
  --bir: red;
  --iki: gray;
}
font {
  font-family: 'Josefin Sans', sans-serif;
  font-family: 'Mulish', sans-serif;
  font-family: 'Outfit', sans-serif;
  font-family: 'Poppins', sans-serif;
  font-family: 'Quicksand', sans-serif;
}
*, button:focus {
  outline: none;
}
.navbar-toggler:focus, .navbar-toggler:hover {
  outline: 0;
  box-shadow: none;
}
html {
  scroll-behavior: smooth;
  overflow-y: scroll;
}
html, body {
  color: var(--iki);
  background: var(--bg);
}
a {
  color: var(--bir);
  text-decoration: none;
}
a:hover {
  color: var(--iki);
}
.cati {}
.slayt {
  height: 80vh;
  background: rgb(233, 239, 255);
  background: linear-gradient(120deg, rgba(233, 239, 255, 1) 0%, rgba(255, 230, 255, 1) 50%, rgba(207, 245, 254, 1) 100%);
  background: url("../../../../uploads/images/goodfood/hero-bg.png");
}
.bg-section {
  filter: url("data:image/svg+xml;utf8,<svg></svg>#grayscale");
  -webkit-filter: grayscale(0%);
  transition: all .7s;
  position: absolute;
  width: 50%;
  height: 100%;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.bg-section:hover {
  filter: url("data:image/svg+xml;utf8,<svg></svg>#grayscale");
  filter: gray;
  -webkit-filter: grayscale(100%);
}
.bg-section img {
  width: 100%;
  display: none;
}
.bg-section img.active {
  display: block;
}