:root {
  --accent:#f2673b;
  --blue:#2e9bff;
  --green:#19b86b;
  --card-bg:#fff;
  --muted:#f6f8fb;
  --shadow: 0 10px 26px rgba(13,38,76,0.08);
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background:linear-gradient(90deg,#f2f6f9 0 120px,#fff 120px calc(100% - 120px),#f2f6f9 calc(100% - 120px));
  color:#222;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

/* Main header layout */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  font-size: 1.3em; /* 1.3x bigger */
}

/* Left section (Logo + Title) */
.header-left {
  flex: 1;
  display: flex;
  align-items: center;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: #d23a2a;
}
.logo small {
  font-weight: 600;
  color: #666;
  font-size: 0.7em;
}
.title {
  font-size: 1.1em;
  font-weight: bold;
  color: #d23a2a;
}

/* Center section (Red box) */
.header-center {
  flex: 2;
  display: flex;
  justify-content: center;
}
.center-box {
  background: #e74c3c;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  text-align: center;
  font-size: 0.9em;
}

/* Right section (Navigation) */
.header-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.nav ul {
  list-style: none;
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 0;
}
.nav a {
  text-decoration: none;
  color: #333;
  font-weight: 700;
}
.nav a.active {
  color: #2e9bff;
}

/* ===== HERO ===== */
.container{max-width:1100px;margin:28px auto;padding:0 18px}
.banner{
  background:var(--accent);color:#fff;border-radius:10px;padding:36px;text-align:center;
  box-shadow:var(--shadow)
}
.banner h1{font-size:28px;margin-bottom:6px}
.banner p{opacity:0.95}

/* ===== PRODUCTS ===== */
.products{margin:22px 0}
.card{
  display:flex;gap:20px;background:var(--card-bg);padding:20px;border-radius:14px;
  box-shadow:var(--shadow);align-items:center;margin-bottom:20px;transition:transform .18s,box-shadow .18s;
  overflow:hidden;
}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(11,35,76,0.12)}
.card .thumb{flex:0 0 220px;height:140px;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#e8eef6,#dbe6f3)}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.card:hover .thumb img{transform:scale(1.06)}

.card .info{flex:1}
.card h3{font-size:20px;margin-bottom:8px}
.card ul{list-style:none;margin:8px 0 12px;padding-left:0}
.card ul li{margin:6px 0;font-weight:600}
.price{display:inline-block;background:#e8f0fb;padding:8px 12px;border-radius:8px;font-weight:800;color:#1c3f68}

/* ===== ACTION BUTTONS ===== */
.actions{display:flex;gap:10px;margin-top:8px}
.btn{border:0;padding:10px 16px;border-radius:10px;font-weight:800;cursor:pointer;transition:transform .12s,filter .12s}
.btn:active{transform:translateY(1px)}
.btn-buy{background:var(--green);color:#fff;box-shadow:0 8px 18px rgba(25,184,107,0.12)}
.btn-buy:hover{filter:brightness(.95)}
.btn-more{background:var(--blue);color:#fff;box-shadow:0 8px 18px rgba(46,155,255,0.12)}
.btn-more:hover{filter:brightness(.95)}

/* ===== BADGES ===== */
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#fff3e8;color:#c8552e;font-weight:800;margin-left:8px;border:1px solid rgba(194,101,77,0.08)}

/* ===== WHATSAPP FLOATING ===== */
.whatsapp{
  position:fixed;right:20px;bottom:20px;width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#25d366,#1da851);
  box-shadow:0 12px 30px rgba(14,74,46,0.18);z-index:220;
}
.whatsapp img{width:34px;height:34px}

/* ===== MODAL ===== */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,0.58);display:none;align-items:center;justify-content:center;z-index:300;
}
.modal .box{
  width:92%;max-width:720px;background:#fff;border-radius:10px;padding:18px 20px;position:relative;
}
.modal .close{
  position:absolute;top:12px;right:12px;border:0;background:#f2f2f2;border-radius:6px;padding:6px 8px;cursor:pointer;font-weight:800;
}

/* ===== BUY PAGE QR ===== */
.buy-wrap{min-height:60vh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;padding:40px}
.buy-wrap img{max-width:320px;border-radius:8px;box-shadow:var(--shadow)}
.buy-wrap p{font-weight:700}

/* ===== FOOTER ===== */
.footer{margin-top:30px;padding:18px;text-align:center;color:#666;font-size:14px}

/* ===== RESPONSIVE ===== */
@media (max-width:900px){
  .header-container{flex-direction:column;gap:14px}
  .card{flex-direction:column;align-items:flex-start}
  .card .thumb{width:100%;height:180px}
  .banner h1{font-size:22px}
}
.btn {
  text-decoration: none;
  display: inline-block;
}
/* Light background for card feature lists */
.card ul {
  background-color: #f5f7fb; /* light gray */
  padding: 12px 16px;         /* some spacing inside */
  border-radius: 8px;         /* rounded corners */
  border: 1px solid #e3e7ef; /* subtle border */
  list-style: none;           /* remove default bullets */
  margin: 10px 0;             /* spacing from other elements */
}

.card ul li {
  margin: 6px 0;
  font-weight: 600;
  font-size: 14px;
}
/* Different light colors for each card */
.products article.card:nth-child(1) {
  background-color: #ffe6e6;  /* Light red/pink */
}

.products article.card:nth-child(2) {
  background-color: #e6f7ff;  /* Light blue */
}

.products article.card:nth-child(3) {
  background-color: #e6ffe6;  /* Light green */
}

.products article.card:nth-child(4) {
  background-color: #fffbe6;  /* Light yellow */
}
/* Different light colors for each card */
.products article.card:nth-child(5) {
  background-color: #ffe6e6;  /* Light red/pink */
}

.products article.card:nth-child(6) {
  background-color: #e6f7ff;  /* Light blue */
}

.products article.card:nth-child(7) {
  background-color: #e6ffe6;  /* Light green */
}

.products article.card:nth-child(8) {
  background-color: #fffbe6;  /* Light yellow */
}
.products article.card:nth-child(9) {
  background-color: #e6f7ff;  /* Light blue */
}

.products article.card:nth-child(10) {
  background-color: #e6ffe6;  /* Light green */
}

.products article.card:nth-child(8) {
  background-color: #fffbe6;  /* Light yellow */
/* Keep the box styling */
.card {
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  padding: 24px;
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}


/* Keep the box styling */
.card {
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  padding: 24px;
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
@media (max-width: 768px) {
  .products {
    padding: 20px;
    gap: 15px;
  }
  .card {
    padding: 16px;
  }
}
@media (max-width: 480px) {
  .products {
    padding: 10px;
    gap: 10px;
  }
  .card {
    padding: 12px;
  }
  .header-center .center-box {
    font-size: 14px;
  }
  .nav ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
}
.header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.btn {
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}