@font-face {
     font-family: 'Tajawal';
     src: url('fonts/Tajawal-Regular.ttf') format('truetype');
     font-weight: 400;
     font-style: normal;
 }

 @font-face {
     font-family: 'Tajawal';
     src: url('fonts/Tajawal-Medium.ttf') format('truetype');
     font-weight: 500;
     font-style: normal;
 }

 @font-face {
     font-family: 'Tajawal';
     src: url('fonts/Tajawal-Bold.ttf') format('truetype');
     font-weight: 700;
     font-style: normal;
 }

 @font-face {
     font-family: 'Tajawal';
     src: url('fonts/Tajawal-Black.ttf') format('truetype');
     font-weight: 900;
     font-style: normal;
 }

 @font-face {
     font-family: 'Tajawal';
     src: url('fonts/Tajawal-Light.ttf') format('truetype');
     font-weight: 300;
     font-style: normal;
 }

 /* Unique Wrapper */
 .k-slider-wrapper {
     position: relative;
     width: 100%;
     max-width: 1200px;
     height: 500px;
     margin: 0 auto;
     overflow: hidden;
     font-family: 'Tajawal', sans-serif;
     direction: rtl;
     /* Ensures proper Arabic alignment */
 }

 .k-slider-container {
     display: flex;
     width: 600%;
     /* 6 slides * 100% */
     height: 100%;
     /* 18s total = 3s per slide */
     animation: k-slide-6-animation 18s infinite ease-in-out;
 }

 .k-slider-slide {
     width: 16.666%;
     /* 100% / 6 slides */
     height: 100%;
     background-size: cover;
     background-position: center;
     position: relative;
 }

 .k-slider-overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 60%;
     background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
     display: flex;
     align-items: flex-end;
     padding: 40px;
 }

 .k-slider-content {
     color: white;
     max-width: 800px;
     text-align: right;
 }

 .k-slider-badge {
     background-color: var(--primary-color);
     color: white;
     padding: 5px 12px;
     font-weight: bold;
     font-size: 14px;
 }

 .k-slider-title {
     font-size: 2.2rem;
     margin: 15px 0 10px 0;
     line-height: 1.2;
     font-weight: 700;
 }

 .k-slider-date {
     font-size: 0.9rem;
     opacity: 0.8;
 }

 /* Dots Navigation */
 .k-slider-dots {
     position: absolute;
     bottom: 20px;
     right: 40px;
     display: flex;
     gap: 10px;
     z-index: 10;
 }

 .k-slider-dot {
     width: 12px;
     height: 12px;
     background-color: rgba(255, 255, 255, 0.4);
     border-radius: 50%;
     transition: background-color 0.3s;
 }

 .k-dot-active {
     background-color: white;
 }

 /* Animation for 6 Slides in RTL 
   We move by 16.66% (which is 1/6th of 100%) */
 @keyframes k-slide-6-animation {

     0%,
     15% {
         transform: translateX(0%);
     }

     /* Slide 1 */
     16.6%,
     31.6% {
         transform: translateX(16.66%);
     }

     /* Slide 2 */
     33.3%,
     48.3% {
         transform: translateX(33.33%);
     }

     /* Slide 3 */
     50%,
     65% {
         transform: translateX(50%);
     }

     /* Slide 4 */
     66.6%,
     81.6% {
         transform: translateX(66.66%);
     }

     /* Slide 5 */
     83.3%,
     98.3% {
         transform: translateX(83.33%);
     }

     /* Slide 6 */
     100% {
         transform: translateX(0%);
     }

     /* Reset */
 }