/* Add to the VERY TOP of index.css */
            
            *{
                margin: 0;
                box-sizing: border-box;
            }
            body{
                margin: 0;
                width: 100%;
                height: 100%;
                padding-top: 63px;
                user-select: none;
                /*background:#f4f6f8;*/
                background-image:linear-gradient(
                rgba(0,0,0,0.5),rgba(0,0,0,0.5)
                ),url('https://ik.imagekit.io/pincode/imagess/cutting-metal-with-plasma-equipment.jpg');
                background-attachment: fixed;
                background-size: cover;
                background-position: center;
            /* Header Flex Layout Fixes */
            header {
                background-color: rgb(46, 45, 45);
                border-bottom: 2px solid black;
                padding: 10px 20px;
                display: flex;
                align-items: center;
                justify-content: space-between; /* Distributes logo to left, menu to right */
                position: fixed;
                left: 0; right: 0; top: 0;
                color: white;
                z-index: 100;
            }

            .header-controls {
                display: flex;
                align-items: center;
                gap: 15px;
            }

            /* Settings Menu Layout */
            .settings-btn {
                background: none; border: none; color: #38bdf8; font-size: 1.5rem; cursor: pointer; transition: transform 0.3s ease;
            }
            .settings-btn:hover { transform: rotate(20deg); }
            .settings-menu {
                position: absolute; top: 70px; right: 20px; background: rgba(15, 23, 42, 0.98);
                border: 1px solid rgba(56, 189, 248, 0.5); border-radius: 12px; padding: 20px;
                width: 200px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); display: none; z-index: 200; text-align: left;
            }
            .settings-menu.active { display: block; }
            .setting-item label { color: white; display: flex; align-items: center; gap: 10px; cursor: pointer; }
            .close-settings { background: #0ea5e9; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; width: 100%; margin-top: 15px; }    text-align: center;
                            font-family:'Poppins',sans-serif;
                        }
            
            .hed-f{
                display: flex;
                flex-direction: row;
                align-items: center;
            }
            header img{
                width: 50px;
                height: 50px;
                border-radius: 25px;
                
            }
            .gg{
                display: inline-block;
                font-size: 24px;
            }
            .menu-btn{
                display:none;
                font-size:26px;
                background:none;
                border:none;
                color:white;
            }

            /* --- Base Navigation Styles --- */
            .nav {
                display: flex;
                align-items: center;
                gap: 15px; /* Adds neat spacing between your links */
                flex-wrap: wrap; /* Prevents harsh cut-offs */
            }

            /* Hide the hamburger button on desktop */
            .menu-btn {
                display: none; 
                background: none;
                border: none;
                color: white;
                font-size: 1.8rem;
                cursor: pointer;
            }

            /* Ensure hamburger is visible in light theme if needed */
            body.light-theme .menu-btn {
                color: #333;
            }

            .nav a{
                color:white;
                text-decoration:none;
                font-size:14px;
            }

            .cta{
                background:#25D366;
                padding:8px 12px;
                border-radius:6px;
            }

            /* HERO */
            .hero{
                text-align:center;
                padding:50px 20px;
                background:white;
            }

            .hero h2{
                font-size:28px;
                margin-bottom:10px;
            }

            .hero p{
                color:#555;
            }

            /* GALLERY */
            .gallery{
                display:grid;
                grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
                gap:15px;
                padding:30px;
                max-width:1100px;
                margin:auto;
            }

            .card{
                background:white;
                border-radius:10px;
                overflow:hidden;
                box-shadow:0 3px 10px rgba(0,0,0,0.1);
            }

            .card img{
                width:100%;
                height:200px;
                object-fit:cover;
            }

            .card .info{
                padding:10px;
                text-align:center;
            }

            .card button{
                margin-top:5px;
                background:#25D366;
                border:none;
                padding:8px 12px;
                color:white;
                border-radius:6px;
                cursor:pointer;
            }

            /* CTA */
            .cta-section{
                color: white;
                text-align:center;
                padding:40px 20px;
            }

            .cta-section a{
                background:#25D366;
                color:white;
                padding:12px 20px;
                border-radius:8px;
                text-decoration:none;
            }
            .cta-section p{
                margin-bottom: 40px;
            }

            /* FOOTER */
            footer{
                background:#111;
                color:white;
                text-align:center;
                padding:20px;
                margin-top:40px;
            }
            .menu-btn{
                display:none;
                font-size:26px;
                background:none;
                border:none;
                color:white;
            }

            .nav{
                display:flex;
                gap:15px;
                align-items:center;
            }

            .nav a{
                color:white;
                text-decoration:none;
                font-size:14px;
            }
            .nav a:hover{
                color: #25D366;
            }

            .cta{
                background:#25D366;
                padding:8px 12px;
                border-radius:6px;
            }

            /* HERO */
            .hero{
                text-align:center;
                padding:50px 20px;
                background:white;
            }

            .hero h2{
                font-size:28px;
                margin-bottom:10px;
            }

            .hero p{
                color:#555;
            }

            /* GALLERY */
            .gallery{
                display:grid;
                grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
                gap:15px;
                padding:30px;
                max-width:1100px;
                margin:auto;
            }

            .card{
                background:white;
                border-radius:10px;
                overflow:hidden;
                box-shadow:0 3px 10px rgba(0,0,0,0.1);
            }

            .card img{
                width:100%;
                height:200px;
                object-fit:cover;
                cursor: pointer;
            }

            .card .info{
                padding:10px;
                text-align:center;
                cursor: pointer;
            }

            .card button{
                margin-top:5px;
                background:#25D366;
                border:none;
                padding:8px 12px;
                color:white;
                border-radius:6px;
                cursor:pointer;
            }

            /* FULLSCREEN IMAGE VIEWER */
            .image-viewer{
                position: fixed;
                inset: 0;
                background: rgba(0,0,0,0.95);
                display: none;
                justify-content: center;
                align-items: center;
                z-index: 9999;
                transition: transform 0.3s ease;
                cursor: zoom-in;
            }

            .image-viewer img{
                max-width: 90%;
                max-height: 90%;
                border-radius: 10px;
            }

            .close-btn{
                position: absolute;
                top: 20px;
                right: 30px;
                color: white;
                font-size: 40px;
                cursor: pointer;
            }

            /* CTA */
            .cta-section{
                text-align:center;
                padding:40px 20px;
            }

            .cta-section a{
                background:#25D366;
                color:white;
                padding:12px 20px;
                border-radius:8px;
                text-decoration:none;
            }

            /* FOOTER */
            footer{
                background-color: rgb(46, 45, 45);
                color:white;
                text-align:center;
                padding:20px;
                margin-top:40px;
            }

           @media (max-width: 850px) {
                .gg { font-size: 20px; }
                .nav {
                    display: none;
                    position: absolute;
                    top: 70px;
                    left: 0;
                    right: 0;
                    background-color: rgb(46, 45, 45);
                    flex-direction: column;
                    width: 100%;
                    padding: 20px;
                    text-align: center;
                    border-bottom: 2px solid #25D366;
                }
                .nav.show { display: flex; }
                .menu-btn { display: block; margin-right: 10px; }
                
                body.light-theme .nav {
                    background-color: #ffffff;
                    border-bottom: 2px solid #e67e22;
                }
            }
            
            @media (min-width: 800px) and (max-width: 999px) {
                .dd{
                    display: grid;
                    grid-template-columns: 1fr 1fr 1fr;
                    column-gap: 10px;
                    row-gap: 12px;
                    margin-top: 10px;
                }

            }

            @media (min-width: 999px) {
                .dd{
                    display: grid;
                    grid-template-columns: 1fr 1fr 1fr 1fr;
                    column-gap: 10px;
                    row-gap: 12px;
                    margin-top: 10px;
                }

            }
            /* --- LIGHT THEME OVERRIDES FOR INDEX --- */
            body.light-theme {
                background-color: #f4f6f9 !important;
                color: #1a1a1a !important;
            }

            body.light-theme header {
                background-color: #ffffff !important;
                border-bottom: 1px solid #dddddd;
            }

            body.light-theme .gg{
                color: #333333 !important;
            }
            body.light-theme .menu-btn{
                color: #333333 !important;
            }
            body.light-theme .nav a:hover {
                color: #ff9900 !important;
            }
            body.light-theme .nav a{
                color: #333333 !important;
            }

            body.light-theme .welcome-div, 
            body.light-theme .info-div, 
            body.light-theme .button-section, 
            body.light-theme .about-us-div, 
            body.light-theme .motto-div, 
            body.light-theme .need-div {
                background-color: #ffffff !important;
                color: #222222 !important;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
            }

            body.light-theme .p1, 
            body.light-theme .welcome-text {
                color: #555555 !important;
            }

            body.light-theme h2, 
            body.light-theme .welcome-header-text {
                color: #e67e22 !important; /* Rich contrast accent for readability in light mode */
            }

            body.light-theme footer {
                background-color: #eaeaea !important;
                color: #666666 !important;
            }

            body.light-theme .settings-menu {
                background-color: #ffffff !important;
                color: #1a1a1a !important;
                border: 1px solid #cccccc !important;
            }
            /* =========================
            PROFESSIONAL UI UPGRADE
            ========================= */

            /* Smooth scrolling */
            html{
                scroll-behavior:smooth;
            }

            /* Global transitions */
            *{
                transition:
                    background-color .35s ease,
                    color .35s ease,
                    border-color .35s ease,
                    transform .35s ease,
                    box-shadow .35s ease;
            }

            /* Glass effect cards */
            .info-div,
            .button-section,
            .about-us-div,
            .motto-div,
            .need-div{
                margin:20px auto;
                max-width:1200px;
                border-radius:20px;
                backdrop-filter:blur(10px);
                border:1px solid rgba(255,255,255,0.08);
                box-shadow:0 8px 30px rgba(0,0,0,0.25);
            }

            /* Card hover lift */
            .info-div:hover,
            .button-section:hover,
            .about-us-div:hover,
            .motto-div:hover,
            .need-div:hover{
                transform:translateY(-6px);
                box-shadow:0 15px 40px rgba(0,0,0,0.35);
            }

            /* Hero section enhancement */
            .welcome-div{
                position:relative;
                overflow:hidden;
            }

            .welcome-div::before{
                content:"";
                position:absolute;
                inset:0;
                background:linear-gradient(
                    135deg,
                    rgba(0,0,0,.55),
                    rgba(0,0,0,.2)
                );
            }

            .welcome-header-text,
            .welcome-text{
                position:relative;
                z-index:2;
            }

            /* Heading animation */
            section h2{
                position:relative;
                overflow:hidden;
            }

            section h2::after{
                content:"";
                position:absolute;
                bottom:0;
                left:-100%;
                width:100%;
                height:3px;
                background:#25D366;
            }

            section h2:hover::after{
                left:0;
                transition:left .6s ease;
            }

            /* Navigation polish */
            .nav a{
                position:relative;
                padding:5px 0;
            }

            .nav a::after{
                content:"";
                position:absolute;
                left:0;
                bottom:-4px;
                width:0%;
                height:2px;
                background:#25D366;
                transition:width .3s ease;
            }

            .nav a:hover::after{
                width:100%;
            }

            /* Logo animation */
            header img{
                transition:transform .5s ease;
            }

            header img:hover{
                transform:rotate(360deg) scale(1.08);
            }

            /* WhatsApp button */
            .cta{
                transition:all .3s ease;
            }

            .cta:hover{
                transform:translateY(-3px);
                box-shadow:0 8px 20px rgba(37,211,102,.4);
            }

            /* Slideshow */
            .slide-item img{
                transition:transform .8s ease;
            }

            .slide-item:hover img{
                transform:scale(1.05);
            }

            /* Contact icons */
            .contacts img{
                transition:all .3s ease;
            }

            .contacts a:hover img{
                transform:translateY(-6px) scale(1.15);
            }

            /* Footer */
            footer{
                position:relative;
                overflow:hidden;
            }

            footer::before{
                content:"";
                position:absolute;
                top:0;
                left:-100%;
                width:100%;
                height:2px;
                background:#25D366;
            }

            footer:hover::before{
                left:100%;
                transition:1.2s ease;
            }

            /* Fade-in sections */
            .info-div,
            .button-section,
            .about-us-div,
            .motto-div,
            .need-div{
                animation:fadeUp 1s ease;
            }

            @keyframes fadeUp{
                from{
                    opacity:0;
                    transform:translateY(40px);
                }
                to{
                    opacity:1;
                    transform:translateY(0);
                }
            }
            /* --- Mobile & Tablet Layout --- */
            @media (max-width: 1100px) {
                .gg { 
                    font-size: 18px; /* Slightly smaller logo text to save space */
                }
                
                .menu-btn { 
                    display: block; /* Show the hamburger button */
                    margin-right: 10px; 
                }
                
                .nav {
                    display: none; /* Hide the horizontal links */
                    position: absolute;
                    top: 70px; /* Pushes the menu down below the header */
                    left: 0;
                    right: 0;
                    background-color: rgb(46, 45, 45);
                    flex-direction: column;
                    width: 100%;
                    padding: 20px 0;
                    text-align: center;
                    border-bottom: 2px solid #25D366;
                }
                
                .nav a {
                    padding: 12px 0;
                    width: 100%;
                    display: block;
                }

                .nav.show { 
                    display: flex; /* Shows the vertical menu when toggled */
                }
                
                body.light-theme .nav {
                    background-color: #ffffff;
                    border-bottom: 2px solid #e67e22;
                }
            }