@media screen and (max-width: 1100px) {
  .custom-header {
    display: none;
  }
}

.custom-mega-menu {
  padding: 0;
  display: flex;
  min-height: 570px;
  max-width: 1290px;
  margin: 0 auto;
  border-top: 2px solid #f6c002;
  z-index: 5;
}

.custom-mega-menu .mega-menu__sublist {
  padding: 0 0 40px 0;
  list-style: none;
}

.custom-mega-menu .mega-menu__sublist li:last-child a {
  padding: 0;
}

.custom-mega-menu .mega-menu__list {
  padding: 30px;
  grid-template-columns: auto;
  max-width: 258px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: unset;
  border-right: 1px solid #f2f2f2;
}

.custom-mega-menu .two-columns {
  max-width: 516px;
  width: 100%;
  gap: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: max-content;
}

.custom-mega-menu .parentlink > a {
  padding: 0 0 19px 0;
  max-width: fit-content;
  color: #2a2f29;
  font-family: "Josefin Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  transition: color 1s ease;
  position: relative;
  text-decoration: none;
}

/* Yellow underline, hidden until hover or focus */
.custom-mega-menu .parentlink > a::before {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #f6c002;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

/* Completely remove the old arrow */
.custom-mega-menu .parentlink > a::after,
.custom-mega-menu .parentlink > a:hover::after,
.custom-mega-menu .parentlink > a:focus::after,
.custom-mega-menu .parentlink > a:active::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  background-image: none !important;
}

.custom-mega-menu .parentlink > a:hover,
.custom-mega-menu .parentlink > a:focus {
  color: #354fa6;
}

.custom-mega-menu .parentlink > a:hover::before,
.custom-mega-menu .parentlink > a:focus::before {
  transform: scaleX(1);
}

.custom-mega-menu .sublink a {
  padding: 0 0 10px 0;
  color: #2a2f29;
  font-family: "Kanit";
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  transition: color 0.5s ease;
}

.custom-mega-menu .sublink a:hover {
  color: #354fa6;
}

.custom-mega-menu .mega-menu__image-block {
  margin-top: auto;
}

.custom-mega-menu .mega-menu__image-img {
  position: relative;
  width: 100%;
  padding-top: 61%;
  overflow: hidden;
}

.custom-mega-menu .mega-menu__image-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.custom-mega-menu .mega-menu__image-title {
  margin: 0 0 15px 0;
  padding-right: 0;
  max-width: fit-content;
  color: #2a2f29;
  font-family: "Josefin Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  cursor: pointer;
  text-decoration: none;
  display: block;
  transition: color 1s ease;
  position: relative;
}

/* Yellow underline for promotional image titles */
.custom-mega-menu .mega-menu__image-title::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #f6c002;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

/* Completely remove the image-title arrow */
.custom-mega-menu .mega-menu__image-title::after,
.custom-mega-menu .mega-menu__image-title:hover::after,
.custom-mega-menu .mega-menu__image-title:focus::after,
.custom-mega-menu .mega-menu__image-title:active::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  background-image: none !important;
}

.custom-mega-menu .mega-menu__image-title:hover,
.custom-mega-menu .mega-menu__image-title:focus {
  color: #354fa6;
}

.custom-mega-menu .mega-menu__image-title:hover::before,
.custom-mega-menu .mega-menu__image-title:focus::before {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .custom-mega-menu .parentlink > a,
  .custom-mega-menu .parentlink > a::before,
  .custom-mega-menu .sublink a,
  .custom-mega-menu .mega-menu__image-title,
  .custom-mega-menu .mega-menu__image-title::before {
    transition: none;
  }
}