* {
  /* border: 1px solid rgb(83, 46, 184) !important; */
}

/* Dark Theme Variables */
:root {
  /* Light Theme (Default) */
  --bg-primary: #f9fafb;
  --bg-secondary: #ffffff;
  --bg-header: #ffffff;
  --text-primary: #193142;
  --text-secondary: #595c5e;
  --border-color: #e5e7eb;
  --shadow-light: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  --shadow-medium: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-heavy: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

[data-theme="dark"] {
  /* Dark Theme */
  --bg-primary: #111827;
  --bg-secondary: #1f2937;
  --bg-header: #374151;
  --text-primary: #f9fafb;
  --text-secondary: #d1d5db;
  --border-color: #4b5563;
  --shadow-light: 0 1px 3px 0 rgb(0 0 0 / 0.3);
  --shadow-medium: 0 4px 6px -1px rgb(0 0 0 / 0.3);
  --shadow-heavy: 0 10px 15px -3px rgb(0 0 0 / 0.3);
}

/* Apply theme variables */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Header styles */
header {
  background-color: var(--bg-header) !important;
  box-shadow: var(--shadow-medium);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Card and section backgrounds */
.bg-white {
  background-color: var(--bg-secondary) !important;
  transition: background-color 0.3s ease;
}

/* Text colors */
.text-text-dark {
  color: var(--text-primary) !important;
  transition: color 0.3s ease;
}

.text-text-gray {
  color: var(--text-secondary) !important;
  transition: color 0.3s ease;
}

/* Button styles for dark theme */
[data-theme="dark"] button {
  border-color: var(--border-color);
}

[data-theme="dark"] .shadow-md {
  box-shadow: var(--shadow-medium);
}

[data-theme="dark"] .shadow-lg {
  box-shadow: var(--shadow-heavy);
}

/* Toggle Switch Styles */
.theme-toggle {
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.theme-toggle:hover {
  transform: scale(1.05);
}

.theme-toggle .toggle-slider {
  transition: transform 0.3s ease;
}

.theme-toggle.active .toggle-slider {
  transform: translateX(20px);
}

/* Dark theme toggle switch appearance */
[data-theme="dark"] .theme-toggle {
  background: linear-gradient(45deg, #4b5563, #6b7280) !important;
}

.hero-shape {
  background: linear-gradient(90deg, #fb3634 0%, #fc820d 100%);
  clip-path: ellipse(80% 60% at 50% 40%);
}

.decorative-circle {
  background: #f02006;
}

/* Hero Section Background for Dark Theme */
.hero-section {
  background-image: url("images/hero-bg.png");
  transition: background-image 0.3s ease;
}

/* Light theme backgrounds */
.video-testimonial-section-container,
.footer-section-container {
  background-image: url("images/hero-bg.png");
  transition: background-image 0.3s ease;
}

/* Dark theme backgrounds */
[data-theme="dark"] .hero-section,
[data-theme="dark"] .video-testimonial-section-container,
[data-theme="dark"] .footer-section-container {
  background-image: linear-gradient(135deg, #1f2937 0%, #000000 100%),
    url("images/hero-bg-dark.png");
  background-blend-mode: overlay;
}

.hero-mask {
  -webkit-mask-image: url("images/hero-shape.svg");
  mask-image: url("images/hero-shape.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  overflow: hidden;
  will-change: transform;
}

.hero-animate {
  animation: heroFloat 7s ease-in-out infinite alternate;
}
@keyframes heroFloat {
  0% {
    transform: translateY(0) rotate(-6deg);
  }
  100% {
    transform: translateY(-16px) rotate(-2deg);
  }
}

/* Language Switcher Direction Transitions */
html {
  transition: all 0.3s ease;
}

body {
  transition: all 0.3s ease;
}

/* RTL specific styles */
.rtl {
  direction: rtl;
}

/* LTR specific styles */
.ltr {
  direction: ltr;
}

/* Smooth transitions for flex items that might change alignment */
.rtl .flex {
  transition: all 0.3s ease;
}

.ltr .flex {
  transition: all 0.3s ease;
}

/* Text alignment based on direction */
.rtl .rtl\:text-right {
  text-align: right;
}

.ltr .ltr\:text-left {
  text-align: left;
}

/* Language switcher button hover effect */
#langSwitcherDesktop,
#langSwitcherMobile {
  transition: all 0.2s ease;
  cursor: pointer;
}

#langSwitcherDesktop:hover,
#langSwitcherMobile:hover {
  transform: scale(1.05);
}

#langSwitcherDesktop:active,
#langSwitcherMobile:active {
  transform: scale(0.95);
}