@import url("./theme.css");

.main-container {
  margin: 0 auto;
}

/*header component starts*/
header {
  padding: var(--space-sm) 0;
  background-color: var(--primary-color);
}
.header-component {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.header-logo a {
  text-decoration: none;
  border: 0;
  outline: 0;
  width: 146px;
  display: block;
}
.brand-logo {
  width: 100%;
}
.menu-toggle-icon {
  display: none;
  cursor: pointer;
}
.menu-toggle {
  width: 30px;
  height: 25px;
  filter: brightness(0) invert(1);
}
.menu-close {
  width: 30px;
  height: 25px;
  display: none;
  filter: brightness(0) invert(1);
}
.main-navigation-wrapper {
  margin-left: 40px;
  width: calc(100% - 146px);
}
.main-navigation-wrapper ul {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-xl);
}

/* .menu-toggle,
.menu-close {
  display: none !important;
} */

.main-navigation-wrapper ul li {
  list-style-type: none;
}
.main-navigation-wrapper ul li:last-child {
  margin-left: auto;
}

.main-navigation-wrapper ul#menu-primary-navigation > li a {
  color: var(--white);
  text-transform: uppercase;
  font-family: NoahGF-Bold;
  font-size: var(--font16);
  letter-spacing: 1px;
  position: relative;
}
.main-navigation-wrapper ul#menu-primary-navigation > li:hover a,
.main-navigation-wrapper ul#menu-primary-navigation > li.active a,
.main-navigation-wrapper ul#menu-primary-navigation > li.current-menu-item a {
  color: var(--primary-hover);
}
.main-navigation-wrapper .button-white .btn {
  color: var(--primary-color);
  border-color: transparent;
}
.main-navigation-wrapper .button-white:hover .btn {
  color: var(--white);
  background-color: var(--primary-hover);
}
.main-navigation-wrapper ul#menu-primary-navigation > li:last-child a {
  text-transform: uppercase;
  padding: 0 var(--space-lg);
  font-size: var(--font14);
  letter-spacing: 1px;
  font-family: NoahGF-Bold;
  background: var(--white);
  color: var(--primary-color);
  border: 1px solid var(--white);
  border-radius: var(--radius-28);
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.main-navigation-wrapper ul#menu-primary-navigation > li:last-child:hover a,
.main-navigation-wrapper ul#menu-primary-navigation > li:last-child:visited a {
  color: var(--white);
  border-color: var(--primary-hover);
  background-color: var(--primary-hover);
}
#menu-primary-navigation > li {
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  color: var(--color-text);
}

#menu-primary-navigation > li a::before {
  content: "";
  transform-origin: 100% 50%;
  transform: scale3d(0, 1, 1);
  transition: transform 0.3s;
  position: absolute;
  width: 100%;
  height: 1px;
  background: currentColor;
  top: 100%;
  left: 0;
  pointer-events: none;
}
#menu-primary-navigation > li a:hover::before,
#menu-primary-navigation > li.active a::before,
#menu-primary-navigation > li.current-menu-item a::before {
  transform-origin: 0% 50%;
  transform: scale3d(1, 1, 1);
}
.main-navigation-wrapper ul#menu-primary-navigation > li:last-child a::before {
  display: none;
}

/* ======== Mega Menu CSS - START ======== */
.site-navigation,
.primary-menu {
  position: static;
}
.primary-menu {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-menu > li {
  position: static;
}
.has-mega-menu {
  position: static !important;
  transition: all 0.3s;
}
.mega-menu {
  position: absolute;
  top: 0; /* adjust based on header height */
  left: 0;
  right: 0;
  width: 100%;
  background: var(--white);
  z-index: 9999;
  padding: var(--space-xl) 0;
  border-top: 1px solid #e5e5e5;
  visibility: hidden;
  opacity: 0;
  height: 0;
  transition: all 0.3s;
}
.has-mega-menu.is-open .mega-menu {
  top: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 1;
  transition: all 0.3s;
}
.mega-menu__inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  align-items: flex-start;
  gap: var(--space-xxl);
  background-color: var(--white);
}
.mega-menu__left {
  width: 220px;
  flex-shrink: 0;
}
.mega-menu__eyebrow {
  display: block;
  margin-bottom: 20px;
  font-size: var(--font12);
  font-weight: 700;
  text-transform: uppercase;
  color: #95a1b3;
  letter-spacing: 1px;
}

/* Product category list */
.mega-menu__category-list {
  display: flex;
  gap: var(--space-xs) !important;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: flex-start !important;
  flex-direction: column;
}
.mega-menu__category-list li {
  width: auto !important;
  flex: 0 0 auto;
  display: inline-block;
  margin: 0 !important;
  line-height: 24px;
}
.mega-menu__category-list li a {
  font-family: NoahGF-Bold !important;
  color: var(--secondary-color) !important;
  text-transform: none !important;
}
.mega-menu__category-list li:hover a,
.mega-menu__category-list li:visited a {
  color: var(--primary-hover) !important;
}
.mega-menu__category-item {
  margin-bottom: var(--space-sm);
}
.mega-menu__category-link {
  color: var(--secondary-color);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--font16);
}
.mega-menu__category-link:hover,
.mega-menu__category-link:visited {
  color: var(--primary-color);
}
.mega-menu__right {
  flex: 1;
}
.mega-menu__product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.mega-product-card {
  background: #f5f5f5;
  text-align: center;
  padding: 20px;
  min-height: 380px;
  border-radius: 4px;
}
.mega-product-card__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}
.mega-product-card__title {
  font-size: var(--font16);
  font-weight: 700;
  color: var(--secondary-color);
  min-height: 70px;
  margin-bottom: 10px;
  line-height: 100%;
  font-family: NoahGF-Bold;
}
.mega-product-card__image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
}
.mega-product-card__image {
  max-width: 150px;
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.mega-product-card__button {
  margin-top: auto;
  background: var(--primary-color);
  color: var(--white);
  padding: 12px 28px;
  border-radius: 30px;
  font-size: var(--font14);
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
  gap: var(--space-xs);
}
.mega-product-card__button span {
  margin-left: 5px;
  display: inline-block;
}
.mega-product-card__button:hover,
.mega-product-card__button:visited {
  background-color: var(--primary-hover);
  color: var(--white);
}
.mega-product-card {
  padding: 20px;
  min-height: auto;
}
.mega-product-card img {
  max-height: 180px;
  width: auto;
}
.mega-product-card h3 {
  margin: 0 0 12px;
  line-height: 1.2;
  font-size: var(--font20);
}
.mega-product-card__link::before {
  display: none;
}
/* Mega Menu CSS - END */

/*header component ends*/

/*hero component css starts*/
.hero-banner .item {
  position: relative;
}
.hero-component {
  /* width: 100vw; */
  position: relative;
}
.hero-component img {
  width: 100%;
}
.hero-component-inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}
.hero-component-text {
  max-width: 50%;
  background: rgba(0, 0, 0, 30%);
  padding: 35px 55px;
  border-radius: var(--radius-32);
}
.hero-component-text h1 {
  color: var(--white);
  font-family: NoahGF-Black;
}
.hero-component-text p {
  font-family: NoahGF-Bold;
  color: var(--white);
  font-weight: 400;
  margin: var(--space-sm) 0 var(--space-md);
  opacity: 0.9;
}
.hero-bannermobile {
  display: none;
}
#tns1-ow .tns-nav {
  position: absolute;
  bottom: 52px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
#tns1-ow .tns-nav button {
  background: url(../images/GF_Fish_Icon.svg) no-repeat;
  margin: 0 10px;
  width: 24px;
  height: 18px;
  filter: brightness(0.9) contrast(0.4);
  transition: all 0.3s;
}
#tns1-ow .tns-nav button.tns-nav-active {
  filter: brightness(1) contrast(1);
  transform: scale(1.5);
}
/*hero component css ends*/

/* Shop by Category */
.shop-category {
  background-color: var(--primary-color);
}
.shop-category-heading {
  margin-bottom: 65px;
}
.shop-category-heading h2 {
  font-family: NoahGF-Black;
  color: var(--white);
  margin-bottom: var(--space-sm);
}
.shop-category-heading p {
  font-family: NoahGF-Bold;
  color: var(--white);
}
.shop-category-inner {
  background-color: var(--primary-hover);
  border-radius: var(--radius-48);
  display: block;
}
.shop-category-inner img {
  transition: all 0.3s;
}
.shop-category-inner:hover img {
  transform: scale(1.05);
}
.shop-category-inner:hover {
  transform: translateY(-10px);
}
.shop-category-inner h5 {
  color: var(--secondary-color);
  padding: var(--space-lg) var(--space-md);
  font-size: var(--font20);
}
.shop-product {
  background-color: var(--primary-hover);
  border-radius: var(--radius-48);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.shop-product img {
  max-height: 350px;
  width: auto;
  margin-top: -124px;
}
#tns2-ow {
  position: relative;
}
#tns2 > .tns-item {
  padding: 135px 10px 40px;
}
.shop-category .tns-controls {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}
.shop-category .tns-controls button[data-controls="prev"] {
  color: transparent;
  left: -55px;
  position: absolute;
  background: url(../images/slider-arrow.svg) no-repeat;
  width: 40px;
  height: 40px;
  background-size: 100% 100%;
  filter: brightness(0) invert(1);
  transform: scale(-1);
}
.shop-category .tns-controls button[data-controls="next"] {
  color: transparent;
  right: -55px;
  position: absolute;
  background: url(../images/slider-arrow.svg) no-repeat;
  width: 40px;
  height: 40px;
  background-size: 100% 100%;
  filter: brightness(0) invert(1);
}

#tns2-ow .tns-nav {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
#tns2-ow .tns-nav button {
  background: #d9d9d9;
  margin: 0 var(--space-xs);
  width: 11px;
  height: 11px;
  padding: 0;
  border-radius: var(--radius-50);
  transition: all 0.3s;
}
#tns2-ow .tns-nav button.tns-nav-active {
  width: 15px;
  height: 15px;
  background: var(--primary-hover);
}
/* Limited-Edition */
.limited-edition {
  position: relative;
}
.limited-edition-wrapper {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.limited-edition-inner {
  background: var(--primary-color);
  border-radius: var(--radius-32);
  padding: var(--space-xxl) var(--space-xl);
}
.limited-edition-inner h3 {
  color: var(--white);
  font-family: NoahGF-Black;
  margin-bottom: var(--space-md);
}
.limited-edition-inner h3 span {
  text-decoration: underline;
}
.limited-edition-inner p {
  color: var(--white);
  font-family: NoahGF-Bold;
  margin-bottom: var(--space-lg);
}
.limited-edition-formobile {
  display: none;
  margin: var(--space-xl) 0;
}
.limited-edition-formobile img {
  border-radius: var(--radius-48);
}
.limited-edition-btn .btn span {
  margin-left: var(--space-sm);
  display: inline-block;
}
.limited-edition-btn .btn span img {
  filter: brightness(0) invert(0);
}
.limited-edition-btn .btn:hover,
.limited-edition-btn .btn:visited {
  background: var(--white);
  color: var(--black);
  border: 1px solid var(--primary-hover);
}

/* Always Baked */
.always-baked {
  background: var(--primary-color) url(../images/bite-sized-bgfish.svg)
    no-repeat 98% center;
  background-size: 50%;
  position: relative;
  z-index: 0;
  overflow-x: hidden;
}
.always-baked-heading {
  margin-bottom: var(--space-xxxl);
}
.always-baked-heading h2 {
  color: var(--white);
  font-family: NoahGF-Black;
}
.always-baked-card {
  position: relative;
  padding: var(--space-xxl) var(--space-xl);
}
.always-baked-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: var(--white);
  z-index: -1;
  border-radius: var(--radius-32);
}
.always-baked-card::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(245, 205, 0, 0.47);
  transform: rotate(-6deg);
  z-index: -2;
  border-radius: var(--radius-32);
}
.always-baked-card p {
  color: var(--primary-color);
  margin-bottom: var(--space-lg);
  font-family: NoahGF-Bold;
}
.always-baked-card ul li {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-sm);
  color: var(--primary-color);
  gap: var(--space-md);
  font-family: NoahGF-Bold;
}
.always-baked-card ul li span {
  background: var(--primary-color);
  height: 46px;
  width: 46px;
  border-radius: var(--radius-50);
  display: flex;
  align-items: center;
  justify-content: center;
}
.always-baked-card ul li img {
  width: auto;
  filter: brightness(0) invert(1);
}
.always-baked-card ul li p {
  margin: 0;
  width: calc(100% - 70px);
}
.always-baked-btn {
  margin-left: 70px;
}

/* Every Moment */
.every-moment {
  background-color: var(--primary-hover);
}
.every-moment-header {
  margin-bottom: var(--space-xxl);
}
.every-moment h4,
.every-moment p {
  color: var(--black);
  font-family: NoahGF-Bold;
}
.every-moment-slider {
  display: flex;
  justify-content: center;
  gap: 25px;
}
.every-moment-wholediv {
  width: calc(100% / 3);
}
.every-moment-inner {
  background-color: var(--white);
  padding: var(--space-md);
  border-radius: var(--radius-32);
  display: block;
  position: relative;
}
.every-moment-product {
  margin-bottom: var(--space-md);
}
.every-moment-product img {
  width: 100%;
  border-radius: var(--radius-32);
}
.every-moment-inner h5 {
  color: var(--black);
  font-size: var(--font24);
  margin-bottom: var(--space-xs);
  padding: 0 var(--space-xs);
  min-height: 57px;
}
.every-moment-inner p {
  color: var(--black);
  font-size: var(--font14);
  padding: 0 var(--space-xs);
  line-height: 22px;
}
.every-moment-inner span {
  margin: var(--space-md) 0 0 12px;
  display: block;
}
.every-moment-inner span img {
  width: auto;
  filter: brightness(0) invert(0);
}
#tns3-ow {
  position: relative;
}
/* #tns3 > .tns-item {
  padding: 135px 10px 40px;
} */
.every-moment .tns-controls {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}
.every-moment .tns-controls button[data-controls="prev"] {
  color: transparent;
  left: -56px;
  position: absolute;
  background: url(../images/slider-arrow.svg) no-repeat;
  width: 40px;
  height: 40px;
  background-size: 100%;
  transform: scale(-1);
}
.every-moment .tns-controls button[data-controls="next"] {
  color: transparent;
  right: -56px;
  position: absolute;
  background: url(../images/slider-arrow.svg) no-repeat;
  width: 40px;
  height: 40px;
  background-size: 100%;
}
.every-moment .button-white {
  margin-top: var(--space-big);
}

/* video */
.video-section {
  background: #f55a00;
}
.video-section h2 {
  color: var(--white);
  margin-bottom: var(--space-xl);
}
.video-inner {
  padding: 0 15px;
}
.video-section video,
.video-section iframe {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border: 2px solid var(--white);
  border-radius: var(--radius-48);
  box-shadow: 0 1px 27px 13px rgba(0, 0, 0, 0.25);
}

/*footer*/
footer {
  position: relative;
  background: var(--primary-color);
}
.footer-top-section {
  display: flex;
  flex-direction: column;
}
.footer-top-wrapper {
  padding: var(--space-xxxl) 0 var(--space-xxl);
}
.footer-logo {
  max-width: 104px;
  display: block;
}
.footer-logo img {
  width: 100%;
}
.social-media {
  gap: 12px;
}
.social-media li a {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-50);
  background-color: var(--white-18);
  transition: all 0.3s;
}
.social-media li a:hover {
  background-color: var(--white-55);
}
.social-media li a img {
  max-height: 16px;
}
.footer-info li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.footer-info li img {
  width: auto;
}
.footer-info li p {
  color: var(--white);
  font-size: var(--font16);
  font-family: NoahGF-Bold;
}
.footer-component-inner {
  border-top: 1px solid var(--white-18);
  border-bottom: 1px solid var(--white-18);
  padding: var(--space-xxl) 0;
}
.footer-component-inner h6 {
  font-size: var(--font16);
  color: var(--heading-colorY);
  text-transform: uppercase;
  font-family: NoahGF-Black;
  margin-bottom: 20px;
  letter-spacing: 1.3px;
}
.footer-component-inner ul li {
  margin: 0 0 12px;
  line-height: 22px;
}
.footer-component-inner ul li a {
  color: var(--white);
  font-size: var(--font16);
  font-family: NoahGF-Bold;
  transition: all 0.3s;
}
.footer-component-inner ul li:hover a,
.footer-component-inner ul li:visited a {
  color: var(--heading-colorY);
}
.footer-copyright {
  padding: 28px 0 22px;
  /* background-color: #e75708; */
}
.footer-copyright ul {
  color: var(--white-55);
  margin-bottom: 5px;
}
.footer-copyright ul li {
  position: relative;
}
.footer-copyright ul li::after {
  content: "";
  color: var(--white);
  height: 14px;
  width: 2px;
  position: absolute;
  right: -10px;
  left: auto;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--white);
}
.footer-copyright ul li:last-child:after {
  display: none;
}
.footer-copyright ul li,
.footer-copyright ul li a,
.footer-copyright p,
.footer-copyright p a {
  font-size: var(--font14);
  font-family: NoahGF-Bold;
  color: var(--white);
  transition: all 0.3s;
}
.footer-copyright ul li:hover a,
.footer-copyright ul li:visited a {
  color: var(--heading-colorY);
}
/*footer ends*/

/* ======================================== product listing page ======================================== */
.inner-banner {
  background-color: var(--primary-color);
  position: relative;
}
.inner-banner-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  width: 100%;
}
.inner-banner-text {
  max-width: 60%;
  display: inline-block;
}
.inner-banner-text h1 {
  color: var(--white);
  font-family: NoahGF-Black;
  margin-bottom: 20px;
}
.inner-banner-text h1 span {
  color: var(--primary-hover);
  display: block;
}
.inner-banner-text p {
  color: var(--white);
  font-family: NoahGF-Bold;
}

/* product category */
.product-listing {
  padding: var(--space-xxxl) 0 var(--space-big);
  /* background-color: #fff4e2; */
}
.labels {
  position: absolute;
  left: 20px;
  top: 20px;
  border-radius: var(--radius-28);
  padding: var(--space-xs) var(--space-sm);
  font-family: NoahGF-Bold;
  font-size: var(--font12);
  text-transform: uppercase;
  transform: rotate(-14deg);
}
.yel {
  background: var(--primary-hover);
  color: var(--secondary-color);
}
.labels.gren {
  background: #30b36a;
  color: var(--white);
}
.labels.bron {
  background: #7c2d00;
  color: var(--white);
}
.product-category {
  padding: var(--space-md);
  background-color: var(--white);
  border-radius: var(--radius-28);
}
.product-category h2 {
  font-size: var(--font14);
  line-height: 16px;
  letter-spacing: 1px;
  color: var(--primary-color);
  text-transform: uppercase;
  font-family: NoahGF-Black;
  margin-bottom: var(--space-lg);
  letter-spacing: 1px;
}
.product-filter {
  margin-bottom: var(--space-lg);
}
.category-list {
  padding: 0;
  margin: 0;
}
.category-list li {
  margin-bottom: 2px;
}
.category-list li a {
  color: var(--textDarkgrey);
  font-size: var(--font16);
  font-family: NoahGF-Bold;
  line-height: 20px;
  padding: 9px 14px;
  border-radius: 0 var(--radius-8) var(--radius-8) 0;
  display: block;
  border-left: 3px solid transparent;
}
.category-list li:hover a {
  background-color: rgb(255, 90, 0, 0.2);
  /* color: var(--white); */
  transform: translate(5px, -5px);
}
.category-list li.active a {
  border-left: 3px solid var(--primary-hover);
  background-color: var(--primary-color);
  color: var(--white);
  transform: translate(5px, -5px);
}
/* ====right-side==== */
.top-pagination,
.sortby {
  font-size: var(--font16);
  font-family: NoahGF-Bold;
  color: var(--white);
  line-height: 24px;
}
.sortby select {
  background-color: var(--bg-category);
  padding: var(--space-xs);
  border-radius: var(--radius-8);
  min-width: 190px;
  color: var(--textColor);
  margin-left: var(--space-xs);
}
.product-list {
  position: relative;
  background-color: var(--white);
  border-radius: var(--radius-16);
  padding: 20px;
  overflow: hidden;
  transition: all 0.3s;
}
.product-list:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 3px 6px 5px 0px rgba(0, 0, 0, 0.25);
}
.product-list-image {
  position: relative;
  border-radius: var(--radius-8);
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding: var(--space-lg) 20px; */
  margin-bottom: var(--space-md);
  height: 280px;
  transition: all 0.3s;
  z-index: 1;
}
.product-list-image img {
  height: 100%;
  object-fit: contain;
}
.product-list-bgcolor {
  position: absolute;
  left: 50%;
  top: 90px;
  width: 170px;
  transform: translateX(-50%);
  transition: all 0.5s;
}
.product-list:hover .product-list-bgcolor {
  transform: translateX(-50%) rotate(-40deg) scale(1.05);
}
.product-list:hover .product-list-image {
  animation: swing ease-in-out 0.35s infinite alternate;
  transform-origin: center -20px;
}
.product-list-text {
  margin-bottom: var(--space-sm);
  text-align: center;
}
.product-list-text h5 {
  font-size: var(--bodyFont);
  color: var(--secondary-color);
  line-height: normal;
  min-height: 46px;
  margin-bottom: var(--space-xs);
}
.product-list-text p {
  font-size: var(--font14);
  line-height: 24px;
  font-family: NoahGFText-Regular;
  color: var(--secondary-color);
  min-height: 34px;
}
.listbtn-group {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.listbtn-group .btn {
  width: 100%;
  margin-bottom: var(--space-sm);
}
.buy-btn {
  color: var(--primary-color);
  font-size: var(--font14);
  font-family: NoahGF-Bold;
  line-height: 14px;
}
.buy-btn:hover,
.buy-btn:visited {
  color: var(--primary-color);
  text-decoration: underline;
}

/* ======================================== product details page ======================================== */
.inner-header {
  background-color: var(--primary-color);
}
.product-details {
  background-color: var(--primary-color);
}
.breadcrumb-section {
  padding: var(--space-big) 0 var(--space-xs);
  background-color: var(--primary-color);
}
.breadcrumb {
  margin-left: 0;
}
.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a {
  color: var(--white);
  font-size: var(--font14);
  font-family: NoahGF-Bold;
  line-height: 14px;
}
.breadcrumb .breadcrumb-item.active {
  color: var(--primary-hover);
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--white);
  font-family: NoahGF-Bold;
}
/* .product-details-image {
  position: sticky;
  top: 74px;
} */

.recipe-img.product-details-image {
  background: var(--white);
  border-radius: var(--radius-32);
  box-shadow: 0 25px 25px rgba(0, 0, 0, 0.15);
}
.product-thumbnails {
  justify-content: center;
  margin-top: var(--space-xl) !important;
}
.thumbnail-image {
  max-width: 100px;
  height: 100px;
  background: var(--white);
  border: 2px solid var(--black);
}
.thumbnail-image.active {
  border-color: var(--primary-hover);
}
.product-description-wrapper {
  background-color: var(--white);
  padding: var(--space-xl);
  border-radius: var(--radius-32);
}
.product-description h1 {
  font-size: var(--font48);
  line-height: 60px;
  margin-bottom: var(--space-sm);
  color: var(--secondary-color);
}
.star-rate {
  margin: var(--space-sm) 0 var(--space-md);
}
.select-quantity {
  margin-bottom: var(--space-lg);
}
.select-quantity select {
  border-radius: var(--radius-32);
  border: 1px solid var(--black);
  padding: var(--space-xs) var(--space-lg);
  font-size: var(--font20);
  font-family: NoahGF-Bold;
}
.product-description p {
  font-size: var(--font16);
  line-height: 28px;
  font-family: NoahGF-Bold;
}
.product-description p:last-child {
  margin-bottom: var(--space-lg);
}
.whats-inside {
  background-color: var(--primary-color);
}
.whats-inside h2 {
  color: var(--white);
}
.whats-inside p {
  color: var(--white);
  font-family: NoahGF-Bold;
}
.nutrution-fact img {
  width: 100%;
}
.ingredients-section ul {
  margin-bottom: var(--space-lg);
}
.ingredients-section ul li {
  border-radius: var(--radius-32);
  background-color: var(--light-green);
  padding: var(--space-md);
  display: flex;
  align-items: center;
  flex-direction: column;
  color: var(--secondary-color);
  font-size: var(--font14);
  line-height: 14px;
  font-family: NoahGF-Bold;
  width: 100%;
}
.ingredients-section ul li span {
  margin-bottom: var(--space-xs);
}
.ingredient-text h5 {
  display: flex;
  align-items: center;
  color: var(--secondary-color);
  font-size: var(--font24);
  line-height: 34px;
  margin-bottom: var(--space-sm);
}
.ingredient-text h5 span {
  margin-right: var(--space-sm);
}
.ingredient-text {
  background-color: var(--primary-hover);
  border-radius: var(--radius-32);
  padding: var(--space-lg);
  color: var(--textColor-dark);
  font-family: NoahGF-Bold;
  font-size: var(--font16);
  line-height: 26px;
}
.nfp-nutrition-facts-table {
  color: #000;
  line-height: 14px;
  font-size: 60%;
}
.nfp-nutrition-facts {
  max-width: 100%;
  padding: var(--space-lg);
  border-radius: var(--radius-32) var(--radius-32) 0 0;
  border: 0;
  width: 100%;
}
/* .nfp-nutrition-facts tbody tr {
  display: table-row;
} */
.nfp-nutrition-facts .table-title,
.nfp-nutrition-facts .calories th,
.nfp-nutrition-facts .calories td {
  font-size: 1.2rem;
}
.servings-per-container td {
  padding: 10px 0 0;
}
/* .nfp-nutrition-facts .calories td {
  font-size: 2.125rem;
} */
.nutrition-panel-toggle {
  margin-top: 0 !important;
  background: var(--white);
  border-radius: 0 0 var(--radius-32) var(--radius-32);
}
.nutrition-show-more,
.nutrition-show-more:hover,
.nutrition-show-more:visited {
  background-color: var(--white) !important;
  color: var(--black) !important;
  font-style: italic;
  padding: 0 !important;
}
.more-explore-heading {
  margin-bottom: var(--space-xxl);
}
.more-explore-heading h2 {
  color: var(--white);
}
.more-explore-heading p {
  color: var(--white);
  font-family: NoahGF-Bold;
}
.more-explore .button-outline .btn {
  background: transparent;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  width: 100%;
}
.more-explore .button-outline .btn:hover,
.more-explore .button-outline .btn:visited {
  background: var(--primary-color);
  color: var(--white);
  border: 1px solid var(--primary-color);
}
.review-section {
  background-color: var(--bg-category);
}
.review-section img {
  width: 100%;
}
.onlyfish {
  background: url(../images/GF_fishline.svg) no-repeat bottom center;
  background-size: 100%;
}
.nofish {
  background-image: none;
}
.onlyfish .accordion {
  padding-bottom: 120px;
}
.common-header h3,
.common-header h4,
.common-header h1 {
  margin-bottom: var(--space-sm);
  color: var(--white);
}
.common-header p {
  color: var(--white);
}
.faq-section .common-header h3 {
  font-family: NoahGF-Bold;
}
/* .accordion {
  margin-bottom: var(--space-xxxl);
} */
.accordion-button {
  padding: var(--space-md);
  color: var(--secondary-color);
  font-size: var(--font24);
  font-family: NoahGF-Bold;
  line-height: 33px;
}
.accordion-item {
  border: 1px solid rgba(227, 191, 177, 0.3);
  border-radius: var(--radius-32) !important;
  margin-bottom: var(--space-sm);
  overflow: hidden;
}
.accordion-item:not(:first-of-type) {
  border-top: 1px solid rgba(227, 191, 177, 0.3);
}
.accordion-button:not(.collapsed) {
  color: var(--secondary-color);
  background-color: transparent;
  box-shadow: none;
}
.accordion-button:not(.collapsed)::after {
  filter: brightness(1) invert(1);
}
.accordion-body {
  font-family: NoahGF-Bold;
  color: var(--textColor-dark);
  font-size: var(--font16);
  padding: var(--space-md);
  padding-top: 0;
}
.card-img,
.card-img-top {
  border-radius: var(--space-lg);
  border: 20px solid var(--white);
}
/* ======================================== product category page ======================================== */
.inline-text.inner-banner-text h1 span {
  display: inline-block;
}
.product-category-wrapper {
  border-radius: var(--radius-32);
  background-color: var(--white);
  padding: var(--space-xl);
  margin-bottom: var(--space-big);
}
.product-category-wrapper:last-child {
  margin-bottom: 0;
}
.product-category-wrapper:nth-child(2n) .row {
  flex-direction: row-reverse;
}
.product-category-wrapper small::after {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  height: 8px;
  width: 8px;
  border-radius: var(--radius-50);
  background-color: var(--primary-color);
}
.product-category-wrapper small {
  position: relative;
  color: var(--primary-color);
  font-size: var(--font12);
  font-family: NoahGF-Bold;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding-left: var(--space-sm);
}
.product-category-wrapper h2 {
  color: var(--secondary-color);
  font-family: NoahGF-Bold;
  margin: var(--space-sm) 0 var(--space-md);
}
.product-category-wrapper h2 span {
  color: #ddb100;
  display: block;
}
.product-category-wrapper em {
  font-style: normal;
  color: var(--primary-color);
  font-family: NoahGF-Bold;
  display: block;
}
.product-category-wrapper p {
  color: var(--black);
  margin: var(--space-md) 0;
}
.product-category-text p {
  color: var(--textColor);
  font-family: NoahGF-Bold;
}
.product-category-wrapper .btn {
  padding-right: 60px;
  transition: all 0.3s;
  position: relative;
  margin-top: var(--space-sm);
}
.product-category-wrapper .btn span {
  position: absolute;
  display: block;
  right: 30px;
  transition: all 0.3s;
}
.product-category-wrapper .btn:hover span {
  right: 26px;
  filter: brightness(1) invert(1);
}
/* .product-category-wrapper:nth-child(2n) .product-category-image {
  padding-left: 0;
  padding-right: var(--space-xxl);
} */
.product-category-image {
  position: relative;
}
.product-category-image span {
  font-family: NoahGF-Black;
  font-size: 11rem;
  color: var(--white-55);
  position: absolute;
  bottom: -30px;
  right: 5px;
  display: block;
  line-height: normal;
}

.category-liststyle {
  margin-top: var(--space-sm);
}
.category-listcolumn {
  margin: var(--space-md) 0;
}
.category-listcolumn ul {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.category-listcolumn li {
  border-radius: var(--radius-16);
  background-color: var(--white);
  border: 1px solid #f1f5f9;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  padding: var(--space-md);
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  width: 50%;
}
.category-listcolumn li span {
  margin-bottom: var(--space-xs);
}
.category-listcolumn li h6 {
  color: var(--black);
  font-size: var(--font16);
  line-height: 24px;
  font-weight: var(--font-regular);
  margin-bottom: var(--space-xs);
  display: flex;
  align-items: center;
}
.category-listcolumn li h6 img {
  width: auto;
  margin-right: var(--space-xs);
}
.category-listcolumn li p {
  color: var(--black);
  font-size: var(--font14);
  line-height: 20px;
  font-weight: var(--font-regular);
  margin: 0;
}
.category-liststyle li {
  background: url(../images/green-tick.svg) no-repeat;
  padding-left: var(--space-xl);
  margin-bottom: var(--space-sm);
  font-size: var(--font16);
  color: var(--secondary-color);
}
.product-category-image {
  background-color: rgb(211, 141, 77, 0.2);
  border-radius: var(--radius-32);
}
.brown-shade.product-category-wrapper small::after,
.brown-shade.product-category-wrapper .btn {
  background-color: #d38d4d;
}
.brown-shade.product-category-wrapper .btn:hover,
.brown-shade.product-category-wrapper .btn:visited {
  color: #d38d4d;
  border-color: #d38d4d;
  background-color: var(--white);
}
.brown-shade.product-category-wrapper small,
.brown-shade.product-category-wrapper h2 span,
.brown-shade.product-category-wrapper em,
.brown-shade.product-category-wrapper .category-listcolumn h6 {
  color: #d38d4d;
}
.brown-shade .product-category-image {
  background-color: rgba(211, 141, 77, 0.2);
}

.branddark-shade.product-category-wrapper small::after,
.branddark-shade.product-category-wrapper .btn {
  background-color: #ee4b23;
}
.branddark-shade.product-category-wrapper .btn:hover {
  color: #ee4b23;
  border-color: #ee4b23;
  background-color: var(--white);
}
.branddark-shade.product-category-wrapper small,
.branddark-shade.product-category-wrapper h2 span,
.branddark-shade.product-category-wrapper em,
.branddark-shade.product-category-wrapper .category-listcolumn h6 {
  color: #ee4b23;
}
.branddark-shade .product-category-image {
  background-color: rgba(238, 75, 35, 0.2);
}

.green-shade.product-category-wrapper small::after,
.green-shade.product-category-wrapper .btn {
  background-color: #51a832;
}
.green-shade.product-category-wrapper .btn:hover {
  color: #51a832;
  border-color: #51a832;
  background-color: var(--white);
}
.green-shade.product-category-wrapper small,
.green-shade.product-category-wrapper h2 span,
.green-shade.product-category-wrapper em,
.green-shade.product-category-wrapper .category-listcolumn h6 {
  color: #51a832;
}
.branddark-shade .product-category-image {
  background-color: rgba(81, 168, 50, 0.2);
}

.blue-shade.product-category-wrapper small::after,
.blue-shade.product-category-wrapper .btn {
  background-color: #409bd7;
}
.blue-shade.product-category-wrapper .btn:hover {
  color: #409bd7;
  border-color: #409bd7;
  background-color: var(--white);
}
.blue-shade.product-category-wrapper small,
.blue-shade.product-category-wrapper h2 span,
.blue-shade.product-category-wrapper em,
.blue-shade.product-category-wrapper .category-listcolumn h6 {
  color: #409bd7;
}
.branddark-shade .product-category-image {
  background-color: rgba(66, 155, 215, 0.2);
}

.purple-shade.product-category-wrapper small::after,
.purple-shade.product-category-wrapper .btn {
  background-color: #af74df;
}
.purple-shade.product-category-wrapper .btn:hover {
  color: #af74df;
  border-color: #af74df;
  background-color: var(--white);
}
.purple-shade.product-category-wrapper small,
.purple-shade.product-category-wrapper h2 span,
.purple-shade.product-category-wrapper em,
.purple-shade.product-category-wrapper .category-listcolumn h6 {
  color: #af74df;
}
.purple-shade .product-category-image {
  background-color: rgba(175, 116, 223, 0.2);
}

.special-limited {
  background: var(--primary-hover);
}
.special-limited-heading {
  margin-bottom: var(--space-big);
}
.special-limited-heading h3 {
  color: var(--secondary-color);
}
.special-limited-heading p {
  font-family: NoahGF-Bold;
  color: var(--secondary-color);
}
.special-limited-heading p {
  color: #574239;
}
.scale-big {
  margin-top: -22px;
}
.scale-big a.every-moment-inner {
  transform: scaleY(1.1);
}

.special-limited .every-moment-product {
  background-color: #dcdbd9;
  border-radius: var(--radius-32);
  overflow: hidden;
  text-align: center;
  padding: 30px 20px;
}
.special-limited .every-moment-product img {
  width: auto;
  max-height: 280px;
  display: inline-block;
}
.special-limited .every-moment-inner p {
  font-size: var(--font14);
  color: var(--textColor-dark);
}
/* ======================================== snack occation or blog page ======================================== */
.snack-heading {
  margin-bottom: var(--space-xxl);
}
.snack-heading h4,
.snack-heading p {
  color: var(--white);
  font-family: NoahGF-Bold;
}
.blog-filter ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xs);
}

.blog-filter ul li a {
  color: var(--secondary-color);
  text-transform: capitalize;
  font-size: var(--font16);
  line-height: 24px;
  background-color: var(--bgcolor-product);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-24);
  display: block;
}
.blog-filter ul li:hover a,
.blog-filter ul li:visited a,
.blog-filter ul li.active a {
  background-color: var(--primary-color);
  color: var(--white);
  display: block;
}
.card {
  border-radius: var(--radius-32);
  border-color: transparent;
  overflow: hidden;
}
.card-body {
  padding: var(--space-lg);
  background-color: var(--bgcolor-product);
}
.card-title,
.card-title a {
  color: var(--primary-color);
  font-family: NoahGF-Bold;
  font-size: var(--font24);
  margin-bottom: var(--space-xs);
  display: block;
}
.card-text {
  font-size: var(--font16);
  line-height: 24px;
  color: var(--textColor-dark);
  min-height: 72px;
  font-family: NoahGF-Bold;
}
.link-btn-group {
  display: flex;
  align-items: center;
  margin-top: var(--space-sm);
  gap: var(--space-lg);
}
.link-btn {
  color: var(--primary-color);
  font-family: NoahGF-Bold;
  font-size: var(--font16);
  line-height: 24px;
  display: block;
}
.link-btn-group img {
  max-width: 25px;
  transition: all 0.3s;
}
.link-btn-group:hover .link-btn {
  color: var(--primary-color);
  text-decoration: underline;
}
.link-btn-group .link-btn:focus,
.link-btn-group .link-btn:visited {
  color: var(--primary-color);
}
.link-btn-group:hover img {
  transform: scale(1.15);
}
.snack-pair {
  background-color: var(--primary-hover);
  border-radius: var(--radius-32);
  padding-left: var(--space-xxxl);
  padding-right: var(--space-xxxl);
}
.snack-pair-text {
  color: var(--black);
}
.snack-pair-text h3 {
  font-size: 48px;
  line-height: 60px;
  font-family: NoahGF-Bold;
  padding: 0 0 var(--space-lg);
}
.snack-pair-text ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xl);
}
.snack-pair-text ul li {
  width: calc(50% - 30px);
}
.snack-pair-text ul li span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 80px;
  border-radius: var(--radius-50);
  background-color: var(--white);
  box-shadow: 0 16px 16px rgba(0, 0, 0, 0.1);
  margin-bottom: var(--space-sm);
}
.snack-pair-text ul li span img {
  width: auto;
}
.snack-pair-text ul li h6 {
  margin-bottom: var(--space-xs);
}
.snack-pair-text ul li p {
  font-size: var(--font12);
  line-height: 16px;
}
.never-runout {
  background: #ad3f04 url(../images/never-runcutout.svg) no-repeat top right;
  background-size: 98px;
  border-radius: var(--radius-32);
  padding-left: var(--space-xxxl);
  padding-right: var(--space-xxxl);
}
.never-runout-text {
  color: var(--white);
  padding-right: var(--space-big);
}
.never-runout-text h2 {
  font-family: NoahGF-Bold;
}
.never-runout-text p {
  margin: var(--space-md) 0;
  font-family: NoahGF-Bold;
}
.never-runout-text .button-yellow:hover .btn {
  background: var(--primary-color);
}

/* ======================================== snack occation detail page ======================================== */
.blog-detail {
  /* background-image: linear-gradient(var(--primary-color) 25%, #fff 0); */
  background-color: var(--primary-color);
}
.blog-imagesection {
  /* background-color: var(--white); */
  background-image: linear-gradient(var(--primary-color) 12%, #fff 0);
  padding-bottom: var(--space-big);
}
.blog-detail-image img {
  border-radius: var(--radius-32);
}
.blog-detail-heading {
  padding: var(--space-big) 0 var(--space-xxxl);
}
.blog-detail-heading h1 {
  color: var(--white);
  margin-bottom: var(--space-lg);
}
.blog-detail-heading ul,
.blog-detail-heading ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.blog-detail-heading ul li:last-child:after {
  content: "";
  position: absolute;
  left: -12px;
  top: 14px;
  height: 4px;
  width: 4px;
  border-radius: var(--radius-50);
  background-color: var(--white);
}
.blog-detail-heading ul li {
  font-size: var(--font16);
  color: var(--white);
  position: relative;
  gap: 12px;
}
.blog-detail-heading ul li img {
  width: auto;
}
.blog-detail-text a {
  color: var(--black);
  text-transform: uppercase;
  font-size: var(--font20);
  font-family: NoahGF-Bold;
  margin: var(--space-md) 0;
  display: block;
}
.blog-detail-text a:hover,
.blog-detail-text a:visited {
  color: var(--primary-color);
  text-decoration: underline;
}
.blog-detail-text p {
  font-size: var(--bodyFont);
  color: var(--black);
  font-family: NoahGFText-Regular;
  line-height: 34px;
}
.story-text {
  background-color: var(--white);
  /* padding: var(--space-xl); */
  border-radius: var(--radius-32);
  margin-top: var(--space-xl);
}
.story-text-inner {
  padding-right: 125px;
  color: var(--black);
}
.story-text-inner h4 {
  font-family: NoahGF-Bold;
}
.story-text-inner h5 {
  margin-bottom: var(--space-sm);
}
.story-text-inner p {
  font-size: var(--bodyFont);
  margin-bottom: var(--space-md);
}
.share-story {
  border-top: 1px solid #fcdbc9;
  border-bottom: 1px solid #fcdbc9;
  padding: var(--space-md) 0;
}
.share-story h6 {
  font-size: var(--font14);
  font-family: NoahGF-Bold;
}
.share-story,
.share-story ul {
  color: var(--black);
  font-family: NoahGF-Bold;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.share-story ul li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}
.share-story li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-50);
  background-color: #f0eded;
  transition: all 0.3s;
}
.share-story li a img {
  max-height: 16px;
}
.share-story li a:hover,
.share-story li a.active {
  background-color: var(--primary-color);
}
.share-story li a:hover img,
.share-story li a.active img {
  filter: brightness(1) invert(1);
}
.share-icons {
  position: absolute;
  left: 0;
  top: 100%;
  margin: 10px 0 0;
}
.heateor_sssp_sharing_ul {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 5px 10px;
  background: var(--bg-category);
  border-radius: var(--radius-16);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.heateor_sssp_sharing_ul::after {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  left: 10px;
  top: -10px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 12px solid var(--bg-category);
}
aside {
  width: 100%;
  max-width: 414px;
  background-color: #fcdbc9;
  padding: var(--space-xl) var(--space-lg);
  border-radius: var(--radius-32);
}
aside h5 {
  color: var(--secondary-color);
  display: flex;
  align-items: center;
  margin-bottom: var(--space-lg);
}
aside h5 span {
  margin-right: var(--space-sm);
}
aside h5 span img {
  width: auto;
}
aside ul li {
  font-size: var(--font16);
  line-height: 24px;
  color: var(--secondary-color);
  margin-bottom: var(--space-md);
  display: flex;
}
aside ul li span {
  margin-right: var(--space-sm);
  color: #a33e00;
  font-family: NoahGF-Bold;
}
.more-explore-head {
  margin-bottom: var(--space-xxl);
}
.more-explore-head h4,
.more-explore-head p {
  color: var(--white);
  font-family: NoahGF-Bold;
  margin-bottom: var(--space-sm);
}
.hungry-inner {
  background: var(--primary-hover) url(../images/fish-bg.png) no-repeat top left;
  background-size: 100%;
  border-radius: var(--radius-32);
}
.hungry-inner-text {
  padding-left: var(--space-xxxl);
  padding-right: var(--space-xxxl);
}
.hungry-inner-text h2,
.hungry-inner-text p {
  color: var(--black);
  font-family: NoahGF-Bold;
}
.hungry-inner-text p {
  margin: var(--space-lg) 0;
}
.smiling-moment .common-header h4,
.faq-section .common-header h3 {
  font-family: NoahGF-Bold;
}
.faq-section p {
  font-family: NoahGF-Bold;
}
/* ======================================== about page ======================================== */
.about-image {
  border-radius: var(--radius-32);
  margin-bottom: var(--space-xl);
}
.about-inner p,
.legacy-text p {
  font-size: var(--bodyFont);
  font-family: NoahGFText-Regular;
  line-height: 32px;
  color: var(--black);
}
.about-inner p:not(:last-of-type) {
  margin-bottom: var(--space-lg);
}
.about-legacy {
  background-color: #faf3df;
}
.legacy-text h2 {
  color: #ea4c1d;
  margin-bottom: var(--space-md);
}
.legacy-text p:not(:last-of-type) {
  margin-bottom: var(--space-lg);
}

.little-fish-heading {
  margin-bottom: var(--space-md);
}
.little-fish-heading h3 {
  color: var(--white);
  font-family: NoahGF-Black;
}
.little-fish-paratext p {
  color: var(--white);
  font-family: NoahGF-Bold;
  font-size: var(--font24);
  line-height: 28px;
  margin-bottom: var(--space-xs);
}
.little-fish-paratext p:last-child {
  margin-bottom: 0;
}
.about-imagedesktop {
  display: block;
}
.about-imagemobile {
  display: none;
}
/* ======================================== 404 page ======================================== */
.error-404.not-found .page-header {
  color: var(--white);
  text-align: center;
}
.error-404.not-found .widgettitle {
  color: var(--secondary-color);
}
.search-form {
  margin-bottom: var(--space-sm);
}
.error-404.not-found {
  font-size: var(--bodyFont);
  color: var(--secondary-color);
}
.error-404.not-found a {
  color: var(--primary-color);
  font-size: var(--bodyFont);
  text-align: center;
}
.error-404.not-found .page-content {
  min-height: 350px;
  text-align: center;
}