 <style>

        /* Base RTL styles */
        [dir="rtl"],
        [dir="rtl"] *:not(i):not(.fa):not(.fas):not(.far):not(.fab) {
            font-family: "Tajawal", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
            text-align: right;
            direction: rtl;
        }
        .tajawal-extralight {
            font-family: "Tajawal", sans-serif;
            font-weight: 200;
            font-style: normal;
          }
          
          .tajawal-light {
            font-family: "Tajawal", sans-serif;
            font-weight: 300;
            font-style: normal;
          }
          
          .tajawal-regular {
            font-family: "Tajawal", sans-serif;
            font-weight: 400;
            font-style: normal;
          }
          
          .tajawal-medium {
            font-family: "Tajawal", sans-serif;
            font-weight: 500;
            font-style: normal;
          }
          
          .tajawal-bold {
            font-family: "Tajawal", sans-serif;
            font-weight: 700;
            font-style: normal;
          }
          
          .tajawal-extrabold {
            font-family: "Tajawal", sans-serif;
            font-weight: 800;
            font-style: normal;
          }
          
          .tajawal-black {
            font-family: "Tajawal", sans-serif;
            font-weight: 900;
            font-style: normal;
          }
          
        .slider-container {
        overflow: hidden;
        position: relative;
        }
        .parisienne-regular {
        font-family: "Parisienne", cursive;
        font-weight: 400;
        font-style: normal;
        }
        .playfair {
        font-family: "Playfair Display", serif;
        font-optical-sizing: auto;
        font-weight: <weight>;
        font-style: normal;
        }
        .slider-track {
            display: flex;
            width: calc(100% * 4); /* 3 original + 1 clone */
        }
        .slider-slide {
            width: 25%; /* Each slide takes 25% of track width */
            flex-shrink: 0;
        }
        .save-the-date {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
        }
        .mobile-menu {
            transition: all 0.5s ease;
        }
        .font-playfair {
            font-family: 'Playfair Display', serif;
        }
      .timeline-axis::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 53%;
            width: 4px;
            background: linear-gradient(to bottom, #d1d5db, #9ca3af, #d1d5db);
            transform: translateX(-50%);
            z-index: 0;
        }
        .year-marker {
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        }
        .year-marker::before {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            right: 2px;
            bottom: 2px;
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            background: white;
            z-index: -1;
        }
        .timeline-item {
            position: relative;
            z-index: 1;
        }
              .divider-line {
            width: 100px;
            height: 2px;
            background-color: #c9a982;
            margin: 0 auto;
        }
            .divider-line {
            width: 80px;
            height: 1px;
            background-color: #d1a982;
            margin: 0 auto;
        }
        .map-container {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 aspect ratio */
            height: 0;
            overflow: hidden;
        }
        .map-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }
        .member-card {
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        .member-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #f0f0ef;
            color: rgb(37, 34, 34);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .member-card:hover .member-overlay {
            opacity: 0.85;
        }

        .member-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .active-tab {
            border-bottom: 2px solid #c9a982;
            color: #c9a982;
            font-weight: 600;
        }

        .tab-content {
            transition: opacity 300ms ease, transform 300ms ease;
        }

        .tab-enter {
            opacity: 0;
            transform: translateY(10px);
        }

        .tab-enter-active {
            opacity: 1;
            transform: translateY(0);
        }

        .tab-exit {
            opacity: 1;
            transform: translateY(0);
        }

        .tab-exit-active {
            opacity: 0;
            transform: translateY(-10px);
        }
        .rsvp-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
        }

        .divider-line {
            width: 80px;
            height: 1px;
            background-color: #d1a982;
            margin: 0 auto;
        }
              .footer-divider {
            height: 1px;
            background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
        }

.fi-fo-field-wrp-label span.text-sm{
    color: #FF0000 !important; /* Example: Red color */
    /* Or use a Tailwind color directly if your setup allows */
    /* color: theme('colors.blue.600') !important; */
}

/* If you want to target the description text under the label */
.fi-fo-field-wrp-label-description {
    color: #0000FF !important; /* Example: Blue color for description */
}

      .slide {
            transition: all 0.5s ease;
            width: 80%;
            left: 10%;
        }
        .slider-container {
            perspective: 1000px;
            width: 100vw;
            margin-left: calc(-50vw + 50%);
        }
        .current-slide {
            transform: translateX(0) scale(1);
            z-index: 20;
            opacity: 1;
        }
        .prev-slide {
            transform: translateX(-30%) scale(0.9);
            z-index: 10;
            opacity: 0.7;
        }
        .next-slide {
            transform: translateX(30%) scale(0.9);
            z-index: 10;
            opacity: 0.7;
        }
        .hidden-slide {
            opacity: 0;
            transform: scale(0.8);
        }

    </style>
