html,
body {
overflow-x: hidden;
overflow-y: auto;
}
* {
font-family: Playfair Display, serif;
}
body {
padding-top: 68px;
/* match navbar height */
line-height: 1.6;
}
.logo {
font-size: 30px;
font-weight: 800;
color: #fefbfb;
}
.nav {
background: linear-gradient(120deg, #0047AB 0%, #046191 50%, #088F8F 100%);
}
.navcolor {
background: linear-gradient(120deg, #0047AB 0%, #046191 50%, #088F8F 100%);
}
.bgback {
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url('../image/back2.webp');
background-size: cover;
background-position: center;
}
h1 {
font-size: 3rem;
}
p {
font-size: 1.4rem;
}
ul {
font-size: 1.4rem;
}
li {
font-size: 1.3rem;
}
h2 {
font-size: 2.1rem;
}
h3 {
font-size: 1.5rem;
}
.small {
font-size: 1.2rem;
}
.faqfont {
font-size: 1.4rem;
}
/* =================================
MAIN HERO
================================= */
.cholibrium-premium-hero {
position: relative;
background:
radial-gradient(circle at 85% 20%,
rgba(177, 140, 74, 0.18),
transparent 30%),
radial-gradient(circle at 15% 85%,
rgba(62, 101, 67, 0.10),
transparent 35%),
linear-gradient(135deg,
#f8f6ef 0%,
#ffffff 48%,
#f2f5ed 100%);
}
/* =================================
BACKGROUND DECORATION
================================= */
.hero-orb {
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(5px);
}
.hero-orb-one {
width: 420px;
height: 420px;
top: -220px;
right: -100px;
background:
rgba(184, 145, 78, 0.12);
}
.hero-orb-two {
width: 350px;
height: 350px;
bottom: -200px;
left: -140px;
background:
rgba(47, 91, 56, 0.10);
}
.hero-grid {
position: absolute;
inset: 0;
opacity: 0.30;
background-image:
linear-gradient(rgba(40, 67, 43, 0.035) 1px,
transparent 1px),
linear-gradient(90deg,
rgba(40, 67, 43, 0.035) 1px,
transparent 1px);
background-size: 55px 55px;
pointer-events: none;
}
/* =================================
LEFT CONTENT
================================= */
.cholibrium-hero-content {
position: relative;
z-index: 5;
max-width: 700px;
}
/* EYEBROW */
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 11px;
padding: 9px 17px 9px 10px;
border:
1px solid rgba(48, 88, 55, 0.14);
border-radius: 100px;
background:
rgba(255, 255, 255, 0.72);
box-shadow:
0 10px 30px rgba(35, 60, 39, 0.06);
color:
#315c3b;
font-size:
11px;
font-weight:
800;
letter-spacing:
1.3px;
}
.eyebrow-icon {
width: 31px;
height: 31px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
#315c3b;
color:
#ffffff;
font-size:
12px;
}
/* HEADING */
.cholibrium-hero-title {
color:
#1d3122;
font-size:
clamp(2.1rem, 5vw, 3.6rem);
font-weight:
800;
line-height:
1.04;
}
.cholibrium-hero-title span {
margin-top:
7px;
color:
#b18443;
}
/* DESCRIPTION */
.cholibrium-hero-description {
max-width:
650px;
color:
#5f685f;
}
.cholibrium-hero-description strong {
color:
#294f32;
}
/* =================================
BENEFIT CARDS
================================= */
.hero-benefit-card {
display:
flex;
align-items:
flex-start;
gap:
15px;
padding:
22px;
background:
rgba(255, 255, 255, 0.78);
border:
1px solid rgba(44, 80, 49, 0.09);
border-radius:
19px;
box-shadow:
0 15px 40px rgba(36, 61, 41, 0.06);
transition:
all 0.35s ease;
}
.hero-benefit-card:hover {
transform:
translateY(-5px);
box-shadow:
0 22px 45px rgba(36, 61, 41, 0.11);
}
.benefit-icon {
width:
46px;
min-width:
46px;
height:
46px;
display:
flex;
align-items:
center;
justify-content:
center;
border-radius:
14px;
background:
rgba(49, 92, 59, 0.10);
color:
#315c3b;
font-size:
18px;
}
.hero-benefit-card p {
margin:
0;
color:
#69716a;
}
/* =================================
CTA
================================= */
.cholibrium-primary-btn {
width: 100%;
font-size: 1.3rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 13px 14px 13px 24px;
border-radius: 18px;
background: linear-gradient(135deg,
#244b2e,
#35663e);
color: #ffffff;
text-decoration: none;
box-shadow: 0 18px 35px rgba(36, 75, 46, 0.25);
transition: all 0.35s ease;
}
.cholibrium-primary-btn:hover {
color:
#ffffff;
transform:
translateY(-2px);
box-shadow:
0 25px 45px rgba(36, 75, 46, 0.32);
}
.cholibrium-primary-btn small {
display:
block;
margin-bottom:
3px;
color:
rgba(255, 255, 255, 0.66);
font-size:
12px;
font-weight:
700;
letter-spacing:
1.4px;
}
.cholibrium-primary-btn strong {
font-size:
20px;
font-weight:
750;
}
.btn-arrow {
width:
50px;
min-width:
50px;
height:
50px;
display:
flex;
align-items:
center;
justify-content:
center;
border-radius:
14px;
background:
#d4ac69;
color:
#203b27;
font-size:
18px;
transition:
transform 0.35s ease;
}
.cholibrium-primary-btn:hover .btn-arrow {
transform:
rotate(-35deg);
}
.trust-divider {
width:
1px;
height:
18px;
background:
rgba(45, 72, 50, 0.16);
}
/* =================================
PRODUCT SHOWCASE
================================= */
.cholibrium-product-showcase {
position:
relative;
min-height:
680px;
display:
flex;
align-items:
center;
justify-content:
center;
}
.product-backdrop {
position:
absolute;
width:
500px;
height:
500px;
border-radius:
48% 52% 54% 46% / 42% 46% 54% 58%;
background:
linear-gradient(145deg,
#e3d2af,
#bfa06b);
opacity:
0.48;
transform:
rotate(-10deg);
box-shadow:
inset 0 0 80px rgba(255, 255, 255, 0.45);
}
.product-image-wrapper {
position:
relative;
z-index:
3;
width:
100%;
max-width:
550px;
text-align:
center;
}
.cholibrium-product-image {
width:
100%;
max-height:
610px;
object-fit:
contain;
filter:
drop-shadow(0 35px 35px rgba(37, 57, 40, 0.22));
transition:
transform 0.5s ease;
}
.cholibrium-product-showcase:hover .cholibrium-product-image {
transform:
translateY(-8px) scale(1.015);
}
/* TOP 10 MUSHROOM TAG */
.product-top-tag {
position:
absolute;
z-index:
6;
top:
55px;
right:
15px;
display:
flex;
align-items:
center;
gap:
10px;
padding:
11px 16px 11px 11px;
border-radius:
17px;
background:
rgba(255, 255, 255, 0.87);
border:
1px solid rgba(255, 255, 255, 0.75);
box-shadow:
0 15px 40px rgba(35, 55, 38, 0.12);
color:
#315c3b;
font-size:
9px;
font-weight:
800;
line-height:
1.35;
letter-spacing:
1px;
backdrop-filter:
blur(12px);
}
.tag-number {
width:
42px;
height:
42px;
display:
flex;
align-items:
center;
justify-content:
center;
border-radius:
12px;
background:
#315c3b;
color:
#ffffff;
font-size:
18px;
}
/* CERTIFICATION */
.premium-certification-card {
position:
absolute;
z-index:
7;
left:
0;
bottom:
75px;
display:
flex;
align-items:
center;
gap:
13px;
max-width:
290px;
padding:
12px 17px 12px 12px;
border-radius:
18px;
background:
rgba(255, 255, 255, 0.91);
border:
1px solid rgba(255, 255, 255, 0.90);
box-shadow:
0 18px 45px rgba(35, 55, 38, 0.13);
backdrop-filter:
blur(14px);
}
.certification-image {
width:
60px;
min-width:
60px;
}
.premium-certification-card small {
display:
block;
margin-bottom:
4px;
color:
#a87b3e;
font-size:
8px;
font-weight:
800;
letter-spacing:
1.1px;
}
.premium-certification-card strong {
display:
block;
color:
#294530;
font-size:
12px;
line-height:
1.4;
}
/* FLOATING MUSHROOM CARD */
.floating-mushroom-card {
position:
absolute;
z-index:
7;
right:
-15px;
bottom:
130px;
display:
flex;
align-items:
center;
gap:
11px;
max-width:
265px;
padding:
14px;
border-radius:
17px;
background:
rgba(40, 75, 47, 0.94);
color:
#ffffff;
box-shadow:
0 20px 40px rgba(35, 65, 40, 0.22);
}
.mushroom-card-icon {
width:
43px;
min-width:
43px;
height:
43px;
display:
flex;
align-items:
center;
justify-content:
center;
border-radius:
13px;
background:
rgba(255, 255, 255, 0.13);
color:
#d9b475;
}
.floating-mushroom-card small {
display:
block;
margin-bottom:
4px;
color:
rgba(255, 255, 255, 0.60);
font-size:
8px;
font-weight:
700;
letter-spacing:
1px;
}
.floating-mushroom-card strong {
font-size:
11px;
line-height:
1.4;
}
/* DAILY ROUTINE BADGE */
.daily-routine-badge {
position:
absolute;
z-index:
5;
top:
135px;
left:
15px;
width:
92px;
height:
92px;
display:
flex;
flex-direction:
column;
align-items:
center;
justify-content:
center;
border-radius:
50%;
background:
#f8f4e9;
border:
1px solid rgba(177, 132, 67, 0.28);
box-shadow:
0 15px 35px rgba(67, 60, 42, 0.11);
transform:
rotate(-10deg);
}
.daily-routine-badge span {
color:
#b18443;
font-size:
24px;
font-weight:
900;
line-height:
1;
}
.daily-routine-badge small {
margin-top:
5px;
color:
#39513e;
font-size:
7px;
font-weight:
900;
line-height:
1.3;
letter-spacing:
0.7px;
text-align:
center;
}
/* =================================
RESPONSIVE
================================= */
@media (max-width: 991.98px) {
.cholibrium-hero-content {
margin:
auto;
}
.hero-trust-row {
justify-content:
center;
}
.cholibrium-product-showcase {
min-height:
560px;
}
.product-backdrop {
width:
400px;
height:
400px;
}
.product-top-tag {
right:
5%;
}
.premium-certification-card {
left:
5%;
bottom:
30px;
}
.floating-mushroom-card {
right:
2%;
bottom:
100px;
}
}
@media (max-width: 575.98px) {
.cholibrium-premium-hero {
overflow:
hidden;
}
.cholibrium-hero-title {
line-height:
1.08;
}
.hero-benefit-card {
text-align:
left;
}
.cholibrium-primary-btn {
padding:
12px 12px 12px 17px;
}
.cholibrium-primary-btn strong {
font-size:
13px;
}
.hero-trust-row {
gap:
10px;
}
.trust-divider {
display:
none;
}
.cholibrium-product-showcase {
min-height:
465px;
}
.product-backdrop {
width:
310px;
height:
310px;
}
.cholibrium-product-image {
max-height:
430px;
}
.product-top-tag {
top:
20px;
right:
0;
transform:
scale(0.82);
transform-origin:
right top;
}
.daily-routine-badge {
top:
55px;
left:
0;
transform:
scale(0.75) rotate(-10deg);
transform-origin:
left top;
}
.premium-certification-card {
left:
0;
bottom:
5px;
max-width:
225px;
transform:
scale(0.85);
transform-origin:
left bottom;
}
.floating-mushroom-card {
display:
none;
}
}
em {
font-weight: 600;
font-size: 1.3rem;
}
.feature-image img {
mix-blend-mode: multiply;
object-fit: contain;
}
.feature-content {
flex: 1;
}
@media (max-width: 767px) {
.feature-image {
width: 100%;
min-width: 100%;
}
.feature-content {
text-align: center;
}
}
.sectioncolor {
background: linear-gradient(120deg, #0047AB 0%, #046191 50%, #0C3B67 100%);
}
.btn1 {
background-color: #261218;
color: rgb(255, 255, 254);
}
.btn1:hover {
color: rgb(251, 251, 251);
}
.paywidth {
width: 900px;
mix-blend-mode: multiply;
}
.about {
background-color: white;
}
.navtext {
color: #eeecec;
font-size: 20px;
font-weight: 550;
}
.navtext:hover {
color: #afe911fe;
}
.review-img {
width: 300px;
object-fit: cover;
margin: auto;
}
.gurenty {
background-color: #ffffff;
border-radius: 25px;
}
.benefits {
border-radius: 10px;
}
.ingimg {
border-radius: 3%;
border-top: 5px solid #054377;
border-bottom: 5px solid #054377;
border-left: 2px solid #054377;
border-right: 2px solid #054377;
}
.ing {
width: 250px !important;
object-fit: cover;
border-radius: 2%;
}
a {
text-decoration: none;
}
.main-title {
line-height: 1;
text-align: center;
color: #333;
margin-bottom: 42px;
}
.logos-row {
min-height: 95px;
margin-bottom: 4px;
}
.logo-box {
height: 96px;
display: flex;
align-items: center;
justify-content: center;
padding: 8px 18px;
}
.logo-box img {
max-width: 100%;
max-height: 88px;
object-fit: contain;
}
.badge {
font-size: 1.2rem;
}
.references-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-top: 5px;
}
.reference-list {
margin: 0;
padding-left: 30px;
}
.reference-list li {
padding-left: 3px;
margin-bottom: 7px;
font-size: 14px;
line-height: 1.42;
color: #111;
}
.reference-list li::marker {
font-size: 10px;
}
@media (max-width: 991px) {
.main-title {
margin-bottom: 30px;
}
.logos-row {
gap: 0px;
}
.logo-box {
height: 85px;
}
.references-grid {
gap: 20px;
}
}
@media (max-width: 767px) {
.references-page {
padding: 20px 15px 40px;
}
.main-title {
margin-bottom: 30px;
}
.logos-row {
min-height: auto;
}
.logo-box {
height: 80px;
margin-bottom: 10px;
}
.references-grid {
display: block;
margin-top: 15px;
}
.reference-column+.reference-column {
margin-top: 15px;
}
.reference-list li {
font-size: 12px;
line-height: 1.5;
margin-bottom: 9px;
}
section.container.py-0.mt-3 ul {
padding: 0;
margin: 0;
}
section.container.py-0.mt-3 .list-inline-item {
display: block;
margin: 0 !important;
padding: 7px 0;
}
section.container.py-0.mt-3 .list-inline-item a {
display: inline-block;
}
}
.bottle-6 {
width: 40vw;
}
.payment-snap {
width: 1200px;
}
.custom-toggler {
border: none;
background: transparent;
padding: 8px;
}
.custom-toggler span {
display: block;
width: 25px;
height: 4px;
margin: 4px 0 0 0px;
background-color: #fbfafa;
border-radius: 4px;
transition: all 0.3s ease;
}
/* Section margin top when click navbar section */
section {
scroll-margin-top: 75px;
}
.custom-hover {
color: rgb(248, 244, 244);
text-decoration: none;
}
.custom-hover:hover {
color: #f5c905;
text-decoration: underline;
}
/* popup */
/* ================ */
.purchase-proof {
position: fixed;
bottom: 20px;
left: 20px;
background: #ffffff;
border-radius: 12px;
padding: 15px 18px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
font-size: 14px;
max-width: 300px;
z-index: 9999;
display: none;
transform: translateX(-120%);
transition: transform 0.5s ease;
font-family: Arial, sans-serif;
}
.purchase-proof strong {
color: #1e7e34;
}
.purchase-proof small {
color: #777;
}
/* Mobile View */
@media (max-width: 768px) {
h1 {
font-size: 1.8rem !important;
}
h2 {
font-size: 1.5rem !important;
}
h3 {
font-size: 1.4rem !important;
}
p {
font-size: 1.3rem !important;
}
ul {
font-size: 1.3rem !important;
}
.faqfont {
font-size: 1.3rem !important;
}
.btn1 {
width: 100%;
}
.banner-img1 {
height: auto;
}
.btncenter {
justify-content: center;
padding-top: 25px;
}
.navcenter {
text-align: center;
}
.imgwidth {
height: auto;
}
body {
margin-top: -15px
}
.bottle-6 {
width: auto;
}
.badge {
text-wrap: inherit;
line-height: 1.5;
}
.payment-snap {
width: auto;
}
.revwidth {
height: auto;
}
}
@media (max-width: 992px) {
.revwidth {
height: auto;
}
body {
margin-top: -15px
}
.claim {
width: 100%;
}
.navcenter {
text-align: center;
}
.btncenter {
justify-content: center;
padding-top: 25px;
}
}
@media(max-width:1200px) {
.payment-snap {
width: auto;
}
.bottle-6 {
width: auto;
}
}
@media(max-width:1500px) {}