#gherb-home {
--green: #1b5e20;
--green-light: #eaf5ec;
--green-mid: #2ccf54;
--text: #0e1e3f;
--text-gray: #4b5b67;
--radius: 30px;
font-family: "Kanit", sans-serif !important;
font-weight: 400;
color: #0e1e3f;
overflow-x: clip;
}
#gherb-home *, #gherb-home *::before, #gherb-home *::after { box-sizing: border-box; }
#gherb-home h1, #gherb-home h2, #gherb-home h3,
#gherb-home h4, #gherb-home p, #gherb-home span,
#gherb-home a { margin: 0; padding: 0; }
#gherb-home img { display: block; max-width: 100%; } .gh-container {
max-width: 100%;
margin: 0 auto;
padding: 0 72px;
}
.gh-section { padding: 80px 30px; }
.gh-section--gray { background: #f7f9f7; }
.gh-section--white { background: #fff; } .gh-section-header {
text-align: center;
margin-bottom: 56px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.gh-section-header h2 {
font-size: 48px; font-weight: 700; color: #0e1e3f; line-height: 1.2;
}
.gh-section-sub {
font-size: 20px; color: #7f7f7f; font-weight: 400;
}
.gh-badge-pill {
display: inline-block;
background: #1B5E20; color: #fff;
font-size: 14px; font-weight: 700;
padding: 8px 20px; border-radius: 50px;
line-height: 1.4; margin-bottom: 8px;
} .gh-btn {
display: inline-flex !important;
align-items: center;
gap: 8px;
border-radius: 50px !important;
font-size: 16px;
font-weight: 500;
cursor: pointer;
text-decoration: none !important;
transition: all 0.2s;
border: none !important;
white-space: nowrap;
padding: 5px 28px !important;
line-height: 1.4;
}
.gh-btn--dark         { background: #1B5E20 !important; color: #fff !important; } .gh-btn--ghost        { background: rgba(0,152,74,0.2) !important; color: #fff !important; } .gh-btn--outline-green       { background: transparent !important; color: #1b5e20 !important; border: 1px solid #2ccf54 !important; } .gh-btn--small {
background: #fff !important; color: #0e1e3f !important;
font-size: 12px !important; padding: 5px 16px !important;
align-self: flex-start !important;
width: max-content !important;
}
.gh-btn--small:hover { background: #eaf5ec !important; color: #1b5e20 !important; filter: none !important; } .gh-hero { position: relative ;
aspect-ratio: 16 / 7 ;
height: auto ; overflow: hidden ;
margin: 24px ;
border-radius: 100px 0 100px 0 ;
}
.gh-hero__img-wrap { position: absolute; inset: 0; }
.gh-hero__img {
width: 100%; height: 100%;
object-fit: cover; object-position: center center;
}
.gh-hero__overlay-left {
position: absolute; inset: 0;
backdrop-filter: blur(4px);
-webkit-mask-image: linear-gradient(to right, black 0%, black 40%, transparent 70%);
mask-image: linear-gradient(to right, black 0%, black 40%, transparent 70%);
}
.gh-hero__content {
position: absolute;
bottom: 160px; left: 84px;
max-width: 700px;
z-index: 2;
}
.gh-hero__title {
font-size: 64px; font-weight: 700; color: #fff;
line-height: 1.15; margin: 0 0 22px;
}
.gh-hero__sub {
font-size: 18px; color: #e4e4e4;
line-height: 1.6; margin-bottom: 36px;
padding: 10px 0 !important;
}
.gh-hero__cta { display: flex; gap: 16px; flex-wrap: wrap; } .gh-trust {
padding: 0 80px;
margin-top: -65px;
position: relative;
z-index: 10;
}
.gh-trust__grid {
background: #fff;
border-radius: var(--radius);
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 36px 60px;
}
.gh-trust__item {
display: flex; flex-direction: column;
align-items: center; gap: 5px;
text-align: center; padding: 0 20px;
border-right: 1px solid #eee;
}
.gh-trust__item:last-child { border-right: none; }
.gh-trust__item img { width: 24px; height: 24px; object-fit: contain; margin-bottom: 4px; }
.gh-trust__label { font-size: 12px; color: #4b5b67; font-weight: 400; }
.gh-trust__item strong {
font-size: 20px; color: #0e1e3f; font-weight: 700; line-height: 1.3;
} .gh-about__grid {
display: grid;
grid-template-columns: 45% 50%;
gap: 40px;
align-items: center;
}
.gh-about__left h2 {
font-size: 64px; font-weight: 700; color: #0e1e3f; line-height: 1.3;
}
.gh-about__right p {
font-size: 16px; line-height: 1.8; color: #4b5b67; margin-bottom: 20px;
} .gh-herbs__grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 8px;
justify-items: center;
}
.gh-herb-item {
display: flex; flex-direction: column;
align-items: center; gap: 14px;
font-size: 16px; color: #4b5b67;
text-align: center;
}
.gh-herb-item img { width: 110px; height: 250px; object-fit: contain; } .gh-research__grid {
display: grid;
grid-template-columns: 55% 40%;
gap: 40px;
align-items: center;
}
.gh-research__left h2 {
font-size: 48px; font-weight: 700; color: #0e1e3f;
line-height: 1.3; margin-bottom: 20px;
}
.gh-research__left p {
font-size: 16px; line-height: 1.8; color: #4b5b67; margin-bottom: 16px;
}
.gh-research__left .gh-btn { margin-top: 16px; }
.gh-research__right img {
width: 100%; height: 378px; object-fit: cover; border-radius: var(--radius);
} .gh-value__layout {
display: grid;
grid-template-columns: 60% 25%;
gap: 5%;
justify-content: center;
}
.gh-value__cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.gh-value__info {
display: flex; flex-direction: column;
align-items: flex-end;
text-align: right; gap: 12px;
}
.gh-value__info h2 { font-size: 48px; font-weight: 700; color: #0e1e3f; line-height: 1.2; }
.gh-value__info p  { font-size: 16px; color: #4b5b67; line-height: 1.7; }
.gh-readmore {
display: inline-block;
align-self: flex-end;
font-size: 14px; color: #4b5b67;
text-decoration: none;
border-bottom: 1px solid #4b5b67;
padding-bottom: 2px;
white-space: nowrap;
margin-top: 8px;
width: max-content;
}
.gh-readmore:hover { color: #1b5e20; border-color: #1b5e20; }
.gh-card {
position: relative;
height: 534px;
border-radius: var(--radius);
overflow: hidden;
}
.gh-card__img {
position: absolute; inset: 0;
background-size: cover; background-position: center;
}
.gh-card__body {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 14px 19px;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
backdrop-filter: blur(2px);
border-radius: 0 0 var(--radius) var(--radius);
min-height: 169px;
display: flex; flex-direction: column;
justify-content: flex-end;
gap: 12px;
}
.gh-card__body h3 {
font-size: 22px; font-weight: 700; color: #fff;
margin-bottom: 8px; line-height: 1.3;
}
.gh-card__body p {
font-size: 12px; color: #fff; line-height: 1.6; margin-bottom: 14px;
}
.gh-card__cert {
position: absolute;
top: 14px; right: -8px;
width: 55px; height: 55px;
}
.gh-card__cert img { width: 55px; height: 55px; object-fit: contain; } .gh-journey__grid {
display: grid;
grid-template-columns: 35% 50%;
gap: 15%;
align-items: start;
}
.gh-journey__left {
padding-top: 100px;
position: sticky;
top: 80px;
align-self: start;
}
.gh-journey__left h2 {
font-size: 48px; font-weight: 700; color: #0e1e3f;
line-height: 1.3; margin-bottom: 20px;
}
.gh-journey__left p {
font-size: 14px; color: #4b5b67; line-height: 1.8;
}
.gh-journey__right {
display: flex; flex-direction: column;
position: relative;
padding-left: 32px;
}
.gh-journey__right::before {
content: '';
position: absolute;
left: 0; top: 24px; bottom: 24px;
width: 2px;
background: linear-gradient(to bottom, #1b5e20 0%, #c8e6c9 100%);
}
.gh-journey__step {
position: relative;
padding-bottom: 40px;
}
.gh-journey__step::before {
content: '';
position: absolute;
left: -39px; top: 24px;
width: 14px; height: 14px;
background: #1b5e20;
border-radius: 50%;
border: 3px solid #fff;
box-shadow: 0 0 0 2px #1b5e20;
z-index: 1;
}
.gh-journey__step img {
width: 100%; height: 354px; object-fit: cover;
border-radius: var(--radius); margin-bottom: 16px;
}
.gh-journey__step-text h3 {
font-size: 32px; font-weight: 500; color: #0e1e3f;
margin-bottom: 8px; line-height: 1.3;
}
.gh-journey__step-text p {
font-size: 14px; color: #4b5b67; line-height: 1.7; margin-bottom: 14px;
}
.gh-journey__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.gh-tag {
display: inline-block;
font-size: 14px; font-weight: 700;
padding: 8px 16px !important; border-radius: 50px;
border: 1px solid #1b5e20;
color: #1b5e20; background: #fff;
line-height: 1.3;
}
.gh-tag--active { background: #1b5e20; color: #fff; } @keyframes marquee-left  { 0% { transform: translateX(0); }    100% { transform: translateX(-50%); } }
@keyframes marquee-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
.gh-testimonials__rows {
display: flex;
flex-direction: column;
gap: 16px;
overflow: hidden;
margin: 40px -30px 0;
width: calc(100% + 60px);
}
.gh-testimonials__row { display: block; overflow: hidden; }
.gh-testimonials__track {
display: flex; gap: 16px;
width: max-content;
will-change: transform;
}
.gh-testimonials__track.scroll-left  { animation: marquee-left  28s linear infinite; }
.gh-testimonials__track.scroll-right { animation: marquee-right 28s linear infinite; }
.gh-testimonials__track:hover        { animation-play-state: paused; }
.gh-review {
background: #eaf5ec;
border-radius: var(--radius);
padding: 28px 40px;
width: 520px;
flex-shrink: 0;
}
.gh-review__text {
font-size: 18px; line-height: 1.7; color: #0e1e3f;
margin-bottom: 20px; font-weight: 400;
}
.gh-review__author {
font-size: 14px; color: #4b5b67; text-align: right;
} .gh-cta { padding: 40px 0 80px; }
.gh-cta__card {
position: relative;
border-radius: var(--radius);
overflow: hidden;
min-height: 436px;
background-size: cover; background-position: center;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
display: flex; align-items: center;
}
.gh-cta__content {
position: relative; z-index: 1;
padding: 80px 60px;
max-width: 680px;
}
.gh-cta__content h2 {
font-size: 32px; font-weight: 700; color: #0e1e3f;
margin-bottom: 16px; line-height: 1.3;
}
.gh-cta__content p {
font-size: 16px; color: #0e1e3f; line-height: 1.7; margin-bottom: 28px;
}  @media (max-width: 1200px) {
.gh-container { padding: 0 40px; }
.gh-trust { padding: 0 40px; }
.gh-trust__grid { padding: 28px 40px; }
.gh-herbs__grid { grid-template-columns: repeat(4, 1fr); }
.gh-hero__title { font-size: 52px; }
.gh-hero__content { left: 60px; bottom: 120px; max-width: 600px; }
.gh-about__left h2 { font-size: 48px; }
.gh-research__left h2,
.gh-value__info h2,
.gh-section-header h2 { font-size: 38px; }
.gh-card { height: 480px; }
} @media (max-width: 900px) {
.gh-section { padding: 64px 16px; }
.gh-hero {
aspect-ratio: auto;
height: auto; min-height: 560px;
max-height: none;
border-radius: 60px 0 60px 0;
margin: 16px;
}
.gh-hero__content { left: 40px; bottom: 80px; max-width: 80%; }
.gh-hero__title { font-size: 40px; }
.gh-hero__sub { font-size: 16px; margin-bottom: 24px; }
.gh-trust { padding: 0 24px; margin-top: -40px; }
.gh-trust__grid { grid-template-columns: repeat(2, 1fr); padding: 24px 28px; gap: 24px 0; }
.gh-trust__item { padding: 0 12px; border-right: none; }
.gh-trust__item:nth-child(odd) { border-right: 1px solid #eee; }
.gh-trust__item strong { font-size: 16px; }
.gh-about__grid,
.gh-research__grid,
.gh-journey__grid { grid-template-columns: 1fr; gap: 40px; } .gh-value__layout { grid-template-columns: 1fr; gap: 36px; }
.gh-value__info {
align-items: flex-start;
text-align: left;
max-width: 720px;
}
.gh-value__info h2 { font-size: 32px; }
.gh-value__info p { font-size: 15px; }
.gh-readmore { align-self: flex-start; }
.gh-value__cards { gap: 16px; }
.gh-card { height: 420px; }
.gh-card__body { padding: 16px 18px; min-height: 150px; gap: 8px; }
.gh-card__body h3 { font-size: 17px; margin-bottom: 0; }
.gh-card__body p { font-size: 12px; line-height: 1.55; margin-bottom: 0; }
.gh-card__cert { width: 48px; height: 48px; top: 12px; right: -6px; }
.gh-card__cert img { width: 48px; height: 48px; }
.gh-herbs__grid { grid-template-columns: repeat(3, 1fr); }
.gh-herb-item img { width: 90px; height: 200px; }
.gh-card { height: 440px; }
.gh-review { width: 360px; padding: 24px 28px; }
.gh-review__text { font-size: 16px; }
.gh-section-header h2,
.gh-about__left h2,
.gh-research__left h2,
.gh-journey__left h2,
.gh-value__info h2 { font-size: 32px; }
.gh-section-header { margin-bottom: 40px; }
.gh-journey__left { padding-top: 0; position: static; }
.gh-journey__step img { height: 280px; }
.gh-journey__step-text h3 { font-size: 24px; }
.gh-cta__content { padding: 60px 40px; }
.gh-cta__content h2 { font-size: 26px; }
} @media (max-width: 768px) {
.gh-container { padding: 0 20px; }
.gh-section { padding: 56px 0; } .gh-hero {
aspect-ratio: auto;
height: 480px;
min-height: 0;
max-height: none;
border-radius: 32px;
margin: 12px;
}
.gh-hero__overlay-left {
backdrop-filter: none;
-webkit-mask-image: none;
mask-image: none;
background: linear-gradient(
to top,
rgba(8, 26, 12, .75) 0%,
rgba(8, 26, 12, .35) 50%,
transparent 85%
);
}
.gh-hero__content {
left: 24px; right: 24px; bottom: 36px;
max-width: none;
}
.gh-hero__content .gh-badge-pill { font-size: 12px; padding: 6px 14px; margin-bottom: 12px; }
.gh-hero__title { font-size: 26px; line-height: 1.3; margin: 0 0 12px; text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.gh-hero__sub { font-size: 14px; line-height: 1.65; margin-bottom: 22px; }
.gh-hero__cta { gap: 10px; flex-direction: column; align-items: stretch; }
.gh-hero__cta .gh-btn {
width: 100%;
text-align: center;
justify-content: center;
font-size: 13px !important;
padding: 12px 20px !important;
} .gh-trust { padding: 0 16px; margin-top: -36px; }
.gh-trust__grid {
grid-template-columns: 1fr 1fr;
padding: 24px 20px;
gap: 20px 12px;
border-radius: 20px;
}
.gh-trust__item { padding: 0 6px; border-right: none; gap: 4px; }
.gh-trust__item:nth-child(odd) { border-right: 1px solid #eee; }
.gh-trust__item img { width: 22px; height: 22px; }
.gh-trust__label { font-size: 11px; line-height: 1.4; }
.gh-trust__item strong { font-size: 13px; line-height: 1.35; } .gh-about__left h2 { font-size: 28px; line-height: 1.3; }
.gh-about__right p { font-size: 14px; line-height: 1.75; } .gh-section-header { margin-bottom: 32px; gap: 6px; }
.gh-section-header h2,
.gh-research__left h2,
.gh-journey__left h2,
.gh-value__info h2 { font-size: 26px; line-height: 1.3; }
.gh-section-sub { font-size: 14px; } .gh-herbs__grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gh-herb-item { gap: 8px; font-size: 13px; }
.gh-herb-item img { width: 80px; height: 160px; } .gh-research__grid { gap: 28px; }
.gh-research__left h2 { margin-bottom: 12px; }
.gh-research__left p { font-size: 14px; line-height: 1.75; }
.gh-research__right img { height: 240px; border-radius: 20px; } .gh-value__layout { grid-template-columns: 1fr; gap: 28px; }
.gh-value__info { align-items: flex-start; text-align: left; }
.gh-value__info h2 { font-size: 26px; line-height: 1.3; }
.gh-value__info p { font-size: 14px; line-height: 1.7; }
.gh-value__cards { grid-template-columns: 1fr; gap: 16px; }
.gh-card {
height: auto;
aspect-ratio: 16/10;
min-height: 320px;
}
.gh-card__body {
padding: 18px 20px;
min-height: auto;
gap: 10px;
border-radius: 0 0 var(--radius) var(--radius);
}
.gh-card__body h3 { font-size: 18px; margin-bottom: 0; }
.gh-card__body p { font-size: 13px; line-height: 1.6; margin-bottom: 0; }
.gh-card__body .gh-btn { font-size: 12px !important; padding: 6px 18px !important; }
.gh-card__cert { width: 44px; height: 44px; top: 12px; right: -6px; }
.gh-card__cert img { width: 44px; height: 44px; } .gh-journey__grid { gap: 28px; }
.gh-journey__left { padding-top: 0; position: static; }
.gh-journey__left h2 { margin-bottom: 12px; }
.gh-journey__left p { font-size: 13px; }
.gh-journey__right { padding-left: 22px; gap: 0; }
.gh-journey__right::before { left: 0; top: 16px; bottom: 16px; }
.gh-journey__step { padding-bottom: 28px; }
.gh-journey__step::before { left: -29px; top: 16px; width: 12px; height: 12px; }
.gh-journey__step img {
height: 200px;
border-radius: 18px;
margin-bottom: 12px;
}
.gh-journey__step-text h3 { font-size: 20px; margin-bottom: 6px; }
.gh-journey__step-text p { font-size: 13px; margin-bottom: 12px; }
.gh-journey__tags { gap: 6px; }
.gh-tag { font-size: 12px; padding: 6px 12px; } .gh-testimonials__rows { margin: 28px -20px 0; width: calc(100% + 40px); gap: 12px; }
.gh-testimonials__track { gap: 12px; }
.gh-review {
width: 280px;
padding: 22px 24px;
border-radius: 22px;
}
.gh-review__text { font-size: 14px; line-height: 1.7; margin-bottom: 14px; }
.gh-review__author { font-size: 12px; } .gh-cta { padding: 24px 16px 56px; }
.gh-cta__card {
min-height: 380px;
border-radius: 24px;
background-position: center center;
position: relative;
align-items: stretch;
overflow: hidden;
}
.gh-cta__card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(8, 26, 12, .85) 0%,
rgba(8, 26, 12, .55) 55%,
rgba(8, 26, 12, .25) 100%
);
z-index: 0;
}
.gh-cta__content {
position: relative;
z-index: 1;
padding: 40px 24px;
max-width: none;
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
text-align: center;
color: #fff;
}
.gh-cta__content h2 {
font-size: 24px;
line-height: 1.35;
color: #fff;
margin-bottom: 12px;
text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.gh-cta__content p {
font-size: 13px;
color: rgba(255,255,255,.92);
line-height: 1.7;
margin-bottom: 24px;
max-width: 320px;
}
.gh-cta .gh-btn {
font-size: 14px !important;
padding: 5px 28px !important;
width: 100%;
max-width: 320px;
justify-content: center;
text-align: center;
background: #1b5e20 !important;
color: #fff !important;
font-weight: 700;
}
} @media (max-width: 480px) {
.gh-container { padding: 0 16px; }
.gh-section { padding: 44px 0; } .gh-hero { aspect-ratio: auto; height: 440px; min-height: 0; max-height: none; margin: 8px; border-radius: 24px; }
.gh-hero__content { left: 20px; right: 20px; bottom: 28px; }
.gh-hero__title { font-size: 24px; line-height: 1.3; }
.gh-hero__sub { font-size: 13px; margin-bottom: 18px; } .gh-trust { padding: 0 12px; margin-top: -28px; }
.gh-trust__grid { padding: 18px 14px; gap: 16px 10px; }
.gh-trust__item strong { font-size: 12px; } .gh-about__left h2,
.gh-section-header h2,
.gh-research__left h2,
.gh-journey__left h2,
.gh-value__info h2 { font-size: 22px; } .gh-herbs__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.gh-herb-item img { width: 90px; height: 180px; } .gh-research__right img { height: 200px; } .gh-value__layout { grid-template-columns: 1fr; gap: 24px; }
.gh-value__info h2 { font-size: 22px; }
.gh-value__info p { font-size: 13px; }
.gh-value__cards { gap: 14px; }
.gh-card { aspect-ratio: 4/3; min-height: 280px; }
.gh-card__body { padding: 14px 16px; gap: 8px; }
.gh-card__body h3 { font-size: 16px; }
.gh-card__body p { font-size: 12px; }
.gh-card__body .gh-btn { font-size: 11px !important; padding: 5px 14px !important; }
.gh-card__cert { width: 38px; height: 38px; }
.gh-card__cert img { width: 38px; height: 38px; } .gh-journey__step img { height: 180px; }
.gh-journey__step-text h3 { font-size: 18px; } .gh-review { width: 260px; padding: 20px; } .gh-cta { padding: 16px 12px 48px; }
.gh-cta__card { min-height: 340px; border-radius: 20px; }
.gh-cta__content { padding: 32px 20px; }
.gh-cta__content h2 { font-size: 20px; }
.gh-cta__content p { font-size: 12px; margin-bottom: 20px; }
.gh-cta .gh-btn { font-size: 13px !important; }
}