/* Dark Mode Color Fixes */
:root {
  color-scheme: dark;
}

html.dark {
  background-color: #0d131b;
}

.dark body {
  background-color: #0d131b !important;
  color: #ffffff;
}

.dark .glass-card {
  background: rgba(13, 17, 21, 0.4);
  border: 1px solid rgba(180, 29, 107, 0.3);
  backdrop-filter: blur(20px);
}

/* Section background fixes */
.dark #how-it-works {
  background-color: #0D1115 !important;
}

.dark .bg-gray-50 {
  background-color: #0D1115 !important;
}

.dark .bg-white {
  background-color: #0d131b !important;
}

.dark footer {
  background-color: #0D1115 !important;
}

/* Enhanced Hero Section */
#home {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

/* Animated spotlight effect */
#home::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at center,
    rgba(180, 29, 107, 0.15) 0%,
    rgba(13, 17, 21, 0) 50%
  );
  animation: rotate 20s linear infinite;
  z-index: 1;
}

/* Dynamic background grid */
#home::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(180, 29, 107, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180, 29, 107, 0.15) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.3;
  z-index: 0;
}

/* Enhanced floating elements */
#home .animate-float {
  filter: blur(30px);
  opacity: 0.3;
  box-shadow: 0 0 50px rgba(180, 29, 107, 0.5);
}

/* Hero content wrapper */
#home .container {
  position: relative;
  z-index: 10;
}

/* Hero content animations */
#home h1, #home p, #home .flex {
  position: relative;
  z-index: 20; /* Ensure text is above decorative lines */
}

/* Animated button glow */
#home .btn-primary {
  position: relative;
  overflow: hidden;
}

/* Button text color fixes for hero section */
#home .btn-primary {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

#home .btn-primary i {
  color: #ffffff;
}

#home .glass-card.text-gray-700 {
  color: rgba(255, 255, 255, 0.95) !important;
}

#home .glass-card i.text-accent-500 {
  color: #f472b6 !important; /* Brighter pink for better visibility */
  text-shadow: 0 0 8px rgba(244, 114, 182, 0.6);
}

/* Enhance button hover states for better visibility */
#home .btn-primary:hover {
  color: #ffffff !important;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
}

#home .glass-card:hover {
  color: #ffffff !important;
  border-color: rgba(244, 114, 182, 0.5) !important;
}

#home .btn-primary::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent, 
    rgba(255, 255, 255, 0.2), 
    transparent
  );
  transform: rotate(30deg);
  animation: shimmer 4s infinite;
}

/* Glass card in hero with enhanced effect */
#home .glass-card {
  background: rgba(13, 17, 21, 0.6);
  border: 1px solid rgba(180, 29, 107, 0.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 
              0 0 20px rgba(180, 29, 107, 0.2);
  backdrop-filter: blur(12px);
}

/* Location Badge Text Enhancement */
#home .glass-card .text-gray-700.dark\:text-darkCustom-text {
  color: #f9a8d4 !important; /* Light pink color */
  font-weight: 500;
  text-shadow: 0 0 10px rgba(244, 114, 182, 0.5);
}

#home .glass-card i.text-primary-500 {
  color: #f472b6 !important; /* Brighter pink for icon */
  text-shadow: 0 0 8px rgba(244, 114, 182, 0.6);
}

#home .glass-card.animate-glow {
  border: 1px solid rgba(244, 114, 182, 0.4);
}

/* Contact Form Dark Mode Fixes */
.dark #contact-form input,
.dark #contact-form select,
.dark #contact-form textarea {
  background: rgba(13, 17, 21, 0.8) !important;
  border: 1px solid rgba(180, 29, 107, 0.3) !important;
  color: #ffffff !important;
}

.dark #contact-form input::placeholder,
.dark #contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

.dark #contact-form label {
  color: #ffffff !important;
  background: #0d131b !important;
}

.dark #contact-form input:focus,
.dark #contact-form select:focus,
.dark #contact-form textarea:focus {
  border-color: #f472b6 !important;
  box-shadow: 0 0 0 2px rgba(244, 114, 182, 0.2) !important;
}

.dark #contact-form input:focus + label,
.dark #contact-form textarea:focus + label {
  color: #f472b6 !important;
  background: #0d131b !important;
}

/* Contact form headings and text */
.dark #contact h2,
.dark #contact h4 {
  color: #ffffff !important;
}

.dark #contact p {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Select dropdown arrow styling for dark mode */
.dark #contact-form select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 0.75rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1.5em 1.5em !important;
  padding-right: 2.5rem !important;
}

/* Contact info section styling */
.dark #contact .feature-icon {
  background: linear-gradient(135deg, #b41d6b, #f16548, #ec4899) !important;
  border: 1px solid rgba(244, 114, 182, 0.3);
}

/* Form submit button enhancement */
.dark #contact .btn-primary {
  background: linear-gradient(135deg, #b41d6b, #f16548) !important;
  color: #ffffff !important;
  border: none !important;
}

.dark #contact .btn-primary:hover {
  background: linear-gradient(135deg, #d946b5, #f472b6) !important;
  box-shadow: 0 8px 25px rgba(180, 29, 107, 0.5) !important;
}

/* Remove default blue outline from buttons and form elements */
button:focus,
button:active,
input:focus,
textarea:focus,
select:focus,
a:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Custom focus styling for buttons */
button:focus-visible,
.btn-primary:focus-visible {
  outline: 2px solid rgba(244, 114, 182, 0.6) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(244, 114, 182, 0.2) !important;
}

/* Custom focus styling for form inputs */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(244, 114, 182, 0.6) !important;
  outline-offset: 1px !important;
  box-shadow: 0 0 0 3px rgba(244, 114, 182, 0.15) !important;
}

/* Remove blue highlight on mobile tap */
button,
input,
textarea,
select,
a {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-focus-ring-color: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Custom button active state */
button:active,
.btn-primary:active {
  transform: scale(0.98) !important;
  transition: transform 0.1s ease !important;
}

/* Remove blue outline from navigation links */
.nav-link:focus,
.nav-link:active {
  outline: none !important;
  box-shadow: none !important;
}

.nav-link:focus-visible {
  outline: 2px solid rgba(244, 114, 182, 0.6) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* Remove blue outline from mobile menu button */
#mobile-menu-btn:focus,
#mobile-menu-btn:active {
  outline: none !important;
  box-shadow: none !important;
}

#mobile-menu-btn:focus-visible {
  outline: 2px solid rgba(244, 114, 182, 0.6) !important;
  outline-offset: 2px !important;
}

/* New animations */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-150%) rotate(30deg);
  }
  100% {
    transform: translateX(150%) rotate(30deg);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Decorative lines for hero section */
.hero-line {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(180, 29, 107, 0.4), transparent);
  height: 1px;
  width: 100%;
  left: 0;
  z-index: 2; /* Lower z-index to stay behind text */
}

.hero-line:nth-child(1) {
  top: 20%;
  animation: lineMove 15s linear infinite;
}

.hero-line:nth-child(2) {
  top: 80%;
  animation: lineMove 20s linear infinite reverse;
}

@keyframes lineMove {
  0% {
    background-position: 0% 50%;
    opacity: 0.3;
  }
  50% {
    background-position: 100% 50%;
    opacity: 0.7;
  }
  100% {
    background-position: 0% 50%;
    opacity: 0.3;
  }
}