@import url('https://cdn.jsdelivr.net/npm/jameel-noori@1.1.2/jameel-noori.min.css');

html {
  scroll-behavior: smooth;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

body {
  animation: fadeIn 0.8s ease-out forwards;
  overflow-x: hidden;
}

[dir="rtl"] body {
  font-family: 'Jameel Noori Nastaleeq';
  line-height: 1.8;
  text-align: right;
}

/* Inherit text alignment from body for individual tags to allow overrides */
[dir="rtl"] h1, 
[dir="rtl"] h2, 
[dir="rtl"] h3, 
[dir="rtl"] h4, 
[dir="rtl"] h5, 
[dir="rtl"] h6, 
[dir="rtl"] p, 
[dir="rtl"] span, 
[dir="rtl"] label, 
[dir="rtl"] li {
  text-align: inherit;
}

/* Force flex direction flip for items that need it */
[dir="rtl"] .rtl-flex-row-reverse {
  flex-direction: row-reverse;
}

[dir="rtl"] .rtl-ml-auto {
  margin-right: auto;
  margin-left: initial;
}

[dir="rtl"] .carousel-btn.prev { right: 10px; left: auto; }
[dir="rtl"] .carousel-btn.next { left: 10px; right: auto; }

.carousel {
      position: relative;
      overflow: hidden;
      padding: 2rem 1rem;
    }

    .carousel-track {
      display: flex;
      transition: transform 0.5s ease-in-out;
      gap: 2rem;
    }

    .carousel-img {
      width: calc(33.333% - 1.333rem);
      border-radius: 1rem;
      flex-shrink: 0;
      object-fit: contain;
      aspect-ratio: 16/9;
    }

    .carousel-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0,0,0,0.5);
      color: #fff;
      border: none;
      padding: 10px 15px;
      cursor: pointer;
      border-radius: 50%;
    }

    .carousel-btn.prev { left: 10px; }
    .carousel-btn.next { right: 10px; }

    .carousel-btn:hover {
      background: rgba(0,0,0,0.8);
    }