/* Main Styles */
:root {
  --primary-color: #1e3a8a; /* blue-900 */
  --primary-hover: #1e40af; /* blue-800 */
  --secondary-color: #10b981; /* green-500 */
  --secondary-hover: #059669; /* green-600 */
  --text-color: #1f2937; /* gray-800 */
  --light-text: #f9fafb; /* gray-50 */
  --background: #ffffff;
  --light-background: #f9fafb; /* gray-50 */
}

/* Virtuous Cycle Diagram */
.virtuous-cycle {
  position: relative;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  margin: 0 auto;
}

.virtuous-cycle-large {
  position: relative;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  border: 2px solid #e5e7eb;
  margin: 0 auto;
}

.cycle-item {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
}

.cycle-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  margin-bottom: 8px;
}

.cycle-text {
  text-align: center;
  font-weight: 500;
}

.cycle-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: bold;
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

/* Positioning for small cycle */
#financing {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

#reception {
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

#leads {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

#revenue {
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}

/* Positioning for large cycle */
#financing-large {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

#reception-large {
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

#leads-large {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

#revenue-large {
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .virtuous-cycle, .virtuous-cycle-large {
    width: 240px;
    height: 240px;
  }
  
  .cycle-center {
    width: 80px;
    height: 80px;
    font-size: 0.9rem;
  }
  
  .cycle-item {
    width: 70px;
  }
  
  .cycle-icon {
    width: 32px;
    height: 32px;
  }
  
  .cycle-text {
    font-size: 0.9rem;
  }
}

/* Animation for hover effects */
.shadow-md, .shadow-lg {
  transition: all 0.3s ease;
}

.hover\:shadow-lg:hover {
  transform: translateY(-5px);
}

/* Form elements styling */
input, textarea, select {
  transition: all 0.2s ease;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

/* Button animations */
button, .inline-flex {
  transition: all 0.2s ease;
}

button:hover, .inline-flex:hover {
  transform: translateY(-2px);
}

button:active, .inline-flex:active {
  transform: translateY(0);
}