/* Header Component Styles */

.budi-header {
   z-index: 1040 !important;
}

.budi-header__top-row {
   background-color: var(--blue-800);
   padding-block: 16px;
   z-index: 1042 !important;
   position: relative;
}

.budi-header__bottom-row {
   background-color: var(--blue-800);
   padding-block: 16px;
   z-index: 1041 !important;
   position: relative;

   will-change: transform;
   transition: transform 200ms linear;
}

.budi-header__bottom-row.scroll-pinned {
   transform: translateY(0%);
}

.budi-header__bottom-row.scroll-unpinned {
   transform: translateY(-100%);
}

.budi-header .container-fluid {
   padding-inline: 60px;
}

.budi-header__logo-img {
   width: 120px;
}

.budi-header__left {
   gap: 32px;
}

.budi-header__search--desktop {
   display: none;
}

.budi-header__search {
   border-radius: 8px;
   border: 1px solid var(--neutral-400);
   overflow: hidden;
   height: 42px;
}

.budi-header.sticky-top .budi-header__search {
   display: flex !important;
}

.budi-header__search-input {
   padding-inline: 16px;
   color: var(--dark);
}

.budi-header__search-input::placeholder {
   color: var(--neutral-800);
}

.budi-header__search-btn {
   background-color: var(--primary);
   width: 54px;
   color: #fff;
}

.budi-header__menu {
   gap: 32px;
   padding-inline: 24px;
}

.budi-header__menu-link {
   color: var(--light);
}

.budi-header__menu-link::after {
   content: "";
   height: 2px;
   width: 0;
   background-color: var(--primary);
   position: absolute;
   bottom: 0;
   left: 0;
   transition: all 0.3s;
}

.budi-header__menu-link.active::after,
.budi-header__menu-link:hover::after {
   width: 100%;
}

.budi-header__btns {
   gap: 12px;
}

/* Header Offcanvas */

.budi-offcanvas__logo-img {
   width: 90px;
}

.budi-offcanvas__close-btn {
   width: 38px;
   height: 38px;
   background-color: #fff;
   border: 1px solid var(--neutral-400);
   color: var(--dark);
}

.budi-header-offcanvas .offcanvas-body {
   padding: 0 12px 16px;
}

.budi-offcanvas__menu-link {
   padding: 12px 0;
   color: var(--neutral-black);
   border: 0;
   border-bottom: 1px solid var(--theme-border);
}

.budi-offcanvas__menu-icon {
   width: 20px;
   height: 20px;
}



/* Header Responsive Styles */

@media (min-width: 1200px) {
   .budi-header--show-search-desktop .budi-header__search--desktop {
      display: flex !important;
   }
}

@media (max-width: 1399px) {
   .budi-header__left {
      gap: 20px;
   }
   
   .budi-header__menu {
      gap: 24px;
   }
}

@media (max-width: 1199px) {
   .budi-header .container {
      max-width: 100%;
   }
   
   .budi-header .container-fluid {
      padding-inline: 16px;
   }
   
   .budi-header__left {
      gap: 4px;
   }
   
   .budi-header__menu-bar img {
      width: 24px;
      aspect-ratio: 1/1;
   }

   .budi-header__logo-img {
      width: 87px;
   }

   .budi-header__search {
      width: 100%;
   }


   
   .budi-header__btn.budi-theme-btn {
      padding: 8px;
   }
}