*{box-sizing:border-box;margin:0;padding:0}
:root{
  --yellow:#FFB901;
  --yellow2:#FCBE11;
  --yellow3:#FCD602;
  --green:#1B381A;
  --green2:#28582e;
  --white:#fff;
  --max:1200px;
}
html{scroll-behavior:smooth}
body{font-family: 'Poppins', sans-serif;color:var(--green);background:#fff;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font:inherit;border:0;cursor:pointer}

.header{height:66px;background:var(--yellow);position:sticky;top:0;z-index:1000;box-shadow:0 2px 7px rgba(0,0,0,.15)}
.nav-wrap{height:100%;max-width:1200px;margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:center;position:relative}
.logo{position:absolute;left:28px;top:7px;width:55px;height:52px;z-index:2}
.logo img{width:100%;height:100%;object-fit:contain}
.nav{display:flex;align-items:center;gap:48px;transform: translateX(50px)}
.nav a{color:#fff;font-size:13px;font-weight:500;transition:.25s}
.nav a:hover{transform:translateY(-1px);opacity:.8}
.lang-switch{display:flex;gap:8px;align-items:center;transform:translateX(330px)}
.lang-switch button{padding:2px 14px;border:1px solid #fff;background:var(--yellow);color:#fff;border-radius:20px;cursor:pointer;transition:.3s;font-weight:600}
.lang-switch button.active{background:#fff;color:var(--yellow)}
.lang-switch button:hover{background:#fff;color:var(--yellow)}
.menu-toggle{display:none;background:transparent;width:35px}
.menu-toggle span{display:block;height:2px;background:#fff;margin:6px 0;border-radius:3px}

/* HERO */
.hero {height: min(620px, calc(100vh - 66px));min-height: 630px;position: relative;overflow: hidden;width: 100%;}
.hero-slider {position: absolute;inset: 0;width: 100%;height: 100%;display: flex;}
.hero-slide {position: absolute;inset: 0;width: 100%;height: 100%;transform: translateX(100%);transition: transform 0.8s ease-in-out;}
.hero-slide.active {transform: translateX(0);}
.hero-slide.prev {transform: translateX(-100%);}
.hero-slide img {width: 100%;height: 100%;display: block;object-fit: cover;object-position: center;}
.hero-slide::after {content: "";position: absolute;inset: 0;background: linear-gradient(90deg,rgba(255, 182, 0, .08),rgba(255, 184, 0, 0));pointer-events: none;}
.hero-content {height: 100%;position: relative;max-width: 1200px;margin: auto;display: flex;align-items: center;justify-content: center;z-index: 5;}
.brush{width:150px;height:7px;background:#fff;border-radius:50%;transform:rotate(-4deg);margin:8px auto 0}
.slider-dots{position:absolute;bottom:15px;display:flex;gap:9px;z-index:5}
.dot{width:9px;height:9px;border-radius:50%;background:#ddd;transform: translateY(14px)}
.dot.active{background:#e33}

/* ABOUT */
.about{font-family: 'Montserrat', sans-serif;position: relative;width: 100%;min-height: 600px;background: url('../images/image3.svg') center center / 100% auto no-repeat}
.about-top{min-height:250px;max-width:1100px;margin:auto;padding:45px 60px 20px;display:grid;grid-template-columns:1.15fr 1fr;gap:55px;position:relative;z-index:2}
.about-title h2{font-size:17px;line-height:1.35;font-weight:800;width: 620px;}
.about-text{padding-top:67px;margin-left: -30rem;margin-top: 30px}
.about-text p{font-size:13px;line-height:1.5;margin-bottom:18px;font-weight:500}

/* WINNING */
.winning{background:var(--yellow2);padding:35px 20px 45px}
.section-heading{text-align:center;color:#fff;margin-bottom:22px}
.section-heading h2{font-style:italic;font-size:40px;line-height:1;font-weight:800}
.section-heading span{display:block;width:275px;height:2px;background:#fff;margin:7px auto 0}
.product-type{width:max-content;margin:0 auto 18px;background:#eee;border-radius:25px;display:flex;padding:2px}
.type-btn{font-family: 'Montserrat', sans-serif;background:transparent;border-radius:22px;padding:8px 17px;font-size:11px;font-weight:800;color:#777}
.type-btn.active{background:#F18E02;color:#fff}
.product-type .type-btn img {width: 18px !important;height: 18px !important;max-width: 18px !important;max-height: 18px !important;object-fit: contain !important;display: inline-block !important;vertical-align: middle;margin-left: 3px;filter: brightness(0) saturate(100%) invert(46%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%);transition: filter 0.3s ease;}
.product-type .type-btn.active img {filter: brightness(0) invert(1);}
.points-grid {max-width: 900px;margin: auto;display: grid;grid-template-columns: repeat(4, 1fr);gap: 30px;align-items: stretch;}
.point-card {display: flex;flex-direction: column;height: 100%;}
.point-card h3 {text-align: center;color: #fff;font-size: 15px;line-height: 1.1;height: 40px;font-weight: 800;text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.25)}
.point-img {height: 230px;overflow: hidden;border-radius: 18px 18px 0 0;background: #ddd;flex-shrink: 0;}
.point-img img {width: 100%;height: 100%;object-fit: cover;transition: transform .5s;}
.point-card:hover .point-img img {transform: scale(1.05);}
.point-caption,
.point-caption1 {height: 90px;flex: 1;box-sizing: border-box;background: #fff;border-radius: 0 0 18px 18px;text-align: center;padding: 7px 6px;font-family: 'Montserrat', sans-serif;font-size: 12px;line-height: 1.15;color: #1B381A;box-shadow: 0 4px 5px rgba(0,0,0,.12);display: flex;flex-direction: column;justify-content: center;align-items: center;}
.point-caption strong{display:block;font-size:14px;color:var(--green);margin-top:3px}
.product-content {display: none;}
.product-content.active {display: grid;}
.point-caption strong small {display: block;font-size: 16px;font-weight: 500;margin-top: 3px;}


/* PRODUCTS */
.product-slider {width: 100%;max-width: 850px;margin: 0 auto;position: relative;overflow: hidden;padding: 25px 50px 45px;box-sizing: border-box;background: #fff}
.product-slide {display: none;width: 100%}
.product-slide.active {display: block;animation: slideFade .5s ease}
@keyframes slideFade {from {opacity: 0;transform: translateX(30px);}to {opacity: 1;transform: translateX(0);}}
.pill-title{width:max-content;margin:0 auto 28px;background:#FCBE11;border-radius:30px;padding:7px 35px;box-shadow:0 2px 5px rgba(0,0,0,.15)}
.pill-title h2{color:#fff;font-size:27px;line-height:1;font-weight:800}
.product-grid-4 {width: 100%;display: grid;grid-template-columns: repeat(2, 1fr);gap: 14px}
.product-card-horizontal {width: 100%;background: #fff;overflow: hidden}
.product-card-horizontal img {width: 100%;height: 145px;display: block;object-fit: cover}
.product-info {height: 30px;display: flex;align-items: center;background: #fff;position: relative}
.product-info span {height: 30px;min-width: 70px;padding: 0 14px 0 7px;display: flex;align-items: center;justify-content: flex-start;background: var(--yellow3);color: #15341B;font-size: 11px;font-weight: 700;font-style: italic;
 clip-path: polygon(0 0,100% 0,82% 100%,0 100%);
 box-sizing: border-box}
.product-info h3 {margin: 0;padding-left: 15px;color: #15341B;font-family: 'Montserrat', sans-serif;font-size: 15px;font-weight: 700;white-space: nowrap}
.product-info strong {margin-left: auto;padding-right: 8px;color: #17381f;font-size: 28px;line-height: 1}
.product-info .kantong {writing-mode: vertical-rl;transform: rotate(360deg);font-size: 6px;font-weight: 700;letter-spacing: -0.5px;line-height: 1;color: #15341B;height: 38px;display: flex;align-items: center;justify-content: center}
.product-grid-3 {width: 100%;display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px}
.product-card-vertical {background: #fff;text-align: center;overflow: hidden}
.product-card-vertical img {width: 100%;height: 290px;display: block;object-fit: cover}
.vertical-label {height: 27px;display: flex;align-items: center;justify-content: center;background: var(--yellow3)}
.vertical-label small {color: #15341B;font-size: 10px;font-weight: 700;letter-spacing: .5px}
.product-card-vertical h3 {margin: 0;height: 49px;display: flex;align-items: center;justify-content: center;color: #15341B;font-family: 'Montserrat', sans-serif;font-size: 17px;font-weight: 700;background: #fff}
.gram {font-family: 'Montserrat', sans-serif;height: 25px;display: flex;align-items: center;justify-content: center;background: #15341B;color: #fff;font-size: 11px;font-weight: 700}
.slider-arrow {position: absolute;top: 50%;width: 40px;height: 50px;transform: translateY(-50%);border: none;background: transparent;color: #173d20;cursor: pointer;z-index: 10}
.slider-arrow span {font-size: 60px;line-height: 40px;font-family: 'Montserrat', sans-serif;font-weight: 300}
.slider-arrow.prev {left: 5px}
.slider-arrow.next {right: -10px}
.slider-arrow:hover {transform: translateY(-50%) scale(1.15)}
.product-slider-dots {position: absolute;bottom: 12px;left: 50%;transform: translateX(-50%);display: flex;gap: 10px}
.product-dots {width: 11px;height: 11px;padding: 0;border: none;border-radius: 50%;background: #d7d7d7;cursor: pointer}
.product-dots.active {background: #FFB901}
.product-image {position: relative;width: 100%;height: 145px;overflow: hidden;cursor: pointer}
.product-image img {width: 100%;height: 145px;display: block;object-fit: cover;transition: transform .35s ease}
.product-image:hover img {transform: scale(1.02)}
.shop-now {position: absolute;left: 0;bottom: 0;width: 100%;height: 40px;display: flex;align-items: center;justify-content: center;gap: 8px;border: none;border-radius: 0;background: rgba(20, 20, 20, .75);color: #fff;
 font-family: 'Poppins', sans-serif;font-size: 13px;font-weight: 500;cursor: pointer;z-index: 5;opacity: 0;visibility: hidden;transform: translateY(100%);transition:opacity .25s ease,visibility .25s ease,transform .25s ease,background .25s ease}
.product-image:hover .shop-now {opacity: 1;visibility: visible;transform: translateY(0)}
.shop-now:hover {background: rgba(20, 20, 20, .92)}
.product-image-vertical {position: relative;width: 100%;height: 300px;overflow: hidden;cursor: pointer}
.product-image-vertical img {width: 100%;height: 300px;display: block;object-fit: cover;transition: transform .35s ease}
.product-image-vertical:hover img {transform: scale(1.02)}
.shop-now-vertical {position: absolute;left: 0;bottom: 0;width: 100%;height: 40px;display: flex;align-items: center;justify-content: center;gap: 8px;
 border: none;border-radius: 0;background: rgba(20, 20, 20, .75);color: #fff;font-family: 'Poppins', sans-serif;font-size: 13px;font-weight: 500;cursor: pointer;
 z-index: 5;opacity: 0;visibility: hidden;transform: translateY(100%);transition:opacity .25s ease,visibility .25s ease,transform .25s ease,background .25s ease}
.product-image-vertical:hover .shop-now-vertical {opacity: 1;visibility: visible;transform: translateY(0)}
.shop-now-vertical:hover {background: rgba(20, 20, 20, .92)}

@media (max-width: 1024px) {
    .nav{display:flex;align-items:center;gap:48px;transform: translateX(50px)}
    .hero{height: 500px;min-height: 500px}
    .dot{width:10px;height:10px;transform: translateY(5px)}
    .about{font-family: 'Montserrat', sans-serif;position: relative;width: 100%;min-height: 600px;background-position: center;background-repeat: no-repeat;background-size: cover}
    .lang-switch{display:flex;gap:8px;align-items:center;transform:translateX(250px)}
    .footer-logo img{width:105px;transform: translate(80px, 13px)}
    .product-image {height: 135px}
    .product-image img {height: 135px}
    .shop-now {height: 38px;font-size: 12px;gap: 6px}
    .product-image:hover img {transform: scale(1.02)}
}

@media (max-width: 768px) {
    .nav{display:flex;align-items:center;gap:48px;transform: translateX(50px)}
    .product-slider {max-width: 100%;padding: 20px 40px 42px}
    .product-card-horizontal img {height: 120px}
    .product-info h3 {font-size: 12px;padding-left: 8px}
    .product-info span {font-size: 9px;min-width: 55px}
    .product-info strong {font-size: 22px}
    .product-card-vertical img {height: 240px}
    .product-card-vertical h3 {font-size: 14px}
    .lang-switch{display:flex;gap:8px;align-items:center; position: relative;left:-25px}
    .product-image {height: 135px}
    .product-image img {height: 135px}
    .shop-now {height: 38px;font-size: 12px;gap: 6px}
    .product-image:hover img {transform: scale(1.02)}
    .product-image-vertical {height: 290px}
    .product-image-vertical img {height: 290px}
    .shop-now-vertical {height: 38px;font-size: 12px;gap: 6px}
    .product-image-vertical:hover img {transform: scale(1.02)}
}

/* FOOTER */
.footer{background:var(--yellow);color:#fff;padding:40px 30px 14px}
.footer-inner{max-width:1000px;margin:auto;display:grid;grid-template-columns:1fr 1fr 1fr;min-height:180px;gap:40px}
.footer-logo img{width:105px;transform: translate(40px, 15px)}
.footer-links{font-family: 'Montserrat', sans-serif;display:flex;flex-direction:column;gap:22px;padding-top:15px}
.footer-links a{font-size:16px}
.footer-social{justify-self:end;font-size:11px}
.social-icons{display:flex;gap:18px;font-size:24px;margin-bottom:35px}
.social-icons a{font-weight:800}
.footer-social h4{margin-bottom:18px;font-size:14px}
.footer-social p{margin:12px 0;font-size:12px}
.footer-social .iconify{font-size:18px;color:var(--white);flex-shrink:0;transform: translateY(5px);}
.copyright{max-width:1000px;margin:15px auto 0;border-top:1px solid rgba(255,255,255,.9);padding-top:10px;font-size:12px}

/* TABLET */
@media (max-width:900px){
  .nav{gap:28px}
  .hero {height: 400px;min-height: 400px}
  .hero-product{width:45%;top:33%}
  .hero-copy{top:70%}
  .hero-copy p{font-size:22px}
  .hero-copy h1{font-size:40px}
  .about{font-family: 'Montserrat', sans-serif;position: relative;width: 100%;min-height: 600px;background-position: center;background-repeat: no-repeat;background-size: cover}
  .about-top{padding:35px 35px 15px;gap:35px}
  .points-grid{gap:18px}
  .point-img{height:210px}
  .product-slider{max-width:760px}
  .dot{width:8px;height:8px;transform: translateY(8px)}
  .lang-switch{display:flex;gap:8px;align-items:center;transform:translateX(180px)}
}

/* MOBILE */
@media (max-width:700px){
  .header{height:58px}
  .nav-wrap{padding:0 18px;justify-content:flex-end}
  .logo{left:18px;top:5px;width:48px;height:47px}
  .menu-toggle{display:block;margin-right:58px}
  .nav{display:none;position:absolute;top:58px;left:0;right:0;background:var(--yellow);padding:18px 22px 22px;flex-direction:column;align-items:flex-start;gap:17px;box-shadow:0 5px 12px rgba(0,0,0,.15)}
  .nav.open{display:flex}
  .nav a{font-size:12px}
  .language{right:18px;top:14px}
  .lang-btn{padding:6px 9px;font-size:10px}

  .hero{height:420px;min-height:0}
  .hero-product{width:56%;top:37%}
  .hero-copy{top:69%;width:100%;padding:0 10px}
  .hero-copy p{font-size:19px}
  .hero-copy h1{font-size:32px}
  .brush{width:105px;height:5px}
  .slider-dots{bottom:12px}
  .dot{width:9px;height:9px}

  .about-top{display:block;padding:28px 22px 20px;min-height:auto}
  .about-title h2{font-size:12px}
  .about-text{padding-top:18px}
  .about-text p{font-size:10px;margin-bottom:12px}
  .tea-garden{height:190px;background-position:center}

  .winning{padding:28px 15px 32px}
  .section-heading{margin-bottom:18px}
  .section-heading h2{font-size:28px}
  .section-heading span{width:185px}
  .product-type{margin-bottom:18px}
  .type-btn{font-size:9px;padding:7px 13px}
  .points-grid{grid-template-columns:repeat(2,1fr);gap:18px 12px;max-width:430px}
  .point-card h3{font-size:10px;height:27px}
  .point-img{height:180px;border-radius:13px 13px 0 0}
  .point-caption{min-height:54px;border-radius:0 0 13px 13px;font-size:7px}
  .point-caption strong{font-size:10px}

  .products{padding:28px 12px 32px}
  .pill-title{padding:7px 24px;margin-bottom:22px}
  .pill-title h2{font-size:21px}
  .product-slider{gap:3px}
  .product-track{grid-template-columns:1fr;gap:12px}
  .product-card{display:none}
  .product-card:nth-child(1),.product-card:nth-child(2){display:block}
  .product-card>div{height:32px;grid-template-columns:54px 1fr 28px}
  .product-card span{font-size:7px}
  .product-card strong{font-size:9px}
  .product-card b{font-size:20px}
  .slider-arrow{font-size:44px;width:28px}

  .footer{padding:30px 22px 12px}
  .footer-inner{grid-template-columns:1fr 1fr;gap:25px;min-height:0}
  .footer-logo img{width:80px}
  .footer-links{gap:15px;padding-top:3px}
  .footer-links a,.footer-social p,.footer-social h4{font-size:9px}
  .footer-social{grid-column:1/-1;justify-self:start}
  .social-icons{font-size:20px;margin-bottom:18px;gap:15px}
  .copyright{font-size:7px;margin-top:20px}
}

@media (max-width:720px){
  .lang-switch{display:flex;gap:8px;align-items:center;transform:translateX(150px)}
  .product-card-vertical h3 {height: 42px;font-size: 7px;padding: 0 3px}
  .hero{height: 300px;min-height: 350px}
  .footer-inner {max-width: 1000px;margin: auto;display: flex;flex-direction: column;align-items: flex-start;gap: 25px;transform: translateX(230px)}
  .footer-links {font-family: 'Montserrat', sans-serif;display: flex;flex-direction: row;align-items: center;gap: 25px;padding-top: 15px;margin-left: -15px}
  .footer-links a {font-size: 12px;white-space: nowrap}
  .footer-social{margin-bottom:18px;font-size:14px;transform: translateX(25px)}
  .shop-now {height: 30px;font-size: 10px;gap: 6px}
  .shop-now-vertical {height: 30px;font-size: 10px;gap: 6px}
}

@media (max-width:480px){
  .menu-toggle{width:35px;transform: translateX(150px)}
  .hero{height: 200px;min-height: 200px}
  .hero-product{width:60%;top:36%}
  .hero-copy{top:68%}
  .hero-copy p{font-size:16px}
  .hero-copy h1{font-size:27px}
  .dot{width:3px;height:3px;transform: translateY(5px)}
  .about{font-family: 'Montserrat', sans-serif;position: relative;width: 100%;min-height: 200px;background-position: center;background-repeat: no-repeat;background-size: cover}
  .about-title h2{font-size:7px;line-height:1.35;font-weight:800;width: 250px;margin-top: -12px}
  .about-text{padding-top:67px;margin-left: 5rem;margin-top: -60px}
  .about-text p{font-size:4px;line-height:1.5;margin-bottom:6px;font-weight:500}
  .product-grid-4 {width: 100%;grid-template-columns: repeat(2, 1fr);gap: 8px}
  .product-card-horizontal {width: 100%}
  .product-card-horizontal img {width: 100%;height: 115px;object-fit: cover}
  .product-info {min-height: 17px;height: auto;display: flex;align-items: center}
  .product-info span {height: 20px;min-width: 50px;padding: 0 14px 0 7px;display: flex;align-items: center;justify-content: flex-start;background: var(--yellow3);color: #15341B;font-size: 5px;font-weight: 700;font-style: italic;clip-path: polygon(0 0,100% 0,82% 100%,0 100%);box-sizing: border-box}
  .product-info h3 {margin: 0;padding-left: 4px;padding-right: 2px;font-size: 6px;line-height: 1.1;white-space: normal;overflow: visible;text-overflow: unset;word-break: normal;overflow-wrap: break-word;flex: 1;min-width: 0}
  .product-info strong {margin-left: auto;padding-right: 3px;font-size: 17px;line-height: 1;flex-shrink: 0}
  .product-info .kantong {height: 18px;font-size: 4px;letter-spacing: -0.3px;flex-shrink: 0}
  .product-grid-3 {grid-template-columns: repeat(3, 1fr);gap: 6px}
  .product-card-vertical img {height: 140px}
  .vertical-label {height: 22px}
  .vertical-label small {font-size: 7px;letter-spacing: .2px}
  .product-card-vertical h3 {height: 42px;font-size: 8px;padding: 0 3px}
  .gram {font-family: 'Montserrat', sans-serif;height: 25px;display: flex;align-items: center;justify-content: center;background: #15341B;color: #fff;font-size: 8px;font-weight: 700}
  .footer-inner {max-width: 1000px;margin: auto;display: flex;flex-direction: column;align-items: flex-start;gap: 25px;transform: translateX(92px)}
  .footer-links {font-family: 'Montserrat', sans-serif;display: flex;flex-direction: row;align-items: center;gap: 25px;padding-top: 15px;margin-left: -15px}
  .footer-links a {font-size: 12px;white-space: nowrap}
  .footer-social{margin-bottom:18px;font-size:14px;transform: translateX(25px)}
  .lang-switch{display:flex;gap:8px;align-items:center;transform:translateX(-120px)}
  .lang-switch button{padding:1px 10px;border:1px solid #fff;background:var(--yellow);color:#fff;border-radius:20px;cursor:pointer;transition:.3s;font-weight:600}
  .product-dots {width: 8px;height: 8px;padding: 0;border: none;border-radius: 50%;background: #d7d7d7;cursor: pointer}
  .product-dots.active {background: #FFB901}
  .product-image {height: 110px}
  .product-image img {height: 110px}
  .shop-now {height: 20px;font-size: 8px;gap: 6px}
  .product-image:hover img {transform: scale(1.02)}
  .product-image-vertical {height: 140px}
  .product-image-vertical img {height: 140px}
  .shop-now-vertical {height: 20px;font-size: 8px;gap: 6px}
  .product-image-vertical:hover img {transform: scale(1.02)}
}

@media (max-width:360px){
  .lang-switch{display:flex;gap:8px;align-items:center;transform:translateX(-90px)}
  .product-card-vertical h3 {height: 42px;font-size: 7px;padding: 0 3px}
  .hero{height: 150px;min-height: 180px}
  .footer-inner {max-width: 1000px;margin: auto;display: flex;flex-direction: column;align-items: flex-start;gap: 25px;transform: translateX(75px)}
  .product-image {height: 100px}
  .product-image img {height: 100px}
  .shop-now {height: 20px;font-size: 8px;gap: 6px}
  .product-image:hover img {transform: scale(1.02)}
  .product-image-vertical {height: 120px}
  .product-image-vertical img {height: 120px}
  .shop-now-vertical {height: 20px;font-size: 8px;gap: 6px}
  .product-image-vertical:hover img {transform: scale(1.02)}
}

@media (max-width:320px){
  .lang-switch{display:flex;gap:8px;align-items:center;transform:translateX(-90px)}
  .product-card-vertical h3 {height: 42px;font-size: 7px;padding: 0 3px}
  .hero{height: 150px;min-height: 180px}
  .footer-inner {max-width: 1000px;margin: auto;display: flex;flex-direction: column;align-items: flex-start;gap: 25px;transform: translateX(50px)}
  .footer-logo img{width:100px;transform: translate(40px, 13px)}
}