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

.text-hero1 {
    color: var(----Neon-800, #00654f);
    text-align: center;
    font-family: "Plus Jakarta Sans";
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%; /* 36.4px */
}
.text-hero2 {
    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;
    z-index: 2;
    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-hero2 {
    width: 100%;
    z-index: 1;
    margin-top: 0px;
    margin-left: 0px;
}
.img-hero3 {
    width: 100%;
    z-index: 2;
    margin-top: -30px;
    /* margin-left: 400px; */
    margin-right: 400px;
}
.row-imghero {
    margin-top: -50px;
}
/*  */

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

.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 {
    max-width: 200px;
    width: 100%;
    /* 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) {
    .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-spatial */
.frame-spatial {
    display: flex;
    width: 100%;
    padding: 100px 120px;
    align-items: center;
    gap: 40px;
}
.title-spatial {
    color: var(----Base-950, #292929);

    /* 36px/bold */
    font-family: Inter, sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 43.2px */
    margin-top: 100px;
}
.text-spatial {
    color: var(----Base-700, #525252);
    font-family: Inter, sans-serif;
    font-size: 23px;
    font-style: normal;
    font-weight: 400;
    line-height: 180%; /* 41.4px */
}

.title-monitoring {
    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: 6;
    --cardHeight: 480px;
    --cardTopPadding: 1.5em;
    --cardMargin: 4vw;
}

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

#cards {
    list-style: none;
    padding-left: 0;
    display: grid;
}

#card1 {
    --index: 1;
}

#card2 {
    --index: 2;
}

#card3 {
    --index: 3;
}

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

.cardscroll {
    display: flex;
    justify-content: center;
    position: sticky;
    top: 0;
    padding-top: calc(var(--index) * var(--cardTopPadding));
}

#card1 .card-body1 {
    display: flex;
    width: 540px;
    height: 442px;
    padding: var(--Space-space-20, 20px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Space-space-20, 20px);
}

#card2 .card-body1 {
    display: flex;
    width: 540px;
    height: 442px;
    padding: var(--Space-space-20, 20px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Space-space-20, 20px);
}

#card3 .card-body1 {
    display: flex;
    width: 540px;
    height: 442px;
    padding: var(--Space-space-20, 20px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Space-space-20, 20px);
}

#card4 .card-body1 {
    display: flex;
    width: 540px;
    height: 442px;
    padding: var(--Space-space-20, 20px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Space-space-20, 20px);
}
#card5 .card-body1 {
    display: flex;
    width: 540px;
    height: 442px;
    padding: var(--Space-space-20, 20px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Space-space-20, 20px);
}
#card6 .card-body1 {
    display: flex;
    width: 540px;
    height: 442px;
    padding: var(--Space-space-20, 20px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Space-space-20, 20px);
}

.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);
}
.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(--Kazee-Primary-700, #b61f24);

    /* 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(----Base-900, #3d3d3d);
    /* 16px/regular */
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 145%; /* 23.2px */
}
.row-sc {
    display: flex;
    align-items: center;
}

.col-spatial1 {
    position: sticky;
    top: 130px;
    height: 50vh;

}

/* frame complate */
.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-chart {
    width: 100%;
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: center;
    gap: var(--Space-space-20, 20px);
    justify-content: center;
    border-radius: var(--Space-space-10, 10px);
    border: var(--Space-space-0, 1px) solid var(----Grey-200, #dddfdf);
    justify-content: center;
}
.card-complate {
    height: 100%;
    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%;
}
/*  */
/* frame location */
.frame-location {
    display: flex;
    padding: 100px 120px;
    width: 100%;
    height: 400px;
}
.text-location {
    color: var(--Kazee-Primary-50, #fef2f2);

    /* 26px/regular */
    font-family: Inter, sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 33.8px */
}
.row-location {
    display: flex;
    align-items: center;
}
.col-location {
    display: flex;
}
/* 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;
    gap: 40px;
}
.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: #0c725c;
    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-started {
    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-50, #fff);
    border: none;

    color: var(--Brand-Primary-800, #45494a);
    text-align: center;

    /* 20px/medium */
    font-family: Inter, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%; /* 26px */
    margin-top: 28px;
}
.btn-started: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%;
}
/*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);
    }
    .text-hero2{
font-size: 28px;
    }
    .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) {
    /* .img-hero2 { */
        /* width: 35%; */
    /* } */
    .img-hero3 {
        width: 35%;
    }
    .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;
    }

}