.search-block {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 1001;
    padding: 27px 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    transition: opacity .3s ease-out, top .3s ease-out;

    &, & .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 100px;
    }

    &:not(.open) {
        pointer-events: none;
        top: -20px;
        opacity: 0;
    }
}

.search-block__logo {
    flex: 1;
    max-width: 180px;
}

.search-block__input {
    flex: 1;
    border-bottom: 1px solid #dedede;
    transition: border-color .5s ease;

    &:hover {
        border-color: #003D74;
    }

    form {
        display: flex;
        padding: 0;
        gap: 10px;
    }

    input {
        font-size: 24px;
        flex: 1;
        border: none;
        background: none;
        color: #004077;

        &::placeholder {
            color: #003D74;
        }

        &:focus {
            outline: none;
        }
    }

    button {
        border-radius: 50%;
        width: 40px;
        height: 40px;
        border: none;
        background: transparent;
        transition: background .5s ease, color .5s ease;
        color: #003D74;

        &:hover {
            cursor: pointer;
            background: #e6e6e6;
            color: #74DEBF;
        }
    }
}

.search-block__close {
    transition: color .5s ease;

    &:hover {
        cursor: pointer;
        color: #74DEBF;
    }
}

@media screen and (max-width:768px) {
    .search-block {
        padding: 30px 0;
        &, & .container {
            flex-wrap: wrap;
            gap: 30px;
        }
    }

    .search-block__input {
        flex: unset;
        order: 1;
        width: 100%;
    }
}