/* बेसिक रीसेट और बॉडी स्टाइलिंग */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  background-color: #f0f4f8; /* एक सॉफ्ट फॉलबैक रंग */
  background-image: linear-gradient(135deg, #8fd6e4 0%, #e7a9a9 100%);
  background-repeat: no-repeat;
  background-attachment: fixed; /* स्क्रॉल करने पर बैकग्राउंड को स्थिर रखता है */
  color: #212529;
}

/* हेडर और नेविगेशन */
header {
  background: linear-gradient(
    90deg,
    #1e3c72,
    #2a5298
  ); /* बेहतर नीला ग्रेडिएंट */
  color: #ffffff;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
}

.logo a {
  color: inherit; /* हेडर से रंग लेगा (सफ़ेद) */
  text-decoration: none; /* अंडरलाइन हटा देगा */
}

.navbar {
  display: flex;
  align-items: center;
}

/* ऊपर का नेविगेशन */
.nav-links {
  list-style: none;
  display: flex;
}

.nav-links li {
  padding: 0 1rem;
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  transition:
    color 0.3s,
    transform 0.2s;
  position: relative;
  padding: 5px 0; /* अंडरलाइन के लिए जगह */
}

.nav-links a:hover {
  color: #ffc107; /* पीला रंग */
}

.nav-links a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffc107;
  transition: width 0.3s ease-in-out;
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-links a:active {
  transform: translateY(1px); /* क्लिक एनीमेशन */
}

.hamburger-menu {
  display: none;
  font-size: 2rem;
  cursor: pointer;
}

/* Language Switcher */
.language-switcher-li {
  display: flex;
  align-items: center;
}
.language-switcher {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #fff;
  padding: 5px 10px;
  border-radius: 20px;
  margin-left: 1rem;
}
.language-switcher a {
  color: #fff;
  text-decoration: none;
  padding: 2px 5px;
  border-radius: 15px;
  transition:
    background-color 0.3s,
    color 0.3s;
  font-size: 0.9rem;
}

.language-switcher a:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.language-switcher a.active-lang {
  background-color: #ffc107; /* पीला रंग */
  color: #023e8a;
  font-weight: bold;
}
.language-switcher span {
  color: #fff;
  opacity: 0.7;
}

/* मुख्य कंटेंट */
main {
  padding: 2rem;
  text-align: center;
  transition: margin-left 0.4s ease; /* For smooth content push */
}

/* Side Menu Bar (Home Page Only) */
.side-menu-bar {
  position: fixed;
  left: 0;
  top: 85px; /* Header height + a little space */
  width: 240px;
  height: calc(100vh - 100px); /* Adjust height to not overlap footer */
  background: linear-gradient(
    to bottom,
    #77e5ef,
    #ffffff
  ); /* हल्का नीला ग्रेडिएंट */
  box-shadow: 4px 0 15px rgba(0, 0, 0, 0.08);
  padding: 1.5rem 1rem;
  border-radius: 0 12px 12px 0;
  z-index: 99;
  overflow-y: auto;
  transform: translateX(-100%); /* Initially hidden */
  transition: transform 0.4s ease; /* Smooth slide effect */
}

.side-menu-bar h3 {
  font-size: 1.2rem;
  color: #1e3c72; /* हेडर के रंग से मेल खाता हुआ */
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e0eafc; /* हल्का नीला बॉर्डर */
}

.side-menu-bar ul {
  list-style: none;
}

.side-menu-bar ul li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  color: #343a40;
  text-decoration: none;
  border-radius: 8px;
  margin-bottom: 8px;
  transition: all 0.3s ease; /* सभी गुणों को एनिमेट करें */
  font-size: 0.9rem;
  text-align: left;
}

.side-menu-bar ul li a:hover {
  background-color: #d6eaff; /* होवर के लिए थोड़ा गहरा नीला */
  color: #1e3c72; /* होवर पर गहरा नीला टेक्स्ट */
  transform: translateX(5px); /* थोड़ा दाईं ओर ले जाएं */
  box-shadow: 0 2px 8px rgba(30, 60, 114, 0.1); /* एक हल्की छाया जोड़ें */
}

.side-menu-bar ul li a:active {
  transform: scale(0.98) translateX(5px); /* क्लिक इफ़ेक्ट */
  background-color: #c0deff;
}

/* Side menu toggle button */
#side-menu-toggle {
  position: fixed;
  left: 15px;
  top: 85px;
  z-index: 100;
  background-color: #0056b3; /* हेडर के रंग से मेल खाता हुआ */
  color: white;
  border: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease;
}

/* When side menu is open */
body.side-menu-open .side-menu-bar {
  transform: translateX(0);
}
body.side-menu-open #side-menu-toggle {
  transform: translateX(250px); /* Move toggle button with menu */
}

/* सेवाओं का ग्रिड */
.services-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(280px, 1fr)
  ); /* यह साइज़ मोबाइल और टैबलेट के लिए है */
  gap: 2rem; /* बॉक्स के बीच की दूरी बढ़ाई गई */
  margin-bottom: 2rem;
  max-width: 960px; /* ग्रिड की चौड़ाई */
  margin-left: auto;
  margin-right: auto;
}

/* नोटिफिकेशन सिस्टम */
#notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

.notification {
  background: #fff;
  color: #333;
  border-left: 5px solid #0077b6;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  border-radius: 5px;
  opacity: 0;
  transform: translateX(100%);
  animation: slideIn 0.5s forwards;
}

.notification img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.services-grid .service-item {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(1, 255, 238); /* हल्का नीला बैकग्राउंड */
  padding: 2rem 1rem;
  text-decoration: none;
  color: #0361ef; /* गहरा नीला टेक्स्ट */
  font-weight: bold;
  font-size: 1.2rem; /* फॉन्ट साइज और बढ़ाया गया */
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(168, 36, 36, 0.1);
  transition: all 0.2s ease-out;
  border: 1px solid transparent; /* ऊपर और साइड के बॉर्डर को पारदर्शी रखें */
  border-bottom: 6px solid var(--border-color, #34ba28); /* 3D इफ़ेक्ट के लिए */
  position: relative; /* ड्रॉपडाउन के लिए आवश्यक */
  cursor: pointer;
  word-wrap: break-word; /* लंबे टेक्स्ट को रैप करने के लिए */
  margin-bottom: 6px; /* दबाने पर पेज को हिलने से रोकने के लिए */
}

.services-grid .service-item:hover {
  animation: none; /* होवर पर एनीमेशन रोकें */
  transform: translateY(-8px); /* होवर इफ़ेक्ट को और स्पष्ट करें */
  box-shadow: 0 8px 20px rgba(var(--shadow-color, 0, 119, 182), 0.2);
  border-bottom-width: 6px;
}

.services-grid .service-item:active {
  transform: translateY(2px); /* बटन को नीचे दबाने का इफ़ेक्ट */
  box-shadow: 0 2px 5px rgba(var(--shadow-color, 0, 119, 182), 0.2);
  border-bottom-width: 2px; /* 3D इफ़ेक्ट को कम करें */
}

/* New Tag Style */
.new-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: #e63946; /* एक आकर्षक लाल रंग */
  color: white;
  padding: 3px 8px;
  border-radius: 20px; /* गोली जैसा आकार */
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
  animation: pulse-animation 1.5s infinite;
  box-shadow: 0 0 8px rgba(230, 57, 70, 0.7);
}

@keyframes pulse-animation {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.services-grid .service-item {
  animation: bobbing 3.5s ease-in-out infinite;
}

/* Multi-link Service Item (RTI etc) */
.services-grid .service-item.multi-links {
  flex-direction: column;
  padding: 1.5rem 1rem;
}

.service-item.multi-links .multi-title {
  margin-bottom: 15px;
  font-size: 1.2rem;
  text-align: center;
}

.service-item.multi-links .sub-links-container {
  display: flex;
  gap: 10px;
  width: 100%;
  justify-content: center;
}

.service-item.multi-links .sub-link {
  background: rgba(255, 255, 255, 0.25);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  color: inherit;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.2s ease;
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-item.multi-links .sub-link:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* एनीमेशन में भिन्नता के लिए */
.services-grid .service-item:nth-child(even) {
  animation-duration: 4s;
}
.services-grid .service-item:nth-child(3n) {
  animation-delay: 0.3s;
}

/* आइकॉन वाले बॉक्स के लिए स्टाइल */
.service-item.with-icon {
  flex-direction: column;
  justify-content: center;
}

.service-item.with-icon .service-item-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
}

.service-item.with-icon .service-item-icons img {
  height: 50px;
  margin: 0 10px;
}

/* ड्रॉपडाउन के लिए स्टाइल */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 10;
  border-radius: 0 0 8px 8px;
  overflow: hidden; /* To make border-radius work on children */
}

.dropdown-content a {
  /* .services-grid a से स्टाइल रीसेट करें */
  display: block;
  background: #f9f9f9;
  padding: 12px 16px;
  font-weight: normal;
  box-shadow: none;
  border-radius: 0;
  text-align: left;
  transition: background-color 0.2s;
}

.dropdown-content a:hover {
  background-color: #ddd;
  transform: none;
  box-shadow: none;
}
.dropdown-content.show {
  display: block; /* JavaScript से टॉगल करने के लिए */
}

/* बटन और कर्सर स्टाइल */
#show-notification-btn {
  background-color: #0056b3; /* हेडर के रंग से मेल खाता हुआ */
  color: white;
  border: none;
  padding: 12px 24px;
  font-size: 1rem;
  border-radius: 50px;
  cursor: pointer;
  transition:
    background-color 0.3s,
    transform 0.2s;
  box-shadow: 0 4px 10px rgba(0, 86, 179, 0.3); /* नए रंग के अनुसार शैडो */
  margin-bottom: 2rem;
}

#show-notification-btn:hover {
  background-color: #003d80; /* गहरे नीले पर होवर */
  transform: scale(1.05);
}

.page-title {
  margin-bottom: 2rem;
  color: #023e8a;
}

.back-link {
  display: inline-block;
  margin-top: 2rem;
  padding: 10px 20px;
  background-color: #6c757d;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.back-link:hover {
  background-color: #5a6268;
}

/* WhatsApp Contact Button Styling (Contact Page) */
.whatsapp-contact-wrapper {
  margin-top: 2rem;
}

.whatsapp-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: #25d366;
  color: #fff;
  padding: 12px 25px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.whatsapp-contact-btn img {
  width: 32px;
  height: 32px;
}

.whatsapp-contact-btn:hover {
  background-color: #128c7e;
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.5);
  color: #fff;
}

footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 1.5rem;
  margin-top: 2rem;
}

.social-media-links {
  margin-bottom: 1rem;
}

.social-media-links a {
  margin: 0 10px;
  display: inline-block;
  transition: transform 0.3s ease;
}

.social-media-links a:hover {
  transform: scale(1.15) translateY(-2px);
}

.social-media-links img {
  width: 36px;
  height: 36px;
}

.slogan {
  font-size: 1rem; /* फॉन्ट साइज सामान्य किया गया */
  color: #ffffff; /* रंग को सफेद किया गया */
  margin-bottom: 1rem;
  font-weight: normal; /* बोल्ड हटाया गया */
}

.visitor-counter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.4);
  padding: 8px 20px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: 15px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.visitor-counter:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.3);
}

.visitor-counter i.visitor-icon::before {
  content: '👤';
  font-style: normal;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}

#visitor-count {
  font-weight: bold;
  color: #ffc107;
  font-size: 1.1rem;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(255, 193, 7, 0.3);
}

/* मोबाइल/टैबलेट के लिए रिस्पॉन्सिव डिज़ाइन */
@media (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 60px; /* हेडर की ऊंचाई */
    left: 0;
    background: #444;
    text-align: center;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links li {
    padding: 1rem 0;
  }

  .hamburger-menu {
    display: block;
  }

  .hero-banner {
    padding: 3rem 1rem;
  }
  .hero-content h1 {
    font-size: 2rem;
  }
  .hero-content p {
    font-size: 1rem;
  }

  main {
    padding: 1rem; /* मोबाइल पर पैडिंग कम की गई */
  }

  .live-calendar-container {
    display: none; /* मोबाइल पर कैलेंडर छिपाएं */
  }

  .language-switcher {
    margin-left: 0;
  }

  .services-grid {
    grid-template-columns: 1fr; /* मोबाइल पर एक कॉलम का लेआउट */
    gap: 1rem;
  }

  .page-title {
    font-size: 1.8rem;
  }

  .info-box-aadhaar,
  .info-box-ayushman,
  .info-box-pancard,
  .info-box-rasancard,
  .info-box-voterid,
  .info-box-eshram,
  .info-box-pmuy,
  .info-box-mahtarivandan,
  .info-box-pmvishwakarma,
  .info-box-mgnrega,
  .info-box-samiti,
  .info-box-kisan,
  .info-box-umang,
  .info-box-jjm,
  .info-box-dbt,
  .info-box-jobs,
  .info-box-rojgar,
  .info-box-mudra,
  .info-box-banking,
  .info-box-movies,
  .info-box-billpayment,
  .info-box-bijli,
  .info-box-shopping,
  .info-box-itr,
  .info-box-pmkisan,
  .info-box-parivahan,
  .info-box-shram,
  .info-box-scholarship,
  .info-box-azimpremji,
  .info-box-vyapam,
  .info-box-iti,
  .info-box-mahilabalvikas,
  .info-box-bhuiya,
  .info-box-hsrp,
  .info-box-bhunaksha,
  .info-box-travel,
  .info-box-recharge,
  .info-box-cibil,
  .info-box-pm-awas-gramin,
  .info-box-pm-awas-shahri,
  .info-box-epfo {
    padding: 1rem;
    font-size: 1rem;
  }
}

/* डेस्कटॉप और बड़े स्क्रीन के लिए */
@media (min-width: 992px) {
  .services-grid {
    grid-template-columns: repeat(
      auto-fit,
      minmax(320px, 1fr)
    ); /* बॉक्स का न्यूनतम आकार थोड़ा कम किया गया */
    max-width: 1200px; /* ग्रिड की चौड़ाई बढ़ाई गई */
  }
}

/* About Page Content */
.about-content {
  max-width: 800px;
  margin: 2rem auto;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  padding: 0 1rem;
}
.about-content p {
  margin-bottom: 1rem;
}
.about-content h2 {
  font-size: 1.5rem;
  color: #0077b6;
  margin-top: 2rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #e9ecef;
  padding-bottom: 0.5rem;
}
.about-content ul {
  list-style-position: inside;
  margin-bottom: 1rem;
  padding-left: 1rem;
  text-align: left;
}
.disclaimer-box {
  background-color: #fff3cd;
  border-left: 5px solid #ffc107;
  color: #0f31c4;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  margin-top: 2.5rem;
}

/* Page Description (for service pages) */
.page-description {
  max-width: 800px;
  margin: 0 auto 2.5rem auto;
  font-size: 1.1rem;
  line-height: 1.7;
}

/* Service Descriptions Box */
.service-descriptions {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem 2rem;
  background-color: #fefae0; /* हल्का पीला बैकग्राउंड */
  border-left: 6px solid #109239; /* भूरा बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
}
.service-descriptions h3 {
  color: #bc6c25;
  margin-bottom: 1rem;
}
.service-descriptions ul {
  list-style-position: inside;
  padding-left: 0;
}

/* Aadhaar Info Box */
.info-box-aadhaar {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #e6f7ff; /* हल्का नीला बैकग्राउंड */
  border-left: 6px solid #0077b6; /* नीला बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(0, 119, 182, 0.1);
}
.info-box-aadhaar h3 {
  color: #0056b3;
  margin-bottom: 1rem;
}

/* Ayushman Info Box */
.info-box-ayushman {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #e8f5e9; /* हल्का हरा बैकग्राउंड */
  border-left: 6px solid #3398cb; /* हरा बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.15);
}
.info-box-ayushman h3 {
  color: #2e7d32; /* गहरा हरा टेक्स्ट */
  margin-bottom: 1rem;
}

/* PAN Card Info Box */
.info-box-pancard {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #fff8e1; /* हल्का पीला/क्रीम बैकग्राउंड */
  border-left: 6px solid #0a8f8f; /* नारंगी बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(255, 143, 0, 0.15);
}
.info-box-pancard h3 {
  color: #c56000; /* गहरा नारंगी टेक्स्ट */
  margin-bottom: 1rem;
}

/* Ration Card Info Box */
.info-box-rasancard {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #fde8e8; /* हल्का लाल बैकग्राउंड */
  border-left: 6px solid #c9184a; /* गहरा लाल बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(201, 24, 74, 0.15);
}
.info-box-rasancard h3 {
  color: #a4133c; /* गहरा लाल टेक्स्ट */
  margin-bottom: 1rem;
}

/* Voter ID Info Box */
.info-box-voterid {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #f3e8ff; /* हल्का बैंगनी बैकग्राउंड */
  border-left: 6px solid #6a0dad; /* बैंगनी बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(106, 13, 173, 0.15);
}
.info-box-voterid h3 {
  color: #4a0072; /* गहरा बैंगनी टेक्स्ट */
  margin-bottom: 1rem;
}

/* e-Shram Info Box */
.info-box-eshram {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #eef2f7; /* हल्का नीला-ग्रे बैकग्राउंड */
  border-left: 6px solid #607d8b; /* नीला-ग्रे बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(96, 125, 139, 0.15);
}
.info-box-eshram h3 {
  color: #37474f; /* गहरा नीला-ग्रे टेक्स्ट */
  margin-bottom: 1rem;
}

/* PMUY Info Box */
.info-box-pmuy {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #fff3e0; /* हल्का नारंगी बैकग्राउंड */
  border-left: 6px solid #ff9800; /* नारंगी बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(255, 152, 0, 0.15);
}
.info-box-pmuy h3 {
  color: #e65100; /* गहरा नारंगी टेक्स्ट */
  margin-bottom: 1rem;
}

/* Mahtari Vandan Info Box */
.info-box-mahtarivandan {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #fce4ec; /* हल्का गुलाबी बैकग्राउंड */
  border-left: 6px solid #ec407a; /* गुलाबी बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(236, 64, 122, 0.15);
}
.info-box-mahtarivandan h3 {
  color: #c2185b; /* गहरा गुलाबी टेक्स्ट */
  margin-bottom: 1rem;
}

/* PM Vishwakarma Info Box */
.info-box-pmvishwakarma {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #ede7f6; /* हल्का लैवेंडर बैकग्राउंड */
  border-left: 6px solid #7e57c2; /* लैवेंडर बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(126, 87, 194, 0.15);
}
.info-box-pmvishwakarma h3 {
  color: #512da8; /* गहरा लैवेंडर टेक्स्ट */
  margin-bottom: 1rem;
}

/* MGNREGA Info Box */
.info-box-mgnrega {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #f1f8e9; /* हल्का हरा-पीला बैकग्राउंड */
  border-left: 6px solid #3d69d7; /* हरा-पीला बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(156, 204, 101, 0.15);
}
.info-box-mgnrega h3 {
  color: #689f38; /* गहरा हरा-पीला टेक्स्ट */
  margin-bottom: 1rem;
}

/* Samiti Panjiyan Info Box */
.info-box-samiti {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #e3f2fd; /* बहुत हल्का नीला बैकग्राउंड */
  border-left: 6px solid #42a5f5; /* नीला बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(66, 165, 245, 0.15);
}
.info-box-samiti h3 {
  color: #1e88e5; /* गहरा नीला टेक्स्ट */
  margin-bottom: 1rem;
}

/* Kisan Info Box */
.info-box-kisan {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #e8f5e9; /* हल्का हरा बैकग्राउंड */
  border-left: 6px solid #66bb6a; /* हरा बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(102, 187, 106, 0.15);
}
.info-box-kisan h3 {
  color: #388e3c; /* गहरा हरा टेक्स्ट */
  margin-bottom: 1rem;
}

/* UMANG Info Box */
.info-box-umang {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #e0f7fa; /* हल्का सियान बैकग्राउंड */
  border-left: 6px solid #00acc1; /* सियान बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(0, 172, 193, 0.15);
}
.info-box-umang h3 {
  color: #007c91; /* गहरा सियान टेक्स्ट */
  margin-bottom: 1rem;
}

/* Jal Jeevan Mission Info Box */
.info-box-jjm {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #e0f2f1; /* हल्का टील बैकग्राउंड */
  border-left: 6px solid #26a69a; /* टील बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(38, 166, 154, 0.15);
}
.info-box-jjm h3 {
  color: #00695c; /* गहरा टील टेक्स्ट */
  margin-bottom: 1rem;
}

/* DBT Link Info Box */
.info-box-dbt {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #f9fbe7; /* हल्का लाइम बैकग्राउंड */
  border-left: 6px solid #c0ca33; /* लाइम बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(192, 202, 51, 0.15);
}
.info-box-dbt h3 {
  color: #827717; /* गहरा लाइम टेक्स्ट */
  margin-bottom: 1rem;
}

/* Jobs Portal Info Box */
.info-box-jobs {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #eceff1; /* नीला-ग्रे बैकग्राउंड */
  border-left: 6px solid #78909c; /* नीला-ग्रे बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(120, 144, 156, 0.15);
}
.info-box-jobs h3 {
  color: #455a64; /* गहरा नीला-ग्रे टेक्स्ट */
  margin-bottom: 1rem;
}

/* Rojgar Panjiyan Info Box */
.info-box-rojgar {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #fffde7; /* हल्का पीला बैकग्राउंड */
  border-left: 6px solid #ffc107; /* पीला बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(255, 193, 7, 0.15);
}
.info-box-rojgar h3 {
  color: #ff8f00; /* गहरा पीला/नारंगी टेक्स्ट */
  margin-bottom: 1rem;
}

/* Mudra Loan Info Box */
.info-box-mudra {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #fffbe6; /* हल्का पीला बैकग्राउंड */
  border-left: 6px solid #f59e0b; /* पीला बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.15);
}
.info-box-mudra h3 {
  color: #b45309; /* गहरा पीला/भूरा टेक्स्ट */
  margin-bottom: 1rem;
}

/* Banking Info Box */
.info-box-banking {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #eff6ff; /* बहुत हल्का नीला बैकग्राउंड */
  border-left: 6px solid #3b82f6; /* नीला बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.15);
}
.info-box-banking h3 {
  color: #1d4ed8; /* गहरा नीला टेक्स्ट */
  margin-bottom: 1rem;
}

/* Movies Info Box */
.info-box-movies {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #fef2f2; /* बहुत हल्का लाल बैकग्राउंड */
  border-left: 6px solid #ef4444; /* लाल बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.15);
}
.info-box-movies h3 {
  color: #b91c1c; /* गहरा लाल टेक्स्ट */
  margin-bottom: 1rem;
}

/* Bill Payment Info Box */
.info-box-billpayment {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #f0f9ff; /* बहुत हल्का नीला बैकग्राउंड */
  border-left: 6px solid #0ea5e9; /* सियान नीला बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.15);
}
.info-box-billpayment h3 {
  color: #0369a1; /* गहरा सियान नीला टेक्स्ट */
  margin-bottom: 1rem;
}

/* Bijli Vibhag Info Box */
.info-box-bijli {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #fefce8; /* बहुत हल्का पीला बैकग्राउंड */
  border-left: 6px solid #eab308; /* पीला बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(234, 179, 8, 0.15);
}
.info-box-bijli h3 {
  color: #a16207; /* गहरा पीला/भूरा टेक्स्ट */
  margin-bottom: 1rem;
}

/* Online Shopping Info Box */
.info-box-shopping {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #f3e8ff; /* हल्का बैंगनी बैकग्राउंड */
  border-left: 6px solid #9333ea; /* बैंगनी बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(147, 51, 234, 0.15);
}
.info-box-shopping h3 {
  color: #6b21a8; /* गहरा बैंगनी टेक्स्ट */
  margin-bottom: 1rem;
}

/* ITR Info Box */
.info-box-itr {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #f0fdf4; /* बहुत हल्का हरा बैकग्राउंड */
  border-left: 6px solid #22c55e; /* हरा बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.15);
}
.info-box-itr h3 {
  color: #15803d; /* गहरा हरा टेक्स्ट */
  margin-bottom: 1rem;
}

/* PM Kisan Info Box */
.info-box-pmkisan {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #f0fdf4; /* बहुत हल्का हरा बैकग्राउंड */
  border-left: 6px solid #84cc16; /* हल्का हरा बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(132, 204, 22, 0.15);
}
.info-box-pmkisan h3 {
  color: #4d7c0f; /* गहरा हरा टेक्स्ट */
  margin-bottom: 1rem;
}

/* Parivahan Info Box */
.info-box-parivahan {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #fff7ed; /* बहुत हल्का नारंगी बैकग्राउंड */
  border-left: 6px solid #f97316; /* नारंगी बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(249, 115, 22, 0.15);
}
.info-box-parivahan h3 {
  color: #c2410c; /* गहरा नारंगी टेक्स्ट */
  margin-bottom: 1rem;
}

/* Shram Vibhag Info Box */
.info-box-shram {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #eceff1; /* नीला-ग्रे बैकग्राउंड */
  border-left: 6px solid #546e7a; /* गहरा नीला-ग्रे बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(84, 110, 122, 0.15);
}
.info-box-shram h3 {
  color: #263238; /* बहुत गहरा नीला-ग्रे टेक्स्ट */
  margin-bottom: 1rem;
}

/* Scholarship Info Box */
.info-box-scholarship {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #e3f2fd; /* बहुत हल्का नीला बैकग्राउंड */
  border-left: 6px solid #1e88e5; /* नीला बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(30, 136, 229, 0.15);
}
.info-box-scholarship h3 {
  color: #0d47a1; /* गहरा नीला टेक्स्ट */
  margin-bottom: 1rem;
}

/* Azim Premji Scholarship Info Box */
.info-box-azimpremji {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #f3e5f5; /* हल्का बैंगनी बैकग्राउंड */
  border-left: 6px solid #8e24aa; /* बैंगनी बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(142, 36, 170, 0.15);
}
.info-box-azimpremji h3 {
  color: #6a1b9a; /* गहरा बैंगनी टेक्स्ट */
  margin-bottom: 1rem;
}

/* Vyapam Info Box */
.info-box-vyapam {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #f1f8e9; /* हल्का हरा-पीला बैकग्राउंड */
  border-left: 6px solid #7cb342; /* हरा-पीला बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(124, 179, 66, 0.15);
}
.info-box-vyapam h3 {
  color: #558b2f; /* गहरा हरा-पीला टेक्स्ट */
  margin-bottom: 1rem;
}

/* ITI Info Box */
.info-box-iti {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #fff8e1; /* हल्का पीला/क्रीम बैकग्राउंड */
  border-left: 6px solid #ffb300; /* नारंगी/पीला बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(255, 179, 0, 0.15);
}
.info-box-iti h3 {
  color: #c56000; /* गहरा नारंगी टेक्स्ट */
  margin-bottom: 1rem;
}

/* Mahila Bal Vikas Info Box */
.info-box-mahilabalvikas {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #fce4ec; /* हल्का गुलाबी बैकग्राउंड */
  border-left: 6px solid #ad1457; /* गहरा गुलाबी बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(173, 20, 87, 0.15);
}
.info-box-mahilabalvikas h3 {
  color: #880e4f; /* बहुत गहरा गुलाबी टेक्स्ट */
  margin-bottom: 1rem;
}

/* Bhuiya Info Box */
.info-box-bhuiya {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #f1f8e9; /* हल्का हरा-पीला बैकग्राउंड */
  border-left: 6px solid #558b2f; /* गहरा हरा-पीला बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(85, 139, 47, 0.15);
}
.info-box-bhuiya h3 {
  color: #33691e; /* बहुत गहरा हरा-पीला टेक्स्ट */
  margin-bottom: 1rem;
}

/* HSRP Info Box */
.info-box-hsrp {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #e8eaf6; /* हल्का इंडिगो बैकग्राउंड */
  border-left: 6px solid #3949ab; /* इंडिगो बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(57, 73, 171, 0.15);
}
.info-box-hsrp h3 {
  color: #1a237e; /* गहरा इंडिगो टेक्स्ट */
  margin-bottom: 1rem;
}

/* Bhu-Naksha Info Box */
.info-box-bhunaksha {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #f1f8e9; /* हल्का हरा-पीला बैकग्राउंड */
  border-left: 6px solid #9ccc65; /* हल्का हरा बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(156, 204, 101, 0.15);
}
.info-box-bhunaksha h3 {
  color: #558b2f; /* गहरा हरा-पीला टेक्स्ट */
  margin-bottom: 1rem;
}

/* Travel Info Box */
.info-box-travel {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #e0f7fa; /* हल्का सियान बैकग्राउंड */
  border-left: 6px solid #26c6da; /* सियान बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(38, 198, 218, 0.15);
}
.info-box-travel h3 {
  color: #00838f; /* गहरा सियान टेक्स्ट */
  margin-bottom: 1rem;
}

/* Recharge Info Box */
.info-box-recharge {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #f3e5f5; /* हल्का बैंगनी बैकग्राउंड */
  border-left: 6px solid #ab47bc; /* बैंगनी बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(171, 71, 188, 0.15);
}
.info-box-recharge h3 {
  color: #7b1fa2; /* गहरा बैंगनी टेक्स्ट */
  margin-bottom: 1rem;
}

/* CIBIL Info Box */
.info-box-cibil {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #fafafa; /* बहुत हल्का ग्रे बैकग्राउंड */
  border-left: 6px solid #757575; /* ग्रे बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(117, 117, 117, 0.15);
}
.info-box-cibil h3 {
  color: #424242; /* गहरा ग्रे टेक्स्ट */
  margin-bottom: 1rem;
}

/* PM Awas Gramin Info Box */
.info-box-pm-awas-gramin {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #e8f5e9; /* हल्का हरा बैकग्राउंड */
  border-left: 6px solid #4caf50; /* हरा बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.15);
}
.info-box-pm-awas-gramin h3 {
  color: #2e7d32; /* गहरा हरा टेक्स्ट */
  margin-bottom: 1rem;
}

/* PM Awas Shahri Info Box */
.info-box-pm-awas-shahri {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #e3f2fd; /* हल्का नीला बैकग्राउंड */
  border-left: 6px solid #2196f3; /* नीला बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(33, 150, 243, 0.15);
}
.info-box-pm-awas-shahri h3 {
  color: #1565c0; /* गहरा नीला टेक्स्ट */
  margin-bottom: 1rem;
}

/* EPFO Info Box */
.info-box-epfo {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #fff9c4; /* बहुत हल्का पीला बैकग्राउंड */
  border-left: 6px solid #fbc02d; /* पीला बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(251, 192, 45, 0.15);
}
.info-box-epfo h3 {
  color: #f57f17; /* गहरा पीला/नारंगी टेक्स्ट */
  margin-bottom: 1rem;
}

/* EPFO Info Box */
.info-box-epfo {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 1.5rem;
  background-color: #fff9c4; /* बहुत हल्का पीला बैकग्राउंड */
  border-left: 6px solid #fbc02d; /* पीला बायां बॉर्डर */
  border-radius: 8px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.8;
  animation: fadeIn-up 0.6s ease-out;
  box-shadow: 0 4px 15px rgba(251, 192, 45, 0.15);
}
.info-box-epfo h3 {
  color: #f57f17; /* गहरा पीला/नारंगी टेक्स्ट */
  margin-bottom: 1rem;
}

/* Hero Banner Styles */
.hero-banner {
  background:
    linear-gradient(rgba(24, 53, 101, 0.7), rgba(30, 60, 114, 0.9)),
    url("https://images.unsplash.com/photo-1521791136064-7986c2920216?q=80&w=2070&auto=format&fit=crop");
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
  padding: 4rem 2rem;
  margin-bottom: 2rem;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.hero-content h1 {
  font-size: 2.5rem;
  font-weight: 700;
  /* इंद्रधनुषी रंग के लिए */
  background: linear-gradient(
    90deg,
    #ff0000,
    #ff7300,
    #fffb00,
    #48ff00,
    #00ffd5,
    #002bff,
    #7a00ff,
    #ff00c8,
    #ff0000
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* टाइपिंग एनीमेशन के लिए */
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 0.1em solid #ffc107; /* Cursor color */
  max-width: 100%; /* यह सुनिश्चित करेगा कि यह कंटेनर से बाहर न जाए */
  margin: 0 auto 1rem;
  letter-spacing: 0.1rem;
  animation:
    typing 3s steps(30, end),
    blink-caret 0.75s step-end infinite,
    rainbow-text 5s linear infinite;
}

.hero-content p {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto;
  /* इंद्रधनुषी रंग के लिए */
  background: linear-gradient(
    90deg,
    #00ffd5,
    #002bff,
    #7a00ff,
    #ff00c8,
    #ff0000,
    #ff7300,
    #fffb00,
    #48ff00,
    #00ffd5
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* एनीमेशन */
  animation: rainbow-text 5s linear infinite;
}

.hero-programmer-name {
  font-size: 1.3rem;
  font-weight: bold;
  color: #ffc107; /* Accent yellow color */
  margin-top: 1rem;
  letter-spacing: 1px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.coder-icon {
  font-family: "Courier New", Courier, monospace;
  font-size: 1.5rem;
  color: #80ed99; /* Light green color */
}

.whatsapp-hero-link {
  display: inline-block;
  margin-top: 1.5rem;
  transition: transform 0.3s ease;
}

.whatsapp-hero-link:hover {
  transform: scale(1.15);
}

.whatsapp-hero-link img {
  width: 48px;
  height: 48px;
  width: 36px;
  height: 36px;
}

/* Contact Page Styles */
.contact-container {
  max-width: 900px;
  margin: 2rem auto;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 3rem;
  text-align: left;
  padding: 1rem;
}

.contact-info h3,
.contact-form h3 {
  font-size: 1.5rem;
  color: #0077b6;
  margin-bottom: 1rem;
}

.contact-info p {
  margin-bottom: 1rem;
  line-height: 1.7;
}

.contact-form .form-group {
  margin-bottom: 1.5rem;
}

.contact-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #0077b6;
  box-shadow: 0 0 5px rgba(0, 119, 182, 0.5);
}

.contact-form .submit-btn {
  display: inline-block;
  background-color: #0077b6;
  color: white;
  border: none;
  padding: 12px 30px;
  font-size: 1.1rem;
  border-radius: 50px;
  cursor: pointer;
  transition:
    background-color 0.3s,
    transform 0.2s;
}

.contact-form .submit-btn:hover {
  background-color: #023e8a;
  transform: scale(1.05);
}

/* Live Calendar Styles */
.live-calendar-container {
  /* कोने में रखने के लिए स्टाइल */
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  width: 280px; /* कैलेंडर की चौड़ाई कम की गई */

  /* डिज़ाइन में बदलाव */
  padding: 15px; /* पैडिंग कम की गई */
  background: #ffffff;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  text-align: center;
  transition: all 0.4s ease-in-out;
}

@media (max-width: 768px) {
  /* ... other responsive styles ... */
  .contact-container {
    grid-template-columns: 1fr;
  }
  .hero-content h1,
  .hero-content p {
    white-space: normal; /* मोबाइल पर टाइपिंग के बाद टेक्स्ट को रैप करने की अनुमति दें */
    width: auto; /* एनीमेशन के बाद पूरी चौड़ाई लेने दें */
    border-right: none; /* मोबाइल पर टाइपिंग कर्सर हटा दें */
  }
}

.live-calendar-container:hover {
  transform: translateY(-5px); /* होवर पर थोड़ा ऊपर उठेगा */
}

.live-calendar-header {
  color: #fff;
  background: linear-gradient(90deg, #023e8a, #0077b6);
  padding: 8px 12px;
  border-radius: 15px 15px 0 0;
  margin: -15px -15px 10px -15px; /* पैडिंग के अनुसार एडजस्ट किया गया */
}

#live-clock {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  margin-top: 8px;
}

.panchang-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}

.panchang-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  color: #fff;
}

.vs-year {
  font-size: 0.75rem;
  opacity: 0.9;
  font-weight: 500;
}

.calendar-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 4px 10px;
  margin-bottom: 10px;
}

.calendar-controls button {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0 5px;
  line-height: 1;
  transition: transform 0.2s;
}

.calendar-controls button:hover {
  transform: scale(1.3);
}

.current-month-year {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.live-calendar-body .weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #495057;
  font-size: 0.8rem; /* फॉन्ट साइज कम किया गया */
}

.live-calendar-body .days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px; /* थोड़ा कम गैप */
}

.live-calendar-body .days div {
  padding: 6px 4px; /* पैडिंग कम की गई */
  border-radius: 50%;
  transition:
    background-color 0.3s,
    color 0.3s;
  line-height: 1.4;
  cursor: pointer;
}

.live-calendar-body .days .today {
  background-color: #ffb703; /* एक्सेंट पीला रंग */
  color: #000; /* बेहतर कंट्रास्ट के लिए काला टेक्स्ट */
  font-weight: bold;
  border: 2px solid #e85d04; /* एक बॉर्डर जोड़ा गया */
}

.live-calendar-body .days .holiday {
  background-color: #e0f2fe; /* छुट्टी के लिए हल्का नीला रंग */
  color: #014f86;
  font-weight: 500;
}

.live-calendar-body .days .sunday {
  color: #e63946; /* रविवार के लिए लाल रंग */
  font-weight: 600;
}

/* जब दिन आज और रविवार दोनों हो */
.live-calendar-body .days .today.sunday {
  color: #e63946; /* यह सुनिश्चित करता है कि रविवार का रंग बना रहे */
}

/* जब दिन आज का और छुट्टी दोनों हो */
.live-calendar-body .days .today.holiday {
  background-color: #ffb703; /* 'today' का रंग प्राथमिकता में */
  border: 2px dashed #0077b6; /* छुट्टी दिखाने के लिए बॉर्डर स्टाइल बदला */
}

.live-calendar-body .days .prev-date,
.live-calendar-body .days .next-date {
  color: #ced4da; /* हल्का ग्रे */
  opacity: 0.8;
  cursor: default;
}

.live-calendar-body
  .days
  div:not(.prev-date):not(.next-date):not(.today):hover {
  background-color: #e9ecef;
  color: #023e8a;
}

.calendar-toggle-view {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: linear-gradient(45deg, #023e8a, #0077b6);
  color: white;
  border-radius: 50%;
}

.calendar-toggle-view .date {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1;
}

.calendar-toggle-view .month-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 2px;
}

/* Collapsed state for the calendar */
.live-calendar-container.collapsed {
  width: 70px;
  height: 70px;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
}

.live-calendar-container.collapsed .live-calendar-header,
.live-calendar-container.collapsed .live-calendar-body {
  display: none;
}

.live-calendar-container.collapsed .calendar-toggle-view {
  display: flex;
}

/* Calculator Styles */
.calculator-container {
  max-width: 350px;
  margin: 2rem auto;
  padding: 1.5rem;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.calculator.scientific {
  border: 1px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
}

.calculator #adv-display {
  width: 100%;
  padding: 20px;
  font-size: 2.5rem;
  text-align: right;
  border: none;
  background-color: #f1f1f1;
  color: #333;
}

.calculator #adv-display::placeholder {
  color: #aaa;
}

.calculator .buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.calculator .buttons button {
  padding: 20px;
  font-size: 1.5rem;
  border: 1px solid #ddd;
  cursor: pointer;
  transition: background-color 0.2s;
}

.calculator .buttons button:hover {
  background-color: #f0f0f0;
}

.calculator .buttons .operator {
  background-color: #f9a826;
  color: white;
}

.calculator .buttons .operator:hover {
  background-color: #f57f17;
}

.calculator .buttons .equal-btn {
  grid-column: span 1;
  background-color: #43a047;
  color: white;
}

.calculator .buttons .equal-btn:hover {
  background-color: #2e7d32;
}

.result-box {
  margin-top: 2rem;
  padding: 1.5rem;
  background-color: #eaf4ff;
  border-radius: 8px;
  font-size: 1.2rem;
  font-weight: bold;
  color: #023e8a;
  line-height: 1.8;
}

/* PDF Tool Styles */
.pdf-tool-container {
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.file-input-label {
  display: inline-block;
  padding: 12px 25px;
  background-color: #0077b6;
  color: white;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.file-input-label:hover {
  background-color: #023e8a;
}

#image-input {
  display: none;
}

#image-preview-container {
  margin: 2rem 0;
}

#image-preview {
  max-width: 100%;
  max-height: 400px;
  border-radius: 8px;
  border: 2px dashed #ccc;
  padding: 5px;
}

/* Hide side menu on smaller desktop screens to avoid clutter */
@media (max-width: 1199px) {
  .side-menu-bar {
    display: none;
  }
  #side-menu-toggle {
    transform: none !important; /* सुनिश्चित करें कि यह अपनी जगह पर रहे */
    display: none; /* Hide toggle on tablets and mobile */
  }
}

/* Story Content Styles */
.story-content {
  max-width: 700px;
  margin: 2rem auto;
  text-align: left;
  font-size: 1.2rem;
  line-height: 1.9;
}

.story-content p {
  margin-bottom: 1.5rem;
}

/* Accordion for Jokes/Stories Page */
.accordion-container {
  max-width: 800px;
  margin: 2rem auto;
}

.accordion-item {
  background-color: #fff;
  margin-bottom: 10px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
  overflow: hidden;
  transition: box-shadow 0.3s;
}

.accordion-item:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.accordion-header {
  padding: 15px 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: #023e8a;
  transition: background-color 0.3s;
}

.accordion-header:hover {
  background-color: #f0f9ff;
}

.accordion-header::after {
  content: "▼"; /* Down arrow */
  font-size: 0.8rem;
  transition: transform 0.3s;
}

.accordion-header.active::after {
  transform: rotate(180deg); /* Up arrow */
}

.accordion-content {
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #343a40;
  background-color: #fdfdfd;
}

.accordion-content p {
  padding: 20px 0;
  margin: 0;
}

/* बॉबिंग एनीमेशन के लिए कीफ्रेम */
@keyframes bobbing {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Text Typing Animation Keyframes */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes typing-p {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* Cursor Blinking Animation */
@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: var(--accent-color);
  }
}

/* Rainbow Text Animation */
@keyframes rainbow-text {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Notifications Container */
.notifications-container {
  max-width: 960px;
  margin: -1rem auto 2rem auto;
  position: relative;
  z-index: 5;
  background: #ffffff;
  border-radius: 15px;
  box-shadow: 0 5px 25px rgba(0, 70, 150, 0.1);
  padding: 1.5rem;
  border: 2px solid #e0eafc;
  overflow: hidden; /* Hide the scrolling elements outside */
}

.notifications-heading {
  font-size: 1.3rem;
  font-weight: 800;
  color: #ff3333;
  margin-bottom: 1rem;
  text-align: center;
  border-bottom: 2px dashed #f0f4f8;
  padding-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.whatsapp-cta-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: white;
  padding: 12px 15px;
  border-radius: 8px;
  margin-bottom: 1rem;
  text-decoration: none;
  font-weight: 500;
  box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.whatsapp-cta-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(37, 211, 102, 0.4);
}

.wa-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.wa-text {
  font-size: 0.95rem;
}

.wa-pulse {
  position: absolute;
  right: 15px;
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
  animation: waPulse 1.5s infinite;
}

@keyframes waPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.notifications-wrapper {
  height: 300px; /* Adjust height of visible area */
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent, black 5%, black 95%, transparent);
}

.notifications-scroll {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  animation: scrollVerticalNotif 80s linear infinite;
}

.notifications-container:hover .notifications-scroll,
.notifications-scroll:active {
  animation-play-state: paused;
}

@keyframes scrollVerticalNotif {
  0% { transform: translateY(300px); }
  100% { transform: translateY(-100%); }
}

/* Recruitment Notification Style */
.recruitment-notification {
  display: block;
  background: linear-gradient(
    135deg,
    #ffc107,
    #f57f17
  ); /* आकर्षक पीला/नारंगी ग्रेडिएंट */
  color: #000;
  text-decoration: none;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.recruitment-notification:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 25px rgba(245, 127, 23, 0.3);
}

.notification-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.notification-title {
  font-weight: bold;
  font-size: 1.1rem;
}

.notification-date {
  font-size: 0.9rem;
  font-weight: 500;
}

/* Pink Notification Style */
.pink-notification {
  background: linear-gradient(135deg, #ec407a, #c2185b); /* गुलाबी ग्रेडिएंट */
  color: #fff; /* सफेद टेक्स्ट */
}

/* Green Notification Style */
.green-notification {
  background: linear-gradient(135deg, #2ddc73, #198754); /* हरा ग्रेडिएंट */
  color: #fff; /* सफेद टेक्स्ट */
}

/* Blue Notification Style */
.blue-notification {
  background: linear-gradient(135deg, #0077b6, #023e8a); /* नीला ग्रेडिएंट */
  color: #fff; /* सफेद टेक्स्ट */
}

/* New badge for notifications */
.new-badge {
  display: inline-block;
  background-color: #ff0000;
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: bold;
  margin-left: 8px;
}

/* Keyframes for the new badge pulse animation */
@keyframes pulse-badge {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
  }
  70% {
    transform: scale(1.1);
    box-shadow: 0 0 10px 10px rgba(255, 0, 0, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
  }
}

.new-badge {
  animation: pulse-badge 2s infinite;
}

/* About Us Summary Section on Home Page */
.about-us-summary {
  max-width: 960px;
  margin: 4rem auto 2rem auto;
  padding: 2.5rem;
  background: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  text-align: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px); /* Frosted glass effect */
}

.about-us-summary h2 {
  color: #023e8a;
  margin-bottom: 1rem;
  font-size: 2rem;
}

.about-us-summary p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #343a40;
  margin-bottom: 1.5rem;
}

.btn-read-more {
  display: inline-block;
  background-color: #ffc107;
  color: #023e8a;
  padding: 12px 30px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.btn-read-more:hover {
  background-color: #e85d04;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
/* Rating Section Styles */
.rating-section {
  margin-top: 3rem;
  padding: 2rem;
  text-align: center;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.rating-section h3 {
  margin-bottom: 0.5rem;
  color: #1e3c72;
}

.stars-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.star {
  font-size: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, filter 0.2s;
  filter: grayscale(1);
}

.star:hover, .star.active {
  filter: grayscale(0) drop-shadow(0 0 5px #ffc107);
  transform: scale(1.2);
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: none; /* Hidden by default */
  justify-content: center;
  align-items: center;
  z-index: 2000;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.modal-overlay.active {
  display: flex;
}

.modal-content {
  background: white;
  padding: 2.5rem;
  border-radius: 20px;
  width: 90%;
  max-width: 500px;
  position: relative;
  box-shadow: 0 15px 35px rgba(0,0,0,0.2);
  animation: modalIn 0.3s ease-out;
}

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

.modal-content h2 {
  margin-bottom: 1.5rem;
  color: #1e3c72;
  font-size: 1.5rem;
}

.modal-content .form-group {
  margin-bottom: 1.5rem;
  text-align: left;
}

.modal-content label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #495057;
}

.modal-content input, .modal-content textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid #e9ecef;
  border-radius: 10px;
  font-size: 1rem;
  transition: border-color 0.3s;
}

.modal-content textarea {
  height: 100px;
  resize: vertical;
}

.modal-content input:focus, .modal-content textarea:focus {
  outline: none;
  border-color: #0077b6;
}

.modal-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
}

.submit-fb-btn {
  background: linear-gradient(135deg, #023e8a, #0077b6);
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 50px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.submit-fb-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 119, 182, 0.3);
}

.close-modal-btn {
  background: #f8f9fa;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.2s;
}

.close-modal-btn:hover {
  background: #e9ecef;
}

/* Notification Bell Style */
.bell-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  padding: 8px;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bell-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(15deg);
}

.bell-icon {
  font-size: 1.4rem;
}

.badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ffc107;
  color: #000;
  font-size: 0.7rem;
  font-weight: bold;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #1e3c72;
}

/* Notification Panel Styles */
.notif-panel-overlay {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: 3000;
  display: none;
  justify-content: flex-end;
}

.notif-panel-overlay.active {
  display: flex;
}

.notif-panel-content {
  width: 350px;
  max-width: 90%;
  background: white;
  height: 100%;
  box-shadow: -5px 0 25px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.4s ease-out;
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.notif-panel-header {
  padding: 1.5rem;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notif-panel-header h2 {
  font-size: 1.25rem;
  color: #1e3c72;
}

#close-notif-panel {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #6c757d;
}

#notif-list-container {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.notif-item {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  position: relative;
  transition: transform 0.2s;
}

.notif-item:hover {
  transform: scale(1.02);
}

.notif-item .notif-rating {
  color: #ffc107;
  font-weight: bold;
  margin-bottom: 5px;
}

.notif-item .notif-name {
  font-weight: bold;
  color: #1e3c72;
  display: block;
}

.notif-item .notif-problem {
  padding: 5px 0;
  border-top: 1px dashed #eee;
  margin-top: 5px;
}

.notif-item .notif-solution {
  font-style: italic;
  font-size: 0.9rem;
  color: #6c757d;
  display: block;
  margin-top: 5px;
}

.notif-item .notif-time {
  font-size: 0.75rem;
  color: #adb5bd;
  text-align: right;
  display: block;
  margin-top: 8px;
}

.no-notif-msg {
  text-align: center;
  color: #adb5bd;
  margin-top: 3rem;
  font-style: italic;
}

/* --- FESTIVAL SCROLLING MESSAGE --- */
.scrolling-festival-message {
  width: 100%;
  max-width: 800px;
  margin: 1.5rem auto 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 30px;
  padding: 8px 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
}

.scrolling-text {
  white-space: nowrap;
  font-weight: bold;
  font-size: 1.1rem;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  animation: scrollMarquee 20s linear infinite;
  display: inline-block;
  padding-left: 100%;
}

.scrolling-festival-message:hover .scrolling-text {
  animation-play-state: paused;
}

@keyframes scrollMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* --- FESTIVAL POPUP STYLING --- */
.festival-overlay {
  position: fixed;
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.festival-overlay.active {
  opacity: 1;
  visibility: visible;
}

.festival-content {
  padding: 40px;
  border-radius: 20px;
  text-align: center;
  position: relative;
  max-width: 450px;
  width: 90%;
  box-shadow: 0 15px 35px rgba(0,0,0,0.5), inset 0 0 20px rgba(255,255,255,0.5);
  transform: scale(0.5);
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.festival-overlay.active .festival-content {
  transform: scale(1);
}

.festival-content h2 {
  font-size: 2.2rem;
  margin-bottom: 15px;
  font-weight: 800;
  line-height: 1.2;
}

.festival-content p {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.festival-animation {
  font-size: 5rem;
  margin-bottom: 20px;
  animation: bounceFestival 2s infinite;
}

.close-festival-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  background: rgba(255,255,255,0.3);
  border: none;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  font-size: 1.5rem;
  cursor: pointer;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.3s;
}

.close-festival-btn:hover {
  background: rgba(255,255,255,0.8);
}

@keyframes bounceFestival {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

.confetti-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.confetti {
  position: absolute;
  width: 10px;
  height: 20px;
  top: -20px;
  animation: fallConfetti linear infinite;
  opacity: 0.8;
  border-radius: 2px;
}

@keyframes fallConfetti {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* Testimonials Section */
.testimonials-section {
  text-align: center;
  padding: 40px 20px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  margin: 40px 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.testimonials-section h3 {
  font-size: 1.8rem;
  color: #2c3e50;
  margin-bottom: 5px;
}

.testimonials-subtitle {
  color: #7f8c8d;
  margin-bottom: 30px;
  font-size: 1.1rem;
}

.testimonials-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.testimonial-card {
  background: white;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  flex: 1;
  min-width: 250px;
  max-width: 350px;
  text-align: left;
  border-left: 5px solid #3498db;
  transition: transform 0.3s;
}

.testimonial-card:hover {
  transform: translateY(-5px);
}

.testimonial-card .stars {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.testimonial-card .review-text {
  font-style: italic;
  color: #555;
  margin-bottom: 15px;
  line-height: 1.5;
}

.testimonial-card .reviewer-name {
  font-weight: bold;
  color: #2c3e50;
  text-align: right;
}

/* Footer Legal Links */
.legal-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 25px;
  flex-wrap: wrap;
}

.legal-links a.animated-legal-link {
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 20px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: floatLink 3s ease-in-out infinite alternate;
}

/* Individual Colors on Hover */
.legal-links a.animated-legal-link[href="privacy-policy.html"]:hover {
  background: linear-gradient(45deg, #1d976c, #93f9b9);
  color: #000;
  border-color: #93f9b9;
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 10px 20px rgba(29, 151, 108, 0.4);
}

.legal-links a.animated-legal-link[href="terms-conditions.html"]:hover {
  background: linear-gradient(45deg, #ff416c, #ff4b2b);
  color: #fff;
  border-color: #ff4b2b;
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 10px 20px rgba(255, 75, 43, 0.4);
}

.legal-links a.animated-legal-link[href="contact-us.html"]:hover {
  background: linear-gradient(45deg, #4facfe, #00f2fe);
  color: #000;
  border-color: #00f2fe;
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 242, 254, 0.4);
}

/* Shine effect */
.legal-links a.animated-legal-link::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.1) 40%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.1) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(45deg);
  animation: shineSweep 3s infinite linear;
}

@keyframes shineSweep {
  0% { transform: translate(-100%, -100%) rotate(45deg); }
  100% { transform: translate(100%, 100%) rotate(45deg); }
}

@keyframes floatLink {
  0% { transform: translateY(0); }
  100% { transform: translateY(-3px); }
}

/* About Us Page Styles */
.about-hero {
  text-align: center;
  padding: 40px 20px;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  color: white;
  border-radius: 12px;
  margin-bottom: 40px;
}
.about-hero h1 {
  color: white;
  border: none;
  margin-bottom: 10px;
}
.about-hero-subtext {
  font-size: 1.2rem;
  max-width: 600px;
  margin: 0 auto;
}
.about-content-wrapper {
  max-width: 850px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.9);
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.about-flex-container {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.about-flex-col {
  flex: 1;
  min-width: 300px;
}
.about-objective-title {
  color: #2980b9;
  margin-top: 0;
}
.about-text {
  line-height: 1.7;
  color: #444;
}
.about-feature-box {
  flex: 1;
  min-width: 300px;
  background: #f8fbff;
  padding: 20px;
  border-left: 4px solid #3498db;
  border-radius: 8px;
}
.about-feature-title {
  margin-top: 0;
  color: #2c3e50;
}
.about-feature-list {
  padding-left: 20px;
  color: #444;
  line-height: 1.6;
}
.about-services-title {
  color: #2980b9;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}
.about-services-desc {
  margin-bottom: 20px;
  color: #444;
}
.about-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}
.about-service-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.card-border-red { border-top: 3px solid #e74c3c; }
.card-border-green { border-top: 3px solid #27ae60; }
.card-border-orange { border-top: 3px solid #f39c12; }
.card-border-purple { border-top: 3px solid #8e44ad; }

.about-service-card h3 { font-size: 1.1rem; }
.about-card-title-red { color: #c0392b; }
.about-card-title-green { color: #229954; }
.about-card-title-orange { color: #d68910; }
.about-card-title-purple { color: #7d3c98; }

.about-service-text {
  font-size: 0.95rem;
  color: #555;
}
.about-goal-title {
  color: #2980b9;
}
.about-disclaimer-box {
  background: #fff3cd;
  color: #856404;
  padding: 20px;
  border-radius: 8px;
  border-left: 5px solid #ffeeba;
  margin-top: 40px;
}
.about-disclaimer-title {
  margin-top: 0;
}
.about-disclaimer-text {
  margin-bottom: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}
.about-back-link-container {
  text-align: center;
  margin-top: 30px;
}
.btn-back-home {
  background: #34495e;
  color: white;
  padding: 12px 25px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  transition: background 0.3s;
}
.btn-back-home:hover {
  background: #2c3e50;
}

/* Department Internal Page Styles */
.dept-info-container {
  max-width: 900px;
  margin: 2rem auto;
  background-color: var(--card-bg-color, #ffffff);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.dept-title {
  color: var(--primary-color, #0056b3);
  text-align: center;
  margin-bottom: 1.5rem;
}
.dept-section {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background-color: var(--background-color, #f4f6f9);
  border-radius: 8px;
  border-left: 4px solid var(--primary-color, #0056b3);
}
.dept-section h3 {
  margin-top: 0;
  color: var(--text-color, #333333);
  margin-bottom: 1rem;
}
.dept-section p {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}
.dept-section ul {
  padding-left: 1.5rem;
  margin: 0;
}
.dept-section li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}
.action-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.btn-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 12px 24px;
  background-color: var(--primary-color, #0056b3);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
}
.btn-action:hover {
  background-color: var(--secondary-color, #003d80);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.btn-download {
  background-color: #28a745;
}
.btn-download:hover {
  background-color: #218838;
}
.dept-section-success {
  border-left-color: #28a745 !important;
}
.dept-important-links-title {
  text-align: center;
  color: var(--text-color, #333333);
  margin-top: 2rem;
}
.dept-back-link-container {
  text-align: center;
  margin-top: 3rem;
}

/* About Summary Logo Style */
.about-us-summary {
  background: white;
  margin: 3rem auto;
  padding: 2.5rem;
  max-width: 900px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  text-align: center;
  border-top: 5px solid #1e3c72;
}
.about-us-summary h2 {
  color: #1e3c72;
  font-size: 2rem;
  margin-bottom: 1rem;
}
.about-us-summary p {
  color: #444;
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.brand-text-logo {
  font-weight: 900;
  font-size: 1.2em;
  background: linear-gradient(90deg, #ff416c, #ff4b2b, #1e3c72, #2a5298);
  background-size: 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shineBrand 4s ease-in-out infinite;
  display: inline-block;
}
@keyframes shineBrand {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* App Download Link */
.app-download-link {
  color: #4CAF50 !important;
  font-weight: bold;
}

/* App Download Hero Button */
.app-download-hero-btn {
  background: linear-gradient(135deg, #0cebeb, #20e3b2, #29ffc6);
  color: #002c1f;
  padding: 12px 30px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.2rem;
  box-shadow: 0 4px 15px rgba(32, 227, 178, 0.4);
  display: inline-block;
  animation: pulse 2s infinite;
}

.app-download-hero-btn-container {
  margin-bottom: 20px;
}

/* Download Center Page */
.download-center-main {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.download-center-title {
  color: #023e8a;
  margin-bottom: 20px;
  font-size: 2.2rem;
  text-align: center;
}

.download-center-desc {
  text-align: center;
  max-width: 600px;
  margin-bottom: 40px;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #444;
}

.download-cards-container {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 900px;
}

.download-card {
  border-radius: 15px;
  padding: 40px 30px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  text-align: center;
  flex: 1;
  min-width: 300px;
  position: relative;
  overflow: hidden;
}

.download-card-new {
  background: linear-gradient(135deg, #e0f7fa, #ffffff);
  border: 1px solid #b2ebf2;
}

.download-card-old {
  background: linear-gradient(135deg, #fff3e0, #ffffff);
  border: 1px solid #ffe0b2;
}

.download-recommended-badge {
  position: absolute;
  top: -20px;
  right: -20px;
  background: #4CAF50;
  color: white;
  padding: 30px 40px 10px 10px;
  font-weight: bold;
  transform: rotate(45deg);
  font-size: 0.8rem;
  letter-spacing: 1px;
}

.download-icon {
  font-size: 3.5rem;
  margin-bottom: 15px;
}

.download-card-title-new {
  color: #0077b6;
  margin-bottom: 15px;
  font-size: 1.4rem;
}

.download-card-title-old {
  color: #e65100;
  margin-bottom: 15px;
  font-size: 1.4rem;
}

.download-card-text {
  color: #666;
  margin-bottom: 30px;
  font-size: 1rem;
  line-height: 1.5;
}

.download-btn {
  display: inline-block;
  color: white;
  padding: 14px 30px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  transition: all 0.3s ease;
}

.download-btn-new {
  background-color: #0077b6;
  box-shadow: 0 4px 10px rgba(0,119,182,0.3);
}

.download-btn-new:hover {
  background-color: #005f92;
}

.download-btn-old {
  background-color: #ef6c00;
  box-shadow: 0 4px 10px rgba(239,108,0,0.3);
}

.download-btn-old:hover {
  background-color: #e65100;
}

.download-back-container {
  margin-top: 50px;
}

.download-back-btn {
  color: #023e8a;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  padding: 10px 20px;
  border: 2px solid #023e8a;
  border-radius: 30px;
  transition: all 0.3s ease;
  display: inline-block;
}

.download-back-btn:hover {
  background: #023e8a;
  color: white;
}

.footer-slogan-center {
  text-align: center;
  padding: 20px;
}

/* Tablet Responsive (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    max-width: 900px;
    gap: 1rem;
  }
  .about-us-summary {
    max-width: 700px;
    padding: 2rem;
  }
  .about-us-summary h2 {
    font-size: 1.6rem;
  }
  .about-us-summary p {
    font-size: 1rem;
  }
  .hero-content h1 {
    font-size: 2.2rem;
  }
  .hero-content p {
    font-size: 1.05rem;
  }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
  header {
    padding: 0.7rem;
  }
  .logo {
    font-size: 1.2rem;
  }
  .hero-banner {
    padding: 2rem 0.8rem;
  }
  .hero-content h1 {
    font-size: 1.5rem;
  }
  .hero-content p {
    font-size: 0.9rem;
  }
  .services-grid {
    gap: 0.8rem;
    padding: 0 5px;
  }
  .service-item {
    font-size: 0.9rem;
    padding: 0.8rem;
  }
  .about-us-summary {
    margin: 1.5rem auto;
    padding: 1.5rem;
  }
  .about-us-summary h2 {
    font-size: 1.3rem;
  }
  .about-us-summary p {
    font-size: 0.95rem;
  }
  .rating-section h3 {
    font-size: 1.1rem;
  }
  .testimonials-section h3 {
    font-size: 1.1rem;
  }
  .testimonial-card {
    padding: 1rem;
  }
  footer {
    padding: 1rem;
    font-size: 0.85rem;
  }
  /* About Page Mobile */
  .about-hero {
    padding: 25px 12px;
    margin-bottom: 20px;
  }
  .about-hero h1 {
    font-size: 1.4rem;
  }
  .about-hero-subtext {
    font-size: 1rem;
  }
  .about-content-wrapper {
    padding: 15px;
  }
  .about-flex-col, .about-feature-box {
    min-width: unset;
  }
  .about-services-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .about-service-card {
    padding: 15px;
  }
  .about-disclaimer-box {
    padding: 15px;
    margin-top: 25px;
  }
  .btn-back-home {
    padding: 10px 20px;
    font-size: 0.9rem;
  }
  /* Notifications Mobile */
  .notifications-container {
    padding: 0 5px;
  }
  .notifications-heading {
    font-size: 1rem;
  }
  .notification-title {
    font-size: 0.9rem;
  }
  .new-badge {
    font-size: 0.65rem;
  }
}

.footer-disclaimer {
  text-align: center;
  color: #ffcccb;
  font-size: 0.85rem;
  padding: 10px;
  margin: 10px 10%;
  border: 1px dashed #ffcccb;
  border-radius: 5px;
}