SS Group - Edible Oil Slider<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Roboto+Slab:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');\r\n\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Roboto Slab', serif;\r\n overflow-x: hidden;\r\n background-color: #111;\r\n }\r\n\r\n .slider-container {\r\n position: relative;\r\n width: 100%;\r\n display: flex;\r\n height: 100vh;\r\n overflow: hidden;\r\n align-items: flex-end;\r\n justify-content: center;\r\n }\r\n\r\n .slide {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n opacity: 0;\r\n transition: opacity 1s ease-in-out;\r\n }\r\n\r\n .slide.active {\r\n opacity: 1;\r\n }\r\n\r\n .slide.active .slide-bg {\r\n animation: kenBurns 8s ease-out forwards;\r\n }\r\n\r\n @keyframes kenBurns {\r\n 0% {\r\n transform: scale(1);\r\n }\r\n\r\n 100% {\r\n transform: scale(1.1);\r\n }\r\n }\r\n\r\n .slide-bg {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n background-size: cover;\r\n background-position: center;\r\n filter: brightness(0.6);\r\n }\r\n\r\n .slide-1 .slide-bg {\r\n background-image: url('https:\/\/ssgroup.pk\/wp-content\/uploads\/2025\/11\/group.webp');\r\n }\r\n\r\n .slide-2 .slide-bg {\r\n background-image: url('https:\/\/images.unsplash.com\/photo-1474979216324-5d33e3faa776?w=1920&q=80');\r\n }\r\n\r\n .slide-3 .slide-bg {\r\n background-image: url('https:\/\/images.unsplash.com\/photo-1536304929831-f145847e2b94?w=1920&q=80');\r\n }\r\n\r\n .slide-content {\r\n position: relative;\r\n height: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: flex-start;\r\n \/* Align left *\/\r\n text-align: left;\r\n padding-left: 15%;\r\n \/* Push content to the right slightly *\/\r\n padding-right: 10%;\r\n z-index: 2;\r\n }\r\n\r\n .logo {\r\n position: absolute;\r\n top: 40px;\r\n left: 40px;\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n color: white;\r\n font-size: 20px;\r\n font-weight: 700;\r\n z-index: 10;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .logo-icon {\r\n font-size: 30px;\r\n color: #fff;\r\n }\r\n\r\n \/* Global Progress Bar *\/\r\n .slide-progress {\r\n position: absolute;\r\n left: 50px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 20px;\r\n z-index: 20;\r\n }\r\n\r\n .slide-progress span {\r\n color: white;\r\n font-size: 16px;\r\n font-weight: 600;\r\n }\r\n\r\n .slide-progress .line-container {\r\n width: 2px;\r\n height: 150px;\r\n background: rgba(255, 255, 255, 0.2);\r\n position: relative;\r\n border-radius: 2px;\r\n overflow: hidden;\r\n }\r\n\r\n .slide-progress .line-fill {\r\n position: absolute;\r\n top: 0;\r\n \/* Changed to top: 0 for downward fill *\/\r\n left: 0;\r\n width: 100%;\r\n height: 0%;\r\n background: #a37802;\r\n transition: height 0.5s ease-in-out;\r\n }\r\n\r\n \/* Main Typography *\/\r\n .main-title {\r\n color: transparent;\r\n -webkit-text-stroke: 2px #fff;\r\n font-size: 90px;\r\n font-weight: 700;\r\n line-height: 1.1;\r\n margin-bottom: 10px;\r\n font-family: 'Roboto Slab', serif;\r\n }\r\n\r\n .main-title .highlight {\r\n color: transparent;\r\n -webkit-text-stroke: 2px #fff;\r\n }\r\n\r\n .subtitle {\r\n color: white;\r\n font-size: 60px;\r\n font-weight: 700;\r\n margin-bottom: 50px;\r\n line-height: 1.2;\r\n font-family: 'Roboto Slab', serif;\r\n }\r\n\r\n \/* Description Box Layout *\/\r\n .description-box {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 60px;\r\n max-width: 1000px;\r\n }\r\n\r\n .know-more-btn {\r\n color: #fff;\r\n font-size: 20px;\r\n font-weight: 700;\r\n text-decoration: none;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n white-space: nowrap;\r\n margin-top: 5px;\r\n \/* Align with text top *\/\r\n font-family: 'Roboto Slab', serif;\r\n }\r\n\r\n .know-more-btn:hover {\r\n color: #a37802;\r\n }\r\n\r\n .description {\r\n color: rgba(255, 255, 255, 0.9);\r\n font-size: 16px;\r\n line-height: 1.6;\r\n max-width: 500px;\r\n font-weight: 400;\r\n font-family: 'Roboto', sans-serif;\r\n }\r\n\r\n .description .highlight-text {\r\n font-weight: 700;\r\n color: #fff;\r\n }\r\n\r\n \/* Bottom Bar *\/\r\n .bottom-bar {\r\n position: absolute;\r\n bottom: 0;\r\n width: 75%;\r\n height: 100px;\r\n background: #000;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 0 50px;\r\n z-index: 20;\r\n }\r\n\r\n .nav-arrows {\r\n display: flex;\r\n gap: 40px;\r\n }\r\n\r\n .nav-arrow {\r\n color: white;\r\n font-size: 18px;\r\n cursor: pointer;\r\n transition: color 0.3s;\r\n }\r\n\r\n .nav-arrow:hover {\r\n color: #a37802;\r\n }\r\n\r\n .social-icons {\r\n display: flex;\r\n gap: 30px;\r\n }\r\n\r\n .social-icon {\r\n color: white;\r\n font-size: 16px;\r\n cursor: pointer;\r\n transition: color 0.3s;\r\n }\r\n\r\n .social-icon:hover {\r\n color: #a37802;\r\n }\r\n\r\n \/* Side Text *\/\r\n .side-text {\r\n position: absolute;\r\n right: -60px;\r\n top: 50%;\r\n transform: translateY(-50%) rotate(-90deg);\r\n \/* Rotated correctly *\/\r\n color: rgba(255, 255, 255, 0.5);\r\n font-size: 12px;\r\n letter-spacing: 4px;\r\n text-transform: uppercase;\r\n z-index: 10;\r\n white-space: nowrap;\r\n text-decoration: none;\r\n transition: color 0.3s;\r\n font-family: 'Roboto Slab', serif;\r\n }\r\n\r\n .side-text:hover {\r\n color: #a37802;\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 1024px) {\r\n .main-title {\r\n font-size: 60px;\r\n }\r\n\r\n .subtitle {\r\n font-size: 40px;\r\n }\r\n\r\n .slide-content {\r\n padding-left: 100px;\r\n }\r\n\r\n .description-box {\r\n flex-direction: column;\r\n gap: 20px;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .slide-content {\r\n padding: 0 30px;\r\n align-items: flex-start;\r\n text-align: left;\r\n }\r\n\r\n .main-title {\r\n font-size: 40px;\r\n -webkit-text-stroke: 1px #fff;\r\n }\r\n\r\n .subtitle {\r\n font-size: 30px;\r\n }\r\n\r\n .description-box {\r\n align-items: flex-start;\r\n text-align: left;\r\n }\r\n\r\n .slide-progress,\r\n .side-text {\r\n display: none;\r\n }\r\n\r\n .bottom-bar {\r\n padding: 0 20px;\r\n width: 100%;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div class=\"slider-container\">\r\n \r\n <div class=\"logo\">\r\n <div class=\"logo-icon\">\r\n <a href=\"https:\/\/ssgroup.pk\/\"><img decoding=\"async\"\r\n src=\"https:\/\/ssgroup.pk\/wp-content\/uploads\/2024\/12\/site_logo.png.webp\" alt=\"\"><\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide-progress\">\r\n <span id=\"current-slide-num\">001<\/span>\r\n <div class=\"line-container\">\r\n <div class=\"line-fill\" id=\"progress-fill\"><\/div>\r\n <\/div>\r\n <span id=\"total-slide-num\">011<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide active slide-1\">\r\n <div class=\"slide-bg\"><\/div>\r\n <div class=\"slide-content\">\r\n <h1 class=\"main-title\">Spread Across Sectors<\/h1>\r\n <h2 class=\"subtitle\">Aligned by Purpose<\/h2>\r\n <div class=\"description-box\">\r\n <a href=\"https:\/\/ssgroup.pk\/corporate\/\" class=\"know-more-btn\">Know More <i\r\n class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <p class=\"description\">With strategic holdings in agriculture, textiles, edible oil, technology,\r\n real estate, and global markets, SS Group transforms fundamental industries into future-facing\r\n ecosystems. Every venture is guided by a singular philosophy: to turn essential inputs into\r\n intelligent, scalable outcomes \u2013 from <b>Soil to Solutions.<\/b>\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide slide-2\">\r\n <div class=\"slide-bg\"><\/div>\r\n <div class=\"slide-content\">\r\n <h1 class=\"main-title\">Pure <span class=\"highlight\">Ingredients.<\/span><\/h1>\r\n <h2 class=\"subtitle\">Quality You Can Taste<\/h2>\r\n <div class=\"description-box\">\r\n <a href=\"#\" class=\"know-more-btn\">Know More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <p class=\"description\">\r\n From farm to table, we ensure the highest standards. Our edible oils\r\n are processed with care to preserve natural nutrients and deliver\r\n exceptional flavor in every bottle.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide slide-3\">\r\n <div class=\"slide-bg\"><\/div>\r\n <div class=\"slide-content\">\r\n <h1 class=\"main-title\">Excellence in <span class=\"highlight\">Every Bottle.<\/span><\/h1>\r\n <h2 class=\"subtitle\">Tradition Meets Innovation<\/h2>\r\n <div class=\"description-box\">\r\n <a href=\"#\" class=\"know-more-btn\">Know More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <p class=\"description\">\r\n Combining time-honored practices with modern technology, we create\r\n edible oils that meet international standards while maintaining\r\n the authentic taste your family loves.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide slide-1\">\r\n <div class=\"slide-bg\"><\/div>\r\n <div class=\"slide-content\">\r\n <h1 class=\"main-title\">Sustainable <span class=\"highlight\">Future.<\/span><\/h1>\r\n <h2 class=\"subtitle\">Growing Together<\/h2>\r\n <div class=\"description-box\">\r\n <a href=\"#\" class=\"know-more-btn\">Know More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <p class=\"description\">\r\n We are committed to sustainable farming practices that protect our environment\r\n while yielding the highest quality crops for our products.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide slide-2\">\r\n <div class=\"slide-bg\"><\/div>\r\n <div class=\"slide-content\">\r\n <h1 class=\"main-title\">Global <span class=\"highlight\">Reach.<\/span><\/h1>\r\n <h2 class=\"subtitle\">Local Roots<\/h2>\r\n <div class=\"description-box\">\r\n <a href=\"#\" class=\"know-more-btn\">Know More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <p class=\"description\">\r\n Connecting local farmers with global markets, we bridge the gap\r\n to bring the best of our land to the world.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide slide-3\">\r\n <div class=\"slide-bg\"><\/div>\r\n <div class=\"slide-content\">\r\n <h1 class=\"main-title\">Innovation <span class=\"highlight\">First.<\/span><\/h1>\r\n <h2 class=\"subtitle\">Leading the Way<\/h2>\r\n <div class=\"description-box\">\r\n <a href=\"#\" class=\"know-more-btn\">Know More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <p class=\"description\">\r\n Pioneering new technologies in agriculture and processing to ensure\r\n efficiency and quality in every step of the supply chain.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide slide-1\">\r\n <div class=\"slide-bg\"><\/div>\r\n <div class=\"slide-content\">\r\n <h1 class=\"main-title\">Community <span class=\"highlight\">Focus.<\/span><\/h1>\r\n <h2 class=\"subtitle\">Empowering People<\/h2>\r\n <div class=\"description-box\">\r\n <a href=\"#\" class=\"know-more-btn\">Know More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <p class=\"description\">\r\n Our success is built on the strength of our communities. We invest\r\n in people to create a brighter future for everyone.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide slide-2\">\r\n <div class=\"slide-bg\"><\/div>\r\n <div class=\"slide-content\">\r\n <h1 class=\"main-title\">Trusted <span class=\"highlight\">Quality.<\/span><\/h1>\r\n <h2 class=\"subtitle\">Certified Excellence<\/h2>\r\n <div class=\"description-box\">\r\n <a href=\"#\" class=\"know-more-btn\">Know More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <p class=\"description\">\r\n Every product undergoes rigorous testing to meet international safety\r\n and quality standards you can rely on.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide slide-3\">\r\n <div class=\"slide-bg\"><\/div>\r\n <div class=\"slide-content\">\r\n <h1 class=\"main-title\">Nature's <span class=\"highlight\">Best.<\/span><\/h1>\r\n <h2 class=\"subtitle\">Pure & Simple<\/h2>\r\n <div class=\"description-box\">\r\n <a href=\"#\" class=\"know-more-btn\">Know More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <p class=\"description\">\r\n Harnessing the power of nature to provide wholesome, nutritious\r\n products for your family's well-being.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide slide-1\">\r\n <div class=\"slide-bg\"><\/div>\r\n <div class=\"slide-content\">\r\n <h1 class=\"main-title\">Visionary <span class=\"highlight\">Growth.<\/span><\/h1>\r\n <h2 class=\"subtitle\">Expanding Horizons<\/h2>\r\n <div class=\"description-box\">\r\n <a href=\"#\" class=\"know-more-btn\">Know More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <p class=\"description\">\r\n Constantly evolving and expanding into new sectors to create a\r\n diversified and resilient portfolio for the future.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide slide-2\">\r\n <div class=\"slide-bg\"><\/div>\r\n <div class=\"slide-content\">\r\n <h1 class=\"main-title\">Legacy of <span class=\"highlight\">Trust.<\/span><\/h1>\r\n <h2 class=\"subtitle\">Since Day One<\/h2>\r\n <div class=\"description-box\">\r\n <a href=\"#\" class=\"know-more-btn\">Know More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <p class=\"description\">\r\n Building on decades of experience and integrity to deliver\r\n value and trust in every interaction.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <a href=\"#\" class=\"side-text\">LET'S DISCUSS POSSIBILITIES<\/a>\r\n\r\n \r\n <div class=\"bottom-bar\">\r\n <div class=\"nav-arrows\">\r\n <i class=\"fas fa-chevron-up nav-arrow\" id=\"prevBtn\"><\/i>\r\n <i class=\"fas fa-chevron-down nav-arrow\" id=\"nextBtn\"><\/i>\r\n <\/div>\r\n <div class=\"social-icons\">\r\n <i class=\"fab fa-facebook-f social-icon\"><\/i>\r\n <i class=\"fab fa-instagram social-icon\"><\/i>\r\n <i class=\"fab fa-youtube social-icon\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n let currentSlide = 0;\r\n const slides = document.querySelectorAll('.slide');\r\n const totalSlides = slides.length;\r\n\r\n const currentSlideNum = document.getElementById('current-slide-num');\r\n const totalSlideNum = document.getElementById('total-slide-num');\r\n const progressFill = document.getElementById('progress-fill');\r\n\r\n totalSlideNum.textContent = String(totalSlides).padStart(3, '0');\r\n\r\n let autoPlayInterval;\r\n\r\n function updateProgress() {\r\n \/\/ Update number text\r\n currentSlideNum.textContent = String(currentSlide + 1).padStart(3, '0');\r\n\r\n \/\/ Update progress bar height\r\n \/\/ Logic: (currentSlide + 1) \/ totalSlides * 100%\r\n const progressPercentage = ((currentSlide + 1) \/ totalSlides) * 100;\r\n progressFill.style.height = `${progressPercentage}%`;\r\n }\r\n\r\n function showSlide(index) {\r\n slides.forEach(slide => {\r\n slide.classList.remove('active');\r\n });\r\n\r\n currentSlide = (index + totalSlides) % totalSlides;\r\n slides[currentSlide].classList.add('active');\r\n\r\n updateProgress();\r\n }\r\n\r\n function nextSlide() {\r\n showSlide(currentSlide + 1);\r\n resetAutoPlay();\r\n }\r\n\r\n function prevSlide() {\r\n showSlide(currentSlide - 1);\r\n resetAutoPlay();\r\n }\r\n\r\n function startAutoPlay() {\r\n autoPlayInterval = setInterval(nextSlide, 8000);\r\n }\r\n\r\n function resetAutoPlay() {\r\n clearInterval(autoPlayInterval);\r\n startAutoPlay();\r\n }\r\n\r\n \/\/ Event Listeners\r\n document.getElementById('nextBtn').addEventListener('click', nextSlide);\r\n document.getElementById('prevBtn').addEventListener('click', prevSlide);\r\n\r\n \/\/ Keyboard navigation\r\n document.addEventListener('keydown', (e) => {\r\n if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\r\n nextSlide();\r\n } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\r\n prevSlide();\r\n }\r\n });\r\n\r\n \/\/ Touch swipe support\r\n let touchStartY = 0;\r\n let touchEndY = 0;\r\n\r\n document.addEventListener('touchstart', (e) => {\r\n touchStartY = e.changedTouches[0].screenY;\r\n });\r\n\r\n document.addEventListener('touchend', (e) => {\r\n touchEndY = e.changedTouches[0].screenY;\r\n handleSwipe();\r\n });\r\n\r\n function handleSwipe() {\r\n if (touchStartY - touchEndY > 50) {\r\n nextSlide();\r\n }\r\n if (touchEndY - touchStartY > 50) {\r\n prevSlide();\r\n }\r\n }\r\n\r\n \/\/ Initialize\r\n updateProgress();\r\n startAutoPlay();\r\n <\/script>\r\n<\/body>\r\n\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<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>SS Group – Edible Oil Slider 001 011 Spread Across Sectors Aligned by Purpose Know More With strategic holdings in agriculture, textiles, edible oil, technology, real estate, and global markets, SS Group transforms fundamental industries into future-facing ecosystems. Every venture is guided by a singular philosophy: to turn essential inputs into intelligent, scalable outcomes \u2013 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"..\/public\/views\/revslider-page-template.php","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-8120","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/evpk.live\/ssgroup\/wp-json\/wp\/v2\/pages\/8120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/evpk.live\/ssgroup\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/evpk.live\/ssgroup\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/evpk.live\/ssgroup\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/evpk.live\/ssgroup\/wp-json\/wp\/v2\/comments?post=8120"}],"version-history":[{"count":18,"href":"https:\/\/evpk.live\/ssgroup\/wp-json\/wp\/v2\/pages\/8120\/revisions"}],"predecessor-version":[{"id":10094,"href":"https:\/\/evpk.live\/ssgroup\/wp-json\/wp\/v2\/pages\/8120\/revisions\/10094"}],"wp:attachment":[{"href":"https:\/\/evpk.live\/ssgroup\/wp-json\/wp\/v2\/media?parent=8120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n \r\n \r\n SS Group - Edible Oil Slider<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Roboto+Slab:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');\r\n\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Roboto Slab', serif;\r\n overflow-x: hidden;\r\n background-color: #111;\r\n }\r\n\r\n .slider-container {\r\n position: relative;\r\n width: 100%;\r\n display: flex;\r\n height: 100vh;\r\n overflow: hidden;\r\n align-items: flex-end;\r\n justify-content: center;\r\n }\r\n\r\n .slide {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n opacity: 0;\r\n transition: opacity 1s ease-in-out;\r\n }\r\n\r\n .slide.active {\r\n opacity: 1;\r\n }\r\n\r\n .slide.active .slide-bg {\r\n animation: kenBurns 8s ease-out forwards;\r\n }\r\n\r\n @keyframes kenBurns {\r\n 0% {\r\n transform: scale(1);\r\n }\r\n\r\n 100% {\r\n transform: scale(1.1);\r\n }\r\n }\r\n\r\n .slide-bg {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n background-size: cover;\r\n background-position: center;\r\n filter: brightness(0.6);\r\n }\r\n\r\n .slide-1 .slide-bg {\r\n background-image: url('https:\/\/ssgroup.pk\/wp-content\/uploads\/2025\/11\/group.webp');\r\n }\r\n\r\n .slide-2 .slide-bg {\r\n background-image: url('https:\/\/images.unsplash.com\/photo-1474979216324-5d33e3faa776?w=1920&q=80');\r\n }\r\n\r\n .slide-3 .slide-bg {\r\n background-image: url('https:\/\/images.unsplash.com\/photo-1536304929831-f145847e2b94?w=1920&q=80');\r\n }\r\n\r\n .slide-content {\r\n position: relative;\r\n height: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: flex-start;\r\n \/* Align left *\/\r\n text-align: left;\r\n padding-left: 15%;\r\n \/* Push content to the right slightly *\/\r\n padding-right: 10%;\r\n z-index: 2;\r\n }\r\n\r\n .logo {\r\n position: absolute;\r\n top: 40px;\r\n left: 40px;\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n color: white;\r\n font-size: 20px;\r\n font-weight: 700;\r\n z-index: 10;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .logo-icon {\r\n font-size: 30px;\r\n color: #fff;\r\n }\r\n\r\n \/* Global Progress Bar *\/\r\n .slide-progress {\r\n position: absolute;\r\n left: 50px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 20px;\r\n z-index: 20;\r\n }\r\n\r\n .slide-progress span {\r\n color: white;\r\n font-size: 16px;\r\n font-weight: 600;\r\n }\r\n\r\n .slide-progress .line-container {\r\n width: 2px;\r\n height: 150px;\r\n background: rgba(255, 255, 255, 0.2);\r\n position: relative;\r\n border-radius: 2px;\r\n overflow: hidden;\r\n }\r\n\r\n .slide-progress .line-fill {\r\n position: absolute;\r\n top: 0;\r\n \/* Changed to top: 0 for downward fill *\/\r\n left: 0;\r\n width: 100%;\r\n height: 0%;\r\n background: #a37802;\r\n transition: height 0.5s ease-in-out;\r\n }\r\n\r\n \/* Main Typography *\/\r\n .main-title {\r\n color: transparent;\r\n -webkit-text-stroke: 2px #fff;\r\n font-size: 90px;\r\n font-weight: 700;\r\n line-height: 1.1;\r\n margin-bottom: 10px;\r\n font-family: 'Roboto Slab', serif;\r\n }\r\n\r\n .main-title .highlight {\r\n color: transparent;\r\n -webkit-text-stroke: 2px #fff;\r\n }\r\n\r\n .subtitle {\r\n color: white;\r\n font-size: 60px;\r\n font-weight: 700;\r\n margin-bottom: 50px;\r\n line-height: 1.2;\r\n font-family: 'Roboto Slab', serif;\r\n }\r\n\r\n \/* Description Box Layout *\/\r\n .description-box {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 60px;\r\n max-width: 1000px;\r\n }\r\n\r\n .know-more-btn {\r\n color: #fff;\r\n font-size: 20px;\r\n font-weight: 700;\r\n text-decoration: none;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n white-space: nowrap;\r\n margin-top: 5px;\r\n \/* Align with text top *\/\r\n font-family: 'Roboto Slab', serif;\r\n }\r\n\r\n .know-more-btn:hover {\r\n color: #a37802;\r\n }\r\n\r\n .description {\r\n color: rgba(255, 255, 255, 0.9);\r\n font-size: 16px;\r\n line-height: 1.6;\r\n max-width: 500px;\r\n font-weight: 400;\r\n font-family: 'Roboto', sans-serif;\r\n }\r\n\r\n .description .highlight-text {\r\n font-weight: 700;\r\n color: #fff;\r\n }\r\n\r\n \/* Bottom Bar *\/\r\n .bottom-bar {\r\n position: absolute;\r\n bottom: 0;\r\n width: 75%;\r\n height: 100px;\r\n background: #000;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 0 50px;\r\n z-index: 20;\r\n }\r\n\r\n .nav-arrows {\r\n display: flex;\r\n gap: 40px;\r\n }\r\n\r\n .nav-arrow {\r\n color: white;\r\n font-size: 18px;\r\n cursor: pointer;\r\n transition: color 0.3s;\r\n }\r\n\r\n .nav-arrow:hover {\r\n color: #a37802;\r\n }\r\n\r\n .social-icons {\r\n display: flex;\r\n gap: 30px;\r\n }\r\n\r\n .social-icon {\r\n color: white;\r\n font-size: 16px;\r\n cursor: pointer;\r\n transition: color 0.3s;\r\n }\r\n\r\n .social-icon:hover {\r\n color: #a37802;\r\n }\r\n\r\n \/* Side Text *\/\r\n .side-text {\r\n position: absolute;\r\n right: -60px;\r\n top: 50%;\r\n transform: translateY(-50%) rotate(-90deg);\r\n \/* Rotated correctly *\/\r\n color: rgba(255, 255, 255, 0.5);\r\n font-size: 12px;\r\n letter-spacing: 4px;\r\n text-transform: uppercase;\r\n z-index: 10;\r\n white-space: nowrap;\r\n text-decoration: none;\r\n transition: color 0.3s;\r\n font-family: 'Roboto Slab', serif;\r\n }\r\n\r\n .side-text:hover {\r\n color: #a37802;\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 1024px) {\r\n .main-title {\r\n font-size: 60px;\r\n }\r\n\r\n .subtitle {\r\n font-size: 40px;\r\n }\r\n\r\n .slide-content {\r\n padding-left: 100px;\r\n }\r\n\r\n .description-box {\r\n flex-direction: column;\r\n gap: 20px;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .slide-content {\r\n padding: 0 30px;\r\n align-items: flex-start;\r\n text-align: left;\r\n }\r\n\r\n .main-title {\r\n font-size: 40px;\r\n -webkit-text-stroke: 1px #fff;\r\n }\r\n\r\n .subtitle {\r\n font-size: 30px;\r\n }\r\n\r\n .description-box {\r\n align-items: flex-start;\r\n text-align: left;\r\n }\r\n\r\n .slide-progress,\r\n .side-text {\r\n display: none;\r\n }\r\n\r\n .bottom-bar {\r\n padding: 0 20px;\r\n width: 100%;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div class=\"slider-container\">\r\n \r\n <div class=\"logo\">\r\n <div class=\"logo-icon\">\r\n <a href=\"https:\/\/ssgroup.pk\/\"><img decoding=\"async\"\r\n src=\"https:\/\/ssgroup.pk\/wp-content\/uploads\/2024\/12\/site_logo.png.webp\" alt=\"\"><\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide-progress\">\r\n <span id=\"current-slide-num\">001<\/span>\r\n <div class=\"line-container\">\r\n <div class=\"line-fill\" id=\"progress-fill\"><\/div>\r\n <\/div>\r\n <span id=\"total-slide-num\">011<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide active slide-1\">\r\n <div class=\"slide-bg\"><\/div>\r\n <div class=\"slide-content\">\r\n <h1 class=\"main-title\">Spread Across Sectors<\/h1>\r\n <h2 class=\"subtitle\">Aligned by Purpose<\/h2>\r\n <div class=\"description-box\">\r\n <a href=\"https:\/\/ssgroup.pk\/corporate\/\" class=\"know-more-btn\">Know More <i\r\n class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <p class=\"description\">With strategic holdings in agriculture, textiles, edible oil, technology,\r\n real estate, and global markets, SS Group transforms fundamental industries into future-facing\r\n ecosystems. Every venture is guided by a singular philosophy: to turn essential inputs into\r\n intelligent, scalable outcomes \u2013 from <b>Soil to Solutions.<\/b>\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide slide-2\">\r\n <div class=\"slide-bg\"><\/div>\r\n <div class=\"slide-content\">\r\n <h1 class=\"main-title\">Pure <span class=\"highlight\">Ingredients.<\/span><\/h1>\r\n <h2 class=\"subtitle\">Quality You Can Taste<\/h2>\r\n <div class=\"description-box\">\r\n <a href=\"#\" class=\"know-more-btn\">Know More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <p class=\"description\">\r\n From farm to table, we ensure the highest standards. Our edible oils\r\n are processed with care to preserve natural nutrients and deliver\r\n exceptional flavor in every bottle.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide slide-3\">\r\n <div class=\"slide-bg\"><\/div>\r\n <div class=\"slide-content\">\r\n <h1 class=\"main-title\">Excellence in <span class=\"highlight\">Every Bottle.<\/span><\/h1>\r\n <h2 class=\"subtitle\">Tradition Meets Innovation<\/h2>\r\n <div class=\"description-box\">\r\n <a href=\"#\" class=\"know-more-btn\">Know More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <p class=\"description\">\r\n Combining time-honored practices with modern technology, we create\r\n edible oils that meet international standards while maintaining\r\n the authentic taste your family loves.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide slide-1\">\r\n <div class=\"slide-bg\"><\/div>\r\n <div class=\"slide-content\">\r\n <h1 class=\"main-title\">Sustainable <span class=\"highlight\">Future.<\/span><\/h1>\r\n <h2 class=\"subtitle\">Growing Together<\/h2>\r\n <div class=\"description-box\">\r\n <a href=\"#\" class=\"know-more-btn\">Know More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <p class=\"description\">\r\n We are committed to sustainable farming practices that protect our environment\r\n while yielding the highest quality crops for our products.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide slide-2\">\r\n <div class=\"slide-bg\"><\/div>\r\n <div class=\"slide-content\">\r\n <h1 class=\"main-title\">Global <span class=\"highlight\">Reach.<\/span><\/h1>\r\n <h2 class=\"subtitle\">Local Roots<\/h2>\r\n <div class=\"description-box\">\r\n <a href=\"#\" class=\"know-more-btn\">Know More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <p class=\"description\">\r\n Connecting local farmers with global markets, we bridge the gap\r\n to bring the best of our land to the world.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide slide-3\">\r\n <div class=\"slide-bg\"><\/div>\r\n <div class=\"slide-content\">\r\n <h1 class=\"main-title\">Innovation <span class=\"highlight\">First.<\/span><\/h1>\r\n <h2 class=\"subtitle\">Leading the Way<\/h2>\r\n <div class=\"description-box\">\r\n <a href=\"#\" class=\"know-more-btn\">Know More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <p class=\"description\">\r\n Pioneering new technologies in agriculture and processing to ensure\r\n efficiency and quality in every step of the supply chain.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide slide-1\">\r\n <div class=\"slide-bg\"><\/div>\r\n <div class=\"slide-content\">\r\n <h1 class=\"main-title\">Community <span class=\"highlight\">Focus.<\/span><\/h1>\r\n <h2 class=\"subtitle\">Empowering People<\/h2>\r\n <div class=\"description-box\">\r\n <a href=\"#\" class=\"know-more-btn\">Know More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <p class=\"description\">\r\n Our success is built on the strength of our communities. We invest\r\n in people to create a brighter future for everyone.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide slide-2\">\r\n <div class=\"slide-bg\"><\/div>\r\n <div class=\"slide-content\">\r\n <h1 class=\"main-title\">Trusted <span class=\"highlight\">Quality.<\/span><\/h1>\r\n <h2 class=\"subtitle\">Certified Excellence<\/h2>\r\n <div class=\"description-box\">\r\n <a href=\"#\" class=\"know-more-btn\">Know More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <p class=\"description\">\r\n Every product undergoes rigorous testing to meet international safety\r\n and quality standards you can rely on.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide slide-3\">\r\n <div class=\"slide-bg\"><\/div>\r\n <div class=\"slide-content\">\r\n <h1 class=\"main-title\">Nature's <span class=\"highlight\">Best.<\/span><\/h1>\r\n <h2 class=\"subtitle\">Pure & Simple<\/h2>\r\n <div class=\"description-box\">\r\n <a href=\"#\" class=\"know-more-btn\">Know More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <p class=\"description\">\r\n Harnessing the power of nature to provide wholesome, nutritious\r\n products for your family's well-being.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide slide-1\">\r\n <div class=\"slide-bg\"><\/div>\r\n <div class=\"slide-content\">\r\n <h1 class=\"main-title\">Visionary <span class=\"highlight\">Growth.<\/span><\/h1>\r\n <h2 class=\"subtitle\">Expanding Horizons<\/h2>\r\n <div class=\"description-box\">\r\n <a href=\"#\" class=\"know-more-btn\">Know More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <p class=\"description\">\r\n Constantly evolving and expanding into new sectors to create a\r\n diversified and resilient portfolio for the future.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"slide slide-2\">\r\n <div class=\"slide-bg\"><\/div>\r\n <div class=\"slide-content\">\r\n <h1 class=\"main-title\">Legacy of <span class=\"highlight\">Trust.<\/span><\/h1>\r\n <h2 class=\"subtitle\">Since Day One<\/h2>\r\n <div class=\"description-box\">\r\n <a href=\"#\" class=\"know-more-btn\">Know More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <p class=\"description\">\r\n Building on decades of experience and integrity to deliver\r\n value and trust in every interaction.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <a href=\"#\" class=\"side-text\">LET'S DISCUSS POSSIBILITIES<\/a>\r\n\r\n \r\n <div class=\"bottom-bar\">\r\n <div class=\"nav-arrows\">\r\n <i class=\"fas fa-chevron-up nav-arrow\" id=\"prevBtn\"><\/i>\r\n <i class=\"fas fa-chevron-down nav-arrow\" id=\"nextBtn\"><\/i>\r\n <\/div>\r\n <div class=\"social-icons\">\r\n <i class=\"fab fa-facebook-f social-icon\"><\/i>\r\n <i class=\"fab fa-instagram social-icon\"><\/i>\r\n <i class=\"fab fa-youtube social-icon\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n let currentSlide = 0;\r\n const slides = document.querySelectorAll('.slide');\r\n const totalSlides = slides.length;\r\n\r\n const currentSlideNum = document.getElementById('current-slide-num');\r\n const totalSlideNum = document.getElementById('total-slide-num');\r\n const progressFill = document.getElementById('progress-fill');\r\n\r\n totalSlideNum.textContent = String(totalSlides).padStart(3, '0');\r\n\r\n let autoPlayInterval;\r\n\r\n function updateProgress() {\r\n \/\/ Update number text\r\n currentSlideNum.textContent = String(currentSlide + 1).padStart(3, '0');\r\n\r\n \/\/ Update progress bar height\r\n \/\/ Logic: (currentSlide + 1) \/ totalSlides * 100%\r\n const progressPercentage = ((currentSlide + 1) \/ totalSlides) * 100;\r\n progressFill.style.height = `${progressPercentage}%`;\r\n }\r\n\r\n function showSlide(index) {\r\n slides.forEach(slide => {\r\n slide.classList.remove('active');\r\n });\r\n\r\n currentSlide = (index + totalSlides) % totalSlides;\r\n slides[currentSlide].classList.add('active');\r\n\r\n updateProgress();\r\n }\r\n\r\n function nextSlide() {\r\n showSlide(currentSlide + 1);\r\n resetAutoPlay();\r\n }\r\n\r\n function prevSlide() {\r\n showSlide(currentSlide - 1);\r\n resetAutoPlay();\r\n }\r\n\r\n function startAutoPlay() {\r\n autoPlayInterval = setInterval(nextSlide, 8000);\r\n }\r\n\r\n function resetAutoPlay() {\r\n clearInterval(autoPlayInterval);\r\n startAutoPlay();\r\n }\r\n\r\n \/\/ Event Listeners\r\n document.getElementById('nextBtn').addEventListener('click', nextSlide);\r\n document.getElementById('prevBtn').addEventListener('click', prevSlide);\r\n\r\n \/\/ Keyboard navigation\r\n document.addEventListener('keydown', (e) => {\r\n if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\r\n nextSlide();\r\n } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\r\n prevSlide();\r\n }\r\n });\r\n\r\n \/\/ Touch swipe support\r\n let touchStartY = 0;\r\n let touchEndY = 0;\r\n\r\n document.addEventListener('touchstart', (e) => {\r\n touchStartY = e.changedTouches[0].screenY;\r\n });\r\n\r\n document.addEventListener('touchend', (e) => {\r\n touchEndY = e.changedTouches[0].screenY;\r\n handleSwipe();\r\n });\r\n\r\n function handleSwipe() {\r\n if (touchStartY - touchEndY > 50) {\r\n nextSlide();\r\n }\r\n if (touchEndY - touchStartY > 50) {\r\n prevSlide();\r\n }\r\n }\r\n\r\n \/\/ Initialize\r\n updateProgress();\r\n startAutoPlay();\r\n <\/script>\r\n<\/body>\r\n\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<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>SS Group – Edible Oil Slider 001 011 Spread Across Sectors Aligned by Purpose Know More With strategic holdings in agriculture, textiles, edible oil, technology, real estate, and global markets, SS Group transforms fundamental industries into future-facing ecosystems. Every venture is guided by a singular philosophy: to turn essential inputs into intelligent, scalable outcomes \u2013 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"..\/public\/views\/revslider-page-template.php","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-8120","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/evpk.live\/ssgroup\/wp-json\/wp\/v2\/pages\/8120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/evpk.live\/ssgroup\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/evpk.live\/ssgroup\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/evpk.live\/ssgroup\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/evpk.live\/ssgroup\/wp-json\/wp\/v2\/comments?post=8120"}],"version-history":[{"count":18,"href":"https:\/\/evpk.live\/ssgroup\/wp-json\/wp\/v2\/pages\/8120\/revisions"}],"predecessor-version":[{"id":10094,"href":"https:\/\/evpk.live\/ssgroup\/wp-json\/wp\/v2\/pages\/8120\/revisions\/10094"}],"wp:attachment":[{"href":"https:\/\/evpk.live\/ssgroup\/wp-json\/wp\/v2\/media?parent=8120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}