.wow {
	opacity: 0;
}
.mobile {
	width: 100%;
}
.mobile-inner {
	margin-right: auto;
	margin-left: auto;
background-color:;
	position: relative;
}
.mobile-inner img {
}
.mobile-inner p {
	color: #676767;
	line-height: 25px;
	font-size: 16px;
	padding-bottom: 30px;
	padding-right: 30px;
	padding-left: 30px;
	margin: 0px;
}
.mobile-inner-header {
	width: 100%;
	height: 50px;
	position: relative;
	top: 0px;
	z-index: 33;
	left: 0px;
	background: #000;
}
.mobile-inner-header-icon {
	color: #ffffff;
	height: 50px;
	font-size: 25px;
	text-align: center;
	float: right;
	width: 50px;
	position: relative;
	-webkit-transition: background 0.5s;
	-moz-transition: background 0.5s;
	-o-transition: background 0.5s;
	transition: background 0.5s;
}
.mobile-inner-header-icon:hover {
	background-color: rgba(255,255,255,0.2);
	cursor: pointer;
}
.mobile-inner-header-icon span {
	position: absolute;
	left: calc((100% - 25px) / 2);
	top: calc((100% - 1px) / 2);
	width: 25px;
	height: 1px;
	background-color: #fff;
}
.mobile-inner-header-icon span:nth-child(1) {
	transform: translateY(4px) rotate(0deg);
}
.mobile-inner-header-icon span:nth-child(2) {
	transform: translateY(-4px) rotate(0deg);
}
.mobile-inner-header-icon-click span:nth-child(1) {
	animation-duration: 0.5s;
	animation-fill-mode: both;
	animation-name: clickfirst;
}
.mobile-inner-header-icon-click span:nth-child(2) {
	animation-duration: 0.5s;
	animation-fill-mode: both;
	animation-name: clicksecond;
}
@keyframes clickfirst {
0% {
transform:translateY(4px) rotate(0deg);
}
100% {
transform:translateY(0) rotate(45deg);
}
}
@keyframes clicksecond {
0% {
transform:translateY(-4px) rotate(0deg);
}
100% {
transform:translateY(0) rotate(-45deg);
}
}
.mobile-inner-header-icon-out span:nth-child(1) {
	animation-duration: 0.5s;
	animation-fill-mode: both;
	animation-name: outfirst;
}
.mobile-inner-header-icon-out span:nth-child(2) {
	animation-duration: 0.5s;
	animation-fill-mode: both;
	animation-name: outsecond;
}
@keyframes outfirst {
0% {
transform:translateY(0) rotate(-45deg);
}
100% {
transform:translateY(-4px) rotate(0deg);
}
}
@keyframes outsecond {
0% {
transform:translateY(0) rotate(45deg);
}
100% {
transform:translateY(4px) rotate(0deg);
}
}
.mobile-inner-nav {
	overflow: auto;
	max-height: calc(100vh - 50px);
}
.mobile-inner-nav {
	/*background-color: rgb(65 78 113 / 90%);*/
	background: #000;
	width: 100%;
	position: absolute;
	top: 50px;
	padding-bottom: 0%;
	display: none;
	z-index: 444;
}
.mobile-inner-nav a {
	border-bottom: solid 1px rgba(255,255,255,0.3);
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	color: #fff;
	transition: all 0.5s;
}
.mobile-inner-nav dl {
	display: none;
}
.mobile-inner-nav dl dd {
	line-height: 33px;
	text-decoration: none;
	text-indent: 3em;
	font-size: 16px;
	color: #FFFFFF;
	border-bottom: solid 1px rgba(255,255,255,0.3);
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	font-weight: 300;
	font-size: 14px;
}
.mobile-inner-nav li {
	border-bottom: solid 1px rgba(255,255,255,0.3);
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	line-height: 53px;
	text-indent: 20px;
}
.mobile-inner-nav h2.h2tit {
	line-height: 50px;
	text-decoration: none;
	text-indent: 2em;
	font-size: 16px;
	color: #FFFFFF;/* border-bottom:solid 1px rgba(255,255,255,0.3); */
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	font-weight: 300;
}
.mobile-inner-nav h2.h2tit a {
	color: #FFFFFF;
}
.mobile-inner-nav a {
	border-bottom: none;
}
.mobile-inner-nav li {
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: returnToNormal;
	animation-name: returnToNormal;
}
@-webkit-keyframes resize {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity:0;
-webkit-transform:scale(5, 5);
transform:scale(5, 5);
}
100% {
opacity:1;
-webkit-transform:scale(1, 1);
transform:scale(1, 1);
}
}
@keyframes resize {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity:0;
-webkit-transform:scale(5, 5);
transform:scale(5, 5);
}
100% {
opacity:1;
-webkit-transform:scale(1, 1);
transform:scale(1, 1);
}
}
@-webkit-keyframes returnToNormal {
from {
opacity:0;
-webkit-transform:translate3d(0, 100%, 0);
transform:translate3d(0, 100%, 0);
}
to {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
}
}
@keyframes returnToNormal {
from {
opacity:0;
-webkit-transform:translate3d(0, 100%, 0);
transform:translate3d(0, 100%, 0);
}
to {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
}
}
.mobile-inner-nav li:last-child h2.h2tit {
	border-bottom: none;
}
.mobile-inner-nav li .h3tit {
	height: 50px;
	position: relative;
	background: url(../images/51_icon_search@2x.png) no-repeat 30px center;
	background-size: 17px;
}
.mobile-inner-nav li .words {
	display: block;
	width: 100%;
	height: 100%;
	border: none;
	background: none;
	text-indent: 60px;
	font-size: 15px;
	color: #fff;
	background: url(../images/search2.png) no-repeat 30px center;
	background-size: 20px;
}
.mobile-inner-nav li:last-child {
	border-bottom: none;
}
.mobile-inner-nav li form {
	display: block;
	width: 100%;
	height: 100%;
}
@charset "utf-8";
@charset "UTF-8";
.animated {
	animation-duration: 1s;
	animation-fill-mode: both;
}
.animated.infinite {
	animation-iteration-count: infinite;
}
.animated.hinge {
	animation-duration: 2s;
}
.fadeInUp {
	animation-duration: 1.76s;
	animation-name: fadeInUp;
}
@keyframes fadeInUp {
from {
opacity:0;
transform:translate3d(0, 40px, 0);
}
to {
	opacity: 1;
	transform: none;
}
}
* {
	font-family: MyriadPro-LightIt;
}
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, th, td, p, blockquote, pre, form, fieldset, legend, input, button, textarea, hr, span {
	margin: 0;
	padding: 0;
}
html {
	font-size: 62.5%;
}
body {
	font-size: 1.4rem;
}
body {
	font-family: "Microsoft YaHei" ! important;
	color: #000000;
	background: #fff;
	margin: 0 auto;
	padding: 0px;
}
body {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
select {
	cursor: pointer;
}
input[type="button"], input[type="submit"], input[type="reset"], input[type="text"] {
	-webkit-appearance: none;
}
input[type="button"], input[type="submit"], input[type="reset"] {
	cursor: pointer;
}
input {
	-webkit-appearance: none;
}
input {
	-webkit-appearance: none!important;
	border-radius: 0;
}
button {
	cursor: pointer;
}
textarea {
	-webkit-appearance: none;
}
a {
	text-decoration: none;
	color: #235aa7;
	outline: none;
}
a:active {
star:expression(this.onFocus=this.blur());
}
img {
	border: 0px;
	vertical-align: middle;
}
li {
	list-style: none;
}
* {
	outline: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
.loading {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: 99999;
}
.loadingfa {
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 29px;
	color: #1f8adf;
	position: absolute;
	left: 50%;
	margin-top: -25px;
	margin-left: -25px;
	top: 50%;
}
html {
	-webkit-overflow-scrolling: touch;
	-webkit-tap-highlight-color: none;
}
html {
	-webkit-tap-highlight-color: transparent;
}
body {
	-webkit-overflow-scrolling: touch;
}
* {
	padding: 0;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
 @keyframes rotate {
from {
-webkit-transform:rotate(0deg)
}
to {
	-webkit-transform: rotate(360deg)
}
}
@-webkit-keyframes rotate {
from {
-webkit-transform:rotate(0deg)
}
to {
	-webkit-transform: rotate(360deg)
}
}
@-moz-keyframes rotate {
from {
-moz-transform:rotate(0deg)
}
to {
	-moz-transform: rotate(360deg)
}
}
@-ms-keyframes rotate {
from {
-ms-transform:rotate(0deg)
}
to {
	-ms-transform: rotate(360deg)
}
}
@-o-keyframes rotate {
from {
-o-transform:rotate(0deg)
}
to {
	-o-transform: rotate(360deg)
}
}
.xuanzhuan {
	animation: 2s linear 0s normal forwards infinite rotate;
	-webkit-animation: 2s linear 0s normal forwards infinite rotate;
	-moz-animation: 2s linear 0s normal forwards infinite rotate;
	-o-animation: 2s linear 0s normal forwards infinite rotate;
}
.xuanzhuan img {
	display: block;
	width: 100%;
}
.pc {
	display: block;
}
.wap {
	display: none;
}
.clearflex:after {
	content: "";
	display: table;
	clear: both;
}
.container {
	margin-left: auto;
	margin-right: auto;
 padding: 0px calc(300/ 1920 * 100vw);
}
/* Header Styles */
.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
 height: calc(100 / 1920 * 100vw);
	background-color: #000;
	backdrop-filter: blur(10px);
 border-bottom: calc(1 / 1920 * 100vw) solid rgba(255, 255, 255, 0.08);
	z-index: 100;
}
.header-container {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
 padding: 0px calc(200/ 1920 * 100vw);
}
/* Left Nav */
.header-left {
	display: flex;
	align-items: center;
 gap: calc(34 / 1920 * 100vw);
}
.burger-menu {
	display: flex;
	align-items: center;
 gap: calc(12 / 1920 * 100vw);
	color: #999999;
	transition: color 0.3s ease;
}
.burger-menu:hover {
	color: #ffffff;
}
.burger-icon {
	position: relative;
 width: calc(18 / 1920 * 100vw);
 height: calc(12 / 1920 * 100vw);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.burger-icon::before, .burger-icon::after {
	content: '';
	width: 100%;
 height: calc(2 / 1920 * 100vw);
	background-color: currentColor;
}
.burger-icon::after {
	width: 70%;
}
.burger-text {
 font-size: calc(14 / 1920 * 100vw);
	font-weight: 400;
 letter-spacing: calc(0.5 / 1920 * 100vw);
}
.nav-link-sub {
 font-size: calc(15 / 1920 * 100vw);
	color: #B49478;
	transition: color 0.3s ease;
}
.nav-link-sub:hover {
	color: #ffffff;
}
/* Centered Logo */
.logo-wrap {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
.logo img {
 height: calc(30 / 1920 * 100vw);
	width: auto;
}
/* Right Nav */
.nav-menu {
	display: flex;
	align-items: center;
 gap: calc(39 / 1920 * 100vw);
}
.nav-item {
 font-size: calc(16 / 1920 * 100vw);
	color: #B49478;
	transition: color 0.3s ease;
 letter-spacing: calc(0.5 / 1920 * 100vw);
}
.nav-item:hover, .nav-item.active {
	color: #ffffff;
}
.search-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999999;
	transition: color 0.3s ease;
}
.search-btn:hover {
	color: #ffffff;
}
.search-icon {
 width: calc(18 / 1920 * 100vw);
 height: calc(18 / 1920 * 100vw);
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* Hero Section */
.hero-section {
	position: relative;
	width: 100%;/* Please replace with actual background image asset *//* display: flex; */
    /* align-items: center; */
}
/* Content Left Offset Overlay */
.hero-container {
	position: relative;
	z-index: 10;
	height: 100vh;
	display: flex;
	align-items: center;
	z-index: 3;
	width: 100%;
 padding: 0px calc(304/ 1920 * 100vw);
}
.hero-text-block {
 margin-top: calc(80 / 1920 * 100vw);
	display: flex;
	flex-direction: column;
}
.hero-subtitle {
 font-size: calc(50 / 1920 * 100vw);
	color: #B49478;
	font-weight: 300;
 letter-spacing: calc(4 / 1920 * 100vw);
 margin-bottom: calc(5 / 1920 * 100vw);
}
.hero-title {
 font-size: calc(50 / 1920 * 100vw);
	color: #B49478;
	font-weight: 700;
 letter-spacing: calc(2 / 1920 * 100vw);
 margin-bottom: calc(180 / 1920 * 100vw);
}
/* Pill Button Style */
.cta-button {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	background-color: #B49478;
 border-radius: calc(26 / 1920 * 100vw);
 padding: calc(15 / 1920 * 100vw) calc(37 / 1920 * 100vw) calc(15 / 1920 * 100vw) calc(25 / 1920 * 100vw);
	transition: background-color 0.3s ease;
	position: relative;
}
.cta-button:hover {
	background-color: rgba(184, 159, 131, 0.6);
}
.cta-text {
 font-size: calc(15 / 1920 * 100vw);
	color: #ffffff;
	font-weight: 400;/* margin-right: calc(20 / 1920 * 100vw); */
}
.cta-arrow-wrap {
 width: calc(59/ 1920 * 100vw);
 height: calc(59/ 1920 * 100vw);
	background-color: #3f315a;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	position: absolute;
 right: calc(-40 / 1920 * 100vw);
}
.arrow-icon {
 width: calc(40 / 1920 * 100vw);
 height: calc(40 / 1920 * 100vw);
	fill: none;
	stroke: #ffffff;
	stroke-width: .6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* Play Button Style */
.play-button {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
 width: calc(144/ 1920 * 100vw);
 height: calc(144/ 1920 * 100vw);
	display: flex;
	transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.3s ease;
	z-index: 20;
	border: none;
	background: url(../images/play.png) no-repeat center center;
	background-size: 100%;
}
.play-button:hover {
	transform: translate(-50%, -50%) scale(1.08);
	border-color: #ffffff;
}
.play-icon-inner {
	width: 0;
	height: 0;
 border-top: calc(12 / 1920 * 100vw) solid transparent;
 border-bottom: calc(12 / 1920 * 100vw) solid transparent;
 border-left: calc(20 / 1920 * 100vw) solid #ffffff;
 margin-left: calc(6 / 1920 * 100vw);
}
.play-button svg {
	display: none; /* Used raw CSS border for crisp triangle render on high density screens */
}
/* Indicators Styles */
.carousel-indicators {
	position: absolute;
 bottom: calc(40 / 1920 * 100vw);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
 gap: calc(10 / 1920 * 100vw);
	z-index: 20;
}
.indicator-dash {
 width: calc(52 / 1920 * 100vw);
 height: calc(3 / 1920 * 100vw);
	background-color: rgba(184, 159, 131, 0.4);
 border-radius: calc(1.5 / 1920 * 100vw);
	transition: background-color 0.3s ease, width 0.3s ease;
}
.indicator-dash.active {
	background-color: #3f315a;
}
.nav-link-sub.icon {
 background: url(../images/icon.png) no-repeat left calc(8/ 1920 * 100vw);
 background-size: calc(17/ 1920 * 100vw);
 padding-left: calc(28/ 1920 * 100vw);
	line-height: 2;
	display: block;
}
.search {
	position: relative;
}
.search .h2tit {
 width: calc(15 / 1920 * 100vw);
 height: calc(15 / 1920 * 100vw);
	cursor: pointer;
	background: url(../images/search.png) no-repeat center center;
	background-size: 100%;
}
.search .slide {
	position: absolute;
 padding: calc(6 / 1920 * 100vw);
	background: #000;
	display: flex;
	right: 0;
	align-items: center;
 top: calc(35 / 1920 * 100vw);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	transition: all 0.4s;
	visibility: hidden;
	opacity: 0;
	z-index: -1;
 top: calc(35 / 1920 * 100vw);
}
.search .words {
 height: calc(35 / 1920 * 100vw);
	background: #000;
	border: none;
	color: #fff;
 width: calc(125 / 1920 * 100vw);
 padding: 0px calc(15 / 1920 * 100vw);
}
.search .send {
 width: calc(35 / 1920 * 100vw);
 height: calc(35 / 1920 * 100vw);
	border: none;
	background: url(../images/search.png) no-repeat center center;
	background-size: 50%;
}
.search:hover .slide {
 top: calc(25 / 1920 * 100vw);
	visibility: visible;
	opacity: 1;
	z-index: 5;
}
.hero-section .poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	left: 0;
	top: 0;
}
.hero-section .swiper-pagination {
}
.hero-section .swiper-pagination * {
}
.hero-section .swiper-pagination .swiper-pagination-bullet {
	width: 49px;
	height: 3px;
	background: #B49478;
	border-radius: 0px;
	opacity: 1;
}
.hero-section .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background: #512D6D;
}
/* ==========================================================================
   4. Products Grid Section Styles (PC base 1920px)
   ========================================================================== */
.products-section {
	position: relative;
 padding-top: calc(100 / 1920 * 100vw);
 padding-bottom: calc(370/ 1920 * 100vw);
	overflow: hidden;
	background: url(../images/bg1.png) no-repeat right bottom;
	background-size: cover;
}
.section-title-dark {
 font-size: calc(56 / 1920 * 100vw);
	color: #000000;
	font-weight: 700;
 letter-spacing: calc(1 / 1920 * 100vw);
 margin-bottom: calc(25/ 1920 * 100vw);
 margin-left: calc(127/ 1920 * 100vw);
}
.products-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
 gap: calc(10 / 1920 * 100vw);
	position: relative;
	z-index: 2;
 padding: 0px calc(127/ 1920 * 100vw);
}
.product-card {
	position: relative;
	overflow: hidden;
	aspect-ratio: 560 / 400; /* Maintains the landscape aspect ratio of cards */
	background-color: #f5f5f5;
}
.product-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.product-card:hover .product-img {
	transform: scale(1.04);
}
.product-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
 padding: calc(30 / 1920 * 100vw) calc(38/1920*100vw);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.5) 100%);
}
.product-title {
 font-size: calc(30/ 1920 * 100vw);
	color: #B49478;
	font-weight: 500;
 letter-spacing: calc(0.5 / 1920 * 100vw);
}
/* Scaled Down Pill Button inside Product Cards */
.cta-button-small {
	align-self: flex-end;
	display: inline-flex;
	align-items: center;
	background-color: #B49478;
 border-radius: calc(183 / 1920 * 100vw);
 padding: calc(8 / 1920 * 100vw) calc(19 / 1920 * 100vw) calc(8 / 1920 * 100vw) calc(11/ 1920 * 100vw);
	transition: background-color 0.3s ease;
	position: relative;
}
.cta-button-small:hover {
	background-color: rgba(184, 159, 131, 0.6);
}
.cta-text-small {
 font-size: calc(16 / 1920 * 100vw);
	color: #ffffff;
}
.cta-arrow-wrap-small {
 width: calc(36/ 1920 * 100vw);
 height: calc(36/ 1920 * 100vw);
	background-color: #512D6D;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
 right: calc(-22/ 1920 * 100vw);
}
.arrow-icon-small {
 width: calc(20 / 1920 * 100vw);
 height: calc(20 / 1920 * 100vw);
	fill: none;
	stroke: #ffffff;
	stroke-width: 1;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* Brand Watermark Graphic Element on the right side background */
.brand-pattern-bg {
	position: absolute;
 right: calc(-80 / 1920 * 100vw);
 bottom: calc(-100 / 1920 * 100vw);
 width: calc(480 / 1920 * 100vw);
 height: calc(580 / 1920 * 100vw);
	background-image: url('../images/brand_emblem_watermark.png'); /* Beige brand emblem */
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.15;
	pointer-events: none;
	z-index: 1;
}
/* ==========================================================================
   5. Aesthetic Banner Section Styles (PC base 1920px)
   ========================================================================== */
.aesthetic-section {
	position: relative;
	width: 100%;
	background: url(../images/bg2.webp) no-repeat center center; /* Bathroom interior background image */
	background-size: cover;
	background-position: center;
	align-items: center;
 	padding-top: calc(195/ 1920 * 100vw);
 	padding-bottom: calc(210/ 1920 * 100vw);
}
.aesthetic-container {
	height: 100%;
	display: flex;
	align-items: center;
}
.aesthetic-text-block {
	display: flex;
	flex-direction: column;
}
.aesthetic-subtitle {
 font-size: calc(50/ 1920 * 100vw);
	color: #fff;
	font-weight: 300;
 margin-bottom: calc(3/ 1920 * 100vw);
}
.aesthetic-title {
 font-size: calc(50/ 1920 * 100vw);
	color: #ffffff;
	font-weight: 700;
 margin-bottom: calc(426/ 1920 * 100vw);
}
/* ==========================================================================
   7. Brand Introduction Section Styles (PC base 1920px)
   ========================================================================== */
.brand-intro-section {
	background-color: #ffffff;
 padding-top: calc(110/ 1920 * 100vw);
}
.brand-intro-header {
 max-width: calc(620 / 1920 * 100vw);
 margin-bottom: calc(20 / 1920 * 100vw);
	position: relative;
	z-index: 3;
}
.brand-intro-title {
 font-size: calc(50/ 1920 * 100vw);
	color: #000000;
	font-weight: 700;
 letter-spacing: calc(0.5 / 1920 * 100vw);
 margin-bottom: calc(21/ 1920 * 100vw);
	line-height: 1.2;
}
.brand-intro-desc {
 font-size: calc(25/ 1920 * 100vw);
	color: #555555;
	line-height: 1.6;
 letter-spacing: calc(0.2 / 1920 * 100vw);
}
/* Entire bottom graphic wrapped in a single robust container */
.brand-illustration-wrap {
	width: 100%;
 margin-top: calc(-230 / 1920 * 100vw); /* Slight negative margin to balance layout spacing */
}
.brand-illustration-img {
	width: 100%;
	height: auto;
	display: block;
}
/* ==========================================================================
   9. Recommended Products Section Styles (PC base 1920px)
   ========================================================================== */
.recommended-section {
	background: url(../images/bg3.webp) no-repeat center center;
 padding-top: calc(131/ 1920 * 100vw);
 padding-bottom: calc(190 / 1920 * 100vw);
	background-size: cover;
}
.rec-header {
 margin-bottom: calc(90/ 1920 * 100vw);
}
.rec-title {
 font-size: calc(50/ 1920 * 100vw);
	color: #B49478; /* Gold title accent */
	font-weight: 700;
 letter-spacing: calc(1 / 1920 * 100vw);
 margin-bottom: calc(12 / 1920 * 100vw);
}
.rec-subtitle {
 font-size: calc(25/ 1920 * 100vw);
	color: #B49478; /* Lavender-grey description text */
 letter-spacing: calc(0.2 / 1920 * 100vw);
}
.rec-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
 gap: calc(22 / 1920 * 100vw);
}
.rec-card {
	background-color: #ffffff;
    /* border-radius: calc(4 / 1920 * 100vw); */
    padding: calc(32/ 1920 * 100vw) calc(27/ 1920 * 100vw) calc(32 / 1920 * 100vw) calc(27 / 1920 * 100vw);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.rec-card:hover {
 transform: translateY(calc(-6 / 1920 * 100vw));
 box-shadow: 0 calc(12 / 1920 * 100vw) calc(32 / 1920 * 100vw) rgba(0, 0, 0, 0.25);
}
/* Image containment and display rules */
.rec-img-wrap {
	width: 100%;
 height: calc(240 / 1920 * 100vw);
	display: flex;
	align-items: center;
	justify-content: center;
 margin-bottom: calc(24 / 1920 * 100vw);
	overflow: hidden;
	object-fit: cover;
}
.rec-img {
	width: 90%;
	height: 90%;
	object-fit: contain;
}
/* Product Detail Areas Inside Card */
.rec-details {
	position: relative;
	/* padding-top: calc(12 / 1920 * 100vw); */
    /* border-top: calc(1 / 1920 * 100vw) solid #f0f0f0; */
	margin-top: 2vw;
}
.rec-product-code {
 font-size: calc(25/ 1920 * 100vw);
	color: #111111;
	font-weight: 700;
 margin-bottom: calc(13 / 1920 * 100vw);
}
.rec-product-desc {
 font-size: calc(18 / 1920 * 100vw);
	color: #777777;
	line-height: 1.4;
 padding-right: calc(40 / 1920 * 100vw); /* Ensure text doesn't overlap the arrow badge */
}
/* Rounded Diagonal Arrow Link */
.rec-arrow-link {
	position: absolute;
	right: 0;
	top: 0;
 width: calc(36 / 1920 * 100vw);
 height: calc(36 / 1920 * 100vw);
	background-color: #512D6D;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease, transform 0.3s ease;
}
.rec-arrow-link:hover {
	background-color: #55427b;
	transform: scale(1.05);
}
.diagonal-arrow {
 width: calc(22/ 1920 * 100vw);
 height: calc(22/ 1920 * 100vw);
	fill: none;
	stroke: #ffffff;
	stroke-width: 1;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* ==========================================================================
   11. About Brand Section Styles (PC base 1920px)
   ========================================================================== */
.about-brand-section {
	position: relative;
	width: 100%;
	background: url(../images/bg4.webp) no-repeat center center; /* Luxury bath ambient background */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* display: flex; */
	align-items: center;
 padding: calc(208/ 1920 * 100vw) 0px;
}
.about-brand-container {
	height: 100%;
	display: flex;
	align-items: center;
	position: relative;
	z-index: 10;
}
.about-brand-text-block {
	display: flex;
	flex-direction: column;
}
.about-brand-subtitle {
 font-size: calc(50/ 1920 * 100vw);
	color: #B49478; /* Soft gold subtitle color */
	font-weight: 300;
 letter-spacing: calc(3 / 1920 * 100vw);
 margin-bottom: calc(10 / 1920 * 100vw);
}
.about-brand-title {
 font-size: calc(50/ 1920 * 100vw);
	color: #B49478; /* Bright gold-bronze title */
	font-weight: 700;
 letter-spacing: calc(1 / 1920 * 100vw);
 margin-bottom: calc(48 / 1920 * 100vw);
	line-height: 1.2;
}
/* Descriptive List Layout inside Section */
.about-brand-desc {
 font-size: calc(16 / 1920 * 100vw);
	color: #B49478;
	line-height: 1.8;
 margin-bottom: calc(214/ 1920 * 100vw);
 max-width: calc(600 / 1920 * 100vw);
}
.about-brand-desc p {
 margin-bottom: calc(4 / 1920 * 100vw);
	position: relative;
}
/* ==========================================================================
   13. Footer Section Styles (PC base 1920px)
   ========================================================================== */
.main-footer {
	background-color: #000000;
 padding-top: calc(56/ 1920 * 100vw);
 padding-bottom: calc(67/ 1920 * 100vw);
 border-top: calc(1 / 1920 * 100vw) solid rgba(255, 255, 255, 0.08);
}
.footer-container {
	display: flex;
	flex-direction: column;
 padding: 0px calc(200/ 1920 * 100vw);
}
/* Upper navigation structure styling */
.footer-upper:after {
	content: "";
	position: absolute;
	width: 100%;
 height:calc(1 / 1920 * 100vw);
	background: #B49478;
 top: calc(50 / 1920 * 100vw);
}
.footer-upper {
	display: grid;
 grid-template-columns: calc(240 / 1920 * 100vw) repeat(5, 1fr);
 gap: calc(20 / 1920 * 100vw);
 padding-bottom: calc(16/ 1920 * 100vw);
	border-bottom: 1px solid #B49478;
	position: relative;
}
.footer-brand-col {
	display: flex;
	flex-direction: column;
}
.footer-logo img {
 height: calc(28 / 1920 * 100vw);
	width: auto;
}
/* Rounded gold-ish social media buttons */
.footer-socials {
	display: flex;
 gap: calc(6/ 1920 * 100vw);
 margin-top: calc(44 / 1920 * 100vw);
}
.social-icon-btn img {
	width: 100%;
}
.social-icon-btn {
 width: calc(26 / 1920 * 100vw);
 height: calc(26 / 1920 * 100vw);
	transition: background-color 0.3s ease, border-color 0.3s ease;
}
.social-icon-btn:hover {
	background-color: rgba(229, 204, 174, 0.1);
	border-color: #e5ccae;
}
.social-svg {
 width: calc(16 / 1920 * 100vw);
 height: calc(16 / 1920 * 100vw);
	fill: currentColor;
}
/* Dynamic footer navigation columns */
.footer-col-title {
 font-size: calc(20/ 1920 * 100vw);
	color: #B49478; /* Gold Column Titles */
	font-weight: 500;
 margin-bottom: calc(49/ 1920 * 100vw);
 letter-spacing: calc(0.5 / 1920 * 100vw);
}
.footer-list {
	list-style: none;
	display: flex;
	flex-direction: column;
 gap: calc(16 / 1920 * 100vw);
}
.footer-list a {
 font-size: calc(15 / 1920 * 100vw);
	color: #B49478;
	line-height: 1.4;
	transition: color 0.3s ease;
}
.footer-list a:hover {
	color: #ffffff;
}
/* Footer lower details row */
.footer-bottom-row {
 border-top: calc(1 / 1920 * 100vw) solid rgba(255, 255, 255, 0.08);
 padding-top: calc(8/ 1920 * 100vw);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.footer-copyright, .footer-policy-link {
 font-size: calc(15 / 1920 * 100vw);
	color: #B49478;
 letter-spacing: calc(0.3 / 1920 * 100vw);
}
.footer-policy-link {
	transition: color 0.3s ease;
}
.footer-policy-link:hover {
	color: #ffffff;
}
/* ==========================================================================
   15. News Section Styles (PC base 1920px)
   ========================================================================== */
.news-section {
	background-color: #ffffff;
 padding-top: calc(132/ 1920 * 100vw);
 padding-bottom: calc(190/ 1920 * 100vw);
}
.news-main-title {
 font-size: calc(56/ 1920 * 100vw);
	color: #000000;
	font-weight: 700;
 letter-spacing: calc(0.5 / 1920 * 100vw);
 margin-bottom: calc(31/ 1920 * 100vw);
}
.news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
 gap: calc(26 / 1920 * 100vw);
}
/* Featured News Card Styling */
.news-card {
	display: flex;
	flex-direction: column;
}
.news-img-wrap {
	width: 100%;
 height: calc(280/ 1920 * 100vw);
	/* border-radius: calc(2 / 1920 * 100vw); */
	overflow: hidden;
}
.news-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.news-card:hover .news-img {
	transform: scale(1.03);
}
.news-card-content {
	display: flex;
	flex-direction: column;
 padding-top: calc(26 / 1920 * 100vw);
}
.news-card-title a {
	color: inherit;
}
.news-card-title {
 font-size: calc(18 / 1920 * 100vw);
	color: #111111;
	font-weight: 700;
	line-height: 1.45;
 margin-bottom: calc(15/ 1920 * 100vw);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.news-date {
 font-size: calc(16 / 1920 * 100vw);
	color: #999999;
 margin-bottom: calc(27/ 1920 * 100vw);
}
.news-snippet {
 font-size: calc(16 / 1920 * 100vw);
	color: #666666;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Sidebar News List Styling */
.news-sidebar {
	display: flex;
	flex-direction: column;
}
.sidebar-header {
	background-color: #512D6D; /* Purple Header Accent */
	color: #ffffff;
 height: calc(40 / 1920 * 100vw);
 font-size: calc(20/ 1920 * 100vw);
	font-weight: 500;
	display: flex;
	align-items: center;
 padding-left: calc(11/ 1920 * 100vw);
 border-radius: calc(2 / 1920 * 100vw) calc(2 / 1920 * 100vw) 0 0;
}
.sidebar-list {
	display: flex;
	flex-direction: column;
}
.sidebar-item {
 padding-top: calc(23 / 1920 * 100vw);
 padding-bottom: calc(33/ 1920 * 100vw);
 border-bottom: calc(1 / 1920 * 100vw) solid #dddddd;
}
.sidebar-item:last-child {
	border-bottom: none;
}
.sidebar-item-title {
 	font-size: calc(16 / 1920 * 100vw);
	color: #000;
	font-weight: 700;
	line-height: 1.4;
 	margin-bottom: calc(24 / 1920 * 100vw);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sidebar-item-title a {
	transition: color 0.3s ease;
	color: inherit;
}
.sidebar-item-title a:hover {
	color: #3f315a;
}
.sidebar-item-date {
 	font-size: calc(16 / 1920 * 100vw);
	color: #999999;
}
/* Bottom centered pill button with light design */
.news-action-wrap {
	display: flex;
	justify-content: center;
 margin-top: calc(69/ 1920 * 100vw);
}
.cta-button-light {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	background-color: #ffffff;
 border: calc(1 / 1920 * 100vw) solid #333333;
 border-radius: calc(26 / 1920 * 100vw);
 padding: calc(14 / 1920 * 100vw) calc(35 / 1920 * 100vw) calc(14 / 1920 * 100vw) calc(28 / 1920 * 100vw);
	transition: background-color 0.3s ease, border-color 0.3s ease;
	position: relative;
}
.cta-button-light:hover {
	border-color: #3f315a;
	background-color: #fcfbfe;
}
.cta-text-dark {
 font-size: calc(15 / 1920 * 100vw);
	color: #111111;
	font-weight: 500;
 margin-right: calc(20 / 1920 * 100vw);
}
/* ==========================================================================
   17. Mega Menu Panel Styles (PC base 1920px)
   ========================================================================== */
.mega-menu-panel {
	display: none; /* Hidden by default, toggled with jQuery */
	position: fixed;
 top: calc(100 / 1920 * 100vw); /* Mounts directly under the PC header */
	left: 0;
	width: 100%;
	background-color: #ffffff;
 box-shadow: 0 calc(20 / 1920 * 100vw) calc(40 / 1920 * 100vw) rgba(0, 0, 0, 0.15);
	z-index: 99;
 padding-top: calc(43/ 1920 * 100vw);
 padding-bottom: calc(30 / 1920 * 100vw);
}
.mega-menu-container {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	position: relative;
 padding-bottom: calc(60 / 1920 * 100vw); /* Space for bottom absolute close button */
	max-height: 60vh;
	overflow: auto;
}
.mega-menu-container .bd {
	width: 63%
}
.mega-menu-left {
	/* width: 63%; */
	display: flex;
	flex-direction: column;
}
.mega-tabs-nav {
	display: flex;
 gap: calc(14 / 1920 * 100vw);
 margin-bottom: calc(35/ 1920 * 100vw);
}
.mega-tab {
 font-size: calc(17/ 1920 * 100vw);
	font-weight: 500;
 border-radius: calc(18 / 1920 * 100vw);
	background-color: #D3D3D3;
	color: #ffffff;
	transition: background-color 0.3s ease;
	border: none;
 width: calc(113/ 1920 * 100vw);
 height: calc(33/ 1920 * 100vw);
	border-radius: 400px;
}
.mega-tab.active {
	background-color: #4c3b6f; /* Deep violet active state */
}
.mega-category-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
 row-gap: calc(24 / 1920 * 100vw);
 column-gap: calc(42 / 1920 * 100vw);
}
/* Individual Category Row */
.category-item {
	display: flex;
	align-items: center;
 gap: calc(20 / 1920 * 100vw);
	transition: transform 0.2s ease;
}
.category-item:hover {
 transform: translateX(calc(4 / 1920 * 100vw));
}
.category-icon-wrap {
 width: calc(60 / 1920 * 100vw);
 height: calc(60 / 1920 * 100vw);
	display: flex;
	align-items: center;
	justify-content: center;
}
.category-icon {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.category-name {
 font-size: calc(15 / 1920 * 100vw);
	color: #333333;
	font-weight: 400;
	line-height: 1.3;
}
.category-item:hover .category-name {
	color: #4c3b6f;
}
/* Right promotional banner styling */
.mega-menu-right {
	width: 27%;
	display: flex;
	flex-direction: column;
}
.promo-card {
 border-radius: calc(4 / 1920 * 100vw);
	overflow: hidden;
	width: 100%;
	display: flex;
	flex-direction: column;
}
.promo-img-wrap {
	width: 100%;
 height: calc(233/ 1920 * 100vw);
	position: relative;
	overflow: hidden;
}
.promo-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.promo-overlay-text {
	position: absolute;
 left: calc(26 / 1920 * 100vw);
 bottom: calc(16 / 1920 * 100vw);
 font-size: calc(18 / 1920 * 100vw);
	color: #ffffff;
	font-weight: normal;
	text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.promo-bottom-bar {
	background-color: #512D6D;
	color: #ffffff;
 padding: calc(14 / 1920 * 100vw) calc(26 / 1920 * 100vw);
 font-size: calc(15 / 1920 * 100vw);
	line-height: 1.4;
	font-weight: 400;
}
/* Gray Catalog Button Link below Promo */
.catalog-brochure-btn {
 margin-top: calc(43/ 1920 * 100vw);
 height: calc(52 / 1920 * 100vw);
	background-color: #DEDEDE;
 border-radius: calc(4 / 1920 * 100vw);
	display: flex;
	align-items: center;
	justify-content: space-between;
 padding: 0 calc(26 / 1920 * 100vw);
	transition: background-color 0.3s ease;
}
.catalog-brochure-btn:hover {
	background-color: #dadada;
}
.catalog-btn-text {
 font-size: calc(17/ 1920 * 100vw);
	color: #333333;
	font-weight: 500;
}
.catalog-arrow {
 width: calc(18 / 1920 * 100vw);
 height: calc(18 / 1920 * 100vw);
	fill: none;
	stroke: #ffffff; /* White arrow overlay */
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* Bottom Center Action close button */
.mega-menu-bottom-close {
	position: absolute;
 bottom: calc(28 / 1920 * 100vw);
	left: 50%;
	transform: translateX(-50%);
}
.close-menu-action {
	display: flex;
	align-items: center;
 gap: calc(8 / 1920 * 100vw);
	color: #111111;
 font-size: calc(17 / 1920 * 100vw);
	font-weight: 500;
	transition: color 0.3s ease;
	border: none;
	background: none;
}
.close-menu-action:hover {
	color: #4c3b6f;
}
.close-icon-cross {
 font-size: calc(14 / 1920 * 100vw);
}
/* ==========================================================================
   19. Series Spotlight Section Styles (PC base 1920px)
   ========================================================================== */
.series-spotlight-section {
	background-color: #ffffff;
 padding-top: calc(60 / 1920 * 100vw);
 padding-bottom: calc(60 / 1920 * 100vw);
}
.series-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
 gap: calc(24 / 1920 * 100vw);
}
/* Rounded Cards with Hidden Overflow */
.series-card {
	position: relative;
    /* aspect-ratio: 440 / 300; */ /* Visual golden-ratio of the design card */
    border-radius: calc(5/ 1920 * 100vw);
	overflow: hidden;
	display: block;
	background-color: #f7f7f7;
 height: calc(235/ 1920 * 100vw);
}
.series-bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.series-card:hover .series-bg-img {
	transform: scale(1.05);
}
/* Semi-Transparent Violet Bar Overlay */
.series-info-bar {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
 height: calc(60/ 1920 * 100vw);
	background-color: rgb(81 45 109 / 50%); /* Translucent purple backdrop matching design */
	/* backdrop-filter: blur(5px); */
	display: flex;
	align-items: center;
	justify-content: space-between;
 padding-left: calc(24 / 1920 * 100vw);
 padding-right: calc(24 / 1920 * 100vw);
	transition: background-color 0.3s ease;
}
.series-card:hover .series-info-bar {
	background-color: rgba(76, 59, 111, 0.9);
}
.series-name {
 font-size: calc(18 / 1920 * 100vw);
	color: #ffffff;
	font-weight: 500;
 letter-spacing: calc(0.3 / 1920 * 100vw);
}
.series-arrow-icon {
 width: calc(20 / 1920 * 100vw);
 height: calc(20 / 1920 * 100vw);
	fill: none;
	stroke: #ffffff;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.3s ease;
}
.series-card:hover .series-arrow-icon {
 transform: translateX(calc(4 / 1920 * 100vw));
}
.section_prolist .rec-card {
	background: #F0F0F0;
}
/* ==========================================================================
   21. Pagination Action Group Styles (PC base 1920px)
   ========================================================================== */
.pagination-action-group {
	display: flex;
	align-items: center;
	justify-content: center;
 gap: calc(12/ 1920 * 100vw); /* Visual gap between pages and CTA button */
 margin-top: calc(97/ 1920 * 100vw);
	width: 100%;
 padding-bottom: calc(129/ 1920 * 100vw);
/* justify-content: space-between; */
}
/* Page Numbers Pills */
.pagination-nav {
	display: flex;
 gap: calc(12 / 1920 * 100vw);
	align-items: center;
}
.pagination-cta {
	margin-left: 3vw;
}
.page-num {
 width: calc(70/ 1920 * 100vw);
 height: calc(40/ 1920 * 100vw);
 border-radius: calc(18 / 1920 * 100vw);
	background-color: #e9e9e9; /* Light grey inactive background */
	color: #999999;
 font-size: calc(20/ 1920 * 100vw);
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease, color 0.3s ease;
	border: none;
	background: #EBEBEB;
	border-radius: 20px;
}
.page-num:hover {
	background-color: #dedede;
	color: #666666;
}
.page-num.active {
	background-color: #4c3b6f; /* Deep violet active state */
	color: #ffffff;
	cursor: default;
}
/* Reusing previously defined .cta-button-light styles for .pagination-cta */
.pagination-cta .cta-button-light {
 border: calc(1 / 1920 * 100vw) solid #b5b5b5; /* Matching design border tone */
}
.section_prolist {
 padding-top: calc(60 / 1920 * 100vw);
}
/* ==========================================================================
   23. Maya Series Hero Banner Styles (PC base 1920px)
   ========================================================================== */
.maya-hero-section {
	position: relative;
	width: 100%;
	height: 100vh;
	background: url(../images/bg5.webp) no-repeat center bottom; /* Luxury bath room backdrop image */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: flex-end;
}
.maya-hero-container {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
 padding-bottom: calc(143/ 1920 * 100vw);
	/* width: calc(1400 / 1920 * 100vw); */
	width: 100%;
}
.maya-hero-left {
	display: flex;
	flex-direction: column;
}
.maya-model {
 font-size: calc(80/ 1920 * 100vw);
	color: #ffffff;
	font-weight: 700;
	line-height: 1.1;
}
.maya-title-main {
 font-size: calc(80/ 1920 * 100vw);
	color: #ffffff;
	font-weight: 700;
	line-height: 1.1;
 margin-top: calc(4 / 1920 * 100vw);
}
.maya-hero-right {
 width: calc(526 / 1920 * 100vw);
}
.maya-desc-para {
 font-size: calc(20/ 1920 * 100vw);
	color: #dddddd;
	line-height: 1.7;
 letter-spacing: calc(0.2 / 1920 * 100vw);
}
/* ==========================================================================
   24. Freshness & Elegance Gallery Section (PC base 1920px)
   ========================================================================== */
.gallery-section {
	background-color: #ffffff;
 padding-top: calc(163/ 1920 * 100vw);
 padding-bottom: calc(180/ 1920 * 100vw);
}
.gallery-header {
	text-align: center;
 margin-bottom: calc(83/ 1920 * 100vw);
}
.gallery-title {
 font-size: calc(50/ 1920 * 100vw);
	color: #000000;
	font-weight: 700;
 letter-spacing: calc(0.5 / 1920 * 100vw);
 margin-bottom: calc(54/ 1920 * 100vw);
}
.gallery-subtitle {
 font-size: calc(18 / 1920 * 100vw);
	color: #666666;
	line-height: 1.6;
 max-width: calc(820 / 1920 * 100vw);
	margin: 0 auto;
}
/* Gallery Slider container layout */
.gallery-slider-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.gallery-arrow {
	background: transparent;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #111111;
	transition: transform 0.2s ease, color 0.2s ease;
}
.gallery-arrow:hover {
	color: #4c3b6f;
}
.gallery-arrow:hover .chevron-svg {
	stroke: #fff;
}
.chevron-svg {
 width: calc(28 / 1920 * 100vw);
 height: calc(48 / 1920 * 100vw);
	fill: none;
	stroke: #000;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.gallery-arrow.arrow-left:hover {
 transform: translateX(calc(-4 / 1920 * 100vw));
}
.gallery-arrow.arrow-right:hover {
 transform: translateX(calc(4 / 1920 * 100vw));
}
.gallery-cards-grid {
 width: calc(1220 / 1920 * 100vw); /* Perfect offset leaving width for chevrons */
	display: grid;
	grid-template-columns: repeat(3, 1fr);
 gap: calc(30 / 1920 * 100vw);
}
.gallery-card {
	aspect-ratio: 380 / 460;
 border-radius: calc(12 / 1920 * 100vw);
	overflow: hidden;
	background-color: #f7f7f7;
}
.gallery-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.gallery-card:hover .gallery-img {
	transform: scale(1.03);
}
.floating1 {
 padding-left: calc(58 / 1920 * 100vw);
 padding-right: calc(58 / 1920 * 100vw);
	position: relative;
}
.floating1 img {
	width: 100%;
}
.floating1 .swiper-button-prev, .floating1 .swiper-button-next {
 width: calc(19 / 1920 * 100vw);
 height: calc(37 / 1920 * 100vw);
	background: url(../images/left.png) no-repeat center center;
	background-size: 100%;
}
.floating1 .swiper-button-next {
	background: url(../images/right.png) no-repeat center center;
	background-size: 100%;
}
.prolist .title {
	font-family: Myriad Pro;
	font-weight: bold;
 font-size: calc(50/ 1920 * 100vw);
	color: #000000;
 padding-bottom: calc(38/ 1920 * 100vw);
}
.prolist {
}
.prolist .rec-card {
	background-color: #DEDEDE;
}
/* ==========================================================================
   26. Product Configurator Section Styles (PC base 1920px)
   ========================================================================== */
.configurator-section {
	background-color: #ffffff;
 padding-top: calc(100 / 1920 * 100vw);
 padding-bottom: calc(180 / 1920 * 100vw);
}
.configurator-container {
	display: flex;
	justify-content: space-between;
    /* align-items: center; */
    /* width: calc(1400 / 1920 * 100vw); */
    padding-top: calc(253/ 1920 * 100vw);
}
/* Left Vertical Thumbnails column */
.config-thumbs-col {
	display: flex;
	flex-direction: column;
	align-items: center;
 gap: calc(12 / 1920 * 100vw);
 width: calc(78 / 1920 * 100vw);
}
.thumb-scroll-btn {
 width: calc(44 / 1920 * 100vw);
 height: calc(18 / 1920 * 100vw);
	background-color: #4c3b6f; /* Violet button theme */
 border-radius: calc(3 / 1920 * 100vw);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.thumb-scroll-btn:hover {
	background-color: #5d4987;
}
.arrow-mini-svg {
 width: calc(12 / 1920 * 100vw);
 height: calc(12 / 1920 * 100vw);
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.thumbs-list-wrap {
	display: flex;
	flex-direction: column;
 gap: calc(12 / 1920 * 100vw);
}
.thumb-item {
 width: calc(60 / 1920 * 100vw);
 height: calc(60 / 1920 * 100vw);
 border: calc(1 / 1920 * 100vw) solid #dddddd;
 border-radius: calc(6 / 1920 * 100vw);
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.2s ease;
}
.thumb-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.thumb-item:hover, .thumb-item.active {
	border-color: #4c3b6f;
}
/* Middle Main display frame column */
.config-main-col {
 width: calc(500/ 1920 * 100vw);
}
.main-display-frame {
	width: 100%;
	aspect-ratio: 1 / 1;
 border-radius: calc(4 / 1920 * 100vw);
	overflow: hidden;
	background-color: #fcfcfc;
 height: calc(500/ 1920 * 100vw);
}
.main-display-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Right specification info column */
.config-specs-col {
 width: calc(530 / 1920 * 100vw);
 margin-left: calc(130 / 1920 * 100vw);
}
.product-code-highlight {
 font-size: calc(42/ 1920 * 100vw);
	color: #111111;
	font-weight: 700;
	display: block;
 margin-bottom: calc(35/ 1920 * 100vw);
 letter-spacing: calc(0.3 / 1920 * 100vw);
 padding-top: calc(9/ 1920 * 100vw);
}
.specs-title {
 font-size: calc(27/ 1920 * 100vw);
	color: #111111;
	font-weight: 700;
	line-height: 1.45;
 margin-bottom: calc(12 / 1920 * 100vw);
}
.specs-desc {
 font-size: calc(23/ 1920 * 100vw);
	color: #666666;
 margin-bottom: calc(48/ 1920 * 100vw);
}
/* ==========================================================================
   27. Atmospheric Zone Banner (PC base 1920px)
   ========================================================================== */
.relaxation-zone-banner {
	width: 100%;
	/* height: calc(750 / 1920 * 100vw); */
	background: url(../images/bg6.webp) no-repeat center center; /* Neon bathroom ambient backdrop */
	background-size: cover;
	background-position: center;/* display: flex; *//* align-items: center; */
}
.relaxation-container {
	/* display: flex; */
	justify-content: center;
	align-items: center;
	height: 100%;
    padding-top: calc(83/ 1920 * 100vw);
 	padding-bottom: calc(862/ 1920 * 100vw);
}
.relaxation-text-block {
	text-align: right;
}
.relaxation-title-main {
 font-size: calc(60/ 1920 * 100vw);
	color: #ffffff;
	font-weight: 700;
 margin-bottom: calc(5 / 1920 * 100vw);
 letter-spacing: calc(0.5 / 1920 * 100vw);
}
.relaxation-title-sub {
 font-size: calc(60/ 1920 * 100vw);
	color: #ffffff;
	font-weight: 700;
 letter-spacing: calc(0.5 / 1920 * 100vw);
}
/* ==========================================================================
   29. Product Specifications Tab Styles (PC base 1920px)
   ========================================================================== */
.specs-tab-section {
	background-color: #ffffff;
 padding-top: calc(61/ 1920 * 100vw);
/* padding-bottom: calc(40 / 1920 * 100vw); */
}
/* Rounded Header Tabs */
.specs-tabs-nav {
	display: flex;
 gap: calc(27/ 1920 * 100vw);
 margin-bottom: calc(109/ 1920 * 100vw);
}
.spec-tab {
 width: calc(420/ 1920 * 100vw);
 height: calc(74/ 1920 * 100vw);
	background-color: #B6B5B5; /* Light grey inactive state */
	border-radius: 3333px;
	color: #ffffff;
 font-size: calc(31/ 1920 * 100vw);
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	justify-content: center;
 gap: calc(10 / 1920 * 100vw);
	cursor: pointer;
	transition: background-color 0.3s ease;
	border: none;
	position: relative;
}
.spec-tab:hover {
	background-color: #a5a5a5;
}
.spec-tab.active {
	background-color: #512D6D; /* Deep violet active state */
}
.tab-arrow-down {
 font-size: calc(30 / 1920 * 100vw);
	position: absolute;
	right: 0;
	width: 0;
	height: 0;
	border-style: solid;
 border-width: calc(18 / 1920 * 100vw) calc(18 / 1920 * 100vw) 0 calc(18 / 1920 * 100vw);
	border-color: #ffffff transparent transparent transparent;
 right: calc(20 / 1920 * 100vw);
	font-size: 0;
}
/* Specifications pane details styling */
.specs-pane {
	display: none; /* Hide non-active panes */
}
.specs-pane.active {
	display: block;
}
.pane-highlights-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
 gap: calc(115/ 1920 * 100vw);
 margin-bottom: calc(67/ 1920 * 100vw);
 padding-right: calc(152 / 1920 * 100vw);
}
.highlight-col-title {
 font-size: calc(28/ 1920 * 100vw);
	color: #111111;
	font-weight: 700;
 margin-bottom: calc(14 / 1920 * 100vw);
}
.highlight-col-text {
 font-size: calc(18/ 1920 * 100vw);
	color: #555555;
	line-height: 1.75;
	font-style: italic; /* Matches designer's thin description text */
	font-weight: 300;
}
.pane-bullets-list {
	list-style: none;
	display: flex;
	flex-direction: column;
 gap: calc(16 / 1920 * 100vw);
}
.pane-bullets-list li {
 font-size: calc(24/ 1920 * 100vw);
	color: #222222;
	line-height: 1.5;
	font-weight: normal;
}
/* ==========================================================================
   30. Similar Recommendations Grid (PC base 1920px)
   ========================================================================== */
.similar-rec-section {
	background-color: #ffffff;
 padding-top: calc(120 / 1920 * 100vw);
 padding-bottom: calc(134/ 1920 * 100vw);
}
.similar-rec-title {
 font-size: calc(40/ 1920 * 100vw);
	color: #000000;
	font-weight: 700;
 letter-spacing: calc(0.5 / 1920 * 100vw);
 margin-bottom: calc(48 / 1920 * 100vw);
}
.similar-rec-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
 gap: calc(60 / 1920 * 100vw);
 padding-bottom: calc(60 / 1920 * 100vw);
}
/* Product Card Styling */
.rec-product-card {
	background-color: #F0F0F0; /* Light subtle grey background */
 border-radius: calc(4 / 1920 * 100vw);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.rec-card-img-wrap {
	width: 100%;
 height: calc(400/ 1920 * 100vw);
	background-color: #eceef1; /* Slighting darker image bounding box background */
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #E6E6EB;
}
.rec-card-img {
	max-width: 73%;
	max-height: 73%;
	object-fit: contain;
	transition: transform 0.4s ease;
}
.rec-product-card:hover .rec-card-img {
	transform: scale(1.04);
}
.rec-card-details {
 padding: calc(24 / 1920 * 100vw) calc(20 / 1920 * 100vw);
	display: flex;
	flex-direction: column;
}
.rec-card-name {
 font-size: calc(25/ 1920 * 100vw);
	color: #111111;
	font-weight: 700;
 margin-bottom: calc(12 / 1920 * 100vw);
}
.rec-card-color {
 font-size: calc(21 / 1920 * 100vw);
	color: #666666;
 margin-bottom: calc(8 / 1920 * 100vw);
}
.rec-card-article {
 font-size: calc(21 / 1920 * 100vw);
	color: #999999;
}
.rec-action-wrap {
	display: flex;
	justify-content: center;
 margin-top: calc(56 / 1920 * 100vw);
}
/* ==========================================================================
   32. Characteristics Table Group Styles (PC base 1920px)
   ========================================================================== */
.specs-group {
 margin-bottom: calc(48 / 1920 * 100vw);
}
.specs-group:last-child {
 margin-bottom: calc(80 / 1920 * 100vw); /* Deep margin before recommended grid */
}
.specs-group-title {
 font-size: calc(18 / 1920 * 100vw);
	color: #000000;
	font-weight: 700;
 margin-bottom: calc(24 / 1920 * 100vw);
 letter-spacing: calc(0.2 / 1920 * 100vw);
}
.specs-table-list {
	list-style: none;
	display: flex;
	flex-direction: column;
}
/* Row key-value flex separation with solid light horizontal line */
.specs-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
 padding-top: calc(12 / 1920 * 100vw);
 padding-bottom: calc(12 / 1920 * 100vw);
 border-bottom: calc(1 / 1920 * 100vw) solid #eeeeee;
}
.specs-row:last-child {
 border-bottom: calc(1 / 1920 * 100vw) solid #dddddd; /* Darker line for category ending */
}
.specs-key {
 font-size: calc(14 / 1920 * 100vw);
	color: #333333;
	font-weight: 400;
}
.specs-val {
 font-size: calc(14 / 1920 * 100vw);
	color: #111111;
	font-weight: 700;
	text-align: right;
 padding-left: calc(24 / 1920 * 100vw); /* Prevent overlapping on ultra narrow layouts */
}
/* ==========================================================================
   34. Standalone Specs Section Styles (PC base 1920px)
   ========================================================================== */
.direct-specs-section {
	background-color: #ffffff;/* padding-top: calc(80 / 1920 * 100vw); */
}
.direct-specs-group {
 margin-bottom: calc(56 / 1920 * 100vw);
}
.direct-specs-group:last-child {
	margin-bottom: 0;
}
.direct-specs-title {
 font-size: calc(30 / 1920 * 100vw);
	color: #000000;
	font-weight: 700;
 margin-bottom: calc(28 / 1920 * 100vw);
 letter-spacing: calc(0.3 / 1920 * 100vw);
}
.direct-specs-table {
	display: flex;
	flex-direction: column;
}
/* Key-value row styling with crisp thin divider line */
.direct-specs-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
 padding-top: calc(14 / 1920 * 100vw);
 padding-bottom: calc(14 / 1920 * 100vw);
 border-bottom: calc(1 / 1920 * 100vw) solid #eeeeee;
}
.direct-specs-row:last-child {
 border-bottom: calc(1 / 1920 * 100vw) solid #cccccc; /* Emphasizes the ending of table group */
}
.direct-specs-key {
 font-size: calc(25/ 1920 * 100vw);
	color: #333333;
	font-weight: 400;
}
.direct-specs-val {
 font-size: calc(25/ 1920 * 100vw);
	color: #111111;
	font-weight: 700;
	text-align: right;
 padding-left: calc(20 / 1920 * 100vw);
}
/* ==========================================================================
   36. Downloads Pane Content Styles (PC base 1920px)
   ========================================================================== */
.downloads-pane-content {
	background-color: #ffffff;
	padding: 0;
	width: 100%;
}
.dl-group {
 margin-bottom: calc(48 / 1920 * 100vw);
}
.dl-group:last-child {
	margin-bottom: 0;
}
.dl-group-title {
 font-size: calc(38 / 1920 * 100vw);
	color: #000000;
	font-weight: 700;
 margin-bottom: calc(34 / 1920 * 100vw);
 letter-spacing: calc(0.2 / 1920 * 100vw);
}
.dl-list {
	display: flex;
	flex-direction: column;
}
/* Download Row Component */
.dl-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
 padding-top: calc(16 / 1920 * 100vw);
 padding-bottom: calc(16 / 1920 * 100vw);
 border-bottom: calc(1 / 1920 * 100vw) solid #eeeeee;
	transition: background-color 0.2s ease;
}
.dl-item:hover {
	background-color: #fafafc; /* Subtle light background highlight on hover */
}
.dl-item-left + img {
 width: calc(27/ 1920 * 100vw);
}
.dl-item-left {
	display: flex;
	align-items: center;
 gap: calc(27/ 1920 * 100vw);
}
.dl-icon {
 width: calc(40/ 1920 * 100vw);
 height: calc(40/ 1920 * 100vw);
	color: #111111;
}
.dl-item-name {
 font-size: calc(31/ 1920 * 100vw);
	color: #111111;
	font-weight: 500;
}
/* Downward arrow symbol on the right */
.dl-arrow-icon {
 width: calc(20 / 1920 * 100vw);
 height: calc(20 / 1920 * 100vw);
	color: #111111;
	transition: transform 0.2s ease;
}
.dl-item:hover .dl-arrow-icon {
 transform: translateY(calc(3 / 1920 * 100vw)); /* Soft downward indicator motion */
}
/* ==========================================================================
   38. Vertical Thumbnail Carousel Styles (PC base 1920px)
   ========================================================================== */
.thumb-carousel-widget {
	display: flex;
	flex-direction: column;
	align-items: center;
 gap: calc(12 / 1920 * 100vw);
 width: calc(78 / 1920 * 100vw);
}
/* Scroll Buttons */
.carousel-btn {
	width: 100%;
 height: calc(20 / 1920 * 100vw);
	background-color: #F1F1F1; /* Brand purple color */
	border: none;
 border-radius: calc(4 / 1920 * 100vw);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}
.carousel-btn:hover .chevron-svg {
	stroke: #fff
}
.carousel-btn:hover {
	background-color: #5d4987;
}
.carousel-btn.disabled {
	opacity: 0.3;
	cursor: not-allowed;
}
.chevron-svg {
 width: calc(14 / 1920 * 100vw);
 height: calc(14 / 1920 * 100vw);
}
/* Viewport constraints height to fit exactly 5 items and 4 gaps */
/* Item (70px) * 5 + Gap (12px) * 4 = 350px + 48px = 398px */
.carousel-viewport {
	width: 100%;
 height: calc(434/ 1920 * 100vw);
	position: relative;
	overflow: hidden;
}
/* Track holding all items */
.carousel-track {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
 gap: calc(10 / 1920 * 100vw);
	transition: top 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Individual Thumbnail */
.thumb-item {
	width: 100%;
 height: calc(78 / 1920 * 100vw);
 border: calc(1 / 1920 * 100vw) solid #dddddd;
 border-radius: calc(8 / 1920 * 100vw);
	overflow: hidden;
	cursor: pointer;
	background-color: #ffffff;
	transition: border-color 0.2s ease;
}
.thumb-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.thumb-item:hover, .thumb-item.active {
	border-color: #4c3b6f;
 border-width: calc(1.5 / 1920 * 100vw);
}
@font-face {
	font-family: 'MyriadPro-LightIt';
	src: url('../fonts/MyriadPro-Semibold.otf')
}
.dl-item-left img {
 width: calc(40 / 1920 * 100vw);
 height: calc(40 / 1920 * 100vw);
	object-fit: contain;
}
/* ==========================================================================
   40. Luxury Interior Ambient Banner Styles (PC base 1920px)
   ========================================================================== */
.interior-ambient-banner {
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
}
.interior-ambient-container {
	height: 100%;
	/* display: flex; */
	align-items: center;
 padding-top: calc(291/ 1920 * 100vw);
	/* padding-left: 0; */
    /* padding-right: 0; */
	width: 100%;
}
/* Offset positioning to align perfectly with the mock grid (left of glass seam) */
.ambient-text-block {
	display: flex;
	flex-direction: column;
 padding-left: calc(180 / 1920 * 100vw);
	padding-left: 0;
}
.ambient-subtitle {
 font-size: calc(36 / 1920 * 100vw);
	color: #222222;
	font-weight: 300; /* Crisp thin weight */
 letter-spacing: calc(1.5 / 1920 * 100vw);
 margin-bottom: calc(8 / 1920 * 100vw);
	line-height: 1.2;
}
.ambient-title {
 font-size: calc(44 / 1920 * 100vw);
	color: #000000;
	font-weight: 700; /* Bold weight */
 letter-spacing: calc(1 / 1920 * 100vw);
	line-height: 1.2;
}
/* ==========================================================================
   42. Group Introduction Section Styles (PC base 1920px)
   ========================================================================== */
.group-intro-section {
	background-color: #ffffff;
 padding-top: calc(90/ 1920 * 100vw);
 padding-bottom: calc(100 / 1920 * 100vw);
}
.group-intro-header {
 margin-bottom: calc(64/ 1920 * 100vw);
}
.group-intro-title {
 font-size: calc(50/ 1920 * 100vw);
	color: #000000;
	font-weight: 700;
	line-height: 1.25;
 letter-spacing: calc(0.5 / 1920 * 100vw);
	text-transform: uppercase;
}
/* Introduction Paragraph Layout */
.group-intro-desc {
 margin-bottom: calc(94/ 1920 * 100vw);
/* max-width: calc(1300 / 1920 * 100vw); */ /* Elegant line wrapping constraints */
}
.group-intro-desc p {
 font-size: calc(24/ 1920 * 100vw);
	color: #444444;
	line-height: 1.75;
 margin-bottom: calc(24 / 1920 * 100vw);
 letter-spacing: calc(0.2 / 1920 * 100vw);
}
.group-intro-desc p:last-child {
	margin-bottom: 0;
}
/* Wide Skyline Graphic Frame */
.group-skyline-banner {
	width: 100%;
	aspect-ratio: 1400 / 800; /* Matching wide proportion from mockup screen */
 border-radius: calc(4 / 1920 * 100vw);
	overflow: hidden;
	position: relative;
	background-color: #f7f7f7;
}
.skyline-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* White centered bottom caption text inside skyline photo */
.skyline-overlay-text {
	position: absolute;
 bottom: calc(40 / 1920 * 100vw);
	left: 50%;
	transform: translateX(-50%);
 font-size: calc(20 / 1920 * 100vw);
	color: #ffffff;
	font-weight: 500;
 letter-spacing: calc(1 / 1920 * 100vw);
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
	text-transform: lowercase; /* Lowercase matching design brand language */
	width: 100%;
	bottom: 0;
	text-align: center;
	line-height: 4;
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(5px);
	background-color: rgba(0, 0, 0, 0.005);
}
/* ==========================================================================
   44. Qualifications Carousel Section Styles (PC base 1920px)
   ========================================================================== */
.qualifications-section {
	background-color: #ffffff;
 padding-top: calc(100 / 1920 * 100vw);
 padding-bottom: calc(143/ 1920 * 100vw);
}
.qualifications-wrapper {
	display: flex;
	flex-direction: column;
}
.qual-section-header {
 margin-bottom: calc(151/ 1920 * 100vw);
}
.qual-section-title {
 font-size: calc(50/ 1920 * 100vw);
	color: #000000;
	font-weight: 700;
	line-height: 1.25;
}
/* Outer frame layout containing left & right buttons */
.qual-carousel-outer {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
/* 1. Carousel Viewport Mask (Item Width: 380px * 3 + Gap: 30px * 2 = 1200px) */
.qual-carousel-viewport {
 width: calc(1200 / 1920 * 100vw);
	height: auto;
	overflow: hidden;
	position: relative;
}
/* 2. Flex Track (Translates horizontally with hardware acceleration) */
.qual-carousel-track {
	/* display: flex; */
    /* gap: calc(30 / 1920 * 100vw); */
    /* width: max-content; */
    /* position: relative; */
	left: 0;/* transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); *//* will-change: transform; */
}
/* 3. Rounded Card Component (Width: 380px) */
.qual-card-item {
	flex-shrink: 0;
	width: 100%;
	background-color: rgb(66 66 66 / 86%); /* Slate grey backdrop */
 border-radius: calc(30 / 1920 * 100vw);
 height: calc(520/ 1920 * 100vw);
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
 box-shadow: 0 calc(10 / 1920 * 100vw) calc(30 / 1920 * 100vw) rgba(0, 0, 0, 0.1);
}
.qual-card-watermark img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}
.qual-card-watermark {
	position: absolute;
	width: 100%;
	height: 100%;
	background-position: center;
	opacity: 0.15;
	pointer-events: none;
	z-index: 1;
}
.qual-card-content img {
height: calc(177/ 1920 * 100vw);
}
.qual-card-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
 padding: calc(30 / 1920 * 100vw);
}
.trophy-icon {
 width: calc(72 / 1920 * 100vw);
 height: calc(72 / 1920 * 100vw);
	color: #ffffff;
 margin-bottom: calc(40 / 1920 * 100vw);
}
.qual-card-sub {
 padding-top: calc(32/ 1920 * 100vw);
 font-size: calc(24/ 1920 * 100vw);
	color: #ffffff;
	font-weight: 700;
 letter-spacing: calc(0.5 / 1920 * 100vw);
}
.qual-card-line {
 width: calc(32 / 1920 * 100vw);
 height: calc(2 / 1920 * 100vw);
	background-color: #ffffff;
 margin-top: calc(12 / 1920 * 100vw);
 margin-bottom: calc(16 / 1920 * 100vw);
}
.qual-card-main {
 font-size: calc(24/ 1920 * 100vw);
	color: #fff; /* Bronze gold primary color */
	font-weight: 700;
	line-height: 1.4;
 max-width: calc(300 / 1920 * 100vw);
	line-height: 1.5;
}
/* External Navigation Chevrons */
.qual-nav-btn {
	background: transparent;
	border: none;
	cursor: pointer;
	color: #111111;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
	padding: 0;
}
.qual-nav-btn:hover {
	color: #4c3b6f;
}
.qual-nav-btn.disabled {
	opacity: 0.2;
	cursor: not-allowed;
}
.chevron-svg {
 width: calc(58 / 1920 * 100vw);
 height: calc(58 / 1920 * 100vw);
	opacity: .2;
	stroke-width: 1;
}
.qual-nav-btn.btn-prev:hover:not(.disabled) {
 transform: translateX(calc(-4 / 1920 * 100vw));
}
.qual-nav-btn.btn-next:hover:not(.disabled) {
 transform: translateX(calc(4 / 1920 * 100vw));
}
.cbanner {
	overflow: hidden;
}
/* ==========================================================================
   46. Bento Grid Corporate Values Styles (PC base 1920px)
   ========================================================================== */
.values-section {
	background-color: #ffffff;
 padding-top: calc(101/ 1920 * 100vw);
 padding-bottom: calc(260/ 1920 * 100vw);
}
.values-main-title {
 font-size: calc(50/ 1920 * 100vw);
	color: #000000;
	font-weight: 700;
 letter-spacing: calc(0.5 / 1920 * 100vw);
 margin-bottom: calc(82/ 1920 * 100vw);
}
/* Master Bento Grid Configuration */
/* Row-height strategy: Row 1 & 4 = 300px; Middle Rows (2 & 3) = 240px each */
.values-bento-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
 grid-template-rows: calc(552/ 1920 * 100vw) calc(500/ 1920 * 100vw) calc(500/ 1920 * 100vw) calc(670/ 1920 * 100vw);
 gap: calc(60 / 1920 * 100vw);
	width: 100%;
}
/* Base Card Styles */
.value-card {
	position: relative;
 border-radius: calc(50/ 1920 * 100vw);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #333333;
}
.value-card-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
	opacity: 0.55; /* Soft background darkening for text contrast */
}
.value-card:hover .value-card-bg {
	transform: scale(1.04);
}
.value-card-content {
	position: relative;
	z-index: 2;
	text-align: center;
 padding: calc(50 / 1920 * 100vw);
	text-align: left;
}
.value-card-title {
 font-size: calc(40/ 1920 * 100vw);
	color: #ffffff;
	font-weight: 700;
 margin-bottom: calc(8 / 1920 * 100vw);
 letter-spacing: calc(0.2 / 1920 * 100vw);
}
.value-card-desc {
 font-size: calc(38/ 1920 * 100vw);
	color: rgba(255, 255, 255, 0.75);
	line-height: 1.4;
}
/* CSS Grid Bento Spans Placement mapping */
.card-top-full {
	grid-column: 1 / 3;
	grid-row: 1 / 2;
}
.card-left-tall {
	grid-column: 1 / 2;
	grid-row: 2 / 4; /* Spans across middle row 2 and 3 */
}
.card-right-upper {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
}
.card-right-lower {
	grid-column: 2 / 3;
	grid-row: 3 / 4;
}
.card-bottom-full {
	grid-column: 1 / 3;
	grid-row: 4 / 5;
}
.last .value-card-content {
	padding-left: 20%;
	padding-right: 20%;
}
/* ==========================================================================
   48. Contact Us Section & Form Styles (PC base 1920px)
   ========================================================================== */
.contact-section {
	background-color: #ffffff;
 padding-top: calc(80/ 1920 * 100vw);
 padding-bottom: calc(140 / 1920 * 100vw);
}
.contact-info-block {
	display: flex;
	flex-direction: column;
}
.contact-main-title {
 font-size: calc(56/ 1920 * 100vw);
	color: #000000;
	font-weight: 700;
 margin-bottom: calc(48 / 1920 * 100vw);
 letter-spacing: calc(0.5 / 1920 * 100vw);
}
.contact-group {
 margin-bottom: calc(64/ 1920 * 100vw);
}
.contact-label {
 font-size: calc(25/ 1920 * 100vw);
	color: #858484;
	display: block;
 margin-bottom: calc(23/ 1920 * 100vw);
}
.contact-value {
 font-size: calc(35/ 1920 * 100vw);
	color: #111111;
	font-weight: 700;
}
.contact-subvalue {
 font-size: calc(35/ 1920 * 100vw);
	color: #555555;
 margin-top: calc(4 / 1920 * 100vw);
	font-weight: 300;
}
/* Contact upper capsule buttons */
.contact-buttons-row {
	display: flex;
 gap: calc(24/ 1920 * 100vw);
 margin-bottom: calc(130/ 1920 * 100vw);
 margin-top: calc(-21/ 1920 * 100vw);
}
.contact-pill-btn {
 height: calc(62/ 1920 * 100vw);
 padding: 0 calc(28 / 1920 * 100vw);
 border-radius: calc(333/ 1920 * 100vw);
 font-size: calc(23/ 1920 * 100vw);
	font-weight: 700;
 letter-spacing: calc(0.5 / 1920 * 100vw);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}
.contact-pill-btn.btn-dark {
	background-color: #000000;
	color: #ffffff;
}
.contact-pill-btn.btn-dark:hover {
	background-color: #333333;
}
.contact-pill-btn.btn-outline {
	background-color: #ffffff;
 border: calc(1 / 1920 * 100vw) solid #000000;
	color: #000000;
}
.contact-pill-btn.btn-outline:hover {
	background-color: #000000;
	color: #ffffff;
}
/* Lower 50/50 Card Split container */
.contact-split-wrap {
	display: flex;
	width: 100%;
 height: calc(732/ 1920 * 100vw);
	overflow: hidden;
 border-radius: calc(4 / 1920 * 100vw);
}
/* Left Promo Image Column */
.contact-promo-card {
	width: 52%;
	height: 100%;
	background: url(../images/bg10.jpg) no-repeat center center; /* Ambient faucet girl background image */
	background-size: cover;
	background-position: center;
 padding: calc(40/ 1920 * 100vw);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.promo-text-top {
 font-size: calc(35/ 1920 * 100vw);
	color: #ffffff;
	font-weight: 500;
	line-height: 1.45;
 max-width: calc(480 / 1920 * 100vw);
}
.promo-text-bottom {
	display: flex;
	flex-direction: column;
}
.promo-email-label {
 font-size: calc(40/ 1920 * 100vw);
	color: rgba(255, 255, 255, 0.7);
 margin-bottom: calc(4 / 1920 * 100vw);
}
.promo-email-address {
 font-size: calc(40/ 1920 * 100vw);
	color: #ffffff;
	font-weight: 700;
 letter-spacing: calc(0.5 / 1920 * 100vw);
}
/* Right Light Grey feedback form column */
.contact-feedback-form {
	width: 50%;
	height: 100%;
	background-color: #F7F8F8; /* Light grey backdrop */
 padding: calc(30 / 1920 * 100vw);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
 padding-bottom: calc(70 / 1920 * 100vw);
	padding-bottom: 0;
 padding-bottom: calc(43/ 1920 * 100vw);
}
.form-header-title {
 font-size: calc(21/ 1920 * 100vw);
	color: #111111;
	font-weight: 700;
	line-height: 1.45;
}
.form-inputs-group {
	display: flex;
	flex-direction: column;
 gap: calc(12 / 1920 * 100vw);
}
.form-field {
	width: 100%;
 height: calc(60/ 1920 * 100vw);
	background-color: #ffffff;
 border: calc(1 / 1920 * 100vw) solid #dddddd;
 border-radius: calc(6 / 1920 * 100vw);
 padding: 0 calc(20/ 1920 * 100vw);
 font-size: calc(18 / 1920 * 100vw);
	color: #222222;
	outline: none;
	transition: border-color 0.2s ease;
	background: none;
}
 .form-field::placeholder {
 color: #aaaaaa;
}
.form-field:focus {
	border-color: #4c3b6f; /* Highlights with brand purple */
}
/* Textarea height override */
.form-field.text-area {
 height: calc(160 / 1920 * 100vw);
 padding: calc(14 / 1920 * 100vw) calc(16 / 1920 * 100vw);
	resize: none;
	font-family: inherit;
}
.form-consent-text {
 font-size: calc(19 / 1920 * 100vw);
	color: #777777;
	line-height: 1.4;
 margin-bottom: calc(68 / 1920 * 100vw);
}
.form-submit-btn .cta-text {
	color: #000;
}
/* Submit button centered on flex end of form container */
.form-submit-btn {
 margin-right: calc(34 / 1920 * 100vw);
	align-self: flex-end;
	border: none;
	background: none;
	border: 1px solid #000000;
	color: #000000;
}
.cbanner {
	position: relative;
}
.cbanner .title {
	position: absolute;
	width: 100%;
	text-align: center;
	left: 0;
	top: 10vw;
	font-family: Myriad Pro;
	font-weight: bold;
 font-size: calc(141/ 1920 * 100vw);
	color: #B49478;
}
/* ==========================================================================
   50. Brand Presentation Ambient Banner Styles (PC base 1920px)
   ========================================================================== */
.brand-pres-banner {
	width: 100%;
	background: url(../images/bg12.jpg) no-repeat center center; /* Dark marble washbasin ambient bg */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
    /* display: flex; */
    padding-top: calc(151/ 1920 * 100vw);
 height: calc(1080/ 1920 * 100vw);
}
.brand-pres-container {
	height: 100%;/* display: flex; *//* align-items: center; */
}
/* Align text block to upper-center left column */
.pres-text-block {
	display: flex;
	flex-direction: column;
 padding-bottom: calc(40 / 1920 * 100vw); /* Shift slightly upwards */
}
.pres-main-title {
 font-size: calc(50/ 1920 * 100vw);
	color: #B49478; /* Bronze-gold title color */
	font-weight: 700;
 margin-bottom: calc(120/ 1920 * 100vw);
 letter-spacing: calc(0.5 / 1920 * 100vw);
}
.pres-subtitle {
 font-size: calc(40/ 1920 * 100vw);
	color: #B49478;
	font-weight: 500;
 margin-bottom: calc(46 / 1920 * 100vw);
}
.pres-separator-line {
 width: calc(30 / 1920 * 100vw);
 height: calc(1 / 1920 * 100vw);
	background-color: #bfa68a;
 margin-bottom: calc(16 / 1920 * 100vw);
}
.pres-desc-text {
 font-size: calc(25/ 1920 * 100vw);
	color: #B49478; /* Muted semi-transparent bronze */
	line-height: 1.75;
 max-width: calc(480 / 1920 * 100vw);
 letter-spacing: calc(0.2 / 1920 * 100vw);
}
/* ==========================================================================
   52. News Category Ambient Banner Styles (PC base 1920px)
   ========================================================================== */
.news-ambient-banner {
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: flex-end; /* Align contents towards the bottom edge */
}
.news-banner-container {
	height: 100%;
	display: flex;
	align-items: flex-end;
 padding-bottom: calc(150 / 1920 * 100vw);
	/* padding-left: 0; */
    /* padding-right: 0; */
	width: 100%;
}
.news-banner-content {
	display: flex;
	flex-direction: column;
}
.news-ambient-title {
 font-size: calc(75/ 1920 * 100vw);
	color: #ffffff;
	font-weight: 700;
 margin-bottom: calc(60/ 1920 * 100vw);
 letter-spacing: calc(0.5 / 1920 * 100vw);
}
/* Category Filter Buttons Row */
.news-category-pills {
	display: flex;
 gap: calc(12 / 1920 * 100vw);
}
.news-cat-pill {
 height: calc(56/ 1920 * 100vw);
 width: calc(414 / 1920 * 100vw);
 border-radius: calc(232 / 1920 * 100vw);
 font-size: calc(31/ 1920 * 100vw);
	color: #ffffff;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
}
/* Active Pill State */
.news-cat-pill.active {
	background-color: #512D6D; /* Brand purple */
	border: none;
}
/* Inactive Outline State */
.news-cat-pill:not(.active) {
	background-color: rgba(10, 10, 10, 0.65); /* Translucent dark body */
 border: calc(1 / 1920 * 100vw) solid #ffffff; /* Crisp thin white outline */
}
.news-cat-pill:not(.active):hover {
	background-color: rgba(76, 59, 111, 0.45); /* Soft violet tint on hover */
	border-color: #4c3b6f;
}
/* ==========================================================================
   54. News Article List Group Styles (PC base 1920px)
   ========================================================================== */
.news-list-section {
	background-color: #ffffff;
 padding-top: calc(130 / 1920 * 100vw);
 padding-bottom: calc(100 / 1920 * 100vw);
}
.news-list-container {
	display: flex;
	flex-direction: column;
 gap: calc(90/ 1920 * 100vw); /* Gap distance between article rows */
}
/* Horizontal Row Component */
.article-row-item {
	display: flex;
	justify-content: space-between;
	/* align-items: center; */
	width: 100%;
}
/* Left Image Box (Width: 560px) */
.article-img-wrap {
 width: calc(600/ 1920 * 100vw);
 height: calc(350 / 1920 * 100vw);
 border-radius: calc(4 / 1920 * 100vw);
	overflow: hidden;
	background-color: #f7f7f7;
	flex-shrink: 0;
}
.article-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.article-row-item:hover .article-img {
	transform: scale(1.02);
}
/* Right Details Box (Width: 600px with 60px gap padding) */
.article-details-col {
 width: calc(524 / 1920 * 100vw);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
 margin-right: calc(99/ 1920 * 100vw);
}
.article-row-title {
 font-size: calc(25 / 1920 * 100vw);
	color: #111111;
	font-weight: 700;
	line-height: 1.35;
 margin-bottom: calc(40 / 1920 * 100vw);
}
.article-row-date {
 font-size: calc(14 / 1920 * 100vw);
	color: #000;
 margin-bottom: calc(28 / 1920 * 100vw);
	display: block;
	opacity: .7;
}
.article-row-excerpt {
 font-size: calc(18/ 1920 * 100vw);
	color: #555555;
	line-height: 1.75;
 margin-bottom: calc(37 / 1920 * 100vw);
	display: -webkit-box;
	-webkit-line-clamp: 4; /* Clamps to exactly 4 rows for clean aesthetics */
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.pagination-action-group.bet {
	justify-content: space-between;
}
/* Page Control Arrows */
.page-arrow {
	background: transparent;
	border: none;
	cursor: pointer;
	color: #cccccc; /* Light grey default color matching mock */
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.2s ease, transform 0.2s ease;
	padding: 0;
}
.page-arrow:hover {
	color: #4c3b6f; /* Brand purple highlights on hover */
}
.page-arrow.disabled {
	opacity: 0.15;
	cursor: not-allowed;
}
.pagination-chevron {
 width: calc(28 / 1920 * 100vw);
 height: calc(48 / 1920 * 100vw);
}
.page-arrow.arrow-prev:hover:not(.disabled) {
 transform: translateX(calc(-3 / 1920 * 100vw));
}
.page-arrow.arrow-next:hover:not(.disabled) {
 transform: translateX(calc(3 / 1920 * 100vw));
}
/* ==========================================================================
   58. News Detail Section Styles (PC base 1920px)
   ========================================================================== */
.article-detail-section {
	background-color: #ffffff;
 padding-top: calc(70 / 1920 * 100vw);
 padding-bottom: calc(130 / 1920 * 100vw);
}
.article-top-category {
 font-size: calc(50/ 1920 * 100vw);
	color: #000000;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
 margin-bottom: calc(93 / 1920 * 100vw);
}
.article-detail-header {
 margin-bottom: calc(113/ 1920 * 100vw);
}
.article-detail-title {
 font-size: calc(30 / 1920 * 100vw);
	color: #111111;
	font-weight: 700;
	line-height: 1.35;
 margin-bottom: calc(26 / 1920 * 100vw);
}
/* Metadata formatting */
.article-detail-meta {
	display: flex;
 gap: calc(40/ 1920 * 100vw);
}
.meta-item {
 font-size: calc(14 / 1920 * 100vw);
	color: #999999;
	display: inline-flex;
	align-items: center;
 gap: calc(8 / 1920 * 100vw);
	display: flex;
}
.meta-item img {
 width:calc(18 / 1920 * 100vw);
}
.meta-svg {
 width: calc(14 / 1920 * 100vw);
 height: calc(14 / 1920 * 100vw);
}
/* Inner reading column alignment */
.article-reading-col {
	margin-left: auto;
	margin-right: auto;
}
.article-sub-category {
 font-size: calc(20/ 1920 * 100vw);
	/* Bronze-gold subcategory color */
	font-weight: 700;
 letter-spacing: calc(0.5 / 1920 * 100vw);
	text-transform: uppercase;
 margin-bottom: calc(20 / 1920 * 100vw);
}
.article-lead-paragraph {
 font-size: calc(20 / 1920 * 100vw);
	color: #111111;
	font-weight: 700;
	line-height: 1.5;
 margin-bottom: calc(28 / 1920 * 100vw);
}
.article-paragraph {
 font-size: calc(20/ 1920 * 100vw);
	color: #444444;
	line-height: 1.75;
 margin-bottom: calc(24 / 1920 * 100vw);
}
/* Full Width Featured Image (1400px) */
.article-featured-image-wrap {
	width: 100%;
 height: calc(700 / 1920 * 100vw);
 border-radius: calc(4 / 1920 * 100vw);
	overflow: hidden;
 margin-top: calc(44 / 1920 * 100vw);
 margin-bottom: calc(44 / 1920 * 100vw);
}
.article-featured-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Bottom pagination buttons row */
.article-bottom-navigation {
	display: flex;
	justify-content: space-between;
	align-items: center;
 margin-top: calc(120 / 1920 * 100vw);
    /* border-top: calc(1 / 1920 * 100vw) solid #eeeeee; */
    /* padding-top: calc(40 / 1920 * 100vw); */
    padding: 0px calc(68 / 1920 * 100vw);
}
.nav-pill-btn {
 height: calc(40 / 1920 * 100vw);
 border: calc(1 / 1920 * 100vw) solid #b5b5b5; /* Light boundary line matching mock */
 border-radius: calc(20 / 1920 * 100vw);
	display: inline-flex;
	align-items: center;
	transition: background-color 0.3s ease, border-color 0.3s ease;
	position: relative;
}
.nav-pill-btn:hover {
	border-color: #4c3b6f;
	background-color: #fcfbfe;
}
.nav-pill-text {
 font-size: calc(14 / 1920 * 100vw);
	color: #333333;
	font-weight: 500;
}
.nav-pill-btn.btn-next .nav-arrow-badge {
	left: auto;
 right: calc(-18 / 1920 * 100vw);
}
.nav-arrow-badge {
 width: calc(39 / 1920 * 100vw);
 height: calc(39 / 1920 * 100vw);
	background-color: #4c3b6f; /* Deep violet active state */
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	position: absolute;
 left: calc(-18 / 1920 * 100vw);
}
.nav-arrow-svg {
 width: calc(24 / 1920 * 100vw);
 height: calc(24 / 1920 * 100vw);
	stroke-width: .6;
}
/* Padding adjustments base on left/right badge positioning */
.nav-pill-btn.btn-prev {
 padding: 0 calc(17/ 1920 * 100vw) 0 calc(20/ 1920 * 100vw);
/* position: absolute; */
}
.nav-pill-btn.btn-prev .nav-pill-text {
 margin-left: calc(14 / 1920 * 100vw);
}
.nav-pill-btn.btn-next {
 padding: 0 calc(20/ 1920 * 100vw) 0 calc(17/ 1920 * 100vw);
}
.nav-pill-btn.btn-next .nav-pill-text {
 margin-right: calc(14 / 1920 * 100vw);
}
.alertmodel {
	position: fixed;
	left: 0px;
	top: 00px;
	right: 0px;
	bottom: 0px;
	z-index: 99999;
	background: rgba(0, 0, 0, .6);
	display: none;
}
.alertmodel .center {
	position: absolute;
	top: 50%;
	left: 50%;
	-o-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 1400px;
	max-width: 90%;
}
.alertmodel .center .close {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	background: url(../images/close.png) no-repeat center center;
	background-size: 52%;
	z-index: 999;
}
.alertmodel .center video {
	width: 100%;
	max-height: 70vh;
	object-fit: cover;
}
.mobile-inner-nav .slide, .mobile-inner-nav .downs {
	display: none;
}
.mobile-inner-nav .downs a {
	text-indent: 4em !important;
}
.mobile-inner-nav .sub a {
	display: block;
	text-indent: 3em;
}
.mobile-inner-nav span {
	width: 50px;
	height: 50px;
	float: right;
	margin-right: 15px;
	background: url(../images/add.png) no-repeat 95% center;
	background-size: 20px;
}
.mobile-inner-nav span.minus {
	background: url(../images/minus.png) no-repeat 95% center;
	background-size: 20px;
}