/* ================== MOBILE APP MODE ================== */
html, body {
  overflow-x: hidden;
  font-family: 'Poppins', sans-serif;
  background: #0a0a0a;
  color: #fff;
  scroll-behavior: smooth;
  margin:0;
  padding:0;
}

/* ================== BOTTOM APP BAR ================== */
.navbar {
  position: fixed !important;
  bottom: 0;
  top: auto;
  width: 100%;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.95) !important;
  padding: .5rem 0;
  z-index: 9999;
  justify-content: space-around;
}

.navbar-brand {display:none;}
.navbar-nav {width:100%;display:flex;flex-direction:row;justify-content:space-around;}
.nav-link {font-size:.75rem;text-align:center;padding:.5rem;}
.nav-link::after {display:none;}

/* ================== HERO ================== */
#home {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  text-align:center;
  padding:2rem 1rem 6rem;
}

#bgVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

#home .lead {
  font-size:0.7rem;
  font-weight:500;
  margin-bottom:1.5rem;
}

#home .btn-lg {
  border-radius:30px;
  padding:.7rem 2rem;
  font-size:1rem;
  font-weight:600;
}

/* ================== PRODUCT GRID ================== */
#articles .row {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem;
  padding:0 1rem;
}

.card {
  background:#111;
  border-radius:1.2rem;
  padding:.6rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  color: #fff;
}

.card img {
  max-width:100%;
  border-radius:.8rem;
  margin-bottom:.4rem;
}

.card h5 {
  font-size:.9rem;
  font-weight:600;
  margin:0;
}

.card p {
  font-size:.75rem;
  margin:.3rem 0;
}

.card button {
  font-size:.8rem;
  padding:.4rem .6rem;
  border-radius:30px;
  margin-top:.3rem;
}

/* ================== CART ================== */
#cart {
  padding-bottom:6rem;
  padding-top:2rem;
}

#cartItems .border {
  display:flex;
  flex-direction:column;
  gap:.4rem;
  padding:.4rem;
  border-radius:.8rem;
  background:#111;
  margin-bottom:.6rem;
}

#cartItems img {
  width:50px;
  border-radius:.4rem;
}

#cart h4 {
  font-size:1rem;
  font-weight:600;
}

/* ================== CONTACT ================== */
#contact {
  padding:2rem 1rem;
}

#contact iframe {
  height:200px;
  border-radius:1rem;
  margin-top:1rem;
}

/* ================== SOCIAL ICONS ================== */
#socials {
  display:flex;
  justify-content:center;
  gap:1rem;
  margin:1rem 0;
}

#socials a {
  width:3rem;
  height:3rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#111;
  box-shadow:0 0.4rem 1rem rgba(0,0,0,.6);
  transition:all .3s ease;
}

#socials a img {width:1.4rem;}
#socials a:hover {transform:scale(1.1);}

.removeBtn {
  background-color: #ffffff;
  border: none;
  color: #000;
  padding: 0.3rem 0.6rem;   /* was 5px 10px */
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 0.75rem;       /* was 12px */
  border-radius: 0.3rem;    /* was 5px */
  cursor: pointer;
}

.proceedBtn {
  background-color: #ffffff;
  border: none;
  color: #000;
  padding: 0.5rem 1rem;     /* was 8px 15px */
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 0.875rem;      /* was 14px */
  border-radius: 0.3rem;    /* was 5px */
  cursor: pointer;
}

.formbtn {
  background-color: #ffffff;
  border: none;
  color: #000;
  padding: 0.6rem 1.2rem;   /* was 10px 20px */
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1rem;          /* was 16px */
  border-radius: 0.3rem;    /* was 5px */
  cursor: pointer;
}