/******** ROOT ********/
:root {
  /* typography */
  --font-body: "Inter", sans-serif;
  --font-heading: "Rufina", sans-serif;
  --font-regular: 400;
  --font-bold: 700;
  --font-body-regular: 400;
  --font-body-bold: 700;
  --font-heading-regular: 400;
  --font-heading-bold: 700;

  /* font size */
  --font-size-mobile: 16px;
  --font-size-tablet: 16px;
  --font-size-desktop: 16px;
  --font-size-desktop-xl: 18px;
  --font-size-h1: 2.67em;
  --font-size-h2: 2.22em;
  --font-size-h3: 2em;
  --font-size-h4: 1.5em;
  --font-size-h5: 1.25em;
  --font-size-h6: 1em;

  /* social media color */
  --color-googleplus: #dd4b39;
  --color-google: #dd4b39;
  --color-pinterest: #cb2027;
  --color-linkedin: #007bb6;
  --color-youtube: #bb0000;
  --color-instagram: #e4405f;
  --color-twitter: #00aced;
  --color-facebook: #3b5998;
  --color-whatsapp: #1bd741;
  --color-whatsapp-hover: #28e44e;
  --color-tiktok: #000000;

  /* basic color */
  --color-blue: #2295f7;
  --color-red: #c90204;
  --color-yellow: #f2c40f;
  --color-orange: #fe8100;
  --color-green: #36b37e;
  --color-gray: #888;
  --color-grey: #888;

  /* brand color */
  --color-primary: #012e6f;
  --color-primary-darker: #203060;
  --color-secondary: #c9cb57;
  --color-secondary-darker: #b7b94e;
  --color-heading: #111111;
  --color-general: #333333;
  --color-general-dark: #111111;
  --color-dark: #111111;
  --color-light: #999;
  --color-gray: #b1b3b5;
  --color-label-new: #0bb5ff;
  --color-label-sale: #b71010;
  --color-label-soldout: #000;
  --color-border: #dcdcdc;
  --color-border-light: #dcdcdc;
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-secondary);
  --color-bg-light: #f3f8ff;

  /* others */
  --radius-default: 6px;

  /* buttons */
  --button-border-radius: var(--radius-default);
  --button-font-family: var(--font-body);
  --button-font-size: 1em;
  --button-font-weight: var(--font-body-bold);
  --button-height-mobile: 44px;
  --button-height-tablet: 44px;
  --button-height-desktop: 48px;
  --button-height-desktop-xl: 48px;
  --button-border-size: 2px;
  --button-padding-mobile: 16px;
  --button-padding-tablet: 16px;
  --button-padding-desktop: 20px;
  --button-padding-desktop-xl: 20px;
  --button-minWidth-mobile: 120px;
  --button-minWidth-tablet: 140px;
  --button-minWidth-desktop: 140px;
  --button-minWidth-desktop-xl: 140px;

  --button-cta-background-color: var(--color-primary);
  --button-cta-text-color: #fff;
  --button-cta-background-color-hover: var(--color-primary-darker);
  --button-cta-text-color-hover: #fff;
  --button-cta2-background-color: var(--color-secondary);
  --button-cta2-text-color: var(--color-primary);
  --button-cta2-background-color-hover: var(--color-secondary-darker);
  --button-cta2-text-color-hover: var(--color-primary);

  /* container */
  --container-max-width: 1400px;
  --container-padding-mobile: 16px;
  --container-padding-tablet: 32px;
  --container-padding-desktop: 40px;
  --container-padding-desktop-xl: 40px;

  /* header */
  --header-height-mobile: 60px;
  --header-height-tablet: 158px;
  --header-height-desktop: 158px;
  --header-height-desktop-xl: 158px;
  --header-bg: #f3f3f4;
  --header-bg-active: #f3f3f4;
  --header-link: var(--color-heading);
  --header-link-hover: var(--color-primary);
  --header-link-active: var(--color-primary);
  --header-arrow: var(--color-primary);
  --header-arrow-hover: var(--color-primary);
  --header-arrow-active: var(--color-primary);
  --header-lang-color: var(--color-heading);
  --header-lang-color-hover: var(--color-primary);
  --header-searchIcon: var(--color-heading);
  --header-searchIcon-hover: var(--color-primary);
  --header-subnav-bg: #fff;
  --header-subnav-bg-hover: var(--color-primary);
  --header-subnav-link: var(--color-heading);
  --header-subnav-link-hover: #fff;
  --header-active-border: var(--color-secondary);

  /* section */
  --section-padding-mobile: 40px;
  --section-padding-tablet: 64px;
  --section-padding-desktop: 80px;
  --section-padding-desktop-xl: 100px;

  /* hamburger menu */
  /* --hamburger-bg: var(--color-heading); */
  --hamburger-bg: #fff;
  /* --hamburger-bg-hover: var(--color-primary-darker);
  --hamburger-bg-active: var(--color-primary); C79626*/
  --hamburger-bg-hover: #fff;
  --hamburger-bg-active: #fff;

  /* caret style in header */
  --caret-style: "\f107";
  --caret-style-right: "\f105";
  --caret-style-left: "\f104";
  --caret-style-opened: "\f106";
  --caret-weight: 900;

  /* mobile menu */
  --mobileMenu-bg: #fff;
  --mobileMenu-link: var(--color-heading);
  --mobileMenu-link-hover: var(--color-primary);
  --mobileMenu-link-active: var(--color-secondary);
  --mobileMenu-icon: var(--color-primary);
  --mobileMenu-icon-hover: var(--color-primary);
  --mobileMenu-icon-active: var(--color-primary);
  --mobileMenu-border: #d7d7d7;

  /* FOOTER */
  --footer-bg: var(--color-primary);
  --footer-heading: #fff;
  --footer-text: #a8c2e7;
  --footer-link: #a8c2e7;
  --footer-link-hover: #fff;
  --footer-icon: var(--color-secondary);
  --footer-border: #245cac;
  --footer-padding-mobile: 24px;
  --footer-padding-tablet: 40px;
  --footer-padding-desktop: 48px;
  --footer-padding-desktop-xl: 48px;
  --footer-font-size-mobile: 14px;
  --footer-font-size-tablet: 14px;
  --footer-font-size-desktop: 14px;
  --footer-font-size-desktop-xl: 14px;

  /* social icons */
  --social-bg: transparent;
  --social-color: var(--color-secondary);
  --social-bg-hover: transparent;
  --social-color-hover: #fff;

  /* newsletter */
  --newsletter-bg: #fff;
  --newsletter-bg-hover: #fff;
  --newsletter-bg-focus: #fff;
  --newsletter-borderColor: transparent;
  --newsletter-borderColor-hover: transparent;
  --newsletter-borderColor-focus: transparent;
  --newsletter-text: var(--color-general);
  --newsletter-text-hover: var(--color-general);
  --newsletter-text-focus: var(--color-general);
  --newsletter-btn-bg: var(--color-primary);
  --newsletter-btn-bg-hover: var(--color-primary-darker);
  --newsletter-btn-text: #fff;
  --newsletter-btn-text-hover: #fff;
  --newsletter-btn-border-color: transparent;
  --newsletter-btn-border-color-hover: transparent;

  /* FORMS */
  --form-border-radius: var(--radius-default);
  --form-height-mobile: var(--button-height-mobile);
  --form-height-tablet: var(--button-height-tablet);
  --form-height-desktop: var(--button-height-desktop);
  --form-height-desktop-xl: var(--button-height-desktop-xl);
  --form-padding-mobile: var(--button-padding-mobile);
  --form-padding-tablet: var(--button-padding-tablet);
  --form-padding-desktop: var(--button-padding-desktop);
  --form-padding-desktop-xl: var(--button-padding-desktop-xl);
  --form-label-color: var(--color-heading);
  --form-label-font-family: var(--font-heading);
  --form-label-font-weight: var(--font-heading-bold);
  --form-border-color: var(--color-border);
  --form-border-color-hover: var(--color-primary);
  --form-border-size: var(--button-border-size);
  --form-lineheight-mobile: 20px;
  --form-lineheight-tablet: 20px;
  --form-lineheight-desktop: 24px;
  --form-lineheight-desktop-xl: 24px;
  --form-icon-color: var(--color-primary);
  --form-icon-width-mobile: 44px;
  --form-icon-width-tablet: 44px;
  --form-icon-width-desktop: 48px;
  --form-icon-width-desktop-xl: 48px;

  /* ACCORDION */
  --accordion-color-title: var(--color-dark);
  --accordion-color-title-hover: var(--color-primary);
  --accordion-color-title-active: var(--color-primary);
  --accordion-color-caret: var(--color-primary);
  --accordion-color-caret-hover: var(--color-primary);
  --accordion-color-caret-active: var(--color-primary);
  --accordion-caret-style: "\f067";
  --accordion-caret-style-opened: "\f068";

  /* PAGINATION */
  --pagination-border-size: 2px;
  --pagination-border-color: transparent;
  --pagination-border-radius: 0;
  --pagination-color: var(--color-general);
  --pagination-background-color: transparent;
  --pagination-height: 48px;
  --pagination-caret-first: "\f104";
  --pagination-caret-last: "\f105";
  --pagination-caret-weight: 900;
  --pagination-hover-color: var(--color-general);
  --pagination-hover-background-color: #f8f9f9;
  --pagination-hover-border-color: #f8f9f9;
  --pagination-active-color: #fff;
  --pagination-active-background-color: var(--color-secondary);
  --pagination-active-border-color: var(--color-secondary);
  --pagination-font-size-mobile: 24px;
  --pagination-font-size-tablet: 18px;
  --pagination-font-size-desktop: 18px;
  --pagination-font-size-desktop-xl: 18px;
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
summary,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
  margin: 0;
  padding: 0;
  border: 0;
  /* font: inherit; */
  vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
  padding-top: var(--header-height-mobile);
}
blockquote,
q {
  quotes: none;
}
blockquote:after,
blockquote:before,
q:after,
q:before {
  content: "";
  content: none;
}
:focus {
  outline: 0;
}
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
*,
:after,
:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
input[type="button"],
input[type="date"],
input[type="datetime-local"],
input[type="datetime"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="submit"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
textarea {
  -webkit-appearance: initial;
  border-radius: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}
h1.ngc-maintitle,
h2.ngc-maintitle {
  margin-top: 0;
}
@media (min-width: 768px) {
  body {
    padding-top: var(--header-height-tablet);
  }
  .top-header {
    display: block !important;
  }
}
@media (min-width: 1200px) {
  body {
    padding-top: var(--header-height-desktop);
  }
}
@media (min-width: 1600px) {
  body {
    padding-top: var(--header-height-desktop-xl);
  }
}
.top-header {
  height: 36px;
  background-color: var(--color-primary);
  color: #fff;
  font-size: 13px;
}
.top-header p {
  margin: 0;
  padding: 0 10px;
  border-right: 1px solid #fff;
  /* border-right: 0; */
  line-height: 1.3em;
}
.top-header p + p {
  border-right: none;
  border-left: 1px solid #fff;
}
.top-header a {
  color: var(--color-secondary);
  font-weight: var(--font-body-bold);
}
.top-header a:hover {
  text-decoration: underline;
}
.top-header .main-container {
  height: 100% !important;
  justify-content: center !important;
}
#web-header {
  height: var(--header-height-mobile);
  width: 100%;
  /* background-color: #fff; */
  background-color: rgba(35, 66, 126, 1);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  transition: box-shadow 0.3s, transform 0.3s;
  border-bottom: 5px solid #c79626;
}
#web-header .main-container {
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
#web-header .header-right {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
}
#web-header .header-right .child + .child {
  margin-left: 12px;
}
#web-header .main-navigation-container {
  display: none;
  flex: 1;
}
@media (min-width: 768px) {
  #web-header {
    height: var(--header-height-tablet);
  }
  #web-header .main-container {
    height: 122px;
  }
  #web-header .header-left {
    margin-right: 20px;
  }
  #web-header .header-right .child + .child {
    margin-left: 40px;
  }
  #web-header.stuck {
    transform: translateY(-36px);
  }
}
@media (min-width: 1200px) {
  .top-header {
    font-size: 14px;
  }
  .top-header p {
    padding: 0 12px;
  }
  #web-header {
    height: var(--header-height-desktop);
  }
  #web-header .header-right .child + .child {
    margin-left: 32px;
  }
  #web-header .main-navigation-container {
    display: block;
  }
}
@media (min-width: 1600px) {
  #web-header {
    height: var(--header-height-desktop-xl);
  }
}
.logo {
  display: block;
}
.logo img,
.logo picture {
  display: block;
  height: 50px;
  width: inherit;
}
@media (min-width: 768px) {
  .logo img,
  .logo picture {
    height: 85px;
    padding-left: 3rem;
  }
}
@media (min-width: 1400px) {
  .lang-select-container,
  .search-toggle-container {
    display: block !important;
  }
}
.search-toggle {
  /* color: var(--header-searchIcon); */
  color: #fff;
}
.search-toggle:hover {
  /* color: var(--header-searchIcon-hover); */
  color: #c79626;
}
.lang-select {
  display: block;
  position: relative;
  padding-right: 14px;
  color: var(--header-lang-color);
}
.lang-select:before {
  content: var(--caret-style);
  display: block;
  font-family: "Font Awesome 5 Free";
  font-size: 14px;
  top: 50%;
  position: absolute;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0;
  font-weight: var(--caret-weight);
  color: var(--header-arrow);
}
.lang-select .text,
.mobile-nav ul li.active > a {
  font-weight: var(--font-body-bold);
}
.lang-select .content .icon {
  display: block;
  width: 26px;
}
.lang-select:hover {
  color: var(--header-lang-color-hover);
}
.lang-select:hover:before {
  color: var(--header-arrow-hover);
}
@media (min-width: 1200px) {
  .lang-select,
  .lang-select:before {
    font-size: 16px;
  }
  .lang-select {
    padding-right: 18px;
  }
}
.hamburger span.outer-span {
  display: block;
  width: 30px;
  height: 30px;
  text-indent: -9999em;
}
.hamburger.fixed {
  position: fixed;
  top: 13px;
}
.hamburger.absolute {
  top: 50%;
  position: absolute;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.hamburger.right {
  right: -5px;
}
.hamburger.left {
  left: 12px;
}
@media (min-width: 768px) {
  .hamburger.fixed {
    top: 28px;
  }
  .hamburger.left {
    left: 24px;
  }
  .hamburger span.outer-span {
    width: 40px;
    height: 40px;
  }
}

@media (min-width: 1400px) {
  .hamburger-container {
    display: none;
  }
}
.hamburger {
  z-index: 102;
  padding: 0;
  cursor: pointer;
  display: inline-block;
  display: block;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
}
.hamburger:hover {
  opacity: 0.7;
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::after,
.hamburger.is-active .hamburger-inner::before {
  background-color: var(--hamburger-bg-active);
}
.hamburger-box {
  width: 24px;
  height: 24px;
  display: block;
  position: relative;
}
@media (min-width: 768px) {
  .hamburger-box {
    width: 32px;
  }
}
.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -1px;
}
.hamburger-inner,
.hamburger-inner::after,
.hamburger-inner::before {
  width: 24px;
  height: 2px;
  background-color: var(--hamburger-bg);
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
  cursor: pointer;
}
.hamburger-inner::after,
.hamburger-inner::before {
  content: "";
  display: block;
}
.hamburger-inner::before {
  top: -8px;
}
.hamburger-inner::after {
  bottom: -8px;
}
@media (min-width: 768px) {
  .hamburger-inner,
  .hamburger-inner::after,
  .hamburger-inner::before {
    width: 32px;
    height: 3px;
  }
  .hamburger-inner::before {
    top: -10px;
  }
  .hamburger-inner::after {
    bottom: -10px;
  }
  #web-header.stuck + #mobile-menu-container {
    padding-top: 80px;
  }
}
.hamburger--spin .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spin .hamburger-inner::before {
  transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}
.hamburger--spin .hamburger-inner::after {
  transition: bottom 0.1s 0.25s ease-in,
    transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spin.is-active .hamburger-inner {
  transform: rotate(225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--spin.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
  transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}
.hamburger--spin.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
  transition: bottom 0.1s ease-out,
    transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#mobile-menu-container {
  position: fixed;
  z-index: 99;
  width: 100%;
  left: 0;
  top: 0;
  height: 100%;
  overflow-y: auto;
  padding-top: var(--header-height-mobile);
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, padding 0.3s;
}
#main-navigation > ul > li.has-sub:hover > .sub-nav,
#mobile-menu-container.opened,
.floating-box-container.opened {
  visibility: visible;
  opacity: 1;
}
#mobile-menu-container .mobile-menu-content {
  position: relative;
  background-color: var(--mobileMenu-bg);
  padding: 16px;
  z-index: 2;
  width: 100%;
  max-width: 400px;
}
#mobile-menu-container .close-mobile-nav {
  display: block;
  overflow: hidden;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  text-indent: -9999em;
}
@media (min-width: 768px) {
  #mobile-menu-container {
    padding-top: var(--header-height-tablet);
  }
  #mobile-menu-container .mobile-menu-content {
    padding-left: 32px;
    padding-right: 32px;
    max-width: 480px;
  }
}
@media (min-width: 1400px) {
  #mobile-menu-container {
    display: none;
  }
  #mobile-menu-container.opened {
    opacity: 0;
    visibility: hidden;
  }
}
.mobile-nav {
  position: relative;
  z-index: 2;
}
.mobile-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 1.1rem;
}
.mobile-nav ul a {
  color: var(--mobileMenu-link);
  display: block;
  border-radius: 5px;
}
.mobile-nav ul a:hover {
  color: var(--mobileMenu-link-hover);
  background-color: #efefef;
}
.mobile-nav ul li.active > a {
  color: var(--mobileMenu-link-active);
  background-color: var(--color-primary);
}
.mobile-nav ul li.has-sub > a {
  padding-right: 40px;
  position: relative;
}
.mobile-nav ul li.has-sub > a:before {
  content: var(--caret-style);
  display: block;
  font-family: "Font Awesome 5 Free";
  font-weight: var(--caret-weight);
  top: 50%;
  position: absolute;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0;
  width: 40px;
  text-align: center;
  color: var(--mobileMenu-icon);
}
.mobile-nav ul li.has-sub > a:hover:before {
  color: var(--mobileMenu-icon-hover);
}
.mobile-nav ul li.has-sub > a.opened {
  color: var(--color-primary);
  font-weight: var(--font-body-bold);
}
.mobile-nav ul li.has-sub > a.opened:before {
  content: var(--caret-style-opened);
  color: var(--mobileMenu-icon-active);
}
.mobile-nav > ul > li {
  margin: 4px 0;
}
.mobile-nav > ul > li > a {
  padding: 4px 12px;
}
.mobile-nav > ul > li > .sub-nav {
  margin-bottom: 8px;
}
.mobile-nav .sub-nav {
  padding: 8px 0 8px 16px;
  display: none;
}
.mobile-nav .sub-nav ul {
  font-size: 1rem;
}
.mobile-nav .sub-nav ul a {
  padding: 2px 0;
  color: var(--mobileMenu-link);
}
.mobile-nav .sub-nav ul a:hover {
  color: var(--mobileMenu-link-hover);
  background-color: transparent;
}
.mobile-nav > ul > li.has-sub > .sub-nav > ul {
  position: relative;
  padding-left: 16px;
}
.mobile-nav > ul > li.has-sub > .sub-nav > ul:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #eaeaea;
  width: 3px;
  height: 100%;
}
@media (min-width: 768px) {
  .mobile-nav > ul > li > a {
    padding: 8px 20px;
  }
  .mobile-nav .sub-nav {
    padding: 12px 0 12px 24px;
  }
  .mobile-nav .sub-nav ul a {
    padding: 4px 0;
  }
  .mobile-nav > ul > li.has-sub > .sub-nav > ul {
    padding-left: 24px;
  }
  .mobile-nav > ul > li.has-sub > .sub-nav > ul:before {
    width: 4px;
  }
}
.floating-box-container {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
}
.floating-box-container.animated {
  transition: all 350ms ease;
  -webkit-transition: all 350ms ease;
  -moz-transition: all 350ms ease;
  -o-transition: all 350ms ease;
}
.floating-box-container .close-lang,
.floating-box-container .close-search {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  text-indent: -9999em;
}
.floating-box-container .content {
  left: 50%;
  position: absolute;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 480px;
  z-index: 2;
  transition: all 350ms ease;
  -webkit-transition: all 350ms ease;
  -moz-transition: all 350ms ease;
  -o-transition: all 350ms ease;
}
.floating-box-container .box-area {
  background-color: #fff;
  padding: 30px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  transition: all 350ms ease;
  -webkit-transition: all 350ms ease;
  -moz-transition: all 350ms ease;
  -o-transition: all 350ms ease;
  transform: translateY(100%);
}
.floating-box-container .box-area .ngc-maintitle {
  text-align: center;
  font-size: 1.3em;
  color: var(--color-heading);
}
.floating-box-container .search-form {
  position: relative;
}
.floating-box-container .search-form .input-text {
  background-color: #efefef;
  border: none;
  width: 100%;
  height: var(--button-height-mobile);
  color: var(--color-general);
  padding-left: 15px;
  padding-right: 40px;
  position: relative;
  z-index: 1;
  border-radius: var(--radius-default);
}
.floating-box-container .search-form .input-text::-webkit-input-placeholder {
  color: var(--color-general);
}
.floating-box-container .search-form .input-text::-moz-placeholder {
  color: var(--color-general);
}
.floating-box-container .search-form .input-text:-ms-input-placeholder {
  color: var(--color-general);
}
.floating-box-container .search-form .input-text:-moz-placeholder {
  color: var(--color-general);
}
.floating-box-container .search-form .submit-btn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 40px;
  height: var(--button-height-mobile);
  display: block;
  border: none;
  background: 0 0;
  cursor: pointer;
}
.floating-box-container .search-form .submit-btn .icon {
  left: 50%;
  top: 50%;
  position: absolute;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  font-size: 18px;
  color: var(--header-searchIcon);
}
.floating-box-container .search-form .submit-btn:hover .icon {
  color: var(--header-searchIcon-hover);
}
.floating-box-container .search-form span.error {
  color: var(--color-red);
  display: inline-block;
  padding-top: 8px;
  font-style: italic;
  font-size: 14px;
}
.floating-box-container .language-list {
  margin-left: auto;
  margin-right: auto;
}
.floating-box-container .language-list .child {
  margin-top: 5px;
}
.floating-box-container .language-list .child a {
  display: block;
  background-color: #fff;
  color: var(--color-general);
  border-radius: 5px;
  transition: all 350ms ease;
  -webkit-transition: all 350ms ease;
  -moz-transition: all 350ms ease;
  -o-transition: all 350ms ease;
  padding: 12px;
}
.floating-box-container .language-list .child a:hover {
  background-color: #efefef;
  color: var(--color-primary);
}
.floating-box-container .language-list .child a.selected {
  background-color: var(--color-primary);
  color: #fff;
}
.floating-box-container .language-list .child a > span {
  max-width: 200px;
  display: block;
  margin: 0 auto;
}
.floating-box-container .language-list .child a > span > span {
  display: inline-block;
  vertical-align: middle;
  line-height: 18px;
}
.floating-box-container .language-list .child .icon-wrapper {
  padding-right: 5px;
}
.floating-box-container .language-list .child .icon-wrapper img {
  display: block;
  height: 18px;
}
.floating-box-container .language-list .child .text-wrapper {
  font-size: 14px;
  font-weight: 700;
}
.floating-box-container .language-list .child .text-wrapper .icon {
  color: var(--color-secondary);
}
.floating-box-container.opened .content .box-area {
  transform: translateY(0);
}
@media (min-width: 768px) {
  .floating-box-container .content {
    bottom: auto;
    left: 50%;
    top: 50%;
    position: absolute;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }
  .floating-box-container .box-area {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }
  .floating-box-container .search-form .input-text,
  .floating-box-container .search-form .submit-btn {
    height: var(--button-height-tablet);
  }
  .floating-box-container .language-list .child a {
    padding-left: 16px;
    padding-right: 16px;
  }
  .floating-box-container .language-list .child a > span {
    max-width: 230px;
  }
  .floating-box-container .language-list .child .text-wrapper {
    font-size: 15px;
  }
}
@media (min-width: 1200px) {
  .floating-box-container .search-form .input-text,
  .floating-box-container .search-form .submit-btn {
    height: var(--button-height-desktop);
  }
}
@media (min-width: 1600px) {
  .floating-box-container .search-form .input-text,
  .floating-box-container .search-form .submit-btn {
    height: var(--button-height-desktop-xl);
  }
}
.floating-whatsapp {
  position: fixed;
  z-index: 40;
  right: 16px;
  bottom: 80px;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: block;
  background-color: var(--color-whatsapp);
  color: #fff;
  transition: all 350ms ease;
  -webkit-transition: all 350ms ease;
  -moz-transition: all 350ms ease;
  -o-transition: all 350ms ease;
}
.floating-whatsapp .icon {
  font-size: 24px;
  left: 50%;
  top: 50%;
  position: absolute;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.floating-whatsapp:hover {
  background-color: var(--color-whatsapp);
  color: #fff;
  opacity: 0.9;
}
@media (min-width: 768px) {
  .floating-whatsapp {
    width: 64px;
    height: 64px;
  }
  .floating-whatsapp .icon {
    font-size: 32px;
  }
}
@media (min-width: 1600px) {
  .floating-whatsapp {
    right: 40px;
    width: 80px;
    height: 80px;
  }
  .floating-whatsapp .icon {
    font-size: 40px;
  }
}
#main-navigation.animated .sub-nav {
  transition: all 0.6s ease;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
}
#main-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#main-navigation > ul {
  font-size: 0;
  text-align: right;
}
#main-navigation > ul > li {
  font-size: 1rem;
  line-height: 1em;
  display: inline-block;
  position: relative;
  padding: 8px 16px;
}
#main-navigation > ul > li > a {
  color: #fff;
  /* color: var(--header-link); */
  font-weight: var(--font-body-bold);
}
#main-navigation > ul > li > a:hover {
  /* color: var(--header-link-hover); */
  color: #c79626;
}
#main-navigation > ul > li > a.active {
  color: var(--header-link-active);
}
#main-navigation > ul > li:before {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background-color: var(--header-active-border);
  left: 50%;
  position: absolute;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: 0;
  transition: width 0.3s;
}
#main-navigation .sub-nav ul li.has-sub > a .text:before,
#main-navigation > ul > li.has-sub > a .text:before {
  font-family: "Font Awesome 5 Free";
  transform: translateY(-50%);
  font-weight: var(--caret-weight);
  right: 0;
  display: block;
}
#main-navigation > ul > li.active:before,
#main-navigation > ul > li:hover:before {
  width: 24px;
}
#main-navigation > ul > li.has-sub > a .text {
  display: block;
  position: relative;
  padding-right: 16px;
}
#main-navigation > ul > li.has-sub > a .text:before {
  content: var(--caret-style);
  position: absolute;
  top: 50%;
  /* color: var(--header-arrow); */
  color: #fff;
  font-size: 1rem;
}
#main-navigation > ul > li.has-sub:hover > a {
  /* color: var(--header-link-hover); */
  color: #c79626;
}
#main-navigation > ul > li.has-sub:hover > a .text:before {
  /* color: var(--header-arrow-hover); */
  color: #c79626;
}
#main-navigation > ul > li.has-sub:hover > .sub-nav {
  top: 100%;
}
#main-navigation > ul > li.direction-left .sub-nav {
  left: auto;
  right: 0;
}
#main-navigation > ul > li.direction-left .sub-nav ul li a .text {
  display: block;
  padding-right: 16px;
  padding-left: 16px;
}
#main-navigation
  > ul
  > li.direction-left
  .sub-nav
  ul
  li.has-sub
  > a
  .text:before {
  content: var(--caret-style-left);
  right: auto;
  left: 0;
}
#main-navigation
  > ul
  > li.direction-left
  .sub-nav
  ul
  li.has-sub:hover
  > .sub-nav {
  left: auto;
  right: 100%;
}
#main-navigation > ul > li.direction-left .sub-nav .sub-nav {
  right: 120%;
}
#main-navigation .sub-nav {
  position: absolute;
  z-index: 50;
  left: 0;
  top: 150%;
  padding-top: 16px;
  text-align: left;
  opacity: 0;
  visibility: hidden;
}
#main-navigation .sub-nav.over-10 > ul {
  overflow-y: auto;
  max-height: 480px;
}
#main-navigation .sub-nav ul {
  background-color: var(--header-subnav-bg);
  width: 200px;
  min-width: 160px;
  max-width: 240px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: 10px;
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.1);
  font-size: 0.875rem;
}
#main-navigation .sub-nav ul li {
  line-height: 1.5em;
}
#main-navigation .sub-nav ul li a {
  display: block;
  color: var(--header-subnav-link);
  background-color: var(--header-subnav-bg);
  transition: color 0.3s, background-color 0.3s;
  padding: 8px 16px;
}
#main-navigation .sub-nav ul li a:hover {
  background-color: var(--header-subnav-bg-hover);
  color: var(--header-subnav-link-hover);
}
#main-navigation .sub-nav ul li.has-sub {
  position: relative;
}
#main-navigation .sub-nav ul li.has-sub > a .text {
  display: block;
  position: relative;
  padding-right: 16px;
}
#main-navigation .sub-nav ul li.has-sub > a .text:before {
  content: var(--caret-style-right);
  position: absolute;
  top: 50%;
  color: var(--header-arrow);
  font-size: 1rem;
}
#main-navigation .sub-nav ul li.has-sub:hover > a {
  color: #fff;
  background-color: var(--header-subnav-bg-hover);
}
#main-navigation .sub-nav ul li.has-sub:hover > a .text:before {
  color: #fff;
}
#main-navigation .sub-nav ul li.has-sub:hover > .sub-nav {
  left: 100%;
  opacity: 1;
  visibility: visible;
}
#main-navigation .sub-nav .sub-nav {
  top: -24px;
  left: 120%;
}
.btn.btn-cta-header {
  font-size: 14px;
  padding-left: 12px;
  padding-right: 12px;
  margin: 0;
  line-height: 36px;
}
.mobile-contact-info {
  border-radius: 5px;
  padding: 12px;
  background-color: var(--color-bg-light);
  font-weight: var(--font-body-bold);
  font-size: 14px;
  margin-top: 20px;
}
.mobile-contact-info p {
  margin: 0;
}
.mobile-contact-info p + p {
  margin-top: 12px;
}
@media (min-width: 768px) {
  .mobile-contact-info {
    margin-top: 24px;
    padding: 16px 20px;
  }
}
.mobile-search-form {
  position: relative;
  padding-bottom: 12px;
}
.mobile-search-form .input-text {
  background-color: #efefef;
  border: none;
  width: 100%;
  height: var(--button-height-mobile);
  color: var(--color-general);
  padding-left: 15px;
  padding-right: 40px;
  position: relative;
  z-index: 1;
  border-radius: var(--radius-default);
}
.mobile-search-form .input-text::-webkit-input-placeholder {
  color: var(--color-general);
}
.mobile-search-form .input-text::-moz-placeholder {
  color: var(--color-general);
}
.mobile-search-form .input-text:-ms-input-placeholder {
  color: var(--color-general);
}
.mobile-search-form .input-text:-moz-placeholder {
  color: var(--color-general);
}
.mobile-search-form .submit-btn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 40px;
  height: var(--button-height-mobile);
  display: block;
  border: none;
  background: 0 0;
  cursor: pointer;
}
.mobile-search-form .submit-btn .icon {
  left: 50%;
  top: 50%;
  position: absolute;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  font-size: 18px;
  color: var(--header-searchIcon);
}
.mobile-search-form .submit-btn:hover .icon {
  color: var(--header-searchIcon-hover);
}
.mobile-search-form span.error {
  color: var(--color-red);
  display: inline-block;
  padding-top: 8px;
  font-style: italic;
  font-size: 14px;
}
@media (min-width: 768px) {
  .mobile-search-form .input-text,
  .mobile-search-form .submit-btn {
    height: var(--button-height-desktop);
  }
}
.mobile-change-language {
  padding-top: 24px;
  padding-bottom: 12px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
}
.mobile-change-language label {
  color: var(--color-heading);
  padding-right: 12px;
}

.nav-arrows a {
  position: absolute;
  top: 60%;
  left: 30px;
  cursor: pointer;
  font-size: 60px;
  color: #fff;
  margin-top: -21px;
  opacity: 0.9;
  border-radius: 50%;
}

.nav-arrows a {
  top: 40%;
  z-index: 4;
}

@media (min-width: 992px) {
  .nav-arrows a {
    top: 50%;
  }
}

.nav-arrows .next {
  font-size: 40px;
}

@media (min-width: 992px) {
  .nav-arrows .next {
    font-size: 60px;
  }
}

.nav-arrows a:first-child {
  left: auto;
  right: 30px;
}

.nav-arrows .pausehome,
.nav-arrows .play {
  font-size: 28px;
  border: 0px;
  left: 50%;
}
.nav-arrows .pausehome,
.nav-arrows .play {
  padding: 10px 0;
}
@media (min-width: 992px) {
  .nav-arrows .pausehome,
  .nav-arrows .play {
    padding: 18px 0;
  }
}

.nav-arrows .prev {
  font-size: 40px;
}
@media (min-width: 992px) {
  .nav-arrows .prev {
    font-size: 60px;
  }
}

#large-features {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  width: 100%;
}

@media (min-width: 768px) {
  #features {
    margin-top: -122px;
  }

  #web-header {
    background-color: rgba(35, 66, 126, 0.5);
  }
}

.sb-slider {
  width: 100%;
  margin: 0;
  position: relative;
  z-index: 3;
}

#large-features > ul li {
  position: relative;
  float: left;
  display: none;
  width: 100%;
  margin: auto;
  overflow: hidden;
}

.sb-slider li > a img {
  width: 100%;
  height: auto;
  margin: 0;
  object-fit: cover;
}

@media (min-width: 768px) {
  .sb-slider li > a img {
    /* height: calc(100vh - 36px); */
    height: auto;
  }
}

.text-center {
  text-align: center;
}

.nav-pills {
  list-style: none;
  text-align: center;
}
.nav-pills .nav-item {
  display: inline-block;
}
.nav-pills .nav-link {
  border-radius: 0;
  padding: 1.25rem 4rem;
  font-size: 1rem;
  border: 1px solid #c79626;
  color: #c79626;
  background-color: #f1f2f3;
  transition-duration: 0.4s;
}
.nav-pills .nav-link:hover {
  cursor: pointer;
}
.nav-pills .nav-link:hover,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: #c79626;
}
.tab-content > .tab-pane {
  display: none;
}
.tab-content > .active {
  display: block;
}

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

.col {
  flex: 1 0 0%;
}
.col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}
.col-6 {
  flex: 0 0 auto;
  width: 50%;
}
@media (min-width: 992px) {
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
}
.g-4,
.gx-4 {
  --bs-gutter-x: 1.5rem;
}
.g-4,
.gy-4 {
  --bs-gutter-y: 1.5rem;
}

.container-fluid {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}

.card-custom {
  padding: 1rem;
  background-image: linear-gradient(180deg, #eeeeee 0%, #f7f7f7 100%);
}

.section.pemesanan {
  position: relative;
  padding: 3rem !important;
}

.section.pemesanan::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("a4.webp");
}

.section.footer {
  border-top: 10px solid #c79626;
  padding-top: 3rem !important;
  padding-bottom: 0 !important;
  background-color: #23427e;
  color: #fff;
}

.cormorant-infant {
  font-family: "Cormorant Infant", serif;
}

@media (max-width: 992px) {
  .table thead th,
  .table tbody td {
    font-size: 0.7em;
  }

  .nav-pills .nav-link {
    padding: 1.25rem 1.5rem;
  }
}