Civil33 Construction \u2014 Building the Future<\/title>\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\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 href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Sora:wght@600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n \r\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n 'primary-dark': '#1f2933',\r\n 'secondary-dark': '#111827',\r\n 'accent-orange': '#f97316',\r\n 'accent-light': '#fb923c',\r\n 'light-gray': '#f3f4f6',\r\n 'text-dark': '#0f172a',\r\n },\r\n fontFamily: {\r\n 'heading': ['Sora', 'sans-serif'],\r\n 'body': ['Inter', 'sans-serif'],\r\n },\r\n maxWidth: {\r\n 'container': '1280px',\r\n },\r\n animation: {\r\n 'fade-up': 'fadeUp 0.8s ease-out forwards',\r\n 'fade-up-delay-1': 'fadeUp 0.8s ease-out 0.15s forwards',\r\n 'fade-up-delay-2': 'fadeUp 0.8s ease-out 0.3s forwards',\r\n 'fade-up-delay-3': 'fadeUp 0.8s ease-out 0.45s forwards',\r\n },\r\n keyframes: {\r\n fadeUp: {\r\n '0%': { opacity: '0', transform: 'translateY(30px)' },\r\n '100%': { opacity: '1', transform: 'translateY(0)' },\r\n },\r\n },\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n :root {\r\n --primary-dark: #1f2933;\r\n --secondary-dark: #111827;\r\n --accent-orange: #f97316;\r\n --accent-light: #fb923c;\r\n --white: #ffffff;\r\n --light-gray: #f3f4f6;\r\n --text-dark: #0f172a;\r\n }\r\n\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n html { scroll-behavior: auto; }\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n color: var(--text-dark);\r\n overflow-x: hidden;\r\n }\r\n\r\n ::-webkit-scrollbar { width: 8px; }\r\n ::-webkit-scrollbar-track { background: var(--light-gray); }\r\n ::-webkit-scrollbar-thumb { background: var(--primary-dark); border-radius: 4px; }\r\n ::-webkit-scrollbar-thumb:hover { background: var(--accent-orange); }\r\n\r\n .reveal {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: opacity 0.8s ease-out, transform 0.8s ease-out;\r\n }\r\n .reveal.active {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .hero-overlay {\r\n background: linear-gradient(135deg, rgba(17, 24, 39, 0.92) 0%, rgba(31, 41, 51, 0.80) 100%);\r\n }\r\n\r\n .service-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 0;\r\n height: 4px;\r\n background: var(--accent-orange);\r\n transition: width 0.4s ease;\r\n }\r\n .service-card:hover::before {\r\n width: 100%;\r\n }\r\n\r\n .feature-icon-wrap {\r\n transition: background 0.3s ease, transform 0.3s ease;\r\n }\r\n .feature-box:hover .feature-icon-wrap {\r\n background: var(--accent-orange);\r\n transform: scale(1.1);\r\n }\r\n .feature-box:hover .feature-icon-wrap svg {\r\n color: white;\r\n }\r\n\r\n .project-card .project-overlay {\r\n opacity: 0;\r\n transition: opacity 0.4s ease;\r\n }\r\n .project-card:hover .project-overlay {\r\n opacity: 1;\r\n }\r\n .project-card:hover img {\r\n transform: scale(1.08);\r\n }\r\n\r\n .stat-item:hover .stat-number {\r\n color: var(--accent-orange);\r\n }\r\n\r\n .testimonial-card {\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n }\r\n .testimonial-card:hover {\r\n transform: translateY(-6px);\r\n box-shadow: 0 20px 40px rgba(0,0,0,0.1);\r\n }\r\n\r\n .mobile-menu {\r\n transform: translateX(100%);\r\n transition: transform 0.3s ease;\r\n }\r\n .mobile-menu.open {\r\n transform: translateX(0);\r\n }\r\n\r\n .btn-shine {\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n .btn-shine::after {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n left: -75%;\r\n width: 50%;\r\n height: 200%;\r\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);\r\n transform: skewX(-25deg);\r\n transition: left 0.5s ease;\r\n }\r\n .btn-shine:hover::after {\r\n left: 125%;\r\n }\r\n\r\n .noise-overlay {\r\n background-image: url('https:\/\/grainy-gradients.vercel.app\/noise.svg');\r\n opacity: 0.04;\r\n mix-blend-mode: overlay;\r\n pointer-events: none;\r\n }\r\n\r\n .filter-btn.active {\r\n background: var(--accent-orange);\r\n color: white;\r\n border-color: var(--accent-orange);\r\n }\r\n\r\n .form-input:focus {\r\n border-color: var(--accent-orange);\r\n box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);\r\n }\r\n\r\n .img-zoom {\r\n transition: transform 0.6s ease;\r\n }\r\n\r\n @keyframes pulseRing {\r\n 0% { transform: scale(1); opacity: 0.5; }\r\n 100% { transform: scale(1.5); opacity: 0; }\r\n }\r\n .pulse-ring::before {\r\n content: '';\r\n position: absolute;\r\n inset: -4px;\r\n border: 2px solid var(--accent-orange);\r\n border-radius: inherit;\r\n animation: pulseRing 2s ease-out infinite;\r\n }\r\n\r\n .process-line {\r\n position: absolute;\r\n left: 24px;\r\n top: 60px;\r\n bottom: 0;\r\n width: 2px;\r\n background: linear-gradient(to bottom, var(--accent-orange), #e5e7eb);\r\n }\r\n @media (min-width: 1024px) {\r\n .process-line {\r\n top: 0;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 2px;\r\n height: 100%;\r\n }\r\n }\r\n\r\n .project-modal {\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: opacity 0.3s ease;\r\n }\r\n .project-modal.open {\r\n opacity: 1;\r\n pointer-events: auto;\r\n }\r\n .project-modal .modal-content {\r\n transform: translateY(30px) scale(0.95);\r\n transition: transform 0.3s ease;\r\n }\r\n .project-modal.open .modal-content {\r\n transform: translateY(0) scale(1);\r\n }\r\n\r\n .contact-info-card {\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n }\r\n .contact-info-card:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 0 12px 24px rgba(0,0,0,0.06);\r\n }\r\n\r\n .team-card:hover .team-img {\r\n transform: scale(1.05);\r\n }\r\n .team-card:hover {\r\n transform: translateY(-6px);\r\n box-shadow: 0 20px 40px rgba(0,0,0,0.08);\r\n }\r\n\r\n .timeline-item::before {\r\n content: '';\r\n position: absolute;\r\n left: 0;\r\n top: 8px;\r\n width: 16px;\r\n height: 16px;\r\n background: var(--accent-orange);\r\n border-radius: 50%;\r\n border: 4px solid white;\r\n box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.2);\r\n z-index: 1;\r\n }\r\n @media (min-width: 640px) {\r\n .timeline-item::before {\r\n left: 12px;\r\n }\r\n }\r\n .timeline-line {\r\n position: absolute;\r\n left: 7px;\r\n top: 0;\r\n bottom: 0;\r\n width: 2px;\r\n background: linear-gradient(to bottom, var(--accent-orange), #e5e7eb);\r\n }\r\n @media (min-width: 640px) {\r\n .timeline-line {\r\n left: 19px;\r\n }\r\n }\r\n\r\n .faq-answer {\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: max-height 0.3s ease;\r\n }\r\n .faq-icon { transition: transform 0.3s; }\r\n\r\n \/* SPA Page System *\/\r\n .page-section { display: none; }\r\n .page-section.active-page { display: block; }\r\n\r\n \/* Responsive: ensure images don't overflow *\/\r\n img { max-width: 100%; }\r\n <\/style>\r\n<\/head>\r\n\r\n<body class=\"font-body\">\r\n\r\n \r\n \r\n \r\n <header id=\"header\" class=\"fixed top-0 left-0 w-full z-50 transition-all duration-300\" style=\"background: rgba(255,255,255,0.92); backdrop-filter: blur(16px);\">\r\n <div class=\"max-w-container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"flex items-center justify-between h-16 sm:h-20\">\r\n <a href=\"javascript:void(0)\" class=\"nav-link flex items-center gap-2.5\" data-page=\"home\">\r\n <div class=\"w-10 h-10 bg-accent-orange rounded-lg flex items-center justify-center\">\r\n <i data-lucide=\"hard-hat\" class=\"w-6 h-6 text-white\"><\/i>\r\n <\/div>\r\n <span class=\"font-heading text-xl sm:text-2xl font-bold text-secondary-dark tracking-tight\">Civil<span class=\"text-accent-orange\">33<\/span><\/span>\r\n <\/a>\r\n\r\n <nav class=\"hidden lg:flex items-center gap-8\">\r\n <a href=\"javascript:void(0)\" class=\"nav-link text-sm font-medium text-accent-orange\" data-page=\"home\">Home<\/a>\r\n <a href=\"javascript:void(0)\" class=\"nav-link text-sm font-medium text-text-dark\/70 hover:text-accent-orange transition-colors duration-200\" data-page=\"about\">About<\/a>\r\n <a href=\"javascript:void(0)\" class=\"nav-link text-sm font-medium text-text-dark\/70 hover:text-accent-orange transition-colors duration-200\" data-page=\"services\">Services<\/a>\r\n <a href=\"javascript:void(0)\" class=\"nav-link text-sm font-medium text-text-dark\/70 hover:text-accent-orange transition-colors duration-200\" data-page=\"projects\">Projects<\/a>\r\n <a href=\"javascript:void(0)\" class=\"nav-link text-sm font-medium text-text-dark\/70 hover:text-accent-orange transition-colors duration-200\" data-page=\"contact\">Contact<\/a>\r\n <\/nav>\r\n\r\n <div class=\"flex items-center gap-4\">\r\n <a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link hidden sm:inline-flex items-center gap-2 bg-accent-orange hover:bg-accent-light text-white font-semibold text-sm px-5 py-2.5 rounded-lg btn-shine transition-colors duration-200\">\r\n <i data-lucide=\"phone\" class=\"w-4 h-4\"><\/i>\r\n Get a Quote\r\n <\/a>\r\n <button id=\"mobileMenuBtn\" class=\"lg:hidden p-2 text-secondary-dark hover:text-accent-orange transition-colors\">\r\n <i data-lucide=\"menu\" class=\"w-6 h-6\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"absolute bottom-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent\"><\/div>\r\n <\/header>\r\n\r\n \r\n <div id=\"mobileMenu\" class=\"mobile-menu fixed top-0 right-0 w-80 max-w-[85vw] h-full bg-white z-[60] shadow-2xl\">\r\n <div class=\"p-6\">\r\n <div class=\"flex items-center justify-between mb-8\">\r\n <span class=\"font-heading text-xl font-bold text-secondary-dark\">Menu<\/span>\r\n <button id=\"mobileMenuClose\" class=\"p-2 text-secondary-dark hover:text-accent-orange\">\r\n <i data-lucide=\"x\" class=\"w-6 h-6\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <nav class=\"flex flex-col gap-1\">\r\n <a href=\"javascript:void(0)\" class=\"mobile-link px-4 py-3 rounded-lg text-base font-medium text-accent-orange bg-accent-orange\/10 transition-colors\" data-page=\"home\">Home<\/a>\r\n <a href=\"javascript:void(0)\" class=\"mobile-link px-4 py-3 rounded-lg text-base font-medium text-text-dark hover:bg-light-gray hover:text-accent-orange transition-colors\" data-page=\"about\">About<\/a>\r\n <a href=\"javascript:void(0)\" class=\"mobile-link px-4 py-3 rounded-lg text-base font-medium text-text-dark hover:bg-light-gray hover:text-accent-orange transition-colors\" data-page=\"services\">Services<\/a>\r\n <a href=\"javascript:void(0)\" class=\"mobile-link px-4 py-3 rounded-lg text-base font-medium text-text-dark hover:bg-light-gray hover:text-accent-orange transition-colors\" data-page=\"projects\">Projects<\/a>\r\n <a href=\"javascript:void(0)\" class=\"mobile-link px-4 py-3 rounded-lg text-base font-medium text-text-dark hover:bg-light-gray hover:text-accent-orange transition-colors\" data-page=\"contact\">Contact<\/a>\r\n <\/nav>\r\n <div class=\"mt-8\">\r\n <a href=\"javascript:void(0)\" data-page=\"contact\" class=\"mobile-link nav-link flex items-center justify-center gap-2 w-full bg-accent-orange text-white font-semibold text-base px-6 py-3.5 rounded-lg\">\r\n <i data-lucide=\"phone\" class=\"w-5 h-5\"><\/i>\r\n Get a Quote\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"mobileOverlay\" class=\"fixed inset-0 bg-black\/40 z-[55] hidden\"><\/div>\r\n\r\n\r\n \r\n <div id=\"page-home\" class=\"page-section active-page\">\r\n <section id=\"home\" class=\"relative min-h-[90vh] sm:min-h-screen flex items-center overflow-hidden\">\r\n <img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/1.png\" alt=\"Construction Site\" class=\"absolute inset-0 w-full h-full object-cover\">\r\n <div class=\"hero-overlay absolute inset-0\"><\/div>\r\n <div class=\"noise-overlay absolute inset-0\"><\/div>\r\n <div class=\"absolute top-1\/4 right-0 w-[500px] h-[500px] bg-accent-orange\/5 rounded-full blur-[120px]\"><\/div>\r\n <div class=\"absolute bottom-0 left-0 w-[400px] h-[400px] bg-accent-orange\/5 rounded-full blur-[100px]\"><\/div>\r\n <div class=\"relative z-10 max-w-container mx-auto px-4 sm:px-6 lg:px-8 py-32 sm:py-40\">\r\n <div class=\"max-w-3xl\">\r\n <div class=\"animate-fade-up opacity-0 inline-flex items-center gap-2 bg-white\/10 backdrop-blur-sm border border-white\/10 rounded-full px-4 py-1.5 mb-6\">\r\n <div class=\"w-2 h-2 bg-accent-orange rounded-full\"><\/div>\r\n <span class=\"text-white\/80 text-xs sm:text-sm font-medium tracking-wide uppercase\">Trusted Since 2005<\/span>\r\n <\/div>\r\n <h1 class=\"animate-fade-up-delay-1 opacity-0 font-heading text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-white leading-[1.05] tracking-tight mb-6\">\r\n Building the Future with <span class=\"text-accent-orange\">Strength<\/span> & Precision\r\n <\/h1>\r\n <p class=\"animate-fade-up-delay-2 opacity-0 text-base sm:text-lg md:text-xl text-white\/70 leading-relaxed mb-10 max-w-xl\">\r\n From commercial complexes to infrastructure projects, we deliver excellence in every beam, every pour, every detail.\r\n <\/p>\r\n <div class=\"animate-fade-up-delay-3 opacity-0 flex flex-col sm:flex-row gap-4\">\r\n <a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link relative inline-flex items-center justify-center gap-2 bg-accent-orange hover:bg-accent-light text-white font-semibold text-base px-8 py-4 rounded-lg btn-shine transition-colors duration-200 pulse-ring\">\r\n <i data-lucide=\"file-text\" class=\"w-5 h-5\"><\/i> Get a Quote\r\n <\/a>\r\n <a href=\"javascript:void(0)\" data-page=\"projects\" class=\"nav-link inline-flex items-center justify-center gap-2 bg-white\/10 hover:bg-white\/20 backdrop-blur-sm border border-white\/20 text-white font-semibold text-base px-8 py-4 rounded-lg transition-all duration-200\">\r\n <i data-lucide=\"images\" class=\"w-5 h-5\"><\/i> View Projects\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"absolute bottom-8 left-1\/2 -translate-x-1\/2 z-10 hidden sm:flex flex-col items-center gap-2\">\r\n <span class=\"text-white\/40 text-xs tracking-widest uppercase\">Scroll<\/span>\r\n <div class=\"w-px h-10 bg-gradient-to-b from-white\/40 to-transparent\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"relative z-20 -mt-16 sm:-mt-20\">\r\n <div class=\"max-w-container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"bg-white rounded-2xl shadow-xl border border-gray-100 p-6 sm:p-8 lg:p-10\">\r\n <div class=\"grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8\">\r\n <div class=\"stat-item text-center reveal\"><div class=\"stat-number font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark transition-colors duration-300\" data-count=\"18\">0<\/div><div class=\"text-sm sm:text-base text-text-dark\/50 font-medium mt-1\">Years Experience<\/div><\/div>\r\n <div class=\"stat-item text-center reveal\"><div class=\"stat-number font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark transition-colors duration-300\" data-count=\"350\">0<\/div><div class=\"text-sm sm:text-base text-text-dark\/50 font-medium mt-1\">Projects Completed<\/div><\/div>\r\n <div class=\"stat-item text-center reveal\"><div class=\"stat-number font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark transition-colors duration-300\" data-count=\"120\">0<\/div><div class=\"text-sm sm:text-base text-text-dark\/50 font-medium mt-1\">Expert Engineers<\/div><\/div>\r\n <div class=\"stat-item text-center reveal\"><div class=\"stat-number font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark transition-colors duration-300\" data-count=\"98\">0<\/div><div class=\"text-sm sm:text-base text-text-dark\/50 font-medium mt-1\">Client Satisfaction %<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"about\" class=\"py-20 sm:py-28 lg:py-32 bg-white\">\r\n <div class=\"max-w-container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center\">\r\n <div class=\"reveal relative\">\r\n <div class=\"relative rounded-2xl overflow-hidden shadow-2xl\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/2.png\" alt=\"About Civil33\" class=\"w-full h-[300px] sm:h-[400px] lg:h-[500px] object-cover\"><div class=\"absolute inset-0 bg-gradient-to-t from-secondary-dark\/20 to-transparent\"><\/div><\/div>\r\n <div class=\"absolute -bottom-6 -right-4 sm:right-6 bg-accent-orange text-white rounded-xl p-5 sm:p-6 shadow-lg\"><div class=\"font-heading text-3xl sm:text-4xl font-bold\">18+<\/div><div class=\"text-sm font-medium text-white\/80\">Years of<br>Excellence<\/div><\/div>\r\n <div class=\"absolute -top-4 -left-4 w-20 h-20 border-2 border-accent-orange\/20 rounded-xl -z-10\"><\/div>\r\n <\/div>\r\n <div class=\"reveal\">\r\n <div class=\"inline-flex items-center gap-2 mb-4\"><div class=\"w-8 h-px bg-accent-orange\"><\/div><span class=\"text-accent-orange font-semibold text-sm tracking-wider uppercase\">About Us<\/span><\/div>\r\n <h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark tracking-tight mb-6\">We Construct Dreams Into <span class=\"text-accent-orange\">Reality<\/span><\/h2>\r\n <p class=\"text-base sm:text-lg text-text-dark\/60 leading-relaxed mb-8\">Civil33 Construction has been at the forefront of the civil engineering and construction industry since 2005. We combine innovative engineering solutions with time-tested construction practices to deliver projects that stand the test of time.<\/p>\r\n <div class=\"space-y-4 mb-8\">\r\n <div class=\"flex items-start gap-3\"><div class=\"flex-shrink-0 w-6 h-6 bg-accent-orange\/10 rounded-full flex items-center justify-center mt-0.5\"><i data-lucide=\"check\" class=\"w-3.5 h-3.5 text-accent-orange\"><\/i><\/div><div><span class=\"font-semibold text-secondary-dark\">18+ Years of Experience<\/span><p class=\"text-sm text-text-dark\/50\">Proven track record across diverse project types<\/p><\/div><\/div>\r\n <div class=\"flex items-start gap-3\"><div class=\"flex-shrink-0 w-6 h-6 bg-accent-orange\/10 rounded-full flex items-center justify-center mt-0.5\"><i data-lucide=\"check\" class=\"w-3.5 h-3.5 text-accent-orange\"><\/i><\/div><div><span class=\"font-semibold text-secondary-dark\">Unwavering Reliability<\/span><p class=\"text-sm text-text-dark\/50\">On-time, on-budget, every single time<\/p><\/div><\/div>\r\n <div class=\"flex items-start gap-3\"><div class=\"flex-shrink-0 w-6 h-6 bg-accent-orange\/10 rounded-full flex items-center justify-center mt-0.5\"><i data-lucide=\"check\" class=\"w-3.5 h-3.5 text-accent-orange\"><\/i><\/div><div><span class=\"font-semibold text-secondary-dark\">Premium Quality Standards<\/span><p class=\"text-sm text-text-dark\/50\">ISO 9001 certified processes and materials<\/p><\/div><\/div>\r\n <\/div>\r\n <a href=\"javascript:void(0)\" data-page=\"services\" class=\"nav-link inline-flex items-center gap-2 bg-secondary-dark hover:bg-primary-dark text-white font-semibold text-sm px-6 py-3.5 rounded-lg btn-shine transition-colors duration-200\">Explore Our Services <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"services\" class=\"py-20 sm:py-28 lg:py-32 bg-light-gray relative overflow-hidden\">\r\n <div class=\"absolute top-0 right-0 w-[600px] h-[600px] bg-accent-orange\/3 rounded-full blur-[120px]\"><\/div>\r\n <div class=\"relative max-w-container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"text-center max-w-2xl mx-auto mb-14 sm:mb-16 reveal\"><div class=\"inline-flex items-center gap-2 mb-4\"><div class=\"w-8 h-px bg-accent-orange\"><\/div><span class=\"text-accent-orange font-semibold text-sm tracking-wider uppercase\">What We Do<\/span><div class=\"w-8 h-px bg-accent-orange\"><\/div><\/div><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark tracking-tight mb-4\">Our Core <span class=\"text-accent-orange\">Services<\/span><\/h2><p class=\"text-base sm:text-lg text-text-dark\/50 leading-relaxed\">Comprehensive construction and engineering solutions tailored to meet your project requirements from concept to completion.<\/p><\/div>\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8\">\r\n <div class=\"service-card reveal relative bg-white rounded-xl p-7 sm:p-8 shadow-sm border border-gray-100 hover:shadow-lg hover:border-accent-orange\/20 transition-all duration-300 group overflow-hidden\"><div class=\"w-14 h-14 bg-accent-orange\/10 rounded-xl flex items-center justify-center mb-5 group-hover:bg-accent-orange\/20 transition-colors duration-300\"><i data-lucide=\"building-2\" class=\"w-7 h-7 text-accent-orange\"><\/i><\/div><h3 class=\"font-heading text-lg sm:text-xl font-bold text-secondary-dark mb-3\">Commercial Construction<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed mb-4\">Office buildings, retail centers, and mixed-use developments built to the highest standards.<\/p><a href=\"javascript:void(0)\" data-page=\"services\" class=\"nav-link inline-flex items-center gap-1.5 text-accent-orange font-semibold text-sm group-hover:gap-2.5 transition-all duration-200\">Learn More <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/a><\/div>\r\n <div class=\"service-card reveal relative bg-white rounded-xl p-7 sm:p-8 shadow-sm border border-gray-100 hover:shadow-lg hover:border-accent-orange\/20 transition-all duration-300 group overflow-hidden\"><div class=\"w-14 h-14 bg-accent-orange\/10 rounded-xl flex items-center justify-center mb-5 group-hover:bg-accent-orange\/20 transition-colors duration-300\"><i data-lucide=\"home\" class=\"w-7 h-7 text-accent-orange\"><\/i><\/div><h3 class=\"font-heading text-lg sm:text-xl font-bold text-secondary-dark mb-3\">Residential Projects<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed mb-4\">Custom homes, apartments, and housing complexes designed for modern living.<\/p><a href=\"javascript:void(0)\" data-page=\"services\" class=\"nav-link inline-flex items-center gap-1.5 text-accent-orange font-semibold text-sm group-hover:gap-2.5 transition-all duration-200\">Learn More <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/a><\/div>\r\n <div class=\"service-card reveal relative bg-white rounded-xl p-7 sm:p-8 shadow-sm border border-gray-100 hover:shadow-lg hover:border-accent-orange\/20 transition-all duration-300 group overflow-hidden\"><div class=\"w-14 h-14 bg-accent-orange\/10 rounded-xl flex items-center justify-center mb-5 group-hover:bg-accent-orange\/20 transition-colors duration-300\"><i data-lucide=\"ruler\" class=\"w-7 h-7 text-accent-orange\"><\/i><\/div><h3 class=\"font-heading text-lg sm:text-xl font-bold text-secondary-dark mb-3\">Civil Engineering<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed mb-4\">Roads, bridges, dams, and infrastructure projects with precision engineering.<\/p><a href=\"javascript:void(0)\" data-page=\"services\" class=\"nav-link inline-flex items-center gap-1.5 text-accent-orange font-semibold text-sm group-hover:gap-2.5 transition-all duration-200\">Learn More <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/a><\/div>\r\n <div class=\"service-card reveal relative bg-white rounded-xl p-7 sm:p-8 shadow-sm border border-gray-100 hover:shadow-lg hover:border-accent-orange\/20 transition-all duration-300 group overflow-hidden\"><div class=\"w-14 h-14 bg-accent-orange\/10 rounded-xl flex items-center justify-center mb-5 group-hover:bg-accent-orange\/20 transition-colors duration-300\"><i data-lucide=\"hard-hat\" class=\"w-7 h-7 text-accent-orange\"><\/i><\/div><h3 class=\"font-heading text-lg sm:text-xl font-bold text-secondary-dark mb-3\">Project Management<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed mb-4\">End-to-end project oversight ensuring timely delivery and budget adherence.<\/p><a href=\"javascript:void(0)\" data-page=\"services\" class=\"nav-link inline-flex items-center gap-1.5 text-accent-orange font-semibold text-sm group-hover:gap-2.5 transition-all duration-200\">Learn More <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/a><\/div>\r\n <div class=\"service-card reveal relative bg-white rounded-xl p-7 sm:p-8 shadow-sm border border-gray-100 hover:shadow-lg hover:border-accent-orange\/20 transition-all duration-300 group overflow-hidden\"><div class=\"w-14 h-14 bg-accent-orange\/10 rounded-xl flex items-center justify-center mb-5 group-hover:bg-accent-orange\/20 transition-colors duration-300\"><i data-lucide=\"hammer\" class=\"w-7 h-7 text-accent-orange\"><\/i><\/div><h3 class=\"font-heading text-lg sm:text-xl font-bold text-secondary-dark mb-3\">Renovation & Remodeling<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed mb-4\">Transform existing structures with modern upgrades and structural improvements.<\/p><a href=\"javascript:void(0)\" data-page=\"services\" class=\"nav-link inline-flex items-center gap-1.5 text-accent-orange font-semibold text-sm group-hover:gap-2.5 transition-all duration-200\">Learn More <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/a><\/div>\r\n <div class=\"service-card reveal relative bg-white rounded-xl p-7 sm:p-8 shadow-sm border border-gray-100 hover:shadow-lg hover:border-accent-orange\/20 transition-all duration-300 group overflow-hidden\"><div class=\"w-14 h-14 bg-accent-orange\/10 rounded-xl flex items-center justify-center mb-5 group-hover:bg-accent-orange\/20 transition-colors duration-300\"><i data-lucide=\"clipboard-check\" class=\"w-7 h-7 text-accent-orange\"><\/i><\/div><h3 class=\"font-heading text-lg sm:text-xl font-bold text-secondary-dark mb-3\">Consulting & Planning<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed mb-4\">Expert consultation on feasibility, design, and regulatory compliance.<\/p><a href=\"javascript:void(0)\" data-page=\"services\" class=\"nav-link inline-flex items-center gap-1.5 text-accent-orange font-semibold text-sm group-hover:gap-2.5 transition-all duration-200\">Learn More <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/a><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"projects\" class=\"py-20 sm:py-28 lg:py-32 bg-white\">\r\n <div class=\"max-w-container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"text-center max-w-2xl mx-auto mb-12 sm:mb-14 reveal\"><div class=\"inline-flex items-center gap-2 mb-4\"><div class=\"w-8 h-px bg-accent-orange\"><\/div><span class=\"text-accent-orange font-semibold text-sm tracking-wider uppercase\">Our Work<\/span><div class=\"w-8 h-px bg-accent-orange\"><\/div><\/div><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark tracking-tight mb-4\">Featured <span class=\"text-accent-orange\">Projects<\/span><\/h2><p class=\"text-base sm:text-lg text-text-dark\/50 leading-relaxed\">A showcase of our proudest achievements across commercial, residential, and infrastructure sectors.<\/p><\/div>\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 sm:gap-6\">\r\n <div class=\"project-card reveal relative rounded-xl overflow-hidden cursor-pointer group\" data-category=\"commercial\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/7.png\" alt=\"Skyline Tower\" class=\"w-full h-56 sm:h-64 object-cover img-zoom\"><div class=\"project-overlay absolute inset-0 bg-gradient-to-t from-secondary-dark\/90 via-secondary-dark\/40 to-transparent flex items-end p-5 sm:p-6\"><div><span class=\"text-accent-orange text-xs font-semibold tracking-wider uppercase\">Commercial<\/span><h4 class=\"text-white font-heading text-lg font-bold mt-1\">Skyline Tower Complex<\/h4><p class=\"text-white\/60 text-sm mt-1\">42-story mixed-use development<\/p><\/div><\/div><\/div>\r\n <div class=\"project-card reveal relative rounded-xl overflow-hidden cursor-pointer group sm:row-span-2\" data-category=\"infrastructure\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/4.png\" alt=\"Metro Bridge\" class=\"w-full h-56 sm:h-full min-h-[16rem] sm:min-h-0 object-cover img-zoom\"><div class=\"project-overlay absolute inset-0 bg-gradient-to-t from-secondary-dark\/90 via-secondary-dark\/40 to-transparent flex items-end p-5 sm:p-6\"><div><span class=\"text-accent-orange text-xs font-semibold tracking-wider uppercase\">Infrastructure<\/span><h4 class=\"text-white font-heading text-lg font-bold mt-1\">Metro River Bridge<\/h4><p class=\"text-white\/60 text-sm mt-1\">2.4km cable-stayed bridge<\/p><\/div><\/div><\/div>\r\n <div class=\"project-card reveal relative rounded-xl overflow-hidden cursor-pointer group\" data-category=\"residential\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/3.png\" alt=\"Green Valley\" class=\"w-full h-56 sm:h-64 object-cover img-zoom\"><div class=\"project-overlay absolute inset-0 bg-gradient-to-t from-secondary-dark\/90 via-secondary-dark\/40 to-transparent flex items-end p-5 sm:p-6\"><div><span class=\"text-accent-orange text-xs font-semibold tracking-wider uppercase\">Residential<\/span><h4 class=\"text-white font-heading text-lg font-bold mt-1\">Green Valley Estates<\/h4><p class=\"text-white\/60 text-sm mt-1\">250-unit premium housing<\/p><\/div><\/div><\/div>\r\n <div class=\"project-card reveal relative rounded-xl overflow-hidden cursor-pointer group\" data-category=\"commercial\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/8.png\" alt=\"City Mall\" class=\"w-full h-56 sm:h-64 object-cover img-zoom\"><div class=\"project-overlay absolute inset-0 bg-gradient-to-t from-secondary-dark\/90 via-secondary-dark\/40 to-transparent flex items-end p-5 sm:p-6\"><div><span class=\"text-accent-orange text-xs font-semibold tracking-wider uppercase\">Commercial<\/span><h4 class=\"text-white font-heading text-lg font-bold mt-1\">City Center Mall<\/h4><p class=\"text-white\/60 text-sm mt-1\">500,000 sq ft retail space<\/p><\/div><\/div><\/div>\r\n <div class=\"project-card reveal relative rounded-xl overflow-hidden cursor-pointer group\" data-category=\"infrastructure\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/5.png\" alt=\"Highway\" class=\"w-full h-56 sm:h-64 object-cover img-zoom\"><div class=\"project-overlay absolute inset-0 bg-gradient-to-t from-secondary-dark\/90 via-secondary-dark\/40 to-transparent flex items-end p-5 sm:p-6\"><div><span class=\"text-accent-orange text-xs font-semibold tracking-wider uppercase\">Infrastructure<\/span><h4 class=\"text-white font-heading text-lg font-bold mt-1\">Express Highway Corridor<\/h4><p class=\"text-white\/60 text-sm mt-1\">68km six-lane highway<\/p><\/div><\/div><\/div>\r\n <div class=\"project-card reveal relative rounded-xl overflow-hidden cursor-pointer group\" data-category=\"residential\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/6.png\" alt=\"Sunset Residency\" class=\"w-full h-56 sm:h-64 object-cover img-zoom\"><div class=\"project-overlay absolute inset-0 bg-gradient-to-t from-secondary-dark\/90 via-secondary-dark\/40 to-transparent flex items-end p-5 sm:p-6\"><div><span class=\"text-accent-orange text-xs font-semibold tracking-wider uppercase\">Residential<\/span><h4 class=\"text-white font-heading text-lg font-bold mt-1\">Sunset Residency<\/h4><p class=\"text-white\/60 text-sm mt-1\">Luxury waterfront apartments<\/p><\/div><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"py-20 sm:py-28 lg:py-32 bg-secondary-dark relative overflow-hidden\">\r\n <div class=\"absolute top-0 left-1\/2 -translate-x-1\/2 w-[800px] h-[400px] bg-accent-orange\/5 rounded-full blur-[120px]\"><\/div><div class=\"noise-overlay absolute inset-0\"><\/div>\r\n <div class=\"relative max-w-container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"text-center max-w-2xl mx-auto mb-14 sm:mb-16 reveal\"><div class=\"inline-flex items-center gap-2 mb-4\"><div class=\"w-8 h-px bg-accent-orange\"><\/div><span class=\"text-accent-orange font-semibold text-sm tracking-wider uppercase\">Why Choose Us<\/span><div class=\"w-8 h-px bg-accent-orange\"><\/div><\/div><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-white tracking-tight mb-4\">What Sets Us <span class=\"text-accent-orange\">Apart<\/span><\/h2><p class=\"text-base sm:text-lg text-white\/50 leading-relaxed\">Our commitment to quality, safety, and innovation makes us the preferred construction partner.<\/p><\/div>\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8\">\r\n <div class=\"feature-box reveal text-center p-6 sm:p-8 rounded-xl bg-white\/5 border border-white\/10 backdrop-blur-sm hover:bg-white\/10 hover:border-accent-orange\/30 transition-all duration-300\"><div class=\"feature-icon-wrap w-16 h-16 bg-accent-orange\/15 rounded-2xl flex items-center justify-center mx-auto mb-5\"><i data-lucide=\"shield-check\" class=\"w-8 h-8 text-accent-orange\"><\/i><\/div><h4 class=\"font-heading text-lg font-bold text-white mb-2\">Safety First<\/h4><p class=\"text-sm text-white\/50 leading-relaxed\">Zero-incident record with rigorous safety protocols on every site.<\/p><\/div>\r\n <div class=\"feature-box reveal text-center p-6 sm:p-8 rounded-xl bg-white\/5 border border-white\/10 backdrop-blur-sm hover:bg-white\/10 hover:border-accent-orange\/30 transition-all duration-300\"><div class=\"feature-icon-wrap w-16 h-16 bg-accent-orange\/15 rounded-2xl flex items-center justify-center mx-auto mb-5\"><i data-lucide=\"clock\" class=\"w-8 h-8 text-accent-orange\"><\/i><\/div><h4 class=\"font-heading text-lg font-bold text-white mb-2\">On-Time Delivery<\/h4><p class=\"text-sm text-white\/50 leading-relaxed\">95% on-time completion rate with meticulous project scheduling.<\/p><\/div>\r\n <div class=\"feature-box reveal text-center p-6 sm:p-8 rounded-xl bg-white\/5 border border-white\/10 backdrop-blur-sm hover:bg-white\/10 hover:border-accent-orange\/30 transition-all duration-300\"><div class=\"feature-icon-wrap w-16 h-16 bg-accent-orange\/15 rounded-2xl flex items-center justify-center mx-auto mb-5\"><i data-lucide=\"award\" class=\"w-8 h-8 text-accent-orange\"><\/i><\/div><h4 class=\"font-heading text-lg font-bold text-white mb-2\">Certified Quality<\/h4><p class=\"text-sm text-white\/50 leading-relaxed\">ISO 9001:2015 certified with third-party quality audits.<\/p><\/div>\r\n <div class=\"feature-box reveal text-center p-6 sm:p-8 rounded-xl bg-white\/5 border border-white\/10 backdrop-blur-sm hover:bg-white\/10 hover:border-accent-orange\/30 transition-all duration-300\"><div class=\"feature-icon-wrap w-16 h-16 bg-accent-orange\/15 rounded-2xl flex items-center justify-center mx-auto mb-5\"><i data-lucide=\"banknote\" class=\"w-8 h-8 text-accent-orange\"><\/i><\/div><h4 class=\"font-heading text-lg font-bold text-white mb-2\">Cost Effective<\/h4><p class=\"text-sm text-white\/50 leading-relaxed\">Transparent pricing with value engineering to optimize your budget.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"py-20 sm:py-28 lg:py-32 bg-light-gray relative overflow-hidden\">\r\n <div class=\"absolute bottom-0 left-0 w-[500px] h-[500px] bg-accent-orange\/3 rounded-full blur-[100px]\"><\/div>\r\n <div class=\"relative max-w-container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"text-center max-w-2xl mx-auto mb-14 sm:mb-16 reveal\"><div class=\"inline-flex items-center gap-2 mb-4\"><div class=\"w-8 h-px bg-accent-orange\"><\/div><span class=\"text-accent-orange font-semibold text-sm tracking-wider uppercase\">Testimonials<\/span><div class=\"w-8 h-px bg-accent-orange\"><\/div><\/div><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark tracking-tight mb-4\">Client <span class=\"text-accent-orange\">Reviews<\/span><\/h2><p class=\"text-base sm:text-lg text-text-dark\/50 leading-relaxed\">Don't just take our word for it \u2014 hear what our clients say about working with Civil33.<\/p><\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8\">\r\n <div class=\"testimonial-card reveal bg-white rounded-xl p-7 sm:p-8 shadow-sm border border-gray-100\"><div class=\"flex gap-1 mb-4\"><i data-lucide=\"star\" class=\"w-5 h-5 text-accent-orange fill-accent-orange\"><\/i><i data-lucide=\"star\" class=\"w-5 h-5 text-accent-orange fill-accent-orange\"><\/i><i data-lucide=\"star\" class=\"w-5 h-5 text-accent-orange fill-accent-orange\"><\/i><i data-lucide=\"star\" class=\"w-5 h-5 text-accent-orange fill-accent-orange\"><\/i><i data-lucide=\"star\" class=\"w-5 h-5 text-accent-orange fill-accent-orange\"><\/i><\/div><p class=\"text-base text-text-dark\/60 leading-relaxed mb-6 italic\">\"Civil delivered our office complex 2 weeks ahead of schedule. Their attention to detail and proactive communication made the entire process seamless.\"<\/p><div class=\"flex items-center gap-3\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/user.jpg\" alt=\"Client\" class=\"w-11 h-11 rounded-full object-cover\"><div><div class=\"font-semibold text-secondary-dark text-sm\">Robert Anderson<\/div><div class=\"text-xs text-text-dark\/40\">CEO, Anderson Holdings<\/div><\/div><\/div><\/div>\r\n <div class=\"testimonial-card reveal bg-white rounded-xl p-7 sm:p-8 shadow-sm border border-gray-100\"><div class=\"flex gap-1 mb-4\"><i data-lucide=\"star\" class=\"w-5 h-5 text-accent-orange fill-accent-orange\"><\/i><i data-lucide=\"star\" class=\"w-5 h-5 text-accent-orange fill-accent-orange\"><\/i><i data-lucide=\"star\" class=\"w-5 h-5 text-accent-orange fill-accent-orange\"><\/i><i data-lucide=\"star\" class=\"w-5 h-5 text-accent-orange fill-accent-orange\"><\/i><i data-lucide=\"star\" class=\"w-5 h-5 text-accent-orange fill-accent-orange\"><\/i><\/div><p class=\"text-base text-text-dark\/60 leading-relaxed mb-6 italic\">\"The team's engineering expertise saved us over $2M on our bridge project through innovative design solutions. Truly world-class professionals.\"<\/p><div class=\"flex items-center gap-3\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/user.jpg\" alt=\"Client\" class=\"w-11 h-11 rounded-full object-cover\"><div><div class=\"font-semibold text-secondary-dark text-sm\">Sarah Mitchell<\/div><div class=\"text-xs text-text-dark\/40\">Director, Metro Infrastructure<\/div><\/div><\/div><\/div>\r\n <div class=\"testimonial-card reveal bg-white rounded-xl p-7 sm:p-8 shadow-sm border border-gray-100\"><div class=\"flex gap-1 mb-4\"><i data-lucide=\"star\" class=\"w-5 h-5 text-accent-orange fill-accent-orange\"><\/i><i data-lucide=\"star\" class=\"w-5 h-5 text-accent-orange fill-accent-orange\"><\/i><i data-lucide=\"star\" class=\"w-5 h-5 text-accent-orange fill-accent-orange\"><\/i><i data-lucide=\"star\" class=\"w-5 h-5 text-accent-orange fill-accent-orange\"><\/i><i data-lucide=\"star\" class=\"w-5 h-5 text-gray-200 fill-gray-200\"><\/i><\/div><p class=\"text-base text-text-dark\/60 leading-relaxed mb-6 italic\">\"From the initial consultation to final handover, Civil33 exceeded our expectations. Our residential complex is a testament to their craftsmanship.\"<\/p><div class=\"flex items-center gap-3\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/user.jpg\" alt=\"Client\" class=\"w-11 h-11 rounded-full object-cover\"><div><div class=\"font-semibold text-secondary-dark text-sm\">James Thornton<\/div><div class=\"text-xs text-text-dark\/40\">Owner, Thornton Properties<\/div><\/div><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"relative py-20 sm:py-24 overflow-hidden\">\r\n <img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/9.jpg\" alt=\"\" class=\"absolute inset-0 w-full h-full object-cover\"><div class=\"absolute inset-0 bg-secondary-dark\/90\"><\/div><div class=\"noise-overlay absolute inset-0\"><\/div><div class=\"absolute top-0 right-0 w-[500px] h-[500px] bg-accent-orange\/10 rounded-full blur-[120px]\"><\/div>\r\n <div class=\"relative max-w-container mx-auto px-4 sm:px-6 lg:px-8 text-center\"><div class=\"max-w-3xl mx-auto reveal\"><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-white tracking-tight mb-5\">Ready to Start Your <span class=\"text-accent-orange\">Next Project?<\/span><\/h2><p class=\"text-base sm:text-lg text-white\/60 leading-relaxed mb-8 max-w-xl mx-auto\">Let's discuss your vision and turn it into reality. Our team is ready to provide a detailed consultation and free estimate.<\/p><div class=\"flex flex-col sm:flex-row justify-center gap-4\"><a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link inline-flex items-center justify-center gap-2 bg-accent-orange hover:bg-accent-light text-white font-semibold text-base px-8 py-4 rounded-lg btn-shine transition-colors duration-200\"><i data-lucide=\"phone\" class=\"w-5 h-5\"><\/i> Get Free Estimate<\/a><a href=\"tel:+1234567890\" class=\"inline-flex items-center justify-center gap-2 bg-white\/10 hover:bg-white\/20 border border-white\/20 text-white font-semibold text-base px-8 py-4 rounded-lg transition-all duration-200\"><i data-lucide=\"phone-call\" class=\"w-5 h-5\"><\/i> Call Us Now<\/a><\/div><\/div><\/div>\r\n <\/section>\r\n\r\n <section id=\"contact\" class=\"py-20 sm:py-28 lg:py-32 bg-white\">\r\n <div class=\"max-w-container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20\">\r\n <div class=\"reveal\"><div class=\"inline-flex items-center gap-2 mb-4\"><div class=\"w-8 h-px bg-accent-orange\"><\/div><span class=\"text-accent-orange font-semibold text-sm tracking-wider uppercase\">Contact Us<\/span><\/div><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark tracking-tight mb-4\">Let's Build <span class=\"text-accent-orange\">Together<\/span><\/h2><p class=\"text-base sm:text-lg text-text-dark\/50 leading-relaxed mb-10\">Have a project in mind? Reach out to us and our team will respond within 24 hours with a comprehensive plan.<\/p><div class=\"space-y-6 mb-10\"><div class=\"flex items-start gap-4\"><div class=\"w-12 h-12 bg-accent-orange\/10 rounded-xl flex items-center justify-center flex-shrink-0\"><i data-lucide=\"map-pin\" class=\"w-5 h-5 text-accent-orange\"><\/i><\/div><div><h4 class=\"font-semibold text-secondary-dark mb-1\">Our Office<\/h4><p class=\"text-sm text-text-dark\/50\">1111 Construction Avenue, Suite 1000<br>New York, NY 10050<\/p><\/div><\/div><div class=\"flex items-start gap-4\"><div class=\"w-12 h-12 bg-accent-orange\/10 rounded-xl flex items-center justify-center flex-shrink-0\"><i data-lucide=\"phone\" class=\"w-5 h-5 text-accent-orange\"><\/i><\/div><div><h4 class=\"font-semibold text-secondary-dark mb-1\">Phone<\/h4><p class=\"text-sm text-text-dark\/50\">+1 (111) 111-1111<br>+1 (111) 111-1111<\/p><\/div><\/div><div class=\"flex items-start gap-4\"><div class=\"w-12 h-12 bg-accent-orange\/10 rounded-xl flex items-center justify-center flex-shrink-0\"><i data-lucide=\"mail\" class=\"w-5 h-5 text-accent-orange\"><\/i><\/div><div><h4 class=\"font-semibold text-secondary-dark mb-1\">Email<\/h4><p class=\"text-sm text-text-dark\/50\">info@Civil33.com<br>projects@Civil33.com<\/p><\/div><\/div><\/div><div class=\"bg-light-gray rounded-xl p-5 sm:p-6\"><h4 class=\"font-semibold text-secondary-dark mb-3 flex items-center gap-2\"><i data-lucide=\"clock\" class=\"w-4 h-4 text-accent-orange\"><\/i> Business Hours<\/h4><div class=\"grid grid-cols-2 gap-y-2 text-sm\"><span class=\"text-text-dark\/50\">Mon \u2013 Fri<\/span><span class=\"font-medium text-secondary-dark\">7:00 AM \u2013 6:00 PM<\/span><span class=\"text-text-dark\/50\">Saturday<\/span><span class=\"font-medium text-secondary-dark\">8:00 AM \u2013 2:00 PM<\/span><span class=\"text-text-dark\/50\">Sunday<\/span><span class=\"font-medium text-secondary-dark\">Closed<\/span><\/div><\/div><\/div>\r\n <div class=\"reveal\"><form id=\"contactFormHome\" class=\"bg-light-gray rounded-2xl p-6 sm:p-8 lg:p-10\"><h3 class=\"font-heading text-xl sm:text-2xl font-bold text-secondary-dark mb-2\">Send Us a Message<\/h3><p class=\"text-sm text-text-dark\/50 mb-8\">Fill in the form below and we'll get back to you promptly.<\/p><div class=\"space-y-5\"><div><label class=\"block text-sm font-medium text-secondary-dark mb-1.5\">Full Name *<\/label><input type=\"text\" required placeholder=\"John Anderson\" class=\"form-input w-full px-4 py-3 rounded-lg border border-gray-200 bg-white text-sm text-text-dark placeholder:text-text-dark\/30 focus:outline-none transition-all duration-200\"><\/div><div><label class=\"block text-sm font-medium text-secondary-dark mb-1.5\">Email Address *<\/label><input type=\"email\" required placeholder=\"john@example.com\" class=\"form-input w-full px-4 py-3 rounded-lg border border-gray-200 bg-white text-sm text-text-dark placeholder:text-text-dark\/30 focus:outline-none transition-all duration-200\"><\/div><div><label class=\"block text-sm font-medium text-secondary-dark mb-1.5\">Subject<\/label><select class=\"form-input w-full px-4 py-3 rounded-lg border border-gray-200 bg-white text-sm text-text-dark focus:outline-none transition-all duration-200\"><option value=\"\">Select a topic<\/option><option>New Project Inquiry<\/option><option>Renovation Request<\/option><option>Consultation<\/option><option>Partnership<\/option><option>Other<\/option><\/select><\/div><div><label class=\"block text-sm font-medium text-secondary-dark mb-1.5\">Message *<\/label><textarea required rows=\"5\" placeholder=\"Tell us about your project...\" class=\"form-input w-full px-4 py-3 rounded-lg border border-gray-200 bg-white text-sm text-text-dark placeholder:text-text-dark\/30 focus:outline-none transition-all duration-200 resize-none\"><\/textarea><\/div><button type=\"submit\" class=\"w-full flex items-center justify-center gap-2 bg-accent-orange hover:bg-accent-light text-white font-semibold text-base px-8 py-4 rounded-lg btn-shine transition-colors duration-200\"><i data-lucide=\"send\" class=\"w-5 h-5\"><\/i> Send Message<\/button><\/div><div id=\"formSuccessHome\" class=\"hidden mt-5 p-4 bg-green-50 border border-green-200 rounded-lg text-sm text-green-700 flex items-center gap-2\"><i data-lucide=\"check-circle\" class=\"w-5 h-5 text-green-500\"><\/i> Thank you! Your message has been sent successfully.<\/div><\/form><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n\r\n \r\n <div id=\"page-about\" class=\"page-section\">\r\n <section class=\"relative py-32 sm:py-40 lg:py-48 flex items-center overflow-hidden\">\r\n <img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/1.png\" alt=\"Construction Site\" class=\"absolute inset-0 w-full h-full object-cover\"><div class=\"hero-overlay absolute inset-0\"><\/div><div class=\"noise-overlay absolute inset-0\"><\/div><div class=\"absolute top-1\/4 right-0 w-[500px] h-[500px] bg-accent-orange\/5 rounded-full blur-[120px]\"><\/div>\r\n <div class=\"relative z-10 max-w-container mx-auto px-4 sm:px-6 lg:px-8 text-center\"><div class=\"animate-fade-up opacity-0\"><div class=\"inline-flex items-center gap-2 bg-white\/10 backdrop-blur-sm border border-white\/10 rounded-full px-4 py-1.5 mb-6\"><div class=\"w-2 h-2 bg-accent-orange rounded-full\"><\/div><span class=\"text-white\/80 text-xs sm:text-sm font-medium tracking-wide uppercase\">Est. 2005<\/span><\/div><\/div><h1 class=\"animate-fade-up-delay-1 opacity-0 font-heading text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-white leading-[1.05] tracking-tight mb-4\">About <span class=\"text-accent-orange\">Us<\/span><\/h1><p class=\"animate-fade-up-delay-2 opacity-0 text-base sm:text-lg text-white\/60 max-w-xl mx-auto mb-6\">Learn more about our journey, values, and the expert team dedicated to building your future.<\/p><div class=\"animate-fade-up-delay-3 opacity-0 flex items-center justify-center gap-2 text-sm text-white\/40\"><a href=\"javascript:void(0)\" data-page=\"home\" class=\"nav-link hover:text-accent-orange transition-colors\">Home<\/a><i data-lucide=\"chevron-right\" class=\"w-4 h-4\"><\/i><span class=\"text-white\/80\">About<\/span><\/div><\/div>\r\n <\/section>\r\n\r\n <section id=\"about-main\" class=\"py-20 sm:py-28 lg:py-32 bg-white\"><div class=\"max-w-container mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center\"><div class=\"reveal relative\"><div class=\"relative rounded-2xl overflow-hidden shadow-2xl\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/2.png\" alt=\"About Civil33\" class=\"w-full h-[300px] sm:h-[400px] lg:h-[500px] object-cover\"><div class=\"absolute inset-0 bg-gradient-to-t from-secondary-dark\/20 to-transparent\"><\/div><\/div><div class=\"absolute -bottom-6 -right-4 sm:right-6 bg-accent-orange text-white rounded-xl p-5 sm:p-6 shadow-lg\"><div class=\"font-heading text-3xl sm:text-4xl font-bold\">18+<\/div><div class=\"text-sm font-medium text-white\/80\">Years of<br>Excellence<\/div><\/div><div class=\"absolute -top-4 -left-4 w-20 h-20 border-2 border-accent-orange\/20 rounded-xl -z-10\"><\/div><\/div><div class=\"reveal\"><div class=\"inline-flex items-center gap-2 mb-4\"><div class=\"w-8 h-px bg-accent-orange\"><\/div><span class=\"text-accent-orange font-semibold text-sm tracking-wider uppercase\">Who We Are<\/span><\/div><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark tracking-tight mb-6\">We Construct Dreams Into <span class=\"text-accent-orange\">Reality<\/span><\/h2><p class=\"text-base sm:text-lg text-text-dark\/60 leading-relaxed mb-6\">Civil33 Construction has been at the forefront of the civil engineering and construction industry since 2005. We combine innovative engineering solutions with time-tested construction practices to deliver projects that stand the test of time.<\/p><p class=\"text-base sm:text-lg text-text-dark\/60 leading-relaxed mb-8\">From humble beginnings as a small regional contractor, we have grown into a nationally recognized construction firm, completing over 350 landmark projects. Our success is built on a foundation of integrity, safety, and unwavering commitment to our clients' visions.<\/p><div class=\"grid grid-cols-2 gap-4 sm:gap-6 mb-8\"><div class=\"bg-light-gray rounded-xl p-4 sm:p-5 text-center\"><div class=\"font-heading text-2xl sm:text-3xl font-bold text-accent-orange\">350+<\/div><div class=\"text-xs sm:text-sm text-text-dark\/50 font-medium mt-1\">Projects Done<\/div><\/div><div class=\"bg-light-gray rounded-xl p-4 sm:p-5 text-center\"><div class=\"font-heading text-2xl sm:text-3xl font-bold text-accent-orange\">98%<\/div><div class=\"text-xs sm:text-sm text-text-dark\/50 font-medium mt-1\">Client Satisfaction<\/div><\/div><div class=\"bg-light-gray rounded-xl p-4 sm:p-5 text-center\"><div class=\"font-heading text-2xl sm:text-3xl font-bold text-accent-orange\">120+<\/div><div class=\"text-xs sm:text-sm text-text-dark\/50 font-medium mt-1\">Expert Team<\/div><\/div><div class=\"bg-light-gray rounded-xl p-4 sm:p-5 text-center\"><div class=\"font-heading text-2xl sm:text-3xl font-bold text-accent-orange\">15+<\/div><div class=\"text-xs sm:text-sm text-text-dark\/50 font-medium mt-1\">Industry Awards<\/div><\/div><\/div><a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link inline-flex items-center gap-2 bg-secondary-dark hover:bg-primary-dark text-white font-semibold text-sm px-6 py-3.5 rounded-lg btn-shine transition-colors duration-200\">Contact Us <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/a><\/div><\/div><\/div><\/section>\r\n\r\n <section class=\"py-20 sm:py-28 lg:py-32 bg-light-gray relative overflow-hidden\"><div class=\"absolute top-0 right-0 w-[600px] h-[600px] bg-accent-orange\/3 rounded-full blur-[120px]\"><\/div><div class=\"relative max-w-container mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"text-center max-w-2xl mx-auto mb-14 sm:mb-16 reveal\"><div class=\"inline-flex items-center gap-2 mb-4\"><div class=\"w-8 h-px bg-accent-orange\"><\/div><span class=\"text-accent-orange font-semibold text-sm tracking-wider uppercase\">Our Core<\/span><div class=\"w-8 h-px bg-accent-orange\"><\/div><\/div><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark tracking-tight mb-4\">Mission, Vision & <span class=\"text-accent-orange\">Values<\/span><\/h2><\/div><div class=\"grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8\"><div class=\"feature-box reveal text-center p-6 sm:p-8 rounded-xl bg-white shadow-sm border border-gray-100 hover:shadow-lg transition-all duration-300\"><div class=\"feature-icon-wrap w-16 h-16 bg-accent-orange\/10 rounded-2xl flex items-center justify-center mx-auto mb-5\"><i data-lucide=\"target\" class=\"w-8 h-8 text-accent-orange\"><\/i><\/div><h4 class=\"font-heading text-xl font-bold text-secondary-dark mb-3\">Our Mission<\/h4><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed\">To deliver exceptional construction services through innovative engineering, uncompromising safety, and a commitment to on-time, on-budget project completion.<\/p><\/div><div class=\"feature-box reveal text-center p-6 sm:p-8 rounded-xl bg-white shadow-sm border border-gray-100 hover:shadow-lg transition-all duration-300\"><div class=\"feature-icon-wrap w-16 h-16 bg-accent-orange\/10 rounded-2xl flex items-center justify-center mx-auto mb-5\"><i data-lucide=\"eye\" class=\"w-8 h-8 text-accent-orange\"><\/i><\/div><h4 class=\"font-heading text-xl font-bold text-secondary-dark mb-3\">Our Vision<\/h4><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed\">To become the most trusted name in civil engineering and construction nationally, recognized for transforming landscapes and enriching communities.<\/p><\/div><div class=\"feature-box reveal text-center p-6 sm:p-8 rounded-xl bg-white shadow-sm border border-gray-100 hover:shadow-lg transition-all duration-300\"><div class=\"feature-icon-wrap w-16 h-16 bg-accent-orange\/10 rounded-2xl flex items-center justify-center mx-auto mb-5\"><i data-lucide=\"heart\" class=\"w-8 h-8 text-accent-orange\"><\/i><\/div><h4 class=\"font-heading text-xl font-bold text-secondary-dark mb-3\">Our Values<\/h4><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed\">Integrity in every deal. Safety on every site. Quality in every pour. We believe in transparent communication and treating your project like our own.<\/p><\/div><\/div><\/div><\/section>\r\n\r\n <section class=\"py-20 sm:py-28 lg:py-32 bg-white\"><div class=\"max-w-container mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"text-center max-w-2xl mx-auto mb-14 sm:mb-16 reveal\"><div class=\"inline-flex items-center gap-2 mb-4\"><div class=\"w-8 h-px bg-accent-orange\"><\/div><span class=\"text-accent-orange font-semibold text-sm tracking-wider uppercase\">Our Journey<\/span><div class=\"w-8 h-px bg-accent-orange\"><\/div><\/div><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark tracking-tight mb-4\">Company <span class=\"text-accent-orange\">Milestones<\/span><\/h2><\/div><div class=\"max-w-3xl mx-auto relative\"><div class=\"timeline-line\"><\/div><div class=\"space-y-8 sm:space-y-12\"><div class=\"timeline-item reveal relative pl-8 sm:pl-14\"><div class=\"font-heading text-lg sm:text-xl font-bold text-accent-orange mb-1\">2005<\/div><h4 class=\"font-heading text-lg font-bold text-secondary-dark mb-2\">Founded & First Project<\/h4><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed\">Civil33 was established with a team of 5 engineers. Completed our first residential project within 8 months, setting the standard for quality.<\/p><\/div><div class=\"timeline-item reveal relative pl-8 sm:pl-14\"><div class=\"font-heading text-lg sm:text-xl font-bold text-accent-orange mb-1\">2010<\/div><h4 class=\"font-heading text-lg font-bold text-secondary-dark mb-2\">Expansion into Commercial<\/h4><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed\">Secured our first major commercial contract\u2014a 10-story office building. Team grew to 40+ members and opened a second regional office.<\/p><\/div><div class=\"timeline-item reveal relative pl-8 sm:pl-14\"><div class=\"font-heading text-lg sm:text-xl font-bold text-accent-orange mb-1\">2016<\/div><h4 class=\"font-heading text-lg font-bold text-secondary-dark mb-2\">ISO Certification & 100th Project<\/h4><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed\">Achieved ISO 9001:2015 certification and celebrated the completion of our 100th project, crossing the $100M revenue milestone.<\/p><\/div><div class=\"timeline-item reveal relative pl-8 sm:pl-14\"><div class=\"font-heading text-lg sm:text-xl font-bold text-accent-orange mb-1\">2020<\/div><h4 class=\"font-heading text-lg font-bold text-secondary-dark mb-2\">Infrastructure Division Launch<\/h4><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed\">Launched a dedicated infrastructure division for bridges, highways, and dams. Won the National Infrastructure Excellence Award.<\/p><\/div><div class=\"timeline-item reveal relative pl-8 sm:pl-14\"><div class=\"font-heading text-lg sm:text-xl font-bold text-accent-orange mb-1\">2024<\/div><h4 class=\"font-heading text-lg font-bold text-secondary-dark mb-2\">350+ Projects & Going Strong<\/h4><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed\">Today, with 120+ expert engineers and a zero-incident safety record, Civil33 continues to shape the nation's skyline and infrastructure.<\/p><\/div><\/div><\/div><\/div><\/section>\r\n\r\n <section class=\"py-20 sm:py-28 lg:py-32 bg-light-gray relative overflow-hidden\"><div class=\"absolute bottom-0 left-0 w-[500px] h-[500px] bg-accent-orange\/3 rounded-full blur-[100px]\"><\/div><div class=\"relative max-w-container mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"text-center max-w-2xl mx-auto mb-14 sm:mb-16 reveal\"><div class=\"inline-flex items-center gap-2 mb-4\"><div class=\"w-8 h-px bg-accent-orange\"><\/div><span class=\"text-accent-orange font-semibold text-sm tracking-wider uppercase\">Our Team<\/span><div class=\"w-8 h-px bg-accent-orange\"><\/div><\/div><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark tracking-tight mb-4\">Meet the <span class=\"text-accent-orange\">Experts<\/span><\/h2><\/div><div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8\"><div class=\"team-card reveal bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100 transition-all duration-300\"><div class=\"overflow-hidden\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/user.jpg\" alt=\"Robert Vance\" class=\"team-img w-full h-56 sm:h-64 object-cover transition-transform duration-500\"><\/div><div class=\"p-5 sm:p-6 text-center\"><h4 class=\"font-heading text-lg font-bold text-secondary-dark\">Robert Vance<\/h4><p class=\"text-sm text-accent-orange font-medium mt-1\">CEO & Founder<\/p><p class=\"text-xs text-text-dark\/40 mt-3 leading-relaxed\">30+ years in construction leadership. Founded Civil33 with a vision for engineering excellence.<\/p><div class=\"flex justify-center gap-3 mt-4\"><a href=\"#\" class=\"text-text-dark\/30 hover:text-accent-orange transition-colors\"><i data-lucide=\"linkedin\" class=\"w-4 h-4\"><\/i><\/a><a href=\"#\" class=\"text-text-dark\/30 hover:text-accent-orange transition-colors\"><i data-lucide=\"twitter\" class=\"w-4 h-4\"><\/i><\/a><\/div><\/div><\/div><div class=\"team-card reveal bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100 transition-all duration-300\"><div class=\"overflow-hidden\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/user.jpg\" alt=\"Sarah Jenkins\" class=\"team-img w-full h-56 sm:h-64 object-cover transition-transform duration-500\"><\/div><div class=\"p-5 sm:p-6 text-center\"><h4 class=\"font-heading text-lg font-bold text-secondary-dark\">Sarah Jenkins<\/h4><p class=\"text-sm text-accent-orange font-medium mt-1\">Chief Engineer<\/p><p class=\"text-xs text-text-dark\/40 mt-3 leading-relaxed\">Expert in structural engineering with a passion for innovative, sustainable design solutions.<\/p><div class=\"flex justify-center gap-3 mt-4\"><a href=\"#\" class=\"text-text-dark\/30 hover:text-accent-orange transition-colors\"><i data-lucide=\"linkedin\" class=\"w-4 h-4\"><\/i><\/a><a href=\"#\" class=\"text-text-dark\/30 hover:text-accent-orange transition-colors\"><i data-lucide=\"twitter\" class=\"w-4 h-4\"><\/i><\/a><\/div><\/div><\/div><div class=\"team-card reveal bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100 transition-all duration-300\"><div class=\"overflow-hidden\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/user.jpg\" alt=\"Michael Ross\" class=\"team-img w-full h-56 sm:h-64 object-cover transition-transform duration-500\"><\/div><div class=\"p-5 sm:p-6 text-center\"><h4 class=\"font-heading text-lg font-bold text-secondary-dark\">Michael Ross<\/h4><p class=\"text-sm text-accent-orange font-medium mt-1\">Project Director<\/p><p class=\"text-xs text-text-dark\/40 mt-3 leading-relaxed\">Manages multi-million dollar portfolios, ensuring timelines and budgets are strictly adhered to.<\/p><div class=\"flex justify-center gap-3 mt-4\"><a href=\"#\" class=\"text-text-dark\/30 hover:text-accent-orange transition-colors\"><i data-lucide=\"linkedin\" class=\"w-4 h-4\"><\/i><\/a><a href=\"#\" class=\"text-text-dark\/30 hover:text-accent-orange transition-colors\"><i data-lucide=\"twitter\" class=\"w-4 h-4\"><\/i><\/a><\/div><\/div><\/div><div class=\"team-card reveal bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100 transition-all duration-300\"><div class=\"overflow-hidden\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/user.jpg\" alt=\"Emily Chen\" class=\"team-img w-full h-56 sm:h-64 object-cover transition-transform duration-500\"><\/div><div class=\"p-5 sm:p-6 text-center\"><h4 class=\"font-heading text-lg font-bold text-secondary-dark\">Emily Chen<\/h4><p class=\"text-sm text-accent-orange font-medium mt-1\">Head of Design<\/p><p class=\"text-xs text-text-dark\/40 mt-3 leading-relaxed\">Blends aesthetics with functionality, leading our architectural and interior design initiatives.<\/p><div class=\"flex justify-center gap-3 mt-4\"><a href=\"#\" class=\"text-text-dark\/30 hover:text-accent-orange transition-colors\"><i data-lucide=\"linkedin\" class=\"w-4 h-4\"><\/i><\/a><a href=\"#\" class=\"text-text-dark\/30 hover:text-accent-orange transition-colors\"><i data-lucide=\"twitter\" class=\"w-4 h-4\"><\/i><\/a><\/div><\/div><\/div><\/div><\/div><\/section>\r\n\r\n <section class=\"relative py-20 sm:py-24 overflow-hidden\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/4.png\" alt=\"\" class=\"absolute inset-0 w-full h-full object-cover\"><div class=\"absolute inset-0 bg-secondary-dark\/90\"><\/div><div class=\"noise-overlay absolute inset-0\"><\/div><div class=\"absolute top-0 right-0 w-[500px] h-[500px] bg-accent-orange\/10 rounded-full blur-[120px]\"><\/div><div class=\"relative max-w-container mx-auto px-4 sm:px-6 lg:px-8 text-center\"><div class=\"max-w-3xl mx-auto reveal\"><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-white tracking-tight mb-5\">Want to Work With <span class=\"text-accent-orange\">Our Team?<\/span><\/h2><p class=\"text-base sm:text-lg text-white\/60 leading-relaxed mb-8 max-w-xl mx-auto\">Whether you have a project in mind or want to join our team of experts, we'd love to hear from you.<\/p><div class=\"flex flex-col sm:flex-row justify-center gap-4\"><a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link inline-flex items-center justify-center gap-2 bg-accent-orange hover:bg-accent-light text-white font-semibold text-base px-8 py-4 rounded-lg btn-shine transition-colors duration-200\"><i data-lucide=\"phone\" class=\"w-5 h-5\"><\/i> Get Free Estimate<\/a><a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link inline-flex items-center justify-center gap-2 bg-white\/10 hover:bg-white\/20 border border-white\/20 text-white font-semibold text-base px-8 py-4 rounded-lg transition-all duration-200\"><i data-lucide=\"users\" class=\"w-5 h-5\"><\/i> Join Our Team<\/a><\/div><\/div><\/div><\/section>\r\n <\/div>\r\n\r\n \r\n <div id=\"page-services\" class=\"page-section\">\r\n <section class=\"relative py-32 sm:py-40 lg:py-48 flex items-center overflow-hidden\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/5.png\" alt=\"Construction Site\" class=\"absolute inset-0 w-full h-full object-cover\"><div class=\"hero-overlay absolute inset-0\"><\/div><div class=\"noise-overlay absolute inset-0\"><\/div><div class=\"absolute top-1\/4 right-0 w-[500px] h-[500px] bg-accent-orange\/5 rounded-full blur-[120px]\"><\/div><div class=\"relative z-10 max-w-container mx-auto px-4 sm:px-6 lg:px-8 text-center\"><div class=\"animate-fade-up opacity-0\"><div class=\"inline-flex items-center gap-2 bg-white\/10 backdrop-blur-sm border border-white\/10 rounded-full px-4 py-1.5 mb-6\"><div class=\"w-2 h-2 bg-accent-orange rounded-full\"><\/div><span class=\"text-white\/80 text-xs sm:text-sm font-medium tracking-wide uppercase\">What We Do<\/span><\/div><\/div><h1 class=\"animate-fade-up-delay-1 opacity-0 font-heading text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-white leading-[1.05] tracking-tight mb-4\">Our <span class=\"text-accent-orange\">Services<\/span><\/h1><p class=\"animate-fade-up-delay-2 opacity-0 text-base sm:text-lg text-white\/60 max-w-xl mx-auto mb-6\">Comprehensive construction and engineering solutions tailored to meet your project requirements from concept to completion.<\/p><div class=\"animate-fade-up-delay-3 opacity-0 flex items-center justify-center gap-2 text-sm text-white\/40\"><a href=\"javascript:void(0)\" data-page=\"home\" class=\"nav-link hover:text-accent-orange transition-colors\">Home<\/a><i data-lucide=\"chevron-right\" class=\"w-4 h-4\"><\/i><span class=\"text-white\/80\">Services<\/span><\/div><\/div><\/section>\r\n\r\n <section id=\"services-detailed\" class=\"py-20 sm:py-28 lg:py-32 bg-white\"><div class=\"max-w-container mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"text-center max-w-2xl mx-auto mb-14 sm:mb-16 reveal\"><div class=\"inline-flex items-center gap-2 mb-4\"><div class=\"w-8 h-px bg-accent-orange\"><\/div><span class=\"text-accent-orange font-semibold text-sm tracking-wider uppercase\">Expertise<\/span><div class=\"w-8 h-px bg-accent-orange\"><\/div><\/div><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark tracking-tight mb-4\">What We <span class=\"text-accent-orange\">Offer<\/span><\/h2><p class=\"text-base sm:text-lg text-text-dark\/50 leading-relaxed\">From ground-breaking to grand opening, we provide end-to-end solutions with precision and care.<\/p><\/div><div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8\"><div class=\"service-card reveal relative bg-white rounded-xl p-7 sm:p-8 shadow-sm border border-gray-100 hover:shadow-lg hover:border-accent-orange\/20 transition-all duration-300 group overflow-hidden\"><div class=\"w-14 h-14 bg-accent-orange\/10 rounded-xl flex items-center justify-center mb-5 group-hover:bg-accent-orange\/20 transition-colors duration-300\"><i data-lucide=\"building-2\" class=\"w-7 h-7 text-accent-orange\"><\/i><\/div><h3 class=\"font-heading text-lg sm:text-xl font-bold text-secondary-dark mb-3\">Commercial Construction<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed mb-4\">Office buildings, retail centers, and mixed-use developments built to the highest standards of quality and efficiency.<\/p><ul class=\"space-y-2 mb-5\"><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Office Complexes<\/li><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Retail Spaces<\/li><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Mixed-Use Developments<\/li><\/ul><a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link inline-flex items-center gap-1.5 text-accent-orange font-semibold text-sm group-hover:gap-2.5 transition-all duration-200\">Request Quote <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/a><\/div><div class=\"service-card reveal relative bg-white rounded-xl p-7 sm:p-8 shadow-sm border border-gray-100 hover:shadow-lg hover:border-accent-orange\/20 transition-all duration-300 group overflow-hidden\"><div class=\"w-14 h-14 bg-accent-orange\/10 rounded-xl flex items-center justify-center mb-5 group-hover:bg-accent-orange\/20 transition-colors duration-300\"><i data-lucide=\"home\" class=\"w-7 h-7 text-accent-orange\"><\/i><\/div><h3 class=\"font-heading text-lg sm:text-xl font-bold text-secondary-dark mb-3\">Residential Projects<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed mb-4\">Custom homes, apartments, and housing complexes designed for modern living with superior craftsmanship.<\/p><ul class=\"space-y-2 mb-5\"><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Custom Luxury Homes<\/li><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Apartment Complexes<\/li><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Gated Communities<\/li><\/ul><a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link inline-flex items-center gap-1.5 text-accent-orange font-semibold text-sm group-hover:gap-2.5 transition-all duration-200\">Request Quote <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/a><\/div><div class=\"service-card reveal relative bg-white rounded-xl p-7 sm:p-8 shadow-sm border border-gray-100 hover:shadow-lg hover:border-accent-orange\/20 transition-all duration-300 group overflow-hidden\"><div class=\"w-14 h-14 bg-accent-orange\/10 rounded-xl flex items-center justify-center mb-5 group-hover:bg-accent-orange\/20 transition-colors duration-300\"><i data-lucide=\"ruler\" class=\"w-7 h-7 text-accent-orange\"><\/i><\/div><h3 class=\"font-heading text-lg sm:text-xl font-bold text-secondary-dark mb-3\">Civil Engineering<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed mb-4\">Roads, bridges, dams, and infrastructure projects engineered with precision for long-term durability.<\/p><ul class=\"space-y-2 mb-5\"><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Bridge Construction<\/li><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Highway Development<\/li><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Dam & Water Systems<\/li><\/ul><a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link inline-flex items-center gap-1.5 text-accent-orange font-semibold text-sm group-hover:gap-2.5 transition-all duration-200\">Request Quote <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/a><\/div><div class=\"service-card reveal relative bg-white rounded-xl p-7 sm:p-8 shadow-sm border border-gray-100 hover:shadow-lg hover:border-accent-orange\/20 transition-all duration-300 group overflow-hidden\"><div class=\"w-14 h-14 bg-accent-orange\/10 rounded-xl flex items-center justify-center mb-5 group-hover:bg-accent-orange\/20 transition-colors duration-300\"><i data-lucide=\"hard-hat\" class=\"w-7 h-7 text-accent-orange\"><\/i><\/div><h3 class=\"font-heading text-lg sm:text-xl font-bold text-secondary-dark mb-3\">Project Management<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed mb-4\">End-to-end project oversight ensuring timely delivery, budget adherence, and quality assurance at every phase.<\/p><ul class=\"space-y-2 mb-5\"><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Schedule Management<\/li><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Budget Tracking<\/li><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Risk Mitigation<\/li><\/ul><a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link inline-flex items-center gap-1.5 text-accent-orange font-semibold text-sm group-hover:gap-2.5 transition-all duration-200\">Request Quote <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/a><\/div><div class=\"service-card reveal relative bg-white rounded-xl p-7 sm:p-8 shadow-sm border border-gray-100 hover:shadow-lg hover:border-accent-orange\/20 transition-all duration-300 group overflow-hidden\"><div class=\"w-14 h-14 bg-accent-orange\/10 rounded-xl flex items-center justify-center mb-5 group-hover:bg-accent-orange\/20 transition-colors duration-300\"><i data-lucide=\"hammer\" class=\"w-7 h-7 text-accent-orange\"><\/i><\/div><h3 class=\"font-heading text-lg sm:text-xl font-bold text-secondary-dark mb-3\">Renovation & Remodeling<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed mb-4\">Transform existing structures with modern upgrades, structural improvements, and aesthetic enhancements.<\/p><ul class=\"space-y-2 mb-5\"><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Structural Reinforcement<\/li><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Interior Remodeling<\/li><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Green Upgrades<\/li><\/ul><a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link inline-flex items-center gap-1.5 text-accent-orange font-semibold text-sm group-hover:gap-2.5 transition-all duration-200\">Request Quote <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/a><\/div><div class=\"service-card reveal relative bg-white rounded-xl p-7 sm:p-8 shadow-sm border border-gray-100 hover:shadow-lg hover:border-accent-orange\/20 transition-all duration-300 group overflow-hidden\"><div class=\"w-14 h-14 bg-accent-orange\/10 rounded-xl flex items-center justify-center mb-5 group-hover:bg-accent-orange\/20 transition-colors duration-300\"><i data-lucide=\"clipboard-check\" class=\"w-7 h-7 text-accent-orange\"><\/i><\/div><h3 class=\"font-heading text-lg sm:text-xl font-bold text-secondary-dark mb-3\">Consulting & Planning<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed mb-4\">Expert consultation on feasibility, design optimization, regulatory compliance, and strategic project planning.<\/p><ul class=\"space-y-2 mb-5\"><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Feasibility Studies<\/li><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Regulatory Compliance<\/li><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Cost Estimation<\/li><\/ul><a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link inline-flex items-center gap-1.5 text-accent-orange font-semibold text-sm group-hover:gap-2.5 transition-all duration-200\">Request Quote <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/a><\/div><\/div><\/div><\/section>\r\n\r\n <section class=\"py-20 sm:py-28 lg:py-32 bg-light-gray relative overflow-hidden\"><div class=\"absolute top-0 right-0 w-[600px] h-[600px] bg-accent-orange\/3 rounded-full blur-[120px]\"><\/div><div class=\"relative max-w-container mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"text-center max-w-2xl mx-auto mb-14 sm:mb-16 reveal\"><div class=\"inline-flex items-center gap-2 mb-4\"><div class=\"w-8 h-px bg-accent-orange\"><\/div><span class=\"text-accent-orange font-semibold text-sm tracking-wider uppercase\">How We Work<\/span><div class=\"w-8 h-px bg-accent-orange\"><\/div><\/div><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark tracking-tight mb-4\">Our <span class=\"text-accent-orange\">Process<\/span><\/h2><p class=\"text-base sm:text-lg text-text-dark\/50 leading-relaxed\">A streamlined, transparent approach that ensures every project is delivered on time, on budget, and beyond expectations.<\/p><\/div><div class=\"relative max-w-4xl mx-auto\"><div class=\"process-line hidden lg:block\"><\/div><div class=\"space-y-12 lg:space-y-16\"><div class=\"reveal relative flex flex-col lg:flex-row items-start lg:items-center gap-6 lg:gap-12\"><div class=\"flex-1 lg:text-right order-2 lg:order-1\"><h3 class=\"font-heading text-xl sm:text-2xl font-bold text-secondary-dark mb-2\">Consultation & Planning<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed\">We begin with a thorough understanding of your vision, site assessment, and feasibility studies to chart the best path forward.<\/p><\/div><div class=\"relative z-10 w-12 h-12 bg-accent-orange rounded-full flex items-center justify-center text-white font-heading font-bold text-lg shadow-lg flex-shrink-0 order-1 lg:order-2\">1<\/div><div class=\"flex-1 order-3\"><div class=\"bg-white rounded-xl p-4 shadow-sm border border-gray-100\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/9.jpg\" alt=\"Planning\" class=\"w-full h-32 object-cover rounded-lg\"><\/div><\/div><\/div><div class=\"reveal relative flex flex-col lg:flex-row items-start lg:items-center gap-6 lg:gap-12\"><div class=\"flex-1 order-2 lg:order-1\"><div class=\"bg-white rounded-xl p-4 shadow-sm border border-gray-100\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/10.jpg\" alt=\"Design\" class=\"w-full h-32 object-cover rounded-lg\"><\/div><\/div><div class=\"relative z-10 w-12 h-12 bg-accent-orange rounded-full flex items-center justify-center text-white font-heading font-bold text-lg shadow-lg flex-shrink-0 order-1 lg:order-2\">2<\/div><div class=\"flex-1 lg:text-left order-3\"><h3 class=\"font-heading text-xl sm:text-2xl font-bold text-secondary-dark mb-2\">Design & Engineering<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed\">Our architects and engineers create detailed blueprints, 3D models, and structural plans optimized for safety and cost.<\/p><\/div><\/div><div class=\"reveal relative flex flex-col lg:flex-row items-start lg:items-center gap-6 lg:gap-12\"><div class=\"flex-1 lg:text-right order-2 lg:order-1\"><h3 class=\"font-heading text-xl sm:text-2xl font-bold text-secondary-dark mb-2\">Construction & Execution<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed\">Our skilled workforce brings the plan to life with strict adherence to quality standards, safety protocols, and timelines.<\/p><\/div><div class=\"relative z-10 w-12 h-12 bg-accent-orange rounded-full flex items-center justify-center text-white font-heading font-bold text-lg shadow-lg flex-shrink-0 order-1 lg:order-2\">3<\/div><div class=\"flex-1 order-3\"><div class=\"bg-white rounded-xl p-4 shadow-sm border border-gray-100\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/11.jpg\" alt=\"Execution\" class=\"w-full h-32 object-cover rounded-lg\"><\/div><\/div><\/div><div class=\"reveal relative flex flex-col lg:flex-row items-start lg:items-center gap-6 lg:gap-12\"><div class=\"flex-1 order-2 lg:order-1\"><div class=\"bg-white rounded-xl p-4 shadow-sm border border-gray-100\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/2.png\" alt=\"Handover\" class=\"w-full h-32 object-cover rounded-lg\"><\/div><\/div><div class=\"relative z-10 w-12 h-12 bg-accent-orange rounded-full flex items-center justify-center text-white font-heading font-bold text-lg shadow-lg flex-shrink-0 order-1 lg:order-2\">4<\/div><div class=\"flex-1 lg:text-left order-3\"><h3 class=\"font-heading text-xl sm:text-2xl font-bold text-secondary-dark mb-2\">Quality Check & Handover<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed\">Rigorous multi-point inspections ensure everything meets our high standards before we hand over the keys to your new facility.<\/p><\/div><\/div><\/div><\/div><\/div><\/section>\r\n\r\n <section class=\"relative py-20 sm:py-24 overflow-hidden\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/1.png\" alt=\"\" class=\"absolute inset-0 w-full h-full object-cover\"><div class=\"absolute inset-0 bg-secondary-dark\/90\"><\/div><div class=\"noise-overlay absolute inset-0\"><\/div><div class=\"absolute top-0 right-0 w-[500px] h-[500px] bg-accent-orange\/10 rounded-full blur-[120px]\"><\/div><div class=\"relative max-w-container mx-auto px-4 sm:px-6 lg:px-8 text-center\"><div class=\"max-w-3xl mx-auto reveal\"><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-white tracking-tight mb-5\">Need a Custom <span class=\"text-accent-orange\">Solution?<\/span><\/h2><p class=\"text-base sm:text-lg text-white\/60 leading-relaxed mb-8 max-w-xl mx-auto\">Every project is unique. Let's discuss your specific requirements and build a tailored plan together.<\/p><div class=\"flex flex-col sm:flex-row justify-center gap-4\"><a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link inline-flex items-center justify-center gap-2 bg-accent-orange hover:bg-accent-light text-white font-semibold text-base px-8 py-4 rounded-lg btn-shine transition-colors duration-200\"><i data-lucide=\"phone\" class=\"w-5 h-5\"><\/i> Get Free Estimate<\/a><a href=\"javascript:void(0)\" data-page=\"projects\" class=\"nav-link inline-flex items-center justify-center gap-2 bg-white\/10 hover:bg-white\/20 border border-white\/20 text-white font-semibold text-base px-8 py-4 rounded-lg transition-all duration-200\"><i data-lucide=\"images\" class=\"w-5 h-5\"><\/i> View Our Projects<\/a><\/div><\/div><\/div><\/section>\r\n <\/div>\r\n\r\n \r\n <div id=\"page-projects\" class=\"page-section\">\r\n <section class=\"relative py-32 sm:py-40 lg:py-48 flex items-center overflow-hidden\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/4.png\" alt=\"Our Projects\" class=\"absolute inset-0 w-full h-full object-cover\"><div class=\"hero-overlay absolute inset-0\"><\/div><div class=\"noise-overlay absolute inset-0\"><\/div><div class=\"absolute top-1\/4 right-0 w-[500px] h-[500px] bg-accent-orange\/5 rounded-full blur-[120px]\"><\/div><div class=\"relative z-10 max-w-container mx-auto px-4 sm:px-6 lg:px-8 text-center\"><div class=\"animate-fade-up opacity-0\"><div class=\"inline-flex items-center gap-2 bg-white\/10 backdrop-blur-sm border border-white\/10 rounded-full px-4 py-1.5 mb-6\"><div class=\"w-2 h-2 bg-accent-orange rounded-full\"><\/div><span class=\"text-white\/80 text-xs sm:text-sm font-medium tracking-wide uppercase\">Portfolio<\/span><\/div><\/div><h1 class=\"animate-fade-up-delay-1 opacity-0 font-heading text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-white leading-[1.05] tracking-tight mb-4\">Our <span class=\"text-accent-orange\">Projects<\/span><\/h1><p class=\"animate-fade-up-delay-2 opacity-0 text-base sm:text-lg text-white\/60 max-w-xl mx-auto mb-6\">Explore our portfolio of landmark construction and engineering achievements across multiple sectors.<\/p><div class=\"animate-fade-up-delay-3 opacity-0 flex items-center justify-center gap-2 text-sm text-white\/40\"><a href=\"javascript:void(0)\" data-page=\"home\" class=\"nav-link hover:text-accent-orange transition-colors\">Home<\/a><i data-lucide=\"chevron-right\" class=\"w-4 h-4\"><\/i><span class=\"text-white\/80\">Projects<\/span><\/div><\/div><\/section>\r\n\r\n <section class=\"relative z-20 -mt-12 sm:-mt-16\"><div class=\"max-w-container mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"bg-white rounded-2xl shadow-xl border border-gray-100 p-6 sm:p-8\"><div class=\"grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8\"><div class=\"text-center reveal\"><div class=\"font-heading text-2xl sm:text-3xl lg:text-4xl font-bold text-accent-orange\">350+<\/div><div class=\"text-sm text-text-dark\/50 font-medium mt-1\">Projects Completed<\/div><\/div><div class=\"text-center reveal\"><div class=\"font-heading text-2xl sm:text-3xl lg:text-4xl font-bold text-accent-orange\">$2B+<\/div><div class=\"text-sm text-text-dark\/50 font-medium mt-1\">Total Project Value<\/div><\/div><div class=\"text-center reveal\"><div class=\"font-heading text-2xl sm:text-3xl lg:text-4xl font-bold text-accent-orange\">12<\/div><div class=\"text-sm text-text-dark\/50 font-medium mt-1\">States Covered<\/div><\/div><div class=\"text-center reveal\"><div class=\"font-heading text-2xl sm:text-3xl lg:text-4xl font-bold text-accent-orange\">95%<\/div><div class=\"text-sm text-text-dark\/50 font-medium mt-1\">On-Time Delivery<\/div><\/div><\/div><\/div><\/div><\/section>\r\n\r\n <section id=\"projects-grid\" class=\"py-20 sm:py-28 lg:py-32 bg-white\"><div class=\"max-w-container mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"text-center max-w-2xl mx-auto mb-12 sm:mb-14 reveal\"><div class=\"inline-flex items-center gap-2 mb-4\"><div class=\"w-8 h-px bg-accent-orange\"><\/div><span class=\"text-accent-orange font-semibold text-sm tracking-wider uppercase\">Our Work<\/span><div class=\"w-8 h-px bg-accent-orange\"><\/div><\/div><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark tracking-tight mb-4\">Featured <span class=\"text-accent-orange\">Projects<\/span><\/h2><\/div><div class=\"flex flex-wrap justify-center gap-2 sm:gap-3 mb-10 sm:mb-12 reveal\"><button class=\"filter-btn active px-5 py-2 rounded-full text-sm font-medium border border-gray-200 transition-all duration-200\" data-filter=\"all\">All Projects<\/button><button class=\"filter-btn px-5 py-2 rounded-full text-sm font-medium text-text-dark\/60 border border-gray-200 hover:border-accent-orange hover:text-accent-orange transition-all duration-200\" data-filter=\"commercial\">Commercial<\/button><button class=\"filter-btn px-5 py-2 rounded-full text-sm font-medium text-text-dark\/60 border border-gray-200 hover:border-accent-orange hover:text-accent-orange transition-all duration-200\" data-filter=\"residential\">Residential<\/button><button class=\"filter-btn px-5 py-2 rounded-full text-sm font-medium text-text-dark\/60 border border-gray-200 hover:border-accent-orange hover:text-accent-orange transition-all duration-200\" data-filter=\"infrastructure\">Infrastructure<\/button><\/div><div id=\"projectGrid\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 sm:gap-6\"><div class=\"project-card reveal relative rounded-xl overflow-hidden cursor-pointer group\" data-category=\"commercial\" onclick=\"openModal('Skyline Tower Complex', 'commercial', 'A stunning 42-story mixed-use development featuring Class A office space, luxury retail, and a rooftop observation deck.', 'https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/7.png', '42 Stories', '$180M', '2022-2024')\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/7.png\" alt=\"Skyline Tower\" class=\"w-full h-56 sm:h-64 object-cover img-zoom\"><div class=\"project-overlay absolute inset-0 bg-gradient-to-t from-secondary-dark\/90 via-secondary-dark\/40 to-transparent flex items-end p-5 sm:p-6\"><div><span class=\"text-accent-orange text-xs font-semibold tracking-wider uppercase\">Commercial<\/span><h4 class=\"text-white font-heading text-lg font-bold mt-1\">Skyline Tower Complex<\/h4><p class=\"text-white\/60 text-sm mt-1\">42-story mixed-use development<\/p><\/div><div class=\"ml-auto flex-shrink-0\"><div class=\"w-10 h-10 bg-white\/20 backdrop-blur-sm rounded-full flex items-center justify-center\"><i data-lucide=\"arrow-up-right\" class=\"w-5 h-5 text-white\"><\/i><\/div><\/div><\/div><\/div><div class=\"project-card reveal relative rounded-xl overflow-hidden cursor-pointer group sm:row-span-2\" data-category=\"infrastructure\" onclick=\"openModal('Metro River Bridge', 'infrastructure', 'A 2.4km cable-stayed bridge connecting the eastern and western districts.', 'https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/4.png', '2.4 km Span', '$320M', '2019-2023')\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/4.png\" alt=\"Metro Bridge\" class=\"w-full h-56 sm:h-full min-h-[16rem] sm:min-h-0 object-cover img-zoom\"><div class=\"project-overlay absolute inset-0 bg-gradient-to-t from-secondary-dark\/90 via-secondary-dark\/40 to-transparent flex items-end p-5 sm:p-6\"><div><span class=\"text-accent-orange text-xs font-semibold tracking-wider uppercase\">Infrastructure<\/span><h4 class=\"text-white font-heading text-lg font-bold mt-1\">Metro River Bridge<\/h4><p class=\"text-white\/60 text-sm mt-1\">2.4km cable-stayed bridge<\/p><\/div><div class=\"ml-auto flex-shrink-0\"><div class=\"w-10 h-10 bg-white\/20 backdrop-blur-sm rounded-full flex items-center justify-center\"><i data-lucide=\"arrow-up-right\" class=\"w-5 h-5 text-white\"><\/i><\/div><\/div><\/div><\/div><div class=\"project-card reveal relative rounded-xl overflow-hidden cursor-pointer group\" data-category=\"residential\" onclick=\"openModal('Green Valley Estates', 'residential', 'A premium 250-unit gated community featuring eco-friendly homes.', 'https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/3.png', '250 Units', '$85M', '2021-2023')\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/3.png\" alt=\"Green Valley\" class=\"w-full h-56 sm:h-64 object-cover img-zoom\"><div class=\"project-overlay absolute inset-0 bg-gradient-to-t from-secondary-dark\/90 via-secondary-dark\/40 to-transparent flex items-end p-5 sm:p-6\"><div><span class=\"text-accent-orange text-xs font-semibold tracking-wider uppercase\">Residential<\/span><h4 class=\"text-white font-heading text-lg font-bold mt-1\">Green Valley Estates<\/h4><p class=\"text-white\/60 text-sm mt-1\">250-unit premium housing<\/p><\/div><div class=\"ml-auto flex-shrink-0\"><div class=\"w-10 h-10 bg-white\/20 backdrop-blur-sm rounded-full flex items-center justify-center\"><i data-lucide=\"arrow-up-right\" class=\"w-5 h-5 text-white\"><\/i><\/div><\/div><\/div><\/div><div class=\"project-card reveal relative rounded-xl overflow-hidden cursor-pointer group\" data-category=\"commercial\" onclick=\"openModal('City Center Mall', 'commercial', 'A 500,000 sq ft state-of-the-art retail destination.', 'https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/8.png', '500,000 sq ft', '$145M', '2020-2022')\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/8.png\" alt=\"City Mall\" class=\"w-full h-56 sm:h-64 object-cover img-zoom\"><div class=\"project-overlay absolute inset-0 bg-gradient-to-t from-secondary-dark\/90 via-secondary-dark\/40 to-transparent flex items-end p-5 sm:p-6\"><div><span class=\"text-accent-orange text-xs font-semibold tracking-wider uppercase\">Commercial<\/span><h4 class=\"text-white font-heading text-lg font-bold mt-1\">City Center Mall<\/h4><p class=\"text-white\/60 text-sm mt-1\">500,000 sq ft retail space<\/p><\/div><div class=\"ml-auto flex-shrink-0\"><div class=\"w-10 h-10 bg-white\/20 backdrop-blur-sm rounded-full flex items-center justify-center\"><i data-lucide=\"arrow-up-right\" class=\"w-5 h-5 text-white\"><\/i><\/div><\/div><\/div><\/div><div class=\"project-card reveal relative rounded-xl overflow-hidden cursor-pointer group\" data-category=\"infrastructure\" onclick=\"openModal('Express Highway Corridor', 'infrastructure', 'A 68km six-lane highway connecting major industrial zones.', 'https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/5.png', '68 km Length', '$410M', '2018-2023')\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/5.png\" alt=\"Highway\" class=\"w-full h-56 sm:h-64 object-cover img-zoom\"><div class=\"project-overlay absolute inset-0 bg-gradient-to-t from-secondary-dark\/90 via-secondary-dark\/40 to-transparent flex items-end p-5 sm:p-6\"><div><span class=\"text-accent-orange text-xs font-semibold tracking-wider uppercase\">Infrastructure<\/span><h4 class=\"text-white font-heading text-lg font-bold mt-1\">Express Highway Corridor<\/h4><p class=\"text-white\/60 text-sm mt-1\">68km six-lane highway<\/p><\/div><div class=\"ml-auto flex-shrink-0\"><div class=\"w-10 h-10 bg-white\/20 backdrop-blur-sm rounded-full flex items-center justify-center\"><i data-lucide=\"arrow-up-right\" class=\"w-5 h-5 text-white\"><\/i><\/div><\/div><\/div><\/div><div class=\"project-card reveal relative rounded-xl overflow-hidden cursor-pointer group\" data-category=\"residential\" onclick=\"openModal('Sunset Residency', 'residential', 'Luxury waterfront apartments with panoramic ocean views.', 'https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/6.png', '180 Units', '$110M', '2022-2024')\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/6.png\" alt=\"Sunset Residency\" class=\"w-full h-56 sm:h-64 object-cover img-zoom\"><div class=\"project-overlay absolute inset-0 bg-gradient-to-t from-secondary-dark\/90 via-secondary-dark\/40 to-transparent flex items-end p-5 sm:p-6\"><div><span class=\"text-accent-orange text-xs font-semibold tracking-wider uppercase\">Residential<\/span><h4 class=\"text-white font-heading text-lg font-bold mt-1\">Sunset Residency<\/h4><p class=\"text-white\/60 text-sm mt-1\">Luxury waterfront apartments<\/p><\/div><div class=\"ml-auto flex-shrink-0\"><div class=\"w-10 h-10 bg-white\/20 backdrop-blur-sm rounded-full flex items-center justify-center\"><i data-lucide=\"arrow-up-right\" class=\"w-5 h-5 text-white\"><\/i><\/div><\/div><\/div><\/div><\/div><\/div><\/section>\r\n\r\n <section class=\"relative py-20 sm:py-24 overflow-hidden\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/1.png\" alt=\"\" class=\"absolute inset-0 w-full h-full object-cover\"><div class=\"absolute inset-0 bg-secondary-dark\/90\"><\/div><div class=\"noise-overlay absolute inset-0\"><\/div><div class=\"absolute top-0 right-0 w-[500px] h-[500px] bg-accent-orange\/10 rounded-full blur-[120px]\"><\/div><div class=\"relative max-w-container mx-auto px-4 sm:px-6 lg:px-8 text-center\"><div class=\"max-w-3xl mx-auto reveal\"><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-white tracking-tight mb-5\">Have a Project in <span class=\"text-accent-orange\">Mind?<\/span><\/h2><p class=\"text-base sm:text-lg text-white\/60 leading-relaxed mb-8 max-w-xl mx-auto\">Let's turn your vision into reality. Contact us for a free consultation and detailed project estimate.<\/p><div class=\"flex flex-col sm:flex-row justify-center gap-4\"><a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link inline-flex items-center justify-center gap-2 bg-accent-orange hover:bg-accent-light text-white font-semibold text-base px-8 py-4 rounded-lg btn-shine transition-colors duration-200\"><i data-lucide=\"phone\" class=\"w-5 h-5\"><\/i> Get Free Estimate<\/a><a href=\"javascript:void(0)\" data-page=\"services\" class=\"nav-link inline-flex items-center justify-center gap-2 bg-white\/10 hover:bg-white\/20 border border-white\/20 text-white font-semibold text-base px-8 py-4 rounded-lg transition-all duration-200\"><i data-lucide=\"wrench\" class=\"w-5 h-5\"><\/i> Our Services<\/a><\/div><\/div><\/div><\/section>\r\n <\/div>\r\n\r\n \r\n <div id=\"page-contact\" class=\"page-section\">\r\n <section class=\"relative py-32 sm:py-40 lg:py-48 flex items-center overflow-hidden\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/2.png\" alt=\"Contact Us\" class=\"absolute inset-0 w-full h-full object-cover\"><div class=\"hero-overlay absolute inset-0\"><\/div><div class=\"noise-overlay absolute inset-0\"><\/div><div class=\"absolute top-1\/4 right-0 w-[500px] h-[500px] bg-accent-orange\/5 rounded-full blur-[120px]\"><\/div><div class=\"relative z-10 max-w-container mx-auto px-4 sm:px-6 lg:px-8 text-center\"><div class=\"animate-fade-up opacity-0\"><div class=\"inline-flex items-center gap-2 bg-white\/10 backdrop-blur-sm border border-white\/10 rounded-full px-4 py-1.5 mb-6\"><div class=\"w-2 h-2 bg-accent-orange rounded-full\"><\/div><span class=\"text-white\/80 text-xs sm:text-sm font-medium tracking-wide uppercase\">Get In Touch<\/span><\/div><\/div><h1 class=\"animate-fade-up-delay-1 opacity-0 font-heading text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-white leading-[1.05] tracking-tight mb-4\">Contact <span class=\"text-accent-orange\">Us<\/span><\/h1><p class=\"animate-fade-up-delay-2 opacity-0 text-base sm:text-lg text-white\/60 max-w-xl mx-auto mb-6\">Have a project in mind? Reach out to us and our team will respond within 24 hours.<\/p><div class=\"animate-fade-up-delay-3 opacity-0 flex items-center justify-center gap-2 text-sm text-white\/40\"><a href=\"javascript:void(0)\" data-page=\"home\" class=\"nav-link hover:text-accent-orange transition-colors\">Home<\/a><i data-lucide=\"chevron-right\" class=\"w-4 h-4\"><\/i><span class=\"text-white\/80\">Contact<\/span><\/div><\/div><\/section>\r\n\r\n <section class=\"relative z-20 -mt-12 sm:-mt-16\"><div class=\"max-w-container mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 sm:gap-6\"><a href=\"tel:+11111111111\" class=\"contact-info-card reveal bg-white rounded-xl p-6 sm:p-8 shadow-lg border border-gray-100 flex items-start gap-4 group\"><div class=\"w-12 h-12 bg-accent-orange\/10 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:bg-accent-orange transition-colors duration-300\"><i data-lucide=\"phone\" class=\"w-6 h-6 text-accent-orange group-hover:text-white transition-colors duration-300\"><\/i><\/div><div><h4 class=\"font-heading text-base font-bold text-secondary-dark mb-1\">Call Us Anytime<\/h4><p class=\"text-sm text-text-dark\/50\">+1 (111) 111-1111<\/p><p class=\"text-sm text-text-dark\/50\">+1 (111) 111-1111<\/p><\/div><\/a><a href=\"mailto:info@Civil33.com\" class=\"contact-info-card reveal bg-white rounded-xl p-6 sm:p-8 shadow-lg border border-gray-100 flex items-start gap-4 group\"><div class=\"w-12 h-12 bg-accent-orange\/10 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:bg-accent-orange transition-colors duration-300\"><i data-lucide=\"mail\" class=\"w-6 h-6 text-accent-orange group-hover:text-white transition-colors duration-300\"><\/i><\/div><div><h4 class=\"font-heading text-base font-bold text-secondary-dark mb-1\">Email Us<\/h4><p class=\"text-sm text-text-dark\/50\">info@Civil33.com<\/p><p class=\"text-sm text-text-dark\/50\">projects@Civil33.com<\/p><\/div><\/a><a href=\"#\" class=\"contact-info-card reveal bg-white rounded-xl p-6 sm:p-8 shadow-lg border border-gray-100 flex items-start gap-4 group sm:col-span-2 lg:col-span-1\"><div class=\"w-12 h-12 bg-accent-orange\/10 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:bg-accent-orange transition-colors duration-300\"><i data-lucide=\"map-pin\" class=\"w-6 h-6 text-accent-orange group-hover:text-white transition-colors duration-300\"><\/i><\/div><div><h4 class=\"font-heading text-base font-bold text-secondary-dark mb-1\">Visit Our Office<\/h4><p class=\"text-sm text-text-dark\/50\">1111 Construction Avenue, Suite 1000<br>New York, NY 10050<\/p><\/div><\/a><\/div><\/div><\/section>\r\n\r\n <section id=\"contact-detailed\" class=\"py-20 sm:py-28 lg:py-32 bg-white\"><div class=\"max-w-container mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20\"><div class=\"reveal\"><div class=\"inline-flex items-center gap-2 mb-4\"><div class=\"w-8 h-px bg-accent-orange\"><\/div><span class=\"text-accent-orange font-semibold text-sm tracking-wider uppercase\">Send a Message<\/span><\/div><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark tracking-tight mb-4\">Let's Build <span class=\"text-accent-orange\">Together<\/span><\/h2><p class=\"text-base text-text-dark\/50 leading-relaxed mb-8\">Fill in the form below and our team will get back to you within 24 hours with a comprehensive plan.<\/p><form id=\"contactFormPage\" class=\"bg-light-gray rounded-2xl p-6 sm:p-8 lg:p-10\"><div class=\"space-y-5\"><div class=\"grid grid-cols-1 sm:grid-cols-2 gap-5\"><div><label class=\"block text-sm font-medium text-secondary-dark mb-1.5\">Full Name *<\/label><input type=\"text\" required placeholder=\"John Anderson\" class=\"form-input w-full px-4 py-3 rounded-lg border border-gray-200 bg-white text-sm text-text-dark placeholder:text-text-dark\/30 focus:outline-none transition-all duration-200\"><\/div><div><label class=\"block text-sm font-medium text-secondary-dark mb-1.5\">Phone Number<\/label><input type=\"tel\" placeholder=\"+1 (111) 111-1111\" class=\"form-input w-full px-4 py-3 rounded-lg border border-gray-200 bg-white text-sm text-text-dark placeholder:text-text-dark\/30 focus:outline-none transition-all duration-200\"><\/div><\/div><div><label class=\"block text-sm font-medium text-secondary-dark mb-1.5\">Email Address *<\/label><input type=\"email\" required placeholder=\"john@example.com\" class=\"form-input w-full px-4 py-3 rounded-lg border border-gray-200 bg-white text-sm text-text-dark placeholder:text-text-dark\/30 focus:outline-none transition-all duration-200\"><\/div><div><label class=\"block text-sm font-medium text-secondary-dark mb-1.5\">Subject<\/label><select class=\"form-input w-full px-4 py-3 rounded-lg border border-gray-200 bg-white text-sm text-text-dark focus:outline-none transition-all duration-200\"><option value=\"\">Select a topic<\/option><option>New Project Inquiry<\/option><option>Renovation Request<\/option><option>Consultation<\/option><option>Partnership<\/option><option>Other<\/option><\/select><\/div><div><label class=\"block text-sm font-medium text-secondary-dark mb-1.5\">Message *<\/label><textarea required rows=\"5\" placeholder=\"Tell us about your project...\" class=\"form-input w-full px-4 py-3 rounded-lg border border-gray-200 bg-white text-sm text-text-dark placeholder:text-text-dark\/30 focus:outline-none transition-all duration-200 resize-none\"><\/textarea><\/div><button type=\"submit\" class=\"w-full flex items-center justify-center gap-2 bg-accent-orange hover:bg-accent-light text-white font-semibold text-base px-8 py-4 rounded-lg btn-shine transition-colors duration-200\"><i data-lucide=\"send\" class=\"w-5 h-5\"><\/i> Send Message<\/button><\/div><div id=\"formSuccessPage\" class=\"hidden mt-5 p-4 bg-green-50 border border-green-200 rounded-lg text-sm text-green-700 flex items-center gap-2\"><i data-lucide=\"check-circle\" class=\"w-5 h-5 text-green-500\"><\/i> Thank you! Your message has been sent successfully.<\/div><\/form><\/div><div class=\"reveal\"><div class=\"rounded-2xl overflow-hidden shadow-lg border border-gray-100 mb-8\"><iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3022.2155732938225!2d-73.98784368459418!3d40.74844797932847!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9aeb1c6b5%3A0x35b1cfbc89a6097f!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1629794729807!5m2!1sen!2sus\" width=\"100%\" height=\"300\" style=\"border:0;\" allowfullscreen=\"\" loading=\"lazy\" class=\"w-full\"><\/iframe><\/div><div class=\"bg-light-gray rounded-xl p-6 sm:p-8 mb-8\"><h4 class=\"font-heading text-lg font-bold text-secondary-dark mb-4 flex items-center gap-2\"><i data-lucide=\"clock\" class=\"w-5 h-5 text-accent-orange\"><\/i> Business Hours<\/h4><div class=\"space-y-3\"><div class=\"flex justify-between items-center text-sm\"><span class=\"text-text-dark\/50\">Monday \u2013 Friday<\/span><span class=\"font-semibold text-secondary-dark bg-white px-3 py-1 rounded-md\">7:00 AM \u2013 6:00 PM<\/span><\/div><div class=\"flex justify-between items-center text-sm\"><span class=\"text-text-dark\/50\">Saturday<\/span><span class=\"font-semibold text-secondary-dark bg-white px-3 py-1 rounded-md\">8:00 AM \u2013 2:00 PM<\/span><\/div><div class=\"flex justify-between items-center text-sm\"><span class=\"text-text-dark\/50\">Sunday<\/span><span class=\"font-semibold text-red-500 bg-white px-3 py-1 rounded-md\">Closed<\/span><\/div><\/div><\/div><div class=\"bg-secondary-dark rounded-xl p-6 sm:p-8 relative overflow-hidden\"><div class=\"noise-overlay absolute inset-0\"><\/div><div class=\"absolute top-0 right-0 w-32 h-32 bg-accent-orange\/10 rounded-full blur-[60px]\"><\/div><div class=\"relative\"><div class=\"w-12 h-12 bg-accent-orange\/20 rounded-xl flex items-center justify-center mb-4\"><i data-lucide=\"alert-circle\" class=\"w-6 h-6 text-accent-orange\"><\/i><\/div><h4 class=\"font-heading text-lg font-bold text-white mb-2\">24\/7 Emergency Line<\/h4><p class=\"text-sm text-white\/50 leading-relaxed mb-4\">For urgent construction emergencies or site safety concerns, reach our on-call team anytime.<\/p><a href=\"tel:+11111111111\" class=\"inline-flex items-center gap-2 text-accent-orange font-semibold text-base hover:text-accent-light transition-colors\"><i data-lucide=\"phone-call\" class=\"w-5 h-5\"><\/i>+1 (111) 111-1111<\/a><\/div><\/div><\/div><\/div><\/section>\r\n\r\n <section class=\"py-20 sm:py-28 lg:py-32 bg-light-gray relative overflow-hidden\"><div class=\"absolute bottom-0 left-0 w-[500px] h-[500px] bg-accent-orange\/3 rounded-full blur-[100px]\"><\/div><div class=\"relative max-w-container mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"text-center max-w-2xl mx-auto mb-14 sm:mb-16 reveal\"><div class=\"inline-flex items-center gap-2 mb-4\"><div class=\"w-8 h-px bg-accent-orange\"><\/div><span class=\"text-accent-orange font-semibold text-sm tracking-wider uppercase\">FAQ<\/span><div class=\"w-8 h-px bg-accent-orange\"><\/div><\/div>\r\n <h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark tracking-tight mb-4\">Frequently Asked <span class=\"text-accent-orange\">Questions<\/span><\/h2>\r\n <p class=\"text-base sm:text-lg text-text-dark\/50 leading-relaxed\">Quick answers to common queries about our services and process.<\/p>\r\n <\/div>\r\n\r\n <div class=\"max-w-3xl mx-auto space-y-4\">\r\n <div class=\"faq-item reveal bg-white rounded-xl border border-gray-100 overflow-hidden\">\r\n <button onclick=\"toggleFaq(this)\" class=\"w-full flex items-center justify-between p-5 sm:p-6 text-left\">\r\n <span class=\"font-heading text-base sm:text-lg font-bold text-secondary-dark pr-4\">How do I request a project estimate?<\/span>\r\n <i data-lucide=\"chevron-down\" class=\"w-5 h-5 text-accent-orange flex-shrink-0 faq-icon\"><\/i>\r\n <\/button>\r\n <div class=\"faq-answer\"><p class=\"px-5 sm:px-6 pb-5 sm:pb-6 text-sm sm:text-base text-text-dark\/50 leading-relaxed\">You can request a free estimate by filling out our contact form, calling us directly at +1 (111) 111-1111, or emailing projects@Civil33.com.<\/p><\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item reveal bg-white rounded-xl border border-gray-100 overflow-hidden\">\r\n <button onclick=\"toggleFaq(this)\" class=\"w-full flex items-center justify-between p-5 sm:p-6 text-left\">\r\n <span class=\"font-heading text-base sm:text-lg font-bold text-secondary-dark pr-4\">What types of projects does Civil33 handle?<\/span>\r\n <i data-lucide=\"chevron-down\" class=\"w-5 h-5 text-accent-orange flex-shrink-0 faq-icon\"><\/i>\r\n <\/button>\r\n <div class=\"faq-answer\"><p class=\"px-5 sm:px-6 pb-5 sm:pb-6 text-sm sm:text-base text-text-dark\/50 leading-relaxed\">We handle a wide range of projects including commercial construction, residential developments, civil infrastructure, renovations, and consulting.<\/p><\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item reveal bg-white rounded-xl border border-gray-100 overflow-hidden\">\r\n <button onclick=\"toggleFaq(this)\" class=\"w-full flex items-center justify-between p-5 sm:p-6 text-left\">\r\n <span class=\"font-heading text-base sm:text-lg font-bold text-secondary-dark pr-4\">Are you licensed and insured?<\/span>\r\n <i data-lucide=\"chevron-down\" class=\"w-5 h-5 text-accent-orange flex-shrink-0 faq-icon\"><\/i>\r\n <\/button>\r\n <div class=\"faq-answer\"><p class=\"px-5 sm:px-6 pb-5 sm:pb-6 text-sm sm:text-base text-text-dark\/50 leading-relaxed\">Yes, Civil33 is fully licensed and insured. We carry comprehensive general liability, workers' compensation, and professional indemnity insurance.<\/p><\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item reveal bg-white rounded-xl border border-gray-100 overflow-hidden\">\r\n <button onclick=\"toggleFaq(this)\" class=\"w-full flex items-center justify-between p-5 sm:p-6 text-left\">\r\n <span class=\"font-heading text-base sm:text-lg font-bold text-secondary-dark pr-4\">Do you offer free consultations?<\/span>\r\n <i data-lucide=\"chevron-down\" class=\"w-5 h-5 text-accent-orange flex-shrink-0 faq-icon\"><\/i>\r\n <\/button>\r\n <div class=\"faq-answer\"><p class=\"px-5 sm:px-6 pb-5 sm:pb-6 text-sm sm:text-base text-text-dark\/50 leading-relaxed\">Yes! We offer a free initial consultation to discuss your project requirements, feasibility, and budget expectations.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/div> \r\n\r\n\r\n \r\n <div id=\"projectModal\" class=\"project-modal fixed inset-0 z-[70] flex items-center justify-center p-4\">\r\n <div class=\"absolute inset-0 bg-black\/60 backdrop-blur-sm\" onclick=\"closeModal()\"><\/div>\r\n <div class=\"modal-content relative bg-white rounded-2xl shadow-2xl max-w-3xl w-full max-h-[90vh] overflow-y-auto\">\r\n <button onclick=\"closeModal()\" class=\"absolute top-4 right-4 z-10 w-10 h-10 bg-white\/90 hover:bg-light-gray rounded-full flex items-center justify-center text-secondary-dark hover:text-accent-orange transition-colors shadow-sm\"><i data-lucide=\"x\" class=\"w-5 h-5\"><\/i><\/button>\r\n <div class=\"relative\"><img decoding=\"async\" id=\"modalImage\" src=\"\" alt=\"\" class=\"w-full h-56 sm:h-72 lg:h-80 object-cover rounded-t-2xl\"><div class=\"absolute inset-0 bg-gradient-to-t from-black\/30 to-transparent rounded-t-2xl\"><\/div><\/div>\r\n <div class=\"p-6 sm:p-8 lg:p-10\">\r\n <span id=\"modalCategory\" class=\"inline-block bg-accent-orange\/10 text-accent-orange text-xs font-semibold tracking-wider uppercase px-3 py-1 rounded-full mb-4\"><\/span>\r\n <h3 id=\"modalTitle\" class=\"font-heading text-2xl sm:text-3xl font-bold text-secondary-dark mb-4\"><\/h3>\r\n <p id=\"modalDesc\" class=\"text-base text-text-dark\/60 leading-relaxed mb-6\"><\/p>\r\n <div class=\"grid grid-cols-3 gap-4 mb-6\">\r\n <div class=\"bg-light-gray rounded-xl p-4 text-center\"><i data-lucide=\"maximize\" class=\"w-5 h-5 text-accent-orange mx-auto mb-1\"><\/i><div id=\"modalScale\" class=\"font-heading text-sm sm:text-base font-bold text-secondary-dark\"><\/div><div class=\"text-xs text-text-dark\/40\">Scale<\/div><\/div>\r\n <div class=\"bg-light-gray rounded-xl p-4 text-center\"><i data-lucide=\"banknote\" class=\"w-5 h-5 text-accent-orange mx-auto mb-1\"><\/i><div id=\"modalValue\" class=\"font-heading text-sm sm:text-base font-bold text-secondary-dark\"><\/div><div class=\"text-xs text-text-dark\/40\">Value<\/div><\/div>\r\n <div class=\"bg-light-gray rounded-xl p-4 text-center\"><i data-lucide=\"calendar\" class=\"w-5 h-5 text-accent-orange mx-auto mb-1\"><\/i><div id=\"modalTimeline\" class=\"font-heading text-sm sm:text-base font-bold text-secondary-dark\"><\/div><div class=\"text-xs text-text-dark\/40\">Timeline<\/div><\/div>\r\n <\/div>\r\n <a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link inline-flex items-center gap-2 bg-accent-orange hover:bg-accent-light text-white font-semibold text-sm px-6 py-3.5 rounded-lg btn-shine transition-colors duration-200\" onclick=\"closeModal()\"><i data-lucide=\"phone\" class=\"w-4 h-4\"><\/i> Discuss a Similar Project<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n\r\n \r\n <footer class=\"bg-secondary-dark relative overflow-hidden\">\r\n <div class=\"noise-overlay absolute inset-0\"><\/div>\r\n <div class=\"absolute bottom-0 right-0 w-[500px] h-[500px] bg-accent-orange\/3 rounded-full blur-[120px]\"><\/div>\r\n <div class=\"relative max-w-container mx-auto px-4 sm:px-6 lg:px-8 py-14 sm:py-16 lg:py-20\">\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-12\">\r\n <div class=\"sm:col-span-2 lg:col-span-1\">\r\n <a href=\"javascript:void(0)\" data-page=\"home\" class=\"nav-link flex items-center gap-2.5 mb-5\">\r\n <div class=\"w-10 h-10 bg-accent-orange rounded-lg flex items-center justify-center\"><i data-lucide=\"hard-hat\" class=\"w-6 h-6 text-white\"><\/i><\/div>\r\n <span class=\"font-heading text-xl font-bold text-white tracking-tight\">Civil<span class=\"text-accent-orange\">33<\/span><\/span>\r\n <\/a>\r\n <p class=\"text-sm text-white\/40 leading-relaxed mb-6 max-w-xs\">Building the future with strength and precision since 2005. Your trusted partner for commercial, residential, and infrastructure projects.<\/p>\r\n <div class=\"flex gap-3\">\r\n <a href=\"#\" class=\"w-10 h-10 bg-white\/5 hover:bg-accent-orange border border-white\/10 rounded-lg flex items-center justify-center transition-all duration-200\"><i data-lucide=\"facebook\" class=\"w-4 h-4 text-white\/60\" class=\"fa-brands fa-facebook-f text-white\/60 text-sm\"><\/i><\/a>\r\n <a href=\"#\" class=\"w-10 h-10 bg-white\/5 hover:bg-accent-orange border border-white\/10 rounded-lg flex items-center justify-center transition-all duration-200\"><i data-lucide=\"twitter\" class=\"w-4 h-4 text-white\/60\" class=\"fa-brands fa-facebook-f text-white\/60 text-sm\"><\/i><\/a>\r\n <a href=\"#\" class=\"w-10 h-10 bg-white\/5 hover:bg-accent-orange border border-white\/10 rounded-lg flex items-center justify-center transition-all duration-200\"><i data-lucide=\"instagram\" class=\"w-4 h-4 text-white\/60\" class=\"fa-brands fa-facebook-f text-white\/60 text-sm\"><\/i><\/a>\r\n <a href=\"#\" class=\"w-10 h-10 bg-white\/5 hover:bg-accent-orange border border-white\/10 rounded-lg flex items-center justify-center transition-all duration-200\"><i data-lucide=\"linkedin\" class=\"w-4 h-4 text-white\/60\" class=\"fa-brands fa-facebook-f text-white\/60 text-sm\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-heading text-sm font-bold text-white tracking-wider uppercase mb-5\">Quick Links<\/h4>\r\n <ul class=\"space-y-3\">\r\n <li><a href=\"javascript:void(0)\" data-page=\"home\" class=\"nav-link text-sm text-white\/40 hover:text-accent-orange transition-colors duration-200\">Home<\/a><\/li>\r\n <li><a href=\"javascript:void(0)\" data-page=\"about\" class=\"nav-link text-sm text-white\/40 hover:text-accent-orange transition-colors duration-200\">About Us<\/a><\/li>\r\n <li><a href=\"javascript:void(0)\" data-page=\"services\" class=\"nav-link text-sm text-white\/40 hover:text-accent-orange transition-colors duration-200\">Services<\/a><\/li>\r\n <li><a href=\"javascript:void(0)\" data-page=\"projects\" class=\"nav-link text-sm text-white\/40 hover:text-accent-orange transition-colors duration-200\">Projects<\/a><\/li>\r\n <li><a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link text-sm text-white\/40 hover:text-accent-orange transition-colors duration-200\">Contact<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-heading text-sm font-bold text-white tracking-wider uppercase mb-5\">Services<\/h4>\r\n <ul class=\"space-y-3\">\r\n <li><a href=\"javascript:void(0)\" data-page=\"services\" class=\"nav-link text-sm text-white\/40 hover:text-accent-orange transition-colors duration-200\">Commercial Construction<\/a><\/li>\r\n <li><a href=\"javascript:void(0)\" data-page=\"services\" class=\"nav-link text-sm text-white\/40 hover:text-accent-orange transition-colors duration-200\">Residential Projects<\/a><\/li>\r\n <li><a href=\"javascript:void(0)\" data-page=\"services\" class=\"nav-link text-sm text-white\/40 hover:text-accent-orange transition-colors duration-200\">Civil Engineering<\/a><\/li>\r\n <li><a href=\"javascript:void(0)\" data-page=\"services\" class=\"nav-link text-sm text-white\/40 hover:text-accent-orange transition-colors duration-200\">Project Management<\/a><\/li>\r\n <li><a href=\"javascript:void(0)\" data-page=\"services\" class=\"nav-link text-sm text-white\/40 hover:text-accent-orange transition-colors duration-200\">Renovation<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-heading text-sm font-bold text-white tracking-wider uppercase mb-5\">Contact Info<\/h4>\r\n <ul class=\"space-y-4\">\r\n <li class=\"flex items-start gap-3\"><i data-lucide=\"map-pin\" class=\"w-4 h-4 text-accent-orange mt-0.5 flex-shrink-0\"><\/i><span class=\"text-sm text-white\/40\">1111 Construction Aveniu, Suite 1000, NY 10500<\/span><\/li>\r\n <li class=\"flex items-center gap-3\"><i data-lucide=\"phone\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i><span class=\"text-sm text-white\/40\">+1 (111) 111-1111<\/span><\/li>\r\n <li class=\"flex items-center gap-3\"><i data-lucide=\"mail\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i><span class=\"text-sm text-white\/40\">info@Civil33.com<\/span><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"relative border-t border-white\/10\">\r\n <div class=\"max-w-container mx-auto px-4 sm:px-6 lg:px-8 py-5 sm:py-6\">\r\n <div class=\"flex flex-col sm:flex-row items-center justify-between gap-3 text-xs sm:text-sm text-white\/30\">\r\n <span>\u00a9 2024 Civil33 Construction. All rights reserved.<\/span>\r\n <div class=\"flex gap-6\">\r\n <a href=\"#\" class=\"hover:text-accent-orange transition-colors\">Privacy Policy<\/a>\r\n <a href=\"#\" class=\"hover:text-accent-orange transition-colors\">Terms of Service<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n \r\n <button id=\"backToTop\" class=\"fixed bottom-6 right-6 z-50 w-12 h-12 bg-accent-orange hover:bg-accent-light text-white rounded-xl shadow-lg flex items-center justify-center opacity-0 translate-y-4 pointer-events-none transition-all duration-300\" aria-label=\"Back to top\">\r\n <i data-lucide=\"chevron-up\" class=\"w-5 h-5\"><\/i>\r\n <\/button>\r\n\r\n\r\n \r\n <script>\r\n \/\/ Initialize Lucide Icons\r\n lucide.createIcons();\r\n\r\n \/\/ ========== SPA ROUTING ==========\r\n function navigateTo(pageId) {\r\n document.querySelectorAll('.page-section').forEach(p => p.classList.remove('active-page'));\r\n const target = document.getElementById('page-' + pageId);\r\n if (target) target.classList.add('active-page');\r\n window.scrollTo(0, 0); \r\n \r\n document.querySelectorAll('header .nav-link, .mobile-link').forEach(link => { \r\n link.classList.remove('text-accent-orange'); \r\n link.classList.add('text-text-dark\/70');\r\n link.classList.remove('bg-accent-orange\/10');\r\n });\r\n document.querySelectorAll(`.nav-link[data-page=\"${pageId}\"], .mobile-link[data-page=\"${pageId}\"]`).forEach(link => { \r\n link.classList.add('text-accent-orange'); \r\n link.classList.remove('text-text-dark\/70');\r\n if(link.classList.contains('mobile-link')) {\r\n link.classList.add('bg-accent-orange\/10');\r\n }\r\n });\r\n\r\n lucide.createIcons(); \r\n \r\n setTimeout(() => {\r\n const activePage = document.querySelector('.page-section.active-page');\r\n if(activePage) {\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('active');\r\n observer.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.15 });\r\n\r\n activePage.querySelectorAll('.reveal').forEach(el => {\r\n el.classList.remove('active');\r\n observer.observe(el);\r\n });\r\n \r\n activePage.querySelectorAll('[data-count]').forEach(el => {\r\n if(!el.dataset.counted){\r\n el.dataset.counted = \"1\"; \r\n const t = parseInt(el.dataset.count); \r\n let c = 0; \r\n const inc = t \/ 60; \r\n const tm = setInterval(() => {\r\n c += inc; \r\n if(c >= t) {\r\n el.textContent = t + (t === 98 ? '%' : '+'); \r\n clearInterval(tm);\r\n } else {\r\n el.textContent = Math.floor(c);\r\n }\r\n }, 25);\r\n }\r\n });\r\n }\r\n }, 50);\r\n }\r\n\r\n document.querySelectorAll('.nav-link[data-page], .mobile-link[data-page]').forEach(link => {\r\n link.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n const page = this.getAttribute('data-page');\r\n navigateTo(page);\r\n document.getElementById('mobileMenu').classList.remove('open');\r\n document.getElementById('mobileOverlay').classList.add('hidden');\r\n document.body.style.overflow = '';\r\n });\r\n });\r\n\r\n \/\/ ========== COMPONENT LOGICS ==========\r\n const mBtn = document.getElementById('mobileMenuBtn'), mM = document.getElementById('mobileMenu'), mC = document.getElementById('mobileMenuClose'), mO = document.getElementById('mobileOverlay');\r\n if(mBtn) mBtn.addEventListener('click', () => { mM.classList.add('open'); mO.classList.remove('hidden'); document.body.style.overflow = 'hidden'; });\r\n if(mC) mC.addEventListener('click', () => { mM.classList.remove('open'); mO.classList.add('hidden'); document.body.style.overflow = ''; });\r\n if(mO) mO.addEventListener('click', () => { mM.classList.remove('open'); mO.classList.add('hidden'); document.body.style.overflow = ''; });\r\n\r\n const header = document.getElementById('header');\r\n window.addEventListener('scroll', () => {\r\n if (window.scrollY > 50) { header.style.boxShadow = '0 4px 20px rgba(0,0,0,0.08)'; } \r\n else { header.style.boxShadow = 'none'; }\r\n });\r\n\r\n const revealObserver = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('active');\r\n revealObserver.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });\r\n document.querySelectorAll('.page-section.active-page .reveal').forEach(el => revealObserver.observe(el));\r\n\r\n const statObserver = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n const el = entry.target;\r\n if(!el.dataset.counted) {\r\n el.dataset.counted = \"1\";\r\n const target = parseInt(el.dataset.count);\r\n let current = 0;\r\n const increment = target \/ 60;\r\n const timer = setInterval(() => {\r\n current += increment;\r\n if (current >= target) {\r\n el.textContent = target + (target === 98 ? '%' : '+');\r\n clearInterval(timer);\r\n } else {\r\n el.textContent = Math.floor(current);\r\n }\r\n }, 25);\r\n statObserver.unobserve(el);\r\n }\r\n }\r\n });\r\n }, { threshold: 0.5 });\r\n document.querySelectorAll('.stat-number[data-count]').forEach(el => statObserver.observe(el));\r\n\r\n const filterBtns = document.querySelectorAll('.filter-btn');\r\n const projectCards = document.querySelectorAll('#projectGrid .project-card');\r\n filterBtns.forEach(btn => {\r\n btn.addEventListener('click', () => {\r\n filterBtns.forEach(b => b.classList.remove('active'));\r\n btn.classList.add('active');\r\n const filter = btn.dataset.filter;\r\n projectCards.forEach(card => {\r\n if (filter === 'all' || card.dataset.category === filter) {\r\n card.style.display = '';\r\n card.style.opacity = '0'; card.style.transform = 'scale(0.95)';\r\n setTimeout(() => { card.style.transition = 'opacity 0.4s ease, transform 0.4s ease'; card.style.opacity = '1'; card.style.transform = 'scale(1)'; }, 50);\r\n } else {\r\n card.style.transition = 'opacity 0.3s ease, transform 0.3s ease';\r\n card.style.opacity = '0'; card.style.transform = 'scale(0.95)';\r\n setTimeout(() => { card.style.display = 'none'; }, 300);\r\n }\r\n });\r\n });\r\n });\r\n\r\n const projectModal = document.getElementById('projectModal');\r\n function openModal(title, category, desc, img, scale, value, timeline) {\r\n document.getElementById('modalTitle').textContent = title;\r\n document.getElementById('modalCategory').textContent = category;\r\n document.getElementById('modalDesc').textContent = desc;\r\n document.getElementById('modalImage').src = img;\r\n document.getElementById('modalImage').alt = title;\r\n document.getElementById('modalScale').textContent = scale;\r\n document.getElementById('modalValue').textContent = value;\r\n document.getElementById('modalTimeline').textContent = timeline;\r\n projectModal.classList.add('open');\r\n document.body.style.overflow = 'hidden';\r\n lucide.createIcons();\r\n }\r\n\r\n function closeModal() {\r\n projectModal.classList.remove('open');\r\n document.body.style.overflow = '';\r\n }\r\n document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeModal(); });\r\n\r\n function handleFormSubmit(formId, successId) {\r\n const form = document.getElementById(formId);\r\n const success = document.getElementById(successId);\r\n if(form) {\r\n form.addEventListener('submit', (e) => {\r\n e.preventDefault();\r\n success.classList.remove('hidden');\r\n form.reset();\r\n lucide.createIcons();\r\n setTimeout(() => { success.classList.add('hidden'); }, 5000);\r\n });\r\n }\r\n }\r\n handleFormSubmit('contactFormHome', 'formSuccessHome');\r\n handleFormSubmit('contactFormPage', 'formSuccessPage');\r\n\r\n function toggleFaq(button) {\r\n const faqItem = button.parentElement;\r\n const answer = faqItem.querySelector('.faq-answer');\r\n const icon = button.querySelector('.faq-icon');\r\n const isOpen = answer.style.maxHeight && answer.style.maxHeight !== '0px';\r\n document.querySelectorAll('.faq-answer').forEach(a => { a.style.maxHeight = '0px'; });\r\n document.querySelectorAll('.faq-icon').forEach(i => { i.style.transform = 'rotate(0deg)'; });\r\n if (!isOpen) {\r\n answer.style.maxHeight = answer.scrollHeight + 'px';\r\n icon.style.transform = 'rotate(180deg)';\r\n }\r\n }\r\n\r\n const backToTop = document.getElementById('backToTop');\r\n window.addEventListener('scroll', () => {\r\n if (window.scrollY > 600) {\r\n backToTop.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');\r\n backToTop.classList.add('opacity-100', 'translate-y-0');\r\n } else {\r\n backToTop.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');\r\n backToTop.classList.remove('opacity-100', 'translate-y-0');\r\n }\r\n });\r\n backToTop.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); });\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\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>Civil33 Construction \u2014 Building the Future Civil33 Home About Services Projects Contact Get a Quote Menu Home About Services Projects Contact Get a Quote Trusted Since 2005 Building the Future with Strength & Precision From commercial complexes to infrastructure projects, we deliver excellence in every beam, every pour, every detail. Get a Quote View Projects […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-162","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/pages\/162","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/comments?post=162"}],"version-history":[{"count":35,"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/pages\/162\/revisions"}],"predecessor-version":[{"id":247,"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/pages\/162\/revisions\/247"}],"wp:attachment":[{"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/media?parent=162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Civil33 Construction \u2014 Building the Future<\/title>\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\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 href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Sora:wght@600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n \r\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n 'primary-dark': '#1f2933',\r\n 'secondary-dark': '#111827',\r\n 'accent-orange': '#f97316',\r\n 'accent-light': '#fb923c',\r\n 'light-gray': '#f3f4f6',\r\n 'text-dark': '#0f172a',\r\n },\r\n fontFamily: {\r\n 'heading': ['Sora', 'sans-serif'],\r\n 'body': ['Inter', 'sans-serif'],\r\n },\r\n maxWidth: {\r\n 'container': '1280px',\r\n },\r\n animation: {\r\n 'fade-up': 'fadeUp 0.8s ease-out forwards',\r\n 'fade-up-delay-1': 'fadeUp 0.8s ease-out 0.15s forwards',\r\n 'fade-up-delay-2': 'fadeUp 0.8s ease-out 0.3s forwards',\r\n 'fade-up-delay-3': 'fadeUp 0.8s ease-out 0.45s forwards',\r\n },\r\n keyframes: {\r\n fadeUp: {\r\n '0%': { opacity: '0', transform: 'translateY(30px)' },\r\n '100%': { opacity: '1', transform: 'translateY(0)' },\r\n },\r\n },\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n :root {\r\n --primary-dark: #1f2933;\r\n --secondary-dark: #111827;\r\n --accent-orange: #f97316;\r\n --accent-light: #fb923c;\r\n --white: #ffffff;\r\n --light-gray: #f3f4f6;\r\n --text-dark: #0f172a;\r\n }\r\n\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n html { scroll-behavior: auto; }\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n color: var(--text-dark);\r\n overflow-x: hidden;\r\n }\r\n\r\n ::-webkit-scrollbar { width: 8px; }\r\n ::-webkit-scrollbar-track { background: var(--light-gray); }\r\n ::-webkit-scrollbar-thumb { background: var(--primary-dark); border-radius: 4px; }\r\n ::-webkit-scrollbar-thumb:hover { background: var(--accent-orange); }\r\n\r\n .reveal {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: opacity 0.8s ease-out, transform 0.8s ease-out;\r\n }\r\n .reveal.active {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .hero-overlay {\r\n background: linear-gradient(135deg, rgba(17, 24, 39, 0.92) 0%, rgba(31, 41, 51, 0.80) 100%);\r\n }\r\n\r\n .service-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 0;\r\n height: 4px;\r\n background: var(--accent-orange);\r\n transition: width 0.4s ease;\r\n }\r\n .service-card:hover::before {\r\n width: 100%;\r\n }\r\n\r\n .feature-icon-wrap {\r\n transition: background 0.3s ease, transform 0.3s ease;\r\n }\r\n .feature-box:hover .feature-icon-wrap {\r\n background: var(--accent-orange);\r\n transform: scale(1.1);\r\n }\r\n .feature-box:hover .feature-icon-wrap svg {\r\n color: white;\r\n }\r\n\r\n .project-card .project-overlay {\r\n opacity: 0;\r\n transition: opacity 0.4s ease;\r\n }\r\n .project-card:hover .project-overlay {\r\n opacity: 1;\r\n }\r\n .project-card:hover img {\r\n transform: scale(1.08);\r\n }\r\n\r\n .stat-item:hover .stat-number {\r\n color: var(--accent-orange);\r\n }\r\n\r\n .testimonial-card {\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n }\r\n .testimonial-card:hover {\r\n transform: translateY(-6px);\r\n box-shadow: 0 20px 40px rgba(0,0,0,0.1);\r\n }\r\n\r\n .mobile-menu {\r\n transform: translateX(100%);\r\n transition: transform 0.3s ease;\r\n }\r\n .mobile-menu.open {\r\n transform: translateX(0);\r\n }\r\n\r\n .btn-shine {\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n .btn-shine::after {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n left: -75%;\r\n width: 50%;\r\n height: 200%;\r\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);\r\n transform: skewX(-25deg);\r\n transition: left 0.5s ease;\r\n }\r\n .btn-shine:hover::after {\r\n left: 125%;\r\n }\r\n\r\n .noise-overlay {\r\n background-image: url('https:\/\/grainy-gradients.vercel.app\/noise.svg');\r\n opacity: 0.04;\r\n mix-blend-mode: overlay;\r\n pointer-events: none;\r\n }\r\n\r\n .filter-btn.active {\r\n background: var(--accent-orange);\r\n color: white;\r\n border-color: var(--accent-orange);\r\n }\r\n\r\n .form-input:focus {\r\n border-color: var(--accent-orange);\r\n box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);\r\n }\r\n\r\n .img-zoom {\r\n transition: transform 0.6s ease;\r\n }\r\n\r\n @keyframes pulseRing {\r\n 0% { transform: scale(1); opacity: 0.5; }\r\n 100% { transform: scale(1.5); opacity: 0; }\r\n }\r\n .pulse-ring::before {\r\n content: '';\r\n position: absolute;\r\n inset: -4px;\r\n border: 2px solid var(--accent-orange);\r\n border-radius: inherit;\r\n animation: pulseRing 2s ease-out infinite;\r\n }\r\n\r\n .process-line {\r\n position: absolute;\r\n left: 24px;\r\n top: 60px;\r\n bottom: 0;\r\n width: 2px;\r\n background: linear-gradient(to bottom, var(--accent-orange), #e5e7eb);\r\n }\r\n @media (min-width: 1024px) {\r\n .process-line {\r\n top: 0;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 2px;\r\n height: 100%;\r\n }\r\n }\r\n\r\n .project-modal {\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: opacity 0.3s ease;\r\n }\r\n .project-modal.open {\r\n opacity: 1;\r\n pointer-events: auto;\r\n }\r\n .project-modal .modal-content {\r\n transform: translateY(30px) scale(0.95);\r\n transition: transform 0.3s ease;\r\n }\r\n .project-modal.open .modal-content {\r\n transform: translateY(0) scale(1);\r\n }\r\n\r\n .contact-info-card {\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n }\r\n .contact-info-card:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 0 12px 24px rgba(0,0,0,0.06);\r\n }\r\n\r\n .team-card:hover .team-img {\r\n transform: scale(1.05);\r\n }\r\n .team-card:hover {\r\n transform: translateY(-6px);\r\n box-shadow: 0 20px 40px rgba(0,0,0,0.08);\r\n }\r\n\r\n .timeline-item::before {\r\n content: '';\r\n position: absolute;\r\n left: 0;\r\n top: 8px;\r\n width: 16px;\r\n height: 16px;\r\n background: var(--accent-orange);\r\n border-radius: 50%;\r\n border: 4px solid white;\r\n box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.2);\r\n z-index: 1;\r\n }\r\n @media (min-width: 640px) {\r\n .timeline-item::before {\r\n left: 12px;\r\n }\r\n }\r\n .timeline-line {\r\n position: absolute;\r\n left: 7px;\r\n top: 0;\r\n bottom: 0;\r\n width: 2px;\r\n background: linear-gradient(to bottom, var(--accent-orange), #e5e7eb);\r\n }\r\n @media (min-width: 640px) {\r\n .timeline-line {\r\n left: 19px;\r\n }\r\n }\r\n\r\n .faq-answer {\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: max-height 0.3s ease;\r\n }\r\n .faq-icon { transition: transform 0.3s; }\r\n\r\n \/* SPA Page System *\/\r\n .page-section { display: none; }\r\n .page-section.active-page { display: block; }\r\n\r\n \/* Responsive: ensure images don't overflow *\/\r\n img { max-width: 100%; }\r\n <\/style>\r\n<\/head>\r\n\r\n<body class=\"font-body\">\r\n\r\n \r\n \r\n \r\n <header id=\"header\" class=\"fixed top-0 left-0 w-full z-50 transition-all duration-300\" style=\"background: rgba(255,255,255,0.92); backdrop-filter: blur(16px);\">\r\n <div class=\"max-w-container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"flex items-center justify-between h-16 sm:h-20\">\r\n <a href=\"javascript:void(0)\" class=\"nav-link flex items-center gap-2.5\" data-page=\"home\">\r\n <div class=\"w-10 h-10 bg-accent-orange rounded-lg flex items-center justify-center\">\r\n <i data-lucide=\"hard-hat\" class=\"w-6 h-6 text-white\"><\/i>\r\n <\/div>\r\n <span class=\"font-heading text-xl sm:text-2xl font-bold text-secondary-dark tracking-tight\">Civil<span class=\"text-accent-orange\">33<\/span><\/span>\r\n <\/a>\r\n\r\n <nav class=\"hidden lg:flex items-center gap-8\">\r\n <a href=\"javascript:void(0)\" class=\"nav-link text-sm font-medium text-accent-orange\" data-page=\"home\">Home<\/a>\r\n <a href=\"javascript:void(0)\" class=\"nav-link text-sm font-medium text-text-dark\/70 hover:text-accent-orange transition-colors duration-200\" data-page=\"about\">About<\/a>\r\n <a href=\"javascript:void(0)\" class=\"nav-link text-sm font-medium text-text-dark\/70 hover:text-accent-orange transition-colors duration-200\" data-page=\"services\">Services<\/a>\r\n <a href=\"javascript:void(0)\" class=\"nav-link text-sm font-medium text-text-dark\/70 hover:text-accent-orange transition-colors duration-200\" data-page=\"projects\">Projects<\/a>\r\n <a href=\"javascript:void(0)\" class=\"nav-link text-sm font-medium text-text-dark\/70 hover:text-accent-orange transition-colors duration-200\" data-page=\"contact\">Contact<\/a>\r\n <\/nav>\r\n\r\n <div class=\"flex items-center gap-4\">\r\n <a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link hidden sm:inline-flex items-center gap-2 bg-accent-orange hover:bg-accent-light text-white font-semibold text-sm px-5 py-2.5 rounded-lg btn-shine transition-colors duration-200\">\r\n <i data-lucide=\"phone\" class=\"w-4 h-4\"><\/i>\r\n Get a Quote\r\n <\/a>\r\n <button id=\"mobileMenuBtn\" class=\"lg:hidden p-2 text-secondary-dark hover:text-accent-orange transition-colors\">\r\n <i data-lucide=\"menu\" class=\"w-6 h-6\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"absolute bottom-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent\"><\/div>\r\n <\/header>\r\n\r\n \r\n <div id=\"mobileMenu\" class=\"mobile-menu fixed top-0 right-0 w-80 max-w-[85vw] h-full bg-white z-[60] shadow-2xl\">\r\n <div class=\"p-6\">\r\n <div class=\"flex items-center justify-between mb-8\">\r\n <span class=\"font-heading text-xl font-bold text-secondary-dark\">Menu<\/span>\r\n <button id=\"mobileMenuClose\" class=\"p-2 text-secondary-dark hover:text-accent-orange\">\r\n <i data-lucide=\"x\" class=\"w-6 h-6\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <nav class=\"flex flex-col gap-1\">\r\n <a href=\"javascript:void(0)\" class=\"mobile-link px-4 py-3 rounded-lg text-base font-medium text-accent-orange bg-accent-orange\/10 transition-colors\" data-page=\"home\">Home<\/a>\r\n <a href=\"javascript:void(0)\" class=\"mobile-link px-4 py-3 rounded-lg text-base font-medium text-text-dark hover:bg-light-gray hover:text-accent-orange transition-colors\" data-page=\"about\">About<\/a>\r\n <a href=\"javascript:void(0)\" class=\"mobile-link px-4 py-3 rounded-lg text-base font-medium text-text-dark hover:bg-light-gray hover:text-accent-orange transition-colors\" data-page=\"services\">Services<\/a>\r\n <a href=\"javascript:void(0)\" class=\"mobile-link px-4 py-3 rounded-lg text-base font-medium text-text-dark hover:bg-light-gray hover:text-accent-orange transition-colors\" data-page=\"projects\">Projects<\/a>\r\n <a href=\"javascript:void(0)\" class=\"mobile-link px-4 py-3 rounded-lg text-base font-medium text-text-dark hover:bg-light-gray hover:text-accent-orange transition-colors\" data-page=\"contact\">Contact<\/a>\r\n <\/nav>\r\n <div class=\"mt-8\">\r\n <a href=\"javascript:void(0)\" data-page=\"contact\" class=\"mobile-link nav-link flex items-center justify-center gap-2 w-full bg-accent-orange text-white font-semibold text-base px-6 py-3.5 rounded-lg\">\r\n <i data-lucide=\"phone\" class=\"w-5 h-5\"><\/i>\r\n Get a Quote\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"mobileOverlay\" class=\"fixed inset-0 bg-black\/40 z-[55] hidden\"><\/div>\r\n\r\n\r\n \r\n <div id=\"page-home\" class=\"page-section active-page\">\r\n <section id=\"home\" class=\"relative min-h-[90vh] sm:min-h-screen flex items-center overflow-hidden\">\r\n <img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/1.png\" alt=\"Construction Site\" class=\"absolute inset-0 w-full h-full object-cover\">\r\n <div class=\"hero-overlay absolute inset-0\"><\/div>\r\n <div class=\"noise-overlay absolute inset-0\"><\/div>\r\n <div class=\"absolute top-1\/4 right-0 w-[500px] h-[500px] bg-accent-orange\/5 rounded-full blur-[120px]\"><\/div>\r\n <div class=\"absolute bottom-0 left-0 w-[400px] h-[400px] bg-accent-orange\/5 rounded-full blur-[100px]\"><\/div>\r\n <div class=\"relative z-10 max-w-container mx-auto px-4 sm:px-6 lg:px-8 py-32 sm:py-40\">\r\n <div class=\"max-w-3xl\">\r\n <div class=\"animate-fade-up opacity-0 inline-flex items-center gap-2 bg-white\/10 backdrop-blur-sm border border-white\/10 rounded-full px-4 py-1.5 mb-6\">\r\n <div class=\"w-2 h-2 bg-accent-orange rounded-full\"><\/div>\r\n <span class=\"text-white\/80 text-xs sm:text-sm font-medium tracking-wide uppercase\">Trusted Since 2005<\/span>\r\n <\/div>\r\n <h1 class=\"animate-fade-up-delay-1 opacity-0 font-heading text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-white leading-[1.05] tracking-tight mb-6\">\r\n Building the Future with <span class=\"text-accent-orange\">Strength<\/span> & Precision\r\n <\/h1>\r\n <p class=\"animate-fade-up-delay-2 opacity-0 text-base sm:text-lg md:text-xl text-white\/70 leading-relaxed mb-10 max-w-xl\">\r\n From commercial complexes to infrastructure projects, we deliver excellence in every beam, every pour, every detail.\r\n <\/p>\r\n <div class=\"animate-fade-up-delay-3 opacity-0 flex flex-col sm:flex-row gap-4\">\r\n <a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link relative inline-flex items-center justify-center gap-2 bg-accent-orange hover:bg-accent-light text-white font-semibold text-base px-8 py-4 rounded-lg btn-shine transition-colors duration-200 pulse-ring\">\r\n <i data-lucide=\"file-text\" class=\"w-5 h-5\"><\/i> Get a Quote\r\n <\/a>\r\n <a href=\"javascript:void(0)\" data-page=\"projects\" class=\"nav-link inline-flex items-center justify-center gap-2 bg-white\/10 hover:bg-white\/20 backdrop-blur-sm border border-white\/20 text-white font-semibold text-base px-8 py-4 rounded-lg transition-all duration-200\">\r\n <i data-lucide=\"images\" class=\"w-5 h-5\"><\/i> View Projects\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"absolute bottom-8 left-1\/2 -translate-x-1\/2 z-10 hidden sm:flex flex-col items-center gap-2\">\r\n <span class=\"text-white\/40 text-xs tracking-widest uppercase\">Scroll<\/span>\r\n <div class=\"w-px h-10 bg-gradient-to-b from-white\/40 to-transparent\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"relative z-20 -mt-16 sm:-mt-20\">\r\n <div class=\"max-w-container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"bg-white rounded-2xl shadow-xl border border-gray-100 p-6 sm:p-8 lg:p-10\">\r\n <div class=\"grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8\">\r\n <div class=\"stat-item text-center reveal\"><div class=\"stat-number font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark transition-colors duration-300\" data-count=\"18\">0<\/div><div class=\"text-sm sm:text-base text-text-dark\/50 font-medium mt-1\">Years Experience<\/div><\/div>\r\n <div class=\"stat-item text-center reveal\"><div class=\"stat-number font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark transition-colors duration-300\" data-count=\"350\">0<\/div><div class=\"text-sm sm:text-base text-text-dark\/50 font-medium mt-1\">Projects Completed<\/div><\/div>\r\n <div class=\"stat-item text-center reveal\"><div class=\"stat-number font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark transition-colors duration-300\" data-count=\"120\">0<\/div><div class=\"text-sm sm:text-base text-text-dark\/50 font-medium mt-1\">Expert Engineers<\/div><\/div>\r\n <div class=\"stat-item text-center reveal\"><div class=\"stat-number font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark transition-colors duration-300\" data-count=\"98\">0<\/div><div class=\"text-sm sm:text-base text-text-dark\/50 font-medium mt-1\">Client Satisfaction %<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"about\" class=\"py-20 sm:py-28 lg:py-32 bg-white\">\r\n <div class=\"max-w-container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center\">\r\n <div class=\"reveal relative\">\r\n <div class=\"relative rounded-2xl overflow-hidden shadow-2xl\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/2.png\" alt=\"About Civil33\" class=\"w-full h-[300px] sm:h-[400px] lg:h-[500px] object-cover\"><div class=\"absolute inset-0 bg-gradient-to-t from-secondary-dark\/20 to-transparent\"><\/div><\/div>\r\n <div class=\"absolute -bottom-6 -right-4 sm:right-6 bg-accent-orange text-white rounded-xl p-5 sm:p-6 shadow-lg\"><div class=\"font-heading text-3xl sm:text-4xl font-bold\">18+<\/div><div class=\"text-sm font-medium text-white\/80\">Years of<br>Excellence<\/div><\/div>\r\n <div class=\"absolute -top-4 -left-4 w-20 h-20 border-2 border-accent-orange\/20 rounded-xl -z-10\"><\/div>\r\n <\/div>\r\n <div class=\"reveal\">\r\n <div class=\"inline-flex items-center gap-2 mb-4\"><div class=\"w-8 h-px bg-accent-orange\"><\/div><span class=\"text-accent-orange font-semibold text-sm tracking-wider uppercase\">About Us<\/span><\/div>\r\n <h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark tracking-tight mb-6\">We Construct Dreams Into <span class=\"text-accent-orange\">Reality<\/span><\/h2>\r\n <p class=\"text-base sm:text-lg text-text-dark\/60 leading-relaxed mb-8\">Civil33 Construction has been at the forefront of the civil engineering and construction industry since 2005. We combine innovative engineering solutions with time-tested construction practices to deliver projects that stand the test of time.<\/p>\r\n <div class=\"space-y-4 mb-8\">\r\n <div class=\"flex items-start gap-3\"><div class=\"flex-shrink-0 w-6 h-6 bg-accent-orange\/10 rounded-full flex items-center justify-center mt-0.5\"><i data-lucide=\"check\" class=\"w-3.5 h-3.5 text-accent-orange\"><\/i><\/div><div><span class=\"font-semibold text-secondary-dark\">18+ Years of Experience<\/span><p class=\"text-sm text-text-dark\/50\">Proven track record across diverse project types<\/p><\/div><\/div>\r\n <div class=\"flex items-start gap-3\"><div class=\"flex-shrink-0 w-6 h-6 bg-accent-orange\/10 rounded-full flex items-center justify-center mt-0.5\"><i data-lucide=\"check\" class=\"w-3.5 h-3.5 text-accent-orange\"><\/i><\/div><div><span class=\"font-semibold text-secondary-dark\">Unwavering Reliability<\/span><p class=\"text-sm text-text-dark\/50\">On-time, on-budget, every single time<\/p><\/div><\/div>\r\n <div class=\"flex items-start gap-3\"><div class=\"flex-shrink-0 w-6 h-6 bg-accent-orange\/10 rounded-full flex items-center justify-center mt-0.5\"><i data-lucide=\"check\" class=\"w-3.5 h-3.5 text-accent-orange\"><\/i><\/div><div><span class=\"font-semibold text-secondary-dark\">Premium Quality Standards<\/span><p class=\"text-sm text-text-dark\/50\">ISO 9001 certified processes and materials<\/p><\/div><\/div>\r\n <\/div>\r\n <a href=\"javascript:void(0)\" data-page=\"services\" class=\"nav-link inline-flex items-center gap-2 bg-secondary-dark hover:bg-primary-dark text-white font-semibold text-sm px-6 py-3.5 rounded-lg btn-shine transition-colors duration-200\">Explore Our Services <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"services\" class=\"py-20 sm:py-28 lg:py-32 bg-light-gray relative overflow-hidden\">\r\n <div class=\"absolute top-0 right-0 w-[600px] h-[600px] bg-accent-orange\/3 rounded-full blur-[120px]\"><\/div>\r\n <div class=\"relative max-w-container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"text-center max-w-2xl mx-auto mb-14 sm:mb-16 reveal\"><div class=\"inline-flex items-center gap-2 mb-4\"><div class=\"w-8 h-px bg-accent-orange\"><\/div><span class=\"text-accent-orange font-semibold text-sm tracking-wider uppercase\">What We Do<\/span><div class=\"w-8 h-px bg-accent-orange\"><\/div><\/div><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark tracking-tight mb-4\">Our Core <span class=\"text-accent-orange\">Services<\/span><\/h2><p class=\"text-base sm:text-lg text-text-dark\/50 leading-relaxed\">Comprehensive construction and engineering solutions tailored to meet your project requirements from concept to completion.<\/p><\/div>\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8\">\r\n <div class=\"service-card reveal relative bg-white rounded-xl p-7 sm:p-8 shadow-sm border border-gray-100 hover:shadow-lg hover:border-accent-orange\/20 transition-all duration-300 group overflow-hidden\"><div class=\"w-14 h-14 bg-accent-orange\/10 rounded-xl flex items-center justify-center mb-5 group-hover:bg-accent-orange\/20 transition-colors duration-300\"><i data-lucide=\"building-2\" class=\"w-7 h-7 text-accent-orange\"><\/i><\/div><h3 class=\"font-heading text-lg sm:text-xl font-bold text-secondary-dark mb-3\">Commercial Construction<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed mb-4\">Office buildings, retail centers, and mixed-use developments built to the highest standards.<\/p><a href=\"javascript:void(0)\" data-page=\"services\" class=\"nav-link inline-flex items-center gap-1.5 text-accent-orange font-semibold text-sm group-hover:gap-2.5 transition-all duration-200\">Learn More <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/a><\/div>\r\n <div class=\"service-card reveal relative bg-white rounded-xl p-7 sm:p-8 shadow-sm border border-gray-100 hover:shadow-lg hover:border-accent-orange\/20 transition-all duration-300 group overflow-hidden\"><div class=\"w-14 h-14 bg-accent-orange\/10 rounded-xl flex items-center justify-center mb-5 group-hover:bg-accent-orange\/20 transition-colors duration-300\"><i data-lucide=\"home\" class=\"w-7 h-7 text-accent-orange\"><\/i><\/div><h3 class=\"font-heading text-lg sm:text-xl font-bold text-secondary-dark mb-3\">Residential Projects<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed mb-4\">Custom homes, apartments, and housing complexes designed for modern living.<\/p><a href=\"javascript:void(0)\" data-page=\"services\" class=\"nav-link inline-flex items-center gap-1.5 text-accent-orange font-semibold text-sm group-hover:gap-2.5 transition-all duration-200\">Learn More <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/a><\/div>\r\n <div class=\"service-card reveal relative bg-white rounded-xl p-7 sm:p-8 shadow-sm border border-gray-100 hover:shadow-lg hover:border-accent-orange\/20 transition-all duration-300 group overflow-hidden\"><div class=\"w-14 h-14 bg-accent-orange\/10 rounded-xl flex items-center justify-center mb-5 group-hover:bg-accent-orange\/20 transition-colors duration-300\"><i data-lucide=\"ruler\" class=\"w-7 h-7 text-accent-orange\"><\/i><\/div><h3 class=\"font-heading text-lg sm:text-xl font-bold text-secondary-dark mb-3\">Civil Engineering<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed mb-4\">Roads, bridges, dams, and infrastructure projects with precision engineering.<\/p><a href=\"javascript:void(0)\" data-page=\"services\" class=\"nav-link inline-flex items-center gap-1.5 text-accent-orange font-semibold text-sm group-hover:gap-2.5 transition-all duration-200\">Learn More <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/a><\/div>\r\n <div class=\"service-card reveal relative bg-white rounded-xl p-7 sm:p-8 shadow-sm border border-gray-100 hover:shadow-lg hover:border-accent-orange\/20 transition-all duration-300 group overflow-hidden\"><div class=\"w-14 h-14 bg-accent-orange\/10 rounded-xl flex items-center justify-center mb-5 group-hover:bg-accent-orange\/20 transition-colors duration-300\"><i data-lucide=\"hard-hat\" class=\"w-7 h-7 text-accent-orange\"><\/i><\/div><h3 class=\"font-heading text-lg sm:text-xl font-bold text-secondary-dark mb-3\">Project Management<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed mb-4\">End-to-end project oversight ensuring timely delivery and budget adherence.<\/p><a href=\"javascript:void(0)\" data-page=\"services\" class=\"nav-link inline-flex items-center gap-1.5 text-accent-orange font-semibold text-sm group-hover:gap-2.5 transition-all duration-200\">Learn More <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/a><\/div>\r\n <div class=\"service-card reveal relative bg-white rounded-xl p-7 sm:p-8 shadow-sm border border-gray-100 hover:shadow-lg hover:border-accent-orange\/20 transition-all duration-300 group overflow-hidden\"><div class=\"w-14 h-14 bg-accent-orange\/10 rounded-xl flex items-center justify-center mb-5 group-hover:bg-accent-orange\/20 transition-colors duration-300\"><i data-lucide=\"hammer\" class=\"w-7 h-7 text-accent-orange\"><\/i><\/div><h3 class=\"font-heading text-lg sm:text-xl font-bold text-secondary-dark mb-3\">Renovation & Remodeling<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed mb-4\">Transform existing structures with modern upgrades and structural improvements.<\/p><a href=\"javascript:void(0)\" data-page=\"services\" class=\"nav-link inline-flex items-center gap-1.5 text-accent-orange font-semibold text-sm group-hover:gap-2.5 transition-all duration-200\">Learn More <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/a><\/div>\r\n <div class=\"service-card reveal relative bg-white rounded-xl p-7 sm:p-8 shadow-sm border border-gray-100 hover:shadow-lg hover:border-accent-orange\/20 transition-all duration-300 group overflow-hidden\"><div class=\"w-14 h-14 bg-accent-orange\/10 rounded-xl flex items-center justify-center mb-5 group-hover:bg-accent-orange\/20 transition-colors duration-300\"><i data-lucide=\"clipboard-check\" class=\"w-7 h-7 text-accent-orange\"><\/i><\/div><h3 class=\"font-heading text-lg sm:text-xl font-bold text-secondary-dark mb-3\">Consulting & Planning<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed mb-4\">Expert consultation on feasibility, design, and regulatory compliance.<\/p><a href=\"javascript:void(0)\" data-page=\"services\" class=\"nav-link inline-flex items-center gap-1.5 text-accent-orange font-semibold text-sm group-hover:gap-2.5 transition-all duration-200\">Learn More <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/a><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"projects\" class=\"py-20 sm:py-28 lg:py-32 bg-white\">\r\n <div class=\"max-w-container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"text-center max-w-2xl mx-auto mb-12 sm:mb-14 reveal\"><div class=\"inline-flex items-center gap-2 mb-4\"><div class=\"w-8 h-px bg-accent-orange\"><\/div><span class=\"text-accent-orange font-semibold text-sm tracking-wider uppercase\">Our Work<\/span><div class=\"w-8 h-px bg-accent-orange\"><\/div><\/div><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark tracking-tight mb-4\">Featured <span class=\"text-accent-orange\">Projects<\/span><\/h2><p class=\"text-base sm:text-lg text-text-dark\/50 leading-relaxed\">A showcase of our proudest achievements across commercial, residential, and infrastructure sectors.<\/p><\/div>\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 sm:gap-6\">\r\n <div class=\"project-card reveal relative rounded-xl overflow-hidden cursor-pointer group\" data-category=\"commercial\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/7.png\" alt=\"Skyline Tower\" class=\"w-full h-56 sm:h-64 object-cover img-zoom\"><div class=\"project-overlay absolute inset-0 bg-gradient-to-t from-secondary-dark\/90 via-secondary-dark\/40 to-transparent flex items-end p-5 sm:p-6\"><div><span class=\"text-accent-orange text-xs font-semibold tracking-wider uppercase\">Commercial<\/span><h4 class=\"text-white font-heading text-lg font-bold mt-1\">Skyline Tower Complex<\/h4><p class=\"text-white\/60 text-sm mt-1\">42-story mixed-use development<\/p><\/div><\/div><\/div>\r\n <div class=\"project-card reveal relative rounded-xl overflow-hidden cursor-pointer group sm:row-span-2\" data-category=\"infrastructure\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/4.png\" alt=\"Metro Bridge\" class=\"w-full h-56 sm:h-full min-h-[16rem] sm:min-h-0 object-cover img-zoom\"><div class=\"project-overlay absolute inset-0 bg-gradient-to-t from-secondary-dark\/90 via-secondary-dark\/40 to-transparent flex items-end p-5 sm:p-6\"><div><span class=\"text-accent-orange text-xs font-semibold tracking-wider uppercase\">Infrastructure<\/span><h4 class=\"text-white font-heading text-lg font-bold mt-1\">Metro River Bridge<\/h4><p class=\"text-white\/60 text-sm mt-1\">2.4km cable-stayed bridge<\/p><\/div><\/div><\/div>\r\n <div class=\"project-card reveal relative rounded-xl overflow-hidden cursor-pointer group\" data-category=\"residential\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/3.png\" alt=\"Green Valley\" class=\"w-full h-56 sm:h-64 object-cover img-zoom\"><div class=\"project-overlay absolute inset-0 bg-gradient-to-t from-secondary-dark\/90 via-secondary-dark\/40 to-transparent flex items-end p-5 sm:p-6\"><div><span class=\"text-accent-orange text-xs font-semibold tracking-wider uppercase\">Residential<\/span><h4 class=\"text-white font-heading text-lg font-bold mt-1\">Green Valley Estates<\/h4><p class=\"text-white\/60 text-sm mt-1\">250-unit premium housing<\/p><\/div><\/div><\/div>\r\n <div class=\"project-card reveal relative rounded-xl overflow-hidden cursor-pointer group\" data-category=\"commercial\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/8.png\" alt=\"City Mall\" class=\"w-full h-56 sm:h-64 object-cover img-zoom\"><div class=\"project-overlay absolute inset-0 bg-gradient-to-t from-secondary-dark\/90 via-secondary-dark\/40 to-transparent flex items-end p-5 sm:p-6\"><div><span class=\"text-accent-orange text-xs font-semibold tracking-wider uppercase\">Commercial<\/span><h4 class=\"text-white font-heading text-lg font-bold mt-1\">City Center Mall<\/h4><p class=\"text-white\/60 text-sm mt-1\">500,000 sq ft retail space<\/p><\/div><\/div><\/div>\r\n <div class=\"project-card reveal relative rounded-xl overflow-hidden cursor-pointer group\" data-category=\"infrastructure\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/5.png\" alt=\"Highway\" class=\"w-full h-56 sm:h-64 object-cover img-zoom\"><div class=\"project-overlay absolute inset-0 bg-gradient-to-t from-secondary-dark\/90 via-secondary-dark\/40 to-transparent flex items-end p-5 sm:p-6\"><div><span class=\"text-accent-orange text-xs font-semibold tracking-wider uppercase\">Infrastructure<\/span><h4 class=\"text-white font-heading text-lg font-bold mt-1\">Express Highway Corridor<\/h4><p class=\"text-white\/60 text-sm mt-1\">68km six-lane highway<\/p><\/div><\/div><\/div>\r\n <div class=\"project-card reveal relative rounded-xl overflow-hidden cursor-pointer group\" data-category=\"residential\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/6.png\" alt=\"Sunset Residency\" class=\"w-full h-56 sm:h-64 object-cover img-zoom\"><div class=\"project-overlay absolute inset-0 bg-gradient-to-t from-secondary-dark\/90 via-secondary-dark\/40 to-transparent flex items-end p-5 sm:p-6\"><div><span class=\"text-accent-orange text-xs font-semibold tracking-wider uppercase\">Residential<\/span><h4 class=\"text-white font-heading text-lg font-bold mt-1\">Sunset Residency<\/h4><p class=\"text-white\/60 text-sm mt-1\">Luxury waterfront apartments<\/p><\/div><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"py-20 sm:py-28 lg:py-32 bg-secondary-dark relative overflow-hidden\">\r\n <div class=\"absolute top-0 left-1\/2 -translate-x-1\/2 w-[800px] h-[400px] bg-accent-orange\/5 rounded-full blur-[120px]\"><\/div><div class=\"noise-overlay absolute inset-0\"><\/div>\r\n <div class=\"relative max-w-container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"text-center max-w-2xl mx-auto mb-14 sm:mb-16 reveal\"><div class=\"inline-flex items-center gap-2 mb-4\"><div class=\"w-8 h-px bg-accent-orange\"><\/div><span class=\"text-accent-orange font-semibold text-sm tracking-wider uppercase\">Why Choose Us<\/span><div class=\"w-8 h-px bg-accent-orange\"><\/div><\/div><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-white tracking-tight mb-4\">What Sets Us <span class=\"text-accent-orange\">Apart<\/span><\/h2><p class=\"text-base sm:text-lg text-white\/50 leading-relaxed\">Our commitment to quality, safety, and innovation makes us the preferred construction partner.<\/p><\/div>\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8\">\r\n <div class=\"feature-box reveal text-center p-6 sm:p-8 rounded-xl bg-white\/5 border border-white\/10 backdrop-blur-sm hover:bg-white\/10 hover:border-accent-orange\/30 transition-all duration-300\"><div class=\"feature-icon-wrap w-16 h-16 bg-accent-orange\/15 rounded-2xl flex items-center justify-center mx-auto mb-5\"><i data-lucide=\"shield-check\" class=\"w-8 h-8 text-accent-orange\"><\/i><\/div><h4 class=\"font-heading text-lg font-bold text-white mb-2\">Safety First<\/h4><p class=\"text-sm text-white\/50 leading-relaxed\">Zero-incident record with rigorous safety protocols on every site.<\/p><\/div>\r\n <div class=\"feature-box reveal text-center p-6 sm:p-8 rounded-xl bg-white\/5 border border-white\/10 backdrop-blur-sm hover:bg-white\/10 hover:border-accent-orange\/30 transition-all duration-300\"><div class=\"feature-icon-wrap w-16 h-16 bg-accent-orange\/15 rounded-2xl flex items-center justify-center mx-auto mb-5\"><i data-lucide=\"clock\" class=\"w-8 h-8 text-accent-orange\"><\/i><\/div><h4 class=\"font-heading text-lg font-bold text-white mb-2\">On-Time Delivery<\/h4><p class=\"text-sm text-white\/50 leading-relaxed\">95% on-time completion rate with meticulous project scheduling.<\/p><\/div>\r\n <div class=\"feature-box reveal text-center p-6 sm:p-8 rounded-xl bg-white\/5 border border-white\/10 backdrop-blur-sm hover:bg-white\/10 hover:border-accent-orange\/30 transition-all duration-300\"><div class=\"feature-icon-wrap w-16 h-16 bg-accent-orange\/15 rounded-2xl flex items-center justify-center mx-auto mb-5\"><i data-lucide=\"award\" class=\"w-8 h-8 text-accent-orange\"><\/i><\/div><h4 class=\"font-heading text-lg font-bold text-white mb-2\">Certified Quality<\/h4><p class=\"text-sm text-white\/50 leading-relaxed\">ISO 9001:2015 certified with third-party quality audits.<\/p><\/div>\r\n <div class=\"feature-box reveal text-center p-6 sm:p-8 rounded-xl bg-white\/5 border border-white\/10 backdrop-blur-sm hover:bg-white\/10 hover:border-accent-orange\/30 transition-all duration-300\"><div class=\"feature-icon-wrap w-16 h-16 bg-accent-orange\/15 rounded-2xl flex items-center justify-center mx-auto mb-5\"><i data-lucide=\"banknote\" class=\"w-8 h-8 text-accent-orange\"><\/i><\/div><h4 class=\"font-heading text-lg font-bold text-white mb-2\">Cost Effective<\/h4><p class=\"text-sm text-white\/50 leading-relaxed\">Transparent pricing with value engineering to optimize your budget.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"py-20 sm:py-28 lg:py-32 bg-light-gray relative overflow-hidden\">\r\n <div class=\"absolute bottom-0 left-0 w-[500px] h-[500px] bg-accent-orange\/3 rounded-full blur-[100px]\"><\/div>\r\n <div class=\"relative max-w-container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"text-center max-w-2xl mx-auto mb-14 sm:mb-16 reveal\"><div class=\"inline-flex items-center gap-2 mb-4\"><div class=\"w-8 h-px bg-accent-orange\"><\/div><span class=\"text-accent-orange font-semibold text-sm tracking-wider uppercase\">Testimonials<\/span><div class=\"w-8 h-px bg-accent-orange\"><\/div><\/div><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark tracking-tight mb-4\">Client <span class=\"text-accent-orange\">Reviews<\/span><\/h2><p class=\"text-base sm:text-lg text-text-dark\/50 leading-relaxed\">Don't just take our word for it \u2014 hear what our clients say about working with Civil33.<\/p><\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8\">\r\n <div class=\"testimonial-card reveal bg-white rounded-xl p-7 sm:p-8 shadow-sm border border-gray-100\"><div class=\"flex gap-1 mb-4\"><i data-lucide=\"star\" class=\"w-5 h-5 text-accent-orange fill-accent-orange\"><\/i><i data-lucide=\"star\" class=\"w-5 h-5 text-accent-orange fill-accent-orange\"><\/i><i data-lucide=\"star\" class=\"w-5 h-5 text-accent-orange fill-accent-orange\"><\/i><i data-lucide=\"star\" class=\"w-5 h-5 text-accent-orange fill-accent-orange\"><\/i><i data-lucide=\"star\" class=\"w-5 h-5 text-accent-orange fill-accent-orange\"><\/i><\/div><p class=\"text-base text-text-dark\/60 leading-relaxed mb-6 italic\">\"Civil delivered our office complex 2 weeks ahead of schedule. Their attention to detail and proactive communication made the entire process seamless.\"<\/p><div class=\"flex items-center gap-3\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/user.jpg\" alt=\"Client\" class=\"w-11 h-11 rounded-full object-cover\"><div><div class=\"font-semibold text-secondary-dark text-sm\">Robert Anderson<\/div><div class=\"text-xs text-text-dark\/40\">CEO, Anderson Holdings<\/div><\/div><\/div><\/div>\r\n <div class=\"testimonial-card reveal bg-white rounded-xl p-7 sm:p-8 shadow-sm border border-gray-100\"><div class=\"flex gap-1 mb-4\"><i data-lucide=\"star\" class=\"w-5 h-5 text-accent-orange fill-accent-orange\"><\/i><i data-lucide=\"star\" class=\"w-5 h-5 text-accent-orange fill-accent-orange\"><\/i><i data-lucide=\"star\" class=\"w-5 h-5 text-accent-orange fill-accent-orange\"><\/i><i data-lucide=\"star\" class=\"w-5 h-5 text-accent-orange fill-accent-orange\"><\/i><i data-lucide=\"star\" class=\"w-5 h-5 text-accent-orange fill-accent-orange\"><\/i><\/div><p class=\"text-base text-text-dark\/60 leading-relaxed mb-6 italic\">\"The team's engineering expertise saved us over $2M on our bridge project through innovative design solutions. Truly world-class professionals.\"<\/p><div class=\"flex items-center gap-3\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/user.jpg\" alt=\"Client\" class=\"w-11 h-11 rounded-full object-cover\"><div><div class=\"font-semibold text-secondary-dark text-sm\">Sarah Mitchell<\/div><div class=\"text-xs text-text-dark\/40\">Director, Metro Infrastructure<\/div><\/div><\/div><\/div>\r\n <div class=\"testimonial-card reveal bg-white rounded-xl p-7 sm:p-8 shadow-sm border border-gray-100\"><div class=\"flex gap-1 mb-4\"><i data-lucide=\"star\" class=\"w-5 h-5 text-accent-orange fill-accent-orange\"><\/i><i data-lucide=\"star\" class=\"w-5 h-5 text-accent-orange fill-accent-orange\"><\/i><i data-lucide=\"star\" class=\"w-5 h-5 text-accent-orange fill-accent-orange\"><\/i><i data-lucide=\"star\" class=\"w-5 h-5 text-accent-orange fill-accent-orange\"><\/i><i data-lucide=\"star\" class=\"w-5 h-5 text-gray-200 fill-gray-200\"><\/i><\/div><p class=\"text-base text-text-dark\/60 leading-relaxed mb-6 italic\">\"From the initial consultation to final handover, Civil33 exceeded our expectations. Our residential complex is a testament to their craftsmanship.\"<\/p><div class=\"flex items-center gap-3\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/user.jpg\" alt=\"Client\" class=\"w-11 h-11 rounded-full object-cover\"><div><div class=\"font-semibold text-secondary-dark text-sm\">James Thornton<\/div><div class=\"text-xs text-text-dark\/40\">Owner, Thornton Properties<\/div><\/div><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"relative py-20 sm:py-24 overflow-hidden\">\r\n <img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/9.jpg\" alt=\"\" class=\"absolute inset-0 w-full h-full object-cover\"><div class=\"absolute inset-0 bg-secondary-dark\/90\"><\/div><div class=\"noise-overlay absolute inset-0\"><\/div><div class=\"absolute top-0 right-0 w-[500px] h-[500px] bg-accent-orange\/10 rounded-full blur-[120px]\"><\/div>\r\n <div class=\"relative max-w-container mx-auto px-4 sm:px-6 lg:px-8 text-center\"><div class=\"max-w-3xl mx-auto reveal\"><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-white tracking-tight mb-5\">Ready to Start Your <span class=\"text-accent-orange\">Next Project?<\/span><\/h2><p class=\"text-base sm:text-lg text-white\/60 leading-relaxed mb-8 max-w-xl mx-auto\">Let's discuss your vision and turn it into reality. Our team is ready to provide a detailed consultation and free estimate.<\/p><div class=\"flex flex-col sm:flex-row justify-center gap-4\"><a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link inline-flex items-center justify-center gap-2 bg-accent-orange hover:bg-accent-light text-white font-semibold text-base px-8 py-4 rounded-lg btn-shine transition-colors duration-200\"><i data-lucide=\"phone\" class=\"w-5 h-5\"><\/i> Get Free Estimate<\/a><a href=\"tel:+1234567890\" class=\"inline-flex items-center justify-center gap-2 bg-white\/10 hover:bg-white\/20 border border-white\/20 text-white font-semibold text-base px-8 py-4 rounded-lg transition-all duration-200\"><i data-lucide=\"phone-call\" class=\"w-5 h-5\"><\/i> Call Us Now<\/a><\/div><\/div><\/div>\r\n <\/section>\r\n\r\n <section id=\"contact\" class=\"py-20 sm:py-28 lg:py-32 bg-white\">\r\n <div class=\"max-w-container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20\">\r\n <div class=\"reveal\"><div class=\"inline-flex items-center gap-2 mb-4\"><div class=\"w-8 h-px bg-accent-orange\"><\/div><span class=\"text-accent-orange font-semibold text-sm tracking-wider uppercase\">Contact Us<\/span><\/div><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark tracking-tight mb-4\">Let's Build <span class=\"text-accent-orange\">Together<\/span><\/h2><p class=\"text-base sm:text-lg text-text-dark\/50 leading-relaxed mb-10\">Have a project in mind? Reach out to us and our team will respond within 24 hours with a comprehensive plan.<\/p><div class=\"space-y-6 mb-10\"><div class=\"flex items-start gap-4\"><div class=\"w-12 h-12 bg-accent-orange\/10 rounded-xl flex items-center justify-center flex-shrink-0\"><i data-lucide=\"map-pin\" class=\"w-5 h-5 text-accent-orange\"><\/i><\/div><div><h4 class=\"font-semibold text-secondary-dark mb-1\">Our Office<\/h4><p class=\"text-sm text-text-dark\/50\">1111 Construction Avenue, Suite 1000<br>New York, NY 10050<\/p><\/div><\/div><div class=\"flex items-start gap-4\"><div class=\"w-12 h-12 bg-accent-orange\/10 rounded-xl flex items-center justify-center flex-shrink-0\"><i data-lucide=\"phone\" class=\"w-5 h-5 text-accent-orange\"><\/i><\/div><div><h4 class=\"font-semibold text-secondary-dark mb-1\">Phone<\/h4><p class=\"text-sm text-text-dark\/50\">+1 (111) 111-1111<br>+1 (111) 111-1111<\/p><\/div><\/div><div class=\"flex items-start gap-4\"><div class=\"w-12 h-12 bg-accent-orange\/10 rounded-xl flex items-center justify-center flex-shrink-0\"><i data-lucide=\"mail\" class=\"w-5 h-5 text-accent-orange\"><\/i><\/div><div><h4 class=\"font-semibold text-secondary-dark mb-1\">Email<\/h4><p class=\"text-sm text-text-dark\/50\">info@Civil33.com<br>projects@Civil33.com<\/p><\/div><\/div><\/div><div class=\"bg-light-gray rounded-xl p-5 sm:p-6\"><h4 class=\"font-semibold text-secondary-dark mb-3 flex items-center gap-2\"><i data-lucide=\"clock\" class=\"w-4 h-4 text-accent-orange\"><\/i> Business Hours<\/h4><div class=\"grid grid-cols-2 gap-y-2 text-sm\"><span class=\"text-text-dark\/50\">Mon \u2013 Fri<\/span><span class=\"font-medium text-secondary-dark\">7:00 AM \u2013 6:00 PM<\/span><span class=\"text-text-dark\/50\">Saturday<\/span><span class=\"font-medium text-secondary-dark\">8:00 AM \u2013 2:00 PM<\/span><span class=\"text-text-dark\/50\">Sunday<\/span><span class=\"font-medium text-secondary-dark\">Closed<\/span><\/div><\/div><\/div>\r\n <div class=\"reveal\"><form id=\"contactFormHome\" class=\"bg-light-gray rounded-2xl p-6 sm:p-8 lg:p-10\"><h3 class=\"font-heading text-xl sm:text-2xl font-bold text-secondary-dark mb-2\">Send Us a Message<\/h3><p class=\"text-sm text-text-dark\/50 mb-8\">Fill in the form below and we'll get back to you promptly.<\/p><div class=\"space-y-5\"><div><label class=\"block text-sm font-medium text-secondary-dark mb-1.5\">Full Name *<\/label><input type=\"text\" required placeholder=\"John Anderson\" class=\"form-input w-full px-4 py-3 rounded-lg border border-gray-200 bg-white text-sm text-text-dark placeholder:text-text-dark\/30 focus:outline-none transition-all duration-200\"><\/div><div><label class=\"block text-sm font-medium text-secondary-dark mb-1.5\">Email Address *<\/label><input type=\"email\" required placeholder=\"john@example.com\" class=\"form-input w-full px-4 py-3 rounded-lg border border-gray-200 bg-white text-sm text-text-dark placeholder:text-text-dark\/30 focus:outline-none transition-all duration-200\"><\/div><div><label class=\"block text-sm font-medium text-secondary-dark mb-1.5\">Subject<\/label><select class=\"form-input w-full px-4 py-3 rounded-lg border border-gray-200 bg-white text-sm text-text-dark focus:outline-none transition-all duration-200\"><option value=\"\">Select a topic<\/option><option>New Project Inquiry<\/option><option>Renovation Request<\/option><option>Consultation<\/option><option>Partnership<\/option><option>Other<\/option><\/select><\/div><div><label class=\"block text-sm font-medium text-secondary-dark mb-1.5\">Message *<\/label><textarea required rows=\"5\" placeholder=\"Tell us about your project...\" class=\"form-input w-full px-4 py-3 rounded-lg border border-gray-200 bg-white text-sm text-text-dark placeholder:text-text-dark\/30 focus:outline-none transition-all duration-200 resize-none\"><\/textarea><\/div><button type=\"submit\" class=\"w-full flex items-center justify-center gap-2 bg-accent-orange hover:bg-accent-light text-white font-semibold text-base px-8 py-4 rounded-lg btn-shine transition-colors duration-200\"><i data-lucide=\"send\" class=\"w-5 h-5\"><\/i> Send Message<\/button><\/div><div id=\"formSuccessHome\" class=\"hidden mt-5 p-4 bg-green-50 border border-green-200 rounded-lg text-sm text-green-700 flex items-center gap-2\"><i data-lucide=\"check-circle\" class=\"w-5 h-5 text-green-500\"><\/i> Thank you! Your message has been sent successfully.<\/div><\/form><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n\r\n \r\n <div id=\"page-about\" class=\"page-section\">\r\n <section class=\"relative py-32 sm:py-40 lg:py-48 flex items-center overflow-hidden\">\r\n <img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/1.png\" alt=\"Construction Site\" class=\"absolute inset-0 w-full h-full object-cover\"><div class=\"hero-overlay absolute inset-0\"><\/div><div class=\"noise-overlay absolute inset-0\"><\/div><div class=\"absolute top-1\/4 right-0 w-[500px] h-[500px] bg-accent-orange\/5 rounded-full blur-[120px]\"><\/div>\r\n <div class=\"relative z-10 max-w-container mx-auto px-4 sm:px-6 lg:px-8 text-center\"><div class=\"animate-fade-up opacity-0\"><div class=\"inline-flex items-center gap-2 bg-white\/10 backdrop-blur-sm border border-white\/10 rounded-full px-4 py-1.5 mb-6\"><div class=\"w-2 h-2 bg-accent-orange rounded-full\"><\/div><span class=\"text-white\/80 text-xs sm:text-sm font-medium tracking-wide uppercase\">Est. 2005<\/span><\/div><\/div><h1 class=\"animate-fade-up-delay-1 opacity-0 font-heading text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-white leading-[1.05] tracking-tight mb-4\">About <span class=\"text-accent-orange\">Us<\/span><\/h1><p class=\"animate-fade-up-delay-2 opacity-0 text-base sm:text-lg text-white\/60 max-w-xl mx-auto mb-6\">Learn more about our journey, values, and the expert team dedicated to building your future.<\/p><div class=\"animate-fade-up-delay-3 opacity-0 flex items-center justify-center gap-2 text-sm text-white\/40\"><a href=\"javascript:void(0)\" data-page=\"home\" class=\"nav-link hover:text-accent-orange transition-colors\">Home<\/a><i data-lucide=\"chevron-right\" class=\"w-4 h-4\"><\/i><span class=\"text-white\/80\">About<\/span><\/div><\/div>\r\n <\/section>\r\n\r\n <section id=\"about-main\" class=\"py-20 sm:py-28 lg:py-32 bg-white\"><div class=\"max-w-container mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center\"><div class=\"reveal relative\"><div class=\"relative rounded-2xl overflow-hidden shadow-2xl\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/2.png\" alt=\"About Civil33\" class=\"w-full h-[300px] sm:h-[400px] lg:h-[500px] object-cover\"><div class=\"absolute inset-0 bg-gradient-to-t from-secondary-dark\/20 to-transparent\"><\/div><\/div><div class=\"absolute -bottom-6 -right-4 sm:right-6 bg-accent-orange text-white rounded-xl p-5 sm:p-6 shadow-lg\"><div class=\"font-heading text-3xl sm:text-4xl font-bold\">18+<\/div><div class=\"text-sm font-medium text-white\/80\">Years of<br>Excellence<\/div><\/div><div class=\"absolute -top-4 -left-4 w-20 h-20 border-2 border-accent-orange\/20 rounded-xl -z-10\"><\/div><\/div><div class=\"reveal\"><div class=\"inline-flex items-center gap-2 mb-4\"><div class=\"w-8 h-px bg-accent-orange\"><\/div><span class=\"text-accent-orange font-semibold text-sm tracking-wider uppercase\">Who We Are<\/span><\/div><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark tracking-tight mb-6\">We Construct Dreams Into <span class=\"text-accent-orange\">Reality<\/span><\/h2><p class=\"text-base sm:text-lg text-text-dark\/60 leading-relaxed mb-6\">Civil33 Construction has been at the forefront of the civil engineering and construction industry since 2005. We combine innovative engineering solutions with time-tested construction practices to deliver projects that stand the test of time.<\/p><p class=\"text-base sm:text-lg text-text-dark\/60 leading-relaxed mb-8\">From humble beginnings as a small regional contractor, we have grown into a nationally recognized construction firm, completing over 350 landmark projects. Our success is built on a foundation of integrity, safety, and unwavering commitment to our clients' visions.<\/p><div class=\"grid grid-cols-2 gap-4 sm:gap-6 mb-8\"><div class=\"bg-light-gray rounded-xl p-4 sm:p-5 text-center\"><div class=\"font-heading text-2xl sm:text-3xl font-bold text-accent-orange\">350+<\/div><div class=\"text-xs sm:text-sm text-text-dark\/50 font-medium mt-1\">Projects Done<\/div><\/div><div class=\"bg-light-gray rounded-xl p-4 sm:p-5 text-center\"><div class=\"font-heading text-2xl sm:text-3xl font-bold text-accent-orange\">98%<\/div><div class=\"text-xs sm:text-sm text-text-dark\/50 font-medium mt-1\">Client Satisfaction<\/div><\/div><div class=\"bg-light-gray rounded-xl p-4 sm:p-5 text-center\"><div class=\"font-heading text-2xl sm:text-3xl font-bold text-accent-orange\">120+<\/div><div class=\"text-xs sm:text-sm text-text-dark\/50 font-medium mt-1\">Expert Team<\/div><\/div><div class=\"bg-light-gray rounded-xl p-4 sm:p-5 text-center\"><div class=\"font-heading text-2xl sm:text-3xl font-bold text-accent-orange\">15+<\/div><div class=\"text-xs sm:text-sm text-text-dark\/50 font-medium mt-1\">Industry Awards<\/div><\/div><\/div><a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link inline-flex items-center gap-2 bg-secondary-dark hover:bg-primary-dark text-white font-semibold text-sm px-6 py-3.5 rounded-lg btn-shine transition-colors duration-200\">Contact Us <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/a><\/div><\/div><\/div><\/section>\r\n\r\n <section class=\"py-20 sm:py-28 lg:py-32 bg-light-gray relative overflow-hidden\"><div class=\"absolute top-0 right-0 w-[600px] h-[600px] bg-accent-orange\/3 rounded-full blur-[120px]\"><\/div><div class=\"relative max-w-container mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"text-center max-w-2xl mx-auto mb-14 sm:mb-16 reveal\"><div class=\"inline-flex items-center gap-2 mb-4\"><div class=\"w-8 h-px bg-accent-orange\"><\/div><span class=\"text-accent-orange font-semibold text-sm tracking-wider uppercase\">Our Core<\/span><div class=\"w-8 h-px bg-accent-orange\"><\/div><\/div><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark tracking-tight mb-4\">Mission, Vision & <span class=\"text-accent-orange\">Values<\/span><\/h2><\/div><div class=\"grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8\"><div class=\"feature-box reveal text-center p-6 sm:p-8 rounded-xl bg-white shadow-sm border border-gray-100 hover:shadow-lg transition-all duration-300\"><div class=\"feature-icon-wrap w-16 h-16 bg-accent-orange\/10 rounded-2xl flex items-center justify-center mx-auto mb-5\"><i data-lucide=\"target\" class=\"w-8 h-8 text-accent-orange\"><\/i><\/div><h4 class=\"font-heading text-xl font-bold text-secondary-dark mb-3\">Our Mission<\/h4><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed\">To deliver exceptional construction services through innovative engineering, uncompromising safety, and a commitment to on-time, on-budget project completion.<\/p><\/div><div class=\"feature-box reveal text-center p-6 sm:p-8 rounded-xl bg-white shadow-sm border border-gray-100 hover:shadow-lg transition-all duration-300\"><div class=\"feature-icon-wrap w-16 h-16 bg-accent-orange\/10 rounded-2xl flex items-center justify-center mx-auto mb-5\"><i data-lucide=\"eye\" class=\"w-8 h-8 text-accent-orange\"><\/i><\/div><h4 class=\"font-heading text-xl font-bold text-secondary-dark mb-3\">Our Vision<\/h4><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed\">To become the most trusted name in civil engineering and construction nationally, recognized for transforming landscapes and enriching communities.<\/p><\/div><div class=\"feature-box reveal text-center p-6 sm:p-8 rounded-xl bg-white shadow-sm border border-gray-100 hover:shadow-lg transition-all duration-300\"><div class=\"feature-icon-wrap w-16 h-16 bg-accent-orange\/10 rounded-2xl flex items-center justify-center mx-auto mb-5\"><i data-lucide=\"heart\" class=\"w-8 h-8 text-accent-orange\"><\/i><\/div><h4 class=\"font-heading text-xl font-bold text-secondary-dark mb-3\">Our Values<\/h4><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed\">Integrity in every deal. Safety on every site. Quality in every pour. We believe in transparent communication and treating your project like our own.<\/p><\/div><\/div><\/div><\/section>\r\n\r\n <section class=\"py-20 sm:py-28 lg:py-32 bg-white\"><div class=\"max-w-container mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"text-center max-w-2xl mx-auto mb-14 sm:mb-16 reveal\"><div class=\"inline-flex items-center gap-2 mb-4\"><div class=\"w-8 h-px bg-accent-orange\"><\/div><span class=\"text-accent-orange font-semibold text-sm tracking-wider uppercase\">Our Journey<\/span><div class=\"w-8 h-px bg-accent-orange\"><\/div><\/div><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark tracking-tight mb-4\">Company <span class=\"text-accent-orange\">Milestones<\/span><\/h2><\/div><div class=\"max-w-3xl mx-auto relative\"><div class=\"timeline-line\"><\/div><div class=\"space-y-8 sm:space-y-12\"><div class=\"timeline-item reveal relative pl-8 sm:pl-14\"><div class=\"font-heading text-lg sm:text-xl font-bold text-accent-orange mb-1\">2005<\/div><h4 class=\"font-heading text-lg font-bold text-secondary-dark mb-2\">Founded & First Project<\/h4><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed\">Civil33 was established with a team of 5 engineers. Completed our first residential project within 8 months, setting the standard for quality.<\/p><\/div><div class=\"timeline-item reveal relative pl-8 sm:pl-14\"><div class=\"font-heading text-lg sm:text-xl font-bold text-accent-orange mb-1\">2010<\/div><h4 class=\"font-heading text-lg font-bold text-secondary-dark mb-2\">Expansion into Commercial<\/h4><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed\">Secured our first major commercial contract\u2014a 10-story office building. Team grew to 40+ members and opened a second regional office.<\/p><\/div><div class=\"timeline-item reveal relative pl-8 sm:pl-14\"><div class=\"font-heading text-lg sm:text-xl font-bold text-accent-orange mb-1\">2016<\/div><h4 class=\"font-heading text-lg font-bold text-secondary-dark mb-2\">ISO Certification & 100th Project<\/h4><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed\">Achieved ISO 9001:2015 certification and celebrated the completion of our 100th project, crossing the $100M revenue milestone.<\/p><\/div><div class=\"timeline-item reveal relative pl-8 sm:pl-14\"><div class=\"font-heading text-lg sm:text-xl font-bold text-accent-orange mb-1\">2020<\/div><h4 class=\"font-heading text-lg font-bold text-secondary-dark mb-2\">Infrastructure Division Launch<\/h4><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed\">Launched a dedicated infrastructure division for bridges, highways, and dams. Won the National Infrastructure Excellence Award.<\/p><\/div><div class=\"timeline-item reveal relative pl-8 sm:pl-14\"><div class=\"font-heading text-lg sm:text-xl font-bold text-accent-orange mb-1\">2024<\/div><h4 class=\"font-heading text-lg font-bold text-secondary-dark mb-2\">350+ Projects & Going Strong<\/h4><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed\">Today, with 120+ expert engineers and a zero-incident safety record, Civil33 continues to shape the nation's skyline and infrastructure.<\/p><\/div><\/div><\/div><\/div><\/section>\r\n\r\n <section class=\"py-20 sm:py-28 lg:py-32 bg-light-gray relative overflow-hidden\"><div class=\"absolute bottom-0 left-0 w-[500px] h-[500px] bg-accent-orange\/3 rounded-full blur-[100px]\"><\/div><div class=\"relative max-w-container mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"text-center max-w-2xl mx-auto mb-14 sm:mb-16 reveal\"><div class=\"inline-flex items-center gap-2 mb-4\"><div class=\"w-8 h-px bg-accent-orange\"><\/div><span class=\"text-accent-orange font-semibold text-sm tracking-wider uppercase\">Our Team<\/span><div class=\"w-8 h-px bg-accent-orange\"><\/div><\/div><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark tracking-tight mb-4\">Meet the <span class=\"text-accent-orange\">Experts<\/span><\/h2><\/div><div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8\"><div class=\"team-card reveal bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100 transition-all duration-300\"><div class=\"overflow-hidden\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/user.jpg\" alt=\"Robert Vance\" class=\"team-img w-full h-56 sm:h-64 object-cover transition-transform duration-500\"><\/div><div class=\"p-5 sm:p-6 text-center\"><h4 class=\"font-heading text-lg font-bold text-secondary-dark\">Robert Vance<\/h4><p class=\"text-sm text-accent-orange font-medium mt-1\">CEO & Founder<\/p><p class=\"text-xs text-text-dark\/40 mt-3 leading-relaxed\">30+ years in construction leadership. Founded Civil33 with a vision for engineering excellence.<\/p><div class=\"flex justify-center gap-3 mt-4\"><a href=\"#\" class=\"text-text-dark\/30 hover:text-accent-orange transition-colors\"><i data-lucide=\"linkedin\" class=\"w-4 h-4\"><\/i><\/a><a href=\"#\" class=\"text-text-dark\/30 hover:text-accent-orange transition-colors\"><i data-lucide=\"twitter\" class=\"w-4 h-4\"><\/i><\/a><\/div><\/div><\/div><div class=\"team-card reveal bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100 transition-all duration-300\"><div class=\"overflow-hidden\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/user.jpg\" alt=\"Sarah Jenkins\" class=\"team-img w-full h-56 sm:h-64 object-cover transition-transform duration-500\"><\/div><div class=\"p-5 sm:p-6 text-center\"><h4 class=\"font-heading text-lg font-bold text-secondary-dark\">Sarah Jenkins<\/h4><p class=\"text-sm text-accent-orange font-medium mt-1\">Chief Engineer<\/p><p class=\"text-xs text-text-dark\/40 mt-3 leading-relaxed\">Expert in structural engineering with a passion for innovative, sustainable design solutions.<\/p><div class=\"flex justify-center gap-3 mt-4\"><a href=\"#\" class=\"text-text-dark\/30 hover:text-accent-orange transition-colors\"><i data-lucide=\"linkedin\" class=\"w-4 h-4\"><\/i><\/a><a href=\"#\" class=\"text-text-dark\/30 hover:text-accent-orange transition-colors\"><i data-lucide=\"twitter\" class=\"w-4 h-4\"><\/i><\/a><\/div><\/div><\/div><div class=\"team-card reveal bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100 transition-all duration-300\"><div class=\"overflow-hidden\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/user.jpg\" alt=\"Michael Ross\" class=\"team-img w-full h-56 sm:h-64 object-cover transition-transform duration-500\"><\/div><div class=\"p-5 sm:p-6 text-center\"><h4 class=\"font-heading text-lg font-bold text-secondary-dark\">Michael Ross<\/h4><p class=\"text-sm text-accent-orange font-medium mt-1\">Project Director<\/p><p class=\"text-xs text-text-dark\/40 mt-3 leading-relaxed\">Manages multi-million dollar portfolios, ensuring timelines and budgets are strictly adhered to.<\/p><div class=\"flex justify-center gap-3 mt-4\"><a href=\"#\" class=\"text-text-dark\/30 hover:text-accent-orange transition-colors\"><i data-lucide=\"linkedin\" class=\"w-4 h-4\"><\/i><\/a><a href=\"#\" class=\"text-text-dark\/30 hover:text-accent-orange transition-colors\"><i data-lucide=\"twitter\" class=\"w-4 h-4\"><\/i><\/a><\/div><\/div><\/div><div class=\"team-card reveal bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100 transition-all duration-300\"><div class=\"overflow-hidden\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/user.jpg\" alt=\"Emily Chen\" class=\"team-img w-full h-56 sm:h-64 object-cover transition-transform duration-500\"><\/div><div class=\"p-5 sm:p-6 text-center\"><h4 class=\"font-heading text-lg font-bold text-secondary-dark\">Emily Chen<\/h4><p class=\"text-sm text-accent-orange font-medium mt-1\">Head of Design<\/p><p class=\"text-xs text-text-dark\/40 mt-3 leading-relaxed\">Blends aesthetics with functionality, leading our architectural and interior design initiatives.<\/p><div class=\"flex justify-center gap-3 mt-4\"><a href=\"#\" class=\"text-text-dark\/30 hover:text-accent-orange transition-colors\"><i data-lucide=\"linkedin\" class=\"w-4 h-4\"><\/i><\/a><a href=\"#\" class=\"text-text-dark\/30 hover:text-accent-orange transition-colors\"><i data-lucide=\"twitter\" class=\"w-4 h-4\"><\/i><\/a><\/div><\/div><\/div><\/div><\/div><\/section>\r\n\r\n <section class=\"relative py-20 sm:py-24 overflow-hidden\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/4.png\" alt=\"\" class=\"absolute inset-0 w-full h-full object-cover\"><div class=\"absolute inset-0 bg-secondary-dark\/90\"><\/div><div class=\"noise-overlay absolute inset-0\"><\/div><div class=\"absolute top-0 right-0 w-[500px] h-[500px] bg-accent-orange\/10 rounded-full blur-[120px]\"><\/div><div class=\"relative max-w-container mx-auto px-4 sm:px-6 lg:px-8 text-center\"><div class=\"max-w-3xl mx-auto reveal\"><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-white tracking-tight mb-5\">Want to Work With <span class=\"text-accent-orange\">Our Team?<\/span><\/h2><p class=\"text-base sm:text-lg text-white\/60 leading-relaxed mb-8 max-w-xl mx-auto\">Whether you have a project in mind or want to join our team of experts, we'd love to hear from you.<\/p><div class=\"flex flex-col sm:flex-row justify-center gap-4\"><a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link inline-flex items-center justify-center gap-2 bg-accent-orange hover:bg-accent-light text-white font-semibold text-base px-8 py-4 rounded-lg btn-shine transition-colors duration-200\"><i data-lucide=\"phone\" class=\"w-5 h-5\"><\/i> Get Free Estimate<\/a><a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link inline-flex items-center justify-center gap-2 bg-white\/10 hover:bg-white\/20 border border-white\/20 text-white font-semibold text-base px-8 py-4 rounded-lg transition-all duration-200\"><i data-lucide=\"users\" class=\"w-5 h-5\"><\/i> Join Our Team<\/a><\/div><\/div><\/div><\/section>\r\n <\/div>\r\n\r\n \r\n <div id=\"page-services\" class=\"page-section\">\r\n <section class=\"relative py-32 sm:py-40 lg:py-48 flex items-center overflow-hidden\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/5.png\" alt=\"Construction Site\" class=\"absolute inset-0 w-full h-full object-cover\"><div class=\"hero-overlay absolute inset-0\"><\/div><div class=\"noise-overlay absolute inset-0\"><\/div><div class=\"absolute top-1\/4 right-0 w-[500px] h-[500px] bg-accent-orange\/5 rounded-full blur-[120px]\"><\/div><div class=\"relative z-10 max-w-container mx-auto px-4 sm:px-6 lg:px-8 text-center\"><div class=\"animate-fade-up opacity-0\"><div class=\"inline-flex items-center gap-2 bg-white\/10 backdrop-blur-sm border border-white\/10 rounded-full px-4 py-1.5 mb-6\"><div class=\"w-2 h-2 bg-accent-orange rounded-full\"><\/div><span class=\"text-white\/80 text-xs sm:text-sm font-medium tracking-wide uppercase\">What We Do<\/span><\/div><\/div><h1 class=\"animate-fade-up-delay-1 opacity-0 font-heading text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-white leading-[1.05] tracking-tight mb-4\">Our <span class=\"text-accent-orange\">Services<\/span><\/h1><p class=\"animate-fade-up-delay-2 opacity-0 text-base sm:text-lg text-white\/60 max-w-xl mx-auto mb-6\">Comprehensive construction and engineering solutions tailored to meet your project requirements from concept to completion.<\/p><div class=\"animate-fade-up-delay-3 opacity-0 flex items-center justify-center gap-2 text-sm text-white\/40\"><a href=\"javascript:void(0)\" data-page=\"home\" class=\"nav-link hover:text-accent-orange transition-colors\">Home<\/a><i data-lucide=\"chevron-right\" class=\"w-4 h-4\"><\/i><span class=\"text-white\/80\">Services<\/span><\/div><\/div><\/section>\r\n\r\n <section id=\"services-detailed\" class=\"py-20 sm:py-28 lg:py-32 bg-white\"><div class=\"max-w-container mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"text-center max-w-2xl mx-auto mb-14 sm:mb-16 reveal\"><div class=\"inline-flex items-center gap-2 mb-4\"><div class=\"w-8 h-px bg-accent-orange\"><\/div><span class=\"text-accent-orange font-semibold text-sm tracking-wider uppercase\">Expertise<\/span><div class=\"w-8 h-px bg-accent-orange\"><\/div><\/div><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark tracking-tight mb-4\">What We <span class=\"text-accent-orange\">Offer<\/span><\/h2><p class=\"text-base sm:text-lg text-text-dark\/50 leading-relaxed\">From ground-breaking to grand opening, we provide end-to-end solutions with precision and care.<\/p><\/div><div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8\"><div class=\"service-card reveal relative bg-white rounded-xl p-7 sm:p-8 shadow-sm border border-gray-100 hover:shadow-lg hover:border-accent-orange\/20 transition-all duration-300 group overflow-hidden\"><div class=\"w-14 h-14 bg-accent-orange\/10 rounded-xl flex items-center justify-center mb-5 group-hover:bg-accent-orange\/20 transition-colors duration-300\"><i data-lucide=\"building-2\" class=\"w-7 h-7 text-accent-orange\"><\/i><\/div><h3 class=\"font-heading text-lg sm:text-xl font-bold text-secondary-dark mb-3\">Commercial Construction<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed mb-4\">Office buildings, retail centers, and mixed-use developments built to the highest standards of quality and efficiency.<\/p><ul class=\"space-y-2 mb-5\"><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Office Complexes<\/li><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Retail Spaces<\/li><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Mixed-Use Developments<\/li><\/ul><a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link inline-flex items-center gap-1.5 text-accent-orange font-semibold text-sm group-hover:gap-2.5 transition-all duration-200\">Request Quote <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/a><\/div><div class=\"service-card reveal relative bg-white rounded-xl p-7 sm:p-8 shadow-sm border border-gray-100 hover:shadow-lg hover:border-accent-orange\/20 transition-all duration-300 group overflow-hidden\"><div class=\"w-14 h-14 bg-accent-orange\/10 rounded-xl flex items-center justify-center mb-5 group-hover:bg-accent-orange\/20 transition-colors duration-300\"><i data-lucide=\"home\" class=\"w-7 h-7 text-accent-orange\"><\/i><\/div><h3 class=\"font-heading text-lg sm:text-xl font-bold text-secondary-dark mb-3\">Residential Projects<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed mb-4\">Custom homes, apartments, and housing complexes designed for modern living with superior craftsmanship.<\/p><ul class=\"space-y-2 mb-5\"><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Custom Luxury Homes<\/li><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Apartment Complexes<\/li><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Gated Communities<\/li><\/ul><a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link inline-flex items-center gap-1.5 text-accent-orange font-semibold text-sm group-hover:gap-2.5 transition-all duration-200\">Request Quote <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/a><\/div><div class=\"service-card reveal relative bg-white rounded-xl p-7 sm:p-8 shadow-sm border border-gray-100 hover:shadow-lg hover:border-accent-orange\/20 transition-all duration-300 group overflow-hidden\"><div class=\"w-14 h-14 bg-accent-orange\/10 rounded-xl flex items-center justify-center mb-5 group-hover:bg-accent-orange\/20 transition-colors duration-300\"><i data-lucide=\"ruler\" class=\"w-7 h-7 text-accent-orange\"><\/i><\/div><h3 class=\"font-heading text-lg sm:text-xl font-bold text-secondary-dark mb-3\">Civil Engineering<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed mb-4\">Roads, bridges, dams, and infrastructure projects engineered with precision for long-term durability.<\/p><ul class=\"space-y-2 mb-5\"><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Bridge Construction<\/li><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Highway Development<\/li><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Dam & Water Systems<\/li><\/ul><a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link inline-flex items-center gap-1.5 text-accent-orange font-semibold text-sm group-hover:gap-2.5 transition-all duration-200\">Request Quote <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/a><\/div><div class=\"service-card reveal relative bg-white rounded-xl p-7 sm:p-8 shadow-sm border border-gray-100 hover:shadow-lg hover:border-accent-orange\/20 transition-all duration-300 group overflow-hidden\"><div class=\"w-14 h-14 bg-accent-orange\/10 rounded-xl flex items-center justify-center mb-5 group-hover:bg-accent-orange\/20 transition-colors duration-300\"><i data-lucide=\"hard-hat\" class=\"w-7 h-7 text-accent-orange\"><\/i><\/div><h3 class=\"font-heading text-lg sm:text-xl font-bold text-secondary-dark mb-3\">Project Management<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed mb-4\">End-to-end project oversight ensuring timely delivery, budget adherence, and quality assurance at every phase.<\/p><ul class=\"space-y-2 mb-5\"><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Schedule Management<\/li><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Budget Tracking<\/li><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Risk Mitigation<\/li><\/ul><a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link inline-flex items-center gap-1.5 text-accent-orange font-semibold text-sm group-hover:gap-2.5 transition-all duration-200\">Request Quote <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/a><\/div><div class=\"service-card reveal relative bg-white rounded-xl p-7 sm:p-8 shadow-sm border border-gray-100 hover:shadow-lg hover:border-accent-orange\/20 transition-all duration-300 group overflow-hidden\"><div class=\"w-14 h-14 bg-accent-orange\/10 rounded-xl flex items-center justify-center mb-5 group-hover:bg-accent-orange\/20 transition-colors duration-300\"><i data-lucide=\"hammer\" class=\"w-7 h-7 text-accent-orange\"><\/i><\/div><h3 class=\"font-heading text-lg sm:text-xl font-bold text-secondary-dark mb-3\">Renovation & Remodeling<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed mb-4\">Transform existing structures with modern upgrades, structural improvements, and aesthetic enhancements.<\/p><ul class=\"space-y-2 mb-5\"><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Structural Reinforcement<\/li><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Interior Remodeling<\/li><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Green Upgrades<\/li><\/ul><a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link inline-flex items-center gap-1.5 text-accent-orange font-semibold text-sm group-hover:gap-2.5 transition-all duration-200\">Request Quote <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/a><\/div><div class=\"service-card reveal relative bg-white rounded-xl p-7 sm:p-8 shadow-sm border border-gray-100 hover:shadow-lg hover:border-accent-orange\/20 transition-all duration-300 group overflow-hidden\"><div class=\"w-14 h-14 bg-accent-orange\/10 rounded-xl flex items-center justify-center mb-5 group-hover:bg-accent-orange\/20 transition-colors duration-300\"><i data-lucide=\"clipboard-check\" class=\"w-7 h-7 text-accent-orange\"><\/i><\/div><h3 class=\"font-heading text-lg sm:text-xl font-bold text-secondary-dark mb-3\">Consulting & Planning<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed mb-4\">Expert consultation on feasibility, design optimization, regulatory compliance, and strategic project planning.<\/p><ul class=\"space-y-2 mb-5\"><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Feasibility Studies<\/li><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Regulatory Compliance<\/li><li class=\"flex items-center gap-2 text-sm text-text-dark\/60\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i>Cost Estimation<\/li><\/ul><a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link inline-flex items-center gap-1.5 text-accent-orange font-semibold text-sm group-hover:gap-2.5 transition-all duration-200\">Request Quote <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i><\/a><\/div><\/div><\/div><\/section>\r\n\r\n <section class=\"py-20 sm:py-28 lg:py-32 bg-light-gray relative overflow-hidden\"><div class=\"absolute top-0 right-0 w-[600px] h-[600px] bg-accent-orange\/3 rounded-full blur-[120px]\"><\/div><div class=\"relative max-w-container mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"text-center max-w-2xl mx-auto mb-14 sm:mb-16 reveal\"><div class=\"inline-flex items-center gap-2 mb-4\"><div class=\"w-8 h-px bg-accent-orange\"><\/div><span class=\"text-accent-orange font-semibold text-sm tracking-wider uppercase\">How We Work<\/span><div class=\"w-8 h-px bg-accent-orange\"><\/div><\/div><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark tracking-tight mb-4\">Our <span class=\"text-accent-orange\">Process<\/span><\/h2><p class=\"text-base sm:text-lg text-text-dark\/50 leading-relaxed\">A streamlined, transparent approach that ensures every project is delivered on time, on budget, and beyond expectations.<\/p><\/div><div class=\"relative max-w-4xl mx-auto\"><div class=\"process-line hidden lg:block\"><\/div><div class=\"space-y-12 lg:space-y-16\"><div class=\"reveal relative flex flex-col lg:flex-row items-start lg:items-center gap-6 lg:gap-12\"><div class=\"flex-1 lg:text-right order-2 lg:order-1\"><h3 class=\"font-heading text-xl sm:text-2xl font-bold text-secondary-dark mb-2\">Consultation & Planning<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed\">We begin with a thorough understanding of your vision, site assessment, and feasibility studies to chart the best path forward.<\/p><\/div><div class=\"relative z-10 w-12 h-12 bg-accent-orange rounded-full flex items-center justify-center text-white font-heading font-bold text-lg shadow-lg flex-shrink-0 order-1 lg:order-2\">1<\/div><div class=\"flex-1 order-3\"><div class=\"bg-white rounded-xl p-4 shadow-sm border border-gray-100\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/9.jpg\" alt=\"Planning\" class=\"w-full h-32 object-cover rounded-lg\"><\/div><\/div><\/div><div class=\"reveal relative flex flex-col lg:flex-row items-start lg:items-center gap-6 lg:gap-12\"><div class=\"flex-1 order-2 lg:order-1\"><div class=\"bg-white rounded-xl p-4 shadow-sm border border-gray-100\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/10.jpg\" alt=\"Design\" class=\"w-full h-32 object-cover rounded-lg\"><\/div><\/div><div class=\"relative z-10 w-12 h-12 bg-accent-orange rounded-full flex items-center justify-center text-white font-heading font-bold text-lg shadow-lg flex-shrink-0 order-1 lg:order-2\">2<\/div><div class=\"flex-1 lg:text-left order-3\"><h3 class=\"font-heading text-xl sm:text-2xl font-bold text-secondary-dark mb-2\">Design & Engineering<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed\">Our architects and engineers create detailed blueprints, 3D models, and structural plans optimized for safety and cost.<\/p><\/div><\/div><div class=\"reveal relative flex flex-col lg:flex-row items-start lg:items-center gap-6 lg:gap-12\"><div class=\"flex-1 lg:text-right order-2 lg:order-1\"><h3 class=\"font-heading text-xl sm:text-2xl font-bold text-secondary-dark mb-2\">Construction & Execution<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed\">Our skilled workforce brings the plan to life with strict adherence to quality standards, safety protocols, and timelines.<\/p><\/div><div class=\"relative z-10 w-12 h-12 bg-accent-orange rounded-full flex items-center justify-center text-white font-heading font-bold text-lg shadow-lg flex-shrink-0 order-1 lg:order-2\">3<\/div><div class=\"flex-1 order-3\"><div class=\"bg-white rounded-xl p-4 shadow-sm border border-gray-100\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/11.jpg\" alt=\"Execution\" class=\"w-full h-32 object-cover rounded-lg\"><\/div><\/div><\/div><div class=\"reveal relative flex flex-col lg:flex-row items-start lg:items-center gap-6 lg:gap-12\"><div class=\"flex-1 order-2 lg:order-1\"><div class=\"bg-white rounded-xl p-4 shadow-sm border border-gray-100\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/2.png\" alt=\"Handover\" class=\"w-full h-32 object-cover rounded-lg\"><\/div><\/div><div class=\"relative z-10 w-12 h-12 bg-accent-orange rounded-full flex items-center justify-center text-white font-heading font-bold text-lg shadow-lg flex-shrink-0 order-1 lg:order-2\">4<\/div><div class=\"flex-1 lg:text-left order-3\"><h3 class=\"font-heading text-xl sm:text-2xl font-bold text-secondary-dark mb-2\">Quality Check & Handover<\/h3><p class=\"text-sm sm:text-base text-text-dark\/50 leading-relaxed\">Rigorous multi-point inspections ensure everything meets our high standards before we hand over the keys to your new facility.<\/p><\/div><\/div><\/div><\/div><\/div><\/section>\r\n\r\n <section class=\"relative py-20 sm:py-24 overflow-hidden\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/1.png\" alt=\"\" class=\"absolute inset-0 w-full h-full object-cover\"><div class=\"absolute inset-0 bg-secondary-dark\/90\"><\/div><div class=\"noise-overlay absolute inset-0\"><\/div><div class=\"absolute top-0 right-0 w-[500px] h-[500px] bg-accent-orange\/10 rounded-full blur-[120px]\"><\/div><div class=\"relative max-w-container mx-auto px-4 sm:px-6 lg:px-8 text-center\"><div class=\"max-w-3xl mx-auto reveal\"><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-white tracking-tight mb-5\">Need a Custom <span class=\"text-accent-orange\">Solution?<\/span><\/h2><p class=\"text-base sm:text-lg text-white\/60 leading-relaxed mb-8 max-w-xl mx-auto\">Every project is unique. Let's discuss your specific requirements and build a tailored plan together.<\/p><div class=\"flex flex-col sm:flex-row justify-center gap-4\"><a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link inline-flex items-center justify-center gap-2 bg-accent-orange hover:bg-accent-light text-white font-semibold text-base px-8 py-4 rounded-lg btn-shine transition-colors duration-200\"><i data-lucide=\"phone\" class=\"w-5 h-5\"><\/i> Get Free Estimate<\/a><a href=\"javascript:void(0)\" data-page=\"projects\" class=\"nav-link inline-flex items-center justify-center gap-2 bg-white\/10 hover:bg-white\/20 border border-white\/20 text-white font-semibold text-base px-8 py-4 rounded-lg transition-all duration-200\"><i data-lucide=\"images\" class=\"w-5 h-5\"><\/i> View Our Projects<\/a><\/div><\/div><\/div><\/section>\r\n <\/div>\r\n\r\n \r\n <div id=\"page-projects\" class=\"page-section\">\r\n <section class=\"relative py-32 sm:py-40 lg:py-48 flex items-center overflow-hidden\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/4.png\" alt=\"Our Projects\" class=\"absolute inset-0 w-full h-full object-cover\"><div class=\"hero-overlay absolute inset-0\"><\/div><div class=\"noise-overlay absolute inset-0\"><\/div><div class=\"absolute top-1\/4 right-0 w-[500px] h-[500px] bg-accent-orange\/5 rounded-full blur-[120px]\"><\/div><div class=\"relative z-10 max-w-container mx-auto px-4 sm:px-6 lg:px-8 text-center\"><div class=\"animate-fade-up opacity-0\"><div class=\"inline-flex items-center gap-2 bg-white\/10 backdrop-blur-sm border border-white\/10 rounded-full px-4 py-1.5 mb-6\"><div class=\"w-2 h-2 bg-accent-orange rounded-full\"><\/div><span class=\"text-white\/80 text-xs sm:text-sm font-medium tracking-wide uppercase\">Portfolio<\/span><\/div><\/div><h1 class=\"animate-fade-up-delay-1 opacity-0 font-heading text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-white leading-[1.05] tracking-tight mb-4\">Our <span class=\"text-accent-orange\">Projects<\/span><\/h1><p class=\"animate-fade-up-delay-2 opacity-0 text-base sm:text-lg text-white\/60 max-w-xl mx-auto mb-6\">Explore our portfolio of landmark construction and engineering achievements across multiple sectors.<\/p><div class=\"animate-fade-up-delay-3 opacity-0 flex items-center justify-center gap-2 text-sm text-white\/40\"><a href=\"javascript:void(0)\" data-page=\"home\" class=\"nav-link hover:text-accent-orange transition-colors\">Home<\/a><i data-lucide=\"chevron-right\" class=\"w-4 h-4\"><\/i><span class=\"text-white\/80\">Projects<\/span><\/div><\/div><\/section>\r\n\r\n <section class=\"relative z-20 -mt-12 sm:-mt-16\"><div class=\"max-w-container mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"bg-white rounded-2xl shadow-xl border border-gray-100 p-6 sm:p-8\"><div class=\"grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8\"><div class=\"text-center reveal\"><div class=\"font-heading text-2xl sm:text-3xl lg:text-4xl font-bold text-accent-orange\">350+<\/div><div class=\"text-sm text-text-dark\/50 font-medium mt-1\">Projects Completed<\/div><\/div><div class=\"text-center reveal\"><div class=\"font-heading text-2xl sm:text-3xl lg:text-4xl font-bold text-accent-orange\">$2B+<\/div><div class=\"text-sm text-text-dark\/50 font-medium mt-1\">Total Project Value<\/div><\/div><div class=\"text-center reveal\"><div class=\"font-heading text-2xl sm:text-3xl lg:text-4xl font-bold text-accent-orange\">12<\/div><div class=\"text-sm text-text-dark\/50 font-medium mt-1\">States Covered<\/div><\/div><div class=\"text-center reveal\"><div class=\"font-heading text-2xl sm:text-3xl lg:text-4xl font-bold text-accent-orange\">95%<\/div><div class=\"text-sm text-text-dark\/50 font-medium mt-1\">On-Time Delivery<\/div><\/div><\/div><\/div><\/div><\/section>\r\n\r\n <section id=\"projects-grid\" class=\"py-20 sm:py-28 lg:py-32 bg-white\"><div class=\"max-w-container mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"text-center max-w-2xl mx-auto mb-12 sm:mb-14 reveal\"><div class=\"inline-flex items-center gap-2 mb-4\"><div class=\"w-8 h-px bg-accent-orange\"><\/div><span class=\"text-accent-orange font-semibold text-sm tracking-wider uppercase\">Our Work<\/span><div class=\"w-8 h-px bg-accent-orange\"><\/div><\/div><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark tracking-tight mb-4\">Featured <span class=\"text-accent-orange\">Projects<\/span><\/h2><\/div><div class=\"flex flex-wrap justify-center gap-2 sm:gap-3 mb-10 sm:mb-12 reveal\"><button class=\"filter-btn active px-5 py-2 rounded-full text-sm font-medium border border-gray-200 transition-all duration-200\" data-filter=\"all\">All Projects<\/button><button class=\"filter-btn px-5 py-2 rounded-full text-sm font-medium text-text-dark\/60 border border-gray-200 hover:border-accent-orange hover:text-accent-orange transition-all duration-200\" data-filter=\"commercial\">Commercial<\/button><button class=\"filter-btn px-5 py-2 rounded-full text-sm font-medium text-text-dark\/60 border border-gray-200 hover:border-accent-orange hover:text-accent-orange transition-all duration-200\" data-filter=\"residential\">Residential<\/button><button class=\"filter-btn px-5 py-2 rounded-full text-sm font-medium text-text-dark\/60 border border-gray-200 hover:border-accent-orange hover:text-accent-orange transition-all duration-200\" data-filter=\"infrastructure\">Infrastructure<\/button><\/div><div id=\"projectGrid\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 sm:gap-6\"><div class=\"project-card reveal relative rounded-xl overflow-hidden cursor-pointer group\" data-category=\"commercial\" onclick=\"openModal('Skyline Tower Complex', 'commercial', 'A stunning 42-story mixed-use development featuring Class A office space, luxury retail, and a rooftop observation deck.', 'https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/7.png', '42 Stories', '$180M', '2022-2024')\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/7.png\" alt=\"Skyline Tower\" class=\"w-full h-56 sm:h-64 object-cover img-zoom\"><div class=\"project-overlay absolute inset-0 bg-gradient-to-t from-secondary-dark\/90 via-secondary-dark\/40 to-transparent flex items-end p-5 sm:p-6\"><div><span class=\"text-accent-orange text-xs font-semibold tracking-wider uppercase\">Commercial<\/span><h4 class=\"text-white font-heading text-lg font-bold mt-1\">Skyline Tower Complex<\/h4><p class=\"text-white\/60 text-sm mt-1\">42-story mixed-use development<\/p><\/div><div class=\"ml-auto flex-shrink-0\"><div class=\"w-10 h-10 bg-white\/20 backdrop-blur-sm rounded-full flex items-center justify-center\"><i data-lucide=\"arrow-up-right\" class=\"w-5 h-5 text-white\"><\/i><\/div><\/div><\/div><\/div><div class=\"project-card reveal relative rounded-xl overflow-hidden cursor-pointer group sm:row-span-2\" data-category=\"infrastructure\" onclick=\"openModal('Metro River Bridge', 'infrastructure', 'A 2.4km cable-stayed bridge connecting the eastern and western districts.', 'https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/4.png', '2.4 km Span', '$320M', '2019-2023')\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/4.png\" alt=\"Metro Bridge\" class=\"w-full h-56 sm:h-full min-h-[16rem] sm:min-h-0 object-cover img-zoom\"><div class=\"project-overlay absolute inset-0 bg-gradient-to-t from-secondary-dark\/90 via-secondary-dark\/40 to-transparent flex items-end p-5 sm:p-6\"><div><span class=\"text-accent-orange text-xs font-semibold tracking-wider uppercase\">Infrastructure<\/span><h4 class=\"text-white font-heading text-lg font-bold mt-1\">Metro River Bridge<\/h4><p class=\"text-white\/60 text-sm mt-1\">2.4km cable-stayed bridge<\/p><\/div><div class=\"ml-auto flex-shrink-0\"><div class=\"w-10 h-10 bg-white\/20 backdrop-blur-sm rounded-full flex items-center justify-center\"><i data-lucide=\"arrow-up-right\" class=\"w-5 h-5 text-white\"><\/i><\/div><\/div><\/div><\/div><div class=\"project-card reveal relative rounded-xl overflow-hidden cursor-pointer group\" data-category=\"residential\" onclick=\"openModal('Green Valley Estates', 'residential', 'A premium 250-unit gated community featuring eco-friendly homes.', 'https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/3.png', '250 Units', '$85M', '2021-2023')\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/3.png\" alt=\"Green Valley\" class=\"w-full h-56 sm:h-64 object-cover img-zoom\"><div class=\"project-overlay absolute inset-0 bg-gradient-to-t from-secondary-dark\/90 via-secondary-dark\/40 to-transparent flex items-end p-5 sm:p-6\"><div><span class=\"text-accent-orange text-xs font-semibold tracking-wider uppercase\">Residential<\/span><h4 class=\"text-white font-heading text-lg font-bold mt-1\">Green Valley Estates<\/h4><p class=\"text-white\/60 text-sm mt-1\">250-unit premium housing<\/p><\/div><div class=\"ml-auto flex-shrink-0\"><div class=\"w-10 h-10 bg-white\/20 backdrop-blur-sm rounded-full flex items-center justify-center\"><i data-lucide=\"arrow-up-right\" class=\"w-5 h-5 text-white\"><\/i><\/div><\/div><\/div><\/div><div class=\"project-card reveal relative rounded-xl overflow-hidden cursor-pointer group\" data-category=\"commercial\" onclick=\"openModal('City Center Mall', 'commercial', 'A 500,000 sq ft state-of-the-art retail destination.', 'https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/8.png', '500,000 sq ft', '$145M', '2020-2022')\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/8.png\" alt=\"City Mall\" class=\"w-full h-56 sm:h-64 object-cover img-zoom\"><div class=\"project-overlay absolute inset-0 bg-gradient-to-t from-secondary-dark\/90 via-secondary-dark\/40 to-transparent flex items-end p-5 sm:p-6\"><div><span class=\"text-accent-orange text-xs font-semibold tracking-wider uppercase\">Commercial<\/span><h4 class=\"text-white font-heading text-lg font-bold mt-1\">City Center Mall<\/h4><p class=\"text-white\/60 text-sm mt-1\">500,000 sq ft retail space<\/p><\/div><div class=\"ml-auto flex-shrink-0\"><div class=\"w-10 h-10 bg-white\/20 backdrop-blur-sm rounded-full flex items-center justify-center\"><i data-lucide=\"arrow-up-right\" class=\"w-5 h-5 text-white\"><\/i><\/div><\/div><\/div><\/div><div class=\"project-card reveal relative rounded-xl overflow-hidden cursor-pointer group\" data-category=\"infrastructure\" onclick=\"openModal('Express Highway Corridor', 'infrastructure', 'A 68km six-lane highway connecting major industrial zones.', 'https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/5.png', '68 km Length', '$410M', '2018-2023')\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/5.png\" alt=\"Highway\" class=\"w-full h-56 sm:h-64 object-cover img-zoom\"><div class=\"project-overlay absolute inset-0 bg-gradient-to-t from-secondary-dark\/90 via-secondary-dark\/40 to-transparent flex items-end p-5 sm:p-6\"><div><span class=\"text-accent-orange text-xs font-semibold tracking-wider uppercase\">Infrastructure<\/span><h4 class=\"text-white font-heading text-lg font-bold mt-1\">Express Highway Corridor<\/h4><p class=\"text-white\/60 text-sm mt-1\">68km six-lane highway<\/p><\/div><div class=\"ml-auto flex-shrink-0\"><div class=\"w-10 h-10 bg-white\/20 backdrop-blur-sm rounded-full flex items-center justify-center\"><i data-lucide=\"arrow-up-right\" class=\"w-5 h-5 text-white\"><\/i><\/div><\/div><\/div><\/div><div class=\"project-card reveal relative rounded-xl overflow-hidden cursor-pointer group\" data-category=\"residential\" onclick=\"openModal('Sunset Residency', 'residential', 'Luxury waterfront apartments with panoramic ocean views.', 'https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/6.png', '180 Units', '$110M', '2022-2024')\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/6.png\" alt=\"Sunset Residency\" class=\"w-full h-56 sm:h-64 object-cover img-zoom\"><div class=\"project-overlay absolute inset-0 bg-gradient-to-t from-secondary-dark\/90 via-secondary-dark\/40 to-transparent flex items-end p-5 sm:p-6\"><div><span class=\"text-accent-orange text-xs font-semibold tracking-wider uppercase\">Residential<\/span><h4 class=\"text-white font-heading text-lg font-bold mt-1\">Sunset Residency<\/h4><p class=\"text-white\/60 text-sm mt-1\">Luxury waterfront apartments<\/p><\/div><div class=\"ml-auto flex-shrink-0\"><div class=\"w-10 h-10 bg-white\/20 backdrop-blur-sm rounded-full flex items-center justify-center\"><i data-lucide=\"arrow-up-right\" class=\"w-5 h-5 text-white\"><\/i><\/div><\/div><\/div><\/div><\/div><\/div><\/section>\r\n\r\n <section class=\"relative py-20 sm:py-24 overflow-hidden\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/1.png\" alt=\"\" class=\"absolute inset-0 w-full h-full object-cover\"><div class=\"absolute inset-0 bg-secondary-dark\/90\"><\/div><div class=\"noise-overlay absolute inset-0\"><\/div><div class=\"absolute top-0 right-0 w-[500px] h-[500px] bg-accent-orange\/10 rounded-full blur-[120px]\"><\/div><div class=\"relative max-w-container mx-auto px-4 sm:px-6 lg:px-8 text-center\"><div class=\"max-w-3xl mx-auto reveal\"><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-white tracking-tight mb-5\">Have a Project in <span class=\"text-accent-orange\">Mind?<\/span><\/h2><p class=\"text-base sm:text-lg text-white\/60 leading-relaxed mb-8 max-w-xl mx-auto\">Let's turn your vision into reality. Contact us for a free consultation and detailed project estimate.<\/p><div class=\"flex flex-col sm:flex-row justify-center gap-4\"><a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link inline-flex items-center justify-center gap-2 bg-accent-orange hover:bg-accent-light text-white font-semibold text-base px-8 py-4 rounded-lg btn-shine transition-colors duration-200\"><i data-lucide=\"phone\" class=\"w-5 h-5\"><\/i> Get Free Estimate<\/a><a href=\"javascript:void(0)\" data-page=\"services\" class=\"nav-link inline-flex items-center justify-center gap-2 bg-white\/10 hover:bg-white\/20 border border-white\/20 text-white font-semibold text-base px-8 py-4 rounded-lg transition-all duration-200\"><i data-lucide=\"wrench\" class=\"w-5 h-5\"><\/i> Our Services<\/a><\/div><\/div><\/div><\/section>\r\n <\/div>\r\n\r\n \r\n <div id=\"page-contact\" class=\"page-section\">\r\n <section class=\"relative py-32 sm:py-40 lg:py-48 flex items-center overflow-hidden\"><img decoding=\"async\" src=\"https:\/\/demo75.techhassle.com\/wp-content\/uploads\/2026\/05\/2.png\" alt=\"Contact Us\" class=\"absolute inset-0 w-full h-full object-cover\"><div class=\"hero-overlay absolute inset-0\"><\/div><div class=\"noise-overlay absolute inset-0\"><\/div><div class=\"absolute top-1\/4 right-0 w-[500px] h-[500px] bg-accent-orange\/5 rounded-full blur-[120px]\"><\/div><div class=\"relative z-10 max-w-container mx-auto px-4 sm:px-6 lg:px-8 text-center\"><div class=\"animate-fade-up opacity-0\"><div class=\"inline-flex items-center gap-2 bg-white\/10 backdrop-blur-sm border border-white\/10 rounded-full px-4 py-1.5 mb-6\"><div class=\"w-2 h-2 bg-accent-orange rounded-full\"><\/div><span class=\"text-white\/80 text-xs sm:text-sm font-medium tracking-wide uppercase\">Get In Touch<\/span><\/div><\/div><h1 class=\"animate-fade-up-delay-1 opacity-0 font-heading text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-white leading-[1.05] tracking-tight mb-4\">Contact <span class=\"text-accent-orange\">Us<\/span><\/h1><p class=\"animate-fade-up-delay-2 opacity-0 text-base sm:text-lg text-white\/60 max-w-xl mx-auto mb-6\">Have a project in mind? Reach out to us and our team will respond within 24 hours.<\/p><div class=\"animate-fade-up-delay-3 opacity-0 flex items-center justify-center gap-2 text-sm text-white\/40\"><a href=\"javascript:void(0)\" data-page=\"home\" class=\"nav-link hover:text-accent-orange transition-colors\">Home<\/a><i data-lucide=\"chevron-right\" class=\"w-4 h-4\"><\/i><span class=\"text-white\/80\">Contact<\/span><\/div><\/div><\/section>\r\n\r\n <section class=\"relative z-20 -mt-12 sm:-mt-16\"><div class=\"max-w-container mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 sm:gap-6\"><a href=\"tel:+11111111111\" class=\"contact-info-card reveal bg-white rounded-xl p-6 sm:p-8 shadow-lg border border-gray-100 flex items-start gap-4 group\"><div class=\"w-12 h-12 bg-accent-orange\/10 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:bg-accent-orange transition-colors duration-300\"><i data-lucide=\"phone\" class=\"w-6 h-6 text-accent-orange group-hover:text-white transition-colors duration-300\"><\/i><\/div><div><h4 class=\"font-heading text-base font-bold text-secondary-dark mb-1\">Call Us Anytime<\/h4><p class=\"text-sm text-text-dark\/50\">+1 (111) 111-1111<\/p><p class=\"text-sm text-text-dark\/50\">+1 (111) 111-1111<\/p><\/div><\/a><a href=\"mailto:info@Civil33.com\" class=\"contact-info-card reveal bg-white rounded-xl p-6 sm:p-8 shadow-lg border border-gray-100 flex items-start gap-4 group\"><div class=\"w-12 h-12 bg-accent-orange\/10 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:bg-accent-orange transition-colors duration-300\"><i data-lucide=\"mail\" class=\"w-6 h-6 text-accent-orange group-hover:text-white transition-colors duration-300\"><\/i><\/div><div><h4 class=\"font-heading text-base font-bold text-secondary-dark mb-1\">Email Us<\/h4><p class=\"text-sm text-text-dark\/50\">info@Civil33.com<\/p><p class=\"text-sm text-text-dark\/50\">projects@Civil33.com<\/p><\/div><\/a><a href=\"#\" class=\"contact-info-card reveal bg-white rounded-xl p-6 sm:p-8 shadow-lg border border-gray-100 flex items-start gap-4 group sm:col-span-2 lg:col-span-1\"><div class=\"w-12 h-12 bg-accent-orange\/10 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:bg-accent-orange transition-colors duration-300\"><i data-lucide=\"map-pin\" class=\"w-6 h-6 text-accent-orange group-hover:text-white transition-colors duration-300\"><\/i><\/div><div><h4 class=\"font-heading text-base font-bold text-secondary-dark mb-1\">Visit Our Office<\/h4><p class=\"text-sm text-text-dark\/50\">1111 Construction Avenue, Suite 1000<br>New York, NY 10050<\/p><\/div><\/a><\/div><\/div><\/section>\r\n\r\n <section id=\"contact-detailed\" class=\"py-20 sm:py-28 lg:py-32 bg-white\"><div class=\"max-w-container mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20\"><div class=\"reveal\"><div class=\"inline-flex items-center gap-2 mb-4\"><div class=\"w-8 h-px bg-accent-orange\"><\/div><span class=\"text-accent-orange font-semibold text-sm tracking-wider uppercase\">Send a Message<\/span><\/div><h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark tracking-tight mb-4\">Let's Build <span class=\"text-accent-orange\">Together<\/span><\/h2><p class=\"text-base text-text-dark\/50 leading-relaxed mb-8\">Fill in the form below and our team will get back to you within 24 hours with a comprehensive plan.<\/p><form id=\"contactFormPage\" class=\"bg-light-gray rounded-2xl p-6 sm:p-8 lg:p-10\"><div class=\"space-y-5\"><div class=\"grid grid-cols-1 sm:grid-cols-2 gap-5\"><div><label class=\"block text-sm font-medium text-secondary-dark mb-1.5\">Full Name *<\/label><input type=\"text\" required placeholder=\"John Anderson\" class=\"form-input w-full px-4 py-3 rounded-lg border border-gray-200 bg-white text-sm text-text-dark placeholder:text-text-dark\/30 focus:outline-none transition-all duration-200\"><\/div><div><label class=\"block text-sm font-medium text-secondary-dark mb-1.5\">Phone Number<\/label><input type=\"tel\" placeholder=\"+1 (111) 111-1111\" class=\"form-input w-full px-4 py-3 rounded-lg border border-gray-200 bg-white text-sm text-text-dark placeholder:text-text-dark\/30 focus:outline-none transition-all duration-200\"><\/div><\/div><div><label class=\"block text-sm font-medium text-secondary-dark mb-1.5\">Email Address *<\/label><input type=\"email\" required placeholder=\"john@example.com\" class=\"form-input w-full px-4 py-3 rounded-lg border border-gray-200 bg-white text-sm text-text-dark placeholder:text-text-dark\/30 focus:outline-none transition-all duration-200\"><\/div><div><label class=\"block text-sm font-medium text-secondary-dark mb-1.5\">Subject<\/label><select class=\"form-input w-full px-4 py-3 rounded-lg border border-gray-200 bg-white text-sm text-text-dark focus:outline-none transition-all duration-200\"><option value=\"\">Select a topic<\/option><option>New Project Inquiry<\/option><option>Renovation Request<\/option><option>Consultation<\/option><option>Partnership<\/option><option>Other<\/option><\/select><\/div><div><label class=\"block text-sm font-medium text-secondary-dark mb-1.5\">Message *<\/label><textarea required rows=\"5\" placeholder=\"Tell us about your project...\" class=\"form-input w-full px-4 py-3 rounded-lg border border-gray-200 bg-white text-sm text-text-dark placeholder:text-text-dark\/30 focus:outline-none transition-all duration-200 resize-none\"><\/textarea><\/div><button type=\"submit\" class=\"w-full flex items-center justify-center gap-2 bg-accent-orange hover:bg-accent-light text-white font-semibold text-base px-8 py-4 rounded-lg btn-shine transition-colors duration-200\"><i data-lucide=\"send\" class=\"w-5 h-5\"><\/i> Send Message<\/button><\/div><div id=\"formSuccessPage\" class=\"hidden mt-5 p-4 bg-green-50 border border-green-200 rounded-lg text-sm text-green-700 flex items-center gap-2\"><i data-lucide=\"check-circle\" class=\"w-5 h-5 text-green-500\"><\/i> Thank you! Your message has been sent successfully.<\/div><\/form><\/div><div class=\"reveal\"><div class=\"rounded-2xl overflow-hidden shadow-lg border border-gray-100 mb-8\"><iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3022.2155732938225!2d-73.98784368459418!3d40.74844797932847!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9aeb1c6b5%3A0x35b1cfbc89a6097f!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1629794729807!5m2!1sen!2sus\" width=\"100%\" height=\"300\" style=\"border:0;\" allowfullscreen=\"\" loading=\"lazy\" class=\"w-full\"><\/iframe><\/div><div class=\"bg-light-gray rounded-xl p-6 sm:p-8 mb-8\"><h4 class=\"font-heading text-lg font-bold text-secondary-dark mb-4 flex items-center gap-2\"><i data-lucide=\"clock\" class=\"w-5 h-5 text-accent-orange\"><\/i> Business Hours<\/h4><div class=\"space-y-3\"><div class=\"flex justify-between items-center text-sm\"><span class=\"text-text-dark\/50\">Monday \u2013 Friday<\/span><span class=\"font-semibold text-secondary-dark bg-white px-3 py-1 rounded-md\">7:00 AM \u2013 6:00 PM<\/span><\/div><div class=\"flex justify-between items-center text-sm\"><span class=\"text-text-dark\/50\">Saturday<\/span><span class=\"font-semibold text-secondary-dark bg-white px-3 py-1 rounded-md\">8:00 AM \u2013 2:00 PM<\/span><\/div><div class=\"flex justify-between items-center text-sm\"><span class=\"text-text-dark\/50\">Sunday<\/span><span class=\"font-semibold text-red-500 bg-white px-3 py-1 rounded-md\">Closed<\/span><\/div><\/div><\/div><div class=\"bg-secondary-dark rounded-xl p-6 sm:p-8 relative overflow-hidden\"><div class=\"noise-overlay absolute inset-0\"><\/div><div class=\"absolute top-0 right-0 w-32 h-32 bg-accent-orange\/10 rounded-full blur-[60px]\"><\/div><div class=\"relative\"><div class=\"w-12 h-12 bg-accent-orange\/20 rounded-xl flex items-center justify-center mb-4\"><i data-lucide=\"alert-circle\" class=\"w-6 h-6 text-accent-orange\"><\/i><\/div><h4 class=\"font-heading text-lg font-bold text-white mb-2\">24\/7 Emergency Line<\/h4><p class=\"text-sm text-white\/50 leading-relaxed mb-4\">For urgent construction emergencies or site safety concerns, reach our on-call team anytime.<\/p><a href=\"tel:+11111111111\" class=\"inline-flex items-center gap-2 text-accent-orange font-semibold text-base hover:text-accent-light transition-colors\"><i data-lucide=\"phone-call\" class=\"w-5 h-5\"><\/i>+1 (111) 111-1111<\/a><\/div><\/div><\/div><\/div><\/section>\r\n\r\n <section class=\"py-20 sm:py-28 lg:py-32 bg-light-gray relative overflow-hidden\"><div class=\"absolute bottom-0 left-0 w-[500px] h-[500px] bg-accent-orange\/3 rounded-full blur-[100px]\"><\/div><div class=\"relative max-w-container mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"text-center max-w-2xl mx-auto mb-14 sm:mb-16 reveal\"><div class=\"inline-flex items-center gap-2 mb-4\"><div class=\"w-8 h-px bg-accent-orange\"><\/div><span class=\"text-accent-orange font-semibold text-sm tracking-wider uppercase\">FAQ<\/span><div class=\"w-8 h-px bg-accent-orange\"><\/div><\/div>\r\n <h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-dark tracking-tight mb-4\">Frequently Asked <span class=\"text-accent-orange\">Questions<\/span><\/h2>\r\n <p class=\"text-base sm:text-lg text-text-dark\/50 leading-relaxed\">Quick answers to common queries about our services and process.<\/p>\r\n <\/div>\r\n\r\n <div class=\"max-w-3xl mx-auto space-y-4\">\r\n <div class=\"faq-item reveal bg-white rounded-xl border border-gray-100 overflow-hidden\">\r\n <button onclick=\"toggleFaq(this)\" class=\"w-full flex items-center justify-between p-5 sm:p-6 text-left\">\r\n <span class=\"font-heading text-base sm:text-lg font-bold text-secondary-dark pr-4\">How do I request a project estimate?<\/span>\r\n <i data-lucide=\"chevron-down\" class=\"w-5 h-5 text-accent-orange flex-shrink-0 faq-icon\"><\/i>\r\n <\/button>\r\n <div class=\"faq-answer\"><p class=\"px-5 sm:px-6 pb-5 sm:pb-6 text-sm sm:text-base text-text-dark\/50 leading-relaxed\">You can request a free estimate by filling out our contact form, calling us directly at +1 (111) 111-1111, or emailing projects@Civil33.com.<\/p><\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item reveal bg-white rounded-xl border border-gray-100 overflow-hidden\">\r\n <button onclick=\"toggleFaq(this)\" class=\"w-full flex items-center justify-between p-5 sm:p-6 text-left\">\r\n <span class=\"font-heading text-base sm:text-lg font-bold text-secondary-dark pr-4\">What types of projects does Civil33 handle?<\/span>\r\n <i data-lucide=\"chevron-down\" class=\"w-5 h-5 text-accent-orange flex-shrink-0 faq-icon\"><\/i>\r\n <\/button>\r\n <div class=\"faq-answer\"><p class=\"px-5 sm:px-6 pb-5 sm:pb-6 text-sm sm:text-base text-text-dark\/50 leading-relaxed\">We handle a wide range of projects including commercial construction, residential developments, civil infrastructure, renovations, and consulting.<\/p><\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item reveal bg-white rounded-xl border border-gray-100 overflow-hidden\">\r\n <button onclick=\"toggleFaq(this)\" class=\"w-full flex items-center justify-between p-5 sm:p-6 text-left\">\r\n <span class=\"font-heading text-base sm:text-lg font-bold text-secondary-dark pr-4\">Are you licensed and insured?<\/span>\r\n <i data-lucide=\"chevron-down\" class=\"w-5 h-5 text-accent-orange flex-shrink-0 faq-icon\"><\/i>\r\n <\/button>\r\n <div class=\"faq-answer\"><p class=\"px-5 sm:px-6 pb-5 sm:pb-6 text-sm sm:text-base text-text-dark\/50 leading-relaxed\">Yes, Civil33 is fully licensed and insured. We carry comprehensive general liability, workers' compensation, and professional indemnity insurance.<\/p><\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item reveal bg-white rounded-xl border border-gray-100 overflow-hidden\">\r\n <button onclick=\"toggleFaq(this)\" class=\"w-full flex items-center justify-between p-5 sm:p-6 text-left\">\r\n <span class=\"font-heading text-base sm:text-lg font-bold text-secondary-dark pr-4\">Do you offer free consultations?<\/span>\r\n <i data-lucide=\"chevron-down\" class=\"w-5 h-5 text-accent-orange flex-shrink-0 faq-icon\"><\/i>\r\n <\/button>\r\n <div class=\"faq-answer\"><p class=\"px-5 sm:px-6 pb-5 sm:pb-6 text-sm sm:text-base text-text-dark\/50 leading-relaxed\">Yes! We offer a free initial consultation to discuss your project requirements, feasibility, and budget expectations.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/div> \r\n\r\n\r\n \r\n <div id=\"projectModal\" class=\"project-modal fixed inset-0 z-[70] flex items-center justify-center p-4\">\r\n <div class=\"absolute inset-0 bg-black\/60 backdrop-blur-sm\" onclick=\"closeModal()\"><\/div>\r\n <div class=\"modal-content relative bg-white rounded-2xl shadow-2xl max-w-3xl w-full max-h-[90vh] overflow-y-auto\">\r\n <button onclick=\"closeModal()\" class=\"absolute top-4 right-4 z-10 w-10 h-10 bg-white\/90 hover:bg-light-gray rounded-full flex items-center justify-center text-secondary-dark hover:text-accent-orange transition-colors shadow-sm\"><i data-lucide=\"x\" class=\"w-5 h-5\"><\/i><\/button>\r\n <div class=\"relative\"><img decoding=\"async\" id=\"modalImage\" src=\"\" alt=\"\" class=\"w-full h-56 sm:h-72 lg:h-80 object-cover rounded-t-2xl\"><div class=\"absolute inset-0 bg-gradient-to-t from-black\/30 to-transparent rounded-t-2xl\"><\/div><\/div>\r\n <div class=\"p-6 sm:p-8 lg:p-10\">\r\n <span id=\"modalCategory\" class=\"inline-block bg-accent-orange\/10 text-accent-orange text-xs font-semibold tracking-wider uppercase px-3 py-1 rounded-full mb-4\"><\/span>\r\n <h3 id=\"modalTitle\" class=\"font-heading text-2xl sm:text-3xl font-bold text-secondary-dark mb-4\"><\/h3>\r\n <p id=\"modalDesc\" class=\"text-base text-text-dark\/60 leading-relaxed mb-6\"><\/p>\r\n <div class=\"grid grid-cols-3 gap-4 mb-6\">\r\n <div class=\"bg-light-gray rounded-xl p-4 text-center\"><i data-lucide=\"maximize\" class=\"w-5 h-5 text-accent-orange mx-auto mb-1\"><\/i><div id=\"modalScale\" class=\"font-heading text-sm sm:text-base font-bold text-secondary-dark\"><\/div><div class=\"text-xs text-text-dark\/40\">Scale<\/div><\/div>\r\n <div class=\"bg-light-gray rounded-xl p-4 text-center\"><i data-lucide=\"banknote\" class=\"w-5 h-5 text-accent-orange mx-auto mb-1\"><\/i><div id=\"modalValue\" class=\"font-heading text-sm sm:text-base font-bold text-secondary-dark\"><\/div><div class=\"text-xs text-text-dark\/40\">Value<\/div><\/div>\r\n <div class=\"bg-light-gray rounded-xl p-4 text-center\"><i data-lucide=\"calendar\" class=\"w-5 h-5 text-accent-orange mx-auto mb-1\"><\/i><div id=\"modalTimeline\" class=\"font-heading text-sm sm:text-base font-bold text-secondary-dark\"><\/div><div class=\"text-xs text-text-dark\/40\">Timeline<\/div><\/div>\r\n <\/div>\r\n <a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link inline-flex items-center gap-2 bg-accent-orange hover:bg-accent-light text-white font-semibold text-sm px-6 py-3.5 rounded-lg btn-shine transition-colors duration-200\" onclick=\"closeModal()\"><i data-lucide=\"phone\" class=\"w-4 h-4\"><\/i> Discuss a Similar Project<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n\r\n \r\n <footer class=\"bg-secondary-dark relative overflow-hidden\">\r\n <div class=\"noise-overlay absolute inset-0\"><\/div>\r\n <div class=\"absolute bottom-0 right-0 w-[500px] h-[500px] bg-accent-orange\/3 rounded-full blur-[120px]\"><\/div>\r\n <div class=\"relative max-w-container mx-auto px-4 sm:px-6 lg:px-8 py-14 sm:py-16 lg:py-20\">\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-12\">\r\n <div class=\"sm:col-span-2 lg:col-span-1\">\r\n <a href=\"javascript:void(0)\" data-page=\"home\" class=\"nav-link flex items-center gap-2.5 mb-5\">\r\n <div class=\"w-10 h-10 bg-accent-orange rounded-lg flex items-center justify-center\"><i data-lucide=\"hard-hat\" class=\"w-6 h-6 text-white\"><\/i><\/div>\r\n <span class=\"font-heading text-xl font-bold text-white tracking-tight\">Civil<span class=\"text-accent-orange\">33<\/span><\/span>\r\n <\/a>\r\n <p class=\"text-sm text-white\/40 leading-relaxed mb-6 max-w-xs\">Building the future with strength and precision since 2005. Your trusted partner for commercial, residential, and infrastructure projects.<\/p>\r\n <div class=\"flex gap-3\">\r\n <a href=\"#\" class=\"w-10 h-10 bg-white\/5 hover:bg-accent-orange border border-white\/10 rounded-lg flex items-center justify-center transition-all duration-200\"><i data-lucide=\"facebook\" class=\"w-4 h-4 text-white\/60\" class=\"fa-brands fa-facebook-f text-white\/60 text-sm\"><\/i><\/a>\r\n <a href=\"#\" class=\"w-10 h-10 bg-white\/5 hover:bg-accent-orange border border-white\/10 rounded-lg flex items-center justify-center transition-all duration-200\"><i data-lucide=\"twitter\" class=\"w-4 h-4 text-white\/60\" class=\"fa-brands fa-facebook-f text-white\/60 text-sm\"><\/i><\/a>\r\n <a href=\"#\" class=\"w-10 h-10 bg-white\/5 hover:bg-accent-orange border border-white\/10 rounded-lg flex items-center justify-center transition-all duration-200\"><i data-lucide=\"instagram\" class=\"w-4 h-4 text-white\/60\" class=\"fa-brands fa-facebook-f text-white\/60 text-sm\"><\/i><\/a>\r\n <a href=\"#\" class=\"w-10 h-10 bg-white\/5 hover:bg-accent-orange border border-white\/10 rounded-lg flex items-center justify-center transition-all duration-200\"><i data-lucide=\"linkedin\" class=\"w-4 h-4 text-white\/60\" class=\"fa-brands fa-facebook-f text-white\/60 text-sm\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-heading text-sm font-bold text-white tracking-wider uppercase mb-5\">Quick Links<\/h4>\r\n <ul class=\"space-y-3\">\r\n <li><a href=\"javascript:void(0)\" data-page=\"home\" class=\"nav-link text-sm text-white\/40 hover:text-accent-orange transition-colors duration-200\">Home<\/a><\/li>\r\n <li><a href=\"javascript:void(0)\" data-page=\"about\" class=\"nav-link text-sm text-white\/40 hover:text-accent-orange transition-colors duration-200\">About Us<\/a><\/li>\r\n <li><a href=\"javascript:void(0)\" data-page=\"services\" class=\"nav-link text-sm text-white\/40 hover:text-accent-orange transition-colors duration-200\">Services<\/a><\/li>\r\n <li><a href=\"javascript:void(0)\" data-page=\"projects\" class=\"nav-link text-sm text-white\/40 hover:text-accent-orange transition-colors duration-200\">Projects<\/a><\/li>\r\n <li><a href=\"javascript:void(0)\" data-page=\"contact\" class=\"nav-link text-sm text-white\/40 hover:text-accent-orange transition-colors duration-200\">Contact<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-heading text-sm font-bold text-white tracking-wider uppercase mb-5\">Services<\/h4>\r\n <ul class=\"space-y-3\">\r\n <li><a href=\"javascript:void(0)\" data-page=\"services\" class=\"nav-link text-sm text-white\/40 hover:text-accent-orange transition-colors duration-200\">Commercial Construction<\/a><\/li>\r\n <li><a href=\"javascript:void(0)\" data-page=\"services\" class=\"nav-link text-sm text-white\/40 hover:text-accent-orange transition-colors duration-200\">Residential Projects<\/a><\/li>\r\n <li><a href=\"javascript:void(0)\" data-page=\"services\" class=\"nav-link text-sm text-white\/40 hover:text-accent-orange transition-colors duration-200\">Civil Engineering<\/a><\/li>\r\n <li><a href=\"javascript:void(0)\" data-page=\"services\" class=\"nav-link text-sm text-white\/40 hover:text-accent-orange transition-colors duration-200\">Project Management<\/a><\/li>\r\n <li><a href=\"javascript:void(0)\" data-page=\"services\" class=\"nav-link text-sm text-white\/40 hover:text-accent-orange transition-colors duration-200\">Renovation<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-heading text-sm font-bold text-white tracking-wider uppercase mb-5\">Contact Info<\/h4>\r\n <ul class=\"space-y-4\">\r\n <li class=\"flex items-start gap-3\"><i data-lucide=\"map-pin\" class=\"w-4 h-4 text-accent-orange mt-0.5 flex-shrink-0\"><\/i><span class=\"text-sm text-white\/40\">1111 Construction Aveniu, Suite 1000, NY 10500<\/span><\/li>\r\n <li class=\"flex items-center gap-3\"><i data-lucide=\"phone\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i><span class=\"text-sm text-white\/40\">+1 (111) 111-1111<\/span><\/li>\r\n <li class=\"flex items-center gap-3\"><i data-lucide=\"mail\" class=\"w-4 h-4 text-accent-orange flex-shrink-0\"><\/i><span class=\"text-sm text-white\/40\">info@Civil33.com<\/span><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"relative border-t border-white\/10\">\r\n <div class=\"max-w-container mx-auto px-4 sm:px-6 lg:px-8 py-5 sm:py-6\">\r\n <div class=\"flex flex-col sm:flex-row items-center justify-between gap-3 text-xs sm:text-sm text-white\/30\">\r\n <span>\u00a9 2024 Civil33 Construction. All rights reserved.<\/span>\r\n <div class=\"flex gap-6\">\r\n <a href=\"#\" class=\"hover:text-accent-orange transition-colors\">Privacy Policy<\/a>\r\n <a href=\"#\" class=\"hover:text-accent-orange transition-colors\">Terms of Service<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n \r\n <button id=\"backToTop\" class=\"fixed bottom-6 right-6 z-50 w-12 h-12 bg-accent-orange hover:bg-accent-light text-white rounded-xl shadow-lg flex items-center justify-center opacity-0 translate-y-4 pointer-events-none transition-all duration-300\" aria-label=\"Back to top\">\r\n <i data-lucide=\"chevron-up\" class=\"w-5 h-5\"><\/i>\r\n <\/button>\r\n\r\n\r\n \r\n <script>\r\n \/\/ Initialize Lucide Icons\r\n lucide.createIcons();\r\n\r\n \/\/ ========== SPA ROUTING ==========\r\n function navigateTo(pageId) {\r\n document.querySelectorAll('.page-section').forEach(p => p.classList.remove('active-page'));\r\n const target = document.getElementById('page-' + pageId);\r\n if (target) target.classList.add('active-page');\r\n window.scrollTo(0, 0); \r\n \r\n document.querySelectorAll('header .nav-link, .mobile-link').forEach(link => { \r\n link.classList.remove('text-accent-orange'); \r\n link.classList.add('text-text-dark\/70');\r\n link.classList.remove('bg-accent-orange\/10');\r\n });\r\n document.querySelectorAll(`.nav-link[data-page=\"${pageId}\"], .mobile-link[data-page=\"${pageId}\"]`).forEach(link => { \r\n link.classList.add('text-accent-orange'); \r\n link.classList.remove('text-text-dark\/70');\r\n if(link.classList.contains('mobile-link')) {\r\n link.classList.add('bg-accent-orange\/10');\r\n }\r\n });\r\n\r\n lucide.createIcons(); \r\n \r\n setTimeout(() => {\r\n const activePage = document.querySelector('.page-section.active-page');\r\n if(activePage) {\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('active');\r\n observer.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.15 });\r\n\r\n activePage.querySelectorAll('.reveal').forEach(el => {\r\n el.classList.remove('active');\r\n observer.observe(el);\r\n });\r\n \r\n activePage.querySelectorAll('[data-count]').forEach(el => {\r\n if(!el.dataset.counted){\r\n el.dataset.counted = \"1\"; \r\n const t = parseInt(el.dataset.count); \r\n let c = 0; \r\n const inc = t \/ 60; \r\n const tm = setInterval(() => {\r\n c += inc; \r\n if(c >= t) {\r\n el.textContent = t + (t === 98 ? '%' : '+'); \r\n clearInterval(tm);\r\n } else {\r\n el.textContent = Math.floor(c);\r\n }\r\n }, 25);\r\n }\r\n });\r\n }\r\n }, 50);\r\n }\r\n\r\n document.querySelectorAll('.nav-link[data-page], .mobile-link[data-page]').forEach(link => {\r\n link.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n const page = this.getAttribute('data-page');\r\n navigateTo(page);\r\n document.getElementById('mobileMenu').classList.remove('open');\r\n document.getElementById('mobileOverlay').classList.add('hidden');\r\n document.body.style.overflow = '';\r\n });\r\n });\r\n\r\n \/\/ ========== COMPONENT LOGICS ==========\r\n const mBtn = document.getElementById('mobileMenuBtn'), mM = document.getElementById('mobileMenu'), mC = document.getElementById('mobileMenuClose'), mO = document.getElementById('mobileOverlay');\r\n if(mBtn) mBtn.addEventListener('click', () => { mM.classList.add('open'); mO.classList.remove('hidden'); document.body.style.overflow = 'hidden'; });\r\n if(mC) mC.addEventListener('click', () => { mM.classList.remove('open'); mO.classList.add('hidden'); document.body.style.overflow = ''; });\r\n if(mO) mO.addEventListener('click', () => { mM.classList.remove('open'); mO.classList.add('hidden'); document.body.style.overflow = ''; });\r\n\r\n const header = document.getElementById('header');\r\n window.addEventListener('scroll', () => {\r\n if (window.scrollY > 50) { header.style.boxShadow = '0 4px 20px rgba(0,0,0,0.08)'; } \r\n else { header.style.boxShadow = 'none'; }\r\n });\r\n\r\n const revealObserver = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('active');\r\n revealObserver.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });\r\n document.querySelectorAll('.page-section.active-page .reveal').forEach(el => revealObserver.observe(el));\r\n\r\n const statObserver = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n const el = entry.target;\r\n if(!el.dataset.counted) {\r\n el.dataset.counted = \"1\";\r\n const target = parseInt(el.dataset.count);\r\n let current = 0;\r\n const increment = target \/ 60;\r\n const timer = setInterval(() => {\r\n current += increment;\r\n if (current >= target) {\r\n el.textContent = target + (target === 98 ? '%' : '+');\r\n clearInterval(timer);\r\n } else {\r\n el.textContent = Math.floor(current);\r\n }\r\n }, 25);\r\n statObserver.unobserve(el);\r\n }\r\n }\r\n });\r\n }, { threshold: 0.5 });\r\n document.querySelectorAll('.stat-number[data-count]').forEach(el => statObserver.observe(el));\r\n\r\n const filterBtns = document.querySelectorAll('.filter-btn');\r\n const projectCards = document.querySelectorAll('#projectGrid .project-card');\r\n filterBtns.forEach(btn => {\r\n btn.addEventListener('click', () => {\r\n filterBtns.forEach(b => b.classList.remove('active'));\r\n btn.classList.add('active');\r\n const filter = btn.dataset.filter;\r\n projectCards.forEach(card => {\r\n if (filter === 'all' || card.dataset.category === filter) {\r\n card.style.display = '';\r\n card.style.opacity = '0'; card.style.transform = 'scale(0.95)';\r\n setTimeout(() => { card.style.transition = 'opacity 0.4s ease, transform 0.4s ease'; card.style.opacity = '1'; card.style.transform = 'scale(1)'; }, 50);\r\n } else {\r\n card.style.transition = 'opacity 0.3s ease, transform 0.3s ease';\r\n card.style.opacity = '0'; card.style.transform = 'scale(0.95)';\r\n setTimeout(() => { card.style.display = 'none'; }, 300);\r\n }\r\n });\r\n });\r\n });\r\n\r\n const projectModal = document.getElementById('projectModal');\r\n function openModal(title, category, desc, img, scale, value, timeline) {\r\n document.getElementById('modalTitle').textContent = title;\r\n document.getElementById('modalCategory').textContent = category;\r\n document.getElementById('modalDesc').textContent = desc;\r\n document.getElementById('modalImage').src = img;\r\n document.getElementById('modalImage').alt = title;\r\n document.getElementById('modalScale').textContent = scale;\r\n document.getElementById('modalValue').textContent = value;\r\n document.getElementById('modalTimeline').textContent = timeline;\r\n projectModal.classList.add('open');\r\n document.body.style.overflow = 'hidden';\r\n lucide.createIcons();\r\n }\r\n\r\n function closeModal() {\r\n projectModal.classList.remove('open');\r\n document.body.style.overflow = '';\r\n }\r\n document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeModal(); });\r\n\r\n function handleFormSubmit(formId, successId) {\r\n const form = document.getElementById(formId);\r\n const success = document.getElementById(successId);\r\n if(form) {\r\n form.addEventListener('submit', (e) => {\r\n e.preventDefault();\r\n success.classList.remove('hidden');\r\n form.reset();\r\n lucide.createIcons();\r\n setTimeout(() => { success.classList.add('hidden'); }, 5000);\r\n });\r\n }\r\n }\r\n handleFormSubmit('contactFormHome', 'formSuccessHome');\r\n handleFormSubmit('contactFormPage', 'formSuccessPage');\r\n\r\n function toggleFaq(button) {\r\n const faqItem = button.parentElement;\r\n const answer = faqItem.querySelector('.faq-answer');\r\n const icon = button.querySelector('.faq-icon');\r\n const isOpen = answer.style.maxHeight && answer.style.maxHeight !== '0px';\r\n document.querySelectorAll('.faq-answer').forEach(a => { a.style.maxHeight = '0px'; });\r\n document.querySelectorAll('.faq-icon').forEach(i => { i.style.transform = 'rotate(0deg)'; });\r\n if (!isOpen) {\r\n answer.style.maxHeight = answer.scrollHeight + 'px';\r\n icon.style.transform = 'rotate(180deg)';\r\n }\r\n }\r\n\r\n const backToTop = document.getElementById('backToTop');\r\n window.addEventListener('scroll', () => {\r\n if (window.scrollY > 600) {\r\n backToTop.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');\r\n backToTop.classList.add('opacity-100', 'translate-y-0');\r\n } else {\r\n backToTop.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');\r\n backToTop.classList.remove('opacity-100', 'translate-y-0');\r\n }\r\n });\r\n backToTop.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); });\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\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>Civil33 Construction \u2014 Building the Future Civil33 Home About Services Projects Contact Get a Quote Menu Home About Services Projects Contact Get a Quote Trusted Since 2005 Building the Future with Strength & Precision From commercial complexes to infrastructure projects, we deliver excellence in every beam, every pour, every detail. Get a Quote View Projects […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-162","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/pages\/162","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/comments?post=162"}],"version-history":[{"count":35,"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/pages\/162\/revisions"}],"predecessor-version":[{"id":247,"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/pages\/162\/revisions\/247"}],"wp:attachment":[{"href":"https:\/\/demo75.techhassle.com\/index.php\/wp-json\/wp\/v2\/media?parent=162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}