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-512ee49 e-con-full e-flex e-con e-child\" data-id=\"512ee49\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-15d46a3 elementor-widget elementor-widget-image\" data-id=\"15d46a3\" 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-e44e1b4 e-grid e-con-full e-con e-child\" data-id=\"e44e1b4\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-50a0274 e-con-full e-flex e-con e-child\" data-id=\"50a0274\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-59c223d elementor-widget elementor-widget-html\" data-id=\"59c223d\" 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 e-flex e-con e-child\" data-id=\"e027206\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5eb955b elementor-hidden-mobile elementor-hidden-tablet elementor-widget elementor-widget-html\" data-id=\"5eb955b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n\r\n\r\n<!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\r\n\r\n<link rel=\"preload\" as=\"image\" href=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/646dfb511a126b0a59a6ff50cdded278d36d3ff8-scaled.jpg\"\/>\r\n\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%20174.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 images behave the same and stack *\/\r\n .video-mask :is(video,img){\r\n position:absolute; inset:0;\r\n width:100%; height:100%;\r\n object-fit:cover; display:block;\r\n transform:scale(1);\r\n transition:\r\n transform var(--fade-dur) var(--fade-ease),\r\n opacity var(--fade-dur) var(--fade-ease);\r\n will-change: transform, opacity;\r\n }\r\n .wrapd:hover .video-mask :is(video,img){ transform:scale(1.03) }\r\n\r\n \/* .video-mask img:hover {\r\n transform: translateY(-20px);\r\n } *\/\r\n \/* Crossfade *\/\r\n .img-primary{ opacity:1; }\r\n .img-hover{ opacity:0; }\r\n .wrapd:hover .img-primary{ opacity:0; }\r\n .wrapd:hover .img-hover{ opacity:1; }\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 \r\n <img\r\n class=\"img-primary\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/WhatsApp-Image-2025-08-21-at-02.24.09_078c3068.jpg\"\r\n alt=\"Operations and Productions \u2014 default\"\r\n loading=\"eager\"\r\n decoding=\"async\"\r\n fetchpriority=\"high\"\r\n \/>\r\n \r\n <img\r\n class=\"img-hover\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/646dfb511a126b0a59a6ff50cdded278d36d3ff8-scaled.jpg\"\r\n alt=\"Operations and Productions \u2014 hover\"\r\n loading=\"eager\"\r\n decoding=\"async\"\r\n fetchpriority=\"high\"\r\n aria-hidden=\"true\"\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\">Operations &<br>Productions<\/h2>\r\n <\/div>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-dc4894a e-con-full elementor-hidden-desktop elementor-hidden-tablet e-flex e-con e-child\" data-id=\"dc4894a\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c8b4684 elementor-widget elementor-widget-image\" data-id=\"c8b4684\" 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-1618873227-scaled-rb14thag6qd6hbcchav01zma0st8m16r03gs4awxq8.png\" title=\"Frame 1618873227\" alt=\"Frame 1618873227\" 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-6889712 e-con-full elementor-hidden-desktop elementor-hidden-mobile e-flex e-con e-child\" data-id=\"6889712\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-97f9089 elementor-widget elementor-widget-image\" data-id=\"97f9089\" 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-1618873227-scaled.png\" class=\"attachment-full size-full wp-image-5000\" alt=\"\" srcset=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873227-scaled.png 1250w, https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873227-146x300.png 146w, https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873227-500x1024.png 500w, https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873227-768x1573.png 768w, https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873227-750x1536.png 750w, https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873227-1000x2048.png 1000w, https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/elementor\/thumbs\/Frame-1618873227-scaled-rb14thag6qd6hbcchav01zma0st8m16r03gs4awxq8.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<div class=\"elementor-element elementor-element-bb37c4b e-con-full e-flex e-con e-child\" data-id=\"bb37c4b\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t<div class=\"elementor-element elementor-element-48a95c8 e-con-full e-flex e-con e-child\" data-id=\"48a95c8\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4a76557 elementor-invisible elementor-widget elementor-widget-html\" data-id=\"4a76557\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInUp"}\" data-widget_type=\"html.default\">\n\t\t\t\t\t\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 :root{\r\n --light:#436F49; \/* \"Building\" & \"at the Core.\" *\/\r\n --strong:#0C4C44; \/* \"Scale, Speed & Quality\" *\/\r\n }\r\n\r\n .vh-wrap{\r\n width:100%;\r\n display:flex;\r\n justify-content:center; \/* change to flex-start for left align *\/\r\n padding:clamp(8px,2vw,24px);\r\n }\r\n .vh-title{\r\n margin:0;\r\n line-height:1.15;\r\n text-align:center;\r\n font-size:0; \/* prevent inline-gap; each span defines its own size *\/\r\n }\r\n\r\n \/* EXACT style for \"Building\" and \"at the Core.\" *\/\r\n .vh-title .light{\r\n font-family:'Host Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight:400; \/* Regular *\/\r\n font-size:48px;\r\n line-height:58px;\r\n letter-spacing:0.48px; \/* 1% of 48px *\/\r\n color:var(--light);\r\n display:inline;\r\n vertical-align:middle;\r\n }\r\n\r\n \/* UPDATED strong class per your spec *\/\r\n .vh-title .strong{\r\n font-family:'Host Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight:700; \/* Bold *\/\r\n font-size:48px;\r\n line-height:58px;\r\n letter-spacing:0.48px; \/* 1% *\/\r\n color:var(--strong);\r\n display:inline;\r\n vertical-align:middle;\r\n \/* text-align applies to containers; keeping center on the H1 above *\/\r\n }\r\n \/* Mobile only: left-align container and text *\/\r\n @media (max-width: 767px){\r\n .vh-wrap{ justify-content: flex-start; }\r\n .vh-title{ text-align: left; }\r\n }\r\n<\/style>\r\n\r\n<div class=\"vh-wrap\">\r\n <h1 class=\"vh-title\">\r\n <span class=\"light\">Building <\/span>\r\n <span class=\"strong\">Scale, Speed & Quality <\/span>\r\n <span class=\"light\"> at the Core.<\/span>\r\n <\/h1>\r\n<\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9016672 elementor-widget__width-initial elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"9016672\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInUp"}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">At Verdant, our infrastructure is more than just machines \u2014 it\u2019s the engine of innovation, efficiency, and excellence. Our semi and fully-automated manufacturing facilities are designed to deliver precision, consistency, and scalability across a wide product range for both domestic and global markets.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d872980 elementor-widget elementor-widget-spacer\" data-id=\"d872980\" 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<div class=\"elementor-element elementor-element-96d3e9b e-con-full e-flex e-con e-child\" data-id=\"96d3e9b\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-d6a16d3 e-con-full e-flex e-con e-child\" data-id=\"d6a16d3\" data-element_type=\"container\" id=\"integrated_sticky\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5347a02 elementor-invisible elementor-widget elementor-widget-html\" data-id=\"5347a02\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInLeft"}\" 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>Business Operations<\/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\r\n .bo-title{\r\n font-family: 'Host Grotesk';\r\n font-weight: 700; \/* Bold *\/\r\n font-size: 48px;\r\n line-height: 58px; \/* exact *\/\r\n letter-spacing: 0.01em; \/* \u2248 1% *\/\r\n color: #001316;\r\n margin: 0;\r\n text-align: left;\r\n vertical-align: middle; \/* included per spec *\/\r\n }\r\n\r\n @media (max-width: 640px){\r\n .bo-title{ font-size: 36px; line-height: 46px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n <h1 class=\"bo-title\">Integrated Manufacturing Facilities\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-ed26f8d animated-slow elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"ed26f8d\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInLeft"}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Efficiency Meets Expansion.<br>Excellence Meets Execution.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8abcd46 e-con-full e-flex e-con e-child\" data-id=\"8abcd46\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-2345748 e-con-full e-flex e-con e-child\" data-id=\"2345748\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-4b6ee7c e-con-full e-flex e-con e-child\" data-id=\"4b6ee7c\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-c53a115 e-con-full e-flex e-con e-child\" data-id=\"c53a115\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3ac7776 animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"3ac7776\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInRight","_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>Styled Gradient Text<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@700&display=swap\" rel=\"stylesheet\" \/>\r\n\r\n <style>\r\n .gradient-text {\r\n font-family: \"Space Grotesk\";\r\n font-weight: 700; \/* Bold *\/\r\n font-style: normal;\r\n font-size: 32px;\r\n line-height: 51.33px;\r\n letter-spacing: 0;\r\n vertical-align: middle;\r\n\r\n \/* Gradient applied to text *\/\r\n background: linear-gradient(117.1deg, #001316 -16.52%, #04655C 52.84%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n text-fill-color: transparent;\r\n\r\n display: inline-block;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"gradient-text\">Vijayawada Facility<\/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-718bb71 e-con-full e-flex e-con e-child\" data-id=\"718bb71\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3f4008e animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"3f4008e\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInRight","_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>Styled Text<\/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 .hq-text {\r\n font-family: \"Host Grotesk\";\r\n font-weight: 500; \/* Medium *\/\r\n font-style: normal;\r\n font-size: 24px;\r\n line-height: 30.58px;\r\n letter-spacing: 0;\r\n vertical-align: middle;\r\n color: #737373;\r\n\r\n display: inline-block;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"hq-text\">Headquarters<\/div>\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-ae2cfdc e-con-full e-flex e-con e-child\" data-id=\"ae2cfdc\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2b5d077 animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"2b5d077\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInRight","_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>Styled Text<\/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 .hub-text {\r\n font-family: \"Host Grotesk\";\r\n font-weight: 700; \/* Bold *\/\r\n font-style: normal;\r\n font-size: 24px;\r\n line-height: 100%; \/* exactly 100% *\/\r\n letter-spacing: 0;\r\n vertical-align: middle;\r\n color: #6B8662;\r\n\r\n display: inline-block;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"hub-text\">Central Hub for Domestic Production & Distribution<\/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-ca98869 e-grid e-con-full e-con e-child\" data-id=\"ca98869\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-44332b4 e-con-full e-flex e-con e-child\" data-id=\"44332b4\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5442d7f elementor-widget elementor-widget-html\" data-id=\"5442d7f\" 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>Accent Card \u2014 Hover BG + White Text (Responsive)<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@700&family=Space+Grotesk:wght@400&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n \/* ===== Base (desktop\/laptop) ===== *\/\r\n .accent-card{\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 216px;\r\n border-radius: 12px;\r\n border-left: 8px solid #D7DE27;\r\n background: #FFFFFF33;\r\n box-shadow: 0 8px 24px rgba(0,0,0,.12);\r\n display: flex;\r\n align-items: center;\r\n padding: 20px 24px;\r\n box-sizing: border-box;\r\n color: #0f172a;\r\n isolation: isolate;\r\n }\r\n\r\n \/* Hover background *\/\r\n .accent-card::before{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background: url(\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/07\/Background-3.png\") center \/ cover no-repeat;\r\n opacity: 0;\r\n transition: opacity .35s ease;\r\n z-index: 0;\r\n pointer-events:none;\r\n }\r\n @media (any-hover: hover){\r\n .accent-card:hover::before{ opacity: 1; }\r\n }\r\n\r\n .accent-card .content{\r\n position: relative;\r\n z-index: 1;\r\n display:flex;\r\n flex-direction:column;\r\n gap: 8px;\r\n }\r\n\r\n \/* Heading *\/\r\n .accent-card h3{\r\n margin: 0;\r\n font-family: 'Host Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight: 700;\r\n font-size: 24px;\r\n line-height: 1;\r\n letter-spacing: 0;\r\n color: #6B8662;\r\n transition: color .25s ease;\r\n }\r\n\r\n \/* List *\/\r\n .accent-card ul{\r\n margin: 0;\r\n padding-left: 18px;\r\n list-style: disc;\r\n }\r\n .accent-card li{\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: 18px;\r\n line-height: 32px;\r\n letter-spacing: 0;\r\n color: #616161;\r\n transition: color .25s ease;\r\n }\r\n\r\n \/* Hover colors on hover-capable devices *\/\r\n @media (any-hover: hover){\r\n .accent-card:hover h3{ color:#FFFFFF; }\r\n .accent-card:hover li{ color:#FFFFFF; }\r\n .accent-card:hover li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* ===== Touch support: tap to \u201chover\u201d ===== *\/\r\n .accent-card:focus,\r\n .accent-card:focus-visible{ outline: none; }\r\n @media (any-hover: none){\r\n .accent-card:active::before,\r\n .accent-card:focus::before,\r\n .accent-card:focus-within::before{ opacity: 1; }\r\n\r\n .accent-card:active h3,\r\n .accent-card:focus h3,\r\n .accent-card:focus-within h3{ color:#FFFFFF; }\r\n\r\n .accent-card:active li,\r\n .accent-card:focus li,\r\n .accent-card:focus-within li{ color:#FFFFFF; }\r\n\r\n .accent-card:active li::marker,\r\n .accent-card:focus li::marker,\r\n .accent-card:focus-within li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* ===== Tablet (\u2264 1024px) ===== *\/\r\n @media (max-width: 1024px){\r\n .accent-card{\r\n height:auto; \/* let content grow *\/\r\n padding:18px 20px;\r\n border-left-width:6px;\r\n }\r\n .accent-card h3{ font-size:22px; }\r\n .accent-card li{\r\n font-size:17px;\r\n line-height:30px;\r\n }\r\n }\r\n\r\n \/* ===== Mobile (\u2264 768px) ===== *\/\r\n @media (max-width: 768px){\r\n .accent-card{\r\n height:auto;\r\n padding:16px 18px;\r\n border-left-width:6px;\r\n align-items:flex-start; \/* better for multi-line *\/\r\n }\r\n .accent-card .content{ gap:6px; }\r\n .accent-card h3{ font-size:20px; }\r\n .accent-card ul{ padding-left:16px; }\r\n .accent-card li{\r\n font-size:16px;\r\n line-height:28px;\r\n }\r\n }\r\n\r\n \/* ===== Small phones (\u2264 480px) ===== *\/\r\n @media (max-width: 480px){\r\n .accent-card{\r\n padding:14px 16px;\r\n border-left-width:4px;\r\n border-radius:10px;\r\n }\r\n .accent-card h3{ font-size:18px; }\r\n .accent-card li{\r\n font-size:15px;\r\n line-height:26px;\r\n }\r\n }\r\n\r\n \/* Motion safety *\/\r\n @media (prefers-reduced-motion: reduce){\r\n .accent-card::before{ transition:none; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div class=\"accent-card\" role=\"group\" aria-label=\"Info card\" tabindex=\"0\">\r\n <div class=\"content\">\r\n <h3>Efficient Domestic Reach<\/h3>\r\n <ul>\r\n <li>Located at the crossroads of major transport corridors<\/li>\r\n <li>Enables smooth pan-India<br> distribution<\/li>\r\n <\/ul>\r\n <\/div>\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-21c83af e-con-full e-flex e-con e-child\" data-id=\"21c83af\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-35d8606 elementor-widget elementor-widget-html\" data-id=\"35d8606\" 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>Accent Card \u2014 Variant with Unique ID & Classes (Responsive)<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@700&family=Space+Grotesk:wght@400&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n \/* =============== Base (desktop\/laptop) =============== *\/\r\n #edr-card-2.edr-card{\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 216px;\r\n border-radius: 12px;\r\n border-left: 8px solid #D7DE27;\r\n background: #FFFFFF33;\r\n box-shadow: 0 8px 24px rgba(0,0,0,.12);\r\n display: flex;\r\n align-items: center;\r\n padding: 20px 24px;\r\n box-sizing: border-box;\r\n color: #0f172a;\r\n isolation: isolate;\r\n }\r\n\r\n \/* Hover background image *\/\r\n #edr-card-2.edr-card::before{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background: url(\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/07\/Background-3.png\") center \/ cover no-repeat;\r\n opacity: 0;\r\n transition: opacity .35s ease;\r\n z-index: 0;\r\n pointer-events:none;\r\n }\r\n \/* Trigger only on hover-capable devices *\/\r\n @media (any-hover: hover){\r\n #edr-card-2.edr-card:hover::before{ opacity: 1; }\r\n }\r\n\r\n \/* Content *\/\r\n #edr-card-2 .edr-content{\r\n position: relative; \/* above ::before *\/\r\n z-index: 1;\r\n display:flex;\r\n flex-direction:column;\r\n gap: 8px;\r\n }\r\n\r\n \/* Heading *\/\r\n #edr-card-2 .edr-heading{\r\n margin: 0;\r\n font-family: 'Host Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight: 700;\r\n font-size: 24px;\r\n line-height: 1; \/* 100% *\/\r\n letter-spacing: 0;\r\n color: #6B8662;\r\n transition: color .25s ease;\r\n leading-trim: none;\r\n vertical-align: middle;\r\n }\r\n\r\n \/* Bullets *\/\r\n #edr-card-2 .edr-points{\r\n margin: 0;\r\n padding-left: 18px;\r\n list-style: disc;\r\n }\r\n #edr-card-2 .edr-points li{\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: 18px;\r\n line-height: 32px;\r\n letter-spacing: 0;\r\n color: #616161;\r\n transition: color .25s ease;\r\n leading-trim: none;\r\n }\r\n\r\n \/* Hover colors on hover-capable devices *\/\r\n @media (any-hover: hover){\r\n #edr-card-2.edr-card:hover .edr-heading{ color:#FFFFFF; }\r\n #edr-card-2.edr-card:hover .edr-points li{ color:#FFFFFF; }\r\n #edr-card-2.edr-card:hover .edr-points li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* =============== Touch: tap-to-activate (mobile\/tablet) =============== *\/\r\n #edr-card-2.edr-card:focus,\r\n #edr-card-2.edr-card:focus-visible{ outline: none; }\r\n @media (any-hover: none){\r\n #edr-card-2.edr-card:active::before,\r\n #edr-card-2.edr-card:focus::before,\r\n #edr-card-2.edr-card:focus-within::before{ opacity:1; }\r\n\r\n #edr-card-2.edr-card:active .edr-heading,\r\n #edr-card-2.edr-card:focus .edr-heading,\r\n #edr-card-2.edr-card:focus-within .edr-heading{ color:#FFFFFF; }\r\n\r\n #edr-card-2.edr-card:active .edr-points li,\r\n #edr-card-2.edr-card:focus .edr-points li,\r\n #edr-card-2.edr-card:focus-within .edr-points li{ color:#FFFFFF; }\r\n\r\n #edr-card-2.edr-card:active .edr-points li::marker,\r\n #edr-card-2.edr-card:focus .edr-points li::marker,\r\n #edr-card-2.edr-card:focus-within .edr-points li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* =============== Tablet (\u2264 1024px) =============== *\/\r\n @media (max-width: 1024px){\r\n #edr-card-2.edr-card{\r\n height:auto; \/* let content grow *\/\r\n padding:18px 20px;\r\n border-left-width:6px;\r\n }\r\n #edr-card-2 .edr-heading{ font-size:22px; }\r\n #edr-card-2 .edr-points li{\r\n font-size:17px;\r\n line-height:30px;\r\n }\r\n }\r\n\r\n \/* =============== Mobile (\u2264 768px) =============== *\/\r\n @media (max-width: 768px){\r\n #edr-card-2.edr-card{\r\n height:auto;\r\n padding:16px 18px;\r\n border-left-width:6px;\r\n align-items:flex-start; \/* better for multi-line *\/\r\n }\r\n #edr-card-2 .edr-content{ gap:6px; }\r\n #edr-card-2 .edr-heading{ font-size:20px; }\r\n #edr-card-2 .edr-points{ padding-left:16px; }\r\n #edr-card-2 .edr-points li{\r\n font-size:16px;\r\n line-height:28px;\r\n }\r\n }\r\n\r\n \/* =============== Small phones (\u2264 480px) =============== *\/\r\n @media (max-width: 480px){\r\n #edr-card-2.edr-card{\r\n padding:14px 16px;\r\n border-left-width:4px;\r\n border-radius:10px;\r\n }\r\n #edr-card-2 .edr-heading{ font-size:18px; }\r\n #edr-card-2 .edr-points li{\r\n font-size:15px;\r\n line-height:26px;\r\n }\r\n }\r\n\r\n \/* Motion safety *\/\r\n @media (prefers-reduced-motion: reduce){\r\n #edr-card-2.edr-card::before{ transition:none; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div id=\"edr-card-2\" class=\"edr-card\" role=\"group\" aria-label=\"Info card variant\" tabindex=\"0\">\r\n <div class=\"edr-content\">\r\n <h3 class=\"edr-heading\">Advanced Book Binding Units<\/h3>\r\n <ul class=\"edr-points\">\r\n <li>Wiro, spiral, and case-binding capabilities<\/li>\r\n <li>Supports private label and institutional formats<\/li>\r\n <\/ul>\r\n <\/div>\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-60f2419 e-con-full e-flex e-con e-child\" data-id=\"60f2419\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ac0434a elementor-widget elementor-widget-html\" data-id=\"ac0434a\" 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>Accent Card \u2014 Variant 3 (Responsive)<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@700&family=Space+Grotesk:wght@400&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n \/* ===== Base (desktop\/laptop unchanged) ===== *\/\r\n #edr-card-3.edr3-card{\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 216px;\r\n border-radius: 12px;\r\n border-left: 8px solid #D7DE27;\r\n background: #FFFFFF33;\r\n box-shadow: 0 8px 24px rgba(0,0,0,.12);\r\n display: flex;\r\n align-items: center;\r\n padding: 20px 24px;\r\n box-sizing: border-box;\r\n color: #0f172a;\r\n isolation: isolate;\r\n }\r\n\r\n \/* Hover background image *\/\r\n #edr-card-3.edr3-card::before{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background: url(\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/07\/Background-3.png\") center \/ cover no-repeat;\r\n opacity: 0;\r\n transition: opacity .35s ease;\r\n z-index: 0;\r\n pointer-events:none;\r\n }\r\n \/* Only on hover-capable devices *\/\r\n @media (any-hover: hover){\r\n #edr-card-3.edr3-card:hover::before{ opacity:1; }\r\n }\r\n\r\n \/* Content *\/\r\n #edr-card-3 .edr3-content{\r\n position: relative;\r\n z-index: 1;\r\n display:flex;\r\n flex-direction:column;\r\n gap: 8px;\r\n }\r\n\r\n \/* Heading *\/\r\n #edr-card-3 .edr3-heading{\r\n margin: 0;\r\n font-family: 'Host Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight: 700;\r\n font-size: 24px;\r\n line-height: 1;\r\n color: #6B8662;\r\n letter-spacing: 0;\r\n transition: color .25s ease;\r\n vertical-align: middle;\r\n leading-trim: none;\r\n }\r\n\r\n \/* List *\/\r\n #edr-card-3 .edr3-list{\r\n margin: 0;\r\n padding-left: 18px;\r\n list-style: disc;\r\n }\r\n #edr-card-3 .edr3-list li{\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: 18px;\r\n line-height: 32px;\r\n letter-spacing: 0;\r\n color: #616161;\r\n transition: color .25s ease;\r\n leading-trim: none;\r\n }\r\n\r\n \/* Hover colors (hover-capable only) *\/\r\n @media (any-hover: hover){\r\n #edr-card-3.edr3-card:hover .edr3-heading{ color:#FFFFFF; }\r\n #edr-card-3.edr3-card:hover .edr3-list li{ color:#FFFFFF; }\r\n #edr-card-3.edr3-card:hover .edr3-list li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* ===== Touch: tap-to-activate ===== *\/\r\n #edr-card-3.edr3-card:focus,\r\n #edr-card-3.edr3-card:focus-visible{ outline: none; }\r\n @media (any-hover: none){\r\n #edr-card-3.edr3-card:active::before,\r\n #edr-card-3.edr3-card:focus::before,\r\n #edr-card-3.edr3-card:focus-within::before{ opacity:1; }\r\n\r\n #edr-card-3.edr3-card:active .edr3-heading,\r\n #edr-card-3.edr3-card:focus .edr3-heading,\r\n #edr-card-3.edr3-card:focus-within .edr3-heading{ color:#FFFFFF; }\r\n\r\n #edr-card-3.edr3-card:active .edr3-list li,\r\n #edr-card-3.edr3-card:focus .edr3-list li,\r\n #edr-card-3.edr3-card:focus-within .edr3-list li{ color:#FFFFFF; }\r\n\r\n #edr-card-3.edr3-card:active .edr3-list li::marker,\r\n #edr-card-3.edr3-card:focus .edr3-list li::marker,\r\n #edr-card-3.edr3-card:focus-within .edr3-list li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* ===== Tablet (\u2264 1024px) ===== *\/\r\n @media (max-width: 1024px){\r\n #edr-card-3.edr3-card{\r\n height:auto; \/* let content flow *\/\r\n padding:18px 20px;\r\n border-left-width:6px;\r\n }\r\n #edr-card-3 .edr3-heading{ font-size:22px; }\r\n #edr-card-3 .edr3-list li{\r\n font-size:17px;\r\n line-height:30px;\r\n }\r\n }\r\n\r\n \/* ===== Mobile (\u2264 768px) ===== *\/\r\n @media (max-width: 768px){\r\n #edr-card-3.edr3-card{\r\n height:auto;\r\n padding:16px 18px;\r\n border-left-width:6px;\r\n align-items:flex-start; \/* better for multi-line *\/\r\n }\r\n #edr-card-3 .edr3-content{ gap:6px; }\r\n #edr-card-3 .edr3-heading{ font-size:20px; }\r\n #edr-card-3 .edr3-list{ padding-left:16px; }\r\n #edr-card-3 .edr3-list li{\r\n font-size:16px;\r\n line-height:28px;\r\n }\r\n }\r\n\r\n \/* ===== Small phones (\u2264 480px) ===== *\/\r\n @media (max-width: 480px){\r\n #edr-card-3.edr3-card{\r\n padding:14px 16px;\r\n border-left-width:4px;\r\n border-radius:10px;\r\n }\r\n #edr-card-3 .edr3-heading{ font-size:18px; }\r\n #edr-card-3 .edr3-list li{\r\n font-size:15px;\r\n line-height:26px;\r\n }\r\n }\r\n\r\n \/* Motion safety *\/\r\n @media (prefers-reduced-motion: reduce){\r\n #edr-card-3.edr3-card::before{ transition:none; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div id=\"edr-card-3\" class=\"edr3-card\" role=\"group\" aria-label=\"Info card variant 3\" tabindex=\"0\">\r\n <div class=\"edr3-content\">\r\n <h3 class=\"edr3-heading\">High-Capacity Institutional Lines<\/h3>\r\n <ul class=\"edr3-list\">\r\n <li>Built for bulk government and NGO orders<\/li>\r\n <li>Agile production setup for tenders and contracts<\/li>\r\n <\/ul>\r\n <\/div>\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-68c818a e-con-full e-flex e-con e-child\" data-id=\"68c818a\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e5bf6e1 elementor-widget elementor-widget-html\" data-id=\"e5bf6e1\" 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>Accent Card \u2014 Variant 4 (Responsive)<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@700&family=Space+Grotesk:wght@400&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n \/* ===== Base (desktop\/laptop unchanged) ===== *\/\r\n #edr-card-4.edr4-card{\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 216px;\r\n border-radius: 12px;\r\n border-left: 8px solid #D7DE27; \/* left accent *\/\r\n background: #FFFFFF33; \/* default bg *\/\r\n box-shadow: 0 8px 24px rgba(0,0,0,.12);\r\n display: flex;\r\n align-items: center;\r\n padding: 20px 24px;\r\n box-sizing: border-box;\r\n color: #0f172a;\r\n isolation: isolate;\r\n }\r\n\r\n \/* Hover background image *\/\r\n #edr-card-4.edr4-card::before{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background: url(\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/07\/Background-3.png\") center \/ cover no-repeat;\r\n opacity: 0;\r\n transition: opacity .35s ease;\r\n z-index: 0;\r\n pointer-events:none;\r\n }\r\n \/* Only trigger on hover-capable devices *\/\r\n @media (any-hover: hover){\r\n #edr-card-4.edr4-card:hover::before{ opacity: 1; }\r\n }\r\n\r\n \/* Content *\/\r\n #edr-card-4 .edr4-content{\r\n position: relative; \/* above ::before *\/\r\n z-index: 1;\r\n display:flex;\r\n flex-direction:column;\r\n gap: 8px;\r\n }\r\n\r\n \/* Heading *\/\r\n #edr-card-4 .edr4-heading{\r\n margin: 0;\r\n font-family: 'Host Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight: 700;\r\n font-size: 24px;\r\n line-height: 1; \/* 100% *\/\r\n letter-spacing: 0;\r\n color: #6B8662; \/* default *\/\r\n transition: color .25s ease;\r\n vertical-align: middle;\r\n leading-trim: none;\r\n }\r\n\r\n \/* List *\/\r\n #edr-card-4 .edr4-list{\r\n margin: 0;\r\n padding-left: 18px;\r\n list-style: disc;\r\n }\r\n #edr-card-4 .edr4-list li{\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: 18px;\r\n line-height: 32px;\r\n letter-spacing: 0;\r\n color: #616161;\r\n transition: color .25s ease;\r\n leading-trim: none;\r\n }\r\n\r\n \/* Hover colors on hover-capable devices *\/\r\n @media (any-hover: hover){\r\n #edr-card-4.edr4-card:hover .edr4-heading{ color:#FFFFFF; }\r\n #edr-card-4.edr4-card:hover .edr4-list li{ color:#FFFFFF; }\r\n #edr-card-4.edr4-card:hover .edr4-list li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* ===== Touch: tap-to-activate (mobile\/tablet) ===== *\/\r\n #edr-card-4.edr4-card:focus,\r\n #edr-card-4.edr4-card:focus-visible{ outline: none; }\r\n @media (any-hover: none){\r\n #edr-card-4.edr4-card:active::before,\r\n #edr-card-4.edr4-card:focus::before,\r\n #edr-card-4.edr4-card:focus-within::before{ opacity:1; }\r\n\r\n #edr-card-4.edr4-card:active .edr4-heading,\r\n #edr-card-4.edr4-card:focus .edr4-heading,\r\n #edr-card-4.edr4-card:focus-within .edr4-heading{ color:#FFFFFF; }\r\n\r\n #edr-card-4.edr4-card:active .edr4-list li,\r\n #edr-card-4.edr4-card:focus .edr4-list li,\r\n #edr-card-4.edr4-card:focus-within .edr4-list li{ color:#FFFFFF; }\r\n\r\n #edr-card-4.edr4-card:active .edr4-list li::marker,\r\n #edr-card-4.edr4-card:focus .edr4-list li::marker,\r\n #edr-card-4.edr4-card:focus-within .edr4-list li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* ===== Tablet (\u2264 1024px) ===== *\/\r\n @media (max-width: 1024px){\r\n #edr-card-4.edr4-card{\r\n height:auto; \/* let content flow *\/\r\n padding:18px 20px;\r\n border-left-width:6px;\r\n }\r\n #edr-card-4 .edr4-heading{ font-size:22px; }\r\n #edr-card-4 .edr4-list li{\r\n font-size:17px;\r\n line-height:30px;\r\n }\r\n }\r\n\r\n \/* ===== Mobile (\u2264 768px) ===== *\/\r\n @media (max-width: 768px){\r\n #edr-card-4.edr4-card{\r\n height:auto;\r\n padding:16px 18px;\r\n border-left-width:6px;\r\n align-items:flex-start; \/* better for multi-line *\/\r\n }\r\n #edr-card-4 .edr4-content{ gap:6px; }\r\n #edr-card-4 .edr4-heading{ font-size:20px; }\r\n #edr-card-4 .edr4-list{ padding-left:16px; }\r\n #edr-card-4 .edr4-list li{\r\n font-size:16px;\r\n line-height:28px;\r\n }\r\n }\r\n\r\n \/* ===== Small phones (\u2264 480px) ===== *\/\r\n @media (max-width: 480px){\r\n #edr-card-4.edr4-card{\r\n padding:14px 16px;\r\n border-left-width:4px;\r\n border-radius:10px;\r\n }\r\n #edr-card-4 .edr4-heading{ font-size:18px; }\r\n #edr-card-4 .edr4-list li{\r\n font-size:15px;\r\n line-height:26px;\r\n }\r\n }\r\n\r\n \/* Motion safety *\/\r\n @media (prefers-reduced-motion: reduce){\r\n #edr-card-4.edr4-card::before{ transition:none; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div id=\"edr-card-4\" class=\"edr4-card\" role=\"group\" aria-label=\"Info card variant 4\" tabindex=\"0\">\r\n <div class=\"edr4-content\">\r\n <h3 class=\"edr4-heading\">ERP-Integrated Operations<\/h3>\r\n <ul class=\"edr4-list\">\r\n <li>Real-time scheduling, inventory tracking & dispatch<\/li>\r\n <li>Intelligent logistics planning & proof-of-delivery systems<\/li>\r\n <\/ul>\r\n <\/div>\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\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-14549a8 e-con-full e-flex e-con e-child\" data-id=\"14549a8\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-f0dc8bb e-con-full e-flex e-con e-child\" data-id=\"f0dc8bb\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-53b48d6 e-con-full e-flex e-con e-child\" data-id=\"53b48d6\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-aadb1a1 e-con-full e-flex e-con e-child\" data-id=\"aadb1a1\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-04d4d3f animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"04d4d3f\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInRight","_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>Styled Gradient Text<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@700&display=swap\" rel=\"stylesheet\" \/>\r\n\r\n <style>\r\n .gradient-text {\r\n font-family: \"Space Grotesk\";\r\n font-weight: 700; \/* Bold *\/\r\n font-style: normal;\r\n font-size: 32px;\r\n line-height: 51.33px;\r\n letter-spacing: 0;\r\n vertical-align: middle;\r\n\r\n \/* Gradient applied to text *\/\r\n background: linear-gradient(117.1deg, #001316 -16.52%, #04655C 52.84%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n text-fill-color: transparent;\r\n\r\n display: inline-block;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"gradient-text\">Hyderabad Facility <\/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-820bca5 e-con-full e-flex e-con e-child\" data-id=\"820bca5\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-89b8f41 animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"89b8f41\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInRight","_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>Styled Text<\/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 .hq-text {\r\n font-family: \"Host Grotesk\";\r\n font-weight: 500; \/* Medium *\/\r\n font-style: normal;\r\n font-size: 24px;\r\n line-height: 30.58px;\r\n letter-spacing: 0;\r\n vertical-align: middle;\r\n color: #737373;\r\n\r\n display: inline-block;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"hq-text\">(Launching FY25)<\/div>\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-1079303 e-con-full e-flex e-con e-child\" data-id=\"1079303\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f04b78d animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"f04b78d\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInRight","_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>Styled Text<\/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 .hub-text {\r\n font-family: \"Host Grotesk\";\r\n font-weight: 700; \/* Bold *\/\r\n font-style: normal;\r\n font-size: 24px;\r\n line-height: 100%; \/* exactly 100% *\/\r\n letter-spacing: 0;\r\n vertical-align: middle;\r\n color: #6B8662;\r\n\r\n display: inline-block;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"hub-text\">Verdant's New Premium & Export-Grade Manufacturing Unit<\/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-f6379c2 e-grid e-con-full e-con e-child\" data-id=\"f6379c2\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-bc60a50 e-con-full e-flex e-con e-child\" data-id=\"bc60a50\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2d76e89 elementor-widget elementor-widget-html\" data-id=\"2d76e89\" 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>Accent Card \u2014 Variant 5 (Responsive)<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@700&family=Space+Grotesk:wght@400&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n \/* =============== Base (desktop\/laptop unchanged) =============== *\/\r\n #edr-card-5.edr5-card{\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 216px;\r\n border-radius: 12px;\r\n border-left: 8px solid #849B40; \/* left accent *\/\r\n background: #FFFFFF33; \/* default bg *\/\r\n box-shadow: 0 8px 24px rgba(0,0,0,.12);\r\n display: flex;\r\n align-items: center;\r\n padding: 20px 24px;\r\n box-sizing: border-box;\r\n color: #0f172a;\r\n isolation: isolate;\r\n }\r\n\r\n \/* Hover background image (fade-in overlay) \u2014 only on devices that support hover *\/\r\n #edr-card-5.edr5-card::before{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background: url(\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/07\/Background-3.png\") center \/ cover no-repeat;\r\n opacity: 0;\r\n transition: opacity .35s ease;\r\n z-index: 0;\r\n pointer-events:none;\r\n }\r\n @media (any-hover: hover){\r\n #edr-card-5.edr5-card:hover::before{ opacity: 1; }\r\n }\r\n\r\n \/* Content wrapper *\/\r\n #edr-card-5 .edr5-content{\r\n position: relative; \/* above ::before *\/\r\n z-index: 1;\r\n display:flex;\r\n flex-direction:column;\r\n gap: 8px;\r\n }\r\n\r\n \/* Heading *\/\r\n #edr-card-5 .edr5-heading{\r\n margin: 0;\r\n font-family: 'Host Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight: 700;\r\n font-size: 24px;\r\n line-height: 1; \/* 100% *\/\r\n color: #849B40; \/* default *\/\r\n transition: color .25s ease;\r\n letter-spacing: 0;\r\n vertical-align: middle;\r\n leading-trim: none;\r\n }\r\n\r\n \/* List *\/\r\n #edr-card-5 .edr5-list{\r\n margin: 0;\r\n padding-left: 18px;\r\n list-style: disc;\r\n }\r\n #edr-card-5 .edr5-list li{\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: 18px;\r\n line-height: 32px;\r\n letter-spacing: 0;\r\n color: #616161; \/* default *\/\r\n transition: color .25s ease;\r\n leading-trim: none;\r\n }\r\n\r\n \/* Hover colors \u2014 only on hover-capable devices *\/\r\n @media (any-hover: hover){\r\n #edr-card-5.edr5-card:hover .edr5-heading{ color:#FFFFFF; }\r\n #edr-card-5.edr5-card:hover .edr5-list li{ color:#FFFFFF; }\r\n #edr-card-5.edr5-card:hover .edr5-list li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* =============== Touch support (tap to \u201chover\u201d) =============== *\/\r\n \/* Make the card focusable so :focus-visible works on mobile *\/\r\n #edr-card-5.edr5-card:focus,\r\n #edr-card-5.edr5-card:focus-visible{ outline: none; }\r\n\r\n \/* On touch devices, show the bg + white text on tap\/focus *\/\r\n @media (any-hover: none){\r\n #edr-card-5.edr5-card:active::before,\r\n #edr-card-5.edr5-card:focus-within::before,\r\n #edr-card-5.edr5-card:focus::before{ opacity:1; }\r\n\r\n #edr-card-5.edr5-card:active .edr5-heading,\r\n #edr-card-5.edr5-card:focus-within .edr5-heading,\r\n #edr-card-5.edr5-card:focus .edr5-heading{ color:#FFFFFF; }\r\n\r\n #edr-card-5.edr5-card:active .edr5-list li,\r\n #edr-card-5.edr5-card:focus-within .edr5-list li,\r\n #edr-card-5.edr5-card:focus .edr5-list li{ color:#FFFFFF; }\r\n\r\n #edr-card-5.edr5-card:active .edr5-list li::marker,\r\n #edr-card-5.edr5-card:focus-within .edr5-list li::marker,\r\n #edr-card-5.edr5-card:focus .edr5-list li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* =============== Tablet adjustments (\u2264 1024px) =============== *\/\r\n @media (max-width: 1024px){\r\n #edr-card-5.edr5-card{\r\n height: auto; \/* let content define height *\/\r\n padding: 18px 20px;\r\n border-left-width: 6px;\r\n }\r\n #edr-card-5 .edr5-heading{ font-size: 22px; }\r\n #edr-card-5 .edr5-list li{\r\n font-size: 17px;\r\n line-height: 30px;\r\n }\r\n }\r\n\r\n \/* =============== Mobile (\u2264 768px) =============== *\/\r\n @media (max-width: 768px){\r\n #edr-card-5.edr5-card{\r\n height:auto;\r\n padding:16px 18px;\r\n border-left-width:6px;\r\n align-items:flex-start; \/* better for multi-line content *\/\r\n }\r\n #edr-card-5 .edr5-content{ gap:6px; }\r\n #edr-card-5 .edr5-heading{ font-size: 20px; }\r\n #edr-card-5 .edr5-list{ padding-left: 16px; }\r\n #edr-card-5 .edr5-list li{\r\n font-size: 16px;\r\n line-height: 28px;\r\n }\r\n }\r\n\r\n \/* =============== Small phones (\u2264 480px) =============== *\/\r\n @media (max-width: 480px){\r\n #edr-card-5.edr5-card{\r\n padding:14px 16px;\r\n border-left-width:4px;\r\n border-radius:10px;\r\n }\r\n #edr-card-5 .edr5-heading{ font-size: 18px; }\r\n #edr-card-5 .edr5-list li{\r\n font-size: 15px;\r\n line-height: 26px;\r\n }\r\n }\r\n\r\n \/* Motion safety *\/\r\n @media (prefers-reduced-motion: reduce){\r\n #edr-card-5.edr5-card::before{ transition:none; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div id=\"edr-card-5\" class=\"edr5-card\" role=\"group\" aria-label=\"Info card variant 5\" tabindex=\"0\">\r\n <div class=\"edr5-content\">\r\n <h3 class=\"edr5-heading\">Export-Ready Product Lines<\/h3>\r\n <ul class=\"edr5-list\">\r\n <li>Designed to meet international quality and compliance standards<\/li>\r\n <li>Perfect for premium exports and high-end domestic supply<\/li>\r\n <\/ul>\r\n <\/div>\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-39e086e e-con-full e-flex e-con e-child\" data-id=\"39e086e\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-84f2955 elementor-widget elementor-widget-html\" data-id=\"84f2955\" 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>Accent Card \u2014 Variant 6 (Responsive)<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@700&family=Space+Grotesk:wght@400&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n \/* =============== Base (desktop\/laptop) =============== *\/\r\n #edr-card-6.edr6-card{\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 216px;\r\n border-radius: 12px;\r\n border-left: 8px solid #849B40;\r\n background: #FFFFFF33;\r\n box-shadow: 0 8px 24px rgba(0,0,0,.12);\r\n display: flex;\r\n align-items: center;\r\n padding: 20px 24px;\r\n box-sizing: border-box;\r\n color: #0f172a;\r\n isolation: isolate;\r\n }\r\n\r\n \/* Hover bg image *\/\r\n #edr-card-6.edr6-card::before{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background: url(\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/07\/Background-3.png\") center \/ cover no-repeat;\r\n opacity: 0;\r\n transition: opacity .35s ease;\r\n z-index: 0;\r\n pointer-events:none;\r\n }\r\n \/* Only trigger on hover-capable devices *\/\r\n @media (any-hover: hover){\r\n #edr-card-6.edr6-card:hover::before{ opacity:1; }\r\n }\r\n\r\n \/* Content *\/\r\n #edr-card-6 .edr6-content{\r\n position: relative;\r\n z-index: 1;\r\n display:flex;\r\n flex-direction:column;\r\n gap: 8px;\r\n }\r\n\r\n \/* Heading *\/\r\n #edr-card-6 .edr6-heading{\r\n margin: 0;\r\n font-family: 'Host Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight: 700;\r\n font-size: 24px;\r\n line-height: 1;\r\n letter-spacing: 0;\r\n color: #849B40;\r\n transition: color .25s ease;\r\n leading-trim: none;\r\n }\r\n\r\n \/* List *\/\r\n #edr-card-6 .edr6-list{\r\n margin: 0;\r\n padding-left: 18px;\r\n list-style: disc;\r\n }\r\n #edr-card-6 .edr6-list li{\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: 18px;\r\n line-height: 32px;\r\n letter-spacing: 0;\r\n color: #616161;\r\n transition: color .25s ease;\r\n leading-trim: none;\r\n }\r\n\r\n \/* Hover colors on hover-capable devices *\/\r\n @media (any-hover: hover){\r\n #edr-card-6.edr6-card:hover .edr6-heading{ color:#FFFFFF; }\r\n #edr-card-6.edr6-card:hover .edr6-list li{ color:#FFFFFF; }\r\n #edr-card-6.edr6-card:hover .edr6-list li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* =============== Touch: tap-to-activate =============== *\/\r\n #edr-card-6.edr6-card:focus,\r\n #edr-card-6.edr6-card:focus-visible{ outline: none; }\r\n @media (any-hover: none){\r\n #edr-card-6.edr6-card:active::before,\r\n #edr-card-6.edr6-card:focus::before,\r\n #edr-card-6.edr6-card:focus-within::before{ opacity:1; }\r\n\r\n #edr-card-6.edr6-card:active .edr6-heading,\r\n #edr-card-6.edr6-card:focus .edr6-heading,\r\n #edr-card-6.edr6-card:focus-within .edr6-heading{ color:#FFFFFF; }\r\n\r\n #edr-card-6.edr6-card:active .edr6-list li,\r\n #edr-card-6.edr6-card:focus .edr6-list li,\r\n #edr-card-6.edr6-card:focus-within .edr6-list li{ color:#FFFFFF; }\r\n\r\n #edr-card-6.edr6-card:active .edr6-list li::marker,\r\n #edr-card-6.edr6-card:focus .edr6-list li::marker,\r\n #edr-card-6.edr6-card:focus-within .edr6-list li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* =============== Tablet (\u2264 1024px) =============== *\/\r\n @media (max-width: 1024px){\r\n #edr-card-6.edr6-card{\r\n height:auto; \/* let content flow *\/\r\n padding:18px 20px;\r\n border-left-width:6px;\r\n }\r\n #edr-card-6 .edr6-heading{ font-size:22px; }\r\n #edr-card-6 .edr6-list li{\r\n font-size:17px;\r\n line-height:30px;\r\n }\r\n }\r\n\r\n \/* =============== Mobile (\u2264 768px) =============== *\/\r\n @media (max-width: 768px){\r\n #edr-card-6.edr6-card{\r\n height:auto;\r\n padding:16px 18px;\r\n border-left-width:6px;\r\n align-items:flex-start;\r\n }\r\n #edr-card-6 .edr6-content{ gap:6px; }\r\n #edr-card-6 .edr6-heading{ font-size:20px; }\r\n #edr-card-6 .edr6-list{ padding-left:16px; }\r\n #edr-card-6 .edr6-list li{\r\n font-size:16px;\r\n line-height:28px;\r\n }\r\n }\r\n\r\n \/* =============== Small phones (\u2264 480px) =============== *\/\r\n @media (max-width: 480px){\r\n #edr-card-6.edr6-card{\r\n padding:14px 16px;\r\n border-left-width:4px;\r\n border-radius:10px;\r\n }\r\n #edr-card-6 .edr6-heading{ font-size:18px; }\r\n #edr-card-6 .edr6-list li{\r\n font-size:15px;\r\n line-height:26px;\r\n }\r\n }\r\n\r\n \/* Motion safety *\/\r\n @media (prefers-reduced-motion: reduce){\r\n #edr-card-6.edr6-card::before{ transition:none; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div id=\"edr-card-6\" class=\"edr6-card\" role=\"group\" aria-label=\"Info card variant 6\" tabindex=\"0\">\r\n <div class=\"edr6-content\">\r\n <h3 class=\"edr6-heading\">Home of Premium Brands<\/h3>\r\n <ul class=\"edr6-list\">\r\n <li>Dedicated to producing August Blanks and Flexo Packaging<\/li>\r\n <li>Supports branded and custom stationery for gifting & global markets<\/li>\r\n <\/ul>\r\n <\/div>\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-71098e5 e-con-full e-flex e-con e-child\" data-id=\"71098e5\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1d3b4bd elementor-widget elementor-widget-html\" data-id=\"1d3b4bd\" 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>Accent Card \u2014 Variant 7 (Responsive)<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@700&family=Space+Grotesk:wght@400&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n \/* =============== Base (desktop\/laptop unchanged) =============== *\/\r\n #edr-card-7.edr7-card{\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 216px;\r\n border-radius: 12px;\r\n border-left: 8px solid #849B40; \/* left accent *\/\r\n background: #FFFFFF33; \/* default bg *\/\r\n box-shadow: 0 8px 24px rgba(0,0,0,.12);\r\n display: flex;\r\n align-items: center;\r\n padding: 20px 24px;\r\n box-sizing: border-box;\r\n color: #0f172a;\r\n isolation: isolate;\r\n }\r\n\r\n \/* Hover background image *\/\r\n #edr-card-7.edr7-card::before{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background: url(\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/07\/Background-3.png\") center \/ cover no-repeat;\r\n opacity: 0;\r\n transition: opacity .35s ease;\r\n z-index: 0;\r\n pointer-events:none;\r\n }\r\n \/* Only trigger hover on hover-capable devices *\/\r\n @media (any-hover: hover){\r\n #edr-card-7.edr7-card:hover::before{ opacity: 1; }\r\n }\r\n\r\n \/* Content wrapper *\/\r\n #edr-card-7 .edr7-content{\r\n position: relative; \/* above ::before *\/\r\n z-index: 1;\r\n display:flex;\r\n flex-direction:column;\r\n gap: 8px;\r\n }\r\n\r\n \/* Heading *\/\r\n #edr-card-7 .edr7-heading{\r\n margin: 0;\r\n font-family: 'Host Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight: 700;\r\n font-size: 24px;\r\n line-height: 1; \/* 100% *\/\r\n letter-spacing: 0;\r\n color: #849B40; \/* default *\/\r\n transition: color .25s ease;\r\n leading-trim: none;\r\n vertical-align: middle;\r\n }\r\n\r\n \/* List + items *\/\r\n #edr-card-7 .edr7-list{\r\n margin: 0;\r\n padding-left: 18px;\r\n list-style: disc;\r\n }\r\n #edr-card-7 .edr7-list li{\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: 18px;\r\n line-height: 32px;\r\n letter-spacing: 0;\r\n color: #616161;\r\n transition: color .25s ease;\r\n leading-trim: none;\r\n }\r\n\r\n \/* Hover colors on hover-capable devices *\/\r\n @media (any-hover: hover){\r\n #edr-card-7.edr7-card:hover .edr7-heading{ color:#FFFFFF; }\r\n #edr-card-7.edr7-card:hover .edr7-list li{ color:#FFFFFF; }\r\n #edr-card-7.edr7-card:hover .edr7-list li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* =============== Touch: tap-to-activate (mobile\/tablet) =============== *\/\r\n #edr-card-7.edr7-card:focus,\r\n #edr-card-7.edr7-card:focus-visible{ outline: none; }\r\n @media (any-hover: none){\r\n #edr-card-7.edr7-card:active::before,\r\n #edr-card-7.edr7-card:focus::before,\r\n #edr-card-7.edr7-card:focus-within::before{ opacity:1; }\r\n\r\n #edr-card-7.edr7-card:active .edr7-heading,\r\n #edr-card-7.edr7-card:focus .edr7-heading,\r\n #edr-card-7.edr7-card:focus-within .edr7-heading{ color:#FFFFFF; }\r\n\r\n #edr-card-7.edr7-card:active .edr7-list li,\r\n #edr-card-7.edr7-card:focus .edr7-list li,\r\n #edr-card-7.edr7-card:focus-within .edr7-list li{ color:#FFFFFF; }\r\n\r\n #edr-card-7.edr7-card:active .edr7-list li::marker,\r\n #edr-card-7.edr7-card:focus .edr7-list li::marker,\r\n #edr-card-7.edr7-card:focus-within .edr7-list li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* =============== Tablet (\u2264 1024px) =============== *\/\r\n @media (max-width: 1024px){\r\n #edr-card-7.edr7-card{\r\n height:auto; \/* let content flow *\/\r\n padding:18px 20px;\r\n border-left-width:6px;\r\n }\r\n #edr-card-7 .edr7-heading{ font-size:22px; }\r\n #edr-card-7 .edr7-list li{\r\n font-size:17px;\r\n line-height:30px;\r\n }\r\n }\r\n\r\n \/* =============== Mobile (\u2264 768px) =============== *\/\r\n @media (max-width: 768px){\r\n #edr-card-7.edr7-card{\r\n height:auto;\r\n padding:16px 18px;\r\n border-left-width:6px;\r\n align-items:flex-start;\r\n }\r\n #edr-card-7 .edr7-content{ gap:6px; }\r\n #edr-card-7 .edr7-heading{ font-size:20px; }\r\n #edr-card-7 .edr7-list{ padding-left:16px; }\r\n #edr-card-7 .edr7-list li{\r\n font-size:16px;\r\n line-height:28px;\r\n }\r\n }\r\n\r\n \/* =============== Small phones (\u2264 480px) =============== *\/\r\n @media (max-width: 480px){\r\n #edr-card-7.edr7-card{\r\n padding:14px 16px;\r\n border-left-width:4px;\r\n border-radius:10px;\r\n }\r\n #edr-card-7 .edr7-heading{ font-size:18px; }\r\n #edr-card-7 .edr7-list li{\r\n font-size:15px;\r\n line-height:26px;\r\n }\r\n }\r\n\r\n \/* Motion safety *\/\r\n @media (prefers-reduced-motion: reduce){\r\n #edr-card-7.edr7-card::before{ transition:none; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div id=\"edr-card-7\" class=\"edr7-card\" role=\"group\" aria-label=\"Info card variant 7\" tabindex=\"0\">\r\n <div class=\"edr7-content\">\r\n <h3 class=\"edr7-heading\">Strategic Location<\/h3>\r\n <ul class=\"edr7-list\">\r\n <li>Proximity to Hyderabad International Airport<\/li>\r\n <li>Ensures 24\u201372 hour air cargo cycles for urgent dispatches<\/li>\r\n <\/ul>\r\n <\/div>\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-fdc196d e-con-full e-flex e-con e-child\" data-id=\"fdc196d\" data-element_type=\"container\">\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-d600bd9 e-con-full e-flex e-con e-child\" data-id=\"d600bd9\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-08f2ba4 e-con-full e-flex e-con e-child\" data-id=\"08f2ba4\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-20758ff e-con-full e-flex e-con e-child\" data-id=\"20758ff\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-f77a8fb e-con-full e-flex e-con e-child\" data-id=\"f77a8fb\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8dd24d6 elementor-widget elementor-widget-html\" data-id=\"8dd24d6\" 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>Styled Gradient Text<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@700&display=swap\" rel=\"stylesheet\" \/>\r\n\r\n <style>\r\n .gradient-text {\r\n font-family: \"Space Grotesk\";\r\n font-weight: 700; \/* Bold *\/\r\n font-style: normal;\r\n font-size: 32px;\r\n line-height: 51.33px;\r\n letter-spacing: 0;\r\n vertical-align: middle;\r\n\r\n \/* Gradient applied to text *\/\r\n background: linear-gradient(117.1deg, #001316 -16.52%, #04655C 52.84%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n text-fill-color: transparent;\r\n\r\n display: inline-block;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"gradient-text\">Connected for Speed <\/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-d4895ed e-con-full e-flex e-con e-child\" data-id=\"d4895ed\" data-element_type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6b04dd0 e-grid e-con-full e-con e-child\" data-id=\"6b04dd0\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-84b7614 e-con-full e-flex e-con e-child\" data-id=\"84b7614\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b195745 elementor-widget elementor-widget-html\" data-id=\"b195745\" 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>Accent Card \u2014 Variant 8 (Responsive)<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@700&family=Space+Grotesk:wght@400&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n \/* ===== Base (desktop\/laptop unchanged) ===== *\/\r\n #edr-card-8.edr8-card{\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 216px;\r\n border-radius: 12px;\r\n border-left: 8px solid #456F46; \/* left accent *\/\r\n background: #FFFFFF33; \/* default bg *\/\r\n box-shadow: 0 8px 24px rgba(0,0,0,.12);\r\n display: flex;\r\n align-items: center;\r\n padding: 20px 24px;\r\n box-sizing: border-box;\r\n color: #0f172a;\r\n isolation: isolate;\r\n }\r\n\r\n \/* Hover background image *\/\r\n #edr-card-8.edr8-card::before{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background: url(\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/07\/Background-3.png\") center \/ cover no-repeat;\r\n opacity: 0;\r\n transition: opacity .35s ease;\r\n z-index: 0;\r\n pointer-events:none;\r\n }\r\n \/* Only trigger on hover-capable devices *\/\r\n @media (any-hover: hover){\r\n #edr-card-8.edr8-card:hover::before{ opacity: 1; }\r\n }\r\n\r\n \/* Content wrapper *\/\r\n #edr-card-8 .edr8-content{\r\n position: relative; \/* above ::before *\/\r\n z-index: 1;\r\n display:flex;\r\n flex-direction:column;\r\n gap: 8px;\r\n }\r\n\r\n \/* Heading *\/\r\n #edr-card-8 .edr8-heading{\r\n margin: 0;\r\n font-family: 'Host Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight: 700;\r\n font-size: 24px;\r\n line-height: 1; \/* 100% *\/\r\n letter-spacing: 0;\r\n color: #456F46; \/* default *\/\r\n transition: color .25s ease;\r\n vertical-align: middle;\r\n leading-trim: none;\r\n }\r\n\r\n \/* List + items *\/\r\n #edr-card-8 .edr8-list{\r\n margin: 0;\r\n padding-left: 18px;\r\n list-style: disc;\r\n }\r\n #edr-card-8 .edr8-list li{\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: 18px;\r\n line-height: 32px;\r\n letter-spacing: 0;\r\n color: #616161;\r\n transition: color .25s ease;\r\n leading-trim: none;\r\n }\r\n\r\n \/* Hover colors on hover-capable devices *\/\r\n @media (any-hover: hover){\r\n #edr-card-8.edr8-card:hover .edr8-heading{ color:#FFFFFF; }\r\n #edr-card-8.edr8-card:hover .edr8-list li{ color:#FFFFFF; }\r\n #edr-card-8.edr8-card:hover .edr8-list li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* ===== Touch: tap-to-activate (mobile\/tablet) ===== *\/\r\n #edr-card-8.edr8-card:focus,\r\n #edr-card-8.edr8-card:focus-visible{ outline: none; }\r\n @media (any-hover: none){\r\n #edr-card-8.edr8-card:active::before,\r\n #edr-card-8.edr8-card:focus::before,\r\n #edr-card-8.edr8-card:focus-within::before{ opacity:1; }\r\n\r\n #edr-card-8.edr8-card:active .edr8-heading,\r\n #edr-card-8.edr8-card:focus .edr8-heading,\r\n #edr-card-8.edr8-card:focus-within .edr8-heading{ color:#FFFFFF; }\r\n\r\n #edr-card-8.edr8-card:active .edr8-list li,\r\n #edr-card-8.edr8-card:focus .edr8-list li,\r\n #edr-card-8.edr8-card:focus-within .edr8-list li{ color:#FFFFFF; }\r\n\r\n #edr-card-8.edr8-card:active .edr8-list li::marker,\r\n #edr-card-8.edr8-card:focus .edr8-list li::marker,\r\n #edr-card-8.edr8-card:focus-within .edr8-list li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* ===== Tablet (\u2264 1024px) ===== *\/\r\n @media (max-width: 1024px){\r\n #edr-card-8.edr8-card{\r\n height:auto; \/* let content flow *\/\r\n padding:18px 20px;\r\n border-left-width:6px;\r\n }\r\n #edr-card-8 .edr8-heading{ font-size:22px; }\r\n #edr-card-8 .edr8-list li{\r\n font-size:17px;\r\n line-height:30px;\r\n }\r\n }\r\n\r\n \/* ===== Mobile (\u2264 768px) ===== *\/\r\n @media (max-width: 768px){\r\n #edr-card-8.edr8-card{\r\n height:auto;\r\n padding:16px 18px;\r\n border-left-width:6px;\r\n align-items:flex-start; \/* better for multi-line *\/\r\n }\r\n #edr-card-8 .edr8-content{ gap:6px; }\r\n #edr-card-8 .edr8-heading{ font-size:20px; }\r\n #edr-card-8 .edr8-list{ padding-left:16px; }\r\n #edr-card-8 .edr8-list li{\r\n font-size:16px;\r\n line-height:28px;\r\n }\r\n }\r\n\r\n \/* ===== Small phones (\u2264 480px) ===== *\/\r\n @media (max-width: 480px){\r\n #edr-card-8.edr8-card{\r\n padding:14px 16px;\r\n border-left-width:4px;\r\n border-radius:10px;\r\n }\r\n #edr-card-8 .edr8-heading{ font-size:18px; }\r\n #edr-card-8 .edr8-list li{\r\n font-size:15px;\r\n line-height:26px;\r\n }\r\n }\r\n\r\n \/* Motion safety *\/\r\n @media (prefers-reduced-motion: reduce){\r\n #edr-card-8.edr8-card::before{ transition:none; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div id=\"edr-card-8\" class=\"edr8-card\" role=\"group\" aria-label=\"Info card variant 8\" tabindex=\"0\">\r\n <div class=\"edr8-content\">\r\n <h3 class=\"edr8-heading\">Multi-Modal Port Access<\/h3>\r\n <ul class=\"edr8-list\">\r\n <li>Krishnapatnam, Visakhapatnam, Chennai & upcoming Machilipatnam<\/li>\r\n <li>Seamless containerised logistics for exports<\/li>\r\n <\/ul>\r\n <\/div>\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-74b0e17 e-con-full e-flex e-con e-child\" data-id=\"74b0e17\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9a8d724 elementor-widget elementor-widget-html\" data-id=\"9a8d724\" 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>Accent Card \u2014 Variant 9 (Responsive)<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@700&family=Space+Grotesk:wght@400&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n \/* ===== Base (desktop\/laptop) ===== *\/\r\n #edr-card-9.edr9-card{\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 216px;\r\n border-radius: 12px;\r\n border-left: 8px solid #456F46; \/* left accent *\/\r\n background: #FFFFFF33; \/* default bg *\/\r\n box-shadow: 0 8px 24px rgba(0,0,0,.12);\r\n display: flex;\r\n align-items: center;\r\n padding: 20px 24px;\r\n box-sizing: border-box;\r\n color: #0f172a;\r\n isolation: isolate;\r\n }\r\n\r\n \/* Hover background *\/\r\n #edr-card-9.edr9-card::before{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background: url(\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/07\/Background-3.png\") center \/ cover no-repeat;\r\n opacity: 0;\r\n transition: opacity .35s ease;\r\n z-index: 0;\r\n pointer-events:none;\r\n }\r\n @media (any-hover: hover){\r\n #edr-card-9.edr9-card:hover::before{ opacity:1; }\r\n }\r\n\r\n \/* Content *\/\r\n #edr-card-9 .edr9-content{\r\n position: relative; \/* above ::before *\/\r\n z-index: 1;\r\n display:flex;\r\n flex-direction:column;\r\n gap: 8px;\r\n }\r\n\r\n \/* Heading *\/\r\n #edr-card-9 .edr9-heading{\r\n margin: 0;\r\n font-family: 'Host Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight: 700;\r\n font-size: 24px;\r\n line-height: 1; \/* 100% *\/\r\n letter-spacing: 0;\r\n color: #456F46;\r\n transition: color .25s ease;\r\n vertical-align: middle;\r\n leading-trim: none;\r\n }\r\n\r\n \/* List *\/\r\n #edr-card-9 .edr9-list{\r\n margin: 0;\r\n padding-left: 18px;\r\n list-style: disc;\r\n }\r\n #edr-card-9 .edr9-list li{\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: 18px;\r\n line-height: 32px;\r\n letter-spacing: 0;\r\n color: #616161;\r\n transition: color .25s ease;\r\n leading-trim: none;\r\n }\r\n\r\n \/* Hover colors (hover-capable only) *\/\r\n @media (any-hover: hover){\r\n #edr-card-9.edr9-card:hover .edr9-heading{ color:#FFFFFF; }\r\n #edr-card-9.edr9-card:hover .edr9-list li{ color:#FFFFFF; }\r\n #edr-card-9.edr9-card:hover .edr9-list li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* ===== Touch: tap-to-activate ===== *\/\r\n #edr-card-9.edr9-card:focus,\r\n #edr-card-9.edr9-card:focus-visible{ outline: none; }\r\n @media (any-hover: none){\r\n #edr-card-9.edr9-card:active::before,\r\n #edr-card-9.edr9-card:focus::before,\r\n #edr-card-9.edr9-card:focus-within::before{ opacity:1; }\r\n\r\n #edr-card-9.edr9-card:active .edr9-heading,\r\n #edr-card-9.edr9-card:focus .edr9-heading,\r\n #edr-card-9.edr9-card:focus-within .edr9-heading{ color:#FFFFFF; }\r\n\r\n #edr-card-9.edr9-card:active .edr9-list li,\r\n #edr-card-9.edr9-card:focus .edr9-list li,\r\n #edr-card-9.edr9-card:focus-within .edr9-list li{ color:#FFFFFF; }\r\n\r\n #edr-card-9.edr9-card:active .edr9-list li::marker,\r\n #edr-card-9.edr9-card:focus .edr9-list li::marker,\r\n #edr-card-9.edr9-card:focus-within .edr9-list li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* ===== Tablet (\u2264 1024px) ===== *\/\r\n @media (max-width: 1024px){\r\n #edr-card-9.edr9-card{\r\n height:auto; \/* let content flow *\/\r\n padding:18px 20px;\r\n border-left-width:6px;\r\n }\r\n #edr-card-9 .edr9-heading{ font-size:22px; }\r\n #edr-card-9 .edr9-list li{\r\n font-size:17px;\r\n line-height:30px;\r\n }\r\n }\r\n\r\n \/* ===== Mobile (\u2264 768px) ===== *\/\r\n @media (max-width: 768px){\r\n #edr-card-9.edr9-card{\r\n height:auto;\r\n padding:16px 18px;\r\n border-left-width:6px;\r\n align-items:flex-start; \/* better for multi-line *\/\r\n }\r\n #edr-card-9 .edr9-content{ gap:6px; }\r\n #edr-card-9 .edr9-heading{ font-size:20px; }\r\n #edr-card-9 .edr9-list{ padding-left:16px; }\r\n #edr-card-9 .edr9-list li{\r\n font-size:16px;\r\n line-height:28px;\r\n }\r\n }\r\n\r\n \/* ===== Small phones (\u2264 480px) ===== *\/\r\n @media (max-width: 480px){\r\n #edr-card-9.edr9-card{\r\n padding:14px 16px;\r\n border-left-width:4px;\r\n border-radius:10px;\r\n }\r\n #edr-card-9 .edr9-heading{ font-size:18px; }\r\n #edr-card-9 .edr9-list li{\r\n font-size:15px;\r\n line-height:26px;\r\n }\r\n }\r\n\r\n \/* Motion safety *\/\r\n @media (prefers-reduced-motion: reduce){\r\n #edr-card-9.edr9-card::before{ transition:none; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div id=\"edr-card-9\" class=\"edr9-card\" role=\"group\" aria-label=\"Info card variant 9\" tabindex=\"0\">\r\n <div class=\"edr9-content\">\r\n <h3 class=\"edr9-heading\">Smart Warehousing Hubs<\/h3>\r\n <ul class=\"edr9-list\">\r\n <li>Vijayawada & Hyderabad staging points<\/li>\r\n <li>Phase-wise dispatch & intelligent load management<\/li>\r\n <\/ul>\r\n <\/div>\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\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-bb9df9d e-con-full e-flex e-con e-child\" data-id=\"bb9df9d\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-85f8a83 elementor-widget elementor-widget-spacer\" data-id=\"85f8a83\" 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 class=\"elementor-element elementor-element-9599095 elementor-widget__width-inherit animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"9599095\" data-element_type=\"widget\" data-settings=\"{"_animation":"zoomIn"}\" 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>Verdant \u2014 Quote (Exact Styles)<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;700&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n :root{\r\n --lead: #456F46; \/* requested color for both parts *\/\r\n }\r\n\r\n .quote-card{\r\n position: relative;\r\n margin: 0;\r\n padding: 72px 72px 72px 72px; \/* adjust if needed *\/\r\n background: transparent;\r\n max-width: 1512px; \/* adjust\/remove if you want it full-width *\/\r\n color: var(--lead);\r\n font-family: \"Space Grotesk\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n text-align: center;\r\n }\r\n\r\n .quote-card blockquote{ margin: 0; }\r\n\r\n \/* FIRST PART \u2014 Regular 400 *\/\r\n .lead{\r\n font-family: \"Space Grotesk\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight: 400; \/* Regular *\/\r\n font-size: 36.8px; \/* exact *\/\r\n line-height: 70.5px; \/* exact *\/\r\n letter-spacing: 0; \/* 0% *\/\r\n color: var(--lead); \/* #456F46 *\/\r\n display: inline-block;\r\n vertical-align: baseline;\r\n }\r\n\r\n \/* TRAILING PART \u2014 Bold 700 *\/\r\n .trail{\r\n font-family: \"Space Grotesk\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight: 700; \/* Bold *\/\r\n font-size: 36.8px; \/* exact *\/\r\n line-height: 70.5px; \/* exact *\/\r\n letter-spacing: 0; \/* 0% *\/\r\n color: var(--lead); \/* #456F46 *\/\r\n display: inline-block;\r\n vertical-align: baseline;\r\n }\r\n\r\n \/* Quote mark images you provided *\/\r\n .qimg-top, .qimg-bottom{\r\n position: absolute;\r\n width: 64px; height: auto; \/* tweak as needed *\/\r\n pointer-events: none; user-select: none;\r\n }\r\n .qimg-top { top: 0; left: 0; transform: translate(-12%, -12%); }\r\n .qimg-bottom{ bottom: 0; right: 0; transform: translate(12%, 12%); }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <figure class=\"quote-card\" role=\"group\" aria-label=\"Verdant statement\">\r\n \r\n <img decoding=\"async\" class=\"qimg-top\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/unnamed-file.png\"\r\n alt=\"\" loading=\"lazy\" draggable=\"false\" \/>\r\n \r\n <img decoding=\"async\" class=\"qimg-bottom\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/1.png\"\r\n alt=\"\" loading=\"lazy\" draggable=\"false\" \/>\r\n\r\n <blackquote>\r\n <span class=\"lead\">Verdant\u2019s infrastructure is not just built for today \u2014 <\/span>\r\n <span class=\"trail\"> it\u2019s engineered for the future, <\/span>\r\n <span class=\"lead\">aligning with its growth ambitions.<\/span>\r\n <\/blackquote>\r\n <\/figure>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2050a06 elementor-widget elementor-widget-spacer\" data-id=\"2050a06\" 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<div class=\"elementor-element elementor-element-6ff49fb e-con-full e-flex e-con e-child\" data-id=\"6ff49fb\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-bc9ee9e e-con-full animated-slow e-flex elementor-invisible e-con e-child\" data-id=\"bc9ee9e\" data-element_type=\"container\" id=\"integrated_sticky\" data-settings=\"{"animation":"fadeInLeft"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-67baad6 elementor-widget elementor-widget-html\" data-id=\"67baad6\" 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>Business Operations<\/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\r\n .bo-title{\r\n font-family: 'Host Grotesk';\r\n font-weight: 700; \/* Bold *\/\r\n font-size: 48px;\r\n line-height: 58px; \/* exact *\/\r\n letter-spacing: 0.01em; \/* \u2248 1% *\/\r\n color: #001316;\r\n margin: 0;\r\n text-align: left;\r\n vertical-align: middle; \/* included per spec *\/\r\n }\r\n\r\n @media (max-width: 640px){\r\n .bo-title{ font-size: 36px; line-height: 46px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n <h1 class=\"bo-title\">Business Operations<\/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-a771bef elementor-widget elementor-widget-heading\" data-id=\"a771bef\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Efficiency That Delivers. <br>Capacity That Scales.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c28e960 e-con-full e-flex e-con e-child\" data-id=\"c28e960\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6f4b761 animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"6f4b761\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInRight","_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>Installed Capacity \u2014 Ultra-Smooth Hover (Responsive)<\/title>\r\n\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@400;700&display=swap\" rel=\"stylesheet\"\/>\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 :root{\r\n --green-soft:#6f8a6f;\r\n --grey:#8d8d8d;\r\n --t: 640ms;\r\n --ease: cubic-bezier(.16,1,.3,1);\r\n --imgH: 340px; \/* desktop default *\/\r\n }\r\n *{ box-sizing:border-box; }\r\n\r\n .capacity-bar{\r\n width:100%;\r\n background:#ffffff00;\r\n border-top: 1px solid #E0E0E0;\r\n }\r\n\r\n .capacity-stat{\r\n position:relative;\r\n isolation:isolate;\r\n overflow:hidden;\r\n padding: 22px 2vw;\r\n margin: 0 auto;\r\n max-width: 1200px;\r\n transition: min-height var(--t) var(--ease), padding var(--t) var(--ease);\r\n will-change: min-height;\r\n }\r\n .capacity-stat:hover{ min-height: var(--imgH); }\r\n\r\n .cap-content{\r\n display:grid;\r\n grid-template-columns:auto 1fr auto;\r\n grid-template-areas: \"label value units\";\r\n align-items:center;\r\n gap: clamp(16px, 6vw, 140px);\r\n position:relative;\r\n z-index:1;\r\n transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), filter var(--t) var(--ease);\r\n will-change: opacity, transform, filter;\r\n }\r\n\r\n .capacity-label{\r\n grid-area: label;\r\n color: var(--green-soft);\r\n font-weight:700;\r\n font-size: clamp(16px, 1.6vw, 22px);\r\n letter-spacing:.2px;\r\n white-space:nowrap;\r\n font-family: Host Grotesk, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n }\r\n\r\n .capacity-value{\r\n grid-area: value;\r\n justify-self: right;\r\n font-weight:700;\r\n font-size: 52px; \/* overridden responsively below *\/\r\n line-height:1;\r\n white-space:nowrap;\r\n background: linear-gradient(117.1deg, #001316 -16.52%, #04655C 52.84%);\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n color: transparent;\r\n font-family: Space Grotesk, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n }\r\n\r\n .capacity-units{\r\n grid-area: units;\r\n text-align:right;\r\n color: var(--grey);\r\n font-weight:700;\r\n font-size: clamp(16px, 1.6vw, 22px);\r\n line-height:1.25;\r\n white-space:nowrap;\r\n font-family: Host Grotesk, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n }\r\n\r\n .cap-image{\r\n position:absolute;\r\n top:0; left:0; right:0;\r\n width:100%;\r\n height: var(--imgH);\r\n object-fit:cover;\r\n object-position:center;\r\n opacity:0;\r\n transform: translateY(-110%);\r\n transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), filter var(--t) var(--ease);\r\n will-change: opacity, transform, filter;\r\n z-index:2;\r\n pointer-events:none;\r\n backface-visibility:hidden;\r\n }\r\n\r\n .capacity-stat:hover .cap-image{\r\n opacity:1;\r\n transform: translateY(0);\r\n filter: saturate(1.03) contrast(1.01);\r\n transition-delay: 40ms;\r\n }\r\n .capacity-stat:hover .cap-content{\r\n opacity:0;\r\n transform: translateY(6px);\r\n filter: blur(.25px);\r\n transition-delay: 60ms;\r\n }\r\n\r\n \/* Touch support (already present; kept intact) *\/\r\n @media (hover:none){\r\n .capacity-stat:active{ min-height: var(--imgH); }\r\n .capacity-stat:active .cap-image{ opacity:1; transform:translateY(0); filter:saturate(1.03) contrast(1.01); }\r\n .capacity-stat:active .cap-content{ opacity:0; transform:translateY(6px); filter:blur(.25px); }\r\n }\r\n\r\n \/* ====== Tablet (\u2264 1024px) ====== *\/\r\n @media (max-width:1024px){\r\n :root{ --imgH: 300px; }\r\n .capacity-stat{ padding: 20px 3vw; }\r\n .capacity-value{ font-size: clamp(40px, 6.5vw, 48px); }\r\n .cap-content{ gap: clamp(16px, 5vw, 72px); }\r\n }\r\n\r\n \/* ====== Mobile (\u2264 768px) ====== *\/\r\n @media (max-width:768px){\r\n :root{ --imgH: 240px; }\r\n .capacity-stat{ padding: 18px 4vw; }\r\n .cap-content{\r\n grid-template-columns: 1fr 1fr;\r\n grid-template-areas:\r\n \"label label\"\r\n \"value units\";\r\n gap: 12px 16px;\r\n }\r\n .capacity-label{ font-size: clamp(14px, 3.8vw, 18px); }\r\n .capacity-value{\r\n justify-self: start;\r\n font-size: clamp(32px, 9vw, 44px);\r\n }\r\n .capacity-units{\r\n justify-self: end;\r\n text-align:right;\r\n font-size: clamp(14px, 3.8vw, 18px);\r\n line-height: 1.15;\r\n }\r\n }\r\n\r\n \/* ====== Small phones (\u2264 480px) ====== *\/\r\n @media (max-width:480px){\r\n :root{ --imgH: 200px; }\r\n .capacity-stat{ padding: 16px 16px; }\r\n .cap-content{\r\n grid-template-columns: 1fr;\r\n grid-template-areas:\r\n \"label\"\r\n \"value\"\r\n \"units\";\r\n gap: 6px;\r\n }\r\n .capacity-value{\r\n justify-self: start;\r\n font-size: clamp(28px, 10.5vw, 36px);\r\n }\r\n .capacity-units{\r\n justify-self: start;\r\n text-align:left;\r\n line-height:1.1;\r\n }\r\n }\r\n\r\n \/* Reduced motion *\/\r\n @media (prefers-reduced-motion: reduce){\r\n .capacity-stat, .cap-content, .cap-image{ transition:none !important; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"capacity-bar\">\r\n <div class=\"capacity-stat\" role=\"group\" aria-label=\"Installed Capacity\">\r\n <div class=\"cap-content\">\r\n <div class=\"capacity-label\">Installed Capacity<\/div>\r\n <div class=\"capacity-value\">150 lakh<\/div>\r\n <div class=\"capacity-units\">notebooks<br>\/month<\/div>\r\n <\/div>\r\n\r\n <picture>\r\n \r\n <source\r\n media=\"(max-width:768px)\"\r\n srcset=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Operations.png\" \/>\r\n \r\n \r\n <img class=\"cap-image\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Property-11-4.png\"\r\n alt=\"\"\r\n loading=\"lazy\"\r\n decoding=\"async\" \/>\r\n <\/picture>\r\n <\/div>\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-5a706be animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"5a706be\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInRight","_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>Installed Capacity \u2014 Ultra-Smooth Hover (Responsive)<\/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 <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;500;700&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n :root{\r\n --green-soft:#6f8a6f;\r\n --grey:#8d8d8d;\r\n --t: 640ms;\r\n --ease: cubic-bezier(.16,1,.3,1);\r\n --imgH: 340px; \/* desktop *\/\r\n }\r\n *{ box-sizing:border-box; }\r\n\r\n \/* Top border *\/\r\n .capacity-bar{\r\n width:100%;\r\n background:#0000;\r\n border-top: 1px solid #E0E0E0;\r\n }\r\n\r\n .capacity-stat{\r\n position:relative;\r\n isolation:isolate;\r\n overflow:hidden;\r\n padding: 22px 2vw;\r\n margin: 0 auto;\r\n max-width: 1200px;\r\n transition: min-height var(--t) var(--ease), padding var(--t) var(--ease);\r\n will-change: min-height;\r\n }\r\n .capacity-stat:hover{ min-height: var(--imgH); }\r\n\r\n \/* Content *\/\r\n .cap-content{\r\n display:grid;\r\n grid-template-columns:auto 1fr auto;\r\n grid-template-areas: \"label value units\";\r\n align-items:center;\r\n gap: clamp(16px, 6vw, 140px);\r\n position:relative;\r\n z-index:1;\r\n transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), filter var(--t) var(--ease);\r\n will-change: opacity, transform, filter;\r\n }\r\n\r\n .capacity-label{\r\n grid-area: label;\r\n color: var(--green-soft);\r\n font-weight:700;\r\n font-size: clamp(16px, 1.6vw, 22px);\r\n letter-spacing:.2px;\r\n white-space:nowrap;\r\n font-family: Host Grotesk, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n }\r\n\r\n .capacity-value{\r\n grid-area: value;\r\n justify-self:right;\r\n font-weight:700;\r\n font-size: 52px; \/* responsive overrides below *\/\r\n line-height:1;\r\n white-space:nowrap;\r\n background: linear-gradient(117.1deg, #001316 -16.52%, #04655C 52.84%);\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n color: transparent; \/* Firefox *\/\r\n font-family: Space Grotesk, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n }\r\n\r\n .capacity-units{\r\n grid-area: units;\r\n text-align:right;\r\n color: var(--grey);\r\n font-weight:700;\r\n font-size: clamp(16px, 1.6vw, 22px);\r\n line-height:1.25;\r\n white-space:nowrap;\r\n font-family: Host Grotesk, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n }\r\n\r\n \/* Hover image *\/\r\n .cap-image{\r\n position:absolute;\r\n top:0; left:0; right:0;\r\n width:100%;\r\n height: var(--imgH);\r\n object-fit:cover;\r\n object-position:center;\r\n opacity:0;\r\n transform: translateY(-110%);\r\n transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), filter var(--t) var(--ease);\r\n will-change: opacity, transform, filter;\r\n z-index:2;\r\n pointer-events:none;\r\n backface-visibility:hidden;\r\n }\r\n\r\n .capacity-stat:hover .cap-image{\r\n opacity:1;\r\n transform: translateY(0);\r\n filter: saturate(1.03) contrast(1.01);\r\n transition-delay: 40ms;\r\n }\r\n .capacity-stat:hover .cap-content{\r\n opacity:0;\r\n transform: translateY(6px);\r\n filter: blur(.25px);\r\n transition-delay: 60ms;\r\n }\r\n\r\n \/* Touch support (tap to preview) *\/\r\n @media (hover:none){\r\n .capacity-stat:active{ min-height: var(--imgH); }\r\n .capacity-stat:active .cap-image{ opacity:1; transform:translateY(0); filter:saturate(1.03) contrast(1.01); }\r\n .capacity-stat:active .cap-content{ opacity:0; transform:translateY(6px); filter:blur(.25px); }\r\n }\r\n\r\n \/* ===== Tablet (\u2264 1024px) ===== *\/\r\n @media (max-width:1024px){\r\n :root{ --imgH: 300px; }\r\n .capacity-stat{ padding: 20px 3vw; }\r\n .cap-content{ gap: clamp(16px, 5vw, 72px); }\r\n .capacity-value{ font-size: clamp(40px, 6.5vw, 48px); }\r\n }\r\n\r\n \/* ===== Mobile (\u2264 768px) ===== *\/\r\n @media (max-width:768px){\r\n :root{ --imgH: 240px; }\r\n .capacity-stat{ padding: 18px 4vw; }\r\n .cap-content{\r\n grid-template-columns: 1fr 1fr;\r\n grid-template-areas:\r\n \"label label\"\r\n \"value units\";\r\n gap: 12px 16px;\r\n }\r\n .capacity-label{ font-size: clamp(14px, 3.8vw, 18px); }\r\n .capacity-value{\r\n justify-self: start;\r\n font-size: clamp(32px, 9vw, 44px);\r\n }\r\n .capacity-units{\r\n justify-self: end;\r\n text-align:right;\r\n font-size: clamp(14px, 3.8vw, 18px);\r\n line-height:1.15;\r\n }\r\n }\r\n\r\n \/* ===== Small phones (\u2264 480px) ===== *\/\r\n @media (max-width:480px){\r\n :root{ --imgH: 200px; }\r\n .capacity-stat{ padding: 16px 16px; }\r\n .cap-content{\r\n grid-template-columns: 1fr;\r\n grid-template-areas:\r\n \"label\"\r\n \"value\"\r\n \"units\";\r\n gap: 6px;\r\n }\r\n .capacity-value{\r\n justify-self: start;\r\n font-size: clamp(28px, 10.5vw, 36px);\r\n }\r\n .capacity-units{\r\n justify-self: start;\r\n text-align:left;\r\n line-height:1.1;\r\n }\r\n }\r\n\r\n \/* Reduced motion *\/\r\n @media (prefers-reduced-motion: reduce){\r\n .capacity-stat, .cap-content, .cap-image{ transition:none !important; }\r\n }\r\n @media (max-width:768px){\r\n .capacity-units br{ display:none; }\r\n .capacity-units{ white-space:nowrap; }\r\n}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"capacity-bar\">\r\n <div class=\"capacity-stat\" role=\"group\" aria-label=\"Installed Capacity\">\r\n <div class=\"cap-content\">\r\n <div class=\"capacity-label\">Annual Capacity<\/div>\r\n <div class=\"capacity-value\">1,800 lakh<\/div>\r\n <div class=\"capacity-units\">notebooks<br>\/year<\/div>\r\n <\/div>\r\n\r\n <picture>\r\n \r\n <source\r\n media=\"(max-width:768px)\"\r\n srcset=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Operations-1.png\" \/>\r\n \r\n <img class=\"cap-image\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Property-1Variant3-1.png\"\r\n alt=\"\"\r\n loading=\"lazy\"\r\n decoding=\"async\" \/>\r\n <\/picture>\r\n <\/div>\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-8028276 animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"8028276\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInRight","_animation_delay":300}\" 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>Installed Capacity \u2014 Ultra-Smooth Hover (Responsive)<\/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 <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;500;700&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n :root{\r\n --green-soft:#6f8a6f;\r\n --grey:#8d8d8d;\r\n --t: 640ms; \/* duration *\/\r\n --ease: cubic-bezier(.16,1,.3,1);\r\n --imgH: 340px; \/* desktop hover image height *\/\r\n }\r\n *{ box-sizing:border-box; }\r\n\r\n \/* Top border *\/\r\n .capacity-bar{\r\n width:100%;\r\n background:#0000;\r\n border-top: 1px solid #E0E0E0;\r\n }\r\n\r\n .capacity-stat{\r\n position:relative;\r\n isolation:isolate;\r\n overflow:hidden;\r\n padding: 22px 2vw;\r\n margin: 0 auto;\r\n max-width: 1200px;\r\n transition: min-height var(--t) var(--ease), padding var(--t) var(--ease);\r\n will-change: min-height;\r\n }\r\n .capacity-stat:hover{ min-height: var(--imgH); }\r\n\r\n \/* Content *\/\r\n .cap-content{\r\n display:grid;\r\n grid-template-columns:auto 1fr auto;\r\n grid-template-areas: \"label value units\";\r\n align-items:center;\r\n gap: clamp(16px, 6vw, 140px);\r\n position:relative;\r\n z-index:1;\r\n transition:\r\n opacity var(--t) var(--ease),\r\n transform var(--t) var(--ease),\r\n filter var(--t) var(--ease);\r\n will-change: opacity, transform, filter;\r\n }\r\n\r\n .capacity-label{\r\n grid-area: label;\r\n color: var(--green-soft);\r\n font-weight:700;\r\n font-size: clamp(16px, 1.6vw, 22px);\r\n letter-spacing:.2px;\r\n white-space:nowrap;\r\n font-family: Host Grotesk, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n }\r\n\r\n \/* Gradient number *\/\r\n .capacity-value{\r\n grid-area: value;\r\n justify-self:right;\r\n font-weight:700;\r\n font-size: 52px; \/* responsive overrides below *\/\r\n line-height:1;\r\n white-space:nowrap;\r\n background: linear-gradient(117.1deg, #001316 -16.52%, #04655C 52.84%);\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n color: transparent; \/* Firefox *\/\r\n font-family: Space Grotesk, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n }\r\n\r\n .capacity-units{\r\n grid-area: units;\r\n text-align:right;\r\n color: var(--grey);\r\n font-weight:700;\r\n font-size: clamp(16px, 1.6vw, 22px);\r\n line-height:1.25;\r\n white-space:nowrap;\r\n font-family: Host Grotesk, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n }\r\n\r\n \/* Hover image *\/\r\n .cap-image{\r\n position:absolute;\r\n top:0; left:0; right:0;\r\n width:100%;\r\n height: var(--imgH);\r\n object-fit:cover;\r\n object-position:center;\r\n opacity:0;\r\n transform: translateY(-110%);\r\n transition:\r\n opacity var(--t) var(--ease),\r\n transform var(--t) var(--ease),\r\n filter var(--t) var(--ease);\r\n will-change: opacity, transform, filter;\r\n z-index:2;\r\n pointer-events:none;\r\n backface-visibility:hidden;\r\n }\r\n\r\n .capacity-stat:hover .cap-image{\r\n opacity:1;\r\n transform: translateY(0);\r\n filter: saturate(1.03) contrast(1.01);\r\n transition-delay: 40ms;\r\n }\r\n .capacity-stat:hover .cap-content{\r\n opacity:0;\r\n transform: translateY(6px);\r\n filter: blur(.25px);\r\n transition-delay: 60ms;\r\n }\r\n\r\n \/* Touch support (tap preview) *\/\r\n @media (hover:none){\r\n .capacity-stat:active{ min-height: var(--imgH); }\r\n .capacity-stat:active .cap-image{ opacity:1; transform:translateY(0); filter:saturate(1.03) contrast(1.01); }\r\n .capacity-stat:active .cap-content{ opacity:0; transform:translateY(6px); filter:blur(.25px); }\r\n }\r\n\r\n \/* ===== Tablet (\u2264 1024px) ===== *\/\r\n @media (max-width:1024px){\r\n :root{ --imgH: 300px; }\r\n .capacity-stat{ padding: 20px 3vw; }\r\n .cap-content{ gap: clamp(16px, 5vw, 72px); }\r\n .capacity-value{ font-size: clamp(40px, 6.5vw, 48px); }\r\n }\r\n\r\n \/* ===== Mobile (\u2264 768px) ===== *\/\r\n @media (max-width:768px){\r\n :root{ --imgH: 240px; }\r\n .capacity-stat{ padding: 18px 4vw; }\r\n .cap-content{\r\n grid-template-columns: 1fr 1fr;\r\n grid-template-areas:\r\n \"label label\"\r\n \"value units\";\r\n gap: 12px 16px;\r\n }\r\n .capacity-label{ font-size: clamp(14px, 3.8vw, 18px); }\r\n .capacity-value{\r\n justify-self: start;\r\n font-size: clamp(32px, 9vw, 44px);\r\n }\r\n .capacity-units{\r\n justify-self: end;\r\n text-align:right;\r\n font-size: clamp(14px, 3.8vw, 18px);\r\n line-height:1.15;\r\n }\r\n }\r\n\r\n \/* ===== Small phones (\u2264 480px) ===== *\/\r\n @media (max-width:480px){\r\n :root{ --imgH: 200px; }\r\n .capacity-stat{ padding: 16px 16px; }\r\n .cap-content{\r\n grid-template-columns: 1fr;\r\n grid-template-areas:\r\n \"label\"\r\n \"value\"\r\n \"units\";\r\n gap: 6px;\r\n }\r\n .capacity-value{\r\n justify-self: start;\r\n font-size: clamp(28px, 10.5vw, 36px);\r\n }\r\n .capacity-units{\r\n justify-self: start;\r\n text-align:left;\r\n line-height:1.1;\r\n }\r\n }\r\n\r\n \/* Reduced motion *\/\r\n @media (prefers-reduced-motion: reduce){\r\n .capacity-stat, .cap-content, .cap-image{ transition:none !important; }\r\n }\r\n @media (max-width:768px){\r\n .capacity-units br{ display:none; }\r\n .capacity-units{ white-space:nowrap; }\r\n}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"capacity-bar\">\r\n <div class=\"capacity-stat\" role=\"group\" aria-label=\"Installed Capacity\">\r\n <div class=\"cap-content\">\r\n <div class=\"capacity-label\">Peak Scalability<\/div>\r\n <div class=\"capacity-value\">125 lakh<\/div>\r\n <div class=\"capacity-units\">notebooks<br>\/month<\/div>\r\n <\/div>\r\n\r\n <picture>\r\n \r\n <source\r\n media=\"(max-width:768px)\"\r\n srcset=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Operations-2.png\" \/>\r\n \r\n \r\n <img class=\"cap-image\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Property-1Variant5-1.png\"\r\n alt=\"\"\r\n loading=\"lazy\"\r\n decoding=\"async\" \/>\r\n <\/picture>\r\n <\/div>\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-cceafa2 animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"cceafa2\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInRight","_animation_delay":500}\" 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>Installed Capacity \u2014 Ultra-Smooth Hover (Responsive)<\/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 <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;500;700&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n :root{\r\n --green-soft:#6f8a6f;\r\n --grey:#8d8d8d;\r\n --t: 640ms; \/* duration *\/\r\n --ease: cubic-bezier(.16,1,.3,1); \/* smooth ease-out *\/\r\n --imgH: 340px; \/* desktop hover image height *\/\r\n }\r\n *{ box-sizing:border-box; }\r\n\r\n \/* Top border exactly as requested *\/\r\n .capacity-bar{\r\n width:100%;\r\n background:#ffffff00;\r\n border-top: 1px solid #E0E0E0;\r\n }\r\n\r\n .capacity-stat{\r\n position:relative;\r\n isolation:isolate;\r\n overflow:hidden; \/* clip the sliding image *\/\r\n padding: 22px 2vw;\r\n margin: 0 auto;\r\n max-width: 1200px;\r\n transition: min-height var(--t) var(--ease), padding var(--t) var(--ease);\r\n will-change: min-height;\r\n }\r\n \/* Grow the block to reveal the image smoothly *\/\r\n .capacity-stat:hover{ min-height: var(--imgH); }\r\n\r\n \/* Text\/content *\/\r\n .cap-content{\r\n display:grid;\r\n grid-template-columns:auto 1fr auto;\r\n grid-template-areas: \"label value units\";\r\n align-items:center;\r\n gap: clamp(16px, 6vw, 140px);\r\n position:relative;\r\n z-index:1;\r\n transition:\r\n opacity var(--t) var(--ease),\r\n transform var(--t) var(--ease),\r\n filter var(--t) var(--ease);\r\n will-change: opacity, transform, filter;\r\n }\r\n\r\n .capacity-label{\r\n grid-area: label;\r\n color: var(--green-soft);\r\n font-weight:700;\r\n font-size: clamp(16px, 1.6vw, 22px);\r\n letter-spacing:.2px;\r\n white-space:nowrap;\r\n font-family: Host Grotesk, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n }\r\n\r\n \/* Gradient number *\/\r\n .capacity-value{\r\n grid-area: value;\r\n justify-self:right;\r\n font-weight:700;\r\n font-size: 52px; \/* responsive overrides below *\/\r\n line-height:1;\r\n white-space:nowrap;\r\n background: linear-gradient(117.1deg, #001316 -16.52%, #04655C 52.84%);\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n color: transparent; \/* Firefox *\/\r\n font-family: Space Grotesk, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n }\r\n\r\n .capacity-units{\r\n grid-area: units;\r\n text-align:right;\r\n color: var(--grey);\r\n font-weight:700;\r\n font-size: clamp(16px, 1.6vw, 22px);\r\n line-height:1.25;\r\n white-space:nowrap;\r\n font-family: Host Grotesk, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n }\r\n\r\n \/* Hover image: slides down from the top, buttery fade *\/\r\n .cap-image{\r\n position:absolute;\r\n top:0; left:0; right:0;\r\n width:100%;\r\n height: var(--imgH); \/* only the image is fixed height *\/\r\n object-fit:cover;\r\n object-position:center;\r\n opacity:0;\r\n transform: translateY(-110%); \/* start well above for smoothness *\/\r\n transition:\r\n opacity var(--t) var(--ease),\r\n transform var(--t) var(--ease),\r\n filter var(--t) var(--ease);\r\n will-change: opacity, transform, filter;\r\n z-index:2;\r\n pointer-events:none;\r\n backface-visibility:hidden;\r\n }\r\n\r\n \/* Smooth swap on hover (with tiny delays to avoid flicker) *\/\r\n .capacity-stat:hover .cap-image{\r\n opacity:1;\r\n transform: translateY(0);\r\n filter: saturate(1.03) contrast(1.01);\r\n transition-delay: 40ms; \/* image starts just before text fades *\/\r\n }\r\n .capacity-stat:hover .cap-content{\r\n opacity:0;\r\n transform: translateY(6px);\r\n filter: blur(.25px);\r\n transition-delay: 60ms;\r\n }\r\n\r\n \/* Touch support *\/\r\n @media (hover:none){\r\n .capacity-stat:active{ min-height: var(--imgH); }\r\n .capacity-stat:active .cap-image{\r\n opacity:1; transform:translateY(0); filter:saturate(1.03) contrast(1.01);\r\n }\r\n .capacity-stat:active .cap-content{\r\n opacity:0; transform:translateY(6px); filter:blur(.25px);\r\n }\r\n }\r\n\r\n \/* ===== Tablet (\u2264 1024px) ===== *\/\r\n @media (max-width:1024px){\r\n :root{ --imgH: 300px; }\r\n .capacity-stat{ padding: 20px 3vw; }\r\n .cap-content{ gap: clamp(16px, 5vw, 72px); }\r\n .capacity-value{ font-size: clamp(40px, 6.5vw, 48px); }\r\n }\r\n\r\n \/* ===== Mobile (\u2264 768px) ===== *\/\r\n @media (max-width:768px){\r\n :root{ --imgH: 240px; }\r\n .capacity-stat{ padding: 18px 4vw; }\r\n .cap-content{\r\n grid-template-columns: 1fr 1fr;\r\n grid-template-areas:\r\n \"label label\"\r\n \"value units\";\r\n gap: 12px 16px;\r\n }\r\n .capacity-label{ font-size: clamp(14px, 3.8vw, 18px); }\r\n .capacity-value{\r\n justify-self: start;\r\n font-size: clamp(32px, 9vw, 44px);\r\n }\r\n .capacity-units{\r\n justify-self: end;\r\n text-align:right;\r\n font-size: clamp(14px, 3.8vw, 18px);\r\n line-height:1.15;\r\n }\r\n }\r\n\r\n \/* ===== Small phones (\u2264 480px) ===== *\/\r\n @media (max-width:480px){\r\n :root{ --imgH: 200px; }\r\n .capacity-stat{ padding: 16px 16px; }\r\n .cap-content{\r\n grid-template-columns: 1fr;\r\n grid-template-areas:\r\n \"label\"\r\n \"value\"\r\n \"units\";\r\n gap: 6px;\r\n }\r\n .capacity-value{\r\n justify-self: start;\r\n font-size: clamp(28px, 10.5vw, 36px);\r\n }\r\n .capacity-units{\r\n justify-self: start;\r\n text-align:left;\r\n line-height:1.1;\r\n }\r\n }\r\n\r\n \/* Respect reduced motion *\/\r\n @media (prefers-reduced-motion: reduce){\r\n .capacity-stat, .cap-content, .cap-image{ transition:none !important; }\r\n }\r\n @media (max-width:768px){\r\n .capacity-units br{ display:none; }\r\n .capacity-units{ white-space:nowrap; }\r\n}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"capacity-bar\">\r\n <div class=\"capacity-stat\" role=\"group\" aria-label=\"Installed Capacity\">\r\n <div class=\"cap-content\">\r\n <div class=\"capacity-label\">Paper Conversion Capability<\/div>\r\n <div class=\"capacity-value\">4,200<\/div>\r\n <div class=\"capacity-units\">MT<br>\/month<\/div>\r\n <\/div>\r\n\r\n <picture>\r\n \r\n <source\r\n media=\"(max-width:768px)\"\r\n srcset=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Operations-3.png\" \/>\r\n \r\n \r\n <img class=\"cap-image\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Property-1Variant7-1.png\"\r\n alt=\"\"\r\n loading=\"lazy\"\r\n decoding=\"async\" \/>\r\n <\/picture>\r\n <\/div>\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\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1b8a9aa elementor-widget elementor-widget-spacer\" data-id=\"1b8a9aa\" 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-4a9a6f3 e-con-full e-flex e-con e-child\" data-id=\"4a9a6f3\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-0a4216b e-con-full animated-slow e-flex elementor-invisible e-con e-child\" data-id=\"0a4216b\" data-element_type=\"container\" data-settings=\"{"animation":"fadeInLeft"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7c164c7 elementor-widget elementor-widget-html\" data-id=\"7c164c7\" 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>Business Operations<\/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\r\n .bo-title{\r\n font-family: 'Host Grotesk';\r\n font-weight: 700; \/* Bold *\/\r\n font-size: 48px;\r\n line-height: 58px; \/* exact *\/\r\n letter-spacing: 0.01em; \/* \u2248 1% *\/\r\n color: #001316;\r\n margin: 0;\r\n text-align: left;\r\n vertical-align: middle; \/* included per spec *\/\r\n }\r\n\r\n @media (max-width: 640px){\r\n .bo-title{ font-size: 36px; line-height: 46px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n <h1 class=\"bo-title\">Production\r\nOutput<\/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-1cedc8d elementor-widget elementor-widget-heading\" data-id=\"1cedc8d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Efficiency That Delivers. <br>Capacity That Scales.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1de0c4f e-con-full e-flex e-con e-child\" data-id=\"1de0c4f\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-4f2aa69 e-con-full e-flex e-con e-child\" data-id=\"4f2aa69\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aef141f animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"aef141f\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInRight","_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>Metric Card \u2014 Foreground Slide Image<\/title>\r\n\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@400;500;600;700&display=swap\" rel=\"stylesheet\"\/>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;700&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n<style>\r\n :root{\r\n --card-w: 485px;\r\n --card-h: 275px;\r\n --accent: #D7E128;\r\n --subhead:#436F49;\r\n --muted: #6B7280;\r\n --rule: #E0E0E0;\r\n --slide-ms: 600ms;\r\n --stripe-w: 10px; \/* desktop stripe *\/\r\n }\r\n\r\n .metric-card{\r\n width:min(100%, var(--card-w));\r\n min-height:var(--card-h);\r\n background:#ffffff7c;\r\n border-radius:12px;\r\n position:relative;\r\n overflow:hidden;\r\n display:flex;\r\n box-shadow:0 0 0 1px rgba(0,0,0,0.04);\r\n -webkit-tap-highlight-color: transparent;\r\n }\r\n\r\n \/* left accent stripe \u2014 above everything *\/\r\n .metric-card::before{\r\n content:\"\";\r\n width:var(--stripe-w);\r\n background: linear-gradient(180deg, #D7E128 0%, #CDE539 100%);\r\n position:relative;\r\n z-index:3;\r\n flex:0 0 var(--stripe-w);\r\n }\r\n\r\n \/* sliding image layer \u2014 ABOVE text *\/\r\n .mc-hover-img{\r\n position:absolute;\r\n top:0; right:0; bottom:0; left:var(--stripe-w);\r\n display:flex; align-items:center; justify-content:flex-start;\r\n transform: translateX(-100%);\r\n transition: transform var(--slide-ms) cubic-bezier(.2,.8,.2,1);\r\n will-change: transform;\r\n z-index:2;\r\n pointer-events:none;\r\n }\r\n .mc-hover-img img{\r\n height:100%;\r\n width:auto;\r\n object-fit:none;\r\n display:block;\r\n }\r\n\r\n \/* content (under the sliding image) *\/\r\n .mc-content{\r\n flex:1;\r\n padding:28px 32px;\r\n display:grid;\r\n align-items:center;\r\n justify-items:start;\r\n text-align:left;\r\n position:relative;\r\n z-index:1;\r\n transition: opacity 280ms ease;\r\n }\r\n\r\n \/* Hover (desktop) *\/\r\n .metric-card:hover .mc-hover-img{ transform: translateX(0%); }\r\n .metric-card:hover .mc-content{ opacity:0; }\r\n\r\n \/* Tap-enabled state (mobile JS toggles this) *\/\r\n .metric-card.is-active .mc-hover-img{ transform: translateX(0%); }\r\n .metric-card.is-active .mc-content{ opacity:0; }\r\n\r\n .mc-metric{\r\n display:inline-flex;\r\n align-items:baseline;\r\n gap:12px;\r\n }\r\n\r\n .mc-value{\r\n font-family: \"Space Grotesk\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight:700;\r\n font-size:52px;\r\n line-height:1;\r\n letter-spacing:0.3px;\r\n background: linear-gradient(117.1deg, #001316 -16.52%, #04655C 52.84%);\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n color: transparent;\r\n -webkit-text-fill-color: transparent;\r\n }\r\n\r\n .mc-units{\r\n font-family: \"Host Grotesk\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight:500;\r\n font-size:18px;\r\n color:#7A8A85;\r\n }\r\n\r\n .mc-rule{\r\n width:100%;\r\n height:1px;\r\n background:var(--rule);\r\n margin:6px 0 2px;\r\n }\r\n\r\n .mc-heading{\r\n font-family: \"Host Grotesk\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n margin:0;\r\n font-weight:700;\r\n font-size:22px; \/* desktop\/laptop *\/\r\n color:var(--subhead);\r\n }\r\n\r\n .mc-desc{\r\n font-family: \"Space Grotesk\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n margin:0;\r\n font-weight:400;\r\n font-size:14px;\r\n color:var(--muted);\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce){\r\n .mc-hover-img{ transition:none; }\r\n .mc-content{ transition:none; }\r\n }\r\n\r\n \/* =========================\r\n MOBILE: up to 640px\r\n ========================= *\/\r\n @media (max-width: 640px){\r\n :root{\r\n --stripe-w: 8px; \/* thinner accent on mobile *\/\r\n }\r\n .metric-card{\r\n min-height: 200px;\r\n border-radius:12px;\r\n }\r\n .mc-content{\r\n padding:16px 16px 16px 18px;\r\n gap:8px;\r\n }\r\n .mc-value{ font-size: clamp(30px, 10vw, 42px); }\r\n .mc-units{ font-size: 14px; }\r\n .mc-heading{\r\n font-size: clamp(16px, 4.6vw, 20px); \/* responsive heading *\/\r\n line-height: 1.2;\r\n letter-spacing: 0.2px;\r\n margin-top: 2px;\r\n word-break: break-word;\r\n hyphens: auto;\r\n }\r\n .mc-desc{ font-size: 13px; }\r\n .mc-rule{ margin:4px 0 0; }\r\n\r\n \/* Fill the area cleanly on small screens *\/\r\n .mc-hover-img{ left:var(--stripe-w); }\r\n .mc-hover-img img{\r\n width:100%;\r\n height:100%;\r\n \/* object-fit:cover; *\/\r\n }\r\n\r\n \/* Touch fallback without JS (momentary reveal) *\/\r\n @media (hover:none){\r\n .metric-card:active .mc-hover-img{ transform: translateX(0%); }\r\n .metric-card:active .mc-content{ opacity:0; }\r\n .metric-card{ cursor:pointer; }\r\n }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"metric-card\" id=\"metricCard1\" role=\"button\" aria-pressed=\"false\" aria-label=\"Toggle preview image\">\r\n \r\n <div class=\"mc-hover-img\" aria-hidden=\"true\">\r\n <img decoding=\"async\" src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Property-1Frame-1618873178.png\" alt=\"\">\r\n <\/div>\r\n\r\n \r\n <div class=\"mc-content\">\r\n <div class=\"mc-metric\">\r\n <span class=\"mc-value\">10 lakh<\/span>\r\n <span class=\"mc-units\">units\/month<\/span>\r\n <\/div>\r\n\r\n <div class=\"mc-rule\"><\/div>\r\n\r\n <h3 class=\"mc-heading\">Office Stationery & Custom Products<\/h3>\r\n <p class=\"mc-desc\">Files, registers, pads, institutional formats.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <script>\r\n (function(){\r\n const card = document.getElementById('metricCard1');\r\n const isTouch = window.matchMedia('(hover: none)').matches || 'ontouchstart' in window;\r\n if (!card || !isTouch) return;\r\n\r\n card.addEventListener('click', () => {\r\n const active = card.classList.toggle('is-active');\r\n card.setAttribute('aria-pressed', String(active));\r\n });\r\n })();\r\n <\/script>\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-0ba9b7d e-con-full e-flex e-con e-child\" data-id=\"0ba9b7d\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9369d86 animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"9369d86\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInRight","_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>Metric Card \u2014 Foreground Slide Image<\/title>\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@400;700&display=swap\" rel=\"stylesheet\"\/>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;500;700&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n<style>\r\n :root{\r\n --card-w: 485px;\r\n --card-h: 275px;\r\n --accent: #D7E128;\r\n --subhead:#436F49;\r\n --muted: #6B7280;\r\n --rule: #E0E0E0;\r\n --slide-ms: 600ms;\r\n --stripe-w: 10px; \/* desktop stripe *\/\r\n }\r\n\r\n .metric-card{\r\n width:min(100%, var(--card-w));\r\n min-height:var(--card-h);\r\n background:#ffffff7c;\r\n border-radius:12px;\r\n position:relative;\r\n overflow:hidden;\r\n display:flex;\r\n box-shadow:0 0 0 1px rgba(0,0,0,0.04);\r\n -webkit-tap-highlight-color: transparent;\r\n }\r\n\r\n \/* left accent stripe \u2014 always visible on top *\/\r\n .metric-card::before{\r\n content:\"\";\r\n width:var(--stripe-w);\r\n background: linear-gradient(180deg, #D7E128 0%, #CDE539 100%);\r\n position:relative;\r\n z-index:3; \/* above everything *\/\r\n flex:0 0 var(--stripe-w);\r\n }\r\n\r\n \/* sliding image layer \u2014 ABOVE text (z-index:2) *\/\r\n .mc-hover-img{\r\n position:absolute;\r\n top:0; right:0; bottom:0; left:var(--stripe-w); \/* keep space for stripe *\/\r\n display:flex; align-items:center; justify-content:flex-start;\r\n transform: translateX(-100%);\r\n transition: transform var(--slide-ms) cubic-bezier(.2,.8,.2,1);\r\n will-change: transform;\r\n z-index:2; \/* ABOVE content *\/\r\n pointer-events:none;\r\n }\r\n .mc-hover-img img{\r\n height:100%; width:auto; object-fit:none; display:block;\r\n }\r\n\r\n \/* content (under the sliding image now) *\/\r\n .mc-content{\r\n flex:1;\r\n padding:28px 32px;\r\n display:grid;\r\n align-items:center;\r\n justify-items:start;\r\n text-align:left;\r\n position:relative;\r\n z-index:1; \/* BELOW the image layer *\/\r\n transition: opacity 280ms ease;\r\n }\r\n\r\n \/* on hover: slide image in and fade text so it doesn't mingle *\/\r\n .metric-card:hover .mc-hover-img{ transform: translateX(0%); }\r\n .metric-card:hover .mc-content{ opacity:0; }\r\n\r\n .mc-metric{\r\n display:inline-flex;\r\n align-items:baseline;\r\n gap:12px;\r\n }\r\n\r\n \/* Gradient text for the number *\/\r\n .mc-value{\r\n font-family: Space Grotesk;\r\n font-weight:700;\r\n font-size:52px;\r\n line-height:1;\r\n letter-spacing:0.3px;\r\n background: linear-gradient(117.1deg, #001316 -16.52%, #04655C 52.84%);\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n color: transparent;\r\n -webkit-text-fill-color: transparent;\r\n }\r\n\r\n .mc-units{\r\n font-family: Host Grotesk;\r\n font-weight: 500;\r\n font-style: normal; \/* fixed invalid value *\/\r\n font-size: 22.93px;\r\n line-height: 1; \/* keep desktop look *\/\r\n letter-spacing: 0;\r\n vertical-align: middle;\r\n }\r\n\r\n .mc-rule{\r\n width:100%;\r\n height:1px;\r\n background:var(--rule);\r\n margin:6px 0 2px;\r\n }\r\n\r\n .mc-heading{\r\n font-family: Host Grotesk;\r\n font-weight: 700;\r\n font-style: normal; \/* fixed invalid value *\/\r\n font-size: 20.4px; \/* desktop\/laptop *\/\r\n line-height: 1; \/* keep desktop look *\/\r\n letter-spacing: 0; \/* % is invalid in CSS *\/\r\n vertical-align: middle; \r\n margin: 0;\r\n }\r\n\r\n .mc-desc{\r\n font-family: Space Grotesk;\r\n font-weight: 400;\r\n font-style: normal; \/* fixed invalid value *\/\r\n font-size: 14.45px;\r\n line-height: 1; \/* keep desktop look *\/\r\n letter-spacing: 0;\r\n margin: 0;\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce){\r\n .mc-hover-img{ transition:none; }\r\n .mc-content{ transition:none; }\r\n }\r\n\r\n \/* =========================\r\n MOBILE: up to 640px\r\n ========================= *\/\r\n @media (max-width: 640px){\r\n :root{ --stripe-w: 8px; }\r\n\r\n .metric-card{\r\n min-height: 200px; \/* shorter card on phones *\/\r\n border-radius:12px;\r\n }\r\n .mc-content{\r\n padding:16px 16px 16px 18px; \/* tighter padding *\/\r\n gap:8px;\r\n }\r\n\r\n .mc-value{ font-size: clamp(30px, 10vw, 42px); }\r\n\r\n .mc-units{\r\n font-size: 14px;\r\n line-height: 1.2; \/* readable on mobile *\/\r\n }\r\n\r\n \/* Responsive heading (the key ask) *\/\r\n .mc-heading{\r\n font-size: clamp(16px, 4.6vw, 20px);\r\n line-height: 1.2;\r\n letter-spacing: 0.2px;\r\n word-break: break-word;\r\n hyphens: auto;\r\n margin-top: 2px;\r\n }\r\n\r\n .mc-desc{\r\n font-size: 13px;\r\n line-height: 1.35;\r\n }\r\n\r\n \/* Make the slide image cover nicely on small screens *\/\r\n .mc-hover-img img{\r\n width:100%;\r\n height:100%;\r\n \/* object-fit:cover; *\/\r\n }\r\n\r\n \/* Touch-only momentary reveal without JS *\/\r\n @media (hover:none){\r\n .metric-card:active .mc-hover-img{ transform: translateX(0%); }\r\n .metric-card:active .mc-content{ opacity:0; }\r\n .metric-card{ cursor:pointer; }\r\n }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"metric-card\" id=\"metricCard2\" role=\"button\" aria-pressed=\"false\" aria-label=\"Toggle preview image\">\r\n \r\n <div class=\"mc-hover-img\" aria-hidden=\"true\">\r\n <img decoding=\"async\" src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/KPH_4064-3.png\" alt=\"\">\r\n <\/div>\r\n\r\n \r\n <div class=\"mc-content\">\r\n <div class=\"mc-metric\">\r\n <span class=\"mc-value\">1 lakh+<\/span>\r\n <span class=\"mc-units\">products\/month<\/span>\r\n <\/div>\r\n\r\n <div class=\"mc-rule\"><\/div>\r\n\r\n <h3 class=\"mc-heading\">Premium Stationery (Hyderabad Unit)<\/h3>\r\n <p class=\"mc-desc\">Premium notebooks, planners, and journals.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <script>\r\n (function(){\r\n const card = document.getElementById('metricCard2');\r\n const isTouch = window.matchMedia('(hover: none)').matches || 'ontouchstart' in window;\r\n if (!card || !isTouch) return;\r\n\r\n card.addEventListener('click', () => {\r\n const active = card.classList.toggle('is-active');\r\n card.setAttribute('aria-pressed', String(active));\r\n });\r\n })();\r\n <\/script>\r\n\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 class=\"elementor-element elementor-element-25f7bb7 elementor-widget elementor-widget-spacer\" data-id=\"25f7bb7\" 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-e999312 e-con-full e-flex e-con e-child\" data-id=\"e999312\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-cb995c8 e-con-full e-flex e-con e-child\" data-id=\"cb995c8\" data-element_type=\"container\" data-settings=\"{"background_background":"video","background_video_link":"https:\\\/\\\/youtu.be\\\/hrG6vvRRHbQ","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-340a133 e-flex e-con-boxed e-con e-child\" data-id=\"340a133\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-be85088 e-con-full e-flex e-con e-child\" data-id=\"be85088\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-372b197 elementor-widget elementor-widget-image\" data-id=\"372b197\" 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-566581b elementor-widget elementor-widget-html\" data-id=\"566581b\" 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-1cb796f elementor-widget elementor-widget-html\" data-id=\"1cb796f\" 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-7298a07 e-con-full e-flex e-con e-child\" data-id=\"7298a07\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-caa2994 elementor-widget elementor-widget-html\" data-id=\"caa2994\" 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-2ce9b92 elementor-widget elementor-widget-html\" data-id=\"2ce9b92\" 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-6d5a331 elementor-widget elementor-widget-html\" data-id=\"6d5a331\" 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-9d5cafb elementor-widget elementor-widget-spacer\" data-id=\"9d5cafb\" 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-bb29f69 e-flex e-con-boxed e-con e-child\" data-id=\"bb29f69\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-83a16d4 e-con-full e-flex e-con e-child\" data-id=\"83a16d4\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-adc1312 elementor-widget elementor-widget-html\" data-id=\"adc1312\" 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-3de0a22 e-con-full e-flex e-con e-child\" data-id=\"3de0a22\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9ce1541 elementor-shape-circle e-grid-align-right elementor-grid-0 elementor-widget elementor-widget-social-icons\" data-id=\"9ce1541\" 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\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) Operations &Productions Building Scale, Speed & Quality at the Core.… <a href=\"https:\/\/verdantgroup.co.in\/index.php\/operations-productions\/\" rel=\"bookmark\"><span class=\"screen-reader-text\">Operations & Productions<\/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-1005","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/verdantgroup.co.in\/index.php\/wp-json\/wp\/v2\/pages\/1005","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=1005"}],"version-history":[{"count":484,"href":"https:\/\/verdantgroup.co.in\/index.php\/wp-json\/wp\/v2\/pages\/1005\/revisions"}],"predecessor-version":[{"id":5431,"href":"https:\/\/verdantgroup.co.in\/index.php\/wp-json\/wp\/v2\/pages\/1005\/revisions\/5431"}],"wp:attachment":[{"href":"https:\/\/verdantgroup.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=1005"}],"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-512ee49 e-con-full e-flex e-con e-child\" data-id=\"512ee49\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-15d46a3 elementor-widget elementor-widget-image\" data-id=\"15d46a3\" 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-e44e1b4 e-grid e-con-full e-con e-child\" data-id=\"e44e1b4\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-50a0274 e-con-full e-flex e-con e-child\" data-id=\"50a0274\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-59c223d elementor-widget elementor-widget-html\" data-id=\"59c223d\" 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 e-flex e-con e-child\" data-id=\"e027206\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5eb955b elementor-hidden-mobile elementor-hidden-tablet elementor-widget elementor-widget-html\" data-id=\"5eb955b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n\r\n\r\n<!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\r\n\r\n<link rel=\"preload\" as=\"image\" href=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/646dfb511a126b0a59a6ff50cdded278d36d3ff8-scaled.jpg\"\/>\r\n\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%20174.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 images behave the same and stack *\/\r\n .video-mask :is(video,img){\r\n position:absolute; inset:0;\r\n width:100%; height:100%;\r\n object-fit:cover; display:block;\r\n transform:scale(1);\r\n transition:\r\n transform var(--fade-dur) var(--fade-ease),\r\n opacity var(--fade-dur) var(--fade-ease);\r\n will-change: transform, opacity;\r\n }\r\n .wrapd:hover .video-mask :is(video,img){ transform:scale(1.03) }\r\n\r\n \/* .video-mask img:hover {\r\n transform: translateY(-20px);\r\n } *\/\r\n \/* Crossfade *\/\r\n .img-primary{ opacity:1; }\r\n .img-hover{ opacity:0; }\r\n .wrapd:hover .img-primary{ opacity:0; }\r\n .wrapd:hover .img-hover{ opacity:1; }\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 \r\n <img\r\n class=\"img-primary\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/WhatsApp-Image-2025-08-21-at-02.24.09_078c3068.jpg\"\r\n alt=\"Operations and Productions \u2014 default\"\r\n loading=\"eager\"\r\n decoding=\"async\"\r\n fetchpriority=\"high\"\r\n \/>\r\n \r\n <img\r\n class=\"img-hover\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/646dfb511a126b0a59a6ff50cdded278d36d3ff8-scaled.jpg\"\r\n alt=\"Operations and Productions \u2014 hover\"\r\n loading=\"eager\"\r\n decoding=\"async\"\r\n fetchpriority=\"high\"\r\n aria-hidden=\"true\"\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\">Operations &<br>Productions<\/h2>\r\n <\/div>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-dc4894a e-con-full elementor-hidden-desktop elementor-hidden-tablet e-flex e-con e-child\" data-id=\"dc4894a\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c8b4684 elementor-widget elementor-widget-image\" data-id=\"c8b4684\" 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-1618873227-scaled-rb14thag6qd6hbcchav01zma0st8m16r03gs4awxq8.png\" title=\"Frame 1618873227\" alt=\"Frame 1618873227\" 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-6889712 e-con-full elementor-hidden-desktop elementor-hidden-mobile e-flex e-con e-child\" data-id=\"6889712\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-97f9089 elementor-widget elementor-widget-image\" data-id=\"97f9089\" 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-1618873227-scaled.png\" class=\"attachment-full size-full wp-image-5000\" alt=\"\" srcset=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873227-scaled.png 1250w, https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873227-146x300.png 146w, https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873227-500x1024.png 500w, https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873227-768x1573.png 768w, https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873227-750x1536.png 750w, https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Frame-1618873227-1000x2048.png 1000w, https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/elementor\/thumbs\/Frame-1618873227-scaled-rb14thag6qd6hbcchav01zma0st8m16r03gs4awxq8.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<div class=\"elementor-element elementor-element-bb37c4b e-con-full e-flex e-con e-child\" data-id=\"bb37c4b\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t<div class=\"elementor-element elementor-element-48a95c8 e-con-full e-flex e-con e-child\" data-id=\"48a95c8\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4a76557 elementor-invisible elementor-widget elementor-widget-html\" data-id=\"4a76557\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInUp"}\" data-widget_type=\"html.default\">\n\t\t\t\t\t\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 :root{\r\n --light:#436F49; \/* \"Building\" & \"at the Core.\" *\/\r\n --strong:#0C4C44; \/* \"Scale, Speed & Quality\" *\/\r\n }\r\n\r\n .vh-wrap{\r\n width:100%;\r\n display:flex;\r\n justify-content:center; \/* change to flex-start for left align *\/\r\n padding:clamp(8px,2vw,24px);\r\n }\r\n .vh-title{\r\n margin:0;\r\n line-height:1.15;\r\n text-align:center;\r\n font-size:0; \/* prevent inline-gap; each span defines its own size *\/\r\n }\r\n\r\n \/* EXACT style for \"Building\" and \"at the Core.\" *\/\r\n .vh-title .light{\r\n font-family:'Host Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight:400; \/* Regular *\/\r\n font-size:48px;\r\n line-height:58px;\r\n letter-spacing:0.48px; \/* 1% of 48px *\/\r\n color:var(--light);\r\n display:inline;\r\n vertical-align:middle;\r\n }\r\n\r\n \/* UPDATED strong class per your spec *\/\r\n .vh-title .strong{\r\n font-family:'Host Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight:700; \/* Bold *\/\r\n font-size:48px;\r\n line-height:58px;\r\n letter-spacing:0.48px; \/* 1% *\/\r\n color:var(--strong);\r\n display:inline;\r\n vertical-align:middle;\r\n \/* text-align applies to containers; keeping center on the H1 above *\/\r\n }\r\n \/* Mobile only: left-align container and text *\/\r\n @media (max-width: 767px){\r\n .vh-wrap{ justify-content: flex-start; }\r\n .vh-title{ text-align: left; }\r\n }\r\n<\/style>\r\n\r\n<div class=\"vh-wrap\">\r\n <h1 class=\"vh-title\">\r\n <span class=\"light\">Building <\/span>\r\n <span class=\"strong\">Scale, Speed & Quality <\/span>\r\n <span class=\"light\"> at the Core.<\/span>\r\n <\/h1>\r\n<\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9016672 elementor-widget__width-initial elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"9016672\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInUp"}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">At Verdant, our infrastructure is more than just machines \u2014 it\u2019s the engine of innovation, efficiency, and excellence. Our semi and fully-automated manufacturing facilities are designed to deliver precision, consistency, and scalability across a wide product range for both domestic and global markets.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d872980 elementor-widget elementor-widget-spacer\" data-id=\"d872980\" 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<div class=\"elementor-element elementor-element-96d3e9b e-con-full e-flex e-con e-child\" data-id=\"96d3e9b\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-d6a16d3 e-con-full e-flex e-con e-child\" data-id=\"d6a16d3\" data-element_type=\"container\" id=\"integrated_sticky\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5347a02 elementor-invisible elementor-widget elementor-widget-html\" data-id=\"5347a02\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInLeft"}\" 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>Business Operations<\/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\r\n .bo-title{\r\n font-family: 'Host Grotesk';\r\n font-weight: 700; \/* Bold *\/\r\n font-size: 48px;\r\n line-height: 58px; \/* exact *\/\r\n letter-spacing: 0.01em; \/* \u2248 1% *\/\r\n color: #001316;\r\n margin: 0;\r\n text-align: left;\r\n vertical-align: middle; \/* included per spec *\/\r\n }\r\n\r\n @media (max-width: 640px){\r\n .bo-title{ font-size: 36px; line-height: 46px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n <h1 class=\"bo-title\">Integrated Manufacturing Facilities\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-ed26f8d animated-slow elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"ed26f8d\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInLeft"}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Efficiency Meets Expansion.<br>Excellence Meets Execution.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8abcd46 e-con-full e-flex e-con e-child\" data-id=\"8abcd46\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-2345748 e-con-full e-flex e-con e-child\" data-id=\"2345748\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-4b6ee7c e-con-full e-flex e-con e-child\" data-id=\"4b6ee7c\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-c53a115 e-con-full e-flex e-con e-child\" data-id=\"c53a115\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3ac7776 animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"3ac7776\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInRight","_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>Styled Gradient Text<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@700&display=swap\" rel=\"stylesheet\" \/>\r\n\r\n <style>\r\n .gradient-text {\r\n font-family: \"Space Grotesk\";\r\n font-weight: 700; \/* Bold *\/\r\n font-style: normal;\r\n font-size: 32px;\r\n line-height: 51.33px;\r\n letter-spacing: 0;\r\n vertical-align: middle;\r\n\r\n \/* Gradient applied to text *\/\r\n background: linear-gradient(117.1deg, #001316 -16.52%, #04655C 52.84%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n text-fill-color: transparent;\r\n\r\n display: inline-block;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"gradient-text\">Vijayawada Facility<\/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-718bb71 e-con-full e-flex e-con e-child\" data-id=\"718bb71\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3f4008e animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"3f4008e\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInRight","_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>Styled Text<\/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 .hq-text {\r\n font-family: \"Host Grotesk\";\r\n font-weight: 500; \/* Medium *\/\r\n font-style: normal;\r\n font-size: 24px;\r\n line-height: 30.58px;\r\n letter-spacing: 0;\r\n vertical-align: middle;\r\n color: #737373;\r\n\r\n display: inline-block;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"hq-text\">Headquarters<\/div>\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-ae2cfdc e-con-full e-flex e-con e-child\" data-id=\"ae2cfdc\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2b5d077 animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"2b5d077\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInRight","_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>Styled Text<\/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 .hub-text {\r\n font-family: \"Host Grotesk\";\r\n font-weight: 700; \/* Bold *\/\r\n font-style: normal;\r\n font-size: 24px;\r\n line-height: 100%; \/* exactly 100% *\/\r\n letter-spacing: 0;\r\n vertical-align: middle;\r\n color: #6B8662;\r\n\r\n display: inline-block;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"hub-text\">Central Hub for Domestic Production & Distribution<\/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-ca98869 e-grid e-con-full e-con e-child\" data-id=\"ca98869\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-44332b4 e-con-full e-flex e-con e-child\" data-id=\"44332b4\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5442d7f elementor-widget elementor-widget-html\" data-id=\"5442d7f\" 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>Accent Card \u2014 Hover BG + White Text (Responsive)<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@700&family=Space+Grotesk:wght@400&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n \/* ===== Base (desktop\/laptop) ===== *\/\r\n .accent-card{\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 216px;\r\n border-radius: 12px;\r\n border-left: 8px solid #D7DE27;\r\n background: #FFFFFF33;\r\n box-shadow: 0 8px 24px rgba(0,0,0,.12);\r\n display: flex;\r\n align-items: center;\r\n padding: 20px 24px;\r\n box-sizing: border-box;\r\n color: #0f172a;\r\n isolation: isolate;\r\n }\r\n\r\n \/* Hover background *\/\r\n .accent-card::before{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background: url(\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/07\/Background-3.png\") center \/ cover no-repeat;\r\n opacity: 0;\r\n transition: opacity .35s ease;\r\n z-index: 0;\r\n pointer-events:none;\r\n }\r\n @media (any-hover: hover){\r\n .accent-card:hover::before{ opacity: 1; }\r\n }\r\n\r\n .accent-card .content{\r\n position: relative;\r\n z-index: 1;\r\n display:flex;\r\n flex-direction:column;\r\n gap: 8px;\r\n }\r\n\r\n \/* Heading *\/\r\n .accent-card h3{\r\n margin: 0;\r\n font-family: 'Host Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight: 700;\r\n font-size: 24px;\r\n line-height: 1;\r\n letter-spacing: 0;\r\n color: #6B8662;\r\n transition: color .25s ease;\r\n }\r\n\r\n \/* List *\/\r\n .accent-card ul{\r\n margin: 0;\r\n padding-left: 18px;\r\n list-style: disc;\r\n }\r\n .accent-card li{\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: 18px;\r\n line-height: 32px;\r\n letter-spacing: 0;\r\n color: #616161;\r\n transition: color .25s ease;\r\n }\r\n\r\n \/* Hover colors on hover-capable devices *\/\r\n @media (any-hover: hover){\r\n .accent-card:hover h3{ color:#FFFFFF; }\r\n .accent-card:hover li{ color:#FFFFFF; }\r\n .accent-card:hover li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* ===== Touch support: tap to \u201chover\u201d ===== *\/\r\n .accent-card:focus,\r\n .accent-card:focus-visible{ outline: none; }\r\n @media (any-hover: none){\r\n .accent-card:active::before,\r\n .accent-card:focus::before,\r\n .accent-card:focus-within::before{ opacity: 1; }\r\n\r\n .accent-card:active h3,\r\n .accent-card:focus h3,\r\n .accent-card:focus-within h3{ color:#FFFFFF; }\r\n\r\n .accent-card:active li,\r\n .accent-card:focus li,\r\n .accent-card:focus-within li{ color:#FFFFFF; }\r\n\r\n .accent-card:active li::marker,\r\n .accent-card:focus li::marker,\r\n .accent-card:focus-within li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* ===== Tablet (\u2264 1024px) ===== *\/\r\n @media (max-width: 1024px){\r\n .accent-card{\r\n height:auto; \/* let content grow *\/\r\n padding:18px 20px;\r\n border-left-width:6px;\r\n }\r\n .accent-card h3{ font-size:22px; }\r\n .accent-card li{\r\n font-size:17px;\r\n line-height:30px;\r\n }\r\n }\r\n\r\n \/* ===== Mobile (\u2264 768px) ===== *\/\r\n @media (max-width: 768px){\r\n .accent-card{\r\n height:auto;\r\n padding:16px 18px;\r\n border-left-width:6px;\r\n align-items:flex-start; \/* better for multi-line *\/\r\n }\r\n .accent-card .content{ gap:6px; }\r\n .accent-card h3{ font-size:20px; }\r\n .accent-card ul{ padding-left:16px; }\r\n .accent-card li{\r\n font-size:16px;\r\n line-height:28px;\r\n }\r\n }\r\n\r\n \/* ===== Small phones (\u2264 480px) ===== *\/\r\n @media (max-width: 480px){\r\n .accent-card{\r\n padding:14px 16px;\r\n border-left-width:4px;\r\n border-radius:10px;\r\n }\r\n .accent-card h3{ font-size:18px; }\r\n .accent-card li{\r\n font-size:15px;\r\n line-height:26px;\r\n }\r\n }\r\n\r\n \/* Motion safety *\/\r\n @media (prefers-reduced-motion: reduce){\r\n .accent-card::before{ transition:none; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div class=\"accent-card\" role=\"group\" aria-label=\"Info card\" tabindex=\"0\">\r\n <div class=\"content\">\r\n <h3>Efficient Domestic Reach<\/h3>\r\n <ul>\r\n <li>Located at the crossroads of major transport corridors<\/li>\r\n <li>Enables smooth pan-India<br> distribution<\/li>\r\n <\/ul>\r\n <\/div>\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-21c83af e-con-full e-flex e-con e-child\" data-id=\"21c83af\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-35d8606 elementor-widget elementor-widget-html\" data-id=\"35d8606\" 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>Accent Card \u2014 Variant with Unique ID & Classes (Responsive)<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@700&family=Space+Grotesk:wght@400&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n \/* =============== Base (desktop\/laptop) =============== *\/\r\n #edr-card-2.edr-card{\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 216px;\r\n border-radius: 12px;\r\n border-left: 8px solid #D7DE27;\r\n background: #FFFFFF33;\r\n box-shadow: 0 8px 24px rgba(0,0,0,.12);\r\n display: flex;\r\n align-items: center;\r\n padding: 20px 24px;\r\n box-sizing: border-box;\r\n color: #0f172a;\r\n isolation: isolate;\r\n }\r\n\r\n \/* Hover background image *\/\r\n #edr-card-2.edr-card::before{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background: url(\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/07\/Background-3.png\") center \/ cover no-repeat;\r\n opacity: 0;\r\n transition: opacity .35s ease;\r\n z-index: 0;\r\n pointer-events:none;\r\n }\r\n \/* Trigger only on hover-capable devices *\/\r\n @media (any-hover: hover){\r\n #edr-card-2.edr-card:hover::before{ opacity: 1; }\r\n }\r\n\r\n \/* Content *\/\r\n #edr-card-2 .edr-content{\r\n position: relative; \/* above ::before *\/\r\n z-index: 1;\r\n display:flex;\r\n flex-direction:column;\r\n gap: 8px;\r\n }\r\n\r\n \/* Heading *\/\r\n #edr-card-2 .edr-heading{\r\n margin: 0;\r\n font-family: 'Host Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight: 700;\r\n font-size: 24px;\r\n line-height: 1; \/* 100% *\/\r\n letter-spacing: 0;\r\n color: #6B8662;\r\n transition: color .25s ease;\r\n leading-trim: none;\r\n vertical-align: middle;\r\n }\r\n\r\n \/* Bullets *\/\r\n #edr-card-2 .edr-points{\r\n margin: 0;\r\n padding-left: 18px;\r\n list-style: disc;\r\n }\r\n #edr-card-2 .edr-points li{\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: 18px;\r\n line-height: 32px;\r\n letter-spacing: 0;\r\n color: #616161;\r\n transition: color .25s ease;\r\n leading-trim: none;\r\n }\r\n\r\n \/* Hover colors on hover-capable devices *\/\r\n @media (any-hover: hover){\r\n #edr-card-2.edr-card:hover .edr-heading{ color:#FFFFFF; }\r\n #edr-card-2.edr-card:hover .edr-points li{ color:#FFFFFF; }\r\n #edr-card-2.edr-card:hover .edr-points li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* =============== Touch: tap-to-activate (mobile\/tablet) =============== *\/\r\n #edr-card-2.edr-card:focus,\r\n #edr-card-2.edr-card:focus-visible{ outline: none; }\r\n @media (any-hover: none){\r\n #edr-card-2.edr-card:active::before,\r\n #edr-card-2.edr-card:focus::before,\r\n #edr-card-2.edr-card:focus-within::before{ opacity:1; }\r\n\r\n #edr-card-2.edr-card:active .edr-heading,\r\n #edr-card-2.edr-card:focus .edr-heading,\r\n #edr-card-2.edr-card:focus-within .edr-heading{ color:#FFFFFF; }\r\n\r\n #edr-card-2.edr-card:active .edr-points li,\r\n #edr-card-2.edr-card:focus .edr-points li,\r\n #edr-card-2.edr-card:focus-within .edr-points li{ color:#FFFFFF; }\r\n\r\n #edr-card-2.edr-card:active .edr-points li::marker,\r\n #edr-card-2.edr-card:focus .edr-points li::marker,\r\n #edr-card-2.edr-card:focus-within .edr-points li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* =============== Tablet (\u2264 1024px) =============== *\/\r\n @media (max-width: 1024px){\r\n #edr-card-2.edr-card{\r\n height:auto; \/* let content grow *\/\r\n padding:18px 20px;\r\n border-left-width:6px;\r\n }\r\n #edr-card-2 .edr-heading{ font-size:22px; }\r\n #edr-card-2 .edr-points li{\r\n font-size:17px;\r\n line-height:30px;\r\n }\r\n }\r\n\r\n \/* =============== Mobile (\u2264 768px) =============== *\/\r\n @media (max-width: 768px){\r\n #edr-card-2.edr-card{\r\n height:auto;\r\n padding:16px 18px;\r\n border-left-width:6px;\r\n align-items:flex-start; \/* better for multi-line *\/\r\n }\r\n #edr-card-2 .edr-content{ gap:6px; }\r\n #edr-card-2 .edr-heading{ font-size:20px; }\r\n #edr-card-2 .edr-points{ padding-left:16px; }\r\n #edr-card-2 .edr-points li{\r\n font-size:16px;\r\n line-height:28px;\r\n }\r\n }\r\n\r\n \/* =============== Small phones (\u2264 480px) =============== *\/\r\n @media (max-width: 480px){\r\n #edr-card-2.edr-card{\r\n padding:14px 16px;\r\n border-left-width:4px;\r\n border-radius:10px;\r\n }\r\n #edr-card-2 .edr-heading{ font-size:18px; }\r\n #edr-card-2 .edr-points li{\r\n font-size:15px;\r\n line-height:26px;\r\n }\r\n }\r\n\r\n \/* Motion safety *\/\r\n @media (prefers-reduced-motion: reduce){\r\n #edr-card-2.edr-card::before{ transition:none; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div id=\"edr-card-2\" class=\"edr-card\" role=\"group\" aria-label=\"Info card variant\" tabindex=\"0\">\r\n <div class=\"edr-content\">\r\n <h3 class=\"edr-heading\">Advanced Book Binding Units<\/h3>\r\n <ul class=\"edr-points\">\r\n <li>Wiro, spiral, and case-binding capabilities<\/li>\r\n <li>Supports private label and institutional formats<\/li>\r\n <\/ul>\r\n <\/div>\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-60f2419 e-con-full e-flex e-con e-child\" data-id=\"60f2419\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ac0434a elementor-widget elementor-widget-html\" data-id=\"ac0434a\" 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>Accent Card \u2014 Variant 3 (Responsive)<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@700&family=Space+Grotesk:wght@400&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n \/* ===== Base (desktop\/laptop unchanged) ===== *\/\r\n #edr-card-3.edr3-card{\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 216px;\r\n border-radius: 12px;\r\n border-left: 8px solid #D7DE27;\r\n background: #FFFFFF33;\r\n box-shadow: 0 8px 24px rgba(0,0,0,.12);\r\n display: flex;\r\n align-items: center;\r\n padding: 20px 24px;\r\n box-sizing: border-box;\r\n color: #0f172a;\r\n isolation: isolate;\r\n }\r\n\r\n \/* Hover background image *\/\r\n #edr-card-3.edr3-card::before{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background: url(\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/07\/Background-3.png\") center \/ cover no-repeat;\r\n opacity: 0;\r\n transition: opacity .35s ease;\r\n z-index: 0;\r\n pointer-events:none;\r\n }\r\n \/* Only on hover-capable devices *\/\r\n @media (any-hover: hover){\r\n #edr-card-3.edr3-card:hover::before{ opacity:1; }\r\n }\r\n\r\n \/* Content *\/\r\n #edr-card-3 .edr3-content{\r\n position: relative;\r\n z-index: 1;\r\n display:flex;\r\n flex-direction:column;\r\n gap: 8px;\r\n }\r\n\r\n \/* Heading *\/\r\n #edr-card-3 .edr3-heading{\r\n margin: 0;\r\n font-family: 'Host Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight: 700;\r\n font-size: 24px;\r\n line-height: 1;\r\n color: #6B8662;\r\n letter-spacing: 0;\r\n transition: color .25s ease;\r\n vertical-align: middle;\r\n leading-trim: none;\r\n }\r\n\r\n \/* List *\/\r\n #edr-card-3 .edr3-list{\r\n margin: 0;\r\n padding-left: 18px;\r\n list-style: disc;\r\n }\r\n #edr-card-3 .edr3-list li{\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: 18px;\r\n line-height: 32px;\r\n letter-spacing: 0;\r\n color: #616161;\r\n transition: color .25s ease;\r\n leading-trim: none;\r\n }\r\n\r\n \/* Hover colors (hover-capable only) *\/\r\n @media (any-hover: hover){\r\n #edr-card-3.edr3-card:hover .edr3-heading{ color:#FFFFFF; }\r\n #edr-card-3.edr3-card:hover .edr3-list li{ color:#FFFFFF; }\r\n #edr-card-3.edr3-card:hover .edr3-list li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* ===== Touch: tap-to-activate ===== *\/\r\n #edr-card-3.edr3-card:focus,\r\n #edr-card-3.edr3-card:focus-visible{ outline: none; }\r\n @media (any-hover: none){\r\n #edr-card-3.edr3-card:active::before,\r\n #edr-card-3.edr3-card:focus::before,\r\n #edr-card-3.edr3-card:focus-within::before{ opacity:1; }\r\n\r\n #edr-card-3.edr3-card:active .edr3-heading,\r\n #edr-card-3.edr3-card:focus .edr3-heading,\r\n #edr-card-3.edr3-card:focus-within .edr3-heading{ color:#FFFFFF; }\r\n\r\n #edr-card-3.edr3-card:active .edr3-list li,\r\n #edr-card-3.edr3-card:focus .edr3-list li,\r\n #edr-card-3.edr3-card:focus-within .edr3-list li{ color:#FFFFFF; }\r\n\r\n #edr-card-3.edr3-card:active .edr3-list li::marker,\r\n #edr-card-3.edr3-card:focus .edr3-list li::marker,\r\n #edr-card-3.edr3-card:focus-within .edr3-list li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* ===== Tablet (\u2264 1024px) ===== *\/\r\n @media (max-width: 1024px){\r\n #edr-card-3.edr3-card{\r\n height:auto; \/* let content flow *\/\r\n padding:18px 20px;\r\n border-left-width:6px;\r\n }\r\n #edr-card-3 .edr3-heading{ font-size:22px; }\r\n #edr-card-3 .edr3-list li{\r\n font-size:17px;\r\n line-height:30px;\r\n }\r\n }\r\n\r\n \/* ===== Mobile (\u2264 768px) ===== *\/\r\n @media (max-width: 768px){\r\n #edr-card-3.edr3-card{\r\n height:auto;\r\n padding:16px 18px;\r\n border-left-width:6px;\r\n align-items:flex-start; \/* better for multi-line *\/\r\n }\r\n #edr-card-3 .edr3-content{ gap:6px; }\r\n #edr-card-3 .edr3-heading{ font-size:20px; }\r\n #edr-card-3 .edr3-list{ padding-left:16px; }\r\n #edr-card-3 .edr3-list li{\r\n font-size:16px;\r\n line-height:28px;\r\n }\r\n }\r\n\r\n \/* ===== Small phones (\u2264 480px) ===== *\/\r\n @media (max-width: 480px){\r\n #edr-card-3.edr3-card{\r\n padding:14px 16px;\r\n border-left-width:4px;\r\n border-radius:10px;\r\n }\r\n #edr-card-3 .edr3-heading{ font-size:18px; }\r\n #edr-card-3 .edr3-list li{\r\n font-size:15px;\r\n line-height:26px;\r\n }\r\n }\r\n\r\n \/* Motion safety *\/\r\n @media (prefers-reduced-motion: reduce){\r\n #edr-card-3.edr3-card::before{ transition:none; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div id=\"edr-card-3\" class=\"edr3-card\" role=\"group\" aria-label=\"Info card variant 3\" tabindex=\"0\">\r\n <div class=\"edr3-content\">\r\n <h3 class=\"edr3-heading\">High-Capacity Institutional Lines<\/h3>\r\n <ul class=\"edr3-list\">\r\n <li>Built for bulk government and NGO orders<\/li>\r\n <li>Agile production setup for tenders and contracts<\/li>\r\n <\/ul>\r\n <\/div>\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-68c818a e-con-full e-flex e-con e-child\" data-id=\"68c818a\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e5bf6e1 elementor-widget elementor-widget-html\" data-id=\"e5bf6e1\" 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>Accent Card \u2014 Variant 4 (Responsive)<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@700&family=Space+Grotesk:wght@400&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n \/* ===== Base (desktop\/laptop unchanged) ===== *\/\r\n #edr-card-4.edr4-card{\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 216px;\r\n border-radius: 12px;\r\n border-left: 8px solid #D7DE27; \/* left accent *\/\r\n background: #FFFFFF33; \/* default bg *\/\r\n box-shadow: 0 8px 24px rgba(0,0,0,.12);\r\n display: flex;\r\n align-items: center;\r\n padding: 20px 24px;\r\n box-sizing: border-box;\r\n color: #0f172a;\r\n isolation: isolate;\r\n }\r\n\r\n \/* Hover background image *\/\r\n #edr-card-4.edr4-card::before{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background: url(\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/07\/Background-3.png\") center \/ cover no-repeat;\r\n opacity: 0;\r\n transition: opacity .35s ease;\r\n z-index: 0;\r\n pointer-events:none;\r\n }\r\n \/* Only trigger on hover-capable devices *\/\r\n @media (any-hover: hover){\r\n #edr-card-4.edr4-card:hover::before{ opacity: 1; }\r\n }\r\n\r\n \/* Content *\/\r\n #edr-card-4 .edr4-content{\r\n position: relative; \/* above ::before *\/\r\n z-index: 1;\r\n display:flex;\r\n flex-direction:column;\r\n gap: 8px;\r\n }\r\n\r\n \/* Heading *\/\r\n #edr-card-4 .edr4-heading{\r\n margin: 0;\r\n font-family: 'Host Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight: 700;\r\n font-size: 24px;\r\n line-height: 1; \/* 100% *\/\r\n letter-spacing: 0;\r\n color: #6B8662; \/* default *\/\r\n transition: color .25s ease;\r\n vertical-align: middle;\r\n leading-trim: none;\r\n }\r\n\r\n \/* List *\/\r\n #edr-card-4 .edr4-list{\r\n margin: 0;\r\n padding-left: 18px;\r\n list-style: disc;\r\n }\r\n #edr-card-4 .edr4-list li{\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: 18px;\r\n line-height: 32px;\r\n letter-spacing: 0;\r\n color: #616161;\r\n transition: color .25s ease;\r\n leading-trim: none;\r\n }\r\n\r\n \/* Hover colors on hover-capable devices *\/\r\n @media (any-hover: hover){\r\n #edr-card-4.edr4-card:hover .edr4-heading{ color:#FFFFFF; }\r\n #edr-card-4.edr4-card:hover .edr4-list li{ color:#FFFFFF; }\r\n #edr-card-4.edr4-card:hover .edr4-list li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* ===== Touch: tap-to-activate (mobile\/tablet) ===== *\/\r\n #edr-card-4.edr4-card:focus,\r\n #edr-card-4.edr4-card:focus-visible{ outline: none; }\r\n @media (any-hover: none){\r\n #edr-card-4.edr4-card:active::before,\r\n #edr-card-4.edr4-card:focus::before,\r\n #edr-card-4.edr4-card:focus-within::before{ opacity:1; }\r\n\r\n #edr-card-4.edr4-card:active .edr4-heading,\r\n #edr-card-4.edr4-card:focus .edr4-heading,\r\n #edr-card-4.edr4-card:focus-within .edr4-heading{ color:#FFFFFF; }\r\n\r\n #edr-card-4.edr4-card:active .edr4-list li,\r\n #edr-card-4.edr4-card:focus .edr4-list li,\r\n #edr-card-4.edr4-card:focus-within .edr4-list li{ color:#FFFFFF; }\r\n\r\n #edr-card-4.edr4-card:active .edr4-list li::marker,\r\n #edr-card-4.edr4-card:focus .edr4-list li::marker,\r\n #edr-card-4.edr4-card:focus-within .edr4-list li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* ===== Tablet (\u2264 1024px) ===== *\/\r\n @media (max-width: 1024px){\r\n #edr-card-4.edr4-card{\r\n height:auto; \/* let content flow *\/\r\n padding:18px 20px;\r\n border-left-width:6px;\r\n }\r\n #edr-card-4 .edr4-heading{ font-size:22px; }\r\n #edr-card-4 .edr4-list li{\r\n font-size:17px;\r\n line-height:30px;\r\n }\r\n }\r\n\r\n \/* ===== Mobile (\u2264 768px) ===== *\/\r\n @media (max-width: 768px){\r\n #edr-card-4.edr4-card{\r\n height:auto;\r\n padding:16px 18px;\r\n border-left-width:6px;\r\n align-items:flex-start; \/* better for multi-line *\/\r\n }\r\n #edr-card-4 .edr4-content{ gap:6px; }\r\n #edr-card-4 .edr4-heading{ font-size:20px; }\r\n #edr-card-4 .edr4-list{ padding-left:16px; }\r\n #edr-card-4 .edr4-list li{\r\n font-size:16px;\r\n line-height:28px;\r\n }\r\n }\r\n\r\n \/* ===== Small phones (\u2264 480px) ===== *\/\r\n @media (max-width: 480px){\r\n #edr-card-4.edr4-card{\r\n padding:14px 16px;\r\n border-left-width:4px;\r\n border-radius:10px;\r\n }\r\n #edr-card-4 .edr4-heading{ font-size:18px; }\r\n #edr-card-4 .edr4-list li{\r\n font-size:15px;\r\n line-height:26px;\r\n }\r\n }\r\n\r\n \/* Motion safety *\/\r\n @media (prefers-reduced-motion: reduce){\r\n #edr-card-4.edr4-card::before{ transition:none; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div id=\"edr-card-4\" class=\"edr4-card\" role=\"group\" aria-label=\"Info card variant 4\" tabindex=\"0\">\r\n <div class=\"edr4-content\">\r\n <h3 class=\"edr4-heading\">ERP-Integrated Operations<\/h3>\r\n <ul class=\"edr4-list\">\r\n <li>Real-time scheduling, inventory tracking & dispatch<\/li>\r\n <li>Intelligent logistics planning & proof-of-delivery systems<\/li>\r\n <\/ul>\r\n <\/div>\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\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-14549a8 e-con-full e-flex e-con e-child\" data-id=\"14549a8\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-f0dc8bb e-con-full e-flex e-con e-child\" data-id=\"f0dc8bb\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-53b48d6 e-con-full e-flex e-con e-child\" data-id=\"53b48d6\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-aadb1a1 e-con-full e-flex e-con e-child\" data-id=\"aadb1a1\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-04d4d3f animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"04d4d3f\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInRight","_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>Styled Gradient Text<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@700&display=swap\" rel=\"stylesheet\" \/>\r\n\r\n <style>\r\n .gradient-text {\r\n font-family: \"Space Grotesk\";\r\n font-weight: 700; \/* Bold *\/\r\n font-style: normal;\r\n font-size: 32px;\r\n line-height: 51.33px;\r\n letter-spacing: 0;\r\n vertical-align: middle;\r\n\r\n \/* Gradient applied to text *\/\r\n background: linear-gradient(117.1deg, #001316 -16.52%, #04655C 52.84%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n text-fill-color: transparent;\r\n\r\n display: inline-block;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"gradient-text\">Hyderabad Facility <\/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-820bca5 e-con-full e-flex e-con e-child\" data-id=\"820bca5\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-89b8f41 animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"89b8f41\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInRight","_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>Styled Text<\/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 .hq-text {\r\n font-family: \"Host Grotesk\";\r\n font-weight: 500; \/* Medium *\/\r\n font-style: normal;\r\n font-size: 24px;\r\n line-height: 30.58px;\r\n letter-spacing: 0;\r\n vertical-align: middle;\r\n color: #737373;\r\n\r\n display: inline-block;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"hq-text\">(Launching FY25)<\/div>\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-1079303 e-con-full e-flex e-con e-child\" data-id=\"1079303\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f04b78d animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"f04b78d\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInRight","_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>Styled Text<\/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 .hub-text {\r\n font-family: \"Host Grotesk\";\r\n font-weight: 700; \/* Bold *\/\r\n font-style: normal;\r\n font-size: 24px;\r\n line-height: 100%; \/* exactly 100% *\/\r\n letter-spacing: 0;\r\n vertical-align: middle;\r\n color: #6B8662;\r\n\r\n display: inline-block;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"hub-text\">Verdant's New Premium & Export-Grade Manufacturing Unit<\/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-f6379c2 e-grid e-con-full e-con e-child\" data-id=\"f6379c2\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-bc60a50 e-con-full e-flex e-con e-child\" data-id=\"bc60a50\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2d76e89 elementor-widget elementor-widget-html\" data-id=\"2d76e89\" 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>Accent Card \u2014 Variant 5 (Responsive)<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@700&family=Space+Grotesk:wght@400&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n \/* =============== Base (desktop\/laptop unchanged) =============== *\/\r\n #edr-card-5.edr5-card{\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 216px;\r\n border-radius: 12px;\r\n border-left: 8px solid #849B40; \/* left accent *\/\r\n background: #FFFFFF33; \/* default bg *\/\r\n box-shadow: 0 8px 24px rgba(0,0,0,.12);\r\n display: flex;\r\n align-items: center;\r\n padding: 20px 24px;\r\n box-sizing: border-box;\r\n color: #0f172a;\r\n isolation: isolate;\r\n }\r\n\r\n \/* Hover background image (fade-in overlay) \u2014 only on devices that support hover *\/\r\n #edr-card-5.edr5-card::before{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background: url(\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/07\/Background-3.png\") center \/ cover no-repeat;\r\n opacity: 0;\r\n transition: opacity .35s ease;\r\n z-index: 0;\r\n pointer-events:none;\r\n }\r\n @media (any-hover: hover){\r\n #edr-card-5.edr5-card:hover::before{ opacity: 1; }\r\n }\r\n\r\n \/* Content wrapper *\/\r\n #edr-card-5 .edr5-content{\r\n position: relative; \/* above ::before *\/\r\n z-index: 1;\r\n display:flex;\r\n flex-direction:column;\r\n gap: 8px;\r\n }\r\n\r\n \/* Heading *\/\r\n #edr-card-5 .edr5-heading{\r\n margin: 0;\r\n font-family: 'Host Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight: 700;\r\n font-size: 24px;\r\n line-height: 1; \/* 100% *\/\r\n color: #849B40; \/* default *\/\r\n transition: color .25s ease;\r\n letter-spacing: 0;\r\n vertical-align: middle;\r\n leading-trim: none;\r\n }\r\n\r\n \/* List *\/\r\n #edr-card-5 .edr5-list{\r\n margin: 0;\r\n padding-left: 18px;\r\n list-style: disc;\r\n }\r\n #edr-card-5 .edr5-list li{\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: 18px;\r\n line-height: 32px;\r\n letter-spacing: 0;\r\n color: #616161; \/* default *\/\r\n transition: color .25s ease;\r\n leading-trim: none;\r\n }\r\n\r\n \/* Hover colors \u2014 only on hover-capable devices *\/\r\n @media (any-hover: hover){\r\n #edr-card-5.edr5-card:hover .edr5-heading{ color:#FFFFFF; }\r\n #edr-card-5.edr5-card:hover .edr5-list li{ color:#FFFFFF; }\r\n #edr-card-5.edr5-card:hover .edr5-list li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* =============== Touch support (tap to \u201chover\u201d) =============== *\/\r\n \/* Make the card focusable so :focus-visible works on mobile *\/\r\n #edr-card-5.edr5-card:focus,\r\n #edr-card-5.edr5-card:focus-visible{ outline: none; }\r\n\r\n \/* On touch devices, show the bg + white text on tap\/focus *\/\r\n @media (any-hover: none){\r\n #edr-card-5.edr5-card:active::before,\r\n #edr-card-5.edr5-card:focus-within::before,\r\n #edr-card-5.edr5-card:focus::before{ opacity:1; }\r\n\r\n #edr-card-5.edr5-card:active .edr5-heading,\r\n #edr-card-5.edr5-card:focus-within .edr5-heading,\r\n #edr-card-5.edr5-card:focus .edr5-heading{ color:#FFFFFF; }\r\n\r\n #edr-card-5.edr5-card:active .edr5-list li,\r\n #edr-card-5.edr5-card:focus-within .edr5-list li,\r\n #edr-card-5.edr5-card:focus .edr5-list li{ color:#FFFFFF; }\r\n\r\n #edr-card-5.edr5-card:active .edr5-list li::marker,\r\n #edr-card-5.edr5-card:focus-within .edr5-list li::marker,\r\n #edr-card-5.edr5-card:focus .edr5-list li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* =============== Tablet adjustments (\u2264 1024px) =============== *\/\r\n @media (max-width: 1024px){\r\n #edr-card-5.edr5-card{\r\n height: auto; \/* let content define height *\/\r\n padding: 18px 20px;\r\n border-left-width: 6px;\r\n }\r\n #edr-card-5 .edr5-heading{ font-size: 22px; }\r\n #edr-card-5 .edr5-list li{\r\n font-size: 17px;\r\n line-height: 30px;\r\n }\r\n }\r\n\r\n \/* =============== Mobile (\u2264 768px) =============== *\/\r\n @media (max-width: 768px){\r\n #edr-card-5.edr5-card{\r\n height:auto;\r\n padding:16px 18px;\r\n border-left-width:6px;\r\n align-items:flex-start; \/* better for multi-line content *\/\r\n }\r\n #edr-card-5 .edr5-content{ gap:6px; }\r\n #edr-card-5 .edr5-heading{ font-size: 20px; }\r\n #edr-card-5 .edr5-list{ padding-left: 16px; }\r\n #edr-card-5 .edr5-list li{\r\n font-size: 16px;\r\n line-height: 28px;\r\n }\r\n }\r\n\r\n \/* =============== Small phones (\u2264 480px) =============== *\/\r\n @media (max-width: 480px){\r\n #edr-card-5.edr5-card{\r\n padding:14px 16px;\r\n border-left-width:4px;\r\n border-radius:10px;\r\n }\r\n #edr-card-5 .edr5-heading{ font-size: 18px; }\r\n #edr-card-5 .edr5-list li{\r\n font-size: 15px;\r\n line-height: 26px;\r\n }\r\n }\r\n\r\n \/* Motion safety *\/\r\n @media (prefers-reduced-motion: reduce){\r\n #edr-card-5.edr5-card::before{ transition:none; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div id=\"edr-card-5\" class=\"edr5-card\" role=\"group\" aria-label=\"Info card variant 5\" tabindex=\"0\">\r\n <div class=\"edr5-content\">\r\n <h3 class=\"edr5-heading\">Export-Ready Product Lines<\/h3>\r\n <ul class=\"edr5-list\">\r\n <li>Designed to meet international quality and compliance standards<\/li>\r\n <li>Perfect for premium exports and high-end domestic supply<\/li>\r\n <\/ul>\r\n <\/div>\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-39e086e e-con-full e-flex e-con e-child\" data-id=\"39e086e\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-84f2955 elementor-widget elementor-widget-html\" data-id=\"84f2955\" 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>Accent Card \u2014 Variant 6 (Responsive)<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@700&family=Space+Grotesk:wght@400&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n \/* =============== Base (desktop\/laptop) =============== *\/\r\n #edr-card-6.edr6-card{\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 216px;\r\n border-radius: 12px;\r\n border-left: 8px solid #849B40;\r\n background: #FFFFFF33;\r\n box-shadow: 0 8px 24px rgba(0,0,0,.12);\r\n display: flex;\r\n align-items: center;\r\n padding: 20px 24px;\r\n box-sizing: border-box;\r\n color: #0f172a;\r\n isolation: isolate;\r\n }\r\n\r\n \/* Hover bg image *\/\r\n #edr-card-6.edr6-card::before{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background: url(\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/07\/Background-3.png\") center \/ cover no-repeat;\r\n opacity: 0;\r\n transition: opacity .35s ease;\r\n z-index: 0;\r\n pointer-events:none;\r\n }\r\n \/* Only trigger on hover-capable devices *\/\r\n @media (any-hover: hover){\r\n #edr-card-6.edr6-card:hover::before{ opacity:1; }\r\n }\r\n\r\n \/* Content *\/\r\n #edr-card-6 .edr6-content{\r\n position: relative;\r\n z-index: 1;\r\n display:flex;\r\n flex-direction:column;\r\n gap: 8px;\r\n }\r\n\r\n \/* Heading *\/\r\n #edr-card-6 .edr6-heading{\r\n margin: 0;\r\n font-family: 'Host Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight: 700;\r\n font-size: 24px;\r\n line-height: 1;\r\n letter-spacing: 0;\r\n color: #849B40;\r\n transition: color .25s ease;\r\n leading-trim: none;\r\n }\r\n\r\n \/* List *\/\r\n #edr-card-6 .edr6-list{\r\n margin: 0;\r\n padding-left: 18px;\r\n list-style: disc;\r\n }\r\n #edr-card-6 .edr6-list li{\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: 18px;\r\n line-height: 32px;\r\n letter-spacing: 0;\r\n color: #616161;\r\n transition: color .25s ease;\r\n leading-trim: none;\r\n }\r\n\r\n \/* Hover colors on hover-capable devices *\/\r\n @media (any-hover: hover){\r\n #edr-card-6.edr6-card:hover .edr6-heading{ color:#FFFFFF; }\r\n #edr-card-6.edr6-card:hover .edr6-list li{ color:#FFFFFF; }\r\n #edr-card-6.edr6-card:hover .edr6-list li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* =============== Touch: tap-to-activate =============== *\/\r\n #edr-card-6.edr6-card:focus,\r\n #edr-card-6.edr6-card:focus-visible{ outline: none; }\r\n @media (any-hover: none){\r\n #edr-card-6.edr6-card:active::before,\r\n #edr-card-6.edr6-card:focus::before,\r\n #edr-card-6.edr6-card:focus-within::before{ opacity:1; }\r\n\r\n #edr-card-6.edr6-card:active .edr6-heading,\r\n #edr-card-6.edr6-card:focus .edr6-heading,\r\n #edr-card-6.edr6-card:focus-within .edr6-heading{ color:#FFFFFF; }\r\n\r\n #edr-card-6.edr6-card:active .edr6-list li,\r\n #edr-card-6.edr6-card:focus .edr6-list li,\r\n #edr-card-6.edr6-card:focus-within .edr6-list li{ color:#FFFFFF; }\r\n\r\n #edr-card-6.edr6-card:active .edr6-list li::marker,\r\n #edr-card-6.edr6-card:focus .edr6-list li::marker,\r\n #edr-card-6.edr6-card:focus-within .edr6-list li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* =============== Tablet (\u2264 1024px) =============== *\/\r\n @media (max-width: 1024px){\r\n #edr-card-6.edr6-card{\r\n height:auto; \/* let content flow *\/\r\n padding:18px 20px;\r\n border-left-width:6px;\r\n }\r\n #edr-card-6 .edr6-heading{ font-size:22px; }\r\n #edr-card-6 .edr6-list li{\r\n font-size:17px;\r\n line-height:30px;\r\n }\r\n }\r\n\r\n \/* =============== Mobile (\u2264 768px) =============== *\/\r\n @media (max-width: 768px){\r\n #edr-card-6.edr6-card{\r\n height:auto;\r\n padding:16px 18px;\r\n border-left-width:6px;\r\n align-items:flex-start;\r\n }\r\n #edr-card-6 .edr6-content{ gap:6px; }\r\n #edr-card-6 .edr6-heading{ font-size:20px; }\r\n #edr-card-6 .edr6-list{ padding-left:16px; }\r\n #edr-card-6 .edr6-list li{\r\n font-size:16px;\r\n line-height:28px;\r\n }\r\n }\r\n\r\n \/* =============== Small phones (\u2264 480px) =============== *\/\r\n @media (max-width: 480px){\r\n #edr-card-6.edr6-card{\r\n padding:14px 16px;\r\n border-left-width:4px;\r\n border-radius:10px;\r\n }\r\n #edr-card-6 .edr6-heading{ font-size:18px; }\r\n #edr-card-6 .edr6-list li{\r\n font-size:15px;\r\n line-height:26px;\r\n }\r\n }\r\n\r\n \/* Motion safety *\/\r\n @media (prefers-reduced-motion: reduce){\r\n #edr-card-6.edr6-card::before{ transition:none; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div id=\"edr-card-6\" class=\"edr6-card\" role=\"group\" aria-label=\"Info card variant 6\" tabindex=\"0\">\r\n <div class=\"edr6-content\">\r\n <h3 class=\"edr6-heading\">Home of Premium Brands<\/h3>\r\n <ul class=\"edr6-list\">\r\n <li>Dedicated to producing August Blanks and Flexo Packaging<\/li>\r\n <li>Supports branded and custom stationery for gifting & global markets<\/li>\r\n <\/ul>\r\n <\/div>\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-71098e5 e-con-full e-flex e-con e-child\" data-id=\"71098e5\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1d3b4bd elementor-widget elementor-widget-html\" data-id=\"1d3b4bd\" 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>Accent Card \u2014 Variant 7 (Responsive)<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@700&family=Space+Grotesk:wght@400&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n \/* =============== Base (desktop\/laptop unchanged) =============== *\/\r\n #edr-card-7.edr7-card{\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 216px;\r\n border-radius: 12px;\r\n border-left: 8px solid #849B40; \/* left accent *\/\r\n background: #FFFFFF33; \/* default bg *\/\r\n box-shadow: 0 8px 24px rgba(0,0,0,.12);\r\n display: flex;\r\n align-items: center;\r\n padding: 20px 24px;\r\n box-sizing: border-box;\r\n color: #0f172a;\r\n isolation: isolate;\r\n }\r\n\r\n \/* Hover background image *\/\r\n #edr-card-7.edr7-card::before{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background: url(\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/07\/Background-3.png\") center \/ cover no-repeat;\r\n opacity: 0;\r\n transition: opacity .35s ease;\r\n z-index: 0;\r\n pointer-events:none;\r\n }\r\n \/* Only trigger hover on hover-capable devices *\/\r\n @media (any-hover: hover){\r\n #edr-card-7.edr7-card:hover::before{ opacity: 1; }\r\n }\r\n\r\n \/* Content wrapper *\/\r\n #edr-card-7 .edr7-content{\r\n position: relative; \/* above ::before *\/\r\n z-index: 1;\r\n display:flex;\r\n flex-direction:column;\r\n gap: 8px;\r\n }\r\n\r\n \/* Heading *\/\r\n #edr-card-7 .edr7-heading{\r\n margin: 0;\r\n font-family: 'Host Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight: 700;\r\n font-size: 24px;\r\n line-height: 1; \/* 100% *\/\r\n letter-spacing: 0;\r\n color: #849B40; \/* default *\/\r\n transition: color .25s ease;\r\n leading-trim: none;\r\n vertical-align: middle;\r\n }\r\n\r\n \/* List + items *\/\r\n #edr-card-7 .edr7-list{\r\n margin: 0;\r\n padding-left: 18px;\r\n list-style: disc;\r\n }\r\n #edr-card-7 .edr7-list li{\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: 18px;\r\n line-height: 32px;\r\n letter-spacing: 0;\r\n color: #616161;\r\n transition: color .25s ease;\r\n leading-trim: none;\r\n }\r\n\r\n \/* Hover colors on hover-capable devices *\/\r\n @media (any-hover: hover){\r\n #edr-card-7.edr7-card:hover .edr7-heading{ color:#FFFFFF; }\r\n #edr-card-7.edr7-card:hover .edr7-list li{ color:#FFFFFF; }\r\n #edr-card-7.edr7-card:hover .edr7-list li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* =============== Touch: tap-to-activate (mobile\/tablet) =============== *\/\r\n #edr-card-7.edr7-card:focus,\r\n #edr-card-7.edr7-card:focus-visible{ outline: none; }\r\n @media (any-hover: none){\r\n #edr-card-7.edr7-card:active::before,\r\n #edr-card-7.edr7-card:focus::before,\r\n #edr-card-7.edr7-card:focus-within::before{ opacity:1; }\r\n\r\n #edr-card-7.edr7-card:active .edr7-heading,\r\n #edr-card-7.edr7-card:focus .edr7-heading,\r\n #edr-card-7.edr7-card:focus-within .edr7-heading{ color:#FFFFFF; }\r\n\r\n #edr-card-7.edr7-card:active .edr7-list li,\r\n #edr-card-7.edr7-card:focus .edr7-list li,\r\n #edr-card-7.edr7-card:focus-within .edr7-list li{ color:#FFFFFF; }\r\n\r\n #edr-card-7.edr7-card:active .edr7-list li::marker,\r\n #edr-card-7.edr7-card:focus .edr7-list li::marker,\r\n #edr-card-7.edr7-card:focus-within .edr7-list li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* =============== Tablet (\u2264 1024px) =============== *\/\r\n @media (max-width: 1024px){\r\n #edr-card-7.edr7-card{\r\n height:auto; \/* let content flow *\/\r\n padding:18px 20px;\r\n border-left-width:6px;\r\n }\r\n #edr-card-7 .edr7-heading{ font-size:22px; }\r\n #edr-card-7 .edr7-list li{\r\n font-size:17px;\r\n line-height:30px;\r\n }\r\n }\r\n\r\n \/* =============== Mobile (\u2264 768px) =============== *\/\r\n @media (max-width: 768px){\r\n #edr-card-7.edr7-card{\r\n height:auto;\r\n padding:16px 18px;\r\n border-left-width:6px;\r\n align-items:flex-start;\r\n }\r\n #edr-card-7 .edr7-content{ gap:6px; }\r\n #edr-card-7 .edr7-heading{ font-size:20px; }\r\n #edr-card-7 .edr7-list{ padding-left:16px; }\r\n #edr-card-7 .edr7-list li{\r\n font-size:16px;\r\n line-height:28px;\r\n }\r\n }\r\n\r\n \/* =============== Small phones (\u2264 480px) =============== *\/\r\n @media (max-width: 480px){\r\n #edr-card-7.edr7-card{\r\n padding:14px 16px;\r\n border-left-width:4px;\r\n border-radius:10px;\r\n }\r\n #edr-card-7 .edr7-heading{ font-size:18px; }\r\n #edr-card-7 .edr7-list li{\r\n font-size:15px;\r\n line-height:26px;\r\n }\r\n }\r\n\r\n \/* Motion safety *\/\r\n @media (prefers-reduced-motion: reduce){\r\n #edr-card-7.edr7-card::before{ transition:none; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div id=\"edr-card-7\" class=\"edr7-card\" role=\"group\" aria-label=\"Info card variant 7\" tabindex=\"0\">\r\n <div class=\"edr7-content\">\r\n <h3 class=\"edr7-heading\">Strategic Location<\/h3>\r\n <ul class=\"edr7-list\">\r\n <li>Proximity to Hyderabad International Airport<\/li>\r\n <li>Ensures 24\u201372 hour air cargo cycles for urgent dispatches<\/li>\r\n <\/ul>\r\n <\/div>\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-fdc196d e-con-full e-flex e-con e-child\" data-id=\"fdc196d\" data-element_type=\"container\">\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-d600bd9 e-con-full e-flex e-con e-child\" data-id=\"d600bd9\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-08f2ba4 e-con-full e-flex e-con e-child\" data-id=\"08f2ba4\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-20758ff e-con-full e-flex e-con e-child\" data-id=\"20758ff\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-f77a8fb e-con-full e-flex e-con e-child\" data-id=\"f77a8fb\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8dd24d6 elementor-widget elementor-widget-html\" data-id=\"8dd24d6\" 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>Styled Gradient Text<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@700&display=swap\" rel=\"stylesheet\" \/>\r\n\r\n <style>\r\n .gradient-text {\r\n font-family: \"Space Grotesk\";\r\n font-weight: 700; \/* Bold *\/\r\n font-style: normal;\r\n font-size: 32px;\r\n line-height: 51.33px;\r\n letter-spacing: 0;\r\n vertical-align: middle;\r\n\r\n \/* Gradient applied to text *\/\r\n background: linear-gradient(117.1deg, #001316 -16.52%, #04655C 52.84%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n text-fill-color: transparent;\r\n\r\n display: inline-block;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"gradient-text\">Connected for Speed <\/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-d4895ed e-con-full e-flex e-con e-child\" data-id=\"d4895ed\" data-element_type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6b04dd0 e-grid e-con-full e-con e-child\" data-id=\"6b04dd0\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-84b7614 e-con-full e-flex e-con e-child\" data-id=\"84b7614\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b195745 elementor-widget elementor-widget-html\" data-id=\"b195745\" 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>Accent Card \u2014 Variant 8 (Responsive)<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@700&family=Space+Grotesk:wght@400&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n \/* ===== Base (desktop\/laptop unchanged) ===== *\/\r\n #edr-card-8.edr8-card{\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 216px;\r\n border-radius: 12px;\r\n border-left: 8px solid #456F46; \/* left accent *\/\r\n background: #FFFFFF33; \/* default bg *\/\r\n box-shadow: 0 8px 24px rgba(0,0,0,.12);\r\n display: flex;\r\n align-items: center;\r\n padding: 20px 24px;\r\n box-sizing: border-box;\r\n color: #0f172a;\r\n isolation: isolate;\r\n }\r\n\r\n \/* Hover background image *\/\r\n #edr-card-8.edr8-card::before{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background: url(\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/07\/Background-3.png\") center \/ cover no-repeat;\r\n opacity: 0;\r\n transition: opacity .35s ease;\r\n z-index: 0;\r\n pointer-events:none;\r\n }\r\n \/* Only trigger on hover-capable devices *\/\r\n @media (any-hover: hover){\r\n #edr-card-8.edr8-card:hover::before{ opacity: 1; }\r\n }\r\n\r\n \/* Content wrapper *\/\r\n #edr-card-8 .edr8-content{\r\n position: relative; \/* above ::before *\/\r\n z-index: 1;\r\n display:flex;\r\n flex-direction:column;\r\n gap: 8px;\r\n }\r\n\r\n \/* Heading *\/\r\n #edr-card-8 .edr8-heading{\r\n margin: 0;\r\n font-family: 'Host Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight: 700;\r\n font-size: 24px;\r\n line-height: 1; \/* 100% *\/\r\n letter-spacing: 0;\r\n color: #456F46; \/* default *\/\r\n transition: color .25s ease;\r\n vertical-align: middle;\r\n leading-trim: none;\r\n }\r\n\r\n \/* List + items *\/\r\n #edr-card-8 .edr8-list{\r\n margin: 0;\r\n padding-left: 18px;\r\n list-style: disc;\r\n }\r\n #edr-card-8 .edr8-list li{\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: 18px;\r\n line-height: 32px;\r\n letter-spacing: 0;\r\n color: #616161;\r\n transition: color .25s ease;\r\n leading-trim: none;\r\n }\r\n\r\n \/* Hover colors on hover-capable devices *\/\r\n @media (any-hover: hover){\r\n #edr-card-8.edr8-card:hover .edr8-heading{ color:#FFFFFF; }\r\n #edr-card-8.edr8-card:hover .edr8-list li{ color:#FFFFFF; }\r\n #edr-card-8.edr8-card:hover .edr8-list li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* ===== Touch: tap-to-activate (mobile\/tablet) ===== *\/\r\n #edr-card-8.edr8-card:focus,\r\n #edr-card-8.edr8-card:focus-visible{ outline: none; }\r\n @media (any-hover: none){\r\n #edr-card-8.edr8-card:active::before,\r\n #edr-card-8.edr8-card:focus::before,\r\n #edr-card-8.edr8-card:focus-within::before{ opacity:1; }\r\n\r\n #edr-card-8.edr8-card:active .edr8-heading,\r\n #edr-card-8.edr8-card:focus .edr8-heading,\r\n #edr-card-8.edr8-card:focus-within .edr8-heading{ color:#FFFFFF; }\r\n\r\n #edr-card-8.edr8-card:active .edr8-list li,\r\n #edr-card-8.edr8-card:focus .edr8-list li,\r\n #edr-card-8.edr8-card:focus-within .edr8-list li{ color:#FFFFFF; }\r\n\r\n #edr-card-8.edr8-card:active .edr8-list li::marker,\r\n #edr-card-8.edr8-card:focus .edr8-list li::marker,\r\n #edr-card-8.edr8-card:focus-within .edr8-list li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* ===== Tablet (\u2264 1024px) ===== *\/\r\n @media (max-width: 1024px){\r\n #edr-card-8.edr8-card{\r\n height:auto; \/* let content flow *\/\r\n padding:18px 20px;\r\n border-left-width:6px;\r\n }\r\n #edr-card-8 .edr8-heading{ font-size:22px; }\r\n #edr-card-8 .edr8-list li{\r\n font-size:17px;\r\n line-height:30px;\r\n }\r\n }\r\n\r\n \/* ===== Mobile (\u2264 768px) ===== *\/\r\n @media (max-width: 768px){\r\n #edr-card-8.edr8-card{\r\n height:auto;\r\n padding:16px 18px;\r\n border-left-width:6px;\r\n align-items:flex-start; \/* better for multi-line *\/\r\n }\r\n #edr-card-8 .edr8-content{ gap:6px; }\r\n #edr-card-8 .edr8-heading{ font-size:20px; }\r\n #edr-card-8 .edr8-list{ padding-left:16px; }\r\n #edr-card-8 .edr8-list li{\r\n font-size:16px;\r\n line-height:28px;\r\n }\r\n }\r\n\r\n \/* ===== Small phones (\u2264 480px) ===== *\/\r\n @media (max-width: 480px){\r\n #edr-card-8.edr8-card{\r\n padding:14px 16px;\r\n border-left-width:4px;\r\n border-radius:10px;\r\n }\r\n #edr-card-8 .edr8-heading{ font-size:18px; }\r\n #edr-card-8 .edr8-list li{\r\n font-size:15px;\r\n line-height:26px;\r\n }\r\n }\r\n\r\n \/* Motion safety *\/\r\n @media (prefers-reduced-motion: reduce){\r\n #edr-card-8.edr8-card::before{ transition:none; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div id=\"edr-card-8\" class=\"edr8-card\" role=\"group\" aria-label=\"Info card variant 8\" tabindex=\"0\">\r\n <div class=\"edr8-content\">\r\n <h3 class=\"edr8-heading\">Multi-Modal Port Access<\/h3>\r\n <ul class=\"edr8-list\">\r\n <li>Krishnapatnam, Visakhapatnam, Chennai & upcoming Machilipatnam<\/li>\r\n <li>Seamless containerised logistics for exports<\/li>\r\n <\/ul>\r\n <\/div>\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-74b0e17 e-con-full e-flex e-con e-child\" data-id=\"74b0e17\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9a8d724 elementor-widget elementor-widget-html\" data-id=\"9a8d724\" 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>Accent Card \u2014 Variant 9 (Responsive)<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@700&family=Space+Grotesk:wght@400&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n \/* ===== Base (desktop\/laptop) ===== *\/\r\n #edr-card-9.edr9-card{\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 216px;\r\n border-radius: 12px;\r\n border-left: 8px solid #456F46; \/* left accent *\/\r\n background: #FFFFFF33; \/* default bg *\/\r\n box-shadow: 0 8px 24px rgba(0,0,0,.12);\r\n display: flex;\r\n align-items: center;\r\n padding: 20px 24px;\r\n box-sizing: border-box;\r\n color: #0f172a;\r\n isolation: isolate;\r\n }\r\n\r\n \/* Hover background *\/\r\n #edr-card-9.edr9-card::before{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background: url(\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/07\/Background-3.png\") center \/ cover no-repeat;\r\n opacity: 0;\r\n transition: opacity .35s ease;\r\n z-index: 0;\r\n pointer-events:none;\r\n }\r\n @media (any-hover: hover){\r\n #edr-card-9.edr9-card:hover::before{ opacity:1; }\r\n }\r\n\r\n \/* Content *\/\r\n #edr-card-9 .edr9-content{\r\n position: relative; \/* above ::before *\/\r\n z-index: 1;\r\n display:flex;\r\n flex-direction:column;\r\n gap: 8px;\r\n }\r\n\r\n \/* Heading *\/\r\n #edr-card-9 .edr9-heading{\r\n margin: 0;\r\n font-family: 'Host Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight: 700;\r\n font-size: 24px;\r\n line-height: 1; \/* 100% *\/\r\n letter-spacing: 0;\r\n color: #456F46;\r\n transition: color .25s ease;\r\n vertical-align: middle;\r\n leading-trim: none;\r\n }\r\n\r\n \/* List *\/\r\n #edr-card-9 .edr9-list{\r\n margin: 0;\r\n padding-left: 18px;\r\n list-style: disc;\r\n }\r\n #edr-card-9 .edr9-list li{\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: 18px;\r\n line-height: 32px;\r\n letter-spacing: 0;\r\n color: #616161;\r\n transition: color .25s ease;\r\n leading-trim: none;\r\n }\r\n\r\n \/* Hover colors (hover-capable only) *\/\r\n @media (any-hover: hover){\r\n #edr-card-9.edr9-card:hover .edr9-heading{ color:#FFFFFF; }\r\n #edr-card-9.edr9-card:hover .edr9-list li{ color:#FFFFFF; }\r\n #edr-card-9.edr9-card:hover .edr9-list li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* ===== Touch: tap-to-activate ===== *\/\r\n #edr-card-9.edr9-card:focus,\r\n #edr-card-9.edr9-card:focus-visible{ outline: none; }\r\n @media (any-hover: none){\r\n #edr-card-9.edr9-card:active::before,\r\n #edr-card-9.edr9-card:focus::before,\r\n #edr-card-9.edr9-card:focus-within::before{ opacity:1; }\r\n\r\n #edr-card-9.edr9-card:active .edr9-heading,\r\n #edr-card-9.edr9-card:focus .edr9-heading,\r\n #edr-card-9.edr9-card:focus-within .edr9-heading{ color:#FFFFFF; }\r\n\r\n #edr-card-9.edr9-card:active .edr9-list li,\r\n #edr-card-9.edr9-card:focus .edr9-list li,\r\n #edr-card-9.edr9-card:focus-within .edr9-list li{ color:#FFFFFF; }\r\n\r\n #edr-card-9.edr9-card:active .edr9-list li::marker,\r\n #edr-card-9.edr9-card:focus .edr9-list li::marker,\r\n #edr-card-9.edr9-card:focus-within .edr9-list li::marker{ color:#FFFFFF; }\r\n }\r\n\r\n \/* ===== Tablet (\u2264 1024px) ===== *\/\r\n @media (max-width: 1024px){\r\n #edr-card-9.edr9-card{\r\n height:auto; \/* let content flow *\/\r\n padding:18px 20px;\r\n border-left-width:6px;\r\n }\r\n #edr-card-9 .edr9-heading{ font-size:22px; }\r\n #edr-card-9 .edr9-list li{\r\n font-size:17px;\r\n line-height:30px;\r\n }\r\n }\r\n\r\n \/* ===== Mobile (\u2264 768px) ===== *\/\r\n @media (max-width: 768px){\r\n #edr-card-9.edr9-card{\r\n height:auto;\r\n padding:16px 18px;\r\n border-left-width:6px;\r\n align-items:flex-start; \/* better for multi-line *\/\r\n }\r\n #edr-card-9 .edr9-content{ gap:6px; }\r\n #edr-card-9 .edr9-heading{ font-size:20px; }\r\n #edr-card-9 .edr9-list{ padding-left:16px; }\r\n #edr-card-9 .edr9-list li{\r\n font-size:16px;\r\n line-height:28px;\r\n }\r\n }\r\n\r\n \/* ===== Small phones (\u2264 480px) ===== *\/\r\n @media (max-width: 480px){\r\n #edr-card-9.edr9-card{\r\n padding:14px 16px;\r\n border-left-width:4px;\r\n border-radius:10px;\r\n }\r\n #edr-card-9 .edr9-heading{ font-size:18px; }\r\n #edr-card-9 .edr9-list li{\r\n font-size:15px;\r\n line-height:26px;\r\n }\r\n }\r\n\r\n \/* Motion safety *\/\r\n @media (prefers-reduced-motion: reduce){\r\n #edr-card-9.edr9-card::before{ transition:none; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div id=\"edr-card-9\" class=\"edr9-card\" role=\"group\" aria-label=\"Info card variant 9\" tabindex=\"0\">\r\n <div class=\"edr9-content\">\r\n <h3 class=\"edr9-heading\">Smart Warehousing Hubs<\/h3>\r\n <ul class=\"edr9-list\">\r\n <li>Vijayawada & Hyderabad staging points<\/li>\r\n <li>Phase-wise dispatch & intelligent load management<\/li>\r\n <\/ul>\r\n <\/div>\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\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-bb9df9d e-con-full e-flex e-con e-child\" data-id=\"bb9df9d\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-85f8a83 elementor-widget elementor-widget-spacer\" data-id=\"85f8a83\" 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 class=\"elementor-element elementor-element-9599095 elementor-widget__width-inherit animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"9599095\" data-element_type=\"widget\" data-settings=\"{"_animation":"zoomIn"}\" 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>Verdant \u2014 Quote (Exact Styles)<\/title>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;700&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n :root{\r\n --lead: #456F46; \/* requested color for both parts *\/\r\n }\r\n\r\n .quote-card{\r\n position: relative;\r\n margin: 0;\r\n padding: 72px 72px 72px 72px; \/* adjust if needed *\/\r\n background: transparent;\r\n max-width: 1512px; \/* adjust\/remove if you want it full-width *\/\r\n color: var(--lead);\r\n font-family: \"Space Grotesk\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n text-align: center;\r\n }\r\n\r\n .quote-card blockquote{ margin: 0; }\r\n\r\n \/* FIRST PART \u2014 Regular 400 *\/\r\n .lead{\r\n font-family: \"Space Grotesk\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight: 400; \/* Regular *\/\r\n font-size: 36.8px; \/* exact *\/\r\n line-height: 70.5px; \/* exact *\/\r\n letter-spacing: 0; \/* 0% *\/\r\n color: var(--lead); \/* #456F46 *\/\r\n display: inline-block;\r\n vertical-align: baseline;\r\n }\r\n\r\n \/* TRAILING PART \u2014 Bold 700 *\/\r\n .trail{\r\n font-family: \"Space Grotesk\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight: 700; \/* Bold *\/\r\n font-size: 36.8px; \/* exact *\/\r\n line-height: 70.5px; \/* exact *\/\r\n letter-spacing: 0; \/* 0% *\/\r\n color: var(--lead); \/* #456F46 *\/\r\n display: inline-block;\r\n vertical-align: baseline;\r\n }\r\n\r\n \/* Quote mark images you provided *\/\r\n .qimg-top, .qimg-bottom{\r\n position: absolute;\r\n width: 64px; height: auto; \/* tweak as needed *\/\r\n pointer-events: none; user-select: none;\r\n }\r\n .qimg-top { top: 0; left: 0; transform: translate(-12%, -12%); }\r\n .qimg-bottom{ bottom: 0; right: 0; transform: translate(12%, 12%); }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <figure class=\"quote-card\" role=\"group\" aria-label=\"Verdant statement\">\r\n \r\n <img decoding=\"async\" class=\"qimg-top\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/unnamed-file.png\"\r\n alt=\"\" loading=\"lazy\" draggable=\"false\" \/>\r\n \r\n <img decoding=\"async\" class=\"qimg-bottom\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/1.png\"\r\n alt=\"\" loading=\"lazy\" draggable=\"false\" \/>\r\n\r\n <blackquote>\r\n <span class=\"lead\">Verdant\u2019s infrastructure is not just built for today \u2014 <\/span>\r\n <span class=\"trail\"> it\u2019s engineered for the future, <\/span>\r\n <span class=\"lead\">aligning with its growth ambitions.<\/span>\r\n <\/blackquote>\r\n <\/figure>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2050a06 elementor-widget elementor-widget-spacer\" data-id=\"2050a06\" 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<div class=\"elementor-element elementor-element-6ff49fb e-con-full e-flex e-con e-child\" data-id=\"6ff49fb\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-bc9ee9e e-con-full animated-slow e-flex elementor-invisible e-con e-child\" data-id=\"bc9ee9e\" data-element_type=\"container\" id=\"integrated_sticky\" data-settings=\"{"animation":"fadeInLeft"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-67baad6 elementor-widget elementor-widget-html\" data-id=\"67baad6\" 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>Business Operations<\/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\r\n .bo-title{\r\n font-family: 'Host Grotesk';\r\n font-weight: 700; \/* Bold *\/\r\n font-size: 48px;\r\n line-height: 58px; \/* exact *\/\r\n letter-spacing: 0.01em; \/* \u2248 1% *\/\r\n color: #001316;\r\n margin: 0;\r\n text-align: left;\r\n vertical-align: middle; \/* included per spec *\/\r\n }\r\n\r\n @media (max-width: 640px){\r\n .bo-title{ font-size: 36px; line-height: 46px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n <h1 class=\"bo-title\">Business Operations<\/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-a771bef elementor-widget elementor-widget-heading\" data-id=\"a771bef\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Efficiency That Delivers. <br>Capacity That Scales.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c28e960 e-con-full e-flex e-con e-child\" data-id=\"c28e960\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6f4b761 animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"6f4b761\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInRight","_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>Installed Capacity \u2014 Ultra-Smooth Hover (Responsive)<\/title>\r\n\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@400;700&display=swap\" rel=\"stylesheet\"\/>\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 :root{\r\n --green-soft:#6f8a6f;\r\n --grey:#8d8d8d;\r\n --t: 640ms;\r\n --ease: cubic-bezier(.16,1,.3,1);\r\n --imgH: 340px; \/* desktop default *\/\r\n }\r\n *{ box-sizing:border-box; }\r\n\r\n .capacity-bar{\r\n width:100%;\r\n background:#ffffff00;\r\n border-top: 1px solid #E0E0E0;\r\n }\r\n\r\n .capacity-stat{\r\n position:relative;\r\n isolation:isolate;\r\n overflow:hidden;\r\n padding: 22px 2vw;\r\n margin: 0 auto;\r\n max-width: 1200px;\r\n transition: min-height var(--t) var(--ease), padding var(--t) var(--ease);\r\n will-change: min-height;\r\n }\r\n .capacity-stat:hover{ min-height: var(--imgH); }\r\n\r\n .cap-content{\r\n display:grid;\r\n grid-template-columns:auto 1fr auto;\r\n grid-template-areas: \"label value units\";\r\n align-items:center;\r\n gap: clamp(16px, 6vw, 140px);\r\n position:relative;\r\n z-index:1;\r\n transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), filter var(--t) var(--ease);\r\n will-change: opacity, transform, filter;\r\n }\r\n\r\n .capacity-label{\r\n grid-area: label;\r\n color: var(--green-soft);\r\n font-weight:700;\r\n font-size: clamp(16px, 1.6vw, 22px);\r\n letter-spacing:.2px;\r\n white-space:nowrap;\r\n font-family: Host Grotesk, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n }\r\n\r\n .capacity-value{\r\n grid-area: value;\r\n justify-self: right;\r\n font-weight:700;\r\n font-size: 52px; \/* overridden responsively below *\/\r\n line-height:1;\r\n white-space:nowrap;\r\n background: linear-gradient(117.1deg, #001316 -16.52%, #04655C 52.84%);\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n color: transparent;\r\n font-family: Space Grotesk, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n }\r\n\r\n .capacity-units{\r\n grid-area: units;\r\n text-align:right;\r\n color: var(--grey);\r\n font-weight:700;\r\n font-size: clamp(16px, 1.6vw, 22px);\r\n line-height:1.25;\r\n white-space:nowrap;\r\n font-family: Host Grotesk, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n }\r\n\r\n .cap-image{\r\n position:absolute;\r\n top:0; left:0; right:0;\r\n width:100%;\r\n height: var(--imgH);\r\n object-fit:cover;\r\n object-position:center;\r\n opacity:0;\r\n transform: translateY(-110%);\r\n transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), filter var(--t) var(--ease);\r\n will-change: opacity, transform, filter;\r\n z-index:2;\r\n pointer-events:none;\r\n backface-visibility:hidden;\r\n }\r\n\r\n .capacity-stat:hover .cap-image{\r\n opacity:1;\r\n transform: translateY(0);\r\n filter: saturate(1.03) contrast(1.01);\r\n transition-delay: 40ms;\r\n }\r\n .capacity-stat:hover .cap-content{\r\n opacity:0;\r\n transform: translateY(6px);\r\n filter: blur(.25px);\r\n transition-delay: 60ms;\r\n }\r\n\r\n \/* Touch support (already present; kept intact) *\/\r\n @media (hover:none){\r\n .capacity-stat:active{ min-height: var(--imgH); }\r\n .capacity-stat:active .cap-image{ opacity:1; transform:translateY(0); filter:saturate(1.03) contrast(1.01); }\r\n .capacity-stat:active .cap-content{ opacity:0; transform:translateY(6px); filter:blur(.25px); }\r\n }\r\n\r\n \/* ====== Tablet (\u2264 1024px) ====== *\/\r\n @media (max-width:1024px){\r\n :root{ --imgH: 300px; }\r\n .capacity-stat{ padding: 20px 3vw; }\r\n .capacity-value{ font-size: clamp(40px, 6.5vw, 48px); }\r\n .cap-content{ gap: clamp(16px, 5vw, 72px); }\r\n }\r\n\r\n \/* ====== Mobile (\u2264 768px) ====== *\/\r\n @media (max-width:768px){\r\n :root{ --imgH: 240px; }\r\n .capacity-stat{ padding: 18px 4vw; }\r\n .cap-content{\r\n grid-template-columns: 1fr 1fr;\r\n grid-template-areas:\r\n \"label label\"\r\n \"value units\";\r\n gap: 12px 16px;\r\n }\r\n .capacity-label{ font-size: clamp(14px, 3.8vw, 18px); }\r\n .capacity-value{\r\n justify-self: start;\r\n font-size: clamp(32px, 9vw, 44px);\r\n }\r\n .capacity-units{\r\n justify-self: end;\r\n text-align:right;\r\n font-size: clamp(14px, 3.8vw, 18px);\r\n line-height: 1.15;\r\n }\r\n }\r\n\r\n \/* ====== Small phones (\u2264 480px) ====== *\/\r\n @media (max-width:480px){\r\n :root{ --imgH: 200px; }\r\n .capacity-stat{ padding: 16px 16px; }\r\n .cap-content{\r\n grid-template-columns: 1fr;\r\n grid-template-areas:\r\n \"label\"\r\n \"value\"\r\n \"units\";\r\n gap: 6px;\r\n }\r\n .capacity-value{\r\n justify-self: start;\r\n font-size: clamp(28px, 10.5vw, 36px);\r\n }\r\n .capacity-units{\r\n justify-self: start;\r\n text-align:left;\r\n line-height:1.1;\r\n }\r\n }\r\n\r\n \/* Reduced motion *\/\r\n @media (prefers-reduced-motion: reduce){\r\n .capacity-stat, .cap-content, .cap-image{ transition:none !important; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"capacity-bar\">\r\n <div class=\"capacity-stat\" role=\"group\" aria-label=\"Installed Capacity\">\r\n <div class=\"cap-content\">\r\n <div class=\"capacity-label\">Installed Capacity<\/div>\r\n <div class=\"capacity-value\">150 lakh<\/div>\r\n <div class=\"capacity-units\">notebooks<br>\/month<\/div>\r\n <\/div>\r\n\r\n <picture>\r\n \r\n <source\r\n media=\"(max-width:768px)\"\r\n srcset=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Operations.png\" \/>\r\n \r\n \r\n <img class=\"cap-image\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Property-11-4.png\"\r\n alt=\"\"\r\n loading=\"lazy\"\r\n decoding=\"async\" \/>\r\n <\/picture>\r\n <\/div>\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-5a706be animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"5a706be\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInRight","_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>Installed Capacity \u2014 Ultra-Smooth Hover (Responsive)<\/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 <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;500;700&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n :root{\r\n --green-soft:#6f8a6f;\r\n --grey:#8d8d8d;\r\n --t: 640ms;\r\n --ease: cubic-bezier(.16,1,.3,1);\r\n --imgH: 340px; \/* desktop *\/\r\n }\r\n *{ box-sizing:border-box; }\r\n\r\n \/* Top border *\/\r\n .capacity-bar{\r\n width:100%;\r\n background:#0000;\r\n border-top: 1px solid #E0E0E0;\r\n }\r\n\r\n .capacity-stat{\r\n position:relative;\r\n isolation:isolate;\r\n overflow:hidden;\r\n padding: 22px 2vw;\r\n margin: 0 auto;\r\n max-width: 1200px;\r\n transition: min-height var(--t) var(--ease), padding var(--t) var(--ease);\r\n will-change: min-height;\r\n }\r\n .capacity-stat:hover{ min-height: var(--imgH); }\r\n\r\n \/* Content *\/\r\n .cap-content{\r\n display:grid;\r\n grid-template-columns:auto 1fr auto;\r\n grid-template-areas: \"label value units\";\r\n align-items:center;\r\n gap: clamp(16px, 6vw, 140px);\r\n position:relative;\r\n z-index:1;\r\n transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), filter var(--t) var(--ease);\r\n will-change: opacity, transform, filter;\r\n }\r\n\r\n .capacity-label{\r\n grid-area: label;\r\n color: var(--green-soft);\r\n font-weight:700;\r\n font-size: clamp(16px, 1.6vw, 22px);\r\n letter-spacing:.2px;\r\n white-space:nowrap;\r\n font-family: Host Grotesk, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n }\r\n\r\n .capacity-value{\r\n grid-area: value;\r\n justify-self:right;\r\n font-weight:700;\r\n font-size: 52px; \/* responsive overrides below *\/\r\n line-height:1;\r\n white-space:nowrap;\r\n background: linear-gradient(117.1deg, #001316 -16.52%, #04655C 52.84%);\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n color: transparent; \/* Firefox *\/\r\n font-family: Space Grotesk, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n }\r\n\r\n .capacity-units{\r\n grid-area: units;\r\n text-align:right;\r\n color: var(--grey);\r\n font-weight:700;\r\n font-size: clamp(16px, 1.6vw, 22px);\r\n line-height:1.25;\r\n white-space:nowrap;\r\n font-family: Host Grotesk, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n }\r\n\r\n \/* Hover image *\/\r\n .cap-image{\r\n position:absolute;\r\n top:0; left:0; right:0;\r\n width:100%;\r\n height: var(--imgH);\r\n object-fit:cover;\r\n object-position:center;\r\n opacity:0;\r\n transform: translateY(-110%);\r\n transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), filter var(--t) var(--ease);\r\n will-change: opacity, transform, filter;\r\n z-index:2;\r\n pointer-events:none;\r\n backface-visibility:hidden;\r\n }\r\n\r\n .capacity-stat:hover .cap-image{\r\n opacity:1;\r\n transform: translateY(0);\r\n filter: saturate(1.03) contrast(1.01);\r\n transition-delay: 40ms;\r\n }\r\n .capacity-stat:hover .cap-content{\r\n opacity:0;\r\n transform: translateY(6px);\r\n filter: blur(.25px);\r\n transition-delay: 60ms;\r\n }\r\n\r\n \/* Touch support (tap to preview) *\/\r\n @media (hover:none){\r\n .capacity-stat:active{ min-height: var(--imgH); }\r\n .capacity-stat:active .cap-image{ opacity:1; transform:translateY(0); filter:saturate(1.03) contrast(1.01); }\r\n .capacity-stat:active .cap-content{ opacity:0; transform:translateY(6px); filter:blur(.25px); }\r\n }\r\n\r\n \/* ===== Tablet (\u2264 1024px) ===== *\/\r\n @media (max-width:1024px){\r\n :root{ --imgH: 300px; }\r\n .capacity-stat{ padding: 20px 3vw; }\r\n .cap-content{ gap: clamp(16px, 5vw, 72px); }\r\n .capacity-value{ font-size: clamp(40px, 6.5vw, 48px); }\r\n }\r\n\r\n \/* ===== Mobile (\u2264 768px) ===== *\/\r\n @media (max-width:768px){\r\n :root{ --imgH: 240px; }\r\n .capacity-stat{ padding: 18px 4vw; }\r\n .cap-content{\r\n grid-template-columns: 1fr 1fr;\r\n grid-template-areas:\r\n \"label label\"\r\n \"value units\";\r\n gap: 12px 16px;\r\n }\r\n .capacity-label{ font-size: clamp(14px, 3.8vw, 18px); }\r\n .capacity-value{\r\n justify-self: start;\r\n font-size: clamp(32px, 9vw, 44px);\r\n }\r\n .capacity-units{\r\n justify-self: end;\r\n text-align:right;\r\n font-size: clamp(14px, 3.8vw, 18px);\r\n line-height:1.15;\r\n }\r\n }\r\n\r\n \/* ===== Small phones (\u2264 480px) ===== *\/\r\n @media (max-width:480px){\r\n :root{ --imgH: 200px; }\r\n .capacity-stat{ padding: 16px 16px; }\r\n .cap-content{\r\n grid-template-columns: 1fr;\r\n grid-template-areas:\r\n \"label\"\r\n \"value\"\r\n \"units\";\r\n gap: 6px;\r\n }\r\n .capacity-value{\r\n justify-self: start;\r\n font-size: clamp(28px, 10.5vw, 36px);\r\n }\r\n .capacity-units{\r\n justify-self: start;\r\n text-align:left;\r\n line-height:1.1;\r\n }\r\n }\r\n\r\n \/* Reduced motion *\/\r\n @media (prefers-reduced-motion: reduce){\r\n .capacity-stat, .cap-content, .cap-image{ transition:none !important; }\r\n }\r\n @media (max-width:768px){\r\n .capacity-units br{ display:none; }\r\n .capacity-units{ white-space:nowrap; }\r\n}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"capacity-bar\">\r\n <div class=\"capacity-stat\" role=\"group\" aria-label=\"Installed Capacity\">\r\n <div class=\"cap-content\">\r\n <div class=\"capacity-label\">Annual Capacity<\/div>\r\n <div class=\"capacity-value\">1,800 lakh<\/div>\r\n <div class=\"capacity-units\">notebooks<br>\/year<\/div>\r\n <\/div>\r\n\r\n <picture>\r\n \r\n <source\r\n media=\"(max-width:768px)\"\r\n srcset=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Operations-1.png\" \/>\r\n \r\n <img class=\"cap-image\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Property-1Variant3-1.png\"\r\n alt=\"\"\r\n loading=\"lazy\"\r\n decoding=\"async\" \/>\r\n <\/picture>\r\n <\/div>\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-8028276 animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"8028276\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInRight","_animation_delay":300}\" 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>Installed Capacity \u2014 Ultra-Smooth Hover (Responsive)<\/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 <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;500;700&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n :root{\r\n --green-soft:#6f8a6f;\r\n --grey:#8d8d8d;\r\n --t: 640ms; \/* duration *\/\r\n --ease: cubic-bezier(.16,1,.3,1);\r\n --imgH: 340px; \/* desktop hover image height *\/\r\n }\r\n *{ box-sizing:border-box; }\r\n\r\n \/* Top border *\/\r\n .capacity-bar{\r\n width:100%;\r\n background:#0000;\r\n border-top: 1px solid #E0E0E0;\r\n }\r\n\r\n .capacity-stat{\r\n position:relative;\r\n isolation:isolate;\r\n overflow:hidden;\r\n padding: 22px 2vw;\r\n margin: 0 auto;\r\n max-width: 1200px;\r\n transition: min-height var(--t) var(--ease), padding var(--t) var(--ease);\r\n will-change: min-height;\r\n }\r\n .capacity-stat:hover{ min-height: var(--imgH); }\r\n\r\n \/* Content *\/\r\n .cap-content{\r\n display:grid;\r\n grid-template-columns:auto 1fr auto;\r\n grid-template-areas: \"label value units\";\r\n align-items:center;\r\n gap: clamp(16px, 6vw, 140px);\r\n position:relative;\r\n z-index:1;\r\n transition:\r\n opacity var(--t) var(--ease),\r\n transform var(--t) var(--ease),\r\n filter var(--t) var(--ease);\r\n will-change: opacity, transform, filter;\r\n }\r\n\r\n .capacity-label{\r\n grid-area: label;\r\n color: var(--green-soft);\r\n font-weight:700;\r\n font-size: clamp(16px, 1.6vw, 22px);\r\n letter-spacing:.2px;\r\n white-space:nowrap;\r\n font-family: Host Grotesk, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n }\r\n\r\n \/* Gradient number *\/\r\n .capacity-value{\r\n grid-area: value;\r\n justify-self:right;\r\n font-weight:700;\r\n font-size: 52px; \/* responsive overrides below *\/\r\n line-height:1;\r\n white-space:nowrap;\r\n background: linear-gradient(117.1deg, #001316 -16.52%, #04655C 52.84%);\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n color: transparent; \/* Firefox *\/\r\n font-family: Space Grotesk, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n }\r\n\r\n .capacity-units{\r\n grid-area: units;\r\n text-align:right;\r\n color: var(--grey);\r\n font-weight:700;\r\n font-size: clamp(16px, 1.6vw, 22px);\r\n line-height:1.25;\r\n white-space:nowrap;\r\n font-family: Host Grotesk, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n }\r\n\r\n \/* Hover image *\/\r\n .cap-image{\r\n position:absolute;\r\n top:0; left:0; right:0;\r\n width:100%;\r\n height: var(--imgH);\r\n object-fit:cover;\r\n object-position:center;\r\n opacity:0;\r\n transform: translateY(-110%);\r\n transition:\r\n opacity var(--t) var(--ease),\r\n transform var(--t) var(--ease),\r\n filter var(--t) var(--ease);\r\n will-change: opacity, transform, filter;\r\n z-index:2;\r\n pointer-events:none;\r\n backface-visibility:hidden;\r\n }\r\n\r\n .capacity-stat:hover .cap-image{\r\n opacity:1;\r\n transform: translateY(0);\r\n filter: saturate(1.03) contrast(1.01);\r\n transition-delay: 40ms;\r\n }\r\n .capacity-stat:hover .cap-content{\r\n opacity:0;\r\n transform: translateY(6px);\r\n filter: blur(.25px);\r\n transition-delay: 60ms;\r\n }\r\n\r\n \/* Touch support (tap preview) *\/\r\n @media (hover:none){\r\n .capacity-stat:active{ min-height: var(--imgH); }\r\n .capacity-stat:active .cap-image{ opacity:1; transform:translateY(0); filter:saturate(1.03) contrast(1.01); }\r\n .capacity-stat:active .cap-content{ opacity:0; transform:translateY(6px); filter:blur(.25px); }\r\n }\r\n\r\n \/* ===== Tablet (\u2264 1024px) ===== *\/\r\n @media (max-width:1024px){\r\n :root{ --imgH: 300px; }\r\n .capacity-stat{ padding: 20px 3vw; }\r\n .cap-content{ gap: clamp(16px, 5vw, 72px); }\r\n .capacity-value{ font-size: clamp(40px, 6.5vw, 48px); }\r\n }\r\n\r\n \/* ===== Mobile (\u2264 768px) ===== *\/\r\n @media (max-width:768px){\r\n :root{ --imgH: 240px; }\r\n .capacity-stat{ padding: 18px 4vw; }\r\n .cap-content{\r\n grid-template-columns: 1fr 1fr;\r\n grid-template-areas:\r\n \"label label\"\r\n \"value units\";\r\n gap: 12px 16px;\r\n }\r\n .capacity-label{ font-size: clamp(14px, 3.8vw, 18px); }\r\n .capacity-value{\r\n justify-self: start;\r\n font-size: clamp(32px, 9vw, 44px);\r\n }\r\n .capacity-units{\r\n justify-self: end;\r\n text-align:right;\r\n font-size: clamp(14px, 3.8vw, 18px);\r\n line-height:1.15;\r\n }\r\n }\r\n\r\n \/* ===== Small phones (\u2264 480px) ===== *\/\r\n @media (max-width:480px){\r\n :root{ --imgH: 200px; }\r\n .capacity-stat{ padding: 16px 16px; }\r\n .cap-content{\r\n grid-template-columns: 1fr;\r\n grid-template-areas:\r\n \"label\"\r\n \"value\"\r\n \"units\";\r\n gap: 6px;\r\n }\r\n .capacity-value{\r\n justify-self: start;\r\n font-size: clamp(28px, 10.5vw, 36px);\r\n }\r\n .capacity-units{\r\n justify-self: start;\r\n text-align:left;\r\n line-height:1.1;\r\n }\r\n }\r\n\r\n \/* Reduced motion *\/\r\n @media (prefers-reduced-motion: reduce){\r\n .capacity-stat, .cap-content, .cap-image{ transition:none !important; }\r\n }\r\n @media (max-width:768px){\r\n .capacity-units br{ display:none; }\r\n .capacity-units{ white-space:nowrap; }\r\n}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"capacity-bar\">\r\n <div class=\"capacity-stat\" role=\"group\" aria-label=\"Installed Capacity\">\r\n <div class=\"cap-content\">\r\n <div class=\"capacity-label\">Peak Scalability<\/div>\r\n <div class=\"capacity-value\">125 lakh<\/div>\r\n <div class=\"capacity-units\">notebooks<br>\/month<\/div>\r\n <\/div>\r\n\r\n <picture>\r\n \r\n <source\r\n media=\"(max-width:768px)\"\r\n srcset=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Operations-2.png\" \/>\r\n \r\n \r\n <img class=\"cap-image\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Property-1Variant5-1.png\"\r\n alt=\"\"\r\n loading=\"lazy\"\r\n decoding=\"async\" \/>\r\n <\/picture>\r\n <\/div>\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-cceafa2 animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"cceafa2\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInRight","_animation_delay":500}\" 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>Installed Capacity \u2014 Ultra-Smooth Hover (Responsive)<\/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 <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;500;700&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n <style>\r\n :root{\r\n --green-soft:#6f8a6f;\r\n --grey:#8d8d8d;\r\n --t: 640ms; \/* duration *\/\r\n --ease: cubic-bezier(.16,1,.3,1); \/* smooth ease-out *\/\r\n --imgH: 340px; \/* desktop hover image height *\/\r\n }\r\n *{ box-sizing:border-box; }\r\n\r\n \/* Top border exactly as requested *\/\r\n .capacity-bar{\r\n width:100%;\r\n background:#ffffff00;\r\n border-top: 1px solid #E0E0E0;\r\n }\r\n\r\n .capacity-stat{\r\n position:relative;\r\n isolation:isolate;\r\n overflow:hidden; \/* clip the sliding image *\/\r\n padding: 22px 2vw;\r\n margin: 0 auto;\r\n max-width: 1200px;\r\n transition: min-height var(--t) var(--ease), padding var(--t) var(--ease);\r\n will-change: min-height;\r\n }\r\n \/* Grow the block to reveal the image smoothly *\/\r\n .capacity-stat:hover{ min-height: var(--imgH); }\r\n\r\n \/* Text\/content *\/\r\n .cap-content{\r\n display:grid;\r\n grid-template-columns:auto 1fr auto;\r\n grid-template-areas: \"label value units\";\r\n align-items:center;\r\n gap: clamp(16px, 6vw, 140px);\r\n position:relative;\r\n z-index:1;\r\n transition:\r\n opacity var(--t) var(--ease),\r\n transform var(--t) var(--ease),\r\n filter var(--t) var(--ease);\r\n will-change: opacity, transform, filter;\r\n }\r\n\r\n .capacity-label{\r\n grid-area: label;\r\n color: var(--green-soft);\r\n font-weight:700;\r\n font-size: clamp(16px, 1.6vw, 22px);\r\n letter-spacing:.2px;\r\n white-space:nowrap;\r\n font-family: Host Grotesk, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n }\r\n\r\n \/* Gradient number *\/\r\n .capacity-value{\r\n grid-area: value;\r\n justify-self:right;\r\n font-weight:700;\r\n font-size: 52px; \/* responsive overrides below *\/\r\n line-height:1;\r\n white-space:nowrap;\r\n background: linear-gradient(117.1deg, #001316 -16.52%, #04655C 52.84%);\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n color: transparent; \/* Firefox *\/\r\n font-family: Space Grotesk, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n }\r\n\r\n .capacity-units{\r\n grid-area: units;\r\n text-align:right;\r\n color: var(--grey);\r\n font-weight:700;\r\n font-size: clamp(16px, 1.6vw, 22px);\r\n line-height:1.25;\r\n white-space:nowrap;\r\n font-family: Host Grotesk, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n }\r\n\r\n \/* Hover image: slides down from the top, buttery fade *\/\r\n .cap-image{\r\n position:absolute;\r\n top:0; left:0; right:0;\r\n width:100%;\r\n height: var(--imgH); \/* only the image is fixed height *\/\r\n object-fit:cover;\r\n object-position:center;\r\n opacity:0;\r\n transform: translateY(-110%); \/* start well above for smoothness *\/\r\n transition:\r\n opacity var(--t) var(--ease),\r\n transform var(--t) var(--ease),\r\n filter var(--t) var(--ease);\r\n will-change: opacity, transform, filter;\r\n z-index:2;\r\n pointer-events:none;\r\n backface-visibility:hidden;\r\n }\r\n\r\n \/* Smooth swap on hover (with tiny delays to avoid flicker) *\/\r\n .capacity-stat:hover .cap-image{\r\n opacity:1;\r\n transform: translateY(0);\r\n filter: saturate(1.03) contrast(1.01);\r\n transition-delay: 40ms; \/* image starts just before text fades *\/\r\n }\r\n .capacity-stat:hover .cap-content{\r\n opacity:0;\r\n transform: translateY(6px);\r\n filter: blur(.25px);\r\n transition-delay: 60ms;\r\n }\r\n\r\n \/* Touch support *\/\r\n @media (hover:none){\r\n .capacity-stat:active{ min-height: var(--imgH); }\r\n .capacity-stat:active .cap-image{\r\n opacity:1; transform:translateY(0); filter:saturate(1.03) contrast(1.01);\r\n }\r\n .capacity-stat:active .cap-content{\r\n opacity:0; transform:translateY(6px); filter:blur(.25px);\r\n }\r\n }\r\n\r\n \/* ===== Tablet (\u2264 1024px) ===== *\/\r\n @media (max-width:1024px){\r\n :root{ --imgH: 300px; }\r\n .capacity-stat{ padding: 20px 3vw; }\r\n .cap-content{ gap: clamp(16px, 5vw, 72px); }\r\n .capacity-value{ font-size: clamp(40px, 6.5vw, 48px); }\r\n }\r\n\r\n \/* ===== Mobile (\u2264 768px) ===== *\/\r\n @media (max-width:768px){\r\n :root{ --imgH: 240px; }\r\n .capacity-stat{ padding: 18px 4vw; }\r\n .cap-content{\r\n grid-template-columns: 1fr 1fr;\r\n grid-template-areas:\r\n \"label label\"\r\n \"value units\";\r\n gap: 12px 16px;\r\n }\r\n .capacity-label{ font-size: clamp(14px, 3.8vw, 18px); }\r\n .capacity-value{\r\n justify-self: start;\r\n font-size: clamp(32px, 9vw, 44px);\r\n }\r\n .capacity-units{\r\n justify-self: end;\r\n text-align:right;\r\n font-size: clamp(14px, 3.8vw, 18px);\r\n line-height:1.15;\r\n }\r\n }\r\n\r\n \/* ===== Small phones (\u2264 480px) ===== *\/\r\n @media (max-width:480px){\r\n :root{ --imgH: 200px; }\r\n .capacity-stat{ padding: 16px 16px; }\r\n .cap-content{\r\n grid-template-columns: 1fr;\r\n grid-template-areas:\r\n \"label\"\r\n \"value\"\r\n \"units\";\r\n gap: 6px;\r\n }\r\n .capacity-value{\r\n justify-self: start;\r\n font-size: clamp(28px, 10.5vw, 36px);\r\n }\r\n .capacity-units{\r\n justify-self: start;\r\n text-align:left;\r\n line-height:1.1;\r\n }\r\n }\r\n\r\n \/* Respect reduced motion *\/\r\n @media (prefers-reduced-motion: reduce){\r\n .capacity-stat, .cap-content, .cap-image{ transition:none !important; }\r\n }\r\n @media (max-width:768px){\r\n .capacity-units br{ display:none; }\r\n .capacity-units{ white-space:nowrap; }\r\n}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"capacity-bar\">\r\n <div class=\"capacity-stat\" role=\"group\" aria-label=\"Installed Capacity\">\r\n <div class=\"cap-content\">\r\n <div class=\"capacity-label\">Paper Conversion Capability<\/div>\r\n <div class=\"capacity-value\">4,200<\/div>\r\n <div class=\"capacity-units\">MT<br>\/month<\/div>\r\n <\/div>\r\n\r\n <picture>\r\n \r\n <source\r\n media=\"(max-width:768px)\"\r\n srcset=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Operations-3.png\" \/>\r\n \r\n \r\n <img class=\"cap-image\"\r\n src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Property-1Variant7-1.png\"\r\n alt=\"\"\r\n loading=\"lazy\"\r\n decoding=\"async\" \/>\r\n <\/picture>\r\n <\/div>\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\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1b8a9aa elementor-widget elementor-widget-spacer\" data-id=\"1b8a9aa\" 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-4a9a6f3 e-con-full e-flex e-con e-child\" data-id=\"4a9a6f3\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-0a4216b e-con-full animated-slow e-flex elementor-invisible e-con e-child\" data-id=\"0a4216b\" data-element_type=\"container\" data-settings=\"{"animation":"fadeInLeft"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7c164c7 elementor-widget elementor-widget-html\" data-id=\"7c164c7\" 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>Business Operations<\/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\r\n .bo-title{\r\n font-family: 'Host Grotesk';\r\n font-weight: 700; \/* Bold *\/\r\n font-size: 48px;\r\n line-height: 58px; \/* exact *\/\r\n letter-spacing: 0.01em; \/* \u2248 1% *\/\r\n color: #001316;\r\n margin: 0;\r\n text-align: left;\r\n vertical-align: middle; \/* included per spec *\/\r\n }\r\n\r\n @media (max-width: 640px){\r\n .bo-title{ font-size: 36px; line-height: 46px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n <h1 class=\"bo-title\">Production\r\nOutput<\/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-1cedc8d elementor-widget elementor-widget-heading\" data-id=\"1cedc8d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Efficiency That Delivers. <br>Capacity That Scales.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1de0c4f e-con-full e-flex e-con e-child\" data-id=\"1de0c4f\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-4f2aa69 e-con-full e-flex e-con e-child\" data-id=\"4f2aa69\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aef141f animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"aef141f\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInRight","_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>Metric Card \u2014 Foreground Slide Image<\/title>\r\n\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@400;500;600;700&display=swap\" rel=\"stylesheet\"\/>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;700&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n<style>\r\n :root{\r\n --card-w: 485px;\r\n --card-h: 275px;\r\n --accent: #D7E128;\r\n --subhead:#436F49;\r\n --muted: #6B7280;\r\n --rule: #E0E0E0;\r\n --slide-ms: 600ms;\r\n --stripe-w: 10px; \/* desktop stripe *\/\r\n }\r\n\r\n .metric-card{\r\n width:min(100%, var(--card-w));\r\n min-height:var(--card-h);\r\n background:#ffffff7c;\r\n border-radius:12px;\r\n position:relative;\r\n overflow:hidden;\r\n display:flex;\r\n box-shadow:0 0 0 1px rgba(0,0,0,0.04);\r\n -webkit-tap-highlight-color: transparent;\r\n }\r\n\r\n \/* left accent stripe \u2014 above everything *\/\r\n .metric-card::before{\r\n content:\"\";\r\n width:var(--stripe-w);\r\n background: linear-gradient(180deg, #D7E128 0%, #CDE539 100%);\r\n position:relative;\r\n z-index:3;\r\n flex:0 0 var(--stripe-w);\r\n }\r\n\r\n \/* sliding image layer \u2014 ABOVE text *\/\r\n .mc-hover-img{\r\n position:absolute;\r\n top:0; right:0; bottom:0; left:var(--stripe-w);\r\n display:flex; align-items:center; justify-content:flex-start;\r\n transform: translateX(-100%);\r\n transition: transform var(--slide-ms) cubic-bezier(.2,.8,.2,1);\r\n will-change: transform;\r\n z-index:2;\r\n pointer-events:none;\r\n }\r\n .mc-hover-img img{\r\n height:100%;\r\n width:auto;\r\n object-fit:none;\r\n display:block;\r\n }\r\n\r\n \/* content (under the sliding image) *\/\r\n .mc-content{\r\n flex:1;\r\n padding:28px 32px;\r\n display:grid;\r\n align-items:center;\r\n justify-items:start;\r\n text-align:left;\r\n position:relative;\r\n z-index:1;\r\n transition: opacity 280ms ease;\r\n }\r\n\r\n \/* Hover (desktop) *\/\r\n .metric-card:hover .mc-hover-img{ transform: translateX(0%); }\r\n .metric-card:hover .mc-content{ opacity:0; }\r\n\r\n \/* Tap-enabled state (mobile JS toggles this) *\/\r\n .metric-card.is-active .mc-hover-img{ transform: translateX(0%); }\r\n .metric-card.is-active .mc-content{ opacity:0; }\r\n\r\n .mc-metric{\r\n display:inline-flex;\r\n align-items:baseline;\r\n gap:12px;\r\n }\r\n\r\n .mc-value{\r\n font-family: \"Space Grotesk\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight:700;\r\n font-size:52px;\r\n line-height:1;\r\n letter-spacing:0.3px;\r\n background: linear-gradient(117.1deg, #001316 -16.52%, #04655C 52.84%);\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n color: transparent;\r\n -webkit-text-fill-color: transparent;\r\n }\r\n\r\n .mc-units{\r\n font-family: \"Host Grotesk\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n font-weight:500;\r\n font-size:18px;\r\n color:#7A8A85;\r\n }\r\n\r\n .mc-rule{\r\n width:100%;\r\n height:1px;\r\n background:var(--rule);\r\n margin:6px 0 2px;\r\n }\r\n\r\n .mc-heading{\r\n font-family: \"Host Grotesk\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n margin:0;\r\n font-weight:700;\r\n font-size:22px; \/* desktop\/laptop *\/\r\n color:var(--subhead);\r\n }\r\n\r\n .mc-desc{\r\n font-family: \"Space Grotesk\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n margin:0;\r\n font-weight:400;\r\n font-size:14px;\r\n color:var(--muted);\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce){\r\n .mc-hover-img{ transition:none; }\r\n .mc-content{ transition:none; }\r\n }\r\n\r\n \/* =========================\r\n MOBILE: up to 640px\r\n ========================= *\/\r\n @media (max-width: 640px){\r\n :root{\r\n --stripe-w: 8px; \/* thinner accent on mobile *\/\r\n }\r\n .metric-card{\r\n min-height: 200px;\r\n border-radius:12px;\r\n }\r\n .mc-content{\r\n padding:16px 16px 16px 18px;\r\n gap:8px;\r\n }\r\n .mc-value{ font-size: clamp(30px, 10vw, 42px); }\r\n .mc-units{ font-size: 14px; }\r\n .mc-heading{\r\n font-size: clamp(16px, 4.6vw, 20px); \/* responsive heading *\/\r\n line-height: 1.2;\r\n letter-spacing: 0.2px;\r\n margin-top: 2px;\r\n word-break: break-word;\r\n hyphens: auto;\r\n }\r\n .mc-desc{ font-size: 13px; }\r\n .mc-rule{ margin:4px 0 0; }\r\n\r\n \/* Fill the area cleanly on small screens *\/\r\n .mc-hover-img{ left:var(--stripe-w); }\r\n .mc-hover-img img{\r\n width:100%;\r\n height:100%;\r\n \/* object-fit:cover; *\/\r\n }\r\n\r\n \/* Touch fallback without JS (momentary reveal) *\/\r\n @media (hover:none){\r\n .metric-card:active .mc-hover-img{ transform: translateX(0%); }\r\n .metric-card:active .mc-content{ opacity:0; }\r\n .metric-card{ cursor:pointer; }\r\n }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"metric-card\" id=\"metricCard1\" role=\"button\" aria-pressed=\"false\" aria-label=\"Toggle preview image\">\r\n \r\n <div class=\"mc-hover-img\" aria-hidden=\"true\">\r\n <img decoding=\"async\" src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/Property-1Frame-1618873178.png\" alt=\"\">\r\n <\/div>\r\n\r\n \r\n <div class=\"mc-content\">\r\n <div class=\"mc-metric\">\r\n <span class=\"mc-value\">10 lakh<\/span>\r\n <span class=\"mc-units\">units\/month<\/span>\r\n <\/div>\r\n\r\n <div class=\"mc-rule\"><\/div>\r\n\r\n <h3 class=\"mc-heading\">Office Stationery & Custom Products<\/h3>\r\n <p class=\"mc-desc\">Files, registers, pads, institutional formats.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <script>\r\n (function(){\r\n const card = document.getElementById('metricCard1');\r\n const isTouch = window.matchMedia('(hover: none)').matches || 'ontouchstart' in window;\r\n if (!card || !isTouch) return;\r\n\r\n card.addEventListener('click', () => {\r\n const active = card.classList.toggle('is-active');\r\n card.setAttribute('aria-pressed', String(active));\r\n });\r\n })();\r\n <\/script>\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-0ba9b7d e-con-full e-flex e-con e-child\" data-id=\"0ba9b7d\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9369d86 animated-slow elementor-invisible elementor-widget elementor-widget-html\" data-id=\"9369d86\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInRight","_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>Metric Card \u2014 Foreground Slide Image<\/title>\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Host+Grotesk:wght@400;700&display=swap\" rel=\"stylesheet\"\/>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;500;700&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n<style>\r\n :root{\r\n --card-w: 485px;\r\n --card-h: 275px;\r\n --accent: #D7E128;\r\n --subhead:#436F49;\r\n --muted: #6B7280;\r\n --rule: #E0E0E0;\r\n --slide-ms: 600ms;\r\n --stripe-w: 10px; \/* desktop stripe *\/\r\n }\r\n\r\n .metric-card{\r\n width:min(100%, var(--card-w));\r\n min-height:var(--card-h);\r\n background:#ffffff7c;\r\n border-radius:12px;\r\n position:relative;\r\n overflow:hidden;\r\n display:flex;\r\n box-shadow:0 0 0 1px rgba(0,0,0,0.04);\r\n -webkit-tap-highlight-color: transparent;\r\n }\r\n\r\n \/* left accent stripe \u2014 always visible on top *\/\r\n .metric-card::before{\r\n content:\"\";\r\n width:var(--stripe-w);\r\n background: linear-gradient(180deg, #D7E128 0%, #CDE539 100%);\r\n position:relative;\r\n z-index:3; \/* above everything *\/\r\n flex:0 0 var(--stripe-w);\r\n }\r\n\r\n \/* sliding image layer \u2014 ABOVE text (z-index:2) *\/\r\n .mc-hover-img{\r\n position:absolute;\r\n top:0; right:0; bottom:0; left:var(--stripe-w); \/* keep space for stripe *\/\r\n display:flex; align-items:center; justify-content:flex-start;\r\n transform: translateX(-100%);\r\n transition: transform var(--slide-ms) cubic-bezier(.2,.8,.2,1);\r\n will-change: transform;\r\n z-index:2; \/* ABOVE content *\/\r\n pointer-events:none;\r\n }\r\n .mc-hover-img img{\r\n height:100%; width:auto; object-fit:none; display:block;\r\n }\r\n\r\n \/* content (under the sliding image now) *\/\r\n .mc-content{\r\n flex:1;\r\n padding:28px 32px;\r\n display:grid;\r\n align-items:center;\r\n justify-items:start;\r\n text-align:left;\r\n position:relative;\r\n z-index:1; \/* BELOW the image layer *\/\r\n transition: opacity 280ms ease;\r\n }\r\n\r\n \/* on hover: slide image in and fade text so it doesn't mingle *\/\r\n .metric-card:hover .mc-hover-img{ transform: translateX(0%); }\r\n .metric-card:hover .mc-content{ opacity:0; }\r\n\r\n .mc-metric{\r\n display:inline-flex;\r\n align-items:baseline;\r\n gap:12px;\r\n }\r\n\r\n \/* Gradient text for the number *\/\r\n .mc-value{\r\n font-family: Space Grotesk;\r\n font-weight:700;\r\n font-size:52px;\r\n line-height:1;\r\n letter-spacing:0.3px;\r\n background: linear-gradient(117.1deg, #001316 -16.52%, #04655C 52.84%);\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n color: transparent;\r\n -webkit-text-fill-color: transparent;\r\n }\r\n\r\n .mc-units{\r\n font-family: Host Grotesk;\r\n font-weight: 500;\r\n font-style: normal; \/* fixed invalid value *\/\r\n font-size: 22.93px;\r\n line-height: 1; \/* keep desktop look *\/\r\n letter-spacing: 0;\r\n vertical-align: middle;\r\n }\r\n\r\n .mc-rule{\r\n width:100%;\r\n height:1px;\r\n background:var(--rule);\r\n margin:6px 0 2px;\r\n }\r\n\r\n .mc-heading{\r\n font-family: Host Grotesk;\r\n font-weight: 700;\r\n font-style: normal; \/* fixed invalid value *\/\r\n font-size: 20.4px; \/* desktop\/laptop *\/\r\n line-height: 1; \/* keep desktop look *\/\r\n letter-spacing: 0; \/* % is invalid in CSS *\/\r\n vertical-align: middle; \r\n margin: 0;\r\n }\r\n\r\n .mc-desc{\r\n font-family: Space Grotesk;\r\n font-weight: 400;\r\n font-style: normal; \/* fixed invalid value *\/\r\n font-size: 14.45px;\r\n line-height: 1; \/* keep desktop look *\/\r\n letter-spacing: 0;\r\n margin: 0;\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce){\r\n .mc-hover-img{ transition:none; }\r\n .mc-content{ transition:none; }\r\n }\r\n\r\n \/* =========================\r\n MOBILE: up to 640px\r\n ========================= *\/\r\n @media (max-width: 640px){\r\n :root{ --stripe-w: 8px; }\r\n\r\n .metric-card{\r\n min-height: 200px; \/* shorter card on phones *\/\r\n border-radius:12px;\r\n }\r\n .mc-content{\r\n padding:16px 16px 16px 18px; \/* tighter padding *\/\r\n gap:8px;\r\n }\r\n\r\n .mc-value{ font-size: clamp(30px, 10vw, 42px); }\r\n\r\n .mc-units{\r\n font-size: 14px;\r\n line-height: 1.2; \/* readable on mobile *\/\r\n }\r\n\r\n \/* Responsive heading (the key ask) *\/\r\n .mc-heading{\r\n font-size: clamp(16px, 4.6vw, 20px);\r\n line-height: 1.2;\r\n letter-spacing: 0.2px;\r\n word-break: break-word;\r\n hyphens: auto;\r\n margin-top: 2px;\r\n }\r\n\r\n .mc-desc{\r\n font-size: 13px;\r\n line-height: 1.35;\r\n }\r\n\r\n \/* Make the slide image cover nicely on small screens *\/\r\n .mc-hover-img img{\r\n width:100%;\r\n height:100%;\r\n \/* object-fit:cover; *\/\r\n }\r\n\r\n \/* Touch-only momentary reveal without JS *\/\r\n @media (hover:none){\r\n .metric-card:active .mc-hover-img{ transform: translateX(0%); }\r\n .metric-card:active .mc-content{ opacity:0; }\r\n .metric-card{ cursor:pointer; }\r\n }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"metric-card\" id=\"metricCard2\" role=\"button\" aria-pressed=\"false\" aria-label=\"Toggle preview image\">\r\n \r\n <div class=\"mc-hover-img\" aria-hidden=\"true\">\r\n <img decoding=\"async\" src=\"https:\/\/verdantgroup.co.in\/wp-content\/uploads\/2025\/08\/KPH_4064-3.png\" alt=\"\">\r\n <\/div>\r\n\r\n \r\n <div class=\"mc-content\">\r\n <div class=\"mc-metric\">\r\n <span class=\"mc-value\">1 lakh+<\/span>\r\n <span class=\"mc-units\">products\/month<\/span>\r\n <\/div>\r\n\r\n <div class=\"mc-rule\"><\/div>\r\n\r\n <h3 class=\"mc-heading\">Premium Stationery (Hyderabad Unit)<\/h3>\r\n <p class=\"mc-desc\">Premium notebooks, planners, and journals.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <script>\r\n (function(){\r\n const card = document.getElementById('metricCard2');\r\n const isTouch = window.matchMedia('(hover: none)').matches || 'ontouchstart' in window;\r\n if (!card || !isTouch) return;\r\n\r\n card.addEventListener('click', () => {\r\n const active = card.classList.toggle('is-active');\r\n card.setAttribute('aria-pressed', String(active));\r\n });\r\n })();\r\n <\/script>\r\n\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 class=\"elementor-element elementor-element-25f7bb7 elementor-widget elementor-widget-spacer\" data-id=\"25f7bb7\" 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-e999312 e-con-full e-flex e-con e-child\" data-id=\"e999312\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-cb995c8 e-con-full e-flex e-con e-child\" data-id=\"cb995c8\" data-element_type=\"container\" data-settings=\"{"background_background":"video","background_video_link":"https:\\\/\\\/youtu.be\\\/hrG6vvRRHbQ","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-340a133 e-flex e-con-boxed e-con e-child\" data-id=\"340a133\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-be85088 e-con-full e-flex e-con e-child\" data-id=\"be85088\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-372b197 elementor-widget elementor-widget-image\" data-id=\"372b197\" 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-566581b elementor-widget elementor-widget-html\" data-id=\"566581b\" 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-1cb796f elementor-widget elementor-widget-html\" data-id=\"1cb796f\" 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-7298a07 e-con-full e-flex e-con e-child\" data-id=\"7298a07\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-caa2994 elementor-widget elementor-widget-html\" data-id=\"caa2994\" 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-2ce9b92 elementor-widget elementor-widget-html\" data-id=\"2ce9b92\" 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-6d5a331 elementor-widget elementor-widget-html\" data-id=\"6d5a331\" 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-9d5cafb elementor-widget elementor-widget-spacer\" data-id=\"9d5cafb\" 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-bb29f69 e-flex e-con-boxed e-con e-child\" data-id=\"bb29f69\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-83a16d4 e-con-full e-flex e-con e-child\" data-id=\"83a16d4\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-adc1312 elementor-widget elementor-widget-html\" data-id=\"adc1312\" 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-3de0a22 e-con-full e-flex e-con e-child\" data-id=\"3de0a22\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9ce1541 elementor-shape-circle e-grid-align-right elementor-grid-0 elementor-widget elementor-widget-social-icons\" data-id=\"9ce1541\" 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\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) Operations &Productions Building Scale, Speed & Quality at the Core.… <a href=\"https:\/\/verdantgroup.co.in\/index.php\/operations-productions\/\" rel=\"bookmark\"><span class=\"screen-reader-text\">Operations & Productions<\/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-1005","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/verdantgroup.co.in\/index.php\/wp-json\/wp\/v2\/pages\/1005","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=1005"}],"version-history":[{"count":484,"href":"https:\/\/verdantgroup.co.in\/index.php\/wp-json\/wp\/v2\/pages\/1005\/revisions"}],"predecessor-version":[{"id":5431,"href":"https:\/\/verdantgroup.co.in\/index.php\/wp-json\/wp\/v2\/pages\/1005\/revisions\/5431"}],"wp:attachment":[{"href":"https:\/\/verdantgroup.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=1005"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}