@font-face {
  font-family: "Bosch Sans Light";
  src: url("../assets/fonts/BoschSans-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bosch Sans Regular";
  src: url("../assets/fonts/BoschSans-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bosch Sans Medium";
  src: url("../assets/fonts/BoschSans-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bosch Sans Black";
  src: url("../assets/fonts/BoschSans-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

::selection {
  color: #fff;
  background-color: #00884a;
}

body {
  margin: 0;
  font-family: "Bosch Sans Regular", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: black;
  background-color: #fff;
}

.top {
  background-image: url(/assets/img/top.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 20px;
  width: 100%;
}

#hero {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  aspect-ratio: 1440/726;
  background-image: url(/assets/img/banner.jpg);
}
#hero .hero-content {
  position: absolute;
  top: 20%;
  background-color: #00884a;
  color: #fff;
}
#hero .hero-content h1 {
  font-size: clamp(2rem, 3vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  font-family: "Bosch Sans Medium", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
#hero .hero-content p {
  font-size: clamp(1.2rem, 3vw, 2.8rem);
  font-style: italic;
}
#hero:after {
  content: "";
  height: 305px;
  width: 305px;
  background-image: url(/assets/img/confetti-1.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  transform: translateY(145px);
}

#task {
  height: 410px;
  color: black;
  background-image: url(/assets/img/zadanie.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#task h2 {
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  font-weight: 800;
  line-height: 1;
  font-family: "Bosch Sans Medium", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
#task p {
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  font-family: "Bosch Sans Light", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
#task:after {
  content: "";
  height: 305px;
  width: 305px;
  background-image: url(/assets/img/confetti-3.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  transform: translateY(145px);
}

#products {
  padding-top: 100px;
  padding-bottom: 100px;
}
#products .products-title {
  color: #8f2ca7;
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 800;
  font-family: "Bosch Sans Black", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
#products .products-subtitle {
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-weight: 500;
}
#products .product-card {
  color: black;
  transition: color 0.3s ease;
}
#products .product-card:hover {
  color: #8f2ca7;
}
#products .product-card-img {
  aspect-ratio: 384/250;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#products .product-card-img.product-card-img-1 {
  background-image: url(/assets/img/pralka-1.jpg);
}
#products .product-card-img.product-card-img-2 {
  background-image: url(/assets/img/pralka-2.jpg);
}
#products .product-card-img.product-card-img-3 {
  background-image: url(/assets/img/pralka-3.jpg);
}
#products .product-card-img .product-badge {
  top: 0.65rem;
  left: 0.65rem;
  color: #fff;
  font-size: 0.9rem;
  font-family: "Bosch Sans Light", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  height: 105px;
  width: 105px;
  background-color: #8f2ca7;
}
#products .product-card-img .product-badge b {
  font-size: 1.2rem;
  font-family: "Bosch Sans Regular", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
}
#products .products-more {
  background-color: #8f2ca7;
  transition: background-color 0.3s ease;
}
#products .products-more:hover {
  background-color: #7a258a;
}
#products:after {
  content: "";
  height: 146px;
  width: 330px;
  background-image: url(/assets/img/confetti-4.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}

#rules h2 {
  font-size: clamp(1.6rem, 3vw, 2.5rem);
}
#rules h2 span {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-family: "Bosch Sans Black", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #00884a;
  font-weight: 800;
}
#rules p b {
  font-family: "Bosch Sans Black", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
#rules .rules-more {
  background-color: #00884a;
  transition: background-color 0.3s ease;
}
#rules .rules-more:hover {
  background-color: #006639;
}
#rules .small {
  font-size: 0.8rem;
}
#rules .nagroda-wrapper {
  width: 364px;
}
#rules .nagroda-wrapper .gold-counter {
  font-family: "Bosch Sans Medium", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  top: 20%;
  right: -1rem;
  z-index: 3;
  width: 125px;
  height: 125px;
  background: #00884a;
  font-size: 2.6rem;
  font-weight: 700;
}
#rules:after {
  content: "";
  height: 305px;
  width: 305px;
  background-image: url(/assets/img/confetti-2.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  transform: translateY(145px);
}

.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: reveal-up 0.65s ease forwards;
}

.reveal-delay-1 {
  animation-delay: 0.1s;
}

.reveal-delay-2 {
  animation-delay: 0.2s;
}

.reveal-delay-3 {
  animation-delay: 0.3s;
}

@keyframes reveal-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1200px;
    padding: 0;
  }
}
@media (max-width: 991.98px) {
  #hero:after,
  #task:after,
  #products:after,
  #rules:after {
    display: none;
  }
}
@media (max-width: 767.98px) {
  #rules .nagroda-wrapper {
    width: 222px;
  }
  #rules .nagroda-wrapper .gold-counter {
    width: 85px;
    height: 85px;
    font-size: 1.8rem;
    left: -0.8rem;
    top: 15%;
  }
  #task {
    height: auto;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
@media (max-width: 575.98px) {
  .top {
    background-image: url(/assets/img/top-mobile.jpg);
  }
  #hero {
    aspect-ratio: 320/488;
    background-position: center 108px;
    background-image: url(/assets/img/banner-mobile.jpg);
  }
  #products .product-card-img {
    aspect-ratio: 280/250;
  }
}