*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:sans-serif;
}

body{
  background:#fadde1;
  color:black;
}

/* ================= NAVBAR ================= */
.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:5px 15px;
  background:#F2F1ED;
  position:sticky;
  top:0;
  z-index:10000;
}

.logo{
  font-weight:600;
  font-size:20px;
  color:#d4a24c;  /* Gentle Vibe = Black */
}

.logo span{
  color:#000;   /* BD = Gold */
  font-size:13px; /* BD choto */
  margin-left:0px;
}
.logo span{
  vertical-align:top;
}

.nav-right{
  display:flex;
  align-items:center;
  gap:15px;
}

.nav-links{
  display:flex;
  gap:20px;
}

.nav-links a{
  text-decoration:none;
  color:black;
  font-size:14px; 
  transition:0.3s;
}

.nav-links a:hover{
  color:#d4a24c;
}

.menu-toggle{
  display:none;
  font-size:26px;
  cursor:pointer;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
}

.logo-img{
  width:32px;
  height:32px;
  border-radius:50%;   /* 🔥 circle */
  object-fit:cover;
  border:2px solid #d4a24c; /* optional premium border */
}

/* ================= HERO ================= */
.hero{
  position:relative;
  height:420px;
  background:url('84168rg4f4g64f.webp') center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
}

.overlay{
  position:absolute;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.2);
}

.hero-title{
  font-size:160px;
  color:white;
  z-index:2;
  font-weight:600;
}

/* ================= MAIN ================= */
.main{
  display:flex;
  padding:0px 30px 40px;
  gap:40px;
}

/* ================= GRID (PRODUCTS + COMBO SAME) ================= */
.products,
.combo-grid{
  flex:1;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:20px;
}

/* ================= UNIFIED CARD ================= */
.card,
.combo-card{
  background:#fff;
  border-radius:18px;
  padding:18px;
  text-align:center;
  box-shadow:0 5px 15px rgba(0,0,0,0.05);
  transition:.3s;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:100%;
}

.card:hover,
.combo-card:hover{
  transform:translateY(-8px);
}

/* ================= IMAGES ================= */
.card img,
.combo-card img{
  width:100%;
  height:150px;
  object-fit:contain;
}

/* ================= TEXT ================= */
.tag{
  position:absolute;
  top:15px;
  right:15px;
  background:#eee;
  padding:5px 12px;
  border-radius:12px;
  font-size:12px;
}

.rating{
  font-size:12px;
  color:#777;
}

.price,
.combo-price{
  font-weight:600;
  margin:10px 0;
}

/* ================= BUTTONS ================= */
.btns{
  display:flex;
  gap:10px;
  margin-top:auto;
}

.add{
  flex:1;
  background:orange;
  color:black;
  border:none;
  padding:10px;
  border-radius:25px;
}

.buy{
  flex:1;
  background:black;
  color:white;
  border:none;
  padding:10px;
  border-radius:25px;
}

/* ================= COMBO SECTION ================= */
.combo-section{
  padding:60px 20px;
}

.combo-title{
  font-size:32px;
  font-weight:600;
}

.combo-sub{
  color:#777;
  margin-top:5px;
}

/* ================= NEWSLETTER ================= */
.newsletter{
  background:#2f3e9e;
  color:white;
  text-align:center;
  padding:60px 20px;
}

.subscribe{
  margin-top:20px;
}

.subscribe input{
  padding:12px;
  width:250px;
  border:none;
  border-radius:6px;
}

.subscribe button{
  padding:12px 18px;
  background:#ff6b35;
  border:none;
  color:white;
  border-radius:6px;
  cursor:pointer;
}

/* ================= FOOTER ================= */
.footer{
  background:#2e283a;
  color:#ddd;
  padding:60px 20px 20px;
}

/* GRID */
.footer-container{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
  max-width:1200px;
  margin:auto;
}

/* BOX */
.footer-box h2,
.footer-box h3{
  color:#fff;
  margin-bottom:15px;
}

.footer-box p,
.footer-box li{
  font-size:14px;
  line-height:1.7;
  color:#bbb;
}

/* LIST */
.footer-box ul{
  list-style:none;
}

.footer-box ul li{
  margin-bottom:8px;
}

.footer-box ul li a{
  color:#bbb;
  text-decoration:none;
  transition:0.3s;
}

.footer-box ul li a:hover{
  color:#fff;
  padding-left:5px;
}

/* SOCIAL */
.social a{
  display:inline-block;
  margin-right:10px;
  font-size:16px;
  background:#444;
  padding:8px 10px;
  border-radius:50%;
  color:#fff;
  transition:0.3s;
}

.social a:hover{
  background:#fff;
  color:#000;
}

/* FOOTER BOTTOM */
.footer-bottom{
  text-align:center;
  margin-top:30px;
  border-top:1px solid #444;
  padding-top:15px;
  font-size:13px;
  color:#aaa;
}

/* ================= MOBILE ================= */
@media(max-width:768px){

  .footer-container{
    grid-template-columns:1fr 1fr;
    gap:25px;
  }

  .footer{
    padding:40px 15px;
  }
}

/* ================= SMALL MOBILE ================= */
@media(max-width:480px){

  .footer-container{
    grid-template-columns:1fr;
  }

  .footer-box{
    text-align:center;
  }

  .social{
    display:flex;
    justify-content:center;
    gap:10px;
  }
}

/* ================= MOBILE ================= */
@media(max-width:768px){

  .menu-toggle{
    display:block;   /* 🔥 eta na thakle show hobe na */
    font-size:28px;
    cursor:pointer;
  }
  .nav-links{
    display:flex;
    flex-direction:column;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    background:white;
    padding:20px;
    gap:15px;

    /* 🔥 animation */
    transform:translateY(-100%);
    opacity:0;
    transition:0.4s ease;
  }

  .nav-links.active{
    transform:translateY(0);
    opacity:1;
  }
.nav-links{
  box-shadow:0 10px 30px rgba(0,0,0,0.2);
  border-bottom-left-radius:15px;
  border-bottom-right-radius:15px;
}
  .hero-title{
    font-size:40px;
  }

  .main{
    padding:100px 15px 40px;
  }

  /* PRODUCTS + COMBO 2 COLUMN */
  .products,
  .combo-grid{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }

  .card,
  .combo-card{
    padding:12px;
  }

  .card img,
  .combo-card img{
    height:120px;
  }

  .combo-title{
    font-size:22px;
  }

.section-title{
  text-align: center;
  font-size: 30px;
  font-weight: 600;
  margin: 50px 0 25px;
  color: #111;
  position: relative;
}

.section-title::after{
  content: "";
  width: 60px;
  height: 3px;
  background: black;
  display: block;
  margin: 10px auto 0;
}
}
/* ================= UPCOMING SLIDER ================= */
.slider{
  overflow: hidden;
  position: relative;
  width: 100%;
}

.slide-track{
  display: flex;
  width: calc(250px * 14); /* total cards * width */
  animation: scroll 50s linear infinite;
}

.up-card{
  width: 250px;
  min-width: 250px;
  margin: 0 10px;
  background: #fff;
  border-radius: 15px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.up-card img{
  width: 100%;
  height: 140px;
  object-fit: contain;
}

.up-card h4{
  font-size: 14px;
  margin: 10px 0;
}

.up-card button{
  background: black;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 20px;
  cursor: pointer;
}

/* 🔥 MAIN ANIMATION */
@keyframes scroll{
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(-50%);
  }
}

/* Hover করলে pause হবে */
.slider:hover .slide-track{
  animation-play-state: paused;
}
@media(max-width:768px){
  .up-card{
    width: 180px;
    min-width: 180px;
  }

  .slide-track{
    animation: scroll 50s linear infinite;
  }
}