body {
	margin: 0px;
	background-color: #222222;
}
#container {
	
	width: 960px;
	color: #fff8dc;
	background-image: url(images/bgpixel.gif);
	margin: 0px auto -1px auto; 
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-right-style: groove;
	border-left-style: groove;
	border-top-color: #28578f;
	border-right-color: #28578f;
	border-bottom-color: #28578f;
	border-left-color: #28578f;
}
#red_top {
	background-image: url(images/re-title-bg.jpg);
	height: 13px;
	width: 930px;
	font-family: "‘Lucida Sans Unicode’", "‘Lucida Grande’", sans-serif;
	font-size: 13pt;
	color: #d6d4cb;
	text-align: right;
	padding-right: 30px;
	padding-top: 0px;
	padding-bottom: 10px;
	vertical-align: middle;
	font-weight: bold;
}
#logo {
	margin-left: 15px;
	float: left;
}
#text {
	margin-top: 30px;
	margin-left: 115px;
	position: absolute;
	z-index: 1;
}
#clear {
	clear: left;
}
#links {
	margin-top: 75px;
	text-align: right;
	margin-right:5px;
	letter-spacing: 0px;
	margin-bottom:3px;
	float: right;
	padding: 3px;

}

.links {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-weight: bold;
	color: #990000;
	text-decoration: none;
}

.links:hover {
	color: #000000;
	text-decoration: underline;
}


.email-links {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-weight: bold;
	color: #FF9900;
	text-decoration: none;
}

.email-links:hover {
	color: #FFFFFF;
	text-decoration: underline;
}

#company-text {
	font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
	font-size: 24pt;
	color: #FFFFFF;
	float: left;
	margin-top: 0px;
	margin: 0px 0px 10px 10px;
	text-shadow:#000000 2px 2px 2px;

}

#contact-img {
	font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
	color: #FFFFFF;
	float: left;
	margin-top: 25px;
	margin-left: 0px;
	text-shadow:#000000 2px 2px 2px;

}

#company-text-body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 7.5pt;
	color: #FFFFCC;
	text-align: justify;
	float: left;
	width: 220px;
	margin-left: 13px;
	margin-top: 20px;
}


#news-text {
	font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
	font-size: 24pt;
	color: #FFFFFF;
	float: left;
	margin-top: 25px;
	margin-left: 360px;
	text-shadow:#000000 2px 2px 2px;
}

#footer {
	margin-top: 63px;
	margin-left: 360px;
	font-family: Tahoma;
	font-size: 9px;
	color: #CCCCCC;
	
}

#footer-inner {
	margin-left: 360px;
	font-family: Tahoma;
	font-size: 9px;
	color: #CCCCCC;
	position: absolute;
	top: 742px;
}



#aboutus-text {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffcc66;
	text-align: justify;
	position: absolute;
	letter-spacing: .05em;
	position: absolute;
}

#news-text-body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 7.5pt;
	color: #FFFFCC;
	text-align: justify;
	float: left;
	width: 940px;
	margin-left: 0px;
	margin-top: 20px;
}

#news-text-body-inner {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 7.5pt;
	color: #FFFFCC;
	text-align: justify;
	float: left;
	width: 400px;
	margin-left: 20px;
	margin-top: 82px;
	position: absolute;
}

#contact-text {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #ffcc66;
	text-align: justify;
	float: left;
	width: 400px;
	margin-left: 530px;
	margin-top: 60px;
	position: absolute;
	letter-spacing: .05em;
}

#body-container {
	height: 560px;
	width: 960px;
	background-repeat: repeat-x;
	background-position: bottom;
	background-image: linear-gradient(#54b3e3, #152e67);
}

#body-container-inner{
	height: 460px;
	width: 960px;
	background-repeat: repeat-x;
	background-position: bottom;
	background-image: linear-gradient(#489acc, #070f4d);
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffcc66;
	text-align: justify;
	position: absolute;
	letter-spacing: .05em;
}


.redline {
	font-weight: bold;
	color: #CC0000;
}
#red-bar {
	background-color: #28578f;
	height: 5px;
	width: 960px;
}
#picture {
	margin-top: 20px;
	margin-left: 20px;
	position: absolute;
}

#apDiv1 {
	position:absolute;
	width:10px;
	height:340px;
	z-index:2;
	left: 48%;
	top: 60px;
	border-right-width: thin;
	border-top-style: none;
	border-right-style: groove;
	border-bottom-style: none;
	border-left-style: none;
	border-right-color: #FFCC00;
}

/*Simple image gallery*/
#simplegallery1{ //CSS for Simple Gallery Example 1
position: relative; /*keep this intact*/
	visibility: hidden;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: darkred;
	border-right-color: darkred;
	border-bottom-color: darkred;
	border-left-color: darkred;
}

#simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)
text-align: left;
	padding: 2px 5px;
}
.headoffice {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffcc66;
	text-decoration: underline;
}
.Mobile {
	color: #ffcc66;
}
#req-text {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color: #ffcc66;
	text-align: justify;
	float: left;
	width: 400px;
	margin-left: 530px;
	margin-top: 64px;
	position: absolute;
	font-weight: bolder;
	letter-spacing: .05em;
}




<!--customer-care-form-start-->



.form-box{
width:350px;
font-size: 13pt;
padding:0px;
margin:0px;}



.form-input-bg
{background-color:#eef5e3; 
width:360px;
height:20px;
border:#43170a solid thin;
border-right:none;
border-top:none;
padding:0px; margin:0px;

}

.form-input-bg.input
{background-color:#eef5e3; 

width:360px;
border-right:none;
border-top:none;
height:20px;
border:#43170a solid thin;

padding:0px; margin:0px;

}



.form-input-bg-email

{background-color:#eef5e3; 

width:215px;

height:20px;

border:#43170a solid thin;
border-right:none;
border-top:none;
padding:0px; margin:0px;

}



.form-input-bg.input-email

{background-color:#eef5e3; 

width:215px;

height:20px;

border:#43170a solid thin;
border-right:none;
border-top:none;
padding:0px; margin:0px;

}



.form-input-bg-order

{background-color:#eef5e3; 

width:215px;

height:20px;

border:#43170a solid thin;
border-right:none;
border-top:none;
padding:0px; margin:0px;

}



.form-input-bg.input-order

{background-color:#eef5e3; 

width:215px;

height:20px;

border:#43170a solid thin;
border-right:none;
border-top:none;
padding:0px; margin:0px;

}



.form-input-bg-quality

{background-color:#eef5e3; 

width:215px;

height:20px;

border:#43170a solid thin;
border-right:none;
border-top:none;
padding:0px; margin:0px; 

}



.form-input-bg.input-quality

{background-color:#eef5e3; 

width:215px;

height:20px;

border:#43170a solid thin;
border-right:none;
border-top:none;
padding:0px; margin:0px;

}



.form-input-bg-quantity

{background-color:#eef5e3; 

width:215px;

height:20px;

border:#43170a solid thin;
border-right:none;
border-top:none;
padding:0px; margin:0px;

}



.form-input-bg.input-quantity

{background-color:#eef5e3; 

width:215px;

height:20px;

border:#43170a solid thin;
border-right:none;
border-top:none;
padding:0px; margin:0px;

}



.form-input-bg-complaint

{background-color:#eef5e3; 

width:215px;

height:60px;

border:#43170a solid thin;
border-right:none;
border-top:none;
padding:0px; margin:0px;

}







.input-text

{ width:45px;

height:25px;margin-top:25px;

margin-left:5px;}



.input-button

{width:80px;
height:28px;
background-image:url(images/submit-btn.png);
background-color:#0d1d59;
border:none;
cursor:pointer;
background-repeat:no-repeat;

}

.text {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 11pt;
	color: #FFFFCC;
	text-align:left;
	float: left;
	width: 600px;
	line-height:24px;
	padding-bottom:20px;
	padding-left:40px;
	letter-spacing: .05em;
}

.text ul
	{padding:0px;
	margin:0px;
	padding-left:17px;
	color:#FFFFCC;}
.text ul li 
	{ padding-left:5px;}
	
    .zoomable {
      cursor: zoom-in;
      transition: transform 0.3s;
      max-width: 225px;
      float:left;
      margin-left:10px;
    }

    .popup-overlay {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      background: rgba(0, 0, 0, 0.7);
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }

    .popup-content {
      position: relative;
      max-width: 90%;
      max-height: 90%;
      border-radius: 10px;
      overflow: hidden;
    }

    .popup-content img {
      width: 100%;
      max-height: 90vh;
      display: block;
    }

    .close-btn {
      position: absolute;
      top: 5px;
      right: 5px;
      font-size: 24px;
      font-weight: bold;
      color: white;
      background: rgba(0,0,0,0.6);
      border: none;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      cursor: pointer;
    }

    .close-btn:hover {
      background: red;
    }
	
    .gradient-button {
      background: linear-gradient(#e68842, #de3133); /* orange to light orange */
      color: white;
      padding: 12px 24px;
      border: 2px solid #e68842;
      border-radius: 9px;
      font-size: 16px;
      cursor: pointer;
      transition: 0.3s ease;
	  font-weight:bold;
    }

    .gradient-button:hover {
      opacity: 0.9;
    }
    
    h1 {
      margin-bottom: 20px;
      color: #333;
    }

    .top-row, .bottom-row {
      display: flex;
      justify-content: center;
      gap: 40px;
      margin-bottom: 40px;
      flex-wrap: wrap;
    }

    .card {
      background: white;
      border: 2px solid #ddd;
      border-radius: 10px;
      width: 220px;
      padding: 15px;
      box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
    }

    .card img {
      width: 100%;
      height: 270px;
      object-fit: cover;
      border-radius: 6px;
      margin-bottom: 10px;
      margin-left:0px;
    }

    .card h3 {
      margin: 10px 0 5px;
      font-size: 16px;
      color: #333;
      font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
    }

    .card p {
      margin: 0;
      font-size: 12px;
      color: #555;
      font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
    }

    .card small {
      display: block;
      margin-top: 5px;
      color: #999;
      font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
    }
    
 .history-section {
      display: flex;
      align-items: flex-start;
      margin: auto;
      border-radius: 10px;
      padding: 10px;
      font-family: "‘Lucida Sans Unicode’", "‘Lucida Grande’", sans-serif;
      text-shadow:#000000 2px 2px 2px;
      color:#fff;
      font-size:12px;
    }
.history-section p {
    color:#fff;
}

    .history-left {
      flex: 1;
      text-align: center;
    }

    .history-right h1 {
      font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
      font-size: 24px;
      display: inline-block;
      text-shadow:#000000 2px 2px 2px;
      color:#fff;
      margin: 0;
    }

    .history-right {
      flex: 3;
      padding-left: 30px;
      font-size: 13px;
      color: #333;
      line-height: 1.6;
      font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
    }
    
    .product-section {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
      max-width: 1200px;
      margin: auto;
    }

  .sosmed-links a {
    display: inline-flex;
    align-items: center;
    color: white;
    text-decoration: none;
    margin-right: 15px;
    font-size: 16px;
    opacity: 0.85; /* transparan */
    transition: 0.3s;
  }

  .sosmed-links a i {
    margin-right: 8px;
    font-size: 18px;
  }

  .sosmed-links a:hover {
    opacity: 1; /* saat hover, jadi lebih solid */
  }

    .product-card {
      width: 168px;
      text-align: center;
      padding: 0px;
    }

    .product-card img {
      width: 100%;
      height: 245px;
      object-fit: contain;
      margin-bottom: 10px;
    }

    .product-card h3 {
      font-size: 16px;
      color: #fff;
      margin: 10px 0 0;
      padding: 0 5px;
      font-family: "‘Lucida Sans Unicode’", "‘Lucida Grande’", sans-serif;
      text-shadow:#000000 2px 2px 2px;
    }
    
   .image-gallery {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }

    .image-gallery img {
      width: 200px;
      height: auto;
      cursor: pointer;
      border-radius: 8px;
      box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
      transition: transform 0.3s;
    }

    .image-gallery img:hover {
      transform: scale(1.05);
    }
    
    .brand-section {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px;
      max-width: 920px;
      margin: auto;
      margin-left:10px;
      border-radius:10px;
      padding:10px;
    }

    .category {
      flex: 1;
      min-width: 200px;
      text-align:center;
    }

    .category h3 {
      font-size: 18px;
      margin-bottom: 20px;
      color: #444;
      border-bottom: 2px solid #ccc;
      display: inline-block;
      padding-bottom: 5px;
    }

    .brand-logos {
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: center;
    }

    .brand-logos img {
      max-height: 300px;
      max-width: 200px;
      object-fit: contain;
      filter: grayscale(0.3);
      transition: 0.3s ease;
    }

    .brand-logos img:hover {
      filter: none;
      transform: scale(1.1);
    }
    
    
h1.lucida {
    font-family: "‘Lucida Sans Unicode’", "‘Lucida Grande’", sans-serif;
    text-shadow:#000000 2px 2px 2px;
    color:#fff;
    font-size:28px;
}    
    
h3.lucida { 
    font-family: "‘Lucida Sans Unicode’", "‘Lucida Grande’", sans-serif;
    text-shadow:#000000 2px 2px 2px;
    color:#fff;
    font-size:24px;
}

#apDiv2 {
    position: absolute;
    width: 10px;
    height: 200px;
    z-index: 2;
    left: 48%;
    top: 360px;
    border-right-width: thin;
    border-top-style: none;
    border-right-style: groove;
    border-bottom-style: none;
    border-left-style: none;
    border-right-color: #FFCC00;
}
   /* Popup overlay */
    #window {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.7);
      justify-content: center;
      align-items: center;
      z-index: 999;
    }

    /* Popup content */
    .pop-content {
      position: relative;
      max-width: 90%;
      max-height: 90%;
    }

    .pop-content img {
      width: 100%;
      height: auto;
      border-radius: 10px;
      box-shadow: 0 0 20px rgba(0,0,0,0.5);
    }

    /* Tombol Tutup */
    .tutup {
      position: absolute;
      top: -10px;
      right: -10px;
      background: #fff;
      border-radius: 50%;
      font-size: 20px;
      width: 30px;
      height: 30px;
      border: none;
      cursor: pointer;
    }