@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-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 */

.img-mac {
 justify-content: center;
 margin-top: -200px;
 margin-left: 120px;
}
.img-rand img {
 transition: transform 1s ease-out;
}
.img-rand.animate-down img {
 transform: translateY(-10px);
}

.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: -80px;
 margin-left: 700px;
}

.img-hero2 {
 z-index: 2;
 /* margin-top: 30px; */
 margin-left: -700px;
}
.img-hero3 {
 /* position: relative; */
 z-index: 1;
 /* margin-top: -70px; */
 margin-left: -600px;
}
.img-hero4 {
 z-index: 1;
 /* position: relative; */
 margin-top: -500px;
 margin-left: 800px;
}
.frame-hero {
 display: flex;
 width: 100%;
 padding: 80px 120px 100px 120px;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 margin-top: 73px;
}

.text-hero {
 margin-top: -10px;
 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 */
}
.mediakazee {
 color: var(--Kazee-Primary-600, #d9292f);
 text-align: center;
 font-family: "Plus Jakarta Sans";
 font-size: 28px;
 font-style: normal;
 font-weight: 600;
 line-height: 130%; /* 36.4px */
}
.btn-demo {
 display: flex;
 width: 220px;
 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;
}
.btn-demo:hover {
 border-radius: 9999px;
 border: 2px solid var(----Blue-600, #0083d1);
 background: var(--Blue-600, #0083d1);
 color: #fff;
 .arrowpath {
  fill: white;
 }
}
.card-hero {
 width: 950px;
 height: 550px;
}
/*  */
.title-frame {
 color: var(--Kazee-Primary-600, #d9292f);
 text-align: center;
 align-self: stretch;
 /* 36px/Bold */
 font-family: Inter, sans-serif;
 font-size: 36px;
 font-style: normal;
 font-weight: 800;
 line-height: 150%; /* 54px */
}
.row-client {
 padding: var(--Space-space-0, 0px);
 align-items: flex-start;
 gap: var(--Space-space-20, 20px);
}

.col-logo {
 display: flex;
 width: 200px;
 height: 100px;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 gap: 8px;
 padding: auto; /* Add padding auto */
}
.col-logo img {
 max-width: 100%; /* Ensure images don't exceed the width of the column */
 height: auto; /* Maintain the aspect ratio of the images */
}

div.scroll-container {
 display: flex;
 overflow: hidden; /* Hide the scrollbar */
 white-space: nowrap;
 animation: scroll-left 10s linear infinite; /* Continuous scroll animation */
}

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

@keyframes scroll-left {
 0% {
  transform: translateX(0);
 }
 100% {
  transform: translateX(-100%); /* Move images to the left */
 }
}

/*  */

/* footer */
.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;
}

.col-three {
 width: 200px;
}
/* background */
.background-container {
 /* background-image: url('{{asset('/asset/Polygon2blue.svg')}}'); */
 background-size: cover; /* Atur sesuai kebutuhan desain Anda */
 background-repeat: no-repeat;
 display: flex;
 flex-direction: column; /* Mengatur tata letak menjadi vertikal (baris tunggal) */
}

/* Style the tab */
.subtitle-frame {
 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: 20px;
}
.frame-tabs {
 display: block;
 padding: 100px 120px;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 gap: 40px;
 align-self: stretch;
 margin-bottom: 100px;
}

.text-learn {
 color: var(--Brand-Primary-600, #d9292f);
 text-align: start;

 /* 14px/medium */
 font-family: Inter, sans-serif;
 font-size: 14px;
 font-style: normal;
 font-weight: 500;
 line-height: 145%; /* 20.3px */
}
.tab {
 float: right; /* Mengubah float menjadi right */
 height: 300px;
 border-color: #b61f24;
}
.tabcontent {
 display: none;
 opacity: 0;
 transition: opacity 0.5s ease-in-out;
}

.tabcontent.active {
 display: block;
 opacity: 1;
}
.accordion-button {
 background-color: none;
}
.accordion-header {
 background-color: none;
}

/* tes tavs */
/* Style the tab */
.tab {
 float: right;
 width: 25%;
 height: 300px;
 height: 100%;
}
.tabcontent {
 float: left;
 padding: 0px 12px;
 width: 75%;
 border-left: none;
 height: 300px;
}
/* Style the buttons inside the tab */
.tab button {
 display: block;
 background-color: transparent;

 padding: 10px 20px;
 width: 100%;
 border: transparent;
 outline: transparent;
 text-align: left;
 cursor: pointer;
 transition: 0.3s;

 color: #3c476c;

 /* 20px/semibold */
 font-family: Inter, sans-serif;
 font-size: 20px;
 font-style: normal;
 font-weight: 600;
 line-height: 130%; /* 26px */
}

/* Change background color of buttons on hover */
.tab button:hover {
 background-color: none;
}

/* Create an active/current "tab button" class */
.tab button.active {
 color: #d9292f;
 border-top: none;
 border-top: 1px solid #d9292f;
 border-right: 1px solid #d9292f;
 border-left: 1px solid #d9292f;
 border-radius: 8px;
 border-bottom-right-radius: 0;
 border-bottom-left-radius: 0;
}
.tab button.active span {
 color: #000000;
 rotate: -180deg;
}
.tab button.active::before {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 font-size: 12px;
 color: #3c476c;
 border: 1px solid #d9292f;
}
/* Style the tab content */

.img-tabs {
 width: 100%;
}
.tabs-acc {
 color: var(----Dark-900, #3c476c);

 /* 16px/regular */
 font-family: Inter, sans-serif;
 font-size: 16px;
 font-style: normal;
 font-weight: 400;
 line-height: 145%; /* 23.2px */
}
.body-accordion {
 padding: 10px 20px;
 flex-direction: column;
 justify-content: space-between;
 align-items: flex-start;
 border-top: none;
 border-bottom: 1px solid #d9292f;
 border-right: 1px solid #d9292f;
 border-left: 1px solid #d9292f;
 border-radius: 8px;
 border-top-right-radius: 0;
 border-top-left-radius: 0;

 border: 1px solid var(--Kazee-Primary-300, #d9292f);
}
/* accordion */
.frame-accordion {
 display: flex;
 padding: 100px 120px;
 flex-direction: column;
 align-items: flex-start;
 gap: 20px;
 align-self: stretch;
 margin-bottom: 200px;
}

.accordian {
 width: 100%;
 display: block;
}

.accordian .card-acc {
 border-radius: 8px;

 margin-bottom: 20px;
 float: left;
 width: 100%;
}
.accordian .card-acc .card-header-acc h3 {
 cursor: pointer;
 position: relative;

 margin: 0;
 padding: 15px 20px;
 border-radius: 8px;
}
.accordian .card-acc .card-header-acc {
 position: relative;
}
.accordian .card-acc .card-header-acc span {
 position: absolute;
 right: 20px;
 top: 12px;
 height: 25px;
 width: 25px;
 color: #fba6a9;
 text-align: center;
 line-height: 25px;
 font-size: 13px;
}

.accordian .card-acc .card-body-acc {
 padding-left: 20px;
 padding-right: 20px;
 padding-bottom: 20px;
}
.accordian .card .card-body-acc {
 display: none;
}
/*open one card by default*/
.accordian .card-acc:nth-child(1) .card-body {
 display: block;
}
.accordian .card-acc .card-body-acc p {
 font-size: 15px;
 line-height: 24px;
 color: #444444;
 margin: 0px;
}
.accordian.active span {
 rotate: -180deg;
}
.title-acc {
 color: var(----Dark-900, #3c476c);

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

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

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

/* tes tavs */
/* Style the tab */
.tab {
 float: right;
 width: 25%;
 height: 300px;
 height: 100%;
}
.tabcontent {
 float: left;
 padding: 0px 12px;
 width: 75%;
 border-left: none;
 height: 300px;
}
/* Style the buttons inside the tab */
.tab button {
 display: block;
 background-color: transparent;

 padding: 10px 20px;
 width: 100%;
 border: transparent;
 outline: transparent;
 text-align: left;
 cursor: pointer;
 transition: 0.3s;

 color: #3c476c;

 /* 20px/semibold */
 font-family: Inter, sans-serif;
 font-size: 20px;
 font-style: normal;
 font-weight: 600;
 line-height: 130%; /* 26px */
 margin-bottom: 10px;
}

/* Change background color of buttons on hover */
.tab button:hover {
 background-color: none;
}

/* Create an active/current "tab button" class */
.tab button.active {
 color: #d9292f;
 border-top: none;
 border-top: 1px solid #d9292f;
 border-right: 1px solid #d9292f;
 border-left: 1px solid #d9292f;
 border-radius: 8px;
 border-bottom-right-radius: 0;
 border-bottom-left-radius: 0;
}
.tab button.active span {
 color: #000000;
 rotate: -180deg;
}
.tab button.active::before {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 font-size: 12px;
 color: #3c476c;
 border: 1px solid #d9292f;
}
/* Style the tab content */

.img-tabs {
 width: 100%;
}
.tabs-acc {
 color: var(----Dark-900, #3c476c);

 /* 16px/regular */
 font-family: Inter, sans-serif;
 font-size: 16px;
 font-style: normal;
 font-weight: 400;
 line-height: 145%; /* 23.2px */
}
.body-accordion {
 padding: 10px 20px;
 flex-direction: column;
 justify-content: space-between;
 align-items: flex-start;
 border-top: none;
 border-bottom: 1px solid #d9292f;
 border-right: 1px solid #d9292f;
 border-left: 1px solid #d9292f;
 border-radius: 8px;
 border-top-right-radius: 0;
 border-top-left-radius: 0;

 border: 1px solid var(--Kazee-Primary-300, #d9292f);
}

/* marquee */
.marquee-frame {
 display: flex;
 padding: 100px 120px;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 gap: 40px;
 align-self: stretch;
 width: 100%;
}

/* 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);
}

.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 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;
}

.aos-animate {
 animation: zoom-in-right-animation 5s;
}

@keyframes zoom-in-right-animation {
 from {
  transform: translateX(100%);
  opacity: 0;
 }
 to {
  transform: translateX(0);
  opacity: 1;
 }
}

@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");

.navbar {
 display: flex;
 width: 100%;
 padding: 30px 120px;
 align-items: center;
 gap: var(--Space-space-10, 10px);
 border-radius: var(--Space-space-0, 0px);
 background: #fff;
}
.btn-navbar {
 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-color: #b61f24;
 background: var(--Brand-Primary-700, #b61f24);
 color: #fef2f2;
 border: none;
}
.btn-navbar:hover {
 background-color: #d9292f;
}
/*  */
/* CSS untuk gambar dan animasi transisi */

.img-mac {
 justify-content: center;
 margin-top: -200px;
 margin-left: 120px;
}
.img-rand img {
 transition: transform 1s ease-out;
}

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

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

.img-rand {
 display: contents;
 margin-top: 50px;
}
.img-hero1 {
 z-index: 2;
 margin-top: -80px;
 margin-left: 700px;
}

.img-hero2 {
 z-index: 2;
 /* margin-top: 30px; */
 margin-left: -700px;
}
.img-hero3 {
 /* position: relative; */
 z-index: 1;
 /* margin-top: -70px; */
 margin-left: -600px;
}
.img-hero4 {
 z-index: 1;
 /* position: relative; */
 margin-top: -500px;
 margin-left: 800px;
}

.text-hero {
 margin-top: -10px;
 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 */
}
.mediakazee {
 color: var(--Kazee-Primary-600, #d9292f);
 text-align: center;
 font-family: "Plus Jakarta Sans";
 font-size: 28px;
 font-style: normal;
 font-weight: 600;
 line-height: 130%; /* 36.4px */
}
.btn-demo {
 display: flex;
 width: 220px;
 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;
}
.btn-demo:hover {
 border-radius: 9999px;
 border: 2px solid var(----Blue-600, #0083d1);
 background: var(--Blue-600, #0083d1);
 color: #fff;
 .arrowpath {
  fill: white;
 }
}
.card-hero {
 width: 950px;
 height: 550px;
}

/* 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);
}

.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;
}

@keyframes scrolling {
 0% {
  transform: translateX(0);
 }

 100% {
  transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements)));
 }
}

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

.marquee-content li img {
 width: 100%;
 /* height: 100%; */
}
/* frame-mon */

/*  */
/* frame-solution */
.frame-tabs {
 display: block;
 padding: 100px 120px;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 gap: 40px;
 align-self: stretch;
 margin-bottom: 100px;
}

.title-frame {
 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 */
}

.text-learn {
 color: var(--Brand-Primary-600, #d9292f);
 text-align: start;

 /* 14px/medium */
 font-family: Inter, sans-serif;
 font-size: 14px;
 font-style: normal;
 font-weight: 500;
 line-height: 145%; /* 20.3px */
}
.tab {
 float: right; /* Mengubah float menjadi right */
 height: 300px;
 border-color: #b61f24;
}
.tabcontent {
 display: none;
 opacity: 0;
 transition: opacity 0.5s ease-in-out;
}

.tabcontent.active {
 display: block;
 opacity: 1;
}
.accordion-button {
 background-color: none;
}
.accordion-header {
 background-color: none;
}
.arrow {
 position: absolute;
 right: 130px;
}
/* Style the tab */
.tab {
 float: right;
 width: 25%;
 height: 300px;
 height: 100%;
}
.tabcontent {
 float: left;
 padding: 0px 12px;
 width: 75%;
 border-left: none;
 height: 300px;
}
/* Style the buttons inside the tab */
.tab button {
 display: block;
 background-color: transparent;

 padding: 10px 20px;
 width: 100%;
 border: transparent;
 outline: transparent;
 text-align: left;
 cursor: pointer;
 transition: 0.3s;

 color: #3c476c;

 /* 20px/semibold */
 font-family: Inter, sans-serif;
 font-size: 20px;
 font-style: normal;
 font-weight: 600;
 line-height: 130%; /* 26px */
}

/* Change background color of buttons on hover */
.tab button:hover {
 background-color: none;
}

/* Create an active/current "tab button" class */
.tab button.active {
 color: #d9292f;
 border-top: none;
 border-top: 1px solid #d9292f;
 border-right: 1px solid #d9292f;
 border-left: 1px solid #d9292f;
 border-radius: 8px;
 border-bottom-right-radius: 0;
 border-bottom-left-radius: 0;
}
.tab button.active span {
 color: #000000;
 rotate: -180deg;
}
.tab button.active::before {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 font-size: 12px;
 color: #3c476c;
 border: 1px solid #d9292f;
}
/* Style the tab content */

.img-tabs {
 width: 100%;
}
.tabs-acc {
 color: var(----Dark-900, #3c476c);

 /* 16px/regular */
 font-family: Inter, sans-serif;
 font-size: 16px;
 font-style: normal;
 font-weight: 400;
 line-height: 145%; /* 23.2px */
}
.body-accordion {
 padding: 10px 20px;
 flex-direction: column;
 justify-content: space-between;
 align-items: flex-start;
 border-top: none;
 border-bottom: 1px solid #d9292f;
 border-right: 1px solid #d9292f;
 border-left: 1px solid #d9292f;
 border-radius: 8px;
 border-top-right-radius: 0;
 border-top-left-radius: 0;

 border: 1px solid var(--Kazee-Primary-300, #d9292f);
}

/* frame take */
.frame-take {
 display: flex;
 width: 100%;
 padding: 100px 120px;
 align-items: center;
 gap: var(--Space-space-80, 80px);
 background: #bd0a11;
}

.text-take {
 color: var(--Base-0, #fff);

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

.content-take {
 color: var(----Base-100, #f5f5f5);

 /* 18px/regular */
 font-family: Inter, sans-serif;
 font-size: 18px;
 font-style: normal;
 font-weight: 400;
 line-height: 130%; /* 23.4px */
}
.btn-started {
 display: flex;
 min-width: 58px;
 min-height: 58px;
 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: var(--Radius-rad-8, 8px);
 background: var(--Brand-Primary-50, #fef2f2);
 border: none;

 color: var(--Brand-Primary-800, #971d21);
 text-align: center;

 /* 20px/medium */
 font-family: Inter, sans-serif;
 font-size: 16px;
 font-style: normal;
 font-weight: 500;
 line-height: 130%; /* 26px */
 margin-top: 28px;
}
.row-take {
 width: 100%;
}

/* frame-media */
/* .title-mediascroll {
  position: sticky;
  top: 130px; 
  z-index: 1000;
 padding: 20px 0;
} */
.media-monitoring {
 display: flex;
 width: 100%;
 padding: 100px 120px;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 gap: 40px;
}
.title-monitoring {
 z-index: 1000;
 position: sticky;
 top: 0;
 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 */
}

:root {
 --cards: 4;
 --cardHeight: 480px;
 --cardTopPadding: 1.5em;
 --cardMargin: 4vw;
}

.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;
}

.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;
}
.card-body1 {
 margin-top: 150px;
 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);
}
.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-950, #282d43);

 /* 29px/medium */
 font-family: Inter, sans-serif;
 font-size: 29px;
 font-style: normal;
 font-weight: 500;
 line-height: 130%; /* 37.7px */
}
.text-no {
 color: var(----Base-800, #464646);
 font-family: Inter, sans-serif;
 font-size: 23px;
 font-style: normal;
 font-weight: 300;
 line-height: 130%; /* 29.9px */
}
.row-sc {
 display: flex;
 align-items: center;
}

/* frame-video  */
.frame-video {
 display: flex;
 width: 100%;
 padding: 100px 120px;
 align-items: center;
 gap: 40px;
}
.card-video {
 display: flex;
 padding: 40px;
 align-items: center;
 align-self: stretch;
 gap: 40px;
 flex: 1 0 0;
 border-radius: var(--Space-space-20, 20px);
 background: var(----Dark-50, #f0f5fa);

 /* shadow-l/light */
 box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.08), 0px 10px 15px -3px rgba(0, 0, 0, 0.12);
}
.text-video {
 color: var(----Base-800, #464646);

 /* 26px/medium */
 font-family: Inter, sans-serif;
 font-size: 26px;
 font-style: normal;
 font-weight: 500;
 line-height: 130%; /* 33.8px */
}
.col-textvideo {
 display: flex;
 align-items: center;
}

.img-pc-hero {
 width: 100%;
}
.lap {
 display: flex;
 margin-top: 40px;
 position: relative;
 z-index: 2;
 width: 100%;
 height: 596.016px;
 flex-shrink: 0;

 background-position: center;
 background-size: contain;
 background-repeat: no-repeat;
 background-image: url("../../../Solution/media/asset/iMac24inch.svg");

 /*  */
 justify-content: center;
}

.frame-start {
 display: flex;
 width: 100%;
 padding: 100px 120px;
 flex-direction: column;
 justify-content: start;
 align-items: start;
 gap: 40px;
 border-radius: var(--Space-space-0, 0px);
 background: #b61f24;
 background-image: url("../../../Solution/media/asset/Rectangle\ 838.svg");
 background-repeat: no-repeat;
 background-position: 100% 0%;
}

video {
 width: 100%;
 height: 100%;
}

.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;
}

@media (max-width: 768px) {
 .card-video {
  display: flex;
  padding: 20px;
  align-items: center;
  align-self: stretch;
  gap: 10px;
  flex: 1 0 0;
  border-radius: var(--Space-space-20, 20px);
  background: var(----Dark-50, #f0f5fa);

  /* shadow-l/light */
  box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.08), 0px 10px 15px -3px rgba(0, 0, 0, 0.12);
 }
 .frame-video {
  width: 100%;
  display: flex;
  padding: 40px 40px;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
 }
 .row-video {
  flex-direction: column-reverse;
  text-align: center;
 }

 iframe {
  width: 100%; /* Mengisi lebar parent element */
  height: 200px; /* Atur tinggi sesuai kebutuhan Anda */
 }
 .text-video {
  font-size: 18px;
 }
}
/* frame join */
/* company */
.frame-join {
 padding: 80px 120px;
 flex-direction: column;
 align-items: flex-start;
 gap: 40px;
 margin-bottom: 80px;
 justify-content: center;
}

.title-join {
 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: 40px;
}
.company-name {
 color: var(----Dark-900, #3c476c);

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

.card-company {
 width: 100%;
 margin-bottom: 40px;
 display: flex;
 padding: 40px;
 align-items: center;
 gap: 40px;
 align-self: stretch;
 border-radius: 8px;
 border: 1px solid var(--Kazee-Primary-200, #d9292f);
 background: var(--Netral-White, #fff);
 border-color: #d9292f;
}

.row-company {
 display: flex;
 align-items: center;
}
.row-company::after {
 content: "";
 position: absolute;
 top: 0;
 bottom: 0;
 left: 14%;
 border-left: 1px solid #fdcbcd;
}

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

 /* 16px/regular */
 font-family: Inter, sans-serif;
 font-size: 16px;
 font-style: normal;
 font-weight: 400;
 line-height: 145%; /* 23.2px */
}
.border-end {
 border-color: #d9292f;
 border-right: 2px solid #d9292f; /* Adjust border width as needed */
 padding-right: 20px; /* Adjust padding based on your design */
}

.row-company {
 position: relative;
}

.row-company::after {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 16%;
 border-left: 1px solid #fdcbcd;
}

.card-com {
 display: flex;
 padding: 40px;
 align-items: center;
 gap: 40px;
 align-self: stretch;
 margin-bottom: 40px;
}

.col-imgcom {
 width: 20%;
 margin-right: 20px;
 border-right: 1px solid #ecb74b;
 display: flex;
 align-items: center;
}
.col-company {
 width: 80%;
}
/* frame good  */

.frame-goodcom {
 display: flex;
 width: 100%;
 padding: 100px 120px;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 gap: 40px;
 border-radius: var(--Space-space-0, 0px);
 background: #b61f24;
}
.card-good {
 display: flex;
 padding: var(--Space-space-20, 20px);
 flex-direction: column;
 justify-content: center;
 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);
 height: 100%;
 width: 100%;
}
.title-good {
 color: var(--Base-0, #fff);
 text-align: center;

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

.good {
 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 */
}

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

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

.row-good {
 gap: 30px;
}
.line2 {
 border-top: 1px solid #dddfdf;
 opacity: 0.8;
 width: 100%;
}

/*  */

/* frame-startdata */

.title-start {
 color: var(--Netral-White, #fff);

 /* 36px/bold */
 font-family: Inter, sans-serif;
 font-size: 36px;
 font-style: normal;
 font-weight: 700;
 line-height: 120%; /* 43.2px */
 margin-bottom: 40px;
}
.text-start {
 color: var(--Netral-White, #fff);

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

 margin-bottom: 40px;
}
/* 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;
}

/* monitor */
.frame-monitoringcoverage {
 overflow: hidden;
 display: flex;
 padding: 100px 120px;
 flex-direction: column;
 align-items: flex-start;
 gap: 40px;
 align-self: stretch;
}
.title-con {
 color: var(----Base-950, #292929);
 text-align: center;
 align-self: stretch;
 /* 36px/bold */
 font-family: Inter, sans-serif;
 font-size: 36px;
 font-style: normal;
 font-weight: 700;
 line-height: 120%; /* 43.2px */
}
.card-cov {
 display: flex;
 width: 100%;
 height: 100%;
 padding: var(--Space-space-20, 20px);
 justify-content: center;
 align-items: center;
 gap: var(--Space-space-10, 10px);
 align-self: stretch;
 border-radius: 8px;
 border: 1px solid var(----Base-200, #dedede);
 background: var(--Netral-White, #fff);
}
.lineee {
 border-bottom: 1px solid #fdcbcd;
 margin-bottom: 20px;
}
.title-media {
 color: var(----Dark-900, #3c476c);

 /* 20px/semibold */
 font-family: Inter, sans-serif;
 font-size: 20px;
 font-style: normal;
 font-weight: 600;
 line-height: 130%; /* 26px */
 margin-bottom: 0px;
 margin-top: 0px;
}
.row-cardcon {
 align-items: center;
}
.monrow {
 gap: 40px;
}

.col-txtmon {
 margin-left: 20px;
}

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

 /* 16px/regular */
 font-family: Inter, sans-serif;
 font-size: 16px;
 font-style: normal;
 font-weight: 400;
 line-height: 145%; /* 23.2px */
}
.linee {
 border-right: 1px solid #b61f24;
}

/* mobile */

@media (max-width: 600px) {
 .marquee {
  overflow: hidden;
  position: relative;
 }
 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%;
 }
}
@media only screen and (max-width: 800px) {
 /* .text-hero {
    font-size: 30px;
} */
 .text-hero {
  font-size: 28px;
 }
 .mediakazee {
  font-size: 22px;
 }
 .img-mac {
  width: 45%;
  margin-top: -50px;
  margin-left: 50px;
 }
 .img-hero1,
 .img-hero2,
 .img-hero3,
 .img-hero4 {
  width: 30%;
 }

 .img-hero1 {
  z-index: 2;
  margin-top: -30px;
  margin-left: 100px;
 }

 .img-hero2 {
  z-index: 2;
  margin-top: 0px;
  margin-left: -100px;
 }
 .img-hero3 {
  /* position: relative; */
  z-index: 1;
  margin-top: -70px;
  margin-left: -200px;
 }
 .img-hero4 {
  z-index: 1;
  /* position: relative; */
  margin-top: -100px;
  margin-left: 200px;
 }
 .img-rand.animate-down img {
  transform: translateY(12px); /* Jarak translasi ketika scroll ke bawah */
 }

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

 /* card con */
 .title-con {
  font-size: 23px;
 }

 .moncol {
  margin-bottom: 0px;
 }
 .linee {
  border: none;
 }
 /* tabs */
 .frame-tabs {
  display: flex;
  padding: var(--Space-space-20, 20px);
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
 }
 .acc-item {
  background-color: transparent;
 }
 .img-tabs {
  max-width: 320px; /* Set the width to 100% by default */
  display: block; /* Center the image */
  margin: auto; /* Center the image */
 }

 .tabcontent {
  order: 1; /* Reset order for content on larger screens */
  width: 100%; /* Adjust the width as needed */
  margin-bottom: -150px;
 }

 .acc-item {
  background-color: transparent;
 }

 .tab {
  order: 1; /* Reset order for tabs on larger screens */
  width: 100%; /* Adjust the width as needed */
 }
 .arrow {
  position: absolute;
  right: 30px;
 }
 .content {
  order: 0; /* Reset order for content on larger screens */
  width: 100%; /* Adjust the width as needed */
 }
 .frame-goodcom {
  width: 100%;
  display: flex;
  padding: 40px var(--Space-space-20, 20px);
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;
  border-radius: var(--Space-space-0, 0px);
  background: #bd0a11;
 }
 .col-good {
  flex: 1 0 100%;
 }
 .moncol {
  flex: 1 0 100%;
 }
 .row-good {
  flex-direction: column;
 }
 .title-good {
  color: var(--Base-0, #fff);
  text-align: center;

  /* 36px/bold */
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%; /* 43.2px */
 }
 .frame-take {
  width: 100%;
  display: flex;
  padding: 40px 40px;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
 }
 /* frame-media */
 .media-monitoring {
  display: flex;
  padding: 40px var(--Space-space-20, 20px);
  flex-direction: column;
  align-items: flex-start;
 }
 .title-monitoring {
  font-size: 23px;
  justify-content: center;
  text-align: center;
  align-self: stretch;
 }
 .imgmedia {
  width: 200px;
 }
 /* #card1 .card-body1 {
    padding: 20px;
  }
  #card2 .card-body1 {
    padding: 20px;
  }
  #card3 .card-body1 {
    padding: 20px;
  }
  #card4 .card-body1 {
    padding: 20px;
  } */

 /* company big */
 .frame-join {
  display: flex;
  padding: 40px var(--Space-space-20, 20px);
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
 }
 .title-join {
  font-size: 23px;
  justify-content: center;
  text-align: center;
  align-self: stretch;
 }
 .title-frame-com {
  color: var(--Kazee-Primary-600, #d9292f);
  text-align: center;

  /* 23px/semibold */
  font-family: Inter, sans-serif;
  font-size: 23px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%; /* 29.9px */
 }
 .card-com {
  display: flex;
  padding: var(--Space-space-20, 20px);
  align-items: center;
  align-self: stretch;
  margin-bottom: 20px;
 }
 .row-comp {
  flex-direction: column; /* Change to a column layout on smaller screens */
  height: 500px;
 }

 .col-imgcom {
  border-right: none; /* Add border-right to create separation */
 }

 .img-comp {
  width: 40px; /* Adjust the width of the image as needed */
  height: auto; /* Maintain aspect ratio while resizing */
 }

 .company-name {
  font-size: 20px;
  border-bottom: 1px solid #d9292f; /* Add border-bottom to h1 */
  padding-bottom: 10px; /* Add padding to space out the border */
 }

 .col-company {
  order: 2; /* Change the order to 2 to move the company name and paragraph below the image */
 }
 /* frame-start */
 .frame-start {
  display: flex;
  padding: 40px var(--Space-space-20, 20px);
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
 }

 .title-start {
  font-size: 23px;
 }
 .row-start {
  flex-direction: column; /* Change to a column layout on smaller screens */
 }
}

@media (max-width: 768px) {
 .title-frame {
  font-size: 23px;
  /* margin-bottom: 10px; */
 }
 .subtitle-frame {
  font-size: 16px;
  justify-content: center;
  align-self: stretch;
  margin-top: -40px;
 }

 .cardscroll {
  margin-bottom: 30px;
 }

 .card-body1 {
  text-align: center;
  margin-top: 0;
 }

 .title-no {
  font-size: 18px;
 }

 .text-no {
  font-size: 0.9em;
 }

 iframe {
  height: 150px; /* Atur tinggi sesuai kebutuhan Anda */
 }

 .lap {
  margin-top: -200px;
 }

 .img-lap {
  width: 100%;
 }

 .text-hero {
  font-size: 18px;
  /* Atur ukuran font sesuai kebutuhan Anda untuk layar kecil */
 }

 .hero-content {
  font-size: 14px;
  /* Atur ukuran font sesuai kebutuhan Anda untuk layar kecil */
 }

 .btn-demo {
  font-size: 14px;
  /* Atur ukuran font sesuai kebutuhan Anda untuk layar kecil */
 }

 .frame-footer {
  padding: 20px; /* Atur padding sesuai kebutuhan */
 }

 .row-fot {
  flex-direction: column;
 }

 .title-footer {
  margin-top: 20px;
 }

 .text-footer {
  margin-bottom: 10px;
 }

 .footer-last {
  text-align: center;
 }

 /* Menambahkan ruang antara ikon media sosial pada tampilan mobile */
 .row-foot2 .col {
  margin-bottom: 10px;
 }

 /* marquee client content */

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

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

 /* first section */

 .frame-hero {
  margin-top: 80px;
  display: flex;
  width: 100%;
  padding: var(--Space-space-40, 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);
 }

 .img-hero4 {
  width: 112px;
  height: 58px;
  /* margin-top: -355px;
        margin-left: 200px; */
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.05);
 }

 .img-hero3 {
  width: 50px !important;
  height: 58px;
  /* margin-left: -285px;
        margin-top: -326px; */
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.05);
 }

 .img-hero2 {
  width: 115px;
  height: 66px;
  /* margin-top: -202px;
        margin-left: 215px; */
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.05);
 }

 .img-hero1 {
  width: 110px;
  height: 58px;
  z-index: 2;
  /* margin-top: -190px;
        margin-left: -144px; */
  box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.05);
 }

 .img-pc-hero {
  width: 320px;
  height: 181.748px;
 }

 /* navbar */

 .navbar {
  display: flex;
  width: 100%;
  padding: 0;
  align-items: center;
  gap: var(--Space-space-10, 10px);
  border-radius: var(--Space-space-0, 0px);
  background: #fff;
 }
}