/* General Styles */
:root {
  --color-primary: #2e6b3e; /* Green-700 / Green-800 */
  --color-primary-dark: #23502f; /* Green-800 / Green-900 */
  --color-secondary-accent: #D4AF37; /* Gold */
  --color-light-accent: #F0EFEB; /* Light Beige/Off-white for backgrounds */
  --color-text-dark: #1f2937; /* Gray-800 */
  --color-text-medium: #4b5563; /* Gray-600 */
  --color-text-light: #f9fafb; /* Gray-50 */
}

/* Language-specific styles */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] body {
  font-family: "Poppins", "Noto Sans Arabic", sans-serif;
}

[dir="ltr"] {
  direction: ltr;
  text-align: left;
}

/* Language toggle button */
.language-toggle {
  @apply bg-secondary-accent text-primary px-4 py-3 rounded-full hover:bg-yellow-500 transition-all duration-300 font-semibold text-base shadow-lg hover:shadow-xl transform hover:scale-105;
  min-width: 80px;
  text-align: center;
  border: 2px solid var(--color-primary);
  position: relative;
  overflow: hidden;
}

.language-toggle::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s;
}

.language-toggle:hover::before {
  left: 100%;
}

[dir="rtl"] .language-toggle {
  font-family: "Noto Sans Arabic", sans-serif;
}

/* Mobile language toggle */
.language-toggle.text-sm {
  @apply px-3 py-2 text-sm;
  min-width: 70px;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  line-height: 1.7; /* Increased for better readability */
  color: var(--color-text-dark);
  background-color: var(--color-light-accent); /* Light background for the body */
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700; /* Bolder headings */
  color: var(--color-primary); /* Default heading color */
}

h1 { @apply text-4xl md:text-5xl lg:text-6xl; }
h2 { @apply text-3xl md:text-4xl lg:text-5xl; }
h3 { @apply text-2xl md:text-3xl; }
h4 { @apply text-xl md:text-2xl; }


/* Links */
a {
  color: var(--color-primary);
  transition: color 0.3s ease;
}
a:hover {
  color: var(--color-primary-dark);
}

/* Buttons - Base styles, can be extended with Tailwind */
.btn {
  @apply inline-block font-semibold py-3 px-6 rounded-lg shadow-md hover:shadow-lg transform hover:scale-105 transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2;
}
.btn-primary {
  @apply bg-primary text-white hover:bg-primary-dark focus:ring-primary;
}
.btn-secondary {
  @apply bg-secondary-accent text-primary hover:bg-yellow-500 focus:ring-secondary-accent;
}
.btn-outline-light {
    @apply bg-transparent border-2 border-white text-white hover:bg-white hover:text-primary focus:ring-white;
}


/* Header and Navigation */
header {
  background-color: #fff; /* Start with solid white */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Softer initial shadow */
}

header.scrolled {
  @apply py-2 shadow-xl; /* Reduced padding */
  background-color: rgba(255, 255, 255, 0.97); /* Slightly more opaque */
  backdrop-filter: blur(10px); /* Subtle blur for modern feel */
}

.logo-animation {
  transition: transform 0.3s ease, height 0.3s ease; /* Added height transition */
}
.logo-animation:hover {
  transform: scale(1.05); /* Subtle hover scale */
}
.logo-animation.scrolled-logo {
  @apply h-12 md:h-16; /* Reduced logo size on scroll */
}

nav ul {
  list-style: none;
  padding: 0;
}
nav ul li {
  position: relative;
}
.nav-link {
    @apply text-gray-700 hover:text-primary font-medium relative;
    /* For the underline effect */
    padding-bottom: 4px; /* Space for the underline */
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: width 0.3s ease-in-out;
}
.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}
.nav-link.active {
  color: var(--color-primary); /* Active link color */
  font-weight: 600; /* Slightly bolder active link */
}


/* Mobile Menu */
@media (max-width: 768px) {
  #nav-menu {
    display: flex; /* Keep as flex for transform to work, opacity controls visibility initially */
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    justify-content: center;
    align-items: center;
    z-index: 40; /* Ensure it's below sticky header initially if needed, but above content */
    padding: 20px;
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s ease;
    visibility: hidden; /* Use visibility for better accessibility */
  }

  [dir="rtl"] #nav-menu {
    left: auto;
    right: 0;
    transform: translateX(100%);
  }

  #nav-menu.active {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }

  [dir="rtl"] #nav-menu.active {
    transform: translateX(0);
  }

  #nav-menu li {
    margin: 20px 0; /* Increased spacing */
    text-align: center;
  }
  #nav-menu li a {
    font-size: 1.5rem; /* Larger text for better mobile visibility */
    @apply text-gray-800 hover:text-primary;
  }

  #nav-menu li ul { /* Submenu styling for mobile if you add dropdowns later */
    position: static;
    display: none; /* Manage with JS if needed */
    background-color: transparent;
    padding: 10px 0 0 0;
    margin-top: 10px;
  }
}
.no-scroll {
  overflow: hidden;
}


/* Hero Section */
.hero {
  position: relative;
  background-attachment: fixed; /* Parallax effect */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.hero::before { /* Dark overlay for better text readability */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.55); /* Slightly darker overlay */
    z-index: 1;
}
.hero > .relative.z-10 { /* Ensure content is above overlay */
    z-index: 2;
}

.animate-hero-text {
  animation: fadeInUp 1s ease-out forwards;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-blink {
  animation: blink 0.6s step-end infinite;
}
@keyframes blink {
  50% {
    border-color: transparent;
  }
}

/* Features Section (Why Choose UNI MASS?) - Flip Cards */
.features .flip-card {
  perspective: 1500px; /* Increased perspective for a more pronounced 3D effect */
  min-height: 220px; /* Ensure cards have enough height */
}

.features .flip-card-inner {
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother transition */
  transform-style: preserve-3d;
}

.features .flip-card-inner.flipped { /* JS will toggle this class */
  transform: rotateY(180deg);
}

.features .flip-card-front,
.features .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  @apply rounded-xl shadow-xl p-6; /* Consistent padding and styling */
}

.features .flip-card-front {
  @apply bg-white border-t-4 border-secondary-accent; /* Use accent color for border */
}
.features .flip-card-front i {
  @apply text-primary; /* Icon color */
}
.features .flip-card-front h3 {
  @apply text-primary; /* Heading color */
}

.features .flip-card-back {
  @apply bg-primary text-white; /* Use primary color for back */
  transform: rotateY(180deg);
}
.features .flip-card-back p {
  @apply text-gray-100;
}

/* Testimonials Section */
.testimonial-card {
    @apply bg-white p-8 rounded-xl shadow-lg transform hover:scale-103 transition-all duration-300 ease-in-out relative overflow-hidden;
    border-left: 5px solid var(--color-secondary-accent);
}

[dir="rtl"] .testimonial-card {
    border-left: none;
    border-right: 5px solid var(--color-secondary-accent);
}

.testimonial-card i.fa-quote-left {
    @apply text-4xl absolute opacity-20;
    color: var(--color-primary);
    top: 1rem;
    left: 1rem;
}

[dir="rtl"] .testimonial-card i.fa-quote-left {
    left: auto;
    right: 1rem;
}

.testimonial-card i.fa-quote-right {
    @apply text-4xl absolute opacity-20;
    color: var(--color-primary);
    bottom: 1rem;
    right: 1rem;
}

[dir="rtl"] .testimonial-card i.fa-quote-right {
    right: auto;
    left: 1rem;
}

/* Services Section */
.service-item-card {
  @apply bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1.5 border-l-4 border-primary flex items-center space-x-4;
}

[dir="rtl"] .service-item-card {
  border-l-4: none;
  border-r-4: 4px solid var(--color-primary);
  flex-direction: row-reverse;
}

.service-item-card i {
  @apply text-3xl text-primary;
}
.service-item-card p {
  @apply text-gray-700 font-medium;
}

/* Tables */
table {
  @apply w-full text-left border-collapse shadow-md rounded-lg overflow-hidden; /* Added shadow and rounded corners to table container */
}
th {
  @apply p-4 border-b bg-primary text-white tracking-wider font-semibold text-sm uppercase;
}
td {
  @apply p-4 border-b border-gray-200 text-gray-700;
}
tbody tr:nth-child(odd) {
  @apply bg-gray-100; /* Zebra striping for odd rows */
}
tbody tr:nth-child(even) {
  @apply bg-white; /* Zebra striping for even rows */
}
tbody tr:hover {
  @apply bg-green-100; /* Highlight on hover */
}
.table-container { /* Use this div to wrap tables for overflow & styling */
    @apply overflow-x-auto rounded-lg shadow-lg;
}


/* About Page - Mission/Vision cards */
.mission-vision-card {
    @apply p-8 rounded-xl shadow-xl;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mission-vision-card:hover {
    @apply transform -translate-y-1 shadow-2xl;
}

/* About Page - Core Values */
.value-card {
    @apply text-center p-6 bg-white rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:scale-105;
}
.value-card i {
    @apply text-5xl mb-6 transition-transform duration-300 ease-in-out;
    color: var(--color-primary);
}
.value-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/* About Page - Progress Bars */
.progress-bar-container { /* Container for the label and bar */
    @apply mb-4;
}
.progress-bar-label {
    @apply text-gray-700 font-medium mb-1 flex justify-between;
}
.progress-bar {
  background-color: #e9ecef;
  border-radius: 0.375rem; /* Tailwind's rounded-md */
  height: 1.5rem; /* Increased height */
  overflow: hidden;
  width: 100%;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}
.progress {
  background-color: var(--color-primary);
  height: 100%;
  width: 0%; /* Start at 0, JS will animate */
  border-radius: 0.375rem 0 0 0.375rem;
  transition: width 1.8s cubic-bezier(0.25, 1, 0.5, 1); /* Smoother, longer animation */
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Text to the right */
  padding-right: 0.5rem;
  color: white;
  font-size: 0.8rem;
  font-weight: 500;
}

/* Contact Form */
.contact-form input,
.contact-form textarea {
  @apply w-full p-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-200 ease-in-out shadow-sm hover:shadow-md;
  /* Added more focus styling and hover shadow */
}
.contact-form .input-group { /* For icon positioning */
    @apply relative;
}
.contact-form .input-icon {
    @apply absolute inset-y-0 left-0 flex items-center pl-4 text-gray-400;
}
.contact-form input.pl-12, .contact-form textarea.pl-12 { /* If icon is present */
    padding-left: 3rem;
}

.contact-form button { /* Using .btn and .btn-primary from above */
  @apply w-full;
}

/* Contact Page - Info Box */
.contact-details-box {
    @apply bg-gradient-to-br from-primary to-green-700 text-white p-8 md:p-10 rounded-xl shadow-2xl hover:shadow-3xl transition-all duration-300 ease-in-out transform hover:scale-103;
}
.contact-details-box hr {
    @apply border-green-500 my-5;
}
.contact-details-box a {
    @apply text-gold-300 hover:text-yellow-400 underline;
}

/* Map Styling */
.map-container {
    @apply rounded-xl shadow-xl overflow-hidden border-4 border-white; /* Added border and ensured overflow is hidden for rounded corners */
}
#map-egypt,
#map-uae {
  height: 400px; /* Increased height */
  width: 100%;
}

/* Footer */
footer {
    @apply bg-gray-900 text-gray-300 py-12;
}
footer h3 {
  @apply text-xl font-semibold mb-4 text-white; /* Footer headings white */
}
footer a {
  @apply text-gray-400 hover:text-secondary-accent transition-colors duration-300;
}
footer .social-icons a {
  @apply text-gray-400 transform transition-all duration-300 ease-in-out;
}
footer .social-icons a:hover {
  color: var(--color-secondary-accent);
  transform: scale(1.2) translateY(-2px);
}
footer .footer-bottom {
    @apply mt-10 text-center border-t border-gray-700 pt-6 text-sm text-gray-500;
}
footer .footer-bottom a {
    @apply text-green-500 hover:text-secondary-accent hover:underline;
}


/* Back to Top Button */
#back-to-top {
  @apply fixed bottom-6 right-6 bg-primary text-white p-3 rounded-full shadow-lg hover:bg-primary-dark transition-all duration-300 ease-in-out z-30;
  /* Ensure it's above most content */
}

[dir="rtl"] #back-to-top {
  right: auto;
  left: 1.5rem;
}

#back-to-top i {
    @apply text-xl;
}


/* AOS Animation Delays (Example) */
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }


/* Utility for card consistency */
.content-card {
    @apply bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 ease-in-out;
}

/* Responsive Adjustments */
@media (max-width: 640px) {
  h1 { @apply text-3xl; }
  h2 { @apply text-2xl; }
  h3 { @apply text-xl; }

  .hero h1 {
    font-size: 2.8rem; /* Slightly larger for mobile hero */
  }
  .hero p {
    font-size: 1.1rem;
  }
  .features .flip-card {
    min-height: 200px; /* Adjust flip card height for mobile */
  }
  .features .flip-card-front i,
  .features .flip-card-back p {
    font-size: 1rem;
  }
  .features .flip-card-front h3 {
    font-size: 1.1rem;
  }
}

/* WhatsApp Button Styles */
.whatsapp-button {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  border: 2px solid #25D366;
  position: relative;
  overflow: hidden;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}

.whatsapp-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.6s ease;
}

.whatsapp-button:hover::before {
  left: 100%;
}

.whatsapp-button:hover {
  background: linear-gradient(135deg, #128C7E 0%, #075E54 100%);
  border-color: #128C7E;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
}

.whatsapp-button:active {
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.2);
}

.whatsapp-button i {
  font-size: 1.25rem;
  margin-right: 0.75rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

[dir="rtl"] .whatsapp-button i {
  margin-right: 0;
  margin-left: 0.75rem;
}

/* Responsive WhatsApp buttons */
@media (max-width: 640px) {
  .whatsapp-button {
    min-height: 44px;
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
  }
  
  .whatsapp-button i {
    font-size: 1.1rem;
  }
}