/* about-dark-theme.css - Dark theme styles specific to the about page */

/* Apply the dark theme styles only when dark theme is active */
[data-theme="dark"] .container.py-5 .card.shadow-sm.rounded-3.bg-light {
  background-color: var(--widget-bg) !important;
  color: var(--text-dark);
}

/* Header section styling */
[data-theme="dark"] .fw-bold.text-primary {
  color: var(--link-color) !important;
}

[data-theme="dark"] .rounded-circle.border.border-4.border-primary {
  border-color: var(--link-color) !important;
  box-shadow: 0 0 15px rgba(99, 179, 237, 0.4);
}

/* About Story, Project Motivation and other card sections */
[data-theme="dark"] .card.mb-4.shadow-sm,
[data-theme="dark"] .card.shadow-sm {
  background-color: var(--bg-light);
  border: 1px solid var(--border-light);
}

[data-theme="dark"] .card-body {
  color: var(--text-dark);
}

[data-theme="dark"] .border-primary {
  border-color: var(--link-color) !important;
}

[data-theme="dark"] .border-bottom.border-primary {
  border-bottom-color: var(--link-color) !important;
}

/* Social links section */
[data-theme="dark"] .text-decoration-none.text-dark {
  color: var(--text-dark) !important;
}

[data-theme="dark"] .text-decoration-none.text-dark:hover {
  color: var(--link-hover) !important;
}

/* Donation section */
[data-theme="dark"] .card.h-100.bg-light {
  background-color: var(--widget-bg) !important;
  border: 1px solid var(--border-light);
}

[data-theme="dark"] .h5.fw-bold {
  color: var(--text-dark);
}

/* PayPal button */
[data-theme="dark"] .btn-primary {
  background-color: var(--primary-button);
  border-color: var(--primary-button);
  color: #ffffff;
}

[data-theme="dark"] .btn-primary:hover {
  background-color: var(--primary-button-hover);
  border-color: var(--primary-button-hover);
  box-shadow: 0 0 8px rgba(99, 179, 237, 0.6);
}

/* Revolut button */
[data-theme="dark"] .btn-success {
  background-color: var(--success-color);
  border-color: var(--success-color);
  color: #ffffff;
}

[data-theme="dark"] .btn-success:hover {
  background-color: #2a9055;
  border-color: #25824c;
  box-shadow: 0 0 8px rgba(56, 161, 105, 0.6);
}

/* Small text at the bottom */
[data-theme="dark"] .text-muted.small {
  color: var(--text-muted) !important;
}

/* Animation effect enhancement for dark mode */
[data-theme="dark"] .transition-transform {
  transition: transform 0.3s ease, filter 0.3s ease;
}

[data-theme="dark"] a:hover .transition-transform {
  transform: scale(1.1);
  filter: brightness(1.2);
}

/* Add a subtle glow effect to profile image in dark mode */
[data-theme="dark"] .rounded-circle.border.border-4.border-primary:hover {
  box-shadow: 0 0 20px rgba(99, 179, 237, 0.7);
  transition: box-shadow 0.3s ease;
}

/* Ensure color contrast for donation tags */
[data-theme="dark"] .card-body p {
  color: var(--text-muted);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  [data-theme="dark"] .row-cols-md-4 {
    row-gap: 1.5rem;
  }
  
  [data-theme="dark"] .rounded-circle.border.border-4.border-primary {
    width: 150px !important;
    height: 150px !important;
  }
}