body { background-color: #f1f1f1;}
        .main { }
        h1 { font-size: 35px; } 
        h2 { font-size: 18px; font-weight: 400; line-height: 30px; padding-top:15px; padding-bottom: 0px; color:#000000;  }
        h3 { font-size: 15px; margin-top: 10px; margin-bottom: 10px; color:#000000; }
        @media (max-width: 600px) {    h1 { font-size: 25px; } 
                                       h2 { font-size: 14px; font-weight: 400; line-height: 25px; padding-top:15px; padding-bottom: 0px; color:#000000;  }   }
        .row, .row > .column { padding: 5px; }
        .column { float: left; width: 20%; }
        .row:after { content: ""; display: table; clear: both; }
        .content { background-color: white; padding: 10px; font-size: 12pt; }
        @media screen and (max-width: 1400px) { .column { width: 24.9%; } }
        @media screen and (max-width: 1000px) { .column { width: 33.3%; } }
        @media screen and (max-width: 600px) { .column {  width: 100% } }
        .mainimage {width: 100%; max-width: 350px; height: 350px; overflow: hidden; display: flex; justify-content: center; align-items: center; margin: 0 auto; }
        .mainimage img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: pointer; }
        #myImg { cursor: pointer; }
        .popup-container { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 9999; }
        .popup-image { max-width: 90%; max-height: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
        .close-button {  position: absolute;  top: 0px;  right: 10px;  color: #000000;  font-size: 40px;  font-weight: bold;  transition: 0.3s; z-index: 2;}
        .close-button:hover,.close:focus {  color: #bbb;  text-decoration: none;  cursor: pointer;}
        .price {padding-top: 10px; padding-bottom: 10px;  font-size: 16px;}
        .buttons { background-color: #fa6117; border: none;  color: white;  padding: 4px 10px;  text-align: center;  text-decoration: none;  display: inline-block;  font-size: 14px;  margin: 4px 2px;  cursor: pointer; border-radius:5px;}      * { box-sizing: border-box; }
        .buttons2 { background-color: #25d366; border: none;  color: white;  padding: 4px 10px;  text-align: center;  text-decoration: none;  display: inline-block;  font-size: 14px;  margin: 4px 2px;  cursor: pointer; border-radius:5px;}      * { box-sizing: border-box; }
        .btn3 { background: #fa6117; border: none; color: white; padding: 5px 14px;  text-align: center;  text-decoration: none;  display: inline-block;  font-size: 14px;  margin: 4px 2px;  cursor: pointer; border-radius:5px;}      * { box-sizing: border-box; }
        @media (max-width: 600px) {  .btn3 { background: #fa6117; border: none; color: white; padding: 5px 14px;  text-align: center;  text-decoration: none;  display: inline-block;  font-size: 14px;  margin: 4px 2px;  cursor: pointer; border-radius:5px;}      * { box-sizing: border-box; } }
        .btn4 { padding: 4px 8px; font-size: 14px; background: #efefef; border-radius: 5px; border: 1px solid #9f9f9f;  color:#000000;}
        .align { display: flex;     justify-content: space-between;}
        .line { text-decoration: line-through; }  
        
        .pop-modal { z-index: 9999; display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); overflow: auto; }
        .pop-modal-content { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 1000px; max-height: 90%; background-color: white; padding: 20px; border-radius: 5px; text-align: center; margin: 70px auto 10% auto;; }
        @media screen and (max-width: 1100px) { .pop-modal-content {  max-width: 90%; max-height: fit-content; } }
        @media screen and (max-width: 600px) { .pop-modal-content {  max-width: 90%; max-height: fit-content; } }
        .pop-modal-title { font-size: 24px; font-weight: bold; margin: 10px 0; }
        .pop-modal-description { margin-top: 20px; font-size: 15px; }
        #pop-popupImage { max-width: 100%; max-height: 70vh; }
        
        .arrow { display: block; position: absolute; top: 50%; transform: translateY(-50%); font-size: 30px; color: white; background: rgba(0, 0, 0, 0.5); padding: 10px; border: none; padding: 10px 15px; cursor: pointer; z-index: 10000; }
        #imageModal .arrow { display: block; }
        .left-arrow { left: 10px;}
        .right-arrow { right: 10px;}
        @media screen and (max-width: 640px) { .left-arrow { left: 5px; } }
        @media screen and (max-width: 640px) { .right-arrow { right: 5px; } }