:root {
      --color-nav-text: #444444;
      --boder-bottom-nemu: #B47C35;
      --text-btn: #FFFFFF;
      --metrict-color-text: #C4A386;
      --color-metrict: #D9D9D6;
      --background-metrict: #2C2C2C;
      --line-about-us: #996830;
      --text-title-about: #2C2C2C;
      --text-content-about: #444444;
      --boder-service-item: #E6D8CC;
      --bg-dot: #DEDFE0;
      --color-footer-title: #996830;
      --bg-language-active: #F2D87B;
      --bg-service-hover: #F8EDE4;
      --boder-service-hover: #E6D8CC;
      --color-placeholder: #BCBCBC;
      --menu-bar: #1C1B1F;

      /* font family */
      --open-sans: 'Open Sans', sans-serif;
}


* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      /* font */
}

/* icon */
.icon-arrow-btn {
      background-image: url(../images/icons/arrow-btn.svg);
      display: block;
      width: 20px;
      height: 20px;
}

.icon-quote {
      background-image: url(../images/icons/quote.svg);
      display: block;
      width: 39.68px;
      height: 32.26px;
}

.icon-get-in-touch {
      background-image: url(../images/icons/get_in_touch.svg);
      display: block;
      z-index: 2;
      width: 120px;
      height: 120px;
      position: absolute;
      top: -28%;
      right: 20%;
}

.icon-winning {
      background-image: url(../images/icons/winning.svg);
      display: block;
      z-index: 2;
      width: 120px;
      height: 120px;
      position: absolute;
      top: -19%;
      right: 37%;
}

.icon-winning-mbi {
      background-image: url(../images/icons/winning.svg);
      display: block;
      z-index: 2;
      width: 120px;
      height: 120px;
      position: absolute;
      top: -28%;
      right: 21%;
}

.icon-inteo {
      background-image: url(../images/icons/inteo.svg);
      display: block;
      width: 24px;
      height: 26px;
      position: absolute;
      top: -9%;
      right: 46%;
      z-index: 2;
}

.icon-inteo-mbi {
      background-image: url(../images/icons/inteo.svg);
      display: block;
      width: 24px;
      height: 26px;
      position: absolute;
      top: -10%;
      right: 36%;
      z-index: 2;
}

.icon-house {
      background-image: url(../images/icons/house_siding.svg);
      display: block;
      width: 42.02px;
      height: 34px;
}

.icon-agriculture {
      background-image: url(../images/icons/agriculture.svg);
      display: block;
      width: 43px;
      height: 32.86px;
}

.icon-contact {
      background-image: url(../images/icons/contacts_product.svg);
      display: block;
      width: 31.05px;
      height: 36.92px;
}

.icon-contract {
      background-image: url(../images/icons/contract.svg);
      display: block;
      width: 38px;
      height: 38px;
}

.icon-currency {
      background-image: url(../images/icons/currency.svg);
      display: block;
      width: 38px;
      height: 38px;
}

.icon-hotel {
      background-image: url(../images/icons/hotel.svg);
      display: block;
      width: 40.48px;
      height: 33.81px;
}

.icon-clock {
      background-image: url(../images/icons/clock.svg);
      display: block;
      width: 38px;
      height: 38px;
}

.icon-gale {
      background-image: url(../images/icons/gale.svg);
      display: block;
      width: 37.15px;
      height: 30px;
}

.icon-heat {
      background-image: url(../images/icons/heat.svg);
      display: block;
      width: 38px;
      height: 38px;
}

.icon-prev {
      background-image: url(../images/icons/arrow_back_ios_new.svg);
      display: block;
      width: 16.58px;
      height: 30.33px;
}

.icon-next {
      background-image: url(../images/icons/arrow_forward_ios.svg);
      display: block;
      width: 16.58px;
      height: 30.33px;
}

.icon-dot-active {
      background-image: url(../images/icons/dot_active.svg);
      display: block;
      width: 108px;
      height: 4px;
      border-radius: 37px;
}

.icon-dot {
      background-image: url(../images/icons/dot.svg);
      display: block;
      width: 36px;
      height: 4px;
      border-radius: 37px;
}

.icon-star {
      background-image: url(../images/icons/star.svg);
      display: block;
      width: 22px;
      height: 21px;

}

.icon-instagram {
      background-image: url(../images/icons/instagram.svg);
      display: block;
      width: 19.96px;
      height: 19.96px;
}

.icon-facebook {
      background-image: url(../images/icons/facebook.svg);
      display: block;
      width: 20px;
      height: 20px;
}

.icon-youtube {
      background-image: url(../images/icons/youtube.svg);
      display: block;
      width: 20px;
      height: 14.38px;
}

.icon-message {
      background-image: url(../images/icons/message.svg);
      display: block;
      width: 23px;
      height: 20px;
}

.icon-close-mbi {
      background-image: url(../images/icons/close-header-mbi.svg);
      display: block;
      width: 24.4px;
      height: 24.4px;
}

.icon-tiktok {
      background-image: url(../images/icons/tiktok.svg);
      display: block;
      width: 15px;
      height: 19px;
}
/* end icon */

/* header desktop */
/* header desktop */
/* .dropdown-toggle::after {
      content: none;
} */

.card-banch {
      max-width: 288px;
      border-radius: 16px !important;
      border: 2px solid #E4E5E5;
}

.card-banch:hover {
      box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.header-des {
      justify-content: space-around;
}

.logo-des {
      width: 117.19px;
      height: 84px;
}

.menu-des {
      display: flex;
      align-items: center;
      gap: .5rem;
}

.menu-des a {
      text-wrap: nowrap;
      text-decoration: none;
      font-family: Open Sans;
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
      text-align: left;
      color: var(--color-nav-text);
}

.list-language {
      display: flex;
      flex-direction: row;
      gap: 4px;
}

.list-language a {
      text-decoration: none;
      font-family: Open Sans;
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
      text-align: left;
      color: var(--color-nav-text);
}

.menu-item-des {
      padding: 0px 15px;
      font-family: Open Sans;
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
      text-align: left;
      text-decoration: none;
      color: var(--color-nav-text);
      border-bottom: 1px solid transparent;
      transition: border-bottom 0.5s ease;
      position: relative;
}

.menu-item-des::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 1px;
      background-color: var(--boder-bottom-nemu);
      transition: width 0.4s ease, left 0.4s ease;
}

.menu-item-des:hover::after {
      width: 100%;
      left: 0;
      color: var(--boder-bottom-nemu);
}

.menu-item-des:hover {
      color: var(--boder-bottom-nemu);
}

.menu-item-des.menu-focus::after {
      width: 0;
      left: 50%;
}

.menu-focus {
      color: var(--boder-bottom-nemu) !important;
      border-bottom: 1px solid var(--boder-bottom-nemu) !important;
}
/* end header desktop */
/* end header desktop */

/* header mobile */
.header-mbi {
      /* display: flex; */
      align-items: center;
      justify-content: space-between;
      padding: 0px 20px;
      gap: 8px;
}

.logo img {
      width: 80px;
      height: 84px;
}

.wrap-btn-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
}

.btn-contact {
      width: 139px;
      height: 44px;
      padding: 12px 15px;
      background-color: var(--boder-bottom-nemu);
      font-weight: 600;
      font-size: 12px !important;
      line-height: 16px;
      color: var(--text-btn) !important;
      border: none;
      display: flex;
      gap: 5px;
      justify-content: center;
      align-items: center;
      font-family: Open Sans;
      cursor: pointer;
      text-decoration: none;
}

.btn-contact:hover {
      background-color: var(--line-about-us);
      text-decoration: none;
}

.menu-icon {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 44px;
      width: 44px;
      cursor: pointer;
      padding: 14px 7px;
}

.menu-icon .bar {
      width: 30px;
      height: 2px;
      background-color: var(--menu-bar);
}

.offcanvas {
      background-color: var(--color-footer-title);
}

.offcanvas.show {
      width: 100vw;
      height: 100vh;
}

.menu-canvas {
      padding: 30px 25px;
      display: flex;
      justify-content: end;
      align-items: center;
}

.wrap-content-menu {
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
}

.menu-item {
      /* width: 79px; */
      height: 24px;
      padding: 0 16px;
      text-align: center;
      position: relative;
}

.menu-item a {
      text-decoration: none;
      font-family: Open Sans;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      color: var(--text-btn);
      text-align: center;
      opacity: 0.7;
}

.menu-item::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 2px;
      background-color: var(--text-btn);
      transition: width 0.4s ease, left 0.4s ease;
}

.menu-item:hover::after {
      width: 100%;
      left: 0;
      color: var(--text-btn);
}

.menu-item.active::after {
      width: 0;
      left: 50%;
}

.menu-item:hover a {
      opacity: 1;
      font-weight: 600;
}

.menu-item.active {
      border-bottom: 2px solid var(--text-btn);
}

.menu-item.active a {
      opacity: 1;
      font-weight: 600;
}

.wrap-language {
      display: flex;
      gap: 8px;
      justify-content: center;
}

.language-item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 32px;
      height: 32px;
      color: var(--text-btn);
      font-family: Open Sans;
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
      text-align: left;
}

.language-item:hover {
      border-radius: 50%;
      background-color: var(--bg-language-active);
      color: var(--color-nav-text);
      text-decoration: none;
}

.language-item.active {
      border-radius: 50%;
      background-color: var(--bg-language-active);
      color: var(--color-nav-text);
}
/* end header */

/* body */
.message-container-des {
      /* padding: 6vw; */
      padding: 6vw 6vw 0;
      display: flex;
      overflow: hidden;
}

.wrap-message {
      padding: 80px, 0;
      display: flex;
      flex-direction: column;
      gap: 32px;
}

.wrap-message-content {
      display: flex;
      /* flex-direction: row; */
      gap: 1rem;
}

.message-left {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 24px;
}

.message-content-mbi {
      display: none;
}

.message-right {
      /* flex: 1; */
      display: flex;
      justify-content: center;
      align-items: center;
}

.message-container {
      padding: 48px 20px;
      display: flex;
      flex-direction: column;
      gap: 80px;
}

.wrap-about-img {
      display: flex;
      justify-content: center;
      margin: 20px 0;
}

.img-chiba {
      max-width: 100%;
      width: 350px;
      height: auto;
      box-sizing: border-box;
      vertical-align: middle;
}

.content-img-des {
      position: relative;
      gap: 15px;
}

.content-img-mbi {
      position: relative;
      gap: 8px;
}

.img-about-l {
      position: relative;
      top: -7%;
      max-width: 100%;
      height: auto;
      object-fit: contain;
}

.img-about-r {
      position: relative;
      bottom: -7%;
      max-width: 100%;
      height: auto;
      object-fit: contain;
}

.about-content,
.info-content,
.timeline-content {
      display: flex;
      flex-direction: column;
      gap: 24px;
}

.wrap-about-us {
      display: flex;
      align-items: center;
      gap: 16px;
}

.wrap-about-us span {
      font-weight: 600;
      font-size: 14px;
      line-height: 20px;
      color: var(--line-about-us) !important;
      font-family: Open Sans;
      letter-spacing: 0.1em;
}

.line-about-us {
      width: 64px;
      height: 1px;
      background-color: var(--line-about-us);
}

.about-content h1,
.info-content h1,
.timeline-content h1 {
      font-family: Playfair Display;
      font-weight: 400;
      font-size: clamp(36px, 4vw, 60px);
      line-height: clamp(48px, 5vw, 72px);
      margin: 0;
      color: var(--background-metrict);
}

.wrap-message > span,
.about-content span {
      font-family: Open Sans;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      color: var(--color-nav-text);
      letter-spacing: 1px;
}

.signature,
.signature-content {
      display: flex;
      justify-content: flex-end;
}

.signature-content img {
      max-width: 200px;
      width: 200px;
}

.company-container {
      display: flex;
      flex-direction: column;
      gap: 40px;
      padding: 7vw;
}

.wrap-company-info {
      display: flex;
      flex-direction: column;
      gap: 24px;
}

.info-row {
      display: flex;
      /* flex-direction: row; */
      gap: 24px;
}

.info-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 40px;
      border: 1px solid var(--boder-service-item);
}

.left-info-item {
      flex: 3;
      padding: 40px;
      display: flex;
      flex-direction: column;
      border: 1px solid var(--boder-service-item);
}

.right-info-item {
      flex: 2;
      padding: 40px;
      display: flex;
      flex-direction: column;
      border: 1px solid var(--boder-service-item);
}

.info-item-content {
      display: flex;
      flex-direction: column;
      gap: 16px;
}

.info-item-content h4,
.history-content h4 {
      font-family: Open Sans;
      font-weight: 400;
      font-size: 24px;
      line-height: 32px;
      text-align: left;
      margin: 0;
      color: var(--background-metrict);
}

.info-item-content span,
.history-content span {
      font-family: Open Sans;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      text-align: left;
      color: var(--color-nav-text);
}

.timeline-container {
      display: flex;
      flex-direction: column;
      gap: 48px;
      padding: 7vw;
}

.wrap-history {
      display: flex;
      gap: 16px;
}

.bar-history {
      width: 8px;
      /* height: 952px; */
      background-color: var(--bg-dot);
}

.bar-child {
      width: 8px;
      height: 5px;
      background-color: var(--color-footer-title);
      position: relative;
      top: 0;
}

.wrap-history-item {
      display: flex;
      flex-direction: column;
      gap: 32px;
      width: 100%;
}

.history-item {
      display: flex;
      flex-direction: column;
      gap: 24px;
      /* border-bottom: 1px solid var(--color-metrict);   */
}

.history-content {
      display: flex;
      flex-direction: column;
      gap: 8px;
}

.card-body {
      color: #333;
}

.card-body h5 {
      text-align: center;
      font-weight: 700;
}

.card-body a {
      text-decoration: none;
      color: #333;
      cursor: pointer;
}

.video-container {
      width: 100%;
      /* height: 70vh; */
      max-width: 1440px;
      margin: 3rem auto 0 auto;
      overflow: hidden;
}

.video-container video {
      width: 100%;
}
/* end body */

/* footer */
.footer-des {
      padding: 1vw 5vw 5vw;
      flex-direction: column;
      gap: 80px;
      overflow: hidden;
}

.wrap-footer {
      display: flex;
      /* gap: 32px; */
      justify-content: space-between;
}

.footer-left {
      flex: 1;
      display: flex;
      flex-direction: column;
      /* justify-content: space-between; */
      gap: 150px;
}

.footer-title-des {
      display: flex;
      flex-direction: column;
      gap: 16px;
}

.footer-left-header {
      display: flex;
      flex-direction: column;
      gap: 16px;
}

.wrap-footer-title {
      display: flex;
      flex-direction: column;
      gap: 0px;
}

.wrap-footer-title h2 {
      font-family: Playfair Display;
      font-weight: 400;
      font-size: clamp(30px, 4vw, 40px);
      line-height: clamp(40px, 5vw, 60px);
      text-align: left;
      margin: 0;
      color: var(--background-metrict);
}

.footer-des-contact {
      display: flex;
      flex-direction: column;
      gap: 0;
}

.footer-des-contact a,
.footer-des-contact span {
      text-decoration: none;
      font-family: Open Sans;
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
      text-align: left;
      letter-spacing: 1px;
      color: var(--background-metrict);
}

.send-us-des a {
      text-decoration: none;
      font-family: Playfair Display;
      font-size: clamp(30px, 4vw, 40px);
      line-height: clamp(40px, 4vw, 60px);
      font-style: italic;
      font-weight: 400;
      text-align: left;
      color: var(--color-footer-title);
      border-bottom: 1px solid var(--color-footer-title);
}

.footer-between {
      flex: 1;
      display: flex;
      justify-content: space-between;
      /* align-items: center; */
      flex-direction: column;
      gap: 2vw;
      padding: 12px;
}

.footer-between iframe {
      width: 80%;
      height: 15vw;
      border: none;
}

.wrap-acess {
      display: flex;
      flex-direction: column;
      /* gap: 5px; */
      font-family: var(--open-sans);
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
      letter-spacing: 1px;
      color: var(--background-metrict);
}

.wrap-acess h6 {
      margin: 0;
}

.footer-right {
      flex: 1;
      display: flex;
      justify-content: end;
}

.wrap-footer-right {
      display: flex;
      flex-direction: column;
      gap: 28px;
}

.content-footer-right {
      display: flex;
      width: 340px;
      flex-direction: column;
      gap: 8px;
}

.footer-social-des {
      display: flex;
      /* flex-direction: column; */
      justify-content: space-between;
      align-items: center;
}

.qr-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
}

.qr-container img {
      max-width: 100px;
      width: 100px;
      object-fit: cover;
      height: auto;
}

.wrap-conect {
      display: flex;
      gap: 24px;
      align-items: center;
}



.footer-mbi {
      padding: 8px 20px 40px 20px;
      display: flex;
      flex-direction: column;
      gap: 40px;
}

.line-footer {
      width: 100%;
      height: 1px;
      background-color: var(--color-metrict);
}

.footer-container-mbi {
      display: flex;
      flex-direction: column;
      gap: 48px;
}

.footer-title {
      display: flex;
      flex-direction: column;
      gap: 8px;
}

.footer-title h2 {
      font-family: Playfair Display;
      font-size: 48px;
      font-weight: 400;
      line-height: 60px;
      text-align: left;
      color: var(--background-metrict);
      margin: 0;
}

.send-us a {
      text-decoration: none;
      font-family: Playfair Display;
      font-size: 30px;
      font-style: italic;
      font-weight: 400;
      line-height: 40px;
      text-align: left;
      color: var(--color-footer-title);
      border-bottom: 1px solid var(--color-footer-title);
}

.footer-logo {
      max-width: 212px;
      max-height: 113px;
      width: 212px;
      height: 113px;
}

.footer-logo-mbi {
      max-width: 135px;
      max-height: 113px;
      width: 135px;
      height: 113px;
}

.footer-content {
      display: flex;
      flex-direction: column;
      gap: 32px;
}

.footer-content-info {
      display: flex;
      flex-direction: column;
      gap: 8px;
}

.footer-info {
      text-decoration: none;
      font-family: Playfair Display;
      font-size: 24px;
      font-weight: 400;
      line-height: 32px;
      text-align: left;
      color: var(--background-metrict);
}

.footer-info:hover {
      text-decoration: none;
      color: var(--line-about-us);
}

.location-text {
      font-family: Open Sans;
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
      text-align: left;
      color: var(--background-metrict);
}

.color-text-1 {
      color: var(--line-about-us);
}

.footer-contact {
      display: flex;
      flex-direction: column;
      gap: 0;
}

.footer-contact a,
.footer-contact span {
      text-decoration: none;
      font-family: Open Sans;
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
      text-align: left;
      letter-spacing: 1px;
      color: var(--background-metrict);
}

.footer-social {
      display: flex;
      flex-direction: column;
      gap: 32px;
}

.footer-social span {
      font-family: Open Sans;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      text-align: left;
      letter-spacing: 1px;
      color: var(--color-nav-text);
}

.eyebrow {
      display: flex;
      gap: 16px;
      align-items: center;
}

.eyebrow span {
      font-family: Open Sans;
      font-size: 14px;
      font-weight: 600;
      line-height: 20px;
      letter-spacing: 0.1em;
      text-align: left;
      color: var(--color-nav-text);
}

.connect-social {
      display: flex;
      gap: 24px;
}

.wrap-icon-social {
      text-decoration: none;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid var(--boder-service-item);
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
}

.qr-container-mbi {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      /* gap: 10px; */
}

.qr-container-mbi img {
      max-width: 100px;
      width: 90px;
      height: auto;
      object-fit: cover;
}

.footer-social .reserved,
.footer-social-des .reserved {
      display: flex;
      flex-direction: column;
}

.footer-social .reserved a,
.footer-social-des .reserved a {
      color: var(--color-footer-title);
      font-size: 1.5rem;
      text-decoration: underline;
}
/* end footer */

@media (max-width: 799px) {

      .message-container-des {
            padding: 48px 20px;
      }

      .info-row {
            flex-direction: column;
      }
}

@media (min-width: 1081px) {
      .header-des {
            display: flex;
      }

      .header-mbi {
            display: none;
      }
}

@media (max-width: 1080px) {
      .header-des {
            display: none;
      }

      .header-mbi {
            display: flex;
      }
}

@media (min-width: 800px) {

      .footer-des {
            display: flex;
      }

      .footer-mbi {
            display: none;
      }
      
}

@media (max-width: 1390px) {
      /* .wrap-message-content {
            flex-direction: column;
            gap: 100px;
      } */

      .message-content-des {
            display: none;
      }

      .signature {
            display: none;
      }

      .message-content-mbi {
            display: block;
      }
}

@media (min-width: 621px) {
      .content-img-des {
            display: flex;
      }

      .content-img-mbi {
            display: none;
      }
}

@media (max-width: 620px) {
      .content-img-des {
            display: none;
      }

      .content-img-mbi {
            display: flex;
      }

      /* .video-container {
            height: 40vh;
      } */
}

@media (max-width: 939px) {
      .info-row {
            flex-direction: column;
      }

      .wrap-message-content {
            flex-direction: column;
            gap: 1rem;
      }
}

@media (max-width: 999px) {
      .timeline-container,
      .company-container {
            padding: 48px 20px;
      }

      .footer-des {
            display: none;
      }

      .footer-mbi {
            display: flex;
      }
}