/* ═══════════════════════════════════════════
   CSS VARIABLES
═══════════════════════════════════════════ */
:root {
   --primary: #0a6e6e;
   --primary-dark: #074f4f;
   --primary-light: #e6f5f5;
   --accent: #1a9a8a;
   --gold: #c8962e;
   --navy: #0d2240;
   --navy-light: #1a3a5c;
   --text: #1a1a2e;
   --text-muted: #6b7280;
   --border: #e2e8f0;
   --bg-light: #f8fafc;
   --white: #ffffff;
   --font-h: 'Playfair Display', Georgia, serif;
   --font-b: 'Lato', Arial, sans-serif;
   --r: 8px;
   --s1: 0 2px 8px rgba(0, 0, 0, .06);
   --s2: 0 4px 20px rgba(0, 0, 0, .10);
   --s3: 0 8px 40px rgba(0, 0, 0, .14);
   --ease: all .25s ease;
}

/* ═══════════════════════════════════════════
   DARK MODE
═══════════════════════════════════════════ */
body.dark {
   --primary: #12b8b6;
   --primary-dark: #0a8f8d;
   --primary-light: #0d2e2e;
   --accent: #1fd1bf;
   --navy: #0a0f1e;
   --navy-light: #111827;
   --text: #e2e8f0;
   --text-muted: #94a3b8;
   --border: #1e2d3d;
   --bg-light: #111827;
   --white: #0f172a;
}

body.dark {
   color: #e2e8f0;
   background: #0f172a;
}

body.dark .main-navbar {
   background: #0f172a;
   border-color: #1e2d3d;
}

body.dark .brand-text-main {
   color: #e2e8f0;
}

body.dark .nav-link-c {
   color: #cbd5e1 !important;
}

body.dark .nav-link-c:hover,
body.dark .nav-link-c.on {
   color: #ffffff !important;
}

body.dark .topbar {
   background: #060c18;
}

body.dark .page-hero {
   background: linear-gradient(135deg, #060c18 0%, #0d1f36 60%, #0a4040 100%);
}

body.dark .sec-title {
   color: #e2e8f0;
}

body.dark .sec-desc {
   color: #94a3b8;
}

body.dark .sec-tag {
   color: var(--accent);
   border-color: var(--accent);
}

body.dark .divider {
   background: var(--accent);
}

body.dark .about-sec {
   background: #111827;
}

body.dark .products-sec {
   background: #0f172a;
}

body.dark .about-img-wrap img {
   opacity: .88;
}

body.dark .feat-text h6 {
   color: #e2e8f0;
}

body.dark .feat-text p {
   color: #94a3b8;
}

body.dark .feat-icon {
   background: #1e293b;
}

body.dark .prod-card {
   background: #1e293b;
   border-color: #2d3f52;
}

body.dark .prod-card-body h5 {
   color: #e2e8f0;
}

body.dark .prod-card-body p {
   color: #94a3b8;
}

body.dark .prod-card-img {
   background: #0f172a;
}

body.dark .prod-tag {
   background: #1e293b;
   color: var(--accent);
}

body.dark .hero-img-card {
   background: rgba(255, 255, 255, .04);
   border-color: rgba(255, 255, 255, .08);
}

body.dark .icon-box {
   background: rgba(255, 255, 255, .05);
   border-color: rgba(255, 255, 255, .08);
}

body.dark .about-main {
   background: #0f172a;
}

body.dark .vm-card {
   background: #1e293b;
   border-color: #2d3f52;
}

body.dark .vm-card h5 {
   color: #e2e8f0;
}

body.dark .vm-card p {
   color: #94a3b8;
}

body.dark .stat-box {
   background: #1e293b;
   border-color: #2d3f52;
}

body.dark .stat-box .big-num {
   color: var(--accent);
}

body.dark .stat-box .stat-lbl {
   color: #94a3b8;
}

body.dark .values-sec {
   background: #111827;
}

body.dark .value-num {
   color: var(--accent);
}

body.dark .value-content h6 {
   color: #e2e8f0;
}

body.dark .value-content p {
   color: #94a3b8;
}

body.dark .cert-badge {
   background: #1e293b;
   border-color: #2d3f52;
}

body.dark .cert-badge strong {
   color: #e2e8f0;
}

body.dark .cert-badge span {
   color: #94a3b8;
}

body.dark .cert-badge .bi {
   color: var(--accent);
}

body.dark .contact-main {
   background: #0f172a;
}

body.dark .contact-card {
   background: #1e293b;
   border-color: #2d3f52;
}

body.dark .contact-card h6 {
   color: #e2e8f0;
}

body.dark .contact-card p {
   color: #94a3b8;
}

body.dark .contact-card a {
   color: var(--accent);
}

body.dark .contact-icon {
   background: #1e293b;
   color: var(--accent);
}

body.dark .contact-form-sec {
   background: #1e293b;
   border-color: #2d3f52;
}

body.dark .ftr-contact-item span {
   color: #94a3b8;
}

body.dark .ftr-contact-item span strong {
   color: #e2e8f0 !important;
}

body.dark .ftr-contact-item a {
   color: var(--accent) !important;
}

body.dark .form-label {
   color: #e2e8f0;
}

body.dark .form-control,
body.dark .form-select {
   background: #111827;
   border-color: #2d3f52;
   color: #e2e8f0;
}

body.dark .form-control::placeholder {
   color: #475569;
}

body.dark .form-select option {
   background: #111827;
   color: #e2e8f0;
}

body.dark .prod-detail {
   background: #0f172a;
}

body.dark .pd-img-main {
   background: #1e293b;
   border-color: #2d3f52;
}

body.dark .pd-title {
   color: #e2e8f0;
}

body.dark .pd-pack {
   color: #94a3b8;
}

body.dark .pd-badge-type {
   background: #1e293b;
   color: var(--accent);
}

body.dark .pd-sec-title {
   color: #e2e8f0;
}

body.dark .pd-desc {
   color: #94a3b8;
}

body.dark .pd-list li {
   color: #e2e8f0;
}

body.dark .pd-side-card {
   background: #1e293b;
   border-color: #2d3f52;
}

body.dark .pd-side-card h6 {
   color: #e2e8f0;
}

body.dark .pd-info-row {
   border-color: #2d3f52;
}

body.dark .pd-info-row .k {
   color: #94a3b8;
}

body.dark .pd-info-row .v {
   color: #e2e8f0;
}

body.dark .back-link {
   color: var(--accent);
}

body.dark .products-main {
   background: #0f172a;
}

body.dark .filter-btn {
   border-color: var(--accent);
   color: var(--accent);
   background: rgba(26, 154, 138, .08);
}

body.dark .filter-btn:hover {
   background: rgba(26, 154, 138, .18);
   color: #fff;
   box-shadow: 0 8px 28px rgba(26, 154, 138, .4), 0 0 0 2px var(--accent);
}

body.dark .filter-btn.on {
   background: var(--accent);
   color: #0a0f1e;
   border-color: var(--accent);
   box-shadow: 0 8px 32px rgba(26, 154, 138, .55), 0 0 24px rgba(26, 154, 138, .4);
}

body.dark .quote-main {
   background: #0f172a;
}

body.dark .quote-form-card {
   background: #1e293b;
   border-color: #2d3f52;
}

body.dark .main-footer {
   background: #060c18;
}

body.dark .footer-brand p {
   color: #94a3b8;
}

body.dark .ftr-head {
   color: #e2e8f0;
}

body.dark .ftr-links a {
   color: rgba(255, 255, 255, .65);
}

body.dark .ftr-links a:hover {
   color: #7fdfd5;
}

body.dark .ftr-cat-label {
   color: var(--accent);
}

body.dark .footer-bottom {
   color: rgba(255, 255, 255, .45);
   border-color: rgba(255, 255, 255, .06);
}

body.dark #top-btn {
   background: #1e293b;
}

body.dark .map-frame {
   border-color: #2d3f52;
}

/* ═══════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════ */
*,
*::before,
*::after {
   box-sizing: border-box;
}

body {
   font-family: var(--font-b);
   color: var(--text);
   background: var(--white);
   margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--font-h);
}

a {
   text-decoration: none;
}

img {
   max-width: 100%;
}

ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

/* ═══════════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════════ */
@keyframes pageEnter {
   0% {
      opacity: 0;
      transform: translateY(32px) scale(.982)
   }

   55% {
      opacity: 1
   }

   100% {
      opacity: 1;
      transform: translateY(0) scale(1)
   }
}

@keyframes heroUp {
   from {
      opacity: 0;
      transform: translateY(26px)
   }

   to {
      opacity: 1;
      transform: translateY(0)
   }
}

@keyframes shimmer {
   0% {
      background-position: 200% 0
   }

   100% {
      background-position: -200% 0
   }
}

@keyframes logoBounce {
   0% {
      transform: scale(1) rotate(0)
   }

   25% {
      transform: scale(1.18) rotate(-10deg)
   }

   55% {
      transform: scale(.95) rotate(6deg)
   }

   80% {
      transform: scale(1.07) rotate(-3deg)
   }

   100% {
      transform: scale(1) rotate(0)
   }
}

@keyframes ripple {
   to {
      transform: scale(4);
      opacity: 0
   }
}

@keyframes filterPop {
   0% {
      transform: scale(1)
   }

   45% {
      transform: scale(.93)
   }

   100% {
      transform: scale(1)
   }
}

@keyframes pulse {

   0%,
   100% {
      box-shadow: 0 0 0 0 rgba(26, 154, 138, .4)
   }

   70% {
      box-shadow: 0 0 0 10px rgba(26, 154, 138, 0)
   }
}

@keyframes badgeNumIn {
   from {
      opacity: 0;
      transform: scale(.5) rotate(-8deg)
   }

   to {
      opacity: 1;
      transform: scale(1) rotate(0deg)
   }
}

/* ═══════════════════════════════════════════
   LOADER BAR
═══════════════════════════════════════════ */
#loader {
   position: fixed;
   top: 0;
   left: 0;
   height: 3px;
   width: 0%;
   background: linear-gradient(90deg, var(--accent), #7fdfd5, var(--accent));
   background-size: 200% 100%;
   z-index: 9999;
   opacity: 0;
   animation: shimmer 1.4s linear infinite;
   border-radius: 0 3px 3px 0;
   box-shadow: 0 0 12px rgba(26, 154, 138, .7);
}

/* ═══════════════════════════════════════════
   HERO ANIMATIONS
═══════════════════════════════════════════ */
.hero-tag {
   animation: heroUp .62s cubic-bezier(.22, 1, .36, 1) .10s both;
}

.hero-title {
   animation: heroUp .68s cubic-bezier(.22, 1, .36, 1) .22s both;
}

.hero-sub {
   animation: heroUp .68s cubic-bezier(.22, 1, .36, 1) .34s both;
}

.hero-cta {
   animation: heroUp .68s cubic-bezier(.22, 1, .36, 1) .44s both;
}

.hero-stats {
   animation: heroUp .68s cubic-bezier(.22, 1, .36, 1) .54s both;
}

.hero-card {
   animation: heroUp .88s cubic-bezier(.22, 1, .36, 1) .28s both;
}

.page-hero-title {
   animation: heroUp .6s cubic-bezier(.22, 1, .36, 1) .1s both;
}

.page-hero-sub {
   animation: heroUp .6s cubic-bezier(.22, 1, .36, 1) .22s both;
}

.breadcrumb-c {
   animation: heroUp .5s cubic-bezier(.22, 1, .36, 1) .4s both;
}

/* ═══════════════════════════════════════════
   TOP BAR
═══════════════════════════════════════════ */
.topbar {
   background: var(--navy);
   color: rgba(255, 255, 255, .8);
   font-size: .8rem;
   padding: 8px 0;
}

.topbar a {
   color: rgba(255, 255, 255, .8);
}

.topbar a:hover {
   color: #fff;
}

.topbar .bi {
   color: var(--accent);
   margin-right: 5px;
}

/* ═══════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════ */
.main-navbar {
   background: #fff;
   border-bottom: 2px solid var(--primary-light);
   position: sticky;
   top: 0;
   z-index: 1050;
   box-shadow: 0 2px 16px rgba(0, 0, 0, .07);
}
.main-navbar .navbar-brand{
    width: 35%;
}
.brand-wrap {
   display: flex;
   align-items: center;
   gap: 12px;
   width: 100px;
}

.brand-circle {
   width: 52px;
   height: 52px;
   background: linear-gradient(135deg, var(--primary), var(--accent));
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-h);
   font-size: 1.1rem;
   font-weight: 700;
   color: #fff;
   transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
   flex-shrink: 0;
}

.navbar-brand:hover .brand-circle {
   transform: rotate(-8deg) scale(1.12);
   box-shadow: 0 6px 20px rgba(10, 110, 110, .45);
}

.brand-circle.bouncing {
   animation: logoBounce .55s cubic-bezier(.34, 1.56, .64, 1) forwards;
}

.brand-text-main {
   font-family: var(--font-h);
   font-size: 1.35rem;
   font-weight: 700;
   color: var(--navy);
   line-height: 1.1;
}

.brand-text-sub {
   font-size: .65rem;
   text-transform: uppercase;
   letter-spacing: .12em;
   color: var(--primary);
   font-family: var(--font-b);
}

.nav-link-c {
   font-family: var(--font-b);
   font-weight: 700;
   font-size: .82rem;
   text-transform: uppercase;
   letter-spacing: .08em;
   color: var(--navy) !important;
   padding: 8px 14px !important;
   transition: color .2s ease;
   position: relative;
}

.nav-link-c::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 14px;
   right: 14px;
   height: 2px;
   background: var(--primary);
   transform: scaleX(0);
   transition: transform .22s ease;
   transform-origin: center;
}

.nav-link-c:hover,
.nav-link-c.on {}

.nav-link-c:hover::after,
.nav-link-c.on::after {
   transform: scaleX(1);
}

.btn-quote {
   background: var(--primary);
   color: #fff !important;
   font-weight: 700;
   font-size: .78rem;
   text-transform: uppercase;
   letter-spacing: .08em;
   padding: 9px 22px !important;
   border-radius: 4px;
   transition: background .25s, transform .28s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s;
}

.btn-quote::after {
   display: none !important;
}

.btn-quote:hover {
   background: var(--primary-dark) !important;
   transform: translateY(-2px) !important;
   box-shadow: 0 4px 14px rgba(10, 110, 110, .35);
}

/* ═══════════════════════════════════════════
   HERO SECTION
═══════════════════════════════════════════ */
.hero-section {
   background: linear-gradient(135deg, var(--navy) 0%, #0d3a5c 40%, var(--primary-dark) 100%);
   min-height: 86vh;
   display: flex;
   align-items: center;
   position: relative;
   overflow: hidden;
}

.hero-section::before {
   content: '';
   position: absolute;
   inset: 0;
   background: url('https://www.spnppharma.com/assets/images/slider1.jpg') center/cover no-repeat;
   opacity: .12;
}

.hero-bg-shape {
   position: absolute;
   right: -100px;
   top: -100px;
   width: 700px;
   height: 700px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(26, 154, 138, .15) 0%, transparent 70%);
   pointer-events: none;
}

.hero-tag {
   display: inline-block;
   background: rgba(26, 154, 138, .2);
   border: 1px solid rgba(26, 154, 138, .4);
   color: #7fdfd5;
   font-size: .72rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .15em;
   padding: 5px 14px;
   border-radius: 20px;
   margin-top: 18px;
   margin-bottom: 20px;
}

.hero-title {
   font-family: var(--font-h);
   font-size: clamp(2.2rem, 5vw, 3.8rem);
   font-weight: 700;
   color: #fff;
   line-height: 1.15;
   margin-bottom: 18px;
}

.hero-title span {
   color: #7fdfd5;
}

.hero-sub {
   color: rgba(255, 255, 255, .75);
   font-size: 1.05rem;
   line-height: 1.75;
   max-width: 500px;
   margin-bottom: 32px;
   font-weight: 300;
}

.hero-stats-row {
   display: flex;
   gap: 36px;
   margin-top: 36px;
   margin-bottom: 32px;
   flex-wrap: wrap;
}

.hero-stat .num {
   font-family: var(--font-h);
   font-size: 1.9rem;
   font-weight: 700;
   color: #fff;
   line-height: 1;
}

.hero-stat .lbl {
   font-size: .72rem;
   text-transform: uppercase;
   letter-spacing: .08em;
   color: rgba(255, 255, 255, .55);
   margin-top: 4px;
}

.hero-img-card {
   background: rgba(255, 255, 255, .06);
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: 16px;
   padding: 40px;
   backdrop-filter: blur(8px);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 20px;
   max-width: 360px;
   width: 100%;
}

.icon-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
   width: 100%;
}

.icon-box {
   background: rgba(255, 255, 255, .08);
   border-radius: 10px;
   padding: 18px 14px;
   text-align: center;
   border: 1px solid rgba(255, 255, 255, .1);
   cursor: pointer;
   transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), background .25s, box-shadow .3s;
   display: block;
}

.icon-box:hover {
   transform: scale(1.12) translateY(-5px);
   background: rgba(255, 255, 255, .18);
   box-shadow: 0 14px 36px rgba(26, 154, 138, .40);
}

.icon-box .bi {
   font-size: 1.6rem;
   color: #7fdfd5;
   display: block;
   margin-bottom: 6px;
   transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.icon-box:hover .bi {
   transform: scale(1.25) rotate(-10deg);
}

.icon-box span {
   font-size: .7rem;
   color: rgba(255, 255, 255, .7);
   text-transform: uppercase;
   letter-spacing: .06em;
}

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.btn-p,
.btn-o,
.btn-cta,
.btn-order,
.btn-qnow,
.btn-card,
.btn-ctaw {
   position: relative;
   overflow: hidden;
}

.btn-p {
   background: var(--accent);
   color: #fff;
   border: none;
   font-weight: 700;
   font-size: .88rem;
   text-transform: uppercase;
   letter-spacing: .06em;
   padding: 13px 30px;
   border-radius: 5px;
   cursor: pointer;
   transition: background .25s, transform .28s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s;
   display: inline-block;
}

.btn-p:hover {
   background: var(--primary);
   transform: translateY(-3px);
   box-shadow: 0 10px 28px rgba(26, 154, 138, .45);
   color: #fff;
}

.btn-o {
   background: transparent;
   color: #fff;
   border: 1.5px solid rgba(255, 255, 255, .4);
   font-weight: 700;
   font-size: .88rem;
   text-transform: uppercase;
   letter-spacing: .06em;
   padding: 12px 28px;
   border-radius: 5px;
   cursor: pointer;
   transition: all .25s;
   display: inline-block;
}

.btn-o:hover {
   border-color: #fff;
   background: rgba(255, 255, 255, .08);
   transform: translateY(-3px);
   color: #fff;
}

.btn-cta {
   display: inline-block;
   background: var(--primary);
   color: #fff;
   border: none;
   font-weight: 700;
   font-size: .85rem;
   text-transform: uppercase;
   letter-spacing: .06em;
   padding: 12px 28px;
   border-radius: 5px;
   cursor: pointer;
   transition: background .25s, transform .28s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s;
}

.btn-cta:hover {
   background: var(--primary-dark);
   color: #fff;
   transform: translateY(-3px);
   box-shadow: 0 8px 22px rgba(10, 110, 110, .35);
}

.btn-order {
   display: block;
   width: 100%;
   background: var(--primary);
   color: #fff;
   font-weight: 700;
   font-size: .85rem;
   text-transform: uppercase;
   letter-spacing: .08em;
   padding: 14px;
   border-radius: 5px;
   border: none;
   cursor: pointer;
   transition: background .25s, transform .28s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s;
   text-align: center;
   margin-bottom: 10px;
}

.btn-order:hover {
   background: var(--primary-dark);
   box-shadow: 0 6px 18px rgba(10, 110, 110, .35);
   transform: translateY(-2px);
   color: #fff;
}

.btn-qnow {
   display: block;
   width: 100%;
   background: transparent;
   color: var(--primary);
   font-weight: 700;
   font-size: .85rem;
   text-transform: uppercase;
   letter-spacing: .08em;
   padding: 12px;
   border-radius: 5px;
   border: 2px solid var(--primary);
   cursor: pointer;
   transition: all .25s;
   text-align: center;
   margin-bottom: 10px;
}

.btn-qnow:hover {
   background: var(--primary-light);
   color: var(--primary);
}

.btn-card {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: .78rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .06em;
   color: var(--primary);
   background: var(--primary-light);
   border: 1.5px solid var(--primary);
   padding: 8px 16px;
   border-radius: 5px;
   cursor: pointer;
   position: relative;
   overflow: hidden;
   transition: background .25s, color .25s, transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .28s ease;
}

.btn-card:hover {
   background: var(--primary);
   color: #fff;
   transform: translateX(4px);
   box-shadow: 0 6px 20px rgba(10, 110, 110, .35), 0 0 16px rgba(26, 154, 138, .25);
}

.btn-card i {
   transition: transform .22s ease;
}

.btn-card:hover i {
   transform: translateX(3px);
}

body.dark .btn-card {
   background: rgba(26, 154, 138, .12);
   color: var(--accent);
   border-color: var(--accent);
}

body.dark .btn-card:hover {
   background: var(--accent);
   color: #0a0f1e;
   box-shadow: 0 6px 22px rgba(26, 154, 138, .45), 0 0 18px rgba(26, 154, 138, .3);
}

.btn-ctaw {
   background: #fff;
   color: var(--primary);
   font-weight: 700;
   font-size: .88rem;
   text-transform: uppercase;
   letter-spacing: .07em;
   padding: 13px 32px;
   border-radius: 5px;
   border: none;
   cursor: pointer;
   transition: all .25s;
   display: inline-block;
}

.btn-ctaw:hover {
   background: var(--bg-light);
   transform: translateY(-3px);
   box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
   color: var(--primary);
}

.ripple-c {
   position: absolute;
   border-radius: 50%;
   background: rgba(255, 255, 255, .3);
   transform: scale(0);
   pointer-events: none;
   animation: ripple .6s linear forwards;
}

/* ═══════════════════════════════════════════
   SECTION COMMONS
═══════════════════════════════════════════ */
.sec-tag {
   display: inline-block;
   font-size: .7rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .15em;
   color: var(--primary);
   border-bottom: 2px solid var(--primary);
   padding-bottom: 2px;
   margin-bottom: 10px;
}

.sec-title {
   font-family: var(--font-h);
   font-size: clamp(1.7rem, 3vw, 2.4rem);
   font-weight: 700;
   color: var(--navy);
   margin-bottom: 16px;
}

.sec-desc {
   color: var(--text-muted);
   font-size: .95rem;
   line-height: 1.8;
}

.divider {
   width: 48px;
   height: 3px;
   background: var(--primary);
   border-radius: 2px;
   margin-bottom: 20px;
}

/* ═══════════════════════════════════════════
   ABOUT PREVIEW
═══════════════════════════════════════════ */
.about-sec {
   padding: 90px 0;
   background: var(--bg-light);
}

.about-img-wrap {
   position: relative;
}

.about-img-wrap img {
   border-radius: 10px;
   box-shadow: var(--s3);
   width: 100%;
   object-fit: cover;
   max-height: 420px;
}

.about-badge {
   position: absolute;
   bottom: -20px;
   right: -20px;
   background: var(--primary);
   color: #fff;
   border-radius: 12px;
   padding: 22px 26px;
   text-align: center;
   box-shadow: 0 8px 28px rgba(10, 110, 110, .4);
   cursor: default;
   transition: transform .38s cubic-bezier(.34, 1.56, .64, 1), box-shadow .38s ease;
}

.about-badge:hover {
   transform: scale(1.08);
   box-shadow: 0 0 0 8px rgba(10, 110, 110, .12), 0 0 32px rgba(10, 110, 110, .35), 0 14px 36px rgba(10, 110, 110, .45);
}

.about-badge .num {
   font-family: var(--font-h);
   font-size: 2.2rem;
   font-weight: 700;
   display: block;
   animation: badgeNumIn .7s cubic-bezier(.34, 1.56, .64, 1) .3s both;
}

.about-badge .lbl {
   font-size: .68rem;
   text-transform: uppercase;
   letter-spacing: .1em;
   opacity: .85;
}

.feature-item {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   margin-bottom: 22px;
}

.feat-icon {
   width: 44px;
   height: 44px;
   background: var(--primary-light);
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.feat-icon .bi {
   font-size: 1.2rem;
   color: var(--primary);
}

.feat-text h6 {
   font-weight: 700;
   font-size: .9rem;
   color: var(--navy);
   margin-bottom: 4px;
}

.feat-text p {
   font-size: .82rem;
   color: var(--text-muted);
   margin: 0;
   line-height: 1.6;
}

/* ═══════════════════════════════════════════
   PRODUCTS SECTION
═══════════════════════════════════════════ */
.products-sec {
   padding: 60px 0 90px;
}

/* ═══════════════════════════════════════════
   PRODUCT CARDS
═══════════════════════════════════════════ */
.prod-card {
   border: 1px solid var(--border);
   border-radius: var(--r);
   overflow: hidden;
   background: #fff;
   height: 100%;
   cursor: pointer;
   transition: transform .34s cubic-bezier(.22, 1, .36, 1), box-shadow .34s cubic-bezier(.22, 1, .36, 1), border-color .25s ease;
}

.prod-card:hover {
   transform: translateY(-9px) scale(1.018);
   box-shadow: 0 22px 52px rgba(10, 110, 110, .20);
   border-color: var(--primary);
}

.prod-card-img {
   height: 200px;
   overflow: hidden;
   background: var(--bg-light);
}

.prod-card-img img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   padding: 12px;
   transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.prod-card:hover .prod-card-img img {
   transform: scale(1.08);
}

.prod-card-body {
   padding: 18px;
}

.prod-card-body h5 {
   font-family: var(--font-h);
   font-size: 1rem;
   font-weight: 700;
   color: var(--navy);
   margin-bottom: 6px;
}

.prod-tag {
   display: inline-block;
   font-size: .68rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .07em;
   background: var(--primary-light);
   color: var(--primary);
   padding: 3px 9px;
   border-radius: 3px;
   margin-bottom: 10px;
}

.prod-card-body p {
   font-size: .8rem;
   color: var(--text-muted);
   line-height: 1.6;
   margin-bottom: 14px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.prod-item {
   height: 100%;
}

/* ═══════════════════════════════════════════
   WHY SECTION
═══════════════════════════════════════════ */
.why-sec {
   padding: 90px 0;
   background: var(--navy);
}

.why-card {
   background: rgba(255, 255, 255, .05);
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: var(--r);
   padding: 30px 24px;
   text-align: center;
   height: 100%;
   position: relative;
   overflow: hidden;
   transition: transform .32s cubic-bezier(.22, 1, .36, 1), background .25s, box-shadow .32s, border-color .25s;
}

.why-card::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 50% 0%, rgba(127, 223, 213, .08) 0%, transparent 65%);
   opacity: 0;
   transition: opacity .3s;
}

.why-card::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, #7fdfd5, var(--accent));
   transform: scaleX(0);
   transform-origin: left;
   transition: transform 1.1s cubic-bezier(.25, .46, .45, .94);
}

.why-card:hover {
   transform: translateY(-7px) scale(1.03);
   box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
   border-color: rgba(127, 223, 213, .35);
}

.why-card:hover::before {
   opacity: 1;
}

.why-card:hover::after {
   transform: scaleX(1);
}

.why-icon {
   font-size: 2.2rem;
   color: #7fdfd5;
   margin-bottom: 16px;
}

.why-card h5 {
   font-family: var(--font-h);
   color: #fff;
   font-size: 1.05rem;
   margin-bottom: 10px;
}

.why-card p {
   color: rgba(255, 255, 255, .6);
   font-size: .83rem;
   line-height: 1.7;
   margin: 0;
}

/* ═══════════════════════════════════════════
   CTA BANNER
═══════════════════════════════════════════ */
.cta-banner {
   background: linear-gradient(135deg, #086060 0%, #0f8a7a 100%);
   padding: 70px 0;
   text-align: center;
}

.cta-banner h2 {
   font-family: var(--font-h);
   color: #fff;
   font-size: 2rem;
   margin-bottom: 12px;
}

.cta-banner p {
   color: rgba(255, 255, 255, .85);
   font-size: 1rem;
   margin-bottom: 28px;
}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
.main-footer {
   background: var(--navy);
   color: rgba(255, 255, 255, .7);
   padding: 70px 0 0;
}

.footer-brand p {
   font-size: .83rem;
   line-height: 1.75;
   max-width: 280px;
}

.ftr-head {
   font-family: var(--font-h);
   color: #fff;
   font-size: 1rem;
   font-weight: 700;
   margin-bottom: 18px;
   padding-bottom: 10px;
   position: relative;
   display: inline-block;
}

.ftr-head::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 0;
   height: 2px;
   background: linear-gradient(90deg, var(--accent), #7fdfd5);
   border-radius: 2px;
   transition: width .5s cubic-bezier(.22, 1, .36, 1);
}

.footer-col:hover .ftr-head::after {
   width: 100%;
}

.ftr-links li {
   margin-bottom: 9px;
}

.ftr-links a {
   color: rgba(255, 255, 255, .65);
   font-size: .83rem;
   transition: color .2s, padding-left .2s;
   display: flex;
   align-items: center;
   gap: 6px;
}

.ftr-links a:hover {
   color: #7fdfd5;
   padding-left: 4px;
}

.ftr-links a .bi {
   font-size: .65rem;
}

.ftr-contact-item {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   margin-bottom: 14px;
}

.ftr-contact-item .bi {
   color: var(--accent);
   font-size: 1rem;
   margin-top: 2px;
   flex-shrink: 0;
}

.ftr-contact-item span {
   font-size: .82rem;
   line-height: 1.7;
   color: #030303;
   font-weight: 500;
}
.ftr-contact-item .plot {
   font-size: .82rem;
   line-height: 1.7;
   color: #fff;
   font-weight: 500;
}

.ftr-contact-item a {
   color: rgba(255, 255, 255, .8);
}

.ftr-contact-item span .contact-label {
   display: block;
   color: #000000;
   font-weight: 700;
   margin-bottom: 2px;
}

.footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, .08);
   padding: 18px 0;
   margin-top: 50px;
   text-align: center;
   font-size: .78rem;
   color: rgba(255, 255, 255, .45);
}

.ftr-circle {
   width: 46px;
   height: 46px;
   background: var(--primary);
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-h);
   font-size: .95rem;
   font-weight: 700;
   color: #fff;
   margin-bottom: 12px;
}

/* ═══════════════════════════════════════════
   PAGE HERO (inner pages)
═══════════════════════════════════════════ */
.page-hero {
   background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 60%, var(--primary-dark) 100%);
   padding: 70px 0 60px;
   position: relative;
   overflow: hidden;
}

.page-hero::after {
   content: '';
   position: absolute;
   right: 0;
   top: 0;
   bottom: 0;
   width: 40%;
   background: rgba(26, 154, 138, .07);
   clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
}

.page-hero-title {
   font-family: var(--font-h);
   font-size: clamp(1.8rem, 3.5vw, 2.8rem);
   font-weight: 700;
   color: #fff;
   margin-bottom: 12px;
}

.page-hero-sub {
   color: rgba(255, 255, 255, .7);
   font-size: .92rem;
   max-width: 500px;
}

.breadcrumb-c {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-top: 18px;
}

.breadcrumb-c span {
   font-size: .78rem;
   color: rgba(255, 255, 255, .5);
}

.breadcrumb-c a {
   font-size: .78rem;
   color: #7fdfd5;
}

.breadcrumb-c .sep {
   color: rgba(255, 255, 255, .3);
}

/* ═══════════════════════════════════════════
   ABOUT PAGE
═══════════════════════════════════════════ */
.about-main {
   padding: 50px 0;
}

.vm-card {
   background: var(--bg-light);
   border-left: 4px solid var(--primary);
   border-radius: 6px;
   padding: 28px 26px;
   height: 100%;
   position: relative;
   overflow: hidden;
   transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), box-shadow .32s ease;
}

.vm-card::after {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 30% 30%, rgba(10, 110, 110, .07) 0%, transparent 70%);
   opacity: 0;
   transition: opacity .3s;
}

.vm-card:hover {
   transform: translateY(-7px) scale(1.02);
   box-shadow: 0 16px 40px rgba(10, 110, 110, .18);
}

.vm-card:hover::after {
   opacity: 1;
}

.vm-card .bi {
   font-size: 2rem;
   color: var(--primary);
   margin-bottom: 14px;
}

.vm-card h5 {
   font-family: var(--font-h);
   font-weight: 700;
   color: var(--navy);
   margin-bottom: 10px;
}

.vm-card p {
   font-size: .88rem;
   line-height: 1.8;
   color: var(--text-muted);
   margin: 0;
}

.values-sec {
   padding: 70px 0;
   background: var(--bg-light);
}

.value-item {
   display: flex;
   gap: 18px;
   margin-bottom: 30px;
}

.value-num {
   font-family: var(--font-h);
   font-size: 2.5rem;
   font-weight: 700;
   color: var(--primary);
   opacity: .18;
   line-height: 1;
}

.value-content h6 {
   font-weight: 700;
   color: var(--navy);
   font-size: .95rem;
   margin-bottom: 6px;
}

.value-content p {
   font-size: .83rem;
   color: var(--text-muted);
   line-height: 1.7;
   margin: 0;
}

.stat-box {
   text-align: center;
   padding: 28px 16px;
   border: 1px solid var(--border);
   border-radius: var(--r);
   position: relative;
   overflow: hidden;
   transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), box-shadow .32s ease, border-color .25s ease;
}

.stat-box::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 50% 0%, rgba(10, 110, 110, .08) 0%, transparent 65%);
   opacity: 0;
   transition: opacity .3s;
}

.stat-box::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, var(--primary), var(--accent));
   transform: scaleX(0);
   transform-origin: left;
   transition: transform 1.1s cubic-bezier(.25, .46, .45, .94);
}

.stat-box:hover {
   transform: translateY(-7px) scale(1.04);
   box-shadow: 0 14px 38px rgba(10, 110, 110, .18);
   border-color: var(--primary);
}

.stat-box:hover::before {
   opacity: 1;
}

.stat-box:hover::after {
   transform: scaleX(1);
}

.stat-box .big-num {
   font-family: var(--font-h);
   font-size: 2.4rem;
   font-weight: 700;
   color: var(--primary);
}

.stat-box .stat-lbl {
   font-size: .78rem;
   text-transform: uppercase;
   letter-spacing: .08em;
   color: var(--text-muted);
   margin-top: 6px;
}

.cert-badge {
   display: flex;
   align-items: center;
   gap: 14px;
   background: var(--bg-light);
   border-radius: 8px;
   padding: 16px 20px;
   margin-bottom: 14px;
   border: 1px solid var(--border);
   transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .28s;
}

.cert-badge:hover {
   transform: translateX(5px);
   box-shadow: 0 6px 20px rgba(10, 110, 110, .10);
}

.cert-badge .bi {
   font-size: 1.6rem;
   color: var(--primary);
}

.cert-badge strong {
   font-size: .9rem;
   color: var(--navy);
   display: block;
}

.cert-badge span {
   font-size: .78rem;
   color: var(--text-muted);
}

/* ═══════════════════════════════════════════
   PRODUCTS PAGE
═══════════════════════════════════════════ */
.products-main {
   padding: 70px 0;
}

.filter-bar {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   margin-bottom: 40px;
}

.filter-btn {
   font-size: .82rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .07em;
   padding: 9px 22px;
   border-radius: 6px;
   border: 2px solid var(--primary);
   background: transparent;
   color: var(--primary);
   cursor: pointer;
   position: relative;
   overflow: hidden;
   transition: background .25s, color .25s, border-color .25s, transform .28s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
   display: inline-block;
}

.filter-btn::before {
   content: '';
   position: absolute;
   inset: -4px;
   border-radius: 8px;
   background: radial-gradient(ellipse at 50% 50%, rgba(26, 154, 138, .35) 0%, transparent 70%);
   opacity: 0;
   transition: opacity .3s ease;
   z-index: 0;
   pointer-events: none;
}

.filter-btn:hover {
   transform: translateY(-3px) scale(1.05);
   box-shadow: 0 8px 24px rgba(10, 110, 110, .35), 0 0 0 2px var(--primary);
   background: rgba(10, 110, 110, .08);
   color: var(--primary);
}

.filter-btn:hover::before {
   opacity: 1;
}

.filter-btn.on {
   background: var(--primary);
   color: #fff;
   border-color: var(--primary);
   transform: translateY(-2px) scale(1.03);
   box-shadow: 0 8px 28px rgba(10, 110, 110, .45), 0 0 20px rgba(26, 154, 138, .3);
   animation: filterPop .35s cubic-bezier(.34, 1.56, .64, 1);
}

.filter-count {
   font-size: .68rem;
   opacity: .7;
   margin-left: 4px;
}

/* ═══════════════════════════════════════════
   PRODUCT DETAIL
═══════════════════════════════════════════ */
.prod-detail {
   padding: 60px 0 80px;
}
.prod-detail .pd-main{
    position: sticky;
    top: 20px;
}
.pd-img-main {
   border-radius: 10px;
   overflow: hidden;
   border: 1px solid var(--border);
   background: var(--bg-light);
   padding: 20px;
}

.pd-img-main img {
   width: 100%;
   max-height: 380px;
   object-fit: contain;
   transition: opacity .22s ease, transform .28s cubic-bezier(.22, 1, .36, 1);
}

.pd-thumbs {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   margin-top: 14px;
}
.prod-detail .pd-side{
      position: sticky;
    top: 20px;
}

.pd-thumb {
   width: 72px;
   height: 72px;
   border-radius: 6px;
   overflow: hidden;
   border: 2px solid var(--border);
   cursor: pointer;
   background: var(--bg-light);
   padding: 4px;
   transition: border-color .2s, transform .22s cubic-bezier(.22, 1, .36, 1);
}

.pd-thumb:hover {
   transform: scale(1.08);
}

.pd-thumb.on {
   border-color: var(--primary);
   transform: scale(1.05);
}

.pd-thumb img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.pd-badges {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   margin-bottom: 14px;
}

.pd-badge {
   font-size: .7rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .08em;
   padding: 4px 10px;
   border-radius: 3px;
}

.pd-badge-type {
   background: var(--primary-light);
   color: var(--primary);
}

.pd-badge-rx {
   background: #fff3e0;
   color: #c8962e;
   border: 1px solid #f0c96a;
}

.pd-title {
   font-family: var(--font-h);
   font-size: clamp(1.6rem, 3vw, 2.2rem);
   font-weight: 700;
   color: var(--navy);
   margin-bottom: 8px;
}

.pd-pack {
   font-size: .82rem;
   color: var(--text-muted);
   margin-bottom: 20px;
   display: flex;
   align-items: center;
   gap: 6px;
}

.pd-pack .bi {
   color: var(--primary);
}

.pd-sec {
   margin-top: 28px;
}

.pd-sec-title {
   font-family: var(--font-h);
   font-size: 1.1rem;
   font-weight: 700;
   color: var(--navy);
   padding-bottom: 10px;
   border-bottom: 2px solid var(--primary-light);
   margin-bottom: 14px;
   display: flex;
   align-items: center;
   gap: 8px;
}

.pd-sec-title .bi {
   color: var(--primary);
   font-size: 1rem;
}

.pd-desc {
   font-size: .88rem;
   line-height: 1.85;
   color: var(--text-muted);
}
.pd-desc p{margin: 0;}
.pd-desc ul{
    padding: 0px 20px;
}
.pd-desc ul li{
    list-style: disc;
}
.pd-list {
   list-style: none;
   padding: 0;
   margin: 0;
}
.pd-list p{
 font-size: .86rem;
  color: var(--text-muted);
}
.pd-list ul{
      padding: 0px 20px;
}
.pd-list li {
 
   align-items: flex-start;
   gap: 10px;
   margin-bottom: 8px;
   font-size: .86rem;
  color: var(--text-muted);
   list-style: disc;
}

.pd-list li::before {
   content: '';
   width: 6px;
   height: 6px;
   background: var(--primary);
   border-radius: 50%;
   margin-top: 7px;
   flex-shrink: 0;
}

.pd-side-card {
   background: var(--bg-light);
   border: 1px solid var(--border);
   border-radius: 10px;
   padding: 24px;
   margin-bottom: 20px;
}

.pd-side-card h6 {
   font-family: var(--font-h);
   font-weight: 700;
   color: var(--navy);
   margin-bottom: 16px;
   font-size: 1rem;
}

.pd-info-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px 0;
   border-bottom: 1px solid var(--border);
   font-size: .82rem;
}

.pd-info-row:last-child {
   border-bottom: none;
}

.pd-info-row .k {
   color: var(--text-muted);
}

.pd-info-row .v {
   color: var(--navy);
   font-weight: 700;
}

.back-link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   color: var(--primary);
   font-weight: 700;
   font-size: .82rem;
   text-transform: uppercase;
   letter-spacing: .06em;
   margin-bottom: 32px;
   cursor: pointer;
   transition: gap .22s, color .22s, transform .22s;
}

.back-link:hover {
   transform: translateX(-3px);
   color: var(--primary-dark);
}

/* ═══════════════════════════════════════════
   CONTACT PAGE
═══════════════════════════════════════════ */
.contact-main {
   padding: 80px 0;
}

.contact-card {
   background: var(--bg-light);
   border: 1px solid var(--border);
   border-radius: var(--r);
   padding: 32px 24px;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   position: relative;
   overflow: hidden;
   transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), box-shadow .32s ease, border-color .25s ease;
}

.contact-card::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 50% 0%, rgba(10, 110, 110, .07) 0%, transparent 65%);
   opacity: 0;
   transition: opacity .3s ease;
}

.contact-card::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, var(--primary), var(--accent));
   transform: scaleX(0);
   transform-origin: left;
   transition: transform 1.1s cubic-bezier(.25, .46, .45, .94);
}

.contact-card:hover {
   transform: translateY(-8px) scale(1.02);
   box-shadow: 0 16px 40px rgba(10, 110, 110, .16);
   border-color: var(--primary);
}

.contact-card:hover::before {
   opacity: 1;
}

.contact-card:hover::after {
   transform: scaleX(1);
}

.contact-card:hover .contact-icon {
   transform: scale(1.15);
   background: var(--primary);
   box-shadow: 0 6px 20px rgba(10, 110, 110, .35);
}

.contact-card:hover .contact-icon .bi {
   color: #fff;
}

.contact-icon {
   width: 56px;
   height: 56px;
   background: var(--primary-light);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.4rem;
   color: var(--primary);
   margin-bottom: 16px;
   transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), background .25s ease, box-shadow .25s ease;
}

.contact-card h6 {
   font-family: var(--font-h);
   font-weight: 700;
   color: var(--navy);
   font-size: 1rem;
   margin-bottom: 8px;
}

.contact-card p,
.contact-card a {
   font-size: .85rem;
   color: var(--text-muted);
   line-height: 1.7;
}

.contact-card a {
   color: var(--primary);
}

.contact-form-sec {
   background: var(--bg-light);
   border: 1px solid var(--border);
   border-radius: 10px;
   padding: 40px 36px;
}

.form-label {
   font-size: .82rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .06em;
   color: var(--navy);
   margin-bottom: 6px;
}

.form-control,
.form-select {
   font-size: .88rem;
   border-color: var(--border);
   border-radius: 5px;
   padding: 10px 14px;
   transition: border-color .22s, box-shadow .22s, transform .22s;
}

.form-control:focus,
.form-select:focus {
   border-color: var(--primary);
   box-shadow: 0 0 0 3px rgba(10, 110, 110, .12);
   transform: translateY(-1px);
}

.map-frame {
   border-radius: 10px;
   overflow: hidden;
   border: 1px solid var(--border);
   box-shadow: var(--s1);
}

/* ═══════════════════════════════════════════
   QUOTE PAGE
═══════════════════════════════════════════ */
.quote-main {
   padding: 80px 0;
}

.quote-form-card {
   background: #fff;
   border: 1px solid var(--border);
   border-radius: 12px;
   padding: 44px 40px;
   box-shadow: var(--s2);
}

.quote-info {
   background: linear-gradient(160deg, var(--navy) 0%, var(--primary-dark) 100%);
   border-radius: 12px;
   padding: 40px 32px;
   color: #fff;
   height: 100%;
}

.quote-info h4 {
   font-family: var(--font-h);
   font-size: 1.5rem;
   margin-bottom: 8px;
}

.quote-info p {
   color: rgba(255, 255, 255, .7);
   font-size: .88rem;
   margin-bottom: 28px;
   line-height: 1.7;
}

.qi-item {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   margin-bottom: 22px;
}

.qi-icon {
   width: 40px;
   height: 40px;
   background: rgba(255, 255, 255, .1);
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   font-size: 1.1rem;
   color: #7fdfd5;
}

.qi-text strong {
   display: block;
   font-size: .9rem;
   color: #fff;
   margin-bottom: 3px;
}

.qi-text span {
   font-size: .8rem;
   color: rgba(255, 255, 255, .6);
}

/* ═══════════════════════════════════════════
   FLOATING BUTTONS
═══════════════════════════════════════════ */
#float-btns {
   position: fixed;
   right: 18px;
   bottom: 150px;
   display: flex;
   flex-direction: column;
   gap: 10px;
   z-index: 1200;
}

.fl-btn {
   width: 50px;
   height: 50px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.4rem;
   color: #fff;
   cursor: pointer;
   border: none;
   text-decoration: none;
   box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
   transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s;
   position: relative;
}

.fl-btn:hover {
   transform: scale(1.18) translateY(-3px);
   color: #fff;
}

.fl-wa {
   background: #25D366;
   animation: pulse 2s infinite;
}

.fl-wa:hover {
   box-shadow: 0 8px 24px rgba(37, 211, 102, .5);
}

.fl-call {
   background: #e07b00;
}

.fl-call:hover {
   box-shadow: 0 8px 24px rgba(224, 123, 0, .5);
}

.fl-btn::before {
   content: attr(data-tip);
   position: absolute;
   right: 58px;
   top: 50%;
   transform: translateY(-50%) translateX(6px);
   background: rgba(0, 0, 0, .75);
   color: #fff;
   font-size: .72rem;
   font-weight: 600;
   white-space: nowrap;
   padding: 4px 10px;
   border-radius: 5px;
   opacity: 0;
   pointer-events: none;
   transition: opacity .2s, transform .2s;
   font-family: var(--font-b);
}

.fl-btn:hover::before {
   opacity: 1;
   transform: translateY(-50%) translateX(0);
}

#theme-btn {
   position: fixed;
   bottom: 90px;
   right: 18px;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: var(--primary);
   color: #fff;
   border: none;
   cursor: pointer;
   z-index: 1200;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.1rem;
   box-shadow: 0 4px 16px rgba(10, 110, 110, .35);
   transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), background .25s, box-shadow .25s;
}

#theme-btn:hover {
   transform: scale(1.15) rotate(20deg);
   box-shadow: 0 6px 22px rgba(10, 110, 110, .5);
}

#top-btn {
   position: fixed;
   right: 18px;
   bottom: 24px;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: var(--navy);
   color: #fff;
   border: 2px solid var(--primary);
   cursor: pointer;
   z-index: 1200;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1rem;
   box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
   transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), opacity .3s;
   opacity: 0;
   pointer-events: none;
}

#top-btn.show {
   opacity: 1;
   pointer-events: auto;
}

#top-btn:hover {
   transform: scale(1.15) translateY(-3px);
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media(max-width:992px) {
   .hero-section {
      min-height: auto;
      padding: 70px 0 60px;
   }

   .hero-img-card {
      max-width: 300px;
      padding: 28px;
   }

   .about-badge {
      bottom: -10px;
      right: 0;
   }

   .hero-stats-row {
      gap: 24px;
   }

   .quote-form-card {
      padding: 32px 28px;
   }

   .fl-btn::before {
      display: none;
   }
}

@media(max-width:768px) {
   .hero-section {
      min-height: auto;
      padding: 55px 0 48px;
   }

   .hero-title {
      font-size: clamp(1.9rem, 7vw, 2.8rem);
      margin-bottom: 14px;
   }

   .hero-sub {
      font-size: .95rem;
      margin-bottom: 24px;
   }

   .hero-stats-row {
      gap: 20px;
      margin-top: 24px;
      margin-bottom: 20px;
   }

   .hero-stat .num {
      font-size: 1.6rem;
   }

   .hero-img-card {
      max-width: 100%;
      padding: 22px;
      margin-top: 36px;
   }

   .about-sec {
      padding: 60px 0 80px;
   }

   .about-badge {
      bottom: -10px;
      right: 10px;
      padding: 14px 18px;
   }

   .about-badge .num {
      font-size: 1.6rem;
   }

   .about-img-wrap img {
      max-height: 320px;
   }

   .sec-title {
      font-size: clamp(1.5rem, 5vw, 2rem);
   }

   .products-sec {
      padding: 44px 0 60px;
   }

   .prod-card-img {
      height: 175px;
   }

   .quote-form-card {
      padding: 26px 20px;
   }

   .quote-info {
      padding: 30px 24px;
   }

   .contact-main {
      padding: 50px 0;
   }

   .contact-form-sec {
      padding: 26px 20px;
   }

   .about-main {
      padding: 36px 0;
   }

   .vm-card {
      padding: 22px 20px;
   }

   .values-sec {
      padding: 44px 0;
   }

   .stat-box {
      padding: 20px 12px;
   }

   .stat-box .big-num {
      font-size: 1.9rem;
   }

   .main-footer {
      padding: 50px 0 0;
   }

   #float-btns {
      bottom: 120px;
      right: 14px;
   }

   .fl-btn {
      width: 46px;
      height: 46px;
      font-size: 1.2rem;
      border-radius: 10px;
   }

   #theme-btn {
      width: 40px;
      height: 40px;
      font-size: 1rem;
      bottom: 70px;
      right: 14px;
   }

   #top-btn {
      width: 40px;
      height: 40px;
      font-size: .9rem;
      bottom: 20px;
      right: 14px;
   }

   .page-hero {
      padding: 50px 0 44px;
   }

   .page-hero-title {
      font-size: clamp(1.5rem, 6vw, 2.2rem);
   }

   .prod-detail {
      padding: 36px 0 60px;
   }

   .pd-thumbs {
      gap: 8px;
   }

   .pd-thumb {
      width: 60px;
      height: 60px;
   }

   .pd-title {
      font-size: clamp(1.4rem, 5vw, 1.9rem);
   }

   .brand-circle {
      width: 44px;
      height: 44px;
      font-size: 1rem;
   }

   .brand-text-main {
      font-size: 1.15rem;
   }

   .brand-text-sub {
      font-size: .58rem;
   }
}

@media(max-width:576px) {
   .topbar .d-flex.align-items-center.gap-3:last-child {
      display: none !important;
   }

   .topbar {
      font-size: .75rem;
      padding: 6px 0;
   }

   .hero-section {
      padding: 48px 0 40px;
   }

   .hero-tag {
      font-size: .65rem;
      padding: 4px 12px;
      margin-top: 12px;
      margin-bottom: 16px;
   }

   .hero-title {
      font-size: clamp(1.7rem, 8vw, 2.4rem);
   }

   .hero-sub {
      font-size: .9rem;
      line-height: 1.7;
   }

   .btn-p,
   .btn-o {
      font-size: .8rem;
      padding: 11px 22px;
   }

   .hero-stats-row {
      gap: 16px;
      margin-top: 20px;
   }

   .hero-stat .num {
      font-size: 1.4rem;
   }

   .hero-img-card {
      padding: 18px;
      gap: 14px;
   }

   .icon-box {
      padding: 12px 8px;
   }

   .icon-box .bi {
      font-size: 1.1rem;
   }

   .icon-box span {
      font-size: .6rem;
   }

   .about-sec {
      padding: 44px 0 70px;
   }

   .about-badge {
      bottom: -8px;
      right: 6px;
      padding: 12px 16px;
      border-radius: 8px;
   }

   .about-badge .num {
      font-size: 1.4rem;
   }

   .about-badge .lbl {
      font-size: .6rem;
   }

   .feature-item {
      gap: 10px;
   }

   .feat-icon {
      width: 38px;
      height: 38px;
   }

   .products-sec {
      padding: 36px 0 50px;
   }

   .prod-card-img {
      height: 160px;
   }

   .prod-card-body {
      padding: 14px;
   }

   .prod-card-body h5 {
      font-size: .92rem;
   }

   .prod-card-body p {
      font-size: .76rem;
   }

   .why-sec {
      padding: 60px 0;
   }

   .why-card {
      padding: 24px 18px;
   }

   .cta-banner {
      padding: 50px 0;
   }

   .cta-banner h2 {
      font-size: 1.5rem;
   }

   .cta-banner p {
      font-size: .88rem;
   }

   .btn-ctaw {
      font-size: .8rem;
      padding: 11px 22px;
   }

   .filter-bar {
      gap: 8px;
   }

   .filter-btn {
      font-size: .72rem;
      padding: 6px 14px;
   }

   .quote-main {
      padding: 50px 0;
   }

   .quote-form-card {
      padding: 22px 16px;
   }

   .quote-info {
      padding: 24px 20px;
   }

   .quote-info h4 {
      font-size: 1.2rem;
   }

   .contact-main {
      padding: 40px 0;
   }

   .contact-form-sec {
      padding: 22px 16px;
   }

   .map-frame iframe {
      height: 220px;
   }

   .stat-box {
      padding: 18px 10px;
   }

   .stat-box .big-num {
      font-size: 1.7rem;
   }

   .cert-badge {
      padding: 12px 14px;
      gap: 10px;
   }

   .cert-badge .bi {
      font-size: 1.2rem;
   }

   .vm-card {
      padding: 18px 16px;
      margin-bottom: 8px;
   }

   .value-item {
      gap: 12px;
   }

   .value-num {
      font-size: 1.8rem;
   }

   .prod-detail {
      padding: 28px 0 50px;
   }

   .pd-thumb {
      width: 52px;
      height: 52px;
   }

   .back-link {
      font-size: .75rem;
      margin-bottom: 20px;
   }

   .pd-sec-title {
      font-size: 1rem;
   }

   .pd-desc {
      font-size: .84rem;
   }

   .main-footer {
      padding: 40px 0 0;
   }

   .footer-bottom {
      margin-top: 36px;
      font-size: .72rem;
   }

   #float-btns {
      bottom: 110px;
      right: 12px;
      gap: 8px;
   }

   .fl-btn {
      width: 44px;
      height: 44px;
      font-size: 1.15rem;
      border-radius: 10px;
   }

   #theme-btn {
      width: 38px;
      height: 38px;
      font-size: .95rem;
      bottom: 64px;
      right: 12px;
   }

   #top-btn {
      width: 38px;
      height: 38px;
      bottom: 18px;
      right: 12px;
   }
}

@media(max-width:430px) {
   .container {
      padding-left: 20px;
      padding-right: 20px;
   }

   .topbar .container {
      padding-left: 16px;
      padding-right: 16px;
   }

   .brand-text-sub {
      display: none;
   }

   .brand-circle {
      width: 40px;
      height: 40px;
      font-size: .9rem;
   }

   .brand-text-main {
      font-size: 1.05rem;
   }

   .hero-title {
      font-size: clamp(1.6rem, 9vw, 2.1rem);
   }

   .hero-stats-row {
      gap: 14px;
   }

   .hero-stat .num {
      font-size: 1.3rem;
   }

   .filter-bar {
      gap: 6px;
   }

   .filter-btn {
      font-size: .68rem;
      padding: 5px 11px;
      border-width: 1.5px;
   }

   .about-badge {
      right: 0;
      bottom: -6px;
   }

   .stat-box {
      padding: 16px 8px;
   }

   .stat-box .big-num {
      font-size: 1.55rem;
   }

   .stat-box .stat-lbl {
      font-size: .68rem;
   }

   .quote-form-card {
      padding: 18px 14px;
   }

   #float-btns {
      right: 10px;
   }

   #theme-btn {
      right: 10px;
   }

   #top-btn {
      right: 10px;
   }
}

@media(max-width:360px) {
   .hero-title {
      font-size: 1.55rem;
   }

   .btn-p,
   .btn-o {
      font-size: .75rem;
      padding: 10px 18px;
   }

   .hero-cta {
      flex-direction: column;
      gap: 8px !important;
   }

   .hero-cta .btn-p,
   .hero-cta .btn-o {
      width: 100%;
      text-align: center;
   }

   .prod-card-img {
      height: 130px;
   }

   .filter-btn {
      font-size: .64rem;
      padding: 5px 9px;
   }
}

@media(min-width:769px) and (max-width:1024px) {
   .hero-section {
      min-height: auto;
      padding: 70px 0 65px;
   }

   .hero-title {
      font-size: clamp(2rem, 4.5vw, 3rem);
   }

   .hero-img-card {
      max-width: 280px;
   }

   .about-badge {
      right: -10px;
   }

   .prod-card-img {
      height: 185px;
   }

   .quote-form-card {
      padding: 36px 30px;
   }
}

@media(min-width:1025px) and (max-width:1280px) {
   .hero-img-card {
      max-width: 320px;
   }
}