*{margin:0;padding:0;box-sizing:border-box}
:root {
  --cyan: #06b6d4;
  --blue: #2563eb;
  --dark: #0f172a;
  --text: #111827;
  --muted: #64748b;
  --border: #e5e7eb;
  --grad: linear-gradient(135deg, #06b6d4, #2563eb)
}
body{font-family:Inter,Arial,sans-serif;color:#111827;background:#fff;line-height:1.6}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

.btn{height:42px;padding:0 18px;border-radius:9px;background:linear-gradient(90deg,#06b6d4,#1763ef);color:#fff;font-weight:800;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{background:linear-gradient(90deg,#0891b2,#1d4ed8)}
.btn-primary{height:48px;padding:0 24px;border-radius:8px;background:linear-gradient(90deg,#06b6d4,#2563eb);color:#fff;font-size:15px;font-weight:700;display:inline-flex;align-items:center;gap:10px;transition:.3s;}
.btn-primary:hover{transform:translateY(-2px);}
.btn-outline{height:48px;padding:0 24px;border-radius:8px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);backdrop-filter:blur(10px);
color:#fff;font-size:15px;font-weight:700;display:inline-flex;align-items:center;gap:10px;}
.btn-outline:hover{background:rgba(255,255,255,.15);}
.container{width:min(1280px,92%);margin:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border-radius:12px;font-weight:700;transition:.3s;border:none;cursor:pointer}
.btn-primary{background:linear-gradient(135deg,#06b6d4,#2563eb);color:white;box-shadow:0 18px 35px rgba(6,182,212,.28)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 45px rgba(6,182,212,.4)}
.btn-glass{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:white;backdrop-filter:blur(10px)}
.section{padding:90px 0}
.section-title{text-align:center;margin-bottom:55px}
.section-title h2{font-size:clamp(32px,4vw,52px);line-height:1.1;margin-bottom:15px;color:#0f172a}
.section-title p{font-size:20px;color:#64748b;max-width:720px;margin:auto}

/* Navbar */
.navbar{position:fixed; padding:0; top:0;left:0;right:0;z-index:50;background:#fff;border-bottom:1px solid rgba(226,232,240,.7)}
.nav-inner{height:80px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;font-size:26px;font-weight:900;background:linear-gradient(135deg,#0891b2,#1d4ed8);-webkit-background-clip:text;color:transparent}
.logo-icon{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#22d3ee,#2563eb);display:grid;place-items:center;color:white;box-shadow:0 12px 30px rgba(34,211,238,.35)}
.nav-menu ul.mainul{display:flex;align-items:center;gap:30px;color:#334155;font-weight:600;list-style-type: none;
    padding: 0;
    margin: 0;}
.nav-menu a:hover,.nav-menu .active{color:#0891b2}
.nav-actions{display:flex;align-items:center;gap:15px}
.nav-contact{color:#334155;font-weight:700}
.menu-btn{display:none;font-size:28px;background:transparent;border:0;color:#0f172a}
.menusec {display: flex;align-items: center;gap: 30px;}
.cart-wrap {position: relative}
.cart-btn {display: flex;align-items: center;gap: 8px;padding: 10px 14px;border: 1px solid var(--border);background: #fff;border-radius: 12px;font-weight: 800;color: #0f172a;cursor: pointer}
.cart-count {width: 22px;height: 22px;border-radius: 999px;background: var(--grad);color: #fff;display: grid;place-items: center;font-size: 12px;}

.cart-dropdown {position: absolute;top: 100%;right: 0;margin-top:0px;width: 320px;background: #fff;border: 1px solid var(--border);border-radius: 18px;box-shadow: 0 22px 55px rgba(15, 23, 42, .15);padding: 16px;opacity: 0;visibility: hidden;transform: translateY(8px);transition: .2s}
.cart-wrap:hover .cart-dropdown,.cart-wrap.open .cart-dropdown {opacity: 1;visibility: visible;transform: translateY(0)}
.cart-title {display: flex;align-items: center;justify-content: space-between;font-weight: 800;margin-bottom: 12px}
.cart-item {display: flex;gap: 12px;padding: 12px 0;border-top: 1px solid #eef2f7}
.cart-thumb {width: 52px;height: 52px;border-radius: 12px;background: linear-gradient(135deg, #ecfeff, #dbeafe);display: grid;place-items: center;font-size: 22px;flex: none}
.cart-info strong {display: block;font-size: 14px}
.cart-info span {display: block;color: var(--muted);font-size: 13px}
.cart-total {display: flex;justify-content: space-between;font-weight: 800;border-top: 1px solid var(--border);padding-top: 14px;margin-top: 8px}
.cart-actions {display: grid;grid-template-columns: 1fr 1fr;gap: 10px;margin-top: 14px}
.cart-actions .btn-outline {border: 1px solid #0891b2;color: #0891b2;background: #fff}
.mobile-cart {margin-top: 12px;border: 1px solid var(--border);border-radius: 16px;padding: 14px;background: #f8fafc}
.mobile-cart h4 {margin: 0 0 10px;color: #0f172a}
.mobile-cart .cart-item {border-color: #e5e7eb}
.mobile-auth-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 10px}
.mobile-auth-grid a {text-align: center;border-radius: 12px;padding: 13px;font-weight: 800}
.mobile-auth-grid .login {border: 1px solid #cbd5e1}
.mobile-auth-grid .signup {background: var(--grad);color: #fff}
.menu-toggle {display: none;width: 44px;height: 44px;border: 0;background: #f1f5f9;border-radius: 12px;cursor: pointer;position: relative}
.menu-toggle span {position: absolute;left: 11px;right: 11px;height: 2px;background: #0f172a;border-radius: 4px;transition: .25s}
.menu-toggle span:nth-child(1) {top: 14px}
.menu-toggle span:nth-child(2) {top: 21px}
.menu-toggle span:nth-child(3) {top: 28px}
.menusec.active + .menu-toggle span:nth-child(1) {top: 21px;transform: rotate(45deg);}
.menusec.active + .menu-toggle span:nth-child(2) {opacity: 0}
.menusec.active + .menu-toggle span:nth-child(3) {top: 21px;transform: rotate(-45deg);}
/* Hero */
.hero{position:relative;min-height:94vh;display:flex;align-items:center;overflow:hidden;padding-top:90px;color:#fff;background:linear-gradient(135deg,rgba(12,74,110,.96),rgba(8,47,73,.93)),url('https://images.unsplash.com/photo-1666000346172-8e7e87547d2a?auto=format&fit=crop&w=1600&q=80') center/cover}
.hero:before,.hero:after{content:"";position:absolute;border-radius:999px;filter:blur(55px);opacity:.35}
.hero:before{width:220px;height:220px;background:#22d3ee;top:120px;right:10%}
.hero:after{width:260px;height:260px;background:#60a5fa;bottom:110px;left:8%}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.hero-grid .badge{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);padding:9px 16px;border-radius:999px;margin-bottom:28px;color:#cffafe}
.hero h1{font-size:clamp(44px,6vw,78px);line-height:1.02;margin-bottom:25px;letter-spacing:-2px}
.hero h1 span{display:block;background:linear-gradient(135deg,#67e8f9,#93c5fd);-webkit-background-clip:text;color:transparent}
.hero p{font-size:21px;color:#dbeafe;max-width:650px;margin-bottom:32px}
.hero-buttons{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:35px}
.hero-checks{display:flex;gap:25px;flex-wrap:wrap;color:#e0f2fe;font-weight:600}
.hero-checks span:before{content:"✓";color:#67e8f9;margin-right:8px;font-weight:900}
.hero-card{position:relative;border-radius:32px;overflow:hidden;box-shadow:0 30px 80px rgba(6,182,212,.24)}
.hero-card img{height:560px;width:100%;object-fit:cover}
.floating{position:absolute;background:rgba(255,255,255,.95);color:#0f172a;border-radius:20px;padding:16px 18px;display:flex;align-items:center;gap:13px;box-shadow:0 18px 40px rgba(15,23,42,.2)}
.floating b{display:block;font-size:20px}
.floating small{color:#64748b}
.float-top{top:28px;left:28px}
.float-bottom{right:28px;bottom:28px}
.float-icon{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#06b6d4,#2563eb);display:grid;place-items:center;color:white;font-weight:900}

/* Stats */
.stats{background:#f8fafc}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-bottom:60px}
.stat{text-align:center}
.stat-icon{width:68px;height:68px;border-radius:22px;background:linear-gradient(135deg,#06b6d4,#2563eb);display:grid;place-items:center;margin:0 auto 15px;color:white;font-size:28px}
.stat h3{font-size:34px;color:#0f172a}
.stat p{color:#64748b}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.cards{background:white;border:1px solid #e2e8f0;border-radius:22px;padding:28px;box-shadow:0 10px 28px rgba(15,23,42,.05);transition:.3s}
.cards:hover{transform:translateY(-6px);box-shadow:0 22px 45px rgba(15,23,42,.1)}
.stars{color:#facc15;font-size:20px;margin-bottom:14px}
.review-text{color:#475569;margin-bottom:20px}
.reviewer{border-top:1px solid #e2e8f0;padding-top:14px}
.reviewer b{display:block;color:#0f172a}
.reviewer span{color:#64748b;font-size:14px}

/* Features */
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}
.feature-icon{width:66px;height:66px;border-radius:22px;background:linear-gradient(135deg,#06b6d4,#2563eb);display:grid;place-items:center;color:white;font-size:28px;margin-bottom:24px}
.cards h3{font-size:22px;margin-bottom:12px;color:#0f172a}
.cards p{color:#64748b}

/* Problems */
.problems{background:linear-gradient(135deg,#f8fafc,#ecfeff)}
.problem-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:25px;max-width:980px;margin:auto}
.problem-card{display:flex;gap:20px;align-items:flex-start}
.problem-icon{width:54px;height:54px;flex:0 0 54px;border-radius:16px;background:linear-gradient(135deg,#06b6d4,#2563eb);display:grid;place-items:center;color:white;font-size:24px}
.bad{color:#ef4444;font-weight:900;margin-right:8px}
.good{color:#22c55e;font-weight:900;margin-right:8px}
.problem-card h3{margin-bottom:8px;color:#0f172a}
.problem-card p{color:#64748b}

/* CTA */
.cta{background:linear-gradient(135deg,#0891b2,#1e3a8a);color:white;text-align:center}
.cta h2{font-size:clamp(34px,5vw,56px);line-height:1.1;margin-bottom:18px}
.cta p{font-size:20px;color:#dbeafe;max-width:740px;margin:0 auto 30px}

/* Footer */
footer{background:linear-gradient(135deg,#0f172a,#172554,#0f172a);color:white; padding:70px 0 30px;}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:45px;padding:70px 0;}
footer p,footer a{color:#94a3b8}
footer a:hover{color:#22d3ee}
footer h4{margin-bottom:18px;font-size:18px}
.footer-links{display:grid;gap:10px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#94a3b8}
.socials{display:flex;gap:12px;margin-top:18px}
.socials a{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center}


/*products*/
.best-selling-section{padding:80px 0;background:#f7f8fa;font-family:Arial, sans-serif;}

.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:50px;flex-wrap:wrap;gap:20px;}
.section-header h2{font-size:42px;font-weight:700;color:#111;margin:0;}
.section-header select{padding:14px 22px;border:1px solid #ddd;border-radius:12px;background:#fff;font-size:16px;outline:none;cursor:pointer;    max-width: 150px;
padding: 0 10px;}
.products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;}
.product-card{background:#fff;border-radius:24px;overflow:hidden;transition:0.3s ease;box-shadow:0 10px 35px rgba(0,0,0,0.05);position:relative;}
.product-card:hover{transform:translateY(-8px);box-shadow:0 15px 40px rgba(0,0,0,0.12);}
.product-image{position:relative;background:#f5f7fb;}
.product-image img{width:100%;display:block;}
.product-card .badge{position:absolute;top:20px;left:20px;background:#111827;color:#fff;padding:8px 14px;border-radius:30px;font-size:13px;font-weight:600;}
.sale-badge{position:absolute;top:20px;left:20px;background:#ef4444;color:#fff;padding:8px 14px;border-radius:30px;font-size:13px;font-weight:700;}
.product-content{padding:20px;}
.product-content h3{font-size:22px;line-height:1.5;margin-bottom:18px;color:#111;}
.product-content .price{font-size:20px;font-weight:700;color:#1f74e7;margin:8px 0;}
.product-content .price del{color:#999;font-size:18px;margin-right:10px;}
.reviews{font-size:18px;color:#facc15;display:flex;align-items:center;gap:10px;}
.reviews span{color:#555;font-size:15px;}

@media(max-width:991px){
.products-grid{grid-template-columns:repeat(2,1fr);}
.section-header h2{font-size:34px;}
}
@media(max-width:767px){
.products-grid{grid-template-columns:1fr;}
.section-header{flex-direction:column;align-items:flex-start;}
.section-header h2{font-size:28px;}
}
/*end product*/

/* Filtration Solutions */
.solutions-section{padding:95px 20px;background:#fff}
.container{max-width:1215px;margin:0 auto}
.section-header2{text-align:center;margin-bottom:64px}
.section-header2 h2{font-size:48px;line-height:1.15;font-weight:800;color:#071834;margin-bottom:12px;letter-spacing:-.8px}
.section-header2 p{font-size:20px;color:#334155}
.solutions-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.solution-card{display:block;background:#fff;border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;min-height:390px;transition:.35s}
.solution-card:hover{transform:translateY(-5px);box-shadow:0 24px 45px rgba(15,23,42,.12)}
.image-box{position:relative;height:192px;overflow:hidden}
.image-box img{width:100%;height:100%;object-fit:cover;transition:.5s}
.solution-card:hover .image-box img{transform:scale(1.08)}
.image-box:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),transparent)}
.tag{position:absolute;top:18px;right:16px;z-index:2;background:#06b6d4;color:#fff;font-size:12px;font-weight:700;padding:5px 13px;border-radius:999px}
.card-content{padding:48px 24px 24px}
.card-content h3{font-size:20px;font-weight:700;color:#06152f;margin-bottom:9px}
.card-content p{font-size:16px;line-height:1.55;color:#334155;margin-bottom:16px;min-height:50px}
.learn-more{display:inline-flex;align-items:center;gap:9px;color:#0087b3;font-weight:700;font-size:16px}
.learn-more svg{width:20px;height:20px;transition:.3s}
.solution-card:hover .learn-more svg{transform:translateX(5px)}

/* Process Section */
.process-section{position:relative;overflow:hidden;padding:96px 20px;color:#fff;background:linear-gradient(135deg,#0f2238 0%,#172554 50%,#111c35 100%);}
.process-section:before{content:"";position:absolute;top:-130px;left:-120px;width:390px;height:390px;background:#06b6d4;opacity:.10;border-radius:50%;filter:blur(60px);}
.process-section:after{content:"";position:absolute;right:-120px;bottom:-130px;width:390px;height:390px;background:#2563eb;opacity:.12;
border-radius:50%;filter:blur(60px);}
.process-inner{position:relative;z-index:2}
.process-header{text-align:center;margin-bottom:64px}
.process-header h2{font-size:48px;line-height:1.15;font-weight:800;margin-bottom:12px;color:#fff;letter-spacing:-.8px;}
.process-header p{font-size:20px;color:#d1d5db}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.process-item{position:relative}
.process-item:not(:last-child):after{content:"";position:absolute;top:64px;left:100%;width:32px;height:2px;background:linear-gradient(to right,#06b6d4,transparent);z-index:1;}
.process-card{position:relative;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);border-radius:16px;padding:38px 32px 32px;min-height:310px;backdrop-filter:blur(10px);transition:.35s;}
.process-card:hover{background:rgba(255,255,255,.10);transform:translateY(-4px)}
.step-number{font-size:62px;line-height:1;font-weight:900;color:rgba(6,182,212,.27);margin-bottom:18px;letter-spacing:-2px;}
.step-icon{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#06b6d4,#2563eb);margin-bottom:28px;transition:.35s;}
.process-card:hover .step-icon{transform:scale(1.1)}
.step-icon svg{width:29px;height:29px}
.process-card h3{font-size:20px;line-height:1.3;font-weight:700;color:#fff;margin-bottom:14px}
.process-card p{font-size:16px;line-height:1.55;color:#d1d5db}

.faq-section{padding:100px 20px;background:#f8fafc;}
.faq-container{max-width:900px;margin:auto;}
.faq-header{text-align:center;margin-bottom:60px;}
.faq-header h2{font-size:56px;font-weight:800;color:#06152f;margin-bottom:12px;line-height:1.1;}
.faq-header p{font-size:22px;color:#475569;}
.faq-list{display:flex;flex-direction:column;gap:16px;}
.faq-item{background:#fff;border-radius:16px;overflow:hidden;border:1px solid #e2e8f0;box-shadow:0 2px 10px rgba(0,0,0,.04);}
.faq-question{width:100%;background:#fff;border:none;padding:24px 28px;display:flex;justify-content:space-between;align-items:center;
cursor:pointer;font-size:18px;font-weight:600;color:#06152f;text-align:left;}
.faq-question span{color:#64748b;transition:.3s;font-size:22px;}
.faq-item.active .faq-question span{transform:rotate(180deg);}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.faq-answer p{padding:0 28px 24px;color:#475569;line-height:1.7;}

/* Assessment Form Section */
.assessment-section{position:relative;overflow:hidden;padding:96px 20px;color:#fff;background:linear-gradient(135deg,#0899bd 0%,#147ee9 45%,#2359f4 100%);}
.assessment-bg{position:absolute;inset:0;opacity:.12;
background:url('images/bg.jfif') center/cover;
}
.assessment-wrap{position:relative;z-index:2;max-width:1120px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.assessment-content h2{font-size:48px;line-height:1.08;font-weight:800;margin-bottom:24px;letter-spacing:-.8px}
.assessment-content p{font-size:20px;line-height:1.55;color:#d9fbff;margin-bottom:36px;max-width:560px}
.benefits{display:flex;flex-direction:column;gap:18px}
.benefit{display:flex;align-items:center;gap:14px;font-size:18px}
.check-icon{width:23px;height:23px;border:2px solid #67e8f9;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#67e8f9;font-size:13px;font-weight:900;flex:0 0 23px}
.form-card{background:#fff;backdrop-filter:blur(12px);border-radius:13px;padding:32px;color:#111827;box-shadow:0 24px 60px rgba(15,23,42,.18)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.form-group{margin-bottom:22px}
.form-group label{display:block;font-size:14px;font-weight:700;color:#111827;margin-bottom:8px}
input,select,textarea{width:100%;border:1px solid #a7a7af;background:#f8fafc;border-radius:7px;padding:12px 14px;font-size:14px;color:#111827;outline:none;font-family:inherit}
input,select{height:42px}
textarea{height:64px;resize:none}
select{background:#f8fafc;border:1px solid #cbd5e1}
input:focus,select:focus,textarea:focus{border-color:#06b6d4;box-shadow:0 0 0 3px rgba(6,182,212,.18)}
.submit-btn{width:100%;height:40px;border:0;border-radius:7px;background:linear-gradient(90deg,#06b6d4,#1763ef);color:#fff;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px}
.submit-btn:hover{background:linear-gradient(90deg,#0891b2,#1d4ed8)}
.form-note{text-align:center;color:#6b7280;font-size:14px;margin-top:24px}

.ready-section{padding:50px 20px;background:#ffffff;}
.ready-card{max-width:1220px;margin:auto;overflow:hidden;border-radius:16px;background:linear-gradient(90deg,#08152f 0%,#16265f 50%,#08152f 100%);}
.ready-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;}
.ready-content{padding:50px 50px;}
.ready-content h2{font-size:56px;font-weight:800;line-height:1.1;color:#ffffff;margin-bottom:18px;letter-spacing:-1px;}
.ready-content p{font-size:26px;line-height:1.5;color:#d1d5db;margin-bottom:35px;max-width:520px;}
.ready-buttons{display:flex;gap:16px;flex-wrap:wrap;}

.ready-image img{width:100%;height:100%;object-fit:cover;display:block;}

@media(max-width:991px){
.ready-grid{grid-template-columns:1fr;}
.ready-image{height:300px;}
.ready-content{padding:40px 30px;}
.ready-content h2{font-size:40px;}
.ready-content p{font-size:20px;}
.menu-toggle {display: block}
}

@media(max-width:576px){
.ready-content h2{font-size:32px;}
.ready-content p{font-size:18px;}
.ready-buttons{flex-direction:column;}
.btn-primary,.btn-outline{width:100%;justify-content:center;}
}

@media(max-width:768px){
.faq-header h2{font-size:38px;}
.faq-header p{font-size:18px;}
.faq-question{font-size:16px;padding:20px;}
}
@media(max-width:1024px){
.solutions-grid,.process-grid{grid-template-columns:repeat(2,1fr)}
.process-item:after{display:none}
}
@media(max-width:600px){
.solutions-section,.process-section{padding:65px 16px}
.section-header h2,.process-header h2{font-size:34px}
.section-header p,.process-header p{font-size:17px}
.solutions-grid,.process-grid{grid-template-columns:1fr}
.card-content{padding-top:30px}
.assessment-section{padding:65px 16px}
}

@media(max-width:991px){
.menusec{display: none;}

.navbar{backdrop-filter: none; background:#fff;}
.menusec.active{display:block;background: #fff;position: fixed;left: 0;right: 0;bottom: 0;z-index: 999;top:82px;        overflow: auto;}
.nav-actions{padding: 20px;}
.cart-wrap{padding: 20px;}
.menu-btn{display:block}
.hero-grid{grid-template-columns:1fr}
.hero-card img{height:420px}
.stats-grid,.features-grid{grid-template-columns:repeat(2,1fr)}
.reviews,.footer-grid{grid-template-columns:1fr 1fr}
.problem-grid{grid-template-columns:1fr}
.nav-menu ul.mainul{flex-direction: column;align-items: self-start;gap:0px;}
nav.nav-menu a {display: block;padding: 10px 20px;}
.cart-btn{width:100%;}
.cart-dropdown {position: relative;top: 0;right: 0;margin-top: 0px;width: 100%;background: #fff;border: 1px solid var(--border);border-radius: 18px;
box-shadow: none;padding: 16px;opacity: 1;visibility: visible;transform: translateY(8px);transition: .2s;}
}
@media(max-width:640px){
.hero{padding:120px 0 60px}.hero h1{letter-spacing:-1px}
.hero-buttons{flex-direction:column}.btn{width:100%}
.stats-grid,.features-grid,.reviews,.footer-grid{grid-template-columns:1fr}
.footer-bottom{flex-direction:column}
.floating{position:static;margin:12px;border-radius:16px}
.hero-card img{height:330px}
}

/*===============================Product detail page==============================*/
.breadcrumb{padding:28px 0;color:#64748b;font-size:14px}
.breadcrumb a{color:#0891b2;font-weight:700}
.product-detail{padding:20px 0 80px}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:start}
.gallery,.product-info,.tabs-card{background:#fff;border:1px solid #e2e8f0;border-radius:18px;box-shadow:0 10px 30px rgba(15,23,42,.06)}
.gallery{padding:16px}
.main-image{height:500px;border-radius:14px;overflow:hidden;position:relative}
.main-image img{transition:.35s ease}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#06152f;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;box-shadow:0 8px 20px rgba(15,23,42,.18)}
.slider-arrow:hover{background:#06b6d4;color:#fff}
.prev-arrow{left:16px}
.next-arrow{right:16px}
.main-image img{width:100%;height:100%;object-fit:cover}
.product-detail .badge{position:absolute;top:18px;left:18px;background:#06b6d4;color:#fff;padding:7px 14px;border-radius:999px;font-size:13px;font-weight:800}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.thumb{height:92px;border-radius:10px;overflow:hidden;border:2px solid transparent;background:#e2e8f0}
.thumb.active{border-color:#06b6d4}
.thumb img{width:100%;height:100%;object-fit:cover}
.product-info{padding:34px}
.category{color:#0891b2;font-size:13px;font-weight:900;text-transform:uppercase;margin-bottom:10px}
.product-info h1{font-size:24px;line-height:1.1;margin-bottom:5px;color:#06152f;letter-spacing:-.8px}
.rating{display:flex;gap:10px;align-items:center;margin-bottom:5px;color:#64748b;font-size:15px}
.stars{color:#facc15;font-size:18px}
.desc{font-size:14px;line-height:1.5;color:#475569;margin-bottom:24px}
.price-box{display:flex;align-items:end;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.price{font-size:24px;font-weight:900;color:#06152f}
.old-price{text-decoration:line-through;color:#94a3b8;font-size:15px;margin-bottom:6px}
.save{background:#ecfeff;color:#0891b2;font-size:13px;font-weight:800;padding:7px 11px;border-radius:999px;margin-bottom:0px}
.option-title{font-size:15px;font-weight:800;margin-bottom:10px;color:#06152f}
.options{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.option{padding:10px 15px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:#334155;font-weight:700;cursor:pointer}
.option.active,.option:hover{border-color:#06b6d4;background:#ecfeff;color:#0891b2}
.qty-row{display:flex;gap:14px;align-items:center;margin-bottom:24px}
.qty{height:44px;width:120px;border:1px solid #cbd5e1;border-radius:10px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;background:#fff}
.qty button{width:38px;height:100%;border:0;background:#f1f5f9;font-size:18px;cursor:pointer}
.qty span{font-weight:800}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

.cart-btn{border:2px solid #06b6d4;color:#0891b2;background:#fff}
.cart-btn:hover{background:#ecfeff}
.buy-btn{border:0;color:#fff;background:linear-gradient(90deg,#06b6d4,#1763ef)}
.buy-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(23,99,239,.25)}
.note{font-size:14px;color:#64748b;text-align:center}
.trust-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.trust{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:14px;text-align:center}
.trust b{display:block;font-size:14px;color:#06152f;margin-bottom:4px}
.trust span{font-size:13px;color:#64748b}
.tabs-section{padding:0 0 80px}
.tabs-card{padding:34px}
.tabs{display:flex;gap:22px;border-bottom:1px solid #e2e8f0;margin-bottom:28px;overflow:auto}
.tab{padding:0 0 14px;font-weight:900;color:#64748b;min-width:max-content;background:transparent;border:0;cursor:pointer;font-size:16px}
.tab.active{color:#0891b2;border-bottom:3px solid #06b6d4}
.tab-panel{display:none}
.tab-panel.active{display:block}
.review-box{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:18px;margin-top:16px}
.review-box strong{display:block;color:#06152f;margin-bottom:8px}
.content-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.tabs-card h2{font-size:28px;margin-bottom:16px;color:#06152f}
.tabs-card p,.tabs-card li{color:#475569;line-height:1.7;font-size:16px}
ul{padding-left:20px}
.specs{display:grid;gap:12px}
.spec{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid #e2e8f0;padding-bottom:10px}
.spec strong{color:#06152f}
.related{padding:0 0 90px}
.section-title{text-align:center;margin-bottom:42px}
.section-title h2{font-size:38px;margin-bottom:10px}
.section-title p{color:#64748b;font-size:18px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.related-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;overflow:hidden;transition:.3s}
.related-card:hover{transform:translateY(-5px);box-shadow:0 18px 35px rgba(15,23,42,.10)}
.related-card img{height:190px;width:100%;object-fit:cover}
.related-card div{padding:20px}
.related-card h3{font-size:20px;margin-bottom:8px}
.related-card p{color:#64748b;margin-bottom:14px}
.small-btn{height:40px;border-radius:9px;background:linear-gradient(90deg,#06b6d4,#1763ef);color:#fff;font-size:14px;font-weight:800;display:inline-flex;align-items:center;padding:0 16px}
@media(max-width:980px){
.detail-grid,.content-grid{grid-template-columns:1fr}
.related-grid{grid-template-columns:1fr 1fr}
.related-grid h1{font-size:36px}.main-image{height:390px}
}
@media(max-width:600px){.product-info,.tabs-card{padding:24px}
    .actions,.trust-row,.related-grid{grid-template-columns:1fr}
    .thumbs{grid-template-columns:repeat(2,1fr)}
    .main-image{height:310px}h1{font-size:31px}
    .price{font-size:32px}
}


/*====================Product Detail==================*/
.products-page{background:#f8fafc}
.hero2{padding:95px 20px 75px;background:linear-gradient(135deg,#0899bd,#1763ef);color:#fff;text-align:center;position:relative;overflow:hidden;    margin-top: 80px;}
.hero2:before{content:"";position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1584982442479-16e4ac81adff?auto=format&fit=crop&w=1600&q=80') center/cover;opacity:.12}
.hero-inner{position:relative;z-index:2;max-width:850px;margin:auto}
.hero2 h1{font-size:56px;line-height:1.1;font-weight:800;margin-bottom:16px}
.hero2 p{font-size:21px;line-height:1.6;color:#e0faff}
.container{max-width:1215px;margin:auto;padding:0 20px}
.toolbar{margin-top:-34px;position:relative;z-index:3;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:18px;display:flex;gap:14px;justify-content:space-between;box-shadow:0 18px 40px rgba(15,23,42,.10)}
.search,.filter{height:46px;border:1px solid #cbd5e1;border-radius:10px;padding:0 14px;font-size:15px;background:#fff;color:#0f172a}
.search{flex:1}
.filter{width:210px}
.product-section{padding:70px 0 90px}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.product-card{background:#fff;border:1px solid #e2e8f0;border-radius:18px;overflow:hidden;box-shadow:0 8px 22px rgba(15,23,42,.05);transition:.35s}
.product-card:hover{transform:translateY(-6px);box-shadow:0 24px 45px rgba(15,23,42,.12)}
.product-img{height:230px;position:relative;overflow:hidden; display: block;}
.product-img img{width:100%;height:100%;object-fit:cover;transition:.5s}
.product-card:hover img{transform:scale(1.07)}
.product-card .badge{position:absolute;top:16px;left:16px;background:#06b6d4;color:#fff;padding:6px 13px;border-radius:999px;font-size:12px;font-weight:800}
.product-content{padding:24px}
.product-category{color:#0891b2;font-size:13px;font-weight:800;text-transform:uppercase;margin-bottom:8px}
.product-content h3{font-size:23px;line-height:1.25;margin-bottom:10px;color:#06152f}
.product-content p{font-size:15px;line-height:1.6;color:#475569;margin-bottom:18px}
.features{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.features span{font-size:12px;color:#334155;background:#f1f5f9;border-radius:999px;padding:6px 10px}
.price-row{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #e2e8f0;padding-top:18px}
.price small{display:block;color:#64748b;font-size:12px}
.price strong{font-size:24px;color:#06152f}

.cta-card{max-width:1215px;margin:auto;border-radius:18px;overflow:hidden;background:linear-gradient(90deg,#08152f,#172554,#08152f);color:#fff;display:grid;grid-template-columns:1.2fr .8fr;align-items:center}
.cta-content{padding:50px}
.cta-content h2{font-size:38px;margin-bottom:14px}
.cta-content p{font-size:19px;color:#d1d5db;margin-bottom:28px}
.cta-img{height:310px}
.cta-img img{width:100%;height:100%;object-fit:cover}


.product-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;}
.cart-btn{height:44px;border:2px solid #06b6d4;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#0891b2;background:#ffffff;transition:.3s; padding:0 10px;}
.cart-btn:hover{background:#ecfeff;}
.buy-btn{height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;
color:#ffffff;background:linear-gradient(90deg,#06b6d4,#1763ef);transition:.3s; padding:0 10px;}

.buy-btn:hover{
transform:translateY(-2px);
box-shadow:0 10px 25px rgba(23,99,239,.25);
}

@media(max-width:1024px){
  .product-grid{grid-template-columns:repeat(2,1fr)}.cta-card{grid-template-columns:1fr}.cta-img{height:260px}
}
@media(max-width:767px){
.hero h1{font-size:38px}
.hero p{font-size:17px}
.toolbar{flex-direction:column}
.filter{width:100%}.product-grid{grid-template-columns:1fr;}
.cta-content{padding:34px 24px}
.cta-content h2{font-size:30px}
.assessment-wrap{grid-template-columns:1fr;}
}