/* Header */
header[data-elementor-type="header"] {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
}

.joc-header {
  height: var(--header-bar);
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0) 80%
  );
}

header[data-elementor-type="header"].dark .joc-header,
header[data-elementor-type="header"].gsap-dark .joc-header {
  background: linear-gradient(
    180deg,
    rgb(255 255 255 / 80%) 0%,
    rgba(255, 255, 255, 0) 80%
  );
}

.site-logo-wrap .elementor-icon-wrapper {
  display: flex;
  align-items: center;
}

header[data-elementor-type="header"].gsap-dark .joc-header .site-logo path,
header[data-elementor-type="header"].dark .joc-header .site-logo path {
  fill: black;
  transition: all ease-out 0.3s;
}

.joc-header .nav-menu {
  background: linear-gradient(
    95deg,
    rgba(12, 12, 12, 0.8) 45%,
    rgba(12, 12, 12, 0.6) 55%
  );
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
/*   backdrop-filter: blur(2.5px); */
}

/* Header Desktop Menu */
#menu-desktop-main-menu {
  gap: 0px;
}

#menu-desktop-main-menu .menu-item a {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 20px;
  color: white;
}

#menu-desktop-main-menu .menu-item a,
.lan-switch p {
  color: white;
  font-size: 0.888rem;
  font-family: var(--font-stack-heading);
  font-weight: 700;
  cursor: pointer;
  transition: all ease-out 0.4s;
}

#menu-desktop-main-menu .pc-has-sub-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
}

#menu-desktop-main-menu .pc-has-sub-menu a:before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 1px;
}

#menu-desktop-main-menu .menu-item a:hover,
.lan-switch:hover p {
  color: var(--e-global-color-secondary);
}
#menu-desktop-main-menu .menu-item.pc-has-sub-menu a:hover::before {
  background: var(--e-global-color-secondary);
}

@media screen and (max-width: 1365px) {
  #menu-desktop-main-menu .menu-item a {
    padding: 10px;
  }

  #menu-desktop-main-menu .pc-has-sub-menu a {
    gap: 8px;
  }
}

/* Header Mobile Menu */
.joc-mb-menu .hamburger.hamburger--beauty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
}

.joc-mb-menu .hamburger.hamburger--beauty .line {
  stroke: white;
}

.joc-mb-menu .hamburger.hamburger--beauty svg {
  width: 36px;
  height: 36px;
}

@media screen and (max-width: 767px) {
  .joc-mb-menu .hamburger.hamburger--beauty {
    height: 48px !important;
  }

  .joc-mb-menu .hamburger.hamburger--beauty svg {
    width: 30px;
    height: 30px;
  }
}

/* Language Button */
.lan-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  cursor: pointer;
  transition: all ease-out 0.4s;
}

.lan-switch .elementor-icon-wrapper {
  display: flex;
}

.lan-switch:hover path,
.search-icon:hover path {
  fill: var(--e-global-color-secondary);
}

/* Search Button */
.search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 60px;
  cursor: pointer;
  transition: all ease-out 0.4s;
}

.search-icon .elementor-widget-container,
.search-icon .elementor-icon-wrapper {
  display: flex;
  align-items: center;
}

@media screen and (max-width: 767px) {
  .lan-switch,
  .search-icon {
    height: 48px;
  }
}

/* Mobile menu */
@media screen and (max-width: 1024px) {
  #menu-improved__overlay #menu-improved__content {
    width: 100%;
    max-width: 100%;
    height: 100%;
    padding: 0px;
  }

  #menu-improved__content .menu-mobile-menu-container {
    height: 100%;
    padding: 80px 40px;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: none;
  }

  #menu-improved__overlay #menu-improved__content,
  #menu-improved__content.menu-improved__multistep
    ul.menu-improved-nav
    .sub-menu {
    color: #fff;
    background: #0c0c0c;
  }
	
  #menu-improved__content.menu-improved__multistep
    ul.menu-improved-nav
    .sub-menu {
    padding-top: 80px!important;
  }

  #menu-improved__content #menu-mobile-menu li.menu-item:not(.contact) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  }
  #menu-improved__content #menu-mobile-menu li.menu-item-has-children {
    z-index: inherit;
  }

  #menu-improved__content #menu-mobile-menu li.menu-item a {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0;
    height: 80px;
    line-height: 80px;
    font-family: var(--font-stack-heading);
    font-weight: 700;
    cursor: pointer;
  }

  #menu-improved__content #menu-mobile-menu .sub-menu li.menu-item a {
    font-weight: 400;
  }

  #menu-improved__content
    #menu-mobile-menu
    li.menu-item-has-children
    .toggle-submenu {
    padding-right: 0px;
  }

  #menu-mobile-menu .toggle-submenu .toggle-submenu__inner {
    width: 30px !important;
    height: 30px !important;
  }

  #menu-mobile-menu .toggle-submenu svg path {
    stroke: #fff;
  }

  /* Menu Contact */
  #menu-improved__content #menu-mobile-menu li.contact {
    display: flex;
    margin-top: 30px;
    background: var(--e-global-color-primary);
    border-radius: 8px;
    border-bottom: none !important;
    overflow: hidden;
  }

  #menu-improved__content #menu-mobile-menu li.contact a {
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 60px;
    padding: 12px 20px;
    color: #fff;
  }

  #menu-improved__content #menu-mobile-menu li.contact a:after {
    content: "";
    display: block;
    width: 36px;
    height: 36px;
    background-image: url(/wp-content/uploads/2025/12/icon-arrow-white.svg);
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
  }

  /* Go Back Button */
  #menu-improved__content
    #menu-mobile-menu
    li.menu-item-has-children
    .sub-menu
    .close-submenu {
    display: flex;
    align-items: center;
    gap: 12px;
    left: 0px;
    height: 80px;
  }

  #menu-improved__content
    #menu-mobile-menu
    li.menu-item-has-children
    .sub-menu
    .close-submenu
    svg {
    padding: 2px;
  }

  #menu-improved__content
    #menu-mobile-menu
    li.menu-item-has-children
    .sub-menu
    .close-submenu
    svg
    path {
    stroke: var(--e-global-color-secondary);
  }

  #menu-improved__content
    #menu-mobile-menu
    li.menu-item-has-children
    .sub-menu
    .close-submenu
    span {
    font-family: var(--font-stack-heading);
    font-size: 0.888rem;
    font-weight: 600;
    color: var(--e-global-color-secondary);
  }
}

@media screen and (max-width: 767px) {
  #menu-improved__content .menu-mobile-menu-container {
    padding: 80px 20px;
  }

  #menu-improved__content #menu-mobile-menu li.menu-item:not(.contact) {
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.2) !important;
  }


  #menu-improved__content #menu-mobile-menu li.menu-item a {
    height: 60px;
    line-height: 60px;
  }

  #menu-mobile-menu .toggle-submenu .toggle-submenu__inner {
    width: 26px !important;
    height: 26px !important;
  }
	
  #menu-improved__content.menu-improved__multistep
    ul.menu-improved-nav
    .sub-menu {
    padding-top: 60px !important;
  }

  /* Go Back Button */
  #menu-improved__content
  #menu-mobile-menu
  li.menu-item-has-children
  .sub-menu
  .close-submenu {
    height: 60px;
  }

  /* Menu Contact */
  #menu-improved__content #menu-mobile-menu li.contact {
    margin-top: 20px;
  }

  #menu-improved__content #menu-mobile-menu li.contact a {
    height: 50px;
  }

  #menu-improved__content #menu-mobile-menu li.contact a:after {
    width: 30px;
    height: 30px;
  }
}

/* Small Title */
.small-title span {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-stack-heading);
  font-size: 0.888rem;
  font-weight: 700;
  text-transform: uppercase;
}

.small-title span:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background: var(--e-global-color-primary);
  border-radius: 1px;
}

p {
  margin: 0px 0px 1rem 0px;
}

.numbers.blue-bg .numbers-box {
  background: var(--e-global-color-primary);
  border: 1px solid var(--e-global-color-primary);
}
.numbers.blue-bg .numbers-box .numbers-number {
  font-size: var(--custom-title-3-default);
}

/* Bullet Point */
.joc-bullets ul {
  padding-left: 20px;
  margin: 0px;
  list-style: none;
}

.joc-bullets li {
  position: relative;
  margin-bottom: 12px;
}

.joc-bullets li:last-child {
  margin-bottom: 0px;
}

.joc-bullets li:before {
  content: "";
  position: absolute;
  left: -20px;
  top: 10px;
  display: block;
  width: 8px;
  height: 8px;
  background: var(--e-global-color-primary);
  border-radius: 1px;
}

@media screen and (max-width: 767px) {
  .joc-bullets ul {
    padding-left: 14px;
  }

  .joc-bullets li:not(:last-child) {
    margin-bottom: 8px;
  }

  .joc-bullets li:before {
    left: -14px;
    width: 6px;
    height: 6px;
  }
}

/* Adjust on Small Laptop */
@media (max-height: 800px), (min-width: 1025px) and (max-width: 1440px) {
  .hero-small-screen .hero-text-wrap {
    gap: 12px;
  }

  .hero-small-screen .hero-text-wrap h1 span {
    font-size: var(--custom-title-1-1366-max);
  }

  .hero-small-screen .hero-text-wrap p span,
  .hero-small-screen .hero-text-wrap .badge p {
    font-size: 17px;
  }
	
  .hero-small-screen .hero-cta-wrap .button a .elementor-button-text {
    font-size: 15px;
  }
	
  .hero-small-screen .numbers-box {
    padding: 20px;
  }

  .hero-small-screen .numbers-box .numbers-top {
    font-size: 14px;
  }
  .hero-small-screen .numbers-box .numbers-number {
    font-size: var(--custom-title-2-1366-max);
  }
  .hero-small-screen .numbers-box .numbers-bottom {
    font-size: 0.88rem;
  }
}

@media (min-width: 1025px) and (max-width: 1440px) {
  .hero-small-screen .numbers {
    width: 600px;
  }
}

@media (min-width: 1025px) and (max-width: 1200px) {
  .hero-small-screen .hero-cta-wrap {
    width: 240px;
  }
  .hero-small-screen .hero-cta-wrap .button a {
    min-width: 240px;
  }
}

/* Play Video Button */
.joc-video-wrap .elementor-custom-embed-play {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 84px;
  height: 84px;
  padding: 0px 0px 0px 4px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  overflow: hidden;
  transition: all 0.4s ease-out;
}

.joc-video-wrap .elementor-custom-embed-play:after {
  content: "Play Video";
  display: block;
  width: 1px;
  white-space: nowrap;
  font-family: var(--font-stack-heading);
  font-size: 0.888rem;
  font-weight: 700;
  line-height: 1.25em;
  overflow: hidden;
  transition: all 0.4s ease-out;
}

.joc-video-wrap .elementor-custom-embed-play svg {
  display: flex;
  width: 20px;
  height: auto;
  opacity: 1;
  filter: none;
}

.joc-video-wrap .elementor-custom-embed-play:hover {
  gap: 12px;
  width: fit-content;
  padding: 30px 40px 30px 40px;
}

.joc-video-wrap .elementor-custom-embed-play:hover:after {
  width: fit-content;
}

@media screen and (max-width: 767px) {
  .joc-video-wrap .elementor-custom-embed-play {
    width: 60px;
    height: 60px;
  }

  .joc-video-wrap .elementor-custom-embed-play svg {
    width: 16px;
  }

  .joc-video-wrap .elementor-custom-embed-play:hover {
    padding: 20px 30px 20px 30px;
  }
}

/* Industries Card */
.industry-item .industry-item-img:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, #000000 100%);
  transition: all ease-out 0.5s;
}

.industry-item .industry-item-default-img,
.industry-item .industry-item-text {
  transition: all ease-out 0.2s;
}

.industry-item .industry-item-product-img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0;
  transition: all ease-out 0.5s;
}

.industry-item .industry-item-text.detail {
  display: none;
  height: 0px;
  opacity: 0;
  transition: all ease-out 0.6s;
}

.industry-item .joc-bullets li {
  margin-bottom: 8px;
  font-size: 0.88rem;
}

.industry-item:hover .industry-item-img:after {
  background: linear-gradient(180deg, rgba(256, 256, 526, 0) 30%, #fff 100%);
}

.industry-item:hover .industry-item-product-img {
  opacity: 1;
}

.industry-item:hover .industry-item-default-img {
  opacity: 0;
}

.industry-item:hover .industry-item-text {
  display: none;
  height: 0px;
  opacity: 0;
}

.industry-item:hover .industry-item-text.detail {
  display: flex;
  flex-direction: column;
  height: fit-content;
  opacity: 1;
}