/* SVG Dark Mode Handling */
.dark-mode .dark-mode-only {
  opacity: 1;
}

.dark-mode svg text {
  fill: #E2E8F0;
}

.dark-mode svg text[fill="#1A202C"] {
  fill: #E2E8F0;
}

.dark-mode svg rect[fill="url(#bg-gradient)"] {
  fill: #2D3748;
}

/* Adjust color intensity for dark mode */
.dark-mode svg circle[fill="url(#primary-gradient)"] {
  fill: #4ECDC4;
}

.dark-mode svg circle[fill="url(#secondary-gradient)"] {
  fill: #FF6B6B;
}

.dark-mode svg circle[fill="url(#accent-gradient)"] {
  fill: #FFD166;
}

.dark-mode svg circle[fill="url(#dark-gradient)"] {
  fill: #2A9D8F;
}

/* Philosophy SVG Image Styling */
.philosophy-svg {
  width: 100%;
  height: 100%;
  max-height: 500px;
  max-width: 600px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  object-fit: contain;
}

.philosophy-image {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  overflow: hidden;
  height: 100%;
  min-height: 500px;
}

.philosophy-image:hover .philosophy-svg {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.dark-mode .philosophy-svg {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Add subtle animations to the SVG elements */
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 0.7; }
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
  100% { transform: translateY(0px); }
}

.philosophy-svg .decorative-elements g {
  animation: float 6s ease-in-out infinite;
}

.philosophy-svg circle[fill="#FFFFFF"] {
  animation: pulse 4s ease-in-out infinite;
}

/* Improve responsive behavior */
@media (max-width: 992px) {
  .philosophy-svg {
    max-height: 450px;
  }
  
  .philosophy-image {
    min-height: 450px;
  }
}

@media (max-width: 768px) {
  .philosophy-svg {
    max-width: 500px;
    max-height: 400px;
  }
  
  .philosophy-image {
    min-height: 400px;
  }
}

@media (max-width: 576px) {
  .philosophy-svg {
    max-width: 400px;
    max-height: 350px;
  }
  
  .philosophy-image {
    min-height: 350px;
  }
}