@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;0,14..32,900;1,14..32,400;1,14..32,500&display=swap');

/* ==========================================================================
   CSS FILE: styles.css
   APPLIES TO: ALL HTML FILES (Global / Shared Base Stylesheet)
   --------------------------------------------------------------------------
   👉 PROJECT CSS FILE STRUCTURE GUIDE (Kontha code kuthlya file madhe ahe?):
   
   1. styles.css          -> Global Header, Mega Dropdown, Footer, Topbar, Floating WhatsApp & Call Buttons.
   2. index.css           -> index.html sathi (Hero Banner, 2x2 grid, Home stats, Products marquee, Testimonials).
   3. about.css           -> about.html sathi (Globe Zooming Hero, Story, Mentor card, Mission & Vision Ideology).
   4. products.css        -> products.html sathi (Product Filter Tabs, 3D Flip cards catalog, Search).
   5. productsdetail.css  -> productsdetail.html sathi (Single Product Details, Gallery zoom, Specs Table, Quote popup).
   6. gallery.css         -> gallery.html sathi (Pinterest Masonry photo grid, Category filters, Lightbox modal).
   7. contact.css         -> contact.html sathi (Contact form, Info cards, Google map, FAQ accordion).
   ========================================================================== */

:root {
    --primary-red: #ED1C24;
    --primary-red-hover: #C90E15;
    --primary-blue: #00AEEF;
    --primary-blue-dark: #07192B;
    --accent-cyan: #00AEEF;
    --bg-light: #F4F7FA;
    --bg-white: #FFFFFF;
    --text-dark: #1E293B;
    --text-muted: #64748B;
    --text-light: #F8FAFC;
    --border-color: #E2E8F0;

    --font-heading: 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 20px;

    --shadow-subtle: 0 4px 20px rgba(237, 28, 36, 0.06);
    --shadow-hover: 0 15px 35px rgba(237, 28, 36, 0.15);
    --transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base Resets */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    position: relative;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    background-color: var(--bg-white);
    line-height: 1.6;
}

.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Typography & General Utilities */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--primary-blue-dark);
    line-height: 1.25;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

.section-padding {
    padding: 90px 0;
}

.bg-light {
    background-color: var(--bg-light);
}

.text-center {
    text-align: center;
}

.section-tag {
    display: inline-block;
    color: var(--primary-red);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.85rem;
    margin-bottom: 10px;
}

.section-title {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 15px;
}

.section-desc {
    color: var(--text-muted);
    font-size: 1.05rem;
    max-width: 650px;
    margin: 0 auto;
}

.text-gradient {
    color: var(--primary-blue);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: none;
    transition: var(--transition);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-red-hover) 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 15px rgba(237, 28, 36, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(237, 28, 36, 0.45);
}

.btn-accent {
    background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-red-hover) 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 15px rgba(237, 28, 36, 0.3);
}

.btn-accent:hover {
    background: var(--primary-red-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(237, 28, 36, 0.5);
}

.btn-outline-white {
    background: transparent;
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
}

.btn-outline-white:hover {
    background: #FFFFFF;
    color: var(--primary-red);
}

.btn-lg {
    padding: 14px 32px;
    font-size: 1rem;
}

.btn-block {
    width: 100%;
    justify-content: center;
}

/* SECTION 1: Top Utility Bar (Dark Slate Bar matching reference design) */
.top-bar {
    background: #1C232D;
    color: #E2E8F0;
    font-size: 0.85rem;
    padding: 8px 0;
    font-weight: 500;
    overflow: hidden;
    position: relative;
    z-index: 1001;
    border-bottom: 2px solid var(--primary-red);
}

.top-bar a {
    color: #E2E8F0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.top-bar a:hover {
    color: #E52E2E;
}

.icon-top-accent {
    color: #E52E2E !important;
    margin-right: 6px;
}

.top-divider {
    color: rgba(255, 255, 255, 0.25);
    margin: 0 4px;
}

.follow-lbl {
    color: #94A3B8;
    font-size: 0.82rem;
    font-weight: 600;
    margin-right: 6px;
}

.top-bar-marquee {
    display: flex;
}

.top-bar-duplicate {
    display: none;
}

/* Desktop Static Top Bar Layout */
@media (min-width: 769px) {
    .top-bar-marquee {
        width: 100%;
        animation: none;
        transform: none;
    }

    .top-bar-duplicate {
        display: none !important;
    }

    .top-bar-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 20px;
        white-space: nowrap;
    }

    .top-info-left,
    .top-info-right {
        display: flex;
        align-items: center;
        gap: 16px;
        white-space: nowrap;
    }

    .top-info-left span,
    .top-info-left a,
    .top-info-right a {
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
    }
}

.top-socials {
    display: flex;
    gap: 8px;
    align-items: center;
}

.top-socials a {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

.top-socials a:hover {
    background: var(--primary-red);
    color: #FFFFFF;
    transform: translateY(-2px);
}

/* SECTION 2: Header Navigation with Red Active Highlights */
.sticky-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #FFFFFF;
    z-index: 99999;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, height 0.3s ease;
}

.sticky-header.scrolled {
    padding: 0;
    box-shadow: 0 8px 28px rgba(7, 25, 43, 0.12);
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 85px;
    position: relative;
}

.mobile-nav-quote {
    display: none;
}

.logo-brand {
    display: flex;
    align-items: center;
}

.logo-img {
    height: 65px;
    width: auto;
    object-fit: contain;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav-link {
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--primary-red);
    padding: 10px 0;
    position: relative;
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary-red-hover);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #E52E2E 0%, #00C6FF 100%);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
    background: linear-gradient(90deg, #E52E2E 0%, #00C6FF 100%);
}

/* Mega Dropdown */
.nav-item.has-dropdown {
    position: relative;
}

.drop-icon {
    font-size: 0.75rem;
    margin-left: 3px;
    transition: transform 0.3s ease;
}

.nav-item.has-dropdown:hover .drop-icon {
    transform: rotate(180deg);
}

.mega-dropdown {
    position: absolute;
    top: 100%;
    left: -150px;
    width: 700px;
    background: var(--bg-white);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-md);
    padding: 25px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: var(--transition);
    border-top: 4px solid var(--primary-red);
    z-index: 1100;
}

.nav-item.has-dropdown:hover .mega-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.mega-title {
    font-size: 0.95rem;
    color: var(--primary-red);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.mega-title i {
    color: var(--primary-blue);
    margin-right: 5px;
}

.mega-links li {
    margin-bottom: 8px;
}

.mega-links a {
    font-size: 0.85rem;
    color: var(--text-muted);
    display: block;
}

.mega-links a:hover {
    color: var(--primary-red);
    padding-left: 4px;
}

/* Mega Dropdown: All Products button only visible in mobile view, hidden on desktop */
.mega-all-products-bar {
    display: none !important;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.mobile-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--primary-red);
    cursor: pointer;
}

/* SECTION 3: Hero Section (Modern Product Grid Design) */
.hero-circle-section {
    position: relative;
    background: var(--primary-blue-dark);
    height: auto;
    min-height: 620px;
    overflow: hidden;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #1E293B;
    padding: 50px 0 20px 0;
}

.hero-circle-slider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.circle-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s ease, visibility 1.2s ease;
    z-index: 1;
}

.circle-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.slide-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.circle-static-container {
    position: relative;
    z-index: 10;
    width: 100%;
}

.circle-slide-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 40px;
    width: 100%;
}

.circle-left-col {
    text-align: left;
    max-width: 100%;
}

.circle-eyebrow {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0.5px;
    color: #FFFFFF;
    margin-bottom: 12px;
    display: inline-block;
}

.circle-eyebrow .text-red {
    color: #ED1C24 !important;
}

.circle-eyebrow .text-blue {
    color: #00AEEF !important;
}

.circle-headline {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.2;
    color: #FFFFFF;
    margin-bottom: 20px;
}

.text-red {
    color: #ED1C24 !important;
}

.text-blue {
    color: #00AEEF !important;
}

.text-peach {
    color: #FF9E67;
}

.circle-supporting {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.6;
    color: #CBD5E1;
    margin-bottom: 0;
}

/* 2x2 Product Grid */
.hero-product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
}

.hero-grid-item {
    position: relative;
    border-radius: 16px;
    border: 3px solid rgba(237, 28, 36, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-color: #FFFFFF;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.grid-item-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(7, 25, 43, 0.9), rgba(7, 25, 43, 0));
    color: #FFFFFF;
    padding: 15px 12px 10px;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    transition: all 0.3s ease;
}

.hero-grid-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(237, 28, 36, 0.45);
    border-color: var(--primary-red);
}

.hero-grid-item:hover img {
    transform: scale(1.08);
}

/* ==========================================================================
   HERO DIAGONAL DIVIDER SVG DRAW-IN & ELECTRIC SPARKLE ENTRANCE ANIMATION
   ========================================================================== */
.hero-diagonal-divider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 8;
    overflow: visible;
}

.diagonal-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

#dividerPath {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    transition: stroke-dashoffset 1.3s cubic-bezier(0.25, 1, 0.5, 1);
    filter: drop-shadow(0 0 8px rgba(0, 174, 239, 0.6));
}

.hero-diagonal-divider.animated #dividerPath {
    stroke-dashoffset: 0;
}

/* Electric Sparkle Leading Edge Tip */
.sparkle-leading-tip {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    margin-left: -12px;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.sparkle-leading-tip.active {
    opacity: 1;
    transform: scale(1);
}

.sparkle-core {
    position: absolute;
    inset: 4px;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 10px #FFFFFF, 0 0 20px #00AEEF, 0 0 35px #ED1C24;
}

.sparkle-aura {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 174, 239, 0.8) 0%, rgba(237, 28, 36, 0.5) 60%, rgba(0, 0, 0, 0) 100%);
    filter: blur(4px);
    animation: sparkPulseAura 0.3s ease-in-out infinite alternate;
}

@keyframes sparkPulseAura {
    0% {
        transform: scale(0.9);
        opacity: 0.8;
    }

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

/* Micro Fleck Spark Particles */
.sparkle-fleck {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #00AEEF;
    box-shadow: 0 0 6px #00AEEF, 0 0 10px #FFFFFF;
    opacity: 0;
}

.sparkle-leading-tip.active .fleck-1 {
    animation: fleckFloat1 0.4s ease-out infinite;
}

.sparkle-leading-tip.active .fleck-2 {
    animation: fleckFloat2 0.5s ease-out infinite 0.1s;
}

.sparkle-leading-tip.active .fleck-3 {
    animation: fleckFloat3 0.45s ease-out infinite 0.2s;
}

@keyframes fleckFloat1 {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
        background: #00AEEF;
    }

    100% {
        transform: translate(-15px, 12px) scale(0.2);
        opacity: 0;
        background: #ED1C24;
    }
}

@keyframes fleckFloat2 {
    0% {
        transform: translate(0, 0) scale(1.2);
        opacity: 1;
        background: #FFFFFF;
    }

    100% {
        transform: translate(14px, -16px) scale(0.1);
        opacity: 0;
        background: #00AEEF;
    }
}

@keyframes fleckFloat3 {
    0% {
        transform: translate(0, 0) scale(0.9);
        opacity: 1;
        background: #FFB300;
    }

    100% {
        transform: translate(-12px, -14px) scale(0.2);
        opacity: 0;
        background: #ED1C24;
    }
}

/* Settled Glowing Node Circle at Center */
.divider-node-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #07192B;
    border: 3px solid #00AEEF;
    box-shadow: 0 0 15px rgba(0, 174, 239, 0.8), 0 0 30px rgba(0, 174, 239, 0.4);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s ease;
    z-index: 9;
}

.hero-diagonal-divider.drawn #settledNode {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    animation: nodePulseGlow 3s ease-in-out infinite;
}

@keyframes nodePulseGlow {

    0%,
    100% {
        box-shadow: 0 0 12px rgba(0, 174, 239, 0.7), 0 0 25px rgba(0, 174, 239, 0.3);
    }

    50% {
        box-shadow: 0 0 22px rgba(0, 174, 239, 1), 0 0 40px rgba(237, 28, 36, 0.6);
    }
}

@media (max-width: 991px) {
    .circle-slide-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .circle-left-col {
        padding-right: 0;
        text-align: center;
    }

    .hero-circle-section {
        padding: 50px 0;
    }

    .circle-headline {
        font-size: 2.2rem;
    }
}

@media (max-width: 480px) {
    .hero-product-grid {
        gap: 12px;
    }

    .hero-grid-item {
        border-width: 3px;
        border-radius: 12px;
    }

    .circle-headline {
        font-size: 1.8rem;
    }
}

/* SECTION 4: About Section */
.about-section {
    background: linear-gradient(135deg, #F0F7FF 0%, #FFFFFF 100%);
    padding: 30px 0 50px 0;
}

.about-grid {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 50px;
    align-items: center;
}

.about-eyebrow-line {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    color: #ED1C24;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 25px;
}

.about-eyebrow-line::before,
.about-eyebrow-line::after {
    content: '';
    width: 35px;
    height: 3px;
    background: #ED1C24;
    border-radius: 2px;
    display: inline-block;
}

.about-main-title {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.2;
    color: #1E293B;
    margin-bottom: 22px;
}

.text-orange-outline {
    color: #E52E2E;
    position: relative;
    display: inline-block;
}

.about-paragraph-lead {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.65;
    color: #334155;
    margin-bottom: 15px;
}

.about-paragraph-desc {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.6;
    color: #64748B;
    margin-bottom: 30px;
}

/* Checkmark List */
.about-checkmark-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 35px;
}

.check-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.check-icon {
    font-size: 1.25rem;
    line-height: 1;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.icon-orange {
    color: #ED1C24;
}

.icon-blue {
    color: #00AEEF;
}

.check-text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #334155;
    line-height: 1.4;
}

.check-text strong {
    color: #1E293B;
}

/* Discover More Button */
.btn-about-cta {
    background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-red-hover) 100%);
    color: #FFFFFF !important;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 14px 35px;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(237, 28, 36, 0.3);
    border: none;
}

.btn-about-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(237, 28, 36, 0.45);
}

/* Right Column Product Collage Image Container with Red & Blue Mix Gradient Border */
.about-right-showcase {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.about-collage-container {
    position: relative;
    width: 100%;
    max-width: 580px;
    aspect-ratio: 1536 / 1024;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px;
    border-radius: 28px;
    background: linear-gradient(135deg, #ED1C24 0%, #00C6FF 40%, #ED1C24 75%, #007BFF 100%);
    box-shadow: 0 15px 45px rgba(237, 28, 36, 0.22), 0 5px 25px rgba(0, 174, 239, 0.2);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    overflow: hidden;
}

.about-collage-container:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 60px rgba(237, 28, 36, 0.35), 0 10px 35px rgba(0, 174, 239, 0.3);
}

.about-collage-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 24px;
    background: #FFFFFF;
}

.about-card-inner {
    position: relative;
    background: #FFFFFF;
    border-radius: 28px;
    padding: 20px;
    box-shadow: 0 20px 50px rgba(237, 28, 36, 0.14), 0 10px 30px rgba(0, 174, 239, 0.1);
    border: 2px solid var(--primary-red);
    width: 100%;
    max-width: 440px;
    animation: floatAboutCard 4s ease-in-out infinite;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Animated Red + Blue Rotating Border Ring */
.about-card-inner::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 32px;
    padding: 3px;
    background: conic-gradient(from 0deg,
            var(--primary-red) 0%,
            var(--primary-blue) 40%,
            var(--primary-red) 70%,
            var(--primary-blue) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rotateGradientCircle 10s linear infinite;
    pointer-events: none;
}

.about-card-inner:hover {
    box-shadow: 0 25px 60px rgba(237, 28, 36, 0.25), 0 12px 35px rgba(0, 174, 239, 0.2);
}

.about-card-image-box {
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: #F8FAFC;
    border: 1px solid #F1F5F9;
}

.about-card-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.about-card-inner:hover .about-card-image-box img {
    transform: scale(1.05);
}

/* Floating Animation Keyframe */
@keyframes floatAboutCard {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* Floating Badge Row overlapping bottom */
.about-card-badge-pill {
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    background: #FFFFFF;
    border-radius: 35px;
    padding: 10px 24px;
    box-shadow: 0 10px 30px rgba(237, 28, 36, 0.2);
    border: 2px solid var(--primary-red);
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    z-index: 10;
}

.badge-star-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-red), #FF5252);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    box-shadow: 0 4px 10px rgba(237, 28, 36, 0.3);
}

.badge-pill-text {
    display: flex;
    flex-direction: column;
}

.badge-pill-lbl {
    font-family: var(--font-heading);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--primary-red);
    letter-spacing: 1px;
}

.badge-pill-val {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--primary-blue-dark);
}

/* SECTION 5: Stats Counter Strip (Attractive Premium Card Design) */
.stats-strip {
    background: radial-gradient(circle at 0% 0%, rgba(0, 174, 239, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(237, 28, 36, 0.08) 0%, transparent 50%),
        #07192B;
    color: #FFFFFF;
    padding: 40px 0;
    position: relative;
    border-top: 4px solid var(--primary-red);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.stat-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1.2px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    padding: 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.stat-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.stat-box:hover {
    transform: translateY(-8px);
    border-color: rgba(237, 28, 36, 0.3);
    box-shadow: 0 20px 45px rgba(237, 28, 36, 0.18);
}

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

.stat-icon {
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, rgba(237, 28, 36, 0.15) 0%, rgba(237, 28, 36, 0.03) 100%);
    border: 1.5px solid rgba(237, 28, 36, 0.4);
    color: #ED1C24;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
    transition: all 0.4s ease;
    box-shadow: 0 8px 20px rgba(237, 28, 36, 0.1);
}

.stat-box:hover .stat-icon {
    transform: rotateY(360deg);
    background: linear-gradient(135deg, #ED1C24 0%, #FF4D52 100%);
    color: #FFFFFF;
    border-color: #ED1C24;
    box-shadow: 0 8px 24px rgba(237, 28, 36, 0.4);
}

.stat-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-number-wrapper {
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.stat-info h3 {
    font-size: 2.8rem;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1;
    font-family: var(--font-heading);
}

.stat-plus {
    font-size: 2rem;
    font-weight: 800;
    color: #ED1C24;
    margin-left: 2px;
}

.stat-info p {
    font-size: 0.9rem;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    margin-top: 10px;
    font-family: var(--font-heading);
}

/* SECTION 6: Services / Products Grid (Premium Redesign) */
.products-section {
    background: radial-gradient(circle at 10% 20%, rgba(237, 28, 36, 0.04) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(11, 42, 74, 0.05) 0%, transparent 40%),
        #F8FAFC;
    position: relative;
    border-top: 1px solid rgba(226, 232, 240, 0.8);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.services-header-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 45px;
    gap: 20px;
}

.services-header-left {
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
}

.services-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--primary-red) 0%, #B8080E 100%);
    color: #FFFFFF;
    padding: 7px 22px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 16px;
    box-shadow: 0 6px 18px rgba(237, 28, 36, 0.3);
}

.services-pill-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
}

.services-main-title {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--primary-blue-dark);
    margin-bottom: 12px;
    line-height: 1.25;
    letter-spacing: -0.5px;
}

.services-main-title .text-red {
    background: linear-gradient(135deg, #ED1C24 0%, #FF4D52 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.services-subtext {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.65;
}

.btn-red-pill {
    background: linear-gradient(135deg, var(--primary-red) 0%, #B8080E 100%);
    color: #FFFFFF;
    padding: 8px 18px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    border: none;
    box-shadow: 0 4px 12px rgba(237, 28, 36, 0.25);
}

.btn-red-pill:hover {
    background: linear-gradient(135deg, #FF333B 0%, var(--primary-red) 100%);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 25px rgba(237, 28, 36, 0.45);
    color: #FFFFFF;
}

.services-marquee-wrapper {
    overflow: hidden;
    width: 100%;
    position: relative;
    padding: 15px 5px 25px 5px;
    mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.services-marquee-track {
    display: flex;
    gap: 25px;
    width: max-content;
    will-change: transform;
}

.product-card {
    background: #FFFFFF;
    border: 1.5px solid rgba(226, 232, 240, 0.9);
    border-radius: 24px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
    width: 310px;
    height: 380px;
    flex-shrink: 0;
    box-shadow: 0 10px 30px rgba(11, 42, 74, 0.05);
    overflow: hidden;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(237, 28, 36, 0.15);
    border-color: rgba(237, 28, 36, 0.4);
}

.card-front {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.card-num-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(7, 25, 56, 0.85);
    color: #FFFFFF;
    padding: 5px 12px;
    border-radius: 0;
    font-size: 0.8rem;
    font-weight: 700;
    z-index: 5;
    font-family: var(--font-heading);
}

.card-arrow-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--primary-red);
    color: #FFFFFF;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    z-index: 5;
    box-shadow: 0 4px 10px rgba(237, 28, 36, 0.3);
}

.card-img-box {
    position: relative;
    height: 280px;
    border-radius: 22px 22px 0 0;
    overflow: hidden;
    background: #FFFFFF;
    border: none;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s ease;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.06));
}

.product-card:hover .product-img {
    transform: translateY(-8px) scale(1.06);
    filter: drop-shadow(0 12px 22px rgba(0, 123, 255, 0.22));
}

.card-footer-title {
    background: var(--primary-blue-dark);
    color: #FFFFFF;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 700;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 22px 22px;
    padding: 10px 15px;
    margin-top: auto;
}

.card-footer-title h3 {
    color: #FFFFFF;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Card Hover Overlay (Acryweld Style) */
.card-hover-overlay {
    position: absolute;
    inset: 0;
    background: var(--primary-blue-dark);
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px 24px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 10;
    border-radius: 24px;
    border: 2px solid var(--primary-red);
}

.product-card:hover .card-hover-overlay {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.card-hover-badge {
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.card-hover-title {
    font-size: 1.25rem;
    color: var(--primary-red);
    font-weight: 800;
    margin-bottom: 12px;
    text-align: center;
    line-height: 1.3;
}

.card-hover-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    line-height: 1.5;
    margin-bottom: 20px;
}

.btn-learn-more {
    background: var(--primary-red);
    color: #FFFFFF !important;
    padding: 10px 22px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    transition: var(--transition);
}

.btn-learn-more:hover {
    background: #FFFFFF;
    color: var(--primary-red) !important;
    transform: translateY(-2px);
}

.btn-card-red:hover {
    background: linear-gradient(135deg, #FF333B 0%, var(--primary-red) 100%);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(237, 28, 36, 0.45);
    gap: 12px;
}

.card-big-number {
    position: absolute;
    bottom: 15px;
    right: 20px;
    font-size: 3.5rem;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(11, 42, 74, 0.15);
    pointer-events: none;
    line-height: 1;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
}

.product-card:hover .card-big-number {
    -webkit-text-stroke-color: rgba(237, 28, 36, 0.35);
    transform: scale(1.05);
}

/* SECTION 7: Process Section */
.process-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 60px;
    position: relative;
}

.process-line {
    position: absolute;
    top: 40px;
    left: 10%;
    width: 80%;
    height: 3px;
    background: var(--primary-blue);
    z-index: 1;
}

.process-step {
    position: relative;
    z-index: 2;
    background: var(--bg-white);
    padding: 30px 20px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-subtle);
    text-align: center;
    border: 1px solid var(--border-color);
}

.step-icon-box {
    width: 70px;
    height: 70px;
    background: var(--primary-red);
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin: 0 auto 20px;
    position: relative;
    border: 4px solid var(--bg-white);
    box-shadow: 0 4px 15px rgba(237, 28, 36, 0.2);
}

.step-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--primary-blue);
    color: #FFFFFF;
    font-size: 0.8rem;
    font-weight: 800;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.process-step h3 {
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.process-step p {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* SECTION 7.5: Why Choose Us Section (Ultra-Premium Tech Glassmorphism Flow) */
.dark-tech-theme {
    background: linear-gradient(135deg, #07192B 0%, #0D2438 50%, #07192B 100%);
    position: relative;
    overflow: hidden;
    padding: 100px 0;
}

.why-us-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    background: rgba(237, 28, 36, 0.12);
    border: 1px solid rgba(237, 28, 36, 0.35);
    border-radius: 30px;
    color: #FF4D4D;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 15px;
    backdrop-filter: blur(5px);
    box-shadow: 0 0 15px rgba(237, 28, 36, 0.2);
}

.text-gold {
    color: #FFD700 !important;
}

.tech-glow-sphere {
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: 1;
}

.glow-red {
    top: -150px;
    left: -150px;
    background: rgba(229, 46, 46, 0.15);
}

.glow-blue {
    bottom: -150px;
    right: -150px;
    background: rgba(0, 198, 255, 0.15);
}

.tech-pipeline-wrapper {
    position: relative;
    margin-top: 50px;
    padding: 20px 0;
}

/* Professional Connecting Pipeline Track - Elegant Architectural Track */
.tech-pipeline-line {
    position: absolute;
    top: 24px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: rgba(59, 130, 246, 0.25);
    box-shadow: none;
    z-index: 2;
}

.pipeline-pulse-dot {
    position: absolute;
    top: -4px;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #60A5FA;
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.6);
    animation: movePulse 6s linear infinite;
}

@keyframes movePulse {
    0% {
        left: 0%;
    }

    100% {
        left: 100%;
    }
}

.tech-pipeline-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 22px;
    position: relative;
    z-index: 3;
}

/* Infographic Card Flow - Matching Reference Design (White Cards Theme) */
.tech-info-card {
    background: #FFFFFF;
    border-radius: 22px;
    padding: 42px 18px 28px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    opacity: 0;
    transform: translateY(45px) scale(0.92);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
    border: 2px solid #E2E8F0;
}

/* Clean Corporate Card Borders - Decent & Professional */
.tech-info-card.card-theme-blue,
.tech-info-card.card-theme-cyan {
    border-color: rgba(37, 99, 235, 0.25);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.tech-info-card.card-theme-red,
.tech-info-card.card-theme-gold,
.tech-info-card.card-theme-purple {
    border-color: rgba(220, 38, 38, 0.25);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.tech-info-card.in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Staggered Delay for Scroll Animation */
.tech-info-card[data-step="1"].in-view {
    transition-delay: 0.1s;
}

.tech-info-card[data-step="2"].in-view {
    transition-delay: 0.25s;
}

.tech-info-card[data-step="3"].in-view {
    transition-delay: 0.4s;
}

.tech-info-card[data-step="4"].in-view {
    transition-delay: 0.55s;
}

.tech-info-card[data-step="5"].in-view {
    transition-delay: 0.7s;
}

.tech-info-card:hover {
    transform: translateY(-10px) scale(1.03);
}

.tech-info-card.card-theme-blue:hover,
.tech-info-card.card-theme-cyan:hover {
    border-color: rgba(37, 99, 235, 0.6);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.tech-info-card.card-theme-red:hover,
.tech-info-card.card-theme-gold:hover,
.tech-info-card.card-theme-purple:hover {
    border-color: rgba(220, 38, 38, 0.6);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

/* Top Semi-Circular Arch Notch with Concentric Badge */
.card-top-notch {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #0B192C;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    padding: 3px;
}

.notch-arc-ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
}

.ring-blue,
.ring-cyan {
    border: 2px solid #1a3a5c !important;
    box-shadow: 0 0 14px rgba(7, 25, 43, 0.7), inset 0 0 6px rgba(11, 34, 64, 0.4) !important;
}

.badge-blue,
.badge-cyan {
    background: linear-gradient(135deg, #0B2240 0%, #07192B 100%) !important;
    color: #FFFFFF !important;
    border: 2px solid rgba(255,255,255,0.25) !important;
    box-shadow: 0 3px 12px rgba(7, 25, 43, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.15) !important;
}

.ring-red,
.ring-gold,
.ring-purple {
    border: 2px solid #1a3a5c !important;
    box-shadow: 0 0 14px rgba(7, 25, 43, 0.7), inset 0 0 6px rgba(11, 34, 64, 0.4) !important;
}

.badge-red,
.badge-gold,
.badge-purple {
    background: linear-gradient(135deg, #0B2240 0%, #07192B 100%) !important;
    color: #FFFFFF !important;
    border: 2px solid rgba(255,255,255,0.25) !important;
    box-shadow: 0 3px 12px rgba(7, 25, 43, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.15) !important;
}

.notch-number-badge {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 900;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Card Body Content */
.card-body-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 14px;
    flex-grow: 1;
}

.card-subtitle-step {
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.text-blue {
    color: #007BFF;
}

.text-cyan {
    color: #00AEEF;
}

.text-gold {
    color: #D97706;
}

.text-red {
    color: #ED1C24;
}

.text-purple {
    color: #9333EA;
}

.card-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #07192B;
    letter-spacing: 0.3px;
    margin: 0 0 4px 0;
}

.card-center-icon {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 6px 0;
    transition: all 0.4s ease;
}

.tech-info-card:hover .card-center-icon {
    transform: scale(1.15) rotate(10deg);
}

.icon-blue {
    background: rgba(0, 198, 255, 0.12);
    color: #007BFF;
    border: 2px solid rgba(0, 198, 255, 0.4);
    box-shadow: 0 0 15px rgba(0, 198, 255, 0.2);
}

.icon-cyan {
    background: rgba(0, 174, 239, 0.12);
    color: #00AEEF;
    border: 2px solid rgba(0, 174, 239, 0.4);
    box-shadow: 0 0 15px rgba(0, 174, 239, 0.2);
}

.icon-gold {
    background: rgba(255, 193, 7, 0.15);
    color: #D97706;
    border: 2px solid rgba(255, 193, 7, 0.4);
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.2);
}

.icon-red {
    background: rgba(237, 28, 36, 0.12);
    color: #ED1C24;
    border: 2px solid rgba(237, 28, 36, 0.4);
    box-shadow: 0 0 15px rgba(237, 28, 36, 0.2);
}

.icon-purple {
    background: rgba(171, 71, 188, 0.12);
    color: #9333EA;
    border: 2px solid rgba(171, 71, 188, 0.4);
    box-shadow: 0 0 15px rgba(171, 71, 188, 0.2);
}

.card-center-icon i {
    font-size: 1.6rem;
}

.card-desc {
    font-size: 0.86rem;
    color: #475569;
    line-height: 1.55;
    margin: 0;
}

/* Bottom Glowing Line Accent */
.card-bottom-accent {
    height: 3px;
    width: 40%;
    margin-top: 18px;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.tech-info-card:hover .card-bottom-accent {
    width: 100%;
}

.line-blue {
    background: linear-gradient(90deg, #00C6FF, #007BFF);
}

.line-cyan {
    background: linear-gradient(90deg, #00E5FF, #00AEEF);
}

.line-gold {
    background: linear-gradient(90deg, #FFC107, #FF9800);
}

.line-red {
    background: linear-gradient(90deg, #FF5252, #E52E2E);
}

.line-purple {
    background: linear-gradient(90deg, #AB47BC, #7B1FA2);
}

/* Responsive Layout */
@media (max-width: 1100px) {
    .tech-pipeline-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }

    .tech-pipeline-line {
        display: none;
    }
}

@media (max-width: 768px) {
    .tech-pipeline-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
        max-width: 360px;
        margin: 0 auto;
    }
}

/* SECTION 8: Testimonials Slider (Redesigned Split Card Layout) */
.testimonials-section {
    background: #07192B;
    position: relative;
    padding: 80px 0;
}

.testimonials-main-card {
    background: transparent;
    display: grid;
    grid-template-columns: 35% 65%;
    gap: 50px;
    max-width: 1100px;
    margin: 0 auto;
}

.testimonials-left-col {
    background: transparent;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.testimonial-tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ED1C24;
    color: #FFFFFF;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    width: fit-content;
    margin-bottom: 25px;
    font-family: var(--font-heading);
}

.testimonial-tag-badge .badge-dot {
    width: 7px;
    height: 7px;
    background: #FFFFFF;
    border-radius: 50%;
    display: inline-block;
}

.testimonial-main-title {
    font-size: 2.6rem;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 20px;
    line-height: 1.25;
}

.testimonial-main-title .text-red {
    color: #ED1C24 !important;
}

.testimonial-main-desc {
    font-size: 0.95rem;
    color: #CBD5E1;
    line-height: 1.6;
    margin-bottom: 30px;
    font-style: italic;
}

.btn-testimonial-more {
    background: #ED1C24;
    color: #FFFFFF !important;
    padding: 12px 28px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(237, 28, 36, 0.3);
    width: fit-content;
    text-decoration: none;
    border: none;
}

.btn-testimonial-more:hover {
    background: #FF333B;
    transform: translateY(-2px);
}

.testimonials-right-col {
    background: transparent;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.testimonial-slider-container {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.testimonial-slider-track {
    display: flex;
    width: 100%;
    position: relative;
}

.testimonial-slide-item {
    min-width: 100%;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.testimonial-slide-item.active {
    opacity: 1;
    visibility: visible;
    position: relative;
    display: grid;
}

/* Card Styling */
.t-card {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 30px;
    border-left: 4.5px solid #ED1C24;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.t-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.t-author-info {
    display: flex;
    flex-direction: column;
}

.t-name {
    font-size: 1.15rem;
    font-weight: 800;
    color: #07192B;
    margin-bottom: 2px;
}

.t-loc {
    font-size: 0.8rem;
    font-weight: 700;
    color: #ED1C24;
}

.t-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #EDF2F7;
    color: #718096;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    border: 1.5px solid #E2E8F0;
    flex-shrink: 0;
}

.t-stars {
    display: flex;
    gap: 4px;
    color: #FFB800;
    font-size: 0.95rem;
    margin-bottom: 15px;
}

.t-text {
    font-size: 0.88rem;
    color: #2D3748;
    line-height: 1.6;
    font-style: italic;
    z-index: 2;
    margin-bottom: 0;
}

.t-quote-bg {
    position: absolute;
    bottom: -20px;
    right: 15px;
    font-size: 8rem;
    color: rgba(237, 28, 36, 0.08);
    font-family: 'Inter', serif;
    line-height: 1;
    user-select: none;
    z-index: 1;
}

.testimonial-nav-footer {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 18px !important;
    border-top: 1px solid rgba(0, 123, 255, 0.15) !important;
    padding-top: 25px !important;
    margin-top: 35px !important;
    width: 100% !important;
    text-align: center !important;
}

.testimonial-pagination {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
}

.page-num-indicator {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
    letter-spacing: 1px !important;
}

.pagination-bar-dots {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: center !important;
}

.p-dot {
    width: 28px !important;
    height: 8px !important;
    border-radius: 6px !important;
    background: #CBD5E1 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.p-dot.active {
    width: 48px !important;
    height: 8px !important;
    border-radius: 6px !important;
    background: linear-gradient(90deg, #E52E2E 0%, #007BFF 100%) !important;
    box-shadow: 0 4px 12px rgba(229, 46, 46, 0.35) !important;
}

.testimonial-arrows {
    display: flex !important;
    gap: 14px !important;
    justify-content: center !important;
    align-items: center !important;
}

.t-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.t-nav-btn:hover {
    background: #ED1C24;
    color: #FFFFFF;
    border-color: #ED1C24;
    box-shadow: 0 4px 12px rgba(237, 28, 36, 0.25);
}

@media (max-width: 991px) {
    .testimonials-main-card {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .testimonials-left-col {
        padding: 20px 10px 10px 10px;
        text-align: center;
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    .testimonial-main-title {
        font-size: 1.8rem;
        text-align: center;
        margin-bottom: 15px;
    }

    .testimonial-main-desc {
        text-align: center;
        margin-bottom: 20px;
        font-size: 0.9rem;
    }

    .btn-testimonial-more {
        align-self: center;
    }

    .testimonials-right-col {
        padding: 10px;
    }

    .testimonial-slide-item {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .testimonial-nav-footer {
        flex-direction: column;
        gap: 15px;
        align-items: center;
        justify-content: center;
        padding-top: 15px;
        margin-top: 20px;
    }

    .testimonial-pagination {
        justify-content: center;
    }
}

/* SECTION 9: Industries We Serve */
.industries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    margin-top: 40px;
}

.industry-card {
    height: 240px;
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-subtle);
    border: 2px solid var(--primary-blue);
}

.ind-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.ind-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 25, 43, 0.4) 0%, rgba(7, 25, 43, 0.92) 100%);
    color: #FFFFFF;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: var(--transition);
}

.ind-icon {
    font-size: 2rem;
    color: var(--primary-red);
    margin-bottom: 10px;
}

.ind-overlay h3 {
    color: #FFFFFF;
    font-size: 1.25rem;
    margin-bottom: 6px;
}

.ind-overlay p {
    font-size: 0.85rem;
    color: var(--text-light);
    opacity: 0.85;
}

.industry-card:hover .ind-img {
    transform: scale(1.1);
}

/* SECTION 10: Clients Logo Marquee */
.clients-strip {
    padding: 45px 0;
    background: var(--bg-white);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
}

.clients-title {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--primary-blue-dark);
    margin-bottom: 35px;
    font-family: var(--font-heading);
}

.marquee-wrapper {
    overflow: hidden;
    width: 100%;
}

.marquee-track {
    display: flex;
    gap: 30px;
    width: max-content;
    animation: marquee 25s linear infinite;
}

.marquee-track:hover {
    animation-play-state: paused;
}

.client-logo-box {
    background: #FFFFFF;
    width: 180px;
    height: 80px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #E2E8F0;
    box-shadow: 0 4px 10px rgba(11, 42, 74, 0.03);
    flex-shrink: 0;
    overflow: hidden;
}

.client-logo-box img {
    width: 125%;
    height: 125%;
    object-fit: cover;
    transition: all 0.3s ease;
}

.client-logo-box:hover img {
    transform: scale(1.05);
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* SECTION 11: Contact & Map Section */
.contact-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 50px;
}

.contact-form-card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow-subtle);
    border-top: 4px solid var(--primary-red);
}

.form-group {
    margin-bottom: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.88rem;
    margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary-red);
    box-shadow: 0 0 0 3px rgba(237, 28, 36, 0.1);
}

.error-msg {
    color: var(--primary-red);
    font-size: 0.8rem;
    margin-top: 4px;
    display: block;
}

.form-success-msg {
    display: none;
    background: #DEF7EC;
    color: #03543F;
    padding: 15px;
    border-radius: var(--radius-sm);
    margin-top: 20px;
    font-weight: 600;
    text-align: center;
}

.contact-info-card {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.info-block {
    background: var(--bg-light);
    border-radius: var(--radius-md);
    padding: 25px;
    border: 1px solid var(--border-color);
}

.info-block-title {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.info-block-title i {
    color: var(--primary-red);
    margin-right: 8px;
}

.info-text {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.info-link {
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 8px;
}

.info-link a {
    color: var(--primary-red);
}

/* SECTION 12: Footer (Redesigned matching Reference Screenshot) */
footer,
.footer,
.site-footer,
.footer-section {
    background: #07192B !important;
    color: #94A3B8 !important;
    padding-top: 60px;
    border-top: 3.5px solid var(--primary-red);
    font-size: 0.9rem;
    position: relative;
    z-index: 10;
}

.footer-top-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 1.1fr 1.3fr;
    gap: 40px;
    padding-bottom: 45px;
}

.brand-col .footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    text-decoration: none;
}

.footer-logo-icon-box {
    background: #FFFFFF !important;
    padding: 10px 22px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
}

.footer-logo-icon-box img {
    height: 58px;
    width: auto;
    object-fit: contain;
}

.footer-logo-text {
    display: flex;
    flex-direction: column;
}

.footer-brand-title {
    font-size: 1.02rem;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: 0.5px;
    line-height: 1.25;
}

.footer-brand-sub {
    font-size: 0.72rem;
    font-weight: 600;
    color: #E67E22;
    letter-spacing: 1px;
    margin-top: 2px;
}

.footer-about-text {
    font-size: 0.88rem;
    line-height: 1.65;
    color: #94A3B8;
    margin-bottom: 22px;
}

.footer-connect .connect-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 10px;
}

.footer-socials {
    display: flex;
    gap: 10px;
}

.footer-socials a {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.footer-socials a:hover {
    background: var(--primary-red);
    color: #FFFFFF;
    transform: translateY(-3px);
}

.footer-heading {
    color: #FFFFFF;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 22px;
    position: relative;
    padding-bottom: 10px;
}

.footer-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 35px;
    height: 2.5px;
    background: var(--primary-red);
    border-radius: 2px;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    font-size: 0.88rem;
    color: #94A3B8;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.footer-links a i {
    color: #0077C8;
    font-size: 0.78rem;
    transition: transform 0.3s ease;
}

.footer-links a:hover {
    color: #FFFFFF;
    transform: translateX(4px);
}

.footer-links a:hover i {
    color: var(--primary-red);
}

.footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 0.88rem;
    color: #CBD5E1;
    line-height: 1.5;
}

.footer-contact-list .contact-icon-box,
.footer-contact-list .contact-icon {
    width: 38px;
    height: 38px;
    background: rgba(237, 28, 36, 0.18);
    border: 1px solid rgba(237, 28, 36, 0.4);
    color: #ED1C24;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-top: 2px;
    box-shadow: 0 4px 12px rgba(237, 28, 36, 0.25);
    transition: all 0.3s ease;
}

.footer-contact-list li:hover .contact-icon-box,
.footer-contact-list li:hover .contact-icon {
    background: #ED1C24;
    color: #FFFFFF;
    transform: scale(1.08);
}

.footer-contact-list a {
    color: #00C6FF !important;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-contact-list a:hover {
    color: #FFFFFF !important;
    text-decoration: underline;
}

.footer-contact-list a:hover {
    color: #FFFFFF;
}

/* Middle Map Row */
.footer-map-section {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 30px 0;
    background: rgba(0, 0, 0, 0.15);
}

.map-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 15px;
}

.map-header-left h4 {
    color: #FFFFFF;
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.map-header-left p {
    font-size: 0.85rem;
    color: #94A3B8;
}

.btn-google-review {
    border: 1.5px solid #E67E22;
    color: #FFFFFF;
    padding: 9px 20px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    background: transparent;
}

.btn-google-review:hover {
    background: #E67E22;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(230, 126, 34, 0.35);
}

.footer-map-frame {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Footer Bottom Bar */
.footer-bottom {
    background: #14181F;
    padding: 20px 0;
    font-size: 0.85rem;
    color: #94A3B8;
}

.footer-bottom strong {
    color: #FFFFFF;
}

@media (max-width: 1024px) {
    .footer-top-grid {
        grid-template-columns: 1fr 1fr;
        gap: 35px;
    }
}

@media (max-width: 600px) {
    .footer-top-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 35px;
    }

    .footer-col {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .brand-col .footer-logo {
        justify-content: center;
    }

    .footer-socials {
        justify-content: center;
    }

    .footer-heading::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-links a {
        justify-content: center;
    }

    .footer-contact-list li {
        justify-content: center;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-contact-list .contact-icon {
        margin-bottom: 5px;
    }
}

/* SECTION 13: Floating Action Buttons & WhatsApp Popup */
.floating-actions {
    position: fixed;
    bottom: 30px;
    right: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 1040;
}

.float-btn {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    position: relative;
    border: none;
    transition: var(--transition);
}

.float-call {
    background-color: var(--primary-red);
}

.float-wa,
.float-whatsapp {
    background-color: #25D366;
}

.float-top,
.back-to-top {
    background-color: var(--primary-red);
    color: #FFFFFF;
}

.float-btn:hover {
    transform: scale(1.1);
}

.float-tooltip {
    position: absolute;
    right: 70px;
    background: var(--primary-blue-dark);
    color: #FFFFFF;
    font-size: 0.78rem;
    padding: 5px 12px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.float-btn:hover .float-tooltip {
    opacity: 1;
    visibility: visible;
}

/* WhatsApp Popup Box */
.wa-popup {
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 320px;
    background: #FFFFFF;
    border-radius: var(--radius-md);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
    z-index: 1050;
    overflow: hidden;
    display: none;
}

.wa-popup.show {
    display: block;
}

.wa-header {
    background: #075E54;
    color: #FFFFFF;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wa-title {
    font-weight: 700;
    font-size: 0.95rem;
}

.wa-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
}

.wa-body {
    padding: 20px;
}

.wa-intro {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 15px;
}

.wa-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    margin-bottom: 12px;
}

.btn-wa-submit {
    width: 100%;
    background: #25D366;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    cursor: pointer;
}

/* SECTION 14: Back-to-Top Button */
.back-to-top {
    width: 55px;
    height: 55px;
    background-color: var(--primary-red);
    color: #FFFFFF;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 8px 25px rgba(237, 28, 36, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.back-to-top.show {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background-color: var(--primary-red-hover);
    transform: scale(1.1);
    box-shadow: 0 10px 30px rgba(237, 28, 36, 0.5);
    color: #FFFFFF;
}

/* Scroll Reveal Animations */
.reveal,
.reveal-left,
.reveal-right {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal {
    transform: translateY(30px);
}

.reveal-left {
    transform: translateX(-40px);
}

.reveal-right {
    transform: translateX(40px);
}

.reveal.active,
.reveal-left.active,
.reveal-right.active {
    opacity: 1;
    transform: translate(0);
}

/* ==========================================================================
   DISTINCT SECTION-BY-SECTION SCROLL ANIMATIONS & MICRO-INTERACTIONS
   ========================================================================== */

/* -------------------------------------------------------------
   1. HERO SECTION (`#home`) - FLOATING PULSE & DIAGONAL SHIMMER
------------------------------------------------------------- */
@keyframes hexFloatPulse {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
        filter: drop-shadow(0 15px 30px rgba(0, 198, 255, 0.25));
    }

    50% {
        transform: translateY(-12px) rotate(1deg);
        filter: drop-shadow(0 25px 45px rgba(229, 46, 46, 0.35));
    }
}

.hero-hexagon-frame {
    animation: hexFloatPulse 6s ease-in-out infinite;
}

.hero-glow-tag {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hero-glow-tag:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 198, 255, 0.4);
}

/* -------------------------------------------------------------
   2. ABOUT SECTION (`#about`) - CENTER SPLIT REVEAL ANIMATION
   Text splits LEFT from center, Image splits RIGHT from center
------------------------------------------------------------- */
.about-section {
    overflow: hidden;
}

.reveal-about-left {
    opacity: 0;
    transform: translateX(120px) scale(0.92);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.reveal-about-right {
    opacity: 0;
    transform: translateX(-120px) scale(0.92);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.reveal-about-left.active,
.reveal-about-right.active {
    opacity: 1;
    transform: translateX(0) scale(1);
}

/* Staggered check item slide-up inside About section */
.about-checklist .check-item {
    opacity: 0;
    transform: translateY(20px) translateX(-10px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-about-left.active .about-checklist .check-item:nth-child(1) {
    transition-delay: 0.2s;
    opacity: 1;
    transform: translate(0);
}

.reveal-about-left.active .about-checklist .check-item:nth-child(2) {
    transition-delay: 0.35s;
    opacity: 1;
    transform: translate(0);
}

.reveal-about-left.active .about-checklist .check-item:nth-child(3) {
    transition-delay: 0.5s;
    opacity: 1;
    transform: translate(0);
}

.reveal-about-left.active .about-checklist .check-item:nth-child(4) {
    transition-delay: 0.65s;
    opacity: 1;
    transform: translate(0);
}

/* About image badge floating bounce */
@keyframes badgeFloatBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.about-showcase-badge {
    animation: badgeFloatBounce 4s ease-in-out infinite;
}

/* -------------------------------------------------------------
   3. STATS STRIP (`.stats-strip`) - 3D FLIP ENTRANCE & NEON PULSE
------------------------------------------------------------- */
.reveal-stat-card {
    opacity: 0;
    transform: perspective(900px) rotateX(-40deg) translateY(50px);
    transition: transform 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.85s ease, box-shadow 0.5s ease, border-color 0.5s ease;
}

.reveal-stat-card:nth-child(1) {
    transition-delay: 0.1s;
}

.reveal-stat-card:nth-child(2) {
    transition-delay: 0.25s;
}

.reveal-stat-card:nth-child(3) {
    transition-delay: 0.4s;
}

.reveal-stat-card:nth-child(4) {
    transition-delay: 0.55s;
}

.reveal-stat-card.active {
    opacity: 1;
    transform: perspective(900px) rotateX(0deg) translateY(0);
}

@keyframes statNeonPulse {

    0%,
    100% {
        box-shadow: 0 10px 30px rgba(11, 25, 44, 0.5);
    }

    50% {
        box-shadow: 0 15px 40px rgba(0, 198, 255, 0.35);
    }
}

.stat-card.stat-card-blue.active {
    animation: statNeonPulse 4s ease-in-out infinite;
}

@keyframes statRedNeonPulse {

    0%,
    100% {
        box-shadow: 0 10px 30px rgba(11, 25, 44, 0.5);
    }

    50% {
        box-shadow: 0 15px 40px rgba(229, 46, 46, 0.35);
    }
}

.stat-card.stat-card-red.active {
    animation: statRedNeonPulse 4s ease-in-out infinite;
}

/* -------------------------------------------------------------
   4. PRODUCTS SECTION (`#products`) - CASCADING FLOAT WAVE & HOVER SHINE
------------------------------------------------------------- */
.reveal-product-card {
    opacity: 0;
    transform: translateY(65px) scale(0.9) rotate(-1.5deg);
    transition: transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.85s ease, box-shadow 0.4s ease;
}

.services-marquee-track .product-card:nth-child(1) {
    transition-delay: 0.05s;
}

.services-marquee-track .product-card:nth-child(2) {
    transition-delay: 0.18s;
}

.services-marquee-track .product-card:nth-child(3) {
    transition-delay: 0.31s;
}

.services-marquee-track .product-card:nth-child(4) {
    transition-delay: 0.44s;
}

.services-marquee-track .product-card:nth-child(5) {
    transition-delay: 0.57s;
}

.services-marquee-track .product-card:nth-child(6) {
    transition-delay: 0.7s;
}

.reveal-product-card.active {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
}

/* Product Card Glass Shine Sweep on Hover */
.product-card {
    position: relative;
    overflow: hidden;
}

.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: skewX(-25deg);
    transition: none;
    pointer-events: none;
    z-index: 10;
}

.product-card:hover::before {
    left: 150%;
    transition: left 0.85s ease-in-out;
}

/* -------------------------------------------------------------
   5. WHY CHOOSE US (`#why-us`) - ALTERNATING ZIG-ZAG & RADAR PULSE
------------------------------------------------------------- */
.reveal-why-circle {
    opacity: 0;
    transform: scale(0.8) rotate(-10deg);
    transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.2), opacity 1s ease;
}

.reveal-why-circle.active {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.reveal-why-list {
    opacity: 0;
    transform: translateX(60px);
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease;
}

.reveal-why-list.active {
    opacity: 1;
    transform: translateX(0);
}

.why-us-list-item {
    opacity: 0;
    transform: translateX(40px);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}

.reveal-why-list.active .why-us-list-item:nth-child(1) {
    transition-delay: 0.15s;
    opacity: 1;
    transform: translateX(0);
}

.reveal-why-list.active .why-us-list-item:nth-child(2) {
    transition-delay: 0.3s;
    opacity: 1;
    transform: translateX(0);
}

.reveal-why-list.active .why-us-list-item:nth-child(3) {
    transition-delay: 0.45s;
    opacity: 1;
    transform: translateX(0);
}

.reveal-why-list.active .why-us-list-item:nth-child(4) {
    transition-delay: 0.6s;
    opacity: 1;
    transform: translateX(0);
}

/* Radar Ripple Pulse on Badge Nodes */
@keyframes iconRadarPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 198, 255, 0.6);
    }

    70% {
        box-shadow: 0 0 0 16px rgba(0, 198, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 198, 255, 0);
    }
}

.why-badge-node {
    animation: iconRadarPulse 3s infinite;
}

/* -------------------------------------------------------------
   6. TESTIMONIALS (`#testimonials`) - CURVED ZOOM-FADE & STAR SPARKLE
------------------------------------------------------------- */
.reveal-testimonial-container {
    opacity: 0;
    transform: scale(0.88) translateY(40px);
    transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.2), opacity 1s ease;
}

.reveal-testimonial-container.active {
    opacity: 1;
    transform: scale(1) translateY(0);
}

@keyframes starSparkleFill {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(255, 193, 7, 0));
    }

    50% {
        transform: scale(1.3) rotate(15deg);
        filter: drop-shadow(0 0 10px rgba(255, 193, 7, 0.9));
    }

    100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 2px rgba(255, 193, 7, 0.5));
    }
}

.review-card .fa-star {
    display: inline-block;
    transition: transform 0.3s ease;
}

.review-card:hover .fa-star {
    animation: starSparkleFill 0.6s ease forwards;
}

/* -------------------------------------------------------------
   7. FOOTER (`#footer`) - UPWARD CURTAIN STAGGER & NEON BORDER
------------------------------------------------------------- */
.footer {
    position: relative;
}

.reveal-footer-col {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.85s ease;
}

.footer-top-grid .footer-col:nth-child(1) {
    transition-delay: 0.1s;
}

.footer-top-grid .footer-col:nth-child(2) {
    transition-delay: 0.25s;
}

.footer-top-grid .footer-col:nth-child(3) {
    transition-delay: 0.4s;
}

.footer-top-grid .footer-col:nth-child(4) {
    transition-delay: 0.55s;
}

.reveal-footer-col.active {
    opacity: 1;
    transform: translateY(0);
}

@keyframes footerBorderGlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #E52E2E, #00C6FF, #FFD700, #E52E2E);
    background-size: 300% 300%;
    animation: footerBorderGlow 6s ease infinite;
}


/* Responsive Styles */
@media (max-width: 1024px) {

    .circle-slide-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    .circle-left-col {
        padding-right: 0;
        text-align: center;
    }

    .hero-product-grid {
        max-width: 520px;
        margin: 0 auto;
        width: 100%;
        box-sizing: border-box;
    }

    .about-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .process-timeline {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    .process-line {
        display: none;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .top-bar {
        padding: 9px 0;
        white-space: nowrap;
        overflow: hidden;
    }

    .top-bar-marquee {
        width: max-content !important;
        animation: topBarMarquee 22s linear infinite !important;
        will-change: transform;
    }

    .top-bar-marquee:hover,
    .top-bar-marquee:active {
        animation-play-state: paused !important;
    }

    .top-bar-duplicate {
        display: flex !important;
    }

    .top-bar-inner {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 30px !important;
        padding-right: 30px !important;
        max-width: none !important;
        width: max-content !important;
        margin: 0 !important;
    }

    .top-info-left,
    .top-info-right {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 30px;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .top-info-left span,
    .top-info-right a {
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
    }

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

    .mobile-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: #F8FAFC;
        border: 1.5px solid #CBD5E1;
        border-radius: 10px;
        color: #07192B;
        font-size: 1.3rem;
        cursor: pointer;
        transition: all 0.25s ease;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }

    .mobile-toggle:hover,
    .mobile-toggle:active {
        background: #FFF5F5;
        border-color: #ED1C24;
        color: #ED1C24;
    }

    .btn-brochure {
        display: none;
    }

    .nav-menu {
        position: fixed;
        top: 85px;
        left: 0;
        right: 0;
        width: 100%;
        max-height: calc(100vh - 85px);
        background: #07192B;
        border-bottom: 3px solid #ED1C24;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35);
        padding: 24px 20px 30px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-15px);
        transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        overflow-y: auto;
        z-index: 99998;
    }

    .nav-menu.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 13px 16px;
        font-size: 1.05rem;
        font-weight: 700;
        color: #FFFFFF !important;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 10px;
        margin-bottom: 4px;
        text-decoration: none;
        transition: all 0.25s ease;
    }

    .nav-link:hover,
    .nav-link.active {
        background: linear-gradient(90deg, rgba(237, 28, 36, 0.22) 0%, rgba(0, 174, 239, 0.15) 100%);
        border-color: rgba(237, 28, 36, 0.4);
        color: #FFFFFF !important;
        padding-left: 20px;
    }

    .nav-link.active::after {
        display: none;
    }

    .nav-item.has-dropdown:hover .mega-dropdown {
        opacity: 0;
        visibility: hidden;
        display: none;
    }

    .mega-dropdown {
        position: static;
        width: 100%;
        box-shadow: none;
        background: rgba(11, 34, 64, 0.6);
        border: 1px solid rgba(0, 174, 239, 0.2);
        border-radius: 12px;
        padding: 0 16px;
        opacity: 0;
        visibility: hidden;
        transform: none;
        margin-top: 0;
        margin-bottom: 0;
        display: none;
        border-top: none;
        transition: all 0.3s ease;
    }

    .nav-item.has-dropdown.open .mega-dropdown,
    .nav-item.has-dropdown.open:hover .mega-dropdown {
        opacity: 1;
        visibility: visible;
        display: block;
        padding: 16px;
        margin-top: 4px;
        margin-bottom: 8px;
    }

    .nav-item.has-dropdown .drop-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px 12px;
        margin: -6px -12px -6px 6px;
        cursor: pointer;
        transition: transform 0.3s ease, background-color 0.2s ease;
        border-radius: 6px;
    }

    .nav-item.has-dropdown .drop-icon:hover {
        background: rgba(255, 255, 255, 0.12);
    }

    .nav-item.has-dropdown.open .drop-icon,
    .nav-item.has-dropdown.open:hover .drop-icon {
        transform: rotate(180deg);
    }

    .nav-item.has-dropdown:not(.open):hover .drop-icon {
        transform: rotate(0deg);
    }

    .mega-all-products-bar {
        display: block !important;
        margin-bottom: 14px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .mega-all-products-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: linear-gradient(135deg, #ED1C24, #C1121F);
        color: #FFFFFF !important;
        padding: 10px 16px;
        border-radius: 8px;
        font-weight: 700;
        font-size: 0.92rem;
        text-decoration: none;
        box-shadow: 0 4px 12px rgba(237, 28, 36, 0.3);
        transition: all 0.3s ease;
    }

    .mega-all-products-btn:hover {
        background: linear-gradient(135deg, #ff333a, #ED1C24);
        transform: translateY(-1px);
        color: #FFFFFF !important;
    }

    .mega-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .mega-title {
        font-size: 0.92rem;
        color: #00C6FF;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 6px;
        margin-bottom: 10px;
        font-weight: 800;
    }

    .mega-links li {
        margin-bottom: 10px;
    }

    .mega-links a {
        color: #CBD5E1;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        padding: 4px 0;
        transition: all 0.2s ease;
    }

    .mega-links a:hover {
        color: #FFFFFF;
        padding-left: 6px;
    }

    .mobile-nav-quote {
        display: block;
        width: 100%;
        margin-top: 14px;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .mobile-nav-quote .btn {
        width: 100%;
        justify-content: center;
        padding: 13px 20px;
        font-size: 1rem;
        font-weight: 800;
        border-radius: 30px;
        background: linear-gradient(135deg, #ED1C24 0%, #C90E15 100%);
        box-shadow: 0 6px 20px rgba(237, 28, 36, 0.35);
        color: #FFFFFF;
    }

    /* Floating Action Buttons & WhatsApp Popup Mobile Alignment */
    .floating-actions {
        position: fixed !important;
        bottom: 20px !important;
        right: 15px !important;
        left: auto !important;
        gap: 12px !important;
        z-index: 999999 !important;
        width: auto !important;
    }

    .float-btn {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.25rem !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
        margin: 0 !important;
    }

    .float-tooltip {
        display: none !important;
    }

    .wa-popup {
        right: 15px !important;
        left: 15px !important;
        width: calc(100% - 30px) !important;
        bottom: 85px !important;
        z-index: 9999999 !important;
    }

    .hero-circle-section {
        padding: 40px 0;
        min-height: auto;
    }

    .circle-headline {
        font-size: 2.1rem;
    }

    .circle-eyebrow {
        font-size: 1.1rem;
    }

    .hero-product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        width: 100%;
        max-width: 100%;
        padding: 0 4px;
        box-sizing: border-box;
    }

    .photo-grid-box {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .grid-item-wrap {
        height: 110px;
    }

    .about-single-showcase-card {
        padding: 12px 12px 20px 12px;
    }

    .hero-grid-item {
        border-width: 2px;
        border-radius: 12px;
        width: 100%;
        box-sizing: border-box;
    }

    .grid-item-label {
        font-size: 0.8rem;
        padding: 6px 4px;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-slider-section {
        height: 520px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    /* Why Choose Us Responsive Graphics */
    .why-us-circle-graphics {
        width: 310px;
        max-width: 100%;
        height: 310px;
        margin: 0 auto;
    }

    .why-center-large-circle {
        top: 25px;
        left: 65px;
        width: 245px;
        height: 245px;
        padding: 20px 20px 20px 95px;
    }

    .why-left-title-circle {
        top: 65px;
        left: 0;
        width: 155px;
        height: 155px;
        padding: 12px;
    }

    .circle-main-logo {
        max-height: 70px;
    }

    .why-badge-node {
        width: 50px;
        height: 50px;
        font-size: 1.1rem;
    }

    .badge-node-1 {
        top: 40px;
        right: 20px;
    }

    .badge-node-2 {
        top: 130px;
        right: 0px;
    }

    .badge-node-3 {
        top: 220px;
        right: 0px;
    }

    .badge-node-4 {
        top: 300px;
        right: 20px;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .process-timeline {
        grid-template-columns: 1fr;
    }

    .hero-ctas {
        flex-direction: column;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }

    /* Why Choose Us Small Mobile Graphics */
    .why-us-circle-graphics {
        width: 290px;
        height: 290px;
    }

    .why-center-large-circle {
        top: 30px;
        left: 60px;
        width: 230px;
        height: 230px;
        padding: 20px 20px 20px 85px;
    }

    .why-center-large-circle p {
        font-size: 0.72rem;
        line-height: 1.4;
    }

    .why-left-title-circle {
        top: 70px;
        left: 0;
        width: 140px;
        height: 140px;
        border-width: 3px;
        padding: 10px;
    }

    .circle-main-logo {
        max-height: 65px;
    }

    .why-badge-node {
        width: 40px;
        height: 40px;
        font-size: 0.95rem;
        border-width: 2.5px;
    }

    .badge-node-1 {
        top: 30px;
        right: 15px;
    }

    .badge-node-2 {
        top: 100px;
        right: 0px;
    }

    .badge-node-3 {
        top: 170px;
        right: 0px;
    }

    .badge-node-4 {
        top: 230px;
        right: 15px;
    }

    .header-actions .btn-red-pill {
        padding: 6px 12px;
        font-size: 0.75rem;
    }
}

@media (max-width: 360px) {
    .header-actions .btn-red-pill {
        display: none;
    }
}

/* MULTI-PAGE SECONDARY STYLES */
.page-banner {
    background: linear-gradient(135deg, #0B2A4A 0%, #103C68 100%);
    padding: 70px 0 60px;
    color: #FFFFFF;
    position: relative;
}

.page-banner-title {
    font-size: 2.8rem;
    font-weight: 800;
    margin: 12px 0 16px;
    color: #FFFFFF;
}

.page-banner .breadcrumb {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #CBD5E1;
}

.page-banner .breadcrumb a {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 500;
}

/* About Page Pillars & Cards */
.about-pillars {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 25px;
}

.pillar-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.pillar-icon {
    width: 44px;
    height: 44px;
    background: rgba(237, 28, 36, 0.1);
    color: var(--primary-red);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.mv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 45px;
}

.mv-card {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 35px 30px;
    border: 1.5px solid #E2E8F0;
    box-shadow: 0 10px 30px rgba(11, 42, 74, 0.05);
    transition: all 0.3s ease;
}

.mv-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(11, 42, 74, 0.1);
    border-color: var(--primary-red);
}

.mv-icon {
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-blue) 100%);
    color: #FFFFFF;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 20px;
}

.mv-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--primary-blue-dark);
}

/* Catalog Page Cards */
.catalog-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 45px;
}

.catalog-card {
    background: #FFFFFF;
    border-radius: 24px;
    border: 1.5px solid #E2E8F0;
    box-shadow: 0 12px 35px rgba(11, 42, 74, 0.06);
    display: grid;
    grid-template-columns: 340px 1fr;
    overflow: hidden;
    transition: all 0.3s ease;
}

.catalog-card:hover {
    box-shadow: 0 20px 45px rgba(11, 42, 74, 0.12);
    border-color: var(--primary-blue);
}

.catalog-img-box {
    position: relative;
    background: #F8FAFC;
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.catalog-img-box img {
    max-height: 240px;
    object-fit: contain;
}

.catalog-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--primary-red);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
}

.catalog-badge.badge-blue {
    background: var(--primary-blue);
}

.catalog-content {
    padding: 35px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.catalog-content h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-blue-dark);
    margin-bottom: 12px;
}

.catalog-desc {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
}

.specs-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    margin-bottom: 25px;
}

.specs-list li {
    font-size: 0.9rem;
    color: var(--text-dark);
}

/* Technical Specification Table */
.tech-table-section {
    background: #F8FAFC;
}

.table-responsive {
    overflow-x: auto;
    margin-top: 40px;
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(11, 42, 74, 0.05);
    border: 1.5px solid #E2E8F0;
}

.tech-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.tech-table th {
    background: #0B2A4A;
    color: #FFFFFF;
    padding: 16px 20px;
    font-size: 0.9rem;
    font-weight: 700;
}

.tech-table td {
    padding: 16px 20px;
    border-bottom: 1px solid #E2E8F0;
    font-size: 0.9rem;
    color: var(--text-dark);
}

.table-badge {
    background: rgba(37, 211, 102, 0.12);
    color: #128C7E;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.8rem;
}

/* Contact Page Styles */
.contact-info-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-card {
    background: #FFFFFF;
    border-radius: 18px;
    padding: 24px;
    border: 1.5px solid #E2E8F0;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    box-shadow: 0 8px 24px rgba(11, 42, 74, 0.04);
}

.info-card .info-icon {
    width: 48px;
    height: 48px;
    background: rgba(237, 28, 36, 0.1);
    color: var(--primary-red);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.info-card h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-blue-dark);
    margin-bottom: 6px;
}

.info-card p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.info-card a {
    color: var(--primary-blue-dark);
    font-weight: 600;
    text-decoration: none;
}

.info-subtext {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: block;
    margin-top: 4px;
}

.btn-wa-inline {
    background: #25D366;
    color: #FFFFFF !important;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 700;
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 992px) {
    .mv-grid {
        grid-template-columns: 1fr;
    }

    .catalog-card {
        grid-template-columns: 1fr;
    }

    .specs-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .about-content {
        order: 1;
        text-align: center;
    }

    .about-eyebrow-line {
        margin: 0 auto 25px;
    }

    .about-checkmark-list {
        align-items: center;
    }

    .about-image-card-wrapper {
        order: 2;
        padding-bottom: 25px;
    }

    .about-main-title {
        font-size: 2.2rem;
    }
}

@media (max-width: 480px) {
    .about-main-title {
        font-size: 1.8rem;
    }

    .about-card-badge-pill {
        padding: 8px 16px;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
    }

    .badge-star-icon {
        width: 28px;
        height: 28px;
    }

    .badge-pill-val {
        font-size: 0.78rem;
    }
}

/* Top Bar Infinite Marquee Keyframe Animation */
@keyframes topBarMarquee {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Verified Client Review Cards 2-Card Auto-Slider Styling */
.testimonial-slide-item {
    min-width: 100%;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s ease, visibility 0.6s ease;
    display: none;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 768px) {
    .testimonial-slide-item {
        grid-template-columns: 1fr;
    }
}

.testimonial-slide-item.active {
    opacity: 1;
    visibility: visible;
    position: relative;
    display: grid;
    animation: testimonialFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes testimonialFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.review-card {
    width: 100%;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
}

.review-card:hover {
    transform: translateY(-8px) scale(1.01) !important;
    border-color: rgba(229, 46, 46, 0.4) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 20px rgba(229, 46, 46, 0.15) !important;
}

/* Hero Logo-Type Headline & One-By-One Word Display Animation */
.circle-headline.hero-logo-animated {
    font-size: 3.2rem;
    font-weight: 900;
    letter-spacing: -0.5px;
    margin-bottom: 24px;
    display: inline-block;
    position: relative;
}

@media (max-width: 768px) {
    .circle-headline.hero-logo-animated {
        font-size: 2.1rem;
    }
}

/* -------------------------------------------------------------
   ENHANCED HERO HEADLINE & TEXT ANIMATIONS
------------------------------------------------------------- */
.circle-headline.hero-logo-animated {
    font-weight: 900;
    line-height: 1.18;
    perspective: 800px;
}

.animated-word-item {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px) rotateX(40deg) scale(0.88);
    animation: word3DEntrance 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.25) forwards;
    margin-right: 8px;
    white-space: nowrap;
    transform-origin: bottom center;
}

.text-white-glow {
    text-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
}

@keyframes word3DEntrance {
    0% {
        opacity: 0;
        transform: translateY(30px) rotateX(40deg) scale(0.88);
        filter: blur(8px);
    }

    60% {
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0deg) scale(1);
        filter: blur(0);
    }
}

/* Glowing Blue Shimmer Gradient for "UNIQUE" */
.hero-logo-animated .brand-blue-glow {
    background: linear-gradient(135deg, #00D2FF 0%, #007BFF 50%, #66B2FF 100%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 900;
    letter-spacing: 1px;
    animation: word3DEntrance 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.25) forwards, blueShimmerGradient 4s ease infinite !important;
    filter: drop-shadow(0 4px 18px rgba(0, 210, 255, 0.6)) !important;
}

@keyframes blueShimmerGradient {
    0% {
        background-position: 0% 50%;
        filter: drop-shadow(0 4px 18px rgba(0, 210, 255, 0.5));
    }

    50% {
        background-position: 100% 50%;
        filter: drop-shadow(0 4px 28px rgba(0, 123, 255, 0.85));
    }

    100% {
        background-position: 0% 50%;
        filter: drop-shadow(0 4px 18px rgba(0, 210, 255, 0.5));
    }
}

/* Electric Vivid Red Gradient Pulse for "Powered by Total Power Solutions" */
.hero-logo-animated .brand-tag-glow {
    background: linear-gradient(135deg, #FF5252 0%, #E52E2E 50%, #FF7070 100%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 900;
    animation: word3DEntrance 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.25) forwards, redPulseGlow 3.5s ease infinite !important;
    filter: drop-shadow(0 4px 20px rgba(229, 46, 46, 0.65)) !important;
}

@keyframes redPulseGlow {
    0% {
        background-position: 0% 50%;
        filter: drop-shadow(0 4px 18px rgba(229, 46, 46, 0.55));
    }

    50% {
        background-position: 100% 50%;
        filter: drop-shadow(0 4px 32px rgba(255, 82, 82, 0.95));
    }

    100% {
        background-position: 0% 50%;
        filter: drop-shadow(0 4px 18px rgba(229, 46, 46, 0.55));
    }
}

/* Animated Glowing Light-Sweep Accent Bar */
.hero-headline-accent-bar {
    width: 160px;
    height: 4px;
    background: linear-gradient(90deg, #E52E2E 0%, #00C6FF 50%, #E52E2E 100%);
    border-radius: 4px;
    margin: 18px auto 20px auto !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 14px rgba(229, 46, 46, 0.5);
}

.hero-headline-accent-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #FFFFFF, transparent);
    animation: accentBarLightSweep 2.5s infinite;
}

@keyframes accentBarLightSweep {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Highlight Badges in Supporting Paragraph */
.hero-text-highlight {
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 700;
    display: inline-block;
}

.hero-text-highlight.red-highlight {
    background: rgba(229, 46, 46, 0.2);
    color: #FF7070;
    border: 1px solid rgba(229, 46, 46, 0.35);
}

.hero-text-highlight.blue-highlight {
    background: rgba(0, 123, 255, 0.2);
    color: #66B2FF;
    border: 1px solid rgba(0, 123, 255, 0.35);
}

/* Hero Paragraph Right-to-Left Slide-In Animation */
.circle-supporting.slide-right-to-left {
    opacity: 0;
    transform: translateX(60px);
    animation: slideRightToLeft 1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}

@keyframes slideRightToLeft {
    0% {
        opacity: 0;
        transform: translateX(60px);
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

/* Hero Circle Section & Background Slider Architecture */
.hero-circle-section {
    position: relative;
    width: 100%;
    min-height: 82vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #07192B;
    padding: 65px 0 45px 0;
}

.hero-circle-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.circle-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.circle-slide.active {
    opacity: 1;
    z-index: 2;
}

.slide-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 6s ease;
}

.circle-slide.active .slide-bg {
    transform: scale(1.04);
}

/* Animated Floating Sparkles Background */
.hero-sparkles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

.sparkle-particle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(229, 46, 46, 0.7) 60%, transparent 100%);
    box-shadow: 0 0 12px rgba(255, 82, 82, 0.9), 0 0 24px rgba(0, 123, 255, 0.7);
    animation: floatSparkle linear infinite;
}

.sparkle-particle:nth-child(1) {
    width: 7px;
    height: 7px;
    top: 15%;
    left: 18%;
    animation-duration: 6s;
    animation-delay: 0s;
}

.sparkle-particle:nth-child(2) {
    width: 9px;
    height: 9px;
    top: 60%;
    left: 12%;
    animation-duration: 8s;
    animation-delay: 1s;
}

.sparkle-particle:nth-child(3) {
    width: 6px;
    height: 6px;
    top: 30%;
    left: 42%;
    animation-duration: 5s;
    animation-delay: 2s;
}

.sparkle-particle:nth-child(4) {
    width: 10px;
    height: 10px;
    top: 75%;
    left: 50%;
    animation-duration: 7s;
    animation-delay: 0.5s;
}

.sparkle-particle:nth-child(5) {
    width: 8px;
    height: 8px;
    top: 22%;
    left: 78%;
    animation-duration: 9s;
    animation-delay: 1.5s;
}

.sparkle-particle:nth-child(6) {
    width: 7px;
    height: 7px;
    top: 82%;
    left: 88%;
    animation-duration: 6.5s;
    animation-delay: 3s;
}

.sparkle-particle:nth-child(7) {
    width: 11px;
    height: 11px;
    top: 38%;
    left: 93%;
    animation-duration: 7.5s;
    animation-delay: 2.5s;
}

@keyframes floatSparkle {
    0% {
        transform: translateY(0) translateX(0) scale(0.6);
        opacity: 0.2;
    }

    50% {
        transform: translateY(-45px) translateX(30px) scale(1.3);
        opacity: 0.95;
    }

    100% {
        transform: translateY(-90px) translateX(-20px) scale(0.6);
        opacity: 0.2;
    }
}

/* Exact 1:1 Match to User's Mockup Design */
.hero-mockup-grid {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 30px;
    width: 100%;
}

.hero-mockup-left {
    text-align: left;
    position: relative;
    z-index: 5;
}

/* Dynamic Hero Headline & Transition - Centered Alignment */
.hero-company-name-box {
    text-align: center !important;
    margin: 0 auto 12px auto !important;
    width: 100% !important;
}

.hero-h1-welcome-center {
    display: block !important;
    text-align: center !important;
    font-size: 2.55rem !important;
    font-weight: 900 !important;
    color: #FFFFFF !important;
    letter-spacing: 1px;
    margin: 0 auto 10px auto !important;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
    width: 100%;
}

.hero-company-title {
    text-align: center !important;
    font-size: 2.85rem !important;
    font-weight: 900 !important;
    color: #FFFFFF !important;
    line-height: 1.25 !important;
    margin: 0 auto 6px auto !important;
    letter-spacing: -0.5px;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

.hero-company-subline {
    text-align: center !important;
    margin-top: 4px;
}

.animate-left-to-right {
    display: inline-block;
    animation: typeLeftToRight 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: clip-path, transform, opacity;
}

.animate-left-to-right-delay {
    animation: typeLeftToRight 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
    opacity: 0;
    will-change: clip-path, transform, opacity;
}

@keyframes typeLeftToRight {
    0% {
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        opacity: 0;
        transform: translateX(-45px);
    }

    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
        transform: translateX(0);
    }
}

.hero-title-bold.fade-out,
.circle-supporting.fade-out {
    opacity: 0 !important;
    transform: translateY(-8px) !important;
}

.circle-supporting {
    max-width: 470px !important;
    text-align: center !important;
    margin: 14px auto 0 auto !important;
    font-size: 1.02rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.92);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.brand-blue-glow-tag {
    color: #00C6FF !important;
    background: linear-gradient(135deg, #00E5FF 0%, #007BFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900 !important;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
    display: inline-block;
    vertical-align: baseline;
    padding: 0 2px;
}

.brand-red-glow-tag {
    color: #E52E2E !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #E52E2E !important;
    font-weight: 900 !important;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
    display: inline-block;
    vertical-align: baseline;
    padding: 0 2px;
}

.hero-subline-text {
    font-size: clamp(1rem, 1.4vw, 1.15rem) !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    letter-spacing: 0.3px;
    display: inline-block;
    margin-top: 6px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.hero-mockup-right {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Center Diagonal Dividing Line with Node (Positioned between text and hexagon box) */
.hero-diagonal-divider {
    position: absolute;
    top: -140px;
    left: 54%;
    height: calc(100% + 320px);
    width: 3px;
    background: linear-gradient(180deg, #00C6FF 0%, #007BFF 45%, #FF3B3B 100%);
    transform: rotate(20deg);
    z-index: 4;
    filter: drop-shadow(0 0 10px rgba(0, 198, 255, 0.85)) drop-shadow(0 0 18px rgba(237, 28, 36, 0.6));
}

.divider-node-circle {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #0B192C;
    border: 3px solid #00C6FF;
    box-shadow: 0 0 14px rgba(0, 198, 255, 0.9), inset 0 0 6px rgba(0, 198, 255, 0.5);
}

/* Right Blue/Purple Diagonal Polygon Card */
.hero-purple-polygon-bg {
    position: absolute;
    top: -60px;
    right: -100px;
    width: 650px;
    height: calc(100% + 120px);
    background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 35%, #7C3AED 75%, #6D28D9 100%);
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
    z-index: 1;
    opacity: 0.94;
    animation: heroBgSlideRightToLeft 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes heroBgSlideRightToLeft {
    0% {
        transform: translateX(180px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 0.94;
    }
}

/* Hero Glow Tags in Description Paragraph */
.hero-glow-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.88rem;
    font-weight: 700;
    margin: 2px 4px;
    vertical-align: middle;
}

.hero-glow-tag.red-tag {
    background: rgba(229, 46, 46, 0.18);
    color: #FF6666;
    border: 1px solid rgba(229, 46, 46, 0.4);
    box-shadow: 0 0 10px rgba(229, 46, 46, 0.2);
}

.hero-glow-tag.blue-tag {
    background: rgba(0, 123, 255, 0.18);
    color: #66B2FF;
    border: 1px solid rgba(0, 123, 255, 0.4);
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.2);
}

/* Hero CTA Action Buttons */
.hero-cta-group {
    display: flex;
    gap: 16px;
    margin-top: 24px;
    flex-wrap: wrap;
    align-items: center;
}

.btn-hero-primary {
    background: linear-gradient(135deg, #E52E2E 0%, #C41E1E 100%);
    color: #FFFFFF !important;
    padding: 13px 26px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 25px rgba(229, 46, 46, 0.45);
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-hero-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 32px rgba(229, 46, 46, 0.65);
    color: #FFFFFF !important;
}

.btn-hero-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF !important;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-hero-secondary:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: #FFFFFF;
    transform: translateY(-3px);
    color: #FFFFFF !important;
}

.hero-trust-highlights {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 600;
}

/* Horizontal Hexagon Visual Card */
.mockup-hex-wrapper {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 380px;
    height: 320px;
    margin: 0 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: heroCardSlideRightToLeft 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
    opacity: 0;
}

@keyframes heroCardSlideRightToLeft {
    0% {
        transform: translateX(120px);
        opacity: 0;
    }

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

/* Animated Floating Tech Badges */
.hero-float-badge {
    position: absolute;
    z-index: 20;
    background: rgba(11, 25, 44, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

.float-top-left {
    top: 0px;
    left: 10px;
    animation: gentleBadgeFloat1 6s ease-in-out infinite;
}

.float-bottom-left {
    bottom: 0px;
    left: 10px;
    animation: gentleBadgeFloat2 6.5s ease-in-out infinite 1.5s;
}

.float-top-right {
    top: 0px;
    right: 10px;
    animation: gentleBadgeFloat3 5.8s ease-in-out infinite 0.8s;
}

@keyframes gentleBadgeFloat1 {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes gentleBadgeFloat2 {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(5px);
    }
}

@keyframes gentleBadgeFloat3 {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-4px);
    }
}

.badge-icon-box {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.badge-icon-box.gold {
    background: rgba(255, 179, 0, 0.2);
    color: #FFB300;
}

.badge-icon-box.green {
    background: rgba(40, 167, 69, 0.2);
    color: #28A745;
}

.badge-icon-box.blue {
    background: rgba(0, 210, 255, 0.2);
    color: #00D2FF;
}

.badge-title {
    font-size: 0.74rem;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.2;
}

.badge-subtitle {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.7);
}

.mockup-hex-outer {
    position: relative;
    width: 350px;
    height: 290px;
    background: #FFFFFF;
    padding: 8px;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    transition: transform 0.4s ease;
    transform: translate3d(0, 0, 0);
}

.mockup-hex-outer:hover {
    transform: scale(1.03);
}

.mockup-hex-inner {
    width: 100%;
    height: 100%;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background: #FFFFFF;
    overflow: hidden;
    position: relative;
    transform: translate3d(0, 0, 0);
}

/* Hexagon Box Product Slideshow Cross-Fade & Video Container */
.hex-slider-container,
.hex-video-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: #07192B;
}

.hex-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: none;
    outline: none;
    z-index: 10;
    opacity: 1;
    transition: opacity 0.6s ease;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    will-change: opacity;
}

.hex-video-contain {
    object-fit: contain;
}

.hex-video.video-ended {
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

.hex-slide-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
    background: #FFFFFF;
    opacity: 0;
    z-index: 1;
    transition: opacity 0.8s ease-in-out, transform 4s ease;
    transform: scale(1.03);
}

.hex-slide-img.prev-slide {
    opacity: 1;
    z-index: 2;
    transform: scale(1);
    transition: none;
}

.hex-slide-img.active-slide {
    opacity: 1;
    z-index: 3;
    transform: scale(1);
    transition: opacity 0.8s ease-in-out, transform 4s ease;
}

.mockup-hex-outer:hover .mockup-hex-inner img {
    transform: scale(1.08);
}

/* About Redesign Responsive Grid Styles */
.about-redesign-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.about-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 30px;
}

/* ==========================================================================
   ABOUT SECTION - EXACT REFERENCE DESIGN STYLING
   ========================================================================== */
.about-card-container {
    background: linear-gradient(135deg, #F0F6FF 0%, #E8F1FD 50%, #F5F9FF 100%);
    border: 1px solid #D6E4F8;
    border-radius: 32px;
    padding: 50px 45px;
    box-shadow: 0 20px 50px rgba(11, 42, 74, 0.05);
}

.about-redesign-grid {
    display: grid;
    grid-template-columns: 1fr 1.08fr;
    gap: 35px;
    align-items: center;
}

/* Left Eyebrow Pill */
.about-eyebrow-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FFEBEE;
    color: #E52E2E;
    border: 1px solid #FFCDD2;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 18px;
}

/* Main Headline */
.about-main-headline {
    font-size: 2.5rem;
    font-weight: 900;
    color: #07192B;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.headline-highlight-text {
    color: #07192B;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: #07192B;
    font-weight: 900;
}

.about-body-text {
    font-size: 1.05rem;
    color: #4A5568;
    line-height: 1.7;
    margin-bottom: 14px;
}

.about-body-subtext {
    font-size: 0.95rem;
    color: #64748B;
    line-height: 1.65;
    margin-bottom: 18px;
}

/* Mentor Leadership Highlight Card */
.mentor-highlight-card {
    background: linear-gradient(135deg, rgba(237, 28, 36, 0.05) 0%, rgba(0, 198, 255, 0.08) 100%);
    border-left: 4px solid #ED1C24;
    border-radius: 14px;
    padding: 18px 22px;
    margin: 20px 0 24px 0;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
    display: flex;
    gap: 16px;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}

.mentor-card-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 4px 14px rgba(237, 28, 36, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #ED1C24;
}

.mentor-card-content {
    flex: 1;
}

.mentor-card-text {
    font-size: 0.96rem;
    color: #1E293B;
    line-height: 1.65;
    margin: 0;
    font-weight: 500;
}

.mentor-name-badge {
    color: #07192B;
    font-weight: 800;
    background: #FFFFFF;
    border: 1px solid rgba(0, 198, 255, 0.4);
    padding: 3px 10px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Custom Formatted Story & Offerings Box */
.company-story-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.story-lead-card {
    background: #FFFFFF;
    border: 1px solid rgba(237, 28, 36, 0.2);
    border-left: 4px solid #ED1C24;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.story-header-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.est-badge {
    background: linear-gradient(135deg, #ED1C24 0%, #C01018 100%);
    color: #FFFFFF;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.role-badge {
    background: rgba(0, 198, 255, 0.1);
    color: #0088CC;
    border: 1px solid rgba(0, 198, 255, 0.3);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.story-intro-p {
    font-size: 0.95rem;
    color: #334155;
    line-height: 1.6;
    margin-bottom: 0;
}

.products-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product-tag-pill {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    color: #1E293B;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.25s ease;
}

.product-tag-pill:hover {
    background: #FFFFFF;
    border-color: #00C6FF;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 198, 255, 0.15);
}

.client-commitment-card {
    background: #FFFFFF;
    border: 1px solid rgba(0, 198, 255, 0.2);
    border-left: 4px solid #00C6FF;
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    gap: 16px;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.commitment-icon-box {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 4px 12px rgba(0, 198, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #0088CC;
}

.commitment-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 4px 0;
}

.commitment-desc {
    font-size: 0.95rem;
    color: #334155;
    line-height: 1.6;
    margin: 0;
}

/* Highlights Grid inside About Us */
.about-highlights-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 4px;
}

@media (max-width: 640px) {
    .about-highlights-grid {
        grid-template-columns: 1fr;
    }
}

.highlight-mini-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    transition: all 0.25s ease;
}

.highlight-mini-card:hover {
    border-color: #00C6FF;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 198, 255, 0.12);
}

.mini-card-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #00C6FF 0%, #0072FF 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    box-shadow: 0 4px 10px rgba(0, 198, 255, 0.25);
}

.mini-card-icon.icon-shield {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25);
}

.mini-card-icon.icon-custom {
    background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
    box-shadow: 0 4px 10px rgba(139, 92, 246, 0.25);
}

.mini-card-icon.icon-quality {
    background: linear-gradient(135deg, #ED1C24 0%, #C01018 100%);
    box-shadow: 0 4px 10px rgba(237, 28, 36, 0.25);
}

.mini-card-text {
    flex: 1;
}

.mini-card-text strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 2px;
}

.mini-card-text p {
    font-size: 0.8rem;
    color: #64748B;
    line-height: 1.35;
    margin: 0;
}

/* Floating Overlay Badges on Showcase Image */
.about-collage-container {
    position: relative;
}

.about-experience-float-badge {
    position: absolute;
    top: 20px;
    left: -15px;
    background: #FFFFFF;
    border: 1px solid rgba(237, 28, 36, 0.2);
    border-radius: 14px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    z-index: 3;
    animation: floatAnim 4s ease-in-out infinite alternate;
}

.exp-badge-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ED1C24 0%, #C01018 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(237, 28, 36, 0.3);
}

.exp-badge-details {
    display: flex;
    flex-direction: column;
}

.exp-num {
    font-size: 0.98rem;
    font-weight: 900;
    color: #0F172A;
    line-height: 1.1;
}

.exp-txt {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748B;
}

.about-star-supplier-float-badge {
    position: absolute;
    bottom: 20px;
    right: -15px;
    background: #FFFFFF;
    border: 1px solid rgba(255, 184, 0, 0.4);
    border-radius: 14px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    z-index: 3;
    animation: floatAnim 4s ease-in-out infinite alternate-reverse;
}

.star-badge-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #FFB800 0%, #E69500 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(255, 184, 0, 0.35);
}

.star-badge-details {
    display: flex;
    flex-direction: column;
}

.star-num {
    font-size: 0.98rem;
    font-weight: 900;
    color: #0F172A;
    line-height: 1.1;
}

.star-txt {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748B;
}

@keyframes floatAnim {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-8px); }
}

@media (max-width: 991px) {
    .about-experience-float-badge {
        left: 10px;
    }
    .about-star-supplier-float-badge {
        right: 10px;
    }
}

/* Checklist Items */
.about-checklist {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
}

.check-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    color: #1E293B;
}

.check-icon {
    font-size: 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.check-icon.orange,
.check-icon.red {
    color: #E52E2E;
}

.check-icon.blue {
    color: #0284C7;
}

.check-text strong {
    color: #0F172A;
}

/* Red Quote CTA Button matching reference */
.btn-about-quote {
    background: linear-gradient(135deg, #E52E2E 0%, #FF333B 100%);
    color: #FFFFFF !important;
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 800;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 25px rgba(229, 46, 46, 0.35);
    transition: all 0.3s ease;
    text-decoration: none;
    white-space: nowrap;
}

.btn-about-quote:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 32px rgba(229, 46, 46, 0.55);
}

.about-cta-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
    align-items: center;
}

.btn-about-contact {
    background: linear-gradient(135deg, #00C6FF 0%, #0072FF 100%);
    color: #FFFFFF !important;
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 800;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 25px rgba(0, 198, 255, 0.35);
    transition: all 0.3s ease;
    text-decoration: none;
    white-space: nowrap;
}

.btn-about-contact:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 32px rgba(0, 198, 255, 0.55);
}

/* Scroll Reveal Entrance Animations for About Section & Others */
.reveal-left {
    opacity: 0;
    transform: translateX(-120px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-right {
    opacity: 0;
    transform: translateX(120px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-left.active,
.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

/* Right Showcase Wrapper with Relative Positioning */
.about-right-showcase {
    position: relative;
    max-width: 580px;
    margin: 0 auto;
    width: 100%;
}

/* 2 Animated Rotating Square Outline Frames in Circle Motion (360 Degree Spin) */
.about-rotating-square {
    position: absolute;
    top: -12px;
    left: -12px;
    right: -12px;
    bottom: -12px;
    border-radius: 22px;
    border: 2.5px solid transparent;
    background: linear-gradient(135deg, #00C6FF 0%, #2563EB 50%, #7C3AED 100%) border-box;
    z-index: 1;
    pointer-events: none;
    animation: rotateSquareClockwise 12s linear infinite;
    transform-origin: center center;
}

.about-rotating-square.frame-2 {
    top: -18px;
    left: -18px;
    right: -18px;
    bottom: -18px;
    border-radius: 26px;
    border: 2.5px solid transparent;
    background: linear-gradient(135deg, #E52E2E 0%, #FF333B 50%, #B91C1C 100%) border-box;
    z-index: 0;
    pointer-events: none;
    animation: rotateSquareCounterClockwise 16s linear infinite;
    transform-origin: center center;
    opacity: 0.85;
}

@keyframes rotateSquareClockwise {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotateSquareCounterClockwise {
    0% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* Dual Showcase Card Wrapper */
.about-showcase-cards-wrapper {
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: relative;
    z-index: 5;
}

/* 2. Main White Showcase Card with Thin RED Border (Rectangular Proportions) */
.about-single-showcase-card {
    background: #FFFFFF;
    border-radius: 18px;
    /* Crisp Rectangular shape */
    border: 2px solid #E52E2E;
    /* Thin RED border line */
    padding: 16px 16px 36px 16px;
    position: relative;
    z-index: 5;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
    transition: transform 0.4s ease;
}

.about-single-showcase-card.card-secondary {
    padding: 16px 16px 32px 16px;
}

.about-single-showcase-card:hover {
    transform: translateY(-6px);
}

.single-photo-box {
    width: 100%;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: #FFFFFF;
    border-radius: 20px;
    overflow: hidden;
}

.single-about-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.08));
}

.about-single-showcase-card:hover .single-about-img {
    transform: scale(1.04);
}

/* Photo Collage Grid Box (Exact 6-Tile Layout Matching Reference Image) */
.photo-grid-box {
    width: 100%;
    height: 380px;
    /* Taller Rectangle Ratio */
    display: grid;
    grid-template-columns: 1.1fr 1.1fr 0.8fr;
    grid-template-rows: 1.3fr 0.9fr 0.9fr;
    gap: 8px;
    border-radius: 14px;
    overflow: hidden;
    background: #F8FAFC;
    padding: 6px;
}

.grid-item-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 10px;
}

.grid-about-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.grid-item-wrap:hover .grid-about-img {
    transform: scale(1.08);
}

/* Precise Placement Matching Reference Image Collage Layout */
.photo-grid-box .grid-img-1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.photo-grid-box .grid-img-2 {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
}

.photo-grid-box .grid-img-3 {
    grid-column: 1 / 2;
    grid-row: 2 / 4;
}

.photo-grid-box .grid-img-4 {
    grid-column: 2 / 3;
    grid-row: 2 / 4;
}

.photo-grid-box .grid-img-5 {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}

.photo-grid-box .grid-img-6 {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
}

/* 3. Bottom Floating Pill Badge with RED Border (Centered at Bottom Edge) */
.about-showcase-badge {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: #FFFFFF;
    border: 2px solid #E52E2E;
    /* Thin RED border line */
    border-radius: 40px;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 25px rgba(229, 46, 46, 0.25);
    white-space: nowrap;
    width: max-content;
}

.badge-star-icon {
    width: 32px;
    height: 32px;
    background: #E52E2E;
    /* Red solid circle */
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.badge-text-group {
    display: flex;
    flex-direction: column;
}

.badge-tag {
    font-size: 10px;
    font-weight: 800;
    color: #E52E2E;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ==========================================================================
   PRODUCTS GRID LAYOUT (8 UNIQUE SINGLE CARDS)
   ========================================================================== */
.products-bottom-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 30px auto 0 auto;
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 5;
}

.prod-nav-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid #0B192C;
    background: #FFFFFF;
    color: #0B192C;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.prod-nav-arrow:hover {
    background: #E52E2E;
    color: #FFFFFF;
    border-color: #E52E2E;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(229, 46, 46, 0.3);
}

.prod-nav-arrow:active {
    transform: translateY(0) scale(0.95);
}

.services-marquee-wrapper {
    width: 100%;
    overflow: hidden;
    margin-top: 35px;
    position: relative;
    padding: 15px 0;
}

.services-marquee-wrapper::-webkit-scrollbar {
    display: none;
}

/* Flex track for DOM re-ordering circular infinite slider */
.services-marquee-track {
    display: flex;
    gap: 25px;
    width: max-content;
    will-change: transform;
}

.product-card {
    background: #FFFFFF;
    border-radius: 20px;
    border: 1.5px solid #E2E8F0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    position: relative;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    width: 310px;
    flex-shrink: 0;
    height: 380px;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(229, 46, 46, 0.15);
    border-color: rgba(229, 46, 46, 0.4);
}

.card-front {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px;
    position: relative;
    z-index: 1;
}

.card-num-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #0B192C;
    color: #FFFFFF;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 4px 10px;
    border-radius: 8px;
    z-index: 3;
}

.card-arrow-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    background: #E52E2E;
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(229, 46, 46, 0.3);
    transition: transform 0.3s ease;
}

.product-card:hover .card-arrow-badge {
    transform: scale(1.1) rotate(45deg);
}

.card-img-box {
    width: 100%;
    height: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    background: #F8FAFC;
    border-radius: 14px;
    margin-top: 25px;
    overflow: hidden;
}

.product-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.product-card:hover .product-img {
    transform: scale(1.06);
}

.card-footer-title {
    background: #07192B !important;
    border-radius: 0 !important;
    padding: 12px 10px !important;
    margin-top: 14px !important;
    text-align: center !important;
    width: 100% !important;
    box-shadow: 0 4px 12px rgba(7, 25, 43, 0.15);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
}

.card-footer-title h3 {
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
}

/* Card Hover Overlay */
.card-hover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #07192B 0%, #0B192C 100%);
    padding: 30px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 5;
    border-radius: 20px;
}

.product-card:hover .card-hover-overlay {
    opacity: 1;
    visibility: visible;
}

.card-hover-badge {
    background: rgba(229, 46, 46, 0.15);
    color: #FF5252;
    border: 1px solid rgba(229, 46, 46, 0.4);
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.card-hover-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 10px;
}

.card-hover-desc {
    font-size: 0.88rem;
    color: #94A3B8;
    line-height: 1.5;
    margin-bottom: 20px;
}

.btn-learn-more {
    background: linear-gradient(135deg, #E52E2E 0%, #FF5252 100%);
    color: #FFFFFF !important;
    padding: 10px 22px;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 6px 16px rgba(229, 46, 46, 0.35);
    transition: all 0.3s ease;
}

.btn-learn-more:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(229, 46, 46, 0.5);
}

@media (max-width: 1100px) {
    .services-marquee-track {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 640px) {
    .services-marquee-track {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   UNIQUE MODERN DARK TECH STATS COUNTER STRIP
   ========================================================================== */
.stats-strip.dark-tech-strip {
    position: relative;
    background: linear-gradient(135deg, #07192B 0%, #0B192C 50%, #030C16 100%);
    padding: 36px 0;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.stats-glow-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    height: 100px;
    background: radial-gradient(ellipse at center, rgba(0, 198, 255, 0.14) 0%, rgba(229, 46, 46, 0.12) 50%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    position: relative;
    z-index: 5;
}

/* Glassmorphism Stat Cards with Red + Navy Blue Gradient */
.stat-card {
    background: linear-gradient(135deg, rgba(229, 46, 46, 0.22) 0%, rgba(11, 25, 44, 0.92) 50%, rgba(7, 25, 43, 0.98) 100%);
    border: 1.5px solid rgba(229, 46, 46, 0.35);
    border-radius: 16px;
    padding: 18px 14px;
    text-align: center;
    backdrop-filter: blur(14px);
    opacity: 0;
    transform: translateY(45px) scale(0.92);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(11, 25, 44, 0.5), inset 0 0 20px rgba(229, 46, 46, 0.1);
}

.stats-strip.in-view .stat-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.stats-strip.in-view .stats-grid .stat-card:nth-child(1) {
    transition-delay: 0.1s;
}

.stats-strip.in-view .stats-grid .stat-card:nth-child(2) {
    transition-delay: 0.3s;
}

.stats-strip.in-view .stats-grid .stat-card:nth-child(3) {
    transition-delay: 0.5s;
}

.stats-strip.in-view .stats-grid .stat-card:nth-child(4) {
    transition-delay: 0.7s;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3.5px;
    background: linear-gradient(90deg, #E52E2E 0%, #0052CC 50%, #0B192C 100%);
    transition: background 0.4s ease;
}

.stat-card-red::before,
.stat-card-blue::before,
.stat-card-gold::before,
.stat-card-green::before {
    background: linear-gradient(90deg, #E52E2E 0%, #0052CC 50%, #0B192C 100%);
}

.stat-card:hover {
    transform: translateY(-5px) scale(1.015) !important;
    border-color: rgba(229, 46, 46, 0.65);
    background: linear-gradient(135deg, rgba(229, 46, 46, 0.35) 0%, rgba(11, 25, 44, 0.95) 50%, rgba(7, 25, 43, 1) 100%);
    box-shadow: 0 15px 35px rgba(229, 46, 46, 0.3), 0 0 25px rgba(11, 25, 44, 0.8);
}

/* Floating Icon Wrapper with Pulse Glow */
.stat-icon-wrapper {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.red-glow {
    background: rgba(229, 46, 46, 0.15);
    color: #FF5252;
    border: 1px solid rgba(229, 46, 46, 0.3);
    box-shadow: 0 0 14px rgba(229, 46, 46, 0.25);
}

.blue-glow {
    background: rgba(0, 123, 255, 0.15);
    color: #40A9FF;
    border: 1px solid rgba(0, 123, 255, 0.3);
    box-shadow: 0 0 14px rgba(0, 123, 255, 0.25);
}

.gold-glow {
    background: rgba(255, 179, 0, 0.15);
    color: #FFC107;
    border: 1px solid rgba(255, 179, 0, 0.3);
    box-shadow: 0 0 14px rgba(255, 179, 0, 0.25);
}

.green-glow {
    background: rgba(40, 167, 69, 0.15);
    color: #30D158;
    border: 1px solid rgba(40, 167, 69, 0.3);
    box-shadow: 0 0 14px rgba(40, 167, 69, 0.25);
}

.stat-card:hover .stat-icon-wrapper {
    transform: scale(1.1) rotate(6deg);
}

/* Number & Unit Typography */
.stat-number-wrapper {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
    margin-bottom: 4px;
}

.stat-number-wrapper h3.counter {
    font-size: 2.1rem;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1;
    letter-spacing: -0.5px;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.stat-unit {
    font-size: 1.15rem;
    font-weight: 800;
    color: #E52E2E;
}

.stat-card-blue .stat-unit {
    color: #00C6FF;
}

.stat-card-gold .stat-unit {
    color: #FFB300;
}

.stat-card-green .stat-unit {
    color: #30D158;
}

.stat-label {
    font-size: 0.78rem;
    font-weight: 800;
    color: #FFFFFF !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    opacity: 1;
}

/* ==========================================================================
   COMPREHENSIVE RESPONSIVE MEDIA QUERIES FOR ALL SECTIONS
   ========================================================================== */

@media (max-width: 991px) {
    .hero-mockup-grid {
        grid-template-columns: 1fr !important;
        gap: 35px !important;
    }

    .hero-purple-polygon-bg {
        width: 100% !important;
        height: 50% !important;
        top: auto !important;
        bottom: -30px !important;
        right: 0 !important;
        clip-path: polygon(0% 20%, 100% 0%, 100% 100%, 0% 100%) !important;
    }

    .hero-diagonal-divider {
        display: none !important;
    }

    .hero-mockup-left {
        text-align: center !important;
    }

    .circle-supporting {
        margin: 0 auto 24px auto !important;
    }

    .hero-bottom-info {
        justify-content: center !important;
    }

    .about-redesign-grid {
        grid-template-columns: 1fr !important;
        gap: 35px !important;
    }

    .about-card-container {
        padding: 32px 20px !important;
        border-radius: 24px !important;
    }

    .about-main-headline {
        font-size: 1.95rem !important;
    }

    .services-header-wrapper {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px !important;
    }

    .why-us-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 35px !important;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 576px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    .section-padding {
        padding: 50px 0 !important;
    }

    .about-cards-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    .circle-headline {
        font-size: 2.2rem !important;
        line-height: 1.25 !important;
    }

    .mockup-hex-outer {
        max-width: 380px !important;
        margin: 0 auto !important;
    }

    .hero-float-badge {
        transform: scale(0.8);
    }

    .float-top-left {
        top: -25px;
        left: -10px;
    }

    .float-bottom-left {
        bottom: -25px;
        left: -10px;
    }

    .float-top-right {
        display: none;
    }

    .hero-cta-group {
        justify-content: center !important;
        margin-top: 20px !important;
    }

    .hero-trust-highlights {
        justify-content: center !important;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .cta-strip-inner {
        flex-direction: column !important;
        text-align: center !important;
        gap: 24px !important;
    }

    .cta-buttons {
        justify-content: center !important;
        width: 100% !important;
    }
}

@media (max-width: 576px) {
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .about-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .circle-headline {
        font-size: 1.75rem !important;
    }

    .mockup-hex-outer {
        max-width: 290px !important;
    }

    .hero-float-badge {
        display: none;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
    }

    .stat-box {
        padding: 15px 10px !important;
    }
}

/* ==========================================================================
   ADVANCED RESPONSIVE ENHANCEMENTS FOR ALL SECTIONS (TABLET & MOBILE)
   ========================================================================== */

/* 1. SECTION 7.5: WHY CHOOSE US INFOGRAPHIC RESPONSIVENESS */
@media (max-width: 991px) {
    .why-us-circle-container {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .why-us-circle-graphics {
        max-width: 380px !important;
        height: 380px !important;
        margin: 0 auto !important;
    }

    .why-center-large-circle {
        width: 240px !important;
        height: 240px !important;
        padding: 20px !important;
    }

    .why-center-large-circle p {
        font-size: 0.8rem !important;
    }
}

@media (max-width: 576px) {
    .why-us-circle-graphics {
        max-width: 300px !important;
        height: 300px !important;
    }

    .why-center-large-circle {
        width: 190px !important;
        height: 190px !important;
        padding: 12px !important;
    }

    .why-center-large-circle p {
        display: none !important;
        /* Hide long paragraph inside small mobile circle for clean visual */
    }

    .why-left-title-circle {
        width: 70px !important;
        height: 70px !important;
        top: -15px !important;
        left: -15px !important;
    }

    .circle-main-logo {
        max-width: 50px !important;
    }

    .why-badge-node {
        width: 38px !important;
        height: 38px !important;
        font-size: 14px !important;
    }
}

/* Hero Section Hexagon Showcase Box Mobile Downward Shift & Responsive Spacing */
@media (max-width: 991px) {
    .hero-mockup-grid {
        grid-template-columns: 1fr !important;
        gap: 45px !important;
    }

    .hero-mockup-right {
        margin-top: 40px !important;
        padding-top: 20px !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    .mockup-hex-wrapper {
        margin: 30px auto 0 auto !important;
    }
}

@media (max-width: 576px) {
    .hero-mockup-right {
        margin-top: 55px !important;
        padding-top: 30px !important;
    }

    .mockup-hex-wrapper {
        margin: 40px auto 15px auto !important;
        width: 300px !important;
        height: 260px !important;
    }

    .mockup-hex-outer {
        width: 290px !important;
        height: 240px !important;
    }
}

/* 2. SECTION 8: TESTIMONIALS SLIDER RESPONSIVENESS */
@media (max-width: 768px) {
    .testimonial-slide-item {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .review-card {
        padding: 18px !important;
    }

    .why-us-title {
        font-size: 1.8rem !important;
    }
}

/* 3. SECTION 12: FOOTER & MAP RESPONSIVENESS */
@media (max-width: 991px) {
    .footer-top-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px !important;
    }
}

@media (max-width: 576px) {
    .footer-top-grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

    .contact-col {
        text-align: center !important;
    }

    .footer-contact-list li {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 10px !important;
    }

    .contact-icon-box {
        margin: 0 auto !important;
        border-radius: 50% !important;
    }

    .map-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }

    .map-header-right {
        width: 100% !important;
    }

    .btn-google-review {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* 4. UTILITY & NAVIGATION MOBILE OPTIMIZATIONS (SINGLE-LINE INFINITE MARQUEE LOOP) */
@media (max-width: 768px) {
    .top-bar {
        padding: 8px 0 !important;
        overflow: hidden !important;
        width: 100% !important;
    }

    .top-bar-marquee {
        display: flex !important;
        flex-direction: row !important;
        width: max-content !important;
        animation: topBarInfiniteMarquee 18s linear infinite !important;
        will-change: transform !important;
        white-space: nowrap !important;
    }

    .top-bar-marquee:hover {
        animation-play-state: paused !important;
    }

    .top-bar-duplicate {
        display: flex !important;
    }

    .top-bar-inner {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 30px !important;
        padding: 0 30px 0 0 !important;
        white-space: nowrap !important;
        width: auto !important;
    }

    .top-info-left,
    .top-info-right {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 14px !important;
        white-space: nowrap !important;
    }

    .top-info-left span,
    .top-info-left a,
    .top-info-right a,
    .follow-lbl {
        white-space: nowrap !important;
        font-size: 0.82rem !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .top-divider {
        display: inline-block !important;
        margin: 0 4px !important;
        opacity: 0.4 !important;
    }

    .floating-actions {
        bottom: 20px !important;
        right: 15px !important;
        gap: 10px !important;
    }

    .float-btn {
        width: 44px !important;
        height: 44px !important;
        font-size: 18px !important;
    }

    .wa-popup {
        width: calc(100vw - 32px) !important;
        right: 16px !important;
        bottom: 80px !important;
    }
}

@keyframes topBarInfiniteMarquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}


/* ==========================================================================
   WHITE + BLUE TESTIMONIALS SECTION LIGHT THEME OVERRIDES
   ========================================================================== */
.reviews-section.light-blue-theme {
    background: linear-gradient(135deg, #F0F6FF 0%, #FFFFFF 50%, #E6F0FA 100%) !important;
    color: #07192B !important;
    padding: 75px 0 !important;
    border-top: 1px solid rgba(0, 123, 255, 0.12) !important;
    border-bottom: 1px solid rgba(0, 123, 255, 0.12) !important;
}

.reviews-section.light-blue-theme .why-us-tag {
    background: rgba(0, 123, 255, 0.1) !important;
    color: #0066CC !important;
    border: 1.5px solid rgba(0, 123, 255, 0.3) !important;
    border-radius: 30px !important;
    padding: 6px 18px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.reviews-section.light-blue-theme .why-us-title {
    font-size: 2.4rem !important;
    font-weight: 800 !important;
    color: #07192B !important;
    margin-top: 12px !important;
    margin-bottom: 10px !important;
}

.reviews-section.light-blue-theme .why-us-title .text-red {
    color: #E52E2E !important;
}

.reviews-section.light-blue-theme .section-desc {
    color: #475569 !important;
    font-size: 1.05rem !important;
}

.reviews-section.light-blue-theme .review-card {
    background: #0B192C !important;
    border: 1.5px solid rgba(0, 198, 255, 0.35) !important;
    border-radius: 20px !important;
    padding: 24px !important;
    box-shadow: 0 14px 35px rgba(11, 25, 44, 0.25) !important;
    transition: all 0.3s ease !important;
}

.reviews-section.light-blue-theme .review-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 20px 45px rgba(11, 25, 44, 0.38) !important;
    border-color: #00C6FF !important;
}

.reviews-section.light-blue-theme .review-card,
.reviews-section.light-blue-theme .review-card h4,
.reviews-section.light-blue-theme .review-card div,
.reviews-section.light-blue-theme .review-card span {
    color: #FFFFFF !important;
}

.reviews-section.light-blue-theme .review-card h4 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
}

.reviews-section.light-blue-theme .review-card span[style*="font-size: 12px"] {
    color: #94A3B8 !important;
}

.reviews-section.light-blue-theme .review-card span[style*="background: rgba(255,255,255"] {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #E2E8F0 !important;
}

.reviews-section.light-blue-theme .review-card div[style*="background: rgba(0,0,0,0.25)"],
.reviews-section.light-blue-theme .review-card div[style*="background: #E2E8F0"] {
    background: #10243E !important;
    border-radius: 12px !important;
    border-left: 3.5px solid #00C6FF !important;
}

.reviews-section.light-blue-theme .review-card div[style*="color: #E67E22"],
.reviews-section.light-blue-theme .review-card div[style*="color: #E52E2E"],
.reviews-section.light-blue-theme .review-card div[style*="color: #007BFF"],
.reviews-section.light-blue-theme .review-card div[style*="color: #9B59B6"],
.reviews-section.light-blue-theme .review-card div[style*="color: #1ABC9C"] {
    color: #00C6FF !important;
    font-weight: 700 !important;
}

.reviews-section.light-blue-theme .testimonial-dot {
    background: #CBD5E1 !important;
}

.reviews-section.light-blue-theme .testimonial-dot.active {
    background: linear-gradient(90deg, #E52E2E, #007BFF) !important;
}

/* ==========================================================================
   CENTERED TESTIMONIAL NAVIGATION FOOTER & DASH INDICATORS
   ========================================================================== */
.testimonial-nav-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    margin-top: 35px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(0, 123, 255, 0.15) !important;
    width: 100% !important;
    text-align: center !important;
}

.testimonial-pagination {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
}

.page-num-indicator {
    color: #475569 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
}

.pagination-bar-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
}

.p-dot {
    width: 28px !important;
    height: 7px !important;
    border-radius: 6px !important;
    background: #CBD5E1 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.p-dot.active {
    width: 48px !important;
    background: linear-gradient(90deg, #E52E2E 0%, #007BFF 100%) !important;
    box-shadow: 0 4px 12px rgba(229, 46, 46, 0.35) !important;
}

.testimonial-arrows {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
}

.t-nav-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    border: 1.5px solid rgba(0, 123, 255, 0.25) !important;
    color: #07192B !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(0, 51, 102, 0.08) !important;
    transition: all 0.3s ease !important;
}

.t-nav-btn:hover {
    background: #007BFF !important;
    color: #FFFFFF !important;
    border-color: #007BFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3) !important;
}

/* ==========================================================================
   STANDALONE ABOUT US PAGE SPECIFIC STYLES
   ========================================================================== */
/* ==========================================================================
   GLOBE EXPRESS-STYLE INTERACTIVE ZOOMING HERO SLIDER (ABOUT US)
   ========================================================================== */
.globe-hero-section {
    position: relative;
    width: 100%;
    min-height: 360px;
    padding: 95px 0 20px 0;
    overflow: hidden;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    border-bottom: 3px solid rgba(237, 28, 36, 0.4);
    background: #07121F;
}

.globe-bg-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.globe-bg-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.3);
    transition: opacity 1s ease-in-out;
}

.globe-bg-slide.active {
    opacity: 1;
    animation: kenBurnsZoomInOut 6.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes kenBurnsZoomInOut {
    0% {
        transform: scale(1.35);
        opacity: 0.3;
        filter: brightness(1.2);
    }

    18% {
        opacity: 1;
        filter: brightness(1.0);
    }

    100% {
        transform: scale(1.0);
        opacity: 1;
        filter: brightness(1.0);
    }
}

.globe-dark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(90deg, rgba(7, 18, 31, 0.82) 0%, rgba(7, 18, 31, 0.40) 45%, rgba(7, 18, 31, 0.08) 100%);
}

.globe-hero-container {
    position: relative;
    z-index: 5;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

.globe-hero-layout {
    display: block;
    max-width: 850px;
    margin: 10px auto 25px;
    text-align: center;
}

.globe-hero-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.globe-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 30px;
    border: 1px solid rgba(0, 198, 255, 0.5);
    background: rgba(0, 198, 255, 0.1);
    color: #00C6FF;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 18px;
}

.globe-hero-title {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: 900;
    line-height: 1.18;
    color: #FFFFFF;
    margin-bottom: 18px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
    transition: opacity 0.3s ease;
    text-align: center;
}

.globe-hero-desc {
    font-size: 1.02rem;
    line-height: 1.7;
    color: #E2E8F0;
    margin-bottom: 28px;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    transition: opacity 0.3s ease;
}

.globe-cta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-globe-action {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 35px;
    padding: 6px 24px 6px 8px;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.8px;
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.globe-icon-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ED1C24;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    box-shadow: 0 0 12px rgba(237, 28, 36, 0.6);
    transition: transform 0.3s ease;
}

.btn-globe-action:hover {
    background: rgba(237, 28, 36, 0.9);
    border-color: #ED1C24;
    color: #FFFFFF;
    box-shadow: 0 8px 25px rgba(237, 28, 36, 0.5);
}

.btn-globe-action:hover .globe-icon-circle {
    transform: translateX(4px);
    background: #FFFFFF;
    color: #ED1C24;
}

/* Right Interactive Cards Track - Shifted Lower Down */
.globe-cards-column {
    overflow: hidden;
    padding: 5px 0;
    margin-top: 130px;
    align-self: flex-end;
}

.globe-cards-track {
    display: flex;
    gap: 16px;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.globe-card-item {
    position: relative;
    flex: 0 0 165px;
    height: 210px;
    border-radius: 18px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.globe-card-item:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: #00C6FF;
    box-shadow: 0 20px 40px rgba(0, 198, 255, 0.35);
}

.globe-card-item.active {
    border-color: #ED1C24;
    box-shadow: 0 20px 45px rgba(237, 28, 36, 0.45);
}

.globe-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.88) 100%);
    transition: opacity 0.3s ease;
}

.globe-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 16px;
    width: 100%;
    z-index: 3;
}

.globe-card-tag {
    font-size: 0.7rem;
    font-weight: 800;
    color: #00C6FF;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 4px;
}

.globe-card-title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.25;
    margin-bottom: 0;
    text-transform: uppercase;
}

/* Bottom Controls */
.globe-nav-controls {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 15px;
    padding-top: 5px;
}

.globe-arrow-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
}

.globe-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    backdrop-filter: blur(6px);
    transition: all 0.3s ease;
}

.globe-nav-btn:hover {
    background: #00C6FF;
    border-color: #00C6FF;
    color: #07121F;
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(0, 198, 255, 0.6);
}

.globe-progress-bar-wrapper {
    flex: 1;
    max-width: 320px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.globe-progress-fill {
    height: 100%;
    width: 25%;
    background: linear-gradient(90deg, #00C6FF, #ED1C24);
    border-radius: 2px;
    transition: width 0.5s ease;
}

.globe-counter-display {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 800;
}

.globe-counter-display .current-num {
    color: #ED1C24;
    font-size: 1.5rem;
}

.globe-counter-display .total-num {
    color: #94A3B8;
    font-size: 1rem;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .globe-hero-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .globe-hero-title {
        font-size: 2.2rem;
    }

    .globe-card-item {
        flex: 0 0 170px;
        height: 240px;
    }
}

.hero-tech-ambient-glow {
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(90px);
    opacity: 0.18;
}

.hero-tech-ambient-glow.glow-blue {
    top: 5%;
    left: 2%;
    background: #00C6FF;
}

.hero-tech-ambient-glow.glow-red {
    bottom: 5%;
    right: 2%;
    background: #ED1C24;
}

.hero-chetana-container {
    position: relative;
    z-index: 5;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Breadcrumb Pill */
.chetana-breadcrumb-wrapper {
    margin-top: 15px;
    margin-bottom: 24px;
}

.chetana-breadcrumb-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 18px;
    border-radius: 30px;
    border: 1px solid rgba(237, 28, 36, 0.35);
    background: rgba(7, 25, 43, 0.6);
    backdrop-filter: blur(6px);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.crumb-link {
    color: #CBD5E1;
    text-decoration: none;
    transition: color 0.2s ease;
}

.crumb-link:hover {
    color: #FFFFFF;
}

.crumb-slash {
    color: #ED1C24;
}

.crumb-active {
    color: #ED1C24;
}

/* Grid Layout */
.chetana-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 50px;
    align-items: center;
}

/* Badges Row */
.chetana-badges-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.chetana-badge-blue {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 30px;
    border: 1px solid rgba(0, 198, 255, 0.6);
    background: rgba(0, 198, 255, 0.08);
    color: #00C6FF;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.glowing-dot-blue {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #00C6FF;
    box-shadow: 0 0 10px #00C6FF;
    animation: pulseDotBlue 2s infinite;
}

@keyframes pulseDotBlue {

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

    50% {
        opacity: 0.4;
        transform: scale(0.8);
    }
}

.chetana-badge-red {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 30px;
    border: 1px solid rgba(237, 28, 36, 0.5);
    background: rgba(237, 28, 36, 0.08);
    color: #ED1C24;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Main Headline */
.chetana-hero-title {
    font-family: var(--font-heading);
    font-size: 2.3rem;
    font-weight: 900;
    color: #FFFFFF;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
    line-height: 1.25;
}

.text-brand-blue {
    color: #00C6FF !important;
}

.text-brand-red {
    color: #ED1C24 !important;
}

/* Description */
.chetana-hero-desc {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #E2E8F0;
    margin-bottom: 28px;
    max-width: 580px;
}

.chetana-hero-desc strong {
    color: #FFFFFF;
}

/* CTA Buttons */
.chetana-btn-group {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.btn-chetana-red {
    background: linear-gradient(135deg, #ED1C24 0%, #C81E24 100%);
    color: #FFFFFF;
    font-weight: 800;
    padding: 13px 28px;
    border-radius: 30px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    box-shadow: 0 6px 20px rgba(237, 28, 36, 0.4);
    transition: all 0.3s ease;
}

.btn-chetana-red:hover {
    background: linear-gradient(135deg, #FF2E36 0%, #ED1C24 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(237, 28, 36, 0.6);
    color: #FFFFFF;
}

.btn-chetana-blue-outline {
    background: rgba(0, 198, 255, 0.06);
    color: #FFFFFF;
    font-weight: 700;
    padding: 13px 28px;
    border-radius: 30px;
    border: 1px solid rgba(0, 198, 255, 0.5);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.btn-chetana-blue-outline:hover {
    background: rgba(0, 198, 255, 0.18);
    border-color: #00C6FF;
    color: #FFFFFF;
}

/* Micro Feature Tags */
.chetana-feature-row {
    display: flex;
    align-items: center;
    gap: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
    color: #CBD5E1;
    font-weight: 600;
}

.chetana-feat-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Right 2x2 Cards Grid */
.chetana-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.chetana-stat-card {
    background: rgba(11, 25, 44, 0.85);
    border-radius: 18px;
    padding: 24px 20px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.chetana-stat-card.card-theme-red {
    border: 1px solid rgba(237, 28, 36, 0.35);
}

.chetana-stat-card.card-theme-blue {
    border: 1px solid rgba(0, 198, 255, 0.35);
}

.chetana-stat-card.card-theme-red:hover {
    transform: translateY(-4px);
    border-color: #ED1C24;
    box-shadow: 0 15px 35px rgba(237, 28, 36, 0.3);
}

.chetana-stat-card.card-theme-blue:hover {
    transform: translateY(-4px);
    border-color: #00C6FF;
    box-shadow: 0 15px 35px rgba(0, 198, 255, 0.3);
}

.chetana-card-icon.icon-red {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(237, 28, 36, 0.12);
    border: 1px solid rgba(237, 28, 36, 0.4);
    color: #ED1C24;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 16px;
}

.chetana-card-icon.icon-blue {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(0, 198, 255, 0.12);
    border: 1px solid rgba(0, 198, 255, 0.4);
    color: #00C6FF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 16px;
}

.chetana-card-num {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1;
    margin-bottom: 6px;
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.label-red {
    font-size: 0.8rem;
    font-weight: 800;
    color: #ED1C24;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.label-blue {
    font-size: 0.8rem;
    font-weight: 800;
    color: #00C6FF;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.chetana-card-sublabel {
    font-size: 0.78rem;
    color: #94A3B8;
}

/* Scroll Indicator */
.chetana-scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 35px;
}

.scroll-lbl {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: #64748B;
}

.scroll-mouse-icon {
    width: 20px;
    height: 32px;
    border: 2px solid rgba(0, 198, 255, 0.5);
    border-radius: 12px;
    position: relative;
    display: flex;
    justify-content: center;
}

.scroll-wheel {
    width: 3px;
    height: 6px;
    background: #00C6FF;
    border-radius: 2px;
    position: absolute;
    top: 5px;
    animation: scrollWheel 1.8s infinite;
}

@keyframes scrollWheel {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(12px);
    }
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .chetana-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .chetana-hero-title {
        font-size: 1.9rem;
    }
}

@media (max-width: 576px) {
    .chetana-cards-grid {
        grid-template-columns: 1fr;
    }

    .chetana-feature-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

.inner-page-subtitle {
    font-size: 1.1rem;
    color: #94A3B8;
    max-width: 680px;
    margin: 0 auto;
}

/* Vision, Mission & Quality Cards */
.vm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 45px;
}

.vm-card {
    background: #FFFFFF;
    border-radius: 22px;
    padding: 35px 28px;
    border: 1.5px solid #E2E8F0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.vm-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(237, 28, 36, 0.15);
    border-color: rgba(237, 28, 36, 0.3);
}

.vm-icon-box {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 22px;
}

.vm-icon-box.red-glow {
    background: rgba(237, 28, 36, 0.1);
    color: #ED1C24;
    border: 1.5px solid rgba(237, 28, 36, 0.3);
}

.vm-icon-box.blue-glow {
    background: rgba(0, 174, 239, 0.1);
    color: #00AEEF;
    border: 1.5px solid rgba(0, 174, 239, 0.3);
}

.vm-icon-box.gold-glow {
    background: rgba(255, 184, 0, 0.1);
    color: #FFB800;
    border: 1.5px solid rgba(255, 184, 0, 0.3);
}

.vm-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #07192B;
    margin-bottom: 12px;
}

.vm-desc {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.65;
}

/* About CTA Banner */
.about-cta-banner {
    background: linear-gradient(135deg, #07192B 0%, #0D2438 50%, #07192B 100%);
    padding: 70px 0;
    color: #FFFFFF;
    position: relative;
    border-top: 4px solid var(--primary-red);
}

.cta-banner-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 14px;
}

.cta-banner-desc {
    font-size: 1.05rem;
    color: #CBD5E1;
    max-width: 720px;
    margin: 0 auto 30px auto;
    line-height: 1.6;
}

.cta-btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

@media (max-width: 991px) {
    .vm-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .inner-page-title {
        font-size: 2.1rem;
    }

    .vm-grid {
        grid-template-columns: 1fr;
    }

    .cta-banner-title {
        font-size: 1.7rem;
    }
}

/* ==========================================================================
   ULTRA-PREMIUM REDESIGNED FOOTER STYLES
   ========================================================================== */
.footer-section {
    position: relative;
    background: linear-gradient(180deg, #07192B 0%, #040D17 100%);
    padding: 70px 0 25px 0;
    overflow: hidden;
    color: #94A3B8;
    font-family: var(--font-body);
    border-top: 4px solid #ED1C24;
}

.footer-top-accent-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ED1C24 0%, #00C6FF 50%, #ED1C24 100%);
    box-shadow: 0 0 25px rgba(237, 28, 36, 0.6);
}

.footer-ambient-glow {
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.18;
    pointer-events: none;
}

.footer-ambient-glow.glow-red {
    top: -60px;
    left: -60px;
    background: #ED1C24;
}

.footer-ambient-glow.glow-blue {
    bottom: -60px;
    right: -60px;
    background: #00C6FF;
}

.footer-top-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1.15fr 1.3fr;
    gap: 40px;
    margin-bottom: 18px;
    position: relative;
    z-index: 5;
}

/* Col 1: Brand */
.footer-brand-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 auto 18px auto;
    width: 100%;
    text-decoration: none;
}

.footer-logo-icon-box {
    background: #FFFFFF;
    padding: 12px 24px;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.footer-logo-icon-box img {
    height: 75px;
    width: auto;
    object-fit: contain;
}

.footer-about-text {
    font-size: 0.92rem;
    color: #94A3B8;
    line-height: 1.65;
    margin-bottom: 18px;
    text-align: center;
}

.gst-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 198, 255, 0.08);
    border: 1px solid rgba(0, 198, 255, 0.3);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #00C6FF;
    margin: 0 auto 20px auto;
}

.footer-connect {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.connect-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #E2E8F0;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-align: center;
}

.footer-socials {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.footer-socials a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-socials a:hover {
    background: linear-gradient(135deg, #ED1C24 0%, #00C6FF 100%);
    border-color: transparent;
    color: #FFFFFF;
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 8px 20px rgba(237, 28, 36, 0.4);
}

/* Col 2 & 3: Headings & Links */
.footer-heading {
    font-size: 1.15rem;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 22px;
    position: relative;
    padding-bottom: 10px;
    text-align: left;
}

.footer-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 42px;
    height: 3px;
    background: linear-gradient(90deg, #ED1C24 0%, #00C6FF 100%);
    border-radius: 2px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #CBD5E1;
    font-size: 0.92rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-links a i {
    font-size: 0.72rem;
    color: #ED1C24;
    transition: transform 0.3s ease, color 0.3s ease;
}

.footer-links a:hover {
    color: #00C6FF;
    transform: translateX(6px);
}

.footer-links a:hover i {
    color: #00C6FF;
    transform: translateX(3px);
}

/* Col 4: Contact List Cards */
.footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact-list li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.contact-icon-box {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    background: rgba(237, 28, 36, 0.14);
    border: 1.5px solid rgba(237, 28, 36, 0.4);
    color: #ED1C24;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-top: 2px;
    box-shadow: 0 4px 12px rgba(237, 28, 36, 0.15);
    transition: all 0.3s ease;
}

.contact-info-text {
    font-size: 0.9rem;
    color: #CBD5E1;
    line-height: 1.5;
}

.contact-info-text strong {
    color: #FFFFFF;
    font-weight: 700;
}

.contact-info-text a {
    color: #00C6FF;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.contact-info-text a:hover {
    color: #ED1C24;
    text-decoration: underline;
}

/* Google Map Glass Card */
.footer-map-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 198, 255, 0.2);
    border-radius: 20px;
    padding: 20px 24px;
    margin-top: 10px;
    margin-bottom: 30px;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 5;
}

.map-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.map-header-left h4 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.map-header-left p {
    font-size: 0.88rem;
    color: #94A3B8;
    margin: 4px 0 0 0;
}

.btn-google-review {
    background: linear-gradient(135deg, rgba(255, 184, 0, 0.15) 0%, rgba(255, 184, 0, 0.05) 100%);
    border: 1.5px solid rgba(255, 184, 0, 0.5);
    color: #FFB800 !important;
    font-weight: 700;
    font-size: 0.88rem;
    padding: 10px 22px;
    border-radius: 25px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 184, 0, 0.15);
}

.btn-google-review:hover {
    background: #FFB800;
    color: #07192B !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 184, 0, 0.35);
}

.footer-map-frame {
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Bottom Bar */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 22px;
    padding-bottom: 10px;
    text-align: center;
    font-size: 0.88rem;
    color: #64748B;
    position: relative;
    z-index: 5;
}

.footer-bottom strong {
    color: #FFFFFF;
}

.footer-bottom a {
    color: #00C6FF;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-bottom a:hover {
    color: #ED1C24;
    text-decoration: underline;
}

/* Responsive Footer */
@media (max-width: 991px) {
    .footer-top-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 32px !important;
    }

    .footer-col, .brand-col, .links-col, .contact-col {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-heading {
        text-align: center;
        width: 100%;
        display: block;
        position: relative;
    }

    .footer-heading::after {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .footer-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .footer-links li {
        width: 100%;
        text-align: center;
    }

    .footer-links a {
        justify-content: center;
    }

    .footer-contact-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .footer-contact-list li {
        justify-content: center;
        text-align: center;
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 576px) {
    .footer-top-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .footer-col, .brand-col, .links-col, .contact-col {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-heading {
        text-align: center;
        width: 100%;
        display: block;
        position: relative;
    }

    .footer-heading::after {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .map-header {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 15px !important;
    }

    .map-header-left h4 {
        justify-content: center;
    }

    .btn-google-review {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* -------------------------------------------------------------
   COMPANY OVERVIEW SECTION (ABOUT US PAGE)
------------------------------------------------------------- */
.about-overview-section {
    background: linear-gradient(135deg, #07192B 0%, #0D2438 50%, #07192B 100%);
    padding: 75px 0;
    position: relative;
    border-top: 2px solid rgba(0, 198, 255, 0.15);
    border-bottom: 2px solid rgba(237, 28, 36, 0.2);
}

.about-overview-card {
    background: rgba(13, 36, 56, 0.7);
    border: 1px solid rgba(0, 198, 255, 0.2);
    border-radius: 20px;
    padding: 45px 50px;
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.overview-main-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #FFFFFF;
    margin-top: 10px;
    margin-bottom: 20px;
}

.overview-body-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 25px;
}

.overview-text {
    color: #CBD5E1;
    font-size: 1.05rem;
    line-height: 1.8;
    margin: 0;
}

.overview-text.highlight-lead {
    font-size: 1.12rem;
    color: #E2E8F0;
    border-left: 4px solid #ED1C24;
    padding-left: 18px;
    background: rgba(237, 28, 36, 0.05);
    padding-top: 12px;
    padding-bottom: 12px;
    border-radius: 0 10px 10px 0;
}

.mentor-badge-box {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(0, 198, 255, 0.08);
    border: 1px solid rgba(0, 198, 255, 0.25);
    border-radius: 14px;
    padding: 18px 24px;
    color: #E2E8F0;
    font-size: 1.02rem;
    line-height: 1.6;
    margin-top: 10px;
}

.mentor-icon {
    font-size: 1.6rem;
    color: #ED1C24;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .about-overview-card {
        padding: 28px 20px;
    }
    .overview-main-title {
        font-size: 1.6rem;
    }
    .overview-text {
        font-size: 0.94rem;
    }
    .mentor-badge-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* ==========================================================================
   CORE IDEOLOGY (MISSION & VISION) CHETANA-INSPIRED PREMIUM DESIGN
   ========================================================================== */
.ideology-section {
    background-color: #F8FAFC;
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(26, 58, 143, 0.04) 0%, transparent 65%),
        linear-gradient(rgba(203, 213, 225, 0.4) 1px, transparent 1px),
        linear-gradient(90deg, rgba(203, 213, 225, 0.4) 1px, transparent 1px);
    background-size: 100% 100%, 36px 36px, 36px 36px;
    position: relative;
    overflow: hidden;
}

.ideology-grid-wrapper {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 32px;
    align-items: center;
    margin-top: 35px;
    margin-bottom: 35px;
    position: relative;
}

/* Vertical Balance & Elevation */
.card-mission {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(0, 82, 204, 0.08), 0 0 0 1px rgba(0, 82, 204, 0.08);
}

.card-vision {
    transform: translateY(8px);
    box-shadow: 0 16px 40px rgba(237, 28, 36, 0.08), 0 0 0 1px rgba(237, 28, 36, 0.08);
}

.ideology-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 24px;
    padding: 38px 34px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    z-index: 2;
    height: 100%;
}

.card-mission:hover {
    transform: translateY(-14px);
    border-color: rgba(0, 82, 204, 0.4);
    box-shadow: 0 24px 55px rgba(0, 82, 204, 0.18), 0 0 0 1px rgba(0, 82, 204, 0.25);
}

.card-vision:hover {
    transform: translateY(2px);
    border-color: rgba(237, 28, 36, 0.4);
    box-shadow: 0 24px 55px rgba(237, 28, 36, 0.18), 0 0 0 1px rgba(237, 28, 36, 0.25);
}

/* Ambient Glow Corner */
.ideology-ambient-glow {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    filter: blur(50px);
    pointer-events: none;
    opacity: 0.18;
    transition: opacity 0.4s ease;
}

.ideology-card:hover .ideology-ambient-glow,
.ideology-quality-banner:hover .ideology-ambient-glow {
    opacity: 0.35;
}

.glow-blue {
    background: #007BFF;
}

.glow-red {
    background: #E52E2E;
}

.glow-gold {
    background: #FFB300;
}

.ideology-card-inner {
    position: relative;
    z-index: 2;
}

.card-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.ideology-icon-label-group {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ideology-badge-tag {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tag-blue {
    background: rgba(0, 123, 255, 0.08);
    color: #0066CC;
    border: 1px solid rgba(0, 123, 255, 0.25);
}

.tag-red {
    background: rgba(229, 46, 46, 0.08);
    color: #E52E2E;
    border: 1px solid rgba(229, 46, 46, 0.25);
}

/* Feature Pills Group (Icon-in-circle + Label Layout) */
.ideology-pills-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.feature-pill {
    font-size: 0.82rem;
    font-weight: 700;
    padding: 6px 16px 6px 8px;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.feature-pill .pill-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.pill-blue {
    background: rgba(0, 82, 204, 0.05);
    color: #0052CC;
    border: 1px solid rgba(0, 82, 204, 0.18);
}

.pill-blue .pill-icon {
    background: rgba(0, 82, 204, 0.12);
    color: #0052CC;
}

.pill-blue:hover {
    background: #0052CC;
    color: #FFFFFF;
    border-color: #0052CC;
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 82, 204, 0.28);
}

.pill-blue:hover .pill-icon {
    background: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
}

.pill-red {
    background: rgba(237, 28, 36, 0.05);
    color: #ED1C24;
    border: 1px solid rgba(237, 28, 36, 0.18);
}

.pill-red .pill-icon {
    background: rgba(237, 28, 36, 0.12);
    color: #ED1C24;
}

.pill-red:hover {
    background: #ED1C24;
    color: #FFFFFF;
    border-color: #ED1C24;
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(237, 28, 36, 0.28);
}

.pill-red:hover .pill-icon {
    background: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
}

/* ── Animated Icon Box ── */
.ideology-icon-box {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    position: relative;
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
    animation: iconFloat 3.5s ease-in-out infinite;
}

/* Animated pulse ring on icon */
.ideology-icon-box::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 22px;
    opacity: 0;
    animation: iconPulseRing 2.8s ease-out infinite;
}

.icon-blue::before {
    border: 2px solid rgba(0, 123, 255, 0.55);
    animation-delay: 0s;
}

.icon-red::before {
    border: 2px solid rgba(229, 46, 46, 0.55);
    animation-delay: 0.4s;
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes iconPulseRing {
    0% { transform: scale(0.88); opacity: 0.9; }
    70% { transform: scale(1.22); opacity: 0; }
    100% { transform: scale(1.22); opacity: 0; }
}

.ideology-card:hover .ideology-icon-box {
    transform: scale(1.12) translateY(-4px);
}

.icon-blue {
    background: linear-gradient(135deg, #0B236D 0%, #1565C0 100%);
    color: #FFFFFF;
    border: none;
    box-shadow: 0 8px 24px rgba(11, 35, 109, 0.35), 0 0 0 4px rgba(11, 35, 109, 0.1);
}

.icon-red {
    background: linear-gradient(135deg, #E31B23 0%, #C62828 100%);
    color: #FFFFFF;
    border: none;
    box-shadow: 0 8px 24px rgba(227, 27, 35, 0.35), 0 0 0 4px rgba(227, 27, 35, 0.1);
}

.quality-icon-box {
    width: 58px;
    height: 58px;
    min-width: 58px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 179, 0, 0.14) 0%, rgba(255, 193, 7, 0.22) 100%);
    color: #D99B00;
    border: 1px solid rgba(255, 179, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 6px 16px rgba(255, 179, 0, 0.15);
    transition: transform 0.35s ease;
}

/* ── Highlighted Eyebrow Label ── */
.ideology-eyebrow {
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.ideology-icon-label-group:has(.icon-blue) .ideology-eyebrow {
    background: linear-gradient(135deg, rgba(11, 35, 109, 0.1) 0%, rgba(21, 101, 192, 0.12) 100%);
    color: #0B236D;
    border: 1.5px solid rgba(11, 35, 109, 0.22);
    box-shadow: 0 3px 12px rgba(11, 35, 109, 0.12);
}

.ideology-icon-label-group:has(.icon-red) .ideology-eyebrow {
    background: linear-gradient(135deg, rgba(227, 27, 35, 0.1) 0%, rgba(198, 40, 40, 0.12) 100%);
    color: #C62828;
    border: 1.5px solid rgba(227, 27, 35, 0.22);
    box-shadow: 0 3px 12px rgba(227, 27, 35, 0.12);
}

.ideology-eyebrow::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.35) 0%, transparent 60%);
    pointer-events: none;
}

.ideology-icon-label-group {
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform 0.3s ease;
}

.ideology-icon-label-group:hover .ideology-eyebrow {
    transform: translateX(3px);
}

.eyebrow-gold {
    color: #B78103;
}

/* Card Title & Desc */
.ideology-card-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #07192B;
    margin-bottom: 14px;
    line-height: 1.3;
    letter-spacing: -0.3px;
}

.ideology-card-desc {
    font-size: 0.96rem;
    color: #475569;
    line-height: 1.7;
    margin: 0;
}

/* Center Emblem Node (ESTD 2013) */
.ideology-center-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    position: relative;
    z-index: 5;
    margin: 0 4px;
    flex-shrink: 0;
}

.badge-circle-content {
    width: 165px;
    height: 165px;
    border-radius: 50%;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 5;
    box-shadow: 0 12px 35px rgba(11, 25, 44, 0.16), 0 0 0 6px rgba(255, 255, 255, 0.95);
    border: 3px solid rgba(237, 28, 36, 0.85);
    overflow: hidden;
    padding: 6px;
}

.emblem-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    display: block;
}

.badge-ring-outer {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(0, 198, 255, 0.5);
    animation: emblemPulseRing 3.5s ease-in-out infinite;
}

.badge-ring-dashed {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 1.5px dashed rgba(229, 46, 46, 0.55);
    animation: emblemRotateDashed 25s linear infinite;
}

@keyframes emblemPulseRing {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.06); opacity: 1; }
}

@keyframes emblemRotateDashed {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.badge-estd-label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #FF5252;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.badge-year-val {
    font-size: 1.45rem;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1;
    letter-spacing: -0.5px;
}

/* Quality Assurance Banner Card */
.ideology-quality-banner {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 28px;
    padding: 32px 38px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(11, 25, 44, 0.04);
    transition: all 0.4s ease;
}

.ideology-quality-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(11, 25, 44, 0.08);
    border-color: rgba(255, 179, 0, 0.5);
}

.quality-banner-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    z-index: 2;
}

.quality-content-box {
    flex: 1;
}

/* Responsive Media Queries */
@media (max-width: 991px) {
    .ideology-grid-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .ideology-center-badge {
        margin: 10px auto;
    }

    .quality-banner-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

/* ==========================================================================
   UNIQUE BRAND ECG PULSE UNDERLINE & SPARKLE ANIMATION
   ========================================================================== */
.unique-brand-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: baseline;
}

.unique-pulse-line-svg {
    position: absolute;
    bottom: -18px;
    left: 0;
    width: 100%;
    height: 24px;
    overflow: visible;
    pointer-events: none;
}

.pulse-path-draw {
    stroke-dasharray: 420;
    stroke-dashoffset: 420;
    animation: drawUniquePulseLine 2.2s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards;
}

@keyframes drawUniquePulseLine {
    0% {
        stroke-dashoffset: 420;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

.pulse-sparkle-group {
    opacity: 0;
    animation: moveSparkleTip 2.2s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards, sparkleGlowPulse 2s ease-in-out 2.8s infinite;
}

@keyframes moveSparkleTip {
    0% {
        opacity: 0;
        transform: translate(0px, 14px) scale(0.4);
    }
    10% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translate(200px, 14px) scale(1.1);
    }
}

@keyframes sparkleGlowPulse {
    0%, 100% {
        transform: translate(200px, 14px) scale(1) rotate(0deg);
        filter: drop-shadow(0 0 4px #FFFFFF) drop-shadow(0 0 10px #00C6FF);
    }
    50% {
        transform: translate(200px, 14px) scale(1.4) rotate(45deg);
        filter: drop-shadow(0 0 8px #FFFFFF) drop-shadow(0 0 18px #00C6FF) drop-shadow(0 0 25px rgba(0, 198, 255, 0.9));
    }
}

.sparkle-ring-outer {
    animation: ringPulse 2s ease-in-out infinite;
}

@keyframes ringPulse {
    0%, 100% { opacity: 0.3; r: 6; }
    50% { opacity: 0.7; r: 9; }
}

.sparkle-star-svg {
    filter: drop-shadow(0 0 4px #FFFFFF);
}

/* =========================================================
   EXTRACTED INLINE STYLES → EXTERNAL CSS CLASSES
   ========================================================= */

/* --- Hero Slider Background Images --- */
.slide-bg-1 {
    background: linear-gradient(135deg, rgba(5, 18, 34, 0.88) 0%, rgba(9, 22, 40, 0.92) 100%),
        url('../img/slider1.webp') center/cover no-repeat;
}
.slide-bg-2 {
    background: linear-gradient(135deg, rgba(5, 18, 34, 0.88) 0%, rgba(9, 22, 40, 0.92) 100%),
        url('../img/slider2.webp') center/cover no-repeat;
}
.slide-bg-3 {
    background: linear-gradient(135deg, rgba(5, 18, 34, 0.92) 0%, rgba(8, 20, 38, 0.95) 100%),
        url('../img/Constant Voltage Transformer1.webp') center/cover no-repeat;
}

/* --- Hero Container Z-Index --- */
.circle-static-container {
    position: relative;
    z-index: 5;
}

/* --- Hero Dynamic Subtext Redesign --- */
.hero-dynamic-subtext {
    max-width: 440px !important;
    min-height: 82px !important;
    margin: 14px auto 0 auto !important;
    padding: 10px 18px !important;
    background: rgba(8, 22, 42, 0.82) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-align: center !important;
    transition: opacity 0.4s ease, transform 0.4s ease !important;
}

.hero-subtext-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.25;
}

.hero-subtext-badge.red-badge {
    background: rgba(237, 28, 36, 0.22);
    color: #FF5A5A;
    border: 1px solid rgba(237, 28, 36, 0.45);
    box-shadow: 0 0 10px rgba(237, 28, 36, 0.2);
}

.hero-subtext-badge.blue-badge {
    background: rgba(0, 174, 239, 0.2);
    color: #38BDF8;
    border: 1px solid rgba(0, 174, 239, 0.45);
    box-shadow: 0 0 10px rgba(0, 174, 239, 0.2);
}

.hero-subtext-desc {
    font-size: 0.84rem;
    line-height: 1.45;
    color: #F1F5F9;
    font-weight: 500;
    margin: 0;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
    text-align: center;
}

@media (max-width: 1200px) and (min-width: 992px) {
    .hero-dynamic-subtext {
        max-width: 390px !important;
        padding: 8px 14px !important;
    }
    .hero-subtext-badge {
        font-size: 0.76rem;
    }
    .hero-subtext-desc {
        font-size: 0.8rem;
        line-height: 1.4;
    }
}

@media (max-width: 768px) {
    .hero-dynamic-subtext {
        max-width: 95% !important;
        padding: 10px 14px !important;
        min-height: 95px !important;
    }
    .hero-subtext-badge {
        font-size: 0.78rem;
        padding: 3px 10px;
    }
    .hero-subtext-desc {
        font-size: 0.82rem;
        line-height: 1.45;
    }
}

/* =========================================================
   TESTIMONIALS SECTION
   ========================================================= */
#testimonials.reviews-section {
    position: relative;
    overflow: hidden;
}

.testimonial-glow-circle {
    position: absolute;
    width: 350px;
    height: 350px;
    filter: blur(90px);
    border-radius: 50%;
    pointer-events: none;
}
.testimonial-glow-red {
    top: -100px;
    left: -100px;
    background: rgba(229, 46, 46, 0.12);
}
.testimonial-glow-blue {
    bottom: -100px;
    right: -100px;
    background: rgba(0, 123, 255, 0.12);
}

.testimonial-container {
    position: relative;
    z-index: 2;
    width: 100% !important;
    max-width: 1050px !important;
    margin: 0 auto;
}

.testimonial-section-header {
    margin-bottom: 40px;
}

.testimonial-tag {
    background: rgba(229, 46, 46, 0.12) !important;
    color: #E52E2E !important;
    border: 1px solid rgba(229, 46, 46, 0.35) !important;
    border-radius: 30px;
    padding: 6px 18px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.testimonial-star-icon { color: #FFC107; }

.testimonial-title {
    font-size: 2.4rem;
    font-weight: 800;
    color: #07192B;
    margin-top: 12px;
    margin-bottom: 10px;
}

.testimonial-accent-divider {
    width: 70px;
    height: 4px;
    background: #E52E2E;
    margin: 12px auto;
    border-radius: 2px;
}

.testimonial-slider-container {
    position: relative;
    min-height: 260px;
}

/* =========================================================
   REVIEW CARD COMPONENT CLASSES (HORIZONTAL CLIENT CARDS)
   ========================================================= */
.rc-card {
    background: #0B192C;
    border: 1.5px solid rgba(0, 198, 255, 0.22);
    border-radius: 20px;
    padding: 20px 24px;
    position: relative;
    box-shadow: 0 12px 30px rgba(7, 25, 43, 0.35);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.rc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(7, 25, 43, 0.5);
    border-color: rgba(0, 198, 255, 0.45);
}

.rc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.rc-stars {
    color: #FFFFFF;
    font-size: 14px;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.rc-product-box {
    background: #10243E;
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-left: 3.5px solid #00C6FF;
}

.rc-badge-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.rc-author-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* --- Avatar Base --- */
.rc-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #FFF;
    font-weight: 800;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, #64748B 0%, #475569 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* --- Avatar Color Variants — All unified to sleek modern gray --- */
.rc-avatar-red,
.rc-avatar-blue,
.rc-avatar-purple,
.rc-avatar-orange,
.rc-avatar-teal,
.rc-avatar-slate,
.rc-avatar-crimson,
.rc-avatar-emerald,
.rc-avatar-gold,
.rc-avatar-redpurple {
    background: linear-gradient(135deg, #64748B 0%, #475569 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* --- Name & Location --- */
.rc-name {
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
}
.rc-name-sm { font-size: 15px; }

.rc-location {
    font-size: 12px;
    color: #94A3B8;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* --- Location Icon Colors --- */
.rc-loc-icon { font-size: 11px; }
.rc-loc-red,
.rc-loc-blue,
.rc-loc-purple,
.rc-loc-orange,
.rc-loc-teal,
.rc-loc-slate,
.rc-loc-crimson,
.rc-loc-emerald,
.rc-loc-gold   { color: #ED1C24; }

/* --- Stars Row (White Stars Matching Image 2) --- */
.rc-stars {
    color: #FFFFFF;
    font-size: 14px;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

/* --- Product Box Base --- */
.rc-product-box {
    background: #10243E;
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-left: 3.5px solid #00C6FF;
}

/* --- Product Box Color Variants --- */
.rc-product-red       { border-left-color: #E52E2E; }
.rc-product-blue      { border-left-color: #00C6FF; }
.rc-product-purple    { border-left-color: #9B59B6; }
.rc-product-orange    { border-left-color: #E67E22; }
.rc-product-teal      { border-left-color: #1ABC9C; }
.rc-product-slate     { border-left-color: #64748B; }
.rc-product-crimson   { border-left-color: #E74C3C; }
.rc-product-emerald   { border-left-color: #2ECC71; }
.rc-product-amber     { border-left-color: #F39C12; }
.rc-product-redpurple { border-left-color: #C0392B; }

/* --- Product Label --- */
.rc-product-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #00C6FF;
}
.rc-label-red       { color: #FF5252; }
.rc-label-blue      { color: #00C6FF; }
.rc-label-purple    { color: #9B59B6; }
.rc-label-orange    { color: #E67E22; }
.rc-label-teal      { color: #1ABC9C; }
.rc-label-slate     { color: #94A3B8; }
.rc-label-crimson   { color: #FF5252; }
.rc-label-emerald   { color: #2ECC71; }
.rc-label-amber     { color: #F39C12; }
.rc-label-redpurple { color: #E74C3C; }

.rc-product-name {
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
    margin-top: 3px;
}

/* --- Badge Row --- */
.rc-badge-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* --- Badge Base (Sleek Horizontal Pill Badge) --- */
.rc-badge {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.2s ease;
}

/* --- Badge Color Variants (Dark Thematic Styling Matching Image 2) --- */
.rc-badge-red       { background: rgba(229, 46, 46, 0.15); color: #FF5252; border: 1px solid rgba(229, 46, 46, 0.35); }
.rc-badge-blue      { background: rgba(0, 123, 255, 0.15); color: #00C6FF; border: 1px solid rgba(0, 198, 255, 0.35); }
.rc-badge-purple    { background: rgba(155, 89, 182, 0.15); color: #B37DDB; border: 1px solid rgba(155, 89, 182, 0.35); }
.rc-badge-skyblue   { background: rgba(52, 152, 219, 0.15); color: #60A5FA; border: 1px solid rgba(52, 152, 219, 0.35); }
.rc-badge-amber     { background: rgba(243, 156, 18, 0.15); color: #FBBF24; border: 1px solid rgba(243, 156, 18, 0.35); }
.rc-badge-teal      { background: rgba(26, 188, 156, 0.15); color: #2DD4BF; border: 1px solid rgba(26, 188, 156, 0.35); }
.rc-badge-slate     { background: rgba(100, 116, 139, 0.2); color: #CBD5E1; border: 1px solid rgba(148, 163, 184, 0.35); }
.rc-badge-crimson   { background: rgba(231, 76, 60, 0.15); color: #F87171; border: 1px solid rgba(231, 76, 60, 0.35); }
.rc-badge-emerald   { background: rgba(46, 204, 113, 0.15); color: #34D399; border: 1px solid rgba(46, 204, 113, 0.35); }
.rc-badge-redpurple { background: rgba(192, 57, 43, 0.15); color: #F87171; border: 1px solid rgba(192, 57, 43, 0.35); }
.rc-badge-green     { background: rgba(46, 204, 113, 0.15); color: #34D399; border: 1px solid rgba(46, 204, 113, 0.35); }

/* =========================================================
   FOOTER UTILITY CLASSES
   ========================================================= */
.footer-map-icon  { color: #ED1C24; }
.footer-google-icon { color: #FFB800; }
.footer-iframe    { border: 0; }
.footer-brand-name { color: #FFFFFF; }
.footer-dev-credit { margin-top: 4px; font-size: 0.9rem; }
.footer-dev-link  { color: #FF7A00; font-weight: 700; text-decoration: none; }
.footer-address-text { color: #E2E8F0; font-size: 0.88rem; margin-top: 5px; line-height: 1.5; }

/* =========================================================
   REQUEST INDUSTRIAL QUOTE MODAL (GLOBAL POPUP)
   ========================================================= */
.quote-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(7, 25, 43, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.quote-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.quote-modal-container {
    width: 100%;
    max-width: 540px;
    background: #FFFFFF;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    position: relative;
    transform: translateY(25px) scale(0.96);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 92vh;
}

.quote-modal-overlay.active .quote-modal-container {
    transform: translateY(0) scale(1);
}

.quote-modal-header {
    background: #1E293B;
    color: #FFFFFF;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 14px 14px 0 0;
}

.quote-modal-title {
    font-size: 1.05rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #FFFFFF;
}

.quote-modal-title i {
    color: #FFB800;
    font-size: 1.05rem;
}

.quote-modal-close {
    background: transparent;
    border: none;
    color: #94A3B8;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
}

.quote-modal-close:hover {
    color: #FFFFFF;
    transform: scale(1.15);
}

.quote-modal-body {
    padding: 16px 20px 20px;
    max-height: calc(92vh - 50px);
    overflow-y: auto;
}

.quote-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 14px;
}

.quote-form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quote-form-group.full-width {
    grid-column: span 2;
}

.quote-form-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1E293B;
}

.quote-form-label span.req {
    color: #ED1C24;
}

.quote-form-input,
.quote-form-select,
.quote-form-textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid #CBD5E1;
    border-radius: 7px;
    font-size: 0.88rem;
    color: #0F172A;
    background: #F8FAFC;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    font-family: inherit;
}

.quote-form-input:focus,
.quote-form-select:focus,
.quote-form-textarea:focus {
    outline: none;
    border-color: #00AEEF;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.15);
}

.quote-form-textarea {
    min-height: 55px;
    height: 60px;
    resize: vertical;
}

/* Custom Select Dropdown for Quote Modal (Always Opens Downwards) */
.custom-select-wrapper {
    position: relative;
    user-select: none;
    width: 100%;
}

.custom-select-trigger {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid #CBD5E1;
    border-radius: 7px;
    font-size: 0.88rem;
    color: #64748B;
    background: #F8FAFC;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    font-family: inherit;
}

.custom-select-trigger.has-value {
    color: #0F172A;
    font-weight: 600;
}

.custom-select-trigger:hover,
.custom-select-wrapper.open .custom-select-trigger {
    border-color: #00AEEF;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.15);
}

.custom-select-trigger.error {
    border-color: #ED1C24 !important;
    background: #FFF5F5 !important;
}

.custom-select-trigger .cs-arrow {
    color: #64748B;
    font-size: 0.8rem;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-select-wrapper.open .custom-select-trigger .cs-arrow {
    transform: rotate(180deg);
    color: #00AEEF;
}

.custom-select-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
    max-height: 180px;
    overflow-y: auto;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
}

.custom-select-wrapper.open .custom-select-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.custom-select-option {
    padding: 8px 12px;
    font-size: 0.86rem;
    color: #1E293B;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.15s ease, color 0.15s ease;
    border-bottom: 1px solid #F1F5F9;
}

.custom-select-option:last-child {
    border-bottom: none;
}

.custom-select-option:hover {
    background: #F0F9FF;
    color: #0284C7;
    font-weight: 600;
}

.custom-select-option.selected {
    background: #E0F2FE;
    color: #0369A1;
    font-weight: 700;
}

.custom-select-option.selected::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.8rem;
    color: #0284C7;
}

.custom-select-dropdown::-webkit-scrollbar {
    width: 5px;
}
.custom-select-dropdown::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 4px;
}
.custom-select-dropdown::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

.quote-modal-footer {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
}

.btn-submit-quote-form {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #ED1C24 0%, #C90E15 100%);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 0.92rem;
    padding: 9px 24px;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 15px rgba(237, 28, 36, 0.3);
    width: 100%;
}

.btn-submit-quote-form:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(237, 28, 36, 0.45);
}

.quote-success-msg {
    display: none;
    text-align: center;
    padding: 30px 15px;
}

.quote-success-msg i {
    font-size: 3.5rem;
    color: #22C55E;
    margin-bottom: 15px;
}

.quote-success-msg h3 {
    font-size: 1.5rem;
    color: #0F172A;
    margin-bottom: 10px;
    font-weight: 800;
}

.quote-success-msg p {
    font-size: 1rem;
    color: #64748B;
    margin-bottom: 20px;
}

@media (max-width: 640px) {
    .quote-form-grid {
        grid-template-columns: 1fr;
    }
    .quote-form-group.full-width {
        grid-column: span 1;
    }
    .quote-modal-body {
        padding: 20px 18px 24px;
    }
}

/* Side Hero Clean Breadcrumb (Home > Page) */
.side-hero-breadcrumb-wrapper {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-bottom: 18px;
    z-index: 10;
}

.side-hero-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.98rem;
    font-weight: 500;
    color: #E2E8F0;
}

.side-hero-breadcrumb a {
    color: #E2E8F0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
}

.side-hero-breadcrumb a:hover {
    color: #FFFFFF;
}

.side-hero-breadcrumb i.fa-house,
.side-hero-breadcrumb i.home-icon {
    font-size: 1.05rem;
    opacity: 0.85;
}

.side-hero-breadcrumb i.fa-chevron-right,
.side-hero-breadcrumb span.sep {
    font-size: 0.75rem;
    opacity: 0.6;
    color: #CBD5E1;
}

.side-hero-breadcrumb span.crumb-current {
    color: #FFFFFF;
    font-weight: 700;
}

/* About Hero Premium Redesign */
.about-hero-wrapper {
    max-width: 950px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 5;
}

.about-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(237, 28, 36, 0.15);
    border: 1px solid rgba(237, 28, 36, 0.4);
    color: #FF6B6B;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 30px;
    margin-bottom: 10px;
}

.about-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 800;
    line-height: 1.2;
    color: #FFFFFF;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.about-hero-desc {
    font-size: clamp(0.85rem, 1.1vw, 0.95rem);
    line-height: 1.55;
    color: #CBD5E1;
    max-width: 720px;
    margin: 0 auto 18px auto;
}

.about-hero-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 38px;
}

@media (max-width: 768px) {
    .about-hero-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

.about-stat-box {
    background: rgba(7, 25, 43, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(12px);
    border-radius: 18px;
    padding: 18px 14px;
    text-align: center;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.about-stat-box:hover {
    transform: translateY(-4px);
    border-color: rgba(237, 28, 36, 0.45);
    background: rgba(7, 25, 43, 0.88);
}

.about-stat-num {
    font-size: 1.85rem;
    font-weight: 900;
    color: #00C6FF;
    line-height: 1;
    margin-bottom: 6px;
}

.about-stat-box:nth-child(2) .about-stat-num {
    color: #ED1C24;
}

.about-stat-box:nth-child(3) .about-stat-num {
    color: #FFB300;
}

.about-stat-box:nth-child(4) .about-stat-num {
    color: #22C55E;
}

.about-stat-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive Ideology Grid */
@media (max-width: 992px) {
    .ideology-grid-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .card-mission,
    .card-vision {
        transform: none !important;
    }

    .ideology-center-badge {
        margin-left: 0;
        margin-right: 0;
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

/* ==========================================================================
   CUSTOM INTERACTIVE DUAL-RING MOUSE CURSOR (DOT + TRAILING CIRCLE)
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
    .cursor-dot {
        position: fixed;
        top: 0;
        left: 0;
        width: 8px;
        height: 8px;
        background: #ED1C24;
        border-radius: 50%;
        pointer-events: none;
        z-index: 9999999;
        transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
        transition: opacity 0.3s ease, background-color 0.25s ease, transform 0.12s cubic-bezier(0.16, 1, 0.3, 1);
        opacity: 0;
        will-change: transform;
    }

    .cursor-ring {
        position: fixed;
        top: 0;
        left: 0;
        width: 36px;
        height: 36px;
        border: 1.5px solid rgba(237, 28, 36, 0.45);
        border-radius: 50%;
        pointer-events: none;
        z-index: 9999998;
        transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
        transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                    height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                    border-color 0.3s ease,
                    background-color 0.3s ease,
                    opacity 0.3s ease;
        opacity: 0;
        will-change: transform;
    }

    /* Interactive Hover Expansion */
    .cursor-ring.cursor-hover {
        width: 54px;
        height: 54px;
        border-color: #00AEEF;
        background: rgba(0, 174, 239, 0.08);
        border-width: 2px;
    }

    .cursor-dot.cursor-hover {
        background: #00AEEF;
        transform: translate3d(var(--cursor-x, -100px), var(--cursor-y, -100px), 0) translate(-50%, -50%) scale(1.3);
    }

    /* Active / Click Pulse */
    .cursor-ring.cursor-active {
        width: 28px;
        height: 28px;
        border-color: #ED1C24;
        background: rgba(237, 28, 36, 0.18);
    }

    .cursor-dot.cursor-active {
        transform: translate3d(var(--cursor-x, -100px), var(--cursor-y, -100px), 0) translate(-50%, -50%) scale(0.75);
    }
}

/* ==========================================================================
   UNIVERSAL MASTER RESPONSIVE SUITE (ALL DEVICES & RESOLUTIONS)
   Verified against:
   1. Desktop Full HD Monitor (1920x1080)
   2. MacBook Air 13" (1440x900)
   3. Standard Windows Laptop (1366x768)
   4. iPad Pro 12.9" (1024x1366)
   5. iPad Mini (768x1024)
   6. iPhone 15 Pro Max (430x932)
   7. Google Pixel 7 (412x915)
   8. iPhone SE (320x568)
   ========================================================================== */

/* 1. Universal Viewport Safety & Zero Horizontal Overflow (Preserves Sticky Positioning) */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    position: relative;
}

img, video, iframe, svg, canvas {
    max-width: 100%;
    height: auto;
}

/* 2. Desktop Full HD Monitor (1920x1080) & Ultra-wide Screens (> 1440px) */
@media (min-width: 1441px) {
    .container {
        max-width: 1360px;
        padding-left: 28px;
        padding-right: 28px;
    }

    .hero-title {
        font-size: 3.4rem;
    }
    .gal-hero-title, .page-hero-title, .about-hero-title, .contact-hero-title, .prod-hero-title {
        font-size: 2.75rem;
    }
}

/* 3. MacBook Air 13" & Windows Laptops (1200px - 1440px) */
@media (min-width: 1200px) and (max-width: 1440px) {
    .container {
        max-width: 1220px;
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* 4. iPad Pro 12.9" (1024x1366) & Small Laptops (992px - 1199px) */
@media (max-width: 1199px) {
    .container {
        max-width: 980px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .nav-link {
        font-size: 0.88rem;
        padding: 0 8px;
    }

    .footer-top-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 36px;
    }

    .stats-strip, .chetana-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* 5. iPad Mini & Medium Tablets (768px to 991px) */
@media (max-width: 991px) {
    .container {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Mobile Header & Nav Drawer */
    .header-inner {
        height: 72px;
    }

    .logo-img {
        height: 48px;
        max-height: 48px;
    }

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

    .mobile-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: #F8FAFC;
        border: 1.5px solid #CBD5E1;
        border-radius: 10px;
        color: #07192B;
        font-size: 1.3rem;
        cursor: pointer;
        transition: all 0.25s ease;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }

    .mobile-toggle:hover,
    .mobile-toggle:active {
        background: #FFF5F5;
        border-color: #ED1C24;
        color: #ED1C24;
    }

    .nav-menu {
        position: fixed;
        top: 72px;
        left: 0;
        right: 0;
        width: 100%;
        max-height: calc(100vh - 72px);
        background: #07192B;
        border-bottom: 3px solid #ED1C24;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35);
        padding: 20px 18px 28px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-15px);
        transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 99998;
    }

    .nav-menu.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        font-size: 1rem;
        font-weight: 700;
        color: #FFFFFF !important;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 10px;
        margin-bottom: 4px;
        text-decoration: none;
        transition: all 0.25s ease;
    }

    .nav-link:hover,
    .nav-link.active {
        background: linear-gradient(90deg, rgba(237, 28, 36, 0.22) 0%, rgba(0, 174, 239, 0.15) 100%);
        border-color: rgba(237, 28, 36, 0.4);
        color: #FFFFFF !important;
        padding-left: 20px;
    }

    .nav-link.active::after {
        display: none;
    }

    .nav-item.has-dropdown:hover .mega-dropdown {
        opacity: 0;
        visibility: hidden;
        display: none;
    }

    .mega-dropdown {
        position: static;
        width: 100%;
        box-shadow: none;
        background: rgba(11, 34, 64, 0.6);
        border: 1px solid rgba(0, 174, 239, 0.2);
        border-radius: 12px;
        padding: 0 16px;
        opacity: 0;
        visibility: hidden;
        transform: none;
        margin-top: 0;
        margin-bottom: 0;
        display: none;
        border-top: none;
        transition: all 0.3s ease;
    }

    .nav-item.has-dropdown.open .mega-dropdown,
    .nav-item.has-dropdown.open:hover .mega-dropdown {
        opacity: 1;
        visibility: visible;
        display: block;
        padding: 16px;
        margin-top: 4px;
        margin-bottom: 8px;
    }

    .nav-item.has-dropdown .drop-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px 12px;
        margin: -6px -12px -6px 6px;
        cursor: pointer;
        transition: transform 0.3s ease, background-color 0.2s ease;
        border-radius: 6px;
    }

    .nav-item.has-dropdown .drop-icon:hover {
        background: rgba(255, 255, 255, 0.12);
    }

    .nav-item.has-dropdown.open .drop-icon,
    .nav-item.has-dropdown.open:hover .drop-icon {
        transform: rotate(180deg);
    }

    .nav-item.has-dropdown:not(.open):hover .drop-icon {
        transform: rotate(0deg);
    }

    .mega-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .mega-title {
        font-size: 0.92rem;
        color: #00C6FF;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 6px;
        margin-bottom: 10px;
        font-weight: 800;
    }

    .mega-links li {
        margin-bottom: 10px;
    }

    .mega-links a {
        color: #CBD5E1;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        padding: 4px 0;
        transition: all 0.2s ease;
    }

    .mega-links a:hover {
        color: #FFFFFF;
        padding-left: 6px;
    }

    .mobile-nav-quote {
        display: block;
        width: 100%;
        margin-top: 14px;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .mobile-nav-quote .btn {
        width: 100%;
        justify-content: center;
        padding: 13px 20px;
        font-size: 1rem;
        font-weight: 800;
        border-radius: 30px;
        background: linear-gradient(135deg, #ED1C24 0%, #C90E15 100%);
        box-shadow: 0 6px 20px rgba(237, 28, 36, 0.35);
        color: #FFFFFF;
    }

    /* Hero Section Responsive */
    .hero-diagonal-divider {
        display: none !important;
    }

    .hero-mockup-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .hero-mockup-right {
        margin-top: 20px !important;
        padding-top: 10px !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    .tech-pipeline-line {
        display: none !important;
    }

    .tech-pipeline-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Split Section Stacking */
    .hero-split, .split-row, .about-hero-grid, .pd-main-grid, .contact-grid-main {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }

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

    .section-padding {
        padding: 60px 0;
    }
}

/* 6. iPhone 15 Pro Max & Modern Android Phones (481px to 767px) */
@media (max-width: 767px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .header-inner {
        height: 68px;
    }

    .nav-menu {
        top: 68px;
        max-height: calc(100vh - 68px);
    }

    .logo-img {
        height: 44px;
        max-height: 44px;
    }

    .top-bar-marquee {
        font-size: 0.8rem;
    }

    .section-padding {
        padding: 45px 0;
    }

    /* Hero Headline & Elements */
    .circle-headline,
    .hero-company-title {
        font-size: clamp(1.65rem, 6vw, 2.3rem) !important;
        line-height: 1.25 !important;
        word-break: break-word;
    }

    .hero-float-badge {
        display: none !important;
    }

    .mockup-hex-wrapper {
        width: 100% !important;
        max-width: 310px !important;
        height: 270px !important;
        margin: 20px auto 10px auto !important;
    }

    .mockup-hex-outer {
        width: 100% !important;
        max-width: 300px !important;
        height: 250px !important;
    }

    /* 1-Col Grid for Cards on Mobile */
    .services-grid, .chetana-cards-grid, .footer-top-grid, .why-us-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .stats-strip .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .stat-card {
        padding: 14px 10px !important;
        border-radius: 14px !important;
    }

    .stat-icon-wrapper {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        font-size: 1rem !important;
    }

    .stat-number-wrapper .counter {
        font-size: 1.45rem !important;
    }

    .stat-number-wrapper .stat-unit {
        font-size: 1.1rem !important;
    }

    .stat-label {
        font-size: 0.74rem !important;
    }

    /* About Section */
    .about-card-container {
        padding: 24px 16px !important;
        border-radius: 16px !important;
    }

    .about-redesign-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .about-main-headline {
        font-size: clamp(1.45rem, 5.2vw, 2rem) !important;
        line-height: 1.25 !important;
    }

    .about-cta-wrapper {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .btn-about-quote,
    .btn-about-contact {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Services Header & Cards */
    .services-header-wrapper {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
    }

    .services-header-right {
        width: 100% !important;
    }

    .services-header-right .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    .services-marquee-wrapper {
        overflow-x: auto !important;
        padding-bottom: 10px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Testimonials Slider */
    .testimonial-slide-item {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .review-card {
        padding: 18px 16px !important;
        border-radius: 16px !important;
        width: 100% !important;
    }

    .testimonial-nav-footer {
        flex-direction: column !important;
        align-items: center !important;
        gap: 14px !important;
    }

    .hero-buttons-row, .gal-lightbox-actions, .prod-cta-btns {
        flex-direction: column;
        width: 100%;
    }

    .btn-block-mobile, .btn-red-pill, .btn-outline-quote {
        width: 100%;
        justify-content: center;
    }

    /* Footer Maps Card */
    .footer-map-card {
        padding: 16px;
        border-radius: 14px;
    }

    .map-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .map-header-right {
        width: 100%;
    }

    .btn-google-review {
        width: 100%;
        justify-content: center;
    }

    .footer-iframe {
        height: 190px !important;
        border-radius: 10px;
    }
}

/* 7. Google Pixel 7, Samsung Galaxy S20 Ultra & Standard Mobile (361px to 480px) */
@media (max-width: 480px) {
    .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .header-inner {
        height: 64px !important;
    }

    .nav-menu {
        top: 64px !important;
        max-height: calc(100vh - 64px) !important;
        padding: 16px 14px 24px !important;
    }

    .logo-img {
        height: 40px !important;
        max-height: 40px !important;
    }

    .hero-title, .gal-hero-title, .page-hero-title {
        font-size: 1.75rem !important;
        line-height: 1.25 !important;
    }

    .hero-subtitle, .gal-hero-sub {
        font-size: 0.88rem !important;
    }

    /* Hero Section Fine-Tuning */
    .hero-h1-welcome-center {
        font-size: 0.88rem !important;
    }

    .circle-headline,
    .hero-company-title {
        font-size: 1.55rem !important;
    }

    .unique-pulse-line-svg {
        width: 80px !important;
        height: 14px !important;
        bottom: -12px !important;
    }

    .hero-dynamic-subtext {
        font-size: 0.86rem !important;
        line-height: 1.55 !important;
    }

    .mockup-hex-wrapper {
        width: 100% !important;
        max-width: 275px !important;
        height: 240px !important;
        margin: 15px auto 5px auto !important;
    }

    .mockup-hex-outer {
        width: 100% !important;
        max-width: 265px !important;
        height: 225px !important;
    }

    .about-eyebrow-pill,
    .services-pill-badge,
    .why-us-tag,
    .gal-badge-pill,
    .contact-badge-pill {
        font-size: 0.72rem !important;
        padding: 5px 12px !important;
    }

    .floating-actions {
        bottom: 14px;
        right: 12px;
        gap: 8px;
    }

    .float-btn {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }

    .wa-popup {
        width: calc(100vw - 24px);
        right: 12px;
        bottom: 74px;
    }

    .footer-heading {
        font-size: 1.05rem;
    }
}

/* 8. iPhone SE & Ultra-Compact Mobile (320px to 360px) */
@media (max-width: 360px) {
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .header-inner {
        height: 60px !important;
    }

    .nav-menu {
        top: 60px !important;
        max-height: calc(100vh - 60px) !important;
    }

    .logo-brand img, .logo-img {
        height: 36px !important;
        max-height: 36px !important;
    }

    .hero-title, .gal-hero-title {
        font-size: 1.5rem !important;
        word-break: break-word;
    }

    .circle-headline,
    .hero-company-title {
        font-size: 1.4rem !important;
    }

    .mockup-hex-wrapper {
        max-width: 240px !important;
        height: 215px !important;
    }

    .mockup-hex-outer {
        max-width: 230px !important;
        height: 200px !important;
    }

    .top-bar-marquee {
        font-size: 0.72rem;
    }

    .btn, .gal-tab, .btn-red-pill {
        padding: 8px 12px !important;
        font-size: 0.78rem !important;
    }

    .floating-actions {
        bottom: 10px;
        right: 8px;
        gap: 6px;
    }

    .float-btn {
        width: 38px;
        height: 38px;
        font-size: 0.95rem;
    }

    .wa-popup {
        width: calc(100vw - 16px);
        right: 8px;
        bottom: 66px;
        padding: 14px;
    }
}

/* ============================================================
   IN-PAGE BROCHURE PDF VIEWER MODAL
   ============================================================ */
.brochure-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(7, 25, 43, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.brochure-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.brochure-modal-container {
    width: 100%;
    max-width: 1050px;
    height: 90vh;
    max-height: 900px;
    background: #0B2240;
    border-radius: 18px;
    border: 1px solid rgba(0, 174, 239, 0.3);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 174, 239, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.95) translateY(20px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.brochure-modal-overlay.active .brochure-modal-container {
    transform: scale(1) translateY(0);
}

.brochure-modal-header {
    background: linear-gradient(90deg, #07192B 0%, #0D2B4D 100%);
    padding: 16px 24px;
    border-bottom: 2px solid #ED1C24;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
}

.brochure-modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brochure-pdf-icon {
    font-size: 1.8rem;
    color: #ED1C24;
}

.brochure-modal-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.2;
}

.brochure-modal-sub {
    font-size: 0.8rem;
    color: #00C6FF;
    font-weight: 600;
}

.brochure-modal-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-brochure-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-brochure-dl {
    background: linear-gradient(135deg, #ED1C24 0%, #C90E15 100%);
    color: #FFFFFF !important;
    box-shadow: 0 4px 15px rgba(237, 28, 36, 0.4);
}

.btn-brochure-dl:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(237, 28, 36, 0.6);
}

.brochure-modal-close {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    font-size: 1.5rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.brochure-modal-close:hover {
    background: #ED1C24;
    border-color: #ED1C24;
    transform: rotate(90deg);
}

.brochure-modal-body {
    flex: 1;
    position: relative;
    background: #1A2634;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.brochure-iframe {
    width: 100%;
    height: 100%;
    border: none;
    flex: 1;
    display: block;
}

.brochure-mobile-fallback {
    display: none;
    padding: 30px 20px;
    text-align: center;
    color: #FFFFFF;
}

.bmf-icon {
    font-size: 3rem;
    color: #ED1C24;
    margin-bottom: 12px;
}

.brochure-mobile-fallback h4 {
    font-size: 1.2rem;
    margin-bottom: 8px;
    color: #FFFFFF;
}

.brochure-mobile-fallback p {
    font-size: 0.9rem;
    color: #94A3B8;
    max-width: 400px;
    margin: 0 auto 20px;
    line-height: 1.5;
}

.btn-bmf-download {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #ED1C24 0%, #C90E15 100%);
    color: #FFFFFF;
    font-size: 0.95rem;
    font-weight: 800;
    padding: 14px 28px;
    border-radius: 30px;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(237, 28, 36, 0.4);
}

@media (max-width: 768px) {
    .brochure-modal-overlay {
        padding: 10px;
    }
    .brochure-modal-container {
        height: 92vh;
        border-radius: 14px;
    }
    .brochure-modal-header {
        padding: 12px 16px;
    }
    .brochure-pdf-icon {
        font-size: 1.4rem;
    }
    .brochure-modal-title {
        font-size: 0.98rem;
    }
    .brochure-modal-sub {
        font-size: 0.72rem;
    }
    .btn-brochure-dl span {
        display: none;
    }
    .btn-brochure-dl {
        padding: 8px 12px;
        border-radius: 10px;
    }
}

/* ============================================================
   Word-by-Word Text Entrance Animation
   ============================================================ */
.word-anim {
    display: inline-block;
    opacity: 0;
    transform: translateY(18px) scale(0.96);
    animation: wordReveal 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
    white-space: pre;
    will-change: transform, opacity;
}

@keyframes wordReveal {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ==========================================================================
   GET QUOTE MODAL POPUP
   ========================================================================== */
.quote-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.quote-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.quote-modal-card {
    background: #ffffff;
    width: 100%;
    max-width: 520px;
    max-height: 92vh;
    overflow-y: auto;
    border-radius: 18px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    position: relative;
    transform: scale(0.92) translateY(15px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.quote-modal-overlay.active .quote-modal-card {
    transform: scale(1) translateY(0);
}

.quote-modal-header {
    background: linear-gradient(135deg, #0b2a4a 0%, #1e3a8a 100%);
    padding: 16px 22px;
    color: #ffffff;
    border-top-left-radius: 17px;
    border-top-right-radius: 17px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.quote-modal-header h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.quote-modal-header h3 i {
    color: #ef4444;
}

.quote-modal-close {
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.quote-modal-close:hover {
    background: #ef4444;
    color: #ffffff;
    transform: translateY(-50%) rotate(90deg);
}

.quote-modal-body {
    padding: 20px 22px 24px 22px;
}

.quote-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 600px) {
    .quote-form-grid {
        grid-template-columns: 1fr;
    }
    .quote-modal-body {
        padding: 20px;
    }
}

.quote-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.quote-form-group.full-width {
    grid-column: 1 / -1;
}

.quote-form-group label {
    font-size: 0.84rem;
    font-weight: 600;
    color: #334155;
}

.quote-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.quote-input-wrapper i {
    position: absolute;
    left: 14px;
    color: #94a3b8;
    font-size: 0.95rem;
    pointer-events: none;
}

.quote-input-wrapper input,
.quote-input-wrapper select,
.quote-input-wrapper textarea {
    width: 100%;
    padding: 11px 14px 11px 40px;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    font-size: 0.92rem;
    color: #0f172a;
    background: #f8fafc;
    transition: all 0.2s ease;
    font-family: inherit;
}

.quote-input-wrapper textarea {
    padding: 11px 14px 11px 40px;
    min-height: 85px;
    resize: vertical;
}

.quote-input-wrapper input:focus,
.quote-input-wrapper select:focus,
.quote-input-wrapper textarea:focus {
    outline: none;
    border-color: #ef4444;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12);
}

.btn-submit-quote {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.35);
    transition: all 0.3s ease;
    margin-top: 8px;
}

.btn-submit-quote:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(239, 68, 68, 0.45);
}

.quote-success-state {
    text-align: center;
    padding: 30px 15px;
    display: none;
}

.quote-success-state i.success-icon {
    font-size: 3.5rem;
    color: #10b981;
    margin-bottom: 12px;
    animation: popIn 0.4s ease;
}

.quote-success-state h4 {
    font-size: 1.4rem;
    color: #0f172a;
    margin-bottom: 8px;
    font-weight: 700;
}

.quote-success-state p {
    color: #64748b;
    font-size: 0.92rem;
    margin-bottom: 18px;
}

/* ==========================================================================
   NEW QUOTE MODAL DESIGN OVERRIDES (INDUSTRIAL QUOTE)
   ========================================================================== */
.quote-modal-header.new-design {
    background: #1f2937;
    color: #ffffff;
}

.quote-modal-header.new-design h3 {
    color: #ffffff;
    font-size: 1.15rem;
}

span.req {
    color: #ef4444;
    font-weight: 700;
}

.quote-input-wrapper.no-icon input,
.quote-input-wrapper.no-icon select,
.quote-input-wrapper.no-icon textarea {
    padding: 11px 14px;
    background: #ffffff;
    border-color: #cbd5e1;
}

.btn-submit-quote.new-btn {
    width: max-content;
    padding: 12px 28px;
    background: #d92424;
    border-radius: 30px;
    box-shadow: 0 4px 10px rgba(217, 36, 36, 0.25);
}

.btn-submit-quote.new-btn:hover {
    background: #b91c1c;
    box-shadow: 0 6px 14px rgba(217, 36, 36, 0.35);
}

.quote-form-group.form-submit-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
}

/* ==============================================================
   UNIFIED INNER PAGE HERO TITLE SIZING (ALL PAGES IDENTICAL)
   ============================================================== */
.about-hero-title,
.contact-hero-title,
.gal-hero-title,
.prod-hero-title,
.page-hero-title,
.globe-hero-title {
    font-size: clamp(2rem, 3.5vw, 2.75rem) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
}

@media (max-width: 991px) {
    .about-hero-title,
    .contact-hero-title,
    .gal-hero-title,
    .prod-hero-title,
    .page-hero-title,
    .globe-hero-title {
        font-size: clamp(1.85rem, 5vw, 2.35rem) !important;
        line-height: 1.22 !important;
    }
}

@media (max-width: 768px) {
    .about-hero-title,
    .contact-hero-title,
    .gal-hero-title,
    .prod-hero-title,
    .page-hero-title,
    .globe-hero-title {
        font-size: clamp(1.65rem, 6vw, 2rem) !important;
        line-height: 1.24 !important;
    }
}

@media (max-width: 480px) {
    .about-hero-title,
    .contact-hero-title,
    .gal-hero-title,
    .prod-hero-title,
    .page-hero-title,
    .globe-hero-title {
        font-size: 1.6rem !important;
        line-height: 1.25 !important;
    }
}

/* Smooth transition for Application Spotlight cards across all product pages */
.app-spotlight-display {
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 0, 0.2, 1) !important;
}


/* ==========================================================================
   GLOBAL SECTION SIZE REDUCTION & SCROLL ALIGNMENT (ALL PAGES)
   Decreases height and padding across all sections for optimal screen fitting
   ========================================================================== */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 85px;
}

section[id], [id] {
    scroll-margin-top: 85px;
}

.section-padding {
    padding: clamp(32px, 4.5vh, 52px) 0 !important;
}

.page-hero, .subpage-hero, .hero-section {
    min-height: auto !important;
    padding: clamp(35px, 5vh, 55px) 0 !important;
}

/* ==========================================================================
   COMPACT INNER HERO & LOCATION PAGES HERO SECTION
   ========================================================================== */
.hero-breadcrumb-center {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 auto !important;
    margin-bottom: 0 !important;
    width: auto !important;
}

.hero-breadcrumb-center .side-hero-breadcrumb {
    justify-content: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 500;
}

.hero-breadcrumb-center .crumb-sep {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    margin: 0 2px;
}

/* Location pages hero section (.cvt-hero) - compact and shorter */
.cvt-hero {
    padding: clamp(20px, 3vh, 32px) 0 !important;
}

.cvt-hero-grid {
    gap: 28px !important;
}

.cvt-badge {
    margin-bottom: 10px !important;
    padding: 5px 14px !important;
    font-size: 11.5px !important;
}

.cvt-hero h1 {
    font-size: clamp(24px, 3.2vw, 36px) !important;
    margin-bottom: 10px !important;
    line-height: 1.25 !important;
}

.cvt-hero-trust-pill {
    margin-bottom: 10px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
}

.cvt-hdesc {
    margin-bottom: 14px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.cvt-hbtns {
    margin-top: 10px !important;
}

.hero-main-display {
    max-height: 280px !important;
}

.hero-main-display img {
    max-height: 250px !important;
    object-fit: contain !important;
}

/* ==========================================================================
   REDESIGNED SITE FOOTER (Matching Reference Screenshot)
   ========================================================================== */
.site-footer,
.footer-section {
    background-color: #070b11 !important;
    background-image: 
        linear-gradient(rgba(7, 11, 17, 0.92), rgba(5, 8, 13, 0.95)),
        radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px) !important;
    background-size: auto, 24px 24px !important;
    color: #94a3b8 !important;
    padding: 55px 0 20px !important;
    border-top: 3.5px solid #ED1C24 !important;
    position: relative;
    z-index: 20;
}

.footer-top-accent-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3.5px;
    background: linear-gradient(90deg, #ED1C24 0%, #00C6FF 50%, #ED1C24 100%);
    box-shadow: 0 0 15px rgba(237, 28, 36, 0.5);
}

.footer-top-grid {
    display: grid !important;
    grid-template-columns: 1.15fr 0.75fr 1.15fr 1.45fr !important;
    gap: 32px !important;
    align-items: flex-start !important;
    margin-bottom: 28px !important;
    padding-bottom: 0 !important;
}

/* Col 1: Brand Info */
.footer-brand-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.footer-brand-col .footer-logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 auto 16px auto !important;
    text-align: center !important;
}

.footer-brand-col .footer-logo-icon-box {
    background: #FFFFFF !important;
    padding: 10px 20px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.footer-brand-col .footer-logo-icon-box img {
    height: 52px;
    width: auto;
    object-fit: contain;
}

.footer-brand-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.footer-brand-col .footer-about-text {
    width: 100%;
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
    color: #cbd5e1 !important;
    margin-bottom: 16px !important;
    text-align: center !important;
}

.footer-brand-col .footer-social-wrap {
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 10px;
}

.footer-brand-col .footer-follow-lbl {
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
}

.footer-brand-col .footer-ig-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    font-size: 1.25rem;
    transition: all 0.25s ease;
    text-decoration: none;
}

.footer-brand-col .footer-ig-btn:hover {
    color: #ED1C24 !important;
    transform: scale(1.15);
}

/* Google Review Button (Blue Pill) */
.btn-google-review-blue {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #2b7fff !important;
    color: #ffffff !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    padding: 11px 22px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 16px rgba(43, 127, 255, 0.35);
    transition: all 0.25s ease;
}

.btn-google-review-blue:hover {
    background: #1a6be6 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(43, 127, 255, 0.5);
}

.btn-google-review-blue .star-icon {
    color: #ffd700;
    font-size: 1rem;
}

/* Titles across columns */
.footer-col-title {
    color: #ffffff !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    margin-bottom: 20px !important;
    text-align: left !important;
    position: relative;
    padding-bottom: 0 !important;
}

.footer-col-title::after {
    display: none !important;
}

/* Col 2: Useful Links */
.footer-links-col {
    text-align: left;
}

.footer-nav-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-nav-links li {
    margin: 0;
    padding: 0;
}

.footer-nav-links a {
    color: #f1f5f9 !important;
    font-size: 0.94rem !important;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: all 0.22s ease;
}

.footer-nav-links a i {
    color: #cbd5e1;
    font-size: 0.82rem;
    transition: transform 0.22s ease, color 0.22s ease;
}

.footer-nav-links a:hover {
    color: #00c6ff !important;
    transform: translateX(4px);
}

.footer-nav-links a:hover i {
    color: #ED1C24;
}

/* Col 3: Contact Info */
.footer-contact-col {
    text-align: left;
}

.footer-ci-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-ci-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 12px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
}

.footer-ci-item:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-ci-item .ci-lbl {
    font-size: 0.95rem;
    font-weight: 500;
    color: #94a3b8;
    display: flex;
    align-items: center;
    margin: 4px 0 0 0;
    flex-shrink: 0;
}

.footer-ci-item .ci-lbl i {
    color: #94a3b8;
    font-size: 0.95rem;
}

.footer-ci-item .ci-val {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.45;
}

.footer-ci-item .ci-val a {
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
    transition: color 0.2s ease;
}

.footer-ci-item .ci-val a:hover {
    color: #00c6ff !important;
    text-decoration: none;
}

.footer-ci-item .ci-val p {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.45;
    margin: 0;
}

/* Col 4: Location Map */
.footer-map-col {
    text-align: left;
}

.footer-map-card-box,
.footer-map-frame-box {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: #0d1520;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}

.footer-map-frame-box:hover {
    border-color: rgba(237, 28, 36, 0.6);
    box-shadow: 0 8px 25px rgba(237, 28, 36, 0.25);
    transform: translateY(-2px);
}

.map-open-pill {
    position: absolute;
    top: 8px;
    left: 8px;
    max-width: calc(100% - 16px);
    z-index: 5;
    background: rgba(255, 255, 255, 0.96);
    color: #1e293b !important;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 5px 9px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.map-open-pill i.fa-location-dot {
    color: #ED1C24;
    font-size: 0.82rem;
    flex-shrink: 0;
}

.map-open-pill i.fa-arrow-up-right-from-square {
    color: #1a73e8;
    font-size: 0.68rem;
    margin-left: 2px;
    flex-shrink: 0;
}

.map-open-pill:hover {
    background: #ffffff;
    color: #0d47a1 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.footer-map-click-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    cursor: pointer;
    background: transparent;
    display: block;
    text-decoration: none;
}

.footer-map-iframe {
    display: block;
    width: 100%;
    height: 240px;
    border: none;
}

/* Bottom Copyright Bar */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 22px !important;
    padding-bottom: 5px !important;
    text-align: center !important;
    font-size: 0.88rem !important;
    color: #64748b !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.footer-bottom p {
    margin: 0;
}

.footer-bottom strong {
    color: #f1f5f9;
}

.footer-bottom a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-bottom a:hover {
    color: #ED1C24;
}

.footer-dev-credit {
    font-size: 0.82rem;
    color: #64748b;
}

.footer-dev-credit a,
.footer-dev-link {
    color: #ffffff !important;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-dev-credit a:hover,
.footer-dev-credit a:active,
.footer-dev-credit a:focus,
.footer-dev-link:hover,
.footer-dev-link:active,
.footer-dev-link:focus {
    color: #ED1C24 !important;
}

/* Responsive Footer */
@media (max-width: 991px) {
    .footer-top-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 32px !important;
    }
}

@media (max-width: 640px) {
    .footer-top-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    .footer-brand-col {
        align-items: center;
        text-align: center;
        display: flex;
        flex-direction: column;
    }
    .footer-brand-col .footer-about-text {
        text-align: center !important;
        font-size: 0.92rem !important;
        line-height: 1.6 !important;
        max-width: 380px;
        margin: 0 auto 16px auto !important;
    }
}

/* Product Social Action Buttons (Side-by-side in 1 line) */
.product-social-icons.row,
.product-social-icons {
    margin-top: 15px;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

.product-social-icons .col-6,
.product-social-icons > div {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
}

/* ==========================================================================
   GLOBAL RESPONSIVENESS ENHANCEMENTS (All Pages & Mobile Devices)
   ========================================================================== */

/* Universal Image, Video & Embedded Content Fluidity */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* Table Responsiveness */
table {
    max-width: 100%;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Text Wrapping Protection */
h1, h2, h3, h4, h5, h6, p, a, span {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Tablet & Smaller Devices (<= 991px) */
@media (max-width: 991.98px) {
    .container {
        padding: 0 16px;
    }
    
    .section-padding {
        padding: 60px 0;
    }

    .header-inner {
        padding: 10px 16px;
    }

    .logo-img {
        max-height: 44px;
        width: auto;
    }
}

/* Mobile Devices (<= 768px) */
@media (max-width: 768px) {
    .section-padding {
        padding: 48px 0;
    }

    .section-title,
    .services-main-title {
        font-size: clamp(1.6rem, 5vw, 2.2rem) !important;
        line-height: 1.25 !important;
    }

    .section-subtitle,
    .services-subtext {
        font-size: 0.95rem !important;
    }

    .top-bar {
        font-size: 0.78rem;
    }

    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

/* Small Smartphone Screens (<= 480px) */
@media (max-width: 480px) {
    .container {
        padding: 0 12px;
    }

    .section-padding {
        padding: 38px 0;
    }

    .logo-img {
        max-height: 38px;
    }

    .btn-red-pill,
    .header-quote-btn {
        padding: 8px 14px;
        font-size: 0.82rem;
    }

    .floating-actions {
        bottom: 16px !important;
        right: 12px !important;
        gap: 10px !important;
    }

    .float-btn {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.15rem !important;
    }

    .footer-col-title {
        font-size: 1rem !important;
    }
}

/* Ultra Small Screens (<= 360px) */
@media (max-width: 360px) {
    .container {
        padding: 0 10px;
    }

    .logo-img {
        max-height: 34px;
    }

    .services-main-title,
    .section-title {
        font-size: 1.45rem !important;
    }
}