/* === Unified style.css (rebuilt from English base; Arabic overrides scoped) === */

/* Direction defaults */
html[lang="ar"] body {
  direction: rtl;
  text-align: right;
}
html:not([lang="ar"]) body {
  direction: ltr;
  text-align: left;
}

/* Font family for all languages */
:root, body, nav, a, p, h1, h2, h3, h4, h5, h6, button, input, textarea {
  font-family: 'Noto Sans', Arial, sans-serif;
}

/* === Base (English) CSS === */
/* From style_improved.css */
:root {
  --stroke: #5ebfe2;
  --text-strong: #173a56;
  --section-spacing: 3rem;
}

/* Base styles */
body { 
  font-family: 'Noto Sans', sans-serif; 
  margin: 0; 
  padding: 0; 
  line-height: 1.6;  
  color: #333;  
  background: #f8faff; 
  min-height: 100vh; 
}

/* Header */
header { 
  background: linear-gradient(135deg, rgba(90, 180, 200, 0.8), rgba(120, 200, 220, 0.8)), 
              url('header-worldmap.png'); 
  background-size: cover; 
  background-position: center; 
  color: white; 
  padding: 3rem 2rem; 
  text-align: center; 
}

header .logo-wrapper {
  height: 200px; 
  width: 200px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2c9c91, #3498db);
  padding: 8px;
  display: flex; 
  align-items: center; 
  justify-content: center;
  margin: 0 auto 1rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}

header img.logo { 
  height: 100%; 
  width: 100%;
  border-radius: 50%;
  background: white;
  padding: 6px; 
  box-sizing: border-box;
}

header p { 
  animation: fadeIn 2s ease; 
  font-size: 1.1rem; 
  margin-top: 0.5rem; 
}

/* Buttons */
.btn, header .btn { 
  background: #FF7F00 !important; 
  border: 2px solid transparent; 
  color: white !important; 
  box-shadow: 0 0 18px rgba(255, 127, 0, 0.6); 
  padding: 0.8rem 1.5rem; 
  border-radius: 8px; 
  font-weight: bold; 
  text-decoration: none; 
  transition: all 0.3s ease; 
  display: inline-block; 
  margin-top: 1rem; 
}

.btn:hover, header .btn:hover { 
  background: #E56F00 !important; 
  color: white !important; 
  box-shadow: 0 0 25px rgba(255, 127, 0, 0.9); 
  transform: translateY(-2px); 
}

/* Section base styles with improved spacing */
section { 
  padding: 2rem 1rem; 
  max-width: 900px; 
  margin: 0 auto var(--section-spacing); 
  animation: fadeUp 1.5s ease; 
}

/* Section headings */
h2 { 
  color: #334e68; 
  border-left: 6px solid #60b2e5; 
  padding-left: 10px; 
  margin-bottom: 1rem; 
  margin-top: 0;
}

/* About section - light blue background */
.about-section { 
  background: #e0f8ff; 
  padding: 2rem; 
  border-radius: 12px; 
  color: #334e68; 
  margin-bottom: var(--section-spacing) !important;
  border: 2px solid #b3e0ff;
}

/* Resources section - white background for contrast */
#resources { 
  background: #ffffff; 
  padding: 2rem; 
  border-radius: 12px; 
  color: #334e68; 
  margin-bottom: var(--section-spacing) !important;
  border: 2px solid #e0e0e0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Evaluation section - light green background for distinction */
.eval-section { 
  background: #f0fff4; 
  padding: 2rem; 
  border-radius: 12px; 
  color: #334e68; 
  text-align: center;
  margin-bottom: var(--section-spacing) !important;
  border: 2px solid #90ee90;
}

/* Benefits section - light purple background */
.benefits-section { 
  background: #f8f0ff; 
  padding: 2rem; 
  border-radius: 12px; 
  color: #334e68;
  margin-bottom: var(--section-spacing) !important;
  border: 2px solid #d8bfd8;
}

/* Lessons section - light orange background */
.lessons-section { 
  background: #fff8f0; 
  padding: 2rem; 
  border-radius: 12px; 
  margin-bottom: var(--section-spacing) !important;
  border: 2px solid #ffd4a3;
}

/* How section */
.how-section { 
  background: #e0f8ff; 
  padding: 2rem; 
  border-radius: 12px; 
  color: #334e68; 
}

/* Card styles */
.card, .pricing-box, .resource-box, .lesson-box, .evaluation-box, .box {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(96, 178, 229, 0.15);
  border: 2px solid #60b2e5;
  transition: all 0.3s ease;
  color: #173a56;
  text-align: center; /* Ensure all card content is centered */
}

.card:hover, .pricing-box:hover, .resource-box:hover, .lesson-box:hover, .evaluation-box:hover, .box:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(96, 178, 229, 0.25);
}

/* Specific styling for lesson pricing cards to ensure buttons are centered */
.lessons-section .card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  min-height: 200px;
}

.lessons-section .card h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: #334e68;
}

.lessons-section .card p {
  font-size: 1.2rem;
  font-weight: bold;
  color: #2c3e50;
  margin: 0.5rem 0 1rem 0;
}

.lessons-section .card .btn {
  margin-top: auto;
  width: fit-content;
  align-self: center;
}

/* Grid layouts */
.lessons { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: 1.5rem; 
}

.resources-cards {
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
  gap: 1.5rem; 
  margin-top: 1.5rem; 
  align-items: stretch;
}

/* Evaluation points */
.eval-points { 
  list-style: none; 
  padding: 0; 
  margin: 1rem auto 0; 
  max-width: 720px; 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: 0.6rem; 
}

.eval-points li {}

/* TEFL badge */
.tefl-badge { 
  margin-top: 1rem; 
  padding: 0.8rem 1rem; 
  background: #60b2e5; 
  color: white; 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  border-radius: 8px; 
  font-weight: bold; 
  box-shadow: 0 2px 6px rgba(0,0,0,0.15); 
}

.tefl-badge img { 
  height: 40px; 
}

.tefl-badge a { 
  color: #fff; 
  text-decoration: underline; 
  font-weight: normal; 
}

/* Forms */
form { 
  background: #fff; 
  padding: 1.5rem; 
  border-radius: 8px; 
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
  animation: fadeUp 2s ease; 
}

input, textarea { 
  width: 100%; 
  padding: 0.5rem; 
  margin-top: 0.5rem; 
  border: 1px solid #ccc; 
  border-radius: 5px; 
}

button { 
  margin-top: 1rem; 
}

/* Footer */
footer { 
  background: linear-gradient(135deg, #60b2e5, #87ceeb); 
  color: white; 
  text-align: center; 
  padding: 2rem 1rem; 
  margin-top: 2rem; 
}

footer a { 
  color: white; 
  margin: 0 10px; 
  text-decoration: underline; 
  font-size: 0.9rem; 
}

footer .tefl-footer { 
  margin-top: 1rem; 
  font-size: 0.9rem; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  gap: 10px; 
}

footer .tefl-footer img { 
  height: 30px; 
}

/* Lesson note */
.lesson-note { 
  text-align: center; 
  margin-top: 1rem; 
  font-size: 0.95rem; 
  color: #2c3e50; 
  font-style: italic; 
}

/* Animations */
@keyframes fadeIn { 
  from {opacity: 0;} 
  to {opacity: 1;} 
}

@keyframes fadeUp { 
  from {opacity: 0; transform: translateY(20px);} 
  to {opacity: 1; transform: translateY(0);} 
}

/* Mobile responsiveness */
@media (max-width: 600px) {
  :root {
    --section-spacing: 2rem;
  }
  
  .lessons { 
    grid-template-columns: 1fr; 
  }
  
  header .logo-wrapper { 
    height: 150px; 
    width: 150px; 
  }
  
  .eval-points { 
    grid-template-columns: 1fr; 
  }
  
  section {
    padding: 1.5rem 1rem;
  }
}

/* Special CTA styling */
.eval-section .btn.cta-primary {
  display: block;
  max-width: 460px;
  margin: 18px auto 0;
  text-align: center;
}

/* Visual separator between sections */
section:not(:last-child)::after {
  content: '';
  display: block;
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #60b2e5, transparent);
  margin: var(--section-spacing) auto 0;
}

/* Remove separator after footer */
footer::after {
  display: none;
}




/* === Arabic overrides (scoped) === */

/* Arabic-scoped from ar_style.css */
  background-repeat: no-repeat;
  background-size: cover, cover, auto;
.button-box, html[lang="ar"] .resource-box, html[lang="ar"] .btn-wrapper, html[lang="ar"] .card, html[lang="ar"] .pricing-box, html[lang="ar"] .lesson-box, html[lang="ar"] .evaluation-box, html[lang="ar"] .box {
    background: linear-gradient(135deg, #f0f8ff, #e6f3ff, #ddeeff);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(96, 178, 229, 0.15);
    border: 2px solid #60b2e5;
    transition: all 0.3s ease;
}html[lang="ar"] /* === Gradient overrides for unified brand blue === */
.eval-section { 
    background: #e9f6fa; 
    border: 2px solid #5ebfe2;
    box-shadow: 0 4px 12px rgba(96, 178, 229, 0.15);

  background-repeat: no-repeat;
  background-size: cover, cover, auto;
  background-blend-mode: screen, normal, normal;}html[lang="ar"] .eval-section .btn.cta-primary {display:block;max-width:460px;margin:18px auto 0;text-align:center;}html[lang="ar"] /* === Uniform CTA color across all locales (strict color-only override) === */
a.btn, html[lang="ar"] .btn {
  background: #FF7F00 !important;
  color: #ffffff !important;
  border-color: transparent !important;
}html[lang="ar"] a.btn:hover, html[lang="ar"] .btn:hover {
  background: #E56F00 !important;
}



/* Resource section boxes */
.resource-box {
  background: linear-gradient(135deg, #e6f9f7, #f0fdfd);
}

/* Evaluation section boxes */
.evaluation-box {
  background: linear-gradient(135deg, #e9f6fa, #f0faff);
}

/* Lesson pricing section boxes */
.pricing-box {
  background: linear-gradient(135deg, #fef6e6, #fff9f0);
}


/* === Unified gradient background for all button boxes === */
.resource-box, .evaluation-box, .pricing-box {
  background: linear-gradient(135deg, #f0faff, #e9f6fa);
}


/* === Unify evaluation list item background with button boxes === */
.eval-points li {}


/* === Force eval boxes to match card background exactly === */
.eval-section .eval-points li {}


/* === Unified eval box background across all languages === */
.eval-section .eval-points li {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 2px solid #60b2e5;
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
}


/* === Override Arabic card backgrounds to unify with global style === */
html[lang="ar"] .card {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 2px solid #60b2e5 !important;
}

/* Ensure lists inside boxes are left-aligned */
.box ol, .box ol li { text-align: left; }

html{scroll-behavior:smooth}
:target{scroll-margin-top:80px}


/* Payment and Platform Logos Styling */
.payment-logos, .platform-logos {
  margin-top: 1em;
  text-align: center;
}
.payment-logos img, .platform-logos img {
  height: 30px;
  margin: 5px 10px;
  vertical-align: middle;
}
.platform-logos span {
  display: block;
  margin-bottom: 0.5em;
  font-size: 0.9em;
  color: #444;
}


/* Payment and Platform Logos Styling */
.payment-logos, .platform-logos {
  margin-top: 1em;
  text-align: center;
}
.payment-logos img, .platform-logos img {
  height: 30px;
  margin: 5px 10px;
  vertical-align: middle;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.payment-logos img:hover, .platform-logos img:hover {
  transform: scale(1.1);
  opacity: 0.9;
}
.platform-logos span {
  display: block;
  margin-bottom: 0.5em;
  font-size: 0.9em;
  color: #444;
}

/* Active nav link style */
nav a.active { font-weight: bold; text-decoration: underline; }



.how-section .box {
  background: #f0fff4;
  border: 2px solid #90ee90;
}



.how-section {
  border: 3px solid #60b2e5; /* blue border */
  box-shadow: 0 6px 18px rgba(96, 178, 229, 0.3); /* blue shadow */
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: var(--section-spacing, 2rem);
}



.chat-bubble {
  display: inline-block;
  padding: 1rem 1.2rem;
  border-radius: 16px;
  margin: 0.8rem 0;
  max-width: 60%;
  font-size: 1rem;
  line-height: 1.4;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.chat-bubble.left {
  background: #f1f1f1;
  color: #333;
  float: left;
  clear: both;
}

.chat-bubble.right {
  background: #60b2e5;
  color: white;
  float: right;
  clear: both;
}



.floating-testimonials {
  position: relative;
  width: 100%;
  margin: 2rem 0;
  display: block;
  overflow: hidden;
}

.chat-bubble {
  position: relative;
  display: block;
  padding: 1.2rem;
  border-radius: 50%;
  margin: 2rem;
  max-width: 280px;
  font-size: 0.95rem;
  line-height: 1.4;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.chat-bubble.left {
  background: #f1f1f1;
  color: #333;
  float: left;
  clear: both;
}

.chat-bubble.right {
  background: #60b2e5;
  color: white;
  float: right;
  clear: both;
}



.floating-testimonials {
  position: fixed;
  top: 20%;
  left: 0;
  right: 0;
  width: 100%;
  pointer-events: none; /* ensures they don't block clicks on main content */
}

.chat-bubble {
  position: fixed;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  padding: 1.5rem;
  font-size: 1rem;
  line-height: 1.3;
  box-shadow: 0 6px 14px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: auto; /* clickable if needed */
}

.chat-bubble.left {
  left: 20px;
}

.chat-bubble.right {
  right: 20px;
}

.chat-bubble.left:nth-of-type(1) { top: 25%; background: #f1f1f1; color: #333; }
.chat-bubble.right:nth-of-type(2) { top: 45%; background: #60b2e5; color: #fff; }
.chat-bubble.left:nth-of-type(3) { top: 65%; background: #f1f1f1; color: #333; }



@keyframes floaty {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

.chat-bubble {
  animation: floaty 6s ease-in-out infinite;
}

.chat-bubble.left:nth-of-type(1) { 
  top: 25%; 
  background: #90ee90; /* green */
  color: #333; 
}

.chat-bubble.right:nth-of-type(2) { 
  top: 45%; 
  background: #60b2e5; /* blue */
  color: #fff; 
}

.chat-bubble.left:nth-of-type(3) { 
  top: 65%; 
  background: #d8bfd8; /* purple */
  color: #333; 
}



.chat-bubble.left:nth-of-type(1) { 
  top: 22%; left: 30px;
  background: #90ee90; /* green */
  color: #333; 
}

.chat-bubble.right:nth-of-type(2) { 
  top: 50%; right: 40px;
  background: #60b2e5; /* blue */
  color: #fff; 
}

.chat-bubble.left:nth-of-type(3) { 
  top: 70%; left: 50px;
  background: #d8bfd8; /* purple */
  color: #333; 
}



.chat-bubble {
  transition: opacity 1s ease-in-out;
  opacity: 1;
}



.chat-bubble {
  transition: opacity 1.5s ease-in-out;
  opacity: 1;
}



section, .box, .eval-section, #contact {
  text-align: left !important;
}



.floating-testimonials {
  position: fixed;
  top: 30%;
  left: 0;
  right: 0;
  width: 100%;
  pointer-events: none;
  z-index: 1000;
}

.chat-bubble {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  padding: 1rem;
  font-size: 0.9rem;
  line-height: 1.3;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0.85;
  transition: opacity 1.5s ease-in-out;
  pointer-events: auto;
  animation: floaty 8s ease-in-out infinite;
}

.chat-bubble.left {
  position: fixed;
  left: 20px;
  top: 35%;
  background: #60b2e5;
  color: white;
}

.chat-bubble.right {
  position: fixed;
  right: 20px;
  top: 55%;
  background: #90ee90;
  color: #333;
}

@keyframes floaty {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0px); }
}



/* Hide floating testimonials on small screens */
@media (max-width: 768px) {
  .floating-testimonials {
    display: none !important;
  }
}