: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: -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-agriculture-white {
      background-image: url(/assets/images/icons/agriculture-white.svg);
      display: block;
      width: 42px;
      height: 34px;
}

.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-house2 {
      background-image: url(../images/icons/house-2.svg);
      display: block;
      width: 42.02px;
      height: 32px;
}

.icon-house3 {
      background-image: url(../images/icons/house-3.svg);
      display: block;
      width: 48px;
      height: 48px;
}

.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 */
.services-container {
      display: flex;
      flex-direction: column;
      padding: 112px;
}

.wrap-service {
      display: flex;
      flex-direction: column;
      gap: 32px; 
}

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

.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);
}

.wrap-service h1,
.service-description h2 {
      font-family: Playfair Display;
      font-weight: 400;
      font-size: clamp(36px, 4vw, 60px);
      line-height: clamp(48px, 4vw, 72px);
      text-align: left;
      margin: 0;
      color: var(--background-metrict);
}

.wrap-service-description {
      display: flex;
}

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

.wrap-image img {
      max-width: 400px;
      width: 400px;
      height: 500px;
}

.service-description {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 32px;
}

.service-description 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);
}

.wrap-service-item {
      padding-top: 100px;
      display: flex;
      flex-direction: column;
      gap: 32px;
}

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

.service-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 24px;
      padding: 32px;
      border: 1px solid var(--boder-service-hover)
}

.service-item:hover {
      background-color: var(--bg-service-hover);
      border: 1px solid var(--boder-service-hover);
}

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

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

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

.image-service-container {
      object-fit: cover;
      width: 100vw;
      margin-bottom: 150px;
}

.image-service-container img {
      width: 100%;
      height: 506px;
      /* object-fit: inherit; */
}

.service-card {
      display: flex;
      gap: 32px;
      /* padding: 80px 112px; */
      padding: 6vw;
}

.service-image {
      width: 40%;
      object-fit: cover;
}

.service-image img {
      width: 100%;
      /* height: 476px; */
      /* object-fit: inherit; */
}

.bg-brown {
      background-color: var(--boder-bottom-nemu);
}

.bg-white {
      background-color: var(--text-btn);
}

.wrap-content-card {
      width: 60%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      gap: 20px;
      padding: 3vw;
}

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

.card-content h3 {
      font-family: Open Sans;
      font-size: 24px;
      font-weight: 400;
      line-height: 32px;
      text-align: left;
      margin: 0;
}

.card-content span {
      font-family: Open Sans;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      text-align: left;
}

.text-white {
      color: var(--text-btn) !important;
}

.text-black {
      color: var(--color-nav-text) !important;
}

.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);
}

.card-body {
      color: #333;
}

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

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

/* footer */
.footer-des {
      /* padding: 8px 112px 80px 112px; */
      padding: 5vw 6vw;
      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 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
}

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

.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 (min-width: 800px) {

      .footer-des {
            display: flex;
      }

      .footer-mbi {
            display: none;
      }

      .wrap-service h1 {
            display: none;
      }

}

@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) {

      .wrap-service-description {
            flex-direction: column-reverse;
      }

      .wrap-service h1 {
            display: block;
      }

      .service-description h2 {
            display: none;
      }

      .services-container {
            padding: 48px 20px;
      }

}

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

      .footer-mbi {
            display: flex;
      }

      .row-services {
            flex-direction: column;
      }
      
      .wrap-content-card,
      .service-image {
            width: 100%;
      }

      .service-card {
            flex-direction: column;
            /* padding: 80px 122px; */
      }

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

}

@media (max-width: 700px) {
      .image-service-container {
            display: none;
      }
}