*{
    box-sizing: border-box;
    padding: 0;
    margin:0;
    font-family: "Roboto", sans-serif;
    color: #000;
}
html{
    height: 100%;
    scroll-behavior: smooth;
}
body{
    height: 100%;
}
.container{
    width: 90%;
    max-width: 1224px;
    margin: auto;
}
a{
    text-decoration: none;
}
.red{
    color: #c31c21;
}
.top{
    position: sticky;
    height: 50px;
    width: 100%;
    background: #000;
    z-index: 100;
    .container{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        span{
            color: #ffffff;
        }
        a{
            color: #ffffff;
            font-size: 1rem;
            display: flex;
            align-items: center;
            max-width: max-content;
            img{
                width: 20px;
            }
        }
    }
}
header{
    background: #ffffffd9;
    padding: 15px 0;
    position: fixed;
    top: 50px;
    left: 0;
    width: 100%;
    z-index: 99;
    border-bottom: 1px solid #eaeaea;
    transition: top 0.5s ease-in-out;
    .container{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .logo{
            img{
                width: 200px;
            }
        }
        nav{
            .menu-mobile{
                display: none;
            }
            ul{
                list-style: none;
                display: flex;
                li{
                    a{
                        text-decoration: none;
                        font-size: 1rem;
                        font-weight: 500;
                        &:hover{
                            color: #e92227;
                        }
                        &.active{
                            color: #e92227;
                        }
                    }
                    &:not(:last-child){
                        margin-right: 25px;
                    }
                    &.mobile{
                        display: none;
                    }
                }
            }
        }
    }
    &.fixed{
        /* position: fixed; */
        top: 0;
        left: 0;
    }
}
section{
    height: 100%;
    margin-top: 90px;
    .banner{
        /* background: radial-gradient(#e9222730, #ffffff, #afafaf30); */
        /* background-blend-mode: screen; */
        height: calc(100% - 140px);
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: calc(100% - 140px);
        .container{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .hero{
                background-size: cover;
                width: 50%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 1;
                img{
                    width: 80%;
                    max-width: 600px;
                    aspect-ratio: 1 / 1;
                    object-fit: cover;
                    border-radius: 10px;
                    border: 5px solid #fff;
                }
            }
            .desc{
                width: 50%;
                height: 100%;
                position: relative;
                display: flex;
                /* background: rebeccapurple; */
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;
                z-index: 2;
                padding: 0 30px;
                h1{
                    font-size: 3rem;
                    color: #231f20;
                    text-align: left;
                    span{
                        display: block;
                        background: #e92227;
                        color: #fff;
                        padding: 0 20px;
                        margin-bottom: 15px;
                        max-width: max-content;
                    }
                }
                p{
                    font-size: 18px;
                    margin:20px 0;
                    color: #231f20;
                    /* margin:20px auto 50px auto; */
                    text-align: left;
                    max-width: 700px;
                    line-height: 150%;
                }
                a{
                    border-radius: 2px;
                    background: none;
                    color: #e92227;
                    border: 1px solid #e92227;
                    padding: 10px;
                    border-radius: 10px;
                    &:hover{
                        background: #e92227;
                        color: #ffffff;
                    }
                }
            }
        }
        .overlay-banner{
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #00000085;
            z-index: 0;
        }
        .bg-bottom{
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 100%;
            z-index: 0;
            svg{
                filter: drop-shadow(0px -5px 5px #eaeaea);
            }
        }
    }
    .title{
        background: #fff;
        height: 70px;
        .container{
            padding:0px 0 0px 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
        }
        h1,h2{
            font-size: 3rem;
            display: flex;
            align-items: center;
            background: linear-gradient(90deg, #000000, #c31c21);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            img{
                width: 50px;
                margin-right: 15px;
            }
        }
    }
    .about{
        padding: 70px 0 50px 0;
        max-width: 700px;
        margin: auto;
        .description{
            padding-top: 50px;
            line-height: 150%;
        }
    }
    .why-seven{
        padding: 50px 0 50px 0;
        .title{
            max-width: 700px;
            margin:auto;
        }
        ul{
            list-style: none;
            display: flex;
            margin-top: 50px;
            justify-content: space-around;
            li{
                width: calc(100% / 4 - 6px);
                height: 300px;
                background: linear-gradient(45deg, black, #e9222c);
                border-radius: 0 0 50px 0;
                padding: 20px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                img{
                    width: 100px;
                    margin: 0 auto 5px auto;
                }
                h3{
                    margin-bottom: 20px;
                    color: #ffffff;
                    height: 40px;
                }
                p{
                    color: #fff;
                }
            }
        }
    }
    .spesifikasi{
        padding: 50px 0 50px 0;
        max-width: 700px;
        margin: auto;
        h2{
            background: linear-gradient(90deg, #000000, #c31c21);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: flex;
            align-items: center;
            img{
                &.small{
                    width: 22px;
                    margin-right: 10px;
                }
            }
        }
        img{
            margin: 20px 0;
        }
        ul{
            margin-left: 10px;
            li{
                h3{
                    margin-bottom: 10px;
                }
                &:not(:last-child){
                    margin-bottom: 15px;
                }
                p{
                    line-height: 150%;
                }
            }
        }
        table{
            margin-top: 10px;
            tr{
                &:first-child{
                    td{
                        font-weight: bold;
                    }
                }
                td{
                    border-bottom: 1px solid #eaeaea;
                    padding: 10px 0;
                    &:first-child{
                        font-weight: bold;
                        width: max-content;
                    }
                }
            }
        }
        .spec-row{
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            .col{
                width: calc(50% - 5px);
                h3{
                    background: linear-gradient(45deg, black, #e92227);
                    color: #fff;
                    padding: 8px 10px;
                    margin: 5px 0;
                }
                ul{
                    margin-left: 15px;
                    margin-top: 20px;
                    li{
                        margin-bottom: 10px;
                        padding-bottom: 10px;
                        border-bottom: 1px solid #eaeaea;
                    }
                    &.with-bg{
                        margin: auto;
                        list-style: none;
                        li{
                            margin-bottom: 0;
                            padding: 10px;
                        }
                    }
                }
                &.col-12{
                    width: 100%;
                }
            }
        }
        p{
            line-height: 150%;
        }
    }
    .price{
        padding: 0px 0 50px 0;
        max-width: 700px;
        margin: auto;
        h2{
            background: linear-gradient(90deg, #000000, #c31c21);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: flex;
            align-items: center;
            img{
                &.small{
                    width: 22px;
                    margin-right: 10px;
                }
            }
        }
        .content{
            margin-top: 20px;
            table{
                margin-top: 20px;
                border-collapse: collapse;
                thead{
                    tr{
                        th{
                            text-align: left;
                            border: 1px solid;
                            padding: 10px 5px;
                            color: #fff;
                            border: 1px solid #000000;
                            &:first-child{
                                background: linear-gradient(45deg, #000000, #e92227);
                            }
                            &:last-child{
                                background: linear-gradient(45deg, #e92227, #000000);
                            }
                        }
                    }
                }
                tbody{
                    tr{
                        td{
                            padding: 5px;
                            border: 1px solid #050101;
                            &:is(:last-child){
                                text-align: center;
                            }
                        }
                    }
                }
            }
        }
    }
    .contact-us{
        padding: 50px 0 50px 0;
        max-width: 700px;
        margin: auto;
        p{
            line-height: 150%;
        }
        ul{
            margin-top: 10px;
            list-style: none;
            li{
                &:not(:last-child){
                    margin-bottom: 10px;
                }
            }
        }
    }
    .katalog{
        background: radial-gradient(black, #ea1f26);
        padding: 30px 0;
        backdrop-filter: opacity(0.1);
        .container{
            .row{
                display: flex;
                .col{
                    img{
                        max-width: 430px;
                    }
                    &.order-info{
                        padding: 30px 50px;
                    }
                    .title{
                        background: none;
                        h2{
                            background: linear-gradient(90deg, #ffffff, #ffffff);
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                            img{
                                filter: brightness(5);
                            }
                        }
                    }
                    *{
                        color: #ffffff;
                        line-height: 150%;
                    }
                    ul{
                        margin-left: 15px;
                        li{
                            &:not(:last-child){
                                margin-bottom: 5px;
                            }
                        }
                    }
                    &.order-info{
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        .cta{
                            display: flex;
                            a{
                                border: 1px solid;
                                display: inline-block;
                                padding: 10px;
                                margin-top: 20px;
                                max-width: max-content;
                                &:hover{
                                    background: #ffffff;
                                    color: #000;
                                }
                                &:first-child{
                                    margin-right: 10px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .faq{
        padding: 50px 0 50px 0;
        max-width: 700px;
        margin: auto;
        ul{
            list-style: none;
            margin-top: 20px;
            li{
                border: 1px solid #eaeaea;
                padding: 20px;
                padding-right: 50px;
                &:not(:last-child){
                    margin-bottom: 10px;
                }
                .q{
                    font-weight: bold;
                    margin-bottom: 10px;
                    *{
                        font-size: 0.9rem;
                    }
                }
            }
        }
    }
    .product{
        padding-bottom: 20px;
        .title{
            margin: 15px 0;
            .container{
                display: flex;
                align-items: center;
                justify-content: space-between;
                a{
                    border: 1px solid;
                    color: #e92227;
                    padding: 10px;
                    &:hover{
                        background:  #e92227;
                        color: #ffffff;
                    }
                }
            }
        }
        .product-list{
            .color-category{
                position: sticky;
                top: 90px;
                background: #f4f4f4;
                height: 45px;
                display: flex;
                align-items: center;
                font-weight: bold;
                padding-left: 10px;
                border-bottom: 10px solid #fff;
            }
            ul{
                list-style: none;
                display: flex;
                flex-wrap: wrap;
                li{
                    border: 2px solid #ffffff;
                    width: calc(100% / 5 - 5px);
                    margin-bottom: 20px;
                    border: 1px solid #eaeaea;
                    padding: 5px;
                    border-radius: 5px;
                    margin-right: 5px;
                    img{
                        width: 100%;
                        border-radius: 3px 3px 0 0;
                        background: url('images/img-ph.png') center no-repeat, #eaeaea6b;
                        min-width: 100%;
                        aspect-ratio: 1 / 1;
                        background-size: 30px;
                    }
                    .coating{
                        span{
                            font-size: 0.75rem;
                            border: 1px solid;
                            border-radius: 5px;
                            padding: 1px 15px;
                            margin:5px 3px 5px 0;
                            display: inline-block;
                        }
                    }
                }
            }
        }
        .filter-product{
            margin-bottom:15px;
            .filter{
                position:relative;
                .search{
                    width:100%;
                    height:45px;
                    padding:10px;
                    padding-left:60px;
                    font-size:1rem;
                    background: #ffffff;
                    border: 1px solid #b8b8b8;
                    box-shadow: none;
                    outline: none;
                    border-radius: 4px;
                    &:focus{
                        outline:none;
                    }
                }
                .icon{
                    position:absolute;
                    left:0;
                    top:0;
                    height:45px;
                    width:50px;
                    font-size:1rem;
                    cursor:pointer;
                    background:url('images/search-product.png') center no-repeat, #eaeaea;
                    background-size:22px;
                    background-size: 22px;
                    border: 1px solid #b8b8b8;
                    border-radius: 4px 0px 0px 4px;
                }
            }
        }
    }
    .blog{
        ul{
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            margin: 20px 0;
            li{
                width: calc(100% / 4 - 5px);
                border: 1px solid #eaeaea;
                margin-bottom: 20px;
                margin-right: 5px;
                img{
                    width: 100%;
                    aspect-ratio: 4 / 2.5;
                    object-fit: fill;
                }
                .blog-title{
                    padding: 10px;
                }
            }
        }
        .detail{
            max-width: 700px;
            margin: auto;
            margin-bottom: 50px;
            padding: 15px 18px;
            h1{
                margin-bottom: 20px;
                line-height: 150%;
            }
            img{
                width: 100%;
                margin-bottom: 20px;
                aspect-ratio: 4/2.5;
                object-fit: cover;
            }
            p{
                line-height: 150%;
                min-height: 10px;
            }
            h2{
                margin: .5rem 0;
                line-height: 156%;
            }
            h3{
                margin: 0.5rem 0;
            }
            blockquote{
                border-left: 5px solid rgba(61, 37, 20, .122);
                margin: 15px 0;
                padding-left: 20px;
            }
            a{
                color: #e92227;
            }
            ul,ol{
                list-style: disc;
                display: block;
                margin-left: 15px;
                li{
                    width: 100%;
                    border: none;
                    margin: 0 0 10px 0;
                }
            }
        }
    }
    .about-us{
        padding:20px 0 50px 0;
        .title{
            margin-bottom: 20px;
        }
        .container{
            max-width: 700px;
        }
    }
    .harga{
        display: flex;
        margin-top: 15px;
        h1{
            font-size: 2.5rem;
        }
        .content-nav{
            width: 280px;
            nav{
                position: sticky;
                    top: 110px;
                h2{
                    font-size: 1rem;
                    margin: 10px 0;
                }
                ol{
                    width: 100%;
                    list-style: none;
                    border: 1px solid #eaeaea;
                    padding: 20px;
                    border-radius: 5px;
                    li{
                        &:not(:last-child){
                            margin-bottom: 8px;
                        }
                    }
                }
            }            
        }
        .content{
            padding: 0 40px 30px 40px;
            flex: 1;
            .hero{
                .title{
                    height: auto;
                    margin-bottom: 20px;
                }
                .banner-harga{
                    margin-bottom: 20px;
                    img{
                        border-radius: 5px;
                    }
                }
            }
            h2{
                margin:0.5rem 0;
            }
            p{
                font-size: 1rem;
                line-height: 150%;
            }
            ol{
                margin-left: 20px;
            }
            table{
                /* margin-top: 20px; */
                border-collapse: collapse;
                thead{
                    tr{
                        th{
                            text-align: right;
                            border: 1px solid;
                            padding: 10px 5px;
                            color: #fff;
                            border: 1px solid #000000;
                            background: linear-gradient(45deg, #e92227);
                            &:first-child{
                                text-align: left;
                                background: linear-gradient(45deg, #000000, #e92227);
                            }
                            &:last-child{
                                background: linear-gradient(45deg, #e92227, #000000);
                            }
                        }
                    }
                }
                tbody{
                    tr{
                        td{
                            padding: 5px;
                            border: 1px solid #050101;
                            &:is(:last-child){
                                /* text-align: center; */
                            }
                        }
                    }
                }
            }
            .note{
                background: #f6f6f6;
                padding: 15px;
                border-radius: 5px;
            }
            .cat-grid{
                display:grid; gap:.75rem; 
                grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
                .cat-card{
                    border: 1px solid #eaeaea;
                    .header{
                        border-bottom: 1px solid #eaeaea;
                        background: black;
                        padding: 2px 10px;
                        h3{
                            font-size: 1rem;
                        }
                        a{
                            color: #fff;
                        }
                    }
                    .body{
                        padding: 10px;
                        /* min-height: 75px; */
                        ul{
                            /* margin-left: 15px; */
                            list-style: none;
                            li{
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                            }
                        }
                    }
                    .footer{
                        max-height: 40px;
                        padding: 5px 10px;
                        border-top: 1px solid #eaeaea;
                        a{
                            font-size: 0.9rem;
                            &:hover{
                                color: #7e1416;
                            }
                        }
                    }
                    
                }
            }
            .call-sales{
                display: block;
                max-width: max-content;
                border: none;
                padding: 7px 15px;
                margin-bottom: 20px;
                border-radius: 4px;
                background: linear-gradient(45deg, #e92227, #000000);
                color: #fff;
                font-size: 0.9rem;
            }
        }
        .content-action{
            width: 250px;
            .sticky{
                position: sticky;
                top: 110px;
                img{
                    width: 100%;
                    border: 1px solid #eaeaea;
                    border-radius: 5px;
                    margin-bottom: 5px;
                }
                a{
                    display: block;
                    position: relative;
                    width: 100%;
                    background: linear-gradient(#7e1416, #e92227);
                    color: #ffff;
                    font-size: 1rem;
                    padding: 10px;
                    border-radius: 5px;
                    text-align: center;
                    &.border{
                        background: #fff;
                        border: 1px solid #e92227;
                        color : #e92227;
                        margin-bottom: 8px;
                        height: 39px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
            }
        }
    }
}
.breadcrumb{
    padding: 20px 0 0 0;
    .container{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    ul{
        display: flex;
        list-style: none;
        li{
            position: relative;
            &:not(:last-child){
                padding-right: 20px;
                &::after{
                    content: '/';
                    position: absolute;
                    right: 5px;
                    top: 0;
                }
            }
        }
    }
    button{
        border: none;
        color: #e92227;
        height: 41px;
        display: flex;
        align-items: center;
        padding: 0 10px;
        background: none;
        cursor: pointer;
    }
}
.wa-contact{
    position: fixed;
    left: 0;
    bottom: -100px;
    width: 100%;
    z-index: 3;
    transition: bottom 0.5s ease-in;
    &.show{
        bottom: 20px;
    }
    .container{
        position: relative;
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        a{
            display: flex;
            align-items: center;
            justify-content: flex-end;
            span{
                background: #e92227;
                padding: 10px 15px;
                border-radius: 4px;
                margin-right: 5px;
                color: #fff;
                font-size: 1rem;
            }
            .img{
                padding: 7px;
                width: 45px;
                background: #e92227;
                border-radius: 4px;
                display: flex;
                align-items: center;
                justify-content: center;
                img{
                    width: 25px;
                }
            }
        }
        .notif{
            display: none;
            padding: 20px;
            position: absolute;
            right: 0;
            top: -175px;
            width: 270px;
            height: auto;
            background: #ffffffd4;
            text-align: left;
            border-radius: 5px;
            filter: drop-shadow(3px 7px 6px #eaeaea);
            b{
                display: block;
                margin-bottom: 8px;
            }
            a{
                justify-content: flex-start;
                color: #e92227;
                font-size: 0.85rem;
            }
            button{
                background: none;
                border: none;
                outline: none;
                color: #e92227;
                font-size: 1rem;
                position: absolute;
                right: 20px;
                cursor: pointer;
            }
        }
    }
}
footer{
    background: #000;
    position: relative;
    *{
        color: #ffffff;
    }
    .container{
        padding: 50px 0;
    }
}
.product-menu{
    display: none;
}
@media only screen and (max-width: 480px) {
    .top{
        height: 40px;
        z-index: 0;
        *{
            font-size: 0.9rem;
        }
        .container{
            a{
                font-size: 0.9rem;
            }
        }
    }
    header{
        top: 40px;
        .container{
            .logo{
                img{
                    width: 120px;
                }
            }
            nav{
                .menu-mobile{
                    height: 29px;
                    background: none;
                    border: none;
                    box-shadow: none;
                    display: block;
                    .menu-mobile-hamburger{
                        height: 1px;
                        width: 30px;
                        background: #000;
                        position: relative;
                        &::after{
                            content: '';
                            height: 2px;
                            width: 30px;
                            background: #000;
                            position: absolute;
                            bottom: -9px;
                            left: 0;
                        }
                        &::before{
                            content: '';
                            height: 1px;
                            width: 30px;
                            background: #000;
                            position: absolute;
                            top: -7px;
                            left: 0;
                        }
                    }
                }
                ul{
                    /* display: none; */
                    transform: translate(0,-100%);
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    background: #ffffff;
                    flex-direction: column;
                    padding: 30px;
                    z-index: 99;
                    border-radius: 0 0 10px 10px;
                    border-top: 10px solid;
                    li{
                        &:not(:last-child){
                            margin-bottom: 25px;
                            margin-right: 0;
                        }
                        &.mobile{
                            text-align: right;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            padding-bottom: 10px;
                            img{
                                width: 100px;
                            }
                            button{
                                width: 25px;
                                height: 25px;
                                background: none;
                                border: none;
                                font-size: 1.2rem;
                            }
                        }
                    }
                    &.show{
                        /* display: block; */
                        transform: translate(0,0);
                        transition: all 0.2s ease-in;
                    }
                }
            }
        }
    }
    section{
        margin-top: 60px;
        .title{
            h1,h2{
                font-size: 1.6rem;
                img{
                    width: 30px;
                    margin-right: 12px;
                }
            }
        }
        .banner{
            height: calc(100% - 91px);
            /* background: url('/images/acp-slide3.webp') center no-repeat, #ffffff; */
            /* background-size: cover; */
            .container{
                width: 100%;
                height: 100%;
                flex-direction: column;
                .hero{
                    width: 100%;
                    padding: 0;
                    justify-content: flex-start;
                    img{
                        width: 100%;
                        max-width: 100%;
                    }
                }
                .desc{
                    width: 95%;
                    background: #ffffffc2;
                    margin-top: -215px;
                    border-radius: 30px 30px 0 0;
                    backdrop-filter: blur(6px);
                    padding: 0 20px;
                }
            }
            .desc{
                h1{
                    font-size: 2rem!important;
                    span{
                        padding: 0 5px!important;
                    }
                }
                p{
                    font-size:16px!important;
                }
                a{
                    font-size: 0.9rem;
                }
            }
            .bg-bottom{
                z-index: 2;
            }
        }
        .about{
            padding: 30px 20px 30px 20px;
            .description{
                padding-top: 20px;
                font-size: 0.9rem;
            }
        }
        .why-seven {
            padding: 0px 20px 20px 20px;
            .container {
                width: 100%;
                ul{
                    flex-direction: column;
                    margin-top: 20px;
                    li{
                        height: auto;
                        width: 100%;
                        padding: 30px 20px;
                        &:not(:last-child){
                            margin-bottom: 10px;
                        }
                        img{
                            width: 80px;
                        }
                        h3 {
                            margin-bottom: 10px;
                            color: #ffffff;
                            height: auto;
                            font-size: 1.1rem;
                        }
                        p{
                            font-size: 0.9rem;
                        }
                    }
                }
            }
        }
        .spesifikasi{
            padding:20px 20px 30px 20px;
            .container{
                width: 100%;
                ul{
                    margin-top: 10px;
                    margin-left: 15px;
                    li{
                        h3{
                            font-size: 1.1rem;
                        }
                        p{
                            font-size: 0.9rem;
                        }
                    }
                }
                table{
                    tr{
                        td{
                            font-size: 0.85rem;
                        }
                    }
                }
                .spec-row{
                    margin-top: 10px;
                    display: flex;
                    justify-content: space-between;
                    flex-direction: column;
                    .col{
                        width: 100%;
                        h3{
                            background: linear-gradient(45deg, black, #e92227);
                            color: #fff;
                            padding: 8px 10px;
                            margin: 5px 0;
                        }
                        ul{
                            margin-left: 15px;
                            margin-top: 20px;
                            li{
                                margin-bottom: 15px;
                                padding-bottom: 10px;
                                border-bottom: 1px solid #eaeaea;
                            }
                            &.with-bg{
                                margin: auto;
                                width: 98%;
                                background: #da21250d;
                                margin-bottom: 15px;
                                li{
                                    font-size: 0.9rem;
                                    margin-bottom: 0;
                                }
                            }
                        }
                        &.col-12{
                            width: 100%;
                        }
                    }
                }
                p{
                    font-size: 0.9rem;
                    line-height: 150%;
                }
            }
        }
        .price{
            padding: 0px 20px 50px 20px;
            max-width: 700px;
            margin: auto;
            h2{
                background: linear-gradient(90deg, #000000, #c31c21);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                display: flex;
                align-items: center;
            }
            .content{
                margin-top: 0;
                table{
                    thead{
                        tr{
                            th{
                                font-size: 0.9rem;
                            }
                        }
                    }
                    tbody{
                        tr{
                            td{
                                font-size: 0.9rem;
                            }
                        }
                    }
                }
            }
        }
        .katalog{
            .container{
                .row{
                    flex-direction: column;
                    .col{
                        .title{
                            height: auto;
                            margin-top: 30px;
                        }
                        &.order-info{
                            padding: 0;
                            background: #0000004d;
                            padding: 0 15px 30px 15px;
                            margin-top: 20px;
                            .cta{
                                a{
                                    width: 50%;
                                    max-width: 50%;
                                    text-align: center;
                                    font-size: 0.9rem;
                                }
                            }
                        }
                        ul{
                            li{
                                font-size: 0.9rem;
                            }
                        }
                        p{
                            font-size: 0.9rem;
                        }
                    }
                }
            }
        }
        .faq{
            padding:20px;
            ul{
                li{
                    padding: 10px;
                    font-size: 0.9rem;
                }
            }
        }
        .product{
            .title{
                margin:15px 0 0 0;
                .container{
                    a{
                        display: none;
                    }
                }
            }
            .container{
                &.list{
                    width: 92%;
                }
            }
            .product-list{
                .color-category {
                    position: sticky;
                    top: 63px;
                    background: #ffffff;
                    height: 40px;
                    display: flex;
                    align-items: center;
                    font-weight: bold;
                    padding-left: 0;
                    border-bottom: none;
                }
                ul{
                    justify-content: space-between;
                    li{
                        width: calc(100% / 2 - 2px);
                        margin-bottom: 5px;
                        margin-right: 0;
                        padding: 0;
                        .coating{
                            span{
                                &:first-child{
                                    margin-left: 7px;
                                }
                            }
                        }
                        .color-code{
                            font-size: 0.9rem;
                            padding: 5px;
                        }
                    }
                }
            }
            .filter-product{
                .filter{
                    .search{
                        height:40px;
                        padding-left:55px;
                    }
                    .icon{
                        position:absolute;
                        left:0;
                        top:0;
                        height:40px;
                        width:45px;
                        font-size:1rem;
                        cursor:pointer;
                        background:url('images/search-product.png') center no-repeat, #eaeaea;
                        background-size:22px;
                        background-size: 22px;
                        border: 1px solid #b8b8b8;
                        border-radius: 4px 0px 0px 4px;
                    }
                }
            }
        }
        .blog{
            ul{
                li{
                    width: 100%;
                }
            }
            .detail{
                p{
                    font-size: 0.9rem;
                }
                h2{
                    line-height: 150%;
                    font-size: 1.1rem;
                }
            }
        }
        .about-us{
            padding: 10px 0 50px 0;
            .title {
                margin-bottom: 10px;
            }
            h2{
                font-size: 1.15rem;
            }
        }
        .harga{
        display: flex;
        margin-top: 15px;
        h1{
            font-size: 2.5rem;
        }
        .content-nav{
            display: none;
            width: 280px;
            nav{
                position: sticky;
                    top: 110px;
                h2{
                    font-size: 1rem;
                    margin: 10px 0;
                }
                ol{
                    width: 100%;
                    list-style: none;
                    border: 1px solid #eaeaea;
                    padding: 20px;
                    border-radius: 5px;
                    li{
                        &:not(:last-child){
                            margin-bottom: 8px;
                        }
                    }
                }
            }            
        }
        .content{
            padding: 0;
            padding-bottom: 30px;
            flex: 1;
            .hero{
                .title{ 
                    height: auto;
                    margin-bottom: 20px;
                    h1{
                        font-size: 1.5rem;
                    }
                }
                .banner-harga{
                    margin-bottom: 20px;
                    img{
                        border-radius: 5px;
                    }
                }
            }
            h2{
                margin:0.5rem 0;
                font-size: 1.1rem;
            }
            h3{
                font-size: 1rem;
            }
            p{
                font-size: 0.9rem;
                line-height: 150%;
            }
            ol{
                margin-left: 20px;
                li{
                    font-size: 0.9rem;
                }
            }
            ul{
                li{
                    font-size: 0.9rem;
                }
            }
            table{
                /* margin-top: 20px; */
                border-collapse: collapse;
                thead{
                    tr{
                        th{
                            text-align: right;
                            border: 1px solid;
                            padding: 10px 5px;
                            color: #fff;
                            border: 1px solid #000000;
                            background: linear-gradient(45deg, #e92227);
                            font-size: 0.9rem;
                            &:first-child{
                                text-align: left;
                                background: linear-gradient(45deg, #000000, #e92227);
                            }
                            &:last-child{
                                background: linear-gradient(45deg, #e92227, #000000);
                            }
                        }
                    }
                }
                tbody{
                    tr{
                        td{
                            padding: 5px;
                            border: 1px solid #050101;
                            font-size: 0.9rem;
                            &:is(:last-child){
                                /* text-align: center; */
                            }
                        }
                    }
                }
            }
            .note{
                background: #f6f6f6;
                padding: 15px;
                border-radius: 5px;
            }
            .cat-grid{
                display:grid; gap:.75rem; 
                grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
                .cat-card{
                    border: 1px solid #eaeaea;
                    .header{
                        border-bottom: 1px solid #eaeaea;
                        background: black;
                        padding: 2px 10px;
                        h3{
                            font-size: 1rem;
                        }
                        a{
                            color: #fff;
                        }
                    }
                    .body{
                        padding: 10px;
                        /* min-height: 75px; */
                        ul{
                            /* margin-left: 15px; */
                            list-style: none;
                            li{
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                font-size: 0.9rem;
                            }
                        }
                    }
                    .footer{
                        max-height: 40px;
                        padding: 5px 10px;
                        border-top: 1px solid #eaeaea;
                        a{
                            font-size: 0.9rem;
                            &:hover{
                                color: #7e1416;
                            }
                        }
                    }
                    
                }
            }
        }
        .content-action{
            width: 250px;
            display: none;
            .sticky{
                position: sticky;
                top: 110px;
                img{
                    width: 100%;
                    border: 1px solid #eaeaea;
                    border-radius: 5px;
                    margin-bottom: 5px;
                }
                a{
                    display: block;
                    position: relative;
                    width: 100%;
                    background: linear-gradient(#7e1416, #e92227);
                    color: #ffff;
                    font-size: 1rem;
                    padding: 10px;
                    border-radius: 5px;
                    text-align: center;
                    &.border{
                        background: #fff;
                        border: 1px solid #e92227;
                        color : #e92227;
                        margin-bottom: 8px;
                        height: 39px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
            }
        }
    }
    }
    .wa-contact{
        height: 35px;
        .container{
            .notif{
                top: -160px;
                p{
                    font-size: 0.9rem;
                }
            }
            a{
                span{
                    font-size: 0.9rem;
                }
                .img{
                    padding: 6px;
                }
            }
        }
        &.hide{
            display: none;
        }
    }
    .product-menu{
        position: fixed;
        bottom: 0;
        left: 0;
        background: #ffffffb3;
        display: flex;
        width: 100%;
        z-index: 99;
        padding: 10px 12px;
        justify-content: space-around;
        a{
            display: flex;
            font-size: 0.9rem;
            align-items: center;
            justify-content: center;
            padding: 7px 10px;
            width: calc(100% / 2 - 7px);
            border-radius: 5px;
            &.catalog{
                background: #fff;
                color: #e92227;
                border: 1px solid;
            }
            &.call{
                background: #e92227;
                color: #fff;
            }
            img{
                width: 20px;
                margin-right: 3px;
            }
        }
        .col{
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            
        }
    }
}
.overlay{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #000000d4;
    z-index: 98;
    &.show{
        display: block;
    }
}