/*whats icon sticky*/
 .demo-color-changer {
   display: none !important;
   }
    .footer-lang-changer .sticky-footer-wh {
   position: fixed;
   bottom: 20px;
   right: 69px; 
   z-index: 1000; 
   display: block; 
   }
   @media screen and (max-width: 768px) {
   .footer-lang-changer .sticky-footer-wh {
   bottom: 10px;  
   right: 40px;
   }
   }
   @media screen and (max-width: 468px) {
   .footer-lang-changer .sticky-footer-wh {
   bottom: 10px;   
   right: 69px;
   }
   }


/*modal blog post */

   section .modal .modal-dialog.modal-sm {
      max-width: 590px;  /* smaller width */
   }
   section .modal .modal-body {
      max-height: 55vh;  /* slightly increased height from 45vh */
      overflow-y: auto;
   }
   @media (max-width: 576px) {
      section .modal .modal-dialog.modal-sm {
         max-width: 95%; /* full width on mobile */
      }
   }
   /*ends blog post*/
   
/*blog index cards*/
   
   .responsive-img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  margin-bottom: 1rem;
}


.blog-card {
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: 0.3s ease;
  margin-bottom: 30px;
}
.blog-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  
}
.blog-card h1 {
  font-size: 22px;
  color: #343a40;
  margin-bottom: 15px;
}
.blog-card p {
  font-size: 15px;
  color: #555;
}
.blog-date {
  font-size: 13px;
  color: #888;
  text-align: right;
  margin-top: 1rem;
}
.sidebar-box {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}


/* index page*/

   .container nav .pagination .active {
   padding: 0px 16px !important;
   }
   .container nav .pagination a { padding: 8px 16px; border-radius: 5px; text-decoration: none; color: #007bff; }
   .container nav .pagination .active { font-weight: bold; background: #007bff; color: white; border-radius: 5px; padding: 8px 16px; }
    .container nav .pagination a:hover { background-color: #007bff; color: white; }


.container nav .pagination .active {
   padding: 0px 16px !important;
   }