@font-face {
    font-family: "inter-regular";
    src: url("../fonts/inter-regular.ttf") format('truetype');
}

@font-face {
    font-family: "inter-medium";
    src: url("../fonts/inter-medium.ttf") format('truetype');
}

@font-face {
    font-family: "inter-semibold";
    src: url("../fonts/inter-semiBold.ttf") format('truetype');
}

@font-face {
    font-family: "inter-bold";
    src: url("../fonts/inter-bold.ttf") format('truetype');
}

@font-face {
    font-family: "inter-extra-bold";
    src: url("../fonts/inter-extra-bold.ttf") format('truetype');
}

@font-face {
    font-family: "inter-light";
    src: url("../fonts/inter-light.ttf") format('truetype');
}

.btn {
    all: unset;
    position: relative;
    font-size: 18px;

    padding: 12px 32px;
    background: radial-gradient(ellipse at center,
            rgba(0, 0, 0, 0) 50%,
            #00AEEF3d 100%);
    backdrop-filter: blur(2px);
    color: white;
    border-radius: 50px;
}

.btn::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0px;

    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(to bottom right,
            #ffffff 0%,
            #ffffff00 62%,
            #ffffff 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.btn-header {
    all: unset;
    position: relative;
    font-size: 18px;

    padding: 12px 32px;
    background: radial-gradient(ellipse at center,
            rgba(0, 0, 0, 0) 50%,
            #00AEEF3d 100%);
    backdrop-filter: blur(2px);
    color: white;
    border-radius: 50px;
}

.btn-header::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0px;

    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(to bottom right,
            #ffffff 0%,
            #ffffff00 62%,
            #ffffff 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

@media (max-width: 1024px) {
    .btn-header {
        font-size: 12px;
        padding: 12px 16px;
    }
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;         
  padding: 0.75rem;     
  padding-left: 0.75rem; 
  padding-right: 0.75rem;
  border-radius: 12px; 
  color: #ffffff;
  transition: all 0.2s ease;
}

.nav-item.active {
  background-color: rgba(255, 255, 255, 0.1); 
  font-family: "Inter-Bold", Inter, sans-serif;
  font-weight: 700;
}

.nav-item.active::before {
  content: "";
  width: 1rem;         
  height: 1rem;        
  border-radius: 4px;
  background-color: #00AEEF; 
  display: inline-block;
}