:root{
      --blue:#0b3d5c;            /* dark blue */
      --tan:#c2a878;             /* light brown */
      --tan-2:#b08c5a;           /* darker accent */
      --bg:#ffffff;              /* white */
      --muted:#f5f7fb;
      --text:#1b1e23;
      --ok:#31c48d;
      --warn:#f7b267;
      --danger:#ef6c6c;
      --shadow: 0 10px 30px rgba(11,61,92,.15);
      --radius: 18px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:Poppins, system-ui,-apple-system,Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text); background:linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    }
    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block}
    button{font-family:inherit}

    /* Utility */
    .container{max-width:1200px; margin-inline:auto; padding:0 20px}
    .grid{display:grid; gap:24px}
    .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
    @media (max-width:1024px){.grid-4{grid-template-columns:repeat(3,1fr)}}
    @media (max-width:768px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)} .grid-2{grid-template-columns:1fr}}
    @media (max-width:520px){.grid-3,.grid-4{grid-template-columns:1fr}}

    .btn{background:var(--blue); color:#fff; border:none; padding:12px 18px; border-radius:12px; cursor:pointer; font-weight:600; transition:.3s transform,.3s box-shadow,.3s background}
    .btn:hover{transform:translateY(-2px); box-shadow:var(--shadow); background:#0d4970}
    .btn.outline{background:transparent; border:2px solid var(--blue); color:var(--blue)}
    .chip{display:inline-block; padding:6px 10px; border-radius:999px; background:rgba(11,61,92,.08); color:var(--blue); font-weight:600; font-size:.85rem}
    .card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
    .badge{position:absolute; top:12px; left:12px; background:var(--tan); color:#fff; font-weight:700; padding:6px 10px; border-radius:999px; font-size:.8rem}
    .price{font-weight:800; color:var(--blue)}
    .hidden{display:none !important}

    /* Header */
    header{
      position:sticky; top:0; z-index:50; background:rgba(255,255,255,.8); backdrop-filter:blur(10px); border-bottom:1px solid #e8eef7;}
    .nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
    .brand{display:flex; align-items:center; gap:12px}
    .logo{width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:conic-gradient(from 210deg, var(--blue), #0e5b8b 55%, var(--tan)); color:#fff; font-weight:800}
    .brand h1{font-size:1.25rem; margin:0; letter-spacing:.3px}
    .nav a{font-weight:600; opacity:.85}
    .nav a:hover{opacity:1}
    .nav-links{display:flex; gap:18px; align-items:center}
    .actions{display:flex; gap:10px; align-items:center}
    .icon-btn{position:relative; background:#fff; border:1px solid #e6ecf5; border-radius:12px; padding:10px; display:grid; place-items:center; cursor:pointer; transition:.25s transform, .25s box-shadow}
    .icon-btn:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
    .count{position:absolute; top:-6px; right:-6px; background:var(--danger); color:#fff; font-size:.7rem; padding:3px 6px; border-radius:999px; font-weight:700}
    .mobile-menu{display:none}
    @media (max-width:900px){
      .nav-links{display:none}
      .mobile-menu{display:block}
    }

   /* Hero / Carousel */
    .hero {position: relative; width: 100vw; margin-left: calc(-50vw + 50%); height: 80vh; overflow: hidden;}
    .slides {display: flex; transition: transform 0.8s cubic-bezier(.22,.61,.36,1);}
    .slide {position: relative; min-width: 100%; height: 80vh; display: flex; align-items: center; justify-content: center; padding: 0;}
    .slide img.hero-img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;filter: brightness(0.6);}
    .slide > div {position: relative; z-index: 1; color: #fff; max-width: 600px; padding: 20px; text-align: left;}
    .slide h2 {font-size: 2.5rem; margin: 0.5rem 0;}
    .slide p {font-size: 1.1rem; margin-bottom: 15px; line-height: 1.4;}
    .slide .btn {margin-right: 10px; padding: 10px 20px; font-weight: bold; border-radius: 6px; text-decoration: none; display: inline-block; transition: background 0.3s;}
    .slide .btn.outline {background: transparent;  border: 2px solid #fff;  color: #fff;}
    .slide .btn:hover {  background-color: #fff;  color: #000;}
    .slide .btn.outline:hover {  background-color: #fff;  color: #000;}
    .slide .chip {  display: inline-block;  background-color: rgba(255, 255, 255, 0.85);  color: #3f3a3a;   font-weight: bold;  font-size: 0.9rem;  padding: 4px 10px;  border-radius: 12px;  margin-bottom: 8px;  text-transform: uppercase;  letter-spacing: 0.5px;}
    .dots {  position: absolute;  left: 50%;  bottom: 16px;  transform: translateX(-50%);  display: flex;  gap: 8px;  z-index: 2;}
    .dot {  width: 10px;  height: 10px;  border-radius: 50%;  background: rgba(255, 255, 255, 0.5);  cursor: pointer;}
    .dot.active {  background: #fff;}

/* Responsive */
@media (max-width: 768px) {.slide > div {text-align: center; max-width: 90%;}
.slide h2 {font-size: 1.8rem;}
.slide p { font-size: 0.95rem;}}

    /* Sections */
    section{padding:60px 0}
    .section-head{display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:20px}
    .title{font-size:1.8rem; margin:0}
    .subtitle{opacity:.8; margin:6px 0 0 0}

    /* Feature cards */
    .feature{padding:22px; display:flex; gap:16px; align-items:flex-start}
    .feature i{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:rgba(11,61,92,.1)}

    /* Product cards */
    .product{display:flex; flex-direction:column}
    .product .info{padding:14px}
    .stars{font-size:.9rem; color:#f5b301}
    .product .actions{margin-top:auto; justify-content:space-between}
    .thumb{aspect-ratio: 4 / 3; object-fit:cover}

    /* Filters */
    .filters{display:flex; flex-wrap:wrap; gap:12px; background:#fff; border:1px solid #e6ecf5; padding:14px; border-radius:16px}
    .filters select, .filters input{padding:10px 12px; border-radius:12px; border:1px solid #e6ecf5; outline:none}

    /* Why Us */
    .why{display:grid; grid-template-columns: 1fr 1fr; gap:28px; align-items:center}
    .why ul{margin:0; padding:0; list-style:none; display:grid; gap:14px}
    .why li{display:flex; align-items:center; gap:10px}
    .why li span{display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:rgba(11,61,92,.1)}
    @media (max-width:900px){.why{grid-template-columns:1fr}}

    /* Sliding Cart */
    .cart-panel{position:fixed; top:0; right:0; height:100%; width:min(420px, 92vw); background:#fff; border-left:1px solid #e6ecf5; box-shadow:-10px 0 30px rgba(0,0,0,.08); z-index:60; transform:translateX(110%); transition: transform .4s cubic-bezier(.22,.61,.36,1); display:flex; flex-direction:column}
    .cart-panel.open{transform:translateX(0)}
    .cart-head{padding:16px 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e6ecf5}
    .cart-items{flex:1; overflow:auto; padding:12px}
    .cart-item{display:grid; grid-template-columns:64px 1fr auto; gap:12px; padding:12px; border:1px solid #eef2f8; border-radius:14px; margin:10px 0}
    .qty{display:flex; align-items:center; gap:8px}
    .qty button{background:#f3f6fb; border:none; width:28px; height:28px; border-radius:8px; cursor:pointer; font-weight:700}
    .cart-foot{padding:16px; border-top:1px solid #e6ecf5}

    /* Checkout */
    .checkout{display:grid; grid-template-columns: 1.2fr .8fr; gap:22px}
    .card h3{margin:.2rem 0 1rem 0}
    .field{display:grid; gap:6px}
    .field input, .field select, .field textarea{padding:12px 14px; border-radius:12px; border:1px solid #e6ecf5}
    @media (max-width:900px){.checkout{grid-template-columns:1fr}}

    /* Footer */
footer {background-color: #0b3d5c; color: #fff;  padding: 40px 20px;  font-family: sans-serif;}
footer a {color: #fff;  text-decoration: none;  transition: color 0.3s;}
footer a:hover {color: #f5b301;}
footer .grid-3 {display: grid;  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));  gap: 24px;  align-items: start;}
footer .brand {  display: flex;  align-items: center;  gap: 12px;  margin-bottom: 12px;}
footer .brand .logo {  background-color: #f5b301;  color: #0b3d5c;  font-weight: bold;  font-size: 1.5rem;  width: 40px;  height: 40px;  display: grid;  place-items: center;  border-radius: 8px;}
footer #newsletter {  display: flex;  flex-wrap: wrap;  gap: 8px;  margin-top: 8px;}
footer #newsletter input {  flex: 1;  padding: 10px 14px;  border-radius: 12px;  border: none;  min-width: 180px;}
footer #newsletter .btn {  padding: 10px 16px;  border-radius: 12px;  cursor: pointer;}

/* Responsive tweaks */
@media (max-width: 768px) {
  footer {text-align: center;}
  footer .grid-3 {  grid-template-columns: 1fr;  gap: 20px;}
  footer #newsletter {  justify-content: center;}}

    /* Animations / On-scroll */
    .reveal{opacity:0; transform:translateY(18px); transition: .6s ease}
    .reveal.shown{opacity:1; transform:none}

    /* Section routing */
    .route{display:none}
    .route.active{display:block}
    .modal {position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,.6); z-index: 9999;}
    .modal.hidden { display: none; }
    .modal-content {background: #fff; padding: 20px; border-radius: 12px; max-width: 500px; width: 90%; box-shadow: 0 4px 10px rgba(0,0,0,.3); animation: fadeIn .3s ease;}
    .modal-content img { max-width: 100%; border-radius: 8px; margin-bottom: 12px;}
    .close { float: right; font-size: 28px; cursor: pointer;}

/* product details modal */
#product-details .modal-content {padding: 20px;}
#product-details .close {  float: right;  font-size: 22px; cursor: pointer;  color: var(--text);  background-color: #eee;  border-radius: 40%;  width: 30px;  height: 30px;  display: flex;  align-items: center;  justify-content: center;  transition: background-color 0.3s, color 0.3s;}
#product-details .close:hover {background-color: var(--blue);  color: #fff;}
#product-details h2 {font-size: 1.5rem; margin-bottom: 5px; color: var(--blue);}
#product-details img { border-radius: var(--radius); margin-bottom: 5px; box-shadow: var(--shadow); width: 400px; height: 187.5px; object-fit: cover;}
#product-details p {margin-bottom: 5px;  line-height: 1.4;  font-size: 0.9rem;}
#product-details .price {  font-size: 1.3rem;  margin-bottom: 5px;  display: block;}
.stars {  font-size: 1rem;  color: #f5b301;}

/* Quantity Selector */
.quantity-selector { display: flex; align-items: center; justify-content: flex-start; gap: 6px; margin-bottom: 10px; margin-top: 10px;}
.quantity-selector button { background-color: #f0f0f0; border: none; border-radius: 6px; color: #333; cursor: pointer; font-size: 0.9rem; font-weight: bold; line-height: 1; padding: 4px 8px; transition: background-color 0.3s;}
.quantity-selector button:hover { background-color: #ddd;}
.quantity-selector input {  border: 1px solid #ccc;  border-radius: 6px;  font-size: 0.9rem;  padding: 4px;  text-align: center;  width: 40px;}
.add-to-cart-container { display: flex; align-items: center; justify-content: center; margin-top: 8px;}
.add-to-cart-container .btn { width: auto; padding: 8px 12px; font-size: 0.9rem;}

/* Section Head */
.section-head {display: flex;  align-items: center; justify-content: space-between;  flex-wrap: wrap;  margin-bottom: 20px;}
.section-head h3.title {  font-size: 2rem;  margin: 0 0 5px 0;}
.section-head p.subtitle {  font-size: 1rem;  margin: 0;}
.section-head .btn.outline {  background: transparent;  border: 2px solid #FFD700;  padding: 8px 16px;  border-radius: 6px;  font-weight: bold;  text-decoration: none;  transition: all 0.3s ease;}
.section-head .btn.outline:hover {  background-color: #FFD700;  color: #000;}

/* Grid cards */
.grid.grid-4 {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));  gap: 20px;}

/* Feature cards */
.card.feature {  background-color: rgba(255, 255, 255, 0.05);  border-radius: 12px;  padding: 20px;  text-align: center;  transition: transform 0.3s ease, box-shadow 0.3s ease;  cursor: pointer;}
.card.feature:hover {  transform: translateY(-5px);  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);}
.card.feature i {  font-size: 2.5rem;  display: block;  margin-bottom: 10px;} /*icon*/
.card.feature h4 {  font-size: 1.2rem;  margin: 8px 0;}
.card.feature p {  font-size: 0.95rem; line-height: 1.4;}

/* Responsive adjustments */
@media (max-width: 768px) {
  .section-head {  flex-direction: column;  align-items: flex-start;  gap: 10px;}
  .card.feature h4 {  font-size: 1.1rem;}
  .card.feature p {  font-size: 0.9rem;}}

/* View all products button */
.section-head .btn.outline {  background: transparent;  border: 2px solid;  padding: 8px 16px;  border-radius: 6px;  font-weight: bold;  text-decoration: none;  transition: all 0.3s ease;}
.section-head .btn.outline:hover {  background-color: #1a3f7a;  color: #fff;}

/* Contact */
#contact input::placeholder,
#contact textarea::placeholder,
#contact select::placeholder { color: #000;  opacity: 0.7;}
#contact input::-webkit-input-placeholder,
#contact textarea::-webkit-input-placeholder,
#contact select::-webkit-input-placeholder {  color: #000;  opacity: 0.7;}
#contact input::-moz-placeholder,
#contact textarea::-moz-placeholder,
#contact select::-moz-placeholder {  color: #000;  opacity: 0.7;}
#contact input:-ms-input-placeholder,
#contact textarea:-ms-input-placeholder,
#contact select:-ms-input-placeholder {  color: #000;  opacity: 0.7;}
#contact input:-moz-placeholder,
#contact textarea:-moz-placeholder,
#contact select:-moz-placeholder {  color: #000;  opacity: 0.7;}

/* Send Button */
#contact button.btn { padding: 10px 16px;  font-weight: bold;  border-radius: 6px;  background-color: #1a3f7a;  color: #fff;  border: none;  cursor: pointer;  transition: background 0.3s ease;  margin-top: 12px;}
#contact button.btn:hover {  background-color: #16335a;}

/* PRODUCT DETAILS SECTION */
#product-details {  padding: 40px 20px;  font-family: 'Poppins', sans-serif;}
#details-body {  display: flex;  gap: 50px;  flex-wrap: wrap;  align-items: flex-start;}
.details-left {  flex: 1;  min-width: 300px;  text-align: center;  display: flex;  flex-direction: column;  align-items: center;  gap: 15px;}
.details-left .product-title {  font-size: 32px;  font-weight: 700;  margin-bottom: 0;  color: #111827;}
.details-left .product-image {  width: 100%;  max-width: 400px;  border-radius: 15px;  box-shadow: 0 12px 25px rgba(0,0,0,0.15);  transition: transform 0.3s ease, box-shadow 0.3s ease;}
.details-left .product-image:hover { transform: scale(1.05);  box-shadow: 0 15px 30px rgba(0,0,0,0.25);}
.details-right {  flex: 1;  min-width: 300px;  display: flex;  flex-direction: column;  gap: 20px;  background: #fff;  padding: 25px;  border-radius: 15px;  box-shadow: 0 12px 25px rgba(0,0,0,0.1);  transition: transform 0.3s ease, box-shadow 0.3s ease;}
.details-right:hover {  transform: translateY(-5px);  box-shadow: 0 15px 35px rgba(0,0,0,0.15);}
.details-right .product-details p {  margin: 10px 0;  font-size: 16px;  color: #374151;  line-height: 1.5;}
.details-right .product-details p strong {  color: #111827;  font-weight: 600;}
.stars {  color: #facc15; font-size: 18px; display: inline-block;}
.details-right .product-details p:last-child {  margin-top: 15px;  font-style: italic;  color: #6b7280;}
.quantity-selector {  display: flex; align-items: center;  gap: 10px;  margin-top: 20px;}
.quantity-selector label {  font-size: 14px;  font-weight: 600;  color: #111827;}
.quantity-selector input {  width: 80px;  text-align: center;  border: 2px solid #d1d5db;  border-radius: 10px;  padding: 6px;  font-size: 14px;  font-weight: 500;  transition: border-color 0.3s, box-shadow 0.3s;}
.quantity-selector input:focus {  outline: none;  border-color: #3b82f6;  box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);}
.add-to-cart-container .btn {  width: auto;  padding: 6px 14px;  font-weight: bold;  border-radius: 6px;  background-color: #1a3f7a;  border: none;  cursor: pointer;  font-family: 'Poppins', sans-serif;  font-size: 14px;  transition: background 0.3s ease, transform 0.3s ease;}
.add-to-cart-container .btn:hover {  background-color: #16335a;  transform: scale(1.05);}

/* Responsive */
@media (max-width: 900px) {
  #details-body { flex-direction: column;  gap: 30px;}
  .details-left, .details-right {  max-width: 100%;}}

/* Price under image */
.details-left .price { font-size: 26px; font-weight: 700; color: #146b48; margin-top: 15px; text-align: center;}

/*bundle modal*/
.modal {  position: fixed;  top: 0;  left: 0;  width: 100%;  height: 100%;  display: flex;  justify-content: center;  align-items: center;  background: rgba(0, 0, 0, .6);  z-index: 9999;}
.modal-content {  background: #fff;  padding: 20px;  border-radius: 12px;  max-width: 500px;  width: 90%;}
.close {  float: right;  font-size: 28px;  cursor: pointer;}
.route {  display: none;}
.route.active {  display: block;}
.logo img {  width: 100px;  height: auto;  display: block;}

/*signup link*/
.modal-link {color: var(--blue, #0e5b8b); text-decoration: underline; font-weight: 600; cursor: pointer; transition: opacity 0.2s ease;}
.modal-link:hover { opacity: 0.8;}

/*product grid*/
.grid.grid-4 {display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr));}

@media (min-width: 1025px) {#productGrid {display: grid; grid-template-columns: repeat(4, 1fr); justify-content: start;}}

/* Bundle Modal Specific Styles */
#bundleModal .modal-content {background: linear-gradient(135deg, var(--bg) 0%, var(--muted) 100%); padding: 20px; border-radius: var(--radius); max-width: 500px; width: 90%; box-shadow: var(--shadow); position: relative; max-height: 90vh; overflow-y: auto;}
#bundleModal .close {position: absolute; top: 15px; right: 15px; background-color: rgba(var(--blue-rgb), 0.1); color: var(--blue); border-radius: 50%; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; transition: background-color 0.3s, color 0.3s, transform 0.3s; border: none; cursor: pointer;}
#bundleModal .close:hover {background-color: var(--blue); color: #fff; transform: rotate(90deg);}
#bundle-details-body {text-align: center;}
#bundle-modal-title {font-size: 2.2rem; color: var(--blue); margin-bottom: 15px; font-weight: 800; letter-spacing: -0.5px; position: relative; padding-bottom: 8px;}
#bundle-modal-title::after {content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 60px; height: 4px; background-color: var(--tan); border-radius: 2px;}
#bundle-details-body .bundle-price-section {display: flex; justify-content: center; align-items: center; margin-top: 20px; margin-bottom: 20px; gap: 15px; padding: 12px 15px; background-color: rgba(var(--blue-rgb), 0.05); border-radius: 10px; border: 1px dashed rgba(var(--blue-rgb), 0.2);}
#bundle-details-body .bundle-price-section p {margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--text);}
#bundle-details-body .bundle-price-section .price {font-size: 1.8rem; color: var(--blue); font-weight: 900;}
#bundle-details-body h4 {font-size: 1.3rem; color: var(--blue); margin-top: 25px; margin-bottom: 12px; font-weight: 700; text-align: left; padding-left: 10px; border-left: 5px solid var(--tan);}
#bundle-details-body ul {list-style: none; padding: 0; margin: 0; max-height: 250px; overflow-y: auto; border: 1px solid var(--muted); border-radius: 10px; background-color: #fcfdff;}
#bundle-details-body .bundle-product-item {display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; border-bottom: 1px solid var(--muted); font-size: 1rem; color: var(--text); transition: background-color 0.2s ease;}
#bundle-details-body .bundle-product-item:last-child {border-bottom: none;}
#bundle-details-body .bundle-product-item:hover {background-color: rgba(var(--blue-rgb), 0.03);}
#bundle-details-body .item-details {display: flex; align-items: center; gap: 10px;}
#bundle-details-body .bundle-item-image {width: 60px; height: 60px; object-fit: cover; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); flex-shrink: 0;}
#bundle-details-body .add-bundle-to-cart-btn {margin-top: 25px; padding: 12px 25px; font-size: 1.1rem; font-weight: 700; border-radius: 12px; background-color: var(--blue); color: #fff; border: none; cursor: pointer; transition: background-color 0.3s ease, transform 0.3s ease; width: 100%; max-width: 250px; margin: 25px auto 0 auto;}
#bundle-details-body .add-bundle-to-cart-btn:hover {background-color: var(--tan-2); transform: translateY(-2px); box-shadow: var(--shadow);}

.hidden {
  display: none !important;
}