/* =========================
   GLOBAL RESET
========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background: #ffffff;
  color: #222;
}

img {
  max-width: 100%;
  display: block;
}

/* =========================
   HEADER
========================= */
/* =========================
   SWEETME HEADER (WHITE)
========================= */

.main-header {
  background: #ffffff;
  padding: 15px 0;
  border-bottom: 1px solid #e5e7eb;
}

.main-header .row {
  display: flex;
  align-items: center;
}

/* ===== LOGO ===== */
.logo {
  font-size: 26px;
  font-weight: 800;
  color: #1b7f3a; /* Sweet green */
  text-decoration: none;
}

.logo:hover {
  color: #166534;
}

.tagline {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  letter-spacing: 1px;
  margin-top: -3px;
}

/* ===== MENU ===== */
.nav-menu {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin: 0;
  padding: 0;
}

.nav-menu li a {
  text-decoration: none;
  color: #1f2937;
  font-size: 15px;
  font-weight: 600;
  position: relative;
  transition: 0.3s;
}

/* underline hover effect */
.nav-menu li a::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 2px;
  background: #facc15; /* yellow accent */
  left: 0;
  bottom: -6px;
  transition: 0.3s;
}

.nav-menu li a:hover {
  color: #1b7f3a;
}

.nav-menu li a:hover::after {
  width: 100%;
}

/* ===== ICONS ===== */
.header-icons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 22px;
}

.header-icons i {
  font-size: 18px;
  color: #1f2937;
  cursor: pointer;
  transition: 0.3s;
}

.header-icons i:hover {
  color: #1b7f3a;
}

/* ===== CART BADGE (OPTIONAL) ===== */
.header-icons .fa-shopping-cart {
  position: relative;
}

.header-icons .fa-shopping-cart::after {
  content: "2";
  position: absolute;
  top: -8px;
  right: -10px;
  background: #facc15;
  color: #000;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 50%;
}

/* =========================
   MOBILE RESPONSIVE
========================= */
@media (max-width: 767px) {
  .logo {
    font-size: 22px;
  }

  .tagline {
    font-size: 10px;
  }

  .header-icons {
    gap: 16px;
  }
}





/* SECTION */

.sweetme-hero{
padding:120px 0;
background:linear-gradient(135deg,#eef2f7,#f6efe7);
position:relative;
overflow:hidden;
font-family: 'Poppins', sans-serif;
}

/* FLOATING SHAPES */

.sweetme-bg-shape{
position:absolute;
border-radius:50%;
filter:blur(60px);
opacity:.5;
}

.shape1{
width:300px;
height:300px;
background:#ffb38a;
top:-80px;
left:-80px;
}

.shape2{
width:400px;
height:400px;
background:#9dc7ff;
bottom:-120px;
right:-120px;
}

/* CONTAINER */

.sweetme-container{
width:1200px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
position:relative;
z-index:2;
}

/* LEFT */

.sweetme-left{
width:50%;
animation:fadeLeft 1s ease;
}

.sweetme-date{
font-size:14px;
color:#7a8793;
}

.sweetme-title{
font-size:72px;
font-weight:700;
color:#2d3c4c;
margin:10px 0;
}

.sweetme-title span{
color:#c96c3c;
}

.sweetme-subtitle{
font-size:20px;
color:#7b6a5e;
line-height:1.7;
}

.sweetme-line{
width:80px;
height:4px;
background:linear-gradient(90deg,#ff7b54,#ffb26b);
margin:30px 0;
border-radius:5px;
}

/* GLASS CARD */

.sweetme-card{
background:rgba(255,255,255,0.6);
backdrop-filter:blur(10px);
padding:30px;
border-radius:16px;
width:340px;
box-shadow:0 20px 40px rgba(0,0,0,0.08);
transition:.4s;
}

.sweetme-card:hover{
transform:translateY(-8px) scale(1.02);
}

.sweetme-small{
font-size:12px;
letter-spacing:2px;
color:#8f9aa5;
}

.sweetme-card h4{
font-size:22px;
margin:12px 0;
color:#2e3a46;
}

.sweetme-company{
font-size:14px;
color:#6b7480;
}

/* RIGHT IMAGE */

.sweetme-right{
width:45%;
display:flex;
justify-content:center;
animation:fadeRight 1s ease;
}

.sweetme-product-box{
background:white;
padding:40px;
border-radius:20px;
box-shadow:0 25px 60px rgba(0,0,0,0.12);
transition:.5s;
}

.sweetme-product-box:hover{
transform:rotate(-3deg) scale(1.05);
}

.sweetme-product-box img{
width:360px;
}

/* ANIMATION */

@keyframes fadeLeft{

from{
opacity:0;
transform:translateX(-60px);
}

to{
opacity:1;
transform:translateX(0);
}

}

@keyframes fadeRight{

from{
opacity:0;
transform:translateX(60px);
}

to{
opacity:1;
transform:translateX(0);
}

}

/* RESPONSIVE */

@media(max-width:992px){

.sweetme-container{
flex-direction:column;
text-align:center;
}

.sweetme-left{
width:100%;
margin-bottom:40px;
}

.sweetme-right{
width:100%;
}

.sweetme-product-box img{
width:260px;
}

}






/* SECTION */

.sweetme-insight-section{
background:#f2f4f6;
padding:80px 0;
font-family:Poppins;
}

.sweetme-insight-container{
width:1200px;
margin:auto;
}

/* HEADER */

.sweetme-insight-header h2{
font-size:42px;
color:#2e3a46;
margin-bottom:5px;
}

.sweetme-insight-header p{
letter-spacing:2px;
font-size:13px;
color:#b08860;
margin-bottom:40px;
}

/* GRID */

.sweetme-insight-grid{
display:flex;
gap:40px;
}

/* TITLES */

.sweetme-insight-title{
font-size:20px;
margin-bottom:20px;
color:#2e3a46;
}

/* LEFT CARDS */

.sweetme-insight-card{
display:flex;
gap:15px;
background:white;
padding:20px;
border-radius:10px;
margin-bottom:15px;
box-shadow:0 5px 15px rgba(0,0,0,0.05);
transition:.3s;
}

.sweetme-insight-card:hover{
transform:translateY(-5px);
}

.sweetme-insight-card .icon{
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#eee;
font-size:18px;
}

/* COLORS */

.green{border-left:4px solid #3bb273;}
.orange{border-left:4px solid #e59b59;}
.blue{border-left:4px solid #3c7dcf;}

/* RIGHT SIDE */

.sweetme-insight-right{
flex:1;
}

.sweetme-insight-left{
flex:1;
}

/* WHO CARDS */

.sweetme-who-grid{
display:flex;
gap:20px;
margin-bottom:30px;
}

.sweetme-who-card{
background:white;
padding:25px;
border-radius:10px;
text-align:center;
box-shadow:0 5px 15px rgba(0,0,0,0.05);
flex:1;
transition:.3s;
}

.sweetme-who-card:hover{
transform:translateY(-6px);
}

.who-icon{
font-size:30px;
margin-bottom:10px;
}

/* TAGS */

.sweetme-tags{
background:#2e3a46;
padding:20px;
border-radius:12px;
display:flex;
flex-wrap:wrap;
gap:10px;
}

.sweetme-tags span{
background:#445260;
color:white;
padding:8px 15px;
border-radius:20px;
font-size:13px;
}

.sweetme-tags .active{
background:#e6a96d;
color:#2e3a46;
}

.mt{
margin-top:25px;
}




/* SECTION */

.sweetme-brand-section{
background:#f4f5f6;
padding:80px 0;
font-family:Poppins;
}

.sweetme-brand-container{
width:1200px;
margin:auto;
}

/* HEADER */

.sweetme-brand-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:40px;
border-bottom:1px solid #e3e3e3;
padding-bottom:15px;
}

.sweetme-brand-header h2{
font-size:40px;
color:#2e3a46;
}

.sweetme-brand-header p{
font-size:13px;
letter-spacing:2px;
color:#b08968;
}

.sweetme-brand-name{
color:#9aa3ab;
font-size:20px;
}

/* QUOTE */

.sweetme-brand-quote{
text-align:center;
max-width:800px;
margin:40px auto;
}

.sweetme-brand-quote h3{
font-size:28px;
color:#2e3a46;
margin-bottom:15px;
}

.sweetme-brand-quote p{
color:#6b7480;
line-height:1.6;
}

/* CARDS */

.sweetme-brand-cards{
display:flex;
gap:20px;
margin-top:40px;
}

.sweetme-brand-card{
background:white;
padding:25px;
border-radius:12px;
text-align:center;
flex:1;
box-shadow:0 10px 25px rgba(0,0,0,0.05);
transition:.3s;
border-top:3px solid #e2a86b;
}

.sweetme-brand-card:hover{
transform:translateY(-6px);
}

.brand-icon{
font-size:28px;
margin-bottom:10px;
}

.sweetme-brand-card h4{
font-size:18px;
margin-bottom:10px;
color:#2e3a46;
}

.sweetme-brand-card p{
font-size:14px;
color:#6b7480;
line-height:1.5;
}

/* FOOTER STRIP */

.sweetme-brand-footer{
background:#2e3a46;
color:white;
margin-top:40px;
padding:18px 25px;
border-radius:8px;
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
}

.brand-right span{
margin-left:20px;
font-size:14px;
}

/* RESPONSIVE */

@media(max-width:992px){

.sweetme-brand-cards{
flex-direction:column;
}

.sweetme-brand-header{
flex-direction:column;
align-items:flex-start;
gap:10px;
}

}




/* SECTION */

.sweetme-portfolio-section{
background:#f5f6f7;
padding:80px 0;
font-family:Poppins;
}

.sweetme-portfolio-container{
width:1200px;
margin:auto;
}

/* HEADER */

.sweetme-portfolio-header{
display:flex;
justify-content:space-between;
align-items:center;
border-bottom:1px solid #e5e5e5;
padding-bottom:15px;
margin-bottom:40px;
}

.sweetme-portfolio-header h2{
font-size:40px;
color:#2e3a46;
}

.sweetme-portfolio-header p{
font-size:13px;
letter-spacing:2px;
color:#b08968;
}

.portfolio-brand{
color:#9aa3ab;
font-size:20px;
}

/* GRID */

.sweetme-portfolio-grid{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:25px;
}

/* PRODUCT CARD */

.sweetme-product-card{
background:white;
padding:20px;
text-align:center;
border-radius:12px;
box-shadow:0 10px 20px rgba(0,0,0,0.05);
transition:.3s;
}

.sweetme-product-card:hover{
transform:translateY(-8px);
}

.sweetme-product-card img{
height:80px;
margin-bottom:10px;
}

.sweetme-product-card h4{
font-size:15px;
margin-bottom:5px;
color:#2e3a46;
}

.sweetme-product-card span{
font-size:11px;
color:#9aa3ab;
background:#f1f1f1;
padding:5px 10px;
border-radius:20px;
display:inline-block;
}

/* PACK STRIP */

.sweetme-pack-strip{
margin-top:40px;
background:#2e3a46;
padding:18px 25px;
border-radius:8px;
display:flex;
justify-content:space-between;
align-items:center;
color:white;
flex-wrap:wrap;
}

.pack-left button{
background:transparent;
border:1px solid #e2a86b;
color:white;
padding:6px 12px;
margin-left:10px;
border-radius:6px;
font-size:12px;
}

.pack-right span{
margin-left:20px;
font-size:13px;
}

/* RESPONSIVE */

@media(max-width:992px){

.sweetme-portfolio-grid{
grid-template-columns:repeat(2,1fr);
}

}





/* SECTION */

.sweetme-packaging-section{
background:#f6f7f8;
padding:80px 0;
font-family:Poppins;
}

.sweetme-packaging-container{
width:1200px;
margin:auto;
}

/* HEADER */

.sweetme-packaging-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:40px;
border-bottom:1px solid #e6e6e6;
padding-bottom:15px;
}

.sweetme-packaging-header h2{
font-size:38px;
color:#2e3a46;
}

.sweetme-packaging-header p{
font-size:12px;
letter-spacing:2px;
color:#b08968;
}

.sweetme-brand{
color:#9aa3ab;
font-size:18px;
}

/* GRID */

.sweetme-packaging-grid{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:30px;
align-items:center;
}

/* CARDS */

.pack-card{
background:white;
padding:25px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.05);
margin-bottom:20px;
}

.pack-card h4{
margin-bottom:15px;
color:#2e3a46;
}

.pack-card ul{
padding-left:18px;
}

.pack-card li{
font-size:14px;
margin-bottom:10px;
color:#6b7280;
}

/* COLOR BORDERS */

.retail{border-left:4px solid #e39a52;}
.freshness{border-left:4px solid #2ea44f;}
.ecommerce{border-left:4px solid #2f80ed;}

/* CENTER IMAGE */

.pack-image{
position:relative;
text-align:center;
}

.pack-image img{
height:260px;
}

/* TAGS */

.tag{
position:absolute;
background:white;
padding:6px 12px;
border-radius:20px;
font-size:12px;
box-shadow:0 5px 10px rgba(0,0,0,0.1);
}

.tag1{top:-10px;left:40%;}
.tag2{top:60px;right:-10px;}
.tag3{bottom:80px;left:-10px;}
.tag4{bottom:-10px;right:40%;}

/* MOBILE TEST */

.mobile-test h5{
font-size:12px;
letter-spacing:1px;
color:#9aa3ab;
margin-bottom:15px;
}

.mobile-compare{
display:flex;
align-items:center;
gap:15px;
margin-bottom:10px;
}

.mobile-box{
width:60px;
height:90px;
background:#eee;
border-radius:6px;
}

.mobile-box.highlight{
border:2px solid #2ea44f;
}

.vs{
font-size:12px;
color:#999;
}

.ctr{
color:#2ea44f;
font-weight:600;
font-size:14px;
}

.ctr span{
color:#999;
font-weight:400;
}

/* RESPONSIVE */

@media(max-width:992px){

.sweetme-packaging-grid{
grid-template-columns:1fr;
}

.pack-image img{
height:220px;
}

}






.supply-chain-section{
background:#f8f9fb;
}

.timeline-wrapper{
position:relative;
padding-top:40px;
}

.timeline-line{
position:absolute;
top:60px;
left:5%;
width:90%;
height:3px;
background:#d8a46b;
}

.timeline-item{
position:relative;
}

.icon-circle{
width:80px;
height:80px;
background:#fff;
border:2px solid #d8a46b;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 15px;
font-size:28px;
color:#2d3748;
}

.icon-circle.grey{
border:2px dashed #ccc;
color:#aaa;
}

.timeline-item h5{
font-weight:600;
margin-bottom:10px;
}

.timeline-item p{
font-size:14px;
color:#6c757d;
}

.stat-box{
background:#fff;
border-radius:12px;
padding:25px;
box-shadow:0 10px 20px rgba(0,0,0,0.05);
text-align:center;
border-bottom:4px solid #d8a46b;
}

.stat-box h3{
font-weight:700;
margin-bottom:5px;
}





.partner-section{
background:#f7f8fb;
}

.section-header h2{
font-size:40px;
font-weight:700;
}

.subtitle{
color:#a47b5a;
letter-spacing:1px;
font-size:13px;
}

.partner-card{
background:#fff;
padding:25px;
border-radius:14px;
box-shadow:0 5px 20px rgba(0,0,0,0.05);
position:relative;
}

.partner-card h5{
margin-top:10px;
font-weight:600;
}

.partner-card p{
font-size:14px;
color:#6c757d;
}

.icon{
width:45px;
height:45px;
background:#f1f3f6;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
}

.border-gold{
border-left:4px solid #d8a46b;
}

.border-dark{
border-left:4px solid #2f3a4b;
}

.border-green{
border-left:4px solid #2fa463;
}

.border-red{
border-left:4px solid #d84b4b;
}

.badge{
display:inline-block;
margin-top:10px;
padding:6px 10px;
border-radius:6px;
font-size:12px;
}

.badge.gold{background:#f6e7d8;color:#b36b32;}
.badge.grey{background:#e9ecef;}
.badge.green{background:#dff3e6;color:#2fa463;}
.badge.red{background:#f9e0e0;color:#d84b4b;}

.product-box{
background: url('assets/images/assortment-bg.png') center/cover no-repeat;
padding:25px;
border-radius:12px;
box-shadow:0 5px 20px rgba(0,0,0,0.05);
position:relative;
min-height:220px;
}

.product-box h6{
font-weight:600;
color:#8a8a8a;
}

.products{
display:flex;
justify-content:space-between;
align-items:end;
margin-top:25px;
}

.products img{
height:120px;
object-fit:contain;
}

.onboard-box{
background:#2f3a4b;
color:#fff;
padding:25px;
border-radius:12px;
}

.onboard-box ul{
list-style:none;
padding:0;
margin-top:15px;
}

.onboard-box li{
margin-bottom:8px;
}

.onboard-box i{
color:#4cd087;
margin-right:8px;
}









.activation-section{
background:#f7f8fb;
}

.section-title h2{
font-size:42px;
font-weight:700;
}

.section-title p{
letter-spacing:1px;
color:#b58a63;
font-size:13px;
}

.activation-card{
width:360px;
background:#fff;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
text-align:center;
padding-top:50px;
position:relative;
overflow:hidden;
border-top:5px solid #d8a46b;
}

.top-icon{
width:70px;
height:70px;
background:#f1f1f1;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:26px;
margin:0 auto 15px;
}

.activation-card h4{
font-weight:600;
margin-bottom:5px;
}

.company{
font-size:12px;
color:#7a7a7a;
letter-spacing:1px;
}

.contact-area{
margin-top:25px;
padding:20px;
background:#f8f8f8;
}

.contact-item{
display:flex;
align-items:center;
gap:15px;
margin-bottom:18px;
text-align:left;
}

.contact-item i{
width:35px;
height:35px;
background:#eee;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#d8a46b;
}

.contact-item p{
margin:0;
font-size:13px;
color:#555;
}

.qr-box{
background:#2e3f51;
padding:35px;
display:flex;
justify-content:center;
}

.qr-box img{
width:80px;
height:80px;
background:#fff;
padding:5px;
}


/* =========================
   FOOTER
========================= */

.site-footer {
  background: #ffffff;
  border-top: 3px solid #1b7f3a;
  padding: 60px 0 0;
  font-size: 14px;
}

.footer-logo {
  font-size: 26px;
  font-weight: 800;
  color: #1b7f3a;
}

.footer-tagline {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 15px;
}

.footer-text {
  margin-bottom: 8px;
  font-weight: 600;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #1b7f3a;
  color: #1b7f3a;
  margin-right: 8px;
  transition: 0.3s;
}

.footer-social a:hover {
  background: #1b7f3a;
  color: #ffffff;
}

/* LINKS */
.site-footer h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #14532d;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {
  text-decoration: none;
  color: #374151;
  transition: 0.3s;
}

.footer-links a:hover {
  color: #1b7f3a;
  padding-left: 4px;
}

/* NEWSLETTER */
.footer-newsletter input {
  width: 100%;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  margin-bottom: 10px;
}

.footer-newsletter button {
  width: 100%;
  padding: 10px;
  border: none;
  background: #1b7f3a;
  color: #ffffff;
  font-weight: 600;
  border-radius: 6px;
  transition: 0.3s;
}

.footer-newsletter button:hover {
  background: #166534;
}

/* CATALOGUE */
.catalogue-box {
  margin-top: 20px;
}

.catalogue-box h5 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

.catalogue-btn {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid #facc15;
  color: #000;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  background: #facc15;
}

.catalogue-btn:hover {
  background: #eab308;
}

/* BOTTOM */
.footer-bottom {
  background: #f0fdf4;
  padding: 15px 0;
  text-align: center;
  margin-top: 40px;
}

.footer-bottom p {
  margin: 0;
  font-size: 13px;
  color: #374151;
}
