@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

html {
  height: -webkit-fill-available;
  overflow-x: hidden;
}
body {
  min-height: -webkit-fill-available;
  overflow-x: hidden;
}
.hero-gradient {
  background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.7) 100%);
}
.modal {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.modal.active {
  opacity: 1;
  visibility: visible;
}
.modal-content {
  transform: scale(0.95);
  transition: transform 0.3s ease;
}
.modal.active .modal-content {
  transform: scale(1);
}
.menu-item {
  position: relative;
}
.menu-item::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background-color: #FF7A00;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.menu-item:hover::after {
  transform: scaleX(1);
}