/* Text Shadow Styles for White Shadow Effect */

/* Enhanced shadow for main title */
.hero-content .title {
  text-shadow: 
    2px 2px 4px rgba(255, 255, 255, 0.4),
    4px 4px 8px rgba(255, 255, 255, 0.3),
    6px 6px 12px rgba(255, 255, 255, 0.2),
    0 0 20px rgba(255, 255, 255, 0.1),
    0 0 40px rgba(255, 255, 255, 0.05);
}

/* Enhanced shadow for sub-title */
.hero-content .sub-title {
  text-shadow: 
    1px 1px 2px rgba(255, 255, 255, 0.5),
    2px 2px 4px rgba(255, 255, 255, 0.3),
    3px 3px 6px rgba(255, 255, 255, 0.2);
}

/* Enhanced shadow for text content */
.hero-content .text {
  text-shadow: 
    1px 1px 2px rgba(255, 255, 255, 0.4),
    2px 2px 4px rgba(255, 255, 255, 0.2),
    3px 3px 6px rgba(255, 255, 255, 0.1);
}

/* Enhanced shadow for feature list */
.hero-content .feature-list li {
  text-shadow: 
    1px 1px 2px rgba(255, 255, 255, 0.4),
    2px 2px 4px rgba(255, 255, 255, 0.2),
    3px 3px 6px rgba(255, 255, 255, 0.1);
}

/* Additional shadow for better readability on dark backgrounds */
.hero-section.style-4 .hero-content .title {
  text-shadow: 
    2px 2px 4px rgba(255, 255, 255, 0.4),
    4px 4px 8px rgba(255, 255, 255, 0.3),
    6px 6px 12px rgba(255, 255, 255, 0.2),
    0 0 20px rgba(255, 255, 255, 0.1),
    0 0 40px rgba(255, 255, 255, 0.05);
}

.hero-section.style-4 .hero-content .sub-title {
  text-shadow: 
    1px 1px 2px rgba(255, 255, 255, 0.5),
    2px 2px 4px rgba(255, 255, 255, 0.3),
    3px 3px 6px rgba(255, 255, 255, 0.2);
}

.hero-section.style-4 .hero-content .text {
  text-shadow: 
    1px 1px 2px rgba(255, 255, 255, 0.4),
    2px 2px 4px rgba(255, 255, 255, 0.2),
    3px 3px 6px rgba(255, 255, 255, 0.1);
}

.hero-section.style-4 .hero-content .feature-list li {
  text-shadow: 
    1px 1px 2px rgba(255, 255, 255, 0.4),
    2px 2px 4px rgba(255, 255, 255, 0.2),
    3px 3px 6px rgba(255, 255, 255, 0.1);
}

/* Hover effects for interactive elements */
.hero-content .theme-btn:hover {
  text-shadow: 
    1px 1px 2px rgba(255, 255, 255, 0.6),
    2px 2px 4px rgba(255, 255, 255, 0.4),
    3px 3px 6px rgba(255, 255, 255, 0.2);
}

/* Responsive shadow adjustments */
@media (max-width: 767px) {
  .hero-content .title {
    text-shadow: 
      1px 1px 2px rgba(255, 255, 255, 0.4),
      2px 2px 4px rgba(255, 255, 255, 0.3),
      3px 3px 6px rgba(255, 255, 255, 0.2);
  }
  
  .hero-content .sub-title,
  .hero-content .text,
  .hero-content .feature-list li {
    text-shadow: 
      1px 1px 2px rgba(255, 255, 255, 0.4),
      2px 2px 4px rgba(255, 255, 255, 0.2);
  }
}