.hover-shadow {
    transition: all 0.3s ease;
}

.hover-shadow:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important;
}

.hover-lift {
    transition: all 0.2s ease;
}

.hover-lift:hover {
    transform: translateY(-2px);
}

.transition-all {
    transition: all 0.3s ease;
}

.py-6 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.timeline::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 100%;
    background: #dee2e6;
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 767.98px) {
    .timeline::before {
        left: 40px;
    }
}
/* Rich color palette inspired by South Sudan's aviation and national colors */
:root {
  --primary-dark: #1a237e;  /* Deep aviation blue */
  --primary-light: #5c6bc0; /* Softer sky blue */
  --accent-gold: #ffd700;   /* Representing excellence */
  --sunset-orange: #ff7043; /* Inspired by African sunsets */
  --deep-green: #2e7d32;    /* Representing South Sudan's landscapes */
  --night-blue: #002171;    /* Deep night sky */
  --cloud-white: #f5f5f5;   /* Light backgrounds */
}

/* Hero Section Enhancement */
.text-white.py-2 {
  /* background: linear-gradient(135deg, var(--night-blue) 0%, #1a237e 50%, #283593 100%) !important; */
  position: relative;
  overflow: hidden;
}

.text-white.py-2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255,215,0,0.1) 0%, transparent 100%);
  pointer-events: none;
}

/* Card Enhancements */
.card {
  border: none !important;
  background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1) !important;
}

.card:hover {
  background: linear-gradient(145deg, #ffffff 0%, #e8f0fe 100%);
  transform: translateY(-8px) !important;
  box-shadow: 0 12px 30px rgba(26,35,126,0.15) !important;
}

/* Enhanced Primary Buttons */
.btn-primary {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-light) 100%) !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(26,35,126,0.2);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-dark) 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(26,35,126,0.3);
}

/* Timeline Enhancement */
.timeline::before {
  background: linear-gradient(180deg, var(--primary-light) 0%, var(--primary-dark) 100%);
  width: 3px;
}

.timeline-step {
  border-left: 4px solid var(--accent-gold);
}

.inner-circle {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-light) 100%) !important;
  box-shadow: 0 4px 15px rgba(26,35,126,0.2);
}

/* Card Icons Enhancement */
.fa-3x.text-primary {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

/* Application Process Section */
.bg-light {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
}

/* Enhanced Outline Buttons */
.btn-outline-primary {
  border: 2px solid var(--primary-dark) !important;
  color: var(--primary-dark) !important;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.btn-outline-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-light) 100%);
  z-index: -1;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.3s ease;
}

.btn-outline-primary:hover {
  color: white !important;
}

.btn-outline-primary:hover::before {
  transform: scaleX(1);
}

/* Card List Items Enhancement */
.list-unstyled li {
  border-bottom-color: rgba(92,107,192,0.2) !important;
  transition: all 0.3s ease;
  padding: 0.75rem 0;
}

.list-unstyled li:hover {
  color: var(--primary-dark);
  transform: translateX(5px);
}

/* Enhanced Shadows */
.hover-shadow {
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.hover-shadow:hover {
  box-shadow: 0 8px 25px rgba(26,35,126,0.15) !important;
}