:root {
  --font-primary-regular: "BT-BeauSans-regular";
  --font-primary-thin: "BT-BeauSans-thin";
  --font-primary-light: "BT-BeauSans-light";
  --font-primary-medium: "BT-BeauSans-medium";
  --font-primary-semiBold: "BT-BeauSans-semiBold";
  --font-primary-bold: "BT-BeauSans-bold";
  --font-primary-black: "BT-BeauSans-black";
  --font-leostut: "leostut";
  --font-tp-le-major: "TP-Le-Major";
  --font-albulapro-thin: "ALBULAPRO-thin";
  --font-albulapro-semiLight: "ALBULAPRO-semiLight";
  --clr-white: #fff;
  --clr-blue: #122966;
  --yellow-400: #d7b380;
  --yellow-500: #ba8660;
  --gray-9---body-text: #262626;
  --Foundation-Blue-blue-500: #142040;
  --Foundation-Blue-blue-50: #e9eaeb;
  --gray-8: #434343;
  --gray-6---subtle-text: #8c8c8c;
  --gray-7: #595959;
  --Neutral-8: #434343;
  --attention: #daac07;
  --Foundation-Blue-blue-200: #989da4;
  --gray-4---stroke: #d9d9d9;
  --Foundation-Yellow-yellow-50: #f9f6ea;
  --bg-2: #f1f1f1;
  --Color-Neutral-neutral-800: #232323;
  --Color-Neutral-neutral-300: #7e7e7e;
  --Foundation-Blue-blue-900: #0d1218;
  --Primary: #0059bf;
  --Title: #483022;
  --Blue-Dolphin-blue-500: #135581;
  --yelow-400: #d7b380;
  --gray-1: #fafafa;
  --gray-5---disabled: #bfbfbf;
}

/* font */

@font-face {
  font-family: "ALBULAPRO-thin";
  src: url(../font/ALBULAPRO/ALBULAPRO-THIN.OTF);
}
@font-face {
  font-family: "ALBULAPRO-semiLight";
  src: url(../font/ALBULAPRO/ALBULAPRO-SEMILIGHT.OTF);
}
@font-face {
  font-family: "BT-BeauSans-regular";
  src: url(../font/beausans/BT-BeauSans-Regular.ttf);
}

@font-face {
  font-family: "BT-BeauSans-light";
  src: url(../font/beausans/BT-BeauSans-Light.ttf);
}

@font-face {
  font-family: "BT-BeauSans-medium";
  src: url(../font/beausans/BT-BeauSans-Medium.ttf);
}

@font-face {
  font-family: "BT-BeauSans-semiBold";
  src: url(../font/beausans/BT-BeauSans-Bold.ttf);
}

@font-face {
  font-family: "BT-BeauSans-bold";
  src: url(../font/beausans/BT-BeauSans-Bold.ttf);
}

@font-face {
  font-family: "BT-BeauSans-black";
  src: url(../font/beausans/BT-BeauSans-ExtraBold.ttf);
}

@font-face {
  font-family: "leostut";
  src: url(../font/leostut/1FTV-VIP-Leostut.otf);
}

@font-face {
  font-family: "TP-Le-Major";
  src: url(../font/TPLeMajor/TP-Le-Major.ttf);
}

label {
  font-weight: unset !important;
}

body {
  font-family: var(--font-primary-regular);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  text-decoration: none !important;
}

p {
  margin: 0;
}

.text-blue-500 {
  color: var(--Foundation-Blue-blue-500, #142040) !important;
}

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

.text-blue {
  color: #00499d !important;
}

.text-green {
  color: #37a13b !important;
}

.text-red {
  color: #da0707 !important;
}

.text-yellow {
  color: var(--yellow-500) !important;
}

.text-medium {
  font-family: var(--font-primary-medium) !important;
}

.text-black {
  color: var(--gray-9---body-text) !important;
}

.bg-white {
  background-color: var(--clr-white) !important;
}

.d-none {
  display: none !important;
}

.header {
  position: fixed;
  z-index: 1001;
  top: 0;
  left: 0;
  width: 100%;
  background-color: transparent;
  transition: all 0.3s linear;
}

.header-first {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  max-height: 200px;
  transition: all 0.5s ease;
}

.header-second {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-first-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.header-first-right .line {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.3);
}

.header-first-right-item {
  color: var(--clr-white) !important;
  font-size: 14px;
  line-height: 22px;
}

.header-first-right-language {
  position: relative;
}

.header-language-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--clr-white);
  font-size: 14px;
  line-height: 22px;
  cursor: pointer;
  font-family: var(--font-primary-medium);
}

.header-inner {
  position: relative;
}

.header-language-header>img {
  border-radius: 50%;
  object-fit: cover;
}

.navigator-menu {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 0;
  margin: 0;
  list-style: none;
  position: sticky;
  top: 0;
  transition: all 0.5s linear;
  left: 0;
  padding-left: 0;
}

.navigator-menu .logo {
  opacity: 0;
  position: absolute;
  left: 0;
  visibility: hidden;
  transition: transform 0.5s linear;
  position: absolute;
}

.header-fixed {
  background-color: var(--Foundation-Blue-blue-500);
}

.header-fixed .navigator-menu {
  padding-left: 110px;
}

.header-second .header-first-right {
  display: none;
}

.header-fixed .header-second .header-first-right {
  display: flex;
}

.header-fixed .navigator-menu .logo {
  opacity: 1;
  visibility: visible;
}

.header-fixed .header-first {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  padding: 0;
}

.header-blog {
  padding: 8px 0;
}

.header-blog .header-inner {
  display: flex;
  align-items: center;
  gap: 48px;
}

.header-blog .header-inner .navigator-menu {
  padding: 0;
}

.navigator-menu>li {
  padding: 20px 0;
  position: relative;
}

.navigator-menu>li>a,
.navigator-menu>li>span {
  color: var(--clr-white);
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  font-family: var(--font-primary-regular);
  letter-spacing: 0.64px;
  cursor: pointer;
}

.navigator-menu>li>.sub-menu {
  position: absolute;
  top: 100%;
  right: 50%;
  transform: translateX(50%);
  padding: 16px;
  margin: 0;
  list-style: none;
  width: max-content;
  opacity: 0;
  visibility: hidden;
  border-radius: 8px;
  background: var(--clr-white);
  box-shadow: 2px 16px 19px 0px rgba(0, 0, 0, 0.20);
  transition: all 0.3s ease-in-out;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.navigator-menu>li>.sub-menu>li>a {
  color: var(--Foundation-Blue-blue-500) !important;
}

.navigator-menu>li:hover>.sub-menu {
  opacity: 1;
  visibility: visible;
}

.navigator-menu>li>.sub-menu>li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 250px;
}

.navigator-menu>li>.sub-menu>li>a {
  display: flex;
  padding: 12px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background-color: transparent;
  color: var(--clr-blue);
  font-family: var(--font-primary-medium);
  transition: all 0.3s ease-in-out;
  width: 100%;
}

.navigator-menu>li>.sub-menu>li>a:hover {
  border-radius: 8px;
  background: rgba(0, 89, 191, 0.1);
}

.sub-menu-item-title {
  color: #000;
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  text-transform: uppercase;
}

.main {
  margin-top: -100px;
  background-color: #fff9f3;
  min-height: 100vh;
}

.footer {
  background: #0a1126;
  padding: 32px 0 0 0;
}

.footer-first-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.footer-first-item>img {
  height: 68px;
}

.footer-first-item>span {
  color: var(--clr-white);
  text-align: center;
  font-size: 14px;
  font-style: normal;
  line-height: 20px;
}

.footer>.container>.line {
  width: 100%;
  height: 1px;
  background: #1d2531;
  margin: 32px 0;
}

.footer-second {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
}

.footer-second-item {
  flex: 1;
}

ul.footer-second-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.footer-second-item>li.first,
.social-media>span {
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-primary-medium);
  text-transform: uppercase;
  margin-bottom: 8px;
}

ul.footer-second-item>li>a {
  color: var(--clr-white);
}

.footer-second>.line {
  width: 1px;
  height: 192px;
  background-color: var(--clr-white);
}

.social-media {
  display: flex;
  padding-left: 64px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}

.social-media>div {
  display: flex;
  align-items: center;
  gap: 16px;
}

.list-contact-media {
  display: flex;
  width: 54px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 4px;
  background: var(--yellow-400);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
}

.contact-media-item {
  display: flex;
  height: 54px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}

.contact-media-item:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.contact-media-chat {
  margin-top: 64px;
  display: flex;
  width: 54px;
  height: 54px;
  justify-content: center;
  align-items: center;
  border-radius: 70px;
  background: var(--yellow-400);
}

.contact-media-fixed {
  position: fixed;
  right: 0;
  bottom: 40px;
  z-index: 1000;
}

.banner-home {
  height: 1024px !important;
  position: relative;
}

.banner-img,
.banner-img>img {
  height: 100%;
  width: 100%;
}

.banner-img>img {
  object-fit: cover;
}

.banner-home-bg {
  background: linear-gradient(0deg, rgba(20, 32, 64, 0) 3.11%, #142040 97.06%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.banner-home-content-first {
  width: min(100%, 670px);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.banner-home-content-first>h1 {
  color: var(--clr-white);
  text-shadow: 0px 0px 10px rgba(30, 42, 58, 0.35);
  font-family: var(--font-leostut);
  font-size: 72px;
  font-style: normal;
  line-height: 74px;
  letter-spacing: 1.44px;
  margin: 0;
}

.banner-home-content-first>p {
  margin: 0;
  color: var(--clr-white);
}

.btn-border-white {
  cursor: pointer;
  display: flex;
  width: 180px;
  height: 48px;
  padding: 0px 32px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 48px;
  border: 1px solid var(--clr-white);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2px);
  color: var(--clr-white) !important;
  font-family: var(--font-primary-medium);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
}

.form-check-available {
  display: flex;
  width: min(100%, 983px);
  height: auto;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 80px;
  background: rgba(30, 42, 58, 0.5);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
}

.form-check-available.form-fixed {
  position: fixed;
  top: 65px;
  z-index: 100;
  width: 100% !important;
  border-radius: 0 !important;
  background-color: var(--clr-white) !important;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s linear;
}

.form-check-available.form-fixed .form-item {
  border: 1px solid var(--Foundation-Blue-blue-50);
}

.form-check-available.form-fixed.active {
  opacity: 1;
  visibility: visible;
  z-index: 998;
}


.form-check-available.form-fixed>div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.form-item {
  display: flex;
  padding: 8px 16px;
  align-items: center;
  gap: 10px;
  height: 48px;
  width: 100%;
  flex: 1;
  align-self: stretch;
  border-radius: 48px;
  background: var(--clr-white);
  justify-content: space-between;
  gap: 10px;
  border: none;
  outline: none;
  box-shadow: none;
}

.form-item>input {
  flex: 1;
  height: 100%;
  border: none;
  outline: none;
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-regular);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  background-color: transparent;
  padding: 0;
  box-shadow: none !important;
}

.form-item::placeholder,
.form-item>input::placeholder {
  color: var(--gray-6---subtle-text);
}

.custom-select {
  position: relative;
}

.custom-select-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-regular);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  width: 100%;
}

.custom-select-header>p {
  margin: 0;
}

.custom-select-popup {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  display: flex;
  width: 331px;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 8px;
  background: var(--clr-white);
  box-shadow: 2px 16px 19px 0px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

.custom-select-popup.active {
  opacity: 1;
  visibility: visible;
}

.custom-select-item {
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
  border-radius: 8px;
  background: transparent;
  transition: all 0.3s ease-in-out;
  color: var(--clr-blue);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  cursor: pointer;
}

.custom-select-item:hover,
.custom-select-item.active {
  background-color: rgba(0, 89, 191, 0.1);
}

.btn-color-yellow {
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-primary-medium);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
  display: flex;
  height: 48px;
  padding: 8px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 48px;
  background: var(--yellow-400);
  border: none;
}

.box-1-home {
  margin-top: -20px;
  position: relative;
  z-index: 10;
}

.box-inner {
  padding: 64px 0;
}

.bg-img-box-1-home {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.banner-home-bg-img {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.box-1-home-header,
.box-2-home-header {
  display: flex;
  width: min(100%, 1096px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  z-index: 10;
  position: relative;
  margin: 0 auto 56px auto;
}

.home-title {
  color: var(--yellow-400);
  font-family: var(--font-leostut);
  font-size: 40px;
  font-style: normal;
  line-height: 48px;
  text-transform: capitalize;
  margin: 0;
}

.box-1-home-header>p {
  margin: 0;
  width: min(100%, 772px);
  color: var(--clr-white);
  text-align: center;
}

.box-1-home-item {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}

.box-1-home-item-bg {
  position: absolute;
  background: linear-gradient(207deg, rgba(0, 43, 83, 0) 52.6%, #002b53 92.65%);
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 100%;
}

.box-1-home-item-content {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  padding: 24px 64px;
  display: flex;
  align-items: flex-end;
  gap: 132px;
  justify-content: space-between;
}

.box-1-home-item-content>div {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.box-1-home-item-content>div>h3 {
  margin: 0;
  color: var(--clr-white);
  font-family: var(--font-leostut);
  font-size: 32px;
  font-style: normal;
  line-height: 40px;
}

.box-1-home-item-content>div>p {
  color: var(--clr-white);
  font-family: var(--font-primary-regular);
  line-height: 32px;
}

.btn-see-more>img {
  width: 16px !important;
  height: 16px !important;
}

.box-1-home-slider .owl-nav .owl-prev,
.box-1-home-slider .owl-nav .owl-next,
.box-3-third-slider .owl-nav .owl-prev,
.box-3-third-slider .owl-nav .owl-next,
.other-blogs-slider .owl-nav .owl-prev,
.other-blogs-slider .owl-nav .owl-next,
.itineraries-detail-detail-1-slider .owl-nav .owl-prev,
.itineraries-detail-detail-1-slider .owl-nav .owl-next,
.our-story-box-4-slider .owl-nav .owl-prev,
.our-story-box-4-slider .owl-nav .owl-next,
.overview-img-slider .owl-nav .owl-prev,
.overview-img-slider .owl-nav .owl-next,
.overview-restaurants-slider .owl-nav .owl-prev,
.overview-restaurants-slider .owl-nav .owl-next {
  width: 32px;
  height: 32px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -64px;
}

.box-1-home-slider .owl-nav .owl-next,
.box-3-third-slider .owl-nav .owl-next,
.other-blogs-slider .owl-nav .owl-next,
.itineraries-detail-detail-1-slider .owl-nav .owl-next,
.our-story-box-4-slider .owl-nav .owl-next,
.overview-restaurants-slider .owl-nav .owl-next {
  left: auto;
  right: -64px;
}

.box-1-home-slider .owl-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}

.box-1-home-slider .owl-dots .owl-dot {
  width: 24px;
  height: 24px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: 3px solid;
  border-color: #d9d9d9;
  transition: all 0.3s ease;
}

.box-1-home-slider .owl-dots .owl-dot.active {
  border-color: #142040;
}

.other-blogs {
  background: #FFF9F3;
}

.box-2-home {
  height: 918px;
  position: relative;
  background: url("../img/box-home-2-bg.png") lightgray 50% / cover no-repeat;
}

.box-2-home-header>p {
  width: 100%;
  text-align: center;
  color: var(--clr-white);
}

.btn-discover {
  margin: 0 auto;
  width: max-content;
}

.btn-play-video {
  width: 112px;
  height: 112px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.close-modal-video {
  opacity: 1 !important;
  font-size: 32px;
}

.modal-video .modal-dialog,
.modal-video-home .modal-dialog {
  width: min(95%, 1000px);
  margin: 3% auto;
}

.modal-video-home .modal-body {
  padding: 0;
}

.box-2-home-bg-2 {
  width: 100%;
  height: 58px;
  border-radius: 64px 64px 0px 0px;
  background: #fff9f3;
  position: absolute;
  bottom: 0;
}

.box-3-home {
  position: relative;
}

.box-3-home-bg {
  position: absolute;
  top: 564px;
  height: 1200px;
}

.box-3-home-bg>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.box-3-home-header>h2 {
  color: var(--Foundation-Blue-blue-500);
}

.box-3-home-header>p {
  color: var(--gray-8);
}

.offers-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 16px;
  box-shadow: 0px 0px 20px 0px rgba(30, 42, 58, 0.1);
  overflow: hidden;
  background-color: var(--clr-white);
}

.offers-item-img {
  position: relative;
  width: 100%;
  height: 372px;
}

.offers-item-img>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.offers-item-img-bg {
  border-radius: 8px 8px 0px 0px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 64.76%, #fff 100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.offers-item-tag {
  display: inline-flex;
  padding: 6px 8px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
  background: var(--clr-white);
  position: absolute;
  width: max-content;
  top: 8px;
  left: 16px;
}

.offers-item-tag>p {
  margin: 0;
  color: #002f59;
  font-family: var(--font-primary-bold);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
}

.offers-item-tag>img {
  width: 16px !important;
  height: 16px !important;
}

.offers-item-content {
  display: flex;
  padding: 12px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.offers-item-content>p {
  margin: 0;
}

.offers-item-sub-title {
  color: var(--yellow-500);
  font-family: var(--font-primary-medium);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
}

.offers-item-title {
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-leostut);
  font-size: 22px;
  font-style: normal;
  line-height: 32px;
  margin-top: -8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  height: 64px;
}

.offers-item-services {
  display: flex;
  width: 100%;
  padding: 20px 12px 8px 12px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  border-radius: 0px 8px 8px 8px;
  border: 1px solid rgba(0, 89, 191, 0.5);
  position: relative;
  min-height: 145px;
}

.offers-item-service-tag {
  width: max-content;
  display: inline-flex;
  height: 24px;
  padding: 0px 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 2px;
  background: #2f4aa1;
  position: absolute;
  top: -12px;
  left: -1px;
  color: var(--clr-white);
  font-family: var(--font-primary-medium);
  font-size: 12px;
  font-style: normal;
  line-height: 22px;
}

.offers-item-services>ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
}

.offers-item-services>ul>li {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.offers-item-services>ul>li>p {
  margin: 0;
  color: var(--gray-7);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 22px;
}

.offers-item-services>ul>li>img {
  width: 20px !important;
  height: 20px !important;
}

.offers-item-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.offers-item-price>div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.offers-item-price-value {
  color: var(--yellow-500);
  font-family: var(--font-primary-medium);
  font-size: 20px;
  font-style: normal;
  line-height: 30px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.offers-item-price-value>p {
  font-family: var(--font-primary-regular);
  font-size: 14px;
  font-style: normal;
  line-height: 24px;
  margin: 0;
}

.offers-item-price-default {
  color: rgba(38, 38, 38, 0.5);
  text-decoration-line: line-through;
}

.btn-color-black {
  display: flex;
  height: 48px;
  padding: 8px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 40px;
  background: var(--Foundation-Blue-blue-500);
  color: var(--clr-white) !important;
  font-family: var(--font-primary-medium);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
  cursor: pointer;
}

.box-3-home-slider {
  margin-bottom: 52px;
}

.box-3-second {
  position: relative;
  margin: 164px 0 64px 0;
}

.box-3-second .line {
  width: min(95%, 868px);
  margin: 0 auto;
  height: 1px;
  background: var(--yellow-400);
  position: absolute;
  top: -70px;
  left: 50%;
  transform: translateX(-50%);
}

.box-3-second-bg {
  width: 100%;
  height: 361px;
  border-radius: 64px 64px 0px 0px;
  background: #fff9f3;
  position: absolute;
  bottom: 0;
  left: 0;
}

.box-3-second-items {
  position: relative;
  height: 632px;
  z-index: 20;
  border-radius: 8px;
  overflow: hidden;
}

.box-3-second-img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.box-3-second-img>img {
  position: absolute;
  opacity: 0;
  transition: all 0.3s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.box-3-second-img>img.active {
  opacity: 1;
}

.box-3-second-items {
  display: flex;
  align-items: center;
}

.box-3-second-item {
  flex: 1;
  position: relative;
  z-index: 10;
  display: flex;
  height: 632px;
  padding: 32px 10px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0) 64.42%,
      rgba(0, 0, 0, 0.8) 100%);
  overflow: hidden;
  transition: all 0.5s ease;
  cursor: pointer;
}

.box-3-second-item:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.box-3-second-item>div {
  width: 98%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.box-3-second-item>div>p:not(:first-child) {
  color: var(--gray-8);
  text-align: center;
  font-family: var(--font-primary-regular);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  width: min(100%, 282px);
  margin: 0 auto;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 120px;
}

.box-3-second-item-title {
  color: var(--clr-white);
  text-align: center;
  font-family: var(--font-leostut);
  font-size: 26px;
  font-style: normal;
  line-height: 36px;
  transition: all;
  height: 72px;
}

.box-3-second-item>div {
  -webkit-transform: translateY(89%);
  transform: translateY(89%);
  transition: all 0.5s ease;
}

.box-3-second-item.active>div {
  transform: translateY(-100%);
}

.box-3-second-item.active {
  background: rgba(255, 255, 255, 0.85);
}

.box-3-second-item.active .box-3-second-item-title {
  color: var(--Foundation-Blue-blue-500);
}

.box-3-third-item {
  display: flex;
  flex-direction: column;
  opacity: 0.3;
  margin-top: 0px;
  transition: all 0.3s ease;
}

.box-3-third-item-img {
  width: 100%;
  height: 500px;
  position: relative;
  border-radius: 8px;
  transition: all 0.3s ease;
  overflow: hidden;
  cursor: pointer;
}

.box-3-third-item-img>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.box-3-third-item-img-bg {
  background: linear-gradient(180deg, rgba(255, 249, 243, 0.00) 70.16%, #FFF9F3 87.93%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.box-3-third-item-content {
  display: flex;
  width: 100%;
  padding: 0px 16px;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: -40px;
  position: relative;
  z-index: 10;
}

.box-3-third-item-title {
  color: var(--Foundation-Blue-blue-500);
  text-align: center;
  font-family: var(--font-leostut);
  font-size: 32px;
  font-style: normal;
  line-height: 40px;
}

.box-3-third-item-tag {
  display: flex;
  padding: 4px 24px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: max-content;
  border-radius: 32px;
  background: var(--Foundation-Blue-blue-50);
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-primary-medium);
}

.box-3-third-item-desc {
  text-align: center;
  color: var(--gray-9---body-text);
}

.box-3-third-slider .owl-stage-outer {
  padding-top: 40px;
}

.box-3-third-slider .owl-stage-outer .owl-item.center .box-3-third-item {
  opacity: 1;
  margin-top: -40px;
}

.box-3-third-slider .owl-stage-outer .owl-item.center .box-3-third-item .box-3-third-item-img {
  height: 600px;
}

.box-3-third-slider .owl-stage-outer .owl-item.center .box-3-third-item .box-3-third-item-content {
  margin-top: -100px;
}

.box-4-home {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.box-4-home-header {
  width: min(95%, 1000px);
  margin: 0 auto;
}

.box-4-home-desc {
  color: var(--Neutral-8);
  font-size: 14px;
  line-height: 22px;
  text-transform: uppercase;
  margin: 32px 0 0 0;
  text-align: center;
}

.box-4-home-tag {
  color: var(--yellow-500);
  font-family: var(--font-leostut);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
  text-align: center;
}

.banner-page {
  height: 612px;
  position: relative;
  z-index: 1000;
}

.banner-page-img {
  width: 100%;
  height: 100%;
}

.banner-page-img>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-page-bg {
  background: linear-gradient(180deg,
      rgba(9, 22, 33, 0.9) 0%,
      rgba(9, 22, 33, 0) 43.87%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.banner-page-content {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 24px;
}

.banner-home-content.banner-page-content {
  display: flex;
  flex-direction: column;
  gap: 150px;
  width: min(80%, 1570px);
  margin: 0 auto;
  position: absolute;
  bottom: 45%;
  left: 50%;
  transform: translate(-50%, 50%);
  z-index: 11;
}

.page-list-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--Foundation-Blue-blue-500);
  backdrop-filter: blur(1px);
  position: sticky;
  top: 65px;
  z-index: 999;
  transition: background 0.3s ease;
}

.page-list-menu.fixed {
  background: var(--clr-white);
}

/* .form-fixed+.banner-page+.page-list-menu {
  top: 126px;
} */

.page-list-menu-item {
  display: flex;
  padding: 20px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-bottom: 3px solid;
  border-color: transparent;
  color: var(--clr-white);
  font-family: var(--font-primary-medium);
  cursor: pointer;
  transition: all 0.3s ease;
}

.page-list-menu-item.active,
.page-list-menu-item:hover {
  color: var(--clr-white);
  border-color: var(--attention);
}

.page-list-menu.fixed .page-list-menu-item {
  color: var(--Foundation-Blue-blue-500) !important;
}

.page-content-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  width: 100%;
}

.page-content-header-inner>p,
.page-content-header-inner>h2 {
  flex: 1;
}

.overview-box-1 {
  margin-top: 40px;
}

.overview-img-item {
  border-radius: 64px 64px 0px 0px;
  overflow: hidden;
  height: 768px;
  position: relative;
}

.overview-img-item>img {
  width: 100%;
  height: 100%;
}

.overview-img-item-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, #fff 5.86%, rgba(255, 255, 255, 0) 90.8%);
}

.page-content {
  padding-bottom: 0px;
}

.overview-box-1-content {
  width: min(95%, 1320px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 170px;
  background: rgba(20, 32, 64, 0.4);
  margin-top: -80px;
  margin-bottom: 32px;
  z-index: 10;
  position: relative;
}

.overview-content-slider {
  width: min(65%, 900px);
  border-radius: 146px;
  background: var(--clr-white);
  margin-left: -1px;
}

.overview-content-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 32px 112px;
  align-items: flex-start;
  gap: 10px;
}

.overview-content-item-title {
  margin: 0;
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-leostut);
  font-size: 32px;
  font-style: normal;
  line-height: 40px;
}

.overview-content-item-desc {
  color: var(--gray-9---body-text);
}

.overview-box-1-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-right: 112px;
}

.overview-box-1-actions-item {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.overview-box-1-actions-text {
  display: flex;
  align-items: center;
  gap: 8px;
}

.overview-box-1-actions-text,
.overview-box-1-actions-text>p {
  margin: 0;
  font-family: var(--font-leostut);
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
  color: var(--clr-white);
}

.overview-box-header {
  display: flex;
  width: min(95%, 1096px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 0 auto;
}

.overview-box-header>p {
  margin: 0;
  color: var(--gray-8);
  text-align: center;
}

.overview-box-2-content {
  margin-top: 40px;
}

.overview-itinerary-slider .owl-dots {
  display: none;
}

.overview-itinerary-item {
  display: flex;
  height: 432px;
  align-items: flex-start;
  border-radius: 8px;
  border: 1px solid var(--Foundation-Blue-blue-50);
  background: var(--clr-white);
  overflow: hidden;
}

.overview-itinerary-item-first {
  flex: 1;
  height: 100%;
  position: relative;
}

.overview-itinerary-item-first .img-road-map {
  position: absolute;
  top: 16px;
  right: 16px;
}

.overview-itinerary-item-first>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overview-itinerary-item-second {
  display: flex;
  height: 100%;
  padding: 24px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  background-color: var(--clr-white);
}

.overview-itinerary-item-second .offers-item-sub-title {
  margin: 0 0 -8px 0;
}

.overview-itinerary-item-second .offers-item-title {
  width: 100%;
  padding-bottom: 16px;
  border-bottom: 1px solid #d9d9d9;
  margin-bottom: 16px;
}

.overview-itinerary-item-second>div:first-child {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.offers-item-price-default-discount {
  display: flex;
  align-items: center;
  gap: 8px;
}

.offers-item-price-default-discount>p {
  margin: 0;
}

.offers-item-price-discount {
  display: flex;
  padding: 0px 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 22px;
  background: var(--yellow-400);
}

.offers-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.offers-item-actions>a {
  flex: 1;
}

.btn-border-black {
  display: flex;
  height: 48px;
  padding: 8px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex: 1 0 0;
  border-radius: 48px;
  border: 1px solid var(--Foundation-Blue-blue-500);
  color: var(--Foundation-Blue-blue-500) !important;
  font-family: var(--font-primary-medium);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
}

.overview-box-3,
.onboard-dinning-box-3 {
  width: 100%;
  min-height: 480px;
  background-image: url("../img/overview-box-3-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
}

.overview-box-3-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 48px;
}

.form-container {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
}

.form-container .form-group {
  margin: 0;
  flex: 1;
}

.form-container .form-group label {
  color: var(--clr-white);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  /* 150% */
}

.overview-box-3-content>p {
  width: min(100%, 1320px);
  color: var(--clr-white);
}

.overview-box-3-content>p>a {
  font-family: var(--font-primary-medium);
  color: #07458c !important;
}

.overview-box-4-content,
.overview-box-5-content,
.experience-box-1-content {
  margin-top: 40px;
}

.overview-box-4-item {
  display: flex;
  padding: 12px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 16px;
  background: var(--clr-white);
  box-shadow: 0px 2px 10px 0px rgba(6, 21, 86, 0.15);
}

.overview-box-4-item-img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  overflow: hidden;
}

.overview-box-4-item-content {
  display: flex;
  padding: 16px 0px 8px 0px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

.overview-box-4-item-content>p {
  margin: 0;
}

.overview-box-4-item-tag {
  margin-top: -8px !important;
}

.overview-box-4-item-title {
  overflow: hidden;
  color: var(--Foundation-Blue-blue-500);
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-family: var(--font-primary-medium);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
  height: 51px;
}

.overview-box-4-item-time {
  color: var(--Foundation-Blue-blue-200);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
}

.overview-box-4-item-link {
  width: 100%;
  display: flex;
  height: 48px;
  padding: 8px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-radius: 48px;
  background: var(--Foundation-Blue-blue-50);
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-primary-medium);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
  cursor: pointer;
}

.overview-box-4-slider .owl-stage-outer {
  padding: 8px 0;
}

.overview-box-5 {
  background-color: var(--clr-white);
}

.overview-box-5-item {
  position: relative;
  border-radius: 16px;
  cursor: pointer;
}

.overview-box-5-item-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 72px;
  padding: 20px 24px;
  border-radius: 16px;
  background: rgba(30, 42, 58, 0.6);
  backdrop-filter: blur(1px);
  justify-content: flex-start;
  transition: all 0.5s ease-in-out;
}

.overview-box-5-item-content>img {
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.overview-box-5-item:hover .overview-box-5-item-content {
  transform: translateY(0);
  justify-content: center;
  max-height: 1000px;
}

.overview-box-5-item:hover .overview-box-5-item-content>img {
  opacity: 1;
}

.overview-box-5-item-content-title {
  color: var(--clr-white);
  font-family: var(--font-leostut);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
  letter-spacing: 0.48px;
}

.onboard-dinning-box-1 {
  background-color: var(--clr-white);
}

.list-layout-dinning {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 40px;
}

.layout-dinning-item {
  display: flex;
  align-items: flex-start;
  height: 432px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--gray-4---stroke);
  background: #fff;
  overflow: hidden;
}

.layout-dinning-item-content {
  height: 100%;
  display: flex;
  padding: 32px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
}

.layout-dinning-item-img {
  width: min(60%, 1032px);
  height: 100%;
}

.overview-restaurants-slider {
  height: 100%;
}

.overview-restaurants-slider .owl-nav .owl-prev,
.overview-img-slider .owl-nav .owl-prev {
  left: 16px !important;
  border-radius: 50%;
  backdrop-filter: blur(2px);
}

.overview-restaurants-slider .owl-nav .owl-next,
.overview-img-slider .owl-nav .owl-next {
  right: 16px !important;
  left: auto;
  border-radius: 50%;
  backdrop-filter: blur(2px);
}

.layout-dinning-item-content-title {
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-leostut);
  font-size: 32px;
  font-style: normal;
  line-height: 40px;
  padding-bottom: 16px;
  width: 100%;
  border-bottom: 1px solid var(--gray-4---stroke);
  margin-bottom: 16px;
}

.layout-dinning-item-content-desc {
  color: var(--gray-8);
}

.overview-restaurants-item {
  cursor: pointer;
}

.overview-restaurants-item>img {
  height: 432px;
  width: 100%;
  object-fit: cover;
}

.modal-img .modal-dialog {
  width: min(95%, 960px);
  margin: 10% auto;
}

.modal-img .modal-header {
  display: flex;
  padding: 16px 24px;
  justify-content: flex-end;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  align-self: stretch;
  border-bottom: 1px solid var(--gray-4---stroke);
}

.modal-img .modal-header .modal-title {
  flex: 1;
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-leostut);
  font-size: 32px;
  font-style: normal;
  line-height: 40px;
}

.modal-img .modal-header .close-modal-img {
  width: 24px;
  height: 24px;
  aspect-ratio: 1/1;
  opacity: 1;
  font-weight: 400;
  font-size: 28px;
  font-style: normal;
  line-height: 32px;
  letter-spacing: 0.48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -8px;
}

.modal-img .modal-body {
  padding: 0;
}

.modal-img .modal-img-content {
  position: relative;
}

.modal-img-content-actions {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: absolute;
  left: 0;
  bottom: 12px;
}

.modal-img-content-actions-item {
  min-width: 40px;
  width: max-content;
  height: 40px;
  border-radius: 40px;
  background: rgba(0, 0, 0, 0.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.modal-img-content-actions-item:first-child>div {
  margin-top: 2px;
}

.modal-img-content-share {
  display: flex;
  padding: 16px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  border-top: 0.5px solid var(--gray-4---stroke);
  width: 100%;
}

.btn-copy {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-primary-medium);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
}

.modal-img-content-share-text {
  display: flex;
  padding: 2px 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: var(--Foundation-Blue-blue-50);
  color: #000;
  font-size: 14px;
  line-height: 22px;
  cursor: pointer;
}

.experience-box-1-content {
  width: 100%;
  height: 662px;
  position: relative;
}

.experience-img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.experience-img>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.experience-box-1-content::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(270deg,
      rgba(26, 38, 53, 0) 55.52%,
      #1a2635 75.38%);
}

.experience-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.experience-content-item {
  position: absolute;
  top: 40%;
  left: 0;
  transform: translateY(-80%);
  width: min(100%, 513px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.experience-content-item.active {
  opacity: 1;
}

.experience-content-item>h3 {
  margin: 0;
  color: var(--clr-white);
  font-family: var(--font-leostut);
  font-size: 56px;
  font-style: normal;
  line-height: 64px;
  text-transform: capitalize;
}

.experience-content-item>p {
  color: var(--clr-white);
}

.experience-menu-list {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(18, 28, 40, 0.5);
  backdrop-filter: blur(2.5px);
  z-index: 11;
}

.experience-menu-list-item {
  flex: 1;
  display: flex;
  padding: 16px 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background-color: transparent;
  opacity: 0.7;
  transition: all 0.3s ease;
}

.experience-menu-list-item>p {
  margin: 0;
  color: var(--clr-white);
  font-family: var(--font-primary-medium);
  text-transform: uppercase;
  text-align: center;
}

.experience-menu-list-item>img {
  filter: brightness(0) invert(1);
  -webkit-filter: brightness(0) invert(1);
  transition: all 0.3s ease;
}

.experience-menu-list-item.active,
.experience-menu-list-item:hover {
  opacity: 1;
  background-color: #fff9f3;
}

.experience-menu-list-item.active>img,
.experience-menu-list-item:hover>img {
  filter: brightness(1) invert(0);
  -webkit-filter: brightness(1) invert(0);
}

.experience-menu-list-item.active>p,
.experience-menu-list-item:hover>p {
  color: var(--Foundation-Blue-blue-500);
}

.cruise-layout-content,
.itineraries-box-1-content {
  margin-top: 40px;
}

.deck-menu-list {
  display: flex;
  align-items: center;
  justify-content: center;
  display: flex;
  padding-bottom: 16px;
  gap: 16px;
  border-bottom: 1px solid var(--yellow-500);
  width: max-content;
  margin: 0 auto;
}

.deck-menu-list-title {
  color: var(--gray-9---body-text);
  margin: 0;
}

.deck-menu-list-item {
  display: flex;
  padding: 8px 20px;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-radius: 38px;
  border: 1px solid;
  border-color: var(--gray-4---stroke);
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--yellow-500);
  font-family: var(--font-primary-medium);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  background-color: transparent;
}

.deck-menu-list-item:hover,
.deck-menu-list-item.active {
  border-radius: 38px;
  border-color: var(--yellow-500);
  background-color: var(--Foundation-Yellow-yellow-50);
}

.cruise-layout-slider {
  border-bottom: 1px solid var(--yellow-500);
}

.cruise-sevice {
  width: min(100%, 1160px);
  margin: 0 auto;
  padding: 48px 0;
  display: flex;
  align-items: flex-start;
  gap: 56px;
}

.cruise-sevice-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
}

.cruise-sevice-list>p {
  margin: 0;
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.cruise-sevice-list>ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  gap: 16px 32px;
  flex-wrap: wrap;
}

.cruise-sevice-list>ul>li {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 160px;
}

.cruise-sevice-list>ul>li>p {
  margin: 0;
  color: var(--gray-7);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
}

.btn-download {
  width: max-content;
  display: flex;
  align-items: center;
  margin: 0 auto;
}

.itineraries-box-1-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.btn-modal-roadmap {
  position: absolute;
  top: 100px;
  right: 25px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

.modal-roadmap .modal-dialog {
  width: min(95%, 900px);
  margin: 5% auto;
}

.modal-roadmap .modal-dialog .modal-header {
  display: flex;
  padding: 16px 32px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--gray-4---stroke);
}

.modal-roadmap .modal-dialog .modal-header .modal-title {
  flex: 1;
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-primary-medium);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
}

.modal-roadmap .modal-dialog .modal-header .close-modal-roadmap {
  opacity: 1;
  color: var(--Foundation-Blue-blue-500);
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.modal-roadmap .modal-dialog .modal-body {
  padding: 0;
}

.modal-roadmap .modal-roadmap-title {
  display: flex;
  padding: 16px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  border-top: 0.5px solid var(--gray-4---stroke);
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-leostut);
  font-size: 32px;
  font-style: normal;
  line-height: 40px;
}

.sort-itineraries {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.sort-itineraries>p {
  margin: 0;
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.custom-select-type-1 {
  display: flex;
  width: 244px;
  height: 40px;
  padding: 8px 16px;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--gray-4---stroke);
  background: var(--clr-white);
}

.select-popup-right {
  right: 0 !important;
  left: unset !important;
}

.custom-select-popup {
  z-index: 1000;
}

.banner-page-itineraries-detail {
  position: absolute;
  display: flex;
  width: 313px;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  top: 60%;
  left: 300px;
  transform: translateY(-50%);
}

.name-cruise-title {
  margin: 0;
  display: flex;
  padding: 5px 32px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: max-content;
  border-radius: 93px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(5px);
  color: var(--clr-white);
  font-family: var(--font-primary-bold);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  text-transform: uppercase;
}

.name-tour-title {
  color: var(--clr-white);
  text-align: right;
  font-family: var(--font-leostut);
  font-size: 56px;
  font-style: normal;
  line-height: 64px;
  text-transform: capitalize;
}

.cruise-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.cruise-price>p {
  margin: 0;
  color: var(--clr-white);
  text-align: right;
  font-family: var(--font-primary-medium);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
}

.cruise-price-discount {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cruise-price-discount>p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
  text-decoration-line: line-through;
}

.cruise-price-discount>.offers-item-price-discount {
  width: max-content;
}

.btn-color-white {
  display: flex;
  width: 180px;
  height: 48px;
  padding: 0px 32px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 48px;
  border: 1px solid var(--clr-white);
  background: var(--clr-white);
  backdrop-filter: blur(2px);
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-primary-medium);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
}

.banner-page-itineraries-detail .btn-book-now {
  margin-top: 16px;
}

.itineraries-detail-4-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.itineraries-detail-point-review {
  width: 100%;
}

.itineraries-detail-point-review>div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.itineraries-detail-4-left-title {
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-primary-bold);
  font-size: 72px;
  font-style: normal;
  line-height: 88px;
  text-transform: uppercase;
}

.itineraries-detail-4-left-review {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.itineraries-detail-4-left-review>p {
  color: var(--gray-9---body-text);
}

.itineraries-detail-4-left-review>p:first-child {
  color: var(--gray-9---body-text);
  text-align: center;
  margin: 0;
  font-family: var(--font-primary-medium);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
}

.btn-review>p {
  margin: 0;
}

.itineraries-detail-4-left .line {
  width: 100%;
  height: 1px;
  background: #d8d8d8;
}

.box-4-home-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 100%;
}

.box-4-home-item {
  position: relative;
  cursor: pointer;
}

.box-4-home-item-img {
  width: 100%;
  aspect-ratio: 1/1;
}

.box-4-home-item-img>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.box-4-home-item-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: all 0.3s ease;
  background-color: rgba(0, 0, 0, 0.5);
}

.box-4-home-item:hover .box-4-home-item-content {
  opacity: 1;
}

.box-4-home-item-content>p {
  color: var(--clr-white);
  font-family: var(--font-primary-semiBold);
}

.box-4-home-item-first {
  display: flex;
  padding: 32px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
  background: #122343;
}

.box-4-home-item-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}

.box-4-home-item-title {
  color: var(--clr-white);
  font-family: var(--font-primary-regular);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
  text-transform: uppercase;
}

.box-4-home-item-desc {
  color: var(--clr-white);
  text-align: center;
  font-family: var(--font-primary-regular);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  margin-top: 16px;
}

.box-4-home-item-tag {
  color: var(--yellow-500);
  font-family: var(--font-leostut);
  font-size: 20px;
  font-style: normal;
  line-height: 32px;
}

.box-4-home-item-first>a {
  color: var(--yellow-400);
  font-family: var(--font-primary-medium);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
}

.pagination-container {
  display: flex;
  align-items: flex-start;
  width: 100%;
  justify-content: center;
  gap: 8px;
}

.pagination-container>li>a {
  display: flex;
  width: 32px;
  height: 32px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background: var(--bg-2);
  border: none;
  transition: all 0.3s ease;
  color: var(--gray-9---body-text) !important;
  text-align: center;
  font-family: var(--font-primary-medium);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
}

.pagination-container>li.active>a,
.pagination-container>li:hover>a:hover {
  background: var(--Foundation-Blue-blue-500);
  color: var(--clr-white) !important;
}

.main-line {
  width: 100%;
  height: 16px;
  background: #c4c4c4;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1) inset;
}

.form-register-home .form-group>label,
.form-style-2 .form-group>label {
  color: var(--gray-9---body-text);
  font-weight: unset;
  font-family: var(--font-primary-medium);
}

.form-register-home .form-group,
.form-style-2 .form-group {
  margin-bottom: 24px;
}

.form-register-home .form-group .form-item,
.form-style-2 .form-group .form-item {

  background: var(--bg-2);
}

.box-5-home-left,
.box-5-home-right {
  width: 50%;
}

.box-5-home-left {
  padding: 40px 112px;
  background-color: var(--clr-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 56px;
}

.box-5-home {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.box-5-home-right>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.itineraries-detail-overall {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.itineraries-detail-overall-items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
}

.itineraries-detail-overall-item {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  width: 100%;
}

.itineraries-detail-overall-item-line {
  width: 100%;
  height: 6px;
  border-radius: 13px;
  background: #f0f0f0;
  position: relative;
}

.itineraries-detail-overall-item-line-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  height: 100%;
  border-radius: 13px;
  background: var(--gray-9---body-text);
}

.itineraries-detail-overall-title {
  margin: 0;
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 26px;
}

.itineraries-detail-overall-item>p {
  margin: 0;
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  width: 12px;
}

.itineraries-detail-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  width: 100%;
}

.itineraries-detail-list-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
}

.itineraries-detail-list-item>p:first-child {
  margin: 0;
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.itineraries-detail-list-item-point {
  margin: 0;
  color: var(--yellow-500);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.itineraries-detail-list-item:not(:last-child) {
  border-bottom: 1px solid #d8d8d8;
  padding-bottom: 16px;
}

.itineraries-detail-review {
  display: flex;
  padding-left: 64px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 1 0 0;
}

.itineraries-detail-review-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
}

.itineraries-detail-review-header>p {
  margin: 0;
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
}

.itineraries-detail-review-header-link {
  color: var(--gray-8) !important;
  font-family: var(--font-primary-regular);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  text-decoration-line: underline !important;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.itineraries-detail-review .line {
  width: 100%;
  height: 1px;
  background: #d8d8d8;
}

.review-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
  max-height: 1080px;
  overflow-y: scroll;
}

.review-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  width: 100%;
}

.review-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.review-item-header-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.review-item-header-info-name {
  margin: 0;
  color: var(--Color-Neutral-neutral-800);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.review-item-header-info-location {
  color: var(--Color-Neutral-neutral-300);
  font-size: 14px;
  line-height: 22px;
  margin: 0;
}

.review-item-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.review-item-content-rate-time {
  display: flex;
  align-items: center;
  gap: 8px;
}

.review-item-content-time {
  color: var(--Foundation-Blue-blue-900);
  font-size: 12px;
  line-height: 12px;
  margin: 0;
}

.review-item-content-text {
  overflow: hidden;
  color: var(--gray-8);
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin: 0;
  max-height: 72px;
  transition: all 0.3s ease;
}

.review-item-content-text.active {
  max-height: 1000px;
  -webkit-line-clamp: unset;
}

.review-item-content-see-more {
  color: var(--Foundation-Blue-blue-900);
  font-family: var(--font-primary-medium);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  text-decoration-line: underline !important;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  cursor: pointer;
  margin: 0;
}

.form-type-2 {
  margin-top: 40px;
}

.itineraries-detail-6-content {
  margin-top: 16px;
}

.itineraries-detail-5-table {
  width: 100%;
  border-radius: 16px;
  background: #fff;
  padding: 24px 32px;
}

.table-check-date-data {
  width: 100%;
}

.table-check-date-data>thead>tr>th {
  padding: 16px 32px;
  height: 60px;
  vertical-align: middle;
  background: #dce7fa;
  backdrop-filter: blur(1px);
}

.table-check-date-data>tbody>tr>td {
  height: 80px;
  padding: 16px 32px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(217, 217, 217, 0.5);
}

.table-check-date-data>tbody>tr>td .btn-book-now {
  margin: 0 auto;
}

.table-check-date-data>tbody>tr:nth-child(even)>td {
  background: #f5f5f5;
  backdrop-filter: blur(1px);
}

.sold-out {
  color: #da251d;
  font-family: var(--font-primary-medium);
}

.itineraries-what-included-content {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 30px;
}

.itineraries-what-included-second {
  display: flex;
  padding: 0px 32px;
  align-items: flex-start;
  flex-direction: column;
  gap: 24px;
  flex: 1;
}

.itineraries-what-included-item {
  display: flex;
  padding: 16px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  border-radius: 16px;
  background: #fff9f3;
}

.itineraries-what-included-item-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.itineraries-what-included-item-header>p {
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  margin: 0;
  flex: 1;
}

.itineraries-what-included-item-content>ul {
  display: flex;
  padding: 0 16px 0 16px;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  list-style: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  transition: padding 0.3s ease;
}

.itineraries-what-included-item-content.active>ul {
  max-height: 1000px;
  padding: 16px 16px 0px 16px;
}

.itineraries-what-included-item-content>ul>li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.itineraries-what-included-item-content>ul>li>p {
  margin: 0;
  color: var(--gray-8);
}

.itineraries-what-included-content {
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(217, 217, 217, 0.5);
}

.form-type-2 {
  display: flex;
  height: 70px;
  justify-content: center;
  align-items: center;
}

.form-type-2>form {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid var(--yellow-500);
  background: var(--clr-white);
  box-shadow: 0px 2px 4px 0px rgba(6, 21, 86, 0.15);
}

.form-type-2>form>.form-group {
  display: flex;
  padding: 8px 16px;
  justify-content: justify-between;
  align-items: center;
  gap: 4px;
  flex: 1 0 0;
  border-radius: 8px;
  background: var(--clr-white);
  margin: 0;
}

.form-type-2>form .line {
  width: 1px;
  height: 32px;
  background: #d9d9d9;
}

.form-type-2>form .form-item {
  height: 100%;
}

.form-type-2>form>.form-group>div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.itineraries-detail-left {
  width: 609px;
}

.itineraries-detail-right {
  width: calc(100% - 639px);
}

.form-type-2>form label {
  color: var(--gray-6---subtle-text);
  font-family: var(--font-primary-bold);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  text-transform: uppercase;
  margin: 0;
}

.form-type-2>form>.form-group>div input {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-regular);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  height: 26px;
  border: none;
  outline: none;
  width: 100%;
  padding: 0;
  border-radius: 0;
}

.form-type-2>form>.form-group>div>div {
  display: flex;
  align-items: center;
  gap: 4px;
}

.form-type-2 .btn-check-date {
  margin: 8px 16px;
  border-radius: 8px;
}

.itineraries-detail-2-inner {
  display: flex;
  width: 100%;
  padding: 24px;
  align-items: flex-start;
  gap: 30px;
  border-radius: 16px;
  background: var(--clr-white);
}

.itineraries-detail-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.itineraries-detail-item .itineraries-detail-item-title {
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  height: auto;
}

.itineraries-detail-item-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1 0 0;
}

.itineraries-detail-item-footer {
  display: flex;
  align-items: center;
  gap: 4px;
  width: max-content;
}

.itineraries-detail-item-footer>img {
  max-width: 24px;
  height: 24px;
}

.itineraries-detail-item-footer>p {
  margin: 0;
  color: var(--Primary);
  font-family: var(--font-primary-medium);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.itineraries-detail-item-time {
  margin: 0;
  color: var(--yellow-500);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.itineraries-detail-item-title {
  margin: 0;
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-primary-medium);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
  height: 64px;
}

.itineraries-detail-right-slider .owl-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  right: 0;
  top: 0;
}

.itineraries-detail-right-slider .owl-nav>div {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.itineraries-detail-item-content>img {
  margin-bottom: 24px;
}

.timeline-itineraries {
  display: flex;
  flex-direction: column;
  gap: 24px 0;
  margin-top: 24px;
  max-height: 464px;
  overflow-y: scroll;
}

.timeline-itineraries-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-right: 16px;
}

.timeline-itineraries-item-time {
  display: flex;
  height: 40px;
  padding: 0px 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background: #0099e8;
  color: var(--clr-white);
  text-align: center;
  font-family: var(--font-primary-regular);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
  margin: 0;
}

.timeline-itineraries-item-line {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timeline-itineraries-item-line .line {
  width: 2px;
  height: 82px;
  flex-shrink: 0;
  border-radius: 39px;
  background: var(--Foundation-Blue-blue-50);
  margin-bottom: -20px;
}

.timeline-itineraries-item-content {
  display: flex;
  padding: 8px 16px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  border-radius: 8px;
  border: 1px solid var(--Foundation-Blue-blue-50);
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
}

.timeline-itineraries-item-content>p {
  margin: 0;
}

.timeline-itineraries-item-content>p:first-child {
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-primary-medium);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
}

.timeline-itineraries-item-content>p:last-child {
  color: var(--gray-8);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 48px;
}

.roadmap-content {
  margin-top: 24px;
  position: relative;
  width: max-content;
}

.roadmap-content .btn-modal-roadmap {
  top: unset;
  bottom: 24px;
}

.booking-inner {
  display: flex;
  padding: 24px 0 112px 0;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
}

.booking-inner-left {
  width: calc(100% - 486px);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.booking-menu {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.booking-menu-item {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.booking-menu-item-step {
  position: relative;
  display: flex;
  width: 24px;
  height: 24px;
  padding: 0px 7px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  aspect-ratio: 1/1;
  border-radius: 20px;
  border: 1.5px solid var(--gray-6---subtle-text);
  color: var(--gray-6---subtle-text);
  font-family: var(--font-primary-medium);
  font-size: 12px;
  font-style: normal;
  line-height: 12px;
}

.booking-menu-item-step>img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: all 0.3s ease;
}

.booking-menu-item.active .booking-menu-item-step>img {
  opacity: 1;
}

.booking-menu-item>p {
  color: var(--gray-6---subtle-text);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  margin: 0;
  transition: all 0.3s ease;
}

.booking-menu-item.active>p {
  color: var(--Foundation-Blue-blue-500);
}

.form-booking-step-1 {
  margin: 0;
}

.list-selection {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.list-selection-title {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
}

.list-selection-item {
  display: flex;
  align-items: flex-start;
  border-radius: 8px;
  border: 1px solid var(--Foundation-Blue-blue-50);
  background: var(--clr-white);
  overflow: hidden;
}

.list-selection-item>div {
  width: 50%;
}

.list-selection-item-right.overview-itinerary-item-second {
  gap: 32px;
}

.list-selection-item-right .offers-item-actions {
  display: none;
}

.itinerary-item .offers-item-actions {
  display: block;
}

.list-selection-item-right .offers-item-actions .btn-book-now {
  width: max-content;
  flex: unset;
}

.btn-continue {
  width: 264px;
}

.list-selection-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.booking-inner-right {
  display: flex;
  width: 456px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  border-radius: 8px;
  background: var(--clr-white);
  overflow: hidden;
  position: sticky;
  top: 80px;
}

.booking-inner-right-content {
  display: flex;
  padding: 0px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

.booking-inner-right-content-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.booking-inner-time {
  display: flex;
  align-items: center;
  gap: 8px;
}

.booking-inner-time-text,
.booking-inner-time-note {
  margin: 0;
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-regular);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
}

.booking-inner-time-note {
  color: var(--gray-6---subtle-text);
}

.booking-inner-right-content-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.booking-inner-right-content-actions>p {
  margin: 0;
  cursor: pointer;
  color: var(--Primary);
  font-family: var(--font-primary-medium);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.booking-inner-right .line {
  width: 100%;
  height: 1px;
  background: var(--Foundation-Blue-blue-50);
}

.booking-inner-right-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
}

.booking-inner-right-item-first,
.booking-inner-right-item-second {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.booking-inner-right-item-first>p:first-child {
  color: var(--Foundation-Blue-blue-200) !important;
  font-family: var(--font-primary-bold) !important;
  font-size: 12px !important;
  font-style: normal !important;
  line-height: 20px !important;
  margin: 0;
}

.booking-inner-right-item-first>p:last-child {
  margin: 0;
  color: var(--Foundation-Blue-blue-200);
  font-family: var(--font-primary-regular);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.booking-inner-right-item-second>p {
  margin: 0;
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-regular);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}

.subtotal-price>p:first-child {
  font-size: 16px;
  line-height: 24px;
}

.total-price>p:first-child {
  font-size: 16px;
  line-height: 24px;
  font-family: var(--font-primary-medium);
}

.total-price>p:last-child {
  font-size: 18px;
  line-height: 26px;
  font-family: var(--font-primary-medium);
}

.booking-inner-right-footer {
  width: 100%;
  padding: 0 16px;
}

.booking-inner-right-footer {
  display: flex;
  width: 420px;
  padding: 16px 24px;
  justify-content: center;
  align-items: center;
  border-top: 0.5px solid var(--gray-4---stroke);
  color: var(--Primary);
  font-family: var(--font-primary-medium);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  cursor: pointer;
}

.modal-detail .modal-dialog {
  width: min(95%, 800px);
  margin: 4% auto;
}

.modal-price-detail .modal-dialog {
  width: min(95%, 600px);
  margin: 4% auto;
}

.modal-detail .modal-dialog .modal-content {
  border-radius: 0;
}

.modal-price-detail .modal-dialog .modal-content {
  border-radius: 16px;
  overflow: hidden;
}

.modal-detail .modal-dialog .modal-content .modal-header {
  display: flex;
  padding: 16px 24px;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-bottom: 1px solid var(--gray-4---stroke);
}

.modal-detail .modal-dialog .modal-content .modal-header .modal-title {
  flex: 1;
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-primary-medium);
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 26px;
}

.modal-detail .modal-dialog .modal-content .modal-header .close-modal-detail {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 1;
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-primary-medium);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
}

.modal-detail .modal-dialog .modal-content .modal-body {
  display: flex;
  padding: 24px 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.modal-detail .modal-dialog .modal-content .modal-body>div:first-child {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.modal-detail .modal-dialog .modal-content .modal-body>div:first-child>div {
  flex: 1;
}

.img-cruise {
  border-radius: 8px;
  overflow: hidden;
}

.modal-detail-itineraries-title {
  margin: 0;
  color: var(--Title);
  font-family: var(--font-primary-semiBold);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
  text-transform: uppercase;
}

.modal-detail-itineraries .timeline-itineraries {
  padding: 16px 0px 16px 16px;
}

.list-inclusions-exclusions {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

.list-inclusions-exclusions-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 1 0 0;
}

.list-inclusions-exclusions-item-title {
  color: var(--Title);
  font-family: var(--font-primary-semiBold);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
  text-transform: uppercase;
  margin: 0;
}

.list-inclusions-exclusions-item>ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.list-inclusions-exclusions-item>ul>li {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.list-inclusions-exclusions-item>ul>li>p {
  color: var(--gray-8);
  font-family: var(--font-primary-regular);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  flex: 1;
  margin: 0;
}

.modal-price-detail-title {
  color: var(--Foundation-Blue-blue-200);
  font-family: var(--font-primary-bold);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  text-transform: uppercase;
}

.modal-price-detail-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.modal-price-detail-item-header,
.modal-price-detail-item-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.modal-price-detail-item-header-title {
  margin: 0;
  color: var(--yellow-500);
  font-family: var(--font-primary-bold);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  text-transform: uppercase;
}

.modal-price-detail-item-header>p:not(.modal-price-detail-item-header-title) {
  color: var(--Foundation-Blue-blue-200);
  font-family: var(--font-primary-regular);
  font-size: 16px;
  font-style: normal;
  margin: 0;
  line-height: 24px;
}

.modal-price-detail-item-child {
  padding-left: 16px;
}

.modal-price-detail-item-child>p {
  color: var(--gray-7);
  font-family: var(--font-primary-regular);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  margin: 0;
}

.modal-price-detail-subtotal {
  flex-direction: row;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px dashed #d9d9d9;
}

.modal-price-detail-subtotal>p {
  margin: 0;
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
}

.modal-price-detail-subtotal>p:first-child {
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.modal-price-detail-subtotal>p:last-child {
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
}

.modal-detail .modal-dialog .modal-content .modal-footer {
  padding: 24px 32px;
  border-top: 0.5px solid var(--gray-4---stroke);
  background: #fff;
}

.modal-price-detail-total {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
}

.modal-price-detail-total>p {
  margin: 0;
}

.modal-price-detail-total>p:first-child {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
}

.modal-price-detail-total>p:last-child {
  color: var(--yellow-500);
  font-family: var(--font-primary-bold);
  font-size: 20px;
  font-style: normal;
  line-height: 28px;
}

.booking-main {
  background-color: #efefef;
}

.box-booking {
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  border-radius: 8px;
  background: #fff;
}

.booking-restaurant-item {
  position: relative;
  height: 264px;
}

.booking-restaurant-item>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.booking-restaurant-item-content {
  width: 100%;
  height: 122px;
  padding: 8px 16px;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0) 22.54%,
      rgba(0, 0, 0, 0.8) 100%);
  display: flex;
  align-items: flex-end;
  position: absolute;
  bottom: 0;
  left: 0;
}

.booking-restaurant-item-content>p {
  margin: 0;
  color: var(--clr-white);
  font-family: var(--font-leostut);
  font-size: 32px;
  font-style: normal;
  line-height: 40px;
}

.booking-deck {
  display: flex;
  padding-bottom: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.booking-deck-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.booking-deck-item-title {
  margin: 0;
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-primary-medium);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
  text-transform: uppercase;
  text-align: center;
}

.custom-radio-group {
  width: 100%;
  background: #f7f8f9;
  padding: 20px 16px;
  border-radius: 8px;
}

.custom-radio-item {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  position: relative;
  padding: 4px 0;
}

.custom-radio-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.custom-radio-item input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.custom-radio-item label {
  display: flex;
  align-items: center;
  width: 100%;
  cursor: pointer;
  padding-left: 30px;
  position: relative;
  justify-content: space-between;
  transition: color 0.2s ease-in-out;
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-regular);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.custom-radio-item label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  background-color: transparent;
  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.custom-radio-item label::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--Primary);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.custom-radio-item input[type="radio"]:checked+label::before {
  border-color: var(--Primary);
}

.custom-radio-item input[type="radio"]:checked+label::after {
  opacity: 1;
}

.booking-bill-select-payment {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.booking-bill-select-payment>div {
  border-radius: 8px;
  background: var(--clr-white);
  backdrop-filter: blur(1px);
  width: 50%;
  display: flex;
  padding: 24px 64px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.radio-price {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.price-unit {
  color: var(--gray-6---subtle-text);
  font-family: var(--font-primary-regular);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
}

.box-booking-title {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 22px;
  font-style: normal;
  line-height: 30px;
  margin: 0;
}

.box-booking-subtitle {
  color: #135581;
  font-family: var(--font-primary-regular);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  margin: 0;
  width: min(100%, 838px);
}

.custom-select-type-2 {
  display: flex;
  padding: 12px 16px;
  align-items: center;
  gap: 10px;
  border-radius: 48px;
  border: 1px solid var(--gray-4---stroke);
}

.select-deck {
  width: 100%;
}

.booking-deck-filter {
  display: flex;
  width: min(100%, 419px);
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.booking-deck-filter>p {
  margin: 0;
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.form-bus-pick-up {
  width: 100%;
}

.form-style-3 .form-group>label {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.form-style-3 .form-group>label .label-note {
  margin: 0;
  color: var(--Blue-Dolphin-blue-500);
  font-family: var(--font-primary-regular);
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  line-height: 24px;
}

.form-style-3 .form-group>.form-item {
  display: flex;
  padding: 12px 16px;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: 48px;
  border: 1px solid var(--gray-4---stroke);
  height: 48px;
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-regular);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  /* 150% */
}

.form-style-3 .form-group>textarea.form-item {
  display: flex;
  padding: 12px 16px;
  gap: 10px;
  height: 78px;
  resize: none;
  border-radius: 16px;
  border: 1px solid var(--gray-4---stroke);
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-regular);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.form-style-3 .form-group>textarea.form-item::placeholder,
.form-style-3 .form-group>input.form-item::placeholder {
  color: var(--gray-6---subtle-text);
}

.list-service-cabin {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.service-cabin-item {
  display: flex;
  align-items: flex-start;
  border-radius: 8px;
  border: 1px solid var(--Foundation-Blue-blue-50);
  background: var(--clr-white);
  overflow: hidden;
}

.service-cabin-item-left {
  width: 300px;
  height: 188px;
}

.service-cabin-item-left>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-cabin-item-right {
  flex: 1;
  display: flex;
  padding: 16px;
  flex-direction: column;
  gap: 26px;
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
}

.service-cabin-item-right-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

.service-cabin-item-title {
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-primary-medium);
  font-size: 22px;
  font-style: normal;
  line-height: 30px;
}

.service-cabin-item-desc {
  color: var(--gray-7);
  font-family: var(--font-primary-regular);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
}

.service-cabin-item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

.list-service-cabin-item-actions-count {
  width: 140px;
  display: flex;
  align-items: center;
}

.service-cabin-item-count {
  flex: 1;
  border: 0;
  outline: none;
  box-shadow: none;
}

.list-service-cabin-item-actions-count .btn-actions {
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.service-cabin-item-count {
  color: var(--gray-9---body-text);
  text-align: center;
  font-family: var(--font-primary-bold);
  font-size: 20px;
  font-style: normal;
  line-height: 28px;
}

.service-cabin-item-price>p {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-regular);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.service-cabin-item-price>p>strong {
  font-weight: 500;
  font-family: var(--font-primary-medium);
}

.box-booking-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.box-booking-link {
  color: var(--Primary);
  font-family: var(--font-primary-medium);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  text-decoration-line: underline !important;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.box-booking-img {
  border-radius: 4px;
  width: 100%;
  overflow: hidden;
  height: 264px;
}

.box-booking-img>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.list-service-spa {
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  background: #f7f8f9;
}

.service-spa-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 24px;
  width: 100%;
}

.service-spa-item-header {
  display: flex;
  height: 32px;
  padding: 4px 8px;
  align-items: center;
  gap: 16px;
  background: var(--Foundation-Blue-blue-50);
  color: var(--Title);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  width: 100%;
}

.service-spa-item-form {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  align-self: stretch;
}

.service-spa-item-form>.form-group {
  margin: 0;
}

.service-spa-item-form>div:first-child,
.service-spa-item-form>div:nth-child(2) {
  flex: 1;
}

.service-spa-item-form-guest {
  display: flex;
  align-items: center;
  gap: 24px;
}

.service-spa-item-form-guest>p {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-regular);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.service-spa-item-footer {
  width: 100%;
  padding-top: 24px;
  border-top: 1px dashed var(--gray-4---stroke);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
}

.add-more-service-spa {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #005edc;
  font-family: var(--font-primary-regular);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  cursor: pointer;
}

.form-register-kayak {
  display: flex;
  padding: 16px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  background: #f7f8f9;
}

.guest-count-kayak {
  display: flex;
  align-items: center;
  gap: 8px;
}

.box-info-guest-header-form {
  display: flex;
  align-items: center;
  gap: 1px;
  align-self: stretch;
}

.box-info-guest-header-form-item {
  display: flex;
  padding: 16px 32px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-top: 2px solid;
  border-color: transparent;
  background: transparent;
  min-width: 176px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  background-color: transparent;
}

.box-info-guest-header-form-item:not(:last-child) {
  border-right: 1px solid var(--gray-4---stroke);
}

.box-info-guest-header-form-item.active {
  border-top: 2px solid var(--yellow-400);
  background: var(--clr-white);
}

.box-info-guest-header-form {
  margin-top: 16px;
}

.form-register-guest {
  padding: 20px 16px 24px 16px;
  background: var(--clr-white);
}

.box-info-guest-title {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
  margin-bottom: 8px;
}

.box-info-guest-text {
  color: var(--gray-8);
}

.form-actions-submit {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  margin-top: 24px;
}

.btn-next-guest {
  width: 264px;
}

.form-rate-star {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  border-radius: 16px;
  background: var(--clr-white);
  margin: 32px 0;
}

.form-rate-star-header {
  display: flex;
  align-items: center;
  align-self: stretch;
  justify-content: space-between;
}

.form-rate-star-header-item.first,
.form-rate-star-item-title {
  width: 200px;
  margin-right: 84px;
}

.form-rate-star-header-item:not(.first) {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-rate-star-header-item>p {
  width: 110px;
  text-align: center;
  color: #9da8c3;
  text-align: center;
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.modal-review .modal-dialog {
  width: min(95%, 900px);
  margin: 4% auto;
}

.modal-review .modal-body {
  padding: 16px 32px;
}

.modal-review .modal-footer {
  border-top: 0.5px solid var(--gray-4---stroke);
  display: flex;
  padding: 16px 24px;
  justify-content: flex-end;
  align-items: center;
  align-self: stretch;
}

.form-rate-star-item {
  display: flex;
  height: 44px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

.form-rate-star-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: stretch;
}

.form-rate-star-items .line {
  width: 100%;
  height: 1px;
  background: #f0f0f0;
}

.form-rate-star-item-title>p {
  display: flex;
  height: 40px;
  padding: 0px 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  border: 1px solid var(--Foundation-Blue-blue-50);
  background: var(--clr-white);
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  width: max-content;
}

.form-rate-star-item-rate {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.form-rate-star-item-rate>img {
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
  transition: all 0.3s ease-in-out;
}

.form-rate-star-item-rate.active>img,
.form-rate-star-item-rate:hover>img {
  filter: grayscale(0);
  -webkit-filter: grayscale(0);
}

.form-review-title {
  color: #9da8c3;
  font-family: var(--font-primary-bold);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.form-review .form-group label {
  color: var(--gray-9---body-text);
  text-align: center;
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  font-weight: unset;
  line-height: 24px;
}

.form-review .form-group .form-item {
  display: flex;
  padding: 12px 16px;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: 48px;
  background: var(--bg-2);
}

.form-review .form-group .form-file {
  justify-content: flex-start;
  gap: 10px;
}

.form-review .form-group .form-textarea {
  border-radius: 8px;
  height: 110px;
  resize: none;
}

.btn-chosen-file {
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid var(--gray-4---stroke);
  background: var(--clr-white);
  display: flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
}

.radio-group {
  width: 100%;
  margin-top: 32px;
}

.radio-option {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.radio-option:last-child {
  margin-bottom: 0;
}

.radio-option input[type="radio"] {
  display: none;
}

.radio-option label {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  padding-left: 28px;
  color: #1d2433;
}

.radio-option label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 2px solid var(--gray-4---stroke);
  border-radius: 50%;
  background-color: #fff;
  box-sizing: border-box;
}

.radio-option input[type="radio"]:checked+label::before {
  border-color: var(--Foundation-Blue-blue-500);
  background-color: #ffffff;
}

.radio-option input[type="radio"]:checked+label::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-color: var(--Foundation-Blue-blue-500);
  border-radius: 50%;
}

.custom-select-guest {
  position: relative;
}

.custom-select-guest-popup {
  position: absolute;
  top: 72px;
  left: 0;
  width: min(100%, 432px);
  display: flex;
  padding: 16px 24px;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  border-radius: 8px;
  background: var(--clr-white);
  z-index: 10;
  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

.custom-select-guest-header {
  cursor: pointer;
}

.custom-select-guest-popup.active {
  opacity: 1;
  visibility: visible;
}

.custom-select-guest-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 44px;
}

.custom-select-guest-item-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.custom-select-guest-item-left>p:first-child {
  color: var(--clr-blue) !important;
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.custom-select-guest-item-left>p:last-child {
  color: var(--gray-6---subtle-text);
}

.booking-inner-step-4 {
  flex-direction: column;
}

.booking-inner-bill {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  border-radius: 8px;
  background: var(--clr-white);
}

.booking-inner-bill-left,
.booking-inner-bill-right {
  flex: 1;
}

.booking-inner-bill-left-content {
  display: flex;
  padding: 24px 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

.booking-guest-bill {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: min(100%, 385px);
}

.booking-guest-bill-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.booking-guest-bill-item>p {
  color: var(--gray-6---subtle-text);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  flex: 1;
}

.booking-guest-bill-item>p:first-child {
  width: 116px;
  flex: unset;
}

.booking-guest-bill-item>p.edit-guest {
  color: var(--Primary);
  cursor: pointer;
}

.form-promo-code {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-promo-code .form-group {
  display: flex;
  height: 48px;
  padding: 6px 6px 6px 16px;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: 48px;
  border: 1px solid var(--gray-4---stroke);
  background: var(--clr-white);
  margin: 0;
}

.form-promo-code .form-group>input {
  flex: 1;
  height: 100%;
}

.form-promo-code .form-group>.btn-apply {
  height: 36px;
}

.booking-inner-bill-right {
  display: flex;
  padding: 24px 64px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.booking-inner-bill-right-title {
  color: #7a8e9e;
  font-family: var(--font-primary-bold);
  font-size: 12px;
  font-style: normal;
  line-height: 20px;
  /* 166.667% */
  text-transform: uppercase;
}

.booking-bill-right-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.booking-bill-right-item-header,
.booking-bill-right-item-child {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.booking-bill-right-item-header>p:last-child {
  color: var(--Foundation-Blue-blue-200);
}

.booking-bill-right-item-child>p {
  color: var(--gray-9---body-text);
}

.booking-bill-right-item-subtotal>p {
  color: var(--gray-9---body-text) !important;
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.booking-bill-right-item-total>p {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.booking-inner-bill-right .booking-inner-right-footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px 0;
}

.booking-bill-select-payment-title {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
}

.booking-bill-select-payment-select .custom-radio-group {
  width: 100%;
  padding: 0px;
  background: transparent;
  display: flex;
  align-items: flex-start;
  gap: 64px;
}

.booking-bill-select-payment-select .custom-radio-group>div {
  margin: 0;
}

.booking-bill-select-payment-note {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-4---stroke);
  margin-top: 16px;
}

.booking-bill-select-payment-note>p {
  flex: 1;
  color: #1d2433;
}

.booking-bill-select-payment-note>p>a {
  color: var(--yellow-500);
  text-decoration-line: underline !important;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  cursor: pointer;
}

.btn-comfirm-book {
  width: 100%;
}

.booking-inner-confirm {
  display: flex;
  width: 100%;
  padding: 32px 64px;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  border-radius: 8px;
  background: var(--clr-white);
}

.booking-inner-confirm-title {
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-leostut);
  font-size: 40px;
  font-style: normal;
  line-height: 48px;
  text-transform: capitalize;
}

.booking-confirm-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.booking-confirm-inner>p {
  color: var(--gray-9---body-text);
}

.booking-confirm-inner>p>a {
  color: #00499d;
  text-decoration-line: underline !important;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  cursor: pointer;
}

.reservation-number {
  font-family: var(--font-primary-medium);
}

.size-sateroom {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}

.size-sateroom-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.size-sateroom-item-title {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-regular);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  text-transform: uppercase;
}

.size-sateroom-item-value {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-bold);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.stateroom-box-1-content {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.stateroom-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.btn-border-black {
  cursor: pointer;
  display: flex;
  height: 48px;
  padding: 8px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex: 1;
  border-radius: 48px;
  border: 1px solid var(--Foundation-Blue-blue-500);
}

.stateroom-actions .btn-color-black {
  flex: 1;
}

.modal-suite-details .modal-dialog {
  width: min(95%, 1600px);
  margin: 4% auto;
}

.modal-suite-details .modal-dialog .modal-content {
  border-radius: 0;
}

.modal-suite-details .close-modal-roadmap {
  opacity: 1;
}

.modal-suite-details .modal-header {
  display: flex;
  padding: 16px 32px;
  justify-content: flex-end;
  border-bottom: 1px solid var(--gray-4---stroke);
}

.modal-suite-details .modal-body {
  padding: 0;
  height: 768px;
}

.modal-suite-details-content {
  display: flex;
  align-items: flex-start;
}

.modal-suite-details-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  display: flex;
  padding: 24px 32px 0px 32px;
  width: 672px;
}

.modal-suite-details-left .size-sateroom-item {
  width: min(100%, 400px);
}

.modal-suite-details-left .layout-dinning-item-content-title {
  padding-bottom: 24px;
  margin-bottom: 24px;
}

.modal-suite-details-right {
  flex: 1;
  width: calc(100% - 700px);
  position: relative;
}

.modal-suite-details-right-menu {
  display: flex;
  width: min(95%, 896px);
  margin: 0 auto;
  align-items: flex-start;
  border: 1px solid var(--Foundation-Blue-blue-500);
  background: var(--clr-white);
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.modal-suite-details-right-menu-item {
  display: flex;
  height: 48px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex: 1 0 0;
  color: #425563;
  font-family: var(--font-primary-medium);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

.modal-suite-details-right-menu-item:not(:last-child) {
  border-right: 1px solid var(--Foundation-Blue-blue-500);
}

.modal-suite-details-right-menu-item.active,
.modal-suite-details-right-menu-item:hover {
  background: var(--Foundation-Blue-blue-500);
  color: var(--clr-white);
}

.modal-suite-details-right-content-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.modal-suite-details-right-content-item.active {
  opacity: 1;
  visibility: visible;
}

.style-item {
  margin-top: 100px;
}

.modal-suite-details-features {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  height: 650px;
  overflow-y: scroll;
}

.modal-suite-details-features-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 95%;
  margin: 0 auto;
}

.modal-suite-details-features-item>p {
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-primary-bold);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
  text-transform: uppercase;
}

.modal-suite-details-features-item>ul {
  margin: 0;
  padding-left: 24px;
}

.modal-suite-details-features-item>ul>li {
  color: var(--gray-7);
  font-family: var(--font-primary-regular);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.modal-suite-details-location {
  width: 95%;
  margin: 0 auto;
}

.modal-suite-details-location-header {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.modal-suite-details-location-header>p {
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-primary-bold);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px;
  text-transform: uppercase;
}

.modal-suite-details-location-map {
  width: 100%;
  height: 572px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: scroll;
  margin-top: 40px;
}

.table-check-date-data .btn-book-now {
  width: max-content;
  color: var(--Foundation-Blue-blue-500) !important;
}

.breadcrumb {
  display: flex;
  height: 38px;
  padding: 8px 0;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  background: #fff9f3;
  margin: 0;
}

.breadcrumb-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumb-item {
  color: var(--gray-6---subtle-text) !important;
  font-family: var(--font-primary-regular);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}

.breadcrumb-item-active {
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-primary-regular);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
}

.offers-box-1 {
  background-color: var(--clr-white);
}

.offers-box-1-header {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.offers-list,
.marketing-materials-list {
  margin-top: 40px;
}

.offers-list>div>div,
.marketing-materials-list>div>div {
  margin-bottom: 40px;
}

.marketing-materials-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.marketing-materials-item-content {
  display: flex;
  width: 100%;
  height: 200px;
  padding: 32px 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.8) 57.32%);
  position: absolute;
  bottom: 0;
  left: 0;
}

.marketing-materials-item-play-video {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  top: 32px;
  left: 24px;
  color: var(--clr-white);
  font-family: var(--font-primary-regular);
  font-size: 20px;
  font-style: normal;
  line-height: 28px;
}

.marketing-materials-item-content>p {
  color: var(--clr-white);
  font-family: var(--font-leostut);
  font-size: 32px;
  font-style: normal;
  line-height: 40px;
}

.marketing-materials-item-content>.btn-border-white {
  width: max-content;
}

.btn-watch-now {
  padding: 8px 16px;
  color: var(--clr-white);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.modal-video .modal-dialog {
  width: min(95%, 1170px);
  margin: 4% auto;
}

.modal-video .modal-header {
  display: flex;
  padding: 16px 24px;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--gray-4---stroke);
}

.modal-video .modal-content {
  border-radius: 16px;
  overflow: hidden;
}

.modal-video .modal-content .modal-body {
  padding: 0;
}

.modal-video .modal-footer {
  display: flex;
  padding: 16px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  border-top: 0.5px solid var(--gray-4---stroke);
  background: var(--clr-white);
}

.modal-video .modal-footer>p:first-child {
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-leostut);
  font-size: 32px;
  font-style: normal;
  line-height: 40px;
}

.modal-video .modal-footer>p:last-child {
  color: var(--gray-8);
  text-align: start;
  font-family: var(--font-primary-regular);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.banner-page-blog {
  height: 812px;
}

.banner-page-blog .banner-content {
  position: absolute;
  top: 200px;
  left: 50%;
  transform: translateX(-50%);
}

.banner-page-blog .banner-content-inner {
  width: min(100%, 983px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}

.banner-content-title {
  color: var(--clr-white);
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-family: var(--font-primary-medium);
  font-size: 56px;
  font-style: normal;
  line-height: 64px;
  margin: 0;
}

.banner-content-desc {
  color: var(--clr-white);
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-family: var(--font-primary-medium);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
}

.banner-page-list-item {
  display: flex;
  width: 225px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--clr-white);
  position: relative;
}

.banner-page-list-item>.timer {
  width: 100%;
  height: 4px;
  background: var(--clr-white);
  position: absolute;
  top: -4px;
  left: 0;
  border-radius: 8px 8px 0px 0px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.banner-page-list-item>.timer.active {
  opacity: 1;
  visibility: visible;
}

.banner-page-list-item:has(.timer.active) {
  border-radius: 0px 0px 8px 8px;
  overflow: unset;
}

.banner-page-list-item>.timer>.timer-active {
  width: 0%;
  height: 100%;
  background: var(--attention);
}

.banner-page-list-item>.timer>.timer-active.running {
  animation: fillTimer linear forwards;
  animation-duration: 10s;
}

.banner-page-list-item>img {
  width: 100%;
  height: 153px;
  object-fit: cover;
}

.banner-page-list-item-title {
  display: flex;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  height: 62px;
}

.banner-page-list {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-end;
}

.banner-page-news {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
}

.flatpickr-calendar {
  width: min(100%, 572px);
  padding: 16px 24px;
  border-radius: 8px;
  background: var(--clr-white);
}

.flatpickr-months {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  margin-bottom: 16px;
}

.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
  position: unset;
  padding: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flatpickr-months .flatpickr-month {
  height: 40px;
}

.flatpickr-innerContainer,
.flatpickr-rContainer,
.flatpickr-days {
  width: 100%;
}

.dayContainer {
  width: 100%;
  max-width: unset;
  min-width: unset;
}

.flatpickr-day {
  max-width: unset;
  display: flex;
  width: 68px;
  height: 64px;
  padding: 6px 4px;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-primary-medium);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
  border-radius: 4px;
}

.flatpickr-current-month span.cur-month,
.flatpickr-current-month input.cur-year {
  color: var(--Foundation-Blue-blue-500);
  text-align: center;
  font-family: var(--font-primary-medium);
  font-size: 20px;
  font-style: normal;
  line-height: 30px;
  font-weight: unset;
  padding: 0;
  background-color: var(--clr-white) !important;
}

.flatpickr-current-month input.cur-year::-webkit-outer-spin-button,
.flatpickr-current-month input.cur-year::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.numInputWrapper span {
  display: none;
}

.flatpickr-day.nextMonthDay {
  color: var(--Foundation-Blue-blue-500);
}

.flatpickr-day>span {
  color: var(--gray-6---subtle-text);
  text-align: center;
  font-family: var(--font-primary-regular);
  font-size: 14px;
  font-style: normal;
  line-height: 24px;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: var(--yelow-400);
  border-color: var(--yelow-400);
  color: var(--clr-blue);
}

.flatpickr-disabled,
.flatpickr-day.today {
  background: var(--gray-1) !important;
  color: var(--gray-5---disabled) !important;
  border-color: var(--gray-1) !important;
}

.flatpickr-day.selected>span {
  color: var(--clr-blue);
}

.flatpickr-day.today {
  color: #1886ED !important;
}

.flatpickr-day:hover {
  color: var(--Foundation-Blue-blue-500);
}

.privacy-policy-header {
  background: var(--clr-white);
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-regular);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.privacy-policy-content {
  background: var(--bg-2);
}

.privacy-policy-items {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.privacy-policy-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  border-radius: 8px;
  background: var(--clr-white);
}

.privacy-policy-item-header {
  display: flex;
  height: 58px;
  padding: 16px;
  align-items: center;
  gap: 16px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.privacy-policy-item-content {
  display: flex;
  padding: 0 16px;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

.privacy-policy-item.active .privacy-policy-item-content {
  max-height: 1000px;
  padding: 16px;
}

.box-6-home {
  margin: 0;
  font-family: "Poppins", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.box-6-home::after {
  content: "";
  width: 100%;
  height: 288px;
  background-image: url(../img/box-home-6-bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
}

.box-6-home::before {
  content: "";
  position: absolute;
  top: 150px;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/Rectangle-32.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

.box-6-home-second-bg {
  width: 100%;
  height: 16px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: url(../img/box-home-6-bg-1.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.main-content {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 50px 0;
  gap: 60px;
  position: relative;
  z-index: 1;
}

.text-content {
  flex: 1;
  padding-right: 40px;
}

.text-content h1 {
  font-family: var(--font-leostut);
  font-size: 46px;
  color: var(--Foundation-Blue-blue-500);
  margin-top: 0;
  margin-bottom: 20px;
  line-height: 1.2;
}

.text-content p {
  color: var(--gray-8);
  font-family: var(--font-primary-regular);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  width: min(100%, 420px);
}

.slider-content {
  flex-basis: min(56%, 879px);
  flex-shrink: 0;
  position: relative;
  padding-right: 40px;
  box-sizing: border-box;
}

.swiper.box-home-6-slider {
  width: 100%;
  height: 1040px;
}

.box-home-6-slider.swiper-wrapper {
  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1) !important;
}

.box-home-6-slider .swiper-slide {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: #eee;
  color: #fff;
  height: 500px !important;
}

.box-home-6-slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.box-home-6-slider .swiper-slide::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 70%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  z-index: 1;
}

.box-home-6-slider .slide-overlay-text {
  position: absolute;
  bottom: 20px;
  left: 25px;
  z-index: 2;
  color: var(--clr-white);
  font-family: var(--font-leostut);
  font-size: 32px;
  font-style: normal;
  line-height: 40px;
  /* 125% */
}

.swiper-pagination {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: auto !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.swiper-pagination-bullet {
  display: block;
  margin: 0 !important;
  width: 11px;
  height: 11px;
  background-color: transparent;
  border: 2px solid #3d4f63;
  opacity: 0.8;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1),
    background-color 0.4s cubic-bezier(0.65, 0, 0.35, 1),
    border-color 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.swiper-pagination-bullet-active {
  background-color: #3d4f63;
  opacity: 1;
  border-color: #3d4f63;
  transform: scale(1.3);
}

.list-plan-your-cruise {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.private-charters-box-4 {
  background-color: var(--clr-white);
  margin-top: 0;
}

.private-charters-box-4 .overview-box-1-content {
  margin-top: -160px;
}

.private-charters-box-4 .overview-content-slider {
  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.25);
}

.private-charters-box-header {
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.private-charters-box-1 {
  padding: 112px 0 64px 0;
}

.private-charters-box-1-text {
  width: min(100%, 900px);
  padding: 24px 112px;
  border-radius: 146px;
  background: var(--clr-white);
  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.1);
  margin: -80px auto 0 auto;
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.private-charters-box-1-text>p:first-child {
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-leostut);
  font-size: 32px;
  font-style: normal;
  line-height: 40px;
}

.private-charters-box-1-text>p:last-child {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-regular);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.private-charters-box-2 .experience-box-1-content {
  margin-top: 0;
}

.private-charters-box-3-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.private-charters-box-3-items {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.private-charters-box-3-items .line {
  width: 100%;
  height: 1px;
  background: #d9d9d9;
}

.private-charters-box-3-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.private-charters-box-3-item-title {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.private-charters-box-3-item-icon {
  position: relative;
}

.private-charters-box-3-item-icon>img {
  transition: all 0.3s ease;
}

.private-charters-box-3-item-icon>img:last-child {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.private-charters-box-3-item-body {
  padding-top: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.private-charters-box-3-item.active .private-charters-box-3-item-icon>img:first-child {
  opacity: 0;
}

.private-charters-box-3-item.active .private-charters-box-3-item-icon>img:last-child {
  opacity: 1;
}

.private-charters-box-3-item.active .private-charters-box-3-item-body {
  max-height: 1000px;
  padding-top: 24px;
}

.btn-contact-us {
  width: max-content;
  margin-top: 32px;
}

.private-charters-box-6-desc {
  width: min(100%, 800px);
  color: var(--clr-white);
  font-family: var(--font-primary-regular);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  margin-top: 16px;
}

.private-charters-box-6 {
  width: 100%;
  height: 400px;
  position: relative;
  margin-top: 0;
}

.private-charters-box-6-img {
  width: 100%;
  height: 100%;
}

.private-charters-box-6-img>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right;
}

.private-charters-box-6-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.gallery-item {
  position: relative;
  border-radius: 16px;
  cursor: pointer;
}

.gallery-item>.play-video-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 112px;
  height: 112px;
}

.private-charters-box-5 .home-title {
  margin-bottom: 40px;
}

.modal-gallery .modal-dialog {
  border-radius: 16px;
  width: min(95%, 1320px);
}

.modal-gallery .modal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--gray-4---stroke);
}

.modal-gallery .modal-header .gallery-count {
  flex: 1;
  color: var(--gray-6---subtle-text);
  font-family: var(--font-leostut);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
}

.modal-gallery .modal-content {
  border-radius: 0;
}

.modal-gallery .modal-header .close {
  opacity: 1;
  font-size: 32px;
  font-weight: 400;
}

.modal-gallery .modal-body {
  padding: 0;
}

.gallery-slider .owl-nav .owl-prev,
.gallery-slider .owl-nav .owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  left: -56px;
}

.gallery-slider .owl-nav .owl-next {
  right: -56px;
  left: auto;
}

.modal-gallery .modal-footer {
  padding: 16px;
}

.gallery-thumbs-item {
  cursor: pointer;
}

.other-blogs-slider,
.itineraries-detail-detail-1-slider {
  margin-top: 40px;
  padding: 4px 0;
}

.other-blogs-slider.owl-carousel .owl-stage-outer {
  padding: 6px 0;
}

.header-blog-details {
  background-color: var(--Foundation-Blue-blue-500);
}

.main-blog-details {
  margin-top: 64px;
  background-color: var(--clr-white);
}

.main-itineraries {
  margin-top: 0px;
}

.currently-trending {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.currently-trending-title {
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-primary-bold);
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
  font-weight: unset;
}

.news-detail-content-menu {
  display: flex;
  padding: 12px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
  border-radius: 4px;
  border: 1px solid var(--Foundation-Blue-blue-50);
  background: var(--bg-2);
}

.news-detail-content-menu-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  align-self: stretch;
}

.news-detail-content-menu-title {
  flex: 1;
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
}

.news-detail-content-menu-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.news-detail-content-menu-list.active {
  max-height: 1000px;
}

.news-detail-content-menu-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.news-detail-content-menu-item-header {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}

.news-detail-content-menu-item-header>p {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.news-detail-content-menu-item-child {
  max-height: 0;
  overflow: hidden;
  margin-top: -8px;
  transition: all 0.3s ease-in-out;
}

.news-detail-content-menu-item-header>i {
  transition: all 0.3s ease-in-out;
  transform: rotate(-90deg);
}

.news-detail-content-menu-item.active .news-detail-content-menu-item-header>i {
  transform: rotate(0);
}

.news-detail-content-menu-item.active .news-detail-content-menu-item-child {
  max-height: 1000px;
  margin-top: 0;
}

.news-detail-content-menu-item-child>ul {
  padding-left: 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  list-style: none;
}

.news-detail-content-menu-item-child>ul>li {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-regular);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
}

.btn-scroll-to-menu {
  display: inline-flex;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  border-radius: 4px;
  border: 1px solid var(--Foundation-Blue-blue-500);
  background: #eee;
  position: sticky;
  top: 400px;
  margin-left: -100px;
  cursor: pointer;
}

.detail-blog-content-post {
  display: flex;
  padding-right: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  margin-top: -56px;
}

.currently-trending-item {
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--Foundation-Blue-blue-50);
  background: var(--clr-white);
  box-shadow: none;
}

.detail-blog-content-post-title {
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-primary-bold);
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 36px;
  font-weight: unset;
}

.detail-blog-content-post-tag-time {
  display: flex;
  align-items: center;
  gap: 24px;
}

.detail-blog-content-post-tag {
  display: flex;
  height: 32px;
  padding: 24px 28px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 32px;
  background: #425563;
  color: var(--clr-white);
  font-family: var(--font-primary-regular);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
}

.detail-blog-content-post-subtitle {
  color: var(--gray-8);
  font-family: var(--font-primary-regular);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.currently-trending-list {
  position: sticky;
  top: 100px;
}

.banner-page.banner-page-blog {
  margin-top: 100px;
}

.page-our-story {
  background-color: var(--clr-white);
}

.our-story-box-1 {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.our-story-box-1-desc {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-regular);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  margin-bottom: 40px;
}

.our-story-box-1-img {
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
  cursor: pointer;
  position: relative;
}

.our-story-box-1-first .our-story-box-1-img>img:last-child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
}

.our-story-box-1-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.our-story-box-1-first {
  display: flex;
  flex-direction: column;
  gap: 42px;
  align-items: center;
}

.page-our-story .line {
  width: min(90%, 1320px);
  margin: 0 auto;
  height: 1px;
  background: #d8d8d8;
}

.our-story-box-2-item-content {
  display: flex;
  width: 632px;
  padding: 10px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 16px;
  background: var(--clr-white);
}

.our-story-box-2-item-content>div {
  display: flex;
  height: auto;
  padding: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  border-radius: 8px;
  border: 4px solid rgba(0, 89, 191, 0.1);
}

.our-story-box-2-item-content>div>.line {
  width: 100%;
  height: 1px;
  background: #d9d9d9;
}

.our-story-box-2-item-desc {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-regular);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.our-story-box-2-item-desc>strong {
  font-family: var(--font-primary-semiBold);
  font-weight: unset;
}

.our-story-box-2-item-img {
  border-radius: 16px;
  overflow: hidden;
}

.our-story-box-2-item-img img {
  height: 100%;
  object-fit: cover;
}

.our-story-box-2-inner {
  display: flex;
  flex-direction: column;
  gap: 112px;
}

.our-story-box-2-item {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.our-story-box-2-item:nth-child(even) {
  flex-direction: row-reverse;
}

.our-story-box-2-item:nth-child(odd) .our-story-box-2-item-content {
  margin-left: -90px;
  z-index: 10;
}

.our-story-box-2-item:nth-child(even) .our-story-box-2-item-content {
  margin-right: -90px;
  z-index: 10;
}

.our-story-box-3-inner {
  display: flex;
  flex-direction: column;
  gap: 112px;
}

.our-story-box-3-item {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.our-story-box-3-item:nth-child(even) {
  flex-direction: row-reverse;
}

.our-story-box-3-item:nth-child(odd) .our-story-box-3-item-content {
  padding-left: 132px;
}

.our-story-box-3-item:nth-child(even) .our-story-box-3-item-content {
  padding-right: 132px;
}

.our-story-box-3-item-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.our-story-box-3-item-content strong {
  font-family: var(--font-primary-semiBold);
  font-weight: unset;
}

.our-story-box-3-item-content>p {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-regular);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.our-story-box-4-inner {
  width: 100%;
  margin: 0 auto;
  display: flex;
  position: relative;
  margin-top: 40px;
}

.our-story-box-4-item>img {
  border-radius: 16px;
  overflow: hidden;
}

.our-story-box-4-item-desc {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  margin-bottom: 28px;
}

.our-story-box-4-inner-img {
  width: 100%;
}

.our-story-box-4-inner-items {
  width: min(98%, 456px);
  position: absolute;
  top: 64px;
  left: 64px;
  z-index: 10;
}

.our-story-box-4-img-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.our-story-box-4-inner-item {
  display: flex;
  width: 100%;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 8px;
  background: var(--clr-white);
}

.our-story-box-4-inner-item-img {
  border-radius: 4px;
  overflow: hidden;
}

.our-story-box-4-inner-item-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
}

.our-story-box-4-inner-item-content.time {
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.our-story-box-4-inner-item-title {
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-leostut);
  font-size: 32px;
  font-style: normal;
  line-height: 40px;
}

.timeline-container {
  width: min(95%, 1160px);
  margin: 0 auto;
  position: relative;
  z-index: 10;
  margin-bottom: 24px;
}

.timeline-container .timeline {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.timeline-container .timeline .timeline-item .timeline-year {
  color: rgba(255, 255, 255, 0.20);
  text-align: center;
  font-family: var(--font-primary-medium);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  height: 22px;
  transition: all 0.3s linear;
  margin-right: -12px;
  cursor: pointer;
}

.timeline-container .timeline .timeline-item.active .timeline-year {
  color: var(--clr-white);
}

.timeline-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  gap: 4px;
}

.timeline-item .timeline-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  display: block;
  background: #434D66;
  transition: all 0.3s linear;
  border-radius: 50%;
}

.timeline-item .timeline-dot::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 49%;
  width: 98%;
  height: 2px;
  background: #434D66;
  transition: all 0.3s linear;
  transform: translate(-50%, -50%);
}

.timeline-item.active .timeline-dot::before {
  background: var(--clr-white);
}

.timeline-item.active .timeline-dot::after {
  background: var(--clr-white);
}

.timeline-item:last-child .timeline-dot::before {
  opacity: 0;
}

.sustainability-box-1 {
  background-color: var(--clr-white);
}

.sustainability-box-1-item {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  flex-direction: row-reverse;
}

.sustainability-box-1-item:nth-child(even) {
  flex-direction: row;
}

.sustainability-box-1-item .our-story-box-3-item-content {
  padding-right: 132px;
}

.sustainability-box-1-item:nth-child(even) .our-story-box-3-item-content {
  padding-left: 132px;
  padding-right: 0;
}

.page-contact-us-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.page-contact-us-desc {
  margin-top: 8px;
  color: #000;
}

.menu-contact-us {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 16px
}

.menu-contact-us>a {
  display: flex;
  height: 48px;
  padding: 0 28px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: max-content;
  border-radius: 48px;
  background: var(--Foundation-Blue-blue-50);
  color: #425563;
  transition: all 0.3s linear;
}

.menu-contact-us>a:hover,
.menu-contact-us>a.active {
  background: var(--Foundation-Blue-blue-500);
  color: var(--clr-white);
}

.list-selection-type-homepage .list-selection-item .list-selection-item-right .offers-item-actions {
  display: block;
}

.page-contact-us-info {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.page-contact-us-subtitle {
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-leostut);
  font-size: 32px;
  font-style: normal;
  line-height: 40px;
}

.page-contact-us-address {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.page-contact-us-address-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--gray-4---stroke);
}

.itineraries-detail-1-item {
  width: 370px;
  height: 464px;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

.itineraries-detail-1-item>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.itineraries-detail-1-item .itineraries-detail-item-content {
  display: flex;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 83%;
  left: 0;
  padding: 20px 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
  background: rgba(30, 42, 58, 0.60);
  backdrop-filter: blur(1px);
  transition: all 0.5s ease;
  cursor: pointer;
}

.itineraries-detail-detail-1-slider .owl-item {
  opacity: 0;
}

.itineraries-detail-detail-1-slider .owl-item.active {
  opacity: 1;
}

.itineraries-detail-detail-1-slider .active.center .itineraries-detail-1-item {
  width: min(100%, 764px);
}

.itineraries-detail-1-item:hover .itineraries-detail-item-content {
  top: 0;
  justify-content: center;
}

.itineraries-detail-detail-1-slider .owl-stage-outer .owl-stage {
  height: 468px;
  padding: 2px 0;
  overflow-y: hidden;
}

.itineraries-detail-item-title {
  color: var(--clr-white);
  text-align: center;
  font-family: var(--font-leostut);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
  letter-spacing: 0.48px;
}

.itineraries-detail-item-text {
  color: var(--clr-white);
  text-align: center;
}

.itineraries-detail-detail-1-slider .owl-stage-outer {
  margin-left: -187px;
  position: relative;
}

.itineraries-detail-detail-1-slider .owl-stage-outer::after {
  content: "";
  width: 200px;
  height: 468px;
  background-color: var(--clr-white);
  display: block;
  position: absolute;
  top: 0;
}

/* .itineraries-detail-detail-1-slider{
  height: 464px;
} */

.custom-radio-group-2 {
  background-color: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 56px;
}

.custom-radio-group-2 .custom-radio-item {
  margin: 0;
}

.page-contact-us {
  background-color: var(--clr-white);
}

.select-country-code {
  display: flex;
  align-items: center;
  padding-right: 10px;
  border-right: 1px solid var(--gray-4---stroke);
}

.select-country-code-header {
  display: flex;
  align-items: end;
  gap: 10px;
  cursor: pointer;
}

.form-contact-us .form-group textarea.form-item {
  display: flex;
  padding: 24px 16px;
  border-radius: 8px;
  height: 170px;
  resize: none;
}

.last-form-group {
  margin-top: 16px;
}

.btn-submit-step-1,
.btn-submit-form {
  width: 268px;
}

.page-contact-us-form {
  padding-right: 32px;
}

.page-contact-us-form-header {
  margin-bottom: 40px;
}

.form-item-label-style-1 {
  font-family: var(--font-primary-regular) !important;
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  margin-bottom: 16px;
}

/* Custom ô checkbox */
.hidden-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.custom-checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #1D2433;
  font-family: var(--font-primary-regular);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  user-select: none;
  font-weight: 400;
}

.custom-checkbox-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  margin-right: 10px;
  background-color: #fff;
  position: relative;
  transition: all 0.2s ease;
}

.custom-checkbox-icon::after {
  content: '';
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: translate(-50%, -60%) rotate(45deg);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.hidden-checkbox:checked+.custom-checkbox-label .custom-checkbox-icon {
  background-color: var(--Primary);
  border-color: var(--Primary);
}

.hidden-checkbox:checked+.custom-checkbox-label .custom-checkbox-icon::after {
  display: block;
  opacity: 1;
}

.btn-back-form {
  width: 144px;
  float: left;
  margin-right: 16px;
}

/* Loại bỏ mũi tên ở input type="number" */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.box-booking-total-price {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px
}

.box-booking-total-price>p {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  text-transform: capitalize;
}

.modal {
  z-index: 999999;
}

.modal-story-home .modal-dialog {
  width: min(95%, 540px);
  border-radius: 16px;
  background-color: var(--clr-white);
}

.modal-story-home .modal-dialog .modal-header {
  display: flex;
  padding: 16px 24px;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-bottom: 1px solid var(--gray-4---stroke);
}

.modal-story-home .modal-dialog .modal-header::after {
  display: none;
}

.modal-story-home .modal-dialog .modal-header .close {
  opacity: 1;
  font-size: 32px;
  font-weight: 400;
}

.modal-story-home .modal-dialog .modal-body {
  padding: 0;
}

.modal-story-home .modal-dialog .modal-content {
  border-radius: 16px;
}

.modal-story-home-content-img {
  position: relative;
}

.modal-story-home-content-text {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 67.4%, rgba(0, 0, 0, 0.80) 100%);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 8px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modal-story-home-content-title {
  color: var(--clr-white);
  font-family: var(--font-primary-semiBold);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.modal-story-home-content-desc {
  color: var(--clr-white);
  font-family: var(--font-primary-regular);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
}

.modal-story-home-content-text>a {
  color: var(--clr-white) !important;
  font-family: var(--font-primary-medium);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  text-decoration-line: underline !important;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.share-story {
  display: flex;
  padding: 16px 24px;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-primary-medium);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
}

.why-choose-us-title {
  color: var(--clr-white);
  font-family: var(--font-primary-medium);
  font-size: 22px;
  font-style: normal;
  line-height: 30px;
  text-transform: uppercase;
}

.page-my-booking {
  background-color: var(--clr-white);
}

.page-my-booking-inner {
  width: min(95%, 1320px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.my-booking-header {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.form-check-booking {
  width: min(100%, 928px);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 auto;
}

.check-booking-form {
  width: 100%;
}

.form-check-booking .form-item {
  border: 1px solid var(--gray-4---stroke);
}

.my-booking-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}

.my-booking-content-title {
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-primary-bold);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
  text-transform: uppercase;
}

.table-check-booking-data {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: 1px solid #D8D8D8;
  border-top: 2px solid #00499D;
}

.table-check-booking-data thead tr th {
  padding: 8px 12px;
  color: #000;
  font-family: var(--font-primary-bold);
  font-size: 16px;
  font-style: normal;
  line-height: 26px;
  font-weight: unset;
}

.table>thead>tr>th,
.table>tbody>tr>td {
  border-right: 1px solid #D8D8D8;
  border-bottom: 1px solid #D8D8D8;
}

.table>tbody>tr>td {
  padding: 16px 12px;
}

.table>tbody>tr>td>p {
  color: #000;
  font-family: var(--font-primary-medium);
  font-size: 14px;
  font-style: normal;
  line-height: 24px;
}

.booking-code {
  color: #00499D !important;
}

.footer-copy-right {
  display: flex;
  width: 100%;
  padding: 12px 0px;
  justify-content: center;
  align-items: center;
  margin-top: 36px;
  background: rgba(0, 0, 0, 0.20);
}

.footer-copy-right>p {
  color: rgba(255, 255, 255, 0.80);
  text-align: center;
  font-family: var(--font-primary-regular);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
}

.total-price-box {
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  padding: 15px 0;
  background-color: var(--clr-white);
  justify-content: center;
  align-items: center;
  box-shadow: 0px -4px 10px 0px rgba(0, 94, 220, 0.15);
  z-index: 10;
}

.total-price-box-inner {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  align-items: center;
  gap: 64px;
}

.total-price-box-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 32px;
}

.total-price-box-title {
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.total-price-box-price {
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-primary-bold);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
}

.btn-continue-step-2 {
  width: 264px;
}

.list-selection-item .offers-item-title,
.booking-inner-right .offers-item-title {
  -webkit-line-clamp: 1;
  max-height: 64px;
  height: auto;
}

.list-checkbox-group {
  display: flex;
  padding: 20px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  background: #F7F8F9;
}

.list-checkbox-item {
  display: flex;
  padding: 4px 0px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

.list-checkbox-item .custom-checkbox-container {
  width: 232px;
}

.list-checkbox-item-price {
  display: flex;
  width: 200px;
  align-items: center;
  gap: 8px;
}

.list-checkbox-item-price>p:first-child {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.list-checkbox-item-price>p:last-child {
  color: var(--gray-6---subtle-text);
  font-family: var(--font-primary-regular);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
}

.count-seating-show {
  display: flex;
  height: 40px;
  align-items: center;
  gap: 16px;
  opacity: 0;
  visibility: hidden;
  width: 200px;
}

.count-seating-show>p {
  color: var(--gray-9---body-text);
}

.list-checkbox-item:has(.hidden-checkbox:checked) .count-seating-show {
  opacity: 1;
  visibility: visible;
}

.list-checkbox-item .custom-checkbox-container label {
  margin: 0;
}

.count-seating-show .list-service-cabin-item-actions-count .btn-actions {
  width: 36px;
  height: 36px;
}

.list-checkbox-group .line {
  width: 100%;
  height: 1px;
  background-color: var(--gray-4---stroke);
}

.login-page {
  background-image: url(../img/bg-login-page.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  position: relative;
}

.login-form {
  display: flex;
  width: min(95%, 600px);
  padding: 32px;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(56px);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.login-title {
  margin: 0;
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-leostut);
  font-size: 32px;
  font-style: normal;
  line-height: 40px;
}

.login-form>form {
  width: 100%;
}

.show-password {
  position: relative;
  cursor: pointer;
}

.show-password>i {
  transition: all 0.3s ease-in-out;
}

.show-password>i:last-child {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
}

.show-password.show i:last-child {
  opacity: 1;
}

.show-password.show i:first-child {
  opacity: 0;
}

.remember-forget {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.remember-forget>a {
  color: var(--yellow-500) !important;
}

.btn-login-form {
  width: 264px;
  margin: 24px auto;
}

.no-have-account>p {
  text-align: center;
}

.form-type-checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.remember-forget .custom-checkbox-container label {
  color: var(--gray-6---subtle-text);
  font-family: var(--font-primary-regular);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.login-form .row {
  margin: 0 -8px;
}

.login-form .row>div {
  padding: 0 8px;
}

.agree-all-statements label {
  color: var(--Color-Neutral-neutral-300);
  font-family: var(--font-primary-regular);
  font-size: 16px;
  font-style: normal;
  font-weight: unset;
  line-height: 24px;
}

.agree-all-statements label .link-terms {
  color: var(--Foundation-Blue-blue-500);
  font-family: var(--font-primary-regular);
  font-size: 16px;
  font-style: normal;
  font-weight: unset;
  line-height: 24px;
  text-decoration-line: underline !important;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.flatpickr-input {
  width: 100%;
}

.editor-content img {
  width: 100%;
}

.sub-menu-item:not(:last-child) {
  padding-right: 16px;
  border-right: 1px solid var(--gray-4---stroke);
}

.header-first-right-language {
  position: relative;
}

.header-language-popup {
  position: absolute;
  top: 40px;
  right: 0;
  width: 100px;
  background-color: #fff;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
}

.header-language-item-img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-language-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  background-color: transparent;
  transition: all 0.3s ease-in-out;
  border-radius: 8px;
}

.header-language-item:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.header-language-popup.active {
  opacity: 1;
  visibility: visible;
}

.banner-page-blog .banner-content {
  width: 100% !important;
}

@keyframes fillTimer {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

/* test-date-range */

.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.startRange {
  border-radius: 4px 0 0 4px;
}

.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange {
  border-radius: 0 4px 4px 0;
}

.form-date-range {
  position: relative;
}

.date-range-popup {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
}

.form-date-range {
  position: relative;
}

.date-range-popup {
  position: absolute;
  top: 80px;
  left: 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  border-radius: 8px;
  border: 1px solid var(--Foundation-Blue-blue-50);
  box-shadow: 0px 16px 19px 0px rgba(0, 0, 0, 0.20);
  background-color: var(--clr-white);
  width: 676px;
  overflow: hidden;
}

.date-range-popup.active {
  opacity: 1;
  visibility: visible;
}

.date-range-popup-footer {
  display: flex;
  padding: 16px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 16px;
  align-self: stretch;
  border-top: 0.5px solid var(--gray-4---stroke);
  background: #FFF;
}

.date-range-popup-close {
  cursor: pointer;
  color: var(--yellow-500);
  font-family: var(--font-primary-bold);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  text-transform: uppercase;
}

.date-range-popup-header {
  display: flex;
  align-items: flex-start;
}

.date-range-popup-first {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  border-right: 1px solid rgba(216, 216, 216, 0.50);
  min-width: 96px;
}

.date-range-popup-first-item {
  display: flex;
  width: 100%;
  padding: 20px 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border: none;
}

.date-range-popup-first-item:not(:last-child) {
  border-bottom: 1px solid rgba(216, 216, 216, 0.50);
}

.date-range-popup-first-item:not(:first-child) {
  color: var(--gray-6---subtle-text);
  font-family: var(--font-primary-bold);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  text-transform: uppercase;
  border-left: 2px solid;
  border-left-color: transparent;
  transition: all 0.3s ease;
}

.date-range-popup-first-item:not(:first-child):hover,
.date-range-popup-first-item:not(:first-child).active {
  border-left-color: var(--yellow-500);
}

.date-range-popup-second-value {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--gray-4---stroke);
}

.date-range-popup-second-layout .flatpickr-calendar.rangeMode {
  border: none;
  background: transparent;
  box-shadow: none;
}

.header-mobile,
.btn-header-menu,
.header-navigator-close,
.our-story-box-1-desc-mobile {
  display: none;
}

.form-item.btn-show-form {
  display: none !important;
}

.itineraries-what-included-second-title {
  width: min(100%, 370px);
}

.total-price-trip-mobile {
  display: none;
}

.list-service-cabin-item-actions-count .btn-actions>img {
  width: 100%;
  height: 100%;
}

.page-comming-soon {
  width: 100%;
  height: 100dvh;
  background-image: url('../img/img-coming-soon.png');
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}

.comming-soon-header {
  padding-top: 38px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.comming-soon-header-content {
  display: flex;
  align-items: center;
  gap: 24px;
}

.comming-soon-header-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}

.comming-soon-header-item>p {
  color: var(--clr-white);
}

.comming-soon-header-content .line {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.30);
}

.comming-soon-header-content .header-first-right-language {
  display: flex;
  height: 30px;
  padding: 4px;
  align-items: center;
  border-radius: 42px;
  background: var(--clr-white);
}

.comming-soon-header-content .header-first-right-language span,
.comming-soon-header-content .header-first-right-language i {
  color: #222 !important;
}

.comming-soon-content-inner {
  width: min(100%, 737px);
  display: flex;
  padding: 32px 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.comming-soon-content-inner>div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.coming-soon-title {
  color: var(--gray-1);
  font-family: var(--font-albulapro-thin);
  font-size: 24px;
  font-style: normal;
  font-weight: 200;
  line-height: 34px;
  letter-spacing: 0.64px;
}

.coming-soon-title span {
  color: var(--gray-1);
  font-family: var(--font-tp-le-major);
  font-size: 60px;
  font-style: normal;
  line-height: 72px;
  text-transform: capitalize;
  letter-spacing: 0px !important;
}

.coming-soon-subtitle-2 {
  color: var(--yelow-400);
  font-family: var(--font-primary-medium);
  font-size: 26px;
  font-style: normal;
  line-height: 36px;
  text-transform: uppercase;
}

.coming-soon-desc {
  color: #FFF;
  text-align: left;
  font-family: var(--font-primary-regular);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  width: 100%;
  margin-top: 6px;
}

.coming-soon-subtitle {
  color: var(--yelow-400);
  font-family: var(--font-primary-medium);
  font-size: 20px;
  font-style: normal;
  line-height: 36px;
}

.form-coming-soon {
  display: flex;
  padding: 8px;
  align-items: flex-start;
  gap: 6px;
  align-self: stretch;
  border-radius: 48px;
  background: rgba(255, 255, 255, 0.10);
}

/* .form-coming-soon .form-item {
  width: 202px;
} */

.btn-coming-soon {
  padding: 8px 16px;
}

.form-input {
  width: 100%;
}

.comming-soon-content {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 15%;
}

.coming-soon-language {
  display: flex;
  height: 30px;
  padding: 4px;
  align-items: center;
  border-radius: 42px;
  background: var(--clr-white);
  position: relative;
}

.coming-soon-language-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  position: absolute;
  top: 3px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.coming-soon-language.en .coming-soon-language-icon {
  left: 42px;
}

.coming-soon-language.vn .coming-soon-language-icon {
  left: 8px;
}

.coming-soon-language-icon>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

.coming-soon-language-icon>img:last-child {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.coming-soon-language.vn .coming-soon-language-icon>img:first-child {
  opacity: 0;
}

.coming-soon-language.vn .coming-soon-language-icon>img:last-child {
  opacity: 1;
}

.coming-soon-language>span {
  display: flex;
  width: 33px;
  padding: 0 6px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #222;
  font-family: var(--font-primary-medium);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
}

.comming-soon-tag {
  display: inline-flex;
  height: 160px;
  padding: 0 16px 16px 16px;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 0 0 24px 24px;
  background: rgba(0, 0, 0, 0.20);
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  z-index: 10;
  color: var(--yelow-400);
  font-family: var(--font-leostut);
  font-size: 40px;
  line-height: 48px;
  font-style: normal;
  text-transform: uppercase;
}

@media (min-width:1200px) {
  .container {
    width: min(95%, 1590px);
    max-width: unset;
  }
}

@media (min-width: 1440px) {
  /* .container {
    width: 85%;
    max-width: 85%;
  } */

  .banner-page-news .container {
    width: 100%;
    max-width: 100%;
  }

  .box-1-home-slider .owl-nav .owl-prev,
  .box-1-home-slider .owl-nav .owl-next,
  .box-3-third-slider .owl-nav .owl-prev,
  .box-3-third-slider .owl-nav .owl-next,
  .other-blogs-slider .owl-nav .owl-prev,
  .other-blogs-slider .owl-nav .owl-next,
  .itineraries-detail-detail-1-slider .owl-nav .owl-prev,
  .itineraries-detail-detail-1-slider .owl-nav .owl-next,
  .our-story-box-4-slider .owl-nav .owl-prev,
  .our-story-box-4-slider .owl-nav .owl-next,
  .overview-restaurants-slider .owl-nav .owl-prev,
  .overview-restaurants-slider .owl-nav .owl-next {
    left: -42px;
  }

  .box-1-home-slider .owl-nav .owl-next,
  .box-3-third-slider .owl-nav .owl-next,
  .other-blogs-slider .owl-nav .owl-next,
  .itineraries-detail-detail-1-slider .owl-nav .owl-next,
  .our-story-box-4-slider .owl-nav .owl-next,
  .overview-restaurants-slider .owl-nav .owl-next {
    right: -42px;
    left: auto;
  }

  .banner-page-itineraries-detail {
    left: 11%;
  }
}

@media (min-width: 1800px) {
  .container {
    width: 1590px;
    max-width: 1590px;
  }

  .footer .container {
    width: min(100%, 1170px);
  }
}

@media (max-width: 1450px) {
  .main {
    overflow: hidden;
  }

  .container {
    width: min(95%, 1320px);
    max-width: unset !important;
  }

  .box-5-home-left {
    padding: 40px;
  }

  .itineraries-what-included-second {
    flex: unset;
  }

  .header-fixed .navigator-menu {
    gap: 24px;
    padding-left: 80px;
  }

  .header-fixed .header-second .header-first-right {
    gap: 16px;
  }

  .booking-inner-right {
    width: 332px;
  }

  .booking-inner-left {
    flex: 1;
  }

  .booking-menu {
    gap: 12px;
  }

  .itineraries-detail-detail-1-slider .active.center .itineraries-detail-1-item {
    width: 660px;
  }

  .itineraries-detail-1-item {
    width: 295px;
  }

  .itineraries-detail-detail-1-slider .owl-stage-outer::after {
    left: 16px;
    opacity: 0;
  }

  /* .itineraries-detail-detail-1-slider .owl-stage-outer {
    padding-left: 76px;
    margin: 0;
  } */

  .itineraries-detail-1-item .itineraries-detail-item-content {
    padding: 12px;
  }

  .itineraries-detail-item-title {
    font-size: 22px;
  }

  .box-3-second-item>div {
    -webkit-transform: translateY(78%);
    transform: translateY(78%);
  }

  .box-3-third-item-title {
    font-size: 26px;
  }

  .text-content {
    padding-right: 0;
  }

  .text-content h1 {
    font-size: 38px;
  }

  .our-story-box-3-item:nth-child(odd) .our-story-box-3-item-content {
    padding-left: 100px;
  }

  .our-story-box-3-item:nth-child(even) .our-story-box-3-item-content {
    padding-right: 100px;
  }

  .page-contact-us-form {
    padding: 0;
  }

  .row {
    margin: 0 -8px;
  }

  .row>div {
    padding: 0 8px;
  }

  .offers-item-price-value {
    font-size: 16px;
  }

  .header-blog .header-inner .navigator-menu,
  .header-blog .header-inner {
    gap: 20px;
  }

  .banner-content .container {
    width: 100%;
  }

  .banner-page-news {
    left: 53%;
  }

  .slider-content {
    flex-basis: 56%;
  }

  .banner-home-content.banner-page-content {
    gap: 100px;
  }

  /* .itineraries-detail-detail-1-slider .owl-stage-outer{
    margin-left: 0;
  } */

  /* .itineraries-detail-detail-1-slider .owl-stage-outer::after{
    background-color: transparent;
  } */

  .box-3-second-item-title {
    font-size: 24px;
  }

  .main-itineraries {
    overflow-x: hidden;
  }

  .comming-soon-content-inner {
    padding: 0 0 80px 0;
    width: min(95%, 650px);
  }

  .comming-soon-content {
    bottom: 0;
  }
}

@media (max-width: 1024px) {
  .main {
    overflow-x: hidden;
  }

  .container {
    width: min(95%, 1170px);
    max-width: unset !important;
  }

  .box-inner {
    padding: 48px 0
  }

  /* .page-content {
    display: none;
  } */

  .header-second .navigator-menu .logo a img {
    width: 56px;
  }

  .header-fixed .navigator-menu {
    padding-left: 72px;
    gap: 12px;
  }

  .header-fixed .header-second .header-first-right {
    gap: 12px;
  }

  .navigator-menu>li>a,
  .navigator-menu>li>span,
  .custom-select-header,
  .header-blog .header-inner .navigator-menu,
  .header-blog .header-inner,
  .form-item>input {
    font-size: 14px;
    line-height: 20px;
  }

  .header-blog .header-inner .navigator-menu,
  .header-blog .header-inner {
    gap: 12px;
  }

  .our-story-box-1 {
    gap: 32px;
  }

  .our-story-box-2-item:nth-child(odd) .our-story-box-2-item-content {
    margin-left: -140px;
  }

  .our-story-box-2-item:nth-child(even) .our-story-box-2-item-content {
    margin-right: -140px;
  }

  .our-story-box-2-inner,
  .our-story-box-3-inner {
    gap: 80px;
  }

  .our-story-box-2-item-content>div {
    padding: 16px;
  }

  .our-story-box-3-item-content,
  .our-story-box-3-item-img {
    padding: 0 !important;
    width: calc(50% - 15px);
  }

  .our-story-box-3-item-img>img {
    width: 100%;
    height: auto;
  }

  .box-1-home-slider .owl-nav .owl-prev,
  .box-1-home-slider .owl-nav .owl-next,
  .box-3-third-slider .owl-nav .owl-prev,
  .box-3-third-slider .owl-nav .owl-next,
  .other-blogs-slider .owl-nav .owl-prev,
  .other-blogs-slider .owl-nav .owl-next,
  .itineraries-detail-detail-1-slider .owl-nav .owl-prev,
  .itineraries-detail-detail-1-slider .owl-nav .owl-next,
  .our-story-box-4-slider .owl-nav .owl-prev,
  .our-story-box-4-slider .owl-nav .owl-next,
  .overview-restaurants-slider .owl-nav .owl-prev,
  .overview-restaurants-slider .owl-nav .owl-next {
    left: -35px;
  }

  .box-1-home-slider .owl-nav .owl-next,
  .box-3-third-slider .owl-nav .owl-next,
  .other-blogs-slider .owl-nav .owl-next,
  .itineraries-detail-detail-1-slider .owl-nav .owl-next,
  .our-story-box-4-slider .owl-nav .owl-next,
  .overview-restaurants-slider .owl-nav .owl-next {
    left: auto;
    right: -35px;
  }

  .btn-color-black,
  .btn-border-black {
    height: 40px;
  }

  .offers-item-img {
    height: 280px;
  }

  .offers-item-price {
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
  }

  .offers-item-price>div:not(:last-child) {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .pagination-container {
    margin: 0;
  }

  .currently-trending {
    gap: 16px;
  }

  .currently-trending .currently-trending-item .overview-box-4-item-img {
    height: 150px;
  }

  .page-list-menu {
    width: 100%;
    overflow-x: scroll;
    justify-content: flex-start;
  }

  .page-list-menu-item {
    white-space: nowrap;
    padding: 16px;
  }

  .itineraries-detail-detail-1-slider .owl-stage-outer::after {
    opacity: 1;
    left: 16px;
    width: 151px;
  }

  .itineraries-detail-detail-1-slider .owl-stage-outer {
    margin-left: -169px;
  }

  .itineraries-detail-left {
    flex: 1;
    width: unset;
  }

  .itineraries-detail-right {
    width: 42%;
  }

  .roadmap-content {
    width: 100%;
  }

  .itineraries-detail-right-slider .owl-nav {
    top: -8px;
    right: -16px;
    gap: 0;
  }

  .itineraries-detail-right-slider .owl-nav>div {
    width: 32px;
    height: 32px;
  }

  .itineraries-detail-right-slider .owl-nav>div>svg {
    width: 100%;
    height: 100%;
  }

  .itineraries-what-included-second {
    padding: 0;
    gap: 16px;
  }

  .itineraries-what-included-item {
    padding: 12px 16px;
  }

  .itineraries-detail-review {
    padding-left: 36px;
  }

  .itineraries-what-included-content {
    padding-bottom: 48px;
  }

  .itineraries-detail-5-table {
    padding: 16px 24px
  }

  .overview-itinerary-item-second {
    padding: 16px
  }

  .booking-inner-time {
    flex-wrap: wrap;
  }

  .booking-inner-time-note {
    width: 100%;
  }

  .booking-deck-item {
    width: 100%;
  }

  .list-checkbox-item-price {
    width: 36%;
  }

  .list-checkbox-item .custom-checkbox-container {
    flex: 1;
    width: auto;
  }

  .list-checkbox-item {
    gap: 8px;
  }

  .list-checkbox-item .count-seating-show {
    width: 150px;
  }

  .list-checkbox-item .count-seating-show {
    gap: 8px;
  }

  .list-service-cabin-item-actions-count {
    width: 100px;
  }

  .list-service-cabin-item-actions-count .btn-actions {
    width: 32px;
    height: 32px;
  }

  .list-service-cabin-item-actions-count .service-cabin-item-count {
    font-size: 16px;
  }

  .list-checkbox-group {
    padding: 16px 12px;
  }

  .list-checkbox-item-price>p {
    white-space: nowrap;
  }

  .service-cabin-item-left {
    width: auto;
  }

  .service-cabin-item-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .service-spa-item-form {
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .service-spa-item-form>div:first-child {
    width: 40%;
    flex: unset
  }

  .list-service-spa {
    padding: 12px;
  }

  .booking-inner-bill-right,
  .booking-bill-select-payment>div,
  .booking-inner-confirm {
    padding: 24px 40px;
  }

  .booking-inner-confirm,
  .booking-confirm-inner {
    gap: 24px;
  }

  .booking-bill-select-payment>div {
    width: 54%;
  }

  .banner-page-itineraries-detail {
    left: 0;
    transform: translate(25%, -50%);
  }

  .overview-img-item {
    height: 600px;
  }

  .overview-box-1-actions {
    padding-right: 68px;
  }

  .overview-content-item {
    padding: 24px 68px;
  }

  .banner-home-content.banner-page-content {
    left: 45%;
  }

  .banner-home-content-first>h1 {
    font-size: 64px;
  }

  .box-1-home-item-content>div>p {
    line-height: 26px;
  }

  .banner-home {
    height: 800px !important;
  }

  .btn-play-video {
    width: 80px;
    height: 80px;
  }

  .btn-play-video>img {
    width: 100%;
    height: 100%;
  }

  .box-4-home-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .box-3-home.box-inner {
    padding-top: 0;
  }

  .box-2-home {
    height: 670px;
  }

  .box-2-home-header {
    width: 95%;
  }

  .comming-soon-header {
    padding-top: 24px;
  }

  .comming-soon-content-inner {
    gap: 16px;
  }

  .coming-soon-title {
    font-size: 28px;
    line-height: 40px;
  }

  .coming-soon-title>span {
    font-size: 40px;
    line-height: 48px;
  }

  /* .form-coming-soon{
    flex-direction: column;
    align-items: center;
    border-radius: 16px;
  } */

  .coming-soon-title>div {
    width: 100%;
  }

  .coming-soon-title>.form-button>button {
    width: 100%;
  }

  .comming-soon-content-inner {
    padding-bottom: 80px;
    width: min(100%, 550px);
    padding-bottom: 100px;
  }

  .editor-content img {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 992px) {
  body::before {
    background: linear-gradient(to bottom,
        white 0%,
        white 30%,
        rgba(255, 255, 255, 0) 60%);
  }

  .main-container {
    flex-direction: column;
    text-align: center;
    gap: 50px;
  }

  .text-content {
    padding-right: 0;
    order: 1;
  }

  .slider-content {
    padding-right: 0;
    order: 2;
    width: 100%;
    max-width: 480px;
    flex-basis: 56%;
  }

  .swiper-pagination {
    display: none;
  }
}

@media (max-width: 768px) {
  .header {
    z-index: 99999;
  }

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

  .header-inner {
    display: none;
  }

  .btn-header-menu,
  .header-navigator-close {
    display: block;
  }

  .btn-header-menu i {
    color: var(--clr-white);
    font-size: 28px;
  }

  .header-navigator-close i {
    font-size: 24px;
  }

  .header-mobile-right {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  .header-navigator {
    position: fixed;
    top: 0;
    left: 0;
    width: min(80%, 400px);
    height: 100vh;
    background-color: var(--clr-white);
    z-index: 10001;
    padding: 40px 20px;
    transform: translateX(-100%);
    transition: all 0.5s ease;
  }

  .header-navigator.active {
    transform: translateX(0);
  }

  .overlay-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease
  }

  .overlay-header.active {
    opacity: 1;
    visibility: visible;
  }

  .header-navigator>ul {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 0 !important;
    gap: 24px !important;
  }

  .header-navigator>.navigator-menu>li {
    width: 100%;
  }

  .header-navigator>.navigator-menu>li>a,
  .header-navigator>.navigator-menu>li>span {
    color: #000 !important;
    font-family: var(--font-primary-medium);
    font-size: 16px;
    width: 100%;
    display: flex;
  }

  .navigator-menu>li {
    padding: 0;
  }

  .header-navigator-close {
    position: absolute;
    top: 16px;
    right: 16px;
  }

  .header-navigator>.navigator-menu i {
    color: #000 !important;
  }

  .navigator-menu>li:hover>.sub-menu {
    z-index: 10;
  }

  .list-contact-media,
  .contact-media-chat {
    width: 48px;
  }

  .contact-media-item,
  .contact-media-chat {
    height: 48px;
  }

  .contact-media-item>img,
  .contact-media-chat>img {
    width: 28px;
    height: 28px;
  }

  .contact-media-chat {
    margin-top: 48px;
  }

  .footer>.container>.line {
    margin: 20px 0;
  }

  .social-media {
    padding-left: 32px;
  }

  .footer-second {
    flex-wrap: wrap;
  }

  .container {
    padding: 0;
  }

  .footer-second>.line {
    display: none;
  }

  .footer-second-item {
    width: calc(50% - 20px);
  }

  .footer-second-item.social-media {
    width: 100%;
    padding: 0;
  }

  .form-check-available.form-fixed {
    top: 46px;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 9800 !important;
  }

  .form-item {
    height: 40px;
  }

  .form-check-available:not(.form-fixed) {
    display: none;
  }

  .form-check-available.form-fixed .container {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    padding: 12px;
    width: min(95%, 400px);
    background-color: var(--clr-white);
    flex-direction: column;
    gap: 12px;
    border-radius: 8px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    z-index: 100;
    transition: all 0.3s ease;
  }

  .form-check-available.form-fixed .container.active {
    opacity: 1;
    visibility: visible;
  }

  .header-blog .header-inner {
    justify-content: space-between;
  }

  .custom-select-popup {
    padding: 12px;
    width: 250px;
  }

  .custom-select-item {
    padding: 8px;
  }

  .header-mobile>a>img {
    width: 60px;
  }

  .btn-color-yellow {
    height: 40px;
  }

  .flatpickr-calendar.open {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .flatpickr-day {
    font-size: 14px;
    line-height: 20px;
  }

  .flatpickr-day>span {
    font-size: 12px;
    line-height: 16px;
  }

  .flatpickr-calendar {
    width: min(95%, 572px);
    padding: 12px;
  }

  .flatpickr-day {
    width: 40px;
    height: 50px;
    padding: 4px;
  }

  .flatpickr-months {
    margin-bottom: 8px;
  }

  .flatpickr-current-month span.cur-month,
  .flatpickr-current-month input.cur-year {
    font-size: 16px;
    line-height: 24px;
  }

  .form-item.btn-show-form {
    display: flex !important;
  }

  .our-story-box-1-first>img {
    display: none;
  }

  .our-story-box-1-desc {
    margin: 24px 0;
  }

  .our-story-box-1 {
    gap: 28px;
  }

  .box-inner {
    padding: 36px 0
  }

  .our-story-box-2-item {
    flex-direction: column !important;
    gap: 12px;
  }

  .our-story-box-2-item-img {
    width: 100%;
  }

  .our-story-box-2-item-content {
    margin: 0 !important;
    width: 100%;
  }

  .our-story-box-2-item-content>div {
    width: 100%;
  }

  .our-story-box-2-inner,
  .our-story-box-3-inner {
    gap: 40px;
  }

  .our-story-box-3-item {
    flex-direction: column !important;
    gap: 12px;
  }

  .our-story-box-3-item-content,
  .our-story-box-3-item-img {
    width: 100%;
  }

  .our-story-box-3-item-content {
    gap: 20px;
  }

  .box-1-home-slider .owl-nav .owl-prev,
  .box-1-home-slider .owl-nav .owl-next,
  .box-3-third-slider .owl-nav .owl-prev,
  .box-3-third-slider .owl-nav .owl-next,
  .other-blogs-slider .owl-nav .owl-prev,
  .other-blogs-slider .owl-nav .owl-next,
  .itineraries-detail-detail-1-slider .owl-nav .owl-prev,
  .itineraries-detail-detail-1-slider .owl-nav .owl-next,
  .our-story-box-4-slider .owl-nav .owl-prev,
  .our-story-box-4-slider .owl-nav .owl-next,
  .overview-restaurants-slider .owl-nav .owl-prev,
  .overview-restaurants-slider .owl-nav .owl-next {
    left: 0;
  }

  .box-1-home-slider .owl-nav .owl-next,
  .box-3-third-slider .owl-nav .owl-next,
  .other-blogs-slider .owl-nav .owl-next,
  .itineraries-detail-detail-1-slider .owl-nav .owl-next,
  .our-story-box-4-slider .owl-nav .owl-next,
  .overview-restaurants-slider .owl-nav .owl-next {
    left: auto;
    right: 0
  }

  iframe {
    height: 400px;
  }

  .offers-list,
  .marketing-materials-list {
    margin-top: 32px;
  }

  .marketing-materials-item-content {
    height: auto;
    padding: 20px;
  }

  .btn-watch-now {
    height: 40px;
  }

  .offers-list>div>div,
  .marketing-materials-list>div>div {
    margin-bottom: 32px;
  }

  .table-check-booking-data thead tr th {
    font-size: 14px;
    line-height: 20px;
  }

  .page-my-booking-inner,
  .my-booking-content {
    gap: 24px;
  }

  .banner-page {
    height: 400px;
  }

  .table-container {
    width: 100%;
    overflow-x: scroll;
  }

  .table-container>table {
    min-width: 700px;
  }

  .form-container {
    gap: 12px 8px;
    flex-wrap: wrap;
  }

  .form-container.form-register .form-group {
    flex: unset;
    width: calc(50% - 4px);
  }

  .overview-box-3-content {
    gap: 32px;
  }

  .banner-page-news {
    display: none;
  }

  .banner-page-blog {
    height: 500px;
  }

  .banner-content-title {
    font-size: 32px;
    line-height: 40px;
  }

  .banner-page-blog .banner-content-inner {
    width: 95%;
    margin: 0 auto;
    gap: 16px;
  }

  .banner-page-blog .banner-content {
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .currently-trending {
    display: none;
  }

  .detail-blog-content-post {
    padding: 0;
  }

  .detail-blog-content-post {
    gap: 16px;
  }

  .detail-blog-content-post-tag {
    padding: 0 28px;
  }

  .itineraries-detail-detail-1-slider .owl-stage-outer::after {
    opacity: 0;
    width: 0px;
  }

  .itineraries-detail-detail-1-slider .owl-stage-outer {
    margin: 0;
  }

  .itineraries-detail-1-item {
    width: 100% !important;
  }

  .itineraries-detail-detail-1-slider,
  .overview-box-5-content {
    margin-top: 32px;
  }

  .page-list-menu {
    top: 46px;
  }

  .itineraries-what-included-content {
    flex-direction: column;
  }

  .itineraries-what-included-second,
  .itineraries-what-included-second-title {
    width: 100%;
  }

  .itineraries-detail-review {
    padding: 0;
    margin-top: 24px;
    gap: 20px;
  }

  .itineraries-detail-2-inner {
    flex-direction: column;
  }

  .itineraries-detail-left,
  .itineraries-detail-right {
    width: 100%;
  }

  .roadmap-content {
    width: max-content;
  }

  .page-list-menu.fixed {
    z-index: 10000;
  }

  .overview-box-5-item .overview-box-5-item-content {
    transform: translateY(0);
    justify-content: center;
    max-height: 1000px;
    border-radius: 8px;
  }

  .overview-box-5-item .overview-box-5-item-content>img {
    opacity: 1;
  }

  .list-layout-dinning {
    margin-top: 32px;
    gap: 32px;
  }

  .layout-dinning-item-content {
    padding: 24px;
  }

  .experience-menu-list {
    overflow-x: scroll;
    justify-content: flex-start;
  }

  .experience-menu-list-item {
    padding: 8px 0;
    gap: 4px;
  }

  .experience-menu-list-item>p {
    white-space: nowrap;
    width: 200px;
  }

  .booking-inner {
    flex-direction: column;
    gap: 16px;
  }

  .booking-inner-left {
    width: 100%;
    gap: 24px;
  }

  .booking-inner-right {
    display: none;
  }

  .total-price-trip-mobile {
    display: flex;
    padding: 8px 16px;
    border-radius: 8px;
    background-color: var(--clr-white);
    box-shadow: 0px 2px 4px 0px rgba(6, 21, 86, 0.15);
  }

  .booking-inner-bill {
    flex-direction: column;
    overflow: hidden;
  }

  .booking-inner-bill-left,
  .booking-inner-bill-right,
  .booking-bill-select-payment>div {
    width: 100%;
  }

  .booking-inner-bill-right,
  .booking-bill-select-payment>div {
    padding: 24px 32px;
  }

  .booking-inner-bill-left .offers-item-title {
    height: auto;
  }

  .itineraries-detail-detail-1-slider .owl-item {
    opacity: 1 !important;
  }

  .modal-review .modal-body {
    padding: 16px;
  }

  .form-rate-star-header-item.first,
  .form-rate-star-item-title {
    width: 180px;
    margin-right: 40px;
  }

  .overview-itinerary-item {
    height: auto;
    flex-direction: column;
    width: 99%;
  }

  .overview-itinerary-slider .owl-nav {
    display: none;
  }

  .overview-itinerary-item .offers-item-title {
    margin: 0;
    border: none;
  }

  .overview-itinerary-item-second {
    width: 100%;
    gap: 8px;
  }

  .banner-page-itineraries-detail {
    gap: 4px;
    top: 52%;
    transform: translate(10%, -50%);
  }

  .overview-box-1 {
    margin-top: 36px;
  }

  .overview-img-item {
    height: 400px;
  }

  .overview-box-1-actions {
    display: none;
  }

  .overview-content-slider {
    width: 100%;
  }

  .overview-box-1-content {
    background-color: transparent;
  }

  .page-content-header-inner>p {
    flex: unset;
    width: 65%;
  }

  .box-3-second-content>.container {
    width: 100% !important;
  }

  .box-3-second-item>div {
    transform: translateY(-100%);
  }

  .box-3-second-item {
    background: rgba(255, 255, 255, 0.85);
  }

  .box-3-second-item p {
    color: var(--clr-black);
  }

  .main-content {
    gap: 30px;
  }

  .box-1-home-item {
    height: 400px;
  }

  .box-1-home-item>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .box-1-home-item-content {
    padding: 24px;
    gap: 30px;
  }

  .box-3-second-items {
    width: 100%;
    overflow-x: scroll;
  }

  .box-3-second-item {
    min-width: 250px;
    flex: unset;
  }

  .box-3-second-img>img {
    width: 1000px;
    height: 100%;
    object-fit: cover;
  }

  .comming-soon-header {
    padding-top: 16px;
  }

  .comming-soon-header-content {
    gap: 16px;
  }

  .page-comming-soon {
    background-position: top right 48%;
  }
}

@media (max-width: 568px) {

  .banner-page {
    height: 320px;
  }

  .itineraries-detail-4-left-title {
    font-size: 56px;
  }

  .banner-home-content-first>h1 {
    font-size: 48px;
    line-height: 56px;
  }

  .home-title,
  .banner-content-title,
  .experience-content-item>h3,
  .booking-inner-confirm-title,
  .name-tour-title {
    font-size: 32px;
    line-height: 40px;
  }

  .itineraries-what-included-second-title,
  .box-home-6-slider .slide-overlay-text {
    font-size: 28px;
    line-height: 36px;
  }

  .marketing-materials-item-content>p,
  .modal-video .modal-footer>p:first-child,
  .detail-blog-content-post-title,
  .modal-roadmap .modal-roadmap-title,
  .layout-dinning-item-content-title,
  .modal-img .modal-header .modal-title,
  .overview-content-item-title,
  .box-3-home-header>h2,
  .coming-soon-title>span {
    font-size: 24px;
    line-height: 32px;
  }

  .my-booking-content-title,
  .service-cabin-item-title,
  .box-booking-title,
  .booking-bill-select-payment-title,
  .itineraries-detail-detail-1-slider .itineraries-detail-item-title,
  .coming-soon-title,
  .box-3-third-item-title,
  .coming-soon-subtitle-2 {
    font-size: 20px;
    line-height: 28px;
  }

  .offers-item-title,
  .service-cabin-item-count,
  .modal-price-detail-total>p:last-child,
  .cruise-price>p,
  .box-4-home-item-tag,
  .coming-soon-subtitle {
    font-size: 18px;
    line-height: 26px;
  }

  .marketing-materials-item-play-video,
  .offers-item-sub-title,
  .btn-color-black,
  .btn-color-yellow,
  .overview-box-4-item-title,
  .news-detail-content-menu-title,
  .timeline-itineraries-item-content>p:first-child,
  .timeline-itineraries-item-time,
  .itineraries-detail-overall-title,
  .banner-page-itineraries-detail .btn-book-now,
  .box-4-home-item-first>a,
  .box-4-home-item-title {
    font-size: 16px;
    line-height: 24px;
  }

  body,
  .custom-select-item,
  .btn-color-yellow,
  .form-item>input,
  .our-story-box-2-item-desc,
  .our-story-box-4-item-desc,
  .our-story-box-1-desc,
  .our-story-box-3-item-content>p,
  .form-style-3 .form-group>.form-item,
  .form-style-3 .form-group>label,
  .remember-forget .custom-checkbox-container label,
  .custom-checkbox-label,
  .agree-all-statements label .link-terms,
  .modal-video .modal-footer>p:last-child,
  .overview-box-3-content>p,
  .banner-content-desc,
  .detail-blog-content-post-subtitle,
  .news-detail-content-menu-item-header>p,
  .btn-color-black,
  .btn-border-black,
  .booking-menu-item>p,
  .timeline-itineraries-item-content>p:last-child,
  .list-inclusions-exclusions-item>ul>li>p,
  .box-booking-subtitle,
  .form-style-3 .form-group>label .label-note,
  .box-info-guest-header-form-item,
  .form-review .form-group label,
  .itineraries-detail-overall-item>p,
  .itineraries-detail-list-item>p:first-child,
  .itineraries-detail-list-item-point,
  .cruise-price-discount>p,
  .name-cruise-title,
  .coming-soon-desc {
    font-size: 14px;
    line-height: 20px;
  }

  .btn-watch-now {
    font-size: 12px;
    line-height: 16px;
  }

  .offers-item-title {
    height: 52px;
  }

  .social-media {
    gap: 12px;
  }

  .ul.footer-second-item {
    gap: 12px;
  }

  .footer-second-item.social-media>div>a>img {
    width: 36px;
    height: 36px;
  }

  .footer-copy-right {
    margin-top: 20px;
  }

  .box-inner {
    padding: 24px 0;
  }

  .our-story-box-1,
  .overview-box-3-content {
    gap: 24px;
  }

  .our-story-box-1-img {
    display: none;
  }

  .our-story-box-2-inner,
  .our-story-box-3-inner {
    gap: 32px;
  }

  .our-story-box-2-item-content {
    padding: 0;
  }

  .our-story-box-2-item-content>div {
    gap: 16px;
  }

  .our-story-box-4-inner {
    margin-top: 24px;
  }

  .our-story-box-2-item-img,
  .our-story-box-3-item-img {
    height: 300px;
  }

  .our-story-box-3-item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .our-story-box-4-slider .owl-nav,
  .other-blogs-slider .owl-nav {
    display: none;
  }

  .login-form {
    padding: 16px;
    gap: 12px;
  }

  .btn-login-form {
    margin: 12px auto;
  }

  .form-style-3 .form-group>.form-item {
    height: 42px;
    padding: 8 12px;
  }

  .login-form>a>img {
    width: 120px;
  }

  .custom-checkbox-label {
    display: block;
  }

  .marketing-materials-item-content {
    padding: 8px;
    gap: 12px;
  }

  .offers-list>div>div,
  .marketing-materials-list>div>div {
    gap: 20px;
  }

  .marketing-materials-item-play-video {
    top: 8px;
    left: 8px;
  }

  .offers-list,
  .marketing-materials-list {
    margin-top: 24px;
  }

  .modal-video .modal-footer {
    padding: 8px;
    gap: 4px;
  }

  .privacy-policy-items {
    gap: 16px;
  }

  .offers-list:not(.blog-list)>.row>div {
    width: 100%;
  }

  .offers-item-content {
    padding: 8px;
  }

  .offers-item-content {
    gap: 8px;
  }

  .offers-item-services>ul {
    gap: 4px;
  }

  .offers-item-services {
    padding: 16px 8px 8px 8px;
  }

  .offers-box-1-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .form-register>.form-group>.custom-select>.custom-select-popup {
    right: 0;
    left: unset
  }

  .overview-box-4-item {
    padding: 8px;
  }

  .banner-page-blog .offers-list>.row>div {
    width: 50%;
  }

  .overview-box-4-item-img {
    height: auto;
  }

  .overview-box-4-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .overview-box-4-item-content {
    padding: 4px 4px 8px 4px;
    gap: 8px;
  }

  .overview-box-4-item-title {
    height: 48px;
  }

  .overview-box-4-item-tag {
    margin: 0 !important;
  }

  .overview-box-4-item-link {
    height: 32px;
    font-size: 14px;
  }

  .box-3-third-item-tag {
    padding: 4px 12px;
  }

  .offers-list>div>div,
  .marketing-materials-list>div>div {
    margin-bottom: 24px;
  }

  .banner-page-blog {
    height: 450px;
  }

  .banner-page-blog .banner-content-inner {
    gap: 8px;
  }

  .other-blogs-slider {
    margin-top: 24px;
  }

  .overview-itinerary-item {
    flex-direction: column;
    height: auto;
  }

  .offers-item-actions {
    margin-top: 12px;
  }

  .overview-itinerary-item-first {
    height: 250px;
    flex: unset;
  }

  .modal-roadmap .modal-dialog .modal-header,
  .modal-roadmap-title,
  .overview-itinerary-item-second,
  .modal-img .modal-header,
  .modal-img-content-share {
    padding: 12px !important;
  }

  .overview-itinerary-item-second .offers-item-title {
    margin-bottom: 12px;
    padding-bottom: 12px;
  }

  .itineraries-box-1-content {
    margin-top: 24px;
    gap: 24px;
  }

  .itineraries-detail-detail-1-slider,
  .overview-box-5-content {
    margin-top: 24px;
  }

  .deck-menu-list {
    width: 100%;
    overflow-x: scroll;
    justify-content: flex-start;
  }

  .deck-menu-list-item {
    white-space: nowrap;
  }

  .layout-dinning-item {
    flex-direction: column;
    height: auto;
  }

  .layout-dinning-item-content {
    padding: 12px;
    gap: 12px;
  }

  .layout-dinning-item-img,
  .overview-restaurants-item {
    height: 250px;
    width: 100%;
  }

  .overview-restaurants-item>img {
    height: 100%;
  }

  .layout-dinning-item-content-title {
    margin-bottom: 12px;
    padding-bottom: 12px;
  }

  .experience-menu-list-item>p {
    white-space: nowrap;
    width: 150px;
  }

  .experience-box-1-content {
    height: 400px;
  }

  .experience-content-item {
    gap: 24px;
  }

  .list-selection-item {
    flex-direction: column;
  }

  .list-selection-item>div {
    width: 100%;
  }

  .booking-menu {
    width: 93vw;
    overflow-x: scroll;
    padding-bottom: 12px;
  }

  .booking-menu-item>p {
    white-space: nowrap;
  }

  .custom-select-guest-popup {
    padding: 8px 16px
  }

  .list-service-cabin-item-actions-count .btn-actions,
  .count-seating-show .list-service-cabin-item-actions-count .btn-actions {
    width: 28px;
    height: 28px;
  }

  .list-service-cabin-item-actions-count .btn-actions>img {
    width: 100%;
    height: 100%;
  }

  .list-service-cabin-item-actions-count {
    width: 100px;
  }

  .modal-detail .modal-dialog .modal-content .modal-header {
    padding: 12px 16px;
  }

  .modal-detail .modal-dialog .modal-content .modal-body,
  .modal-detail .modal-dialog .modal-content .modal-footer {
    padding: 12px;
  }

  .modal-detail .modal-dialog .modal-content .modal-body {
    gap: 16px;
  }

  .modal-detail-itineraries .timeline-itineraries {
    padding: 4px 0 4px 4px;
  }

  .timeline-itineraries-item-content>p:last-child {
    height: 40px;
  }

  .timeline-itineraries-item-content {
    padding: 8px;
    gap: 4px;
  }

  .timeline-itineraries-item {
    gap: 8px;
  }

  .modal-detail .modal-dialog .modal-content .modal-body>div:first-child {
    flex-direction: column-reverse;
  }

  .modal-detail .modal-dialog .modal-content .modal-body .offers-item-title {
    height: auto;
    max-height: 52px;
  }

  .modal-detail .modal-dialog .modal-content .modal-body .booking-inner-time {
    width: 100%;
    flex-wrap: nowrap;
  }

  .box-booking>img {
    width: 100%;
  }

  .booking-deck {
    gap: 16px;
    padding: 0;
  }

  .list-checkbox-item {
    flex-wrap: wrap;
  }

  .list-checkbox-item .custom-checkbox-container,
  .list-checkbox-item-price {
    width: 100%;
  }

  .list-checkbox-item .custom-checkbox-container label {
    display: flex;
    white-space: nowrap;
  }

  .service-cabin-item {
    flex-direction: column;
  }

  .service-cabin-item-left {
    width: 100%;
  }

  .service-cabin-item-right,
  .box-booking {
    padding: 12px;
    gap: 16px;
  }

  .service-cabin-item-content {
    flex-direction: row;
  }

  .service-spa-item {
    gap: 16px;
  }

  .service-spa-item-footer {
    padding-top: 16px;
  }

  .service-spa-item-form.form-style-3>div {
    width: 100%;
  }

  .form-style-3 .form-group>textarea.form-item {
    height: 100px;
  }

  .list-checkbox-item:has(.hidden-checkbox:checked) .count-seating-show {
    flex-direction: column;
    align-items: flex-end;
  }

  .list-checkbox-item {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 4px;
    justify-items: end;
  }

  .list-checkbox-item-price {
    grid-column-start: 1;
    grid-row-start: 2;
  }

  .list-checkbox-item .count-seating-show {
    grid-row: span 2 / span 2;
    grid-column-start: 2;
    grid-row-start: 1;
    gap: 4px;
    width: max-content;
    height: 100%;
  }

  .list-checkbox-group {
    gap: 12px;
    padding: 8px 12px;
  }

  .booking-inner-left {
    gap: 16px;
  }

  .box-info-guest-header-form-item {
    flex: 1;
    min-width: unset;
    padding: 12px 16px;
  }

  .booking-inner-bill-left-content,
  .booking-inner-bill-right,
  .booking-bill-select-payment>div {
    padding: 16px;
    gap: 12px;
  }

  .booking-bill-select-payment-note {
    margin-top: 12px;
    padding-top: 12px;
  }

  .booking-inner-confirm,
  .booking-confirm-inner {
    gap: 16px
  }

  .booking-inner-confirm {
    padding: 12px 24px
  }

  .booking-inner-confirm-title {
    text-align: center;
  }

  .itineraries-detail-1-item {
    height: 350px;
  }

  .itineraries-detail-detail-1-slider {
    height: 380px;
  }

  .itineraries-detail-detail-1-slider .itineraries-detail-item-title {
    height: auto;
  }

  .itineraries-detail-2-inner {
    padding: 12px;
  }

  .roadmap-content {
    width: 100%;
  }

  .roadmap-content>img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .itineraries-detail-right-slider .owl-nav {
    top: -5px;
    right: 0;
  }

  .itineraries-detail-4-left {
    gap: 16px;
  }

  .form-review .row>div:last-child>div {
    padding: 0 !important;
  }

  .form-review .form-group label {
    text-align: start;
  }

  .form-review .radio-group {
    margin-top: 16px;
  }

  .form-rate-star-item-rate {
    width: 32px;
    flex: unset;
    height: 32px;
  }

  .form-rate-star-item-rate img {
    width: 100%;
    height: 100%;
  }

  .form-rate-star-header-item.first,
  .form-rate-star-item-title {
    width: 130px;
    margin-right: 8px;
  }

  .form-rate-star-item-title>p {
    font-size: 10px;
    line-height: 12px;
    padding: 4px 6px;
    height: max-content;
  }

  .form-rate-star-header {
    display: none;
  }

  .form-rate-star-item {
    height: 40px;
  }

  .form-rate-star {
    margin: 16px 0;
  }

  .itineraries-detail-list {
    gap: 8px;
  }

  .itineraries-detail-list-item:not(:last-child) {
    padding-bottom: 8px;
  }

  .itineraries-detail-review,
  .review-list {
    gap: 16px;
  }

  .review-list {
    height: 720px;
  }

  .banner-page-itineraries-detail .btn-book-now {
    margin: 0;
  }

  .banner-page-itineraries-detail .btn-book-now {
    height: 36px;
  }

  .banner-page-itineraries-detail,
  .cruise-price {
    align-items: flex-start;
  }

  .name-tour-title {
    text-align: start;
  }

  .banner-page-itineraries-detail {
    top: 54%;
    transform: translate(5%, -50%);
    gap: 8px;
  }

  .itineraries-detail-5 .form-check-date.form-type-2 {
    height: auto;
    margin-top: 24px;
  }

  .itineraries-detail-5 .form-type-2>form {
    flex-wrap: wrap;
  }

  .itineraries-detail-5 .form-type-2>form .btn-color-yellow.btn-check-date {
    width: 100%;
    margin: 8px;
  }

  .itineraries-detail-5 .form-type-2>form>.form-group>div {
    gap: 4px;
  }

  .itineraries-detail-5 .form-type-2>form>.form-group {
    padding: 8px 8px 0 8px;
  }

  .form-type-2>form .line:nth-child(4) {
    display: none;
  }

  .form-type-2>form label {
    font-size: 12px;
    line-height: 16px;
  }

  .itineraries-detail-5 .form-type-2>form>.form-group .custom-select-guest-popup {
    width: 240px;
  }

  .itineraries-detail-5-table {
    padding: 12px;
    width: 100%;
    overflow: scroll;
  }

  .table-check-date-data>thead>tr>th,
  .table-check-date-data>tbody>tr>td {
    padding: 12px
  }

  .table-check-date-data>tbody>tr>td {
    height: 66px;
  }

  .table-check-date-data>tbody>tr>td .btn-book-now {
    height: 36px;
  }

  .page-content-header-inner {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .page-content-header-inner>p {
    width: 100%;
  }

  .overview-box-1 {
    margin-top: 16px;
  }

  .overview-img-item {
    height: 250px;
    border-radius: 20px 20px 0 0;
  }

  .overview-content-item {
    padding: 16px 24px;
    border-radius: 12px;
  }

  .overview-content-slider {
    border-radius: 20px;
  }

  .overview-box-4-content,
  .overview-box-5-content,
  .experience-box-1-content {
    margin-top: 16px;
  }

  .overview-box-3,
  .onboard-dinning-box-3 {
    min-height: 420px;
  }

  .box-2-home {
    height: 525px;
  }

  .box-2-home-header {
    gap: 8px;
    margin: 0 auto 24px auto;
  }

  .box-2-home-header>h2 {
    text-align: center;
    font-size: 36px;
    line-height: 48px;
  }

  .btn-play-video {
    width: 60px;
    height: 60px;
    top: 68%;
  }

  .box-2-home-bg-2 {
    height: 32px;
  }

  .box-3-second-items {
    height: 400px;
  }

  .box-3-second {
    margin: 56px 0 24px 0;
  }

  .box-3-second .line {
    top: 36px;
  }

  .box-3-home-bg {
    height: 800px;
  }

  .box-3-second-item {
    height: 100%;
  }

  .box-6-home .main-content {
    flex-direction: column;
    gap: 24px;
    padding: 24px 0;
  }

  .box-home-6-slider .swiper-slide {
    height: 250px !important;
  }

  .swiper.box-home-6-slider {
    height: 532px;
  }

  .box-4-home-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .box-4-home-item-first {
    padding: 16px;
  }

  .box-3-second-item>div,
  .box-3-second-item.active>div {
    transform: translateY(-34%);
  }

  .box-3-third-slider .owl-stage-outer .owl-item .box-3-third-item .box-3-third-item-img {
    height: 400px !important;
  }

  .box-3-third-slider .owl-stage-outer .owl-item.center .box-3-third-item {
    margin-top: 0;
  }

  .box-3-third-slider .owl-stage-outer .owl-item .box-3-third-item .box-3-third-item-content {
    margin-top: -100px;
  }

  .box-3-second .line {
    top: -36px;
  }

  .box-1-home-item-content {
    padding: 12px 24px;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .box-1-home-item-content>div>p {
    line-height: 24px;
  }

  .box-1-home-slider .owl-dots .owl-dot {
    width: 16px;
    height: 16px
  }

  .box-1-home-slider .owl-dots {
    margin-top: 16px;
  }

  .box-3-third-slider .owl-stage-outer {
    padding: 0;
  }

  .bg-img-box-1-home {
    height: 400px;
  }

  .bg-img-box-1-home>img {
    height: 100%;
  }

  .box-4-home-item-desc {
    text-align: start;
  }

  .comming-soon-header {
    align-items: center;
    gap: 8px;
  }

  .comming-soon-header>a>img {
    width: 100px;
  }

  .comming-soon-content-inner {
    gap: 12px;
  }

  .comming-soon-header-content {
    gap: 8px;
  }

  .comming-soon-header-item {
    padding: 0;
  }

  .comming-soon-header {
    padding-top: 8px;
  }

  .form-coming-soon {
    flex-direction: column;
    border-radius: 12px;
    align-items: center;
    gap: 12px 10px;
  }

  .form-coming-soon>.form-item {
    width: 100%;
    flex: unset;
  }

  .comming-soon-content {
    top: 55%;
    transform: translate(-50%, -50%);
  }

  .comming-soon-content-inner {
    padding: 0;
  }

  .page-comming-soon {
    background-image: url(../img/img-coming-soon-mobile.png);
    background-position: center top;
  }

  .comming-soon-header-item>p {
    display: none;
  }

  .coming-soon-desc {
    font-family: var(--font-primary-regular);
  }

  .coming-soon-subtitle {
    margin-top: 12px;
  }

  .comming-soon-content-inner>div {
    gap: 8px;
  }

  .comming-soon-tag {
    height: 90px;
    font-size: 24px;
    line-height: 32px;
  }
}