Product Grid<\/title>\r\n\r\n<style>\r\nbody {\r\n margin: 0;\r\n font-family: Arial, sans-serif;\r\n background: #f5f5f5;\r\n}\r\n\r\n\/* GRID *\/\r\n.pg-wrap {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 25px;\r\n padding: 20px;\r\n}\r\n\r\n\/* CARD *\/\r\n.pg-item {\r\n position: relative;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n cursor: pointer;\r\n background: #fff;\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n}\r\n\r\n.pg-item img {\r\n width: 100%;\r\n height: 280px;\r\n object-fit: cover;\r\n transition: transform 0.4s ease;\r\n}\r\n\r\n\/* Gradient overlay *\/\r\n.pg-item::after {\r\n content: \"\";\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 60%;\r\n background: linear-gradient(to top, rgba(46, 48, 146, 0.9), transparent);\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n}\r\n\r\n\/* CONTENT *\/\r\n.pg-text {\r\n position: absolute;\r\n bottom: 15px;\r\n left: 15px;\r\n color: #000;\r\n z-index: 2;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.pg-text h3 {\r\n margin: 0;\r\n font-size: 15px;\r\n font-weight: bold;\r\n transition: color 0.3s ease;\r\n color: #780606;\r\n}\r\n\r\n.pg-arrow {\r\n font-size: 16px;\r\n transition: transform 0.3s ease, color 0.3s ease;\r\n}\r\n\r\n\/* HOVER *\/\r\n.pg-item:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 15px 25px rgba(0,0,0,0.2);\r\n}\r\n\r\n.pg-item:hover img {\r\n transform: scale(1.1);\r\n}\r\n\r\n.pg-item:hover::after {\r\n opacity: 1;\r\n}\r\n\r\n.pg-item:hover .pg-text h3 {\r\n color: #fff;\r\n}\r\n\r\n.pg-item:hover .pg-arrow {\r\n transform: translateX(6px);\r\n color: #fff;\r\n}\r\n\r\n\/* TABLET *\/\r\n@media (max-width: 1024px) {\r\n .pg-wrap {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n}\r\n\r\n\/* MOBILE *\/\r\n@media (max-width: 600px) {\r\n .pg-wrap {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 12px;\r\n padding: 15px;\r\n }\r\n\r\n .pg-item {\r\n border-radius: 10px;\r\n }\r\n\r\n .pg-item img {\r\n height: 160px;\r\n }\r\n\r\n .pg-text {\r\n bottom: 10px;\r\n left: 10px;\r\n }\r\n\r\n .pg-text h3 {\r\n font-size: 13px;\r\n }\r\n\r\n .pg-arrow {\r\n font-size: 14px;\r\n }\r\n}\r\n\r\n\/* POPUP *\/\r\n.pg-lightbox {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0,0,0,0.9);\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 9999;\r\n}\r\n\r\n.pg-lightbox img {\r\n max-width: 90%;\r\n max-height: 85%;\r\n border-radius: 10px;\r\n animation: zoomIn 0.3s ease;\r\n}\r\n\r\n.pg-closebtn {\r\n position: absolute;\r\n top: 20px;\r\n right: 25px;\r\n font-size: 35px;\r\n color: #fff;\r\n cursor: pointer;\r\n}\r\n\r\n\/* animation *\/\r\n@keyframes zoomIn {\r\n from { transform: scale(0.8); opacity: 0; }\r\n to { transform: scale(1); opacity: 1; }\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div class=\"pg-wrap\">\r\n\r\n <div class=\"pg-item\" onclick=\"openPopup(this.querySelector('img').src)\">\r\n <img decoding=\"async\" src=\"https:\/\/drbarishmajumder.in\/saipen\/wp-content\/uploads\/2026\/04\/Pen-products-14.jpg\">\r\n <div class=\"pg-text\">\r\n <h3>DOTS BALL PEN<\/h3>\r\n <span class=\"pg-arrow\">\u2197<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"pg-item\" onclick=\"openPopup(this.querySelector('img').src)\">\r\n <img decoding=\"async\" src=\"https:\/\/drbarishmajumder.in\/saipen\/wp-content\/uploads\/2026\/05\/Pen-products-10.jpg\">\r\n <div class=\"pg-text\">\r\n <h3>DOTS NXT BALL PEN<\/h3>\r\n <span class=\"pg-arrow\">\u2197<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pg-item\" onclick=\"openPopup(this.querySelector('img').src)\">\r\n <img decoding=\"async\" src=\"https:\/\/drbarishmajumder.in\/saipen\/wp-content\/uploads\/2026\/05\/Pen-products-11.jpg\">\r\n <div class=\"pg-text\">\r\n <h3>DOTS LINER<\/h3>\r\n <span class=\"pg-arrow\">\u2197<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"pg-item\" onclick=\"openPopup(this.querySelector('img').src)\">\r\n <img decoding=\"async\" src=\"https:\/\/drbarishmajumder.in\/saipen\/wp-content\/uploads\/2026\/05\/Pen-products-12.jpg\">\r\n <div class=\"pg-text\">\r\n <h3>DOTS NXT BALL PEN<\/h3>\r\n <span class=\"pg-arrow\">\u2197<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"pg-lightbox\" id=\"imagePopup\">\r\n <span class=\"pg-closebtn\" onclick=\"closePopup()\">\u00d7<\/span>\r\n <img decoding=\"async\" id=\"popupImg\" src=\"\">\r\n<\/div>\r\n\r\n<script>\r\nfunction openPopup(imgSrc) {\r\n document.getElementById(\"imagePopup\").style.display = \"flex\";\r\n document.getElementById(\"popupImg\").src = imgSrc;\r\n}\r\n\r\nfunction closePopup() {\r\n document.getElementById(\"imagePopup\").style.display = \"none\";\r\n}\r\n\r\n\/* Close on outside click *\/\r\ndocument.getElementById(\"imagePopup\").addEventListener(\"click\", function(e) {\r\n if (e.target.id === \"imagePopup\") {\r\n closePopup();\r\n }\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-22d4686 e-con-full e-flex e-con e-child\" data-id=\"22d4686\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8b6d9e2 elementor-widget elementor-widget-html\" data-id=\"8b6d9e2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Product Grid<\/title>\r\n\r\n<style>\r\nbody {\r\n margin: 0;\r\n font-family: Arial, sans-serif;\r\n background: #f5f5f5;\r\n}\r\n\r\n\/* GRID *\/\r\n.pg-wrapper {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 25px;\r\n padding: 20px;\r\n}\r\n\r\n\/* CARD *\/\r\n.pg-card {\r\n position: relative;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n cursor: pointer;\r\n background: #fff;\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n}\r\n\r\n.pg-card img {\r\n width: 100%;\r\n height: 280px;\r\n object-fit: cover;\r\n transition: transform 0.4s ease;\r\n}\r\n\r\n\/* Gradient overlay *\/\r\n.pg-card::after {\r\n content: \"\";\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 60%;\r\n background: linear-gradient(to top, rgba(46, 48, 146, 0.9), transparent);\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n}\r\n\r\n\/* CONTENT *\/\r\n.pg-info {\r\n position: absolute;\r\n bottom: 15px;\r\n left: 15px;\r\n color: #000;\r\n z-index: 2;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.pg-info h3 {\r\n margin: 0;\r\n font-size: 15px;\r\n font-weight: bold;\r\n transition: color 0.3s ease;\r\n color: #FF1A4C;\r\n}\r\n\r\n.pg-icon {\r\n font-size: 16px;\r\n transition: transform 0.3s ease, color 0.3s ease;\r\n}\r\n\r\n\/* HOVER *\/\r\n.pg-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 15px 25px rgba(0,0,0,0.2);\r\n}\r\n\r\n.pg-card:hover img {\r\n transform: scale(1.1);\r\n}\r\n\r\n.pg-card:hover::after {\r\n opacity: 1;\r\n}\r\n\r\n.pg-card:hover .pg-info h3 {\r\n color: #fff;\r\n}\r\n\r\n.pg-card:hover .pg-icon {\r\n transform: translateX(6px);\r\n color: #fff;\r\n}\r\n\r\n\/* TABLET *\/\r\n@media (max-width: 1024px) {\r\n .pg-wrapper {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n}\r\n\r\n\/* MOBILE *\/\r\n@media (max-width: 600px) {\r\n .pg-wrapper {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 12px;\r\n padding: 15px;\r\n }\r\n\r\n .pg-card {\r\n border-radius: 10px;\r\n }\r\n\r\n .pg-card img {\r\n height: 160px;\r\n }\r\n\r\n .pg-info {\r\n bottom: 10px;\r\n left: 10px;\r\n }\r\n\r\n .pg-info h3 {\r\n font-size: 13px;\r\n }\r\n\r\n .pg-icon {\r\n font-size: 14px;\r\n }\r\n}\r\n\r\n\/* POPUP *\/\r\n.pg-popup {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0,0,0,0.9);\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 9999;\r\n}\r\n\r\n.pg-popup img {\r\n max-width: 90%;\r\n max-height: 85%;\r\n border-radius: 10px;\r\n animation: zoomIn 0.3s ease;\r\n}\r\n\r\n.pg-close {\r\n position: absolute;\r\n top: 20px;\r\n right: 30px;\r\n font-size: 35px;\r\n color: #fff;\r\n cursor: pointer;\r\n}\r\n\r\n\/* animation *\/\r\n@keyframes zoomIn {\r\n from { transform: scale(0.8); opacity: 0; }\r\n to { transform: scale(1); opacity: 1; }\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div class=\"pg-wrapper\">\r\n\r\n <div class=\"pg-card\" onclick=\"openPopup(this.querySelector('img').src)\">\r\n <img decoding=\"async\" src=\"https:\/\/drbarishmajumder.in\/saipen\/wp-content\/uploads\/2026\/05\/Pen-products-2.jpg\">\r\n <div class=\"pg-info\">\r\n <h3>DOTS BALL PEN<\/h3>\r\n <span class=\"pg-icon\">\u2197<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pg-card\" onclick=\"openPopup(this.querySelector('img').src)\">\r\n <img decoding=\"async\" src=\"https:\/\/drbarishmajumder.in\/saipen\/wp-content\/uploads\/2026\/05\/Pen-products-9.jpg\">\r\n <div class=\"pg-info\">\r\n <h3>S-KING LOOK<\/h3>\r\n <span class=\"pg-icon\">\u2197<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pg-card\" onclick=\"openPopup(this.querySelector('img').src)\">\r\n <img decoding=\"async\" src=\"https:\/\/drbarishmajumder.in\/saipen\/wp-content\/uploads\/2026\/04\/Pen-products-15.jpg\">\r\n <div class=\"pg-info\">\r\n <h3>DOTS LINER<\/h3>\r\n <span class=\"pg-icon\">\u2197<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pg-card\" onclick=\"openPopup(this.querySelector('img').src)\">\r\n <img decoding=\"async\" src=\"https:\/\/drbarishmajumder.in\/saipen\/wp-content\/uploads\/2026\/05\/Pen-products-1.jpg\">\r\n <div class=\"pg-info\">\r\n <h3>DOTS NXT BALL PEN<\/h3>\r\n <span class=\"pg-icon\">\u2197<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"pg-popup\" id=\"imagePopup\">\r\n <span class=\"pg-close\" onclick=\"closePopup()\">\u00d7<\/span>\r\n <img decoding=\"async\" id=\"popupImg\" src=\"\">\r\n<\/div>\r\n\r\n<script>\r\nfunction openPopup(imgSrc) {\r\n document.getElementById(\"imagePopup\").style.display = \"flex\";\r\n document.getElementById(\"popupImg\").src = imgSrc;\r\n}\r\n\r\nfunction closePopup() {\r\n document.getElementById(\"imagePopup\").style.display = \"none\";\r\n}\r\n\r\n\/* close when clicking outside image *\/\r\ndocument.getElementById(\"imagePopup\").addEventListener(\"click\", function(e) {\r\n if (e.target.id === \"imagePopup\") {\r\n closePopup();\r\n }\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c7b6439 e-con-full e-flex e-con e-child\" data-id=\"c7b6439\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-66ada54 elementor-widget elementor-widget-html\" data-id=\"66ada54\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Product Grid<\/title>\r\n\r\n<style>\r\nbody {\r\n margin: 0;\r\n font-family: Arial, sans-serif;\r\n background: #f5f5f5;\r\n}\r\n\r\n\/* GRID *\/\r\n.pg-wrap {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 25px;\r\n padding: 20px;\r\n}\r\n\r\n\/* CARD *\/\r\n.pg-item {\r\n position: relative;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n cursor: pointer;\r\n background: #fff;\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n}\r\n\r\n.pg-item img {\r\n width: 100%;\r\n height: 280px;\r\n object-fit: cover;\r\n transition: transform 0.4s ease;\r\n}\r\n\r\n\/* Gradient overlay *\/\r\n.pg-item::after {\r\n content: \"\";\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 60%;\r\n background: linear-gradient(to top, rgba(46, 48, 146, 0.9), transparent);\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n}\r\n\r\n\/* CONTENT *\/\r\n.pg-text {\r\n position: absolute;\r\n bottom: 15px;\r\n left: 15px;\r\n color: #000;\r\n z-index: 2;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.pg-text h3 {\r\n margin: 0;\r\n font-size: 15px;\r\n font-weight: bold;\r\n transition: color 0.3s ease;\r\n color: #FF1A4C;\r\n}\r\n\r\n.pg-arrow {\r\n font-size: 16px;\r\n transition: transform 0.3s ease, color 0.3s ease;\r\n}\r\n\r\n\/* HOVER *\/\r\n.pg-item:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 15px 25px rgba(0,0,0,0.2);\r\n}\r\n\r\n.pg-item:hover img {\r\n transform: scale(1.1);\r\n}\r\n\r\n.pg-item:hover::after {\r\n opacity: 1;\r\n}\r\n\r\n.pg-item:hover .pg-text h3 {\r\n color: #fff;\r\n}\r\n\r\n.pg-item:hover .pg-arrow {\r\n transform: translateX(6px);\r\n color: #fff;\r\n}\r\n\r\n\/* TABLET *\/\r\n@media (max-width: 1024px) {\r\n .pg-wrap {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n}\r\n\r\n\/* MOBILE *\/\r\n@media (max-width: 600px) {\r\n .pg-wrap {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 12px;\r\n padding: 15px;\r\n }\r\n\r\n .pg-item {\r\n border-radius: 10px;\r\n }\r\n\r\n .pg-item img {\r\n height: 160px;\r\n }\r\n\r\n .pg-text {\r\n bottom: 10px;\r\n left: 10px;\r\n }\r\n\r\n .pg-text h3 {\r\n font-size: 13px;\r\n }\r\n\r\n .pg-arrow {\r\n font-size: 14px;\r\n }\r\n}\r\n\r\n\/* POPUP *\/\r\n.pg-lightbox {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0,0,0,0.9);\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 9999;\r\n}\r\n\r\n.pg-lightbox img {\r\n max-width: 90%;\r\n max-height: 85%;\r\n border-radius: 10px;\r\n animation: zoomIn 0.3s ease;\r\n}\r\n\r\n.pg-closebtn {\r\n position: absolute;\r\n top: 20px;\r\n right: 25px;\r\n font-size: 35px;\r\n color: #fff;\r\n cursor: pointer;\r\n}\r\n\r\n\/* animation *\/\r\n@keyframes zoomIn {\r\n from { transform: scale(0.8); opacity: 0; }\r\n to { transform: scale(1); opacity: 1; }\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div class=\"pg-wrap\">\r\n\r\n <div class=\"pg-item\" onclick=\"openPopup(this.querySelector('img').src)\">\r\n <img decoding=\"async\" src=\"https:\/\/drbarishmajumder.in\/saipen\/wp-content\/uploads\/2026\/05\/Pen-products-4.jpg\">\r\n <div class=\"pg-text\">\r\n <h3>DF BALL PEN<\/h3>\r\n <span class=\"pg-arrow\">\u2197<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"pg-item\" onclick=\"openPopup(this.querySelector('img').src)\">\r\n <img decoding=\"async\" src=\"https:\/\/drbarishmajumder.in\/saipen\/wp-content\/uploads\/2026\/05\/Pen-products-6.jpg\">\r\n <div class=\"pg-text\">\r\n <h3>TRIANGULAR BALL PEN<\/h3>\r\n <span class=\"pg-arrow\">\u2197<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pg-item\" onclick=\"openPopup(this.querySelector('img').src)\">\r\n <img decoding=\"async\" src=\"https:\/\/drbarishmajumder.in\/saipen\/wp-content\/uploads\/2026\/05\/Pen-products-8.jpg\">\r\n <div class=\"pg-text\">\r\n <h3>S-KING LOOK<\/h3>\r\n <span class=\"pg-arrow\">\u2197<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"pg-item\" onclick=\"openPopup(this.querySelector('img').src)\">\r\n <img decoding=\"async\" src=\"https:\/\/drbarishmajumder.in\/saipen\/wp-content\/uploads\/2026\/05\/Pen-products-5.jpg\">\r\n <div class=\"pg-text\">\r\n <h3>DF BALL PEN<\/h3>\r\n <span class=\"pg-arrow\">\u2197<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"pg-lightbox\" id=\"imagePopup\">\r\n <span class=\"pg-closebtn\" onclick=\"closePopup()\">\u00d7<\/span>\r\n <img decoding=\"async\" id=\"popupImg\" src=\"\">\r\n<\/div>\r\n\r\n<script>\r\nfunction openPopup(imgSrc) {\r\n document.getElementById(\"imagePopup\").style.display = \"flex\";\r\n document.getElementById(\"popupImg\").src = imgSrc;\r\n}\r\n\r\nfunction closePopup() {\r\n document.getElementById(\"imagePopup\").style.display = \"none\";\r\n}\r\n\r\n\/* Close on outside click *\/\r\ndocument.getElementById(\"imagePopup\").addEventListener(\"click\", function(e) {\r\n if (e.target.id === \"imagePopup\") {\r\n closePopup();\r\n }\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d7c8577 e-con-full e-flex e-con e-child\" data-id=\"d7c8577\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-825d1c5 elementor-widget elementor-widget-html\" data-id=\"825d1c5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Product Grid<\/title>\r\n\r\n<style>\r\nbody {\r\n margin: 0;\r\n font-family: Arial, sans-serif;\r\n background: #f5f5f5;\r\n}\r\n\r\n\/* GRID *\/\r\n.pg-wrap {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 25px;\r\n padding: 20px;\r\n}\r\n\r\n\/* CARD *\/\r\n.pg-item {\r\n position: relative;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n cursor: pointer;\r\n background: #fff;\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n}\r\n\r\n.pg-item img {\r\n width: 100%;\r\n height: 280px;\r\n object-fit: cover;\r\n transition: transform 0.4s ease;\r\n}\r\n\r\n\/* Gradient overlay *\/\r\n.pg-item::after {\r\n content: \"\";\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 60%;\r\n background: linear-gradient(to top, rgba(46, 48, 146, 0.9), transparent);\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n}\r\n\r\n\/* CONTENT *\/\r\n.pg-text {\r\n position: absolute;\r\n bottom: 15px;\r\n left: 15px;\r\n color: #000;\r\n z-index: 2;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.pg-text h3 {\r\n margin: 0;\r\n font-size: 15px;\r\n font-weight: bold;\r\n transition: color 0.3s ease;\r\n color: #FF1A4C;\r\n}\r\n\r\n.pg-arrow {\r\n font-size: 16px;\r\n transition: transform 0.3s ease, color 0.3s ease;\r\n}\r\n\r\n\/* HOVER *\/\r\n.pg-item:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 15px 25px rgba(0,0,0,0.2);\r\n}\r\n\r\n.pg-item:hover img {\r\n transform: scale(1.1);\r\n}\r\n\r\n.pg-item:hover::after {\r\n opacity: 1;\r\n}\r\n\r\n.pg-item:hover .pg-text h3 {\r\n color: #fff;\r\n}\r\n\r\n.pg-item:hover .pg-arrow {\r\n transform: translateX(6px);\r\n color: #fff;\r\n}\r\n\r\n\/* TABLET *\/\r\n@media (max-width: 1024px) {\r\n .pg-wrap {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n}\r\n\r\n\/* MOBILE *\/\r\n@media (max-width: 600px) {\r\n .pg-wrap {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 12px;\r\n padding: 15px;\r\n }\r\n\r\n .pg-item {\r\n border-radius: 10px;\r\n }\r\n\r\n .pg-item img {\r\n height: 160px;\r\n }\r\n\r\n .pg-text {\r\n bottom: 10px;\r\n left: 10px;\r\n }\r\n\r\n .pg-text h3 {\r\n font-size: 13px;\r\n }\r\n\r\n .pg-arrow {\r\n font-size: 14px;\r\n }\r\n}\r\n\r\n\/* POPUP *\/\r\n.pg-lightbox {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0,0,0,0.9);\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 9999;\r\n}\r\n\r\n.pg-lightbox img {\r\n max-width: 90%;\r\n max-height: 85%;\r\n border-radius: 10px;\r\n animation: zoomIn 0.3s ease;\r\n}\r\n\r\n.pg-closebtn {\r\n position: absolute;\r\n top: 20px;\r\n right: 25px;\r\n font-size: 35px;\r\n color: #fff;\r\n cursor: pointer;\r\n}\r\n\r\n\/* animation *\/\r\n@keyframes zoomIn {\r\n from { transform: scale(0.8); opacity: 0; }\r\n to { transform: scale(1); opacity: 1; }\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div class=\"pg-wrap\">\r\n\r\n <div class=\"pg-item\" onclick=\"openPopup(this.querySelector('img').src)\">\r\n <img decoding=\"async\" src=\"https:\/\/drbarishmajumder.in\/saipen\/wp-content\/uploads\/2026\/05\/Pen-products.jpg\">\r\n <div class=\"pg-text\">\r\n <h3>DOTS NXT BALL PEN<\/h3>\r\n <span class=\"pg-arrow\">\u2197<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pg-item\" onclick=\"openPopup(this.querySelector('img').src)\">\r\n <img decoding=\"async\" src=\"https:\/\/drbarishmajumder.in\/saipen\/wp-content\/uploads\/2026\/04\/Pen-products-19.jpg\">\r\n <div class=\"pg-text\">\r\n <h3>DOTS POLO<\/h3>\r\n <span class=\"pg-arrow\">\u2197<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pg-item\" onclick=\"openPopup(this.querySelector('img').src)\">\r\n <img decoding=\"async\" src=\"https:\/\/drbarishmajumder.in\/saipen\/wp-content\/uploads\/2026\/04\/Pen-products-11.jpg\">\r\n <div class=\"pg-text\">\r\n <h3>DOTS NXT BALL PEN<\/h3>\r\n <span class=\"pg-arrow\">\u2197<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pg-item\" onclick=\"openPopup(this.querySelector('img').src)\">\r\n <img decoding=\"async\" src=\"https:\/\/drbarishmajumder.in\/saipen\/wp-content\/uploads\/2026\/05\/Pen-products-14.jpg\">\r\n <div class=\"pg-text\">\r\n <h3>GELTECH GEL PEN<\/h3>\r\n <span class=\"pg-arrow\">\u2197<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"pg-lightbox\" id=\"imagePopup\">\r\n <span class=\"pg-closebtn\" onclick=\"closePopup()\">\u00d7<\/span>\r\n <img decoding=\"async\" id=\"popupImg\" src=\"\">\r\n<\/div>\r\n\r\n<script>\r\nfunction openPopup(imgSrc) {\r\n document.getElementById(\"imagePopup\").style.display = \"flex\";\r\n document.getElementById(\"popupImg\").src = imgSrc;\r\n}\r\n\r\nfunction closePopup() {\r\n document.getElementById(\"imagePopup\").style.display = \"none\";\r\n}\r\n\r\n\/* Close on outside click *\/\r\ndocument.getElementById(\"imagePopup\").addEventListener(\"click\", function(e) {\r\n if (e.target.id === \"imagePopup\") {\r\n closePopup();\r\n }\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b18eafb e-flex e-con-boxed e-con e-parent\" data-id=\"b18eafb\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-bb8727a e-con-full e-flex e-con e-child\" data-id=\"bb8727a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-6112b58 e-con-full e-flex e-con e-child\" data-id=\"6112b58\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a4719ca elementor-widget elementor-widget-heading\" data-id=\"a4719ca\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">GET STARTED<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ff269c7 elementor-widget-divider--view-line_icon elementor-widget-divider--element-align-left elementor-widget-tablet__width-initial elementor-widget__width-initial elementor-view-default elementor-widget elementor-widget-divider\" data-id=\"ff269c7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon elementor-divider__element\">\n\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-circle\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z\"><\/path><\/svg><\/div>\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2acb1d6 elementor-widget elementor-widget-elementskit-heading\" data-id=\"2acb1d6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"elementskit-heading.default\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" ><div class=\"ekit-heading elementskit-section-title-wraper text_left ekit_heading_tablet-text_center ekit_heading_mobile-\"><h2 class=\"ekit-heading--title elementskit-section-title \">Have a Supply <span><span>Requirement?<\/span><\/span> <\/h2><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8d2c155 elementor-widget elementor-widget-elementskit-heading\" data-id=\"8d2c155\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"elementskit-heading.default\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" ><div class=\"ekit-heading elementskit-section-title-wraper text_left ekit_heading_tablet-text_center ekit_heading_mobile-\"><h2 class=\"ekit-heading--title elementskit-section-title \">Let\u2019s Work Together<\/h2><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6968f78 e-con-full e-flex e-con e-child\" data-id=\"6968f78\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fa836be elementor-view-stacked elementor-position-inline-start elementor-shape-circle elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box\" data-id=\"fa836be\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon-box.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-box-wrapper\">\n\n\t\t\t\t\t\t<div class=\"elementor-icon-box-icon\">\n\t\t\t\t<span class=\"elementor-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-phone-volume\" viewBox=\"0 0 384 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M97.333 506.966c-129.874-129.874-129.681-340.252 0-469.933 5.698-5.698 14.527-6.632 21.263-2.422l64.817 40.513a17.187 17.187 0 0 1 6.849 20.958l-32.408 81.021a17.188 17.188 0 0 1-17.669 10.719l-55.81-5.58c-21.051 58.261-20.612 122.471 0 179.515l55.811-5.581a17.188 17.188 0 0 1 17.669 10.719l32.408 81.022a17.188 17.188 0 0 1-6.849 20.958l-64.817 40.513a17.19 17.19 0 0 1-21.264-2.422zM247.126 95.473c11.832 20.047 11.832 45.008 0 65.055-3.95 6.693-13.108 7.959-18.718 2.581l-5.975-5.726c-3.911-3.748-4.793-9.622-2.261-14.41a32.063 32.063 0 0 0 0-29.945c-2.533-4.788-1.65-10.662 2.261-14.41l5.975-5.726c5.61-5.378 14.768-4.112 18.718 2.581zm91.787-91.187c60.14 71.604 60.092 175.882 0 247.428-4.474 5.327-12.53 5.746-17.552.933l-5.798-5.557c-4.56-4.371-4.977-11.529-.93-16.379 49.687-59.538 49.646-145.933 0-205.422-4.047-4.85-3.631-12.008.93-16.379l5.798-5.557c5.022-4.813 13.078-4.394 17.552.933zm-45.972 44.941c36.05 46.322 36.108 111.149 0 157.546-4.39 5.641-12.697 6.251-17.856 1.304l-5.818-5.579c-4.4-4.219-4.998-11.095-1.285-15.931 26.536-34.564 26.534-82.572 0-117.134-3.713-4.836-3.115-11.711 1.285-15.931l5.818-5.579c5.159-4.947 13.466-4.337 17.856 1.304z\"><\/path><\/svg>\t\t\t\t<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t\t\t\t\t<div class=\"elementor-icon-box-content\">\n\n\t\t\t\t\t\t\t\t\t<h3 class=\"elementor-icon-box-title\">\n\t\t\t\t\t\t<span >\n\t\t\t\t\t\t\tCALL US ANYTIME :\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<p class=\"elementor-icon-box-description\">\n\t\t\t\t\t\t+91 6289890004\t\t\t\t\t<\/p>\n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Our Products Product Grid DOTS BALL PEN \u2197 DOTS NXT BALL PEN \u2197 DOTS LINER \u2197 DOTS NXT BALL PEN \u2197 \u00d7 Product Grid DOTS BALL PEN \u2197 S-KING LOOK \u2197 DOTS LINER \u2197 DOTS NXT BALL PEN \u2197 \u00d7 Product Grid DF BALL PEN \u2197 TRIANGULAR BALL PEN \u2197 S-KING LOOK \u2197 DF BALL PEN \u2197 \u00d7 Product Grid […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-60","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/drbarishmajumder.in\/saipen\/wp-json\/wp\/v2\/pages\/60","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/drbarishmajumder.in\/saipen\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/drbarishmajumder.in\/saipen\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/drbarishmajumder.in\/saipen\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/drbarishmajumder.in\/saipen\/wp-json\/wp\/v2\/comments?post=60"}],"version-history":[{"count":50,"href":"https:\/\/drbarishmajumder.in\/saipen\/wp-json\/wp\/v2\/pages\/60\/revisions"}],"predecessor-version":[{"id":1586,"href":"https:\/\/drbarishmajumder.in\/saipen\/wp-json\/wp\/v2\/pages\/60\/revisions\/1586"}],"wp:attachment":[{"href":"https:\/\/drbarishmajumder.in\/saipen\/wp-json\/wp\/v2\/media?parent=60"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}