{"id":29837,"date":"2026-05-15T10:26:59","date_gmt":"2026-05-15T10:26:59","guid":{"rendered":"https:\/\/dev.shami-co.com\/product-portfolio\/"},"modified":"2026-05-15T20:27:52","modified_gmt":"2026-05-15T20:27:52","slug":"product-portfolio","status":"publish","type":"page","link":"https:\/\/dev.shami-co.com\/en\/product-portfolio\/","title":{"rendered":"Product Portfolio"},"content":{"rendered":"        <style>\r\n        \/* Back Button *\/\r\n        .wc-portfolio-back {\r\n            margin-bottom: 30px;\r\n        }\r\n        \r\n        .wc-portfolio-back-btn {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            padding: 10px 20px;\r\n            background-color: #f5f5f5;\r\n            color: #333;\r\n            text-decoration: none;\r\n            border-radius: 8px;\r\n            transition: all 0.3s ease;\r\n            font-family: var(--wd-text-font);\r\n        }\r\n        \r\n        .wc-portfolio-back-btn:hover {\r\n            background-color: var(--btn-accented-bgcolor, rgb(2, 91, 123));\r\n            color: #fff;\r\n        }\r\n        \r\n        \/* Categories Filter Styles *\/\r\n        .wc-portfolio-categories-filter {\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n            gap: 10px;\r\n            justify-content: center;\r\n            margin-bottom: 40px;\r\n            padding: 20px;\r\n            background: #f9f9f9;\r\n            border-radius: 12px;\r\n        }\r\n        \r\n        .wc-portfolio-filter-btn {\r\n            padding: 10px 20px;\r\n            background: white;\r\n            border: 2px solid #e0e0e0;\r\n            border-radius: 30px;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            font-family: var(--wd-text-font);\r\n            font-size: 14px;\r\n            font-weight: 500;\r\n            color: #333;\r\n            text-decoration: none;\r\n            display: inline-block;\r\n        }\r\n        \r\n        .wc-portfolio-filter-btn:hover {\r\n            border-color: var(--btn-accented-bgcolor, rgb(2, 91, 123));\r\n            color: var(--btn-accented-bgcolor, rgb(2, 91, 123));\r\n        }\r\n        \r\n        .wc-portfolio-filter-btn.active {\r\n            background: var(--btn-accented-bgcolor, rgb(2, 91, 123));\r\n            border-color: var(--btn-accented-bgcolor, rgb(2, 91, 123));\r\n            color: white;\r\n        }\r\n        \r\n        .category-count {\r\n            margin-left: 5px;\r\n            font-size: 12px;\r\n            opacity: 0.8;\r\n        }\r\n        \r\n        \/* Grid Styles *\/\r\n        .wc-portfolio-grid__wrapper {\r\n            display: grid;\r\n            gap: 30px;\r\n            margin-bottom: 40px;\r\n        }\r\n        \r\n        .wc-portfolio-card {\r\n            background: #fff;\r\n            border-radius: 12px;\r\n            overflow: hidden;\r\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n            box-shadow: 0 2px 10px rgba(0,0,0,0.05);\r\n        }\r\n        \r\n        .wc-portfolio-card:hover {\r\n            transform: translateY(-5px);\r\n            box-shadow: 0 10px 30px rgba(0,0,0,0.1);\r\n        }\r\n        \r\n        .wc-portfolio-card__inner {\r\n            padding: 0;\r\n        }\r\n        \r\n        .wc-portfolio-card__image {\r\n            position: relative;\r\n            overflow: hidden;\r\n            aspect-ratio: 1 \/ 1;\r\n        }\r\n        \r\n        .wc-portfolio-card__image img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n            transition: transform 0.3s ease;\r\n        }\r\n        \r\n        .wc-portfolio-card:hover .wc-portfolio-card__image img {\r\n            transform: scale(1.05);\r\n        }\r\n        \r\n        .wc-portfolio-card__image-placeholder {\r\n            aspect-ratio: 1 \/ 1;\r\n            background: #f5f5f5;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: #999;\r\n        }\r\n        \r\n        .wc-portfolio-card__title {\r\n            display: block;\r\n            white-space: nowrap;\r\n            overflow: hidden;\r\n            text-overflow: ellipsis;\r\n            padding: 20px 20px 0;\r\n            margin: 0;\r\n            font-family: var(--wd-title-font);\r\n            font-weight: var(--wd-title-font-weight);\r\n            color: var(--wd-title-color);\r\n            font-size: 18px;\r\n        }\r\n        \r\n        .wc-portfolio-card__title a {\r\n            color: var(--wd-entities-title-color);\r\n            text-decoration: none;\r\n            transition: color 0.3s ease;\r\n        }\r\n        \r\n        .wc-portfolio-card__title a:hover {\r\n            color: var(--wd-entities-title-color-hover);\r\n        }\r\n        \r\n        .wc-portfolio-card__categories {\r\n            padding: 10px 20px 0;\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n            gap: 5px;\r\n        }\r\n        \r\n        .wc-portfolio-category {\r\n            font-size: 12px;\r\n            padding: 3px 10px;\r\n            background: #f0f0f0;\r\n            border-radius: 15px;\r\n            color: #666;\r\n            text-decoration: none;\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        .wc-portfolio-category:hover {\r\n            background: var(--btn-accented-bgcolor, rgb(2, 91, 123));\r\n            color: white;\r\n        }\r\n        \r\n        .wc-portfolio-card__button {\r\n            padding: 0 20px 20px;\r\n        }\r\n        \r\n        .wc-portfolio-btn {\r\n            margin-top: 15px;\r\n            width: 100%;\r\n            text-align: center;\r\n            display: inline-block;\r\n            padding: 10px 20px;\r\n            background-color: var(--btn-accented-bgcolor, rgb(2, 91, 123));\r\n            color: #fff;\r\n            text-decoration: none;\r\n            border-radius: 6px;\r\n            font-family: var(--wd-text-font);\r\n            font-weight: 500;\r\n            transition: opacity 0.3s ease, background-color 0.3s ease;\r\n        }\r\n        \r\n        .wc-portfolio-btn:hover {\r\n            opacity: 0.9;\r\n            background-color: var(--btn-accented-bgcolor, rgb(2, 91, 123));\r\n            color: #fff;\r\n        }\r\n        \r\n        \/* Pagination *\/\r\n        .wc-portfolio-pagination {\r\n            text-align: center;\r\n            margin-top: 40px;\r\n        }\r\n        \r\n        .wc-portfolio-pagination .page-numbers {\r\n            display: inline-block;\r\n            padding: 8px 15px;\r\n            margin: 0 3px;\r\n            background: #f5f5f5;\r\n            color: #333;\r\n            text-decoration: none;\r\n            border-radius: 5px;\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        .wc-portfolio-pagination .page-numbers.current {\r\n            background-color: var(--btn-accented-bgcolor, rgb(2, 91, 123));\r\n            color: #fff;\r\n        }\r\n        \r\n        .wc-portfolio-pagination .page-numbers:hover:not(.current) {\r\n            background-color: #e0e0e0;\r\n        }\r\n        \r\n        \/* Single Product Styles *\/\r\n        .wc-portfolio-single-wrapper {\r\n            animation: fadeIn 0.3s ease;\r\n        }\r\n        \r\n        @keyframes fadeIn {\r\n            from { opacity: 0; transform: translateY(20px); }\r\n            to { opacity: 1; transform: translateY(0); }\r\n        }\r\n        \r\n        .wc-portfolio-single {\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr;\r\n            gap: 50px;\r\n            margin-bottom: 60px;\r\n        }\r\n        \r\n        .wc-portfolio-gallery__main {\r\n            margin-bottom: 20px;\r\n            border-radius: 12px;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        .wc-portfolio-gallery__main img {\r\n            width: 100%;\r\n            height: auto;\r\n            display: block;\r\n        }\r\n        \r\n        .wc-portfolio-gallery__thumbnails {\r\n            display: grid;\r\n            grid-template-columns: repeat(4, 1fr);\r\n            gap: 10px;\r\n        }\r\n        \r\n        .wc-portfolio-gallery__thumbnail {\r\n            cursor: pointer;\r\n            border-radius: 8px;\r\n            overflow: hidden;\r\n            transition: opacity 0.3s ease;\r\n        }\r\n        \r\n        .wc-portfolio-gallery__thumbnail:hover {\r\n            opacity: 0.8;\r\n        }\r\n        \r\n        .wc-portfolio-gallery__thumbnail img {\r\n            width: 100%;\r\n            height: auto;\r\n            display: block;\r\n        }\r\n        \r\n        .wc-portfolio-single__title {\r\n            font-family: var(--wd-title-font);\r\n            font-weight: var(--wd-title-font-weight);\r\n            color: var(--wd-title-color);\r\n            margin-bottom: 20px;\r\n            font-size: 32px;\r\n        }\r\n        \r\n        .wc-portfolio-single__short-description h3,\r\n        .wc-portfolio-single__description h3 {\r\n            font-family: var(--wd-title-font);\r\n            font-weight: 500;\r\n            color: var(--wd-title-color);\r\n            margin-top: 25px;\r\n            margin-bottom: 15px;\r\n            font-size: 20px;\r\n        }\r\n        \r\n        .wc-portfolio-single__short-description,\r\n        .wc-portfolio-single__description {\r\n            font-family: var(--wd-text-font);\r\n            font-weight: var(--wd-text-font-weight);\r\n            color: var(--wd-text-color);\r\n            font-size: var(--wd-text-font-size);\r\n            line-height: 1.6;\r\n        }\r\n        \r\n        .wc-portfolio-single__meta {\r\n            margin-top: 30px;\r\n            padding-top: 20px;\r\n            border-top: 1px solid #eee;\r\n        }\r\n        \r\n        .wc-portfolio-meta-item {\r\n            margin-bottom: 10px;\r\n            font-size: 14px;\r\n        }\r\n        \r\n        .wc-portfolio-meta-item a {\r\n            color: var(--wd-primary-color);\r\n            text-decoration: none;\r\n        }\r\n        \r\n        .wc-portfolio-meta-item a:hover {\r\n            text-decoration: underline;\r\n        }\r\n        \r\n        .wc-portfolio-navigation {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            padding-top: 40px;\r\n            margin-top: 40px;\r\n            border-top: 1px solid #eee;\r\n        }\r\n        \r\n        .wc-portfolio-nav {\r\n            padding: 10px 20px;\r\n            background-color: var(--btn-default-bgcolor, #f7f7f7);\r\n            color: #333;\r\n            text-decoration: none;\r\n            border-radius: 6px;\r\n            transition: all 0.3s ease;\r\n            font-family: var(--wd-text-font);\r\n            max-width: 45%;\r\n            overflow: hidden;\r\n            text-overflow: ellipsis;\r\n            white-space: nowrap;\r\n        }\r\n        \r\n        .wc-portfolio-nav:hover {\r\n            background-color: var(--btn-accented-bgcolor, rgb(2, 91, 123));\r\n            color: #fff;\r\n        }\r\n        \r\n        .wc-portfolio-nav--disabled {\r\n            visibility: hidden;\r\n        }\r\n        \r\n        .wc-portfolio-single__image-placeholder {\r\n            aspect-ratio: 1 \/ 1;\r\n            background: #f5f5f5;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            border-radius: 12px;\r\n            color: #999;\r\n        }\r\n        \r\n        .wc-portfolio-no-products {\r\n            text-align: center;\r\n            padding: 40px;\r\n            font-size: 18px;\r\n            color: #999;\r\n        }\r\n        \r\n        \/* Responsive *\/\r\n        @media (max-width: 992px) {\r\n            .wc-portfolio-grid__wrapper {\r\n                gap: 20px;\r\n            }\r\n            \r\n            .wc-portfolio-single {\r\n                grid-template-columns: repeat(1, 1fr);\r\n                gap: 30px;\r\n            }\r\n        }\r\n        \r\n        @media (max-width: 768px) {\r\n            .wc-portfolio-navigation {\r\n                flex-direction: column;\r\n                gap: 15px;\r\n            }\r\n            \r\n            .wc-portfolio-nav {\r\n                max-width: 100%;\r\n                width: 100%;\r\n                text-align: center;\r\n            }\r\n        }\r\n        \r\n        @media (max-width: 576px) {\r\n            .wc-portfolio-grid__wrapper {\r\n                grid-template-columns: repeat(2, 1fr) !important;\r\n            }\r\n        }\r\n        <\/style>\r\n        \r\n        <script>\r\n        \/\/ Gallery thumbnail functionality\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            const thumbnails = document.querySelectorAll('.wc-portfolio-gallery__thumbnail');\r\n            const mainImage = document.querySelector('.wc-portfolio-gallery__main img');\r\n            \r\n            if (thumbnails.length && mainImage) {\r\n                thumbnails.forEach(thumb => {\r\n                    thumb.addEventListener('click', function() {\r\n                        const fullImageUrl = this.getAttribute('data-full-image');\r\n                        if (fullImageUrl) {\r\n                            mainImage.src = fullImageUrl;\r\n                        }\r\n                    });\r\n                });\r\n            }\r\n        });\r\n        <\/script>\r\n                <div class=\"wc-portfolio-container\">\r\n            <!-- Categories Filter -->\r\n                        \r\n                    <div class=\"wc-portfolio-grid\" data-columns=\"4\">\r\n                            <p class=\"wc-portfolio-no-products\">No products found in this category.<\/p>\r\n                                <\/div>\r\n                <\/div>\r\n        \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-29837","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dev.shami-co.com\/en\/wp-json\/wp\/v2\/pages\/29837","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.shami-co.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dev.shami-co.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dev.shami-co.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.shami-co.com\/en\/wp-json\/wp\/v2\/comments?post=29837"}],"version-history":[{"count":1,"href":"https:\/\/dev.shami-co.com\/en\/wp-json\/wp\/v2\/pages\/29837\/revisions"}],"predecessor-version":[{"id":29838,"href":"https:\/\/dev.shami-co.com\/en\/wp-json\/wp\/v2\/pages\/29837\/revisions\/29838"}],"wp:attachment":[{"href":"https:\/\/dev.shami-co.com\/en\/wp-json\/wp\/v2\/media?parent=29837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}