/* ==== GLOBAL MOBILE-FIRST ==== */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Hind',sans-serif; }
body { background:linear-gradient(135deg,#ff5e62,#ff9966); color:#fff; line-height:1.5; }
img { max-width:100%; height:auto; display:block; }
.container { max-width:420px; margin:0 auto; padding:0 15px; }
@media (min-width:768px) { 
    .container { margin:40px auto; border:4px solid #fff; border-radius:20px; overflow:hidden; box-shadow:0 0 30px rgba(0,0,0,0.5); } 
}

/* ==== TOP BANNER ==== */
.top-banner { position:relative; width:100%; margin-bottom:0; }
.top-banner img { width:100%; height:auto; display:block; }
.banner-overlay { position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.3); }
.logo { font-size:28px; font-weight:700; color:#ff5e62; text-shadow:2px 2px 4px rgba(0,0,0,0.7); }
.badge { background:#ffd700; color:#000; font-size:14px; padding:4px 10px; border-radius:20px; margin-left:10px; }

/* ==== HERO ==== */
.hero { background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url('../img/hero.jpg'); background-size:cover; background-position:center; padding:50px 20px; text-align:center; border-radius:0 0 30px 30px; }
.hero h1 { font-size:30px; margin-bottom:15px; }
.hero p { font-size:18px; margin-bottom:20px; }
.cta-btn { background:#ffd700; color:#000; font-weight:700; padding:14px 30px; border-radius:50px; text-decoration:none; display:inline-block; font-size:18px; }
.big-cta { font-size:20px !important; padding:16px 40px !important; }

/* ==== PRODUCTS GRID ==== */
.products { padding:40px 0; }
.grid { display:grid; gap:25px; }
.card { background:#fff; color:#000; border-radius:20px; overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,0.2); }
.card-body { padding:20px; }
.card h3 { font-size:28px; color:black; margin-bottom:10px; }
.price { font-size:22px; font-weight:700; color:#000; }
.old-price { text-decoration:line-through; color:#888; font-size:16px; margin-left:8px; }
.tag { background:black; color:#fff; font-size:19px; padding:5px 12px; border-radius:20px; display:inline-block; margin:10px 0; }
.card .cta-btn { background:#000; color:#ffd700; width:100%; margin-top:15px; padding:14px; }
.card ul { font-size:15px; margin:12px 0; color:#555; list-style:disc; padding-left:25px; }
.card p { line-height:1.6; }

/* ==== OTHER PRODUCTS ==== */
.other-products h3 { margin-bottom:5px; }

/* ==== TRUST BADGES ==== */
.trust { display:flex; justify-content:center; gap:15px; margin:25px 0; flex-wrap:wrap; }
.trust img {
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}

/* ==== FAQ ==== */
details { cursor:pointer; }
summary { list-style:none; position:relative; }
summary::before { content:'➤'; position:absolute; left:0; }
details[open] summary::before { content:'➢'; }

/* ==== ANIMATIONS ==== */
@keyframes pulse { 0%{transform:scale(1);} 50%{transform:scale(1.05);} 100%{transform:scale(1);} }
.cta-btn:hover { animation:pulse 0.6s; }

/* ==== FOOTER ==== */
footer { text-align:center; padding:25px; font-size:13px; color:#fff; opacity:0.8; }

/* ==== FEMALE PRODUCTS GRID – PINK & BOLD ==== */
.female-products { 
    padding:60px 20px; 
    background: linear-gradient(135deg, #ff9a9e, #fad0c4, #ff69b4); 
    border-radius:30px; 
    box-shadow:0 15px 35px rgba(255,105,180,0.4); 
}
.female-products .grid { 
    display:grid; gap:30px; 
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); 
    max-width:1400px; margin:0 auto; 
}
.female-products .card { 
    background:linear-gradient(145deg,#fff,#ffebee); 
    color:#000; border-radius:28px; overflow:hidden; 
    box-shadow:0 12px 28px rgba(255,20,120,0.25),0 0 20px rgba(255,182,193,0.4); 
    transition:all 0.4s ease; border:2px solid transparent; 
}
.female-products .card:hover { 
    transform:translateY(-12px) scale(1.03); 
    box-shadow:0 20px 40px rgba(255,20,120,0.4),0 0 30px rgba(255,105,180,0.6); 
    border:2px solid #ff69b4; 
}
.female-products .card img { width:100%; height:auto; border-bottom:4px solid #ff69b4; }
.female-products .card-body { padding:28px; text-align:center; }
.female-products .card h3 { 
    font-size:32px; font-weight:900; color:#c2185b; 
    margin-bottom:14px; text-shadow:1px 1px 3px rgba(255,20,120,0.3); 
}
.female-products .price { 
    font-size:28px; font-weight:900; color:#d32f2f; display:inline-block; 
}
.female-products .old-price { 
    text-decoration:line-through; color:#f44336; font-size:18px; margin-left:10px; 
}
.female-products .tag { 
    background:linear-gradient(45deg,#ff69b4,#ff1493); color:#fff; 
    font-size:16px; font-weight:bold; padding:8px 18px; border-radius:50px; 
    display:inline-block; margin:12px 0; box-shadow:0 4px 10px rgba(255,105,180,0.4); 
    animation:bounce 2s infinite; 
}
.female-products .cta-btn { 
    background:linear-gradient(45deg,#ff69b4,#c2185b); color:#ffd700; 
    width:100%; margin-top:20px; padding:18px; font-size:20px; font-weight:800; 
    border:none; border-radius:50px; cursor:pointer; transition:all 0.3s ease; 
    box-shadow:0 6px 15px rgba(255,105,180,0.5); text-transform:uppercase; 
}
.female-products .cta-btn:hover { 
    background:linear-gradient(45deg,#c2185b,#880e4f); transform:scale(1.05); 
    color:#fff; box-shadow:0 10px 25px rgba(199,21,133,0.6); 
}
.female-products ul { 
    font-size:16px; margin:16px 0; color:#555; list-style:none; padding-left:0; text-align:left; 
}
.female-products ul li { 
    position:relative; padding-left:28px; margin:10px 0; line-height:1.6; 
}
.female-products ul li::before { 
    content:"💖"; position:absolute; left:0; font-size:18px; 
}
@keyframes bounce { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }

/* Mobile */
@media (max-width:768px) { 
    .female-products .card h3 { font-size:26px; } 
    .female-products .price { font-size:24px; } 
    .female-products .cta-btn { font-size:18px; padding:16px; } 
}
/* ========== ORDER FORM PAGE ========== */
.order-form-section {
  background: linear-gradient(135deg, #ff1744, #ff9100);
  padding: 25px;
  text-align: center;
  color: #fff;
}

.order-form-section h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
}

.order-form-section p {
  font-size: 16px;
  margin-bottom: 20px;
}

.order-form {
  background: #fff;
  border-radius: 15px;
  padding: 20px;
  color: #000;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.input-group {
  text-align: left;
  margin-bottom: 15px;
}

.input-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: #111;
}

.input-group input,
.input-group textarea {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #ccc;
  font-size: 16px;
  outline: none;
  transition: 0.3s;
}

.input-group input:focus,
.input-group textarea:focus {
  border-color: #ff9100;
  box-shadow: 0 0 5px rgba(255,145,0,0.5);
}

.submit-btn {
  background: linear-gradient(90deg, #ff9100, #ff1744);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  padding: 14px;
  width: 100%;
  cursor: pointer;
  transition: 0.3s;
}

.submit-btn:hover {
  background: linear-gradient(90deg, #ff1744, #ff9100);
  transform: scale(1.03);
}
/* Dropdown styling */
.input-group select {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #ccc;
  font-size: 16px;
  outline: none;
  transition: 0.3s;
  background: #fff;
  color: #000;
}

.input-group select:focus {
  border-color: #ff9100;
  box-shadow: 0 0 5px rgba(255,145,0,0.5);
}