.search-blue input {
    background: rgb(0, 16, 76);
    background: linear-gradient(
        90deg,
        rgba(0, 16, 76, 1) 0%,
        rgba(4, 11, 64, 1) 100%
    );
    border: none;
    border-radius: 22px 0 0 22px;
    padding: 12px 18px;
}
.search-blue input:focus,
.search-purple input:focus {
    box-shadow: none;
}
.search-blue input,
.search-blue input::placeholder,
.search-purple input,
.search-purple input::placeholder {
    color: white !important;
}
.search-blue span {
    background-color: #040b40;
    border: 0;
    border-radius: 0 22px 22px 0;
    padding: 0 17px;
    color: white;
    font-size: 17px;
    fill: white;
}
.search-purple input {
    background: rgb(0, 16, 76);
    background: linear-gradient(
        90deg,
        rgba(86, 34, 143, 1) 0%,
        rgb(53, 7, 102) 100%
    );
    border: none;
    border-radius: 22px 0 0 22px;
    padding: 12px 18px;
    max-width: 400px;
}
.search-purple span {
    background-color: rgb(53, 7, 102);
    border: 0;
    border-radius: 0 22px 22px 0;
    padding: 0 17px;
    color: white;
    font-size: 17px;
    fill: white;
}

.search-blue,
.search-purple {
    /* display: none !important; */
}