@font-face {
  font-family: 'ClashDisplay-Semibold';
  src: url('fonts/ClashDisplay/ClashDisplay-Semibold.woff2') format('woff2'),
    url('fonts/ClashDisplay/ClashDisplay-Semibold.woff') format('woff'),
    url('fonts/ClashDisplay/ClashDisplay-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background-color: #000080;
  color: white;
  padding: 8px 16px;
  z-index: 1000;
  text-decoration: none;
  font-weight: 500;
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: 0;
}

.nav-link {
  position: relative;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #000020;
  text-decoration: none;
  transition: color 0.3s ease;
}

.link-attivo {
  color: #000080 !important;
  position: relative;
}

.link-attivo::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -2px;
  width: 48px;
  height: 2px;
  background-color: #F24206;
  border-radius: 1px;
}

header {
  padding: 1% 3% 1% 3%;
  border-bottom: #DEDEE4 1px solid;
}

.navbar-nav {
  gap: 28px;
}

.btn {
  background-color: #000080;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: white;
  border-radius: 16px;
  width: 128px;
  height: 56px;
}

.btn:hover {
  background-color: #C2EFFC !important;
  color: #000080;
  border-color: #C2EFFC;
}

@media (max-width: 768px) {
  .scrollable-menu {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding-bottom: 10px;
    margin-bottom: 5%;
    margin-top: 5%;
  }

  .scrollable-menu .nav-item {
    flex: 0 0 auto;
  }

  .scrollable-menu::-webkit-scrollbar {
    height: 5px;
  }

  .scrollable-menu::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 6px;
  }

  .navbar-collapse {
    padding-bottom: 5%;
  }

  .navbar-toggler {
    border: none;
  }

  .navbar-toggler:focus {
    box-shadow: none;
  }

  .link-attivo::after {
    display: flex;
    left: 0;
    transform: none;
    width: 110px;
  }
}