.header_section .nav_container {
  margin: 0 auto
}

.custom_nav-container.navbar-expand-md .navbar-nav .nav-item .nav-link {
  margin: 10px 30px;
  padding: 0;
  padding-bottom: 3px;
  color: #fff;
  text-align: center;
  text-wrap: nowrap;
  position: relative;
  text-transform: uppercase;
  font-size: 15px
}

.custom_nav-container.navbar-expand-md .navbar-nav .nav-item .nav-link::after {
  display: none;
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  border-radius: 5px;
  background-color: #fff
}

.custom_nav-container.navbar-expand-md .navbar-nav .nav-item.active a::after,
.custom_nav-container.navbar-expand-md .navbar-nav .nav-item:hover a::after {
  display: block;
  background-color: #b54343;
  bottom: -2px
}

.custom_nav-container,
.custom_nav-container ul,
.custom_nav-container ul li,
.custom_nav-container ul li * {
  z-index: 100
}

.navbar {
  z-index: 4;
  flex-wrap: nowrap;
  justify-content: end;
  position: fixed;
  right: 0
}

.navbar-expand-md .navbar-toggler {
  display: flex;
  flex-direction: row
}

.navbar-toggler-icon {
  z-index: 2;
  background-image: url(https://dereszowa-sfora.pl/assets/icons/menu.svg);
  width: 56px;
  height: 56px;
  background-size: 56px;
  right: 0;
  bottom: 0;
  margin: 0;
  margin-top: 10px;
  margin-left: 10px;
  position: fixed;
  padding: 0;
  border: none
}

.navbar-toggler-overlay {
  display: none
}

@media (max-width:768px) {
  .navbar-expand-md .navbar-toggler {
    display: flex;
    flex-direction: column
  }

  .navbar {
    z-index: 3;
    bottom: 0;
    right: 0
  }

  .custom_nav-container.navbar-expand-md .navbar-nav .nav-item .nav-link {
    margin: 10px 10px 10px 30px
  }


  .navbar .navbar-nav {
    overflow: hidden;
    bottom: 0;
    right: 0;
    align-items: end;
    flex-direction: column;
    position: absolute;
    display: flex;
    margin-bottom: 80px
  }

  .navbar {
    overflow: hidden;
    z-index: 10;
    outline: 0;
    position: fixed;
    right: 0;
    bottom: 0;
    width: 80px;
    height: 80px;
    background-color: #b54343;
    border-radius: 100% 0 0 0;
    box-shadow: -5px 0 3px #00000059;
    animation-name: menuExpand;
    animation-duration: .5s;
    animation-fill-mode: forwards
  }

  .navbar:not(.expanded) {
    animation-name: menuCollapse;
    animation-duration: .5s;
    animation-fill-mode: forwards
  }

  body.preload * {
    animation-duration: 0s !important;
    -webkit-animation-duration: 0s !important;
    transition: background-color 0s, opacity 0s, color 0s, width 0s, height 0s, padding 0s, margin 0s !important
  }


  @keyframes menuExpand {
    0% {
      transition: height linear;
      width: 80px;
      height: 80px;
      border-radius: 100% 0 0 0
    }

    100% {
      transition: width linear;
      width: 200px;
      height: 300px;
      border-radius: 300px 0 0 0
    }
  }


  @keyframes menuCollapse {
    0% {
      transition: width .7s linear;
      width: 200px;
      height: 300px;
      border-radius: 300px 0 0 0;
      pointer-events: none
    }

    100% {
      transition: height .7s linear;
      width: 80px;
      height: 80px;
      border-radius: 100% 0 0 0;
      pointer-events: all
    }
  }
}