: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;
      --mes-err: #df1529;
      --mes-suc: #059652;
}


* {
      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: -28%;
      right: 20%;
}

.icon-inteo {
      background-image: url(../images/icons/inteo.svg);
      display: block;
      width: 24px;
      height: 26px;
      position: absolute;
      top: -11%;
      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 */
/* .dropdown-toggle::after {
      content: none;
} */

.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 5px;
      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 */

/* header */
.header-mbi {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 20px;
      gap: 8px;
      /* width: 100vw; */
      /* background-color: var(--text-btn); */
      /* position: fixed; */
      /* z-index: 3; */
      /* box-shadow: 0 2px var(--text-content-about); */
}

.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 !important;
      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 {
      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 */
.connect-container {
      display: flex;
      flex-direction: column;
      gap: 32px;
      padding: 80px 120px;
      overflow: hidden;
}

.form-header {
      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;
      text-transform: uppercase;
}

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

.form-header h1 {
      font-family: Playfair Display;
      font-weight: 400;
      font-size: clamp(26px, 4vw, 60px);
      line-height: clamp(48px, 5vw, 72px);
      text-align: left;
      margin: 0;
      color: var(--background-metrict);
}

.wrap-form {
      display: flex;
      gap: 64px;
}

.wrap-image {
      flex: 1 1 auto;
      display: flex;
      justify-content: center;
      align-items: center;
}

.wrap-image img {
      max-width: 400px;
      width: 100%;
      height: auto;
      object-fit: fill;
}

form {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      gap: 24px;
      justify-content: space-between;
}

label {
      font-size: 14px;
      padding-left: 13px;
      color: var(--color-nav-text);
      font-family: Open Sans;
      display: block;
}

input[type="text"],
input[type="tel"],
input[type="email"] {
      border: none;
      border-bottom: 1px solid var(--color-nav-text);
      font-size: 16px;
      font-family: Open Sans;
      color: var(--color-nav-text);
      outline: none;
      border-radius: 0;
      text-overflow: ellipsis;
      overflow: hidden;
      background-color: transparent;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
textarea::placeholder {
      color: var(--color-placeholder) !important;
      background-color: transparent;
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus {
      border-bottom: 3px solid var(--color-footer-title);
      box-shadow: none;
      outline: none;
      background: none;
      background-color: transparent;
}

input:not(:placeholder-shown){
      background-color: transparent;
}

.form-row {
      display: flex;
      gap: 32px;
}

.form-item {
      width: 100%;
      border-radius: 8px;
}

/* .form-item:hover {
      background-color: var(--color-metrict);
} */

.form-item:focus-within label {
      color: var(--line-about-us) !important;
}

.form-group {
      display: flex;
      gap: 32px;
      width: 100%;
}

.wrap-message {
      width: 100%;
      position: relative;
      margin-top: 4px;
}

.wrap-message>span {
      position: absolute;
      top: -10px;
      z-index: 2;
      background-color: var(--text-btn);
      padding: 0 5px;
      left: 10px;
      font-size: 14px;
      font-family: Open Sans;
      color: var(--color-nav-text);
}

textarea {
      width: 100%;
      padding: 10px 14px !important;
      border: 1px solid var(--color-nav-text) !important;
      font-size: 16px !important;
      font-family: Open Sans !important;
      color: var(--color-nav-text) !important;
      outline: none !important;
      border-radius: 4px;
}

textarea:focus {
      outline: none !important;
      box-shadow: none !important;
      border-color: var(--color-footer-title) !important;
}

.wrap-btn-form {
      display: flex;
      flex-direction: column;
      gap: 5px;
}

.wrap-btn-form button {
      /* width: 18vw; */
      background-color: var(--line-about-us);
      color: white;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      height: 44px;
      text-transform: uppercase;
      white-space: nowrap;
}

.wrap-btn-form button:hover {
      background-color: var(--boder-bottom-nemu);
}

.wrap-btn-form button:active {
      background-color: var(--bg-language-active);
      transform: scale(0.95);
}

.notification {
      color: var(--background-metrict);
      display: flex;
      justify-content: center;
      align-items: center;
}

.mes-err {
      color: var(--mes-err);
      font-size: 16px;
      font-family: Open Sans;
      font-weight: 400;
      text-align: center;
}

.mes-suc {
      color: var(--mes-suc);
      font-size: 16px;
      font-family: Open Sans;
      font-size: 400;
      text-align: center;
}

/* form button :disabled {
      background-color: var(--line-about-us);
      color: white;
} */
/* end body */

/* footer */
.footer-des {
      padding: 8px 112px 80px 112px;
      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: 100%;
      height: 20vw;
      border: none;
}

.wrap-acess {
      display: flex;
      flex-direction: column;
      gap: 5px;
      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;
}

.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-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: 323px) {
      .form-group {
            display: flex;
            flex-direction: column;
      }
}

@media (min-width: 800px) {

      .footer-mbi {
            display: none;
      }

      /* .form-header h1 {
            width: 60vw;
      } */

      .wrap-form {
            flex-direction: row;
      }
}

@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 (max-width: 799px) {
      
      .footer-mbi {
            display: flex;
      }

      /* .form-header h1 {
            width: 100vw;
      } */

      .wrap-form {
            flex-direction: column-reverse;
      }

      .wrap-btn-form button {
            width: 100%;
      }
}

@media (max-width: 900px) {

      .connect-container {
            padding: 20px;
      }
}

@media (max-width: 1100px) {
      .wrap-form {
            gap: 32px;
      }
}