/* HEADER */
.header {
  background-color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 100;
}
.header .container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
.header .header__logo {
  display: flex;
  flex-direction: column;
  width: 300px;
  min-height: 80px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.header .header__logo-img {
  max-width: 300px;
  width: 100%;
  object-fit: contain;
  /* transform only — avoid max-width/margin changes that reflow sticky header */
  transition: transform 0.3s ease-in-out;
  margin-top: 5px;
  transform-origin: center center;
}

.header.header__scroll-down .header__logo-img {
  transform: scale(0.8);
}
.header .header__nav {
  display: flex;
  flex-direction: column;
}
.header .header__nav .main-menu {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  padding: unset;
  margin: unset;
  column-gap: 10px;
}
.header .header__nav .main-menu .nav-item {
  display: flex;
  flex-direction: column;
  position: relative;
}
.header .header__nav .main-menu .nav-item > .nav-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-decoration: none;
  font-family: var(--font-montserrat);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  padding: 8px 10px;
  transition: all 0.3s ease-in-out;
  border-radius: 100px;
}
.header .header__nav .main-menu .nav-item.active .nav-link {
  background-color: var(--yellow);
}
.header .header__nav .main-menu .nav-item:hover .nav-link {
  background-color: var(--yellow);
}
.header.header__scroll-down .header__nav .main-menu .nav-item.active .nav-link {
  color: white;
}
.header .header__nav .main-menu .nav-item.has-child > .nav-link:after {
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAyNC4wMCAyNC4wMCIgZmlsbD0ibm9uZSI+Cgo8ZyBpZD0iU1ZHUmVwb19iZ0NhcnJpZXIiIHN0cm9rZS13aWR0aD0iMCIvPgoKPGcgaWQ9IlNWR1JlcG9fdHJhY2VyQ2FycmllciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cgo8ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIuNzA3MSAxNC43MDcxQzEyLjMxNjYgMTUuMDk3NiAxMS42ODM0IDE1LjA5NzYgMTEuMjkyOSAxNC43MDcxTDYuMjkyODkgOS43MDcxMUM1LjkwMjM3IDkuMzE2NTggNS45MDIzNyA4LjY4MzQyIDYuMjkyODkgOC4yOTI4OUM2LjY4MzQyIDcuOTAyMzcgNy4zMTY1OCA3LjkwMjM3IDcuNzA3MTEgOC4yOTI4OUwxMiAxMi41ODU4TDE2LjI5MjkgOC4yOTI4OUMxNi42ODM0IDcuOTAyMzcgMTcuMzE2NiA3LjkwMjM3IDE3LjcwNzEgOC4yOTI4OUMxOC4wOTc2IDguNjgzNDIgMTguMDk3NiA5LjMxNjU4IDE3LjcwNzEgOS43MDcxMUwxMi43MDcxIDE0LjcwNzFaIiBmaWxsPSIjMjQzMzRjIi8+IDwvZz4KCjwvc3ZnPg==");
  height: 16px;
  width: 16px;
  top: 0px;
  margin-left: 0.8rem;
  position: relative;
  transition: all 0.3s ease;
}
.header.header__scroll-down
  .header__nav
  .main-menu
  .nav-item.active.has-child
  > .nav-link::after {
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIj4KCjxnIGlkPSJTVkdSZXBvX2JnQ2FycmllciIgc3Ryb2tlLXdpZHRoPSIwIi8+Cgo8ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KCjxnIGlkPSJTVkdSZXBvX2ljb25DYXJyaWVyIj4gPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi43MDcxIDE0LjcwNzFDMTIuMzE2NiAxNS4wOTc2IDExLjY4MzQgMTUuMDk3NiAxMS4yOTI5IDE0LjcwNzFMNi4yOTI4OSA5LjcwNzExQzUuOTAyMzcgOS4zMTY1OCA1LjkwMjM3IDguNjgzNDIgNi4yOTI4OSA4LjI5Mjg5QzYuNjgzNDIgNy45MDIzNyA3LjMxNjU4IDcuOTAyMzcgNy43MDcxMSA4LjI5Mjg5TDEyIDEyLjU4NThMMTYuMjkyOSA4LjI5Mjg5QzE2LjY4MzQgNy45MDIzNyAxNy4zMTY2IDcuOTAyMzcgMTcuNzA3MSA4LjI5Mjg5QzE4LjA5NzYgOC42ODM0MiAxOC4wOTc2IDkuMzE2NTggMTcuNzA3MSA5LjcwNzExTDEyLjcwNzEgMTQuNzA3MVoiIGZpbGw9IiNmZmZmZmYiLz4gPC9nPgoKPC9zdmc+");
}
.header .header__nav .main-menu .nav-item.has-child:hover > .nav-link:after {
  rotate: 180deg;
}

/* sub menu #1 */
.header .header__nav .main-menu .nav-item.has-child > .sub-menu {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  list-style-type: none;
  padding: unset;
  margin: unset;
  width: max-content;

  opacity: 0;
  visibility: hidden;

  transition: all 0.3s ease-in-out;
}

.header .header__nav .main-menu .nav-item.has-child:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
}

.header .header__nav .main-menu .nav-item.has-child > .sub-menu .sub-item {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
}
.header
  .header__nav
  .main-menu
  .nav-item.has-child
  > .sub-menu
  .sub-item
  .sub-link {
  text-decoration: none;
  font-size: 12px;
  font-family: var(--font-montserrat);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--navy);
  padding: 15px 30px 15px 15px;
  transition: all 0.3s ease-in-out;
  background-color: #f9f9f9;
  display: flex;
  flex-direction: row;
}
.header
  .header__nav
  .main-menu
  .nav-item.has-child
  > .sub-menu
  .sub-item:not(:last-child)
  .sub-link {
  border-bottom: #7196e1 1px solid;
}

.header
  .header__nav
  .main-menu
  .nav-item.has-child
  > .sub-menu
  .sub-item:hover
  > .sub-link {
  background-color: var(--yellow);
}

.header
  .header__nav
  .main-menu
  .nav-item.has-child
  > .sub-menu
  .sub-item.active
  > .sub-link {
  background-color: var(--yellow);
}

.header
  .header__nav
  .main-menu
  .nav-item.has-child
  > .sub-menu
  .sub-item.has-child {
  position: relative;
}

.header
  .header__nav
  .main-menu
  .nav-item.has-child
  > .sub-menu
  .sub-item.has-child
  > .sub-link:after {
  content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI1IiB2aWV3Qm94PSIwIDAgOCA1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC45NTMxMjUgMC40OTk5ODVMNC4wMDA3NiAzLjU0NzYxTDcuMDQ4MzkgMC40OTk5ODUiIHN0cm9rZT0iIzQxNDE0MSIvPgo8L3N2Zz4K");
  height: 100%;
  top: 0px;
  margin-left: 0.8rem;
  position: relative;
  rotate: 270deg;
  transition: all 0.3s ease-in-out;
}

.header
  .header__nav
  .main-menu
  .nav-item.has-child
  > .sub-menu
  .sub-item.has-child:hover
  > .sub-link:after {
  rotate: 90deg;
}

/* sub menu #2 */
.header
  .header__nav
  .main-menu
  .nav-item.has-child
  > .sub-menu
  .sub-item.has-child
  > .sub-menu {
  position: absolute;
  margin: unset;
  padding: unset;
  left: 100%;
  top: 0;
  width: max-content;

  opacity: 0;
  visibility: hidden;

  transition: all 0.3s ease-in-out;
}
.header
  .header__nav
  .main-menu
  .nav-item.has-child
  > .sub-menu
  .sub-item.has-child:hover
  > .sub-menu {
  opacity: 1;
  visibility: visible;
}

.header
  .header__nav
  .main-menu
  .nav-item.has-child
  > .sub-menu
  .sub-item.has-child
  > .sub-menu
  .sub-item {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.header
  .header__nav
  .main-menu
  .nav-item.has-child
  > .sub-menu
  .sub-item.has-child
  > .sub-menu
  .sub-item
  .sub-link {
  padding: 15px 30px 15px 15px;
}

.header .header__btn {
  font-size: 14px;
  font-family: var(--font-montserrat);
  font-weight: 600;
  height: 46px;
  padding: 5px 20px;
}

.header .header__btn-md {
  display: none;
}
.header-md {
  display: none;
  position: relative;
}
/* RESPONSIVE - HEADER */

@media screen and (max-width: 992px) {
  .header .header__logo {
    width: 260px;
  }
  .header .header__logo-img {
    max-width: 260px;
    margin-top: 0;
  }
  .header.header__scroll-down .header__logo-img {
    transform: scale(0.9);
  }
  .header .header__nav,
  .header .header__btn {
    display: none;
  }
  .header .header__btn-md {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 999;
  }
  .header .header__btn-md .hamburger .line {
    width: 20px;
    height: 2px;
    background-color: black;
    display: block;
    margin: 5px auto;
    transition: all 0.3s ease-in-out;
  }
  .header .header__btn-md .hamburger:hover {
    cursor: pointer;
  }
  .header .header__btn-md .hamburger.is-active .line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    background-color: white;
  }
  .header .header__btn-md .hamburger.is-active .line:nth-child(2) {
    opacity: 0;
    background-color: white;
  }
  .header .header__btn-md .hamburger.is-active .line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    background-color: white;
  }

  .header-md {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    z-index: 101;
    background-color: rgba(0, 0, 0, 0.4);
    overflow-y: scroll;

    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
  }
  .header-md .header-md__wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 80px;
    align-items: center;

    height: 100%;
    background-color: #0b2a52;
    position: absolute;
    top: 0;
    right: -100%;

    width: 80vw;

    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
  }
  .header-md.opened {
    visibility: visible;
    opacity: 1;
  }
  .header-md.opened .header-md__wrapper {
    right: 0;
    visibility: visible;
    opacity: 1;
    transition: all 0.3s ease-in-out;
  }
  .header-md .header-md__logo {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    padding: 0 10px;
    align-items: center;
    justify-content: center;
  }
  .header-md .header-md__logo .header-md__logo-img {
    width: 100%;
    object-fit: contain;
  }
  .header-md .header-md__menu {
    display: flex;
    flex-direction: column;
    padding: 0 30px;
    margin-top: 30px;
  }
  .header-md .header-md__btn {
    width: 100%;
    min-height: 50px;
    height: 50px;
    margin-top: 40px;
    max-width: calc(100% - 2rem);
  }
  .header-md .header-md__wrap-socmed {
    margin-top: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-gap: 20px;
    background-color: #25334c;
    padding: 25px;
    width: 100%;
  }
  .header-md .header-md__socmed-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 33px;
    height: 33px;
    background-color: white;
    border-radius: 50%;
  }
}