:root {
  /* Theme Colors */
  --av-color-primary: #12715b;
  --av-color-black: #000000;
  /* --av-color-text: #555555; */
  --av-color-text: #141b34;
  --av-color-primary-icon: #aaaaaa;
  --av-color-border-color: #e6e6e6;
  --av-color-input-color: #f6f6f6;
  --av-color-white-color: #ffffff;
  --av-color-bg: #fbf9f7;

  /* Theme Font Size */
  --av-font-size-12: 0.75rem;
  --av-font-size-14: 0.875rem;
  --av-font-size-16: 1rem;
  --av-font-size-18: 1.125rem;
  --av-font-size-20: 1.25rem;
  --av-font-size-22: 1.375rem;
  --av-font-size-24: 1.5rem;
  --av-font-size-26: 1.625rem;
  --av-font-size-28: 1.75rem;
  --av-font-size-30: 1.875rem;
  --av-font-size-32: 2rem;
  --av-font-size-34: 2.125rem;
  --av-font-size-36: 2.25rem;
  --av-font-size-38: 2.375rem;
  --av-font-size-40: 2.5rem;
  --av-font-size-42: 2.625rem;
  /* Theme Font Weight */
  --av-font-weight-400: 400;
  --av-font-weight-500: 500;
  --av-font-weight-600: 600;
  --av-font-weight-700: 700;
  /* Theme Radius */
  --av-radius-500: 31.25rem;
  --av-radius-22: 1.375rem;
}

.dashboard {
  /* min-height: 100vh; */
  margin-bottom: 100px;
}
.dashboard-preview {
  /* margin-top: -18.75rem; */
  margin-top: -23.75rem;
  padding-bottom: 6.25rem;
  position: relative;
  z-index: 5;
}
.dashboard-image {
  border-radius: 1.25rem;
  overflow: hidden;
  z-index: 3;
  position: relative;
}
.dashboard-image img {
  display: block;
  margin: 0 auto;
}
.dashboard-features {
  margin-bottom: 6.25rem;
}
.dashboard-features .features-head {
  max-width: 31.0625rem;
  margin-bottom: 3.75rem;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.dfeatures-left,
.dfeatures-right {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.dfeatures-upper,
.dfeatures-bottom {
  background: var(--av-color-bg);
  border-radius: 0.625rem;
}
.dfeatures-content {
  padding: 1.875rem 2.5rem 0rem 1.875rem;
}
.dfeatures-upper h3,
.dfeatures-bottom h3 {
  font-family: Sora;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 2.5rem;
  letter-spacing: -0.02rem;
  vertical-align: middle;
  color: var(--av-color-text);
  margin-bottom: 0.9375rem;
}
.dfeatures-upper p,
.dfeatures-bottom p {
  font-family: Roboto;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.75rem;
  letter-spacing: 0%;
  color: var(--av-color-text);
}
.seamless-upper p {
  margin-bottom: 0.9375rem;
}
.visualization p {
    margin-bottom: 1.8125rem;
}
.performance p {
    margin-bottom: 0.75rem;
}
.workflow p {
    margin-bottom: 0.625rem;
}
.dfeatures-upper img,
.dfeatures-bottom img {
  box-shadow: 0rem -0.25rem 0.9375rem 0rem #0000001a;
  display: block;
  margin: 0 auto;
}
.seamless-upper img {
  box-shadow: none;
  margin-bottom: 1.875rem;
}
.dfeatures-center {
  background: var(--av-color-bg);
  border-radius: 0.625rem;
  display: flex;
  flex-direction: column;
}
.central-content {
  padding: 1.875rem 2.5rem 0rem 1.875rem;
}
.central-content img {
  margin-bottom: 0.9375rem;
}
.central-content h3 {
  font-family: Sora;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 2.5rem;
  letter-spacing: -0.02rem;
  vertical-align: middle;
  color: var(--av-color-text);
  margin-bottom: 0.9375rem;
}
.central-content p {
  font-family: Roboto;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.75rem;
  letter-spacing: 0%;
  color: var(--av-color-text);
  margin-bottom: 0.9375rem;
}
.central-image {
  margin-top: auto;
}
.why-avento {
  margin-bottom: 6.25rem;
}
.why-avento .features-head {
  text-align: start;
}
.why-avento .features-text {
  text-align: start;
  margin-bottom: 1.875rem;
}

@media (max-width: 1599.98px) {
  .dashboard-image img {
    width: 100%;
  }
  .dfeatures-upper img, .dfeatures-bottom img {
    width: 90%;
  }
}
@media (min-width: 1399.98px) {
  .why-avento .tools-img {
    width: unset;
    height: 44.375rem;
  }
  .why-avento .tools-img img {
    width: unset;
    height: unset;
  }
}

@media (max-width: 1399.98px) {
  .dashboard-image img {
    width: 100%;
  }
  .dfeatures-upper img,
  .dfeatures-bottom img {
    width: 90%;
  }
  .central-image img {
    width: 100%;
  }
}

@media (max-width: 991.98px) {
  .dashboard-grid {
    display: flex;
    flex-direction: column;
  }
  .dfeatures-upper img,
  .dfeatures-bottom img {
    width: unset;
  }
  .central-image img {
    width: unset;
  }
  .central-image {
    display: block;
    margin: 0 auto;
  }
}

@media (max-width: 499.98px) {
  .dashboard {
    min-height: unset;
  }
  .dashboard-preview {
    margin-top: 0rem;
  }
  .dfeatures-upper img,
  .dfeatures-bottom img {
    width: 90%;
  }
  .central-image img {
    width: 100%;
  }
}