body {
    font-family: var(--font-family);
}

/* RTL specific adjustments */
.lang-ar .dropdown-menu {
    text-align: right;
}

/* Custom brand styling */
.navbar-brand img {
    height: 75px; /* Increased from 50px to 75px (1.5x larger) */
}

/* Active nav item styling */
.nav-link.active {
    font-weight: bold;
    color: var(--bs-primary) !important;
}
#services-preview .card {
    border-radius: 10px;
    transition: transform 0.3s;
}

#services-preview .card:hover {
    transform: translateY(-5px);
}

/* Media queries for responsive design */
@media (max-width: 768px) {
    #services-preview .card {
        margin-bottom: 20px;
    }
}
#values-preview .card, 
#services-preview .card {
    border-radius: 10px;
    transition: transform 0.3s;
}

#values-preview .card:hover,
#services-preview .card:hover {
    transform: translateY(-5px);
}

/* Media queries for responsive design */
@media (max-width: 768px) {
    #values-preview .card,
    #services-preview .card {
        margin-bottom: 20px;
    }
}
.simple-lang-switch {
    color: #333;
    text-decoration: none;
    font-size: 0.85rem;
    padding: 2px 5px;
    border-bottom: 1px solid #ddd;
}

.simple-lang-switch:hover {
    border-bottom-color: var(--bs-primary);
}
.join-button {
    margin-left: auto;
    margin-right: 15px;
}

/* Add language-specific spacing */
.lang-ar .join-button {
    margin-right: 20px; /* Increased space on right side in Arabic */
}

.lang-en .join-button {
    margin-right: 15px;
}
/* Header section styling */
.navbar .container {
    display: flex;
    align-items: center;
}

.header-logo {
    flex: 0 0 auto;
}

.header-menu {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}

.header-join {
    flex: 0 0 auto;
    margin: 0 15px;
}

.header-lang {
    flex: 0 0 auto;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .navbar .container {
        flex-wrap: wrap;
    }
    
    .header-logo {
        flex: 1 1 50%;
    }
    
    .header-menu {
        order: 4;
        flex: 0 0 100%;
    }
    
    .header-join, .header-lang {
        flex: 0 0 auto;
    }
}
.mobile-lang-switch {
    display: inline-block;
    padding: 8px 15px;
    color: var(--bs-primary);
    border: 1px solid var(--bs-primary);
    border-radius: 4px;
    text-decoration: none;
}

.mobile-lang-switch:hover {
    background-color: var(--bs-primary);
    color: white;
}
/* Logo color for icons */
.logo-primary-color {
    color: #0056b3; /* Replace with your exact logo primary color */
}

/* Justified text for better readability */
.text-justify {
    text-align: justify;
}

/* Additional about section styling */
#about-preview .lead {
    line-height: 1.8;
    color: #333;
}

#about-preview .card {
    border: none;
    overflow: hidden;
}

#about-preview .card img {
    transition: transform 0.3s ease;
}

#about-preview .card:hover img {
    transform: scale(1.05);
}
/* Equal height solution for about section */
#about-preview .row.align-items-center {
    display: flex;
    flex-wrap: wrap;
}

#about-preview .col-lg-6 {
    display: flex;
    flex-direction: column;
}

#about-preview .card.shadow {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#about-preview .card-img-top {
    object-fit: cover;
    flex-grow: 1;
    height: 100%;
}
/* Footer quick links alignment fix */
footer .list-unstyled li {
    clear: both;
    display: block;
    width: 100%;
    margin-bottom: 8px;
}

/* RTL specific fixes */
.lang-ar footer .list-unstyled {
    padding-right: 0;
    text-align: right;
}

.lang-ar footer .list-unstyled li a {
    display: block;
    position: relative;
}
/* Enhanced spacing for contact section icons */
footer .d-flex.align-items-start i {
    margin-right: 12px;
}

/* RTL-specific spacing for Arabic */
.lang-ar footer .d-flex.align-items-start i {
    margin-right: 0;
    margin-left: 18px; /* Increased spacing for Arabic */
}
/* Complete RTL button fix for Arabic */

/* Social Media Icons with Brand Colors - Essential Styling */
.social-icons {
    display: flex;
    gap: 12px;
}

.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    text-decoration: none;
}

.social-icons .facebook {
    background-color: #3b5998;
}

.social-icons .twitter {
    background-color: #1da1f2;
}

.social-icons .instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.social-icons .linkedin {
    background-color: #0077b5;
/* RTL accordion styling for Arabic - Arrow positioning fix */
.lang-ar .accordion .accordion-item {
    text-align: right;
}

.lang-ar .accordion .accordion-button {
    flex-direction: row-reverse;
    position: relative;
    padding-right: 1.25rem;
    padding-left: 3rem; /* Extra padding on left for arrow */
}

/* Direct targeting of accordion arrows in RTL mode */
.lang-ar .accordion .accordion-button::after {
    position: absolute !important;
    left: 1.25rem !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.lang-ar .accordion .accordion-body {
    text-align: right;
}
}

/* Reduced H3 size for better visual hierarchy */
h3, .h3 {
    font-size: 1.2rem;
}

/* Ensure consistent sizing in cards */
.card-title.h3, 
.card .card-title {
    font-size: 1.1rem;
}

/* Maintain proper spacing with smaller headings */
h3, .h3 {
    margin-bottom: 0.75rem;
}

/* Custom container width for larger screens */
@media (min-width: 1400px) {
  .container,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 1560px; /* Setting close to 1600px with some margin */
  }
}

/* Ensure content remains properly spaced in wider layout */
.row > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

/* Improve readability on wider screens */
@media (min-width: 1400px) {
  p, .lead {
    max-width: 80ch; /* Optimal reading line length */
    margin-left: auto;
    margin-right: auto;
  }
:root {
  /* Primary color palette */
  --blue: #011b58;
  --yellow: #f3c417;
  
  /* Variations for hover states and accents */
  --blue-light: #0a2d7a;
  --blue-dark: #00103a;
  --yellow-light: #ffd042;
  --yellow-dark: #d9ac00;
  
  /* Set as Bootstrap theme colors */
  --bs-primary: var(--blue);
  --bs-secondary: var(--yellow);
}

/* Background color classes */
.bg-blue {
  background-color: var(--blue);
  color: white;
}

.bg-yellow {
  background-color: var(--yellow);
  color: black;
}

/* Text color classes */
.text-blue {
  color: var(--blue) !important;
}

.text-yellow {
  color: var(--yellow) !important;
}

/* Button styles */
.btn-blue {
  background-color: var(--blue);
  border-color: var(--blue);
  color: white;
}

.btn-blue:hover, .btn-blue:focus {
  background-color: var(--blue-light);
  border-color: var(--blue-light);
  color: white;
}
  /* Enhanced button styling for consistent cross-device experience */
  .btn-yellow {
    background-color: var(--yellow);
    border-color: var(--yellow);
    color: var(--blue);
    transition: all 0.3s ease;
  }

  .btn-yellow:hover, .btn-yellow:focus {
    background-color: var(--yellow-light);
    border-color: var(--yellow);
    color: var(--blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }

  /* Mobile-specific optimizations */
  @media (max-width: 576px) {
    .btn-yellow {
      width: 80%; /* Wider button on very small screens */
      max-width: 280px;
    }
  
    #hero .btn-yellow {
      margin-top: 1rem; /* Extra spacing on mobile */
    }
  }

  /* RTL language support for buttons */
  .lang-ar .btn-yellow {
    font-family: var(--font-family-arabic, 'Tajawal', sans-serif);
    font-weight: 700;
  }
/* Accent elements */
.border-blue {
  border-color: var(--blue) !important;
}

.border-yellow {
  border-color: var(--yellow) !important;
}

/* Card accents */
.card-accent-blue {
  border-top: 4px solid var(--blue);
}

.card-accent-yellow {
  border-top: 4px solid var(--yellow);
}

/* Override Bootstrap primary and secondary */
.btn-primary {
  background-color: var(--blue);
  border-color: var(--blue);
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--blue-light);
  border-color: var(--blue-light);
}

.btn-secondary {
  background-color: var(--yellow);
  border-color: var(--yellow);
  color: black;
}

.btn-secondary:hover, .btn-secondary:focus {
  background-color: var(--yellow-light);
  border-color: var(--yellow-light);
  color: black;
}}