section call отображается на offer, а нужно чтобы call отображалась после offer, как если бы к offer не применялись position relative и absolute
<section class="offer"><img class="offer__img" src="/assets/img/first-bg.jpg" alt="background">
<div class="offer__title">
<h1 class="offer__title-heading">Taste your fav dish</h1>
<p class="offer__title-desc">from <span>luxury restaurant!</span></p>
</div>
</section>
<section class="call">
<div class="phone d-flex ml-auto mr-auto">
<div class="phone__text">
<div class="phone__text__call">call us now for<span>home delivery</span></div>
</div>
<div class="phone__digits">1-008-005-007</div>
</div>
</section>
section.offer{
padding: 0 0;
height: 100%;
}
.offer{
position: relative;
width: 100%;
margin-top: 17px;
@media screen and (max-width: $desktopWidth){
margin-top: 0px;
}
}
.offer::after{
position: static;
}
.offer__img{
position: absolute;
display: inline-block;
width: 100%;
background: no-repeat center top;
background-size: cover;
}
.offer__title{
position: absolute;
padding: 216px 0 0px 73px;
text-shadow: 5px 5px 4px black, 0 0 1em black;
@media screen and (max-width: $tableWidth){
padding-top: 130px;
padding-left: 45px;
}
@media screen and (max-width: $phoneWidth){
padding-top: 80px;
padding-left: 30px;
}
@media screen and (max-width: $smPhoneWidth){
padding-top: 50px;
padding-left: 20px;
}
}
.offer__title-heading{
font-size: 56px;
letter-spacing: -0.3px;
color: $mainFontColor;
@media screen and (max-width: $tableWidth){
font-size: 40px;
}
@media screen and (max-width: $phoneWidth){
font-size: 30px;
}
@media screen and (max-width: $smPhoneWidth){
font-size: 25px;
}
}
.offer__title-desc{
font-size: 40px;
color: $mainFontColor;
font-family: 'Playfair Display', serif;
line-height: 1em;
margin-left: 3px;
letter-spacing: -0.2px;
@media screen and (max-width: $tableWidth){
font-size: 30px;
}
@media screen and (max-width: $phoneWidth){
font-size: 20px;
}
}
.offer__title-desc span{
color: $primary-color;
}
.call{
background: #edf1f3;
border-bottom: 1px solid #dde3e7;
width: 100%;
padding: 0 0;
}
.phone{
text-transform: uppercase;
font-weight: 700;
width: 470px;
}
.phone__text{
background: url('/assets/img/phone.png') no-repeat left center;
padding: 12px 0 12px 56px;
color: #14141d;
font-size: 14px;
font-family: 'Sintony', sans-serif;
width: 180px;
margin: 29px 25px 26px 0;
}
.phone__text__call{
display: block;
line-height: 10px;
font-size: 14px;
padding: 0 0 15 0px;
}
.phone__text span{
font-size: 16px;
display: block;
margin: 5px 0 0 -1px;
}
.phone__digits{
font-size: 32px;
font-family: 'Playfair Display', serif;
font-weight: 700;
margin: 23px 0 0 0px;
color: #000;
}