/* ===============================
   Global Styles (Shared on All Pages)
   =============================== */
@import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap");

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

:root{
  /* keep your color theme */
  --brand: #088178;
  --bg-light: #e3e6f3;
  --text: #1a1a1a;
  --muted: #465b52;
}

body { width: 100%; color: var(--text); line-height: 1.6; background:#fff; }

/* Give space for fixed header */
body.has-fixed-header { padding-top: 86px; }

/* Typography utilities you used */
h1 { font-size: 50px; line-height: 64px; color: #222; }
h2 { font-size: 46px; line-height: 54px; color: #222; }
h4 { font-size: 20px; color: #222; }
h6 { font-weight: 700; font-size: 12px; }
p  { font-size: 16px; color: var(--muted); margin: 15px 0 20px 0; }

.section-p1 { padding: 40px 0; }
.section-m1 { margin: 40px 0; }

button.normal {
  font-size: 14px;
  font-weight: 600; /* fixed: no px */
  padding: 15px 30px;
  color: #000;
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer; border: none; outline: none; transition: 0.2s;
}
button.normal:hover { background-color: var(--brand); color: #fff; }

/* ===============================
   Header / Navbar (Shared on All Pages)
   =============================== */
#header{
  display:flex; align-items:center; justify-content:space-between;
  background-color: var(--bg-light);
  padding:20px 24px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.06);
  z-index: 999; position: fixed; top:0; left:0; right:0;
}

/* Brand */
.header-logo h2{ font-weight: 800; }

/* Desktop nav list container */
.header-list{ display:flex; align-items:center; gap: 16px; }

/* The actual nav list */
.header-list-nav ul{ display:flex; align-items:center; gap: 20px; list-style:none; }
.header-list-nav ul li a{
  text-decoration:none; font-size:16px; font-weight:600; color: var(--text);
  transition:.3s ease; position:relative; padding: 6px 2px;
}
.header-list-nav ul li a:hover,
.header-list-nav ul li a.active{ color: var(--brand); }
.header-list-nav ul li a:hover::after,
.header-list-nav ul li a.active::after{
  content:""; width:30%; height:2px; background: var(--brand);
  position:absolute; bottom:-4px; left:0;
}

/* Icons on the right (cart, etc) */
.header-list-icon a{ color: var(--text); transition:.3s ease; }
.header-list-icon a:hover{ color: var(--brand); }

/* Mobile: hamburger icon */
.mobile{ display:none; align-items:center; gap: 16px; }
.mobile i{ font-size:24px; cursor:pointer; }

/* Slide-in nav drawer for mobile */
.nav-drawer{
  position: fixed; top:0; right: -320px; /* hidden off-canvas */
  width: 300px; height: 100vh; background: var(--bg-light);
  box-shadow: -2px 0 20px rgba(0,0,0,0.1);
  padding: 100px 24px 24px; transition: right .3s ease;
  display:flex; flex-direction:column; gap: 18px;
  z-index: 1000;
}
.nav-drawer.show{ right: 0; } /* visible state */
.nav-drawer a{ font-size:18px; font-weight:600; color:var(--text); text-decoration:none; }
.nav-drawer a:hover{ color: var(--brand); }

/* Close button inside drawer */
#close{
  position:absolute; top:20px; right:20px; font-size:24px; cursor:pointer; color:#222;
}

/* Dark overlay when drawer is open */
.nav-overlay{
  position:fixed; inset:0; background: rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition: opacity .3s ease; z-index: 900;
}
.nav-overlay.show{ opacity:1; pointer-events:auto; }

/* ===============================
   Hero Section
   =============================== */
#hero {
  background-image: url(images/hero4.png);
  width: 100%; height: 88vh; background-size: cover; background-position:center;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  padding: 0 24px;
}
#hero h4{ padding-bottom: 10px; font-size: 28px; }
#hero h2{ font-size: 48px; }
#hero h1{ color: var(--brand); font-size: 48px; }
#hero button{
  background-color: transparent; background-image: url(images/button.png);
  background-repeat:no-repeat; background-size: cover;
  width: 220px; height: 56px; border:0; cursor:pointer;
  font-size:18px; font-weight:700; color: var(--brand);
  padding: 12px 60px;
}

/* ===============================
   Features
   =============================== */
#features{ display:flex; align-items:center; justify-content:center; gap: 16px; flex-wrap: wrap; padding: 20px; }
#features .f-box{
  width: 180px; text-align:center; padding: 25px 15px;
  box-shadow: 20px 20px 34px rgba(0,0,0,0.03); border:1px solid #cce7d0; border-radius: 8px;
  transition: box-shadow .3s; background:#fff;
}
#features .f-box:hover{ box-shadow: 10px 10px 54px rgba(0,0,0,0.1); }
#features .f-box img{ width: 100%; margin-bottom: 10px; }
#features .f-box h6{
  display:inline-flex; padding: 9px 8px 6px;
  line-height:1; font-size:14px; border-radius:4px; color: var(--brand); background:#fddde4;
}
#features .f-box:nth-child(2) h6{ background:#cdebbc; }
#features .f-box:nth-child(3) h6{ background:#d1e8f2; }
#features .f-box:nth-child(4) h6{ background:#cdd4f8; }
#features .f-box:nth-child(5) h6{ background:#f6dbf6; }
#features .f-box:nth-child(6) h6{ background:#fff2e5; }

/* ===============================
   Product Cards
   =============================== */
.product-section .pro-collection{ display:flex; flex-wrap:wrap; justify-content:center; gap: 24px; padding: 0 24px; }
.product-section h1, .product-section p{ text-align:center; }
.product-section .product-cart{
  width: 280px; border:1px solid #ebebeb; padding:13px; border-radius: 25px; position:relative;
  box-shadow: 20px 20px 30px rgba(0,0,0,0.02); transition: box-shadow .2s; background:#fff;
}
.product-section .product-cart:hover{ box-shadow: 20px 20px 30px rgba(0,0,0,0.06); }
.product-section .product-cart img{ width:100%; border-radius: 20px; }
.product-section .product-cart span{ color:#969696; font-weight:500; line-height:30px; }
.product-section .product-cart h4{ font-size:18px; color:#292929; }
.product-section .product-cart .stars{ color:#e6ae2c; padding:6px 0; }
.product-section .product-cart .price{ color: var(--brand); padding:4px 0; }
.product-section .product-cart .fa-box-open{
  color: var(--brand); background-color:#c7e9e75e; padding: 15px; border-radius: 50px;
  position:absolute; right:10px; bottom:10px;
}

/* ===============================
   Banners
   =============================== */
#off-banner{
  background-image: url(images/banner/b2.jpg); background-size:cover; background-position:center;
  width:100%; height: 40vh; display:flex; align-items:center; justify-content:center; flex-direction:column;
}
#off-banner h4, #off-banner h2{ color:#eaebf0; }
#off-banner h2{ padding: 20px 0; }

#banners{ margin: 0 24px; }
#banners h2, #banners h4, #banners span{ color: #f8f8f8; }
#banners .big-banners{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: 16px; }
#banners .big-banners div{
  min-width: 320px; flex:1; margin: 0; height: 280px; display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center; padding: 24px; background-size:cover; border-radius: 10px;
}
#banners .big-banners button{
  margin-top: 16px; padding: 12px 20px; font-size:16px; font-weight:500; background:transparent;
  color:#f8f8f8; border:1px solid #f8f8f8; cursor:pointer; transition:.3s ease; border-radius: 6px;
}
#banners .big-banners div:hover button{ background: var(--brand); border-color: var(--brand); }
#banners .big-banners-1{ background-image: url(images/banner/b17.jpg); }
#banners .big-banners-2{ background-image: url(images/banner/b10.jpg); }

#banners .small-banners{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: 16px; margin-top: 16px; }
#banners .small-banners div{
  min-width: 260px; height: 180px; display:flex; flex-direction:column; align-items:flex-start;
  justify-content:center; padding: 24px; background-size:cover; border-radius: 10px;
}
#banners .small-banners-1{ background-image: url(images/banner/b7.jpg); }
#banners .small-banners-2{ background-image: url(images/banner/b4.jpg); }
#banners .small-banners-3{ background-image: url(images/banner/b18.jpg); }
#banners .small-banners h2{ font-size: 22px; }
#banners .small-banners h5{ color:#771818; }

/* ===============================
   Newsletter
   =============================== */
#newsletter{
  background-image: url(images/banner/b14.png);
  background-repeat:no-repeat; background-position: 180px;
  background-color: #041e42; min-height: 160px;
  display:flex; align-items:center; justify-content:space-between; padding: 0 24px; gap: 16px; flex-wrap: wrap;
}
#newsletter .newsletter-text h3{ color:#fff; font-size: 26px; padding-bottom: 6px; }
#newsletter .newsletter-text h5{ color:#979797; font-size: 16px; }
#newsletter .newsletter-text h5 span{ color: rgb(216,182,29); }
#newsletter .form input{
  padding: 14px 12px; width: 280px; height: 48px; background:#d1d0d0; border-radius: 6px 0 0 6px;
  font-size: 16px; border:none; outline:none;
}
#newsletter .form button{
  padding: 14px 12px; border:none; width: 110px; background: var(--brand); color:#fff; font-size: 16px;
  border-radius: 0 6px 6px 0; cursor:pointer;
}

/* ===============================
   Footer (Shared)
   =============================== */
#footer{
  display:flex; align-items:flex-start; justify-content:space-between; gap: 24px;
  padding: 40px 24px; background:#ececec; color: #000;
  flex-wrap: wrap;
}
#footer p, #footer a{ color:#000; text-decoration:none; }
#footer a:hover{ color: var(--brand); }
#footer .about a, #footer .myaccount a{ display:block; padding: 8px 0; }
#footer .download img{ border: 1px solid #08817969; border-radius: 7px; }

footer .copy{
  background: rgba(255,255,255,0.84);
  padding: 16px; text-align:center; font-size:14px; color:#000;
}

/* ===============================
   Responsive Breakpoints
   =============================== */
@media (max-width: 992px){
  #hero h1, #hero h2{ font-size: 40px; }
  #hero h4{ font-size: 24px; }
}

@media (max-width: 799px){
  /* Show hamburger, hide desktop nav */
  .mobile{ display:flex; }
  .header-list{ display:none; }

  #hero{ height: 70vh; background-position: top 30% right 30%; }
}

/* Small devices */
@media (max-width: 480px){
  #newsletter{ justify-content:center; text-align:center; }
  #newsletter .form{ display:flex; justify-content:center; }
}



/* ====== General Reset ====== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  background: #fdfdfd;
  color: #333;
  line-height: 1.6;
}

/* ====== Header/Navbar ====== */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.header-logo h2 {
  font-size: 22px;
  color: #000;
}
.header-list ul {
  display: flex;
  list-style: none;
  gap: 20px;
}
.header-list ul li a {
  text-decoration: none;
  color: #000;
  font-weight: 500;
  transition: color 0.3s;
}
.header-list ul li a.active,
.header-list ul li a:hover {
  color: #088178;
}
.mobile {
  display: none;
  font-size: 24px;
  cursor: pointer;
}

/* ====== Mobile Nav Drawer ====== */
.nav-drawer {
  position: fixed;
  top: 0; right: -260px;
  width: 240px;
  height: 100%;
  background: #fff;
  box-shadow: -2px 0 10px rgba(0,0,0,.15);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: right 0.3s ease;
  z-index: 1200;
}
.nav-drawer.active {
  right: 0;
}
.nav-drawer a {
  text-decoration: none;
  color: #000;
  font-size: 16px;
}
#close {
  font-size: 22px;
  align-self: flex-end;
  cursor: pointer;
}
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: none;
  z-index: 1100;
}
.nav-overlay.active {
  display: block;
}

/* ====== Products ====== */
.section-p1 {
  padding: 40px 24px;
}
.pro-collection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.product-cart {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.product-cart:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,.1);
}
.product-cart img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}
.product-cart h4 {
  margin: 6px 0;
  font-size: 16px;
  color: #000;
}
.product-cart span {
  font-size: 13px;
  color: #666;
}
.stars {
  color: #f2a65a;
  margin: 4px 0;
}
.price {
  font-size: 18px;
  color: #000;
  margin-top: 6px;
}
.product-cart a {
  display: inline-block;
  margin-top: 8px;
  font-size: 20px;
  color: #000;
  transition: color 0.3s;
}
.product-cart a:hover {
  color: #f2a65a;
}

/* ====== Footer ====== */
footer {
  background: #fff;
  padding: 20px;
  margin-top: 40px;
  border-top: 1px solid #eee;
  text-align: center;
}
footer .copy {
  font-size: 14px;
  color: #555;
}

/* ====== Responsive ====== */
@media(max-width: 768px) {
  .header-list {
    display: none;
  }
  .mobile {
    display: block;
  }
}

@media(max-width: 480px) {
  .header-logo h2 {
    font-size: 18px;
  }
  .product-cart img {
    height: 160px;
  }
}