@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

* {
    font-family: 'Roboto', sans-serif;
}

p{
    line-height: 2; /* untuk atur jarak antar baris */
}
/* scrollbar */
body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

body {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
    position: relative;
}

/* Scrollbar custom */
#custom-scrollbar {
    position: fixed;
    top: 0;
    right: 2px;
    width: 6px;
    height: 100vh;
    background: transparent;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 3px;
    z-index: 9999;
}

/* Thumb scrollbar */
#custom-scrollbar-thumb {
    background-color: rgba(100, 100, 100, 0.5);
    width: 100%;
    border-radius: 3px;
    position: absolute;
    top: 0;
    cursor: pointer;
}

/* image active */
.underline-animation.active {
    border-bottom: 2px solid white;
}

.img-product:hover,
.img-project:hover {
    border: 3px solid black
}

/* testimonial */
.testimonial-box {
    box-shadow: 0px 7px 30px 0px rgba(0, 0, 0, 0.17);
}

/* products */
.close-shadow {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.close-shadow:hover,
.btn-filter:hover {
    color: white;
    background-color: black;
}

#product .filter-category.active,
#product .filter-sort.active {
    border: 2px solid black;
    border-radius: 5px;
    padding: 4px 8px;
    /* tambahkan padding agar border rapi */
}

#product .filter-category:hover,
#product .filter-sort:hover {
    border: 2px solid black;
    border-radius: 5px;
    padding: 4px 8px;
}

/* project */
#project .filter-category {
    color: #B1B1B1;
}

#project .filter-category:hover {
    border-bottom: 2px solid black;
    color: black
}

#project .filter-category.active {
    border-bottom: 2px solid black;
    color: black
}

/* project detail */
#project-detail .card-right {
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.25);
}

.gap-10 {
    gap: 2rem;
}

.px-10 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
}

.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.py-16 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.pt-16 {
    padding-top: 6rem;
}

.pb-16 {
    padding-bottom: 6rem;
}

.text-title {
    font-size: 36px;
}

.cus-grey-color {
    background-color: #f3f3f3;
}

.cus-footer-font-color {
    color: #686868;
}

.left-6 {
    left: 1.5rem;
}

.bottom-8 {
    bottom: 2.5rem;
}

.left-8 {
    left: 2.5rem;
}

.mr-6 {
    margin-right: 1.5rem;
}

/* .header-logo{
  width: 50%;
} */
.h-64 {
    height: 16rem
        /* 256px */
    ;
}

.pb-\[25\%\] {
    padding-bottom: 25%;
}

.-mt-\[25\%\] {
    margin-top: -25%;
}


@media (max-width: 410px) {
    .header-logo {
        max-width: 50%;
    }
}

@media (min-width: 768px) {
    .md\:cus-pl-25 {
        padding-left: 25%;
    }

    .md\:cus-pl-50 {
        padding-left: 50%;
    }

    .md\:header-logo {
        width: auto;
    }

    .md\:pt-16 {
        padding-top: 4rem;
    }

    .md\:pb-16 {
        padding-bottom: 4rem;
    }
}

@media (min-width: 1024px) {
    .lg\:cus-pl-25 {
        padding-left: 6%;
    }

    .lg\:cus-pl-50 {
        padding-left: 30%;
    }

    .lg\:mt-0 {
        margin-top: 0;
    }

    .lg\:header-logo {
        width: auto;
    }

    .lg\:cus-pr-25 {
        padding-right: 25%;
    }
}

@media (min-width: 1280px) {
    .xl\:cus-pl-25 {
        padding-left: 25%;
    }

    .xl\:cus-pl-50 {
        padding-left: 50%;
    }

    .xl\:mt-0 {
        margin-top: 0;
    }

    .xl\:header-logo {
        width: auto;
    }
}

.menu-logo {
    width: 50%;
}