/* Import Tailwind CSS utilities */
@import url('https://cdn.tailwindcss.com');
/* Import a font for better readability */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap');

/* Base styles for the body */
body {
    font-family: 'Tajawal', sans-serif;
    background-color: #f7f9fb;
    color: #333;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    direction: rtl; /* Set text direction to right-to-left */
}

/* Base styles for all links */
a {
    color: #2563eb;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Custom classes can be added here if needed, but Tailwind is used for most styling */
.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* You can also add more custom styles specific to your design here */
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
}