.container #blackOverlay {
    background: linear-gradient(0deg, rgba(172, 67, 217, 0.8) 35%, rgba(0, 212, 255, 0) 55%);
}

html {
    scroll-behavior: smooth;
}

/* color variety */
.color-def-green {
    color: var(--def-green);
}

.color-alt-green {
    color: var(--alt-green);
}

.col-sec-green {
    color: #168616;
}

.color-def-purple {
    color: var(--def-purple);
}

.color-alt-purple {
    color: var(--alt-purple);
}

.color-def-orange {
    color: var(--def-orange);
}

.color-alt-orange {
    color: var(--alt-orange);
}

.color-def-blue {
    color: var(--def-blue);
}

.color-alt-blue {
    background: var(--alt-blue);
}

/* Background Variety */
.bg-def-green {
    background: var(--def-green);
}

.bg-alt-green {
    background: var(--alt-green);
}

.bg-def-purple {
    background: var(--def-purple);
}

.bg-alt-purple {
    background: var(--alt-purple);
}

.bg-def-orange {
    background: var(--def-orange);
}

.bg-alt-orange {
    background: var(--alt-orange);
}

.bg-def-blue {
    background: var(--def-blue);
}

.bg-alt-blue {
    background: var(--alt-blue);
}

/* Button Variety */
.main-button:hover {
    background: var(--def-green);
    transition: 0.3s;
}

.dot-icon {
    position: relative;
    bottom: 2px;
}

.white-bg-img {
    background-image: url("../images/white-bg.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

/* Initial state of the comment reply section */
.comment-reply {
    display: none;
    /* Start with the element hidden */
    opacity: 0;
    /* Start with the element fully transparent */
    transition: all 0.3s ease;
    /* Smooth transition for all properties */
}

/* Active state when the comment reply section is visible */
.comment-reply.active {
    display: block;
    /* Display the element */
    opacity: 1;
    /* Element is fully opaque */
}

#lokasi {
    scroll-margin-top: 60px;
}

#solusi {
    scroll-margin-top: 30px;
}

.faq-answer p {
    padding-bottom: 12px;
}

.list-none {
    position: relative;
}

.list-none li {
    align-self: flex-start;
}

.list-none li::before {
    content: "";
    position: absolute;
    top: 42px;
    left: 0;
    width: 100%;
    height: 2px;
    /* Adjust the height as needed */
    background-color: var(--def-purple);
    /* Change the color to your preference */
    transform: translateY(-50%);
    z-index: 1;
    /* Place the line behind the text */
}

.list-none li:first-child::before {
    width: 50%;
    /* Line starts from center of first li */
    left: 50%;
    /* Adjust as needed */
}

.list-none li:last-child::before {
    width: 50%;
    /* Line spans to center of fourth li */
    right: 50%;
    /* Adjust as needed */
}

/* Hide the line on screens smaller than 540px */
@media (max-width: 540px) {
    .list-none li::before {
        display: none;
    }
}

@media (max-width: 425px) {
    .slick-prev {
        left: -0.5rem !important;
    }

    .slick-next {
        right: -0.5rem !important;
    }
}