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

* {
 box-sizing: border-box;
}
.mySlides {
 display: none;
}
img {
 vertical-align: middle;
}

/* Slideshow container */
.slideshow-container {
 max-width: 1000px;
 position: relative;
 margin: auto;
}

/* Caption text */
.text {
 color: #f2f2f2;
 font-size: 15px;
 padding: 8px 12px;
 position: absolute;
 bottom: 8px;
 width: 100%;
 text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
 color: #f2f2f2;
 font-size: 12px;
 padding: 8px 12px;
 position: absolute;
 top: 0;
}

/* The dots/bullets/indicators */

.active {
 background-color: #717171;
}
/* Fading animation */
.fade {
 animation-name: fade;
 animation-duration: 3s;
 animation-timing-function: ease-out; /* Tambahkan timing function untuk fade up */
 overflow: hidden; /* Hindari gambar muncul di luar kontainer saat fading */
 margin-right: -10px;
 margin-top: -20px;
}

@keyframes fade {
 from {
  opacity: 0;
  transform: scale(0.8);
 } /* Mulai dari opacity 0 dan scale 0.8 */
 to {
  opacity: 1;
  transform: scale(1);
 } /* Berakhir dengan opacity 1 dan scale 1 */
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
 .text {
  font-size: 11px;
 }
}

@keyframes slideRight {
 0% {
  transform: translateX(-100%);
 }
 100% {
  transform: translateX(0);
 }
}
@keyframes slideLeft {
 0% {
  transform: translateX(100%);
 }
 100% {
  transform: translateX(0);
 }
}
.img-mobile {
 position: relative;
 margin-top: -440px;
 margin-left: 850px;
}
.frame-hero {
 display: flex;
 width: 100%;
 padding: 80px 120px 100px 120px;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 gap: 40px;
 margin-top: 73px;
}
.text-hero {
 max-width: 800px;
 color: var(----Dark-900, #3c476c);
 text-align: center;
 font-family: "Plus Jakarta Sans";
 font-size: 41px;
 font-style: normal;
 font-weight: 800;
 line-height: 120%; /* 49.2px */
}
.hero-content {
 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 {
 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;
}

/* frame marque */

/* marquee */
.marquee-frame {
 width: 100%;
 padding-top: 100px;
 padding-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);
}

.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: 100px;
}

.frame-kazee {
 display: flex;
 width: 100%;
 padding: 100px 120px;
 flex-direction: column;
 align-items: center;
 gap: 40px;
}

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

.card-ka {
 display: flex;
 height: 320px;
 padding: 20px;
 flex-direction: column;
 align-items: center;
 gap: 10px;
 flex: 1 0 0;

 border-radius: 8px;
 border: 1px solid var(----Base-100, #f5f5f5);
 background: var(--Netral-White, #fff);
}

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

.span-card {
 border-bottom: 1px solid #0000;
}

.btn-card {
 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: none;
 background-color: #fafafa;
 color: var(--Brand-Primary-600, #d9292f);
 text-align: center;
 font-family: Inter, sans-serif;
 font-size: 14px;
 font-style: normal;
 font-weight: 500;
 line-height: 145%; /* 20.3px */
}

.spanline {
 border: 1px solid var(----Base-100, #f5f5f5);
 width: 100%;
}
/* frame take */
.frame-take {
 display: flex;
 width: 100%;
 height: 600px;
 padding: 80px 120px;
 /* 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;
}

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

.title-solution {
 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-solution {
 display: flex;
 width: 580px;
 padding: 20px;
 align-items: center;
 gap: 10px;
 border-radius: 8px;
 border: 1px solid var(----Base-200, #dedede);
 background: var(--Netral-White, #fff);
}

.borderline {
 border-right: 1px solid #0083d1;
 height: 100%;
}
.row-solution {
 gap: 30px;
}

.col-ass {
 display: flex;
 align-items: center;
}
/* frame inn */

.frame-inn {
 display: flex;
 padding: 40px 120px;
 /* padding: 100px 120px; */
 flex-direction: column;
 align-items: center;
 gap: 10px;
}

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

.text-inn {
 color: #000;
 font-family: Inter, sans-serif;
 font-size: 20px;
 font-style: normal;
 font-weight: 400;
 line-height: 180%; /* 36px */
 text-align: center;
}
.col-inn {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 padding: 29px 18.667px 29px 20px;
}

.row-inn {
 display: flex;
 padding: var(--Space-space-0, 0px);
 align-items: flex-start;
 gap: 22px;
 align-self: stretch;
}

.btn-inn {
 display: flex;
 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-10, 10px);
 border-radius: var(--Radius-rad-8, 8px);
 background: var(--Brand-Primary-500, #ec474d);
 border: none;

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

 /* 18px/medium */
 font-family: Inter, sans-serif;
 font-size: 18px;
 font-style: normal;
 font-weight: 500;
 line-height: 130%; /* 23.4px */
}
.icon-card {
 justify-content: center;
}
.title-icon-card {
 color: var(--Kazee-Primary-600, #d9292f);
 text-align: center;

 /* 20px/semibold */
 font-family: Inter;
 font-size: 20px;
 font-style: normal;
 font-weight: 600;
 line-height: 130%; /* 26px */
}
.text-icon-card {
 color: var(--Dark-950, #282d43);
 text-align: center;

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

/* company */
.frame-join {
 padding: 80px 120px;
 flex-direction: column;
 align-items: flex-start;
 gap: 40px;
 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%;
}
/*  */
.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;
}
.row-inn {
 gap: 20px;
}

.col-inn {
 transition: transform 0.3s ease-in-out; /* Efek transisi ketika ada perubahan */
}

.col-inn:hover {
 transform: translateY(-20px); /* Sesuaikan nilai ini sesuai dengan keinginan Anda */
}

/*  */

/* Style untuk tampilan mobile */
@media (max-width: 768px) {
 .card-com {
  flex-direction: column;
 }

 .col-imgcom {
  margin-bottom: 20px;
 }
}
/* 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: #bd0a11;
}
.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;
}

/* tab */
/* Style the tab */
.tab {
 display: flex;
 justify-content: center;
 overflow: hidden;
 width: 100%;
 gap: 10px;
 border-radius: var(--Space-space-10, 10px);
 background: var(----Brand---Primary-50, #fef2f2);
 padding: 10px;
}

/* Style the buttons inside the tab */
.tab button {
 background-color: inherit;
 float: center;
 border: none;
 outline: none;
 cursor: pointer;

 transition: 0.3s;

 padding: var(--Space-space-12, 12px) var(--Space-space-16, 16px);
 justify-content: center;
 align-items: center;
 gap: var(--Space-space-10, 10px);
 flex: 1 0 0;

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

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

/* Change background color of buttons on hover */

/* Create an active/current tablink class */
.tab button.active {
 background-color: #ec474d;
 border-radius: var(--Radius-rad-8, 8px);
 background: var(--Brand-Primary-500, #ec474d);

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

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

/* Style the tab content */
.tabcontent {
 display: none;
 padding: 6px 12px;
 border-top: none;
 width: 100%;
}
.title-tabcon {
 color: var(----Dark-800, #465387);

 /* 20px/medium */
 font-family: Inter, sans-serif;
 font-size: 20px;
 font-style: normal;
 font-weight: 500;
 line-height: 130%; /* 26px */
}
.text-tab {
 margin-left: 10px;
 color: var(----Dark-800, #465387);

 /* 16px/medium */
 font-family: Inter, sans-serif;
 font-size: 16px;
 font-style: normal;
 font-weight: 500;
 line-height: 145%; /* 23.2px */
}
.col-texttab {
 align-items: center;
}
li::marker {
 font-size: 23px;
}

.row-tabs {
 align-items: center;
}
.icontab {
 margin-bottom: 20px;
}

.btn-more {
 display: flex;
 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: 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;

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

.btn-ser {
 display: flex;

 justify-content: center;
 align-items: center;
 gap: var(--Space-space-8, 8px);
 border-radius: var(--Radius-rad-8, 8px);
 border: none;
 background: var(--Base-0, #fff);

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

 /* 16px/medium */
 font-family: Inter, sans-serif;
 font-size: 16px;
 font-style: normal;
 font-weight: 500;
 line-height: 145%; /* 23.2px */
}
.linee-good {
 border-top: 1px solid #000;
}
/*  */
/* footer */
footer {
 display: flex;
 padding: 60px 120px;
 flex-direction: column;

 justify-content: center;
}
.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-align: center;
}
.row-fppter {
 display: flex;
 margin-bottom: 40px;
}
.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;
 text-align: center;
}

.row-iconsosmed {
 display: flex;
 align-items: center;
 gap: 14px;
 align-self: stretch;
}

.col-three {
 width: 200px;
}
/* frame-last */

.text-last {
 max-width: 620px;
 color: var(--Netral-White, #fff);
 font-family: Inter, sans-serif;
 font-size: 36px;
 font-style: normal;
 font-weight: 600;
 line-height: 150%; /* 54px */
}

.content-last {
 margin-top: 40px;
 color: var(--Netral-White, #fff);
 max-width: 620px;
 /* 23px/regular */
 font-family: Inter, sans-serif;
 font-size: 18px;
 font-style: normal;
 font-weight: 400;
 line-height: 130%; /* 29.9px */
}
.img-sol {
 width: 100%;
}
.btn-last {
 margin-top: 43px;
 display: flex;
 width: 220px;
 justify-content: start;
 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);
 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: 16px;
 font-style: normal;
 font-weight: 500;
 line-height: 130%; /* 26px */
}
.btn-last:hover {
 background-color: #b7bcbd;
}
.row-last {
 display: flex;
 align-items: center;
}
/* 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%;
}
/* mobile  */
@media (max-width: 575px) {
 .frame-kazee {
  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);
 }
}
@media (max-width: 767px) {
 .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;
 }
 /* Menjadikan kolom footer penuh lebar pada tampilan mobile */
 .col {
  width: 100%;
  /* text-align: center; */
 }
 /* Menambahkan ruang antara ikon media sosial pada tampilan mobile */
 .row-foot2 .col {
  margin-bottom: 10px;
 }
}

@media only screen and (max-width: 800px) {
 .text-tab {
  color: var(----Dark-800, #465387);

  /* 16px/medium */
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 145%; /* 23.2px */
  margin-left: 0px;
  text-align: start;
 }
 .text-last {
  font-size: 26px;
  margin-bottom: 20px;
 }

 .content-last {
  color: var(--Netral-White, #fff);
  max-width: 620px;
  /* 23px/regular */
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 29.9px */
 }

 /* navbar */
 #logo {
  width: 105px; /* Adjust the width of the logo for smaller screens */
 }
 .navbar {
  display: flex;
  width: 100%;
  padding: var(--Space-space-10, 10px) var(--Space-space-20, 20px);
  align-items: center;
  gap: var(--Space-space-10, 10px);
 }
 .btn-navbar {
  border: transparent;
  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);
  color: var(--Brand-Primary-50, #fef2f2);
  text-align: center;

  /* 14px/medium */
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 145%; /* 20.3px */
  border: none;
 }
 .btn-navbar:hover {
  background-color: #d9292f;
 }
 .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);
 }
 /* .text-hero {
        font-size: 30px;
    } */
 .img-mobile {
  position: relative;
  margin-top: -140px;
  margin-left: 310px;
  width: 60px;
 }
 /* marqu */

 @media (max-width: 600px) {
  .marquee-frame {
   scrollbar-width: none;
   display: block;
   width: 100%;
   /* margin-bottom: 100px; */
  }
  .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%;
  }
 }

 .frame-take {
  width: 100%;
  display: flex;
  padding: 100px 16px;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  height: auto;
 }
 .title-ka {
  font-size: 23px;
 }
 .col-card {
  flex: 1 0 100%;
  margin-bottom: 20px;
 }
 .moncol {
  flex: 1 0 100%;
 }
 .row-card {
  margin-bottom: 20px;
 }

 .icon-card {
  align-items: center;
  justify-content: center;
 }
 .title-solution {
  font-size: 23px;
  text-align: center;
 }
 .title-tabcon {
  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 */
 }

 .imgtabs {
  max-width: 100%;
 }
 .col-texttab {
  margin-top: 10px;
 }
 .tab {
  background-color: white;
  flex-direction: column;
  align-items: stretch;
 }

 .tablinks {
  width: 100%;
  margin-bottom: 5px;
 }
 .col-imgtabs {
  display: flex;
  justify-content: center;
 }
 /* frame-inn */

 .title-inn {
  font-size: 23px;
 }
 .row-inn {
  flex-direction: column;
 }
 .col-inn {
  flex: 1 0 100%;
 }
 /* goodcom */
 .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 */
 }

 /* footer */
 footer {
  margin-top: 80px;
  display: flex;
  padding: 40px 20px;
  flex-direction: column;
  align-items: flex-start;

  align-self: stretch;
 }

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

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

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

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

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