@import url('https://fonts.googleapis.com/css2?family=Alata&family=Aleo:ital,wght@0,100..900;1,100..900&family=Amiko:wght@400;600;700&family=Arimo:ital,wght@0,400..700;1,400..700&family=Bebas+Neue&family=Forum&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter:wght@100..900&family=League+Gothic&family=Libre+Franklin:ital,wght@0,100..900;1,100..900&family=Licorice&family=PT+Serif+Caption:ital@0;1&family=Sarala:wght@400;700&display=swap');



:root {
    --main-color: #0A0909;
    --secondary-color: rgb(98 199 194);
    --third-color: rgb(18 251 238);
    --main-color-2: rgb(252, 252, 252);
    --main-color-3: #1d1d1d;
    --color-txt: rgb(14, 14, 14);

}

body {
    background-color: black;
    color: var(--main-color-2);
}

.content {
    margin-bottom: 20px;
}

/* color text */
.txt-tc {
    color: var(--secondary-color);
}

.txt-blue-tc {
    color: var(--third-color);
}

.txt-wh {
    color: var(--main-color-2);
}

.txt-bck {
    color: var(--color-txt);
}

::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #057381 0%, #60c3dbd0 100%);
    border-radius: 10px;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
}

.bg-black {
    background-color: var(--main-color);
}

a {
    text-decoration: none;
    color: var(--main-color-2);
}

p {
    color: var(--main-color-2);
    margin-bottom: 0;
}

a:hover {
    text-decoration: none;
    color: var(--main-color-2);
}

.section {
    position: relative;
    color: white;
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 10px 50px 10px 50px;
}

/* backgroud */
.part-bg-line-desh {
    position: fixed;
    top: 0;
    justify-content: center;
    display: flex;
    gap: 33vw;
    height: 100vh;
    z-index: -1;
}

.garis-putus {
    width: 0px;
    height: 100vh;
    border: 1px #80808047 dashed;
}

/* main */
.main {
    display: block;
}

/* navbar */
.navbar-mobile {
    position: fixed;
    z-index: 111;
    width: 100%;
    top: 0;
}

.navbar {
    padding: 5vw;
}

.logo-navbar {
    width: 34vw;
}

.navbar-mobile.scrolled {
    background-color: var(--main-color-3);
    box-shadow: 0 0 34px black;
}

/* sidebar */
.active {
    opacity: 1 !important;
    display: block !important;
    animation: ease-in 0.5s;
    -webkit-animation: ease-in 0.5s;
    -moz-animation: ease-in 0.5s;
    -ms-animation: ease-in 0.5s;
    -o-animation: ease-in 0.5s;
}

.sidebar {
    display: none;
    background-color: var(--main-color-3);
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 111;
    top: 0;
    padding: 24px;
    opacity: 0;
    animation: ease-out 0.5s;
    -webkit-animation: ease-out 0.5s;


}

.line-desh1 {
    width: 85vw;
    border: 2px dashed white;
    height: 0px;
    position: relative;
}

ul {
    list-style-type: none;
    padding-left: 0;
}

li {
    padding: 4px;
    display: flex;
    color: black;
    flex-direction: column;
    gap: 18px;
}

li.sub-itm {
    display: flex;
    flex-direction: row;
}

.nav-items {
    display: flex;
    flex-direction: row;
    gap: 13px;
    width: 50%;
}

.dropdown .nav-items:after {
    content: "";
    width: 7%;
    height: 49%;
    aspect-ratio: 1 / 1;
    display: inline-block;
    border-right: 2px solid rgb(253, 252, 252);
    border-bottom: 2px solid rgb(248, 248, 248);
    transform: rotate(45deg);
    -webkit-transform: rotate(45);
    -moz-transform: rotate(45);
    -ms-transform: rotate(45);
    -o-transform: rotate(45);
}

.sub-menu {
    display: none;
    margin-left: 21px;
}



.icon-itm,
.icon-itms {
    width: 25px;
    height: 25px;
}

.icon-itm img,
.icon-itms img {
    display: none;
    width: 100%;
    height: 100%;
}

.item:hover .icon-itm img {
    display: block;
}

.sub-itm:hover .icon-itms img {
    display: block;
}


/* content */

/* home  */

/* jumborton */
.header-section-home {
    position: relative;
    background: url(../../img/new_asset/image_11_2.png);
    background-size: cover;
    background-position: center;
    object-fit: cover;
    max-height: 137vw;
    height: 77vw;
    z-index: 1;
    top: 0;
}


.text-header-home {
    width: 50%;
    position: absolute;
    top: 40vw;
    left: 15vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    z-index: 10;
    /* column-gap: 1px;
    padding-left: 58px; */
}

.neon-text-1,
.neon-text-2 {
    color: #c6e1e9;
    text-align: left;
    font-family: "Licorice", cursive;
    font-size: 18vw;
    font-weight: 400;
    letter-spacing: 2px;
    max-height: 5vh;
    transform-origin: 0 0;
    transform: rotate(-15.931deg) scale(1, 1);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    text-shadow: 0 0 22px #278f8b, 0 0 25px #feffff, 0 0 35px #278f8b;
}

.neon-text-2 {

    margin-left: 67px;
}

.image-section-home-header {
    display: flex;
    flex-direction: row;
    justify-content: end;
    padding-top: 50vw;
    position: static;
    align-items: center;
}

.logo-img {
    width: 197px;
    height: 100%;
    position: relative;
    margin-top: -190px;
}

.logo-img img {
    width: 100%;
}

.img-desain {
    width: 78vw;
    height: 16vh;
    position: relative;
}


.img-desain img {
    height: 100%;
    width: 100%;
}



/* end jumborton */
/* about */
.about-home {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 20px;
    padding-top: 20px;
}

.img-logo {
    width: 132px;
    height: 100%;
    margin-bottom: 20px;
}

.img-logo img {
    width: 100%;
    height: 100%;
}

.about-home .text-home {
    padding: 0 75px 0 75px;
}

/* end about */
/* our service  */
.pop-up-message li {
    display: list-item;
}

a.link-whatsapp {
    color: rgb(6 122 141 / 92%);
    font-weight: 800;
    filter: drop-shadow(4px 4px 1px rgb(66 220 245 / 92%));
}

.text-header-section1 {
    font-size: 6vw;
    font-weight: 800;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.text-header-section1 span.border-txt-header {
    -webkit-text-stroke: 1px #61c6c2;
    color: #00000036;
    margin-top: -7px;
}

.item-img-service {
    position: relative;
    width: 100%;
    max-width: 384px;
    max-height: 360px;
    height: 100px;

}

.item-img-service img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pop-up-message {
    display: none;
    opacity: 0;
}

.descript-message {
    height: 200px;
    overflow: auto;
    font-size: 16px;
}

.descript-message p {
    color: var(--color-txt);
}

.descript-message ul {
    list-style-type: circle;
}

.item-img-service:hover .pop-up-message {
    position: absolute;
    display: block;
    top: 0px;
    left: 10px;
    background: white;
    color: black;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid black;
    opacity: 1;
    height: 237px;
    width: 269px;
    transition: all 1s ease-in;
    -webkit-transition: all 1s ease-in;
    -moz-transition: all 1s ease-in;
    -ms-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
}

.item-img-service:hover .pop-up-message::after {
    content: "";
    background: white;
    width: 20px;
    height: 20px;
    margin-top: 13px;
    position: absolute;
    transform: rotate(-43.931deg) scale(1, 1);
}

.item-img-service .text-img-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.363);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 4.1rem;
}

.txt-img {
    font-weight: 700;
    color: white;
    /* Tambahkan warna teks agar kontras dengan background */
}

.item-img-service.slick-slide {
    display: none;
    float: left;
    height: 426px;
    min-height: 1px;
}

.slick-dotted.slick-slider {
    /* margin: 19px; */
}

.slick-initialized .slick-slide {
    display: block;
    padding: 13px;
}
.image-section-home-header .slick-initialized .slick-slide {
    display: block;
    padding: 0px;
}

/* end our service */

/* portfolio  */
.header-section-2 {
    position: absolute;
    z-index: 100;
    left: 26vh;
    top: 19vh;
}

.content-portfolio-home {
    /* margin-top: 61px; */
    position: relative;
}

.itm-part-potfolio {
    cursor: pointer;
    width: 384px;
    height: 525px;
}

.itm-part-potfolio .potfolio {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.txt-card-2 {
    position: relative;
    margin-top: -526px;
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.txt-card-2:hover {
    background-color: #2a2a2a5e;
}

.txt-card-2:hover .txt {
    transform: translateY(-7px);
    filter: drop-shadow(1px 6px 6px rgba(214, 214, 214, 0.25));
    font-size: 38px;
}


.txt-card-2 .txt {
    -webkit-text-stroke: 1px #61c6c2;
    color: #00000036;
    text-shadow: 0 0 35px #278f8b, 0 0 22px #feffff, 0 0 35px #278f8b;

}

.line-desh-2 {
    width: 0px;
    height: 328px;
    border: 2px dashed white;
    position: absolute;
    top: 205px;
}

/* end portfolio */
/* detail portfolio  */
.slider-for {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: 24px;
    padding: 2vw;
}

.slider-for .slick-track {
    display: flex;
    /* gap: 20px; */

}

.slick-track {
    /* max-width: 100%; */
}

.show {
    max-width: 100vw;
    max-height: 202vw;
    height: 100% !important;
    width: 100vw !important;
}

.slick-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.list-img {
    max-width: 200px;
    max-height: 150px;
    height: 190px !important;
}

/* desain plan */
.layoute-desain-plan {
    position: relative;
    display: flex;
    margin: auto;
    /* width: 80vw;
    height: 29vh; */
    max-height: 48vh;
    min-height: 30vh;
    min-width: 79vw;
    max-width: 85vw;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.layoute {
    display: block;
    width: 100%;
    height: 100%;
}

.layoute-desain {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.position-dot {
    display: flex;
    gap: 10px;
    position: absolute;
    background-color: rgb(90 181 177);
    border-radius: 20px;
    width: 15px;
    height: 15px;
    color: black;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    box-shadow: 0 15px 8px rgba(2 2 2 / 68%);
    top: 203px;
    left: 91px;
    z-index: 100;
}

.card-img-content {
    width: auto;
    height: 75px;
    position: relative;
}

.union {
    width: auto;
    height: 75px;
    position: absolute;
    top: -74px;
    left: -6px;
    overflow: visible;
    backdrop-filter: blur(0.8px);
    filter: blur(0.4px);
}

.position-dot .position-detail {
    display: flex;
    flex-direction: column;
    position: absolute;
    background-color: white;
    border-radius: 10px;
    width: auto;
    height: 75px;
    padding: 7px;
    color: black;
    margin: 9px;
    font-size: 13px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    box-shadow: 0 10px 8px rgba(22, 22, 22, 0.5);
    top: -91px;
    left: -19px;
}

.position-dot .position-detail::before {
    content: "";
    position: absolute;
    width: 0px;
    height: 10px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid white;
    bottom: -12px;
    left: 18%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

.content-popup {
    display: flex;
    gap: 5px;
    flex-direction: row;
    margin-bottom: 10px;
    top: -68px;
    position: absolute;
    align-items: center;
}

.card-upload {
    position: relative;
    /* border: dashed 2px #353535c2; */
    border-radius: 11px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-see-more {
    position: static;
    padding: 6px;
    display: flex;
    /* gap: 5px; */
    background-color: #42b3ad;
    color: white;
    border-radius: 6px;
    align-items: center;
    cursor: pointer;
    height: 29px;
    box-shadow: 0 10px 8px rgba(22, 22, 22, 0.5);
}

.btn-see-more .txt-img-btn {
    margin: 0;
    font-size: 9px;
}

.btn-see-more .icon-img-see {
    width: 11px;
    height: 11px;
}

/* imge slide show */
.slideshow-container {
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: 92px;
    display: flex;
    align-content: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.preview-container {
    max-width: 300px;
    max-height: 500px;
    height: 362px;
    margin-bottom: 20px;
}

.preview-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* border: 2px solid #ccc; */
    border-radius: 10px;
}

.navbar-img {

    width: 87vw !important;
    display: flex;
    justify-content: center;
    cursor: grabbing;
    position: relative;
}

.navbar-images {
    display: flex;
    justify-content: center;
    gap: 4px;
    overflow: hidden;
    width: 100% !important;

}

.owl-stage-outer,
.owl-stage,
.owl-item.active.center {
    width: 100% !important;
}

.owl-nav {
    display: none;
}

.navbar-images ul {
    list-style: none;
    display: flex;
    white-space: nowrap;
    padding-left: 10px;
    margin-bottom: 5px;
    width: 100%;
    gap: 1px;

}

.navbar-images li {
    display: inline;
}

.navbar-img .nav-item-desain {
    width: 100px;
    height: 100px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 5px;
    /* transition: border 0.3s ease; */
    transition: transform 0.3s ease;
    /* transform: translateY(0);
}

.navbar-img img:hover,
.navbar-img img.active {
    border-color: #d1d0d0;
    transform: scale(1.1);
    /* animation: slide-up 0.5s ease forwards;

    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1); */
}

.btn-nav-img-glery {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.x-btn,
.y-btn {
    position: absolute;
    top: auto;
    height: 31px;
    padding: 5px;
    opacity: 1;
    color: #d5d4d4 !important;
    border: none;
    background-color: #80808057;
}

.x-btn:hover,
.x-btn:focus,
.y-btn:hover,
.y-btn:focus {
    outline: 0;
    opacity: .9;
    color: #333 !important;
}

.x-btn {
    left: -5%;
}

.y-btn {
    right: -5%;
}

/* .navbar-img img.active {
    border-color: #f0f0f0;
    animation: slide-up 0.5s ease forwards;
    transform: scale(1.1);
} */

@keyframes slide-up {
    0% {
        transform: translateY(20px);
    }

    100% {
        transform: translateY(0);
    }
}

/* Tombol Prev dan Next */
button.prev,
button.next {
    position: absolute;
    top: 39%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 15px;
    border-radius: 50%;
}

button.prev {
    left: 15px;
}



button.next {
    right: 15px;
}

button.prev:hover,
button.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
    color: #3f96a8;
}

/* Style for the image thumbnail */
.preview-img {
    width: 200px;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s;
    border-radius: 10px;
    box-shadow: 0 10px 8px rgba(22, 22, 22, 0.5);
}

/* Add a hover effect */
.preview-img:hover {
    transform: scale(1.1);
}

/* Popup container (hidden by default) */
.popup {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    /* Black background with opacity */
}

/* Close button (X) */
.close-btn {
    position: absolute;
    top: 10px;
    right: 25px;
    color: #fff;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10000;

}

/* Popup image */
.popup-content {
    display: block;
    margin: auto;
    max-width: 80%;
    max-height: 80%;
    margin-top: 4%;
}

.img-show-design {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: auto;
    padding: 15px;

}

/* end desain plan */
/* end detail portfolio */
/* WORKING PROCESS  */
.content-section,
.prosesing-nominal {
    width: 100%;
    height: 78vw;
}

.content-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
}

.content-section .proses-content {
    width: 100%;
    height: 100%;
    position: relative;
    margin-top: -81vw;
    display: flex;
    flex-direction: row;
    gap: 24px;
    /* padding: 0px 50px 0px 50px; */
    align-items: center;
    justify-content: space-between;

}

.content-section .proses-content .slick-list.draggable {
    padding: 0vw 10vw !important;
}

.proses-content .d-flex.justify-content-center.align-content-center {
    width: 52vw !important;
}

.proses-content .slick-initialized .slick-slide {
    padding: 2px !important;
}

.content-section .card-content-proses {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 17px;
    text-align: center;
    width: 39vw !important;
    height: 77vw;
    justify-content: center;
}

.content-section .card-content-proses .icon-proses {
    width: 128px;
    height: 105px;
}

.icon-caption {
    font-size: 4.3vw;
}

.arrow-proses-contet {
    position: relative;
    margin-top: 48vw;
    width: 91px !important;
    transform: translateY(-50%);

}

.arrow-proses-contet img {
    opacity: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: translateY(-50%);
}



.icon-proses img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    opacity: 1;
}

.txt-caption {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.caption-img-proses {
    font-size: 2vw;
}

.txt-caption h1 {
    font-size: 5vw;
}

/* .slick-initialized .slick-slide {
    display: block;
} */

.bg-prosessing {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 52px;
}

.bg-prosessing img {
    width: 233px;
    height: 100%;
    object-fit: cover;
}

.tooltip {
    background: white;
    color: black;
    opacity: 1;
    width: 108px;
    padding: 5px;
    border-radius: 9px;
    font-weight: 700;
    margin-top: -130px;
}

.tooltip:before {
    content: "";
    width: 16px;
    height: 16px;
    background: white;
    margin-top: 57px;
    position: absolute;
    z-index: -15;
    transform: rotate(-43.931deg) scale(1, 1);
}

.content-estimasi {
    position: relative;
    margin-top: -288px;
}

.note-information {
    text-align: center;
    background-color: #61C6C2;
    /* padding: 4px; */
    color: black;
    margin: 0px 11vw 4px 11vw;
    font-size: 3vw;
}

.perhitungan-estimasi {
    gap: 2px;
    flex-wrap: wrap;
}

.itm-estimasi {
    gap: 7px;
    flex-direction: row;
    width: 100%;
}

.calculation {
    flex-wrap: wrap;
    gap: 2px;
}

.txt-descript-estimasi {
    width: 100%;
}

.estimation {
    gap: 10px;
    width: 100%;
}

.luas-ruangan {
    border-radius: 9px;
    padding: 9px;
    height: 8vw;
    width: 34vw;
}

.estimasi {
    border-radius: 9px;
    padding: 9px;
    height: 8vw;
    width: 100%;
}

.btn-estimated,
.btn-1-h,
.btn-submit {
    background: var(--secondary-color);
    transition: opacity 0.2s ease-in, top 0.2s ease-in;
    width: 20vw;
    font-size: 2.7vw;
    border-radius: 8px;
    color: var(--main-color-2);
    -webkit-transition: opacity 0.2s ease-in, top 0.2s ease-in;
    -moz-transition: opacity 0.2s ease-in, top 0.2s ease-in;
    -ms-transition: opacity 0.2s ease-in, top 0.2s ease-in;
    -o-transition: opacity 0.2s ease-in, top 0.2s ease-in;
}

.btn-estimated:hover,
.btn-1-h:hover,
.btn-submit:hover {
    transform: translateY(-7px);
    background-color: #2A2A2A;
    color: rgb(98 199 194);
    filter: drop-shadow(1px 6px 6px rgba(97, 96, 96, 0.25));
    -webkit-transform: translateY(-7px);
    -moz-transform: translateY(-7px);
    -ms-transform: translateY(-7px);
    -o-transform: translateY(-7px);
    -webkit-filter: drop-shadow(1px 6px 6px rgba(128, 128, 128, 0.25));
}

.txt-box.ibm-plex-sans-thin {
    width: 13vw;
    font-weight: 700;
}

/* end WORKING PROCESS */

/* portfolio */
.header-section-2 {
    position: absolute;
    z-index: 100;
    top: 44vw;
}

.txt-header1 {
    font-size: 4vw;
}

.txt-header2 {
    font-size: 6vw;
}

.content-portfolio-home {
    /* margin-top: 61px; */
    position: relative;
    gap: 4vw;
}

.itm-part-potfolio {
    cursor: pointer;
    width: 47%;
    height: 56vw;
}

.itm-part-potfolio .potfolio {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.txt-card-2 {
    position: relative;
    margin-top: -54vw;
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.txt-card-2:hover {
    background-color: #2a2a2a5e;
}

.txt-card-2:hover .txt {
    transform: translateY(-7px);
    filter: drop-shadow(1px 6px 6px rgba(214, 214, 214, 0.25));
    font-size: 38px;
}


.txt-card-2 .txt {
    -webkit-text-stroke: 1px #61c6c2;
    color: #00000036;
    text-shadow: 0 0 35px #278f8b, 0 0 22px #feffff, 0 0 35px #278f8b;

}

.line-desh-2 {
    width: 0px;
    height: 263px;
    border: 2px dashed white;
    margin-top: -50vw;
    margin-left: 5vw;
}

/* end portfolio */
/* our team */
.itm-img1 {
    width: 30vw;
    height: 60vw;
}

.box-img {
    width: 30vw;
    height: 60vw;
    box-sizing: border-box;
}

img.team1 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-size: cover;
    object-position: center;
    background-position: center;
}

.txt-tittle {
    position: relative;
    width: 100%;
    height: 100%;
    background: #0000001f;
    margin-top: -60vw;
    padding: 11px 14px 10px 19px;
    display: flex;
    flex-direction: column;
}

.name-txt {
    letter-spacing: 0.2vw;
    font-size: 2vw;
}

span.tittle.amiko-regular.txt-wh {
    font-size: 1.3vw;
}

.txt-neon-header {
    text-shadow: 0 0 21px #278f8b, 0 0 13px #ffffff, 0 0 43px #278f8b;
    font-size: 8vw;
    color: #9be5e2;
}


.team {
    height: 100%;
    max-height: 56vw;
    background-color: black;
    box-sizing: border-box;
}

.team .slick-list.draggable {
    padding: 0 92px !important;
}

.itm-img-team {
    flex: 1;
    margin: 10px 0px 0px 0px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    max-width: 55vw;
    max-height: 64vw;
    padding: 10px !important;
}

.img-team {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
    overflow: hidden;
}

.img-team img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.txt-name-team.text-center {
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 100;
    align-items: center;
    margin-top: 35vw;
    font-size: 9px;
    width: 34vw;
    height: 15vw;
    background: #00000078;
    border-radius: 10px;
    padding: 7px;
    justify-content: center;
}

/* end team */

/* client */
.client-part {
    text-align: center;
    width: 100%;

}

.part-client {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 3vw;
    gap: 24px;
}

.client-part .slick-track {
    display: flex;
    /* transform: translate3d(-178px, 0px, 0px) !important; */
    /* max-width: 312px !important; */
    gap: 20px;
}

.itm-client {
    background: white;
    border-radius: 10px;
    max-width: 200px;
    max-height: 322px;
    height: 117px !important;
}

.itm-client img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    filter: grayscale(1);
}

.arrow-animasi {
    width: 40vw;
    height: 20vw;
    position: relative;
    overflow: hidden;

}

.arrow-animasi img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    position: absolute;
    transform: rotate(90.07deg) scale(1, 1);
    top: 0;
    -moz-transform: rotate(90.07deg) scale(1, 1);
    -ms-transform: rotate(90.07deg) scale(1, 1);
    -o-transform: rotate(90.07deg) scale(1, 1);
    -webkit-transform: rotate(90.07deg) scale(1, 1);
    animation: moveBackAndForth2 4s infinite alternate ease-in-out;
    -webkit-animation: moveBackAndForth2 4s infinite alternate ease-in-out;
}

@keyframes moveBackAndForth2 {
    0% {
        right: 0;
    }

    100% {
        right: 50px;
    }
}

/* end client */
/* footer */

.footer-section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.vidio-statik {
    width: 47vw;
    height: 106vw;
    position: relative;
}

.vidio-statik video {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.maps-visit {

    height: auto;
}

.header-4.maps-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
}

.maps-visit span.inter {
    font-size: 3vw;
}

.site-left {
    /* width: 50%; */
}

.site-left .visit {
    width: 38vw;
    font-size: 7vw;
}

.detail-maps {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.site-left .txt-addres {
    font-size: 13px;
}

.site-right {
    /* width: 50%; */
}

.site-maps {
    position: relative;
    /* margin-top: -103vw; */
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
}

.txt-addres {
    font-size: 3.3vw;
}

.footer-email {
    background: #6d6b6b8c;
    border-radius: 38px;
    padding: 18px;
    display: flex;
    width: 100%;
}

.text-footer-2 {
    width: 69%;
    font-size: 3.4vw;
    padding: 6px 16px 10px 11px;
}

.form-email {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 50%;
    flex-wrap: wrap;
    justify-content: center;
}

input.subscribe-email {
    width: 39vw;
    height: 42%;
    padding: 4%;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.btn.btn-submit {
    width: 100%;
}

/* end footer */

/* end Home */
/* jumbroton */
.jumbroton-1-group-titel {
    display: block;
    position: relative;
    margin-top: 26vw;
}

.txt-header1 {
    text-align: center;
    margin-top: 9vw;
    font-weight: 800;
}

.header-text-jumbrotonn {
    margin-top: 28vw;
    margin-top: 15vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.txt-group {
    width: 100%;
}

.txt-header-category {
    position: relative;
    margin-top: -20vw;
    margin-left: 34vw;
}

.left-arrow {
    width: 30%;
    height: 26vw;
    position: relative;
    display: flex;
    justify-content: end;
    margin-top: 20vw;
}

.left-arrow img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    position: absolute;
    transform: translateX(-6%) rotate(-89.931deg) scale(1, 1);
    animation: moveBackAndForth2 3s infinite alternate ease-in-out;
}


.row-item-section {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 7vw;
    justify-content: space-evenly;
    align-items: center;
}

.row-item-section a {
    color: white;
    text-decoration: none;
}

.item-card {
    max-width: 550px;
    width: calc(100% / 1);
    height: 63vw;
    display: flex;
    flex-direction: column;
}

.img-card-itm {
    max-width: 550px;
    width: 100%;
    max-height: 60vw;
    height: 100%;
    position: relative;
}

.img-card-itm .itm-img {
    width: 100%;
    height: 100%;
    background: center;
    object-fit: fill;
    background-position: center;
    background-size: auto;
}

.footer-itm-card-img {
    display: flex;
    flex-direction: column;
    position: relative;
    background: #0000006b;
    align-items: center;
    top: -9vh;
    padding: 3vw;
    justify-content: center;
    height: 9vh;
}

/* end Jumbroton */
/* work phase */
.icon-working {
    width: 30vw;
    height: 128px;
}

.icon-working img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.text-work-detail {
    width: 100%;
    padding-top: 20px;
    text-align: justify;
}

.image-proses {
    width: 100%;
    height: 100%;
}

.image-proses img,
.image-proses video {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.arrow {
    gap: 43%;
}

.arrow-animasi-2 {
    width: 11vw;
    height: 274px;
    position: relative;
    margin-left: 29px;
}

.arrow-animasi-2 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    transform: translateX(-50%) rotate(-179deg);
    -webkit-transform: translateX(-50%) rotate(-179deg);
    -moz-transform: translateX(-50%) rotate(-179deg);
    -ms-transform: translateX(-50%) rotate(-179deg);
    -o-transform: translateX(-50%) rotate(-179deg);
    animation: moveUpAndDown 4s infinite alternate ease-in-out;
    -webkit-animation: moveUpAndDown 4s infinite alternate ease-in-out;
}

/* end work phase */

/* about */
.descript-about {
    width: 100%;
    padding: 0 10px;
}

.sub-title.txt-wh {
    font-size: 1vw;
}

.descript-about-txt {
    font-size: 3.6vw;
    text-align: justify;
}

.border-txt-header {
    -webkit-text-stroke: 1px #61c6c2;
    color: #0000000d;
    font-weight: 900;

}

img.team1 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-position: center;

}

.descript-visi-misi.txt-wh {
    width: 100%;
    font-size: 4.3vw;
    text-align: justify;
}

/* end about */

/* contact us */
.jumbroton-contect-us,
.jumbroton-contect-us * {
    box-sizing: border-box;
}

.jumbroton-contect-us {
    position: relative;
}

.bg-contact-us {
    width: 100%;
    height: 109vw;
    position: relative;
    left: 0px;
    top: 0px;
}

.bg-contact-us video {

    background-size: cover;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-title-contact-us {
    background: #00000091;
    width: 100%;
    height: 109vw;
    position: absolute;
    top: 0px;
}

.txt-title-contact.border-txt-header {
    font-size: 6vw;
}

.header-title .sub-title {
    width: 31%;
    text-align: center;
}

.jumbroton-contect-us .sub-title.txt-wh {
    font-size: 3vw;
    text-align: center;
}

.btn-contact-wa {
    background: white;
    display: flex;
    padding: 9px 17px;
    border-radius: 20px;
    align-items: center;
    width: 100%;
    border: 1px solid #077907;
    gap: 9vw;
    font-weight: 600;
    transition: opacity 0.2s ease-in, top 0.2s ease-in;
    -webkit-transition: opacity 0.2s ease-in, top 0.2s ease-in;
    -moz-transition: opacity 0.2s ease-in, top 0.2s ease-in;
    -ms-transition: opacity 0.2s ease-in, top 0.2s ease-in;
    -o-transition: opacity 0.2s ease-in, top 0.2s ease-in;
}

.btn-contact-wa:hover {
    filter: drop-shadow(1px 6px 6px rgba(2, 58, 16, 0.25));
    -webkit-transform: translateY(-7px);
    -moz-transform: translateY(-7px);
    -ms-transform: translateY(-7px);
    -o-transform: translateY(-7px);
    -webkit-filter: drop-shadow(1px 6px 6px rgba(128, 128, 128, 0.25));
}

.icon-wa {
    width: 14%;
}

.icon-wa img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

.detail-addres {
    width: 100%;
    font-size: 20px;
    text-align: justify;
}

.date-day-working {
    width: 88%;
}

/*end contect us*/

/* footer */

.footer-social-media {
    width: 100%;
    height: 151px;
    margin-top: 53px;
    position: relative;
}

.footer-social-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer-social-media .social-media {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: #000000ba;
    gap: 10px;
    width: 100%;
    height: 157px;
    margin-top: -151px;
    text-align: center;
    position: relative;
}

.footer-social-media .social-media .item-media {
    width: 39px;
    height: 39px;
}

.item-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.end-footer {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 20px;
}

.logo-footer {
    width: 20%;
    height: 20%;
}

.footer-end {
    background: #3f3e3e;
    width: 80%;
    text-align: center;
    padding: 9px;
    border-radius: 200px 200px 0px 0px;
    font-size: 11px;
}

.logo-footer img {
    width: 100%;
    height: 100%;
}



/* end footer */

/* product */
.btn-cat {
    width: 20%;
    /* border: 1px solid #39adaa; */
    border-radius: 10px;
    text-align: center;
    padding: 10px;
    cursor: pointer;
}

.btn-cat:hover {
    /* background-color: #39adaa; */
    color: white;
    transition: all 0.3s ease-in-out;
}
.btn-cat.active {
    /* background-color: #39adaa; */
    color: white;
}
p.txt-cat {
    margin-bottom: 0px;
}

.card-product {
    width: calc(100% - 50%);
}

.card-product .card-title {
    font-size: 15px;
}
/* paggination  */
.pagination {
    gap: 11px;
}
.page-item:first-child .page-link {
    border-radius: 29px;
    -webkit-border-radius: 29px;
    -moz-border-radius: 29px;
    -ms-border-radius: 29px;
    -o-border-radius: 29px;
}
.page-item:last-child .page-link {
    border-radius: 29px;
    -webkit-border-radius: 29px;
    -moz-border-radius: 29px;
    -ms-border-radius: 29px;
    -o-border-radius: 29px;
}


.page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    background-color: #cadce1;
    border-color: #dee2e6;
}
.page-link {
    padding: 10px 17px;
    border-radius: 29px;
}
.page-link {
    position: relative;
    display: block;
    color: #39adaa;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #dee2e6;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #39adaa;
    border-color: #39adaa;
}
.page-link:hover {
    z-index: 2;
    color: #cddef8;
    background-color: #39adaa;
    border-color: #dee2e6;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.modal-overlay.show {
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 1;
}

.modal-content {
    background: white;
    color: black;
    border-radius: 15px;
    max-width: 900px;
    width: 90%;
    max-height: 90%;
    overflow-y: auto;
    transform: scale(0.7) translateY(-50px);
    transition: transform 0.3s ease;
}

.modal-overlay.show .modal-content {
    transform: scale(1) translateY(0);
}
.product-details{
    margin-top: 10px;
}
.product-details p {
    color: black;
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
}

h5#modalProductName {
    width: 160px;
}

.close-btn {
    font-size: 24px;
    cursor: pointer;
    color: #999;
    transition: color 0.2s ease;
}

.close-btn:hover {
    color: #333;
}

.modal-body {
    padding: 20px;
}

.main-image img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
}

.thumbnail-images {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.thumbnail {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    object-fit: cover;
}

.thumbnail:hover,
.thumbnail.active {
    border-color: #5b9be0;
    transform: scale(1.05);
}

.btn-ask{
    background-color:#39adaa;
    color: white;
    display: flex;
    width: 100%;
    justify-content: center;

}
.btn-ask:hover{
    background-color:#39ada900;
    border: 1px solid #16a1b9;
    color: rgb(8, 74, 98);

}
/* end paggination */
/* Dropdown Category Mobile */
.filter {
    position: relative;
    cursor: pointer;
    padding: 8px 12px;
    /* border: 1px solid #39adaa; */
    border-radius: 8px;
    /* background: rgba(57, 173, 170, 0.1); */
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 4vw;
    color: white;
}

.filter:hover {
    /* background: rgba(73, 190, 186, 0.2); */
}

.sub-menu-category {
    position: absolute;
    top: 100%;
    right: 0;
    background: #1d1d1d;
    border: 1px solid #39adaa;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    max-width: 180px !important;
    max-height: 200vw !important;
    height: auto !important;
    width: 51vw !important;
    z-index: 1000;
    margin-top: 5px;
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    visibility: hidden;
    transition: all 0.3s ease;
}

.sub-menu-category.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
}

.sub-menu-category .btn-cat {
    display: block;
    width: 100%;
    padding: 12px 15px;
    border-bottom: 1px solid #333;
    text-align: left;
}

.sub-menu-category .btn-cat:last-child {
    border-bottom: none;
}

.sub-menu-category .btn-cat:hover {
    background: rgba(57, 173, 170, 0.1);
}

.sub-menu-category .txt-cat {
    color: white;
    font-size: 3.5vw;
    margin: 0;
}
.sub-menu-category .btn-cat:hover{
    background: rgba(57, 173, 170, 0.2);

}

.sub-menu-category .btn-cat.active {
    background: rgba(57, 173, 170, 0.2);
}

/* end product */
/* end content */