body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #0d0d0d;
            color: #f0f0f0;
            line-height: 1.6;
            position: relative;
            overflow-x: hidden; /* Horizontal scrollbar hatane ke liye */
        }

        /* Magical Corner Glow */
        .corner-glow {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -1; /* Baaki content ke peeche rakhne ke liye */
            pointer-events: none; /* Clicking se rokne ke liye */
        }

        .corner-glow::before {
            content: '';
            position: absolute;
            top: -200px; /* Thoda upar le jaane ke liye */
            left: -200px; /* Thoda left mein le jaane ke liye */
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(0, 150, 255, 0.4), transparent 70%);
        }

        .corner-glow::after {
            content: '';
            position: absolute;
            bottom: -200px; /* Thoda neeche le jaane ke liye */
            right: -200px; /* Thoda right mein le jaane ke liye */
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(0, 150, 255, 0.4), transparent 70%);
        }

        /* Utility Classes */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Header & Navigation */
        header {
            background: rgba(0, 0, 0, 0.7);
            padding: 1rem 0;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 100;
        }
         .main-content{
            padding-top: 80px;
         }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #b9196e;
        }

        /* Logo Par Shandaar Effect */
.logo {
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    animation: pulse 2s infinite; /* Slow pulse effect */
}

.logo:hover {
    color: #ff9900;
    text-shadow: 0 0 15px rgba(255, 153, 0, 0.8);
    transform: scale(1.05);
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}
        /* Navigation Links ka final style */
.nav-links li a{
    position: relative;
    z-index: 1;
    transition:color 0.3 ease;
    overflow: hidden;
}

/* Jab cursor link par ho */
.nav-links li a:hover {
    color: #ff9900; /* Hover color */
}

.nav-links li a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 153, 0, 0.8), rgba(255, 153, 0, 0) 70%); /* Colorful glow effect */
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
    z-index: -1;
}

.nav-links li a:hover::before {
    width: 200px;
    height: 200px;
    opacity: 1;
}

.nav-links li a:hover {
    color: #fff; /* Glow ke upar text white dikhe */
}

        /* Hero Section */
        .hero {
            background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6));
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding-top: 60px; /* Header height ke liye */
        }

        .hero h1 {
    font-size: 3.5rem;
    margin: 0;
    color: transparent;
    background: linear-gradient(90deg, #00A9FF, #592693); /* Naya aur final gradient */
    -webkit-background-clip: text;
    background-clip: text;
    animation: gradient-animation 4s infinite alternate;
}

        .hero p {
            font-size: 1.2rem;
            max-width: 600px;
        }

        .cta-button {
            background-color: #ff9900;
            color: #111;
            padding: 12px 30px;
            text-decoration: none;
            border-radius: 50px;
            font-weight: bold;
            margin-top: 20px;
            transition: transform 0.3s ease;
        }

        .cta-button:hover {
            transform: scale(1.05);
        }

        /* About Section */
        .about-section, .products-section, .contact-section {
            padding: 80px 0;
            text-align: center;
        }

        h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }

        .about-section p {
            max-width: 800px;
            margin: 0 auto;
        }

        /* Product Section */
        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
            margin-top: 40px;
        }
        /* Update these styles for a more premium look */
.features-section {
    padding: 80px 0;
    text-align: center;
    background-color: #1a1a1a;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.feature-item {
    background: #2a2a2a;
    padding: 30px; /* थोड़ा स्पेस बढ़ाएं */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    font-size: 1.1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
    border: 1px solid transparent; /* Transparent border for hover effect */
}

.feature-item:hover {
    transform: translateY(-10px); /* कार्ड को ऊपर उठाएं */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    border: 1px solid gold; /* Hover करने पर गोल्डन बॉर्डर */
}

/* For icon styling */
.feature-item i {
    font-size: 2.5rem;
    color: gold;
    margin-bottom: 15px;
}

.feature-item p {
    margin: 0;
    color: #f0f0f0;
}
        /* Testimonials Section */
.testimonials-section {
    padding: 80px 0;
    text-align: center;
    background-color: #1a1a1a;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 40px;
}

.testimonial-card {
    background: #0d0d0d;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.testimonial-card p {
    font-style: italic;
    color: #ccc;
}

.testimonial-card p strong {
    display: block;
    margin-top: 10px;
    font-size: 1.1rem;
    color: #ff9900;
}
  /* Videos Section Styles */
.videos-section {
    padding-top: 120px;
    padding-bottom: 80px;
    text-align: center;
    background-color: #0d0d0d;
    min-height: calc(100vh - 100px); /* Minimum height ensure karega ki section empty na dikhe */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.videos-section .container {
    max-width: 900px; /* Video player ki maximum width */
    width: 100%;
}

.video-grid {
    display: flex; /* Flexbox use karenge */
    justify-content: center; /* Video ko center mein laane ke liye */
    align-items: center;
    margin-top: 40px;
    width: 100%;
}

.video-item {
    width: 100%; /* Video item ko poori width do */
    max-width: 800px; /* Maximum width set kar sakte hain */
    background: #2a2a2a; /* Agar video load na ho to background dikhe */
    border-radius: 10px;
    overflow: hidden; /* Edges cut na ho */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.video-item iframe {
    width: 100%;
    aspect-ratio: 16 / 9; /* Video ka standard ratio (width / height) */
    display: block; /* Extra space remove karega iframe ke niche */
    border-radius: 10px; /* Optional: iframe ke liye bhi border-radius */
}

        /* Product Cards Par 3D Effect aur Glow */
.product-card {
    background: #1a1a1a;
    padding: 25px;
    border-radius: 10px;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    text-align: left;
    position: relative;
    z-index: 1;
}

.product-card:hover {
    transform: translateY(-10px); /* Card ko thoda upar uthayein */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 153, 0, 0.7); /* Glow aur shadow */
}

        /* Contact Section */
        .contact-section {
            background-color: #1a1a1a;
        }

        .contact-info {
            font-size: 1.1rem;
            line-height: 1.8;
            margin-top: 20px;
        }

        .contact-info a {
            color: #ff9900;
            text-decoration: none;
        }

        /* Footer */
        footer {
            background-color: #000;
            text-align: center;
            padding: 20px 0;
            color: #aaa;
        }
        /* Animation ke liye basic state */
.animate {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Jab 'visible' class add ho to yeh style apply hoga */
.animate.visible {
    opacity: 1;
    transform: translateY(0);
}
nav ul {
                list-style: none;
                display: flex;
                gap: 20px;
                margin: 0;
                padding: 0;
            

    

}
            nav ul li {
                list-style: none;
                text-decoration: none;
            }
        /* Responsive Design */
        @media (max-width: 768px) {
        
    

            .hero h1 {
                font-size: 2.5rem;
            }
            .hero p {
                font-size: 1rem;
            }
            
            nav ul a {
                display: block;
                padding: 10px 0;
            }
            

            /* Order Form Section Styles */
.order-form-section {
     margin-top: 100px;
    padding: 80px;
    color: #f0f0f0;
    background-color: #0d0d0d;
}

.order-form-section .container {
    max-width: 700px;
}

.order-form-section h2 {
    text-align: center;
    color: #ff9900;
    margin-bottom: 40px;
}

#order-form {
    background: #1a1a1a;
    padding: 40px;
    border-radius: 10px;
    border: 1px solid #ff9900;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #f0f0f0;
}

.form-group input, .form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #555;
    background-color: #2a2a2a;
    color: #f0f0f0;
    border-radius: 5px;
    box-sizing: border-box;
}

.price-display {
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    margin-top: 20px;
}

.submit-btn {
    width: 100%;
    padding: 15px;
    background-color: #ff9900;
    color: #111;
    font-size: 1.1rem;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.submit-btn:hover {
    background-color: #e68a00;
}
/* Quote Form Section Styles */
.quote-form-section {
    padding-top: 80px;
    padding-bottom: 80px;
    color: #f0f0f0;
    background-color: #0d0d0d;
}

.quote-form-section .container {
    max-width: 700px;
    margin: 0 auto;
}

.quote-form-section h2 {
    text-align: center;
    color: #ff9900;
    margin-bottom: 40px;
}


           
        }