/* Container Scoping */
   .pub-slider-container {
       direction: rtl;
       font-family: cairo;
       background-color: var(--primary-color);
       padding: 30px 15px;
       max-width: 70%;
       margin: 20px auto;
       box-sizing: border-box;
   }

   .pub-slider-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       color: white;
       border-bottom: 1px solid rgba(255, 255, 255, 0.4);
       padding-bottom: 12px;
       margin-bottom: 25px;
   }

   .pub-slider-title {
       margin: 0;
       font-size: 1.5rem;
   }

   .pub-slider-more {
       color: white;
       text-decoration: none;
       font-size: 0.9rem;
   }

   /* Viewport and Track */
   .pub-slider-viewport {
       position: relative;
       overflow: hidden;
       padding: 10px 0;
   }

   .pub-slider-track {
       display: flex;
       gap: 20px;
       transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
       will-change: transform;
   }

   /* Unique Card Styling */
   .pub-slider-card {
       background: white;
       flex: 0 0 calc(25% - 15px);
       /* Default: 4 items */
       display: flex;
       flex-direction: column;
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   }

   .pub-slider-img-box {
       padding: 20px;
       height: 220px;
       display: flex;
       justify-content: center;
   }

   .pub-slider-img-box img {
       max-height: 100%;
       width: auto;
   }

   .pub-slider-content {
       padding: 15px;
       text-align: center;
       min-height: 70px;
       color: #333;
   }

   .pub-slider-content h3 {
       font-size: 1rem;
       margin: 0;
       line-height: 1.4;
   }

   .pub-slider-date {
       background-color: var(--primary-color);
       color: white;
       text-align: center;
       padding: 8px;
       font-size: 0.85rem;
   }

   /* Navigation */
   .pub-slider-btn {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       z-index: 5;
       background: rgba(255, 255, 255, 0.8);
       border: 1px solid #ccc;
       width: 40px;
       height: 40px;
       cursor: pointer;
   }

   .pub-slider-prev {
       right: 5px;
   }

   .pub-slider-next {
       left: 5px;
   }

   /* Responsive Breakpoints */
   @media (max-width: 1024px) {
       .pub-slider-card {
           flex: 0 0 calc(33.33% - 14px);
       }
   }

   @media (max-width: 768px) {
       .pub-slider-card {
           flex: 0 0 calc(50% - 10px);
       }
   }

   @media (max-width: 480px) {
       .pub-slider-card {
           flex: 0 0 100%;
       }
   }