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

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");

.text-hero1 {
    max-width: 800px;
    color: var(--Kazee-Primary-700, #b61f24);
    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(----Base-950, #292929);
    text-align: center;

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

/*  */

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

/* 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(----Base-800, #464646);

    /* 16px/regular */
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 145%; /* 23.2px */
}
.text-tab {
    margin-left: 10px;
    color: var(----Base-800, #464646);

    /* 16px/regular */
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 145%; /* 23.2px */
}
.col-texttab {
    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 */
}
.title-sol {
    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 */
}
/*  */
.frame-insight {
    display: flex;
    width: 100%;
    padding: 100px 120px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.text-insight {
    max-width: 1200px;
    color: var(----Base-950, #292929);
    text-align: center;
    font-family: Inter, sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 43.2px */
}
.btn-insight {
    display: flex;
    width: 140px;
    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 */
}
/*  */
/* 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: 5;
    --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;
}

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

.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;
}
/* .title-mediascroll {
  position: sticky;
  top: 60px;
  z-index: 1000;
  padding: 20px 0;
} */
/* frame complate */
.frame-complate {
    display: flex;
    padding: 100px 120px;
    flex-direction: column;

    gap: 40px;
}

.kazee-text {
    color: var(--Kazee-Primary-700, #b61f24);
    font-family: Inter, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 18px */
}
.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 {
    width: 100%;
    flex-direction: column;
    display: flex;
    height: 250px;
    padding: 43px 18.667px 43px 20px;
    justify-content: center;
    /* align-items: center; */
    flex: 1 0 0;

    border-radius: 20px;
    border: 1px solid var(----Base-200, #dedede);
    background: var(--Netral-White, #fff);
}
.card-complate:hover {
    background-color: #971d21;

    .text-cardcom {
        color: #fff;
    }
    .kazee-text {
        color: #fff;
    }
}
.text-cardcom {
    color: var(--Dark-950, #282d43);
    text-align: center;

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

    margin-bottom: 20px;
}
.btn-learn {
    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);
    background: var(--Brand-Primary-50, #fef2f2);
    border: none;

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

    /* 14px/medium */
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 145%; /* 20.3px */
}
.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%;
    margin-bottom: 10px;
    margin-top: 10px;
}
/*  */
/* 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;
}
/* 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 */
}
.text-survey2 {
    text-align: start;
    max-width: 580px;
    color: var(--Netral-White, #fff);

    /* 20px/regular */
    font-family: Inter, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 26px */
}
.btn-started {
    margin-top: 43px;
    display: flex;
    width: 220px;
    justify-content: start;
    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;

    /* 20px/medium */
    font-family: Inter, sans-serif;
    font-size: 16px;
    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-related */
.frame-related {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 100px 120px;
}
.title-related {
    color: var(----Base-950, #292929);
    text-align: center;
    font-family: Inter, sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 43.2px */
}
.img-relate {
    width: 373px;
    margin-bottom: 10px;
    border-radius: 10px;
}

.text-img {
    max-width: 370px;
    overflow: hidden;
    color: var(----Dark-950, #282d43);
    text-overflow: ellipsis;

    /* 16px/regular */
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 145%; /* 23.2px */
}
.btn-last {
    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;

    /* 20px/medium */
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%; /* 26px */
}
.arrowlast {
    fill: #d9292f;
}

.btn-last:hover {
    color: #474646;
    .arrowlast {
        fill: #474646;
    }
}
/*  */
/* 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 {
    display: flex;
    width: 100%;
    padding: 80px 120px;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    margin-top: 13px;
    background-size: cover;
    background-repeat: no-repeat;
}
/*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 16px;
        flex-direction: column;
        align-items: center;
        gap: var(--Space-space-20, 20px);
    }

    .frame-solution {
        width: 100%;
        display: flex;
        padding: 40px 16px;
        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: 23px;
        font-style: normal;
        font-weight: 700;
        line-height: 120%; /* 43.2px */
    }

    .tab {
        flex-direction: column;
    }

    .col-imgtabs > img {
        width: 328px;
        height: 183.028px;
        border-radius: var(--Space-space-10, 10px);
    }

    .col-texttab > a {
        display: flex;
        justify-content: center;
    }

    .frame-insight {
        width: 100%;
        padding: 40px 16px;
    }

    .text-insight {
        font-size: 23px;
        font-weight: 600;
        line-height: 130%; /* 29.9px */
    }

    .cardscroll {
        display: flex;
        justify-content: center;
        position: sticky;
        top: 0;
        padding-top: 0;
        border-radius: 40px;
    }

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

    .img-hero3 {
        width: 35%;
    }
    .frame-complate {
        display: flex;
        width: 100%;
        padding: 40px 16px;
        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 */
    }

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

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

    .title-spatial {
        color: var(----Base-950, #292929);
        text-align: center;
    
        /* 36px/bold */
        font-family: Inter, sans-serif;
        font-size: 23px;
        font-style: normal;
        font-weight: 700;
        line-height: 120%; /* 43.2px */
        margin-top: 0px;
    }

    .text-spatial {
        color: var(----Base-700, #525252);
        font-family: Inter, sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 180%;
    }

    .row-spatial {
        flex-direction: column;
        width: 100%;
        /* display: flex; */
    }

    .img-find-service {
        width: 3rem;
    }

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

    #card2 .card-body1 {
        display: flex;
        width: 100%;
        height: 442px;
        flex-direction: column;
        align-items: center;
        gap: var(--Space-space-20, 20px);
    }
    
    #card3 .card-body1 {
        display: flex;
        width: 100%;
        height: 442px;
        flex-direction: column;
        align-items: center;
        gap: var(--Space-space-20, 20px);
    }
    
    #card4 .card-body1 {
        display: flex;
        width: 100%;
        height: 442px;
        flex-direction: column;
        align-items: center;
        gap: var(--Space-space-20, 20px);
    }

    #card5 .card-body1 {
        display: flex;
        width: 100%;
        height: 442px;
        flex-direction: column;
        align-items: center;
        gap: var(--Space-space-20, 20px);
    }

    #cards {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .card-body1 {
        background-size: contain;
        width: 100%;
        border: none !important;
    }

    .card-body1 > img {
        width: 328px;
        height: 183.028px;
        border-radius: var(--Space-space-10, 10px);
    }

    .col-spatial1 {
        position: relative;
        top: 13px;
        overflow-y: auto;
        height: auto;
        margin-bottom: 20px;
    }

    .text-survey {
        text-align: center;

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

    .col-survey > a {
        margin: auto;
    }
}
@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 */
    }
}

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

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


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

.col-related {
    display: flex;
    justify-content: center;
    background-size: cover;
}

/*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;
    }
    .row-cha {
        flex-direction: column; /* Mengubah tata letak menjadi satu kolom pada perangkat seluler */
    }

    .col-cha {
        border-right: none; /* Menghilangkan garis vertikal saat responsif */
        padding-right: 0; /* Menghilangkan padding kanan saat responsif */
    }

    .frame-challange {
        width: 100%;
        padding: 40px 20px;
        justify-content: center;
    }

    .frame-startsurvey {
        padding: 40px 20px;
    }
    .row-start {
        flex-direction: column;
    }
    .col-survey {
        text-align: center;
        margin-top: 20px;
    }

    /*  related responsive */
    .frame-related {
        padding: 40px 20px;
    }

    .row-related {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .img-relate {
        max-width: 150px;
        border-radius: 10px;
    }
    .col-related {
        width: 100%; /* Lebar kolom pada layar yang lebih kecil */
        margin-bottom: 20px; /* Menambahkan ruang antara kolom */
    }

    .text-img {
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Menampilkan maksimal 2 baris */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis; /* Menampilkan titik-titik jika teks melebihi 2 baris */
    }
    .text-hero2 {
        font-size: 32px;
    }
    .text-hero1 {
        font-size: 18px;
    }
}