@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&family=Orbitron:wght@600&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Poppins',sans-serif;background:#fff;color:#041124;line-height:1.4}
header{position:sticky;top:0;z-index:120;background:rgba(10,30,60,0.95);display:flex;align-items:center;justify-content:space-between;padding:16px 28px;border-bottom:1px solid rgba(0,183,255,0.08)}
.brand{font-family:'Orbitron',sans-serif;color:#00b7ff;font-size:1.3rem;text-shadow:0 0 8px rgba(0,183,255,0.15)}
nav a{color:#fff;text-decoration:none;margin:0 10px;font-weight:600}
nav a:hover{color:#00b7ff}
.header-right{display:flex;align-items:center;gap:12px}
.cart-btn{background:#00b7ff;color:#fff;border:none;padding:8px 14px;border-radius:28px;cursor:pointer;position:relative;box-shadow:0 6px 18px rgba(0,183,255,0.18)}
.cart-count{position:absolute;top:-8px;right:-8px;background:#ff3b30;color:#fff;border-radius:50%;padding:2px 7px;font-size:0.75rem;font-weight:700}
/* Modal */
.cart-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.cart-content {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  width: 95%;
  max-width: 500px;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
}

.cart-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
}

.cart-content th, .cart-content td {
  border-bottom: 1px solid #ddd;
  padding: 6px;
  text-align: center;
}

.cart-content input[type="number"] {
  width: 50px;
}

/* Notification */
.cart-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #00c853;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  display: none;
  z-index: 10000;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  animation: fadeInOut 2.5s ease;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(-10px); }
  10%, 90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}


.search-input{padding:8px 12px;border-radius:20px;border:1px solid rgba(0,183,255,0.2);width:260px}
.hero{padding:90px 20px;text-align:center;background:linear-gradient(135deg,#f4fbff,#ffffff);background-size:200% 200%;animation:bgmove 8s ease-in-out infinite}
@keyframes bgmove{0%{background-position:0% 50%}100%{background-position:100% 50%}}
.hero h1{font-family:'Orbitron',sans-serif;color:#003366;font-size:2rem;margin-bottom:10px}
.hero p{color:#233243;margin-bottom:18px}
.container{max-width:1100px;margin:0 auto;padding:28px}
.section-title{font-family:'Orbitron',sans-serif;color:#003366;text-align:center;margin-bottom:18px;text-transform:uppercase}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.card{background:linear-gradient(180deg,rgba(240,248,255,0.95),rgba(255,255,255,0.9));border:1px solid rgba(0,183,255,0.12);padding:16px;border-radius:14px;box-shadow:0 8px 24px rgba(0,183,255,0.06);transition:transform .22s,box-shadow .22s}
.card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,183,255,0.12)}
.card h4{color:#002a4e;margin-bottom:8px}
.card p{margin-bottom:8px;color:#243244}
.btn{background:#00b7ff;color:#fff;border:none;padding:8px 12px;border-radius:10px;cursor:pointer;font-weight:700}
.small{font-size:0.9rem;color:#3b4b63}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.tab{padding:8px 12px;border-radius:12px;background:rgba(0,183,255,0.06);cursor:pointer;border:1px solid rgba(0,183,255,0.06)}
.tab.active{background:linear-gradient(90deg,#00b7ff,#0077b6);color:#fff;border-color:rgba(0,0,0,0.06)}
.footer{background:#001d3d;color:#fff;padding:28px;text-align:center;margin-top:36px}
.modal{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(2,6,23,0.6);display:none;align-items:center;justify-content:center;z-index:200}
.modal .box{background:#fff;padding:20px;border-radius:12px;max-width:820px;width:95%;max-height:85vh;overflow:auto}
.search-results{margin-top:12px}
.logo {display: flex;  align-items: center;}.brand-logo {  height: 50px;   /* adjust as needed */  width: auto;  cursor: pointer;  transition: transform 0.3s ease;}.brand-logo:hover { transform: scale(1.05);}
.blog{border-left:4px solid rgba(0,183,255,0.2);padding:14px;border-radius:8px;background:rgba(240,248,255,0.6)}

/* ========================= */
/* RESPONSIVE NAV + TOGGLER  */
/* ========================= */

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: #00b7ff;
  font-size: 28px;
  cursor: pointer;
}nav ul {  list-style: none;  display: flex;
  gap: 12px;
  margin: 0;
  paddi}nav ul li a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

/* --- Mobile Styles --- */
@media (max-width: 768px) {
  header {
    flex-direction: column;
    align-items: flex-start;
  }

  .menu-toggle {
    display: block;
    position: absolute;
    right: 15px;
    top: 15px;
  }

  #main-nav ul {
    display: none;
    flex-direction: column;
    width: 100%;
    background-color: #0b1a38;
    padding: 0;
  }

  #main-nav.active ul {
    display: flex;
  }

  #main-nav ul li {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 15px;
  }

  #main-nav ul li a {    display: block;    color: #fff;    text-align: left;  }  .header-right {    width: 100%;    margin-top: 10px;    display: flex;    flex-direction: column;    gap: 8px;  }  .search-input {    width: 100%;  }  .cart-btn {    align-self: flex-end;  }}


  /* ============================ */
/* SEARCH BAR + CART FIX STYLING */
/* ============================ */

/* --- Desktop Default --- */
.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.search-input {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 20px;
  width: 250px;
  outline: none;
  transition: all 0.3s ease;
}

.search-input:focus {
  border-color: #00b7ff;
  box-shadow: 0 0 5px rgba(0, 183, 255, 0.5);
}

.cart-btn {
  background: #00b7ff;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 20px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cart-btn:hover {
  background: #0095d9;
}

/* --- Mobile Layout Fix --- */
@media (max-width: 768px) {
  .header-right {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: 10px;
  }

  .search-input {
    width: 100%;
    font-size: 15px;
  }

  .cart-btn {
    width: 100%;
    justify-content: center;
    font-size: 16px;
  }
}
.payment-section {
  margin: 10px 0;
  display: flex;
  justify-content: space-around;
  font-weight: bold;
}

.checkout-btn {
  background: #007bff;
  color: #fff;
  border: none;
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  margin-top: 10px;
}

.checkout-btn:hover {
  background: #0056b3;
}