/* --- Mobile (ukuran kecil dan sedang) --- */
@media (max-width: 768px) {
    /* GENERAL */
    .text-wraps-breadcrumbs {
        text-align: center;
        padding-top: 5%;
    }

    .text-breadcrumbs {
        font-size: 30px;
    }

    /* Carousel */
    .carousel .carousel-inner .carousel-item {
        margin-top: 0px;
    }

    .carousel .carousel-inner .carousel-item img {
        height: 200px;
        object-fit: cover;
    }

    .carousel-caption-type1 {
        top: 50%;
        left: -10%;
        transform: translate(50%, -50%);
    }

    .carousel-caption-type2 {
        top: 65%;
        left: 0;;
        transform: translate(10%, -50%);
    }

    .carousel .carousel-control-prev .carousel-control-prev-icon,
    .carousel .carousel-control-next .carousel-control-next-icon {
        display: none;
    }

    .carousel-indicators {
        display: none;
    }

    /* HOME */
    .background-lp1 {
        background-image: url(../img/element2.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-color: #263d40;
        width: 100%;
        height: auto; /* Adjust height to fit content instead of fixed 100vh */
        overflow: hidden;
    }
    
    .background-lp2 {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-color: #263d40;
        width: 100%;
        position: static;
        margin-top: -100px;
        height: auto; /* Set height to 100% of the viewport height */
        overflow: hidden; /* Prevent overflow if content exceeds the height */
    }
    
    .background-lp5 {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-color: #E8E8E8;
        width: 100%;
        position: static;
        margin-top: -100px;
        height: auto; /* Set height to 100% of the viewport height */
        overflow: hidden; /* Prevent overflow if content exceeds the height */
    }
    
    .col-5-custom {
        width: 50%;
        max-width: 50%;
        flex: 0 0 100%;
        margin-top:10%;
        margin-bottom:10%;
        transform: translate(0px, 50px);
    }

    .product__item {
        position: relative;
        overflow: hidden;
        height: 300px;
        width: 100%;
    }

    /* ABOUT */
    .pattern-box-about {
        display: none;
    }

    .text-illustration-about1 {
        transform: translate(0%, 0%);
    }

    .section-about-2 {
        height: 100%;
    }

    .image-illustration-about2 {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* CALCULATOR */
    .calculator-section {
        height: 100%;
    }

    .ceiling-box {
        width: 80%;
        height: 100%;
        display: flex;
    }

    /* PRODUCT */
    .wrap-category {
        justify-content: center;
    }

    .box-image-product {
        object-fit: cover; 
        height: 120px;
    }

    .brand-button {
        width: 100%;
        padding: 15px 40px;
        font-weight: bold;
        font-size: 1rem;
        border: 2px solid #d5e521;
        background-color: transparent;
        border-radius: 6px;
        transition: all 0.3s;
        cursor: pointer;
    }

    /* INSPIRATION */
    .virtual-mask-right-side {
        margin-top: 175px;
    }

    /*STORE LOCATOR*/
    .map-wraps{
        height: 260px; 
        width: 100%;
    }

    .icon-store-location {
        padding: 0px;
    }

    /* ARTICLE */
    .article-button-top {
        text-align: center;
    }

    .thumbnail-article {
        object-fit: cover; 
        height: 250px;
    }

    .readmore-artcile {
        float: right; 
        width:50%;
    }

    /* CONTACT */
    .background-contact {
        background-image: url('../img/contact.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 850px;
    }

    .text-contact-greeting {
        z-index:-1; 
        position: absolute; 
        font-size: 20px;
        top: 30%;
        width: 250px;
        z-index: 1;
    }

    .icon-contact {
        position: relative;
        top: -20%;
    }

    .contact-section {
        height: 100%;
    }

    .form-contact {
        position: relative;
        top: -10%;
        padding: 20px;
    }
}