@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800&family=Lato:ital,wght@0,100;0,300;0,400;0,700;1,300;1,400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;800&display=swap");
/*  */

.frame-hero {
    display: flex;
    width: 100%;
    padding: 80px 120px var(--Space-space-0, 0px) 120px;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 73px;
    background-image: url('../../../../../public/Solution/research/asset/Polygon 1.svg');
    background-repeat: no-repeat;
    background-size: cover;
}

.text-hero1 {
  max-width: 800px;
  color: var(--Kazee-Primary-400, #f67377);
  text-align: center;
  font-family: "Plus Jakarta Sans";
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%; /* 36.4px */
}
.text-hero2 {
  max-width: 800px;
  color: var(----Dark-900, #3c476c);
  text-align: center;
  font-family: "Plus Jakarta Sans";
  font-size: 42px;
  font-style: normal;
  font-weight: 800;
  line-height: 150%; /* 63px */
}
.text-hero3 {
  max-width: 800px;
  color: var(----Dark-900, #3c476c);
  text-align: center;

  /* 18px/regular */
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 23.4px */
}

.btn-demo:hover {
  border-radius: 9999px;
  border: 2px solid var(----Blue-600, #0083d1);
  background: var(--Blue-600, #0083d1);
  color: #fff;
  .arrowpath {
    fill: white;
  }
}
.arrowbtn {
  transition: fill 0.3s ease; /* Adding a transition for a smooth color change */
}

.arrowpath {
  fill: #0083d1;
}

.btn-demo {
  display: flex;
  width: 100%;
  min-width: 47px;
  min-height: 47px;
  padding: var(--Space-space-12, 12px) var(--Space-space-16, 16px);
  justify-content: center;
  align-items: center;
  gap: var(--Space-space-8, 8px);
  border-radius: 9999px;
  border: 2px solid var(----Blue-600, #0083d1);
  background: var(--Blue-50, #ebf7ff);

  color: var(----Blue-600, #0083d1);
  text-align: center;

  /* 16px/medium */
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 145%; /* 23.2px */

  border-color: #0083d1;
  margin-bottom: 20px;
}

.img-hero {
  display: flex;
  position: relative;
  width: 80%;
}

.img-rand img {
  transition: transform 1s ease-out;
}

.img-rand.animate-down img {
  transform: translateY(-10px); /* Jarak translasi ketika scroll ke bawah */
}

.img-rand.animate-up img {
  transform: translateY(5px); /* Jarak translasi ketika scroll ke atas */
}

.img-rand {
  display: contents;
  margin-top: 50px;
}
.img-hero1 {
  z-index: 2;
  margin-top: -200px;
  margin-left: 0px;
}
.img-hero2 {
  z-index: 2;
  margin-top: -30px;
  margin-left: 0px;
}
.img-hero3 {
  position: relative;
  /* width: 100%; */
  z-index: 2;
  margin-top: -500px;
  /* margin-left: 400px; */
  margin-right: 40px;
}
.img-hero4 {
  width: auto;
  display: flex;
  z-index: 1;
  margin-top: -70px;
  margin-left: -200px;
}
.img-hero5 {
  z-index: 2;

  margin-left: -700px;
  /* margin-right: 400px; */
}
.row-imghero {
  margin-top: -50px;
}
/*  */

/* marquee */
.marquee-frame {
  width: 100%;
  margin: 100px 0;
  /* margin-bottom: 100px; */
}
/* marquee */

:root {
    --marquee-width: 80vw;
    --marquee-height: 20vh;
    /* --marquee-elements: 12; */
    /* defined with JavaScript */
    --marquee-elements-displayed: 5;
    --marquee-element-width: calc(
        var(--marquee-width) / var(--marquee-elements-displayed)
    );
    --marquee-animation-duration: calc(var(--marquee-elements) * 3s);
    --cards: 5;
    --cardHeight: 420px;
    --cardTopPadding: 1.5em;
    --cardMargin: 4vw;
}

.marquee {
  overflow: hidden;
  position: relative;
}

.marquee:before,
.marquee:after {
  position: absolute;
  top: 0;
  width: 10rem;
  height: 100%;
  content: "";
  z-index: 1;
}

.marquee-content {
  list-style: none;
  height: 100%;
  display: flex;
  animation: scrolling var(--marquee-animation-duration) linear infinite;
}

.marquee-content:hover {
  animation-play-state: paused;
}
@keyframes scrolling {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(
      calc(-1 * var(--marquee-element-width) * var(--marquee-elements))
    );
  }
}
.marquee-content:hover {
  animation-play-state: paused;
}

.marquee-content li {
  display: flex;
  justify-content: center;
  align-items: center;
  /* text-align: center; */
  flex-shrink: 0;
  width: var(--marquee-element-width);
  font-size: calc(var(--marquee-height) * 3 / 4);
  /* 5rem; */
  white-space: nowrap;
}

.marquee-content li img {
  width: 100%;
  max-width: 200px;
  /* height: 100%; */
}
.img-logo {
  margin-right: 20px;
}

div.scroll-container .img-logo {
  margin-right: 20px; /* Adjust the margin between cards */
}
div.scroll-container img {
  padding: 10px;
}
.img-logo {
  margin-right: 20px;
}

@media (max-width: 600px) {
    
  html {
    font-size: 12px;
  }

  :root {
    --marquee-width: 100vw;
    --marquee-height: 16vh;
    --marquee-elements-displayed: 3;
  }

  .marquee:before,
  .marquee:after {
    width: 5rem;
  }
  .img-logo {
    width: 100%;
  }
}
/* frame kazee */

/* kazee frame */
.frame {
  width: 100%;
  display: flex;
  padding: 100px 120px;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  align-self: stretch;
  border-radius: var(--Space-space-0, 0px);
  background: linear-gradient(180deg, #bd0a11 0%, #930035 100%);
}
.frame-titlebrand {
  color: var(--Netral-White, #fff);
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}
.card-count {
  display: flex;

  padding: var(--Space-space-20, 20px);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--Space-space-10, 10px);
  flex: 1 0 0;
  border-radius: 8px;
  border: 1px solid var(--Kazee-Primary-400, #f67377);
}
.text-count {
  color: var(--Kazee-Primary-50, #fef2f2);

  /* 36px/medium */
  font-family: Inter, sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%; /* 43.2px */
}
.span-titlebrand {
  color: var(--Netral-White, #fff);
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-style: italic;
  font-weight: 700;
  line-height: 130%; /* 31.2px */
}
.text-childcount {
  overflow: hidden;
  color: var(--Kazee-Primary-50, #fef2f2);
  text-overflow: ellipsis;

  /* 14px/medium */
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 145%; /* 20.3px */
}

.row-cardcount {
  margin-bottom: 20px;
}

/*  */
.row-start {
  width: 100%;
}

/* Tambahkan animasi ke text-count */
@keyframes countup {
  from {
    opacity: 0.4;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.text-count {
  font-size: 2em; /* Sesuaikan dengan ukuran font yang diinginkan */
  margin: 0;
  animation: countup 1.5s ease-out; /* Sesuaikan durasi animasi yang diinginkan */
}

/*  */
/* frame-spatial */
.frame-spatial {
  display: flex;
  width: 100%;
  padding: 100px 120px;
  align-items: center;
  gap: 40px;
}
/* frame-media */
.media-monitoring {
  display: flex;
  width: 100%;
  padding: 100px 120px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  background-size: cover;
  background-image: url('../../../../../public/landingpage/medmon/asset/bgheromedmon.svg')
}

.container {
  width: 100%;
  margin: 0 auto;
}

#cards {
  list-style: none;
  padding-left: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(var(--cards), var(--cardHeight));
  gap: var(--cardMargin);
  padding-bottom: calc(var(--cards) * var(--cardTopPadding));
  margin-bottom: var(--cardMargin);
}

#card1 {
  --index: 1;
}

#card2 {
  --index: 2;
}

#card3 {
  --index: 3;
}

#card4 {
  --index: 4;
}
#card5 {
  --index: 5;
}

.cardscroll {
  position: sticky;
  top: 0;
  padding-top: calc(var(--index) * var(--cardTopPadding));
}

#card1 .card-body1 {
  display: flex;
  width: 100%;
  padding: 40px;
  align-items: center;
  gap: 40px;
  background-color: #fff;
}

#card2 .card-body1 {
  display: flex;
  width: 100%;
  padding: 40px;
  align-items: center;
  gap: 40px;
  background-color: #fff;
}

#card3 .card-body1 {
  display: flex;
  width: 100%;
  padding: 40px;
  align-items: center;
  gap: 40px;
  background-color: #fff;
}

#card4 .card-body1 {
  display: flex;
  width: 100%;
  padding: 40px;
  align-items: center;
  gap: 40px;
  background-color: #fff;
}
#card5 .card-body1 {
  display: flex;
  width: 100%;
  padding: 40px;
  align-items: center;
  gap: 40px;
  background-color: #fff;
}

.card-body1 {
  box-sizing: border-box;
  height: var(--cardHeight);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s;
  padding: 40px;
  gap: 40px;
  border-radius: 40px;
  border: 1px solid var(----Base-100, #f5f5f5);
  box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.08);
}
.no {
  color: var(--Kazee-Primary-600, #d9292f);

  /* 18px/medium */
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 23.4px */
}
.title-no {
  color: var(----Dark-900, #3c476c);

  /* 26px/medium */
  font-family: Inter, sans-serif;
  font-size: 26px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 33.8px */
}
.text-no {
  color: var(----Dark-900, #3c476c);

  /* 18px/regular */
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 23.4px */
}
.row-sc {
  display: flex;
  align-items: center;
}

/* frame start */

/* frame-startsurvey */
.frame-startsurvey {
  padding: 100px 120px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  height: 400px;
  width: 100%;
  flex-shrink: 0;
  border-radius: var(--Space-space-0, 0px);
  background: var(--Kazee-Primary-700, #b61f24);
}

.text-survey {
  color: var(--Kazee-Primary-50, #fef2f2);
  align-self: stretch;
  text-align: start;
  /* 32px/semibold */
  font-family: Inter, sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 38.4px */
}
.btn-started {
  margin-top: 43px;
  display: flex;
  width: 220px;
  justify-content: start;
  min-width: 58px;
  min-height: 58px;
  padding: var(--Space-space-16, 16px) var(--Space-space-20, 20px);
  justify-content: center;
  align-items: center;
  gap: var(--Space-space-8, 8px);
  border-radius: var(--Radius-rad-8, 8px);
  border: 1px solid var(--Brand-Primary-600, #d9292f);
  background: var(--Base-0, #fff);

  color: var(--Brand-Primary-600, #d9292f);
  text-align: center;

  /* 20px/medium */
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 26px */
}
.col-survey {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  text-align: center;
  align-self: center; /* Menengahkan elemen di tengah baris */
}
/*  */

/* frame need */
.frame-need {
  display: flex;
  width: 100%;
  padding: 100px 120px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
}
.title-frame {
  max-width: 800px;
  color: var(----Base-950, #292929);
  text-align: center;

  /* 36px/bold */
  font-family: Inter, sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%; /* 43.2px */
}
.need-text {
  color: var(----Dark-900, #3c476c);

  /* 29px/medium */
  font-family: Inter, sans-serif;
  font-size: 29px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 37.7px */
}

.need-content {
  color: var(----Dark-900, #3c476c);

  /* 18px/regular */
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 23.4px */
}
.row-need {
  align-items: center;
  gap: 40px;
}
.col-needcontent {
  align-items: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Space-space-20, 20px);
  flex: 1 0 0;
  border-left: 2px solid #d9292f;
}
/*  */
/* chart */

/*  */
.frame-chart {
  width: 100%;
  display: flex;
  padding: 100px 120px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}
.card {
  justify-content: center;
  align-items: center;
  min-width: 600px;
  display: flex;
  padding: 20px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Space-space-20, 20px);
  flex: 1 0 0;
  align-self: stretch;

  border-radius: var(--Space-space-10, 10px);
  border: var(--Space-space-0, 1px) solid var(----Grey-200, #dddfdf);
}

.note-chart {
  color: var(----Dark-500, #6e8bc3);
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  line-height: 145%; /* 23.2px */
  align-self: stretch;
  text-align: start;
}
.card-row2 {
  width: 100%;
  display: flex;
  padding: 40px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Space-space-20, 20px);
  flex: 1 0 0;
  align-self: stretch;
}

.chart-title {
  align-self: stretch;
  color: #0083d1;
  text-align: center;

  /* 23px/bold */
  font-family: Inter, sans-serif;
  font-size: 23px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 29.9px */
}
.donwload-chart {
  display: flex;
  min-width: 58px;
  min-height: 58px;
  padding: var(--Space-space-16, 16px) var(--Space-space-20, 20px);
  justify-content: center;
  align-items: center;
  gap: var(--Space-space-8, 8px);
  border-radius: var(--Radius-rad-8, 8px);
  background: var(--Brand-Primary-500, #ec474d);
  border: none;
  margin-top: 40px;

  /* font */
  color: var(--Brand-Primary-50, #fef2f2);
  text-align: center;

  /* 20px/medium */
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 26px */
}
.donwload-chart:hover {
  background-color: #b61f24;
}
.card-row2 {
  width: 100%;
  display: flex;
  padding: 40px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Space-space-20, 20px);
  flex: 1 0 0;
  align-self: stretch;
}

/*  */
.frame-complate {
  display: flex;
  padding: 100px 120px;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.title-complate {
  color: var(--Base-950, #292929);
  text-align: center;

  /* 36px/bold */
  font-family: Inter, sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%; /* 43.2px */
}
.card-complate {
  display: flex;
  padding: var(--Space-space-20, 20px);
  flex-direction: column;
  align-items: center;
  gap: var(--Space-space-10, 10px);
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 8px;
  border: 1px solid var(----Base-200, #dedede);
  background: var(--Netral-White, #fff);
}
.text-cardcom {
  color: var(----Dark-900, #3c476c);
  text-align: center;

  /* 20px/semibold */
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%; /* 26px */
}
.text-cardcom2 {
  color: var(----Dark-900, #3c476c);
  text-align: center;
  align-self: stretch;
  /* 14px/regular */
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 145%; /* 20.3px */
}
.linee {
  border-top: 1px solid #dddfdf;
  width: 100%;
}
/*  */
/* kazee location */
.frame-kazeelocation {
  display: flex;
  width: 100%;
  padding: 100px 120px;
  flex-direction: column;
  align-items: center;
}
.title-location {
  color: var(----Base-950, #292929);
  text-align: center;

  /* 36px/bold */
  font-family: Inter, sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%; /* 43.2px */
  margin-bottom: 20px;
}

.location {
  color: var(----Dark-900, #3c476c);
  text-align: center;

  /* 18px/regular */
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 23.4px */
  margin-bottom: 40px;
}

.card-kazee {
  display: flex;
  height: 100%;
  padding: var(--Space-space-20, 20px);
  flex-direction: column;
  flex: 1 0 0;
  border-radius: var(--Space-space-10, 10px);
  border: 1px solid #0c725c;
}
.col-kazee {
  margin: 0;
}
.row-kazee {
  gap: 20px;
  margin-bottom: 40px;
}
.row-kazee2 {
  display: flex;
  align-items: center;
}
.text-cardkazee {
  color: var(----Dark-950, #282d43);

  /* 18px/medium */
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 23.4px */
}
.text-cardkazee2 {
  color: var(----Base-700, #525252);

  /* 14px/regular */
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 145%; /* 20.3px */
}
.text-mac {
  color: var(----Dark-950, #282d43);

  /* 23px/semibold */
  font-family: Inter, sans-serif;
  font-size: 23px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%; /* 29.9px */
  margin-bottom: 20px;
}
.text-mac2 {
  color: var(----Grey-700, #515658);

  /* 14px/regular */
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 145%; /* 20.3px */
  margin-bottom: 20px;
}
.icnmac {
  margin-right: 10px;
}
.row-mac {
  gap: 20px;
}
/*  */
/* last frmae */

.frame-last {
  display: flex;
  width: 100%;
  padding: 100px 120px;
  gap: var(--Space-space-80, 80px);
  background: #930035;
  height: 600px;
}
.text-last {
  color: var(--Netral-White, #fff);
  font-family: Inter, sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 54px */
}

.btn-last {
  margin-top: 43px;
  display: flex;
  width: 220px;
  justify-content: start;
  min-width: 58px;
  min-height: 58px;
  padding: var(--Space-space-16, 16px) var(--Space-space-20, 20px);
  justify-content: center;
  align-items: center;
  gap: var(--Space-space-8, 8px);
  border-radius: var(--Radius-rad-8, 8px);
  border: 1px solid var(--Brand-Primary-600, #d9292f);
  background: var(--Base-0, #fff);

  color: #000;
  text-align: center;

  /* 20px/medium */
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 26px */
}
.btn-last:hover {
  background-color: #b7bcbd;
}
.row-last {
  display: flex;
  align-items: center;
}
/* footer */
footer {
  margin-top: 80px;
  display: flex;
  padding: 60px 120px;
  flex-direction: column;
  align-items: flex-start;

  align-self: stretch;
}
.title-footer {
  color: var(--Text-Dark-text-Dark-text, #283252);

  /* 14px/Bold */
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
  line-height: 150%; /* 21px */
  margin-bottom: 20px;
}

.content-text {
  color: var(--Text-Dark-text-Dark-text, #283252);

  /* 14px/regular */
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 145%; /* 20.3px */
  opacity: 0.7;
}

.text-footer {
  color: var(--Text-Dark-text-Dark-text, #283252);

  /* 14px/regular */
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 145%; /* 20.3px */
  opacity: 0.7;
}
.footer-last {
  color: var(--Text-Dark-text-Dark-text, #283252);

  /* 14px/Regular */
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 21px */
  opacity: 0.7;
  margin-top: 20px;
}

.row-footer {
  padding-bottom: 40px;
  margin-top: 80px;
}

.row-iconsosmed {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

/* frame-footer */
.frame-footer {
  display: flex;
  width: 100%;
  padding: 60px 120px;
  flex-direction: column;
  align-items: center;
}

.row-fot {
  display: flex;
  justify-content: center;
  width: 100%;
}

.frame-hero-mobile {
    display: none;
}

.title-need {
    color: var(----Base-950, #292929);
    text-align: center;

    /* 36px/bold */
    font-family: Inter;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    /* 43.2px */
}

.card-body {
    box-sizing: border-box;
    height: var(--cardHeight2);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
    padding: 40px;
    gap: 40px;
    border-radius: 40px;
    /* border: 1px solid var(----Base-100, #f5f5f5); */
}

@media (min-width: 769px) {
  .bg-last {
    background-image: url('../../../../../public/Solution/research/asset/lastback.svg');
        background-repeat: no-repeat;
        background-position: right;
  }
}

/*mobile footer  */
@media (max-width: 768px) {
  /* footer */
  footer {
    margin-top: 80px;
    display: flex;
    padding: 40px 20px;
    flex-direction: column;
    align-items: flex-start;

    align-self: stretch;
  }
  /* footer */

  /* last */
  .content-text {
    color: #000;
  }

  /* frame-hero */
  .frame-hero {
    display: flex;
    width: 100%;
    padding: 40px var(--Space-space-20, 20px) var(--Space-space-0, 0px)
      var(--Space-space-20, 20px);
    flex-direction: column;
    align-items: center;
    gap: var(--Space-space-20, 20px);
  }

  .frame-kazeelocation {
    display: flex;
    width: 100%;
    padding: 40px var(--Space-space-20, 20px) var(--Space-space-0, 0px)
      var(--Space-space-20, 20px);
    flex-direction: column;
    align-items: center;
    gap: var(--Space-space-20, 20px);
  }
  .frame-location {
    display: flex;
    width: 100%;
    padding: 40px var(--Space-space-20, 20px) var(--Space-space-0, 0px)
      var(--Space-space-20, 20px);
    flex-direction: column;
    align-items: center;
    gap: var(--Space-space-20, 20px);
  }
}

/* CSS untuk tampilan mobile */
@media (max-width: 767px) {

    .frame-hero{
        display: none;
    }

    .frame-hero-mobile {
        display: flex;
        width: 100%;
        padding: var(--Space-space-40, 40px) var(--Space-space-20, 20px) 0px var(--Space-space-20, 20px);
        flex-direction: column;
        align-items: center;
        gap: var(--Space-space-20, 20px);
        margin-top: 100px;
    }

    .text-hero1{
        color: var(--Kazee-Primary-600, #D9292F);
        text-align: center;
        font-family: "Plus Jakarta Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 130%; /* 20.8px */
        align-self: stretch;
    }

    .text-hero2{
        color: var(----Dark-900, #3C476C);
        text-align: center;
        font-family: "Plus Jakarta Sans";
        font-size: 26px;
        font-style: normal;
        font-weight: 700;
        line-height: 120%; /* 31.2px */
        align-self: stretch;
    }

    .text-hero3{
        color: var(----Dark-900, #3C476C);
        text-align: center;

        /* 14px/regular */
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 145%; /* 20.3px */
    }

    .btn-demo {
        display: flex;
        height: 40px;
        min-width: 47px;
        padding: 4px var(--Space-space-16, 16px);
        justify-content: center;
        align-items: center;
        gap: var(--Space-space-8, 8px);

        color: var(----Blue-600, #0083D1);
        text-align: center;

        /* 13px/medium */
        font-family: Inter;
        font-size: 13px;
        font-style: normal;
        font-weight: 500;
        line-height: 145%; /* 18.85px */
    }

    .marquee-frame {
        scrollbar-width: none;
        display: block;
        width: 100%;
        margin: 40px 0;
    }

    .marquee {
        overflow: hidden;
        position: relative;
    }

    .frame {
        padding: 60px 20px;
        margin-bottom: 40px;
    }

    .frame-titlebrand {
        color: var(--Netral-White, #FFF);
        text-align: center;

        /* 16px/bold */
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 145%; /* 23.2px */
    }

    .span-titlebrand {
        text-align: center;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        line-height: 145%;
    }

    .img-vector {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        align-self: stretch;
        width: 375.733px;
        height: 142.225px;
    }

    .row-cardcount {
        margin-top: 20px;
    }

    .card-count {
        display: flex;
        height: 100px;
        padding: var(--Space-space-10, 10px);
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: var(--Space-space-4, 4px);
        flex: 1 0 0;
    }

    .text-count {
        color: var(--Kazee-Primary-50, #FEF2F2);
        /* 23px/semibold */
        font-family: Inter;
        font-size: 23px;
        font-style: normal;
        font-weight: 600;
        line-height: 130%; /* 29.9px */
    }

    .text-childcount {
        overflow: hidden;
        color: var(--Kazee-Primary-50, #FEF2F2);
        text-overflow: ellipsis;

        /* 11px/regular */
        font-family: Inter;
        font-size: 11px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%; /* 15.4px */
    }

    .media-monitoring {
        padding: 40px 20px;
        margin-bottom: 40px;
        background-image: none;
    }

    .title-need {
        color: var(----Base-950, #292929);
        text-align: center;
        font-family: Inter;
        font-size: 23px;
        font-style: normal;
        font-weight: 600;
        line-height: 130%; /* 29.9px */
    }

    .card-body {
        width: 320px;
        height: 350px;
        border-radius: var(--Space-space-20, 20px);
        /* box-shadow: 0px 1.75px 4px -1px rgba(0, 0, 0, 0.14); */
        align-items: center;
    }

    .imgmedia {
        width: 139.167px;
        height: 138.333px;
        flex-shrink: 0;
        display: block;
        margin-left: auto;
        margin-right: auto;

    }

    .title-no {
        color: var(----Dark-900, #3C476C);
        text-align: center;

        /* 18px/semibold */
        font-family: Inter;
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: 130%; /* 23.4px */
    }

    .text-no {
        color: var(----Base-900, #3D3D3D);
        text-align: center;
        /* 13px/regular */
        font-family: Inter;
        font-size: 13px;
        font-style: normal;
        font-weight: 400;
        line-height: 145%; /* 18.85px */
    }

    .frame-startsurvey {
        display: flex;
        padding: 60px 20px;
        align-items: center;
    }

    .text-survey {
        color: var(--Netral-White, #FFF);
        text-align: center;

        /* 18px/medium */
        font-family: Inter;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: 130%; /* 23.4px */
    }

    .btn-started {
        display: flex;
        min-width: 36px;
        min-height: 36px;
        padding: var(--Space-space-8, 8px) var(--Space-space-12, 12px);
        justify-content: center;
        align-items: center;
        gap: var(--Space-space-4, 4px);

        border-radius: var(--Radius-rad-8, 8px);
        border: 1px solid var(--Brand-Primary-600, #D9292F);
        background: var(--Base-0, #FFF);

        color: var(--Brand-Primary-600, #D9292F);
        text-align: center;

        /* 14px/medium */
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 145%; /* 20.3px */
    }

    .img-you-need {
      width: 288px;
      height: 180px;
      flex-shrink: 0;
      border-radius: var(--Space-space-10, 10px);
      background: var(----Dark-50, #F0F5FA);
      margin-bottom: 20px;
    }

    .export-content {
      display: none;
    }

    .frame-chart {
      padding: 40px 20px;
    }

    .frame-last {
      padding: 40px 16px 100px;
      text-align: center;
      height: auto;
    }

    .text-last {
      color: var(--Netral-White, #FFF);
      text-align: center;

      /* 23px/semibold */
      font-family: Inter;
      font-size: 23px;
      font-style: normal;
      font-weight: 600;
      line-height: 130%; /* 29.9px */
    }

    .btn-last {
      display: flex;
      min-width: 36px;
      min-height: 36px;
      padding: var(--Space-space-8, 8px) var(--Space-space-12, 12px);
      justify-content: center;
      align-items: center;
      gap: var(--Space-space-4, 4px);
      width: 180px;
    }

    .a-btn-last {
      display: flex;
      justify-content: center;
    }

  .frame-complate {
    display: flex;
    width: 100%;
    padding: 40px var(--Space-space-20, 20px) var(--Space-space-0, 0px)
      var(--Space-space-20, 20px);
    flex-direction: column;
    align-items: center;
    gap: var(--Space-space-20, 20px);
  }
  .rowcomplate {
    flex-direction: column; /* Ubah arah kolom menjadi vertikal pada tampilan mobile */
  }

  .colcomplate {
    margin-bottom: 20px; /* Berikan jarak antar kolom pada tampilan mobile */
  }

  .card-complate {
    padding: 20px; /* Berikan ruang internal pada kartu pada tampilan mobile */
  }

  .img-rand img {
    transition: transform 1s ease-out;
  }

  .img-rand.animate-down img {
    transform: translateY(-25px); /* Jarak translasi ketika scroll ke bawah */
  }

  .img-rand.animate-up img {
    transform: translateY(25px); /* Jarak translasi ketika scroll ke atas */
  }
}
@media (min-width: 768px) {
  .rowcomplate {
    flex-direction: row; /* Setel arah kolom kembali ke horizontal pada tampilan desktop */
  }

  .colcomplate {
    margin-bottom: 0; /* Hapus jarak antar kolom pada tampilan desktop */
  }

  .card-complate {
    padding: 30px; /* Atur kembali ruang internal pada kartu pada tampilan desktop */
  }
}

/* CSS untuk tampilan mobile */
@media (max-width: 767px) {
  .row-location {
    flex-direction: column-reverse; /* Ubah arah kolom menjadi vertikal pada tampilan mobile dan pindahkan kolom kedua ke bawah */
  }

  .col-location {
    text-align: center; /* Pusatkan teks pada tampilan mobile */
    padding: 20px; /* Berikan ruang internal pada kolom pada tampilan mobile */
  }
}

/* CSS untuk tampilan desktop */
@media (min-width: 768px) {
  .row-location {
    flex-direction: row; /* Setel kembali arah kolom ke horizontal pada tampilan desktop */
  }
  .row-spatial {
    flex-direction: row; /* Setel kembali arah kolom ke horizontal pada tampilan desktop */
  }

  .col-location {
    text-align: left; /* Setel kembali penempatan teks pada tampilan desktop */
    padding: 0; /* Hapus ruang internal pada kolom pada tampilan desktop */
  }
}

@media only screen and (max-width: 800px) {
  .frame-spatial {
    display: flex;
    padding: 40px var(--Space-space-20, 20px);
    flex-direction: column;
    align-items: flex-start;
  }
  .col-spatial1 {
    position: sticky;
    top: 13px;
    height: 100vh;
    overflow-y: auto;
  }
}