/* *{
    box-sizing: border-box;
}
body{
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color:lavender;
} */
/* .header{
    text-align: center;
    pad: 32px;
    background-color: aqua;
    margin-top: 0;
    padding:5px;
    color: orange;
} */
/* ===================================================
   1. BASE STRUCTURE & DROPDOWNS (डेस्कटॉप डिफ़ॉल्ट)
=================================================== */
.footer {
    margin-top: 50px;
    font-size: 15px;
}
.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
    text-align: center;
}
.column {
    flex: 25%;
    max-width: 25%;
}
.column h3 {
    margin-top: 20px;
}
.column ul {
    list-style: none;
}
.row .column li {
    display: grid;
    cursor: pointer;
}
.row .column li i {
    color: blue;
}
.row .column li a {
    color: #666;
    cursor: pointer;
}
.row .column li a:hover {
    color: orange;
    text-decoration: underline;
    padding-left: 1.5rem;
}
.column li {
    position: relative;
    display: inline-block;
}
.dropdown3 {
    display: none;  
    z-index: 999;
    background: #fff;
    border-radius: 5px;
    box-shadow: var(--box-shadow);  
}
.dropdown3 li {
    color: crimson;
    margin: 0;
    padding: 5px 0px;
    border: 1px solid orange;
    cursor: pointer;
}
ul.dropdown2 li:hover .dropdown3 {
    display: block;
    width: 130px;
    position: absolute;
    left: 250px;    
    top: 20px;
}

/* ===================================================
   2. DESKTOP LAYOUT (About Us & Yellow Message Box)
=================================================== */
.contact_info {
    display: flex !important;
    flex-direction: row !important;      /* 🔴 कंप्यूटर और मोबाइल 'Desktop Site' दोनों में हमेशा लेफ्ट-राइट रखेगा */
    flex-wrap: nowrap !important;        
    justify-content: center !important;  
    align-items: flex-start !important;  
    gap: 40px !important;                
    max-width: 1200px !important;
    margin: 50px auto 0 auto !important; 
    padding: 0 4% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.about_me {
    width: 48% !important;               /* बाएं तरफ का हिस्सा (About Us) */
    min-width: 320px !important;
    margin: 0 !important;
    text-align: center;
}
.about_me h2 { font-size: 3.5rem; margin-bottom: 25px; font-weight: 700; }

/* 🟡 प्योर ब्राइट पीला मैसेज बॉक्स स्टाइल */
.msg {
    width: 48% !important;               /* दाएं तरफ का हिस्सा (Message Box) */
    min-width: 320px !important;
    margin: 0 !important;
    padding: 30px !important;
    border: 2px solid #b59300 !important;
    border-radius: 20px !important;
    background-color: #FFFF00 !important; /* 100% प्योर पीला बैकग्राउंड */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* डार्क मोड में भी मैसेज बॉक्स का पीला शेड नियंत्रित रखना */
.dark-mode .msg {
    background-color: #ffe600 !important; 
    border-color: #000000 !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3) !important;
}

/* हेडर और पैराग्राफ टेक्स्ट (साफ़ विजिबिलिटी के लिए) */
.msg h4, .msg .msg-header h4 {
    margin-bottom: 5px !important;
    font-size: 2.4rem !important;
    color: #990000 !important;          /* 🔴 हेडिंग डार्क रेड */
    font-weight: 700 !important;
    text-align: center !important;
}
.msg p, .msg .msg-header p {
    font-size: 1.35rem !important;
    margin-bottom: 15px !important;
    color: #00008B !important;          /* 🔵 पैराग्राफ टेक्स्ट डार्क ब्लू */
    font-weight: 600 !important;
    text-align: center !important;
}

/* इनपुट ग्रुप्स आइकन्स */
.input-group {
    position: relative !important;
    margin-bottom: 18px !important;
}
.input-group i {
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #00008B !important;          /* 🔵 आइकन्स डार्क ब्लू */
    font-size: 1.6rem !important;
    z-index: 2 !important;
}
.input-group.text-group i {
    top: 15px !important;
    transform: none !important;
}

.msg input, 
.msg select, 
.msg textarea,
.input-group input,
.input-group select,
.input-group textarea {
    width: 100% !important;
    padding: 12px 12px 12px 45px !important;
    border: 2px solid #00008B !important; /* 🔵 बॉर्डर्स डार्क ब्लू */
    border-radius: 10px !important;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    background-color: #ffffff !important;
    color: #990000 !important;          /* 🔴 अंदर का इनपुट टेक्स्ट डार्क रेड */
    box-sizing: border-box !important;
}
.msg input::placeholder, 
.msg textarea::placeholder {
    color: #444444 !important;
    font-weight: 500 !important;
}

/* टीम स्लाइडर और बायो टेक्स्ट बेस स्टाइल */
.team-slide {
    position: relative !important;
    width: 100% !important;
    max-width: 400px !important;
    margin: auto !important;
    min-height: 480px !important; 
}
.bio-text {
    font-size: 1.5rem;
    line-height: 1.7;
    margin: 15px 30px;
    padding: 15px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.02);
}
.text-orange { color: #ff7800; border-left: 4px solid #ff7800; }
.text-blue { color: #0066ff; border-left: 4px solid #0066ff; }
.text-green { color: #2e7d32; border-left: 4px solid #2e7d32; }

#submit {
    border: none !important;
    background: linear-gradient(135deg, #009dff, #00f7ff) !important;
    color: white !important;
    width: 100% !important;
    padding: 14px !important;
    font-size: 1.6rem !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    box-shadow: 0 8px 20px rgba(0, 157, 255, 0.25) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
}

/* ===================================================
   3. PURE MOBILE RESPONSIVE LAYOUT (768px से नीचे)
=================================================== */
@media (max-width: 768px) {
    /* मोबाइल व्यू होने पर ही एलिमेंट्स ऊपर-नीचे अलाइन होंगे */
    .contact_info {
        flex-direction: column !important; 
        gap: 40px !important;              
        padding: 0 20px !important;
        margin-top: 30px !important;
    }
    
    .about_me {
        width: 100% !important;
        max-width: 500px !important;
        margin: 0 auto !important;
    }

    /* 🔴 ओवरलैप रोकने के लिए मोबाइल पर स्लाइडर को फ्लेक्स-रिलेटिव स्ट्रक्चर दिया */
    .team-slide {
        position: relative !important;
        width: 100% !important;
        min-height: auto !important; 
        display: flex !important;
        flex-direction: column !important;
    }

    .team-member {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        display: none !important; 
        opacity: 0;
        transform: none !important;
        padding: 2.5rem 1.5rem !important;
    }

    .team-member.active {
        display: block !important; 
        opacity: 1;
    }

    /* मोबाइल व्यू में पीला बॉक्स सुरक्षित रूप से नीचे रहेगा */
    .msg {
        width: 100% !important;
        max-width: 500px !important;
        margin: 10px auto 0 auto !important; 
        position: relative !important;
        clear: both !important;
        z-index: 10 !important;
    }

    /* 🔴 सोशल आइकन्स का ऑटो-रैप (नया आइकॉन जोड़ने पर खुद-ब-खुद नीचे एडजस्ट होगा) */
    .contact-icon {
        display: flex !important;
        justify-content: center !important;
        align-items: flex-end !important;
        gap: 15px 12px !important;       
        width: 100% !important;
        flex-wrap: wrap !important;        
        margin-top: 25px !important;
    }
    .contact-icon > a, .contact-icon .social-item a {
        font-size: 2rem !important;
    }
    .contact-icon .social-item {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        min-width: 35px !important;
    }
}

/* ===================================================
   4. EXTRA MISC RESPONSIVE STYLES
=================================================== */
@media (max-width: 1280px) {
    ul.dropdown2 li:hover .dropdown3 { left: 220px; top: 20px; }
}
@media (max-width: 1024px) {
    ul.dropdown2 li:hover .dropdown3 { left: 80px; top: 40px; }
}
@media (max-width: 800px) {
    .column { flex: 50%; max-width: 50%; }
}
@media (max-width: 600px) {
    .column { flex: 100%; max-width: 100%; }
    ul.dropdown2 li:hover .dropdown3 { left: 330px; top: 35px; }
}
@media (max-width: 480px) {
    ul.dropdown2 li:hover .dropdown3 { left: 280px; top: 20px; }
}
@media (max-width: 380px) {
    .contact-icon { gap: 12px 8px !important; }
    .contact-icon > a, .contact-icon .social-item a { font-size: 1.8rem !important; }
}

/* ===================================================
   FOOTER VERSION & CREDIT CENTER ALIGNMENT FIX
=================================================== */
.footer1 .credit {
    text-align: center !important;        /* 🔴 टेक्स्ट को ज़बरदस्ती बिल्कुल बीच में लाएगा */
    margin-top: 2rem !important;
    padding: 1rem 2.5rem !important;
    font-size: 1.5rem !important;        /* फॉन्ट साइज़ को थोड़ा सेट किया */
    width: 100% !important;              /* पूरी चौड़ाई लेगा ताकि सेंटर सही से हो */
    display: block !important;
}

.footer1 .credit p { 
    color: #666; 
    font-size: 12px !important;          /* वर्शन और लास्ट अपडेट का साइज़ साफ़ किया */
    text-align: center !important;        /* पैराग्राफ को भी सेंटर करेगा */
    margin-bottom: 5px !important;
}

.footer1 .credit span { 
    color: var(--orange); 
}