: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;
      --color-price: #D40000;
      --bg-ellip: #76767F;
      --color-type: #4D4D5C;
      --color-trafic: #76767f;

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


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

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

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

.icon-get-in-touch {
      background-image: url(/assets/images/icons/get_in_touch.svg);
      /* display: block; */
      width: 115px;
      height: 120px;
      position: absolute;
      top: -27%;
      right: 31%;
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: center;
}

.icon-inteo {
      background-image: url(/assets/images/icons/inteo.svg);
      display: block;
      width: 24px;
      height: 26px;
      z-index: 2;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

.icon-location {
      background-image: url(/assets/images/icons/icon-location.svg);
      display: block;
      width: 10px;
      height: 13px;
}

.icon-train {
      background-image: url(/assets/images/icons/icon-train.svg);
      display: block;
      width: 12px;
      height: 13px;
}

.icon-right {
      background-image: url(/assets/images/icons/icon-right.svg);
      display: block;
      width: 12px;
      height: 19px;
}

.icon-left {
      background-image: url(/assets/images/icons/icon-left.svg);
      display: block;
      width: 10px;
      height: 18px;
}
/* end icon */

/* header desktop */
body {
      overflow-x: hidden;
}

/* .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;
      position: relative;
      z-index: 999;
}

.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 */
.creative {
      width: 100vw;
      height: 80vh;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 8px;
      padding: 0;
      margin: 0;
      /* pointer-events: none; */
      position: relative;
}

.creative::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1;
}

.creative video {
      min-width: 100%;
      min-height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      padding: 0;
      margin: 0;
      object-fit: cover;
      pointer-events: none; 
}

.creative h1 {
      position: relative;
      z-index: 2;
      font-family: Playfair Display;
      font-weight: 500;
      font-size: clamp(32px, 4vw, 56px);
      line-height: clamp(32px, 6vw, 96px);
      letter-spacing: -0.025em;
      text-align: center;
      margin: 0;
      color: var(--text-btn);
}

.creative span {
      position: relative;
      z-index: 2;
      color: var(--text-btn);
      font-family: Open Sans;
      font-weight: 400;
      font-size: clamp(18px, 1vw, 20px);
      line-height: 32px;
      text-align: center;
}

.creative a {
      z-index: 2;
      text-decoration: none;
      border: none;
      width: 150px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: var(--boder-bottom-nemu);
      color: var(--text-btn);
      cursor: pointer;
      border-radius: 8px;
      margin-top: 1rem;
      font-family: Open Sans;
      font-weight: 400;
      font-size: clamp(18px, 1vw, 20px);
      line-height: 32px;
}

.creative a:hover {
      background-color: transparent;
      border: 2px solid var(--boder-bottom-nemu);
}

.award-container {
      width: 100vw;
      padding: 24px 20px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      background-color: var(--background-metrict);
}

.award-item {
      display: flex;
      gap: 16px;
}

.metrict-number {
      display: flex;
      align-items: center;
      font-family: emoji;
      font-weight: 400;
      font-size: 40px;
      line-height: 72px;
      color: var(--metrict-color-text);
}

.metrict-text {
      display: flex;
      align-items: center;
      font-family: Outfit;
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      letter-spacing: 0.05em;
      color: var(--color-metrict);
      text-transform: uppercase;
}

.about-container {
      width: 100vw;
      padding: 5vw;
      display: flex;
      overflow: hidden;
      /* flex-direction: row; */
      /* gap: 20px; */
}

.about-content {
      display: flex;
      flex-direction: column;
      gap: 24px;
      width: 50vw;
      padding-right: 10px;
}

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

.wrap-about-us span {
      text-wrap: nowrap;
      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);
}

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

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

.about-creative {
      width: 50vw;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-left: 10px;
}

.about-img {
      display: flex;
      flex-direction: column;
      gap: 10px;
      position: relative;
}

.img-about {
      width: 100%;
      height: auto;
      object-fit: scale-down;
}

.about-line {
      /* margin-top: 10px; */
      width: 100%;
      height: 14px;
      background-color: var(--boder-bottom-nemu);
}

.carousel-inner {
      padding: 3vw 3vw 1vw 3vw;
}

.wrap-card {
      display: flex;
      flex-direction: column;
      padding: 3vw 3vw 1vw 3vw;
}

.img-card {
      display: flex;
      justify-content: center;
      align-items: center;
      /* width: 100%;
      height: 400px; */
}

.img-card img {
      max-width: 400px;
      max-height: 400px;
      width: 400px;
      height: auto;
      object-fit: contain;
      border-radius: 8px 8px 0 0;
}

.wrap-content-card {
      padding: 1rem;
      border-radius: 12px;
      box-shadow: 0 2px 10px #4a4a4a33;
}

.header-content-card {
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding-bottom: 1vw;
      border-bottom: 1px solid var(--color-metrict);
}

.header-content-card h6 {
      margin: 0;
      font-size: 19px;
      font-weight: 700;
      font-family: var(--open-sans);
}

.header-content-card span {
      font-size: 17px;
      font-family: var(--open-sans);
      font-weight: 400;
}

.card-content {
      padding-top: 1vw;
      font-size: 17px;
      font-weight: 400;
      font-family: var(--open-sans);
}

/* .group-btn-agent {
      width: 100vw;
      display: flex;
      justify-content: space-between;
      position: absolute;
      top: 50%;
} */

.display-content {
      display: block !important;
}

.btn-prev,
.btn-next {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      height: 50px;
      position: absolute;
      top: 350px;
      border-radius: 50%;
      background-color: var(--metrict-color-text);
}

.btn-prev {
      left: 2vw;
}

.btn-next {
      right: 2vw;
}

.quote-container {
      padding: 0 6vw 2vw 6vw;
      flex-direction: column;
      gap: 80px;
}

.quote-content {
      display: flex;
      flex-direction: column;
      gap: 24px;
      align-items: center;
}

.quote-content span {
      text-align: center;
}

.wrap-icon-quote {
      display: flex;
      justify-content: center;
}

.services-container {
      width: 100vw;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding: 48px 20px;
      gap: 40px;
}

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

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

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

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

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

.wrap-btn-service {
      display: flex;
      justify-content: center;
      gap: 48px;
}


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

.col-carousel {
      display: flex;
}

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

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

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

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

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

.find-container {
      display: flex;
      gap: 32px;
      padding: 6vw;
}

.find-room-left {
      display: flex;
      flex-direction: column;
      gap: 96px;
}

.find-room-content {
      display: flex;
      flex-direction: column;
      gap: 24px;
}

.find-room-content h1 {
      font-family: Playfair Display;
      font-size: clamp(36px, 4vw, 60px);
      line-height: clamp(48px, 4vw, 72px);
      font-weight: 400;
      letter-spacing: -0.025em;
      text-align: left;
      margin: 0;
      color: var(--background-metrict);
}

.find-project {
      display: flex;
      flex-direction: column;
      gap: 40px;
}

.project-item {
      display: flex;
      flex-direction: column;
      gap: 24px;
      width: 100;
      height: auto;
      overflow: hidden;
}

.wrap-find-image {
      overflow: hidden;
}

.wrap-find-image img {
      width: 100%;
      height: auto;
      object-fit: cover;
}

.zoom-in-hover {
      transition: transform 0.3s ease;
}

.zoom-in-hover:hover {
      transform: scale(1.1);
}

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

.project-content h3 {
      font-family: Playfair Display;
      font-weight: 400;
      /* font-size: 36px; */
      font-size: clamp(24px, 2vw, 36px);
      line-height: clamp(24px, 0vw, 48px);
      text-align: left;
      margin: 0;
      color: var(--background-metrict);
}

.project-content span {
      font-family: Open Sans;
      font-weight: 400;
      font-size: clamp(14px, 2vw, 18px);
      line-height: clamp(24px, 3vw, 32px);
      text-align: left;
      letter-spacing: 1px;
      color: var(--color-nav-text);
}

.btn-find-room {
      justify-content: center;
      padding: 16px 24px;
      align-items: center;
      gap: 4px;
      background-color: var(--boder-bottom-nemu);
      border: none;
      color: var(--text-btn);
      width: 166px;
      height: 56px;
      font-family: Open Sans;
      font-size: 12px;
      font-weight: 600;
      line-height: 24px;
      text-align: center;
      text-decoration: none;
}

.find-container a:hover {
      background-color: var(--line-about-us);
}

.coming-soon {
      width: 100%;
}

/* .coming-soon a {
      width: 100%;
} */

.coming-soon a img {
      width: 100%;
      object-fit: cover;
}

/* Categories */
.categories-container {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      overflow: hidden;
      width: 100%;
}

.categories-container h2 {
      margin: 0;
      font-family: Playfair Display;
      font-size: clamp(24px, 4vw, 40px);
      font-weight: 700;
      line-height: 41px;
      text-align: center;
      color: var(--text-title-about);
}

.wrap-categories {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      margin-bottom: 3rem;
}

.category-item {
      display: flex;
      gap: 1rem;
      align-items: center;
      border-radius: 8px;
      border: 1px solid var(--color-placeholder);
      box-sizing: border-box;
      text-decoration: none;
}

.category-item:hover {
      background-color: var(--text-btn) !important;
      text-decoration: none;
}

.category-img {
      width: 90px;
      height: auto;
}

.category-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 8px 0 0 8px;
}

.category-content {
      display: flex;
      flex-direction: column;
      justify-content: start;
      /* gap: 0.3rem; */
}

.category-content h6 {
      margin: 0;
      font-family: Playfair Display;
      text-wrap: nowrap;
      font-size: clamp(12px, 1.5vw, 24px);
      font-weight: 700;
      line-height: clamp(10px, 2vw, 29px);
      text-align: left;
      color: var(--text-title-about);
}

.category-content span {
      text-wrap: nowrap;
      font-size: clamp(5px, 2vw, 14px);
      font-weight: 400;
      line-height: clamp(10px, 2vw, 29px);
      text-align: left;
      color: var(--text-title-about);
}

.carousel-container {
      overflow: hidden;
      position: relative;
      width: 100%;
}

.btn-prev-list-card,
.btn-next-list-card {
      position: absolute;
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      top: 50%;
      border: 1px solid var(--color-placeholder);
      background-color: var(--text-btn);
}

.btn-prev-list-card {
      left: 0;
}

.btn-next-list-card {
      right: 0;
}

.wrap-carousel {
      display: flex;
      gap: 0.7rem;
      white-space: nowrap;
      overflow-x: auto;
      padding: 1rem 0;
}

.wrap-carousel::-webkit-scrollbar {
      display: none;
}

.card-item {
      width: 306px;
      height: 372px;
      padding: 0.7rem;
      background-color: var(--text-btn);
      border-radius: 14px;
      border: 1px solid var(--color-placeholder);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-item:hover {
	transform: scale(1.0);
	box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.25);
}

.content-card-item {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
}

.header-card {
      position: relative;
      /* width: 284px; */
      height: 250px;
      display: flex;
      justify-content: center;
      align-items: center;
}

.carousel-card-custom {
      height: 250px;
      width: 100%;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
}

.carousel-inner {
      padding: 0;
}

.carousel-container .carousel-item img {
      max-width: 284px;
      width: 284px;
      height: 250px;
      object-fit: cover;
      border-radius: 14px;
}

.control-prev-custom,
.control-next-custom {
      position: absolute;
      top: 50%;
      z-index: 1;
      display: none;
      align-items: center;
      justify-content: center;
      width: 15%;
      padding: 0;
      text-align: center;
      background: 0 0;
      border: 0;
      opacity: .5;
      width: 30px;
      height: 30px;
      background-color: var(--text-btn);
      border-radius: 50%;
      cursor: pointer;
}

.control-prev-custom {
      left: 0;
}

.control-next-custom {
      right: 0;
}

.carousel-card-custom:hover .control-next-custom, 
.carousel-card-custom:hover .control-prev-custom{
      display: flex;
}

.carousel-card-custom .carousel-indicators {
      margin: 0;
      bottom: 5px;
      gap: 4px;
}

.carousel-card-custom .carousel-indicators button {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin: 0;
      border: none;
      cursor: pointer;
}

.carousel-card-custom .carousel-indicators button.active {
      background-color: var(--color-price) !important; 
}

.carousel-card-custom .carousel-indicators button:hover {
      background-color: var(--color-price) !important;
}

.card-info {
      width: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      cursor: pointer;
}

.price-card {
      display: flex;
      gap: 0.5rem;
      align-items: center;
      font-size: clamp(12px, 2vw, 17px);
      font-weight: 700;
      line-height: clamp(15px, 2vw, 24px);
      text-align: left;
}

.color-price {
      color: var(--color-price);
}

.ellip {
      width: 4px;
      height: 4px;
      background-color: var(--bg-ellip);
      border-radius: 50%;
}

.color-type {
      color: var(--color-type);
}

.address-card,
.train-card {
      display: flex;
      /* align-items: center; */
      gap: 3px;
      color: var(--color-trafic);
      font-size: 12px;
      font-weight: 400;
      line-height: 12px;
      text-align: left;
      text-wrap: wrap;
}
/* End Categories */

.review-container {
      padding: 6vw;
      display: flex;
      flex-direction: column;
      gap: 64px;
}

.title-review {
      display: flex;
      flex-direction: column;
      gap: 24px;
}

.wrap-title-review {
      /* width: 69%; */
      display: flex;
      flex-direction: column;
      gap: 0px;
}

.wrap-title-review h1 {
      font-family: Playfair Display;
      font-size: clamp(36px, 4vw, 60px);
      line-height: clamp(48px, 5vw, 72px);
      font-weight: 400;
      letter-spacing: -0.025em;
      margin: 0;
      color: var(--background-metrict);
}

.wrap-review-des {
      /* display: flex; */
      flex-direction: column;
      gap: 32px;
}

.wrap-review-mbi {
      /* display: flex; */
      flex-direction: column;
      gap: 32px;
}

#indicatorDefault,
.carousel-control-prev,
.carousel-control-next {
      display: none !important;
}

.text-right {
      margin-left: 12%;
}

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

.header-review {
      display: flex;
      gap: 12px;
      height: 32px;
      align-items: center;
}

.rating-star {
      display: flex;
      gap: 8px;
      align-items: center;
}

.logo-gg {
      width: 74px;
      height: 24px;
}

.content-review {
      font-family: Open Sans;
      font-size: 14px;
      font-weight: 400;
      line-height: 32px;
      text-align: left;
      color: var(--color-nav-text);
      letter-spacing: 1px;
}

.footer-review {
      display: flex;
      justify-content: space-between;
      align-items: center;
      /* gap: 16px; */
}

.user-view {
      display: flex;
      gap: 12px;
      align-items: center;
}

.user-view span {
      font-family: Open Sans;
      font-size: 12px;
      font-weight: 600;
      line-height: 24px;
      text-align: left;
      color: var(--color-nav-text);
}

.avt-review {
      width: 40px;
      height: 40px;
}

.time-review {
      font-family: Open Sans;
      font-size: 12px;
      font-weight: 400;
      line-height: 24px;
      text-align: left;
      color: var(--color-nav-text);
}

.btn-slide {
      display: flex;
      gap: 48px;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
}

.wrap-review-mbi .carousel,
.wrap-review-des .carousel,
.wrap-services-des .carousel {
      display: flex;
      flex-direction: column;
      gap: 32px;
}

.wrap-btn-service .carousel-indicators {
      display: flex;
      gap: 16px;
      justify-content: space-between;
      align-items: center;
      padding: 0;
      margin: 0;
      position: static;
}

.wrap-btn-service .carousel-indicators button {
      width: 35px !important;
      height: 4px !important;
      border-radius: 37px !important;
      background-color: #DEDFE0 !important;
      transition: width 0.3s ease, background-color 0.3s ease;
      border: none;
}

.wrap-btn-service .carousel-indicators button.active {
      width: 100px !important;
      background-color: var(--boder-bottom-nemu) !important;
}

.wrap-btn-service .carousel-indicators button:hover {
      background-color: var(--boder-bottom-nemu) !important;
}
/* end body */

/* footer */
.footer-des {
      padding: 8px 6vw 3vw 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-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) {

      .creative span {
            width: 52vw;
      }

      .quote-container {
            display: flex;
      }

      .award-container {
            padding: 28px 112px;
      }

      .services-container {
            padding: 6vw;
      }

      .service-content h1 {
            width: 60vw;
      }

      #contact-des {
            display: flex;
      }

      #contact-mbi {
            display: none;
      }

      .footer-des {
            display: flex;
      }

      .footer-mbi {
            display: none;
      }

      .icon-get-in-touch {
            top: -67px;
            right: 0px;
      }
}

@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) {
      .about-container {
            flex-direction: column;
            gap: 80px;
      }

      .about-content {
            width: 100%;
      }

      .about-creative {
            width: 100%;
      }

      .quote-container {
            display: none;
      }

      .award-container {
            flex-direction: column;
            gap: 24px;
      }

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

      #contact-des {
            display: none;
      }

      #contact-mbi {
            display: flex;
      }

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

      .find-room-left {
            gap: 48px;
      }

      .wrap-title-review h1 {
            font-size: 36px !important;
            line-height: 48px;
            width: 100%;
      }

      .icon-get-in-touch {
            top: -67px;
            right: 38%;
      }

}

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

      .footer-mbi {
            display: flex;
      }

}

@media (max-width: 1049px) {

      .award-container {
            padding: 24px 20px;
      }

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

      .service-content h1 {
            width: 90%;
      }
}

@media (min-width: 1100px) {

      .wrap-services-mbi {
            display: none;
      }

      .wrap-services-des {
            display: flex;
      }
}

@media (max-width: 1099px) {

      .wrap-services-des {
            display: none;
      }

      .wrap-services-mbi {
            display: flex;
      }
}

@media (min-width: 920px) {
      .wrap-review-des {
            display: flex;
      }

      .wrap-review-mbi {
            display: none;
      }
}

@media (max-width: 919px) {
      .wrap-review-des {
            display: none;
      }

      .wrap-review-mbi {
            display: flex;
      }
}

@media (max-width: 420px) {
      .dot-item {
            display: none;
      }

      .btn-slide {
            justify-content: space-around;
      }
}

/* @media (max-width: 540px) {
      .creative {
            background-image: url(../images/bg-img-mbi.png);
            background-size: cover;
      }
} */

@media (max-width: 900px) {
      .wrap-categories {
            grid-template-columns: repeat(2, 1fr);
      }
}

@media (max-width: 800px) {
      .wrap-categories {
            grid-template-columns: 1fr;
      }
}