{"id":7,"date":"2026-01-22T06:58:19","date_gmt":"2026-01-22T06:58:19","guid":{"rendered":"https:\/\/wpcipl.com\/wpc\/?page_id=7"},"modified":"2026-04-22T14:49:20","modified_gmt":"2026-04-22T14:49:20","slug":"home","status":"publish","type":"page","link":"https:\/\/wpcipl.com\/wpc\/","title":{"rendered":"Home"},"content":{"rendered":"<body>\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7\" class=\"elementor elementor-7\">\n\t\t\t\t<div class=\"elementor-element elementor-element-369e9b1 e-con-full e-flex e-con e-parent\" data-id=\"369e9b1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-16b6078 elementor-widget elementor-widget-html\" data-id=\"16b6078\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600&amp;family=Outfit:wght@500;700&amp;display=swap\" rel=\"stylesheet\">\n\n<section class=\"glass-nav-wrapper\">\n  <nav class=\"glass-nav-container\">\n    <div class=\"glass-nav-logo\">\n      <a href=\"https:\/\/wpcipl.com\/wpc\/home\/\"><\/a>\n    <\/div>\n\n    <button class=\"glass-nav-toggle\" aria-label=\"Toggle Menu\" id=\"glassNavToggle\">\n      <span><\/span>\n      <span><\/span>\n      <span><\/span>\n    <\/button>\n\n    <ul class=\"glass-nav-links\" id=\"glassNavLinks\">\n      <li><a href=\"https:\/\/wpcipl.com\/wpc\/home\/\">Home<\/a><\/li>\n      <li><a href=\"https:\/\/wpcipl.com\/wpc\/about-us\/\">About Us<\/a><\/li>\n      <li><a href=\"https:\/\/wpcipl.com\/wpc\/services\/\">Services<\/a><\/li>\n      <li><a href=\"https:\/\/wpcipl.com\/wpc\/contact-us\/\">Contact Us<\/a><\/li>\n    <\/ul>\n  <\/nav>\n<\/section>\n\n<style>\n\n\/* ===== Desktop \/ Global bar ===== *\/\n\n\n\n.glass-nav-wrapper{\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  z-index: 99999;\n  pointer-events: none;\n}\n\n\/* full width bar *\/\n.glass-nav-container{\n\n  pointer-events: auto;\n  width: 100vw;\n  max-width: 100vw;\n  margin: 0;\n  padding: 12px 32px;\n\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  \/* \u2705 Blue glass with light blur *\/\n  background: rgba(30, 64, 175, 0.22);   \/* blue tone *\/\n  backdrop-filter: blur(8px) saturate(140%);\n  -webkit-backdrop-filter: blur(8px) saturate(140%);\n\n  border-bottom: 1px solid rgba(255,255,255,0.25);\n  box-shadow: 0 6px 24px rgba(0,0,0,0.12);\n\n  box-sizing: border-box;\n  border-radius: 0;\n}\n\n\/* Logo *\/\n.glass-nav-logo a{\n  font-family: 'Outfit', sans-serif;\n  width: 44px;\n  height: 44px;\n\n  background-image: url('https:\/\/wpcipl.com\/wpc\/wp-content\/uploads\/2026\/01\/WPCIPL-LOGO.jpg');\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  background-color: rgba(255,255,255,0.1);\n\n  text-decoration: none;\n  font-weight: 700;\n  display: grid;\n  place-items: center;\n  border-radius: 50%;\n  font-size: 16px;\n  transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.glass-nav-logo a:hover{\n  transform: scale(1.05);\n}\n\n\/* Desktop Navigation Links *\/\n.glass-nav-links{\n  list-style: none !important;\n  display: flex;\n  gap: 5px;\n  margin: 0;\n  padding: 0;\n}\n\n.glass-nav-links li a{\n  font-family: 'Inter', sans-serif;\n  text-decoration: none;\n  color: #ffffff;\n  font-weight: 600;\n  font-size: 14px;\n  padding: 10px 18px;\n  border-radius: 50px;\n  transition: 0.3s;\n}\n\n.glass-nav-links li a:hover{\n  background: rgba(255,255,255,0.55);\n}\n\n\/* Toggle Button (unchanged) *\/\n.glass-nav-toggle{\n  display: none;\n  flex-direction: column;\n  gap: 5px;\n  background: rgba(0,0,0,0.05);\n  border: none;\n  cursor: pointer;\n  padding: 12px;\n  border-radius: 50%;\n  transition: 0.3s;\n}\n\n.glass-nav-toggle span{\n  width: 20px;\n  height: 2px;\n  background: #1a1a1a;\n  border-radius: 10px;\n  transition: 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);\n}\n\n\/* ------------------------------------------------ *\/\n\/* ---- RESPONSIVE & HAMBURGER (NOT TOUCHED) ---- *\/\n\/* ------------------------------------------------ *\/\n\n@media (max-width: 768px){\n\n  .glass-nav-toggle{ display: flex; }\n\n  .glass-nav-links{\n    position: fixed;\n    top: 80px;\n    right: 4%;\n    width: calc(100% - 8%);\n    max-width: 320px;\n    flex-direction: column;\n    padding: 24px;\n    gap: 12px;\n    border-radius: 30px;\n\n    background: rgba(255, 255, 255, 0.85);\n    backdrop-filter: blur(30px) saturate(200%);\n    -webkit-backdrop-filter: blur(30px) saturate(200%);\n    border: 1px solid rgba(255, 255, 255, 0.6);\n    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n\n    opacity: 0;\n    visibility: hidden;\n    transform: scale(0.9) translateY(-10px);\n    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);\n    transform-origin: top right;\n  }\n\n  .glass-nav-links.is-active{\n    opacity: 1;\n    visibility: visible;\n    transform: scale(1) translateY(0);\n  }\n\n  .glass-nav-links li{\n    width: 100%;\n    transform: translateY(15px);\n    opacity: 0;\n    transition: 0.4s ease;\n  }\n\n  .glass-nav-links.is-active li{\n    transform: translateY(0);\n    opacity: 1;\n  }\n\n  .glass-nav-links.is-active li:nth-child(1){ transition-delay: 0.1s; }\n  .glass-nav-links.is-active li:nth-child(2){ transition-delay: 0.15s; }\n  .glass-nav-links.is-active li:nth-child(3){ transition-delay: 0.2s; }\n  .glass-nav-links.is-active li:nth-child(4){ transition-delay: 0.25s; }\n\n  .glass-nav-links li a{\n    display: block;\n    width: 100%;\n    padding: 16px;\n    background: rgba(255, 255, 255, 0.5);\n    border: 1px solid rgba(0,0,0,0.03);\n    text-align: center;\n    font-size: 16px;\n    box-sizing: border-box;\n  }\n\n  .glass-nav-links li a:active{\n    background: #6366f1;\n    color: #fff;\n  }\n}\n\n@media (max-width: 480px){\n  .glass-nav-links{\n    right: 5%;\n    left: 5%;\n    width: auto;\n    max-width: none;\n    top: 75px;\n  }\n}\n\n<\/style>\n\n<script>\n(function() {\n  const btn = document.getElementById('glassNavToggle');\n  const menu = document.getElementById('glassNavLinks');\n\n  if (btn && menu) {\n\n    btn.addEventListener('click', function(e) {\n      e.stopPropagation();\n\n      const isActive = menu.classList.toggle('is-active');\n\n      const spans = btn.getElementsByTagName('span');\n\n      if (isActive) {\n        spans[0].style.transform = \"rotate(45deg) translate(5px, 5px)\";\n        spans[1].style.opacity = \"0\";\n        spans[2].style.transform = \"rotate(-45deg) translate(5px, -5px)\";\n        btn.style.background = \"rgba(0,0,0,0.1)\";\n      } else {\n        spans[0].style.transform = \"none\";\n        spans[1].style.opacity = \"1\";\n        spans[2].style.transform = \"none\";\n        btn.style.background = \"rgba(0,0,0,0.05)\";\n      }\n    });\n\n    document.addEventListener('click', (e) => {\n      if (!menu.contains(e.target) && menu.classList.contains('is-active')) {\n        btn.click();\n      }\n    });\n\n  }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1552b75 e-con-full e-flex e-con e-parent\" data-id=\"1552b75\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-37c2cd6 elementor-widget elementor-widget-html\" data-id=\"37c2cd6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"wpci-hero-section\">\n    <style>\n        \/* --- CORE WRAPPER --- *\/\n        #wpci-hero-section {\n            position: relative;\n            width: 100%;\n            margin: 0;\n            padding: 0;\n            overflow: hidden;\n            background-color: #000;\n            font-family: 'Segoe UI', Roboto, sans-serif;\n            \/* Desktop Default *\/\n            height: 80vh; \n            min-height: 450px;\n        }\n\n        #wpci-hero-section * {\n            box-sizing: border-box;\n        }\n\n        \/* --- SLIDE SYSTEM --- *\/\n        .wpci-slide {\n            position: absolute;\n            inset: 0; \/* Forces the slide to match parent size exactly *\/\n            width: 100%;\n            height: 100%;\n            opacity: 0;\n            visibility: hidden;\n            transition: opacity 1s ease-in-out;\n            z-index: 1;\n            padding: 0; \/* Ensures no internal gaps *\/\n            margin: 0;\n        }\n\n        .wpci-slide.active {\n            opacity: 1;\n            visibility: visible;\n            z-index: 2;\n        }\n\n        \/* --- THE ULTIMATE FILL FIX --- *\/\n        .wpci-bg-image {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%); \/* Centers the image *\/\n            min-width: 100%;\n            min-height: 100%;\n            width: 100%;\n            height: 100%;\n            object-fit: cover; \/* Forces the crop-to-fill behavior *\/\n            object-position: center;\n            filter: brightness(0.2);\n            display: block;\n        }\n\n        \/* --- CONTENT LAYER --- *\/\n        .wpci-content-wrapper {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            width: 90%;\n            max-width: 1100px;\n            text-align: center;\n            color: #ffffff;\n            z-index: 5;\n        }\n\n        .wpci-heading {\n            font-size: clamp(1.6rem, 6vw, 3.8rem); \n            font-weight: 800;\n            line-height: 1.2;\n            margin-bottom: 1rem;\n            text-transform: uppercase;\n            text-shadow: 0 4px 15px rgba(0,0,0,0.7);\n        }\n\n        .wpci-subtext {\n            font-size: clamp(0.95rem, 2.5vw, 1.3rem);\n            margin-bottom: 2rem;\n            max-width: 750px;\n            margin-left: auto;\n            margin-right: auto;\n            color: #f1f1f1;\n        }\n\n        .wpci-cta-btn {\n            display: inline-block;\n            background-color: #2E3092;\n            color: #ffffff;\n            text-decoration: none;\n            padding: 12px 35px;\n            border-radius: 4px;\n            font-weight: 600;\n            border: 2px solid #2E3092;\n            transition: 0.3s ease;\n        }\n\n        .wpci-cta-btn:hover {\n            background-color: transparent;\n            border-color: #ffffff;\n        }\n\n        \/* --- DOTS --- *\/\n        .wpci-nav-dots {\n            position: absolute;\n            bottom: 25px;\n            left: 50%;\n            transform: translateX(-50%);\n            display: flex;\n            gap: 12px;\n            z-index: 10;\n        }\n\n        .wpci-dot {\n            width: 12px;\n            height: 12px;\n            background-color: rgba(255, 255, 255, 0.4);\n            border-radius: 50%;\n            cursor: pointer;\n        }\n\n        .wpci-dot.active {\n            background-color: #2E3092;\n            border: 1px solid #fff;\n        }\n\n        \/* --- MOBILE SPECIFIC FIXES --- *\/\n        @media screen and (max-width: 768px) {\n            #wpci-hero-section {\n                height: 50vh; \/* Exactly half screen height *\/\n                height: 50dvh; \n                min-height: 320px;\n            }\n\n            \/* Forcing the image to ignore any inherited constraints *\/\n            .wpci-bg-image {\n                width: 100% !important;\n                height: 100% !important;\n                object-fit: cover !important;\n            }\n        }\n    <\/style>\n\n    <div class=\"wpci-slide active\">\n        <img decoding=\"async\" src=\"https:\/\/wpcipl.com\/wpc\/wp-content\/uploads\/2026\/01\/WhatsApp-Image-2025-09-28-at-9.10.09-PM.jpeg\" class=\"wpci-bg-image\" loading=\"lazy\">\n        <div class=\"wpci-content-wrapper\">\n            <h2 class=\"wpci-heading\">Water Power Consultant<\/h2>\n            <p class=\"wpci-subtext\">Progress through mapping and irrigation.<\/p>\n            <a href=\"#contact\" class=\"wpci-cta-btn\">Contact Us<\/a>\n        <\/div>\n    <\/div>\n\n    <div class=\"wpci-slide\">\n        <img decoding=\"async\" src=\"https:\/\/wpcipl.com\/wpc\/wp-content\/uploads\/2026\/01\/WhatsApp-Image-2025-09-29-at-6.52.40-PM.jpeg\" class=\"wpci-bg-image\" loading=\"lazy\">\n        <div class=\"wpci-content-wrapper\">\n            <h2 class=\"wpci-heading\">GIS Solutions<\/h2>\n            <p class=\"wpci-subtext\">Advanced technical infrastructure planning.<\/p>\n            <a href=\"#services\" class=\"wpci-cta-btn\">Our Services<\/a>\n        <\/div>\n    <\/div>\n\n    <div class=\"wpci-nav-dots\">\n        <div class=\"wpci-dot active\"><\/div>\n        <div class=\"wpci-dot\"><\/div>\n    <\/div>\n\n    <script>\n        (function() {\n            const slides = document.querySelectorAll('.wpci-slide');\n            const dots = document.querySelectorAll('.wpci-dot');\n            let current = 0;\n\n            function showSlide(index) {\n                slides[current].classList.remove('active');\n                dots[current].classList.remove('active');\n                current = (index + slides.length) % slides.length;\n                slides[current].classList.add('active');\n                dots[current].classList.add('active');\n            }\n\n            dots.forEach((dot, i) => {\n                dot.addEventListener('click', () => showSlide(i));\n            });\n\n            setInterval(() => showSlide(current + 1), 5000);\n        })();\n    <\/script>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3347ffa e-con-full e-flex e-con e-parent\" data-id=\"3347ffa\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-59a2466 elementor-widget elementor-widget-html\" data-id=\"59a2466\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"wpci-features-section\">\n    <style>\n        \/* --- SCOPED RESET & VARIABLES --- *\/\n        #wpci-features-section {\n            --wpci-blue: #2E3092;\n            --wpci-gray: #f8f9fa;\n            --wpci-text-dark: #333333;\n            --wpci-text-light: #666666;\n            \n            position: relative;\n            width: 100%;\n            padding: 80px 20px;\n            background-color: #ffffff;\n            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n            box-sizing: border-box;\n            overflow: hidden;\n        }\n\n        #wpci-features-section * {\n            box-sizing: border-box;\n        }\n\n        \/* --- CONTAINER --- *\/\n        .wpci-feat-container {\n            max-width: 1200px;\n            margin: 0 auto;\n            text-align: center;\n        }\n\n        \/* --- SECTION HEADING --- *\/\n        .wpci-header-wrap {\n            margin-bottom: 60px;\n            \/* Animation Init State *\/\n            opacity: 0;\n            transform: translateY(30px);\n            transition: all 0.8s ease-out;\n        }\n\n        \/* Class added by JS when visible *\/\n        .wpci-header-wrap.wpci-visible {\n            opacity: 1;\n            transform: translateY(0);\n        }\n\n        .wpci-feat-heading {\n            color: var(--wpci-blue);\n            font-size: 2.5rem;\n            font-weight: 700;\n            margin-bottom: 10px;\n            text-transform: uppercase;\n            position: relative;\n            display: inline-block;\n        }\n\n        .wpci-feat-heading::after {\n            content: '';\n            display: block;\n            width: 60px;\n            height: 4px;\n            background-color: var(--wpci-blue);\n            margin: 10px auto 0;\n            border-radius: 2px;\n        }\n\n        .wpci-feat-subheading {\n            color: var(--wpci-text-light);\n            font-size: 1.1rem;\n            max-width: 600px;\n            margin-left: auto;\n            margin-right: auto;\n        }\n\n        \/* --- GRID LAYOUT --- *\/\n        .wpci-feat-grid {\n            display: grid;\n            grid-template-columns: repeat(4, 1fr);\n            gap: 30px;\n            width: 100%;\n        }\n\n        \/* --- CARD DESIGN --- *\/\n        .wpci-feat-card {\n            background: #ffffff;\n            padding: 40px 20px;\n            border-radius: 12px;\n            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n            transition: transform 0.3s ease, box-shadow 0.3s ease; \/* Hover transition *\/\n            position: relative;\n            border-bottom: 4px solid transparent;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n\n            \/* Scroll Animation Init State *\/\n            opacity: 0;\n            transform: translateY(50px);\n            \/* The transition for the 'appear' effect *\/\n            transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s, border-bottom 0.3s;\n        }\n\n        \/* State when visible *\/\n        .wpci-feat-card.wpci-visible {\n            opacity: 1;\n            transform: translateY(0);\n        }\n\n        \/* Staggered Delays for \"Cool Note\" Effect *\/\n        .wpci-feat-card:nth-child(1) { transition-delay: 0.1s; }\n        .wpci-feat-card:nth-child(2) { transition-delay: 0.2s; }\n        .wpci-feat-card:nth-child(3) { transition-delay: 0.3s; }\n        .wpci-feat-card:nth-child(4) { transition-delay: 0.4s; }\n\n        .wpci-feat-card:hover {\n            transform: translateY(-10px) !important; \/* Override scroll transform on hover *\/\n            box-shadow: 0 15px 30px rgba(46, 48, 146, 0.15);\n            border-bottom: 4px solid var(--wpci-blue);\n        }\n\n        \/* --- ICON CIRCLE --- *\/\n        .wpci-icon-wrapper {\n            width: 80px;\n            height: 80px;\n            background-color: #eff2ff;\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin-bottom: 25px;\n            transition: background-color 0.3s ease;\n        }\n\n        .wpci-feat-card:hover .wpci-icon-wrapper {\n            background-color: var(--wpci-blue);\n        }\n\n        .wpci-feat-icon {\n            width: 40px;\n            height: 40px;\n            fill: var(--wpci-blue);\n            transition: fill 0.3s ease;\n        }\n\n        .wpci-feat-card:hover .wpci-feat-icon {\n            fill: #ffffff;\n        }\n\n        \/* --- TEXT --- *\/\n        .wpci-card-title {\n            font-size: 1.25rem;\n            font-weight: 700;\n            color: var(--wpci-text-dark);\n            margin-bottom: 15px;\n            text-transform: capitalize;\n        }\n\n        .wpci-card-desc {\n            font-size: 0.95rem;\n            color: var(--wpci-text-light);\n            line-height: 1.6;\n        }\n\n        \/* --- RESPONSIVE --- *\/\n        @media screen and (max-width: 992px) {\n            .wpci-feat-grid { grid-template-columns: repeat(2, 1fr); gap: 25px; }\n        }\n\n        @media screen and (max-width: 600px) {\n            #wpci-features-section { padding: 50px 20px; }\n            .wpci-feat-grid { grid-template-columns: 1fr; gap: 25px; }\n            .wpci-feat-heading { font-size: 1.8rem; }\n            \/* Remove stagger on mobile for faster loading feeling *\/\n            .wpci-feat-card:nth-child(n) { transition-delay: 0s; }\n        }\n    <\/style>\n\n    <div class=\"wpci-feat-container\">\n        <div class=\"wpci-header-wrap\" id=\"wpci-header-anim\">\n            <h2 class=\"wpci-feat-heading\">Why Choose Us<\/h2>\n            <p class=\"wpci-feat-subheading\">Delivering excellence through expertise and innovation in water power consultancy.<\/p>\n        <\/div>\n\n        <div class=\"wpci-feat-grid\" id=\"wpci-grid-anim\">\n            \n            <div class=\"wpci-feat-card\">\n                <div class=\"wpci-icon-wrapper\">\n                    <svg class=\"wpci-feat-icon\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M19,3H14.82C14.4,1.84 13.3,1 12,1C10.7,1 9.6,1.84 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z\"><\/path><\/svg>\n                <\/div>\n                <h3 class=\"wpci-card-title\">Projects Done<\/h3>\n                <p class=\"wpci-card-desc\">We have successfully completed numerous complex hydroelectric surveys and infrastructure projects across India.<\/p>\n            <\/div>\n\n            <div class=\"wpci-feat-card\">\n                <div class=\"wpci-icon-wrapper\">\n                    <svg class=\"wpci-feat-icon\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14M12,2A6,6 0 0,0 6,8A6,6 0 0,0 12,14A6,6 0 0,0 18,8A6,6 0 0,0 12,2M12,16C9.97,16 7.14,16.85 6.33,18H17.67C16.86,16.85 14.03,16 12,16Z\"><\/path><\/svg>\n                <\/div>\n                <h3 class=\"wpci-card-title\">Expert Workers<\/h3>\n                <p class=\"wpci-card-desc\">Our team consists of veteran geologists, engineers, and consultants dedicated to technical excellence and safety.<\/p>\n            <\/div>\n\n            <div class=\"wpci-feat-card\">\n                <div class=\"wpci-icon-wrapper\">\n                    <svg class=\"wpci-feat-icon\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M22.7,19L13.6,9.9C14.5,7.6 14,4.9 12.1,3C10.1,1 7.1,0.6 4.7,1.7L9,6L6,9L1.6,4.7C0.4,7.1 0.9,10.1 2.9,12.1C4.8,14 7.5,14.5 9.8,13.6L18.9,22.7C19.3,23.1 19.9,23.1 20.3,22.7L22.6,20.4C23.1,20 23.1,19.3 22.7,19Z\"><\/path><\/svg>\n                <\/div>\n                <h3 class=\"wpci-card-title\">High End Tools<\/h3>\n                <p class=\"wpci-card-desc\">We utilize state-of-the-art surveying equipment and modern simulation software to ensure data accuracy.<\/p>\n            <\/div>\n\n            <div class=\"wpci-feat-card\">\n                <div class=\"wpci-icon-wrapper\">\n                    <svg class=\"wpci-feat-icon\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M15.5,13.5A1.5,1.5 0 0,1 14,15A1.5,1.5 0 0,1 12.5,13.5A1.5,1.5 0 0,1 14,12A1.5,1.5 0 0,1 15.5,13.5M8.5,13.5A1.5,1.5 0 0,1 10,12A1.5,1.5 0 0,1 11.5,13.5A1.5,1.5 0 0,1 10,15A1.5,1.5 0 0,1 8.5,13.5M12,17C10,17 8.35,15.86 7.5,14H16.5C15.65,15.86 14,17 12,17Z\"><\/path><\/svg>\n                <\/div>\n                <h3 class=\"wpci-card-title\">Happy Customers<\/h3>\n                <p class=\"wpci-card-desc\">Our client-centric approach has built long-lasting relationships with government bodies and private enterprises alike.<\/p>\n            <\/div>\n\n        <\/div>\n    <\/div>\n\n    <script>\n        (function() {\n            \/\/ Options for the observer (trigger when 10% of the item is visible)\n            var options = {\n                root: null,\n                rootMargin: '0px',\n                threshold: 0.1\n            };\n\n            \/\/ Callback function to handle the intersection\n            var observerCallback = function(entries, observer) {\n                entries.forEach(function(entry) {\n                    if (entry.isIntersecting) {\n                        entry.target.classList.add('wpci-visible');\n                        \/\/ Optional: Stop observing once animated\n                        observer.unobserve(entry.target); \n                    }\n                });\n            };\n\n            \/\/ Create the observer\n            var observer = new IntersectionObserver(observerCallback, options);\n\n            \/\/ Observe the header\n            var header = document.getElementById('wpci-header-anim');\n            if(header) observer.observe(header);\n\n            \/\/ Observe each card individually\n            var cards = document.querySelectorAll('.wpci-feat-card');\n            cards.forEach(function(card) {\n                observer.observe(card);\n            });\n        })();\n    <\/script>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-66ed512 e-con-full e-flex e-con e-parent\" data-id=\"66ed512\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e66c8d2 elementor-widget elementor-widget-html\" data-id=\"e66c8d2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"wpci-sq-services\">\n    <style>\n        \/* --- SCOPED RESET & VARIABLES --- *\/\n        #wpci-sq-services {\n            --wpci-blue: #2E3092;\n            --wpci-blue-overlay: rgba(46, 48, 146, 0.9);\n            --wpci-text-light: #ffffff;\n            \n            position: relative;\n            width: 100vw;\n            min-height: 100vh;\n            padding: 80px 0;\n            background-color: #f9f9f9;\n            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n            box-sizing: border-box;\n            overflow-x: hidden;\n            \n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n        }\n\n        #wpci-sq-services * {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n        }\n\n        \/* --- HEADER --- *\/\n        .wpci-sq-header {\n            text-align: center;\n            margin-bottom: 50px;\n            padding: 0 20px;\n            opacity: 0;\n            transform: translateY(30px);\n            transition: all 0.8s ease-out;\n        }\n\n        .wpci-sq-header.wpci-visible {\n            opacity: 1;\n            transform: translateY(0);\n        }\n\n        .wpci-sq-title {\n            color: var(--wpci-blue);\n            font-size: 3rem;\n            font-weight: 800;\n            text-transform: uppercase;\n            letter-spacing: 2px;\n            margin-bottom: 15px;\n        }\n\n        .wpci-sq-subtitle {\n            color: #555;\n            font-size: 1.1rem;\n            max-width: 800px;\n            margin: 0 auto;\n        }\n\n        \/* --- FLUID GRID --- *\/\n        .wpci-sq-grid {\n            display: grid;\n            width: 95%;\n            max-width: 1800px;\n            margin: 0 auto;\n            grid-template-columns: repeat(3, 1fr);\n            gap: 20px;\n        }\n\n        \/* --- SQUARE CARD --- *\/\n        .wpci-sq-card {\n            position: relative;\n            width: 100%;\n            aspect-ratio: 1 \/ 1;\n            overflow: hidden;\n            background: #000;\n            cursor: pointer;\n            border-radius: 4px;\n            \n            opacity: 0;\n            transform: translateY(50px);\n            transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n        }\n\n        .wpci-sq-card.wpci-visible {\n            opacity: 1;\n            transform: translateY(0);\n            position: relative;\n        }\n\n        \/* Image \u2013 force full fill always *\/\n        .wpci-sq-img{\n            position: absolute;\n            inset: 0;\n            width: 100%;\n            height: 100%;\n            min-width: 100%;\n            min-height: 100%;\n            object-fit: cover;\n            object-position: center;\n            display: block;\n            transition: transform 0.6s ease;\n        }\n\n        \/* Zoom Effect on Hover *\/\n        .wpci-sq-card:hover .wpci-sq-img {\n            transform: scale(1.1);\n        }\n\n        \/* --- OVERLAY CAPTION --- *\/\n        .wpci-sq-overlay {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background-color: var(--wpci-blue-overlay);\n            \n            display: flex;\n            align-items: center;\n            justify-content: center;\n            padding: 30px;\n            text-align: center;\n            \n            opacity: 0;\n            backdrop-filter: blur(2px);\n            transition: opacity 0.4s ease;\n        }\n\n        .wpci-sq-card:hover .wpci-sq-overlay {\n            opacity: 1;\n        }\n\n        .wpci-sq-caption-text {\n            color: var(--wpci-text-light);\n            font-size: 1.5rem;\n            font-weight: 700;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            border: 2px solid rgba(255,255,255,0.3);\n            padding: 20px 10px;\n            width: 100%;\n            \n            transform: translateY(20px);\n            transition: transform 0.4s ease 0.1s;\n        }\n\n        .wpci-sq-card:hover .wpci-sq-caption-text {\n            transform: translateY(0);\n            border-color: #ffffff;\n        }\n\n        \/* -----------------------------\n           RESPONSIVE (improved only)\n        ------------------------------ *\/\n\n        @media screen and (max-width: 1024px) {\n            .wpci-sq-grid {\n                grid-template-columns: repeat(2, 1fr);\n                gap: 18px;\n            }\n\n            .wpci-sq-title { \n                font-size: 2.4rem; \n            }\n\n            .wpci-sq-caption-text {\n                font-size: 1.35rem;\n                padding: 18px 10px;\n            }\n        }\n\n        @media screen and (max-width: 600px) {\n\n            #wpci-sq-services{\n                padding: 60px 0;\n            }\n\n            .wpci-sq-grid {\n                width: 92%;\n                grid-template-columns: 1fr;\n                gap: 26px;\n            }\n            \n            .wpci-sq-title { \n                font-size: 1.9rem; \n            }\n\n            .wpci-sq-subtitle{\n                font-size: 1rem;\n            }\n\n            .wpci-sq-card {\n                aspect-ratio: 1 \/ 1;\n            }\n            \n            .wpci-sq-caption-text {\n                font-size: 1.2rem;\n                padding: 16px 8px;\n            }\n        }\n    <\/style>\n\n    <div class=\"wpci-sq-header\" id=\"wpci-sq-header-trigger\">\n        <h2 class=\"wpci-sq-title\">Our Expertise<\/h2>\n        <p class=\"wpci-sq-subtitle\">Delivering precision engineering and consulting services across six key sectors.<\/p>\n    <\/div>\n\n    <div class=\"wpci-sq-grid\">\n        \n        <div class=\"wpci-sq-card\">\n            <img decoding=\"async\" src=\"https:\/\/wpcipl.com\/wpc\/wp-content\/uploads\/2026\/01\/DPWH-forms-special-team-to-pursue-contractors-in-flood-control-anomalies.jpeg\" alt=\"Civil Engineering\" class=\"wpci-sq-img\" loading=\"lazy\">\n            <div class=\"wpci-sq-overlay\">\n                <div class=\"wpci-sq-caption-text\">Civil Engineering<\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"wpci-sq-card\">\n            <img decoding=\"async\" src=\"https:\/\/wpcipl.com\/wpc\/wp-content\/uploads\/2026\/01\/Dgps-during-cancel-survey.jpeg\" alt=\"Ecology\" class=\"wpci-sq-img\" loading=\"lazy\">\n            <div class=\"wpci-sq-overlay\">\n                <div class=\"wpci-sq-caption-text\">Ecology &amp;<br>Environment<\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"wpci-sq-card\">\n            <img decoding=\"async\" src=\"https:\/\/wpcipl.com\/wpc\/wp-content\/uploads\/2026\/01\/%F0%9F%92%A1-Efficiency-That-Pays-Off-in-the-Field-%F0%9F%8C%BD.jpeg\" alt=\"Irrigation\" class=\"wpci-sq-img\" loading=\"lazy\">\n            <div class=\"wpci-sq-overlay\">\n                <div class=\"wpci-sq-caption-text\">Irrigation &amp;<br>Water Mgmt<\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"wpci-sq-card\">\n            <img decoding=\"async\" src=\"https:\/\/wpcipl.com\/wpc\/wp-content\/uploads\/2026\/01\/panipanchayat-meeting-for-irrigation-canal-planning-4.jpeg\" alt=\"Socio Economic\" class=\"wpci-sq-img\" loading=\"lazy\">\n            <div class=\"wpci-sq-overlay\">\n                <div class=\"wpci-sq-caption-text\">Socio Economic<br>Studies<\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"wpci-sq-card\">\n            <img decoding=\"async\" src=\"https:\/\/wpcipl.com\/wpc\/wp-content\/uploads\/2026\/01\/Panipanchayat-meeting-for-irrigation-canal-planning-3.jpeg\" alt=\"Urban Development\" class=\"wpci-sq-img\" loading=\"lazy\">\n            <div class=\"wpci-sq-overlay\">\n                <div class=\"wpci-sq-caption-text\">Urban<br>Development<\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"wpci-sq-card\">\n            <img decoding=\"async\" src=\"https:\/\/wpcipl.com\/wpc\/wp-content\/uploads\/2026\/01\/aiease_1769752941281.jpg\" alt=\"GIS Mapping\" class=\"wpci-sq-img\" loading=\"lazy\">\n            <div class=\"wpci-sq-overlay\">\n                <div class=\"wpci-sq-caption-text\">GIS, GPS &amp;<br>Reprographics<\/div>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n    <script>\n        (function() {\n            var observerOptions = {\n                root: null,\n                rootMargin: '0px',\n                threshold: 0.1\n            };\n\n            var observer = new IntersectionObserver(function(entries, observer) {\n                entries.forEach(function(entry) {\n                    if (entry.isIntersecting) {\n                        entry.target.classList.add('wpci-visible');\n                        observer.unobserve(entry.target);\n                    }\n                });\n            }, observerOptions);\n\n            var header = document.getElementById('wpci-sq-header-trigger');\n            if(header) observer.observe(header);\n\n            var cards = document.querySelectorAll('.wpci-sq-card');\n            cards.forEach(function(card, index) {\n                if (window.innerWidth > 600) {\n                    card.style.transitionDelay = (index * 0.1) + 's';\n                }\n                observer.observe(card);\n            });\n        })();\n    <\/script>\n<\/section>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-15a0d19 e-con-full e-flex e-con e-parent\" data-id=\"15a0d19\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6ec2628 elementor-widget elementor-widget-html\" data-id=\"6ec2628\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"wpci-why-split\">\n    <style>\n        #wpci-why-split {\n            --wpci-blue: #2E3092;\n            --wpci-text-dark: #333333;\n            --wpci-text-light: #555555;\n            --wpci-bg-light: #ffffff;\n            --wpci-icon-bg: #eef0ff;\n            \n            width: 100%;\n            overflow: hidden;\n            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n            background-color: var(--wpci-bg-light);\n            margin: 0;\n            padding: 0;\n        }\n\n        #wpci-why-split * { box-sizing: border-box; }\n\n        .wpci-split-container {\n            display: flex;\n            align-items: center; \/* Vertically centers content against the square image *\/\n            width: 100%;\n            max-width: 1400px; \/* Optional: prevents section from being too wide on ultra-wide screens *\/\n            margin: 0 auto;\n        }\n\n        \/* --- CONTENT SIDE --- *\/\n        .wpci-split-content {\n            flex: 1;\n            padding: 60px;\n            order: 1;\n        }\n\n        .wpci-split-heading {\n            color: var(--wpci-blue);\n            font-size: clamp(1.8rem, 4vw, 2.5rem);\n            font-weight: 800;\n            text-transform: uppercase;\n            margin-bottom: 25px;\n            line-height: 1.2;\n        }\n\n        .wpci-split-heading::after {\n            content: '';\n            display: block;\n            width: 70px;\n            height: 5px;\n            background-color: var(--wpci-blue);\n            margin-top: 15px;\n            border-radius: 2px;\n        }\n\n        .wpci-split-intro {\n            font-size: 1.05rem;\n            color: var(--wpci-text-light);\n            line-height: 1.6;\n            margin-bottom: 40px;\n        }\n\n        .wpci-split-points { list-style: none; padding: 0; margin: 0; }\n\n        .wpci-split-point-item {\n            display: flex;\n            align-items: flex-start;\n            margin-bottom: 25px;\n        }\n\n        .wpci-point-icon-box {\n            flex-shrink: 0;\n            width: 48px;\n            height: 48px;\n            background-color: var(--wpci-icon-bg);\n            border-radius: 10px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin-right: 18px;\n            transition: all 0.3s ease;\n        }\n\n        .wpci-split-point-item:hover .wpci-point-icon-box {\n            transform: translateY(-3px);\n            background-color: var(--wpci-blue);\n        }\n\n        .wpci-svg-icon {\n            width: 24px;\n            height: 24px;\n            fill: var(--wpci-blue);\n            transition: fill 0.3s;\n        }\n\n        .wpci-split-point-item:hover .wpci-svg-icon { fill: #ffffff; }\n\n        .wpci-point-title {\n            font-size: 1.1rem;\n            font-weight: 700;\n            color: var(--wpci-text-dark);\n            margin-bottom: 4px;\n            display: block;\n        }\n\n        .wpci-point-desc {\n            font-size: 0.95rem;\n            color: var(--wpci-text-light);\n            line-height: 1.5;\n        }\n\n        \/* --- THE SQUARE IMAGE SIDE --- *\/\n        .wpci-image-wrapper {\n            flex: 0 0 50%; \/* Take exactly half width on desktop *\/\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            padding: 40px; \/* Adds space around the square *\/\n            order: 2;\n        }\n\n        .wpci-square-box {\n            width: 100%;\n            max-width: 600px; \/* Max size for the square *\/\n            aspect-ratio: 1 \/ 1; \/* FORCES SQUARE SHAPE *\/\n            background-image: url('https:\/\/wpcipl.com\/wpc\/wp-content\/uploads\/2026\/01\/serive-profile-wpcipl.png');\n            background-size: cover;\n            background-position: center;\n            border-radius: 20px; \/* Optional rounded corners *\/\n            box-shadow: 0 20px 40px rgba(0,0,0,0.1);\n        }\n\n        \/* --- RESPONSIVE --- *\/\n        @media screen and (max-width: 992px) {\n            .wpci-split-container {\n                flex-direction: column;\n            }\n\n            .wpci-image-wrapper {\n                width: 100%;\n                order: 1;\n                padding: 40px 20px 0 20px;\n            }\n\n            .wpci-square-box {\n                max-width: 500px; \/* Square size on tablets *\/\n            }\n\n            .wpci-split-content {\n                order: 2;\n                padding: 40px 30px;\n                text-align: center;\n            }\n            \n            .wpci-split-heading::after { margin: 15px auto 0; }\n            \n            .wpci-split-point-item { text-align: left; }\n        }\n\n        @media screen and (max-width: 480px) {\n            .wpci-square-box {\n                max-width: 100%; \/* Full width square on mobile *\/\n            }\n            .wpci-split-content { padding: 30px 20px; }\n        }\n    <\/style>\n\n    <div class=\"wpci-split-container\">\n        <div class=\"wpci-split-content\">\n            <h2 class=\"wpci-split-heading\">Why Choose Us<\/h2>\n            <p class=\"wpci-split-intro\">With decades of combined experience in geotechnical and hydroelectric engineering, WPCIPL turns complex challenges into sustainable solutions.<\/p>\n\n            <ul class=\"wpci-split-points\">\n                <li class=\"wpci-split-point-item\">\n                    <div class=\"wpci-point-icon-box\">\n                        <svg class=\"wpci-svg-icon\" viewbox=\"0 0 24 24\"><path d=\"M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14M12,2A6,6 0 0,0 6,8A6,6 0 0,0 12,14A6,6 0 0,0 18,8A6,6 0 0,0 12,2M12,16C9.97,16 7.14,16.85 6.33,18H17.67C16.86,16.85 14.03,16 12,16Z\"><\/path><\/svg>\n                    <\/div>\n                    <div class=\"wpci-point-content\">\n                        <span class=\"wpci-point-title\">Proven Technical Expertise<\/span>\n                        <span class=\"wpci-point-desc\">Our team comprises veteran engineers specializing in challenging terrain and soil investigation.<\/span>\n                    <\/div>\n                <\/li>\n\n                <li class=\"wpci-split-point-item\">\n                    <div class=\"wpci-point-icon-box\">\n                        <svg class=\"wpci-svg-icon\" viewbox=\"0 0 24 24\"><path d=\"M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4M12,6A6,6 0 0,0 6,12A6,6 0 0,0 12,18A6,6 0 0,0 18,12A6,6 0 0,0 12,6M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8Z\"><\/path><\/svg>\n                    <\/div>\n                    <div class=\"wpci-point-content\">\n                        <span class=\"wpci-point-title\">End-to-End Lifecycle<\/span>\n                        <span class=\"wpci-point-desc\">From feasibility studies to final commissioning, we manage every layer of the project.<\/span>\n                    <\/div>\n                <\/li>\n\n                <li class=\"wpci-split-point-item\">\n                    <div class=\"wpci-point-icon-box\">\n                        <svg class=\"wpci-svg-icon\" viewbox=\"0 0 24 24\"><path d=\"M17,8C8,10 5.9,16.17 3.82,21.34L5.71,22L6.66,19.7C7.14,19.87 7.64,20 8,20C19,20 22,3 22,3C21,5 14,5.25 9,6.25C4,7.25 2,11.5 2,13.5C2,15.5 3.75,17.25 3.75,17.25C7,8 17,8 17,8Z\"><\/path><\/svg>\n                    <\/div>\n                    <div class=\"wpci-point-content\">\n                        <span class=\"wpci-point-title\">Commitment to Sustainability<\/span>\n                        <span class=\"wpci-point-desc\">Power solutions that balance energy needs with ecological preservation.<\/span>\n                    <\/div>\n                <\/li>\n            <\/ul>\n        <\/div>\n\n        <div class=\"wpci-image-wrapper\">\n            <div class=\"wpci-square-box\"><\/div>\n        <\/div>\n    <\/div>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a8575d4 e-con-full e-flex e-con e-parent\" data-id=\"a8575d4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e855240 elementor-widget elementor-widget-html\" data-id=\"e855240\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"wpci-projects-full\">\n    <style>\n        \/* --- SCOPED RESET & VARIABLES --- *\/\n        #wpci-projects-full {\n            --wpci-blue: #2E3092; \/* Logo Blue *\/\n            --wpci-blue-dark: #1a1b50;\n            --wpci-bg: #f8f9fa;\n            --wpci-text-main: #333333;\n            --wpci-text-light: #666666;\n            \n            position: relative;\n            width: 100vw;\n            padding: 80px 0; \/* Vertical padding only *\/\n            background-color: var(--wpci-bg);\n            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n            box-sizing: border-box;\n            overflow-x: hidden;\n        }\n\n        #wpci-projects-full * {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n        }\n\n        \/* --- HEADER SECTION --- *\/\n        .wpci-proj-header {\n            text-align: center;\n            margin-bottom: 60px;\n            padding: 0 20px;\n            opacity: 0;\n            transform: translateY(30px);\n            transition: all 0.8s ease-out;\n        }\n\n        .wpci-proj-header.wpci-visible {\n            opacity: 1;\n            transform: translateY(0);\n        }\n\n        .wpci-proj-title {\n            color: var(--wpci-blue);\n            font-size: 3rem; \/* Larger title for full width *\/\n            font-weight: 800;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            margin-bottom: 10px;\n            display: inline-block;\n            position: relative;\n        }\n\n        .wpci-proj-title::after {\n            content: '';\n            display: block;\n            width: 80px;\n            height: 5px;\n            background-color: var(--wpci-blue);\n            margin: 15px auto 0;\n            border-radius: 2px;\n        }\n\n        .wpci-proj-subtitle {\n            font-size: 1.3rem;\n            color: var(--wpci-text-light);\n            font-style: italic; \n        }\n\n        \/* --- FLUID GRID LAYOUT --- *\/\n        .wpci-proj-grid {\n            display: grid;\n            width: 96%; \/* FULL WIDTH SETTING *\/\n            margin: 0 auto;\n            grid-template-columns: repeat(3, 1fr); \/* 3 Columns *\/\n            gap: 20px; \/* Tighter gap for modern look *\/\n        }\n\n        \/* --- PROJECT CARD --- *\/\n        .wpci-proj-card {\n            position: relative;\n            background: #fff;\n            border-radius: 6px;\n            overflow: hidden;\n            box-shadow: 0 4px 10px rgba(0,0,0,0.05);\n            cursor: pointer;\n            \n            \/* Aspect Ratio 3:2 (Fixed shape, fluid size) *\/\n            aspect-ratio: 3 \/ 2;\n            \n            \/* Animation Init *\/\n            opacity: 0;\n            transform: translateY(40px);\n            transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.6s ease-out, transform 0.6s ease-out;\n        }\n\n        .wpci-proj-card.wpci-visible {\n            opacity: 1;\n            transform: translateY(0);\n        }\n\n        .wpci-proj-card:hover {\n            transform: translateY(-8px);\n            box-shadow: 0 20px 40px rgba(46, 48, 146, 0.25);\n            z-index: 2; \/* Bring to front *\/\n        }\n\n        \/* Image *\/\n        .wpci-proj-img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            transition: transform 0.8s ease;\n        }\n\n        .wpci-proj-card:hover .wpci-proj-img {\n            transform: scale(1.1);\n        }\n\n        \/* --- HOVER OVERLAY --- *\/\n        .wpci-proj-overlay {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            \/* Gradient: Transparent top -> Blue bottom *\/\n            background: linear-gradient(to top, rgba(46, 48, 146, 0.95), rgba(46, 48, 146, 0.2));\n            opacity: 0;\n            display: flex;\n            flex-direction: column;\n            justify-content: flex-end;\n            padding: 30px;\n            transition: opacity 0.4s ease;\n        }\n\n        .wpci-proj-card:hover .wpci-proj-overlay {\n            opacity: 1;\n        }\n\n        .wpci-proj-name {\n            color: #fff;\n            font-size: 1.6rem;\n            font-weight: 700;\n            margin-bottom: 5px;\n            transform: translateY(20px);\n            transition: transform 0.4s ease 0.1s;\n        }\n\n        .wpci-proj-loc {\n            color: #e0e0e0;\n            font-size: 1rem;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            transform: translateY(20px);\n            transition: transform 0.4s ease 0.2s;\n        }\n\n        .wpci-proj-card:hover .wpci-proj-name,\n        .wpci-proj-card:hover .wpci-proj-loc {\n            transform: translateY(0);\n        }\n\n        \/* --- RESPONSIVE MEDIA QUERIES --- *\/\n        \n        \/* Large Desktop (Ultra Wide) - Optional: Go to 4 columns *\/\n        @media screen and (min-width: 1600px) {\n            .wpci-proj-grid {\n                 grid-template-columns: repeat(4, 1fr);\n            }\n        }\n\n        \/* Tablet (max-width: 992px) *\/\n        @media screen and (max-width: 992px) {\n            .wpci-proj-grid {\n                grid-template-columns: repeat(2, 1fr);\n                width: 94%;\n                gap: 20px;\n            }\n        }\n\n        \/* Mobile (max-width: 600px) *\/\n        @media screen and (max-width: 600px) {\n            #wpci-projects-full {\n                padding: 50px 0;\n            }\n            .wpci-proj-grid {\n                grid-template-columns: 1fr; \/* 1 Column Stack *\/\n                width: 92%;\n                gap: 25px;\n            }\n            .wpci-proj-title {\n                font-size: 2rem;\n            }\n            .wpci-proj-card {\n                 \/* On mobile, standard 3:2 might be small, let's make it slightly taller? \n                    Keeping 3:2 for consistency with sketch. *\/\n                aspect-ratio: 3 \/ 2; \n            }\n        }\n    <\/style>\n\n    <div class=\"wpci-proj-header\" id=\"wpci-proj-header-trigger\">\n        <h2 class=\"wpci-proj-title\">Our Projects<\/h2>\n        <p class=\"wpci-proj-subtitle\">Visit our Latest<\/p>\n    <\/div>\n\n    <div class=\"wpci-proj-grid\">\n\n        <div class=\"wpci-proj-card\">\n            <img decoding=\"async\" src=\"https:\/\/wpcipl.com\/wpc\/wp-content\/uploads\/2026\/01\/Total-station.jpg\" alt=\"Dam Project\" class=\"wpci-proj-img\" loading=\"lazy\">\n            <div class=\"wpci-proj-overlay\">\n                <h3 class=\"wpci-proj-name\">Road construction<\/h3>\n                <p class=\"wpci-proj-loc\"><\/p>\n            <\/div>\n        <\/div>\n\n        <div class=\"wpci-proj-card\">\n            <img decoding=\"async\" src=\"https:\/\/wpcipl.com\/wpc\/wp-content\/uploads\/2026\/01\/River_lake_pond-survey.jpg\" alt=\"Survey Work\" class=\"wpci-proj-img\" loading=\"lazy\">\n            <div class=\"wpci-proj-overlay\">\n                <h3 class=\"wpci-proj-name\">River Basin Survey<\/h3>\n                <p class=\"wpci-proj-loc\">Odisha, India<\/p>\n            <\/div>\n        <\/div>\n\n        <div class=\"wpci-proj-card\">\n            <img decoding=\"async\" src=\"https:\/\/wpcipl.com\/wpc\/wp-content\/uploads\/2026\/01\/DGPS-during-canal-survey-in-irrigated-land-2-1.jpeg\" alt=\"Canal Network\" class=\"wpci-proj-img\" loading=\"lazy\">\n            <div class=\"wpci-proj-overlay\">\n                <h3 class=\"wpci-proj-name\">Canal Irrigation Network<\/h3>\n                <p class=\"wpci-proj-loc\"><\/p>\n            <\/div>\n        <\/div>\n\n        <div class=\"wpci-proj-card\">\n            <img decoding=\"async\" src=\"https:\/\/wpcipl.com\/wpc\/wp-content\/uploads\/2026\/01\/%F0%9F%92%A1-Efficiency-That-Pays-Off-in-the-Field-%F0%9F%8C%BD-1.jpeg\" alt=\"Urban Water\" class=\"wpci-proj-img\" loading=\"lazy\">\n            <div class=\"wpci-proj-overlay\">\n                <h3 class=\"wpci-proj-name\">Urban Water Supply<\/h3>\n                <p class=\"wpci-proj-loc\">Bhubaneswar, Odisha<\/p>\n            <\/div>\n        <\/div>\n\n        <div class=\"wpci-proj-card\">\n            <img decoding=\"async\" src=\"https:\/\/wpcipl.com\/wpc\/wp-content\/uploads\/2026\/01\/topografia-curvas-de-nivel.jpeg\" alt=\"Eco Study\" class=\"wpci-proj-img\" loading=\"lazy\">\n            <div class=\"wpci-proj-overlay\">\n                <h3 class=\"wpci-proj-name\">Eco-Impact Assessment<\/h3>\n                <p class=\"wpci-proj-loc\"><\/p>\n            <\/div>\n        <\/div>\n\n        <div class=\"wpci-proj-card\">\n            <img decoding=\"async\" src=\"https:\/\/wpcipl.com\/wpc\/wp-content\/uploads\/2026\/01\/aiease_1769752941281.jpg\" alt=\"Geo Mapping\" class=\"wpci-proj-img\" loading=\"lazy\">\n            <div class=\"wpci-proj-overlay\">\n                <h3 class=\"wpci-proj-name\">GIS Mapping Initiative<\/h3>\n                <p class=\"wpci-proj-loc\">Pan-India<\/p>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n    <script>\n        (function() {\n            \/\/ Observer Logic\n            var observerOptions = {\n                root: null,\n                rootMargin: '0px',\n                threshold: 0.1\n            };\n\n            var observer = new IntersectionObserver(function(entries, observer) {\n                entries.forEach(function(entry) {\n                    if (entry.isIntersecting) {\n                        entry.target.classList.add('wpci-visible');\n                        observer.unobserve(entry.target);\n                    }\n                });\n            }, observerOptions);\n\n            \/\/ Trigger Header\n            var header = document.getElementById('wpci-proj-header-trigger');\n            if(header) observer.observe(header);\n\n            \/\/ Trigger Cards with Delay\n            var cards = document.querySelectorAll('.wpci-proj-card');\n            cards.forEach(function(card, index) {\n                \/\/ Stagger delay only on desktop\/tablet to prevent mobile waiting\n                if (window.innerWidth > 600) {\n                    var delay = (index % 3) * 0.15;\n                    card.style.transitionDelay = delay + 's';\n                }\n                observer.observe(card);\n            });\n        })();\n    <\/script>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7ae6589 e-con-full e-flex e-con e-parent\" data-id=\"7ae6589\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a9f9b40 elementor-widget elementor-widget-html\" data-id=\"a9f9b40\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"so-testimonials-section\">\n  <div class=\"so-container\">\n    <header class=\"so-header\">\n      <span class=\"so-subtitle\">TESTIMONIALS<\/span>\n      <h2 class=\"so-title\">What our clients say about WPCIPL.<\/h2>\n    <\/header>\n\n    <div class=\"so-grid\">\n      <article class=\"so-card\">\n        <div class=\"so-quote-icon\">\u201c<\/div>\n        <p class=\"so-feedback\">We\u2019ve relied on WPCIPL for site investigations for years. Their subsurface data is incredibly precise, ensuring our structural designs are always built on solid ground.<\/p>\n        <div class=\"so-profile\">\n          <img decoding=\"async\" src=\"\" alt=\"Pravat Mishra\" class=\"so-avatar\" loading=\"lazy\">\n          <h4 class=\"so-name\">Pravat Mishra<\/h4>\n          <span class=\"so-designation\">Project Director<\/span>\n        <\/div>\n      <\/article>\n\n      <article class=\"so-card\">\n        <div class=\"so-quote-icon\">\u201c<\/div>\n        <p class=\"so-feedback\">WPCIPL\u2019s expertise in soil stabilization and foundation engineering is top-notch. They solved complex ground settlement issues on our latest industrial project efficiently.<\/p>\n        <div class=\"so-profile\">\n          <img decoding=\"async\" src=\"\" alt=\"Mrs. Smriti Puhan\" class=\"so-avatar\" loading=\"lazy\">\n          <h4 class=\"so-name\">Mrs. Smriti Puhan<\/h4>\n          <span class=\"so-designation\">Consulting Engineer<\/span>\n        <\/div>\n      <\/article>\n\n      <article class=\"so-card\">\n        <div class=\"so-quote-icon\">\u201c<\/div>\n        <p class=\"so-feedback\">When we encountered unexpected strata during piling, WPCIPL provided an expert geotechnical assessment within hours, keeping our timeline and safety standards intact.<\/p>\n        <div class=\"so-profile\">\n          <img decoding=\"async\" src=\"\" alt=\"Parthasarathi Das\" class=\"so-avatar\" loading=\"lazy\">\n          <h4 class=\"so-name\">Parthasarathi Das<\/h4>\n          <span class=\"so-designation\">Infrastructure Lead<\/span>\n        <\/div>\n      <\/article>\n    <\/div>\n\n    \n  <\/div>\n<\/section>\n\n<style>\n  .so-testimonials-section {\n    background-color: #f8faff;\n    padding: 80px 20px;\n    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n    color: #1a2b4d;\n    text-align: center;\n  }\n\n  .so-container {\n    max-width: 1140px;\n    margin: 0 auto;\n  }\n\n  .so-subtitle {\n    display: block;\n    font-size: 13px;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    color: #2a3f6d;\n    font-weight: 700;\n    margin-bottom: 12px;\n  }\n\n  .so-title {\n    font-size: 36px;\n    font-weight: 800;\n    margin-bottom: 60px;\n    color: #1a2b4d;\n  }\n\n  .so-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 30px;\n    justify-content: center;\n    margin-bottom: 60px;\n  }\n\n  .so-card {\n    background: #ffffff;\n    padding: 45px 35px;\n    flex: 1;\n    min-width: 300px;\n    max-width: 360px;\n    box-shadow: 0 15px 35px rgba(26, 43, 77, 0.08);\n    border-radius: 8px;\n    display: flex;\n    flex-direction: column;\n    transition: transform 0.3s ease;\n  }\n\n  .so-card:hover {\n    transform: translateY(-5px);\n  }\n\n  .so-quote-icon {\n    color: #ffd700;\n    font-size: 60px;\n    line-height: 1;\n    margin-bottom: -10px;\n    font-family: 'Georgia', serif;\n  }\n\n  .so-feedback {\n    font-size: 16px;\n    line-height: 1.7;\n    color: #4a5568;\n    margin-bottom: 30px;\n    font-style: italic;\n    flex-grow: 1;\n  }\n\n  .so-profile {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    border-top: 1px solid #edf2f7;\n    padding-top: 20px;\n  }\n\n  .so-avatar {\n    width: 65px;\n    height: 65px;\n    border-radius: 50%;\n    object-fit: cover;\n    margin-bottom: 12px;\n    border: 3px solid #f8faff;\n    box-shadow: 0 4px 10px rgba(0,0,0,0.1);\n  }\n\n  .so-name {\n    font-size: 15px;\n    font-weight: 700;\n    color: #1a2b4d;\n    margin: 0;\n  }\n\n  .so-designation {\n    font-size: 12px;\n    color: #7d89a0;\n    text-transform: uppercase;\n    margin-top: 4px;\n    letter-spacing: 0.5px;\n  }\n\n  .so-footer-text {\n    font-size: 24px;\n    font-weight: 700;\n    margin-bottom: 15px;\n  }\n\n  .so-footer-desc {\n    max-width: 650px;\n    margin: 0 auto 35px;\n    font-size: 15px;\n    color: #4a5568;\n    line-height: 1.6;\n  }\n\n  .so-btn {\n    display: inline-block;\n    background-color: #1a2b4d;\n    color: #ffffff !important;\n    padding: 18px 40px;\n    text-decoration: none;\n    font-size: 14px;\n    font-weight: 700;\n    letter-spacing: 1.5px;\n    border-radius: 5px;\n    transition: all 0.3s ease;\n  }\n\n  .so-btn:hover {\n    background-color: #0056b3;\n    box-shadow: 0 5px 15px rgba(0, 86, 179, 0.3);\n  }\n\n  @media (max-width: 768px) {\n    .so-grid {\n      flex-direction: column;\n      align-items: center;\n    }\n    .so-card {\n      max-width: 100%;\n    }\n    .so-title {\n      font-size: 28px;\n    }\n  }\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3a294ae e-con-full e-flex e-con e-parent\" data-id=\"3a294ae\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9187e81 elementor-widget elementor-widget-html\" data-id=\"9187e81\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<footer>\n  <div id=\"custom-footer\">\n    <div class=\"footer-container\">\n      <div class=\"footer-section brand-info\">\n        <img decoding=\"async\" src=\"https:\/\/wpcipl.com\/wpc\/wp-content\/uploads\/2026\/01\/cropped-WPCIPL-LOGO.jpg\" alt=\"Company Logo\" class=\"footer-logo\" loading=\"lazy\">\n        <p>Providing quality services since 2007. Your success is our mission.<\/p>\n      <\/div>\n\n      <div class=\"footer-section\">\n        <h3>Quick Links<\/h3>\n        <ul class=\"footer-links\">\n          <li><a href=\"https:\/\/wpcipl.com\/wpc\/\">Home<\/a><\/li>\n          <li><a href=\"https:\/\/wpcipl.com\/wpc\/about-us\/\">About Us<\/a><\/li>\n          <li><a href=\"https:\/\/wpcipl.com\/wpc\/services\/\">Services<\/a><\/li>\n          <li><a href=\"https:\/\/wpcipl.com\/wpc\/contact-us\/\">Contact Us<\/a><\/li>\n        <\/ul>\n      <\/div>\n\n      <div class=\"footer-section\">\n        <h3>Contact Us<\/h3>\n        <div class=\"contact-item\">\n          <span>\ud83d\udccdFlat No.308, Krishna Mansion, Jharpara\n\nBhubaneswar, Odisha 751006<\/span>\n        <\/div>\n        <div class=\"contact-item\">\n          <span>\ud83d\udcde  +91-6742577815  -  9078091821<\/span>\n        <\/div>\n        <div class=\"contact-item\">\n          <span>\u2709\ufe0f info.wpcindia3@yahoogmail.com<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"footer-bottom\">\n      <p>\u00a9 <span id=\"footer-year\"><\/span> wpcipl. All rights reserved.<\/p>\n    <\/div>\n\n    <style>\n      \/* Scoped Styles to prevent website conflicts *\/\n      #custom-footer {\n        background-color: #003366; \/* Deep Blue *\/\n        color: #ffffff;\n        padding: 40px 20px 20px 20px;\n        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n      }\n\n      #custom-footer .footer-container {\n        max-width: 1200px;\n        margin: 0 auto;\n        display: flex;\n        flex-wrap: wrap; \/* Allows wrapping on mobile *\/\n        justify-content: space-between;\n        gap: 30px;\n      }\n\n      #custom-footer .footer-section {\n        flex: 1;\n        min-width: 200px; \/* Ensures items don't get too squished *\/\n      }\n\n      #custom-footer .footer-logo {\n        max-width: 150px;\n        margin-bottom: 15px;\n        \n      }\n\n      #custom-footer h3 {\n        color: #ffffff;\n        border-bottom: 2px solid #005ce6;\n        padding-bottom: 10px;\n        margin-bottom: 15px;\n        font-size: 1.2rem;\n      }\n\n      #custom-footer .footer-links {\n        list-style: none;\n        padding: 0;\n        margin: 0;\n      }\n\n      #custom-footer .footer-links li {\n        margin-bottom: 10px;\n      }\n\n      #custom-footer .footer-links a {\n        color: #e6f2ff;\n        text-decoration: none;\n        transition: color 0.3s ease;\n      }\n\n      #custom-footer .footer-links a:hover {\n        color: #ffffff;\n        text-decoration: underline;\n      }\n\n      #custom-footer .contact-item {\n        margin-bottom: 10px;\n        font-size: 0.95rem;\n        display: flex;\n        align-items: center;\n      }\n\n      #custom-footer .footer-bottom {\n        text-align: center;\n        margin-top: 40px;\n        padding-top: 20px;\n        border-top: 1px solid rgba(255, 255, 255, 0.1);\n        font-size: 0.85rem;\n      }\n\n      \/* Mobile Specific: Enforced Flex Column Layout *\/\n      @media (max-width: 768px) {\n        #custom-footer .footer-container {\n          flex-direction: column;\n          text-align: center;\n        }\n\n        #custom-footer .footer-section {\n          width: 100%;\n          margin-bottom: 20px;\n        }\n\n        #custom-footer h3 {\n          display: inline-block;\n        }\n\n        #custom-footer .contact-item {\n          justify-content: center;\n        }\n      }\n    <\/style>\n\n    <script>\n      (function() {\n        \/\/ Set current year automatically\n        const yearSpan = document.querySelector('#footer-year');\n        if (yearSpan) {\n          yearSpan.textContent = new Date().getFullYear();\n        }\n\n        \/\/ Example: Add a simple scroll-to-top console log or tracking\n        console.log(\"Custom Footer Initialized.\");\n      })();\n    <\/script>\n  <\/div>\n<\/footer>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<\/body>","protected":false},"excerpt":{"rendered":"<p>Home About Us Services Contact Us Water Power Consultant Progress through mapping and irrigation. Contact Us GIS Solutions Advanced technical infrastructure planning. Our Services Why Choose Us Delivering excellence through expertise and innovation in water power consultancy. Projects Done We have successfully completed numerous complex hydroelectric surveys and infrastructure projects across India. Expert Workers Our [&hellip;]<\/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":{"om_disable_all_campaigns":false,"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wpcipl.com\/wpc\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpcipl.com\/wpc\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wpcipl.com\/wpc\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wpcipl.com\/wpc\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpcipl.com\/wpc\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":5,"href":"https:\/\/wpcipl.com\/wpc\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":425,"href":"https:\/\/wpcipl.com\/wpc\/wp-json\/wp\/v2\/pages\/7\/revisions\/425"}],"wp:attachment":[{"href":"https:\/\/wpcipl.com\/wpc\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}