/* Theme colors - Change these variables to easily update your color scheme */
:root {
  /* Primary theme colors */
  --primary-color: #6A0DAD; /* Purple - previously was #0032FF (blue) */
  --primary-color-light: #9370DB; /* Medium purple */
  --primary-color-dark: #4B0082; /* Indigo */
  --accent-color: #E6E6FA; /* Lavender */
  
  /* Text and background colors */
  --text-light: white;
  --text-dark: rgba(0, 0, 0, 0.747);
  --bg-dark: black;
  --bg-light: white;
  
  /* Gradient colors */
  --gradient-start: #9932CC; /* Dark orchid */
  --gradient-middle: #7644ff; /* Previously kept */
  --gradient-end: #fd4766; /* Previously kept */
  
  /* UI element colors */
  --border-color: var(--primary-color);
  --hover-color: var(--primary-color-light);
  --active-color: var(--primary-color-dark);
  
  /* Box shadow */
  --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  --hover-shadow: 0 6px 12px rgba(106, 13, 173, 0.3);
}

/* Common theme-related styles */
.highlight, 
#visit, 
.head h1, 
.container h1,
.contact-heading h1,
.about-heading h1,
.project-details h2 {
  color: var(--primary-color);
}

nav ul li a:hover,
.hover-underline-animation {
  color: var(--primary-color);
}

nav ul li a:after,
.hover-underline-animation::after,
.name:after {
  background: var(--primary-color);
}

.btn, 
#btn,
.contact-form button {
  background-color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.btn:hover,
#btn:hover,
.contact-form button:hover {
  background: transparent;
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.boxes details:hover {
  background-color: var(--primary-color);
}

/* Image gallery scrollbar */
.image-gallery::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
}

.image-gallery {
  scrollbar-color: var(--primary-color) rgba(0, 0, 0, 0.2);
}

/* Project styling */
.video-container {
  border: 2px solid var(--primary-color);
}

/* Certificate links styling - Updated to ensure medium purple color */
.certificates-section a, 
.certificate-links a {
  color: #9370DB; /* Medium purple */
  transition: color 0.3s ease;
  text-decoration: underline;
}

.certificates-section a:hover, 
.certificate-links a:hover {
  color: var(--accent-color); /* Lavender on hover */
  text-decoration: none; /* Remove underline on hover */
}

/* For dark mode */
.dark-mode .certificates-section a,
.dark-mode .certificate-links a {
  color: #9370DB; /* Keep medium purple in dark mode too */
}

.dark-mode .certificates-section a:hover,
.dark-mode .certificate-links a:hover {
  color: var(--primary-color-light); /* Lighter purple on hover in dark mode */
}