div#Serch__Style {
    position: fixed;
    background: whitesmoke;
    width: 100vw;
    height: 100%;
    z-index: 999999999999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2rem;
    top: -10rem;
    opacity: 0;
    visibility: hidden;
    transition: all .5s;

    & * {
        font-family: "Inria Sans", sans-serif;
    }

    & .close__search {
        width: 1rem;
        height: 1rem;
        position: absolute;
        top: 1rem;
        right: 4rem;

        & svg {
            fill: #000000;
        }
    }

    & .Search__s_1 {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2rem;

        & .logo__in_search {
            & img {
                width: 9rem;
                object-fit: contain;
            }
        }

        & form {
            width: 50%;
            justify-content: space-between;
            padding-bottom: 5px;
            border-bottom: 1px solid blue;

            & input {
                background: transparent;
                border: none;
                outline: none;
                text-transform: capitalize;
                width: -webkit-fill-available;
                color: #000;
                padding: 0 10px;
                font-size: 14px;
            }

            & button {
                width: 2.5rem;
                height: 2rem;
                background: transparent;
                border-radius: 0;
                border: none;
                border-left: 1px solid blue;
                cursor: pointer;
            }
        }

        & #search-results {
            width: 50%;

            &>div {
                border-bottom: 1px solid #c8c8c8;
                padding-bottom: 5px;
                margin-bottom: 10px;
                transition: all .5s;
                display: flex;
                justify-content: space-between;
                align-items: center;

                &:hover {
                    transform: translate(0px, -5px);
                }

                & a {
                    font-size: 14px;
                }
            }

            & .Smart_Search {
                margin-bottom: 2rem !important;
                border: none !important;
                font-weight: bold;
                font-size: 14px;
                background: #0000ff33;
                border-radius: 100px;
                padding: 2px 23px 2px 10px;
                font-family: cursive !important;
            }
        }
    }
}

.Open__Serch {
    top: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

@media ((min-width: 400px) and (max-width: 576px)) {
    & .close__search {
        right: 1rem !important;
    }

    div#Serch__Style {
        & .Search__s_1 {

            & .logo__in_search,
            & form {
                width: 90%;
            }
        }
    }

    & #search-results {
        width: 90% !important;
    }
}