/*Primary color: #c22626  , 2nd #f8901f*/
/*Unify*/
#main_index{
    overflow: hidden;
    padding-bottom: 0!important;
}
.slider_banner .banner_content {
    overflow: hidden;
}
button.j_btn{
    outline: none;
}
.j_btn {
    background: #fff;
    border-radius: 50px;
    border: 2px solid #fff;
    padding: 8px 35px;
    transition: all 0.3s ease-in-out;
}
.j_btn:hover{
    background: transparent;
    color: #fff;
}

.alter_floating_button{
    position: absolute;
    left: 15px;
    width: 195px;
    border: 1px solid #c22626;
    border-radius: 10px;
    padding: 5px;
    font-size: 14px;
    text-align: center;
    background-color:#fff;
}
.alter_floating_button a:hover{
    text-decoration: none;
    color:#c22626;
}
.afb1{
    top:-10vh;
}
.afb2{
    top: -5vh;
}

@media all and (max-width:767.5px){
    .alter_floating_button{
        width: 140px;
        font-size:10px;
    }
}


/*navigation*/
.navbar_type10 {
    margin-top: 55px;
}
.navbar_type10 .nav_search {
    max-width: 50vw;
}
.navbar_type10 .nav_search input {
    padding: 10px 25px;
    border-radius: 30px 0 0 30px;
}
.navbar_type10 .nav_search .search_button {
    background-color: rgba(240, 242, 245, 1);
    color: #c22626;
    border-radius: 0 30px 30px 0;
}
/*nav bottom*/
.nav_bottom {
    height: 55px;
    box-shadow: inset 0 10px 5px -5px #c2c2c2;
    padding: 0 10vw;
    background-color:#000;
}
.nav_bottom .menu .nav_item .dropdown a{
    color:#fff;
}
.nav_bottom .menu .nav_item .dropdown .dropdown_menu .dropdown_body a{
    color:#000;
}
.nav_bottom .cart {
    background-color: #000;
}
.nav_bottom .menu .nav_item:hover {
    background: #eee!important;
}
.nav_bottom .menu .nav_item:nth-child(9) {
    background: linear-gradient(45deg, #c22626 , #f8901f);
}
.nav_bottom .menu .nav_item:nth-child(9) .dropdown a {
    color: #ffffff;
}
.nav_bottom .menu .nav_item .dropdown a {
    font-size: 1.05vw;
    padding: 15px 1.3vw;
}
html:lang(ms) .nav_bottom .menu .nav_item .dropdown a{
    font-size: 0.9vw;
    padding: 15px 0.6vw;
}
.nav_bottom .mega_menu .mega_menu_body {
    top: 5px;
    overflow-y: scroll;
}
.nav_bottom .container.p-0 {
    justify-content: center!important;
    max-width: 100%!important;
}
.nav_bottom .menu .nav_item .dropdown .dropdown_menu {
    top: calc(100% - 8px);
}
/*mobile*/
.navbar_mobile .btn-outline-light {
    font-size: 20px!important;
    border-radius: 50%!important;
}
@media all and (max-width:1200.52px){
    html:lang(ms) .nav_bottom .menu .nav_item .dropdown a{
        font-size: 1vw;
        padding: 15px 0.6vw;
    }
}
@media all and (max-width:991.52px){
    .nav_bottom {
    display: flex;
    margin-top: 80px;
    margin-bottom: -80px;
    padding: 0 5vw;
    }
    .nav_bottom .category, 
    .nav_bottom .shopping {
    display: none;
    }
    /*.nav_bottom .menu .nav_item .dropdown a {*/
    /*font-size: 16px;*/
    /*padding: 15px 2.5vw;*/
    /*}*/
}
@media all and (max-width:767.52px){
    .nav_bottom {
    display: none;
    }
}
/*banner*/
#main_index .slider_banner .slick-dots {
    position: absolute;
    bottom: 1vw;
}
.slick-dotted.slick-slider {
    margin-bottom: 0;
}
#main_index .slider_banner .slick-dots li button:before {
    opacity: 0.75;
    font-size: 10px;
    color: #c2c2c2;
}
#main_index .slider_banner .slick-dots li.slick-active button:before{
    color: #000;
}
#main_index .slider_banner .slick-dots li:hover button:before {
    color: #424242;
}
#main_index .slider_banner .slick-arrow{
    filter: drop-shadow(0px 2px 2px black);
}
#main_index .slider_banner .slick-prev::before,
#main_index .slider_banner .slick-next::before {
    text-shadow: 0 0 5px black;
    width: 20px!important;
    height: 20px!important;
}

/*banner bottom*/
.bbanner-container {
    padding: 2rem 6vw;
    background: #ebebeb;
}
.bbanner-box {
    display: flex;
    align-items: center;
    justify-content: center;
}
.bbanner-box h3 {
    font-size: 32px;
    font-weight: 700;
    color: #000;
    margin-bottom: 0;
    white-space: nowrap;
}
.bbanner-box p {
    background: #000;
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 0;
    margin-left: 10px;
    padding: 10px 20px;
    text-align: center;
}
.bbanner-box p a {
    text-decoration: none;
    color: #fff;
}
.bbanner-box p span{
    white-space: nowrap;
}
@media all and (max-width:767.52px) {
    .bbanner-container {
    padding: 2rem ;
    }
    .bbanner-box {
    flex-direction: column;
    row-gap: 1rem;
    align-items: center;
    }
}
@media all and (max-width:575.52px) {
    .bbanner-container {
    padding: 1.5rem 1rem;
    }
    .bbanner-box {
    row-gap: 0.5rem;
    }
    .bbanner-box h3 {
    font-size: 24px;
    }
    .bbanner-box p {
    font-size: 13px;
    margin-left: 0;
    }
}
/*our Range*/
.range-container {
    padding: 6rem 15px;
}
.range-titlerow {
    margin-bottom: 4rem;
}
.titleribbon h2 {
    background: linear-gradient(45deg, #c22626 , #f8901f);
    clip-path: polygon(0 0, 100% 0%, 95% 100%, 0% 100%);
    padding: 15px 5rem 15px 15px;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    margin-left: -15px;
    margin-bottom: 0;
    display: flex;
    justify-content: flex-end;
}
.titleribbon span {
    display: inline-block;
    content: '';
    width: 2px;
    height: 35px;
    background: #fff;
    margin-right: 2rem;
}
.range-titlerow p{
    font-size: 16px;
    color: #6b6b6b;
    margin-left: 1rem;
    margin-bottom: 0.5rem;
}
.range-titletext {
    align-self: flex-end;
}
/*range icons*/
.range-iconrow {
    padding: 0 15vw;
    justify-content: center;
}
.range-iconcol {
    padding: 15px;
}
.range-iconbox {
    background: #ebebeb;
    border-radius: 20px;
    height: 100%;
    padding: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.range-iconbox img {
    width: 100%;
}

/*default*/
.range-iconbox h3 {
    position: absolute;
    bottom: 0;
    margin-bottom: 8px;
    background: linear-gradient(45deg, #c22626,#f8901f, #f8901f,#c22626);
    background-size: 300% 100%;
    padding: 5px;
    width: 75%;
    display: flex;
    justify-content: center;
    transition: all .4s ease-in-out;
}
.range-iconbox:hover h3 {
    background-position: 100% 0;
}
.range-iconbox a {
    font-size: 15px;
    font-weight: 400;
    color: #fff;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}
@media all and (max-width:1200px){
    .range-iconrow {
    padding: 0 8vw;
    }
}
@media all and (min-width:991.52px){
    .range-iconcol {
    flex: 0 0 25%;
    max-width: 25%;
    padding: 0.5vw;
    }
}
@media all and (max-width:991.52px){
    .range-titlerow .titleribbon{
    margin-bottom: 2rem;
    }
    .range-titlerow p {
    text-align: center;
    margin-left: 0;
    padding: 0 4rem;
    }
    .range-iconbox h3 {
    font-size: 14px;
    }
}
@media all and (max-width:767.52px){
    .range-container {
    padding: 4rem 15px;
    }
    .range-titlerow {
    margin-bottom: 1rem;
    }
    .range-iconrow {
    padding: 0 4rem;
    }
    .range-iconcol {
    padding: 10px;
    }
    .range-iconbox h3 {
    margin-bottom: 10px;
    }
}
@media all and (max-width:575.52px){
    .range-container {
    padding: 3rem 15px;
    }
    .range-titlerow p {
    padding: 0 1rem;
    }
    .range-iconrow {
    padding: 0 3rem;
    }
}
/*about us*/
.about-container {
    background: url('https://cdn1.npcdn.net/userfiles/23869/image/Amendment7-27/contbg.jpg');
    background-size: cover;
    padding: 4rem 11vw;
    margin-bottom: 4rem;
}
.about-box h2 {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    padding: 5px 2rem;
    margin-bottom: 10px;
    border-left: 2px solid #fff;
}
.about-box p {
    font-size: 16px;
    font-weight: 300;
    color: #fff;
    margin-bottom: 1.5rem;
    line-height: 1.8;
}
.button-box {
    text-align: right;
}
@media all and (max-width:1200px){
    .about-container {
    padding: 4rem 8vw;
    }
}
@media all and (max-width:767.52px){
    .about-container {
    padding: 4rem;
    }
}
@media all and (max-width:575.52px){
    .about-container {
    padding: 3rem 2rem;
    }
    .about-box p {
    text-align: center;
    }
    .button-box {
    text-align: center;
    }
}
/*latest product slider*/
.title-sp-box {
    background: linear-gradient(45deg, #c22626 , #f8901f);
    display: flex;
    align-items: center;
    height: 46px;
    width: fit-content;
    white-space: nowrap;
    padding: 0 1rem;
    border-radius: 8px;
    margin: 0 auto -25px;
}
.title-sp-box img {
    width: 4vw;
    margin-top: -1rem;
    align-self: flex-end;
}
.title-sp-box:hover img {
    animation: swing 1s;
}
.title-sp-box h2 {
    color: #fff;
    font-size: 1.5vw;
    margin-bottom: 0;
    margin-left: 1rem;
}
/*slider*/
.latestP-container,
.bestP-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#index_6,
#index_7 {
    margin-bottom: 4rem;
}
#index_6 .productSlider-1,
#index_7 .productSlider-1 {
    padding: 0 3rem;
}
/*slick buttons*/
#main_index .productSlider-1 .slick-prev {
    left: -20px;
}
#main_index .productSlider-1 .slick-next {
    right: -25px;
}
#main_index .productSlider-1 .product_img .slick-prev::before,
#main_index .productSlider-1 .product_img .slick-next::before {
    padding: 2px 7px 3px 8px;
    border-radius: 50%;
    text-shadow: none;
    background: #000;
}
@media all and (max-width:992px){
    .title-sp-box img {
    width: 60px;
    }
    .title-sp-box h2 {
    font-size: 22px;
    }
    #index_6_2,
    #index_6_3,
    #index_7_2,
    #index_7_3{
    flex: 0 0 100%;
    max-width: 100%;
    }
}
@media all and (max-width:899.52px){
    #index_6 .productSlider-1,
    #index_7 .productSlider-1 {
    padding: 0;
    }
}
@media all and (max-width:599.52px){
    #index_6 .productSlider-1 {
    padding: 0 2rem;
    }
    #index_7 .productSlider-1{
        padding:0;
    }
}

/*Hot Deals*/
.hotdeals-container {
    background: #ebebeb;
    padding-top: 46px;
    padding-bottom: 4rem;
}
.hotdeals-container .title-sp {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
}
.hotdeals-container .title-sp-box {
    margin: auto;
}
.deals-row {
    padding: 0 10vw;
}
#main_index .productSlider-1 .add_to_cart {
    display: none;
}
@media all and (max-width:1200px){
    .deals-row {
    padding: 0 5vw;
    }
}
@media all and (max-width:992px){
    .deals-row {
    padding: 0 2rem;
    }
}
@media all and (max-width:899.52px){
    .deals-row .productSlider-1 .slick-prev,
    .deals-row .productSlider-1 .slick-next {
    display: none;
    }
}
@media all and (max-width:599.52px){
    .deals-row .productSlider-1 .slick-prev,
    .deals-row .productSlider-1 .slick-next {
    display: block;
    }
}

/*view products*/
.view-content {
    background: linear-gradient(45deg, #c22626 , #f8901f);
}
.view-titlebox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4vw 2vw 4vw 11vw;
    width: 50%;
}
.view-titlebox h2 {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 1rem;
}
.view-titlebox p {
    font-size: 16px;
    font-weight: 300;
    color: #fff;
    margin-bottom: 1.5rem;
    line-height: 1.8;
}
.view-imgbox {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 50%;
}
.view-imgbox img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@media all and (max-width:1200px){
    .view-titlebox {
    padding: 4vw 0 4vw 8vw;
    }
}
@media all and (max-width:767.52px){
    .view-content {
    padding: 4rem 0;
    }
    .view-titlebox {
    width: 100%;
    text-align:center;
    padding: 0 4rem 2rem;
    }
    .view-imgbox {
    position: static;
    width: 90%;
    margin-left: auto;
    transform: none;
    }
}
/*.brands*/
.brands-container {
    padding: 4rem 15px;
}
.brands-titlerow {
    margin-bottom: 4rem;
}
.brands-iconrow {
    padding: 0 11vw;
}
.brands-col img {
    width: 100%;
    height: 100px;
    object-fit: contain;
    transition: all 0.2s ease-in-out;
}
.brands-col img:hover {
    transform: scale(1.1);
}
@media all and (max-width:1200px){
    .brands-iconrow {
    padding: 0 8vw;
    }
}
@media all and (max-width:767.52px){
    .brands-titlerow {
    margin-bottom: 1rem;
    }
    .brands-iconrow {
    padding: 0 4rem;
    }
}
@media all and (max-width:575.52px){
    .brands-container {
    padding: 3rem 15px;
    }
    .brands-iconrow {
    padding: 0 3rem;
    }
}
/*footer*/
.footer_type10 .float-right.w-100.text {
    font-size: 15px;
    line-height: 1.8;
}
.footer_type10 .pr-md-5 {
    padding-right: 1rem!important;
    display: flex;
    flex-direction: column;
}

.toggle_btn .btn {
    background: #f8901f;
    padding:25px;
}
.toggle_btn .btn i {
    font-size: 18px!important;
}

#v-pills-branch0 h5 strong{
    display: none;
}

#v-pills-branch0 h5::after{
    content: 'CHENG HUAT HARDWARE \a (JALAN IPOH) SDN BHD';
    font-weight: 700;
    white-space: pre;
}
#v-pills-branch1 h5 strong{
    display: none;
}

#v-pills-branch1 h5::after{
    content: 'CHENG HUAT HARDWARE \a (GOMBAK) SDN BHD';
    font-weight: 700;
    white-space: pre;
}
#v-pills-branch2 h5 strong{
    display: none;
}

#v-pills-branch2 h5::after{
    content: 'CHENG HUAT HARDWARE \a (BATU CAVES) SDN BHD';
    font-weight: 700;
    white-space: pre;
}

#v-pills-branch3 h5 strong{
    display: none;
}

#v-pills-branch3 h5::after{
    content: 'CHENG HUAT HARDWARE \a (BATANG KALI) SDN BHD';
    font-weight: 700;
    white-space: pre;
}
#main_contactus h1 b{
    display: none;
}
#main_contactus h1::after{
    content: 'Location/Area';
    font-weight: 700;
    font-size: 1.75rem;
    position: relative;
    color: #333;
}
html:lang(ms) #main_contactus h1::after{
    content:"Lokasi/Kawasan";
}
html:lang(zh-Hans) #main_contactus h1::after{
    content:"位置/区域";
}