Menu \u2014 Verdant (Infrastructure dropdown only, unique classes)<\/title>\r\n\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@400;700&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n<style>\r\n \/* ====== Layout Root ====== *\/\r\n .vgx-header {\r\n display:flex; justify-content:center; align-items:center;\r\n }\r\n nav.vgx-nav {\r\n position:relative;\r\n --vgx-gap: 24px;\r\n }\r\n\r\n \/* ====== Top Row ====== *\/\r\n .vgx-row {\r\n list-style:none; margin:0; padding:0;\r\n display:flex; align-items:center;\r\n }\r\n .vgx-node { position:relative; }\r\n\r\n \/* vertical divider between top-level items *\/\r\n .vgx-node:not(:last-child){\r\n border-right:1px solid rgba(0, 40, 43, .3);\r\n }\r\n\r\n \/* ====== Type + Color ====== *\/\r\n .vgx-link,\r\n .vgx-sublink,\r\n .vgx-toggle {\r\n font-family:\"Host Grotesk\";\r\n font-weight:400;\r\n font-size:16px; line-height:1.35; letter-spacing:0;\r\n text-align:center; color:#00282B;\r\n display:inline-flex; align-items:center; justify-content:center;\r\n vertical-align:middle; text-decoration:none; white-space:nowrap;\r\n padding:0 20px 8px 20px;\r\n background:none; border:0; cursor:pointer;\r\n }\r\n\r\n \/* Hover underline with gap *\/\r\n .vgx-link:hover,\r\n .vgx-sublink:hover,\r\n .vgx-toggle:hover{\r\n text-decoration:underline;\r\n text-decoration-thickness:2px;\r\n text-underline-offset:12px;\r\n text-decoration-skip-ink:auto;\r\n }\r\n\r\n \/* Keep underline ON for current page *\/\r\n .vgx-link[aria-current=\"page\"],\r\n .vgx-sublink[aria-current=\"page\"]{\r\n text-decoration:underline;\r\n text-decoration-thickness:2px;\r\n text-underline-offset:6px;\r\n text-decoration-skip-ink:auto;\r\n }\r\n\r\n \/* Optional keyboard focus ring *\/\r\n .vgx-link:focus-visible,\r\n .vgx-sublink:focus-visible,\r\n .vgx-toggle:focus-visible{\r\n outline:2px solid #00282B; outline-offset:2px;\r\n text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px;\r\n }\r\n\r\n \/* ====== Dropdown (Infrastructure ONLY) ====== *\/\r\n .vgx-has-fly { position:relative; }\r\n\r\n \/* caret triangle *\/\r\n .vgx-caret{\r\n width:0; height:0; margin-left:6px;\r\n border-left:5px solid transparent;\r\n border-right:5px solid transparent;\r\n border-top:6px solid currentColor;\r\n transition:transform .2s ease;\r\n }\r\n\r\n \/* flyout panel *\/\r\n .vgx-flyout{\r\n --vgx-item-bg: url('https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/07\/Background-3.png');\r\n position:absolute; top:100%; left:0;\r\n min-width:220px; margin:8px 0 0 0; padding:8px;\r\n list-style:none; background:#fff;\r\n border:1px solid rgba(0,0,0,.08);\r\n box-shadow:0 8px 24px rgba(0,0,0,.12);\r\n transform:translateY(8px);\r\n opacity:0; visibility:hidden; pointer-events:none;\r\n transition:transform .2s ease, opacity .2s ease, visibility .2s ease;\r\n z-index:20;\r\n }\r\n\r\n \/* show on hover\/focus or when toggled open *\/\r\n .vgx-has-fly:hover .vgx-flyout,\r\n .vgx-has-fly:focus-within .vgx-flyout,\r\n .vgx-has-fly.vgx-is-open .vgx-flyout{\r\n transform:translateY(0);\r\n opacity:1; visibility:visible; pointer-events:auto;\r\n }\r\n\r\n \/* rotate caret when open *\/\r\n .vgx-has-fly:hover > .vgx-toggle .vgx-caret,\r\n .vgx-has-fly:focus-within > .vgx-toggle .vgx-caret,\r\n .vgx-has-fly.vgx-is-open > .vgx-toggle .vgx-caret{\r\n transform:rotate(180deg);\r\n }\r\n\r\n \/* flyout link layout (prep for background image on item hover) *\/\r\n .vgx-sublink{\r\n justify-content:flex-start; text-align:left; width:100%;\r\n padding:8px 10px;\r\n color:#00282B;\r\n text-decoration-color:#00282B;\r\n border-radius:6px;\r\n background-repeat:no-repeat;\r\n background-position:center;\r\n background-size:cover;\r\n transition: background-image .2s ease, color .2s ease, text-decoration-color .2s ease;\r\n }\r\n\r\n \/* underline parent if current page is a descendant *\/\r\n .vgx-toggle.vgx-is-ancestor,\r\n .vgx-link.vgx-is-ancestor{\r\n text-decoration:underline;\r\n text-decoration-thickness:2px;\r\n text-underline-offset:6px;\r\n text-decoration-skip-ink:auto;\r\n }\r\n\r\n \/* ===== Background image ON submenu item hover\/focus\/active ===== *\/\r\n .vgx-flyout .vgx-sublink:hover,\r\n .vgx-flyout .vgx-sublink:focus,\r\n .vgx-flyout .vgx-sublink:active{\r\n background-image: var(--vgx-item-bg) !important;\r\n color:#FFFFFF !important;\r\n text-decoration-color:#FFFFFF !important;\r\n }\r\n\r\n \/* ===== Kill theme hover backgrounds (keep our item image only) ===== *\/\r\n .vgx-nav .vgx-toggle,\r\n .vgx-nav .vgx-toggle:hover,\r\n .vgx-nav .vgx-toggle:focus,\r\n .vgx-nav .vgx-toggle:active,\r\n .vgx-nav .vgx-link:hover,\r\n .vgx-nav .vgx-link:focus,\r\n .vgx-nav .vgx-link:active,\r\n .vgx-nav .vgx-node:hover,\r\n .vgx-nav .vgx-has-fly:hover,\r\n .vgx-nav .vgx-has-fly.vgx-is-open{\r\n background:transparent !important;\r\n background-color:transparent !important;\r\n background-image:none !important;\r\n box-shadow:none !important;\r\n }\r\n\r\n \/* Lock top-level link colors *\/\r\n .vgx-nav .vgx-link,\r\n .vgx-nav .vgx-toggle{\r\n color:#00282B !important;\r\n text-decoration-color:#00282B !important;\r\n }\r\n\r\n \/* Optional: remove iOS blue tap flash *\/\r\n .vgx-nav a, .vgx-nav button{ -webkit-tap-highlight-color: rgba(0,0,0,0); }\r\n\r\n \/* responsive tweak *\/\r\n @media (max-width: 720px){\r\n .vgx-row{ gap:14px; }\r\n .vgx-flyout{ min-width:180px; }\r\n .vgx-node:not(:last-child){\r\n padding-right:10px; margin-right:10px;\r\n }\r\n }\r\n\r\n \/* If you explicitly want no extra padding on some links: *\/\r\n .vgx-link--tight{ padding:0; }\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n<header class=\"vgx-header\">\r\n <nav class=\"vgx-nav\" aria-label=\"Main\">\r\n <ul class=\"vgx-row\">\r\n <li class=\"vgx-node\">\r\n <a href=\"\/\" class=\"vgx-link\">Home<\/a>\r\n <\/li>\r\n\r\n <li class=\"vgx-node\">\r\n <a href=\"https:\/\/verdantgroup.co.in\/index.php\/about-us\/\" class=\"vgx-link\">About Us<\/a>\r\n <\/li>\r\n\r\n <li class=\"vgx-node\">\r\n <a href=\"https:\/\/verdantgroup.co.in\/index.php\/stationery\/\" class=\"vgx-link\">Stationery & More<\/a>\r\n <\/li>\r\n\r\n \r\n <li class=\"vgx-node vgx-has-fly\">\r\n <button type=\"button\"\r\n class=\"vgx-link vgx-toggle\"\r\n aria-haspopup=\"menu\"\r\n aria-expanded=\"false\"\r\n aria-controls=\"vgx-infra-menu\">\r\n Infrastructure\r\n <span class=\"vgx-caret\" aria-hidden=\"true\"><\/span>\r\n <\/button>\r\n\r\n <ul id=\"vgx-infra-menu\" class=\"vgx-flyout\" role=\"menu\" aria-label=\"Infrastructure submenu\">\r\n <li class=\"vgx-flyitem\" role=\"none\">\r\n <a role=\"menuitem\"\r\n href=\"https:\/\/verdantgroup.co.in\/index.php\/operations-productions\/\"\r\n class=\"vgx-sublink\">Operations & Productions<\/a>\r\n <\/li>\r\n <li class=\"vgx-flyitem\" role=\"none\">\r\n <a role=\"menuitem\"\r\n href=\"https:\/\/verdantgroup.co.in\/index.php\/facilities-machinery\/\"\r\n class=\"vgx-sublink\">Facilities & Machinery<\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/li>\r\n <\/ul>\r\n <\/nav>\r\n<\/header>\r\n\r\n<script>\r\n(function(){\r\n \/\/ ===== Helpers to mark current page and ancestors =====\r\n var nav = document.querySelector('.vgx-nav');\r\n if (!nav) return;\r\n\r\n var links = nav.querySelectorAll('a');\r\n var here = new URL(window.location.href);\r\n\r\n function normPath(pathname){\r\n \/\/ treat \/index.php\/... as \/...\r\n var p = pathname.replace(\/^\\\/index\\.php(\\\/|$)\/, '\/');\r\n if (p !== '\/' && !p.endsWith('\/')) p += '\/';\r\n return p;\r\n }\r\n\r\n var herePath = normPath(here.pathname);\r\n var hereOrigin = here.origin;\r\n\r\n links.forEach(function(a){\r\n var href = a.getAttribute('href');\r\n if (!href) return;\r\n var target = new URL(href, window.location.origin);\r\n if (target.origin !== hereOrigin) return;\r\n\r\n var tPath = normPath(target.pathname);\r\n\r\n \/\/ Exact match \u2192 current page\r\n if (tPath === herePath){\r\n a.setAttribute('aria-current', 'page');\r\n }\r\n\r\n \/\/ Ancestor marking (different class name from original)\r\n if (herePath.startsWith(tPath) && tPath !== '\/'){\r\n a.classList.add('vgx-is-ancestor');\r\n }\r\n });\r\n\r\n \/\/ Mark Infrastructure toggle as ancestor if one of its submenu links is active\r\n var toggle = nav.querySelector('.vgx-toggle');\r\n var fly = nav.querySelector('#vgx-infra-menu');\r\n if (toggle && fly){\r\n var subLinks = fly.querySelectorAll('a');\r\n var isAncestor = Array.from(subLinks).some(function(a){\r\n try{\r\n var t = new URL(a.getAttribute('href'), window.location.origin);\r\n var p = normPath(t.pathname);\r\n return (p === herePath) || herePath.startsWith(p);\r\n }catch(e){ return false; }\r\n });\r\n if (isAncestor){\r\n toggle.classList.add('vgx-is-ancestor');\r\n }\r\n }\r\n\r\n \/\/ ====== Toggle behavior (hover, focus, click, outside, Escape) ======\r\n var holder = toggle && toggle.closest('.vgx-has-fly');\r\n if (holder && toggle){\r\n holder.addEventListener('mouseenter', function(){\r\n toggle.setAttribute('aria-expanded', 'true');\r\n });\r\n holder.addEventListener('mouseleave', function(){\r\n toggle.setAttribute('aria-expanded', 'false');\r\n });\r\n holder.addEventListener('focusin', function(){\r\n toggle.setAttribute('aria-expanded', 'true');\r\n });\r\n holder.addEventListener('focusout', function(e){\r\n if (!holder.contains(e.relatedTarget)){\r\n toggle.setAttribute('aria-expanded', 'false');\r\n }\r\n });\r\n\r\n \/\/ Click to toggle (for touch\/mobile)\r\n toggle.addEventListener('click', function(){\r\n var nowOpen = holder.classList.toggle('vgx-is-open');\r\n toggle.setAttribute('aria-expanded', String(nowOpen));\r\n });\r\n\r\n \/\/ Close on outside click\r\n document.addEventListener('click', function(e){\r\n if (!holder.contains(e.target)){\r\n holder.classList.remove('vgx-is-open');\r\n toggle.setAttribute('aria-expanded', 'false');\r\n }\r\n });\r\n\r\n \/\/ Close on Escape\r\n document.addEventListener('keydown', function(e){\r\n if (e.key === 'Escape'){\r\n holder.classList.remove('vgx-is-open');\r\n toggle.setAttribute('aria-expanded', 'false');\r\n toggle.focus();\r\n }\r\n });\r\n }\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-51a2bb5 e-con-full e-flex e-con e-child\" data-id=\"51a2bb5\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fa31f33 elementor-widget elementor-widget-image\" data-id=\"fa31f33\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"84\" height=\"80\" src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Group-2491-2.png\" class=\"attachment-large size-large wp-image-1172\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-64662b9 e-grid e-con-full e-con e-child\" data-id=\"64662b9\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-13cae51 e-con-full e-flex e-con e-child\" data-id=\"13cae51\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-02faf8e elementor-widget elementor-widget-html\" data-id=\"02faf8e\" data-element_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\" \/>\r\n <title>Menu \u2014 Verdant (QC dropdown \u2022 item bg on hover)<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@400;700&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n \/* ===== Base layout ===== *\/\r\n .qcx-header{\r\n display:flex; justify-content:center; align-items:center;\r\n }\r\n nav.qcx-nav{ --qcx-gap:24px; position:relative; }\r\n\r\n .qcx-list{\r\n list-style:none; margin:0; padding:0;\r\n display:flex; align-items:center;\r\n }\r\n .qcx-item, .qcx-subitem{ position:relative; }\r\n\r\n \/* vertical divider between top-level items *\/\r\n .qcx-item:not(:last-child){\r\n border-right:1px solid rgba(0, 40, 43, .3);\r\n }\r\n\r\n \/* ===== Typography + spacing ===== *\/\r\n .qcx-link,\r\n .qcx-sublink,\r\n .qcx-trigger{\r\n font-family:\"Host Grotesk\";\r\n font-weight:400;\r\n font-style:normal;\r\n font-size:16px;\r\n line-height:1.35;\r\n letter-spacing:0;\r\n text-align:center;\r\n\r\n display:inline-flex; align-items:center; justify-content:center;\r\n vertical-align:middle;\r\n text-decoration:none;\r\n padding:0 35px 8px 35px;\r\n white-space:nowrap;\r\n background:none; border:0; cursor:pointer;\r\n color:#00282B;\r\n }\r\n\r\n \/* Hover underline with gap *\/\r\n .qcx-link:hover,\r\n .qcx-sublink:hover,\r\n .qcx-trigger:hover{\r\n text-decoration:underline;\r\n text-decoration-thickness:2px;\r\n text-underline-offset:12px;\r\n text-decoration-skip-ink:auto;\r\n }\r\n\r\n \/* Keep underline ON for current page *\/\r\n .qcx-link[aria-current=\"page\"],\r\n .qcx-sublink[aria-current=\"page\"]{\r\n text-decoration:underline;\r\n text-decoration-thickness:2px;\r\n text-underline-offset:6px;\r\n text-decoration-skip-ink:auto;\r\n }\r\n\r\n \/* Optional keyboard focus *\/\r\n .qcx-link:focus-visible,\r\n .qcx-sublink:focus-visible,\r\n .qcx-trigger:focus-visible{\r\n outline:2px solid #00282B; outline-offset:2px;\r\n text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px;\r\n text-decoration-skip-ink:auto;\r\n }\r\n\r\n \/* ===== Dropdown (Quality Control ONLY) ===== *\/\r\n .qcx-has-panel{ position:relative; }\r\n\r\n \/* caret *\/\r\n .qcx-caret{\r\n width:0; height:0; margin-left:6px;\r\n border-left:5px solid transparent;\r\n border-right:5px solid transparent;\r\n border-top:6px solid currentColor;\r\n transition:transform .2s ease;\r\n }\r\n\r\n \/* submenu panel *\/\r\n .qcx-panel{\r\n --qcx-item-bg: url('https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/07\/Background-3.png');\r\n position:absolute; top:100%; left:0;\r\n min-width:220px;\r\n margin:8px 0 0 0; padding:8px;\r\n list-style:none; background:#fff;\r\n border:1px solid rgba(0,0,0,.08);\r\n box-shadow:0 8px 24px rgba(0,0,0,.12);\r\n transform:translateY(8px);\r\n opacity:0; visibility:hidden; pointer-events:none;\r\n transition:transform .2s ease, opacity .2s ease, visibility .2s ease;\r\n z-index:20;\r\n }\r\n\r\n \/* show panel *\/\r\n .qcx-has-panel:hover .qcx-panel,\r\n .qcx-has-panel:focus-within .qcx-panel,\r\n .qcx-has-panel.qcx-open .qcx-panel{\r\n transform:translateY(0);\r\n opacity:1; visibility:visible; pointer-events:auto;\r\n }\r\n\r\n \/* rotate caret when open *\/\r\n .qcx-has-panel:hover > .qcx-trigger .qcx-caret,\r\n .qcx-has-panel:focus-within > .qcx-trigger .qcx-caret,\r\n .qcx-has-panel.qcx-open > .qcx-trigger .qcx-caret{\r\n transform:rotate(180deg);\r\n }\r\n\r\n \/* submenu link layout *\/\r\n .qcx-sublink{\r\n justify-content:flex-start; text-align:left;\r\n width:100%; padding:8px 10px;\r\n color:#00282B;\r\n text-decoration-color:#00282B;\r\n border-radius:6px; \/* nice rounding for bg image edges *\/\r\n background-repeat:no-repeat; \/* needed for hover bg *\/\r\n background-position:center;\r\n background-size:cover;\r\n transition: background-image .2s ease, color .2s ease, text-decoration-color .2s ease;\r\n }\r\n\r\n \/* underline parent if current page is a descendant *\/\r\n .qcx-ancestor{\r\n text-decoration:underline;\r\n text-decoration-thickness:2px;\r\n text-underline-offset:6px;\r\n text-decoration-skip-ink:auto;\r\n }\r\n\r\n \/* ===== BG IMAGE ON SUBMENU ITEM (hover\/active\/focus) ===== *\/\r\n .qcx-panel .qcx-sublink:hover,\r\n .qcx-panel .qcx-sublink:focus,\r\n .qcx-panel .qcx-sublink:active{\r\n background-image: var(--qcx-item-bg) !important;\r\n color:#FFFFFF !important;\r\n text-decoration-color:#FFFFFF !important;\r\n border-color: rgba(255,255,255,.3);\r\n box-shadow:none;\r\n }\r\n\r\n \/* ===== Kill theme tints on top-level items, but allow submenu item bg ===== *\/\r\n .qcx-nav .qcx-trigger,\r\n .qcx-nav .qcx-trigger:hover,\r\n .qcx-nav .qcx-trigger:focus,\r\n .qcx-nav .qcx-trigger:active,\r\n .qcx-nav .qcx-link:hover,\r\n .qcx-nav .qcx-link:focus,\r\n .qcx-nav .qcx-link:active,\r\n .qcx-nav .qcx-item:hover,\r\n .qcx-nav .qcx-has-panel:hover,\r\n .qcx-nav .qcx-has-panel.qcx-open{\r\n background: transparent !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n box-shadow: none !important;\r\n filter: none !important;\r\n backdrop-filter: none !important;\r\n }\r\n\r\n \/* Keep top-level link colors Verdant green *\/\r\n .qcx-nav .qcx-link,\r\n .qcx-nav .qcx-trigger{\r\n color:#00282B !important;\r\n text-decoration-color:#00282B !important;\r\n }\r\n\r\n \/* Optional: remove iOS blue tap flash *\/\r\n .qcx-nav a, .qcx-nav button{ -webkit-tap-highlight-color: rgba(0,0,0,0); }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 720px){\r\n .qcx-list{ gap:14px; }\r\n .qcx-panel{ min-width:180px; }\r\n .qcx-item:not(:last-child){ padding-right:10px; margin-right:10px; }\r\n }\r\n\r\n .qcx-link--tight{ padding:0; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <header class=\"qcx-header\">\r\n <nav class=\"qcx-nav\" aria-label=\"Main\">\r\n <ul class=\"qcx-list\">\r\n <li class=\"qcx-item qcx-has-panel\">\r\n <button type=\"button\"\r\n class=\"qcx-trigger\"\r\n aria-haspopup=\"menu\"\r\n aria-expanded=\"false\"\r\n aria-controls=\"qcx-qc-panel\">\r\n Quality Control\r\n <span class=\"qcx-caret\" aria-hidden=\"true\"><\/span>\r\n <\/button>\r\n\r\n <ul id=\"qcx-qc-panel\" class=\"qcx-panel\" role=\"menu\" aria-label=\"Quality Control submenu\">\r\n <li class=\"qcx-subitem\" role=\"none\">\r\n <a role=\"menuitem\" href=\"https:\/\/verdantgroup.co.in\/index.php\/awards\/\" class=\"qcx-sublink\">Awards<\/a>\r\n <\/li>\r\n <li class=\"qcx-subitem\" role=\"none\">\r\n <a role=\"menuitem\" href=\"https:\/\/verdantgroup.co.in\/index.php\/certifications\/\" class=\"qcx-sublink\">Certifications<\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/li>\r\n\r\n <li class=\"qcx-item\">\r\n <a href=\"https:\/\/verdantgroup.co.in\/index.php\/csr\/\" class=\"qcx-link\">CSR<\/a>\r\n <\/li>\r\n\r\n <li class=\"qcx-item\">\r\n <a href=\"https:\/\/verdantgroup.co.in\/index.php\/blog-page-under-maintenance\/\" class=\"qcx-link\">Blog<\/a>\r\n <\/li>\r\n\r\n <li class=\"qcx-item\">\r\n <a href=\"https:\/\/verdantgroup.co.in\/index.php\/contact-us\/\" class=\"qcx-link\">Contact Us<\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/nav>\r\n <\/header>\r\n\r\n <script>\r\n (function(){\r\n \/\/ ===== Mark current page + ancestors =====\r\n var nav = document.querySelector('.qcx-nav');\r\n if (!nav) return;\r\n\r\n var links = nav.querySelectorAll('a');\r\n var here = new URL(window.location.href);\r\n\r\n function normPath(pathname){\r\n var p = pathname.replace(\/^\\\/index\\.php(\\\/|$)\/, '\/');\r\n if (p !== '\/' && !p.endsWith('\/')) p += '\/';\r\n return p;\r\n }\r\n\r\n var herePath = normPath(here.pathname);\r\n var hereOrigin = here.origin;\r\n\r\n links.forEach(function(a){\r\n var href = a.getAttribute('href');\r\n if (!href) return;\r\n\r\n var target = new URL(href, window.location.origin);\r\n if (target.origin !== hereOrigin) return;\r\n\r\n var tPath = normPath(target.pathname);\r\n\r\n \/\/ Exact match \u2192 current page\r\n if (tPath === herePath){\r\n a.setAttribute('aria-current', 'page');\r\n }\r\n\r\n \/\/ Ancestor underline\r\n if (herePath.startsWith(tPath) && tPath !== '\/'){\r\n a.classList.add('qcx-ancestor');\r\n }\r\n });\r\n\r\n \/\/ ===== Toggle aria-expanded on the QC trigger (hover\/focus\/click) =====\r\n var trigger = nav.querySelector('.qcx-trigger');\r\n var holder = trigger && trigger.closest('.qcx-has-panel');\r\n\r\n if (holder && trigger){\r\n holder.addEventListener('mouseenter', function(){\r\n trigger.setAttribute('aria-expanded', 'true');\r\n });\r\n holder.addEventListener('mouseleave', function(){\r\n trigger.setAttribute('aria-expanded', 'false');\r\n });\r\n holder.addEventListener('focusin', function(){\r\n trigger.setAttribute('aria-expanded', 'true');\r\n });\r\n holder.addEventListener('focusout', function(e){\r\n if (!holder.contains(e.relatedTarget)){\r\n trigger.setAttribute('aria-expanded', 'false');\r\n }\r\n });\r\n\r\n \/\/ Click to toggle (touch\/mobile friendly)\r\n trigger.addEventListener('click', function(){\r\n var nowOpen = holder.classList.toggle('qcx-open');\r\n trigger.setAttribute('aria-expanded', String(nowOpen));\r\n });\r\n\r\n \/\/ Close on outside click\r\n document.addEventListener('click', function(e){\r\n if (!holder.contains(e.target)){\r\n holder.classList.remove('qcx-open');\r\n trigger.setAttribute('aria-expanded', 'false');\r\n }\r\n });\r\n\r\n \/\/ Close on Escape\r\n document.addEventListener('keydown', function(e){\r\n if (e.key === 'Escape'){\r\n holder.classList.remove('qcx-open');\r\n trigger.setAttribute('aria-expanded', 'false');\r\n trigger.focus();\r\n }\r\n });\r\n }\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\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\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b67e378 e-con-full e-flex e-con e-child\" data-id=\"b67e378\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-e027206 e-con-full elementor-hidden-mobile elementor-hidden-tablet e-flex e-con e-child\" data-id=\"e027206\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e6740f8 elementor-widget elementor-widget-html\" data-id=\"e6740f8\" data-element_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>Precise Text over SVG Mask (Image)<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n :root {\r\n --page-bg:#0b0f0e;\r\n --fade-dur:.5s;\r\n --fade-ease:cubic-bezier(.22,.61,.36,1);\r\n --text-x: 684.50;\r\n --text-y: 261.50;\r\n }\r\n .wrapd{\r\n width:1420px;\r\n max-width:100%;\r\n aspect-ratio:1369\/523;\r\n position:relative;\r\n isolation:isolate;\r\n margin-inline:auto;\r\n }\r\n\r\n \/* Masked media area *\/\r\n .video-mask{\r\n position:absolute; inset:0; overflow:hidden;\r\n -webkit-mask-image:url('data:image\/svg+xml;utf8,%3Csvg%20width%3D%221369%22%20height%3D%22523%22%20viewBox%3D%220%200%201369%20523%22%20fill%3D%22none%22%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%3E%0A%3Cpath%20d%3D%22M1114.73%200.00585938C1115.2%200.0033307%201115.68%200.00112273%201116.15%200.000976562C1146.8%200.0104331%201175.43%204.99451%201201.85%2014.1816C1240.24%2027.2407%201272.6%2048.7755%201300.38%2076.5049C1307.83%2083.9047%201314.94%2091.7505%201321.67%2099.999C1325.42%20104.547%201329.07%20109.217%201332.64%20114C1332.6%20114.018%201332.55%20114.033%201332.51%20114.051C1332.52%20114.065%201332.53%20114.079%201332.54%20114.093C1330.33%20115.022%201327.94%20115.544%201325.44%20115.544H1165.58V174.7H1276.64C1283.63%20174.7%201289.98%20170.636%201292.93%20164.308L1296.86%20155.947C1299.8%20149.561%201306.15%20145.555%201313.14%20145.555H1336.02C1350.16%20172.03%201360.15%20201.117%201365.06%20231.889H1364.89C1364.9%20231.893%201364.9%20231.897%201364.9%20231.901H1274.25C1267.53%20232.149%201261.48%20236.1%201258.63%20242.281L1254.71%20250.699C1251.76%20257.028%201245.41%20261.092%201238.42%20261.092H1237.89C1237.65%20261.101%201237.42%20261.106%201237.18%20261.106H1165.58V320.195H1210.53C1210.65%20320.195%201210.77%20320.19%201210.89%20320.188C1217.58%20319.862%201223.58%20315.881%201226.42%20309.819L1230.32%20301.458C1233.13%20295.426%201239%20291.519%201245.58%20291.104C1246.04%20291.068%201246.5%20291.049%201246.97%20291.049H1368.14C1366.52%20321.414%201360.06%20350.443%201349.43%20377.383H1349.14C1349.14%20377.39%201349.13%20377.397%201349.13%20377.404H1207.81C1201.15%20377.709%201195.18%20381.644%201192.36%20387.775L1188.49%20396.194C1185.54%20402.523%201179.19%20406.587%201172.2%20406.587H1171.25C1170.97%20406.6%201170.68%20406.609%201170.4%20406.609H1165.58V443.686C1168.93%20439.294%201174.17%20436.666%201179.83%20436.666H1317.37C1295.84%20467.422%201255.55%20510.047%201207.55%20520.575C1196.46%20523.083%201186.89%20523.001%201186.82%20523L1185.67%20522.999C1185.66%20522.999%201185.65%20523%201185.64%20523L967.71%20522.97C967.701%20522.965%20967.692%20522.962%20967.683%20522.957H51.6094C23.1064%20522.957%200.000139057%20498.218%200%20467.701V55.2559C4.15679e-07%2024.739%2023.1063%200.00018587%2051.6094%200H1113.97C1114.22%201.55513e-09%201114.48%200.00195738%201114.73%200.00585938Z%22%20fill%3D%22%23D9D9D9%22\/%3E%0A%3C\/svg%3E%0A');\r\n -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain;\r\n mask-image:url('data:image\/svg+xml;utf8,%3Csvg%20width%3D%221369%22%20height%3D%22523%22%20viewBox%3D%220%200%201369%20523%22%20fill%3D%22none%22%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%3E%0A%3Cpath%20d%3D%22M1114.73%200.00585938C1115.2%200.0033307%201115.68%200.00112273%201116.15%200.000976562C1146.8%200.0104331%201175.43%204.99451%201201.85%2014.1816C1240.24%2027.2407%201272.6%2048.7755%201300.38%2076.5049C1307.83%2083.9047%201314.94%2091.7505%201321.67%2099.999C1325.42%20104.547%201329.07%20109.217%201332.64%20114C1332.6%20114.018%201332.55%20114.033%201332.51%20114.051C1332.52%20114.065%201332.53%20114.079%201332.54%20114.093C1330.33%20115.022%201327.94%20115.544%201325.44%20115.544H1165.58V174.7H1276.64C1283.63%20174.7%201289.98%20170.636%201292.93%20164.308L1296.86%20155.947C1299.8%20149.561%201306.15%20145.555%201313.14%20145.555H1336.02C1350.16%20172.03%201360.15%20201.117%201365.06%20231.889H1364.89C1364.9%20231.893%201364.9%20231.897%201364.9%20231.901H1274.25C1267.53%20232.149%201261.48%20236.1%201258.63%20242.281L1254.71%20250.699C1251.76%20257.028%201245.41%20261.092%201238.42%20261.092H1237.89C1237.65%20261.101%201237.42%20261.106%201237.18%20261.106H1165.58V320.195H1210.53C1210.65%20320.195%201210.77%20320.19%201210.89%20320.188C1217.58%20319.862%201223.58%20315.881%201226.42%20309.819L1230.32%20301.458C1233.13%20295.426%201239%20291.519%201245.58%20291.104C1246.04%20291.068%201246.5%20291.049%201246.97%20291.049H1368.14C1366.52%20321.414%201360.06%20350.443%201349.43%20377.383H1349.14C1349.14%20377.39%201349.13%20377.397%201349.13%20377.404H1207.81C1201.15%20377.709%201195.18%20381.644%201192.36%20387.775L1188.49%20396.194C1185.54%20402.523%201179.19%20406.587%201172.2%20406.587H1171.25C1170.97%20406.6%201170.68%20406.609%201170.4%20406.609H1165.58V443.686C1168.93%20439.294%201174.17%20436.666%201179.83%20436.666H1317.37C1295.84%20467.422%201255.55%20510.047%201207.55%20520.575C1196.46%20523.083%201186.89%20523.001%201186.82%20523L1185.67%20522.999C1185.66%20522.999%201185.65%20523%201185.64%20523L967.71%20522.97C967.701%20522.965%20967.692%20522.962%20967.683%20522.957H51.6094C23.1064%20522.957%200.000139057%20498.218%200%20467.701V55.2559C4.15679e-07%2024.739%2023.1063%200.00018587%2051.6094%200H1113.97C1114.22%201.55513e-09%201114.48%200.00195738%201114.73%200.00585938Z%22%20fill%3D%22%23D9D9D9%22\/%3E%0A%3C\/svg%3E%0A');\r\n mask-repeat:no-repeat; mask-position:center; mask-size:contain; mask-mode:luminance;\r\n }\r\n\r\n \/* Make both video\/img behave the same (we're using img now) *\/\r\n .video-mask :is(video,img){\r\n width:100%; height:100%;\r\n object-fit:cover; display:block;\r\n transform:scale(1);\r\n transition:transform var(--fade-dur) var(--fade-ease);\r\n }\r\n .wrapd:hover .video-mask :is(video,img){ transform:scale(1.03) }\r\n\r\n \/* Decorative overlays (unchanged) *\/\r\n .overlay{\r\n position:absolute; inset:0; pointer-events:none; will-change:opacity;\r\n }\r\n .overlay-default{\r\n background:url('data:image\/svg+xml;utf8,%3Csvg%20width%3D%221369%22%20height%3D%22523%22%20viewBox%3D%220%200%201369%20523%22%20fill%3D%22none%22%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%3E%0A%3Cpath%20d%3D%22M1114.73%200.00585938C1115.2%200.0033307%201115.68%200.00112273%201116.15%200.000976562C1146.8%200.0104331%201175.43%204.99451%201201.85%2014.1816C1240.24%2027.2407%201272.6%2048.7755%201300.38%2076.5049C1307.83%2083.9047%201314.94%2091.7505%201321.67%2099.999C1325.42%20104.547%201329.07%20109.217%201332.64%20114C1332.6%20114.018%201332.55%20114.033%201332.51%20114.051C1332.52%20114.065%201332.53%20114.079%201332.54%20114.093C1330.33%20115.022%201327.94%20115.544%201325.44%20115.544H1165.58V174.7H1276.64C1283.63%20174.7%201289.98%20170.636%201292.93%20164.308L1296.86%20155.947C1299.8%20149.561%201306.15%20145.555%201313.14%20145.555H1336.02C1350.16%20172.03%201360.15%20201.117%201365.06%20231.889H1364.89C1364.9%20231.893%201364.9%20231.897%201364.9%20231.901H1274.25C1267.53%20232.149%201261.48%20236.1%201258.63%20242.281L1254.71%20250.699C1251.76%20257.028%201245.41%20261.092%201238.42%20261.092H1237.89C1237.65%20261.101%201237.42%20261.106%201237.18%20261.106H1165.58V320.195H1210.53C1210.65%20320.195%201210.77%20320.19%201210.89%20320.188C1217.58%20319.862%201223.58%20315.881%201226.42%20309.819L1230.32%20301.458C1233.13%20295.426%201239%20291.519%201245.58%20291.104C1246.04%20291.068%201246.5%20291.049%201246.97%20291.049H1368.14C1366.52%20321.414%201360.06%20350.443%201349.43%20377.383H1349.14C1349.14%20377.39%201349.13%20377.397%201349.13%20377.404H1207.81C1201.15%20377.709%201195.18%20381.644%201192.36%20387.775L1188.49%20396.194C1185.54%20402.523%201179.19%20406.587%201172.2%20406.587H1171.25C1170.97%20406.6%201170.68%20406.609%201170.4%20406.609H1165.58V443.686C1168.93%20439.294%201174.17%20436.666%201179.83%20436.666H1317.37C1295.84%20467.422%201255.55%20510.047%201207.55%20520.575C1196.46%20523.083%201186.89%20523.001%201186.82%20523L1185.67%20522.999C1185.66%20522.999%201185.65%20523%201185.64%20523L967.71%20522.97C967.701%20522.965%20967.692%20522.962%20967.683%20522.957H51.6094C23.1064%20522.957%200.000139057%20498.218%200%20467.701V55.2559C4.15679e-07%2024.739%2023.1063%200.00018587%2051.6094%200H1113.97C1114.22%201.55513e-09%201114.48%200.00195738%201114.73%200.00585938Z%22%20fill%3D%22url%28%23paint0_linear_1748_3639%29%22\/%3E%0A%3Cpath%20d%3D%22M1114.73%200.00585938C1115.2%200.0033307%201115.68%200.00112273%201116.15%200.000976562C1146.8%200.0104331%201175.43%204.99451%201201.85%2014.1816C1240.24%2027.2407%201272.6%2048.7755%201300.38%2076.5049C1307.83%2083.9047%201314.94%2091.7505%201321.67%2099.999C1325.42%20104.547%201329.07%20109.217%201332.64%20114C1332.6%20114.018%201332.55%20114.033%201332.51%20114.051C1332.52%20114.065%201332.53%20114.079%201332.54%20114.093C1330.33%20115.022%201327.94%20115.544%201325.44%20115.544H1165.58V174.7H1276.64C1283.63%20174.7%201289.98%20170.636%201292.93%20164.308L1296.86%20155.947C1299.8%20149.561%201306.15%20145.555%201313.14%20145.555H1336.02C1350.16%20172.03%201360.15%20201.117%201365.06%20231.889H1364.89C1364.9%20231.893%201364.9%20231.897%201364.9%20231.901H1274.25C1267.53%20232.149%201261.48%20236.1%201258.63%20242.281L1254.71%20250.699C1251.76%20257.028%201245.41%20261.092%201238.42%20261.092H1237.89C1237.65%20261.101%201237.42%20261.106%201237.18%20261.106H1165.58V320.195H1210.53C1210.65%20320.195%201210.77%20320.19%201210.89%20320.188C1217.58%20319.862%201223.58%20315.881%201226.42%20309.819L1230.32%20301.458C1233.13%20295.426%201239%20291.519%201245.58%20291.104C1246.04%20291.068%201246.5%20291.049%201246.97%20291.049H1368.14C1366.52%20321.414%201360.06%20350.443%201349.43%20377.383H1349.14C1349.14%20377.39%201349.13%20377.397%201349.13%20377.404H1207.81C1201.15%20377.709%201195.18%20381.644%201192.36%20387.775L1188.49%20396.194C1185.54%20402.523%201179.19%20406.587%201172.2%20406.587H1171.25C1170.97%20406.6%201170.68%20406.609%201170.4%20406.609H1165.58V443.686C1168.93%20439.294%201174.17%20436.666%201179.83%20436.666H1317.37C1295.84%20467.422%201255.55%20510.047%201207.55%20520.575C1196.46%20523.083%201186.89%20523.001%201186.82%20523L1185.67%20522.999C1185.66%20522.999%201185.65%20523%201185.64%20523L967.71%20522.97C967.701%20522.965%20967.692%20522.962%20967.683%20522.957H51.6094C23.1064%20522.957%200.000139057%20498.218%200%20467.701V55.2559C4.15679e-07%2024.739%2023.1063%200.00018587%2051.6094%200H1113.97C1114.22%201.55513e-09%201114.48%200.00195738%201114.73%200.00585938Z%22%20fill%3D%22url%28%23paint1_radial_1748_3639%29%22\/%3E%0A%3Cpath%20d%3D%22M1114.73%200.00585938C1115.2%200.0033307%201115.68%200.00112273%201116.15%200.000976562C1146.8%200.0104331%201175.43%204.99451%201201.85%2014.1816C1240.24%2027.2407%201272.6%2048.7755%201300.38%2076.5049C1307.83%2083.9047%201314.94%2091.7505%201321.67%2099.999C1325.42%20104.547%201329.07%20109.217%201332.64%20114C1332.6%20114.018%201332.55%20114.033%201332.51%20114.051C1332.52%20114.065%201332.53%20114.079%201332.54%20114.093C1330.33%20115.022%201327.94%20115.544%201325.44%20115.544H1165.58V174.7H1276.64C1283.63%20174.7%201289.98%20170.636%201292.93%20164.308L1296.86%20155.947C1299.8%20149.561%201306.15%20145.555%201313.14%20145.555H1336.02C1350.16%20172.03%201360.15%20201.117%201365.06%20231.889H1364.89C1364.9%20231.893%201364.9%20231.897%201364.9%20231.901H1274.25C1267.53%20232.149%201261.48%20236.1%201258.63%20242.281L1254.71%20250.699C1251.76%20257.028%201245.41%20261.092%201238.42%20261.092H1237.89C1237.65%20261.101%201237.42%20261.106%201237.18%20261.106H1165.58V320.195H1210.53C1210.65%20320.195%201210.77%20320.19%201210.89%20320.188C1217.58%20319.862%201223.58%20315.881%201226.42%20309.819L1230.32%20301.458C1233.13%20295.426%201239%20291.519%201245.58%20291.104C1246.04%20291.068%201246.5%20291.049%201246.97%20291.049H1368.14C1366.52%20321.414%201360.06%20350.443%201349.43%20377.383H1349.14C1349.14%20377.39%201349.13%20377.397%201349.13%20377.404H1207.81C1201.15%20377.709%201195.18%20381.644%201192.36%20387.775L1188.49%20396.194C1185.54%20402.523%201179.19%20406.587%201172.2%20406.587H1171.25C1170.97%20406.6%201170.68%20406.609%201170.4%20406.609H1165.58V443.686C1168.93%20439.294%201174.17%20436.666%201179.83%20436.666H1317.37C1295.84%20467.422%201255.55%20510.047%201207.55%20520.575C1196.46%20523.083%201186.89%20523.001%201186.82%20523L1185.67%20522.999C1185.66%20522.999%201185.65%20523%201185.64%20523L967.71%20522.97C967.701%20522.965%20967.692%20522.962%20967.683%20522.957H51.6094C23.1064%20522.957%200.000139057%20498.218%200%20467.701V55.2559C4.15679e-07%2024.739%2023.1063%200.00018587%2051.6094%200H1113.97C1114.22%201.55513e-09%201114.48%200.00195738%201114.73%200.00585938Z%22%20fill%3D%22url%28%23paint2_radial_1748_3639%29%22\/%3E%0A%3Cpath%20d%3D%22M1114.73%200.00585938C1115.2%200.0033307%201115.68%200.00112273%201116.15%200.000976562C1146.8%200.0104331%201175.43%204.99451%201201.85%2014.1816C1240.24%2027.2407%201272.6%2048.7755%201300.38%2076.5049C1307.83%2083.9047%201314.94%2091.7505%201321.67%2099.999C1325.42%20104.547%201329.07%20109.217%201332.64%20114C1332.6%20114.018%201332.55%20114.033%201332.51%20114.051C1332.52%20114.065%201332.53%20114.079%201332.54%20114.093C1330.33%20115.022%201327.94%20115.544%201325.44%20115.544H1165.58V174.7H1276.64C1283.63%20174.7%201289.98%20170.636%201292.93%20164.308L1296.86%20155.947C1299.8%20149.561%201306.15%20145.555%201313.14%20145.555H1336.02C1350.16%20172.03%201360.15%20201.117%201365.06%20231.889H1364.89C1364.9%20231.893%201364.9%20231.897%201364.9%20231.901H1274.25C1267.53%20232.149%201261.48%20236.1%201258.63%20242.281L1254.71%20250.699C1251.76%20257.028%201245.41%20261.092%201238.42%20261.092H1237.89C1237.65%20261.101%201237.42%20261.106%201237.18%20261.106H1165.58V320.195H1210.53C1210.65%20320.195%201210.77%20320.19%201210.89%20320.188C1217.58%20319.862%201223.58%20315.881%201226.42%20309.819L1230.32%20301.458C1233.13%20295.426%201239%20291.519%201245.58%20291.104C1246.04%20291.068%201246.5%20291.049%201246.97%20291.049H1368.14C1366.52%20321.414%201360.06%20350.443%201349.43%20377.383H1349.14C1349.14%20377.39%201349.13%20377.397%201349.13%20377.404H1207.81C1201.15%20377.709%201195.18%20381.644%201192.36%20387.775L1188.49%20396.194C1185.54%20402.523%201179.19%20406.587%201172.2%20406.587H1171.25C1170.97%20406.6%201170.68%20406.609%201170.4%20406.609H1165.58V443.686C1168.93%20439.294%201174.17%20436.666%201179.83%20436.666H1317.37C1295.84%20467.422%201255.55%20510.047%201207.55%20520.575C1196.46%20523.083%201186.89%20523.001%201186.82%20523L1185.67%20522.999C1185.66%20522.999%201185.65%20523%201185.64%20523L967.71%20522.97C967.701%20522.965%20967.692%20522.962%20967.683%20522.957H51.6094C23.1064%20522.957%200.000139057%20498.218%200%20467.701V55.2559C4.15679e-07%2024.739%2023.1063%200.00018587%2051.6094%200H1113.97C1114.22%201.55513e-09%201114.48%200.00195738%201114.73%200.00585938Z%22%20fill%3D%22url%28%23paint3_radial_1748_3639%29%22\/%3E%0A%3Cpath%20d%3D%22M1114.73%200.00585938C1115.2%200.0033307%201115.68%200.00112273%201116.15%200.000976562C1146.8%200.0104331%201175.43%204.99451%201201.85%2014.1816C1240.24%2027.2407%201272.6%2048.7755%201300.38%2076.5049C1307.83%2083.9047%201314.94%2091.7505%201321.67%2099.999C1325.42%20104.547%201329.07%20109.217%201332.64%20114C1332.6%20114.018%201332.55%20114.033%201332.51%20114.051C1332.52%20114.065%201332.53%20114.079%201332.54%20114.093C1330.33%20115.022%201327.94%20115.544%201325.44%20115.544H1165.58V174.7H1276.64C1283.63%20174.7%201289.98%20170.636%201292.93%20164.308L1296.86%20155.947C1299.8%20149.561%201306.15%20145.555%201313.14%20145.555H1336.02C1350.16%20172.03%201360.15%20201.117%201365.06%20231.889H1364.89C1364.9%20231.893%201364.9%20231.897%201364.9%20231.901H1274.25C1267.53%20232.149%201261.48%20236.1%201258.63%20242.281L1254.71%20250.699C1251.76%20257.028%201245.41%20261.092%201238.42%20261.092H1237.89C1237.65%20261.101%201237.42%20261.106%201237.18%20261.106H1165.58V320.195H1210.53C1210.65%20320.195%201210.77%20320.19%201210.89%20320.188C1217.58%20319.862%201223.58%20315.881%201226.42%20309.819L1230.32%20301.458C1233.13%20295.426%201239%20291.519%201245.58%20291.104C1246.04%20291.068%201246.5%20291.049%201246.97%20291.049H1368.14C1366.52%20321.414%201360.06%20350.443%201349.43%20377.383H1349.14C1349.14%20377.39%201349.13%20377.397%201349.13%20377.404H1207.81C1201.15%20377.709%201195.18%20381.644%201192.36%20387.775L1188.49%20396.194C1185.54%20402.523%201179.19%20406.587%201172.2%20406.587H1171.25C1170.97%20406.6%201170.68%20406.609%201170.4%20406.609H1165.58V443.686C1168.93%20439.294%201174.17%20436.666%201179.83%20436.666H1317.37C1295.84%20467.422%201255.55%20510.047%201207.55%20520.575C1196.46%20523.083%201186.89%20523.001%201186.82%20523L1185.67%20522.999C1185.66%20522.999%201185.65%20523%201185.64%20523L967.71%20522.97C967.701%20522.965%20967.692%20522.962%20967.683%20522.957H51.6094C23.1064%20522.957%200.000139057%20498.218%200%20467.701V55.2559C4.15679e-07%2024.739%2023.1063%200.00018587%2051.6094%200H1113.97C1114.22%201.55513e-09%201114.48%200.00195738%201114.73%200.00585938Z%22%20fill%3D%22url%28%23paint4_radial_1748_3639%29%22\/%3E%0A%3Cdefs%3E%0A%3ClinearGradient%20id%3D%22paint0_linear_1748_3639%22%20x1%3D%221163.12%22%20y1%3D%22262%22%20x2%3D%22-5.86037e-06%22%20y2%3D%22262%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%3Cstop%20stop-color%3D%22%2300282B%22%20stop-opacity%3D%220%22\/%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23104E43%22\/%3E%0A%3C\/linearGradient%3E%0A%3CradialGradient%20id%3D%22paint1_radial_1748_3639%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22translate%281238%20471%29%20rotate%28179.705%29%20scale%28389.005%20601.032%29%22%3E%0A%3Cstop%20stop-color%3D%22%231B664C%22\/%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2300282B%22%20stop-opacity%3D%220%22\/%3E%0A%3C\/radialGradient%3E%0A%3CradialGradient%20id%3D%22paint2_radial_1748_3639%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22translate%281319.5%20326.5%29%20rotate%28177.394%29%20scale%28417.932%20312.77%29%22%3E%0A%3Cstop%20stop-color%3D%22%23638A48%22\/%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2300282B%22%20stop-opacity%3D%220%22\/%3E%0A%3C\/radialGradient%3E%0A%3CradialGradient%20id%3D%22paint3_radial_1748_3639%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22translate%281313.5%20191%29%20rotate%28177.477%29%20scale%28374.863%20320.024%29%22%3E%0A%3Cstop%20stop-color%3D%22%237E9138%22\/%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2300282B%22%20stop-opacity%3D%220%22\/%3E%0A%3C\/radialGradient%3E%0A%3CradialGradient%20id%3D%22paint4_radial_1748_3639%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22translate%281242%2073.5%29%20rotate%28174.289%29%20scale%28929.614%20740.933%29%22%3E%0A%3Cstop%20stop-color%3D%22%23B6BE24%22\/%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2300282B%22%20stop-opacity%3D%220%22\/%3E%0A%3C\/radialGradient%3E%0A%3C\/defs%3E%0A%3C\/svg%3E%0A') center\/contain no-repeat; opacity:1;\r\n transition:opacity var(--fade-dur) var(--fade-ease);\r\n }\r\n .overlay-hover{\r\n background:url('data:image\/svg+xml;utf8,%3Csvg%20width%3D%221369%22%20height%3D%22523%22%20viewBox%3D%220%200%201369%20523%22%20fill%3D%22none%22%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%3E%0A%3Cpath%20d%3D%22M1114.73%200.00585938C1115.2%200.0033307%201115.68%200.00112273%201116.15%200.000976562C1146.8%200.0104331%201175.43%204.99451%201201.85%2014.1816C1240.24%2027.2407%201272.6%2048.7755%201300.38%2076.5049C1307.83%2083.9047%201314.94%2091.7505%201321.67%2099.999C1325.42%20104.547%201329.07%20109.217%201332.64%20114C1332.6%20114.018%201332.55%20114.033%201332.51%20114.051C1332.52%20114.065%201332.53%20114.079%201332.54%20114.093C1330.33%20115.022%201327.94%20115.544%201325.44%20115.544H1165.58V174.7H1276.64C1283.63%20174.7%201289.98%20170.636%201292.93%20164.308L1296.86%20155.947C1299.8%20149.561%201306.15%20145.555%201313.14%20145.555H1336.02C1350.16%20172.03%201360.15%20201.117%201365.06%20231.889H1364.89C1364.9%20231.893%201364.9%20231.897%201364.9%20231.901H1274.25C1267.53%20232.149%201261.48%20236.1%201258.63%20242.281L1254.71%20250.699C1251.76%20257.028%201245.41%20261.092%201238.42%20261.092H1237.89C1237.65%20261.101%201237.42%20261.106%201237.18%20261.106H1165.58V320.195H1210.53C1210.65%20320.195%201210.77%20320.19%201210.89%20320.188C1217.58%20319.862%201223.58%20315.881%201226.42%20309.819L1230.32%20301.458C1233.13%20295.426%201239%20291.519%201245.58%20291.104C1246.04%20291.068%201246.5%20291.049%201246.97%20291.049H1368.14C1366.52%20321.414%201360.06%20350.443%201349.43%20377.383H1349.14C1349.14%20377.39%201349.13%20377.397%201349.13%20377.404H1207.81C1201.15%20377.709%201195.18%20381.644%201192.36%20387.775L1188.49%20396.194C1185.54%20402.523%201179.19%20406.587%201172.2%20406.587H1171.25C1170.97%20406.6%201170.68%20406.609%201170.4%20406.609H1165.58V443.686C1168.93%20439.294%201174.17%20436.666%201179.83%20436.666H1317.37C1295.84%20467.422%201255.55%20510.047%201207.55%20520.575C1196.46%20523.083%201186.89%20523.001%201186.82%20523L1185.67%20522.999C1185.66%20522.999%201185.65%20523%201185.64%20523L967.71%20522.97C967.701%20522.965%20967.692%20522.962%20967.683%20522.957H51.6094C23.1064%20522.957%200.000139057%20498.218%200%20467.701V55.2559C4.15679e-07%2024.739%2023.1063%200.00018587%2051.6094%200H1113.97C1114.22%201.55513e-09%201114.48%200.00195738%201114.73%200.00585938Z%22%20fill%3D%22url%28%23paint0_linear_1748_3665%29%22\/%3E%0A%3Cdefs%3E%0A%3ClinearGradient%20id%3D%22paint0_linear_1748_3665%22%20x1%3D%221163.12%22%20y1%3D%22262%22%20x2%3D%22-5.86037e-06%22%20y2%3D%22262%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%3Cstop%20stop-color%3D%22%2300282B%22%20stop-opacity%3D%220%22\/%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23104E43%22\/%3E%0A%3C\/linearGradient%3E%0A%3C\/defs%3E%0A%3C\/svg%3E%0A') center\/contain no-repeat; opacity:0;\r\n transition:opacity var(--fade-dur) var(--fade-ease);\r\n }\r\n .wrapd:hover .overlay-default{opacity:0}\r\n .wrapd:hover .overlay-hover{opacity:1}\r\n\r\n \/* Headline *\/\r\n .about-text{\r\n position:absolute;\r\n left: 75px;\r\n top: calc(var(--text-y) \/ 523 * 100%);\r\n transform: translateY(-50%);\r\n margin: 0;\r\n font-family: \"Space Grotesk\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight: 400;\r\n font-size: clamp(18px, 4.1vw, 56px);\r\n letter-spacing: .5px;\r\n color:#fff;\r\n text-shadow: 0 4px 18px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.25);\r\n line-height:1;\r\n white-space:nowrap;\r\n z-index:3;\r\n pointer-events:none;\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"wrapd\" style=\"--text-x:684.50; --text-y:261.50;\">\r\n <div class=\"video-mask\">\r\n <img\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/4a55b7299dcbf17f3cb727e36b3e19db0e5ae6a4-scaled.png\"\r\n alt=\"Operations and Productions\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n fetchpriority=\"low\"\r\n \/>\r\n <\/div>\r\n\r\n <div class=\"overlay overlay-default\" aria-hidden=\"true\"><\/div>\r\n <div class=\"overlay overlay-hover\" aria-hidden=\"true\"><\/div>\r\n\r\n <h2 class=\"about-text\">About Us<\/h2>\r\n <\/div>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-46ff4e4 e-con-full elementor-hidden-desktop elementor-hidden-tablet e-flex e-con e-child\" data-id=\"46ff4e4\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fc8d514 elementor-widget elementor-widget-image\" data-id=\"fc8d514\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/elementor\/thumbs\/Frame-1618873223-scaled-rb14knl00qa9h45u0hj3n7sh8kb6cc5h4eynws005c.png\" title=\"Frame 1618873223\" alt=\"Frame 1618873223\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d2483e8 e-con-full elementor-hidden-desktop elementor-hidden-mobile e-flex e-con e-child\" data-id=\"d2483e8\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1d7fad2 elementor-widget elementor-widget-image\" data-id=\"1d7fad2\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1250\" height=\"2560\" src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873223-scaled.png\" class=\"attachment-full size-full wp-image-4960\" alt=\"\" srcset=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873223-scaled.png 1250w, https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873223-146x300.png 146w, https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873223-500x1024.png 500w, https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873223-768x1573.png 768w, https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873223-750x1536.png 750w, https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873223-1000x2048.png 1000w, https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/elementor\/thumbs\/Frame-1618873223-scaled-rb14knkzk2c6o9r223xy56xsop58fgf4805zjj54bu.png 352w, https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/elementor\/thumbs\/Frame-1618873223-scaled-rb14knl00qa9h45u0hj3n7sh8kb6cc5h4eynws005c.png 390w\" sizes=\"(max-width: 1250px) 100vw, 1250px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d5e8dbf e-flex e-con-boxed e-con e-child\" data-id=\"d5e8dbf\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a9e3458 elementor-widget elementor-widget-html\" data-id=\"a9e3458\" data-element_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>Our Story Heading<\/title>\r\n \r\n <link\r\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@500&display=swap\"\r\n rel=\"stylesheet\"\r\n \/>\r\n <style>\r\n\r\n \/* Our Story heading styles *\/\r\n .our-story-heading {\r\n font-family: 'Host Grotesk', sans-serif;\r\n font-weight: 500; \/* Medium *\/\r\n font-style: normal; \/* \u201cMedium\u201d is weight-based *\/\r\n font-size: 32px;\r\n line-height: 51.02px;\r\n leading-trim: none; \/* non-standard, included per spec *\/\r\n letter-spacing: 0%;\r\n vertical-align: middle;\r\n color: #92A282;\r\n text-align: center; \/* center if needed *\/\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <h3 class=\"our-story-heading\">Our Story<\/h3>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8f42b32 elementor-widget elementor-widget-html\" data-id=\"8f42b32\" data-element_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>Responsive Heading<\/title>\r\n \r\n <link\r\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@400;700&display=swap\"\r\n rel=\"stylesheet\"\r\n \/>\r\n <style>\r\n \/* fluid font sizing: clamps between 32px and 48px, based on viewport width *\/\r\n .heading-container {\r\n text-align: center;\r\n font-size: clamp(32px, 5vw, 48px);\r\n \/* line-height scales proportionally: 58\/48 \u2248 1.21 *\/\r\n line-height: 1.21;\r\n letter-spacing: 1%;\r\n leading-trim: none; \/* non\u2011standard but per spec *\/\r\n }\r\n\r\n \/* \u201cThe Beginning\u201d *\/\r\n .heading-beginning {\r\n font-family: 'Host Grotesk', sans-serif;\r\n font-weight: 700;\r\n font-style: normal;\r\n color: #436F49;\r\n }\r\n\r\n \/* \u201c&\u201d *\/\r\n .heading-ampersand {\r\n font-family: 'Host Grotesk', sans-serif;\r\n font-weight: 400;\r\n font-style: normal;\r\n color: #436F49;\r\n }\r\n\r\n \/* \u201cThe Present Journey\u201d *\/\r\n .heading-present {\r\n font-family: 'Host Grotesk', sans-serif;\r\n font-weight: 700;\r\n font-style: normal;\r\n color: #0C4C44;\r\n }\r\n \/* Mobile: align left *\/\r\n@media (max-width: 768px) {\r\n .heading-container { text-align: left; } \/* or 'start' for RTL support *\/\r\n}\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <h2 class=\"heading-container\">\r\n <span class=\"heading-beginning\">The Beginning <\/span>\r\n <span class=\"heading-ampersand\">&<\/span>\r\n <span class=\"heading-present\"> The Present Journey<\/span>\r\n <\/h2>\r\n<\/body>\r\n<\/html>\r\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-7387bd0 e-flex e-con-boxed e-con e-child\" data-id=\"7387bd0\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6bdcb77 elementor-widget elementor-widget-html\" data-id=\"6bdcb77\" data-element_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\" \/>\r\n <title>Animated Timeline with Tiles<\/title>\r\n <style>\r\n \/* ============ Base (desktop look preserved) ============ *\/\r\n .timeline-container{\r\n width: min(100%, 1363px);\r\n margin: 0 auto;\r\n padding: 0 24px;\r\n box-sizing: border-box;\r\n }\r\n\r\n ul.timeline{\r\n list-style: none;\r\n padding-left: 0;\r\n position: relative;\r\n margin: 0;\r\n }\r\n\r\n \/* Yellow dotted line: no animation until in-view *\/\r\n ul.timeline::before{\r\n content: \"\";\r\n position: absolute;\r\n left: 4px;\r\n top: 0;\r\n width: 2px;\r\n height: 0; \/* grows when in-view *\/\r\n border-left: 3px dotted #FFD700;\r\n }\r\n \/* Start drawing only when visible *\/\r\n ul.timeline.is-visible::before{\r\n animation: drawline 12s ease forwards;\r\n animation-delay: 1s;\r\n }\r\n\r\n .custom-bullet{\r\n position: relative;\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-weight: 400;\r\n font-size: 17px; \/* desktop size *\/\r\n color: #616161;\r\n margin-bottom: 40px;\r\n padding-left: 30px;\r\n opacity: 0; \/* hidden until in-view *\/\r\n line-height: 1.75;\r\n transform: translateY(15px);\r\n }\r\n\r\n .custom-bullet::before{\r\n content: \"\";\r\n position: absolute;\r\n left: 0;\r\n top: 7px;\r\n width: 10px;\r\n height: 10px;\r\n background-color: #00282D;\r\n border-radius: 50%;\r\n z-index: 1;\r\n }\r\n\r\n \/* Staggered bullet reveals only when parent timeline is visible *\/\r\n .timeline.is-visible .custom-bullet.first { animation: fadein 1s ease forwards; animation-delay: 0.5s; }\r\n .timeline.is-visible .custom-bullet.second { animation: fadein 1s ease forwards; animation-delay: 2.5s; }\r\n .timeline.is-visible .custom-bullet.third { animation: fadein 1s ease forwards; animation-delay: 4.5s; }\r\n .timeline.is-visible .custom-bullet.fourth { animation: fadein 1s ease forwards; animation-delay: 6.5s; }\r\n .timeline.is-visible .custom-bullet.fifth { animation: fadein 1s ease forwards; animation-delay: 8.5s; }\r\n .timeline.is-visible .custom-bullet.sixth { animation: fadein 1s ease forwards; animation-delay: 10.5s; }\r\n\r\n \/* Special styling for 5th bullet *\/\r\n .custom-bullet.fifth{\r\n font-weight: 700;\r\n font-size: 17px;\r\n line-height: 30px;\r\n letter-spacing: 0%;\r\n color: #456F46;\r\n }\r\n\r\n \/* Tiles container: animate only when visible *\/\r\n .verdant-tiles{\r\n display: flex;\r\n gap: 20px;\r\n margin-top: 20px;\r\n opacity: 0;\r\n align-items: center;\r\n flex-wrap: nowrap; \/* desktop = row of three *\/\r\n transform: translateY(15px);\r\n }\r\n .timeline.is-visible .verdant-tiles{\r\n animation: fadein 1s ease forwards;\r\n animation-delay: 5s;\r\n }\r\n\r\n \/* Base tile styles *\/\r\n .verdant-tile{\r\n border: 1px solid #ddd;\r\n text-align: left;\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 16px;\r\n line-height: 30px;\r\n font-weight: 700;\r\n color: #616161;\r\n background: radial-gradient(\r\n 172.63% 122.39% at -40.95% -81.91%,\r\n #E2E0DF 0%,\r\n #FFFFFF 100%\r\n );\r\n transition: all 0.3s ease;\r\n }\r\n\r\n \/* Unique tile styles (desktop sizes) *\/\r\n .verdant-tile-portfolio{\r\n width: 419px;\r\n height: 138px;\r\n border-radius: 12px;\r\n border-width: 1px;\r\n padding: 24px;\r\n gap: 24px;\r\n opacity: 1;\r\n }\r\n\r\n .verdant-tile-staff,\r\n .verdant-tile-logistics{\r\n width: 419px;\r\n height: 108px;\r\n border-radius: 12px;\r\n border-width: 1px;\r\n padding: 20px;\r\n gap: 10px;\r\n opacity: 1;\r\n }\r\n\r\n \/* Hover *\/\r\n .verdant-tile:hover{\r\n background: #3D4D25;\r\n color: #FFFFFF;\r\n border-color: #3D4D25;\r\n }\r\n\r\n @keyframes fadein { from{opacity:0; transform: translateY(15px);} to{opacity:1; transform: translateY(0);} }\r\n @keyframes drawline { from{height:0;} to{height:100%;} }\r\n\r\n \/* ===================== Tablet ===================== *\/\r\n @media (max-width: 1024px){\r\n .custom-bullet{\r\n font-size: clamp(15px, 1.6vw, 17px);\r\n margin-bottom: 32px;\r\n padding-left: 28px;\r\n line-height: 1.7;\r\n }\r\n .custom-bullet::before{\r\n top: 6px;\r\n width: 9px; height: 9px;\r\n }\r\n ul.timeline::before{\r\n left: 3px; \/* align with smaller bullet dot *\/\r\n }\r\n\r\n \/* Tiles: go to two-up; allow auto height *\/\r\n .verdant-tiles{\r\n flex-wrap: wrap;\r\n align-items: stretch;\r\n }\r\n .verdant-tiles .verdant-tile{\r\n width: calc(50% - 10px) !important;\r\n height: auto !important;\r\n padding: 18px !important;\r\n line-height: 1.6;\r\n }\r\n }\r\n\r\n \/* ===================== Mobile ===================== *\/\r\n @media (max-width: 640px){\r\n .timeline-container{\r\n padding: 0;\r\n }\r\n\r\n .custom-bullet{\r\n font-size: clamp(14px, 4.2vw, 16px);\r\n padding-left: 24px;\r\n margin-bottom: 24px;\r\n line-height: 1.65;\r\n }\r\n .custom-bullet::before{\r\n top: 6px;\r\n width: 8px; height: 8px;\r\n }\r\n ul.timeline::before{\r\n left: 2px;\r\n border-left-width: 2px;\r\n border-left-style: dotted;\r\n }\r\n\r\n \/* Stack tiles vertically full-width *\/\r\n .verdant-tiles{\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n }\r\n .verdant-tiles .verdant-tile{\r\n width: 100% !important;\r\n height: auto !important;\r\n padding: 16px !important;\r\n font-size: 15px;\r\n line-height: 1.6;\r\n }\r\n }\r\n\r\n \/* Respect reduced motion preferences *\/\r\n @media (prefers-reduced-motion: reduce){\r\n * { animation: none !important; transition: none !important; }\r\n .custom-bullet, .verdant-tiles { opacity: 1 !important; transform: none !important; }\r\n ul.timeline::before { height: 100% !important; }\r\n }\r\n <\/style>\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;700&display=swap\" rel=\"stylesheet\">\r\n<\/head>\r\n<body>\r\n <div class=\"timeline-container\">\r\n <ul class=\"timeline\" id=\"vppl-timeline\">\r\n <li class=\"custom-bullet first\">\r\n From a modest beginning in South India to becoming one of India\u2019s most trusted and vertically itegrated Stationery\u00a0and\u00a0Paper manufacturers, Verdant Stationery\u00a0Pvt.\u00a0Ltd. has been a journey of Integrity, Innovation, and Impact.\r\n <\/li>\r\n <li class=\"custom-bullet second\">\r\n Founded on 8th September 2008 by Mr. Dinakar Thyagaraj, the company began as JC Stationery Pvt. Ltd., supplying stationery and notebooks to schools, offices and institutions. With a strong focus on quality and reliability, the brand quickly earned the trust of major educational networks across the country.\r\n <\/li>\r\n <li class=\"custom-bullet third\">\r\n Today, operating under a unified identity, the Verdant Group (VSPL) stands as a powerful manufacturing ecosystem with:\r\n <div class=\"verdant-tiles\">\r\n <div class=\"verdant-tile verdant-tile-portfolio\">\r\n A diverse product portfolio \u2013 from notebooks , school stationery, copier paper to flexo bags, office files, and institutional stationery\r\n <\/div>\r\n <div class=\"verdant-tile verdant-tile-staff\">\r\n Over 400+ permanent and 100+ contract staff across multi-location plants\r\n <\/div>\r\n <div class=\"verdant-tile verdant-tile-logistics\">\r\n A national logistics network with ERP-backed efficiency and port access for exports\r\n <\/div>\r\n <\/div>\r\n <\/li>\r\n <li class=\"custom-bullet fourth\">\r\n Driven by this legacy of excellence, Verdant launched August Blanks\u2014its flagship premium stationery line offering customized journals, planners, and notebooks crafted for corporate gifting, exports, and retail. This marks the brand\u2019s foray into the global lifestyle and gifting space, blending Indian craftsmanship with world-class design sensibilities.\r\n <\/li>\r\n <li class=\"custom-bullet fifth\">\r\n Just like green plants and grass symbolize freshness, growth, and possibility, Verdant stationery is designed to be a space where ideas sprout, creativity blooms, and learning flourishes.<br><br>\r\n Every notebook, journal, and sheet of paper reflects that same essence\u2014natural, nurturing, and full of potential. And true to its name, Verdant uses eco-friendly materials that protect the environment while supporting education and expression.<br><br>\r\n Verdant isn\u2019t just about green products\u2014it\u2019s about creating a greener, smarter, more inspired world\u2014one page at a time.\r\n <\/li>\r\n <li class=\"custom-bullet sixth\">\r\n Together, Verdant and its premium innovations are committed to empowering Education, Enterprise, and Creativity\u2014across India and beyond.\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <script>\r\n (function(){\r\n const timelines = document.querySelectorAll('.timeline');\r\n if (!timelines.length) return;\r\n\r\n \/\/ If browser doesn't support IntersectionObserver, show immediately\r\n if (!('IntersectionObserver' in window)) {\r\n timelines.forEach(t => t.classList.add('is-visible'));\r\n return;\r\n }\r\n\r\n const io = new IntersectionObserver((entries, obs) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('is-visible');\r\n obs.unobserve(entry.target); \/\/ run once\r\n }\r\n });\r\n }, { root: null, rootMargin: '0px', threshold: 0.2 }); \/\/ ~20% visible\r\n\r\n timelines.forEach(t => io.observe(t));\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\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-2c42152 e-con-full e-flex e-con e-child\" data-id=\"2c42152\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t<div class=\"elementor-element elementor-element-aa430cf e-con-full e-flex e-con e-child\" data-id=\"aa430cf\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0b37d3f elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"0b37d3f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<div class=\"vg-timeline\" data-base-w=\"1387\" data-base-h=\"768\">\r\n <div class=\"vg-stage\">\r\n\r\n \r\n <div class=\"vg-head\" role=\"group\" aria-label=\"Timeline heading\">\r\n <h2 class=\"vg-title\" aria-label=\"The Verdant Story\">\r\n <span class=\"vg-dim\">The<\/span>\r\n <span class=\"vg-strong\">Verdant<\/span>\r\n <span class=\"vg-dim\">Story<\/span>\r\n <\/h2>\r\n <p class=\"vg-sub\">From a single press to a national force in innovation.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"left-rail\">\r\n <div class=\"left-art bgA\"><\/div>\r\n <div class=\"left-art bgB\"><\/div>\r\n\r\n <div class=\"scroll-btn up\" aria-label=\"Previous year\"><\/div>\r\n <div class=\"scroll-btn down\" aria-label=\"Next year\"><\/div>\r\n\r\n <div class=\"year-viewport\">\r\n <div class=\"year-stack\">\r\n <div class=\"year active\" data-year=\"2008\">2008<\/div>\r\n <div class=\"year\" data-year=\"2009\">2009<\/div>\r\n <div class=\"year\" data-year=\"2011\">2011<\/div>\r\n <div class=\"year\" data-year=\"2013\">2013<\/div>\r\n <div class=\"year\" data-year=\"2014\">2014<\/div>\r\n <div class=\"year\" data-year=\"2018\">2018<\/div>\r\n <div class=\"year\" data-year=\"2022\">2022<\/div>\r\n <div class=\"year\" data-year=\"2023\">2023<\/div>\r\n <div class=\"year\" data-year=\"2024\">2024<\/div>\r\n <div class=\"year\" data-year=\"2025\">2025<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"vg-card\">\r\n <div class=\"vg-card-bg bgA\"><\/div>\r\n <div class=\"vg-card-bg bgB\"><\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/div>\r\n\r\n<style>\r\n\/* Load any fonts you need globally on your site.\r\n - Roc Grotesk: load via Adobe Fonts\/self-host (this snippet assumes it's available as 'Roc Grotesk')\r\n - Host\/Space Grotesk below are for other UI text *\/\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@700&family=Space+Grotesk:wght@400;700&display=swap');\r\n\r\n\/* ===== Responsive container that auto-scales the inner fixed stage ===== *\/\r\n.vg-timeline{\r\n position:relative;\r\n width:100%;\r\n height:auto; \/* JS sets height to maintain aspect ratio *\/\r\n overflow:hidden;\r\n\r\n \/* design tokens (scoped) *\/\r\n --img-shift: 0px; \/* 0 keeps right image perfectly right-aligned *\/\r\n --year-item-h: 77px;\r\n --year-view-h: 390px;\r\n --ink-dim:#6E8A86;\r\n --lime:#D7DE27;\r\n\r\n \/* tweak right panel inset w\/o using `right:`; positive pulls left, negative nudges further right *\/\r\n --card-nudge: 20px;\r\n}\r\n\r\n\/* The fixed design \"stage\" at 1387\u00d7768, scaled to fit the container *\/\r\n.vg-timeline .vg-stage{\r\n position:relative;\r\n width:1387px; \/* keep base width so scaling is accurate *\/\r\n height:768px;\r\n transform-origin: top left; \/* scale from top-left *\/\r\n will-change: transform;\r\n margin:0;\r\n}\r\n\r\n\/* ===== Heading styles (overlay, not scaled) ===== *\/\r\n.vg-timeline .vg-head{\r\n position:absolute;\r\n top:18px; left:0; width:100%;\r\n padding: 0 clamp(12px, 2.5vw, 32px);\r\n display:flex; flex-direction:column; align-items:center; gap:8px;\r\n z-index:4; \/* above buttons\/art *\/\r\n pointer-events:none; \/* clicks pass through to timeline *\/\r\n text-align:center;\r\n}\r\n\r\n.vg-timeline .vg-title{\r\n margin:0;\r\n display:inline-flex; \/* keep parts on one line cluster *\/\r\n align-items:center;\r\n gap:0.35ch;\r\n letter-spacing:-0.01em; \/* -1% tracking *\/\r\n font-family:'Roc Grotesk','Host Grotesk','Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;\r\n}\r\n\r\n\/* \"Verdant\" \u2014 Medium 500, white *\/\r\n.vg-timeline .vg-title .vg-strong{\r\n font-weight:500; \/* Medium *\/\r\n font-size:54.66px;\r\n line-height:66.05px;\r\n color:#FFFFFF;\r\n vertical-align:middle;\r\n display:inline-block;\r\n letter-spacing:-0.01em;\r\n}\r\n\r\n\/* \"The\" and \"Story\" \u2014 Regular 400, 50% white *\/\r\n.vg-timeline .vg-title .vg-dim{\r\n font-weight:400; \/* Regular *\/\r\n font-size:38.19px;\r\n line-height:46.14px;\r\n color:rgba(255,255,255,0.5);\r\n vertical-align:middle;\r\n display:inline-block;\r\n letter-spacing:-0.01em;\r\n}\r\n\r\n\/* Subheading *\/\r\n.vg-timeline .vg-sub{\r\n margin:0;\r\n font-family:'Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;\r\n font-size:clamp(12px, 1.4vw, 18px);\r\n line-height:1.4;\r\n color:#b2c8c6;\r\n max-width:min(90%, 980px);\r\n}\r\n\r\n\/* Optional: responsive downscale to prevent wrapping on tiny screens *\/\r\n@media (max-width: 560px){\r\n .vg-timeline .vg-title .vg-strong{ font-size:40px; line-height:48px; }\r\n .vg-timeline .vg-title .vg-dim{ font-size:28px; line-height:34px; }\r\n}\r\n\r\n\/* ================= LEFT PANEL (left-aligned, shifted -530px) ================= *\/\r\n.vg-timeline .left-rail{\r\n position:absolute;\r\n left:-554px; \/* your requested offset; scales with the stage *\/\r\n top:200px; width:980px; height:430px;\r\n background:transparent; overflow:visible;\r\n}\r\n\/* crossfade layers *\/\r\n.vg-timeline .left-art{\r\n position:absolute; inset:0; z-index:0; pointer-events:none;\r\n background-repeat:no-repeat; background-size:contain; background-position:left center;\r\n opacity:0; transition: opacity .5s cubic-bezier(.22,1,.36,1);\r\n}\r\n.vg-timeline .left-art.bgA{ opacity:1; }\r\n\r\n\/* up\/down buttons *\/\r\n.vg-timeline .scroll-btn{\r\n position:absolute; left:600px; width:44px; height:44px; border-radius:50%;\r\n background:#0b3a3e; color:#b2c8c6; display:grid; place-items:center; z-index:2;\r\n box-shadow:0 6px 12px rgba(0,0,0,.25) inset, 0 0 0 2px rgba(215,222,39,.15);\r\n cursor:pointer; user-select:none; transition: transform .18s ease;\r\n}\r\n.vg-timeline .scroll-btn:active{ transform:scale(.96); }\r\n.vg-timeline .scroll-btn.up{ top:128px;} \r\n.vg-timeline .scroll-btn.down{ top:275px;}\r\n.vg-timeline .scroll-btn:before{ content:\"\"; width:10px; height:10px; border-right:3px solid #b2c8c6; border-bottom:3px solid #b2c8c6; transform:rotate(-135deg);}\r\n.vg-timeline .scroll-btn.down:before{ transform:rotate(45deg); }\r\n\r\n\/* years viewport (fixed window) *\/\r\n.vg-timeline .year-viewport{\r\n position:absolute; left:700px; top:20px; width:250px; height:var(--year-view-h);\r\n overflow:hidden; z-index:1;\r\n}\r\n.vg-timeline .year-stack{\r\n position:absolute; left:0; top:0; display:flex; flex-direction:column; gap:0;\r\n transform: translateY(0);\r\n transition: transform .45s cubic-bezier(.22,1,.36,1);\r\n will-change: transform;\r\n}\r\n.vg-timeline .year{\r\n width:100%; height:var(--year-item-h); display:flex; align-items:center;\r\n font-family:\"Space Grotesk\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-size:28px; letter-spacing:.02em; color:var(--ink-dim);\r\n opacity:.7; cursor:pointer; user-select:none; transform-origin:left center;\r\n transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .22s ease, color .22s ease;\r\n}\r\n.vg-timeline .year:hover{ opacity:.9; transform:translateX(2px); }\r\n.vg-timeline .year.active{ color:var(--lime); font-weight:700; opacity:1; transform: scale(2.2); }\r\n\r\n\/* ================= RIGHT PANEL (anchor to right edge WITHOUT using `right:`) ================= *\/\r\n.vg-timeline .vg-card{\r\n position:absolute;\r\n left:100%; \/* place panel\u2019s left edge at stage\u2019s right edge *\/\r\n top:200px;\r\n width:980px;\r\n height:430px;\r\n overflow:hidden;\r\n transform: translateX(calc(-100% + var(--card-nudge))); \/* pull back inside by its width *\/\r\n}\r\n\/* crossfade layers *\/\r\n.vg-timeline .vg-card-bg{\r\n position:absolute; inset:0; z-index:0; pointer-events:none;\r\n background-repeat:no-repeat; background-size:cover;\r\n background-position: calc(100% + var(--img-shift)) center; \/* keep right edge bias for art *\/\r\n transform: translateX(var(--img-shift));\r\n opacity:0; transition: opacity .55s cubic-bezier(.22,1,.36,1);\r\n}\r\n.vg-timeline .vg-card-bg.bgA{ opacity:1; }\r\n\r\n@media (prefers-reduced-motion: reduce){\r\n .vg-timeline .year-stack, .vg-timeline .year, .vg-timeline .vg-card-bg, .vg-timeline .left-art, .vg-timeline .scroll-btn{ transition:none !important; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n\/* Responsive scaler (fits width & clamps to available height) + timeline logic *\/\r\n\/* Uses UNIQUE classes .vg-card and .vg-card-bg to avoid theme\/Elementor collisions *\/\r\n(function(){\r\n const TIMELINE_DATA = {\r\n \"2008\": { rightImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/09\/Frame-1618873130-5-scaled.png\",\r\n leftImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Group-2546.png\" },\r\n \"2009\": { rightImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873130-20-scaled.png\",\r\n leftImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Group-2546-1.png\" },\r\n \"2011\": { rightImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Group-2546-2-1-scaled.png\",\r\n leftImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Group-2546-2.png\" },\r\n \"2013\": { rightImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/09\/Frame-1618873130-1-scaled.png\",\r\n leftImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Group-2546-3.png\" },\r\n \"2014\": { rightImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873130-23-scaled.png\",\r\n leftImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Group-2546.png\" },\r\n \"2018\": { rightImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873130-24-scaled.png\",\r\n leftImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Group-2546-1.png\" },\r\n \"2022\": { rightImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873130-25-scaled.png\",\r\n leftImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Group-2546-3.png\" },\r\n \"2023\": { rightImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873130-26-scaled.png\",\r\n leftImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Group-2546.png\" },\r\n \"2024\": { rightImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873130-27-scaled.png\",\r\n leftImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Group-2546-1.png\" },\r\n \"2025\": { rightImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/09\/Frame-1618873130-3-scaled.png\",\r\n leftImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Group-2546-2.png\" }\r\n };\r\n\r\n document.querySelectorAll('.vg-timeline').forEach(function(root){\r\n const baseW = parseFloat(root.getAttribute('data-base-w')) || 1387;\r\n const baseH = parseFloat(root.getAttribute('data-base-h')) || 768;\r\n const stage = root.querySelector('.vg-stage');\r\n\r\n \/\/ --- Responsive scaler: fit width, clamp to viewport height, center if needed ---\r\n function resize(){\r\n const cw = root.clientWidth || root.getBoundingClientRect().width;\r\n const vhAvail = Math.max(window.innerHeight || baseH, 320) * 0.95; \/\/ leave breathing room\r\n const wScale = cw \/ baseW;\r\n const hScale = vhAvail \/ baseH;\r\n const scale = Math.min(wScale, hScale); \/\/ contain in both width & height\r\n\r\n const stageW = baseW * scale;\r\n const tx = (cw - stageW) \/ 2; \/\/ center horizontally if height-limited\r\n\r\n stage.style.transform = `translate(${tx}px, 0) scale(${scale})`;\r\n root.style.height = (baseH * scale) + 'px';\r\n }\r\n resize();\r\n window.addEventListener('resize', resize);\r\n if ('ResizeObserver' in window){\r\n const ro = new ResizeObserver(resize);\r\n ro.observe(root);\r\n }\r\n\r\n \/\/ --- Timeline logic (scoped) ---\r\n const yearStack = root.querySelector('.year-stack');\r\n const yearEls = Array.from(root.querySelectorAll('.year'));\r\n const upBtn = root.querySelector('.scroll-btn.up');\r\n const downBtn = root.querySelector('.scroll-btn.down');\r\n\r\n const rightA = root.querySelector('.vg-card .vg-card-bg.bgA');\r\n const rightB = root.querySelector('.vg-card .vg-card-bg.bgB');\r\n const leftA = root.querySelector('.left-rail .left-art.bgA');\r\n const leftB = root.querySelector('.left-rail .left-art.bgB');\r\n\r\n const ITEM_H = parseFloat(getComputedStyle(root).getPropertyValue('--year-item-h')) || 56;\r\n const VIEW_H = parseFloat(getComputedStyle(root).getPropertyValue('--year-view-h')) || 220;\r\n const CENTER = (VIEW_H - ITEM_H) \/ 2;\r\n\r\n let currentIndex = 0;\r\n let rightFront = 'A';\r\n let leftFront = 'A';\r\n let animLock = false;\r\n\r\n function applyTransform(){\r\n const ty = CENTER - currentIndex * ITEM_H;\r\n yearStack.style.transform = `translateY(${ty}px)`;\r\n }\r\n function updateActive(){\r\n yearEls.forEach((el,i)=>el.classList.toggle('active', i===currentIndex));\r\n }\r\n function crossfade(layers, frontRef, newUrl){\r\n const front = frontRef === 'A' ? layers.A : layers.B;\r\n const back = frontRef === 'A' ? layers.B : layers.A;\r\n if (newUrl) back.style.backgroundImage = `url(\"${newUrl}\")`;\r\n back.style.opacity = 1;\r\n front.style.opacity = 0;\r\n return frontRef === 'A' ? 'B' : 'A';\r\n }\r\n function renderYear(year){\r\n const data = TIMELINE_DATA[year]; if (!data) return;\r\n animLock = true;\r\n rightFront = crossfade({A:rightA, B:rightB}, rightFront, data.rightImage);\r\n leftFront = crossfade({A:leftA, B:leftB }, leftFront, data.leftImage);\r\n setTimeout(()=>{ animLock = false; }, 550);\r\n }\r\n function setActiveByIndex(idx){\r\n if (animLock) return;\r\n const len = yearEls.length;\r\n currentIndex = ((idx % len) + len) % len; \/\/ wrap-around both ways\r\n updateActive();\r\n applyTransform();\r\n renderYear(yearEls[currentIndex].dataset.year);\r\n }\r\n\r\n yearEls.forEach((el, i)=> el.addEventListener('click', ()=> setActiveByIndex(i)));\r\n upBtn.addEventListener('click', ()=> setActiveByIndex(currentIndex - 1));\r\n downBtn.addEventListener('click', ()=> setActiveByIndex(currentIndex + 1));\r\n document.addEventListener('keydown', (e)=>{\r\n if (e.key === 'ArrowUp') setActiveByIndex(currentIndex - 1);\r\n if (e.key === 'ArrowDown') setActiveByIndex(currentIndex + 1);\r\n });\r\n\r\n \/\/ Seed images on first paint (no fade)\r\n (function init(){\r\n const y0 = yearEls[currentIndex].dataset.year;\r\n const d0 = TIMELINE_DATA[y0];\r\n rightA.style.backgroundImage = `url(\"${d0.rightImage}\")`;\r\n rightB.style.backgroundImage = `url(\"${d0.rightImage}\")`;\r\n leftA.style.backgroundImage = `url(\"${d0.leftImage}\")`;\r\n leftB.style.backgroundImage = `url(\"${d0.leftImage}\")`;\r\n applyTransform();\r\n updateActive();\r\n })();\r\n });\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8780bba e-con-full e-flex e-con e-child\" data-id=\"8780bba\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t<div class=\"elementor-element elementor-element-6624d32 e-con-full e-flex e-con e-child\" data-id=\"6624d32\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cd799a0 animated-slow elementor-invisible elementor-widget elementor-widget-image\" data-id=\"cd799a0\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInUp"}\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/elementor\/thumbs\/image-108-ra90uuo09u8l71q7aa1p4zyse490gllh5blaun25g4.png\" title=\"image 108\" alt=\"image 108\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fa72844 animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"fa72844\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInUp","_animation_delay":100}\" 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\" \/>\r\n <title>The Vision<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@500&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n #the-vision {\r\n font-family: \"Host Grotesk\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight: 500;\r\n font-style: normal; \/* CSS has no 'Medium' style; weight covers it *\/\r\n font-size: 32px;\r\n line-height: 51.02px;\r\n letter-spacing: 0;\r\n text-align: center;\r\n vertical-align: middle;\r\n margin: 0.5rem 0;\r\n display: inline-block;\r\n color: #92A282; \/* your text color *\/\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <h1 id=\"the-vision\">The Vision<\/h1>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c1d61ba e-con-full e-flex e-con e-child\" data-id=\"c1d61ba\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7121f11 animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"7121f11\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInUp","_animation_delay":200}\" 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\" \/>\r\n <title>Paper with Purpose. Progress by Design.<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@700&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n #brand-line {\r\n font-family: \"Host Grotesk\";\r\n font-weight: 700;\r\n font-style: normal;\r\n font-size: 48px;\r\n line-height: 58px;\r\n letter-spacing: 0.48px;\r\n text-align: center; \/* desktop\/tablet *\/\r\n vertical-align: middle;\r\n display: inline-block;\r\n margin: 0.5rem 0;\r\n }\r\n\r\n \/* Per-sentence colors *\/\r\n #brand-line .pp { color: #436F49; }\r\n #brand-line .pbd { color: #0C4C44; }\r\n\r\n \/* Mobile: left align *\/\r\n @media (max-width: 640px) {\r\n #brand-line {\r\n text-align: left;\r\n display: block; \/* make it full-width for clean left align *\/\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <h1 id=\"brand-line\">\r\n <span class=\"pp\">Stationery with Purpose.<\/span>\r\n <span class=\"pbd\">Progress by Design.<\/span>\r\n <\/h1>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5ab1326 animated-slow elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"5ab1326\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInUp","_animation_delay":300}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">To be India\u2019s most sustainable and trusted stationery products brand, <br>delivering purposeful value to institutions and individuals alike.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-da327d1 elementor-widget elementor-widget-html\" data-id=\"da327d1\" data-element_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\" \/>\r\n <title>Two Boxes \u2022 Space Grotesk Body Text<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@500;600;700&family=Space+Grotesk:wght@400&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n :root{\r\n --stroke: linear-gradient(217.63deg, #456F46 0%, #FFFFFF 50.45%, #D7E128 99.93%);\r\n --fill: rgba(255,255,255,0.85);\r\n --hover-fill: #3D4D25;\r\n --heading-purpose: #436F49;\r\n --heading-design: #0C4C44;\r\n --text: #4b5563;\r\n --text-hover: #ffffff;\r\n }\r\n\r\n \/* ===== Desktop (unchanged) ===== *\/\r\n .wrap_verdant {\r\n width: 1362px; \/* original fixed width *\/\r\n display: flex;\r\n gap: 24px;\r\n justify-content: flex-start;\r\n align-items: flex-start;\r\n margin: 0 auto; \/* center on large screens *\/\r\n }\r\n\r\n .box{\r\n width: 669px; \/* original fixed width *\/\r\n height: 332px; \/* original fixed height *\/\r\n padding: 24px;\r\n border-radius: 24px;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n gap: 16px;\r\n text-align: left;\r\n opacity: 1;\r\n transform: rotate(0deg);\r\n\r\n \/* Rounded gradient border *\/\r\n border: 1.54px solid transparent;\r\n background:\r\n linear-gradient(var(--fill), var(--fill)) padding-box,\r\n var(--stroke) border-box;\r\n background-clip: padding-box, border-box;\r\n\r\n \/* Inside shadow + backdrop blur *\/\r\n box-shadow: 0px 0px 8.49px 0px #00000040 inset;\r\n -webkit-backdrop-filter: blur(38.6108283996582px);\r\n backdrop-filter: blur(38.6108283996582px);\r\n\r\n transition: background 200ms ease, box-shadow 200ms ease, color 180ms ease;\r\n will-change: background, box-shadow, transform, opacity;\r\n }\r\n\r\n .box:hover,\r\n .box:focus-within{\r\n background:\r\n linear-gradient(var(--hover-fill), var(--hover-fill)) padding-box,\r\n var(--stroke) border-box;\r\n box-shadow: 0px 0px 10px 0px #00000040 inset;\r\n }\r\n\r\n .box__media { margin: 0; width: 79px; height: 79px; position: relative; }\r\n .box__img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity 180ms ease; }\r\n .box__img--hover{ opacity: 0; }\r\n .box:hover .box__img--hover, .box:focus-within .box__img--hover{ opacity: 1; }\r\n .box:hover .box__img--base, .box:focus-within .box__img--base{ opacity: 0; }\r\n\r\n .box__title{\r\n margin: 0;\r\n font-family: \"Host Grotesk\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight: 600;\r\n font-size: 32px;\r\n line-height: 100%;\r\n letter-spacing: 0;\r\n transition: color 180ms ease;\r\n }\r\n .box--purpose .box__title { color: var(--heading-purpose); }\r\n .box--design .box__title { color: var(--heading-design); }\r\n .box:hover .box__title, .box:focus-within .box__title { color: #fff; }\r\n\r\n .box__text{\r\n margin: 0;\r\n font-family: \"Space Grotesk\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight: 400;\r\n font-size: 16px;\r\n line-height: 30px;\r\n letter-spacing: 0;\r\n color: var(--text);\r\n transition: color 180ms ease;\r\n }\r\n .box:hover .box__text, .box:focus-within .box__text { color: var(--text-hover); }\r\n\r\n \/* ===== Reveal animations (unchanged) ===== *\/\r\n @keyframes vg-fade-in-left { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: translateX(0); } }\r\n @keyframes vg-fade-in-right { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } }\r\n\r\n .box[data-reveal]{ opacity: 0; transform: translateX(0); }\r\n .box[data-reveal=\"left\"].is-inview { animation: vg-fade-in-left 700ms ease-out both; }\r\n .box[data-reveal=\"right\"].is-inview { animation: vg-fade-in-right 700ms ease-out both; animation-delay: 120ms; }\r\n\r\n @media (prefers-reduced-motion: reduce){\r\n .box[data-reveal]{ opacity: 1 !important; animation: none !important; }\r\n }\r\n\r\n \/* ====== Fluid container for any width below design ====== *\/\r\n @media (max-width: 1362px){\r\n .wrap_verdant{\r\n width: 100%;\r\n padding: 0 20px; \/* gutter on narrow screens *\/\r\n box-sizing: border-box;\r\n flex-wrap: wrap; \/* allow wrapping *\/\r\n }\r\n }\r\n\r\n \/* ====== Tablet: two flexible halves, auto height ====== *\/\r\n @media (max-width: 1024px){\r\n .wrap_verdant{ gap: 20px; }\r\n .box{\r\n width: calc(50% - 10px); \/* two columns *\/\r\n height: auto; \/* let content define height *\/\r\n padding: 20px;\r\n }\r\n .box__media{ width: 64px; height: 64px; }\r\n .box__title{ font-size: clamp(24px, 2.6vw, 28px); }\r\n .box__text { font-size: 15px; line-height: 1.7; }\r\n }\r\n\r\n \/* ====== Mobile: stacked, full-width ====== *\/\r\n @media (max-width: 640px){\r\n .wrap_verdant{\r\n flex-direction: column;\r\n gap: 16px;\r\n padding: 10px ;\r\n }\r\n .box{\r\n width: 100%;\r\n height: auto;\r\n padding: 16px;\r\n border-radius: 20px;\r\n gap: 12px;\r\n }\r\n .box__media{ width: 56px; height: 56px; }\r\n .box__title{ font-size: clamp(20px, 6vw, 26px); line-height: 1.1; }\r\n .box__text { font-size: 15px; line-height: 1.65; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <main class=\"wrap_verdant\" aria-label=\"Two boxes with Space Grotesk body text\">\r\n \r\n <section class=\"box box--purpose\" data-reveal=\"left\" tabindex=\"0\">\r\n <figure class=\"box__media\" aria-hidden=\"true\">\r\n <img decoding=\"async\" class=\"box__img box__img--base\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/image-109.png\"\r\n alt=\"\" \/>\r\n <img decoding=\"async\" class=\"box__img box__img--hover\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/image-109-3.png\"\r\n alt=\"\" \/>\r\n <\/figure>\r\n <h3 class=\"box__title\">Our Mission<\/h3>\r\n <p class=\"box__text\">\r\n To manufacture, innovate, and supply product-based solutions that are:<br>\r\n \u25cf Eco-conscious<br>\r\n \u25cf Technically sound<br>\r\n \u25cf Economically accessible<br>\r\n \u25cf Crafted with care\r\n <\/p>\r\n <\/section>\r\n\r\n \r\n <section class=\"box box--design\" data-reveal=\"right\" tabindex=\"0\">\r\n <figure class=\"box__media\" aria-hidden=\"true\">\r\n <img decoding=\"async\" class=\"box__img box__img--base\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/image-109-5.png\"\r\n alt=\"\" \/>\r\n <img decoding=\"async\" class=\"box__img box__img--hover\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/image-109-4.png\"\r\n alt=\"\" \/>\r\n <\/figure>\r\n <h3 class=\"box__title\">Our Values<\/h3>\r\n <p class=\"box__text\">\r\n \u25cf Purpose with Product \u2013 Every item we create solves a real-world need.<br>\r\n \u25cf Sustainability First \u2013 From materials to methods, we put the planet first.<br>\r\n \u25cf Integrity Always \u2013 We keep our promises and deliver quality consistently.<br>\r\n \u25cf People-Centric \u2013 We grow with our team, vendors, and clients.<br>\r\n \u25cf Innovation in Action \u2013 Adapting and improving is how we lead.\r\n <\/p>\r\n <\/section>\r\n <\/main>\r\n\r\n <script>\r\n \/\/ Reveal on scroll (runs once per card)\r\n document.addEventListener('DOMContentLoaded', function () {\r\n var cards = document.querySelectorAll('.box[data-reveal]');\r\n if ('IntersectionObserver' in window) {\r\n var io = new IntersectionObserver(function (entries, obs) {\r\n entries.forEach(function (e) {\r\n if (e.isIntersecting) {\r\n e.target.classList.add('is-inview');\r\n obs.unobserve(e.target);\r\n }\r\n });\r\n }, { threshold: 0.2 });\r\n cards.forEach(function (el) { io.observe(el); });\r\n } else {\r\n \/\/ Fallback: show immediately\r\n cards.forEach(function (el) { el.classList.add('is-inview'); });\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fb7c880 e-con-full e-flex e-con e-child\" data-id=\"fb7c880\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t<div class=\"elementor-element elementor-element-9abdc45 e-con-full e-flex e-con e-child\" data-id=\"9abdc45\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6d74601 elementor-widget elementor-widget-html\" data-id=\"6d74601\" data-element_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\" \/>\r\n <title>Image Slider \u2014 Custom Arrows + Hover Swap (Tablet Responsive)<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@400;500;700&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n \r\n <link rel=\"preload\" as=\"image\" href=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Key-Leadership-2.png\" \/>\r\n <link rel=\"preload\" as=\"image\" href=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Key-Leadership-4.png\" \/>\r\n <link rel=\"preload\" as=\"image\" href=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873184.png\" \/>\r\n <link rel=\"preload\" as=\"image\" href=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873185.png\" \/>\r\n\r\n <style>\r\n :root{\r\n \/* tuning knobs *\/\r\n --slider-max: 1363px;\r\n --arrow-size: clamp(36px, 5vw, 56px);\r\n --arrow-offset: clamp(8px, 2vw, 20px);\r\n --slide-ease: cubic-bezier(.22,.61,.36,1);\r\n }\r\n\r\n \/* Wrapper *\/\r\n .vg-slider{\r\n width: 100%;\r\n max-width: min(var(--slider-max), 95vw);\r\n margin-inline: auto;\r\n font-family:\"Host Grotesk\",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;\r\n }\r\n\r\n .vg-slider .vg-viewport{\r\n position: relative;\r\n \/* Desktop\/base aspect: your original wide frame *\/\r\n aspect-ratio: 1363 \/ 612;\r\n overflow: hidden;\r\n isolation: isolate;\r\n }\r\n\r\n \/* Slides row *\/\r\n .vg-slider .vg-slides{\r\n display: flex;\r\n height: 100%;\r\n width: 100%;\r\n margin: 0; padding: 0; list-style: none;\r\n transform: translateX(0%);\r\n transition: transform .6s var(--slide-ease);\r\n will-change: transform;\r\n }\r\n .vg-slider .vg-slide{\r\n min-width: 100%;\r\n height: 100%;\r\n position: relative;\r\n }\r\n\r\n \/* Crossfade container *\/\r\n .vg-slider .vg-swap{ position: absolute; inset: 0; }\r\n .vg-slider .vg-swap img{\r\n position: absolute; inset: 0;\r\n width: 100%; height: 100%;\r\n display: block;\r\n object-fit: cover; \/* prevent distortion *\/\r\n object-position: center;\r\n user-select: none;\r\n -webkit-user-drag: none;\r\n transition: opacity .4s ease;\r\n pointer-events: none; \/* keep pointer events on container *\/\r\n }\r\n .vg-slider .vg-swap img.hover{ opacity: 0; }\r\n \/* Hover (for mouse devices) *\/\r\n .vg-slider .vg-swap:hover img.hover{ opacity: 1; }\r\n \/* Touch press (added via JS on touchstart) *\/\r\n .vg-slider .vg-swap.is-pressed img.hover{ opacity: 1; }\r\n\r\n \/* Arrows (use your PNGs) *\/\r\n .vg-slider .vg-arrow{\r\n position: absolute; top: 50%; transform: translateY(-50%);\r\n border: none; background: none; cursor: pointer; z-index: 2; padding: 0;\r\n touch-action: manipulation;\r\n }\r\n .vg-slider .vg-prev{ left: var(--arrow-offset); }\r\n .vg-slider .vg-next{ right: var(--arrow-offset); }\r\n\r\n .vg-slider .vg-arrow .vg-icon{\r\n width: var(--arrow-size); height: var(--arrow-size);\r\n display: block; object-fit: contain;\r\n filter: drop-shadow(0 2px 8px rgba(0,0,0,.25));\r\n transition: transform .2s ease;\r\n pointer-events: none;\r\n }\r\n .vg-slider .vg-arrow:hover .vg-icon{ transform: scale(1.05); }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .vg-slider .vg-slides { transition: none; }\r\n .vg-slider .vg-swap img { transition: none; }\r\n }\r\n\r\n \/* ===========================\r\n TABLET TUNING (incl. P12)\r\n 600px\u20131200px\r\n Make the banner a bit taller for tablets\r\n =========================== *\/\r\n @media (min-width: 600px) and (max-width: 1200px){\r\n .vg-slider{ max-width: min(var(--slider-max), 96vw); }\r\n .vg-slider .vg-viewport{ aspect-ratio: 1363 \/ 680; } \/* slightly taller than desktop *\/\r\n }\r\n\r\n \/* Wide tablets \/ small laptops (e.g., P12 landscape ~1472px) *\/\r\n @media (min-width: 1201px) and (max-width: 1600px){\r\n .vg-slider{ max-width: min(var(--slider-max), 92vw); }\r\n \/* keep base aspect here; arrows scale with clamp() *\/\r\n }\r\n\r\n \/* Phones (optional) \u2014 even taller to look good on narrow screens *\/\r\n @media (max-width: 599.98px){\r\n .vg-slider{ max-width: 100vw; }\r\n .vg-slider .vg-viewport{ aspect-ratio: 16 \/ 9; } \/* taller on mobile for presence *\/\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"vg-slider\" id=\"vg-slider-1\" data-interval=\"4000\" data-pause-on-hover=\"true\"\r\n role=\"region\" aria-roledescription=\"carousel\" aria-label=\"Image slider\" tabindex=\"0\">\r\n <div class=\"vg-viewport\">\r\n <ul class=\"vg-slides\">\r\n \r\n <li class=\"vg-slide\" aria-label=\"Slide 1\">\r\n <div class=\"vg-swap\" aria-hidden=\"true\">\r\n <img\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Key-Leadership-6-scaled.png\"\r\n alt=\"Key Leadership\"\r\n loading=\"eager\" decoding=\"async\">\r\n <img\r\n class=\"hover\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Key-Leadership-2-2-scaled.png\"\r\n alt=\"\" loading=\"eager\" decoding=\"async\">\r\n <\/div>\r\n <\/li>\r\n\r\n \r\n <li class=\"vg-slide\" aria-label=\"Slide 2\">\r\n <div class=\"vg-swap\" aria-hidden=\"true\">\r\n <img\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Key-Leadership-1-2-scaled.png\"\r\n alt=\"Key Leadership \u2013 Alternative\"\r\n draggable=\"false\" loading=\"lazy\" decoding=\"async\">\r\n <img\r\n class=\"hover\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Key-Leadership-3-3-scaled.png\"\r\n alt=\"\" loading=\"lazy\" decoding=\"async\">\r\n <\/div>\r\n <\/li>\r\n <\/ul>\r\n\r\n \r\n <button class=\"vg-arrow vg-prev\" aria-label=\"Previous slide\" type=\"button\">\r\n <img loading=\"lazy\" class=\"vg-icon\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873184.png\"\r\n alt=\"\" width=\"48\" height=\"48\" decoding=\"async\"\/>\r\n <\/button>\r\n <button class=\"vg-arrow vg-next\" aria-label=\"Next slide\" type=\"button\">\r\n <img loading=\"lazy\" class=\"vg-icon\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873185.png\"\r\n alt=\"\" width=\"48\" height=\"48\" decoding=\"async\"\/>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n (() => {\r\n function initVGSlider(root){\r\n const slidesWrap = root.querySelector('.vg-slides');\r\n const btnPrev = root.querySelector('.vg-prev');\r\n const btnNext = root.querySelector('.vg-next');\r\n\r\n let index = 0;\r\n const count = root.querySelectorAll('.vg-slide').length;\r\n let timer = null;\r\n const interval = parseInt(root.dataset.interval || '4000', 10);\r\n const pauseOnHover = root.dataset.pauseOnHover === 'true';\r\n\r\n function update(){\r\n slidesWrap.style.transform = `translateX(-${index * 100}%)`;\r\n }\r\n function goTo(i){\r\n index = (i + count) % count;\r\n update();\r\n restartAutoplay();\r\n }\r\n function next(){ goTo(index + 1); }\r\n function prev(){ goTo(index - 1); }\r\n\r\n btnNext.addEventListener('click', next);\r\n btnPrev.addEventListener('click', prev);\r\n\r\n \/\/ Keyboard\r\n root.addEventListener('keydown', (e) => {\r\n if(e.key === 'ArrowRight') next();\r\n if(e.key === 'ArrowLeft') prev();\r\n });\r\n\r\n \/\/ Swipe\r\n let startX = 0, dx = 0, touching = false;\r\n slidesWrap.addEventListener('touchstart', (e) => {\r\n touching = true; startX = e.touches[0].clientX; dx = 0;\r\n }, {passive:true});\r\n slidesWrap.addEventListener('touchmove', (e) => {\r\n if(!touching) return; dx = e.touches[0].clientX - startX;\r\n }, {passive:true});\r\n slidesWrap.addEventListener('touchend', () => {\r\n touching = false;\r\n if(Math.abs(dx) > 40) { dx < 0 ? next() : prev(); }\r\n dx = 0;\r\n });\r\n\r\n \/\/ Touch-friendly \"hover swap\"\r\n const swaps = root.querySelectorAll('.vg-swap');\r\n const isTouch = window.matchMedia('(hover: none)').matches || 'ontouchstart' in window;\r\n if (isTouch) {\r\n swaps.forEach(s => {\r\n s.addEventListener('touchstart', () => s.classList.add('is-pressed'), {passive:true});\r\n s.addEventListener('touchend', () => s.classList.remove('is-pressed'));\r\n s.addEventListener('touchcancel',() => s.classList.remove('is-pressed'));\r\n });\r\n }\r\n\r\n \/\/ Autoplay (respects reduced motion)\r\n const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n function startAutoplay(){ stopAutoplay(); if(!prefersReduced) timer = setInterval(next, interval); }\r\n function stopAutoplay(){ if(timer){ clearInterval(timer); timer = null; } }\r\n function restartAutoplay(){ if(timer){ startAutoplay(); } }\r\n startAutoplay();\r\n\r\n if(pauseOnHover){\r\n const vp = root.querySelector('.vg-viewport');\r\n vp.addEventListener('mouseenter', stopAutoplay);\r\n vp.addEventListener('mouseleave', startAutoplay);\r\n }\r\n\r\n update();\r\n }\r\n\r\n document.querySelectorAll('.vg-slider').forEach(initVGSlider);\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-733a2db e-con-full e-flex e-con e-child\" data-id=\"733a2db\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t<div class=\"elementor-element elementor-element-e102079 e-con-full e-flex e-con e-child\" data-id=\"e102079\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5486eba elementor-widget elementor-widget-spacer\" data-id=\"5486eba\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a6f8833 e-con-full animated-slow e-flex elementor-invisible e-con e-child\" data-id=\"a6f8833\" data-element_type=\"container\" data-settings=\"{"background_background":"video","background_video_link":"https:\\\/\\\/youtu.be\\\/hrG6vvRRHbQ","animation":"fadeInUp","background_play_on_mobile":"yes"}\">\n\t\t<div class=\"elementor-background-video-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-video-embed\"><\/div>\n\t\t\t\t\t\t<\/div><div class=\"elementor-element elementor-element-7809931 e-flex e-con-boxed e-con e-child\" data-id=\"7809931\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-6d7b456 e-con-full e-flex e-con e-child\" data-id=\"6d7b456\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fd0fa9d elementor-widget elementor-widget-image\" data-id=\"fd0fa9d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"199\" height=\"56\" src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/07\/Group-2487.png\" class=\"attachment-large size-large wp-image-337\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9aac721 elementor-widget elementor-widget-html\" data-id=\"9aac721\" data-element_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 <title>Footer Menu<\/title>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link \r\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@400&display=swap\" \r\n rel=\"stylesheet\"\r\n >\r\n <style>\r\n .site-footer {\r\n padding: 24px 0;\r\n }\r\n .footer-nav ul {\r\n list-style: none;\r\n margin: 0;\r\n padding: 0;\r\n display: flex;\r\n justify-content: center;\r\n font-family: 'Host Grotesk', sans-serif;\r\n font-weight: 400;\r\n font-style: normal;\r\n font-size: 16px;\r\n line-height: 26px;\r\n letter-spacing: 0%;\r\n }\r\n .footer-nav li {\r\n position: relative;\r\n }\r\n \/* dot separator between items *\/\r\n .footer-nav li + li::before {\r\n content: \"\u00b7\";\r\n margin: 0 12px;\r\n color: #fff;\r\n line-height: 26px;\r\n }\r\n .footer-nav a {\r\n color: #fff;\r\n text-decoration: none;\r\n }\r\n .footer-nav a:hover {\r\n text-decoration: underline;\r\n }\r\n @media (max-width: 480px) {\r\n .footer-nav ul {\r\n font-size: 14px;\r\n line-height: 22px;\r\n }\r\n .footer-nav li + li::before {\r\n margin: 0 8px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n\r\n <footer class=\"site-footer\">\r\n <nav class=\"footer-nav\">\r\n <ul>\r\n <li><a href=\"\/\">Home<\/a><\/li>\r\n <li><a href=\"\/about\">About<\/a><\/li>\r\n <li><a href=\"\/companies\">Companies<\/a><\/li>\r\n <li><a href=\"\/facilities\">Facilities<\/a><\/li>\r\n <li><a href=\"\/contact\">Contact<\/a><\/li>\r\n <\/ul>\r\n <\/nav>\r\n <\/footer>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cad4c95 elementor-widget elementor-widget-html\" data-id=\"cad4c95\" data-element_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>Request for Brochure Button<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n \/* Scoped + timing vars *\/\r\n .rfb-scope { \r\n --t: .45s; \r\n --ease: cubic-bezier(.22,.61,.36,1);\r\n display: inline-block; \r\n }\r\n\r\n .rfb-scope .rfb-btn {\r\n appearance: none;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n \/* keep content above bg layers *\/\r\n position: relative;\r\n z-index: 0;\r\n overflow: hidden;\r\n\r\n border: 1px solid #CFCFCF;\r\n border-radius: 4px;\r\n cursor: pointer;\r\n color: #FFFFFF;\r\n\r\n \/* padding from your spec *\/\r\n padding-top: 16px;\r\n padding-right: 32px;\r\n padding-bottom: 16px;\r\n padding-left: 32px;\r\n\r\n \/* transitions *\/\r\n transition: \r\n filter var(--t) var(--ease),\r\n box-shadow var(--t) var(--ease),\r\n transform .05s ease;\r\n\r\n \/* text (default) *\/\r\n font-family: \"Space Grotesk\", sans-serif;\r\n font-weight: 400; \/* Regular *\/\r\n font-size: 18px;\r\n line-height: 28px;\r\n letter-spacing: 0;\r\n text-align: center;\r\n vertical-align: middle;\r\n background: none; \/* backgrounds handled by ::before\/::after *\/\r\n }\r\n\r\n \/* Default background layer *\/\r\n .rfb-scope .rfb-btn::before,\r\n .rfb-scope .rfb-btn::after {\r\n content:\"\";\r\n position:absolute; inset:0;\r\n z-index: 0; \/* behind label *\/\r\n transition: opacity var(--t) var(--ease);\r\n background-position: center;\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n }\r\n .rfb-scope .rfb-btn::before {\r\n background-image: url(\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/07\/Background-2.png\");\r\n opacity: 1;\r\n }\r\n \/* Hover background layer *\/\r\n .rfb-scope .rfb-btn::after {\r\n background-image: url(\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/07\/Background-3.png\");\r\n opacity: 0;\r\n }\r\n\r\n \/* Label above bg layers *\/\r\n .rfb-scope .rfb-label {\r\n position: relative; \r\n z-index: 1; \r\n color:#FFFFFF;\r\n pointer-events: none; \/* ensures hover stays on button *\/\r\n }\r\n\r\n \/* Hover\/focus: crossfade and bump weight to 500 (Medium) *\/\r\n .rfb-scope .rfb-btn:hover::after,\r\n .rfb-scope .rfb-btn:focus-visible::after { opacity: 1; }\r\n .rfb-scope .rfb-btn:hover::before,\r\n .rfb-scope .rfb-btn:focus-visible::before { opacity: 0; }\r\n\r\n .rfb-scope .rfb-btn:hover,\r\n .rfb-scope .rfb-btn:focus-visible { filter: brightness(0.96); }\r\n .rfb-scope .rfb-btn:hover .rfb-label,\r\n .rfb-scope .rfb-btn:focus-visible .rfb-label {\r\n font-weight: 500; \/* Medium on hover *\/\r\n }\r\n\r\n .rfb-scope .rfb-btn:active { transform: translateY(1px); }\r\n .rfb-scope .rfb-btn:focus-visible {\r\n outline: none;\r\n box-shadow: 0 0 0 3px rgba(154, 198, 255, .8);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"rfb-scope\">\r\n <button class=\"rfb-btn\" type=\"button\" aria-label=\"Request for Brochure\">\r\n <span class=\"rfb-label\">Request for Brochure<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b6b22dc e-con-full e-flex e-con e-child\" data-id=\"b6b22dc\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-215ae2b elementor-widget elementor-widget-html\" data-id=\"215ae2b\" data-element_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 <title>Company Address<\/title>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link\r\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@400;700&display=swap\"\r\n rel=\"stylesheet\"\r\n >\r\n <style>\r\n\r\n .company-address {\r\n text-align: right;\r\n white-space: pre-line; \/* preserves single line break *\/\r\n }\r\n\r\n .company-name {\r\n font-family: 'Host Grotesk', sans-serif;\r\n font-weight: 700;\r\n font-size: 20px;\r\n line-height: 26px;\r\n color: #D7DE27;\r\n margin: 0; \/* reset default paragraph margin *\/\r\n }\r\n\r\n .company-details {\r\n font-family: 'Host Grotesk', sans-serif;\r\n font-weight: 400;\r\n font-size: 16px;\r\n line-height: 26px;\r\n color: #FAFAFA;\r\n margin: 0; \/* reset default paragraph margin *\/\r\n }\r\n \/* Tablet & below: align left *\/\r\n@media (max-width: 1024px) {\r\n .company-address {\r\n text-align: left; \/* use 'start' if you might support RTL: text-align: start; *\/\r\n }\r\n}\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"company-address\">\r\n <p class=\"company-name\">Verdant Stationery\u00a0Pvt.\u00a0Ltd.<\/p>\r\n <p class=\"company-details\">RS 14\/1A, Kolavennu (V), Kankipadu (M),\r\n Krishna District, Andhra Pradesh 521 151. INDIA<\/p>\r\n <\/div>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d977bc9 elementor-widget elementor-widget-html\" data-id=\"d977bc9\" data-element_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 <title>Email Link<\/title>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link \r\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@400&display=swap\" \r\n rel=\"stylesheet\"\r\n >\r\n <style>\r\n .email-link {\r\n font-family: 'Host Grotesk', sans-serif;\r\n font-weight: 400;\r\n font-style: normal;\r\n font-size: 16px;\r\n line-height: 26px;\r\n letter-spacing: 0%;\r\n color: #FAFAFA;\r\n text-decoration: none;\r\n }\r\n .email-link:hover {\r\n text-decoration: underline;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <a href=\"mailto:hello@verdantgroup.co.in\" class=\"email-link\">\r\n hello@verdantgroup.co.in\r\n <\/a>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d1e4945 elementor-widget elementor-widget-html\" data-id=\"d1e4945\" data-element_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 <title>Website Link<\/title>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link \r\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@600&display=swap\" \r\n rel=\"stylesheet\"\r\n >\r\n <style>\r\n .website-link {\r\n font-family: 'Host Grotesk', sans-serif;\r\n font-weight: 600;\r\n font-style: normal;\r\n font-size: 16px;\r\n line-height: 26px;\r\n letter-spacing: 0%;\r\n color: #FAFAFA;\r\n text-decoration: none;\r\n }\r\n .website-link:hover {\r\n text-decoration: underline;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <a href=\"https:\/\/www.verdantgroup.co.in\" class=\"website-link\" target=\"_blank\" rel=\"noopener\">\r\n www.verdantgroup.co.in\r\n <\/a>\r\n<\/body>\r\n<\/html>\r\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\t\t<div class=\"elementor-element elementor-element-5d281ca elementor-widget elementor-widget-spacer\" data-id=\"5d281ca\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1d80a92 e-flex e-con-boxed e-con e-child\" data-id=\"1d80a92\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-bedc61f e-con-full e-flex e-con e-child\" data-id=\"bedc61f\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-24bbd10 elementor-widget elementor-widget-html\" data-id=\"24bbd10\" data-element_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 <title>Footer Copyright & Links<\/title>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link \r\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@400&display=swap\" \r\n rel=\"stylesheet\"\r\n >\r\n <style>\r\n .footer-legal {\r\n font-family: 'Host Grotesk', sans-serif;\r\n font-weight: 400;\r\n font-style: normal;\r\n font-size: 14px;\r\n line-height: 22px;\r\n letter-spacing: 0%;\r\n color: #DEE1E6;\r\n text-align: center;\r\n padding: 16px 0;\r\n }\r\n .footer-legal a {\r\n color: #DEE1E6;\r\n text-decoration: none;\r\n margin: 0 8px;\r\n }\r\n .footer-legal a:hover {\r\n text-decoration: underline;\r\n }\r\n .footer-legal .separator {\r\n margin: 0 8px;\r\n color: #DEE1E6;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n\r\n <footer class=\"footer-legal\">\r\n \u00a9 2025 Verdant Stationery\u00a0Pvt.\u00a0Ltd.\r\n <span class=\"separator\">\u00b7<\/span>\r\n <a href=\"\/privacy\">Privacy<\/a>\r\n <span class=\"separator\">\u00b7<\/span>\r\n <a href=\"\/terms\">Terms<\/a>\r\n <\/footer>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6bb949e e-con-full e-flex e-con e-child\" data-id=\"6bb949e\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-af9d77c elementor-shape-circle e-grid-align-right elementor-grid-0 elementor-widget elementor-widget-social-icons\" data-id=\"af9d77c\" data-element_type=\"widget\" data-widget_type=\"social-icons.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-social-icons-wrapper elementor-grid\" role=\"list\">\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\" role=\"listitem\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-x-twitter elementor-repeater-item-f9169ea\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">X-twitter<\/span>\n\t\t\t\t\t\t<svg class=\"e-font-icon-svg e-fab-x-twitter\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z\"><\/path><\/svg>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\" role=\"listitem\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-facebook elementor-repeater-item-03da899\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Facebook<\/span>\n\t\t\t\t\t\t<svg class=\"e-font-icon-svg e-fab-facebook\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z\"><\/path><\/svg>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\" role=\"listitem\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-linkedin elementor-repeater-item-0431a37\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Linkedin<\/span>\n\t\t\t\t\t\t<svg class=\"e-font-icon-svg e-fab-linkedin\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z\"><\/path><\/svg>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\" role=\"listitem\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-youtube elementor-repeater-item-3fddd41\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Youtube<\/span>\n\t\t\t\t\t\t<svg class=\"e-font-icon-svg e-fab-youtube\" viewBox=\"0 0 576 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z\"><\/path><\/svg>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\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\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Menu \u2014 Verdant (Infrastructure dropdown only, unique classes) Home About Us Stationery & More Infrastructure Operations & Productions Facilities & Machinery Menu \u2014 Verdant (QC dropdown \u2022 item bg on hover) Quality Control Awards Certifications CSR Blog Contact Us Precise Text over SVG Mask (Image) About Us Our Story Heading Our Story Responsive Heading The… <a href=\"https:\/\/verdantgroup.co.in\/index.php\/about-us\/\" rel=\"bookmark\"><span class=\"screen-reader-text\">About Us<\/span><\/a><\/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":{"_acf_changed":false,"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"class_list":["post-635","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/verdantgroup.co.in\/index.php\/wp-json\/wp\/v2\/pages\/635","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/verdantgroup.co.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/verdantgroup.co.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/verdantgroup.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/verdantgroup.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=635"}],"version-history":[{"count":697,"href":"https:\/\/verdantgroup.co.in\/index.php\/wp-json\/wp\/v2\/pages\/635\/revisions"}],"predecessor-version":[{"id":5449,"href":"https:\/\/verdantgroup.co.in\/index.php\/wp-json\/wp\/v2\/pages\/635\/revisions\/5449"}],"wp:attachment":[{"href":"https:\/\/verdantgroup.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t

\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t $\"\"$ \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t

\n\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nMenu \u2014 Verdant (Infrastructure dropdown only, unique classes)<\/title>\r\n\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@400;700&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n<style>\r\n \/* ====== Layout Root ====== *\/\r\n .vgx-header {\r\n display:flex; justify-content:center; align-items:center;\r\n }\r\n nav.vgx-nav {\r\n position:relative;\r\n --vgx-gap: 24px;\r\n }\r\n\r\n \/* ====== Top Row ====== *\/\r\n .vgx-row {\r\n list-style:none; margin:0; padding:0;\r\n display:flex; align-items:center;\r\n }\r\n .vgx-node { position:relative; }\r\n\r\n \/* vertical divider between top-level items *\/\r\n .vgx-node:not(:last-child){\r\n border-right:1px solid rgba(0, 40, 43, .3);\r\n }\r\n\r\n \/* ====== Type + Color ====== *\/\r\n .vgx-link,\r\n .vgx-sublink,\r\n .vgx-toggle {\r\n font-family:\"Host Grotesk\";\r\n font-weight:400;\r\n font-size:16px; line-height:1.35; letter-spacing:0;\r\n text-align:center; color:#00282B;\r\n display:inline-flex; align-items:center; justify-content:center;\r\n vertical-align:middle; text-decoration:none; white-space:nowrap;\r\n padding:0 20px 8px 20px;\r\n background:none; border:0; cursor:pointer;\r\n }\r\n\r\n \/* Hover underline with gap *\/\r\n .vgx-link:hover,\r\n .vgx-sublink:hover,\r\n .vgx-toggle:hover{\r\n text-decoration:underline;\r\n text-decoration-thickness:2px;\r\n text-underline-offset:12px;\r\n text-decoration-skip-ink:auto;\r\n }\r\n\r\n \/* Keep underline ON for current page *\/\r\n .vgx-link[aria-current=\"page\"],\r\n .vgx-sublink[aria-current=\"page\"]{\r\n text-decoration:underline;\r\n text-decoration-thickness:2px;\r\n text-underline-offset:6px;\r\n text-decoration-skip-ink:auto;\r\n }\r\n\r\n \/* Optional keyboard focus ring *\/\r\n .vgx-link:focus-visible,\r\n .vgx-sublink:focus-visible,\r\n .vgx-toggle:focus-visible{\r\n outline:2px solid #00282B; outline-offset:2px;\r\n text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px;\r\n }\r\n\r\n \/* ====== Dropdown (Infrastructure ONLY) ====== *\/\r\n .vgx-has-fly { position:relative; }\r\n\r\n \/* caret triangle *\/\r\n .vgx-caret{\r\n width:0; height:0; margin-left:6px;\r\n border-left:5px solid transparent;\r\n border-right:5px solid transparent;\r\n border-top:6px solid currentColor;\r\n transition:transform .2s ease;\r\n }\r\n\r\n \/* flyout panel *\/\r\n .vgx-flyout{\r\n --vgx-item-bg: url('https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/07\/Background-3.png');\r\n position:absolute; top:100%; left:0;\r\n min-width:220px; margin:8px 0 0 0; padding:8px;\r\n list-style:none; background:#fff;\r\n border:1px solid rgba(0,0,0,.08);\r\n box-shadow:0 8px 24px rgba(0,0,0,.12);\r\n transform:translateY(8px);\r\n opacity:0; visibility:hidden; pointer-events:none;\r\n transition:transform .2s ease, opacity .2s ease, visibility .2s ease;\r\n z-index:20;\r\n }\r\n\r\n \/* show on hover\/focus or when toggled open *\/\r\n .vgx-has-fly:hover .vgx-flyout,\r\n .vgx-has-fly:focus-within .vgx-flyout,\r\n .vgx-has-fly.vgx-is-open .vgx-flyout{\r\n transform:translateY(0);\r\n opacity:1; visibility:visible; pointer-events:auto;\r\n }\r\n\r\n \/* rotate caret when open *\/\r\n .vgx-has-fly:hover > .vgx-toggle .vgx-caret,\r\n .vgx-has-fly:focus-within > .vgx-toggle .vgx-caret,\r\n .vgx-has-fly.vgx-is-open > .vgx-toggle .vgx-caret{\r\n transform:rotate(180deg);\r\n }\r\n\r\n \/* flyout link layout (prep for background image on item hover) *\/\r\n .vgx-sublink{\r\n justify-content:flex-start; text-align:left; width:100%;\r\n padding:8px 10px;\r\n color:#00282B;\r\n text-decoration-color:#00282B;\r\n border-radius:6px;\r\n background-repeat:no-repeat;\r\n background-position:center;\r\n background-size:cover;\r\n transition: background-image .2s ease, color .2s ease, text-decoration-color .2s ease;\r\n }\r\n\r\n \/* underline parent if current page is a descendant *\/\r\n .vgx-toggle.vgx-is-ancestor,\r\n .vgx-link.vgx-is-ancestor{\r\n text-decoration:underline;\r\n text-decoration-thickness:2px;\r\n text-underline-offset:6px;\r\n text-decoration-skip-ink:auto;\r\n }\r\n\r\n \/* ===== Background image ON submenu item hover\/focus\/active ===== *\/\r\n .vgx-flyout .vgx-sublink:hover,\r\n .vgx-flyout .vgx-sublink:focus,\r\n .vgx-flyout .vgx-sublink:active{\r\n background-image: var(--vgx-item-bg) !important;\r\n color:#FFFFFF !important;\r\n text-decoration-color:#FFFFFF !important;\r\n }\r\n\r\n \/* ===== Kill theme hover backgrounds (keep our item image only) ===== *\/\r\n .vgx-nav .vgx-toggle,\r\n .vgx-nav .vgx-toggle:hover,\r\n .vgx-nav .vgx-toggle:focus,\r\n .vgx-nav .vgx-toggle:active,\r\n .vgx-nav .vgx-link:hover,\r\n .vgx-nav .vgx-link:focus,\r\n .vgx-nav .vgx-link:active,\r\n .vgx-nav .vgx-node:hover,\r\n .vgx-nav .vgx-has-fly:hover,\r\n .vgx-nav .vgx-has-fly.vgx-is-open{\r\n background:transparent !important;\r\n background-color:transparent !important;\r\n background-image:none !important;\r\n box-shadow:none !important;\r\n }\r\n\r\n \/* Lock top-level link colors *\/\r\n .vgx-nav .vgx-link,\r\n .vgx-nav .vgx-toggle{\r\n color:#00282B !important;\r\n text-decoration-color:#00282B !important;\r\n }\r\n\r\n \/* Optional: remove iOS blue tap flash *\/\r\n .vgx-nav a, .vgx-nav button{ -webkit-tap-highlight-color: rgba(0,0,0,0); }\r\n\r\n \/* responsive tweak *\/\r\n @media (max-width: 720px){\r\n .vgx-row{ gap:14px; }\r\n .vgx-flyout{ min-width:180px; }\r\n .vgx-node:not(:last-child){\r\n padding-right:10px; margin-right:10px;\r\n }\r\n }\r\n\r\n \/* If you explicitly want no extra padding on some links: *\/\r\n .vgx-link--tight{ padding:0; }\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n<header class=\"vgx-header\">\r\n <nav class=\"vgx-nav\" aria-label=\"Main\">\r\n <ul class=\"vgx-row\">\r\n <li class=\"vgx-node\">\r\n <a href=\"\/\" class=\"vgx-link\">Home<\/a>\r\n <\/li>\r\n\r\n <li class=\"vgx-node\">\r\n <a href=\"https:\/\/verdantgroup.co.in\/index.php\/about-us\/\" class=\"vgx-link\">About Us<\/a>\r\n <\/li>\r\n\r\n <li class=\"vgx-node\">\r\n <a href=\"https:\/\/verdantgroup.co.in\/index.php\/stationery\/\" class=\"vgx-link\">Stationery & More<\/a>\r\n <\/li>\r\n\r\n \r\n <li class=\"vgx-node vgx-has-fly\">\r\n <button type=\"button\"\r\n class=\"vgx-link vgx-toggle\"\r\n aria-haspopup=\"menu\"\r\n aria-expanded=\"false\"\r\n aria-controls=\"vgx-infra-menu\">\r\n Infrastructure\r\n <span class=\"vgx-caret\" aria-hidden=\"true\"><\/span>\r\n <\/button>\r\n\r\n <ul id=\"vgx-infra-menu\" class=\"vgx-flyout\" role=\"menu\" aria-label=\"Infrastructure submenu\">\r\n <li class=\"vgx-flyitem\" role=\"none\">\r\n <a role=\"menuitem\"\r\n href=\"https:\/\/verdantgroup.co.in\/index.php\/operations-productions\/\"\r\n class=\"vgx-sublink\">Operations & Productions<\/a>\r\n <\/li>\r\n <li class=\"vgx-flyitem\" role=\"none\">\r\n <a role=\"menuitem\"\r\n href=\"https:\/\/verdantgroup.co.in\/index.php\/facilities-machinery\/\"\r\n class=\"vgx-sublink\">Facilities & Machinery<\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/li>\r\n <\/ul>\r\n <\/nav>\r\n<\/header>\r\n\r\n<script>\r\n(function(){\r\n \/\/ ===== Helpers to mark current page and ancestors =====\r\n var nav = document.querySelector('.vgx-nav');\r\n if (!nav) return;\r\n\r\n var links = nav.querySelectorAll('a');\r\n var here = new URL(window.location.href);\r\n\r\n function normPath(pathname){\r\n \/\/ treat \/index.php\/... as \/...\r\n var p = pathname.replace(\/^\\\/index\\.php(\\\/|$)\/, '\/');\r\n if (p !== '\/' && !p.endsWith('\/')) p += '\/';\r\n return p;\r\n }\r\n\r\n var herePath = normPath(here.pathname);\r\n var hereOrigin = here.origin;\r\n\r\n links.forEach(function(a){\r\n var href = a.getAttribute('href');\r\n if (!href) return;\r\n var target = new URL(href, window.location.origin);\r\n if (target.origin !== hereOrigin) return;\r\n\r\n var tPath = normPath(target.pathname);\r\n\r\n \/\/ Exact match \u2192 current page\r\n if (tPath === herePath){\r\n a.setAttribute('aria-current', 'page');\r\n }\r\n\r\n \/\/ Ancestor marking (different class name from original)\r\n if (herePath.startsWith(tPath) && tPath !== '\/'){\r\n a.classList.add('vgx-is-ancestor');\r\n }\r\n });\r\n\r\n \/\/ Mark Infrastructure toggle as ancestor if one of its submenu links is active\r\n var toggle = nav.querySelector('.vgx-toggle');\r\n var fly = nav.querySelector('#vgx-infra-menu');\r\n if (toggle && fly){\r\n var subLinks = fly.querySelectorAll('a');\r\n var isAncestor = Array.from(subLinks).some(function(a){\r\n try{\r\n var t = new URL(a.getAttribute('href'), window.location.origin);\r\n var p = normPath(t.pathname);\r\n return (p === herePath) || herePath.startsWith(p);\r\n }catch(e){ return false; }\r\n });\r\n if (isAncestor){\r\n toggle.classList.add('vgx-is-ancestor');\r\n }\r\n }\r\n\r\n \/\/ ====== Toggle behavior (hover, focus, click, outside, Escape) ======\r\n var holder = toggle && toggle.closest('.vgx-has-fly');\r\n if (holder && toggle){\r\n holder.addEventListener('mouseenter', function(){\r\n toggle.setAttribute('aria-expanded', 'true');\r\n });\r\n holder.addEventListener('mouseleave', function(){\r\n toggle.setAttribute('aria-expanded', 'false');\r\n });\r\n holder.addEventListener('focusin', function(){\r\n toggle.setAttribute('aria-expanded', 'true');\r\n });\r\n holder.addEventListener('focusout', function(e){\r\n if (!holder.contains(e.relatedTarget)){\r\n toggle.setAttribute('aria-expanded', 'false');\r\n }\r\n });\r\n\r\n \/\/ Click to toggle (for touch\/mobile)\r\n toggle.addEventListener('click', function(){\r\n var nowOpen = holder.classList.toggle('vgx-is-open');\r\n toggle.setAttribute('aria-expanded', String(nowOpen));\r\n });\r\n\r\n \/\/ Close on outside click\r\n document.addEventListener('click', function(e){\r\n if (!holder.contains(e.target)){\r\n holder.classList.remove('vgx-is-open');\r\n toggle.setAttribute('aria-expanded', 'false');\r\n }\r\n });\r\n\r\n \/\/ Close on Escape\r\n document.addEventListener('keydown', function(e){\r\n if (e.key === 'Escape'){\r\n holder.classList.remove('vgx-is-open');\r\n toggle.setAttribute('aria-expanded', 'false');\r\n toggle.focus();\r\n }\r\n });\r\n }\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-51a2bb5 e-con-full e-flex e-con e-child\" data-id=\"51a2bb5\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fa31f33 elementor-widget elementor-widget-image\" data-id=\"fa31f33\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"84\" height=\"80\" src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Group-2491-2.png\" class=\"attachment-large size-large wp-image-1172\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-64662b9 e-grid e-con-full e-con e-child\" data-id=\"64662b9\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-13cae51 e-con-full e-flex e-con e-child\" data-id=\"13cae51\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-02faf8e elementor-widget elementor-widget-html\" data-id=\"02faf8e\" data-element_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\" \/>\r\n <title>Menu \u2014 Verdant (QC dropdown \u2022 item bg on hover)<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@400;700&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n \/* ===== Base layout ===== *\/\r\n .qcx-header{\r\n display:flex; justify-content:center; align-items:center;\r\n }\r\n nav.qcx-nav{ --qcx-gap:24px; position:relative; }\r\n\r\n .qcx-list{\r\n list-style:none; margin:0; padding:0;\r\n display:flex; align-items:center;\r\n }\r\n .qcx-item, .qcx-subitem{ position:relative; }\r\n\r\n \/* vertical divider between top-level items *\/\r\n .qcx-item:not(:last-child){\r\n border-right:1px solid rgba(0, 40, 43, .3);\r\n }\r\n\r\n \/* ===== Typography + spacing ===== *\/\r\n .qcx-link,\r\n .qcx-sublink,\r\n .qcx-trigger{\r\n font-family:\"Host Grotesk\";\r\n font-weight:400;\r\n font-style:normal;\r\n font-size:16px;\r\n line-height:1.35;\r\n letter-spacing:0;\r\n text-align:center;\r\n\r\n display:inline-flex; align-items:center; justify-content:center;\r\n vertical-align:middle;\r\n text-decoration:none;\r\n padding:0 35px 8px 35px;\r\n white-space:nowrap;\r\n background:none; border:0; cursor:pointer;\r\n color:#00282B;\r\n }\r\n\r\n \/* Hover underline with gap *\/\r\n .qcx-link:hover,\r\n .qcx-sublink:hover,\r\n .qcx-trigger:hover{\r\n text-decoration:underline;\r\n text-decoration-thickness:2px;\r\n text-underline-offset:12px;\r\n text-decoration-skip-ink:auto;\r\n }\r\n\r\n \/* Keep underline ON for current page *\/\r\n .qcx-link[aria-current=\"page\"],\r\n .qcx-sublink[aria-current=\"page\"]{\r\n text-decoration:underline;\r\n text-decoration-thickness:2px;\r\n text-underline-offset:6px;\r\n text-decoration-skip-ink:auto;\r\n }\r\n\r\n \/* Optional keyboard focus *\/\r\n .qcx-link:focus-visible,\r\n .qcx-sublink:focus-visible,\r\n .qcx-trigger:focus-visible{\r\n outline:2px solid #00282B; outline-offset:2px;\r\n text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px;\r\n text-decoration-skip-ink:auto;\r\n }\r\n\r\n \/* ===== Dropdown (Quality Control ONLY) ===== *\/\r\n .qcx-has-panel{ position:relative; }\r\n\r\n \/* caret *\/\r\n .qcx-caret{\r\n width:0; height:0; margin-left:6px;\r\n border-left:5px solid transparent;\r\n border-right:5px solid transparent;\r\n border-top:6px solid currentColor;\r\n transition:transform .2s ease;\r\n }\r\n\r\n \/* submenu panel *\/\r\n .qcx-panel{\r\n --qcx-item-bg: url('https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/07\/Background-3.png');\r\n position:absolute; top:100%; left:0;\r\n min-width:220px;\r\n margin:8px 0 0 0; padding:8px;\r\n list-style:none; background:#fff;\r\n border:1px solid rgba(0,0,0,.08);\r\n box-shadow:0 8px 24px rgba(0,0,0,.12);\r\n transform:translateY(8px);\r\n opacity:0; visibility:hidden; pointer-events:none;\r\n transition:transform .2s ease, opacity .2s ease, visibility .2s ease;\r\n z-index:20;\r\n }\r\n\r\n \/* show panel *\/\r\n .qcx-has-panel:hover .qcx-panel,\r\n .qcx-has-panel:focus-within .qcx-panel,\r\n .qcx-has-panel.qcx-open .qcx-panel{\r\n transform:translateY(0);\r\n opacity:1; visibility:visible; pointer-events:auto;\r\n }\r\n\r\n \/* rotate caret when open *\/\r\n .qcx-has-panel:hover > .qcx-trigger .qcx-caret,\r\n .qcx-has-panel:focus-within > .qcx-trigger .qcx-caret,\r\n .qcx-has-panel.qcx-open > .qcx-trigger .qcx-caret{\r\n transform:rotate(180deg);\r\n }\r\n\r\n \/* submenu link layout *\/\r\n .qcx-sublink{\r\n justify-content:flex-start; text-align:left;\r\n width:100%; padding:8px 10px;\r\n color:#00282B;\r\n text-decoration-color:#00282B;\r\n border-radius:6px; \/* nice rounding for bg image edges *\/\r\n background-repeat:no-repeat; \/* needed for hover bg *\/\r\n background-position:center;\r\n background-size:cover;\r\n transition: background-image .2s ease, color .2s ease, text-decoration-color .2s ease;\r\n }\r\n\r\n \/* underline parent if current page is a descendant *\/\r\n .qcx-ancestor{\r\n text-decoration:underline;\r\n text-decoration-thickness:2px;\r\n text-underline-offset:6px;\r\n text-decoration-skip-ink:auto;\r\n }\r\n\r\n \/* ===== BG IMAGE ON SUBMENU ITEM (hover\/active\/focus) ===== *\/\r\n .qcx-panel .qcx-sublink:hover,\r\n .qcx-panel .qcx-sublink:focus,\r\n .qcx-panel .qcx-sublink:active{\r\n background-image: var(--qcx-item-bg) !important;\r\n color:#FFFFFF !important;\r\n text-decoration-color:#FFFFFF !important;\r\n border-color: rgba(255,255,255,.3);\r\n box-shadow:none;\r\n }\r\n\r\n \/* ===== Kill theme tints on top-level items, but allow submenu item bg ===== *\/\r\n .qcx-nav .qcx-trigger,\r\n .qcx-nav .qcx-trigger:hover,\r\n .qcx-nav .qcx-trigger:focus,\r\n .qcx-nav .qcx-trigger:active,\r\n .qcx-nav .qcx-link:hover,\r\n .qcx-nav .qcx-link:focus,\r\n .qcx-nav .qcx-link:active,\r\n .qcx-nav .qcx-item:hover,\r\n .qcx-nav .qcx-has-panel:hover,\r\n .qcx-nav .qcx-has-panel.qcx-open{\r\n background: transparent !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n box-shadow: none !important;\r\n filter: none !important;\r\n backdrop-filter: none !important;\r\n }\r\n\r\n \/* Keep top-level link colors Verdant green *\/\r\n .qcx-nav .qcx-link,\r\n .qcx-nav .qcx-trigger{\r\n color:#00282B !important;\r\n text-decoration-color:#00282B !important;\r\n }\r\n\r\n \/* Optional: remove iOS blue tap flash *\/\r\n .qcx-nav a, .qcx-nav button{ -webkit-tap-highlight-color: rgba(0,0,0,0); }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 720px){\r\n .qcx-list{ gap:14px; }\r\n .qcx-panel{ min-width:180px; }\r\n .qcx-item:not(:last-child){ padding-right:10px; margin-right:10px; }\r\n }\r\n\r\n .qcx-link--tight{ padding:0; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <header class=\"qcx-header\">\r\n <nav class=\"qcx-nav\" aria-label=\"Main\">\r\n <ul class=\"qcx-list\">\r\n <li class=\"qcx-item qcx-has-panel\">\r\n <button type=\"button\"\r\n class=\"qcx-trigger\"\r\n aria-haspopup=\"menu\"\r\n aria-expanded=\"false\"\r\n aria-controls=\"qcx-qc-panel\">\r\n Quality Control\r\n <span class=\"qcx-caret\" aria-hidden=\"true\"><\/span>\r\n <\/button>\r\n\r\n <ul id=\"qcx-qc-panel\" class=\"qcx-panel\" role=\"menu\" aria-label=\"Quality Control submenu\">\r\n <li class=\"qcx-subitem\" role=\"none\">\r\n <a role=\"menuitem\" href=\"https:\/\/verdantgroup.co.in\/index.php\/awards\/\" class=\"qcx-sublink\">Awards<\/a>\r\n <\/li>\r\n <li class=\"qcx-subitem\" role=\"none\">\r\n <a role=\"menuitem\" href=\"https:\/\/verdantgroup.co.in\/index.php\/certifications\/\" class=\"qcx-sublink\">Certifications<\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/li>\r\n\r\n <li class=\"qcx-item\">\r\n <a href=\"https:\/\/verdantgroup.co.in\/index.php\/csr\/\" class=\"qcx-link\">CSR<\/a>\r\n <\/li>\r\n\r\n <li class=\"qcx-item\">\r\n <a href=\"https:\/\/verdantgroup.co.in\/index.php\/blog-page-under-maintenance\/\" class=\"qcx-link\">Blog<\/a>\r\n <\/li>\r\n\r\n <li class=\"qcx-item\">\r\n <a href=\"https:\/\/verdantgroup.co.in\/index.php\/contact-us\/\" class=\"qcx-link\">Contact Us<\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/nav>\r\n <\/header>\r\n\r\n <script>\r\n (function(){\r\n \/\/ ===== Mark current page + ancestors =====\r\n var nav = document.querySelector('.qcx-nav');\r\n if (!nav) return;\r\n\r\n var links = nav.querySelectorAll('a');\r\n var here = new URL(window.location.href);\r\n\r\n function normPath(pathname){\r\n var p = pathname.replace(\/^\\\/index\\.php(\\\/|$)\/, '\/');\r\n if (p !== '\/' && !p.endsWith('\/')) p += '\/';\r\n return p;\r\n }\r\n\r\n var herePath = normPath(here.pathname);\r\n var hereOrigin = here.origin;\r\n\r\n links.forEach(function(a){\r\n var href = a.getAttribute('href');\r\n if (!href) return;\r\n\r\n var target = new URL(href, window.location.origin);\r\n if (target.origin !== hereOrigin) return;\r\n\r\n var tPath = normPath(target.pathname);\r\n\r\n \/\/ Exact match \u2192 current page\r\n if (tPath === herePath){\r\n a.setAttribute('aria-current', 'page');\r\n }\r\n\r\n \/\/ Ancestor underline\r\n if (herePath.startsWith(tPath) && tPath !== '\/'){\r\n a.classList.add('qcx-ancestor');\r\n }\r\n });\r\n\r\n \/\/ ===== Toggle aria-expanded on the QC trigger (hover\/focus\/click) =====\r\n var trigger = nav.querySelector('.qcx-trigger');\r\n var holder = trigger && trigger.closest('.qcx-has-panel');\r\n\r\n if (holder && trigger){\r\n holder.addEventListener('mouseenter', function(){\r\n trigger.setAttribute('aria-expanded', 'true');\r\n });\r\n holder.addEventListener('mouseleave', function(){\r\n trigger.setAttribute('aria-expanded', 'false');\r\n });\r\n holder.addEventListener('focusin', function(){\r\n trigger.setAttribute('aria-expanded', 'true');\r\n });\r\n holder.addEventListener('focusout', function(e){\r\n if (!holder.contains(e.relatedTarget)){\r\n trigger.setAttribute('aria-expanded', 'false');\r\n }\r\n });\r\n\r\n \/\/ Click to toggle (touch\/mobile friendly)\r\n trigger.addEventListener('click', function(){\r\n var nowOpen = holder.classList.toggle('qcx-open');\r\n trigger.setAttribute('aria-expanded', String(nowOpen));\r\n });\r\n\r\n \/\/ Close on outside click\r\n document.addEventListener('click', function(e){\r\n if (!holder.contains(e.target)){\r\n holder.classList.remove('qcx-open');\r\n trigger.setAttribute('aria-expanded', 'false');\r\n }\r\n });\r\n\r\n \/\/ Close on Escape\r\n document.addEventListener('keydown', function(e){\r\n if (e.key === 'Escape'){\r\n holder.classList.remove('qcx-open');\r\n trigger.setAttribute('aria-expanded', 'false');\r\n trigger.focus();\r\n }\r\n });\r\n }\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\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\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b67e378 e-con-full e-flex e-con e-child\" data-id=\"b67e378\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-e027206 e-con-full elementor-hidden-mobile elementor-hidden-tablet e-flex e-con e-child\" data-id=\"e027206\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e6740f8 elementor-widget elementor-widget-html\" data-id=\"e6740f8\" data-element_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>Precise Text over SVG Mask (Image)<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n :root {\r\n --page-bg:#0b0f0e;\r\n --fade-dur:.5s;\r\n --fade-ease:cubic-bezier(.22,.61,.36,1);\r\n --text-x: 684.50;\r\n --text-y: 261.50;\r\n }\r\n .wrapd{\r\n width:1420px;\r\n max-width:100%;\r\n aspect-ratio:1369\/523;\r\n position:relative;\r\n isolation:isolate;\r\n margin-inline:auto;\r\n }\r\n\r\n \/* Masked media area *\/\r\n .video-mask{\r\n position:absolute; inset:0; overflow:hidden;\r\n -webkit-mask-image:url('data:image\/svg+xml;utf8,%3Csvg%20width%3D%221369%22%20height%3D%22523%22%20viewBox%3D%220%200%201369%20523%22%20fill%3D%22none%22%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%3E%0A%3Cpath%20d%3D%22M1114.73%200.00585938C1115.2%200.0033307%201115.68%200.00112273%201116.15%200.000976562C1146.8%200.0104331%201175.43%204.99451%201201.85%2014.1816C1240.24%2027.2407%201272.6%2048.7755%201300.38%2076.5049C1307.83%2083.9047%201314.94%2091.7505%201321.67%2099.999C1325.42%20104.547%201329.07%20109.217%201332.64%20114C1332.6%20114.018%201332.55%20114.033%201332.51%20114.051C1332.52%20114.065%201332.53%20114.079%201332.54%20114.093C1330.33%20115.022%201327.94%20115.544%201325.44%20115.544H1165.58V174.7H1276.64C1283.63%20174.7%201289.98%20170.636%201292.93%20164.308L1296.86%20155.947C1299.8%20149.561%201306.15%20145.555%201313.14%20145.555H1336.02C1350.16%20172.03%201360.15%20201.117%201365.06%20231.889H1364.89C1364.9%20231.893%201364.9%20231.897%201364.9%20231.901H1274.25C1267.53%20232.149%201261.48%20236.1%201258.63%20242.281L1254.71%20250.699C1251.76%20257.028%201245.41%20261.092%201238.42%20261.092H1237.89C1237.65%20261.101%201237.42%20261.106%201237.18%20261.106H1165.58V320.195H1210.53C1210.65%20320.195%201210.77%20320.19%201210.89%20320.188C1217.58%20319.862%201223.58%20315.881%201226.42%20309.819L1230.32%20301.458C1233.13%20295.426%201239%20291.519%201245.58%20291.104C1246.04%20291.068%201246.5%20291.049%201246.97%20291.049H1368.14C1366.52%20321.414%201360.06%20350.443%201349.43%20377.383H1349.14C1349.14%20377.39%201349.13%20377.397%201349.13%20377.404H1207.81C1201.15%20377.709%201195.18%20381.644%201192.36%20387.775L1188.49%20396.194C1185.54%20402.523%201179.19%20406.587%201172.2%20406.587H1171.25C1170.97%20406.6%201170.68%20406.609%201170.4%20406.609H1165.58V443.686C1168.93%20439.294%201174.17%20436.666%201179.83%20436.666H1317.37C1295.84%20467.422%201255.55%20510.047%201207.55%20520.575C1196.46%20523.083%201186.89%20523.001%201186.82%20523L1185.67%20522.999C1185.66%20522.999%201185.65%20523%201185.64%20523L967.71%20522.97C967.701%20522.965%20967.692%20522.962%20967.683%20522.957H51.6094C23.1064%20522.957%200.000139057%20498.218%200%20467.701V55.2559C4.15679e-07%2024.739%2023.1063%200.00018587%2051.6094%200H1113.97C1114.22%201.55513e-09%201114.48%200.00195738%201114.73%200.00585938Z%22%20fill%3D%22%23D9D9D9%22\/%3E%0A%3C\/svg%3E%0A');\r\n -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain;\r\n mask-image:url('data:image\/svg+xml;utf8,%3Csvg%20width%3D%221369%22%20height%3D%22523%22%20viewBox%3D%220%200%201369%20523%22%20fill%3D%22none%22%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%3E%0A%3Cpath%20d%3D%22M1114.73%200.00585938C1115.2%200.0033307%201115.68%200.00112273%201116.15%200.000976562C1146.8%200.0104331%201175.43%204.99451%201201.85%2014.1816C1240.24%2027.2407%201272.6%2048.7755%201300.38%2076.5049C1307.83%2083.9047%201314.94%2091.7505%201321.67%2099.999C1325.42%20104.547%201329.07%20109.217%201332.64%20114C1332.6%20114.018%201332.55%20114.033%201332.51%20114.051C1332.52%20114.065%201332.53%20114.079%201332.54%20114.093C1330.33%20115.022%201327.94%20115.544%201325.44%20115.544H1165.58V174.7H1276.64C1283.63%20174.7%201289.98%20170.636%201292.93%20164.308L1296.86%20155.947C1299.8%20149.561%201306.15%20145.555%201313.14%20145.555H1336.02C1350.16%20172.03%201360.15%20201.117%201365.06%20231.889H1364.89C1364.9%20231.893%201364.9%20231.897%201364.9%20231.901H1274.25C1267.53%20232.149%201261.48%20236.1%201258.63%20242.281L1254.71%20250.699C1251.76%20257.028%201245.41%20261.092%201238.42%20261.092H1237.89C1237.65%20261.101%201237.42%20261.106%201237.18%20261.106H1165.58V320.195H1210.53C1210.65%20320.195%201210.77%20320.19%201210.89%20320.188C1217.58%20319.862%201223.58%20315.881%201226.42%20309.819L1230.32%20301.458C1233.13%20295.426%201239%20291.519%201245.58%20291.104C1246.04%20291.068%201246.5%20291.049%201246.97%20291.049H1368.14C1366.52%20321.414%201360.06%20350.443%201349.43%20377.383H1349.14C1349.14%20377.39%201349.13%20377.397%201349.13%20377.404H1207.81C1201.15%20377.709%201195.18%20381.644%201192.36%20387.775L1188.49%20396.194C1185.54%20402.523%201179.19%20406.587%201172.2%20406.587H1171.25C1170.97%20406.6%201170.68%20406.609%201170.4%20406.609H1165.58V443.686C1168.93%20439.294%201174.17%20436.666%201179.83%20436.666H1317.37C1295.84%20467.422%201255.55%20510.047%201207.55%20520.575C1196.46%20523.083%201186.89%20523.001%201186.82%20523L1185.67%20522.999C1185.66%20522.999%201185.65%20523%201185.64%20523L967.71%20522.97C967.701%20522.965%20967.692%20522.962%20967.683%20522.957H51.6094C23.1064%20522.957%200.000139057%20498.218%200%20467.701V55.2559C4.15679e-07%2024.739%2023.1063%200.00018587%2051.6094%200H1113.97C1114.22%201.55513e-09%201114.48%200.00195738%201114.73%200.00585938Z%22%20fill%3D%22%23D9D9D9%22\/%3E%0A%3C\/svg%3E%0A');\r\n mask-repeat:no-repeat; mask-position:center; mask-size:contain; mask-mode:luminance;\r\n }\r\n\r\n \/* Make both video\/img behave the same (we're using img now) *\/\r\n .video-mask :is(video,img){\r\n width:100%; height:100%;\r\n object-fit:cover; display:block;\r\n transform:scale(1);\r\n transition:transform var(--fade-dur) var(--fade-ease);\r\n }\r\n .wrapd:hover .video-mask :is(video,img){ transform:scale(1.03) }\r\n\r\n \/* Decorative overlays (unchanged) *\/\r\n .overlay{\r\n position:absolute; inset:0; pointer-events:none; will-change:opacity;\r\n }\r\n .overlay-default{\r\n background:url('data:image\/svg+xml;utf8,%3Csvg%20width%3D%221369%22%20height%3D%22523%22%20viewBox%3D%220%200%201369%20523%22%20fill%3D%22none%22%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%3E%0A%3Cpath%20d%3D%22M1114.73%200.00585938C1115.2%200.0033307%201115.68%200.00112273%201116.15%200.000976562C1146.8%200.0104331%201175.43%204.99451%201201.85%2014.1816C1240.24%2027.2407%201272.6%2048.7755%201300.38%2076.5049C1307.83%2083.9047%201314.94%2091.7505%201321.67%2099.999C1325.42%20104.547%201329.07%20109.217%201332.64%20114C1332.6%20114.018%201332.55%20114.033%201332.51%20114.051C1332.52%20114.065%201332.53%20114.079%201332.54%20114.093C1330.33%20115.022%201327.94%20115.544%201325.44%20115.544H1165.58V174.7H1276.64C1283.63%20174.7%201289.98%20170.636%201292.93%20164.308L1296.86%20155.947C1299.8%20149.561%201306.15%20145.555%201313.14%20145.555H1336.02C1350.16%20172.03%201360.15%20201.117%201365.06%20231.889H1364.89C1364.9%20231.893%201364.9%20231.897%201364.9%20231.901H1274.25C1267.53%20232.149%201261.48%20236.1%201258.63%20242.281L1254.71%20250.699C1251.76%20257.028%201245.41%20261.092%201238.42%20261.092H1237.89C1237.65%20261.101%201237.42%20261.106%201237.18%20261.106H1165.58V320.195H1210.53C1210.65%20320.195%201210.77%20320.19%201210.89%20320.188C1217.58%20319.862%201223.58%20315.881%201226.42%20309.819L1230.32%20301.458C1233.13%20295.426%201239%20291.519%201245.58%20291.104C1246.04%20291.068%201246.5%20291.049%201246.97%20291.049H1368.14C1366.52%20321.414%201360.06%20350.443%201349.43%20377.383H1349.14C1349.14%20377.39%201349.13%20377.397%201349.13%20377.404H1207.81C1201.15%20377.709%201195.18%20381.644%201192.36%20387.775L1188.49%20396.194C1185.54%20402.523%201179.19%20406.587%201172.2%20406.587H1171.25C1170.97%20406.6%201170.68%20406.609%201170.4%20406.609H1165.58V443.686C1168.93%20439.294%201174.17%20436.666%201179.83%20436.666H1317.37C1295.84%20467.422%201255.55%20510.047%201207.55%20520.575C1196.46%20523.083%201186.89%20523.001%201186.82%20523L1185.67%20522.999C1185.66%20522.999%201185.65%20523%201185.64%20523L967.71%20522.97C967.701%20522.965%20967.692%20522.962%20967.683%20522.957H51.6094C23.1064%20522.957%200.000139057%20498.218%200%20467.701V55.2559C4.15679e-07%2024.739%2023.1063%200.00018587%2051.6094%200H1113.97C1114.22%201.55513e-09%201114.48%200.00195738%201114.73%200.00585938Z%22%20fill%3D%22url%28%23paint0_linear_1748_3639%29%22\/%3E%0A%3Cpath%20d%3D%22M1114.73%200.00585938C1115.2%200.0033307%201115.68%200.00112273%201116.15%200.000976562C1146.8%200.0104331%201175.43%204.99451%201201.85%2014.1816C1240.24%2027.2407%201272.6%2048.7755%201300.38%2076.5049C1307.83%2083.9047%201314.94%2091.7505%201321.67%2099.999C1325.42%20104.547%201329.07%20109.217%201332.64%20114C1332.6%20114.018%201332.55%20114.033%201332.51%20114.051C1332.52%20114.065%201332.53%20114.079%201332.54%20114.093C1330.33%20115.022%201327.94%20115.544%201325.44%20115.544H1165.58V174.7H1276.64C1283.63%20174.7%201289.98%20170.636%201292.93%20164.308L1296.86%20155.947C1299.8%20149.561%201306.15%20145.555%201313.14%20145.555H1336.02C1350.16%20172.03%201360.15%20201.117%201365.06%20231.889H1364.89C1364.9%20231.893%201364.9%20231.897%201364.9%20231.901H1274.25C1267.53%20232.149%201261.48%20236.1%201258.63%20242.281L1254.71%20250.699C1251.76%20257.028%201245.41%20261.092%201238.42%20261.092H1237.89C1237.65%20261.101%201237.42%20261.106%201237.18%20261.106H1165.58V320.195H1210.53C1210.65%20320.195%201210.77%20320.19%201210.89%20320.188C1217.58%20319.862%201223.58%20315.881%201226.42%20309.819L1230.32%20301.458C1233.13%20295.426%201239%20291.519%201245.58%20291.104C1246.04%20291.068%201246.5%20291.049%201246.97%20291.049H1368.14C1366.52%20321.414%201360.06%20350.443%201349.43%20377.383H1349.14C1349.14%20377.39%201349.13%20377.397%201349.13%20377.404H1207.81C1201.15%20377.709%201195.18%20381.644%201192.36%20387.775L1188.49%20396.194C1185.54%20402.523%201179.19%20406.587%201172.2%20406.587H1171.25C1170.97%20406.6%201170.68%20406.609%201170.4%20406.609H1165.58V443.686C1168.93%20439.294%201174.17%20436.666%201179.83%20436.666H1317.37C1295.84%20467.422%201255.55%20510.047%201207.55%20520.575C1196.46%20523.083%201186.89%20523.001%201186.82%20523L1185.67%20522.999C1185.66%20522.999%201185.65%20523%201185.64%20523L967.71%20522.97C967.701%20522.965%20967.692%20522.962%20967.683%20522.957H51.6094C23.1064%20522.957%200.000139057%20498.218%200%20467.701V55.2559C4.15679e-07%2024.739%2023.1063%200.00018587%2051.6094%200H1113.97C1114.22%201.55513e-09%201114.48%200.00195738%201114.73%200.00585938Z%22%20fill%3D%22url%28%23paint1_radial_1748_3639%29%22\/%3E%0A%3Cpath%20d%3D%22M1114.73%200.00585938C1115.2%200.0033307%201115.68%200.00112273%201116.15%200.000976562C1146.8%200.0104331%201175.43%204.99451%201201.85%2014.1816C1240.24%2027.2407%201272.6%2048.7755%201300.38%2076.5049C1307.83%2083.9047%201314.94%2091.7505%201321.67%2099.999C1325.42%20104.547%201329.07%20109.217%201332.64%20114C1332.6%20114.018%201332.55%20114.033%201332.51%20114.051C1332.52%20114.065%201332.53%20114.079%201332.54%20114.093C1330.33%20115.022%201327.94%20115.544%201325.44%20115.544H1165.58V174.7H1276.64C1283.63%20174.7%201289.98%20170.636%201292.93%20164.308L1296.86%20155.947C1299.8%20149.561%201306.15%20145.555%201313.14%20145.555H1336.02C1350.16%20172.03%201360.15%20201.117%201365.06%20231.889H1364.89C1364.9%20231.893%201364.9%20231.897%201364.9%20231.901H1274.25C1267.53%20232.149%201261.48%20236.1%201258.63%20242.281L1254.71%20250.699C1251.76%20257.028%201245.41%20261.092%201238.42%20261.092H1237.89C1237.65%20261.101%201237.42%20261.106%201237.18%20261.106H1165.58V320.195H1210.53C1210.65%20320.195%201210.77%20320.19%201210.89%20320.188C1217.58%20319.862%201223.58%20315.881%201226.42%20309.819L1230.32%20301.458C1233.13%20295.426%201239%20291.519%201245.58%20291.104C1246.04%20291.068%201246.5%20291.049%201246.97%20291.049H1368.14C1366.52%20321.414%201360.06%20350.443%201349.43%20377.383H1349.14C1349.14%20377.39%201349.13%20377.397%201349.13%20377.404H1207.81C1201.15%20377.709%201195.18%20381.644%201192.36%20387.775L1188.49%20396.194C1185.54%20402.523%201179.19%20406.587%201172.2%20406.587H1171.25C1170.97%20406.6%201170.68%20406.609%201170.4%20406.609H1165.58V443.686C1168.93%20439.294%201174.17%20436.666%201179.83%20436.666H1317.37C1295.84%20467.422%201255.55%20510.047%201207.55%20520.575C1196.46%20523.083%201186.89%20523.001%201186.82%20523L1185.67%20522.999C1185.66%20522.999%201185.65%20523%201185.64%20523L967.71%20522.97C967.701%20522.965%20967.692%20522.962%20967.683%20522.957H51.6094C23.1064%20522.957%200.000139057%20498.218%200%20467.701V55.2559C4.15679e-07%2024.739%2023.1063%200.00018587%2051.6094%200H1113.97C1114.22%201.55513e-09%201114.48%200.00195738%201114.73%200.00585938Z%22%20fill%3D%22url%28%23paint2_radial_1748_3639%29%22\/%3E%0A%3Cpath%20d%3D%22M1114.73%200.00585938C1115.2%200.0033307%201115.68%200.00112273%201116.15%200.000976562C1146.8%200.0104331%201175.43%204.99451%201201.85%2014.1816C1240.24%2027.2407%201272.6%2048.7755%201300.38%2076.5049C1307.83%2083.9047%201314.94%2091.7505%201321.67%2099.999C1325.42%20104.547%201329.07%20109.217%201332.64%20114C1332.6%20114.018%201332.55%20114.033%201332.51%20114.051C1332.52%20114.065%201332.53%20114.079%201332.54%20114.093C1330.33%20115.022%201327.94%20115.544%201325.44%20115.544H1165.58V174.7H1276.64C1283.63%20174.7%201289.98%20170.636%201292.93%20164.308L1296.86%20155.947C1299.8%20149.561%201306.15%20145.555%201313.14%20145.555H1336.02C1350.16%20172.03%201360.15%20201.117%201365.06%20231.889H1364.89C1364.9%20231.893%201364.9%20231.897%201364.9%20231.901H1274.25C1267.53%20232.149%201261.48%20236.1%201258.63%20242.281L1254.71%20250.699C1251.76%20257.028%201245.41%20261.092%201238.42%20261.092H1237.89C1237.65%20261.101%201237.42%20261.106%201237.18%20261.106H1165.58V320.195H1210.53C1210.65%20320.195%201210.77%20320.19%201210.89%20320.188C1217.58%20319.862%201223.58%20315.881%201226.42%20309.819L1230.32%20301.458C1233.13%20295.426%201239%20291.519%201245.58%20291.104C1246.04%20291.068%201246.5%20291.049%201246.97%20291.049H1368.14C1366.52%20321.414%201360.06%20350.443%201349.43%20377.383H1349.14C1349.14%20377.39%201349.13%20377.397%201349.13%20377.404H1207.81C1201.15%20377.709%201195.18%20381.644%201192.36%20387.775L1188.49%20396.194C1185.54%20402.523%201179.19%20406.587%201172.2%20406.587H1171.25C1170.97%20406.6%201170.68%20406.609%201170.4%20406.609H1165.58V443.686C1168.93%20439.294%201174.17%20436.666%201179.83%20436.666H1317.37C1295.84%20467.422%201255.55%20510.047%201207.55%20520.575C1196.46%20523.083%201186.89%20523.001%201186.82%20523L1185.67%20522.999C1185.66%20522.999%201185.65%20523%201185.64%20523L967.71%20522.97C967.701%20522.965%20967.692%20522.962%20967.683%20522.957H51.6094C23.1064%20522.957%200.000139057%20498.218%200%20467.701V55.2559C4.15679e-07%2024.739%2023.1063%200.00018587%2051.6094%200H1113.97C1114.22%201.55513e-09%201114.48%200.00195738%201114.73%200.00585938Z%22%20fill%3D%22url%28%23paint3_radial_1748_3639%29%22\/%3E%0A%3Cpath%20d%3D%22M1114.73%200.00585938C1115.2%200.0033307%201115.68%200.00112273%201116.15%200.000976562C1146.8%200.0104331%201175.43%204.99451%201201.85%2014.1816C1240.24%2027.2407%201272.6%2048.7755%201300.38%2076.5049C1307.83%2083.9047%201314.94%2091.7505%201321.67%2099.999C1325.42%20104.547%201329.07%20109.217%201332.64%20114C1332.6%20114.018%201332.55%20114.033%201332.51%20114.051C1332.52%20114.065%201332.53%20114.079%201332.54%20114.093C1330.33%20115.022%201327.94%20115.544%201325.44%20115.544H1165.58V174.7H1276.64C1283.63%20174.7%201289.98%20170.636%201292.93%20164.308L1296.86%20155.947C1299.8%20149.561%201306.15%20145.555%201313.14%20145.555H1336.02C1350.16%20172.03%201360.15%20201.117%201365.06%20231.889H1364.89C1364.9%20231.893%201364.9%20231.897%201364.9%20231.901H1274.25C1267.53%20232.149%201261.48%20236.1%201258.63%20242.281L1254.71%20250.699C1251.76%20257.028%201245.41%20261.092%201238.42%20261.092H1237.89C1237.65%20261.101%201237.42%20261.106%201237.18%20261.106H1165.58V320.195H1210.53C1210.65%20320.195%201210.77%20320.19%201210.89%20320.188C1217.58%20319.862%201223.58%20315.881%201226.42%20309.819L1230.32%20301.458C1233.13%20295.426%201239%20291.519%201245.58%20291.104C1246.04%20291.068%201246.5%20291.049%201246.97%20291.049H1368.14C1366.52%20321.414%201360.06%20350.443%201349.43%20377.383H1349.14C1349.14%20377.39%201349.13%20377.397%201349.13%20377.404H1207.81C1201.15%20377.709%201195.18%20381.644%201192.36%20387.775L1188.49%20396.194C1185.54%20402.523%201179.19%20406.587%201172.2%20406.587H1171.25C1170.97%20406.6%201170.68%20406.609%201170.4%20406.609H1165.58V443.686C1168.93%20439.294%201174.17%20436.666%201179.83%20436.666H1317.37C1295.84%20467.422%201255.55%20510.047%201207.55%20520.575C1196.46%20523.083%201186.89%20523.001%201186.82%20523L1185.67%20522.999C1185.66%20522.999%201185.65%20523%201185.64%20523L967.71%20522.97C967.701%20522.965%20967.692%20522.962%20967.683%20522.957H51.6094C23.1064%20522.957%200.000139057%20498.218%200%20467.701V55.2559C4.15679e-07%2024.739%2023.1063%200.00018587%2051.6094%200H1113.97C1114.22%201.55513e-09%201114.48%200.00195738%201114.73%200.00585938Z%22%20fill%3D%22url%28%23paint4_radial_1748_3639%29%22\/%3E%0A%3Cdefs%3E%0A%3ClinearGradient%20id%3D%22paint0_linear_1748_3639%22%20x1%3D%221163.12%22%20y1%3D%22262%22%20x2%3D%22-5.86037e-06%22%20y2%3D%22262%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%3Cstop%20stop-color%3D%22%2300282B%22%20stop-opacity%3D%220%22\/%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23104E43%22\/%3E%0A%3C\/linearGradient%3E%0A%3CradialGradient%20id%3D%22paint1_radial_1748_3639%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22translate%281238%20471%29%20rotate%28179.705%29%20scale%28389.005%20601.032%29%22%3E%0A%3Cstop%20stop-color%3D%22%231B664C%22\/%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2300282B%22%20stop-opacity%3D%220%22\/%3E%0A%3C\/radialGradient%3E%0A%3CradialGradient%20id%3D%22paint2_radial_1748_3639%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22translate%281319.5%20326.5%29%20rotate%28177.394%29%20scale%28417.932%20312.77%29%22%3E%0A%3Cstop%20stop-color%3D%22%23638A48%22\/%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2300282B%22%20stop-opacity%3D%220%22\/%3E%0A%3C\/radialGradient%3E%0A%3CradialGradient%20id%3D%22paint3_radial_1748_3639%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22translate%281313.5%20191%29%20rotate%28177.477%29%20scale%28374.863%20320.024%29%22%3E%0A%3Cstop%20stop-color%3D%22%237E9138%22\/%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2300282B%22%20stop-opacity%3D%220%22\/%3E%0A%3C\/radialGradient%3E%0A%3CradialGradient%20id%3D%22paint4_radial_1748_3639%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22translate%281242%2073.5%29%20rotate%28174.289%29%20scale%28929.614%20740.933%29%22%3E%0A%3Cstop%20stop-color%3D%22%23B6BE24%22\/%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2300282B%22%20stop-opacity%3D%220%22\/%3E%0A%3C\/radialGradient%3E%0A%3C\/defs%3E%0A%3C\/svg%3E%0A') center\/contain no-repeat; opacity:1;\r\n transition:opacity var(--fade-dur) var(--fade-ease);\r\n }\r\n .overlay-hover{\r\n background:url('data:image\/svg+xml;utf8,%3Csvg%20width%3D%221369%22%20height%3D%22523%22%20viewBox%3D%220%200%201369%20523%22%20fill%3D%22none%22%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%3E%0A%3Cpath%20d%3D%22M1114.73%200.00585938C1115.2%200.0033307%201115.68%200.00112273%201116.15%200.000976562C1146.8%200.0104331%201175.43%204.99451%201201.85%2014.1816C1240.24%2027.2407%201272.6%2048.7755%201300.38%2076.5049C1307.83%2083.9047%201314.94%2091.7505%201321.67%2099.999C1325.42%20104.547%201329.07%20109.217%201332.64%20114C1332.6%20114.018%201332.55%20114.033%201332.51%20114.051C1332.52%20114.065%201332.53%20114.079%201332.54%20114.093C1330.33%20115.022%201327.94%20115.544%201325.44%20115.544H1165.58V174.7H1276.64C1283.63%20174.7%201289.98%20170.636%201292.93%20164.308L1296.86%20155.947C1299.8%20149.561%201306.15%20145.555%201313.14%20145.555H1336.02C1350.16%20172.03%201360.15%20201.117%201365.06%20231.889H1364.89C1364.9%20231.893%201364.9%20231.897%201364.9%20231.901H1274.25C1267.53%20232.149%201261.48%20236.1%201258.63%20242.281L1254.71%20250.699C1251.76%20257.028%201245.41%20261.092%201238.42%20261.092H1237.89C1237.65%20261.101%201237.42%20261.106%201237.18%20261.106H1165.58V320.195H1210.53C1210.65%20320.195%201210.77%20320.19%201210.89%20320.188C1217.58%20319.862%201223.58%20315.881%201226.42%20309.819L1230.32%20301.458C1233.13%20295.426%201239%20291.519%201245.58%20291.104C1246.04%20291.068%201246.5%20291.049%201246.97%20291.049H1368.14C1366.52%20321.414%201360.06%20350.443%201349.43%20377.383H1349.14C1349.14%20377.39%201349.13%20377.397%201349.13%20377.404H1207.81C1201.15%20377.709%201195.18%20381.644%201192.36%20387.775L1188.49%20396.194C1185.54%20402.523%201179.19%20406.587%201172.2%20406.587H1171.25C1170.97%20406.6%201170.68%20406.609%201170.4%20406.609H1165.58V443.686C1168.93%20439.294%201174.17%20436.666%201179.83%20436.666H1317.37C1295.84%20467.422%201255.55%20510.047%201207.55%20520.575C1196.46%20523.083%201186.89%20523.001%201186.82%20523L1185.67%20522.999C1185.66%20522.999%201185.65%20523%201185.64%20523L967.71%20522.97C967.701%20522.965%20967.692%20522.962%20967.683%20522.957H51.6094C23.1064%20522.957%200.000139057%20498.218%200%20467.701V55.2559C4.15679e-07%2024.739%2023.1063%200.00018587%2051.6094%200H1113.97C1114.22%201.55513e-09%201114.48%200.00195738%201114.73%200.00585938Z%22%20fill%3D%22url%28%23paint0_linear_1748_3665%29%22\/%3E%0A%3Cdefs%3E%0A%3ClinearGradient%20id%3D%22paint0_linear_1748_3665%22%20x1%3D%221163.12%22%20y1%3D%22262%22%20x2%3D%22-5.86037e-06%22%20y2%3D%22262%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%3Cstop%20stop-color%3D%22%2300282B%22%20stop-opacity%3D%220%22\/%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23104E43%22\/%3E%0A%3C\/linearGradient%3E%0A%3C\/defs%3E%0A%3C\/svg%3E%0A') center\/contain no-repeat; opacity:0;\r\n transition:opacity var(--fade-dur) var(--fade-ease);\r\n }\r\n .wrapd:hover .overlay-default{opacity:0}\r\n .wrapd:hover .overlay-hover{opacity:1}\r\n\r\n \/* Headline *\/\r\n .about-text{\r\n position:absolute;\r\n left: 75px;\r\n top: calc(var(--text-y) \/ 523 * 100%);\r\n transform: translateY(-50%);\r\n margin: 0;\r\n font-family: \"Space Grotesk\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight: 400;\r\n font-size: clamp(18px, 4.1vw, 56px);\r\n letter-spacing: .5px;\r\n color:#fff;\r\n text-shadow: 0 4px 18px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.25);\r\n line-height:1;\r\n white-space:nowrap;\r\n z-index:3;\r\n pointer-events:none;\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"wrapd\" style=\"--text-x:684.50; --text-y:261.50;\">\r\n <div class=\"video-mask\">\r\n <img\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/4a55b7299dcbf17f3cb727e36b3e19db0e5ae6a4-scaled.png\"\r\n alt=\"Operations and Productions\"\r\n loading=\"lazy\"\r\n decoding=\"async\"\r\n fetchpriority=\"low\"\r\n \/>\r\n <\/div>\r\n\r\n <div class=\"overlay overlay-default\" aria-hidden=\"true\"><\/div>\r\n <div class=\"overlay overlay-hover\" aria-hidden=\"true\"><\/div>\r\n\r\n <h2 class=\"about-text\">About Us<\/h2>\r\n <\/div>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-46ff4e4 e-con-full elementor-hidden-desktop elementor-hidden-tablet e-flex e-con e-child\" data-id=\"46ff4e4\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fc8d514 elementor-widget elementor-widget-image\" data-id=\"fc8d514\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/elementor\/thumbs\/Frame-1618873223-scaled-rb14knl00qa9h45u0hj3n7sh8kb6cc5h4eynws005c.png\" title=\"Frame 1618873223\" alt=\"Frame 1618873223\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d2483e8 e-con-full elementor-hidden-desktop elementor-hidden-mobile e-flex e-con e-child\" data-id=\"d2483e8\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1d7fad2 elementor-widget elementor-widget-image\" data-id=\"1d7fad2\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1250\" height=\"2560\" src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873223-scaled.png\" class=\"attachment-full size-full wp-image-4960\" alt=\"\" srcset=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873223-scaled.png 1250w, https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873223-146x300.png 146w, https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873223-500x1024.png 500w, https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873223-768x1573.png 768w, https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873223-750x1536.png 750w, https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873223-1000x2048.png 1000w, https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/elementor\/thumbs\/Frame-1618873223-scaled-rb14knkzk2c6o9r223xy56xsop58fgf4805zjj54bu.png 352w, https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/elementor\/thumbs\/Frame-1618873223-scaled-rb14knl00qa9h45u0hj3n7sh8kb6cc5h4eynws005c.png 390w\" sizes=\"(max-width: 1250px) 100vw, 1250px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d5e8dbf e-flex e-con-boxed e-con e-child\" data-id=\"d5e8dbf\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a9e3458 elementor-widget elementor-widget-html\" data-id=\"a9e3458\" data-element_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>Our Story Heading<\/title>\r\n \r\n <link\r\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@500&display=swap\"\r\n rel=\"stylesheet\"\r\n \/>\r\n <style>\r\n\r\n \/* Our Story heading styles *\/\r\n .our-story-heading {\r\n font-family: 'Host Grotesk', sans-serif;\r\n font-weight: 500; \/* Medium *\/\r\n font-style: normal; \/* \u201cMedium\u201d is weight-based *\/\r\n font-size: 32px;\r\n line-height: 51.02px;\r\n leading-trim: none; \/* non-standard, included per spec *\/\r\n letter-spacing: 0%;\r\n vertical-align: middle;\r\n color: #92A282;\r\n text-align: center; \/* center if needed *\/\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <h3 class=\"our-story-heading\">Our Story<\/h3>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8f42b32 elementor-widget elementor-widget-html\" data-id=\"8f42b32\" data-element_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>Responsive Heading<\/title>\r\n \r\n <link\r\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@400;700&display=swap\"\r\n rel=\"stylesheet\"\r\n \/>\r\n <style>\r\n \/* fluid font sizing: clamps between 32px and 48px, based on viewport width *\/\r\n .heading-container {\r\n text-align: center;\r\n font-size: clamp(32px, 5vw, 48px);\r\n \/* line-height scales proportionally: 58\/48 \u2248 1.21 *\/\r\n line-height: 1.21;\r\n letter-spacing: 1%;\r\n leading-trim: none; \/* non\u2011standard but per spec *\/\r\n }\r\n\r\n \/* \u201cThe Beginning\u201d *\/\r\n .heading-beginning {\r\n font-family: 'Host Grotesk', sans-serif;\r\n font-weight: 700;\r\n font-style: normal;\r\n color: #436F49;\r\n }\r\n\r\n \/* \u201c&\u201d *\/\r\n .heading-ampersand {\r\n font-family: 'Host Grotesk', sans-serif;\r\n font-weight: 400;\r\n font-style: normal;\r\n color: #436F49;\r\n }\r\n\r\n \/* \u201cThe Present Journey\u201d *\/\r\n .heading-present {\r\n font-family: 'Host Grotesk', sans-serif;\r\n font-weight: 700;\r\n font-style: normal;\r\n color: #0C4C44;\r\n }\r\n \/* Mobile: align left *\/\r\n@media (max-width: 768px) {\r\n .heading-container { text-align: left; } \/* or 'start' for RTL support *\/\r\n}\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <h2 class=\"heading-container\">\r\n <span class=\"heading-beginning\">The Beginning <\/span>\r\n <span class=\"heading-ampersand\">&<\/span>\r\n <span class=\"heading-present\"> The Present Journey<\/span>\r\n <\/h2>\r\n<\/body>\r\n<\/html>\r\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-7387bd0 e-flex e-con-boxed e-con e-child\" data-id=\"7387bd0\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6bdcb77 elementor-widget elementor-widget-html\" data-id=\"6bdcb77\" data-element_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\" \/>\r\n <title>Animated Timeline with Tiles<\/title>\r\n <style>\r\n \/* ============ Base (desktop look preserved) ============ *\/\r\n .timeline-container{\r\n width: min(100%, 1363px);\r\n margin: 0 auto;\r\n padding: 0 24px;\r\n box-sizing: border-box;\r\n }\r\n\r\n ul.timeline{\r\n list-style: none;\r\n padding-left: 0;\r\n position: relative;\r\n margin: 0;\r\n }\r\n\r\n \/* Yellow dotted line: no animation until in-view *\/\r\n ul.timeline::before{\r\n content: \"\";\r\n position: absolute;\r\n left: 4px;\r\n top: 0;\r\n width: 2px;\r\n height: 0; \/* grows when in-view *\/\r\n border-left: 3px dotted #FFD700;\r\n }\r\n \/* Start drawing only when visible *\/\r\n ul.timeline.is-visible::before{\r\n animation: drawline 12s ease forwards;\r\n animation-delay: 1s;\r\n }\r\n\r\n .custom-bullet{\r\n position: relative;\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-weight: 400;\r\n font-size: 17px; \/* desktop size *\/\r\n color: #616161;\r\n margin-bottom: 40px;\r\n padding-left: 30px;\r\n opacity: 0; \/* hidden until in-view *\/\r\n line-height: 1.75;\r\n transform: translateY(15px);\r\n }\r\n\r\n .custom-bullet::before{\r\n content: \"\";\r\n position: absolute;\r\n left: 0;\r\n top: 7px;\r\n width: 10px;\r\n height: 10px;\r\n background-color: #00282D;\r\n border-radius: 50%;\r\n z-index: 1;\r\n }\r\n\r\n \/* Staggered bullet reveals only when parent timeline is visible *\/\r\n .timeline.is-visible .custom-bullet.first { animation: fadein 1s ease forwards; animation-delay: 0.5s; }\r\n .timeline.is-visible .custom-bullet.second { animation: fadein 1s ease forwards; animation-delay: 2.5s; }\r\n .timeline.is-visible .custom-bullet.third { animation: fadein 1s ease forwards; animation-delay: 4.5s; }\r\n .timeline.is-visible .custom-bullet.fourth { animation: fadein 1s ease forwards; animation-delay: 6.5s; }\r\n .timeline.is-visible .custom-bullet.fifth { animation: fadein 1s ease forwards; animation-delay: 8.5s; }\r\n .timeline.is-visible .custom-bullet.sixth { animation: fadein 1s ease forwards; animation-delay: 10.5s; }\r\n\r\n \/* Special styling for 5th bullet *\/\r\n .custom-bullet.fifth{\r\n font-weight: 700;\r\n font-size: 17px;\r\n line-height: 30px;\r\n letter-spacing: 0%;\r\n color: #456F46;\r\n }\r\n\r\n \/* Tiles container: animate only when visible *\/\r\n .verdant-tiles{\r\n display: flex;\r\n gap: 20px;\r\n margin-top: 20px;\r\n opacity: 0;\r\n align-items: center;\r\n flex-wrap: nowrap; \/* desktop = row of three *\/\r\n transform: translateY(15px);\r\n }\r\n .timeline.is-visible .verdant-tiles{\r\n animation: fadein 1s ease forwards;\r\n animation-delay: 5s;\r\n }\r\n\r\n \/* Base tile styles *\/\r\n .verdant-tile{\r\n border: 1px solid #ddd;\r\n text-align: left;\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 16px;\r\n line-height: 30px;\r\n font-weight: 700;\r\n color: #616161;\r\n background: radial-gradient(\r\n 172.63% 122.39% at -40.95% -81.91%,\r\n #E2E0DF 0%,\r\n #FFFFFF 100%\r\n );\r\n transition: all 0.3s ease;\r\n }\r\n\r\n \/* Unique tile styles (desktop sizes) *\/\r\n .verdant-tile-portfolio{\r\n width: 419px;\r\n height: 138px;\r\n border-radius: 12px;\r\n border-width: 1px;\r\n padding: 24px;\r\n gap: 24px;\r\n opacity: 1;\r\n }\r\n\r\n .verdant-tile-staff,\r\n .verdant-tile-logistics{\r\n width: 419px;\r\n height: 108px;\r\n border-radius: 12px;\r\n border-width: 1px;\r\n padding: 20px;\r\n gap: 10px;\r\n opacity: 1;\r\n }\r\n\r\n \/* Hover *\/\r\n .verdant-tile:hover{\r\n background: #3D4D25;\r\n color: #FFFFFF;\r\n border-color: #3D4D25;\r\n }\r\n\r\n @keyframes fadein { from{opacity:0; transform: translateY(15px);} to{opacity:1; transform: translateY(0);} }\r\n @keyframes drawline { from{height:0;} to{height:100%;} }\r\n\r\n \/* ===================== Tablet ===================== *\/\r\n @media (max-width: 1024px){\r\n .custom-bullet{\r\n font-size: clamp(15px, 1.6vw, 17px);\r\n margin-bottom: 32px;\r\n padding-left: 28px;\r\n line-height: 1.7;\r\n }\r\n .custom-bullet::before{\r\n top: 6px;\r\n width: 9px; height: 9px;\r\n }\r\n ul.timeline::before{\r\n left: 3px; \/* align with smaller bullet dot *\/\r\n }\r\n\r\n \/* Tiles: go to two-up; allow auto height *\/\r\n .verdant-tiles{\r\n flex-wrap: wrap;\r\n align-items: stretch;\r\n }\r\n .verdant-tiles .verdant-tile{\r\n width: calc(50% - 10px) !important;\r\n height: auto !important;\r\n padding: 18px !important;\r\n line-height: 1.6;\r\n }\r\n }\r\n\r\n \/* ===================== Mobile ===================== *\/\r\n @media (max-width: 640px){\r\n .timeline-container{\r\n padding: 0;\r\n }\r\n\r\n .custom-bullet{\r\n font-size: clamp(14px, 4.2vw, 16px);\r\n padding-left: 24px;\r\n margin-bottom: 24px;\r\n line-height: 1.65;\r\n }\r\n .custom-bullet::before{\r\n top: 6px;\r\n width: 8px; height: 8px;\r\n }\r\n ul.timeline::before{\r\n left: 2px;\r\n border-left-width: 2px;\r\n border-left-style: dotted;\r\n }\r\n\r\n \/* Stack tiles vertically full-width *\/\r\n .verdant-tiles{\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n }\r\n .verdant-tiles .verdant-tile{\r\n width: 100% !important;\r\n height: auto !important;\r\n padding: 16px !important;\r\n font-size: 15px;\r\n line-height: 1.6;\r\n }\r\n }\r\n\r\n \/* Respect reduced motion preferences *\/\r\n @media (prefers-reduced-motion: reduce){\r\n * { animation: none !important; transition: none !important; }\r\n .custom-bullet, .verdant-tiles { opacity: 1 !important; transform: none !important; }\r\n ul.timeline::before { height: 100% !important; }\r\n }\r\n <\/style>\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;700&display=swap\" rel=\"stylesheet\">\r\n<\/head>\r\n<body>\r\n <div class=\"timeline-container\">\r\n <ul class=\"timeline\" id=\"vppl-timeline\">\r\n <li class=\"custom-bullet first\">\r\n From a modest beginning in South India to becoming one of India\u2019s most trusted and vertically itegrated Stationery\u00a0and\u00a0Paper manufacturers, Verdant Stationery\u00a0Pvt.\u00a0Ltd. has been a journey of Integrity, Innovation, and Impact.\r\n <\/li>\r\n <li class=\"custom-bullet second\">\r\n Founded on 8th September 2008 by Mr. Dinakar Thyagaraj, the company began as JC Stationery Pvt. Ltd., supplying stationery and notebooks to schools, offices and institutions. With a strong focus on quality and reliability, the brand quickly earned the trust of major educational networks across the country.\r\n <\/li>\r\n <li class=\"custom-bullet third\">\r\n Today, operating under a unified identity, the Verdant Group (VSPL) stands as a powerful manufacturing ecosystem with:\r\n <div class=\"verdant-tiles\">\r\n <div class=\"verdant-tile verdant-tile-portfolio\">\r\n A diverse product portfolio \u2013 from notebooks , school stationery, copier paper to flexo bags, office files, and institutional stationery\r\n <\/div>\r\n <div class=\"verdant-tile verdant-tile-staff\">\r\n Over 400+ permanent and 100+ contract staff across multi-location plants\r\n <\/div>\r\n <div class=\"verdant-tile verdant-tile-logistics\">\r\n A national logistics network with ERP-backed efficiency and port access for exports\r\n <\/div>\r\n <\/div>\r\n <\/li>\r\n <li class=\"custom-bullet fourth\">\r\n Driven by this legacy of excellence, Verdant launched August Blanks\u2014its flagship premium stationery line offering customized journals, planners, and notebooks crafted for corporate gifting, exports, and retail. This marks the brand\u2019s foray into the global lifestyle and gifting space, blending Indian craftsmanship with world-class design sensibilities.\r\n <\/li>\r\n <li class=\"custom-bullet fifth\">\r\n Just like green plants and grass symbolize freshness, growth, and possibility, Verdant stationery is designed to be a space where ideas sprout, creativity blooms, and learning flourishes.<br><br>\r\n Every notebook, journal, and sheet of paper reflects that same essence\u2014natural, nurturing, and full of potential. And true to its name, Verdant uses eco-friendly materials that protect the environment while supporting education and expression.<br><br>\r\n Verdant isn\u2019t just about green products\u2014it\u2019s about creating a greener, smarter, more inspired world\u2014one page at a time.\r\n <\/li>\r\n <li class=\"custom-bullet sixth\">\r\n Together, Verdant and its premium innovations are committed to empowering Education, Enterprise, and Creativity\u2014across India and beyond.\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <script>\r\n (function(){\r\n const timelines = document.querySelectorAll('.timeline');\r\n if (!timelines.length) return;\r\n\r\n \/\/ If browser doesn't support IntersectionObserver, show immediately\r\n if (!('IntersectionObserver' in window)) {\r\n timelines.forEach(t => t.classList.add('is-visible'));\r\n return;\r\n }\r\n\r\n const io = new IntersectionObserver((entries, obs) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('is-visible');\r\n obs.unobserve(entry.target); \/\/ run once\r\n }\r\n });\r\n }, { root: null, rootMargin: '0px', threshold: 0.2 }); \/\/ ~20% visible\r\n\r\n timelines.forEach(t => io.observe(t));\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\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-2c42152 e-con-full e-flex e-con e-child\" data-id=\"2c42152\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t<div class=\"elementor-element elementor-element-aa430cf e-con-full e-flex e-con e-child\" data-id=\"aa430cf\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0b37d3f elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"0b37d3f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<div class=\"vg-timeline\" data-base-w=\"1387\" data-base-h=\"768\">\r\n <div class=\"vg-stage\">\r\n\r\n \r\n <div class=\"vg-head\" role=\"group\" aria-label=\"Timeline heading\">\r\n <h2 class=\"vg-title\" aria-label=\"The Verdant Story\">\r\n <span class=\"vg-dim\">The<\/span>\r\n <span class=\"vg-strong\">Verdant<\/span>\r\n <span class=\"vg-dim\">Story<\/span>\r\n <\/h2>\r\n <p class=\"vg-sub\">From a single press to a national force in innovation.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"left-rail\">\r\n <div class=\"left-art bgA\"><\/div>\r\n <div class=\"left-art bgB\"><\/div>\r\n\r\n <div class=\"scroll-btn up\" aria-label=\"Previous year\"><\/div>\r\n <div class=\"scroll-btn down\" aria-label=\"Next year\"><\/div>\r\n\r\n <div class=\"year-viewport\">\r\n <div class=\"year-stack\">\r\n <div class=\"year active\" data-year=\"2008\">2008<\/div>\r\n <div class=\"year\" data-year=\"2009\">2009<\/div>\r\n <div class=\"year\" data-year=\"2011\">2011<\/div>\r\n <div class=\"year\" data-year=\"2013\">2013<\/div>\r\n <div class=\"year\" data-year=\"2014\">2014<\/div>\r\n <div class=\"year\" data-year=\"2018\">2018<\/div>\r\n <div class=\"year\" data-year=\"2022\">2022<\/div>\r\n <div class=\"year\" data-year=\"2023\">2023<\/div>\r\n <div class=\"year\" data-year=\"2024\">2024<\/div>\r\n <div class=\"year\" data-year=\"2025\">2025<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"vg-card\">\r\n <div class=\"vg-card-bg bgA\"><\/div>\r\n <div class=\"vg-card-bg bgB\"><\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/div>\r\n\r\n<style>\r\n\/* Load any fonts you need globally on your site.\r\n - Roc Grotesk: load via Adobe Fonts\/self-host (this snippet assumes it's available as 'Roc Grotesk')\r\n - Host\/Space Grotesk below are for other UI text *\/\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@700&family=Space+Grotesk:wght@400;700&display=swap');\r\n\r\n\/* ===== Responsive container that auto-scales the inner fixed stage ===== *\/\r\n.vg-timeline{\r\n position:relative;\r\n width:100%;\r\n height:auto; \/* JS sets height to maintain aspect ratio *\/\r\n overflow:hidden;\r\n\r\n \/* design tokens (scoped) *\/\r\n --img-shift: 0px; \/* 0 keeps right image perfectly right-aligned *\/\r\n --year-item-h: 77px;\r\n --year-view-h: 390px;\r\n --ink-dim:#6E8A86;\r\n --lime:#D7DE27;\r\n\r\n \/* tweak right panel inset w\/o using `right:`; positive pulls left, negative nudges further right *\/\r\n --card-nudge: 20px;\r\n}\r\n\r\n\/* The fixed design \"stage\" at 1387\u00d7768, scaled to fit the container *\/\r\n.vg-timeline .vg-stage{\r\n position:relative;\r\n width:1387px; \/* keep base width so scaling is accurate *\/\r\n height:768px;\r\n transform-origin: top left; \/* scale from top-left *\/\r\n will-change: transform;\r\n margin:0;\r\n}\r\n\r\n\/* ===== Heading styles (overlay, not scaled) ===== *\/\r\n.vg-timeline .vg-head{\r\n position:absolute;\r\n top:18px; left:0; width:100%;\r\n padding: 0 clamp(12px, 2.5vw, 32px);\r\n display:flex; flex-direction:column; align-items:center; gap:8px;\r\n z-index:4; \/* above buttons\/art *\/\r\n pointer-events:none; \/* clicks pass through to timeline *\/\r\n text-align:center;\r\n}\r\n\r\n.vg-timeline .vg-title{\r\n margin:0;\r\n display:inline-flex; \/* keep parts on one line cluster *\/\r\n align-items:center;\r\n gap:0.35ch;\r\n letter-spacing:-0.01em; \/* -1% tracking *\/\r\n font-family:'Roc Grotesk','Host Grotesk','Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;\r\n}\r\n\r\n\/* \"Verdant\" \u2014 Medium 500, white *\/\r\n.vg-timeline .vg-title .vg-strong{\r\n font-weight:500; \/* Medium *\/\r\n font-size:54.66px;\r\n line-height:66.05px;\r\n color:#FFFFFF;\r\n vertical-align:middle;\r\n display:inline-block;\r\n letter-spacing:-0.01em;\r\n}\r\n\r\n\/* \"The\" and \"Story\" \u2014 Regular 400, 50% white *\/\r\n.vg-timeline .vg-title .vg-dim{\r\n font-weight:400; \/* Regular *\/\r\n font-size:38.19px;\r\n line-height:46.14px;\r\n color:rgba(255,255,255,0.5);\r\n vertical-align:middle;\r\n display:inline-block;\r\n letter-spacing:-0.01em;\r\n}\r\n\r\n\/* Subheading *\/\r\n.vg-timeline .vg-sub{\r\n margin:0;\r\n font-family:'Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;\r\n font-size:clamp(12px, 1.4vw, 18px);\r\n line-height:1.4;\r\n color:#b2c8c6;\r\n max-width:min(90%, 980px);\r\n}\r\n\r\n\/* Optional: responsive downscale to prevent wrapping on tiny screens *\/\r\n@media (max-width: 560px){\r\n .vg-timeline .vg-title .vg-strong{ font-size:40px; line-height:48px; }\r\n .vg-timeline .vg-title .vg-dim{ font-size:28px; line-height:34px; }\r\n}\r\n\r\n\/* ================= LEFT PANEL (left-aligned, shifted -530px) ================= *\/\r\n.vg-timeline .left-rail{\r\n position:absolute;\r\n left:-554px; \/* your requested offset; scales with the stage *\/\r\n top:200px; width:980px; height:430px;\r\n background:transparent; overflow:visible;\r\n}\r\n\/* crossfade layers *\/\r\n.vg-timeline .left-art{\r\n position:absolute; inset:0; z-index:0; pointer-events:none;\r\n background-repeat:no-repeat; background-size:contain; background-position:left center;\r\n opacity:0; transition: opacity .5s cubic-bezier(.22,1,.36,1);\r\n}\r\n.vg-timeline .left-art.bgA{ opacity:1; }\r\n\r\n\/* up\/down buttons *\/\r\n.vg-timeline .scroll-btn{\r\n position:absolute; left:600px; width:44px; height:44px; border-radius:50%;\r\n background:#0b3a3e; color:#b2c8c6; display:grid; place-items:center; z-index:2;\r\n box-shadow:0 6px 12px rgba(0,0,0,.25) inset, 0 0 0 2px rgba(215,222,39,.15);\r\n cursor:pointer; user-select:none; transition: transform .18s ease;\r\n}\r\n.vg-timeline .scroll-btn:active{ transform:scale(.96); }\r\n.vg-timeline .scroll-btn.up{ top:128px;} \r\n.vg-timeline .scroll-btn.down{ top:275px;}\r\n.vg-timeline .scroll-btn:before{ content:\"\"; width:10px; height:10px; border-right:3px solid #b2c8c6; border-bottom:3px solid #b2c8c6; transform:rotate(-135deg);}\r\n.vg-timeline .scroll-btn.down:before{ transform:rotate(45deg); }\r\n\r\n\/* years viewport (fixed window) *\/\r\n.vg-timeline .year-viewport{\r\n position:absolute; left:700px; top:20px; width:250px; height:var(--year-view-h);\r\n overflow:hidden; z-index:1;\r\n}\r\n.vg-timeline .year-stack{\r\n position:absolute; left:0; top:0; display:flex; flex-direction:column; gap:0;\r\n transform: translateY(0);\r\n transition: transform .45s cubic-bezier(.22,1,.36,1);\r\n will-change: transform;\r\n}\r\n.vg-timeline .year{\r\n width:100%; height:var(--year-item-h); display:flex; align-items:center;\r\n font-family:\"Space Grotesk\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-size:28px; letter-spacing:.02em; color:var(--ink-dim);\r\n opacity:.7; cursor:pointer; user-select:none; transform-origin:left center;\r\n transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .22s ease, color .22s ease;\r\n}\r\n.vg-timeline .year:hover{ opacity:.9; transform:translateX(2px); }\r\n.vg-timeline .year.active{ color:var(--lime); font-weight:700; opacity:1; transform: scale(2.2); }\r\n\r\n\/* ================= RIGHT PANEL (anchor to right edge WITHOUT using `right:`) ================= *\/\r\n.vg-timeline .vg-card{\r\n position:absolute;\r\n left:100%; \/* place panel\u2019s left edge at stage\u2019s right edge *\/\r\n top:200px;\r\n width:980px;\r\n height:430px;\r\n overflow:hidden;\r\n transform: translateX(calc(-100% + var(--card-nudge))); \/* pull back inside by its width *\/\r\n}\r\n\/* crossfade layers *\/\r\n.vg-timeline .vg-card-bg{\r\n position:absolute; inset:0; z-index:0; pointer-events:none;\r\n background-repeat:no-repeat; background-size:cover;\r\n background-position: calc(100% + var(--img-shift)) center; \/* keep right edge bias for art *\/\r\n transform: translateX(var(--img-shift));\r\n opacity:0; transition: opacity .55s cubic-bezier(.22,1,.36,1);\r\n}\r\n.vg-timeline .vg-card-bg.bgA{ opacity:1; }\r\n\r\n@media (prefers-reduced-motion: reduce){\r\n .vg-timeline .year-stack, .vg-timeline .year, .vg-timeline .vg-card-bg, .vg-timeline .left-art, .vg-timeline .scroll-btn{ transition:none !important; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n\/* Responsive scaler (fits width & clamps to available height) + timeline logic *\/\r\n\/* Uses UNIQUE classes .vg-card and .vg-card-bg to avoid theme\/Elementor collisions *\/\r\n(function(){\r\n const TIMELINE_DATA = {\r\n \"2008\": { rightImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/09\/Frame-1618873130-5-scaled.png\",\r\n leftImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Group-2546.png\" },\r\n \"2009\": { rightImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873130-20-scaled.png\",\r\n leftImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Group-2546-1.png\" },\r\n \"2011\": { rightImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Group-2546-2-1-scaled.png\",\r\n leftImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Group-2546-2.png\" },\r\n \"2013\": { rightImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/09\/Frame-1618873130-1-scaled.png\",\r\n leftImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Group-2546-3.png\" },\r\n \"2014\": { rightImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873130-23-scaled.png\",\r\n leftImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Group-2546.png\" },\r\n \"2018\": { rightImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873130-24-scaled.png\",\r\n leftImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Group-2546-1.png\" },\r\n \"2022\": { rightImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873130-25-scaled.png\",\r\n leftImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Group-2546-3.png\" },\r\n \"2023\": { rightImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873130-26-scaled.png\",\r\n leftImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Group-2546.png\" },\r\n \"2024\": { rightImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873130-27-scaled.png\",\r\n leftImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Group-2546-1.png\" },\r\n \"2025\": { rightImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/09\/Frame-1618873130-3-scaled.png\",\r\n leftImage: \"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Group-2546-2.png\" }\r\n };\r\n\r\n document.querySelectorAll('.vg-timeline').forEach(function(root){\r\n const baseW = parseFloat(root.getAttribute('data-base-w')) || 1387;\r\n const baseH = parseFloat(root.getAttribute('data-base-h')) || 768;\r\n const stage = root.querySelector('.vg-stage');\r\n\r\n \/\/ --- Responsive scaler: fit width, clamp to viewport height, center if needed ---\r\n function resize(){\r\n const cw = root.clientWidth || root.getBoundingClientRect().width;\r\n const vhAvail = Math.max(window.innerHeight || baseH, 320) * 0.95; \/\/ leave breathing room\r\n const wScale = cw \/ baseW;\r\n const hScale = vhAvail \/ baseH;\r\n const scale = Math.min(wScale, hScale); \/\/ contain in both width & height\r\n\r\n const stageW = baseW * scale;\r\n const tx = (cw - stageW) \/ 2; \/\/ center horizontally if height-limited\r\n\r\n stage.style.transform = `translate(${tx}px, 0) scale(${scale})`;\r\n root.style.height = (baseH * scale) + 'px';\r\n }\r\n resize();\r\n window.addEventListener('resize', resize);\r\n if ('ResizeObserver' in window){\r\n const ro = new ResizeObserver(resize);\r\n ro.observe(root);\r\n }\r\n\r\n \/\/ --- Timeline logic (scoped) ---\r\n const yearStack = root.querySelector('.year-stack');\r\n const yearEls = Array.from(root.querySelectorAll('.year'));\r\n const upBtn = root.querySelector('.scroll-btn.up');\r\n const downBtn = root.querySelector('.scroll-btn.down');\r\n\r\n const rightA = root.querySelector('.vg-card .vg-card-bg.bgA');\r\n const rightB = root.querySelector('.vg-card .vg-card-bg.bgB');\r\n const leftA = root.querySelector('.left-rail .left-art.bgA');\r\n const leftB = root.querySelector('.left-rail .left-art.bgB');\r\n\r\n const ITEM_H = parseFloat(getComputedStyle(root).getPropertyValue('--year-item-h')) || 56;\r\n const VIEW_H = parseFloat(getComputedStyle(root).getPropertyValue('--year-view-h')) || 220;\r\n const CENTER = (VIEW_H - ITEM_H) \/ 2;\r\n\r\n let currentIndex = 0;\r\n let rightFront = 'A';\r\n let leftFront = 'A';\r\n let animLock = false;\r\n\r\n function applyTransform(){\r\n const ty = CENTER - currentIndex * ITEM_H;\r\n yearStack.style.transform = `translateY(${ty}px)`;\r\n }\r\n function updateActive(){\r\n yearEls.forEach((el,i)=>el.classList.toggle('active', i===currentIndex));\r\n }\r\n function crossfade(layers, frontRef, newUrl){\r\n const front = frontRef === 'A' ? layers.A : layers.B;\r\n const back = frontRef === 'A' ? layers.B : layers.A;\r\n if (newUrl) back.style.backgroundImage = `url(\"${newUrl}\")`;\r\n back.style.opacity = 1;\r\n front.style.opacity = 0;\r\n return frontRef === 'A' ? 'B' : 'A';\r\n }\r\n function renderYear(year){\r\n const data = TIMELINE_DATA[year]; if (!data) return;\r\n animLock = true;\r\n rightFront = crossfade({A:rightA, B:rightB}, rightFront, data.rightImage);\r\n leftFront = crossfade({A:leftA, B:leftB }, leftFront, data.leftImage);\r\n setTimeout(()=>{ animLock = false; }, 550);\r\n }\r\n function setActiveByIndex(idx){\r\n if (animLock) return;\r\n const len = yearEls.length;\r\n currentIndex = ((idx % len) + len) % len; \/\/ wrap-around both ways\r\n updateActive();\r\n applyTransform();\r\n renderYear(yearEls[currentIndex].dataset.year);\r\n }\r\n\r\n yearEls.forEach((el, i)=> el.addEventListener('click', ()=> setActiveByIndex(i)));\r\n upBtn.addEventListener('click', ()=> setActiveByIndex(currentIndex - 1));\r\n downBtn.addEventListener('click', ()=> setActiveByIndex(currentIndex + 1));\r\n document.addEventListener('keydown', (e)=>{\r\n if (e.key === 'ArrowUp') setActiveByIndex(currentIndex - 1);\r\n if (e.key === 'ArrowDown') setActiveByIndex(currentIndex + 1);\r\n });\r\n\r\n \/\/ Seed images on first paint (no fade)\r\n (function init(){\r\n const y0 = yearEls[currentIndex].dataset.year;\r\n const d0 = TIMELINE_DATA[y0];\r\n rightA.style.backgroundImage = `url(\"${d0.rightImage}\")`;\r\n rightB.style.backgroundImage = `url(\"${d0.rightImage}\")`;\r\n leftA.style.backgroundImage = `url(\"${d0.leftImage}\")`;\r\n leftB.style.backgroundImage = `url(\"${d0.leftImage}\")`;\r\n applyTransform();\r\n updateActive();\r\n })();\r\n });\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8780bba e-con-full e-flex e-con e-child\" data-id=\"8780bba\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t<div class=\"elementor-element elementor-element-6624d32 e-con-full e-flex e-con e-child\" data-id=\"6624d32\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cd799a0 animated-slow elementor-invisible elementor-widget elementor-widget-image\" data-id=\"cd799a0\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInUp"}\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/elementor\/thumbs\/image-108-ra90uuo09u8l71q7aa1p4zyse490gllh5blaun25g4.png\" title=\"image 108\" alt=\"image 108\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fa72844 animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"fa72844\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInUp","_animation_delay":100}\" 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\" \/>\r\n <title>The Vision<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@500&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n #the-vision {\r\n font-family: \"Host Grotesk\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight: 500;\r\n font-style: normal; \/* CSS has no 'Medium' style; weight covers it *\/\r\n font-size: 32px;\r\n line-height: 51.02px;\r\n letter-spacing: 0;\r\n text-align: center;\r\n vertical-align: middle;\r\n margin: 0.5rem 0;\r\n display: inline-block;\r\n color: #92A282; \/* your text color *\/\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <h1 id=\"the-vision\">The Vision<\/h1>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c1d61ba e-con-full e-flex e-con e-child\" data-id=\"c1d61ba\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7121f11 animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"7121f11\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInUp","_animation_delay":200}\" 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\" \/>\r\n <title>Paper with Purpose. Progress by Design.<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@700&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n #brand-line {\r\n font-family: \"Host Grotesk\";\r\n font-weight: 700;\r\n font-style: normal;\r\n font-size: 48px;\r\n line-height: 58px;\r\n letter-spacing: 0.48px;\r\n text-align: center; \/* desktop\/tablet *\/\r\n vertical-align: middle;\r\n display: inline-block;\r\n margin: 0.5rem 0;\r\n }\r\n\r\n \/* Per-sentence colors *\/\r\n #brand-line .pp { color: #436F49; }\r\n #brand-line .pbd { color: #0C4C44; }\r\n\r\n \/* Mobile: left align *\/\r\n @media (max-width: 640px) {\r\n #brand-line {\r\n text-align: left;\r\n display: block; \/* make it full-width for clean left align *\/\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <h1 id=\"brand-line\">\r\n <span class=\"pp\">Stationery with Purpose.<\/span>\r\n <span class=\"pbd\">Progress by Design.<\/span>\r\n <\/h1>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5ab1326 animated-slow elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"5ab1326\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInUp","_animation_delay":300}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">To be India\u2019s most sustainable and trusted stationery products brand, <br>delivering purposeful value to institutions and individuals alike.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-da327d1 elementor-widget elementor-widget-html\" data-id=\"da327d1\" data-element_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\" \/>\r\n <title>Two Boxes \u2022 Space Grotesk Body Text<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@500;600;700&family=Space+Grotesk:wght@400&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n :root{\r\n --stroke: linear-gradient(217.63deg, #456F46 0%, #FFFFFF 50.45%, #D7E128 99.93%);\r\n --fill: rgba(255,255,255,0.85);\r\n --hover-fill: #3D4D25;\r\n --heading-purpose: #436F49;\r\n --heading-design: #0C4C44;\r\n --text: #4b5563;\r\n --text-hover: #ffffff;\r\n }\r\n\r\n \/* ===== Desktop (unchanged) ===== *\/\r\n .wrap_verdant {\r\n width: 1362px; \/* original fixed width *\/\r\n display: flex;\r\n gap: 24px;\r\n justify-content: flex-start;\r\n align-items: flex-start;\r\n margin: 0 auto; \/* center on large screens *\/\r\n }\r\n\r\n .box{\r\n width: 669px; \/* original fixed width *\/\r\n height: 332px; \/* original fixed height *\/\r\n padding: 24px;\r\n border-radius: 24px;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n gap: 16px;\r\n text-align: left;\r\n opacity: 1;\r\n transform: rotate(0deg);\r\n\r\n \/* Rounded gradient border *\/\r\n border: 1.54px solid transparent;\r\n background:\r\n linear-gradient(var(--fill), var(--fill)) padding-box,\r\n var(--stroke) border-box;\r\n background-clip: padding-box, border-box;\r\n\r\n \/* Inside shadow + backdrop blur *\/\r\n box-shadow: 0px 0px 8.49px 0px #00000040 inset;\r\n -webkit-backdrop-filter: blur(38.6108283996582px);\r\n backdrop-filter: blur(38.6108283996582px);\r\n\r\n transition: background 200ms ease, box-shadow 200ms ease, color 180ms ease;\r\n will-change: background, box-shadow, transform, opacity;\r\n }\r\n\r\n .box:hover,\r\n .box:focus-within{\r\n background:\r\n linear-gradient(var(--hover-fill), var(--hover-fill)) padding-box,\r\n var(--stroke) border-box;\r\n box-shadow: 0px 0px 10px 0px #00000040 inset;\r\n }\r\n\r\n .box__media { margin: 0; width: 79px; height: 79px; position: relative; }\r\n .box__img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity 180ms ease; }\r\n .box__img--hover{ opacity: 0; }\r\n .box:hover .box__img--hover, .box:focus-within .box__img--hover{ opacity: 1; }\r\n .box:hover .box__img--base, .box:focus-within .box__img--base{ opacity: 0; }\r\n\r\n .box__title{\r\n margin: 0;\r\n font-family: \"Host Grotesk\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight: 600;\r\n font-size: 32px;\r\n line-height: 100%;\r\n letter-spacing: 0;\r\n transition: color 180ms ease;\r\n }\r\n .box--purpose .box__title { color: var(--heading-purpose); }\r\n .box--design .box__title { color: var(--heading-design); }\r\n .box:hover .box__title, .box:focus-within .box__title { color: #fff; }\r\n\r\n .box__text{\r\n margin: 0;\r\n font-family: \"Space Grotesk\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight: 400;\r\n font-size: 16px;\r\n line-height: 30px;\r\n letter-spacing: 0;\r\n color: var(--text);\r\n transition: color 180ms ease;\r\n }\r\n .box:hover .box__text, .box:focus-within .box__text { color: var(--text-hover); }\r\n\r\n \/* ===== Reveal animations (unchanged) ===== *\/\r\n @keyframes vg-fade-in-left { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: translateX(0); } }\r\n @keyframes vg-fade-in-right { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } }\r\n\r\n .box[data-reveal]{ opacity: 0; transform: translateX(0); }\r\n .box[data-reveal=\"left\"].is-inview { animation: vg-fade-in-left 700ms ease-out both; }\r\n .box[data-reveal=\"right\"].is-inview { animation: vg-fade-in-right 700ms ease-out both; animation-delay: 120ms; }\r\n\r\n @media (prefers-reduced-motion: reduce){\r\n .box[data-reveal]{ opacity: 1 !important; animation: none !important; }\r\n }\r\n\r\n \/* ====== Fluid container for any width below design ====== *\/\r\n @media (max-width: 1362px){\r\n .wrap_verdant{\r\n width: 100%;\r\n padding: 0 20px; \/* gutter on narrow screens *\/\r\n box-sizing: border-box;\r\n flex-wrap: wrap; \/* allow wrapping *\/\r\n }\r\n }\r\n\r\n \/* ====== Tablet: two flexible halves, auto height ====== *\/\r\n @media (max-width: 1024px){\r\n .wrap_verdant{ gap: 20px; }\r\n .box{\r\n width: calc(50% - 10px); \/* two columns *\/\r\n height: auto; \/* let content define height *\/\r\n padding: 20px;\r\n }\r\n .box__media{ width: 64px; height: 64px; }\r\n .box__title{ font-size: clamp(24px, 2.6vw, 28px); }\r\n .box__text { font-size: 15px; line-height: 1.7; }\r\n }\r\n\r\n \/* ====== Mobile: stacked, full-width ====== *\/\r\n @media (max-width: 640px){\r\n .wrap_verdant{\r\n flex-direction: column;\r\n gap: 16px;\r\n padding: 10px ;\r\n }\r\n .box{\r\n width: 100%;\r\n height: auto;\r\n padding: 16px;\r\n border-radius: 20px;\r\n gap: 12px;\r\n }\r\n .box__media{ width: 56px; height: 56px; }\r\n .box__title{ font-size: clamp(20px, 6vw, 26px); line-height: 1.1; }\r\n .box__text { font-size: 15px; line-height: 1.65; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <main class=\"wrap_verdant\" aria-label=\"Two boxes with Space Grotesk body text\">\r\n \r\n <section class=\"box box--purpose\" data-reveal=\"left\" tabindex=\"0\">\r\n <figure class=\"box__media\" aria-hidden=\"true\">\r\n <img decoding=\"async\" class=\"box__img box__img--base\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/image-109.png\"\r\n alt=\"\" \/>\r\n <img decoding=\"async\" class=\"box__img box__img--hover\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/image-109-3.png\"\r\n alt=\"\" \/>\r\n <\/figure>\r\n <h3 class=\"box__title\">Our Mission<\/h3>\r\n <p class=\"box__text\">\r\n To manufacture, innovate, and supply product-based solutions that are:<br>\r\n \u25cf Eco-conscious<br>\r\n \u25cf Technically sound<br>\r\n \u25cf Economically accessible<br>\r\n \u25cf Crafted with care\r\n <\/p>\r\n <\/section>\r\n\r\n \r\n <section class=\"box box--design\" data-reveal=\"right\" tabindex=\"0\">\r\n <figure class=\"box__media\" aria-hidden=\"true\">\r\n <img decoding=\"async\" class=\"box__img box__img--base\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/image-109-5.png\"\r\n alt=\"\" \/>\r\n <img decoding=\"async\" class=\"box__img box__img--hover\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/image-109-4.png\"\r\n alt=\"\" \/>\r\n <\/figure>\r\n <h3 class=\"box__title\">Our Values<\/h3>\r\n <p class=\"box__text\">\r\n \u25cf Purpose with Product \u2013 Every item we create solves a real-world need.<br>\r\n \u25cf Sustainability First \u2013 From materials to methods, we put the planet first.<br>\r\n \u25cf Integrity Always \u2013 We keep our promises and deliver quality consistently.<br>\r\n \u25cf People-Centric \u2013 We grow with our team, vendors, and clients.<br>\r\n \u25cf Innovation in Action \u2013 Adapting and improving is how we lead.\r\n <\/p>\r\n <\/section>\r\n <\/main>\r\n\r\n <script>\r\n \/\/ Reveal on scroll (runs once per card)\r\n document.addEventListener('DOMContentLoaded', function () {\r\n var cards = document.querySelectorAll('.box[data-reveal]');\r\n if ('IntersectionObserver' in window) {\r\n var io = new IntersectionObserver(function (entries, obs) {\r\n entries.forEach(function (e) {\r\n if (e.isIntersecting) {\r\n e.target.classList.add('is-inview');\r\n obs.unobserve(e.target);\r\n }\r\n });\r\n }, { threshold: 0.2 });\r\n cards.forEach(function (el) { io.observe(el); });\r\n } else {\r\n \/\/ Fallback: show immediately\r\n cards.forEach(function (el) { el.classList.add('is-inview'); });\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fb7c880 e-con-full e-flex e-con e-child\" data-id=\"fb7c880\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t<div class=\"elementor-element elementor-element-9abdc45 e-con-full e-flex e-con e-child\" data-id=\"9abdc45\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6d74601 elementor-widget elementor-widget-html\" data-id=\"6d74601\" data-element_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\" \/>\r\n <title>Image Slider \u2014 Custom Arrows + Hover Swap (Tablet Responsive)<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@400;500;700&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n \r\n <link rel=\"preload\" as=\"image\" href=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Key-Leadership-2.png\" \/>\r\n <link rel=\"preload\" as=\"image\" href=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Key-Leadership-4.png\" \/>\r\n <link rel=\"preload\" as=\"image\" href=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873184.png\" \/>\r\n <link rel=\"preload\" as=\"image\" href=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873185.png\" \/>\r\n\r\n <style>\r\n :root{\r\n \/* tuning knobs *\/\r\n --slider-max: 1363px;\r\n --arrow-size: clamp(36px, 5vw, 56px);\r\n --arrow-offset: clamp(8px, 2vw, 20px);\r\n --slide-ease: cubic-bezier(.22,.61,.36,1);\r\n }\r\n\r\n \/* Wrapper *\/\r\n .vg-slider{\r\n width: 100%;\r\n max-width: min(var(--slider-max), 95vw);\r\n margin-inline: auto;\r\n font-family:\"Host Grotesk\",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;\r\n }\r\n\r\n .vg-slider .vg-viewport{\r\n position: relative;\r\n \/* Desktop\/base aspect: your original wide frame *\/\r\n aspect-ratio: 1363 \/ 612;\r\n overflow: hidden;\r\n isolation: isolate;\r\n }\r\n\r\n \/* Slides row *\/\r\n .vg-slider .vg-slides{\r\n display: flex;\r\n height: 100%;\r\n width: 100%;\r\n margin: 0; padding: 0; list-style: none;\r\n transform: translateX(0%);\r\n transition: transform .6s var(--slide-ease);\r\n will-change: transform;\r\n }\r\n .vg-slider .vg-slide{\r\n min-width: 100%;\r\n height: 100%;\r\n position: relative;\r\n }\r\n\r\n \/* Crossfade container *\/\r\n .vg-slider .vg-swap{ position: absolute; inset: 0; }\r\n .vg-slider .vg-swap img{\r\n position: absolute; inset: 0;\r\n width: 100%; height: 100%;\r\n display: block;\r\n object-fit: cover; \/* prevent distortion *\/\r\n object-position: center;\r\n user-select: none;\r\n -webkit-user-drag: none;\r\n transition: opacity .4s ease;\r\n pointer-events: none; \/* keep pointer events on container *\/\r\n }\r\n .vg-slider .vg-swap img.hover{ opacity: 0; }\r\n \/* Hover (for mouse devices) *\/\r\n .vg-slider .vg-swap:hover img.hover{ opacity: 1; }\r\n \/* Touch press (added via JS on touchstart) *\/\r\n .vg-slider .vg-swap.is-pressed img.hover{ opacity: 1; }\r\n\r\n \/* Arrows (use your PNGs) *\/\r\n .vg-slider .vg-arrow{\r\n position: absolute; top: 50%; transform: translateY(-50%);\r\n border: none; background: none; cursor: pointer; z-index: 2; padding: 0;\r\n touch-action: manipulation;\r\n }\r\n .vg-slider .vg-prev{ left: var(--arrow-offset); }\r\n .vg-slider .vg-next{ right: var(--arrow-offset); }\r\n\r\n .vg-slider .vg-arrow .vg-icon{\r\n width: var(--arrow-size); height: var(--arrow-size);\r\n display: block; object-fit: contain;\r\n filter: drop-shadow(0 2px 8px rgba(0,0,0,.25));\r\n transition: transform .2s ease;\r\n pointer-events: none;\r\n }\r\n .vg-slider .vg-arrow:hover .vg-icon{ transform: scale(1.05); }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .vg-slider .vg-slides { transition: none; }\r\n .vg-slider .vg-swap img { transition: none; }\r\n }\r\n\r\n \/* ===========================\r\n TABLET TUNING (incl. P12)\r\n 600px\u20131200px\r\n Make the banner a bit taller for tablets\r\n =========================== *\/\r\n @media (min-width: 600px) and (max-width: 1200px){\r\n .vg-slider{ max-width: min(var(--slider-max), 96vw); }\r\n .vg-slider .vg-viewport{ aspect-ratio: 1363 \/ 680; } \/* slightly taller than desktop *\/\r\n }\r\n\r\n \/* Wide tablets \/ small laptops (e.g., P12 landscape ~1472px) *\/\r\n @media (min-width: 1201px) and (max-width: 1600px){\r\n .vg-slider{ max-width: min(var(--slider-max), 92vw); }\r\n \/* keep base aspect here; arrows scale with clamp() *\/\r\n }\r\n\r\n \/* Phones (optional) \u2014 even taller to look good on narrow screens *\/\r\n @media (max-width: 599.98px){\r\n .vg-slider{ max-width: 100vw; }\r\n .vg-slider .vg-viewport{ aspect-ratio: 16 \/ 9; } \/* taller on mobile for presence *\/\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"vg-slider\" id=\"vg-slider-1\" data-interval=\"4000\" data-pause-on-hover=\"true\"\r\n role=\"region\" aria-roledescription=\"carousel\" aria-label=\"Image slider\" tabindex=\"0\">\r\n <div class=\"vg-viewport\">\r\n <ul class=\"vg-slides\">\r\n \r\n <li class=\"vg-slide\" aria-label=\"Slide 1\">\r\n <div class=\"vg-swap\" aria-hidden=\"true\">\r\n <img\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Key-Leadership-6-scaled.png\"\r\n alt=\"Key Leadership\"\r\n loading=\"eager\" decoding=\"async\">\r\n <img\r\n class=\"hover\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Key-Leadership-2-2-scaled.png\"\r\n alt=\"\" loading=\"eager\" decoding=\"async\">\r\n <\/div>\r\n <\/li>\r\n\r\n \r\n <li class=\"vg-slide\" aria-label=\"Slide 2\">\r\n <div class=\"vg-swap\" aria-hidden=\"true\">\r\n <img\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Key-Leadership-1-2-scaled.png\"\r\n alt=\"Key Leadership \u2013 Alternative\"\r\n draggable=\"false\" loading=\"lazy\" decoding=\"async\">\r\n <img\r\n class=\"hover\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Key-Leadership-3-3-scaled.png\"\r\n alt=\"\" loading=\"lazy\" decoding=\"async\">\r\n <\/div>\r\n <\/li>\r\n <\/ul>\r\n\r\n \r\n <button class=\"vg-arrow vg-prev\" aria-label=\"Previous slide\" type=\"button\">\r\n <img loading=\"lazy\" class=\"vg-icon\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873184.png\"\r\n alt=\"\" width=\"48\" height=\"48\" decoding=\"async\"\/>\r\n <\/button>\r\n <button class=\"vg-arrow vg-next\" aria-label=\"Next slide\" type=\"button\">\r\n <img loading=\"lazy\" class=\"vg-icon\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873185.png\"\r\n alt=\"\" width=\"48\" height=\"48\" decoding=\"async\"\/>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n (() => {\r\n function initVGSlider(root){\r\n const slidesWrap = root.querySelector('.vg-slides');\r\n const btnPrev = root.querySelector('.vg-prev');\r\n const btnNext = root.querySelector('.vg-next');\r\n\r\n let index = 0;\r\n const count = root.querySelectorAll('.vg-slide').length;\r\n let timer = null;\r\n const interval = parseInt(root.dataset.interval || '4000', 10);\r\n const pauseOnHover = root.dataset.pauseOnHover === 'true';\r\n\r\n function update(){\r\n slidesWrap.style.transform = `translateX(-${index * 100}%)`;\r\n }\r\n function goTo(i){\r\n index = (i + count) % count;\r\n update();\r\n restartAutoplay();\r\n }\r\n function next(){ goTo(index + 1); }\r\n function prev(){ goTo(index - 1); }\r\n\r\n btnNext.addEventListener('click', next);\r\n btnPrev.addEventListener('click', prev);\r\n\r\n \/\/ Keyboard\r\n root.addEventListener('keydown', (e) => {\r\n if(e.key === 'ArrowRight') next();\r\n if(e.key === 'ArrowLeft') prev();\r\n });\r\n\r\n \/\/ Swipe\r\n let startX = 0, dx = 0, touching = false;\r\n slidesWrap.addEventListener('touchstart', (e) => {\r\n touching = true; startX = e.touches[0].clientX; dx = 0;\r\n }, {passive:true});\r\n slidesWrap.addEventListener('touchmove', (e) => {\r\n if(!touching) return; dx = e.touches[0].clientX - startX;\r\n }, {passive:true});\r\n slidesWrap.addEventListener('touchend', () => {\r\n touching = false;\r\n if(Math.abs(dx) > 40) { dx < 0 ? next() : prev(); }\r\n dx = 0;\r\n });\r\n\r\n \/\/ Touch-friendly \"hover swap\"\r\n const swaps = root.querySelectorAll('.vg-swap');\r\n const isTouch = window.matchMedia('(hover: none)').matches || 'ontouchstart' in window;\r\n if (isTouch) {\r\n swaps.forEach(s => {\r\n s.addEventListener('touchstart', () => s.classList.add('is-pressed'), {passive:true});\r\n s.addEventListener('touchend', () => s.classList.remove('is-pressed'));\r\n s.addEventListener('touchcancel',() => s.classList.remove('is-pressed'));\r\n });\r\n }\r\n\r\n \/\/ Autoplay (respects reduced motion)\r\n const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n function startAutoplay(){ stopAutoplay(); if(!prefersReduced) timer = setInterval(next, interval); }\r\n function stopAutoplay(){ if(timer){ clearInterval(timer); timer = null; } }\r\n function restartAutoplay(){ if(timer){ startAutoplay(); } }\r\n startAutoplay();\r\n\r\n if(pauseOnHover){\r\n const vp = root.querySelector('.vg-viewport');\r\n vp.addEventListener('mouseenter', stopAutoplay);\r\n vp.addEventListener('mouseleave', startAutoplay);\r\n }\r\n\r\n update();\r\n }\r\n\r\n document.querySelectorAll('.vg-slider').forEach(initVGSlider);\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-733a2db e-con-full e-flex e-con e-child\" data-id=\"733a2db\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t<div class=\"elementor-element elementor-element-e102079 e-con-full e-flex e-con e-child\" data-id=\"e102079\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5486eba elementor-widget elementor-widget-spacer\" data-id=\"5486eba\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a6f8833 e-con-full animated-slow e-flex elementor-invisible e-con e-child\" data-id=\"a6f8833\" data-element_type=\"container\" data-settings=\"{"background_background":"video","background_video_link":"https:\\\/\\\/youtu.be\\\/hrG6vvRRHbQ","animation":"fadeInUp","background_play_on_mobile":"yes"}\">\n\t\t<div class=\"elementor-background-video-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-video-embed\"><\/div>\n\t\t\t\t\t\t<\/div><div class=\"elementor-element elementor-element-7809931 e-flex e-con-boxed e-con e-child\" data-id=\"7809931\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-6d7b456 e-con-full e-flex e-con e-child\" data-id=\"6d7b456\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fd0fa9d elementor-widget elementor-widget-image\" data-id=\"fd0fa9d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"199\" height=\"56\" src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/07\/Group-2487.png\" class=\"attachment-large size-large wp-image-337\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9aac721 elementor-widget elementor-widget-html\" data-id=\"9aac721\" data-element_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 <title>Footer Menu<\/title>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link \r\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@400&display=swap\" \r\n rel=\"stylesheet\"\r\n >\r\n <style>\r\n .site-footer {\r\n padding: 24px 0;\r\n }\r\n .footer-nav ul {\r\n list-style: none;\r\n margin: 0;\r\n padding: 0;\r\n display: flex;\r\n justify-content: center;\r\n font-family: 'Host Grotesk', sans-serif;\r\n font-weight: 400;\r\n font-style: normal;\r\n font-size: 16px;\r\n line-height: 26px;\r\n letter-spacing: 0%;\r\n }\r\n .footer-nav li {\r\n position: relative;\r\n }\r\n \/* dot separator between items *\/\r\n .footer-nav li + li::before {\r\n content: \"\u00b7\";\r\n margin: 0 12px;\r\n color: #fff;\r\n line-height: 26px;\r\n }\r\n .footer-nav a {\r\n color: #fff;\r\n text-decoration: none;\r\n }\r\n .footer-nav a:hover {\r\n text-decoration: underline;\r\n }\r\n @media (max-width: 480px) {\r\n .footer-nav ul {\r\n font-size: 14px;\r\n line-height: 22px;\r\n }\r\n .footer-nav li + li::before {\r\n margin: 0 8px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n\r\n <footer class=\"site-footer\">\r\n <nav class=\"footer-nav\">\r\n <ul>\r\n <li><a href=\"\/\">Home<\/a><\/li>\r\n <li><a href=\"\/about\">About<\/a><\/li>\r\n <li><a href=\"\/companies\">Companies<\/a><\/li>\r\n <li><a href=\"\/facilities\">Facilities<\/a><\/li>\r\n <li><a href=\"\/contact\">Contact<\/a><\/li>\r\n <\/ul>\r\n <\/nav>\r\n <\/footer>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cad4c95 elementor-widget elementor-widget-html\" data-id=\"cad4c95\" data-element_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>Request for Brochure Button<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n \/* Scoped + timing vars *\/\r\n .rfb-scope { \r\n --t: .45s; \r\n --ease: cubic-bezier(.22,.61,.36,1);\r\n display: inline-block; \r\n }\r\n\r\n .rfb-scope .rfb-btn {\r\n appearance: none;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n \/* keep content above bg layers *\/\r\n position: relative;\r\n z-index: 0;\r\n overflow: hidden;\r\n\r\n border: 1px solid #CFCFCF;\r\n border-radius: 4px;\r\n cursor: pointer;\r\n color: #FFFFFF;\r\n\r\n \/* padding from your spec *\/\r\n padding-top: 16px;\r\n padding-right: 32px;\r\n padding-bottom: 16px;\r\n padding-left: 32px;\r\n\r\n \/* transitions *\/\r\n transition: \r\n filter var(--t) var(--ease),\r\n box-shadow var(--t) var(--ease),\r\n transform .05s ease;\r\n\r\n \/* text (default) *\/\r\n font-family: \"Space Grotesk\", sans-serif;\r\n font-weight: 400; \/* Regular *\/\r\n font-size: 18px;\r\n line-height: 28px;\r\n letter-spacing: 0;\r\n text-align: center;\r\n vertical-align: middle;\r\n background: none; \/* backgrounds handled by ::before\/::after *\/\r\n }\r\n\r\n \/* Default background layer *\/\r\n .rfb-scope .rfb-btn::before,\r\n .rfb-scope .rfb-btn::after {\r\n content:\"\";\r\n position:absolute; inset:0;\r\n z-index: 0; \/* behind label *\/\r\n transition: opacity var(--t) var(--ease);\r\n background-position: center;\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n }\r\n .rfb-scope .rfb-btn::before {\r\n background-image: url(\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/07\/Background-2.png\");\r\n opacity: 1;\r\n }\r\n \/* Hover background layer *\/\r\n .rfb-scope .rfb-btn::after {\r\n background-image: url(\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/07\/Background-3.png\");\r\n opacity: 0;\r\n }\r\n\r\n \/* Label above bg layers *\/\r\n .rfb-scope .rfb-label {\r\n position: relative; \r\n z-index: 1; \r\n color:#FFFFFF;\r\n pointer-events: none; \/* ensures hover stays on button *\/\r\n }\r\n\r\n \/* Hover\/focus: crossfade and bump weight to 500 (Medium) *\/\r\n .rfb-scope .rfb-btn:hover::after,\r\n .rfb-scope .rfb-btn:focus-visible::after { opacity: 1; }\r\n .rfb-scope .rfb-btn:hover::before,\r\n .rfb-scope .rfb-btn:focus-visible::before { opacity: 0; }\r\n\r\n .rfb-scope .rfb-btn:hover,\r\n .rfb-scope .rfb-btn:focus-visible { filter: brightness(0.96); }\r\n .rfb-scope .rfb-btn:hover .rfb-label,\r\n .rfb-scope .rfb-btn:focus-visible .rfb-label {\r\n font-weight: 500; \/* Medium on hover *\/\r\n }\r\n\r\n .rfb-scope .rfb-btn:active { transform: translateY(1px); }\r\n .rfb-scope .rfb-btn:focus-visible {\r\n outline: none;\r\n box-shadow: 0 0 0 3px rgba(154, 198, 255, .8);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"rfb-scope\">\r\n <button class=\"rfb-btn\" type=\"button\" aria-label=\"Request for Brochure\">\r\n <span class=\"rfb-label\">Request for Brochure<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b6b22dc e-con-full e-flex e-con e-child\" data-id=\"b6b22dc\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-215ae2b elementor-widget elementor-widget-html\" data-id=\"215ae2b\" data-element_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 <title>Company Address<\/title>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link\r\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@400;700&display=swap\"\r\n rel=\"stylesheet\"\r\n >\r\n <style>\r\n\r\n .company-address {\r\n text-align: right;\r\n white-space: pre-line; \/* preserves single line break *\/\r\n }\r\n\r\n .company-name {\r\n font-family: 'Host Grotesk', sans-serif;\r\n font-weight: 700;\r\n font-size: 20px;\r\n line-height: 26px;\r\n color: #D7DE27;\r\n margin: 0; \/* reset default paragraph margin *\/\r\n }\r\n\r\n .company-details {\r\n font-family: 'Host Grotesk', sans-serif;\r\n font-weight: 400;\r\n font-size: 16px;\r\n line-height: 26px;\r\n color: #FAFAFA;\r\n margin: 0; \/* reset default paragraph margin *\/\r\n }\r\n \/* Tablet & below: align left *\/\r\n@media (max-width: 1024px) {\r\n .company-address {\r\n text-align: left; \/* use 'start' if you might support RTL: text-align: start; *\/\r\n }\r\n}\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"company-address\">\r\n <p class=\"company-name\">Verdant Stationery\u00a0Pvt.\u00a0Ltd.<\/p>\r\n <p class=\"company-details\">RS 14\/1A, Kolavennu (V), Kankipadu (M),\r\n Krishna District, Andhra Pradesh 521 151. INDIA<\/p>\r\n <\/div>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d977bc9 elementor-widget elementor-widget-html\" data-id=\"d977bc9\" data-element_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 <title>Email Link<\/title>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link \r\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@400&display=swap\" \r\n rel=\"stylesheet\"\r\n >\r\n <style>\r\n .email-link {\r\n font-family: 'Host Grotesk', sans-serif;\r\n font-weight: 400;\r\n font-style: normal;\r\n font-size: 16px;\r\n line-height: 26px;\r\n letter-spacing: 0%;\r\n color: #FAFAFA;\r\n text-decoration: none;\r\n }\r\n .email-link:hover {\r\n text-decoration: underline;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <a href=\"mailto:hello@verdantgroup.co.in\" class=\"email-link\">\r\n hello@verdantgroup.co.in\r\n <\/a>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d1e4945 elementor-widget elementor-widget-html\" data-id=\"d1e4945\" data-element_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 <title>Website Link<\/title>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link \r\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@600&display=swap\" \r\n rel=\"stylesheet\"\r\n >\r\n <style>\r\n .website-link {\r\n font-family: 'Host Grotesk', sans-serif;\r\n font-weight: 600;\r\n font-style: normal;\r\n font-size: 16px;\r\n line-height: 26px;\r\n letter-spacing: 0%;\r\n color: #FAFAFA;\r\n text-decoration: none;\r\n }\r\n .website-link:hover {\r\n text-decoration: underline;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <a href=\"https:\/\/www.verdantgroup.co.in\" class=\"website-link\" target=\"_blank\" rel=\"noopener\">\r\n www.verdantgroup.co.in\r\n <\/a>\r\n<\/body>\r\n<\/html>\r\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\t\t<div class=\"elementor-element elementor-element-5d281ca elementor-widget elementor-widget-spacer\" data-id=\"5d281ca\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1d80a92 e-flex e-con-boxed e-con e-child\" data-id=\"1d80a92\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-bedc61f e-con-full e-flex e-con e-child\" data-id=\"bedc61f\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-24bbd10 elementor-widget elementor-widget-html\" data-id=\"24bbd10\" data-element_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 <title>Footer Copyright & Links<\/title>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link \r\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@400&display=swap\" \r\n rel=\"stylesheet\"\r\n >\r\n <style>\r\n .footer-legal {\r\n font-family: 'Host Grotesk', sans-serif;\r\n font-weight: 400;\r\n font-style: normal;\r\n font-size: 14px;\r\n line-height: 22px;\r\n letter-spacing: 0%;\r\n color: #DEE1E6;\r\n text-align: center;\r\n padding: 16px 0;\r\n }\r\n .footer-legal a {\r\n color: #DEE1E6;\r\n text-decoration: none;\r\n margin: 0 8px;\r\n }\r\n .footer-legal a:hover {\r\n text-decoration: underline;\r\n }\r\n .footer-legal .separator {\r\n margin: 0 8px;\r\n color: #DEE1E6;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n\r\n <footer class=\"footer-legal\">\r\n \u00a9 2025 Verdant Stationery\u00a0Pvt.\u00a0Ltd.\r\n <span class=\"separator\">\u00b7<\/span>\r\n <a href=\"\/privacy\">Privacy<\/a>\r\n <span class=\"separator\">\u00b7<\/span>\r\n <a href=\"\/terms\">Terms<\/a>\r\n <\/footer>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6bb949e e-con-full e-flex e-con e-child\" data-id=\"6bb949e\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-af9d77c elementor-shape-circle e-grid-align-right elementor-grid-0 elementor-widget elementor-widget-social-icons\" data-id=\"af9d77c\" data-element_type=\"widget\" data-widget_type=\"social-icons.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-social-icons-wrapper elementor-grid\" role=\"list\">\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\" role=\"listitem\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-x-twitter elementor-repeater-item-f9169ea\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">X-twitter<\/span>\n\t\t\t\t\t\t<svg class=\"e-font-icon-svg e-fab-x-twitter\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z\"><\/path><\/svg>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\" role=\"listitem\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-facebook elementor-repeater-item-03da899\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Facebook<\/span>\n\t\t\t\t\t\t<svg class=\"e-font-icon-svg e-fab-facebook\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z\"><\/path><\/svg>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\" role=\"listitem\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-linkedin elementor-repeater-item-0431a37\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Linkedin<\/span>\n\t\t\t\t\t\t<svg class=\"e-font-icon-svg e-fab-linkedin\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z\"><\/path><\/svg>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\" role=\"listitem\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-youtube elementor-repeater-item-3fddd41\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Youtube<\/span>\n\t\t\t\t\t\t<svg class=\"e-font-icon-svg e-fab-youtube\" viewBox=\"0 0 576 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z\"><\/path><\/svg>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\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\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Menu \u2014 Verdant (Infrastructure dropdown only, unique classes) Home About Us Stationery & More Infrastructure Operations & Productions Facilities & Machinery Menu \u2014 Verdant (QC dropdown \u2022 item bg on hover) Quality Control Awards Certifications CSR Blog Contact Us Precise Text over SVG Mask (Image) About Us Our Story Heading Our Story Responsive Heading The… <a href=\"https:\/\/verdantgroup.co.in\/index.php\/about-us\/\" rel=\"bookmark\"><span class=\"screen-reader-text\">About Us<\/span><\/a><\/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":{"_acf_changed":false,"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"class_list":["post-635","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/verdantgroup.co.in\/index.php\/wp-json\/wp\/v2\/pages\/635","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/verdantgroup.co.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/verdantgroup.co.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/verdantgroup.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/verdantgroup.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=635"}],"version-history":[{"count":697,"href":"https:\/\/verdantgroup.co.in\/index.php\/wp-json\/wp\/v2\/pages\/635\/revisions"}],"predecessor-version":[{"id":5449,"href":"https:\/\/verdantgroup.co.in\/index.php\/wp-json\/wp\/v2\/pages\/635\/revisions\/5449"}],"wp:attachment":[{"href":"https:\/\/verdantgroup.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}