/* Extracted from legacy index.html — site-wide baseline */
* { margin: 0; padding: 0; box-sizing: border-box; }
        /* Header/nav stability (icons + layout isolation) */
        .site-header .nav-item > a i,
        .breadcrumb-strip a i,
        .page-nav a i {
            display: inline-block;
            min-width: 1.125em;
            text-align: center;
            vertical-align: -0.05em;
        }

        /* Document scrolling stays on the viewport (html/body). Avoid overflow:hidden on body — it breaks position:sticky for descendants until layout settles. */
        html { scrollbar-gutter: stable; overflow-x: clip; overflow-y: scroll; }
        body { font-family: 'Montserrat', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #1F2A44; background: #F9FAFB; overflow-x: clip; }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 1000;
            min-height: 10.5rem;
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            box-sizing: border-box;
            line-height: 1.25;
            background-color: #FFFFFF;
            box-shadow: 0 2px 12px rgba(31, 42, 68, 0.08);
        }

        .top-bar { min-height: 4.75rem; box-sizing: border-box; background-color: #abde99; color: #1F2A44; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; flex-wrap: wrap; line-height: 1.35; }
        .top-bar-left, .top-bar-right { background-color: transparent; border-radius: 0; padding: 0; display: flex; align-items: center; }
        .top-bar-left { margin-left: 8rem; }
        .top-bar-right { margin-right: 8rem; }
        @media (max-width: 1024px) {
            /* layout-fix-top-bar-1024: avoid horizontal overflow between tablet and mobile breakpoints */
            .top-bar-left,
            .top-bar-right {
                margin-left: 0;
                margin-right: 0;
            }
        }


        .site-logo { text-decoration: none; }
        .site-title-text {
            font-family: 'Montserrat', sans-serif;
            font-size: 2.0rem;
            line-height: 1.2;
            min-height: 2.4em;
            font-weight: 400 !important;
            color: #1F2A44;
            text-transform: lowercase;
            letter-spacing: 1px;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .site-title-text .logo-white-part { color: #FFFFFF; }

        .top-bar-right a { display: inline-flex; align-items: center; line-height: 1.25; max-width: min(100%, 28rem); letter-spacing: 1px; white-space: normal; text-align: center; text-decoration: none; color: #1F2A44; font-size: 1.5rem; font-weight: 400; background-color: #FFFFFF; padding: 0.5rem 1rem; border-radius: 9999px; border: 1px solid #2B91A3; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease; }
        .top-bar-right a:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
        .hero-section { position: relative; min-height: 80vh; background: url('https://ik.imagekit.io/iwx5svscw/Electrical%20installation/Electrical-Installation%20(1).png?updatedAt=1754089476186') no-repeat center center; background-size: cover; display: flex; align-items: center; padding: 2rem; }
        .hero-content-wrapper { position: relative; width: 100%; }
        .content-left { position: absolute; left: 5rem; top: 50%; transform: translateY(-50%); text-align: left; max-width: 600px; z-index: 20; color: #FFFFFF; }
        .content-left h1 { font-size: 2.8rem; font-weight: 700; margin-bottom: 0.5rem; line-height: 1.2; color: #FFFFFF; text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000, 0 0 8px rgba(0,0,0,0.7); }
        .content-left p { font-size: 1.4rem; margin-bottom: 1.5rem; line-height: 1.4; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 6px rgba(0,0,0,0.8); }

        .header-cta-group { position: absolute; right: 7rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 1.5rem; z-index: 20; max-width: calc(100% - 4rem); box-sizing: border-box; }
                .offer-button,
        .qa-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: #FFBD59;
            color: #FFFFFF;
            text-decoration: none;
            font-weight: 700;
            font-size: clamp(0.65rem, 1.1vw, 0.9rem);
            padding: 10px 16px;
            border-radius: 50px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            text-transform: uppercase;
            letter-spacing: 1px;
            line-height: 1.25;
            text-align: center;
            max-width: min(100%, min(calc(100vw - 32px), 24rem));
            box-sizing: border-box;
            border: none;
            transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
        }
        .offer-button:hover,
        .qa-button:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 6px 16px rgba(0,0,0,0.3);
            background-color: #e6a23c;
            color: #FFFFFF;
        }
        .offer-button {
            padding: 28px 36px;
            min-height: 4.75rem;
            border: 4px solid #FFFFFF;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            font-size: clamp(0.88rem, 1.55vw, 1.2rem);
            white-space: nowrap;
            max-width: min(100%, min(calc(100vw - 24px), 36rem));
        }
        .offer-button:hover {
            box-shadow: 0 6px 20px rgba(0,0,0,0.35);
        }

        .divider { border: 2px solid #E6A23C; width: 100%; margin: 1rem 0; align-self: flex-start; z-index: 10; max-width: 100%; }

        .logos-right { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; z-index: 10; }
        .logos-right img { width: 90px; height: 70px; object-fit: contain; background-color: rgba(255,255,255,0.8); padding: 5px; transition: transform 0.3s ease, background-color 0.3s ease; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .logos-right img:hover { transform: scale(1.1); background-color: rgba(255,255,255,0.95); }

        nav { min-height: 5.75rem; box-sizing: border-box; background: #FFFFFF; padding: 1.5rem 0; display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,0.1); position: relative; line-height: 1.25; }
        .nav-links { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; background-color: #f0f0f0; padding: 0.75rem 0; width: 100%; }
        .nav-item { position: relative; margin: 0 0.5rem; }
        .nav-item > a { padding: 0 1rem; text-decoration: none; color: #2B91A3; font-weight: 600; font-size: 1rem; transition: color 0.3s ease; display: inline-flex; align-items: center; }
        .nav-item > a:hover { color: #abde99; }
        .nav-item > a i { margin-right: 6px; }

                .nav-item > a i.fa-home { color: #1F2A44; } 
        .nav-item > a:hover i.fa-home { color: #abde99; }

        .dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background-color: #FFFFFF; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 8px; min-width: 260px; z-index: 1100; margin-top: 15px; padding: 0.5rem 0; border: 1px solid #eee; opacity: 0; visibility: hidden; display: block; transition: opacity 0.3s ease, visibility 0s 0.3s; }
        .dropdown-menu a { color: #1F2A44; padding: 0.75rem 1.5rem; text-decoration: none; display: block; font-size: 0.95rem; transition: background-color 0.2s ease, color 0.2s ease; }
        .dropdown-menu a:hover { background-color: #f0f0f0; color: #2B91A3; }
        .dropdown-menu.visible { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }

        .mega-menu { min-width: 550px; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 0 1rem; padding: 1rem; display: grid; }

        .hamburger { display: none; font-size: 1.8rem; color: #1F2A44; cursor: pointer; background: none; border: none; padding: 0.5rem; }

        .container { max-width: 1200px; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }

        /* Services sidebar (inner pages): native sticky below site header; opaque panel avoids text bleed-through */
        .service-menu-col {
            align-self: start;
            position: sticky;
            top: 12.5rem;
            z-index: 900;
            background-color: #F9FAFB;
        }

                .breadcrumb-strip {
            background-color: #ffffff;
            border-bottom: 1px solid #e0e0e0;
            padding: 15px 0;
            font-size: 0.9rem;
            color: #666;
            font-family: 'Roboto', sans-serif;
            font-weight: 500;
            position: relative;             z-index: 20;                    display: block;
            width: 100%;
        }

        .breadcrumb-strip .container {
            display: flex;
            align-items: center;
        }

        .breadcrumb-strip a {
            text-decoration: none;
            color: #1F2A44;
            transition: color 0.3s ease;
            text-transform: uppercase;
            font-size: 0.85rem;
            letter-spacing: 0.5px;
            font-weight: 800;
            display: flex;
            align-items: center;
        }

        .breadcrumb-strip a i {
            font-size: 1.1rem;
            margin-right: 5px;
        }

        .breadcrumb-strip a:hover {
            color: #2B91A3;
        }

        .breadcrumb-strip .separator {
            margin: 0 12px;
            color: #ccc;
            font-size: 0.8rem;
        }

        .breadcrumb-strip .current {
            font-family: 'Roboto', sans-serif;
            color: #2B91A3;
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.85rem;
            letter-spacing: 0.5px;
        }

        .intro, .services, .projects, .promise, .expertise-section, .comfort-section, .logo-slider-section, .info-hub-section, .faq-section, .founder-section { padding-top: 5rem; padding-bottom: 5rem; }
        h1, h2, h3 { color: #2B91A3; font-weight: 700; }
        .services h2, .projects h2, .expertise-section h2, .info-hub-section h2, .faq-section h2, .founder-section h2 { text-align: center; margin-bottom: 2.5rem; font-size: 2.2rem; }
        .promise h2 { color: #333333; text-align: center; margin-bottom: 2.5rem; font-size: 2.2rem; }
        .promise p { text-align: center; max-width: 900px; margin-left: auto; margin-right: auto; }

        .intro h2 { text-align: left; margin-bottom: 1.5rem; font-size: 2.2rem; }
        .intro p { text-align: left; max-width: 100%; margin: 0; }
        .intro-container { display: flex; align-items: stretch; gap: 3rem; }
        .intro-text { flex: 1; }
        .intro-image { flex-basis: 45%; }
        .intro-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); }

        h2.title-with-line span { display: inline-block; position: relative; padding-bottom: 15px; }
        h2.title-with-line span::after { content: ""; position: absolute; width: calc(100% + 40px); height: 2px; background-color: #abde99; bottom: 0; left: 50%; transform: translateX(-50%); border-radius: 2px; }

        .services { padding-top: 0; }
        .primary-service-card { display: flex; background: #FFFFFF; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 16px rgba(0,0,0,0.1); margin-bottom: 2.5rem; align-items: center; }
        .primary-service-card .service-slideshow { flex: 0 0 50%; height: 400px; position: relative; overflow: hidden; }
        .primary-service-content { padding: 3rem; }
        .primary-service-content h3 { font-size: 2rem; margin-bottom: 1rem; }
        .primary-service-content p { font-size: 1.1rem; margin-bottom: 1.5rem; color: #666; }
        .cta-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; background-color: rgba(255,189,89,0.9); color: #FFFFFF; border: 2px solid #FFBD59; border-radius: 50px; font-weight: 700; padding: 0.8rem 1.8rem; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: all 0.3s ease; }
        .cta-button:hover { background-color: #FFBD59; color: #FFFFFF; transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); }

        .specialized-services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
        .specialized-services-grid .service-card { background: #FFFFFF; border-radius: 10px; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden; display: flex; flex-direction: column; }
        .specialized-services-grid .service-card:hover { transform: translateY(-5px); box-shadow: 0 6px 16px rgba(0,0,0,0.15); }
        .specialized-services-grid .service-card .service-slideshow { width: 100%; height: 220px; position: relative; overflow: hidden; }
        .specialized-services-grid .service-card .service-card-content { padding: 1.5rem; flex-grow: 1; }
        .specialized-services-grid .service-card .service-card-content h3 { margin-bottom: 0.5rem; font-size: 1.4rem; }

        .service-slideshow img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: opacity 1.5s ease-in-out;
        }
        .service-slideshow img:first-child { z-index: 1; opacity: 1; }
        .service-slideshow img:last-child { z-index: 2; animation: fadeLoop 6s infinite alternate; }

        @keyframes fadeLoop {
            0%, 40% { opacity: 0; }
            60%, 100% { opacity: 1; }
        }

        .expertise-section { background-color: transparent; }
        .expertise-intro { text-align: center; max-width: 900px; margin: -1rem auto 2rem; color: #4a5568; }
        .expertise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
        .expertise-card { border-radius: 10px; overflow: hidden; text-align: center; transition: transform 0.3s ease; }
        .expertise-card:hover { transform: translateY(-5px); }
        .expertise-card img { width: 100%; height: 200px; object-fit: cover; display: block; border-radius: 10px; margin-bottom: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
        .expertise-content { padding: 0 1.5rem 1.5rem 1.5rem; }
        .expertise-content h3 { font-size: 1.25rem; margin-bottom: 0.75rem; min-height: 3.5em; display: flex; align-items: center; justify-content: center; }
        .expertise-content p { font-size: 0.95rem; color: #555; text-align: left; }

        .question-section { background-color: transparent; padding: 7rem 0; }
        .question-container { display: flex; align-items: center; gap: 2rem; }
        
                .question-left-box { background: linear-gradient(to bottom, #abde99, #EAF6F8 85%, #F9FAFB 100%); padding: 2.5rem; border-radius: 10px; flex: 1; position: relative; overflow: visible; box-shadow: none; }
        
        .question-left-content { max-width: 100%; }
        .simple-section-image { position: absolute; bottom: -30px; right: -10px; width: 280px; height: auto; pointer-events: none; }
        .question-right { flex: 1; padding: 0 1rem; }
        .question-left-box h2 { text-align: left; font-size: 2.2rem; margin-bottom: 1.25rem; color: #333333; }
        .question-left-box p { text-align: left; max-width: 100%; margin-bottom: 1.25rem; }

        .qa-button { margin-top: 0.25rem; }

        .quality-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; height: 100%; }
        .quality-list li { display: flex; align-items: flex-start; }
        .quality-list i { font-size: 1.8rem; color: #2B91A3; margin-right: 1rem; margin-top: 0.1rem; width: 25px; text-align: center; }
        .quality-item-text h4 { font-size: 1.1rem; margin-bottom: 0.25rem; color: #1F2A44; }
        .quality-item-text p { font-size: 0.9rem; color: #666; line-height: 1.5; }
        
        .quality-list li:nth-child(1) i { color: #38b6ff !important; }
        .quality-list li:nth-child(2) i { color: #3dff51 !important; text-shadow: 0px 0px 1px rgba(0,0,0,0.1); }
        .quality-list li:nth-child(3) i { color: #ffde59 !important; text-shadow: 0px 0px 1px rgba(0,0,0,0.1); }
        .quality-list li:nth-child(4) i { color: #ff1fa9 !important; }

        .comfort-container { position: relative; background-image: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0) 100%), url('https://ik.imagekit.io/iwx5svscw/Switches%20&%20Sockets/Engineering.png?updatedAt=1754092596895'); background-size: cover; background-position: center; border-radius: 10px; min-height: 480px; display: flex; align-items: center; padding: 2rem; }
        .comfort-content { padding: 2rem; max-width: 50%; }
        .comfort-content h2 { color: #FFFFFF; font-size: 2.2rem; text-align: left; margin-bottom: 1rem; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); }
        .comfort-content p { color: #E0E0E0; margin-bottom: 1.5rem; text-shadow: 1px 1px 2px rgba(0,0,0,0.7); }

        .projects-slider-wrapper { position: relative; padding: 0; margin: 0 auto; overflow: hidden; }
        .projects > .projects-slider-wrapper { max-width: 90%; }
        .projects-slider-viewport { overflow: hidden; }
        .projects-slider-track { 
            display: flex; 
            gap: 1.5rem;
            width: max-content; 
                        animation: continuousScroll 80s linear infinite; 
        }
        
        @keyframes continuousScroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); } 
        }
        
        .slider-btn { display: none; }

        .projects p { margin-bottom: 2rem; text-align: center; max-width: 800px; margin-left: auto; margin-right: auto; }
        .project-card { width: 250px; flex-shrink: 0; position: relative; overflow: hidden; border-radius: 10px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.1); aspect-ratio: 1 / 1; transform: scale(0.9); transition: transform 0.3s ease; }
        .project-card:hover { transform: scale(0.95); }
        .project-card img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.4s ease; }
        .project-card:hover img { transform: scale(1.1); }
        .project-caption { position: absolute; bottom: 0; left: 0; width: 100%; padding: 1rem; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); color: #FFFFFF; transform: translateY(100%); transition: transform 0.4s ease; }
        .project-card:hover .project-caption { transform: translateY(0); }
        .project-caption h3 { color: #FFFFFF; margin: 0 0 0.25rem 0; font-size: 1.1rem; }
        .project-caption p { text-align: left; max-width: 100%; margin: 0; color: #ddd; font-size: 0.9rem; }

        .logo-slider-section .projects-slider-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 2.5rem; align-items: center; width: 100%; animation: none; }
        .logo-card { background-color: #FFFFFF; border: 0.5px solid #ddd; border-radius: 8px; display: flex; align-items: center; justify-content: center; height: 100px; padding: 1rem; transition: transform 0.3s ease, box-shadow 0.3s ease; }
        .logo-card:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
        .logo-card img { max-width: 100%; max-height: 100%; object-fit: contain; }

        .info-hub-section { background-color: transparent; padding-top: 4rem; padding-bottom: 5rem; }
        .info-hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; align-items: stretch; }
        .info-column { background-color: #FFFFFF; border: 1px solid #EAECEE; box-shadow: 0 4px 12px rgba(0,0,0,0.05); border-radius: 10px; padding: 2rem; display: flex; flex-direction: column; }
        .info-column h3 { font-size: 1.5rem; margin-bottom: 1.2rem; text-align: center; color: #2B91A3; position: relative; padding-bottom: 10px; }
        .info-column h3::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 50px; height: 2px; background-color: #abde99; }
        .info-column p.section-intro { font-size: 0.95rem; color: #566; text-align: center; margin: 0 auto 1.2rem; max-width: 560px; }

        .review-item { padding: 0.5rem 0; margin-bottom: 1rem; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid #eee; }
        .review-item:last-child{ border-bottom: none; }
        .review-item p { font-style: italic; color: #666; margin-bottom: 0.5rem; font-size: 0.95rem; }
        .review-item cite { font-weight: 700; text-align: right; color: #1F2A44; }

        .tip-item { display: flex; flex-direction: column; justify-content: center; padding: 0.5rem 0; margin-bottom: 1rem; border-bottom: 1px solid #eee; }
        .tip-item:last-child{ border-bottom: none; }
        .tip-item h4 { font-size: 1.1rem; color: #1F2A44; margin-bottom: 0.5rem; display: flex; align-items: center; }
        .tip-item h4 i { margin-right: 0.75rem; color: #2B91A3; }
        .tip-item img { width: 100%; height: 120px; object-fit: cover; border-radius: 5px; margin: 0.5rem 0; border: none; }
        .tip-item p { font-size: 0.9rem; color: #666; }

        .process-step { display: flex; align-items: flex-start; margin-bottom: 1rem; border-bottom: 1px solid #eee; padding-bottom: 1rem; }
        .process-step:last-child { border-bottom: none; margin-bottom: 0; }
        .process-step i { font-size: 1.8rem; color: #2B91A3; margin-right: 1.5rem; margin-top: 0.2rem; width: 30px; text-align: center; }
        .process-step-content h4 { font-size: 1.1rem; color: #1F2A44; margin-bottom: 0.25rem; }
        .process-step-content p { font-size: 0.9rem; color: #666; }

        .faq-section { padding-top: 5rem; padding-bottom: 5rem; }
        .qa-container { max-width: 800px; margin: 0 auto; }
        .qa-item { border-bottom: 1px solid #e0e0e0; padding-bottom: 0.75rem; margin-bottom: 0.75rem; }
        .qa-item:last-child { border-bottom: none; }
        .qa-item summary { font-weight: 600; cursor: pointer; padding: 0.5rem 0; list-style: none; position: relative; padding-left: 2rem; }
        .qa-item summary::-webkit-details-marker { display: none; }
        .qa-item summary::before { content: '?'; position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-weight: 700; color: #FFFFFF; background-color: #2B91A3; border-radius: 50%; width: 1.5rem; height: 1.5rem; text-align: center; line-height: 1.5rem; }
        .qa-item[open] > summary { color: #abde99; }
        .qa-item div { padding: 1rem 0 0 2rem; font-size: 0.9rem; color: #666; }

        
        .contact-section { 
            background-color: transparent; 
            color: #1F2A44; 
            position: relative; 
            padding-top: 1rem;      
            padding-bottom: 2rem;   
        }
        .contact-section h2 { color: #1F2A44; margin-bottom: 1rem; text-align: center; }
        .contact-section h2::after { background-color: #abde99; }
        
        .contact-wrapper { display: block; text-align: center; }
        
        .contact-form-container { 
            width: 100%; 
            max-width: 850px; 
            margin: 0 auto; 
            background: #FFFFFF; 
            padding: 1.5rem 2rem;   
            border-radius: 10px; 
            color: #1F2A44; 
            box-shadow: 0 10px 25px rgba(0,0,0,0.2); 
            text-align: left; 
        }

       
        .contact-form-container form {
            display: grid;
            grid-template-columns: 1fr 1fr; 
            gap: 12px;
        }

        .form-group { margin-bottom: 0; }
        
       
        .form-group:nth-of-type(5), 
        .submit-btn {
            grid-column: span 2;
        }

        .form-group label { display: block; margin-bottom: 0.3rem; font-weight: 600; font-size: 0.9rem; }
        
        
        .form-group input, .form-group select, .form-group textarea { 
            width: 100%; 
            padding: 0.6rem; 
            border: 1px solid #ddd; 
            border-radius: 5px; 
            font-family: inherit; 
            font-size: 0.95rem; 
            transition: border-color 0.3s; 
        }
        
        .form-group textarea {
            height: 80px; 
            resize: vertical;
        }

        .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: #2B91A3; }
        
        .submit-btn { 
            width: 100%; 
            background-color: #FFBD59; 
            color: #FFFFFF; 
            font-weight: 700; 
            border: none; 
            padding: 0.85rem 0.6rem; 
            border-radius: 5px; 
            cursor: pointer; 
            font-size: clamp(0.75rem, 1.8vw, 1.1rem); 
            text-transform: uppercase;
            letter-spacing: 0.5px;
            line-height: 1.2;
            transition: background 0.3s, transform 0.2s; 
            margin-top: 5px;
        }
        .submit-btn:hover { background-color: #e6a23c; transform: translateY(-2px); }

        .main-footer { background-color: #1F2A44; color: #EAECEE; padding: 4rem 1rem 2rem; border-top: 1px solid #4A5568; }
        .footer-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid #4A5568; flex-wrap: wrap; }
        .footer-column { flex: 1; min-width: 250px; }
        .footer-column h4 { font-size: 1.2rem; font-weight: 700; color: #abde99; margin-bottom: 1.5rem; position: relative; padding-bottom: 0.5rem; }
        .footer-column h4::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 2px; background-color: #abde99; }
        .footer-column ul { list-style: none; padding: 0; margin: 0; }
        .footer-column ul li { margin-bottom: 0.85rem; }
        .footer-column ul li a { color: #EAECEE; text-decoration: none; transition: color 0.3s ease, padding-left 0.3s ease; }
        .footer-column ul li a:hover { color: #abde99; padding-left: 5px; }
        .footer-column .contact-info-item { display: flex; align-items: center; margin-bottom: 1rem; }
        .footer-column .contact-info-item i { color: #abde99; font-size: 1.2rem; width: 25px; margin-right: 0.75rem; }
        .footer-info-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; max-width: 1200px; margin: 0 auto; padding: 2rem 0 0; }
        .footer-location { display: flex; align-items: center; }
        .footer-location i { color: #abde99; font-size: 2.5rem; margin-right: 1.5rem; }
        .location-links { display: grid; grid-template-columns: repeat(2, auto); gap: 0.5rem 1.5rem; font-size: 0.9rem; }
        .location-links a { color: #A0AEC0; text-decoration: none; transition: color 0.3s ease; }
        .location-links a:hover { color: #FFFFFF; text-decoration: underline; }
        .footer-bottom-right { display: flex; flex-direction: column; align-items: flex-end; }
        .footer-socials { display: flex; gap: 1.2rem; margin-bottom: 1rem; }
        .footer-socials a { color: #A0AEC0; font-size: 1.4rem; transition: color 0.3s ease, transform 0.3s ease; }
        .footer-socials a:hover { color: #FFFFFF; transform: translateY(-3px); }
        .footer-copyright { font-size: 0.8rem; color: #A0AEC0; }

        .lightbox-modal {
            display: none;
            position: fixed;
            z-index: 10050;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.9);
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .modal-content {
            margin: auto;
            display: block;
            width: 90%;
            max-width: 1000px;
            max-height: 90vh;
            object-fit: contain;
            animation-name: zoom;
            animation-duration: 0.6s;
            transition: all 0.3s ease;
        }
        .close-button {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
            cursor: pointer;
        }
        .close-button:hover,
        .close-button:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }
        .prev-button, .next-button {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            padding: 16px;
            color: white;
            font-weight: bold;
            font-size: 20px;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
            user-select: none;
            -webkit-user-select: none;
            transform: translateY(-50%);
            background-color: rgba(0,0,0,0.5);
            border: none;
        }
        .prev-button {
            left: 0;
            border-radius: 3px 0 0 3px;
        }
        .next-button {
            right: 0;
            border-radius: 3px 0 0 3px;
        }
        .prev-button:hover, .next-button:hover {
            background-color: rgba(0,0,0,0.8);
        }

        @keyframes zoom {
            from {transform: scale(0)}
            to {transform: scale(1)}
        }

        @media (max-width: 1024px) {
            .specialized-services-grid { grid-template-columns: repeat(2, 1fr); }
            .primary-service-card { flex-direction: column; }
            .primary-service-card .service-slideshow { width: 100%; height: 250px; }
            .expertise-grid { grid-template-columns: repeat(2, 1fr); }
            .comfort-content { max-width: 60%; }
            .info-hub-grid { grid-template-columns: 1fr; }
            .question-left-content { max-width: 100%; }
            .intro-container { flex-direction: column; }
        }
        @media (max-width: 768px) {
            .top-bar-left, .top-bar-right { margin: 0; }
            .top-bar { flex-direction: column; align-items: center; padding: 18px 14px; }
            .top-bar-left { margin-bottom: 10px; }
            .top-bar-right a { font-size: 1.2rem; padding: 0.4rem 0.8rem; }
.hero-section { min-height: auto; height: auto; flex-direction: column; justify-content: center; text-align: center; padding: 4rem 1rem;}
            .hero-content-wrapper { flex-direction: column; gap: 2rem; }
            .content-left { position: static; transform: none; width: 100%; max-width: 90%; padding-left:0; text-align:center; margin-bottom: 1.5rem; order: 1;}
            .content-left p { text-align: center; }
            .content-left h1 { font-size: 1.8rem; }
            .content-left p { font-size: 1.1rem; }
            .header-cta-group { position: static; transform: none; order: 2; margin-top: 1rem; max-width: 100%; }
            .offer-button,
            .qa-button { position: static; margin: 1rem auto; order: 2; max-width: calc(100vw - 24px); font-size: clamp(0.55rem, 2.7vw, 0.8rem); padding: 9px 12px; }
            .offer-button { padding: 20px 24px; min-height: 3.75rem; border-width: 3px; font-size: clamp(0.72rem, 2.8vw, 0.95rem); }
            .divider { display: none; }

            nav { padding: 0; }
            .nav-links { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%; background: #f0f0f0; padding: 1rem 0; z-index: 1100; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
            .nav-links.active { display: flex; }
            .nav-item { margin: 0; width: 100%; text-align: center; }
            .nav-item > a { justify-content: center; padding: 0.75rem 1rem;}
            .dropdown-menu { display: none !important; }
            .hamburger { display: block; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); }

            .specialized-services-grid { grid-template-columns: 1fr; }
            .question-container { flex-direction: column; align-items: stretch; }
            .question-left-content { max-width: 100%; }
            .question-left-box { padding-bottom: 2.5rem; overflow: hidden; }
            .simple-section-image { width: 180px; right: -15px; bottom: -5px; }
            .project-card { width: 180px; }
            .expertise-grid { grid-template-columns: 1fr; }
            .comfort-container { background-image: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%), url('https://ik.imagekit.io/iwx5svscw/Switches%20&%20Sockets/Engineering.png?updatedAt=1754092596895'); background-size: cover; background-position: center; }
            .comfort-content { max-width: 100%; padding: 1.5rem; }
            .comfort-content h2 { font-size: 2rem; }
            .footer-container { flex-direction: column; }
            .footer-info-bar { flex-direction: column; align-items: center; text-align: center; }
            .footer-bottom-right { align-items: center; }

            .contact-wrapper { flex-direction: column; gap: 2rem; }
            .contact-form-container { width: 100%; }
        }
        @media (max-width: 600px) {
                        .contact-form-container form {
                grid-template-columns: 1fr;             }
            .form-group:nth-of-type(5),
            .submit-btn {
                grid-column: span 1;
            }
        }
        @media (max-width: 480px) {
            .top-bar-left, .top-bar-right { margin: 0; }
            .top-bar-left { margin-bottom: 8px; }
            .top-bar-right a { font-size: 1rem; padding: 0.3rem 0.6rem; }
.hero-section { min-height: 360px; }
            .content-left h1 { font-size: 1.5rem; }
            .content-left p { font-size: 0.95rem; }
            .offer-button,
            .qa-button { font-size: clamp(0.5rem, 2.5vw, 0.75rem); padding: 8px 10px; }
            .offer-button { padding: 16px 18px; min-height: 3.1rem; border-width: 3px; font-size: clamp(0.62rem, 2.8vw, 0.88rem); }
            .project-card { width: 150px; }
            .quality-list { grid-template-columns: 1fr; }
            .simple-section-image { display: none; }
            .question-left-box h2, .question-left-box p { text-align: center; }
        }