/* =========================================
   FONTS
========================================= */
@font-face {
	font-family: "ZonaPro-Regular";
	src: url("https://ch-api.healthhub.sg/api/public/content/bfe01745d05e44e9b7d79c6d447a4cb8?v=c5322b8e");
	src:
		url("https://ch-api.healthhub.sg/api/public/content/bfe01745d05e44e9b7d79c6d447a4cb8?v=c5322b8e?#iefix")
			format("embedded-opentype"),
		url("https://ch-api.healthhub.sg/api/public/content/e1ba7ac046f64790be37a8ca2e3541a3?v=c81c0dd1")
			format("woff2"),
		url("https://ch-api.healthhub.sg/api/public/content/269889ed7e7a48b4b0c16bdecf3c224b?v=e89033ce")
			format("woff"),
		url("https://ch-api.healthhub.sg/api/public/content/a08cfd55c6104290ae01785ccd066bce?v=3a816a6c")
			format("truetype"),
		url("https://ch-api.healthhub.sg/api/public/content/4b2bb7106d9548d7ad6c3892351a9693?v=620486ba#ZonaPro-Regular")
			format("svg");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "ZonaPro-Black";
	src: url("https://ch-api.healthhub.sg/api/public/content/256872d336b346f6b3d6c41753a11c42?v=17ac30ea");
	src:
		url("https://ch-api.healthhub.sg/api/public/content/256872d336b346f6b3d6c41753a11c42?v=17ac30ea?#iefix")
			format("embedded-opentype"),
		url("https://ch-api.healthhub.sg/api/public/content/96bf856d4b2147c5ba92de6c242cdde5?v=d00b401d")
			format("woff2"),
		url("https://ch-api.healthhub.sg/api/public/content/49785a464e6e4be3908379af82bcd093?v=a27b3e09")
			format("woff"),
		url("https://ch-api.healthhub.sg/api/public/content/0b4d12d5de8b4a33bd409091aed69131?v=3cd79345")
			format("truetype"),
		url("https://ch-api.healthhub.sg/api/public/content/83bc891b6fc3415393c69fc94cc3501e?v=a7285162#ZonaPro-Black")
			format("svg");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "ZonaPro-BlackItalic";
	src: url("https://ch-api.healthhub.sg/api/public/content/004005656d50440cbc86fc4010fb2791?v=b99b3958");
	src:
		url("https://ch-api.healthhub.sg/api/public/content/004005656d50440cbc86fc4010fb2791?v=b99b3958?#iefix")
			format("embedded-opentype"),
		url("https://ch-api.healthhub.sg/api/public/content/d1153d83f8fe47f1bc5904f8ed75ea4c?v=d08f94c4")
			format("woff2"),
		url("https://ch-api.healthhub.sg/api/public/content/152937d3a3974afc8be61d8631d29f46?v=4829d8d3")
			format("woff"),
		url("https://ch-api.healthhub.sg/api/public/content/6344af7bfd994c03b054b219693416eb?v=83d8922b")
			format("truetype"),
		url("https://ch-api.healthhub.sg/api/public/content/29ad7817f4f34b88b246cd1eaa97fd1b?v=d35eab68#ZonaPro-BlackItalic")
			format("svg");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "ZonaPro-Bold";
	src: url("https://ch-api.healthhub.sg/api/public/content/c62c7380b2334f629cadee40a0ef35b8?v=2701e2ab");
	src:
		url("https://ch-api.healthhub.sg/api/public/content/c62c7380b2334f629cadee40a0ef35b8?v=2701e2ab?#iefix")
			format("embedded-opentype"),
		url("https://ch-api.healthhub.sg/api/public/content/cef6d325d7444f029f7055e26367932d?v=11b4219c")
			format("woff2"),
		url("https://ch-api.healthhub.sg/api/public/content/078fc07abb2a47198b5403aacfa5e2a4?v=10870afa")
			format("woff"),
		url("https://ch-api.healthhub.sg/api/public/content/4aada401591d44ea8fea81e4425282c1?v=e83ba642")
			format("truetype"),
		url("https://ch-api.healthhub.sg/api/public/content/13a5f6c9adcb4eefa3a8ff58ebc2971f?v=a6c7a830#ZonaPro-Bold")
			format("svg");
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "ZonaPro-ExtraBold";
	src: url("https://ch-api.healthhub.sg/api/public/content/9c5f926c6ff247369dffdfa7e51e7ec0?v=5bfda006");
	src:
		url("https://ch-api.healthhub.sg/api/public/content/9c5f926c6ff247369dffdfa7e51e7ec0?v=5bfda006?#iefix")
			format("embedded-opentype"),
		url("https://ch-api.healthhub.sg/api/public/content/3de33d59a493490f88c61661d2147f64?v=9fc4e309")
			format("woff2"),
		url("https://ch-api.healthhub.sg/api/public/content/4e169fadb65b4789adb523d865f58a30?v=082d5161")
			format("woff"),
		url("https://ch-api.healthhub.sg/api/public/content/c9391700059841f38c8b56fd7ff46d47?v=94b25b5c")
			format("truetype"),
		url("https://ch-api.healthhub.sg/api/public/content/cdc98c3463ee45d5b0146489cdf6c028?v=994cfdd5#ZonaPro-ExtraBold")
			format("svg");
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

.meal-log-container p {
	font-family: "ZonaPro-Regular" !important;
	font-size: 16px;
}
.meal-log-container p.bigger {
	font-size: 24px;
	line-height: 36px;
}
.meal-log-container .f-zp-regular {
	font-family: "ZonaPro-Regular" !important;
}

.meal-log-container .f-zp-black {
	font-family: "ZonaPro-Black" !important;
}

.meal-log-container .f-zp-blackitalic {
	font-family: "ZonaPro-BlackItalic" !important;
}

.meal-log-container .f-zp-bold {
	font-family: "ZonaPro-Bold" !important;
}

.meal-log-container .f-zp-extrabold {
	font-family: "ZonaPro-ExtraBold" !important;
}

.meal-log-container .f-avenir-roman {
	font-family: "Avenir-Roman" !important;
}

.meal-log-container h1,
.meal-log-container h2 {
	font-family: "ZonaPro-Black" !important;
	line-height: 120%;
}
.meal-log-container h2 {
	font-size: 30px;
}
@media (max-width: 540px) {
	.meal-log-container h2 {
		font-size: 22px;
	}
}
/* =========================================
   BASE
========================================= */
.hpb-container .f-white {
	color: #fff;
}
.hpb-container .f-yellow {
	color: #ffd03c;
}
.lh-0 {
	line-height: 0;
}
.hpb-container .link-url {
	font-family: "ZonaPro-Bold" !important;
	font-size: 16px;
	line-height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	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;
}
.hpb-container .link-url span {
	margin-left: 4px;
	line-height: 0;
}
.hpb-container .text-center {
	text-align: center;
}

.hpb-container .uppercase {
	text-transform: uppercase;
}
.max-width-575 {
	max-width: 575px;
}
.max-width-780 {
	max-width: 780px;
}
.m-auto {
	margin-right: auto;
	margin-left: auto;
}
.mb-0 {
	margin-bottom: 0px !important;
}
.mb-6 {
	margin-bottom: 6px !important;
}
.mb-20 {
	margin-bottom: 20px;
}
.mb-28 {
	margin-bottom: 28px;
}
.mb-40 {
	margin-bottom: 40px;
}
.mb-60 {
	margin-bottom: 60px;
}
.mb-64 {
	margin-bottom: 64px;
}
.mb-80 {
	margin-bottom: 80px;
}
.mb-100 {
	margin-bottom: 100px;
}

@media (max-width: 540px) {
	.mb-0-mobile {
		margin-bottom: 0px;
	}
	.mb-40-mobile {
		margin-bottom: 40px;
	}
	.mb-60-mobile {
		margin-bottom: 60px;
	}
	.mb-80-mobile {
		margin-bottom: 80px;
	}
	.mb-90-mobile {
		margin-bottom: 90px;
	}
}

.mt-24 {
	margin-top: 24px;
}
.mt-40 {
	margin-top: 40px;
}
/* Desktop */
.hide-desktop {
	display: none !important;
}

/* Mobile */
@media (max-width: 540px) {
	.hide-mobile {
		display: none !important;
	}

	.hide-desktop {
		display: block !important;
	}
}
/* =========================================
   FOOD CHALLENGE
========================================= */

.food-challenge {
	position: relative;
	background: #ed3350;
}
.food-challenge-padding {
	padding: 20px 20px 80px 20px;
}
/* =========================================
   CONTENT
========================================= */
.meal-log-container {
	max-width: none;
}

.meal-log-container .food-challenge {
	width: 100%;
}
.section-container {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
}
/* =========================================
   STICKY BANNER
========================================= */
.sticky-banner {
	position: sticky;
	top: -1px;
	z-index: 1000;
	width: 100%;
	background-color: #ffd03c;
	padding: 12px;
}

.sticky-banner-inner {
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

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

.sticky-banner-icon {
	width: 32px;
	height: auto;
	flex-shrink: 0;
}

.sticky-banner-content p {
	margin: 0;
	color: #000;
	font-size: 12px;
	line-height: 17px;
}

.sticky-banner-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 6px 12px;
	background-color: #814ff0;
	color: #fff;
	border-radius: 10px;
	text-decoration: none;
	font-family: "ZonaPro-Bold" !important;
	white-space: nowrap;
	font-size: 12px;
}

.sticky-banner-btn:hover {
	color: #fff;
	text-decoration: none;
}

/* Mobile */
@media (max-width: 540px) {
	.sticky-banner {
		padding: 10px 15px;
	}
	.sticky-banner-btn::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 2;
	}
	.sticky-banner-inner {
		flex-direction: row;
		align-items: center;
		gap: 16px;
	}

	.sticky-banner-content {
		flex: 1;
		min-width: 0;
		gap: 8px;
	}

	.sticky-banner-icon {
		width: 32px;
	}

	.sticky-banner-content p {
		max-width: 75%;
		font-size: 10px;
		line-height: 14px;
	}

	.sticky-banner-btn {
		padding: 0;
		background: transparent;
		color: #000;
		border-radius: 0;
		flex-shrink: 0;
	}

	.sticky-banner-btn svg {
		width: 16px;
		height: 16px;
	}

	.sticky-banner-btn:hover {
		color: #000;
	}
}
/* =========================================
   WHO'S LOGGING MORE OF SG LOCAL DISHES
========================================= */
.banner-img {
	max-width: 790px;
}
.title-meal-log {
	max-width: 360px;
}
.map {
	max-width: 800px;
}
.dish-texts-individual {
	display: flex;
	align-items: center;
	gap: 16px;
}
.logs {
	background: #814ff0;
	padding: 0 4px;
	display: inline-block;
}
@media (max-width: 540px) {
	.title-meal-log {
		max-width: 290px;
	}
}
/* =========================================
   HOW TO USE MEAL LOG H365
========================================= */
.phone-containers {
	background-color: #f4ab19;
	padding: 40px;
	border-radius: 40px;
	position: relative;
}
.phone-containers-slick {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	position: initial;
}
.same-image-height {
	max-width: 170px;
}
.phone-containers .circle-number {
	display: flex;
	width: 32px;
	height: 32px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	aspect-ratio: 1/1;
	color: #fff;
	border-radius: 50px;
	background: #000;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 8px;
	font-family: "ZonaPro-Bold" !important;
}
.phone-containers .fitness-tracker-inner-container {
	padding: 0 14px;
	margin-left: auto;
	margin-right: auto;
}
.phone-containers .fitness-tracker-texts {
	padding: 0 5px;
}

@media (max-width: 540px) {
	.same-image-height {
		max-width: 130px;
	}
}
/* =========================================
   SLICK
========================================= */
/* Both arrows */
.how-to-use-meal-log .slick-slider.black-arrows .slick-arrow {
	width: 45px;
	height: 45px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	visibility: visible;
	top: 50%;
	color: inherit;
	transform: translateY(-50%);
	z-index: 2;
}

/* SVG */
.how-to-use-meal-log .slick-slider.black-arrows .slick-arrow svg {
	width: 40px;
	height: 40px;
	display: block;
}

/* Remove Slick's default arrows */
.how-to-use-meal-log .slick-slider.black-arrows .slick-arrow::before {
	display: none;
}

/* Previous arrow */
.how-to-use-meal-log .slick-slider.black-arrows .slick-prev {
	left: 40px;
}

.how-to-use-meal-log .slick-slider.black-arrows .slick-prev svg {
	transform: rotate(180deg);
}

/* Next arrow */
.how-to-use-meal-log .slick-slider.black-arrows .slick-next {
	right: 40px;
}
.how-to-use-meal-log .slick-slider.black-arrows .slick-disabled {
	opacity: 0.5;
}

@media (max-width: 1075px) {
	.how-to-use-meal-log .slick-slider.black-arrows .slick-prev {
		left: 15px;
	}
	.how-to-use-meal-log .slick-slider.black-arrows .slick-next {
		right: 15px;
	}
}
@media (max-width: 905px) {
	.how-to-use-meal-log .slick-slider.black-arrows .slick-prev {
		left: 0;
	}
	.how-to-use-meal-log .slick-slider.black-arrows .slick-next {
		right: 0;
	}
}
@media (max-width: 540px) {
	.slick-dotted.slick-slider.phone-containers-slick {
		margin-bottom: 0;
	}

	.phone-containers {
		padding: 20px 12px;
	}
	.phone-containers .fitness-tracker-inner-container {
		padding: 0;
	}

	.how-to-use-meal-log .slick-slider.black-arrows .slick-prev {
		left: 15px;
	}
	.how-to-use-meal-log .slick-slider.black-arrows .slick-next {
		right: 15px;
	}

	.fitness-tracker-texts {
		max-width: 240px;
	}
	.phone-containers-slick .slick-dots {
		position: absolute;
		bottom: -50px;
		left: 0;
		width: 100%;
		display: flex !important;
		justify-content: center;
		align-items: center;
		gap: 12px;
		margin: 0;
		padding: 0;
	}

	.phone-containers-slick .slick-dots li {
		width: 10px;
		height: 10px;
		margin: 0;
		opacity: 0.5;
	}
	.phone-containers-slick .slick-dots li.slick-active {
		opacity: 1;
	}

	.phone-containers-slick .slick-dots li button {
		width: 10px;
		height: 10px;
		padding: 0;
		font-size: 0;
		display: none;
	}

	.phone-containers-slick .slick-dots li button:before {
		content: "";
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: #fff;
		opacity: 0.5;
	}

	.phone-containers-slick .slick-dots li.slick-active button:before {
		opacity: 1;
	}
}