/* --- FIXED LAYOUT STYLES --- */
        body {
            background-color: #f1f5f9;
            overflow-x: hidden;
        }

        .main-wrapper {
            display: flex;
            min-height: 100vh;
        }

        /* 🔥 CONTENT AREA FIX (FINAL LOGIC) 🔥 */
        .content-area {
            flex: 1;
            /* Default Desktop: Margin rakho kyunki Sidebar visible hai */
            margin-left: 260px; 
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px;
            transition: margin-left 0.3s ease;
            box-sizing: border-box;
            width: 100%;
        }

        /* --- CARD DESIGN --- */
        .compact-card {
            background: white;
            width: 100%;
            max-width: 900px;
            border-radius: 20px;
            box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1);
            overflow: hidden;
            display: flex;
            flex-direction: row; /* Default: Side by Side */
            border: 1px solid #e2e8f0;
            margin-bottom: 30px;
        }

        /* LEFT SIDE (Profile) */
        .card-left {
            background: linear-gradient(135deg, #262C81 0%, #6c5ce7 100%);
            color: white;
            padding: 50px 30px;
            text-align: center;
            flex: 0 0 320px; /* Fixed width */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .avatar-compact {
            width: 130px;
            height: 130px;
            border-radius: 50%;
            border: 5px solid rgba(255,255,255,0.2);
            background-image: url('../assets/img/developer.jpg');
            background-size: cover;
            background-position: center;
            background-color: #fff;
            color: #262C81;
            display: flex; align-items: center; justify-content: center;
            font-size: 40px; font-weight: 700;
            margin-bottom: 20px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }

        .left-name { font-size: 26px; font-weight: 700; margin: 0; letter-spacing: -0.5px; }
        .left-role { font-size: 14px; opacity: 0.85; margin-top: 5px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; }

        /* Social Icons */
        .social-row {
            margin-top: 30px;
            display: flex; gap: 15px; justify-content: center;
        }
        .social-btn {
            width: 42px; height: 42px; border-radius: 50%;
            background: white; display: flex; align-items: center; justify-content: center;
            font-size: 20px; text-decoration: none; transition: 0.2s;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        
        .fb-btn { color: #1877F2; }
        .wa-btn { color: #25D366; }
        .email-btn { color: #EA4335; }

        .social-btn:hover { transform: translateY(-3px) scale(1.1); box-shadow: 0 8px 15px rgba(0,0,0,0.2); }

        /* RIGHT SIDE */
        .card-right {
            padding: 50px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .about-heading {
            font-size: 18px; font-weight: 700; color: #1e293b; margin-bottom: 15px;
            display: flex; align-items: center; gap: 10px; border-bottom: 2px solid #f1f5f9; padding-bottom: 10px;
            width: fit-content;
        }
        .bio-text-c { color: #475569; line-height: 1.7; font-size: 16px; margin-bottom: 30px; }

        .vision-list-c { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }
        .v-item-c { display: flex; align-items: center; gap: 12px; font-size: 15px; color: #334155; }
        .v-icon-c { color: #6c5ce7; background: #f0f3ff; padding: 6px; border-radius: 6px; }

        .btn-contact-c {
            background: #262C81; color: white; padding: 12px 30px;
            border-radius: 8px; text-decoration: none; font-weight: 600;
            align-self: flex-start; transition: 0.2s; font-size: 15px;
            box-shadow: 0 4px 10px rgba(38, 44, 129, 0.2);
        }
        .btn-contact-c:hover { background: #1e236b; transform: translateY(-2px); }

        .footer-note {
            text-align: center; font-size: 13px; color: #94a3b8; font-weight: 500; width: 100%;
        }

        /* -----------------------------------------------------------
           🔥 YE HAIN FINAL RESPONSIVE RULES - ISKO GHOR SE DEKHO 🔥
           ----------------------------------------------------------- */
        
        /* 1. TABLET & MOBILE (< 992px)
           Jaise hi screen 992px se choti hogi:
           - Sidebar gayab ho jata hai (Admin CSS logic).
           - Toh hum Margin bhi 0 kar denge. (NO BLANK SPACE)
           - Card ko Upar-Neeche (Column) kar denge taake fit ho.
        */
        @media (max-width: 992px) {
            .content-area {
                margin-left: 0 !important; /* 🔥 Yeh line "Blank Space" khatam karegi */
                padding: 20px;
            }
            .compact-card {
                flex-direction: column; /* Card Stack ho jayega */
            }
            .card-left {
                width: 100%; padding: 40px; box-sizing: border-box; flex: none;
            }
            .btn-contact-c { width: 100%; text-align: center; }
        }