Как сделать, чтобы эллемент не перекрывал другие?

Хочу сделать такой градиент, но он перекрывает кнопку из-за этого она становится некликабельна

<header class="header">
<div class="nav">
<div class="container">
<div class="row">
<div class="col-md-2">
<a href="#"><img src="files/logo.png" alt="Glamour.pro" class="logo"></a>
</div>
<div class="col-md-4">
<div class="navbar navbar-toggle">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О себе</a></li>
<li><a href="#">Курсы</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
</div>
<div class="col-md-5 offset-md-5 banner" >
<img src="files/first.png" class="banner" alt="banner">
</div>
</div>
</div>
</div>
<div class="offer">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="h1 main">Курсы косметологии по <span class="orange">“Барофорезу”</span><br>от профессионала</div>
<div class="h3 descript">Освой профессию косметолога и изучи современные методы и технологии прямо сейчас</div>
<a href="#" class="h2 button">Записаться</a>
</div>
<div class="col-md-8">
<div class="features">
<ul>
<li class="h2 feature">Безопасность</li>
<li class="h2 feature">Эффективность</li>
<li class="h2 feature">Красота</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="blur"></div>
</header>

HTML

    <header class="header">

        <div class="nav">

            <div class="container">

                <div class="row">

                    <div class="col-md-2">

                        <a href="#"><img src="files/logo.png" alt="Glamour.pro" class="logo"></a>

                    </div>

                    <div class="col-md-4">

                        <div class="navbar navbar-toggle">

                            <ul>

                                <li><a href="#">Главная</a></li>

                                <li><a href="#">О себе</a></li>

                                <li><a href="#">Курсы</a></li>

                                <li><a href="#">Контакты</a></li>

                            </ul>

                        </div>

                    </div>

                    <div class="col-md-5 offset-md-5 banner" >

                        <img src="files/first.png" class="banner" alt="banner">

                    </div>

                </div>

            </div>

        </div>

        <div class="offer">

            <div class="container">

                <div class="row">

                    <div class="col-md-6">

                        <div class="h1 main">Курсы косметологии по <span class="orange">“Барофорезу”</span><br>от профессионала</div>

                        <div class="h3 descript">Освой профессию косметолога и изучи современные методы и технологии прямо сейчас</div>

                        <a href="#" class="h2 button">Записаться</a>

                    </div>

                    <div class="col-md-8">

                        <div class="features">

                            <ul>

                                <li class="h2 feature">Безопасность</li>

                                <li class="h2 feature">Эффективность</li>

                                <li class="h2 feature">Красота</li>

                            </ul>

                        </div>

                    </div>

                </div>

            </div>

        </div>

        <div class="blur"></div>

    </header>

.blur {
display:block;
position:absolute;
width: 600.33px;
height: 371.31px;
left: 0px;
top: 86.87px;
background: linear-gradient(105.91deg, #F25C05 13.72%, #F2B705 83.47%);
opacity: 0.04;
filter: blur(250px);
}

Код

.blur {

    display:block;

      position:absolute;

    width: 600.33px;

    height: 371.31px;

    left: 0px;

    top: 86.87px;

    background: linear-gradient(105.91deg, #F25C05 13.72%, #F2B705 83.47%);

    opacity: 0.04;

    filter: blur(250px);

}