@import url("components/navbar.a1107c9f2eb1.css");
@import url("components/testimonials.d5b878b78d62.css");
@import url("components/packets.250ed663a432.css");

html {
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
  font-family: "Roboto Flex", sans-serif;
}

button {
  cursor: pointer;
}

.container {
  max-width: 1230px;
  padding-left: 15px;
  padding-right: 15px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .title-with-decor-1::before,
  .title-with-decor-2::before {
    content: "";
    z-index: -1;
    position: absolute;
    width: 122px;
    height: 37px;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .title-with-decor-1::before {
    background-image: url("../assets/img/features-title-decor.7adfd007588d.svg");
    top: 35px;
    left: -20px;
  }

  .title-with-decor-2::before {
    background-image: url("../assets/img/testimonials-title-decor.ec081c171dba.svg");
    top: 50%;
    right: -55px;
    transform: translateY(-50%);
  }
}
.container-btn-div {
  background:
    #f0f0ed,
    linear-gradient(
      90deg,
      rgba(240, 240, 237, 0.2) 0%,
      rgba(169, 213, 78, 0.2) 100%
    ) !important;
}

.home-hero-section {
  position: relative;
  isolation: isolate;
}

.home-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.home-hero-bg img {
  display: block;
  width: min(100%, 2054px);
  height: auto;
  max-width: none;
}

.blog-card-media {
  aspect-ratio: 337 / 290;
}

.blog-card-media picture,
.blog-card-media img {
  display: block;
  width: 100%;
  height: 100%;
}

.features-bg-section {
  background-image: url("../assets/img/features-bg.fb6d027a6477.png");
  background-image: image-set(
    url("../assets/img/features-bg.03be1cca05fd.webp") type("image/webp"),
    url("../assets/img/features-bg.fb6d027a6477.png") type("image/png")
  );
  background-position: left 65% top 20%;
}

.blogs-bg-section {
  background-position: top;
}

@media (min-width: 768px) {
  .blogs-bg-section {
    background-position: left 65% top -10%;
  }
}

@media (max-width: 767px) {
  .features-bg-section {
    background-position: left 0 top 30%;
    background-size: auto 150%;
  }
}

.app-download:hover {
  box-shadow:
    #6fb30240 0px 54px 55px,
    rgba(111, 179, 2, 0.12) 0px -12px 30px,
    rgba(111, 179, 2, 0.12) 0px 4px 6px,
    rgba(111, 179, 2, 0.17) 0px 12px 13px,
    rgba(111, 179, 2, 0.09) 0px -3px 5px;
}