/* ========================================================
   STYLINGCV ARABIC HOMEPAGE - COMPLETE REDESIGN 2025
   Color Palette:
   - Navy:  #111a2b (Primary Dark)
   - Teal:  #09b9aa (Primary Accent)
   - Blue:  #109be6 (Secondary Accent)
   - Gold:  #FEB516 (Highlight/CTA)
   - White: #ffffff
   - Light Gray: #f8fafc
   ======================================================== */

/* ========== FONTS ========== */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap');

/* ========== CSS VARIABLES ========== */
:root {
  --ar-navy: #111a2b;
  --ar-navy-light: #1a2744;
  --ar-teal: #09b9aa;
  --ar-teal-dark: #08a89a;
  --ar-blue: #109be6;
  --ar-gold: #FEB516;
  --ar-white: #ffffff;
  --ar-light: #f8fafc;
  --ar-gray: #64748b;
  --ar-text: #334155;
  --ar-border: #e2e8f0;
  --ar-shadow: rgba(17, 26, 43, 0.1);
  --ar-shadow-lg: rgba(17, 26, 43, 0.15);
}

/* ========================================================
   ARABIC HOMEPAGE (page-id-867) - FIX INLINE LAYOUTS
   The homepage HTML uses lots of inline styles like:
   - `grid-template-columns: ...` without `display: grid`
   - `align-items/gap/...` without `display: flex`
   This makes sections look broken/unstyled.
   ======================================================== */
html[lang="ar"] body.page-id-867 .nt-theme-content div[style*="grid-template-columns"] {
  display: grid !important;
}

html[lang="ar"] body.page-id-867 .nt-theme-content div[style*="justify-content"][style*="flex-wrap"] {
  display: flex !important;
}

html[lang="ar"] body.page-id-867 .nt-theme-content div[style*="align-items"][style*="gap"] {
  display: flex !important;
}

html[lang="ar"] body.page-id-867 .nt-theme-content div[style*="align-items"][style*="justify-content"] {
  display: flex !important;
}

/* Make inline "cards" look premium */
html[lang="ar"] body.page-id-867 .nt-theme-content div[style*="background: white"][style*="border-radius"] {
  border: 1px solid var(--ar-border) !important;
  box-shadow: 0 10px 30px var(--ar-shadow) !important;
}

/* Improve homepage section spacing consistency */
html[lang="ar"] body.page-id-867 .nt-theme-content > div[style*="padding: 60px 20px"] {
  padding: 80px 20px !important;
}

html[lang="ar"] body.page-id-867 .nt-theme-content > div[style*="padding: 40px 20px"] {
  padding: 60px 20px !important;
}

/* Resource links grid (inline) */
html[lang="ar"] body.page-id-867 .nt-theme-content div[style*="grid-template-columns: repeat(2"] a {
  display: block !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  border: 1px solid var(--ar-border) !important;
  background: var(--ar-white) !important;
  color: var(--ar-teal) !important;
  font-weight: 700 !important;
}

html[lang="ar"] body.page-id-867 .nt-theme-content div[style*="grid-template-columns: repeat(2"] a:hover {
  background: rgba(9, 185, 170, 0.08) !important;
  border-color: rgba(9, 185, 170, 0.35) !important;
  color: var(--ar-navy) !important;
}

/* Footer-injected slider section overrides (sldd) */
html[lang="ar"] body.page-id-867 .nt-theme-content .banner-container.alternative-banner section.sldd {
  height: auto !important;
  min-height: 520px !important;
  padding: 60px 0 !important;
}

html[lang="ar"] body.page-id-867 .nt-theme-content .banner-container.alternative-banner .kadjhYHHG {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(9, 185, 170, 0.25) !important;
  border-radius: 18px !important;
  padding: 26px 26px !important;
  max-width: 720px !important;
  box-shadow: 0 18px 50px rgba(17, 26, 43, 0.25) !important;
}

html[lang="ar"] body.page-id-867 .nt-theme-content .banner-container.alternative-banner .kadjhYHHG h3 {
  color: var(--ar-white) !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
  margin: 0 0 14px !important;
}

html[lang="ar"] body.page-id-867 .nt-theme-content .banner-container.alternative-banner .kadjhYHHG p {
  color: rgba(255, 255, 255, 0.78) !important;
}

html[lang="ar"] body.page-id-867 .nt-theme-content .banner-container.alternative-banner .kadjhYHHG a.btn {
  background: linear-gradient(135deg, var(--ar-teal) 0%, var(--ar-teal-dark) 100%) !important;
  border-radius: 12px !important;
  padding: 14px 24px !important;
  font-weight: 800 !important;
}

/* ========== GLOBAL RTL STYLES ========== */
html[lang="ar"],
html[lang="ar"] body,
body.rtl,
body[dir="rtl"] {
  font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  direction: rtl;
  text-align: right;
  line-height: 1.8;
  color: var(--ar-text);
  background-color: var(--ar-white);
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
body.rtl h1,
body.rtl h2,
body.rtl h3,
body.rtl h4,
body.rtl h5,
body.rtl h6 {
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  color: var(--ar-navy) !important;
}

html[lang="ar"] p,
body.rtl p {
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 400;
  line-height: 1.9;
  color: var(--ar-gray);
}

/* ========== PAGE CONTAINER ========== */
html[lang="ar"] .nt-theme-content,
body.rtl .nt-theme-content {
  background: var(--ar-white) !important;
}

html[lang="ar"] .nt-theme-inner-container,
body.rtl .nt-theme-inner-container {
  background: var(--ar-white) !important;
}

/* ========== HERO SECTION ========== */
html[lang="ar"] .banner-container,
html[lang="ar"] .banner-container.alternative-banner,
html[lang="ar"] .nt-theme-content .banner-container,
html[lang="ar"] .scv-ai-hero-wrapper,
body.rtl .banner-container,
body.rtl .scv-ai-hero-wrapper {
  background: linear-gradient(135deg, var(--ar-navy) 0%, var(--ar-navy-light) 50%, var(--ar-navy) 100%) !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 80vh !important;
  padding: 100px 30px 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* StylingCV Hero Container */
html[lang="ar"] .scv-container,
body.rtl .scv-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

/* StylingCV Text Gradient */
html[lang="ar"] .scv-text-gradient,
body.rtl .scv-text-gradient {
  background: linear-gradient(135deg, var(--ar-teal) 0%, var(--ar-blue) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* StylingCV Hero Stats */
html[lang="ar"] .scv-hero-stats,
body.rtl .scv-hero-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 30px !important;
  margin-top: 30px !important;
}

html[lang="ar"] .scv-stat-item,
body.rtl .scv-stat-item {
  text-align: center !important;
}

html[lang="ar"] .scv-stat-item h3,
body.rtl .scv-stat-item h3 {
  font-size: 2.5rem !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, var(--ar-gold), var(--ar-teal)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-bottom: 8px !important;
  color: var(--ar-gold) !important;
}

html[lang="ar"] .scv-stat-item p,
body.rtl .scv-stat-item p {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 0.95rem !important;
}

html[lang="ar"] .scv-stat-icon,
body.rtl .scv-stat-icon {
  color: var(--ar-gold) !important;
  font-size: 1.5rem !important;
}

/* StylingCV Buttons */
html[lang="ar"] .scv-btn,
body.rtl .scv-btn {
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 700 !important;
  padding: 16px 36px !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

html[lang="ar"] .scv-btn-primary,
body.rtl .scv-btn-primary {
  background: linear-gradient(135deg, var(--ar-teal) 0%, var(--ar-teal-dark) 100%) !important;
  color: var(--ar-white) !important;
  border: none !important;
  box-shadow: 0 8px 30px rgba(9, 185, 170, 0.35) !important;
}

html[lang="ar"] .scv-btn-primary:hover,
body.rtl .scv-btn-primary:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 40px rgba(9, 185, 170, 0.45) !important;
}

html[lang="ar"] .scv-btn-outline,
body.rtl .scv-btn-outline {
  background: transparent !important;
  color: var(--ar-white) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

html[lang="ar"] .scv-btn-outline:hover,
body.rtl .scv-btn-outline:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: var(--ar-teal) !important;
}

/* StylingCV Hero Buttons Container */
html[lang="ar"] .scv-hero-buttons,
body.rtl .scv-hero-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-top: 30px !important;
}

/* StylingCV Card Tags */
html[lang="ar"] .scv-card-tag,
body.rtl .scv-card-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(9, 185, 170, 0.15) !important;
  border: 1px solid rgba(9, 185, 170, 0.3) !important;
  padding: 8px 16px !important;
  border-radius: 50px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--ar-teal) !important;
}

/* Hero Background Effects */
html[lang="ar"] .banner-container::before,
body.rtl .banner-container::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: 
    radial-gradient(ellipse at 20% 30%, rgba(9, 185, 170, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(16, 155, 230, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(254, 181, 22, 0.08) 0%, transparent 40%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Hero Content Container */
html[lang="ar"] .banner-container .wp-block-group__inner-container,
html[lang="ar"] .banner-container .center-piece,
body.rtl .banner-container .wp-block-group__inner-container {
  position: relative !important;
  z-index: 2 !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 30px !important;
}

/* Hero Badge */
html[lang="ar"] .banner-container .wp-block-group__inner-container > p:first-child,
body.rtl .banner-container .wp-block-group__inner-container > p:first-child {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(9, 185, 170, 0.15) !important;
  border: 1px solid rgba(9, 185, 170, 0.3) !important;
  padding: 10px 20px !important;
  border-radius: 50px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ar-teal) !important;
  margin-bottom: 20px !important;
}

/* Hero Main Headline */
html[lang="ar"] .banner-container h1,
html[lang="ar"] .banner-container h2,
body.rtl .banner-container h1,
body.rtl .banner-container h2 {
  font-size: clamp(2.5rem, 5vw, 4rem) !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
  color: var(--ar-white) !important;
  margin-bottom: 24px !important;
  text-shadow: none !important;
}

/* Gradient Text Highlight */
html[lang="ar"] .banner-container h1 span,
html[lang="ar"] .banner-container h2 span,
html[lang="ar"] .b-g-text,
body.rtl .b-g-text {
  background: linear-gradient(135deg, var(--ar-teal) 0%, var(--ar-blue) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Hero Description */
html[lang="ar"] .banner-container p,
body.rtl .banner-container p {
  font-size: 1.15rem !important;
  line-height: 1.9 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  max-width: 650px !important;
  margin-bottom: 30px !important;
}

html[lang="ar"] .banner-container p strong,
body.rtl .banner-container p strong {
  color: var(--ar-white) !important;
  font-weight: 700 !important;
}

/* Hero Stats - 2,000,000+ */
html[lang="ar"] .banner-container h3,
body.rtl .banner-container h3 {
  font-size: 3rem !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, var(--ar-gold), var(--ar-teal)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-bottom: 8px !important;
  line-height: 1.2 !important;
}

/* Star Ratings */
html[lang="ar"] .banner-container [class*="star"],
body.rtl .banner-container [class*="star"] {
  color: var(--ar-gold) !important;
  font-size: 1.5rem !important;
  letter-spacing: 3px !important;
}

/* ========== CTA BUTTONS ========== */
html[lang="ar"] .banner-container .btn,
html[lang="ar"] .banner-container a.btn,
html[lang="ar"] .wp-block-button__link,
body.rtl .banner-container .btn,
body.rtl .wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: linear-gradient(135deg, var(--ar-teal) 0%, var(--ar-teal-dark) 100%) !important;
  color: var(--ar-white) !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  padding: 18px 40px !important;
  border-radius: 12px !important;
  border: none !important;
  box-shadow: 0 8px 30px rgba(9, 185, 170, 0.35) !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
}

html[lang="ar"] .banner-container .btn::before,
body.rtl .banner-container .btn::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent) !important;
  transition: left 0.5s ease !important;
}

html[lang="ar"] .banner-container .btn:hover,
body.rtl .banner-container .btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 40px rgba(9, 185, 170, 0.45) !important;
  color: var(--ar-white) !important;
}

html[lang="ar"] .banner-container .btn:hover::before,
body.rtl .banner-container .btn:hover::before {
  left: 100% !important;
}

/* Helper text under CTA */
html[lang="ar"] .banner-container small,
body.rtl .banner-container small {
  display: block !important;
  font-size: 0.9rem !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin-top: 12px !important;
}

/* ========== SECTION HEADINGS ========== */
html[lang="ar"] .nt-theme-content h2,
html[lang="ar"] .nt-theme-content .wp-block-heading,
body.rtl .nt-theme-content h2 {
  font-size: clamp(1.8rem, 4vw, 2.5rem) !important;
  font-weight: 900 !important;
  color: var(--ar-navy) !important;
  text-align: center !important;
  margin-bottom: 16px !important;
  position: relative !important;
}

/* Section Subheading */
html[lang="ar"] .nt-theme-content h2 + p,
body.rtl .nt-theme-content h2 + p {
  font-size: 1.1rem !important;
  color: var(--ar-gray) !important;
  text-align: center !important;
  max-width: 600px !important;
  margin: 0 auto 50px !important;
}

/* Section Underline Accent */
html[lang="ar"] .nt-theme-content h2::after,
body.rtl .nt-theme-content h2::after {
  content: '' !important;
  display: block !important;
  width: 60px !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--ar-teal), var(--ar-blue)) !important;
  border-radius: 4px !important;
  margin: 16px auto 0 !important;
}

/* ========== FEATURE CARDS / SECTIONS ========== */
html[lang="ar"] .features-list,
html[lang="ar"] .gray-block,
html[lang="ar"] .gray2-block,
html[lang="ar"] .nt-theme-content .wp-block-group.has-background,
body.rtl .features-list {
  background: var(--ar-light) !important;
  padding: 80px 20px !important;
}

html[lang="ar"] .features-list::before,
html[lang="ar"] .gray-block::before,
html[lang="ar"] .gray2-block::before,
body.rtl .features-list::before {
  display: none !important;
}

/* Main Content Container */
html[lang="ar"] .nt-theme-content,
body.rtl .nt-theme-content {
  background: var(--ar-white) !important;
}

/* Section White Background */
html[lang="ar"] .nt-theme-content > .wp-block-group,
body.rtl .nt-theme-content > .wp-block-group {
  padding: 60px 20px !important;
}

/* Alternating Section Backgrounds */
html[lang="ar"] .nt-theme-content > .wp-block-group:nth-child(odd),
body.rtl .nt-theme-content > .wp-block-group:nth-child(odd) {
  background: var(--ar-white) !important;
}

html[lang="ar"] .nt-theme-content > .wp-block-group:nth-child(even),
body.rtl .nt-theme-content > .wp-block-group:nth-child(even) {
  background: var(--ar-light) !important;
}

/* Feature Card Items */
html[lang="ar"] .features-list .wp-block-column,
html[lang="ar"] .nt-theme-content .wp-block-columns > .wp-block-column,
body.rtl .features-list .wp-block-column {
  background: var(--ar-white) !important;
  border-radius: 16px !important;
  padding: 32px 24px !important;
  text-align: center !important;
  border: 1px solid var(--ar-border) !important;
  box-shadow: 0 4px 20px var(--ar-shadow) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
}

html[lang="ar"] .features-list .wp-block-column::before,
body.rtl .features-list .wp-block-column::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--ar-teal), var(--ar-blue)) !important;
  transform: scaleX(0) !important;
  transition: transform 0.3s ease !important;
}

html[lang="ar"] .features-list .wp-block-column:hover,
html[lang="ar"] .nt-theme-content .wp-block-columns > .wp-block-column:hover,
body.rtl .features-list .wp-block-column:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 12px 40px var(--ar-shadow-lg) !important;
}

html[lang="ar"] .features-list .wp-block-column:hover::before,
body.rtl .features-list .wp-block-column:hover::before {
  transform: scaleX(1) !important;
}

/* Feature Icons */
html[lang="ar"] .features-list .wp-block-image img,
html[lang="ar"] .nt-theme-content .wp-block-column .wp-block-image img,
body.rtl .features-list .wp-block-image img {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 24px !important;
  padding: 14px !important;
  background: linear-gradient(135deg, rgba(9, 185, 170, 0.1), rgba(16, 155, 230, 0.1)) !important;
  border-radius: 16px !important;
}

/* Feature Titles */
html[lang="ar"] .features-list h3,
html[lang="ar"] .features-list h4,
html[lang="ar"] .nt-theme-content .wp-block-column h3,
html[lang="ar"] .nt-theme-content .wp-block-column h4,
html[lang="ar"] .nt-theme-content .wp-block-column h5,
body.rtl .features-list h3,
body.rtl .features-list h4 {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: var(--ar-navy) !important;
  margin-bottom: 12px !important;
}

/* Feature Descriptions */
html[lang="ar"] .features-list p,
html[lang="ar"] .nt-theme-content .wp-block-column p,
body.rtl .features-list p {
  font-size: 0.95rem !important;
  color: var(--ar-gray) !important;
  line-height: 1.8 !important;
}

/* ========== TEMPLATE SHOWCASE ========== */
html[lang="ar"] .temmpContainer,
body.rtl .temmpContainer {
  padding: 60px 20px !important;
  background: var(--ar-light) !important;
}

html[lang="ar"] .temmpContainer .row,
body.rtl .temmpContainer .row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  justify-content: center !important;
}

html[lang="ar"] .temmpContainer article,
body.rtl .temmpContainer article {
  flex: 0 0 calc(33.333% - 20px) !important;
  max-width: calc(33.333% - 20px) !important;
}

html[lang="ar"] .temmpContainer .tmmpImage,
body.rtl .temmpContainer .tmmpImage {
  background: var(--ar-white) !important;
  border-radius: 20px !important;
  padding: 16px !important;
  border: 1px solid var(--ar-border) !important;
  box-shadow: 0 8px 30px var(--ar-shadow) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
  height: 100% !important;
}

html[lang="ar"] .temmpContainer .tmmpImage:hover,
body.rtl .temmpContainer .tmmpImage:hover {
  transform: translateY(-12px) scale(1.02) !important;
  box-shadow: 0 24px 60px var(--ar-shadow-lg) !important;
  border-color: var(--ar-teal) !important;
}

html[lang="ar"] .temmpContainer .tmmpImage img,
body.rtl .temmpContainer .tmmpImage img {
  border-radius: 12px !important;
  transition: transform 0.4s ease !important;
  width: 100% !important;
  height: auto !important;
}

html[lang="ar"] .temmpContainer .tmmpImage:hover img,
body.rtl .temmpContainer .tmmpImage:hover img {
  transform: scale(1.03) !important;
}

/* Template Card Info */
html[lang="ar"] .temmpContainer .temmpDesc,
body.rtl .temmpContainer .temmpDesc {
  padding: 16px 8px 8px !important;
}

html[lang="ar"] .temmpContainer .tmpName,
body.rtl .temmpContainer .tmpName {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--ar-navy) !important;
  margin-bottom: 8px !important;
}

html[lang="ar"] .temmpContainer .ratting,
body.rtl .temmpContainer .ratting {
  color: var(--ar-gray) !important;
  font-size: 0.85rem !important;
}

/* Template CTA Button */
html[lang="ar"] .temmpContainer .btn-sm,
body.rtl .temmpContainer .btn-sm {
  display: inline-block !important;
  background: linear-gradient(135deg, var(--ar-teal), var(--ar-teal-dark)) !important;
  color: var(--ar-white) !important;
  padding: 12px 24px !important;
  border-radius: 10px !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
}

html[lang="ar"] .temmpContainer .btn-sm:hover,
body.rtl .temmpContainer .btn-sm:hover {
  background: linear-gradient(135deg, var(--ar-teal-dark), var(--ar-navy)) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 25px rgba(9, 185, 170, 0.4) !important;
  color: var(--ar-white) !important;
}

/* ========== STEPS SECTION ========== */
html[lang="ar"] .nt-theme-content .wp-block-columns[class*="steps"],
body.rtl .nt-theme-content .wp-block-columns[class*="steps"] {
  gap: 30px !important;
}

html[lang="ar"] .nt-theme-content .step-card,
html[lang="ar"] .nt-theme-content [class*="step"],
body.rtl .nt-theme-content .step-card {
  background: var(--ar-white) !important;
  border-radius: 20px !important;
  padding: 30px !important;
  border: 1px solid var(--ar-border) !important;
  box-shadow: 0 4px 20px var(--ar-shadow) !important;
  transition: all 0.3s ease !important;
  text-align: center !important;
}

html[lang="ar"] .nt-theme-content .step-card:hover,
body.rtl .nt-theme-content .step-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 16px 40px var(--ar-shadow-lg) !important;
}

/* ========== AI AGENTS / AGENTIC SECTION ========== */
html[lang="ar"] [class*="agent"],
html[lang="ar"] .wp-block-group[class*="dark"],
body.rtl [class*="agent"] {
  background: linear-gradient(135deg, var(--ar-navy) 0%, var(--ar-navy-light) 100%) !important;
  padding: 60px 30px !important;
  border-radius: 20px !important;
  margin: 20px !important;
}

html[lang="ar"] [class*="agent"] h2,
html[lang="ar"] [class*="agent"] h3,
body.rtl [class*="agent"] h2,
body.rtl [class*="agent"] h3 {
  color: var(--ar-white) !important;
}

html[lang="ar"] [class*="agent"] h3,
body.rtl [class*="agent"] h3 {
  font-size: 1.5rem !important;
  color: var(--ar-teal) !important;
  margin-bottom: 12px !important;
  font-weight: 800 !important;
}

html[lang="ar"] [class*="agent"] p,
body.rtl [class*="agent"] p {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 1rem !important;
  line-height: 1.8 !important;
}

html[lang="ar"] [class*="agent"] a,
body.rtl [class*="agent"] a {
  color: var(--ar-teal) !important;
  font-weight: 600 !important;
  transition: color 0.3s ease !important;
}

html[lang="ar"] [class*="agent"] a:hover,
body.rtl [class*="agent"] a:hover {
  color: var(--ar-gold) !important;
}

html[lang="ar"] [class*="agent"] h2::after,
body.rtl [class*="agent"] h2::after {
  background: linear-gradient(90deg, var(--ar-gold), var(--ar-teal)) !important;
}

/* ========== COLORED SECTIONS ========== */
html[lang="ar"] .orange-container,
body.rtl .orange-container {
  background: linear-gradient(135deg, var(--ar-navy) 0%, var(--ar-navy-light) 100%) !important;
  padding: 80px 30px !important;
}

html[lang="ar"] .orange-container h2,
html[lang="ar"] .orange-container h3,
body.rtl .orange-container h2,
body.rtl .orange-container h3 {
  color: var(--ar-white) !important;
}

html[lang="ar"] .orange-container p,
body.rtl .orange-container p {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ========== TESTIMONIALS ========== */
html[lang="ar"] .testimonials-container,
html[lang="ar"] [class*="testimonial"],
body.rtl .testimonials-container {
  background: var(--ar-light) !important;
  padding: 80px 0 !important;
}

html[lang="ar"] .testimonials-container .carousel-item,
body.rtl .testimonials-container .carousel-item {
  background: var(--ar-white) !important;
  border-radius: 16px !important;
  padding: 40px !important;
  border: 1px solid var(--ar-border) !important;
  box-shadow: 0 4px 20px var(--ar-shadow) !important;
}

html[lang="ar"] .testimonials-container blockquote,
html[lang="ar"] .testimonials-container p,
body.rtl .testimonials-container p {
  font-size: 1.1rem !important;
  color: var(--ar-text) !important;
  line-height: 1.8 !important;
  font-style: normal !important;
}

/* ========== FOOTER ========== */
html[lang="ar"] footer,
html[lang="ar"] .site-footer,
body.rtl footer {
  background: var(--ar-navy) !important;
  padding: 60px 0 30px !important;
}

html[lang="ar"] footer h4,
html[lang="ar"] footer h5,
body.rtl footer h4,
body.rtl footer h5 {
  color: var(--ar-white) !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
}

html[lang="ar"] footer p,
html[lang="ar"] footer a,
body.rtl footer p,
body.rtl footer a {
  color: rgba(255, 255, 255, 0.7) !important;
  transition: color 0.3s ease !important;
}

html[lang="ar"] footer a:hover,
body.rtl footer a:hover {
  color: var(--ar-teal) !important;
}

/* ========== GENERAL BUTTONS ========== */
html[lang="ar"] .btn,
html[lang="ar"] a.btn,
body.rtl .btn {
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  transition: all 0.3s ease !important;
}

/* Primary Button Style */
html[lang="ar"] .btn-primary,
body.rtl .btn-primary {
  background: var(--ar-teal) !important;
  border-color: var(--ar-teal) !important;
  color: var(--ar-white) !important;
}

html[lang="ar"] .btn-primary:hover,
body.rtl .btn-primary:hover {
  background: var(--ar-teal-dark) !important;
  border-color: var(--ar-teal-dark) !important;
}

/* Secondary/Gold Button */
html[lang="ar"] .btn-secondary,
html[lang="ar"] .btn-warning,
body.rtl .btn-secondary {
  background: var(--ar-gold) !important;
  border-color: var(--ar-gold) !important;
  color: var(--ar-navy) !important;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 991px) {
  html[lang="ar"] .banner-container,
  body.rtl .banner-container {
    min-height: auto !important;
    padding: 60px 20px !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  html[lang="ar"] .banner-container h1,
  html[lang="ar"] .banner-container h2,
  body.rtl .banner-container h1 {
    font-size: 2rem !important;
    text-align: center !important;
  }

  html[lang="ar"] .banner-container h3,
  body.rtl .banner-container h3 {
    font-size: 2.2rem !important;
    text-align: center !important;
  }

  html[lang="ar"] .banner-container p,
  body.rtl .banner-container p {
    font-size: 1rem !important;
    text-align: center !important;
  }

  html[lang="ar"] .features-list .wp-block-column,
  html[lang="ar"] .nt-theme-content .wp-block-columns > .wp-block-column,
  body.rtl .features-list .wp-block-column {
    margin-bottom: 20px !important;
    padding: 24px 20px !important;
  }

  html[lang="ar"] .temmpContainer article,
  body.rtl .temmpContainer article {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  html[lang="ar"] .nt-theme-content > .wp-block-group,
  body.rtl .nt-theme-content > .wp-block-group {
    padding: 40px 15px !important;
  }
}

@media (max-width: 576px) {
  html[lang="ar"] .banner-container,
  body.rtl .banner-container {
    padding: 50px 15px !important;
  }

  html[lang="ar"] .banner-container h1,
  html[lang="ar"] .banner-container h2,
  body.rtl .banner-container h1 {
    font-size: 1.6rem !important;
  }

  html[lang="ar"] .banner-container h3,
  body.rtl .banner-container h3 {
    font-size: 1.8rem !important;
  }

  html[lang="ar"] .banner-container .btn,
  body.rtl .banner-container .btn {
    padding: 14px 24px !important;
    font-size: 0.95rem !important;
    width: 100% !important;
  }

  html[lang="ar"] .nt-theme-content h2,
  body.rtl .nt-theme-content h2 {
    font-size: 1.4rem !important;
  }

  html[lang="ar"] .features-list,
  html[lang="ar"] .temmpContainer,
  body.rtl .features-list,
  body.rtl .temmpContainer {
    padding: 40px 15px !important;
  }

  html[lang="ar"] .temmpContainer .tmmpImage,
  body.rtl .temmpContainer .tmmpImage {
    padding: 12px !important;
  }
}

/* ========== SCROLL ANIMATIONS ========== */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ========== UTILITY CLASSES ========== */
.ar-gradient-text {
  background: linear-gradient(135deg, var(--ar-teal), var(--ar-blue)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.ar-gold-gradient {
  background: linear-gradient(135deg, var(--ar-gold), var(--ar-teal)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.ar-card {
  background: var(--ar-white) !important;
  border-radius: 16px !important;
  border: 1px solid var(--ar-border) !important;
  box-shadow: 0 4px 20px var(--ar-shadow) !important;
}

/* ========== GLOBAL LINK STYLING ========== */
html[lang="ar"] .nt-theme-content a,
body.rtl .nt-theme-content a {
  color: var(--ar-teal) !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

html[lang="ar"] .nt-theme-content a:hover,
body.rtl .nt-theme-content a:hover {
  color: var(--ar-navy) !important;
}

/* ========== NAVIGATION ADJUSTMENTS ========== */
html[lang="ar"] nav.navbar,
body.rtl nav.navbar {
  font-family: 'Tajawal', sans-serif !important;
}

html[lang="ar"] nav.navbar a,
body.rtl nav.navbar a {
  font-weight: 500 !important;
}

/* ========== FIX INHERITED STYLES ========== */
html[lang="ar"] .nt-theme-content .banner-container h2,
body.rtl .nt-theme-content .banner-container h2 {
  text-align: right !important;
}

html[lang="ar"] .nt-theme-content .banner-container h2::after,
body.rtl .nt-theme-content .banner-container h2::after {
  display: none !important;
}

/* CV Examples Page - Cards Grid */
.templates-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.template-item {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.template-item:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.template-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a91a1;
    margin-bottom: 20px;
    text-align: center;
}

/* Image wrapper removed - no images in cards */

.template-description {
    font-size: 15px;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 20px;
    min-height: 60px;
    text-align: center;
}

.use-template-btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: #1a91a1;
    color: #ffffff !important;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9375rem;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
    margin-top: auto;
}

.use-template-btn:hover {
    background: #15818f;
    color: #ffffff !important;
}

/* Hero Section */
.cv-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 50px 40px;
    gap: 30px;
    margin-bottom: 40px;
    background: #f3f4f6;
    border-radius: 16px;
}
.cv-hero-content {
    flex: 1;
    max-width: 500px;
}
.cv-hero h1 {
    font-size: 2.5em;
    font-weight: 800;
    line-height: 1.2;
    color: #111827;
    margin: 0 0 20px 0;
}
.cv-hero-desc {
    font-size: 1.05em;
    color: #6b7280;
    line-height: 1.8;
    margin-bottom: 25px;
}
.cv-hero-btn {
    display: inline-block;
    background: #1a91a1;
    color: white !important;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-bottom: 25px;
}
.cv-hero-btn:hover {
    background: #15818f;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(26, 145, 161, 0.3);
    color: white !important;
}
.cv-hero-rating {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cv-stars {
    display: flex;
    gap: 3px;
}
.cv-star {
    color: #fbbf24;
    font-size: 1.3em;
}
.cv-rating-text {
    font-size: 0.9em;
    color: #6b7280;
    line-height: 1.5;
}
.cv-hero-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}
.cv-hero-resume {
    width: 280px;
    height: auto;
}

/* Category Section */
.category-section {
    margin-bottom: 50px;
}

.category-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 3px solid #1a91a1;
}

.category-icon {
    font-size: 1.8rem;
}

.category-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

.category-count {
    background: #1a91a1;
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    margin-right: auto;
}

.category-desc {
    color: #4b5563;
    font-size: 1rem;
    line-height: 1.8;
    margin-top: 12px;
    margin-bottom: 28px;
    text-align: right;
    max-width: 100%;
}

.category-desc strong {
    color: #1a91a1;
    font-weight: 700;
    display: block;
    margin-top: 16px;
    margin-bottom: 12px;
}

.category-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    direction: rtl;
}

.skill-badge {
    display: inline-block;
    padding: 6px 14px;
    background: #e5e7eb;
    color: #374151;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.skill-badge:hover {
    background: #d1d5db;
    transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 1200px) {
    .templates-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .templates-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .templates-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .cv-hero {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
    }
    .cv-hero-content {
        max-width: 100%;
    }
    .cv-hero h1 {
        font-size: 1.8em;
    }
    .cv-hero-rating {
        justify-content: center;
    }
    .cv-hero-resume {
        width: 220px;
    }
}

@media (max-width: 480px) {
    .templates-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}