/* Landing page layout helpers (served from /css/landing.css — paths relative to this file) */

#section-1 {
  background-image: url("../images/hero-desktop.png");
}

.product-info {
  background-image: url("../images/product-info.png");
  background-size: 65%;
  background-position: center 25%;
}

.navbar {
  position: absolute;
  border-bottom-left-radius: 100% 150px;
  border-bottom-right-radius: 100% 150px;
  width: 100%;
  left: 0%;
}

.curv {
  position: relative;
  z-index: 30;
  border-top-left-radius: 100% 160px;
  border-top-right-radius: 100% 160px;
  width: 100%;
  left: 0%;
  background-color: white;
  height: 80px;
  margin-top: -80px;
}

.product-box.active {
  border: 1px solid #da2027;
  box-shadow: 0px 3px 6px 0px #da20274d;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hide {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

@media (max-width: 768px) {
  .curv {
    position: relative;
    z-index: 30;
    border-top-left-radius: 100% 100px;
    border-top-right-radius: 100% 100px;
    width: 100%;
    left: 0%;
    background-color: white;
    height: 50px;
    margin-top: -49px;
  }

  .navbar {
    position: absolute;
    border-bottom-left-radius: 100% 100px;
    border-bottom-right-radius: 100% 100px;
    width: 100%;
    left: 0%;
  }

  #section-1 {
    background-image: url("../images/hero-mobile.png");
  }
}