@import url('https://fonts.googleapis.com/css2?family=STIX+Two+Text:ital,wght@0,500;1,500&display=swap');

@font-face {
    src: url('fonts/NeuzeitGroExt-Bla.ttf');
    font-family: 'Neuzeit Grotesk Extcond Black'; font-weight: 900; font-style: normal;
}


:root{  --one-green:#2cac72; --one-lightgreen:#e1f5e9;  --one-pink:#ff8de5;  --one-blue:#008fff; }
body { 
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	font-family: 'Neuzeit Grotesk Extcond Black', sans-serif;
	font-size: 25px; font-weight: 900; color: #000; letter-spacing: 0em; line-height: 1.15;
	background: var(--one-green);
}
p { line-height: 1.15; margin-bottom: 22px; }
p:last-child { margin-bottom: 0; }
a { color: #000; }
a:hover { color: var(--one-blue); }
a[href*=mailto],
a[href*=http] { word-break: break-word; }
a[href*=javascript] { cursor: auto; }
a[target="_blank"] { position: relative; }
a[target="_blank"]:after {
	content: '\2197'; font-family: sans-serif;
	font-size: 20px; color: #000; line-height: 1; letter-spacing: 0;
	position: absolute; right: 0; top: 0; opacity: 0; visibility: hidden; margin-left: 3px;
	transition: opacity 0.5s 0s ease-out,  top 0.3s 0.1s ease-out, right 0.3s 0.1s ease-out;
}
a[target="_blank"]:hover::after { 
	opacity: 1; visibility: visible; z-index: 1; 
	top: -10px; right: -10px;
}

img { max-width: 100%; }
::selection { color: #11083f; background: #d0e2ff; }


@media only screen and (max-width: 767px) {
}

/* 
 ** Change Color of SVG 
 ** (https://stackoverflow.com/a/65147574)
 ** (https://css-tricks.com/change-color-of-svg-on-hover/#aa-svg-symbol-use)
 ** two ways also worked
*/
/*=====================================================================*/
/* CONTENT */
/*=====================================================================*/
.content-wrap { position: relative; padding: 0 30px; overflow: hidden; }
/*=================*/
/*====== ... ======*/
.deco_rotate_text-wrap { position: absolute; top: 5%; right: 85px; }
.deco_rotate_text {
    font-size: 45px; color: var(--one-pink); text-transform: uppercase; line-height: 1;
	animation: rotateText 10s linear infinite;
}
.deco_rotate_text span {
	display: inline-block; position: absolute; top: -130px; 
	transform-origin: 0 130px;
	text-align: center; text-indent: -26px;
}
@keyframes rotateText {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
/*=================*/
/*====== ... ======*/
.main-logo-wrap { text-align: center; margin-top: 188px; position: relative; z-index: 1; }
.main-logo-wrap svg { max-width: 810px; width: 100%; }
/*--*/
.main-slogantext-wrap { 
	display: flex; align-items: center; margin-top: 60px; 
	text-align: center;
}
.main-slogantext-wrap:before,
.main-slogantext-wrap:after { content: ''; flex-grow: 1; border-top: 1px solid var(--one-lightgreen); opacity: 0.3; }
.main-slogantext-wrap span { 
	font-size: 50px; color: #fff; line-height: 1; text-transform: uppercase;
	max-width: 95%; margin: 0 50px; 
}
/*--*/
.aboutus-wrap { margin-top: 160px; margin-bottom: 120px; text-align: center; }
.aboutus-wrap svg.logo { max-width: 120px; width: 100%; margin-top: 80px; }
/*=================*/
/*====== ... ======*/
.brand-wrap { 
	position: relative; padding: 100px 0; overflow: hidden; 
	border-top: 1px solid rgb(225,245,233,0.3); border-bottom: 1px solid rgb(225,245,233,0.3); 
	padding: 150px 0;
}
/*--*/
/* 
 ** CSS-Only Marquee Effect
 ** © Codrops
 ** (https://tympanus.net/codrops/2020/03/31/css-only-marquee-effect/)
*/
.brand-wrap .marquee {
    --offset: 20vw;
    --move-initial: calc(-25% + var(--offset));
    --move-final: calc(-50% + var(--offset));
    position: absolute; top: 50%; left: 0; transform: translate(0,-50%);
    opacity: 0; visibility: hidden; transition: 0.3s ease-out; 
    font-size: 145px; text-transform: uppercase;
}
.brand-wrap .marquee__inner {
	display: flex;
	animation: marquee 5s linear infinite; animation-play-state: paused;
}
.brand-wrap .marquee span { white-space: nowrap; padding: 0 2vw; }

@keyframes marquee {
    0% { transform: translateX(var(--move-initial)); }
    100% { transform: translateX(var(--move-final)); }
}
/*--*/
.brand-wrap [class*=logo] { text-align: center; }
.brand-wrap a { 
	position: relative; z-index: 1; display: inline-block; text-decoration: none; color: #fff;
	display: inline-flex; flex-flow: column; gap: 20px; height: 100%;
}
.brand-wrap img,
.brand-wrap svg { 
	max-width: 195px; width: 100%; transition: 0.3s ease-out; 
	margin: auto;
	max-width: 360px; width: 500px;
}
.brand-wrap .desc { margin-top: auto; }

.brand-wrap a:hover { color: #000; }
.brand-wrap a:hover img,
.brand-wrap a:hover svg { transform: scale(1.2); }
.brand-wrap a:hover + .marquee { opacity: 0.1; visibility: visible; }
.brand-wrap a:hover + .marquee .marquee__inner { animation-play-state: running; }
/*--*/
.logo-gigicoffee svg { --one-path1:#ffffff; --one-path2:#2cac72; }
.logo-gigicoffee a:hover svg { --one-path1:#004bc8; --one-path2:#ffffff; color: #004bc8; }

.logo-helomoo svg { color: #ffffff; max-height: 40px; }
.logo-helomoo a:hover svg { color: #ee2b37; }

.logo-supermatcha img { max-height: 52px; }

.logo-joost svg { max-height: 70px; }

.logo-newjuice svg { max-height: 40px; }
/*=================*/
/*====== ... ======*/
.contactus-wrap { margin-top: 140px; margin-bottom: 40px; }
/*--*/
.cdetail-wrap { background: var(--one-lightgreen); padding: 40px 40px; }
.cdetail-wrap ul { padding-left: 0; margin-top: 80px; margin-bottom: 0; list-style: none; }
.cdetail-wrap li + li { margin-top: 60px; }
.cdetail-wrap li .title { font-size: 48px; text-transform: uppercase; }
.cdetail-wrap li .desc { 
	font-family: 'STIX Two Text', serif; font-size: 18px; font-weight: 500; font-style: italic; 
	margin-top: 15px; line-height: 1.3;
}
/*--*/
.contactus-wrap .slogantext { 
	margin-top: 100px;
	color: var(--one-pink); text-align: right; text-transform: uppercase; 
}
/*=================*/
/*====== ... ======*/
footer { padding-top: 40px; padding-bottom: 40px; border-top: 1px solid rgb(225,245,233,0.3); }
.copyright { text-align: right; text-transform: uppercase; }


@media only screen and (min-width: 1400px) {
	.contactus-wrap > .row { max-width: 1400px; margin: 0 auto; }
}
@media only screen and (max-width: 767px) {
	body { font-size: 22px; }
	/*--*/
	.deco_rotate_text-wrap { top: 2%; transform: scale(0.8); }
	/*--*/
	.main-logo-wrap { margin-top: 138px; }

	.main-slogantext-wrap { margin-top: 40px; }
	.main-slogantext-wrap span { font-size: 40px; margin: 0 25px; }

	.aboutus-wrap { margin-top: 88px; margin-bottom: 88px; }
	/*--*/
	.brand-wrap { padding: 80px 0; }
	.brand-wrap img,
	.brand-wrap svg { max-width: 200px; }
	.brand-wrap .marquee { font-size: 100px; }

	.logo-helomoo svg { max-height: 21px; }

	.logo-joost svg { max-height: 35px; }

	.logo-newjuice svg { max-height: 20px; }
	/*--*/
	.contactus-wrap { margin-top: 90px; margin-bottom: 30px; }
	.cdetail-wrap { padding: 40px 25px; }
	.cdetail-wrap ul { margin-top: 50px; }
	.cdetail-wrap li .title { font-size: 40px; }
	.cdetail-wrap li .desc { margin-top: 12px; }
	.cdetail-wrap li + li { margin-top: 50px; }
	.contactus-wrap .slogantext { margin-top: 80px; }
	/*--*/
	footer { padding-top: 30px; padding-bottom: 30px; }
}