/* css reset*/
:root {
  --color-primary: #c22033;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-10: #f2f2f2;
  --color-gray-20: #c2c2c2;
  --color-gray-50: #7f7f7f;
  --color-stroke-2: #ececec;
  --color-gray: #808080;
  --color-black-50: rgba(0, 0, 0, 0.5);
  --color-grey: #777777;
  --color-header-hotels: #e6e6e6;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font-family: "SFU Futura";
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

input,
select,
textarea {
  background-color: transparent;
  outline: none;
}

button {
  cursor: pointer;
  background-color: transparent;
  outline: none;
  border: 0;
}
p {
  margin: 0;
}
a {
  text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin: 0;
}
body {
  min-height: 100vh;
  background-color: var(--color-gray-10);
  scroll-behavior: smooth;
  overflow-x: hidden;
}
main {
  position: relative;
  z-index: 5;
  background-color: var(--color-gray-10);
}
ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}
section {
  background-color: var(--color-gray-10);
}
.spacing,
.spacing-120 {
  background-color: var(--color-gray-10);
}
.error {
  color: red;
}
/* end css reset */
/* custom scroll bar */

/* ::-webkit-scrollbar {
  width: 10px; 
}


::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: var(--color-primary);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
} */

/* end custom scroll bar */
/* css classname */
.h0-bold {
  font-size: 48px;
  line-height: 56px;
  font-weight: 900;
  letter-spacing: 0.04rem;
}
.h0-font {
  font-size: 48px;
  line-height: 56px;
  font-weight: 400;
  letter-spacing: 0.04rem;
}
.h1-bold {
  font-size: 36px;
  line-height: 48px;
  font-weight: 900;
  letter-spacing: 0.04rem;
}

.h1-light {
  font-size: 36px;
  line-height: 48px;
  font-weight: 300;
  letter-spacing: 0.04rem;
}

.h2-font {
  font-size: 36px;
  line-height: 54px;
  font-weight: 900;
  letter-spacing: 0.04rem;
}

.b1-font {
  font-size: 16px;
  line-height: 26px;
  font-weight: normal;
  letter-spacing: 0.04rem;
}
.b1-bold {
  font-size: 16px;
  line-height: 26px;
  font-weight: 900;
  letter-spacing: 0.04rem;
}

.b2-font {
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
  letter-spacing: 0.04rem;
}
.b2-r {
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0.04rem;
}
.b3-font {
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
  letter-spacing: 0.04rem;
}

.b2-italic {
  font-size: 13px;
  line-height: 24px;
  font-weight: 300;
  letter-spacing: 0.04rem;
  /* font-style: italic; */
}

.b2-bold {
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.04rem;
  font-weight: 900;
}

.b3-bold {
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
  letter-spacing: 0.04rem;
}

.h3-italic {
  font-size: 24px;
  line-height: 40px;
  font-weight: 900;
  letter-spacing: 0.04rem;
  /* font-style: italic; */
}

.h3-bold {
  font-weight: 900;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: 0.03rem;
  letter-spacing: 0.04rem;
}

.h4-font {
  font-size: 20px;
  line-height: 28px;
  font-weight: 900;
  letter-spacing: 0.04rem;
}
.h5-bold {
  font-size: 20px;
  line-height: 32px;
  font-weight: 900;
  letter-spacing: 0.04rem;
}
.h5-font {
  font-size: 20px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: 0.04rem;
}

.color-black {
  color: #000000;
}

.color-white {
  color: #ffffff;
}

.color-gray-10 {
  color: var(--color-gray-10);
}

.color-gray-50 {
  color: var(--color-gray-50);
}
.color-gray {
  color: var(--color-gray);
}

.color-primary {
  color: var(--color-primary);
}
.color-black-50 {
  color: var(--color-black-50);
}
.color-gray-20 {
  color: var(--color-gray-20);
}
.color-grey {
  color: var(--color-grey);
}

.spacing-75 {
  height: 75px;
  background-color: var(--color-gray-10);
}
.spacing-80 {
  height: 80px;
  background-color: var(--color-gray-10);
}
.spacing-64 {
  height: 64px;
  background-color: var(--color-gray-10);
}

.spacing-120 {
  height: 120px;
  background-color: var(--color-gray-10);
}

.spacing-40 {
  height: 40px;
  background-color: var(--color-gray-10);
}

.spacing {
  height: 120px;
  background-color: var(--color-gray-10);
}

.spacing-200 {
  height: 200px;
  background-color: var(--color-gray-10);
}
.transition-item {
  transition: all 0.3s ease;
}

/* end css classname */
/* custom style button */
.cta-share {
  position: fixed;
  left: 40px;
  bottom: 40px;
  z-index: 99;
  transition: all 0.4s;
}
.cta-share .share-icon a {
  width: 44px;
  height: 44px;
  background-color: var(--color-white);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}
.cta-share .share-icon a:hover {
  background-color: var(--color-black);
}
.cta-share .share-icon a:hover svg path {
  fill: var(--color-white);
}
.cta-share.hide {
  left: -50px;
}
.cta-mess {
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 99;
  transition: all 0.7s ease;
  visibility: visible;
  opacity: 1;
}

.cta-mess .phone-icon {
  margin-bottom: 16px;
  position: relative;
}
.cta-mess .phone-icon .img-hover {
  opacity: 0;
  visibility: hidden;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}
.cta-mess .phone-icon a:hover svg {
  opacity: 0;
  visibility: hidden;
}
.cta-mess .phone-icon a:hover svg.img-hover {
  opacity: 1;
  visibility: visible;
}
.cta-mess .mess-icon a,
.cta-mess .phone-icon a {
  width: 44px;
  height: 44px;
  background-color: #e5e5e5;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  overflow: hidden;
}
.cta-mess .phone-icon a {
  background-color: var(--color-black);
}
.cta-mess .phone-icon a:hover {
  background-color: #e5e5e5;
}
.cta-mess .mess-icon a:hover {
  background-color: var(--color-black);
}
.cta-mess .mess-icon svg path,
.cta-mess .phone-icon svg path {
  transition: all 0.3s ease;
}
.cta-mess .mess-icon:hover svg path {
  fill: var(--color-white);
}
.cta-mess .phone-icon:hover svg path {
  fill: var(--color-primary);
}
.btn-custom {
  display: block;
  width: 160px;
  height: 50px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  text-transform: uppercase;
  line-height: 40px;
  text-align: center;
  border-radius: 0;
}

.btn-custom::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-primary);
  clip-path: polygon(14% 0, 40% 0, 27% 100%, 0% 100%);
  transition: all 0.5s ease-in-out;
}

.btn-custom:hover::before {
  clip-path: polygon(14% 0, 100% 0, 87% 100%, 0% 100%);
  transition: all 0.5s ease-in-out;
}

.btn-custom .label {
  display: block;
  position: absolute;
  top: 0;
  right: 20%;
  transition: all 0.5s ease-in-out;
  color: var(--color-black);
  font-size: 0.8rem;
  font-weight: 900;
  height: 100%;
  line-height: 48px;
}

.btn-custom:hover .label {
  color: var(--color-white);
  right: 50px;
  transition: all 0.5s ease-in-out;
}

.custom__btn {
  position: relative;
  display: inline-block;
  padding: 9px 34px;
  z-index: 0;
}
.custom__btn.btn-join {
  padding-top: 7px;
}
.custom__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-primary);
  clip-path: polygon(10% 0, 18% 0, 8% 100%, 0% 100%);
  z-index: -1;
  transition: all 0.3s ease-in-out;
}
.custom__btn.tag:hover::before {
  clip-path: polygon(8% 0, 16% 0, 8% 100%, 0% 100%) !important;
}
.custom__btn.tag:hover span {
  color: var(--color-primary) !important;
}
.custom__btn.book-detail::before {
  z-index: 1;
}
.custom__btn.book-detail span {
  position: relative;
  z-index: 2;
}
.custom__btn.long-medium::before {
  clip-path: polygon(8% 0, 16% 0, 8% 100%, 0% 100%);
}
.custom__btn.long-medium:hover::before {
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0% 100%);
}
.custom__btn.long-text::before {
  clip-path: polygon(6% 0, 11% 0, 5% 100%, 0% 100%);
}
.custom__btn.long-text:hover::before {
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0% 100%);
}
.custom__btn:hover::before {
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
}
.custom__btn span {
  transition: all 0.3s ease;
  letter-spacing: 0.05rem;
}
.custom__btn:hover span {
  color: var(--color-white);
  transition-delay: 0.15s;
}
.deals__view {
  margin-top: 56px;
}

/* end custom style button */
/* start css feedback */
.feedback {
  display: none !important;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 999;
  background-color: var(--color-gray-50);
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 20px 0;
  padding: 27px 8px 12px;
}

.feedback__text {
  display: inline-block;
  transform: rotate(180deg);
  writing-mode: vertical-lr;
}

/* end css feedback */
/* start css header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  transition: all 0.4s;
}
.header-hotels__details {
  background-color: var(--color-header-hotels);
  padding: 21px 40px;
}
.header__booking {
  background-color: var(--color-white);
}
.header__booking::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background-color: #e6e6e6;
}
.header__booking .banner-hero__form {
  padding: 12px 40px;
}
.header__top-bar {
  background-color: var(--color-black);
  position: relative;
  padding: 0 40px;
  height: 60px;
}

.header-top__container {
  height: 100%;
}
.header-hotels__details .hotels__details--right {
  gap: 24px;
}
.header-hotels__details .hotels__details--right .phone,
.header-hotels__details .hotels__details--right .map {
  gap: 8px;
}
.header-hotels__details .views:hover {
  cursor: pointer;
}
.header-hotels__details .views a {
  position: relative;
  transition: all 0.3s;
  pointer-events: none;
}
.header-hotels__details .hotels__details--right .phone a::before,
.header-hotels__details .hotels__details--right .map a::before,
.header-hotels__details .views a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
  bottom: -4px;
  left: 0;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.header-hotels__details .views:hover a::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.header-hotels__details .views:hover a {
  color: var(--color-primary) !important;
  cursor: pointer;
}
.header-hotels__details .hotels__details--right .phone a,
.header-hotels__details .hotels__details--right .map a {
  transition: all 0.3s ease;
  position: relative;
}
.header-hotels__details .hotels__details--right .phone:hover a::before,
.header-hotels__details .hotels__details--right .map:hover a::before,
.header-hotels__details .hotels__details--right .phone a:hover::before,
.header-hotels__details .hotels__details--right .map a:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.header-hotels__details .hotels__details--right .phone:hover a,
.header-hotels__details .hotels__details--right .map:hover a {
  color: var(--color-primary);
}
.header-hotels__details .hotels__details--right .phone svg path,
.header-hotels__details .hotels__details--right .map svg path {
  transition: all 0.3s ease;
}
.header-hotels__details .hotels__details--right .phone:hover svg path,
.header-hotels__details .hotels__details--right .map:hover svg path {
  color: var(--color-primary);
}
.header-hotels__details .hotels__details--right .map:hover svg path {
  fill: var(--color-primary);
}
.hotels__details--left .group-left {
  gap: 16px;
}
.hotels__details--left .views a:hover {
  color: var(--color-black);
}

.header__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.header__group-btn {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  gap: 0 42px;
}

.header__btn-language {
  position: relative;
}

.language__head {
  display: flex;
  align-items: center;
  gap: 0 12px;
}

.language__head:hover {
  cursor: pointer;
}

.language__body {
  position: absolute;
  transition: all 0.3s ease-in-out;
  opacity: 0;
  visibility: hidden;
}

.language__body.show {
  opacity: 1;
  visibility: visible;
}

.language__body ul {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0;
}

.language__body ul li a {
  text-decoration: none;
}

.header__main {
  padding: 0px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-white);
  position: relative;
  height: 60px;
}

.header__main::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background-color: #e6e6e6;
}

.page-details-hotels .header__main::before {
  display: none;
}

.header__nav {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.header__burgers {
  position: relative;
  width: 26px;
  height: 14px;
  padding: 30px;
  transform: translateX(-18px);
}

.header__nav nav ul {
  list-style-type: none;
  padding-left: 0;
  display: flex;
  align-items: center;
  gap: 0 32px;
  margin-bottom: 0;
}

.header__nav nav ul li a {
  text-decoration: none;
  letter-spacing: 0.65px;
  position: relative;
  transition: all 0.3s ease-in-out;

  display: inline-block;
  min-width: max-content;
  white-space: nowrap;
}

.header__nav nav ul li a:hover,
.header__nav nav ul li a.active {
  color: var(--color-primary);
  /* background-position: 0%; */
}
.header__btn-sign-in {
  position: relative;
  text-transform: uppercase;
}
.header__btn-sign-in::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--color-white);
  bottom: -4px;
  left: 0;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.header__btn-sign-in:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.header__btn-sign-in:hover {
  color: var(--color-white);
}

.header__nav nav ul li a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
  bottom: -4px;
  left: 0;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.header__nav nav ul li a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 20px;
  bottom: -20px;
  left: 0;
}

.header__nav nav ul li a:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.header__nav nav ul li a.active::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.button__book {
  display: inline-block;
  text-decoration: none;
  background-color: var(--color-primary);
  padding: 20px 0 19px;
  width: 165px;
  height: 60px;
  clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
  text-align: center;
  transition: all 0.3s ease-in-out;
}

.button__book:hover {
  color: var(--color-white);
  background-color: var(--color-black);
}

.bar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  cursor: pointer;
}

.bar span {
  display: block;
  width: 100%;
  border-radius: 3px;
  height: 2px;
  background-color: var(--color-black);
  transition: all 0.3s;
  position: relative;
}

.bar span + span {
  margin-top: 4px;
}

.bar.active span:nth-child(1) {
  animation: ease 1s top forwards;
}

.bar.not-active span:nth-child(1) {
  animation: ease 1s top-2 forwards;
}

.bar.active span:nth-child(2) {
  animation: ease 1s scaled forwards;
}

.bar.not-active span:nth-child(2) {
  animation: ease 1s scaled-2 forwards;
}

.bar.active span:nth-child(3) {
  animation: ease 1s bottom forwards;
}

.bar.not-active span:nth-child(3) {
  animation: ease 1s bottom-2 forwards;
}

@keyframes top {
  0% {
    top: 0;
    transform: rotate(0);
  }

  50% {
    top: 5px;
    transform: rotate(0);
  }

  100% {
    top: 6px;
    transform: rotate(135deg);
  }
}

@keyframes top-2 {
  0% {
    top: 5px;
    transform: rotate(45deg);
  }

  50% {
    top: 5px;
    transform: rotate(0deg);
  }

  100% {
    top: 0;
    transform: rotate(0deg);
  }
}

@keyframes bottom {
  0% {
    bottom: 0;
    transform: rotate(0);
  }

  50% {
    bottom: 5px;
    transform: rotate(0);
  }

  100% {
    bottom: 6px;
    transform: rotate(45deg);
  }
}

@keyframes bottom-2 {
  0% {
    bottom: 9px;
    transform: rotate(100deg);
  }

  50% {
    bottom: 9px;
    transform: rotate(0);
  }

  100% {
    bottom: 0;
    transform: rotate(0);
  }
}

@keyframes scaled {
  50% {
    transform: scale(0);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes scaled-2 {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

.header__sub-menu {
  position: fixed;
  top: 120px;
  height: calc(100vh - 120px);
  width: 100%;
  background-color: var(--color-gray-10);
  clip-path: polygon(100% 100%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  /* clip-path: circle(0 at 100% 0); */
  transition: all 0.8s ease 0.4s;
  z-index: 9;
}

.header__sub-menu.scrolled-down {
  height: calc(100dvh - 120px);
}

.header__sub-menu.scrolled-up {
  height: calc(100dvh - 60px);
}

.page-template-login .toolbar-mobile {
  display: none !important;
}

.header__sub-menu.active {
  clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 0 50%);
  /* clip-path: circle(141.2% at 100% 0); */
}

/* .header__sub-menu * {
  height: 100%;
} */

.menu-container {
  padding: 0;
  margin-left: 40px;
  list-style: none;
}

.menu-item {
  height: max-content;
  width: 100%;
}
.menu-item.active a::before {
  transform: scaleX(1);
}
.menu-container li a {
  display: inline-block;
  text-decoration: none;
  padding: 12px 0;
  transition: all 0.3s ease-in-out;
  position: relative;
}
.menu-container li.menu-item-has-children a::after {
  content: "";
  position: absolute;
  left: -15px;
  top: 0;
  background-image: url("../images/ic_arrow_black.svg");
  width: 4px;
  height: 10px;
  display: block;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s ease-in-out;
}
.menu-container li.menu-item-has-children a:hover::after,
.menu-container li.menu-item-has-children:hover a::after {
  background-image: url("../images/ic_arrow_red.svg");
}
.menu-item.active a::after,
.menu-item-has-children.active a::after {
  background-image: url("../images/ic_arrow_red.svg") !important;
}
.menu-container li a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: var(--color-primary);
  left: 0;
  bottom: 4px;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-container li a:hover::before,
.menu-container li:hover a::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.menu-container li a:hover,
.menu-container li:hover a {
  color: var(--color-primary);
}
.menu-container li:first-child a {
  padding-top: 0;
}
.header__sub-menu--content {
  position: relative;
  width: 100%;
  height: 100%;
}
.menu-item.active > a {
  color: var(--color-primary);
}
.menu-item-has-children > .sub-menu__container {
  display: block;
  position: absolute;
  width: calc(8 / 12 * 100%);
  height: 100%;
  top: 56px;
  right: 0;
  padding-right: 40px;
  opacity: 0;
  z-index: -1;
  visibility: hidden;
  transition: all 0.4s ease;
}
.header__sub-menu.active .menu-item-has-children.active > .sub-menu__container,
.menu-item-has-children:hover > .sub-menu__container {
  opacity: 1;
  z-index: 2;
  visibility: visible;
}
.sub-menu__location {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-black);
  font-weight: 900;
  letter-spacing: 0.03rem;
  text-transform: uppercase;
  transition: all 0.3s ease;
}
.sub-menu__item {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sub-menu__item a {
  padding: 0 !important;
}

.menu-item .sub-menu__grid .sub-menu__item a {
  color: var(--color-black);
}

.menu-item .sub-menu__grid .sub-menu__item:hover a {
  color: var(--color-primary);
}

.sub-menu__item .sub-menu__image a {
  width: 100%;
  height: 100%;
}

.sub-menu__item a::after,
.sub-menu__item a::before {
  display: none !important;
}

.sub-menu__item .sub-menu__image {
  width: 100%;
  height: 240px;
  overflow: hidden;
}
.sub-menu__item:hover .sub-menu__location {
  color: var(--color-primary);
}
.sub-menu__item:hover .sub-menu__image img {
  transform: scale(1.05);
}
.sub-menu__item .sub-menu__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.sub-menu__bottom ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  list-style-type: none;
  padding-left: 40px;
  padding-bottom: 40px;
  max-width: 370px;
  width: 100%;
}
.sub-menu__bottom ul li a {
  display: inline-block;
  text-decoration: none;
  position: relative;
  width: max-content;
}
.sub-menu__bottom ul li a:hover,
.sub-menu__bottom ul li.active a {
  color: var(--color-primary);
}
.sub-menu__bottom ul li a::before,
.sub-menu__bottom ul li.active a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
  left: 0;
  bottom: -4px;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sub-menu__bottom ul li a:hover::before,
.sub-menu__bottom ul li.active a::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}
/* .sub-menu__image {
  width: 100%;
  aspect-ratio: 427 / 280;
}

.sub-menu__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
} */

.header__sub-menu .box-img {
  aspect-ratio: 894 / 432;
  width: 100%;
  height: auto;
  padding-top: 56px;
  padding-right: 40px;
  opacity: 1 !important;
  visibility: visible !important;
  transition: all 0.4s ease;
}
.header__sub-menu .wrapper-box__img {
  position: relative;
}
.header__sub-menu .box-img.img-city {
  position: absolute;
  opacity: 1 !important;
  visibility: visible !important;
  top: 0;
  left: 0;
}
.header__sub-menu .box-img.img-city.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
}
.box-img.hidden {
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
}
.box-img img,
.menu-item-has-children > .sub-menu__container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sub-menu__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  height: 100%;
  overflow-y: auto;
  padding-bottom: 20%;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none;
  background-color: var(--color-gray-10);
}
.sub-menu__grid::-webkit-scrollbar {
  display: none;
}

.sub-menu__top {
  padding-top: 56px;
}
.sub-menu__left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

/* end css header */

/* start css hero banner */
.banner-hero__container {
  width: 100%;
  height: 100vh;
  position: relative;
}
.banner-hero__container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-container {
  height: 100vh;
  overflow: hidden;
}
.banner-hero__container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 41.06%, #000000 100%);
}
.banner-hero__container .img {
  width: 100%;
  height: 100%;
}
.banner-hero__container .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-banner {
  width: 100%;
  height: 100%;
}

.swiper-banner .slide-banner {
  height: 100%;
  width: 100%;
  position: relative;
}

.swiper-banner .slide-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-banner .swiper-slide {
  overflow: hidden;
}

.banner-hero__image {
  width: 100%;
  height: 100%;
  position: relative;
}

.banner-hero__image.no-content::before {
  display: none;
}

.banner-hero__image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 41.06%, #000000 100%);
}

.banner-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner-hero.no-booking .banner-hero__heading {
  bottom: 64px;
}
.banner-hero__form .date:hover {
  cursor: pointer;
}
.banner-hero__form .date input:hover {
  cursor: pointer;
}
.banner-hero__heading {
  position: absolute;
  bottom: 180px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 570px;
  width: 100%;
  z-index: 2;
}

.banner-hero__heading h1 {
  text-transform: uppercase;
  text-align: center;
}

.banner-hero__booking {
  position: absolute;
  bottom: 32px;
  left: 50%;
  background-color: var(--color-white);
  max-width: 1130px;
  width: 100%;
  z-index: 101;
  transform: translateX(-50%);
}

.banner-hero__form .date {
  width: 100%;
  padding-left: 16px;
}

.banner-hero__form form {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 160px;
  gap: 24px;
}

.banner-hero__form form input {
  border: none;
  width: 100%;
}
.banner-hero__form form .dropdown-custom__text {
  margin-bottom: 0;
}
.dropdown-custom__text span {
  display: none;
}
.banner-hero__form form input::placeholder {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-black);
  font-weight: 900;
}

/*  WebKit (Chrome, Safari, Edge) */
.banner-hero__form form input::-webkit-input-placeholder {
  font-size: 16px;
  line-height: 26px;
  color: var(--color-black);
  font-weight: 400;
}

/*  Firefox */
.banner-hero__form form input::-moz-placeholder {
  font-size: 16px;
  line-height: 26px;
  color: var(--color-black);
  font-weight: 400;
}

/*Internet Explorer 10+ */
.banner-hero__form form input:-ms-input-placeholder {
  font-size: 16px;
  line-height: 26px;
  color: var(--color-black);
  font-weight: 400;
}

/*  Microsoft Edge */
.banner-hero__form form input::-ms-input-placeholder {
  font-size: 16px;
  line-height: 26px;
  color: var(--color-black);
  font-weight: 400;
}
.banner-hero__form .date .line {
  width: 1px;
  height: 13px;
  background-color: #b3b3b3;
  transform: rotate(15deg) skewX(0deg);
}

.banner-hero__form form .line {
  width: 1px;
  height: 13px;
  background-color: #b3b3b3;
  transform: rotate(15deg) skewX(30deg);
}
.header__btn-language .dropdown-custom__menu {
  top: 37.5px;
  left: -20px;
  width: max-content;
}
.header__btn-language .dropdown-custom__menu .dropdown-custom__item {
  padding: 0px;
  position: relative;
  font-weight: 900;
}
/* .header__btn-language
  .dropdown-custom__menu
  .dropdown-custom__item:nth-child(3),
.header__btn-language
  .dropdown-custom__menu
  .dropdown-custom__item:nth-child(4),
.header__btn-language
  .dropdown-custom__menu
  .dropdown-custom__item:nth-child(5) {
  display: none !important;
} */
.dropdown-custom__menu .dropdown-custom__item {
  position: relative;
}
.header__btn-language .dropdown-custom__menu .dropdown-custom__item::before {
  content: unset;
}
.dropdown-custom__menu .dropdown-custom__item:hover {
  color: var(--color-primary);
}
.header__btn-language .dropdown-custom__menu {
  background-color: transparent;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.header__btn-language .dropdown-custom__menu .dropdown-custom__item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-transform: none;
}
.header__btn-language .dropdown-custom__menu {
  background-color: #e5e5e5;
  padding: 20px;
  min-width: 195px;
}
.header__btn-language .dropdown-custom__menu .dropdown-custom__item:hover {
  background-color: #e5e5e5;
}
.header__btn-language .dropdown-custom__menu .dropdown-custom__item:hover span {
  color: var(--color-primary);
  transition: all 0.3s ease;
}
.header__btn-language .dropdown-custom__menu .dropdown-custom__item span {
  position: relative;
}
.header__btn-language
  .dropdown-custom__menu
  .dropdown-custom__item
  span::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
  bottom: -4px;
  left: 0;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.header__btn-language
  .dropdown-custom__menu
  .dropdown-custom__item:hover
  span::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.header__btn-language .dropdown-custom__menu {
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
.header__btn-language .dropdown-custom__menu.dropdown--active {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.hotels__filter .dropdown-custom__menu .dropdown-custom__item {
  padding: 5px 0;
  width: max-content;
  font-weight: 900;
  letter-spacing: 0.05rem;
  color: var(--color-black);
}
.hotels__filter .dropdown-custom__menu {
  padding: 0 10px;
  left: -10px;
}

.dropdown-custom__menu .dropdown-custom__item::before {
  content: "";
  position: absolute;
  width: calc(100%);
  height: 2px;
  background-color: var(--color-primary);
  left: 0px;
  bottom: 0px;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.dropdown-custom__menu .dropdown-custom__item:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.select-hotel .dropdown-custom__menu .dropdown-custom__item {
  font-size: 16px;
  line-height: 26px;
  text-transform: none;
}
.select-hotel .dropdown-custom__menu {
  width: 100%;
}
.select-hotel .dropdown-custom__menu .dropdown-custom__item {
  padding: 7px 0;
  white-space: normal;
  max-width: max-content;
}

.banner-hero__form form .select-hotel .select-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.banner-hero__form form .select-hotel .dropdown-custom__menu {
  left: -24px;
  right: 0;
  overflow: hidden;
  padding: 7px 24px;
  width: calc(100% + 24px);
}
.banner-hero__form form .select-hotel .dropdown-custom__menu.dropdown-up {
  top: unset;
  bottom: calc(100% + 20px);
  padding: 7px 24px;
}

.banner-hero__form form .select-hotel .select-head h5 {
  margin-bottom: 0;
}

.banner-hero__form form .date input {
  width: 100px;
}

.banner-hero__form form .adults {
  width: 175px;
}
.banner-hero__form form .adults input {
  width: 100%;
}
.banner-hero__form form .people {
  width: 100%;
  position: relative;
  padding-left: 16px;
}

.banner-hero__form form .promo-code {
  width: 150px;
}
.banner-hero__form form .promo-code input::placeholder {
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
}
.banner-hero__form {
  padding: 12px 12px 12px 24px;
}

.banner-hero__form form .find-room {
  width: 160px;
  background-color: var(--color-primary);
  padding: 17px 0;
  text-align: center;
  transition: all 0.3s ease-in-out;
}

.banner-hero__form form .find-room:hover {
  background-color: var(--color-black);
}

.lightpick__day.is-start-date,
.lightpick__day.is-end-date {
  background-color: var(--color-primary);
  font-weight: 900;
  background-image: none;
  border-radius: 50%;
}

.lightpick__day.is-today {
  color: var(--color-primary);
  font-weight: 900;
  background-image: none;
}
.lightpick__tooltip {
  display: none;
}
.lightpick__day.is-in-range:hover {
  background-image: none;
  background-color: var(--color-primary);
}

.lightpick__day:not(.is-disabled):hover,
.lightpick__day.is-start-date.is-end-date {
  background-image: none;
}

.lightpick__day.is-in-range {
  background-color: rgba(194, 32, 51, 0.8);
  color: #fff;
}

.lightpick__day.is-end-date.is-in-range.is-flipped,
.lightpick__day.is-start-date.is-in-range,
.lightpick__day.is-end-date.is-in-range,
.lightpick__day.is-start-date.is-in-range.is-flipped {
  background-color: var(--color-primary);
  font-weight: 900;
}

.lightpick__month-title > .lightpick__select-months,
.lightpick__day-of-the-week {
  font-weight: 900;
}
.lightpick__month-title {
  padding: 0;
  margin-left: 8px;
  color: var(--color-black);
}
.lightpick__month-title > .lightpick__select-months,
.lightpick__day-of-the-week {
  text-align: left;
}
.lightpick__toolbar {
  display: flex;
  gap: 5px;
}
.lightpick__next-action,
.lightpick__previous-action {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0;
  background-image: url("../images/ic_arrow_white.svg");
  background-repeat: no-repeat;
  background-position: 55% 50%;
  background-color: var(--color-black);
  margin: 0;
  transition: background-color 0.3s;
}
.lightpick__month-title > .lightpick__select-months {
  color: var(--color-black);
}
.lightpick__next-action:hover,
.lightpick__previous-action:hover {
  background-color: var(--color-primary);
}
.lightpick__previous-action {
  transform: rotate(180deg);
}
.banner-hero__form .select-box {
  display: none;
}
.banner-hero__form .select-box {
  display: block;
  position: absolute;
  bottom: -107px;
  left: 0;
  width: 100%;
  height: auto;
  background-color: var(--color-white);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
  padding: 16px;
  z-index: 3;
}
.banner-hero__form .units .select-box {
  width: calc(100% + 16px);
}
.banner-hero__form .select-box.dropdown-up {
  bottom: unset;
  top: -107px;
}
.banner-hero__form .select-box.active {
  opacity: 1;
  visibility: visible;
}
.banner-hero__form .units-display {
  cursor: pointer;
  width: 100%;
}
.banner-hero__form .units-display::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.banner-hero__form .units-display span {
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.04rem;
}
.banner-hero__form .select-box .adult,
.banner-hero__form .select-box .child {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  line-height: 26px;
}
.banner-hero__form .select-box .adult {
  margin-bottom: 8px;
}
.banner-hero__form .select-box .select {
  display: flex;
  gap: 10px;
  align-items: center;
}
.banner-hero__form .select-box .select .plus {
  /* transform: translateY(-2px); */
}

/* end css hero banner */

/* start css wink room */
.wink-room__container {
  padding: 0 40px;
}
.wink-room__slide .slide-inner {
  width: 100%;
  height: 100%;
}
.wink-room__heading {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 80px;
}

.wink-room__heading .heading {
  text-align: center;
  position: relative;
  padding-top: 110px;
  z-index: 2;
  width: 100%;
}

.wink-room__heading .heading .before-elements {
  content: "";
  position: absolute;
  width: 425px;
  height: 0;
  background-image: url("../images/icon-signature-big.svg");
  background-size: cover;
  background-repeat: no-repeat;
  /* background-position: center; */
  left: 8%;
  top: 0;
  overflow: hidden;
  z-index: -1;
}

.wink-room__slide {
  width: 100%;
  aspect-ratio: 1360 / 600;
}

.wink-room__slide .swiper-room {
  width: 100%;
  height: 100%;
}

.swiper-container {
  height: calc(100vh - 120px);
  width: 100%;
  margin: 0;
}

.swiper-container .swiper-slide {
  overflow: hidden;
}

/* .swiper-container .slide-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-size: cover;
  background-position: center;
} */

.wink-room__slide .swiper-room .swiper-slide {
  overflow: hidden;
  transform-origin: center center;
}

.wink-room__slide .swiper-room .slide-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* end css wink room */

/* start css wink offer */
.offer__icon {
  margin-bottom: 48px;
}

.offer__content {
  padding-right: 20px;
}

/* end css wink offer */
/* start section deals */
.swiper-button-next:after,
.swiper-button-prev:after {
  content: unset;
  font-size: 0;
}
.deals__container {
  padding: 0 40px;
}

.deals__container h3 {
  margin-bottom: 32px;
}

.box__wrapper {
  width: 100%;
  display: flex;
  gap: 0 40px;
}
.deals__header {
  display: flex;
  justify-content: space-between;
  margin: 30px 0;
}
.deals__title {
  margin-bottom: 56px;
}
.deals__title h2 {
  margin-bottom: 32px;
}
.deals__title .desc {
  max-width: 670px;
}
.deals__list {
  position: relative;
}
.deals__list .hotels__item .hotels__content--top .title {
  transition: all 0.3s ease-in-out;
}
.deals__list .hotels__item:hover .hotels__content--top .title {
  color: var(--color-primary);
}
.deals__list .swiper-slide {
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  --h: 240;
}
.deals-sec.other-wink-sec .deals__list .swiper-slide {
  flex-direction: row;
}
.other-blogs.deals-sec.other-wink-sec .deals__list .swiper-slide {
  flex-direction: column;
}
.other-blogs.deals-sec.other-wink-sec .deals__list .deals__content {
  justify-content: space-between;
}
.deals__list .hotels__content--top .head {
  margin-bottom: 12px;
}
.deals__list .hotels__content--top .title {
  margin-bottom: 32px;
}
.deals__item {
  height: 100%;
}
.deals__list .swiper-pagination {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-black);
  font-weight: 900;
  right: 70px;
  top: -80px;
  bottom: unset;
  left: unset;
  width: max-content;
}
.deals__content {
  padding: 32px;
  background-color: var(--color-white);
  height: calc(100% - var(--h) * 1px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.deals__img {
  width: 100%;
  /* aspect-ratio: 427 / var(--h); */
  overflow: hidden;
  height: 240px;
}
.deals__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.deals__content .location {
  text-transform: uppercase;
  letter-spacing: 0.05rem;
}
.deals__content .location,
.deals__content .title {
  margin-bottom: 12px;
  transition: color 0.3s ease;
}
.deals__content a:hover .title {
  color: var(--color-primary);
}
.deals-sec .swiper-slide:hover .title {
  color: var(--color-primary);
}
.deals-sec .swiper-slide:hover .btn-more {
  color: var(--color-primary);
  gap: 16px;
}
.deals-sec .swiper-slide:hover .btn-more svg path {
  color: var(--color-primary);
}
.hero-deals__inner .btn-more:hover {
  color: var(--color-white);
  gap: 16px;
}
.deals__content .btn-more {
  display: flex;
  gap: 12px;
  align-items: center;
  text-decoration: none;
  transition: all 0.3s ease;
  margin-top: auto;
}
.deals__content .btn-more:hover {
  color: var(--color-primary);
  gap: 16px;
}
.deals__content .btn-more svg path {
  transition: all 0.2s ease;
  color: var(--color-black);
}
.deals__content .btn-more:hover svg path {
  color: var(--color-primary);
}
.deals__content .desc {
  margin-bottom: 32px;
}
.deals__item:hover .deals__img img {
  transform: scale(1.05);
}
.deals-sec .swiper-slide:hover .deals__img img {
  transform: scale(1.05);
}

.deals__item:hover .title {
  color: var(--color-primary);
}
.deals__item:hover .btn-more {
  color: var(--color-primary);
  gap: 16px;
}
.deals__item:hover .deals__content .btn-more svg path {
  color: var(--color-primary);
}
.deals__list .swiper-control .icon {
  width: 5px;
  height: 10px;
}
.deals__list .swiper-control .swiper-button-prev {
  left: unset;
  right: 104px;
  top: -57px;
  width: 70px;
  height: 18px;
}
.deals__list .swiper-control .swiper-button-prev .icon {
  margin-right: 12px;
}
.deals__list .swiper-control .swiper-button-next .icon {
  margin-left: 12px;
}
.deals__list .swiper-control .swiper-button-prev span,
.deals__list .swiper-control .swiper-button-next span {
  transition: all 0.3s ease;
}
.deals__list .swiper-control .swiper-button-prev .icon svg path,
.deals__list .swiper-control .swiper-button-next .icon svg path {
  transition: all 0.3s ease;
}
.deals__list .swiper-control .swiper-button-prev:hover .icon svg path,
.deals__list .swiper-control .swiper-button-next:hover .icon svg path {
  fill: var(--color-primary);
}
.deals__list .swiper-control .swiper-button-prev:hover span {
  color: var(--color-primary);
}
.deals__list .swiper-control .swiper-button-next:hover span {
  color: var(--color-primary);
}
.deals__list .swiper-control .swiper-button-next {
  right: -11px;
  top: -57px;
  width: 70px;
  height: 18px;
}
/* end section deals */
/* start css experience */
.experience__container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 64px 0;
  padding-left: 64px;
}
/* .experience__container .row {
  overflow: hidden;
} */

.experience__heading {
  max-width: 580px;
  width: 100%;
}

.experience__heading h3 {
  margin-bottom: 32px;
  text-align: center;
}

.experience__heading p {
  text-align: center;
}

.experience__grid {
  display: flex;
  gap: 32px 34px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.experience__item {
  width: calc((100% - 34px) / 2);
  transform: skewX(-15deg);
  overflow: hidden;
  transform-origin: 100% 0;
}

.experience__box {
  display: flex;
  flex-direction: column;
  gap: 32px 0;
}

.experience__item:nth-child(even) .experience__box {
  flex-direction: column-reverse;
}

.experience__item .experience__box .experience__image {
  width: 100%;
  height: 287px;
  /* aspect-ratio: 508 / 287; */
  overflow: hidden;
  display: block;
}

.experience__item .experience__box .experience__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.42) skew(15deg);
  transition: all 0.3s ease;
  object-position: top;
}

.experience__item .experience__box .experience__image:hover img {
  transform: scale(1.5) skew(15deg);
}

.experience__desc h5 {
  text-transform: uppercase;
}

.experience__desc p {
  margin-bottom: 0;
}

/* end css experience */

/* start css footer */
.footer {
  position: relative;
}
.footer.freeze .cta-share {
  position: absolute !important;
  bottom: unset !important;
  top: -80px !important;
  left: 40px !important;
  transform: translate(0) !important;
  transition: all 0.4s;
}
.footer__container--bottom-overlay {
  position: relative;
  /* z-index: 9; */
}
.footer__container--bottom-overlay.freeze .cta-mess {
  position: absolute !important;
  bottom: unset !important;
  top: -100px !important;
  right: 40px !important;
  transform: translate(0) !important;
  transition: all 0.4s;
}
.footer__container--top {
  background-color: var(--color-black);
  background-image: url("../images/image-w.svg");
  background-position: right;
  background-repeat: no-repeat;
  /* height: 568px; */
  padding: 80px 40px 60px;
  border-bottom: 1px solid var(--color-white);
  position: relative;
  z-index: 5;
}

.footer__container--left {
  max-width: 410px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px 0;
  padding-right: 10px;
}

.chit-chat__content h6,
.about__wink h6,
.rewards-list h6,
.newsletter h6 {
  margin-bottom: 16px;
}
.chit-chat__content {
  margin-bottom: 16px;
}

.rewards-list img {
  width: 75px;
  min-width: 75px;
  height: 75px;
}

.chit-chat__contact {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  gap: 8px;
}

.chit-chat__contact a {
  display: inline-block;
  width: max-content;
  text-decoration: none;
  position: relative;
}

.chit-chat__contact a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--color-white);
  left: 0;
  bottom: -4px;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.chit-chat__contact a:hover {
  color: var(--color-white);
}

.chit-chat__contact a:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.about__wink ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  gap: 8px 32px;
  padding-left: 0;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.about__wink ul li a {
  display: inline-block;
  text-decoration: none;
  position: relative;
}
.about__wink ul li a.active::before {
  transform: scaleX(1);
}

.about__wink ul li a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--color-white);
  left: 0;
  bottom: -4px;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.about__wink ul li a:hover {
  color: var(--color-white);
}

.about__wink ul li a:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.follow__us h6 {
  margin-bottom: 24px;
}
.follow__us ul li a {
  display: inline-block;
  position: relative;
}
.follow__us ul li a .ic-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}
.follow__us ul li a .ic-default {
  opacity: 1;
  visibility: visible;
  transition: all 0.3s;
}
.follow__us ul li a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.follow__us ul li a:hover .ic-default {
  opacity: 0;
  visibility: hidden;
}
.follow__us ul li a:hover .ic-hover {
  opacity: 1;
  visibility: visible;
}
.follow__us ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  gap: 8px 24px;
  padding-left: 0;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.follow__us ul li a svg path {
  transition: all 0.3s ease;
}

.follow__us ul li a:hover svg path {
  fill: var(--color-primary);
}

.footer__container--right {
  max-width: 530px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
}
.footer__container--right .rewards-list ul {
  display: flex;
  transform: translateX(-15px);
}
.footer__container--right .newsletter .content {
  max-width: 410px;
  width: 100%;
}
.footer__container--right .news-group {
  gap: 32px;
}
.footer__container--right .btn-join {
  z-index: 0;
}
.footer__container--right .btn-join span {
  white-space: nowrap;
}
.footer__container--right .form {
  display: flex;
  align-items: center;
  gap: 0 32px;
}

.footer__container--right .form input {
  border: none;
  width: 300px;
  display: block;
  border-bottom: 1px solid var(--color-white);
  padding-bottom: 12px;
}

.footer__container--right .form button {
  display: inline-block;
  padding: 10px 40px;
  position: relative;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
}

.footer__container--right .form button:hover::before {
  clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
}

.footer__container--right .form button span {
  transform: translateX(60%);
  display: inline-block;
  transition: all 0.3s ease-in-out;
}

.footer__container--right .form button:hover span {
  transform: translateX(0);
}

.footer__container--right .form button::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-primary);
  clip-path: polygon(20% 0, 50% 0, 30% 100%, 0% 100%);
  z-index: -1;
  transition: all 0.3s ease-in-out;
}

.footer__container--right .download-app h6 {
  margin-bottom: 24px;
}

.footer__container--right .download-app img {
  transition: all 0.4s ease;
}

.footer__container--right .download-app a {
  position: relative;
}

.footer__container--right .download-app img.img-hover {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  inset: 0;
}

.footer__container--right .download-app a:hover img {
  opacity: 0;
  visibility: hidden;
}

.footer__container--right .download-app a:hover img.img-hover {
  opacity: 1;
  visibility: visible;
}
.footer__container--right .download-app ul {
  display: flex;
  align-items: center;
  gap: 12px;
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0;
}

.footer__container--bottom {
  padding: 300px 40px 24px;
  background-color: var(--color-black);
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
}
.footer__container--bottom .author-alpha {
  text-align: right;
}
.footer__container--bottom-overlay .footer__container--bottom {
  padding-top: 32px;
}
.footer__container--bottom .footer-privacy {
  gap: 32px;
  height: 24px;
}
.footer__container--bottom .wink {
  display: flex;
  height: 100%;
  align-items: flex-end;
}

.footer__container--bottom .wink p {
  margin-bottom: 0;
}

.footer__container--bottom .terms .terms__desc {
  margin-bottom: 16px;
  margin-right: 16px;
}

.footer__container--bottom .terms ul {
  display: flex;
  padding-left: 0;
  margin-bottom: 0;
  gap: 32px;
  list-style-type: none;
  margin-right: 25px;
}

.footer__container--bottom .terms ul li a {
  text-decoration: none;
  position: relative;
  display: inline-block;
  transition: all 0.3s;
}

.footer__container--bottom .terms ul li a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--color-gray-50);
  left: 0;
  bottom: -4px;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
}
.footer__container--bottom .terms ul li.active a::before {
  background-color: var(--color-white);
  transform: scaleX(1);
}
.footer__container--bottom .terms ul li.active a {
  color: var(--color-white);
}

.footer__container--bottom .terms ul li a:hover {
  color: var(--color-white);
}

.footer__container--bottom .terms ul li a:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
  background-color: var(--color-white);
}

.footer__container--bl {
  display: flex;
  justify-content: space-between;
  height: 100%;
  flex-direction: column;
  align-items: flex-end;
}

.footer__container--bl .bct {
  width: 124px;
  max-width: 100%;
  height: 48px;
}

.author-alpha a {
  text-decoration: none;
  position: relative;
  display: inline-block;
  transition: all 0.3s;
}

.author-alpha a:hover {
  color: var(--color-white);
}

.author-alpha a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--color-gray-50);
  left: 0;
  bottom: -4px;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.author-alpha a {
  color: var(--color-gray-50);
}

.author-alpha a:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
  background-color: var(--color-white);
}

/* end css footer */
/* start css wink guide */
.rewards-sec__container {
  position: relative;
  overflow: hidden;
  background-color: var(--color-primary);
  background-image: url("../images/bg_rewards.svg");
  background-size: auto 100%;
  height: 100vh;
}

.rewards-sec__img {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
}

.rewards-sec__container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rewards-sec__text {
  position: absolute;
  top: 20px;
  left: 110px;
  color: var(--color-primary);
  z-index: 1;
  line-height: 1;
  max-width: 475px;
  width: 100%;
}

.rewards-sec__text h3 {
  font-size: 100px;
  font-weight: 900;
  text-transform: uppercase;
}
.rewards-sec__box {
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
}
.rewards__item {
  border: 1px solid rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 184px;
  flex-direction: column;
  gap: 16px;
  transition: background-color 0.4s ease;
}
.rewards__item p {
  transition: all 0.4s ease;
  text-align: center;
}
/*.rewards__item:hover {
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.rewards__item:hover p {
  color: var(--color-white);
}
.rewards__item:hover img {
  opacity: 0;
  visibility: hidden;
}
.rewards__item:hover .icon img.img-hover {
  opacity: 1;
  visibility: visible;
}
*/
.rewards__item .icon {
  width: 72px;
  height: 72px;
  position: relative;
}
.rewards__item .icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  transition: all 0.4s ease;
}
.rewards__item .icon img.img-hover {
  opacity: 0;
  visibility: hidden;
}
.rewards__item p {
  text-transform: uppercase;
}
.rewards__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.rewards-sec__top {
  text-align: center;
  margin-bottom: 56px;

  max-width: 60%;
  margin-left: auto;
  margin-right: auto;
}
.rewards-sec-event .rewards-sec__top {
  max-width: 100%;
}
.rewards-sec__top h3 {
  margin-bottom: 32px;
}
.rewards-sec__button {
  margin-top: 56px;
}
/* end css wink guide */
/* start css comming soon */
.comming-soon__container {
  display: flex;
  padding: 0 40px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.comming-soon__left {
  max-width: 410px;
}

.comming-soon__left p {
  text-transform: uppercase;
  margin: 20px 0;
}

.comming-soon__left h2 {
  position: relative;
  margin-bottom: 30px;
  display: block;
}

.comming-soon__left p {
  position: relative;
}

.comming-soon__right {
  position: relative;
  aspect-ratio: 641/372;
}

.comming-soon__right .img__container {
  width: 100%;
  height: 100%;
}

.comming-soon .text__container {
  margin-bottom: 30px;
}

.comming-soon .text__wrapper {
  position: relative;
  display: flex;
}

.comming-soon__left .text__wrapper span {
  transition: opacity 0.4s ease;
}

.comming-soon__left .text__wrapper span:nth-child(2) {
  position: absolute;
}

.comming-soon .img__container:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
}

.text-fade {
  position: absolute;
  transition: opacity 0.4s ease;
}

#text-back1,
#text-back2 {
  opacity: 0;
  position: absolute;
  z-index: -1;
}
.comming-soon__btn {
  display: flex;
  gap: 15px;
}

.comming-soon__btn--prev,
.comming-soon__btn--next {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 1.5rem;
  display: flex;
  justify-content: center;
  border: 1px solid;
  cursor: pointer;
  align-items: center;
}

.comming-soon__btn--prev:hover,
.comming-soon__btn--next:hover {
  background-color: black;
}
.comming-soon__btn--prev:hover svg path,
.comming-soon__btn--next:hover svg path {
  fill: var(--color-white);
}

.comming-soon__btn--prev:active,
.comming-soon__btn--next:active {
  background-color: black;
  color: white;
}

.comming-soon__right .img__container img {
  height: 372px;
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
  transition: opacity 0.4s ease;
}

.comming-soon .img__container img:nth-child(2) {
  position: absolute;
  top: 60px;
  left: 45px;
  z-index: -1;
}

.hidden {
  opacity: 0;
}

#changing-text {
  transition: opacity 1s ease;
}
.comming-soon__btn {
  margin-top: 20px;
  font-size: 20px;
}

/* end css comming soon */

/* start css page hotels */
.hotels__container {
  padding: 0 40px;
}

.hotels__filter {
  display: flex;
  align-items: center;
  gap: 0 40px;
  transition: top 0.9s;
}
.hotels__filter {
  position: sticky;
  z-index: 100;
  background-color: var(--color-gray-10);
  transition: top 0.9s;
  padding: 16px 0px;
  left: 0;
  right: 0;
  top: 60px;
}
.hotels__result {
  margin-top: 40px;
}
.hotels__filter.fixed .hotels__filter--location .dropdown-custom__menu {
  top: 34px;
}
.hotels__filter {
  top: 60px;
}
/* .hotels__filter.scrolling-down {
  top: 60px;
}
.hotels__filter.scrolling-up {
  top: 120px;
} */
.hotels__filter--location .dropdown-custom__menu,
.hotels__filter--opening .dropdown-custom__menu {
  top: 24px;
}
.hotels__filter--opening .dropdown-custom__menu {
  left: unset;
  right: 0;
  padding-right: 23px;
  padding-left: 23px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.hotels__filter--location .dropdown-custom__menu {
  /* width: calc(100% + 10px); */
  width: 120px;
}

.hotels__filter .head {
  display: flex;
  align-items: center;
  gap: 0 12px;
}

.hotels__filter .head h5 {
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
  letter-spacing: 0.05rem;
  color: var(--color-black);
  margin-bottom: 0;
}

.hotels__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.hotels__box {
  position: relative;
}
.hotels__box.comming-soon__hotel::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  z-index: 2;
}
.hotels__box.comming-soon__hotel .hotels__content .hotels__btn--view {
  opacity: 0;
  visibility: hidden;
}
.hotels__box .hotels__tag {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.hotels__box .hotels__tag .tag {
  background-color: var(--color-black);
  display: inline-block;
  padding: 12px 24px;
}
.hotels__box:hover .hotels__image img {
  transform: scale(1.05);
}

.hotels__image {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding-top: calc(240 / 427 * 100%);
}

.hotels__image img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.4s ease;
}

.hotels__box {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.hotels__content {
  padding: 24px 32px;
  background-color: var(--color-white);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
  height: 100%;
}
.hotels__content--top {
  width: 100%;
}
.hotels__content--top .tag {
  text-transform: uppercase;
}

.hotels__content--top ul {
  list-style-type: none;
  padding-left: 0;
  display: flex;
  align-items: center;
  gap: 32px;
  width: 100%;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.hotels__desc {
  display: flex;
  align-items: center;
  gap: 0 12px;
}

.hotels__desc span {
  font-size: 12px;
  line-height: 20px;
  font-weight: 900;
  color: var(--color-grey);
  letter-spacing: 0.05rem;
}

.hotels__name {
  font-size: 20px;
  line-height: 32px;
  font-weight: 900;
  color: var(--color-black);
  letter-spacing: 0.03rem;
  text-transform: uppercase;
  transition: all 0.3s ease;
  margin-bottom: 12px;
}

.hotels__box:hover .hotels__name {
  color: var(--color-primary);
}

.hotels__text {
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: 0.04rem;
  margin-bottom: 40px;
}

.hotels__content--bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.hotels__btn--view a {
  display: inline-block;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hotels__btn--view .btn-more {
  display: inline-block;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hotels__btn--view .btn-more:hover {
  color: var(--color-primary);
  gap: 16px;
}
.hotels__box:hover .hotels__btn--view .btn-more {
  color: var(--color-primary);
  gap: 16px;
}
.hotels__btn--view a:hover {
  color: var(--color-primary);
  gap: 16px;
}
.hotels__box:hover .hotels__btn--view a {
  color: var(--color-primary);
  gap: 16px;
}
.hero-deals .hotels__btn--view a {
  color: var(--color-white) !important;
}

.hotels__btn--book {
  display: flex;
  align-items: center;
}

.btn__brand {
  display: inline-block;
  padding: 10px 40px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
  height: 100%;
}

.btn__brand:hover {
  color: var(--color-white);
}

.btn__brand:hover span {
  color: var(--color-white);
  transform: translateX(0);
}

.btn__brand span {
  display: inline-block;
  color: inherit;
  font-size: inherit;
  text-align: center;
  transform: translateX(20%);
  transition: transform 0.4s ease-in-out, color 0.2s ease-out;
}

.btn__brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-primary);
  clip-path: polygon(15% 0, 35% 0, 20% 100%, 0% 100%);
  z-index: -1;
  transition: all 0.3s ease-in-out;
}

.btn__brand:hover::before {
  clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
}

.limit__line {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* .hotels__box:hover .btn__brand span {
  color: var(--color-white);
  transform: translateX(0);
}
.hotels__box:hover .btn__brand::before {
  clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
} */
/* end css page hotels */

/* custom dropdown select */

.dropdown-custom__btn h5 {
  text-transform: uppercase;
}
.dropdown-custom__btn img {
  transition: all 0.3s;
}
.dropdown-custom__btn.--active .ic img {
  transform: rotate(180deg);
}

.dropdown-custom {
  position: relative;
  cursor: default;
}

.dropdown-custom__menu {
  position: absolute;
  background-color: white;
  top: 65px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 3;
  left: -5px;
  width: max-content;
}
.hotels__filter--location .dropdown-custom__menu,
.hotels__filter--opening .dropdown-custom__menu {
  padding-bottom: 4px;
}
.dropdown-custom__menu .dropdown-custom__item {
  width: 100%;
  padding: 5px 10px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 12px;
  line-height: 18px;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--color-black);
}

.dropdown-custom__menu .dropdown-custom__item:hover {
  color: var(--color-primary);
}
.header__btn-language .dropdown-custom__menu .dropdown-custom__item:hover {
  background-color: #e5e5e5;
}

.dropdown--active {
  opacity: 1;
  visibility: visible;
}

/* end dropdown select */

/* css comming soon */
.cooming-sec {
  background-color: var(--color-gray-10);
}
.comming-soon {
  width: 100%;
  position: relative;
  height: 100vh;
  display: flex;
  overflow: hidden;
}
.comming-soom__count {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  background-color: var(--color-white);
  width: 140px;
  height: 120px;
  mask-image: url("../images/bg_mask.svg");
  mask-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
  color: var(--color-black);
  letter-spacing: 0.5px;
}

.flex-center {
  position: relative;
}

.container-page {
  width: 50%;
}
.comming-soon__content {
  background-color: var(--color-gray-10);
}
.comming-soon__content .box {
  max-width: 440px;
  background-color: var(--color-gray-10);
  width: 100%;
}
.comming-soon__content .box h5 {
  margin-bottom: 24px;
  padding: 0;
}
.comming-soon__content .box h2 {
  margin-bottom: 32px;
}
@media (max-width: 992px) {
  .comming-soon__content .box h5 {
    display: none;
  }
}
@media (min-width: 992px) {
  .flex-center > * {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
  }

  .comming-soon__content.animate-left {
    /* z-index: -1; */
  }
  .comming-soon__content.animate-left.show {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
  }
  .comming-soon__content.animate-left.show h2,
  .comming-soon__content.animate-left.show h5,
  .comming-soon__content.animate-left.show .desc {
    transform: translateY(0);
    opacity: 1;
    z-index: 1;
  }
  .comming-soon__content.animate-left h2,
  .comming-soon__content.animate-left h5,
  .comming-soon__content.animate-left .desc {
    transform: translateY(50px);
    transition: all 0.2s;
    opacity: 0;
    z-index: -1;
    max-width: 365px;
  }
  .comming-soon__content.animate-left h2,
  .comming-soon__content.animate-left.show h2,
  .comming-soon__content.animate-left h5,
  .comming-soon__content.animate-left.show h5 {
    transition: all 0.4s;
  }
  .comming-soon__content.animate-left.show .desc {
    transition-delay: 0.2s;
  }
  .comming-soon__content.animate-left .desc {
    transition-delay: 0.2s;
    transition: all 0.4s;
  }
}
.panels {
  width: 50%;
  overflow: hidden;
  position: relative;
  height: 100vh;
}
.comming-soon .panels .panel {
  background-size: cover;
  height: 100vh;
  background-image: var(--img);
}
.comming-soon .panels .panel:first-child {
  z-index: 1;
}
.comming-soon .panels .panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section.spacer {
  width: 100%;
  height: 100vh;
  background: #333;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}
/* end css comming soon */

/* css page hotels details */
.page-details-hotels .header__button {
  display: none;
}
.hotels-details .banner-hero__container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-position: center;
}
.header-hotels__details .circle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #05aa6c;
  display: inline-block;
  margin-right: 4px;
  position: relative;
}

.header-hotels__details .circle.partial {
  overflow: hidden;
}

.header-hotels__details .cover-circle {
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
  position: absolute;
  top: 0;
  right: 0;
}
.header-hotels__details .rating {
  gap: 4px;
}
.wink-detail-sec {
  padding: 0 40px;
}
.wink-detail-sec .title {
  margin-bottom: 32px;
}
.wink-detail-sec .wink-detail__desc .desc {
  margin-bottom: 48px;
}
.wink-detail__container {
  padding: 0 40px;
}
.wink-detail__container h3 {
  margin-bottom: 56px;
}
.swiper-child-img {
  position: relative;
}
.swiper-child-img .swiper-slide {
  overflow: hidden;
}
.swiper-child-img .img {
  width: 100%;
  height: 340px;
}
.swiper-child-img .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swiper-child-img .swiper-button-next,
.swiper-child-img .swiper-button-prev {
  width: 44px;
  height: 44px;
  background-color: var(--color-white);
  top: unset;
  bottom: 0;
  transition: all 0.4s ease;
}
.swiper-child-img .swiper-button-next .icon,
.swiper-child-img .swiper-button-prev .icon {
  width: 6px;
  height: 10px;
}
.swiper-child-img .swiper-button-next:hover,
.swiper-child-img .swiper-button-prev:hover {
  background-color: var(--color-header-hotels);
}
.swiper-child-img .swiper-button-next {
  right: 0;
}
.swiper-child-img .swiper-button-prev {
  left: auto;
  right: 44px;
}
.swiper-child-img .swiper-button-next.swiper-button-disabled,
.swiper-child-img .swiper-button-prev.swiper-button-disabled {
  opacity: 1;
}
.swiper-child-img .swiper-pagination-fraction {
  background-color: var(--color-black);
  width: 60px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
  color: var(--color-white);
  bottom: 0;
  left: auto;
  right: 88px;
}
.wink-room__slider {
  position: relative;
}
.wink-room__slider .box-desc {
  padding: 32px;
  background-color: var(--color-white);
  height: calc(100% - 340px);
  display: flex;
  flex-direction: column;
}
.wink-room__slider .box-desc .wink-name {
  margin-bottom: 12px;
  text-transform: uppercase;
}
.wink-room__slider .box-desc .wink-facilities {
  margin-bottom: 24px;
}
.wink-room__slider .box-desc .wink-facilities ul {
  display: flex;
  align-items: center;
  gap: 6px 32px;
  flex-wrap: wrap;
}
.wink-room__slider .box-desc .wink-facilities ul li .item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wink-room__slider .box-desc .desc {
  margin-bottom: 32px;
}
.swiper-parent-room .box:hover .wink-name {
  color: var(--color-primary);
}
/* .swiper-parent-room .box:hover .custom__btn::before {
  clip-path: polygon(13% 0, 100% 0, 87% 100%, 0% 100%);
}
.swiper-parent-room .box:hover .custom__btn span {
  color: var(--color-white);
} */
.swiper-parent-room {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.swiper-parent-room .room-item {
  width: calc((100% / 2) - 20px);
}
@media (max-width: 767px) {
  .page-details-deals .contact-sec .contact__form {
    margin-top: 56px !important;
  }
  .page-tpl-events .rewards-sec__top h3 {
    max-width: 80% !important;
  }
  #modalContactUsEvent .modal-header {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  #modalContactUsEvent .modal-header .header-title {
    gap: 24px;
  }
  .page-tpl-suites .wink-room__suites .box .box-desc ul {
    height: 73px;
  }
  #modalSuites .modal-header {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .rewards__box .desc {
    font-weight: 400;
  }
  .page-details-career .career-content-sec {
    padding-bottom: 0 !important;
  }
  .rewards-sec__top h3 {
    max-width: 80% !important;
  }
  .page-tpl-events .deals-sec {
    padding-bottom: 56px;
  }
  .single-hotel .spacing {
    height: 56px;
  }
  .single-hotel .amenities__bottom {
    padding-bottom: 0;
  }
  .swiper-parent-room {
    gap: 32px;
  }
  .swiper-parent-room .room-item {
    width: 100%;
  }
}
.swiper-parent-room .box {
  height: 100%;
  background-color: var(--color-white);
}
.swiper-parent-room .swiper-slide {
  height: auto;
}
.wink-room__slider .box-desc .wink-book {
  margin-top: auto;
}
.wink-room__slider .swiper-control-parent .icon {
  width: 5px;
  height: 10px;
}
.wink-room__slider .swiper-control-parent .swiper-button-prev {
  left: unset;
  right: 104px;
  top: -57px;
  width: 70px;
  height: 18px;
}
.wink-room__slider .swiper-control-parent .swiper-button-prev .icon {
  margin-right: 12px;
}
.wink-room__slider .swiper-control-parent .swiper-button-next .icon {
  margin-left: 12px;
}
.wink-room__slider .swiper-control-parent .swiper-button-prev span,
.wink-room__slider .swiper-control-parent .swiper-button-next span {
  transition: all 0.3s ease;
}
.wink-room__slider .swiper-control-parent .swiper-button-prev .icon svg path,
.wink-room__slider .swiper-control-parent .swiper-button-next .icon svg path {
  transition: all 0.3s ease;
}
.wink-room__slider
  .swiper-control-parent
  .swiper-button-prev:hover
  .icon
  svg
  path,
.wink-room__slider
  .swiper-control-parent
  .swiper-button-next:hover
  .icon
  svg
  path {
  fill: var(--color-primary);
}
.wink-room__slider .swiper-control-parent .swiper-button-prev:hover span {
  color: var(--color-primary);
}
.wink-room__slider .swiper-control-parent .swiper-button-next:hover span {
  color: var(--color-primary);
}
.wink-room__slider .swiper-control-parent .swiper-button-next {
  right: -11px;
  top: -57px;
  width: 70px;
  height: 18px;
}
.wink-room__slider .swiper-control-parent .swiper-pagination {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-black);
  font-weight: 900;
  right: 70px;
  top: -79px;
  bottom: unset;
  left: unset;
  width: max-content;
}
.room-facilities.--details {
  padding: 0 40px;
}
.room-facilities__container h3 {
  margin-bottom: 56px;
}
.room-facilities__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
}
.facilities__item {
  width: 100%;
  height: 184px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 16px;
  padding: 22px 10px;
}
.facilities__item p {
  text-transform: uppercase;
  max-width: 120px;
  text-align: center;
}
.other-wink-sec .deals__title h2 {
  margin-bottom: 0;
}
.other-wink-sec .deals__content .location {
  gap: 12px;
}
.amenities-sec {
  background-color: var(--color-white);
  overflow-y: hidden;
  overflow-x: hidden;
}
.amenities-sec .info {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.amenities__content .desc {
  margin-bottom: 24px;
}
.amenities-sec .info .time,
.amenities-sec .info .floor {
  display: flex;
  align-items: center;
  gap: 12px;
}
.amenities__img {
  width: 100%;
  min-height: 375px;
  height: 100%;
}
.amenities__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.amenities__content {
  max-width: 450px;
  width: 100%;
}
.amenities__content .title {
  text-transform: uppercase;
  margin-bottom: 32px;
}
.amenities__bottom {
  padding: 120px 40px;
}

.amenities__bottom .row:not(:last-child) {
  margin-bottom: 120px;
}
.amenities__content.--second .desc {
  margin-bottom: 56px;
}
.amenities__top {
  /* border-top: 1px solid var(--color-grey);
  border-bottom: 1px solid var(--color-grey); */
}
.amenities__top .swiper-amenities {
  height: 100%;
  min-height: 640px;
  width: 100%;
}
.amenities__top .swiper-amenities .swiper__img {
  width: 100%;
  height: 100%;
}
.amenities__top .swiper-amenities .swiper__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.amenities__top .box h2 {
  padding-top: 16px;
  padding-left: 60px;
  margin-bottom: 30px;
}
.amenities__top .amen-right .box-detail .head {
  display: flex;
  align-items: center;
}
.amenities__top .amen-right .box-detail .head h3 {
  margin-top: 0 !important;
  padding: 0 !important;
}
.amenities__title .item {
  padding: 24px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative;
}

.amenities__title .item svg {
  min-width: 5px;
}
.amenities__title .item::before {
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: 0px;
  left: 0;
  background-color: var(--color-stroke-2);
}
.amenities__title.active .item:last-child::before {
  content: none;
}
.amenities__title .item.active::before {
  /* background-color: var(--color-gray-20); */
}
.amenities__title .item::after {
  content: "";
  height: 2px;
  bottom: 0;
  position: absolute;
  left: 0;
  width: 100%;
  background-color: var(--color-black);
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.amenities__title .item:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.amenities__title .item p .amenities__title .item svg path {
  transition: all 0.3s;
}
.amenities__title .item p {
  font-size: 20px;
  line-height: 32px;
  letter-spacing: 0.03px;
  font-weight: 400;
}
.amenities__title .item:hover {
  cursor: pointer;
}
.amenities__title .item.active p {
  color: var(--color-primary);
}
.amenities__title .item.active svg path {
  fill: var(--color-primary);
}
.amenities__top .amen-right {
  position: relative;
}
.amenities__top .amen-right .box-detail {
  position: absolute;
  inset: 0;
  background-color: var(--color-white);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}
.amenities__top .amen-right .box-detail.active {
  opacity: 1;
  visibility: visible;
}
.amenities__top .amen-right .box-detail .head {
  position: relative;
  margin-bottom: 40px;
}
.amenities__top .amen-right .box-detail .head .icon-close {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-black);
  transition: all 0.4s ease;
}
.amenities__top .amen-right .box-detail .head .icon-close svg path {
  transition: all 0.4s ease;
}
.amenities__top .amen-right .box-detail .head .icon-close:hover {
  cursor: pointer;
  background-color: var(--color-primary);
}
.amenities__top .amen-right .box-detail .head .icon-close:hover svg path {
  fill: var(--color-white);
}
.amenities__top .amen-right .box-detail .head h3 {
  /* position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
  font-size: 28px;
  line-height: 36px;
  white-space: nowrap;
  padding: 0 60px;
  margin-top: 40px;
  font-weight: 900;
}
.amenities__top .amen-right .box-detail .box-slide {
  padding: 0 60px;
  position: relative;
}
.amenities__top .amen-right .box-detail .box-slide .swiper-button-prev {
  left: 60px;
  top: unset;
  bottom: -56px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 70px;
  height: 18px;
}
.amenities__top .amen-right .box-detail .box-slide .swiper-button-next {
  left: 175px;
  top: unset;
  bottom: -56px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 70px;
  height: 18px;
}
.amenities__top .amen-right .box-detail .box-slide .swiper-button-next span,
.amenities__top .amen-right .box-detail .box-slide .swiper-button-prev span {
  transition: all 0.3s;
}
.amenities__top .amen-right .box-detail .box-slide .swiper-button-next svg path,
.amenities__top
  .amen-right
  .box-detail
  .box-slide
  .swiper-button-prev
  svg
  path {
  transition: all 0.3s;
}
.amenities__top
  .amen-right
  .box-detail
  .box-slide
  .swiper-button-next:hover
  svg
  path,
.amenities__top
  .amen-right
  .box-detail
  .box-slide
  .swiper-button-prev:hover
  svg
  path {
  fill: var(--color-primary);
}
.amenities__top
  .amen-right
  .box-detail
  .box-slide
  .swiper-button-next:hover
  span,
.amenities__top
  .amen-right
  .box-detail
  .box-slide
  .swiper-button-prev:hover
  span {
  color: var(--color-primary);
}
.amenities__top .amen-right .box-detail .box-slide .swiper-pagination {
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
  color: var(--color-black);
  letter-spacing: 0.05px;
  top: unset;
  bottom: -56px;
  left: 132px;
  width: max-content;
}
.amenities__top .amen-right .box-detail .swiper-amen-box h4 {
  font-size: 20px;
  font-weight: 900;
  line-height: 32px;
  letter-spacing: 0.03em;
  margin-bottom: 12px;
}
.amenities__top .amen-right .box-detail .swiper-amen-box .location {
  gap: 12px;
  margin-bottom: 24px;
}

/* css page hotels details */

/* css map */
section.map {
  border-top: 1px solid var(--color-gray-20);
  border-bottom: 1px solid var(--color-gray-20);
  /* min-height: 100vh;
  background-color: #d4d8d9; */
}
.map__wrapper {
  width: 100%;
  /* height: calc(100vh - 120px); */
  height: 800px;
  overflow: hidden;
  position: relative;
}
.map.homepage .map__wrapper,
.map.map-new .map__wrapper {
  height: auto;
}
.map.map-new .map__wrapper {
  overflow-y: hidden;
}
.map__wrapper .map-overview {
  width: 100%;
  height: 100%;
}
.map__wrapper .map-overview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.map.homepage .map__wrapper .map-overview img,
.map.map-new .map__wrapper .map-overview img {
  aspect-ratio: 1440 / 800;
}
.map__marker {
  position: absolute;
  right: 0;
  top: 0;
  background-color: var(--color-white);
  height: 100%;
  width: 440px;
  max-width: 50%;

  transform: translate(0);
  transition: all 0.6s ease;
}
.map .map__marker::-webkit-scrollbar,
.map-content-detail::-webkit-scrollbar {
  width: 5px;
}

/* Track */
.map .map__marker::-webkit-scrollbar-track,
.map-content-detail::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
.map .map__marker::-webkit-scrollbar-thumb,
.map-content-detail::-webkit-scrollbar-thumb {
  background: #888;
}

.map__marker.hide {
  transform: translateX(100%);
}

.map__marker h2 {
  padding-top: 16px;
  padding-inline: 60px;
  margin-bottom: 20px;
  /* text-align: center; */
}
.map__marker .marker-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 60px;
  position: relative;
  border-bottom: 2px solid var(--color-stroke-2);
}
.map__marker .marker-content::after {
  content: "";
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  background-color: var(--color-black);
  position: absolute;
  left: 0;
  bottom: -2px;
  transform-origin: bottom right;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.map__marker .marker-content:hover {
  cursor: pointer;
}
.map__marker .marker-content:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.map__marker .marker-content:hover .name-city {
  color: var(--color-primary);
}
.map__marker .marker-content:hover .icon svg path {
  fill: var(--color-primary);
}
.map__marker .marker-content .name-city {
  position: relative;
  font-size: 20px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: 0.03rem;
  color: var(--color-black);
  transition: color 0.4s ease;
}
.map__marker .marker-content .name-city span {
  position: absolute;
  min-width: max-content;
  top: 0;
  right: 0;
  font-size: 12px;
  transform: translateX(120%);
}
.map-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease;
}
.map-content-wrapper .tag-city-mobile {
  background-color: transparent;
  position: absolute;
  top: 40px;
  right: 24px;
}
.map.map-new .map-overview {
  position: relative;
}
.tag--note-city-mobile {
  background-color: transparent;
  position: absolute;
  bottom: 15px;
  left: 32px;
  color: #777777;
}
map area {
  cursor: pointer;
  position: relative;
}
.map-content-wrapper.show {
  opacity: 1;
  visibility: visible;
}
.map-content-wrapper img {
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 800;
  object-fit: cover;
  object-position: center;
}
.map-content-wrapper .marker-detail {
  position: absolute;
  opacity: 0;
  /* visibility: hidden; */
  transition: all 1s ease;
  transition-delay: calc(0.15s * (var(--index) + 1));
}
.map.homepage .map-content-wrapper .marker-detail {
  display: none;
}
.map-content-wrapper.show .marker-detail {
  /* opacity: 1;
  visibility: visible; */
}
.map-content-wrapper .marker-detail.active svg rect,
.map-content-wrapper .marker-detail.active svg .subtrack {
  fill: var(--color-primary);
}

/* marker map-new */
.map-content-wrapper .marker-detail.hai-phong {
  top: 95px;
  left: 50%;
  transform: translateX(-180px);
}
.map-content-wrapper .marker-detail.da-nang-center {
  top: 50%;
  left: 50%;
  transform: translate(-155px, -135px);
  z-index: 3;
}
.map-content-wrapper .marker-detail.da-nang-riverside {
  top: 50%;
  left: 50%;
  transform: translate(-140px, -120px);
  z-index: 2;
}
.map-content-wrapper .marker-detail.tuy-hoa {
  left: 50%;
  bottom: 40%;
  z-index: 2;
  transform: translate(-90px, -40px);
}
.map-content-wrapper .marker-detail.ho-chi-minh {
  bottom: 35%;
  left: 51%;
  transform: translateX(-190px);
}
.map-content-wrapper .marker-detail.can-tho {
  bottom: 31%;
  left: 51%;
  transform: translateX(-230px);
}
@media (min-width: 1900px) {
  /* 1920 x 1820 */
  .map-content-wrapper .marker-detail.hai-phong {
    top: 13%;
    left: 47%;
  }

  .map-content-wrapper .marker-detail.can-tho {
    bottom: 32%;
    left: 48%;
  }

  .map-content-wrapper .marker-detail.ho-chi-minh {
    left: 48%;
  }

  .map-content-wrapper .marker-detail.tuy-hoa {
    left: 48%;
  }

  .map-content-wrapper .marker-detail.da-nang-riverside,
  .map-content-wrapper .marker-detail.da-nang-center {
    left: 49%;
  }
}

@media (min-width: 1024px) and (max-width: 1200px) {
  .map-content-wrapper .marker-detail.can-tho {
    left: 56%;
  }

  .map-content-wrapper .marker-detail.ho-chi-minh {
    left: 56%;
  }

  .map-content-wrapper .marker-detail.tuy-hoa {
    left: 51%;
  }

  .map-content-wrapper .marker-detail.da-nang-center {
    top: 53%;
    left: 52%;
  }

  .map-content-wrapper .marker-detail.da-nang-riverside {
    top: 52%;
    left: 52%;
  }

  .map-content-wrapper .marker-detail.hai-phong {
    top: 10%;
    left: 54%;
  }

  .map.map-new .ic-wink-head {
    left: 55%;
  }
}

@media (max-width: 576px) {
  .experience__item .experience__box .experience__image img {
    transform: scale(1.37) skew(15deg);
  }
  .experience__item .experience__box .experience__image:hover img {
    transform: scale(1.45) skew(15deg);
  }
  .map-content-wrapper .marker-detail.hai-phong {
    transform: translateX(0) !important;
    top: 90px;
    left: 40%;
  }

  .map-content-wrapper .marker-detail.da-nang-center,
  .map-content-wrapper .marker-detail.da-nang-riverside {
    top: 60%;
    left: calc(50% + 115px);
  }

  .map-content-wrapper .marker-detail.tuy-hoa {
    bottom: 30%;
    left: calc(50% + 120px);
  }

  .map-content-wrapper .marker-detail.ho-chi-minh {
    bottom: 21%;
    left: calc(42% + 190px);
    width: 27px;
  }

  .map-content-wrapper .marker-detail.can-tho {
    bottom: 17%;
    left: calc(45% + 190px);
    width: 27px;
  }
}
@media (max-width: 376px) {
  .map-content-wrapper .marker-detail.hai-phong {
    top: 100px;
  }
}
.map-content {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 440px;
  max-width: 50%;
  background-color: var(--color-white);
  /* opacity: 0;
  visibility: hidden; */
  transform: translateX(100%);
  transition: all 0.6s ease;
}
.map-content.show {
  /* opacity: 1;
  visibility: visible; */
  transform: translateX(0);
}
.map-content .box .box-head {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-bottom: 16px;
  /* flex-direction: column; */
}
.map-content .box .box-head .name-city-hotel {
  padding-left: 60px;
  margin-top: 8px;
}
.map-content .box .icon-back {
  width: 60px;
  height: 60px;
  background-color: var(--color-black);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}
.map-content .box .icon-back:hover {
  background-color: var(--color-primary);
}
.map-content .box .icon-back:hover,
.map-content .box .box-body .item,
.map-content-wrapper .marker-detail {
  cursor: pointer;
}
.map-content .box .icon-back svg path {
  transition: all 0.3s ease;
}
.map-content .box .icon-back:hover svg path {
  fill: var(--color-white);
}
.map-content .box .box-body .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 60px;
  border-bottom: 2px solid var(--color-stroke-2);
  position: relative;
}
.map-content .box .box-body .item::after {
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: -2px;
  background-color: var(--color-black);
  transform-origin: bottom right;
  transform: scaleX(0);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.map-content .box .box-body .item:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.map-content .box .box-body .item:hover {
  color: var(--color-primary);
}
.map-content .box .box-body .item:hover svg path {
  fill: var(--color-primary);
}
.map-content-detail {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 440px;
  max-width: 50%;
  background-color: var(--color-white);
  z-index: 3;
  /* opacity: 0;
  visibility: hidden; */
  transform: translateX(100%);
  transition: all 0.6s ease;
  overflow-y: scroll;
}
.map-content-detail.show {
  /* opacity: 1;
  visibility: visible; */
  transform: translate(0);
}
.map-content-detail .box-head {
  position: relative;
}
.map-content-detail .box-head .icon-back-lv2 {
  width: 60px;
  height: 60px;
  background-color: var(--color-black);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}
.map-content-detail .box-head .icon-back-lv2:hover {
  cursor: pointer;
  background-color: var(--color-primary);
}
.map-content-detail .box-head .icon-back-lv2 svg path {
  transition: all 0.3s ease;
}
.map-content-detail .box-head .icon-back-lv2:hover svg path {
  fill: var(--color-white);
}
.map-content-detail .box-head .logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.map-content-detail .box-body .img {
  width: 100%;
  height: 245px;
}
.map-content-detail .box-body img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.map-content-detail .box-body .content {
  padding: 40px;
}
.map-content-detail .box-body .content h5 {
  margin-bottom: 24px;
  text-transform: uppercase;
}
.map-content-detail .box-body .content .desc {
  margin-bottom: 32px;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.map-content-detail .box-body .content .desc a {
  display: block;
  color: var(--color-black);
  text-decoration: none;
}
.menu-item-all-hotel a::after {
  display: none !important;
}
.menu-item-all-hotel a {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.48px;
  line-height: 26px;
  position: relative;
  color: black !important;
}
.menu-item-all-hotel a:hover {
  color: var(--color-primary);
}
.menu-container li:hover .menu-item-all-hotel a::before {
  background-color: var(--color-gray-10);
}
.menu-container li .menu-item-all-hotel a {
  transition: unset;
}
.menu-container li .menu-item-all-hotel:hover a {
  color: var(--color-primary) !important;
}
.menu-container li .menu-item-all-hotel a:hover::before {
  background-color: var(--color-primary);
}
/* end css map */
/* css page suites */
.page-tpl-suites .wink-detail-sec .wink-detail__desc .desc {
  margin-bottom: 0;
}
.page-tpl-suites .wink-room__suites {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.page-tpl-suites .wink-room__suites .box {
  width: calc((100% - 40px) / 2);
  position: relative;
}
.page-tpl-suites .wink-room__suites .box:hover .wink-name {
  color: var(--color-primary);
}

.page-tpl-suites .wink-room__suites .box .box-desc {
  background-color: var(--color-white);
}
.page-tpl-suites .wink-room__suites .box .box-desc .box-read {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px;
  z-index: 2;
  background-color: var(--color-white);
}
.page-tpl-suites .wink-room__suites .box .box-desc .overlay {
  height: 320px;
}
.page-tpl-suites .wink-room__suites .box .box-desc .wink-name {
  margin-bottom: 12px;
}
.page-tpl-suites .wink-room__suites .box .box-desc .wink-facilities ul {
  display: flex;
  align-items: center;
  gap: 32px;
}
.page-tpl-suites .wink-room__suites .box .box-desc .wink-facilities {
  margin-bottom: 24px;
}
.page-tpl-suites .wink-room__suites .box .box-desc .desc {
  position: relative;
  margin-bottom: 32px;
}
.page-tpl-suites .wink-room__suites .box .box-desc ul {
  list-style-type: disc;
  padding-left: 20px;
}
.page-tpl-suites .wink-room__suites .box .box-desc ul {
  height: 70px;
  overflow: hidden;
  position: relative;
  transition: height 0.6s ease-in-out 0s;
  display: block;
}
.page-tpl-suites .wink-room__suites .box .swiper::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
}
.page-tpl-suites .wink-room__suites .box.open .swiper::after {
  opacity: 1;
  visibility: visible;
}
.contact-sec .dropdown-custom__menu {
  top: 50px;
}

.page-tpl-suites .wink-room__suites .box .box-desc .check {
  position: absolute;
  bottom: 40px;
  left: 50px;
  appearance: none;
  -webkit-appearance: none;

  display: block;
  width: max-content;
  height: 24px;
}
.page-tpl-suites .wink-room__suites .box .box-desc .check:hover {
  cursor: pointer;
}

.page-tpl-suites .wink-room__suites .box .box-desc .check::before {
  content: attr(data-more);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.05rem;
  transition: content 0.5s;
}
.page-tpl-suites .wink-room__suites .box .box-desc .check::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
  bottom: -2px;
  left: 0;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-tpl-suites .wink-room__suites .box .box-desc .check:hover {
  color: var(--color-primary);
}
.page-tpl-suites .wink-room__suites .box .box-desc .check:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.page-tpl-suites .wink-room__suites .box .box-desc .check:checked::before {
  content: attr(data-less);
}

.page-tpl-suites
  .wink-room__suites
  .box
  .box-desc
  .wink-facilities
  ul
  li
  .item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-tpl-suites .wink-room__suites .box .box-desc .desc h5 {
  font-size: 16px;
  font-weight: 900;
  line-height: 26px;
  letter-spacing: 0.04em;
}
.swiper-suites {
  position: relative;
}
.swiper-suites .img {
  width: 100%;
  height: 340px;
  position: relative;
}
.swiper-suites .img .hotels__tag {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.swiper-suites .img .hotels__tag .tag {
  background-color: var(--color-black);
  display: inline-block;
  padding: 12px 24px;
}
.swiper-suites .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swiper-suites .swiper-button-next,
.swiper-suites .swiper-button-prev {
  width: 44px;
  height: 44px;
  background-color: var(--color-white);
  top: unset;
  bottom: 0;
  transition: all 0.4s ease;
}
.swiper-suites .swiper-button-next .icon,
.swiper-suites .swiper-button-prev .icon {
  width: 6px;
  height: 10px;
}
.swiper-suites .swiper-button-next:hover,
.swiper-suites .swiper-button-prev:hover {
  background-color: var(--color-header-hotels);
}
.swiper-suites .swiper-button-next {
  right: 0;
}
.swiper-suites .swiper-button-prev {
  left: auto;
  right: 44px;
}
.swiper-suites .swiper-button-next.swiper-button-disabled,
.swiper-suites .swiper-button-prev.swiper-button-disabled {
  opacity: 1;
  pointer-events: auto;
}
.swiper-suites .swiper-pagination-fraction {
  background-color: var(--color-black);
  width: 60px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
  color: var(--color-white);
  bottom: 0;
  left: auto;
  right: 88px;
}
/* end css page suites */
/* css page experience */
.experience-sec {
  overflow-x: hidden;
}
.experience-sec .experience__img {
  width: 100%;
  height: 100%;
  min-height: 375px;
  /* height: 375px; */
}
.experience-sec .experience__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.experience-sec .experience__content {
  max-width: 450px;
  width: 100%;
  padding-right: 30px;
}
.experience-sec .experience__content .tag {
  margin-bottom: 20px;
  text-transform: uppercase;
}
.experience-sec .experience__content .title {
  margin-bottom: 12px;
  text-transform: uppercase;
}
.experience-sec .experience__content .sub {
  margin-bottom: 24px;
  text-transform: uppercase;
}
.experience-sec .experience__content .time {
  gap: 12px;
  margin-top: 24px;
}
.experience-sec .experience__container {
  padding: 0 40px;
}
.experience-sec .experience__container .row {
  margin-bottom: 120px;
}
/* end css page experience */

/* css page rewards */
.wink-rewards-sec {
  padding: 0 40px;
}
.rewards__content {
  position: sticky;
  top: 120px;
}

.rewards__box .tag {
  text-transform: uppercase;
  margin-bottom: 32px;
}
.rewards__box .title {
  margin-bottom: 24px;
}
.rewards__box .desc p {
  margin-bottom: 24px;
}
.rewards__box .desc p:last-child {
  margin-bottom: 0;
}
.rewards__box .desc {
  margin-bottom: 48px;
}
/* .page-details-blogs-highlight .meeting-sec {
  padding-top: 160px;
} */
.meeting-sec.about-company .desc {
  margin-bottom: 0;
}
.rewards__box .rewards-button {
  /* margin-bottom: 24px; */
}
.rewards__box .rewards-note a {
  position: relative;
}
.rewards__box .rewards-note a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
  bottom: -4px;
  left: 0;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}
.rewards__box .rewards-note a:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.rewards__box .rewards-note a:hover {
  color: var(--color-primary);
}
.rewards__social {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  padding-top: 40px;
}
.rewards__social .social__item {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 40px 50px;
  transition: all 0.3s;
}
.rewards__social .social__item:hover {
  border: 1px solid var(--color-primary);
  background-color: var(--color-primary);
}
.rewards__social .social__item:hover .rewards__name,
.rewards__social .social__item:hover .rewards__text {
  color: var(--color-white);
}

.rewards__social .social__item .rewards__icon {
  margin-bottom: 24px;
  position: relative;
}
.rewards__social .social__item .rewards__icon .ic-h {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}
.rewards__social .social__item:hover .rewards__icon .ic-h {
  opacity: 1;
  visibility: visible;
}
.rewards__social .social__item .rewards__name {
  margin-bottom: 12px;
  transition: all 0.3s;
  text-align: center;
}
.rewards__social .social__item .rewards__text {
  text-transform: uppercase;
  text-align: center;
  transition: all 0.3s;
}
.wink-rewards-faqs {
  padding: 120px 0;
  background-color: var(--color-white);
}
.wink-rewards-faqs .title {
  margin-bottom: 40px;
}
.faqs .accordion-button::after {
  background-image: url("../images/ic_arrow_down.svg");
  background-size: contain;
  width: 10px;
  height: 5px;
}
.faqs .accordion-button:not(.collapsed)::after {
  background-image: url("../images/ic_arrow_up.svg");
  transform: rotate(0deg);
}
.faqs .accordion-button:not(.collapsed) {
  color: var(--color-primary);
  background-color: var(--color-white);
}
.faqs .accordion-item {
  border-left: none;
  border-right: none;
  border-radius: 0;
  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
  position: relative;
}
.faqs .accordion-item::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -2px;
  background: var(--color-black);
  z-index: 2;

  left: 0;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.faqs .accordion-item:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.faqs .accordion-item:first-child {
  border-top: none;
}
.faqs .accordion-item:has(.accordion-collapse.show)::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.faqs .accordion-item:first-of-type .accordion-button {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.faqs .accordion-button:not(.collapsed):hover::after {
  transform: unset !important;
  background-image: url(../images/ic_arrow_up.svg);
}
.faqs .accordion-item .accordion-button {
  padding: 16px 0;
}
.faqs .accordion-item .accordion-button:focus {
  border-color: var(--color-white);
  box-shadow: none;
}
.faqs .accordion-button:hover::after {
  background-image: url(../images/ic_arrow_down_red.svg);
}
.faqs .accordion-item .accordion-button:hover {
  color: var(--color-primary);
}
.faqs .accordion-button:not(.collapsed) {
  box-shadow: none;
}
.faqs .accordion-body {
  padding-left: 0;
  padding-top: 0;
  padding-bottom: 40px;
  position: relative;
}
.faqs .accordion-body .desc p {
  margin-bottom: 8px;
}
.faqs .accordion-collapse {
  position: relative;
}
.faqs .accordion-body::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-black);
  display: none;
}
/* end  css page rewards */
/* css page event */
.meeting-sec {
  padding: 0 40px;
}
.meeting-sec .faqs {
  padding-top: 40px;
}
.meeting-sec .faqs .accordion-button {
  background-color: var(--color-gray-10);
}
.meeting-sec .faqs .accordion-body {
  background-color: var(--color-gray-10);
}

.meeting-sec .faqs .accordion-body .desc {
  margin-bottom: 24px;
}
.meeting-list-sec {
  background-color: var(--color-white);
  padding-top: 120px;
}
.meeting-list-sec .experience__content .title {
  margin-bottom: 64px;
}
.meeting-list-sec .experience__content .desc br {
  display: block !important;
  content: "" !important;
  margin-bottom: 24px !important;
}
.meeting-list-sec .experience__content .desc ul {
  list-style-type: disc;
  padding-left: 15px;
}
.rewards-sec-event {
  overflow: hidden;
}
.rewards-sec-event .rewards-sec__img {
  background-color: var(--color-gray-10);
}
.rewards-sec-event .rewards-sec__box {
  max-width: 670px;
}
.rewards-sec-event .rewards-sec__container {
  background: url("../images/bg_rewards_medium.svg"),
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.8) 0.5px,
      var(--color-primary) 1px
    );
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 570px;
}
.swiper-suites .swiper-slide {
  overflow: hidden;
}
.modal {
  background-color: rgba(0, 0, 0, 0.85);
}
.modalBookRoom .modal-header {
  position: relative;
  border: none;
  padding: 0;
}
.modalBookRoom .modal-footer {
  border: none;
}
.modalBookRoom .modal-header .btn-close {
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(-100%);
  width: 60px;
  height: 60px;
  background-image: none;
  background-color: var(--color-black);
  opacity: 1;
  border-radius: 0;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-backdrop {
  display: none;
}
.watch-video {
  transition: all 0.3s;
}
.watch-video:hover {
  color: var(--color-white);
}
.modalBookRoom .modal-dialog {
  max-width: 670px;
  transform: translateY(30px);
  /* height: 500px; */
}
.modalWatch.modalBookRoom .modal-dialog {
  max-width: 1150px;
  width: 100%;
  min-height: calc(100vh);
  /* transform: translateY(20%); */
}
.modalWatch.modalBookRoom .modal-content {
  height: 100%;
}
.modalWatch.modalBookRoom .modal-body {
  padding: 0;
}
.modalBookRoom .modal-header .btn-close:focus {
  box-shadow: none;
}
.modalWatch .embed-container {
  position: relative;
  padding-bottom: 42.85%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.modalWatch .embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.modalBookRoom .modal-body {
  padding: 40px;
  border-bottom: 6px solid var(--color-primary);
}
.modalBookRoom .modal-body .head {
  margin-bottom: 40px;
}
.modalBookRoom .modal-body .desc {
  margin-top: 24px;
}

.modalBookRoom .modal-body .body .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.modalBookRoom .modal-body .body .desc h5 {
  margin-bottom: 12px;
}
.modalBookRoom .modal-body .body .desc ul {
  display: flex;
  gap: 32px;
  align-items: center;
  flex-wrap: wrap;
}
.modalBookRoom .modal-body .body .desc ul li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.modalBookRoom .modal-body .body .desc ul li img {
  width: 24px;
  height: 24px;
}
.modalBookRoom .modal-body .deals__view {
  margin-top: 40px;
}
.modalBookRoom .modal-content {
  border-radius: 0;
}

#modalContactUsEvent .modal-header {
  position: relative;
  border: none;
  padding: 40px 40px 0;
}
#modalContactUsEvent .dropdown-custom__menu {
  left: -15px;
  width: calc(100% + 15px);

  top: 44px;

  padding: 7px 15px;

  z-index: 99;

  background-color: var(--color-gray-10);
}
#modalContactUsEvent .select-head {
  border-bottom: 1px solid var(--color-gray-50);
}
#modalContactUsEvent .modal-footer {
  border: none;
}
#modalContactUsEvent .modal-header .btn-close {
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(-100%);
  width: 60px;
  height: 60px;
  background-image: none;
  background-color: var(--color-black);
  opacity: 1;
  border-radius: 0;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
#modalContactUsEvent .modal-header .btn-close:focus {
  box-shadow: none;
}
#modalContactUsEvent .modal-body {
  padding: 40px;
  border-bottom: 6px solid var(--color-primary);
}
#modalContactUsEvent .modal-body .deals__view {
  margin-top: 40px;
}
#modalContactUsEvent .modal-content {
  border-radius: 0;
}
#modalContactUsEvent .modal-body .box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 40px;
  align-items: flex-end;
}
#modalContactUsEvent .modal-body form {
  padding-top: 24px;
  border-top: 1px solid var(--color-gray-50);
}
#modalContactUsEvent .modal-body .box .right,
#modalContactUsEvent .modal-body .box .left {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.group-dropdown {
  z-index: 4;
}
#modalContactUsEvent .modal-body .box .right .group:last-child {
  z-index: 3;
}
#modalContactUsEvent .modal-body .group {
  height: 37px;
}
#modalContactUsEvent .modal-body .group .dropdown-custom {
  transform: translateY(-8px);
}
#modalContactUsEvent .modal-body .box .right {
}
#modalContactUsEvent .form-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--color-gray-50);
  padding-bottom: 12px;
  border-radius: unset;
}
#modalContactUsEvent .modal-body .group {
  position: relative;
  /* height: 45px; */
}

#modalContactUsEvent .modal-body .group .form-label {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  user-select: none;
  pointer-events: none;
  transition: top 0.3s;
  margin-bottom: 0;
}
#modalContactUsEvent .form-input:not(:placeholder-shown) + .form-label {
  top: -13px;
  display: inline-block;
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
}
#modalContactUsEvent .form-input:focus + .form-label {
  top: -13px;
  display: inline-block;
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
}
#modalContactUsEvent .form-input::placeholder {
  font-size: 16px;
  line-height: 26px;
  color: var(--color-black);
  letter-spacing: 0.04px;
}
#modalContactUsEvent .modal-dialog {
  max-width: 895px;
  padding-top: 70px;
}
.swiper-book-room {
  position: relative;
}
.swiper-book-room .swiper-slide {
  overflow: hidden;
}
.swiper-book-room .img {
  width: 100%;
  height: 340px;
}
.swiper-book-room .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swiper-book-room .swiper-button-next,
.swiper-book-room .swiper-button-prev {
  width: 44px;
  height: 44px;
  background-color: var(--color-white);
  top: unset;
  bottom: 0;
  transition: all 0.4s ease;
}
.swiper-book-room .swiper-button-next:hover,
.swiper-book-room .swiper-button-prev:hover {
  background-color: var(--color-header-hotels);
}
.swiper-book-room .swiper-button-next {
  right: 0;
}
.swiper-book-room .swiper-button-prev {
  left: auto;
  right: 44px;
}
.swiper-book-room .swiper-button-next.swiper-button-disabled,
.swiper-book-room .swiper-button-prev.swiper-button-disabled {
  opacity: 1;
}
.swiper-book-room .swiper-pagination-fraction {
  background-color: var(--color-black);
  width: 60px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
  color: var(--color-white);
  bottom: 0;
  left: auto;
  right: 88px;
}
/* end page event */
/* css page company */
.about-company .rewards__box .title {
  margin-bottom: 48px;
}
.about-company .rewards__content {
  position: static;
}
.about-company .about-company__desc {
  padding-top: 40px;
}
.about-company__desc br {
  content: "" !important;
  margin-bottom: 24px !important;
  display: none !important;
}
.comming-soon-company .comming-soon-company {
  margin-top: 32px;
}
.comming-soon-company .comming-soon__list--logo {
  margin-top: 32px;
  gap: 40px;
  flex-wrap: wrap;
}
/* end  page company */
/* css page career */
.career-intro-sec {
  background-color: var(--color-gray-10);
}
.career-intro-sec .container-page {
  /* display: flex;
  justify-content: center;
  align-items: center; */
  margin-left: 8.33333333%;
  width: calc(50% - 8.33333333%);
}
.career-intro-sec .container-page .box {
  max-width: 440px;
  width: 100%;
  position: static;
  align-items: start;
  justify-content: unset;
  padding-top: 175px;
}
.career-intro-sec .container-page .box h5 {
  margin-bottom: 24px;
}
.career-intro-sec .container-page .box .desc {
  margin-bottom: 32px;
}
.career-intro-sec .panels {
  background-color: var(--color-primary);
}
.career-intro-sec .panel {
  background-color: var(--color-primary);
  justify-content: unset;
}
.career-intro-sec .panels .box {
  padding-top: 175px;
  padding-left: 135px;
  padding-right: 50px;
}
.career-intro-sec .panels .box p {
  margin-bottom: 24px;
}
.career-intro-sec .container-page .box h2 {
  margin-bottom: 32px;
}
.career-intro-sec .comming-soon .panels .panel {
  /* background-color: var(--color-primary); */
  /* justify-content: start; */
}
.career-sec .career-list .career-item {
  width: 100%;
  height: 335px;
  background-color: red;
  margin-bottom: 40px;
}
.career-sec .career-list .career-item:nth-child(even) {
  background-color: yellow !important;
}
.career-list {
  position: relative;
}
.why-join-sec .facilities__item p {
  max-width: 100%;
}
.positions-hiring {
  background-color: var(--color-white);
  padding: 120px 0;
}
.positions-hiring__container .title {
  margin-bottom: 56px;
}
.position-list .position-item {
  display: grid;
  grid-template-columns: 3fr 2fr 1.5fr 1.5fr;
}
.position-list .position-link:hover {
  color: var(--color-primary);
}
.position-list .position-item .position-item-sub {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: end;
}
.position-list .position-item .position-item-sub .dropdown-custom__item {
  padding: 5px 0;
}
.position-list .position-item .position-item-sub .dropdown-custom__menu {
  padding: 5px 10px;
}
.position-list .position-item .position-item-sub .dropdown-custom__menu {
  top: 25px;
  background-color: var(--color-gray-10);
  left: unset;
  right: 13px;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.position-list .position-item .position-item-sub .dropdown-custom__btn {
  display: flex;
  gap: 12px;
  align-items: center;
}
.position-list .position-item .position-item-sub .dropdown-custom__text {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-black);
  font-weight: 900;
}
.position-list .position-item .position-item-sub .dropdown-custom__item {
  color: var(--color-black);
  text-align: right;
  width: max-content;
  font-weight: 900;
}
.position-list .position-item .position-item-sub .dropdown-custom__item:hover {
  color: var(--color-primary);
}
.position-list .position-filters {
  position: sticky;
  top: 60px;
  background-color: var(--color-white);
  z-index: 2;
  padding-bottom: 20px;
  padding-top: 20px;
  border-bottom: 2px solid var(--color-black);
}

.position-list .position-filters.fixed {
  position: sticky;
  top: 120px;
  right: 0;
  left: 0;
  z-index: 99;
  transition: top 0.9s;
  box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.05);
  margin-bottom: 0;
}
.position-list .position-filters.scrolling-up {
  top: 120px;
  background-color: var(--color-white);
}
.position-list .position-filters.scrolling-down {
  top: 60px;
  background-color: var(--color-white);
}
.position-list .position-item .position-item-sub:first-child {
  justify-content: start;
}
.position-list .position-item.sub {
  padding: 12px 0;
  border-bottom: 2px solid #ececec;
  position: relative;
}
.position-list .position-item.sub::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--color-black);
  bottom: -2px;
  left: 0;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}
.position-list .position-item.sub:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.position-list .position-item.sub .position-item-sub {
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: 0.04px;
  text-align: right;
}
.position-list .position-item.sub .position-item-sub:first-child {
  font-size: 20px;
  line-height: 36px;
  font-weight: 400;
}
/* end css page career */
/* css page wink earth */
.wink-earth .banner-hero__heading {
  bottom: 40px;
}
.earth-sec .about-company__desc {
  padding-top: 40px;
}
.our-reports__content .title {
  margin-bottom: 32px;
}
.our-reports__content .desc {
  margin-bottom: 24px;
}
.our-reports__content h2 {
  margin-bottom: 56px;
}
.our-reports__content .reports-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 40px;
}
.our-reports__content .reports-list .reports-item .name {
  margin-bottom: 4px;
}
.our-reports__content .reports-item ul {
  display: flex;
  align-items: center;
  gap: 5px 24px;
  flex-wrap: wrap;
}
.our-reports__content .reports-item ul li a {
  position: relative;
  min-width: max-content;
  display: block;
  transition: all 0.3s;
}
.our-reports__content .reports-item ul li a:hover {
  color: var(--color-primary);
}
.our-reports__content .reports-item ul li a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
  bottom: -4px;
  left: 0;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.our-reports__content .reports-item ul li a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.our-reports__content .reports-item ul li a::before {
  content: "";
  position: absolute;
  height: 70%;
  width: 1.5px;
  background-color: var(--color-grey);
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
}
.our-reports__content .reports-item ul li:last-child a::before {
  content: unset;
}
/* css page wink earth */
/* css page deals */
.hero-deals .hero-deals__inner {
  position: relative;
  width: calc(100% - 80px);
  margin: 0 auto;
  height: calc(100vh);
  padding-top: 160px;
}
.hero-deals__img {
  width: 100%;
  height: 100%;
  /* padding: 160px 40px 40px; */
  position: relative;
  overflow: hidden;
}
.hero-deals__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.4s ease;
  transform: scale(1);
}
.hero-deals__img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 1.06%, #000000 75%);
  z-index: 1;

  display: none;
}
.hero-deals__content {
  position: absolute;
  z-index: 2;
  left: 80px;
  bottom: 80px;
  max-width: 600px;
  width: 100%;
}
.hero-deals__content .box .name,
.hero-deals__content .box .title {
  margin-bottom: 12px;
}
.hero-deals__content .box .desc {
  margin-bottom: 32px;
}
.deals-hotels .hotels__item .hotels__content .tag {
  margin-bottom: 12px;
}
.deals-hotels .hotels__item .hotels__content .hotels__title {
  margin-bottom: 24px;
}
.deals-hotels .hotels__item .hotels__title {
  transition: all 0.3s;
}
.deals-hotels .hotels__item:hover .hotels__title {
  color: var(--color-primary);
}
.deals-details-sec {
  padding: 200px 40px 120px;
}
.deals-details-sec .box .name {
  margin-bottom: 32px;
}
.deals-details-sec .box .img {
  width: 100%;
  aspect-ratio: 668 / 375;
  margin-bottom: 32px;
}
.deals-details-sec .box .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.deals-details-sec .box .desc br {
  content: "" !important;
  display: block !important;
  margin-bottom: 24px !important;
}
.deals-details-sec .box ul {
  margin-top: 12px;
  list-style-type: disc;
  padding-left: 15px;
}
.deals-details-sec .hot-deals {
  background-color: var(--color-white);
  position: sticky;
  top: 120px;
  padding: 40px;
}
.deals-details-sec .hot-deals h4 {
  margin-bottom: 40px;
}
.deals-details-sec .hot-deals ul li .item {
  display: grid;
  grid-template-columns: 4fr 6fr;
  padding-top: 12px;
  padding-bottom: 40px;
  border-bottom: 2px solid var(--color-gray-20);
}
.deals-details-sec .hot-deals ul li:last-child .item {
  padding-bottom: 0;
}
.deals-details-sec .hot-deals .item .desc ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.deals-details-sec .hot-deals .item .note {
  color: #a9a9a9;
  margin-top: 12px;
}
.sign-in-sec .note .line-sign {
  position: relative;
  display: inline-block;
}
.sign-in-sec .note .line-sign::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
  bottom: -4px;
  left: 0;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sign-in-sec .note .line-sign:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.deals-details-sec .hot-deals .item .desc ul li a {
  transition: all 0.3s;
  color: var(--color-black);
  position: relative;
}
.deals-details-sec .hot-deals .item .desc ul li a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
  bottom: -4px;
  left: 0;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.deals-details-sec .hot-deals .item .desc ul li a:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.deals-details-sec .hot-deals .item .desc ul li a:hover {
  color: var(--color-primary);
}
.deals-details-sec .hot-deals ul li:first-child .item {
  border-top: 2px solid var(--color-gray-20);
}
.deals-details-sec .hot-deals ul li:last-child .item {
  border-bottom: none;
}
/* end page deals */
/* css page blogs */
.blogs-sec {
  padding: 200px 40px 120px;
  background-color: var(--color-gray-10);
}
.blogs__item .name-city {
  margin-bottom: 56px;
}
.blogs__grid--col {
  display: grid;
  grid-template-columns: 7fr 5fr;
  grid-template-rows: 210px 210px;
  gap: 24px;
}
.blogs__list {
  display: flex;
  flex-direction: column;
  gap: 120px;
}
.blogs__item.grid-reverse .blogs__grid--col {
  grid-template-columns: 5fr 7fr;
}
.blogs__grid .blogs__grid--col--box {
  position: relative;
}

.blogs__grid--col--box .link {
  position: absolute;
  inset: 0;
  z-index: 3;
}
.blogs__grid--col--box .link:hover + .img img {
  transform: scale(1.05);
}
.blogs__grid--col--box
  .link:hover
  + .img
  + .content
  .hotels__btn--view
  .btn-more {
  gap: 16px;
}
.blogs__grid .blogs__grid--col--box .content {
  position: absolute;
  inset: 0;
  padding: 32px;
  display: flex;
  flex-direction: column;
  z-index: 2;
}
.blogs__grid .blogs__grid--col--box .content h3 {
  text-transform: uppercase;
}
.blogs__item.grid-reverse .blogs__grid--col--box:first-child {
  grid-column: 2 / span 1;
  grid-row: 1 / span 2;
}
.blogs__item.grid-reverse .blogs__grid--col--box:nth-child(2) {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
}
.blogs__item.grid-reverse .blogs__grid--col--box:last-child {
  grid-column: 1 / span 1;
  grid-row: 2 / span 1;
}
.blogs__grid .blogs__grid--col--box:first-child {
  grid-column: 1 / span 1;
  grid-row: 1 / span 2;
}
.blogs__grid .blogs__grid--col--box:nth-child(2) {
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
}
.blogs__grid .blogs__grid--col--box:last-child {
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
}
.blogs__grid .blogs__grid--col--box .img {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.blogs__grid .blogs__grid--col--box .img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.blogs__grid .blogs__grid--col--box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  overflow: hidden;
  transition: all 0.4s ease-in-out;
}
.blogs__grid .blogs__grid--col--box.highlight .content {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.blogs__grid .blogs__grid--col--box .content .hotels__btn--view {
  margin-top: auto;
}
.blogs__grid .blogs__grid--col--box .content .head {
  margin-bottom: 12px;
}

/* css page blogs */

/* css blogs detail */
.blogs-detail-content {
  padding-bottom: 80px;
}
.blogs-detail-content .content .wink-detail__btn {
  margin-bottom: 12px;
}
.blogs-detail-content .content .title {
  margin-bottom: 12px;
}
.blogs-detail-content .content .time {
  margin-bottom: 24px;
}
.blogs-detail-content .content .the-excerpt {
  margin-bottom: 56px;
}
.blogs-detail-content .content .the-content p.bold {
  font-weight: 900;
}
.blogs-detail-content .content .the-content br {
  content: "" !important;
  display: block !important;
  margin-bottom: 0 !important;
  height: 40px;
}
.blogs-detail-content .content .the-content figure {
  margin-top: 24px;
  margin-bottom: 40px;
}
.other-blogs .deals__content--top .title {
  margin-bottom: 32px;
}
.other-blogs .deals__content .deals__content--top .location {
  text-transform: unset;
}
.blogs-highlight-sec .hero-deals__img::before {
  content: unset;
}
.blogs-map {
  background-color: var(--color-white);
  padding: 120px 40px;
}
.blogs-map .map-text {
  text-align: center;
  margin-bottom: 56px;
}
.blogs-map .map-text .title {
  margin-bottom: 32px;
}
.blogs-map .map-iframe {
  width: 100%;
  height: 600px;
}
.blogs-map .map-iframe iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blogs-service {
  padding: 0 40px;
  background-color: var(--color-white);
  overflow-x: hidden;
}
.blogs-service .row {
  padding-bottom: 120px;
}
.latest-stories-sec .hotels__container .title {
  margin-bottom: 40px;
}
.latest-stories-sec .hotels__filter {
  justify-content: space-between;
}
.latest-stories-sec .hotels__content--top .head {
  margin-bottom: 12px;
}
.latest-stories-sec .hotels__content .title {
  margin-bottom: 32px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
/* css blogs detail */
/* css page contact */

.contact-sec .faqs .accordion-item .accordion-button,
.contact-sec .faqs .accordion-body {
  background-color: var(--color-gray-10);
}
.contact-sec .faqs .accordion-body .hotels__btn--view {
  margin-top: 24px;
}
.contact-sec .contact__content {
  padding-top: 160px;
}
.contact-sec .contact__content {
  padding-bottom: 120px;
}
.contact-sec .contact__content .title {
  margin-bottom: 40px;
}
.contact-sec .contact__form {
  background-color: var(--color-white);
  padding: 160px 40px 40px;
  height: max-content;
  position: sticky;
  top: 0px;
}
.contact-sec .contact__form h3 {
  margin-bottom: 24px;
}
.contact-sec .contact__form .desc {
  margin-bottom: 32px;
}
.contact-sec .contact__form .group {
  position: relative;
  margin-bottom: 32px;
}
.contact-sec .contact__form .group.up-file.active label {
  top: -17px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
}
.contact-sec .contact__form .group.up-file .icon {
  position: absolute;
  right: 0;
  top: 7px;
}
.contact-sec .contact__form .group input {
  width: 100%;
  border: none;
  border-bottom: 1px solid #a9a9a9;
  padding-bottom: 8px;
  border-radius: unset;
}
.contact-sec .contact__form .group textarea {
  border: none;
  resize: none;
  width: 100%;
  border-bottom: 1px solid #a9a9a9;
  border-radius: unset;
}
.contact-sec .contact__form .select-head {
  border-bottom: 1px solid #a9a9a9;
}
.contact-sec .contact__form .group .form-label {
  position: absolute;
  left: 0;
  top: 4px;
  user-select: none;
  pointer-events: none;
  transition: top 0.3s;
  margin-bottom: 0;
}
.contact-sec .contact__form .up-file .form-label {
  pointer-events: auto;
}
.custom-file-input {
  height: 35px;
  text-indent: -9999px;
  position: relative;
  z-index: 1;
}
.custom-file-input.has-file {
  text-indent: unset;
}
.up-file p {
  position: absolute;
  bottom: 5px;
  left: 0;
}
.up-file label {
  top: -17px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
}
.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::file-selector-button {
  display: none;
}

.custom-file-input:active {
  outline: 0;
}
.contact-sec .contact__form .group .form-label {
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.04rem;
  font-weight: normal;
}
.contact-sec .contact__form .form-input:not(:placeholder-shown) + .form-label {
  top: -17px;
  display: inline-block;
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
  color: var(--color-black-50);
}
.contact-sec .contact__form textarea:not(:placeholder-shown) + .form-label {
  top: -17px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
  color: var(--color-black-50);
}
.contact-sec .contact__form textarea:focus + .form-label {
  top: -17px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
  color: var(--color-black-50);
}
.deals-details-sec.contact-sec .contact__form textarea:focus + .form-label {
}
.contact-sec .contact__form .form-input:focus + .form-label {
  top: -17px;
  display: inline-block;
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
  color: var(--color-black-50);
}

.contact-sec .dropdown-custom__menu {
  left: -15px;
  width: calc(100% + 15px);
  background-color: var(--color-gray-10);
  padding: 7px 15px;
  top: 44px;
}
.contact-sec .dropdown-custom__menu .dropdown-custom__item,
.modalContactUsEvent .dropdown-custom__menu .dropdown-custom__item {
  padding: 7px 0;
  white-space: normal;
  max-width: max-content;
}
.contact-sec .dropdown-custom__menu .dropdown-custom__item,
.modalContactUsEvent .dropdown-custom__menu .dropdown-custom__item {
  padding: 5px 0;
  font-size: 16px;
  line-height: 26px;
  text-transform: capitalize;
}
.contact-sec .contact__form .checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 56px;
}
.contact-sec .contact__form .checkbox .ic-check {
  position: relative;
}
.contact-sec .contact__form .checkbox .ic-check .check-mark {
  width: 20px;
  height: 20px;
  position: relative;
  background-color: #d9d9d9;
  display: block;
}
.contact-sec .contact__form .checkbox .ic-check input[type="checkbox"] {
  position: absolute;
  z-index: 2;
  opacity: 0;
  width: 20px;
  height: 20px;
}
.contact-sec
  .contact__form
  .checkbox
  .ic-check
  input[type="checkbox"]:checked
  + .check-mark {
  background-color: var(--color-black);
  background-image: url("../images/ic_check_white.svg");
  background-repeat: no-repeat;
  background-position: center;
}
/* css page contact */

/* page career detail */
.career-intro-sec .animate-right {
  display: flex;
  justify-content: center;
  width: 100%;
}

.career-intro-sec .animate-right .box {
  transform: translateY(50px);
  transition: all 0.4s;
  opacity: 0;
  z-index: -1;
}

.career-intro-sec .animate-right:not(:first-child).show {
  position: absolute;
  top: 0;
  left: 0;
}

.career-intro-sec .animate-right.show .box {
  transform: translateY(0);
  opacity: 1;
  z-index: 1;
  width: 100%;
}

.career-intro-sec .panel {
  background-color: var(--color-primary);
  transition: all 0.4s;
}
.career-content-sec .contact__form {
  padding: 40px;
  top: 120px;
  margin-right: 40px;
}
.career-content-sec .career-box .title {
  margin-bottom: 32px;
}
.career-content-sec .career-table {
  margin-bottom: 32px;
}
.career-content-sec .career-table ul li .item {
  display: grid;
  align-items: center;
  grid-template-columns: 2fr 4fr;
  padding: 16px 0;
  border-bottom: 2px solid #a9a9a9;
}
.career-content-sec .career-desc ul {
  list-style-type: disc;
  padding-left: 15px;
  margin: 0;
}
.career-content-sec .career-desc ul li p {
  margin-bottom: 0;
}
.career-content-sec .career-desc p {
  margin-bottom: 12px;
}
.career-content-sec .career-desc br {
  content: "" !important;
  display: block !important;
  margin-bottom: 32px !important;
}
.career-content-sec .career-table ul li:first-child .item {
  border-top: 2px solid #a9a9a9;
}

.career-content-sec {
  position: relative;
}
.career-content-sec .career-box {
  margin-left: 80px;
}
.wrapper-cta__share {
  position: sticky;
  top: 120px;
  left: 40px;
  width: max-content;
  height: max-content;
}
.wrapper-cta__share:hover .main-icon {
  transform: scale(1.05);
}
.wrapper-cta__share:hover li {
  opacity: 1;
  visibility: visible;
}
.wrapper-cta__share:hover::after {
  content: "";
  background-color: transparent;
  width: 100%;
  height: 78px;
  position: absolute;
  top: 100%;
  left: 0;
}
.wrapper-cta__share:hover li:first-child {
  transform: translateY(18px);
}
.wrapper-cta__share:hover li:nth-child(2) {
  transform: translateY(62px);
}
.wrapper-cta__share .main-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-black);
  cursor: pointer;
  transition: all 0.4s ease;
}
.wrapper-cta__share .main-icon svg {
  margin-left: -2px;
}
.wrapper-cta__share ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}
.wrapper-cta__share ul li {
  width: 32px;
  height: 32px;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  z-index: 1;
  transform: translateY(0);
  transition: all 0.4s cubic-bezier(0.15, 0.2, 0.1, 1);
}
.wrapper-cta__share ul li:nth-child(2) {
  transition: all 0.45s cubic-bezier(0.15, 0.2, 0.1, 1);
}
.wrapper-cta__share ul li a {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid var(--color-black);
  background-color: var(--color-gray-10);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
}
.wrapper-cta__share ul li svg path {
  transition: all 0.4s ease;
}
.wrapper-cta__share ul li a:hover {
  border: 1px solid var(--color-primary);
  background-color: var(--color-primary);
}
.wrapper-cta__share ul li a:hover svg path {
  fill: var(--color-white);
}
@media (max-width: 992px) {
  .wrapper-cta__share {
    position: relative;
    left: unset;
    top: unset;
    margin-bottom: 12px;
  }
  .wrapper-cta__share .main-icon {
    background-color: var(--color-black);
  }
  .wrapper-cta__share .main-icon svg path {
    fill: var(--color-white);
  }
  .wrapper-cta__share ul {
    margin-top: 0;
    margin-bottom: 12px;
  }
  .wrapper-cta__share ul li {
    transform: translateY(-40px);
  }
  .wrapper-cta__share:hover li:first-child {
    transform: translateY(-70px);
  }
  .wrapper-cta__share:hover li:nth-child(2) {
    transform: translateY(-115px);
  }
  .wrapper-cta__share:hover .main-icon {
    transform: none;
  }
}

/* page career detail */
/* css page member login */
.member-login .banner-hero__container {
  height: 540px;
}
.member-login .banner-hero__container::before {
  content: unset;
}
.member-contact .member-box {
  background-color: var(--color-white);
  padding: 80px 115px 80px;
  margin-top: -120px;
}
.member-contact .member-box .head {
  text-align: center;
  margin-bottom: 56px;
  padding: 0 100px;
}
.member-contact .member-box .head h2 {
  margin-bottom: 32px;
}
.member-contact .member-box .social ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 1px solid #d9d9d9;
}
.member-contact .member-box .social ul li .item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.member-contact .form {
  margin-top: 36px;
}
.member-contact .form .box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 40px;
}
.member-contact .form-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--color-gray-50);
  padding-bottom: 8px;
  border-radius: unset !important;
}
.member-contact .form-input[type="password"] {
  -webkit-text-security: disc;
  -moz-webkit-text-security: disc;
  -moz-text-security: disc;
  font-family: "SFU Futura", sans-serif;
}
.member-contact .group {
  position: relative;
}
.member-contact .group .icon-eye {
  position: absolute;
  right: 0;
  top: 4px;
  width: 24px;
  height: 24px;
  background-image: url("../images/ic_eye_hidden.svg");
  transition: background-image 0.3s;
  background-size: cover;
  background-repeat: no-repeat;
}
.member-contact .group .icon-eye.change-icon {
  background-image: url("../images/ic_eye_show.svg");
}
.member-contact .group .form-label {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  user-select: none;
  pointer-events: none;
  transition: top 0.3s;
  margin-bottom: 0;
}
.member-contact .form-input:not(:placeholder-shown) + .form-label {
  top: -13px;
  display: inline-block;
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
}
.member-contact .form-input:focus + .form-label {
  top: -13px;
  display: inline-block;
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
}
.member-contact .form-input::placeholder {
  font-size: 16px;
  line-height: 26px;
  color: var(--color-black);
  letter-spacing: 0.04px;
}
.member-contact .form .box {
  margin-bottom: 24px;
}
.member-contact .form .note {
  margin-bottom: 40px;
}
.member-contact .form .note ul {
  list-style-type: disc;
  padding-left: 15px;
}
.member-contact .tick {
  display: grid;
  grid-template-columns: 1fr 3fr;
  margin-bottom: 40px;
}
.member-contact .checkbox {
  display: flex;
  gap: 12px;
}
.member-contact .checkbox .ic-check {
  position: relative;
}
.member-contact .checkbox .ic-check .check-mark {
  width: 20px;
  height: 20px;
  position: relative;
  background-color: #d9d9d9;
  display: block;
}
.member-contact .checkbox .ic-check input[type="checkbox"] {
  position: absolute;
  z-index: 2;
  opacity: 0;
  width: 20px;
  height: 20px;
}
.member-contact
  .checkbox
  .ic-check
  input[type="checkbox"]:checked
  + .check-mark {
  background-color: var(--color-black);
  background-image: url("../images/ic_check_white.svg");
  background-position: center;
  background-repeat: no-repeat;
}
.member-contact .deals__view {
  margin-top: 0;
}
.member-contact .form-submit {
  margin-top: 56px;
}
.member-contact .form-submit .sign-in a {
  position: relative;
}
.member-contact .form-submit .sign-in a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
  bottom: -4px;
  left: 0;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.member-contact .form-submit .sign-in a:hover {
  color: var(--color-primary);
  text-decoration: none;
}
.member-contact .form-submit .sign-in a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.page-tpl-member-login {
  position: relative;
}
.page-tpl-member-login .member-contact {
  position: absolute;
  top: 420px;
}
.member-contact-overlay {
  height: 850px;
}
.review-sec .hotels__grid {
  grid-template-columns: 1fr 1fr;
  gap: 40px 24px;
}

.review-sec .hotels__container {
  padding-top: 160px;
  padding-bottom: 40px;
}
#modalSignIn .modal-body {
  padding: 40px;
}
#modalSignIn .modal-content {
  border-radius: 0;
}
#modalSignIn .modal-header {
  padding: 0;
  position: relative;
}
#modalSignIn .modal-header .btn-close {
  position: absolute;
  width: 60px;
  height: 60px;
  background-color: var(--color-black);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  border-radius: 0;
  right: 0;
  top: 0;
  transform: translateY(-100%);
  padding: 0;
  margin: 0;
}
#modalSignIn .modal-header .btn-close:focus {
  box-shadow: none;
}
.sign-in-sec .member-contact {
  background-color: var(--color-white);
}
.sign-in-sec .member-contact .nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 40px !important;
}
.sign-in-sec .member-contact .nav .nav-link {
  width: 100%;
  text-align: left;
  background-color: transparent;
  color: var(--color-gray-50);
  font-size: 20px;
  line-height: 32px;
  font-weight: 900;
  padding: 0;
  border-radius: 0;
  position: relative;
}
.sign-in-sec .member-contact .nav .nav-link.active {
  color: var(--color-primary);
}
.sign-in-sec .member-contact .nav .nav-link.active::after {
  background-color: var(--color-primary);
}
.sign-in-sec .member-contact .nav .nav-link:hover {
  color: var(--color-primary);
}
.sign-in-sec .member-contact .nav .nav-link::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #a9a9a9;
  left: 0;
  bottom: -4px;
  z-index: 1;
}
.sign-in-sec .member-contact .nav .nav-link::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
  bottom: -4px;
  left: 0;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}
.sign-in-sec .member-contact .nav .nav-link:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.sign-in-sec .member-contact h3 {
  margin-bottom: 24px;
}
.sign-in-sec .member-contact .desc {
  margin-bottom: 40px;
}
.sign-in-sec .member-contact .group {
  margin-bottom: 32px;
}
.sign-in-sec .member-contact .checkbox {
  margin-bottom: 56px;
}
.sign-in-sec .note-list ul li a:hover {
  color: var(--color-primary);
}

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
/* css page member login */
.map-new {
  /* overflow-y: hidden; */
}
.map-new .map__marker {
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

.map-new .wink-head-office {
  position: absolute;
  right: 64px;
  /* bottom: 273px; */
  position: absolute;
  top: 50%;
  transform: translate(10%, -50%);
  max-width: 440px;
  width: 100%;
  opacity: 0;
  transition: all 0.6s ease;
}
.map-new .wink-head-office .desc p {
  letter-spacing: 0.04rem;
}
.amenities__top .amen-right .box-detail .head h3 {
  width: calc(100% - 60px);
  text-align: center;
}
#modalOffer .custom__btn.book-detail {
  min-width: max-content;
}
@media (min-width: 1300px) {
  .map-new .wink-head-office {
    top: calc(50% - 100px);
  }
}
@media (max-width: 1200px) {
  .map-new .wink-head-office {
    max-width: 340px;
  }
}
@media (max-width: 1280px) and (min-width: 991px) {
  .footer__container--top {
    background-position: bottom right;
  }
  .map.homepage .map__marker {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .amenities__content .desc,
  .experience__content .desc {
    max-width: 320px;
  }
  .room-facilities__list {
    grid-template-columns: repeat(4, 1fr);
  }
  #modalOffer .modal-content-offer .offer-right {
    padding-right: 100px !important;
  }
  #modalOffer .modal-content-offer .offer-left .img {
    left: 60px !important;
  }
  .modalWatch .embed-container {
    padding-bottom: 56.25%;
  }
  .career-intro-sec .container-page {
    margin: 0 auto;
  }
  .career-intro-sec .animate-right .box {
    padding: 0;
    margin: auto;
    margin-right: 40px;
    width: calc(100% - 19%) !important;
  }
  .career-intro-sec .comming-soom__count {
    width: 120px;
    height: 90px;
  }
}
@media (max-width: 992px) and (min-width: 768px) {
  .map-new .wink-head-office {
    max-width: 35%;
    right: 40px;
  }
  .map-new .wink-head-office h3 {
    font-size: 32px;
    margin-bottom: 10px !important;
  }
  .map-content-detail .box-body .img {
    height: 155px;
  }
  .map-content-detail .box-body .content {
    padding: 20px;
  }
  .map-content-detail {
    max-width: 45%;
  }
  .map-content {
    max-width: 45%;
  }
  .map.homepage .map__marker {
    max-width: 45%;
  }
  .map__marker .marker-content {
    padding: 20px 60px;
  }
  .map-content .box .box-body .item {
    padding: 20px 60px;
  }
  .map-content-detail .box-body .content h5 {
    margin-bottom: 15px;
  }
  .map-content-detail .box-body .content .desc {
    gap: 5px;
    margin-bottom: 20px;
  }
  .map__marker h2 {
    margin-bottom: 16px;
  }
  .map__marker .marker:last-child .marker-content {
    border-bottom: unset;
  }
  .map__marker .marker:last-child .marker-content::after {
    content: none;
  }
}
.map-new .wink-head-office.show {
  transform: translate(0, -50%);
  opacity: 1;
  transition: all 0.6s ease;
}
@media (max-width: 767px) {
  .wink-head-office-mobile {
    background-color: #ececec;
    padding-top: 64px;
    padding-left: 32px;
    padding-right: 32px;
    padding-bottom: 32px;
  }
  .wink-head-office-mobile h3 {
    margin-bottom: 24px;
  }
  .page-details-deals .deals-details-sec {
    padding-bottom: 0 !important;
  }
  .deals-details-sec .hot-deals ul li .item {
    padding-bottom: 12px;
  }
  .deals-details-sec .hot-deals {
    margin-top: 56px;
  }
  .wink-detail-sec .wink-detail__desc {
    margin-top: 0;
  }
  .title-hotels-details {
    display: none;
  }
  .modalWatch .embed-container {
    padding-bottom: 56.25%;
  }
  #modalOffer .modal-content-offer {
    grid-template-columns: 1fr;
  }
  .map-new .wink-head-office.show {
    transform: none;
  }
}
.map-new .wink-head-office h3 {
  margin-bottom: 32px;
}
.map-new .ic-wink-head {
  position: absolute;
  bottom: 35%;
  left: 51%;
  transform: translateX(-190px);
  z-index: 2;
}
.map-new .ic-wink-head p {
  margin-bottom: 8px;
}
.map-new .map-content-wrapper {
  opacity: 1;
  visibility: visible;
  display: none;
}
.map-new .marker-detail {
  opacity: 1;
  display: none;
}
.footer__container--bottom-overlay .footer__container--bottom {
  position: static;
  opacity: 0;
}

.lightpick {
  border-radius: 0;
  padding: 16px;
}

.select-box .min,
.select-box .plus {
  cursor: pointer;
}
.alert-success,
.alert-success-sign-in {
  position: fixed;
  right: 0;
  top: 120px;
  z-index: 1200;
  clip-path: polygon(7% 0, 100% 0, 100% 100%, 0% 100%);
  padding: 0 20px;
  transform: translateX(100%);
  transition: all 0.5s;
  color: #0f5132;
  background-color: #d1e7dd;
  border-color: #badbcc;
}
.alert-success.show,
.alert-success-sign-in.show {
  transform: translateX(0);
}

.alert-success .alert-inner,
.alert-success-sign-in .alert-inner {
  padding: 10px 20px;
  position: relative;
}
.alert-success .alert-inner .progress-type,
.alert-success-sign-in .alert-inner .progress-type {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #007f16;
  bottom: 0;
  right: 0;
}
.alert-success .alert-inner .progress-type.show,
.alert-success-sign-in .alert-inner .progress-type.show {
  animation: changeWidth 5s linear forwards;
}

.swiper-book-room-main {
  position: relative;
  padding-bottom: 50px;
}
.swiper-book-room-main > .swiper-child-control .swiper-button-next,
.swiper-book-room-main > .swiper-child-control .swiper-button-prev,
.swiper-book-room-main > .swiper-child-control .swiper-pagination {
  position: absolute;
  bottom: -10px;
  top: unset;
  left: unset;
  width: max-content;
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
  letter-spacing: 0.04rem;
  line-height: 100%;
  color: var(--color-black);
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
}
.swiper-book-room-main > .swiper-child-control .swiper-button-prev {
  right: 120px;
}
.swiper-book-room-main > .swiper-child-control .swiper-button-next {
  right: 0;
}
.swiper-book-room-main > .swiper-child-control .swiper-pagination {
  gap: 0;
  right: 60px;
  transform: translateX(-50%);
}
@media (max-width: 767px) {
  .swiper-book-room-main {
    padding-bottom: 60px;
  }
  .swiper-book-room-main > .swiper-child-control .swiper-button-next,
  .swiper-book-room-main > .swiper-child-control .swiper-button-prev,
  .swiper-book-room-main > .swiper-child-control .swiper-pagination {
    bottom: 0;
  }
}

@keyframes changeWidth {
  100% {
    right: calc(120% + 40px);
  }
}
.intro {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 9999;
}
.intro .image-container {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
.intro .image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.intro .intro-inner {
  position: relative;
  width: 100vw;
  height: 100vh;
}
.intro .intro-inner .image-signature {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  z-index: 2;
}
.intro .intro-inner .image-signature .box {
  width: 100px;
  height: 150px;
  background-color: var(--color-primary);
  overflow: hidden;
  clip-path: polygon(30% 0, 100% 0, 70% 100%, 0% 100%);
  transform: skew(-15deg);
}
.content-terms {
  padding-top: 180px;
}
.content-terms .title {
  margin-bottom: 56px;
}
.content-terms .desc ul {
  list-style-type: disc;
  padding-left: 20px;
  margin-top: 24px;
}
.page-tpl-suites .wink-room__suites .box .box-desc .wink-facilities ul {
  height: auto;
  list-style-type: none;
  padding-left: 0;
}
#modalSuites .modal-header {
  position: relative;
  border: none;
  padding: 0;
}
.text-area-group {
  margin-top: 40px;
}
#modalSuites
  .modal-body
  .group
  .form-input:not(:placeholder-shown)
  + .form-label {
  top: -17px;
  display: inline-block;
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
  color: var(--color-black-50);
}
#modalSuites .modal-header {
  padding: 40px 40px 0;
}
#modalSuites .modal-body .group textarea:not(:placeholder-shown) + .form-label {
  top: -17px !important;
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
  color: var(--color-black-50);
}
#modalSuites .modal-body .group textarea:focus + .form-label {
  top: -17px !important;
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
  color: var(--color-black-50);
}
#modalSuites .book_hotel_form textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--color-gray-50);
  resize: none;
}
#modalSuites .modal-body .group .label-textarea {
  top: 0 !important;
}
#modalSuites .dropdown-custom__menu {
  background-color: var(--color-gray-10);

  left: -15px;
  width: calc(100% + 15px);

  top: 44px;

  padding: 7px 15px;

  z-index: 99;
}
#modalSuites .select-head {
  border-bottom: 1px solid var(--color-gray-50);
}
#modalSuites .modal-footer {
  border: none;
}
#modalSuites .modal-header .btn-close {
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(-100%);
  width: 60px;
  height: 60px;
  background-image: none;
  background-color: var(--color-black);
  opacity: 1;
  border-radius: 0;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
#modalSuites .modal-header .btn-close:focus {
  box-shadow: none;
}
#modalSuites .modal-body {
  padding: 40px;
  border-bottom: 6px solid var(--color-primary);
}
#modalSuites .modal-body .deals__view {
  margin-top: 40px;
}
#modalSuites .modal-content {
  border-radius: 0;
}
#modalSuites .modal-body .box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 40px;
  align-items: flex-end;
}
#modalSuites .modal-body .box .right,
#modalSuites .modal-body .box .left {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
#modalSuites .book_hotel_form {
  padding-top: 24px;
  border-top: 1px solid var(--color-gray-50);
}
#modalSuites .modal-body .box .right {
  gap: 24px;
}
#modalSuites .form-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--color-gray-50);
  padding-bottom: 12px;
}
#modalSuites .modal-body .group {
  position: relative;
}

#modalSuites .modal-body .group .form-label {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  user-select: none;
  pointer-events: none;
  transition: top 0.3s;
  margin-bottom: 0;
}
#modalSuites .form-input:not(:placeholder-shown) + .form-label {
  top: -13px;
  display: inline-block;
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
}
#modalSuites .form-input:focus + .form-label {
  top: -13px;
  display: inline-block;
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
}
#modalSuites .form-input::placeholder {
  font-size: 16px;
  line-height: 26px;
  color: var(--color-black);
  letter-spacing: 0.04px;
}
#modalSuites .modal-dialog {
  max-width: 895px;
  padding-top: 70px;
}
.career-content-sec .career-desc ul li p {
  font-size: 16px;
  line-height: 26px;
}
.page-details-deals .career-content-sec .contact__form {
  margin-right: 0;
}
@media (max-width: 895px) {
  #modalSuites .modal-dialog {
    margin-left: 40px;
    margin-right: 40px;
  }
}
@media (max-width: 767px) {
  .page-tpl-suites .wink-room__suites .box .box-desc .check {
    bottom: 31px;
    left: 24px;
  }
  .experience__item:nth-child(odd) .experience__box .experience__desc {
    padding-left: 84px;
  }
  .member-contact .deals__view {
    padding: 0;
  }
  .page-tpl-suites .wink-room__suites .box.open .box-desc ul {
    overflow-y: scroll;
  }
  .page-tpl-suites
    .wink-room__suites
    .box.open
    .box-desc
    ul::-webkit-scrollbar {
    display: none;
  }
  .member-contact .member-box {
    padding: 80px 16px 64px;
    margin-top: 0;
  }
  .member-login .banner-hero__container {
    height: 440px;
  }
  .member-contact .member-box .social ul {
    flex-wrap: wrap;
    gap: 18px;
  }
  .member-contact .form .box {
    display: grid;
    grid-template-columns: 1fr;
  }
  .member-contact .member-box .head {
    padding: 0;
  }
  .content-terms {
    padding: 108px 16px 0px;
  }
  .page-details-career .career-content-sec {
    padding-top: 0;
    padding-bottom: 0;
  }
  .page-details-career .career-content-sec .deals__view {
    justify-content: flex-end !important;
  }
  .review-sec .hotels__grid {
    grid-template-columns: 1fr;
    gap: 24px 0;
  }
  .review-sec .hotels__container {
    padding-top: 64px;
  }
  .sign-in-sec .member-contact {
    height: auto;
  }
  #modalSignIn .sign-in-sec .member-contact {
  }
  .career-box {
    margin-bottom: 64px;
  }
  #modalContactUsEvent .modal-body {
    padding: 48px 24px 40px;
  }

  .modalBookRoom .modal-body {
    padding: 16px;
  }
  #modalContactUsEvent .modal-body .box {
    grid-template-columns: 1fr;
  }
  .page-tpl-suites .wink-room__suites .box .box-desc .desc .check {
    bottom: -55px;
  }
  .page-tpl-suites .wink-room__suites .box .box-desc .box-read .wink-book {
    margin-top: 24px;
  }
  .page-tpl-suites .wink-room__suites .box .box-desc .box-read {
    padding: 24px;
  }
  .wink-detail-sec .title {
    margin-bottom: 24px;
  }
  .wink-detail__title {
    margin-bottom: 32px;
  }
  .wink-detail-sec.suite .wink-detail__title {
    margin-bottom: 0;
  }
  .page-tpl-suites .wink-room__suites .box {
    width: 100%;
  }
  .wink-detail-sec {
    padding: 0 16px;
  }
  .wink-detail__container {
    padding: 0 16px;
  }
  .wink-rewards-sec {
    padding: 0 16px;
  }
  .experience-sec .experience__img {
    min-height: 190px;
  }
  .experience-sec .experience__content .sub {
    font-size: 16px;
    line-height: 26px;
  }
  .experience-sec .experience__content .tag {
    margin-top: 24px;
    margin-bottom: 12px;
  }
  .experience-sec .experience__content .title {
    font-size: 28px;
    line-height: 36px;
  }
  .rewards__social .social__item .rewards__name {
    font-size: 20px;
    line-height: 32px;
  }
  .rewards__box .rewards-button {
    margin-bottom: 0;
    margin-top: 48px;
  }
  .wink-rewards-sec .rewards__box .rewards-button {
    margin-top: 0;
  }
  .rewards__box .desc p {
    margin-bottom: 12px;
  }
  .rewards__content .rewards__box .title {
    font-size: 28px;
    line-height: 36px;
  }
  .rewards-sec-event .rewards-sec__top .desc {
    max-width: 70%;
    margin: 0 auto;
  }
  .rewards__social {
    padding-top: 64px;
    gap: 8px;
  }
  .rewards__social .social__item {
    padding: 10px 14px;
  }
  .blogs-sec {
    padding: 108px 16px 64px;
  }
  .rewards__box .desc {
    margin-bottom: 48px;
  }
  .wink-rewards-faqs {
    padding: 64px 16px;
  }
  .wink-rewards-faqs .title {
    margin-bottom: 16px;
  }

  .blogs__list {
    gap: 64px;
  }
  .blogs__grid--col {
    gap: 24px 0;
  }

  .meeting-sec {
    padding: 0 16px;
  }
  .about-company .rewards__box .title {
    margin-bottom: 32px;
  }
  .about-company .about-company__desc {
    padding-top: 0;
  }
  .rewards__box .tag {
    margin-bottom: 24px;
  }
  .spacing {
    height: 64px;
  }
  .blogs-map {
    padding: 64px 16px;
  }
  .blogs-map .map-text .title,
  .blogs-map .map-text .desc {
    text-align: left;
  }
  .blogs-map .map-text .title {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: 0.84px;
  }
  .blogs-map .map-text {
    margin-bottom: 32px;
  }
  .blogs-service {
    padding: 0 16px;
    overflow-x: hidden;
  }
  .amenities__img {
    min-height: unset;
    height: 190px;
  }
  .blogs-service .row {
    padding-bottom: 64px;
  }
  .amenities__content .title {
    margin-bottom: 24px;
  }
  .blogs-service .amenities__content.--second .desc {
    margin-bottom: 0;
  }

  .footer .author-alpha {
    margin-top: 8px;
  }

  .hotels__filter.scrolling-up {
    top: 60px;
  }
  .hotels__grid {
    gap: 32px 0;
  }
  .hotels__content {
    padding: 24px;
  }
  .spacing-80 {
    height: 48px;
  }
  .contact-sec .contact__form {
    padding: 24px;
  }
  .contact-sec {
    padding: 108px 16px 64px !important;
  }
  .contact-sec .contact__form .desc {
    margin-bottom: 24px;
  }
  .deals__view {
    margin-top: 24px;
  }
  .contact-sec .contact__form .checkbox {
    margin-bottom: 24px;
  }
  .contact-sec .contact__content {
    padding-top: 64px;
    padding-left: 0;
    padding-right: 0;
  }
  .contact-sec .contact__content .title {
    margin-bottom: 24px;
    font-size: 28px;
    line-height: 36px;
  }
  .hero-deals__img {
    padding: 76px 16px 0;
  }
  .hero-deals__img::before {
    inset: 76px 16px 0px;
  }
  .hero-deals__content {
    left: 40px;
    right: 40px;
    width: auto;
    bottom: 24px;
  }
  .hero-deals__content .box .title {
    font-size: 28px;
    line-height: 36px;
    margin-bottom: 24px;
  }
  .hotels__filter {
    margin-bottom: 16px;
  }
  .deals-hotels .hotels__filter {
    margin-bottom: 16px;
  }
  .deals-hotels .hotels__result {
    margin-top: 16px;
  }
  .latest-stories-sec .hotels__result,
  .hotels .hotels__result {
    margin-top: 0;
  }
  .hotels__text {
    margin-bottom: 24px;
  }
  .hotels__image {
    min-height: 190px;
    padding-top: unset;
  }
  .hotels__image a {
    display: block;
    width: 100%;
    height: 100%;
  }
  .hero-deals .hero-deals__inner {
    height: 540px;
    margin: 0;
    width: 100%;
  }
  .hero-deals__content .box .desc {
    margin-bottom: 24px;
  }
  .deals-details-sec {
    padding: 108px 16px 64px;
  }
  .deals-details-sec .box {
    margin-bottom: 64px;
  }
  .deals-details-sec .hot-deals {
    padding: 24px;
  }
  .deals-details-sec .hot-deals ul li .item {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .deals-details-sec .box ul {
    padding-left: 20px;
  }
  .newsletter .news-group {
    flex-direction: column;
    align-items: flex-start !important;
  }
  .newsletter .news-group .content {
    margin-bottom: 0 !important;
  }
  .page-details-deals .other-wink-sec,
  .page-details-blogs .other-wink-sec {
    padding-bottom: 48px;
  }
  .blogs-detail-content .content {
    padding: 0 16px !important;
  }
  .blogs-detail-content {
    padding-bottom: 24px;
  }
  .meeting-list-sec {
    padding-top: 56px;
  }
  .experience-sec .experience__container {
    padding: 0 16px;
  }

  .meeting-list-sec .experience__content .title {
    margin-top: 24px;
    margin-bottom: 24px;
    font-size: 28px;
    line-height: 36px;
  }
  .experience-sec .experience__container .row {
    margin-bottom: 64px;
  }
  .our-reports__content {
    padding: 0 16px;
  }
  .our-reports__content .reports-list {
    grid-template-columns: 1fr;
    gap: 24px 0;
  }
  .our-reports__content .reports-item ul {
    flex-wrap: wrap;
    gap: 0 18px;
  }

  #modalSuites .modal-dialog {
    margin-left: 20px;
    margin-right: 20px;
  }

  .map-new .wink-head-office {
    bottom: 40%;
    max-width: 90%;
    left: 5%;
    padding: 10px;
    transform: none;
    background-color: var(--color-gray-10);
  }

  .map-new .wink-head-office h3 {
    margin-bottom: 24px;
  }

  .latest-stories-sec .hotels__container h2.title {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: 0.84px;
  }
  .deals-details-sec.contact-sec.career-content-sec {
    padding: 108px 16px 64px;
  }
}
.cta-mess.hide {
  right: -40px !important;
  visibility: visible;
  opacity: 0;
}

@media (min-width: 1023px) {
  body.overflow-hidden .footer .footer__container--bottom {
    margin-right: 17px;
  }
}
@media (min-width: 767px) and (max-width: 992px) {
  .footer__container--bottom {
    padding-bottom: 70px;
  }
}
.banner-hero__container {
  /* overflow: hidden; */
}
.banner-hero__container .embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.banner-hero__container .embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#modalBtnBook .modal-header {
  position: relative;
  border: none;
  padding: 0;
}
#modalBtnBook .dropdown-custom__menu {
  top: 50px;
  width: 100%;
  background-color: var(--color-gray-10);
}
#modalBtnBook .select-head {
  border-bottom: 1px solid var(--color-gray-50);
}
#modalBtnBook .modal-footer {
  border: none;
}
#modalBtnBook .modal-header .btn-close {
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(-100%);
  width: 60px;
  height: 60px;
  background-image: none;
  background-color: var(--color-black);
  opacity: 1;
  border-radius: 0;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
#modalBtnBook .modal-header .btn-close:focus {
  box-shadow: none;
}
#modalBtnBook .modal-body {
  padding: 40px;
  padding: 30px;
  border-bottom: 6px solid var(--color-primary);
}
#modalBtnBook .modal-body .deals__view {
  margin-top: 40px;
}
#modalBtnBook .modal-content {
  border-radius: 0;
}
#modalBtnBook .modal-body .box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 40px;
  align-items: flex-end;
  padding-top: 24px;
  border-top: 1px solid var(--color-gray-50);
}
#modalBtnBook .modal-body .box .right,
#modalBtnBook .modal-body .box .left {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
#modalBtnBook .form-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--color-gray-50);
  padding-bottom: 12px;
  border-radius: unset;
}
#modalBtnBook .modal-body .group {
  position: relative;
}
#modalBtnBook .modal-body .group .total-date {
  position: absolute;
  right: 0;
  top: 0px;
}
#modalBtnBook .modal-body .group .total-date #totalDays {
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
  color: var(--color-gray);
}
#modalBtnBook .modal-body .group .form-label {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  user-select: none;
  pointer-events: none;
  transition: top 0.3s;
  margin-bottom: 0;
}
#modalBtnBook .form-input:not(:placeholder-shown) + .form-label {
  top: -13px;
  display: inline-block;
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
}
#modalBtnBook .form-input:focus + .form-label {
  top: -13px;
  display: inline-block;
  font-size: 12px;
  line-height: 18px;
  font-weight: 900;
}
#modalBtnBook .form-input::placeholder {
  font-size: 16px;
  line-height: 26px;
  color: var(--color-black);
  letter-spacing: 0.04px;
}
#modalBtnBook .modal-dialog {
  max-width: 895px;
  padding-top: 70px;
}
#modalBtnBook .modal-body .banner-hero__form {
  padding: 0;
  border-bottom: 1px solid var(--color-gray-50);
  padding-bottom: 12px;
}
#modalBtnBook .modal-body .banner-hero__form .select-box.dropdown-up {
  top: 55px;
}
#modalBtnBook .modal-body .banner-hero__form .units .select-box {
  background-color: var(--color-gray-10);
  width: 100%;
  left: -15px;
  width: calc(100% + 15px);
}
#modalBtnBook .modal-body .box .left {
  gap: 12px;
}
#modalBtnBook .dropdown-custom__menu {
  left: -15px;
  width: calc(100% + 15px);
  top: 44px;
  padding: 7px 15px;
  z-index: 99;
}
#modalBtnBook .select-head {
  padding-bottom: 12px;
}
#modalBtnBook .dates-select {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-gray-50);
}
#modalBtnBook .dates-select input {
  border: none;
  width: 100px;
}
#modalBtnBook .modal-header .header-title {
  padding: 40px 30px 0;
}

.select-box .min,
.select-box .plus {
  width: 24px;
  height: 24px;
  border: 1px solid var(--color-gray-20);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}
.select-box .min:hover,
.select-box .plus:hover {
  background-color: var(--color-black);
}
.select-box .min:hover svg path,
.select-box .plus:hover svg path {
  fill: var(--color-white);
}
.select-box .min img,
.select-box .plus img {
  width: 100%;
  height: 100%;
}
.select-box .val {
  font-size: 16px;
  line-height: 24px;
}
.select-box .min:hover,
.select-box .plus:hover {
  border: 1px solid var(--color-black);
}
#modalOffer {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 9;
  transition: all 1s;
  opacity: 0;
  visibility: hidden;
}

#modalOffer.show {
  opacity: 1;
  visibility: visible;
}
#modalOffer.close-popup {
  opacity: 0;
  z-index: -1;
}
#modalOffer.close-popup::before {
  content: unset;
}
#modalOffer .modal-header {
  position: relative;
  border: none;
  padding: 0;
}
#modalOffer .modal-footer {
  border: none;
}
#modalOffer .modal-header .btn-close:focus {
  outline: none;
  border: none;
  box-shadow: none;
}
#modalOffer .modal-header .btn-close {
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(-100%);
  width: 60px;
  height: 60px;
  background-image: none;
  background-color: var(--color-black);
  opacity: 1;
  border-radius: 0;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}
#modalOffer .modal-header .btn-close:hover {
  background-color: var(--color-primary);
}
#modalOffer .modal-content-offer {
  background-image: url("../images/text_w.svg");
  background-color: var(--color-black);
  display: grid;
  grid-template-columns: 4fr 8fr;
  position: relative;
  border-radius: 0;
  background-repeat: no-repeat;
  background-size: 400px 300px;
}
#modalOffer .modal-body {
  padding: 0;
}
#modalOffer {
  background-color: rgba(0, 0, 0, 0.5);
}
#modalOffer .modal-dialog {
  max-width: 1440px;
}

#modalOffer .modal-content-offer .offer-left .img {
  position: absolute;
  bottom: 0px;
  left: 30px;
  width: 400px;
  height: 300px;
}
#modalOffer .modal-content-offer .offer-left .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#modalOffer .modal-content-offer .offer-right {
  display: flex;
  align-items: center;
  padding-top: 30px;
  padding-bottom: 45px;
  padding-right: 140px;
  gap: 120px;
}
#modalOffer .modal-content-offer .offer-right h2 {
  margin-bottom: 16px;
}
#modalOffer .modal-content-offer .offer-right .desc {
  /* margin-bottom: 24px; */
}
.btn-close {
  transition: all 0.4s;
}
.btn-close:hover {
  background-color: var(--color-primary) !important;
}
.page-details-blogs .blogs-detail-content {
  padding-top: 160px;
}
.page-details-career .career-content-sec {
  padding-top: 40px;
}
@media (max-width: 991px) {
  .page-details-deals .contact-sec .contact__form {
    margin-top: 56px !important;
  }
  .page-details-career .career-content-sec {
    padding-top: 40px !important;
  }
  .page-details-blogs .blogs-detail-content {
    padding-top: 100px;
  }
  #modalOffer {
    z-index: 999;
  }
  #modalOffer .modal-content-offer .offer-right {
    flex-direction: column;
    gap: 24px;
    align-items: flex-end;
    padding-bottom: 0;
  }
  .contact-sec .contact__form {
    margin-top: 56px;
  }
  .page-details-deals .deals-details-sec .box {
    margin-bottom: 0;
  }
  .blogs-map {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .blogs-service .row {
    padding-top: 56px;
  }
  .blogs-service .row {
    padding-bottom: 56px;
  }
  .hotels__result {
    margin-top: 24px;
  }
  .other-blogs,
  .other-wink-sec {
    padding-bottom: 64px;
  }
  .positions-hiring {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .wink-rewards-faqs {
    padding-bottom: 56px;
  }
  .meeting-list-sec {
    padding-top: 56px;
  }
  .experience-sec .experience__container .row {
    margin-bottom: 56px;
  }
  .amenities__bottom {
    padding: 56px 40px;
  }
  .spacing {
    height: 56px;
  }
  .wink-detail__desc {
    margin-top: 40px;
  }
  .wink-detail-sec.suite .wink-detail__desc {
    margin-top: 0;
  }
  .deals__img {
    aspect-ratio: unset;
  }
  .page-details-deals .deals-details-sec {
    margin-bottom: 56px;
  }
  .page-details-blogs-highlight .amenities__content.--second .desc {
    margin-bottom: 0;
  }
  .page-details-blogs-highlight .about-company__desc {
    padding-top: 0;
  }
  .about-company .rewards__box .title {
    margin-bottom: 24px;
  }
  .deals-sec .deals__view {
    justify-content: center !important;
  }
  .deals-sec.home .deals__view {
    justify-content: flex-start !important;
  }
  .page-tpl-suites .wink-detail-sec .wink-detail__desc .desc {
    margin-top: 24px;
  }
  .contact-sec.career-content-sec {
    padding-bottom: 0;
  }
  .footer__container--top {
    background-position: bottom right;
  }
  .map-content .box .box-head .name-city-hotel {
    padding-left: 0;
  }
  .hero-deals .hero-deals__inner {
    padding-top: 0;
  }
  .position-list .position-item.sub .position-item-sub:first-child {
    text-align: left;
  }
  .experience-sec .experience__content {
    max-width: 100%;
  }
  #modalOffer .modal-content-offer {
    display: flex;
    flex-direction: column-reverse;
    background-position: 100% 310px;
    background-size: 100% auto;
  }
  #modalOffer .modal-content-offer .offer-left .img {
    position: static;
    width: 330px;
    height: 314px;
  }

  #modalOffer .modal-content-offer .offer-right {
    padding: 40px;
    padding-bottom: 0;
  }
  #modalOffer .modal-content-offer .offer-left .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .blogs__grid .blogs__grid--col--box .content .h5-bold {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
  }
  .page-tpl-suites .wink-room__suites .box .box-desc .wink-facilities ul {
    flex-wrap: wrap;
    gap: 16px 32px;
  }
  #modalSuites .modal-body {
    padding: 24px;
  }
  #modalSuites .modal-body .box {
    grid-template-columns: 1fr;
  }
  #modalSuites .modal-body .deals__view {
    justify-content: flex-end !important;
  }
  .contact-sec .contact__content {
    padding-bottom: 0;
  }
  .rewards-sec__top h3 {
    font-size: 28px;
    line-height: 36px;
    color: var(--color-primary);
    max-width: 90% !important;
    margin-left: auto;
    margin-right: auto;
  }
  .career-content-sec .career-desc ul {
    padding-left: 20px;
  }
  .career-intro-sec .comming-soon .panels .panel,
  .career-intro-sec .comming-soon .panels {
    width: 100%;
  }
  .career-intro-sec .comming-soon .panels .panel,
  .career-intro-sec .comming-soon .panels {
    height: auto;
  }
  .career-intro-sec .animate-right .box {
    opacity: 1;
    z-index: 1;
  }
  .hotels__filter {
    top: 60px;
  }
  #modalSignIn .modal-body {
    padding: 16px;
  }
  .modal-dialog-centered {
    padding-top: 60px;
  }
  .sign-in-sec .member-contact {
    padding: 0;
  }
  .page-tpl-suites .wink-room__suites .box .box-desc .desc {
    overflow-y: scroll;
  }
  .experience-sec {
    overflow-x: hidden;
    overflow-y: hidden;
  }
  .latest-stories-sec .hotels__container .title {
    margin-bottom: 16px;
  }
  .hotels__filter--opening .dropdown-custom__menu {
    left: unset;
    right: 0;
  }
  .blogs-sec {
    padding-top: 108px;
  }
  .contact-sec .contact__content {
    padding-top: 64px;
  }
  .contact-sec {
    padding: 100px 40px 64px;
  }
  .contact-sec.career-content-sec {
    padding-top: 0;
  }
  .contact-sec.career-content-sec .contact__content {
    padding: 0px;
  }
  .career-box {
    margin-bottom: 80px;
  }
  .career-content-sec .career-box {
    margin-left: 0;
  }
  .blogs__grid--col,
  .blogs__item.grid-reverse .blogs__grid--col {
    grid-template-columns: 1fr;
    grid-template-rows: 343px 216px 216px;
  }
  .blogs__item .name-city {
    margin-bottom: 32px;
  }
  .blogs__grid .blogs__grid--col--box:first-child {
    grid-row: 1 / span 1;
  }
  .blogs__grid .blogs__grid--col--box:nth-child(2) {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
  }
  .blogs__grid .blogs__grid--col--box:last-child {
    grid-column: 1 / span 1;
    grid-row: 3 / span 1;
  }
  .blogs__item.grid-reverse .blogs__grid--col--box:nth-child(2) {
    grid-row: 2 / 3;
  }
  .blogs__grid .blogs__grid--col--box .content {
    padding: 24px;
  }
  .blogs__item.grid-reverse .blogs__grid--col--box:last-child {
    grid-column: 1 / span 1;
    grid-row: 3 / span 1;
  }
  .blogs__item.grid-reverse .blogs__grid--col--box:first-child {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
  }
  .blogs-detail-content .content {
    padding: 0 40px;
  }
  .hotels__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .amenities__content .title {
    margin-top: 40px;
  }
  .amenities__content {
    max-width: 100%;
  }
  .deals-details-sec .box {
    margin-bottom: 80px;
  }
  .meeting-list-sec .experience__content .title {
    margin-top: 40px;
  }
  .alert-success {
    top: 60px;
  }
  .member-contact .tick {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .page-tpl-member-login .member-contact {
    position: static;
  }
  .member-contact-overlay {
    height: 0;
  }

  .contact-sec .contact__form {
    padding: 40px;
    margin-right: 0;
  }
  .page-tpl-suites .wink-room__suites .box .box-desc .wink-facilities ul {
    height: auto;
  }
  .page-tpl-suites .wink-room__suites .box {
    width: 100%;
  }
  .form-input {
    border-radius: 0 !important;
  }
  .contact-sec .deals__view {
    padding: 0;
  }
  .header__btn-language .dropdown-custom__menu {
    min-width: unset;
  }
}
@media (max-width: 767px) {
  #modalOffer .modal-content-offer .offer-left .img {
    width: 270px;
    height: 210px;
  }
  .deals-hotels {
    margin-top: 40px;
  }
  .page-details-career .career-content-sec {
    padding-top: 40px;
    margin-bottom: 0;
  }
  .page-details-career .career-box {
    margin-bottom: 0;
  }
}
.page-template-login .blogs-detail-content {
  padding-top: 0;
}
.page-tpl-terms .my_page_content p,
.page-tpl-terms .my_page_content ul li {
  text-align: justify;
}
.page-template-login .blogs-detail-content {
  padding-bottom: 0;
}
.page-template-booking .blogs-detail-content {
  padding-bottom: 0;
  padding-top: 0;
}
@media (min-width: 1920px) {
  .hotels__item {
    width: 100%;
  }
}
@media (max-width: 480px) {
  .deals__content .desc {
    margin-top: auto;
  }
  .deals-sec .deals__img {
    height: 170px !important;
  }
  .page-details-deals .deals-sec .deals__img {
    height: 170px;
  }
  .deals-sec .deals__content {
    height: calc(100% - 170px) !important;
  }
  .page-details-deals .deals-sec .deals__content {
    height: calc(100% - 170px);
  }
  .page-details-deals .deals__content--bottom {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }
}
@media (max-width: 992px) {
  .page-tpl-terms .row > .col-lg-10 {
    width: calc(100% - 80px);
    margin: 0 40px;
  }
  #modalBtnBook .modal-body .box {
    grid-template-columns: 1fr;
  }
  #modalBtnBook .deals__view {
    justify-content: flex-end !important;
    padding-right: 0;
  }
}
.modal .text-submit {
  margin-top: 16px;
}
@media (max-width: 525px) {
  .modal-booking .modal-form form {
    transform: translateY(-70px);
  }
}
@media (max-width: 320px) {
  /* .lightpick {
    left: 10px !important;
    padding: 0;
  } */
  .lightpick {
    left: 5px !important;
    padding: 0;
  }
  .modal-booking .modal-form form {
    transform: translateY(-70px);
  }
}