.elementor-kit-6{--e-global-color-primary:#FFFFFF;--e-global-color-secondary:#94A3B8;--e-global-color-text:#E2E8F0;--e-global-color-accent:#F97316;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}body[data-elementor-device-mode="widescreen"] .hfe-scroll-to-top-wrap,
						body[data-elementor-device-mode="widescreen"] .hfe-scroll-to-top-wrap.edit-mode,
						body[data-elementor-device-mode="widescreen"] .hfe-scroll-to-top-wrap.single-page-off{visibility:visible;opacity:1;}body[data-elementor-device-mode="desktop"] .hfe-scroll-to-top-wrap,
						body[data-elementor-device-mode="desktop"] .hfe-scroll-to-top-wrap.edit-mode,
						body[data-elementor-device-mode="desktop"] .hfe-scroll-to-top-wrap.single-page-off{visibility:visible;opacity:1;}body[data-elementor-device-mode="laptop"] .hfe-scroll-to-top-wrap,
						body[data-elementor-device-mode="laptop"] .hfe-scroll-to-top-wrap.edit-mode,
						body[data-elementor-device-mode="laptop"] .hfe-scroll-to-top-wrap.single-page-off{visibility:visible;opacity:1;}body[data-elementor-device-mode="tablet_extra"] .hfe-scroll-to-top-wrap,
						body[data-elementor-device-mode="tablet_extra"] .hfe-scroll-to-top-wrap.edit-mode,
						body[data-elementor-device-mode="tablet_extra"] .hfe-scroll-to-top-wrap.single-page-off{visibility:visible;opacity:1;}body[data-elementor-device-mode="tablet"] .hfe-scroll-to-top-wrap,
						body[data-elementor-device-mode="tablet"] .hfe-scroll-to-top-wrap.edit-mode,
						body[data-elementor-device-mode="tablet"] .hfe-scroll-to-top-wrap.single-page-off{visibility:visible;opacity:1;}body[data-elementor-device-mode="mobile_extra"] .hfe-scroll-to-top-wrap,
						body[data-elementor-device-mode="mobile_extra"] .hfe-scroll-to-top-wrap.edit-mode,
						body[data-elementor-device-mode="mobile_extra"] .hfe-scroll-to-top-wrap.single-page-off{visibility:visible;opacity:1;}body[data-elementor-device-mode="mobile"] .hfe-scroll-to-top-wrap,
						body[data-elementor-device-mode="mobile"] .hfe-scroll-to-top-wrap.edit-mode,
						body[data-elementor-device-mode="mobile"] .hfe-scroll-to-top-wrap.single-page-off{visibility:visible;opacity:1;}.hfe-reading-progress-bar{background-color:#0055FD;height:4px;}.hfe-reading-progress{top:3px;}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}body[data-elementor-device-mode="widescreen"] .hfe-scroll-to-top-wrap,
						body[data-elementor-device-mode="widescreen"] .hfe-scroll-to-top-wrap.edit-mode,
						body[data-elementor-device-mode="widescreen"] .hfe-scroll-to-top-wrap.single-page-off{visibility:visible;opacity:1;}body[data-elementor-device-mode="desktop"] .hfe-scroll-to-top-wrap,
						body[data-elementor-device-mode="desktop"] .hfe-scroll-to-top-wrap.edit-mode,
						body[data-elementor-device-mode="desktop"] .hfe-scroll-to-top-wrap.single-page-off{visibility:visible;opacity:1;}body[data-elementor-device-mode="laptop"] .hfe-scroll-to-top-wrap,
						body[data-elementor-device-mode="laptop"] .hfe-scroll-to-top-wrap.edit-mode,
						body[data-elementor-device-mode="laptop"] .hfe-scroll-to-top-wrap.single-page-off{visibility:visible;opacity:1;}body[data-elementor-device-mode="tablet_extra"] .hfe-scroll-to-top-wrap,
						body[data-elementor-device-mode="tablet_extra"] .hfe-scroll-to-top-wrap.edit-mode,
						body[data-elementor-device-mode="tablet_extra"] .hfe-scroll-to-top-wrap.single-page-off{visibility:visible;opacity:1;}body[data-elementor-device-mode="tablet"] .hfe-scroll-to-top-wrap,
						body[data-elementor-device-mode="tablet"] .hfe-scroll-to-top-wrap.edit-mode,
						body[data-elementor-device-mode="tablet"] .hfe-scroll-to-top-wrap.single-page-off{visibility:visible;opacity:1;}body[data-elementor-device-mode="mobile_extra"] .hfe-scroll-to-top-wrap,
						body[data-elementor-device-mode="mobile_extra"] .hfe-scroll-to-top-wrap.edit-mode,
						body[data-elementor-device-mode="mobile_extra"] .hfe-scroll-to-top-wrap.single-page-off{visibility:visible;opacity:1;}body[data-elementor-device-mode="mobile"] .hfe-scroll-to-top-wrap,
						body[data-elementor-device-mode="mobile"] .hfe-scroll-to-top-wrap.edit-mode,
						body[data-elementor-device-mode="mobile"] .hfe-scroll-to-top-wrap.single-page-off{visibility:visible;opacity:1;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}body[data-elementor-device-mode="widescreen"] .hfe-scroll-to-top-wrap,
						body[data-elementor-device-mode="widescreen"] .hfe-scroll-to-top-wrap.edit-mode,
						body[data-elementor-device-mode="widescreen"] .hfe-scroll-to-top-wrap.single-page-off{visibility:visible;opacity:1;}body[data-elementor-device-mode="desktop"] .hfe-scroll-to-top-wrap,
						body[data-elementor-device-mode="desktop"] .hfe-scroll-to-top-wrap.edit-mode,
						body[data-elementor-device-mode="desktop"] .hfe-scroll-to-top-wrap.single-page-off{visibility:visible;opacity:1;}body[data-elementor-device-mode="laptop"] .hfe-scroll-to-top-wrap,
						body[data-elementor-device-mode="laptop"] .hfe-scroll-to-top-wrap.edit-mode,
						body[data-elementor-device-mode="laptop"] .hfe-scroll-to-top-wrap.single-page-off{visibility:visible;opacity:1;}body[data-elementor-device-mode="tablet_extra"] .hfe-scroll-to-top-wrap,
						body[data-elementor-device-mode="tablet_extra"] .hfe-scroll-to-top-wrap.edit-mode,
						body[data-elementor-device-mode="tablet_extra"] .hfe-scroll-to-top-wrap.single-page-off{visibility:visible;opacity:1;}body[data-elementor-device-mode="tablet"] .hfe-scroll-to-top-wrap,
						body[data-elementor-device-mode="tablet"] .hfe-scroll-to-top-wrap.edit-mode,
						body[data-elementor-device-mode="tablet"] .hfe-scroll-to-top-wrap.single-page-off{visibility:visible;opacity:1;}body[data-elementor-device-mode="mobile_extra"] .hfe-scroll-to-top-wrap,
						body[data-elementor-device-mode="mobile_extra"] .hfe-scroll-to-top-wrap.edit-mode,
						body[data-elementor-device-mode="mobile_extra"] .hfe-scroll-to-top-wrap.single-page-off{visibility:visible;opacity:1;}body[data-elementor-device-mode="mobile"] .hfe-scroll-to-top-wrap,
						body[data-elementor-device-mode="mobile"] .hfe-scroll-to-top-wrap.edit-mode,
						body[data-elementor-device-mode="mobile"] .hfe-scroll-to-top-wrap.single-page-off{visibility:visible;opacity:1;}}/* Start custom CSS */<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Universal Responsive Code</title>
    
    <style>
        /* =======================================
           1. UNIVERSAL RESET (गड़बड़ी रोकने के लिए)
           ======================================= */
        *, *::before, *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box; /* कोई भी चीज़ स्क्रीन से बाहर नहीं जाएगी */
        }

        body {
            width: 100%;
            overflow-x: hidden; /* दाएँ-बाएँ हिलना (Horizontal Scroll) बंद */
            font-family: 'Inter', sans-serif;
            background-color: #0a0a0a;
            color: #ffffff;
            padding: 40px 20px;
        }

        /* इमेजेज और वीडियो कभी स्क्रीन से बाहर नहीं जाएंगे */
        img, video, iframe {
            max-width: 100%;
            height: auto;
            display: block;
        }

        /* =======================================
           2. MAIN CONTAINER (बीच में रखने के लिए)
           ======================================= */
        .master-container {
            width: 100%;
            max-width: 1200px; /* PC पर मैक्सिमम चौड़ाई */
            margin: 0 auto;    /* सेंटर एलाइनमेंट */
        }

        h2 { text-align: center; margin-bottom: 30px; font-size: 28px; }

        /* =======================================
           3. THE RESPONSIVE MAGIC (Grid System)
           ======================================= */
        .responsive-grid {
            display: grid;
            gap: 24px;
            /* मोबाइल के लिए डिफ़ॉल्ट: 1 कॉलम (100% चौड़ाई) */
            grid-template-columns: 1fr; 
        }

        .box {
            background: #1a1a1a;
            border: 1px solid #333;
            padding: 40px 20px;
            border-radius: 16px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            transition: transform 0.3s ease;
        }
        .box:hover { transform: translateY(-5px); background: #222; }

        /* =======================================
           4. MEDIA QUERIES (डिवाइस के हिसाब से बदलाव)
           ======================================= */
        
        /* TABLET: 768px या उससे बड़ी स्क्रीन पर 2 कॉलम */
        @media (min-width: 768px) {
            .responsive-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* PC / LAPTOP: 1024px या उससे बड़ी स्क्रीन पर 3 कॉलम */
        @media (min-width: 1024px) {
            .responsive-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
    </style>
</head>
<body>

    <div class="master-container">
        <h2>Responsive Design Master Code</h2>
        
        <div class="responsive-grid">
            <div class="box">Box 1</div>
            <div class="box">Box 2</div>
            <div class="box">Box 3</div>
            <div class="box">Box 4</div>
            <div class="box">Box 5</div>
            <div class="box">Box 6</div>
        </div>
    </div>

</body>
</html>/* End custom CSS */