section.hero {
  padding-inline: 16px;
  margin-block: 16px;
}
section.hero .hero-container {
  border-radius: var(--radius);
  overflow: clip;
  height: 640px;
  position: relative;
}
section.hero .hero-container .hero-background-carousel {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  overflow: clip;
}
section.hero .hero-container .hero-background-carousel .hero-background-carousel-parallax {
  height: 100%;
  scale: 1.05;
}
section.hero .hero-container .hero-background-carousel .hero-background-carousel-parallax .hero-background-carousel-container img, section.hero .hero-container .hero-background-carousel .hero-background-carousel-parallax .hero-background-carousel-container video {
  width: 100%;
  height: 100%;
}
section.hero .hero-container .hero-background-carousel .hero-background-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, hsla(0, 0%, 0%, 0.75), hsla(0, 0%, 0%, 0));
  pointer-events: none;
}
section.hero .hero-container .hero-info {
  display: flex;
  flex-direction: column;
  gap: 32px;
  color: white;
  position: relative;
  padding: 32px;
  pointer-events: none;
}
section.hero .hero-container .hero-info .hero-info-heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
  pointer-events: auto;
}
section.hero .hero-container .hero-info .hero-info-heading .hero-info-title {
  max-width: 6em;
}
section.hero .hero-container .hero-info .hero-info-cta {
  width: -moz-fit-content;
  width: fit-content;
  pointer-events: auto;
}

section.promotional-banner {
  position: relative;
  min-height: 128px;
  padding-inline: 16px;
  margin-block: 32px;
  display: flex;
}
section.promotional-banner .promotional-banner-background {
  position: absolute;
  inset: 0;
}
section.promotional-banner .promotional-banner-background img {
  width: 100%;
  height: 100%;
}
section.promotional-banner .promotional-banner-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  color: #fff;
  max-width: var(--container-width);
  margin-inline: auto;
  width: 100%;
}
@media (width < 768px) {
  section.promotional-banner .promotional-banner-container {
    flex-wrap: wrap;
  }
}
section.promotional-banner .promotional-banner-container .promotional-banner-info {
  flex-basis: 200px;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-block: 32px;
}
@media (width < 768px) {
  section.promotional-banner .promotional-banner-container .promotional-banner-info {
    flex-basis: 100%;
  }
}
section.promotional-banner .promotional-banner-container .promotional-banner-info .promotional-banner-description {
  max-width: 12em;
}
section.promotional-banner .promotional-banner-container .promotional-banner-image {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  max-width: max(33.33lvw, 300px);
}
@media (width < 768px) {
  section.promotional-banner .promotional-banner-container .promotional-banner-image {
    flex-basis: 200px;
  }
}
section.promotional-banner .promotional-banner-container .promotional-banner-image img {
  flex-basis: 0;
  flex-grow: 1;
  min-height: 0;
  width: auto;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (width < 768px) {
  section.promotional-banner .promotional-banner-container .promotional-banner-image img {
    flex-basis: auto;
  }
}
section.promotional-banner .promotional-banner-container .promotional-banner-cta {
  flex-basis: 200px;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-block: 32px;
}
@media (width < 768px) {
  section.promotional-banner .promotional-banner-container .promotional-banner-cta {
    padding-block: 32px;
    align-self: flex-end;
  }
}
@media (width < 480px) {
  section.promotional-banner .promotional-banner-container .promotional-banner-cta {
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    justify-content: center;
    padding-block: 16px;
  }
}

section.about-organization {
  padding-inline: 16px;
  margin-block: 64px;
  min-height: 320px;
}
section.about-organization .about-organization-container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
section.about-organization .about-organization-container .about-organization-background {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  overflow: clip;
}
section.about-organization .about-organization-container .about-organization-background img {
  width: 100%;
  height: 100%;
}
section.about-organization .about-organization-container .about-organization-background .about-organization-background-overlay {
  position: absolute;
  inset: 0;
  background: hsla(0, 0%, 0%, 0.45);
}
section.about-organization .about-organization-container .about-organization-info {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
  color: #fff;
  padding-block: 64px;
  padding-inline: 32px;
}
section.about-organization .about-organization-container .about-organization-info .about-organization-description {
  max-width: 30em;
}

section.benefits {
  position: relative;
  padding-inline: 32px;
  padding-block: 32px;
  z-index: 0;
}
section.benefits .benefits-background {
  position: absolute;
  inset: 0;
}
section.benefits .benefits-background img {
  width: 100%;
  height: 100%;
}
section.benefits .benefits-container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  row-gap: 32px;
  -moz-column-gap: 64px;
       column-gap: 64px;
  max-width: var(--container-width);
  padding-block: 64px;
  margin-inline: auto;
  width: 100%;
}
section.benefits .benefits-container .benefits-graphic {
  --overflow: 10%;
  flex-grow: 1;
  width: calc(max(200px, 22%) + var(--overflow));
  margin-left: calc(-1 * var(--overflow));
  display: flex;
  flex-direction: column;
}
section.benefits .benefits-container .benefits-graphic .benefits-graphic-item {
  display: flex;
  cursor: pointer;
  pointer-events: none;
  filter: brightness(1) drop-shadow(0 0 0px rgba(255, 255, 255, 0.3333333333)) drop-shadow(0 0 20px color-mix(in oklab, var(--color-fg-1) 30%, transparent));
  transition-property: scale, filter, transform;
  transition-delay: 0s, 0s, calc((var(--length) - 1 - var(--index)) * 0.2s);
  transition-timing-function: var(--default-transition-timing-function), var(--default-transition-timing-function), var(--ease-in-out);
  transition-duration: var(--default-transition-duration), var(--default-transition-duration), 1.5s;
}
section.benefits .benefits-container .benefits-graphic .benefits-graphic-item:hover {
  scale: 1.05;
  filter: brightness(1.05) drop-shadow(0 0 20px rgba(255, 255, 255, 0.3333333333)) drop-shadow(0 0 20px color-mix(in oklab, var(--color-fg-1) 60%, transparent));
}
section.benefits .benefits-container .benefits-graphic .benefits-graphic-item:active {
  scale: 0.98;
  filter: brightness(1) drop-shadow(0 0 0px rgba(255, 255, 255, 0.3333333333)) drop-shadow(0 0 20px color-mix(in oklab, var(--color-fg-1) 30%, transparent));
}
section.benefits .benefits-container .benefits-graphic .benefits-graphic-item[data-tabs-selected] {
  z-index: 10;
}
section.benefits .benefits-container .benefits-graphic .benefits-graphic-item:not(:is([data-intersection-visible] *)) {
  transform: translateX(-110%) rotate(-30deg);
  transition-delay: 0s;
  transition-duration: 0s;
}
section.benefits .benefits-container .benefits-graphic .benefits-graphic-item.benefits-graphic-item-basic {
  padding-right: 40%;
  rotate: -13deg;
}
section.benefits .benefits-container .benefits-graphic .benefits-graphic-item.benefits-graphic-item-elite {
  margin-block: -25%;
  padding-inline: 20%;
  rotate: 0deg;
}
section.benefits .benefits-container .benefits-graphic .benefits-graphic-item.benefits-graphic-item-preferred {
  padding-left: 40%;
  rotate: 6deg;
}
section.benefits .benefits-container .benefits-graphic .benefits-graphic-item img {
  pointer-events: auto;
  width: 200px;
  flex-grow: 1;
}
section.benefits .benefits-container .benefits-info {
  flex-basis: 300px;
  flex-grow: 3;
  max-width: 100%;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
section.benefits .benefits-container .benefits-info .benefits-content {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 640px;
}/*# sourceMappingURL=section.css.map */

/* MEMBERSHIP PAGE */
.membership-tiers-banner-section {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 32px 16px;

	@media (width <= 1024px) {
		padding-top: 20px;
	}

	& .membership-tiers-banner-head {
	}

	& .membership-tiers-boxes-container {
		& .membership-tiers-boxes-wrapper {
			display: flex;
			gap: 16px;

			@media (width <= 1024px) {
				flex-wrap: wrap;
			}

			@media (width <= 768px) {
				justify-content: center;
			}

			& .membership-tiers-box-item {
				background-color: #f2efed;
				padding: 16px;
				border-radius: 16px;
				display: flex;
				flex-flow: column;
				gap: 16px;
				text-align: center;
				flex-grow: 1;

				@media (width <= 1024px) {
					width: calc(50% - 8px);
					flex-grow: 0;
				}

				@media (width <= 768px) {
					width: 100%;
					max-width: 360px;
				}

				& .membership-tiers-box-image {
					display: flex;

					& img {
						flex-grow: 1;
					}
				}

				& .membership-tiers-box-desc {
					display: flex;
					flex-flow: column;
					gap: 16px;
					width: 60%;
					margin: 16px auto;

					@media (width <= 768px) {
						width: 100%;
					}
				}
			}
		}
	}
}

.membership-tiers-table-section {
	display: flex;
	gap: 16px;
	padding: 32px 16px;
	flex-flow: column;

	overflow: auto;
	max-width: 100%;

	& .membership-tiers-table-wrapper {
		display: flex;
		gap: 16px;

		& .membership-tiers-table-benefits {
			width: 35%;
		}

		& .membership-tiers-table-tiers {
			width: calc(65% - 16px);
			display: flex;
			gap: 16px;

			& .membership-tiers-table {
				width: calc(99.99% - (16px * 2) / 3);
			}
		}
	}

	& .membership-tiers-table {
		background-color: #f2efed;
		border-radius: 10px;
		overflow: hidden;
	}

	& .membership-tiers-table-body-row {
		width: calc(100% - 50px);
		margin: auto;
		padding: 20px;
		font-weight: 600;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;

		&:not(:nth-child(1)) {
			border-top: 1px solid #301a0f4d;
		}
	}

	& .membership-tiers-table-header {
		padding: 20px 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		background: var(--bg);
		color: var(--fg);
	}

	& .membership-tiers-table-footer {
		text-align: center;
	}

	& .membership-tiers-table-body-row .tick-icon {
		color: var(--bg);
		width: 56px;
	}

	& .membership-tiers-table-wrapper {
		min-width: 1024px;
	}
}

/* Our hotel */
.our-hotels-banner-section {
	padding-inline: 16px;
	margin-block: 16px;
	display: flex;
	flex-wrap: wrap;

	& .our-hotels-banner-wrap {
		width: 50%;

		&.ohb-content-wrap {
			display: flex;
			align-items: center;
			justify-content: center;

			& .our-hotels-banner-column {
				padding: 0 100px 0 60px;
			}
		}

		&.ohb-image-wrap {
			& .our-hotels-banner-image {
				aspect-ratio: 10/9;
				width: 100%;
				height: auto;
				border-radius: 10px;
				overflow: hidden;

				& img {
					height: 100%;
					width: 100%;
					object-fit: cover;
					transition-property: scale;
				}

				&:hover img {
					scale: 1.05;
				}
			}
		}
	}

	& .our-hotels-banner-column {
		& h1 {
			margin-bottom: 30px;
		}

		& > :not(.h1) {
			color: #755d51;
		}
	}
}

.our-hotels-archive-section {
	padding-inline: 16px;
	margin-block: 16px;
	display: grid;
	grid-auto-rows: 1fr;
	gap: 20px;
	margin-top: 40px;
	margin-bottom: 100px;

	@media (width <= 960px) {
		grid-auto-rows: unset;
	}

	& .our-hotels-archive-wrap {
		display: flex;
		flex-wrap: wrap;
		background-color: #f2efed;
		border-radius: 10px;

		& .our-hotels-archive-column {
			width: 50%;
			position: relative;

			@media (width <= 960px) {
				width: 100%;
			}

			&.ohac-image-column {
				@media (width <= 960px) {
					max-height: 400px;
					height: 55vw;
					min-height: 200px;
				}

				& .ohac-logo {
					position: absolute;
					width: auto;
					height: 90px;
					left: 30px;
					top: 15px;
					z-index: 1;

					& img {
						height: 100%;
						width: auto;
						filter: brightness(0) invert(1);
					}
				}

				& .ohac-image {
					border-radius: 10px;
					overflow: hidden;
					height: 100%;
					position: absolute;
					width: 100%;

					&::after {
						content: '';
						width: 100%;
						height: 100%;
						position: absolute;
						left: 0;
						top: 0;
						background: linear-gradient(
							180deg,
							rgba(0, 0, 0, 0.04) 0%,
							rgba(0, 0, 0, 0) 100%
						);
					}

					& img {
						transition-property: scale;
						width: 100%;
						height: 100%;
						object-fit: cover;
					}

					&:hover img {
						scale: 1.05;
					}
				}
			}

			&.ohac-content-column {
				display: flex;
				align-items: center;
				justify-content: center;

				& .ohac-content {
					padding: 60px 150px 60px 60px;
					display: flex;
					flex-flow: column;
					gap: 15px;

					@media (width <= 960px) {
						padding: 30px;
					}

					& .ohac-heading {
						& .ohac-category {
							color: #755d51;
							font-weight: 600;
							margin-bottom: 5px;
						}

						& .ohac-title {
							width: 75%;
						}
					}

					& .ohac-cities {
						display: flex;
						flex-wrap: wrap;
						gap: 10px;

						& .ohac-city {
							border-radius: 5px;
							background-color: #d6ccb3;
							padding: 10px 20px;
							font-weight: 600;
						}
					}

					& .ohac-desc {
						& * {
							color: #755d51;
							font-weight: 600;
						}
					}
				}
			}
		}
	}
}

/* status error */
.action_status.status_error {
    color: #dc3545;
    border: 1px solid;
    background: #ff00000f;
}
.action_status {
    text-align: center;
    margin-top: 10px;
    font-size: 18px;
    padding: 4px;
}

/* status success */
.action_status.status_success {
    border: 1px solid #28a745;
    padding: 10px;
    margin: 0 auto;
    margin-top: 10px;
}
.action_status.status_success {
    color: #28a745;
    border: 1px solid;
    background: #4caf5024;
}

/* REWARD PAGE */
.claim-your-reward-section {
	padding-inline: 16px;
	margin-block: 16px;

	& .claim-your-reward-head {
		margin-bottom: 50px;
	}

	& .claim-your-reward-filter-section {
		display: flex;
		gap: 60px;
		margin-bottom: 40px;

		& .claim-your-reward-left-col {
			/* default width */
			width: calc(25% - 60px);

			@media (width <= 620px) {
				width: 100%;
			}

			@media (width <= 1024px) {
				width: calc(300px - 60px);
			}
		}

		& .claim-your-reward-right-col {
			/* default width */
			width: 75%;

			@media (width <= 620px) {
				width: 100%;
			}

			@media (width <= 1024px) {
				width: calc(100% - 300px);
			}
		}

		@media (width <= 620px) {
			flex-wrap: wrap;
		}
	}

	& .cyr-heading {
		margin-bottom: 20px;
	}

	& .cyr-head-items {
		padding-bottom: 10px;
		border-bottom: 1px solid #301a0f80;
	}

	& .cyr-body-item {
		padding: 15px 0 0;

		&:not(:nth-child(1)) {
			border-top: 1px solid #301a0f80;
		}
	}

	& .cyr-foot-items {
		margin-top: 20px;
	}

	& .filter-reset-btn {
		border: 1px solid #505050;
		padding: 12px 36px;
		text-align: center;
		border-radius: 100px;
		color: #301a0f80;
		cursor: pointer;
	}

	& .cyr-body-desc {
		overflow: hidden;
		position: relative;
		display: flex;
		flex-flow: column;
		gap: 5px;
		transition: 0.3s ease-in-out all;

		&[data-accordion-selected] {
			margin-bottom: 15px;
		}
	}

	& .cyr-head-item,
	& .cyr-bdesc-item {
		position: relative;
		margin-bottom: 5px;
		cursor: pointer;

		& input[type='checkbox'] {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			cursor: pointer;
			opacity: 0;
		}

		&::after {
			content: '';
			width: auto;
			height: 100%;
			position: absolute;
			right: 0;
			top: 0;
			background-image: url(https://ireward.superghs.com/templates/defaultv4/cititel_training/assets/4IH2ii.svg);
			background-size: 90%;
			z-index: 1;
			background-repeat: no-repeat;
			background-position: center;
			display: block;
			visibility: visible;
			aspect-ratio: 1;
			opacity: 1;
		}

		&.active::after {
			background-image: url(https://ireward.superghs.com/templates/defaultv4/cititel_training/assets/OmE7k6.svg);
		}
	}

	& .cyr-bdesc-item {
		padding-left: 30px;

		&::after {
			right: unset;
			left: 0;
		}
	}

	& .cyr-body-title {
		cursor: pointer;
		padding-bottom: 15px;

		&[data-accordion-trigger] {
			position: relative;

			& svg {
				position: absolute;
				right: 0;
				top: 6px;
			}
		}

		&:not([data-accordion-selected]) svg {
			transform: rotate(180deg);
		}
	}

	/* right */
	& .cyr-boxes {
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
	}

	& .cyr-box {
		width: calc((99.99% - (16px * 2)) / 3);
		display: flex;
		background-color: #f2efed;
		border-radius: 10px;
		overflow: hidden;
		flex-flow: column;
		cursor: pointer;

		&:hover .cyr-box-image img {
			transform: scale(1.2);
		}

		@media (width <= 1024px) {
			width: calc((99.99% - (16px * 1)) / 2);
		}

		@media (width <= 959px) {
			width: 100%;
		}
	}

	& .cyr-box-image {
		overflow: hidden;
		aspect-ratio: 13/9;
		width: 100%;
		height: auto;
		position: relative;

		& img {
			width: 100%;
			height: 100%;
			transition: 0.3s ease-in-out all;
			object-fit: cover;
		}
	}

	& .cyr-box-desc-wrapper {
		padding: 15px 20px;
		display: flex;
		flex-flow: column;
		height: 100%;
	}

	& .cyr-box-desc {
		flex: 1;
	}

	& .cyr-box-category {
		& > * {
			color: #755d51;
			font-weight: 600;
		}
	}

	& .cyr-box-point-container {
		background-color: #d6ccb3;
		width: max-content;
		padding: 10px 20px 13px;
		text-align: center;
		border-radius: 5px;
	}

	& .cyr-box-arrow {
		height: auto;
		background-image: url(https://ireward.superghs.com/templates/defaultv4/cititel_training/assets/gF2G1P.svg);
		background-size: 35%;
		background-position: center;
		background-repeat: no-repeat;
		width: 100%;
		aspect-ratio: 1;
		border: 1px solid #301a0f80;
		border-radius: 100%;
	}

	& .cyr-box-arrow-container {
		width: 40px;
		display: flex;
		align-items: flex-end;
	}

	& .cyr-box-footer {
		display: flex;
		justify-content: space-between;
	}

	& .cyr-box-title {
		flex: 1;
		margin-bottom: 25px;

		& > * {
			line-height: 1.15;
			margin-top: 5px;
		}
	}

	& .cyr-pagination {
		display: flex;
		justify-content: center;
		gap: 5px;
		margin: 35px;

		& a {
			width: 40px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 100%;
			cursor: pointer;

			&.active {
				background-color: #fde023;
			}

			&:not(.active):hover {
				background-color: #f2efed;
			}
		}
	}
}



/* redeemtion */
.redeem-section {
	padding-inline: 16px;
	margin-block: 16px;
	margin-bottom: 100px;
	display: flex;

	@media (width <= 959px) {
		flex-wrap: wrap;
	}

	& .redeem-wrap {
		width: 50%;

		@media (width <= 959px) {
			width: 100%;
		}

		&.redeem-desc-wrap {
			@media (width <= 959px) {
				padding: 30px 0;
			}
		}

		&.redeem-image-wrap {
			& .redeem-column {
				position: sticky;
				top: 85px;
			}
		}
	}

	& .redeem-image {
		border-radius: 10px;
		overflow: hidden;
	}

	& .redeem-desc-wrap {
		padding: 0 60px;
	}

	& ol {
		padding-left: 20px;
		margin-bottom: 15px;

		& li {
			all: revert;
			list-style: decimal;
			margin-bottom: 5px;
		}
	}

	& .redeem-title {
		margin-bottom: 40px;
	}

	& .redeem-category {
		margin-bottom: 10px;

		& * {
			color: #755d51;
			font-weight: 600;
		}
	}

	& .redeem-desc {
		& * {
			color: #755d51;
			font-weight: 600;
		}
	}

	& .cyr-box-point-container {
		background-color: #d6ccb3;
		width: max-content;
		padding: 10px 20px 13px;
		text-align: center;
		border-radius: 5px;
	}

	& .cyr-box-footer {
		display: flex;
		gap: 16px;

		@media (width <= 767px) {
			flex-wrap: wrap;
		}
	}

	& .redeem-button-container {
		width: 40%;
		display: flex;

		@media (width <= 767px) {
			width: 100%;
			height: 56px;
		}

		& .button {
			flex-grow: 1;
			height: 100%;
		}
	}

	& .number-wrapper {
		display: inline-flex;
		align-items: center;
		border: 1px solid #b8b6b4;
		border-radius: 100px;
		overflow: hidden;
		height: 100%;
		width: 100%;
		padding: 15px;
	}

	& .number-btn {
		border: none;
		width: 32px;
		height: 36px;
		font-size: 20px;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		user-select: none;
	}

	& .redeem-number {
		-moz-appearance: textfield;
		appearance: textfield;
		border: none;
		width: 100%;
		height: 36px;
		text-align: center;
		font-size: 16px;

		&::-webkit-outer-spin-button,
		&::-webkit-inner-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}
	}

	& .cyr-box-number {
		flex: 1;
	}

	& .redeem-guide {
		background-color: #f2efed;
		padding: 25px 35px;
		border-radius: 5px;
		margin-top: 30px;

		& .redeem-guide-title {
			margin-bottom: 15px;
		}

		& li {
			font-weight: 600 !important;
			color: #755d51 !important;
		}

		& li:nth-last-child(1),
		& ol {
			margin-bottom: 0;
		}
	}

	& .redeem-footer {
		margin-top: 25px;
	}
}

/* removed top-level responsive blocks */