:root {
     --primary: #2563eb;
     --primary-dark: #32ad61;
     --accent: #f97316;
     --bg: #f5f7fb;
     --text: #0f172a;
     --muted: #6b7280;
     --card-bg: #ffffff;
     --border: #e5e7eb;
     --radius-lg: 1.25rem;
     --shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.12);
}
 * {
     box-sizing: border-box;
     font-family: Lato;
}
 html {
     scroll-behavior: smooth;
}
 body {
     margin: 0;
     font-family:Lato;
     color: var(--text);
     background: var(--bg);
     line-height: 1.6;
}
 img {
     max-width: 100%;
     display: block;
}
 a {
     text-decoration: none;
     color: inherit;
}
 .container {
     width: 100%;
     max-width: 94%;
     margin: 0 auto;
     padding: 0 1.5rem;
}
/* Header */
 header {
     position: sticky;
     top: 0;
     z-index: 40;
     backdrop-filter: blur(12px);
     background: rgba(248, 250, 252, 0.96);
    /* border-bottom: 1px solid rgba(226, 232, 240, 0.9);
     */
     background: linear-gradient(117deg, #53da86 0%, #269c53 100%);
}
 .header-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0.75rem 0;
     gap: 1rem;
}
 .logo {
     display: flex;
     align-items: center;
     gap: 0.6rem;
     font-weight: 700;
     font-size: 1.1rem;
     letter-spacing: 0.02em;
}
 .logo-mark {
     width: 34px;
     height: 34px;
     border-radius: 999px;
     background: radial-gradient(circle at 20% 20%, #bfdbfe, #32ad61);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #eff6ff;
     font-size: 0.75rem;
     box-shadow: 0 12px 24px rgba(37, 99, 235, 0.55);
}
/* Desktop nav */
 nav {
     display: flex;
     align-items: center;
     gap: 1.5rem;
}
 nav ul {
     display: flex;
     list-style: none;
     gap: 1.5rem;
     padding: 0;
     margin: 0;
     font-size: 0.95rem;
}
 nav a {
     color: var(--muted);
     font-weight: 500;
     position: relative;
     color: #fff;
     font-size: 22px;
}
 nav a::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: -0.4rem;
     width: 0;
     height: 2px;
     border-radius: 999px;
     background:#1a221d;
     transition: width 0.2s ease;
}
 nav a:hover {
        text-decoration: none;
     color: var(--text);
}
 nav a:hover::after {
     width: 100%;
}
 .header-cta {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     font-size: 0.9rem;
}
 .phone-pill {
     display: flex;
     align-items: center;
     gap: 0.4rem;
     padding: 10px 22px;
     border-radius: 999px;
     border: 5px solid #fff;
     background: #f9fafbba;
     color: #208b49;
     white-space: nowrap;
     font-size: 17px;
}
 .phone-dot {
     width: 8px;
     height: 8px;
     border-radius: 999px;
     background: #22c55e;
     box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.25);
     margin-right: 8px;
}
 .btn-sm {
     padding: 0.45rem 0.9rem;
     border-radius: 999px;
     border: none;
     cursor: pointer;
     font-weight: 600;
     font-size: 0.9rem;
     background: var(--primary);
     color: #f9fafb;
     display: inline-flex;
     align-items: center;
     gap: 0.4rem;
     box-shadow: 0 10px 20px rgba(37, 99, 235, 0.4);
     transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
 .btn-sm:hover {
     background: var(--primary-dark);
     transform: translateY(-1px);
     box-shadow: 0 14px 30px rgba(37, 99, 235, 0.5);
}
/* Mobile nav */
 .mobile-toggle {
     display: none;
     background: none;
     border: 1px solid rgba(148, 163, 184, 0.8);
     border-radius: 999px;
     padding: 0.3rem 0.6rem;
     font-size: 0.9rem;
     cursor: pointer;
     align-items: center;
     gap: 0.25rem;
}
 .mobile-nav {
     display: none;
     border-top: 1px solid rgba(226, 232, 240, 0.9);
     padding: 0.5rem 0 0.75rem;
}
 .mobile-nav ul {
     list-style: none;
     padding: 0;
     margin: 0;
     display: grid;
     gap: 0.35rem;
     font-size: 0.92rem;
}
 .mobile-nav a {
     color: var(--muted);
     font-weight: 500;
}
 .mobile-nav a:hover {
     color: var(--primary-dark);
}
/* Hero */
 .hero {
     position: relative;
     min-height: 70vh;
     display: flex;
     align-items: center;
     color: #31ab5f;
     background-image: linear-gradient(135deg, rgb(255 255 255 / 92%), rgb(255 255 255 / 86%)), url(https://images.pexels.com/photos/4481258/pexels-photo-4481258.jpeg?auto=compress&cs=tinysrgb&w=1600);
     background-size: cover;
     background-position: center;
}
 .hero::after {
     content: "";
     position: absolute;
     inset: 0;
     background: radial-gradient(circle at top left, rgb(82 216 133 / 49%), transparent 55%);
     pointer-events: none;
}
 .hero-inner {
     position: relative;
     z-index: 1;
     padding: 3.5rem 0 4rem;
}
 .hero-grid {
     display: grid;
     grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
     gap: 2.75rem;
     align-items: center;
}
 .eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     padding: 4px 16px 4px 6px;
     border-radius: 999px;
     background: rgb(52 175 99);
     border: 1px solid rgb(255 255 255 / 60%);
     margin-bottom: 1rem;
     font-size: 0.8rem;
     color: #ffffff;
}
 .eyebrow-badge {
     padding: 0.2rem 0.55rem;
     border-radius: 999px;
     font-size: 0.7rem;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     background: rgb(255 255 255 / 18%);
     border: 1px solid rgb(255 255 255 / 70%);
}
 .hero h1 {
     font-size: clamp(2.4rem, 4vw, 3.1rem);
     margin: 0 0 0.75rem;
     letter-spacing: -0.03em;
}
 .hero h1 span.highlight {
     color: #136e36;
}
 .hero-subtitle {
     max-width: 34rem;
     font-size: 18px;
     color: #111;
     margin-bottom: 1.75rem;
     font-weight: 500;
     line-height: 28px;
}
 .hero-badges {
     display: flex;
     flex-wrap: wrap;
     gap: 0.75rem;
     margin-bottom: 2rem;
     font-size: 0.78rem;
}
 .hero-badge {
     padding: 6px 10px 8px 10px;
     border-radius: 999px;
     border: 1px solid rgb(41 41 41);
     background: rgb(41 41 41);
     display: inline-flex;
     align-items: center;
     gap: 0.4rem;
     color: #fff;
     font-size: 13px;
}
 .hero-cta-row {
     display: flex;
     flex-wrap: wrap;
     gap: 0.75rem;
     align-items: center;
     margin-bottom: 1.6rem;
}
 .btn-primary {
     padding: 0.85rem 1.7rem;
     border-radius: 999px;
     border: none;
     cursor: pointer;
     font-weight: 600;
     font-size: 0.95rem;
     background: linear-gradient(135deg, #289e55, #53d986);
     color: #f9fafb;
     display: inline-flex;
     align-items: center;
     gap: 0.45rem;
    /* box-shadow: 0 18px 40px rgba(37, 99, 235, 0.55);
     */
     transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
 .btn-primary:hover {
     filter: brightness(1.05);
     transform: translateY(-0px);
     box-shadow: 0 22px 50px rgb(97 97 97 / 65%);
}
 .btn-secondary {
     padding: 0.8rem 1.5rem;
     border-radius: 999px;
     border: 1px solid rgba(148, 163, 184, 0.8);
     background: rgb(60 60 60 / 75%);
     color: #e5e7eb;
     cursor: pointer;
     font-weight: 500;
     font-size: 0.95rem;
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
 .btn-secondary:hover {
     background: rgba(15, 23, 42, 0.95);
     border-color: #e5e7eb;
}
 .hero-note {
     font-size: 20px;
     color: #272727;
}
 .hero-note strong {
     color: #1f1f1f;
}
 .hero-right {
     background: radial-gradient(circle at 20% 0%, rgba(59, 130, 246, 0.3), transparent 60%), rgba(15, 23, 42, 0.9);
     border-radius: 1.5rem;
     padding: 1.3rem 1.3rem 1.5rem;
     box-shadow: var(--shadow-soft);
     border: 1px solid rgba(148, 163, 184, 0.6);
}
 .info-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 1.1rem;
     font-size: 0.9rem;
}
 .status-pill {
     padding: 0.2rem 0.65rem;
     border-radius: 999px;
     font-size: 0.72rem;
     background: rgba(34, 197, 94, 0.12);
     color: #bbf7d0;
     border: 1px solid rgba(34, 197, 94, 0.6);
     display: inline-flex;
     align-items: center;
     gap: 0.3rem;
}
 .status-dot {
     width: 7px;
     height: 7px;
     border-radius: 999px;
     background: #22c55e;
}
 .info-card {
     padding: 0.9rem 1rem;
     border-radius: 1rem;
     background: rgba(15, 23, 42, 0.8);
     border: 1px solid rgba(148, 163, 184, 0.7);
     margin-bottom: 0.75rem;
     font-size: 0.87rem;
}
 .info-label {
     font-size: 0.8rem;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     color: #9ca3af;
     margin-bottom: 0.15rem;
}
 .info-main {
     font-size: 0.95rem;
     color: #e5e7eb;
     font-weight: 500;
}
 .info-meta {
     font-size: 0.82rem;
     color: #9ca3af;
}
 .pill-row {
     display: flex;
     flex-wrap: wrap;
     gap: 0.4rem;
     margin-top: 0.4rem;
}
 .mini-pill {
     padding: 0.18rem 0.6rem;
     border-radius: 999px;
     border: 1px solid rgba(148, 163, 184, 0.6);
     font-size: 0.72rem;
     color: #cbd5f5;
     background: rgba(15, 23, 42, 0.85);
}
/* Sections */
 section {
     padding: 3.5rem 0;
}
 .section-header {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: flex-end;
     gap: 1rem;
     margin-bottom: 2rem;
     text-align: center;
     display: inline-block;
     width: 100%;
}
 .section-title-block h2 {
     margin: 0 0 0.3rem;
     font-size: 34px;
     letter-spacing: -0.02em;
     line-height: 40px;
     margin-top: 5px;
     margin-bottom: 10px;
}
 .section-title-block p {
     margin: 0;
     color: var(--muted);
     font-size: 19px;
     max-width: 100%;
     line-height: 24px;
     margin-top: 17px;
}
 .section-tag {
     font-size: 19px;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     color: #33ae62;
     font-weight: 600;
}
/* Story / Intro */
 .intro-grid {
     display: grid;
    /*grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1.1fr);
     */
    /*gap: 2rem;
     */
     align-items: flex-start;
}
 .intro-main {
     background: var(--card-bg);
     border-radius: var(--radius-lg);
     padding: 1.6rem 1.7rem;
     box-shadow: var(--shadow-soft);
    /* border: 1px solid var(--border);
     */
     font-size: 0.97rem;
     color: var(--muted);
     text-align: center;
     padding-top: 50px;
}
 .intro-main p {
     margin-top: 0;
     margin-bottom: 1rem;
     font-size: 18px;
     padding: 0px 15%;
     line-height: 26px;
}
 .intro-highlight {
     font-weight: 600;
     color: var(--text);
     font-size: 22px !important;
}
 .intro-bullets {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
     gap: 1rem;
     margin-top: 1.1rem;
     margin-top: 30px;
}
 .intro-bullet {
     display: flex;
     gap: 0.7rem;
     align-items: flex-start;
     font-size: 0.9rem;
     color: var(--muted);
     display: inline-block;
     text-align: center;
     background: #f9f9f9;
     border-radius: 20px;
     padding: 20px 10px;
}
 .intro-icon {
     width: 62px;
     height: 62px;
     border-radius: 999px;
     background: rgb(81 216 132 / 22%);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 30px;
     color: var(--primary-dark);
     flex-shrink: 0;
     display: inline-block;
     padding-top: 6px;
}
 .intro-side {
     display: grid;
     gap: 1rem;
}
 .stat-card {
     background: #0f172a;
     color: #e5e7eb;
     border-radius: var(--radius-lg);
     padding: 1.1rem 1.2rem;
     border: 1px solid #1f2937;
     box-shadow: 0 18px 40px rgba(15, 23, 42, 0.45);
     font-size: 0.9rem;
}
 .stat-card h3 {
     margin: 0 0 0.4rem;
     font-size: 1.5rem;
}
 .stat-card p {
     margin: 0;
     font-size: 0.88rem;
     color: #9ca3af;
}
 .note-card {
     background: #f9fafb;
     border-radius: var(--radius-lg);
     padding: 0.9rem 1rem;
     border: 1px dashed var(--border);
     font-size: 0.85rem;
     color: var(--muted);
}
/* Product Highlights */
 .product-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
     gap: 1.3rem;
}
 .product-card {
     background: var(--card-bg);
     border-radius: 1.1rem;
     padding: 20px 15px;
     border: 1px solid var(--border);
     box-shadow: 0 16px 30px rgba(148, 163, 184, 0.2);
     display: grid;
     gap: 0.7rem;
     transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
     cursor: pointer;
}
 .product-card:hover {
     transform: translateY(-3px);
     border-color: rgb(52 175 99 / 49%);
     box-shadow: 0 20px 40px rgb(52 175 99 / 19%);
}
 .product-tag {
     font-size: 16px;
     text-transform: uppercase;
     letter-spacing: 0px;
     color: #666;
}
 .product-title {
     font-size: 21px;
     font-weight: 600;
     line-height: 26px;
}
 .product-meta {
     font-size: 16px;
     color: var(--muted);
     line-height: 23px;
}
 .product-footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-top: 0.2rem;
     font-size: 16px;
}
 .product-link {
     display: inline-flex;
     align-items: center;
     gap: 0.25rem;
     font-weight: 600;
     color: var(--primary-dark);
}
 .pill {
     padding: 0.18rem 0.6rem;
     border-radius: 999px;
     font-size: 0.74rem;
     border: 1px solid rgba(148, 163, 184, 0.7);
     color: var(--muted);
}
/* Location & Map */
 .location-grid {
     display: grid;
     grid-template-columns: minmax(0, 1.1fr) minmax(320px, 1.1fr);
     gap: 1.8rem;
     align-items: stretch;
}
 .location-card {
     background: var(--card-bg);
     border-radius: var(--radius-lg);
     padding: 1.5rem 1.6rem;
     border: 1px solid var(--border);
     box-shadow: var(--shadow-soft);
     display: grid;
     gap: 1rem;
     font-size: 0.95rem;
}
 .location-row {
     display: flex;
     gap: 0.75rem;
     align-items: flex-start;
}
 .loc-label {
     font-size: 16px;
     font-weight: 600;
     color: #289e55;
     width: 110px;
     flex-shrink: 0;
     text-transform: uppercase;
     letter-spacing: 0.08em;
}
 .loc-value {
     color: var(--text);
     font-size: 16px;
}
 .hours-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 0.3rem 1.2rem;
     font-size: 16px;
     color: var(--muted);
}
 .hours-grid strong {
     color: var(--text);
}
 .directions-row {
     display: flex;
     flex-wrap: wrap;
     gap: 0.75rem;
     align-items: center;
     margin-top: 0.4rem;
}
 .btn-outline {
     padding: 0.7rem 1.4rem;
     border-radius: 999px;
     border: 1px solid #34af63;
     background: #34af6317;
     color: var(--primary-dark);
     font-weight: 600;
     font-size: 16px;
     display: inline-flex;
     align-items: center;
     gap: 0.4rem;
     cursor: pointer;
     transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
 .btn-outline:hover {
     background: #dbeafe;
     transform: translateY(-1px);
     box-shadow: 0 12px 24px rgba(59, 130, 246, 0.35);
}
 .loc-note {
     font-size: 0.82rem;
     color: var(--muted);
}
 .map-card {
     border-radius: var(--radius-lg);
     overflow: hidden;
     box-shadow: var(--shadow-soft);
     border: 1px solid var(--border);
     background: #0b1120;
}
 .map-frame {
     width: 100%;
     height: 100%;
     min-height: 300px;
     border: 0;
     display: block;
}
/* Local SEO */
 .seo-grid {
     display: grid;
     grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
     gap: 1.8rem;
     align-items: flex-start;
}
 .seo-main {
     background: var(--card-bg);
     border-radius: var(--radius-lg);
     padding: 1.5rem 1.6rem;
     border: 1px solid var(--border);
     box-shadow: 0 12px 26px rgba(148, 163, 184, 0.3);
     font-size: 0.95rem;
     color: var(--muted);
}
 .seo-main h3 {
     margin-top: 1.1rem;
     margin-bottom: 0.4rem;
     font-size: 1.05rem;
     color: var(--text);
}
 .area-list, .keyword-list {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
     margin: 0.5rem 0 0.9rem;
     padding: 0;
     list-style: none;
}
 .area-list li, .keyword-list li {
     font-size: 0.82rem;
     padding: 0.25rem 0.75rem;
     border-radius: 999px;
}
 .area-list li {
     background: #eff6ff;
     color: #1e40af;
     border: 1px solid #bfdbfe;
}
 .keyword-list li {
     background: #fef3c7;
     border: 1px solid #fde68a;
     color: #92400e;
}
 .seo-side {
     display: grid;
     gap: 1rem;
}
 .seo-note {
     font-size: 0.85rem;
     color: var(--muted);
     background: #f9fafb;
     border-radius: var(--radius-lg);
     padding: 1rem 1.1rem;
     border: 1px dashed var(--border);
}
 .seo-note strong {
     color: var(--text);
}
/* Testimonials */
 .testimonial-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: 1.4rem;
}
 .testimonial-card {
     background: var(--card-bg);
     border-radius: var(--radius-lg);
     padding: 1.4rem 1.5rem;
     border: 1px solid var(--border);
     box-shadow: 0 14px 30px rgba(148, 163, 184, 0.25);
     display: grid;
     gap: 0.7rem;
     font-size: 0.94rem;
}
 .testimonial-quote {
     font-style: italic;
     color: var(--muted);
     font-size: 16px;
     line-height: 25px;
}
 .testimonial-meta {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
     gap: 0.6rem;
     font-size: 16px;
     display: inline-block;
}
 .testimonial-name {
     font-weight: 600;
     font-size: 16px;
     float: left;
     width: 100%;
     margin-bottom: -3px;
}
 .testimonial-role {
     color: var(--muted);
}
 .testimonial-tag {
     font-size: 0.78rem;
     padding: 0.15rem 0.55rem;
     border-radius: 999px;
     background: #ecfdf5;
     color: #047857;
     border: 1px solid #a7f3d0;
     float: right;
     margin-top: -41px;
}
/* Footer */
 footer {
     border-top: 1px solid var(--border);
     padding: 4.3rem 0;
     background: #0f5529;
     color: #fff;
     padding-bottom: 26px;
}
 .footer-inner {
     display: grid;
     grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
     gap: 1.8rem;
     align-items: flex-start;
}
 .footer-brand {
     font-size: 16px;
     color: #fff;
     max-width: 26rem;
}
 .footer-brand strong {
     color: #e5e7eb;
}
 .footer-columns {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 1rem;
     font-size: 0.88rem;
}
 .footer-col-title {
     font-size: 18px;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     color: #fff;
     margin-bottom: 0.4rem;
}
 .footer-links, .footer-meta {
     list-style: none;
     padding: 0;
     margin: 0.2rem 0 0;
}
 .footer-links li {
     margin-bottom: 0.25rem;
}
 .footer-links a {
     color: #fff;
     opacity: 1;
}
 .footer-links a:hover {
     opacity: 1;
}
 .footer-meta li {
     font-size: 13px;
     color: #fff;
     margin-bottom: 0.2rem;
}
 .footer-bottom {
     margin-top: 1.5rem;
     border-top: 1px solid #1a7f41;
     padding-top: 0.9rem;
     font-size: 15px;
     color: #fff;
     display: flex;
     justify-content: space-between;
     gap: 1rem;
     flex-wrap: wrap;
}
/* Responsive */
 @media (max-width: 960px) {
     nav ul {
         display: none;
    }
     .mobile-toggle {
         display: inline-flex;
    }
     .hero-grid, .intro-grid, .location-grid, .seo-grid, .footer-inner {
         grid-template-columns: minmax(0, 1fr);
    }
     .hero-right {
         margin-top: 1.5rem;
    }
     .hours-grid {
         grid-template-columns: minmax(0, 1fr);
    }
}
 @media (max-width: 640px) {
     .hero-inner {
         padding-top: 2.8rem;
    }
     section {
         padding: 2.8rem 0;
    }
     .hero-cta-row {
         flex-direction: column;
         align-items: stretch;
    }
     .footer-columns {
         grid-template-columns: minmax(0, 1fr);
    }
     .header-inner {
         align-items: center;
    }
}
 .logo_main {
     float: left;
     width: 110px;
     margin-top: -5px;
     margin-bottom: -5px;
}
 .eyebrow-badge_2{
     display: inline-block;
     float: left;
     margin-top: 0px;
     font-size: 15px;
}
 .prdc_sec{
     background:#fff;
     padding: 100px 0px;
}
 .sec_main_1, .loc_sec{
     padding: 100px 0px;
}
 .clear{
     clear: both;
}
 .main_tx1 strong{
     font-size: 20px;
     color: #333;
     font-weight: 600;
     margin-bottom: 9px;
     display: inline-block;
}
 .main_tx1{
     font-size: 16px;
     line-height: 22px;
}
 .categ_img{
     width: 100%;
     height: 150px;
     object-fit: cover;
     border-radius: 20px;
}
 .logo:focus-visible, .header-inner a:focus-visible{
     outline: none;
}
 .tesm_sec{
     background:#fff;
     padding: 100px 0px;
}
 .footer_logo{
     width: 100px;
}
/* Smooth scrolling for anchor links (hero buttons, nav, etc.) */
 html {
     scroll-behavior: smooth;
}
/* WOW.js base behaviour */
 .wow {
     visibility: hidden;
}
 .wow.animated {
     visibility: visible;
}
/* Keyframes */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(24px);
    }
     to {
         opacity: 1;
         transform: translateY(0);
    }
}
 @keyframes fadeInRight {
     from {
         opacity: 0;
         transform: translateX(24px);
    }
     to {
         opacity: 1;
         transform: translateX(0);
    }
}
 @keyframes floatSoft {
     0% {
         transform: translateY(0) scale(1);
    }
     50% {
         transform: translateY(-4px) scale(1.02);
    }
     100% {
         transform: translateY(0) scale(1);
    }
}
 @keyframes pulseSoft {
     0% {
         transform: translateY(0) scale(1);
    }
     50% {
         transform: translateY(-1px) scale(1.02);
    }
     100% {
         transform: translateY(0) scale(1);
    }
}
 @keyframes cardFloatIn {
     from {
         opacity: 0;
         transform: translateY(20px) scale(0.98);
    }
     to {
         opacity: 1;
         transform: translateY(0) scale(1);
    }
}
/* WOW helpers – optional if you want to use WOW classes like .wow.fadeInUp */
 .wow.fadeInUp {
     animation-name: fadeInUp;
}
 .wow.fadeInRight {
     animation-name: fadeInRight;
}
 .wow.cardFloatIn {
     animation-name: cardFloatIn;
}
/* Component-level animations (no colours, only motion/opacity) */
/* Logo subtle float */
 .logo-mark {
     animation: floatSoft 4.5s ease-in-out infinite;
}
/* Hero entry */
 .hero-left {
     animation: fadeInUp 0.8s ease-out 0.1s both;
}
 .hero-right {
     animation: fadeInRight 0.9s ease-out 0.2s both;
}
/* Hero badges staggered */
 .hero-badge {
     opacity: 0;
     animation: fadeInUp 0.6s ease-out forwards;
}
 .hero-badge:nth-child(1) {
     animation-delay: 0.25s;
}
 .hero-badge:nth-child(2) {
     animation-delay: 0.35s;
}
 .hero-badge:nth-child(3) {
     animation-delay: 0.45s;
}
/* Primary CTA subtle pulse */
 .btn-primary {
     animation: pulseSoft 3.2s ease-in-out infinite;
}
/* Product cards float-in */
 .product-card {
     opacity: 0;
     animation: cardFloatIn 0.7s ease-out forwards;
}
 .product-card:nth-child(1) {
     animation-delay: 0.15s;
}
 .product-card:nth-child(2) {
     animation-delay: 0.25s;
}
 .product-card:nth-child(3) {
     animation-delay: 0.35s;
}
 .product-card:nth-child(4) {
     animation-delay: 0.45s;
}
 .product-card:nth-child(5) {
     animation-delay: 0.55s;
}
 .product-card:nth-child(6) {
     animation-delay: 0.65s;
}
/* Testimonials float-in */
 .testimonial-card {
     opacity: 0;
     animation: cardFloatIn 0.8s ease-out forwards;
}
 .testimonial-card:nth-child(1) {
     animation-delay: 0.2s;
}
 .testimonial-card:nth-child(2) {
     animation-delay: 0.3s;
}
 .testimonial-card:nth-child(3) {
     animation-delay: 0.4s;
}
/* Reduced motion support */
 @media (prefers-reduced-motion: reduce) {
     * {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition: none !important;
    }
}
 


@media (max-width: 991px) {

.phone-pill{
    display: none;
}

header .container{
    padding: 0px;
}

.header-inner{
        display: inline-block; 
    width: 100%;
}

.header-inner nav{
        float: right;
    margin-top: -60px;
}

.container {
    width: 100%;
    max-width: 94%;
}

.mobile-toggle{
        background: #fff;
    padding: 10px 18px;
    border: 0px;
    font-size: 20px;
}

.intro-main p{
    padding: 0px 2%;
}

.mobile-nav.active{
        display: block !important;
    position: absolute;
    background: #3d3d3d;
    width: 100%;
    left: 0;
    top: 0;
    margin-top: 93px;
}

.mobile-nav a {
    color:#fff;
 
}

}



@media (max-width: 640px) {

    .container {
        width: 100%;
        max-width: 94%;
        padding: 0px 0px;
    }

    .eyebrow-badge {

    font-size: 0.5rem;
}

}