@import url("https://fonts.cdnfonts.com/css/dm-sans");

:root {
  --primary-color: #34699A;
  --secondary-color: #58A0C8;
  --light-color: #f8f9fa;
  --dark-color: #113F67;
}

@keyframes fade-in-left {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-in-left {
  animation: fade-in-left 0.8s ease-out forwards;
}

.fade-in-left-delay-1 {
  animation: fade-in-left 0.8s ease-out 0.2s forwards;
}

.fade-in-left-delay-2 {
  animation: fade-in-left 0.8s ease-out 0.4s forwards;
}

.fade-in-left-delay-3 {
  animation: fade-in-left 0.8s ease-out 0.6s forwards;
}

body {
  font-family: "DM sans", sans-serif;
}

.navbar {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.9);
}

.navbar-brand {
  font-weight: 600;
  color: var(--primary-color) !important;
}

.nav-link {
  color: var(--dark-color) !important;
  font-weight: 500;
  margin: 0 8px;
  transition: all 0.3s ease;
}

.nav-link:hover {
  color: var(--primary-color) !important;
  transform: translateY(-2px);
}

.dropdown-menu {
  top: 100% !important;
  bottom: auto !important;
}

#unmute-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
  z-index: 10;
  border-radius: 8px;
}