
/* --- background - start --- */
.re-header {
  position: sticky;
  top: 0;
  z-index: 6;
  overflow: hidden;
  background-color: var(--white);
}

.re-header .shadow {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.re-header .header-inner-wrp {
  padding-bottom: 64px;
  transition: all 0.3s;
}

.re-header .header-inner-wrp.search-bar-show {
  padding-bottom: 104px;
}

.re-header .header-nav-outter-wrp {
  position: relative;
  background-color: var(--white);
}

.re-header .header-nav-outter-wrp .background-el {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
.re-header .header-nav-outter-wrp .background-el .sub-el {
  position: absolute;
  top: 0;
  left: 0;
  width: 25vw;
  height: 100%;
}

.re-header .header-nav-outter-wrp .background-el .sub-el.red {
  background-color: var(--primary);
  z-index: 2;
}

.re-header .header-nav-outter-wrp .background-el .sub-el.yellow {
  background-color: var(--secondary);
  z-index: 1;
  left: 30px;
}

.re-header .header-nav-outter-wrp .background-el .sub-el::after {
  content: "";
  position: absolute;
  right: 1px;
  transform: translateX(100%);
  width:40px;
  height: 100%;
  clip-path: polygon(0px 0px, calc(100% - 0px) calc(100% - 0px), 0px calc(100% - 0px), 0px 0px);
}

.re-header .header-nav-outter-wrp .background-el .sub-el.red::after {
  background-color: var(--primary);
}

.re-header .header-nav-outter-wrp .background-el .sub-el.yellow::after {
  background-color: var(--secondary);
}
/* --- background - end --- */

/* --- content - start --- */
.re-header .header-nav-outter-wrp .content-wrp {
  position: relative;
  z-index: 8;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.re-header .header-nav-outter-wrp .site-logo-wrp {
  position: relative;
  width: 70px;
  z-index: 1;
}

.re-header .header-nav-outter-wrp .site-logo-wrp .navbar-brand {
  position: absolute;
  left: 0;
  bottom: 16px;
  transform: translateY(100%);
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
}

.re-header .header-nav-outter-wrp .site-logo-wrp .navbar-brand .site-logo {
  width: 100%;
  height: 100%;
}

.re-header .header-nav-outter-wrp .navigation-outter-wrp .main-nav-wrp {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: center;
  gap: 36px;
  padding: 8px 0;
  min-height: 28px;
  width: 100%;
}

.re-header .header-nav-outter-wrp .navigation-outter-wrp .navigation-wrp {
  display: none;
  flex-direction: row;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.re-header .header-nav-outter-wrp .navigation-outter-wrp .news-marquee .news-marquee-inner-wrp {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateY(100%);
  width: 100vw;
}

.re-header .header-nav-outter-wrp .navigation-outter-wrp .news-marquee .option-nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 4px 4px 4px calc(4px + 70px);
  width: 100%;
  position: absolute;
  left: 0;
  top: 52px;
}

.re-header .header-nav-outter-wrp .navigation-outter-wrp .news-marquee .option-nav .lang-btns-wrp {
  display: flex;
  flex-direction: row;
  gap: 4px;
}

.re-header .header-nav-outter-wrp .navigation-outter-wrp .news-marquee .option-nav .search-bar-com {
  width: fit-content;
}

.re-header .header-nav-outter-wrp .navigation-outter-wrp .news-marquee .option-nav .social-links {
    margin-bottom: 0;
}

.re-header .header-nav-outter-wrp .navigation-outter-wrp .news-marquee .option-nav .social-links .icon-links {
    border: unset;
    margin: 0;
    padding: 0;
    gap: 6px;
}
/* --- content - end --- */

/* --- mobile menu trigger - start --- */
.mobile-menu-trigger {
  width: 16px;
  height: 12px;
  position: relative;
  transform: rotate(0deg);
  transition: 0.5s ease-in-out;
  cursor: pointer;
  display: block;
}

@media (min-width: 992px) {
  .mobile-menu-trigger {
    display: none;
  }
}

.mobile-menu-trigger span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  border-radius: 10px;
  background-color: var(--black);
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
}

.mobile-menu-trigger span:nth-child(1) {
  top: 0px;
  transform-origin: left center;
}

.mobile-menu-trigger span:nth-child(2) {
  top: 6px;
  width: 12px;
  left: auto;
  right: 0;
  transform-origin: left center;
}

.mobile-menu-trigger span:nth-child(3) {
  top: 12px;
  transform-origin: left center;
}

.mobile-menu-trigger.show-menu span:nth-child(1) {
  transform: rotate(45deg);
  top: 0px;
  left: 5px;
}

.mobile-menu-trigger.show-menu span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

.mobile-menu-trigger.show-menu span:nth-child(3) {
  transform: rotate(-45deg);
  top: 12px;
  left: 5px;
}
/* --- mobile menu trigger - end --- */

/* --- sticky social media content - start --- */
.sticky-social-media-content {
    position: sticky;
    top: 60vh;
    z-index: 4;
}

.sticky-social-media-content .social-links{
    position: absolute;
    padding: 10px 4px 10px 4px;
    background: #ede4e4;
    clip-path: polygon(0px 10.1178px, 0px 10.1178px, 0.04178789px 9.53891216px, 0.16351312px 8.98382008px, 0.35971803px 8.45893692px, 0.62494496px 7.97067584px, 0.95373625px 7.52545px, 1.34063424px 7.12967256px, 1.78018127px 6.78975668px, 2.26691968px 6.51211552px, 2.79539181px 6.30316224px, 3.36014px 6.16931px, calc(100% - 3.1568px) 2.03975px, calc(100% - 3.1568px) 2.03975px, calc(100% - 3.0071109px) 2.01426334px, calc(100% - 2.8578832px) 1.98639552px, calc(100% - 2.7091463px) 1.95615278px, calc(100% - 2.5609296px) 1.92354136px, calc(100% - 2.4132625px) 1.8885675px, calc(100% - 2.2661744px) 1.85123744px, calc(100% - 2.1196947px) 1.81155742px, calc(100% - 1.9738528px) 1.76953368px, calc(100% - 1.8286781px) 1.72517246px, calc(100% - 1.6842px) 1.67848px, calc(100% - 1.6842px) 1.67848px, calc(100% - 1.6842px) 1.67848px, calc(100% - 1.6575135px) 1.66962014px, calc(100% - 1.630392px) 1.66061472px, calc(100% - 1.6028625px) 1.65147298px, calc(100% - 1.574952px) 1.64220416px, calc(100% - 1.5466875px) 1.6328175px, calc(100% - 1.518096px) 1.62332224px, calc(100% - 1.4892045px) 1.61372762px, calc(100% - 1.46004px) 1.60404288px, calc(100% - 1.4306295px) 1.59427726px, calc(100% - 1.401px) 1.58444px, calc(100% - 1.401px) 1.58444px, calc(100% - 1.1914371px) 1.50217524px, calc(100% - 0.99406079999999px) 1.39930432px, calc(100% - 0.8100897px) 1.27720628px, calc(100% - 0.6407424px) 1.13726016px, calc(100% - 0.4872375px) 0.980845px, calc(100% - 0.3507936px) 0.80933984px, calc(100% - 0.2326293px) 0.62412372px, calc(100% - 0.1339632px) 0.42657568px, calc(100% - 0.056013900000004px) 0.21807476px, calc(100% - 0px) 2.4691582112268E-16px, calc(100% - 0px) 0px, calc(100% - 0px) calc(100% - 0px), calc(100% - 0px) calc(100% - 0px), calc(100% - 0px) calc(100% - 0px), calc(100% - 0.056013999999998px) calc(100% - 0.21798899999999px), calc(100% - 0.13396399999999px) calc(100% - 0.42643199999998px), calc(100% - 0.232632px) calc(100% - 0.62394300000003px), calc(100% - 0.3508px) calc(100% - 0.809136px), calc(100% - 0.48725px) calc(100% - 0.980625px), calc(100% - 0.640764px) calc(100% - 1.137024px), calc(100% - 0.810124px) calc(100% - 1.276947px), calc(100% - 0.994112px) calc(100% - 1.399008px), calc(100% - 1.19151px) calc(100% - 1.501821px), calc(100% - 1.4011px) calc(100% - 1.584px), calc(100% - 1.6842px) calc(100% - 1.678px), calc(100% - 1.6842px) calc(100% - 1.678px), calc(100% - 1.6842px) calc(100% - 1.678px), calc(100% - 1.8286782px) calc(100% - 1.724829px), calc(100% - 1.9738536px) calc(100% - 1.769312px), calc(100% - 2.1196974px) calc(100% - 1.811443px), calc(100% - 2.2661808px) calc(100% - 1.851216px), calc(100% - 2.413275px) calc(100% - 1.888625px), calc(100% - 2.5609512px) calc(100% - 1.923664px), calc(100% - 2.7091806px) calc(100% - 1.956327px), calc(100% - 2.8579344px) calc(100% - 1.986608px), calc(100% - 3.0071838px) calc(100% - 2.014501px), calc(100% - 3.1569px) calc(100% - 2.04px), 3.36014px calc(100% - 6.17px), 3.36014px calc(100% - 6.17px), 2.79539181px calc(100% - 6.303872px), 2.26691968px calc(100% - 6.512816px), 1.78018127px calc(100% - 6.790424px), 1.34063424px calc(100% - 7.130288px), 0.95373625px calc(100% - 7.526px), 0.62494496px calc(100% - 7.971152px), 0.35971803px calc(100% - 8.459336px), 0.16351312px calc(100% - 8.984144px), 0.04178789px calc(100% - 9.539168px), 5.2628732032303E-32px calc(100% - 10.118px), 0px 10.1178px); 
    right: 0;
    margin: 0;
}

.sticky-social-media-content .social-links .icon-links{
    flex-direction: column;
    gap: 1px !important;
    padding: 0;
    margin: 0;
    border: 0px solid transparent;
}

.sticky-social-media-content .social-links .icon-links .social-link{
    width: 24px;
}
/* --- sticky social media content - end --- */

/* --- content(responsive) - start --- */
@media (min-width: 576px) {
  .re-header .header-inner-wrp {
    padding-bottom: 86px;
  }

  .re-header .header-inner-wrp.search-bar-show {
    padding-bottom: 116px;
  }

  .re-header .header-nav-outter-wrp .site-logo-wrp {
    width: 96px;
  }
  
  .re-header .header-nav-outter-wrp .site-logo-wrp .navbar-brand {
    bottom: 22px;
  }

  .re-header .header-nav-outter-wrp .navigation-outter-wrp .main-nav-wrp {
    gap: 40px;
    padding: 12px 0;
    min-height: 45px;
  }

  .re-header .header-nav-outter-wrp .navigation-outter-wrp .news-marquee .option-nav {
    padding: 6px 6px 6px calc(6px + 96px);
    top: 78px;
  }

  .re-header .header-nav-outter-wrp .navigation-outter-wrp .news-marquee .option-nav .lang-btns-wrp {
    gap: 6px;
  }
  
  .mobile-menu-trigger {
    width: 28px;
    height: 20px;
  }
  
  .mobile-menu-trigger span:nth-child(2) {
    top: 10px;
    width: 16px;
  }
  
  .mobile-menu-trigger span:nth-child(3) {
    top: 20px;
  }
  
  .mobile-menu-trigger.show-menu span:nth-child(3) {
    top: 20px;
  }
}

@media (min-width: 768px) {
}

@media(min-width: 992px) {
  .re-header .header-inner-wrp {
    padding-bottom: 86px;
  }
  
  .re-header .header-nav-outter-wrp .navigation-outter-wrp .navigation-wrp {
    display: flex;
    gap: 28px;
  }

  .re-header .header-nav-outter-wrp .navigation-outter-wrp .news-marquee .option-nav {
    padding: 10px 10px 10px calc(10px + 96px);
  }

  .re-header .header-nav-outter-wrp .navigation-outter-wrp .news-marquee .option-nav .lang-btns-wrp {
    gap: 10px;
  }
}

@media(min-width: 1200px) {
  .re-header .header-inner-wrp {
    padding-bottom: 90px;
  }

  .re-header .header-nav-outter-wrp .site-logo-wrp {
    width: 100px;
  }

  .re-header .header-nav-outter-wrp .site-logo-wrp .navbar-brand {
    bottom: 20px;
  }

  .re-header .header-nav-outter-wrp .navigation-outter-wrp .main-nav-wrp {
    gap: 60px;
    padding: 14px 0;
  }
  
  .re-header .header-nav-outter-wrp .navigation-outter-wrp .navigation-wrp {
    gap: 36px;
  }

  .re-header .header-nav-outter-wrp .navigation-outter-wrp .news-marquee .option-nav {
    padding: 10px 10px 10px calc(10px + 96px);
    top: 84px;
  }
}

@media(min-width: 1441px) {
  .re-header .header-inner-wrp {
    padding-bottom: 110px;
  }

  .re-header .header-nav-outter-wrp .site-logo-wrp {
    width: 120px;
  }

  .re-header .header-nav-outter-wrp .site-logo-wrp .navbar-brand {
    bottom: 28px;
  }

  .re-header .header-nav-outter-wrp .navigation-outter-wrp .main-nav-wrp {
    gap: 100px;
    padding: 16px 0;
    min-height: 60px;
  }

  .re-header .header-nav-outter-wrp .navigation-outter-wrp .navigation-wrp {
    gap: 40px;
  }
  
  .re-header .header-nav-outter-wrp .navigation-outter-wrp .news-marquee .option-nav {
    padding: 6px 6px 6px calc(6px + 120px);
    top: 102px;
  }
}
/* --- content(responsive) - end --- */

/* --- mobile menu - start --- */
.mobile-menu {
  display: block !important;
}

@media (min-width: 992px) {
  .mobile-menu {
    display: none !important;
  }
}

.mobile-menu .menu-wrp {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  background-color: white;
  width: 100%;
  padding: 100px 0 0 0;
  height: 100%;
  transform: translate3d(100%, 0, 0);
  transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}

@media (min-width: 576px) {
  .mobile-menu .menu-wrp {
    padding: 140px 0 0 0;
  }
}

.header-variation .mobile-menu .menu-wrp {
  z-index: 4;
}

.show-menu .mobile-menu .menu-wrp {
  transform: translate3d(0, 0, 0);
}

.home .mobile-menu .menu-wrp {
  padding: 95px 0;
}

.sticky-header .mobile-menu .menu-wrp {
  padding: 80px 0;
}

.mobile-menu .menu-wrp .nav-primary {
  overflow-y: auto;
  height: calc(100vh - 150px);
}

.mobile-menu .menu-wrp .nav-primary .menu-main-menu-container .nav {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: var(--white) !important;
}

.mobile-menu .menu-wrp .nav-primary .menu-main-menu-container .nav li {
  list-style: none;
  margin: 0;
}

.mobile-menu .menu-wrp .nav-primary .menu-main-menu-container .nav li:first-child a {
  border: 0;
}

.mobile-menu .menu-wrp .nav-primary .menu-main-menu-container .nav li a {
  color: black;
  display: block;
  padding: 10px 16px;
  font-size: 18px;
  border-top: 1px solid var(--gray);
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.mobile-menu .menu-wrp .nav-primary .menu-main-menu-container .nav li a:hover {
  background-color: var(--primary-100);
  color: var(--white);
}

.mobile-menu .menu-wrp .nav-primary .menu-main-menu-container .nav li.menu-item-has-children > a {
  position: relative;
  z-index: 1;
}

.mobile-menu .menu-wrp .nav-primary .menu-main-menu-container .nav li.menu-item-has-children > a::after {
  content: "";
  transform: translateY(-50%);
  background-image: url('path-to-arrow-image');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  right: 30px;
  width: 9px;
  height: 17px;
}

.mobile-menu .menu-wrp .nav-primary .menu-main-menu-container .nav li.menu-item-has-children > a:hover::after {
  background-image: url('path-to-hover-arrow-image');
}

.mobile-menu .menu-wrp .nav-primary .menu-main-menu-container .nav li:last-child > a {
  border-bottom: 1px solid var(--gray);
}

.mobile-menu .menu-wrp .nav-primary .menu-main-menu-container .nav > .menu-item-has-children > .sub-menu-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  background-color: var(--white);
  transform: translate3d(100%, 0, 0);
  transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
  padding: 80px 0;
}

.mobile-menu .menu-wrp .nav-primary .menu-main-menu-container .nav > .menu-item-has-children > .sub-menu-wrap.show-menu {
  transform: translate3d(0, 0, 0);
}

.mobile-menu .menu-wrp .nav-primary .menu-main-menu-container .nav > .menu-item-has-children > .sub-menu-wrap > .sub-menu {
  overflow: auto;
  height: 100%;
  width: 100%;
}

.mobile-menu .menu-wrp .nav-primary .menu-main-menu-container .nav > .menu-item-has-children > .sub-menu-wrap > .sub-menu li a {
  padding-left: 76px;
}

.mobile-menu .menu-wrp .nav-primary .return-link {
  color: var(--white);
  display: block;
  padding: 20px 30px;
  padding-left: 76px;
  position: relative;
  z-index: 1;
  background-color: var(--primary);
  cursor: pointer;
  font-size: 28px;
}

.mobile-menu .menu-wrp .nav-primary .return-link::after {
  content: "";
  transform: translateY(-50%) rotate(180deg);
  background-image: url('path-to-hover-arrow-image');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 36px;
  width: 9px;
  height: 17px;
}

/* --- mobile menu - end --- */
