@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@100..900&family=Noto+Serif+HK:wght@200..900&display=swap');



/*------------------------------
	ROOT
------------------------------*/
:root 
{
  /* Layout */ 
	--max-layout-width: 1600px;
	
  /* Colors */ 
  --primary-color: #AC8914; /* Main brand color */
  --secondary-color: #104EAA; /* Secondary color for accents */
  --text-color: #333333; /* Default text color */
  --heading-color: #1A1311; /* Color for headings */
  --background-color: #FFF6D2; /* Page background color */
  --white: #fbfbfb;
  --black: #1A1311;
	--grey: #535353;

	--link-color: #AC8914;
	--link-hover-color: #fdc300;


	
	
	
	
	
  /* Typography */
  --font-family-sans-serif: "Noto Sans HK", "Microsoft YaHei", "Apple LiGothic Medium", "STHeiti", Helvetica, Arial, sans-serif;
  --font-family-serif: "Noto Serif HK", "SimSun", "FangSong", "Georgia", serif;
  --base-font-size: 16px;
  --line-height: 1.5;

	/* Spacing */
	--spacing-xs: 5px;
	--spacing-sm: 10px;
	--spacing-md: 20px;
	--spacing-lg: 30px;
	--spacing-xl: 40px;
	--spacing-xxl: 50px;

  /* Border Radius */
	--border-radius-sm: 4px;
	--border-radius-md: 6px;
	--border-radius-lg: 8px; 
	--border-radius-xl: 12px; 
	--border-radius-xxl: 16px;
	--border-radius-xxxl: 24px;

  /* Box Shadows */
  --box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --box-shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}




::selection 
{
background: #3F6DCB;
color: #fff;
	
}



/*------------------------------
	BASIC Elements
------------------------------*/
body
{
	
	font-family: var(--font-family-sans-serif);
	font-size: var(--base-font-size);
}


h1, h2, h3, h4, h5, h6
{
	font-family: var(--font-family-serif);
	font-weight: bold;
}

h1
{
	font-weight: bold;
}

a
{
	color: var(--link-color);
	text-decoration: none;
}


a:hover
{
	color: var(--link-hover-color);
	text-decoration: underline;
}



ul
{
	margin: 0;
	padding: 0;
	list-style: none;
	
	display: flex;
	flex-direction: row;
	gap: var(--spacing-xs);
	
}





/*------------------------------
	BOOTSTRAP Elements
------------------------------*/
.modal-dialog.modal-dialog-centered
{
	
}

.modal-header
{
	border: 0;
    box-shadow: 0 1px 5px #ccc;
    z-index: 1;
}


.modal-footer
{
	border: 0;
	box-shadow: 0 -1px 5px #ccc;
	z-index: 1;
}
    






/*------------------------------
	GLightbox Elements
------------------------------*/
.goverlay
{
	background: rgba(0, 0, 0, .8) !important;
}

.glightbox-clean .gclose, 
.glightbox-clean .gnext, 
.glightbox-clean .gprev
{
	background-color: var(--primary-color) !important;
}



/*------------------------------
	.container
------------------------------*/
.container
{
	max-width: var(--max-layout-width);
}



/*------------------------------
	.wrapper
------------------------------*/
.wrapper
{
	overflow: hidden;
}







/*------------------------------
	.header
------------------------------*/
.header
{
	position: relative;
	padding: var(--spacing-sm);
	
	
	
	background: #F6E8B3;
	background: linear-gradient(90deg,rgba(246, 232, 179, 1) 0%, rgba(172, 137, 20, 1) 100%);
	
	z-index: 2;
}

.header::before
{
	content: "";
	position: absolute;
	top:-5px;
	left:0;
	
	
	width: 100%;
	height: 100%;
	
	background: #fff;
	
	z-index: -1;
	
}

.header .container
{
	background: #fff;
	margin-bottom: 10px;
}



.header .row
{
	align-items: center;
	gap: var(--spacing-lg);
}


.header .col
{
	flex-grow: 0;
}

/*------------------------------
	.logo-section
------------------------------*/

.logo-section img
{
	max-width: 300px;
	margin-top: 3px;
		margin-bottom: var(--spacing-sm);
}





/*------------------------------
	.menu-section
------------------------------*/

.col.menu-section
{
	flex-grow: 1;
	

	
	font-family: var(--font-family-serif);

	font-weight:700;
}


.col.menu-section ul
{
	gap: var(--spacing-sm);
}

.col.menu-section ul a
{
	display: flex;
	align-items: center;
	padding: 2px 12px;
	
	border-radius: 16px;
}

.col.menu-section ul a:hover,
.col.menu-section ul a.active
{
	text-decoration: none;
	color: var(--white);
	background: var(--primary-color);
}






/*------------------------------
	.lang-n-social-section
------------------------------*/

.lang-n-social-section
{
	display: flex;
	gap: var(--spacing-md);
}



.language-section
{
	display: flex;
	align-items: center;
	
	
	font-family: var(--font-family-serif);
	font-size: 14px;
	font-weight: 600;
	
	color: var(--primary-color);
}

.language-section a,
.language-section span
{
    display: flex;
    align-items: center;
    width: 28px;
    height: 28px;

    justify-content: center;
    border-radius: 50%;
}




.language-section span
{
	color: var(--white);
	background: #D2C493;
}


.language-section a:hover
{
	    color: var(--white);
	background: var(--primary-color);
	text-decoration: none;
}



.socialmedia-section
{
	font-size: 20px;
}


.socialmedia-section a
{
	color: #D2C493;
}

.socialmedia-section a:hover
{
	color: var(--primary-color);
}

.socialmedia-section
{
	display: flex;
	gap: var(--spacing-sm);
}







/*------------------------------
	Section: Page Header
------------------------------*/


.page-header
{
	
	
    position: relative;
	padding-top: var(--spacing-sm);
	font-family: var(--font-family-serif);
	
	
	
	background: var(--background-color);
	
	z-index: 2;
}


/*------------------------------
	Section: Banner
------------------------------*/

.banner-sectoin
{
	    position: relative;
    overflow: hidden;
	
}






/*------------------------------
	Section: Breadcrumb
------------------------------*/


.breadcrumb-section ul
{
	gap:0;
    line-height: 1;
	
}

.breadcrumb-section ul li
{
	display: flex;
	align-items: center;
	justify-content: center;
	
	
}

.breadcrumb-section ul li i
{
	font-size: 24px;
	
	color: var(--link-color);
	
	transform-origin: center center;
	transform: rotate(-25deg);
	
}









/*------------------------------
	Section: Content
------------------------------*/
.content-section
{
	padding-top: 50px;
	padding-bottom: 100px;
	
}








/*------------------------------
	Section: Homepage
------------------------------*/


.home-page .content-section
{
	padding: 0;
}



.home-page .banner-section > ul
{
	display: block;
}


















/*------------------------------
	Section: Homepage > Featured Product > Smoothie Cup
------------------------------*/
.home-featured-product-smoothie-cup
{
	padding: 50px 0;
	padding-bottom: 100px;
	
	color: var(--grey);
	
	text-align: center;
}

.home-featured-product-smoothie-cup h2
{
	font-size: 80px;
	
}

.home-featured-product-smoothie-cup h2 span
{
	color:#40BE9C;
}


.home-featured-product-smoothie-cup p
{
	font-size: 24px;
	display: inline-block;
	padding: 0 var(--spacing-sm);
	background: #63C69F;
	color: #fff;
	

}

.product-smoothie-cup-section-header
{
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;
}



.product-smoothie-cup-section-header > div
{
	position: relative;
	    margin-bottom: var(--spacing-lg);
}


.product-smoothie-cup-section-header > div img
{
	    position: absolute;
    bottom: 0;
    right: 100%;
	
	max-width: 150px;
}

.product-smoothie-cup-section-header a
{
    display: inline-flex;
    justify-content: center;
    gap: 10px;
	 padding: var(--spacing-sm) var(--spacing-md);
	    padding-left: calc(var(--spacing-md) + 8px);
	position: absolute;
    right: 0;
	
	font-size: 20px;
    color: #fff;
    background: var(--secondary-color);
    align-items: center;
   
    line-height: 1;
    border-radius: 18px;
}

.product-smoothie-cup-section-header a:hover
{
	text-decoration: none;
}




.home-featured-product-smoothie-cup .container .row > ul
{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	
	gap: var(--spacing-lg);
	
	
}

.home-featured-product-smoothie-cup .container .row > ul > li
{
	display: flex;
	flex-direction: column;
	
}

.product-smoothie-cup-item > div
{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	
    background: #fbfbfb;
    border-radius: 10%;
    padding: var(--spacing-md);	
	
}

.product-smoothie-cup-item:nth-of-type(1) > div
{
	background: #DEE6B5;
}

.product-smoothie-cup-item:nth-of-type(2) > div
{
	background: #EAECEF;
}


.product-smoothie-cup-item:nth-of-type(3) > div
{
	background: #FFEFBC;
}

.product-smoothie-cup-item:nth-of-type(4) > div
{
	background: #FED4D4;
}

.product-smoothie-cup-item:nth-of-type(5) > div
{
	background: #A6B6CE;
}



.product-smoothie-cup-item > div > img
{
    position: relative;
    top: -15px;
    transform: scale(1.2, 1.2) rotate(-15deg);
}

.product-smoothie-cup-item ul
{

    padding: 0 var(--spacing-md);
    gap: var(--spacing-sm);
	    justify-content: center;
	
	
	border-radius: 100px;
	
	background: rgb(239 239 239 / 30%);
	
	position: relative;
    top: -10px;
    backdrop-filter: blur(3px);
	
	

    border: 1px solid rgb(255 255 255 / 15%);
    box-shadow: 0 0 3px rgb(0 0 0 / 5%);
}

.product-smoothie-cup-item ul li
{
	display: flex;
	align-items: center;
	justify-content: center;
	
	min-width: 50px;
	height: 50px;
	text-align: center;
	
	font-family: var(--font-family-serif);
	font-size: 18px;
	font-weight: bold;
	
	color: #535353;
}


.product-smoothie-cup-item ul li img
{
	max-width: 50px;
}


.product-smoothie-cup-item img
{
    width: 100%;
}



.product-smoothie-cup-item div > ul:last-of-type
{
/*	margin-top: var(--spacing-sm);*/
	background: none;
}







/*------------------------------
	Section: Homepage > Featured Product > Fozen Seafood
------------------------------*/

.home-featured-product-frozen-seafood
{
	padding: 50px 0;
	padding-bottom: 100px;
	
	color: var(--grey);
	background: #F2F2F2;
	text-align: center;
}

.home-featured-product-frozen-seafood h2
{
	font-size: 80px;
	
}

.home-featured-product-frozen-seafood h2 span
{
	color:#104EAA;
}


.home-featured-product-frozen-seafood p
{
	font-size:24px;
	display: inline-block;
	padding: 0 var(--spacing-sm);
	background: #F22128;
	color: #fff;
}



.home-featured-product-frozen-seafood .container .row > ul
{

	
	display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
	
}


.product-frozen-seafood-section-header
{
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;
}



.product-frozen-seafood-section-header > div
{
	position: relative;
	    margin-bottom: var(--spacing-lg);
}


.product-frozen-seafood-section-header > div img
{
	    position: absolute;
    bottom: 0;
    right: 100%;
	
	max-width: 150px;
}

.product-frozen-seafood-section-header a
{
    display: inline-flex;
    justify-content: center;
    gap: 10px;
	 padding: var(--spacing-sm) var(--spacing-md);
	    padding-left: calc(var(--spacing-md) + 8px);
	position: absolute;
    right: 0;
	
	font-size: 20px;
	
    color: #fff;
    background: var(--secondary-color);
    align-items: center;
   
    line-height: 1;
    border-radius: 18px;
}

.product-frozen-seafood-section-header a:hover
{
	text-decoration: none;
}



.product-frozen-seafood-item div
{
	display: flex;
	flex-direction: column;
	align-items: center;
	
	position: relative;
    padding-top: 100%;
    
	width: 100%;

	font-family: var(--font-family-serif);
	font-size: 60px;
	
	color: #6B6A52;
	background: #fff;
	border-radius: 50%;
}


.product-frozen-seafood-item div img
{
position: absolute;
    top: 0;
    width: 100%;
	padding: 30px;

}



.product-frozen-seafood-item div span
{

position: absolute;
    bottom: 0;
    text-align: center;
    display: flex;
    /* width: 100%; */
    justify-content: center;

}

.product-frozen-seafood-item div span em
{
    position: absolute;
    bottom: 70%;
    right: 70%;
    padding: var(--spacing-sm);
    font-family: var(--font-family-sans-serif);
    font-size: 40px;
    color: #fff;
    background: rgb(93 148 230 / 80%);
    /* flex-shrink: 1; */
    /* width: auto; */
    font-style: normal;
    white-space: nowrap;
	
	z-index: 1;

}

.product-frozen-seafood-item div span strong
{
	position: relative;
    z-index: 2;
    background: rgb(255 255 255 / 60%);
    /* padding: 0; */
    line-height: 1;
    padding: 0 15px;
}




/*------------------------------
	Page: About
------------------------------*/

.about-page .banner-sectoin div
{
	height: 100vh;
	max-height: 600px;
	
	overflow: hidden;
}


.about-page .banner-sectoin div img
{
    width: 100%;
    /* height: 100%; */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

}


.about-timeline-section img
{

}

.about-timeline-section ul
{
	flex-direction: column;
	gap: 0;
}


.about-timeline-section ul li
{
	position: relative;
    display: flex;
	min-height: 300px;
    gap: 50px;
    align-items: center;
    padding: 20px;
	
	    border-left: 1px dashed #707070;
}


.about-timeline-section ul li::before
{
	content: "";
	position: absolute;
	left: -8px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #707070;
}


.about-timeline-section ul li h2
{
	font-size: 120px;
	font-weight: bold;
	
	color:#F1F1F1;
}


.about-timeline-section ul li p
{
	font-size:20px;
}








/*------------------------------
	Page: Contact
------------------------------*/

.contact-page .banner-sectoin
{

	height: 100vh;
	max-height: 600px;
	
	display: flex;
	
	align-items: flex-end;
	
	overflow: hidden;
}


.contact-page .banner-sectoin > img
{
    width: 100%;
    /* height: 100%; */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

}




.contact-page .banner-sectoin .container
{
	position: relative;
	z-index: 2;
	
	bottom: 50px;
}

.contact-page .banner-sectoin .container strong
{
	
	    display: flex;
    flex-direction: column;
    padding: 20px 50px;
	
	
	color: #fff;
	
	background: #3F6DCB;
	background: rgb( 63 109 203 / 80%);
	
	max-width: 640px;
	font-size: 40px;
	

}

.contact-page .banner-sectoin .container strong > span:last-of-type
{
	text-align: right;
}










.contact-page .content
{
	padding: var(--spacing-xxl) 0;
	padding-bottom: 150px;
}


.contact-page .content ul
{
	list-style: disc;
	flex-direction: column;
	
	margin-left: 20px;
}


.contact-page .contact-left > div,
.contact-page .contact-right > div
{
	margin-bottom: var(--spacing-xxl);
}


.contact-page .contact-left strong,
.contact-page .contact-right strong
{
	font-size: 14px;
}


.contact-page .contact-left > div:first-of-type ul
{
	flex-direction: column;
	list-style: disc;
	margin-left:30px;
}



.contact-left .delivery-schedule ul
{
	list-style: none;
	margin-left: 0;
	
	flex-direction: column;
}

.delivery-schedule ul li
{
	position: relative;
	    border-bottom: 1px dashed #888;
	padding: 10px;
	padding-left: 30px;
	
}

.delivery-schedule ul li::before
{
	content: "\F1F8";
	
		font-family: "bootstrap-icons";

	font-size: 16px;

	position: absolute;

	left: 0;
	top: 12px;
	line-height: 1;

}

.delivery-schedule ul > li:last-of-type::before
{
	content: "\F20B";
}



.delivery-schedule ul > li:first-of-type
{
	 border-top: 1px dashed #888;
}


.delivery-schedule ul li > div
{
	display: flex;
	gap: var(--spacing-sm);

}

.delivery-schedule ul li > div strong
{
	flex-shrink: 0
}

.delivery-schedule ul li > div span
{
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}


.delivery-schedule ul li > div span em
{
   
    line-height: 1.1;
    font-style: normal;
}










/*------------------------------
	Section: Footer
------------------------------*/

.footer
{
	
}






/*------------------------------
	Section: Footer > Footer top
------------------------------*/




.footer-top
{
position: relative;
color: #1A1311;
background: #FFE4A5;
padding: var(--spacing-xl) 0;
margin-top: 5px;
}


.footer-top::before
{
	content: "";
	
	position: absolute;
	top: -5px;
	left: 0;
	
	width: 100%;
	height: 100%;
	
	background: #F6E8B3;
	background: linear-gradient(-90deg,rgba(246, 232, 179, 1) 0%, rgba(172, 137, 20, 1) 100%);
	z-index: -1;
	
}






.footer-top > .container > .row
{
	    justify-content: space-between;
}


.footer-top > .container > .row > .col
{
	    flex: revert;
	width: revert;
	padding: 0;
}


.footer-google-map iframe
{
	width: 500px;
}






/*------------------------------
	Section: Footer > Footer Bottom
------------------------------*/




.footer-bottom
{
	position: relative;
	color: #BDA060;
	background: #FFF6D2;
	
	

	font-family: var(--font-family-serif);
}


.footer-bottom::before
{
	content: "";
	
	position: absolute;
	top: -5px;
	left: 0;
	
	width: 100%;
	height: 100%;
	
	background: #F6E8B3;
	background: linear-gradient(90deg,rgba(246, 232, 179, 1) 0%, rgba(172, 137, 20, 1) 100%);
	z-index: -1;
	
}


.footer-bottom .container
{
	position: relative;
    margin-top: 5px;
    background: #FFF6D2;
	padding: var(--spacing-lg) 0;
	padding-bottom: var(--spacing-md);
	
	font-size: 14px;
}


.footer-copyright-section
{
	font-size: 14px;
}



/*------------------------------
	Section: Footer > Footer Social Media
------------------------------*/


.footer-socialmedia-section ul
{
	    justify-self: end;
	    font-size: 20px;
    gap: var(--spacing-sm);
}





/*------------------------------
	Section: Footer > Footer Menu
------------------------------*/



.footer-menu-section
{
  gap: var(--spacing-lg);
}




.footer-menu-section > div
{
	flex-basis: 180px;
}



.footer-menu-section ul
{
	
	display: flex;
	flex-direction: column;
	
}




/*------------------------------
	Section: Footer > Footer Contact
------------------------------*/



.footer-contact-section
{
	gap: var(--spacing-lg);
	
}


.footer-contact-section > div
{
	
}





.footer-contact-section ul
{
	
	display: flex;
	flex-direction: column;
	
}



.footer-menu-section ul li,
.footer-contact-section ul li
{
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
}


.footer-menu-section ul li span,
.footer-contact-section ul li span
{
	min-width: 60px;
}


.footer-contact-section strong
{
	font-weight: normal;
}