:root{
    --primary-color: #14EBF6;
    --black: #121212;
    --white: #f5f5f5;
    --whiteE: #eeeeee;
    --dark-grey: #7d7d7d;
    --yellow: #E3C403;
    --dark-blue: #191B6F;
    --orange: #fb631a;
    --light-blue:#2C9DA3;
    --red:#9A0C0C;
    --light-yellow: #FFF5A9;
    --green: #1f731d;
}
*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html,body{ 
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    overflow: auto;
}
html{
    background: var(--white);
    height: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
body{
    line-height: 1.4;
    font-size: 16px;
    font-family: 'Roboto', "Helvetica", Helvetica-FF, Arial, Tahoma, sans-serif;
    height: 100%;
    color: var(--black);
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
}
.main-content{
    margin-right: 5%;
    margin-left: 5%;
}
.ws-40{
    width: 40% !important;
}
.ws-60{
    width: 60% !important;
}
.ws-30{
    width: 30% !important;
}
.ws-70{
    width: 70% !important;
}
.text-logo{
    /* font-family: 'Bauhaus 93', sans-serif; */
    font-family: 'Roboto';
}
.bg-blue{
    background-color: var(--primary-color);
}
.container, .container-fluid{
    padding-right: 2rem;
    padding-left: 2rem;
}
.nav-link{
    color: var(--black) !important;
    font-weight: 600;
}
.nav-link:hover{
    opacity: .5;
}
.nav-link.active{
    border-bottom: 1px solid var(--black);
}
.header-title{
    height: 400px;
    position: relative;
}
.header-title img{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    height: inherit;
    object-fit: cover;
    z-index: 0;
}
.header-title .overlay{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    height: inherit;
    background-color: var(--black);
    opacity: .8;
    z-index: 0;
}
.overlay-white .overlay{
    background-color: var(--white);
}
.header-title .title-text{
    z-index: 1;
    position: relative;
    text-align: center;
    color: var(--white);
    padding: 0 135px;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
}
.title-text h1{
    font-size: 3.5rem;
    font-weight: bold;
}
.home .title-text h1{
    font-size: 5.5rem;
}
.home ul{
    text-align: left;
    font-size: 1.5rem;
    list-style: none;
}
.home li:not(:last-child) { 
    margin-bottom: 15px;  
 }
.title-text h5{
    margin-top: 20px;
    font-size: 13px;
}
.banner-text{
    position: relative;
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    gap: 15px;
}
.overlay-white .banner-text{
    color: var(--black);
}
.banner-text h1{
    font-size: 3.5rem;
    font-weight: bold;
    margin-bottom: 0px;
}
.banner-text h5{
    font-size: 20px;
}
.banner-image{
    position: relative;
    padding: 30px;
}
.banner-image img{
    position: relative;
    z-index: 1;    
    height: 100%;
    object-fit: contain;
}
.product-category-list {
    background-color: var(--whiteE);
    overflow: auto;
    text-align: center;
}
.menu-product-category {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    height: 225px;
    width: 160px;
    padding: 30px 20px;
    color: var(--black);
}
.menu-product-category.active{
    background-color: var(--primary-color);
}
.menu-product-category img{
    height: 105px;
    margin-bottom: 10px;
    width: fit-content;
    width: 120px;
    object-fit: contain;
}
.menu-product-category h6{
    line-height: 1.2;
    color: inherit;
}
.menu-product-category:hover {
    opacity: .5;
}
.menu-product-category.default-hov:hover {
    opacity: 1;
    background-color: var(--primary-color);
    color: var(--black);
}
.menu-product-category.pump:hover{
    opacity: 1;
    background-color: #9a0c0b;
    color: var(--white);
}
.menu-product-category.electropating:hover{
    opacity: 1;
    background-color: #1f731d;
    color: var(--white);
}
.menu-product-category.rectifier:hover{
    opacity: 1;
    background-color: #fb631a;
    color: var(--white);
}
.menu-product-category.online-measurement:hover{
    opacity: 1;
    background-color: #191b6e;
    color: var(--white);
}
.menu-product-category.laboratory-measurement:hover{
    opacity: 1;
    background-color: #f1e618;
    color: var(--black);
}
.menu-product-category.red-hov:hover{
    opacity: 1;
    background-color: #9a0c0b;
    color: var(--white);
}
.menu-product-category.green-hov:hover{
    opacity: 1;
    background-color: #1f731d;
    color: var(--white);
}
.menu-product-category.orange-hov:hover{
    opacity: 1;
    background-color: #fb631a;
    color: var(--white);
}
.menu-product-category.dark-blue-hov:hover{
    opacity: 1;
    background-color: #191b6e;
    color: var(--white);
}
.menu-product-category.yellow-hov:hover{
    opacity: 1;
    background-color: #f1e618;
    color: var(--black);
}
.yellow-light-hov:hover
{
    cursor: pointer;
    opacity: 1;
    background-color: var(--light-yellow) !important;
}
.content-title{
    font-size: 20px;
}
.product-brand img{
    width: 350px;
    object-fit: contain;
}
.yellow .product-title h2{
    color: var(--yellow);
}
.green .product-title h2{
    color: var(--green);
}
.green .custom-tab .nav-link{
    color: var(--green) !important;
}
.green .custom-tab .nav-link:hover{
    opacity: 1;
    color: var(--white) !important;
    background-color: var(--green) !important;
}
.green .custom-tab .nav-link.active{
    background-color: var(--green);
    color: var(--white) !important;
}
.green .product{
    border-bottom: 2px solid var(--green);
}
.product-image{
    padding: 20px;
}
.product-image h1{
    font-size: 20px;
}
.product-image img{
    width: 80%;
}
.product-image-left img{
    filter: drop-shadow(20px 20px 0px #8EEFF4);
}
.nav.custom-tab{
    text-align: -webkit-center;
}
.custom-tab .nav-link{
    width: 100%;
    height: 100px;
    border-bottom: none;
}
.nav-child-link
{
    height: 50px !important;
}
.nav-custom-pills{
    margin-top:-16px !important;
}
.tab-content img{
    max-width: -webkit-fill-available;
}
.yellow .custom-tab .nav-link{
    color: var(--yellow) !important;
}
.yellow .custom-tab .nav-link:hover{
    opacity: 1;
    color: var(--white) !important;
    background-color: var(--yellow) !important;
}
.yellow .custom-tab .nav-link.active{
    background-color: var(--yellow);
    color: var(--white) !important;
}
.custom-tab .tab-content p{
    margin-bottom: 0.5rem;
}
.yellow .product{
    border-bottom: 2px solid var(--yellow);
}
.green .product{
    border-bottom: 2px solid var(--green);
}
.footer{
    height: 270px;
    position: relative;
    overflow: hidden;
}
.footer-image-bg{
    position: absolute;
    top: 0;
    right: -85px;
    width: 375px;
}
.footer-overlay{
    position: absolute;
    background-color: var(--black);
    bottom: 0;
    height: inherit;
    width: 100%;
    opacity: .8;
}
.main-footer{
    z-index: 1;
    position: relative;
}
.footer-logo{
    width: 150px;
}
.footer-pt{
    font-weight: bold;
    margin-top: 10px;
}
.footer-address1{
    margin-top: 10px;
    font-size: 14px;
}
.footer-address2, .footer-address3{
    font-size: 14px;
}
.footer-contact{
    text-align:center;
    font-size: 20px;
}
.contact-list{
    width: 100%;
    color: black;
    margin-right:30px;
    display: flex !important;
}
.contact-icon{
    width: 45px;
    height: 45px;
    border-radius: 50%;
    padding-top: 6px;
    padding-left: 6px;
    margin:auto;
}
.contact-icon i, .contact-icon svg{
    font-size: 33px;
    color: white;
}
.contact-wa{
    padding-top: 3px;
}
.contact-wa i, .contact-wa svg{
    font-size: 33px;
}
.contact-text{
    display: block;
    width: 100%;
    text-align:center;
    font-size: 13px;
    font-weight: 600;
    padding:8px;
    background: white;
    border-radius: 30px;
    text-decoration:none;
    color:black;
}

.without-detail .product-image img {
    width: 300px;
}
.without-detail .product-title h1, .without-detail .product-title h2{
    font-size: 23px;
}
.without-detail{
    border-bottom: none !important;
}
.orange .product-title h2{
    color: var(--orange);
}
.orange .custom-tab .nav-link{
    color: var(--orange) !important;
}
.orange .custom-tab .nav-link:hover{
    opacity: 1;
    color: var(--white) !important;
    background-color: var(--orange) !important;
}
.orange .custom-tab .nav-link.active{
    background-color: var(--orange);
    color: var(--white) !important;
}
.orange .product{
    border-bottom: 2px solid var(--orange);
}

.dark-blue .product-title h2{
    color: var(--dark-blue);
}
.dark-blue .custom-tab .nav-link{
    color: var(--dark-blue) !important;
}
.dark-blue .custom-tab .nav-link:hover{
    opacity: 1;
    color: var(--white) !important;
    background-color: var(--dark-blue) !important;
}
.dark-blue .custom-tab .nav-link.active{
    background-color: var(--dark-blue);
    color: var(--white) !important;
}
.dark-blue .product{
    border-bottom: 2px solid var(--dark-blue);
}
.without-detail2 .product-image img {
    width: 380px;
}
.light-blue .product-title h2{
    color: var(--light-blue);
}
.light-blue .custom-tab .nav-link{
    color: var(--light-blue) !important;
}
.light-blue .custom-tab .nav-link:hover{
    opacity: 1;
    color: var(--white) !important;
    background-color: var(--light-blue) !important;
}
.light-blue .custom-tab .nav-link.active{
    background-color: var(--light-blue);
    color: var(--white) !important;
}
.light-blue .product{
    border-bottom: 2px solid var(--light-blue);
}
/*.without-detail3 .product-detail{
    margin-bottom: 50px;
}
.without-detail3 .product-image{
    margin-bottom: 50px;
}*/
.without-detail3 .product-title h1 {
    font-size: 20px;
}
.read-more{
    text-decoration: none;
    /* position: absolute; */
    float: right;
    right: 0;
    font-size: 30px;
    color: var(--light-blue);
    font-weight: bold;
}
.left-arrow {left: 0 !important;}
.left-arrow-red {
    left: 0 !important;
    color: var(--red) !important;
}
.left-arrow-red:hover {
    color: var(--red) !important;
}
.left-arrow-green {
    left: 0 !important;
    color: var(--green) !important;
}
.left-arrow-green:hover {
    color: var(--green) !important;
}
.read-more:hover{
    color: var(--light-blue);
    opacity: .5;
}
.product-detail{
    position: relative;
    
}
.product-detail p{
    line-height: 30px;
}
.light-blue .product{
    border-bottom: none;
}
.bg-grey{
    background-color: var(--whiteE);
}
.light-blue .bg-grey .product-image img{
    box-shadow: 10px 10px 0px var(--primary-color); 
}
.slider {
    width: 100%;
}
.slick-slide {
  margin: 0px 20px;
}
.slick-slide img {
  width: 100%;
}
.slick-prev:before,
.slick-next:before {
  color: var(--black);
}
.slick-slide {
  transition: all ease-in-out .3s;
}
.slider-banner-autoplay-1{
    cursor: grab;
}

.slider-banner-autoplay-1 .slick-dots{
    bottom: 0px;
}
.slider-banner-autoplay-1 .slick-dots li button:before{
    font-size: 10px;
}
.product-category-list .slick-track{
    margin: auto;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    display: -webkit-box;
}
.nav-pills{
    flex-wrap: unset;
}
.red .product-title h2{
    color: var(--red);
}
.red .custom-tab .nav-link{
    color: var(--red) !important;
}
.red .custom-tab .nav-link:hover{
    opacity: 1;
    color: var(--white) !important;
    background-color: var(--red) !important;
}
.red .custom-tab .nav-link.active{
    background-color: var(--red);
    color: var(--white) !important;
}

.src .custom-tab .nav-link:hover{
    opacity: 1;
    color: var(--black) !important;
    background-color: #f5f9ff !important;
}
.src .custom-tab .nav-link.active{
    background-color: #f5f9ff !important;
    color: var(--black) !important;
}
.red .product{
    border-bottom: 2px solid var(--red);
}
.slick-prev{
    left: 25px;
    z-index: 1;
}
.slick-next{
    right: 25px;
    z-index: 1;
}
.slider-banner .slick-slide{
    margin: 0px;
    height: 400px;
}
.slider-banner .slick-prev:before, .slick-next:before{
    color: var(--dark-grey);
}
.slider-banner .header-title{
    padding: 0 30px;
}
.slider-banner .img-left .banner-text{
 text-align: right;
}
.w-15{
    width: 15% !important;
}
.slider-banner .img-left-right .d-flex{
    justify-content: center;
}
.slider-banner .img-left-right .banner-image{
    position: relative;
    width: 100px;
    padding: 0px;
}
.slider-banner .img-left-right .banner-image img{
    position: absolute;
    bottom: 30px;
    top: unset;
    left: unset;
    right: unset;
    height: inherit;
    max-height: 220px;
}
.w-70{
    width: 70% !important;
}
.ltop-25{
    margin-top:25px !important;
}
.responsive-hp-image{
    display:block;
    margin:auto;
    border-radius:2rem !important;
    width: 100%;
    max-width: 330px;
}
/* .industri img{
    cursor: pointer;
} */
/* .industri img:hover{
    -webkit-filter: brightness(50%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
} */
.show-image-fullpage {
    -webkit-transition: opacity 600ms, visibility 600ms;
    transition: opacity 600ms, visibility 600ms;
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}
.show-image-fullpage img{
    max-width: 70%;
    height: auto;
    max-height: 95vh;
}
.show-image-fullpage .close-show-image {
    color: white;
    cursor: pointer;
    font-size: 35px;
    padding: 20px;
    position: fixed;
    right: 30px;
    top: 5px;
}
.show-image-fullpage .close-show-image:hover{
    opacity: 0.5;
}
.service-content{
    width: 1199px;
}
.service-content ul{
    font-size: 20px;
}
.article-content {
    height: 392px;
    padding: 25px;
}
.article-content img {
    width: 490px;
    height: 333px;
    object-fit: cover;
    border-radius: 10px;
}
.article-content .read-more{
    font-size: 16px;
    position: relative;
}
.article-content p {
    display: inline;
}
.bg-cream{
    background-color: #fbfdfb;
}
.article-text p, .article-text .read-more {
    font-size: 23px;
}
.content-detail {
    position: relative;
    overflow: hidden;
}
.content-detail .thumbnail {
    float: left;
    width: 490px;
    height: 333px;
    object-fit: cover;
    border-radius: 10px;
    margin-right: 20px;
    margin-bottom: 20px;
}
.content-detail-article {
    font-family: 'Roboto', sans-serif !important;
}
.w-60{
    width: 60% !important;
}
.w-40{
    width: 40% !important;
}
.w-33{
    width: 33.33% !important;
}
.w-20 {
    width: 20%!important;
}
.product-category-list .slider-menu div{
    position: relative;
}
@media only screen and (min-width: 1024px) {
    .product-category-list .slick-slide{
        width: 170px !important;
        margin: 0px;
    }
    .img-content-product{
        max-width:300px !important;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1300px) {
    .title-text h1 {
        font-size: 3rem;
    }
    .header-title .title-text{
        padding: 0 200px;
    }
    .home .title-text h1{
        font-size: 3.5rem;
    }
    .home .title-text h4{
        font-size: 1.2rem;
    }
    .home .title-text ul{
        font-size: 1.2rem;
    }
    .maps iframe{
        width: 430px;
        height: 350px;
    }
    .article-text p, .article-text .read-more {
        font-size: 20px !important;
    }
}
@media only screen and (min-width: 425px) and (max-width: 768px) {
    .header-title, .slider-banner .slick-slide {
        height: 310px;
    }
    .title-text h1 {
        font-size: 2.5rem;
    }
    .header-title .title-text{
        padding: 0 100px;
    }
    .product-brand img{
        width: 270px;
    }
    .banner-text h1{
        font-size: 2.5rem;
    }
    .banner-text h5{
        font-size: 13px;
    }
    .banner-text{
        gap: 10px;
    }
    .product-category-list .slick-track{
        margin: unset;
        -webkit-box-align: unset;
        -webkit-box-pack: unset;
        display: relative;
    }
    .maps iframe{
        width: 330px;
        height: 250px;
    }
    .service-content ul {
        font-size: 16px;
    }
    .slider-banner-autoplay-1,.slider-banner-autoplay-1 img{
        height: 50vh !important;
        object-fit: fill !important;
    }
    .article-content p, .article-text .read-more {
        font-size: 12px;
        display: block;
        line-height: 20px;
    }
    .company-container{
        width:100% !important;
    }
    .contact-container{width: 100% !important;}
    .contact-container-detail{display:block !important;}
}
@media only screen and (min-width: 0px) and (max-width: 435px) {
    .header-title, .slider-banner .slick-slide {
        height: 290px;
    }
    .title-text h1 {
        font-size: 1.75rem;
    }
    .title-text h5{
        font-size: 0.5rem;
    }
    .header-title .title-text{
        padding: 0;
    }
    .product-brand img{
        width: 125px;
    }
    .product .product-content{
        flex-direction: column;
    }
    .product-content .flex-column.w-50, .product-content .product-detail.w-50{
        width: 100%!important;
    }
    .product-image img {
        width: 245px !important;
        align-self: center;
    }
    .footer{
        height: 720px;
    }
    .footer-content{
        flex-direction: column;
    }
    .footer-content .w-50.d-flex{
        width: 100% !important;
        align-items: center;
        text-align: center;
    }
    .footer-contact{
        margin-top: 30px;
    }
    .footer-image-bg {
        width: 755px;
    }
    .contact-icon{
        padding-left: 0px;
    }
    .nav-pills{
        flex-wrap: wrap;
    }
    .banner-text.w-75{
        /* width: 50% !important; */
        padding: 10px;
    }
    .banner-text{
        gap: 8px;
    }
    .banner-text h1{
        font-size: 1.5rem;
    }
    .banner-text h5{
        /* display: none; */
        font-size: 13px;
    }
    .slider-banner .slick-next{
        right: 10px;
    }
    .slider-banner .slick-prev{
        left: 10px;
    }
    .banner-image{
        padding: 7px;
        width: 190px;
    }
    .top-25{
        margin-top:25px !important;
    }
    .home .title-text h1 {
        font-size: 2.5rem;
    }
    .home .title-text h4{
        font-size: 1rem;
    }
    .home .title-text ul{
        font-size: 1rem;
    }
    .slider-banner-autoplay-1, .slider-banner-autoplay-1 img{
        height: 30vh !important;
        object-fit: fill !important;
    }
    .maps iframe{
        width: 280px;
        height: 250px;
    }
    .service-content ul {
        font-size: 16px;
    }
    .section-coment div{
        font-size: 12px !important;
    }
    .home li:not(:last-child) {
        margin-bottom: 5px;
    }
    .article-content p, .article-text .read-more {
        font-size: 14px;
    }
    .article-content img {
        width: 100%;
        height: auto;
    }
    .content-detail .thumbnail {
        width: 100%; 
        height: auto;
    }
    .article-content.d-flex {
        flex-direction: column;
    }
    .article-content {
        height: auto;
    }
    .ws-30 {width: 100% !important;}
    .ws-70 {width: 100% !important;}
    .w-25 {width: 50% !important;}
    .company-container{
        width:100% !important;
    }
    .contact-container{width: 100% !important;}
    .contact-list{
        width: 100% !important;
        min-width: 300px !important;
        margin-right:0px !important;
    }
    .contact-container-detail{display:block !important;}
}

.src-product{
    border:0;
    outline:0;
    text-align: center;
    border-bottom: 1px solid #fff;
    background-color:transparent;
    max-width: 300px;
    margin:10px auto 0 auto;
}
.src-product:focus{
    outline: none !important;
    background-color:transparent;
    color:white;
}
.slider .slick-arrow {
    position: absolute;
    top: 50%;
    margin: -20px 0px 0px 0px;
    z-index: 10;
    font-size: 0;
    width: 30px;
    height: 30px;
}
.slick-prev:before {
    content: '';
}
.slick-next:before {
    content: '';
}
.slider .slick-arrow.slick-prev {
    left: 0;
    background: url("https://img.icons8.com/ios/50/000000/long-arrow-left.png") 0
    0 / 100% no-repeat;
}
.slider .slick-arrow.slick-next {
    right: 0;
    background: url("https://img.icons8.com/ios/50/000000/long-arrow-right.png") 0 0 / 100% no-repeat;
}
.slider .slick-arrow.slick-disabled {
    opacity: 0.2;
}
.slick-dots li button:before {
    opacity: 0.5;
    color: white;
}
.slick-dots li.slick-active button:before {
    opacity: 1;
    color: white;
}
.contact-text-wa:hover{
    background:#e80a21;
    color:white;
}
.contact-text-mail:hover{
    background:#0cc0df;
    color:white;
}
.contact-text-phone:hover{
    background:#f9d600;
    color:white;
}