/**
 * Main CSS for Cyber Workforce Theme
 * 
 * This file contains additional styles beyond Tailwind CSS
 */

/* Custom styles for coalition logos */
.coalition-logo {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  transition: transform 0.3s ease;
}

.coalition-logo:hover {
  transform: scale(1.05);
}

.coalition-logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Default background for coalition cards */
.coalition-card-bg {
  background: linear-gradient(135deg, #4338ca 0%, #3b82f6 100%);
}

/* Custom styles for featured sections */
.featured-section {
  position: relative;
  overflow: hidden;
}

.featured-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('../images/cyber-workforce-illustration.svg') no-repeat center center;
  background-size: cover;
  opacity: 0.05;
  z-index: 0;
}

/* Custom animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes slideInFromBottom {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.slide-in {
  animation: slideInFromBottom 0.5s ease-in-out;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .coalition-logo-container {
    width: 60px;
    height: 60px;
  }
}

/* Fix for coalition logos in cards */
.coalition-card .coalition-logo {
  background-color: white;
  border-radius: 50%;
  padding: 5px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Ensure proper sizing for default coalition logos */
img.default-coalition-logo {
  width: 100%;
  height: auto;
  max-width: 100px;
  max-height: 100px;
  object-fit: contain;
  background-color: white;
  border-radius: 50%;
  padding: 8px;
}