@use '../utils' as *;

/*----------------------------------------*/
/*  Header css
/*----------------------------------------*/
// Active-sticky
.active-sticky {
  position: fixed !important;
  top: 0;
  z-index: 111;
  inset-inline-end: 0;
  inset-inline-start: 0;
  width: 100%;
  background-color: rgba($white, $alpha: 0.1) !important;
  box-shadow: 0px 20px 40px rgba(37, 9, 62, 0.1);
  animation: sticky 0.3s;
  -webkit-animation: sticky 0.3s;
}
// Header style five
.header-style-five {
  background: rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid rgba($white, $alpha: 0.08);
  backdrop-filter: blur(22px);
  .header-logo {
    max-width: 155px;
  }
  .header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    max-width: 1680px;
    padding: 0 15px;
    @media #{$xs,$sm,$md} {
      padding: 17px 15px;
    } 
  }
  .header-right {
    .header-action {
      display: flex;
      align-items: center;
      gap: 20px;
      .header-btn-wrap {
        display: flex;
        align-items: center;
        gap: 10px;
        .shape-shifter-btn {
          .btn-hover-slide {
            padding: 0 40px;
          }
        }
      }
    }
  }
}