@import url("https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap");

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-thumb { background-color: #E3E6F3; border-radius: 4px; }

* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Spartan", sans-serif; }
html { scroll-behavior: smooth; }

h1 { font-size: 3.125rem; line-height: 4rem; color: #222; }
h2 { font-size: 2.875rem; line-height: 3.375rem; color: #222; }
h4 { font-size: 1.5rem; color: #222; }
h6 { font-weight: 700; font-size: 12px; }
p { font-size: 16px; color: #465b52; margin: 15px 0 20px 0; }

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

button.normal {
  font-size: 14px; font-weight: 600; padding: 15px 30px;
  color: #000; background-color: #fff; border-radius: 5px;
  cursor: pointer; border: none; outline: none; transition: all 0.3s ease;
}
button.white {
  font-size: 13px; font-weight: 600; padding: 11px 18px;
  color: #ffffff; background-color: transparent;
  cursor: pointer; border: 1px solid white; outline: none; transition: all 0.3s ease;
}
body { width: 100%; }

/* ===== HEADER ===== */
#Header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 80px; background-color: #E3E6F3;
  box-shadow: 0 5px 15px rgba(0,0,0,0.06);
  z-index: 999; position: sticky; top: 0; left: 0;
}
#navbar { display: flex; align-items: center; justify-content: center; }
#navbar li { list-style: none; padding: 0 20px; position: relative; }
#navbar li a { cursor: pointer; text-decoration: none; font-size: 1rem; font-weight: 600; color: #1a1a1a; transition: 0.3s ease; }
.head-Cart { font-size: 1.3rem; }
#navbar li a:hover, #navbar li a.active { color: #088178; }
#navbar li a:hover::after, #navbar li a.active::after {
  content: ""; width: 30%; height: 2px; background-color: #088178;
  position: absolute; bottom: -4px; left: 20px;
}
#mobile { display: none; align-items: center; }
#Close { display: none; }

/* Cart badge */
.cart-count {
  background: #088178; color: #fff; border-radius: 50%;
  font-size: 10px; padding: 1px 5px; margin-left: 2px;
  vertical-align: top; font-weight: 700;
}

/* ===== HERO SLIDER ===== */
#img-slider {
  height: 90vh; width: 100%; display: flex;
  justify-content: center; align-items: center;
  position: relative; overflow: hidden;
}
#img-slider .slide { z-index: 1; position: absolute; width: 100%; clip-path: circle(0% at 0 50%); }
#img-slider .slide.active { clip-path: circle(150% at 0 50%); transition: 2s; transition-property: clip-path; }
#img-slider .slide img {
  z-index: 1; width: 100vw; height: 110vh; border-radius: 5px;
  object-fit: cover; position: relative; object-position: top 25% right; margin-top: 100px;
}
#img-slider .slide .info {
  z-index: 2; display: flex; flex-direction: column;
  position: absolute; top: 50%; transform: translateY(-50%);
  padding: 20px 80px; gap: 10px;
}
#img-slider .slide .info h4 { font-size: 16px; font-weight: 700; color: #088178; }
#img-slider .slide .info h2 { font-size: 60px; font-weight: 800; color: #222; line-height: 1; }
#img-slider .slide .info h1 { font-size: 90px; font-weight: 900; color: #222; }
#img-slider .slide .info p { font-size: 16px; color: #465b52; }
#img-slider .slide .info button { max-width: 200px; }
.slide-navigation { position: absolute; bottom: 30px; display: flex; gap: 8px; z-index: 10; }
.slide-navigation .btn {
  width: 12px; height: 12px; background: rgba(0,0,0,0.3);
  border-radius: 50%; cursor: pointer; transition: 0.3s;
}
.slide-navigation .btn.active { background: #088178; }
.select-none { user-select: none; }

/* ===== FEATURES ===== */
#feature {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; background: #E3E6F3;
}
#feature .fe-box {
  width: 160px; text-align: center; padding: 25px 15px;
  box-shadow: 0 0 5px #ccc; border-radius: 4px; margin: 5px 0;
  cursor: default;
}
#feature .fe-box:hover { box-shadow: 0 0 12px #088178; }
#feature .fe-box img { width: 100px; margin-bottom: 10px; }
#feature .fe-box h6 { font-size: 14px; color: #555; }

/* ===== PRODUCTS ===== */
#product1 { text-align: center; }
#product1 h2 { font-size: 2rem; padding: 20px 0 10px; }
#product1 p { font-size: 14px; margin-bottom: 30px; }
.pro-container { display: flex; justify-content: space-between; padding-top: 20px; flex-wrap: wrap; }
.pro {
  width: 23%; min-width: 220px; padding: 10px 12px;
  border: 1px solid #eee; border-radius: 25px;
  cursor: pointer; box-shadow: 0 0 10px rgba(0,0,0,0.05);
  position: relative; overflow: hidden; margin: 10px 0;
  transition: 0.3s ease;
}
.pro:hover { box-shadow: 0 0 20px rgba(8,129,120,0.3); }
.pro img { width: 100%; border-radius: 20px; }
.pro .des { text-align: left; padding: 10px 0; }
.pro .des span { color: #606063; font-size: 12px; }
.pro .des h5 { padding: 7px 0; font-size: 14px; font-weight: 700; }
.pro .des h4 { font-size: 15px; color: #088178; font-weight: 700; }
.pro .des .star { color: #edac15; }
.pro .cart {
  width: 40px; height: 40px; line-height: 40px; border-radius: 50%;
  background-color: #e8f6f5; font-size: 17px; color: #088178;
  text-align: center; position: absolute; bottom: 20px; right: 10px;
  transition: 0.3s ease;
}
.pro .cart:hover { background-color: #088178; color: #fff; }

/* ===== BANNER ===== */
#banner {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; background-image: url(../img/banner/b10.jpg);
  background-position: 40%; width: 100%; height: 40vh; background-size: cover;
}
#banner h4 { color: #fff; font-size: 16px; }
#banner h2 { color: #fff; font-size: 40px; }
#banner h2 span { color: #f5ba31; }
#banner button { margin-top: 20px; }

/* ===== SM BANNER ===== */
#sm-banner {
  display: flex; justify-content: space-evenly;
  flex-wrap: wrap; padding: 0 80px;
}
.bannner-box {
  width: 49%; height: 280px; display: flex; flex-direction: column;
  justify-content: center; padding: 40px;
  background-color: #d4e4e1; background-size: cover;
  background-position: center;
}
.bannner-box:first-child { background-image: url('../img/banner/b17.jpg'); }
.bannner-box:last-child { background-image: url('../img/banner/b19.jpg'); }
.bannner-box h4 { color: #fff; font-size: 14px; }
.bannner-box h2 { color: #fff; font-size: 28px; margin: 8px 0; }
.bannner-box span { color: #fff; font-size: 14px; }
.bannner-box button { margin-top: 15px; }

/* ===== BANNER3 ===== */
#banner3 {
  display: flex; justify-content: space-evenly;
  flex-wrap: wrap; padding: 0 80px; gap: 20px; margin: 40px 0;
}
.banner-box {
  width: 30%; height: 200px; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 20px; background-size: cover;
  background-position: center; cursor: pointer;
}
#banner3 .banner-box:nth-child(1) { background-image: url('../img/banner/b1.jpg'); }
#banner3 .banner-box:nth-child(2) { background-image: url('../img/banner/b2.jpg'); }
#banner3 .banner-box:nth-child(3) { background-image: url('../img/banner/b7.jpg'); }
.banner-box h4 { color: #fff; font-size: 12px; }
.banner-box h3 { color: #fff; font-size: 18px; }

/* ===== NEWSLETTER ===== */
#newsletter {
  display: flex; align-items: center; justify-content: space-between;
  background-color: #041e42; flex-wrap: wrap;
}
.newstext h4 { color: #fff; font-size: 22px; }
.newstext p { color: #818ea0; }
.newstext p span { color: #f5ba31; }
.form { display: flex; }
.form input {
  font-size: 16px; padding: 18px 25px; outline: none; border: none;
  width: 350px; border-radius: 4px 0 0 4px;
}
.form button { border-radius: 0 4px 4px 0; padding: 17px 25px; }

/* ===== FOOTER ===== */
footer {
  display: flex; align-items: baseline;
  flex-wrap: wrap; row-gap: 30px;
  background-color: #041e42; padding: 60px 80px;
}
footer .col { display: flex; flex-direction: column; align-items: flex-start; }
footer .col .logo { margin-bottom: 30px; filter: brightness(10); width: 120px; }
footer .col p { font-size: 14px; color: #818ea0; margin: 0; }
footer .col h4 { color: #fff; font-size: 16px; margin-bottom: 15px; }
footer .col a {
  font-size: 14px; text-decoration: none; color: #818ea0;
  margin-bottom: 10px; transition: 0.3s;
}
footer .col a:hover { color: #088178; }
footer .col:nth-child(1) { flex-basis: 30%; }
footer .col:nth-child(2) { flex-basis: 15%; }
footer .col:nth-child(3) { flex-basis: 15%; }
footer .col:nth-child(4) { flex-basis: 35%; }
footer .col .follow { margin-top: 15px; }
footer .col .follow h4 { margin-top: 10px; }
footer .col .icon { display: flex; gap: 15px; }
footer .col .icon i { font-size: 22px; color: #818ea0; cursor: pointer; transition: 0.3s; }
footer .col .icon i:hover { color: #088178; }
footer .col.install .row { display: flex; gap: 10px; margin: 10px 0; }
footer .col.install .row img { width: 120px; border-radius: 6px; }
footer .col.install img:last-child { margin-top: 15px; width: 200px; }
footer .copyright {
  width: 100%; text-align: center; color: #818ea0;
  font-size: 14px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
footer .logo-text {
  font-size: 28px; font-weight: 900; color: #fff;
  letter-spacing: 3px; margin-bottom: 15px;
}
footer .logo-text span { color: #088178; }

/* ===== PAGE HEADER ===== */
#page-header {
  background-image: url('../img/banner/b4.jpg');
  background-size: cover; background-position: center;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; height: 50vh; text-align: center;
}
#page-header.about-header { background-image: url('../img/about/banner.png'); }
#page-header h2 { font-size: 50px; font-weight: 900; color: #fff; }
#page-header p { color: #fff; font-size: 18px; }

/* ===== TOAST ===== */
#toast {
  position: fixed; bottom: 30px; right: 30px;
  background: #088178; color: #fff;
  padding: 14px 24px; border-radius: 8px;
  font-size: 14px; font-weight: 600;
  z-index: 9999; opacity: 0; transform: translateY(20px);
  transition: all 0.4s ease; pointer-events: none;
}
#toast.show { opacity: 1; transform: translateY(0); }

/* ===== POLICY MODAL ===== */
.policy-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.7); z-index: 10000;
  align-items: center; justify-content: center;
}
.policy-modal-overlay.active { display: flex; }
.policy-modal {
  background: #fff; border-radius: 12px; max-width: 800px;
  width: 90%; max-height: 80vh; overflow-y: auto; padding: 40px;
  position: relative;
}
.policy-modal h2 { font-size: 1.8rem; margin-bottom: 20px; color: #088178; }
.policy-modal h3 { font-size: 1.1rem; margin: 20px 0 8px; color: #222; }
.policy-modal p, .policy-modal li { font-size: 14px; color: #555; line-height: 1.7; }
.policy-modal ul { padding-left: 20px; margin-bottom: 15px; }
.policy-modal-close {
  position: absolute; top: 15px; right: 20px;
  font-size: 24px; cursor: pointer; color: #555;
  background: none; border: none; line-height: 1;
}
.policy-modal-close:hover { color: #088178; }