/*Produk*/ 
.row{
    margin: 0px;
}
.bg_header_produk { 
    background: url('../img/img_background/h_produk.png'); 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 877px;
    /*
    padding-left: 8%;
    padding-right: 8%;*/
}  

.box_all_in_action{
    margin-top: 8%;
}


.boxBimsys{
    width: 100%; 
    background: url('../img/produk/bg_bimsys.png');  
    background-repeat: no-repeat;
    min-height: 783px;
    padding-left: 7%;
    padding-right: 7%;
    padding-top: 16%;
}

.boxBimsys h3{
    font-family: Nunito Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 44px;
    /* identical to box height */
    letter-spacing: 0.355556px;
    color: #3D4B51;
} 

.boxBimsys h4{ 
    font-family: Nunito Sans;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    /* identical to box height, or 175% */
    
    letter-spacing: 0.177778px;
    
    color: #3D4B51;
    margin-top: 4%;
    
} 

.boxBimsys p{
    font-family: Nunito Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 28px;
    /* or 175% */
    letter-spacing: 0.177778px;
    color: #3D4B51;
    opacity: 0.9;
    margin-top: 4%;
}

.boxBimsys .text{
    margin-right: 3.5%;
}

.boxBimsys .text img{
    margin-top: 10px;
    float: left;
}
.boxBimsys .text h3{
    margin-top: 5px; 
    margin-left: 50px; 
} 

.boxBimsys .img_bimsys {
    padding-right: 3.5%;
}

.boxBimsys .img_bimsys img{
    text-align: left;
    width: 590px;
    height: 379px;
}
  

.boxSmartVisitor{
    width: 100%; 
    min-height: 783px;
    padding-left: 5%;
    padding-right: 8%;
    padding-top: 16%; 
}

.boxSmartVisitor h3{
    font-family: Nunito Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 44px;
    /* identical to box height */
    letter-spacing: 0.355556px;
    color: #3D4B51;
} 
 

.boxSmartVisitor .text img{
    margin-top: 10px;
    float: left;
}
.boxSmartVisitor .text h3{
    margin-top: 5px; 
    margin-left: 50px; 
} 


.boxSmartVisitor h4{ 
    font-family: Nunito Sans;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    /* identical to box height, or 175% */
    letter-spacing: 0.177778px;
    color: #3D4B51;
    margin-top: 4%;
    
} 

.boxSmartVisitor p{
    font-family: Nunito Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 28px;
    /* or 175% */
    letter-spacing: 0.177778px;
    color: #3D4B51;
    opacity: 0.9;
    margin-top: 4%;
}

.boxSmartVisitor .text{
    margin-left: 3.5%;
    width: 46%;
}

.boxSmartVisitor .img_SmartVisitor { 
}

.boxSmartVisitor .img_SmartVisitor img{
    text-align: left;
    width: 560px; 
}


.boxLightsys{
    width: 100%; 
    background: url('../img/produk/Combined Shape Copy 3.png') bottom left;  
    background-repeat: no-repeat;
    min-height: 585px;
    padding-left: 4%;
    padding-right: 4%; 
    padding-bottom: 8%;
    margin-top: 10%;
}

.boxLightsys h3{
    font-family: Nunito Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 44px;
    /* identical to box height */
    letter-spacing: 0.355556px;
    color: #3D4B51; 
    padding-top:0px;
} 

.boxLightsys .text img{
    margin-top: 10px;
    float: left;
}
.boxLightsys .text h3{
    margin-top: 5px; 
    margin-left: 50px; 
} 

.boxLightsys h4{ 
    font-family: Nunito Sans;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    /* identical to box height, or 175% */
    letter-spacing: 0.177778px;
    color: #3D4B51;
    margin-top: 4%;
    
}  

.boxLightsys .text{
    padding-top: 7%;
    margin-right: 8%;
    margin-left: 3.5%;
    width: 40%;
}

.boxLightsys p{
    font-family: Nunito Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 28px;
    /* or 175% */
    letter-spacing: 0.177778px;
    color: #3D4B51;
    opacity: 0.9;
    margin-top: 4%;
}

.boxLightsys ul{ 
    font-family: Nunito Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 28px;
    /* or 175% */
    letter-spacing: 0.177778px;
    color: #3D4B51;
    opacity: 0.9;
    margin-top: 4%;
    
}
.boxLightsys ul li{
    list-style: none;
}
.boxLightsys ul li::before {
  content: "• ";
  color: #329CEB; /* or whatever color you prefer */
  margin-right: 10px;
}


.boxLightsys .img_Lightsys { 
    
}

.boxLightsys .img_Lightsys img{
    text-align: right;
    width: 590px; 
}

 

.boxPatternio{
    width: 100%; 
    min-height: 783px;
    padding-left: 4%;
    padding-right: 8%;
    padding-top: 16%;
    margin-bottom: 12%;
}

.boxPatternio h3{
    font-family: Nunito Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 44px;
    /* identical to box height */
    letter-spacing: 0.355556px;
    color: #3D4B51; 
} 

.boxPatternio h4{ 
    font-family: Nunito Sans;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    /* identical to box height, or 175% */
    letter-spacing: 0.177778px;
    color: #3D4B51;
    margin-top: 4%;
    
} 

.boxPatternio p{
    font-family: Nunito Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 28px;
    /* or 175% */
    letter-spacing: 0.177778px;
    color: #3D4B51;
    opacity: 0.9;
    margin-top: 4%;
}


.boxPatternio ul{ 
    font-family: Nunito Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 28px;
    /* or 175% */
    letter-spacing: 0.177778px;
    color: #3D4B51;
    opacity: 0.9;
    margin-top: 4%;
}
  
.boxPatternio ul li{
    list-style: none;
}
.boxPatternio ul li::before {
  content: "• ";
  color: #329CEB; /* or whatever color you prefer */
  margin-right: 10px;
}



.boxPatternio .text{
    margin-top: 3%;
    margin-left: 3.5%;
    width: 46%;
}


.boxPatternio .text img{
    margin-top: 10px;
    float: left;
}
.boxPatternio .text h3{
    margin-top: 5px; 
    margin-left: 50px; 
} 


.boxPatternio .img_Patternio { 
}

.boxPatternio .img_Patternio img{
    text-align: left;
    width: 560px; 
}




.boxVoicedeaf{
    width: 100%; 
    min-height: 585px;
    padding-left: 4%;
    padding-right: 4%; 
    padding-bottom: 8%;
}

.boxVoicedeaf h3{
    font-family: Nunito Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 44px;
    /* identical to box height */
    letter-spacing: 0.355556px;
    color: #3D4B51;
} 

.boxVoicedeaf h4{ 
    font-family: Nunito Sans;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    /* identical to box height, or 175% */
    letter-spacing: 0.177778px;
    color: #3D4B51;
    margin-top: 4%;
    
} 

.boxVoicedeaf p{
    font-family: Nunito Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 28px;
    /* or 175% */
    letter-spacing: 0.177778px;
    color: #3D4B51;
    opacity: 0.9;
    margin-top: 4%;
}

.boxVoicedeaf ul{ 
    font-family: Nunito Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 28px;
    /* or 175% */
    letter-spacing: 0.177778px;
    color: #3D4B51;
    opacity: 0.9;
    margin-top: 4%;
}

.boxVoicedeaf ul li{
    list-style: none;
}
.boxVoicedeaf ul li::before {
  content: "• ";
  color: #329CEB; /* or whatever color you prefer */
  margin-right: 10px;
}

.boxVoicedeaf .text{
    padding-top: 0px;
    margin-left: 3.5%;
    width: 46%;
}


.boxVoicedeaf .text img{
    margin-top: 10px;
    float: left;
}
.boxVoicedeaf .text h3{
    margin-top: 5px; 
    margin-left: 50px; 
} 

.boxVoicedeaf .img_Voicedeaf { 
}

.boxVoicedeaf .img_Voicedeaf img{
    text-align: left;
    width: 560px; 
}




.konten2{
    float: left;
    padding-top: 16%;
    padding-left: 2%;
    padding-right: 6%;
    width: 45%;
    min-height: 550px;
}

.konten2 h1 {  
    font-family: Nunito Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 56px;
    line-height: 72px;
    width: 50% ;
    /* or 129% */  
    color: #3D4B51;
} 

.konten2 p { 
    font-family: Nunito Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 28px;
    /* or 175% */ 
    letter-spacing: 0.177778px; 
    color: #3D4B51;
    margin-top: 4%;

} 
 
.inovasi_kolaborasi h1 { 
    color: #3D4B51; 
    font-size: 32px;   	
    font-weight: 600;
    letter-spacing: 0.36px; 
    line-height: 43px;  
    text-align: center;
    margin-right: auto;
    margin-left: auto;   
} 

.inovasi_kolaborasi p { 
    margin-top: 30px;
    min-height: 84px;
    width: 60%;
    margin-right: auto;
    margin-left: auto;   
    color: #3D4B51;	
    font-family: "Nunito Sans";	
    font-size: 16px;	
    letter-spacing: 0.18px;	
    line-height: 28px;	
    text-align: center;
}
  


.inovasi_kolaborasi{ 
    min-height: 260px;
}


.inovasi_kolaborasi h1 { 
    color: #3D4B51; 
    font-size: 32px;   	
    font-weight: 600;
    letter-spacing: 0.36px; 
    line-height: 43px;  
    text-align: center;
    margin-right: auto;
    margin-left: auto;   
    margin-bottom: 60px;
} 

.inovasi_kolaborasi p { 
    margin-top: 30px;
    min-height: 84px;
    width: 60%;
    margin-right: auto;
    margin-left: auto;   
    color: #3D4B51;	
    font-family: "Nunito Sans";	
    font-size: 16px;	
    letter-spacing: 0.18px;	
    line-height: 28px;	
    text-align: center;
} 


@media screen and (min-width: 1200) { 
 
}
@media screen and (min-width: 1367px) {    
        
    .boxBimsys{  
        padding-left: 2%;
        padding-right: 2%;
        padding-top: 16%;
    }
    .bg_header_produk{
        padding-left: 0px;
        padding-right: 0px;
    }
    .boxSmartVisitor, .boxLightsys, .boxVoicedeaf, .boxPatternio, .berlangganan{  
        padding-left: 2%;
        padding-right: 2%; 
    } 
    .boxVoicedeaf .text{
        padding-left: 0px;
        margin-left: 0px;
    }
    .boxLightsys .text{
        padding-left: 6%;
        margin-left: 0px;
    }
} 
 


@media screen and (min-width: 993px) {  
    .boxBimsys , .boxSmartVisitor, .boxLightsys, .boxVoicedeaf, .boxPatternio, .berlangganan { 
        padding-left: 8%;
        padding-right: 8%;
    }
}

@media screen and (max-width: 768px) { 
    .boxSmartVisitor .text, 
    .boxLightsys .text,
    .boxPatternio .text,
    .boxVoicedeaf .text{
        width: 100%;
        float: none;
    }

    .boxSmartVisitor .img_SmartVisitor img,
    .boxLightsys .img_Lightsys img,
    .boxVoicedeaf .img_Voicedeaf img,
    .boxPatternio .img_Patternio img{
        width: 460px;
        height: auto;
        margin-top: 4%; 
        margin-left: 4%;
    }
 
}

@media screen and (max-width: 992px) { 
      
}


@media screen and (max-width: 600px) { 
     .bg_header_produk{
        background: url('../img/img_background/h_produk_m.png');
        background-position-x: 0%;
        background-position-y: 0%;
        background-repeat: repeat;
        background-size: auto;
        width: 100%;
        height: 374px;
     }
     
     .konten2{
        float: left; 
        padding-top: 2%;
        padding-left: 2%;
        padding-right: 2%;
        width: 100%;
        min-height: 550px;
     }
     .inovasi_kolaborasi h1{
        width: 100%;
    }
    
    .inovasi_kolaborasi p{
         width: 100%;
     }
     .boxBimsys .img_bimsys img{
         width: 300px;
         height: auto;
     }
     .boxLightsys{
         background: none;
     }
     .boxSmartVisitor .img_SmartVisitor img, 
     .boxLightsys .img_Lightsys img,
     .boxPatternio .img_Patternio img,
     .boxVoicedeaf .img_Voicedeaf img{
        width: 300px;
        height: auto;
     }
     .boxSmartVisitor .text, .boxSmartVisitor p,
     .boxLightsys .text, .boxLightsys p,
     .boxPatternio .text, .boxPatternio p,
     .boxVoicedeaf .text, .boxVoicedeaf p{ 
        width: 100%;
     }

     .box_all_in_action{
         margin-top: 40%;
     }
}




@media screen and (min-width: 1440px) {  
    .boxBimsys , .boxSmartVisitor, .boxLightsys, .boxVoicedeaf, .boxPatternio, .berlangganan {
        
        padding-left: 8%;
        padding-right: 8%;
    }
    
    .boxVoicedeaf .text {
        padding-left: 1%; 
        margin-left: 1%; 
    }
    
}



/*
1920 x 1080,
2560 x 1440
3440 x 1440
5120 x 2880
*/
@media screen and (min-width: 3440px) {  

    .konten2 p,
    .inovasi_kolaborasi p,
    .boxBimsys p,
    .boxSmartVisitor p,
    .boxLightsys p,
    .boxPatternio p,
    .boxVoicedeaf p,
    .boxVoicedeaf ul,
    .boxPatternio ul,
    .boxLightsys ul { 
        line-height: 56px;  
    }

}


/*end produk*/