.offcanvas {
    z-index: 3000;
}

.offcanvas-backdrop {
    cursor: url("../icons/cursor-close.svg"), auto;
    @include transition5;
}

.offcanvas-search {
    height: max-content !important;
    @include transition2;
    @include hidden;
    transform: translateY(-100px) !important;
    &.show {
        transform: translateY(0px) !important;
        @include visible;
        @include transition2;
    }
    > .btn-close-search {
        position: absolute;
        right: 10px;
        top: 10px;
        background-color: var(--bg-4);
        width: 30px;
        height: 30px;
        font-size: 22px;
        @include flex(center, center);
        border-radius: 50%;
        z-index: 1;
    }
    .offcanvas-body {
        padding: 60px 0;
    }
    .form-search-courses {
        overflow: hidden;
        border-radius: 4px;
        .button-submit button {
            background-color: var(--Color-1);
            height: 50px;
            width: 50px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            background-color: var(--Color-1);
            @include transition3;
            i {
                font-size: 22px;
                color: var(--Primary);
                font-weight: 500;
                @include transition3;
            }
            &:hover {
                i {
                    color: var(--Four);
                }
            }
        }
    }
}
