*/ .testimonial-section .container-xxl { position: relative; z-index: var(--z-val-2); } .testimonial-section { position: relative; padding: var(--space-100) var(--space-0) var(--space-px-80) var(--space-0); } /* Background Image */ .section-background-blur { position: absolute; top: var(--space-0); left: var(--space-0); width: var(--space-pct-val-100); height: var(--space-pct-val-100); background-image: url("../img/reviews.png"); background-size: cover; background-position: center right; opacity: 1; z-index: var(--z-base); pointer-events: none; } /* Title & Subtitle (LEFT ALIGNED) */ .testimonial-section .section-title, .testimonial-section .section-subtitle { color: var(--color-gray-800-v2); text-shadow: none; position: relative; z-index: var(--z-val-2); text-align: left; /* FINAL FIX: Title is left aligned */ margin-bottom: var(--space-px-5); }.testimonial-section .section-title { font-weight: var(--font-weight-bold); }.testimonial-section .section-subtitle { color: var(--color-gray-600); margin-bottom: var(--space-30); } /* Testimonial Card */ .testimonial-card { display: flex; flex-direction: column; background-color: var(--color-white); border-radius: var(--radius-val-12px); padding: var(--space-30); box-shadow: var(--space-0) var(--space-1) var(--space-6) var(--color-gray-a10-900); height: var(--space-pct-val-100); text-align: left; position: relative; z-index: var(--z-val-2); }.testimonial-card blockquote { color: var(--color-gray-700); line-height: var(--line-height-relaxed); flex-grow: 1; margin-bottom: var(--space-6); }.testimonial-card .client-name { margin-top: auto; font-weight: var(--font-weight-normal); color: var(--color-gray-900); font-size: var(--font-size-md-rem); } /* Star Rating */ .testimonial-card .star-rating { display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-6); }.testimonial-card .star-rating i { font-size: var(--font-size-md-rem); } /* NPAV 2026 testimonial-card styles moved to npav-2026-home.css */ /* Owl Carousel Wrapper */ .testimonial-section #testimonial-carousel { margin-top: var(--space-7) !important; position: relative; } /* Owl Carousel Arrows (Visible and outside the cards) */ .testimonial-section .owl-nav { position: absolute; top: var(--space-pct-val-50); transform: translateY(-50%); width: var(--space-pct-val-120); left: var(--space-pct-val--10); z-index: var(--z-sticky); } .testimonial-section .owl-nav button.owl-prev, .testimonial-section .owl-nav button.owl-next { position: absolute; top: var(--space-0); width: var(--space-px-38); height: var(--space-px-38); margin: var(--space-0); border-radius: var(--radius-val-50pct); background: var(--color-gray-50); border: 1px solid var(--color-border-light); font-size: var(--font-size-val-1-2rem); color: var(--color-gray-600); transition: all var(--transition-fast); outline: none; opacity: 1; } .testimonial-section .owl-nav button:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } .testimonial-section .owl-nav button span { display: none !important; } /* Arrow content: Corrected for Font Awesome 6 */ .testimonial-section .owl-nav button.owl-prev::before { content: "\f053"; font-family: 'Font Awesome 6 Free'; font-weight: var(--font-weight-val-900); line-height: var(--line-height-val-38px); display: block; }.testimonial-section .owl-nav button.owl-next::before { content: "\f054"; font-family: 'Font Awesome 6 Free'; font-weight: var(--font-weight-val-900); line-height: var(--line-height-val-38px); display: block; } .testimonial-section .owl-nav.disabled { display: block !important; opacity: 1 !important; } /* Final Arrow Positioning */ .testimonial-section .owl-nav button.owl-prev { left: var(--space-0); }.testimonial-section .owl-nav button.owl-next { right: var(--space-0); } .testimonial-section .owl-nav button:hover { background: var(--npav-green-primary); color: var(--color-white); border-color: var(--npav-green-primary); box-shadow: var(--space-0) var(--space-0) var(--space-px-5) var(--color-gray-a30-900); } /* Owl Carousel Dots */ .testimonial-section .owl-dots { margin-top: var(--space-30); text-align: center; }.testimonial-section .owl-dots .owl-dot span { width: var(--space-4); height: var(--space-4); margin: var(--space-0) var(--space-px-5); background: var(--color-border-light); display: block; border-radius: var(--radius-val-30px); transition: background var(--transition-fast); }.testimonial-section .owl-dots .owl-dot.active span { background: var(--npav-green-primary); } /* Responsive */ @media (min-width: 992px) { .testimonial-section { padding: var(--space-100) var(--space-0); } .testimonial-section .owl-nav { width: var(--space-pct-val-110); left: var(--space-pct-val--5); } } @media (max-width: 768px) { .section-background-blur { background-position: center top; } } /* ========================================= */ /* Features */ /* ========================================= */ .feature-item { display: flex; gap: var(--space-px-16); align-items: flex-start; } .feature-icon { width: var(--space-px-44); height: var(--space-px-44); border-radius: var(--radius-val-50pct); background: var(--color-green-200); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-lg); flex-shrink: 0; } .feature-item h6 { font-weight: var(--font-weight-bold); margin-bottom: var(--space-2); color: var(--color-gray-900-v3); } .feature-item p { font-size: var(--font-size-val-0-95rem); color: var(--color-gray-600-v4); line-height: var(--line-height-val-1-55); } /* ========================================= */ /* Mobile */ /* ========================================= */ @media (max-width: 991px) { .users-secured::before { width: var(--space-pct-val-100); height: var(--space-pct-val-45); } } @media (max-width: 767px) { .users-secured { padding: var(--space-pct-val-3) var(--space-0); } } /* ========================================================= */ /* --- Security Features Section Styles (Image Fixes) --- */ /* ========================================================= */ .security-features-section { padding-top: var(--space-px-50); padding-bottom: var(--space-px-50); background-color: var(--color-white); } .security-features-section .feature-col { display: flex; justify-content: center; align-items: flex-start; transition: all var(--transition-val-0-5s-ease-in-out); } /* MOVED INLINE BACKGROUND IMAGES TO CSS FOR SEO */ .feature-card-wrapper.card-zerov-deeplearn { background-image: url('../img/Zero_Deep_learn_ai.png'); } .feature-card-wrapper.card-secure-web { background-image: url('../img/secure_web_and_payments.png'); } .feature-card-wrapper.card-pc-optimization { background-image: url('../img/PC_optimization.png'); } .feature-card-wrapper.card-auto-updates { background-image: url('../img/Auto_security_updates.png'); } .feature-card-wrapper.card-privacy-lockdown { background-image: url('../img/Privacy_lockdown.png'); } /* ----------------------------------------------------- */ /* 1. INITIAL STATE: TALL OVAL CARD (Wrapper & Content) */ /* ----------------------------------------------------- */ .security-features-section .feature-card-wrapper { position: relative; width: var(--space-pct-val-100); max-width: var(--space-px-250); height: var(--space-px-400); overflow: hidden; border-radius: var(--radius-val-9999px); background-size: cover; background-position: center; border: 5px solid var(--color-white); transition: all var(--transition-val-0-5s-ease-in-out), box-shadow var(--transition-normal); cursor: pointer; } /* Fully visible background */ .security-features-section .feature-card-wrapper::after { content: ''; position: absolute; top: var(--space-0); left: var(--space-0); width: var(--space-pct-val-100); height: var(--space-pct-val-100); border-radius: inherit; z-index: var(--z-base); background: transparent; } /* Text content - initially bottom center */ .security-features-section .circle-content { position: absolute; bottom: var(--space-6); width: var(--space-pct-val-100); text-align: center; padding: var(--space-6) var(--space-0); z-index: var(--z-val-2); color: var(--color-white); transition: all var(--transition-val-0-5s-ease-in-out); } /* Feature Title Styling */ .security-features-section .feature-card-wrapper .feature-title { font-size: var(--font-size-val-1-0em); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-px-2) !important; text-align: center; color: var(--color-white); padding: var(--space-0) var(--space-8); display: block; } /* Description Styling (hidden initially) */ .security-features-section .feature-description { font-size: var(--font-size-val-0-9rem); font-weight: var(--font-weight-normal); color: var(--color-border-light); margin-bottom: var(--space-0); max-height: var(--space-0); opacity: 0; overflow: hidden; padding-top: var(--space-0); transition: max-height var(--transition-val-0-4s-ease-in-out), opacity var(--transition-normal), padding-top var(--transition-val-0-4s); text-align: left; } /* ----------------------------------------------------- */ /* 2. HOVER STATE: EXPANSION & CONTENT REVEAL */ /* ----------------------------------------------------- */ /* Shrink/expand columns */ .security-features-section .security-row:hover .feature-col { max-width: var(--space-pct-10); flex-basis: 10%; }.security-features-section .security-row .feature-col:hover { max-width: var(--space-pct-val-40); flex-basis: 40%; } /* Card transformation */ .security-features-section .feature-col:hover .feature-card-wrapper { max-width: var(--space-pct-val-100); border-radius: var(--radius-val-20px); height: var(--space-px-400); box-shadow: 0 0 0 1px var(--color-gray-100), 0 15px 30px var(--color-gray-a40-900), 0 0 30px var(--color-cyan-a80-500); display: block; padding: var(--space-30); } /* Keep overlay transparent */ .security-features-section .feature-col:hover .feature-card-wrapper::after { background: transparent; } /* Move title and description to left-bottom on hover */ .security-features-section .feature-col:hover .circle-content { position: absolute; bottom: var(--space-7); left: var(--space-7); width: calc(100% - 40px); text-align: left; padding: var(--space-0); margin: var(--space-0); } /* Reveal description */ .security-features-section .feature-col:hover .feature-description { max-height: var(--space-px-200); opacity: 1; padding-top: var(--space-px-5); text-align: left; } /* Adjust title alignment and font on hover */ .security-features-section .feature-col:hover .feature-card-wrapper .feature-title { text-align: left; font-size: var(--font-size-val-1-1em); padding: var(--space-0); } /* Paragraph inside description */ .security-features-section .feature-description p { color: inherit; text-align: inherit; } /* ============================================ */ /* Added: New Pricing Plans Section */ /* ============================================ */ /* Section Container */ .pricing-plans-section { padding-top: var(--space-7); padding-bottom: var(--space-px-50); background-color: var(--npav-light-bg); } .pricing-plans-section .section-title { font-size: var(--font-size-val-2-5rem); font-weight: var(--font-weight-bold); } .pricing-plans-section .text-muted { font-size: var(--font-size-md-rem); color: var(--color-gray-600) !important; } /* Base Card Styling */ .pricing-plans-section .plan-card { background-color: var(--color-white); border-radius: var(--radius-val-12px); box-shadow: var(--space-0) var(--space-4) var(--space-30) var(--color-gray-a8-900); padding: var(--space-30); transition: all var(--transition-normal); height: var(--space-pct-val-100); position: relative; border: 1px solid var(--color-gray-100); } .pricing-plans-section .plan-card:hover { box-shadow: var(--space-0) var(--space-6) var(--space-8) var(--color-gray-a15-900); transform: translateY(-5px); } /* Header */ .pricing-plans-section .plan-header { text-align: center; margin-bottom: var(--space-30); } .pricing-plans-section .plan-title { font-size: var(--font-size-val-1-75rem); font-weight: var(--font-weight-bold); margin-bottom: var(--space-px-5); color: var(--npav-green-dark); } .pricing-plans-section .plan-tagline { font-size: var(--font-size-val-0-95rem); color: var(--color-gray-600); margin-bottom: var(--space-7); } /* Pricing Display */ .pricing-plans-section .plan-price { margin-top: var(--space-6); } .pricing-plans-section .price-value { font-size: var(--font-size-val-2rem); font-weight: var(--font-weight-normal); color: var(--color-gray-900); } .pricing-plans-section .price-duration { font-size: var(--font-size-base-rem); font-weight: var(--font-weight-medium); color: var(--color-gray-600); } /* Features List */ .pricing-plans-section .plan-features { padding-left: var(--space-0); margin-bottom: var(--space-30); } .pricing-plans-section .check-item { font-size: var(--font-size-val-1-05rem); padding: var(--space-4) var(--space-0); border-bottom: 1px dashed var(--color-gray-100); display: flex; align-items: center; min-height: var(--space-px-48); } /* Uses Boxicons (bx-check, bx-x) */ .pricing-plans-section .check-item i { font-size: var(--font-size-val-1-25rem); margin-right: var(--space-4); color: var(--npav-green-primary); width: var(--space-7); text-align: center; } .pricing-plans-section .check-item.disabled { color: var(--color-gray-400); opacity: 0.7; } .pricing-plans-section .check-item.disabled i { color: var(--color-gray-400); } /* Recommended/Best Value Card (Premium) */ .pricing-plans-section .plan-card.recommended { border-color: var(--npav-green-primary); box-shadow: 0 10px 40px var(--color-gray-a15-900), 0 0 0 4px var(--npav-green-primary); transform: translateY(-10px); } .pricing-plans-section .plan-card.recommended:hover { transform: translateY(-15px); } .pricing-plans-section .plan-card.recommended .ribbon { position: absolute; top: var(--space-px--15); right: var(--space-7); background-color: var(--npav-green-primary); color: var(--color-white); padding: var(--space-px-5) var(--space-6); font-size: var(--font-size-val-0-9rem); font-weight: var(--font-weight-medium); border-radius: var(--space-0) var(--space-0) var(--radius-base) var(--radius-base); box-shadow: var(--space-0) var(--space-px-5) var(--space-6) var(--color-gray-a20-900); } /* ============================================ */ /* Combined Tabbed/2-Column Accordion FAQ Styles */ /* ============================================ */ .faq-section { background-color: var(--npav-light-bg); padding-top: var(--space-px-50); } .faq-section .section-title { font-size: var(--font-size-val-2-5rem); font-weight: var(--font-weight-bold); color: var(--npav-green-dark); } /* --- 1. Horizontal Tab Navigation Styling (Top Bar) --- */ .faq-tabs { border: 1px solid var(--color-blue-300); border-radius: var(--radius-base); padding: var(--space-4) var(--space-6); justify-content: center; margin-bottom: var(--space-0) !important; } .faq-tabs .nav-item { margin: var(--space-0) var(--space-4); } .faq-tabs .nav-link { font-size: var(--font-size-val-1-0rem); font-weight: var(--font-weight-normal); color: var(--color-gray-600); padding: var(--space-px-2) var(--space-6); border-radius: var(--radius-val-40px); /* matches .tabs-section .nav-pills pill shape */ border: none; transition: all var(--transition-normal); background-color: transparent; } .faq-tabs .nav-link:hover:not(.active) { color: var(--npav-green-dark); background-color: var(--color-gray-100-v3); } /* Active Tab Style — matches .tabs-section .nav-pills .nav-link.active (fill + glow) */ .faq-tabs .nav-link.active { color: var(--color-white); background-color: var(--npav-green-primary); border: 1px solid var(--npav-green-primary); box-shadow: var(--space-0) var(--space-1) var(--space-4) var(--color-green-a40-500); } /* --- 2. Accordion Styling (Inside the 2 Columns) --- */ .faq-accordion-column { --bs-accordion-border-width: 0; } .faq-accordion-column .accordion-item { border: 1px solid var(--color-gray-100); border-radius: var(--radius-base); margin-bottom: var(--space-6); overflow: hidden; box-shadow: var(--space-0) var(--space-px-2) var(--space-px-5) var(--color-gray-a5-900); } /* Question Header (The button) */ .faq-accordion-column .accordion-button { font-size: var(--font-size-val-1-05rem); font-weight: var(--font-weight-semibold); color: var(--npav-green-dark); padding: var(--space-px-18) var(--space-7); background-color: var(--color-white); box-shadow: none !important; transition: all var(--transition-normal); } /* Active Question Header (Expanded) */ .faq-accordion-column .accordion-button:not(.collapsed) { color: var(--npav-green-primary); background-color: var(--color-white); border-bottom: 1px solid var(--color-gray-100); } /* Styling the Expand/Collapse Icon (+) */ .faq-accordion-column .accordion-button::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23007a44'%3E%3Cpath fill-rule='evenodd' d='M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm.5-9a.5.5 0 0 0-1 0v2H6a.5.5 0 0 0 0 1h1.5v2a.5.5 0 0 0 1 0v-2H10a.5.5 0 0 0 0-1H8.5V6z'/%3E%3C/svg%3E"); width: var(--space-7); height: var(--space-7); background-size: 100%; transform: none; filter: brightness(0.7); } /* Icon for Active/Expanded State (Minus icon) */ .faq-accordion-column .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23007a44'%3E%3Cpath fill-rule='evenodd' d='M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm-4-7a.5.5 0 0 0 0 1h8a.5.5 0 0 0 0-1H4z'/%3E%3C/svg%3E"); filter: none; } /* Answer Content */ .faq-accordion-column .accordion-body { padding: var(--space-7); font-size: var(--font-size-val-1-0rem); line-height: var(--line-height-val-1-7); color: var(--color-gray-700); background-color: var(--color-white); border-top: 1px solid var(--color-gray-100-v3); } @media (max-width: 768px) { .faq-accordion-column { margin-bottom: var(--space-6); } } /* ============================================ RESTORE CTA BUTTON STYLES (NO NAV IMPACT) ============================================ */ /* Button container */ .right-cta-block .d-flex { align-items: center; } /* Buy Now button */ .btn-npav-green { background-color: var(--npav-green-primary); color: var(--color-white); font-weight: var(--font-weight-normal); border-radius: var(--radius-base); padding: var(--space-rem-sm) var(--space-rem-val-1-2); box-shadow: var(--space-0) var(--space-1) var(--space-3) var(--color-green-a35-700); white-space: nowrap; } .btn-npav-solid { background-color: var(--npav-green-primary); border: 2px solid var(--npav-green-primary); color: var(--color-white); font-weight: var(--font-weight-normal); border-radius: var(--radius-base); padding: var(--space-rem-sm) var(--space-rem-val-1-2); } .btn-npav-solid:hover { background-color: var(--npav-green-dark); } .btn-npav-green:hover { background-color: var(--npav-green-dark); color: var(--color-white); } /* ============================================ */ /* Added: Partner & Feedback Section Styles */ /* ============================================ */ .partner-feedback-section { padding: var(--space-8) var(--space-0); background-color: var(--color-cyan-50-v5); background-image: url('data:image/svg+xml;utf8,'); background-size: 100px 100px; } .partner-feedback-section .section-title { font-size: var(--font-size-val-2-25rem); font-weight: var(--font-weight-bold); color: var(--color-gray-900); margin-bottom: var(--space-px-5); } .partner-feedback-section .section-subtitle { font-size: var(--font-size-val-1-05rem); color: var(--color-gray-600); margin-bottom: var(--space-px-50); } /* Button Styling */ .partner-feedback-section .btn-npav-green { font-size: var(--font-size-val-1-05rem); padding: var(--space-2) var(--space-px-25); border-radius: var(--radius-base); display: inline-flex; align-items: center; } .partner-feedback-section .btn-npav-green i { margin-left: var(--space-3); font-size: var(--font-size-val-1-2em); } /* --- Right Column: Contact Cards Styling --- */ .contact-info-block h4 { font-size: var(--font-size-val-1-75rem); font-weight: var(--font-weight-medium); color: var(--color-text); margin-bottom: var(--space-6); } .contact-info-block p { font-size: var(--font-size-base-rem); color: var(--color-gray-600-v3); line-height: var(--line-height-relaxed); } /* ============================================ */ /* Awards and Certifications Section */ /* ============================================ */ .awards-section { background-color: var(--color-gray-100-v6); padding-top: var(--space-px-50); padding-bottom: var(--space-px-50); } /* Main Section Title Text (Standard dark color, no background) */ .awards-title { color: var(--color-gray-900); font-size: var(--font-size-val-2-2rem); font-weight: var(--font-weight-bold); } .awards-section .lead { color: var(--color-gray-600); font-size: var(--font-size-val-1-15rem); margin-bottom: var(--space-pct-1); } /* Award Item Styling */ .award-item { padding: var(--space-4); } .award-badge { background-color: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--space-0) var(--space-1) var(--space-4) var(--color-gray-a5-900); overflow: hidden; padding: var(--space-0); transition: transform var(--transition-normal), box-shadow var(--transition-normal); height: var(--space-pct-val-100); display: flex; flex-direction: column; } .award-badge img { height: auto; max-height: var(--space-px-230); width: auto; object-fit: contain; padding: var(--space-7); flex-grow: 1; } /* Individual Award Label */ .award-badge .award-label { background-color: var(--color-green-500); color: var(--color-white); padding: var(--space-4) var(--space-px-5); font-size: var(--font-size-base-rem); font-weight: var(--font-weight-medium); margin-bottom: var(--space-0); line-height: var(--line-height-val-1-2); text-transform: capitalize; width: var(--space-pct-val-100); border-radius: var(--space-0) var(--space-0) var(--radius-md) var(--radius-md); } /* Owl Carousel Arrows Styling */ .awards-section .owl-nav { position: absolute; top: var(--space-pct-val-50); width: var(--space-pct-val-100); transform: translateY(-50%); display: flex; justify-content: space-between; padding: var(--space-0) var(--space-px-5); pointer-events: none; } /* Arrow Button Background and Shape */ .awards-section .owl-nav button { background: var(--color-white) !important; color: var(--color-gray-600) !important; border-radius: var(--radius-val-50pct) !important; width: var(--space-8); height: var(--space-8); display: flex !important; align-items: center; justify-content: center; transition: all var(--transition-fast); box-shadow: var(--space-0) var(--space-1) var(--space-4) var(--color-gray-a20-900); pointer-events: auto; opacity: 0.8; z-index: var(--z-sticky); } .awards-section .owl-nav button:hover { background: var(--color-gray-50) !important; opacity: 1; } /* Font Awesome Icons */ .awards-section .owl-nav button.owl-prev:before { content: "\f053"; font-family: 'Font Awesome 6 Free'; font-weight: var(--font-weight-val-900); }.awards-section .owl-nav button.owl-next:before { content: "\f054"; font-family: 'Font Awesome 6 Free'; font-weight: var(--font-weight-val-900); }.awards-section .owl-nav button span { display: none; } /* NPAV 2026 awards/trust-badge styles moved to npav-2026-home.css */ /* Custom Button Styling for the 'Explore' CTA */ .btn-npav-green.btn-lg { background-color: var(--npav-green-primary); color: var(--color-white); padding: var(--space-5) var(--space-36); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); border-radius: var(--radius-base); transition: background-color var(--transition-normal); } .btn-npav-green.btn-lg:hover { background-color: var(--npav-green-dark); } /* ============================================ */ /* Blog/News Section Styles */ /* ============================================ */ blog-section { background-color: var(--color-gray-50); padding-top: var(--space-px-80); padding-bottom: var(--space-px-80); } .blog-title { font-size: var(--font-size-val-2-5rem); font-weight: var(--font-weight-medium); color: var(--color-gray-900); /* margin-bottom: var(--space-px-50); */ } /* Individual Article Card */ .article-card { background-color: var(--color-white); border-radius: var(--radius-base); border: 1px solid var(--color-gray-200-v2); overflow: hidden; height: var(--space-pct-val-100); display: flex; flex-direction: column; } .article-card a.card-link { color: inherit; text-decoration: none; display: block; flex-grow: 1; } /* Image Wrapper for the Neon Image */ .card-img-wrapper { height: var(--space-px-200); overflow: hidden; position: relative; } .article-img { width: var(--space-pct-val-100); height: var(--space-pct-val-100); object-fit: cover; } /* Card Body Content */ .article-card .card-body { padding: var(--space-6); flex-grow: 1; } .article-title { font-size: var(--font-size-val-1-15rem); font-weight: var(--font-weight-medium); color: var(--color-gray-900); margin-bottom: var(--space-3); line-height: var(--line-height-val-1-4); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: var(--space-rem-val-2-8); } .article-summary { font-size: var(--font-size-val-0-95rem); color: var(--color-gray-600); line-height: var(--line-height-normal); /* Limit summary to 3 lines */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: var(--space-rem-val-4-2); /* Ensure minimum height for summaries */ } /* Card Footer (Read Link and Date) */ .article-card .card-footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-gray-100-v3); font-size: var(--font-size-val-0-85rem); } .article-card .continue-reading { color: var(--color-green-500); /* Green link color */ font-weight: var(--font-weight-medium); text-decoration: none; transition: color var(--transition-fast); } .article-card .continue-reading:hover { color: var(--color-warning-alt); } .article-card .article-date { color: var(--color-gray-600); } /* Owl Carousel Navigation for Blog Section (Dark Arrows on light background) */ .blog-section .owl-nav { position: absolute; top: var(--space-pct-val-50); width: var(--space-pct-val-100); transform: translateY(-50%); display: flex; justify-content: space-between; padding: var(--space-0) var(--space-4); pointer-events: none; } .blog-section .owl-nav button { background: var(--color-green-500) !important; /* Green background for arrows */ color: var(--color-white) !important; border-radius: var(--radius-val-50pct) !important; width: var(--space-px-45); height: var(--space-px-45); display: flex !important; align-items: center; justify-content: center; box-shadow: var(--space-0) var(--space-1) var(--space-4) var(--color-gray-a40-900); pointer-events: auto; opacity: 0.9; }.blog-section .owl-nav button:hover { background: var(--color-green-600-v4) !important; opacity: 1; }.blog-section .owl-nav button span { display: none; }.blog-section .owl-nav button.owl-prev:before { content: "\f053"; font-family: 'Font Awesome 6 Free'; font-weight: var(--font-weight-val-900); }.blog-section .owl-nav button.owl-next:before { content: "\f054"; font-family: 'Font Awesome 6 Free'; font-weight: var(--font-weight-val-900); } /* ------------------- Product Section ------------------- */ .product-main-section { padding: var(--space-rem-val-3) var(--space-0); /* background-color: var(--color-bg-tint); */ /* background: linear-gradient(82deg, var(--color-green-a5-700) 0%, var(--color-green-a12-700) 45%, var(--color-green-a18-700) 100%); */ background: linear-gradient(82deg, var(--color-green-a12-700) 0%, var(--color-green-a12-700) 45%, var(--color-green-a0-700) 100%); } /* Hero row: default Bootstrap gutter (1.5rem) left a wide gap between the image column and the details column now that the image isn't stretched to fill its column — pull them closer together. */ .product-main-section .container-custom-wide > .row { --bs-gutter-x: 1rem; } /* ------------------- Product Image ------------------- */ .pd-product-image-container { max-width: var(--space-px-520); margin: var(--space-0) auto; text-align: center; /* centers Powered By below image */ position: relative; border-radius: var(--radius-val-0-75rem); overflow: hidden; transition: box-shadow var(--transition-normal); } .pd-product-image-container:hover { box-shadow: var(--space-0) var(--space-rem-md) var(--space-rem-lg) var(--color-gray-a15-900); } .pd-product-image-container img { width: var(--space-pct-val-80); height: auto; display: block; margin: var(--space-0) auto; border-radius: var(--radius-val-0-75rem); } .pd-powered-by { font-size: var(--font-size-val-0-85rem); color: var(--color-gray-600); margin-top: var(--space-rem-sm); /* keeps it below the image */ display: flex; justify-content: center; align-items: center; gap: var(--space-rem-sm); } .pd-powered-by .fw-bold { font-size: var(--font-size-val-1-2rem); color: var(--color-gray-900-v4); } .pd-powered-by img { height: var(--space-px-65); width: auto; } /* ------------------- Pricing ------------------- */ .pd-price-text { font-size: var(--font-size-val-2-2rem); font-weight: var(--font-weight-bold); color: var(--color-gray-900-v2); } .pd-old-price { /* text-decoration: line-through; */ /* color: var(--color-warning-alt); */ /* color: var(--color-gray-600-v5); */ /* font-size: var(--font-size-val-1-4rem); 16-02-2026 */ /* margin-right: var(--space-rem-0-75); */ font-size: var(--font-size-val-1-3rem); font-weight: var(--font-weight-medium); color: var(--color-gray-500-v2); text-decoration: line-through; opacity: 0.9; } .pd-save-badge { border-radius: var(--radius-val-0-25rem); transition: transform var(--transition-val-0-25s-ease), box-shadow var(--transition-val-0-25s-ease), background-color var(--transition-val-0-25s-ease); grid-area: save; background-color: var(--color-teal-500); color: var(--npav-dark-bg); font-weight: var(--font-weight-medium); padding: var(--space-rem-val-0-3) var(--space-rem-val-1-4) var(--space-rem-val-0-3) var(--space-rem-md); margin: var(--space-0); box-shadow: var(--space-0) var(--space-px-2) var(--space-px-5) var(--color-gray-a15-900); font-size: var(--font-size-base-rem); justify-self: start; clip-path: polygon(0% 0%, calc(100% - 8px) 0%, calc(100% - 14px) 50%, calc(100% - 8px) 100%, 0% 100%, 8px 50%); display: inline-flex; align-items: center; justify-content: center; } .pd-save-badge:hover { box-shadow: var(--space-0) var(--space-2) var(--space-5) var(--color-gray-a20-900); background-color: var(--color-green-600-v3); } /* ------------------- Buttons ------------------- */ .pd-btn, .pd-buy-now-btn, .pd-btn-custom { display: inline-block; font-weight: var(--font-weight-medium); font-size: var(--font-size-base-rem); padding: var(--space-rem-val-0-65) var(--space-rem-val-2-2); border-radius: var(--radius-base); cursor: pointer; text-align: center; transition: all var(--transition-normal); text-decoration: none; }/* .pd-features-section { padding: var(--space-rem-val-5) var(--space-0); background-color: var(--color-bg-tint); border-radius: var(--radius-val-0-5rem); } */ .pd-features-section { background-image: url('../img/featurebg.png'); background-size: cover; background-repeat: no-repeat; background-position: center; background-color: var(--color-cyan-a7-700); padding: var(--space-rem-val-2-2) var(--space-0); border-radius: var(--radius-val-0-5rem); position: relative; z-index: var(--z-base); } /* ---------- Actions Wrapper (Grid) ---------- */ .row.g-3.align-items-stretch { display: flex; flex-wrap: wrap; gap: var(--space-rem-md); } .pd-buy-now-btn { background: linear-gradient(135deg, var(--color-success), var(--color-primary-light)); color: var(--color-white); border: none; box-shadow: var(--space-0) var(--space-rem-val-0-25) var(--space-rem-sm) var(--color-gray-a15-900); font-size: var(--font-size-base-rem); font-weight: var(--font-weight-normal); /* padding: var(--space-rem-val-0-65) var(--space-rem-val-2-2); */ padding: var(--space-rem-val-0-45) var(--space-rem-lg); border-radius: var(--radius-base); cursor: pointer; transition: all var(--transition-normal); } .pd-buy-now-btn:hover { background: linear-gradient(135deg, var(--color-primary-light), var(--color-success)); box-shadow: var(--space-0) var(--space-rem-0-75) var(--space-rem-val-1-5) var(--color-gray-a25-900); color: var(--color-white); } /* ---------- Secondary CTA (Request Demo) ---------- Ranked below Buy Now: same button footprint, outline instead of a filled green so only one action on the page reads as "primary". */ .pd-demo-btn { background: transparent; color: var(--color-primary-light); border: 1px solid var(--color-primary-light); font-size: var(--font-size-base-rem); font-weight: var(--font-weight-normal); padding: var(--space-rem-val-0-45) var(--space-rem-lg); border-radius: var(--radius-base); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: all var(--transition-normal); } .pd-demo-btn:hover { background: var(--color-primary-light); color: var(--color-white); text-decoration: none; } /* ---------- Secondary Links ---------- */ .secondary-link { color: var(--color-indigo-500); text-decoration: none; font-weight: var(--font-weight-normal); font-size: var(--font-size-base-rem); line-height: var(--line-height-val-2-1rem); padding: var(--space-rem-val-0-65) var(--space-rem-val-0-8); border-radius: var(--radius-val-0-5rem); display: inline-flex; align-items: center; transition: color var(--transition-fast); } .secondary-link i { font-size: var(--font-size-base-rem); margin-left: var(--space-rem-val-0-3); } .secondary-link:hover { color: var(--color-primary-light); text-decoration: none; /* no underline */ } /* ---------- Responsive Columns ---------- */ /* @media (max-width: 1200px) { .col-lg-3 { flex: 1 1 calc(33.33% - 1rem); }} */ /* @media (max-width: 992px) { .col-md-4 { flex: 1 1 calc(50% - 1rem); }} */ @media (max-width: 576px) { .col-sm-6 { flex: 1 1 var(--space-pct-val-100); } } .actions-wrapper { display: flex; flex-wrap: wrap; gap: var(--space-rem-val-0-8); /* spacing between buttons/links */ align-items: center; } .actions-wrapper button, .actions-wrapper .secondary-link { display: inline-flex; align-items: center; justify-content: center; } /* Datasheet / Video / Know More / Compare — plain text links, deliberately lighter than the Buy Now + Request Demo row above so the page has one clear hierarchy instead of five equally-weighted actions. */ .actions-wrapper-secondary { padding-top: var(--space-rem-sm); border-top: 1px solid var(--color-border-light); } .actions-wrapper-secondary .secondary-link { padding: var(--space-0) var(--space-rem-val-0-3); font-size: var(--font-size-val-0-9rem); } /* The global a.popup-youtube:hover rule (npav-deferred.css) lifts the link 5px on hover for unrelated career-page video thumbnails/achievement cards. It also matches "Video Introduction" here since it shares the same class, making it visibly shift next to Datasheet/Know More which don't move on hover. Neutralize it in this row only. */ .actions-wrapper-secondary a.popup-youtube:hover { transform: none; } /* ------------------- Trust Strip ------------------- */ .pd-trust-strip { display: flex; flex-wrap: wrap; gap: var(--space-rem-val-1-2); list-style: none; padding: var(--space-0); margin: var(--space-0); font-size: var(--font-size-val-0-9rem); color: var(--color-gray-600); } .pd-trust-strip li { display: inline-flex; align-items: center; gap: var(--space-rem-val-0-3); } .pd-trust-strip i { color: var(--color-success); font-size: var(--font-size-val-1-0rem); } /* ------------------- Compact Credibility Strip (near price) ------------------- */ .pd-credibility-strip { display: flex; flex-wrap: wrap; gap: var(--space-rem-md); list-style: none; padding: var(--space-0); margin: var(--space-0); font-size: var(--font-size-val-0-85rem); font-weight: var(--font-weight-medium); color: var(--color-gray-600); } .pd-credibility-strip li { display: inline-flex; align-items: center; gap: var(--space-rem-val-0-3); } .pd-credibility-strip i { color: var(--color-success); font-size: var(--font-size-val-1-0rem); } /* ------------------- Platform / Audience Line ------------------- */ .pd-platform-line { display: inline-flex; align-items: center; font-size: var(--font-size-val-0-9rem); font-weight: var(--font-weight-medium); color: var(--color-success); text-transform: uppercase; letter-spacing: var(--letter-spacing-val-0-3px); } /* ------------------- Review Section ------------------- .product-review is filled by review.js (POST /reviewscount) with product.reviews-count markup: a .rating (stars), .rating-count and .reviewsadd link — real per-product data, not the classes below which only existed for the old hardcoded "4.5 stars" block. */ .product-review .rating i { color: var(--color-orange-400-v2); margin-right: var(--space-px-2); } .product-review .rating i.lightgray { color: var(--color-gray-300); } .product-review .rating-count, .product-review .reviewsadd { font-size: var(--font-size-val-0-9rem); color: var(--color-indigo-500); text-decoration: none; font-weight: var(--font-weight-medium); margin-right: var(--space-rem-md); } .product-review .rating-count:hover, .product-review .reviewsadd:hover { text-decoration: underline; } /* ------------------- Billing / Pricing ------------------- */ .pd-billing-info { margin-top: var(--space-rem-md); } .pd-billing-info .billing-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-rem-sm); margin-bottom: var(--space-rem-val-0-25); } .pd-billing-info .billing-label { font-weight: var(--font-weight-medium); min-width: var(--space-px-130); color: var(--color-text); } .pd-billing-info .billing-value { font-size: var(--font-size-val-1-2rem); font-weight: var(--font-weight-medium); color: var(--color-gray-900-v2); } .pd-billing-info small { color: var(--color-gray-600); font-size: var(--font-size-val-0-85rem); } /* ------------------- Dropdown / Select ------------------- */ select.pd-select { border-radius: var(--radius-val-0-5rem); border: 1px solid var(--color-border-light); padding: var(--space-rem-sm) var(--space-rem-md); font-size: var(--font-size-val-0-95rem); transition: all var(--transition-fast); background-color: var(--color-white); color: var(--color-text); -webkit-appearance: none; -moz-appearance: none; appearance: none; } select.pd-select:hover, select.pd-select:focus { box-shadow: var(--space-0) var(--space-rem-val-0-25) var(--space-rem-sm) var(--color-gray-a15-900); border-color: var(--color-success); outline: 2px solid transparent; /* invisible in normal rendering; forced-colors/high-contrast mode still gets a real focus ring */ } /* ------------------- Feature Cards ------------------- */ .pd-feature-card { transition: transform var(--transition-normal), box-shadow var(--transition-normal), background-color var(--transition-normal); box-shadow: var(--space-0) var(--space-rem-val-0-125) var(--space-rem-val-0-25) var(--color-gray-a8-900); display: flex; flex-direction: column; background-color: var(--color-white); cursor: pointer; border-radius: var(--radius-val-0-5rem); padding: var(--space-rem-val-1-5); text-align: left; } .pd-feature-card:hover { box-shadow: var(--space-0) var(--space-rem-md) var(--space-rem-lg) var(--color-gray-a20-900); background-color: var(--color-cyan-100-v3); } .pd-feature-card .d-flex h4 { transition: color var(--transition-normal); } .pd-feature-card:hover .d-flex h4 { color: var(--color-success); } .pd-feature-card p { transition: color var(--transition-normal); } .pd-feature-card:hover p { color: var(--color-text); } .pd-feature-icon { transition: opacity var(--transition-normal); } .pd-feature-card:hover .pd-feature-icon { opacity: 0.85; } /* Larger "primary" tier — first few benefits (by existing Rank order) get more visual weight than the compact cards that follow, instead of every feature reading as equally important. */ .pd-feature-card-primary { padding: var(--space-rem-val-1-75); background-color: var(--color-cyan-a7-700); } .pd-more-hidden { display: none; } /* Cards past the 9th stay out of the initial layout until "View all features" is clicked (product.js removes this class). Needs !important: the card wrapper also carries Bootstrap's .d-flex utility, which is itself `display: flex !important` and would otherwise win. */ .pd-feature-hidden { display: none !important; } .pd-view-all-toggle { background: transparent; border: 1px solid var(--color-border-light); color: var(--color-text); font-weight: var(--font-weight-medium); padding: var(--space-rem-val-0-45) var(--space-rem-lg); border-radius: var(--radius-base); cursor: pointer; transition: all var(--transition-normal); } .pd-view-all-toggle:hover { border-color: var(--color-success); color: var(--color-success); } /* ------------------- Quick Benefit Strip ------------------- */ .pd-benefit-strip { display: flex; flex-wrap: wrap; gap: var(--space-rem-val-0-8); list-style: none; padding: var(--space-0); margin: var(--space-0); } .pd-benefit-strip li { display: inline-flex; align-items: center; gap: var(--space-rem-val-0-4); padding: var(--space-rem-val-0-3) var(--space-rem-md); border: 1px solid var(--color-border-light); border-radius: var(--radius-val-1rem); font-size: var(--font-size-val-0-85rem); font-weight: var(--font-weight-medium); color: var(--color-text); } .pd-benefit-strip li img { border-radius: var(--radius-val-0-25rem); } .pd-benefit-strip li i { color: var(--color-success); } /* ------------------- Why This Product ------------------- */ .pd-why-section { padding: var(--space-rem-val-2-2) var(--space-0); } .pd-why-card { max-width: var(--space-px-720); padding: var(--space-rem-val-2-2); background-color: var(--color-cyan-a7-700); border: 1px solid var(--color-border-light); border-radius: var(--radius-val-0-75rem); } .pd-why-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--space-px-45); height: var(--space-px-45); border-radius: 50%; background-color: var(--color-white); color: var(--color-success); font-size: var(--font-size-val-1-5rem); margin-bottom: var(--space-rem-md); } .pd-why-copy { font-size: var(--font-size-val-1-05rem); color: var(--color-gray-600); } .pd-why-points { max-width: var(--space-px-520); list-style: none; padding: var(--space-0); margin: var(--space-rem-md) auto var(--space-0); display: grid; gap: var(--space-rem-val-0-45); } .pd-why-points li { display: flex; align-items: flex-start; gap: var(--space-rem-val-0-4); font-size: var(--font-size-val-0-95rem); color: var(--color-gray-600); } .pd-why-points i { color: var(--color-success); margin-top: var(--space-px-2); } /* Smooth-scroll the bottom "Buy Now" anchor jump up to #pd-buy-panel in the hero, scoped to this page only (not a site-wide scroll-behavior change). */ html:has(body.npav-dark-product) { scroll-behavior: smooth; } /* The navbar is sticky-top (~70px tall) — without this, the native anchor jump aligns #pd-buy-panel's top edge with the viewport's top edge, so the sticky nav then covers the panel's top portion (the Buy Now button / duration dropdown) right where the user just jumped to. */ #pd-buy-panel { scroll-margin-top: var(--space-px-300, 300px); } /* ------------------- Bottom CTA ------------------- */ .pd-bottom-cta { padding: var(--space-rem-val-2-2) var(--space-0); } .pd-bottom-cta-card { max-width: var(--space-px-720); margin: var(--space-0) auto; padding: var(--space-rem-val-2-2); background-color: var(--color-white); border: 1px solid var(--color-border-light); border-radius: var(--radius-val-0-75rem); box-shadow: var(--space-0) var(--space-rem-val-0-125) var(--space-rem-val-0-25) var(--color-gray-a8-900); } .pd-bottom-buy-link { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-success), var(--color-primary-light)); color: var(--color-white); border: none; box-shadow: var(--space-0) var(--space-rem-val-0-25) var(--space-rem-sm) var(--color-gray-a15-900); font-size: var(--font-size-base-rem); font-weight: var(--font-weight-normal); padding: var(--space-rem-val-0-65) var(--space-rem-val-2-2); border-radius: var(--radius-base); text-decoration: none; transition: all var(--transition-normal); } .pd-bottom-buy-link:hover { background: linear-gradient(135deg, var(--color-primary-light), var(--color-success)); color: var(--color-white); } /* ------------------- Compare Banner ------------------- */ .pd-compare-banner { padding: var(--space-rem-val-2-2) var(--space-0); } .pd-compare-card { padding: var(--space-rem-val-1-75); background-color: var(--color-white); border: 1px solid var(--color-border-light); border-radius: var(--radius-val-0-75rem); box-shadow: var(--space-0) var(--space-rem-val-0-125) var(--space-rem-val-0-25) var(--color-gray-a8-900); } .pd-compare-card h3 { font-size: var(--font-size-val-1-3rem); } /* ------------------- Technical Information (System Requirements / Certs / Deployment) ------------------- Deliberately plain/reference-styled — this is supporting information the customer checks after deciding to buy, not another marketing section, so it should read lighter than the hero/features above it. */ .pd-tech-section { padding: var(--space-rem-val-2-2) var(--space-0); background-color: var(--color-bg-tint); } .pd-tech-block { max-width: var(--space-px-720); margin: var(--space-0) auto var(--space-rem-val-2-2); } .pd-tech-block:last-child { margin-bottom: var(--space-0); } .pd-tech-heading { font-size: var(--font-size-val-1-15rem); font-weight: var(--font-weight-medium); margin-bottom: var(--space-rem-md); } .pd-spec-table { width: 100%; border-collapse: collapse; background-color: var(--color-white); border: 1px solid var(--color-border-light); border-radius: var(--radius-val-0-5rem); overflow: hidden; } .pd-spec-table tr:not(:last-child) th, .pd-spec-table tr:not(:last-child) td { border-bottom: 1px solid var(--color-border-light); } .pd-spec-table th, .pd-spec-table td { padding: var(--space-rem-sm) var(--space-rem-md); text-align: left; font-size: var(--font-size-val-0-9rem); } .pd-spec-table th { width: 38%; font-weight: var(--font-weight-medium); color: var(--color-gray-600); background-color: var(--color-bg-tint); } .pd-spec-table td { color: var(--color-text); } .pd-deployment-list { display: flex; flex-wrap: wrap; gap: var(--space-rem-md); list-style: none; padding: var(--space-0); margin: var(--space-0); } .pd-deployment-list li { padding: var(--space-rem-val-0-45) var(--space-rem-lg); background-color: var(--color-white); border: 1px solid var(--color-border-light); border-radius: var(--radius-base); font-weight: var(--font-weight-medium); font-size: var(--font-size-val-0-9rem); } .pd-cert-badges { display: flex; flex-wrap: wrap; gap: var(--space-rem-lg); margin-bottom: var(--space-rem-md); } .pd-cert-badge { display: flex; flex-direction: column; align-items: center; gap: var(--space-rem-val-0-3); width: var(--space-px-130); text-align: center; } .pd-cert-badge img { max-width: 100%; max-height: var(--space-px-65); object-fit: contain; } .pd-cert-badge i { font-size: var(--font-size-val-1-8rem); color: var(--color-success); } .pd-cert-badge span { font-size: var(--font-size-val-0-85rem); color: var(--color-gray-600); } /* ------------------- OS Compatibility ------------------- */ .pd-compatibility img, .compos { width: var(--space-px-45); height: var(--space-px-45); margin-right: var(--space-rem-sm); vertical-align: middle; } /* ------------------- Misc Links ------------------- */ .pd-links a { display: inline-block; margin-right: var(--space-rem-md); font-size: var(--font-size-val-0-95rem); transition: all var(--transition-fast); font-weight: var(--font-weight-medium); } .pd-links a.text-danger:hover { color: var(--color-pink-600); } .pd-links a.text-primary:hover { color: var(--color-cyan-600); } /* ------------------- Responsive / Equal Height ------------------- */ @media (min-width: 768px) { .pd-equal-height-row { display: flex; flex-wrap: wrap; } .pd-equal-height-row > .col-md-4, .pd-equal-height-row > .col-md-3 { display: flex; } } /* .app-loading-container { position: absolute; top: var(--space-pct-val-50); left: var(--space-pct-val-50); transform: translate(-50%, -50%); z-index: var(--z-dropdown); display: none; } .app-loading-container .spinner-border { width: var(--space-rem-val-3); height: var(--space-rem-val-3); } */ .error-message { color: var(--color-danger)! important; font-size: var(--font-size-val-0-875rem); margin-top: var(--space-rem-val-0-25); } .error { color: var(--color-danger) ! important; font-size: var(--font-size-val-0-875rem) ! important; margin-top: var(--space-rem-val-0-25) ! important; } /* ------------------- Modal Wrapper ------------------- */ .demo-request-modal .modal-dialog { max-width: var(--space-px-700); margin: var(--space-rem-val-1-75) auto; } .demo-request-modal .modal-content { /* background: var(--color-cyan-50-v4); */ border-radius: var(--radius-val-1rem); padding: var(--space-pct-2); box-shadow: var(--space-0) var(--space-rem-val-1-5) var(--space-rem-val-3) var(--color-gray-a20-900); border: none; position: relative; overflow: hidden; } /* ------------------- Header ------------------- */ .demo-request-modal .modal-title { font-size: var(--font-size-val-1-3rem); font-weight: var(--font-weight-medium); color: var(--color-primary); display: flex; align-items: center; gap: var(--space-rem-sm); } .demo-request-modal .btn-close { background-color: var(--color-green-200-v3); width: var(--space-rem-lg); height: var(--space-rem-lg); border-radius: var(--radius-val-50pct); border: none; color: var(--color-primary); font-size: var(--font-size-val-1-2rem); display: flex; align-items: center; justify-content: center; transition: all var(--transition-normal); } .demo-request-modal .btn-close:hover { background-color: var(--color-primary); color: var(--color-white); } /* ------------------- Modal Body ------------------- */ .demo-request-modal .modal-body { padding-top: var(--space-rem-sm); padding-bottom: var(--space-rem-sm); } /* ------------------- Form Fields ------------------- */ .demo-request-modal input.form-control, .demo-request-modal textarea.form-control { border-radius: var(--radius-val-0-5rem); border: 1px solid var(--color-teal-300); padding: var(--space-rem-val-0-6) var(--space-rem-md); font-size: var(--font-size-val-0-95rem); transition: all var(--transition-normal); } .demo-request-modal input.form-control:focus, .demo-request-modal textarea.form-control:focus { border-color: var(--color-primary); box-shadow: var(--space-0) var(--space-0) var(--space-0) var(--space-rem-val-0-2) var(--color-green-a25-700); } /* ------------------- Submit Button ------------------- */ .demo-request-modal button[type="submit"] { background: var(--color-primary); color: var(--color-white); font-weight: var(--font-weight-medium); border-radius: var(--radius-val-0-5rem); padding: var(--space-rem-val-0-6) var(--space-rem-lg); border: none; transition: all var(--transition-normal); } .demo-request-modal button[type="submit"]:hover { box-shadow: var(--space-0) var(--space-rem-0-75) var(--space-rem-md) var(--color-gray-a15-900); } /* ------------------- Loader ------------------- */ .demo-request-modal .app-loading-container { position: absolute; top: var(--space-pct-val-50); left: var(--space-pct-val-50); transform: translate(-50%, -50%); z-index: var(--z-dropdown); display: none; } /* ------------------- Error Messages ------------------- */ .demo-request-modal .error-message { color: var(--color-danger); font-size: var(--font-size-val-0-875rem); margin-top: var(--space-rem-val-0-25); } /* ------------------- Responsive ------------------- */ @media (max-width: 576px) { .demo-request-modal .modal-dialog { max-width: var(--space-pct-val-95); margin: var(--space-rem-md) auto; } .demo-request-modal button[type="submit"] { padding: var(--space-rem-val-0-6) var(--space-rem-md); } } .app-loading-container { position: fixed; top: var(--space-0); right: var(--space-0); bottom: var(--space-0); left: var(--space-0); background: var(--color-white); opacity: 0.5; z-index: var(--z-val-1031); } @keyframes spinner { to { transform: rotate(360deg); } } .spinner:before { content: ""; box-sizing: border-box; position: absolute; top: var(--space-pct-val-50); left: var(--space-pct-val-50); width: var(--space-8); height: var(--space-8); margin-top: var(--space-px--20); margin-left: var(--space-px--20); border-radius: var(--radius-val-50pct); border: 4px solid var(--color-border-light); border-top-color: var(--npav-green-primary); animation: spinner var(--transition-val-0-6s-linear) infinite; } /* Section vertical rhythm now lives in npav-2026-home.css alongside the rest of this section's rules (the actual card markup, .site-name / .site-icon, etc., was redesigned there — the h2/.site-card/strong/img rules that used to live here were legacy pre-redesign styling. They were dead weight for .site-card itself (equal-specificity, overridden by source order), but .site-card strong / .site-card img used bare-tag selectors with HIGHER specificity than the redesign's .site-name / .site-icon img class selectors — silently winning the cascade and fighting the current card styling. Removed rather than left to rot. */ .cart_prod_details .save-cart-item{ padding: var(--space-1) var(--space-7) var(--space-1) var(--space-14); } .navbar, .navbar-nav, .navbar-nav > .nav-item, .mega-products { overflow: visible !important; } .mega-products { position: relative; } .mega-products > .nav-link { position: relative; z-index: var(--z-val-10001); display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; } /* .mega-products > .nav-link::after { content: ""; position: absolute; left: var(--space-0); right: var(--space-0); bottom: var(--space-px--20); height: var(--space-px-25); } */ .mega-menu-qh { position: absolute; top: var(--space-pct-val-100); left: var(--space-0); width: var(--space-px-960); max-width: var(--size-viewport-width); background: var(--color-white); box-shadow: var(--space-0) var(--space-6) var(--space-8) var(--color-gray-a15-900); border-radius: var(--space-0) var(--space-0) var(--radius-base) var(--radius-base); border-top: 3px solid var(--color-primary); display: none; z-index: var(--z-val-9999); padding: var(--space-0); } .mega-menu-inner { display: flex; min-height: var(--space-px-450); } .mega-left { width: var(--space-px-260); background: var(--color-gray-100-v4); border-right: 1px solid var(--color-gray-200); flex-shrink: 0; } .mega-tabs { list-style: none; margin: var(--space-0); padding: var(--space-6) var(--space-0); } .tab-item { padding: var(--space-14) var(--space-px-25); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); cursor: pointer; border-left: 4px solid transparent; transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .tab-item.active, .tab-item:hover { background: var(--color-white); color: var(--color-primary); border-left-color: var(--color-primary); } .mega-right { flex: 1; padding: var(--space-30); } .mega-tab-content { display: none; flex-wrap: wrap; gap: var(--space-5); } .mega-tab-content.active { display: flex; } .mega-tab-content a { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-6); font-size: var(--font-size-sm); color: var(--color-text); text-decoration: none; background: var(--color-bg-tint); border: 1px solid var(--color-gray-100-v2); border-radius: var(--radius-xs); transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast); flex: 0 1 calc(50% - 6px); } .mega-tab-content a:hover { color: var(--color-white); background: var(--color-primary); border-color: var(--color-primary); box-shadow: var(--space-0) var(--space-1) var(--space-4) var(--color-green-a20-700); } .mega-tab-content .compare-link { margin-top: var(--space-4); background: var(--color-primary); color: var(--color-white) !important; font-weight: var(--font-weight-normal); justify-content: center; text-transform: uppercase; } .mega-tab-content .compare-link:hover { background: var(--color-green-800-v2); } .new-tag { font-size: var(--font-size-val-9px); background: var(--color-primary); color: var(--color-white); padding: var(--space-px-2) var(--space-2); border-radius: var(--radius-val-3px); margin-left: var(--space-3); text-transform: uppercase; font-weight: var(--font-weight-bold); flex-shrink: 0; letter-spacing: var(--letter-spacing-val-1px); } .mega-tab-content a:hover .new-tag { background: var(--color-white); color: var(--color-primary); } @media (max-width: 991.98px) { .mega-menu-qh { position: static; width: var(--space-pct-val-100); max-width: var(--space-pct-val-100); border-top: 1px solid var(--color-gray-100-v2); box-shadow: none; max-height: var(--size-vh-70); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .mega-menu-inner { flex-direction: column; min-height: auto; } .mega-left { width: var(--space-pct-val-100); background: var(--color-white); border-right: none; border-bottom: 1px solid var(--color-gray-200); position: sticky; top: var(--space-0); z-index: var(--z-sticky); } .mega-tabs { display: flex; overflow-x: auto; padding: var(--space-0); white-space: nowrap; } .tab-item { padding: var(--space-6) var(--space-7); border-left: none; border-bottom: 3px solid transparent; } .tab-item.active { border-bottom-color: var(--color-primary); background: var(--color-gray-100-v4); } .mega-right { padding: var(--space-6); background: var(--color-white); } .mega-tab-content a { flex: 1 1 100%; margin-bottom: var(--space-3); } } @media (min-width: 992px) { .mega-menu-qh { opacity: var(--space-0); transform: translateY(10px); transition: all var(--transition-normal); } .mega-products:hover .mega-menu-qh { display: block; opacity: 1; transform: translateY(0); } } .mega-products > .nav-link::after { content: "▼"; font-size: var(--font-size-val-10px); transition: transform var(--transition-normal); } .mega-products > .nav-link::before { content: ""; position: absolute; left: var(--space-0); right: var(--space-0); bottom: var(--space-px--20); height: var(--space-px-25); } .mega-products:hover > .nav-link::after { transform: rotate(180deg); } ms-wrapper { background-color: var(--color-white); overflow: hidden; } .ms-wrapper .ms-divider { width: var(--space-px-50); height: var(--space-px-3); background: var(--color-blue-500); border-radius: var(--radius-lg); } .ms-wrapper .ms-stat-card { background: var(--color-white); border-radius: var(--radius-val-15px); transition: all var(--transition-val-0-3s-ease-in-out); border: 1px solid var(--color-cyan-100-v2); } .ms-wrapper .ms-stat-card:hover { transform: translateY(-8px); box-shadow: var(--space-0) var(--space-5) var(--space-px-24) var(--color-gray-a10-900); border-color: var(--color-cyan-200-v2); } .ms-wrapper .ms-icon-holder { width: var(--space-60); height: var(--space-60); margin: var(--space-0) auto var(--space-rem-1-25); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-val-12px); color: var(--color-white); font-size: var(--font-size-val-1-8rem); } .ms-bg-blue { background: linear-gradient(135deg, var(--color-blue-500), var(--color-blue-600-v2)); } .ms-bg-green { background: linear-gradient(135deg, var(--color-green-600), var(--color-green-700)); } .ms-bg-orange { background: linear-gradient(135deg, var(--color-orange-400), var(--color-orange-600)); } .ms-bg-red { background: linear-gradient(135deg, var(--color-red-500), var(--color-red-600)); } .ms-wrapper .ms-counter-val { font-size: var(--font-size-val-1-8rem); font-weight: var(--font-weight-val-800); color: var(--color-cyan-800-v4); display: block; } .ms-wrapper .ms-card-label { color: var(--color-gray-700-v3); margin-top: var(--space-rem-sm); font-size: var(--font-size-md-rem); } @media (max-width: 576px) { .ms-wrapper .ms-main-title { font-size: var(--space-rem-val-1-8); } .ms-wrapper .ms-counter-val { font-size: var(--font-size-val-1-5rem); } } .rec-slim-strip { background: var(--color-white); border: 1px solid var(--color-cyan-200); border-radius: var(--radius-base); margin: var(--space-6) var(--space-0); position: relative; overflow: visible; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); z-index: var(--z-base); } .rec-slim-strip:hover { border-color: var(--color-primary); box-shadow: var(--space-0) var(--space-1) var(--space-4) var(--color-gray-a5-900); } .rec-flex-container { display: flex; align-items: center; padding: var(--space-3) var(--space-5); gap: var(--space-5); position: relative; z-index: var(--z-val-2); } .rec-top-tag { position: absolute; top: var(--space-px--10); left: var(--space-5); background: var(--color-red-400); color: var(--color-white); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-val-0-5px); font-weight: var(--font-weight-val-800); padding: var(--space-px-2) var(--space-3); border-radius: var(--radius-xs); z-index: var(--z-val-3); box-shadow: var(--space-0) var(--space-px-2) var(--space-1) var(--color-red-a30-400); } .rec-img-box img { width: var(--space-px-38); height: var(--space-px-38); object-fit: contain; background: var(--color-cyan-50); border-radius: var(--radius-xs); border: 1px solid var(--color-cyan-100); } .rec-info-box { flex: 1; min-width: var(--space-0); position: relative; } .rec-title { font-size: var(--font-size-val-13px); font-weight: var(--font-weight-medium); color: var(--color-cyan-800-v5); margin: var(--space-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rec-tagline { font-size: var(--font-size-val-11px); color: var(--color-gray-600-v2); margin: var(--space-0); } .rec-more { color: var(--color-primary); font-weight: var(--font-weight-medium); margin-left: var(--space-px-3); cursor: pointer; transition: color var(--transition-fast); border-bottom: 1px dotted var(--color-primary); } .rec-more:hover { color: var(--color-green-800-v3); } .rec-hover-trigger { position: relative; display: inline-block; width: var(--space-pct-val-100); } .rec-hover-trigger::after { content: ""; position: absolute; top: var(--space-pct-val-100); left: var(--space-0); width: var(--space-pct-val-100); height: var(--space-4); } .rec-features-box { position: absolute; top: calc(100% + 5px); left: var(--space-0); right: auto; min-width: var(--space-px-200); max-width: min(260px, 90vw); width: max-content; background: var(--color-white); border: 1px solid var(--color-cyan-200); border-radius: var(--radius-md); padding: var(--space-3); z-index: var(--z-val-999); box-shadow: var(--space-0) var(--space-5) var(--space-px-25) var(--color-gray-a12-900); opacity: 0; visibility: hidden; transform: translateY(5px); transition: opacity var(--transition-fast), transform var(--transition-fast); } .rec-hover-trigger:hover .rec-features-box, .rec-features-box:hover { opacity: 1; visibility: visible; transform: translateY(0); } .rec-feature-list { margin: var(--space-0); padding: var(--space-0); list-style: none; } .rec-feature-list li { color: var(--color-cyan-800-v3); padding: var(--space-1) var(--space-0); display: flex; gap: var(--space-3); border-bottom: 1px solid var(--color-cyan-100); font-size: var(--font-size-val-11px); line-height: var(--line-height-val-1-4); align-items: flex-start; word-break: break-word; } .rec-feature-list li:hover { background: var(--color-cyan-50); } .rec-feature-list li span { font-size: var(--font-size-xs); line-height: var(--line-height-val-1); margin-top: var(--space-px-2); } .rec-feature-list li:last-child { border-bottom: none; } .rec-view-full { display: block; font-size: var(--font-size-val-10px); color: var(--color-primary); text-align: right; margin-top: var(--space-2); font-weight: var(--font-weight-bold); text-decoration: none; } .rec-pricing-box { display: flex; align-items: center; flex-shrink: 0; gap: var(--space-5); } .rec-price-details { text-align: right; } .rec-main-price { display: flex; align-items: baseline; justify-content: flex-end; gap: var(--space-1); } .rec-amt { font-size: var(--font-size-val-15px); font-weight: var(--font-weight-val-800); color: var(--color-primary); } .rec-mrp { font-size: var(--font-size-val-10px); color: var(--color-gray-400-v2); text-decoration: line-through; } .rec-save-text { font-size: var(--font-size-val-10px); color: var(--color-green-700-v2); background: var(--color-green-100); padding: var(--space-px-1) var(--space-px-5); border-radius: var(--radius-xs); font-weight: var(--font-weight-bold); } .rec-add-btn { background: var(--color-primary); color: var(--color-white); border: none; height: var(--space-px-32); padding: var(--space-0) var(--space-5); border-radius: var(--radius-base); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--transition-fast); } .rec-add-btn:hover { background: var(--color-green-800-v4); } @media (max-width: 480px) { .rec-flex-container { gap: var(--space-3); padding: var(--space-4) var(--space-3); } .rec-img-box { display: none; } .rec-amt { font-size: var(--font-size-sm); } .rec-features-box { left: auto; right: var(--space-0); max-width: var(--size-vw-90); } } .hwproddesc strong { font-weight: var(--font-weight-medium); color: var(--color-black); }/* body:not(.copy-allowed) { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } */section.pricing-area .container-fluid { padding-left: var(--space-pct-8); padding-right: var(--space-pct-8); } .nice-select.open .list { background-color: var(--color-white) !important; z-index: var(--z-val-999); } .buynow-content.product-card img { width: var(--space-pct-val-100); margin: var(--space-0) auto; padding: var(--space-pct-val-0) var(--space-pct-7) var(--space-pct-val-0) var(--space-pct-7); } .pmrpdis { padding: var(--space-pct-val-0) var(--space-pct-7) var(--space-pct-val-0) var(--space-pct-7); background-color: var(--color-white); } .product-title { font-size: var(--font-size-md); font-weight: var(--font-weight-medium); padding: var(--space-pct-val-0) var(--space-pct-7) var(--space-pct-2) var(--space-pct-7); background-color: var(--color-white); text-align: left; } .product-description { font-size: var(--font-size-base); color: var(--color-gray-500); margin-bottom: var(--space-7); line-height: var(--line-height-val-22px); text-align: left; padding: var(--space-pct-val-0) var(--space-pct-7) var(--space-pct-val-0) var(--space-pct-7); float: left; } .product-action-buttons { padding: var(--space-pct-2) var(--space-pct-7) var(--space-pct-val-3) var(--space-pct-7); display: inline-block; width: var(--space-pct-val-100); } .product-action-button { border-radius: var(--radius-sm); border: none; cursor: pointer; font-weight: var(--font-weight-semibold); } .product-action-button.buy-now:hover { background-color: var(--color-warning); } .bunow-tab-wrap .product-action-button.buy-now:hover { background-color: var(--color-warning); } .product-action-button.know-more:hover { color: var(--color-warning); } .product-action-button.know-more { background-color: var(--color-gray-a0-50); color: var(--color-gray-700-v2); text-decoration: underline; float: left; text-align: left; display: inline-block; padding: var(--space-0); } .product-action-button.buy-now { background-color: var(--color-primary); color: var(--color-white); float: right; text-align: right; display: inline-block; font-weight: var(--font-weight-normal); padding: var(--space-pct-val-0-5) var(--space-pct-val-3); } @media screen and (max-width: 768px) { .cta-buttons { flex-direction: column; } .product-card { margin-bottom: var(--space-4); } .product-action-buttons { flex-direction: column; } } .main-nav nav .navbar-nav .nav-item .dropdown-menu li a b { color: var(--color-white); font-size: var(--font-size-base); letter-spacing: var(--letter-spacing-val-1px); background-color: var(--color-green-a81-700); font-weight: var(--font-weight-normal) !important; padding: var(--space-pct-2) var(--space-pct-5); border-radius: var(--radius-md); } span.label.label-danger { background-color: var(--color-red-a71-500) !important; color: var(--color-white) !important; font-size: var(--font-size-val-9px) !important; padding: var(--space-pct-1) !important; border-radius: var(--radius-sm) !important; margin-left: var(--space-pct-2) !important; } .main-nav nav ul .custom-menu li { padding: var(--space-0); margin: var(--space-0); list-style-type: disc; } ul.custom-menu li a { font-weight: var(--font-weight-normal) !important; padding: var(--space-4) var(--space-4) !important; line-height: var(--line-height-val-8px); } ul.custom-menu li { position: relative !important; margin-left: var(--space-pct-7) !important; padding-top: var(--space-pct-val-0) !important; } #mydiv { background: var(--color-white) !important; height: var(--size-vh-90) !important; overflow: auto !important; overflow-x: hidden !important; min-width: var(--size-vw-45) !important; right: auto !important; padding: var(--space-4) var(--space-30) var(--space-4) var(--space-30); } h5.head-of-link b { font-weight: var(--font-weight-normal) !important; } .head-of-link img b { margin-left: var(--space-px-5) !important; } i.bx.bx-right-arrow-alt, i.bx.bx-left-arrow-alt, i.bx.bx-down-arrow-alt, i.bx.bx-up-arrow-alt { border-radius: var(--radius-val-16px); color: var(--color-white); font-size: var(--font-size-val-24px); vertical-align: middle; } button.btn.btn-primary.home-contact-btn:hover { background-color: var(--color-warning); border: 1px solid var(--color-warning); } .owl-theme .owl-nav [class*="owl-"]:hover { background: var(--color-gray-a0-50) !important; } i.bx.bx-right-arrow-alt:hover, i.bx.bx-left-arrow-alt:hover { background: var(--color-warning-alt); } i.bx.bx-cart:hover, i.bx.bx-user:hover { color: var(--color-warning-alt); } .menuimg { width: var(--space-px-200); height: var(--space-px-200); cursor: pointer; } b.text-success { color: var(--color-warning-alt) !important; } span.badge.text-bg-warning { background-color: var(--color-warning-alt) !important; color: var(--color-white) !important; } a.simple-link.nav-link.showImage::before { content: ""; position: absolute; bottom: var(--space-px--1); right: var(--space-0); width: var(--space-0); height: var(--space-px-1); background-color: var(--color-primary); -webkit-transition: all var(--transition-val-0-5s); transition: all var(--transition-val-0-5s); } .btn-npav-outline.btn-lg i.bx.bx-down-arrow-alt { color: var(--npav-green-primary); } .form-container { border: 1px solid var(--color-border-light); padding: var(--space-pct-val-4); border-radius: var(--radius-sm); box-shadow: var(--color-gray-a35-900) var(--space-0) var(--space-px-5) var(--space-6) !important; } .home-contact-btn { background-color: var(--color-primary); color: var(--color-white); text-align: center; font-weight: var(--font-weight-normal); margin-top: var(--space-pct-val-0); border: 1px solid var(--color-primary); font-size: var(--font-size-sm); } .home-contact-btn:hover { background-color: var(--color-warning); border: 1px solid var(--color-warning); } p.home-contact-para { font-size: var(--font-size-md); color: var(--color-gray-500); padding-top: var(--space-pct-2); } form.form-container label { font-size: var(--font-size-base); margin-top: var(--space-pct-val-3); margin-bottom: var(--space-pct-1); font-weight: var(--font-weight-medium); color: var(--color-blue-600); } .let-us-know { padding: var(--space-pct-val-0) var(--space-pct-2); } img.img-responsive.home-contact-span { vertical-align: top; width: var(--space-pct-val-16); } span.home-contact-para-right a { color: var(--color-blue-600); } img.img-responsive.img-video { border-radius: var(--radius-lg); width: var(--space-pct-val-100); } section.video-gallery-area .container-fluid { padding-left: var(--space-pct-8); padding-right: var(--space-pct-8); } .sub-title-font { color: var(--color-gray-a63-800); font-size: var(--font-size-val-1-2rem); font-weight: var(--font-weight-val-300); letter-spacing: var(--letter-spacing-val-0-4px); } .achievement-card { background-color: var(--color-white); border: 1px solid var(--color-blue-200); border-radius: var(--radius-base); overflow: hidden; display: flex; flex-direction: column; align-items: center; flex-basis: 0%; flex-grow: 1; height: var(--space-pct-val-100); transition: transform var(--transition-val-0-6s-ease); padding: var(--space-7); margin-bottom: var(--space-7); } .achievement-card img { width: var(--space-pct-val-100); border-radius: var(--radius-base) var(--radius-base) var(--space-0) var(--space-0); } .achievement-card .content { display: flex; flex-direction: column; flex: 1 1 auto; padding: var(--space-7); min-height: var(--space-px-215); } :target .achievement-card { background: var(--color-cyan-50-v2); border-color: var(--color-cyan-500); box-shadow: var(--space-0) var(--space-0) var(--space-0) var(--space-px-2) var(--color-cyan-a15-500); transition: all var(--transition-val-0-4s-ease); } .achieve-column { display: flex; } .content h2 { color: var(--color-blue-600); font-size: var(--font-size-lg); text-align: center; } .content p { text-align: center; font-size: var(--font-size-base); color: var(--color-gray-a63-900); margin-top: var(--space-pct-2); font-weight: var(--font-weight-normal); } span.img-top { background-color: var(--color-gray-a24-500); height: var(--space-px-70); width: var(--space-pct-val-100); } .no-link-menu { font-size: var(--font-size-sm) !important; font-weight: var(--font-weight-normal) !important; padding: var(--space-pct-val-3) var(--space-0) !important; color: var(--color-indigo-900) !important; } a.simple-link.nav-link.no-link-menu { background-color: var(--color-green-a15-700); padding: var(--space-pct-2) var(--space-pct-val-3) !important; border-radius: var(--radius-sm); } .no-link-menu-hide { color: var(--color-gray-700) !important; font-size: var(--font-size-val-0-95rem) ! important; } a.nav-link.no-link-menu-hide:hover { color: var(--color-primary) !important; } @-webkit-keyframes animateIn { 0% { opacity: 0; transform: translateY(40px); } 100% { opacity: 1; transform: translateY(0); } } section.number-area .container-fluid { margin: var(--space-0); padding: var(--space-pct-val-0) var(--space-pct-8); } section.number-area { background: linear-gradient(82.37deg, var(--color-green-a67-700), var(--color-green-a96-700) 45.42%, var(--color-cyan-a60-700)); color: var(--color-white); padding: var(--space-pct-val-0) var(--space-pct-val-0); margin-top: var(--space-pct-2); margin-bottom: var(--space-pct-2); } /* Disable animations for users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { .child { animation: none; /* Disable the animation */ } } /* Disable animations for users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { .child1 { animation: none; /* Disable the animation */ } } section.updatenp .container-fluid { /* padding: var(--space-pct-1) var(--space-pct-8) var(--space-pct-1) var(--space-pct-8); */ padding: var(--space-pct-val-0-5) var(--space-pct-8) var(--space-pct-val-0-5) var(--space-pct-8); margin: var(--space-pct-val-0) var(--space-pct-val-0) var(--space-pct-val-0); } h2.heading { text-align: center; font-weight: var(--font-weight-medium); } hr.clshorizontal { width: var(--space-pct-val-100); color: var(--color-black); margin: var(--space-rem-md) var(--space-0) var(--space-rem-sm) var(--space-rem-md); } /* ============================================================ NPAV Page Header Component — 2026 Usage: Props: title (required) | icon | subtitle | badge | breadcrumbs | ctaText | ctaHref | ctaIcon | withBack ============================================================ */ .page-header { background: linear-gradient(82deg, var(--color-green-800) 0%, var(--color-primary) 50%, var(--color-primary-dark) 100%); padding: var(--space-60) var(--space-0) var(--space-px-52); text-align: center; color: var(--color-white); } .page-header > .container { max-width: var(--space-px-800); } .page-header-title { font-size: clamp(32px, 4vw, 48px); font-weight: var(--font-weight-medium); color: var(--color-white); line-height: var(--line-height-val-1-15); margin: var(--space-0); text-wrap: balance; letter-spacing: var(--letter-spacing-val-neg-0-3px); } .page-header-title i { font-size: var(--font-size-val-0-85em); vertical-align: middle; margin-right: var(--space-3); opacity: 0.9; } .page-header-subtitle { font-size: var(--font-size-val-16-5px); font-weight: var(--font-weight-normal); color: var(--color-gray-a82-50); margin: var(--space-14) auto var(--space-0); line-height: var(--line-height-val-1-65); text-wrap: balance; max-width: var(--space-px-600); } .page-header-badge { display: inline-block; background: var(--color-gray-a16-50); color: var(--color-white); font-size: var(--font-size-val-11-5px); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-val-0-9px); text-transform: uppercase; padding: var(--space-1) var(--space-14); border-radius: var(--radius-val-20px); margin-bottom: var(--space-px-18); border: 1px solid var(--color-gray-a28-50); } .page-header-breadcrumb { margin-bottom: var(--space-px-16); } .page-header-breadcrumb .breadcrumb { justify-content: center; background: none; padding: var(--space-0); margin: var(--space-0); font-size: var(--font-size-val-13-5px); } .page-header-breadcrumb .breadcrumb-item { color: var(--color-gray-a75-50); } .page-header-breadcrumb .breadcrumb-item a { color: var(--color-gray-a90-50); text-decoration: none; } .page-header-breadcrumb .breadcrumb-item a:hover { color: var(--color-white); text-decoration: underline; } .page-header-breadcrumb .breadcrumb-item.active { color: var(--color-gray-a60-50); } .page-header-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--color-gray-a50-50); } .page-header-cta { margin-top: var(--space-px-22); } .page-header-cta-btn { background: var(--color-gray-a15-50); color: var(--color-white); border: 1.5px solid var(--color-gray-a50-50); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); padding: var(--space-3) var(--space-px-22); border-radius: var(--radius-base); transition: background var(--transition-fast), border-color var(--transition-fast); text-decoration: none; display: inline-block; } .page-header-cta-btn:hover, .page-header-cta-btn:focus-visible { background: var(--color-gray-a25-50); color: var(--color-white); border-color: var(--color-gray-a75-50); } .page-header-cta-btn:focus-visible { outline: 2px solid var(--color-gray-a80-50); outline-offset: 3px; } /* back-arrow layout variant */ .page-header--with-back { text-align: left; } /* Dark mode: header sits on the same green gradient — no changes needed */ @media (max-width: 992px) { .page-header { padding: var(--space-px-52) var(--space-0) var(--space-px-44); } } @media (max-width: 768px) { .page-header { padding: var(--space-px-44) var(--space-0) var(--space-36); } .page-header-subtitle { font-size: var(--font-size-val-15-5px); } .page-header-breadcrumb .breadcrumb { justify-content: center; } } @media (max-width: 576px) { .page-header { padding: var(--space-36) var(--space-0) var(--space-px-28); } .page-header-title { font-size: clamp(28px, 8vw, 36px); } .page-header-subtitle { font-size: var(--font-size-val-14-5px); } } .page-divider { height: var(--space-px-1); border: none; background-color: var(--color-gray-a10-900); opacity: 1; margin: var(--space-0) var(--space-rem-lg) var(--space-rem-val-2-5); }