.bottom-nav {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     height: 80px;
     background: #fefefe;
     border-top: 1px solid #ddd;
     display: flex;
     justify-content: space-around;
     align-items: center;
     z-index: 1000;
     border-top-left-radius: 15px;
     border-top-right-radius: 15px;
     box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
   }

   .nav-item {
     text-align: center;
     font-size: 12px;
     color: #2c3e50;
     flex-grow: 1;
     position: relative;
   }

   .nav-item i {
     font-size: 18px;
     display: block;
     margin-bottom: 4px;
   }

   @media (min-width: 768px) {
     .bottom-nav {
       display: none;
     }

     body {
       padding-bottom: 0;
     }
   }
   
   
/* Chat Floating Button */
   .chat-toggle {
     position: fixed;
     bottom: 85px;
     right: 20px;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background-color: #2c2f66;
     color: white;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 22px;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
     border: none;
     cursor: pointer;
     z-index: 9998;
   }

   /* Social Popup Buttons */
   .social-popup {
     position: fixed;
     bottom: 135px;
     right: 20px;
     display: none;
     flex-direction: column;
     gap: 15px;
     z-index: 9999;
     transition: all 0.3s ease;
   }

   .social-btn {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 22px;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
     transition: transform 0.2s ease;
     text-decoration: none;
     border: none;
     cursor: pointer;
   }

   .social-btn:hover {
     transform: scale(1.1);
   }

   .instagram {
     background-color: #e1306c;
   }

   .messenger {
     background-color: #0084ff;
   }

   .whatsapp {
     background-color: #25d366;
   }
   .quora {
     background-color: #aa2200;
   }
   .hikmah {
     background-color: #2c2f66;
   }
   
   /* Top bar title */
   
   .top-bar-center {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    color: white;
    overflow: hidden;
  }
  
  /* Notice Board */
      :root {
     --primary-gradient: linear-gradient(135deg, #8A2BE2, #4A00E0);
     --secondary-gradient: linear-gradient(135deg, #FF6B6B, #FF8E53);
     --dark-bg: #1a1a2e;
     --light-text: #ffffff;
     --accent-color: #6dd5ed;
     --card-bg: rgba(255, 255, 255, 0.1);
     --shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
   }

   .right-popup {
     position: fixed;
     top: 160px;
     right: -270px;
     width: 270px;
     min-height: 140px;
     background: var(--primary-gradient);
     color: var(--light-text);
     border-radius: 16px;
     box-shadow: var(--shadow);
     padding: 20px;
     z-index: 1050;
     overflow: hidden;
     transition: right 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     border-left: 5px solid var(--accent-color);
   }

   .right-popup.show {
     right: 20px;
     animation: wiggle 0.6s ease;
   }

   @keyframes wiggle {

     0%,
     100% {
       transform: rotate(0deg);
     }

     25% {
       transform: rotate(2deg);
     }

     75% {
       transform: rotate(-2deg);
     }
   }
   
   .right-popup:hover {
     transform: translateY(-5px) scale(1.02);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
   }

   .popup-header {
     display: flex;
     align-items: center;
     margin-bottom: 10px;
   }

   .popup-icon {
     font-size: 24px;
     margin-right: 10px;
     color: var(--accent-color);
   }

   h5 {
     margin-bottom: 0;
     font-weight: 700;
     font-size: 20px;
     letter-spacing: 0.5px;
   }

   /* Smooth scrolling text */
   .scrolling-text-container {
     overflow: hidden;
     position: relative;
     height: 70px;
     margin-top: 15px;
     background: rgba(0, 0, 0, 0.2);
     border-radius: 10px;
     padding: 10px 0;
   }
   
   .scrolling-text-base {
     overflow: hidden;
     position: relative;
   }

   .scrolling-text {
     display: inline-block;
     white-space: nowrap;
     will-change: transform;
     font-size: 18px;
     padding: 5px 0;
     letter-spacing: 1px;
     animation: scroll-text var(--scroll-duration, 10s) linear infinite;
   }

   @keyframes scroll-text {
     from {
       transform: translateX(100%);
     }

     to {
       transform: translateX(-100%);
     }
   }

   .scrolling-text-container:hover .scrolling-text {
     animation-play-state: paused;
   }
   
   .scrolling-text-base:hover .scrolling-text {
     animation-play-state: paused;
   }