/* ============ ANIMATIONS & KEYFRAMES ============ */
/* SECTION: ANIMATIONS-BASE */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from { transform: scale(0.98); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

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

/* SECTION: UTILITY-CLASSES */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.section-container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-desktop);
  padding-right: var(--container-padding-desktop);
}

@media (max-width: 768px) {
  .section-container { 
    padding-left: var(--container-padding-tablet); 
    padding-right: var(--container-padding-tablet); 
  }
}

@media (max-width: 640px) {
  .section-container { 
    padding-left: var(--container-padding-mobile); 
    padding-right: var(--container-padding-mobile); 
  }
}