:root{
	--bg:#070b08;
	--bg-light:#0d1410;
	--green:#63d46a;
	--green-light:#9dff9b;
	--gold:#d5b36a;
	--gold-light:#f0d59a;
	--text:#ffffff;
	--text-light:#cfcfcf;
	--border:rgba(255,255,255,.12);
	--radius:18px;
	--transition:.35s ease;
}

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

html{
	scroll-behavior:smooth;
}

body{
	font-family:'Manrope',sans-serif;
	font-size:16px;
	color:var(--text);
	background:var(--bg);
	line-height:1.7;
	overflow-x:hidden;
}

img{
	display:block;
	max-width:100%;
}

a{
	text-decoration:none;
	color:inherit;
}

ul{
	list-style:none;
}

.container{
	max-width:1580px;
	margin:auto;
	padding:0 40px;
}

/* ===========================
	HEADER
=========================== */



.header{
	position:absolute;
	top:20px;
	left:50%;
	transform:translateX(-50%);

	width:calc(100% - 40px);
	max-width:1580px;

	z-index:1000;

	background:linear-gradient(
		180deg,
		rgba(12,17,14,.82),
		rgba(6,10,8,.74)
	);

	backdrop-filter:blur(18px);
	-webkit-backdrop-filter:blur(18px);

	border:1px solid rgba(196,164,92,.18);

	border-radius:20px;

	box-shadow:
		0 15px 45px rgba(0,0,0,.45),
		inset 0 1px 0 rgba(255,255,255,.04);
	padding: 10px 0;
}
.header .container{
	display:grid;
	grid-template-columns:260px 1fr 220px;
	align-items:center;
}

.logo{
	display:flex;
	align-items:center;
}

.logo img{
	height: 65px;
}

.nav{
	display:flex;
	justify-content:center;
}

.nav ul{
	display:flex;
	align-items:center;
	gap:54px;
}

.nav a{
	position:relative;
	font-size:15px;
	font-weight:500;
	color:#d7d7d7;
	transition:.35s;
}

.nav a::after{
	content:"";
	position:absolute;
	left:50%;
	bottom:-8px;
	width:0;
	height:1px;
	background:#d5b36a;
	transform:translateX(-50%);
	transition:.35s;
}

.nav a:hover{
	color:#fff;
}

.nav a:hover::after{
	width:100%;
}

.header-actions{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:18px;
}

.cart{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	width:54px;
	height:54px;
	border-radius:50%;
	border:1px solid rgba(213,179,106,.25);
	background:rgba(0,0,0,.18);
	backdrop-filter:blur(20px);
	transition:.35s;
}

.cart:hover{
	border-color:#d5b36a;
	box-shadow:0 0 25px rgba(213,179,106,.18);
}

.cart svg{
	width:22px;
	height:22px;
	fill:#ffffff;
}

.cart span{
	position:absolute;
	top:-3px;
	right:-1px;
	width:18px;
	height:18px;
	border-radius:50%;
	background:#1ea6ff;
	color:#fff;
	font-size:11px;
	font-weight:600;
	display:flex;
	align-items:center;
	justify-content:center;
}

.login-btn{
	height:54px;
	padding:0 38px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border-radius:999px;
	border:1px solid rgba(213,179,106,.45);
	background:rgba(0,0,0,.18);
	backdrop-filter:blur(20px);
	color:#fff;
	font-size:15px;
	font-weight:500;
	transition:.35s;
}

.login-btn:hover{
	border-color:#e8c87d;
	color:#fff;
	box-shadow:0 0 30px rgba(213,179,106,.18);
}

/* ===========================
	HERO
=========================== */

.hero{
	position:relative;
	min-height:100vh;
	display:flex;
	align-items:center;
	overflow:hidden;
	background:#060907;
}

.hero-bg{
	position:absolute;
	inset:0;
	/* background:url("../images/bg/hero-bg.webp") center center/cover no-repeat; */
	transform:scale(1.05);
}

.hero-bg::before{
	content:"";
	position:absolute;
	inset:0;
	background: linear-gradient(to right, rgb(5 8 7 / 43%) 10%, rgb(5 8 7 / 9%) 45%, rgb(5 8 7 / 10%) 100%);
}

.hero-bg::after{
	content:"";
	position:absolute;
	inset:0;
	background: linear-gradient(to top, rgb(5 8 7 / 30%), rgba(5, 8, 7, .15));
}

.hero-content{
	position:relative;
	z-index:2;
	display:grid;
	grid-template-columns:1fr 1fr;
	align-items:center;
	gap:40px;
	padding-top:120px;
	padding-bottom:80px;
}

.hero-left{
	max-width:560px;
}

.hero-label{
	font-family:"Cinzel",serif;
	font-size:15px;
	font-weight:500;
	letter-spacing:4px;
	text-transform:uppercase;
	color:#c8a868;
}

.hero-label::before{
	content:"";
	width:42px;
	height:1px;
	background:var(--gold);
}

.hero h1{
	font-family:"Cinzel",serif;
	font-size:92px;
	font-weight:600;
	line-height:.92;
	letter-spacing:2px;
	color:#efe2be;
	text-shadow:
		0 0 18px rgba(0,0,0,.45),
		0 3px 20px rgba(0,0,0,.6);
}

.hero p{
    max-width: 500px;
    font-size: 20px;
    color: var(--text-light);
    margin-bottom: 42px;
    font-family: "Cormorant Infant", serif;
    font-weight: 700;
    letter-spacing: .51px;
}

.hero-buttons{
	display:flex;
	align-items:center;
	gap:20px;
	flex-wrap:wrap;
}

.hero-right{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	position:relative;
}

.hero-right img{
	width:100%;
	max-width:700px;
	filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));
	z-index:2;
}

.hero-glow{
	position:absolute;
	width:450px;
	height:450px;
	border-radius:50%;
	filter:blur(120px);
	opacity:.25;
	pointer-events:none;
}

.hero-glow-left{
	left:-180px;
	top:220px;
	background:#48b45c;
}

.hero-glow-right{
	right:-150px;
	top:120px;
	background:#d4a94d;
}

.hero{
	position:relative;
	min-height:100vh;
	overflow:hidden;
	background:#060907;
}

.hero-bg{
	position:absolute;
	inset:0;
	background: url("../images/bg/hero-bg.webp") center/cover;
}

.hero-image{
	position:absolute;
	right:0;
	bottom:0;
	width:min(55vw,900px);
	pointer-events:none;
	user-select:none;
	z-index:2;
	filter:
		drop-shadow(0 30px 80px rgba(0,0,0,.65));
}

.hero-overlay{
	position:absolute;
	inset:0;
	background:
		linear-gradient(90deg,
			rgba(6,9,7,.95) 0%,
			rgba(6,9,7,.75) 35%,
			rgba(6,9,7,.35) 60%,
			rgba(6,9,7,.15) 100%);
	z-index:1;
}

.hero-content{
	position:relative;
	z-index:3;
}


/* ===========================
	BUTTONS
=========================== */

.btn{
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:12px;
	height:60px;
	padding:0 34px;
	border-radius:999px;
	text-decoration:none;
	overflow:hidden;
	cursor:pointer;
	transition:all .35s ease;
	backdrop-filter:blur(14px);
	-webkit-backdrop-filter:blur(14px);

	font-family:"Marcellus",serif;
	font-size:16px;
	font-weight:400;
	letter-spacing:.8px;
	text-transform:uppercase;
}

.btn span,
.btn svg{
	position:relative;
	z-index:2;
	transition:.35s;
}

/* ===========================
	PRIMARY
=========================== */

.btn-primary{

	color:#f6f2e6;

	background:
		linear-gradient(
			180deg,
			#3b6b4e 0%,
			#2b523d 45%,
			#193126 100%
		);

	border:1px solid rgba(113,170,123,.28);

	box-shadow:
		0 10px 35px rgba(18,55,38,.45),
		0 0 30px rgba(56,112,78,.18),
		inset 0 1px 0 rgba(255,255,255,.12),
		inset 0 -8px 18px rgba(0,0,0,.28);

}

.btn-primary::before{

	content:"";

	position:absolute;

	left:-120%;
	top:0;

	width:70%;
	height:100%;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(255,255,255,.15),
			transparent
		);

	transform:skewX(-25deg);

	transition:.8s;

}

.btn-primary::after{

	content:"";

	position:absolute;

	inset:0;

	border-radius:999px;

	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,.08);

	pointer-events:none;

}

.btn-primary:hover{

	background:
		linear-gradient(
			180deg,
			#447558,
			#326147,
			#20382d
		);

	box-shadow:
		0 15px 40px rgba(26,74,52,.55),
		0 0 45px rgba(74,150,103,.22);

}

.btn-primary:hover::before{

	left:160%;

}

.btn-primary:hover svg{

	transform:translateX(4px);

}

/* ===========================
	OUTLINE
=========================== */

.btn-outline{

	color:#e8d6a8;

	background:
		linear-gradient(
			180deg,
			rgba(35,33,27,.72),
			rgba(16,15,12,.82)
		);

	border:1px solid rgba(201,170,102,.45);

	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.05);

}

.btn-outline::before{

	content:"";

	position:absolute;

	inset:0;

	background:
		linear-gradient(
			135deg,
			rgba(255,255,255,.08),
			transparent 55%
		);

	opacity:0;

	transition:.35s;

}

.btn-outline:hover{

	color:#111;

	border-color:#d7ba76;

	background:
		linear-gradient(
			180deg,
			#efd596,
			#cda354
		);

	box-shadow:
		0 15px 35px rgba(210,171,87,.22);

	transform:translateY(-3px);

}

.btn-outline:hover::before{

	opacity:1;

}

.btn-outline:hover svg{

	transform:translateX(4px);

}

.btn:active{

	transform:translateY(0);

}


/* ===========================
	POPULAR PRODUCTS
=========================== */

.popular-products{
	position:relative;
	overflow:hidden;
	padding:110px 0;
}

.popular-bg{
	position:absolute;
	top:-8%;
	left:0;
	width:100%;
	height:116%;
	background:url("../images/bg/popular-bg.webp") center center/cover no-repeat;
	will-change:transform;
	z-index:0;
}

.popular-bg::before{
	content:"";
	position:absolute;
	inset:0;
	background:
		linear-gradient(
			180deg,
			rgba(6,9,7,.82),
			rgba(6,9,7,.95),
			rgba(6,9,7,.82)
		);
}

.popular-wrapper{
	position:relative;
	z-index:2;
	display:grid;
	grid-template-columns:340px 1fr;
	gap:45px;
	align-items:start;
}

.popular-left{

	position:sticky;
	top:140px;

}

.section-label{

	display:block;

	margin-bottom:18px;

	font-family:"Cinzel",serif;

	font-size:15px;

	letter-spacing:4px;

	color:#c8a868;

	text-transform:uppercase;

}

.popular-left h2{

	font-family:"Cormorant Infant",serif;

	font-size:72px;

	line-height:.9;

	color:#efe2be;

	margin-bottom:35px;

	text-shadow:0 5px 20px rgba(0,0,0,.35);

}

.products-grid{

	display:grid;

	grid-template-columns:repeat(3,1fr);

	gap:22px;

}

/* ===========================
	CARD
=========================== */

.product-card{

	position:relative;

	padding:0;

	border-radius:20px;

	border:1px solid rgba(201,170,102,.16);

	background:
		linear-gradient(
			180deg,
			rgba(23,36,29,.78),
			rgba(12,20,16,.9)
		);

	backdrop-filter:blur(16px);

	transition:.35s;

	overflow:hidden;

}



.product-card:hover{

	transform:translateY(-8px);

	border-color:rgba(201,170,102,.45);

	box-shadow:
		0 20px 45px rgba(0,0,0,.45),
		0 0 25px rgba(74,148,95,.18);

}

.product-image{

	position:relative;

	display:flex;

	align-items:flex-end;

	justify-content:center;

	margin-bottom:18px;

}
.product-info{
	padding: 22px;
}

.product-image img{

	transition:.4s;

}

.product-card:hover img{

	transform:scale(1.06);

}

.product-card h3{

	font-family:"Cormorant Infant",serif;

	font-size:28px;

	color:#f1e5c5;

	margin-bottom:6px;

}

.product-card p{

	font-family:"Cormorant Infant",serif;

	font-size:18px;

	line-height:1.4;

	color:#c9c9c9;

	min-height:52px;

	margin-bottom:18px;

}

.product-bottom{

	display:flex;

	align-items:center;

	justify-content:space-between;

}

.price{

	font-family:"Marcellus",serif;

	font-size:28px;

	color:#f0d8a4;

}

.product-cart{

	width:42px;

	height:42px;

	border-radius:50%;

	display:flex;

	align-items:center;

	justify-content:center;

	color:#201a10;

	background:
		linear-gradient(
			180deg,
			#efd18c,
			#c89d4d
		);

	box-shadow:
		0 8px 18px rgba(200,157,77,.28);

	transition:.35s;

}

.product-cart:hover{

	transform:rotate(90deg) scale(1.08);

	box-shadow:
		0 0 25px rgba(226,190,104,.35);

}

.product-cart svg{

	width:18px;

	height:18px;

}

.product-card::after{

	content:"";

	position:absolute;

	inset:0;

	background:url("../images/bg/fireflies.webp") center/cover;

	opacity:.08;

	pointer-events:none;

}


/*==================================
	FEATURE SECTION
==================================*/

.feature-section{
	padding:18px 0 100px;
}

.feature{
	position:relative;
	display:grid;
	grid-template-columns:420px 1fr;
	align-items:center;
	gap:70px;
	min-height:300px;
	padding:55px 60px;
	margin-bottom:18px;
	border:1px solid rgba(201,170,102,.18);
	border-radius:18px;
	background:#070b08;
	overflow:hidden;
	backdrop-filter:blur(12px);
}

.feature-bg{
	position:absolute;
	inset:0;
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	transform:scale(1.08);
	will-change:transform;
	z-index:0;
}

.feature-bg{
	position:absolute;
	inset:-5%;
	background-position:center;
	background-size:cover;
	transform:scale(1.1);
	will-change:transform;
}
.feature-about .feature-bg{
	background-image:url("../images/bg/about-bg.webp");
}

.feature-mushrooms .feature-bg{
	background-image:url("../images/bg/mushrooms-bg.webp");
}

.feature::before{
	content:"";
	position:absolute;
	inset:0;
	background:
		linear-gradient(
			90deg,
			rgba(6,9,7,.88) 0%,
			rgba(6,9,7,.72) 28%,
			rgba(6,9,7,.35) 55%,
			rgba(6,9,7,.55) 100%
		);
	z-index:1;
}

.feature::after{
	content:"";
	position:absolute;
	inset:10px;
	border:1px solid rgba(201,170,102,.08);
	border-radius:12px;
	pointer-events:none;
	z-index:2;
}

.feature-content{
	position:relative;
	z-index:3;
}

.feature-content h2{
	margin:18px 0 24px;
	font-family:"Cormorant Infant",serif;
	font-size:66px;
	font-weight:600;
	line-height:.9;
	color:#efe2be;
	text-shadow:0 4px 18px rgba(0,0,0,.45);
}

.feature-content p{
	max-width:360px;
	margin-bottom:34px;
	font-family:"Cormorant Infant",serif;
	font-size:22px;
	line-height:1.55;
	color:#d7d5cf;
}

.feature-items{
	position:relative;
	z-index:3;
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:22px;
}

.feature-item{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;
	min-height:180px;
	padding:28px 22px;
	border-radius:18px;
	border:1px solid rgba(201,170,102,.18);
	background:rgba(7,10,8,.35);
	backdrop-filter:blur(18px);
	transition:var(--transition);
	overflow:hidden;
}

.feature-item::before{
	content:"";
	position:absolute;
	inset:0;
	background:
		radial-gradient(
			circle at top,
			rgba(103,171,115,.10),
			transparent 65%
		);
	opacity:.8;
}

.feature-item:hover{
	transform:translateY(-8px);
	border-color:rgba(201,170,102,.45);
	background:rgba(10,15,12,.55);
	box-shadow:
		0 20px 45px rgba(0,0,0,.35),
		0 0 25px rgba(201,170,102,.12);
}

.feature-item img{
	position:relative;
	z-index:2;
	width:95px;
	height:95px;
	object-fit:contain;
	margin-bottom:22px;
	transition:var(--transition);
}

.feature-item:hover img{
	transform:scale(1.08);
}

.feature-item h3{
	position:relative;
	z-index:2;
	font-family:"Cormorant Infant",serif;
	font-size:22px;
	font-weight:600;
	line-height:1.45;
	color:#efe2be;
}

/*==================================
	RESPONSIVE
==================================*/

@media(max-width:1200px){

	.feature{
		grid-template-columns:1fr;
		gap:45px;
		padding:45px;
	}

	.feature-content{
		max-width:700px;
	}

	.feature-items{
		grid-template-columns:repeat(2,1fr);
	}

}

@media(max-width:768px){

	.feature{
		padding:35px 24px;
	}

	.feature-content h2{
		font-size:48px;
	}

	.feature-content p{
		font-size:18px;
	}

	.feature-items{
		grid-template-columns:1fr;
	}

	.feature-item{
		min-height:150px;
	}

}




/*==================================
	COMMUNITY
==================================*/

.community{
	position:relative;
	padding:20px 0 100px;
	overflow:hidden;
}

.community-bg{
	position:absolute;
	inset:0;
	background:url("../images/bg/community-bg.webp") center center/cover no-repeat;
	z-index:0;
}

.community-bg::before{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(
		180deg,
		rgba(6,9,7,.85),
		rgba(6,9,7,.55),
		rgba(6,9,7,.85)
	);
}

.community .container{
	position:relative;
	z-index:2;
}

.community-block{
	position:relative;
	display:grid;
	grid-template-columns:360px 1fr;
	gap:42px;
	align-items:center;
	padding:34px 38px;
	margin-bottom:18px;
	border:1px solid rgba(201,170,102,.18);
	border-radius:18px;
	background:rgba(8,11,9,.45);
	backdrop-filter:blur(16px);
	overflow:hidden;
}

.community-block::after{
	content:"";
	position:absolute;
	inset:10px;
	border:1px solid rgba(201,170,102,.08);
	border-radius:12px;
	pointer-events:none;
}

.community-left h2{
	margin:16px 0 28px;
	font-family:"Cormorant Infant",serif;
	font-size:60px;
	line-height:.9;
	color:#efe2be;
}

/*==================================
	CATEGORIES
==================================*/

.categories-grid{
	display:grid;
	grid-template-columns:repeat(6,1fr);
	gap:16px;
}

.category-card{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;
	height:205px;
	padding:18px;
	border-radius:16px;
	border:1px solid rgba(201,170,102,.15);
	background:rgba(7,10,8,.45);
	backdrop-filter:blur(12px);
	overflow:hidden;
	transition:.45s cubic-bezier(.22,1,.36,1);
}

.category-card::before{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(
		180deg,
		rgba(255,255,255,.05),
		transparent 35%
	);
	opacity:0;
	transition:.45s;
}

.category-card::after{
	content:"";
	position:absolute;
	left:50%;
	bottom:-70px;
	transform:translateX(-50%);
	width:120px;
	height:120px;
	border-radius:50%;
	background:radial-gradient(
		circle,
		rgba(68,134,87,.45),
		transparent 70%
	);
	filter:blur(20px);
	opacity:0;
	transition:.45s;
}

.category-card img{
	position:relative;
	z-index:2;
	width:92px;
	height:92px;
	object-fit:contain;
	margin-bottom:18px;
	transition:.55s cubic-bezier(.22,1,.36,1);
	filter:
		drop-shadow(0 6px 12px rgba(0,0,0,.4));
}

.category-card span{
	position:relative;
	z-index:2;
	font-family:"Cormorant Infant",serif;
	font-size:24px;
	font-weight:600;
	color:#efe2be;
	transition:.35s;
}

.category-card:hover{

	transform:translateY(-10px);

	border-color:rgba(201,170,102,.45);

	background:rgba(10,14,11,.75);

	box-shadow:
		0 25px 45px rgba(0,0,0,.35),
		0 0 25px rgba(201,170,102,.15);

}

.category-card:hover::before{

	opacity:1;

}

.category-card:hover::after{

	opacity:1;
	bottom:-35px;

}

.category-card:hover img{

	transform:
		translateY(-10px)
		scale(1.18)
		rotate(-3deg);

	filter:
		drop-shadow(0 16px 30px rgba(53,132,71,.45))
		drop-shadow(0 8px 20px rgba(0,0,0,.55));

}

.category-card:hover span{

	color:#fff8df;
	letter-spacing:.4px;

}

/*==================================
	REVIEWS
==================================*/

.reviews{
	overflow:hidden;
}

.reviews-slider{
	width:100%;
}

.review-card{
	height:100%;
	padding:28px;
	border-radius:16px;
	border:1px solid rgba(201,170,102,.18);
	background:rgba(8,11,9,.55);
	transition:.35s;
}

.review-card:hover{
	border-color:rgba(201,170,102,.45);
	transform:translateY(-6px);
}

.review-head{
	display:flex;
	align-items:center;
	gap:16px;
	margin-bottom:22px;
}

.review-head img{
	width:56px;
	height:56px;
	border-radius:50%;
	object-fit:cover;
	border:2px solid rgba(201,170,102,.4);
}

.review-head strong{
	font-size:22px;
	font-family:"Cormorant Infant",serif;
	font-weight:600;
	color:#efe2be;
}

.review-card p{
	margin-bottom:20px;
	font-family:"Cormorant Infant",serif;
	font-size:24px;
	line-height:1.55;
	color:#ddd;
}

.stars{
	font-size:22px;
	color:#d8b86d;
	letter-spacing:4px;
}

/*==================================
	ARROWS
==================================*/

.reviews-prev,
.reviews-next{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	width:62px;
	height:62px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	font-size:34px;
	color:#e7d3a2;
	border:1px solid rgba(201,170,102,.28);
	background:rgba(7,10,8,.7);
	backdrop-filter:blur(16px);
	transition:.35s;
	z-index:20;
}

.reviews-prev{
	left:315px;
}

.reviews-next{
	right:20px;
}

.reviews-prev:hover,
.reviews-next:hover{
	background:#c79f52;
	color:#111;
	border-color:#c79f52;
	transform:translateY(-50%) scale(1.08);
}

/*==================================
	SWIPER
==================================*/

.reviews-slider .swiper-slide{
	height:auto;
	display:flex;
}

.reviews-slider .swiper-wrapper{
	align-items:stretch;
}

/*==================================
	RESPONSIVE
==================================*/

@media(max-width:1400px){

	.categories-grid{
		grid-template-columns:repeat(3,1fr);
	}

}

@media(max-width:1100px){

	.community-block{
		grid-template-columns:1fr;
	}

	.community-left{
		text-align:center;
	}

	.community-left .btn{
		margin:auto;
	}

	.reviews-prev{
		left:20px;
	}

}

@media(max-width:768px){

	.community-left h2{
		font-size:44px;
	}

	.categories-grid{
		grid-template-columns:repeat(2,1fr);
	}

	.category-card{
		height:170px;
	}

	.review-card p{
		font-size:20px;
	}

	.reviews-prev,
	.reviews-next{
		display:none;
	}

}

@media(max-width:576px){

	.categories-grid{
		grid-template-columns:1fr;
	}

}

.categories-grid{
	display:grid;
	grid-template-columns:repeat(5,1fr);
	gap:22px;
}

.category-card{
	position:relative;

	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;

	min-height:250px;

	padding:34px 22px;

	border:1px solid rgba(213,179,106,.14);
	border-radius:22px;

	background:linear-gradient(
		180deg,
		rgba(8,12,10,.82),
		rgba(4,6,5,.95)
	);

	backdrop-filter:blur(12px);

	transition:.45s;
}

.category-card:hover{

	transform:translateY(-8px);

	border-color:rgba(213,179,106,.45);

	box-shadow:
		0 18px 40px rgba(0,0,0,.45),
		0 0 30px rgba(68,115,78,.18);

}

.category-card span{

	margin-top:24px;

	font-family:"Cormorant Garamond",serif;
	font-size:28px;
	font-weight:600;

	color:#f0e6cb;

	text-align:center;

	line-height:1.15;

	transition:.35s;

}

.category-card:hover span{

	color:#fff4d5;

}

.icon{

	width:100px;
	height:100px;

	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;

	transition:.45s;

	filter:
		drop-shadow(0 4px 10px rgba(0,0,0,.25));

}

.icon-immunity{

	background-image:url("/assets/images/icons/icon-immunity.png");

}

.icon-energy{

	background-image:url("/assets/images/icons/icon-energy.png");

}

.icon-memory{

	background-image:url("/assets/images/icons/icon-memory.png");

}

.icon-antistress{

	background-image:url("/assets/images/icons/icon-antistress.png");

}

.icon-detox{

	background-image:url("/assets/images/icons/icon-detox.png");

}


.category-card:hover .icon{

	transform:
		translateY(-8px)
		scale(1.12)
		rotate(-4deg);

	filter:
		drop-shadow(0 12px 24px rgba(212,179,106,.28));

}

/*==================================
	CTA
==================================*/

.footer-cta{

	position:relative;

	overflow:hidden;

	border:1px solid rgba(197,166,95,.18);

	border-radius:22px;

	margin-top:120px;

}

.footer-cta-bg{

	position:absolute;

	inset:0;

	background:url("../images/bg/footer-bg.webp") center center/cover no-repeat;

	z-index:0;

	transform:scale(1.05);

}

.footer-cta::before{

	content:"";

	position:absolute;

	inset:0;

	background:
	linear-gradient(
		90deg,
		rgba(8,11,8,.88),
		rgba(8,11,8,.42),
		rgba(8,11,8,.15)
	);

	z-index:1;

}

.footer-cta-content{

	position:relative;

	z-index:2;

	min-height:320px;

	display:flex;

	align-items:center;

	padding:70px;

}

.footer-cta-left{

	max-width:470px;

}

.footer-cta h2{

	font-family:"Cinzel",serif;

	font-size:58px;

	line-height:.95;

	color:#efe2be;

	margin-bottom:22px;

}

.footer-cta p{

	font-family:"Cormorant Infant",serif;

	font-size:24px;

	color:#d2d2d2;

	margin-bottom:34px;

}

/*==================================
	FOOTER
==================================*/

.footer{

	padding:55px 0 70px;

}

.footer-grid{

	display:grid;

	grid-template-columns:320px repeat(4,1fr);

	gap:50px;

	align-items:flex-start;

}

.footer-logo img{

	width:220px;

}

.footer-links h4,
.footer-contact h4{

	font-family:"Cinzel",serif;

	color:#d6b26f;

	font-size:18px;

	margin-bottom:18px;

}

.footer-links{

	display:flex;

	flex-direction:column;

	gap:10px;

}

.footer-links a{

	color:#bdbdbd;

	transition:.3s;

}

.footer-links a:hover{

	color:#fff;

}

.footer-contact p{

	color:#bdbdbd;

	margin-bottom:8px;

}

.footer-social{

	display:flex;

	gap:14px;

	margin-top:20px;

}

.footer-social a{

	width:46px;

	height:46px;

	border-radius:50%;

	display:flex;

	align-items:center;

	justify-content:center;

	border:1px solid rgba(198,166,95,.25);

	background:rgba(255,255,255,.02);

	transition:.35s;

}

.footer-social a:hover{

	transform:translateY(-4px);

	border-color:#d6b26f;

	box-shadow:0 0 25px rgba(198,166,95,.25);

}


@media(max-width:768px){

	.footer-cta{

		border-radius:18px;

		margin-top:70px;

	}

	.footer-cta::before{

		background:rgba(8,11,8,.72);

	}

	.footer-cta-content{

		padding:40px 25px;

		min-height:auto;

		text-align:center;

		justify-content:center;

	}

	.footer-cta-left{

		max-width:100%;

	}

	.footer-cta h2{

		font-size:36px;

	}

	.footer-cta p{

		font-size:18px;

		margin-bottom:28px;

	}

	.footer-cta .btn{

		width:100%;

		max-width:320px;

		margin:auto;

	}

	.footer-grid{

		grid-template-columns:1fr;

		gap:40px;

		text-align:center;

	}

	.footer-links{

		align-items:center;

	}

	.footer-contact{

		text-align:center;

	}

	.footer-social{

		justify-content:center;

	}
	.footer-logo{
		width: 100%;
	}
	.footer-logo img{
		margin: 0 auto;
	}

}


































/*==================================
	TABLET
==================================*/

@media (max-width:1024px){

	.container{
		padding:0 24px;
	}

	/* HEADER */

	.header{
		top:15px;
		width:calc(100% - 30px);
	}

	.header .container{
		grid-template-columns:220px 1fr 70px;
	}

	.nav{
		display:none;
	}

	.login-btn{
		display:none;
	}

	.cart{
		width:50px;
		height:50px;
	}

	.logo img{
		height:56px;
	}

	/* HERO */

	.hero{
		min-height:auto;
		padding:180px 0 120px;
	}

	.hero-content{
		grid-template-columns:1fr;
		text-align:center;
		gap:60px;
	}

	.hero-left{
		max-width:700px;
		margin:0 auto;
	}

	.hero-label{
		justify-content:center;
	}

	.hero h1{
		font-size:72px;
	}

	.hero p{
		margin:0 auto 40px;
	}

	.hero-buttons{
		justify-content:center;
	}

	.hero-right{
		justify-content:center;
	}

	.hero-right img{
		max-width:560px;
	}

	/* POPULAR */

	.popular-content{
		grid-template-columns:1fr;
		gap:60px;
	}

	.popular-sidebar{
		position:relative;
		top:auto;
	}

	.products-grid{
		grid-template-columns:repeat(2,1fr);
	}

	/* FEATURE */

	.feature{
		grid-template-columns:1fr;
		gap:50px;
	}

	.feature-content{
		max-width:100%;
		text-align:center;
	}

	.feature-items{
		grid-template-columns:repeat(2,1fr);
	}

	/* COMMUNITY */

	.community-block{
		grid-template-columns:1fr;
		gap:40px;
	}

	.community-left{
		text-align:center;
	}

	.community-left .btn{
		margin:auto;
	}

	.categories-grid{
		grid-template-columns:repeat(3,1fr);
	}

	.reviews-prev,
	.reviews-next{
		display:none;
	}

}
/*==================================
	MOBILE
==================================*/

@media (max-width:768px){

	.container{
		padding:0 18px;
	}

	/* HEADER */

	.header{
		top:10px;
		width:calc(100% - 20px);
		border-radius:16px;
		padding:8px 0;
	}

	.header .container{
		grid-template-columns:1fr auto;
	}

	.logo img{
		height:50px;
	}

	.header-actions{
		gap:12px;
	}

	.cart{
		width:46px;
		height:46px;
	}

	.cart svg{
		width:20px;
		height:20px;
	}

	/* HERO */

	.hero{
		min-height:auto;
		padding:150px 0 70px;
	}

	.hero-content{
		grid-template-columns:1fr;
		gap:40px;
		text-align:center;
		padding:0;
	}

	.hero-left{
		max-width:100%;
	}

	.hero-label{
		justify-content:center;
		font-size:13px;
		letter-spacing:3px;
	}

	.hero h1{
		font-size:56px;
		line-height:.9;
		margin:18px 0 24px;
	}

	.hero p{
		font-size:20px;
		max-width:100%;
		margin-bottom:32px;
	}

	.hero-buttons{
		flex-direction:column;
		gap:14px;
	}

	.hero-buttons .btn{
		width:100%;
	}

	.hero-right{
		justify-content:center;
	}

	.hero-right img{
		max-width:380px;
	}

	/* BUTTONS */

	.btn{
		height:56px;
		padding:0 28px;
		font-size:15px;
	}

	/* TITLES */

	h2{
		font-size:42px !important;
	}

	.section-label{
		font-size:13px;
		letter-spacing:3px;
	}

	/* POPULAR */

	.popular-products{
		padding:80px 0;
	}

	.popular-content{
		gap:40px;
	}

	.popular-sidebar{
		text-align:center;
	}

	.popular-sidebar .btn{
		width:100%;
	}

	.products-grid{
		grid-template-columns:1fr;
		gap:20px;
	}

	.product-card{
		max-width:420px;
		margin:auto;
	}

	/* FEATURE */

	.feature-section{
		padding:80px 0;
	}

	.feature{
		padding:28px;
	}

	.feature-content{
		text-align:center;
	}

	.feature-content p{
		margin-left:auto;
		margin-right:auto;
	}

	.feature-content .btn{
		width:100%;
	}

	.feature-items{
		grid-template-columns:1fr;
		gap:18px;
	}

	.feature-item{
		padding:24px;
    	backdrop-filter: blur(3px);
	}

	/* COMMUNITY */

	.community{
		padding:80px 0;
	}

	.community-block{
		padding:28px;
	}

	.community-left{
		text-align:center;
	}

	.community-left .btn{
		width:100%;
	}

	.categories-grid{
		grid-template-columns:repeat(2,1fr);
		gap:16px;
	}

	.category-card{
		min-height:190px;
		padding:24px 16px;
	}

	.category-card span{
		font-size:22px;
	}

	.icon{
		width:74px;
		height:74px;
	}

	.review-card{
		padding:24px;
	}

	.review-head strong{
		font-size:20px;
	}

	.review-card p{
		font-size:20px;
	}

	/* FOOTER */

	.footer{
		padding:60px 0 30px;
	}

	.footer-top{
		grid-template-columns:1fr;
		gap:40px;
		text-align:center;
	}

	.footer-menu,
	.footer-contacts,
	.footer-social{
		justify-content:center;
	}

}



/*==================================
	MOBILE
==================================*/

@media (max-width:768px){

	.container{
		padding:0 18px;
	}

	/* HEADER */

	.header{
		top:10px;
		width:calc(100% - 20px);
		border-radius:16px;
		padding:8px 0;
	}

	.header .container{
		grid-template-columns:1fr auto;
	}

	.logo img{
		height:50px;
	}

	.header-actions{
		gap:12px;
	}

	.cart{
		width:46px;
		height:46px;
	}

	.cart svg{
		width:20px;
		height:20px;
	}

	/* HERO */

	.hero{
		min-height:auto;
		padding:150px 0 70px;
	}

	.hero-content{
		grid-template-columns:1fr;
		gap:40px;
		text-align:center;
		padding:0;
	}

	.hero-left{
		max-width:100%;
	}

	.hero-label{
		justify-content:center;
		font-size:13px;
		letter-spacing:3px;
	}

	.hero h1{
		font-size:56px;
		line-height:.9;
		margin:18px 0 24px;
	}

	.hero p{
		font-size:20px;
		max-width:100%;
		margin-bottom:32px;
	}

	.hero-buttons{
		flex-direction:column;
		gap:14px;
	}

	.hero-buttons .btn{
		width:100%;
	}

	.hero-right{
		justify-content:center;
	}

	.hero-right img{
		max-width:380px;
	}

	/* BUTTONS */

	.btn{
		height:56px;
		padding:0 28px;
		font-size:15px;
	}

	/* TITLES */

	h2{
		font-size:42px !important;
	}

	.section-label{
		font-size:13px;
		letter-spacing:3px;
	}

	/* POPULAR */

	.popular-products{
		padding:80px 0;
	}

	.popular-content{
		gap:40px;
	}

	.popular-sidebar{
		text-align:center;
	}

	.popular-sidebar .btn{
		width:100%;
	}

	.products-grid{
		grid-template-columns:1fr;
		gap:20px;
	}

	.product-card{
		max-width:420px;
		margin:auto;
	}

	/* FEATURE */

	.feature-section{
		padding:80px 0;
	}

	.feature{
		padding:28px;
	}

	.feature-content{
		text-align:center;
	}

	.feature-content p{
		margin-left:auto;
		margin-right:auto;
	}

	.feature-content .btn{
		width:100%;
	}

	.feature-items{
		grid-template-columns:1fr;
		gap:18px;
	}

	.feature-item{
		padding:24px;
	}

	/* COMMUNITY */

	.community{
		padding:80px 0;
	}

	.community-block{
		padding:28px;
	}

	.community-left{
		text-align:center;
	}

	.community-left .btn{
		width:100%;
	}

	.categories-grid{
		grid-template-columns:repeat(2,1fr);
		gap:16px;
	}

	.category-card{
		min-height:190px;
		padding:24px 16px;
	}

	.category-card span{
		font-size:22px;
	}

	.icon{
		width:74px;
		height:74px;
	}

	.review-card{
		padding:24px;
	}

	.review-head strong{
		font-size:20px;
	}

	.review-card p{
		font-size:20px;
	}

	/* FOOTER */

	.footer{
		padding:60px 0 30px;
	}

	.footer-top{
		grid-template-columns:1fr;
		gap:40px;
		text-align:center;
	}

	.footer-menu,
	.footer-contacts,
	.footer-social{
		justify-content:center;
	}

}

@media (max-width:360px){
	.hero h1{
		font-size:40px;
	}

	h2{
		font-size:30px !important;
	}

	.btn{
		font-size:13px;
	}

	.category-card span,
	.feature-item h3{
		font-size:20px;
	}

	.hero p,
	.review-card p{
		font-size:20px;
	}
}

/*==================================
	MOBILE HEADER
==================================*/

.menu-toggle{

	display:none;

	width:48px;
	height:48px;

	border:none;
	background:none;

	cursor:pointer;

	position:relative;
	z-index:1200;

}

.menu-toggle span{

	display:block;

	width:26px;
	height:2px;

	margin:6px auto;

	background:#e8d6a8;

	border-radius:2px;

	transition:.35s;

}
.mobile-menu{

	position:fixed;

	inset:0;

	background:
		linear-gradient(
			180deg,
			#08100b,
			#050806
		);

	display:flex;

	flex-direction:column;

	align-items:center;

	justify-content:center;

	gap:50px;

	z-index:5000;

	opacity:0;

	visibility:hidden;

	transition:.45s;

}
.mobile-menu.active{

	opacity:1;

	visibility:visible;

}
.mobile-menu nav{

	display:flex;

	flex-direction:column;

	align-items:center;

	gap:28px;

}
.mobile-menu nav a{

	font-family:"Cinzel",serif;

	font-size:34px;

	letter-spacing:2px;

	color:#efe2be;

	transition:.35s;

}
.mobile-menu nav a:hover{

	color:#d5b36a;

}
.mobile-buttons{

	width:min(340px,90%);

	display:flex;

	flex-direction:column;

	gap:16px;

}
.mobile-close{

	position:absolute;

	top:24px;
	right:24px;

	border:none;

	background:none;

	color:#fff;

	font-size:46px;

	cursor:pointer;

}

@media(max-width:1024px){

	.nav{

		display:none;

	}

	.login-btn{

		display:none;

	}

	.menu-toggle{

		display:block;

	}

	.header .container{

		grid-template-columns:1fr auto auto;

	}

}



/*==================================
	HERO MOBILE
==================================*/

@media(max-width:1024px){

	.hero{

		min-height:auto;

		padding:170px 0 90px;

	}

	.hero-content{

		display:flex;
		justify-content:center;

		padding:0;

		text-align:center;

	}

	.hero-left{

		max-width:700px;

		margin:auto;

	}

	.hero-label{

		display:inline-flex;

		align-items:center;
		justify-content:center;

		font-size:14px;

		letter-spacing:3px;

	}

	.hero h1{

		font-size:72px;

		line-height:.9;

		margin:24px 0;

	}

	.hero p{

		max-width:640px;

		margin:0 auto 40px;

		font-size:22px;

	}

	.hero-buttons{

		justify-content:center;

	}

}
@media(max-width:768px){

	.hero{

		padding:135px 0 70px;

	}

	.hero-label{

		font-size:12px;

		letter-spacing:2px;

	}

	.hero h1{

		font-size:54px;

		line-height:.9;

		margin:20px 0;

	}

	.hero p{

		font-size:19px;

		line-height:1.6;

		margin-bottom:28px;

	}

	.hero-buttons{

		flex-direction:column;

		gap:14px;

	}

	.hero-buttons .btn{

		width:100%;

		max-width:340px;

		margin:auto;

	}

}
@media(max-width:480px){

	.hero{
		min-height: 100vh;
		padding:120px 0 60px;

	}

	.hero h1{

		font-size:44px;

	}

	.hero p{

		font-size:25px;

	}

	.hero-buttons .btn{

		height:54px;

		font-size:14px;

	}

}
@media(max-width:768px){

	.hero-bg{

		background-position:68% center;

		background-size:cover;

	}

}
@media(max-width:768px){

	.hero-glow{

		display:none;

	}

}
@media(max-width:768px){

	.hero-bg::before{

		background:
		linear-gradient(
			180deg,
			rgba(6,9,7,.82),
			rgba(6,9,7,.55)
		);

	}

}



/*==================================
	FEATURE
	768
==================================*/

@media(max-width:768px){

	.feature-section{

		padding:80px 0;

	}

	.feature{

		padding:35px 25px;

		gap:35px;

		border-radius:22px;

	}

	.feature-content h2{

		font-size:42px !important;

	}

	.feature-content p{

		font-size:19px;

		margin-bottom:28px;

	}

	.feature-content .btn{

		width:100%;

		max-width:320px;

	}

	.feature-items{

		grid-template-columns:1fr;

		gap:18px;

	}

	.feature-item{

		min-height:170px;

		padding:26px;

	}

	.feature-item img{

		width:72px;

		height:72px;

		margin-bottom:20px;

	}

	.feature-item h3{

		font-size:28px;

		line-height:1.15;

	}

}

/*==================================
	FEATURE
	480
==================================*/

@media(max-width:480px){

	.feature-section{

		padding:60px 0;

	}

	.feature{

		padding:22px 18px;

		border-radius:18px;

		gap:28px;

	}

	.feature-content h2{

		font-size:34px !important;

	}

	.feature-content p{

		font-size:17px;

	}

	.feature-item{

		padding:22px;

		min-height:150px;

	}

	.feature-item img{

		width:62px;

		height:62px;

		margin-bottom:16px;

	}

	.feature-item h3{

		font-size:23px;

	}

}

/*==================================
	POPULAR
	1024
==================================*/

@media(max-width:1024px){

	.popular-products{

		padding:100px 0;

	}

	.popular-wrapper{

		display:flex;
		flex-direction:column;

		gap:50px;

	}

	.popular-left{

		position:relative;

		top:auto;
		left:auto;

		width:100%;

		text-align:center;

	}

	.popular-left .btn{

		margin:auto;

	}

	.products-grid{

		grid-template-columns:repeat(2,1fr);

		gap:22px;

	}

}
/*==================================
	POPULAR
	768
==================================*/

@media(max-width:768px){
	.popular-right{
		width: 100%;
	}
	.popular-products{

		padding:80px 0;

	}

	.popular-wrapper{

		gap:35px;

	}

	.popular-left h2{

		font-size:42px !important;

	}

	.popular-left .btn{

		width:100%;
		max-width:320px;

	}

	.products-grid{

		grid-template-columns:1fr 1fr;

		gap:18px;

	}

	.product-card{

		border-radius:20px;

	}

	.product-image{



	}

	.product-image img{

/*		max-width:170px;*/

		margin:auto;

	}

	.product-info{

		padding:22px;

	}

	.product-info h3{

		font-size:28px;

	}

	.product-info p{

		font-size:16px;

	}

	.price{

		font-size:28px;

	}

	.product-cart{

		width:48px;
		height:48px;

	}

}

/*==================================
	POPULAR
	480
==================================*/

@media(max-width:480px){

	.popular-products{

		padding:60px 0;

	}

	.popular-left h2{

		font-size:34px !important;

	}

	.products-grid{

		grid-template-columns:1fr;

		gap:18px;

	}

	.product-card{

		max-width: 100%;
        width: 100%;

		margin:auto;

	}

	.product-image{



	}

	.product-image img{

/*		max-width:180px;*/

	}

	.product-info{

		padding:20px;

	}

	.product-info h3{

		font-size:24px;

	}

	.product-info p{

		font-size:15px;

	}

	.price{

		font-size:24px;

	}

	.product-cart{

		width:44px;
		height:44px;

	}

}




/*==================================================
ABOUT PAGE
==================================================*/

.about-page{

    width:min(100%,1880px);

    margin:0 auto;

    padding:18px;

    background:#050705;

}



/*==================================================
FOREST PANEL
==================================================*/

.forest-panel{

    position:relative;

    overflow:hidden;

    margin-bottom:20px;

    background:#060806;

    border:1px solid rgba(182,148,76,.22);

    box-shadow:

        inset 0 1px 0 rgba(255,228,165,.06),

        inset 0 -1px 0 rgba(255,228,165,.03),

        inset 0 0 160px rgba(255,200,90,.02);

}

.forest-panel:last-child{

    margin-bottom:0;

}



/*==================================================
BORDER GLOW
==================================================*/

.forest-panel::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255,224,150,.18),
            transparent
        ) top/100% 1px no-repeat,

        linear-gradient(
            90deg,
            transparent,
            rgba(255,224,150,.12),
            transparent
        ) bottom/100% 1px no-repeat,

        linear-gradient(
            180deg,
            transparent,
            rgba(255,224,150,.12),
            transparent
        ) left/1px 100% no-repeat,

        linear-gradient(
            180deg,
            transparent,
            rgba(255,224,150,.12),
            transparent
        ) right/1px 100% no-repeat;

    opacity:.75;

}



/*==================================================
BACKGROUND
==================================================*/

.panel-bg{

    position:absolute;

    inset:-5%;

    background-size:cover;

    background-position:center;

    transform:scale(1.05);

    z-index:0;

}



/*==================================================
OVERLAY
==================================================*/

.section-overlay{

    position:absolute;

    inset:0;

    z-index:1;

    pointer-events:none;

    background:

        radial-gradient(
            circle,
            transparent 35%,
            rgba(0,0,0,.18) 70%,
            rgba(0,0,0,.55) 100%
        ),

        linear-gradient(
            90deg,
            rgba(7,9,7,.84),
            rgba(7,9,7,.12),
            rgba(7,9,7,.84)
        );

}



/*==================================================
CONTENT
==================================================*/

.forest-panel .container{

    position:relative;

    z-index:3;

}



/*==================================================
SECTION NUMBER
==================================================*/

.section-number{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:45px;

    border:1px solid rgba(209,177,104,.35);

    border-radius:50%;

    color:#d8b36b;

    font-family:"Cinzel",serif;

    font-size:32px;

    letter-spacing:1px;

    background:rgba(18,18,14,.45);

    backdrop-filter:blur(8px);

}



/*==================================================
ABOUT HERO
==================================================*/

.about-hero{

    min-height:420px;

}



.about-hero-bg{

    background:url("../images/bg/about-hero.webp") center center/cover;

}



.about-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            90deg,
            rgba(6,8,6,.86),
            rgba(6,8,6,.18),
            rgba(6,8,6,.86)
        );

    z-index:1;

}



.about-hero-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:520px 430px;

    justify-content:space-between;

    align-items:center;
    min-height: 600px;

}



.about-intro{

    max-width:520px;

}



.about-intro h1{

    margin:18px 0 28px;

    font-family:"Cinzel",serif;

    font-size:92px;

    line-height:.92;

    color:#ead19b;

    letter-spacing:2px;

    text-shadow:

        0 5px 18px rgba(0,0,0,.45);

}



.about-intro p{

    max-width:470px;

    margin-bottom:42px;

    font-family:"Cormorant Infant",serif;

    font-size:27px;

    line-height:1.7;

    color:#d9cfbc;

}



.about-story{

    justify-self:end;

    max-width:390px;

}



.about-story h2{

    margin-bottom:28px;

    font-size:54px;

    font-family:"Cinzel",serif;

    color:#ddb979;

    line-height:1.05;

}



.about-story p{

    margin-bottom:36px;

    color:#d0c8b8;

    font-family:"Cormorant Infant",serif;

    font-size:22px;

    line-height:1.85;

}



/*==================================================
HERO DECOR
==================================================*/

.about-story::before{

    content:"";

    display:block;

    width:90px;

    height:1px;

    margin-bottom:24px;

    background:

        linear-gradient(

            90deg,

            transparent,

            #c89b56,

            transparent

        );

}



.about-intro .btn,

.about-story .btn{

    min-width:240px;

}

/*==================================================
ALCHEMY
==================================================*/

.alchemy{

    min-height:600px;

}

.alchemy-bg{

    background:url("../images/bg/alchemy-bg.webp") center center/cover no-repeat;

}

.alchemy::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            90deg,
            rgba(7,8,7,.88),
            rgba(7,8,7,.20),
            rgba(7,8,7,.88)
        );

    z-index:1;

}

.alchemy-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:380px 1fr;

    gap:80px;

    align-items:center;

    min-height:600px;

}



/*==================================================
LEFT
==================================================*/

.alchemy-left{

    max-width:360px;

}

.alchemy-left h2{

    margin-bottom:30px;

    font-family:"Cinzel",serif;

    font-size:62px;

    line-height:.95;

    color:#e5c786;

}

.alchemy-left p{

    margin-bottom:45px;

    font-size:24px;

    line-height:1.8;

    color:#d1cab9;

    font-family:"Cormorant Infant",serif;

}



/*==================================================
RIGHT
==================================================*/

.alchemy-right{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:620px;

}



/*==================================================
GOLD LINE
==================================================*/

.alchemy-line{

    position:absolute;

    left:60px;

    right:60px;

    top:50%;

    height:170px;

    transform:translateY(-50%);

    background:url("../images/effects/alchemy-line.webp") center/contain no-repeat;

    opacity:.95;

    z-index:0;

    pointer-events:none;

}



/*==================================================
ITEMS
==================================================*/

.alchemy-items{

    position:relative;

    z-index:2;

    width:100%;

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:35px;

}



/*==================================================
ITEM
==================================================*/

.alchemy-item{

    text-align:center;

    transition:.45s;

}

.alchemy-item:hover{

    transform:translateY(-12px);

}



/*==================================================
ICON
==================================================*/

.alchemy-icon{

    position:relative;

    width:150px;

    height:150px;

    margin:0 auto 28px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    border:1px solid rgba(214,179,101,.28);


    box-shadow:

        inset 0 0 25px rgba(255,224,145,.08),

        0 15px 45px rgba(0,0,0,.45);

    transition:.45s;

}

.alchemy-icon::before{

    content:"";

    position:absolute;

    inset:12px;

    border-radius:50%;

    border:1px solid rgba(214,179,101,.10);

}

.alchemy-item:hover .alchemy-icon{

    transform:translateY(-2px) scale(1.08);

    border-color:#d8b36b;

    box-shadow:

        0 0 45px rgba(213,179,106,.20),

        inset 0 0 35px rgba(255,225,150,.12);

}

.alchemy-icon img{

    width:150px;

    transition:.45s;

}

.alchemy-item:hover img{

    transform:scale(1.1);

}



/*==================================================
TITLE
==================================================*/

.alchemy-item h3{

    margin-bottom:12px;

    font-family:"Cinzel",serif;

    font-size:28px;

    color:#e7cb90;

}



/*==================================================
TEXT
==================================================*/

.alchemy-item span{

    display:block;

    max-width:170px;

    margin:auto;

    font-size:19px;

    line-height:1.7;

    color:#cbc4b4;

    font-family:"Cormorant Infant",serif;

}



/*==================================================
CONNECTING LIGHT
==================================================*/

.alchemy-right::before{

    content:"";

    position:absolute;

    left:8%;

    right:8%;

    top:50%;

    height:1px;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(233,197,122,.22),

            transparent

        );

    z-index:1;

}



/*==================================================
AMBIENT LIGHT
==================================================*/

.alchemy::after{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    background:

        radial-gradient(

            circle,

            rgba(214,177,101,.06),

            transparent 70%

        );

    pointer-events:none;

}

/*==================================================
1600px
==================================================*/

@media (max-width:1600px){

    .about-hero-grid{

        grid-template-columns:470px 390px;

    }

    .about-intro h1{

        font-size:80px;

    }

    .about-story h2{

        font-size:48px;

    }

    .alchemy-grid{

        grid-template-columns:330px 1fr;

        gap:60px;

    }

    .alchemy-items{

        gap:28px;

    }

}



/*==================================================
1400px
==================================================*/

@media (max-width:1400px){

    .about-page{

        padding:15px;

    }

    .about-hero{

        min-height:500px;

    }

    .about-hero-grid{

        grid-template-columns:430px 360px;

    }

    .about-intro h1{

        font-size:70px;

    }

    .about-intro p{

        font-size:23px;

    }

    .about-story h2{

        font-size:44px;

    }

    .about-story p{

        font-size:20px;

    }

    .alchemy{

        min-height:760px;

    }

    .alchemy-grid{

        min-height:760px;

        grid-template-columns:300px 1fr;

    }

    .alchemy-items{

        gap:22px;

    }

    .alchemy-icon{

        width:125px;
        height:125px;

    }

    .alchemy-icon img{

        width:62px;

    }

}



/*==================================================
1200px
==================================================*/

@media (max-width:1200px){

    .about-hero-grid{

        grid-template-columns:1fr;

        gap:80px;

        padding:120px 0;

    }

    .about-story{

        justify-self:start;

        max-width:600px;

    }

    .alchemy-grid{

        grid-template-columns:1fr;

        gap:70px;

        padding:120px 0;

    }

    .alchemy-left{

        max-width:650px;

    }

    .alchemy-line{

        display:none;

    }

    .alchemy-right::before{

        display:none;

    }

    .alchemy-items{

        grid-template-columns:repeat(3,1fr);

    }

}



/*==================================================
992px
==================================================*/

@media (max-width:992px){

    .about-page{

        padding:10px;

    }

    .about-hero{

        min-height:auto;

    }

    .about-hero-grid{

        padding:110px 0 90px;

    }

    .about-intro h1{

        font-size:60px;

    }

    .about-intro p{

        font-size:22px;

    }

    .about-story h2{

        font-size:40px;

    }

    .alchemy{

        min-height:auto;

    }

    .alchemy-grid{

        padding:90px 0;

    }

    .alchemy-left h2{

        font-size:50px;

    }

    .alchemy-left p{

        font-size:21px;

    }

    .alchemy-items{

        grid-template-columns:repeat(2,1fr);

        gap:35px;

    }

}



/*==================================================
768px
==================================================*/

@media (max-width:768px){

    .section-number{

        width:58px;
        height:58px;

        font-size:24px;

        margin-bottom:30px;

    }

    .about-hero-grid{

        padding:90px 0 70px;

        gap:60px;

    }

    .about-intro h1{

        font-size:48px;

    }

    .about-intro p{

        font-size:20px;

    }

    .about-story h2{

        font-size:34px;

    }

    .about-story p{

        font-size:19px;

    }

    .alchemy-grid{

        padding:80px 0;

    }

    .alchemy-left h2{

        font-size:42px;

    }

    .alchemy-left p{

        font-size:20px;

    }

    .alchemy-items{

        gap:45px;

        max-width:380px;

        margin:auto;

    }
    .alchemy-bg{
    	background: url(../images/bg/alchemy-bg.webp) center left / cover no-repeat;
    }

}



/*==================================================
576px
==================================================*/

@media (max-width:576px){

	.about-hero::before {
	    content: "";
	    position: absolute;
	    inset: 0;
	    background: linear-gradient(90deg, rgba(6, 8, 6, .86), rgb(6 8 6 / 52%), rgba(6, 8, 6, .86));
	    z-index: 1;
	}

    .about-page{

        padding:6px;
        padding-top: 85px;

    }

    .about-hero-grid{

        padding:80px 0 60px;

    }

    .about-intro h1{

        font-size:40px;

    }

    .about-intro p{

        font-size:18px;

    }

    .about-story h2{

        font-size:30px;

    }

    .about-story p{

        font-size:18px;

    }

    .alchemy-left h2{

        font-size:36px;

    }

    .alchemy-left p{

        font-size:18px;

    }

    .alchemy-icon{

        width:110px;
        height:110px;

    }

    .alchemy-icon img{

        width:54px;

    }

    .alchemy-item h3{

        font-size:24px;

    }

    .alchemy-item span{

        font-size:17px;

    }

}



/*==================================================
420px
==================================================*/

@media (max-width:420px){

    .about-intro h1{

        font-size:34px;

    }

    .about-story h2{

        font-size:26px;

    }

    .about-intro p,
    .about-story p{

        font-size:17px;

    }

    .alchemy-left h2{

        font-size:32px;

    }

    .btn{

        width:100%;

    }

}

/*==================================================
MUSHROOMS
==================================================*/

.mushrooms-section{

    min-height:760px;

}

.mushrooms-section .panel-bg{

    background:url("../images/about/mushrooms-bg.webp") center center/cover no-repeat;

}

.panel-layout{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns: 500px 1fr;

}



/*==================================================
LEFT
==================================================*/

.panel-sidebar{

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:80px 40px;

}

.panel-sidebar h2{

    margin:22px 0 26px;

    font-size:60px;

    line-height:.95;

    font-family:"Cinzel",serif;

    color:#dfbe7f;

}

.panel-sidebar p{

    margin-bottom:40px;

    font-size:22px;

    line-height:1.75;

    color:#cdc5b7;

    font-family:"Cormorant Infant",serif;

}



/*==================================================
GRID
==================================================*/

.mushrooms-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

    align-items:center;

    padding:55px 0;
    padding-left: 70px;

}



/*==================================================
CARD
==================================================*/

.mushroom-card{

    position:relative;

    overflow:hidden;

    text-align:center;

    padding:35px 24px;

    background:rgba(8,8,7,.55);

    border:1px solid rgba(188,150,82,.24);

    transition:.45s;

}

.mushroom-card:hover{

    transform:translateY(-14px);

    border-color:#cfa963;

    box-shadow:

        0 25px 70px rgba(0,0,0,.45),

        inset 0 0 50px rgba(212,177,95,.05);

}



/*==================================================
FRAME
==================================================*/

.card-frame{

    position:absolute;

    inset:8px;

    border:1px solid rgba(201,170,105,.12);

    pointer-events:none;

}

.card-frame::before,
.card-frame::after{

    content:"";

    position:absolute;

    width:22px;
    height:22px;

    border-color:rgba(210,176,102,.45);

}

.card-frame::before{

    top:-1px;
    left:-1px;

    border-top:1px solid;
    border-left:1px solid;

}

.card-frame::after{

    right:-1px;
    bottom:-1px;

    border-right:1px solid;
    border-bottom:1px solid;

}



/*==================================================
IMAGE
==================================================*/

.mushroom-card img{

    width:210px;

    margin:0 auto 25px;

    display:block;

    transition:.55s;

}

.mushroom-card:hover img{

    transform:scale(1.08) translateY(-6px);

}



/*==================================================
TEXT
==================================================*/

.mushroom-card h3{

    margin-bottom:16px;

    font-size:28px;

    font-family:"Cinzel",serif;

    color:#e6c98d;

}

.mushroom-card p{

    font-size:20px;

    line-height:1.7;

    color:#cfc7b8;

    font-family:"Cormorant Infant",serif;

}



/*==================================================
GLOW
==================================================*/

.mushroom-card::before{

    content:"";

    position:absolute;

    left:50%;

    top:-120px;

    width:280px;

    height:280px;

    transform:translateX(-50%);

    background:

        radial-gradient(circle,

            rgba(224,182,90,.12),

            transparent 70%);

    opacity:0;

    transition:.5s;

}

.mushroom-card:hover::before{

    opacity:1;

}



/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1600px){

    .mushrooms-grid{

        grid-template-columns:repeat(3,1fr);

    }

}

@media(max-width:1200px){

    .panel-layout{

        grid-template-columns:1fr;

    }

    .panel-sidebar{

        padding:80px 0 30px;

    }

    .mushrooms-grid{

        padding-bottom:80px;

    }

}

@media(max-width:900px){

    .mushrooms-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:650px){

    .mushrooms-grid{

        grid-template-columns:1fr;
        padding: 0;
        padding-top: 40px;

    }

    .mushroom-card{

        height:auto;

        padding:45px 28px;

    }

}




/*==================================================
LABORATORY
==================================================*/

.laboratory-section{

    min-height:760px;

}

.laboratory-section .panel-bg{

    background:url("../images/about/laboratory-bg.webp") center center/cover no-repeat;

}

.laboratory-content{

    position:relative;

    display:flex;

    justify-content:flex-end;

    align-items:flex-end;

    overflow:hidden;

}



/*====================================
IMAGE
====================================*/

.laboratory-image{

    position:absolute;

    inset:0;

}

.laboratory-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

}



/*====================================
BOTTOM GRADIENT
====================================*/

.laboratory-content::before{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:230px;

    background:

        linear-gradient(

            180deg,

            rgba(5,5,5,0),

            rgba(5,5,5,.90)

        );

    z-index:2;

}



/*====================================
TIMELINE
====================================*/

.laboratory-timeline{

    position:relative;

    z-index:5;

    width:100%;

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:35px;

    padding:0 80px 55px;

}



/*====================================
LINE
====================================*/

.timeline-line{

    position:absolute;

    left:110px;

    right:110px;

    top:12px;

    height:36px;

    background:url("../images/effects/timeline-line.webp") center center/contain no-repeat;

    pointer-events:none;

}



/*====================================
ITEM
====================================*/

.timeline-item{

    position:relative;

    text-align:center;

    transition:.4s;

}

.timeline-item:hover{

    transform:translateY(-8px);

}



/*====================================
DOT
====================================*/

.timeline-dot{

    display:block;

    width:16px;
    height:16px;

    margin:0 auto 26px;

    border-radius:50%;

    background:#d6b46d;

    box-shadow:

        0 0 0 5px rgba(214,180,109,.08),

        0 0 18px rgba(214,180,109,.45);

}



/*====================================
TITLE
====================================*/

.timeline-item h4{

    margin-bottom:10px;

    font-family:"Cinzel",serif;

    font-size:24px;

    color:#e6c889;

    letter-spacing:.06em;

}



/*====================================
TEXT
====================================*/

.timeline-item p{

    font-family:"Cormorant Infant",serif;

    font-size:19px;

    color:#cfc7b8;

    line-height:1.6;

}



/*====================================
HOVER
====================================*/

.timeline-item:hover .timeline-dot{

    transform:scale(1.35);

    background:#ffd98c;

    box-shadow:

        0 0 25px rgba(255,221,120,.9),

        0 0 50px rgba(255,214,110,.4);

}



/*====================================
AMBIENT LIGHT
====================================*/

.laboratory-content::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-180px;

    transform:translateX(-50%);

    width:900px;

    height:420px;

    background:

        radial-gradient(

            ellipse,

            rgba(226,176,77,.15),

            transparent 70%

        );

    pointer-events:none;

}



/*====================================
RESPONSIVE
====================================*/

@media(max-width:1500px){

    .laboratory-timeline{

        padding:0 40px 45px;

    }

}

@media(max-width:1200px){

    .laboratory-content{


    }

    .laboratory-timeline{

        grid-template-columns:repeat(3,1fr);

        row-gap:55px;

    }

    .timeline-line{

        display:none;

    }

}

@media(max-width:900px){

    .laboratory-timeline{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:650px){

    .laboratory-content{

        min-height:auto;

        padding-top:420px;

    }

    .laboratory-image{

        height:420px;

    }

    .laboratory-timeline{

        grid-template-columns:1fr;

        padding:45px 25px;

    }

    .timeline-dot{

        margin-bottom:18px;

    }

}


.about-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:500;

    padding:18px 40px;

    transition:.45s;

    pointer-events:none;

}

.about-header__inner{

    position:relative;

    max-width:1880px;

    margin:0 auto;

    height:108px;

    display:grid;

    grid-template-columns:1fr auto 1fr;

    align-items:center;

    pointer-events:auto;

}

.about-header::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            180deg,
            rgba(4,5,4,.82),
            rgba(4,5,4,.18),
            transparent
        );

    pointer-events:none;

}
.about-nav{

    display:flex;

    align-items:center;

    gap:42px;

}

.about-nav-left{

    justify-content:flex-end;

    padding-right:80px;

}

.about-nav-right{

    justify-content:flex-start;

    padding-left:80px;

}

.about-nav a{

    position:relative;

    font-family:"Cinzel",serif;

    font-size:15px;

    letter-spacing:.12em;

    text-transform:uppercase;

    color:#d2b57a;

    transition:.35s;

}

.about-nav a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;

    height:1px;

    background:#d7b56b;

    transition:.35s;

}

.about-nav a:hover,
.about-nav a.active{

    color:#f1d79f;

}

.about-nav a:hover::after,
.about-nav a.active::after{

    width:100%;

}
.about-logo{

    width:150px;

    display:flex;

    justify-content:center;

}

.about-logo img{

    width:100%;

    transition:.5s;

}

.about-logo:hover img{

    transform:scale(1.06);

}
.icon-link{

    width:34px;
    height:34px;

    display:flex;

    align-items:center;
    justify-content:center;

    font-size:18px;

    color:#ccb074;

    transition:.35s;

}

.icon-link:hover{

    color:#f5d99d;

    transform:translateY(-2px);

}

.about-header.scrolled{

    padding:10px 17px;

}

.about-header.scrolled .about-header__inner{

    height:82px;

    border:1px solid rgba(198,162,86,.18);

    background:rgba(8,8,7,.82);

    backdrop-filter:blur(18px);

    box-shadow:

        0 10px 40px rgba(0,0,0,.55),

        inset 0 1px rgba(255,225,160,.08);

}

.about-header.scrolled .about-header__inner{

    height:82px;

    border:1px solid rgba(191,154,79,.16);

    background:

        radial-gradient(
            ellipse at center,
            rgba(38,31,18,.72) 0%,
            rgba(16,16,12,.92) 45%,
            rgba(6,7,6,.98) 100%
        ),

        linear-gradient(
            180deg,
            rgba(28,23,15,.45),
            rgba(6,6,6,.94)
        );

    backdrop-filter:blur(20px);

    box-shadow:
        0 18px 60px rgba(0,0,0,.65),
        inset 0 1px rgba(255,220,150,.08),
        inset 0 -1px rgba(255,220,150,.03);

}

.about-header.scrolled .about-header__inner::before{

    content:"";

    position:absolute;

    top:0;
    left:40px;
    right:40px;

    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,221,155,.55),
        transparent
    );

}
.about-header.scrolled .about-header__inner::after{

    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background:

        radial-gradient(
            ellipse at center,
            transparent 35%,
            rgba(0,0,0,.18) 100%
        );

}

.laboratory-content{

    position:relative;

    min-height:430px;

    overflow:hidden;

}

.laboratory-bg{

    position:absolute;
    inset:0;

    background:url("../images/bg/laboratory.webp") center center / cover no-repeat;

    transform:scale(1.05);

    z-index:0;

}
.laboratory-overlay{

    position:absolute;
    inset:0;

    background:

        radial-gradient(
            ellipse at center,
            rgba(0,0,0,.05),
            rgba(0,0,0,.55)
        ),

        linear-gradient(
            180deg,
            rgba(7,7,6,.05),
            rgba(7,7,6,.55)
        );

    z-index:1;

}

.laboratory-timeline{

    position:absolute;

    left:70px;
    right:70px;
    bottom:45px;

    z-index:5;

    display:flex;
    justify-content:space-between;
    align-items:flex-start;

}

.timeline-line{

    position:absolute;

    left:0;
    right:0;

    top:14px;

    height:2px;

    background:url("../images/effects/alchemy-line.webp")
        center / 100% 100% no-repeat;

    opacity:.9;

}




/*=========================================
≤1200px
=========================================*/

@media (max-width:1200px){

    .laboratory-content{

        min-height:360px;

    }

    .laboratory-timeline{

        left:40px;
        right:40px;
        bottom:35px;

        gap:25px;

    }

    .timeline-item h4{

        font-size:18px;

    }

    .timeline-item p{

        font-size:14px;

    }

}

/*=========================================
≤992px
=========================================*/

@media (max-width:992px){

    .laboratory-section .panel-layout{

        grid-template-columns:1fr;

    }

    .laboratory-section .panel-sidebar{

        text-align:center;

        padding-bottom:30px;

    }

    .laboratory-section .btn{

        margin:0 auto;

    }

    .laboratory-content{

        min-height:320px;

    }

    .laboratory-timeline{

        left:25px;
        right:25px;
        bottom:25px;

        gap:16px;

    }

    .timeline-item{

        min-width:140px;

    }

    .timeline-item h4{

        font-size:16px;

    }

    .timeline-item p{

        font-size:13px;

        line-height:1.4;

    }

}

/*=========================================
≤768px
=========================================*/

@media (max-width:768px){

    .laboratory-content{

        min-height:300px;

        overflow:hidden;

    }

    .laboratory-timeline{

        position:absolute;

        left:0;
        right:0;
        bottom:20px;

        display:flex;

        gap:28px;

        padding:0 24px 10px;

        overflow-x:auto;

        overflow-y:hidden;

        justify-content:flex-start;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;

    }

    .laboratory-timeline::-webkit-scrollbar{

        display:none;

    }

    .timeline-line{

        left:24px;

        width:900px;

        right:auto;

    }

    .timeline-item{

        flex:0 0 150px;

        text-align:center;

    }

    .timeline-dot{

        margin:0 auto 16px;

    }

    .timeline-item h4{

        font-size:15px;

    }

    .timeline-item p{

        font-size:13px;

    }

}
/*=========================================
≤576px
=========================================*/

@media (max-width:576px){

    .laboratory-content{

        min-height:260px;

    }

    .laboratory-bg{

        background-position:center;

        transform:scale(1.12);

    }

    .laboratory-overlay{

        background:

            linear-gradient(
                180deg,
                rgba(8,8,8,.2),
                rgba(8,8,8,.72)
            );

    }

    .laboratory-timeline{

        padding:0 18px 12px;

        gap:22px;

    }

    .timeline-line{

        left:18px;

    }

    .timeline-item{

        flex:0 0 135px;

    }

    .timeline-dot{

        width:14px;
        height:14px;

    }

    .timeline-item h4{

        font-size:14px;

    }

    .timeline-item p{

        font-size:12px;

    }

}


/*==============================
MOBILE HEADER
==============================*/




.mobile-header{

    display:none;

}

@media(max-width:991px){

    .about-header{

        display:none;

    }

    .mobile-header{

        position:fixed;

        top:0;
        left:0;

        width:100%;

        height:76px;

        display:flex;

        align-items:center;
        justify-content:space-between;

        padding:0 20px;

        z-index:1200;

        background:

            radial-gradient(
                circle at 50% -80%,
                rgba(195,160,82,.18),
                transparent 45%
            ),

            linear-gradient(
                180deg,
                rgba(7,8,7,.96),
                rgba(12,12,11,.92)
            );

        backdrop-filter:blur(18px);

        border-bottom:1px solid rgba(196,165,95,.18);

        box-shadow:
            0 10px 35px rgba(0,0,0,.45);

    }

    .mobile-logo img{

        width:100px;

        display:block;

    }

    .mobile-header-right{

        display:flex;

        align-items:center;

        gap:12px;

    }

    .mobile-cart,
    .mobile-toggle{

        width:46px;
        height:46px;

        display:flex;

        align-items:center;
        justify-content:center;

        position:relative;

        border:none;

        border-radius:50%;

        background:rgba(255,255,255,.03);

        border:1px solid rgba(199,165,92,.18);

        color:#d8b56c;

        font-size:18px;

        cursor:pointer;

    }

    .mobile-cart span{

        position:absolute;

        top:-4px;
        right:-2px;

        width:18px;
        height:18px;

        border-radius:50%;

        background:#c9a65c;

        color:#111;

        font-size:10px;
        font-weight:700;

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

    }

}
@media(max-width:991px){

    .mobile-menu{

        padding-top:110px;

    }

    .mobile-close{

        top:18px;
        right:20px;

    }

}











/*==================================================
CODEX
==================================================*/

.codex-section{

    position:relative;
    overflow:hidden;

}

.codex-section .panel-bg{

    position:absolute;
    inset:0;

    background:url("../images/bg/codex-bg.webp") center/cover;

}

.codex-section .panel-overlay{

    position:absolute;
    inset:0;

    background:

        linear-gradient(
            90deg,
            rgba(6,8,6,.88),
            rgba(6,8,6,.18),
            rgba(6,8,6,.88)
        );

}

.codex-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:18px;

    padding:55px;

    align-items:stretch;

}

.principle-card{

    position:relative;

    overflow:hidden;

    min-height:430px;

    padding:42px 10px;

    display:flex;
    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    text-align:center;

    border:1px solid rgba(201,166,90,.18);

    transition:.45s;

}

.principle-card-bg{

    position:absolute;
    inset:0;

    background:url("../images/bg/principle-card.webp") center/cover;

    z-index:0;

    transform:scale(1.02);

}

.principle-card::before{

    content:"";

    position:absolute;
    inset:0;

    background:

        linear-gradient(

            180deg,

            rgba(8,8,7,.18),

            rgba(8,8,7,.62)

        );

    z-index:1;

}

.principle-card>*{

    position:relative;
    z-index:2;

}

.principle-card img{

    width:56px;

    margin-bottom:26px;

}

.principle-card h3{

    margin-bottom:20px;

    font-family:"Cinzel",serif;

    font-size:31px;

    line-height:1.25;

    color:#e1bc7c;

}

.principle-card p{

    font-family:"Cormorant Infant",serif;

    font-size:24px;

    line-height:1.7;

    color:#d3cdc0;

}

.principle-card:hover{

    transform:translateY(-12px);

    border-color:#d8b269;

    box-shadow:

        0 25px 60px rgba(0,0,0,.55),

        inset 0 0 60px rgba(255,210,120,.05);

}

.principle-card:hover .principle-card-bg{

    transform:scale(1.08);

}

.principle-card:hover img{

    transform:scale(1.08);

}

.principle-card img{

    transition:.45s;

}

.principle-card-bg{

    transition:1s;

}



/*============================*/

@media(max-width:1400px){

    .codex-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

/*============================*/

@media(max-width:992px){

    .codex-grid{

        padding:40px 25px;

        gap:20px;

    }

    .principle-card{

        min-height:370px;

    }

    .principle-card h3{

        font-size:26px;

    }

    .principle-card p{

        font-size:20px;

    }

}

/*============================*/

@media(max-width:768px){

    .codex-grid{

        grid-template-columns:1fr;

        padding:25px 20px 35px;

    }

    .principle-card{

        min-height:auto;

        padding:34px 24px;

    }

    .principle-card img{

        width:48px;

        margin-bottom:18px;

    }

    .principle-card h3{

        font-size:23px;

    }

    .principle-card p{

        font-size:19px;

        line-height:1.6;

    }

}

/*==================================================
HEART
==================================================*/

/* LEFT */

.heart-info{

    position:relative;

	z-index: 6;
}

.heart-info h2{

    margin:20px 0 28px;

    font-family:"Cinzel",serif;

    font-size:64px;

    line-height:.95;

    color:#e5c57d;

}

.heart-info p{

    font-family:"Cormorant Infant",serif;

    font-size:26px;

    line-height:1.8;

    color:#d7d0bf;
    position: relative;
    z-index: 6;

}
/* TREE */

.heart-center{

    position:relative;

    height:460px;

}

.heart-tree{

    position:absolute;

    inset:0;

    background:

        url("../images/bg/heart-tree.webp")
        center center/cover
        no-repeat;

    z-index:5;

    animation:treeFloat 6s ease-in-out infinite;

}
/* MAGIC */

.heart-tree-glow{

    position:absolute;

    left:50%;
    top:50%;

    width:620px;
    height:420px;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(221,181,91,.25),

            rgba(221,181,91,.05) 85%,

            transparent 75%

        );
/*    background: #fff;*/
    filter:blur(45px);
    z-index: 7;
    animation:glowPulse 3s ease-in-out infinite;

}
/* QUOTE */

.heart-quote{

    position:relative;

    z-index:3;

}

.heart-quote blockquote{

    position:relative;

    margin:0;

    padding-left:28px;

    font-family:"Cinzel",serif;

    font-size:38px;

    line-height:1.6;

    color:#e2bf74;

}

.heart-quote blockquote::before{

    content:"";

    position:absolute;

    left:0;
    top:8px;
    bottom:8px;

    width:2px;

    background:#d4b168;

}

.heart-quote span{

    display:block;

    margin-top:34px;

    font-family:"Cormorant Infant",serif;

    font-size:24px;

    color:#bba986;

}
/* OVERLAY */

.heart-section::before{

    content:"";

    position:absolute;
    inset:0;

    background:

        radial-gradient(

            ellipse at center,

            rgba(0,0,0,0),

            rgba(0,0,0,.18),

            rgba(0,0,0,.72)

        ),

        linear-gradient(

            90deg,

            rgba(6,8,6,.82),

            rgba(6,8,6,.08),

            rgba(6,8,6,.82)

        );

    z-index:1;

}
/* ANIMATIONS */

@keyframes glowPulse{

    0%,100%{

        transform:
        translate(-50%,-50%)
        scale(1);

        opacity:.75;

    }

    50%{

        transform:
        translate(-50%,-50%)
        scale(1.12);

        opacity:1;

    }

}

@keyframes treeFloat{

    0%,100%{

        transform:
        translateY(0);

    }

    50%{

        transform:
        translateY(-28px);

    }

}

@media(max-width:1200px){

    .heart-layout{

        grid-template-columns:1fr;

        text-align:center;

        gap:50px;

        padding:90px 0;

    }

    .heart-info{

        max-width:650px;

        margin:auto;

    }

    .heart-center{

        height:520px;

    }

    .heart-tree-glow{

        width:420px;
        height:420px;

    }

    .heart-quote{

        max-width:700px;

        margin:auto;

    }

    .heart-quote blockquote{

        padding:0;

        font-size:32px;

    }

    .heart-quote blockquote::before{

        display:none;

    }

}

@media(max-width:768px){

    .heart-section{

        min-height:auto;

    }

    .heart-layout{

        gap:35px;

        padding:60px 0;

    }

    .heart-info h2{

        font-size:44px;

    }

    .heart-info p{

        font-size:20px;

    }

    .heart-center{

        height:340px;

    }

    .heart-tree-glow{

        width:260px;
        height:260px;

        filter:blur(28px);

    }

    .heart-quote blockquote{

        font-size:24px;

    }

    .heart-quote span{

        font-size:18px;

    }

}



/*==================================================
FINAL CTA
==================================================*/

.final-section{

    position:relative;

    overflow:hidden;

}

.final-bg{

    position:absolute;
    inset:0;

    background:url("../images/bg/final-bg.webp") center center/cover no-repeat;

    transform:scale(1.05);

}

.final-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1fr 420px;

    align-items:flex-end;

    gap:120px;

    min-height:720px;

}

.final-content{

    max-width:720px;

    padding:90px 0;

}

.final-content h2{

    margin:18px 0 30px;

    font-family:"Cinzel",serif;

    font-size:72px;

    line-height:.95;

    color:#e8c985;

}

.final-content p{

    max-width:620px;

    margin-bottom:45px;

    font-size:28px;

    line-height:1.7;

    font-family:"Cormorant Infant",serif;

    color:#d5cfc0;

}

.final-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.final-logo{

    display:flex;

    justify-content:center;

    align-items:center;
    margin-bottom: 40px;
}

.logo-circle{

    width:100px;
    height:100px;

    border-radius:50%;

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


}

.logo-circle img{

    width:100%;

    filter: drop-shadow(0 0 35px rgba(235,197,104,.35));

}


@media(max-width:1400px){

    .final-grid{

        gap:70px;

        grid-template-columns:1fr 340px;

    }

    .logo-circle{

        width:300px;
        height:300px;

    }

    .logo-circle img{

        width:100%;

    }

}

@media(max-width:992px){

    .final-grid{

        grid-template-columns:1fr;

        gap:40px;

        text-align:center;

        min-height:auto;

        padding:70px 0;

    }

    .final-content{

        max-width:100%;

        padding:0;

    }

    .final-content p{

        margin:0 auto 40px;

    }

    .final-buttons{

        justify-content:center;

    }

}

@media(max-width:768px){

    .final-content h2{

        font-size:42px;

    }

    .final-content p{

        font-size:21px;

    }

    .logo-circle{

        width:220px;
        height:220px;

    }

    .logo-circle img{

        width:100%;

    }

    .final-buttons{

        flex-direction:column;

    }

    .final-buttons .btn{

        width:100%;

    }

}


.logo-circle{

    animation:logoGlow 8s infinite ease-in-out;

}

@keyframes logoGlow{

    0%{

        box-shadow:
            inset 0 0 65px rgba(255,214,130,.06),
            0 0 55px rgba(0,0,0,.65);

    }

    9%{

        box-shadow:
            inset 0 0 82px rgba(255,214,130,.11),
            0 0 78px rgba(210,170,80,.10);

    }

    17%{

        box-shadow:
            inset 0 0 70px rgba(255,214,130,.07),
            0 0 48px rgba(0,0,0,.55);

    }

    29%{

        box-shadow:
            inset 0 0 94px rgba(255,214,130,.18),
            0 0 88px rgba(215,178,88,.22);

    }

    41%{

        box-shadow:
            inset 0 0 76px rgba(255,214,130,.08),
            0 0 62px rgba(0,0,0,.6);

    }

    56%{

        box-shadow:
            inset 0 0 108px rgba(255,214,130,.22),
            0 0 95px rgba(226,188,96,.28);

    }

    68%{

        box-shadow:
            inset 0 0 73px rgba(255,214,130,.09),
            0 0 58px rgba(0,0,0,.58);

    }

    82%{

        box-shadow:
            inset 0 0 96px rgba(255,214,130,.17),
            0 0 84px rgba(220,185,95,.19);

    }

    100%{

        box-shadow:
            inset 0 0 65px rgba(255,214,130,.06),
            0 0 55px rgba(0,0,0,.65);

    }

}


 .final-section .panel-overlay:before{
 		content: "";
	    position: absolute;
	    inset: 0;
	    background: linear-gradient(90deg, rgba(6, 8, 6, .86), rgb(6 8 6 / 52%), rgba(6, 8, 6, .86));
	    z-index: 1;
 }
.heart-section .section-number{
	margin-top: 50px;
}





/*==========================================
CONTACT HERO
==========================================*/

.contacts-hero{

    position:relative;
    overflow:hidden;

}

.contacts-hero-bg{

    background:url("../images/bg/contacts-hero.webp") center/cover;

}

.contacts-hero-content{

    position:relative;
    z-index:2;

    display:flex;
    align-items:center;

    min-height:760px;

}

.contacts-intro{

    max-width:520px;

}

.contacts-intro h1{

    margin:18px 0 25px;

    font-size:90px;
    line-height:.92;

    color:#ecd39f;

    font-family:"Cinzel",serif;

}

.contacts-intro p{

    max-width:430px;

    margin-bottom:42px;

    font-size:24px;
    line-height:1.8;

    color:#d7cebd;

    font-family:"Cormorant Infant",serif;

}

/*==========================================
CARDS
==========================================*/

.contacts-cards{

    position:relative;
    z-index:3;

    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:50px;

    margin-top:-80px;
    padding-bottom:70px;

}

.contact-card{

    position:relative;

    padding:55px 0px;

    text-align:center;

    background:

        url("../images/bg/square-box-bg.png")
        center/cover
        no-repeat;

    min-height:230px;

    transition:.35s;

}

.contact-card::before{

    content:"";

    position:absolute;
    inset:0;

    background:

        radial-gradient(circle at top,
        rgba(255,220,130,.05),
        transparent 70%);

    opacity:0;

    transition:.35s;

}

.contact-card:hover{

    transform:translateY(-8px);

}

.contact-card:hover::before{

    opacity:1;

}

.contact-icon{

    width:90px;
    height:90px;

    margin:0 auto 28px;

    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;

}

.phone-icon{

    background-image:url("../images/icons/contacts-call.png");

}

.email-icon{

    background-image:url("../images/icons/contacts-mail.png");

}

.location-icon{

    background-image:url("../images/icons/contacts-loca.png");

}

.clock-icon{

    background-image:url("../images/icons/contacts-time.png");

}

.contact-card h3{

    margin-bottom:6px;

    color:#deb977;

    font-size:34px;

    font-family:"Cinzel",serif;

}

.contact-card p{

    color:#ddd4c4;

    font-size:24px;
    line-height:1.8;

    font-family:"Cormorant Infant",serif;

}



.contacts-hero .panel-overlay{

    position:absolute;
    inset:0;

    background:

        linear-gradient(
            90deg,
            rgba(6,8,6,.58),
            rgba(6,8,6,.18),
            rgba(6,8,6,.58)
        );

}


/*==================================================
CONTACT FORM
==================================================*/

.contact-form-section{

    position:relative;

    overflow:hidden;

    margin-top:22px;

}

.contact-form-grid{

    display:grid;

    grid-template-columns:1.08fr .92fr;

    min-height:720px;

}

/*==========================================
LEFT
==========================================*/

.contact-image{

    background:

        url("../images/bg/contact-laboratory.webp")
        center center/cover
        no-repeat;

    min-height:520px;
    position: relative;

}
.contact-image::before{

    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background:

        radial-gradient(
            ellipse at center,
            rgba(0,0,0,0) 28%,
            rgba(0,0,0,.18) 60%,
            rgba(0,0,0,.60) 100%
        ),

        linear-gradient(
            90deg,
            rgba(0,0,0,.38) 0%,
            rgba(0,0,0,.08) 35%,
            rgba(0,0,0,.08) 65%,
            rgba(0,0,0,.38) 100%
        );

    z-index:1;

}

/*==========================================
RIGHT
==========================================*/

.contact-form-wrapper{

    padding:75px 70px;

    background:

        radial-gradient(circle at top,
        rgba(45,35,20,.22),
        rgba(7,8,7,.95));

    border-left:1px solid rgba(184,150,74,.22);

}

.contact-form-wrapper h2{

    margin-bottom:48px;

    font-size:58px;

    font-family:"Cinzel",serif;

    color:#dfc07f;

}

/*==========================================
FORM
==========================================*/

.contact-form-wrapper form{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.contact-form-wrapper input,

.contact-form-wrapper textarea{

    width:100%;

    background:

        rgba(6,7,6,.72);

    border:1px solid rgba(178,145,70,.26);

    outline:none;

    color:#ece2cb;

    padding:0 24px;

    font-size:21px;

    font-family:"Cormorant Infant",serif;

    transition:.35s;

}

.contact-form-wrapper input{

    height:74px;

}

.contact-form-wrapper textarea{

    height:210px;

    padding-top:22px;

    resize:none;

}

.contact-form-wrapper input::placeholder,

.contact-form-wrapper textarea::placeholder{

    color:#9d927d;

}

.contact-form-wrapper input:focus,

.contact-form-wrapper textarea:focus{

    border-color:#cfa65f;

    box-shadow:

        0 0 22px rgba(214,176,86,.12);

}

/*==========================================
BUTTON
==========================================*/

.contact-submit{

    height:86px;

    border:none;

    cursor:pointer;

    font-size:28px;

    font-family:"Cinzel",serif;

    color:#e8d5ae;

    text-transform:uppercase;

    background:

        url("../images/buttons/gold-button-bg.webp")
        center center/100% 100%
        no-repeat;

    transition:.35s;

}


.contact-submit:hover{

    transform:translateY(-3px);

    filter:

        brightness(1.08);

}

@media (max-width:1200px){

    .contact-form-grid{

        grid-template-columns:1fr;

    }

    .contact-image{

        min-height:450px;

    }

}

@media (max-width:768px){

    .contact-image{

        min-height:300px;

    }

    .contact-form-wrapper{

        padding:40px 24px;

    }

    .contact-form-wrapper h2{

        font-size:38px;

        margin-bottom:30px;

        text-align:center;

    }

    .contact-form-wrapper input{

        height:60px;

        font-size:18px;

    }

    .contact-form-wrapper textarea{

        height:170px;

        font-size:18px;

    }

    .contact-submit{

        height:66px;

        font-size:21px;

    }

}






/*==================================================
FAQ
==================================================*/

.faq-section{

    position:relative;

    overflow:hidden;

}

.faq-bg{

    position:absolute;
    inset:0;

    background:
        url("../images/bg/faq-section-bg.webp")
        top/cover
        no-repeat;

    transform:scale(1.03);

}

.faq-section .container{

    position:relative;
    z-index:3;

    padding:80px 0 90px;

}

/*========================
HEADER
========================*/

.faq-header{

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

    gap:34px;

    margin-bottom:55px;

}

.faq-header h2{

    color:#ddb872;

    font-family:"Cinzel",serif;

    font-size:52px;

    font-weight:500;

    letter-spacing:.08em;

}

.faq-decor{

    width:120px;
    height:18px;

    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;

}

.faq-header .faq-decor:first-child{

    background-image:url("../images/icons/faq-left.png");

}

.faq-header .faq-decor:last-child{

    background-image:url("../images/icons/faq-right.png");

}

/*========================
LIST
========================*/

.faq-list{

    max-width:800px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    gap:18px;

}

/*========================
ITEM
========================*/

.faq-item{

    overflow:hidden;

}

.faq-question{

    position:relative;

    width:100%;

    min-height:75px;

    padding:0 90px 0 42px;

    border:none;

    background: url(../images/bg/faq-item-bg.webp) center / 105%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    cursor:pointer;

    transition:.35s;

}

.faq-question::before{

    content:"";

    position:absolute;
    inset:0;

    background:

        radial-gradient(
            circle at center,
            rgba(255,215,120,.05),
            transparent 70%
        );

    opacity:0;

    transition:.35s;

}

.faq-question:hover::before{

    opacity:1;

}

.faq-question span:first-child{

    position:relative;
    z-index:2;

    color:#dfc98c;

    font-size:30px;

    font-family:"Cormorant Infant",serif;

    transition:.35s;

}

.faq-question:hover span:first-child{

    color:#f3dca4;

}

/*========================
PLUS ICON
========================*/

.faq-icon{

    position:absolute;

    right:34px;

    width:44px;
    height:44px;

    border:2px solid rgba(220,182,95,.65);
    border-radius:50%;

    transition:.35s;

}

.faq-icon::before,
.faq-icon::after{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:18px;
    height:2px;

    background:#dcb872;

    transform:translate(-50%,-50%);

    transition:.35s;

}

.faq-icon::after{

    transform:
        translate(-50%,-50%)
        rotate(90deg);

}

.faq-item.active .faq-icon{

    transform:rotate(180deg);

    box-shadow:

        0 0 18px rgba(229,192,108,.2);

}

.faq-item.active .faq-icon::after{

    transform:
        translate(-50%,-50%)
        rotate(0deg);

    opacity:0;

}

/*========================
ACTIVE
========================*/

.faq-item.active .faq-icon{

    transform:rotate(180deg);

}

.faq-item.active .faq-icon::after{

    opacity:0;

}

.faq-item.active .faq-question{

    box-shadow:

        inset 0 -1px 0 rgba(255,220,150,.12);

}

/*========================
ANSWER
========================*/

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:

        max-height .45s ease,
        padding .45s ease;

    background:

        rgba(9,9,8,.72);

    border-left:1px solid rgba(184,146,74,.25);
    border-right:1px solid rgba(184,146,74,.25);
    border-bottom:1px solid rgba(184,146,74,.25);

}

.faq-answer-inner{

    padding:34px 42px 40px;

    color:#d9cfbc;

    font-size:24px;

    line-height:1.8;

    font-family:"Cormorant Infant",serif;

}

/*========================
OPEN
========================*/

.faq-item.active .faq-answer{

    max-height:320px;

}

/*========================
RESPONSIVE
========================*/

@media (max-width:1200px){

    .faq-header h2{

        font-size:42px;

    }

    .faq-question{

        min-height:72px;

        padding:0 78px 0 30px;

    }

    .faq-question span:first-child{

        font-size:25px;

    }

}

@media (max-width:992px){

    .faq-section .container{

        padding:70px 0;

    }

    .faq-header{

        gap:18px;

    }

    .faq-header h2{

        font-size:34px;

        text-align:center;

    }

    .faq-decor{

        width:70px;

    }

    .faq-question{

        min-height:76px;

        padding:0 70px 0 24px;

    }

    .faq-question span:first-child{

        font-size:22px;

        line-height:1.35;

    }

    .faq-answer-inner{

        padding:24px;

        font-size:20px;

    }

    .faq-icon{

        width:38px;
        height:38px;

        right:20px;

    }

}

@media (max-width:768px){

    .faq-section .container{

        padding:55px 0;

    }

    .faq-header{

        margin-bottom:34px;

    }

    .faq-header h2{

        font-size:28px;

    }

    .faq-decor{

        display:none;

    }

    .faq-question{

        min-height:70px;

        padding:18px 62px 18px 20px;

        align-items:flex-start;

    }

    .faq-question span:first-child{

        font-size:20px;

    }

    .faq-answer-inner{

        padding:20px;

        font-size:18px;

        line-height:1.7;

    }
    .location-map{
    	background: url(/assets/images/bg/mobile-map-bg.png) bottom / 100% no-repeat!important;
    }

}

@media (max-width:480px){

    .faq-header h2{

        font-size:24px;

    }

    .faq-question{

        min-height:auto;
		background: url(../images/bg/faq-item-bg.webp) center / 144%;
    }

    .faq-question span:first-child{

        font-size:18px;

    }

    .faq-icon{

        width:34px;
        height:34px;

    }

    .faq-icon::before{

        width:14px;

    }

    .faq-icon::after{

        height:14px;

    }

}



/*==================================================
LOCATION
==================================================*/

.location-section{

    position:relative;

    overflow:hidden;

    min-height:620px;

}

/* карта */

.location-map{

    position:absolute;
    inset:0;

    background:
    url("../images/bg/map-bg.webp")
    center/cover
    no-repeat;

}


/* pin */

.location-pin{

    position:absolute;

    left:63%;
    top:47%;

    width:120px;
    height:150px;

    background:

    url("../images/icons/map-pin.webp")
    center/contain
    no-repeat;

    z-index:3;

    animation:

        pinFloat 4s ease-in-out infinite;

}

/* compass */

.location-compass{

    position:absolute;

    right:85px;
    top:60px;

    width:240px;
    height:240px;

    background:

    url("../images/icons/compass.webp")
    center/contain
    no-repeat;

    opacity:.42;

    z-index:2;

}

/* карточка */

.location-card{

    position:relative;

    z-index:5;

    width:520px;

    margin:80px 0;

    padding:60px;

    background:

        url("../images/bg/location-card-bg.webp")
        center/cover
        no-repeat;

    backdrop-filter:blur(4px);

}

.location-card::before{

    content:"";

    position:absolute;
    inset:0;

    background:

    radial-gradient(

        ellipse at center,

        rgba(255,220,120,.04),

        rgba(0,0,0,.28)

    );

}

.location-card>*{

    position:relative;

    z-index:2;

}

.location-card .section-label{

    display:block;

    text-align:center;

    margin-bottom:22px;

    color:#ddb66d;

    font-family:"Cinzel",serif;

    font-size:40px;

}

.location-divider{

    width:250px;
    height:26px;

    margin:0 auto 35px;

    background:

    url("../images/icons/location-divider.webp")
    center/contain
    no-repeat;

}

.location-card h2{

    text-align:center;

    margin-bottom:25px;

    color:#e7ca8d;

    font-size:42px;

    font-family:"Cinzel",serif;

}

.location-card p{

    max-width:340px;

    margin:0 auto;

    text-align:center;

    color:#d9cfbe;

    line-height:1.8;

    font-size:24px;

    font-family:"Cormorant Infant",serif;

}

.location-card .btn{

    margin:45px auto 0;

    width:320px;

}

/*======================
animation
======================*/

@keyframes pinFloat{

    0%,100%{

        transform:

        translateY(0);

        filter:

        drop-shadow(0 0 12px rgba(255,190,80,.18));

    }

    50%{

        transform:

        translateY(-10px);

        filter:

        drop-shadow(0 0 28px rgba(255,190,80,.42));

    }

}

@media(max-width:1200px){

    .location-card{

        width:470px;

        padding:50px;

    }

    .location-pin{

        left:66%;

        width:90px;

    }

    .location-compass{

        width:180px;
        height:180px;

    }

}

@media(max-width:992px){

    .location-section{

        min-height:auto;

    }

    .location-card{

        width:100%;

        max-width:520px;

        margin:60px auto;

    }

    .location-pin{

        left:70%;
        top:56%;

    }

    .location-compass{

        display:none;

    }

    .location-mushrooms{

        width:280px;

    }

}

@media(max-width:768px){

    .location-section{

        padding-bottom:260px;

    }

    .location-card{

        padding:35px;

    }

    .location-card .section-label{

        font-size:28px;

    }

    .location-card h2{

        font-size:32px;

    }

    .location-card p{

        font-size:20px;

    }

    .location-pin{

        left:50%;
        top:auto;
        bottom:120px;

        transform:translateX(-50%);

    }

    .location-mushrooms{

        width:220px;

    }

}

@media(max-width:576px){

    .location-card{

        padding:28px 22px;

    }

    .location-divider{

        width:180px;

    }

    .location-card .btn{

        width:100%;

    }

    .location-card h2{

        font-size:26px;

    }

}

.location-map{

    animation:

        mapMove 40s ease-in-out infinite alternate;

}

@keyframes mapMove{

    from{

        transform:

            scale(1);

    }

    to{

        transform:

            scale(1.03)
            translateY(-10px);

    }

}
.location-compass{

    animation:

        compassRotate 80s linear infinite;

}

@keyframes compassRotate{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}

.location-pin{

    animation:

        pinFloat 3.8s ease-in-out infinite,
        pinGlow 2.5s ease-in-out infinite;

}

@keyframes pinFloat{

    0%{

        transform:

            translateY(0)
            scale(1);

    }

    35%{

        transform:

            translateY(-10px)
            scale(1.03);

    }

    70%{

        transform:

            translateY(-3px)
            scale(.99);

    }

    100%{

        transform:

            translateY(0)
            scale(1);

    }

}

@keyframes pinGlow{

    0%,100%{

        filter:

            drop-shadow(0 0 12px rgba(255,185,70,.25));

    }

    50%{

        filter:

            drop-shadow(0 0 30px rgba(255,205,100,.7));

    }

}
.location-card{

    animation:

        cardFloat 9s ease-in-out infinite;

}

@keyframes cardFloat{

    0%,100%{

        transform:

            translateY(0);

    }

    50%{

        transform:

            translateY(-4px);

    }

}

.location-pin::after{

    content:"";

    position:absolute;

    left:50%;
    top:52%;

    width:180px;
    height:180px;

    transform:

        translate(-50%,-50%);

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(255,200,90,.45),

            rgba(255,200,90,.18),

            transparent 72%

        );

    filter:blur(22px);

    animation:

        glowPulse 3.5s ease-in-out infinite;

    z-index:-1;

}

@keyframes glowPulse{

    0%,100%{

        opacity:.45;

        transform:

            translate(-50%,-50%)
            scale(.9);

    }

    50%{

        opacity:.95;

        transform:

            translate(-50%,-50%)
            scale(1.18);

    }

}









.catalog-hero{

    position:relative;

    overflow:hidden;

    min-height:100vh;
    padding-top: 100px;
}

.catalog-hero .panel-overlay{

    position:absolute;
    inset:0;

    background:

        linear-gradient(
            90deg,
            rgba(6,8,6,.18),
            rgba(6,8,6,.18),
            rgba(6,8,6,.28)
        );

}
.catalog-hero-bg{

    position:absolute;
    inset:0;

    background:url("../images/bg/catalog-hero.webp")
    center/cover no-repeat;

}

.catalog-hero-content{

    position:relative;
    z-index:3;

    display:flex;

    align-items:center;

    min-height:760px;

}

.catalog-hero-text{

    max-width:640px;

}

.catalog-hero h1{

    margin-bottom:25px;

    font-size:120px;

    font-family:"Cinzel",serif;

    color:#d8b16f;

    text-transform:uppercase;

}

.catalog-hero h2{

    margin-bottom:18px;

    font-size:48px;

    color:#d5b06f;

    font-family:"Cormorant Infant",serif;

}

.catalog-hero p{

    max-width:560px;

    margin-bottom:45px;

    color:#ddd0ba;

    font-size:26px;

    line-height:1.2;

}


.catalog-btn{

    display:inline-flex;

    align-items:center;

    gap:18px;

    padding:22px 42px;

    background:url("../images/bg/button-bg.webp")
    center/100% 100% no-repeat;

    text-decoration:none;

    color:#20160b;

    font-size:26px;

    font-family:"Cinzel",serif;

    transition:.35s;

}

.catalog-btn:hover{

    transform:translateY(-4px);

}

.btn-mushroom{

    width:34px;
    height:34px;

    background:url("../images/icons/mushroom.png")
    center/contain no-repeat;

}

/*======================================
=            FEATURED
======================================*/

.catalog-featured{

    position:relative;

    margin-top:-30px;

    padding-bottom:90px;

}

.featured-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:0;

}


/*========================
        CARD
========================*/

.featured-card{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;


    background:
        radial-gradient(circle at top,
        rgba(255,215,120,.05),
        transparent 45%),
        #11110d;

    border:1px solid rgba(190,155,90,.22);

    overflow:hidden;

    text-align:center;

    transition:.35s;

}

.featured-card:hover{

    transform:translateY(-8px);

    border-color:rgba(223,186,111,.55);

    box-shadow:
        inset 0 0 90px rgba(255,220,130,.05),
        0 15px 40px rgba(0,0,0,.45);

}


/*========================
        IMAGE
========================*/

.featured-image{

    width:100%;

    height:320px;

    margin-bottom:28px;

    background-position:center bottom;

    background-repeat:no-repeat;

    background-size:cover;

    transition:.45s;

}

.featured-card:hover .featured-image{

    transform:scale(1.05);

}


/*========================
    IMAGES
========================*/

.reishi{

    background-image:url("../images/catalog/reishi.webp");

}

.chaga{

    background-image:url("../images/catalog/chaga.webp");

}

.lions-mane{

    background-image:url("../images/catalog/lions-mane.webp");

}

.cordyceps{

    background-image:url("../images/catalog/cordyceps.webp");

}


/*========================
        TITLE
========================*/

.featured-card h3{

    margin-bottom:18px;

    color:#ddb56f;

    font-family:"Cormorant Infant",serif;

    font-size:46px;

    line-height:1.08;

}


/*========================
        TEXT
========================*/

.featured-card p{

    flex:1;

    min-height:90px;

    margin-bottom:34px;

    color:#d4c7af;

    font-size:23px;

    line-height:1.55;

}


/*========================
        BUTTON
========================*/

.featured-btn{
	display: flex;
    justify-content: center;
    align-items: center;
    width: 245px;
    height: 74px;
    margin-top: auto;
    background: url(../images/bg/button-bg.webp) center / cover no-repeat;
    color: #20160b;
    text-decoration: none;
    text-transform: uppercase;
    font-family: "Cinzel", serif;
    font-size: 22px;
    transition: .3s;
    margin-bottom: 20px;

}

.featured-btn:hover{

    transform:translateY(-3px);

    filter:brightness(1.08);

}


/*========================
        RESPONSIVE
========================*/

@media(max-width:1200px){

    .featured-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:768px){

    .catalog-featured{

        margin-top:0;

        padding-bottom:60px;

    }

    .featured-grid{

        grid-template-columns:1fr;

    }

    .featured-card{

        padding:34px 22px;

    }

    .featured-image{

        height:250px;

    }

    .featured-card h3{

        font-size:38px;

    }

    .featured-card p{

        min-height:auto;

        font-size:20px;

        margin-bottom:28px;

    }

    .featured-btn{

        width:220px;

        height:66px;

        font-size:19px;

    }

}

/*======================================
=         FEATURED SLIDER
======================================*/

.catalog-featured{

    position:relative;

    padding:80px 0 100px;

}

.featured-slider{

    overflow:visible;

}

.featured-slider .swiper-slide{

    height:auto;

}

.featured-slide{

    display:block;

    transition:.35s;
    width: 100%;
    height: 100%;

}

.featured-slide img{

    display:block;

    width:100%;
    height: 100%;

    user-select:none;

    pointer-events:none;

}

.featured-slide:hover{

    transform:translateY(-10px) scale(1.02);

}

@media(max-width:1200px){

    .catalog-featured{

        padding:70px 0;

    }

}

@media(max-width:768px){

    .catalog-featured{

        padding:50px 0;

    }

}




/*==================================
        PRODUCTS
==================================*/

.catalog-products{

    padding:110px 0;

}


/*==================================
        TITLE
==================================*/

.catalog-heading{

    margin-bottom:60px;

    text-align:center;

}

.catalog-heading h2{

    margin:18px 0;

    color:#ddb56f;

    font-size:74px;

    font-family:"Cinzel",serif;

    text-transform:uppercase;

}

.catalog-heading p{

    width:min(650px,100%);

    margin:auto;

    color:#d0c4ad;

    font-size:24px;

    line-height:1.7;

}


/*==================================
        FILTERS
==================================*/

.catalog-filters{

    display:grid;

    grid-template-columns:

        1fr
        1fr
        1fr;

    gap:40px;

    margin-bottom:35px;

    padding:45px;

    background:url("../images/bg/filter-bg.webp")
    center/cover
    no-repeat;

    border:1px solid rgba(185,150,82,.28);

}

.filter-item label{

    display:block;

    margin-bottom:18px;

    color:#dcb36e;

    font-size:22px;

    font-family:"Cinzel",serif;

}

.filter-item select{

    width:100%;

    height:64px;

    padding:0 24px;

    background:#11110d;

    border:1px solid rgba(183,146,78,.35);

    color:#d7c8af;

    font-size:20px;

    outline:none;

}

.price-filter input{

    width:100%;

}

.price-values{

    display:flex;

    justify-content:space-between;

    margin-top:16px;

    color:#cabfa8;

    font-size:18px;

}


/*==================================
        SEARCH
==================================*/

.catalog-search{

    position:relative;

    margin-bottom:60px;

}

.catalog-search input{

    width:100%;

    height:72px;

    padding:0 80px 0 28px;

    background:#11110d;

    border:1px solid rgba(185,150,82,.35);

    color:#d6cab4;

    font-size:21px;

    outline:none;

}

.catalog-search button{

    position:absolute;

    top:0;
    right:0;

    width:72px;
    height:72px;

    border:none;

    background:none;

    color:#d9b36d;

    font-size:24px;

    cursor:pointer;

}


/*==================================
        GRID
==================================*/

.products-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}


/*==================================
        RESPONSIVE
==================================*/

@media(max-width:1200px){

    .catalog-filters{

        grid-template-columns:1fr;

    }

    .products-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:768px){

    .catalog-products{

        padding:70px 0;

    }

    .catalog-heading h2{

        font-size:54px;

    }

    .catalog-heading p{

        font-size:20px;

    }

    .catalog-filters{

        padding:28px;

        gap:25px;

    }

    .products-grid{

        grid-template-columns:1fr;

    }

}

.product-card{

    display:flex;

    flex-direction:column;

    position:relative;

    padding:28px;

    background:
        radial-gradient(circle at top,
        rgba(255,210,120,.05),
        transparent 40%),
        #11110d;

    border:1px solid rgba(190,155,90,.25);

    transition:.35s;

}



.product-icon{

    width:76px;
    height:76px;

    margin-bottom:18px;

}

.product-icon img{

    width:100%;

    display:block;

}

.product-image{

    height:310px;

    margin-bottom:24px;

    background-position:center;

    background-repeat:no-repeat;

    background-size:contain;

    transition:.35s;

}

.product-card:hover .product-image{

    transform:scale(1.04);

}

.reishi{

    background-image:url("../images/products/reishi-bottle.webp");

}
.chaga{

    background-image:url("../images/products/chaga-bottle.webp");

}
.lions-mane{

    background-image:url("../images/products/lions-mane-bottle.webp");

}
.cordyceps{

    background-image:url("../images/products/cordyceps-bottle.webp");

}
.maitake{

    background-image:url("../images/products/maitake-bottle.webp");

}

.product-card h3{

    margin-bottom:14px;

    color:#ddb56f;

    font-family:"Cormorant Infant",serif;

    font-size:42px;

    line-height:1.1;

}

.product-card p{

    margin-bottom:18px;

    color:#d3c6ad;

    font-size:22px;

    line-height:1.55;

    flex:1;

}

.product-rating{

    margin-bottom:18px;

    color:#d8a83b;

    font-size:24px;

}

.product-rating span{

    color:#bfb5a0;

    font-size:20px;

}

.product-price{

    margin-bottom:26px;

    color:#e6c17b;

    font-size:46px;

    font-family:"Cormorant Infant",serif;

}

.product-actions{

    display:flex;

    gap:14px;

}

.buy-btn{

    flex:1;

    height:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#20160b;

    text-decoration:none;

    font-family:"Cinzel",serif;

    font-size:20px;

    text-transform:uppercase;

    cursor:pointer;

}

/*======================================
        SECTION
======================================*/

.catalog-about{

    padding:100px 0;

}


/*======================================
        CTA
======================================*/

.catalog-cta{

    position:relative;

    display:flex;

    justify-content:flex-end;

    align-items:center;

    min-height:420px;

    margin-bottom:90px;

    padding:70px;

    background:url("../images/bg/catalog-story.webp")
    center/cover
    no-repeat;

    border:1px solid rgba(183,145,78,.35);

    overflow:hidden;

}

.catalog-cta::before{

    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        rgba(0,0,0,.1),
        rgba(0,0,0,.45)
    );

}

.catalog-cta-content{

    position:relative;

    z-index:2;

    width:520px;

    text-align:center;

}

.section-divider{

    width:220px;
    height:38px;

    margin:0 auto 30px;

    background:url("../images/icons/title-divider.webp")
    center/contain
    no-repeat;

}

.catalog-cta h2{

    margin-bottom:45px;

    color:#ddb56f;

    font-size:72px;

    line-height:1.1;

    font-family:"Cormorant Infant",serif;

}


/*======================================
        WHY
======================================*/

.why-section{

    text-align:center;

}

.section-title{

    margin-bottom:50px;

    color:#ddb56f;

    font-family:"Cinzel",serif;

    font-size:58px;

}

.why-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

}

.why-card{

    padding:45px 30px;

    background:#11110d;

    border:1px solid rgba(180,145,82,.3);

    transition:.35s;

}

.why-card:hover{

    transform:translateY(-8px);

    border-color:#ddb56f;

}

.why-icon{

    width:200px;
    height:200px;

    margin:0 auto 30px;

    background-position:center;

    background-repeat:no-repeat;

    background-size:contain;

}

.leaf{

    background-image:url("../images/icons/leaf.webp");

}

.flask{

    background-image:url("../images/icons/flask.webp");

}

.scroll{

    background-image:url("../images/icons/scroll.webp");

}

.star{

    background-image:url("../images/icons/star.webp");

}

.why-card h3{

    margin-bottom:20px;

    color:#ddb56f;

    font-size:42px;

    line-height:1.1;

    font-family:"Cormorant Infant",serif;

}

.why-card p{

    color:#d4c7af;

    font-size:22px;

    line-height:1.6;

}


/*======================================
        RESPONSIVE
======================================*/

@media(max-width:1200px){

    .why-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .catalog-cta{

        justify-content:center;

    }

}

@media(max-width:768px){

    .catalog-about{

        padding:70px 0;

    }

    .catalog-cta{

        min-height:340px;

        padding:40px 25px;

    }

    .catalog-cta h2{

        font-size:48px;

    }

    .section-title{

        font-size:42px;

    }

    .why-grid{

        grid-template-columns:1fr;

    }

    .why-card{

        padding:35px 25px;

    }

    .why-card h3{

        font-size:34px;

    }

    .why-card p{

        font-size:20px;

    }

}






/*=========================================
            PRODUCT PAGE
=========================================*/

.product-hero{

    position:relative;

    padding:140px 0 100px;

}

.product-wrapper{

    display:grid;

    grid-template-columns:620px minmax(0,1fr);

    gap:80px;

    align-items:start;

}


/*=========================================
            GALLERY
=========================================*/

.product-gallery{

    display:flex;

    gap:22px;

    position:sticky;

    top:120px;

}

.gallery-thumbs{

    width:105px;

    display:flex;

    flex-direction:column;

    gap:16px;

    flex-shrink:0;

}

.gallery-preview{

    flex:1;

    min-width:0;

}

.gallery-preview a{

    display:block;

}

.gallery-preview img{

    width:100%;

    display:block;

}


/*=========================================
            PRODUCT INFO
=========================================*/

.product-info{

    min-width:0;

}


/*=========================================
            RESPONSIVE
=========================================*/

@media(max-width:1200px){

.product-wrapper{

    grid-template-columns:1fr;

    gap:60px;

}

.product-gallery{

    position:static;

}

}

@media(max-width:768px){

.product-hero{

    padding:110px 0 70px;

}

.product-gallery{

    flex-direction:column-reverse;

}

.gallery-thumbs{

    width:100%;

    flex-direction:row;

    justify-content:center;

    flex-wrap:wrap;

}

.gallery-thumb{

    width:75px;

    height:75px;

}

}


/*==================================================
                PRODUCT GALLERY
==================================================*/

.product-gallery{

    display:grid;

    grid-template-columns:100px 1fr;

    gap:22px;

    align-items:start;

}


/*==================================================
                THUMBS
==================================================*/

.gallery-thumb{

    width:100%;

    height:105px;

    padding:0;

    border:2px solid rgba(199,165,90,.15);

    background:#111;

    overflow:hidden;

    cursor:pointer;

    appearance:none;

    -webkit-appearance:none;

    outline:none;

    transition:.3s;

}

.gallery-thumb:hover{

    border-color:#d7b16d;

}

.gallery-thumb.active{

    border-color:#d7b16d;

    box-shadow:0 0 18px rgba(215,177,109,.3);

}

.gallery-thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    pointer-events:none;

}


/*==================================================
                PREVIEW
==================================================*/



.gallery-preview{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    background:

        radial-gradient(circle at top,
        rgba(255,218,133,.06),
        transparent 45%),

        #12110e;

    border:1px solid rgba(212,176,108,.2);

    min-height:720px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.gallery-preview img{

    width:100%;

    height:100%;

    max-height:720px;

    object-fit:contain;

    display:block;

    user-select:none;

    cursor:zoom-in;

    transition:.35s;

}

.gallery-preview:hover img{

    transform:scale(1.02);

}


/*==================================================
                ARROWS
==================================================*/

.gallery-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:56px;

    height:56px;

    border:none;

    border-radius:50%;

    background:rgba(15,15,15,.72);

    backdrop-filter:blur(10px);

    color:#e2bd79;

    cursor:pointer;

    transition:.3s;

    z-index:5;

}

.gallery-arrow:hover{

    background:#d9b36c;

    color:#1d160d;

}

.gallery-prev{

    left:18px;

}

.gallery-next{

    right:18px;

}


/*==================================================
                EXPAND
==================================================*/

.gallery-expand{

    position:absolute;

    right:18px;

    bottom:18px;

    width:54px;

    height:54px;

    border:none;

    border-radius:50%;

    background:rgba(15,15,15,.75);

    color:#e2bd79;

    cursor:pointer;

    transition:.3s;

}

.gallery-expand:hover{

    background:#d9b36c;

    color:#17120c;

}


/*==================================================
                MOBILE
==================================================*/

@media(max-width:992px){

.product-gallery{

    grid-template-columns:1fr;

}

.gallery-thumbs{

    order:2;

    flex-direction:row;

    overflow:auto;

    padding-bottom:8px;

    scrollbar-width:none;

}

.gallery-thumbs::-webkit-scrollbar{

    display:none;

}

.gallery-thumb{

    flex:0 0 80px;

    width:80px;

    height:80px;

}

.gallery-preview{

    min-height:520px;

}

.gallery-preview img{

    max-height:520px;

}

.gallery-arrow{

    width:48px;

    height:48px;

}

}

@media(max-width:640px){

.gallery-preview{

    min-height:420px;

}

.gallery-preview img{

    max-height:420px;

}

.gallery-thumb{

    flex:0 0 70px;

    width:70px;

    height:70px;

}

}


/*=========================================
            PRODUCT INFO
=========================================*/

.product-info{

    display:flex;

    flex-direction:column;

    padding-top:20px;

}


/*==============================
        CATEGORY
==============================*/

.product-category{

    display:inline-flex;

    align-self:flex-start;

    padding:8px 18px;

    margin-bottom:20px;

    border:1px solid rgba(220,180,105,.3);

    color:#d8b16f;

    font-family:"Cinzel",serif;

    font-size:14px;

    letter-spacing:2px;

    text-transform:uppercase;

}


/*==============================
        TITLE
==============================*/

.product-info h1{

    margin-bottom:20px;

    font-family:"Cormorant Infant",serif;

    font-size:72px;

    line-height:1;

    color:#e0bf86;

}


/*==============================
        RATING
==============================*/

.product-rating{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:26px;

    color:#deb977;

    font-size:22px;

}

.product-rating span{

    color:#a89b87;

    font-size:18px;

}


/*==============================
        DESCRIPTION
==============================*/

.product-description{

    margin-bottom:34px;

    color:#d3c6af;

    font-size:24px;

    line-height:1.8;

}


/*==============================
        PRICE
==============================*/

.product-price{

    margin-bottom:32px;

    color:#e8c47d;

    font-family:"Cinzel",serif;

    font-size:54px;

}


/*==============================
        CART
==============================*/

.single-product-cart{

    display:flex;

    gap:20px;

    margin-bottom:20px;

}

.quantity{

    display:flex;

    align-items:center;

    overflow:hidden;

    border:1px solid rgba(223,186,111,.25);

    height:74px;

}

.quantity button{

    width:65px;

    height:100%;

    border:none;

    background:#171511;

    color:#ddb56f;

    font-size:28px;

    cursor:pointer;

    transition:.3s;

}

.quantity button:hover{

    background:#d8b16f;

    color:#111;

}

.quantity input{

    width:70px;

    border:none;

    outline:none;

    background:#12110d;

    color:#fff;

    text-align:center;

    font-size:24px;

}

.sigle-product-cart .btn{

    flex:1;

}


/*==============================
        BUY NOW
==============================*/

.buy-now{

    margin-bottom:45px;

}


/*==============================
        BENEFITS
==============================*/

.product-benefits{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin:0 0 45px;

    padding:0;

    list-style:none;

}

.product-benefits li{

    position:relative;

    padding-left:34px;

    color:#d3c6af;

    font-size:21px;

}

.product-benefits li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:#d8b16f;

    font-weight:bold;

}


/*==============================
        FEATURES
==============================*/

.product-features{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}

.single-feature{

    padding:28px 18px;

    border:1px solid rgba(220,180,105,.18);

    background:rgba(255,255,255,.02);

    text-align:center;

    transition:.3s;

}

.single-feature:hover{

    border-color:#d8b16f;

    transform:translateY(-4px);

}

.single-feature i{

    display:block;

    margin-bottom:18px;

    color:#d8b16f;

    font-size:34px;

}

.single-feature span{

    display:block;

    color:#d2c5ae;

    font-size:18px;

    line-height:1.5;

}


/*==============================
        RESPONSIVE
==============================*/

@media(max-width:1200px){

.product-wrapper{

    grid-template-columns:1fr;

}

.product-info{

    padding-top:50px;

}

}

@media(max-width:768px){

.product-info h1{

    font-size:52px;

}

.product-description{

    font-size:20px;

}

.product-price{

    font-size:42px;

}

.sigle-product-cart{

    flex-direction:column;

}

.quantity{

    width:100%;

}

.product-benefits{

    grid-template-columns:1fr;

}

.product-features{

    grid-template-columns:1fr;

}

}




/* Chrome, Edge, Safari */

.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button{

    -webkit-appearance:none;

    margin:0;

}

/* Firefox */

.quantity input{

    -moz-appearance:textfield;

    appearance:textfield;

}


/*=========================================
            ABOUT PRODUCT
=========================================*/

.product-about{

    position: relative;

    padding: 90px 0;

}

.product-about::before{

    content: "";

    position: absolute;
    inset: 0;

    background:
        url("../images/bg/product-about-bg.webp")
        center/cover no-repeat;

    opacity: .18;

    pointer-events: none;

}

.product-about .container{

    position: relative;
    z-index: 2;

}


/*=========================================
                TOP
=========================================*/

.about-top{

    display: grid;

    grid-template-columns: 1.15fr .85fr;

    gap: 55px;

    margin-bottom: 70px;

    align-items: center;

}

.about-image{

    overflow: hidden;

    border:1px solid rgba(214,176,106,.18);

}

.about-image img{

    width:100%;

    display:block;

}

.about-content h2{

    margin-bottom:40px;

    color:#ddb56f;

    font-size:52px;

    font-family:"Cormorant Infant",serif;

}

.about-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:34px;

}

.about-item h3{

    margin-bottom:14px;

    color:#ddb56f;

    font-size:24px;

    text-transform:uppercase;

    font-family:"Cinzel",serif;

}

.about-item p{

    color:#d6ccb6;

    line-height:1.8;

    font-size:18px;

}


/*=========================================
              BENEFITS
=========================================*/

.product-benefits{

    margin-bottom:75px;

}

.product-benefits h2{

    margin-bottom:40px;

    text-align:center;

    color:#ddb56f;

    font-size:46px;

    font-family:"Cormorant Infant",serif;

}

.benefits-grid{

    display:grid;

    grid-template-columns:repeat(8,1fr);

    gap:18px;

}

.benefit-card{

    padding:28px 18px;

    text-align:center;

    border:1px solid rgba(214,176,106,.18);

    background:rgba(15,15,12,.45);

    transition:.35s;

}

.benefit-card:hover{

    border-color:#ddb56f;

    transform:translateY(-5px);

}

.benefit-card img{

    width:54px;

    height:54px;

    margin:0 auto 16px;

    display:block;

}

.benefit-card span{

    display:block;

    color:#d7ccb4;

    font-size:17px;

    line-height:1.45;

}


/*=========================================
            DESCRIPTION
=========================================*/

.description-grid{

    position:relative;

    margin-bottom:80px;

}

.description-grid h2{

    margin-bottom:45px;

    text-align:center;

    color:#ddb56f;

    font-size:46px;

    font-family:"Cormorant Infant",serif;

}

.description-grid::before{

    content:"";

    position:absolute;

    left:-70px;
    bottom:-40px;

    width:310px;
    height:370px;

    background:url("../images/bg/flask-left.webp")
    center/contain no-repeat;

    pointer-events:none;

}

.description-grid::after{

    content:"";

    position:absolute;

    right:-70px;
    bottom:-40px;

    width:310px;
    height:370px;

    background:url("../images/bg/flask-right.webp")
    center/contain no-repeat;

    pointer-events:none;

}

.description-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:60px;
    padding: 0 250px;
}

.description-item h3{

    margin-bottom:18px;

    color:#ddb56f;

    font-size:25px;

    font-family:"Cinzel",serif;

}

.description-item p{

    color:#d6ccb6;

    font-size:18px;

    line-height:1.9;

}


/*=========================================
            HOW TO USE
=========================================*/

.product-usage h2{

    margin-bottom:50px;

    text-align:center;

    color:#ddb56f;

    font-size:46px;

    font-family:"Cormorant Infant",serif;

}

.usage-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

}

.usage-step{

    text-align:center;

}

.usage-icon{

    width:120px;

    height:120px;

    margin:0 auto 22px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    border:1px solid rgba(214,176,106,.18);

    background:rgba(18,18,15,.5);

}

.usage-icon img{

    width:64px;

}

.usage-number{

    margin-bottom:16px;

    color:#ddb56f;

    font-size:42px;

    font-family:"Cormorant Infant",serif;

}

.usage-step p{

    color:#d6ccb6;

    line-height:1.8;

    font-size:18px;

}


/*=========================================
                MOBILE
=========================================*/

@media(max-width:1200px){

    .benefits-grid{

        grid-template-columns:repeat(4,1fr);

    }

    .usage-grid{

        grid-template-columns:repeat(2,1fr);

    }

}


@media(max-width:991px){

    .about-top{

        grid-template-columns:1fr;

    }

    .about-grid{

        grid-template-columns:1fr;

    }

    .description-grid{

        grid-template-columns:1fr;

    }

    .product-description::before,
    .product-description::after{

        display:none;

    }

}


@media(max-width:768px){

    .product-about{

        padding:70px 0;

    }

    .about-content h2,
    .product-benefits h2,
    .product-description h2,
    .product-usage h2{

        font-size:38px;

    }

    .benefits-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .usage-grid{

        grid-template-columns:1fr;

    }

    .about-item p,
    .description-item p,
    .usage-step p{

        font-size:17px;

    }

}

.product-usage-section{

    position:relative;

    padding:90px 0;

}

.usage-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:40px;

    margin:50px 0 80px;

}

.usage-card{

    text-align:center;

}

.usage-circle{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    margin-bottom:20px;

}

.usage-circle span{

    width:68px;
    height:68px;

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

    border-radius:50%;

    background:#231b12;

    border:1px solid rgba(219,177,109,.3);

    color:#ddb56f;

    font-size:34px;

    font-family:"Cormorant Infant",serif;

}

.usage-circle img{

    width:92px;

}

.usage-card p{

    color:#d6ccb6;

    line-height:1.7;

}

.product-tables{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

}

.table-card{

    position:relative;

    padding:35px;

    border:1px solid rgba(219,177,109,.2);

}


.table-card h2{

    text-align:center;

    margin-bottom:25px;

    color:#ddb56f;

    font-size:42px;

    font-family:"Cormorant Infant",serif;

}

.table-card table{

    width:100%;

    border-collapse:collapse;

}

.table-card td,
.table-card th{

    padding:16px;

    border:1px solid rgba(219,177,109,.15);

    color:#d7ccb4;

}

.table-card th{

    color:#ddb56f;

}

@media(max-width:991px){

    .usage-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .product-tables{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .usage-grid{

        grid-template-columns:1fr;

    }

}


.product-extra{

    padding:90px 0;

}

.extra-top,
.extra-bottom{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

    margin-bottom:40px;

}

.recommended,
.contraindications,
.faq,
.reviews{

    border:1px solid rgba(220,180,110,.18);

    padding:35px;

}

.recommended h2,
.contraindications h2,
.faq h2,
.reviews h2{

    margin-bottom:35px;

    text-align:center;

    color:#ddb56f;

    font-family:"Cormorant Infant",serif;

    font-size:42px;

}

.recommended-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:18px;

}

.recommended-card{

    padding:22px;

    text-align:center;

    border:1px solid rgba(220,180,110,.18);

}

.recommended-card img{

    width:48px;

    margin-bottom:15px;

}

.recommended-card span{

    display:block;

    color:#d6ccb6;

    line-height:1.5;

}

.contraindications ul{

    list-style:none;

    padding:0;

}

.contraindications li{

    position:relative;

    padding-left:30px;

    margin-bottom:18px;

    color:#d6ccb6;

    line-height:1.7;

}

.contraindications li::before{

    content:"⚠";

    position:absolute;

    left:0;

    color:#ddb56f;

}

.faq details{

    border:1px solid rgba(220,180,110,.18);

    margin-bottom:15px;

}

.faq summary{

    padding:18px 22px;

    cursor:pointer;

    color:#d6ccb6;

}

.faq p{

    padding:0 22px 20px;

    color:#bfb49e;

    line-height:1.7;

}

.reviews-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}

.review-card{

    padding:25px;

    border:1px solid rgba(220,180,110,.18);

}

.review-rating{

    color:#ddb56f;

    margin-bottom:12px;

}

.review-card h3{

    color:#ddb56f;

    margin-bottom:6px;

}

.review-card span{

    color:#999;

    font-size:14px;

}

.review-card p{

    margin-top:18px;

    color:#d6ccb6;

    line-height:1.7;

}

@media(max-width: 1200px){
    .description-grid{
    	padding: 0 200px;
    }
}

@media(max-width:991px){

    .extra-top,
    .extra-bottom{

        grid-template-columns:1fr;

    }

    .recommended-grid{

        grid-template-columns:repeat(3,1fr);

    }

    .reviews-grid{

        grid-template-columns:1fr;

    }
    .description-grid{
    	padding: 0 20px;
    }
    .description-grid::before, .description-grid::after{
    	display: none;
    }

}

@media(max-width:768px){

    .recommended-grid{

        grid-template-columns:repeat(2,1fr);

    }

}


.related-products{

    padding:90px 0;

}

.related-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

}

.related-card{

    border:1px solid rgba(220,180,110,.18);

    overflow:hidden;

    transition:.35s;

}

.related-card:hover{

    transform:translateY(-6px);

    border-color:rgba(220,180,110,.45);

}

.related-image{

    aspect-ratio:1/.82;

    overflow:hidden;

}

.related-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.45s;

}

.related-card:hover img{

    transform:scale(1.06);

}

.related-content{

    padding:20px;

}

.related-content h3{

    color:#ddb56f;

    font-family:"Cormorant Infant",serif;

    font-size:34px;

    margin-bottom:6px;

}

.related-content span{

    display:block;

    color:#9e957d;

    font-style:italic;

    margin-bottom:14px;

}

.related-rating{

    color:#ddb56f;

    margin-bottom:18px;

}

.related-rating small{

    color:#8c846f;

    margin-left:8px;

}

.related-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:18px;

}

.related-price{

    color:#fff;

    font-size:34px;

    font-family:"Cormorant Infant",serif;

}

.related-bottom .btn{

    width:170px;

    height:56px;

    font-size:17px;

}

@media(max-width:1200px){

    .related-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:768px){

    .related-grid{

        grid-template-columns:1fr;

    }

}


/*==========================
        TABLET
==========================*/

@media (max-width: 992px){

    .catalog-hero{

        min-height:700px;

        padding:120px 0 80px;

    }

    .catalog-hero-content{

        justify-content:center;

        text-align:center;

    }

    .catalog-hero-text{

        max-width:700px;

    }

    .catalog-hero-text h1{

        font-size:82px;

    }

    .catalog-hero-text h2{

        font-size:38px;

    }

    .catalog-hero-text p{

        font-size:22px;

    }

}


/*==========================
        MOBILE
==========================*/

@media (max-width:768px){

    .catalog-hero{

        min-height:auto;

        padding:100px 0 70px;

        background-position:center;

    }

    .catalog-hero-content{

        justify-content:center;

        text-align:center;

    }

    .catalog-hero-text{

        max-width:100%;

    }

    .catalog-hero-text h1{

        font-size:58px;

        line-height:1;

        margin-bottom:18px;

    }

    .catalog-hero-text h2{

        font-size:28px;

        line-height:1.25;

        margin-bottom:22px;

    }

    .catalog-hero-text p{

        font-size:18px;

        line-height:1.8;

        margin-bottom:35px;

    }

    .catalog-btn{

        width:260px;

        height:72px;

        margin:0 auto;

        font-size:18px;

    }

}


/*==========================
      SMALL MOBILE
==========================*/

@media (max-width:480px){

    .catalog-hero{

        padding:80px 0 60px;

    }

    .catalog-hero-text h1{

        font-size:46px;

    }

    .catalog-hero-text h2{

        font-size:23px;

    }

    .catalog-hero-text p{

        font-size:16px;

    }

    .catalog-btn{

        width:220px;

        height:64px;

        font-size:16px;

    }

}



/*==========================
        1200px
==========================*/

@media(max-width:1200px){

    .contacts-cards{

        grid-template-columns:repeat(2,1fr);

        gap:30px;

    }

}


/*==========================
        992px
==========================*/

@media(max-width:992px){

    .contacts-hero{

        padding:120px 0 80px;

    }

    .contacts-hero-content{

        text-align:center;
        margin-bottom: 100px;
        min-height: unset;

    }

    .contacts-intro{

        max-width:700px;

        margin:0 auto 60px;

    }

    .contacts-intro h1{

        font-size:72px;

    }

    .contacts-intro p{

        font-size:22px;

    }

}


/*==========================
        768px
==========================*/

@media(max-width:768px){

    .contacts-hero{

        padding:90px 0 70px;

    }

    .contacts-intro{

        margin-bottom:45px;

    }

    .contacts-intro h1{

        font-size:54px;

        line-height:1;

    }

    .contacts-intro p{

        font-size:18px;

        line-height:1.8;

    }

    .contacts-cards{

        grid-template-columns:1fr;

        gap:22px;

    }

    .contact-card{

        padding:35px 25px;

    }

    .contact-icon{

        width:72px;

        height:72px;

        margin:0 auto 20px;

        background-size:contain;

    }

    .contact-card h3{

        font-size:30px;

        margin-bottom:12px;

    }

    .contact-card p{

        font-size:18px;

        line-height:1.7;

    }

}


/*==========================
        480px
==========================*/

@media(max-width:480px){

    .contacts-hero{

        padding:80px 0 60px;

    }

    .contacts-intro h1{

        font-size:42px;

    }

    .contacts-intro p{

        font-size:16px;

    }

    .section-label{

        font-size:14px;

        letter-spacing:2px;

    }

    .contact-card{

        padding:28px 20px;

    }

    .contact-icon{

        width:60px;

        height:60px;

    }

    .contact-card h3{

        font-size:26px;

    }

    .contact-card p{

        font-size:16px;

    }

}