.searchBar{
    position: absolute;
    top: -3.8vw;
    left: 24.5vw;
    width: 24vw;
    height: 2.4vw;
    display: flex;
    align-items: center;
    gap: .7vw;
    padding: 0 1vw;
    background-color: #1B1E22;
    border: .1vw solid #1B1E22;
    border-radius: 999px;
    box-shadow: 0 0 0 .05vw rgba(255, 255, 255, 0.03);
    overflow: visible;
    z-index: 1000;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.searchBar:hover,
.searchBar:focus-within{
    transform: translateY(-.08vw);
    box-shadow: 0 .35vw .9vw rgba(45, 125, 255, 0.14);
    border-color: #2D7DFF;
}

.searchSuggestions{
    position: absolute;
    top: calc(100% + .45vw);
    left: 0;
    width: 100%;
    background: #1B1E22;
    border: .1vw solid #1E2127;
    border-radius: 1vw;
    padding: .55vw;
    box-shadow: 0 .5vw 1.1vw rgba(0, 0, 0, 0.24);
    display: none;
    flex-direction: column;
    gap: .45vw;
    z-index: 1100;
}

.searchBar:focus-within .searchSuggestions{
    display: flex;
}

.searchSuggestionGroup{
    display: flex;
    flex-direction: column;
    gap: .3vw;
}

.searchSuggestionTitle{
    color: #7B818D;
    font-size: .72vw;
    text-transform: uppercase;
    letter-spacing: .08vw;
    padding: 0 .25vw;
}

.searchSuggestionItem{
    background: transparent;
    border: none;
    color: #E6EEF9;
    text-align: left;
    padding: .35vw .45vw;
    border-radius: .55vw;
    cursor: pointer;
    font-size: .85vw;
    transition: background .18s ease, color .18s ease;
}

.searchSuggestionItem:hover{
    background: rgba(255,255,255,0.06);
    color: #ffffff;
}

.searchIcon{
    width: 1vw;
    height: 1vw;
    opacity: .8;
}

.searchInput{
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: #ffffff;
    font-size: .95vw;
}

.searchInput::placeholder{
    color: #7B818D;
}