/* =================================
होम पेज (समस्त) बैकग्राउंड और फॉन्ट स्टाइलिंग - प्रारंभ 🔽 🔽
================================= */

body {
    font-family: 'Karma', serif;         /* फॉन्ट परिवार सेट करता है */
    background-color: #bce5cf;           /* पेज का बैकग्राउंड रंग */
    color: #000193;                      /* टेक्स्ट का रंग */
    margin: 0;                           /* बॉडी के बाहर कोई मार्जिन नहीं */
    padding: 0;                          /* बॉडी के अंदर कोई पैडिंग नहीं */
    line-height: 1.6;                    /* टेक्स्ट की लाइन की ऊँचाई */
}

/* होमपेज बैकग्राउंड – Hindi Background Poster */
body::before {
    content: "";                         /* खाली कंटेंट जो बैकग्राउंड इमेज के लिए जरूरी है */
       background-image: url(images/poster_myhindi.jpg);
    background-size: cover;              /* इमेज पूरे क्षेत्र को कवर करे */
    background-repeat: no-repeat;        /* इमेज दोहराई न जाए */
    background-position: center;         /* इमेज केंद्रित हो */
    background-attachment: fixed;        /* स्क्रॉल पर बैकग्राउंड स्थिर रहे */
    opacity: 0.5;                        /* पारदर्शिता (थोड़ा हल्का) */
    position: absolute;                  /* पेज पर बिल्कुल टॉप-लेफ्ट से पोजिशन */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;                         /* सभी कंटेंट के पीछे रखा गया */
}

/* 📌 पेज के सबसे नीचे कुछ जगह छोड़ना ताकि अंतिम कंटेंट फूटर में दबे नहीं */
body {
    padding-bottom: 120px; 
    /* होम पेज के बैकग्राउंड में सबसे नीचे के ऑप्शंस को ऊपर तक लाने के लिए अर्थात नीचे के फुटर से उपर या नीचे करने हेतु ऊंचाई सेट करने के लिए आवश्यकतानुसार मान 120px को यदि 100px,  200px जितनी चाहे कर सकते हैं।ते हैं */
}

/* ░░ नीचे वाले स्क्रोल बार की स्क्रोल लाइन - केवल CSS के माध्यम से ░░ */
.bottom-scroll-wrapper {
    position: relative;
    overflow-x: auto;
    scroll-behavior: smooth;
}

/* स्क्रॉलिंग लाइन प्रभाव के लिए ::after */
.bottom-scroll-wrapper::after {
    content: "";
    position: absolute;
    top: 0; /* ऊपर की ओर लाइन दिखेगी */
    left: 0;
    width: 100%;
    height: 3px; /* पतली लाइन */
    background: linear-gradient(to right, #00c2ff, #004cff); /* आकर्षक रंग */
    opacity: 0.4;  /* हल्का प्रभाव */
    pointer-events: none;
}

/* 🌟 अतिरिक्त सौंदर्य प्रभाव - केवल सजावटी परिवर्तन, कोई डिज़ाइन नहीं बदला 🔽 */

/* 1. टेक्स्ट को थोड़ा उभारने के लिए हल्का शैडो */
body {
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1);
}

/* 2. स्क्रॉलिंग को स्मूद करने के लिए */
html {
    scroll-behavior: smooth;
}

/* 3. स्क्रॉलबार स्टाइलिंग - केवल वेबकिट आधारित ब्राउज़र में */
::-webkit-scrollbar {
    width: 4.6px;
}
::-webkit-scrollbar-track {
    background: #ffffff;
}
::-webkit-scrollbar-thumb {
    background: #9611ff;
    border-radius: 5px;
}

/* 4. मोबाइल व्यू में फॉन्ट थोड़ा छोटा */
@media (max-width: 600px) {
    body {
        font-size: 15px;
    }
}

/* 🌟 अतिरिक्त सौंदर्य प्रभाव - समाप्त 🔼 */
/* =================================
होम पेज (समस्त) बैकग्राउंड और फॉन्ट स्टाइलिंग - समाप्त 🔼 🔼
================================= */

/* =================================
हेडर सेक्शन के लिए स्टाइलिंग - प्रारंभ 🔽 🔽
(ग्रेडिएंट, एनीमेशन, फिक्स्ड हेडर, बॉर्डर, शैडो आदि सहित)
================================= */

header {
  /* एनीमेटेड ग्रेडिएंट बैकग्राउंड */
  background: linear-gradient(142deg, #a600ff, #007dff, #3726ff, #7000ff);
  background-size: 600% 600%;
  animation: gradientFlow 12s ease infinite;

  /* हेडर लेआउट */
  display: flex;
  justify-content: space-between;
  align-items: center;

  /* निश्चित ऊंचाई */
  height: 50px;

  /* पैडिंग और बॉर्डर ऊँचाई में शामिल हो */
  box-sizing: border-box;

  /* हेडर को टॉप पर चिपकाए रखें */
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;

  /* हल्का बॉर्डर और साया */
  border-bottom: 4px solid #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

  /* टेक्स्ट रंग */
  color: #f7ffb6;

  /* नीचे गोल कोने */
  border-radius: 0 0 10px 10px;

  /* सामान्य पैडिंग */
  padding: 12px 20px;

  /* सुचारु ट्रांजिशन */
  transition: transform 0.3s ease;
}

/* माउस ले जाने पर हल्का ज़ूम प्रभाव (सिर्फ डेस्कटॉप) */
@media (min-width: 768px) {
  header:hover {
    transform: scale(1.01);
  }
}

/* मोबाइल के लिए पैडिंग कम करें */
@media (max-width: 600px) {
  header {
    padding: 10px 12px;
    height: auto;
  }
}

/* एनीमेटेड बैकग्राउंड के लिए की-फ्रेम्स */
@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* मोबाइल व्यू (600px से कम) के लिए विशेष शैली (थोड़ी ऊँचाई और padding कम कर दी जाती है) */
@media (max-width: 600px) {
  header {
    height: 120px; 
    /* हाइट को का मान कम या ज्यादा करके हेडर के बैकग्राउंड की ऊंचाई को कम या ज्यादा किया जा सकता है। जैसे 150px करेंगे तो चौड़ाई बढ़ जाएगी। 90px करेंगे तो चौड़ाई कम हो जाएगी।हो */
  }
}
/* =================================
हेडर सेक्शन के लिए स्टाइलिंग - समाप्त 🔼 🔼
================================= */

/* =================================
थ्री लाइन मेनू बटन स्टाइलिंग - प्रारंभ 🔽 🔽
(हेडर के ऊपर बाईं ओर रंगीन ग्रेडिएंट बॉक्स)
================================= */

.menu-toggle {
  cursor: pointer; /* माउस ले जाने पर क्लिक वाला हाथ दिखे */
  position: absolute; /* हेडर के अंदर सही पोजिशन देने के लिए */
  top: 30px;         /* हेडर के टॉप से दूरी (अंतिम सेटिंग) */
  left: 16px;        /* बाईं ओर से दूरी (अंतिम सेटिंग) */
  width: 19px;       /* बटन की चौड़ाई (अंतिम सेटिंग) */
  height: 19px;      /* बटन की ऊँचाई (अंतिम सेटिंग) */
  display: flex;     /* अंदर की तीन लाइनें एक के नीचे एक */
  flex-direction: column;        /* कॉलम में व्यवस्थित करें */
  justify-content: space-around; /* लाइन के बीच समान दूरी */
  align-items: center;           /* बीच में केंद्रित रखें */
  
  background: linear-gradient(135deg, #00c6ff, #0072ff); /* नीले रंग का ग्रेडिएंट */
  border: 2px solid #ffffff;     /* सफेद बॉर्डर */
  border-radius: 3px;           /* कोनों को गोल बनाएं */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* नीचे हल्का साया */
  padding: 3px;                  /* बॉक्स के अंदर थोड़ा खाली स्थान */
  
  z-index: 10001;                /* हेडर से ऊपर दिखे */
  transition: all 0.3s ease;     /* होवर पर स्मूद मूवमेंट */
}

/* होवर करने पर ज़ूम और शैडो प्रभाव */
.menu-toggle:hover {
  transform: scale(1.1); /* हल्का बड़ा हो जाए */
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4); /* शैडो और गहरा हो */
}

/* थ्री लाइनें (स्पैन) - स्टाइलिंग (हर एक लाइन सफेद, चौड़ी और गोल किनारे वाली) */
.menu-toggle span {
  display: block;           /* हर span ब्लॉक की तरह दिखे */
  width: 90%;               /* बटन की चौड़ाई का 80% */
  height: 3px;              /* हर लाइन की मोटाई */
  background-color: #ffffff; /* सफेद रंग की लाइन */
  border-radius: 2px;       /* हल्का गोल किनारा */
  transition: all 0.3s ease; /* ट्रांजिशन स्मूद हो */
}

/* मोबाइल स्क्रीन के लिए (Responsive सुधार) */
@media (max-width: 600px) {
    /* मेनू बटन की फॉन्ट-साइज़ को बढ़ाने के बजाय नीचे हेडर के टेक्स्ट आकार को नियंत्रित करें */
    .header-center h1 {
        font-size: 18px; /* हेडर के मुख्य शीर्षक का फ़ॉन्ट आकार छोटा करें */
    }

    .header-center p {
        font-size: 10px; /* हेडर के उपशीर्षक या विवरण के लिए फ़ॉन्ट आकार सेट करें */
    }

    .header-right img {
        max-height: 60px; /* मोबाइल पर हेडर के दाईं ओर इमेज की अधिकतम ऊंचाई सीमित करें */
    }
}

/* =================================
थ्री लाइन मेनू बटन स्टाइलिंग - समाप्त 🔼 🔼
================================= */

/* =================================
हेडर का बीच में टाइटल My Hindi एवं डिस्क्रिप्शन वाले भाग की स्टाइलिंग - प्रारंभ 🔽 🔽
================================= */

.header-center {
    position: absolute;           /* पोजीशनिंग के लिए */
    left: 55%;                    /* बाएं से 50% दूरी */
    top: 50%;                     /* ऊपर से 50% दूरी */
    transform: translate(-70%, -70%);  /* दोनों दिशा में केंद्रित करें */
    text-align: center;           /* टेक्स्ट केंद्रित करें */
    z-index: 10000;
}

/* मुख्य शीर्षक – My Hindi */
.header-center h1 {
    font-size: 24px;
    margin: 0;
    color: #fdffd9;
    text-shadow: 0 0 5px #fabeff, 0 0 10px #c9ffeb, 0 0 15px #0ff;
    transition: all 0.4s ease-in-out;
    cursor: pointer;
    animation: glowPulse 3s infinite alternate;
}

.header-center h1:hover {
    transform: scale(1.2) rotate(-2deg);
    text-shadow: 0 0 10px #fff, 0 0 20px #ff00ff, 0 0 30px #ff00ff;
}

/* उपशीर्षक – डिजिटल हिंदी सेवा */
.header-center p {
    font-size: 19px;
    margin: 4px 0 0;
    color: #f7ffb6;
    background: linear-gradient(90deg, #c5ffb3, #fffab1, #00ffcc);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmerText 4s linear infinite;
    transition: transform 0.4s ease-in-out;
    cursor: pointer;
}

.header-center p:hover {
    transform: scale(1.1);
    text-shadow: 0 0 5px #ff0, 0 0 10px #0f0;
}

/* चमकता हुआ प्रभाव */
@keyframes glowPulse {
    from {
        text-shadow: 0 0 5px #0ff;
    }
    to {
        text-shadow: 0 0 20px #00f, 0 0 30px #0ff, 0 0 40px #0ff;
    }
}

/* शिमरिंग टेक्स्ट एनिमेशन */
@keyframes shimmerText {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* =================================
हेडर का बीच में टाइटल My Hindi एवं डिस्क्रिप्शन वाले भाग की स्टाइलिंग - समाप्त 🔼 🔼
================================= */

/* =================================
लोगो स्टाइलिंग (हेडर का दायाँ भाग) - प्रारंभ 🔽 🔽
(जिसमें लोगो या अन्य कंटेंट होता है। लोगो की अतिरिक्त स्टाइलिंग के लिए .js फाइल में स्क्रिप्ट कोड जुड़ा हुआ है, जिसके कारण लोगो (logo-myhindi.png) पर क्लिक करते ही आइकॉन (icon-myhindi.png) आ जाता है। इसके पश्चात 3 सेकंड बाद रीडायरेक्ट होकर www.rfhindi.com वेबसाइट पर पहुंच जाते हैं।)
================================= */

/* हेडर के दाईं ओर हिस्सा */
.header-right {
    padding-right: 75px;                 /* दाईं ओर पैडिंग */
    display: flex;                       /* फ्लेक्स लेआउट */
    justify-content: flex-end;          /* कंटेंट को दाईं ओर संरेखित करें */
    align-items: center;                /* ऊँचाई में केंद्र में रखें */
    min-width: 80px;                    /* न्यूनतम चौड़ाई */
}

/* हेडर के दाईं ओर लोगो */
.header-right img {
    max-height: 50px;                   /* अधिकतम ऊँचाई */
    width: auto;                        /* चौड़ाई स्वचालित */
    display: block;                     /* ब्लॉक एलिमेंट बनाए रखें */
    position: absolute;                 /* पूर्ण स्थिति निर्धारण */
    top: 19px;                          /* ऊपर से स्थिति (ज़रूरत अनुसार -15px, -20px आदि करें) */
    margin-right: -75px;
    z-index: 100000;                    /* सबसे ऊपर की परत पर रखें */
    cursor: pointer;                    /* क्लिकेबल दिखाने के लिए */
    
    /* ******** यहाँ से नया CSS कोड जोड़ें ********* */
    transition: opacity 0.3s ease-in-out; /* ओपेसिटी बदलाव के लिए स्मूथ ट्रांजिशन */
}

/* जब इमेज गायब हो रही हो */
.header-right img.fade-out {
    opacity: 0; /* पूरी तरह से पारदर्शी करें */
}

/* लोगों पर क्लिक करने से आइकॉन बदल जाता है जो 1.5 सेकंड तक दिखाई देता है इसके पश्चात वेबसाइट www.rfhindi.com पर रीडायरेक्ट हो जाते हैं। 1500 = 1.5 सेकंड को चेंज करने के लिए लोगो के लगाया गया जावा स्क्रिप्ट कोड को देखें। */
/* =================================
लोगो स्टाइलिंग (हेडर का दायाँ भाग) - समाप्त 🔼 🔼
================================= */

/* =================================
एप बटन एवं सब्सक्राइब बटन स्टाइलिंग + एनिमेटेड बैकग्राउंड स्टाइलिंग - प्रारंभ 🔽 🔽
================================= */
/* यह क्लास सभी बटनों को एक पंक्ति में सजाने के लिए - प्रारंभ 🔽 */

.header-buttons {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;                        /* बटन के बीच अंतर */
  flex-wrap: nowrap;
  padding: 12px 19px;              /* ऊपर-नीचे और दाएं-बाएं मार्जिन */
  max-width: 100%;
  overflow-x: auto;
  margin-top: 90px;                /* हेडर से दूरी */
  margin-bottom: 9px;
  margin-left: -24px;
}

.header-btn {
  display: flex;
  align-items: center;
  justify-content: center; /* यहां ऐसा लगेगा कि कोड्स दोहराए गए हैं, किंतु दोहराव नहीं है, यह स्टाइलिंग के लिए जरूरी है।ें */

  min-width: 140px;        /* ✅ यदि टेक्स्ट कट रहा है तो थोड़ा बढ़ाएं */
}

/* यह क्लास सभी बटनों को एक पंक्ति में सजाने के लिए - समाप्त 🔼 */

/* बटन के भीतर आइकॉन + टेक्स्ट - प्रारंभ 🔽  यह क्लास हर बटन की व्यक्तिगत स्टाइलिंग के लिए है जैसे बैकग्राउंड, पैडिंग, टेक्स्ट */

.header-btn {
  display: flex;
  align-items: center;
  gap: 7px;                        /* आइकॉन और टेक्स्ट के बीच गैप */
  background: linear-gradient(-45deg, #50ddff, #fccaff, #b7ff50);
  background-size: 600% 600%;
  animation: waveGradient 10s ease infinite;
  
  color: #000d2e;
  padding: 10px 19px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
  min-width: 120px;
  text-align: center;
  transition: transform 0.2s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* बटन के भीतर आइकॉन + टेक्स्ट - समाप्त 🔼 */

/* कलरफुल बेल आइकन - प्रारंभ 🔽 
यह क्लास सब्सक्राइब बटन के अंदर घंटी आइकन को रंगीन और एनिमेटेड बनाने के लिए है */

.colorful-bell {
  font-size: 19px;                        /* आइकन का आकार */
  background: linear-gradient(32deg, #0029ff, #5200ff, #00ffce, #200c63,  #ff0000);
  -webkit-background-clip: text;          /* बैकग्राउंड को टेक्स्ट पर क्लिप करें */
  -webkit-text-fill-color: transparent;   /* रंग को ट्रांसपेरेंट करें ताकि ग्रेडिएंट दिखे */
  animation: bell-shake 2.5s infinite ease-in-out;
  display: inline-block;
}

/* कलरफुल बेल आइकन - समाप्त 🔼 */

/* घंटी हिलने का एनिमेशन - प्रारंभ 🔽 
यह कीफ्रेम बेल आइकन को झुकाने और सीधा करने का एनीमेशन बनाता है */

@keyframes bell-shake {
  0%   { transform: rotate(0deg); }
  10%  { transform: rotate(20deg); }
  20%  { transform: rotate(-20deg); }
  30%  { transform: rotate(15deg); }
  40%  { transform: rotate(-15deg); }
  50%  { transform: rotate(10deg); }
  60%  { transform: rotate(-10deg); }
  70%  { transform: rotate(5deg); }
  80%  { transform: rotate(-5deg); }
  90%, 100% { transform: rotate(0deg); }
}

/* घंटी हिलने का एनिमेशन - समाप्त 🔼 */

/* बटन होवर इफेक्ट - प्रारंभ 🔽 
बटन पर होवर करते समय थोड़ा सा जूम इन होता है */

.header-btn:hover {
  transform: scale(1.05);
}

/* बटन होवर इफेक्ट - समाप्त 🔼 */

/* आइकॉन स्टाइल  - प्रारंभ 🔽
बटन के अंदर आइकन इमेज को गोल और फिट रखने के लिए */

.header-btn img {
  width: 20px;
  height: 20px;
  border-radius: 50%;             /* गोल आकार */
  object-fit: cover;
}

/* आइकॉन स्टाइल  - समाप्त 🔼*/

/* बटनों में कलर एनिमेशन - प्रारंभ 🔽 
बटन की बैकग्राउंड ग्रेडिएंट में धीरे-धीरे रंग बदलते रहते हैं */
 
@keyframes waveGradient {
  0%   { background-position: 0% 50%; }
  25%  { background-position: 50% 50%; }
  50%  { background-position: 100% 50%; }
  75%  { background-position: 50% 50%; }
  100% { background-position: 0% 50%; }
}

/* बटनों में कलर एनिमेशन - समाप्त 🔼*/

/* बटन, आइकन और अंदर के फोन्ट का आकार बड़ा या छोटा करने के लिए कोडिंग - प्रारंभ 🔽 */

@media (max-width: 500px) {
  .header-btn {
    padding: 3px 6px;
    font-size: 11.5px;
    min-width: 112px;
  }

  .header-btn img {
    width: 18px;
    height: 18px;
  }
}

/* बटन, आइकन और अंदर के फोन्ट का आकार बड़ा या छोटा करने के लिए कोडिंग - समाप्त 🔼 */

/* =================================
एप बटन एवं सब्सक्राइब बटन स्टाइलिंग + एनिमेटेड बैकग्राउंड स्टाइलिंग - समाप्त 🔼🔼
================================= */



/* =================================
 सर्च बॉक्स कंटेनर, सर्च बॉक्स, क्रास बटन, वाइस टाइपिंग, सर्च बटन की स्टाइलिंग - प्रारंभ 🔽 🔽
================================= */

.search-bar {
  position: fixed;
  top: 179px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 600px;
  display: flex;
  gap: 7px;
  padding: 6px;
  background: linear-gradient(90deg, #336ccd, #8f00ff, #c4ff00);
  
  /* ✅ उभरी हुई बॉर्डर */
  border: 5px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 1) inset,
              0 4px 10px rgba(0, 0, 0, 0.15);
  
  border-radius: 15px;
  background-clip: padding-box;

  align-items: center;
  z-index: 999;
}

/* इनपुट + क्रॉस */
.input-container {
  position: relative;
  flex: 1;
}

.input-container input {
  width: 75%;
  padding: 7px 50px 6px 7px;
  font-size: 16px;
  border: 2px solid #193d21;
  border-radius: 6px;
}

/* ❌ क्रॉस बटन */
.clear-button {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 12px;
  color: #5000b6;
}
.clear-button:hover {
  color: #00556b;
}

/* 🎤 और 🔍 बटन */
.search-bar button {
  background: none;
  border: none;
  font-size: 30px;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.search-bar button:hover {
  transform: scale(1.2);
}

/* =================================
 सर्च बॉक्स कंटेनर, सर्च बॉक्स, क्रास बटन, वाइस टाइपिंग, सर्च बटन की स्टाइलिंग - समाप्त 🔼 🔼
================================= */

/* =================================
साइड बार, मुख्य ऑप्शंस, सब-ऑप्शंस, और पॉपअप विंडो की संपूर्ण स्टाइलिंग - प्रारंभ 🔽 🔽
================================= */
/* साइड बार मुख्य कंटेनर (बैकग्राउंड सहित) */
#sidebar {
    position: fixed;
    top: 170px;
    height: calc(100vh - 260px);
    width: 250px;
    left: 0;
    background: linear-gradient(90deg, #336ccd, #8f00ff, #f2d6ff);
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform 0.5s ease;
    box-shadow: 2px 3px 10px rgba(6, 45, 12, 0.6);
    transform: translateX(-250px); /* छिपा हुआ डिफ़ॉल्ट */
    padding: 20px 10px;
    box-sizing: border-box;
    z-index: 1000;
}

/* साइडबार छिपा हुआ */
#sidebar.sidebar-hidden {
    transform: translateX(-250px);
}

/* साइडबार दिख रहा हो */
#sidebar:not(.sidebar-hidden) {
    transform: translateX(0);
}

/* साइडबार मेन्यू की सूची */
#sidebarMenu {
    list-style: none;
    padding: 0;
    margin: 0;
}

#sidebarMenu > li {
    margin-bottom: 8px;
}

/* मुख्य ऑप्शन (Anchor) स्टाइल */
#sidebarMenu a {
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
    padding: 10px 15px;
    font-weight: bold;
    background: linear-gradient(90deg, #32413b, #0a422a, #3b775e, #669876);
    border: 2px solid #fff500;
        border-left: 7px solid #fff500; /* बाएं तरफ नीला-बैंगनी हाइलाइटर */
    box-shadow: 6px 4px 6px rgba(12, 110, 212, 0.3);
    border-radius: 12px;
    transition: all 0.3s ease;
    display: block;
    font-family: 'Hind', sans-serif;
}

/* मुख्य ऑप्शन होवर इफेक्ट */
#sidebarMenu a:hover {
    background: linear-gradient(180deg, #c3cd4e, #1e5955, #1e5955, #1e5955, #c3cd4e);
    text-decoration: underline;
    transform: scale(1.06);
    box-shadow: 5px 6px 12px rgba(25, 94, 33, 0.35);
}

/* सब ऑप्शंस की स्टाइलिंग */
#sidebarMenu ul {
    list-style: none;
    padding-left: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
}

#sidebarMenu ul li {
    margin-bottom: 3px;
}

#sidebarMenu ul li a {
    font-size: 16px;
    padding: 6px 8px 6px 15px;
    /* सब-ऑप्शन के लिए नया और हटकर बैकग्राउंड कलर */
    background: linear-gradient(135deg, #5f6f03, #707e20, #6c7f01); /* हल्का गुलाबी से ऑर्किड */
    color: #ef9fff; /* गहरा ग्रे फॉन्ट कलर */
    border: 1.5px solid #fff500; /* हल्का ग्रे बॉर्डर */
    border-left: 5px solid #fff500; /* बाएं तरफ नीला-बैंगनी हाइलाइटर */
    border-radius: 8px;
    margin-top: 4px;
    display: block;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* सब ऑप्शंस होवर इफेक्ट */
#sidebarMenu ul li a:hover {
    background: linear-gradient(135deg, #DA70D6, #FFC0CB); /* होवर पर ग्रेडिएंट बदलना */
    color: #000000; /* होवर पर काला फॉन्ट */
    border-left-color: #9932CC; /* होवर पर गहरा बैंगनी हाइलाइटर */
    transform: translateX(5px);
}

/* पॉपअप विंडो स्टाइलिंग (fullscreenPopup) */
#fullscreenPopup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(25, 105, 180, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10003;
    visibility: hidden; /* डिफ़ॉल्ट रूप से छिपा हुआ */
    opacity: 0; /* डिफ़ॉल्ट रूप से अपारदर्शी */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#fullscreenPopup.active {
    visibility: visible; /* क्लास जोड़ने पर दृश्यमान */
    opacity: 1; /* क्लास जोड़ने पर पूरी तरह से दृश्यमान */
}

.popup-content {
    background: linear-gradient(to bottom right, #ffffff, #f0f0f0);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 90%;
    max-width: 900px;
    top: 0;
    height: calc(100vh - 40px);
    max-height: calc(100vh - 40px);
    margin: 0 auto;
    box-shadow: 12px 12px 25px rgba(12, 55, 0, 0.35);
    border: none;
}

/* क्रॉस बटन स्टाइलिंग */
.popup-content .close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 26px;
    font-weight: bold;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(to right, #ff6b6b, #ee5253);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(25, 100, 107, 0.4);
    z-index: 10004;
    transition: all 0.2s ease-in-out;
}

/* क्रॉस बटन होवर स्टाइल */
.popup-content .close-btn:hover {
    background: linear-gradient(to right, #ee5253, #eb3b5a);
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 6px 15px rgba(25, 107, 107, 0.6);
}

.popup-content iframe {
    width: 100%;
    height: 100%;
    border: none;
    flex-grow: 1;
    padding: 0;
}

/* पॉलिसीज़ मोडल के लिए CSS (हमेशा खुला रहेगा) */
.policy-modal {
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: linear-gradient(270deg, #ff7e5f, #feb47b, #ffc971, #ffecb3, #e0f7fa, #b2ebf2, #81d4fa, #4fc3f7, #29b6f6);
    background-size: 800% 800%;
    animation: vibrantGradientAnimation 25s ease infinite;
    display: flex; /* इसे हमेशा flex के रूप में प्रदर्शित करें */
    justify-content: center;
    align-items: center;
    opacity: 1; /* इसे हमेशा पूरी तरह से दृश्यमान रखें */
    visibility: visible; /* इसे हमेशा दृश्यमान रखें */
    transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
}

/* जीवंत बैकग्राउंड ग्रेडिएंट एनिमेशन */
@keyframes vibrantGradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 50% 100%;
    }
    50% {
        background-position: 100% 50%;
    }
    75% {
        background-position: 50% 0%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.policy-modal-content {
    background: linear-gradient(135deg, #e6ffb1, #ccffb1, #b1ffb9, #b1f8ff);
    background-size: 300% 300%;
    animation: contentGradientAnimation 10s ease infinite alternate;
    margin: auto;
    padding: 40px;
    border-radius: 25px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5);
    position: relative;
    max-width: 850px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.8);
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55), box-shadow 0.4s ease-in-out, background 0.4s ease-in-out;
    border: 3px solid rgba(255, 255, 255, 0.5);
}

/* पॉप-अप सामग्री ग्रेडिएंट एनिमेशन */
@keyframes contentGradientAnimation {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 100%;
    }
}

.policy-modal-content:hover {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 255, 255, 0.3);
    transform: scale(1.02);
}

.policy-modal-header {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 5px solid rgba(255, 255, 255, 0.7);
    padding-bottom: 20px;
    margin-bottom: 30px;
    position: relative;
}

.policy-modal-header h2 {
    margin: 0;
    font-size: 3.00em;
    font-family: 'Poppins', sans-serif;
    color: #b500ff;
    text-shadow: 5px 5px 10px rgba(96, 55, 32, 0.7), 0 0 15px rgba(255, 255, 255, 0.5);
    letter-spacing: 2px;
    transition: transform 0.3s ease, text-shadow 0.3s ease;
}

.policy-modal-header h2:hover {
    transform: translateY(-5px) scale(1.05);
    text-shadow: 3px 3px 12px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 255, 255, 0.5);
}

/* क्लोज बटन स्टाइलिंग */
.policy-modal .close-button {
    position: absolute;
    top: 15px;
    right: 24px;
    color: #ff0000;
    font-size: 42px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.4s ease, text-shadow 0.4s ease;
    transform: rotate(0deg) scale(1);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.policy-modal .close-button:hover {
    color: #ff4d4d;
    transform: rotate(180deg) scale(1.3);
    text-shadow: 0 0 15px rgba(255, 0, 0, 0.7), 0 0 25px rgba(255, 100, 100, 0.5);
}

.policy-modal-body {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 20px;
    line-height: 1.8;
    color: #333;
    font-size: 1.1em;
    text-align: justify;
}

/* स्क्रॉल बार स्टाइलिंग (वेबकिट ब्राउज़र के लिए) */
.policy-modal-body::-webkit-scrollbar {
    width: 12px;
}

.policy-modal-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

.policy-modal-body::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #8e2de2, #4a00e0);
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.policy-modal-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #a742f5, #6a1aed);
}

.policy-modal-footer {
    border-top: 2px solid rgba(255, 255, 255, 0.7);
    padding-top: 20px;
    margin-top: 30px;
    text-align: center;
    font-size: 1em;
    color: #7101c9;
    font-style: italic;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, text-shadow 0.3s ease;
}

/* फ़ुटर कॉपीराइट के लिए सुंदर होवर इफेक्ट */
.policy-modal-footer:hover {
    transform: translateY(-3px);
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 255, 255, 0.2);
}

/* यदि आपके पास बटन या लिंक हैं */
.policy-modal-footer button,
.policy-modal-footer a {
    background: linear-gradient(45deg, #FF6B6B, #FFC971);
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-size: 1.1em;
    margin: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    font-weight: bold;
    letter-spacing: 1px;
}

.policy-modal-footer button:hover,
.policy-modal-footer a:hover {
    background: linear-gradient(45deg, #FFC971, #FF6B6B);
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    animation: pulseButton 1s infinite;
}

@keyframes pulseButton {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
    100% {
        transform: scale(1);
    }
}

/* यदि आपके पास मोडल के अंदर कोई लिस्ट या ऑप्शंस हैं */
.policy-modal-body ul {
    list-style: none;
    padding: 0;
}

.policy-modal-body ul li {
    padding: 12px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
    transition: background-color 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
    cursor: pointer;
    color: #444;
}

.policy-modal-body ul li:last-child {
    border-bottom: none;
}

.policy-modal-body ul li:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateX(10px) scale(1.02);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    color: #000;
}

/* आधुनिक प्रतिक्रियाशील डिजाइन (Responsive Design) के लिए: */
@media (max-width: 768px) {
    .policy-modal-content {
        width: 95%;
        padding: 25px;
        max-height: 95vh;
        border-radius: 15px;
    }

    .policy-modal-header h2 {
        font-size: 2em;
        letter-spacing: 1px;
    }

    .policy-modal .close-button {
        font-size: 30px;
        top: 10px;
        right: 15px;
    }

    .policy-modal-body {
        font-size: 1em;
        padding-right: 10px;
    }

    .policy-modal-footer button,
    .policy-modal-footer a {
        padding: 10px 20px;
        font-size: 0.9em;
    }
}
/* =================================
साइड बार, मुख्य ऑप्शंस, सब-ऑप्शंस, और पॉपअप विंडो की संपूर्ण स्टाइलिंग - समाप्त 🔼 🔼
================================ */


/* =================================
 🟪 Top Auto-Scrolling Bar (हेडर के जस्ट नीचे) + 
 टॉप स्क्रॉलबार को right side पर दिखाने के लिए  - प्रारंभ 🔽🔽
================================= */

/* 🔷 स्क्रोलिंग बार का बाहरी कवर */
.top-scroll-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  background: linear-gradient(90deg, #0f2027, #203a43, #2c5364, #191654);
  padding: 6px 0;
  box-shadow: 6px 2px 5px rgba(12,55,12,0.4);
  position: sticky;
  top: 120px;
  z-index: 9999;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* 🔷 अंदर की स्क्रोलिंग बार */
#topScrollBar {
  display: flex;
  width: max-content;
  padding-right: 20px;
  white-space: nowrap;
  animation-name: scrollRight;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* 🔷 Keyframes */
@keyframes scrollRight {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

/* 🔷 विकल्प (बटन) */
.top-scroll-wrapper .scroll-option {
  flex-shrink: 0;
  padding: 8px 18px;
  margin: 0 10px;
  border-radius: 25px;
  font-family: 'Hind', sans-serif;
  font-size: 1.1em;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(90deg, #1f4037, #befff7);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  transition: all 0.3s ease-in-out;
  white-space: nowrap;
}

/* 🔷 Hover effect */
.top-scroll-wrapper .scroll-option:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #ffae1c, #00c999, #cbe129);
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

/* 🔷 टॉप स्क्रॉलबार को right side पर दिखाने के लिए */
#topScrollWrapper {
  direction: rtl;
}
#topScrollBar {
  direction: ltr;
}

/* =================================
 🟪 Top Auto-Scrolling Bar + Right Side Scrollbar - समाप्त 🔼🔼
================================= */

/* =================================
🌾 main के अंदर 'स्वागतम्' शीर्षक और "हिंदी शिक्षा का संगम" विवरण की स्टाइलिंग - प्रारंभ 🔽 🔽
================================ */

main {
    padding: 123px 23px 50px;       /* ⬆️ ऊपर 123px, दाएं-बाएं 23px, नीचे 50px */
    text-align: center;             /* 📌 मुख्य टेक्स्ट को केंद्र में रखें */
    max-width: 900px;               /* 📏 कंटेंट की अधिकतम चौड़ाई */
    margin: 0 auto;                 /* ↔️ क्षैतिज रूप से केंद्र में रखें */
    line-height: 1.2;               /* 🧵 टेक्स्ट लाइनों के बीच spacing */
}

/* ✅ 'स्वागतम्' शीर्षक के लिए स्टाइलिंग */
main h1 {
    font-family: 'TeKo', sans-serif;   /* 🅰️ आकर्षक heading फॉन्ट */
    font-size: 2.8em;                  /* 🔠 बड़ा font-size */
    text-align: center;                /* ↔️ सेंटर में टेक्स्ट */
    margin-bottom: 19px;              /* 📏 नीचे का स्पेस */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.1);  /* ☁️ हल्का शैडो */
    transition: transform 0.3s ease, text-shadow 0.1s ease;
    
    /* 🔄 रंग बदलने वाला animation */
    background: linear-gradient(45deg, #e91e63, #ff7a00, #119f00, #00b2ff, #e91e63, #7f009f, #009f9f, #3f51b5, #009688, #ffc107, #e91e63);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: swagatamColors 6s ease infinite;
}

/* 🔄 होवर पर स्वागतम् में हल्का ज़ूम और गहरा शैडो */
main h1:hover {
    transform: scale(1.6);                         /* 🔍 ज़ूम करें */
    text-shadow: 2px 2px 5px rgba(0,0,0,0.2);      /* ☁️ गहरा शैडो */
}

/* 🌈 'स्वागतम्' के लिए कलर एनीमेशन की कीफ्रेम्स */
@keyframes swagatamColors {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* =================================
🌾 main के अंदर 'स्वागतम्' शीर्षक और "हिंदी शिक्षा का संगम" विवरण की स्टाइलिंग - समाप्त 🔼 🔼
================================ */

/* =================================
🎨 "हिंदी शिक्षा का संगम" विवरण वाक्य की स्टाइलिंग - प्रारंभ 🔽 🔽
यह कोड मुख्य पंक्ति में रंग बदलते ग्रेडिएंट, होवर पर spacing और चमक प्रभाव जोड़ता है।
================================= */
/* कोड प्रारंभ */

main p {
    font-family: 'Hind', sans-serif;             /* 🇮🇳 देवनागरी फ़ॉन्ट */
    font-size: 1.2em;                            /* 🔤 मध्यम आकार */
    margin-top: -6px;                            /* 🌾 h1 से दूरी */
    text-align: center;                          /* ↔️ केंद्र में संरेखण */
    transition: letter-spacing 0.2s ease;        /* 🔄 spacing smooth transition */

    /* 🌈 चलायमान रंग ग्रेडिएंट के लिए */
    background: linear-gradient(90deg, #ff7a00, #119f00, #00b2ff, #e91e63, #7f009f, #009f9f);  /* 🎨 रंग */
    background-size: 400% 400%;                  /* 🔁 animation के लिए ज़रूरी */
    -webkit-background-clip: text;               /* 🧵 टेक्स्ट के भीतर कलर */
    -webkit-text-fill-color: transparent;        /* 🫥 टेक्स्ट को पारदर्शी करें */
    animation: descripColorFlow 8s ease infinite; /* 🔄 रंग बदलने वाला animation */
}

/* 🔁 होवर पर अतिरिक्त spacing और चमक */
main p:hover {
    letter-spacing: 1px;                         /* ↔️ होवर पर अक्षरों के बीच दूरी */
    filter: brightness(1.3);                     /* 💡 होवर पर हल्का चमक */
}

/* 🌈 ग्रेडिएंट रंग परिवर्तन के लिए keyframes */
@keyframes descripColorFlow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* कोड समाप्त */
/* =================================
🎨 "हिंदी शिक्षा का संगम" विवरण वाक्य की स्टाइलिंग - समाप्त 🔼 🔼
================================= */
/* =================================
🌾 main के अंदर 'स्वागतम्' शीर्षक और "हिंदी शिक्षा का संगम" विवरण की स्टाइलिंग - समाप्त 🔼 🔼
================================ */

/* =================================
📖 नवीनतम ब्लॉग्स के शीर्षक के लिए "Tilt / Pendulum" एनिमेशन स्टाइल - प्रारंभ 🔽 🔽
यह स्टाइल टेक्स्ट को धीरे-धीरे एक ओर झुकने और फिर वापस आने जैसा प्रभाव देता है, जो attention खींचता है और ब्लॉग की ताजगी को दर्शाता है।
================================= */
/* कोड प्रारंभ */

.latest-heading {
  position: relative;
  text-align: center;
  font-family: 'TeKo', sans-serif;
  font-size: 2.2em;
  color: #ff2c4d;                      /* गहरा गुलाबी-लाल रंग */
  margin-top: -30px;
  margin-bottom: 20px;
  transform-origin: top center;        /* ऊपर की ओर से झुकाव के लिए */
  animation: tiltWave 2.4s ease-in-out infinite;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); /* हल्का शैडो */
}

/* 🔄 झुकाव वाला (Tilt / Pendulum) एनिमेशन */
@keyframes tiltWave {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(3deg); }
  50%  { transform: rotate(-3deg); }
  75%  { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}

/* ✨ नीचे underline shimmer (optional visual effect) */
.latest-heading::after {
  content: '';
  display: block;
  width: 160px;
  height: 2px;
  margin: 10px auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #00f9ff, #ff00d4, #00f9ff);
  background-size: 200% auto;
  animation: shimmerBar 1.7s linear infinite;
}

@keyframes shimmerBar {
  0% { background-position: -80px; }
  100% { background-position: 80px; }
}

/* कोड समाप्त */
/* =================================
📖 नवीनतम ब्लॉग्स के शीर्षक के लिए "Tilt / Pendulum" एनिमेशन स्टाइल - समाप्त 🔼 🔼
================================= */

/* =================================
📖 नवीनतम ब्लाग्स हॉरिजॉन्टल स्क्रोल बार और कार्ड्स के लिए स्टाइलिंग - प्रारंभ 🔽 🔽
================================ */

/* ✅ scroll-latest कंटेनर */
.scroll-latest {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  padding: 15px;
  scroll-behavior: smooth;
  /* ❌ नीचे की स्क्रोल लाइन को दिखाने के लिए "scrollbar-width" और "display: none" नहीं रखा गया */
}

/* ✅ ब्राउज़र का डिफॉल्ट स्क्रोल इंडिकेटर (नीचे की लाइन को दिखाने हेतु स्टाइलिंग) */
.scroll-latest::-webkit-scrollbar {
  height: 3.7px; /* स्क्रोल बार की ऊंचाई */
}

.scroll-latest::-webkit-scrollbar-thumb {
  background-color: #9f07fc; /* स्क्रोल thumb का रंग */
  border-radius: 5px;      /* गोल किनारे */
}

.scroll-latest::-webkit-scrollbar-thumb:hover {
  background-color: #d7ffae;  /* होवर पर रंग */
}

/* ✅ कार्ड स्टाइलिंग */
.card-latest {
  position: relative;
  flex: 0 0 auto;
  width: 250px;
  height: 125px;
  padding: 20px;
  background: #3b7d23;
  color: #ffffff;
  text-align: center;
  box-shadow: 15px 12px 19px rgba(19,55,0,0.9);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  border: 2px solid #fffc00;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* ✅ आइकॉन */
.card-latest i {
  font-size: 30px;
  margin-bottom: 12px;
  display: block;
}

/* ✅ होवर प्रभाव */
.card-latest:hover {
  transform: scale(1.08);
  box-shadow: 1px 9px 19px rgba(155, 15, 213, 0.6);
  border-color: #ffd700;
}

/* ✅ अलग-अलग बैकग्राउंड (कार्ड के प्रकार के अनुसार) */
.card-latest.idioms {
  background: linear-gradient(135deg, #0a5037, #b8a100);
}
.card-latest.proverbs {
  background: linear-gradient(135deg, #00c9ff, #92fe9d);
}
.card-latest.synonyms {
  background: linear-gradient(135deg, #f7971e, #ffd200);
}
.card-latest.antonyms {
  background: linear-gradient(135deg, #3a1c71, #d76d77, #ffaf7b);
}
.card-latest.summary {
  background: linear-gradient(135deg, #00c3ff, #ffff1c);
}

/* ✅ एक्टिव सेंटर क्लास */
.card-latest.active-center {
  outline: 3px dashed white;
  outline-offset: -6px;
  animation: pulseBorder 1.5s infinite;
}

/* ✅ बॉर्डर ऐनिमेशन */
@keyframes pulseBorder {
  0% { outline-color: #fff; }
  50% { outline-color: #ffeb3b; }
  100% { outline-color: #fff; }
}

/* =================================
📖 नवीनतम ब्लाग्स हॉरिजॉन्टल स्क्रोल बार और कार्ड्स के लिए स्टाइलिंग - समाप्त 🔼 🔼
================================ =*/

/* =================================
🌐 लोकप्रिय ब्लॉग्स शीर्षक के लिए चमकदार Scale-Flicker एनिमेशन - प्रारंभ 🔽 🔽
यह स्टाइल टेक्स्ट को हल्का चमकदार बनाता है और ध्यान खींचता है।
================================= */
/* कोड प्रारंभ */

.popular-heading {
    text-align: center;
    font-family: 'TeKo', sans-serif;
    font-size: 2.1em;
    color: #8a00ff; /* गहरा बैंगनी */
    margin-top: 25px;
    margin-bottom: 12px;
    position: relative;
    animation: flickerScale 3.5s ease-in-out infinite;
    text-shadow: 0 0 2px #fbffa9, 0 0 8px #a9ffff;
    transform-origin: center;
}

/* ✨ Flicker + Scale keyframes */
@keyframes flickerScale {
  0%   { transform: scale(1);     opacity: 1;   text-shadow: 0 0 2px #ff7b8b, 0 0 8px #ffe500; }
  25%  { transform: scale(1.02);  opacity: 0.95; text-shadow: 0 0 4px #ffdaee, 0 0 12px #7ba8ff; }
  50%  { transform: scale(1.05);  opacity: 1;   text-shadow: 0 0 6px #c97bff, 0 0 18px #3e33ff; }
  75%  { transform: scale(1.03);  opacity: 0.98; text-shadow: 0 0 4px #ffd233, 0 0 10px #00ff9c; }
  100% { transform: scale(1);     opacity: 1;   text-shadow: 0 0 2px #ff3232, 0 0 8px #ff977b; }
}

/* 🎯 नीचे रंगीन स्टैटिक underline */
.popular-heading::after {
    content: '';
    display: block;
    width: 180px;
    height: 2px;
    background: linear-gradient(90deg, #ff6a00, #f800ff, #00ffe5);
    margin: 5px auto 0;
    border-radius: 5px;
}

/* कोड समाप्त */
/* =================================
🌐 लोकप्रिय ब्लॉग्स शीर्षक के लिए चमकदार Scale-Flicker एनिमेशन - समाप्त 🔼 🔼
================================= */

/* =================================
🌐 लोकप्रिय ब्लॉग्स हॉरिजॉन्टल स्क्रोल बार और कार्ड्स के लिए स्टाइलिंग - प्रारंभ 🔽 🔽
================================ */

/* ✅ scroll-popular कंटेनर - हॉरिजॉन्टल स्क्रोलिंग */
.scroll-popular {
  display: flex;
  overflow-x: auto;
  gap: 18px;
  padding: 15px;
  scroll-behavior: smooth;
}

/* ✅ scroll-popular कंटेनर - हॉरिजॉन्टल स्क्रोलिंग */
.scroll-popular {
  display: flex;
  overflow-x: auto;
  gap: 18px;
  padding: 15px;
  scroll-behavior: smooth;
}

/* 🎨 स्क्रोल thumb (लाइन) का रंग और आकार - यहीं इसी कोड में */
.scroll-popular::-webkit-scrollbar-thumb {
  background-color: #ff6625; /* 👉 मनचाहा रंग */
  border-radius: 5px;        /* 👉 गोलाई */
}

.scroll-popular::-webkit-scrollbar {
  height: 3.7px; /* 👉 हॉरिजॉन्टल स्क्रोलर की मोटाई */
}

/* ✅ कार्ड: आयताकार आकार में और बॉर्डर-शैडो के साथ */
.card-popular {
  position: relative;
  flex: 0 0 auto;
  width: 215px;
  height: 90px;
  padding: 37px;
  background: #00abff;
  color: #fcfff1;
  text-align: center;
  box-shadow: 15px 12px 19px rgba(105, 173, 23, 0.9);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  border: 3px solid #fffc00;
  border-radius: 19px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  /* ✅ अतिरिक्त बैकग्राउंड-प्रॉपर्टीज (परिवर्तन के लिए) */
  background-image: linear-gradient(to right, #00abff, #0077cc); /* हल्का ग्रेडिएंट */
  background-repeat: no-repeat; /* बैकग्राउंड रिपीट न हो */
  background-size: cover; /* पूरी जगह घेर ले */
  background-position: center; /* केंद्र से दिखे */
  background-clip: padding-box; /* padding सीमा तक लागू हो */
  background-origin: border-box; /* बॉर्डर से शुरू हो */
  background-blend-mode: overlay; /* रंगों का हल्का मिश्रण प्रभाव */

  /* ✅ बॉर्डर की तरह चमकती फ्रेम */
  /* ध्यान दें: यहाँ 'border' प्रॉपर्टी डुप्लिकेट थी, ऊपर पहले से मौजूद है।
     नीचे वाली लाइन को या तो हटा दें या यदि अलग प्रभाव चाहते हैं तो बदल दें।
     मैंने मूल कोड को ही रखा है, लेकिन यह डुप्लिकेट है। */
  border: 2px solid white;
  border-radius: 10px;
}

/* ✅ आइकॉन के लिए स्टाइल */
.card-popular i {
  font-size: 26px;
  margin-bottom: 12px;
  display: block;
}

/* ✅ होवर प्रभाव */
.card-popular:hover {
  transform: scale(1.08);
  box-shadow: 12px 6px 6px rgba(55, 125, 255, 0.6);
  border-color: #ff6625;
}

/* ✅ अलग-अलग बैकग्राउंड */
.card-popular.swar {
  background: linear-gradient(135deg, #7ba4ff, #00b2ff);
}

.card-popular.varnamala {
  background: linear-gradient(135deg, #93b69a, #0ea795);
}

.card-popular.sentence {
  background: linear-gradient(135deg, #fbc2eb, #e3ff5c);
}

.card-popular.literature {
  background: linear-gradient(135deg, #84fab0, #8fd3f4);
}

.card-popular.translation {
  background: linear-gradient(135deg, #ffecd2, #edff7b);
}

/* ✅ एक्टिव सेंटर क्लास (JS के लिए) */
.card-popular.active-center {
  outline: 3px dashed #75e2ff;
  outline-offset: -5px;
}

/* =================================
🌐 लोकप्रिय ब्लॉग्स हॉरिजॉन्टल स्क्रोल बार और कार्ड्स के लिए स्टाइलिंग - समाप्त 🔼 🔼
================================= */

/* =================================
📚 Category section 📝 हेतु सम्पूर्ण स्टाइलिंग - प्रारंभ 🔽 🔽
================================= */

/* =================================
📚 Category section "लेखों की विविध श्रेणियाँ" 📝 शीर्षक के लिए स्टाइलिंग - प्रारंभ 🔽 🔽
================================= */

.article-heading {
  text-align: center;
  font-family: 'Teko', sans-serif;              /* बोल्ड और क्लीन हिंदी शीर्षक */
  font-size: 1.9em;
  color: #006b1b;
  margin-top: 25px;
  margin-bottom: 15px;
  position: relative;

  /* ✅ स्पष्ट चमक एनिमेशन */
  animation: headingGlow 2s ease-in-out infinite alternate;
  transition: transform 0.3s ease, text-shadow 0.3s ease;
}

/* ✅ Hover पर हल्का zoom-in और तेज़ glow */
.article-heading:hover {
  transform: scale(1.05);
  text-shadow: 0 0 25px #00ff5e, 0 0 30px #ff00ff;
}

/* ✅ नीचे shimmer लाइन */
.article-heading::after {
  content: '';
  display: block;
  width: 220px;
  height: 2px;
  background: linear-gradient(90deg, #00ff5e, #e91e63, #00ff5e);
  margin: 10px auto 0;
  border-radius: 5px;
  animation: shimmer-article 2s linear infinite;
  background-size: 200% auto;
}

/* ✅ shimmer लाइन की ऐनिमेशन */
@keyframes shimmer-article {
  0% { background-position: -100px; }
  100% { background-position: 100px; }
}

/* ✅ अब स्पष्ट text-glow animation */
@keyframes headingGlow {
  0% {
    text-shadow: 0 0 5px #00ff5e;
  }
  50% {
    text-shadow: 0 0 15px #00ff5e, 0 0 10px #e91e63;
  }
  100% {
    text-shadow: 0 0 6px #00ff5e;
  }
}

/* =================================
🪄 उपशीर्षक (subheading) 📝 के लिए चमकदार स्टाइलिंग - प्रारंभ 🔽 🔽
================================= */

.subheading-literature,
.subheading-student,
.subheading-exam {
  font-family: 'Teko', sans-serif;            /* साफ-सुथरा हिंदी फॉन्ट */
  font-size: 1.6em;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 15px;
  color: #8822dd;                             /* प्रारंभिक रंग */
  animation: subGlow 3s ease-in-out infinite alternate;
  transition: transform 0.3s ease, text-shadow 0.3s ease, color 0.5s ease;
}

/* ✅ Hover पर रंग और चमक बदलाव */
.subheading-literature:hover,
.subheading-student:hover,
.subheading-exam:hover {
  transform: scale(1.05);
  color: #ff22aa;                            /* hover पर रंग */
  text-shadow: 0 0 10px #ff22aa, 0 0 15px #44ffdd;
}

/* ✅ उपशीर्षक के लिए text-glow animation */
@keyframes subGlow {
  0% {
    color: #8822dd;
    text-shadow: 0 0 5px #ff8a00;
  }
  50% {
    color: #004fff;
    text-shadow: 0 0 10px #ffe6b6, 0 0 8px #cc00ff;
  }
  100% {
    color: #aa44ff;
    text-shadow: 0 0 6px #ff00a8;
  }
}

/* =================================
🪄 उपशीर्षक (subheading) 📝 के लिए चमकदार स्टाइलिंग - समाप्त 🔼🔼
================================= */

/* =================================
📚 Category Section वर्टिकल स्टाइलिंग - प्रारंभ 🔽 🔽
================================ */

.category-section {
  display: flex;
  flex-direction: column;                   /* एक के नीचे एक कार्ड */
  overflow-y: auto;                         /* वर्टिकल स्क्रॉल की अनुमति */
  max-height: 330px;                        /* सेक्शन की ऊँचाई (समायोज्य) */
  gap: 20px;
  padding: 30px;
  margin: 30px auto;
  background: linear-gradient(180deg, #1990ff, #eeceff);  /* गुलाबी बैकग्राउंड */
  border-radius: 15px;
  box-shadow: inset 0 0 10px rgba(15, 15, 113, 0.6);
  scroll-behavior: smooth;
}

/* स्क्रॉलबार स्टाइल */
.category-section::-webkit-scrollbar {
  width: 3.7px;
}
.category-section::-webkit-scrollbar-track {
  background: #f9fab7;
  border-radius: 10px;
}
.category-section::-webkit-scrollbar-thumb {
  background-color: #9225ff;
  border-radius: 5px;
}

/* प्रत्येक कार्ड की स्टाइल */
.category-card {
  background: linear-gradient(to bottom, #ffcef6, #00ffc2);
  padding: 25px;
  border-radius: 19px;
  box-shadow: 0 10px 19px rgba(12, 15, 132,0.9);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 3px solid #fffff5;
}

/* होवर पर इफेक्ट */
.category-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(155, 105, 180, 0.6);
  background: linear-gradient(to bottom, #cefff3, #fff7ce);
}

/* आइकन */
.category-card i {
  font-size: 4em;
  color: #ff7a00;
  margin-bottom: 19px;
}

/* शीर्षक */
.category-card h3 {
  font-family: 'Teko', sans-serif;
  font-size: 1.5em;
  color: #ff573a;
  margin-bottom: 60px;
}

/* विवरण */
.category-card p {
  font-family: 'Hind', sans-serif;
  font-size: 0.9em;
  color: #ff7bee;
  line-height: 1.9;
}

/* =================================
📚 Category Section वर्टिकल स्टाइलिंग - समाप्त 🔼🔼
================================ */
/* =================================
📚 Category section 📝 हेतु सम्पूर्ण स्टाइलिंग - समाप्त 🔼🔼
================================= */

/* =================================
बॉटम ऑटो-स्क्रॉलिंग बार (फुटर के जस्ट ऊपर) स्टाइलिंग - प्रारंभ 🔽 🔽
================================ */

/* 📦 बॉटम स्क्रॉलिंग बार का बाहरी कंटेनर (फुटर के ऊपर स्थित) */
.bottom-scroll-wrapper {
  overflow-x: auto;                             /* केवल क्षैतिज स्क्रॉल की अनुमति */
  overflow-y: hidden;                           /* ऊर्ध्वाधर स्क्रॉल छिपाएं */
  background: linear-gradient(270deg, #1e3c72, #2a5298, #0f2027, #1c1c1c);  /* बैकग्राउंड ग्रेडिएंट: गहरा नीला, मध्यम नीला, गहरा ग्रे, गहरा काला */
  padding: 6px 0;                              /* ऊपरी और निचली पैडिंग */
  box-shadow: 0 -2px 5px rgba(0,0,0,0.4);       /* ऊपर की ओर हल्का शैडो */
  position: fixed;                              /* पेज पर स्थायी रूप से चिपका हुआ */
  bottom: 37px;                                 /* ठीक फुटर के ऊपर पोजिशन */
  z-index: 9998;                                /* अन्य एलिमेंट्स से ऊपर */
  width: 100%;                                  /* पूरे व्यू की चौड़ाई */
  overflow-x: auto;
/* ब्राउज़र का डिफॉल्ट स्क्रोल इंडीकेटर (आप्शंस के स्क्रोल करने पर किसी एक किनारे दिखाई देने वाली एक पतली सी लाइन जो स्क्रोलिंग को इंडिकेट करती है।) */

  -webkit-overflow-scrolling: touch;            /* iOS के लिए स्मूद स्क्रॉलिंग */
}

/* 🎞️ बॉटम स्क्रॉलिंग बार का इनर मूविंग कंटेंट (जिसमें ऑप्शन बटन हैं) */
#bottomScrollBar {
  display: flex;                                /* बटन को एक लाइन में रखें */
  width: max-content;                           /* कंटेंट जितनी चौड़ाई */
  padding-right: 20px;                          /* दाईं ओर खाली जगह */
  white-space: nowrap;                          /* बटन को लाइन ब्रेक नहीं करने देना */
  animation-name: scrollLeft;                   /* नीचे दी गई एनिमेशन का नाम */
  animation-duration: 5s;                      /* एनिमेशन की अवधि */
  animation-timing-function: linear;            /* गति समान */
  animation-iteration-count: infinite;          /* अनंत बार चले */
}

/* 🎬 स्क्रोलिंग एनिमेशन (बाएँ दिशा में मूवमेंट) */
@keyframes scrollLeft {
  0% { transform: translateX(0%); }             /* प्रारंभ में बिना शिफ्ट */
  100% { transform: translateX(-50%); }         /* 50% बाएँ की ओर मूव हो जाए */
}

/* 🎨 बॉटम स्क्रोल बार के प्रत्येक बटन (scroll-option) के लिए सामान्य स्टाइल */
.bottom-scroll-wrapper .scroll-option {
  flex-shrink: 0;                               /* आकार न घटे */
  padding: 8px 18px;                            /* अंदर की जगह */
  margin: 0 10px;                               /* बटन के बीच की दूरी */
  border-radius: 25px;                          /* गोल कोने */
  font-family: 'Hind', sans-serif;              /* हिंदी फ्रेंडली फॉन्ट */
  font-size: 1.1em;
  font-weight: 600;
  color: #ffffff;                               /* फॉन्ट रंग: सफेद */
  background: linear-gradient(90deg, #99f2c8, #1f4037);  /* बैकग्राउंड ग्रेडिएंट: हल्का हरा, गहरा हरा */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);     /* फॉन्ट के पीछे हल्का शैडो */
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);        /* नीचे हल्का बटन शैडो */
  transition: all 0.3s ease-in-out;            /* स्मूद ट्रांजिशन */
  white-space: nowrap;                         /* बटन में टेक्स्ट लाइन ब्रेक न हो */
}

/* 🖱️ होवर इफेक्ट: जब यूज़र माउस से बटन पर आए */
.bottom-scroll-wrapper .scroll-option:hover {
  transform: translateY(-2px);                  /* थोड़ा ऊपर उठे */
  background: linear-gradient(180deg, #195c55, #afdcc0, #42bd12, #5b86e5); /* होवर पर अलग बैकग्राउंड ग्रेडिएंट: गहरा समुद्री हरा, हल्का हरा, चमकीला हरा, नीला */
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);       /* ज्यादा गहरा शैडो */
}

/* =================================
बॉटम ऑटो-स्क्रॉलिंग बार (फुटर के जस्ट ऊपर) स्टाइलिंग - समाप्त 🔼 🔼
================================= */

/* =================================
सोशल मीडिया (फुटर की) सम्पूर्ण स्टाइलिंग - प्रारंभ 🔽 🔽
================================= */
/* =================================
फुटर (वेबसाइट का सबसे निचला हिस्सा) की सामान्य स्टाइलिंग - प्रारंभ 🔽 🔽
================================= */

.site-footer {
    background-color: #108a9f; /* फुटर का गहरा बैकग्राउंड: समुद्री नीला */
    color: #251b93; /* टेक्स्ट का रंग: गहरा बैंगनी/नीला */
    padding: 30px 20px 0px; /* नीचे की padding को 0px कर दिया गया है */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* आधुनिक फ़ॉन्ट */
    text-align: center; /* टेक्स्ट को सेंटर में अलाइन करें */
    border-top: 5px solid #1b931c; /* फुटर के ऊपर एक मोटी बॉर्डर: गहरा हरा */
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.4); /* ऊपर की ओर हल्का शैडो */
}

/* =================================
फुटर (वेबसाइट का सबसे निचला हिस्सा) की सामान्य स्टाइलिंग - समाप्त 🔼 🔼
================================= */

/* =================================
फुटर वाले सोशल मीडिया के ऊपर पतली लाइन की स्टाइलिंग - प्रारंभ 🔽 🔽
================================ */

.divider-line {
    border-top: 3px solid #ff00a1;
    margin-top: 10px;       /* ऊपर से स्पेस बढ़ाया ताकि लाइन नीचे दिखे */
    margin-bottom: 100px;
    margin-top: 0;
    width: 100%;
    height: 100%;
    max-width: 500px;
}

/* =================================
फुटर वाले सोशल मीडिया के ऊपर पतली लाइन की स्टाइलिंग - समाप्त 🔼 🔼
================================= */

/* ===============================
🎨 "हमारे सोशल प्लेटफार्म्स" शीर्षक के लिए स्टाइल - प्रारंभ 🔽🔽
================================ */

.social-title {
  text-align: center;                /* ✅ टेक्स्ट बीच में */
  font-size: 1.9em;                  /* ✅ स्पष्ट रूप से बड़ा */
  color: #ff6e11;                    /* ✅ सुंदर भगवा रंग */
  text-shadow: 3px -3px 5px rgba(0, 12, 22, 0.9); /* हल्का टेक्स्ट शैडो */
    /* यहाँ बदलाव किया गया है: */
  font-family: 'TeKo', sans-serif;  /* ✅ साफ-सुथरा फॉन्ट */
  margin: 0px 0px 5px;               /* ✅ ऊपर-नीचे थोड़ा सा मार्जिन */
  padding: 0px;                      /* ✅ padding हटाई ताकि ऊँचाई न बढ़े */
  line-height: 1.2;                  /* ✅ अच्छा टेक्स्ट गैप */
}

/* ===============================
🎨 "हमारे सोशल प्लेटफार्म्स" शीर्षक के लिए स्टाइल - समाप्त 🔼🔼
================================ */

/* =================================
सोशल मीडिया शीर्षक जैसे- "हमारी अन्य वेबसाइट्स" आदि (सेक्शन टाइटल्स) के लिए स्टाइलिंग - प्रारंभ 🔽 🔽
================================= */
.footer-section-title {
    font-size: 2.5em; /* टाइटल का फ़ॉन्ट साइज़ */
    margin-bottom: -19px; /* नीचे मार्जिन */
    color: #6900ff; /* टाइटल का रंग: गहरा लाल */
    text-shadow: 1px 7px 9px rgba(95, 55, 42, 0.9); /* शैडो जोड़ना */
    position: relative; /* अंडरलाइन एनिमेशन के लिए */
    display: block;
    text-align: center; /* इसे जोड़ दिया गया है ताकि शीर्षक बीच में आए */
    padding-bottom: 6px; /* अंडरलाइन और टेक्स्ट के बीच गैप */
    letter-spacing: 1.0px; /* अक्षरों के बीच थोड़ी दूरी */
    text-shadow: 5px 5px 5px rgba(15, 33, 32, 0.5); /* हल्का टेक्स्ट शैडो */
    /* यहाँ बदलाव किया गया है: */
    transform: translateY(-30px); /* टेक्स्ट को 10px ऊपर सरकाएगा */
    /* आप -10px की जगह कोई भी ऋणात्मक मान दे सकते हैं, जैसे -5px या -15px,
       जितना ऊपर सरकाना हो उसके अनुसार। */
}

/* =================================
सोशल मीडिया शीर्षक स्टाइलिंग - समाप्त 🔼 🔼
================================= */

/* =================================
सेक्शन टाइटल के लिए मल्टीकलर अंडरलाइन एनिमेशन - प्रारंभ 🔽 🔽 यह कोड फुटर टाइटल के नीचे एक रंग-बिरंगी अंडरलाइन बनाता है, जो होवर करते ही धीरे-धीरे फैलती है।
================================= */

.footer-section-title::after {
    content: ''; /* स्यूडो-एलिमेंट के लिए आवश्यक */
    position: absolute;
    left: 50%; /* सेंटर में अलाइन करें */
    bottom: 0; /* टाइटल के ठीक नीचे */
    width: 0; /* शुरू में कोई चौड़ाई नहीं */
    height: 4px; /* अंडरलाइन की मोटाई */
    background: linear-gradient(90deg, #e74c3c, #f39c12, #2ecc71, #3498db, #9b59b6); /* मल्टीकलर ग्रेडिएंट: लाल, नारंगी, हरा, नीला, बैंगनी */
    transform: translateX(-50%); /* सेंटर में रखने के लिए */
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* स्मूथ ट्रांजीशन */
}

/* फुटर पर होवर करने पर टाइटल अंडरलाइन का विस्तार */
.site-footer:hover .footer-section-title::after {
    width: 70%; /* होवर पर अंडरलाइन का विस्तार */
}

/* =================================
सेक्शन टाइटल के लिए मल्टीकलर अंडरलाइन एनिमेशन - समाप्त 🔼 🔼
================================= */

/* =================================
वेबसाइट और डिक्शनरी लिंक्स के लिए स्टाइलिंग - प्रारंभ 🔽 🔽 यह कोड एक आकर्षक, रिस्पॉन्सिव लिंक ग्रिड बनाता है, जिसमें हर आइटम में आइकॉन और टेक्स्ट होते हैं। होवर करने पर आइटम उभरता है और आइकॉन थोड़ा घूमता है।
================================= */

.links-grid {
    display: grid; /* ग्रिड लेआउट का उपयोग करें */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* रिस्पॉन्सिव ग्रिड कॉलम */
    gap: 19px; /* ग्रिड आइटम्स के बीच गैप */
    max-width: 1000px; /* अधिकतम चौड़ाई */
    margin: 0 auto 30px auto; /* सेंटर में अलाइन और नीचे मार्जिन */
    padding: 50px;
    background-color: #bccab7; /* लिंक कंटेनर का बैकग्राउंड: हल्का ग्रे-हरा */
    border-radius: 10px; /* गोलीय किनारे */
    box-shadow: inset 0 0 10px rgba(32, 114, 150, 0.3); /* अंदर की ओर शैडो */
}

.website-link-item {
    display: flex; /* आइकॉन और टेक्स्ट को एक साथ रखें */
    flex-direction: column; /* आइकॉन के ऊपर टेक्स्ट */
    align-items: center; /* सेंटर में अलाइन करें */
    text-decoration: none; /* अंडरलाइन हटाएँ */
    color: #ff0000; /* टेक्स्ट का रंग: लाल */
    padding: 19px; /* आंतरिक पैडिंग */
    border-radius: 9px; /* गोलीय किनारे */
    background: linear-gradient(90deg, #3b81a8, #a0f4d1, #3b81a8); /* आइटम का बैकग्राउंड ग्रेडिएंट: समुद्री नीला, हल्का फिरोजी, समुद्री नीला */
    transition: all 0.3s ease-in-out; /* होवर पर स्मूथ ट्रांजीशन */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); /* हल्का शैडो */
}

.website-link-item:hover {
    background-color: #b573ff; /* होवर पर बैकग्राउंड गहरा करें: गहरा बैंगनी */
    transform: translateY(-7px) scale(1.12); /* ऊपर उठना और थोड़ा बड़ा होना */
    box-shadow: 0 9px 15px rgba(37, 55, 95, 0.6); /* गहरा शैडो */
}

.website-logo-icon {
    width: 50px; /* लोगो की चौड़ाई */
    height: 50px; /* लोगो की ऊंचाई */
    object-fit: contain; /* इमेज को कंटेनर में फिट करें */
    margin-bottom: 5px; /* लोगो और टेक्स्ट के बीच गैप */
    border-radius: 50%; /* लोगो को गोल करें */
    border: 2px solid #ffffff; /* लोगो के चारों ओर हरे रंग की बॉर्डर: गहरा समुद्री नीला */
    transition: transform 0.3s ease; /* होवर पर स्मूथ ट्रांजीशन */
}

.website-link-item:hover .website-logo-icon {
    transform: rotate(10deg); /* होवर पर लोगो को थोड़ा घुमाएँ */
}

.website-link-item .link-text {
    font-size: 1.50em; /* लिंक टेक्स्ट का फ़ॉन्ट साइज़ */
    white-space: nowrap; /* टेक्स्ट को एक ही लाइन में रखें */
    overflow: hidden; /* ओवरफ्लो टेक्स्ट को छिपाएँ */
    text-overflow: ellipsis; /* ओवरफ्लो टेक्स्ट के लिए एलिप्सिस (...) */
}

/* =================================
वेबसाइट और डिक्शनरी लिंक्स के लिए स्टाइलिंग - समाप्त 🔼 🔼
================================= */

/* =================================
मोबाइल ऐप्स सेक्शन के लिए स्टाइलिंग - प्रारंभ 🔽 🔽
पूरा कोड केवल मोबाइल ऐप्स को आकर्षक ढंग से दिखाने के लिए है, और सभी क्लासेस आपस में इसी कार्य से जुड़ी हुई हैं।
================================= */

.mobile-apps-section {
    padding: 30px 0;
    border-top: 0 5px 6px 7px solid rgba(215, 255, 255, 0.5); /* आंशिक रूप से पारदर्शी सफेद बॉर्डर */
    margin-top: 15px;
}

.app-items-container {
    display: flex; /* ऐप्स को एक साथ रखें */
    flex-wrap: wrap; /* छोटी स्क्रीन पर रैप करें */
    justify-content: center; /* सेंटर में अलाइन करें */
    gap: 15px; /* ऐप्स के बीच गैप */
    max-width: 900px;
    margin: 0 auto;
}

.app-item {
    text-align: center;
    background-color: #afa280; /* ऐप आइटम का बैकग्राउंड: हल्का भूरा */
    padding: 10px;
    border-radius: 37px;
    box-shadow: 0 4px 10px rgba(55, 65, 19, 0.9); /* गहरा हरा शैडो */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.app-item:hover {
    transform: translateY(-9px); /* होवर पर ऊपर उठाएँ */
    box-shadow: 0 10px 20px rgba(19, 95, 132, 0.5); /* नीला शैडो */
}

.app-name {
    font-size: 0.9em;
    font-weight: bold;
    color: #fffba2; /* ऐप नाम के लिए हल्का पीला */
    margin-bottom: 15px;
}

.app-icon {
    width: 100px; /* ऐप आइकॉन का साइज़ */
    height: 100px;
    border-radius: 20%; /* थोड़ा गोलीय किनारे */
    object-fit: cover;
    border: 3px solid #fffba2; /* ऐप आइकॉन के चारों ओर पीली बॉर्डर */
    transition: transform 0.3s ease;
}

.app-item:hover .app-icon {
    transform: scale(1.12); /* होवर पर ऐप आइकॉन थोड़ा बड़ा हो */
}

/* =================================
मोबाइल ऐप्स सेक्शन के लिए स्टाइलिंग - समाप्त 🔼 🔼
================================= */

/* =================================
YouTube चैनल के लिए विशेष स्टाइलिंग - प्रारंभ 🔽 🔽
यह कोड विशेष रूप से YouTube चैनल बटन के लिए है — जो सोशल आइकन की तरह दिखते हैं, लेकिन उनका डिज़ाइन, रंग और होवर प्रभाव अन्य सोशल आइकॉन्स से अलग रखा गया है।
================================= */

/* YouTube चैनल के आइटम्स के लिए कंटेनर */
.youtube-channels .social-icon {
    /* अब YouTube आइकनों को अलग तरह से स्टाइल करेंगे */
    display: flex;
    flex-direction: column; /* आइकॉन के नीचे टेक्स्ट */
    align-items: center;
    justify-content: center;
    width: 70px; /* बटन की चौड़ाई बढ़ाई */
    height: 70px; /* बटन की ऊंचाई बढ़ाई */
    border-radius: 50%; /* गोल बटन */
    background: linear-gradient(135deg, #59e1ff, #f6e6ff, #e8a8ff); /* YouTube बटन का बैकग्राउंड: हल्का नीला, ऑफ-व्हाइट, हल्का बैंगनी */
    color: #ff4646; /* टेक्स्ट का रंग: गहरा लाल */
    font-size: 0.9em; /* टेक्स्ट का साइज़ */
    padding: 10px; /* अंदरूनी पैडिंग */
    box-sizing: border-box; /* पैडिंग को चौड़ाई में शामिल करें */
    text-align: center; /* टेक्स्ट को केंद्र में करें */
}

/* YouTube आइकॉन को बटन के बाहर और ऊपर दिखाने के लिए */
.youtube-channels .social-icon i {
    font-size: 2.5em; /* YouTube आइकॉन का साइज़ */
    color: #FF0000; /* YouTube का लाल रंग */
    margin-bottom: 1px; /* आइकॉन और टेक्स्ट के बीच गैप */
    transition: transform 0.3s ease; /* होवर पर ट्रांजीशन */
}

/* YouTube आइकॉन पर होवर इफेक्ट */
.youtube-channels .social-icon i:hover {
    transform: translateY(-5px) scale(1.1); /* होवर पर थोड़ा ऊपर उठना और बड़ा होना */
}

/* YouTube चैनल नाम का टेक्स्ट */
.youtube-channels .social-icon .icon-text {
    margin-left: 0; /* कोई अतिरिक्त मार्जिन नहीं */
    white-space: normal; /* टेक्स्ट को मल्टीलाइन होने दें */
    overflow: visible; /* ओवरफ्लो को दृश्यमान रखें */
    text-overflow: clip; /* एलिप्सिस हटा दें */
    font-size: 0.25em; /* **बदलाव:** टेक्स्ट का साइज़ और छोटा किया गया */
    font-weight: bold;
    width: 100%; /* पूरी चौड़ाई लें */
}

/* YouTube चैनल बटन पर होवर इफेक्ट */
.youtube-channels .social-icon:hover {
    background: linear-gradient(135deg, #2551ff, #35dbff, #7d1083); /* होवर पर YouTube लाल ग्रेडिएंट: नीला, फिरोजी, गहरा बैंगनी */
    transform: translateY(-8px) scale(1.15); /* बाउंस इफेक्ट के साथ ऊपर उठना और बड़ा होना */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.6);
    filter: brightness(1.2);
    animation: none; /* होवर पर ग्रेडिएंट एनिमेशन बंद करें */
}

/* =================================
YouTube चैनल के लिए विशेष स्टाइलिंग - समाप्त 🔼 🔼
================================= */

/* =================================
सोशल मीडिया सेक्शन स्टाइलिंग - प्रारंभ 🔽 🔽
यह कोड केवल सोशल मीडिया सेक्शन (आइकन डिज़ाइन, लेआउट, कलर, एनिमेशन और होवर) के लिए है। इसमें कोई अन्य फीचर या विकल्प शामिल नहीं है।
================================= */

.social-media-section {
    padding: 30px 0;
    border-top: 1px solid rgba(1, 12, 27, 0.6); /* हल्का गहरा नीला बॉर्डर */
    margin-top: 30px;
}

.social-icons-container {
    display: flex;
    flex-direction: column; /* मोबाइल के लिए कॉलम */
    gap: 60px; /* पंक्तियों के बीच गैप */
    max-width: 900px;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
}

.social-icons-row {
    display: flex;
    flex-wrap: wrap; /* छोटी स्क्रीन पर रैप करने की अनुमति दें */
    justify-content: center;
    gap: 10px; /* आइकनों के बीच गैप */
    width: 100%;
}

/* सोशल आइकॉन के लिए मुख्य स्टाइलिंग */
/* यह सामान्य सोशल आइकनों (Facebook, Instagram, Twitter) के लिए है */
.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px; /* आइकॉन का साइज़ */
    height: 60px; /* आइकॉन का साइज़ */
    border-radius: 50%; /* गोल आकार */
    text-decoration: none;
    color: #fffff8; /* आइकॉन का रंग: ऑफ-व्हाइट */
    font-size: 1.9em; /* आइकॉन का फॉन्ट साइज़ */
    position: relative;
    overflow: hidden; /* बैकग्राउंड एनिमेशन के लिए */
    box-shadow: 0 10px 12px rgba(0, 0, 0, 0.7); /* गहरा शैडो */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease; /* बाउंस इफेक्ट के साथ स्मूथ ट्रांजीशन */
    background: linear-gradient(135deg, #46eeff, #FF5F6D, #729074, #976a51, #9949ff, #496bff); /* मल्टीकलर ग्रेडिएंट: फिरोजी, गहरा नारंगी, ग्रे-हरा, भूरा, बैंगनी, नीला */
    background-size: 400% 400%; /* एनिमेशन के लिए बड़ा बैकग्राउंड साइज़ */
    animation: pulse-gradient 10s ease infinite; /* एनिमेशन लागू करें */
}

/* मल्टीकलर बैकग्राउंड एनिमेशन के लिए कीफ्रेम्स */
@keyframes pulse-gradient {
    0% { background-position: 10% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* होवर इफेक्ट्स */
.social-icon:hover {
    transform: translateY(-8px) scale(1.15); /* बाउंस इफेक्ट के साथ ऊपर उठना और बड़ा होना */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.6); /* गहरा शैडो */
    animation: none; /* होवर पर ग्रेडिएंट एनिमेशन बंद करें */
    filter: brightness(1.2); /* होवर पर चमक बढ़ाएँ */
}

/* होवर पर स्पेसिफिक सोशल मीडिया आइकॉन कलर्स */
/* Facebook Icons */
.facebook-icon:hover,
.social-icon.fab.fa-facebook-f:hover, /* Facebook आइकॉन के लिए विशिष्ट */
.social-icon.fab.fa-facebook-square:hover { /* Facebook Square आइकॉन के लिए विशिष्ट */
    background: #006eff; /* Facebook नीला */
}

/* Instagram Icon */
.instagram-icon:hover,
.social-icon.fab.fa-instagram:hover { /* Instagram आइकॉन के लिए विशिष्ट */
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #d261ac 5%, #833AB4 45%, #5851DB 60%, #405DE6 90%); /* Instagram ग्रेडिएंट: पीला, गुलाबी, गहरा बैंगनी, गहरा नीला, नीला */
}

/* Twitter Icon */
.twitter-icon:hover,
.social-icon.fab.fa-twitter:hover { /* Twitter आइकॉन के लिए विशिष्ट */
    background: #1DA1F2; /* Twitter नीला */
}

/* होवर पर आइकॉन और टेक्स्ट का रंग सुनिश्चित करें */
.social-icon:hover i,
.social-icon:hover .icon-text {
    color: #ffffff; /* सुनिश्चित करें कि आइकॉन और टेक्स्ट सफेद रहें */
}

/* सोशल आइकॉन टेक्स्ट के लिए स्टाइलिंग (यूट्यूब चैनल के लिए नहीं, केवल अन्य के लिए यदि टेक्स्ट है) */
.social-icon .icon-text {
    margin-left: 12px; /* आइकॉन और टेक्स्ट के बीच गैप */
    font-size: 0.6em; /* टेक्स्ट का साइज़ */
    font-weight: 600; /* थोड़ा मोटा टेक्स्ट */
    white-space: nowrap; /* टेक्स्ट को एक ही लाइन में रखें */
    overflow: hidden; /* ओवरफ्लो टेक्स्ट को छिपाएँ */
    text-overflow: ellipsis; /* ओवरफ्लो टेक्स्ट के लिए एलिप्सिस (...) */
}

/* =================================
सोशल मीडिया सेक्शन स्टाइलिंग - समाप्त 🔼 🔼
================================= */

/* =================================
रिस्पॉन्सिवनेस के लिए मीडिया क्वेरीज स्टाइलिंग - प्रारंभ 🔽 🔽
यह CSS कोड डेस्कटॉप स्क्रीन (768px या उससे अधिक चौड़ाई) पर वेबसाइट के सोशल मीडिया सेक्शन को बेहतर ढंग से व्यवस्थित और बड़ा दिखाने के लिए है।
यह कोड सोशल मीडिया और यूट्यूब आइकॉन्स को डेस्कटॉप पर प्रोफेशनल, बड़ा और सुंदर ढंग से दिखाने के लिए बनाया गया है।
================================= */

@media (min-width: 768px) {
    /* डेस्कटॉप पर सोशल आइकॉन पंक्तियों को फ्लेक्सबॉक्स के रूप में दिखाएं */
    .social-icons-container {
        flex-direction: row; /* डेस्कटॉप पर पंक्तियों को क्षैतिज रूप से व्यवस्थित करें */
        justify-content: center;
        align-items: flex-start; /* ऊपर से अलाइन करें */
    }

    .social-icons-row {
        flex-basis: 50%; /* दो कॉलम लेआउट के लिए */
        margin: 0 3%; /* पंक्तियों के बीच थोड़ा गैप */
        gap: 20px; /* आइकनों के बीच गैप बढ़ाएँ */
    }

    /* YouTube चैनल में टेक्स्ट के साथ आइकनों के लिए चौड़ाई बढ़ाएं */
    .youtube-channels .social-icon {
        width: 110px; /* डेस्कटॉप पर YouTube बटन की चौड़ाई */
        height: 110px; /* डेस्कटॉप पर YouTube बटन की ऊंचाई */
        padding: 15px; /* पैडिंग बढ़ाएं */
        font-size: 1em; /* टेक्स्ट का साइज़ थोड़ा बड़ा करें */
    }

    /* अन्य सोशल आइकनों के लिए यदि आवश्यक हो */
    .social-icon {
        width: 70px;
        height: 70px;
    }
}

/* =================================
रिस्पॉन्सिवनेस के लिए मीडिया क्वेरीज स्टाइलिंग - समाप्त 🔼 🔼
================================= */

/* =================================
रिस्पॉन्सिवनेस के लिए मीडिया क्वेरीज स्टाइलिंग - प्रारंभ 🔽 🔽
(अतिरिक्त CSS एन्हांसमेंट्स)
फुटर लिंक को सुंदर और hover पर स्पष्ट दिखाने व सेक्शन में दूरी बनाए रखने के लिए है।
यह कोड वेबसाइट के footer (पाद लेख) में मौजूद लिंक्स की स्टाइलिंग और सेक्शन के बीच स्पेसिंग के लिए है।
================================= */

/* सामान्य लिंक स्टाइलिंग (यदि फुटर में अन्य टेक्स्ट लिंक हैं) */
.site-footer a {
    color: #87ceeb; /* हल्का नीला */
    text-decoration: none;
    transition: color 0.3s ease;
}

.site-footer a:hover {
    color: #aaffaaff; /* होवर पर थोड़ा हल्का */
    text-decoration: underline;
}

/* सेक्शन के बीच बेहतर स्पेसिंग */
.footer-section + .footer-section {
    margin-top: 50px;
}

/* =================================
रिस्पॉन्सिवनेस के लिए मीडिया क्वेरीज स्टाइलिंग - समाप्त 🔼 🔼
================================= */

/* =================================
Go to Top बटन को स्क्रॉलिंग पर दिखाने की स्टाइलिंग - प्रारंभ 🔽 🔽
================================ */

/* मुख्य Go to Top बटन */
#goTopBtn {
    position: fixed; /* पेज पर स्थायी स्थिति */
    bottom: 100px; /* नीचे से दूरी */
    right: 6px; /* दाएं से दूरी */
    padding: 10px 10px; /* अंदरूनी स्पेसिंग */
    font-size: 10px; /* टेक्स्ट का आकार */
    font-weight: bold; /* मोटा टेक्स्ट */
    color: #ffffff; /* सफेद रंग */
    background: linear-gradient(105deg, #ff007f, #ff8800, #f73aff); /* रंगीन ग्रेडिएंट बैकग्राउंड */
    border: none; /* बॉर्डर हटाना */
    border-radius: 19px; /* किनारों को गोल करना */
    cursor: pointer; /* माउस पॉइंटर */
    transition: all 0.3s ease-in-out; /* ट्रांजिशन प्रभाव */
    opacity: 0; /* आरंभ में अदृश्य */
    transform: scale(0.5); /* आरंभ में छोटा आकार */
    z-index: 99999; /* सभी एलिमेंट्स के ऊपर */
}

/* बटन दिखने पर एनिमेशन */
#goTopBtn.show {
    opacity: 1; /* पूर्ण रूप से दिखाना */
    transform: scale(1); /* सामान्य आकार में लाना */
}

/* बटन पर होवर करते समय प्रभाव */
#goTopBtn:hover {
    background: linear-gradient(45deg, #fa32ff, #ff8800, #ff007f); /* रंग बदलना */
    box-shadow: 3px 5px 19px rgba(5, 6, 0, 0.6); /* चमकदार छाया */
}

/* तीर (arrow) को एनिमेट करना */
.arrow {
    display: inline-block; /* इनलाइन-ब्लॉक एलिमेंट */
    margin-right: 5px; /* तीर और टेक्स्ट के बीच दूरी */
    animation: bounce 0.5s infinite alternate; /* बाउंसिंग एनीमेशन */
}

/* तीर के लिए एनिमेशन की कुंजी */
@keyframes bounce {
    from {
        transform: translateY(0px); /* मूल स्थिति */
    }
    to {
        transform: translateY(-5px); /* ऊपर की ओर हिलाना */
    }
}

/* =================================
Go to Top बटन को स्क्रॉलिंग पर दिखाने की स्टाइलिंग - समाप्त 🔼 🔼
================================= */

/* =================================
बाॅटम फुटर (कलरफुल, एनीमेटेड) काॅपीराइट सभी अधिकार सुरक्षित की स्टाइलिंग - प्रारंभ 🔽 🔽
================================ */

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 6px 0;
    color: #ffffff;
    text-align: center;
    font-size: 15px;
    font-family: 'Segoe UI', sans-serif;
    z-index: 9999;
    letter-spacing: 0.5px;
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease-in-out;

    /* वेबसाइट लोड होते समय नीचे से ऊपर आने वाला animation */
    animation: fadeUp 1s ease-out forwards;

    /* 🔁 लगातार रंग बदलते रहने वाला एनिमेटेड gradient background */
    background: linear-gradient(-90deg, #39003a, #330066, #21008f, #0007b7, #007dff);
    background-size: 400% 400%;
    animation-name: fadeUp, animatedBG;  /* दोनों animation जोड़ना */
    animation-duration: 1.5s, 10s;         /* पहले जल्दी, दूसरे बार-बार */
    animation-timing-function: ease-out, ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: 1, infinite;
}

/* 🔸 वेबसाइट लोडिंग पर fadeUp animation */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 🔸 लगातार रंग बदलने वाला एनिमेशन (Aurora style BG) */
@keyframes animatedBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* 🔸 होवर इफेक्ट: zoom और चमक */
footer:hover {
    transform: scale(1.01);
    box-shadow: 0 -5px 25px rgba(255, 255, 255, 0.4);
}

/* =================================
बाॅटम फुटर (कलरफुल, एनीमेटेड) काॅपीराइट सभी अधिकार सुरक्षित की स्टाइलिंग - समाप्त 🔼 🔼
================================= */

/* =================================
 MyHindi.in फुटर (कॉपीराइट, गोपनीयता नीति, नियम व शर्तें) स्टाइलिंग - प्रारंभ 🔽🔽
 यह style.css में आपके मौजूदा 'footer' स्टाइल के बाद जोड़ा जाएगा।
================================ */

/* मुख्य फुटर कंटेनर (मौजूदा फुटर स्टाइल में बदलाव न करें) */
.myhindi-footer {
    /* इस क्लास पर कोई अतिरिक्त स्टाइल न लगाएं यदि 'footer' टैग पर पहले से ही स्टाइल है।
       यह क्लास केवल HTML को साफ रखने के लिए जोड़ी गई है। */
}

/* फुटर के कंटेंट के लिए फ्लेक्सबॉक्स कंटेनर (ऊंचाई, संरेखण, गैप आदि को नियंत्रित करता है) */
.myhindi-footer-content {
    display: flex;
    justify-content: center; /* कंटेंट को हॉरिजॉन्टल सेंटर में रखें */
    align-items: center; /* कंटेंट को वर्टिकल सेंटर में रखें */
    flex-wrap: wrap; /* छोटे स्क्रीन पर आइटम्स को रैप करने की अनुमति दें */
    gap: 8px; /* आइटम्स के बीच थोड़ी जगह */
    padding: 0; /* इस div पर कोई अतिरिक्त पैडिंग नहीं */
    font-size: clamp(11px, 0.9vw, 14px); /* पूरे सेक्शन के लिए छोटा और रेस्पॉन्सिव फ़ॉन्ट साइज़ */
    color: rgba(255, 255, 255, 0.8); /* हल्का टेक्स्ट कलर */
    /* यदि फुटर की ऊंचाई अभी भी अधिक है, तो आप यहां top/bottom पैडिंग जोड़ सकते हैं
       या मुख्य 'footer' स्टाइल में 'padding: 6px 0;' को कम कर सकते हैं। */
}

/* कॉपीराइट टेक्स्ट के लिए स्टाइल */
.myhindi-footer-text {
    margin: 0;
    padding: 0;
    white-space: nowrap; /* टेक्स्ट को एक लाइन में रखें */
}

/* गोपनीयता नीति और नियम व शर्तें लिंक्स का कंटेनर */
.myhindi-footer-legal-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px; /* बटनों के बीच की जगह */
}

/* गोपनीयता नीति और नियम व शर्तें बटनों के लिए स्टाइल */
.myhindi-footer-button {
    border: 1px solid #feffda; /* हल्का बॉर्डर */
    border-radius: 23px; /* रेडियस युक्त बॉर्डर */
    text-decoration: none;
    color: inherit; /* पैरेंट से कलर इनहेरिट करें */
    padding: 3px 9px; /* बटन के अंदर पैडिंग */
    font-size: clamp(11px, 0.9vw, 14px); /* रेस्पॉन्सिव फ़ॉन्ट साइज़ */
    white-space: nowrap; /* टेक्स्ट को एक लाइन में रखें */
    transition: all 0.3s ease; /* होवर इफेक्ट के लिए ट्रांजीशन */
}

/* बटनों पर होवर इफेक्ट */
.myhindi-footer-button:hover {
    border-color: #ebff00; /* होवर पर बॉर्डर का रंग बदलें */
    color: #faff00f; /* होवर पर टेक्स्ट का रंग बदलें */
}

/* यह सुनिश्चित करने के लिए कि 'नियम व शर्तें' का होवर हरा हो, आप इसे ओवरराइड कर सकते हैं यदि आवश्यक हो */
.myhindi-footer-legal-links a:nth-child(2):hover {
    border-color: #fffc00;
    color: #ff2fd;
}

/* =================================
 MyHindi.in फुटर स्टाइलिंग - समाप्त 🔼🔼
================================ */

/* =================================
🧭 साइडबार मेन्यू एन्हांसमेंट - प्रारंभ 🔽 🔽
================================= */

/* साइडबार मेन्यू आइटम्स की बेहतर स्टाइलिंग */
#sidebarMenu .menu-item,
#sidebarMenu .menu-parent,
#sidebarMenu .menu-child {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    color: #333;
    text-decoration: none;
    border-radius: 8px;
    margin-bottom: 5px;
    transition: all 0.3s ease;
    font-weight: 500;
}

#sidebarMenu .menu-item:hover,
#sidebarMenu .menu-parent:hover,
#sidebarMenu .menu-child:hover {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    transform: translateX(5px);
}

#sidebarMenu .menu-item i,
#sidebarMenu .menu-parent i,
#sidebarMenu .menu-child i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

/* सबमेन्यू स्टाइलिंग */
#sidebarMenu .submenu {
    list-style: none;
    padding-left: 20px;
    margin-top: 5px;
    border-left: 2px solid #e0e0e0;
}

#sidebarMenu .submenu-arrow {
    margin-left: auto;
    transition: transform 0.3s ease;
}

/* स्क्रॉल ऑप्शन्स एन्हांसमेंट */
.scroll-option {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    margin: 0 5px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-weight: 500;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.scroll-option:hover {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.scroll-option i {
    margin-right: 8px;
}

/* =================================
📱 साइडबार मॉडल स्टाइलिंग - प्रारंभ 🔽 🔽
================================= */

/* मॉडल बैकग्राउंड */
.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease;
}

/* मॉडल कंटेंट */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 0;
    border: none;
    border-radius: 15px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s ease;
    overflow: hidden;
}

/* मॉडल हेडर */
.modal-header {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5em;
    font-weight: 600;
}

/* मॉडल बॉडी */
.modal-body {
    padding: 25px;
    max-height: 400px;
    overflow-y: auto;
    line-height: 1.6;
}

.modal-body p {
    margin-bottom: 15px;
}

/* मॉडल फूटर */
.modal-footer {
    background: #f8f9fa;
    padding: 15px 25px;
    text-align: right;
    border-top: 1px solid #e0e0e0;
}

/* क्लोज बटन */
.close {
    color: white;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.close:hover {
    color: #ffcccc;
    transform: scale(1.1);
}

/* मॉडल बटन्स */
.modal .btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.modal .btn-secondary {
    background: #6c757d;
    color: white;
}

.modal .btn-secondary:hover {
    background: #5a6268;
    transform: translateY(-2px);
}

/* मॉडल एनीमेशन्स */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* मोबाइल रेस्पॉन्सिव */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        margin: 10% auto;
    }

    .modal-header {
        padding: 15px;
    }

    .modal-header h2 {
        font-size: 1.3em;
    }

    .modal-body {
        padding: 20px;
        max-height: 300px;
    }

    .scroll-option {
        padding: 6px 12px;
        font-size: 0.9em;
    }
}

/* =================================
🧭 साइडबार मेन्यू एन्हांसमेंट - समाप्त 🔼 🔼
================================= */

/* =================================
📸 मीडिया गैलरी (होम पेज के बाटम में) css स्टाइल —  - प्रारंभ 🔽🔽
================================= */
.media-gallery-section {
    padding: 30px 0;
    background-color: #a7dcd3; /* पुराना बैकग्राउंड */
    margin-top: 15px;
    text-align: center;
}

/* शीर्षक */
.media-gallery-section h2 {
    text-align: center;
    color: #6900ff;                 /* पुराना हेडिंग कलर */
    font-size: 2em;
    margin-bottom: 25px;
    text-shadow: 1px 7px 9px rgba(95, 55, 42, 0.9); /* पुराना शैडो */
}

/* बॉक्स (स्क्रॉल सिर्फ बॉक्स में) */
.gallery-box {
    max-height: 242px;             /* ~500–600 जैसा पहले */
    overflow-y: auto;
    padding: 12px;
    border-radius: 15px;           /* पुराना बड़ा रेडियस */
    box-shadow: 1px 10px 7px rgba(95, 65, 19, 0.9); /* पुराना शैडो */
    max-width: 1200px;
    margin: 0 auto;
    background: #b5bdbc;           /* हल्का बैकग्राउंड */
}

/* ग्रिड (5-5 थंबनेल) */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5× */
    gap: 15px;
    justify-content: center;
}

/* आइटम (वर्गाकार) */
.gallery-item {
    position: relative;
    aspect-ratio: 1 / 1;           /* square */
    overflow: hidden;
    background-color: #b0b29b;     /* पुराना आइटम बैकग्राउंड */
    border-radius: 10px;           /* पुराना बड़ा रेडियस */
    box-shadow: 1px 10px 9px rgba(55, 65, 19, 0.9); /* पुराना शैडो */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

/* hover इफेक्ट (ऊपर उठना + शैडो) */
.gallery-item:hover {
    transform: translateY(-9px);   /* पुराना hover */
    box-shadow: 3px 10px 12px rgba(99, 55, 32, 0.9);
}

/* इमेज (ऐप आइकॉन जैसी बॉर्डर) */
.gallery-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;             /* थंबनेल square में fit */
    border-radius: 20%;            /* पुराना rounded look */
    border: 5px solid #1d9bbc;     /* पुरानी नीली बॉर्डर */
}

/* ————— Modal/Overlay (क्लिक पर फुल इमेज) ————— */

/* अगर आप overlay (img-overlay) JS इस्तेमाल कर रहे हैं */
.img-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    cursor: zoom-out;
}

.img-overlay img {
    max-width: 95vw;
    max-height: 90vh;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,.6);
    animation: zoom 0.6s ease;
}

/* अगर पुराने #imageModal स्ट्रक्चर भी पेज पर मौजूद हो तो उसकी लुक भी मैच हो जाएगी */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    inset: 0;
    background-color: rgba(0,0,0,0.9);
    justify-content: center;
    align-items: center;
}

.modal-content {
    width: auto;
    height: auto;
    max-width: 95vw;
    max-height: 90vh;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.6);
    animation: zoom 0.6s ease;
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

/* zoom एनिमेशन (पुराने जैसा) */
@keyframes zoom {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}

/* — वैकल्पिक: बहुत छोटे स्क्रीन पर चाहें तो कॉलम घटा दें — */
/* @media (max-width: 768px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } } */
/* @media (max-width: 480px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } } */

/* =================================
📸 मीडिया गैलरी (होम पेज के बाटम में) css स्टाइल — समाप्त 🔼🔼
================================= */

/* =================================
सोशल मीडिया सम्पूर्ण स्टाइलिंग - समाप्त 🔼🔼
================================= */