@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@500;700&display=swap');
/* ------------------------------------------------

Table of Contents

01. ROOT
02. BOOTSRAP OVERRIDE
03. IMPORTANT MESSAGE
04. SECONDARY LINKS
05. NAVIGATION
06. HEADER LAYOUT
    a. Style - Inline
    b. Style - Bottom
    c. Style - logoMiddle
07. INLINE FULL WIDTH
08. SEARCH OVERLAY
09. BREAKPOINTS
    a. Desktop
    b. Mobile

------------------------------------------------*/

/* ------------------------------------------------*/
/* ------------------>>> ROOT <<<------------------*/
/* ------------------------------------------------*/
:root {
  --nav-color: #333;
  --box-shadow: rgba(2, 3, 3, 0.05) 5px 5px 10px 0;
}
/* ------------------------------------------------*/
/* ----------->>> BOOTSTRAP OVERRIDE <<<-----------*/
/* ------------------------------------------------*/
.navbar-toggler {
  font-size: 1rem;
}

.navbar-toggler-icon {
  width: 1rem;
  height: 1rem;
}

:is(.mdc-custom__header-layout--inline, .mdc-custom__header-layout--logoMiddle) .btn-link:is(:hover, :focus) {
  color: var(--nav-color);
}
/* ------------------------------------------------*/
/* ----------->>> IMPORTANT MESSAGE <<<------------*/
/* ------------------------------------------------*/
.mdc-custom__header .alert {
  border-radius: 0;
  margin-bottom: 0;
  text-align: center;
}

.mdc-custom__header .alert p:last-child {
  margin-bottom: 0;
} 

.mdc-custom__header .alert-danger a {
  color: #721c24;
  font-weight: bold;
}

/* ------------------------------------------------*/
/* ------------>>> SECONDARY LINKS <<<-------------*/
/* ------------------------------------------------*/
.mdc-custom__header-secondary {
  background-color: var(--secondary-color);
  padding-block: 0.5rem;
}

.mdc-custom__header-secondary,
.mdc-custom__header-secondary__list a {
  color: #fff;
}

.mdc-custom__header-secondary__list {
  list-style: none;
  padding: 0;
  margin: 0;

  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1rem;
}


/* ------------------------------------------------*/
/* --------------->>> NAVIGATION <<<---------------*/
/* ------------------------------------------------*/

.mdc-custom__mega-container__button {
  transition: background-color .3s ease-out;
}

.mdc-custom__mega-container__link {
  color: var(--primary-color);
}

.navbar-collapse {
  transition: all 0.4s ease-in-out;
}

.mdc-custom__global-nav__list {
  overflow: visible;
  z-index: 4000;
}

.mdc-custom__global-nav__list li {
  list-style: none;
  line-height: 1.5;
}

.mdc-custom__single-container__child{
 margin-top: 1em;
}

.mdc-custom__global-nav__arrow {
  height: 10px;
  aspect-ratio: 1/1;
  fill: var(--primary-color);
  margin-left: 0.5rem;

  transition: transform .3s ease-out;
}

.mdc-custom__global-nav__list button[aria-expanded="true"] .mdc-custom__global-nav__arrow {
  transform: rotate(180deg);
}

.mdc-custom__global-nav__list > li > :is(button, a),
.mdc-custom__mega-container__title {
  font-family: 'Oswald';
  text-transform: uppercase;
}

.mdc-custom__single-container btn:active {
border-radius: 0!important;
}

.mdc-custom__global-nav__list > li > :is(.mdc-custom__mega-container__link, .mdc-custom__single-container__link, a),
.mdc-custom__global-nav__home-icon-link {
  display: block;
  padding: 0 1rem;
  letter-spacing: 1px;
  text-decoration: none;
}

.mdc-custom__global-nav__list > li > .mdc-custom__link-container__link {
  display: grid;
  align-items: center;
}

.mdc-custom__mega-container__link:hover,
.mdc-custom__single-container__link:hover {
  text-decoration: none;
}

.mdc-custom__header-layout--inline .mdc-custom__mega-container__link[aria-expanded="true"] .mdc-custom__global-nav__arrow {
  fill: var(--primary-color);
}

.mdc-custom__single-container {
  position: relative;
}

.mdc-custom__single-container > ul {
  flex-direction: column;
}

.mdc-custom__single-container > ul,
.mdc-custom__single-li-container > ul {
  margin: 0;
}

.mdc-custom__single-container > ul {
  padding: 0;
}

.mdc-custom__single-li-container > ul {
  padding: 0 1.5rem 1.5rem 1.5rem;
}

.mdc-custom__single-container__child {
  display: block;
  flex-basis: 100%;
}

.mdc-custom__mega-container > ul {
  top: 100%;
  left: 0;
  padding: 10px 20px;
  overflow: hidden;
  z-index: 4000;
  width: 100%;
}

.mdc-custom__mega-container__link,
.mdc-custom__single-container__link,
.mdc-custom__link-container__link {
  min-height: 51px;
}

.mdc-custom__single-container > ul,
.mdc-custom__mega-container > ul {
  transition: all 0.4s ease-in-out;
  box-shadow: rgba(2, 3, 3, 0.1) 0px 10px 30px 10px;
  background-color: #fff;
}


.mdc-custom__mega-container__child {
  margin: 10px 25px 10px 0;
  display: flex;
  flex-direction: column;
}

.mdc-custom__mega-container__child:last-child {
  margin-right: 0;
}

.mdc-custom__global-nav__list,
.mdc-custom__mega-container__child ul {
  padding-left: 0;
  margin-bottom: 0;
}

.mdc-custom__mega-container__title {
  font-size: 2.4rem;
  font-weight: normal;
  margin-bottom: 0.5rem;
}

.mdc-custom__mega-container__item__title {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  letter-spacing: 0.5px;
}

.mdc-custom__mega-container__item--half > li {
  width: 45%;
}

.mdc-custom__mega-container__description {
  margin-bottom: 1.5rem;
}

.mdc-custom__mega-container__item {
  margin-bottom: 1.5rem;
}

.mdc-custom__mega-container__child--feature {
  background-color: #eee;
  border-radius: 5px;
  padding: 2em;
}

.mdc-custom__mega-container__child--feature .btn {
  color: #212529;
}

.mdc-custom__mega-container__child--feature .mdc-custom__mega-container__title{
  border: 0;
  padding: 0;
}

.mdc-custom__header-container .navbar-light .navbar-toggler,
.mdc-custom__header-container .navbar-light .navbar-toggler:is(:hover, :focus) {
  background-color: #FFFFFF;
  border: 1px solid transparent;
  border-color: rgb(255, 255, 255);
}

.mdc-custom__global-nav__home-icon {
  width: 30px;
  height: 30px;
  margin-bottom: 1.4rem;
}


.mdc-custom__header-name__container > div {
  line-height: 1;
}

.mdc-custom__header-name__line01,
.mdc-custom__header-name__line02 {
  font-family: 'Bebas Neue', sans-serif;
  text-transform: uppercase;
}

.mdc-custom__header-name__line01 {
  font-size: 3rem;
  color: var(--primary-color);
}

.mdc-custom__header-name__line02 {
  font-size: 1.6rem;
  color: #333;
}

.mdc-custom__mega-container__child .mdc-custom__mega-container__button {
  color: var(--nav-color);
}

:is(.mdc-custom__header-layout--inline, .mdc-custom__header-layout--logoMiddle) .mdc-custom__mega-container__button {
  background-color: var(--secondary-color);
  color: #fff;
}

:is(.mdc-custom__header-layout--inline, .mdc-custom__header-layout--logoMiddle) .mdc-custom__mega-container__button:is(:hover, :focus) {
  background-color: var(--secondary-color-500);
}

:is(.mdc-custom__header-layout--inline, .mdc-custom__header-layout--logoMiddle) .mdc-custom__mega-container__child--feature {
  background-color: hsl(0 5.75% 94.32%);
}


/* ------------------------------------------------*/
/* ------------->>> HEADER LAYOUT <<<--------------*/
/* ------------------------------------------------*/

.mdc-custom__header-container {
  box-shadow: var(--box-shadow);
  padding-top: 2rem;
}

.mdc-custom__header-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  position: relative;
}

.mdc-custom__header-layout__logo {
  grid-area: logo;
}

.mdc-custom__header-layout__navigation {
  grid-area: nav;
}

.mdc-custom__header-layout__search {
  grid-area: search;
}


.mdc-custom__header-search {
  background-color: var(--secondary-color);
  border-radius: 50%;
  border-width: 0;
  height: 40px;
  aspect-ratio: 1/1;

  display: grid;
  place-items: center;

}

.mdc-custom__header-search__svg {
  height: 20px;
  aspect-ratio: 1/1;
  fill: #fff;
}

.mdc-custom__header-layout {
  display: grid;
  align-items: center;
}

/*--Mobile Menu Button--*/

.mdc-custom__header-container .navbar-toggler {
  max-width: 45px;
  font-size: 0.7rem;
  padding: 0;
}

.mobile-menu-bars {
  display: flex;
  flex-direction: column;
}

.mobile-menu-bars span {
  height: 4px;
  width: 100%;
  background: #666;
  border-radius: 9px;
  margin-bottom: 4px;
}

/*--Style - Inline--*/

.mdc-custom__header-container:has(.mdc-custom__header-layout--inline) {
  padding-bottom: 1rem;
}

.mdc-custom__header-layout--inline {
  grid-template-areas:
    'logo logo nav nav nav nav nav nav nav nav nav search';
}

.mdc-custom__header-layout--inline :is(.mdc-custom__header-layout__logo, .mdc-custom__header-layout__logo, .mdc-custom__header-layout__logo--middle, .mdc-custom__header-layout__search--middle) {
  place-self: center;
}

.mdc-custom__header-layout--inline :is(.mdc-custom__header-layout__navigation) {
  display: grid;
  align-items: center;
}

:is(.mdc-custom__header-layout--inline, .mdc-custom__header-layout--logoMiddle) nav :is(button, a) {
  color: var(--nav-color);
}

/*--Style - Bottom--*/
.mdc-custom__header-layout--bottom {
  grid-template-areas:
    'logo logo logo logo logo logo logo logo logo logo . search'
    'nav nav nav nav nav nav nav nav nav nav nav nav';
}

.mdc-custom__header-layout--bottom :is(.mdc-custom__header-layout__navigation) {
  margin-top: 2rem;
}

.mdc-custom__header-layout--bottom nav :is(.mdc-custom__main-nav-link > button, a:not(.mdc-custom__mega-container__button), .mdc-custom__mega-container__title) {
  color: #fff;
}

.mdc-custom__header-layout--bottom nav svg {
  fill: #fff;
}

.mdc-custom__header-layout--bottom .mdc-custom__global-nav__list > li:is(:hover, :focus),
.mdc-custom__header-layout--bottom .mdc-custom__global-nav__list button[aria-expanded="true"] {
  background-color: var(--primary-color-500);
}

.mdc-custom__header-layout--bottom .mdc-custom__single-container > ul,
.mdc-custom__header-layout--bottom .mdc-custom__mega-container > ul {
  background-color: var(--primary-color-500);
}

.mdc-custom__header-layout--bottom .navbar-light .navbar-toggler,
.mdc-custom__header-layout--bottom .navbar-light .navbar-toggler:is(:hover, :focus) {
  background-color: transparent;
  border: none;
}

.mdc-custom__header-layout--bottom .mobile-menu-bars span {
  background-color: #fff;
}

.mdc-custom__header-layout--bottom .mdc-custom__header-layout__logo {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.mdc-custom__header-layout--bottom :is(.mdc-custom__mega-container__item__title, .mdc-custom__mega-container__description, .mdc-custom__mega-container__item__description) {
  color: #fff;
}

/*--Style - logoMiddle--*/
.mdc-custom__header-container:has(.mdc-custom__header-layout--logoMiddle) {
  padding-bottom: 1rem;
}


.mdc-custom__header-layout--logoMiddle {
  grid-template-areas:
    'nav nav nav nav nav nav nav nav nav nav nav nav';
}

.mdc-custom__header-layout--logoMiddle .mdc-custom__global-nav__main {
  justify-content:  center;
}

.mdc-custom__header-layout--logoMiddle :is(.mdc-custom__header-layout__search, .mdc-custom__header-layout__search--middle) {
  display: grid;
  place-items: center;
}




/* ------------------------------------------------*/
/* ------------>>> INLINE FULL WIDTH <<<-----------*/
/* ------------------------------------------------*/

/*
.mdc-custom__inline-full-width__header-container {
  box-shadow: var(--box-shadow);
  padding: 1.5rem 2rem;

  & .mdc-custom__mega-container__link, .mdc-custom__single-container__link, .mdc-custom__link-container__link {
    min-height: 30px;
  }
}



.mdc-custom__inline-full-width {
  display: flex;
  justify-content: space-between;
  align-items: center;

  position: relative;
}


.mdc-custom__inline-full-width__logo {

  display: flex;
  align-items: center;
  gap: 0.5rem;

  & img {
    max-height: 45px;
  }

  & .mdc-custom__header-name__line01, .mdc-custom__header-name__line02 {
    font-size: 1.5rem;
  }

  & .mdc-custom__header-name__line01 {
    color: var(--secondary-color);
  }
  
}



.mdc-custom__inline-full-width__header-secondary {
  background-color: var(--primary-color);
  padding: 0.5rem 2rem;
  font-size: 0.8rem;

  display: flex;
  justify-content: space-between;


  & a, .mdc-custom__main-content a:is(:hover, :focus) {
    color: #fff;
  }


  & .mdc-custom__inline-full-width__header-secondary-list, .mdc-custom__inline-full-width__header-secondary-icons {
    list-style: none;
    margin: 0;
    padding: 0;

    display: flex;
    gap: 1.5rem;
  }


  & .mdc-custom__inline-full-width__header-secondary-icons {
    color: #fff;


    & li {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }


    & img {
      filter: brightness(0) saturate(100%) invert(88%) sepia(88%) saturate(246%) hue-rotate(162deg) brightness(114%) contrast(115%);
      height: 12px;
      width: auto;
    }

  }

}


.mdc-custom__inline-full-width__navigation {
  max-width: 1140px;
  width: auto;

  & .mdc-custom__global-nav__list > li > :is(button, a), .mdc-custom__mega-container__title {
    text-transform: none;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-weight: normal;
  }

  & .mdc-custom__mega-container__title, .mdc-custom__mega-container__item__title {
    font-weight: bold;
  }

  & .mdc-custom__mega-container__title {
    font-size: 1.2rem;
  }

  & .mdc-custom__mega-container__item__title {
    font-size: 1rem;
  }


  & .mdc-custom__mega-container__list {
    --min-column-size: 10rem;
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size), 100%), 1fr));
  }

  & .mdc-custom__mega-container__item {
    margin-bottom: 0;
  }


}


/*--Desktop--*/
/*@media (width > 1200px) {
  .mdc-custom__inline-full-width__navigation {
    position: relative;
    flex-grow: 2;


  }

  .mdc-custom__inline-full-width__logo, .mdc-custom__inline-full-width__item {
    flex-grow: 1;
  }

  .mdc-custom__inline-full-width__item {
    display: flex;
    justify-content: flex-end;
  }


  .mdc-custom__mega-container {
    & > ul {
      top: 200%;
    }
  }




}*/

/*--Mobile--*/
/*@media (width <= 1200px) {


  .mdc-custom__inline-full-width__navigation {
    order: -1;
    width: auto;
    max-width: 100%;

  }


  .mdc-custom__inline-full-width__header-secondary {

    & .mdc-custom__inline-full-width__header-secondary-icons {
      display: none;
    }
  }

  .mdc-custom__inline-full-width__logo {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }


  .mdc-custom__inline-full-width__logo {
    & .mdc-custom__header-name__line01, .mdc-custom__header-name__line02 {
      font-size: 1rem;
    }
  }

  .mdc-custom__inline-full-width__header-container {
    padding-block: 0.5rem;


    & .navbar-toggler + div {
      position: absolute;
      box-shadow: var(--box-shadow);
      width: 100%;
      top: 100%;
    }


    & .mdc-custom__global-nav__list {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;

      padding-block: 0.5rem;
      background-color: #fff;
    }


  }


}
*/






/* ------------------------------------------------*/
/* ------------->>> SEARCH OVERLAY <<<-------------*/
/* ------------------------------------------------*/

/***********************************************
Reference: https://codepen.io/RTarson/pen/dMZMRx
***********************************************/
.mdc-custom_fullscreen_submit {
  position: absolute;
  width: 50px;
  height: 100%;
  background-color: transparent;
  border: 0;
  right: 0;
  top: 0;
}
.mdc-custom_fullscreen-searchform:focus{
  outline: none;
  border: none;
}

.mdc-custom_fullscreen-searchform {
  position: relative;
}

.mdc-custom_fullscreen-search-input {
  width: clamp(20rem, 70vw, 40rem);
  background-color: transparent;
  box-shadow: 0 3px 0 0 rgba(255, 255, 255, 1);
  border: 0;
  text-align: center;
  font-size: clamp(1rem, -0.5625rem + 5vw, 2.25rem);
  padding: 20px 60px 20px 20px;
  color: #fff;
  transition: all .3s ease-out;
}
.mdc-custom_fullscreen-search-input:focus{
  boder: none;
  outline: none;
  box-shadow: 0px 3px 0px 0px rgba(255,255,255,0.54);
}

.mdc-custom_fullscreen-search-input::placeholder {
  color: #fff;
  opacity: 0.7;
}

.mdc-custom_fullscreen-search-overlay.mdc-custom_fullscreen-search-overlay--show {
  visibility: visible;
  opacity: 1;
}

.mdc-custom_fullscreen-search-overlay {
  --primary-color-opacity: hsla(
    var(--color-primary-h),
    var(--color-primary-s),
    calc(var(--color-primary-l) * 0.8),
    0.9
  );

  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  background-color: var(--primary-color-opacity);
  text-align: center;
  transition: all ease-in-out .25s;
}

.mdc-custom_animate-element,
.mdc-custom_effect-bg-layer,
.mdc-custom_fullscreen-search-overlay {
  transform: translateZ(0);
}

.mdc-custom_fullscreen-search-overlay {
  z-index: 5000;
}

.mdc-custom_fullscreen-close:is(:link,:visited) {
  color: #fff;
}

.mdc-custom_fullscreen-close:focus {
  box-shadow: none;
}


.mdc-custom_fullscreen-close {
  position: absolute;
  right: 30px;
  top: 30px;
  font-size: 26px;
  transition: transform ease-out .2s;
  transform: rotate(0deg);
  fill: #fff;
}

.mdc-custom_fullscreen-search-overlay--show .mdc-custom_fullscreen-search-wrapper {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.mdc-custom_fullscreen-search-wrapper {
  position: relative;
  display: inline-block;
  max-width: 1000px;
  vertical-align: middle;
  text-align: center;
  font-size: 18px;

  transform: scale(0.9);
  opacity: 0;
  visibility: hidden;
  transition: all ease-in-out .3s;
}

.mdc-custom_search-trigger {
  transition: color .2s ease-in-out
}

.mdc-custom_fullscreen-search-icon {
  position: absolute;
  z-index: -1;
  top: 35%;
  right: 10px;
  fill: #fff;
}

/* ------------------------------------------------*/
/* -------------->>> BREAKPOINTS <<<---------------*/
/* ------------------------------------------------*/

/*--Desktop--*/
@media (min-width: 1200px) {

  .mdc-custom__mega-container > ul,
  .mdc-custom__single-container > ul {
    position: absolute;
  }

  .mdc-custom__global-nav__list > li {
    float: left;
  }

  .mdc-custom__mega-container > ul.collapse.show {
    display: flex;
  }

  /*This shows the background color when "bottom" display is selected on desktop*/
  .mdc-custom__header-container:has(.mdc-custom__header-layout--bottom) {
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 73%,var(--primary-color) 73.1%,var(--primary-color) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  }

  .mdc-custom__single-container > ul {
    width: 190%;
    max-width: 280px;
  }

  .mdc-custom__header-layout--logoMiddle :is(.mdc-custom__header-layout__logo, .mdc-custom__header-layout__search) {
    display: none;
  }

  .mdc-custom__header-layout--logoMiddle .mdc-custom__global-nav__list {
    display: flex;
  }
}

/*--Mobile--*/
@media (max-width: 1200px) {

  .mdc-custom__global-nav__list {
    position: relative;
  }

  .mdc-custom_fullscreen-close {
    right: 10px;
    top: 20px;
  }

  .mdc-custom__header-logo {
    max-width: 75px;
  }

  .mdc-custom__mega-container__item--half > li {
    width: 100%;
  }

  .mdc-custom__global-nav {
    padding: 1.5rem 0;
  }

  .mdc-custom__global-nav__list > li .mdc-custom__mega-container__link,
  .mdc-custom__global-nav__list > li .mdc-custom__single-container__link {
    width: 100%;
    text-align: left;
  }

  .mdc-custom__mega-container > ul {
    margin: 0;
  }


  .mdc-custom__header-layout--bottom .mdc-custom__header-layout__navigation {
    box-shadow: 0 0 0 100vmax var(--primary-color);
    clip-path: inset(0 -100vmax);
  }

  .mdc-custom__header-layout--bottom .mdc-custom__global-nav {
    background-color: var(--primary-color);
  }

  .mdc-custom__header-layout--inline,
  .mdc-custom__header-layout--logoMiddle {
    grid-template-areas:
      'nav . . . . logo logo . . . . search';
  }

  :is(.mdc-custom__header-layout--inline, .mdc-custom__header-layout--logoMiddle) .navbar-collapse {
    position: absolute;
    background-color: #fff;
    box-shadow: var(--box-shadow);

    top: 100%;
    width: 100%;
    border: 1px solid rgb(245, 245, 245);
  }

  .mdc-custom__header-layout--logoMiddle :is(.mdc-custom__header-layout__logo--middle, .mdc-custom__header-layout__search--middle) {
    display: none;
  }


  /*--Bottom--*/
  .mdc-custom__header-layout--bottom .mdc-custom__global-nav {
    display: grid;
  }

  .mdc-custom__header-layout--bottom .mdc-custom__global-nav > button {
    width: 30px;
  }

  /*--Bottom with Site Name--*/
  .mdc-custom__header-layout--bottom.mdc-custom__header-layout--site-name {
    grid-template-areas:
      'logo logo logo logo logo logo logo logo logo logo logo logo'
      'search search search search search search search search search search search search'
      'nav nav nav nav nav nav nav nav nav nav nav nav';
  }

  .mdc-custom__header-layout--bottom.mdc-custom__header-layout--site-name .mdc-custom__header-layout__logo {
    flex-direction: column;
    text-align: center;
  }

  .mdc-custom__header-layout--bottom.mdc-custom__header-layout--site-name .mdc-custom__header-layout__search {
    display: grid;
    place-items: center;
    margin-top: 0.5rem;
  }
}