/* RTL specific styles */
body.rtl {
  direction: rtl;
  text-align: right;
}

/* Complete header restructuring for RTL */
.rtl .header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "logo nav lang";
  gap: 30px; /* Add space between grid areas */
}

.rtl .logo-container {
  grid-area: logo;
}

.rtl .nav-menu {
  grid-area: nav;
  display: flex;
  flex-direction: row-reverse;
/* Increase space between nav items */
}

.rtl .language-selector {
  grid-area: lang;
  display: flex;
  flex-direction: row-reverse;
  gap: 15px; /* Increase space between language options */
  padding-left: 20px; /* Add some padding on the left */
}

/* Additional RTL adjustments */
.rtl .nav-menu a {
  margin-left: 0;
  margin-right: 0; /* Remove default margin and let gap handle spacing */
  padding: 8px 15px; /* Increase padding for better clickability */
}

.rtl .language-selector a {
  padding: 8px 12px; /* Consistent padding for language selector items */
}

/* Ensure text alignment in form elements */
.rtl input,
.rtl textarea {
  text-align: right;
}

/* Add any other RTL-specific styles here */