:root {
	--system-white: #fff;
	--system-body-text: #565656;
	--pink01: #b31e37;
	--green01: #269868;
	--green03: #e4f8e0;
	--pastel-pastel-pink: #ffd8ce;
	--pastel-pastel-pink1: #ff9183;
	--pastel-pastel-yellow: #ffd497;
	--body-font-family: "Prompt", sans-serif;
}
@font-face {
	font-family: "DDINCondensedBold";
	src: url("../fonts/DINCondensed/DDINCondensedBold.eot");
	src:
		url("../fonts/DINCondensed/DDINCondensedBold.eot") format("embedded-opentype"),
		url("../fonts/DINCondensed/DDINCondensedBold.woff2") format("woff2"),
		url("../fonts/DINCondensed/DDINCondensedBold.woff") format("woff"),
		url("../fonts/DINCondensed/DDINCondensedBold.ttf") format("truetype"),
		url("../fonts/DINCondensed/DDINCondensedBold.svg#DDINCondensedBold") format("svg");
}
* {
	box-sizing: border-box;
}
*:before,
*:after {
	box-sizing: border-box;
}
body {
	padding: 0;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body.modal-coffee-open {
	overflow: hidden !important;
	height: 100% !important;
}
.font-en {
	font-family: "DDINCondensedBold", sans-serif;
	font-weight: 700;
}
.font-th {
	font-family: "tannakone-condensed", sans-serif !important;
	font-weight: 500;
}
.coffee-cherry-page {
	position: relative;
	font-family: var(--body-font-family, "Prompt", sans-serif);
	font-size: 14px;
	color: var(--system-body-text, #565656);
	overflow: hidden;
	background: var(--pastel-pastel-cream, #f6f0e9);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	box-sizing: border-box;
}
.coffee-cherry-page .swiper-slide:focus-visible,
.coffee-cherry-page .swiper-slide:focus {
	outline: none;
}
.coffee-cherry-page h1,
.coffee-cherry-page h2,
.coffee-cherry-page p {
	margin: 0;
	padding: 0;
}
.coffee-cherry-page a {
	text-decoration: none;
}
.coffee-cherry-page .bg-bottom-right-page,
.coffee-cherry-page .bg-bottom-page {
	position: absolute;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: contain;
	bottom: 0;
}
.coffee-cherry-page .bg-bottom-right-page {
	width: 418px;
	height: 462px;
	right: 0;
	background-image: url(../img/bg-review-right-bottom.png);
	background-position: right bottom;
}
.coffee-cherry-page .bg-bottom-page {
	left: 0;
	width: 1013px;
	height: 246px;
	background-image: url(../img/bg-review-left-bottom.png);
	background-position: left bottom;
}

/* container */
.container-page {
	max-width: 1280px;
	width: 100%;
	padding-left: 30px;
	padding-right: 30px;
	margin: 0 auto;
}
.container-page.md {
	max-width: 1280px;
}
.sc-block {
	padding-top: 60px;
	padding-bottom: 60px;
}
.sc-topic {
	margin-bottom: 50px;
	overflow: hidden;
}
.sc-topic h2 {
	margin: 0;
	padding: 0;
	font-family: "DDINCondensedBold", sans-serif;
	font-weight: normal;
	font-size: 64px;
	line-height: 105%;
	text-transform: uppercase;
	color: var(--pink01, #b31e37);
}
.sc-topic h2.fontsize-lg {
	font-size: 90px;
}
.sc-topic p {
	font-family: var(--body-font-family, "Prompt", sans-serif);
	color: var(--system-body-text, #565656);
	font-size: 14px;
	font-weight: 400;
	line-height: 130%;
	max-width: 400px;
	margin: 0 auto;
}

.sc-coffee-benefits .sc-topic.text-align-center h2 {
	max-width: 416px;
	margin: 0 auto;
}
.sc-topic.text-align-center h2 {
	text-align: center;
}
.sc-topic.flexbox {
	display: flex;
}
.sc-topic.two-grid {
	display: grid;
	align-items: center;
	grid-template-columns: repeat(2, 1fr);
}
.sc-topic.space-between {
	justify-content: space-between;
}

/* Blog */
.blog-page {
	background: #f6f0e9;
}
.sc-blog-cover {
	position: relative;
	z-index: 12;
	width: 100%;
	height: 600px;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-clip-path: ellipse(85% 100% at 50% 0%);
	clip-path: ellipse(85% 100% at 50% 0%);
	/* background-image: url("../img/img-pano.jpg");
	background-size: cover;
	background-position: center; */
}

.article-background {
	position: absolute;
	width: 100%;
}
.article-background img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}
.hero-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.25);
}
.scroll-down-btn {
	position: absolute;
	left: 50%;
	bottom: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: all 0.3s ease;
	-webkit-animation: bounce 2s infinite;
	animation: bounce 2s infinite;
}
@-webkit-keyframes bounce {
	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateY(0) translateX(-50%);
	}
	40% {
		transform: translateY(-8px) translateX(-50%);
	}
	60% {
		transform: translateY(-4px) translateX(-50%);
	}
}
@keyframes bounce {
	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateY(0) translateX(-50%);
	}
	40% {
		transform: translateY(-8px) translateX(-50%);
	}
	60% {
		transform: translateY(-4px) translateX(-50%);
	}
}
.sc-blog-cover .pano-caption {
	position: relative;
	overflow: hidden;
	z-index: 2;
	text-align: center;
	color: var(--system-white, #fff);
	margin: 0 auto;
	display: grid;
	grid-gap: 40px;
	align-items: flex-end;
	justify-content: center;
	height: 100%;
	padding: 0 30px;
	align-content: flex-end;
	margin-bottom: 220px;
}
.sc-blog-cover .pano-caption h1 {
	font-family: "tannakone-condensed", sans-serif;
	color: var(--system-white, #fff);
	font-weight: 500;
	font-size: 52px;
	line-height: 100%;
	max-width: 500px;
	text-align: center;
}
.article-blog-wrap {
	position: relative;
	z-index: 10;
	padding-top: 150px;
	max-width: 630px;
	margin: 0 auto;
}
.article-blog {
	padding-top: 20px;
	color: var(--system-body-text, #565656);
}
.article-blog > p:not(:first-child) {
	margin-top: 26px;
}
.article-blog-share {
	position: relative;
	z-index: 10;
	display: flex;
	gap: 12px;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}
.article-blog-wrap .article-blog-share {
	margin-top: 100px;
}
.article-blog-share p {
	color: var(--pink01, #b31e37);
	font-family: var(--body-font-family, "Prompt", sans-serif);
	font-size: 12px;
	font-weight: 400;
	line-height: 130%;
}
.article-share-list {
	display: flex;
	gap: 20px;
	justify-content: center;
}
.article-blog-share button {
	border: 0;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	cursor: pointer;
	background: transparent;
}
.article-blog-share button:focus {
	outline: none;
}
.article-blog-share button:hover svg {
	opacity: 0.8;
}

.article-blog {
	font-family: var(--body-font-family, "Prompt", sans-serif);
	color: var(--system-body-text, #565656);
	font-weight: 400;
	font-size: 14px;
	line-height: 150%;
}
.article-blog :is(h2, h3, h4, h5, h6) {
	font-family: var(--body-font-family, "Prompt", sans-serif);
	color: var(--pink01, #b31e37);
	font-weight: 500;
	font-size: 16px;
	line-height: 130%;
}
.article-blog ul {
	padding-left: 1em;
}
.article-blog ol {
	padding-left: 0;
	list-style-position: inside;
}
.article-blog :is(picture, figure) {
	display: block;
	width: 100%;
	height: auto;
}
.article-blog :is(img, video) {
	max-width: 100%;
}
.article-blog > * {
	margin: 20px 0;
}
.article-blog > *:first-child {
	margin-top: 0;
}
.article-blog > *:last-child {
	margin-bottom: 0;
}

.sc-coffee-benefits {
	position: relative;
}
.sc-coffee-benefits:before,
.sc-coffee-benefits:after {
	content: "";
	position: absolute;
	pointer-events: none;
	background-size: contain;
	background-repeat: no-repeat;
}
.sc-coffee-benefits:before {
	left: 0;
	bottom: -300px;
	width: 330px;
	height: 100%;
	background-image: url(../img/obj-benefits-left.png);
	background-position: left bottom;
}
.sc-coffee-benefits:after {
	right: 0;
	bottom: 0;
	width: 124px;
	height: 100%;
	background-image: url(../img/obj-benefits-right.png);
	background-position: right bottom;
}
.sc-coffee-benefits .grid-item {
	max-width: 1064px;
	margin: 0 auto;
	display: grid;
	grid-gap: 30px;
	grid-template-columns: repeat(3, 1fr);
}
.sc-coffee-benefits .video-wrap {
	position: relative;
	z-index: 11;
	max-width: 1064px;
	margin: 30px auto 60px;
	overflow: hidden;
	border-radius: 30px;
	box-shadow: 0 0 20px 0 #ff9183;
}
.sc-coffee-benefits .video-wrap img {
	display: flex;
	width: 100%;
}
.sc-coffee-benefits .item-box-content {
	max-width: 230px;
	margin: 0 auto;
}
.sc-coffee-benefits .item-box-content .icon-item {
	margin: 0 auto;
}
.sc-coffee-benefits .item-box-content .box-inner {
	display: flex;
	grid-gap: 12px;
	flex-direction: column;
}
.sc-coffee-benefits .item-box-content h3,
.sc-coffee-benefits .item-box-content p {
	margin: 0;
	padding: 0;
}
.sc-coffee-benefits .item-box-content h3 {
	color: var(--pink01, #b31e37);
	text-align: center;
	font-family: var(--body-font-family, "Prompt", sans-serif);
	font-size: 20px;
	font-weight: 500;
	line-height: 130%;
	text-transform: uppercase;
}
.sc-coffee-benefits .item-box-content p {
	color: var(--system-body-text, #565656);
	text-align: center;
	font-family: var(--body-font-family, "Prompt", sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 130%;
}

.sc-coffee-media-full {
	width: 100%;
	position: relative;
	overflow: hidden;
}
.sc-coffee-media-full :is(video, img, picture, figure) {
	display: block;
	width: 100%;
	height: auto;
}

.block-mobile {
	display: contents;
}
.nav-coffee {
	position: relative;
	z-index: 100;
	margin-bottom: 60px;
}
.nav-coffee ul {
	display: flex;
	align-items: center;
	gap: 10px 20px;
	margin: 0;
	padding: 0;
}
.nav-coffee li {
	flex: 1;
	display: flex;
	align-items: center;
}
.nav-coffee a {
	flex: 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 112px;
	padding: 10px 25px 10px 45px;
	list-style: none;
	color: var(--system-body-text, #565656);
	font-family: "DDINCondensedBold", sans-serif;
	font-size: 32px;
	font-weight: normal;
	line-height: 100%;
	text-transform: uppercase;
	border-radius: 55px;
	background: var(--pastel-pastel-green, #e1e0c2);
	box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.08);
	transition: 0.3s ease;
}
.nav-coffee a:hover {
	background: var(--pastel-pastel-dark-green, #c3cd9e);
	box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.08);
}
.nav-coffee a svg {
	transform: rotate(-20deg);
	transition: transform 0.3s ease;
}
.nav-coffee a:hover svg {
	transform: rotate(0deg);
	transition: transform 0.3s ease;
}
.nav-coffee a:hover svg {
	transform: rotate(0deg);
	transition: rotate 0.3s ease;
}
.nav-coffee a img {
	height: 92px;
}
.nav-coffee a h3 {
	margin: 0;
	padding: 0;
	display: flex;
	gap: 20px;
	align-items: center;
	font-weight: normal;
}
.nav-coffee a h3 span {
	display: flex;
	padding-top: 10px;
}

.sc-coffee-product {
	position: relative;
	padding-top: 100px;
}
.coffee-product-group {
	position: relative;
}
.sc-coffee-product:before {
	content: "";
	position: absolute;
	width: 374px;
	height: 603px;
	top: 220px;
	right: 0;
	z-index: 1;
	pointer-events: none;
	background-image: url(../img/obj-product-right.png);
	background-size: contain;
	background-position: right center;
	background-repeat: no-repeat;
}
.sc-coffee-product .container-page {
	position: relative;
	z-index: 10;
}
.sc-coffee-product .cc-block-wrap {
	border-radius: 64px;
	background: var(--pastel-pastel-pink, #ffd8ce);
}
.sc-coffee-product .cc-block-wrap.cc-cascara {
	position: relative;
	margin-bottom: 200px;
	padding: 100px 100px 0 100px;
}
.sc-coffee-product .cc-block-wrap.cc-cascara:after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: 500px;
	height: 640px;
	z-index: 1;
	pointer-events: none;
	border-radius: 64px;
	background-image: url(../img/bg-cascara-bottom.png);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: contain;
}

.sc-coffee-product .cc-grid-block {
	position: relative;
	z-index: 2;
	display: grid;
	align-items: flex-start;
	grid-gap: 60px;
	grid-template-columns: repeat(2, 1fr);
}
.sc-coffee-product .cc-product-img {
	border-radius: 36px;
	padding: 30px;
	background: #f6f0e9;
}
.sc-coffee-product .cc-product-img:after {
	content: "";
	display: flex;
	aspect-ratio: 1/1;
}
.sc-coffee-product .cc-product-img img {
	width: auto;
	height: 100%;
	display: block;
	margin: 0 auto;
}
.sc-coffee-product .cc-block-content {
	max-width: 470px;
	display: grid;
	grid-gap: 40px;
}
.sc-coffee-product .cc-product-header h2 {
	color: var(--pink01, #b31e37);
	font-family: "DDINCondensedBold", sans-serif;
	font-size: 64px;
	font-weight: normal;
	line-height: 100%;
	text-transform: uppercase;
}
.sc-coffee-product .cc-product-header .subtitle {
	margin: 0;
	padding: 0;
	display: none;
	color: var(--system-body-text, #565656);
	font-family: "DDINCondensedBold", sans-serif;
	font-size: 32px;
	font-weight: normal;
	line-height: 150%;
	text-transform: uppercase;
}
.sc-coffee-product .cc-product-header .subtitle.active {
	display: block;
}
.sc-coffee-product .box-content h3 {
	margin: 0 0 10px 0;
	padding: 0;
	color: var(--pink01, #b31e37);
	font-family: var(--body-font-family, "Prompt", sans-serif);
	font-size: 20px;
	font-weight: 500;
	line-height: 130%;
	text-transform: uppercase;
}

.sc-coffee-product .box-content {
	color: var(--system-body-text, #565656);
	font-family: var(--body-font-family, "Prompt", sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 130%;
}
.sc-coffee-product .box-content ul {
	margin: 0 0 20px 0;
	padding: 0;
	display: grid;
	grid-gap: 6px;
}
.sc-coffee-product .box-content ul li {
	position: relative;
	list-style: none;
	padding-left: 24px;
}
.sc-coffee-product .box-content ul li::before {
	content: "";
	width: 16px;
	height: 16px;
	position: absolute;
	left: 0;
	background-image: url(../img/task-alt.png);
	background-repeat: no-repeat;
	background-size: cover;
}
.cc-block-img {
	position: relative;
}
.sc-coffee-product .size-text {
	margin: 16px 0 6px 0;
	padding: 0;
	color: var(--system-body-text, #565656);
	font-family: var(--body-font-family, "Prompt", sans-serif);
	font-size: 16px;
	font-weight: 500;
	line-height: 130%;
}
.sc-coffee-product .text-link {
	color: var(--pink01, #b31e37);
	text-align: center;
	font-family: var(--body-font-family, "Prompt", sans-serif);
	font-size: 16px;
	font-weight: 500;
	line-height: 130%;
}
.sc-coffee-product .text-link:hover {
	text-decoration: underline;
}
.size-buttons {
	display: flex;
	align-items: center;
	gap: 12px;
}
.size-btn {
	min-width: 70px;
	padding: 8px 10px 6px;
	background: #fff;
	color: var(--system-body-text, #565656);
	font-family: var(--body-font-family, "Prompt", sans-serif);
	font-size: 16px;
	font-weight: 500;
	line-height: 130%;
	cursor: pointer;
	border-radius: 6px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	background: var(--pastel-pastel-cream, #f6f0e9);
	transition: all 0.25s ease;
}
.size-btn:hover {
	background: var(--pink01, #b31e37);
}
.size-btn.active {
	background: var(--pink01, #b31e37);
	border: 1px solid rgba(0, 0, 0, 0.2);
	color: var(--system-white, #fff);
}
.cc-block-img {
	position: relative;
}
.product-img {
	display: none;
	width: auto;
	height: 100%;
	margin: 0 auto;
	-o-object-fit: cover;
	object-fit: cover;
}

.product-img.active,
.cascara-product-img.active {
	display: block;
	-webkit-animation: productFade 0.35s ease;
	animation: productFade 0.35s ease;
}

@-webkit-keyframes productFade {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes productFade {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.group-btn {
	display: flex;
	gap: 10px;
	align-items: center;
}
.btn {
	width: 166px;
	height: 50px;
	color: var(--system-white, #fff);
	display: flex;
	gap: 10px;
	justify-content: center;
	padding: 0 20px 0 20px;
	text-align: center;
	font-family: var(--body-font-family, "Prompt", sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 130%;
	text-align: center;
	display: flex;
	align-items: center;
	border-radius: 40px;
	background: var(--pink01, #b31e37);
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}
.btn strong {
	font-weight: 500;
}
.btn:hover {
	box-shadow: 0 0 15px 3px #ff9183;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}
.btn svg {
	display: flex;
}
.btn-contact {
	padding: 0 4px 0 20px;
	font-weight: 400;
	justify-content: space-between;
	background: var(--pink02, #e8827c);
}

.btn-social {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
	padding: 0 30px;
	border-radius: 65px;
}
.btn-lazada {
	padding-top: 2px;
	background: #000083;
}
.btn-shopee {
	padding-bottom: 3px;
	background: #ea501f;
}
.btn-tiktok {
	padding-bottom: 2px;
	background: #000;
}
.coffee-product-howtoeat {
	position: relative;
	z-index: 10;
	overflow: hidden;
	padding: 60px 0;
	margin: 0 -100px;
}
.coffee-product-howtoeat h2 {
	margin: 0 0 40px 0;
	padding: 0;
	color: var(--pink01, #b31e37);
	text-align: center;
	font-family: "DDINCondensedBold", sans-serif;
	font-size: 52px;
	font-weight: normal;
	line-height: 100%;
	text-transform: uppercase;
}
.swiper-howtoeat {
	overflow: visible;
}
.item-howtoeat-slide .card-howtoeat {
	position: relative;
	width: 100%;
	height: 345px;
	border-radius: 32px;
	padding: 24px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.08);
	margin-bottom: 20px;
	opacity: 0.5;
	pointer-events: none;
	transition:
		transform 0.3s ease,
		opacity 0.3s ease;
}
.item-howtoeat-slide .card-howtoeat .box-img {
	position: relative;
	width: 100%;
	border-radius: 22px;
	overflow: hidden;
	margin: 0 auto;
	display: block;
}
.item-howtoeat-slide .card-howtoeat .box-img:after {
	content: "";
	display: flex;
	aspect-ratio: 3 / 2;
}
.item-howtoeat-slide .card-howtoeat .box-img img,
.item-howtoeat-slide .card-howtoeat .box-img video {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	-o-object-fit: cover;
	object-fit: cover;
}
.item-howtoeat-slide .caption-howtoeat {
	display: flex;
	padding: 18px 26px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4px;
	align-self: stretch;
	border-radius: 52px;
	box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.08);
	opacity: 0;
	transition: all 0.3s;
}
.item-howtoeat-slide .caption-howtoeat h3,
.item-howtoeat-slide .caption-howtoeat p {
	margin: 0;
	padding: 0;
	font-family: var(--body-font-family, "Prompt", sans-serif);
	color: var(--pink01, #b31e37);
}
.item-howtoeat-slide .caption-howtoeat h3 {
	font-size: 20px;
	font-weight: 500;
	line-height: 100%;
	text-transform: uppercase;
}
.item-howtoeat-slide .caption-howtoeat p {
	font-size: 14px;
	font-weight: 400;
	line-height: 130%;
}
.item-howtoeat-slide {
	padding: 8px;
}
.item-howtoeat-slide .open-popup-link {
	pointer-events: none;
}
.swiper-slide.item-howtoeat-slide.swiper-slide-active .caption-howtoeat {
	opacity: 1;
}
.swiper-slide.item-howtoeat-slide.swiper-slide-active .card-howtoeat {
	opacity: 1;
}
.swiper-howtoeat .swiper-wrapper.show-all-captions .item-howtoeat-slide {
	opacity: 1 !important;
	transform: scale(1) !important;
	pointer-events: all;
}
.swiper-slide.item-howtoeat-slide.swiper-slide-active .open-popup-link {
	pointer-events: all;
}
.swiper-howtoeat .swiper-wrapper.show-all-captions .item-howtoeat-slide .card-howtoeat,
.swiper-howtoeat .swiper-wrapper.show-all-captions .item-howtoeat-slide .caption-howtoeat {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(0) !important;
	pointer-events: all;
}
.clip-organic-blob {
	align-items: center !important;
	background: var(--pastel-pastel-pink1, #ff9183);
}
.clip-organic-blob .box-img img {
	width: 306.085px;
	height: 241px;
	-o-object-fit: cover;
	object-fit: cover;
	border-radius: 0;
	-webkit-clip-path: path("M213.2 0C264.49 0 306.085 32.71 306.085 73.07C306.085 81.13 304.42 88.88 301.36 96.13C295.07 111.02 295.07 129.76 301.36 144.64C304.42 151.89 306.085 159.65 306.085 167.71C306.085 208.06 264.49 241 213.2 241C197 241 181.75 237.73 168.49 231.99C158.69 227.75 147.4 227.75 137.6 231.99C124.34 237.73 109.09 241 92.89 241C41.59 241 0 208.06 0 167.71C0 159.65 1.66 151.89 4.72 144.64C11.02 129.76 11.02 111.02 4.72 96.13C1.66 88.88 0 81.13 0 73.07C0 32.71 41.59 0 92.89 0C109.09 0 124.34 3.27 137.6 9.01C147.4 13.25 158.69 13.25 168.49 9.01C181.75 3.27 197 0 213.2 0Z");
	clip-path: path("M213.2 0C264.49 0 306.085 32.71 306.085 73.07C306.085 81.13 304.42 88.88 301.36 96.13C295.07 111.02 295.07 129.76 301.36 144.64C304.42 151.89 306.085 159.65 306.085 167.71C306.085 208.06 264.49 241 213.2 241C197 241 181.75 237.73 168.49 231.99C158.69 227.75 147.4 227.75 137.6 231.99C124.34 237.73 109.09 241 92.89 241C41.59 241 0 208.06 0 167.71C0 159.65 1.66 151.89 4.72 144.64C11.02 129.76 11.02 111.02 4.72 96.13C1.66 88.88 0 81.13 0 73.07C0 32.71 41.59 0 92.89 0C109.09 0 124.34 3.27 137.6 9.01C147.4 13.25 158.69 13.25 168.49 9.01C181.75 3.27 197 0 213.2 0Z");
}
.clip-organic-blob .box-img:after {
	aspect-ratio: inherit;
	padding-top: 80%;
}
.clip-organic-blob + .caption-howtoeat {
	background: #fff;
}
.clip-rectangle {
	background: var(--pastel-pastel-dark-green, #c3cd9e);
}
.clip-rectangle + .caption-howtoeat {
	background: var(--pastel-pastel-yellow, #ffd497);
}
.clip-circle {
	align-items: center !important;
	background: var(--pastel-pastel-yellow, #ffd497);
}
.clip-circle .box-img {
	width: 280px !important;
	height: 280px !important;
	border-radius: 50% !important;
	overflow: hidden;
	margin: 0 auto;
	display: block;
}
.clip-circle .box-img:after {
	aspect-ratio: 1/1 !important;
}
.clip-circle + .caption-howtoeat {
	background: var(--pastel-pastel-pink, #ffd8ce);
}

.swiper-blog .swiper-wrapper.is-centered {
	justify-content: center;
}
.slick-slider {
	margin-bottom: 0;
}
.cc-product-img {
	position: relative;
}
.cc-product-img .product-img {
	display: none;
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
}

.cc-product-img .product-img.active {
	display: block;
}
.cascara-product-img {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	-o-object-fit: cover;
	object-fit: cover;
}
.cascara-product-img img {
	width: auto;
	height: 100%;
	position: relative !important;
}
.cascara-product-img.active {
	display: block;
}

.sc-coffee-product .product-btn {
	display: none;
}
.sc-coffee-product .product-btn.active {
	display: flex;
	align-items: center;
}
.sc-coffee-product .product-btn-social {
	display: none;
}
.sc-coffee-product .product-btn-social.active {
	display: flex;
}
.select-box-product {
	display: flex;
	gap: 8px;
	align-items: center;
}
.select-box-product .product-items {
	width: 76px;
	height: 76px;
	cursor: pointer;
	border-radius: 5.023px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	background: #f6f0e9;
	transition: background-color 0.3s ease;
}
.select-box-product .product-items:focus {
	outline: none;
}
.select-box-product .product-items.original.active {
	background: var(--pink02, #e8827c);
}
.select-box-product .product-items.less.active {
	background: var(--pastel-pastel-dark-green, #c3cd9e);
}
.select-box-product button img {
	width: auto;
	height: 68px;
	margin: 0 auto;
	display: block;
}
.cc-shot {
	padding: 100px 100px 60px 100px;
}
.cc-shot.bg-color-original {
	background: var(--pastel-pastel-pink, #ffd8ce);
}
.cc-shot.bg-color-less {
	background: #e1e0c2;
}
.cc-shot.bg-color-original .cc-product-img .product-img img {
	transform: rotate(20deg);
}
.cc-shot.bg-color-original .cc-product-header h2,
.cc-shot.bg-color-original .cc-product-header h3,
.cc-shot.bg-color-original .box-content,
.cc-shot.bg-color-original .box-content h3,
.cc-shot.bg-color-original .text-link {
	color: var(--pink01, #b31e37);
}
.cc-shot.bg-color-original {
	position: relative;
	overflow: hidden;
}
.cc-shot.bg-color-original:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 500px;
	height: 640px;
	z-index: 1;
	pointer-events: none;
	background-image: url(../img/bg-original.png);
	background-repeat: no-repeat;
	background-size: contain;
}
.cc-shot.bg-color-original:after {
	content: "";
	position: absolute;
	bottom: 0;
	right: -100px;
	width: 500px;
	height: 640px;
	z-index: 1;
	pointer-events: none;
	background-image: url(../img/bg-original-bottom.png);
	background-repeat: no-repeat;
	background-size: contain;
}
.cc-shot.bg-color-original .box-content ul li::before {
	background-image: url(../img/task-alt-red.png);
}

/* Less */
.cc-shot.bg-color-less {
	position: relative;
	overflow: hidden;
}
.cc-shot.bg-color-less .btn {
	background: var(--green01, #269868);
}
.cc-shot.bg-color-less:before,
.cc-shot.bg-color-less:after {
	content: "";
	position: absolute;
	z-index: 1;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: contain;
}
.cc-shot.bg-color-less:before {
	top: 0;
	left: 0;
	width: 500px;
	height: 640px;
	background-image: url(../img/bg-less.png);
}
.cc-shot.bg-color-less:after {
	bottom: 0;
	right: -100px;
	width: 500px;
	height: 640px;
	background-image: url(../img/bg-less-bottom.png);
}
.cc-shot.bg-color-less .btn.btn-contact {
	background: var(--green03, #e4f8e0);
	color: #269868;
}
.cc-shot.bg-color-less .btn:hover {
	box-shadow: 0 0 10px 3px #c3cd9e;
}
.cc-shot.bg-color-less .cc-product-header h2,
.cc-shot.bg-color-less .box-content h3,
.cc-shot.bg-color-less .text-link {
	color: var(--system-body-text, #565656);
}
.cc-shot.bg-color-less .cc-product-img .product-img img {
	transform: rotate(-13.337deg) scale(0.88);
}
.cc-shot.bg-color-original .cc-product-img .product-img img {
	transform: rotate(20deg) scale(0.88);
}
.sc-coffee-product .cc-product-img img {
	transform: scale(0.88);
}
.swiper-container-wrapper {
	width: 100%;
	overflow: hidden;
}
.swiper-howtoeat.swiper-wrapper.is-centered {
	display: flex !important;
	justify-content: center !important;
	transform: none !important;
	width: 100% !important;
}
.swiper-howtoeat .item-howtoeat-slide {
	width: 370px;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	transition:
		transform 0.3s ease,
		opacity 0.3s ease;
}
.swiper-howtoeat .item-howtoeat-slide a {
	width: 100%;
}
.cascara-modal-video {
	position: relative;
	width: auto;
	max-width: 1056px;
	margin: 0 auto;
	transition: 1s all;
}
.cascara-modal-content {
	position: relative;
}
.cascara-modal-content video {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	pointer-events: all;
}
.cascara-modal-content .popup-video {
	width: 100%;
}

/* How To Eat Modal */
.howtoeat-modal {
	position: relative;
	width: auto;
	max-width: 1056px;
	height: 600px;
	margin: 0 auto;
	transition: 1s all;
}
.howtoeat-modal-grid {
	display: grid;
	height: 100%;
	border-radius: 32px;
	overflow: hidden;
	background: var(--pastel-pastel-dark-green, #c3cd9e);
	grid-template-columns: 400px 1fr;
}
.howtoeat-modal-img {
	flex: 1;
	position: relative;
	z-index: 10;
}
.howtoeat-modal-img .clipped-image {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-webkit-clip-path: ellipse(80% 60% at 20% 50%);
	clip-path: ellipse(80% 60% at 20% 50%);
}
.howtoeat-modal-content {
	position: relative;
	padding: 40px 40px 30px 60px;
	color: var(--system-white, #fff);
	font-family: var(--body-font-family, "Prompt", sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 130%;
}
.howtoeat-modal-content:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: -150px;
	width: 372px;
	height: 275px;
	z-index: 9;
	pointer-events: none;
	background-image: url(../img/bg-modal-content.png);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: contain;
}
.howtoeat-modal-content h2 {
	margin: 0 0 10px 0;
	color: var(--system-body-text, #565656);
	font-family: "tannakone-condensed", sans-serif;
	font-size: 52px;
	font-weight: 500;
	line-height: 100%;
	text-transform: uppercase;
}
.mfp-fade.mfp-bg.mfp-ready {
	opacity: 100% !important;
	background: rgba(0, 0, 0, 0.85);
}
.howtoeat-modal-content h4 {
	margin: 0 0 8px 0;
	padding: 0;
	color: var(--system-body-text, #565656);
	font-family: "tannakone-condensed", sans-serif;
	font-size: 32px;
	font-weight: 500;
	line-height: 100%;
}
.howtoeat-modal-content p {
	margin: 0 0 20px 0;
	padding: 0;
	color: var(--system-white, #fff);
	font-family: var(--body-font-family, "Prompt", sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 140%;
}
.howtoeat-modal-content ol,
.howtoeat-modal-content ul {
	margin: 0 0 20px 24px;
	padding: 0;
}
.howtoeat-modal-content ol li,
.howtoeat-modal-content ul li {
	line-height: 140%;
}
.howtoeat-modal-content .box-content {
	max-height: 420px;
	min-height: 420px;
	overflow-y: auto;
	padding-top: 5px;
	margin-bottom: 30px;
}
.howtoeat-modal-content .article-blog-share {
	flex-direction: row;
	align-items: center;
	gap: 20px;
	justify-content: flex-start;
}
.howtoeat-modal-content .article-blog-share p {
	margin: 0;
	color: var(--system-body-text, #565656);
}
/* Slide Product Media */
.sc-coffee-product-media {
	position: relative;
	top: 60px;
	z-index: 10;
}
.sc-coffee-product-media:after {
	content: "";
	width: 110px;
	height: 100px;
	position: absolute;
	bottom: -92px;
	left: -14px;
	background-image: url(../img/dot-red-pink.png);
	background-size: contain;
	background-repeat: no-repeat;
	pointer-events: none;
}
.cc-card-cascara-img {
	padding: 30px 30px 80px 30px;
	border-radius: 32px;
	background: var(--pastel-pastel-dark-green, #c3cd9e);
	box-shadow: 0 0 15px 3px #ff9183;
	transform: rotate(-3deg);
	transition: transform 0.3s ease-out;
}
.cc-card-cascara-img:hover {
	transform: rotate(0deg);
}
.cc-card-cascara-img .box-img {
	width: 350px;
	height: 350px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto;
}
.cc-card-cascara-img .box-img img {
	width: 100%;
	height: 100%;
	display: flex;
	-o-object-fit: cover;
	object-fit: cover;
	margin: 0 auto;
}
.cc-card-cascara-img .box-caption h3 {
	color: var(--pink01, #b31e37);
	text-align: center;
	font-family: var(--body-font-family, "Prompt", sans-serif);
	font-size: 20px;
	font-weight: 500;
	line-height: 130%;
	text-transform: uppercase;
}
.cc-card-cascara-video {
	position: relative;
	top: 80px;
	padding: 20px;
	display: flex;
	gap: 20px;
	margin-left: -20px;
	border-radius: 32px;
	transform: rotate(6deg);
	background: var(--pastel-pastel-yellow, #ffd497);
	transition: transform 0.3s ease-out;
}
.cc-card-cascara-video a {
	position: relative;
	display: flex;
	gap: 20px;
	width: 100%;
	flex-direction: column;
}
.cc-card-cascara-video:hover {
	transform: rotate(9deg);
	transition: transform 0.3s ease-out;
}
.cc-card-cascara-video .box-video {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
}
.cc-card-cascara-video .icon-play {
	position: absolute;
	width: 100px;
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 50%;
	left: 50%;
	padding-left: 10px;
	z-index: 100;
	transform: translate(-50%, -50%);
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.4);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}
.cc-card-cascara-video .box-video:after {
	content: "";
	aspect-ratio: 16/9;
	display: flex;
	position: relative;
}
.cc-card-cascara-video .box-video img {
	width: 100%;
	height: 100%;
	display: flex;
	-o-object-fit: cover;
	object-fit: cover;
	position: absolute;
	top: 0;
}
.cc-card-cascara-video .box-caption h3,
.cc-card-cascara-video .box-caption p {
	text-align: center;
}
.cc-card-cascara-video .box-caption h3 {
	margin: 0;
	padding: 0;
	color: var(--pink01, #b31e37);
	font-size: 20px;
	font-weight: 500;
	line-height: 130%;
	text-transform: uppercase;
}
.cc-card-cascara-video .box-caption {
	display: flex;
	gap: 8px;
	flex-direction: column;
	max-width: 400px;
	margin: 0 auto;
}
.cc-card-cascara-video .box-caption p {
	color: var(--system-body-text, #565656);
	font-family: var(--body-font-family, "Prompt", sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 130%;
}
.swiper-media .slide-cascara-img {
	width: 412px;
}
.swiper-media .slide-cascara-video {
	width: 630px;
}
/* Slide Product Media */

/* Modal */

.mfp-container .mfp-close {
	top: -40px;
	right: 0;
	color: var(--system-white, #fff);
}
.mfp-close {
	display: none !important;
}
.modal-icon-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid #d9d9d9;
	position: absolute;
	right: -60px;
	top: 0;
	background: transparent;
	cursor: pointer;
}
.modal-icon-close:focus {
	outline: none;
}
.mfp-fade.mfp-bg {
	opacity: 0;
	transition: all 0.15s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
	opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
	opacity: 0;
}
.mfp-fade.mfp-wrap .mfp-content {
	opacity: 0;
	transition: all 0.4s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
}

/* Hero */
.sc-coffee-hero {
	position: relative;
	display: flex;
	align-items: center;
	background-color: #f6f0e9;
	background-image: url(../img/hero-obj-bottom-right.png);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: 250px auto;
}
.sc-coffee-hero:before,
.sc-coffee-hero:after {
	content: "";
	position: absolute;
	background-repeat: no-repeat;
	pointer-events: none;
}
.sc-coffee-hero:before {
	width: 142px;
	height: 100%;
	right: 0;
	background-image: url(../img/hero-obj-top-right.png);
	background-position: right top;
	background-size: contain;
}
.sc-coffee-hero:after {
	width: 101px;
	height: 100%;
	left: 0;
	bottom: 0;
	background-image: url(../img/hero-obj-bottom-left.png);
	background-position: left bottom;
	background-size: contain;
}
.sc-coffee-hero .grid-block-hero {
	display: grid;
	grid-gap: 40px;
	align-items: center;
	grid-template-columns: 3fr 4fr;
}
.sc-coffee-hero .coffee-content {
	position: relative;
	z-index: 5;
	flex-direction: column;
	overflow: hidden;
}
.sc-coffee-hero .coffee-brand {
	display: flex;
	margin-bottom: 20px;
	overflow: hidden;
}
.sc-coffee-hero .title-hero {
	overflow: hidden;
	margin-bottom: 30px;
}
.sc-coffee-hero .coffee-content h1 {
	color: var(--pink01, #b31e37);
	font-family: "DDINCondensedBold", sans-serif;
	font-weight: normal;
	font-size: 170px;
	line-height: 90%;
	overflow: hidden;
	text-transform: uppercase;
}
.sc-coffee-hero .coffee-content h3 {
	margin: 0 0 10px 0;
	color: var(--pink01, #b31e37);
	font-size: 20px;
	font-weight: 500;
	line-height: 130%;
	text-transform: uppercase;
}
.sc-coffee-hero .coffee-content p {
	color: var(--system-body-text, #565656);
	font-size: 14px;
	font-weight: 400;
	line-height: 130%;
}
.sc-coffee-hero .coffee-product {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sc-coffee-hero .product-bg {
	position: absolute;
	display: flex;
	flex-direction: column;
	width: 100%;
	background-image: url(../img/product-bgvector.png);
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
}
.sc-coffee-hero .img-product img {
	display: block;
	width: 100%;
	height: auto;
	-o-object-fit: cover;
	object-fit: cover;
	z-index: 10;
	opacity: 0;
	transform: translateY(0);
	-webkit-animation:
		productFadeIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards,
		productFloat 5s ease-in-out 1.3s infinite;
	animation:
		productFadeIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards,
		productFloat 5s ease-in-out 1.3s infinite;
}
@-webkit-keyframes productFadeIn {
	0% {
		opacity: 0;
		transform: translateY(70px) scale(0.92);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}
@keyframes productFadeIn {
	0% {
		opacity: 0;
		transform: translateY(70px) scale(0.92);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}
@-webkit-keyframes productFloat {
	0% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(-14px) rotate(-1deg);
	}
	100% {
		transform: translateY(0) rotate(0deg);
	}
}
@keyframes productFloat {
	0% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(-14px) rotate(-1deg);
	}
	100% {
		transform: translateY(0) rotate(0deg);
	}
}
.sc-coffee-hero .ani-caption {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-direction: column;
	margin: 0 auto;
	transform: rotate(-4deg);
}
.sc-coffee-hero .ani-caption .text-hero {
	width: 218px;
	-webkit-animation: rotateProduct 3s ease-in-out infinite;
	animation: rotateProduct 3s ease-in-out infinite;
}
.sc-coffee-hero .ani-caption .arw-hero {
	width: 61px;
	margin: 0 auto;
}
@-webkit-keyframes rotateProduct {
	0% {
		transform: rotate(0deg);
	}

	50% {
		transform: rotate(4deg);
	}

	100% {
		transform: rotate(0deg);
	}
}
@keyframes rotateProduct {
	0% {
		transform: rotate(0deg);
	}

	50% {
		transform: rotate(4deg);
	}

	100% {
		transform: rotate(0deg);
	}
}
@-webkit-keyframes rotateText {
	0% {
		transform: rotate(0deg);
	}

	50% {
		transform: rotate(6deg);
	}

	100% {
		transform: rotate(0deg);
	}
}
@keyframes rotateText {
	0% {
		transform: rotate(0deg);
	}

	50% {
		transform: rotate(6deg);
	}

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

.sc-coffeecherry-parallaximg {
	position: relative;
	overflow: hidden;
	height: 100vh;
}
.sc-coffeecherry-parallaximg .parallaximg-bgimg {
	position: relative;
	height: 100%;
}
.sc-coffeecherry-parallaximg .coverimg {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 400;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.sc-coffeecherry-parallaximg .coverimg.mobile {
	display: none;
}
.ani-obj-growing-m {
	display: none;
}
/* Growing Forward */
.sc-growing-forward {
	position: relative;
	padding: 140px 0;
	min-height: 500px;
}
.sc-growing-forward:before {
	content: "";
	position: absolute;
	z-index: 9;
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
}
.sc-growing-forward:before {
	width: 350px;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9;
	background-image: url(../img/bg-growing-forward.png);
	background-position: left top;
}
.sc-growing-forward .container-page {
	position: relative;
	z-index: 100;
}
.sc-growing-forward .wrap-growing {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
	width: 100%;
	margin: 0 auto;
	align-items: center;
}
.sc-growing-forward .image-container {
	position: relative;
	flex: 1;
	display: flex;
	justify-content: center;
}
.sc-growing-forward .cover-cherry {
	width: 490px;
	padding-top: 40px;
	position: relative;
}
.sc-growing-forward .ani-label {
	display: flex;
	align-items: flex-start;
	position: absolute;
	right: -70px;
	bottom: 26px;
	z-index: 100;
}
.sc-growing-forward .ani-label .arw-up {
	width: 80px;
}
.sc-growing-forward .ani-label .text-coffee-cherry {
	width: 136px;
	align-items: flex-end;
	position: relative;
	top: 55px;
	transform: rotate(-6deg);
	-webkit-animation: rotateText 3s ease-in-out infinite;
	animation: rotateText 3s ease-in-out infinite;
}
.sc-growing-forward .main-img {
	position: relative;
	width: 100%;
	max-width: 291px;
	height: auto;
	margin: 0 auto;
	display: block;
	z-index: 11;
}
.sc-growing-forward .main-img-cover {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
}
.sc-growing-forward .main-img-cover {
	width: 100%;
}
.sc-growing-forward .dot {
	position: absolute;
	top: var(--dot-top);
	left: var(--dot-left);
	z-index: 11;
	width: 38px;
	height: 38px;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: all 0.3s ease;
	cursor: pointer;
}
.sc-growing-forward .dot::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	opacity: 100%;
	background-color: var(--system-white, #fff);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: 0.3s ease;
}
.sc-growing-forward .info-card {
	display: flex;
	align-items: center;
	gap: 30px;
	padding: 15px 20px 15px 40px;
	border-radius: 20px;
	cursor: pointer;
	border-radius: 24px;
	background: var(--pastel-pastel-pink, #ffd8ce);
	box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.08);
	transition: 0.3s ease;
}
.sc-growing-forward .info-card-icon {
	width: 50px;
	text-align: center;
}
.sc-growing-forward .info-card img {
	width: auto;
	height: 60px;
	margin: 0 auto;
	-o-object-fit: contain;
	object-fit: contain;
}
.sc-growing-forward .info-content {
	display: flex;
	gap: 4px;
	flex-direction: column;
}
.sc-growing-forward .info-content h4,
.sc-growing-forward .info-content p {
	margin: 0;
	padding: 0;
	font-family: var(--body-font-family, "Prompt", sans-serif);
	line-height: 130%;
	transition: color 0.3s ease;
}
.sc-growing-forward .info-content h4 {
	color: var(--pink01, #b31e37);
	font-size: 20px;
	font-weight: 500;
	text-transform: uppercase;
}
.sc-growing-forward .info-content p {
	color: var(--system-body-text, #565656);
	font-size: 14px;
	font-weight: 400;
}

@media (hover: hover) and (pointer: fine) {
	.sc-growing-forward .info-list .info-card:hover {
		opacity: 0.5;
	}
	.sc-growing-forward .info-list:hover ~ .sc-growing-forward .image-container .dot,
	.sc-growing-forward .image-container:hover .dot {
		opacity: 0.5;
	}
}

.sc-growing-forward .info-card.is-active,
.sc-growing-forward .info-card:hover {
	opacity: 1 !important;
	background-color: var(--pastel-pastel-dark-green, #c3cd9e);
}
.sc-growing-forward .info-card.is-active .info-content h4,
.sc-growing-forward .info-card:hover .info-content h4 {
	color: var(--system-body-text, #565656);
}
.sc-growing-forward .info-card.is-active .info-content p,
.sc-growing-forward .info-card:hover .info-content p {
	color: var(--system-white, #fff);
}
.sc-growing-forward .dot.is-active,
.sc-growing-forward .dot:hover {
	opacity: 1 !important;
	transform: translate(-50%, -50%) scale(1.2);
}
.sc-growing-forward .dot.is-active::after,
.sc-growing-forward .dot:hover::after {
	background-color: var(--pink01, #b31e37);
}
/* Blog */
.sc-coffee-blog-related {
	position: relative;
	overflow: hidden;
	padding-top: 120px;
	padding-bottom: 40px;
}
.sc-coffee-blog-related.blog-inner-page {
	padding-top: 80px;
}
.sc-coffee-blog-related .container-page {
	position: relative;
	z-index: 20;
}
.sc-coffee-blog-main::before {
	content: "";
	position: absolute;
	z-index: 9;
	top: -60px;
	left: 0;
	width: 268px;
	height: 570px;
	background-image: url(../img/bg-blog-left.png);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
}
.blog-slide-wrap {
	padding: 20px;
	position: relative;
	overflow: visible;
	z-index: 11;
}
.sc-coffee-blog-related .swiper-blog {
	overflow: visible;
}
.sc-coffee-blog-related .swiper-slide {
	width: 305px;
}
.swiper-blog.is-center .swiper-wrapper {
	justify-content: center;
}

.sc-coffee-blog-related .card-blog {
	height: 430px;
	padding: 20px;
	border-radius: 24px;
	background: var(--pastel-pastel-dark-green, #c3cd9e);
	box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.08);
	transition: 0.3s ease;
}
.sc-coffee-blog-related .card-blog:focus-visible {
	outline: none;
}
.sc-coffee-blog-related .card-blog a {
	height: 100%;
	text-decoration: none;
	display: flex;
	gap: 20px;
	flex-direction: column;
}
.sc-coffee-blog-related .card-blog .card-blog-img {
	margin: 0 0 0 auto;
	text-align: right;
}
.sc-coffee-blog-related .card-blog .card-blog-img svg {
	position: absolute;
	left: 0;
	top: 0;
}
.sc-coffee-blog-related .card-blog .card-blog-img img {
	width: 190px;
	height: 190px;
	-o-object-fit: cover;
	object-fit: cover;
	border-radius: 50%;
	-webkit-clip-path: circle(50% at 50% 50%);
	clip-path: circle(50% at 50% 50%);
}
.scalloped-img {
	/* width: 100%;
  max-width: 270px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  clip-path: url(#exact-scallop-shape); */
	width: 100%;
	max-width: 300px;
	aspect-ratio: 269 / 207;
	-o-object-fit: cover;
	object-fit: cover;
	/* clip-path: url(#exact-scallop-shape); */
	-webkit-clip-path: path("M187.368 0C232.453 0 269.001 28.0984 269.001 62.7598C269.001 69.6831 267.542 76.3443 264.849 82.5721C259.319 95.3582 259.319 111.449 264.849 124.235C267.542 130.463 269.001 137.125 269.001 144.049C269.001 178.71 232.453 206.809 187.368 206.809C173.123 206.809 159.729 204.003 148.072 199.071C139.464 195.43 129.536 195.43 120.928 199.071C109.271 204.003 95.8781 206.809 81.6328 206.809C36.5483 206.809 0.000120687 178.71 0 144.049C0 137.125 1.45843 130.463 4.15197 124.234C9.68141 111.448 9.68137 95.3583 4.15178 82.5723C1.45843 76.3444 2.99339e-05 69.6831 0 62.7598C0 28.0984 36.5482 6.97491e-05 81.6328 0C95.8779 0 109.271 2.80511 120.928 7.73608C129.536 11.3773 139.464 11.3772 148.072 7.73603C159.729 2.80499 173.123 7.01232e-06 187.368 0Z");
	clip-path: path("M187.368 0C232.453 0 269.001 28.0984 269.001 62.7598C269.001 69.6831 267.542 76.3443 264.849 82.5721C259.319 95.3582 259.319 111.449 264.849 124.235C267.542 130.463 269.001 137.125 269.001 144.049C269.001 178.71 232.453 206.809 187.368 206.809C173.123 206.809 159.729 204.003 148.072 199.071C139.464 195.43 129.536 195.43 120.928 199.071C109.271 204.003 95.8781 206.809 81.6328 206.809C36.5483 206.809 0.000120687 178.71 0 144.049C0 137.125 1.45843 130.463 4.15197 124.234C9.68141 111.448 9.68137 95.3583 4.15178 82.5723C1.45843 76.3444 2.99339e-05 69.6831 0 62.7598C0 28.0984 36.5482 6.97491e-05 81.6328 0C95.8779 0 109.271 2.80511 120.928 7.73608C129.536 11.3773 139.464 11.3772 148.072 7.73603C159.729 2.80499 173.123 7.01232e-06 187.368 0Z");
}
.sc-coffee-blog-related .card-blog .card-blog-caption {
	display: flex;
	gap: 16px;
	flex-direction: column;
}
.sc-coffee-blog-related .card-blog .card-blog-caption h3,
.sc-coffee-blog-related .card-blog .card-blog-caption p {
	margin: 0;
	padding: 0;
	font-family: var(--body-font-family, "Prompt", sans-serif);
}
.sc-coffee-blog-related .card-blog .arrow-btn {
	position: absolute;
	right: 20px;
	bottom: 20px;
}
.sc-coffee-blog-related .card-blog .card-blog-caption h3 {
	color: var(--system-body-text, #565656);
	font-family: var(--body-font-family, "Prompt", sans-serif);
	font-size: 16px;
	font-weight: 500;
	line-height: 130%;
	max-height: 120px;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-text-decoration: none;
	text-decoration: none;
	transition: all 0.5s;
}
.sc-coffee-blog-related .card-blog .card-blog-caption p {
	color: var(--system-white, #fff);
	font-family: var(--body-font-family, "Prompt", sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 130%;
}
.sc-coffee-blog-related .card-blog .arrow-btn {
	pointer-events: none;
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.sc-coffee-blog-related .card-blog:hover .arrow-btn {
	transform: rotate(32deg) scale(1.05);
}
.sc-coffee-blog-related .swiper-slide {
	transition: transform 0.3s ease;
}
.sc-coffee-blog-related .swiper-slide:nth-child(odd) {
	transform: translateY(-15px);
}
.sc-coffee-blog-related .swiper-slide:nth-child(even) {
	transform: translateY(15px);
}
.sc-coffee-blog-related .swiper-slide:nth-child(even) svg path {
	fill: #b31e37;
}
.sc-coffee-blog-related .swiper-slide:nth-child(even) svg circle {
	stroke: #b31e37;
}
.sc-coffee-blog-related .swiper-slide:first-of-type .card-blog {
	background: var(--pastel-pastel-dark-green, #c3cd9e);
}
.sc-coffee-blog-related .swiper-slide:nth-child(2) .card-blog {
	background: var(--pastel-pastel-yellow, #ffd497);
}
.sc-coffee-blog-related .swiper-slide:nth-child(3) .card-blog {
	background: var(--pastel-pastel-pink1, #ff9183);
}
.sc-coffee-blog-related .swiper-slide:nth-child(4) .card-blog {
	background: var(--pastel-pastel-pink, #ffd8ce);
}
.sc-coffee-blog-related.swiper-slide:nth-child(5) .card-blog {
	background: var(--pastel-pastel-dark-green, #c3cd9e);
}
.sc-coffee-blog-related .swiper-slide:nth-child(2n) .card-blog .card-blog-caption h3 {
	color: var(--pink01, #b31e37);
}
.sc-coffee-blog-related .swiper-slide:nth-child(2n) .card-blog .card-blog-caption p {
	color: var(--system-body-text, #565656);
}
.sc-coffee-blog-related .swiper-slide:nth-child(2) .card-blog .card-blog-img,
.sc-coffee-blog-related .swiper-slide:nth-child(3) .card-blog .card-blog-img {
	margin: 0 auto;
}
.sc-coffee-blog-related .swiper-slide:nth-child(2) .card-blog .card-blog-img img,
.sc-coffee-blog-related .swiper-slide:nth-child(3) .card-blog .card-blog-img img {
	width: 269px;
	height: 207px;
	-o-object-fit: cover;
	object-fit: cover;
	border-radius: 0;
	-webkit-clip-path: path("M187.368 0C232.453 0 269.001 28.0984 269.001 62.7598C269.001 69.6831 267.542 76.3443 264.849 82.5721C259.319 95.3582 259.319 111.449 264.849 124.235C267.542 130.463 269.001 137.125 269.001 144.049C269.001 178.71 232.453 206.809 187.368 206.809C173.123 206.809 159.729 204.003 148.072 199.071C139.464 195.43 129.536 195.43 120.928 199.071C109.271 204.003 95.8781 206.809 81.6328 206.809C36.5483 206.809 0.000120687 178.71 0 144.049C0 137.125 1.45843 130.463 4.15197 124.234C9.68141 111.448 9.68137 95.3583 4.15178 82.5723C1.45843 76.3444 2.99339e-05 69.6831 0 62.7598C0 28.0984 36.5482 6.97491e-05 81.6328 0C95.8779 0 109.271 2.80511 120.928 7.73608C129.536 11.3773 139.464 11.3772 148.072 7.73603C159.729 2.80499 173.123 7.01232e-06 187.368 0Z");
	clip-path: path("M187.368 0C232.453 0 269.001 28.0984 269.001 62.7598C269.001 69.6831 267.542 76.3443 264.849 82.5721C259.319 95.3582 259.319 111.449 264.849 124.235C267.542 130.463 269.001 137.125 269.001 144.049C269.001 178.71 232.453 206.809 187.368 206.809C173.123 206.809 159.729 204.003 148.072 199.071C139.464 195.43 129.536 195.43 120.928 199.071C109.271 204.003 95.8781 206.809 81.6328 206.809C36.5483 206.809 0.000120687 178.71 0 144.049C0 137.125 1.45843 130.463 4.15197 124.234C9.68141 111.448 9.68137 95.3583 4.15178 82.5723C1.45843 76.3444 2.99339e-05 69.6831 0 62.7598C0 28.0984 36.5482 6.97491e-05 81.6328 0C95.8779 0 109.271 2.80511 120.928 7.73608C129.536 11.3773 139.464 11.3772 148.072 7.73603C159.729 2.80499 173.123 7.01232e-06 187.368 0Z");
}

.obj-bottom-left-m {
	display: none;
}

/* Review */
.sc-coffee-review {
	position: relative;
	overflow: hidden;
	padding: 140px 0 250px 0;
}
.sc-coffee-review:before {
	content: "";
	position: absolute;
	width: 335px;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url(../img/bg-review-left-top.png);
	background-size: contain;
	background-position: center top;
	background-repeat: no-repeat;
	pointer-events: none;
}
.sc-coffee-review .container-page {
	position: relative;
	z-index: 20;
}
.swiper-card-review {
	overflow: visible;
}
.swiper-card-review .swiper-wrapper.is-centered {
	justify-content: center;
}
.swiper-card-review .item-review-slide {
	width: 330px;
	margin-right: -12px;
	transition: 0.3s ease;
}
.swiper-card-review .card-review {
	height: 460px;
	padding: 20px 16px;
	display: flex;
	gap: 70px;
	flex-direction: column;
	overflow: hidden;
	border-radius: 32px;
	background: var(--pastel-pastel-dark-green, #c3cd9e);
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
	transition: 0.3s ease;
}
.swiper-card-review .card-review .group-card-image {
	position: relative;
}
.swiper-card-review .card-review .box-img {
	position: relative;
	width: 100%;
	height: 202px;
	overflow: hidden;
	border-radius: 101px;
}
.swiper-card-review .card-review .box-img video {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}
.swiper-card-review .card-review .box-img img {
	width: 100%;
	height: 100%;
	display: block;
	-o-object-fit: cover;
	object-fit: cover;
}
.swiper-card-review .card-review .card-product {
	position: absolute;
	bottom: -70px;
	right: 0;
	margin: 0 0 0 auto;
	width: 108px;
	height: 111px;
	z-index: 2;
}
.swiper-card-review .card-review .card-product img {
	width: 100%;
	height: 100%;
	display: block;
	-o-object-fit: contain;
	object-fit: contain;
	border-radius: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.swiper-card-review .card-review .card-content {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	padding: 0 16px;
}
.swiper-card-review .card-review .card-quote {
	min-height: 80px;
	color: var(--system-white, #fff);
	font-family: var(--body-font-family, "Prompt", sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 130%;
}
.swiper-card-review .card-review .card-author {
	display: flex;
	align-items: center;
	gap: 12px;
}
.swiper-card-review .card-review .author-avatar {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	overflow: hidden;
	border-radius: 50%;
}
.swiper-card-review .card-review .author-avatar img {
	width: 100%;
	height: 100%;
	display: block;
	-o-object-fit: cover;
	object-fit: cover;
}
.swiper-card-review .card-review .author-name {
	color: var(--system-body-text, #565656);
	font-family: var(--body-font-family, "Prompt", sans-serif);
	font-size: 14px;
	font-weight: 500;
	line-height: 130%;
}
.swiper-card-review .card-review .author-group {
	display: flex;
	flex-direction: column;
}
.swiper-card-review .card-review .author-role {
	color: var(--system-white, #fff);
	font-size: 12px;
	font-weight: 400;
	line-height: 130%;
}
.swiper-card-review .item-review-slide:nth-child(odd) {
	transform: rotate(-2deg) translateY(120px);
}
.swiper-card-review .item-review-slide:nth-child(even) {
	transform: rotate(2deg) translateY(0px);
}
.swiper-card-review .item-review-slide:nth-child(2n) .card-review {
	background: var(--pastel-pastel-yellow, #ffd497);
}
.swiper-card-review .item-review-slide:nth-child(3) .card-review {
	background: var(--pastel-pastel-pink1, #ff9183);
}
.swiper-card-review .item-review-slide:nth-child(4) .card-review {
	background: var(--pastel-pastel-pink, #ffd8ce);
}
.swiper-card-review .item-review-slide:nth-child(2n) .card-review .card-quote,
.swiper-card-review .item-review-slide:nth-child(3) .card-review .card-quote,
.swiper-card-review .item-review-slide:nth-child(4) .card-review .card-quote,
.swiper-card-review .item-review-slide:nth-child(2) .card-review .author-role,
.swiper-card-review .item-review-slide:nth-child(3) .card-review .author-role,
.swiper-card-review .item-review-slide:nth-child(4) .card-review .author-role {
	color: var(--system-body-text, #565656);
}
.swiper-card-review .item-review-slide:nth-child(2) svg path {
	fill: #c3cd9e;
}
.swiper-card-review .item-review-slide:nth-child(3) svg path {
	fill: #ffd497;
}
.swiper-card-review .item-review-slide:nth-child(4) svg path {
	fill: #c3cd9e;
}

/* rellax-obj-cherry */
.rellax-obj-cherry {
	position: absolute;
	z-index: 2000;
	pointer-events: none;
	will-change: transform;
	transition: transform 0.1s ease-out;
}
.rellax-obj-cherry-home-1 {
	left: 20px;
	bottom: -60px;
	display: flex;
	gap: 4px;
	flex-direction: column;
	justify-content: flex-end;
}
.rellax-obj-cherry-home-1 .obj-cherry-small {
	position: relative;
	right: -10px;
	width: 48px;
	margin: 0 0 0 auto;
}
.rellax-obj-cherry-home-1 .obj-cherry-lg {
	width: 91px;
}
.rellax-obj-cherry-home-2 {
	right: -20px;
	bottom: 100px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.rellax-obj-cherry-home-2 img {
	width: 55px;
}
.rellax-obj-cherry-home-3 {
	right: 0;
	top: -120px;
}
.rellax-obj-cherry-home-3 img {
	width: 200px;
}
.rellax-obj-cherry-home-4 {
	left: 20px;
	bottom: -100px;
	display: flex;
	gap: 4px;
	flex-direction: column;
	justify-content: flex-end;
}
.rellax-obj-cherry-home-4 .obj-cherry-small {
	width: 55px;
	margin: 0 0 0 auto;
	position: relative;
	right: -20px;
}
.rellax-obj-cherry-home-4 .obj-cherry-lg {
	width: 102px;
}

/* Mockup */
.mockup-header {
	height: 157px;
	display: flow;
	align-items: center;
	font-size: 20px;
	text-align: center;
	align-content: center;
	background-color: #f1ede7;
}

.sc-growing-forward .obj-dot {
	position: absolute;
	width: 63px;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}
.sc-growing-forward .obj-dot img {
	width: 100%;
}
.ani-obj {
	position: absolute;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: contain;
}
.blog-page {
	overflow: hidden;
	background: #f6f0e9;
}
.sc-blog-article {
	position: relative;
	top: -120px;
}
.sc-blog-article::before {
	position: absolute;
	z-index: 100;
	content: "";
	width: 470px;
	height: 470px;
	top: -20px;
	left: 0px;
	z-index: 9;
	pointer-events: none;
	background-image: url(../img/bg-growing-forward.png);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: contain;
}
.ani-obj-blog-1 {
	top: 0;
	right: 0;
	width: 312px;
	height: 500px;
	pointer-events: none;
	background-image: url(../img/ani-obj-blog-1.png);
	background-position: center right;
}
.ani-obj-blog-1 .ani-img-cherry {
	position: absolute;
	top: 180px;
	right: -40px;
}
.ani-obj-blog-1 .ani-img-cherry img {
	width: 100px;
}
.ani-obj-blog-2 {
	top: 50%;
	left: 0;
	width: 278px;
	height: 583px;
	transform: translateY(-30%);
	background-image: url(../img/ani-obj-blog-2.png);
	background-position: center;
}
.ani-obj-blog-2 .ani-img-cherry {
	position: absolute;
	top: 140px;
	left: -24px;
}
.ani-obj-blog-2 .ani-img-cherry img {
	width: 77px;
}
.ani-obj-blog-3 {
	bottom: 0;
	right: 0;
	width: 108px;
	height: 466px;
	background-image: url(../img/ani-obj-blog-3.png);
	background-position: center;
}
.ani-obj-blog-3 .ani-img-cherry {
	position: absolute;
	bottom: 0;
	right: -24px;
}
.ani-obj-blog-3 .ani-img-cherry img {
	width: 77px;
}
.ani-obj-blog-4,
.ani-obj-blog-5 {
	display: none;
}
.ani-obj-product {
	display: none;
}
.rellax-obj-cherry-home-5 {
	top: 70%;
	right: 40px;
}
.rellax-obj-cherry-home-5 img {
	width: 60px;
}
.rellax-obj-cherry-home-6 {
	top: 24px;
	left: -50px;
}
.rellax-obj-cherry-home-6 img {
	width: 128px;
}
.rellax-obj-cherry-home-7 {
	top: -140px;
	right: 0;
	z-index: 100;
}
.rellax-obj-cherry-home-7 img {
	width: 190px;
}