/* Theme-specific styles */

/* Theme Toggle Button Styles */
.theme-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
}

.theme-toggle-btn:hover {
  background-color: var(--secondary-color);
  transform: scale(1.1);
}

.theme-toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Light Theme Overrides */
/* CSS variables are now defined in custom.css */

/* Dark Theme Overrides */
/* CSS variables are now defined in custom.css */

/* Light theme specific component overrides */

/* Why Choose Us Section - Dark blue and purple gradient for both themes */
.theme-light .why-choose-us {
  background: linear-gradient(
    135deg,
    #1e3a5f 0%,
    #2d4a7a 25%,
    #4a2c5f 50%,
    #5a3a7a 75%,
    #6b4a8a 100%
  ) !important;
}

/* Why Choose Box - White background with 80% opacity and white border in light mode */
.theme-light .why-choose-box {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 4px solid rgba(255, 255, 255, 1) !important;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}

/* Case Study - Center aligned text in both themes */
.case-study-content {
  text-align: center !important;
  min-height: auto;
  transition: all 0.4s ease;
}

/* Case Study - Hide summary by default, show on hover with shiny effect */
.case-study-content p {
  opacity: 0;
  max-height: 0;
  margin-top: 0 !important;
  overflow: hidden;
  transition: opacity 0.4s ease, max-height 0.6s ease, margin-top 0.4s ease;
  line-height: 1.5;
  position: relative;
  background: linear-gradient(
    90deg,
    currentColor 0%,
    currentColor 40%,
    rgba(255, 255, 255, 0.8) 50%,
    currentColor 60%,
    currentColor 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-position: 100% 0;
}

.case-study-item:hover .case-study-content p {
  opacity: 1;
  max-height: 200px;
  margin-top: 8px !important;
  animation: shineText 1.5s ease-in-out;
}

/* Shiny text effect - shimmer animation */
@keyframes shineText {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

/* Light mode shiny effect adjustment */
.theme-light .case-study-content p {
  background: linear-gradient(
    90deg,
    currentColor 0%,
    currentColor 40%,
    rgba(65, 133, 221, 0.8) 50%,
    currentColor 60%,
    currentColor 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-position: 100% 0;
}

/* Case Study - Better text visibility in light mode */
.theme-light .case-study-content h3 a {
  color: var(--accent-color) !important;
}

.theme-light .case-study-content p {
  color: #6B7280 !important;
}

/* Features items - reversed gradient (lighter at top, darker at bottom) */
/* Lighter at top to stand out from section background */
.theme-dark .features-item {
  background-color: var(--secondary-color);
  border: 1px solid var(--divider-color);
}

.theme-light .features-item {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 10px var(--shadow-color);
  position: relative;
  transition: all 0.4s ease;
}

/* Service items - reversed gradient (lighter at top, darker at bottom) */
/* Lighter at top to stand out from section background */
.theme-dark .service-item {
  background-color: var(--secondary-color);
  border: 1px solid var(--divider-color);
}

.theme-dark .service-item:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
}

.theme-light .service-item {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 10px var(--shadow-color);
  position: relative;
  transition: all 0.4s ease;
}

.theme-light .service-item:hover {
  border: 1px solid var(--accent-color);
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important;
}

.theme-dark .success-item {
  background-color: var(--secondary-color);
  border: 1px solid var(--divider-color);
}

.theme-light .success-item {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 10px var(--shadow-color);
}

/* Core Values Section - White Background */
.theme-dark .our-success .success-item,
.theme-light .our-success .success-item {
  background-color: white !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.theme-light .pricing-item {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 10px var(--shadow-color);
}

.theme-light .pricing-item.highlighted-box {
  border: 2px solid var(--accent-color);
  box-shadow: 0 5px 20px rgba(65, 133, 221, 0.2);
}

.theme-light .case-study-item {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 10px var(--shadow-color);
}

/* Duplicate removed - using gradient style above */

/* Specialties items with invisible background */
.theme-light .specialties-item {
  background-color: transparent;
  border: none;
  box-shadow: none;
}

.theme-dark .specialties-item {
  background-color: transparent;
  border: none;
  box-shadow: none;
}

/* Why Choose Us items with invisible background */
.theme-light .why-choose-item {
  background-color: transparent;
  border: none;
  box-shadow: none;
}

.theme-dark .why-choose-item {
  background-color: transparent;
  border: none;
  box-shadow: none;
}

/* Header/Navbar light theme */
.theme-light header {
  background-color: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.theme-light .navbar-nav .nav-link {
  color: #000000 !important;
  text-shadow: none !important;
  height: 35px !important;
  padding: 6px 14px !important;
  margin: 3px 0 !important;
  display: flex !important;
  align-items: center !important;
}

.theme-light .navbar-nav .nav-link:hover {
  color: var(--accent-color) !important;
  background: rgba(0, 0, 0, 0.1) !important;
}

/* Light theme navbar background - elegant glassmorphism */
.theme-light .nav-menu-wrapper .navbar-nav {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
  height: 45px !important;
  border-radius: 25px !important;
  padding: 0 8px !important;
}

/* Navbar theme styles */
header {
  background-color: transparent;
  border-bottom: none;
  box-shadow: none;
}

/* Override for sticky header to ensure transparency */
header.main-header .header-sticky.active {
  background-color: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

header a,
header button {
  color: var(--text-color);
}

header a:hover,
header button:hover {
  color: var(--accent-color);
}

/* Mobile menu theme */
.fixed.inset-0.z-50 {
  background-color: var(--bg-color);
  color: var(--text-color);
}

.fixed.inset-0.z-50 a,
.fixed.inset-0.z-50 button {
  color: var(--text-color);
}

.fixed.inset-0.z-50 a:hover,
.fixed.inset-0.z-50 button:hover {
  color: var(--accent-color);
}

/* Button styles for light theme */
.theme-light .btn-default {
  background: linear-gradient(0deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
  color: #FFFFFF;
  border: none;
}

.theme-light .btn-default:hover {
  background: linear-gradient(0deg, var(--accent-secondary-color) 0%, var(--accent-color) 100%);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(65, 133, 221, 0.3);
}

/* Hero highlighted button - use dark mode style in light mode */
.theme-light .hero-btn .btn-default.btn-highlighted {
  background: linear-gradient(var(--bg-color), var(--bg-color)) padding-box, linear-gradient(to left, var(--accent-color), var(--accent-secondary-color)) border-box !important;
  border: 1px solid transparent !important;
  color: var(--primary-color) !important;
}

.theme-light .hero-btn .btn-default.btn-highlighted::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: -15% !important;
  right: 0 !important;
  width: 0 !important;
  height: 106% !important;
  background: linear-gradient(to left, var(--accent-color) 0%, var(--accent-secondary-color) 100%) !important;
  transform: skew(45deg) !important;
  transition: all 0.4s ease-in-out !important;
  z-index: -1 !important;
}

.theme-light .hero-btn .btn-default.btn-highlighted:hover {
  background: linear-gradient(var(--bg-color), var(--bg-color)) padding-box, linear-gradient(to left, var(--accent-color), var(--accent-secondary-color)) border-box !important;
  transform: none !important;
  box-shadow: none !important;
}

.theme-light .hero-btn .btn-default.btn-highlighted:hover::before {
  width: 100% !important;
  transform: skew(0deg) !important;
  left: 0 !important;
}

/* Default button styles - these work with the existing custom.css styles */
/* The existing styles in custom.css already use CSS variables */
/* We just need to ensure proper color contrast */

/* Form elements for light theme */
.theme-light input,
.theme-light textarea,
.theme-light select {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

.theme-light input:focus,
.theme-light textarea:focus,
.theme-light select:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(65, 133, 221, 0.1);
}

/* Footer light theme */
.theme-light footer {
  background-color: #1e3a5f !important;
  border-top: 1px solid var(--border-color);
}

/* Smooth transitions for theme switching */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Ensure images and icons maintain proper contrast in light mode */
.theme-light img[src*="logo.svg"] {
  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);
}

/* .theme-light .icon-box img - No filter - use natural SVG color */

/* Dark theme specific overrides to ensure proper contrast */
.theme-dark img[src*="logo.svg"] {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* .theme-dark .icon-box img - No filter - use natural SVG color */

/* Additional theme-specific component styles */
.theme-light .about-counter-box h2 {
  color: var(--accent-color);
}

.theme-light .facts-counter-item h2 {
  color: var(--accent-color);
}

.theme-light .award-box {
  box-shadow: 0 8px 25px rgba(65, 133, 221, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.theme-light .award-box h2 {
  color: #ffffff;
}

.theme-light .award-box p {
  color: rgba(255, 255, 255, 0.95);
}

.theme-light .section-title h2 span {
  color: var(--accent-color);
}

.theme-light .section-footer-text span {
  color: var(--accent-color);
}

.theme-light .section-footer-text a {
  color: var(--accent-color);
}

.theme-light .section-footer-text a:hover {
  color: var(--accent-secondary-color);
}

/* Preloader theme support */
.theme-light .preloader {
  background: var(--bg-color);
}

/* Hero video visibility in light mode */
.theme-light .hero.hero-bg-image::before {
  background: var(--bg-color);
  opacity: 50% !important; /* 50% overlay for better video visibility */
}

/* Hero video overlay - same opacity (50%) in both light and dark modes */
.theme-light .hero.hero-bg-image.hero-video::before {
  opacity: 50% !important;
}

.theme-dark .hero.hero-bg-image.hero-video::before {
  opacity: 50% !important;
}

/* Image Hero - same opacity in both modes */
.theme-dark .hero.hero-bg-image::before {
  background: var(--bg-color);
  opacity: 50% !important;
}

/* Slider Hero - same opacity in both modes */
.theme-light .hero.hero-bg-image.hero-slider-layout .hero-slide::before {
  background: var(--bg-color) !important;
  opacity: 50% !important; /* 50% overlay for better video visibility */
}

.theme-dark .hero.hero-bg-image.hero-slider-layout .hero-slide::before {
  background: var(--bg-color) !important;
  opacity: 50% !important;
}

/* Ensure dark mode slider overlay is definitely 50% */
html.theme-dark .hero.hero-bg-image.hero-slider-layout .hero-slide::before,
body.theme-dark .hero.hero-bg-image.hero-slider-layout .hero-slide::before {
  opacity: 50% !important;
  background: var(--bg-color) !important;
}

/* Readmore button theme styles */
.theme-light .readmore-btn {
  color: var(--primary-color);
}

.theme-light .readmore-btn:hover {
  color: var(--accent-secondary-color);
}

/* Make service readmore buttons have btn-default gradient but keep original size/font - LIGHT MODE ONLY */
.theme-light .service-btn .readmore-btn {
  background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%) !important;
  background-size: 200% auto !important;
  border: none !important;
  overflow: hidden !important;
  color: #FFFFFF !important; /* White text by default */
}

.theme-light .service-btn .readmore-btn:hover {
  background-position: right center !important;
  color: var(--accent-color) !important; /* Blue text on hover */
}

.theme-dark .readmore-btn {
  color: var(--primary-color);
}

.theme-dark .readmore-btn:hover {
  color: var(--accent-secondary-color);
}

.theme-dark .service-btn .readmore-btn {
  background: var(--secondary-color);
  color: var(--primary-color);
}

.theme-dark .service-btn .readmore-btn:hover {
  color: var(--primary-color);
}

/* Scrolling ticker star icons for light mode */
.theme-light .scrolling-ticker-box img[src*="star-icon.svg"],
.theme-dark .scrolling-ticker-box img[src*="star-icon.svg"] {
	filter: brightness(0) invert(1) !important;
  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);
}

/* Icon flip effect for light mode - black instead of white */
.theme-light .icon-box img:hover {
  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%) !important;
  transform: rotateY(180deg) !important;
}

.theme-light .specialties-item .icon-box img:hover {
  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%) !important;
  transform: rotateY(180deg) !important;
}

.theme-light .why-choose-item .icon-box img:hover {
  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%) !important;
  transform: rotateY(180deg) !important;
}

/* Ensure proper contrast for all text elements */
.theme-light h1,
.theme-light h2,
.theme-light h3,
.theme-light h5,
.theme-light h6 {
  color: var(--primary-color);
}

.theme-light p {
  color: var(--text-color);
}

/* Hero paragraph text - match client names color in light mode */
.theme-light .hero-content p,
.theme-light .hero p {
  color: #374151 !important;
}

/* Hero company slider text - match h1 heading color in light mode */
.theme-light .hero-company-slider p {
  color: var(--primary-color) !important;
}

.theme-light a {
  color: var(--text-color);
}

.theme-light a:hover {
  color: var(--accent-color);
}

/* Hero client names - match h1 heading color in light mode */
.theme-light .client-company-name {
  color: var(--primary-color) !important;
  font-size: 1rem !important;
  font-family: var(--default-font, sans-serif) !important;
  font-weight: normal !important;
}

/* Ensure client names match the hero company slider paragraph styling */
.theme-light .hero-company-slider .client-company-name {
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
}

/* Hero client logo container - change white circle to light gray in light mode */
.theme-light .client-logo-container {
  background: linear-gradient(#E5E7EB, #E5E7EB) padding-box, linear-gradient(to left, var(--accent-color), var(--accent-secondary-color)) border-box !important;
}

/* Scrolling ticker - darker background in light mode (but not for footer) */
.theme-light .our-scrolling-ticker:not(.footer-scrolling-ticker) {
  background-color: #D1D5DB !important;
}

/* Footer scrolling ticker (Work together) - white background in light mode */
.theme-light .our-scrolling-ticker.footer-scrolling-ticker {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
}

/* Section title h3 (About Us, etc.) - darker background in light mode */
.theme-light .section-title h3:not(.hero-section-subtitle):not(.pricing-plan-title) {
  background-color: white !important;
  background-image: url('/images/icon-sub-heading.svg') !important;
  background-repeat: no-repeat !important;
  background-position: left 20px center !important;
  background-size: 30px auto !important;
}

.theme-dark .section-title h3:not(.hero-section-subtitle):not(.pricing-plan-title) {
  background-color: rgba(255, 255, 255, 0.15) !important;
  background-image: url('/images/icon-sub-heading.svg') !important;
  background-repeat: no-repeat !important;
  background-position: left 20px center !important;
  background-size: 30px auto !important;
}

/* Home page sections - gradient background */
/* Tailwind OKLCH colors: Darker blue-purple blend at top, lighter blend at bottom */
/* Applied to all sections on home page except about-us */
/* Featured Services - Dark blue and purple gradient like Why Choose Us */
.theme-dark .our-services {
  background: linear-gradient(
    135deg,
    #152a4a 0%,
    #1f3a65 25%,
    #3a1f4a 50%,
    #4a2a5a 75%,
    #5a3a6a 100%
  ) !important;
}

.theme-dark .our-facts,
.theme-dark .case-study,
.theme-dark .our-features,
.theme-dark .our-testimonial,
.theme-dark .our-success,
.theme-dark .our-partners,
.theme-dark .our-team,
.theme-dark .our-potential,
.theme-dark .who-we-are,
.theme-dark .page-services,
.theme-dark .page-header {
  background: linear-gradient(
    to bottom,
    oklch(70% 0.112 279.098 / 0.35) 0%,       /* Dark blue-purple blend at top */
    oklch(72% 0.112 279.098 / 0.28) 15%,     /* Dark blue-purple blend */
    oklch(74% 0.112 279.098 / 0.22) 30%,     /* Medium dark blend */
    oklch(76% 0.112 279.098 / 0.18) 45%,     /* Medium blend */
    oklch(78% 0.112 279.098 / 0.15) 60%,     /* Lighter blend */
    oklch(82% 0.112 279.098 / 0.12) 75%,     /* Light blend */
    oklch(85% 0.112 279.098 / 0.1) 85%,      /* Very light blend */
    oklch(88% 0.112 279.098 / 0.06) 92%,     /* Extremely light blend at bottom */
    rgba(28, 27, 43, 0) 100%                  /* transparent */
  ) !important;
}

/* FAQ Section - Match scrolling ticker background (lighter version) */
.theme-dark .our-faqs {
  background-color: #1e3a5f !important;
}

/* Featured Services - Dark blue and purple gradient like Why Choose Us */
.theme-light .our-services {
  background: linear-gradient(
    135deg,
    #152a4a 0%,
    #1f3a65 25%,
    #3a1f4a 50%,
    #4a2a5a 75%,
    #5a3a6a 100%
  ) !important;
}

/* Achievements section - white background */
.theme-dark .our-achievements,
.theme-light .our-achievements {
  background-color: #FFFFFF !important;
}

/* Pricing section - white background like About Us */
.theme-dark .our-pricing,
.theme-light .our-pricing {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
}

/* Case Study Redesign - white background like About Us */
.theme-dark .case-study-redesign,
.theme-light .case-study-redesign {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
}

.theme-light .our-facts,
.theme-light .case-study,
.theme-light .our-features,
.theme-light .our-testimonial,
.theme-light .our-success,
.theme-light .our-partners,
.theme-light .our-team,
.theme-light .our-potential,
.theme-light .who-we-are {
  background: linear-gradient(
    to bottom,
    oklch(72% 0.112 279.098 / 0.3) 0%,        /* Darker blue-purple blend at top */
    oklch(74% 0.112 279.098 / 0.22) 20%,     /* Dark blue-purple blend */
    oklch(76% 0.112 279.098 / 0.15) 40%,     /* Medium blend */
    oklch(78% 0.112 279.098 / 0.1) 60%,      /* Lighter blend */
    oklch(79% 0.112 279.098 / 0.06) 80%,     /* Very light blend */
    oklch(80% 0.112 279.098 / 0.03) 95%,     /* Almost transparent */
    rgba(247, 248, 250, 0) 100%              /* transparent */
  ) !important;
}

/* FAQ Section - Match scrolling ticker background (lighter version) */
.theme-light .our-faqs {
  background-color: #1e3a5f !important;
}

/* Why Choose Us Section - Dark blue and purple gradient for dark mode */
.theme-dark .why-choose-us {
  background: linear-gradient(
    135deg,
    #1e3a5f 0%,
    #2d4a7a 25%,
    #4a2c5f 50%,
    #5a3a7a 75%,
    #6b4a8a 100%
  ) !important;
}

/* Why Choose Us box - Darker background with 20% opacity in dark mode */
.theme-dark .why-choose-box {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 4px solid rgba(65, 133, 221, 0.6) !important;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(65, 133, 221, 0.2) !important;
}

/* Why Choose Us section - White text color in dark theme (excluding highlighted text) */
.theme-dark .why-choose-box .section-title h3 {
  color: #FFFFFF !important;
}

.theme-dark .why-choose-box .section-title h2 {
  color: #FFFFFF !important;
}

/* Keep highlighted text gradient unchanged */
.theme-dark .why-choose-box .section-title h2 span {
  /* Gradient text remains unchanged - no override needed */
}

.theme-dark .why-choose-box .why-choose-item-content h3 {
  color: #FFFFFF !important;
}

.theme-dark .why-choose-box .why-choose-item-content p {
  color: #FFFFFF !important;
}

.theme-dark .why-choose-box .section-footer-text p {
  color: #FFFFFF !important;
}

.theme-dark .why-choose-box .section-footer-text p a {
  color: #FFFFFF !important;
}

/* Footer dark theme */
.theme-dark footer {
  background-color: #1e3a5f !important;
}

.theme-dark .our-partners-box {
  background: linear-gradient(
    to top,
    rgba(10, 9, 18, 1) 0%,
    rgba(12, 11, 20, 0.98) 20%,
    rgba(15, 14, 25, 0.95) 40%,
    rgba(20, 19, 30, 0.9) 60%,
    rgba(30, 29, 45, 0.85) 80%,
    rgba(35, 34, 50, 0.8) 100%
  ) !important;
}

.theme-light .our-partners-box {
  background: linear-gradient(
    to top,
    rgba(180, 180, 200, 0.95) 0%,
    rgba(200, 200, 215, 0.85) 20%,
    rgba(220, 220, 230, 0.75) 40%,
    rgba(240, 240, 250, 0.8) 60%,
    rgba(250, 250, 255, 0.85) 80%,
    rgba(255, 255, 255, 0.9) 100%
  ) !important;
}

/* Section title h3 mobile - match dark mode mobile logo size and padding */
@media only screen and (max-width: 991px) {
  .theme-light .section-title h3:not(.hero-section-subtitle):not(.pricing-plan-title) {
    background-position: left 15px center !important;
    background-size: 20px auto !important;
    padding: 8px 15px 8px 40px !important;
  }
}

/* Pricing plan titles - darker background like section titles but without logo */
.theme-light .pricing-plan-title {
  background: #D1D5DB !important;
  background-image: none !important;
}

/* Hero section subtitle - lighter off-white background in light mode */
.theme-light .section-title h3.hero-section-subtitle,
.theme-light .hero-section-subtitle {
  background: #FAFBFC url('/images/icon-sub-heading.svg') no-repeat !important;
  background-position: left 20px center !important;
  background-size: 30px auto !important;
}

/* Hero section subtitle mobile - match dark mode mobile logo size and padding */
@media only screen and (max-width: 991px) {
  .theme-light .section-title h3.hero-section-subtitle,
  .theme-light .hero-section-subtitle {
    background-position: left 15px center !important;
    background-size: 20px auto !important;
    padding: 8px 15px 8px 40px !important;
  }
}

/* About counter box paragraph (Years of work experience) - darker background in light mode */
.theme-light .about-counter-box p {
  background-color: #E5E7EB !important;
}

/* Pricing toggle switch - light mode colors */
.theme-light .our-pricing-swich.form-switch .form-check-input {
  --bs-form-check-bg: var(--accent-color) !important;
  background-color: var(--accent-color) !important;
}

.theme-light .form-switch .form-check-input:checked {
  background-color: var(--accent-secondary-color) !important;
}

.theme-light .our-pricing-swich label {
  color: #1C1B2B !important;
}

/* Testimonial review box - reversed gradient (lighter at top, darker at bottom) */
/* Lighter at top to stand out from section background */
.theme-dark .testimonial-review-box {
  background: linear-gradient(
    to bottom,
    rgba(35, 34, 50, 0.8) 0%,
    rgba(30, 29, 45, 0.85) 20%,
    rgba(20, 19, 30, 0.9) 40%,
    rgba(15, 14, 25, 0.95) 60%,
    rgba(12, 11, 20, 0.98) 80%,
    rgba(10, 9, 18, 1) 100%
  ) !important;
}

.theme-light .testimonial-review-box {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(250, 250, 255, 0.85) 20%,
    rgba(240, 240, 250, 0.8) 40%,
    rgba(220, 220, 230, 0.75) 60%,
    rgba(200, 200, 215, 0.85) 80%,
    rgba(180, 180, 200, 0.95) 100%
  ) !important;
}

/* Testimonial company name - match author content h3 color */
.testimonial-item .company-name {
  color: var(--primary-color) !important;
}

/* FAQ accordion items - darker background in light mode */
.theme-light .faq-accordion .accordion-item {
  background-color: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid #FFFFFF !important;
  box-shadow: none !important;
}

.theme-dark .faq-accordion .accordion-item {
  background-color: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid #FFFFFF !important;
  box-shadow: none !important;
}

/* Blog Posts Container Card - Dark theme */
.theme-dark .blog-posts-container-card {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.theme-light .blog-posts-container-card {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Blog post items - White background */
.theme-light .post-item-new,
.theme-dark .post-item-new {
  background: #FFFFFF !important;
}

.theme-dark .post-item-content-new h2 a {
  color: #1e3a5f !important;
}

.theme-dark .post-item-content-new h2 a:hover {
  color: var(--accent-color) !important;
}

.theme-dark .post-item-excerpt p {
  color: #1e3a5f !important;
}

.theme-dark .post-item-category span {
  color: #1e3a5f !important;
}

.theme-dark .blog-post-card-item:not(:last-child)::after {
  background-color: rgba(255, 255, 255, 0.1) !important; /* Subtle white matching transparent background */
  width: 3px; /* Thicker divider */
}

.theme-dark .read-all-blog-posts {
  color: #FFFFFF !important;
}

.theme-dark .read-all-blog-posts:hover {
  color: var(--accent-color) !important;
}

/* FAQ section title "See Frequently Asked Questions" - white in dark mode */
.theme-dark .our-faqs .section-title h2,
.theme-dark .our-faqs .faqs-content .section-title h2 {
  color: #FFFFFF !important;
}

.theme-dark .our-faqs .section-title h2 span,
.theme-dark .our-faqs .faqs-content .section-title h2 span {
  color: #FFFFFF !important;
}

/* FAQ subtitle "Questions & Answers" - gradient background */
.theme-dark .faq-subtitle {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.9) 0%, rgba(156, 163, 175, 0.9) 50%, rgba(167, 139, 250, 0.9) 100%) !important;
  color: #FFFFFF !important;
}

.theme-light .faq-subtitle {
  background: linear-gradient(135deg, rgba(147, 197, 253, 0.8) 0%, rgba(209, 213, 219, 0.8) 50%, rgba(196, 181, 253, 0.8) 100%);
  color: #1F2937 !important;
}

/* FAQ questions and answers - match section background color */
.theme-light .faq-accordion .accordion-header .accordion-button,
.theme-light .faq-accordion .accordion-header .accordion-button.collapsed,
.theme-light .faq-accordion .accordion-item:first-child .accordion-header .accordion-button,
.theme-light .faq-accordion .accordion-item:first-child .accordion-header .accordion-button.collapsed,
.theme-dark .faq-accordion .accordion-header .accordion-button,
.theme-dark .faq-accordion .accordion-header .accordion-button.collapsed,
.theme-dark .faq-accordion .accordion-item:first-child .accordion-header .accordion-button,
.theme-dark .faq-accordion .accordion-item:first-child .accordion-header .accordion-button.collapsed {
  color: #1e3a5f !important;
}

/* FAQ answer text - match section background color */
.theme-light .faq-accordion .accordion-item .accordion-body p,
.theme-light .faq-accordion .accordion-item:first-child .accordion-body p,
.theme-dark .faq-accordion .accordion-item .accordion-body p,
.theme-dark .faq-accordion .accordion-item:first-child .accordion-body p {
  color: #1e3a5f !important;
}

/* FAQ accordion icon (plus/minus) - match section background color */
.theme-light .faq-accordion .accordion-item .accordion-button::after,
.theme-light .faq-accordion .accordion-item .accordion-button.collapsed::after,
.theme-light .faq-accordion .accordion-item:first-child .accordion-button::after,
.theme-light .faq-accordion .accordion-item:first-child .accordion-button.collapsed::after,
.theme-dark .faq-accordion .accordion-item .accordion-button::after,
.theme-dark .faq-accordion .accordion-item .accordion-button.collapsed::after,
.theme-dark .faq-accordion .accordion-item:first-child .accordion-button::after,
.theme-dark .faq-accordion .accordion-item:first-child .accordion-button.collapsed::after {
  color: #1e3a5f !important;
}

/* CTA box (Contact Us - We're Just a click away) - match other main container gray color in light mode */
.theme-light .cta-box-content {
  position: relative !important;
  background: transparent !important;
}

/* Use map.svg image - put it in front */
.theme-light .cta-box-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('/images/map.svg') no-repeat center center;
  background-size: cover;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
}

/* Ensure content is above the image */
.theme-light .cta-box-content > * {
  position: relative;
  z-index: 2;
}

/* Testimonial navigation arrows - invert color for light mode visibility */
.theme-light .testimonial-slider .testimonial-button-next::before,
.theme-light .testimonial-slider .testimonial-button-prev::before {
  filter: invert(1);
}

/* Testimonial navigation button boxes - make boxes visible in light mode */
.theme-light .testimonial-slider .testimonial-button-next,
.theme-light .testimonial-slider .testimonial-button-prev {
  background: linear-gradient(135deg, #E5E7EB 0%, #D1D5DB 100%) !important;
  border: 1px solid #9CA3AF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.theme-light .testimonial-slider .testimonial-button-next:hover,
.theme-light .testimonial-slider .testimonial-button-prev:hover {
  background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%) !important;
  border: 1px solid transparent;
  box-shadow: 0 4px 12px rgba(65, 133, 221, 0.3);
}

.theme-light .testimonial-slider .testimonial-button-next:hover::before,
.theme-light .testimonial-slider .testimonial-button-prev:hover::before {
  filter: invert(0);
}